/* accueil-v2 : thème + page (direction canvas v11). L'engine (scrollcraft.css)
   n'est jamais modifié ; tout passe par les tokens et le balisage de la page. */

:root {
  --sc-canvas:     #F5F4EF;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #1B1E22;
  --sc-ink-soft:   #5B6169;
  --sc-accent:     #2C51A3;   /* l'accent est l'encre du médecin */
  --sc-accent-ink: #F8F8F5;

  --sc-font-display: "Libre Franklin", system-ui, sans-serif;
  --sc-font-text:    "Libre Franklin", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --encre:           "Newsreader", Georgia, serif;

  --sc-shadow-color: 45 12% 30%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.09), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.12);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.08), 0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.14),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.10);
  --sc-edge: inset 0 1px 0 rgba(255,255,255,0.8);

  --papier: #FCFBF8;
  --trace:  #C7C3B8;
  --dim:    #C9CAC5;
  --lit:    rgba(44,81,163,0.14);
  --vote:   rgba(44,81,163,0.26);
}

body { background: var(--sc-canvas); }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }

/* ------------------------------------------------------------- chrome --- */
.bandeau {
  display: flex; gap: var(--sc-3); align-items: center;
  padding: var(--sc-2) var(--sc-gutter);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  border-bottom: 1px solid var(--sc-hairline);
  background: var(--sc-surface);
}
.bandeau .tag {
  font-family: var(--sc-font-mono); text-transform: uppercase;
  letter-spacing: var(--sc-track-wide); font-size: 0.68rem;
  color: var(--sc-accent); border: 1px solid currentColor;
  border-radius: var(--sc-r-sm); padding: 0.1rem 0.45rem;
}
.entete {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sc-4) var(--sc-gutter);
}
.marque { display: flex; gap: var(--sc-3); align-items: center; }
.carre { width: 0.9rem; height: 0.9rem; background: var(--sc-accent); border-radius: 2px; }
.nom-produit { display: block; font-weight: 600; letter-spacing: var(--sc-track-snug); }
.par { display: block; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.lien-connexion { font-size: var(--sc-t-sm); font-weight: 500; }
.liens-entete { display: flex; gap: var(--sc-5); align-items: center; }
.lien-contact { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* boutons */
.bouton {
  display: inline-block; text-decoration: none;
  font-weight: 600; font-size: var(--sc-t-sm);
  padding: 0.7rem 1.4rem; border-radius: var(--sc-r-sm);
  transition: transform var(--sc-d-fast) var(--sc-ease-out),
              box-shadow var(--sc-d-fast) var(--sc-ease-out),
              background-color var(--sc-d-fast) var(--sc-ease-out);
}
.bouton:active { transform: translateY(1px); }
.bouton-plein { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e1); }
.bouton-plein:hover { background: color-mix(in oklab, var(--sc-accent) 88%, black); box-shadow: var(--sc-e2); }
.bouton-contour { border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink); }
.bouton-contour:hover { border-color: var(--sc-ink); }
.bouton-mini { font-size: 0.78rem; padding: 0.4rem 0.85rem; }
.actions { display: flex; gap: var(--sc-3); flex-wrap: wrap; }

/* chrome persistant du voyage */
.mini-cta {
  position: fixed; top: 0.9rem; right: 1.4rem; z-index: 60;
  display: flex; gap: 0.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity 400ms var(--sc-ease-out);
}
.chrome-voyage .mini-cta { opacity: 1; pointer-events: auto; }
.chrome-voyage .mini-cta a { tab-index: 0; }
.etape-fixe {
  position: fixed; bottom: 0.8rem; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  color: var(--sc-ink-soft);
  opacity: 0; pointer-events: none;
  transition: opacity 400ms var(--sc-ease-out);
}
.chrome-voyage.avec-etape .etape-fixe { opacity: 1; }
.etape-n { font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: var(--sc-track-wide); }

