/* =============================================================================
   L'AFFICHE : feuille de style
   Le cadre se tait (papier + encre), les projets apportent la couleur.
   Les règles du système sont dans DESIGN.md.
   ============================================================================= */

/* ---------- 0. Police : Archivo variable, hébergée ici (aucun appel à Google) -- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../polices/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../polices/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Jetons ------------------------------------------------------ */

:root {
  --papier: #FFD3E2;
  --blanc: #FFFFFF;
  --encre-cadre: #0A0A0A;
  --encre: var(--encre-cadre);
  --encre-douce: #4B2B38;
  --trame: #E59AB5;
  --salle: #050506;

  --trait: 3px;
  --trait-fort: 4px;

  --marge: clamp(16px, 4vw, 56px);
  --police: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Les ombres suivent l'encre du lieu : noire dans le cadre, celle du projet dans
   une bande ou une fiche. On les redéclare là où --encre change, sinon elles
   garderaient la valeur calculée à la racine. */
:root,
.bande,
.fiche,
.fiche__suite a {
  --ombre-pose: 4px 4px 0 var(--encre);
  --ombre-bloc: 8px 8px 0 var(--encre);
  --ombre-scene: 14px 14px 0 var(--encre);
}

/* ---------- 2. Base -------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

html.calque-ouvert {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 450 1.0625rem/1.55 var(--police);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, video, iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 3px;
}

::selection {
  background: var(--encre);
  color: var(--blanc);
}

[hidden] {
  display: none !important;
}

.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.evitement {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--encre);
  color: var(--blanc);
  translate: 0 -200%;
}

.evitement:focus {
  translate: 0 0;
}

/* ---------- 3. Pièces communes -------------------------------------------- */

/* La petite ligne d'affiche : dates, rôles, mentions. */
.petite-ligne {
  font-size: 0.8125rem;
  font-weight: 750;
  font-stretch: 118%;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  padding: 14px 22px;
  border: var(--trait) solid var(--encre);
  box-shadow: 6px 6px 0 var(--encre);
  font: 750 0.8125rem/1 var(--police);
  font-stretch: 118%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    translate 0.2s var(--sortie),
    box-shadow 0.2s var(--sortie),
    background-color 0.15s,
    color 0.15s;
}

.bouton--encre {
  background: var(--encre);
  color: var(--blanc);
}

.bouton--papier {
  background: var(--blanc);
  color: var(--encre);
}

.bouton__picto {
  font-size: 0.85em;
}

@media (hover: hover) {
  .bouton:hover {
    translate: -2px -2px;
    box-shadow: 8px 8px 0 var(--encre);
  }

  .bouton--encre:hover {
    background: var(--blanc);
    color: var(--encre);
  }

  .bouton--papier:hover {
    background: var(--encre);
    color: var(--blanc);
  }
}

.bouton:active {
  translate: 6px 6px;
  box-shadow: 0 0 0 var(--encre);
}

/* Le tampon : seule forme ronde du système, posée de travers. */
.tampon {
  display: inline-block;
  padding: 7px 15px;
  border: var(--trait) solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
  box-shadow: var(--ombre-pose);
  font-size: 0.75rem;
  font-weight: 750;
  font-stretch: 118%;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  rotate: -2deg;
}

.tampon--penche {
  rotate: 1.5deg;
}

/* Le cadre de scène : porte le trailer, le visuel du jeu, la fenêtre de LP. */
.cadre {
  position: relative;
  display: block;
  overflow: hidden;
  border: var(--trait-fort) solid var(--encre);
  background: var(--encre);
  box-shadow: var(--ombre-scene);
}

.commandes {
  display: grid;
  gap: 10px;
}

.commandes > div {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  align-items: center;
  gap: 14px;
}

.commandes dd {
  font-size: 0.9375rem;
  line-height: 1.3;
}

kbd {
  display: inline-block;
  min-width: 2.6em;
  padding: 6px 10px;
  border: var(--trait) solid var(--encre);
  background: var(--blanc);
  color: var(--encre);
  box-shadow: 3px 3px 0 var(--encre);
  font: 750 0.75rem/1 var(--police);
  font-stretch: 112%;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- 4. Distance 1 : l'en-tête -------------------------------------- */

.affiche__ecran {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100svh;
}

.entete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: end;
  gap: clamp(16px, 3vw, 48px);
  padding: 16px var(--marge) 14px;
  border-bottom: var(--trait-fort) solid var(--encre-cadre);
}

.entete__genre {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 10px 4px;
  background: var(--encre);
  color: var(--blanc);
  font-size: 0.75rem;
  font-weight: 750;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entete__titre {
  font-size: clamp(2.1rem, 4.4vw, 4rem);
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.86;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.entete__pitch {
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.4;
}

.entete__pitch strong {
  font-weight: 800;
}

.entete__compte {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 18px;
  font-size: 0.75rem;
  font-weight: 650;
  font-stretch: 118%;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.entete__compte b {
  font-weight: 900;
}

.entete__lien {
  padding-bottom: 3px;
  border-bottom: var(--trait) solid var(--encre);
  font-size: 0.8125rem;
  font-weight: 750;
  font-stretch: 118%;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (hover: hover) {
  .entete__lien:hover {
    background: var(--encre);
    color: var(--blanc);
  }
}

/* ---------- 5. Distance 1 : les bandes du line-up --------------------------- */

.lineup {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bande {
  --encre: var(--encre-projet);

  position: relative;
  isolation: isolate;
  /* Base « auto » : une bande ne descend jamais sous la hauteur de son contenu.
     Sur un écran peu haut, l'affiche dépasse un peu plutôt que de rogner des noms. */
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 28%) auto;
  grid-template-areas: 'lettre texte scene actions';
  align-items: center;
  column-gap: clamp(14px, 2.4vw, 40px);
  min-height: clamp(168px, 24svh, 320px);
  padding-right: var(--marge);
  overflow: hidden;
  border-bottom: var(--trait-fort) solid var(--encre-cadre);
  color: var(--encre);
  transition: flex-grow 0.7s var(--sortie);
}

.bande__champ {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--champ);
}

.bande__lettre {
  grid-area: lettre;
  align-self: stretch;
  display: grid;
  place-items: center;
  width: clamp(54px, 7vw, 124px);
  background: var(--encre);
  color: var(--champ);
  font-size: clamp(2.4rem, 5.6vw, 5.6rem);
  font-weight: 900;
  font-stretch: 62%;
  line-height: 1;
}

.bande__texte {
  grid-area: texte;
  min-width: 0;
  padding-block: 18px;
}

.bande__titre {
  font-size: clamp(2.7rem, 7.6vw, 8.8rem);
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.84;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  transition: font-stretch 0.7s var(--sortie);
}

.bande__lien {
  text-decoration: none;
}

/* Toute la bande ouvre la fiche. */
.bande__lien::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bande__lien:focus-visible {
  outline: none;
}

.bande:has(.bande__lien:focus-visible) {
  outline: var(--trait-fort) solid var(--encre-cadre);
  outline-offset: -10px;
}

.bande__noms {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin-top: clamp(10px, 1.4vw, 20px);
  font-size: clamp(0.875rem, 1.35vw, 1.3rem);
  font-weight: 800;
  font-stretch: 100%;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.bande__noms span:not(:last-child)::after {
  content: '✶';
  margin-inline: 0.65em;
  font-size: 0.8em;
}

.bande__actions {
  grid-area: actions;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 18px;
}

.bande__actions .bouton {
  padding: 16px 28px;
  font-size: 0.875rem;
}

@media (hover: hover) {
  .bande:not(.bande--vide):hover {
    flex-grow: 1.4;
  }

  .bande:not(.bande--vide):hover .bande__titre {
    font-stretch: 80%;
  }
}

.bande:not(.bande--vide):focus-within .bande__titre {
  font-stretch: 80%;
}

/* L'emplacement vide : hachuré, il attend sa couleur. */
.bande--vide {
  --encre-projet: var(--encre-cadre);
  --champ: var(--papier);

  flex: 0.5 0 auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'lettre texte tampon';
  min-height: clamp(104px, 13svh, 170px);
}

.bande--vide .bande__champ {
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgb(10 10 10 / 0.16) 12px 15px),
    var(--papier);
  background-size: 42.43px 42.43px, auto;
  animation: hachures 3.2s linear infinite;
}

.bande--vide .bande__titre {
  font-size: clamp(2.2rem, 5.2vw, 5.4rem);
  color: var(--papier);
  letter-spacing: 0.035em;
  -webkit-text-stroke: 5px var(--encre-cadre);
  paint-order: stroke fill;
}

.bande--vide .bande__noms {
  margin-top: 8px;
  font-size: clamp(0.75rem, 1vw, 0.9375rem);
  font-weight: 750;
  font-stretch: 118%;
  letter-spacing: 0.05em;
}

.bande__tampon {
  grid-area: tampon;
  rotate: -4deg;
}

/* --- Scène Decathlon : le personnage du jeu traverse la bande --- */

.bande__scene {
  grid-area: scene;
  position: relative;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  pointer-events: none;
}

.scene-deca__sol {
  position: absolute;
  right: 0;
  bottom: 22%;
  left: 0;
  height: var(--trait-fort);
  background: var(--encre);
}

.scene-deca__marcheur {
  position: absolute;
  bottom: calc(22% + var(--trait-fort));
  left: 0;
  height: min(52%, 150px);
  aspect-ratio: 195 / 128;
  background: url('../projets/decathlon/jeu/images/Personnage/Principale/walk_civil_rouge.png') 0 0 / 400% 100% no-repeat;
  image-rendering: pixelated;
  animation:
    marche 0.72s steps(4, jump-none) infinite,
    traversee 8s linear infinite;
}

.scene-deca__objet {
  position: absolute;
  top: 12%;
  display: grid;
  place-items: center;
  width: clamp(48px, 5.2vw, 84px);
  aspect-ratio: 1;
  padding: 7px;
  border: var(--trait) solid var(--encre);
  background: var(--blanc);
  box-shadow: var(--ombre-pose);
  transition: rotate 0.6s var(--sortie), translate 0.6s var(--sortie);
}

.scene-deca__objet img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scene-deca__objet--gant { left: 4%; rotate: -7deg; }
.scene-deca__objet--raquette { left: 36%; top: 6%; rotate: 5deg; }
.scene-deca__objet--ballon { left: 68%; rotate: -3deg; }

.bande:hover .scene-deca__objet--gant { rotate: 6deg; translate: 0 -6px; }
.bande:hover .scene-deca__objet--raquette { rotate: -8deg; translate: 0 -10px; }
.bande:hover .scene-deca__objet--ballon { rotate: 9deg; translate: 0 -4px; }

/* --- Scène Quiksurfeur : le surfeur glisse entre les vagues --- */

.scene-quik__vague,
.scene-quik__requin {
  position: absolute;
  left: 0;
  width: clamp(64px, 7vw, 120px);
  image-rendering: pixelated;
  animation: derive 7s linear infinite;
}

.scene-quik__vague--1 { top: 10%; }
.scene-quik__vague--2 { top: 68%; animation-duration: 9.5s; animation-delay: -4s; }
.scene-quik__vague--3 { top: 40%; animation-duration: 12s; animation-delay: -8s; width: clamp(48px, 5vw, 86px); }

.scene-quik__requin {
  top: 78%;
  width: clamp(34px, 3.4vw, 58px);
  animation-duration: 16s;
  animation-delay: -3s;
}

.scene-quik__surfeur {
  position: absolute;
  top: 50%;
  left: 38%;
  width: 0;
  height: 0;
  animation: glisse 3.4s ease-in-out infinite alternate;
}

.scene-quik__surfeur img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  max-width: none;
  height: clamp(250px, 30vw, 470px);
  translate: -50% -50%;
  rotate: 90deg;
  image-rendering: pixelated;
}

/* ---------- 6. Distance 1 : le téléscripteur -------------------------------- */

.telescripteur {
  overflow: hidden;
  background: var(--encre-cadre);
  color: var(--blanc);
}

.telescripteur__piste {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  padding: 13px 14px 12px;
  font-size: 0.8125rem;
  font-weight: 750;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: defile 32s linear infinite;
}

.telescripteur__piste i {
  font-style: normal;
}

/* ---------- 7. Le workshop -------------------------------------------------- */

.workshop {
  display: grid;
  gap: clamp(40px, 6vw, 88px);
  padding: clamp(72px, 11vw, 160px) var(--marge) clamp(72px, 10vw, 140px);
}

.workshop__tete {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: clamp(20px, 3vw, 36px);
}

.workshop__tete .petite-ligne {
  grid-column: 1 / -1;
}

.workshop__enonce {
  grid-column: 1 / span 9;
  font-size: clamp(2.6rem, 7.4vw, 7rem);
  font-weight: 900;
  font-stretch: 66%;
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.workshop__enonce em {
  padding-inline: 0.12em;
  background: var(--encre);
  color: var(--papier);
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.workshop__intro {
  grid-column: 7 / span 6;
  max-width: 52ch;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.45;
}

/* La chaîne : une seule pièce à quatre maillons, pas quatre cartes. */
.chaine {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: var(--trait-fort) solid var(--encre);
  background: var(--blanc);
  box-shadow: var(--ombre-scene);
}

.chaine__maillon {
  position: relative;
  padding: clamp(20px, 2.4vw, 36px) clamp(18px, 2.2vw, 32px) clamp(24px, 2.8vw, 40px);
}

.chaine__maillon + .chaine__maillon {
  border-left: var(--trait-fort) solid var(--encre);
}

.chaine__maillon + .chaine__maillon::before {
  content: '→';
  position: absolute;
  top: clamp(18px, 2.2vw, 32px);
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border: var(--trait) solid var(--encre);
  border-radius: 50%;
  background: var(--papier);
  color: var(--encre);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  translate: calc(-50% - 2px) 0;
}

.chaine__maillon:nth-child(2) {
  background: var(--encre);
  color: var(--blanc);
}

.chaine__maillon h3 {
  margin-bottom: 14px;
  padding-left: 22px;
  font-size: clamp(1.8rem, 2.9vw, 2.8rem);
  font-weight: 900;
  font-stretch: 64%;
  line-height: 0.92;
  text-transform: uppercase;
}

.chaine__maillon:first-child h3 {
  padding-left: 0;
}

.chaine__maillon p {
  font-size: 1rem;
  line-height: 1.45;
}

.chaine__suite {
  max-width: 62ch;
  margin-top: calc(clamp(40px, 6vw, 88px) * -0.45);
  font-size: 1.0625rem;
}

/* Le contenu des jeux : l'unique bloc d'encre de la page. */
.interieur {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px) 20px;
  margin-bottom: 56px;
  padding: clamp(28px, 5vw, 76px);
  background: var(--encre);
  color: var(--blanc);
}

.interieur__texte {
  grid-column: 1 / span 6;
}

.interieur__texte .petite-ligne {
  margin-bottom: 18px;
  color: var(--trame);
}

.interieur__titre {
  margin-bottom: clamp(20px, 2.6vw, 36px);
  font-size: clamp(2.4rem, 5.6vw, 5.4rem);
  font-weight: 900;
  font-stretch: 64%;
  line-height: 0.9;
  text-transform: uppercase;
}

.interieur__texte > p:last-child {
  max-width: 50ch;
  color: var(--papier);
}

.interieur__contenu {
  grid-column: 8 / span 5;
  align-self: start;
  border-top: var(--trait) solid var(--blanc);
}

.interieur__contenu li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: baseline;
  padding: 13px 0 12px;
  border-bottom: 1px solid rgb(255 255 255 / 0.28);
  font-size: 1.0625rem;
  font-weight: 650;
}

.interieur__contenu li::before {
  content: '✶';
  font-size: 0.85em;
}

/* La note scotchée : elle déborde du bloc d'encre. */
.interieur__note {
  grid-column: 7 / span 6;
  justify-self: end;
  max-width: 34rem;
  margin-bottom: calc(clamp(28px, 5vw, 76px) * -1 - 56px);
  padding: 26px 28px 22px;
  border: var(--trait) solid var(--encre);
  background: var(--blanc);
  color: var(--encre);
  box-shadow: 8px 8px 0 var(--trame);
  rotate: 1.4deg;
}

.interieur__note::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  width: 116px;
  height: 30px;
  border: 2px solid var(--encre);
  background: repeating-linear-gradient(135deg, var(--papier) 0 6px, var(--trame) 6px 8px);
  translate: -50% 0;
  rotate: -3deg;
}

.interieur__note blockquote p {
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.4;
}

.interieur__note strong {
  font-weight: 850;
}

.interieur__note figcaption {
  margin-top: 16px;
  color: var(--encre-douce);
  font-size: 0.75rem;
  font-weight: 750;
  font-stretch: 118%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- 8. La signature -------------------------------------------------- */

/* Discrète par choix : la page est celle des étudiants. */
.signature {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  padding: clamp(28px, 4vw, 48px) var(--marge) clamp(32px, 4vw, 48px);
  border-top: var(--trait-fort) solid var(--encre);
  color: var(--encre-douce);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.signature__mentions {
  grid-column: 1 / span 7;
  display: grid;
  gap: 10px;
  max-width: 70ch;
}

.signature__mentions p:first-child {
  color: var(--encre);
  font-weight: 650;
}

.signature__auteur {
  grid-column: 9 / -1;
  justify-self: end;
  text-align: right;
}

/* Un gras léger, pas plus : le nom se lit sans prendre la lumière. */
.signature__auteur strong {
  color: var(--encre);
  font-weight: 650;
}

.sans-script {
  padding: 24px var(--marge);
  border-top: var(--trait-fort) solid var(--encre);
  background: var(--blanc);
}

/* ---------- 9. Distance 2 : la fiche ---------------------------------------- */

.fiche {
  --encre: var(--encre-projet);

  position: fixed;
  inset: 0;
  z-index: 20;
  isolation: isolate;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--encre);
}

.fiche__champ {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--champ);
  view-transition-name: champ;
}

.fiche__barre {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--marge) 14px;
  border-bottom: var(--trait-fort) solid var(--encre);
  background: var(--champ);
}

.fiche__barre .bouton {
  padding: 12px 18px;
  box-shadow: 4px 4px 0 var(--encre);
}

.fiche__repere {
  font-size: 0.8125rem;
  font-weight: 750;
  font-stretch: 118%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fiche__tete {
  padding: clamp(28px, 4.5vw, 64px) var(--marge) 0;
}

.fiche__tampons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-bottom: clamp(26px, 3.4vw, 48px);
}

.fiche__titre {
  width: fit-content;
  max-width: 100%;
  font-size: clamp(3.4rem, 14.5vw, 15rem);
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.8;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
  view-transition-name: titre;
}

.fiche__titre:focus {
  outline: none;
}

.fiche__accroche {
  max-width: 30ch;
  margin-top: clamp(18px, 2.6vw, 36px);
  font-size: clamp(1.375rem, 2.5vw, 2.125rem);
  font-weight: 750;
  font-stretch: 88%;
  line-height: 1.12;
}

/* Les têtes d'affiche. */
.fiche__equipe {
  padding: clamp(36px, 5vw, 72px) var(--marge) clamp(44px, 6vw, 96px);
}

.fiche__equipe .petite-ligne {
  margin-bottom: 12px;
}

.fiche__noms {
  border-top: var(--trait-fort) solid var(--encre);
}

.fiche__noms li {
  border-bottom: var(--trait-fort) solid var(--encre);
  font-size: clamp(2.2rem, 6.2vw, 5.6rem);
  font-weight: 900;
  font-stretch: 68%;
  line-height: 1;
  text-transform: uppercase;
}

.fiche__noms li,
.fiche__noms a {
  padding-block: clamp(10px, 1.3vw, 18px) clamp(8px, 1.1vw, 14px);
}

.fiche__noms li:has(a) {
  padding-block: 0;
}

.fiche__noms a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  text-decoration: none;
  transition: font-stretch 0.6s var(--sortie), translate 0.6s var(--sortie);
}

