/* ═══════════════════════════════════════════════════════════════
   PEREZELEC 66 — direction B « Albères »
   Tokens et règles figés dans DESIGN.md. Toute modification passe
   par le skill design-artisan-btp (il tranche les conflits).
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Palette — extraite du LOGO CLIENT (`.tools/logo.mjs`), pas inventée.
     Les trois couleurs du logo irriguent le site, aucune n'est laissée de côté :
       #0C4D74  bleu du wordmark      39,7 % des pixels du logo
       #1A2731  nuit du monogramme    26,2 %
       #CC863C  ocre du tracé et du « 66 »  18,6 %                             */
  --ink:#1A2731;             /* nuit du monogramme */
  --ink-soft:#3D4F5C;
  --ink-mute:#576976;        /* 4,83:1 sur le sable (4,29 avant : sous le seuil sur .sec-head p, .hero-note, .crumb) */
  --bg:#FFFFFF;
  --bg-alt:#F6EAE3;          /* sable rosé, sections en alternance */
  --bg-deep:#121B22;         /* nuit du logo assombrie — sections d'impact */
  --accent:#0C4D74;          /* bleu du wordmark — accent vif unique */
  --accent-d:#093C5A;
  --accent-2:#CC863C;        /* ocre — filets, traits, symboles (jamais du texte sur fond clair) */
  --accent-2-ink:#875828;    /* même ocre assombri : texte sur blanc (6,08:1) et sur sable (5,15:1) */
  --line:#E3D5CB;
  --line-cool:#DCE4E9;
  --on-accent:#FFFFFF;

  /* Typo */
  --ff-head:'Work Sans','Work Sans repli',system-ui,sans-serif;
  --ff-body:Inter,'Inter repli',system-ui,sans-serif;
  --fs-display:clamp(34px,4.5vw,64px);
  --fs-h2:clamp(26px,3.2vw,44px);
  --fs-h3:clamp(19px,1.5vw,23px);
  --fs-body:clamp(16px,1.05vw,18px);

  /* Structure */
  --maxw:1200px;
  --gutter:clamp(20px,4vw,56px);
  --r:4px;
  --r-card:12px;
  --shadow-1:0 1px 2px rgba(20,33,43,.07),0 4px 12px rgba(20,33,43,.06);
  --shadow-2:0 2px 4px rgba(20,33,43,.09),0 18px 42px rgba(20,33,43,.16);
  --ease:cubic-bezier(.2,0,0,1);
}

/* ── Police de repli des titres ───────────────────────────────────
   Sans elle, le texte s'affiche en Arial (11 % plus large que Work Sans)
   puis se recompose au chargement de la police : c'est ce reflow qui
   faisait monter le CLS à 0,102 sur la page tableau.
   Les pourcentages sont MESURÉS par `node .tools/font-metrics.mjs`, qui compare
   les largeurs réelles sur 4 phrases du site — et qui REFUSE de mesurer tant que
   `document.fonts.check()` ne confirme pas que la police est chargée (une première
   mesure faite avant chargement avait donné des valeurs fausses).
   Seul `size-adjust` est déclaré : les hauteurs de ligne sont fixées en CSS
   (sans unité), donc les métriques verticales n'influencent pas la mise en page. */
/* Les deux replis s'appuient sur Arial. Verdana et « Segoe UI » collent
   marginalement mieux aux mesures, mais Verdana ne se résout pas de façon
   fiable via local() et « Segoe UI » n'existe que sous Windows : un repli
   indisponible ne remplit pas son office. Arial, elle, est partout, et
   Liberation Sans lui est métriquement équivalente sous Linux. */
@font-face{
  font-family:'Work Sans repli';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:103.2%;          /* dispersion mesurée : 1,67 % */
  font-weight:500 700;
  font-style:normal;
}
@font-face{
  font-family:'Inter repli';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:106.5%;          /* dispersion mesurée : 1,71 % */
  font-weight:400 600;
  font-style:normal;
}

