/* ═══════════════════════════════════════════════════════════════════════════
   ERC ELEC — feuille de style unique.
   Direction **A — Socle panoramique**, choisie par Mourad le 2026-08-04
   (DESIGN.md §12). Base claire, grille stricte, UN accent vif, noir en aplats.

   Le motif signature est le CHANFREIN : coin bas-droit coupé + filet accent de
   4 px à GAUCHE — une étiquette de repérage, pas un ornement (DESIGN.md §5).
   ⛔ Aucun border-radius arrondi sur cartes et boutons : un radius isolé casse
      le motif.

   Le CSS du hero, des cartes de situation et du header vient de la piste A de
   `_compare-home.html`, corrigée en 3 passes d'audit (16 défauts réels, dont 5
   invisibles au rapport DOM). Les commentaires ⛔ notent des régressions déjà
   payées : ne pas les rouvrir.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens (DESIGN.md §3/§4) ──────────────────────────────────────────── */
:root{
  --ink:#14161A;
  --ink-soft:#52585F;
  --accent:#E2431A;       /* le rouge-orange : filets, chanfreins, marqueurs   */
  --accent-btn:#CE360F;   /* fond de bouton — blanc dessus = 5.05:1 (AA)      */
  --accent-ink:#B32E0C;   /* rouge-orange ÉCRIT — 6.34:1 sur blanc (AA)       */
  --accent-deep:#A82A0C;
  --paper:#FFFFFF;
  --paper-2:#F3F4F6;
  --line:#DFE2E6;

  --fs-display:clamp(34px,5.2vw,76px);   /* ≤ clamp(40px,6vw,96px) exigé */
  --fs-h2:clamp(24px,2.9vw,38px);
  --fs-h3:clamp(18px,1.7vw,22px);

  --ff-t:'Chivo',system-ui,-apple-system,sans-serif;
  --ff-b:'Barlow',system-ui,-apple-system,sans-serif;

  --chamfer:14px;
  --pad-x:clamp(20px,3.5vw,52px);
  --gap-sec:clamp(42px,4.8vw,80px);
  --wrap:1320px;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--ff-b);font-size:clamp(16px,1.05vw,17.5px);line-height:1.62;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{font-family:var(--ff-t);margin:0;letter-spacing:-.02em;text-wrap:balance;line-height:1.12}
h1{font-size:var(--fs-display);font-weight:800}
h2{font-size:var(--fs-h2);font-weight:800}
h3{font-size:var(--fs-h3);font-weight:700}
p{margin:0;text-wrap:pretty}
a{color:inherit}
ul{margin:0;padding:0}
/* ⛔ Le `dl` gardait la marge par défaut du navigateur (1em) : la colonne noire du
   hero, qui doit être ANCRÉE sur toute la hauteur du bloc (DESIGN.md §12),
   flottait 16 px sous le header et s'arrêtait 16 px avant le socle. Deux liserés
   blancs contre le bord droit, invisibles au rapport DOM. */
dl{margin:0}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--gap-sec)}
.section--tint{background:var(--paper-2)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ⛔ Un nom propre ne se coupe pas. ` ` protège l'espace de « Epagny Metz-Tessy »
   mais PAS le trait d'union : à 320 px on lisait « Epagny Metz- / Tessy ». Idem pour
   « ERC ELEC » dans le H1 d'accueil, où la coupure tombait entre les deux mots. */
.nb{white-space:nowrap}

/* Le motif, à trois échelles. */
.chamfer{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%)}
.chamfer-s{clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-block;font-family:var(--ff-t);font-weight:700;font-size:16px;line-height:1.2;
  text-decoration:none;padding:15px 26px;border:0;cursor:pointer;
  background:var(--accent-btn);color:#fff;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:background-color .15s ease-out;
}
.btn:hover{background:var(--accent-deep)}
.btn:active{scale:.96}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);clip-path:none}
.btn--ghost:hover{background:var(--ink);color:#fff}

/* Cartouche noir — échelle XL du motif. Il porte UNE information, jamais trois :
   le bandeau de micro-réassurances est l'interdit de convergence 5/9 (§6). */
.cart{background:var(--ink);color:#fff;font-family:var(--ff-t);font-weight:700;
  font-size:clamp(15px,1.2vw,17.5px);line-height:1.5;padding:16px 22px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%)}
