/* ============================================================================
   DR ÉLECTRICITÉS — Le Luc (83340)
   Charte IMPOSÉE par le client : blanc / noir / jaune.
   Contrat design : DESIGN.md. Contrat de véracité : PRODUCT.md.
   ⛔ Interdits de convergence (7 sites d'électricien livrés) : DESIGN.md §4.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* Charte client */
  --paper:#FFFFFF;
  --paper-2:#F3F4F5;      /* gris NEUTRE — ⛔ jamais crème/lin/bone (tic Editorial Luxury) */
  --paper-3:#E7E9EB;
  --ink:#111214;
  --ink-2:#3A3D42;
  --ink-3:#6B7076;
  --line:#E2E4E7;
  --accent:#FFC400;       /* le jaune — seul accent vif */
  --accent-d:#E0A800;
  --accent-ink:#111214;   /* ⛔ le texte sur jaune est TOUJOURS noir */

  /* Typo — polices jamais utilisées dans le repo (anti-convergence, DESIGN.md §3) */
  --ff-title:"Rethink Sans",system-ui,-apple-system,sans-serif;
  --ff-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --fs-display:clamp(38px,5.4vw,76px);   /* sous le plafond clamp(40px,6vw,96px) */
  --fs-h2:clamp(27px,3.2vw,44px);
  --fs-h3:clamp(20px,2.2vw,27px);
  --fs-body:17px;

  /* Rythme */
  --maxw:1200px;
  --gutter:24px;
  --sect:clamp(56px,7vw,104px);
  /* Remontée du bloc qui chevauche la couture du hero. UNE seule source : le padding
     bas du bandeau noir s'y adosse, donc la carte ne peut plus mordre le contenu. */
  --ov:clamp(34px,4vw,54px);

  /* Motion — liste FERMÉE (DESIGN.md §11) */
  --t:200ms cubic-bezier(.2,0,0,1);
  --t-slow:280ms cubic-bezier(.2,0,0,1);
}

/* ------------------------------------------------------------- 2. BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:var(--fs-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* ⚠️ masque l'overflow : le sweep 320→1440 le neutralise pour mesurer */
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--ff-title);font-weight:800;line-height:1.05;
  letter-spacing:-.022em;margin:0;text-wrap:balance}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.015em}
p{margin:0;text-wrap:pretty}
p + p{margin-top:1em}
.lead{font-size:clamp(17px,1.35vw,19.5px);color:var(--ink-2)}
.num{font-feature-settings:'tnum';font-variant-numeric:tabular-nums}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hdA :focus-visible,.on-dark :focus-visible{outline-color:var(--accent)}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);
  color:var(--accent-ink);padding:12px 20px;font-weight:700;z-index:200}
.skip:focus{left:0}