/* ── Base ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ff-body);font-size:var(--fs-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--ff-head);font-weight:700;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.num{font-feature-settings:'tnum';font-variant-numeric:tabular-nums}

/* ── Boutons ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 22px;border-radius:var(--r);border:1px solid transparent;
  font-family:var(--ff-head);font-weight:600;font-size:15.5px;text-decoration:none;cursor:pointer;
  transition-property:transform,background-color,border-color,box-shadow,color;
  transition-duration:.18s;transition-timing-function:var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.96)}
.btn--1{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-1)}
.btn--1:hover{background:var(--accent-d)}
.btn--2{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--2:hover{background:var(--ink);color:#fff}
.btn--ghost{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.08)}
.btn--ghost:hover{background:rgba(255,255,255,.16)}

/* ── Typographie de section ───────────────────────────────────── */
.eyebrow{
  font-family:var(--ff-body);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2-ink);margin:0 0 14px;
}
.lead{font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.64;color:var(--ink-soft)}
.sec{padding-block:clamp(56px,7vw,104px)}
.sec--alt{background:var(--bg-alt)}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:14px 40px;margin-bottom:clamp(26px,3vw,42px)}
.sec-head h2{font-size:var(--fs-h2)}
.sec-head p{max-width:42ch;color:var(--ink-mute);font-size:15.5px}

/* ── Motif signature : la forme du LOGO ───────────────────────────
   Le monogramme PZ est traversé d'un trait ocre ponctué de deux nœuds.
   C'est CE trait qui sert de motif au site, décliné en séparateur.
   ⛔ Jamais un schéma technique dessiné (unifilaire, câblage, tuyauterie) :
   ça prétend à une exactitude qu'on ne peut pas garantir et l'artisan
   le voit en trois secondes. Le hook check-impeccable.js le bloque. */
.mark-rule{display:flex;align-items:center;gap:0;color:var(--accent-2)}
.mark-rule span{flex:1;height:2px;background:currentColor;position:relative;border-radius:2px}
.mark-rule span::before,.mark-rule span::after{
  content:"";position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:currentColor;transform:translateY(-50%)}
.mark-rule span::before{left:0}
.mark-rule span::after{right:0}
.rule{border:0;height:1px;background:var(--line);margin:0}

/* ── Header ───────────────────────────────────────────────────── */
.head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:clamp(12px,2.5vw,36px);min-height:76px;flex-wrap:nowrap}
/* le libellé du CTA ne se coupe jamais en deux : s'il manque de place, ça devient
   un débordement que le sweep détecte, pas un bouton silencieusement sur 2 lignes */
