/* ============================================================
   Déneigement Roger — démo premium LuxAura Studio · VERSION 2 « NUIT »
   (7 août 2026 — la V1 reste intacte dans DEMOS/Deneigement-Roger-demo/)

   CE QUI CHANGE PAR RAPPORT À LA V1, ET POURQUOI :
   ① Valeur INVERSÉE — nuit dominante au lieu du blanc/bleu pâle. La V1
      n'était forte que dans ses 2 sections sombres ; United Carriers est
      noir à 80 % et fait de la lumière son sujet.
   ② Typo d'INSTRUMENT — Archivo Black (display massif) + Geist Mono
      (chiffres, étiquettes) au lieu de Playfair. Le déneigement se raconte
      en mesures : 5 cm, 5 h 30, 8 secteurs, 9 pieds de lame.
   ③ Le SUJET est montré — photo de machine plein cadre au héros, au lieu
      d'attendre 80 % du défilement.
   ④ Le blizzard devient VISIBLE : les flocons sont blancs, ils étaient
      peints sur du blanc.
   Les couleurs restent MESURÉES sur les photos (3 août) — c'est leur rôle
   qui change : le jaune de lame et le bleu de glace passent d'ornement à
   signal, sur fond de nuit.
   ============================================================ */

/* ---------- Racine fluide ACCESSIBLE ----------
   1rem = 10 px @1728px, suit le réglage de police du navigateur (WCAG 1.4.4).
   Le vw sec (0.5787vw) casserait ce réglage. */
html { font-size: clamp(0.611rem, 0.3125rem + 0.29vw, 0.72rem); }
@media (max-width: 991px) { html { font-size: clamp(0.611rem, 0.3125rem + 0.42vw, 0.72rem); } }
@media (max-width: 767px) { html { font-size: clamp(0.6rem, 0.47rem + 0.6vw, 0.72rem); } }
/* Les min des clamp garantissent les planchers CLAUDE.md en px RÉELS
   (corps ≥ 16 px mobile / ≥ 17,6 px desktop), quelle que soit la fenêtre. */

:root {
  /* ── Socle NUIT (le fond général est sombre — c'est l'inversion V2) ── */
  --neige: #0b0e13;    /* [USAGE : fond général de la page · fond des cartes] — ex-blanc */
  --glace: #10151c;    /* [USAGE : fonds sections Prix, Équipement, CTA · loader] — un ton au-dessus du fond */
  --glace-2: #161d26;  /* [USAGE : fonds alternés · cartes posées sur --glace] */
  --glace-3: #1e2632; /* [USAGE : réserve] */
  --encre: #e9eef4;    /* [USAGE : tout le texte principal] — glace claire, 15,8:1 sur --neige */
  --nuit: #06080b;     /* [USAGE : fonds les plus profonds — Pourquoi Roger · pied de page] */
  /* Le gris des textes secondaires. Trois états dans la journée du 7 août :
     rgba 0,58 (5,6:1 — « ne paraît pas », verdict de Yannick) · vert #00db2c
     (10,3:1, mais il se battait avec le jaune des boutons — essayé, écarté) ·
     et ce gris froid OPAQUE, 11,9:1. L'opacité pleine compte autant que la
     valeur : en rgba, la photo du héros transparaissait sous le kicker et le
     délavait. Reste sous --encre (15,8:1) pour garder la hiérarchie. */
  --note: #c3ccd6;   /* [USAGE : textes secondaires · légendes · kickers] */
  --bord: rgba(233, 238, 244, 0.14);   /* [USAGE : bordures fines cartes · séparateurs] */
  --bord-fort: rgba(233, 238, 244, 0.38); /* [USAGE : bordures boutons · champs de formulaire] */

  /* ── Accents : MESURÉS sur les photos (3 août), promus en signaux ── */
  --vert: #7fb2ff;     /* bleu de glace · [USAGE : RÉSERVE depuis le 7 août — les numéros de Pourquoi Roger et le soulignement des liens de contact sont passés au jaune. Le bleu de la carte a ses propres tokens --carte-*] */
  --vert-f: #f9c134;   /* JAUNE DE LAME Metal Pless (tracteur1.webp 0.345,0.635) · [USAGE : boutons pleins · liens · crochets · points radar] — 11,9:1 sur nuit */
  --vert-n: #ffd25e;   /* [USAGE : survol des boutons] */
  --jaune: #f9c134;    /* [USAGE : bandeau défilant · étoiles · anneaux de focus] */
  --jaune-2: #f9c134;  /* [USAGE : réserve] */
  --rouge: #ff4a5b;    /* souffleuse · [USAGE : réserve — 3 usages MAX] */
  --rouge-f: #e0384a;  /* [USAGE : réserve] */
  --brique: #e0384a;   /* [USAGE : réserve] */
  --phare: #ffe9a8;    /* [USAGE : halo des phares du héros · lueurs chaudes] */

  /* ── Typo d'INSTRUMENT (tokens attendus par la tweaks bar) ── */
  --police-titre: 'Archivo Black', Impact, sans-serif;               /* [USAGE : TOUS les titres · logo · chiffres géants · prix] */
  --police-corps: 'Geist', 'Inter', system-ui, sans-serif;           /* [USAGE : tout le texte courant] */
  --police-mono: 'Geist Mono', 'SF Mono', Consolas, monospace;       /* [USAGE : kickers · étiquettes · mesures · numéros de section] */
  /* Archivo Black porte ~35 % plus large que Playfair à taille égale : les
     plafonds baissent pour que « Chaque entrée » tienne sur sa ligne. */
  --h1-min: 4.4rem;     /* [USAGE : taille MINIMALE du grand titre du héros] */
  --h1-max: 8rem;       /* [USAGE : taille MAXIMALE du grand titre du héros] */
  --h1-graisse: 400;    /* Archivo Black est déjà noire à 400 · [USAGE : graisse de tous les titres] */
  --h1-interlettre: -0.025em; /* [USAGE : espacement des lettres des titres] — serré, patron United */
  --fs-corps:2.63rem; /* ⟵ réglage Yannick (tweaks bar, 3 août) */   /* ≈ 18 px réels @1728 · [USAGE : paragraphes · descriptions] */
  --fs-note:2.85rem; /* ⟵ réglage Yannick (tweaks bar, 3 août) */    /* [USAGE : notes · légendes · sous-textes] */
  --fs-ui:2.58rem; /* ⟵ réglage Yannick (tweaks bar, 3 août) */      /* [USAGE : boutons · liens de navigation] */
  --fs-badge:2rem; /* ⟵ réglage Yannick (tweaks bar, 3 août) */  /* [USAGE : kickers · mentions du pied de page] */

  /* ── La carte du héros — V2 : elle devient l'objet LUMINEUX sur la nuit
        (le rôle que joue le globe chez United Carriers) ── */
  --carte-neige: #b9d4f2;   /* [USAGE : carte : surface du Québec, haut] */
  --carte-glace: #5f7f9e;   /* [USAGE : carte : surface du Québec, bas · vitres des tracteurs] */
  --carte-flanc: #24313f;   /* [USAGE : carte : épaisseur 3D (flancs)] */
  --carte-fleche: #8bccfd;  /* [USAGE : carte : les 8 flèches et leurs pointes] */
  --carte-lueur: #3d7fc4;   /* [USAGE : carte : halo sous les flèches] */
  --carte-qg: #f9c134;      /* [USAGE : carte : point et pulsation du QG] — le gyrophare */
  --carte-pin: #8bccfd;     /* [USAGE : carte : pastilles des secteurs] */
  --carte-tracteur: #f9c134;/* [USAGE : carte : corps des 8 tracteurs] */
  --carte-cabine: #d8a72c;  /* [USAGE : carte : cabines des tracteurs] */
  --carte-lame: #ffe9a8;    /* [USAGE : carte : lames et jantes des tracteurs] */

  /* ── Layout ── */
  --pad-container:1.93rem; /* ⟵ réglage Yannick (tweaks bar, 3 août) */      /* [USAGE : marges latérales de toute la page] */
  --col-gap:3.6rem; /* ⟵ réglage Yannick (tweaks bar, 3 août) */            /* [USAGE : écart entre les colonnes et cartes] */
  --radius:1.97rem; /* ⟵ réglage Yannick (tweaks bar, 3 août) */           /* [USAGE : arrondi des cartes et boutons] */
  --bord-1: max(1px, 0.1rem); /* [USAGE : épaisseur de toutes les bordures] */
}
@media (max-width: 767px) {
  :root { --pad-container: 1.93rem; } /* aligné sur le réglage Yannick */
}

