/* ═══════════════════════════════════════════════════════════════════════════════
   GROUPE MÉCANIQUE VALLIÈRES — feuille de style de production
   Identité « Acier Franc ». Aucune dépendance sauf Google Fonts.

   ┌─ JETONS DE DESIGN (design tokens) ─────────────────────────────────────────┐
   │ COULEURS                                                                    │
   │  Noirs/gris   --gmv-noir-950 #131416  fond de page dominant                 │
   │               --gmv-noir-900 #1f1f1f  fond du logo, cartes                  │
   │               --gmv-noir-800 #2a2b2e  surface surélevée                     │
   │               --gmv-anthracite #3e3e40 contours épais façon logo            │
   │  Bleus        --gmv-bleu-100 #d7e8f4 → --gmv-bleu-700 #1b76b4               │
   │               ciel #93c5ea · écusson #8bc3da · acier #64a8c7                │
   │               électrique #2496db = accent d'action (CTA, halo)              │
   │  Accent       --gmv-jaune #f7b500  chantier / urgence, à petite dose        │
   │  Chrome       --gmv-grad-chrome  dégradé métal du wordmark                  │
   │                                                                             │
   │ TYPOGRAPHIE                                                                 │
   │  --font-display  Michroma          wordmark seulement, tracking .10em       │
   │  --font-headline Barlow Condensed  titres MAJUSCULES 700-800                │
   │  --font-body     Barlow            corps de texte                           │
   │  --font-brush    Permanent Marker  UN accent émotionnel par section max     │
   │  Échelle : --text-xs 12 → --text-5xl 64, titres fluides en clamp()          │
   │                                                                             │
   │ ESPACEMENT / FORMES                                                         │
   │  --space-1 4px … --space-10 96px · --sp-sect rythme vertical des sections   │
   │  --radius-sm 4 / md 8 / lg 14 / pill 999  (le logo est anguleux)            │
   │  --angle-slash -14deg   OBLIQUE SIGNATURE : badges, coins de cartes, puces  │
   │  --seam-angle -2.4deg   même geste à l'échelle de la page (coutures)        │
   │                                                                             │
   │ EFFETS                                                                      │
   │  --shadow-1/2/3 ombres noires profondes · --glow-bleu halo des CTA          │
   │  --overlay-photo protection du texte sur photo                              │
   │  --ease-standard cubic-bezier(.2,.7,.3,1) · --dur-fast 120ms /normal 200ms  │
   └─────────────────────────────────────────────────────────────────────────────┘
   Sommaire : 1 Reset · 2 Jetons · 3 Base · 4 Utilitaires · 5 En-tête · 6 Hero
   7 Coutures · 8 Coût de l'arrêt · 9 Calculateur · 10 Services · 11 Atelier
   12 Zone · 13 Preuves · 14 Outils · 15 Contact · 16 Pied · 17 Barre d'appel
   18 Responsive · 19 Mouvement réduit
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. RESET ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset,legend{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,picture{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
fieldset{border:0}
a{color:inherit;text-decoration:none}

/* ── 2. JETONS ─────────────────────────────────────────────────────────────── */
:root{
  /* Noirs & gris */
  --gmv-blanc:#ffffff;
  --gmv-gris-100:#f2f4f6; --gmv-gris-300:#c9d1d7; --gmv-gris-500:#97a1a9; --gmv-gris-600:#6e7880;
  --gmv-anthracite:#3e3e40; --gmv-noir-800:#2a2b2e; --gmv-noir-900:#1f1f1f; --gmv-noir-950:#131416;
  /* Bleus */
  --gmv-bleu-100:#d7e8f4; --gmv-bleu-200:#a9cbe2; --gmv-bleu-300:#93c5ea;
  --gmv-bleu-400:#8bc3da; --gmv-bleu-500:#64a8c7; --gmv-bleu-600:#2496db; --gmv-bleu-700:#1b76b4;
  /* Accent chantier + chrome */
  --gmv-jaune:#f7b500;
  --gmv-grad-chrome:linear-gradient(180deg,#fbfdff 0%,#e8edf1 38%,#aeb9c2 50%,#e3eaef 62%,#8e99a2 100%);
  /* Surfaces & texte */
  --surface-page:var(--gmv-noir-950);
  --surface-plate:#17181b;        /* plaque d'acier alternée */
  --surface-deep:#0f1012;         /* panneau creusé (calculateur) */
  --surface-card:#1b1c1f;
  --surface-raised:var(--gmv-noir-800);
  --text-strong:#ffffff; --text-body:#d5dbe0; --text-muted:#9aa4ac;
  /* --text-faint : plus petit texte encore conforme AA sur charbon (≈6,5:1).
     --gmv-gris-600 #6e7880 tombe à ≈3,8:1 : réservé aux bordures et placeholders. */
  --text-faint:var(--gmv-gris-500);
  --text-accent:var(--gmv-bleu-300);
  /* Accents & états */
  --accent:var(--gmv-bleu-600); --accent-hover:#3ba5e6; --accent-active:var(--gmv-bleu-700);
  --accent-soft:rgba(36,150,219,.16);
  --warning:var(--gmv-jaune); --danger:#ff6b6f; --success:#5ec26f;
  /* Bordures & focus */
  --border-subtle:rgba(255,255,255,.11);
  --border-mid:rgba(255,255,255,.2);
  --border-strong:var(--gmv-anthracite);
  --focus-ring:0 0 0 2px var(--gmv-noir-950),0 0 0 4px var(--gmv-bleu-600);
  /* Typographie */
  --font-display:'Michroma',Impact,sans-serif;
  --font-headline:'Barlow Condensed','Arial Narrow',sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-brush:'Permanent Marker',cursive;
  --text-xs:12px; --text-sm:14px; --text-md:16px; --text-lg:18px; --text-xl:22px;
  --text-2xl:28px; --text-3xl:36px; --text-4xl:48px; --text-5xl:64px;
  --leading-tight:1.05; --leading-snug:1.2; --leading-normal:1.6;
  --tracking-display:.10em; --tracking-headline:.015em; --tracking-caps:.14em;
  /* Espacement & formes */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:40px; --space-8:56px; --space-9:72px; --space-10:96px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px;
  --angle-slash:-14deg; --seam-angle:-2.4deg;
  --sp-sect:clamp(60px,7.6vw,116px);
  --wrap:1240px; --gut:clamp(20px,4vw,40px);
  /* Effets */
  --shadow-1:0 1px 3px rgba(0,0,0,.5);
  --shadow-2:0 6px 18px rgba(0,0,0,.45);
  --shadow-3:0 18px 44px rgba(0,0,0,.6);
  --glow-bleu:0 0 24px rgba(36,150,219,.38);
  --overlay-photo:linear-gradient(180deg,rgba(19,20,22,.2) 0%,rgba(19,20,22,.85) 100%);
  --ease-standard:cubic-bezier(.2,.7,.3,1);
  --dur-fast:120ms; --dur-normal:200ms;
  /* Texture acier brossé, très discrète */
  --steel:repeating-linear-gradient(102deg,rgba(255,255,255,.016) 0 1px,transparent 1px 4px);
  color-scheme:dark;
}

/* ── 3. BASE ───────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-body);font-size:var(--text-md);line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff}

:focus-visible{outline:0;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.skip{
  position:fixed;top:-100px;left:var(--gut);z-index:200;
  padding:12px 18px;background:var(--accent);color:#fff;font-weight:700;
  border-radius:0 0 var(--radius-md) var(--radius-md);transition:top var(--dur-normal) var(--ease-standard);
}
.skip:focus{top:0}

/* Empêche l'animation d'entrée si JS est absent */
html:not(.js) .js-reveal{opacity:1!important;transform:none!important}

/* ── 4. UTILITAIRES ────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* Surtitre + oblique signature -14° */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-headline);text-transform:uppercase;
  font-weight:700;font-size:var(--text-sm);letter-spacing:var(--tracking-caps);
  color:var(--text-accent);margin-bottom:var(--space-4);
}
.eyebrow__slash{
  flex:none;width:16px;height:20px;background:var(--accent);
  transform:skewX(var(--angle-slash));box-shadow:var(--glow-bleu);
}
.shead--c .eyebrow{justify-content:center}

/* Titres */
.h2{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:800;
  font-size:clamp(30px,4.2vw,52px);line-height:1.04;letter-spacing:var(--tracking-headline);
  color:var(--text-strong);text-wrap:balance;
}
.h2 .hl{font-style:normal;color:var(--gmv-bleu-300)}
.brush{
  font-family:var(--font-brush);font-style:normal;font-weight:400;
  color:var(--gmv-bleu-400);text-transform:none;letter-spacing:0;
  display:inline-block;transform:rotate(-2.2deg);
  text-shadow:0 3px 0 rgba(0,0,0,.55);
}
.brush--sm{font-size:.92em}

.shead{max-width:56ch;margin-bottom:clamp(36px,4.4vw,64px)}
.shead--c{margin-inline:auto;text-align:center}
.shead__lede{margin-top:var(--space-5);color:var(--text-muted);font-size:clamp(16px,1.35vw,19px);max-width:56ch}
.shead--c .shead__lede{margin-inline:auto}

/* Boutons */
.btn{
  --btn-bg:var(--accent);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-lg);letter-spacing:.05em;line-height:1.1;
  border:2px solid transparent;border-radius:var(--radius-sm);
  transition:background var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-normal) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
  will-change:transform;
}
.btn--sm{padding:9px 16px;font-size:var(--text-md)}
.btn--lg{padding:16px 30px;font-size:clamp(17px,1.5vw,21px)}
/* Fond des boutons pleins : --gmv-bleu-700 #1b76b4 → blanc à ≈4,5:1 (AA).
   Le bleu électrique #2496db reste l'état de survol et porte le halo. */
.btn--primary{--btn-bg:var(--gmv-bleu-700);box-shadow:0 2px 0 rgba(0,0,0,.5),var(--glow-bleu)}
/* Le survol éclaircit juste assez pour rester au-dessus de 4,5:1 : c'est le halo
   et le décalage qui portent l'interaction, pas un fond plus pâle. */
