/* =========================================================================
   AMORE CORP — Édition 01
   Palette « Encre » : fond quasi-neutre, bleu remonté dans les valeurs
   médianes, or inchangé. Typographie Cormorant Garamond + Archivo.
   Règle d'or : « l'or désigne, il ne remplit jamais » — ≤ 4 % des pixels,
   jamais un fond de bouton hors envoi de formulaire.
   ========================================================================= */

:root{
  /* --- fonds et encres --- (--abysse = exactement le fond de la scène 3D)
  /* Palette « Encre », arrêtée le 21/08 après recherche.
     Thèse : un fond n'a pas à être intéressant, il a à disparaître. L'abysse
     devient un quasi-neutre à peine refroidi (chroma 0,0046, la classe des
     fonds sombres haut de gamme), et le bleu — le vrai — remonte dans les
     valeurs médianes, là où l'œil le voit enfin : surfaces et encre.
     Mesuré : sur l'ancien fond, un grain de la scène 3D devait atteindre 30 %
     d'opacité pour virer au doré, et 62 % des 30 000 grains n'y arrivaient
     jamais. Sur celui-ci la bascule tombe à 12 %. */
  --abysse:#0A0B0D;      /* le fond, presque neutre — il disparaît */
  --palier:#0F1F33;      /* surfaces basses posées sur le fond */
  --bleu:#163455;        /* LE bleu : visible enfin. Encre sur papier : 11,61:1 */

  /* Les clairs ont été refroidis avec le reste : un papier chaud face à un
     sombre froid, ça fait deux familles là où on tient à n'en avoir qu'une. */
  --papier:#F3F5F8;
  --ivoire:#E9ECF1;
  --ivoire-texte:#E4E6EA;
  --ivoire-titre:#F2F4F7;
  --encre:#101418;
  --gris:#B6B9BE;

  /* --- ors : S ≤ 64 − 0,33 × L, teinte entre 36° et 41° --- */
  --or:#C4A15A;          /* filets, monogramme, index */
  --champagne:#D9C4A1;   /* grandes surfaces lumineuses sur fond sombre */
  --bronze:#7E6027;      /* corps < 8 pt sur fond clair — 5,56:1 sur papier */

  --filet-clair:#D8DDE4;
  --filet-sombre:rgba(217,196,161,.16);

  /* --- typographie --- */
  /* Cormorant Garamond : Garalde à fort contraste, choisie par le fondateur
     le 21/08 pour sa proximité avec le dessin du logo. Elle a une petite
     hauteur d'œil et des déliés très fins : les corps sont relevés d'environ
     8 % et les graisses passent à 500-600 partout où elle descend sous 24 px.
     C'est le prix de ce contraste, et il se paie ici, pas à l'usage. */
  --display:"Cormorant Garamond",Garamond,"EB Garamond",Georgia,serif;
  --texte:"Archivo",-apple-system,"Helvetica Neue",Arial,sans-serif;
  /* Les étiquettes (L'ÉTENDUE, LA MÉTHODE, les numéros) sont la signature
     typographique LA PLUS RÉPÉTÉE du site — 39 occurrences relevées le 02/09/2026.
     Elles étaient composées dans un monospace SYSTÈME, que nous ne chargeons pas :
     SF Mono sur le Mac du studio, Consolas sur le PC du prospect, autre chose
     ailleurs. Une signature qui change de dessin selon la machine n'est pas une
     signature. On les compose donc dans l'Archivo qu'on charge déjà : zéro requête
     en plus, zéro octet, et le même dessin partout.
     Mesuré avant/après sur les 39 : écart de largeur moyen −1,1 %, rien ne bouge.
     Le nom de la variable reste `--mono` : il est employé 61 fois dans 7 fichiers,
     et le renommer pour la seule élégance serait du risque gratuit. */
  --mono:"Archivo",-apple-system,"Helvetica Neue",Arial,sans-serif;

  --mesure:64ch;
  --marge:clamp(1.5rem,6vw,7rem);
  --u:clamp(3.5rem,9vw,8rem);      /* respiration verticale d'une section */
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;background:var(--abysse);color:var(--encre);
  font-family:var(--texte);font-size:17px;line-height:1.65;
  font-synthesis:none;-webkit-font-smoothing:antialiased;
}

/* =========================== typographie ================================ */
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;}
h1{
  font-size:clamp(3rem,7.8vw,5.7rem);line-height:1.04;
  letter-spacing:-.012em;color:var(--ivoire-titre);
}
h2{font-size:clamp(2.15rem,4.1vw,3.3rem);line-height:1.12;letter-spacing:-.008em;}
h3{font-size:clamp(1.35rem,2.1vw,1.6rem);line-height:1.22;letter-spacing:-.004em;font-weight:500;}
p{margin:0 0 1.15rem;}
.chapo{font-size:clamp(1.06rem,1.5vw,1.25rem);line-height:1.55;}
.mesure{max-width:var(--mesure);}

/* Une proportionnelle est plus serrée qu'un monospace à chasse égale : l'étiquette
   reprend les deux centièmes d'em et la demi-graisse qui lui rendent sa présence. */
.sur{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.30em;font-weight:500;
  text-transform:uppercase;color:var(--bronze);
  display:flex;align-items:center;gap:1rem;margin:0 0 1.75rem;
}
.sur::after{content:"";flex:1;height:1px;background:var(--filet-clair);max-width:8rem;}

/* LES CHIFFRES S'ALIGNENT EN COLONNE. Une proportionnelle donne au « 1 » une chasse
   plus étroite qu'au « 0 » : sans cette ligne, 01 cesse d'avoir la largeur de 07 et la
   colonne des sept métiers part en biais. Les chiffres tabulaires rendent la chasse
   fixe — c'est la seule chose qu'un monospace faisait mieux, et on la récupère ici.
   Mesuré le 02/09/2026 : sans, les sept numéros vont de 14,1 à 14,7 px ; avec, tous
   à 14,6 px. Le sous-ensemblage au français n'a pas retiré la fonction, c'est vérifié.
   `.prix` a quitté cette liste le 10/09/2026 avec la grille de prix de l'accueil :
   le montant unique qui l'a remplacée n'a aucune colonne où s'aligner. */
.n,.ref,.prix-note{font-variant-numeric:tabular-nums;}

/* =========================== fonds ====================================== */
.sec{padding:var(--u) var(--marge);position:relative;z-index:1;}
.dans{max-width:84rem;margin:0 auto;}

.nuit,.abysse,.invitation{color:var(--ivoire-texte);}
/* Les fonds sombres sont des voiles : la scène continue derrière eux.
   Le voile est désormais horizontal et léger — la scène ayant été assombrie,
   il n'est plus nécessaire d'écraser la moitié gauche pour lire le texte. */
.nuit,.abysse,.invitation{background:transparent;}
.nuit::before,.abysse::before,.invitation::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,11,13,.58) 0%,
    rgba(10,11,13,.68) 50%,
    rgba(10,11,13,.58) 100%);
}
/* L'ouverture est la seule section où la scène doit se voir pleinement :
   le voile n'y protège que ce qui doit rester lisible — le bloc de titre,
   la barre du haut et le socle du bas. Le reste de l'image est laissé nu. */
.abysse::before{
  background:
    radial-gradient(78% 66% at 27% 54%,rgba(10,11,13,.80) 0%,rgba(10,11,13,.44) 56%,rgba(10,11,13,0) 100%),
    linear-gradient(180deg,
      rgba(10,11,13,.52) 0%,rgba(10,11,13,0) 22%,
      rgba(10,11,13,0) 76%,rgba(10,11,13,.58) 100%);
}
/* les sections claires sont opaques : elles passent devant la scène comme des feuilles */
/* Sur fond clair, c'est le BLEU qui fait l'encre des titres : 11,61:1 sur papier.
   C'est là qu'on le voit enfin — le fond, lui, n'a plus à être intéressant. */
.ivoire h2,.ivoire h3,.garantie h2{color:var(--bleu);}
/* LA MATIÈRE DU PAPIER — pas un aplat. Un ivoire uniforme sur deux mille trois
   cents pixels lit « document » ; la charte dit « lumière hors champ + grain,
   jamais de vignettage ». Une source haute à gauche, un repli froid en bas à
   droite, très en dessous du seuil de banding (6 valeurs d'écart maximum).
   ⚠ Deux déclarations et pas le raccourci `background` : les pseudo-éléments
   de `.ivoire` sont déjà pris par les raccords de section, et un raccourci
   remettrait `background-image` à `none` si quelqu'un le recopiait plus bas. */
.ivoire{
  background-color:var(--ivoire);
  background-image:
    radial-gradient(118% 64% at 19% 9%,rgba(255,255,255,.66) 0%,rgba(255,255,255,0) 58%),
    radial-gradient(76% 46% at 97% 88%,rgba(191,200,214,.40) 0%,rgba(191,200,214,0) 74%);
}
.garantie{background:var(--papier);}

.nuit h2,.abysse h2,.invitation h2,
.nuit h3,.abysse h3,.invitation h3{color:var(--ivoire-titre);}
.nuit .sur,.abysse .sur,.invitation .sur{color:var(--or);}
.nuit .sur::after,.abysse .sur::after,.invitation .sur::after{background:var(--filet-sombre);}

/* la matière : lumière hors champ + grain, jamais de vignettage */

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================== en-tête ==================================== */
.tete{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  /* L'ÉCART MINIMUM EST UNE PIÈCE DE L'EN-TÊTE, PAS UN HASARD. Mesuré le
     28/09/2026 : de 721 à 881 px, les boîtes du mot-symbole et du premier
     onglet étaient JOINTIVES (écart 0,00 px, blanc réel 5,10 px — soit la
     chasse entre deux lettres du mot-symbole), et la capture se lit
     « AMORE · CORPL'ATELIER ». `margin-left:auto` sur la nav s'effondre à zéro
     dès que la place manque : rien ne garantissait un écart. */
  gap:clamp(1.25rem,3vw,2.5rem);
  padding:1.5rem var(--marge);
  transition:padding .3s ease,background-color .3s ease,backdrop-filter .3s ease;
}
/* LE VOILE DE L'EN-TÊTE, TANT QU'IL N'EST PAS COLLÉ. Mesuré : au-dessus du
   film, les onglets tombaient à 2,47:1 et 2,54:1 — le SEUL endroit du site où
   la navigation est mal lue est le premier écran, celui qu'on voit en premier.
   Dès que l'en-tête se colle, il a son propre fond et ce voile s'efface. */
.tete::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,13,.78) 0%,rgba(10,11,13,.42) 54%,rgba(10,11,13,0) 100%);
  transition:opacity .3s ease;
}
.tete.collee::before{opacity:0;}
.tete.collee{
  padding:.85rem var(--marge);
  background:rgba(10,11,13,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--filet-sombre);
}
.tete .marque{
  font-family:var(--display);font-size:1.0625rem;font-weight:600;letter-spacing:.3em;
  color:var(--ivoire-titre);text-decoration:none;
  display:inline-flex;align-items:center;gap:.85rem;
}
.tete .marque span{text-indent:.3em;}
.marque-a{height:1.55em;width:auto;flex:none;color:var(--or);}
/* LE A PARLE SEUL DÈS 900 px, ET PAS 560. C'est la seconde moitié du remède à
   la collision mesurée de 721 à 881 px : un écart minimum ne suffit pas si le
   contenu ne rentre pas — il pousserait simplement la page à déborder. Sur
   l'accueil (la seule page à trois onglets) le mot-symbole cède donc la place
   au A, qui EST le logo de la maison. Au-dessus de 900, le mot revient. */
/* ⚠ 960 et pas 900 (29/09/2026) : de 901 à 944 px, avec les trois onglets de
   l'accueil, l'appel mordait encore la marge droite de 12,8 px au repos et de
   32,8 px au survol (contrôle du 29/09 ; seuil prouvé à 945 par injection,
   arrondi avec 15 px de marge). */
@media (max-width:960px){
  .tete .marque span{display:none;}
}
@media (max-width:560px){
  .marque-a{height:1.9em;}
}

/* =========================== le point médian ============================ */
/* signature de la maison : un seul geste, réutilisé partout */
.pt{position:relative;display:inline-block;text-decoration:none;color:inherit;padding-left:0;transition:padding-left .18s cubic-bezier(.4,0,.2,1);}
.pt::before{
  content:"";position:absolute;left:0;top:50%;width:0;height:5px;
  background:var(--or);border-radius:50%;opacity:0;
  transform:translateY(-50%);
  transition:width .18s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1);
}
.pt:hover,.pt:focus-visible{padding-left:14px;}
.pt:hover::before,.pt:focus-visible::before{width:5px;opacity:1;}
/* L'anneau de focus était en or partout. Sur fond ivoire, l'or ne fait que
   2,1:1 : quelqu'un qui navigue au clavier ne voyait pas où il se trouvait.
   Il devient contextuel — or sur les fonds sombres, bronze sur les clairs —
   et passe à 2 px. */
:root{--focus:var(--or);}
.ivoire,.garantie{--focus:var(--bronze);}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}