.cart b{color:#fff;box-shadow:inset 0 -.24em 0 var(--accent)}

/* ══ HEADER ══════════════════════════════════════════════════════════════
   Logo à gauche ; à droite un bloc EMPILÉ : cartouche noir du téléphone
   au-dessus, nav alignée à droite en dessous. Aucun bouton coloré.
   ⛔ Jamais « logo gauche · nav centrée · bouton coloré » : 9/9 du corpus. */
.hd{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:40}
.hd-in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  max-width:var(--wrap);margin-inline:auto;padding:16px var(--pad-x)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.logo img{height:56px;width:auto}                 /* doctrine logo-client : 48–64 px */
.wordmark{font-family:var(--ff-t);font-weight:900;font-size:29px;letter-spacing:-.03em;line-height:1;min-width:0}
.wordmark span{color:var(--accent-ink)}
.wordmark small{display:block;font-family:var(--ff-b);font-weight:500;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
.hd-r{display:flex;flex-direction:column;align-items:flex-end;gap:11px}
/* ⛔ Le numéro ne se coupe JAMAIS : sur 2 lignes il ne se lit plus, sur 3 (vu à
   320 px : « 06 50 / 00 64 / 84 ») il ne se reconnaît même plus. */
.hd-tel{background:var(--ink);color:#fff;padding:8px 16px;font-size:19px;text-decoration:none;
  font-family:var(--ff-t);font-weight:800;letter-spacing:-.01em;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}
.hd-tel:hover{background:var(--accent-deep)}

.nav{display:flex;gap:24px;list-style:none;font-weight:600;font-size:15.5px}
.nav > li{position:relative}
.nav a,.nav .menubtn{display:inline-block;text-decoration:none;padding:4px 0 3px;
  border:0;border-bottom:2px solid transparent;background:none;font:inherit;color:inherit;cursor:pointer}
.nav a:hover,.nav .menubtn:hover,.nav [aria-current="page"]{border-bottom-color:var(--accent)}
.menubtn::after{content:"";display:inline-block;margin-left:7px;border:4px solid transparent;
  border-top-color:currentColor;transform:translateY(2px)}

/* Sous-menu « Prestations ». Trois pièges, tous testés par `check-submenu.mjs` :
   a) le vide entre le bouton et le panneau referme le menu au survol → le
      panneau est COLLÉ au bouton (top:100%, aucun gap) et le survol est géré
      sur le conteneur, pas sur le bouton ;
   b) le clic referme ce que le survol venait d'ouvrir → géré dans apply-config.js ;
   c) un panneau fermé n'est jamais vu par un audit de contraste → il reste dans
      le DOM, la visibilité est pilotée ici. */
.menupanel{position:absolute;top:100%;right:0;min-width:280px;margin:0;padding:6px 0;
  list-style:none;background:var(--paper);border-top:3px solid var(--accent);
  box-shadow:0 1px 2px rgba(20,22,26,.08),0 8px 24px rgba(20,22,26,.14);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s ease-out,transform .18s ease-out,visibility .18s}
.hasmenu.is-open .menupanel{opacity:1;visibility:visible;transform:translateY(0)}
.menupanel a{display:block;padding:11px 20px;border-bottom:0;font-weight:500}
.menupanel a:hover{background:var(--paper-2);color:var(--accent-ink)}

/* Burger ≥ 44×44 : sans flex-shrink:0 il était comprimé à ~32 px, sous la cible
   tactile. ⛔ Le tiroir est POUSSÉ SOUS le header, dans le flux — jamais fixed :
   un tiroir fixed passe sous le header sticky et le menu ne se referme plus
   (mémoire feedback_burger_stacking_context). */
.burger{display:none;flex:0 0 auto;width:46px;height:46px;padding:11px;background:none;
  border:2px solid var(--ink);cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0}
.drawer{display:none;background:var(--paper-2);border-bottom:3px solid var(--accent)}
.drawer.is-open{display:block}
.drawer ul{list-style:none;max-width:var(--wrap);margin-inline:auto}
.drawer a{display:block;padding:15px var(--pad-x);text-decoration:none;font-weight:600;
  border-top:1px solid var(--line)}
.drawer a:hover{color:var(--accent-ink)}
.drawer .sub a{padding-left:calc(var(--pad-x) + 22px);font-weight:500;font-size:15.5px}

@media(max-width:900px){
  .hd-in{align-items:center}
  .hd-r{flex-direction:row;align-items:center;gap:12px}
  .hd-r .nav{display:none}
  .burger{display:block}
  .hd-tel{font-size:17px}
}
/* Sous 520 px la baseline du wordmark passe sur 2-3 lignes et écrase le
   cartouche : on la retire, le métier est porté par le H1 juste dessous. */
@media(max-width:520px){.wordmark small{display:none}}
@media(max-width:400px){.hd-tel{font-size:15px;padding:7px 11px}.wordmark{font-size:24px}.logo img{height:44px}}
@media(max-width:380px){
  .hd-in{padding-left:12px;padding-right:12px;gap:10px}
  .hd-r{gap:10px}
  .wordmark{font-size:21px}
  .hd-tel{font-size:14px;padding:7px 10px}
  .burger{width:44px;height:44px;padding:10px}
}

/* ══ HERO — direction A ═════════════════════════════════════════════════
   H1 sur les 2/3 gauche, SANS image derrière (le contraste est réglé par
   construction, jamais par un voile). Colonne noire de contact ancrée à
   droite. Photo panoramique en socle, d'un bord à l'autre.        */
/* Colonne à 340 px : à 268 il restait ~480 px de blanc mort entre la fin du lead
   et l'aplat, et le premier écran ne se fermait pas à droite. Passée de 310 à
   340 px pour loger le numéro en 40 px sans jamais le couper (voir dd.big). */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;background:var(--paper)}
.hero-txt{padding:clamp(32px,4.4vw,60px) clamp(20px,3.5vw,52px) clamp(28px,3.4vw,46px);
  display:flex;flex-direction:column;align-items:flex-start}
.hero-txt h1{max-width:17ch}
.hero-txt h1 em{font-style:normal;color:var(--accent-ink)}
.hero-lead{margin-top:20px;font-size:clamp(16px,1.35vw,18.5px);line-height:1.62;
  color:var(--ink-soft);max-width:58ch}
.hero-txt .btn{margin-top:28px;margin-bottom:clamp(26px,3vw,42px)}
/* auto + margin-bottom du bouton : le cartouche descend quand il y a du mou,
   sans coller au bouton quand il n'y en a pas. C'est LUI qui ferme l'écran. */
.hero-txt .cart{margin-top:auto;align-self:stretch}
.hero-col{background:var(--ink);color:#fff;padding:clamp(24px,3vw,38px) 22px;
  display:flex;flex-direction:column;gap:24px}
.hero-col .row{border-top:1px solid rgba(255,255,255,.16);padding-top:15px}
.hero-col .row:first-child{border-top:0;padding-top:0}
.hero-col dt{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#9AA1A9;margin-bottom:7px;font-weight:600}
.hero-col dd{margin:0;font-family:var(--ff-t);font-weight:700;font-size:19px;line-height:1.25}
/* ⛔ Le téléphone est porté à 40 px : c'est le signal « corps » exigé par
   `qa/check-blocs-nus.mjs` sur tout groupe de ≥ 3 cellules de texte (skill §5 bis).
   Sans lui, cette colonne est 4 cellules égales de texte nu — le bloc le plus
   pauvre de la page, alors qu'il porte le seul atout prouvable de l'entreprise.
   C'est aussi la meilleure décision de conversion : l'appel est le CTA n°1.
   40 px ≈ 282 px de large en Chivo 800 + 44 px de padding = 326 px : la colonne
   de 340 px l'absorbe sans jamais couper le numéro. */
.hero-col dd.big{font-size:40px;letter-spacing:-.03em;white-space:nowrap}
.hero-col a{text-decoration:none}
.hero-col a:hover{color:#FF7A52}

.socle{position:relative;aspect-ratio:3/1;background:var(--paper-2)}
.socle img{width:100%;height:100%;object-fit:cover}
.socle::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--accent)}
.socle-tag{position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;font-size:12.5px;
  padding:9px 15px;letter-spacing:.05em;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}

/* ⛔ CONTRE-MESURE MOBILE (DESIGN.md §12). Le seul défaut de la direction A :
   « à 390 la composition redevient un empilement sans signature ». La colonne
   ne se contente donc pas de passer en rangée : elle devient une BANDE NOIRE
   pleine largeur où le téléphone est en très gros corps, et le socle garde son
   étiquette chanfreinée. La signature tient au motif, pas à la grille. */
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 30px}
  .hero-col .row{border-top:0;padding-top:0}
  /* Numéro et e-mail sur toute la largeur : sinon « 06 50 00 64 / 84 » et
     « …@gm / ail.com » se coupent. */
  .hero-col .row:first-child,.hero-col .row:last-child{grid-column:1/-1}
  .hero-col .row:first-child dd.big{font-size:clamp(30px,8.5vw,42px)}
  .hero-col .row:last-child{border-top:1px solid rgba(255,255,255,.16);padding-top:16px}
  /* Les filets accent exigés par le §12.1 : sans eux la bande noire arrivait nue
     sous le cartouche et la contre-mesure ne se voyait pas. Le filet BAS est déjà
     porté par le ::after du socle, qui suit immédiatement — un seul trait rouge. */
  .hero-col{border-top:4px solid var(--accent)}
  .socle{aspect-ratio:16/9}
  /* Recadrage n°2 (mémoire feedback_double_recadrage_image) : en 16:9 le cadrage
     centré coupait le multimètre en deux et le socle mobile ne se lisait plus.
     Le sujet est à 68 % de la largeur de la source. */
  .socle img{object-position:68% center}
}
/* Sous 430 px, « professionnels » ne tient plus dans une demi-colonne. */
@media(max-width:430px){
  .hero-col{grid-template-columns:minmax(0,1fr);gap:15px}
  .hero-col .row+.row{border-top:1px solid rgba(255,255,255,.16);padding-top:14px}
}