.btn--primary:hover{background:#1f86c6;box-shadow:0 2px 0 rgba(0,0,0,.5),0 0 34px rgba(36,150,219,.7);transform:translateY(-1px)}
.btn--primary:active{background:#166293;transform:translateY(0) scale(.985)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text-strong);border-color:var(--border-strong);background:rgba(255,255,255,.03)}
.btn--ghost:hover{border-color:var(--gmv-bleu-500);color:var(--gmv-bleu-200);background:rgba(36,150,219,.09)}
.btn--ghost:active{transform:scale(.985)}
.btn__k{color:rgba(255,255,255,.75);font-weight:600}
/* Un numéro de téléphone ne se coupe jamais en deux lignes */
.btn .tel-text,.hdr__tel .tel-text,.bigtel .tel-text,.urgent__t .tel-text{white-space:nowrap}
.calc__act .btn{flex:1 1 250px}

/* inline-block est nécessaire : le reset met svg{display:block}, ce qui forçait
   les flèches à passer seules à la ligne quand elles suivent du texte inline
   (le cas du micro-lien du hero). En conteneur flex, aucun effet de bord. */
.ico{display:inline-block;vertical-align:-.14em;width:1.15em;height:1.15em;flex:none;fill:currentColor}
/* Groupe insécable : sert à garder une flèche collée à son dernier mot, ou un
   numéro de téléphone entier. Sans cette règle, les class="nowrap" du HTML
   n'auraient aucun effet — c'est arrivé, d'où le commentaire. */
.nowrap{white-space:nowrap}
.ico--r{width:1em;height:1em}

/* Lien fléché */
.lnk{
  display:inline-flex;align-items:center;gap:9px;margin-top:var(--space-5);
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-md);letter-spacing:.08em;color:var(--gmv-bleu-300);
  padding-bottom:3px;border-bottom:2px solid rgba(36,150,219,.35);
  transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
.lnk .ico{transition:transform var(--dur-normal) var(--ease-standard)}
.lnk:hover{color:#fff;border-color:var(--accent)}
.lnk:hover .ico{transform:translateX(5px)}

/* Listes à coches */
.ticks{display:grid;gap:11px;margin-top:var(--space-5)}
.ticks li{position:relative;padding-left:30px;color:var(--text-body)}
.ticks li::before{
  content:'';position:absolute;left:0;top:.55em;width:13px;height:7px;
  border-left:2.5px solid var(--gmv-bleu-400);border-bottom:2.5px solid var(--gmv-bleu-400);
  transform:rotate(-45deg);
}
.ticks--sm li{font-size:var(--text-sm);color:var(--text-muted)}

/* Sections */
.sect{position:relative;padding:var(--sp-sect) 0;background:var(--surface-page)}
.sect--calc{background:var(--surface-deep)}
.sect--rig,.sect--preuves,.sect--contact{background:var(--surface-plate)}
.sect::after{content:'';position:absolute;inset:0;background:var(--steel);pointer-events:none}
.sect>.wrap{position:relative;z-index:1}

/* ── 5. EN-TÊTE ────────────────────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(15,16,18,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle);
  transition:background var(--dur-normal) var(--ease-standard),box-shadow var(--dur-normal) var(--ease-standard);
}
.hdr.is-stuck{background:rgba(15,16,18,.96);box-shadow:0 8px 26px rgba(0,0,0,.5)}
.hdr__in{
  max-width:var(--wrap);margin-inline:auto;padding:10px var(--gut);
  display:flex;align-items:center;gap:var(--space-5);
}
.brand{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0;padding:4px}
/* Le logo officiel (écusson + clé + engrenages) est plus large que haut : ratio 1,41 */
.brand__mark{width:54px;height:auto;transition:transform var(--dur-normal) var(--ease-standard)}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.05)}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--font-display);font-size:15px;letter-spacing:var(--tracking-display);
  text-transform:uppercase;
  background:var(--gmv-grad-chrome);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gmv-gris-100);
}
.brand__sub{
  margin-top:5px;font-family:var(--font-headline);text-transform:uppercase;
  font-size:11px;letter-spacing:.14em;color:var(--gmv-bleu-400);font-weight:600;
}

.nav{display:flex;gap:2px;margin-left:auto}
.nav a{
  position:relative;padding:9px 13px;white-space:nowrap;
  font-family:var(--font-headline);text-transform:uppercase;font-weight:600;
  font-size:var(--text-md);letter-spacing:.06em;color:var(--gmv-gris-300);
  transition:color var(--dur-fast) var(--ease-standard);
}
.nav a::after{
  content:'';position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-normal) var(--ease-standard);
}
.nav a:hover,.nav a.is-active{color:#fff}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}

.hdr__cta{display:flex;align-items:center;gap:12px;flex:none}
.hdr__tel{
  display:flex;align-items:center;gap:8px;padding:7px 4px;
  font-family:var(--font-headline);font-weight:700;font-size:var(--text-xl);
  letter-spacing:.02em;color:#fff;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-standard);
}
.hdr__tel .ico{color:var(--gmv-bleu-400)}
.hdr__tel:hover{color:var(--gmv-bleu-200)}

.burger{display:none;flex-direction:column;gap:5px;padding:10px;border-radius:var(--radius-sm)}
.burger span{display:block;width:24px;height:2px;background:#fff;transition:transform var(--dur-normal) var(--ease-standard),opacity var(--dur-fast)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── 6. HERO ───────────────────────────────────────────────────────────────── */
.hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:clamp(560px,88svh,860px);overflow:hidden;
  background:var(--gmv-noir-950);
}
.hero__media{position:absolute;inset:0}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:62% 56%;
  filter:brightness(.98) saturate(.72) contrast(1.16);
}
/* Voile : opaque à gauche pour le texte, poche de lumière froide sur le rig à droite */
.hero__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(52% 58% at 74% 54%,rgba(139,195,218,.2) 0%,transparent 72%),
    linear-gradient(96deg,rgba(13,14,16,.96) 0%,rgba(13,14,16,.92) 32%,rgba(13,14,16,.66) 50%,rgba(13,14,16,.26) 68%,rgba(13,14,16,.04) 100%),
    linear-gradient(180deg,rgba(13,14,16,.74) 0%,transparent 32%,rgba(13,14,16,.9) 100%);
}
.hero__gear{
  position:absolute;right:-8vw;bottom:-10vw;width:min(42vw,470px);height:auto;
  opacity:.07;filter:brightness(1.5);
  animation:tourne 90s linear infinite;
}
@keyframes tourne{to{transform:rotate(360deg)}}
.hero__in{position:relative;padding-top:clamp(96px,14vw,150px);padding-bottom:clamp(40px,5vw,72px)}

.hero__h1{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:800;
  font-size:clamp(38px,7vw,86px);line-height:.98;letter-spacing:-.005em;
  color:#fff;max-width:21ch;
}
.hero__h1>span{display:block}
.hero__h1 .brush{font-size:.92em;margin-left:.06em}

.triade{
  display:flex;align-items:center;gap:14px;margin-top:var(--space-5);
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:clamp(15px,1.7vw,22px);letter-spacing:.16em;color:#fff;
}
.triade b{color:var(--gmv-bleu-400)}
.triade__rule{flex:none;width:clamp(28px,4vw,52px);height:3px;background:var(--gmv-bleu-500);box-shadow:var(--glow-bleu)}

.hero__lede{
  margin-top:var(--space-5);max-width:56ch;
  font-size:clamp(16px,1.5vw,20px);color:#c3cbd2;
}
/* Micro-lien qui répond tout de suite à l'objection de capacité */
.hero__note{margin-top:var(--space-3)}
/* Cible tactile ≥ 24 px sans changer le rendu : padding compensé par la marge */
.hero__note a{padding-block:8px;margin-block:-8px}
.hero__note a{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:44px;
  font-size:var(--text-sm);color:var(--gmv-bleu-300);
  padding-bottom:2px;border-bottom:1px solid rgba(147,197,234,.4);
  transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast);
}
.hero__note a:hover{color:#fff;border-color:var(--gmv-bleu-300)}
.hero__note .ico{transition:transform var(--dur-normal) var(--ease-standard)}
.hero__note a:hover .ico{transform:translateX(4px)}
.hero__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--space-6)}

/* Bande de preuve : 4 chiffres, séparateurs obliques */
.proof{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--border-subtle);
}
.proof li{
  position:relative;padding:var(--space-5) var(--space-4) 0 0;
}
.proof li+li{padding-left:var(--space-5)}
.proof li+li::before{
  content:'';position:absolute;left:0;top:var(--space-5);bottom:2px;width:2px;
  background:var(--border-subtle);transform:skewX(var(--angle-slash));
}
.proof b{
  display:block;font-family:var(--font-headline);font-weight:800;
  font-size:clamp(26px,3.4vw,42px);line-height:1;color:var(--gmv-bleu-300);
}
.proof span{display:block;margin-top:7px;font-size:var(--text-sm);color:var(--text-muted);line-height:1.35}

/* Séquence d'entrée orchestrée */
html.js .js-reveal{opacity:0;transform:translateY(16px)}
html.js .js-reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .62s var(--ease-standard),transform .62s var(--ease-standard);
}
.js-reveal[data-r="1"]{transition-delay:.05s}
.js-reveal[data-r="2"]{transition-delay:.16s}
.js-reveal[data-r="3"]{transition-delay:.30s}
.js-reveal[data-r="4"]{transition-delay:.46s}
.js-reveal[data-r="5"]{transition-delay:.58s}
.js-reveal[data-r="6"]{transition-delay:.70s}
.js-reveal[data-r="7"]{transition-delay:.82s}

/* ── 7. COUTURES OBLIQUES (plaques d'acier soudées) ────────────────────────── */
.seam{
  --from:var(--surface-page);--to:var(--surface-page);
  position:relative;height:clamp(34px,4.4vw,68px);
  background:var(--from);overflow:hidden;
}
.seam::after{
  content:'';position:absolute;left:-4%;right:-4%;top:36%;height:320%;
  background:var(--to);border-top:2px solid rgba(36,150,219,.5);
  transform:skewY(var(--seam-angle));
}
.sect--calc+.seam{--from:var(--surface-deep);--to:var(--surface-page)}
.sect--rig+.seam{--from:var(--surface-plate);--to:var(--surface-page)}
.sect--preuves+.seam{--from:var(--surface-plate);--to:var(--surface-page)}
.sect--outils+.seam{--from:var(--surface-page);--to:var(--surface-plate)}
.sect--contact+.seam{--from:var(--surface-plate);--to:#0d0e10}

/* ── 8. LE COÛT DE L'ARRÊT ─────────────────────────────────────────────────── */
/* ── La séquence du bris : pas de cartes, des chiffres d'étape énormes en chrome,
   séparés par les filets obliques de la marque. C'est la seule section de la page
   qui n'utilise pas de surface encadrée — elle doit se lire comme un décompte. ── */
.sect--cout{padding-top:clamp(44px,5.4vw,84px);overflow:hidden}
.sect--cout .shead{max-width:64ch;margin-bottom:clamp(30px,3.6vw,52px)}
/* Engrenage filigrane : ancre le quadrant supérieur droit, sinon vide, de la section */
.sect--cout::before{
  content:'';position:absolute;right:-100px;top:-40px;width:380px;height:380px;
  background:url('../assets/img/gear-gris.webp') center/contain no-repeat;
  opacity:.05;transform:rotate(14deg);pointer-events:none;
}
.chain{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.chain__i{
  position:relative;padding:var(--space-2) clamp(20px,2.2vw,30px) var(--space-5) 0;
}
.chain__i+.chain__i{padding-left:clamp(24px,2.8vw,44px)}
.chain__i+.chain__i::before{
  content:'';position:absolute;left:0;top:6px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--gmv-anthracite),transparent);
  transform:skewX(var(--angle-slash));
}
.chain__n{
  display:block;font-family:var(--font-headline);font-weight:800;
  font-size:clamp(72px,8.4vw,124px);line-height:.8;letter-spacing:-.03em;
  background:var(--gmv-grad-chrome);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gmv-gris-300);
  transform:skewX(var(--angle-slash));transform-origin:bottom left;
  margin-bottom:var(--space-5);
}
.chain__i h3{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:clamp(20px,2vw,27px);line-height:1.1;color:#fff;
  letter-spacing:.01em;margin-bottom:var(--space-3);max-width:20ch;
}
.chain__i p{color:var(--text-muted);font-size:var(--text-md);max-width:34ch}
/* Le coût de l'étape, en jaune chantier : c'est le total qui s'additionne */
.chain__t{
  margin-top:var(--space-4);padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);
  font-size:var(--text-sm);color:var(--text-faint)!important;
}
.chain__t b{
  font-family:var(--font-headline);font-weight:800;font-size:var(--text-xl);
  color:var(--gmv-jaune);letter-spacing:.01em;
}