/* ------------------------------------------------------------ arrivée --- */
.arrivee {
  position: relative;
  min-height: calc(100svh - 8rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sc-5); text-align: center;
  padding: 0 var(--sc-gutter) var(--sc-7);
}
.arrivee h1 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.2rem, 4.6vw, 3.7rem); line-height: 1.06;
  letter-spacing: var(--sc-track-tight); text-wrap: balance;
  max-width: 20ch; margin: 0;
}
.sous-titre {
  font-size: var(--sc-t-lg); line-height: 1.55; color: var(--sc-ink-soft);
  max-width: 56ch; text-wrap: pretty; margin: 0;
}
.sous-titre strong { color: var(--sc-ink); font-weight: 600; }
.position-legale {
  font-family: var(--encre); font-style: italic;
  font-size: var(--sc-t-lg); color: var(--sc-ink); margin: 0;
}
.garanties-rang {
  display: flex; gap: var(--sc-8); max-width: 58rem; text-align: left;
}
.garanties-rang h3 { font-size: var(--sc-t-base); font-weight: 600; margin: 0 0 0.25rem; }
.garanties-rang p { font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); margin: 0; text-wrap: pretty; }
.garanties-rang > div { flex: 1; min-width: 0; }
.voir-comment {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin-top: var(--sc-3);
}
.liens-legaux-arrivee {
  position: absolute; bottom: 0.8rem; right: 1.4rem;
  font-size: 0.75rem; color: var(--sc-ink-soft);
}

/* ------------------------------------------------------------- voyage --- */
.voyage { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.recit { grid-column: 1; }
.scene { grid-column: 2; grid-row: 1; align-self: stretch; }

.feuille {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; align-content: center; justify-content: center;
  padding: var(--sc-6);
}
.feuille::before {
  content: ""; position: absolute;
  /* jamais plus haut que les boutons fixes (0.9rem + ~2rem) */
  top: max(5svh, 3.4rem); bottom: 5svh;
  left: calc(50% - min(18rem, 21vw) - clamp(1.2rem, 2.5vw, 2.5rem));
  right: calc(50% - min(18rem, 21vw) - clamp(1.2rem, 2.5vw, 2.5rem));
  background: var(--papier);
  border: 1px solid var(--sc-hairline);
  border-radius: 3px;
  box-shadow: var(--sc-e3), var(--sc-edge);
}
.feuille > * { position: relative; width: min(36rem, 42vw); }
.fils {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 2;
}
.fils path { fill: none; stroke-linecap: round; }
.fil { stroke: var(--sc-accent); stroke-width: 1.4; }
.fil-gris { stroke: var(--trace); stroke-width: 1; }
.fil-casse { stroke: var(--sc-accent); stroke-width: 1.4; stroke-dasharray: 4 5; }
.no-js .fils, .no-js .mini-cta, .no-js .etape-fixe { display: none; }

.feuille-entete { margin-bottom: var(--sc-3); }
.f-label {
  font-family: var(--sc-font-mono); font-size: 0.66rem;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* la boîte à onglet */
.boite {
  position: relative; border: 1px solid var(--sc-hairline-strong);
  border-radius: 6px; padding: 1rem 0.9rem 0.8rem;
}
.boite::before {
  content: attr(data-label);
  position: absolute; top: -0.55em; left: 12px;
  background: var(--papier); padding: 0 7px;
  font-family: var(--sc-font-mono); font-size: 0.62rem;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* les étages du pipeline : hauteur et opacité pilotées par la phase */
.etage {
  overflow: clip;
  transition: max-height 700ms var(--sc-ease-in-out), opacity 600ms var(--sc-ease-out),
              margin 700ms var(--sc-ease-in-out);
  max-height: 0; opacity: 0; margin: 0;
}
.etage .boite { margin-top: 0.55em; }

/* --- notes ---------------------------------------------------------- */
.notes {
  font-family: var(--sc-font-mono);
  font-size: 0.82rem; line-height: 1.7; color: var(--sc-ink);
  transition: font-size 600ms var(--sc-ease-in-out), color 500ms var(--sc-ease-out);
}
.notes p { margin: 0 0 0.45em; }
.notes p:last-child { margin-bottom: 0; }
.frag { border-radius: 2px; transition: background 500ms var(--sc-ease-out), color 500ms var(--sc-ease-out), font-weight 200ms; }
.frag.lit { background: var(--lit); }

/* trois lectures sur le fait suivi, puis le vote */
.frag-suivi { box-decoration-break: clone; -webkit-box-decoration-break: clone; background-repeat: no-repeat; }
.frag-suivi.l1 {
  background-image: linear-gradient(rgba(44,81,163,0.22), rgba(44,81,163,0.22));
  background-size: 100% 0.35em; background-position: 0 92%;
}
.frag-suivi.l2 {
  background-image: linear-gradient(rgba(44,81,163,0.22), rgba(44,81,163,0.22)),
    linear-gradient(rgba(44,81,163,0.18), rgba(44,81,163,0.18));
  background-size: 100% 0.35em, 96% 0.35em; background-position: 0 92%, 4% 55%;
}
.frag-suivi.l3 {
  background-image: linear-gradient(rgba(44,81,163,0.22), rgba(44,81,163,0.22)),
    linear-gradient(rgba(44,81,163,0.18), rgba(44,81,163,0.18)),
    linear-gradient(rgba(44,81,163,0.15), rgba(44,81,163,0.15));
  background-size: 100% 0.35em, 96% 0.35em, 98% 0.35em; background-position: 0 92%, 4% 55%, 1% 18%;
}
.frag-suivi.vote {
  background-image: linear-gradient(var(--vote), var(--vote));
  background-size: 100% 100%; background-position: 0 0;
}

/* --- chips ----------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.4rem; }
.chip {
  font-size: 0.74rem; line-height: 1.3;
  border: 1px solid var(--sc-hairline-strong); border-radius: 6px;
  padding: 0.28rem 0.55rem; background: var(--sc-surface);
  box-shadow: var(--sc-e1);
  opacity: 0; transform: translateY(8px);
  transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out),
              color 500ms var(--sc-ease-out), border-color 500ms var(--sc-ease-out);
}
.chip em {
  display: block; font-style: normal;
  font-family: var(--sc-font-mono); font-size: 0.58rem;
  color: var(--sc-ink-soft); margin-top: 0.12rem;
}
.chip.on { opacity: 1; transform: none; }
.chip-suivi { border-color: var(--sc-accent); }

/* --- liste ----------------------------------------------------------- */
.liste { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.3rem; }
.groupe {
  display: flex; flex-direction: column; gap: 0.12rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out);
}
.groupe.on { opacity: 1; transform: none; }
.g-nom {
  font-family: var(--sc-font-mono); font-size: 0.56rem;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); padding-left: 0.5rem;
}
.ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.7rem;
  padding: 0.18rem 0.5rem; border-radius: 4px; font-size: 0.74rem;
  transition: color 500ms var(--sc-ease-out);
}
.ligne em {
  font-style: normal; font-family: var(--sc-font-mono);
  font-size: 0.56rem; color: var(--sc-ink-soft); white-space: nowrap;
}
.ligne-suivie { background: var(--lit); border: 1px solid var(--sc-accent); font-weight: 600; }
.ligne-suivie em { font-weight: 400; }