.head .btn{white-space:nowrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;flex-shrink:0}
.brand img{height:52px;width:auto}                    /* logo client : 48–64 px (logo-client §3) */
.brand-txt{font-family:var(--ff-head);font-weight:700;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;line-height:1;white-space:nowrap}
.brand-txt small{display:block;font-family:var(--ff-body);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-top:5px}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.8vw,26px);min-width:0}
.nav-list{display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);list-style:none;font-size:15px;font-weight:500}
.nav-list a,.nav-list button{
  font:inherit;color:inherit;background:none;border:0;padding:10px 2px;text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;min-height:40px;white-space:nowrap;
}
.nav-list a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--accent-2)}
.nav-list a[aria-current="page"]{color:var(--accent);font-weight:600}
.has-sub{position:relative}
.sub{
  position:absolute;top:100%;left:-14px;min-width:264px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow-2);padding:8px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition-property:opacity,transform,visibility;transition-duration:.16s;transition-timing-function:var(--ease);
}
.has-sub:hover .sub,.has-sub:focus-within .sub,.sub.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{display:block;padding:11px 14px;border-radius:var(--r);font-size:15px}
.sub a:hover{background:var(--bg-alt);text-decoration:none}
.head-tel{font-family:var(--ff-head);font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap}
.head-tel:hover{color:var(--accent)}
.burger{
  display:none;width:44px;height:44px;margin-left:auto;margin-right:0;flex-shrink:0;
  align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ── Hero (split asymétrique 60/40, photo débordante) ─────────── */
/* z-index : la photo déborde SUR la section suivante, elle ne doit pas être rognée */
.hero{position:relative;z-index:1;padding-top:clamp(36px,5vw,72px)}
/* le bloc sable porte toute la colonne de texte : aucun mot, aucun bouton à cheval sur son bord */
.hero::before{content:"";position:absolute;left:0;top:0;height:100%;width:min(55%,calc(50% + 180px));background:var(--bg-alt);z-index:0}
/* 1.34/1 laissait la photo à 40 % de la grille : sur un site d'artisan c'est
   l'image qui doit porter le hero, pas la colonne de texte. */
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.hero-txt{min-width:0}
.hero h1{font-size:var(--fs-display);margin:0 0 20px;max-width:17ch}
.hero h1 b{color:var(--accent);font-weight:700}
.hero .lead{max-width:54ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-note{margin-top:26px;padding-top:18px;border-top:2px solid var(--accent-2);max-width:48ch;font-size:14.5px;color:var(--ink-mute)}
.hero-fig{position:relative;margin:0 0 clamp(-80px,-6vw,-44px)}
.hero-fig img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);
  box-shadow:var(--shadow-2);outline:1px solid rgba(20,33,43,.07);outline-offset:-1px;
}
.hero-badge{
  position:absolute;left:0;bottom:28px;transform:translateX(-16px);
  background:var(--accent);color:#fff;font-family:var(--ff-head);font-weight:600;font-size:13.5px;
  padding:10px 16px;border-radius:2px;box-shadow:var(--shadow-1);max-width:min(78%,270px);line-height:1.35;
}

/* ── Index des prestations (remplace la grille de cartes) ─────── */
.idx{list-style:none;border-top:1px solid var(--line)}
.idx li{border-bottom:1px solid var(--line)}
.idx a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px clamp(20px,4vw,56px);align-items:center;
  padding:clamp(22px,2.7vw,34px) 0;text-decoration:none;
  transition-property:padding-left,background-color;transition-duration:.2s;transition-timing-function:var(--ease);
}
.idx a:hover{padding-left:14px;background:rgba(255,255,255,.6)}
.idx-t{font-family:var(--ff-head);font-weight:600;font-size:clamp(22px,2.8vw,36px);letter-spacing:-.022em;line-height:1.12}
.idx-t em{font-style:normal;color:var(--accent-2-ink)}
.idx-d{grid-column:1;font-size:15.5px;color:var(--ink-soft);max-width:64ch}
.idx-th{
  /* La photo est le sujet de la ligne, pas une vignette : à 176 px elle ne pesait
     rien et la section la plus haute de l'accueil se lisait comme un mur de texte
     (« ça manque d'image, je trouve un peu fade », Mourad). */
  grid-row:1/3;grid-column:2;width:clamp(160px,32vw,440px);aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  opacity:1;outline:1px solid rgba(20,33,43,.08);outline-offset:-1px;box-shadow:var(--shadow-1);
  transition-property:transform,box-shadow;transition-duration:.22s;transition-timing-function:var(--ease);
}
.idx a:hover .idx-th{transform:scale(1.02);box-shadow:var(--shadow-2)}