.fiche__linkedin {
  font-size: 0.8125rem;
  font-weight: 750;
  font-stretch: 118%;
  letter-spacing: 0.05em;
}

@media (hover: hover) {
  .fiche__noms a:hover {
    translate: 12px 0;
    font-stretch: 84%;
  }
}

.fiche__bloc {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 48px);
  padding: clamp(48px, 7vw, 112px) var(--marge);
  border-top: var(--trait-fort) solid var(--encre);
}

.fiche__prose {
  display: grid;
  gap: 16px;
  justify-items: start;
  max-width: 56ch;
}

.fiche__intertitre {
  margin-bottom: 6px;
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  font-weight: 900;
  font-stretch: 66%;
  line-height: 0.9;
  text-transform: uppercase;
}

/* Le trailer : la composition suit le format de la vidéo. */
.fiche__trailer .fiche__prose { grid-column: 1 / span 4; }
.fiche__trailer .cadre { grid-column: 5 / -1; }

.fiche[data-trailer='portrait'] .fiche__trailer .fiche__prose { grid-column: 1 / span 6; }
.fiche[data-trailer='portrait'] .fiche__trailer .cadre { grid-column: 8 / span 5; justify-self: center; }

.cadre--paysage {
  aspect-ratio: 16 / 9;
}

