/* =====================================================================================
   Accord-credit.fr : modernisation de l'ancien site (28/09/2026)
   Regle d'Ahmed : Accord garde SON squelette (organisation, blocs, couleurs, ordre).
   On ne change que la police, les finitions des composants et la nettete des images.
   Ce fichier est charge en dernier par templates/temp/front_office_page.tpl.
   Aucune regle d'Immo ici : Accord a son propre design.
   ===================================================================================== */

:root {
	--ac-police: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--ac-bleu: #435E79;          /* bleu ardoise d'Accord (bandeaux, menu, pied) */
	--ac-bleu-fonce: #2F4760;
	--ac-orange: #F3AC4B;        /* orange d'Accord (fonds, boutons) */
	--ac-orange-texte: #D98A1F;  /* orange un peu plus soutenu pour le texte sur fond blanc (lisibilite) */
	--ac-encre: #25303B;         /* titres */
	--ac-texte: #4F5B67;         /* texte courant */
	--ac-gris: #7A8591;
	--ac-ligne: #E2E7EC;
	--ac-fond: #F5F7F9;
	--ac-ombre: 0 1px 2px rgba(31, 42, 54, .06), 0 4px 14px rgba(31, 42, 54, .08);
	--ac-ombre-forte: 0 2px 4px rgba(31, 42, 54, .08), 0 10px 28px rgba(31, 42, 54, .14);
	--ac-rayon: 4px;
	--ac-rayon-carte: 6px;
}

/* ---------- Police : Plus Jakarta Sans sur le texte, jamais sur les polices d'icones ---------- */
body,
body :is(h1, h2, h3, h4, h5, h6, p, span, li, a, label, div, b, strong, em, small, cite, td, th,
	figcaption, blockquote, legend, option, input, select, textarea, button, dt, dd):not([class*="fa-"]):not(.fa):not([class*="icon"]):not([class*="ion-"]):not(i) {
	font-family: var(--ac-police) !important;
}
body {
	color: var(--ac-texte);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ---------- Titres de section (.for_titre) : plus nets, sans changer leur place ---------- */
.for_titre {
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--ac-encre);
}
.for_titre span,
.photo_base > figure .for_titre span,
.photo_interne > figure .for_titre span { color: var(--ac-orange-texte); }

/* ---------- En-tete ---------- */
.header_haut > .middle_width { padding: 14px 0 12px; }
.header_haut > .middle_width figure img { height: 54px; width: auto; }
.header_haut > .middle_width .link_header_haut > p,
.header_haut > .middle_width .link_header_haut > div { color: var(--ac-gris); }
.header_haut > .middle_width .link_header_haut .autre_lien_header_haut a {
	font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ac-bleu);
	transition: color .15s ease;
}
.header_haut > .middle_width .link_header_haut .autre_lien_header_haut a:hover { color: var(--ac-orange-texte); }