/* Passerelle vers le calculateur : un vrai lien, pas une ligne orpheline */
.chain__out{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;margin-top:clamp(24px,2.6vw,36px);padding:20px 26px 20px 22px;
  background:rgba(247,181,0,.07);border:1px solid rgba(247,181,0,.32);
  border-radius:var(--radius-sm);
  transition:background var(--dur-normal) var(--ease-standard),
             border-color var(--dur-normal) var(--ease-standard);
}
.chain__out:hover{background:rgba(247,181,0,.14);border-color:rgba(247,181,0,.6)}
.chain__out-t{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:800;
  font-size:clamp(18px,2vw,26px);letter-spacing:.03em;color:#fff;
}
.chain__arrow{
  flex:none;width:34px;height:4px;background:var(--gmv-jaune);
  transform:skewX(var(--angle-slash));box-shadow:0 0 18px rgba(247,181,0,.45);
}
.chain__dn{
  flex:none;width:26px;height:26px;fill:var(--gmv-jaune);
  transition:transform var(--dur-normal) var(--ease-standard);
}
.chain__out:hover .chain__dn{transform:translateY(4px)}

/* ── 9. CALCULATEUR (élément signature) ────────────────────────────────────── */
.sect--calc{overflow:hidden}
.sect--calc::before{
  content:'';position:absolute;left:-6vw;top:8%;width:min(40vw,440px);aspect-ratio:1;
  background:url('../assets/img/gear-noir.webp') center/contain no-repeat;
  opacity:.07;filter:brightness(2.4);pointer-events:none;
}
.calc{
  display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,1.15fr);
  gap:clamp(24px,3vw,44px);align-items:start;
}
.calc__ctl{
  display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,34px);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-top:3px solid var(--gmv-anthracite);border-radius:var(--radius-md);
  box-shadow:var(--shadow-2);
}
/* Bandeau collant du résultat : visible seulement quand le cadran est hors écran
   (mise en page empilée, sous 1024 px). Masqué sur grand écran, où tout est côte à côte. */
.calc__mini{display:none}
@media (max-width:1024px){
  .calc__mini{
    display:flex;align-items:center;gap:12px;
    position:sticky;bottom:12px;z-index:5;
    margin:var(--space-5) calc(-1*clamp(10px,1.4vw,16px)) 0;
    padding:12px 16px;
    background:rgba(20,22,26,.96);backdrop-filter:blur(8px);
    border:1px solid rgba(36,150,219,.45);border-left:3px solid var(--accent);
    border-radius:var(--radius-sm);box-shadow:var(--shadow-3);
  }
  .calc__mini-k{
    font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
    font-size:13px;letter-spacing:var(--tracking-caps);color:var(--gmv-bleu-300);
  }
  .calc__mini b{
    font-family:var(--font-headline);font-weight:800;font-size:26px;line-height:1;
    color:#fff;font-variant-numeric:tabular-nums;margin-right:auto;
  }
  .calc__mini-a{
    flex:none;display:inline-flex;align-items:center;min-height:44px;padding:12px 16px;
    font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
    font-size:13px;letter-spacing:.07em;color:var(--gmv-bleu-300);
    border:1px solid rgba(36,150,219,.5);border-radius:var(--radius-sm);
  }
  .calc__mini-a:hover{color:#fff;background:rgba(36,150,219,.16)}
}
@media (max-width:760px){
  /* laisse la place à la barre d'appel collée en bas */
  .calc__mini{bottom:70px}
}

/* Hypothèses du modèle : affichées, pas enfouies dans une note de bas de page */
.calc__hypo{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--border-subtle)}
.calc__hypo-k{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:13px;letter-spacing:var(--tracking-caps);color:var(--text-faint);
  margin-bottom:var(--space-3);
}
.calc__hypo ul{display:grid;gap:7px}
.calc__hypo li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--text-sm)}
.calc__hypo span{color:var(--text-muted)}
.calc__hypo b{color:var(--gmv-bleu-300);font-weight:600;text-align:right}
.calc__legend{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-sm);letter-spacing:var(--tracking-caps);color:var(--text-muted);
  margin-bottom:var(--space-6);
}

.field{margin-bottom:var(--space-6);display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 12px}
.field>label{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-md);letter-spacing:.05em;color:#fff;
}
.field__hint{text-transform:none;font-family:var(--font-body);font-weight:400;font-size:var(--text-sm);color:var(--text-muted);letter-spacing:0}
.field__val{
  font-family:var(--font-headline);font-weight:800;font-size:var(--text-xl);
  color:var(--gmv-bleu-300);text-align:right;font-variant-numeric:tabular-nums;
  min-width:4.5ch;
  cursor:text;border-bottom:1px dashed rgba(147,197,234,.45);
}
.field__val:focus-visible{outline:0;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
/* Champ de saisie précise (module « saisie-precise ») : remplace la valeur au tap */
.field__edit{
  width:6ch;background:var(--gmv-noir-950);color:var(--gmv-bleu-200);
  border:1px solid var(--gmv-bleu-500);border-radius:var(--radius-sm);
  font:inherit;text-align:right;padding:0 4px;
}
.field__edit:focus{outline:0;box-shadow:0 0 0 3px var(--accent-soft)}
.field input[type=range]{grid-column:1/-1;width:100%;margin:6px 0 0}
/* Le curseur « notre délai » est du côté GMV : on le marque pour qu'on voie
   tout de suite que la comparaison inclut notre propre contrainte. */
.field--gmv{
  padding:var(--space-4) var(--space-5) var(--space-3);
  margin-inline:calc(-1*var(--space-4));
  background:rgba(36,150,219,.06);border-left:3px solid var(--gmv-bleu-500);
}
.field--gmv>label{color:var(--gmv-bleu-200)}
.field__scale{
  grid-column:1/-1;display:flex;justify-content:space-between;
  font-size:13px;color:var(--text-faint);letter-spacing:.05em;
}

/* Curseurs — zone tactile de 44 px de haut : ces réglages se font souvent
   dehors, avec des gants. La piste reste fine, c'est la cible qui grossit. */
input[type=range]{
  -webkit-appearance:none;appearance:none;height:44px;background:transparent;cursor:pointer;
  touch-action:manipulation;
}
input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--gmv-bleu-600) var(--pct,50%),rgba(255,255,255,.45) var(--pct,50%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;
  background:#fff;border:4px solid var(--accent);border-radius:50%;
  box-shadow:0 2px 10px rgba(0,0,0,.65),var(--glow-bleu);
  transition:transform var(--dur-fast) var(--ease-standard),border-color var(--dur-fast);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.04);background:var(--gmv-bleu-100);border-color:var(--gmv-bleu-300)}
input[type=range]::-moz-range-track{height:8px;border-radius:var(--radius-pill);background:rgba(255,255,255,.45)}
input[type=range]::-moz-range-progress{height:8px;border-radius:var(--radius-pill);background:var(--gmv-bleu-600)}
input[type=range]::-moz-range-thumb{
  width:26px;height:26px;background:#fff;border:4px solid var(--accent);border-radius:50%;
  box-shadow:0 2px 10px rgba(0,0,0,.65);
}
input[type=range]:focus-visible{box-shadow:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus-ring)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--focus-ring)}

/* Interrupteur — toute la ligne (interrupteur + libellé) fait 44 px de haut */
.switch{display:flex;align-items:center;gap:14px;cursor:pointer;min-height:44px;padding:6px 0;margin-top:calc(-1*var(--space-2))}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch__box{
  flex:none;position:relative;width:56px;height:30px;border-radius:var(--radius-pill);
  background:var(--gmv-noir-800);border:1px solid var(--border-mid);
  transition:background var(--dur-normal) var(--ease-standard),border-color var(--dur-normal);
}
.switch__box::after{
  content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--gmv-gris-500);transition:transform var(--dur-normal) var(--ease-standard),background var(--dur-normal);
}
.switch input:checked+.switch__box{background:var(--accent-soft);border-color:var(--accent)}
.switch input:checked+.switch__box::after{transform:translateX(26px);background:var(--gmv-bleu-300)}
.switch input:focus-visible+.switch__box{box-shadow:var(--focus-ring)}
.switch__lbl{font-size:var(--text-md);color:var(--text-body)}
.switch__lbl b{color:var(--gmv-jaune);font-weight:700}

/* Sortie : cadran */
/* La carte de résultat suit le défilement pendant qu'on manipule les curseurs,
   au lieu de s'étirer et de laisser un grand vide sous la note. */
/* Les deux colonnes se terminent ensemble : la note de bas de carte est poussée
   en bas plutôt que de laisser un creux sous le contenu. */
.calc__out{
  display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,34px);
  background:linear-gradient(165deg,#1c1e22 0%,#141518 100%);
  border:1px solid var(--border-mid);border-radius:var(--radius-md);
  box-shadow:var(--shadow-3);
}
.gauge{position:relative;max-width:470px;margin:0 auto var(--space-6)}
.gauge__svg{width:100%;height:auto;overflow:visible}
.gauge__track{fill:none;stroke:rgba(255,255,255,.22);stroke-width:13;stroke-linecap:round}
.gauge__fill{
  fill:none;stroke:var(--gmv-bleu-500);stroke-width:13;stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(36,150,219,.4));
  transition:stroke-dashoffset .55s var(--ease-standard),stroke .35s var(--ease-standard);
}
.gauge__ticks line{stroke:rgba(255,255,255,.28);stroke-width:2}
/* Le contenu central reste dans l'ouverture de l'arc, sur une seule ligne chacun */
.gauge__mid{position:absolute;left:15%;right:15%;bottom:6%;text-align:center}
/* Fond charbon derrière le libellé : il flotte au-dessus de l'arc au lieu de
   se lire sur le tracé gris, ce qui salissait le cadran. */