/* ---------- Polices auto-hébergées (bibliothèque Awwwards, OFL) ----------
   Aucune Google Fonts externe (règle CLAUDE.md) : 3 woff2 servis en local,
   41 Ko au total, contre 42 Ko pour les deux polices de la V1. */
@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

/* ---------- Reset court ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; }

/* Le clip sur body seul laissait la boîte de défilement de html s'élargir :
   sur téléphone la page glissait latéralement (débordement du héros — attrapé
   au test du 4 août). Les deux niveaux doivent clipper. */
html { overflow-x: clip; }
body {
  font-family: var(--police-corps);
  font-size: var(--fs-corps);
  line-height: 1.62;
  color: var(--encre);
  background: var(--neige);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ---------- Échelle de titres (patron United : uppercase, lh 1.05) ---------- */
.h0, .h1, .h2, .h3, .h4, h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: var(--h1-graisse);
  text-transform: uppercase;
  /* 1.05 (patron United) clippait les accents FRANÇAIS : le É de RÉSIDENTIEL
     touchait le kicker au-dessus (retour Yannick 3 août). L'anglais n'a pas
     d'accents ; le français exige plus d'air au-dessus des capitales. */
  line-height: 1.14;
  letter-spacing: var(--h1-interlettre);
}
.kicker + h1, .kicker + h2, .kicker + h3, .kicker + .h4 { margin-top: 1.4rem; }
/* Échelle redescendue d'un cran : Archivo Black porte beaucoup plus large que
   Playfair, et les titres de la séquence horizontale débordaient de leur
   panneau de 100vw. */
.h0 { font-size: 13rem; }
h1, .h1 { font-size: clamp(var(--h1-min), 8vw, var(--h1-max)); }
h2, .h2 { font-size: 5.6rem; }
h3, .h3 { font-size: 3.9rem; }
.h4 { font-size: 3.1rem; }
@media (max-width: 991px) {
  .h0 { font-size: 8.6rem; }
  h2, .h2 { font-size: 4.2rem; }
  h3, .h3 { font-size: 3.1rem; }
}

/* V2 : tous les kickers passent en mono — étiquette d'instrument, pas titre. */
.kicker {
  font-family: var(--police-mono);
  font-size: var(--fs-badge);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--note);
}
/* Le trait court devant l'étiquette : repère de relevé, emprunté au patron
   United Carriers (leurs libellés de section portent le même). */
.kicker::before {
  content: ''; display: inline-block; width: 2.4rem; height: 1px;
  margin-right: 1.2rem; vertical-align: 0.35em; background: var(--vert-f);
}
.note { font-size: var(--fs-note); color: var(--note); }

/* ---------- Grille 16 colonnes full-bleed (patron United) ---------- */
.grille {
  display: grid;
  grid-template-columns:
    [pleine-deb] minmax(var(--pad-container), 1fr)
    [contenu-deb] repeat(16, minmax(0, 8.4rem))
    [contenu-fin] minmax(var(--pad-container), 1fr)
    [pleine-fin];
  column-gap: var(--col-gap);
}
.grille > * { grid-column: contenu-deb / contenu-fin; }
.pleine { grid-column: pleine-deb / pleine-fin; }

section { position: relative; }
/* Chaque section RÉ-ÉVALUE la couleur de texte localement : sans ça, la
   couleur héritée de body resterait figée et la vue « par section » de la
   tweaks bar ne pourrait pas re-teinter le texte d'UNE seule section. */
header.nav, main > [id], .piste-hiver [id] { color: var(--encre); }
/* (#pourquoi et footer.pied redéclarent déjà la leur plus bas — même effet) */
.section-pad { padding-block: 12rem; }
@media (max-width: 767px) { .section-pad { padding-block: 7rem; } }