/* appel à l'action : un libellé et un filet, jamais un bouton plein */
/* La cible tactile fait 44 px de haut : sans padding, la hauteur du bouton
   était celle du texte seul — 17 px au doigt sur téléphone, pour le seul
   élément de conversion permanent du site. Le dessin ne change pas d'un pixel,
   c'est la zone sensible qui s'agrandit. */
.appel{
  white-space:nowrap;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivoire-titre);text-decoration:none;
  display:inline-flex;align-items:center;gap:.85rem;
  min-height:44px;padding-block:.55rem;
}
.appel::after{
  content:"";width:32px;height:1px;background:var(--or);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.appel:hover::after,.appel:focus-visible::after{width:52px;}

/* réglette de chapitre — une règle graduée, pas une barre de progression */
.reglette{
  position:fixed;left:calc(var(--marge) / 2.6);top:0;bottom:0;width:1px;z-index:15;
  background:var(--filet-clair);pointer-events:none;transition:background .5s ease;
}
.reglette::after{
  content:"";position:absolute;left:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--or);top:var(--pos,0%);
  transition:top .48s cubic-bezier(.4,0,.2,1);
}
body.sombre .reglette{background:var(--filet-sombre);}
@media (max-width:1024px){.reglette{display:none;}}

/* =========================== ouverture ==================================
   L'écran d'ouverture est un plan complet, pas un bloc de texte posé en haut
   à gauche : colonne de titre + index des sept métiers à droite, et un socle
   qui court sur toute la largeur pour fermer la composition en bas.
   ======================================================================== */
.ouverture{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:9rem;padding-bottom:0;overflow:hidden;
}
/* la scène occupe le fond de toute la page ; le contenu reste au-dessus */
#scene{
  position:fixed;inset:0;width:100%;height:100%;display:block;
  z-index:0;pointer-events:none;
}
/* marges automatiques haut ET bas : le bloc se centre dans l'espace restant
   et le socle vient se poser exactement sur le bas de l'écran */
.ouverture .dans{position:relative;z-index:2;width:100%;margin:auto;}

.ouv-grille{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(15rem,.8fr);
  gap:clamp(2.5rem,7vw,7rem);align-items:end;
}
.ouv-corps{min-width:0;}

/* L'INDEX NUMÉROTÉ 01→09 A ÉTÉ RETIRÉ LE 04/09/2026 (avec ses styles) : il
   répétait, deux écrans plus haut, la frise des neuf métiers. Deux listes
   numérotées dans une même descente, c'est la signature du gabarit.
   La colonne droite de `.ouv-grille` reste donc vide : c'est voulu, le plan
   d'ouverture s'y voit — le vide est un matériau, pas un trou. */

/* socle : trois repères vrais, alignés sur toute la largeur */
.ouv-socle{
  position:relative;z-index:2;margin-top:clamp(2.5rem,5vh,4rem);
  padding:1.1rem 0 1.6rem;border-top:1px solid var(--filet-sombre);
  display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;justify-content:space-between;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(228,230,234,.5);
}
.ouv-socle sup{font-size:.7em;letter-spacing:0;}
.descendre{color:var(--or);display:inline-flex;align-items:center;gap:.7rem;}
.descendre::after{
  content:"";width:1px;height:14px;background:var(--or);
  animation:filer 2.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes filer{0%,100%{transform:translateY(-3px);opacity:.35;}50%{transform:translateY(4px);opacity:1;}}
@media (prefers-reduced-motion:reduce){.descendre::after{animation:none;}}

.logo-a{width:5.6rem;height:auto;display:block;margin-bottom:2.4rem;}
@media (max-width:720px){.logo-a{width:4.4rem;margin-bottom:1.9rem;}}
/* 14ch était la mesure d'un titre de trois mots. Le titre en fait onze : à 14ch il
   tombait sur quatre lignes de 379 px, et sur un portable de 800 px de haut les deux
   boutons passaient SOUS la ligne de flottaison — l'appel à l'action disparaissait de
   l'écran d'ouverture. La mesure s'élargit donc avec le texte qu'elle porte. */
.ouverture h1{max-width:19ch;margin-bottom:2rem;}

/* ET SUR LA HAUTEUR, PAS SEULEMENT SUR LA LARGEUR. Un portable de 13 pouces fait
   1280 × 800 : large, mais COURT. Un titre de onze mots à 91 px y tient sur quatre
   lignes de 379 px, et les deux boutons — dont « Réserver trente minutes », le seul
   but de la page — passent sous la ligne de flottaison. C'est exactement la machine
   d'une réunion. Le titre se règle donc aussi sur ce qu'il reste de hauteur. */
@media (min-width:900px) and (max-height:860px){
  .ouverture h1{font-size:clamp(2.6rem,4.4vw,3.9rem);margin-bottom:1.5rem;}
  .ouverture .logo-a{margin-bottom:1rem;}
}
.definition{
  font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.6;
  color:rgba(228,230,234,.82);max-width:48ch;margin-bottom:2.75rem;
}
.actions{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:center;}
.discret{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(228,230,234,.55);text-decoration:none;
}

/* =========================== territoires ================================
   La colonne de titre est collante : sans elle, un texte de quatre lignes
   laissait neuf cents pixels de vide en regard d'une liste de sept entrées.
   ======================================================================== */
.diptyque{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,11fr);gap:clamp(2rem,6vw,6rem);}
@media (max-width:900px){.diptyque{grid-template-columns:1fr;}}

.colonne-fixe{align-self:start;}
@media (min-width:901px){
  .colonne-fixe{position:sticky;top:8rem;}
}
.souligne{color:rgba(228,230,234,.78);margin-top:1.5rem;max-width:34ch;}
.appui{color:#3F4750;max-width:46ch;}


/* =========================== la porte de l'atelier ======================
   LA TRANCHE — la pièce qui suit la maison et conduit à /atelier/ (09/09/2026).
   Huit tirages réduits chacun à une lame verticale : le seul objet du site qui
   montre en RETRANCHANT DU CADRE. Ce qu'on ne voit pas est ce qui fait pousser
   la porte ; la pièce entière est de l'autre côté.

   LE MOUVEMENT SE FAIT EN TRANSFORM, JAMAIS EN LARGEUR. Animer `gap` ou une
   largeur ferait relayouter huit images ET les rééchantillonner à chaque image
   de l'animation — c'est-à-dire le coût le plus cher qu'on puisse payer pour
   quatre pixels de jour. Chaque lame porte son rang `--c` (de -3,5 à +3,5) et
   se contente d'une translation : la composition ne bouge pas, seul le compositeur
   travaille.

   ⚠ L'ÉTAT PAR DÉFAUT EST L'ÉTAT ÉCARTÉ, c'est-à-dire l'état FINAL. Sans JS,
   avec main.js en 404, ou en mouvement réduit, aucune classe n'est posée et on
   voit la bande dans sa forme définitive, marge à marge. Un effet se pose par le
   script ; il ne se retire jamais par le script (règle du 03/09). */
/* LE FOND EST LE PAPIER DE LA MAISON, PAS UNE COULEUR CHOISIE. Voir le
   commentaire de index.html : la sortie de la maison lève le papier, la garantie
   le reprenait sans coupure. La porte s'intercale dans cette continuité au lieu
   de la trouer. Même recette de couture que `.garantie` pour le bord du haut :
   sans JavaScript et en mouvement réduit, la maison finit noire (son papier est
   à hauteur zéro) et il faut alors coudre le bord soi-même.
   Et comme la garantie arrive dans la MÊME couleur, deux respirations pleines
   bout à bout feraient 256 px de papier nu entre l'appel et l'étiquette
   suivante : celle du bas est rendue de moitié. On ne sépare pas ce qui est
   continu. */
.porte-atelier{
  position:relative;background:var(--papier);--focus:var(--bronze);
  /* LA SEULE SECTION DE LA PAGE QUI SORT DES MARGES. C'est le remède n°2 de la
     charte — « casser la grille au moins une fois » — et c'est aussi la moitié
     de la réponse à Enzo : une porte se voit parce qu'elle est LARGE, pas parce
     qu'on lui met un fond de couleur. Le texte du seuil, lui, reprend la marge
     commune (`.seuil{padding-inline:var(--marge)}`), donc la page ne perd pas
     son alignement : seule l'ouverture déborde. */
  padding-inline:0;
  padding-bottom:calc(var(--u) * .5);
}
.porte-atelier::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
  height:clamp(4rem,10vh,9rem);transform:translateY(-100%);
  background:linear-gradient(180deg,rgba(243,245,248,0) 0%,rgba(243,245,248,.55) 62%,rgba(243,245,248,.92) 100%);
}
.porte-atelier > *{position:relative;z-index:1;}
.porte-atelier .dans{max-width:none;}

/* ---------------------------------------------------------------------------
   LE BATTANT — toute la pièce est le lien.
   ⚠ PAS `.porte` : cette classe-là est celle du « Écrire à la maison » de la
   clôture. Le piège est écrit dans index.html, il a failli être repris.
   --------------------------------------------------------------------------- */
.battant{
  display:block;text-decoration:none;color:inherit;
  -webkit-tap-highlight-color:transparent;
}

/* L'OUVERTURE : une coupe pleine largeur dans la feuille. Ce qu'on voit dedans
   est la nuit qu'il y a derrière le papier, jamais le papier lui-même — et
   dans cette nuit, l'atelier travaille.
   Les deux filets d'or bordent la coupe : l'or DÉSIGNE le bord, il ne remplit
   rien (deux traits de 1 px sur une pièce de ~500 px de haut). */
.ouvrant{
  position:relative;display:flex;align-items:stretch;
  gap:clamp(2px,.3vw,5px);
  height:clamp(19rem,54vh,31rem);
  background:#06070A;
  border-top:1px solid rgba(196,161,90,.5);
  border-bottom:1px solid rgba(196,161,90,.5);
}
/* les volets ne captent pas la souris : le clic va toujours au battant, et un
   `<video>` ne propose ni menu contextuel ni téléchargement */
.volet{
  flex:var(--f,1) 1 0;min-width:0;width:auto;height:100%;
  display:block;object-fit:cover;object-position:var(--op,50%) 50%;
  pointer-events:none;background:#06070A;
}
/* ⚠ SANS JAVASCRIPT, LE NAVIGATEUR AFFICHE LES COMMANDES DU LECTEUR d'office,
   même sans attribut `controls` (c'est la norme HTML : sans script, il faut
   bien pouvoir lancer une vidéo). Vu à la capture du 11/09 : « ▶ 0:00 », son,
   plein écran et barre de progression posés sur les deux films. Ici le film
   n'est qu'une matière de la porte — le clic va au lien — donc on les retire.
   Couvre Chromium et WebKit (Safari, iPhone) ; Firefox sans script n'a pas
   de prise équivalente. */
.volet-film::-webkit-media-controls,
.volet-film::-webkit-media-controls-enclosure{display:none!important;}

/* ---------------------------------------------------------------------------
   LA PLAQUE — « un bouton plus voyant » SANS UN GRAMME D'OR DE REMPLISSAGE.
   La charte est formelle : l'or ne fait jamais un fond de bouton. La visibilité
   vient donc du CONTRASTE DE MATIÈRE — un rectangle de papier posé sur la nuit,
   c'est-à-dire le plus grand écart disponible sur cette page (11,6:1 pour son
   encre) — de sa TAILLE, et de sa POSITION : centrée, à cheval sur la coupe.
   Elle porte son propre fond : son encre ne dépend donc d'aucune opacité de
   section ni de ce qui passe dessous (leçon du 05/09, les deux alphas qui se
   multiplient).
   Au survol elle bascule à l'encre et la porte s'ouvre sur le noir. C'est le
   SEUL changement d'état de la pièce — on ne reprend pas le filet qui s'allonge
   de `.appel`, ce serait un tic de plus.
   --------------------------------------------------------------------------- */
/* ⚠ 28-29/09/2026 — LA PLAQUE EST À L'ENCRE AU REPOS, PLUS AU PAPIER.
   Mesuré sur les pixels : en papier, son fond contre la section papier qui la
   porte faisait 1,03:1 — sa moitié basse n'existait pas, et « un bouton plus
   voyant » n'était tenu que là où elle chevauche les photographies. Un filet
   bronze et une ombre (28/09) l'ont dessinée sans la remplir : le contrôle du
   29/09 a encore mesuré le remplissage à 1,00:1.
   L'encre sur le papier est le plus grand écart de la page, et ce n'est pas
   un gramme d'or de remplissage : la charte est tenue. Sur la nuit (encre),
   c'est l'OR qui désigne — le filet et le trait reprennent donc l'or.
   Au survol la plaque bascule au papier : c'est le seul changement d'état de
   la pièce, et il se lit dans les deux sens. */