/* Hero des pages intérieures : même langue, sans la colonne de contact. */
.hero--page{grid-template-columns:1fr}
.hero--page .hero-txt{padding-bottom:clamp(24px,3vw,38px)}
.hero--page h1{max-width:22ch}
.bandeau{position:relative;aspect-ratio:16/6;background:var(--paper-2)}
.bandeau img{width:100%;height:100%;object-fit:cover}
.bandeau::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--accent)}
@media(max-width:700px){.bandeau{aspect-ratio:16/9}}

/* ══ PRESTATIONS PAR SITUATION — la section « cassée » de l'accueil ══════
   ⛔ Ni la grille de 4 cartes égales, ni la liste-index à filets (5/9 du
   corpus), ni le chapeau « eyebrow + H2 + lead » (9/9).            */
.P-h{font-size:var(--fs-h2);font-weight:800;max-width:20ch;margin-bottom:clamp(22px,2.6vw,36px)}
.P-h u{text-decoration:none;box-shadow:inset 0 -.32em 0 rgba(226,67,26,.24)}

/* Cartes DÉTACHÉES (pas de fond de grille) : avec un fond de grille les cartes
   sans photo s'étiraient à la hauteur des illustrées et laissaient ~230 px de
   gris vide sous leur texte — un emplacement d'image manquante, pas un rythme. */