/* ---------- Boutons (plat, prononcé) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 3rem;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: var(--bord-1) solid transparent;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
  min-height: 4.4rem;
}
.btn:active { transform: translateY(1px); }
.btn-plein { background: var(--vert-f); color: var(--neige); }
.btn-plein:hover { background: var(--vert-n); }
.btn-contour { border-color: var(--bord-fort); color: var(--encre); }
.btn-contour:hover { border-color: var(--encre); }

/* ---------- Utilitaires ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.sep-congere { width: 100%; height: auto; color: var(--glace); }

/* ============================================================
   SECTIONS
   ============================================================ */

/* ---------- S0 Loader ---------- */
#chargement {
  position: fixed; inset: 0; z-index: 90;
  background: var(--nuit);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--pad-container);
}
#chargement .chargement-compteur {
  font-family: var(--police-mono); color: var(--vert-f); line-height: 1;
}
.chargement-secteurs {
  display: flex; flex-direction: column; gap: 0.6rem; overflow: hidden;
  height: 3em; text-align: right; font-family: var(--police-mono); font-size: var(--fs-ui);
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--note);
}
/* Ligne d'horizon qui se remplit pendant le décompte : on voit la route se
   dégager, ce n'est pas juste une attente. */
#chargement::after {
  content: ''; position: absolute; left: var(--pad-container); right: var(--pad-container);
  bottom: calc(var(--pad-container) - 1rem); height: 1px; background: var(--bord);
}

/* ---------- Nav ---------- */
/* V2 : la barre ne pose plus un bandeau opaque sur la photo du héros. Elle est
   transparente en haut de page et se voile dès qu'on défile (classe .nav-fond
   posée par premium.js). */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.8rem var(--pad-container);
  background: transparent;
  border-bottom: var(--bord-1) solid transparent;
  transition: background-color 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
.nav.nav-fond {
  background: color-mix(in srgb, var(--nuit) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--bord);
}
.nav-logo {
  font-family: var(--police-titre); font-size: 2rem; letter-spacing: 0.02em;
  text-decoration: none; text-transform: uppercase;
}
.nav-logo span { color: var(--vert-f); }
.nav nav { display: flex; align-items: center; gap: 2.8rem; }
.nav-liens { display: flex; align-items: center; gap: 2.8rem; }
.nav nav a:not(.btn) {
  font-family: var(--police-mono);
  font-size: var(--fs-ui); font-weight: 500; text-decoration: none;
  letter-spacing: 0.12em; text-transform: uppercase;
}
/* Le bouton du menu n'existe qu'en petite largeur (voir la media query). */
.nav-burger { display: none; }
.nav nav a:not(.btn):hover { color: var(--vert-f); }
.nav-cta { padding: 1rem 2rem; min-height: 0; }
/* ---------- Menu mobile ----------
   Jusqu'au 7 août, les trois liens étaient simplement masqués sous 768 px :
   sur téléphone, on ne pouvait atteindre Prix, Secteurs et Questions qu'en
   faisant défiler toute la page. Le panneau ci-dessous les rend cliquables. */
@media (max-width: 767px) {
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 0.5rem; width: 4.4rem; height: 4.4rem; padding: 1rem;
    border: var(--bord-1) solid var(--bord); border-radius: var(--radius);
  }
  .nav-burger span {
    display: block; height: max(2px, 0.2rem); width: 100%;
    background: var(--encre); border-radius: 1px;
    transition: transform 0.28s, opacity 0.2s;
  }
  /* Trois barres qui deviennent une croix : l'état ouvert doit se voir. */
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.7rem) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.7rem) rotate(-45deg); }

  .nav nav { gap: 1.2rem; }
  .nav-liens {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: color-mix(in srgb, var(--nuit) 96%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: var(--bord-1) solid var(--bord);
    /* Fermé = replié à zéro, sans display:none : la transition reste possible
       et le contenu sort du parcours de tabulation grâce à visibility. */
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.32s ease, visibility 0.32s;
  }
  .nav.menu-ouvert .nav-liens { max-height: 60vh; visibility: visible; }
  .nav-liens a {
    padding: 2rem var(--pad-container);
    border-top: var(--bord-1) solid var(--bord);
  }
}

/* ---------- S1 Héros + carte ---------- */
.hero {
  min-height: 100svh; align-items: center; padding-top: 12rem; padding-bottom: 6rem;
  overflow: clip; background: var(--nuit);
}
/* Photo plein cadre : elle porte l'ambiance, jamais la lecture. Le voile est
   assez fort pour garder le H1 à 12:1 même sur la partie la plus claire de
   l'image (la neige au soleil). */
/* pleine-deb/pleine-fin : dans une grille, un enfant absolu s'ancre sur SA zone
   de grille — sans ça la photo restait dans les marges de contenu. Hauteur
   bornée au premier écran : c'est là que la machine doit être vue. */
.hero-fond {
  position: absolute; grid-column: pleine-deb / pleine-fin;
  inset: 0 0 auto 0; height: 100svh; z-index: 0; overflow: clip;
}
.hero-fond img {
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 74%;
  filter: grayscale(0.22) brightness(0.78) contrast(1.06) saturate(0.85);
}
/* Le voile SCULPTE la scène en trois temps : sombre à gauche (le titre doit
   rester à 12:1), ouvert au centre (la machine, c'est le sujet), refermé à
   droite (la carte doit briller sur du noir, jamais sur une photo). */
/* Quatre voiles s'ADDITIONNENT : mesuré au rendu, la version précédente
   cumulait ~0,9 d'opacité sur la machine et la faisait disparaître. Valeurs
   retenues après contrôle écran (photo éteinte = héros mort, photo nue =
   titre illisible). */
/* ⚠️ Jamais `transparent` dans ces dégradés : en CSS il vaut rgba(0,0,0,0),
   donc l'interpolation traverse du NOIR et éteint la photo — c'est ce qui a
   fait disparaître la machine deux fois le 7 août. On écrit la couleur du
   voile en alpha 0 (rgba(6,8,11,0)) pour que la transition reste propre. */