.poignee{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
  z-index:2;max-width:calc(100% - 2 * var(--marge));
  display:inline-flex;align-items:center;gap:clamp(.8rem,1.5vw,1.2rem);
  padding:clamp(1.05rem,1.85vw,1.5rem) clamp(1.8rem,4.4vw,3.6rem);
  background:var(--encre);border:1px solid var(--or);
  box-shadow:0 20px 52px rgba(6,7,10,.45),0 1px 0 rgba(6,7,10,.14);
  color:var(--ivoire-titre);font-family:var(--mono);font-weight:600;
  font-size:clamp(.875rem,1.15vw,1rem);
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  transition:background .45s cubic-bezier(.4,0,.2,1),color .45s cubic-bezier(.4,0,.2,1),border-color .45s cubic-bezier(.4,0,.2,1);
}
.poignee::after{content:"";flex:none;width:34px;height:1px;background:var(--or);transition:background .45s cubic-bezier(.4,0,.2,1);}
.battant:hover .poignee,
.battant:focus-visible .poignee{background:var(--papier);color:var(--bleu);border-color:var(--bronze);}
.battant:hover .poignee::after,
.battant:focus-visible .poignee::after{background:var(--bronze);}

/* LE SEUIL : sous la coupe, sur la feuille. Tout y est centré — c'est la
   demande d'Enzo (« plus au centre ») et c'est cohérent : une porte se regarde
   de face. La marge haute dégage la moitié basse de la plaque. */
.seuil{
  display:block;text-align:center;
  padding-inline:var(--marge);
  padding-top:clamp(3.8rem,6vw,5.4rem);
}
.porte-mot{
  display:block;margin:0 auto;
  font-family:var(--display);font-size:clamp(1.14rem,1.8vw,1.5rem);
  line-height:1.44;color:var(--bleu);max-width:52ch;
}
/* LA MENTION DE L'ARTICLE 50. Son contraste se règle ICI, dans sa couleur, et
   nulle part ailleurs : aucune opacité de section ne doit venir le multiplier
   (c'est la faute du 05/09 qui avait mis la mention du voyage à 1,76:1).

   ⚠ ET LE BRONZE DE LA CHARTE NE SUFFIT PAS ICI — c'est mesuré, pas supposé.
   #7E6027 vaut 5,56:1 sur le papier EN THÉORIE ; sur les PIXELS RENDUS, en
   corps 11 px sur un écran à densité 2, son cœur d'encre remonte à (143,118,70)
   et le contraste tombe à 3,90:1 (1440 px) et 4,01:1 (1280 px). La cause est
   l'anti-crénelage : la ligne tombe sur une position fractionnaire et aucun
   pixel n'est jamais rempli. Sur téléphone (densité 3) la même couleur donne
   5,24:1 — donc la lisibilité de la mention dépendait de l'écran du lecteur.
   Un bronze de la même teinte, plus foncé, en corps 12 px et demi-graisse,
   tient partout : 5,56 / 5,80 / 7,44:1 aux trois largeurs mesurées.
   C'est le même raisonnement que le champagne du favicon — une valeur de la
   charte remplacée par une valeur MESURÉE là où le rendu la trahit. */
.porte-note{
  display:block;margin-top:1.15rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;font-weight:600;
  text-transform:uppercase;color:#63491A;
}
/* ⚠ 11/09/2026 — GRAISSE 600, PAS 500 : réglé par balayage, pas au juger.
   Sur un écran à densité 1 (le PC du prospect), le fût du « I » en 500 tombe à
   cheval sur deux pixels et plafonne à 4,30:1, à toutes les largeurs (1280 →
   1920). Assombrir la couleur ne suffit qu'à -15 % (4,84:1). La demi-graisse,
   même couleur, tient 6,84:1 au pire sur les six largeurs — Archivo est livrée
   en axe 400-600 (fonts/polices.css), donc rien n'est synthétisé. */
/* ⚠ 11/09/2026 — LA MENTION ÉTAIT VOILÉE PAR LA SECTION SUIVANTE. La couture
   haute de la garantie (`.garantie::before`, papier .55 → .92 sur 10vh) déborde
   vers le haut, PAR-DESSUS le bas de la porte et son texte. Mesuré lettre par
   lettre sur téléphone (390 px, densité 3), témoins validés (blanc/nuit 19,69,
   gris/nuit 1,45, mention seule 7,70) : 1re ligne 4,03:1, 2e ligne 2,57:1 —
   sous le seuil. Même mesure, couture seule retirée : 7,40:1 sur les deux.
   Les 5,56 / 5,80 / 7,44 écrits plus haut prenaient les 2 % de pixels les plus
   sombres de TOUTE la mention : la 1re ligne masquait la 2e. Une mention se
   mesure lettre par lettre (règle de la DA), jamais en bloc.
   Cette couture n'a plus rien à coudre ici : la porte est déjà sur le même
   papier que la garantie. La porte a sa propre couture haute contre la maison. */
.porte-atelier + .garantie::before{display:none;}

/* ⚠ AUCUNE ANIMATION N'EST ÉCRITE POUR CETTE SECTION, ET C'EST DÉLIBÉRÉ.
   Le seul mouvement de la porte est celui des films eux-mêmes : c'est la seule
   pièce du site qui bouge SANS QU'ON DÉFILE, et c'est son verbe — l'atelier
   travaille qu'on soit là ou non. Le fondu `.rev` que main.js pose sur tout
   enfant direct de `.dans` s'applique ici comme partout ailleurs : c'est la
   respiration commune du site, ce n'est pas un geste de cette pièce, et on ne
   la présentera jamais comme tel (c'est exactement le reproche fondé du
   contrôleur du 09/09 à l'ancien écartement des lames).
   Ne pas « rajouter un petit mouvement » ici : la porte serait alors la
   deuxième chose de la page à s'écarter, à monter ou à se découvrir. */

@media (max-width:720px){
  /* ⚠ 28/09/2026 — LES QUATRE PIÈCES REVIENNENT, EN DEUX RANGS DE DEUX.
     La règle précédente (`.volet:nth-child(n+3){display:none}`) partait d'un
     raisonnement juste — quatre volets côte à côte sur 335 px feraient quatre
     fils de 80 px — mais elle en tirait la mauvaise conclusion : elle coupait
     la moitié de la pièce, et il ne restait QU'UN SEUL film là où Enzo a
     demandé « avec dedans les vidéos ». En deux rangs, chaque pièce fait
     ~165 × 150 px : c'est une image, pas un fil. Les deux films sont là.
     Le poids reste tenu par le script : un film ne se télécharge qu'à
     l'approche de la section, et jamais si le visiteur a demandé l'économie
     de données (navigator.connection.saveData) ou le mouvement réduit. */
  .ouvrant{
    /* minmax(0,1fr) et pas 1fr : `1fr` vaut minmax(auto,1fr), et la taille
       propre d'une vidéo faisait deux rangs inégaux (191,8 et 204,2 px) */
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    height:clamp(19rem,50vh,25rem);
  }
  .volet{width:100%;height:100%;}
  .poignee{
    font-size:.75rem;letter-spacing:.14em;
    padding:.95rem 1.5rem;gap:.6rem;
  }
  .poignee::after{width:24px;}
  .seuil{padding-top:3.4rem;}
  .porte-mot{font-size:1.06rem;}
}

/* =========================== garantie =================================== */
.garantie h2{color:var(--bleu);max-width:18ch;margin-bottom:2rem;}
.serment{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.5rem,2.9vw,2.35rem);line-height:1.34;
  color:var(--bleu);max-width:26ch;
  border-left:1px solid var(--or);padding-left:clamp(1.25rem,3vw,2.5rem);
}
.engagements{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(3rem,6vw,5rem);
}
.engagement{border-top:1px solid var(--or);padding-top:1.1rem;}
.engagement .t{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bronze);display:block;margin-bottom:.6rem;
}
.engagement p{margin:0;font-size:.9375rem;line-height:1.55;color:#3F4750;}

/* =========================== décisions ==================================
   TROIS DÉCISIONS, TROIS FORMES — refonte du 04/09/2026.
   Les trois blocs étaient rigoureusement identiques (repère à gauche, titre,
   deux paragraphes, phrase barrée). Répété trois fois, c'est le gabarit que la
   DA interdit : « chaque section a une FORME propre ». Et le texte visible est
   passé d'environ 234 mots à environ 95 par décision, le mécanisme descendant
   dans un `<details>` natif — aucun JS, donc rien à réparer si un script tombe.

   · `.d-carrefour` — repère à gauche, DEUX VOIES en regard : la forme dit qu'il
     y avait deux routes.
   · `.d-escalier`  — pleine largeur, deux marches décalées : la forme dit que
     l'ORDRE est le sujet (on coupe le paiement AVANT d'effacer).
   · `.d-exergue`   — décalée vers la droite, une grande phrase et du vide : la
     plus dépouillée des trois, elle ferme la série.

   Ce que ces trois formes ont en commun, et qui ne bouge pas : un `h3` et un
   `span.route` — les deux seules prises dont rature.js a besoin.

   ------------------------------------------------------------------------
   09/09/2026 — CE QUI RESTAIT À FAIRE, ET QU'ENZO VOYAIT ENCORE.
   Trois corrections, aucune sur les corps (ils étaient déjà refaits) :

   1. L'ENTRÉE. L'étiquette « LES DÉCISIONS » est partie du HTML : la section
      ouvre par la question du client (`.dec-demande`). Voir le commentaire de
      index.html — c'est le vrai défaut, pas le texte.
   2. LE PAPIER N'EST PLUS UN APLAT. Une page ivoire uniforme sur 2 300 px lit
      « document Word ». Elle reçoit maintenant la lumière hors champ de la
      charte — une source haute à gauche, un repli froid en bas à droite — et
      elle lit « feuille photographiée ». Coût : zéro élément, zéro octet.
      ⚠ Le fond se pose en `background-color` + `background-image`, PAS en
      raccourci `background` : `.ivoire::before/::after` portent déjà les
      raccords de section, on ne peut pas s'en servir ici.
   3. LE MÉTRONOME. Les trois blocs étaient séparés par le MÊME intervalle :
      trois formes différentes battues à la même mesure se relisent comme une
      liste. L'écart avant l'exergue est maintenant deux fois et demie celui qui
      précède l'escalier — le vide que sa forme promet, il l'a devant lui, en un
      seul morceau et sur toute la largeur.
   ======================================================================== */
/* ═══════════════════ 10/09/2026 — LE PAPIER DEVIENT UN OBJET ═══════════════
   Troisième refus d'Enzo sur cette section (« les pages blanches rayé, boff »).
   Les deux premières corrections portaient sur le TEXTE puis sur l'OUVERTURE ;
   celle-ci porte sur le SUPPORT, qui était le vrai coupable : trois écrans de
   papier pleine largeur à la suite, dans un site-film sur fond noir, ça lit
   « on a quitté le film pour ouvrir un document » quelle que soit la mise en
   page. Mesuré avant : 2,72 écrans à 1440, 3,12 à 1280, 3,02 à 390, sans une
   once de nuit d'un bord à l'autre.

   La section passe donc à `.nuit` (la scène 3D continue derrière, comme
   partout ailleurs) et le papier se resserre en UNE feuille — `.feuillet` —
   posée dedans, avec ses quatre bords. On ne traverse plus trois pages : on
   lit une feuille, et le noir tient les deux marges du haut jusqu'en bas.

   ⛔ POURQUOI LE PAPIER NE PEUT PAS PARTIR — c'est mesurable : la rature est
   peinte sur un canvas en `mix-blend-mode:multiply` (rature.css). Multiplier
   sur la nuit revient à multiplier par du noir : le seul geste du site qui
   RETIRE deviendrait rigoureusement invisible. Le clair n'est pas un choix
   décoratif ici, c'est la condition d'existence de l'objet.
   ↳ 29/09/2026 : LEVÉ. Le dual exact de « multiplier sur le clair » est
     « éclaircir sur le sombre » : la toile passe en `mix-blend-mode:lighten`
     et l'encre en or (rature.css, rature.js). Sur la nuit, le trait éclaire
     le fond entre les lettres et laisse les lettres elles-mêmes à leur
     valeur — même geste, qui laisse lire. La feuille a donc pu partir.

   💰 CE QUE ÇA COÛTE, MESURÉ AVEC TÉMOIN (10/09/2026, processeur bridé ×6,
   même traversée de la section, trois passes chacune) : hero.js coupe sa
   boucle WebGL quand une section OPAQUE couvre l'écran, et il reconnaît ces
   sections à leurs classes — `.ivoire` en fait partie. En quittant `.ivoire`,
   la section laisse la scène tourner derrière la feuille : **33,4 images/s
   contre 44,3** pour le témoin (la même page avec `.ivoire` remise), soit
   7,3 ms de plus par image sur un processeur six fois trop lent. C'est le
   prix du parti, il est assumé et il est écrit : le même prix est déjà payé
   par l'ouverture, la traversée, les métiers et la clôture, qui sont toutes
   des voiles. À vitesse normale, rien de perceptible.

   ⚠ EFFET DE BORD À CONNAÎTRE : plus AUCUNE page du site ne porte la classe
   `.ivoire` depuis ce changement (vérifié sur les quatre). Ses règles restent
   en place plus bas — fond, raccords de section, focus — parce qu'elles sont
   ÉCRITES EN COMMUN avec `.garantie`, qui les emploie toujours ; les retirer
   serait un chantier de raccords, pas un nettoyage. Mais qu'on se le dise :
   remettre `class="ivoire"` sur une section, c'est ressusciter la page blanche
   pleine largeur qu'Enzo a refusée trois fois.
   ═══════════════════════════════════════════════════════════════════════════ */

/* L'OUVERTURE : une question, contre la marge gauche, et rien à sa droite.
   Même ADN que les trois `.question` de la section (Cormorant italique, filet
   d'or à gauche) mais au corps d'un titre : c'est la question qui les commande
   toutes.
   ⚠ ELLE EST PASSÉE SUR LA NUIT : l'ancien gris d'encre (#4A5867) y tombait à
   1,7:1. C'est le champagne qui prend — sa raison d'être selon la charte,
   « grandes surfaces lumineuses sur fond sombre » — mesuré 11,2:1 sur #0A0B0D. */
.dec-demande{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.7rem,3.3vw,2.65rem);line-height:1.24;
  color:var(--champagne);max-width:20ch;margin:0 0 clamp(1.6rem,3.5vw,2.6rem);
  border-left:1px solid var(--or);padding-left:clamp(1.1rem,2.6vw,2rem);
}
/* Le chapô de cette section est un `.appui`, dont la couleur (#3F4750) est
   faite pour le papier — il est employé tel quel par la garantie et par
   signature.css. On ne la change donc PAS à la source : on la surcharge ici,
   et ici seulement. */