.situations{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.situ{background:var(--paper);padding:22px 22px 24px;border-left:4px solid var(--accent);
  display:flex;flex-direction:column;text-decoration:none;
  box-shadow:0 1px 2px rgba(20,22,26,.05),0 6px 18px rgba(20,22,26,.07)}
.situ:nth-child(2),.situ:nth-child(3){background:var(--paper-2)}
.situ q{display:block;quotes:none;font-family:var(--ff-t);font-weight:700;
  font-size:clamp(19px,1.9vw,23px);line-height:1.24}
.situ q::before,.situ q::after{content:""}
.situ b{display:block;margin-top:14px;font-weight:600;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink)}
.situ p{margin:8px 0 18px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.situ .go{font-family:var(--ff-t);font-weight:700;font-size:15px;
  border-bottom:2px solid var(--accent);align-self:flex-start;padding-bottom:2px}
/* La vignette est POUSSÉE EN PIED : sinon les 2 cartes illustrées décalent leur
   titre de 190 px et la rangée se lit comme une grille cassée. */
.situ .thumb{order:2;margin:auto -22px -24px;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2)}
.situ .thumb img{width:100%;height:100%;object-fit:cover;transition:scale .28s ease-out}
.situ:hover .thumb img{scale:1.03}
/* Colonnes EXPLICITES : auto-fit donnait 3 colonnes + 1 orpheline entre 820 et
   1023 px, donc une cellule vide. */