.hero-fond::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(44rem 32rem at 46% 56%, rgba(255, 233, 168, 0.14), rgba(255, 233, 168, 0) 64%),
    linear-gradient(100deg,
      rgba(6, 8, 11, 0.9) 0%, rgba(6, 8, 11, 0.66) 24%,
      rgba(6, 8, 11, 0.1) 48%, rgba(6, 8, 11, 0.24) 64%,
      rgba(6, 8, 11, 0.78) 80%, rgba(6, 8, 11, 0.92) 100%),
    linear-gradient(to bottom, rgba(6, 8, 11, 0.66) 0%, rgba(6, 8, 11, 0) 12%),
    linear-gradient(to top, rgba(6, 8, 11, 0.9) 0%, rgba(6, 8, 11, 0) 14%);
}
.hero-texte { grid-column: contenu-deb / span 9; position: relative; z-index: 3; }
.hero-h1 .ligne { display: block; overflow: hidden; white-space: nowrap; }
.hero-h1 { font-size: clamp(var(--h1-min), 5.5vw, var(--h1-max)); }
/* Le texte du héros passe sur une photo dont la neige est claire : ombre
   portée douce pour tenir la lisibilité partout, quel que soit le cadrage. */
.hero-texte .kicker, .hero-h1, .hero-sous { text-shadow: 0 0.2rem 1.6rem rgba(6, 8, 11, 0.8); }
.hero-sous {
  margin-top: 2.4rem; font-family: var(--police-mono); font-size: var(--fs-note);
  color: rgba(233, 238, 244, 0.88); letter-spacing: 0.02em;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 3.6rem; }

/* Relevé de la nuit — le métier parle en mesures, la typo mono le dit. */
.hero-releve {
  display: flex; flex-wrap: wrap; gap: 0 5rem; margin-top: 5rem;
  padding-top: 2.4rem; border-top: var(--bord-1) solid var(--bord);
  font-family: var(--police-mono);
}
.hero-releve dt {
  font-size: var(--fs-badge); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--note);
}
.hero-releve dd { margin-top: 0.5rem; font-size: 3.2rem; color: var(--vert-f); }
@media (max-width: 767px) {
  .hero-releve { gap: 0 3rem; margin-top: 3.4rem; }
  .hero-releve dd { font-size: 2.6rem; }
}

/* La carte grossit ×2,2 au défilement et son SVG est en overflow:visible (pour
   ne pas couper les étiquettes) : sans clip sur la section, elle débordait de
   480 px en 390 px de large. Dans le héros, le clip existait déjà — il est
   parti avec le déménagement. */
#secteurs { overflow: clip; }

/* ---------- La carte du Québec — DÉPLACÉE dans « Zone desservie » (V2) ----------
   Dans le héros, elle se battait avec la photo de la machine pour le même coin
   d'écran, et ses noms de secteurs étaient illisibles à cette taille. Ici elle
   est deux fois plus grande, seule sur la nuit, et elle remplace le radar
   décoratif qui ne disait rien (supprimé). */
.carte-secteurs {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.carte-secteurs::before {
  content: ''; position: absolute; inset: -10% -14%; z-index: -1;
  background: radial-gradient(closest-side, rgba(61, 127, 196, 0.16), transparent 78%);
  pointer-events: none;
}
.carte-scene { perspective: 1400px; width: min(56rem, 100%); }
.carte {
  width: 100%; height: auto;
  transform: rotateX(38deg) rotateZ(-14deg);
  transform-style: preserve-3d;
  overflow: visible; /* le zoom A+ déborde du viewBox : ne jamais couper les étiquettes */
  /* V2 : la carte est la source de lumière de l'écran, pas un aplat gris. */
  filter: drop-shadow(0 0 3rem rgba(139, 204, 253, 0.28));
}
.carte-note { margin-top: 0.8rem; text-align: center; }
.carte-glow {
  position: absolute; border-radius: 50%; z-index: -1;
  filter: blur(clamp(20px, 4vw, 48px));
  pointer-events: none;
}
/* V2 : les halos passent du blanc laiteux (invisible sur blanc) au bleu de
   glace et au jaune de gyrophare — sur la nuit, ils font l'aura. */
.carte-glow.g1 {
  width: 52rem; height: 52rem; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(61, 127, 196, 0.5), rgba(61, 127, 196, 0) 70%);
  animation: glow-derive-a 22s ease-in-out infinite alternate;
}
.carte-glow.g2 {
  width: 30rem; height: 30rem; left: 22%; top: 66%;
  background: radial-gradient(circle, rgba(249, 193, 52, 0.22), rgba(249, 193, 52, 0) 70%);
  animation: glow-derive-b 19s ease-in-out infinite alternate;
}
.carte-glow.g3 {
  width: 26rem; height: 26rem; left: 62%; top: 18%;
  background: radial-gradient(circle, rgba(139, 204, 253, 0.42), rgba(139, 204, 253, 0) 72%);
  animation: glow-derive-a 26s ease-in-out infinite alternate-reverse;
}
@keyframes glow-derive-a {
  from { transform: translate(-50%, -50%) translate(-2rem, 1rem); opacity: 0.75; }
  to   { transform: translate(-50%, -50%) translate(2.5rem, -1.5rem); opacity: 1; }
}
@keyframes glow-derive-b {
  from { transform: translate(-1.5rem, 0); opacity: 0.6; }
  to   { transform: translate(1.5rem, -2rem); opacity: 0.95; }
}
/* Le CSS gagne toujours sur les attributs de présentation SVG : ces règles
   branchent la carte sur les tokens --carte-* (éditables à la tweaks bar). */
#qc-flanc use { fill: var(--carte-flanc); }
#qc-flanc use:nth-child(2) { fill: color-mix(in srgb, var(--carte-flanc) 95%, white); }
#qc-flanc use:nth-child(3) { fill: color-mix(in srgb, var(--carte-flanc) 89%, white); }
#qc-flanc use:nth-child(4) { fill: color-mix(in srgb, var(--carte-flanc) 83%, white); }
#qc-flanc use:nth-child(5) { fill: color-mix(in srgb, var(--carte-flanc) 77%, white); }
#qc-flanc use:nth-child(6) { fill: color-mix(in srgb, var(--carte-flanc) 71%, white); }
#qc-flanc use:nth-child(7) { fill: color-mix(in srgb, var(--carte-flanc) 65%, white); }
#qc-province > use { stroke: var(--carte-glace); }
.fleche { stroke: var(--carte-fleche); }
.fleche-lueur { stroke: var(--carte-lueur); }
.qg-halo, .qg-point { stroke: var(--carte-qg); }
.qg-point { fill: var(--carte-qg); }
.pins { fill: var(--carte-pin); }
/* V2 : les plaques étaient blanches à texte encre — sur la nuit, elles
   faisaient huit taches de papier. Elles deviennent des étiquettes rétro-
   éclairées, en mono, comme les repères de carte d'United Carriers. */