/* --- lettre ---------------------------------------------------------- */
.lettre { font-size: 0.82rem; line-height: 1.6; padding-top: 0.3rem; }
.slot {
  margin: 0 0 0.7em;
  opacity: 0; transform: translateY(6px);
  transition: opacity 650ms var(--sc-ease-out), transform 650ms var(--sc-ease-out),
              color 500ms var(--sc-ease-out);
}
.slot.on { opacity: 1; transform: none; }
.amoxi { border-radius: 2px; transition: background 500ms var(--sc-ease-out), font-weight 200ms; }
.douteux { border-radius: 2px; transition: background 500ms var(--sc-ease-out), color 500ms var(--sc-ease-out); }

/* hors des phases 6-7, ces blocs sortent du flux : sinon leur hauteur
   (invisible) gonfle la lettre et la fait déborder de la feuille */
.js .feuille:not([data-phase="6"]):not([data-phase="7"]) .ecart,
.js .feuille:not([data-phase="6"]):not([data-phase="7"]) .decision,
.js .feuille:not([data-phase="6"]):not([data-phase="7"]) .validation { display: none; }

.ecart {
  margin-top: var(--sc-4);
  border-left: 1px solid var(--sc-accent);
  padding-left: var(--sc-4);
  opacity: 0; transform: translateY(8px);
  transition: opacity 600ms var(--sc-ease-out), transform 600ms var(--sc-ease-out);
}
.ecart.on { opacity: 1; transform: none; }
.e-titre { display: block; font-weight: 600; font-size: 0.85rem; }
.e-detail { display: block; font-size: 0.72rem; color: var(--sc-ink-soft); max-width: 44ch; margin-top: 0.25rem; }

.decision {
  display: flex; gap: 0.6rem; margin-top: var(--sc-4); padding-left: var(--sc-4);
  opacity: 0; transition: opacity 600ms var(--sc-ease-out);
}
.decision.on { opacity: 1; }
.bouton-spec { font-weight: 600; font-size: 0.74rem; padding: 0.45rem 0.9rem; border-radius: 6px; }
.bouton-spec-plein { background: var(--sc-accent); color: var(--sc-accent-ink); }
.bouton-spec-contour { border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink); }

