/* LE TUNNEL du connecteur Kaordia (#60.2, à la charte Kaordia depuis #60.5) — son style, et celui de la page de connexion.
   ⛔ Rien n'est chargé chez un tiers : la police (Inter, OFL) et le logo sont servis par la vitrine (/vitrine/…).
   ⭐ LA CHARTE vient du projet « Socle Kaordia Initial » (/srv/projects/kaordia/frontend) — chaque couleur dit son fichier :
      public/kaordia-symbol.svg, kaordia-lockup-horizontal(-white).svg   le logo, son bleu marine, son vert, ses deux gris-bleu
      src/theme/palette.ts                                               le vert Kaordia, et la règle des nuances (mélange en LAB)
      src/styles/variables.css                                           Inter, les neutres (échelle Zinc), l'alerte, l'erreur, les rayons
      src/styles/login.css                                               le fond de marque clair et son halo marine
   ⛔ Aucune autre couleur : les nuances DÉRIVENT de celles-ci (color-mix), comme le fait palette.ts.
   ⭐ (#165) LA RÈGLE DE HAUTEUR : avec le script (« js » sur <html>) et un écran d'au moins 600 px de haut, la page fait
      EXACTEMENT la hauteur de la fenêtre (100dvh : la barre d'adresse d'un téléphone comprise) — bandeau, en-tête,
      l'étape, la barre du bas — et RIEN ne défile. Ce qui ne rentre pas dans une étape est un VOLET (.volet) ouvert
      par-dessus. ⛔ Ajouter du contenu à une étape, c'est rejouer tests/banc-tunnel.sh (six tailles d'écran).
      Sous 600 px de haut (téléphone couché) ou sans script, la page redevient une page qui défile : rien n'est coupé.
   ⭐ (#165) LA RÈGLE DU MOUVEMENT : --court (.2s) et --pas (.24s), rien de plus long, rien en boucle, rien qui change
      une taille ; le texte n'attend jamais une animation. « Réduire les animations » coupe tout (fin du fichier).
   ⭐ (#189) LA RÈGLE DU PREMIER INSTANT (recette refusée : les chiffres arrivaient estompés) : ce qui entre PART DE
      VISIBLE — un court déplacement, ⛔ jamais un fondu depuis l'invisible ni un état estompé, ⛔ aucun délai, moins de
      300 ms. Seules les pièces d'un DESSIN (data-des) attendent leur pas ; les tuiles de chiffres, jamais.
      scripts/vitrine/mesurer-le-premier-instant.mjs le mesure à la première image (étape ③ de tests/banc-tunnel.sh).
   ⭐ (#182) LA DIRECTION EST CLAIRE (choisie à la recette, guichet n° 5222) : aucune étape sur fond marine ; le texte et les
      bords sont les mélanges du thème de /admin (charte/theme.css). ⛔ Les chiffres de la page : tests/test_vitrine.py. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
             src: url("/vitrine/inter.woff2") format("woff2"); }
:root {
  --marine: #1e2c52;            /* kaordia-symbol.svg — les traits du K */
  --vert: #39a935;              /* kaordia-symbol.svg — le noyau ; palette.ts « Kaordia (vert) » */
  --ardoise: #5a768c;           /* kaordia-lockup-horizontal.svg — la signature */
  --brume: #aebfce;             /* kaordia-lockup-horizontal-white.svg — la signature sur fond marine */
  --fond: #F4F6F9;              /* login.css — le fond de marque clair */
  --blanc: #FFFFFF;             /* variables.css --color-white */
  --papier: #FBFBFC;            /* variables.css --color-cream */
  --perle: #ECECEF;             /* variables.css --color-pearl */
  --trait: #E4E4E7;             /* variables.css --color-slate-200 */
  --encre: #18181B;             /* variables.css --color-ink */
  --graphite: #3F3F46;          /* variables.css --color-graphite */
  --gris: #71717A;              /* variables.css --color-slate */
  --alerte: #C98A1E;            /* variables.css --color-warning */
  --erreur: #CF4A45;            /* variables.css --color-error */
  /* les nuances — la règle de palette.ts : vers le blanc pour les claires, vers le noir pour les foncées, en LAB */
  --vert-fonce: color-mix(in lab, var(--vert), black 30%);
  --vert-doux: color-mix(in lab, white, var(--vert) 12%);
  --marine-fonce: color-mix(in lab, var(--marine), black 30%);
  --marine-doux: color-mix(in lab, white, var(--marine) 5%);
  --alerte-fonce: color-mix(in lab, var(--alerte), black 50%);
  --alerte-doux: color-mix(in lab, white, var(--alerte) 12%);
  --erreur-fonce: color-mix(in lab, var(--erreur), black 30%);
  --erreur-doux: color-mix(in lab, white, var(--erreur) 12%);
  --rayon: 14px;                /* variables.css --radius-xl */
  --rayon-petit: 10px;          /* variables.css --radius-lg */
  --ombre: 0 1px 2px rgb(30 44 82 / .06), 0 12px 32px rgb(30 44 82 / .10);
  --elan: cubic-bezier(.2, .8, .2, 1);   /* variables.css --ease-out */
  --court: .2s;                 /* une couleur, un contour */
  --pas: .24s;                  /* une entrée, un pas de schéma — ⛔ moins de .3s (#189) */
  /* (#182) les mélanges du thème de /admin (charte/theme.css : « texte », « texte-second », « bordure ») */
  --texte: color-mix(in srgb, var(--marine) 60%, black);
  --texte-second: color-mix(in srgb, var(--marine) 55%, var(--ardoise));
  --bord: color-mix(in srgb, var(--brume) 45%, white);
  --ombre-carte: 0 1px 2px rgb(30 44 82 / .05), 0 24px 60px rgb(30 44 82 / .12);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 9rem; }