.cadre--portrait {
  width: min(100%, calc(84svh * 9 / 16));
  aspect-ratio: 9 / 16;
}

.trailer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--encre);
}

.trailer__lecture {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre);
  cursor: pointer;
}

.trailer__rond {
  display: grid;
  place-items: center;
  width: clamp(84px, 10vw, 136px);
  aspect-ratio: 1;
  padding-left: 0.12em;
  border: var(--trait-fort) solid var(--encre);
  border-radius: 50%;
  background: var(--champ);
  box-shadow: var(--ombre-bloc);
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height: 1;
  transition: translate 0.25s var(--sortie), box-shadow 0.25s var(--sortie), scale 0.25s var(--sortie);
}

@media (hover: hover) {
  .trailer__lecture:hover .trailer__rond {
    translate: -3px -3px;
    box-shadow: 11px 11px 0 var(--encre);
    scale: 1.04;
  }
}

.trailer__lecture:active .trailer__rond {
  translate: 8px 8px;
  box-shadow: 0 0 0 var(--encre);
}

.trailer__lecture:focus-visible {
  outline: none;
}

.trailer__lecture:focus-visible .trailer__rond {
  outline: 4px solid var(--blanc);
  outline-offset: 4px;
}

.trailer__duree {
  position: absolute;
  bottom: 16px;
  left: 16px;
  padding: 7px 12px;
  border: var(--trait) solid var(--encre);
  background: var(--blanc);
  font-size: 0.75rem;
  font-weight: 750;
  font-stretch: 118%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Le jeu. */
.fiche__jeu .fiche__ecran { grid-column: 1 / span 7; }
.fiche__jeu .fiche__prose { grid-column: 9 / -1; }

/* Le visuel est une vraie capture de partie, au ratio du jeu. */
.cadre--jeu-paysage {
  aspect-ratio: 9 / 5;
}

.cadre--jeu-portrait {
  width: min(100%, calc(84svh * 480 / 854));
  aspect-ratio: 480 / 854;
}

.fiche[data-jeu='portrait'] .fiche__jeu .fiche__ecran { grid-column: 2 / span 4; justify-self: center; }
.fiche[data-jeu='portrait'] .fiche__jeu .fiche__prose { grid-column: 7 / -1; }

.fiche__ecran img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.9s var(--sortie);
}