.sec-decisions .appui{color:rgba(228,230,234,.82);max-width:52ch;}

/* ------------------------------ SUR LA NUIT -----------------------------
   29/09/2026 — LA FEUILLE EST PARTIE (voir index.html). Les décisions tiennent
   la grille commune du site, contre la marge gauche, comme toutes les autres
   sections ; plus aucun objet clair n'est posé dans la nuit.
   Le voile de la section est plus dense que celui des autres `.nuit` : c'est la
   section qui porte le plus de texte courant, et des arcs de particules d'or
   passaient sous les lignes (relevé le 28/09). La scène continue derrière,
   elle ne traverse plus les mots. */
/* La marge haute ne descend jamais sous la hauteur de la couture de la
   garantie + 1,5 rem : sur téléphone (--u = 3,5 rem), la couture de 84 px
   recouvrait la première ligne de « Qu'avez-vous déjà livré ? » (29/09). */
.sec-decisions{
  padding-top:max(calc(var(--u) * .9),calc(clamp(4rem,10vh,9rem) + 1.5rem));
  padding-bottom:calc(var(--u) * .9);
}
.sec-decisions::before{
  background:linear-gradient(180deg,rgba(10,11,13,.80) 0%,rgba(10,11,13,.88) 50%,rgba(10,11,13,.82) 100%);
}
/* Le raccord avec la garantie (papier) : la couture basse de la garantie était
   RECOUVERTE par le voile de cette section — coupe nette de 140 niveaux sur
   1 px, mesurée le 28/09. La garantie passe devant : sa couture descend sur la
   nuit comme elle a été écrite pour le faire. */
.garantie{z-index:2;}

/* la marge haute remplace celle que portait la feuille : sans elle, le filet
   de la décision 01 touchait le jambage de « références. » (14 px, 29/09) */
.decisions{display:grid;gap:0;margin-top:clamp(2.4rem,5vw,4rem);}
.decision{padding-top:1.7rem;border-top:1px solid var(--filet-sombre);}
/* LE MÉTRONOME EST CONSERVÉ, IL EST SEULEMENT RESSERRÉ. Les intervalles
   valaient 4,2 rem et 7 rem : 11 rem de papier vide, qui allongeaient la
   section sans rien montrer. Ils tombent à 1,6 et 4 rem — et le RAPPORT de
   2,5 entre les deux, lui, ne bouge pas : c'est lui qui empêche les trois
   blocs de se relire comme une liste (règle du 09/09). */
.d-escalier{margin-top:clamp(1.2rem,2.2vw,1.6rem);}
.d-exergue{margin-top:clamp(3rem,5.5vw,4rem);}
.decision .ref{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--or);display:block;margin:0;
}
.decision h3{color:var(--ivoire-titre);margin:0;}
.decision p{font-size:.9688rem;line-height:1.62;color:rgba(228,230,234,.8);max-width:60ch;}

/* la question du client : c'est elle qui remplace le jargon — on part de ce
   qu'un patron d'entreprise demande, pas de ce que le serveur fait */
.decision .question{
  font-family:var(--display);font-style:italic;
  font-size:1.14rem;line-height:1.42;color:var(--champagne);
  border-left:1px solid var(--or);padding-left:clamp(.9rem,2vw,1.2rem);
  max-width:30ch;margin:1rem 0 0;
}

/* l'étiquette d'un bloc : la même partout, c'est la constante de la série */
.decision .etiquette{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;font-weight:500;
  text-transform:uppercase;color:var(--or);display:block;margin-bottom:.5rem;
}

/* ------------------------------ 01 · le carrefour ---------------------- */
.d-carrefour{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
}
@media (max-width:820px){.d-carrefour{grid-template-columns:1fr;gap:1.3rem;}}
.d-carrefour h3{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.14;max-width:19ch;}
.voies{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.4rem,3vw,2.5rem);margin-top:clamp(1.6rem,3vw,2.2rem);
}
@media (max-width:820px){.voies{grid-template-columns:1fr;gap:1.4rem;}}
.voie{border-top:1px solid var(--filet-sombre);padding-top:.9rem;}
.voie--tenue{border-top-color:var(--or);}
.voie p{margin:0;}
/* La voie écartée est plus pâle que celle qu'on a prise — mais pas au point
   d'être illisible : elle est DÉJÀ barrée par la rature. Mesuré sur ivoire
   #E9ECF1, le premier gris essayé (#6B747E) tombait à 4,01:1, sous le seuil de
   4,5 exigé pour un corps de texte. Celui-ci fait 4,78:1. */
/* Sur la nuit (29/09) : la voie écartée descend à .62 d'ivoire (≈ 6:1), la
   tenue monte au titre. L'écart de valeur entre les deux reste le même geste. */
.voie--ecartee p{color:rgba(228,230,234,.62);}
/* LA ROUTE BARRÉE ELLE-MÊME est plus claire que l'or sur les trois canaux
   (≈ 211,214,218 contre 196,161,90) : c'est la condition pour que
   `mix-blend-mode:lighten` la laisse INTACTE sous le trait. À .62, elle était
   plus sombre que l'or en rouge et en vert, et 42 % de ses pixels prenaient la
   couleur du trait (11 lettres sur 64 sous 4,5:1, mesuré le 29/09). Le reste de
   la phrase garde sa valeur plus basse : c'est la route écartée qu'on lit. */
.decision .route{color:rgba(233,236,241,.96);}
.voie--tenue p{color:var(--ivoire-titre);font-size:1.0938rem;line-height:1.46;}

/* ------------------------------ 02 · l'escalier ------------------------ */
.d-escalier h3{
  font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.12;max-width:20ch;margin-top:.7rem;
}
.d-escalier .question{margin-top:1.2rem;max-width:44ch;}
.escalier{display:grid;gap:1.1rem;margin-top:clamp(1.8rem,3.5vw,2.6rem);}
.marche{
  border-left:1px solid var(--filet-sombre);
  padding:.1rem 0 .1rem clamp(.9rem,2vw,1.2rem);max-width:46ch;
}
/* La seconde marche descend ET se décale : l'œil lit l'ordre avant le texte.
   Le décalage se prend en pourcentage de la largeur disponible pour que la
   diagonale existe encore sur un écran large — en rem fixes, elle se tassait
   contre la marge gauche d'un 1440.

   ⚠ 22 % NE SUFFISAIT PAS, et c'est mesuré : la seconde marche s'arrêtait à
   865 px sur un écran de 1440, laissant 40 % de largeur nue à droite. Une
   colonne de gauche qui s'arrête ne lit pas « escalier », elle lit « inachevé »
   — c'est le défaut refusé sur l'ancienne page tarifs. La marche part maintenant
   d'assez loin pour que son bord droit rejoigne la marge : le vide devient deux
   triangles opposés, c'est-à-dire une diagonale. */
.marche + .marche{margin-left:clamp(1.25rem,42%,26rem);border-left-color:var(--or);}
.marche p{margin:0;}
/* ⚠ 28/09/2026 — LA PHRASE ÉCARTÉE SUIT LA SECONDE MARCHE AU LIEU DE REVENIR
   À LA MARGE GAUCHE. Mesuré : le bloc de texte tenait dans x 188→660 et il
   restait 636 px nus à sa droite sur 400 px de haut, soit le plus gros trou de
   la feuille. En reprenant le décalage de la marche, la descente se lit d'un
   seul mouvement — gauche, droite, droite — et tout le papier libre se
   rassemble en bas à gauche, d'un seul tenant (règle du 05/09). */
@media (min-width:821px){
  .d-escalier .ecart{margin-left:clamp(1.25rem,42%,26rem);max-width:44ch;}
}

/* ------------------------------ 03 · l'exergue ------------------------- */
/* Le seul bloc qui casse la grille : il est POSÉ CONTRE LA MARGE DROITE, et
   tout le papier libre se rassemble à sa gauche, en un seul morceau.

   ⚠ CE BLOC FLOTTAIT, et c'est mesuré : 20 % de vide à gauche PLUS 46 % à
   droite sur un écran de 1440 — un bloc qui ne touche aucune des deux marges
   ne lit pas « décalé », il lit « posé n'importe où ». Le vide n'est un
   matériau que s'il est d'un seul tenant et qu'un bord tient la page. Le filet
   du haut, lui, reste pleine largeur : c'est lui qui ancre la composition. */
.d-exergue h3{
  font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.1;max-width:20ch;margin-top:1.2rem;
}
.d-exergue .question{max-width:46ch;}
/* ⚠ CE BLOC DOIT RESTER APRÈS LES TROIS RÈGLES CI-DESSUS : une media query
   n'ajoute aucune spécificité, elle ne gagne que par l'ordre du fichier. */
@media (min-width:901px){
  /* 55 % et pas 40 % : à 40 %, la colonne faisait 784 px et les lignes
     atteignaient une centaine de caractères — on gagnait la marge droite en
     perdant le confort de lecture. Ici la colonne reste sous les 75 caractères,
     et le titre se casse en plusieurs lignes : un pavé haut et étroit contre le
     bord droit, ce qui est justement la forme cherchée. */
  /* ⚠ 28/09/2026 — 40 % ET PAS 55 %. Sur la feuille resserrée, 55 % laissaient
     626 px de papier nu à gauche : le vide cessait d'être une marge pour
     devenir la moitié de la page. À 40 % le pavé garde son appui contre le
     bord droit (c'est lui qui tient la composition) et la colonne reste sous
     les 75 caractères. */
  .d-exergue{padding-left:clamp(2rem,40%,24rem);}
  /* même bord gauche ET même bord droit pour tout le bloc : des largeurs
     différentes donneraient un empilement en escalier, et l'escalier est
     déjà la forme d'à côté */
  .d-exergue h3,.d-exergue .question,.d-exergue .ecart{max-width:none;}
}

/* ------------------------- ce que nous avons écarté --------------------- */
/* La phrase barrée reste, et la rature avec : c'est le seul geste du site qui
   RETIRE. Le repli CSS de rature.css la barre même sans JavaScript. */
.decision .ecart{
  /* le filet pointillé est retiré (29/09) : l'étiquette « Ce que nous avons
     écarté » sépare déjà, et la section portait treize filets */
  margin-top:clamp(1.6rem,3vw,2.2rem);
  font-size:.9rem;line-height:1.62;color:rgba(228,230,234,.64);max-width:58ch;
}

/* ---------------------------- le tiroir technique ----------------------- */
/* `<details>` natif : aucun script, donc rien à réparer s'il n'arrive pas.
   Ce qui est rangé là n'est pas supprimé — les faits restent lisibles, mot
   pour mot, pour qui veut les lire. */
.decision details{margin-top:1.3rem;max-width:58ch;}
.decision summary{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:.7rem;
  min-height:44px;padding-block:.5rem;   /* cible tactile, comme `.appel` */
}
.decision summary::-webkit-details-marker{display:none;}
.decision summary::after{
  content:"";width:1.5rem;height:1px;background:var(--or);opacity:.7;
  transition:width .25s cubic-bezier(.4,0,.2,1);
}
.decision details[open] summary::after{width:.5rem;}
.decision details p{font-size:.875rem;line-height:1.66;color:rgba(228,230,234,.72);margin:.4rem 0 0;}
.decision details p + p{margin-top:.8rem;}

/* =========================== invitation =================================
   Seule section centrée du site : après quatre compositions en colonnes,
   l'axe fait office de point final.
   ======================================================================== */
.invitation .dans{display:flex;flex-direction:column;align-items:center;text-align:center;}
/* L'ÉTIQUETTE DE CETTE SECTION EST PARTIE LE 09/09/2026 (avec ses deux règles :
   la marge et le filet symétrique). Elle était la quatrième d'affilée sur la
   page, et la clôture n'a besoin de rien avant son titre. Un style mort qui
   remet en scène le motif qu'on vient de retirer finit toujours par ressortir. */
.invitation h2{max-width:16ch;margin-bottom:1.75rem;padding-top:clamp(.5rem,1.5vw,1.5rem);}
.invitation .chapo{color:rgba(228,230,234,.82);max-width:52ch;margin-bottom:2.75rem;}
.invitation .actions{justify-content:center;}

