:root{
  --bg:#fff; --fg:#020d20; --card:#fff;
  --primary:#00183f; --primary-fg:#fcfcfc;
  --accent:#007bdd; --accent-deep:#0061c3; --accent-fg:#ffffff;
  /* Variante TEXTE de l'accent. #007bdd ne donne que 4.31 sur blanc et 3.84 sur la
     teinte : Lighthouse le signalait sur l'eyebrow, les <i> de la marque et les boutons.
     La decoration garde --accent ; tout ce qui porte du texte prend --accent-txt. */
  --accent-txt:#006dc4;
  --success:#20b46b; --success-soft:#e8f8f0;
  --surf:#f0f6fc; --muted-fg:#535e6f;
  --soft:#f6f9fc; --border:#dce2e9; --ring:#007bdd;
  /* Alias attendus par public/simulateur.js (partagé avec les 5 autres sites du réseau).
     Sans eux il retombe sur ses valeurs par défaut vertes et rend un pop-up illisible. */
  --brand:#007bdd; --brand-deep:#0061c3; --brand-tint:#e9f3fe;
  --ink:#020d20; --ink-soft:#243044; --muted:#535e6f;
  --paper:#fff; --paper-2:#f6f9fc; --line:#dce2e9; --line-strong:#c6d2de;
  --r:.875rem; --r-sm:.5rem; --r-lg:1.25rem; --r-pill:999px;
  --fd:"Urbanist",system-ui,-apple-system,sans-serif;
  --fb:"Epilogue",system-ui,-apple-system,sans-serif;
  --wrap:1160px;
  --sh:0 1px 2px rgba(2,13,32,.04),0 8px 24px -16px rgba(2,13,32,.18);
}
*,*::before,*::after{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--fb);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--fd);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--fg)}
h1{font-size:clamp(2rem,5.4vw,3.1rem)}
h2{font-size:clamp(1.5rem,3.8vw,2.1rem)}
h3{font-size:1.125rem;font-weight:600}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
/* ⚠️ 20px SUR TELEPHONE, PAS 16 — ET AUCUNE REGLE NE DOIT REMETTRE CE RETRAIT A ZERO.
   Constat du user le 10/08 : « sur telephone il n y a aucune marge du tout, le texte est colle
   aux deux cotes de l ecran ». Mesure : la mediane du bord de texte etait a 16 px, et
   plusieurs blocs a 0. Deux causes cumulees, corrigees ensemble ici.
   1. 16 px est trop serre sur un ecran de 390 : le texte touche presque le bord. 20 px est le
      minimum confortable, et reste sous la barre des 24 px qui mangerait la largeur utile.
   2. Les regles de mise en page qui reprenaient la classe wrap — hero-in, ft-in, trust-in,
      bc, ft-bot — declaraient padding:Npx 0, ce qui ECRASE le retrait
      horizontal du conteneur. Elles sont corrigees juste apres, une par une : ecrire
      padding:44px 0 52px sur un element qui porte aussi la classe wrap annule silencieusement sa
      marge laterale. Toujours preciser la valeur horizontale, jamais 0. */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 24px}}