.fiche__ecran-appel {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 18px 28px;
  border: var(--trait) solid var(--encre);
  background: var(--encre);
  color: var(--blanc);
  box-shadow: 6px 6px 0 var(--champ);
  font-size: 0.9375rem;
  font-weight: 750;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.15s, color 0.15s;
}

@media (hover: hover) {
  .fiche__ecran:hover img {
    scale: 1.05;
  }

  .fiche__ecran:hover .fiche__ecran-appel {
    background: var(--champ);
    color: var(--encre);
    box-shadow: 6px 6px 0 var(--encre);
  }
}

.fiche__regles {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.fiche__regles li {
  position: relative;
  padding-left: 1.5em;
}

.fiche__regles li::before {
  content: '✶';
  position: absolute;
  left: 0;
  font-size: 0.85em;
}

.fiche__tactile {
  font-size: 0.9375rem;
  opacity: 0.82;
}

/* La landing page de l'équipe. */
.fiche__landing .fiche__prose { grid-column: 1 / span 5; }
.fiche__landing .fenetre { grid-column: 7 / -1; }

.fiche__mecanique {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  counter-reset: mecanique;
}

.fiche__mecanique li {
  counter-increment: mecanique;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: baseline;
}

.fiche__mecanique li::before {
  content: counter(mecanique);
  font-size: 1.75rem;
  font-weight: 900;
  font-stretch: 62%;
  line-height: 1;
}

.fenetre {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  aspect-ratio: 16 / 11;
  background: var(--blanc);
  text-decoration: none;
}

.fenetre__barre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: var(--trait) solid var(--encre);
  background: var(--blanc);
}