/* ── Bande d'impact sombre ────────────────────────────────────── */
.deep{background:var(--bg-deep);color:#EDF3F6}
.deep h2{color:#fff}
.deep .eyebrow{color:var(--accent-2)}
.deep .lead{color:#B6C6D0}
.deep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:rgba(255,255,255,.14);margin-top:clamp(28px,3.4vw,44px)}
.deep-cell{background:var(--bg-deep);padding:clamp(22px,2.6vw,32px) clamp(18px,2.2vw,28px)}
.deep-cell h3{font-size:17px;font-weight:600;letter-spacing:-.005em;color:#fff;margin-bottom:9px}
/* titres sur 1 ou 2 lignes : sans ça les paragraphes des 3 cellules ne s'alignent pas */
@media (min-width:901px){.deep-cell h3{min-height:2.2em}}
.deep-cell p{font-size:14.8px;color:#AEC0CB;line-height:1.6}
.deep-mark{margin-top:clamp(30px,4vw,52px);color:rgba(204,134,60,.75)}

/* ── Split photo dominante ────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:center}
.split--rev{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);outline:1px solid rgba(20,33,43,.07);outline-offset:-1px;box-shadow:var(--shadow-1)}
.split h2{font-size:var(--fs-h2);margin-bottom:18px}
.split p + p{margin-top:14px}

/* ── Listes de faits ──────────────────────────────────────────── */
.facts{list-style:none;margin-top:22px}
.facts li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--line-cool);font-size:15.5px;color:var(--ink-soft)}
.facts li::before{
  content:"";position:absolute;left:2px;top:19px;width:12px;height:2px;background:var(--accent-2);
}
.facts li b{color:var(--ink);font-weight:600}

/* ── Tableau de faits (pages service) ─────────────────────────── */
.tbl{width:100%;border-collapse:collapse;margin-top:12px;font-size:15.5px}
.tbl caption{text-align:left;font-family:var(--ff-head);font-weight:600;font-size:var(--fs-h3);margin-bottom:14px;color:var(--ink)}
.tbl th,.tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line-cool);vertical-align:top}
.tbl th{width:38%;font-weight:600;color:var(--ink);background:var(--bg-alt)}
.tbl td{color:var(--ink-soft)}

/* ── Schéma pédagogique (pages service) ───────────────────────── */
/* Sous 900 px le texte gravé dans le SVG tomberait à ~5 px : on le remplace
   par une légende HTML qui reste lisible, le dessin restant le motif signature. */

/* ── Bloc matière plein cadre (à propos) ──────────────────────── */
.matiere{position:relative;display:flex;align-items:flex-end;min-height:min(54vh,460px);
  background:var(--bg-deep);color:#fff;isolation:isolate;overflow:hidden}
.matiere > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.matiere::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(15,36,48,.30) 0%,rgba(15,36,48,.62) 52%,rgba(15,36,48,.90) 100%)}
.matiere-in{padding-block:clamp(32px,5vw,60px);max-width:62ch}
.matiere-in h2{color:#fff;font-size:var(--fs-h2);margin-bottom:16px;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.matiere-in p{color:#E4EDF2;text-shadow:0 1px 14px rgba(0,0,0,.55)}

/* ── Bande photo pleine largeur ───────────────────────────────────
   Respiration visuelle entre deux blocs de texte : l'image occupe toute
   la largeur de la fenêtre, avec une phrase courte posée dessus. */
.bleed{position:relative;isolation:isolate;min-height:min(80vh,680px);display:flex;align-items:flex-end;
  background:var(--bg-deep);color:#fff;overflow:hidden}
.bleed > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bleed::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(18,27,34,.14) 0%,rgba(18,27,34,.52) 55%,rgba(18,27,34,.88) 100%)}
.bleed-in{padding-block:clamp(30px,4.5vw,56px);max-width:58ch}
.bleed-in p{font-family:var(--ff-head);font-weight:600;font-size:clamp(20px,2.4vw,32px);line-height:1.24;
  letter-spacing:-.02em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.bleed-in span{display:block;margin-top:12px;font-size:15.5px;color:#D6E2EA;text-shadow:0 1px 12px rgba(0,0,0,.55)}

/* ── Duo photo : deux images côte à côte, sans texte entre elles ── */
.duo{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(12px,1.6vw,20px)}
.duo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);
  outline:1px solid rgba(20,33,43,.07);outline-offset:-1px;box-shadow:var(--shadow-1)}
.duo figure{margin:0;min-height:0}
.duo figure:first-child img{aspect-ratio:4/3}
.duo figure:last-child img{aspect-ratio:3/4}

