/* --- 1. la charte en variables ------------------------------------------------------------------ */
:root {
  --dc-fond: #f0f0f2;
  --dc-carte: #ffffff;
  --dc-noir: #18191b;
  --dc-gris: #b5b7c0;
  --dc-gris-texte: #5c5e66;
  --dc-jaune: #f8ff07;
  --dc-gris-doux: #e5e5e7;
  --dc-gris-clair: #d4d5da;
  --dc-gris-fonce: #8f9199;
  /* le fond de la planche : un dégradé très doux, porté par la planche elle-même (le voile du dashboard le reprend) */
  --dc-fond-planche: linear-gradient(162deg, #f8f8fa 0%, #f0f0f2 42%, #e8e8eb 100%);
  --dc-filet: #d3d4d9;
  --dc-blanc-doux: rgba(255, 255, 255, 0.76);
  --dc-blanc-efface: rgba(255, 255, 255, 0.56);

  /* le faux dashboard : la seule surface d'une autre couleur, parce que c'est l'écran d'un autre outil, et parce que la
     lecture le fait passer en gris puis en noir et blanc. Ses teintes : un bleu, une encre, un rouge et un vert sombres */
  --dc-db-bleu: #2f6ef2;
  --dc-db-encre: #1f2a44;
  --dc-db-rouge: #c8402a;

  --dc-fonte: "Satoshi DC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dc-mono: "JetBrains Mono DC", ui-monospace, "SF Mono", Menlo, monospace;

  --dc-rayon-carte: 28px;
  --dc-rayon-petit: 12px;
  --dc-rayon-pastille: 100px;
  --dc-ombre-carte: 0 1px 2px rgba(24, 25, 27, 0.06), 0 12px 32px rgba(24, 25, 27, 0.06);
  --dc-ombre-haute: 0 2px 6px rgba(24, 25, 27, 0.08), 0 30px 70px rgba(24, 25, 27, 0.16);
  --dc-ombre-cadre: 0 1px 2px rgba(24, 25, 27, 0.06), 0 18px 48px rgba(24, 25, 27, 0.10);

  --dc-duree: 180ms;
  --dc-courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --dc-gouttiere: 16px;
  --dc-cible: 44px;

  /* ce que l'en-tête, les commandes et la mention prennent à la hauteur de la fenêtre : le film prend le reste, en 16:9 */
  --dc-reserve: 262px;

  /* le filigrane de la carte noire : les courbes de niveau du site, en blanc à 7 % */
  --dc-courbes: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'><defs><path id='a' d='M-190,-96 C-150,-190 -30,-226 74,-196 C178,-166 226,-88 196,6 C166,100 60,178 -50,160 C-160,142 -230,-2 -190,-96 Z'/></defs><g fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2' transform='translate(470,110)'><use href='%23a' transform='scale(.28)'/><use href='%23a' transform='scale(.46) rotate(7)'/><use href='%23a' transform='scale(.64) rotate(14)'/><use href='%23a' transform='scale(.82) rotate(21)'/><use href='%23a' transform='scale(1) rotate(28)'/><use href='%23a' transform='scale(1.18) rotate(35)'/><use href='%23a' transform='scale(1.36) rotate(42)'/><use href='%23a' transform='scale(1.54) rotate(49)'/></g></svg>");
}

/* --- 2. les fontes (les deux fichiers de JetBrains Mono sont des TrueType malgré leur extension) --- */
@font-face { font-family: "Satoshi DC"; src: url("/assets/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi DC"; src: url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Satoshi DC"; src: url("/assets/fonts/satoshi-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono DC"; src: url("/assets/fonts/jetbrains-mono-400.woff2") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono DC"; src: url("/assets/fonts/jetbrains-mono-700.woff2") format("truetype"); font-weight: 700; font-display: swap; }

/* --- 3. la page et l'en-tête -------------------------------------------------------------------- */
html { background: var(--dc-fond); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--dc-noir);
  font-family: var(--dc-fonte);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  background: var(--dc-fond);
  overflow-x: hidden;
}
.dc-page, .dc-page *, .dc-page *::before, .dc-page *::after { box-sizing: border-box; }
.dc-page { max-width: 1680px; margin: 0 auto; padding: 0 var(--dc-gouttiere) 24px; }
:where(.dc-page) :is(p, h1, h2, ol, ul) { margin: 0; }
:where(.dc-page) :is(ol, ul) { padding: 0; list-style: none; }
:where(.dc-page) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.dc-page :focus-visible { outline: 2px solid var(--dc-noir); outline-offset: 3px; }
.dc-page ::selection { background: var(--dc-jaune); color: var(--dc-noir); }

.dc-entete {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px 24px;
  min-height: 64px;
  padding: 10px 0 8px;
}
.dc-marque {
  display: inline-flex; align-items: center; gap: 9px; min-height: var(--dc-cible);
  color: var(--dc-noir); text-decoration: none; font-weight: 900; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
}
.dc-marque svg { flex: none; }
.dc-marque svg path { fill: none; stroke: var(--dc-noir); stroke-width: 1.7; stroke-linecap: round; }
.dc-marque:hover { text-decoration: underline; text-underline-offset: 4px; }
.dc-entete-titre { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.dc-entete-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; }
.dc-kicker {
  font-family: var(--dc-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-gris-texte); line-height: 1.5;
}
.dc-carre { display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: var(--dc-jaune); vertical-align: baseline; }
.dc-titre { font-weight: 900; font-size: 26px; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.dc-accroche { font-size: 14px; line-height: 1.4; color: var(--dc-gris-texte); text-wrap: balance; max-width: 760px; }
.dc-estampille {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 1px 7px;
  padding: 7px 14px 7px 13px; border-radius: var(--dc-rayon-pastille);
  background: var(--dc-noir); color: var(--dc-carte); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: -0.01em;
}
.dc-estampille-accent {
  font-family: var(--dc-mono); font-weight: 700; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--dc-jaune);
}
.dc-retour {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--dc-cible); padding: 0 18px;
  border-radius: var(--dc-rayon-pastille); background: var(--dc-carte); box-shadow: var(--dc-ombre-carte);
  color: var(--dc-noir); text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap;
}
.dc-retour svg path { fill: none; stroke: var(--dc-noir); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dc-retour:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* --- 4. le cadre du film et la planche ---------------------------------------------------------- */
.dc-film { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dc-cadre {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 22px;
  background: #f0f0f2;
  box-shadow: var(--dc-ombre-cadre);
  isolation: isolate;
}
@supports not (aspect-ratio: 16 / 9) {
  .dc-cadre { height: 0; padding-bottom: 56.25%; }
}
.dc-planche {
  position: absolute; left: 0; top: 0;
  width: 1600px; height: 900px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--dc-fond-planche);
  font-family: var(--dc-fonte);
  color: var(--dc-noir);
  line-height: 1.2;
  contain: layout paint;
  user-select: none;
  -webkit-user-select: none;
}
/* le calque des commandes de la planche (« Revoir », « Voir le cas d'usage ») : la même échelle, transparent */
.dc-planche.dc-planche-actifs { background: none; }
.dc-attente {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 24px; text-align: center;
  font-family: var(--dc-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-gris-texte);
}
.dc-pret .dc-attente { display: none; }

/* --- 5. les commandes --------------------------------------------------------------------------- */
.dc-commandes { width: 100%; display: grid; gap: 10px; }
.dc-commandes[hidden] { display: none; }
.dc-rangee { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.dc-lecture {
  display: grid; place-items: center;
  width: var(--dc-cible); height: var(--dc-cible); border-radius: 50%;
  background: var(--dc-noir); color: var(--dc-jaune);
}
.dc-lecture:hover { background: #2a2b2e; }
.dc-lecture:focus-visible { outline: 3px solid var(--dc-jaune); outline-offset: 2px; box-shadow: 0 0 0 5px var(--dc-noir); }
.dc-lecture svg { display: none; }
.dc-lecture svg path { fill: var(--dc-jaune); }
.dc-lecture .dc-icone-revoir path { fill: none; stroke: var(--dc-jaune); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dc-lecture[data-etat="pause"] .dc-icone-lire,
.dc-lecture[data-etat="lecture"] .dc-icone-pause,
.dc-lecture[data-etat="fin"] .dc-icone-revoir,
.dc-lecture[data-etat="suivant"] .dc-icone-lire { display: block; }

.dc-barre { position: relative; height: var(--dc-cible); display: flex; align-items: center; cursor: pointer; border-radius: 10px; touch-action: none; }
.dc-barre-piste { position: relative; width: 100%; height: 6px; border-radius: 6px; background: var(--dc-gris-clair); overflow: hidden; }
.dc-barre-plein { position: absolute; inset: 0; background: var(--dc-noir); transform-origin: 0 50%; transform: scaleX(0); }
.dc-barre-cran { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--dc-fond); }
.dc-barre:hover .dc-barre-piste { height: 8px; }
.dc-temps { font-family: var(--dc-mono); font-size: 13px; color: var(--dc-gris-texte); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-temps span:first-child { color: var(--dc-noir); font-weight: 700; }

.dc-chapitres { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
/* au bureau, la rangée des chapitres déborde le cadre du film des deux côtés pour tenir sur une ligne */
@media (min-width: 900px) {
  .dc-chapitres { margin-inline: calc((100% - min(100vw - 48px, 1400px)) / 2); }
}
@media (min-width: 1280px) {
  .dc-chapitres { flex-wrap: nowrap; }
}
.dc-pastille {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px 0 6px;
  border-radius: var(--dc-rayon-pastille); background: var(--dc-carte); box-shadow: 0 1px 2px rgba(24, 25, 27, 0.06);
  font-weight: 700; font-size: 12.5px; line-height: 1.1; color: var(--dc-noir); white-space: nowrap;
}
.dc-pastille-num {
  display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; flex: none;
  background: var(--dc-gris-doux); font-family: var(--dc-mono); font-size: 11.5px; font-weight: 700;
}
.dc-pastille:hover { background: var(--dc-gris-doux); }
.dc-pastille[aria-current="step"] { background: var(--dc-noir); color: var(--dc-carte); }
.dc-pastille[aria-current="step"] .dc-pastille-num { background: var(--dc-jaune); color: var(--dc-noir); }
.dc-pastille[aria-current="step"]:focus-visible { outline-color: var(--dc-noir); }

/* --- 6. la phrase et la mention ----------------------------------------------------------------- */
/* au bureau, la phrase ne se voit pas (la planche la dit en grand) mais un lecteur d'écran l'entend : elle est retirée de
   l'image, pas du document ; sous 720 px et en mouvement réduit, elle se lit sous la scène */
.dc-phrase {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  font-weight: 700; font-size: 18px; line-height: 1.4; text-wrap: pretty;
}
.dc-phrase .dc-phrase-suite { color: var(--dc-gris-texte); }
.dc-mention { width: 100%; max-width: 980px; text-align: center; font-size: 13px; line-height: 1.45; color: var(--dc-gris-texte); }
.dc-erreur { padding: 24px 0; font-weight: 700; }

/* --- 7. le vocabulaire de la planche ------------------------------------------------------------- */
/* tout nœud de la planche est posé en absolu, à sa place en pixels de la planche ; il ne bouge que par le moteur */
.dc-planche .dc-n { position: absolute; left: 0; top: 0; margin: 0; }
.dc-planche svg { display: block; overflow: visible; }
.dc-planche svg text { font-family: var(--dc-fonte); }
.dc-pivot-gauche { transform-origin: 0 50%; }
.dc-pivot-haut { transform-origin: 50% 0; }
.dc-pivot-coin { transform-origin: 0 0; }

/* la carte blanche, la carte noire et son filigrane, la pastille noire */
.dc-s-carte { background: var(--dc-carte); border-radius: var(--dc-rayon-carte); box-shadow: var(--dc-ombre-carte); }
.dc-s-carte-petite { background: var(--dc-carte); border-radius: var(--dc-rayon-petit); box-shadow: var(--dc-ombre-carte); }
.dc-s-noire { background: var(--dc-noir) var(--dc-courbes) right -120px top -90px / 760px 570px no-repeat; color: var(--dc-carte); border-radius: var(--dc-rayon-carte); }
.dc-s-pastille { display: inline-flex; align-items: center; gap: 10px; border-radius: var(--dc-rayon-pastille); background: var(--dc-noir); color: var(--dc-carte); font-weight: 700; white-space: nowrap; }

/* le kicker de la planche : mono, capitales espacées, le carré jaune devant */
.dc-s-kicker { font-family: var(--dc-mono); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-gris-texte); line-height: 1.4; white-space: nowrap; }
.dc-s-kicker .dc-s-carre { display: inline-block; width: 9px; height: 9px; margin-right: 12px; background: var(--dc-jaune); vertical-align: 1px; }
.dc-s-kicker b { color: var(--dc-noir); font-weight: 700; }
.dc-s-noire .dc-s-kicker { color: var(--dc-blanc-efface); }
.dc-s-noire .dc-s-kicker b { color: var(--dc-carte); }

/* la typographie de la planche */
/* l'approche serrée des grands chiffres mangerait l'espace avant l'unité (« 0,5 s », « +0,16 pt ») : l'espace est rendue */
.dc-s-hero { font-weight: 900; letter-spacing: -0.05em; word-spacing: 0.12em; line-height: 0.92; white-space: nowrap; }
.dc-s-titre { font-weight: 900; letter-spacing: -0.04em; line-height: 0.98; }
.dc-s-gros { font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; }
.dc-s-corps { font-weight: 400; line-height: 1.4; }
.dc-s-mono { font-family: var(--dc-mono); letter-spacing: 0.02em; }
.dc-s-mono-caps { font-family: var(--dc-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.dc-s-gris { color: var(--dc-gris-texte); }
.dc-s-jaune { color: var(--dc-jaune); }
.dc-s-nowrap { white-space: nowrap; }

/* la légende du chapitre : la phrase qui raconte, en bas de la planche */
.dc-s-legende { width: 1260px; }
.dc-s-legende-phrase { font-weight: 700; font-size: 31px; line-height: 1.22; letter-spacing: -0.018em; text-wrap: balance; }
.dc-s-legende-suite { color: var(--dc-gris-texte); }
.dc-s-legende-phrase + .dc-s-legende-phrase, .dc-s-legende-fente { margin-top: 2px; }
/* la fente de la suite : la suite du chapitre et les phrases des gestes, l'une après l'autre, à la même place */
.dc-s-legende-fente { position: relative; }
.dc-s-legende-geste { position: absolute; left: 0; top: 0; }

/* les touches du clavier */
.dc-s-touche {
  display: inline-grid; place-items: center; min-width: 58px; height: 54px; padding: 0 15px;
  border-radius: 12px; background: var(--dc-carte); border: 2px solid var(--dc-noir);
  box-shadow: 0 5px 0 var(--dc-noir); font-family: var(--dc-mono); font-weight: 700; font-size: 22px; line-height: 1;
}

/* les commandes dans la planche (l'image finale : « Revoir », « Voir le cas d'usage ») */
.dc-s-bouton {
  display: inline-flex; align-items: center; gap: 14px; height: 72px; padding: 0 34px;
  border-radius: var(--dc-rayon-pastille); background: var(--dc-noir); color: var(--dc-carte);
  font: 700 24px/1 var(--dc-fonte); cursor: pointer; border: 0; text-decoration: none; pointer-events: auto;
}
.dc-s-bouton svg path { fill: none; stroke: var(--dc-jaune); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dc-s-bouton-blanc { background: var(--dc-carte); color: var(--dc-noir); box-shadow: var(--dc-ombre-carte); }
.dc-s-bouton-blanc svg path { stroke: var(--dc-noir); }
.dc-s-bouton:focus-visible { outline: 4px solid var(--dc-noir); outline-offset: 5px; }
.dc-planche .dc-actif { pointer-events: auto; }
.dc-planche { pointer-events: none; }

/* Les règles propres à chaque groupe de chapitres vivent dans sa feuille : scenes-ouverture.css (dc-o-),
   scenes-nuage.css (dc-k-), scenes-lecture.css (dc-l-), scenes-resultat.css (dc-r-). Cette feuille ne garde
   que ce que les chapitres partagent. */

/* --- 8. le fil du temps et le product manager ---------------------------------------------------- */
/* le fil : un filet discret en haut de la planche, en gris et noir ; il se lit comme deux durées à comparer */
.dc-fil { z-index: 7; }
.dc-fil-jour { font-family: var(--dc-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dc-gris-texte); white-space: nowrap; }
.dc-fil-heure { font-weight: 900; font-size: 30px; line-height: 32px; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-fil-nom { font-family: var(--dc-mono); font-size: 18px; line-height: 22px; letter-spacing: 0.02em; white-space: nowrap; color: var(--dc-noir); }
.dc-fil-nom-gris { color: var(--dc-gris-texte); }
.dc-fil-rail { background: var(--dc-gris-clair); border-radius: 2px; }
.dc-fil-plein { background: var(--dc-noir); border-radius: 2px; }
.dc-fil-plein-gris { background: var(--dc-gris-fonce); border-radius: 2px; }
.dc-fil-borne { font-family: var(--dc-mono); font-size: 18px; line-height: 22px; white-space: nowrap; color: var(--dc-noir); }
.dc-fil-duree { font-weight: 700; }

/* le product manager : un buste au pied de la planche, à droite ; ses bulles au-dessus de sa tête */
.dc-calque-pm { z-index: 8; }
.dc-bulle {
  display: grid; gap: 4px; padding: 14px 20px 15px; max-width: 520px;
  background: var(--dc-carte); border-radius: 18px 18px 6px 18px; box-shadow: var(--dc-ombre-haute);
}
.dc-bulle-k { font-family: var(--dc-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-gris-texte); white-space: nowrap; }
.dc-bulle-t { font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -0.015em; }
.dc-bulle-grande { padding: 16px 30px 20px; border-radius: 26px 26px 8px 26px; }
.dc-bulle-grande .dc-bulle-t { font-weight: 900; font-size: 96px; line-height: 1; letter-spacing: -0.045em; white-space: nowrap; }
.dc-pm-touches { display: flex; align-items: center; gap: 10px; }
.dc-pm-plus { font-weight: 700; font-size: 26px; }
.dc-pm-touches-grandes .dc-s-touche { min-width: 72px; height: 68px; font-size: 30px; border-width: 2.5px; box-shadow: 0 6px 0 var(--dc-noir); }

/* --- 9. les paliers ----------------------------------------------------------------------------- */
/* le bureau : le film prend la hauteur que l'en-tête et les commandes lui laissent */
@media (min-width: 900px) {
  .dc-page { --dc-gouttiere: 24px; }
  .dc-cadre { width: min(100%, max(720px, calc((100vh - var(--dc-reserve)) * 16 / 9))); }
  .dc-commandes { width: min(100%, max(720px, calc((100vh - var(--dc-reserve)) * 16 / 9))); }
  .dc-mention { margin-top: 2px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .dc-chapitres .dc-pastille { min-height: 32px; }
  .dc-accroche { display: none; }
}
/* le téléphone et la petite tablette : l'en-tête s'empile, la phrase se lit sous la scène */
@media (max-width: 899.98px) {
  /* le téléphone tenu en largeur : le film et sa barre de lecture tiennent ensemble dans la hauteur de l'écran */
  .dc-cadre, .dc-commandes { width: min(100%, calc((100vh - 72px) * 16 / 9)); }
  @supports (height: 100svh) {
    .dc-cadre, .dc-commandes { width: min(100%, calc((100svh - 72px) * 16 / 9)); }
  }
  .dc-entete { grid-template-columns: 1fr auto; }
  .dc-entete-titre { grid-column: 1 / -1; grid-row: 2; justify-items: start; text-align: left; }
  .dc-entete-ligne { justify-content: flex-start; }
  .dc-titre { font-size: 28px; width: 100%; }
}
@media (max-width: 719.98px) {
  .dc-cadre { border-radius: 14px; }
  .dc-retour { padding: 0 14px; font-size: 13px; }
  .dc-titre { font-size: 26px; }
  .dc-phrase { position: static; width: 100%; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  .dc-chapitres { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
  .dc-mention { text-align: left; }
}
@media (max-width: 379.98px) {
  .dc-retour span { font-size: 12.5px; }
  .dc-retour { padding: 0 12px; }
}

/* --- 10. la scène seule (?cadre=nu) : elle remplit la fenêtre en 16:9, centrée, le reste du fond ---- */
.dc-nu body { min-height: 0; }
.dc-nu .dc-page { max-width: none; padding: 0; }
.dc-nu .dc-entete, .dc-nu .dc-commandes, .dc-nu .dc-phrase, .dc-nu .dc-mention { display: none !important; }
.dc-nu .dc-film { display: grid; place-items: center; width: 100vw; height: 100vh; gap: 0; }
.dc-nu .dc-cadre { width: min(100vw, 100vh * 16 / 9); border-radius: 0; box-shadow: none; }

/* --- 11. le mouvement réduit -------------------------------------------------------------------- */
/* aucun mouvement : la scène montre l'image de fin de chaque chapitre (le moteur s'en charge), la phrase se lit sous la scène */
@media (prefers-reduced-motion: reduce) {
  .dc-page *, .dc-page *::before, .dc-page *::after { transition: none !important; }
  .dc-phrase { position: static; width: 100%; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  .dc-nu .dc-phrase { display: none; }
}