.etiquette rect { fill: rgba(6, 8, 11, 0.82); stroke: var(--carte-lueur); }
.etiquettes { fill: var(--carte-neige); font-family: var(--police-mono); font-size: 17px; }

/* (jamais de transform-origin CSS sur .qg-halo : GSAP gère l'origine en
   coordonnées viewBox — la double origine détachait l'anneau de la carte) */
.pin, .etiquette { opacity: 0; }
.tracteur { opacity: 0; }
@media (max-width: 991px) {
  .hero { padding-top: 12rem; }
  /* .carte-secteurs a quitté le héros : elle vit dans .secteurs-flex, où les
     lignes nommées contenu-deb/contenu-fin n'existent pas. Les lui imposer
     créait des colonnes implicites (la grille passait à 3 colonnes et la carte
     se retrouvait collée à droite de la liste). */
  .hero-texte { grid-column: contenu-deb / contenu-fin; }
  .carte-scene { width: min(52rem, 84vw); }
  /* Empilé, le héros dépasse un écran : la photo couvre les deux tiers hauts
     et se fond dans la nuit, au lieu de s'arrêter net au milieu du texte. */
  .hero-fond { height: 78svh; }
}
@media (max-width: 767px) {
  /* « Chaque entrée » en nowrap à la taille desktop débordait de l'écran :
     Archivo Black demande sa propre échelle en petite largeur. */
  .hero-h1 { font-size: clamp(2.9rem, 8.8vw, 4.6rem); }
  .hero-fond img { object-position: 62% 62%; }
  .hero-fond::after {
    background:
      linear-gradient(to bottom, rgba(6, 8, 11, 0.86) 0%, rgba(6, 8, 11, 0.42) 28%,
                      rgba(6, 8, 11, 0.66) 60%, rgba(6, 8, 11, 0.96) 90%);
  }
}

/* ---------- S2 Intro 2 temps ---------- */
.intro-bloc { grid-column: contenu-deb / span 13; }
.intro-l1 { color: var(--note); }
.intro-l2 { color: var(--encre); }
.intro-p { max-width: 62rem; margin-top: 3.2rem; }

/* ---------- S3 Chiffres ---------- */
.chiffres-grille {
  grid-column: contenu-deb / contenu-fin;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap);
  border-top: var(--bord-1) solid var(--bord);
}
.chiffre { padding-top: 3rem; border-right: var(--bord-1) solid var(--bord); padding-right: 2rem; }
.chiffre:last-child { border-right: 0; }
.chiffre-val { color: var(--vert-f); }
.chiffre-lib { font-size: var(--fs-note); color: var(--note); max-width: 24rem; }
@media (max-width: 767px) {
  .chiffres-grille { grid-template-columns: 1fr; }
  .chiffre { border-right: 0; border-bottom: var(--bord-1) solid var(--bord); padding-bottom: 2rem; }
  .chiffre:last-child { border-bottom: 0; }
}

/* ---------- S2-S4 : la séquence (blizzard + écrans) ----------
   Depuis le 4 août 2026, la zone intro → services vit dans .piste-hiver
   (séquence HORIZONTALE desktop, bloc dédié plus bas). Les règles ici sont
   le SOCLE commun + le repli vertical (mobile, tier statique, sans JS). */
#services { background: var(--glace); }
.blizzard {
  position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none;
}
.blizzard canvas { position: sticky; top: 0; width: 100%; height: 100vh; }
.neige-arriere { filter: blur(2.5px); }
.neige-avant { margin-top: -100vh; }
.ecran {
  min-height: 100vh;
  display: flex; align-items: center;
  /* Voile LÉGER : le blizzard doit se voir (retour Yannick 3 août, 2e passe —
     88 % l'étouffait). Les écrans étant désormais côte à côte (plus de
     superposition sticky), le texte-fantôme n'existe plus. */
  background: color-mix(in srgb, var(--glace) 42%, transparent);
}
/* (Tracteur du défilement + route : retirés le 4 août au soir — stand-by.) */
.ecran-contenu { grid-column: contenu-deb / contenu-fin; padding-block: 10rem; width: 100%; }
.cartes-prix {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap);
  margin-top: 4rem;
}
.carte-prix {
  background: var(--neige); border: var(--bord-1) solid var(--bord);
  border-radius: var(--radius); padding: 3.2rem;
  transition: border-color 0.3s, transform 0.3s;
}
.carte-prix:hover { border-color: var(--bord-fort); transform: translateY(-0.4rem); }
.carte-desc { margin-top: 1.2rem; font-size: var(--fs-note); color: var(--note); }
.carte-montant { margin-top: 2.4rem; font-size: var(--fs-note); color: var(--note); }
/* Prix en jaune de lame (demande de Yannick, 7 août) : ils rejoignent les
   chiffres géants et les crochets, et deviennent le point de fixation de la
   section — c'est l'information qu'on vient y chercher. */
