/* ============================================================================
   BATIPLUS — les blocs de l'accueil. Le hero vit dans la page elle-même ;
   ici commence tout ce qui vient après. Aucune couleur en dur : tout par les
   jetons de sa charte (tokens.css, généré depuis batiplus-isolation.json).
   ========================================================================== */

.bloc { position: relative; overflow: clip; }

/* L'ALTERNANCE SE FAIT PAR LES JETONS, PAS PAR DEUX PROPRIÉTÉS.
   `background` et `color` posés à la main laissaient --surface, --texte et
   --trait du thème sombre : un bloc « clair » portait des cartes noires
   (vu sur la dalle le 16/09). `data-mode="clair"` rebascule les 40 jetons,
   tokens.css sait déjà le faire. */
.bloc[data-mode="clair"] {
  background-color: var(--fond);
  background-image: var(--fond-degrade, none);
  color: var(--texte);
}

/* DEUX BLOCS DU MEME MODE QUI SE SUIVENT DOIVENT SE DISTINGUER. Sans cette regle
   ils portent le MEME fond et le MEME degrade : la seule chose qui marque la
   jonction est le redemarrage du degrade, un ecart de 17 points sur 255 qu'on ne
   lit pas comme une separation voulue (Youri, 17/09, sur la jonction entre « La
   zone » et « Les questions »). Le second prend alors la surface de la charte —
   le blanc en clair, la surface en sombre — plus un filet. La regle est
   generique : toute jonction de meme mode creee plus tard est couverte. */
.bloc[data-mode="clair"] + .bloc[data-mode="clair"] {
  background-color: var(--surface);
  background-image: none;
  border-top: 1px solid var(--trait);
}
.bloc:not([data-mode]) + .bloc:not([data-mode]) {
  background-color: var(--surface);
  border-top: 1px solid var(--trait);
}

.etiquette {
  font-family: Mono, monospace;
  font-size: var(--typo-echelle-etiquette-taille);
  letter-spacing: var(--typo-echelle-etiquette-tracking);
  text-transform: uppercase;
  color: var(--accent-clair);
  margin: 0 0 14px;
}
.bloc[data-mode="clair"] .etiquette { color: var(--accent); }

.bloc h2 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: .98; letter-spacing: -.022em;
  margin: 0 0 22px;
}
.bloc h2 em { font-style: normal; color: var(--accent-clair); }
.bloc[data-mode="clair"] h2 em { color: var(--accent); }

.bloc .corps {
  max-width: 54ch; margin: 0 0 16px;
  color: var(--texte-2); font-size: clamp(15.5px, 1.05vw, 17.5px); line-height: 1.62;
}
.bloc .corps b { color: var(--texte); font-weight: 500; }
.bloc .note {
  max-width: 54ch; margin: 22px 0 28px; padding-left: 16px;
  border-left: 2px solid var(--trait-fort);
  color: var(--texte-3); font-size: 14.5px; line-height: 1.6;
}

/* ───────────────────────────────────────────────────── le pied ── */
/* LE PIED PEINT LE FOND, DONC C'EST ICI QUE LE GROUPE COMMENCE. `isolation:
   isolate` enferme le `mix-blend-mode` du logo dans ce bloc : sans lui, il se
   fondrait avec tout ce qui est derriere dans la page. Meme correction qu'au
   hero le 17/09 au matin — l'isolation va sur le bloc qui peint, jamais sur
   l'image. */
.pied {
  background: var(--fond); border-top: 1px solid var(--trait); padding: 62px 0 40px;
  isolation: isolate;
}
.pied-haut {
  display: flex; flex-wrap: wrap; gap: 36px; align-items: center;
  justify-content: space-between; padding-bottom: 34px;
  border-bottom: 1px solid var(--trait);
}
/* LE LOGO SANS SON RECTANGLE. Le fichier est le bloc lumineux grave sur NOIR :
   pose tel quel, son rectangle se lisait sur le fond du pied — 50 points d'ecart
   au fond a l'interieur contre 0 au pourtour, mesure au revelateur (Youri, 17/09 :
   « on ne doit pas avoir de cadre fait comme tu as fait pour le hero »).
   En `screen`, le noir du fichier s'annule sur le fond et seul le halo reste. */
.pied-signe { width: 260px; height: auto; mix-blend-mode: screen; }
.pied-contact { display: grid; gap: 6px; }
.pied-contact a {
  color: var(--texte-2); text-decoration: none; font-size: 15px;
  display: inline-flex; align-items: center; min-height: 44px;
}
.pied-contact a:hover { color: var(--texte); }
.pied-tel {
  font-family: Mono, monospace; font-size: 22px !important; color: var(--texte) !important;
  letter-spacing: .02em;
}
.pied-contact p { margin: 6px 0 0; font-size: 13px; color: var(--texte-3); }

.pied-legal { padding: 30px 0 6px; }
.pied-legal dl {
  display: grid; gap: 14px 40px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pied-legal dt {
  font-family: Mono, monospace; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-3);
}
.pied-legal dd { margin: 5px 0 0; font-size: 14px; color: var(--texte-2); }
/* CE QUI MANQUE SE VOIT. On ne comble pas un trou légal avec du plausible. */
/* LA CLASSE `.manque` EST RETIREE AVEC SES DEUX LIGNES. Elle peignait en orange,
   avec un panneau d'avertissement, les mentions legales qui restaient a obtenir :
   un etat de chantier affiche au visiteur. Un site de client ne porte pas ses
   propres trous (17/09/2026). */

.pied-bas {
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
  margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--trait);
  font-size: 12.5px; color: var(--texte-3);
}

@media (max-width: 980px) {
  .b08, .b09 { padding: 74px 0 80px; }
  .b09-grille { grid-template-columns: 1fr; gap: 32px; }
  .b09-form { grid-template-columns: 1fr; padding: 22px; }
  .pied-signe { width: 200px; }
}

/* ═══════════════════════════ 02 · CE QU'IL Y A SOUS VOS PIEDS ══════════════
   LA COULEUR VIENT DE LA CHARTE, PAS D'UN CHOIX. `data-mode="clair"` sur la
   section rebascule les 40 jetons de tokens.css ; ici on ne pose aucune couleur
   de fond, on ajoute seulement le dégradé et les deux filets qui séparent le
   bloc du hero sombre au-dessus et du bloc sombre en dessous. (Youri, 17/09 :
   « des variations de couleurs pour ne pas rester uniquement en fond sombre ».)

   TOUTES LES ENVELOPPES SONT SUR `--large`. Le titre vivait dans 1 280 px et la
   scène dans 1 180 : 50 px de décrochement que personne ne voyait à l'œil, et
   que le détecteur de vide sait maintenant nommer (« enveloppes désalignées »).

   LA TAILLE DU TITRE SUIT SA COLONNE (cqw), jamais le viewport : plafonné en vw,
   il occupait 29 % de sa colonne sur un 2 560 et laissait 1 628 px de vide. */