.gauge__lbl{
  display:inline-block;padding:3px 9px;
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:10.5px;letter-spacing:.1em;color:var(--gmv-gris-300);line-height:1.2;
  white-space:nowrap;background:rgba(20,22,26,.92);border-radius:var(--radius-sm);
}
.gauge__num{
  display:flex;align-items:flex-start;justify-content:center;gap:4px;
  font-family:var(--font-headline);font-weight:800;line-height:.94;
  font-size:clamp(34px,4.4vw,52px);color:#fff;font-variant-numeric:tabular-nums;
  margin-top:5px;
}
.gauge__cur{font-size:.48em;color:var(--gmv-bleu-300);margin-top:.3em}
/* 10 px d'air sous le montant : l'instrument de précision respire */
.gauge__sub{margin-top:10px;font-size:12.5px;color:var(--gmv-jaune);font-weight:600;white-space:nowrap}
/* Le cadran change de température avec le montant */
.gauge.is-chaud .gauge__num{color:#ffdc7a}
.gauge.is-critique .gauge__num{color:#ffb27a;text-shadow:0 0 26px rgba(194,98,12,.45)}
.gauge__sub em{font-style:normal;color:var(--gmv-gris-500)}
.gauge.is-hors-echelle .gauge__fill{stroke-dasharray:none!important;filter:drop-shadow(0 0 14px rgba(194,98,12,.6))}
.gauge__num,.gauge__cur{transition:color var(--dur-normal) var(--ease-standard)}

/* Comparatif */
.vs{display:grid;gap:12px;margin-bottom:var(--space-5)}
.vs__row{display:grid;grid-template-columns:minmax(120px,1.1fr) 2fr auto;align-items:center;gap:12px}
.vs__k{font-family:var(--font-headline);text-transform:uppercase;font-weight:600;font-size:var(--text-sm);letter-spacing:.06em;color:var(--text-muted)}
.vs__bar{height:12px;background:rgba(255,255,255,.07);border-radius:var(--radius-pill);overflow:hidden}
.vs__bar i{display:block;height:100%;border-radius:var(--radius-pill);transition:width .55s var(--ease-standard)}
/* Rouille chantier plutôt que rouge vif : l'urgence de la marque est le jaune,
   un rouge saturé serait la seule couleur hors palette de la page. */
/* Jaune chantier assombri : l'urgence de la marque, sans introduire d'orange. */
.vs__row--bad .vs__bar i{background:linear-gradient(90deg,#8a6410,var(--gmv-jaune))}
.vs__row--good .vs__bar i{background:linear-gradient(90deg,var(--gmv-bleu-700),var(--gmv-bleu-400));box-shadow:var(--glow-bleu)}
.vs__v{font-family:var(--font-headline);font-weight:800;font-size:var(--text-lg);color:#fff;font-variant-numeric:tabular-nums;text-align:right;min-width:7ch}
.vs__row--good .vs__v{color:var(--gmv-bleu-300)}

.verdict{
  position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  padding:var(--space-5);margin-bottom:var(--space-5);
  background:rgba(36,150,219,.09);border:1px solid rgba(36,150,219,.3);
  border-left:3px solid var(--accent);border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.verdict__k{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-sm);letter-spacing:var(--tracking-caps);color:var(--gmv-bleu-300);
  width:100%;
}
.verdict__v{
  font-family:var(--font-headline);font-weight:800;font-size:clamp(32px,4vw,48px);
  line-height:1;color:#fff;font-variant-numeric:tabular-nums;
}
.verdict__n{font-size:var(--text-sm);color:var(--text-muted)}
.calc__act{display:flex;flex-wrap:wrap;gap:12px}
.calc__act .btn{flex:1 1 190px}
.calc__note{margin-top:var(--space-5);font-size:13px;line-height:1.6;color:var(--text-faint)}

/* ── 10. SERVICES ──────────────────────────────────────────────────────────── */
.grid{display:grid;gap:clamp(16px,1.8vw,24px)}
.grid--srv{grid-template-columns:repeat(3,1fr)}
/* La mécanique diesel/hydraulique est le cœur du métier : un chiffre d'appui en
   pied de carte lui donne un poids que les cinq autres n'ont pas, sans casser la
   grille 3×2 (un span 2 colonnes laisserait une carte orpheline sur six). */
.card--phare{display:flex;flex-direction:column}
.card__stat{
  display:flex;align-items:baseline;gap:12px;margin-top:auto;padding-top:var(--space-5);
  border-top:1px solid var(--border-subtle);
}
.card__stat b{
  font-family:var(--font-headline);font-weight:800;font-size:clamp(28px,3vw,40px);
  line-height:1;color:var(--gmv-bleu-300);
}
.card__stat span{font-size:var(--text-sm);color:var(--text-muted);max-width:26ch}
.card{
  position:relative;overflow:hidden;
  padding:clamp(24px,2.4vw,32px);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  transition:transform var(--dur-normal) var(--ease-standard),
             border-color var(--dur-normal) var(--ease-standard),
             box-shadow var(--dur-normal) var(--ease-standard),
             background var(--dur-normal) var(--ease-standard);
}
.card:hover,.card:focus-visible{
  transform:translateY(-4px);border-color:rgba(36,150,219,.45);
  background:var(--surface-raised);box-shadow:var(--shadow-3);
}
/* Icône posée sur une pastille oblique : le geste de marque se répète à l'échelle
   du composant, et la cible visuelle passe de 38 à 64 px. */
.card__ico{
  width:46px;height:46px;padding:9px;box-sizing:content-box;
  fill:var(--gmv-bleu-300);margin-bottom:var(--space-4);
  background:rgba(36,150,219,.1);border:1px solid rgba(36,150,219,.28);
  transform:skewX(var(--angle-slash));
  transition:fill var(--dur-normal) var(--ease-standard),
             background var(--dur-normal) var(--ease-standard),
             border-color var(--dur-normal) var(--ease-standard),
             transform var(--dur-normal) var(--ease-standard);
}
.card:hover .card__ico,.card:focus-visible .card__ico{
  fill:#fff;background:rgba(36,150,219,.24);border-color:rgba(36,150,219,.65);
  transform:skewX(var(--angle-slash)) scale(1.06);
}
.card__h{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:clamp(19px,1.8vw,24px);line-height:1.12;letter-spacing:.01em;
  color:#fff;margin-bottom:var(--space-3);
}
.card p{color:var(--text-muted);font-size:var(--text-md)}
.card__pied{
  margin-top:auto;padding-top:var(--space-5);
  border-top:1px solid var(--border-subtle);
  font-size:13px;color:var(--text-faint)!important;
}
.card{display:flex;flex-direction:column}
/* Oblique signature révélée au survol, coin bas-droit */
.card__slash{
  position:absolute;right:-38px;bottom:-16px;width:84px;height:5px;
  background:var(--accent);transform:skewX(var(--angle-slash)) translateX(20px);
  opacity:0;transition:opacity var(--dur-normal) var(--ease-standard),transform var(--dur-normal) var(--ease-standard);
}
.card:hover .card__slash,.card:focus-visible .card__slash{opacity:1;transform:skewX(var(--angle-slash)) translateX(0)}
.card--urg{border-color:rgba(247,181,0,.38);background:linear-gradient(165deg,#241f10,#1a1710)}
.card--urg:hover,.card--urg:focus-visible{background:linear-gradient(165deg,#2e2714,#211c12)}
.card--urg .card__ico{fill:var(--gmv-jaune);background:rgba(247,181,0,.1);border-color:rgba(247,181,0,.32)}
.card--urg:hover .card__ico,.card--urg:focus-visible .card__ico{fill:#ffd45e;background:rgba(247,181,0,.22);border-color:rgba(247,181,0,.65)}
.card--urg:hover,.card--urg:focus-visible{border-color:rgba(247,181,0,.6)}
.card--urg .card__slash{background:var(--gmv-jaune)}
.card__tag{
  position:absolute;top:0;right:0;padding:6px 16px 6px 22px;
  background:var(--gmv-jaune);color:var(--gmv-noir-950);
  font-family:var(--font-headline);font-weight:800;font-size:var(--text-sm);letter-spacing:.08em;
  clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);
}

/* Bande « on travaille sur » */
.fleet{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  margin-top:clamp(28px,3.4vw,44px);padding-top:var(--space-6);
  border-top:1px solid var(--border-subtle);
}
.fleet__k{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-sm);letter-spacing:var(--tracking-caps);color:var(--text-accent);
}
.fleet__l{display:flex;flex-wrap:wrap;gap:10px}
/* Pastilles coupées à -14° : le seul composant qui échappait à l'oblique */
.fleet__l li{
  padding:8px 18px 8px 22px;font-size:var(--text-sm);color:var(--text-body);
  background:rgba(255,255,255,.04);border:1px solid var(--border-subtle);
  clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);
}

/* ── 11. ATELIER MOBILE ────────────────────────────────────────────────────── */
.rig{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:center}
.rig__txt p{color:var(--text-muted);margin-top:var(--space-5);max-width:52ch}
/* Une vue d'ensemble en bandeau, puis trois plans serrés en dessous */
.rig__pics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rig__p{position:relative;overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--gmv-noir-900)}
/* Grading uniforme : les trois photos parlent la même langue froide et désaturée,
   peu importe la lumière de la prise de vue d'origine */
.rig__p::before{content:'';position:absolute;inset:0;z-index:1;background:var(--gmv-bleu-700);opacity:.1;mix-blend-mode:color;pointer-events:none}
.rig__p img{width:100%;height:100%;object-fit:cover;filter:saturate(.68) contrast(1.06) brightness(.94);transition:transform .7s var(--ease-standard),filter var(--dur-normal)}
.rig__p:hover img{transform:scale(1.05)}
.rig__p--a{grid-column:1/-1;aspect-ratio:16/7}
.rig__p--b,.rig__p--c,.rig__p--d{aspect-ratio:4/3}
.rig__p::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(19,20,22,.45) 100%);pointer-events:none}
/* La grande photo déborde du conteneur à droite, comme les engrenages filigranes
   des autres sections — le geste identitaire plutôt que la grille sage */
@media (min-width:1400px){.rig__p--a{width:calc(100% + 64px)}}

/* ── 12. ZONE DESSERVIE ────────────────────────────────────────────────────── */
.zone{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(28px,4vw,60px);align-items:stretch}
/* Carte + légende empilées : la carte garde son ratio géographique (aucun
   étirement, aucune bande vide) et la légende occupe le reste de la colonne. */
.zone__map{display:flex;flex-direction:column;gap:var(--space-4);align-self:start}
.zone__map .carte{height:auto}
.zone__txt p{color:var(--text-muted);margin-top:var(--space-5);max-width:52ch}
/* Texte courant + lien téléphone clairement cliquable : l'affordance porte sur
   « Appelez pareil », pas sur toute la phrase */
.zone__note{color:var(--text-body);font-weight:500}
.zone__note .tel-link{color:var(--gmv-bleu-300);font-weight:700;border-bottom:1px solid rgba(147,197,234,.55)}
.zone__note .tel-link:hover{color:#fff;border-color:#fff}
/* Carte schématique de la région desservie */
.carte{
  width:100%;height:auto;margin-inline:auto;
  background:#101114;border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-2);
}
.carte__eaulbl text{
  font-family:var(--font-headline);font-weight:600;font-size:12.5px;
  letter-spacing:.18em;fill:#97a1a9;
}
.carte__eau ellipse,.carte__eau path{fill:#16303f}
/* Le fleuve est un tracé, pas une surface : une seule ligne épaisse le suit
   du lac Saint-François jusqu'au-delà de Montréal. */
.carte__fleuve{fill:none!important;stroke:#16303f;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
/* Repères territoriaux (Ontario, États-Unis) : situent la zone, en retrait */
.carte__terr text{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:11px;letter-spacing:.18em;fill:rgba(201,209,215,.3);
}
/* L'île doit se détacher de l'eau qui l'entoure : plus claire, contour net */
.carte__ile{fill:#32373d;stroke:rgba(201,209,215,.34);stroke-width:1.2}
/* Territoires de service : le cœur prioritaire en aplat franc, le reste du
   Grand Montréal en contour léger. Deux niveaux lisibles d'un coup d'œil. */
.carte__zprio{fill:rgba(36,150,219,.14);stroke:rgba(36,150,219,.62);stroke-width:1.8;stroke-dasharray:8 6}
.carte__zgm{fill:rgba(36,150,219,.05);stroke:rgba(36,150,219,.3);stroke-width:1.5;stroke-dasharray:3 8}
/* Noms de régions : c'est le langage de l'acheteur, ils portent la carte */
.carte__reg text{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:13px;letter-spacing:.13em;fill:rgba(215,232,244,.62);
}
.carte__routes path{fill:none;stroke:rgba(201,209,215,.3);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.carte__routes path:nth-child(1){stroke:rgba(201,209,215,.42);stroke-width:2.6}
/* Numéros d'autoroute : écussons sombres à bord bleu, comme la vraie signalisation */
.carte__routelbl rect{fill:#14171b;stroke:rgba(36,150,219,.55);stroke-width:1.2;rx:3}
.carte__routelbl text{
  font-family:var(--font-headline);font-weight:800;font-size:13px;
  letter-spacing:.06em;fill:#dfe5ea;
}
.carte__villes circle{fill:var(--gmv-bleu-300);stroke:#101114;stroke-width:1.5}
/* Zone étendue : anneau évidé, exactement comme les puces de la liste */
.carte__villes--e circle{fill:#101114;stroke:var(--gmv-bleu-400);stroke-width:2}
.carte__lbl text{
  font-family:var(--font-headline);font-weight:700;font-size:12.5px;
  letter-spacing:.1em;fill:#dfe5ea;
}
.carte__base circle{fill:var(--gmv-jaune);filter:drop-shadow(0 0 10px rgba(247,181,0,.7))}
.carte__base-c{fill:#101114!important;filter:none!important}
.carte__base text{
  font-family:var(--font-headline);font-weight:800;font-size:14px;
  letter-spacing:.13em;fill:#fff;
}
.carte__legende text{
  font-family:var(--font-headline);font-weight:700;font-size:12.5px;
  letter-spacing:.14em;fill:#93c5ea;
}

.towns{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px 18px;margin-top:var(--space-6);
}
.towns li{
  position:relative;padding-left:17px;font-size:var(--text-sm);color:var(--text-body);
}
.towns li::before{
  content:'';position:absolute;left:0;top:.58em;width:7px;height:10px;
  transform:skewX(var(--angle-slash));
}
/* Puce pleine = rayon prioritaire · puce évidée = zone étendue */
.towns--p::before{background:var(--gmv-bleu-500)}
.towns--e::before{background:transparent;box-shadow:inset 0 0 0 2px var(--gmv-bleu-500);width:9px;height:12px}
.towns--e{color:var(--text-muted)}
/* Deux groupes titrés : on sait à quelle zone on appartient sans décoder une puce */
.tz{margin-top:var(--space-6)}
.tz__h{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;
  padding-bottom:var(--space-3);margin-bottom:var(--space-4);
  border-bottom:1px solid var(--border-subtle);
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-md);letter-spacing:var(--tracking-caps);
}
.tz__h span{
  font-family:var(--font-body);text-transform:none;font-weight:500;
  font-size:13px;letter-spacing:0;color:var(--text-faint);
}
.tz__h--p{color:var(--gmv-bleu-300)}
.tz__h--e{color:var(--text-muted)}
.tz .towns{margin-top:0}

/* ── 13. PREUVES ───────────────────────────────────────────────────────────── */
/* ── Bandeau de chiffres : le seul bloc pleine largeur de la seconde moitié
   de page. Il casse la succession de sections en deux colonnes. ── */
.bandeau{
  position:relative;background:var(--gmv-noir-900);
  padding:clamp(34px,4vw,58px) 0;overflow:hidden;
}
.bandeau::after{content:'';position:absolute;inset:0;background:var(--steel);pointer-events:none}
.bandeau::before{
  content:'';position:absolute;right:-6vw;top:-30%;width:min(34vw,380px);aspect-ratio:1;
  background:url('../assets/img/gear-noir.webp') center/contain no-repeat;
  opacity:.09;filter:brightness(1.8);pointer-events:none;
}
.bandeau .wrap{position:relative;z-index:1}
.sect--preuves+.seam,.bandeau+.seam{--from:var(--gmv-noir-900);--to:var(--surface-plate)}
.sect--rig+.seam{--from:var(--surface-plate);--to:var(--surface-page)}
.seam--b{--from:var(--gmv-noir-900);--to:var(--surface-plate)}

.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
}
.stats li{position:relative;padding:clamp(22px,2.6vw,34px) var(--space-5) clamp(22px,2.6vw,34px) 0;text-align:left}
.stats li+li{padding-left:var(--space-6)}
.stats li+li::before{
  content:'';position:absolute;left:0;top:18%;bottom:18%;width:2px;
  background:var(--border-subtle);transform:skewX(var(--angle-slash));
}
.stats b{
  display:block;font-family:var(--font-headline);font-weight:800;
  font-size:clamp(34px,4.6vw,58px);line-height:.95;
  background:var(--gmv-grad-chrome);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#fff;
  font-variant-numeric:tabular-nums;
}
.stats b em{
  font-style:normal;font-size:.46em;letter-spacing:.02em;
}
.stats span{display:block;margin-top:9px;font-size:var(--text-sm);color:var(--text-muted);line-height:1.4}
.stats span em{display:block;margin-top:3px;font-style:normal;font-size:12px}

.temoins{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.temoin{
  position:relative;padding:clamp(26px,2.6vw,36px);
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  display:flex;flex-direction:column;gap:var(--space-5);
}
.temoin::before{
  content:'';position:absolute;left:clamp(26px,2.6vw,36px);top:0;width:44px;height:4px;
  background:var(--gmv-bleu-500);transform:skewX(var(--angle-slash));
}
.temoin__q{font-size:clamp(16px,1.4vw,18px);color:var(--text-body);line-height:1.55;flex:1}
.temoin__q::before{content:'« '}
.temoin__q::after{content:' »'}
.temoin__a{display:flex;flex-direction:column;gap:3px}
.temoin__a b{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-md);letter-spacing:.06em;color:#fff;
}
.temoin__a span{font-size:13px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.1em}
/* Le pont entre les citations et le dossier fournisseur : la vraie preuve est appelable */
.temoins__note{
  margin-top:var(--space-5);font-size:15px;color:var(--text-body);
  padding-left:14px;border-left:3px solid var(--gmv-bleu-600);
}
.temoins__note b{color:var(--gmv-bleu-200);font-weight:600}

/* Signature du propriétaire : photo à gauche, mot à droite (pas de texte sur photo) */
.signature{
  position:relative;display:grid;grid-template-columns:1.05fr 1fr;
  margin-top:clamp(28px,3.4vw,48px);overflow:hidden;
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  background:var(--surface-card);
}
.signature__pic{position:relative;overflow:hidden;background:var(--gmv-noir-900)}
/* Voile bleu très léger : la flamme du chalumeau donne déjà la température froide */
.signature__pic::before{content:'';position:absolute;inset:0;z-index:1;background:var(--gmv-bleu-700);opacity:.07;mix-blend-mode:color;pointer-events:none}
/* Photo déjà recadrée et étalonnée à l'export (voir DEPLOIEMENT.md § photos) :
   le CSS ne fait que placer, sans recadrage supplémentaire. */
.signature__pic img{
  width:100%;height:100%;object-fit:cover;object-position:36% 50%;min-height:280px;
}
.signature__pic::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(27,28,31,.85) 100%);
}
.signature figcaption{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:clamp(24px,3vw,44px);
}
.signature__brush{font-family:var(--font-brush);font-size:clamp(28px,3.4vw,46px);color:var(--gmv-bleu-300);line-height:1.1;transform:rotate(-1.6deg)}
.signature__role{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-sm);letter-spacing:var(--tracking-caps);color:#fff;margin-top:5px;
}
.signature__txt{margin-top:10px;font-size:var(--text-md);color:var(--text-muted);max-width:40ch}
.signature .lnk{margin-top:var(--space-5)}

/* Bande « dossier fournisseur » : les preuves d'affaires que demande un acheteur */
.conf{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,3vw,48px);
  margin-top:clamp(20px,2.4vw,32px);padding:clamp(24px,2.8vw,38px);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-top:3px solid var(--gmv-anthracite);border-radius:var(--radius-md);
}
.conf__k{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:800;
  font-size:clamp(19px,1.8vw,24px);letter-spacing:.02em;color:#fff;
  margin-bottom:var(--space-3);
}
.conf__l{font-size:var(--text-sm);color:var(--text-muted);max-width:34ch}
.conf__g{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5) clamp(20px,2.4vw,36px)}
.conf__g dt{
  display:flex;align-items:center;gap:9px;margin-bottom:5px;
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:13px;letter-spacing:var(--tracking-caps);color:var(--text-accent);
}
.conf__g dt::before{
  content:'';flex:none;width:8px;height:12px;background:var(--gmv-bleu-500);
  transform:skewX(var(--angle-slash));
}
/* 15 px : c'est la section que le service des achats lit attentivement */
.conf__g dd{font-size:15px;line-height:1.55;color:var(--text-body)}
.conf__g dd b{color:#fff;font-weight:600}
/* Micro-preuves sous la signature du propriétaire */
.micro{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border-subtle);width:100%}
.micro li{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:12.5px;letter-spacing:.09em;color:var(--text-faint);
}
.micro li::before{content:'';flex:none;width:7px;height:10px;background:var(--gmv-bleu-500);transform:skewX(var(--angle-slash))}

/* ── Bloc capacité : la réponse à « un seul mécanicien, et mon volume ? » ── */
.capa{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(26px,3.4vw,56px);
  margin-top:clamp(20px,2.4vw,32px);padding:clamp(26px,3vw,44px);
  background:linear-gradient(160deg,#1d1f24,#141518);
  border:1px solid var(--border-mid);border-left:3px solid var(--accent);
  border-radius:var(--radius-md);box-shadow:var(--shadow-2);
  scroll-margin-top:110px;
}
.capa__h{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:800;
  font-size:clamp(24px,2.6vw,36px);line-height:1.06;letter-spacing:.01em;color:#fff;
}
.capa__h .hl{font-style:normal;color:var(--gmv-bleu-300)}
.capa__l{margin-top:var(--space-5);color:var(--text-muted);max-width:44ch}
.capa__t .btn{margin-top:var(--space-6)}
.capa__l4{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6) clamp(20px,2.4vw,32px);align-content:start}
.capa__l4 li{position:relative;padding-left:var(--space-5)}
/* La 5e carte prendrait sinon une seule colonne avec une cellule vide à côté */
.capa__large{grid-column:1/-1}
.capa__l4 li::before{
  content:'';position:absolute;left:0;top:5px;width:8px;height:15px;
  background:var(--gmv-bleu-500);transform:skewX(var(--angle-slash));
}
.capa__l4 h4{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-lg);letter-spacing:.03em;color:#fff;margin-bottom:6px;
}
.capa__l4 p{font-size:var(--text-sm);color:var(--text-muted)}
.capa__n{margin-top:8px;font-size:13px}
.capa__n b{font-weight:700}

/* ── Projection : la récurrence, pas l'arrêt isolé ── */
.proj{
  margin-top:var(--space-5);padding:var(--space-5);
  background:rgba(255,255,255,.03);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
}
.proj__k{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:13px;letter-spacing:var(--tracking-caps);color:var(--text-faint);
  margin-bottom:var(--space-4);
}
.proj__l{display:grid;gap:10px}
.proj__l li{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.proj__l span{font-size:var(--text-sm);color:var(--text-body)}
.proj__l b{
  font-family:var(--font-headline);font-weight:800;font-size:var(--text-xl);
  color:var(--gmv-bleu-300);font-variant-numeric:tabular-nums;
}
.proj__n{margin-top:var(--space-4);font-size:12.5px;color:var(--text-faint)}

/* Ancre invisible pour ouvrir directement l'onglet « Contrat de flotte ».
   position:absolute est OBLIGATOIRE : sans ça, l'ancre devient un enfant de la
   grille .contact, occupe la colonne de droite et repousse le formulaire en
   dessous — la section de conversion se retrouve cassée sur grand écran. */
.ancre{position:absolute;width:0;height:0;overflow:hidden;scroll-margin-top:110px}

/* Marqueur discret des valeurs encore à remplir — retirer l'attribut suffit */
[data-remplir]{
  border-bottom:1px dashed rgba(247,181,0,.55);color:var(--gmv-jaune)!important;
}

/* ── 14. OUTILS MAISON ─────────────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,28px)}
.tool{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(26px,2.8vw,38px);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-top:3px solid var(--gmv-anthracite);border-radius:var(--radius-md);
  transition:border-top-color var(--dur-normal) var(--ease-standard);
}
.tool:hover{border-top-color:var(--accent)}
.tool__k{
  font-family:var(--font-display);font-size:var(--text-sm);letter-spacing:var(--tracking-display);
  text-transform:uppercase;color:var(--gmv-bleu-400);margin-bottom:var(--space-4);
}
.tool__h{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:clamp(21px,2.1vw,29px);line-height:1.1;color:#fff;margin-bottom:var(--space-4);
}
.tool p{color:var(--text-muted)}
.tool .lnk{margin-top:auto;align-self:flex-start;padding-top:var(--space-5)}
.tool__acces{
  margin-top:auto;padding-top:var(--space-5);
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:13px;letter-spacing:.09em;color:var(--gmv-bleu-300)!important;
}
/* Les deux visuels des outils partagent la même hauteur pour que les étiquettes
   MEVAWORK et MÉCA-IA tombent sur la même ligne de base. */
.tool__pic{
  position:relative;
  margin:calc(-1*clamp(26px,2.8vw,38px)) calc(-1*clamp(26px,2.8vw,38px)) var(--space-6);
  overflow:hidden;border-bottom:1px solid var(--border-subtle);
}
.tool__pic figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:20px 22px 10px;
  background:linear-gradient(180deg,transparent,rgba(15,16,18,.9));
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:12px;letter-spacing:.1em;color:var(--gmv-bleu-200);
}
/* height:auto est nécessaire : sans lui, l'attribut height="675" de la balise
   img l'emporte et aspect-ratio est ignoré (la photo devient deux fois trop haute). */
.tool__pic img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:38% 42%}
/* Dégradé de fuite à droite : la coupe devient un choix, pas un accident */
.tool__pic::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:90px;
  background:linear-gradient(90deg,transparent,#15171a);pointer-events:none;
}
.tool__slash{
  position:absolute;right:-30px;top:-8px;width:70px;height:4px;background:var(--gmv-bleu-500);
  transform:skewX(var(--angle-slash));opacity:.55;
}

/* Bon de travail schématique — pendant visuel de la photo de diagnostic */
/* Bon de travail WorkPro+ et échange Méca-IA : même bandeau en tête de carte,
   pour que les deux outils maison se répondent visuellement. */
.bt,.ia{
  margin:calc(-1*clamp(26px,2.8vw,38px)) calc(-1*clamp(26px,2.8vw,38px)) var(--space-6);
  padding:var(--space-5) clamp(22px,2.4vw,32px) var(--space-4);
  background:linear-gradient(168deg,#191b1f,#121316);
  border-bottom:1px solid var(--border-subtle);
}
.bt__top{display:flex;align-items:center;gap:12px;margin-bottom:var(--space-3)}
.bt__no{
  font-family:var(--font-headline);font-weight:800;font-size:var(--text-lg);
  letter-spacing:.06em;color:#fff;
}
.bt__etat{
  padding:3px 12px 3px 16px;background:var(--accent-soft);
  border:1px solid rgba(36,150,219,.45);
  clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:12px;letter-spacing:.1em;color:var(--gmv-bleu-300);
}
.bt__unite{
  font-size:13px;color:var(--text-faint)!important;
  padding-bottom:var(--space-4);margin-bottom:var(--space-4);
  border-bottom:1px solid var(--border-subtle);
}
.bt__l{display:grid;gap:9px}
.bt__l li{display:flex;gap:10px;align-items:baseline;font-size:13px}
/* Puce tiret : même présentation que la liste des travaux dans WorkPro+ */
.bt__l li::before{content:'–';flex:none;color:var(--gmv-bleu-400);font-weight:700}
.bt__a{color:var(--text-body)}
.bt__photo .bt__a{color:var(--gmv-bleu-300)}
.bt__pied{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:var(--space-5);padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);
  font-size:13px;color:var(--text-faint);
}

/* ── Échange Méca-IA ─────────────────────────────────────────────────────── */
.ia__top{display:flex;align-items:center;gap:12px;margin-bottom:var(--space-3)}
.ia__nom{
  font-family:var(--font-headline);font-weight:800;font-size:var(--text-lg);
  letter-spacing:.06em;color:#fff;
}
/* Pastille « en ligne » : le seul vert du site, réservé à cet état */
.ia__etat{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:11px;letter-spacing:.12em;color:var(--success);
}
.ia__etat::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--success);box-shadow:0 0 8px rgba(94,194,111,.8);
}
.ia__q{font-size:14px;color:var(--text-body)!important;font-style:italic}
.ia__ctx{
  font-size:12px;color:var(--text-faint)!important;letter-spacing:.04em;
  padding-bottom:var(--space-4);margin:4px 0 var(--space-4);
  border-bottom:1px solid var(--border-subtle);
}
/* La capture : c'est la preuve que l'outil descend au niveau du schéma.
   Bord net et fond sombre — elle vient déjà d'une interface foncée. */
.ia__cap{
  overflow:hidden;border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);background:#0f1012;
}
.ia__cap img{width:100%;height:auto;display:block}
.ia__r{
  margin-top:var(--space-4);padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);
  font-size:13px;color:var(--text-muted)!important;line-height:1.5;
}
.bt__pied b{
  font-family:var(--font-headline);font-weight:800;font-size:var(--text-xl);
  color:#fff;font-variant-numeric:tabular-nums;
}

