/* Accord refonte 2026 : organisation UI/UX - relation (lot parallele)
   Pages : contact, temoignages (liste + depot d'avis), partenaires professionnels, banques et assurances,
   pages regionales (recherche.php), parrainage, recrutement.
   Principe : la tache principale de chaque page est visible au premier ecran (1366 x 768). Arrondis <= 7 px. */

/* =====================================================================================
   1. Pages formulaire : Contact et Deposer un temoignage
   Bandeau plus bas sur ces deux pages (visages entiers) et formulaire resserre : le bouton d'envoi
   est visible sans defiler. Le texte d'accueil passe dans la colonne de droite (reassurance a cote).
   ===================================================================================== */
body[rel$="contact/contact.tpl"] .ac-page-hero-in,
body[rel$="temoignages/form_temoignage.tpl"] .ac-page-hero-in { min-height: 232px; padding-top: 22px; padding-bottom: 22px; }
body[rel$="contact/contact.tpl"] .ac-page-hero .ac-page-intro,
body[rel$="temoignages/form_temoignage.tpl"] .ac-page-hero .ac-page-intro { margin-bottom: 0; }

.ux-formpage.ac-section { padding: 24px 0 48px; }
.ux-formpage .ac-carte-form { padding: 22px 26px 20px; }
.ux-formpage .ac-carte-form > .ac-titre-bloc { margin-bottom: 14px; }
.ux-formpage .ac-form-grille { gap: 12px; }
main .ux-formpage form.ac-form .ac-champ input { height: 50px; min-height: 50px !important; }
main .ux-formpage form.ac-form .ac-champ textarea { min-height: 104px !important; height: 104px; }
.ux-formpage .ac-form-bas { margin-top: 12px; }
.ux-formpage .ac-form-note { margin-top: 8px; }
.ux-formpage .ac-carte-infos { padding: 22px 24px; }
.ux-formpage-texte { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ac-texte); }
.ux-formpage .ac-coordonnees { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ac-ligne); }
.ux-formpage .ac-contact-cote { position: sticky; top: 124px; }
.ux-formpage .ac-raccourci { padding: 13px 16px; }
/* depot d'avis : code postal + ville et la note sur la meme ligne */
.ux-formavis .ac-champ-duo.ac-champ-large, .ux-formavis .ac-note-choix { grid-column: auto; }
.ux-formavis .ac-note-choix { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 50px; }
.ux-formavis .ac-note-choix-libelle { margin: 0; }

@media (max-width: 1140px) {
	.ux-formpage .ac-contact-cote { position: static; }
}
@media (max-width: 767px) {
	.ux-formpage.ac-section { padding: 18px 0 36px; }
	.ux-formpage .ac-carte-form { padding: 18px 16px; }
	.ux-formavis .ac-champ-duo.ac-champ-large, .ux-formavis .ac-note-choix { grid-column: 1 / -1; }
}

/* =====================================================================================
   2. Temoignages : compteur d'avis, grille dense sur 2 colonnes, un seul bouton "Donner mon avis"
   quand aucun avis n'est encore publie (etat vide compact).
   ===================================================================================== */
.ux-temoignages.ac-section { padding: 28px 0 48px; }
.ux-temoignages .ac-note-site { top: 131px; padding: 22px; }
.ux-liste-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ux-liste-tete .ac-titre-bloc { margin: 0; }
.ux-compteur { margin: 0; font-size: 14px; color: var(--ac-gris); }
.ux-compteur strong { color: var(--ac-encre); font-weight: 800; }
.ux-avis-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ux-avis-grille > .ac-avis-carte { padding: 18px 20px; gap: 10px; }
.ux-avis-grille > .ac-avis-carte blockquote { font-size: 14.5px; line-height: 1.55; }
.ux-avis-grille > .ac-avis-compact { grid-column: 1 / -1; }
.ux-temoignages-in:has(.ac-avis-compact) .ac-note-site .ac-btn,
.ux-temoignages .ac-temoignages-in:has(.ac-avis-compact) .ac-note-site > .ac-btn { display: none; }
@media (max-width: 900px) {
	.ux-avis-grille { grid-template-columns: 1fr; }
}
@media (max-width: 1140px) {
	/* mobile / tablette : les avis d'abord, la note globale ensuite */
	.ux-temoignages .ac-note-site { order: 2; }
}

/* =====================================================================================
   3. Partenaires professionnels / banques et assurances
   Barre de recherche collante avec nombre de resultats, acces rapide par type et par lettre,
   grille dense (4 colonnes de fiches compactes). Le lien "Plus de details" ne menait nulle part
   (href="#") : masque.
   ===================================================================================== */