.b02 {
  padding: clamp(72px, 8vh, 132px) 0 clamp(64px, 7vh, 108px);
  background-image:
    linear-gradient(180deg, #FFFFFF 0%, var(--fond) 46%, #E9EDF4 100%);
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ------------------------------------------------------- le titre et l'amorce
   Deux contenus sur une ligne : le titre à gauche, l'amorce à droite, calée sur
   sa dernière ligne de base. C'est ce qui remplit la largeur — élargir un
   paragraphe à 100 % ne la remplit pas, il devient illisible. */
.b02-tete {
  container-type: inline-size;
  display: grid; gap: 0 clamp(36px, 4vw, 96px);
  grid-template-columns: minmax(0, 1.72fr) minmax(270px, 1fr);
  align-items: end;
}
.b02-titre { min-width: 0; }
.b02-titre h2 {
  font-size: clamp(38px, min(7.5cqw, 9.6vh), 132px);
  line-height: .92; letter-spacing: -.03em;
  margin: 0; max-width: none;
}
.b02-amorce {
  margin: 0 0 clamp(6px, 1vh, 14px); color: var(--texte-2);
  font-size: clamp(16px, 1.55cqw, 23px); line-height: 1.5;
  max-width: 46ch;
}
.b02-amorce b { color: var(--texte); font-weight: 500; }

/* --------------------------------------------------------------- la scène
   Le dire à gauche, la planche à droite. Sur un 2 560 la planche prend 1 200 px
   et le dire 460 : la largeur est occupée par du contenu, pas par du vide. */
.b02-scene {
  margin-top: clamp(38px, 5vh, 76px);
  display: grid; gap: clamp(26px, 3vw, 58px);
  grid-template-columns: minmax(250px, .8fr) minmax(0, 2.5fr);
  align-items: start;
}
.b02-dire { display: flex; flex-direction: column; gap: 20px; }
.b02-dire p { margin: 0; color: var(--texte-2); font-size: clamp(14.5px, 1.05vw, 17px);
              line-height: 1.66; }
.b02-dire p b { color: var(--texte); font-weight: 500; }
.b02-dire .tenu {
  color: var(--texte-3); font-size: clamp(13px, .95vw, 15px);
  padding-left: 18px; border-left: 2px solid var(--trait-fort);
}
.b02-dire .lien-fort { margin-top: 6px; }

/* ------------------------------------------------ la planche : dessin + noms
   Les deux vivent dans la MÊME rangée de grille, donc la colonne des noms est
   étirée à la hauteur du dessin : c'est ce qui rend exacts les `--y` en %. Le
   pied (l'étape, le bouton, la note) est en dehors, sinon il fausserait tout. */
.b02-coupe { margin: 0; }
.b02-planche {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr) clamp(208px, 25.5%, 344px);
  align-items: stretch;
}
.b02-dessin {
  position: relative; aspect-ratio: 1000 / 720; min-width: 0;
  border: 1px solid var(--trait); border-right: 0; background: #FFFFFF;
  overflow: hidden;
}
.b02-dessin svg { display: block; width: 100%; height: 100%; }

/* les sept noms, chacun à la hauteur du centre de sa couche */
.b02-reperes {
  position: relative; list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.b02-reperes li {
  position: absolute; left: 0; right: 0; top: var(--y);
  transform: translateY(-50%);
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 8px; padding-left: 30px; cursor: default;
  opacity: 0;
}
/* LE TRAIT DE RAPPEL EST EN ABSOLU, jamais en `::before` de la grille : posé
   en cellule, il décalait chaque nom d'une ligne et mettait le numéro en face
   de la mauvaise légende (vu à l'écran le 17/09/2026). */
.b02-reperes li::before {
  content: ""; position: absolute; left: -22px; top: 50%;
  width: 46px; height: 1px; background: var(--trait-fort);
}
.b02-reperes b {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  font-family: Mono, monospace; font-weight: 400; font-size: 13px;
  color: var(--accent); background: var(--fond);
  position: relative; z-index: 2; text-align: center;
}
.b02-reperes i {
  grid-column: 2; grid-row: 1; font-style: normal;
  font-size: clamp(13px, .95vw, 15.5px); color: var(--texte); line-height: 1.24;
}
.b02-reperes em {
  grid-column: 2; grid-row: 2; font-style: normal;
  font-family: Mono, monospace; font-size: clamp(10.5px, .78vw, 12px);
  color: var(--texte-3); line-height: 1.3;
}
.b02-reperes .fort i { color: var(--accent); font-weight: 600; }
.b02-reperes .fort::before { background: var(--accent); height: 2px; }

/* ------------------------------------------------------------------ le pied */
.b02-pied {
  display: grid; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 20px; margin-top: 16px;
}
.b02-etape {
  grid-column: 1; margin: 0; min-height: 1.6em;
  display: grid; font-family: Mono, monospace;
  font-size: clamp(12.5px, .95vw, 15px); color: var(--accent);
}
.b02-etape span { grid-area: 1 / 1; opacity: 0; }
.b02-revoir {
  grid-column: 2; justify-self: end;
  font-family: Mono, monospace; font-size: 12.5px; color: var(--texte-3);
  background: none; border: 0; border-bottom: 1px solid var(--trait-fort);
  padding: 4px 0; min-height: 34px; cursor: pointer; opacity: 0;
  transition: color var(--mouvement-duree-court) var(--mouvement-courbe), opacity .4s;
}
.b02-revoir:hover { color: var(--accent); border-bottom-color: var(--accent); }
.b02-revoir:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.b02-coupe.joue .b02-revoir, .b02-coupe.pose .b02-revoir { opacity: 1; }
.b02-note {
  grid-column: 1 / -1; margin: 0; color: var(--texte-3);
  font-family: Mono, monospace; font-size: 11.5px; line-height: 1.4;
}

/* ═══════════════════════ LE PLANCHER SE CONSTRUIT ═══════════════════════════
   L'ordre est celui du chantier, de bas en haut. Au repos toutes les couches
   sont retirées ; `joue` les pose. Aucune couche n'apparaît par fondu seul :
   chacune arrive par le geste qui la pose vraiment — la mousse MONTE depuis le
   support, la chape BALAYE de gauche à droite, les carreaux se POSENT un par un.
   C'est ce qui rend l'animation lisible sans commentaire.

   LE VOLET est un rect de `clipPath` en unités utilisateur que l'on déplace :
   `clip-path: inset() fill-box` sur un groupe SVG n'est pas tenu partout, un
   `transform` sur un rect de clipPath l'est. */
.b02-dessin .couche, .b02-dessin .c-cote, .b02-dessin .c-mots { opacity: 0; }
#kr-mousse  { transform: translateY(246px); }     /* la mousse : rien de visible */
#kr-arase   { transform: translateX(-1010px); }
#kr-chape   { transform: translateX(-1010px); }
#kr-mortier { transform: translateX(-1010px); }
.b02-dessin .c-support { transform: translateY(16px); }
.b02-dessin .c-gaines .t { stroke-dasharray: 1100; stroke-dashoffset: 1100; }
.b02-dessin .c-cote .t { stroke-dasharray: 240; stroke-dashoffset: 240; }
.b02-dessin .carreau { opacity: 0; transform: translateY(-14px); }

@keyframes b02-parait  { to { opacity: 1; transform: none; } }
@keyframes b02-monte   { to { transform: translateY(0); } }
@keyframes b02-balaye  { to { transform: translateX(0); } }
@keyframes b02-trace   { to { stroke-dashoffset: 0; } }
@keyframes b02-carreau { to { opacity: 1; transform: translateY(0); } }
@keyframes b02-etape   { 0%,8% { opacity: 0; } 18%,82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes b02-repere  { to { opacity: 1; } }

.b02-coupe.joue .c-terre    { animation: b02-parait .5s var(--mouvement-courbe) 0s forwards; }
.b02-coupe.joue .c-support  { animation: b02-parait .55s var(--mouvement-courbe) .06s forwards; }
.b02-coupe.joue .c-gaines   { animation: b02-parait .01s linear .46s forwards; }
.b02-coupe.joue .c-gaines .t{ animation: b02-trace .75s var(--mouvement-courbe) .46s forwards; }
.b02-coupe.joue .c-mousse   { animation: b02-parait .01s linear 1.12s forwards; }
.b02-coupe.joue #kr-mousse  { animation: b02-monte 1.25s cubic-bezier(.34,.06,.42,.96) 1.12s forwards; }
.b02-coupe.joue .c-arase    { animation: b02-parait .01s linear 2.42s forwards; }
.b02-coupe.joue #kr-arase   { animation: b02-balaye .5s var(--mouvement-courbe) 2.42s forwards; }
.b02-coupe.joue .c-chape    { animation: b02-parait .01s linear 2.74s forwards; }
.b02-coupe.joue #kr-chape   { animation: b02-balaye .5s var(--mouvement-courbe) 2.74s forwards; }
.b02-coupe.joue .c-mortier  { animation: b02-parait .01s linear 3.02s forwards; }
.b02-coupe.joue #kr-mortier { animation: b02-balaye .34s var(--mouvement-courbe) 3.02s forwards; }
.b02-coupe.joue .c-carrelage{ animation: b02-parait .01s linear 3.22s forwards; }
.b02-coupe.joue .carreau    { animation: b02-carreau .34s var(--mouvement-courbe) forwards;
                              animation-delay: calc(3.22s + var(--n) * .075s); }
.b02-coupe.joue .c-cote     { animation: b02-parait .4s var(--mouvement-courbe) 3.62s forwards; }
.b02-coupe.joue .c-cote .t  { animation: b02-trace .55s var(--mouvement-courbe) 3.62s forwards; }
.b02-coupe.joue .c-mots     { animation: b02-parait .5s var(--mouvement-courbe) 3.74s forwards; }
.b02-coupe.joue .b02-reperes li {
  animation: b02-repere .45s var(--mouvement-courbe) var(--r) forwards;
}
.b02-reperes li:nth-child(7) { --r: .38s; }   /* le support */
.b02-reperes li:nth-child(6) { --r: .88s; }   /* les gaines */
.b02-reperes li:nth-child(5) { --r: 1.9s; }   /* la mousse, quand elle a fini de monter */
.b02-reperes li:nth-child(4) { --r: 2.58s; }  /* l'arase */
.b02-reperes li:nth-child(3) { --r: 2.9s; }   /* la chape */
.b02-reperes li:nth-child(2) { --r: 3.16s; }  /* le mortier */
.b02-reperes li:nth-child(1) { --r: 3.44s; }  /* le carrelage */

/* LA LIGNE QUI NOMME CE QUI SE PASSE. C'est elle qui rend la construction
   compréhensible : sans elle, on voit des formes arriver sans savoir de quoi il
   s'agit, ce qui était exactement le défaut de la version au cône. */
.b02-coupe.joue .b02-etape span:nth-child(1) { animation: b02-etape .55s linear .02s forwards; }
.b02-coupe.joue .b02-etape span:nth-child(2) { animation: b02-etape .62s linear .46s forwards; }
.b02-coupe.joue .b02-etape span:nth-child(3) { animation: b02-etape 1.3s linear 1.12s forwards; }
.b02-coupe.joue .b02-etape span:nth-child(4) { animation: b02-etape .36s linear 2.42s forwards; }
.b02-coupe.joue .b02-etape span:nth-child(5) { animation: b02-etape .54s linear 2.74s forwards; }
.b02-coupe.joue .b02-etape span:nth-child(6) { animation: b02-etape .4s linear 3.24s forwards; }
.b02-coupe.joue .b02-etape span.fin { animation: b02-repere .45s linear 3.62s forwards; }

/* ------------------------------------------ le nom et sa couche se répondent */
.b02-dessin .couche[data-n] { pointer-events: auto; }
.b02-scene[data-mise] .b02-dessin .couche[data-n]:not([data-n="0"]),
.b02-scene[data-mise] .b02-reperes li { opacity: .26; transition: opacity .2s; }
.b02-scene[data-mise="1"] .couche[data-n="1"], .b02-scene[data-mise="1"] li[data-n="1"],
.b02-scene[data-mise="2"] .couche[data-n="2"], .b02-scene[data-mise="2"] li[data-n="2"],
.b02-scene[data-mise="3"] .couche[data-n="3"], .b02-scene[data-mise="3"] li[data-n="3"],
.b02-scene[data-mise="4"] .couche[data-n="4"], .b02-scene[data-mise="4"] li[data-n="4"],
.b02-scene[data-mise="5"] .couche[data-n="5"], .b02-scene[data-mise="5"] li[data-n="5"],
.b02-scene[data-mise="6"] .couche[data-n="6"], .b02-scene[data-mise="6"] li[data-n="6"],
.b02-scene[data-mise="7"] .couche[data-n="7"], .b02-scene[data-mise="7"] li[data-n="7"] {
  opacity: 1;
}
.b02-reperes li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* LE VOILE DE MOUSSE. Il monte avec elle, et il s'efface quand on demande à voir
   les gaines : « noyées dans l'épaisseur » se montre, il ne s'écrit pas. */
.b02-dessin .c-voile { opacity: 0; }
.b02-coupe.joue .c-voile { animation: b02-parait .01s linear 1.12s forwards; }
.b02-coupe.pose .c-voile { opacity: 1; }
.b02-scene[data-mise="6"] .c-voile { opacity: 0; transition: opacity .25s; }

/* ÉTAT POSÉ : tout est en place, rien ne bouge. Sert à `prefers-reduced-motion`
   et à toute capture qui ne peut pas attendre la fin de la construction. */
.b02-coupe.pose .couche, .b02-coupe.pose .c-cote, .b02-coupe.pose .c-mots,
.b02-coupe.pose .carreau, .b02-coupe.pose .b02-reperes li,
.b02-coupe.pose .b02-etape span.fin { opacity: 1; }
.b02-coupe.pose .c-support, .b02-coupe.pose .carreau { transform: none; }
.b02-coupe.pose #kr-mousse, .b02-coupe.pose #kr-arase,
.b02-coupe.pose #kr-chape, .b02-coupe.pose #kr-mortier { transform: none; }
.b02-coupe.pose .c-gaines .t, .b02-coupe.pose .c-cote .t { stroke-dashoffset: 0; }
.b02-coupe.pose .c-voile { opacity: 1; }

.lien-fort {
  align-self: start; justify-self: start;
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-family: Archivo, system-ui, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; font-size: 15px;
  color: var(--accent-clair); text-decoration: none;
  border-bottom: 2px solid var(--accent);
  transition: gap var(--mouvement-duree-court) var(--mouvement-courbe);
}
.bloc[data-mode="clair"] .lien-fort { color: var(--accent); }
.lien-fort:hover { gap: 18px; }

/* --------------------------------------------------------------- adaptations */
@media (max-width: 1180px) {
  /* le dire passe sous la planche, en colonnes : la planche a besoin de toute
     la largeur pour que les sept noms restent lisibles. */
  .b02-scene { grid-template-columns: 1fr; }
  .b02-dire {
    order: 2; display: grid; gap: 22px 40px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    padding-top: 26px; border-top: 1px solid var(--trait);
  }
  .b02-coupe { order: 1; }
}
@media (max-width: 900px) {
  .b02-tete { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  /* SUR UNE COLONNE, CE QUI REND L'AMORCE LISIBLE EST SA TAILLE, pas un plafond de
     caracteres : borne a 54ch elle n'occupait que 63 % de ses 780 px sur iPad. */
  .b02-amorce { max-width: 68ch; font-size: clamp(18px, 2.5cqw, 23px); }
  /* LES NOMS PASSENT SOUS LE DESSIN. Accrochés à leur couche, ils demandent
     43 px d'écart minimum : sous 900 px la colonne n'en a plus. */
  .b02-planche { grid-template-columns: 1fr; }
  .b02-dessin { border-right: 1px solid var(--trait); }
  .b02-reperes { border-top: 0; }
  .b02-reperes li {
    position: static; transform: none; opacity: 1; animation: none !important;
    grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px;
    padding: 11px 0 11px 2px; border-bottom: 1px solid var(--trait);
  }
  .b02-reperes li::before { display: none; }
  .b02-reperes b { background: none; text-align: left; }
  .b02-reperes em { grid-column: 3; grid-row: 1; text-align: right; align-self: center; }
  /* UNE SEULE COLONNE, VRAIMENT. `grid-template-columns: 1fr` ne suffit pas : le
     bouton gardait `grid-column: 2`, ce qui recreait une colonne IMPLICITE, et
     l'etape comme la note se retrouvaient bornees a 236 px des 361 disponibles —
     la note en `1 / -1` comprise, puisque -1 designe la derniere ligne EXPLICITE
     (detecteur, 17/09/2026). */
  .b02-pied { grid-template-columns: 1fr; }
  .b02-etape, .b02-revoir, .b02-note { grid-column: 1; }
  .b02-revoir { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .b02-coupe .couche, .b02-coupe .c-cote, .b02-coupe .c-mots,
  .b02-coupe .carreau, .b02-coupe .b02-reperes li,
  .b02-coupe .b02-etape span.fin { opacity: 1 !important; animation: none !important; }
  .b02-coupe .c-support, .b02-coupe .carreau,
  #kr-mousse, #kr-arase, #kr-chape, #kr-mortier { transform: none !important; }
  .b02-coupe .c-gaines .t, .b02-coupe .c-cote .t { stroke-dashoffset: 0 !important; }
  .b02-coupe .c-voile { opacity: 1 !important; animation: none !important; }
  .b02-coupe .b02-etape span:not(.fin) { opacity: 0 !important; }
}
/* ═══════════════════════════════ 03 · CE QU'ON ISOLE ══════════════════════
   Le bloc DIT « lequel est le vôtre ». Sa forme est donc trois fiches lisibles
   d'affilée, chacune avec SA PREUVE en photo, et un lien qui remplit déjà la
   demande. Rien à voir avec le bloc précédent, qui construit une coupe.

   CE QUI A ÉTÉ RETIRÉ. Trois volets à coins arrondis dont la photo était le
   fond, écrasée à `brightness(.52)` sous un dégradé noir à 96 % — sur le
   premier on ne distinguait plus le chantier — et qui s'élargissaient au
   survol, ce qui ne répondait à aucune question. Plus une note interne posée
   en clair sur la page : « Dessin : aucune photo de soufflage à lui ». */
.b03 {
  padding: clamp(72px, 8vh, 124px) 0 clamp(64px, 7vh, 108px);
  background: linear-gradient(180deg, #05070D 0%, var(--fond) 34%, var(--fond) 100%);
}

/* le titre et le chapeau se partagent la ligne, comme au bloc 02 : le titre
   seul laissait 922 px de vide à droite sur un 1 440 (détecteur, 17/09). */
.b03-tete {
  container-type: inline-size;
  display: grid; gap: 0 clamp(36px, 4vw, 96px);
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  align-items: end;
}
.b03-titre { min-width: 0; }
.b03-titre h2 {
  font-size: clamp(38px, min(8cqw, 10.4vh), 132px);
  line-height: .92; letter-spacing: -.03em; margin: 0; max-width: none;
}
.b03-amorce {
  margin: 0 0 clamp(6px, 1vh, 14px); color: var(--texte-2);
  font-size: clamp(16px, 1.5cqw, 22px); line-height: 1.5; max-width: 46ch;
}
.b03-amorce b { color: var(--texte); font-weight: 500; }

/* ------------------------------------------------------------- les trois fiches
   TROIS COLONNES, PAS TROIS LIGNES (18/09/2026). « Dites lequel est le vôtre »
   est une question de choix, et un choix se fait en comparant : empilées, les
   trois fiches se lisaient l'une apres l'autre, sur 2 524 px de defilement, et
   chacune laissait 389 px de vide entre son texte et ses cas d'usage sur un
   2 560. Cote a cote, les trois titres se lisent d'un coup, la photo garde son
   format natif (regle 48 : 9/16, aucun recadrage) et il n'y a plus de colonne
   morte : la mesure d'apres est dans le bilan.

   LES CINQ RANGEES SONT ALIGNEES ENTRE LES TROIS COLONNES par `subgrid` : sans
   lui, « Sous-face, combles et hangars » sur deux lignes decalait sa photo de
   40 px par rapport aux deux autres, et l'oeil ne comparait plus rien. */
.b03-ouvrages {
  margin-top: clamp(38px, 5vh, 76px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(22px, 2.4vw, 52px);
  grid-template-rows: auto auto auto 1fr auto;
}
.ouvrage {
  position: relative; min-width: 0;
  /* PAS DE `container-type` ICI : un element confine en taille ne peut pas etre
     un `subgrid`, et le sien tombait en silence — mesure du 18/09 :
     `grid-template-rows` calcule a `none`, et 12 px d'ecart entre les rangees des
     trois colonnes. Les tailles de texte se calent donc sur le viewport, ce qui
     revient au meme ici : la colonne fait toujours le tiers de l'enveloppe. */
  grid-row: span 5; display: grid; grid-template-rows: subgrid; gap: 0;
  border-top: 1px solid var(--trait);
  padding-top: clamp(16px, 1.8vh, 26px);
  opacity: 0; transform: translateY(26px);
}
@supports not (grid-template-rows: subgrid) {
  .ouvrage { display: flex; flex-direction: column; }
}
.ouvrage-dire { display: contents; }
.b03-ouvrages.vu .ouvrage {
  animation: ouvrage-entre .7s var(--mouvement-courbe) forwards;
  animation-delay: calc(var(--i, 0) * .13s);
}
.ouvrage:nth-child(1) { --i: 0; } .ouvrage:nth-child(2) { --i: 1; } .ouvrage:nth-child(3) { --i: 2; }
@keyframes ouvrage-entre { to { opacity: 1; transform: none; } }

/* LE FILET D'ACCENT DÉSIGNE LA FICHE VISÉE, sans rien élargir ni assombrir. */
.ouvrage::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0;
  background: var(--accent);
  transition: width .45s var(--mouvement-courbe);
}
.ouvrage:hover::before, .ouvrage:focus-within::before { width: 100%; }

/* 1 · la tete : le numero et le nom de l'ouvrage, c'est ce qu'on compare */
.ouvrage-tete {
  margin: 0 0 clamp(14px, 1.6vh, 22px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.ouvrage-tete b {
  font-family: Mono, monospace; font-weight: 400; font-size: 12.5px;
  color: var(--accent-clair); letter-spacing: .18em;
}
/* DEUX LIGNES DE HAUT PARTOUT : « Sous-face, combles et hangars » en prend deux,
   les deux autres une seule, et le `subgrid` laissait alors 24 px d'ecart entre
   les textes des trois colonnes. Reserver la place aligne les cinq rangees. */
.ouvrage-tete span {
  font-family: Archivo, system-ui, sans-serif; font-weight: 900;
  text-transform: uppercase; letter-spacing: -.022em;
  font-size: clamp(20px, 2vw, 40px); line-height: .98; color: var(--texte);
  min-height: 1.96em;
}

/* 2 · la photo, en carre
   POURQUOI ON RECADRE ICI, ALORS QU'ON NE RECADRE PAS D'HABITUDE (regle 48).
   Le format natif de ces trois photos est le 9/16 d'un telephone tenu droit :
   c'est un accident de prise de vue, pas un choix. Dans une colonne de trois, ce
   format donnait 716 px de haut a 1 440 et 1 298 px a 2 560 — la photo ne se
   voyait plus en entier sur aucun ecran, et le bloc reprenait la hauteur qu'on
   venait de lui enlever. Le carre garde la bande centrale, ou se trouve le geste
   dans les trois cas, et rend la grille comparable d'un coup d'oeil. A verifier
   si une photo est remplacee : le sujet doit tenir au centre. */
.ouvrage-vue { margin: 0 0 clamp(16px, 1.8vh, 24px); position: relative; }
.ouvrage-vue img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: center;
  filter: saturate(.94);
  transition: filter .45s var(--mouvement-courbe);
}
.ouvrage:hover .ouvrage-vue img { filter: saturate(1.06) brightness(1.04); }
.ouvrage-vue figcaption {
  position: absolute; left: 10px; bottom: 10px;
  padding: 4px 9px; background: rgba(5, 7, 13, .72);
  font-family: Mono, monospace; font-size: 11px;
  color: #FFFFFF; letter-spacing: .04em;
}

/* 3 · ce que c'est · 4 · les cas · 5 · le lien */
.ouvrage-texte {
  margin: 0 0 clamp(14px, 1.6vh, 20px); color: var(--texte-2);
  font-size: clamp(14.5px, 1.06vw, 19px); line-height: 1.55;
}
.ouvrage-cas {
  list-style: none; margin: 0 0 clamp(16px, 1.8vh, 24px); padding: 0;
  display: grid; gap: 7px; align-content: start;
}
.ouvrage-cas li {
  position: relative; padding-left: 18px; color: var(--texte-3);
  font-family: Mono, monospace; font-size: clamp(12px, .84vw, 14.5px); line-height: 1.45;
}
.ouvrage-cas li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px; background: var(--accent-clair);
}
.ouvrage-lien { align-self: start; font-size: clamp(13.5px, .9vw, 16px); }

@media (max-width: 1080px) {
  .b03-tete { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .b03-amorce { max-width: 64ch; font-size: clamp(17px, 2.4cqw, 22px); }
  /* DEUX COLONNES PUIS UNE : a moins de 300 px de colonne, le nom de l'ouvrage
     se casse en quatre lignes et la photo ne prouve plus rien. */
  .b03-ouvrages { grid-template-columns: repeat(2, minmax(0, 1fr));
                  grid-template-rows: none; gap: clamp(30px, 4vh, 52px) clamp(22px, 3vw, 40px); }
  .ouvrage { grid-row: auto; display: flex; flex-direction: column; }
  .ouvrage-dire { display: contents; }
  .ouvrage-texte, .ouvrage-cas { max-width: 52ch; }
}
@media (min-width: 701px) and (max-width: 1080px) {
  /* PAS D'ORPHELINE : a deux colonnes, la troisieme fiche restait seule sur sa
     rangee, moitie de page vide a sa droite. Elle passe en pleine largeur, photo
     a gauche et dire a droite, ce qui remplit la rangee et donne du rythme. */
  .b03-ouvrages > .ouvrage:last-child {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(22px, 3vw, 40px);
  }
  .ouvrage:last-child .ouvrage-vue { grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0; }
  .ouvrage:last-child .ouvrage-tete,
  .ouvrage:last-child .ouvrage-texte,
  .ouvrage:last-child .ouvrage-cas,
  .ouvrage:last-child .ouvrage-lien { grid-column: 2; }
  .ouvrage:last-child .ouvrage-cas { margin-bottom: 18px; }
}
@media (max-width: 700px) {
  /* LA PHOTO PASSE PLEINE LARGEUR. À 200 px de large elle ne prouve plus rien,
     et c'est elle qu'on est venu voir. */
  .b03-ouvrages { grid-template-columns: 1fr; gap: clamp(34px, 5vh, 56px); }
  .ouvrage-vue img { aspect-ratio: 4 / 5; }
  .ouvrage-tete span { font-size: clamp(24px, 7.4vw, 34px); }
  .ouvrage-texte { font-size: 16px; }
  .ouvrage-cas li { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ouvrage { opacity: 1; transform: none; animation: none !important; }
  .ouvrage::before { transition: none; }
}
/* ═══════════════════════════════ 04 · LE PROCÉDÉ ══════════════════════════
   Le bloc DIT une référence, des seuils, des normes. Sa forme est donc celle
   d'une fiche de chantier : une règle graduée pleine largeur, des faits en
   bande, un tableau à filets. Aucune carte, aucun arrondi.

   LE FILIGRANE « S-383 HFO » est parti : posé à une opacité où il ne se lisait
   pas, il n'était ni un fond ni un titre. La règle est l'élément graphique du
   bloc, et elle suffit (règle 43). */
.b04 {
  position: relative; overflow: clip;
  padding: clamp(72px, 8vh, 124px) 0 clamp(64px, 7vh, 112px);
  /* AUCUNE COULEUR EN DUR ICI. `data-mode="clair"` rebascule les 40 jetons, mais un
     `background` pose a la main les ignore : le bloc serait reste noir avec un texte
     noir dessus. C'est la faute nommee en tete de ce fichier. */
  background-color: var(--fond);
  background-image: var(--fond-degrade, none);
  border-top: 1px solid var(--trait);
}
.b04-corps { position: relative; z-index: 1; }

/* le titre et le chapeau se partagent la ligne : l'entête tenait dans 588 px
   d'une colonne de 1 280, soit 692 px de vide à droite (mesuré le 17/09). */
.b04-entete {
  container-type: inline-size;
  display: grid; gap: 0 clamp(36px, 4vw, 96px);
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr);
  align-items: end; margin-bottom: clamp(38px, 5vh, 72px);
}
.b04-titre { min-width: 0; }
.b04-entete h2 {
  margin: 0; max-width: none;
  font-size: clamp(34px, min(6.6cqw, 9vh), 104px);
  line-height: .94; letter-spacing: -.028em;
}
.b04-dit {
  margin: 0 0 clamp(4px, .8vh, 12px); color: var(--texte-2);
  font-size: clamp(15.5px, 1.35cqw, 20px); line-height: 1.6; max-width: 50ch;
}
.b04-dit b { color: var(--texte); font-weight: 500; }

/* ------------------------------------------------------------------ la règle */
.reglette {
  border-top: 1px solid var(--trait-fort);
  padding-top: clamp(20px, 2.6vh, 30px);
}
/* TOUT RESTE GROUPÉ À GAUCHE. L'etiquette au-dessus du nombre, la borne juste
   apres : poussee par un `margin-left: auto`, elle rouvrait les 900 px de vide
   qu'on venait de fermer (vu a l'ecran le 17/09). */
.reglette-haut {
  display: flex; align-items: flex-end; gap: clamp(14px, 1.8vw, 30px); flex-wrap: wrap;
}
.reglette-titre {
  margin: 0 0 4px; font-family: Mono, monospace; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3);
  flex-basis: 100%;
}
/* LE NOMBRE VIENT CONTRE SON ÉTIQUETTE. Poussé à l'autre bout par un
   `space-between`, il laissait 900 px de rien au milieu de la ligne. */
.reglette output {
  font-family: Archivo, system-ui, sans-serif; font-weight: 900;
  font-size: clamp(48px, 5.4vw, 96px); line-height: .9; color: var(--texte);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.reglette output i {
  font-style: normal; font-family: Mono, monospace; font-weight: 400;
  font-size: clamp(14px, 1.1vw, 18px); color: var(--accent-clair); margin-left: 6px;
}
.reglette-bornes {
  margin: 0 0 clamp(6px, 1.4vh, 14px); font-family: Mono, monospace;
  font-size: clamp(13px, 1vw, 16px); color: var(--texte-3);
}

/* LA RÈGLE EST FAITE DE BANDES CSS. Le JS ne pose qu'une fraction, `--f` : la
   hauteur de mousse s'en déduit, et la matière ne s'étire jamais, quelle que
   soit la largeur. Un SVG à ratio fixe faisait 608 px de haut sur un 2 560. */
.regle {
  --sup: 62px;          /* le support, fixe */
  --min: 26px;          /* 25 mm  */
  --max: 190px;         /* 200 mm */
  --seuil: .5429;       /* (120 - 25) / 175 */
  position: relative; margin: clamp(16px, 2.4vh, 26px) 0 10px;
  height: calc(var(--sup) + var(--max));
  background: var(--surface); border: 1px solid var(--trait);
  overflow: hidden;
}
.regle-support {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--sup);
  /* LA COULEUR DE FOND EST POSEE EN PLUS DU MOTIF. Un fond fait d'un seul
     `background-image` est invisible pour le controle de contraste, qui remonte
     alors au premier fond OPAQUE au-dessus : « mousse projetee », noir sur creme,
     etait mesure a 1,00 contre le noir du bloc (17/09/2026). Le rendu ne change
     pas, et le texte reste lisible si le degrade ne se peint pas. */
  background-color: #C0C7D2;
  background-image:
    repeating-linear-gradient(126.6deg, #C0C7D2 0 12px, #A3ABBA 12px 13.4px);
  border-top: 2px solid #8DA0BB;
}
.regle-mousse {
  position: absolute; left: 0; right: 0; bottom: var(--sup);
  height: calc(var(--min) + var(--f, .314) * (var(--max) - var(--min)));
  transition: height .18s var(--mouvement-courbe);
  background-color: #E7DBB8;
  background-image:
    radial-gradient(circle at 8px 9px, rgba(255,255,255,.34) 4.6px, transparent 4.9px),
    radial-gradient(circle at 22px 21px, rgba(255,255,255,.26) 3.2px, transparent 3.5px),
    linear-gradient(180deg, #F3EAD5, #DCCAA0);
  background-size: 30px 30px, 30px 30px, 100% 100%;
  /* l'arase : elle est DRESSÉE, donc droite. Son liseré est plus soutenu que la
     mousse : sur le blanc de la règle en mode clair, une arase de la teinte du
     produit ne se détacherait plus du fond. */
  border-top: 5px solid #D7C49B;
}
.regle-mousse span, .regle-support span {
  position: absolute; left: 16px; font-family: Mono, monospace; font-size: 15px;
}
/* LE NOM EN BAS DE LA BANDE, pas au milieu : au milieu il croisait la ligne de
   seuil des que la mousse depassait 120 mm, et les deux textes se superposaient
   (vu a l'ecran a 175 mm, 17/09). En bas, la collision est impossible : au-dessus
   de 120 mm le seuil est a 114 px du fond, en dessous il est hors de la mousse. */
.regle-mousse span { bottom: 12px; color: #0A0E1A; }
/* LE NOM DU SUPPORT SE LIT SUR SON BETON, pas sur le fond du bloc. Sur la bande
   sombre il tombait a 4,44 avec --texte-3 ; sur le beton clair du mode clair, c'est
   l'encre du site qu'il lui faut. */
.regle-support span { bottom: 12px; color: var(--texte); }
/* sous 55 mm la bande ne fait plus 40 px : le nom passe au-dessus */
.regle.mince .regle-mousse span { bottom: auto; top: -26px; color: var(--texte-3); }

.regle-seuil {
  /* AU-DESSUS DE LA MOUSSE. Posee avant elle dans le DOM et sans z-index, la ligne
     de seuil disparaissait des que la mousse la depassait — c'est-a-dire exactement
     au moment ou elle a quelque chose a dire (vu a l'ecran a 200 mm, 17/09). */
  position: absolute; left: 0; right: 0; margin: 0; z-index: 3;
  bottom: calc(var(--sup) + var(--min) + var(--seuil) * (var(--max) - var(--min)));
  border-top: 1.6px dashed var(--accent-clair);
  pointer-events: none;
}
.regle-seuil span {
  position: absolute; left: 16px; bottom: 7px;
  font-family: Mono, monospace; font-size: 13.5px; color: var(--accent-clair);
  transition: color .2s;
}
/* FRANCHI : la mousse recouvre la ligne, donc l'étiquette passe au-dessus d'elle
   et change de ton. C'est ce qui rend le seuil visible au lieu de l'écrire. */
.regle.franchi .regle-seuil { border-top-color: rgba(10,14,26,.45); }
.regle.franchi .regle-seuil span { bottom: auto; top: 7px; color: #0A0E1A; }

.regle-cote {
  position: absolute; right: 22px; bottom: var(--sup); z-index: 4;
  height: calc(var(--min) + var(--f, .314) * (var(--max) - var(--min)));
  transition: height .18s var(--mouvement-courbe);
  border-left: 2px solid var(--accent-clair);
}
.regle-cote::before, .regle-cote::after {
  content: ""; position: absolute; left: -11px; width: 24px; height: 2px;
  background: var(--accent-clair);
}
.regle-cote::before { top: 0; }
.regle-cote::after { bottom: 0; }

.reglette input[type=range] {
  width: 100%; accent-color: var(--accent); margin: 6px 0 0; cursor: pointer;
}
.reglette-graduations {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: Mono, monospace; font-size: 12px; color: var(--texte-3);
}

/* LES TROIS REPÈRES DISENT CE QUE L'ÉPAISSEUR CHANGE. Ce sont les trois seuls
   faits que le document technique donne sur l'épaisseur : on n'en invente pas
   un quatrième, et « l'épaisseur courante » n'existe nulle part. */
.reglette-reperes {
  list-style: none; margin: clamp(20px, 2.6vh, 32px) 0 0; padding: 0;
  display: grid; gap: 14px clamp(24px, 3vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.reglette-reperes li {
  display: grid; gap: 3px; padding-top: 12px; border-top: 1px solid var(--trait);
}
.reglette-reperes b {
  font-family: Mono, monospace; font-weight: 400; font-size: 14px; color: var(--accent-clair);
}
.reglette-reperes span { color: var(--texte-3); font-size: clamp(13px, .95vw, 15.5px); line-height: 1.45; }
.reglette-reperes .repere-note b { color: var(--texte-2); }
.reglette-reperes .repere-note { border-top-color: var(--trait-fort); }

.reglette-faits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: clamp(24px, 3vh, 38px) 0 0;
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.reglette-faits > div { padding: 18px 22px 18px 0; border-right: 1px solid var(--trait); }
.reglette-faits > div:last-child { border-right: 0; }
.reglette-faits > div + div { padding-left: 22px; }
.reglette-faits dt {
  margin: 0 0 6px; font-family: Mono, monospace; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3);
}
.reglette-faits dd {
  margin: 0; font-family: Mono, monospace; font-size: clamp(16px, 1.3vw, 21px);
  color: var(--texte);
}

/* le tableau brut : des filets, pas des cartes */
.b04-recoit { margin: clamp(48px, 6vh, 80px) 0 0; display: grid; gap: 32px 56px;
              grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.b04-recoit h3 {
  grid-column: 1 / -1; margin: 0;
  font-family: Archivo, system-ui, sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(18px, 1.6vw, 26px); letter-spacing: -.01em;
}
table.brut { width: 100%; border-collapse: collapse; }
table.brut th, table.brut td {
  text-align: left; padding: 15px 0; border-bottom: 1px solid var(--trait);
  font-weight: 400; font-size: clamp(14.5px, 1.05vw, 17px); color: var(--texte);
}
table.brut td {
  text-align: right; font-family: Mono, monospace; font-size: 13px; color: var(--texte-3);
  white-space: nowrap; padding-left: 20px;
}
table.brut tr:first-child th, table.brut tr:first-child td { border-top: 1px solid var(--trait); }
.b04-recoit .tenu {
  margin: 0 0 20px; color: var(--texte-3); font-size: 14px; line-height: 1.6;
  padding-left: 18px; border-left: 2px solid var(--trait-fort);
}
.b04-recoit .tenu b { color: var(--texte-2); font-weight: 500; }

@media (max-width: 980px) {
  .b04-entete { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .b04-dit { max-width: 62ch; font-size: clamp(16px, 2.2cqw, 20px); }
  .b04-recoit { grid-template-columns: 1fr; gap: 26px; }
  .reglette-faits > div { border-right: 0; border-bottom: 1px solid var(--trait); padding: 14px 0; }
  .reglette-faits > div + div { padding-left: 0; }
  .reglette-faits > div:last-child { border-bottom: 0; }
}
@media (max-width: 700px) {
  .regle { --sup: 48px; --min: 20px; --max: 134px; }
  .regle-seuil span, .regle-mousse span, .regle-support span { font-size: 12px; left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .regle-mousse, .regle-cote { transition: none; }
}
/* ══════════════════════════ 04 bis · LA MACHINE ═══════════════════════════
   L'IMAGE EST LE FOND DU BLOC. Posee comme une piece au milieu d'un bloc noir,
   la jonction entre le fond et le haut de la photo se lisait comme une couture
   horizontale, quelle que soit la precision du raccord de couleur (Youri, 17/09 :
   « l'image doit etre en fond et les ecritures a gauche »). En fond, il n'y a
   plus deux zones a raccorder.

   LE TEXTE VIT DANS L'APLAT SOMBRE DE LA PHOTO, a gauche : c'est pour ca que ce
   bandeau a ete cadre ainsi, la machine calee a droite. Aucun voile pose sur la
   photo — un fondu prend le relais a gauche, la ou elle est deja noire, pour que
   le texte tienne meme quand le cadrage glisse. */
.b4m {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  min-height: clamp(460px, 76vh, 880px);
  padding: clamp(56px, 7vh, 96px) 0;
  background: #000;
  border-top: 1px solid rgba(255,255,255,.06);
}
/* `contain`, PAS `cover`. Sur un bloc beaucoup plus large que le 16:9 de la photo
   — un 4K fait un rapport de 4,7 — `cover` l'agrandit jusqu'a n'en montrer qu'une
   bande de 38 % de hauteur : le caisson et le logo sortaient du cadre (vu a
   l'ecran le 17/09). En `contain` calee a droite, la photo garde son cadrage
   entier, et le noir du bloc prolonge exactement le sien a gauche. */
.b4m-fond {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: right center;
  pointer-events: none;
}
/* LE FONDU N'EST PAS UN VOILE : il ne couvre que le tiers gauche, ou la photo est
   deja un aplat noir, et il s'eteint avant la machine. */
.b4m::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.92) 26%,
                              rgba(0,0,0,.55) 42%, transparent 62%);
}
.b4m-dessus {
  position: relative; z-index: 2;
  container-type: inline-size;
  width: min(var(--large), 52vw);
  margin-inline: 0;
  padding-inline: 0;
}
@media (min-width: 1px) {
  /* l'enveloppe centre par defaut : ici elle se cale a gauche, sur la marge de page */
  .b4m-dessus { margin-left: max(28px, calc((100% - var(--large)) / 2)); }
}
.b4m-dessus .etiquette { color: var(--accent-clair); }
.b4m-dessus h2 {
  margin: 0 0 clamp(14px, 2vh, 26px); max-width: 15ch;
  font-size: clamp(32px, min(9.2cqw, 9.4vh), 124px);
  line-height: .95; letter-spacing: -.028em;
}
.b4m-dit {
  /* 58ch ET PAS 44 : a 2560, ce chapeau ne tenait que 53 % de sa colonne, soit
     44 caracteres par ligne — une colonne de journal sous un titre de 124 px. */
  margin: 0; color: var(--texte-2); max-width: 58ch;
  font-size: clamp(15px, 2.5cqw, 28px); line-height: 1.55;
}
.b4m-dit b { color: var(--texte); font-weight: 500; }

.b4m-faits {
  margin: clamp(26px, 3.6vh, 46px) 0 0; max-width: 46ch;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 clamp(20px, 2.4vw, 40px);
  border-top: 1px solid rgba(255,255,255,.16);
}
.b4m-faits > div { padding: 16px 0 4px; }
.b4m-faits dt {
  margin: 0 0 6px; font-family: Mono, monospace; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-clair);
}
.b4m-faits dd {
  margin: 0; color: var(--texte-2); font-size: clamp(13px, .95vw, 15px); line-height: 1.45;
}

@media (max-width: 1080px) {
  .b4m-fond { object-position: right center; }
  .b4m::before {
    background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.94) 40%,
                                rgba(0,0,0,.66) 62%, rgba(0,0,0,.18) 84%);
  }
  .b4m-dessus h2 { max-width: 13ch; }
  .b4m-dit { max-width: 40ch; }
}
/* LA TABLETTE EN PORTRAIT : LE BLOC NE GARDE QUE LA HAUTEUR DE SON CONTENU.
   Mesure du 18/09 a 834 x 1210 : le bloc tenait ses 880 px de hauteur minimale
   pour 497 px de texte, soit 383 px de vide reparti au-dessus et au-dessous, et
   l'image en `contain` n'en remplissait que la bande centrale. C'est le trou de
   832 x 192 px que le detecteur de vide signalait a cette largeur. */
@media (min-width: 701px) and (max-width: 1080px) {
  .b4m { min-height: clamp(420px, 62vh, 700px); }
}

@media (max-width: 700px) {
  /* SOUS 700 PX, L'IMAGE PASSE DERRIERE EN ENTIER et le fondu devient vertical :
     a cette largeur, la machine et le texte ne peuvent plus cohabiter cote a cote
     sans que l'un mange l'autre. */
  /* la reserve du bas tient la machine entiere : 402 de large en 4:5 = 502 de haut */
  .b4m { min-height: 0; padding: clamp(48px, 6vh, 72px) 0 clamp(340px, 58vh, 540px); }
  /* LE PORTRAIT SE POSE EN BAS, EN ENTIER. `cover` sur une colonne de telephone
     (402 de large pour 1 600 de haut) coupait la machine quel que soit le cadrage :
     `contain` la montre complete, et le noir du bloc prolonge le fond de la photo,
     qui est deja noir. */
  .b4m-fond { object-fit: contain; object-position: center bottom; }
  /* LE VOILE DU BLOC NE PEUT PAS SUIVRE LE TEXTE : il est en pourcentage de la
     hauteur du bloc, le texte fait ce qu'il fait. Resultat mesure le 18/09 : les
     deux derniers faits (« elle se deplace », « un seul flexible ») tombaient
     sur le manometre, illisibles. Le fond passe donc DERRIERE LE TEXTE lui-meme,
     ou il epouse sa hauteur quoi qu'il arrive, et se dissipe sur ses 14 derniers
     pour cent pour ne pas faire un panneau colle sur la photo. */
  .b4m::before {
    background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.90) 30%,
                                rgba(0,0,0,.55) 62%, transparent 86%);
  }
  .b4m-dessus {
    /* le fond couvre toute la largeur de l'ecran, sinon il se lit comme un
       panneau pose sur la photo ; la marge de page revient en padding */
    width: 100%; margin-left: 0; padding: 6px 28px 38px;
    background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.72) 84%,
                                transparent 100%);
  }
  .b4m-dessus h2, .b4m-dit, .b4m-faits { max-width: none; }
  /* LES QUATRE FAITS RESTENT SUR DEUX COLONNES : en pile, ils allongeaient le texte
     de 120 px et le poussaient sur la machine, qui n'etait plus qu'une ombre
     derriere les lettres (triptyque, 17/09). */
  .b4m-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .b4m-faits > div { padding: 12px 0 10px; }
  .b4m-faits dd { font-size: 12.5px; }
}
/* ═══════════════════════════════ 05 · LE DOCUMENT ═════════════════════════
   Le bloc DIT « voici la pièce ». Sa forme est celle d'un document posé : le
   certificat en grand, légèrement de travers, qui déborde du bloc, les numéros
   en très gros, et le registre en tableau administratif. Rien d'arrondi. */
.b05 {
  position: relative; overflow: clip;
  padding: 118px 0 110px;
}
.b05-haut {
  width: var(--large); margin-inline: auto;
  display: grid; gap: 72px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
}
/* LE TEXTE SE MESURE SUR SA COLONNE, PAS SUR L'ECRAN (17/09/2026). Plafonne en vw,
   le titre s'arretait a 76 px et le chapeau a 34 caracteres pendant que la colonne
   montait a 1 520 px : le detecteur de vide relevait 1 051 px morts entre ce texte
   et la piece, a 3440. Meme correction que le hero. */
.b05-dire { container-type: inline-size; }
.b05-dire h2 {
  font-size: clamp(34px, min(9.4cqw, 9vh), 120px);
  /* 0,99 ET PAS 0,94 : la seconde ligne porte deux E accentues, dont le sommet
     monte a 0,89 em (mesure au canvas sur Archivo). A 0,94 il restait 5,5 px
     entre l'accent et le bas de la ligne du dessus, ce qui se lit comme un
     contact. Les titres sans capitale accentuee gardent leur 0,94. */
  line-height: .99; letter-spacing: -.03em; margin: 0 0 20px;
}
.b05-dit { margin: 0 0 42px; max-width: 52ch; color: var(--texte-2);
           font-size: clamp(15.5px, 3.8cqw, 46px); line-height: 1.42; }

.b05-numeros { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--texte); }
.b05-numeros > div { padding: 22px 0 20px; border-bottom: 1px solid var(--trait); }
.b05-numeros dt {
  font-family: Mono, monospace; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-3); margin: 0 0 8px;
}
.b05-numeros dd {
  margin: 0; font-family: Mono, monospace; font-weight: 400;
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1; letter-spacing: -.02em;
  color: var(--texte); font-variant-numeric: tabular-nums;
}
.b05-numeros em {
  display: block; margin-top: 10px; font-style: normal;
  font-size: 13.5px; color: var(--texte-2); max-width: 62ch;
}
.b05 .tenu {
  margin: 30px 0 0; padding-left: 18px; border-left: 2px solid var(--trait-fort);
  color: var(--texte-3); font-size: clamp(13.5px, 1.35cqw, 19px); line-height: 1.6;
  max-width: 72ch;
}

/* LA PIÈCE EST POSÉE DROITE. Elle portait une inclinaison de 1,6° pour dire
   « document pose sur une table » : sur une piece officielle qui porte des
   numeros, un certificat et des dates, l'effet se retourne — les donnees
   paraissent de travers (Youri, 17/09). L'ombre portee suffit a dire qu'elle est
   posee, sans faire pencher ce qui doit se lire. */
.b05-piece { margin: 0; position: relative; }
.b05-piece img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 30px 70px rgba(10,14,26,.22), 0 2px 0 rgba(10,14,26,.06);
  transition: transform .6s var(--mouvement-courbe), box-shadow .6s var(--mouvement-courbe);
}
.b05-piece:hover img {
  transform: scale(1.012);
  box-shadow: 0 38px 86px rgba(10,14,26,.26), 0 2px 0 rgba(10,14,26,.06);
}
.b05-piece figcaption {
  margin-top: 26px; font-family: Mono, monospace; font-size: 12px; color: var(--texte-3);
}

/* ─────────────────────── LA RARETÉ, SANS LA LISTE ──────────────────────────
   Le registre nominatif est retiré (Antony, SMS du 17/09/2026 : « il faudrait que
   tu enlèves les 10 applicateurs, il ne faut surtout pas que les gens voient ça »).
   Il donnait ses neuf concurrents à ses propres clients, dont deux dans sa zone.
   Ce qui reste est le fait : le nombre, sa place dedans, et la liste publique. */
.b05-bas {
  width: var(--large); margin: clamp(52px, 7vh, 92px) auto 0;
  display: grid; gap: clamp(32px, 4vw, 72px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  border-top: 1px solid var(--texte); padding-top: clamp(28px, 3.4vh, 48px);
}
.b05-rarete {
  container-type: inline-size;
  display: grid; gap: clamp(20px, 2.6vw, 52px);
  grid-template-columns: auto minmax(0, 1fr); align-items: start;
}
.b05-rarete-chiffre { margin: 0; display: grid; gap: 4px; }
.b05-rarete-chiffre b {
  font-family: Archivo, system-ui, sans-serif; font-weight: 900;
  font-size: clamp(64px, 13cqw, 168px); line-height: .84; letter-spacing: -.04em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.b05-rarete-chiffre span {
  font-family: Mono, monospace; font-size: clamp(11.5px, 1.5cqw, 14px);
  letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3);
}
.b05-rarete-dire p { margin: 0; color: var(--texte-2);
                     font-size: clamp(15.5px, 2cqw, 25px); line-height: 1.55; }
.b05-rarete-dire p b { color: var(--texte); font-weight: 600; }

/* SA MACHINE. Posée comme les autres pièces du bloc, mais droite : un document
   se pose de travers, une machine non. */

@media (max-width: 980px) {
  .b05 { padding: 76px 0 82px; }
  .b05-haut { grid-template-columns: 1fr; gap: 44px; }
  .b05-piece { max-width: 380px; }
  .b05-bas { grid-template-columns: 1fr; gap: 36px; }
  .b05-rarete { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .b05-piece img, .b05-piece:hover img { transform: none; }
}

/* ═══════════════════════════════ 06 · LE TEMPS ════════════════════════════
   Le bloc DIT un déroulé. Sa forme est une frise : une ligne qui se trace au
   défilement, quatre temps accrochés dessus en alternance. Ni colonnes, ni
   cartes, ni grille. */
.b06 { padding: 112px 0 116px; background: var(--fond); }
.b06-tete { width: var(--large); margin: 0 auto 64px; }
.b06-tete h2 { font-size: clamp(32px, 4.6vw, 70px); line-height: .96; letter-spacing: -.028em; margin: 0; }

.frise { position: relative; width: var(--large); margin-inline: auto; }
.frise-ligne {
  position: absolute; left: 0; right: 0; top: 10px; height: 1px;
  background: var(--trait);
}
.frise-ligne span {
  display: block; height: 100%; width: 0; background: var(--accent);
  box-shadow: 0 0 12px rgba(0,128,248,.5);
}
.frise.vu .frise-ligne span { animation: frise-trace 1.6s var(--mouvement-courbe) forwards; }
@keyframes frise-trace { to { width: 100%; } }

.frise-temps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px;
  grid-template-rows: auto auto auto auto;
}
.frise-temps li { position: relative; padding-top: 0; opacity: 0; }
/* LES QUATRE PHOTOS SUR LA MEME LIGNE. Le troisieme temps porte une ligne de
   texte de plus que ses voisins, et son image descendait d'autant : quatre
   images d'un meme deroule qui ne s'alignent pas se voient tout de suite
   (17/09/2026). Chaque temps partage les rangees de la frise. */
@supports (grid-template-rows: subgrid) {
  .frise-temps li {
    display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start;
  }
}
@supports not (grid-template-rows: subgrid) {
  .frise-temps p { min-height: 5.6em; }
}
.frise.vu .frise-temps li {
  animation: frise-temps .7s var(--mouvement-courbe) forwards;
  animation-delay: calc(.35s + var(--i) * .22s);
}
@keyframes frise-temps { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.frise-temps b {
  display: block; font-family: Mono, monospace; font-size: 12.5px; letter-spacing: .16em;
  color: var(--accent-clair); margin: 34px 0 0; padding-left: 22px;
}
/* le point d'accroche sur la ligne */
.frise-temps li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--fond);
}
.frise-temps h3 {
  font-family: Archivo, system-ui, sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: 17px; line-height: 1.12; letter-spacing: -.01em; margin: 12px 0 10px;
}
.frise-temps p { margin: 0 0 20px; color: var(--texte-2); font-size: 14px; line-height: 1.58; }
.frise-temps figure { margin: 0; }
/* PAS D'ARRONDI : les photos du bloc « Ce qu'on isole » sont a angles droits
   depuis sa reprise, et deux traitements pour la meme matiere sur la meme page
   font gabarit. */
.frise-temps figure img { display: block; width: 100%; height: auto; }
.frise-temps figcaption {
  margin-top: 9px; font-family: Mono, monospace; font-size: 12px; color: var(--texte-3);
  line-height: 1.4;
}
/* la mention d'une vue fabriquee : elle se lit, elle ne se cache pas */
.frise-temps figcaption i { font-style: normal; color: var(--texte-3); opacity: .8; }

@media (max-width: 900px) {
  .b06 { padding: 76px 0 82px; }
  .frise-ligne { top: 0; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; }
  .frise-ligne span { width: 100%; height: 0; }
  .frise.vu .frise-ligne span { animation: frise-trace-v 1.6s var(--mouvement-courbe) forwards; }
  @keyframes frise-trace-v { to { height: 100%; } }
  .frise-temps { grid-template-columns: 1fr; gap: 38px; grid-template-rows: none; }
  .frise-temps li { display: block; grid-row: auto; }
  .frise-temps p { min-height: 0; }
  .frise-temps li { padding-left: 28px; }
  .frise-temps li::before { top: 6px; }
  .frise-temps b { margin: 0 0 8px; padding-left: 0; }
  .frise-temps h3 { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .frise-ligne span { width: 100% !important; height: 100% !important; animation: none !important; }
  .frise-temps li { opacity: 1; animation: none !important; }
}

/* ═══════════════════════════════ 07 · LE TERRITOIRE ═══════════════════════
   Le bloc DIT un territoire. La carte n'est plus une illustration à côté du
   texte : elle EST le fond du bloc, en grand, et le texte se pose dessus. */
.b07 {
  position: relative; overflow: clip;
  padding: 116px 0 120px; min-height: 620px;
  display: flex; align-items: center;
}
/* LA CARTE TIENT EN ENTIER. Posee a `right: -6%` elle sortait du bloc, et le
   `overflow: clip` de la section rognait les 86 px qui depassaient : l'Alsace et
   la frontiere italienne etaient coupees net, plus 6 px en haut et 5 en bas
   parce qu'elle faisait 948 px de haut pour un bloc de 937. Le tracé, lui, n'a
   jamais ete tronque : son viewBox l'englobe. C'etait sa PLACE qui le coupait
   (Youri, 17/09 : « pourquoi est-ce que la France est coupee ? »).
   Son bord droit s'aligne maintenant sur celui du texte, et sa hauteur est
   bornee par l'ecran : le Sud-Est, qui est la zone, ne sort plus du cadre. */
.b07-fond {
  position: absolute; z-index: 0;
  right: calc((100% - var(--large)) / 2); top: 50%; transform: translateY(-50%);
  width: min(54%, 900px);
  display: flex; justify-content: flex-end; pointer-events: none;
}
.b07-fond svg {
  display: block; width: 100%; height: auto; max-height: 76vh;
  /* LES VOISINS SORTENT DU CADRE, ET C'EST VOULU : ils sont coupes par le viewBox,
     mais un bord franc ferait « image collee ». Le masque les fait disparaitre
     dans le fond sur les bords gauche, haut et bas, la ou ils croisent le texte.
     Mesure du 18/09 : sans lui, le filet des Cevennes passait 114 px par-dessus
     la liste des departements. */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 100%),
                      linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 100%),
                      linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* ─────────────────────────── LA CARTE DE LA ZONE ───────────────────────────
   Trois plans, et un seul porte l'information : les voisins en filet (on se
   repere), les cinq departements pleins (la reponse), les villes en points (on
   se situe). Le numero est ecrit DANS son departement : c'est la seule etiquette
   qui n'a pas besoin d'etre reliee par un trait. */