.validation {
  display: flex; align-items: center; gap: var(--sc-3);
  margin-top: var(--sc-5);
  opacity: 0; transition: opacity 700ms var(--sc-ease-out);
}
.validation.on { opacity: 1; }
.v-trait { flex: 0 0 3rem; height: 1px; background: var(--sc-ink); }
.v-texte { font-family: var(--encre); font-style: italic; font-size: 0.85rem; color: var(--sc-ink); }

.vide {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  font-family: var(--encre); font-style: italic;
  font-size: var(--sc-t-lg); color: var(--sc-ink-soft);
  opacity: 0; transition: opacity 900ms var(--sc-ease-out);
}
.vide.on { opacity: 1; }

/* ---------------------------------------------------- phases du pipeline - */
/* 1 : la note seule */
[data-phase="1"] #et-note, [data-phase="2"] #et-note { max-height: 60svh; opacity: 1; }
/* 2 : chips */
[data-phase="2"] #et-chips { max-height: 30svh; opacity: 1; }
/* 3 : note compacte + chips + liste */
[data-phase="3"] #et-note { max-height: 34svh; opacity: 1; }
[data-phase="3"] .notes { font-size: 0.62rem; color: var(--sc-ink-soft); }
[data-phase="3"] #et-chips { max-height: 30svh; opacity: 1; }
[data-phase="3"] #et-liste { max-height: 44svh; opacity: 1; }
/* 4 : la note sort par le haut, liste + lettre */
[data-phase="4"] #et-note { max-height: 2.4rem; opacity: 0.45; }
[data-phase="4"] .notes { font-size: 0.62rem; }
[data-phase="4"] #et-chips { max-height: 0; opacity: 0; }
[data-phase="4"] #et-liste { max-height: 40svh; opacity: 1; }
[data-phase="4"] #et-lettre { max-height: 60svh; opacity: 1; }
[data-phase="4"] .liste .ligne em { display: none; }
/* le fil arrive sur l'amoxicilline : elle ressort dans la lettre aussi */
[data-phase="4"] .amoxi { background: var(--lit); font-weight: 600; }
/* 5 : le pipeline complet, tout gris sauf l'amoxicilline */
[data-phase="5"] #et-note { max-height: 30svh; opacity: 1; }
[data-phase="5"] .notes { font-size: 0.6rem; color: var(--dim); }
[data-phase="5"] .frag.lit { background: transparent; }
[data-phase="5"] .frag-suivi.vote { background-image: linear-gradient(var(--lit), var(--lit)); color: var(--sc-ink); font-weight: 600; }
[data-phase="5"] #et-chips { max-height: 26svh; opacity: 1; }
[data-phase="5"] .chip { color: var(--dim); border-color: var(--sc-hairline); box-shadow: none; }
[data-phase="5"] .chip em { color: var(--dim); }
[data-phase="5"] .chip-suivi { color: var(--sc-ink); font-weight: 600; border-color: var(--sc-accent); }
[data-phase="5"] .chip-suivi em { color: var(--sc-ink-soft); font-weight: 400; }
[data-phase="5"] #et-liste { max-height: 40svh; opacity: 1; }
[data-phase="5"] .liste { gap: 0.3rem; }
[data-phase="5"] .ligne, [data-phase="5"] .g-nom, [data-phase="5"] .ligne em { color: var(--dim); }
[data-phase="5"] .ligne-suivie { color: var(--sc-ink); }
[data-phase="5"] .ligne-suivie em { color: var(--sc-ink-soft); }
[data-phase="5"] #et-lettre { max-height: 60svh; opacity: 1; }
[data-phase="5"] .lettre { font-size: 0.74rem; }
[data-phase="5"] .slot { color: var(--dim); }
[data-phase="5"] .amoxi { background: var(--lit); color: var(--sc-ink); font-weight: 600; }
[data-phase="5"] .liste .ligne em { display: none; }
/* la lettre se coupe après le fil, comme sur la maquette */
[data-phase="5"] .slot:nth-of-type(4), [data-phase="5"] .slot:nth-of-type(5) { display: none; }
[data-phase="5"] .lettre::after { content: "…"; letter-spacing: 0.2em; color: var(--dim); }
/* 6 : le sommet, la lettre seule */
[data-phase="6"] #et-note, [data-phase="6"] #et-chips, [data-phase="6"] #et-liste { max-height: 0; opacity: 0; }
[data-phase="6"] #et-lettre { max-height: 80svh; opacity: 1; }
[data-phase="6"] .slot { color: var(--dim); }
[data-phase="6"] .douteux { background: rgba(44,81,163,0.22); color: var(--sc-ink); }
/* 7 : validation, puis tout disparaît */
[data-phase="7"] #et-note, [data-phase="7"] #et-chips, [data-phase="7"] #et-liste { max-height: 0; opacity: 0; }
[data-phase="7"] #et-lettre { max-height: 80svh; opacity: calc(1.35 - var(--p, 0) * 3); }
[data-phase="7"] .feuille-entete { opacity: calc(1.35 - var(--p, 0) * 3); }