/* LE DÉROULÉ NUMÉROTÉ 01/02/03 A ÉTÉ RETIRÉ LE 04/09/2026 (avec ses styles) :
   troisième liste numérotée de la page. Ses trois faits sont conservés dans le
   chapô, en une phrase.
   À sa place, LA PORTE : le seul geste de la clôture, dans le langage d'appel du
   site (libellé en petites capitales + filet d'or), jamais un bouton plein.
   ⚠ Son adresse est un jalon volontaire (`mailto:ADRESSE-A-COMPLETER`) : voir le
   commentaire de index.html. Le vrai formulaire viendra à cet endroit. */
.porte{margin-top:clamp(2.5rem,5vw,3.5rem);}

/* `.attente` reste : la page /tarifs/ l'emploie encore. */
.attente{
  margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--filet-sombre);
  font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(228,230,234,.45);
}

/* =========================== pied ======================================= */
.pied{position:relative;z-index:1;background:var(--abysse);color:rgba(228,230,234,.5);padding:2.5rem var(--marge) 3rem;}
.pied .dans{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:baseline;justify-content:space-between;}
.pied .sig{width:2.9rem;height:auto;display:block;}
/* ⚠ LA LIGNE D'IDENTITÉ EST UNE MENTION LÉGALE, elle a donc sa PROPRE couleur,
   réglée ici et à un seul endroit (règle du 05/09 : deux alphas qui se
   multiplient font dériver un contraste sans que personne le lise). Elle
   héritait du .5 du pied : mesuré le 10/09/2026, 2,94:1 sur les pixels rendus,
   sous le seuil de 4,5 — sur les quatre pages. */
.pied .legal{
  font-size:.6875rem;line-height:1.6;max-width:62ch;
  color:rgba(228,230,234,.72);
}
/* La phrase « générées par intelligence artificielle » du pied de page est une
   obligation, pas une ligne d'adresse : mesurée lettre par lettre le 28/09, son
   I tombait à 2,81:1 sur un écran de densité 1 (graisse 400, alpha .72). Même
   remède que la porte et le film : demi-graisse, encre pleine. */
.pied .legal-ia{font-weight:600;color:rgba(233,236,241,.92);}

/* =========================== mouvement ==================================
   Loi du budget : le défaut du site est l'absence de mouvement.
   Les animations vivent dans no-preference — c'est le seul montage
   qui résiste à l'oubli d'un développeur.
   ======================================================================== */
/* LA COURSE SE MESURE EN LIGNES DE TEXTE, JAMAIS EN PIXELS FIXES.
   Relevé le 02/09/2026 sur une référence, image par image : le titre de 250 px et le
   paragraphe de 24 px sont libérés à la MÊME milliseconde — aucun retard n'est écrit
   nulle part. Ce qui les sépare, c'est que le titre parcourt 183 px en 3,2 fois plus de
   temps. Et ces 183 px ne sont pas un chiffre choisi : c'est 0,81 fois l'interligne du
   titre lui-même. D'où `lh`, l'unité qui vaut une hauteur de ligne de l'élément : le
   corps parcourt une ligne, un titre en parcourt 0,8 — et comme un titre a une ligne
   bien plus haute, il part de bien plus loin sans qu'on ait rien à régler.
   L'ordre de lecture se construit donc tout seul : le paragraphe se pose, le titre
   arrive après. Le plafond en pixels est là pour le téléphone, où un titre partirait
   sinon de si loin qu'il ferait sauter la mise en page.
   Le rétrécissement de 0,7 % ne se lit pas comme une échelle — trop faible — mais il
   se lit comme de la profondeur. La première déclaration est le repli des navigateurs
   qui ne connaissent pas `lh` : ils gardent 16 px et le reste fonctionne. */
@media (prefers-reduced-motion:no-preference){
  .rev{opacity:0;transform:translateY(16px);}
  .rev{transform:translateY(min(1lh,30px)) scale(.993);}
  .rev.vu{
    opacity:1;transform:none;
    transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
  }
}

.decision .ref{display:block;line-height:1.9;}


/* =========================================================================
   MOBILE — une expérience à part entière, pas une réduction.
   Bodoni est une Didone : ses déliés s'effacent en petit corps, on remonte
   donc la graisse. L'en-tête perd son libellé long, qui chevauchait la marque.
   ========================================================================= */
.court{display:none;}

@media (max-width:720px){
  :root{--u:3.5rem;--marge:1.375rem;}

  .long{display:none;}
  .court{display:inline;}

  .tete{padding:1rem var(--marge);gap:1rem;}
  .tete.collee{padding:.7rem var(--marge);}
  .tete .marque{font-size:.9rem;font-weight:600;letter-spacing:.22em;text-indent:.22em;}
  .appel{font-size:.625rem;letter-spacing:.14em;gap:.6rem;}
  .appel::after{width:22px;}
  .appel:hover::after{width:34px;}

  /* les Didones s'affinent en petit : on compense par la graisse */
  h1,h2{font-weight:500;}
  .metier h3,.decision h3{font-weight:600;}
  h1{font-size:2.9rem;line-height:1.06;letter-spacing:-.01em;}
  h2{font-size:2.05rem;line-height:1.14;}
  .metier h3{font-size:1.3rem;}
  /* le titre d'une décision porte désormais TOUT le message (les paragraphes
     d'explication sont partis dans le tiroir) : il remonte d'un cran. */
  .d-carrefour h3,.d-escalier h3,.d-exergue h3{font-size:1.58rem;line-height:1.16;}

  .ouverture{padding-top:7.5rem;padding-bottom:0;}
  .ouverture h1{max-width:none;margin-bottom:1.75rem;}
  .definition{font-size:1rem;line-height:1.62;margin-bottom:2.25rem;}
  .actions{gap:1.35rem;flex-direction:column;align-items:flex-start;}
  .invitation .actions{align-items:center;}
  .discret{color:rgba(228,230,234,.72);}

  .ouv-grille{grid-template-columns:1fr;gap:2.75rem;}
  .ouv-socle{
    flex-direction:column;gap:.6rem;margin-top:2.5rem;
    font-size:.5625rem;letter-spacing:.16em;
  }

  /* le numéro passe au-dessus : il ne mange plus 13 % de la largeur */
  .metier{grid-template-columns:1fr;gap:.45rem;padding:1.35rem 0;}
  .metier .n{padding-top:0;}
  .metier p{font-size:.9375rem;line-height:1.5;}

  .serment{font-size:1.4rem;line-height:1.4;padding-left:1.1rem;}
  .engagements{gap:1.5rem;margin-top:2.5rem;}

  .decision{padding-top:1.2rem;}
  .decision .ref{line-height:1.5;}
  .decision p{font-size:.9688rem;line-height:1.58;}
  .decision .question{font-size:1.08rem;}
  /* en une colonne, l'escalier ne peut plus se décaler : c'est l'étiquette
     (« D'abord » / « Seulement ensuite ») qui porte l'ordre à elle seule */
  .marche + .marche{margin-left:1.1rem;}

  .pied .dans{flex-direction:column;gap:1rem;}
}

/* LES TRÈS PETITS ÉCRANS (iPhone SE et assimilés, 320 px).
   « du premier écran » est volontairement insécable — c'est le seul groupe du
   titre qui le reste. Mesuré au banc, il pèse 301 px en corps 46,4 pour 276 px
   de colonne : il débordait de 25 px, invisiblement, sous l'`overflow:hidden`
   de l'ouverture. Le corps du titre descend donc d'un cran ici, et là seulement.
   Relevé après correction : ligne la plus longue 263 px pour 276 disponibles.
   La règle vaut pour tous les `h1` du site : à 320 px, aucun n'a besoin de 46 px. */
@media (max-width:360px){
  h1{font-size:2.5rem;}
}

/* =========================== la traversée ===============================
   Pièce 03 du plan : en quittant le premier écran, le tunnel s'ouvre, une
   phrase traverse le vide, la matière se referme. L'opacité de la phrase et
   l'ouverture du tunnel sont pilotées par hero.js via --traversee (0 → 1). */
.traversee{
  min-height:135vh;position:relative;z-index:1;
  display:grid;place-items:center;padding:20vh var(--marge);
}
.traversee .phrase{
  font-family:var(--display);font-weight:500;text-align:center;
  font-size:clamp(1.7rem,4.2vw,3.1rem);line-height:1.22;letter-spacing:-.006em;
  color:var(--ivoire-titre);max-width:20ch;margin:0;text-wrap:balance;
  opacity:var(--traversee,1);
  transform:translateY(calc((1 - var(--traversee,1)) * 18px));
  will-change:opacity,transform;
}
.traversee .phrase .point-d-or{color:var(--or);}
@media (prefers-reduced-motion:reduce){
  .traversee{min-height:70vh;padding:var(--u) var(--marge);}
  .traversee .phrase{opacity:1;transform:none;}
}

/* =========================== l'offre ====================================
   REFAITE LE 10/09/2026 — Enzo : « la planche de prix pas sur un fond bleu
   espace, on peut faire quelque chose de mieux ».

   CE QUI A ÉTÉ RETIRÉ, ET POURQUOI. `.plateau` était un rectangle bordé d'un
   filet fin sur ses quatre côtés, suivi de trois lignes de prix filetées
   alignées à droite : l'audit de la DA nomme exactement cet objet — « plateau
   encadré d'un filet fin + lignes de prix alignées à droite = tableau
   tarifaire standard » — depuis le 01/09, et personne ne l'avait traité. Un
   cadre posé sur un fond fait toujours lire le fond comme un décor derrière
   une pièce rapportée ; c'est ça, le « fond bleu espace », bien plus que la
   couleur (mesurée au banc : #0A0B0D exactement, pas une trace de bleu).

   LE FOND EST DONC LA NUIT PLEINE, ASSUMÉE — et il le reste : décision d'Enzo
   du 04/09/2026, le ciel étoilé n'a rien à faire derrière des montants, il les
   fait flotter. Les autres sections sombres sont des voiles (la scène continue
   derrière) ; celle-ci pose un fond nuit plein et neutralise le sien, sans quoi
   le dégradé de `.nuit::before` s'y superposerait. Le papier, lui, ne pouvait
   pas venir ici : les décisions viennent de le prendre un écran plus haut, et
   deux surfaces claires qui se suivent referaient le document qu'on vient de
   défaire.

   LA FORME PROPRE DE CETTE SECTION : un seul objet typographique en tête — le
   nombre, énorme, et calées contre son pied les deux lignes qui le qualifient.
   Il tient la marge gauche, tout le vide se rassemble à sa droite d'un seul
   tenant (règle du 05/09 : un bord tient la page). Aucune grille, aucune ligne
   répétée : il n'y a plus rien à lire comme un tableau.

   LE DÉTAIL COÛTEUX : le montant écrit AUSSI EN TOUTES LETTRES, comme sur un
   acte. Une seule fois sur le site. ⚠ Les chiffres elzévir ont été essayés et
   refusés par la mesure — notre Cormorant sous-ensemblé n'a pas la table
   `onum` (10/09/2026 : largeur et boîte d'encre identiques au pixel près entre
   `normal`, `oldstyle-nums` et `lining-nums`, alors que le témoin sépare bien
   Cormorant 500 / 700 / Georgia). La règle n'est donc pas écrite. */
.offre{background:var(--abysse);}
.offre::before{display:none;}

/* LE MONTANT — l'ouverture de la section. Un chiffre, pas une étiquette en
   petites capitales : c'est le reproche n°1 d'Enzo qu'on retire ici, et la DA
   autorise nommément « une image, une question, un chiffre, une phrase seule,
   ou rien du tout ». Aucune autre section du site n'ouvre par un chiffre.
   Les trois lignes sont calées sur le PIED du nombre (`align-items:baseline`
   les mettrait sur sa ligne de base, c'est-à-dire trop haut d'une descendante) :
   un seul objet, pas trois éléments empilés. */
.montant{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:0 clamp(1rem,2.5vw,2.2rem);margin:0 0 clamp(1.6rem,3.5vw,2.8rem);
}
.montant-nombre{
  font-family:var(--display);font-weight:500;line-height:.92;
  font-size:clamp(3.4rem,8.5vw,7rem);color:var(--or);white-space:nowrap;
  letter-spacing:-.01em;
}
/* Le montant en toutes lettres : bas de casse, italique, champagne — le
   registre de l'acte, jamais celui de l'étiquette de prix. */
.montant-lettres{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.05rem,2.1vw,1.55rem);line-height:1.2;
  color:var(--champagne);padding-bottom:.15em;
}
/* La mention hors taxes est OBLIGATOIRE sous un montant affiché. Sa couleur se
   règle ICI et à un seul endroit — jamais par une opacité de section (règle du
   05/09 : deux alphas qui se multiplient font dériver un contraste sans que
   personne le lise). Mesurée sur les pixels rendus, pas sur la valeur calculée. */