.ux-part.ac-section { padding: 24px 0 48px; }
.ux-part .ac-part-cote { top: 131px; gap: 12px; padding: 20px; max-height: calc(100vh - 147px); overflow: auto; }
.ux-part .ac-part-compteur strong { font-size: 44px; }
.ux-part-types { display: grid; gap: 4px; }
.ux-part-types a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 0 10px 0 12px; border-radius: var(--ac-r-max, 7px); background: rgba(255, 255, 255, .06); color: #fff !important; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background-color .15s ease; }
.ux-part-types a:hover { background: rgba(255, 255, 255, .14); }
.ux-part-types b { min-width: 34px; padding: 2px 8px; border-radius: var(--ac-r-max, 7px); background: var(--ac-ambre); color: var(--ac-nuit); font-size: 13px; font-weight: 800; text-align: center; }
.ux-part .ac-part-principal { gap: 12px; }
.ux-part .ac-part-entete { position: sticky; top: 115px; z-index: 5; margin: -6px 0 0; padding: 8px 0; background: var(--ac-fond); box-shadow: 0 1px 0 var(--ac-ligne); }
.ux-part .ac-part-entete .ac-titre-bloc { font-size: 20px; margin-right: auto; }
.ux-part-resultat { margin: 0; font-size: 14px; font-weight: 700; color: var(--ac-ardoise); white-space: nowrap; }
.ux-part-resultat[hidden] { display: none; }
.ux-part .ac-part-groupes { gap: 18px; }
.ux-part .ac-part-groupe { scroll-margin-top: 180px; gap: 10px; }
.ux-part .ac-part-groupe-tete { padding-bottom: 8px; }
.ux-part .ac-part-groupe-tete h3 { font-size: 16.5px; }
.ux-part .ac-part-grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ux-part .ac-part-grille-4 > .ac-part-carte:last-of-type { grid-column: auto; }
.ux-part .ac-part-carte.ac-part-carte-mini { gap: 10px; padding: 10px; align-items: center; }
.ux-part .ac-part-carte-mini:hover { transform: none; }
.ux-part .ac-part-carte-mini .ac-part-logo { width: 64px; height: 48px; padding: 4px; }
.ux-part .ac-part-carte-mini .ac-part-logo img { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.ux-part .ac-part-carte-mini .ac-part-repli { width: 24px !important; height: 24px !important; }
.ux-part .ac-part-carte-mini .ac-part-nom { font-size: 14px; line-height: 1.25; }
.ux-part .ac-part-carte-mini .ac-part-adresse { font-size: 12.5px; line-height: 1.35; }
.ux-part .ac-part-corps > .ac-lien-fleche[href="#"] { display: none; }
.ux-part .ac-part-carte.ux-repere { box-shadow: 0 0 0 2px var(--ac-ambre), var(--ac-ombre-1); }
/* acces direct par lettre */
.ux-alpha { display: flex; flex-wrap: wrap; gap: 4px; }
.ux-alpha[hidden] { display: none; }
.ux-alpha button { min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid var(--ac-ligne); border-radius: var(--ac-r-max, 7px); background: #fff; color: var(--ac-encre); font: 700 13px var(--ac-police); cursor: pointer; }
.ux-alpha button:hover { border-color: var(--ac-nuit); background: var(--ac-nuit); color: #fff; }
.ux-alpha button:disabled { opacity: .35; cursor: default; background: #fff; color: var(--ac-encre); border-color: var(--ac-ligne); }
/* partenaires professionnels : fiche unique sur toute la largeur, plus compacte */
.ux-part-entites .ac-part-carte { padding: 14px; }

@media (max-width: 1280px) {
	.ux-part .ac-part-grille-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1140px) {
	.ux-part .ac-part-cote { max-height: none; overflow: visible; }
	.ux-part .ac-part-entete { position: static; margin: 0; padding: 0; box-shadow: none; }
}
@media (max-width: 767px) {
	.ux-part .ac-part-grille-4 { grid-template-columns: 1fr; }
	.ux-part .ac-part-entete .ac-titre-bloc { font-size: 18px; }
	.ux-part .ac-part-filtre { width: 100%; }
	.ux-part .ac-part-cote { gap: 10px; padding: 14px 16px; }
	/* mobile : bloc de tete compact pour que la liste arrive vite */
	.ux-part .ac-part-compteur strong { font-size: 32px; }
	.ux-part .ac-part-compteur span { font-size: 14px; }
	.ux-part-types { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
	.ux-part .ac-part-cote-titre { margin: 0; padding-top: 10px; }
	.ux-part .ac-part-cote:not(:has(.ac-part-regions .actif)) > .ac-btn { display: none; }
}
.ux-part .ac-part-carte.ac-part-carte-mini { align-items: flex-start; }

/* =====================================================================================
   4. Pages regionales (recherche.php, courtier-credit-*.html)
   Tache principale : trouver un expert pres de chez soi. Experts de la zone en tete de colonne,
   a droite un choix de zone (liste deroulante + carte) colle en haut de l'ecran.
   ===================================================================================== */
.ux-region.ac-region-corps { padding: 24px 0 44px; }
.ux-region .ac-region-principal, .ux-region .ac-region-cote { gap: 16px; }
.ux-region .ac-region-bloc { padding: 22px; }
.ux-trouver { padding: 20px; }
.ux-trouver .ac-titre-bloc { margin-bottom: 12px; font-size: 19px; }
.ux-trouver-form { margin: 0 0 14px; }
.ux-trouver-form label { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.ux-trouver-ligne { display: flex; gap: 8px; }
.ux-trouver-ligne select { flex: 1; min-width: 0; height: 44px; padding: 0 10px; border: 0; border-radius: var(--ac-r-max, 7px); background: #fff; font: 600 14.5px var(--ac-police); color: var(--ac-encre); }
.ux-trouver-ligne .ac-btn { min-height: 44px; padding: 0 16px; }
.ux-trouver-aide { margin: 0 0 8px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.ux-trouver .content_aside_map_region { margin-bottom: 14px !important; }
.ux-trouver svg { max-height: 220px; }
.ux-trouver .ac-region-valeurs { margin-top: 0; }
/* bande des services : desormais sous le contenu */
.ac-region .ac-region-corps + .ac-services { margin-top: 0; padding: 0 0 40px; background: var(--ac-fond); }


/* =====================================================================================
   5. Parrainage (/parrainage/)
   L'offre (gains du parrain, avantages du filleul) en tete, sommaire colle a gauche avec le bouton
   "Devenez parrain", sections sur un meme fond, FAQ en accordeon, reglement en largeur de lecture.
   ===================================================================================== */
.uxp { background: var(--ac-fond); }
.uxp-grille { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; padding: 24px 0 48px; }
.uxp-sommaire { position: sticky; top: 131px; display: grid; gap: 4px; padding: 14px 10px; background: #fff; border: 1px solid var(--ac-ligne); border-radius: var(--ac-r-max, 7px); font-family: var(--ac-police); }
.uxp-sommaire-titre { margin: 0 8px 4px; font-size: 13px; font-weight: 700; color: var(--ac-gris); }
.uxp-sommaire ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.uxp-sommaire a:not(.ac-btn) { display: block; padding: 7px 8px; border-radius: var(--ac-r-max, 7px); color: var(--ac-encre); font-size: 14.5px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.uxp-sommaire a:not(.ac-btn):hover { background: var(--ac-fond); }
.uxp-sommaire a.uxp-actif { background: var(--ac-ambre-clair); box-shadow: inset 3px 0 0 var(--ac-ambre); }
.uxp-sommaire .ac-btn { margin: 10px 4px 2px; }
.uxp-contenu { min-width: 0; display: grid; gap: 16px; }
.uxp-contenu > .acp-section { padding: 0; background: none; scroll-margin-top: 131px; }
.uxp-contenu .ac-wrap { width: auto; margin: 0; }
.uxp-contenu .acp-carte { border: 1px solid var(--ac-ligne); box-shadow: none; }
.uxp-contenu .acp-titre-section { margin-bottom: 12px !important; font-size: 22px; }
.uxp-contenu .acp-duo { gap: 16px; }
/* l'offre : la carte du parrain (gains) d'abord, a gauche et plus large */
#offre .acp-duo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
#offre .acp-parrain { order: -1; }
#offre .acp-paliers span { white-space: normal; line-height: 1.3; }
#offre .acp-filleul .acp-avantages { align-content: start; gap: 16px; margin-top: 4px !important; }
#offre .acp-carte { padding: 24px 26px; }
/* reglement : ~70 caracteres par ligne */
.uxp-contenu .acp-modalites > ol { column-gap: 32px; }
/* FAQ en accordeon */
.uxp-contenu .acp-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.uxp-contenu details.acp-q { padding: 0; }
.uxp-contenu details.acp-q summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; }
.uxp-contenu details.acp-q summary::-webkit-details-marker { display: none; }
.uxp-contenu details.acp-q summary:after { content: "+"; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--ac-r-max, 7px); background: var(--ac-fond); font-weight: 800; color: var(--ac-ardoise); }
.uxp-contenu details.acp-q[open] summary:after { content: "\2212"; }
.uxp-contenu details.acp-q summary h3 { margin: 0 !important; font-size: 15px; line-height: 1.35; }
.uxp-contenu details.acp-q p { margin: 0; padding: 0 16px 14px; }

@media (max-width: 1140px) {
	.uxp-grille { grid-template-columns: 1fr; gap: 14px; padding-top: 16px; }
	.uxp-sommaire { position: static; display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 8px; }
	.uxp-sommaire-titre { display: none; }
	.uxp-sommaire ul { display: flex; gap: 4px; }
	.uxp-sommaire a:not(.ac-btn) { white-space: nowrap; }
	.uxp-sommaire .ac-btn { display: none; }
	#offre .acp-duo { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.uxp-contenu .acp-faq { grid-template-columns: 1fr; }
}

/* =====================================================================================
   6. Recrutement : sous-menu de la rubrique allege et integre a l'en-tete
   (retour d'Ahmed : la barre sombre faisait "deuxieme en-tete"). Barre claire d'onglets sous le
   menu principal, onglet actif souligne en ambre ; sur mobile, bouton "Menu recrutement" clair.
   ===================================================================================== */
.rc-nav { background: #fff; border-top: 0; border-bottom: 1px solid var(--ac-ligne); }
.rc-body .ac-entete { border-bottom-color: #EEF1F5; }
.rc-nav-liste { min-height: 42px; gap: 0; }
.rc-nav-liste > li > a, .rc-nav-ouvrir { padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--ac-texte); }
.rc-nav-liste > li > a:hover, .rc-nav-ouvrir:hover { color: var(--ac-encre); box-shadow: inset 0 -2px 0 var(--ac-ligne); }
.rc-nav-liste > li > a[aria-current="page"], .rc-nav-actif > .rc-nav-ouvrir { color: var(--ac-encre); box-shadow: inset 0 -2px 0 var(--ac-ambre); }
.rc-nav-ouvrir svg { width: 14px; height: 14px; color: var(--ac-gris); }
.rc-nav-sous { border: 1px solid var(--ac-ligne); border-top: 0; }
@media (max-width: 900px) {
	.rc-nav-bouton { min-height: 42px; color: var(--ac-encre); font-size: 14.5px; }
	.rc-nav-bouton svg { color: var(--ac-gris); }
	.rc-nav-liste { border-top: 1px solid var(--ac-ligne); }
	.rc-nav-liste > li > a:hover, .rc-nav-ouvrir:hover { box-shadow: none; }
}
/* bandeau des pages interieures (titre seul) plus bas : le contenu remonte */
.rc-hero:not(.rc-hero-accueil) .ac-page-hero-in { min-height: 204px; padding-top: 24px; padding-bottom: 24px; }
/* contact de la rubrique : bouton Envoyer visible au premier ecran */
.rc-section:has(> .rc-contact) { padding-top: 24px; }
.rc-contact .ac-carte-form { padding: 22px 26px; }
.rc-contact .ac-carte-form > .ac-titre-bloc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rc-contact .ac-form-grille { gap: 12px; }
.rc-main .rc-contact form.ac-form .ac-champ input { height: 50px; min-height: 50px !important; }
.rc-main .rc-contact form.ac-form .ac-champ textarea { height: 100px; min-height: 100px !important; }
.rc-contact .ac-form-bas { margin-top: 12px; }
.rc-contact .ac-carte-infos { padding: 22px 24px; }
/* pages de contenu de la rubrique : largeur de lecture ~75 caracteres */
.rc-contenu > p, .rc-contenu > ul, .rc-contenu > ol, .rc-contenu > h2, .rc-contenu > h3, .rc-contenu > h4 { max-width: 78ch; }
/* parrainage : bloc de l'offre resserre pour que les paliers de gains tiennent au premier ecran */
.uxp-grille { padding-top: 18px; }
#offre .acp-carte { padding: 20px 24px; }
#offre .acp-titre { margin-bottom: 8px !important; }
#offre .acp-parrain-intro, #offre .acp-parrain-base { font-size: 15px; line-height: 1.55; }
#offre .acp-paliers { margin-top: 12px !important; }
#offre .acp-paliers li { padding: 10px 12px 8px; }
#offre .acp-total { margin-top: 14px; padding-top: 14px; }
/* temoignages : pagination masquee quand il n'y a qu'une page */
.ux-temoignages .ac-pagination:empty, .ux-temoignages .ac-pagination:not(:has(a + a)) { display: none; }