@media(min-width:768px){.wrap{padding:0 24px}}
.sec{padding:56px 0}
@media(min-width:768px){.sec{padding:80px 0}}
.sec-soft{background:var(--soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec-muted{background:var(--surf)}
.lede{color:var(--muted-fg);font-size:1.0625rem;line-height:1.7}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--fd);font-weight:600;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-txt)}
.head{max-width:64ch;margin-bottom:32px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head h2{margin:10px 0 12px}

/* --- boutons : pilules, cible 44 px --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-height:44px;padding:11px 22px;border-radius:var(--r-pill);font-family:var(--fd);font-weight:600;font-size:.9375rem;line-height:1;border:1px solid transparent;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s,transform .12s}
a.btn-primary{background:var(--accent-txt);color:var(--accent-fg)}
a.btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px);box-shadow:0 10px 24px -12px var(--accent)}
a.btn-dark{background:var(--primary);color:var(--primary-fg)}
a.btn-dark:hover{background:#002a6b}
a.btn-ghost{background:var(--card);color:var(--primary);border-color:var(--border)}
a.btn-ghost:hover{border-color:var(--accent-txt);color:var(--accent-txt)}
.btn-lg{min-height:52px;padding:15px 30px;font-size:1rem}
.btn-block{width:100%}

/* --- en-tête --- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
.hdr-in{display:flex;align-items:center;gap:14px;min-height:68px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:800;font-size:1.1875rem;color:var(--primary);min-height:44px}
.brand b{font-weight:800;color:var(--accent-txt)}
.nav{display:none;gap:2px;margin-left:6px}
.nav a{white-space:nowrap;padding:9px 11px;border-radius:var(--r-sm);font-size:.9rem;font-weight:500;color:var(--muted-fg);transition:background .15s,color .15s}
.nav a:hover{background:var(--surf);color:var(--primary)}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.tel{display:none;align-items:center;gap:7px;white-space:nowrap;font-weight:600;font-size:.9375rem;color:var(--primary);min-height:44px;padding:0 10px}
@media(min-width:1080px){.nav{display:flex}}
@media(min-width:1240px){.tel{display:inline-flex}}

/* --- hero --- */
.hero{position:relative;overflow:hidden;background:radial-gradient(900px 420px at 15% -10%,#e6f2fd,transparent 62%),linear-gradient(180deg,var(--soft),var(--bg) 70%)}
.hero-in{display:grid;grid-template-columns:1fr;gap:36px;padding:44px 20px 52px;align-items:start}
/* ⚠️ LES REGLES D ORDRE hero-tete / hero-detail ONT ETE RETIREES LE 11/08 — elles ne
   correspondaient plus a rien. Elles servaient a glisser le simulateur ENTRE le titre et les
   explications sur la page de devis (correctif du 10/08, apres un constat Clarity : le
   simulateur demarrait vers 1 240 px sur un ecran de 844). Le 11/08 cette page a ete refondue,
   le heros a disparu et avec lui les deux classes : plus aucune page du site ne les emet.
   Du CSS qui ne s applique nulle part n est pas neutre — il fait croire au lecteur suivant que
   la mise en page fonctionne encore ainsi. La regle sur .card est conservee : le heros des
   pages de diagnostic la porte toujours. */
@media(max-width:959px){
  .hero-in{gap:22px}
  .hero-in>.card{order:2}
}
@media(min-width:960px){.hero-in{grid-template-columns:1.05fr .95fr;gap:48px;padding:68px 24px 76px;align-items:center}}
/* ─── /devis/ : LE SIMULATEUR EST LA PAGE ───────────────────────────────────────────────
   ⚠️ CETTE PAGE N EST PLUS UN HEROS — les classes .hero-devis, .hero-tete et
   .hero-detail ont ete retirees de devisPage() le 11/08. Historique complet dans
   core-national.mjs ; en resume : deux corrections successives (simulateur intercale entre le
   titre et le detail, puis colonne unique sur grand ecran) n ont pas suffi. Le user demande
   que le simulateur soit la page, comme sur auditimo.fr/reserver — 2,5 ecrans, 27 liens, rien
   entre l en-tete et la question.
   ⚠️ .hero-in et son ordre mobile RESTENT : ils servent l accueil et les pages de
   diagnostic, ou le simulateur accompagne un contenu au lieu de le remplacer.
   Le retrait horizontal vient de .wrap (20 px, 24 px au-dela de 768) : ne rien remettre ici
   sous forme de padding:Npx 0, c est la collision qui a colle le texte aux bords le 10/08. */
.devis-plein{padding:24px 0 34px;background:linear-gradient(180deg,var(--soft),var(--bg) 62%)}
.dvp-in{max-width:900px}
.dvp-kicker{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-txt);margin:0 0 7px}
.dvp-h1{font-size:clamp(1.15rem,3.1vw,1.6rem);line-height:1.28;letter-spacing:-.01em;margin:0 0 16px;color:var(--muted-fg);font-weight:700}
.dvp-tel{margin:16px 0 0;text-align:center;font-size:.90625rem;color:var(--muted-fg)}
.dvp-tel a{font-weight:800;font-size:1.1875rem;color:var(--primary);font-variant-numeric:tabular-nums;white-space:nowrap}
.dvp-tel span{display:block;font-size:.78125rem;margin-top:2px}
@media(min-width:768px){.devis-plein{padding:32px 0 44px}.dvp-h1{margin-bottom:20px}}
/* ⚠️ LE REPLI SANS JAVASCRIPT ETAIT HABILLE PAR LE .card QUI L ENTOURAIT — ce conteneur a
   disparu avec le heros, il faut donc l habiller ici. Ce bloc ne s affiche que pour un
   visiteur sans JavaScript et pour les robots des moteurs de reponse, qui n en executent pas ;
   simulateur.js le remplace des qu il s execute. Le laisser nu donnait un pave de texte
   flottant sur le degrade, sans cadre ni bouton visible. */
.sim-repli{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);padding:26px 22px;text-align:center}
.sr-t{font-family:var(--fd);font-weight:800;font-size:1.375rem;line-height:1.2;margin:0 0 8px;color:var(--primary)}
.sr-p{color:var(--muted-fg);font-size:.9375rem;line-height:1.55;margin:0 auto 18px;max-width:52ch}
.sr-tel{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 26px;border-radius:var(--r);background:var(--accent);color:#fff;font-weight:700;font-size:1.0625rem}
.sr-mail{display:block;margin-top:12px;min-height:44px;line-height:44px;color:var(--primary);font-weight:600;font-size:.9375rem;text-decoration:underline}
.sr-m{margin:14px 0 0;font-size:.78125rem;color:var(--muted-fg)}
.pill{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:var(--card);border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 15px;font-size:.8125rem;font-weight:600;color:var(--primary);box-shadow:var(--sh)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--success)}
.hero h1{margin:18px 0 14px}
.hero h1 em{font-style:normal;color:var(--accent-txt)}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-ul{display:grid;gap:10px;margin-top:22px}
.hero-ul li{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;font-weight:500}
.tick{flex:none;width:20px;height:20px;border-radius:50%;background:var(--success-soft);color:var(--success);display:grid;place-items:center;margin-top:1px}
.tick svg{width:12px;height:12px}

/* --- cartes --- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px;transition:border-color .18s,box-shadow .18s,transform .18s}
.card:hover{border-color:var(--accent-txt);box-shadow:var(--sh)}
.card h3{margin-bottom:7px}
.card p{color:var(--muted-fg);font-size:.9375rem}
.ic{width:42px;height:42px;border-radius:var(--r-sm);background:var(--surf);color:var(--accent-txt);display:grid;place-items:center;margin-bottom:14px}
.ic svg{width:21px;height:21px}
.grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* --- bande de confiance --- */
.trust{background:var(--soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-in{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;padding:16px 20px}
.trust-in span{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--primary)}
.trust-in svg{width:16px;height:16px;color:var(--success)}

/* --- étapes --- */
.steps{counter-reset:s;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.steps{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
.step{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px 20px}
.step .n{width:34px;height:34px;border-radius:var(--r-pill);background:var(--accent-txt);color:#fff;display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:.9375rem;margin-bottom:13px}
.step h3{margin-bottom:6px}
.step p{color:var(--muted-fg);font-size:.9rem}

/* --- tableau tarifs --- */
.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;font-size:.9375rem}
.tbl th,.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border)}
.tbl th{background:var(--surf);font-family:var(--fd);font-weight:600;color:var(--primary);font-size:.875rem}
.tbl tr:last-child td{border-bottom:0}
/* ⚠️ white-space:nowrap RETIRE DE LA DERNIERE COLONNE (04/08).
   La regle visait les tableaux de PRIX, ou la derniere cellule contient « 120 EUR » et ne
   doit pas se couper. Mais elle s applique a TOUS les tableaux, y compris les comparatifs
   des guides, ou la derniere cellule porte des phrases entieres : « Recommande : 12 mois
   avant le chantier ». Une phrase en nowrap impose sa largeur au tableau, le tableau
   l impose a la page, et la page deborde. C est ce que le user a photographie.
   On garde la mise en valeur, on rend le retour a la ligne. Les montants courts ne se
   couperont pas de toute facon : ils n en ont pas la place. */
.tbl td:last-child{font-weight:600;color:var(--primary)}
/* Les cellules ne descendent pas sous une largeur lisible, sinon un comparatif a 3 colonnes
   rend une lettre par ligne sur telephone. */
.tbl th,.tbl td{min-width:9ch}

/* ⚠️ .tblw N EXISTAIT PAS EN CSS. Le conteneur etait bien pose dans le balisage par
   core-national.mjs (ligne 364) mais aucune regle ne lui disait de defiler : le tableau
   sortait donc de la page au lieu de defiler dedans. Un conteneur sans overflow n est pas
   un conteneur, c est un div.
   max-width:100% ET min-width:0 sont necessaires ensemble : sans le second, un enfant
   de flex ou de grid refuse de retrecir et overflow-x ne contraint rien — piege deja paye
   sur la bande alphabetique des sites departementaux. */
.tblw{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;margin:16px 0}
.tblw>.tbl{margin:0}
/* Indice visuel qu il y a du contenu a droite, sinon personne ne pense a faire defiler. */
@media(max-width:700px){
  .tblw{background:linear-gradient(to right,transparent 90%,rgba(0,0,0,.05));
    background-attachment:local}
}
.tbl-wrap{overflow-x:auto;border-radius:var(--r)}
/* Fiche pratique : tableau à en-têtes de LIGNE. La règle générale .tbl td:last-child
   pose un white-space:nowrap qui, sur ces libellés longs, faisait déborder le tableau
   en scroll horizontal sur mobile — ici on laisse le texte respirer. */
.tbl caption{caption-side:top;text-align:left;padding:12px 16px;font-family:var(--fd);font-weight:600;font-size:.875rem;color:var(--muted);background:var(--paper-2);border-bottom:1px solid var(--border)}
.tbl th[scope=row]{width:38%;white-space:normal;vertical-align:top}
.tbl th[scope=row]+td{white-space:normal;font-weight:500;color:var(--ink)}
@media(max-width:560px){.tbl th[scope=row]{width:42%}.tbl caption,.tbl th,.tbl td{padding:11px 12px;font-size:.875rem}}
/* Bloc « réponse directe » (GEO) : le passage autoportant que les moteurs de réponse citent. */
.rd{margin:22px 0;padding:18px 20px;background:var(--surf);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r)}
.rd-t{font-family:var(--fd);font-weight:700;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 8px}
.rd-a{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--ink)}
.rd-a strong{color:var(--primary)}
.rd-m{margin:10px 0 0;font-size:.8125rem;color:var(--muted)}
@media(max-width:640px){.rd{padding:15px 16px}.rd-a{font-size:1rem}}