/* ------------------------------------------------------------- 3. LAYOUT */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-n{max-width:840px;margin-inline:auto;padding-inline:var(--gutter)}
.sect{padding-block:var(--sect)}
.sect-t{padding-top:var(--sect)}
.sect-b{padding-bottom:var(--sect)}
.alt{background:var(--paper-2)}
.on-dark{background:var(--ink);color:#fff}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark .lead,.on-dark p{color:#D2D5DA}
.on-yellow{background:var(--accent);color:var(--accent-ink)}
.on-yellow .lead,.on-yellow p{color:#241F00}

.head-block{max-width:62ch;margin-bottom:clamp(28px,3.5vw,44px)}
.head-block .lead{margin-top:14px}

/* --------------------------------------- 4. MOTIF SIGNATURE : LE FILET
   Variante A retenue par Mourad le 2026-07-29, en remplacement des deux
   équerres « le seuil » : « j'ai pas compris cet espace d'angle droit jaune ».
   Un signe qu'il faut expliquer a échoué (system/DESIGN-RULES.md, 2026-07-29).
   Le filet ne demande aucun décodage : c'est de la ponctuation graphique.

   ⚠️ Anti-convergence : LDE Aubagne utilise déjà un « filet cuivre » comme
   signature. Le nôtre s'en écarte sur deux points mesurables — il est COURT
   (72 px, il souligne le titre au lieu de traverser la colonne, ce qui le
   distingue aussi d'un simple séparateur) et il sert d'ANCRAGE au survol dans
   la marge gauche, pas de trait décoratif. */
.rule-t{display:block;width:72px;height:6px;background:var(--accent);margin-bottom:20px}
/* Le filet souligne TOUT titre de section, sinon il cesse d'être une signature :
   quand il n'apparaît qu'une fois sur deux, il se lit comme un séparateur posé au
   hasard. `.sect h2` couvre les titres qui ne sont pas dans un `.head-block`
   (colonne de split, bloc de zone, colonnes de la page contact) — ils étaient nus
   sur 8 pages / 8. Le CTA final est exclu : il porte déjà le filet AU-DESSUS. */
.head-block h2::after,.wrap-n h2::after,.sect h2::after{content:"";display:block;
  width:72px;height:6px;background:var(--accent);margin-top:16px}
.cta-final h2::after{content:none}
/* Sur l'aplat jaune, un filet jaune serait invisible : il passe au noir de la
   charte (« le texte POSÉ SUR le jaune est toujours le noir », DESIGN.md §2). */
.on-yellow .rule-t,.cta-final .rule-t{background:var(--accent-ink)}

/* ------------------------------------------------------------- 5. BOUTONS
   ⛔ interdit n°3 : le duo « devis plein + téléphone outline » est sur 7/7 des
   sites du métier. Ici : un seul bouton plein + le numéro en TEXTE lié. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 30px;background:var(--accent);color:var(--accent-ink);
  font-family:var(--ff-title);font-weight:700;font-size:17px;text-decoration:none;
  border:0;cursor:pointer;transition:background-color var(--t),scale var(--t)}
.btn:hover{background:var(--accent-d)}
.btn:active{scale:.96}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2A2D33}
.btn-wide{width:100%;max-width:360px}

.tel{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;
  font-family:var(--ff-title);font-weight:700;font-size:21px;letter-spacing:-.01em;
  font-feature-settings:'tnum';transition:color var(--t)}
.tel small{font-family:var(--ff-body);font-weight:500;font-size:14px;
  letter-spacing:0;opacity:.72}
/* ⛔ pas de jaune en couleur de texte sur fond clair : filet jaune au survol */
.tel:hover{text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:3px;text-underline-offset:5px}
.on-dark .tel{color:var(--accent)}
.on-dark .tel:hover{color:#FFD84D}

.acts{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:30px}

/* ------------------------------------------------------- 6. HEADER + NAV
   ⛔ interdit n°1 : « logo gauche + nav + bouton devis à droite » = 7/7.
   Ici : tuile jaune pleine hauteur portant le TÉLÉPHONE (pas une pilule devis). */
/* Silhouette : la barre principale mesure 96 px (⛔ JAMAIS 75–85 px, c'est la bande
   du 7/7) et la nav est COLLÉE au logo — elle ne flotte pas au centre entre un logo
   à gauche et un bouton à l'extrême droite. DESIGN.md §4, règle rendue mesurable. */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line);
  display:flex;align-items:stretch;justify-content:flex-start;min-height:96px}
.brandbox{display:flex;align-items:center;gap:13px;padding-inline:26px;text-decoration:none}
.brandbox img{height:52px;width:auto}          /* logo client : 48–64 px (logo-client §3) */
.wordmark{font-family:var(--ff-title);font-weight:800;font-size:23px;
  letter-spacing:-.02em;line-height:1;white-space:nowrap}
/* ⛔ DESIGN.md §2 : le jaune ne fait JAMAIS de la typo sur fond clair (#FFC400 sur
   blanc ≈ 1,6:1, #E0A800 ≈ 2,15:1). Ici il vit en SURFACE sous le mot : le texte
   reste noir (16:1) et le jaune est plus visible qu'en couleur de police. */
.wordmark em{font-style:normal;color:var(--ink);
  background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 88%/100% .17em}

.site-nav{display:flex;align-items:center;gap:30px;font-weight:600;font-size:16px;
  margin-right:auto;padding-left:6px}   /* collée au logo, pas centrée */
.site-nav a{text-decoration:none;padding-block:6px;
  transition:box-shadow var(--t),color var(--t)}
/* ⛔ pas de jaune en couleur de texte au survol : filet jaune sous le mot */
.site-nav a:hover{box-shadow:inset 0 -3px 0 var(--accent)}
.site-nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--accent)}

/* Menu « Prestations » groupé — ⛔ interdit n°15 : jamais les services à plat */
.has-sub{position:relative}
.has-sub > button{background:none;border:0;cursor:pointer;font-weight:600;font-size:16px;
  display:inline-flex;align-items:center;gap:7px;padding-block:6px;color:inherit}