.carte-montant .prix {
  font-family: var(--police-titre); font-size: 4.2rem; color: var(--vert-f);
  margin-right: 0.6rem; letter-spacing: 0.01em;
}
.inclus-liste { margin-top: 4rem; max-width: 72rem; }
.inclus-liste li {
  padding: 2.2rem 0 2.2rem 4.4rem; position: relative;
  border-bottom: var(--bord-1) solid var(--bord); font-size: 2rem;
}
.inclus-liste li::before {
  content: ''; position: absolute; left: 0; top: 2.9rem;
  width: 2.4rem; height: 1.2rem;
  border-left: 0.35rem solid var(--vert-f); border-bottom: 0.35rem solid var(--vert-f);
  transform: rotate(-45deg);
}
@media (max-width: 991px) {
  /* minmax(0,1fr) et non 1fr : un 1fr nu prend la taille MIN-CONTENT de la
     carte, qui dépassait le conteneur de 21 px (mot long en Archivo Black). */
  .cartes-prix { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- S5 Pourquoi (nuit) ---------- */
/* V2 : --glace et --neige sont devenus des FONDS sombres — les sections nuit
   prennent maintenant --encre comme couleur de texte. */
#pourquoi { background: var(--nuit); color: var(--encre); overflow: clip; }
#pourquoi .inverse { color: var(--encre); }
#pourquoi .kicker.inverse { color: var(--note); }
.pourquoi-lueur {
  position: absolute; width: 70rem; height: 70rem; left: 60%; top: 30%;
  background: radial-gradient(circle, rgba(168, 188, 203, 0.22), rgba(168, 188, 203, 0) 70%);
  animation: lueur-respire 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes lueur-respire {
  from { opacity: 0.5; transform: translate(-2rem, 0); }
  to   { opacity: 1; transform: translate(2rem, -3rem); }
}
.pourquoi-tete { grid-column: contenu-deb / span 10; margin-bottom: 5rem; }
.pourquoi-liste { grid-column: contenu-deb / span 12; }
.pourquoi-liste li {
  display: flex; gap: 2.8rem; align-items: baseline;
  padding: 2.6rem 0; font-size: 2.2rem; line-height: 1.45;
  border-bottom: var(--bord-1) solid rgba(223, 228, 233, 0.14);
}
/* Numéros en jaune de lame (7 août) : le bleu de glace n'existait plus que
   ICI et sur le soulignement des liens de contact — un orphelin qui attirait
   l'œil sur des repères d'ordre. Le bleu reste vivant là où il a un sens :
   la carte des secteurs (flèches, pastilles, halo). */
.pourquoi-num {
  font-family: var(--police-mono); font-size: var(--fs-badge); font-weight: 500;
  letter-spacing: 0.18em; color: var(--vert-f); flex-shrink: 0;
}

/* ---------- S6 Marquee ---------- */
.marquee {
  background: var(--jaune); color: var(--encre); overflow: clip;
  padding: 1.4rem 0; border-block: var(--bord-1) solid var(--bord);
}
.marquee-piste {
  display: flex; white-space: nowrap; width: max-content;
  animation: defile 30s linear infinite;
  font-size: var(--fs-ui); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase;
}
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- S7 Témoignages + passage du tracteur ---------- */
/* (padding-bottom 26rem retiré avec la traversée du tracteur, 4 août au soir) */
#temoignages { overflow: clip; }
.temoignages-grille {
  grid-column: contenu-deb / contenu-fin;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--col-gap);
  margin-top: 4rem;
}
.temoignage {
  border: var(--bord-1) solid var(--bord); border-radius: var(--radius);
  padding: 3.2rem; background: var(--neige);
}
.temoignage blockquote { margin-top: 1.6rem; font-size: 1.9rem; line-height: 1.55; }
.temoignage figcaption { margin-top: 2rem; font-size: var(--fs-note); color: var(--note); font-weight: 600; }
.passage {
  position: absolute; bottom: 2rem; left: 0; right: 0; height: 18rem;
  pointer-events: none; overflow: visible;
}
.tracteur-passe {
  position: absolute; bottom: 0; left: 0; width: 26rem; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 55%, #000 58%, transparent 92%);
          mask-image: radial-gradient(ellipse 62% 70% at 50% 55%, #000 58%, transparent 92%);
  will-change: transform;
}
.congere {
  position: absolute; bottom: 0; left: 0; width: 12rem; height: 5rem;
  background: radial-gradient(ellipse at 30% 100%, var(--neige) 55%, rgba(255, 255, 255, 0) 75%);
  transform-origin: left bottom; opacity: 0;
}
.panache { position: absolute; inset: 0; }
@media (max-width: 767px) {
  .temoignages-grille { grid-template-columns: 1fr; }
  .tracteur-passe { width: 17rem; }
}

/* ---------- S8 Équipement ---------- */
#equipement { background: var(--glace); }
.equipement-cartes {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap);
  padding: 5rem var(--pad-container) 0;
}
.equipement-carte {
  background: var(--neige); border: var(--bord-1) solid var(--bord);
  border-radius: var(--radius); overflow: clip;
}
.equipement-media { overflow: clip; aspect-ratio: 3 / 2; }
.equipement-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.equipement-info { padding: 3.2rem; }
.equipement-specs { margin-top: 1.8rem; }
.equipement-specs li {
  padding: 1.1rem 0 1.1rem 2.6rem; position: relative;
  font-size: var(--fs-note); border-bottom: var(--bord-1) solid var(--bord);
}
.equipement-specs li:last-child { border-bottom: 0; }
.equipement-specs li::before {
  content: ''; position: absolute; left: 0.2rem; top: 1.9rem;
  width: 1.1rem; height: 0.55rem;
  border-left: 0.25rem solid var(--vert-f); border-bottom: 0.25rem solid var(--vert-f);
  transform: rotate(-45deg);
}
@media (max-width: 991px) { .equipement-cartes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- S9 Secteurs + carte des 8 secteurs ---------- */
.secteurs-flex {
  grid-column: contenu-deb / contenu-fin;
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--col-gap);
  align-items: center; margin-top: 5rem;
}
.secteurs-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 2rem; }
.secteurs-liste li {
  font-family: var(--police-titre); font-size: 2.8rem; text-transform: uppercase;
  padding: 1rem 0; border-bottom: var(--bord-1) solid var(--bord);
}
/* (Le radar décoratif a été SUPPRIMÉ en V2 : la vraie carte des 8 secteurs
   prend sa place — un objet qui dit quelque chose au lieu d'un ornement.) */
.secteurs-note { grid-column: contenu-deb / contenu-fin; margin-top: 3rem; font-size: var(--fs-note); }
.secteurs-note a { color: var(--vert-f); font-weight: 600; }
@media (max-width: 767px) {
  .secteurs-flex { grid-template-columns: 1fr; }
  .secteurs-liste li { font-size: 2.2rem; }
}

/* ---------- S10 FAQ ---------- */
.faq-liste { grid-column: contenu-deb / span 12; margin-top: 4rem; }
.faq-item { border-bottom: var(--bord-1) solid var(--bord); }
.faq-item summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 2.4rem 5rem 2.4rem 0; font-size: 2rem; font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 1rem; top: 50%;
  width: 1.2rem; height: 1.2rem;
  border-right: 0.28rem solid var(--vert-f); border-bottom: 0.28rem solid var(--vert-f);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.3s;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item p { padding: 0 0 2.6rem; max-width: 68rem; color: var(--note); }

/* ---------- S11 CTA ---------- */
#cta { text-align: center; background: var(--glace); }
.cta-titre { grid-column: contenu-deb / contenu-fin; }
.cta-texte { grid-column: contenu-deb / contenu-fin; margin-top: 2.4rem; font-size: 2rem; }
.cta-btn { justify-self: center; grid-column: contenu-deb / contenu-fin; margin-top: 3.6rem; }

/* ---------- S12 Formulaire-offre ---------- */
.offre { grid-column: contenu-deb / span 11; }
.offre-sous { margin-top: 1.6rem; color: var(--note); }
.offre-form { margin-top: 4rem; position: relative; }
.offre-progression {
  height: 0.4rem; background: var(--glace); border-radius: 0.2rem;
  margin-bottom: 3.2rem; overflow: hidden;
}
.offre-barre {
  display: block; height: 100%; width: 20%;
  background: var(--vert-f); transition: width 0.4s;
}
.offre-etape { border: 0; }
.offre-etape legend { margin-bottom: 2.4rem; }
.offre-pastilles { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.offre-pastilles label { cursor: pointer; position: relative; }
.offre-pastilles input { position: absolute; opacity: 0; }
.offre-pastilles span {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem;
  padding: 1.4rem 2.2rem; border: var(--bord-1) solid var(--bord-fort);
  border-radius: var(--radius); font-size: var(--fs-ui); font-weight: 600;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
.offre-pastilles span b { font-family: var(--police-titre); font-size: 2.2rem; font-weight: 400; }
.offre-pastilles input:checked + span { background: var(--vert-f); border-color: var(--vert-f); color: var(--neige); }
.offre-pastilles input:focus-visible + span { outline: 0.3rem solid var(--jaune); outline-offset: 0.2rem; }
.offre-types span { min-width: 16rem; }
.offre-champ {
  width: min(38rem, 100%); padding: 1.6rem 2rem; font: inherit;
  border: var(--bord-1) solid var(--bord-fort); border-radius: var(--radius);
}
.offre-champ:focus-visible { outline: 0.3rem solid var(--jaune); outline-offset: 0.2rem; }
.offre-suivant { margin-top: 3.2rem; }
.offre-suivant:disabled { opacity: 0.35; cursor: not-allowed; }
.offre-recap { padding-top: 2rem; }
.offre-recap-detail { font-size: 2rem; margin: 1.2rem 0 0.6rem; }
.offre-recap-prix { color: var(--vert-f); margin-bottom: 2.8rem; }
.offre-recap .note { margin-top: 2rem; }

/* ---------- S13 Contact ---------- */
.contact-colonnes {
  grid-column: contenu-deb / contenu-fin;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 4rem;
  flex-wrap: wrap;
}
.contact-liste { margin-top: 2.8rem; }
.contact-liste li { padding: 0.9rem 0; font-size: 2rem; }
.contact-liste a { text-decoration-color: var(--vert-f); text-underline-offset: 0.4rem; }
.contact-sociaux { display: flex; gap: 1.6rem; }
.contact-sociaux a {
  display: grid; place-items: center; width: 4.8rem; height: 4.8rem;
  border: var(--bord-1) solid var(--bord-fort); border-radius: 50%;
  transition: border-color 0.3s, color 0.3s;
}
.contact-sociaux a:hover { border-color: var(--vert-f); color: var(--vert-f); }

/* ---------- S14 Pied ---------- */
/* overflow:clip — le rappel géant en filigrane est plus large que l'écran en
   mobile ; c'est voulu (il doit être coupé), mais sans clip il élargissait la
   page de 98 px. Bug hérité de la V1, trouvé à la QA scriptée du 7 août. */
.pied { background: var(--nuit); color: var(--encre); position: relative; overflow: clip; }
.pied .sep-congere { color: var(--nuit); position: absolute; top: 0; transform: translateY(-98%); }
.pied-interieur { padding-block: 10rem 4rem; }
.pied-rappel {
  grid-column: contenu-deb / contenu-fin;
  color: rgba(223, 228, 233, 0.1); line-height: 0.95;
}
.pied-nav {
  grid-column: contenu-deb / contenu-fin;
  display: flex; flex-wrap: wrap; gap: 2.8rem; margin-top: 5rem;
  font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: 0.08em;
}
.pied-nav a { text-decoration: none; }
.pied-nav a:hover { color: var(--vert-f); }
.pied-demo {
  grid-column: contenu-deb / contenu-fin;
  margin-top: 4rem; font-size: var(--fs-badge); color: var(--note);
}
.pied-demo a { color: var(--encre); }

/* ---------- S15 Légal (:target) ---------- */
.legal { display: none; background: var(--neige); color: var(--encre); }
.legal:target { display: block; }
.legal-interieur { max-width: 78rem; margin-inline: auto; padding: 8rem var(--pad-container); }
.legal-interieur h2 { margin-top: 3rem; }
.legal-interieur p { margin-top: 1.4rem; font-size: var(--fs-note); }
.legal-interieur a { color: var(--vert-f); }

/* ---------- Curseur FLOCON (pointeur fin seulement — idée Yannick 3 août) ---------- */
@media (pointer: fine) {
  .curseur {
    position: fixed; z-index: 99; width: 3rem; height: 3rem;
    pointer-events: none; top: -1.5rem; left: -1.5rem;
    color: var(--vert-f); opacity: 0;
    transition: transform 0.25s, color 0.25s, opacity 0.25s;
  }
  .curseur svg { width: 100%; height: 100%; animation: flocon-tourne 14s linear infinite; }
  .curseur.actif { opacity: 0.85; }
  .curseur.survole { transform: scale(1.55); color: var(--jaune); opacity: 1; }
  @keyframes flocon-tourne { to { transform: rotate(360deg); } }
}

/* ---------- Reduced motion : tout a l'etat final ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .pin, .etiquette, .tracteur, .congere { opacity: 1 !important; }
  .fleche { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ═══ SÉQUENCE HORIZONTALE (patron United Carriers — 4 août 2026) ═══
   Active seulement : desktop ≥768px ET html SANS .anim-statique (classe posée
   par premium.js quand reduced-motion / tier LuxAnim statique / GSAP absent).
   Partout ailleurs, le socle vertical ci-dessus fait le repli tout seul. */
@media (min-width: 768px) {
  html:not(.anim-statique) .piste-hiver { height: calc(100vh + 400vw); }
  html:not(.anim-statique) .piste-colle {
    position: sticky; top: 0; height: 100vh; overflow: clip;
  }
  html:not(.anim-statique) .piste {
    display: flex; width: max-content; position: relative; z-index: 1;
    height: 100%; will-change: transform;
  }
  html:not(.anim-statique) .piste > .panneau {
    width: 100vw; flex: 0 0 auto; min-height: 100vh; align-content: center;
  }
  html:not(.anim-statique) #services { display: flex; background: transparent; }
  html:not(.anim-statique) #services .ecran { width: 100vw; flex: 0 0 auto; }
  /* Le blizzard devient l'overlay du viewport sticky (le hack canvas-sticky
     du mode vertical n'a plus de sens ici) */
  html:not(.anim-statique) .blizzard canvas { position: absolute; inset: 0; height: 100%; }
  html:not(.anim-statique) .neige-avant { margin-top: 0; }
  /* (Règles route + tracteur retirées le 4 août au soir — stand-by.) */
}

/* ═══ MOBILE : la grille 16 colonnes se replie en UNE colonne ═══
   (7 août 2026 — bug hérité, trouvé à la QA scriptée en 390 px.)
   Le socle 16 colonnes garde ses 15 gouttières de 3,6 rem quelle que soit la
   largeur : ~520 px de vide sur un écran de 390. Les colonnes, elles, tombent
   à 0 (minmax(0,…)) — donc le contenu était poussé HORS de l'écran et coupé
   par le `overflow-x: clip` posé en urgence le 4 août. Le clip cachait le
   symptôme, pas la cause.
   Ici : une seule colonne de contenu, zéro gouttière, et TOUS les enfants
   ramenés sur cette colonne (sinon un `span 9` créerait des colonnes
   implicites et le débordement reviendrait par la porte d'à côté). */
@media (max-width: 767px) {
  .grille {
    grid-template-columns:
      [pleine-deb] var(--pad-container)
      [contenu-deb] minmax(0, 1fr)
      [contenu-fin] var(--pad-container) [pleine-fin];
    column-gap: 0;
  }
  .grille > * { grid-column: contenu-deb / contenu-fin; }
  .grille > .pleine, .grille > .hero-fond { grid-column: pleine-deb / pleine-fin; }

  /* ── Échelle de texte propre au mobile ──
     Les --fs-* du 3 août sont calibrés pour le desktop : reportés tels quels
     sur 390 px, le corps sortait à 26 px et le kicker prenait trois lignes.
     Valeurs ci-dessous en px RÉELS à 390 px de large (racine ≈ 9,9 px), toutes
     au-dessus des planchers CLAUDE.md : corps 17 px (min 16) · UI 15 px
     (min 12,8) · badges 13 px (min 12). */
  :root {
    --fs-corps: 1.72rem;  /* ≈ 17 px */
    --fs-note: 1.68rem;   /* ≈ 16,6 px */
    --fs-ui: 1.5rem;      /* ≈ 15 px */
    --fs-badge: 1.32rem;  /* ≈ 13 px */
  }
  /* La barre : le logo passait SOUS le bouton et se faisait recouvrir. */
  .nav { padding: 1.2rem var(--pad-container); gap: 1.2rem; }
  .nav-logo { font-size: 1.5rem; line-height: 1.15; }
  .nav-cta { padding: 0.9rem 1.6rem; white-space: nowrap; }
  .hero { padding-top: 9rem; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }

  /* Archivo Black en capitales déborde vite sur 390 px : les titres de section
     descendent d'un cran de plus que le palier 991 px. */
  h2, .h2 { font-size: 3.3rem; }
  h3, .h3 { font-size: 2.6rem; }

  /* Le relevé en flex donnait 2 + 1 en quinconce ; en grille, les trois
     colonnes s'alignent, libellé au-dessus de sa valeur. */
  .hero-releve { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.4rem; }

  /* « SAINTE-SCHOLASTIQUE » cassait en deux dans une demi-colonne : la liste
     des secteurs passe sur une seule colonne. */
  .secteurs-liste { grid-template-columns: 1fr; }
  .secteurs-liste li { font-size: 2rem; }

  /* La carte à plat en mobile : inclinée à 38°, avec un SVG en overflow:visible,
     elle remontait par-dessus la liste des secteurs au lieu de rester dans sa
     rangée. À plat, elle s'inscrit dans sa boîte. */
  .carte { transform: none; filter: none; }
  .carte-scene { width: 100%; perspective: none; }
  .carte-secteurs { margin-top: 4rem; }

  /* Le rappel géant du pied faisait cinq lignes plein écran avant d'arriver
     aux liens : c'est un filigrane, pas une section. */
  .pied-rappel { font-size: 4.6rem; }
  .pied-interieur { padding-block: 6rem 3rem; }
}

/* ═══ TWEAKS PAR SECTION — VERSION 2 « NUIT » (7 août 2026) ═══
   ⚠️ Le bloc du 3 août (réglages tweaks bar de Yannick) forçait ici
   `--encre:#000000` sur l'entête et le héros, et `--glace:#8bccfd` sur sept
   sections : c'est LUI qui produisait le bleu ciel pâle de la V1, pas le socle.
   Il est conservé intact dans DEMOS/Deneigement-Roger-demo/ (la V1).
   Ci-dessous, les mêmes leviers, réglés pour la nuit — chaque section reçoit
   sa profondeur pour que le défilement respire au lieu d'être un aplat noir. */
#accueil {
  --glace: #10151c;
}
#services {          /* les prix : le palier le plus clair de la nuit */
  --glace: #131a23;
}
#pourquoi {          /* la tempête : le point le plus profond de la page */
  --vert: #8bccfd;
}
#equipement {
  --glace: #0f141b;
}
#secteurs {
  --vert: #8bccfd;
}
#cta {               /* l'appel : remonte d'un ton pour appeler le clic */
  --glace: #151d27;
}
#reserver {
  --glace: #10151c;
}
#contact {
  --vert: #8bccfd;
}