/* ── 15. CONTACT ───────────────────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,60px);align-items:start}
.contact__side>p{color:var(--text-muted);margin-top:var(--space-5);max-width:44ch}
.bigtel{
  display:flex;align-items:center;gap:14px;margin-top:var(--space-6);
  font-family:var(--font-headline);font-weight:800;
  font-size:clamp(30px,4.4vw,52px);line-height:1;letter-spacing:-.01em;color:#fff;
  transition:color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
}
.bigtel .ico{width:.72em;height:.72em;color:var(--accent);filter:drop-shadow(0 0 14px rgba(36,150,219,.55))}
.bigtel:hover{color:var(--gmv-bleu-200);transform:translateX(3px)}

.coords{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--border-subtle)}
.coords dt{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:13px;letter-spacing:var(--tracking-caps);color:var(--text-faint);margin-bottom:5px;
}
.coords dd{font-size:var(--text-sm);color:var(--text-body);word-break:break-word}
.coords a{border-bottom:1px solid rgba(36,150,219,.4);transition:color var(--dur-fast),border-color var(--dur-fast)}
/* Le courriel ne doit jamais casser au milieu du mot : c'est la ligne que
   l'acheteur copie pour son appel d'offres */
.coords a[href^="mailto:"]{white-space:nowrap;font-size:15px;word-break:keep-all}
.coords a:hover{color:var(--gmv-bleu-300);border-color:var(--accent)}