.has-sub > button::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate var(--t)}
.has-sub[data-open="true"] > button::after{rotate:225deg;translate:0 1px}
.submenu{position:absolute;top:calc(100% + 10px);left:-18px;min-width:288px;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(17,18,20,.06),0 12px 28px -8px rgba(17,18,20,.18);
  padding:8px;list-style:none;margin:0;display:none}
.has-sub[data-open="true"] .submenu{display:block}
.submenu a{display:block;padding:11px 14px;text-decoration:none;font-weight:600;
  transition:background-color var(--t)}
.submenu a:hover{background:var(--paper-2)}

.header-tile{display:flex;flex-direction:column;justify-content:center;
  background:var(--accent);color:var(--accent-ink);padding:12px 30px;text-decoration:none;
  transition:background-color var(--t)}
.header-tile:hover{background:var(--accent-d)}
.header-tile b{font-family:var(--ff-title);font-size:20px;font-feature-settings:'tnum';
  line-height:1.15}
.header-tile span{font-size:13px;font-weight:600;opacity:.82}

/* Burger — le tiroir vit SOUS le header sticky (memory feedback_burger_stacking_context :
   un tiroir `fixed` au-dessus du header rend le menu impossible à refermer). */
/* margin-left:auto — la nav (qui portait la poussée vers la droite) est masquée en
   mobile : sans cela le burger se colle au logo et laisse tout l'écran vide à droite. */
.burger{display:none;align-items:center;justify-content:center;
  width:52px;height:52px;margin-left:auto;margin-right:16px;
  background:none;border:0;cursor:pointer}
.burger span{display:block;width:26px;height:2.5px;background:var(--ink);position:relative;
  transition:background-color var(--t)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;
  width:26px;height:2.5px;background:var(--ink);transition:translate var(--t),rotate var(--t)}