.prix-note{
  display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(228,230,234,.72);padding-bottom:.45em;
}
.montant .prix-note{flex-basis:100%;padding-bottom:0;margin-top:.55rem;}
@media (min-width:901px){
  /* au large, la mention se range sous le montant en toutes lettres, alignée
     sur lui — le nombre garde la marge pour lui seul */
  /* `1fr auto` sur les rangées : la première absorbe le vide, si bien que les
     deux petites lignes se tassent contre le PIED du nombre au lieu de flotter
     à mi-hauteur. C'est ce calage qui en fait un seul objet et non trois
     éléments empilés à côté d'un chiffre. */
  .montant{display:grid;grid-template-columns:auto minmax(0,1fr);
           grid-template-rows:1fr auto;align-items:end;
           gap:0 clamp(1rem,2.5vw,2.2rem);}
  .montant-nombre{grid-row:span 2;}
  .montant .prix-note{flex-basis:auto;margin-top:.5rem;}
}

.offre h2{max-width:16ch;}
.offre .detail{
  margin:1.1rem 0 0;font-size:.9688rem;line-height:1.6;
  color:rgba(228,230,234,.72);max-width:52ch;
}
/* ⚠ 28/09/2026 — LE TITRE TIENT LA GAUCHE, LE DÉTAIL PREND LA DROITE.
   Mesuré sur la version précédente : 95 % des lignes de la section s'arrêtaient
   avant le premier tiers et les deux tiers droits restaient noirs de haut en
   bas. Le fond nuit était le bon remède au « fond bleu espace » ; il ne
   dispensait pas de tenir la page. Le montant ouvre pleine largeur, la ligne
   du bas tient déjà les deux marges — il ne manquait que cette rangée. */
@media (min-width:901px){
  .offre .dans{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0 clamp(2rem,5vw,5rem);align-items:end;
  }
  .offre .montant,.offre .pied-offre{grid-column:1 / -1;}
  .offre h2{grid-column:1;margin-bottom:0;}
  .offre .detail{grid-column:2;margin-top:0;max-width:44ch;}
}
/* L'ancien titre de la section n'a pas été jeté : il est devenu la phrase qui
   envoie à la carte, ce qui est exactement ce qu'il disait. */
.renvoi{
  font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.3;color:var(--ivoire-titre);
  margin:0;max-width:24ch;
}
.pied-offre{margin-top:clamp(2.4rem,5vw,4rem);}
.offre .actions{margin-top:1.4rem;}
@media (min-width:901px){
  /* la ligne qui tient les deux marges : renvoi à gauche, appels à droite */
  .pied-offre{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:clamp(2rem,5vw,5rem);
    border-top:1px solid var(--filet-sombre);padding-top:clamp(1.4rem,2.5vw,2rem);
  }
  .pied-offre .actions{margin-top:0;flex:0 0 auto;}
}

/* =========================== /tarifs ==================================== */
.tarifs-tete{padding-top:clamp(7rem,14vh,10rem);}
.tarifs-tete h1{font-size:clamp(2.6rem,6vw,4.6rem);max-width:16ch;}
.sur-devis{border-top:1px solid var(--filet-sombre);}
.sur-devis .metier p{max-width:60ch;}
.mention-cadre{
  margin-top:clamp(2rem,4vw,3rem);padding:1.2rem 1.4rem;
  border:1px solid var(--filet-sombre);
  font-size:.875rem;line-height:1.6;color:rgba(228,230,234,.62);max-width:70ch;
}

/* =========================== le plan ====================================
   La hauteur de la section EST la durée du plan. La toile reste collée
   pendant ce temps — c'est ce qui donne la sensation de conduire l'image.

   Les deux raccords (pilotés par sequence.js) : le noir se lève à l'entrée,
   la lumière monte à la sortie et rejoint le blanc de la section suivante.
   Sans eux, le plan « apparaissait » puis « s'arrêtait » sur une page blanche. */
.plan{position:relative;height:560vh;z-index:1;}
.plan + .plan{margin-top:0;}

/* LE VOYAGE D'ENTRÉE est plus court que le film : 79 images contre 165, donc moins
   de durée à dépenser. 560vh sur 79 images demanderait 71vh de défilement par image
   — le visiteur pousserait longtemps pour rien. 260vh en donne 33, la même cadence
   au doigt que le film. C'est la hauteur qui règle la vitesse, pas le JS. */
/* ⚠ 310vh ET PAS 260 DEPUIS LA SOUDURE DU 09/09/2026. La séquence est passée de
   79 à 114 images : les 35 dernières sont le plan qui fait SORTIR les cordes du
   cadre pour finir sur le décor de l'accueil lui-même. Sans allonger la course,
   le film défilerait 44 images par écran au lieu de 30 — la corde sauterait.
   310vh en donne 37 : un peu plus vif que le film, ce qui est juste pour une
   sortie. C'est la hauteur qui règle la vitesse, pas le JS. */
.voyage{height:310vh;}
/* Il n'a pas de texte incrusté : sa mention légale se pose en bas, discrètement,
   et rien d'autre ne doit s'y ajouter — le titre du site vient juste après.

   ⛔ NE PAS REMETTRE D'OPACITÉ ICI. Une règle `.voyage .plan-note{opacity:.5}`
   se multipliait avec l'alpha de la couleur : la mention obligatoire tombait à
   3,55:1 sur ordinateur et 1,76:1 sur téléphone (mesuré le 05/09/2026), c'est-à-dire
   invisible. Une mention qu'on ne peut pas lire ne remplit pas l'obligation de
   l'article 50 : discrète oui, illisible non. Le contraste se règle dans la
   couleur de `.plan-note`, une seule fois, pour qu'il reste mesurable. */
/* LE FONDU DE SORTIE DU VOYAGE. La scène 3D tourne DERRIÈRE toute la page :
   il suffit donc que la toile s'efface pour qu'on passe du film à l'accueil
   sans aucune coupe — c'est le « continu » demandé par Enzo le 09/09/2026.
   ⚠ LA VALEUR PAR DÉFAUT EST 0, donc opacité 1 : sans JavaScript, script en
   404 ou mouvement réduit, la toile et son image de repli restent PLEINES.
   Un fondu ne doit jamais être l'état d'attente. */
.voyage .plan-colle{opacity:calc(1 - var(--sortie,0));}
.plan-colle{
  position:sticky;top:0;height:100vh;overflow:hidden;
  /* LA PREMIÈRE IMAGE EN FOND, ET C'EST UNE RÈGLE DE REPLI, PAS UNE DÉCORATION.
     Le <canvas> est transparent tant qu'aucun script ne l'a peint : sans JS, ou
     si sequence.js tombe en 404, le premier écran du site — 2,6 écrans de haut —
     était un rectangle NOIR (mesuré : 0,2 % de pixels non noirs). C'est le seul
     endroit du site où le repli n'était pas l'état ouvert. La toile recouvre ce
     fond dès la première image tracée, donc rien ne change quand tout va bien. */
  background:var(--abysse) url(/ouverture/f001.webp) center/cover no-repeat;
}
.plan-colle canvas{display:block;width:100%;height:100%;}
/* LE VOILE DE PIED DE PLAN — il ne sert qu'à porter la mention légale.
   Il est SOUS les textes (z-index 4 contre 5) et au-dessus de la toile, il ne
   touche que le dernier tiers du cadre, et il s'efface avec la toile puisqu'il
   est dans `.plan-colle`. Mesure avant/après sur l'image la plus claire de la
   séquence : 3,0:1 → au-delà du seuil de 4,5. Il ne monte pas plus haut : un
   voile qui couvre la moitié du plan éteindrait le film. */
.plan-voile{
  position:absolute;left:0;right:0;bottom:0;height:34%;z-index:4;pointer-events:none;
  /* .84 au pied et pas .72 (29/09) : sur f091, même une encre blanche pure ne
     dépassait pas 5,89:1 sous la mention, et le « i » tombait à 4,23 */
  background:linear-gradient(180deg,rgba(10,11,13,0) 0%,rgba(10,11,13,.38) 50%,rgba(10,11,13,.84) 100%);
}

/* le raccord d'entrée : on sort du noir.
   ⚠ LA VALEUR PAR DÉFAUT EST 0, ET C'EST VOLONTAIRE. À 1, tout plan dont le
   script n'a pas encore tourné — mouvement réduit, JS coupé, fichier en 404 —
   restait masqué par un rectangle noir plein écran, définitivement. Un voile
   ne doit jamais être le comportement de repli : il se lève, il ne se pose. */
.plan-colle::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--abysse);opacity:var(--entree,0);
}
/* LE RACCORD DE SORTIE S'ACCORDE À CE QUI SUIT, et il faut le lui dire.
   La lumière qui envahit le cadre était faite pour rejoindre le papier de la
   garantie. Le 02/09/2026 la maison s'est intercalée entre les deux — une section
   NOIRE — et l'embrasement est resté : mesuré, noir → 92 % de blanc → noir, un
   flash de 700 px qui n'annonce plus rien, avec un saut de luminance de 141/255.
   Le raccord ne se déclenche donc plus que si la section porte `data-sortie`,
   c'est-à-dire si la suivante est vraiment claire. Sans l'attribut, le plan
   s'éteint dans le noir et la maison prend la suite dans la même valeur. */
.plan-colle::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:0;
  background:var(--papier);
}
.plan[data-sortie="papier"] .plan-colle::after{opacity:var(--sortie,0);}

.plan-texte{
  position:absolute;left:var(--marge);bottom:clamp(3rem,9vh,6rem);z-index:5;
  max-width:min(30rem,70vw);
  opacity:calc(1 - var(--texte-out,0));
  transform:translateY(calc(var(--texte-out,0) * -14px));
}
.plan-texte .sur{color:var(--or);}
.plan-texte .sur::after{background:var(--filet-sombre);}
.plan-phrase{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.2;letter-spacing:-.004em;
  color:var(--ivoire-titre);margin:0;text-wrap:balance;
  text-shadow:0 2px 24px rgba(10,11,13,.75);
}
/* LA MENTION LÉGALE DES IMAGES GÉNÉRÉES (article 50). Elle doit rester discrète
   ET rester lisible : l'alpha et le corps sont ici les seuls réglages, et ils se
   mesurent sur les PIXELS rendus, pas sur la couleur calculée. L'ombre porte le
   texte quand le plan passe sur une matière claire (la corde en gros plan). */
/* ⛔ 28/09/2026 — L'OPACITÉ `--texte-out` EST RETIRÉE D'ICI, ET ELLE NE DOIT PAS
   REVENIR. Mesuré au banc : la mention tombait à 0,000 d'opacité alors que
   l'image générée était encore à 1,000 et occupait 100 % de l'écran (PC au
   défilement 1569, téléphone 1105) ; la toile, elle, ne commence à s'effacer
   qu'après (--sortie). Pendant environ 1 000 px de défilement, une image
   fabriquée par une machine était à l'écran SANS sa mention. C'est exactement
   la faute du 05/09 (1,76:1), mais en pire : zéro.
   `--texte-out` emporte la PHRASE d'accroche, qui n'a aucune obligation.
   ⛔ 30/09/2026 — ET ELLE NE PREND PLUS NON PLUS LE FONDU DE LA TOILE. Posée
   dans `.plan-colle`, elle s'effaçait AVEC elle (opacité 1 − --sortie) :
   mesuré sous 4,5:1 pendant ~150 px de défilement sur PC et ~90 px sur
   téléphone, alors que les cordes restaient nettement visibles (toile à
   66 → 14 %). « Disparaître ensemble » voulait dire : illisible avant
   l'image. Elle vit donc dans `.plan-mention`, un calque plein cadre du
   voyage HORS de la toile, collée au bas de l'écran : pendant le fondu elle
   reste pleine, et son fond ne fait que s'assombrir (le film s'efface vers
   la nuit), donc son contraste ne peut que monter.
   Elle part d'un coup quand la toile n'est plus qu'un voile de 1,5 % (bascule
   nette, pas un fondu : `clamp(0, x × 1000, 1)` vaut 0 ou 1 — ce n'est pas
   une opacité qui se multiplie à une autre). Pourquoi pas à 0 : sequence.js
   lisse sa course et s'arrête à --sortie ≈ 0,997, jamais 1 ; la mention
   serait restée, seule, à monter sur le haut de l'accueil.
   En mouvement réduit ou sans script (pas de fondu), la toile sort par le
   haut : le calque DÉPASSE le bas du voyage de 4,75 rem (le retrait de
   1,35 rem + deux à trois lignes de mention), si bien que la mention, une
   fois décollée du bas de l'écran, chevauche le bord bas du film au lieu de
   le précéder — elle passe sous l'en-tête APRÈS la dernière ligne du film
   (mesuré : sans ce dépassement, 40 px de film restaient sans mention). */
/* ⚠ Le voyage ne forme PLUS de contexte d'empilement (z-index:auto, pas 1) :
   l'ouverture qui le suit est une `.sec` (z-index 1) et, arrivée après dans
   la page, elle recouvrait la partie de la mention qui la chevauche — son
   voile la noircissait (le piège de couture du 29/09). Sans contexte, le
   calque de la mention (5) passe au-dessus d'elle, et rien d'autre ne
   bouge : la toile collée forme son propre contexte, reste sous le grain
   (2) et au-dessus de la scène (0), comme avant ; les deux sections ne se
   recouvrent nulle part ailleurs. */