/* ------------------------------------------------ récit (colonne gauche) - */
.wp { display: grid; align-content: center; padding-inline: var(--sc-gutter); }
.wp-1 { min-height: 120svh; }
.wp-2 { min-height: 150svh; }
.wp-3 { min-height: 150svh; }
.wp-4 { min-height: 160svh; }
.wp-5 { min-height: 170svh; }
.wp-6 { min-height: 200svh; }
.wp-7 { min-height: 140svh; }

.wcopy { max-width: 34rem; }
.eti {
  font-family: var(--sc-font-mono); font-size: 0.66rem;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); display: block; margin-bottom: var(--sc-2);
}
.wcopy h2 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-2xl); line-height: 1.08;
  letter-spacing: var(--sc-track-tight); text-wrap: balance;
  margin: 0 0 var(--sc-4);
}
.wcopy p { max-width: 46ch; color: var(--sc-ink-soft); text-wrap: pretty; margin: 0 0 var(--sc-3); }
.heure {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-3xl);
  color: var(--sc-ink); letter-spacing: var(--sc-track-tight);
  font-variant-numeric: tabular-nums; margin: 0 0 var(--sc-2);
}
.ouverture { font-size: var(--sc-t-lg); color: var(--sc-ink); line-height: 1.4; }
.note-l { font-family: var(--encre); font-style: italic; color: var(--sc-ink); font-size: var(--sc-t-lg); }
.garanties-pile { display: flex; flex-direction: column; gap: var(--sc-3); margin: var(--sc-4) 0; }
.garanties-pile h3 { font-size: var(--sc-t-sm); font-weight: 600; margin: 0; }
.garanties-pile p { font-size: var(--sc-t-sm); margin: 0.15rem 0 0; }
.liens-legaux { font-size: 0.78rem; margin-top: var(--sc-4); }
.note-pro { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 46ch; margin-top: var(--sc-3); }

/* entrée douce des blocs */
.js .wcopy, .js [data-in] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 700ms var(--sc-ease-out), transform 700ms var(--sc-ease-out);
}
.js :is(.wcopy, [data-in]).vue { opacity: 1; transform: none; }

/* ------------------------------------------------- sections de document -- */
.perimetre {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-7);
  padding-block: var(--sc-section);
  border-top: 1px solid var(--sc-hairline);
}
.perimetre h2 { font-size: var(--sc-t-lg); font-weight: 600; margin: 0 0 var(--sc-4); }
.perimetre ul { margin: 0; padding-left: 1.1em; color: var(--sc-ink-soft); }
.perimetre li { margin-bottom: 0.5em; text-wrap: pretty; }
.colonne-negative h2 { color: var(--sc-accent); }

.engagement { padding-block: 0 var(--sc-section); }
.engagement h2 { font-size: var(--sc-t-lg); font-weight: 600; max-width: 34ch; margin: 0 0 var(--sc-3); }
.engagement p { color: var(--sc-ink-soft); max-width: 62ch; margin: 0; }

.pied {
  border-top: 1px solid var(--sc-hairline);
  padding: var(--sc-5) var(--sc-gutter);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  background: var(--sc-surface);
  display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6);
  justify-content: space-between; align-items: baseline;
}
.pied .liens { display: flex; flex-wrap: wrap; gap: var(--sc-4); }

/* --------------------------------------------------------- états par JS -- */
.js .slot:not(.on) { opacity: 0; }
.js .chip:not(.on) { opacity: 0; }

/* Sans JS : tout le pipeline visible, empilé et lisible. */
.no-js .etage { max-height: none; opacity: 1; overflow: visible; }
.no-js .slot, .no-js .chip, .no-js .groupe, .no-js .ecart, .no-js .decision,
.no-js .validation { opacity: 1; transform: none; }
.no-js .vide { display: none; }
.no-js .voyage { display: block; }
.no-js .scene { position: static; }
/* relative, pas static : le fond papier (::before, absolu) doit rester ancré
   à la feuille — en static il s'ancrerait au .voyage et peindrait sur le récit */