.burger span::before{translate:0 -8px}
.burger span::after{translate:0 8px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{translate:0 0;rotate:45deg}
.burger[aria-expanded="true"] span::after{translate:0 0;rotate:-45deg}

.drawer{display:none;background:var(--paper);border-bottom:1px solid var(--line)}
.drawer[data-open="true"]{display:block}
.drawer ul{list-style:none;margin:0;padding:8px 0 18px}
.drawer a{display:block;padding:15px var(--gutter);text-decoration:none;
  font-family:var(--ff-title);font-weight:700;font-size:18px;border-bottom:1px solid var(--line)}
.drawer .sub a{font-family:var(--ff-body);font-weight:600;font-size:16px;
  padding-left:calc(var(--gutter) + 18px);color:var(--ink-2)}
.drawer .drawer-tel{display:flex;align-items:center;gap:12px;margin:16px var(--gutter) 22px;
  background:var(--accent);color:var(--accent-ink);padding:16px 20px;text-decoration:none;
  font-family:var(--ff-title);font-weight:700;font-size:19px;font-feature-settings:'tnum'}

/* ------------------------------ 6 bis. HERO — DIRECTION A « LE SEUIL »
   Photo INTACTE en haut (aucun voile), texte sur aplat noir en bas.
   Le texte ne mord jamais l'image : le contraste est réglé par la COMPOSITION.
   ⛔ interdit n°2 : le bloc de texte n'est ni à gauche de la photo, ni dessus. */
.hero{position:relative}
.hero-photo{position:relative;height:clamp(240px,42vh,430px);overflow:hidden;
  background:var(--paper-2)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* Le sujet qui identifie la photo n'est pas toujours au centre : sur le portail de
   la page à propos, le feu clignotant (le seul élément qui dit « motorisé ») est en
   haut du cadre et le réglage commun le sortait de l'image. */
img.pos-top{object-position:center top}
/* Le filet FERME la photo du hero : c'est la couture entre l'image et l'aplat noir,
   à la même épaisseur que celui du pied de page (DESIGN.md §7 : 9 px).
   ⚠️ ce raccourci écrasait un `border-top-width:9px` déclaré plus haut : le motif
   sortait à 6 px sur les 7 heros du site. */
.hero-band{background:var(--ink);color:#fff;padding:44px 0 48px;
  border-top:9px solid var(--accent)}
/* Le bloc qui chevauche remonte de --ov : le bandeau noir doit lui réserver cette
   hauteur EN PADDING, sinon la carte mange le CTA (accueil) ou la dernière ligne du
   lead (à propos). Mesuré : 6 px et 16 px avalés à 1440. */
.hero--overlap .hero-band{padding-bottom:calc(var(--ov) + 30px)}
.hero-band h1{color:#fff;max-width:17ch}
.hero-band .lead{margin-top:20px;max-width:60ch;color:#D2D5DA;font-size:18.5px}
/* Un SEUL bouton : le téléphone vit dans la tuile du header.
   ⛔ interdit n°3 : jamais « bouton plein + lien tel » sur la même ligne. */
.hero-band .acts{margin-top:30px}
/* Hero de page intérieure : même principe, proportions réduites */
.hero--page .hero-photo{height:clamp(180px,26vh,280px)}
.hero--page .hero-band{padding:34px 0 38px}
.hero--page.hero--overlap .hero-band{padding-bottom:calc(var(--ov) + 38px)}
.hero--page h1{font-size:clamp(30px,4.2vw,52px);max-width:20ch}
.hero--page .lead{font-size:17.5px;margin-top:16px}

/* ---------------- 6 ter. BLOC QUI CHEVAUCHE LA COUTURE (component-bank §5)
   Les faits vérifiables remontent au-dessus de la ligne de flottaison en
   chevauchant la jonction hero / section suivante : deux plans, pas un empilement.
   ⛔ ce n'est PAS le « bandeau de réassurance collé sous le hero » de l'interdit
   n°5 : il chevauche, il ne se colle pas, et il porte des FAITS, pas des promesses. */
.overlap{margin-top:calc(var(--ov) * -1);position:relative;z-index:3}
.overlap .facts{background:var(--paper);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(17,18,20,.05),0 18px 40px -22px rgba(17,18,20,.35)}
.overlap .facts div{border-bottom:0}

/* --------------------------------- 7. INDEX SERVICES (section « cassée »)
   ⛔ remplace la grille de 4 cartes attendue (design-artisan-btp §5). */
.idx{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.idx li{border-bottom:1px solid var(--line)}
/* Le filet vit dans la MARGE gauche : au repos les lignes restent alignées sur la
   verticale du titre de section, au survol le filet jaune apparaît et ancre la ligne. */
.idx a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:22px;
  align-items:center;padding:24px 4px 24px 18px;text-decoration:none;
  border-left:6px solid transparent;margin-left:-24px;
  transition:background-color var(--t),border-color var(--t)}
.idx a:hover{background:var(--paper-2);border-left-color:var(--accent)}
/* Les index des pages service n'ont pas de vignette : sans cette règle la 3e colonne
   reste déclarée et son `gap` décale le « Voir » de 22 px vers l'intérieur, si bien
   qu'il ne tombe pas au même endroit que sur l'accueil. */
.idx a:not(:has(.thumb)){grid-template-columns:minmax(0,1fr) auto}
.idx .t{font-family:var(--ff-title);font-weight:800;
  font-size:clamp(21px,2.5vw,30px);letter-spacing:-.02em;display:block}
.idx .d{color:var(--ink-2);font-size:16px;margin-top:4px;display:block}
.idx .thumb{width:104px;height:70px;object-fit:cover;opacity:0;transition:opacity var(--t);
  outline:1px solid rgba(17,18,20,.08);outline-offset:-1px}
.idx a:hover .thumb{opacity:1}
.idx .go{font-family:var(--ff-title);font-weight:700;color:var(--ink-3);font-size:15px;
  white-space:nowrap;transition:color var(--t)}
.idx a:hover .go{color:var(--ink)}

/* --------------------------------------------------- 8. FAITS VÉRIFIABLES
   ⛔ uniquement les faits du PRODUCT.md §3. Aucun compteur inventé. */
.facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line)}
.facts div{flex:1 1 210px;padding:22px 26px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-2)}
.facts div:last-child{border-right:0}
.facts b{display:block;font-family:var(--ff-title);font-weight:800;font-size:26px;
  color:var(--ink);font-feature-settings:'tnum';line-height:1.12;margin-bottom:2px}
.on-dark .facts{border-color:rgba(255,255,255,.16)}
.on-dark .facts div{border-color:rgba(255,255,255,.16);color:#B9BDC3}
.on-dark .facts b{color:#fff}

/* -------------------- 8 bis. PLANCHE DE RÉALISATIONS (component-bank §6)
   Photos aux baselines DÉCALÉES, chacune légendée : l'asymétrie casse la grille
   attendue là où tout le monde met 3 cartes égales, et la légende fait le travail
   de preuve à la place d'un paragraphe. Absorbe le fait qu'on n'ait que 2 photos. */
.planche{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,44px);align-items:start}
.planche figure:nth-child(2){margin-top:clamp(28px,5vw,72px)}
.planche img{width:100%;height:auto;outline:1px solid rgba(17,18,20,.08);outline-offset:-1px}
.planche figcaption{margin-top:12px;font-size:15.5px;color:var(--ink-2);max-width:44ch}
.planche figcaption b{display:block;font-family:var(--ff-title);font-weight:800;
  font-size:17px;color:var(--ink);margin-bottom:3px}

/* ------------------------------------- 8 ter. CTA FINAL — BLOC JAUNE PLEIN
   ⛔ interdit n°9 : jamais le bandeau SOMBRE pleine largeur, titre à gauche et
   boutons à droite (5/5 des sites du métier). Ici : aplat jaune, composition
   asymétrique 60/40, un seul bouton noir. */
.cta-final{background:var(--accent);color:var(--accent-ink)}
.cta-final .inner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:end;padding-block:clamp(44px,5.5vw,76px)}
.cta-final h2{max-width:18ch}
.cta-final p{margin-top:14px;max-width:52ch;color:#2A2400;font-size:17.5px}
.cta-final .side{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cta-final .tel{color:var(--accent-ink)}
.cta-final .tel:hover{color:#000}

/* ------------------------------------------------------------ 9. MÉDIAS */
.media{position:relative;overflow:hidden;background:var(--paper-2)}
.media img{width:100%;height:100%;object-fit:cover}
.ratio-16-9{aspect-ratio:16/9}
.ratio-4-3{aspect-ratio:4/3}
.ratio-3-2{aspect-ratio:3/2}
figure{margin:0}
figcaption{font-size:14.5px;color:var(--ink-3);margin-top:10px}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.split-60{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}   /* asymétrie 60/40 */
.split-40{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
/* Deux colonnes de CONTENU (et non texte/photo) : elles démarrent à la même ligne,
   sinon les deux titres se décalent et la page paraît mal montée. */
.split-top{align-items:start}

/* --------------------------------------- 10. TABLEAU ÉDITORIAL (services)
   ⛔ remplace le trio « 3 avantages + icônes ». ⛔ jamais un schéma technique. */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
  border-top:2px solid var(--ink)}
.duo > div{padding:26px 28px;border-bottom:1px solid var(--line)}
.duo > div:nth-child(odd){border-right:1px solid var(--line);background:var(--paper)}
.duo > div:nth-child(even){background:var(--paper-2)}
.duo h3{font-size:19px;margin-bottom:8px}
.duo p{font-size:16px;color:var(--ink-2)}
.duo .col-head{font-family:var(--ff-title);font-weight:800;font-size:15px;
  text-transform:none;color:var(--ink-3);padding:14px 28px;background:var(--paper)}

/* ------------------------------------------------------- 11. ZONE (carte)
   ⛔ interdit n°7 : pas de « pastilles de communes + photo paysage arrondie ».
   ⛔ la carte montre la ZONE, jamais l'adresse du siège (domicile privé). */
.zone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,56px);align-items:center}
/* Les libellés SVG suivent l'échelle du viewBox : sans plafond de largeur ils
   tombaient à 8,3 px en desktop et 5,6 px en mobile — la carte était dessinée mais
   illisible. Largeur plafonnée + corps exprimés pour un rendu ≥ 12 px partout. */
.zone-map{width:100%;max-width:520px;height:auto;display:block}
.zone-map .ring{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:7 7}
.zone-map .land{fill:var(--paper-2);stroke:var(--line);stroke-width:1.5}
.zone-map .dot{fill:var(--ink)}
.zone-map .hub{fill:var(--accent);stroke:var(--ink);stroke-width:2.5}
/* Halo blanc sous les libellés : les communes du centre du Var sont serrées, un point
   tombe forcément derrière un mot. Le halo garde le mot lisible sans déplacer le point
   (qui, lui, doit rester géographiquement juste). */
.zone-map text{font-family:var(--ff-body);font-size:16px;fill:var(--ink-2);
  paint-order:stroke fill;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
.zone-map text.hub-label{font-family:var(--ff-title);font-weight:800;font-size:21px;fill:var(--ink)}
.commune-list{columns:2;column-gap:32px;list-style:none;margin:18px 0 0;padding:0;
  font-size:16px;color:var(--ink-2)}
.commune-list li{padding:4px 0;break-inside:avoid}

/* ---------------------------------------------------------- 12. FORMULAIRE */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-weight:600;font-size:15.5px}
.field .req{color:var(--ink-3);font-weight:500}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--paper-3);padding:14px 16px;min-height:52px;
  transition:border-color var(--t)}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--ink);outline:3px solid var(--accent);outline-offset:1px}