.fenetre__barre i {
  width: 13px;
  aspect-ratio: 1;
  border: 2px solid var(--encre);
  border-radius: 50%;
}

.fenetre__barre i:first-child {
  background: var(--encre);
}

.fenetre__adresse {
  flex: 1;
  margin-left: 10px;
  padding: 5px 12px;
  border: 2px solid var(--encre);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  font-stretch: 110%;
  line-height: 1;
  letter-spacing: 0.03em;
}

.fenetre__vue {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--papier);
}

/* La capture défile toute seule, du haut au bas de la landing page. */
.fenetre__vue img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: parcourir 22s ease-in-out infinite alternate;
}

/* Le projet suivant arrive avec sa propre couleur. */
.fiche__suite a {
  --encre: var(--encre-projet);

  display: grid;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(32px, 5vw, 72px) var(--marge) clamp(36px, 5.5vw, 80px);
  border-top: var(--trait-fort) solid var(--encre-cadre);
  background: var(--champ);
  color: var(--encre);
  text-decoration: none;
}

.fiche__suite-titre {
  font-size: clamp(2.8rem, 9vw, 9rem);
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: font-stretch 0.7s var(--sortie);
}

@media (hover: hover) {
  .fiche__suite a:hover .fiche__suite-titre {
    font-stretch: 82%;
  }
}

/* --- L'ouverture de la fiche : une seule chorégraphie -------------------------
   Pendant que le champ de couleur s'étend et que le titre voyage depuis la bande,
   le premier écran entre en cascade : la barre descend, les tampons se posent,
   l'accroche monte, les traits se tirent et les noms surgissent un par un.
   La barre et ce premier écran sont des groupes à part dans la transition : ils
   passent AU-DESSUS du champ de couleur, donc leur entrée se voit au lieu
   d'apparaître d'un coup à la fin. */

.fiche__barre {
  view-transition-name: barre;
}

.fiche__ouverture {
  view-transition-name: ouverture;
}

.fiche__noms li {
  overflow: clip;
}

.fiche__nom {
  display: block;
}

.fiche.s-ouvre .fiche__barre {
  animation: descendre 0.75s var(--sortie) 0.16s both;
}

.fiche.s-ouvre .fiche__tampons .tampon {
  animation: tamponner 0.55s var(--sortie) calc(0.24s + var(--n, 0) * 0.08s) both;
}

.fiche.s-ouvre .fiche__accroche {
  animation: monter 0.9s var(--sortie) 0.34s both;
}

.fiche.s-ouvre .fiche__equipe .petite-ligne {
  animation: monter 0.8s var(--sortie) 0.42s both;
}

.fiche.s-ouvre .fiche__noms {
  animation: tirer 0.9s var(--sortie) 0.44s both;
}

.fiche.s-ouvre .fiche__nom {
  animation: surgir 0.95s var(--sortie) calc(0.52s + var(--n, 0) * 0.09s) both;
}

/* Sans View Transitions : la fiche se découpe depuis la position de sa bande,
   et le titre, qui ne peut pas voyager, surgit avec le reste. */
.fiche.sans-vt {
  animation: ouvrir 0.7s var(--sortie) both;
}

.fiche.s-ouvre.sans-vt .fiche__titre {
  animation: monter 0.9s var(--sortie) 0.2s both;
}

/* Plus bas, chaque pièce se révèle quand elle arrive à l'écran : elle monte en place,
   et dans les cadres (trailer, jeu, landing page) un rideau de la couleur du projet
   tombe pour découvrir l'image. Pas de clip-path sur la pièce elle-même : une pièce
   découpée à zéro n'est jamais « vue » par l'observateur, elle resterait cachée. */
.fiche.s-anime .fiche__bloc > *,
.fiche.s-anime .fiche__suite a > * {
  transition:
    opacity 0.8s var(--sortie),
    translate 1s var(--sortie);
}

.fiche.s-anime .fiche__bloc > :not(.est-vu),
.fiche.s-anime .fiche__suite a:not(.est-vu) > * {
  opacity: 0;
  translate: 0 56px;
}

.fiche.s-anime .fiche__bloc > .cadre::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--champ);
  pointer-events: none;
  translate: 0 101%;
  transition: translate 1.1s var(--sortie) 0.25s;
}