body {
  margin: 0; color: var(--encre); background: var(--papier); overflow-x: hidden;
  font: 17px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.025em; color: var(--marine); }
h1 { font-size: clamp(1.5rem, 1rem + 2.6vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.08rem; font-weight: 650; letter-spacing: -.015em; }
h4 { font-size: .98rem; font-weight: 650; letter-spacing: -.01em; margin-bottom: .2em; }
p { margin: 0 0 1em; }
a { color: var(--marine); }
img { display: block; }
.large { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

.bandeau .lien-relecture { margin-left: .8rem; color: inherit; font-weight: 700; text-underline-offset: .2em; }
.bandeau {
  margin: 0; padding: .3rem 1rem; text-align: center; font-size: .8rem; font-weight: 600;
  background: var(--alerte-doux); color: var(--alerte-fonce); border-bottom: 1px solid color-mix(in lab, white, var(--alerte) 30%);
}

/* ── l'en-tête : le logo Kaordia, la progression 1 · 2 · 3, le compte ───────────────────────────────────── */
.tete { position: sticky; top: 0; z-index: 5; background: var(--blanc); border-bottom: 1px solid var(--perle); }
.tete-ligne { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "marque fil compte";
              align-items: center; gap: .4rem 1.5rem; padding: .5rem 0; }
.marque { grid-area: marque; display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.marque-texte { display: flex; flex-direction: column; line-height: 1; }
.marque-nom { font-size: 1.5rem; font-weight: 700; letter-spacing: -.024em; color: var(--marine); }
.marque-sous { margin-top: .22rem; font-size: .62rem; font-weight: 600; letter-spacing: .23em; text-transform: uppercase; color: var(--ardoise); }
.compte { grid-area: compte; display: flex; align-items: center; gap: .5rem; }
.compte form { display: block; margin: 0; }

.fil { grid-area: fil; justify-self: center; }
.fil ol { display: flex; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.fil li { display: flex; align-items: center; gap: .4rem; }
.fil li + li::before { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: var(--trait); transition: background var(--court); }
.fil a { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .7rem .25rem .25rem; border-radius: 999px; white-space: nowrap;
         color: var(--gris); text-decoration: none; font-size: .92rem; font-weight: 600; transition: background var(--court), color var(--court); }
.fil a:hover { background: var(--marine-doux); color: var(--marine); }
.fil-n { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: .85rem; font-weight: 700;
         background: var(--blanc); color: var(--gris); border: 2px solid var(--trait); transition: background var(--court), color var(--court), border-color var(--court); }
.fil .actuel a { color: var(--marine); }
.fil .actuel .fil-n { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
.fil .fait .fil-n { background: var(--vert); border-color: var(--vert); color: var(--blanc); }
.fil .fait a { color: var(--graphite); }
.fil li.fait + li::before { background: var(--vert); }
.jauge { display: none; height: 3px; background: transparent; }
.js .jauge { display: block; }
.jauge span { display: block; height: 100%; background: var(--vert); transform-origin: 0 50%; transform: scaleX(.1667); }   /* sans transition : seule l'étape qui entre se déplace */
body[data-etape="2"] .jauge span { transform: scaleX(.3334); }
body[data-etape="3"] .jauge span { transform: scaleX(.5); }       /* (#275.3) six étapes */
body[data-etape="4"] .jauge span { transform: scaleX(.6667); }
body[data-etape="5"] .jauge span { transform: scaleX(.8334); }
body[data-etape="6"] .jauge span { transform: none; }

/* ── les boutons, les liens ─────────────────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.4rem;
  border: 2px solid var(--marine); border-radius: 999px; background: var(--marine); color: var(--blanc);
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--court), border-color var(--court), color var(--court);
}
.bouton:hover { background: var(--marine-fonce); border-color: var(--marine-fonce); }
.bouton:disabled { opacity: .6; cursor: wait; }
.bouton-petit { padding: .32rem .9rem; font-size: .86rem; border-width: 1.5px; }
.bouton-contour { background: transparent; color: var(--marine); border-color: color-mix(in lab, white, var(--marine) 30%); }
.bouton-contour:hover { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
.bouton-vert { background: var(--vert); border-color: var(--vert); color: var(--marine-fonce); }
.bouton-vert:hover { background: color-mix(in lab, white, var(--vert) 80%); border-color: color-mix(in lab, white, var(--vert) 80%); }
.fleche { display: inline-block; }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }
h1:focus, h2:focus, h3:focus { outline: none; }
.lien-clair { color: var(--marine); font-weight: 600; text-underline-offset: .25em; text-decoration-color: var(--vert); text-decoration-thickness: 2px; }
.lien-volet { font-weight: 600; font-size: .92rem; color: var(--marine); text-underline-offset: .25em; text-decoration-color: var(--vert); text-decoration-thickness: 2px; }
.lien-retour { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ardoise); text-decoration: none; transition: color var(--court); }
.lien-retour:hover { color: var(--marine); }

/* ── une étape, sa scène ────────────────────────────────────────────────────────────────────────────── */
.scene { padding-block: clamp(.7rem, 2.6vh, 2rem); }
.surtitre { margin: 0 0 .7em; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ardoise); }
.intro { max-width: 68ch; margin-bottom: 0; color: var(--texte-second); font-size: 1.02rem; }
.titre-etape { max-width: 26ch; margin-bottom: .35em; }
.liens-bas { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin: 0; }

/* ── (#182) LA DIRECTION CLAIRE, choisie par Guillaume à la recette (guichet n° 5222) : les trois étapes sur le fond de
      marque clair et son halo (login.css), le texte aux mélanges du thème de /admin (charte/theme.css, « texte » et
      « texte-second »), les cartes blanches au même bord et à la même ombre. ⛔ Plus de fond marine plein écran. ── */
.etape { color: var(--texte);
         background: radial-gradient(760px 460px at 96% -8%, rgb(57 169 53 / .16), transparent 62%),
                     radial-gradient(680px 480px at -8% 108%, rgb(30 44 82 / .09), transparent 60%), var(--fond); }

/* ── étape 1 : l'accroche à gauche, et « comment ça marche » dans sa carte ───────────────────────────── */
/* (#189) la carte « comment ça marche » prend les deux tiers : son dessin est le héros de l'étape */
.scene-1 { display: grid; grid-template-columns: minmax(0, .64fr) minmax(0, 1.36fr); gap: clamp(1.2rem, 3vw, 2.8rem); align-items: center; }
.accroche h1 { max-width: 15ch; font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.chapo { margin-bottom: 0; font-size: clamp(1rem, .9rem + .5vw, 1.2rem); color: var(--texte-second); max-width: 46ch; }
/* les trois atouts : une liste cochée — ⛔ pas des pastilles, qui se lisaient comme des boutons */
.atouts { display: flex; flex-direction: column; gap: .45rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.atouts li { display: flex; align-items: center; gap: .6rem; font-size: .98rem; font-weight: 600; }
.atouts li::before { content: "✓"; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
                     background: var(--vert-doux); color: var(--vert-fonce); font-size: .8rem; font-weight: 800; }
.voir-preuves { margin: 1.2rem 0 0; font-size: .95rem; }

.comment { display: flex; flex-direction: column; min-height: 0; padding: clamp(.8rem, 1.6vw, 1.3rem);
           background: var(--blanc); border: 1px solid var(--bord); border-radius: calc(var(--rayon) + 6px); box-shadow: var(--ombre-carte); }
.comment-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* dit aux lecteurs d'écran : les onglets le montrent */
.onglets { display: none; }
.js .onglets { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; padding: .25rem; margin-bottom: 1rem; border-radius: 999px; background: var(--fond); }
.onglets button { padding: .42rem .3rem; border: 0; border-radius: 999px; background: transparent; color: var(--ardoise);
                  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background var(--court), color var(--court); }
.onglets button:hover { color: var(--marine); }
.onglets button[aria-selected="true"] { background: var(--marine); color: var(--blanc); }
.encarts { display: grid; gap: 1.6rem; min-height: 0; }
.encart { display: flex; flex-direction: column; min-height: 0; }
.encart h3 { margin: 1rem 0 .3rem; font-size: 1.15rem; }
.encart p { margin: 0; color: var(--texte-second); font-size: .95rem; }
/* avec le script : les trois encarts occupent LA MÊME case — passer de l'un à l'autre ne déplace rien */
.js .encarts { flex: 1; gap: 0; }
.js .encart { grid-area: 1 / 1; }
.js .encart:not(.actif) { visibility: hidden; }
.js .encart.entre .chiffres { animation: pose var(--court) var(--elan); }   /* (#189) les tuiles se posent : visibles dès la première image */

/* ── LES SCHÉMAS : un cadre « schema » = UN DESSIN (svg, viewBox 340 × 124) et TROIS TUILES (.chiffres) dessous. Ce qui
      porte data-des="n" ARRIVE au pas n — page.js pose « la ». Sans script : tout est là. Avec : le dessin prend la
      hauteur qui reste (il rétrécit, les tuiles et le texte jamais). ── */
.schema { display: flex; flex-direction: column; gap: clamp(.6rem, 1.6vh, 1.1rem); min-height: 0; font-family: inherit; }
.js .schema { flex: 1 1 0; }
.schema svg { display: block; width: 100%; height: auto; max-height: 17rem; overflow: visible; background: var(--fond); border-radius: var(--rayon);
              padding: clamp(.4rem, 5vh - 1.6rem, 1.5rem) clamp(.4rem, 1vw, .8rem); }
.js .schema svg { flex: 1 1 0; height: 0; min-height: 0; max-height: none; }
.schema text { fill: var(--texte-second); font-size: 8px; font-weight: 500; }
.schema .s-fort { fill: var(--marine); font-size: 9.4px; font-weight: 700; }
.schema .s-p { font-size: 7.4px; fill: var(--ardoise); }
.schema .s-b { font-size: 7.4px; font-weight: 700; fill: var(--marine-fonce); }
.schema .s-clair { fill: var(--blanc); font-weight: 700; }
.schema .s-vert { fill: var(--vert-fonce); font-weight: 700; }
.schema .s-milieu { text-anchor: middle; }
.s-bulle { fill: var(--blanc); stroke: var(--brume); stroke-width: 1.2; }
.s-mails circle { fill: var(--brume); }
.s-l { fill: var(--perle); }
.s-noeud { fill: var(--blanc); stroke: var(--trait); stroke-width: 1.2; }
.s-fin-n { fill: var(--marine-doux); stroke: var(--brume); stroke-width: 1; }
.s-racine { fill: var(--marine); stroke: var(--marine); }
.s-qui { fill: var(--vert-doux); stroke: var(--vert); stroke-width: 1.6; }
.s-trait { fill: none; stroke: var(--brume); stroke-width: 1.2; stroke-linecap: round; }
.s-flux { stroke: var(--vert); stroke-width: 2.2; stroke-dasharray: 4 3; }
.s-badge { fill: var(--vert); }
.s-coche { fill: none; stroke: var(--blanc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* les trois tuiles : le chiffre (ou le mot) en gros, ce qu'il dit dessous */
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; flex: none; }
.chiffres li { padding: .8rem 1rem; border-radius: var(--rayon-petit); background: var(--blanc); border: 1px solid var(--bord); border-top: 3px solid var(--vert); }
/* (#189) EN VEDETTE : le chiffre est le plus gros texte de la carte ; une tuile « mot » est écrite moins gros (elle tient sur sa ligne) */
.chiffres b { display: block; font-size: clamp(1.5rem, .6rem + 2.3vw, 2.7rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--marine); }
.chiffres .mot b { font-size: clamp(1.15rem, .7rem + 1vw, 1.5rem); line-height: 1.15; }
.chiffres .long b { font-size: clamp(1.3rem, .5rem + 1.9vw, 2.1rem); }
.chiffres span { display: block; margin-top: .3rem; font-size: .88rem; line-height: 1.3; color: var(--texte-second); }
/* un pas du DESSIN : ce qui n'est pas encore arrivé est estompé (jamais absent : aucune taille ne change), puis il arrive.
   ⛔ (#189) jamais sur les tuiles (.chiffres) */
.js .schema svg [data-des] { opacity: .3; transition: opacity var(--pas) ease-out; }
.js .schema svg [data-des].s-sur { opacity: 0; }   /* ce qui se pose SUR une autre pièce n'est pas estompé par-dessus elle : il arrive */
.js .schema svg [data-des].la { opacity: 1; }

/* ── les volets : sans script, des blocs de la page ; avec, ils s'ouvrent PAR-DESSUS l'étape ─────────── */
.volet { width: min(1180px, 100% - 2.5rem); margin: 0 auto; padding: 1.5rem 0; color: var(--encre); }
.volet .intro { margin-bottom: 1rem; font-size: .96rem; }
.js .volet { display: none; position: fixed; z-index: 21; top: 50%; left: 50%; transform: translate(-50%, -50%);
             width: min(680px, 100% - 1.5rem); max-height: calc(100% - 1.5rem); overflow: auto; margin: 0;
             padding: clamp(1rem, 3vw, 1.7rem); background: var(--blanc); border-radius: calc(var(--rayon) + 6px);
             box-shadow: 0 24px 70px rgb(30 44 82 / .35); }
.js .volet.ouvert { display: block; animation: volet var(--court) ease-out; }
.volet > h2, .volet > h3 { margin: 0 2.4rem .5em 0; font-size: 1.3rem; }
.volet-ferme { position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
               border: 0; border-radius: 50%; background: var(--fond); color: var(--marine); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
               transition: background var(--court); }
.volet-ferme:hover { background: var(--perle); }
.voile { position: fixed; inset: 0; z-index: 20; background: rgb(30 44 82 / .55); }
@keyframes volet { from { opacity: .4; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes pose { from { transform: translateY(6px); } to { transform: none; } }
@keyframes surgit { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── ce qui est prouvé : une ligne par preuve, une seule dépliée ────────────────────────────────────── */
.preuves { display: grid; gap: .3rem; }
.preuves details { border: 1px solid var(--perle); border-radius: var(--rayon-petit); background: var(--papier); }
.preuves summary { display: flex; align-items: center; gap: .6rem; padding: .42rem .7rem; cursor: pointer; list-style: none; }
.preuves summary::-webkit-details-marker { display: none; }
.preuves summary::after { content: "+"; margin-left: auto; font-weight: 700; color: var(--ardoise); }
.preuves details[open] summary::after { content: "–"; }
.preuves details[open] { background: var(--blanc); border-color: var(--brume); }
.preuve-titre { font-size: .93rem; font-weight: 650; line-height: 1.25; color: var(--marine); }
.preuve { margin: 0; padding: 0 .7rem .6rem; color: var(--graphite); font-size: .86rem; line-height: 1.45; }
.etat { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .12rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.etat::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.etat-ok { background: var(--vert-doux); color: var(--vert-fonce); }
.etat-non { background: var(--perle); color: var(--graphite); }

/* ── étape 2 : les packs ────────────────────────────────────────────────────────────────────────────── */
.scene-2, .scene-3 { display: flex; flex-direction: column; gap: clamp(.7rem, 2.2vh, 1.6rem); }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.pack { display: flex; flex-direction: column; padding: clamp(1rem, 2.6vh, 1.7rem) 1.5rem; background: var(--blanc); border: 1px solid var(--bord); border-top: 3px solid var(--vert); border-radius: calc(var(--rayon) + 4px); box-shadow: var(--ombre-carte);
        transition: border-color var(--court); }
.pack:hover { border-color: var(--vert); }
.pack-jauge { display: flex; gap: .3rem; margin: 0 0 1rem; }
.pack-jauge span { width: 1.9rem; height: .42rem; border-radius: 999px; background: var(--perle); }
.pack-jauge .plein { background: var(--vert); }
.pack h3 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: .3em; }
.pack-qui { min-height: 5.4rem; }
.pack-taille { margin: 0; font-weight: 600; color: var(--texte); }
.pack-pour { margin: 0; color: var(--ardoise); font-size: .95rem; }
.pack-prix { margin: .8rem 0 1.1rem; padding-top: .9rem; border-top: 1px solid var(--perle); font-size: 1.2rem; font-weight: 700; color: var(--marine); }
.pack .bouton { margin-top: auto; }
/* (#275.4) le pack retenu par « Demander ce pack » (page.js) ; la ligne « Avec votre demande » du formulaire */
.pack.pack-choisi { border-color: var(--vert); box-shadow: 0 0 0 2px var(--vert), var(--ombre-carte); }
.recap { margin: 0; color: var(--graphite); font-size: .86rem; line-height: 1.35; }
#confirmation h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
#confirmation .notes .notes { margin-top: .3rem; font-size: .88rem; }
.notes { margin: 0; padding: 0; list-style: none; color: var(--graphite); font-size: .94rem; display: grid; gap: .5rem; }
.notes li { position: relative; padding-left: 1.4rem; }
.notes li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--vert); }

/* ── étape 3 : le formulaire, la suite, les mentions ─────────────────────────────────────────────────── */
.demande-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: stretch; min-height: 0; }
.fiche { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto minmax(5.6rem, 1fr) auto; gap: .7rem 1rem; min-height: 0;
         padding: clamp(.8rem, 2.4vh, 1.7rem) clamp(.8rem, 2vw, 1.7rem); background: var(--blanc); border: 1px solid var(--bord); border-radius: calc(var(--rayon) + 4px); box-shadow: var(--ombre-carte); }
.champ { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.champ-large { grid-column: 1 / -1; }
label { display: block; margin-bottom: .25rem; font-weight: 600; font-size: .88rem; color: var(--marine); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
input, select, textarea {
  width: 100%; padding: .55rem .8rem; border: 1.5px solid var(--trait); border-radius: var(--rayon-petit);
  background: var(--blanc); color: var(--encre); font: inherit; transition: border-color var(--court);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 4px rgb(57 169 53 / .16); }
textarea { resize: none; flex: 1; min-height: 3.6rem; }
.champ.manque input, .champ.manque select, .champ.manque textarea { border-color: var(--erreur); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message { margin: 0; padding: .7rem 1rem; border-radius: var(--rayon-petit); font-weight: 600; font-size: .93rem; animation: surgit var(--court) ease-out; }
.message.reussi { background: var(--vert-doux); color: var(--vert-fonce); border: 1px solid color-mix(in lab, white, var(--vert) 45%); }
.message.refus { background: var(--erreur-doux); color: var(--erreur-fonce); border: 1px solid color-mix(in lab, white, var(--erreur) 45%); }
.fiche > .message { grid-column: 1 / -1; }
/* avec le script, la réponse du formulaire se pose PAR-DESSUS, au pied de la fiche : elle ne déplace rien ; un clic la range */
.js .fiche > .message { position: absolute; z-index: 2; left: .6rem; right: .6rem; bottom: .6rem; box-shadow: var(--ombre); cursor: pointer; }
.ensuite { padding: clamp(.9rem, 2.4vh, 1.6rem) clamp(1rem, 2vw, 1.6rem); background: var(--blanc); border: 1px solid var(--bord); border-radius: calc(var(--rayon) + 4px); }
.etapes { margin: .8rem 0 0; padding: 0; list-style: none; counter-reset: etape; display: grid; gap: clamp(.5rem, 1.6vh, 1rem); }
.etapes li { counter-increment: etape; position: relative; padding-left: 2.7rem; }
.etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
                     border-radius: 50%; background: var(--marine); color: var(--blanc); font-weight: 700; font-size: .88rem; }
.etapes p { margin: 0; color: var(--texte-second); font-size: .9rem; line-height: 1.4; }
.petit { margin: 1rem 0 0; font-size: .86rem; color: var(--gris); }

/* ── (#275.3) étapes 3, 4 et 5 : « mes outils » (outils.js). Les listes défilent EN ELLES-MÊMES dans leur carte : l'étape,
      elle, tient dans l'écran. ⛔ Un outil « Autre » ne porte que .avertissement : ni état, ni case, ni combinaison. ── */
.scene-outils { display: flex; flex-direction: column; gap: clamp(.6rem, 2vh, 1.3rem); }
.sans-script { margin: 0; color: var(--texte-second); }
.js .sans-script { display: none; }
html:not(.js) .outils-grille, html:not(.js) .usages, html:not(.js) .combinaisons { display: none; }
.carte-blanche { display: flex; flex-direction: column; min-height: 0; padding: clamp(.7rem, 2vh, 1.3rem) clamp(.8rem, 2vw, 1.4rem);
                 background: var(--blanc); border: 1px solid var(--bord); border-radius: calc(var(--rayon) + 4px); box-shadow: var(--ombre-carte); }
.carte-blanche h3 { margin: 0 0 .5rem; }
.outils-grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(.8rem, 2.4vw, 2rem); min-height: 0; }
.outils-aide { margin: .4rem 0 0; min-height: 1.4em; font-size: .88rem; color: var(--texte-second); }
.outils-trouves, .outils-choisis, .possibilites, .combinaisons-liste { margin: .3rem 0 0; padding: 0; list-style: none; min-height: 0; overflow: auto; }
.outils-trouves { display: grid; gap: .3rem; flex: 0 1 auto; }
.trouve-bouton { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom plus" "sous plus"; align-items: center; column-gap: .8rem;
                 width: 100%; padding: .35rem .7rem; border: 1px solid var(--perle); border-radius: var(--rayon-petit); background: var(--papier);
                 font: inherit; text-align: left; cursor: pointer; transition: border-color var(--court), background var(--court); }
.trouve-bouton:hover:not(:disabled) { border-color: var(--vert); background: var(--blanc); }
.trouve-bouton:disabled { cursor: default; opacity: .7; }
.trouve-nom { grid-area: nom; font-weight: 650; font-size: .93rem; color: var(--marine); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trouve-sous { grid-area: sous; font-size: .78rem; color: var(--ardoise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trouve-plus { grid-area: plus; font-size: .82rem; font-weight: 700; color: var(--vert-fonce); }
.outil-autre { margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--perle); }
.outil-autre-ligne { display: flex; gap: .5rem; }
.outil-autre-ligne input { flex: 1; min-width: 0; }
.compte-choisis { font-weight: 500; color: var(--ardoise); }
.outils-choisis { display: grid; gap: .4rem; align-content: start; flex: 1 1 0; }
.choisi { padding: .4rem .6rem; border: 1px solid var(--bord); border-left: 3px solid var(--vert); border-radius: var(--rayon-petit); }
.choisi-autre { border-left-color: var(--alerte); }
.choisi-tete { display: flex; align-items: center; gap: .5rem; }
.choisi-nom { font-size: .93rem; color: var(--marine); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marque-autre { flex: none; padding: .05rem .5rem; border-radius: 999px; background: var(--alerte-doux); color: var(--alerte-fonce); font-size: .72rem; font-weight: 700; }
.retirer { flex: none; margin-left: auto; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%;
           background: var(--fond); color: var(--marine); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.retirer:hover { background: var(--perle); }
.choisi-etat { margin: .1rem 0 0; font-size: .8rem; color: var(--vert-fonce); }
.choisi-etat.etat-a_construire { color: var(--texte-second); }
.choisi-etat.etat-impossible { color: var(--erreur-fonce); }
.avertissement { margin: .25rem 0 0; padding: .35rem .6rem; border-radius: var(--rayon-petit); background: var(--alerte-doux); color: var(--alerte-fonce);
                 font-size: .82rem; font-weight: 600; line-height: 1.35; }
.outils-vide { margin: .3rem 0 0; font-size: .9rem; color: var(--texte-second); }
.outils-note { margin: .6rem 0 0; font-size: .85rem; color: var(--alerte-fonce); }
.js .scene-outils > .outils-grille, .js .scene-outils > .carte-blanche { flex: 1 1 0; }
.usages-onglets { display: flex; flex-wrap: wrap; gap: .3rem; padding-bottom: .6rem; border-bottom: 1px solid var(--perle); }
.usages-onglets button { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border: 1px solid var(--bord); border-radius: 999px;
                         background: var(--blanc); color: var(--ardoise); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
                         transition: background var(--court), color var(--court); }
.usages-onglets button[aria-selected="true"] { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
.usages-onglets .onglet-autre { border-style: dashed; }
.onglet-n { display: grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: var(--vert); color: var(--blanc); font-size: .72rem; }
.usages-panneau { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; padding-top: .6rem; }
.usages-panneau h3 { margin-bottom: .1rem; }
.possibilites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1rem; align-content: start; }
.possibilites li, .combinaison { display: flex; align-items: flex-start; gap: .55rem; padding: .3rem .2rem; }
.possibilites input, .combinaison input { flex: none; width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: var(--vert); }
.possibilites label, .combinaison label { margin: 0; white-space: normal; overflow: visible; font-weight: 500; font-size: .93rem; color: var(--texte); cursor: pointer; }
.combinaisons-liste { display: grid; gap: .3rem; align-content: start; flex: 0 1 auto; }
.combinaison { padding: .45rem .6rem; border: 1px solid var(--bord); border-radius: var(--rayon-petit); }
.combinaison-titre { display: block; font-weight: 650; color: var(--marine); }
.combinaison-sous { display: block; font-size: .8rem; color: var(--texte-second); }

/* ── la barre du bas : précédent · l'appel · suivant ────────────────────────────────────────────────── */
.barre { position: sticky; bottom: 0; z-index: 5; background: var(--blanc); border-top: 1px solid var(--perle); }
.barre-ligne { display: flex; align-items: center; gap: .6rem 1rem; padding: .55rem 0; }
.barre-marque { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--ardoise); }
.barre-droite { display: flex; align-items: center; gap: .6rem 1rem; margin-left: auto; }
html:not(.js) .barre [data-barre="suite"], html:not(.js) .lien-relecture { display: none; }

/* ── la relecture ───────────────────────────────────────────────────────────────────────────────────── */
.avis { margin-top: .9rem; }
.avis label { margin-bottom: .35rem; }
.avis textarea { display: block; min-height: 4.2rem; margin-bottom: .5rem; }
.avis .message { margin: .5rem 0 0; }
.js .avis:not([data-avis="general"]) { display: none; }
.js body[data-etape="1"] .avis[data-avis="etape-1"], .js body[data-etape="2"] .avis[data-avis="etape-2"],
.js body[data-etape="3"] .avis[data-avis="etape-3"], .js body[data-etape="4"] .avis[data-avis="etape-4"],
.js body[data-etape="5"] .avis[data-avis="etape-5"], .js body[data-etape="6"] .avis[data-avis="etape-6"] { display: block; }

/* ── d'une étape à l'autre : elle ENTRE, sans jamais cacher son texte ───────────────────────────────── */
.js .etape.entre .scene { animation: entre-avant var(--pas) ease-out; }   /* ⛔ sans « both » : une animation gardée ferait de la scène le repère de ses volets */
.js body[data-sens="arriere"] .etape.entre .scene { animation-name: entre-arriere; }
@keyframes entre-avant { from { transform: translateX(14px); } to { transform: none; } }      /* (#189) elle part de VISIBLE */
@keyframes entre-arriere { from { transform: translateX(-14px); } to { transform: none; } }

/* ── la page de connexion (sans session) ────────────────────────────────────────────────────────────── */
.entree { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem;
          background: radial-gradient(1200px 600px at 50% -10%, rgb(30 44 82 / .10), transparent 70%), var(--fond); }
.entree-carte { position: relative; overflow: hidden; width: min(420px, 100%); padding: 2.6rem 2rem 2.2rem; text-align: center;
                background: var(--blanc); border: 1px solid var(--perle); border-radius: calc(var(--rayon) + 6px); box-shadow: var(--ombre);
                animation: surgit var(--pas) ease-out; }
.entree-carte::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--marine) 0 70%, var(--vert) 70%); }
.entree-logo { display: grid; place-items: center; margin: 0 0 .5rem; }
.entree-nom { margin: 0; font-size: 2.3rem; font-weight: 700; letter-spacing: -.024em; line-height: 1; color: var(--marine); }
.entree-produit { margin: .5rem 0 0; font-size: .7rem; font-weight: 600; letter-spacing: .23em; text-transform: uppercase; color: var(--ardoise); }
.entree-carte h1 { margin: 1.8rem 0 .3rem; font-size: 1.35rem; }
.entree-phrase { margin: 0 0 1.6rem; color: var(--gris); }
.entree-boutons { display: grid; gap: .7rem; margin: 0; }

/* ── l'écran étroit ─────────────────────────────────────────────────────────────────────────────────── */
/* (#275.3) six étapes : hors des très grands écrans, seule l'étape à l'écran dit son nom (les autres, leur numéro) */
@media (max-width: 1600px) {
  .js .fil li:not(.actuel) .fil-t { display: none; }
  .js .fil li + li::before { width: 1.1rem; }
  .js .fil a { padding-right: .25rem; }
  .js .fil .actuel a { padding-right: .7rem; }
}
@media (max-width: 900px) {
  .tete-ligne { grid-template-columns: 1fr auto; grid-template-areas: "marque compte" "fil fil"; }
  .fil { justify-self: stretch; }
  .fil ol { justify-content: space-between; }
  .fil li + li::before { flex: 1; min-width: .6rem; }
  .fil li + li { flex: 1 1 auto; }
  .fil a { white-space: nowrap; }
  .scene-1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: clamp(.7rem, 2vh, 1.4rem); }
  .accroche h1 { max-width: none; }
  .atouts { display: none; }
  .demande-grille { grid-template-columns: minmax(0, 1fr); }
  .outils-grille { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .possibilites { grid-template-columns: minmax(0, 1fr); }
  .barre-marque { display: none; }
  /* les packs : trois lignes — le nom et sa jauge, la taille ; à droite le prix, le bouton */
  .packs { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .pack { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "nom jauge prix" "taille taille bouton"; align-items: center; gap: .15rem .8rem; padding: .6rem .9rem; }
  .pack-qui { display: contents; }
  .pack h3 { grid-area: nom; font-size: 1.2rem; margin: 0; }
  .pack-jauge { grid-area: jauge; margin: 0; }
  .pack-jauge span { width: 1.3rem; }
  .pack-taille { grid-area: taille; font-size: .86rem; line-height: 1.3; }
  .pack-pour { display: none; }
  .pack-prix { grid-area: prix; justify-self: end; margin: 0; padding: 0; border: 0; font-size: .92rem; }
  .pack .bouton { grid-area: bouton; margin: 0; padding: .4rem .9rem; font-size: .86rem; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 8rem; }
  .intro { font-size: .95rem; }
  .encart p { font-size: .88rem; line-height: 1.45; }
  .encart h3 { margin-top: .6rem; font-size: 1rem; }
  .comment { padding: .7rem; }
  .js .onglets { margin-bottom: .6rem; }
  .schema svg { padding: .5rem .3rem; }
  .chiffres { gap: .35rem; }
  .chiffres li { padding: .45rem .5rem; }
  .chiffres b { font-size: 1.05rem; }
  .chiffres .mot b, .chiffres .long b { font-size: 1rem; }
  .chiffres span { font-size: .7rem; line-height: 1.25; }
  /* au téléphone le dessin et les tuiles portent l'encart : sa phrase, et la seconde du chapô, restent sans script */
  .js .encart p, .js .si-place { display: none; }
  .js .encart h3 { text-align: center; }
  .voir-preuves { margin-top: .5rem; font-size: .88rem; }
  .chapo { line-height: 1.4; }
  .bandeau-suite { display: none; }
  input, select, textarea { padding: .4rem .6rem; }
  .fiche { gap: .5rem .7rem; }
}
@media (max-width: 520px) {
  .large { width: calc(100% - 2rem); }
  .tete-ligne { column-gap: .6rem; padding: .35rem 0; }
  .marque { gap: .45rem; }
  .marque img { width: 28px; height: 28px; }
  .marque-nom { font-size: 1.2rem; }
  .marque-sous { font-size: .52rem; letter-spacing: .2em; }
  .compte { gap: .35rem; }
  .compte .bouton { padding: .26rem .55rem; font-size: .74rem; }
  .fil a { padding: .15rem .35rem .15rem .15rem; font-size: .8rem; gap: .35rem; }
  .fil-n { width: 1.55rem; height: 1.55rem; }
  .fil li .fil-t { display: none; }        /* (#275.3) six étapes : au téléphone, les numéros seuls (le surtitre dit l'étape) */
  .fil li + li::before { min-width: .3rem; }
  .bandeau { padding: .2rem 1rem; font-size: .72rem; }
  .barre-ligne, .barre-droite { gap: .5rem; }
  .barre-ligne { padding: .45rem 0; }
  .barre .bouton { padding: .55rem .95rem; font-size: .9rem; }
  .barre [data-barre="retour-nom"] { display: none; }
  .barre .lien-retour { justify-content: center; width: 2.6rem; height: 2.6rem; border: 1.5px solid color-mix(in lab, white, var(--marine) 30%); border-radius: 50%; color: var(--marine); font-size: 1.1rem; }
  .onglets button { font-size: .84rem; }
  .surtitre { font-size: .68rem; margin-bottom: .5em; }
  .js .volet { width: calc(100% - 1rem); max-height: calc(100% - 1rem); padding: .9rem; }
  .volet > h2, .volet > h3 { font-size: 1.12rem; }
  .preuves { gap: .22rem; }
  .preuves summary { gap: .5rem; padding: .32rem .6rem; }
  .preuve-titre { font-size: .86rem; }
  .preuve { font-size: .82rem; line-height: 1.4; }
  .etat { padding: .1rem .45rem; font-size: .66rem; }
}
/* (#275.3) six étapes au fil, et des noms d'étape plus longs dans la barre : au petit téléphone, tout se resserre */
@media (max-width: 520px) {
  .fil ol, .fil li { gap: .25rem; }
  .js .fil a, .js .fil .actuel a { padding: 0; }
  .fil-n { width: 1.45rem; height: 1.45rem; font-size: .8rem; }
}
@media (max-width: 400px) {
  .barre-ligne, .barre-droite { gap: .4rem; }
  .barre .bouton { padding: .55rem .75rem; font-size: .86rem; }
  .barre .lien-retour { width: 2.4rem; height: 2.4rem; flex: none; }
  body[data-etape="3"] [data-barre="suite-nom"], body[data-etape="4"] [data-barre="suite-nom"],
  body[data-etape="5"] [data-barre="suite-nom"] { display: none; }
}
@media (max-width: 380px) {
  .compte .bouton { padding: .24rem .45rem; font-size: .7rem; }
  .marque-nom { font-size: 1.1rem; }
  .marque img { width: 26px; height: 26px; }
}

/* ── (#165) LA RÈGLE DE HAUTEUR — voir l'en-tête de ce fichier ──────────────────────────────────────── */
@media (min-height: 600px) {
  .js body { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
  .js .tete, .js .barre { position: static; }
  .js main { display: grid; min-height: 0; }
  /* ⛔ le filet : si une étape déborde quand même (texte agrandi par le lecteur), ELLE défile — rien n'est coupé.
     Aux six tailles du banc elle ne déborde pas : il mesure aussi ce débordement-là. */
  .js .etape { display: grid; min-height: 0; overflow: auto; }
  .js .scene { min-height: 0; height: 100%; }
  .js .scene-1 { grid-template-rows: minmax(0, 1fr); }
  .js .comment { align-self: stretch; max-height: 41rem; margin-block: auto; height: 100%; }
  .js .scene-2 > .packs { flex: 0 1 auto; }
  .js .scene-3 > .demande-grille { flex: 1 1 0; }
  .js .scene-2 { justify-content: center; }
}
@media (min-height: 600px) and (max-width: 900px) {
  .js .scene-1 { grid-template-rows: auto minmax(0, 1fr); }
  .js .comment { max-height: none; margin-block: 0; }
  .js .scene-3 > .demande-grille { flex: 1 1 0; max-height: 27rem; }
}
/* « comment ça se passe » est POSÉ dans la page quand elle a la place (écran large) : alors son lien disparaît */
@media (min-width: 901px) {
  .js .volet.volet-pose { display: block; position: static; transform: none; width: auto; max-height: none; overflow: visible; margin: 0; box-shadow: none; animation: none;
                          padding: clamp(.9rem, 2.4vh, 1.6rem) clamp(1rem, 2vw, 1.6rem); background: var(--blanc); }
  .js .volet-pose .volet-ferme, .js .lien-ensuite { display: none; }
  .volet-pose > h3 { font-size: 1.08rem; }
}
/* (#189) au téléphone les tuiles sont trois LIGNES — le chiffre en grand à gauche, ce qu'il dit à droite — et
   prennent la hauteur qui restait vide autour du dessin (lui est borné par la largeur de l'écran) */
@media (max-width: 760px) {
  .chiffres { grid-template-columns: minmax(0, 1fr); }
  .chiffres li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: .6rem; padding: .5rem .75rem;
                 border-top: 1px solid var(--bord); border-left: 3px solid var(--vert); }
  .chiffres b, .chiffres .long b { font-size: 1.5rem; white-space: nowrap; }
  .chiffres .mot b { font-size: 1.15rem; white-space: normal; }
  .chiffres span { margin-top: 0; font-size: .8rem; }
}
/* peu de hauteur : on garde l'essentiel */
@media (max-height: 700px) and (max-width: 760px) {
  .js .si-place, .js .chapo, .js .comment-titre { display: none; }
  .js .accroche .surtitre, .js .scene-tete .surtitre { display: none; }
  .js .accroche h1 { margin-bottom: .2em; }
  .js .encart h3 { display: none; }   /* (#182) l'onglet le dit déjà : la place va au dessin */
  .js .voir-preuves { margin-top: .25rem; }
  .chiffres li { grid-template-columns: 7.4rem minmax(0, 1fr); padding: .3rem .65rem; }
  .chiffres b, .chiffres .long b { font-size: 1.3rem; }
  .chiffres .mot b { font-size: 1.05rem; }
  .chiffres span { font-size: .74rem; line-height: 1.25; }
  .js .volet .intro, .js .scene-3 .intro { display: none; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .js .pack-qui { min-height: 4.6rem; }
  .js .etapes p { font-size: .84rem; }
}
/* (#189) portable peu haut : la phrase de l'encart cède sa place au dessin (elle reste sans script, et dans les preuves) */
@media (max-height: 800px) and (min-width: 901px) {
  .js .encart p { display: none; }
  .js .encart h3 { margin-top: .7rem; }
}

/* ── « réduire les animations » : tout est là, rien ne bouge ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .schema svg [data-des] { opacity: 1; }
}