.voyage{z-index:auto;}
.plan-mention{
  position:absolute;top:0;left:0;right:0;bottom:-4.75rem;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:1.35rem;
}
.voyage .plan-mention{opacity:clamp(0, calc((.985 - var(--sortie,0)) * 1000), 1);}
.plan-note{
  position:sticky;bottom:1.35rem;align-self:flex-end;margin-right:var(--marge);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(228,230,234,.92);text-align:right;max-width:22rem;
  text-shadow:0 1px 8px rgba(10,11,13,.9);
  /* graisse 600 (29/09/2026) : en 11 px et graisse 400, sur un écran de
     densité 1, le fût du I tombe à cheval sur deux pixels et plafonne à
     5,19:1 sur du NOIR PUR — mesuré de 3,03 à 4,55 sur les images claires,
     voile compris. La porte a réglé ce défaut le 11/09 de la même façon. */
  font-weight:600;
}

/* la jauge de chargement : le plan ne démarre pas tant qu'il ne peut pas être
   joué d'un bout à l'autre — un plan qui saute est pire qu'un plan qui attend */
.plan-jauge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  width:min(14rem,40vw);height:1px;background:rgba(228,230,234,.14);
  transition:opacity .5s ease;
}
.plan-jauge span{
  display:block;height:100%;background:var(--or);
  transform:scaleX(0);transform-origin:left;transition:transform .2s linear;
}
.plan.chargé .plan-jauge{opacity:0;}

@media (max-width:720px){
  .plan{height:460vh;}
  /* ⚠ SANS CETTE LIGNE, LE VOYAGE HÉRITE DE LA HAUTEUR DU FILM. Les deux sont
     des .plan ; la règle générique est ici PLUS BAS dans le fichier que
     `.voyage{height:260vh}`, donc à égalité de spécificité c'est elle qui
     gagne. Mesuré le 04/09/2026 : sur un écran de 390 px, le premier plan du
     site faisait 4,6 écrans de défilement au lieu de 2,6 — deux écrans de
     corde en trop, sur le seul passage qu'un visiteur voit toujours. */
  .voyage{height:262vh;}   /* même cadence qu'en grand écran, 114 images */
  /* 8 px était le corps le plus petit du site, sur la mention la plus obligatoire. */
  .plan-note{align-self:stretch;margin:0 var(--marge);max-width:none;text-align:left;font-size:.625rem;}
  .plan-texte{bottom:clamp(4.5rem,12vh,7rem);}
}
@media (prefers-reduced-motion:reduce){
  .plan{height:100vh;}
  .plan-colle::before,.plan-colle::after{display:none;}
  /* ⚠ 28/09/2026 — LA SOUDURE N'EXISTAIT PAS ICI, ET PERSONNE NE L'AVAIT VU.
     Tout le travail du 09/09 (« un continu, pas deux pages ») passe par le
     fondu `--sortie`, que sequence.js remet volontairement à zéro en mouvement
     réduit : la photographie s'arrêtait donc NET, sur une ligne horizontale
     pleine largeur. Mesuré : 80,1 % des colonnes écartées de plus de 10
     niveaux à la jonction, médiane 11,40, maximum 108,40 — et la capture le
     montre à l'œil nu. Une préférence d'accessibilité ne doit pas rendre le
     site MOINS fini.
     Le remède ne bouge pas : c'est un masque, pas une animation. Le bas de la
     plaque se dissout dans le fond réel de la page (la section suivante est
     transparente : c'est la scène d'étoiles qui apparaît dessous), donc aucune
     bande plate ne vient remplacer la coupe.
     ⚠ LA MENTION NE PREND PAS LE MASQUE : elle n'est plus dans la toile
     (`.plan-mention`, hors de `.plan-colle`), donc elle reste pleine au pied
     de l'écran. Elle était remontée à 20 % du bas pour y échapper, et de là
     elle passait sous l'en-tête pendant que le bas du film restait visible
     (630 → 815 px sur PC, 595 → 765 sur téléphone) : elle sort maintenant
     avec le bord bas du voyage, la dernière. */
  .voyage .plan-colle{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,0) 100%);
  }
  .voyage .plan-voile{height:44%;}
}

/* =========================== les raccords de section ====================
   Le reproche « c'est saccadé, il n'y a pas de vraies transitions » portait
   sur les passages sombre → clair : deux sections se succédaient bord à bord,
   comme une coupe au montage. On coud désormais chaque bord.

   1. Les sections claires montent SUR le fond sombre par le haut, adoucies
      par un dégradé : on ne voit plus la ligne de coupe.
   2. Elles repartent de même par le bas.
   3. La cascade des révélations est décalée d'un enfant à l'autre — les
      éléments n'arrivent plus tous d'un bloc. */
.ivoire,.garantie{position:relative;}
.ivoire::before,.garantie::before,
.ivoire::after,.garantie::after{
  content:"";position:absolute;left:0;right:0;height:clamp(4rem,10vh,9rem);
  pointer-events:none;z-index:0;
}
.ivoire::before{top:0;transform:translateY(-100%);
  background:linear-gradient(180deg,rgba(233,236,241,0) 0%,rgba(233,236,241,.55) 62%,rgba(233,236,241,.92) 100%);}
.ivoire::after{bottom:0;transform:translateY(100%);
  background:linear-gradient(0deg,rgba(233,236,241,0) 0%,rgba(233,236,241,.55) 62%,rgba(233,236,241,.92) 100%);}
.garantie::before{top:0;transform:translateY(-100%);
  background:linear-gradient(180deg,rgba(243,245,248,0) 0%,rgba(243,245,248,.55) 62%,rgba(243,245,248,.92) 100%);}
/* `top:100%` et pas `bottom:0` + translateY(100%) (29/09) : la translation
   tombait sur une position fractionnaire et Chromium dessinait un filet noir
   d'un pixel physique à la jonction, mis à nu par `.garantie{z-index:2}` */
/* …et elle part de 1 et pas de .92 (29/09) : à .92, le haut de la couture
   faisait une marche de 243 à 224 d'une ligne à l'autre, qui se lisait comme
   un filet gris en travers de l'écran. */
.garantie::after{top:100%;
  background:linear-gradient(0deg,rgba(243,245,248,0) 0%,rgba(243,245,248,.55) 62%,rgba(243,245,248,1) 100%);}
.ivoire > *,.garantie > *{position:relative;z-index:1;}

@media (prefers-reduced-motion:no-preference){
  /* la cascade : chaque élément d'une même famille arrive un cran après le
     précédent, au lieu du bloc entier d'un coup */
  /* Le décalage entre deux voisins se règle en POURCENTAGE de la durée, pas en
     millisecondes absolues : quatre références indépendantes tombent sur la même loi,
     12 % pour des lignes ou des blocs. 12 % de 0,8 s = 0,096 s. */
  /* `.carte-ligne` a quitté ces trois lignes le 10/09/2026 : la grille de prix
     de l'accueil n'existe plus, et une cascade qui n'a plus personne à cascader
     est du style mort qui remet en scène l'objet qu'on vient de retirer. */
  .metier.rev,.engagement.rev,.decision.rev{transition-delay:0s;}
  .metier:nth-child(2),.engagement:nth-child(2){transition-delay:.096s;}
  .metier:nth-child(3),.engagement:nth-child(3){transition-delay:.192s;}
  .metier:nth-child(4),.engagement:nth-child(4){transition-delay:.288s;}
  .metier:nth-child(5){transition-delay:.384s;}
  .metier:nth-child(6){transition-delay:.48s;}
  .metier:nth-child(7){transition-delay:.576s;}

  /* les titres montent de bien plus bas et bien plus lentement que le corps : c'est ce
     décalage — et lui seul, aucun retard n'est écrit — qui fait qu'une page « se
     compose » au lieu de s'afficher. 0,8 ligne d'un titre vaut trois fois 1 ligne de
     corps ; 1,4 s contre 0,8 s. */
  h2.rev,h1.rev{transform:translateY(26px);}
  h2.rev,h1.rev{transform:translateY(min(.8lh,68px)) scale(.993);}
  h2.rev.vu,h1.rev.vu{transition-duration:1.4s;}
}


/* Le dernier plan garde sa phrase jusqu'au bout : elle arrive avec le nœud,
   sur l'écran où l'on demande le rendez-vous. Elle entre au lieu de sortir. */

/* =========================== l'étendue ==================================
   Les sept métiers accrochés à un fil qui serpente. Ce n'est plus une liste :
   c'est une seule main qui relie sept choses — la forme dit ce que le texte dit.
   Le fil se trace au défilement (main.js), les nœuds s'allument au passage. */
.etendue{padding-bottom:calc(var(--u) * 0.15);}   /* 1.2 laissait 3 écrans de noir avant le film */
.frise{
  position:relative;max-width:76rem;margin:clamp(3rem,7vw,6rem) auto 0;
  padding-inline:var(--marge);
}
.fil{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;
}
/* UN FIL ROND, PAS UN TRAIT.
   Ce qui distingue un fil d'or d'une ligne vectorielle, c'est le modelé : un
   cylindre est sombre sur le bord qui fuit la lumière, plein au centre, et il
   porte une arête claire là où il la prend. On empile donc cinq passes du même
   chemin, très légèrement décalées en x (la lumière vient de la gauche), au lieu
   d'un halo concentrique — un halo fait une lueur, il ne fait pas un fil.
   Le décalage est en unités de viewBox : ~0,06 vaut 0,7 px à l'écran. */