.form-note{font-size:14.5px;color:var(--ink-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------- 13. FOOTER */
.site-footer{background:var(--ink);color:#B9BDC3;position:relative;overflow:hidden}
.site-footer a{color:#E5E7EA;text-decoration:none}
.site-footer a:hover{color:var(--accent)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);padding-block:clamp(44px,5vw,72px);position:relative;z-index:2}
.footer-grid h3{font-size:16px;color:#fff;margin-bottom:14px}
.footer-grid ul{list-style:none;margin:0;padding:0;font-size:15.5px}
.footer-grid li{padding:3px 0}
/* Cible de 24 px minimum (WCAG 2.2 AA § 2.5.8) : le texte seul ne fait que 21 px. */
.footer-grid a{display:inline-block;padding-block:3px}
.footer-brand .wordmark{color:#fff;font-size:26px}
/* Sur le noir, le jaune EN TEXTE est licite (≈ 11:1) : on retire le filet du header */
.footer-brand .wordmark em{color:var(--accent);background:none}
.footer-brand img{height:64px;width:auto;margin-bottom:14px}
.footer-tel{display:inline-flex;margin-top:14px;font-family:var(--ff-title);font-weight:700;
  font-size:22px;color:var(--accent)!important;font-feature-settings:'tnum'}
.footer-bar{border-top:1px solid rgba(255,255,255,.14);padding-block:20px;font-size:14px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;position:relative;z-index:2}
/* Le filet, à l'échelle du pied de page : il ferme le site comme il ferme la photo
   du hero. Pleine largeur ici, c'est sa seule occurrence longue du site. */
.footer-mark{position:absolute;left:0;right:0;top:0;height:9px;
  background:var(--accent);pointer-events:none;z-index:3}

/* ---------------------------------------------------------- 14. RESPONSIVE */
@media (max-width:1000px){
  .zone{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:860px){
  /* Le bloc ne chevauche plus (colonne unique) : la remontée tombe à 0, et le padding
     bas du bandeau noir revient donc automatiquement à sa valeur mobile. */
  :root{--ov:0px}
  .site-header{min-height:76px}
  .site-nav{display:none}
  .burger{display:flex}
  .header-tile{display:none}
  .brandbox{padding-inline:18px}
  .brandbox img{height:44px}
  /* Le CTA du hero doit rester au-dessus de la ligne de flottaison AVEC la barre
     d'URL d'un vrai téléphone (≈ 667 px utiles sur un écran de 375). */
  .hero-photo{height:clamp(150px,22vh,200px)}
  .hero-band{padding:26px 0 30px}
  .hero-band h1{font-size:clamp(29px,7.4vw,38px);max-width:20ch}
  .hero-band .lead{margin-top:14px;font-size:16.5px;line-height:1.5}
  .hero-band .acts{margin-top:22px}
  .overlap{margin-top:0}
  .overlap .facts{box-shadow:none;border-left:0;border-right:0}
  .planche{grid-template-columns:1fr}
  .planche figure:nth-child(2){margin-top:0}
  .cta-final .inner{grid-template-columns:1fr;align-items:start}
  .split,.split-60,.split-40,.duo{grid-template-columns:1fr}
  .duo > div:nth-child(odd){border-right:0}
  .duo .col-head{display:none}
  .idx a{grid-template-columns:auto minmax(0,1fr)}
  .idx .thumb,.idx .go{display:none}
  .facts div{flex:1 1 100%;border-right:0}
}
@media (max-width:560px){
  .commune-list{columns:1}
  .footer-grid{grid-template-columns:1fr}
  .acts{gap:18px}
  .btn{width:100%}
}

/* Sous 568 px la carte descend en dessous de son plafond de largeur : son échelle
   baisse, donc le corps des libellés doit remonter d'autant. Deux paliers suffisent
   à tenir la fourchette 11–16 px rendus de 320 à 568 px. */
@media (max-width:568px){
  .zone-map text{font-size:20px}
  .zone-map text.hub-label{font-size:26px}
}
@media (max-width:430px){
  .zone-map text{font-size:23px}
  .zone-map text.hub-label{font-size:29px}
}

/* ------------------------------------------------------ 15. REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* --------------------------------------------------------------- 16. PRINT */
@media print{
  .site-header,.drawer,.burger,.site-footer .footer-mark{display:none}
  body{color:#000;background:#fff}
}