.z-voisins path { fill: none; stroke: var(--trait-fort); stroke-width: 1.6; opacity: .45; }
.z-dep path {
  fill: var(--accent); stroke: #FFFFFF; stroke-width: 2.2; stroke-linejoin: round;
  transition: fill .25s var(--mouvement-courbe), opacity .25s var(--mouvement-courbe);
}
.z-num {
  fill: #FFFFFF; font-family: Archivo, system-ui, sans-serif; font-weight: 900;
  font-size: 40px; text-anchor: middle; dominant-baseline: middle;
  letter-spacing: -.02em; pointer-events: none;
}
/* LES VILLES SONT TOUTES DANS LA ZONE, donc toutes sur du bleu : en gris, elles
   ne se lisaient pas (18/09). Blanc, avec le point en blanc cercle de bleu. */
.z-villes circle { fill: #FFFFFF; stroke: var(--accent); stroke-width: 2; }
.z-villes text {
  fill: #FFFFFF; font-family: Mono, monospace; font-size: 17px; letter-spacing: .01em;
  paint-order: stroke; stroke: var(--accent); stroke-width: 3.5; stroke-linejoin: round;
}

/* L'ENTREE : les departements se posent d'ouest en est, dans l'ordre de la liste.
   Rien ne roule, rien ne clignote : chacun arrive a sa place, une fois. */
.z-dep { opacity: 0; }
.b07.vu .z-dep { animation: z-pose .55s var(--mouvement-courbe) forwards;
                 animation-delay: calc(.15s + var(--i) * .11s); }
@keyframes z-pose { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.z-villes { opacity: 0; }
.b07.vu .z-villes { animation: z-pose .5s var(--mouvement-courbe) .82s forwards; }
.z-voisins { opacity: 0; }
.b07.vu .z-voisins { animation: z-pose .6s var(--mouvement-courbe) .05s forwards; }

/* LA MAIN : designer un departement, sur la carte ou dans la liste, isole le
   meme des deux cotes. La liste et la carte disent la meme chose, il faut qu'on
   le voie. */
.b07[data-dep] .z-dep:not(.est-vise) path { fill: var(--trait-fort); }
.b07[data-dep] .z-dep.est-vise path { fill: var(--accent); }
/* le numero d'un departement mis en retrait passe a l'encre : blanc sur le gris
   de retrait, il tombait a 2,6:1. */
.b07[data-dep] .z-dep:not(.est-vise) .z-num { fill: var(--texte); opacity: .55; }
.b07-deps li { transition: background-color .2s; }
.b07-deps li.est-vise { background-color: color-mix(in srgb, var(--accent) 8%, transparent); }

.b07-dessus {
  position: relative; z-index: 1;
  width: min(var(--large), 46vw);
  margin-left: max(28px, calc((100% - var(--large)) / 2));
  container-type: inline-size;
}
.b07-dessus h2 {
  font-size: clamp(34px, 5.2vw, 82px); line-height: .99; letter-spacing: -.03em; margin: 0 0 34px;
  /* accent du E de DEPARTEMENTS : meme raison qu'au bloc 05 */
}
/* LES DÉPARTEMENTS EN TYPOGRAPHIE, pas en pilules : le numéro est gros, le nom
   suit en petit. C'est une liste de territoires, pas une barre de filtres. */
.b07-deps { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 0; max-width: 560px; }
.b07-deps li {
  display: flex; align-items: baseline; gap: 20px;
  padding: 12px 0; border-bottom: 1px solid var(--trait);
}
.b07-deps li:first-child { border-top: 1px solid var(--texte); }
.b07-deps b {
  font-family: Archivo, system-ui, sans-serif; font-weight: 900;
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1; letter-spacing: -.02em;
  color: var(--accent); min-width: 2.2ch; font-variant-numeric: tabular-nums;
}
.b07-deps i { font-style: normal; font-size: 16px; color: var(--texte); }
.b07-dit { max-width: 64ch; margin: 0 0 26px; color: var(--texte-2);
           font-size: clamp(15.5px, 2.4cqw, 28px); line-height: 1.55; }
.b07-source { margin: 34px 0 0; font-family: Mono, monospace; font-size: 12px; color: var(--texte-3); }

@media (max-width: 980px) {
  /* EN COLONNE, LE TITRE PASSE D'ABORD (18/09). `order` ne fait rien sur un
     `display: block` : la carte, qui vient avant dans le document, s'affichait
     au-dessus du titre et occupait 46 % de l'ecran avant qu'on sache de quoi il
     s'agit. Le bloc reste en flex, et l'ordre est explicite. */
  .b07 { padding: 76px 0 82px; min-height: 0; display: flex; flex-direction: column; }
  /* la marge de page revient en padding : mise a zero, la marge laissait le
     titre et la liste coller au bord de l'ecran */
  .b07-dessus { order: 1; width: 100%; margin-left: 0;
                padding-inline: 28px; box-sizing: border-box; }
  .b07-fond { order: 2;
              position: relative; right: auto; top: auto; transform: none; width: 100%;
              margin: 30px 0 0; justify-content: center; }
  .b07-fond svg { max-height: none;
                  /* le masque lateral n'a plus de texte a proteger : il ne garde
                     qu'un fondu discret sur les deux bords */
                  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
                          mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%); }
  /* le nom du departement ne se coupe plus en deux lignes */
  .b07-deps li { gap: 14px; }
  .b07-deps i { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  /* la carte est posee d'emblee, entiere : le geste tombe, l'information reste */
  .z-dep, .z-villes, .z-voisins { opacity: 1; animation: none; }
}

/* ═══════════════════════════ 08 · LA CONNAISSANCE ═════════════════════════
   Deux colonnes de questions, et AUCUN MOUVEMENT. Après la frise qui se trace
   et la carte qui se dessine, le repos est un geste : c'est ce qui redonne du
   prix aux autres. */
.b08 { padding: 112px 0 116px; position: relative; isolation: isolate; }
.b08-corps { width: var(--large); margin-inline: auto; position: relative; z-index: 1; }

/* LA TRAME DE CELLULES, A DEUX ECHELLES. En fond, agrandie et presque effacee,
   elle donne au bloc la matiere qu'il n'avait pas ; dans la tete, a sa taille,
   elle devient une piece qu'on lit. Un seul jeu de chemins (`<symbol>`), deux
   `<use>` : 8 Ko pour les deux. */
.b08-fond {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
/* LES STYLES NE TRAVERSENT PAS UN `<use>` : ses noeuds vivent dans un shadow DOM
   que `.b08-fond path` n'atteint pas. Seules les proprietes HERITEES passent, donc
   `fill` et `stroke` se posent sur le `<svg>`, jamais sur les chemins. Sans cela,
   la trame sort en noir plein (18/09). */
.b08-fond svg {
  position: absolute; right: -4%; bottom: -6%;
  width: min(900px, 72%); height: auto; aspect-ratio: 1000 / 760;
  fill: none; stroke: var(--trait-fort); stroke-width: 1.5; opacity: .38;
}
/* le fond s'efface en haut et sur les cotes : le titre et les questions ne se
   lisent pas sur un grillage */
.b08-fond {
  -webkit-mask-image: radial-gradient(74% 70% at 82% 90%, #000 0%, transparent 76%);
          mask-image: radial-gradient(74% 70% at 82% 90%, #000 0%, transparent 76%);
}

.b08-matiere {
  /* SOUS LE TITRE, DANS LA COLONNE DE GAUCHE : c'est la que le bloc laissait
     220 px de vide, entre le bas du titre et la premiere question. */
  grid-column: 1; grid-row: 3; margin: 30px 0 0; max-width: 520px;
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start;
}
.b08-echantillon {
  width: 132px; height: 132px; display: block;
  background: var(--surface); border: 1px solid var(--trait);
  fill: color-mix(in srgb, var(--accent) 7%, transparent);
  stroke: var(--accent); stroke-width: 2.4; opacity: .72;
}
.b08-matiere figcaption { font-size: 13.5px; line-height: 1.55; color: var(--texte-3); }
.b08-matiere figcaption b {
  display: block; margin-bottom: 4px;
  font-family: Mono, monospace; font-weight: 400; font-size: 15px;
  letter-spacing: .12em; color: var(--accent);
}
.b08-matiere figcaption i { font-style: normal; color: var(--texte); }

.b08-tete {
  display: grid; gap: 18px 64px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end; margin-bottom: 52px;
}
.b08-tete h2 { font-size: clamp(30px, 4.2vw, 62px); line-height: .96; letter-spacing: -.028em; margin: 0; }
.b08-tete .etiquette { grid-column: 1; grid-row: 1; margin: 0; }
.b08-tete h2 { grid-column: 1; grid-row: 2; }
.b08-tete p { grid-column: 2; grid-row: 2; margin: 0; color: var(--texte-2); font-size: 14.5px; line-height: 1.6; }

.faq { display: grid; gap: 0 72px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.faq-col { border-top: 1px solid var(--texte); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-family: Archivo, system-ui, sans-serif; font-weight: 700;
  font-size: 17px; line-height: 1.3; color: var(--texte);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 1px;
  background: var(--texte-3);
}
.faq summary::before {
  content: ""; position: absolute; right: 9.5px; top: 50%; margin-top: -6px;
  width: 1px; height: 13px; background: var(--texte-3);
  transition: transform .2s var(--mouvement-courbe);
}
.faq details[open] summary::before { transform: scaleY(0); }
.faq details[open] summary { color: var(--accent); }
.faq p { margin: 0 0 22px; color: var(--texte-2); font-size: 15px; line-height: 1.62; }
.faq p b { color: var(--texte); font-weight: 500; }

@media (max-width: 900px) {
  .b08 { padding: 76px 0 82px; }
  .b08-tete { grid-template-columns: 1fr; }
  .b08-tete p { grid-column: 1; grid-row: 3; }
  .b08-matiere { grid-column: 1; grid-row: 4; margin-top: 22px; }
  .faq { grid-template-columns: 1fr; gap: 0; }
  .faq-col + .faq-col { border-top: 0; }
}

/* ═══════════════════════════════ 09 · LA DÉCISION ═════════════════════════
   Le seul bloc qui demande quelque chose. Plein écran, sombre, et des champs
   SANS BOÎTE : un filet sous chacun, comme un formulaire d'atelier. */
.b09 {
  padding: 120px 0 128px;
  background: radial-gradient(90% 70% at 76% 24%, rgba(0,80,200,.18), transparent 62%), #05070D;
  border-top: 1px solid rgba(255,255,255,.07);
}
.b09-corps {
  width: var(--large); margin-inline: auto;
  display: grid; gap: 72px; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: start;
}
.b09-tete h2 { font-size: clamp(32px, 4.6vw, 70px); line-height: .94; letter-spacing: -.03em; margin: 0 0 22px; }
.b09-tete p { margin: 0; max-width: 56ch; color: var(--texte-2); font-size: clamp(15.5px,1.1vw,18px); line-height: 1.6; }

.b09-form {
  display: grid; gap: 28px 32px; grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 34px; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--trait);
}
.champ { display: grid; gap: 10px; align-content: start; }
.champ-large { grid-column: 1 / -1; }
.champ label, .champ legend {
  font-family: Mono, monospace; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-3); padding: 0;
}
/* AUCUNE BOÎTE : un filet sous le champ, qui s'allume au focus */
.champ input, .champ select {
  width: 100%; min-height: 48px; padding: 0 2px;
  background: none; color: var(--texte);
  border: 0; border-bottom: 1px solid var(--trait-fort); border-radius: 0;
  font-family: Archivo, system-ui, sans-serif; font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700; letter-spacing: -.01em;
  transition: border-color var(--mouvement-duree-court) var(--mouvement-courbe);
}
.champ select { appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--texte-3) 50%),
                    linear-gradient(135deg, var(--texte-3) 50%, transparent 50%);
  background-position: right 10px center, right 4px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.champ input::placeholder { color: var(--texte-3); font-weight: 400; }
.champ input:focus, .champ select:focus { outline: none; border-bottom-color: var(--accent); }
.champ input:focus-visible, .champ select:focus-visible {
  outline: 2px solid var(--accent-clair); outline-offset: 4px;
}
/* L'UNITE SE CALE SUR SON CHAMP, PAS SUR LA SECTION (18/09/2026). Sans
   `position: relative` ici, le `m²` prenait pour repere le premier ancetre
   positionne, c'est-a-dire le bloc entier : il partait se poser au bord droit de
   la page, 300 px sous le champ qu'il legende. Visible a 1440 comme au telephone. */
.champ-unite { position: relative; display: block; }
.champ-unite input { padding-right: 34px; }   /* le nombre ne passe pas sous l'unite */
.champ-unite span {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-family: Mono, monospace; font-size: 15px; color: var(--texte-3); pointer-events: none;
}
fieldset.champ { border: 0; margin: 0; padding: 0; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix label {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px;
  border: 1px solid var(--trait-fort); border-radius: 0;
  font-family: Mono, monospace; font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--texte-2); cursor: pointer;
  transition: border-color var(--mouvement-duree-court) var(--mouvement-courbe);
}
.choix label:has(:checked) { border-color: var(--accent); color: var(--texte); background: rgba(0,128,248,.08); }
.choix input { accent-color: var(--accent); width: 16px; height: 16px; }
.b09-form .btn--large { grid-column: 1 / -1; width: 100%; margin-top: 6px; }
.hors-zone {
  grid-column: 1 / -1; margin: 0; padding: 12px 0 12px 16px;
  border-left: 2px solid var(--attente); color: var(--texte-2); font-size: 14px; background: none;
}
.mention { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--texte-3); line-height: 1.5; }
/* TROIS ETATS, TROIS COULEURS. Le vert dit « c'est parti » : il etait pose sur
   « envoi non branche », donc sur un message qui dit exactement le contraire
   (18/09/2026). Le vert est desormais reserve a un envoi reellement passe. */
.retour { grid-column: 1 / -1; margin: 0; font-size: 14.5px; color: var(--texte-2); }
.retour.ok { color: var(--ok); }
.retour.ko { color: var(--ko); }
.retour.attente { color: var(--texte-2); }

/* LE POT DE MIEL. Sorti de l'ecran plutot que `display:none` : les robots les
   plus recents ignorent les champs masques par l'affichage, pas ceux qui sont
   simplement hors cadre. Aucun lecteur d'ecran ne l'annonce non plus, le
   conteneur porte aria-hidden. */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 980px) {
  .b09 { padding: 78px 0 84px; }
  .b09-corps { grid-template-columns: 1fr; gap: 40px; }
  .b09-form { grid-template-columns: 1fr; }
}