.fil-diffusion,.fil-ombre,.fil-corps,.fil-or,.fil-arete,.fil-trace,.fil-pointe{
  fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:var(--long,2000);
  stroke-dashoffset:calc(var(--long,2000) * (1 - var(--trace,1)));
}
.fil-diffusion{stroke:rgba(196,161,90,.075);stroke-width:7.5;}
.fil-ombre    {stroke:#2A1F0B;stroke-width:3.1;opacity:.85;}
.fil-corps    {stroke:#8A6A28;stroke-width:2.6;}
.fil-or       {stroke:url(#filOr);stroke-width:1.7;opacity:.55;}
.fil-arete    {stroke:#F0DDB4;stroke-width:.65;opacity:.42;}

/* LES BRINS DU TISSAGE — fabriqués par main.js, jamais écrits dans la page.
   Chacun a SA propre longueur (un brin qui s'enroule est plus long que l'axe),
   donc son propre dash : sans ça les trois brins ne s'écriraient pas ensemble. */
.brin{
  fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:var(--long-brin,2600);
  stroke-dashoffset:calc(var(--long-brin,2600) * (1 - var(--trace,1)));
}
/* trois nuances : le brin qui vient vers nous accroche la lumière, celui qui
   part derrière s'éteint — c'est ce contraste qui fait lire la torsade */
.brin-0{stroke:#503B12;stroke-width:1.30;opacity:.92;}   /* le brin qui fuit */
.brin-1{stroke:#B08C41;stroke-width:1.25;opacity:.90;}
.brin-2{stroke:#F4E4C0;stroke-width:1.15;opacity:.96;}   /* celui qui vient à nous */
/* le tracé de référence reste dans le document : c'est lui que main.js mesure
   et que les contrôles interrogent. Il ne peint rien. */
.fil-trace{stroke:none;}
/* la pointe : un tiret court et vif posé exactement là où le fil s'écrit */
.fil-pointe{
  stroke:#F6E8CC;stroke-width:2.6;opacity:.85;
  stroke-dasharray:3 6000;
  stroke-dashoffset:calc(var(--long,2000) * var(--trace,1) * -1);
  filter:drop-shadow(0 0 3px rgba(217,196,161,.85));
}
.frise:not(.en-cours) .fil-pointe{opacity:0;}

/* le point d'or de chaque métier : posé en CSS, donc parfaitement rond
   (un <circle> dans un SVG étiré devient un ovale) */
.etape::before{
  content:"";position:absolute;top:calc(50% - 4px);width:8px;height:8px;
  border-radius:50%;background:var(--or);
  box-shadow:0 0 0 5px rgba(196,161,90,.10);
  /* Un point s'allume quand LE FIL L'ATTEINT — classe .atteint posée par main.js.
     L'ancienne formule le calculait depuis la progression GLOBALE
     (opacity:calc(var(--trace) * 1.6 - .35)) : au premier point --trace vaut 0,07,
     donc l'opacité tombait à -0,24. Les deux premiers métiers n'avaient aucun
     point, le troisième était à 22 %. */
  opacity:.20;
  transition:box-shadow .4s ease,background .4s ease,opacity .45s ease;
}
.etape.atteint::before{opacity:1;}
.etape:nth-child(odd)::before{right:-5.4%;}
.etape:nth-child(even)::before{left:-5.4%;}
.etape:hover::before,.etape:focus-within::before{box-shadow:0 0 0 9px rgba(196,161,90,.16);}

.etapes{list-style:none;margin:0;padding:0;position:relative;z-index:1;}
.etape{
  position:relative;
  width:min(36ch,37%);
  display:flex;flex-direction:column;justify-content:center;
  height:clamp(13rem,17vw,16rem);        /* trame régulière : 1/7 de la frise, comme le fil */
}
.etape:nth-child(odd){margin-right:auto;text-align:left;}
.etape:nth-child(even){margin-left:auto;text-align:right;}

/* le détail coûteux : le numéro en Cormorant, immense, en contour d'or,
   qui déborde de son bloc — c'est lui qui casse la grille */
.chiffre{
  position:absolute;top:-.62em;z-index:-1;
  font-family:var(--display);font-weight:500;font-size:clamp(5rem,11vw,9.5rem);
  line-height:.8;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(196,161,90,.30);
  user-select:none;
}
.etape:nth-child(odd) .chiffre{left:-.09em;}
.etape:nth-child(even) .chiffre{right:-.09em;}

.etape h3{margin-bottom:.55rem;color:var(--ivoire-titre);padding-top:1.1rem;}
.etape p{margin:0;font-size:.9375rem;line-height:1.6;color:rgba(228,230,234,.74);}

@media (max-width:900px){
  /* le fil se redresse : il court à gauche, les métiers s'alignent contre lui */
  .frise{padding-left:calc(var(--marge) + 1.6rem);}
  .fil{left:var(--marge);width:2.2rem;}
  .fil-trace{stroke-width:.5;}
  .etape,
  .etape:nth-child(odd),
  .etape:nth-child(even){
    width:auto;margin:0;text-align:left;padding:1.15rem 0;min-height:0;
  }
  .etape:nth-child(even) .chiffre,
  .etape:nth-child(odd) .chiffre{left:auto;right:0;top:-.15em;font-size:4.4rem;}
  .etape::before,
  .etape:nth-child(odd)::before,
  .etape:nth-child(even)::before{left:-1.75rem;right:auto;top:1.9rem;}
}
@media (prefers-reduced-motion:reduce){
  /* le fil n'est plus une passe mais cinq : elles se révèlent toutes ensemble,
     donc elles se rendent toutes visibles ensemble */
  .fil-diffusion,.fil-ombre,.fil-corps,.fil-or,.fil-arete{stroke-dashoffset:0;}
  .fil-noeuds circle{opacity:1;}
  .etape::before{opacity:1;}      /* sans JS, aucune classe .atteint n'est posée */
}

/* --- le métier actif : celui que le fil vient d'atteindre ---
   Les autres reculent au lieu de disparaître : on garde tout lisible, mais
   l'œil sait où il en est. C'est l'arrêt sans l'arrêt. */
.frise.en-cours .etape{
  opacity:.42;
  transition:opacity .55s cubic-bezier(.16,1,.3,1);
}
.frise.en-cours .etape.actif{opacity:1;}

.etape h3{transition:color .5s ease;}
.etape.actif h3{color:#FFF;}

/* le point d'or grossit et s'auréole quand le fil l'atteint */
.etape::before{
  transition:box-shadow .5s cubic-bezier(.16,1,.3,1),
             transform .5s cubic-bezier(.16,1,.3,1),
             opacity .4s ease;
}
.etape.actif::before{
  transform:scale(1.6);
  background:#F6E8CC;                       /* le point s'allume, il ne grossit pas seulement */
  box-shadow:
    0 0 0 2px  rgba(246,232,204,.42),
    0 0 10px 2px rgba(217,196,161,.62),
    0 0 26px 6px rgba(196,161,90,.42),
    0 0 58px 16px rgba(196,161,90,.16);
  animation:pointAllume .78s cubic-bezier(.16,.84,.30,1) 1 both;
}
/* la luminescence : une onde qui s'ouvre une fois, à l'arrivée du fil.
   Elle ne boucle pas — un point qui clignote en permanence devient un voyant. */
@keyframes pointAllume{
  0%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(246,232,204,.70), 0 0 0 0 rgba(196,161,90,.55);
  }
  42%{
    transform:scale(2.05);
    box-shadow:0 0 0 3px rgba(246,232,204,.34),
               0 0 20px 7px rgba(217,196,161,.78),
               0 0 46px 16px rgba(196,161,90,.34);
  }
  100%{
    transform:scale(1.6);
    box-shadow:0 0 0 2px  rgba(246,232,204,.42),
               0 0 10px 2px rgba(217,196,161,.62),
               0 0 26px 6px rgba(196,161,90,.42),
               0 0 58px 16px rgba(196,161,90,.16);
  }
}

/* le chiffre du métier atteint se remplit un peu — le contour d'or s'épaissit */
.chiffre{transition:-webkit-text-stroke-color .6s ease,color .6s ease;}
.etape.actif .chiffre{-webkit-text-stroke-color:rgba(196,161,90,.55);}

@media (prefers-reduced-motion:reduce){
  .frise.en-cours .etape{opacity:1;}
  .etape.actif::before{transform:none;animation:none;}
  .fil-pointe{display:none;}
}

/* =========================== la navigation ==============================
   Discrète par construction : c'est le bouton d'entretien qui doit rester le
   seul geste doré de l'en-tête. Les onglets empruntent le point médian de la
   maison (.pt) — la même signature que partout ailleurs. */
.nav{
  display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.4rem);
  /* 29/09/2026 — la marge droite baisse d'autant que l'écart de `.tete` : les
     deux s'ADDITIONNAIENT entre la nav et l'appel (56 → 96 px à 1440), et de
     901 à ~980 px l'appel mordait la marge droite de 38 px (1,4 px au survol).
     Somme rétablie : 40 + 14 = 54 px à 1440, contre 56 avant le 28/09. */
  margin-left:auto;margin-right:clamp(0rem,1vw,1rem);
}
.nav a{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  /* `nowrap` : mesuré le 28/09/2026, « LA MÉTHODE » se cassait en deux lignes
     de 740 à 880 px et la rangée d'onglets perdait son alignement là où elle
     était déjà à l'étroit. L'alpha monte de .62 à .82 : au-dessus du film, les
     onglets ne faisaient que 2,47:1 (le voile de `.tete` fait le reste). */
  text-transform:uppercase;color:rgba(228,230,234,.9);text-decoration:none;
  /* graisse 600 (29/09) : en 500 les onglets restaient à 4,09:1 au-dessus du
     film — en 11 px, seule la demi-graisse passe 4,5 sur un écran de densité 1 */
  white-space:nowrap;font-weight:600;
  transition:color .25s ease;
}
.nav a:hover,.nav a:focus-visible{color:var(--ivoire-titre);}
@media (max-width:820px){
  .nav{gap:1.1rem;margin-right:1rem;}   /* 16 + 16 px ≈ les 33,6 d'avant le 28/09 */
  .nav a{font-size:.625rem;letter-spacing:.14em;}
}
@media (max-width:560px){
  /* en étroit, on ne garde que ce qui mène ailleurs : les tarifs.
     La méthode est à un défilement de distance, elle n'a pas besoin d'onglet. */
  .nav a[href^="#"]{display:none;}
}

/* =========================== l'impression ===============================
   Mesuré le 01/09/2026 : 28 des 30 blocs de la page s'imprimaient EN BLANC.
   Les textes arrivent en fondu au défilement (.rev → opacity:0 tant qu'ils
   n'ont pas été vus) ; à l'impression, rien ne défile, donc rien n'est révélé.
   Un prospect qui imprime la méthode ou les tarifs recevait des pages vides.
   La règle est courte parce que le site est déjà du texte sur fond : il suffit
   de rendre visible, d'inverser les fonds sombres et de retirer le décor. */
@media print{
  .rev{opacity:1 !important;transform:none !important;}
  #scene,.grain,.reglette,.fil,.tete .appel{display:none !important;}
  .tete{position:static;background:none;border:0;}
  body{background:#FFF;color:#101418;font-size:11pt;}
  .nuit,.abysse,.invitation{color:#101418;}
  .nuit::before,.abysse::before,.invitation::before{display:none;}
  .nuit h2,.abysse h2,.invitation h2,
  .nuit h3,.abysse h3,.invitation h3{color:#101418;}
  .nuit p,.abysse p,.invitation p,.etape p{color:#2B2F35;}
  .frise.en-cours .etape,.etape{opacity:1 !important;}
  .chiffre{-webkit-text-stroke-color:#8A6A28;}
  .plan,.plan-colle{display:none !important;}   /* un film ne s'imprime pas */
  .sec{padding-block:1.4rem;break-inside:avoid;}
  h2,h3{break-after:avoid;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#5A5F66;}
}

/* ========================== LES RACCORDS ================================
   Deux frontières du haut de page étaient nues : on passait du tunnel à la
   frise, puis de la frise au film, sans rien. Le principe retenu est celui
   qui marche déjà entre le film et la garantie — la matière qui FINIT une
   section OUVRE la suivante — au lieu d'un fondu au noir entre les deux.
   Ici c'est le fil d'or : il descend du point de la phrase jusqu'à la frise,
   puis il repart du septième métier et sort du cadre vers le film, qui
   s'ouvre sur deux fils croisés. Le fil du SVG part et arrive au centre
   (M50,0 … 50,1000), les raccords sont donc centrés eux aussi. */
.raccord{
  position:relative;height:38svh;min-height:13rem;
  display:flex;justify-content:center;pointer-events:none;
}
.raccord .filet{
  width:1.5px;height:100%;transform-origin:top;
  /* Par défaut le filet est ENTIER. Le tracé progressif n'est activé que si le
     JS a posé .js-raccords — sinon un `scaleY(var(--tire,0))` laisserait le filet
     à hauteur zéro chez tout visiteur sans JS. C'est le même piège que le
     `opacity:var(--traversee,0)` déjà corrigé sur ce site : la valeur de repli
     se met TOUJOURS du côté visible. */
  background:linear-gradient(180deg,
    rgba(196,161,90,0) 0%, rgba(196,161,90,.78) 16%,
    rgba(217,196,161,1) 58%, rgba(196,161,90,.62) 100%);
}
.js-raccords .raccord .filet{transform:scaleY(var(--tire,0));}
/* Le fil de la frise s'arrête au dernier point, mais la section garde son
   padding de fin : mesuré, 215 px de noir séparaient le fil du raccord et la
   continuité se cassait. Le raccord remonte donc le prendre là où il finit. */
/* LE RACCORD DE SORTIE ÉTAIT HUIT ÉCRANS DE NOIR.
   Mesuré le 02/09/2026 sur l'accueil, zone de contenu seule : de y=4547 à 4967, huit
   relevés d'affilée sous 0,5 % d'encre — 480 px de défilement où l'on ne voit rien
   qu'un filet de 1,5 px sur 1440 de large, soit un dixième de pour cent de l'écran.
   Le défaut existait avant les ajouts d'aujourd'hui, c'est vérifié en rejouant la
   version commitée. Le geste — le fil qui continue et sort du cadre — n'a pas besoin
   de 38 % d'écran pour se lire : 18 % suffisent, et le padding de la frise qui le
   précédait faisait double emploi avec lui. */
.raccord[data-raccord="sort"]{height:10svh;min-height:4.5rem;margin-top:calc(var(--u) * -1.15);}
/* celui qui SORT vers le film s'efface par le bas au lieu de s'y arrêter net */
.raccord[data-raccord="sort"] .filet{
  transform-origin:top;
  background:linear-gradient(180deg,
    rgba(217,196,161,1) 0%, rgba(196,161,90,.70) 44%, rgba(196,161,90,0) 100%);
}
/* la pointe : le grain vif qui trace, comme au bout du fil de la frise */
.raccord .filet::after{
  content:"";position:absolute;left:50%;top:calc(var(--tire,0) * 100%);
  width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:#F6E8CC;box-shadow:0 0 10px 2px rgba(217,196,161,.85),
                                0 0 26px 7px rgba(196,161,90,.35);
  opacity:calc(var(--tire,0) * 2.2 - .25);
}
@media (prefers-reduced-motion:reduce){
  .js-raccords .raccord .filet{transform:none;}   /* mouvement refusé : filet entier */
  .raccord .filet::after{display:none;}
}

/* LES TROIS MENTIONS QUI MANQUAIENT À LA GRILLE — un audit de douze studios français
   relevait que nos montants s'affichaient sans durée, sans condition de paiement et
   sans périmètre : seize prix nus nous rangeaient du côté bas du marché. Elles valent
   pour toute la carte, donc elles se posent une fois, en tête. */
.carte-cadre{
  list-style:none;margin:1.6rem 0 0;padding:0;
  display:grid;gap:.7rem;max-width:46ch;
}
.carte-cadre li{
  font-size:.9375rem;line-height:1.55;color:var(--encre);
  padding-left:1.1rem;position:relative;
}
.carte-cadre li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.42rem;height:1px;background:var(--bronze);
}
.carte-cadre b{color:var(--bleu);font-weight:600;}

/* L'accroche d'un groupe : une ligne qui dit ce qu'il est, avant la liste des prix. */
.metier-accroche{
  font-family:var(--display);font-size:1.18rem;line-height:1.35;
  color:var(--bleu);margin:0 0 .55rem;
}


/* Lien des mentions légales : discret, à l'or de la maison — jamais le bleu du navigateur.
   Il vit dans le pied de page de chaque page (obligation d'accessibilité de l'information, LCEN). */
.pied .legal a{color:#C4A15A;text-decoration:none;border-bottom:1px solid rgba(196,161,90,.4);padding-bottom:1px;transition:border-color .25s}
.pied .legal a:hover,.pied .legal a:focus-visible{border-bottom-color:#C4A15A}