/* ── Zone : la carte accompagnée d'une photo du pays ─────────────── */
.zone-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:stretch}
.zone-photo{margin:0;position:relative;border-radius:var(--r-card);overflow:hidden;min-height:260px}
.zone-photo img{width:100%;height:100%;object-fit:cover;display:block}
.zone-photo figcaption{position:absolute;left:0;bottom:0;right:0;padding:16px 20px;
  background:linear-gradient(0deg,rgba(18,27,34,.86),rgba(18,27,34,0));
  color:#fff;font-size:14.5px;text-shadow:0 1px 10px rgba(0,0,0,.5)}

/* ── « Ce sur quoi on nous appelle » : situations concrètes ───────
   Remplace la galerie de réalisations tant que le client n'a pas fourni
   ses photos : on décrit des situations réelles du métier sans jamais
   présenter un chantier qui ne serait pas le sien. */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--line-cool);
  border:1px solid var(--line-cool);border-radius:var(--r-card);overflow:hidden}
.case{background:#fff;padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:12px}
.case q{font-family:var(--ff-head);font-weight:600;font-size:17.5px;line-height:1.32;color:var(--ink);quotes:"«\00a0" "\00a0»"}
.case p{font-size:15.2px;line-height:1.6;color:var(--ink-soft)}
.case span{margin-top:auto;padding-top:12px;border-top:2px solid var(--accent-2);align-self:flex-start;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2-ink)}

/* ── Déroulé d'une intervention (aplats, ni numéros ni icônes) ──── */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line);
  border-radius:var(--r-card);overflow:hidden}