.fiche.s-anime .fiche__bloc > .cadre:not(.est-vu)::after {
  translate: 0 0;
  transition: none;
}

.fiche.s-anime .fiche__suite a > :nth-child(2) {
  transition-delay: 0.1s;
}

/* ---------- 10. Distance 3 : le lecteur : la salle s'éteint ------------------ */

.lecteur {
  --pad: clamp(12px, 2.4vw, 32px);
  --barre: 66px;
  --bas: 0px;

  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: var(--barre) minmax(0, 1fr);
  background: var(--salle);
  color: var(--blanc);
}

.lecteur :focus-visible {
  outline-color: var(--blanc);
}

.lecteur__barre {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 0 var(--marge);
  border-bottom: var(--trait) solid var(--champ);
}

.bouton--nuit {
  padding: 10px 16px;
  border-color: var(--blanc);
  background: transparent;
  color: var(--blanc);
  box-shadow: 4px 4px 0 var(--champ);
}

@media (hover: hover) {
  .bouton--nuit:hover {
    background: var(--champ);
    color: var(--encre-projet);
    box-shadow: 6px 6px 0 var(--blanc);
  }
}

.bouton--nuit:active {
  box-shadow: 0 0 0 var(--champ);
}

.lecteur__titre {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
  white-space: nowrap;
}

.lecteur__titre b {
  font-size: 1.625rem;
  font-weight: 900;
  font-stretch: 64%;
  line-height: 1;
  text-transform: uppercase;
}