/* Préparation de l'appel */
.prep{margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--border-subtle)}
.prep__k{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-sm);letter-spacing:var(--tracking-caps);color:var(--text-accent);
  margin-bottom:var(--space-5);
}
.prep__l{display:grid;gap:12px}
.prep__l li{display:flex;align-items:flex-start;gap:12px;font-size:var(--text-sm);color:var(--text-body)}
.prep__l span{
  flex:none;width:24px;height:24px;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid rgba(36,150,219,.4);
  font-family:var(--font-headline);font-weight:800;font-size:var(--text-xs);
  color:var(--gmv-bleu-300);transform:skewX(var(--angle-slash));
}
.prep__l span{font-variant-numeric:tabular-nums}

/* Rappel d'urgence en pied de colonne — le jaune chantier, une seule fois ici */
/* Placé après le formulaire, dans la même carte : il ferme la colonne droite
   et arrive au bon moment — juste après avoir vu combien de champs remplir. */
.urgent{
  position:relative;display:flex;align-items:center;gap:16px;
  margin:0 clamp(22px,2.6vw,34px) clamp(22px,2.6vw,34px);padding:18px 22px;
  background:rgba(247,181,0,.08);border:1px solid rgba(247,181,0,.3);
  border-radius:var(--radius-sm);
  transition:background var(--dur-normal) var(--ease-standard),
             border-color var(--dur-normal) var(--ease-standard);
}
.urgent:hover{background:rgba(247,181,0,.15);border-color:rgba(247,181,0,.6)}
.urgent__slash{
  flex:none;width:12px;height:34px;background:var(--gmv-jaune);
  transform:skewX(var(--angle-slash));box-shadow:0 0 18px rgba(247,181,0,.45);
}
.urgent__t{font-size:var(--text-sm);color:var(--text-body);line-height:1.5}
.urgent__t b{
  display:block;font-family:var(--font-headline);text-transform:uppercase;
  font-weight:800;font-size:var(--text-lg);letter-spacing:.02em;color:#fff;
  margin-bottom:3px;
}
.urgent__t .tel-text{color:var(--gmv-jaune);font-weight:700}

/* Onglets */
.contact__form{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-2)}
.tabs{display:flex;border-bottom:1px solid var(--border-subtle);background:rgba(0,0,0,.28)}
.tab{
  flex:1;padding:16px 12px;position:relative;
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:clamp(14px,1.3vw,17px);letter-spacing:.06em;color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);
}
.tab+.tab{border-left:1px solid var(--border-subtle)}
.tab:hover{color:#fff;background:rgba(255,255,255,.03)}
.tab[aria-selected="true"]{color:#fff;background:var(--surface-raised)}
.tab[aria-selected="true"]::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);
  box-shadow:0 0 14px rgba(36,150,219,.7);
}
.tab:focus-visible{box-shadow:inset var(--focus-ring)}