/* Boutons « Rappel gratuit » et « Acces prive » : meme forme, finition moderne */
.header_haut .rappel_gratuit_header_haut a,
.header_haut .acces_prive_header_haut a {
	white-space: nowrap;
	border-radius: var(--ac-rayon) !important;
	box-shadow: 0 1px 2px rgba(31, 42, 54, .12), 0 2px 6px rgba(31, 42, 54, .08) !important;
	font-weight: 700 !important; letter-spacing: .04em;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.header_haut .rappel_gratuit_header_haut a img,
.header_haut .acces_prive_header_haut a img { border-radius: var(--ac-rayon) 0 0 var(--ac-rayon) !important; }

/* Menu bleu */
.header_haut .nav-main { background-color: var(--ac-bleu); }
.header_haut .nav-main > .middle_width .nav-list__item a {
	font-size: 14px; font-weight: 500; letter-spacing: .03em; white-space: nowrap;
	position: relative;
}
.header_haut .nav-main > .middle_width .nav-list__item a:after {
	content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px;
	background: var(--ac-orange); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.header_haut .nav-main > .middle_width .nav-list__item a:hover:after,
.header_haut .nav-main > .middle_width .nav-list__item a.hvr-rectangle-out-active:after { transform: scaleX(1); }

/* ---------- Bandeau photo de l'accueil et des pages ---------- */
.photo_base > figure .for_titre,
.photo_interne > figure .for_titre {
	font-weight: 600; letter-spacing: .02em; color: var(--ac-encre);
	background-color: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* Les deux boutons du bandeau (Etude gratuite / Comparateur) : memes blocs, finition moderne */
.photo_base > figure .link_to_head > a {
	border-radius: var(--ac-rayon);
	box-shadow: var(--ac-ombre-forte);
	transition: transform .2s ease, box-shadow .2s ease;
}
.photo_base > figure .link_to_head > a:hover { transform: translateY(-2px); }
.photo_base > figure .link_to_head > a span {
	border-radius: 3px; border-color: rgba(255, 255, 255, .45);
	font-weight: 600; font-size: 17px; letter-spacing: .03em;
}
.photo_base > figure .link_to_head > a img { border-radius: 3px 0 0 3px; }

/* Tuiles des services (6 carres) */
.photo_base .liste_prestation_ac .middle_width .liste_prestation_site {
	background-color: #fff;
	border-radius: var(--ac-rayon-carte);
	box-shadow: 0 0 0 1px var(--ac-ligne), var(--ac-ombre);
	transition: box-shadow .2s ease, transform .2s ease;
}
.photo_base .liste_prestation_ac .middle_width .liste_prestation_site:hover {
	box-shadow: 0 0 0 2px var(--ac-orange), var(--ac-ombre-forte);
	transform: translateY(-2px);
}
.photo_base .liste_prestation_ac .middle_width .liste_prestation_site div > p { background-color: var(--ac-fond); border-radius: var(--ac-rayon); }
.photo_base .liste_prestation_ac .middle_width .liste_prestation_site div > p a {
	font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ac-encre);
}

/* ---------- Blocs et cartes ---------- */
.lien_aside a, .lien_aside img,
.content_liste_courtier_connecter_home,
.liste_latest_actu > div,
.pose_carte_france, .contact_home,
.offre_service_qualite, .newsletter_accueil,
.text_desc_home img {
	border-radius: var(--ac-rayon-carte);
}
.lien_aside a, .liste_latest_actu > div { overflow: hidden; box-shadow: var(--ac-ombre); transition: box-shadow .2s ease, transform .2s ease; }
.lien_aside a:hover, .liste_latest_actu > div:hover { box-shadow: var(--ac-ombre-forte); transform: translateY(-2px); }
.content_liste_courtier_connecter_home { transition: transform .2s ease; }
.content_liste_courtier_connecter_home:hover { transform: translateY(-3px); }

/* Tableau des derniers credits */
.in_content_credit_obtenu_accueil table { border-collapse: separate; border-spacing: 0; border-radius: var(--ac-rayon-carte); overflow: hidden; box-shadow: 0 0 0 1px var(--ac-ligne); }
.in_content_credit_obtenu_accueil table th { font-weight: 600; letter-spacing: .02em; }
.in_content_credit_obtenu_accueil table td { font-variant-numeric: tabular-nums; }

/* Simulateurs */
.liste_simulateur_immo_accueil .small_width > div { border-radius: var(--ac-rayon-carte); transition: transform .2s ease; }
.liste_simulateur_immo_accueil .small_width > div:hover { transform: translateY(-3px); }
.liste_simulateur_immo_accueil .small_width > div p,
.liste_simulateur_immo_accueil .small_width > div a { font-weight: 600; }

/* ---------- Boutons ---------- */
.link_to_conf a, .lien_video a, .derniers_avis_accueil .link a, .bloc_lien a,
.validForm, .btn_valider, button, input[type="submit"], input[type="button"], input[type="reset"],
.offre_service_qualite a {
	border-radius: var(--ac-rayon) !important;
	font-weight: 600;
	letter-spacing: .03em;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lien_video a, .derniers_avis_accueil .link a { box-shadow: var(--ac-ombre); }

/* ---------- Champs de saisie : 35 px, bordure fine, bordure noire au focus ---------- */
main input[type="text"], main input[type="email"], main input[type="tel"], main input[type="number"],
main input[type="password"], main select, main textarea,
.popup_block input[type="text"], .popup_block input[type="email"], .popup_block input[type="tel"],
.popup_block select, .popup_block textarea,
.newsletter_accueil input[type="text"], .newsletter_accueil input[type="email"] {
	border: 1px solid #C9D2DB;
	border-radius: var(--ac-rayon);
	background-color: #fff;
	color: var(--ac-encre);
	font-size: 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
main input[type="text"], main input[type="email"], main input[type="tel"], main input[type="number"],
main input[type="password"], main select,
.popup_block input[type="text"], .popup_block input[type="email"], .popup_block input[type="tel"], .popup_block select {
	min-height: 35px;
	padding: 0 10px;
}
main textarea, .popup_block textarea { padding: 8px 10px; }
main input:focus, main select:focus, main textarea:focus,
.popup_block input:focus, .popup_block select:focus, .popup_block textarea:focus,
.newsletter_accueil input:focus {
	outline: none;
	border-color: #1C2530;
	box-shadow: 0 0 0 3px rgba(67, 94, 121, .15);
}

/* ---------- Pied de page bleu ---------- */
footer { background-color: var(--ac-bleu); }
footer .link_map > div.menu_prima_foot .for_titre { color: var(--ac-orange); font-weight: 700; letter-spacing: .04em; }
footer a { transition: color .15s ease, opacity .15s ease; }
footer .seconta_foot_menu p a { color: rgba(255, 255, 255, .88); }
footer .seconta_foot_menu p a:hover { color: var(--ac-orange); }
footer .community .get_community { font-weight: 700; letter-spacing: .04em; }
p.copyright { color: var(--ac-gris); }

/* ---------- Images regenerees (nettes, double resolution) ---------- */
.offre_service_nl .middle_width .small_width .offre_service_qualite {
	background: url(../images_ac/offre-service.jpg) center / cover no-repeat;
	height: auto; min-height: 220px; padding-bottom: 24px;
}
.text_desc_home_parrain .small_width .detail_etape,
.pourquoi_ext .small_width .detail_etape {
	background-image: url(../images_ac/accueil-proximite.jpg);
	background-size: cover; background-position: center;
}
.photo_base > figure > img { display: block; width: 100%; max-width: 1300px; height: auto; }

@media (max-width: 767px) {
	.photo_base > figure .for_titre { font-size: 24px; line-height: 1.2; }
}

/* =====================================================================================
   PLEINE LARGEUR (demande d'Ahmed, 28/09/2026) : plus de boite de 1300 px centree.
   Les bandeaux (en-tete, menu, photo, sections de couleur, pied) vont d'un bord a l'autre ;
   le contenu reste dans une colonne lisible, plus large qu'avant.
   ===================================================================================== */
:root { --ac-colonne: 1440px; --ac-colonne-texte: 1320px; --ac-marge: 32px; }
body > header, body > main, body > footer,
header, main, footer {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
header section.header_haut, header .nav-main,
main > section, main > div, main > p,
footer > p.copyright { width: 100% !important; max-width: none !important; }
body .middle_width { width: min(var(--ac-colonne), calc(100% - 2 * var(--ac-marge))); max-width: none; }
body .small_width { width: min(var(--ac-colonne-texte), calc(100% - 2 * var(--ac-marge))); max-width: none; }
body .big_concent { width: min(var(--ac-colonne-texte), calc(100% - 2 * var(--ac-marge))); max-width: none; }

/* Bandeau photo : toute la largeur, hauteur proportionnee a l'ecran */
.photo_base > figure, .photo_interne > figure { width: 100%; max-width: none; position: relative; overflow: hidden; }
.photo_base > figure > img {
	width: 100%; max-width: none; height: clamp(420px, 36vw, 680px); object-fit: cover; object-position: 60% 40%;
}
.photo_interne > figure > img { width: 100%; max-width: none; height: auto; min-height: 175px; object-fit: cover; }
.photo_base > figure .link_to_head { width: min(1100px, 86%); left: 50%; transform: translateX(-50%); }

@media (max-width: 767px) {
	:root { --ac-marge: 16px; }
	.photo_base > figure > img { height: auto; }
}
@media (min-width: 768px) {
	/* citation du bandeau alignee sur la colonne de contenu */
	.photo_base > figure > cite {
		left: calc(max(var(--ac-marge), (100% - var(--ac-colonne)) / 2) + 50px);
		top: clamp(50px, 5vw, 96px);
		font-size: clamp(31px, 2.3vw, 42px); font-weight: 500; line-height: 1.25;
		text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
	}
}