@media(min-width:560px){.situations{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ⛔ En 2 colonnes, une carte illustrée (~371 px) voisine d'une carte de texte
   (~176 px) laissait 195 px de vide — exactement la hauteur d'une vignette,
   adjacent à une photo. Les 2 illustrées vont sur la même rangée, les 2
   compactes sur l'autre. L'ordre du DOM (lecture, restitution vocale) est
   inchangé : seul `order` visuel bouge. */
@media(min-width:560px) and (max-width:1023px){
  .situ:nth-child(2),.situ:nth-child(3){order:1}
  .situ:nth-child(1),.situ:nth-child(4){order:2}
}
@media(min-width:1024px){.situations{grid-template-columns:1.3fr 1fr .92fr 1.22fr}}

/* ── Diptyque particuliers / professionnels ───────────────────────────────
   ⛔ JAMAIS `auto-fit` ici. Le fond du conteneur est l'accent : il ne se voit
   qu'à travers les joints de 3 px… tant que la grille est pleine. À 900–1023 px,
   `auto-fit` ouvrait TROIS pistes pour quatre enfants et les deux cellules
   manquantes de la seconde rangée devenaient un aplat ROUGE VIF de 600 × 230 px.
   Invisible au rapport DOM (aucun overflow) et hors des 4 viewports standards :
   c'est le trou 900–1150 px de `feedback_qa_dom_aveugle_overflow`.
   4 enfants ⇒ 1, 2 ou 4 colonnes, jamais 3. */
.diptyque{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;
  background:var(--accent)}
.diptyque .figure{aspect-ratio:4/3}
/* Dès que photos et textes partagent une rangée, les photos s'étirent à sa
   hauteur : sinon le fond accent réapparaissait sous chaque photo en une bande
   rouge de ~22 px, qu'on lit comme une bavure et non comme un joint. */
@media(min-width:560px){
  /* `grid-auto-rows` donne un plancher à la rangée : sans lui, une rangée dont le
     texte est court écrasait la photo en un bandeau de 3:1. */
  .diptyque{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;
    grid-auto-rows:minmax(clamp(230px,22vw,300px),auto)}
  .diptyque .figure{aspect-ratio:auto;min-height:100%}
}
@media(min-width:1024px){.diptyque{grid-template-columns:repeat(4,minmax(0,1fr))}}
.figure{position:relative;margin:0;background:var(--paper-2);overflow:hidden}
.figure img{width:100%;height:100%;object-fit:cover}
.figure figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;
  font-size:12.5px;padding:8px 14px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.dip-txt{background:var(--paper);padding:22px}
/* Centré verticalement dès que la cellule est plus haute que son texte : calé en
   haut, chaque bloc laissait ~150 px de blanc sous lui, à côté d'une photo pleine. */
@media(min-width:560px){.dip-txt{display:flex;flex-direction:column;justify-content:center}}
.dip-txt h3{margin-bottom:8px}
/* Dès que les deux blocs de texte sont côte à côte, leurs titres doivent réserver
   la même hauteur : « Chez les particuliers » tient sur une ligne, « Dans les
   locaux professionnels » sur deux, et les deux paragraphes démarraient 25 px
   l'un au-dessous de l'autre. */
@media(min-width:560px){.dip-txt h3{min-height:2.24em}}
.dip-txt p{font-size:15.5px;color:var(--ink-soft)}

/* ── « Ce que ça recouvre » — pages service ─────────────────────────────
   Le titre + le cartouche tenaient la colonne gauche, la liste faisait 5 lignes
   et la moitié droite de la section restait vide sur ~200 px de haut : un trou
   de grille visible sur les 4 pages. Le titre et le cartouche forment maintenant
   la colonne étroite, la liste occupe la colonne large : les deux se terminent
   à la même hauteur. */
.recouvre{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
@media(min-width:900px){.recouvre{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.recouvre .cart{margin-top:22px}

/* ── Listes à puce carrée chanfreinée (⛔ jamais d'emoji-puce) ──────────── */
.ticks{list-style:none;display:grid;gap:11px}
.ticks li{position:relative;padding-left:23px}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--accent);clip-path:polygon(0 0,100% 0,100% 65%,65% 100%,0 100%)}

/* ── « Ce qu'on regarde en arrivant » — section cassée des pages service ──
   ⛔ Pas d'`align-items:start` ici : les cellules 1 et 3 portent un aplat blanc,
   et avec des textes de longueurs différentes leurs deux fonds s'arrêtaient 40 px
   l'un au-dessus de l'autre. Ça se lit comme un défaut d'alignement, pas comme
   l'asymétrie voulue (qui est « avec aplat / sans aplat », pas « plus haut / plus
   bas »). Les cellules s'étirent donc à la hauteur de la rangée. */
.regard{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px}
.regard div{border-left:4px solid var(--accent);padding:16px 20px;background:var(--paper)}
.regard div:nth-child(even){background:var(--paper-2)}
.regard h3{font-size:17px;margin-bottom:6px}
.regard p{font-size:15px;color:var(--ink-soft)}

/* ── Zone d'intervention — communes en colonnes à filets ────────────────
   ⛔ Jamais le nuage de pilules arrondies : 7 sites sur 9 le font.  */
.zone{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
.zone .figure{aspect-ratio:3/2}
/* La photo s'arrêtait 140 px au-dessus du bas de la liste de communes : un trou
   blanc franc en bas de colonne, lu comme une image trop courte. Les deux colonnes
   se terminent maintenant ensemble. */
@media(min-width:900px){
  .zone{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}
  .zone .figure{aspect-ratio:auto;min-height:100%}
}
.zone-cols{columns:2;column-gap:30px}
.zone-cols li{list-style:none;padding:8px 0;border-bottom:1px solid var(--line);
  break-inside:avoid;font-size:15.5px}
@media(max-width:420px){.zone-cols{columns:1}}

/* Carte de zone à cercles concentriques — 2/9 seulement dans le corpus.
   Géographie, pas schéma technique : autorisée par design-artisan-btp §7. */
.radar{position:relative;aspect-ratio:400/404;max-width:420px;margin-inline:auto;width:100%}
.radar svg{width:100%;height:100%;display:block}

/* ── Bande CTA (photo sombre + voile ≥ .55, texte clair) ────────────────── */
.cta-band{position:relative;color:#fff;overflow:hidden;isolation:isolate}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta-band::after{content:"";position:absolute;inset:0;background:rgba(12,13,16,.7);z-index:-1}
.cta-band .inner{padding-block:clamp(38px,4.4vw,68px)}
.cta-band h2{text-shadow:0 2px 14px rgba(0,0,0,.5)}
.cta-band p{color:#E4E7EA;text-shadow:0 1px 10px rgba(0,0,0,.5);margin-top:12px;max-width:58ch}
.cta-band .btn{margin-top:24px}

/* ── Formulaire ─────────────────────────────────────────────────────────── */
.form{display:grid;gap:16px}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:14.5px}
.field .req{color:var(--accent-ink)}
.field input,.field textarea,.field select{
  font-family:inherit;font-size:16px;padding:13px 14px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:0;width:100%}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--accent-ink);outline-offset:1px;border-color:var(--accent-ink)}
.form .hp{position:absolute;left:-9999px}      /* pot de miel anti-robot */
.form-note{font-size:14px;color:var(--ink-soft)}
@media(min-width:640px){.form .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}}

/* ── Fiche d'identité (à propos — la section cassée) ──────────────────────
   ⛔ Jamais `auto-fit` ici : le fond du conteneur est le filet gris, donc toute
   cellule manquante en fin de grille devient un RECTANGLE GRIS VIDE. Avec 7 faits
   sur 5 colonnes, il en restait trois côte à côte — 735 × 115 px de gris qu'on lit
   comme une case qu'on aurait oublié de remplir. Le compte de cellules (8) et le
   nombre de colonnes (1 / 2 / 4) sont donc figés ensemble : les rangées sont
   toujours pleines. Ajouter un fait → en ajouter deux, ou repasser à 4 colonnes. */
.identite{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;
  background:var(--line)}
@media(min-width:560px){.identite{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.identite{grid-template-columns:repeat(4,minmax(0,1fr))}}
.identite div{background:var(--paper);padding:20px}
.identite div:nth-child(even){background:var(--paper-2)}
.identite dt{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;margin-bottom:7px}
.identite dd{margin:0;font-family:var(--ff-t);font-weight:700;font-size:18px;line-height:1.3;
  overflow-wrap:anywhere}

/* ── Cross-sell entre pages service ─────────────────────────────────────── */
.cross{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.cross a{display:block;text-decoration:none;background:var(--paper);padding:18px 20px;
  border-left:4px solid var(--accent);
  box-shadow:0 1px 2px rgba(20,22,26,.05),0 6px 18px rgba(20,22,26,.07);
  transition:border-left-width .18s ease-out}
.cross a:hover{border-left-width:8px}
.cross strong{display:block;font-family:var(--ff-t);font-size:17px}
.cross span{font-size:14.5px;color:var(--ink-soft)}

/* ══ FOOTER CLAIR ═══════════════════════════════════════════════════════
   ⛔ Les 9 sites d'électricien ont tous un footer sombre à 3-4 colonnes.
   Ici : bandeau de contact pleine largeur, numéro en très gros corps, puis
   une barre de liens fine.                                          */
.ft{background:var(--paper-2);border-top:4px solid var(--accent)}
/* ⛔ Colonnes EXPLICITES : avec `auto-fit`, la grille ouvrait 4 pistes à 1440 px,
   le bloc contact en prenait une rangée entière et les deux colonnes de liens se
   tassaient dans les pistes 1 et 2 — la moitié droite du footer restait vide. */
.ft-contact{display:grid;grid-template-columns:minmax(0,1fr);
  gap:26px;align-items:start;padding-block:clamp(30px,3.4vw,50px)}
@media(min-width:700px){.ft-contact{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:26px 48px}}
/* §8 : « le contact est un BLOC, pas une colonne ». En colonne parmi trois, le
   footer redevenait la grille 3 colonnes + barre © des 9 sites du corpus, à la
   couleur près. Le bloc contact prend donc toute la largeur, au-dessus des liens. */
.ft-block{grid-column:1/-1;padding-bottom:26px;border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px}
.ft-tel{font-family:var(--ff-t);font-weight:800;font-size:clamp(30px,4vw,50px);
  letter-spacing:-.03em;text-decoration:none;line-height:1;display:inline-block;white-space:nowrap}
.ft-tel:hover{color:var(--accent-ink)}
.ft-mail{display:inline-block;margin-top:12px;font-size:17px;overflow-wrap:anywhere}
.ft-block .ft-mail{margin-top:0}
.ft-logo img{max-height:280px;width:auto}   /* logo EN GRAND dès réception (LOGO.md) */
.ft-col h3{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:600;margin-bottom:10px}
.ft-col li{list-style:none;padding:5px 0}
.ft-col a{text-decoration:none;font-size:15.5px}
.ft-col a:hover{color:var(--accent-ink)}
.ft-links{border-top:1px solid var(--line);padding-block:20px;display:flex;flex-wrap:wrap;
  gap:12px 24px;font-size:14.5px;align-items:baseline}
.ft-links a{text-decoration:none}
.ft-links a:hover{color:var(--accent-ink);text-decoration:underline}
.ft-legal{color:var(--ink-soft);margin-left:auto;font-size:13.5px}
@media(max-width:640px){.ft-legal{margin-left:0}}

/* ── Fil d'Ariane ───────────────────────────────────────────────────────── */
.breadcrumb{font-size:14px;color:var(--ink-soft);padding-block:14px;border-bottom:1px solid var(--line)}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{color:var(--accent-ink);text-decoration:underline}

/* ── Prose (mentions légales) ───────────────────────────────────────────── */
.prose{max-width:74ch}
.prose h2{font-size:clamp(20px,2.1vw,26px);margin-top:36px}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul{margin-top:14px}
/* Même puce carrée chanfreinée que le reste du site : la puce ronde native était
   le seul endroit où le motif signature décrochait. */
.prose ul{padding-left:0;list-style:none}
.prose li{margin-top:6px;position:relative;padding-left:23px}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--accent);clip-path:polygon(0 0,100% 0,100% 65%,65% 100%,0 100%)}

/* ── Animations : liste FERMÉE (DESIGN.md §11) ──────────────────────────
   ⛔ Zéro fade-in/slide-up au scroll. ⛔ Jamais `transition: all`.     */
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .situ:hover .thumb img{scale:1}
}