.form{padding:clamp(22px,2.6vw,34px)}
.pane:focus-visible{box-shadow:none;outline:0}
.pane__lede{
  padding:var(--space-4) var(--space-5);margin-bottom:var(--space-5);
  background:rgba(36,150,219,.08);border-left:3px solid var(--accent);
  font-size:var(--text-sm);color:var(--text-body);
}
/* Mise au point honnête sur la capacité — cadre sobre, pas d'alarme */
.pane__note{
  padding:var(--space-4) var(--space-5);margin-bottom:var(--space-6);
  border:1px solid var(--border-subtle);border-left:3px solid var(--gmv-anthracite);
  font-size:var(--text-sm);color:var(--text-muted);line-height:1.55;
}
.pane__note b{color:var(--text-body)}
/* Déclencheur des champs facultatifs (mode urgence) */
.plus{
  display:flex;align-items:center;gap:12px;width:100%;
  min-height:52px;padding:12px 18px;margin-bottom:var(--space-5);
  background:rgba(255,255,255,.03);border:1px dashed var(--border-mid);
  border-radius:var(--radius-sm);text-align:left;
  transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);
}
.plus:hover{border-color:var(--gmv-bleu-500);background:rgba(36,150,219,.07)}
.plus__i{
  flex:none;position:relative;width:20px;height:20px;
}
.plus__i::before,.plus__i::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--gmv-bleu-300);
  transform:translate(-50%,-50%);transition:transform var(--dur-normal) var(--ease-standard);
}
.plus__i::before{width:16px;height:2.5px}
.plus__i::after{width:2.5px;height:16px}
.plus[aria-expanded="true"] .plus__i::after{transform:translate(-50%,-50%) rotate(90deg)}
.plus__t{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-md);letter-spacing:.06em;color:#fff;
}
/* « (facultatif) » : dit tout de suite qu'on peut passer par-dessus */
.plus__t em{font-style:normal;font-weight:600;color:var(--text-faint);letter-spacing:.04em}
.plus__n{font-size:13px;color:var(--text-faint)}
/* Variante dans le calculateur : le déclencheur des hypothèses repliées */
.plus--calc{margin:var(--space-2) 0 var(--space-6)}
.plus--calc .plus__n{font-variant-numeric:tabular-nums;color:var(--gmv-bleu-300)}
.plus--calc[hidden]{display:none}
.calc__hypos[hidden]{display:none}

.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.form__grid [data-option][hidden]{display:none}
/* Mode urgence : les 4 champs facultatifs sont repliés, donc « Où est l'unité »
   se retrouverait seul sur sa rangée avec une demi-largeur vide à côté. */
.form__grid:has([data-option][hidden]) #f-lieu{grid-column:auto}
.form__grid:has([data-option][hidden]) .f:has(#f-lieu){grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:7px}
.f--full{grid-column:1/-1}
.f label{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-sm);letter-spacing:.08em;color:var(--gmv-gris-300);
}
.req{color:var(--gmv-jaune)}
.form__req{margin-bottom:var(--space-4);font-size:13px;color:var(--text-faint)}
.f input,.f select,.f textarea{
  padding:12px 14px;background:var(--gmv-noir-950);color:#fff;
  /* Bordure ≥ 3:1 (WCAG 1.4.11) : dehors au soleil, il faut voir où taper */
  border:1px solid rgba(255,255,255,.34);border-radius:var(--radius-sm);
  font-size:var(--text-md);width:100%;
  transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);
}
.f textarea{resize:vertical;min-height:104px;font-family:inherit}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gmv-bleu-400) 50%),linear-gradient(135deg,var(--gmv-bleu-400) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:42px}
.f input::placeholder,.f textarea::placeholder{color:#8b959d;opacity:1}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--gmv-gris-600)}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}
/* Aide persistante sous le libellé — ne disparaît pas à la première frappe */
.aide{font-size:13px;color:var(--text-faint);line-height:1.45;margin-top:-3px}
.err{font-size:13px;color:var(--danger);min-height:1em;font-weight:600}
.f.is-bad input,.f.is-bad select,.f.is-bad textarea{border-color:var(--danger);background:rgba(229,72,77,.06)}

/* Champ piège — masqué sans décalage négatif (qui élargirait le document) */
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);margin-top:var(--space-6)}
.form__foot .btn{flex:0 0 auto;position:relative}
.form__legal{flex:1 1 240px;font-size:13px;color:var(--text-faint);line-height:1.55}
.spin{
  display:none;width:17px;height:17px;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:tourne .7s linear infinite;
}
.btn.is-busy{pointer-events:none;opacity:.75}
.btn.is-busy .spin{display:block}

.state{margin-top:var(--space-5);font-size:var(--text-sm)}
.state:empty{margin:0}
.state__box{padding:var(--space-5);border-radius:var(--radius-sm);border-left:3px solid}
.state__box h3{
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-lg);letter-spacing:.04em;color:#fff;margin-bottom:6px;
}
.state__box p{color:var(--text-body)}
.state__box--ok{background:rgba(94,194,111,.1);border-color:var(--success)}
.state__box--ko{background:rgba(255,107,111,.1);border-color:var(--danger)}
.state__box a{color:var(--gmv-bleu-300);font-weight:700;border-bottom:1px solid currentColor}

/* ── 16. PIED DE PAGE ──────────────────────────────────────────────────────── */
/* Le pied de page porte les mêmes marqueurs que le reste : couture oblique
   d'entrée avec ligne de soudure, puces à -14°, wordmark chrome, triade. */
.foot{position:relative;overflow:hidden;background:#0d0e10;padding-top:clamp(44px,4.8vw,74px)}
.foot__in{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(24px,3vw,44px)}
.foot__brand img{width:76px;height:auto;margin-bottom:var(--space-5)}
.foot__name{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(14px,1.2vw,17px);letter-spacing:var(--tracking-display);line-height:1.55;
  background:var(--gmv-grad-chrome);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gmv-gris-100);
}
.foot__tag{margin-top:11px;font-size:var(--text-sm);color:var(--text-muted)}
.foot__triade{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin-top:var(--space-6);padding-top:var(--space-5);
  border-top:1px solid var(--border-subtle);
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-md);letter-spacing:var(--tracking-caps);color:#fff;
}
.foot__triade::before{
  content:'';flex:none;width:14px;height:17px;background:var(--gmv-bleu-500);
  transform:skewX(var(--angle-slash));box-shadow:var(--glow-bleu);
}
.foot__triade b{color:var(--gmv-jaune)}
.foot__col h2{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:var(--text-sm);letter-spacing:var(--tracking-caps);color:var(--text-accent);
  margin-bottom:var(--space-5);
}
.foot__col h2::before{
  content:'';flex:none;width:9px;height:13px;background:var(--accent);
  transform:skewX(var(--angle-slash));
}
.foot__col ul{display:grid;gap:10px}
.foot__col li,.foot__col a{font-size:var(--text-sm);color:var(--text-muted)}
.foot__col a{transition:color var(--dur-fast) var(--ease-standard)}
.foot__col a:hover{color:var(--gmv-bleu-300)}
.foot__col--c a{word-break:break-word}
.foot__bar{
  position:relative;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  margin-top:clamp(36px,4vw,60px);padding-block:var(--space-5);
  border-top:1px solid var(--border-subtle);
  font-size:13px;color:#a7b0b7;
}
/* Couture oblique : le dernier pixel de la page reste signé Acier Franc */
.foot__bar::before{
  content:'';position:absolute;top:-2px;left:0;width:92px;height:3px;
  background:var(--gmv-bleu-500);transform:skewX(var(--angle-slash));
}
/* Le numéro d'urgence en chip jaune chantier : l'ultime CTA de la page */
.foot__made a{
  display:inline-block;padding:3px 10px;margin-left:2px;
  color:var(--gmv-jaune);font-weight:700;
  background:rgba(247,181,0,.1);border:1px solid rgba(247,181,0,.35);
  border-radius:var(--radius-sm);
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.foot__made a:hover{background:rgba(247,181,0,.2);color:#ffd34d}

/* ── 17. BARRE D'APPEL MOBILE ──────────────────────────────────────────────── */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:99;
  grid-template-columns:1.25fr 1fr;
  background:rgba(13,14,16,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--border-mid);
  padding-bottom:env(safe-area-inset-bottom);
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:58px;padding:12px;
  font-family:var(--font-headline);text-transform:uppercase;font-weight:800;
  font-size:var(--text-lg);letter-spacing:.06em;
}
/* Fond bleu-700 : blanc dessus à ≈4,5:1 (AA). Le bleu électrique reste l'état actif. */
.callbar__tel{background:var(--gmv-bleu-700);color:#fff}
.callbar__tel:active{background:var(--accent)}
.callbar__sub{color:#fff;border-left:1px solid var(--border-mid)}
.callbar__sub:active{background:rgba(255,255,255,.07)}

/* ── 18. RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width:1120px){
  .nav a{padding:9px 10px;font-size:var(--text-sm)}
  .hdr__tel{font-size:var(--text-lg)}
  .brand__sub{display:none}
}

@media (max-width:1024px){
  html{scroll-padding-top:74px}
  /* À ces largeurs le lettrage de la remorque passe sous la colonne de texte :
     on pousse la photo vers la droite et on allonge le voile directionnel. */
  .hero__media img{object-position:76% 56%}
  .hero__veil{background:
    radial-gradient(52% 58% at 78% 54%,rgba(139,195,218,.16) 0%,transparent 72%),
    linear-gradient(96deg,rgba(13,14,16,.97) 0%,rgba(13,14,16,.93) 40%,rgba(13,14,16,.68) 62%,rgba(13,14,16,.22) 88%,rgba(13,14,16,.05) 100%),
    linear-gradient(180deg,rgba(13,14,16,.74) 0%,transparent 32%,rgba(13,14,16,.9) 100%)}
  .nav{
    position:fixed;inset:64px 0 auto;flex-direction:column;gap:0;margin:0;
    background:rgba(13,14,16,.985);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-mid);
    padding:var(--space-3) var(--gut) var(--space-6);
    transform:translateY(-14px);opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity var(--dur-normal) var(--ease-standard),transform var(--dur-normal) var(--ease-standard),visibility var(--dur-normal);
    max-height:calc(100svh - 64px);overflow-y:auto;
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto;visibility:visible}
  .nav a{padding:15px 4px;font-size:var(--text-xl);border-bottom:1px solid var(--border-subtle)}
  .nav a::after{left:4px;right:auto;width:26px;bottom:8px}
  .burger{display:flex}
  .hdr__cta{margin-left:auto}

  .capa{grid-template-columns:1fr;gap:var(--space-6)}
  .chain__out{width:100%}
  .chain{grid-template-columns:1fr;gap:var(--space-6)}
  .chain__i{padding:0}
  .chain__i+.chain__i{padding-left:0;padding-top:var(--space-6)}
  .chain__i+.chain__i::before{
    left:0;right:34%;top:0;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,var(--gmv-anthracite),transparent);
    transform:skewY(-1.6deg);
  }
  .chain__n{font-size:clamp(60px,15vw,96px);margin-bottom:var(--space-4)}
  .chain__i p{max-width:52ch}
  .calc{grid-template-columns:1fr}
  .grid--srv{grid-template-columns:repeat(2,1fr)}
  .towns{grid-template-columns:1fr 1fr}
  .rig,.zone,.contact{grid-template-columns:1fr}
  /* La carte est l'élément le plus distinctif de la section : en bandeau pleine
     largeur plutôt qu'en vignette de 300 px coincée sous les listes. */
  .zone__map{order:-1;max-width:none;margin-inline:0}
  .temoins{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  /* Micro-textes porteurs de sens (bornes de curseurs, formats attendus) :
     un cran plus gros dehors, au soleil */
  .field__scale,.aide{font-size:14px}
  /* Le wordmark Michroma est très large : on le passe sur deux lignes,
     comme le lockup du logo, pour qu'il tienne sans déborder. */
  .brand__mark{width:46px}
  .brand{gap:9px}
  .brand__name{display:flex;flex-direction:column;font-size:11.5px;letter-spacing:.07em;line-height:1.22}
  .hdr__in{gap:var(--space-3)}
  .hdr__tel .tel-text{display:none}
  .hdr__tel{padding:9px;background:rgba(36,150,219,.14);border:1px solid rgba(36,150,219,.4);border-radius:var(--radius-sm)}
  .hdr__tel .ico{width:20px;height:20px}
  .hero{align-items:flex-end;min-height:auto}
  .hero__in{padding-top:clamp(80px,26vw,130px)}
  .hero__h1{max-width:100%}
  .hero__act{flex-direction:column;align-items:stretch}
  .hero__act .btn{width:100%}
  /* Le bouton fantôme est posé sur la photo : il lui faut un fond pour rester
     lisible dehors, sans concurrencer le bouton d'appel. */
  .hero__act .btn--ghost{background:rgba(15,16,18,.82);border-color:var(--gmv-bleu-500);border-width:2px}
  .proof{grid-template-columns:1fr 1fr;gap:0 1px}
  .proof li,.proof li+li{padding:var(--space-5) var(--space-4) var(--space-4) 0}
  .proof li:nth-child(2n){padding-left:var(--space-5)}
  .proof li:nth-child(2n)::before{content:'';position:absolute;left:0;top:var(--space-5);bottom:var(--space-4);width:2px;background:var(--border-subtle);transform:skewX(var(--angle-slash))}
  .proof li:nth-child(2n+1)::before{display:none}
  .proof li:nth-child(n+3){border-top:1px solid var(--border-subtle)}

  .grid--srv{grid-template-columns:1fr}
  .capa__l4{grid-template-columns:1fr}
  .plus{flex-wrap:wrap}
  .plus__n{width:100%;padding-left:32px}
  .conf{grid-template-columns:1fr;gap:var(--space-6)}
  .stats{grid-template-columns:1fr 1fr}
  .stats li,.stats li+li{padding:var(--space-5) var(--space-4) var(--space-5) 0}
  .stats li:nth-child(2n){padding-left:var(--space-5)}
  .stats li:nth-child(2n)::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:2px;background:var(--border-subtle);transform:skewX(var(--angle-slash))}
  .stats li:nth-child(2n+1)::before{display:none}
  .stats li:nth-child(n+3){border-top:1px solid var(--border-subtle)}

  .form__grid{grid-template-columns:1fr}
  .form__foot{flex-direction:column;align-items:stretch}
  .form__foot .btn{width:100%}
  .form__legal{flex:none;text-align:center}
  .coords{grid-template-columns:1fr 1fr}
  .rig__pics{grid-template-columns:1fr}
  .rig__p--a,.rig__p--b,.rig__p--c,.rig__p--d{grid-column:auto;aspect-ratio:16/9}
  .foot__in{grid-template-columns:1fr;gap:var(--space-7)}
  .signature{grid-template-columns:1fr}
  .signature__pic img{min-height:0;aspect-ratio:16/9}
  .signature__pic::after{background:linear-gradient(180deg,transparent 55%,rgba(27,28,31,.9) 100%)}
  .callbar{display:grid}
  /* Réserve la place de la barre d'appel */
  .foot{padding-bottom:76px}
  .vs__row{grid-template-columns:1fr auto;grid-template-areas:'k v' 'b b';gap:6px 12px}
  .vs__k{grid-area:k}.vs__v{grid-area:v}.vs__bar{grid-area:b}
}