.no-js .feuille { position: relative; top: auto; height: auto; padding-block: var(--sc-7); }
.no-js .feuille::before { inset: 0; }
.no-js .wp { min-height: 0; padding-block: var(--sc-7); }
.no-js .arrivee { min-height: 0; padding-block: var(--sc-8); }

/* ------------------------------------- bureau peu haut (portables) ------ */
/* La relecture (phase 5) montre les quatre étages : sous ~900px de haut,
   elle se resserre pour tenir entièrement dans la feuille. */
@media (min-width: 980px) and (max-height: 900px) {
  [data-phase="5"] .notes { font-size: 0.55rem; line-height: 1.5; }
  [data-phase="5"] #et-note { max-height: 24svh; }
  [data-phase="5"] .chip { font-size: 0.6rem; }
  [data-phase="5"] .chip em { display: none; }
  [data-phase="5"] .liste { gap: 0.2rem; }
  [data-phase="5"] .ligne, [data-phase="5"] .g-nom { font-size: 0.62rem; }
  [data-phase="5"] .lettre { font-size: 0.66rem; }
  [data-phase="5"] .boite { padding: 0.7rem 0.9rem 0.55rem; }
  [data-phase="5"] .etage .boite { margin-top: 0.45em; }
}

/* -------------------------------------------------------------- mobile --- */
@media (max-width: 979px) {
  .voyage { display: block; }
  .scene { position: sticky; top: 0; z-index: 1; }
  .feuille { height: 56svh; padding: var(--sc-4); align-content: start; overflow: clip; }
  .feuille::before {
    top: 1.6svh; bottom: 0;
    left: calc(50% - min(18rem, 45vw) - 0.8rem);
    right: calc(50% - min(18rem, 45vw) - 0.8rem);
  }
  .feuille > * { width: min(36rem, 90vw); margin-inline: auto; }
  .feuille-entete { padding-top: var(--sc-4); }
  .notes { font-size: 0.66rem; line-height: 1.6; }
  .lettre { font-size: 0.7rem; }
  .chip { font-size: 0.64rem; }
  .ligne { font-size: 0.64rem; }
  .recit { position: relative; z-index: 2; }
  .wp { display: block; padding-top: 62svh; padding-bottom: 6svh; }
  .wcopy {
    background: var(--sc-canvas);
    border: 1px solid var(--sc-hairline);
    border-radius: var(--sc-r-md);
    box-shadow: var(--sc-e2);
    padding: var(--sc-5) var(--sc-4);
    margin-inline: auto;
  }
  .wcopy h2 { font-size: var(--sc-t-xl); }
  .wp-1 { padding-top: 60svh; }
  .arrivee h1 { font-size: var(--sc-t-2xl); }
  .garanties-rang { flex-direction: column; gap: var(--sc-4); }
  .perimetre { grid-template-columns: 1fr; gap: var(--sc-6); }
  /* phase 5 : la feuille mobile (56svh) ne peut pas montrer les quatre
     étages complets — on garde seulement le chemin suivi, en entier */
  [data-phase="5"] #et-note { max-height: 4rem; }
  [data-phase="5"] .notes { font-size: 0.6rem; line-height: 1.55; }
  [data-phase="5"] .notes p:not(:has(.frag-suivi)) { display: none; }
  [data-phase="5"] .chip:not(.chip-suivi) { display: none; }
  [data-phase="5"] #et-chips { max-height: 4rem; }
  [data-phase="5"] .groupe:not(:has(.ligne-suivie)) { display: none; }
  [data-phase="5"] .ligne:not(.ligne-suivie) { display: none; }
  [data-phase="5"] #et-liste { max-height: 5rem; }
  [data-phase="5"] .slot:not(:has(.amoxi)) { display: none; }
  [data-phase="5"] .lettre { font-size: 0.64rem; }
  [data-phase="5"] .lettre::before { content: "…"; display: block; letter-spacing: 0.2em; color: var(--dim); }
  .mini-cta { top: auto; bottom: 0.7rem; right: 0.9rem; }
  .etape-fixe { left: 0.9rem; transform: none; align-items: flex-start; }
  .liens-legaux-arrivee { position: static; margin-top: var(--sc-4); }
}

/* -------------------------------------------------- mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  .chip, .slot, .wcopy, .ecart, .groupe { transform: none !important; }
  .etage { transition: opacity 220ms var(--sc-ease-out); }
}