.flow div{background:var(--bg-alt);padding:clamp(20px,2.4vw,28px)}
.flow div:nth-child(even){background:#FBF3EE}
.flow b{display:block;font-family:var(--ff-head);font-size:16.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.flow p{font-size:14.8px;line-height:1.58;color:var(--ink-soft)}

/* ── Questions fréquentes ─────────────────────────────────────── */
.faq{border-top:1px solid var(--line-cool)}
.faq details{border-bottom:1px solid var(--line-cool)}
.faq summary{
  list-style:none;cursor:pointer;padding:clamp(17px,2vw,22px) 44px clamp(17px,2vw,22px) 0;position:relative;
  font-family:var(--ff-head);font-weight:600;font-size:clamp(16.5px,1.5vw,19px);line-height:1.36;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:10px;top:50%;width:13px;height:13px;margin-top:-7px;
  border-right:2px solid var(--accent-2);border-bottom:2px solid var(--accent-2);
  transform:rotate(45deg);transform-origin:center;
  transition-property:transform;transition-duration:.2s;transition-timing-function:var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq summary:hover{color:var(--accent)}
.faq .answer{padding:0 44px clamp(20px,2.2vw,26px) 0;max-width:76ch}
.faq .answer p{font-size:15.8px;line-height:1.66;color:var(--ink-soft)}
.faq .answer p + p{margin-top:11px}

/* ── Carte de zone (contact) ──────────────────────────────────── */
.zone{background:var(--bg-alt);border-radius:var(--r-card);padding:clamp(20px,2.6vw,32px)}
.zone svg{width:100%;height:auto;display:block}
/* La carte est générée par `.tools/zone-map.mjs` avec les couleurs écrites en dur :
   sans ce re-teintage elle reste sur l'ancienne palette dès que celle du logo change.
   Fait en CSS (jamais dans le SVG) pour que les attributs restent un repli valide,
   et ciblé sur les anciennes valeurs : une carte régénérée n'est plus concernée. */
.zone [fill="#0C4D74"]{fill:var(--accent)}
.zone [stroke="#0C4D74"]{stroke:var(--accent)}
.zone [fill="#CC863C"]{fill:var(--accent-2)}
.zone [stroke="#CC863C"]{stroke:var(--accent-2)}
.zone [fill="#3D4F5C"]{fill:var(--ink-soft)}
.zone [fill="#1A2731"]{fill:var(--ink)}
.zone-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.zone-list li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--ink-soft)}
/* doublon des noms de la carte : ne sert qu'en dessous de 900 px */
.zone-list.zone-names{display:none}
/* repères de repli de la carte : inutiles tant que les noms des communes sont lisibles */
.zone-mini{display:none}

/* ── Formulaire ───────────────────────────────────────────────── */
.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-family:var(--ff-head);font-weight:600;font-size:14.5px}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line-cool);border-radius:var(--r);
  padding:13px 14px;min-height:48px;width:100%;
  transition-property:border-color,box-shadow;transition-duration:.16s;transition-timing-function:var(--ease);
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(12,77,116,.14);outline:none}
.field small{color:var(--ink-mute);font-size:13px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── CTA de bas de page ───────────────────────────────────────── */
.cta-band{background:var(--accent);color:#fff}
.cta-band h2{color:#fff;font-size:var(--fs-h2);max-width:20ch}
.cta-band p{color:#D5E6F0;max-width:52ch;margin-top:14px}
.cta-band .btn--ghost{border-color:rgba(255,255,255,.75)}
.cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px 40px}
.cta-tel{font-family:var(--ff-head);font-weight:700;font-size:clamp(24px,3vw,38px);letter-spacing:-.02em;color:#fff;text-decoration:none}
.cta-tel:hover{text-decoration:underline;text-underline-offset:7px}

/* ── Footer ───────────────────────────────────────────────────── */
.foot{background:var(--bg-deep);color:#AEC0CB;padding-block:clamp(40px,5vw,68px) 28px}
.foot-mark{color:rgba(204,134,60,.7);margin-bottom:clamp(28px,3.4vw,44px)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(26px,3.4vw,52px)}
.foot h3{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot a{color:#C6D5DE;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.foot ul{list-style:none;display:grid;gap:10px;font-size:15px}
.foot-brand{font-family:var(--ff-head);font-weight:700;font-size:22px;color:#fff;letter-spacing:-.02em}
.foot-logo{max-width:300px;margin-bottom:18px}       /* logo client EN GRAND (logo-client §3) */
.foot-note{font-size:14.5px;line-height:1.66;margin-top:14px;max-width:46ch}
.foot-bot{margin-top:clamp(30px,3.6vw,48px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:14px}

/* ── Fil d'ariane ─────────────────────────────────────────────── */
.crumb{font-size:14px;color:var(--ink-mute);padding-top:22px}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:4px}

/* ── Page service : en-tête ───────────────────────────────────── */
.phead{padding-block:clamp(26px,3.4vw,48px) clamp(38px,5vw,72px);background:var(--bg-alt)}
.phead-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:center}
.phead h1{font-size:clamp(30px,4vw,54px);margin-bottom:18px;max-width:18ch}
.phead img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow-2);outline:1px solid rgba(20,33,43,.07);outline-offset:-1px}
.phead .lead{max-width:56ch}

/* ── Cross-sell ───────────────────────────────────────────────── */
.cross{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.cross a{
  display:block;padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);border-radius:var(--r-card);
  text-decoration:none;background:#fff;
  transition-property:transform,border-color,box-shadow;transition-duration:.18s;transition-timing-function:var(--ease);
}
.cross a:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-1)}
.cross b{display:block;font-family:var(--ff-head);font-size:var(--fs-h3);margin-bottom:8px}
.cross span{font-size:15px;color:var(--ink-soft)}

/* ── Révélation du hero (une seule fois) ──────────────────────── */
[data-reveal]{opacity:0;transform:translateY(12px);
  transition-property:opacity,transform;transition-duration:.28s;transition-timing-function:var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="2"]{transition-delay:.07s}
[data-reveal="3"]{transition-delay:.14s}
[data-reveal="4"]{transition-delay:.21s}

/* ── Prose (mentions légales) ─────────────────────────────────── */
.prose{max-width:74ch}
.prose h2{font-size:clamp(21px,2.2vw,28px);margin:clamp(30px,3.4vw,44px) 0 12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-soft);font-size:16px}
.prose p + p,.prose ul + p{margin-top:12px}
.prose ul{list-style:disc;padding-left:22px;display:grid;gap:8px;margin-top:12px}
.prose a{color:var(--accent)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-col--brand{grid-column:1/-1}
}
/* Nav → burger. Le seuil est celui du HEADER, pas celui de la mise en page :
   depuis l'arrivée du logo (228 px de large), les 6 éléments de la barre ne
   tiennent plus sous 1015 px et le bouton « Demander un devis » passait sur
   deux lignes entre 910 et 1010 px — bande jamais couverte par 768/1024. */
@media (max-width:1023px){
  .nav{
    position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-2);padding:10px var(--gutter) 20px;margin:0;
    display:none;flex-direction:column;align-items:stretch;gap:0;
  }
  .nav.is-open{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav-list > li{border-bottom:1px solid var(--line-cool)}
  .nav-list a,.nav-list button{padding:15px 2px;width:100%;justify-content:space-between;min-height:52px}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    padding:0 0 10px 14px;min-width:0;background:transparent;display:none}
  .sub.is-open{display:block}
  /* le numéro reste joignable dans le panneau : c'est l'action n°1 sur mobile */
  .head-tel{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    min-height:52px;font-size:18px;border-bottom:1px solid var(--line-cool);color:var(--accent);
  }
  .nav .btn{width:100%;margin-top:16px}
  .burger{display:inline-flex}
  .head-in{gap:12px}   /* le panneau se positionne sur .head (sticky = bloc conteneur) */
}
@media (max-width:900px){
  .phead-grid,.split,.split--rev{grid-template-columns:1fr}
  .split--rev .split-fig{order:-1}
  .hero-grid{grid-template-columns:1fr}
  /* mobile : le sable devient une bande pleine largeur DERRIÈRE le texte,
     plus de bord vertical qui coupe le H1 en deux */
  .hero{padding-top:0}
  .hero::before{display:none}
  .hero-txt{
    background:var(--bg-alt);margin-inline:calc(-1 * var(--gutter));
    padding:clamp(26px,6vw,40px) var(--gutter) clamp(26px,6vw,38px);
  }
  .hero-fig{margin-bottom:0}
  .hero-fig img{aspect-ratio:4/3}
  .hero-badge{transform:translateX(0);left:14px}
  .cross{grid-template-columns:1fr}
  /* Schémas et carte : les étiquettes gravées dans le SVG deviennent illisibles
     à cette largeur — on bascule sur la légende HTML. */
  .zone-labels{display:none}
  .zone-list.zone-names{display:flex}
  /* La carte réduite à ~300 px : sans ces repères ni des points épaissis,
     il ne reste qu'un disque gris sans signification. */
  .zone-mini{display:block}
  .zone-dots circle{stroke:var(--accent);stroke-width:8}
  .zone-hub circle:first-child{stroke:var(--accent-2);stroke-width:8}
  .zone-hub circle:last-child{stroke-width:4;opacity:.75}
}
@media (max-width:900px){
  .zone-grid{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .duo figure:last-child img{aspect-ratio:4/3}
  .bleed{min-height:min(46vh,360px)}
}
@media (max-width:640px){
  .idx a{grid-template-columns:1fr;gap:12px}
  .idx-th{grid-row:auto;grid-column:1;width:100%;aspect-ratio:16/9}
  .form-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .cta-in{flex-direction:column;align-items:flex-start}
  .tbl th{width:auto}
  .tbl th,.tbl td{display:block;padding:10px 0}
  .tbl th{background:transparent;border-bottom:0;padding-bottom:2px}
}
@media (max-width:380px){
  .brand-txt{font-size:17px}
  .brand img{height:44px}
}

/* ── Accessibilité : mouvement réduit ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .btn:hover,.idx a:hover,.cross a:hover{transform:none}
  .idx a:hover{padding-left:0}
  [data-reveal]{opacity:1;transform:none}
}