@media (max-width:440px){
  /* Sous 440 px, le bouton Soumission de l'en-tête est redondant :
     la barre d'appel collée en bas le propose déjà. */
  .hdr__cta .btn{display:none}
  .brand__name{font-size:10.5px}
}

/* Légende en texte HTML : elle explique les deux niveaux de service à toutes
   les largeurs, et prend le relais des étiquettes SVG en mobile. */
.carte__leg{
  display:grid;gap:11px;padding:var(--space-5);
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
}
.carte__leg li{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-headline);text-transform:uppercase;font-weight:700;
  font-size:13px;letter-spacing:.08em;color:var(--text-body);
}
.carte__leg li::before{content:'';flex:none;width:24px;height:0}
.carte__leg--base::before{width:12px;height:12px;border-radius:50%;background:var(--gmv-jaune);box-shadow:0 0 10px rgba(247,181,0,.6)}
.carte__leg--r40::before{border-top:2px dashed var(--gmv-bleu-500)}
.carte__leg--r100::before{border-top:2px dotted rgba(36,150,219,.5)}

/* Sous 560 px, les étiquettes gravées dans le SVG tombent sous 7 px de rendu :
   on les retire toutes et la légende HTML prend le relais, à taille lisible. */
@media (max-width:560px){
  /* Carte empilée pleine largeur, légende dessous : côte à côte, les deux se
     nuisaient (césures dans la légende, carte-vignette illisible). */
  .zone__map{flex-direction:column;gap:var(--space-4)}
  .zone__map .carte{width:100%;height:auto}
  /* Carte simplifiée : à cette taille les micro-étiquettes sont illisibles et la
     légende HTML prend le relais. On ne garde que les deux ancres géographiques
     lisibles — VALLEYFIELD (la base) et MONTRÉAL — en gros, avec halo charbon. */
  .carte__lbl text,.carte__routelbl,.carte__eaulbl,.carte__legende{display:none}
  .carte__lbl text.lbl-ancre--m{display:inline;font-size:26px;paint-order:stroke;stroke:rgba(16,17,20,.92);stroke-width:6px}
  /* Voile renforcé : sous 560 px le paragraphe et le lien passent sur la photo */
  .hero__veil{background:
    radial-gradient(52% 58% at 74% 54%,rgba(139,195,218,.16) 0%,transparent 72%),
    linear-gradient(96deg,rgba(13,14,16,.97) 0%,rgba(13,14,16,.93) 42%,rgba(13,14,16,.72) 66%,rgba(13,14,16,.3) 100%),
    linear-gradient(180deg,rgba(13,14,16,.78) 0%,rgba(13,14,16,.4) 30%,rgba(13,14,16,.9) 74%,rgba(13,14,16,.96) 100%)}
  /* Tailles calées pour éviter les collisions : à 360 px la carte fait ~320 px
     de large, donc 1 unité SVG ≈ 0,5 px réel. Au-delà de 15 px les noms de
     régions se chevauchent entre eux et avec la base. */
  .carte__base text{font-size:19px}
  .carte__villes circle{r:7}
  .carte__villes--e circle{r:7;stroke-width:3}
  .carte__reg text{font-size:15px;paint-order:stroke;stroke:rgba(16,17,20,.92);stroke-width:5px}
  .carte__terr{display:none}
}

@media (max-width:420px){
  /* Les paires libellé/valeur des hypothèses wrappent des deux côtés :
     on les empile plutôt que de les justifier aux extrémités. */
  .calc__hypo li{flex-direction:column;gap:2px}
  .calc__hypo b{text-align:left}
  /* « CONTRAT DE FLOTTE » passait sur deux lignes : libellé court à cette taille */
  .tab{font-size:14px;padding:15px 8px}
  .tab--court{font-size:0}
  .tab--court::after{content:'CONTRAT';font-size:14px}
}

@media (max-width:400px){
  /* Triade resserrée pour dégager la marge droite sur le premier écran */
  .triade{font-size:13px;letter-spacing:.1em;gap:10px}
  /* Les noms tiennent en deux colonnes même à 360 px : on garde la densité */
  .towns{grid-template-columns:1fr 1fr;gap:9px 12px}
  .towns li{font-size:13.5px}
  /* L'indice passe sous le libellé plutôt que de casser la ligne en son milieu */
  .field__hint{display:block;margin-top:2px}
  .field{grid-template-columns:1fr}
  .field__val{text-align:left}
  .coords{grid-template-columns:1fr}
  .conf__g{grid-template-columns:1fr}
  /* Les chiffres tiennent en 2 colonnes même à 360 px : on garde la grille 2×2
     plutôt qu'une colonne unique qui allonge la page pour rien. */
  .proof{grid-template-columns:1fr}
  .proof li:nth-child(2n)::before{display:none}
  .proof li+li{border-top:1px solid var(--border-subtle)}
}

/* ── 18b. RÉVÉLATION AU DÉFILEMENT (100 % CSS) ─────────────────────────────────
   Animations pilotées par la position dans le viewport (animation-timeline).
   Aucune dépendance à JavaScript : si le navigateur ne connaît pas
   `animation-timeline: view()`, le contenu est simplement visible d'emblée. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes monte{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
    .sect .shead,
    .chain__i,.card,.temoin,.tool,.signature,.fleet,
    .calc__ctl,.calc__out,.rig__txt,.rig__p,.zone__txt,.zone__map,
    .stats,.contact__side,.contact__form{
      animation:monte .7s var(--ease-standard) both;
      animation-timeline:view();
      animation-range:entry 4% cover 26%;
    }
    /* Léger décalage pour que les grilles arrivent en cascade, pas en bloc */
    .chain__i:nth-child(2),.card:nth-child(2),.temoin:nth-child(2),.rig__p--b{animation-range:entry 1% cover 27%}
    .chain__i:nth-child(3),.card:nth-child(3),.temoin:nth-child(3),.rig__p--c{animation-range:entry 0% cover 29%}
    .card:nth-child(5){animation-range:entry 1% cover 27%}
    .card:nth-child(6){animation-range:entry 0% cover 29%}
  }
}

/* ── 19. MOUVEMENT RÉDUIT ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;
  }
  html.js .js-reveal{opacity:1;transform:none}
  .hero__gear{animation:none}
  .spin{animation:none;border-top-color:rgba(255,255,255,.35);border-right-color:#fff}
}

/* ── Impression : version lisible et économe ───────────────────────────────── */
@media print{
  .hdr,.callbar,.seam,.hero__gear,.skip,.calc__ctl,.tabs,.form__foot,.spin{display:none!important}
  body{background:#fff;color:#000}
  .sect,.sect--calc,.sect--rig,.sect--preuves,.sect--contact{background:#fff!important;padding:14pt 0}
  .sect::after{display:none}
  .h2,.hero__h1,.card__h,.foot__name{color:#000}
  .card,.chain__i,.temoin,.tool,.calc__out{border:1pt solid #888;box-shadow:none;background:#fff}
  p,li,dd{color:#222}
}