.lecteur__titre span {
  overflow: hidden;
  color: color-mix(in oklab, var(--champ) 40%, white);
  font-size: 0.75rem;
  font-weight: 650;
  font-stretch: 112%;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.lecteur__outils {
  display: flex;
  gap: 14px;
}

.lecteur__salle {
  position: relative;
  display: grid;
  place-items: center;
  gap: clamp(20px, 3.5vw, 56px);
  min-height: 0;
  padding: var(--pad);
}

.lecteur__cadre {
  height: min(
    calc(100svh - var(--barre) - 2 * var(--pad) - var(--bas)),
    calc((100vw - 2 * var(--pad)) / var(--ratio, 1))
  );
  aspect-ratio: var(--ratio, 1);
  border: var(--trait-fort) solid var(--champ);
  background: #000;
  box-shadow: 12px 12px 0 var(--accent);
  /* En veille : un simple trait de lumière, jusqu'à ce que le jeu soit chargé. */
  clip-path: inset(49.6% 35% 49.6% 35%);
}

.lecteur.est-allume .lecteur__cadre {
  animation: allumer 0.75s var(--sortie) both;
}

.lecteur__attente {
  position: absolute;
  top: calc(50% + 28px);
  left: 50%;
  translate: -50% 0;
  color: var(--champ);
  font-size: 0.75rem;
  font-weight: 750;
  font-stretch: 118%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.lecteur.est-allume .lecteur__attente {
  display: none;
}

.lecteur__cadre iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.lecteur__cadre:fullscreen {
  width: 100vw;
  height: 100vh;
  border: 0;
  box-shadow: none;
  aspect-ratio: auto;
}

.lecteur__aide,
.lecteur__credits {
  display: grid;
  gap: 16px;
  align-content: start;
  width: min(100%, 300px);
  animation: poser 0.7s var(--sortie) 0.5s both;
}

.lecteur__aide .petite-ligne,
.lecteur__credits .petite-ligne {
  color: var(--champ);
}

.lecteur kbd {
  --encre: var(--salle);

  border-color: var(--blanc);
  background: var(--blanc);
  box-shadow: 3px 3px 0 var(--champ);
}

.lecteur__credits li {
  font-size: 1.75rem;
  font-weight: 900;
  font-stretch: 66%;
  line-height: 1.08;
  text-transform: uppercase;
}

.lecteur__astuce {
  color: color-mix(in oklab, var(--champ) 30%, white);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.lecteur__pivot {
  display: none;
}

/* Jeu en portrait : commandes à gauche, cadre au centre, crédits à droite. */
.lecteur[data-format='portrait'] .lecteur__salle {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.lecteur[data-format='portrait'] .lecteur__aide { justify-self: end; }
.lecteur[data-format='portrait'] .lecteur__credits { justify-self: start; }

/* Jeu en paysage : le cadre prend la largeur, le reste passe dessous. */
.lecteur[data-format='paysage'] {
  --bas: 128px;
}

.lecteur[data-format='paysage'] .lecteur__salle {
  grid-template-columns: auto auto;
  grid-template-areas: 'cadre cadre' 'aide credits';
  align-content: center;
  justify-content: center;
  row-gap: 24px;
}

.lecteur[data-format='paysage'] .lecteur__cadre { grid-area: cadre; }

.lecteur[data-format='paysage'] .lecteur__aide {
  grid-area: aide;
  width: auto;
  grid-template-columns: auto auto;
  align-items: start;
  column-gap: 28px;
}

.lecteur[data-format='paysage'] .lecteur__aide .commandes {
  grid-auto-flow: column;
  gap: 8px 28px;
}

.lecteur[data-format='paysage'] .lecteur__aide .commandes > div {
  grid-template-columns: auto auto;
}

.lecteur[data-format='paysage'] .lecteur__aide .lecteur__astuce { display: none; }

.lecteur[data-format='paysage'] .lecteur__credits {
  grid-area: credits;
  width: auto;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 20px;
  justify-self: end;
}

.lecteur[data-format='paysage'] .lecteur__credits ul {
  display: flex;
  gap: 0 18px;
}

.lecteur[data-format='paysage'] .lecteur__credits li { font-size: 1.25rem; }
.lecteur[data-format='paysage'] .lecteur__credits .lecteur__astuce { display: none; }

/* Landing page : pas de ratio, elle prend toute la salle. */
.lecteur[data-format='libre'] .lecteur__salle {
  padding: var(--pad) var(--pad) calc(var(--pad) + 12px);
}

.lecteur[data-format='libre'] .lecteur__cadre {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: var(--blanc);
}

.lecteur[data-format='libre'] .lecteur__cadre iframe {
  background: var(--blanc);
}

/* ---------- 11. Passages entre les distances -------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(champ),
  ::view-transition-group(titre) {
    animation-duration: 0.7s;
    animation-timing-function: var(--sortie);
  }

  /* Un aplat : on peut l'étirer sans que ça se voie. */
  ::view-transition-old(champ),
  ::view-transition-new(champ) {
    width: 100%;
    height: 100%;
  }

  ::view-transition-old(titre),
  ::view-transition-new(titre) {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
  }

  /* À l'ouverture, ces deux groupes sont là tout de suite : c'est leur contenu qui
     s'anime, en direct, par-dessus le champ de couleur. */
  html[data-passage='affiche-fiche']::view-transition-new(barre),
  html[data-passage='affiche-fiche']::view-transition-new(ouverture) {
    animation: none;
  }

  ::view-transition-old(barre),
  ::view-transition-old(ouverture) {
    animation: 0.18s ease-out both vt-partir;
  }

  ::view-transition-old(root) {
    animation: 0.22s ease-out both vt-partir;
  }

  ::view-transition-new(root) {
    animation: 0.5s var(--sortie) 0.08s both vt-arriver;
  }
}

/* ---------- 12. Images-clés --------------------------------------------------- */

@keyframes coller {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes serrer {
  from { font-stretch: 125%; }
  to { font-stretch: 62%; }
}

@keyframes hachures {
  to { background-position: 42.43px 0, 0 0; }
}

@keyframes marche {
  from { background-position-x: 0%; }
  to { background-position-x: 100%; }
}

@keyframes traversee {
  from { translate: -110% 0; }
  to { translate: 100cqw 0; }
}

@keyframes derive {
  from { translate: 100cqw 0; }
  to { translate: -130% 0; }
}

@keyframes glisse {
  from { translate: -10px -34px; rotate: -7deg; }
  to { translate: 14px 34px; rotate: 7deg; }
}

@keyframes defile {
  to { translate: -50% 0; }
}

@keyframes parcourir {
  0%, 8% { top: 0; translate: 0 0; }
  92%, 100% { top: 100%; translate: 0 -100%; }
}

@keyframes descendre {
  from { translate: 0 -110%; }
  to { translate: 0 0; }
}

@keyframes tamponner {
  from { opacity: 0; scale: 1.5; }
  to { opacity: 1; scale: 1; }
}

@keyframes monter {
  from { opacity: 0; translate: 0 34px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes tirer {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes surgir {
  from { translate: 0 112%; }
  to { translate: 0 0; }
}

@keyframes ouvrir {
  from { clip-path: inset(var(--ouvre-haut, 0px) 0 var(--ouvre-bas, 0px) 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes poser {
  from { opacity: 0; translate: 0 26px; }
  to { opacity: 1; translate: 0 0; }
}

/* L'écran d'arcade s'allume : un trait, puis l'image. */
/* Les marges négatives de fin laissent passer l'ombre dure du cadre. */
@keyframes allumer {
  0% { clip-path: inset(49.6% 35% 49.6% 35%); }
  38% { clip-path: inset(49.6% -24px 49.6% -24px); }
  100% { clip-path: inset(-24px -24px -24px -24px); }
}

@keyframes reveler {
  from { clip-path: inset(-24px 100% -24px -24px); }
  to { clip-path: inset(-24px -24px -24px -24px); }
}

@keyframes vt-partir {
  to { opacity: 0; }
}

@keyframes vt-arriver {
  from { opacity: 0; }
}

/* L'entrée de l'affiche : le seul grand moment d'animation de la page. */
@media (prefers-reduced-motion: no-preference) {
  .bande {
    animation: coller 1s var(--sortie) calc(var(--i) * 0.12s + 0.1s) both;
  }

  .bande:not(.bande--vide) .bande__titre {
    animation: serrer 1.3s var(--sortie) calc(var(--i) * 0.12s + 0.15s) both;
  }

  /* La chaîne se révèle au défilement, maillon après maillon. */
  @supports (animation-timeline: view()) {
    .chaine {
      animation: reveler linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 42%;
    }
  }
}

/* ---------- 13. Écrans étroits ------------------------------------------------ */

@media (max-width: 1280px) {
  .entete {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .entete__compte {
    display: none;
  }
}

@media (max-width: 1080px) {
  .entete {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .entete__compte {
    display: none;
  }

  .entete__pitch {
    grid-column: 1;
    grid-row: 2;
  }

  .entete__lien {
    grid-column: 2;
    grid-row: 2;
  }

  .workshop__enonce { grid-column: 1 / -1; }
  .workshop__intro { grid-column: 4 / -1; }

  .chaine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chaine__maillon:nth-child(3) { border-left: 0; }
  .chaine__maillon:nth-child(n + 3) { border-top: var(--trait-fort) solid var(--encre); }
  .chaine__maillon:nth-child(3)::before { display: none; }
  .chaine__maillon:nth-child(3) h3 { padding-left: 0; }

  .interieur__texte { grid-column: 1 / -1; }
  .interieur__contenu { grid-column: 1 / span 6; }
  .interieur__note { grid-column: 6 / -1; }
}

@media (max-width: 760px) {
  .entete {
    gap: 10px 16px;
    padding-top: 14px;
  }

  .entete__pitch {
    font-size: 0.9375rem;
  }

  /* Sur téléphone l'affiche ne tient plus dans un écran : chaque bande prend
     la hauteur de son contenu, boutons compris. */
  .affiche__ecran {
    display: block;
    min-height: 0;
  }

  .bande {
    flex: 0 0 auto;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'lettre texte'
      'lettre scene'
      'lettre actions';
    column-gap: 14px;
    min-height: 0;
    padding: 0 16px 0 0;
  }

  .bande__texte {
    padding-block: 18px 0;
  }

  .bande__titre {
    font-size: clamp(2.9rem, 16vw, 5.4rem);
  }

  .bande__noms {
    font-size: 0.8125rem;
  }

  .bande__scene {
    height: 78px;
    margin-block: 6px 12px;
  }

  .scene-deca__objet {
    display: none;
  }

  .scene-deca__sol {
    bottom: 8%;
  }

  .scene-deca__marcheur {
    bottom: calc(8% + var(--trait-fort));
    height: 82%;
  }

  .scene-quik__surfeur img {
    height: 210px;
  }

  .scene-quik__vague { width: 58px; }
  .scene-quik__vague--3 { width: 44px; }
  .scene-quik__requin { width: 30px; }

  .bande__actions {
    flex-direction: row;
    gap: 12px;
    margin-bottom: 22px;
    padding-block: 0;
  }

  .bande__actions .bouton {
    flex: 1;
    padding: 14px 10px;
    font-size: 0.75rem;
    box-shadow: 4px 4px 0 var(--encre);
  }

  .bande--vide {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'lettre texte'
      'lettre tampon';
    flex: 0 0 auto;
  }

  .bande--vide .bande__titre {
    font-size: 2.6rem;
    -webkit-text-stroke-width: 2px;
  }

  .bande__tampon {
    justify-self: start;
    margin: 10px 0 20px;
  }

  .workshop__intro { grid-column: 1 / -1; }

  .chaine {
    grid-template-columns: minmax(0, 1fr);
    box-shadow: var(--ombre-bloc);
  }

  .chaine__maillon + .chaine__maillon {
    border-top: var(--trait-fort) solid var(--encre);
    border-left: 0;
  }

  .chaine__maillon + .chaine__maillon::before,
  .chaine__maillon:nth-child(3)::before {
    content: '↓';
    display: grid;
    top: 0;
    left: auto;
    right: 18px;
    translate: 0 calc(-50% - 2px);
  }

  .chaine__maillon h3,
  .chaine__maillon:nth-child(3) h3 {
    padding-left: 0;
  }

  .interieur {
    padding: 28px 20px 40px;
  }

  .interieur__contenu,
  .interieur__note {
    grid-column: 1 / -1;
  }

  .interieur__note {
    justify-self: stretch;
    margin-bottom: -96px;
    padding: 24px 20px 18px;
  }

  .signature__auteur,
  .signature__mentions {
    grid-column: 1 / -1;
  }

  .signature__auteur {
    justify-self: start;
    text-align: left;
  }

  .fiche__barre {
    padding-block: 10px 12px;
  }

  .fiche__barre .bouton {
    padding: 11px 13px;
    font-size: 0.75rem;
  }

  .fiche__repere {
    display: none;
  }

  .fiche__bloc > * {
    grid-column: 1 / -1 !important;
  }

  .fiche__jeu .fiche__ecran,
  .fiche__landing .fenetre {
    order: 2;
  }

  .cadre {
    box-shadow: var(--ombre-bloc);
  }

  .cadre--portrait,
  .cadre--jeu-portrait {
    width: min(86%, calc(78svh * 9 / 16));
    justify-self: center;
  }

  .fiche__ecran-appel {
    right: 14px;
    bottom: 14px;
    left: 14px;
    justify-content: center;
    padding: 16px 18px;
    font-size: 0.8125rem;
  }

  .fenetre {
    aspect-ratio: 4 / 5;
  }

  /* Dans le lecteur, tout l'écran est au jeu. */
  .lecteur {
    --barre: 56px;
    --pad: 0px;
  }

  .lecteur__barre {
    gap: 10px;
    padding-inline: 10px;
  }

  .lecteur__titre span,
  .lecteur__aide,
  .lecteur__credits,
  .lecteur__outils a {
    display: none;
  }

  .lecteur__titre b {
    overflow: hidden;
    font-size: 1.25rem;
    text-overflow: ellipsis;
  }

  .bouton--nuit {
    padding: 9px 11px;
    font-size: 0.6875rem;
    box-shadow: 3px 3px 0 var(--champ);
  }

  .lecteur[data-format] .lecteur__salle {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    place-items: stretch;
    padding: 0;
  }

  .lecteur[data-format] .lecteur__cadre {
    grid-area: auto;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-width: 0;
    box-shadow: none;
  }

  @media (orientation: portrait) {
    .lecteur[data-format='paysage'] .lecteur__salle {
      grid-template-rows: minmax(0, 1fr) auto;
    }

    .lecteur[data-format='paysage'] .lecteur__pivot {
      display: block;
      padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
      border-top: var(--trait) solid var(--champ);
      font-size: 0.8125rem;
      font-weight: 750;
      font-stretch: 112%;
      letter-spacing: 0.04em;
      text-align: center;
      text-transform: uppercase;
    }
  }
}

/* Téléphone tenu en paysage pour jouer : on rend toute la hauteur au jeu. */
@media (max-height: 520px) and (orientation: landscape) {
  .lecteur {
    --barre: 46px;
    --pad: 0px;
    --bas: 0px;
  }

  .lecteur__titre span,
  .lecteur__aide,
  .lecteur__credits {
    display: none;
  }

  .lecteur[data-format] .lecteur__salle {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    padding: 0;
  }

  .lecteur[data-format] .lecteur__cadre {
    grid-area: auto;
    border-width: 0;
    box-shadow: none;
  }
}

/* ---------- 14. Mouvement réduit ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .telescripteur__piste,
  .scene-deca__marcheur,
  .scene-quik__vague,
  .scene-quik__requin,
  .scene-quik__surfeur,
  .fenetre__vue img,
  .bande--vide .bande__champ {
    animation: none !important;
  }

  .scene-deca__marcheur { translate: 40cqw 0; }
  .scene-quik__vague--1 { translate: 70cqw 0; }
  .scene-quik__vague--2 { translate: 10cqw 0; }
  .scene-quik__vague--3 { translate: 84cqw 0; }
  .scene-quik__requin { translate: 60cqw 0; }
}