/* --- données locales (notre différenciateur) --- */
.data{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){.data{grid-template-columns:repeat(3,1fr)}}
.data-c{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:16px 18px}
.data-c b{display:block;font-family:var(--fd);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-fg);margin-bottom:5px}
.data-c span{font-family:var(--fd);font-weight:600;font-size:1rem;color:var(--primary)}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:4px 11px;font-size:.75rem;font-weight:600}
.badge-ok{background:var(--success-soft);color:#12764a}
.badge-warn{background:#fff4e5;color:#a45b00}

/* --- FAQ --- */
.faq details{background:var(--card);border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;min-height:56px;cursor:pointer;font-family:var(--fd);font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.25rem;color:var(--accent-txt);flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 20px 18px;color:var(--muted-fg);font-size:.9375rem}

/* --- listes de liens (chips) + pli --- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--border);font-size:.875rem;font-weight:500;color:var(--primary);transition:background .15s,border-color .15s}
.chips a:hover{background:var(--surf);border-color:var(--accent-txt);color:var(--accent-txt)}
.fold{margin-top:16px;text-align:center}
.fold>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--card);font-family:var(--fd);font-weight:600;font-size:.9rem;color:var(--primary);cursor:pointer;list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"▾";font-size:.7rem}
.fold[open]>summary::after{content:"▴"}
.fold>summary:hover{border-color:var(--accent-txt);color:var(--accent-txt)}
.fold .chips{margin-top:14px;text-align:left}

/* --- CTA final --- */
.cta{background:linear-gradient(135deg,#e9f3fe,#f6f9fc);border:1px solid var(--border);border-radius:var(--r-lg);padding:36px 24px;text-align:center}
@media(min-width:768px){.cta{padding:52px 40px}}
.cta h2{margin-bottom:12px}

/* ⚠️ CARTE CLIQUABLE EN ENTIER — CORRIGE UN CLIC MORT MESURE, PAS UNE PREFERENCE.
   Export Clarity du 09/08, diagvalot.fr sur 3 jours : 33 % des sessions mobiles Android
   comportent au moins un clic mort. La mesure au navigateur a donne la cause : la carte .cta
   fait 358 x 362 px et 85 % de sa surface ne repond a aucun clic — seuls deux boutons de
   205 x 52 et 176 x 52 sont actifs. Un visiteur voit un bloc encadre « Votre devis en
   2 minutes », il tape le bloc, et rien ne se passe. Meme constat sur .card : 87 % de surface
   morte.
   Le lien principal est donc etire sur toute la carte par un pseudo-element. Le texte du lien
   reste inchange — un lecteur d ecran annonce toujours « Obtenir mon devis » — et le lien
   telephone est remonte au-dessus pour rester atteignable.
   ⚠️ NE PAS remplacer par un onclick sur la carte : un clic JavaScript n est ni un lien pour
   Googlebot, ni une cible pour le clavier, ni ouvrable dans un nouvel onglet. */
.cta,.card{position:relative}
.cta .btn-primary::after,.card .btn-primary::after{content:"";position:absolute;inset:0;z-index:1}
.cta .btn-ghost,.cta .tel,.card .btn-ghost,.card .tel,.cta a[href^="tel:"],.card a[href^="tel:"]{position:relative;z-index:2}

.cta p{color:var(--muted-fg);max-width:52ch;margin:0 auto 24px}
.cta .hero-acts{justify-content:center}

/* --- prose --- */
.prose{max-width:72ch}
.prose h2{margin:34px 0 12px}
.prose h3{margin:24px 0 8px;font-size:1.0625rem}
.prose p{margin-bottom:14px;color:#243044}
.prose ul{margin:0 0 16px;display:grid;gap:8px}
/* ATTENTION - display:flex RETIRE ICI (04/08), et c est un vrai correctif de contenu.
   La puce personnalisee etait posee via ::before dans un conteneur flex. Ca marche tant que
   le <li> ne contient qu un seul flux. Des qu il commence par un <strong> - ce que font tous
   les guides : « <strong>Vente d un logement</strong> : le vendeur doit... » - le <strong>
   devient un ELEMENT FLEX et le texte qui suit un SECOND. Resultat a l ecran : deux colonnes
   qui se chevauchent, le terme en gras coince sur trois lignes etroites a gauche.
   C est ce que le user a photographie le 04/08.
   La puce est donc positionnee en absolu et le contenu coule normalement, en ligne. */
.prose ul li{position:relative;padding-left:18px;color:#243044;line-height:1.65}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
.prose ol{margin:0 0 16px;padding-left:22px}
.prose ol li{margin-bottom:8px;color:#243044;line-height:1.65}
/* Un <li> peut contenir plusieurs paragraphes dans les guides longs. */
.prose li>p{margin:0 0 8px}
.prose li>p:last-child{margin-bottom:0}
.prose a{color:var(--accent-txt);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--primary)}

/* --- fil d'ariane --- */
.bc{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:14px 20px;font-size:.8125rem;color:var(--muted-fg)}
.bc a{color:var(--muted-fg);display:inline-flex;align-items:center;min-height:32px;padding:0 2px}
.bc a:hover{color:var(--accent-txt)}
.bc-sep{color:var(--muted-fg);padding:0 3px}
/* Le separateur est aria-hidden : pas d'annonce vocale, et Lighthouse ne calcule plus son
   contraste. Une opacite de 0,5 le faisait echouer apres fusion des couleurs. */

/* --- pied de page --- */
.ft{background:var(--soft);border-top:1px solid var(--border);padding-bottom:80px}
.ft-in{display:grid;gap:26px;grid-template-columns:1fr;padding:36px 20px 22px}
@media(min-width:760px){.ft-in{grid-template-columns:1.6fr 1.3fr 1fr 1fr}.ft-diag{columns:2;column-gap:18px}}
.ft h4{font-family:var(--fd);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-fg);margin-bottom:12px}
.ft-col a{display:flex;align-items:center;min-height:34px;font-size:.875rem;color:var(--muted-fg)}
.ft-diag a{break-inside:avoid}
.ft-contact a{display:inline-flex;align-items:center;min-height:44px}
/* !important ASSUME, et c'est le seul du fichier. Trois gabarits du national ecrivaient
   style="color:var(--accent)" EN INLINE dans le HTML : 4,07 de contraste, sous le seuil AA
   de 4,5. La source est corrigee (--accent-txt), mais les 455 277 pages deja publiees
   portent le style inline, et une regeneration complete coute 45 min pour un lien.
   Un style inline ne se bat que par !important. A retirer le jour ou une regeneration
   complete aura reecrit ces pages — d'ici la, ne pas supprimer cette regle. */
.ft-contact a[style],.prose a[style],a[style*="--accent"]{color:var(--accent-txt)!important}
@media(max-width:759px){.ft-col a{min-height:40px}}
.ft-col a:hover{color:var(--accent-txt)}
.ft-bot{border-top:1px solid var(--border);padding:18px 20px 24px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.8125rem;color:var(--muted-fg)}
.ft-bot a{color:var(--accent-txt);display:inline}
@media(min-width:900px){.ft{padding-bottom:0}}

/* --- barre CTA mobile --- */
/* ⚠️ LA BARRE REMONTE PAR transform, PAS PAR bottom — ET C EST LA RAISON EXACTE.
   Le bandeau de consentement publie sa hauteur dans --cs-h pour que cette barre ne soit pas
   recouverte. La premiere version deplacait bottom, ce qui est un changement de MISE EN PAGE :
   l API layout-shift le compte, et il arrive apres la peinture — donc en plein dans la fenetre
   de mesure du CLS. Mesure du 12/08 : 0,009 sur 768 px de large, attribue a div.bar sur les
   neuf pages testees. C est faible, mais c etait le SEUL decalage mesurable du site.
   transform est explicitement exclu du calcul du CLS par la specification : le meme mouvement,
   au meme moment, ne coute plus rien. On ne perd rien au passage — l element est en
   position:fixed, il n influence aucune autre boite.
   ⚠️ Ne pas revenir a bottom pour « faire plus simple » : ce serait reintroduire du CLS sur
   toutes les pages a la fois. */
.bar{position:fixed;left:0;right:0;bottom:0;transform:translateY(calc(-1*var(--cs-h,0px)));transition:transform .18s ease;z-index:60;display:flex;gap:10px;padding:10px 14px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--border)}
.bar .btn{flex:1;min-height:48px;padding:11px 14px;font-size:.9375rem}
.bar .btn svg{width:17px;height:17px;flex:none}
@media(min-width:900px){.bar{display:none}}

/* --- simulateur --- */
#simulateur{min-height:520px}

/* La pop-up de capture a ete supprimee le 11/08 : son habillage (#lead-pop, #lead-x) est parti
   avec elle. */

/* ============================================================================
   HERO PHOTO PLEIN CADRE (landing) — calqué sur diagvente.com : image de salon,
   voile marine, titre bicolore, deux boutons, bande de statistiques, et carte de
   prix flottante. Seul élément foncé du site, et c'est un VOILE SUR PHOTO, pas un
   thème sombre : tout le reste des pages demeure en clair.
   ========================================================================== */
.phero{position:relative;isolation:isolate;background:#00183f;overflow:hidden}
.phero-bg{position:absolute;inset:0;z-index:-2}
.phero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(0,18,48,.94) 0%,rgba(0,24,63,.86) 46%,rgba(0,30,74,.62) 100%)}
.phero-in{max-width:var(--wrap);margin:0 auto;padding:40px 16px 36px;display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.phero h1{color:#fff;font-size:clamp(2.4rem,7.6vw,4.6rem);line-height:1.03;letter-spacing:-.035em;margin:18px 0 0}
.phero h1 em{font-style:normal;color:#8fc4f5;display:block}
.phero-sub{color:rgba(255,255,255,.86);font-size:clamp(1rem,2.2vw,1.15rem);line-height:1.62;max-width:46ch;margin-top:20px}
.phero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.phero .btn-white{background:#fff;color:var(--primary);border-color:#fff}
.phero .btn-white:hover{background:#eaf3fd;transform:translateY(-1px)}
.phero .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.phero .btn-line:hover{background:rgba(255,255,255,.12);border-color:#fff}
.phero-pill{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:var(--r-pill);padding:7px 15px;font-size:.8125rem;font-weight:600}
.phero-pill .dot{width:7px;height:7px;border-radius:50%;background:#4ade80}
.phero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 24px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.phero-stats b{display:block;font-family:var(--fd);font-weight:800;font-size:clamp(1.7rem,4.6vw,2.6rem);color:#fff;line-height:1;letter-spacing:-.02em}
.phero-stats span{display:block;margin-top:7px;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:600}
/* carte de prix flottante */
.pcard{background:#fff;border-radius:var(--r-lg);padding:24px;box-shadow:0 30px 70px -28px rgba(0,10,30,.62);max-width:360px}
.pcard-eye{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-fg);font-weight:700}
.pcard-price{display:flex;align-items:baseline;gap:8px;margin:10px 0 4px}
.pcard-price b{font-family:var(--fd);font-weight:800;font-size:3rem;line-height:1;color:var(--primary);letter-spacing:-.03em}
.pcard-price span{font-size:1rem;font-weight:600;color:var(--muted-fg)}
.pcard ul{display:grid;gap:9px;margin:16px 0 18px}
.pcard li{display:flex;gap:9px;align-items:flex-start;font-size:.875rem;color:#243044}
.pcard-note{font-size:.75rem;color:var(--muted-fg);line-height:1.5;margin-top:12px;text-align:center}
@media(min-width:1000px){
  .phero-in{grid-template-columns:1.35fr .65fr;gap:56px;padding:76px 24px 72px;align-items:center}
  .pcard{margin-left:auto;padding:28px}
  .phero-stats{display:flex;gap:26px 48px}
}
/* logo encarté dans l'en-tête, comme chez lui */
.brand-card{display:inline-flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:7px 14px 7px 10px;box-shadow:0 1px 2px rgba(2,13,32,.05)}
.brand-card .bt{display:flex;flex-direction:column;line-height:1.05}
.brand-card .bt b{font-family:var(--fd);font-weight:800;font-size:1.0625rem;color:var(--primary)}
.brand-card .bt b i{font-style:normal;color:var(--accent-txt)}
.brand-card .bt small{font-size:.5625rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-fg);font-weight:600}
.hdr-sec{display:none}

/* ============================================================================
   BLOCS D'ENRICHISSEMENT — structurent les pages longues et évitent le mur de texte.
   ========================================================================== */
/* sommaire ancré en tête de page */
.toc{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px;margin:0 0 32px}
.toc h2{font-size:.75rem!important;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-fg);margin:0 0 12px!important}
.toc ol{counter-reset:toc;display:grid;gap:2px}
@media(min-width:700px){.toc ol{grid-template-columns:repeat(2,1fr);column-gap:24px}}
.toc li{counter-increment:toc}
/* ATTENTION - meme correctif que .prose ul li, meme cause (04/08).
   Le numero etait un ::before dans un conteneur flex avec align-items:baseline. Des que le
   titre de section passe sur plusieurs lignes - ce qui arrive tout le temps sur telephone -
   le numero se cale sur la premiere ligne et les lignes suivantes remontent a sa gauche :
   le texte chevauche le numero. Visible sur la capture du user a 390 px.
   On sort le numero du flux et on reserve sa place par un padding : le bloc de texte garde
   alors un bord gauche constant, quel que soit le nombre de lignes. */
.toc a{position:relative;display:block;padding:9px 0 9px 30px;min-height:40px;
  font-size:.9375rem;line-height:1.5;color:var(--primary);font-weight:500}
.toc a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:11px;
  font-family:var(--fd);font-weight:700;font-size:.75rem;color:var(--accent-txt)}
.toc a:hover{color:var(--accent-txt)}

/* deux colonnes inclus / non inclus */
.io{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.io{grid-template-columns:1fr 1fr}}
.io-c{border:1px solid var(--border);border-radius:var(--r);padding:22px;background:var(--card)}
.io-c h3{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.io-c ul{display:grid;gap:10px}
.io-c li{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;color:#243044;line-height:1.5}
.io-y{flex:none;width:20px;height:20px;border-radius:50%;background:var(--success-soft);color:#12764a;display:grid;place-items:center;font-size:.7rem;font-weight:800;margin-top:1px}
.io-n{flex:none;width:20px;height:20px;border-radius:50%;background:#fdeaea;color:#b4232a;display:grid;place-items:center;font-size:.7rem;font-weight:800;margin-top:1px}

/* checklist de préparation */
.chk{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){.chk{grid-template-columns:repeat(2,1fr)}}
.chk li{display:flex;gap:13px;align-items:flex-start;background:var(--surf);border-radius:var(--r-sm);padding:14px 16px;font-size:.9375rem;color:#243044}
.chk .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent-txt);color:#fff;display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:.75rem}

/* cartes « erreurs à éviter » */
.err{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.err{grid-template-columns:repeat(2,1fr)}}
.err-c{border:1px solid var(--border);border-left:3px solid #e8a33d;border-radius:var(--r-sm);padding:18px 20px;background:var(--card)}
.err-c b{display:block;font-family:var(--fd);font-size:1rem;color:var(--primary);margin-bottom:6px}
.err-c p{color:var(--muted-fg);font-size:.9rem;line-height:1.55}

/* frise du calendrier réglementaire */
.tl{display:grid;gap:0;position:relative;margin-top:8px}
.tl li{display:flex;gap:18px;padding:0 0 24px;position:relative}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:23px;top:36px;bottom:-4px;width:2px;background:var(--border)}
.tl li:last-child::before{display:none}
.tl .y{flex:none;width:48px;height:34px;border-radius:var(--r-pill);background:var(--primary);color:#fff;display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:.8125rem;position:relative;z-index:1}
.tl .y.on{background:#b4232a}
.tl b{display:block;font-family:var(--fd);font-size:1rem;color:var(--primary);margin-bottom:3px}
.tl p{color:var(--muted-fg);font-size:.9rem;line-height:1.55}

/* FAQ groupée par thème */
.faq-g{margin-bottom:26px}
.faq-g > h3{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-txt);margin-bottom:12px}
.faq summary:hover{background:var(--surf)}

/* bandeau de réassurance chiffrée */
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:900px){.proof{grid-template-columns:repeat(4,1fr)}}
.proof-c{text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px 14px}
.proof-c b{display:block;font-family:var(--fd);font-weight:800;font-size:1.9rem;color:var(--primary);line-height:1;letter-spacing:-.02em}
.proof-c span{display:block;margin-top:8px;font-size:.8125rem;color:var(--muted-fg);line-height:1.4}

/* Bloc sources et méthode (E-E-A-T) — sourçage daté, méthode explicitée. */
.src{background:var(--surf);border:1px solid var(--border);border-left:3px solid var(--muted-fg);border-radius:var(--r-sm);padding:20px 22px;margin-top:28px}
.src b{display:block;font-family:var(--fd);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-fg);margin-bottom:10px}
.src p{color:var(--muted-fg);font-size:.875rem;line-height:1.65;margin-bottom:10px}
.src p:last-child{margin-bottom:0}
.src a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:2px}
.src-maj{font-size:.8125rem!important;opacity:.9}
/* paragraphes de risques : un par risque réellement recensé */
.rk{display:grid;gap:14px;margin-top:6px}
.rk-p{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:16px 20px;color:#243044;font-size:.9375rem;line-height:1.65}

/* --- FORMATS DE CONTENU (guides) : barème, comparatif, pas-a-pas, checklist, lexique.
   Memes classes que les 7 sites departementaux, pour que le module partage
   src/lib/contenu.mjs produise le meme rendu partout. Fond clair uniquement. */
.g-badge{display:inline-block;background:var(--accent-soft,#e8f1fb);color:var(--primary,#00183f);
  font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;vertical-align:middle}
.prose .g-etapes,.prose .g-check{margin:22px 0;padding:0;list-style:none;counter-reset:et}
.prose .g-etapes li,.prose .g-check li{position:relative;padding:14px 16px 14px 52px;margin:0 0 10px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r,12px)}
.prose .g-etapes li{counter-increment:et}
.prose .g-etapes li::before{content:counter(et);position:absolute;left:14px;top:13px;width:26px;height:26px;
  border-radius:50%;background:var(--primary,#00183f);color:#fff;font-weight:700;font-size:13.5px;
  display:flex;align-items:center;justify-content:center}
.prose .g-check li::before{content:"OK";position:absolute;left:12px;top:13px;width:30px;height:22px;
  border-radius:6px;background:var(--primary,#00183f);color:#fff;font-weight:700;font-size:11px;
  display:flex;align-items:center;justify-content:center}
.tblw{margin:22px 0;overflow-x:auto}
.tbl caption{caption-side:top;text-align:left;font-weight:600;font-size:14px;color:var(--muted);padding:0 0 8px}
.tbl th[scope=col]{background:var(--accent-soft,#e8f1fb);color:var(--primary,#00183f);text-align:left;
  font-size:13.5px;letter-spacing:.02em}
@media(max-width:700px){
  .prose .g-etapes li,.prose .g-check li{padding:12px 13px 12px 48px}
  .tbl{font-size:.875rem}
}

/* --- VISUELS multi-modal (profil de risque + illustration par diagnostic) --- */
.viz{margin:20px 0 4px;padding:18px 20px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r,14px)}
.viz svg{display:block}
.viz figcaption{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.ill{display:block;width:100%;height:auto;max-width:640px;margin:0 auto;border:1px solid var(--border);border-radius:14px;background:#F7FAFC}
@media(max-width:700px){.viz{padding:14px 14px 10px}.viz figcaption{font-size:12.5px}}

/* Liens en pleine ligne de texte : le critere link-in-text-block echouait (1,52:1 avec le
   texte voisin). On les souligne, ce qui satisfait le critere sans toucher aux couleurs. */
.prose p > a:not(.btn):not(.chip),.prose li > a:not(.btn):not(.chip){text-decoration:underline;text-underline-offset:2px;color:var(--accent-txt)}
/* Le soulignement ne doit PAS se limiter a .prose. Mesure au navigateur le 29/07 sur
   /diagnostic-immobilier/marseille/ : le lien « prix ferme en 2 min » dans .rd-m avait
   EXACTEMENT la couleur du texte qui l'entoure (ratio 1,00) et aucun soulignement — donc
   indistinguable d'un mot ordinaire. C'est le dernier echec Lighthouse du reseau
   (link-in-text-block) et c'est un vrai defaut d'usage, pas une pinaillerie d'audit :
   un lien qui ne se voit pas n'est pas clique.
   Regle : tout lien DANS un paragraphe ou une puce est souligne, sauf s'il est deja un
   bouton ou une pastille. Le :not exclut aussi les liens seuls dans leur bloc (traites
   comme des elements de navigation), via la specificite plus faible de ce selecteur. */
p > a:not(.btn):not(.chip):not([class*=btn]),li > a:not(.btn):not(.chip):not([class*=btn]){text-decoration:underline;text-underline-offset:2px}
.prose p > a:not(.btn):hover,.prose li > a:not(.btn):hover{text-decoration-thickness:2px}
.ft-h{font-family:var(--fd);font-weight:700;font-size:15px;margin:0 0 10px;color:var(--primary)}

/* --- MOBILE : CIBLES TACTILES ET LISIBILITE ---------------------------------
   Mesure au navigateur sur 375 px, en ligne, le 28/07 : 50 liens sous 44 px de haut
   (pastilles de communes, colonnes de pied, fil d'Ariane, listes) et 11 textes sous 12 px
   (les marqueurs inclus/exclus io-y / io-n, un <small>). Seuils : 44 px et 12 px.
   Ces regles sont en FIN de feuille, pour gagner par position a specificite egale. */
@media(max-width:899px){
  /* Le :only-child sur les liens de puce n'est pas cosmetique : blockifier un lien SEUL
     dans son <li> est sans risque, mais un lien au milieu d'une phrase serait jete sur sa
     propre ligne. Verifie le 28/07 sur le national — 11 <li> a liens, tous a lien seul —
     et les guides etant rediges par IA chaque jour, le cas mixte finira par arriver.
     (Aucun backtick dans ce fichier : la feuille entiere est un template literal.) */
  .chips a,.ft-col a,.ft-diag a,.bc a,.rd-m a,.prose li > a:only-child,.vois a,.fam a,
  .steps a,.toc a{min-height:44px;display:flex;align-items:center}
  /* Le selecteur .grid a.card A ETE RETIRE de la regle ci-dessus, et ne doit pas y revenir.
     Une carte contient une icone, un h3 et un p : display:flex les met COTE A COTE au lieu
     de les empiler. Mesure au navigateur a 768 px le 28/07 : le h3 ecrase a 32 px de large,
     son texte debordant SUR la description — 6 cartes sur 12 illisibles. Et la regle etait
     inutile : une carte fait 179 px de haut, tres au-dela des 44 px demandes.
     Lecon generale : display:flex pour agrandir une cible tactile ne convient qu'a un
     element a UN SEUL enfant. Sur un bloc empile, il casse la mise en page. */
  .toc a,.bc a,.bc-sep{align-items:center}
  small,.io-y,.io-n,.eyebrow,.lede small,.rd-m,.src-maj,.ft-bot,.ft-bot p,
  figcaption,.viz figcaption{font-size:12px}
  /* Le baseline de l'en-tete etait a .5625rem = 9 px, et sa specificite (0,2,1) battait
     la regle small ci-dessus (0,0,1) : 9 px reel, mesure au navigateur sur 375 px. A
     12 px avec l'interlettrage reduit, la carte de marque passe de 187 a 199 px dans un
     en-tete de 375 px — verifie sur place, aucun debordement. */
  .brand-card .bt small{font-size:12px;letter-spacing:.04em}
  /* .7rem = 11,2 px : sous le seuil. .io-y et .io-n etaient deja dans la liste plus haut
     mais a specificite (0,1,0), battue par .phero-stats span (0,1,1) — d'ou 4 textes a
     11,2 px persistants sur l'ACCUEIL, mesures au navigateur le 28/07. On reprend donc les
     selecteurs a leur specificite d'origine. */
  .phero-stats span,.pcard-eye,.fold>summary::after{font-size:12px}
}

/* ── BANDE A-Z DU PIED DE PAGE ET PAGES DE PLAN — ajoutees le 04/08 ──────────────
   Le national portait 455 088 pages mais ne liait que 200 communes depuis l accueil ;
   /plan/ repondait 404. Les 34 808 autres n avaient aucun chemin interne et n existaient
   que dans les sitemaps — ce qui correspond exactement au « Detectee, actuellement non
   indexee » de la Search Console. Cette bande est le meme dispositif que sur les sites
   departementaux, ou son commentaire dit : « c est LUI qui ramene les 16 000 pages
   profondes a 2 clics de l accueil ».
   ⚠️ min-width:0 sur les enfants de flex, et la bande passe en defilement horizontal sous
   780 px : 26 lettres a 44 px de cible tactile font 1 144 px et pousseraient la page. */
.ft-az{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:flex-start;
  padding:14px 0 2px;margin-top:14px;width:100%;max-width:100%;font-size:12.5px;
  border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.ft-az span{margin-right:8px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.ft-az a{display:inline-flex;align-items:center;justify-content:center;min-width:24px;
  padding:2px 5px;border-radius:5px;font-size:11.5px;font-weight:700;text-decoration:none}
.ft-az a:hover{text-decoration:underline}
@media(max-width:780px){
  .ft-az{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;
    scrollbar-width:none;gap:2px;font-size:11px;padding:8px 0 0;margin-top:10px}
  .ft-az::-webkit-scrollbar{display:none}
  .ft-az>*{flex:0 0 auto}
  .ft>*,.ft-in>*{min-width:0}
}
@media(max-width:899px){.ft-az a{min-height:44px}}
/* Pages /plan/ et /plan/{lettre}/ */
.plan-nav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.plan-nav a{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:56px;min-height:56px;padding:6px 8px;border:1px solid var(--line,#e3e8ee);
  border-radius:8px;text-decoration:none;font-weight:700}
/* ⚠️ 12px MINIMUM — 11px etait signale comme illisible par l audit navigateur, et c est le
   seul texte du site sous ce seuil. Sur telephone, ou vient la totalite du trafic, un libelle
   de 11px demande de zoomer pour etre lu. */
.plan-nav a small{display:block;font-weight:400;font-size:12.5px;opacity:.75;margin-top:2px}
.plan-az{display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 18px}
.plan-az a{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line,#e3e8ee);border-radius:6px;text-decoration:none;font-weight:600;font-size:13px}
.plan-az a[aria-current=page]{background:var(--brand,#00183f);color:#fff;border-color:transparent}
@media(max-width:899px){.plan-az a{min-width:44px;min-height:44px}}
/* Liste des communes : colonnes, pour qu une lettre a 4 000 entrees reste parcourable. */
.plan-list{column-width:210px;column-gap:26px;font-size:14.5px;line-height:1.9}
.plan-list a{display:block;text-decoration:none;break-inside:avoid}
.plan-list a:hover{text-decoration:underline}
@media(max-width:899px){.plan-list{column-width:150px;line-height:2.1}.plan-list a{min-height:34px}}