/* journal.css : les pages du Journal de bord (plan « L'Atelier ouvert », 02/11/2026), chargees seulement sous /journal/, apres
   site.css et plan.css. La DA des Shorts : papier quadrille sombre, chasse fixe, sections numerotees en ambre, schemas
   isometriques. Le HTML est ecrit par tools/site_zaapbot/generer_journal.py depuis tools/site_zaapbot/journal.json.
   Trois couleurs, trois roles : l'ambre est le temps (numeros d'episodes, dates, rail du fil, Journal de bord), le turquoise
   est la lueur du zaap, l'indigo est ce qu'on peut faire (boutons, liens). Aucun script, aucun attribut style.

   LE MOUVEMENT. Chaque animation, transition et transition de page est sous (prefers-reduced-motion: no-preference), et celles
   qui dependent du defilement sous @supports (animation-timeline: view()) en plus : sans l'un ou l'autre, la page est deja a sa
   place (texte visible, schema sur sa derniere image, lignes du terminal ecrites). La maquette du 02/11/2026 les laissait sans
   garde pour qu'Hugo, dont Windows coupe les animations, les voie ; en production la regle est celle de site.css. Un test
   (tests/test_site_zaapbot_journal.py) refuse un mot de mouvement hors de ce garde. */

/* --- le papier : un quadrille, et un second plus large et plus lent sous le defilement --------------------- */
.carnet {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.carnet::before,
.carnet::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40vh 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--quadrille) 1px, transparent 1px),
    linear-gradient(90deg, var(--quadrille) 1px, transparent 1px);
}

.carnet::before {
  background-size: 32px 32px;
}

.carnet::after {
  background-size: 160px 160px;
  opacity: 0.9;
  background-image:
    linear-gradient(rgba(214, 178, 94, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 178, 94, 0.09) 1px, transparent 1px);
  mask-image: radial-gradient(80% 60% at 70% 20%, #000, transparent 85%);
}

/* --- le bandeau ------------------------------------------------------------------------------------------- */
.carnet-bandeau {
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 2rem;
}

.ariane {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--texte-3);
}

.ariane li + li::before {
  content: "›";
  margin-right: 0.4rem;
}

.ariane a {
  color: var(--texte-2);
  text-decoration: none;
}

.etiquette-mono {
  display: inline-flex;
  gap: 0.8rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambre);
}

.etiquette-mono::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--ambre);
  box-shadow: 0 0 12px rgba(214, 178, 94, 0.8);
}

.carnet-bandeau-grille {
  display: grid;
  gap: 1rem;
  align-items: end;
}

@media (min-width: 62rem) {
  .carnet-bandeau-grille {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.carnet-bandeau h1 {
  margin: 0.8rem 0 0.4rem;
  font-size: clamp(3rem, 1.6rem + 6vw, 6.4rem);
  letter-spacing: -0.045em;
}

.carnet-bandeau .chapo {
  margin: 0;
}

.compteur {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--texte-2);
}

.compteur b {
  display: block;
  font-family: var(--police-titre);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ambre);
}

/* Les boutons et les pastilles du temps (.bouton.ambre, .pastille-temps) sont dans plan.css : l'accueil s'en sert aussi. */

/* --- a la une : l'affiche dans un cadre de telephone, en perspective ------------------------------------------ */
.une {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: 2rem 0 4rem;
}

@media (min-width: 62rem) {
  .une {
    grid-template-columns: 4fr 8fr;
  }
}

.telephone-scene {
  perspective: 1200px;
  display: grid;
  place-items: center;
}

.telephone {
  position: relative;
  width: min(17rem, 78vw);
  padding: 0.7rem;
  border-radius: 2.4rem;
  background: linear-gradient(160deg, #26262d, #0c0c0f 60%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 50px 90px -30px rgba(0, 0, 0, 0.95),
    0 0 80px -20px rgba(56, 255, 255, 0.25);
  transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg);
}

.telephone::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(214, 178, 94, 0.35), transparent 70%);
  filter: blur(10px);
}

.telephone-scene:hover .telephone,
.telephone:focus-within {
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateY(-6px);
}

.telephone img,
.telephone video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 1.8rem;
  background: #000;
}

.une-texte {
  position: relative;
}

.une-texte .numero-filigrane {
  position: absolute;
  z-index: -1;
  top: -3.5rem;
  right: 0;
  font-family: var(--police-titre);
  font-size: clamp(8rem, 5rem + 10vw, 15rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(214, 178, 94, 0.25);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--texte-3);
}

.meta .temps {
  color: var(--ambre);
}

.une-texte h2 {
  margin: 0.6rem 0 0.8rem;
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.2rem);
}

.une-texte .chapo {
  color: var(--texte-2);
  font-size: 1.15rem;
  max-width: 36rem;
}

.sommaire-puces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.sommaire-puces a {
  display: inline-flex;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--bordure-forte);
  color: var(--texte-2);
  font-size: 0.85rem;
  text-decoration: none;
}

.sommaire-puces a b {
  font-family: var(--mono);
  font-weight: 400;
  color: var(--ambre);
}

.sommaire-puces a:hover {
  color: var(--texte);
  border-color: var(--ambre-trait);
}

/* --- le fil : un rail ambre, des feuillets par mois ----------------------------------------------------------- */
.fil {
  position: relative;
  padding: 1rem 0 4rem 2.2rem;
}

@media (min-width: 62rem) {
  .fil {
    padding-left: 12rem;
  }
}

.fil::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.55rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ambre), rgba(214, 178, 94, 0.25));
  box-shadow: 0 0 16px rgba(214, 178, 94, 0.5);
  transform-origin: top;
}

@media (min-width: 62rem) {
  .fil::before {
    left: 10.2rem;
  }
}

.fil-mois {
  position: relative;
  margin: 2.4rem 0 1.2rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambre);
}

@media (min-width: 62rem) {
  .fil-mois {
    position: absolute;
    left: -12rem;
    width: 8.6rem;
    margin-top: 0.6rem;
    text-align: right;
  }
}

.fil-groupe {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-bottom: 2.4rem;
}

.feuillet {
  position: relative;
  display: grid;
  gap: 0.5rem;
  padding: 1.2rem 1.3rem;
  border-radius: var(--rayon-carte);
  border: 1px solid var(--bordure-forte);
  background: rgba(17, 17, 21, 0.92);
  color: var(--texte);
  text-decoration: none;
}

.feuillet::before {
  content: "";
  position: absolute;
  left: -1.95rem;
  top: 1.5rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--fond);
  border: 2px solid var(--ambre);
  box-shadow: 0 0 10px rgba(214, 178, 94, 0.7);
}

@media (min-width: 62rem) {
  .feuillet::before {
    left: -2.05rem;
  }
}

.feuillet:hover,
.feuillet:focus-visible {
  color: var(--texte);
  border-color: var(--ambre-trait);
  box-shadow: 0 30px 60px -30px rgba(214, 178, 94, 0.4);
}

.feuillet-episode {
  grid-template-columns: 6rem minmax(0, 1fr);
  column-gap: 1.3rem;
  align-items: start;
}

.feuillet-episode img {
  grid-row: span 4;
  width: 6rem;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--ambre-trait);
}

.feuillet-etiquette {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambre);
}

.feuillet h3 {
  margin: 0;
  font-size: 1.3rem;
}

.feuillet-version h3 {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0;
}

.feuillet p {
  margin: 0;
  color: var(--texte-2);
  font-size: 0.95rem;
}

.feuillet .lien-recit {
  margin-top: 0.2rem;
}

.aujourdhui {
  display: grid;
  gap: 0.6rem;
  padding: 1.4rem;
  border-radius: var(--rayon-carte);
  border: 1px dashed var(--ambre-trait);
  background: rgba(214, 178, 94, 0.04);
}

.aujourdhui p {
  margin: 0;
  color: var(--texte-2);
}

.aujourdhui p strong {
  display: block;
  color: var(--texte);
}

.suivre {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0 0 5rem;
}

/* --- un numero : deux colonnes, la video collante a gauche, le carnet a droite ------------------------------- */
.numero-tete {
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 2rem;
}

.numero-tete h1 {
  margin: 0.8rem 0 0.4rem;
  font-size: clamp(3rem, 1.6rem + 6vw, 6.4rem);
  letter-spacing: -0.045em;
}

.numero-tete .par {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--texte-3);
}

/* Le chapo du numero, sous le titre. */
.numero-tete .chapo {
  max-width: 44rem;
  margin: 0.4rem 0 1rem;
  color: var(--texte-2);
  font-size: 1.15rem;
}

.numero-corps {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 5rem;
}

@media (min-width: 62rem) {
  .numero-corps {
    grid-template-columns: 4fr 8fr;
    align-items: start;
  }

  .numero-cote {
    position: sticky;
    top: 6rem;
  }
}

/* Dans un numero la video est droite : c'est son etat une fois arrivee (elle se redresse en entrant, sous le garde du mouvement). */
.numero-cote .telephone {
  width: min(16rem, 80vw);
  transform: none;
}

.sommaire-vertical {
  display: grid;
  gap: 0.1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.sommaire-vertical a {
  display: flex;
  gap: 0.8rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  color: var(--texte-3);
  font-size: 0.92rem;
  text-decoration: none;
}

.sommaire-vertical a b {
  font-family: var(--mono);
  font-weight: 400;
}

.sommaire-vertical a:hover {
  color: var(--texte);
  background: rgba(255, 255, 255, 0.04);
}

.liens-cote {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.8rem;
}

/* --- les sections du carnet : le numero en contour ambre, derriere le texte -------------------------------------- */
.page-carnet {
  position: relative;
  padding: 2.4rem 0 2.4rem 0;
  border-top: 1px solid var(--bordure);
}

.page-carnet:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-carnet .num {
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambre);
}

.page-carnet .num-geant {
  position: absolute;
  z-index: -1;
  right: 0;
  top: 1rem;
  font-family: var(--police-titre);
  font-size: 7rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(214, 178, 94, 0.2);
}

.page-carnet h2 {
  margin: 0.5rem 0 1rem;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
}

.page-carnet p {
  max-width: 40rem;
  color: var(--texte-2);
  font-size: 1.08rem;
}

.page-carnet p strong {
  color: var(--texte);
}

.page-carnet .note-sorts {
  margin: 0 0 1.2rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--texte-3);
}

/* Les sorts a portee minimale : une grille de pastilles, la portee minimale en ambre. */
.sorts-portee {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 0.5rem;
  margin: 1.2rem 0 0.4rem;
  padding: 0;
  list-style: none;
}

.sorts-portee li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--bordure);
  background: rgba(17, 17, 21, 0.9);
  font-size: 0.92rem;
}

.sorts-portee b {
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--ambre);
}

.sorts-portee b::before {
  content: "min ";
  font-size: 0.72rem;
  color: var(--texte-3);
}

.sorts-portee small {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texte-3);
}

/* La formule, ecrite comme au tableau. */
.formule {
  display: grid;
  gap: 0.5rem;
  margin: 1.4rem 0;
  padding: 1.4rem 1.6rem;
  border-radius: var(--rayon-carte);
  border: 1px solid var(--bordure-forte);
  background:
    linear-gradient(var(--quadrille) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--quadrille) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--panneau);
  font-family: var(--mono);
}

.formule .egalite {
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  color: var(--texte);
  overflow-wrap: anywhere;
}

.formule .note {
  font-size: 0.85rem;
  color: var(--texte-3);
}

.formule .resultat {
  color: var(--ambre);
}

/* La parade : l'ordre du tour, en marches ; une marche a l'etude est en pointilles. */
.parade {
  display: grid;
  gap: 0.8rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.parade li {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--rayon-carte);
  border: 1px solid var(--bordure-forte);
  background: var(--panneau);
}

.parade li:nth-child(2) {
  margin-left: 1.5rem;
}

.parade li:nth-child(n + 3) {
  margin-left: 3rem;
}

.parade b {
  grid-row: span 2;
  font-family: var(--police-titre);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(56, 255, 255, 0.5);
}

.parade strong {
  color: var(--texte);
  font-family: var(--police-titre);
  font-size: 1.1rem;
}

.parade span {
  color: var(--texte-2);
  font-size: 0.98rem;
}

.parade .parade-etude {
  border-style: dashed;
  border-color: var(--ambre-trait);
  background: rgba(214, 178, 94, 0.04);
}

.parade .parade-etude b {
  -webkit-text-stroke-color: var(--ambre);
}

@media (max-width: 47.99rem) {
  .parade li:nth-child(n + 2) {
    margin-left: 0;
  }
}

/* Le schema isometrique : sa derniere image, celle que montre un ecran sans mouvement. Le Cra est sorti de trois cases (une
   case isometrique fait 44 de large et 22 de haut : trois cases, 132 et 66). */
.schema {
  margin: 1.6rem 0;
}

.schema svg {
  width: 100%;
  height: auto;
}

.schema figcaption {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--texte-3);
}

.schema .case {
  fill: #121217;
  stroke: rgba(255, 255, 255, 0.07);
}

.schema .case-portee {
  fill: rgba(206, 86, 86, 0.28);
  stroke: rgba(206, 86, 86, 0.5);
}

.schema .pas {
  fill: none;
  stroke: #8c95dd;
  stroke-width: 3;
  stroke-dasharray: 8 8;
  stroke-linecap: round;
}

.schema .jeton-cra {
  fill: #5e6ad2;
  stroke: #c9cdfb;
  stroke-width: 2;
}

.schema .jeton-monstre {
  fill: #ce5656;
  stroke: #f3b0b0;
  stroke-width: 2;
}

.schema .cra-sort {
  transform: translate(-132px, 66px);
}

.schema .etiq {
  font-family: var(--police-code);
  font-size: 15px;
  fill: var(--texte-2);
}

.schema .etiq-rouge {
  fill: #e48b8b;
}

.schema .etiq-ambre {
  fill: var(--ambre);
}

/* Les points perdus : un voile sombre sur les pastilles, pose de droite a gauche quand le schema s'anime, deja en place sans mouvement. */
.schema .jauge-fond {
  fill: rgba(9, 9, 11, 0.72);
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
}

.schema .jauge-pa {
  fill: #6c8fe6;
}

.schema .jauge-pm {
  fill: #62be8c;
}

/* Le journal de ZaapBot, ce jour-la : les lignes sont ecrites. */
.terminal {
  margin: 1.4rem 0;
  border-radius: var(--rayon-carte);
  border: 1px solid var(--bordure-forte);
  background: #0b0b0e;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.terminal-tete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bordure);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: #8c95dd;
}

.terminal-tete i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--bordure-forte);
}

.terminal ol {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 1rem 1.1rem 1.2rem;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.86rem;
}

.terminal li {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 0.8rem;
  color: var(--texte);
}

.terminal time {
  color: var(--texte-3);
}

.terminal .vert {
  color: #62be8c;
}

.page-carnet .terminal-legende {
  max-width: none;
  margin: 0;
  padding: 0 1.1rem 1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--texte-3);
}

/* Au prochain patch : relie a la feuille de route, pastille « Prevu, sans date ». */
.prochain-patch {
  position: relative;
  display: grid;
  gap: 0.7rem;
  margin: 1.4rem 0;
  padding: 1.5rem 1.6rem;
  border-radius: var(--rayon-carte);
  border: 1px solid var(--ambre-trait);
  background: radial-gradient(80% 120% at 0% 0%, rgba(214, 178, 94, 0.12), transparent 60%), var(--panneau);
  box-shadow: 0 0 0 4px rgba(214, 178, 94, 0.05);
}

.prochain-patch .diff {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.9rem;
}

.prochain-patch .moins {
  color: #e48b8b;
}

.prochain-patch .plus {
  color: #62be8c;
}

/* La suite : des tuiles-portails. */
.portails {
  display: grid;
  gap: 1rem;
  margin-top: 1.4rem;
}

@media (min-width: 48rem) {
  .portails {
    grid-template-columns: 1fr 1fr;
  }
}

.portail {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.3rem;
  padding: 1.3rem 1.4rem;
  border-radius: var(--rayon-carte);
  border: 1px solid var(--bordure-forte);
  background: var(--panneau);
  color: var(--texte);
  text-decoration: none;
}

.portail::after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 255, 255, 0.35), rgba(35, 161, 172, 0.1) 45%, transparent 70%);
  transform: scale(0.6);
}

.portail:hover {
  color: var(--texte);
  border-color: rgba(56, 255, 255, 0.35);
}

.portail:hover::after {
  transform: scale(1.4);
}

.portail small {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-3);
}

.portail strong {
  font-family: var(--police-titre);
  font-size: 1.25rem;
}

.portail span {
  color: var(--texte-2);
}

/* Telephone et tablette : la video passe en tete, pleine largeur, non collante ; une colonne partout. */
@media (max-width: 61.99rem) {
  .telephone {
    transform: none;
  }

  .une-texte .numero-filigrane {
    top: -2rem;
  }
}

/* --- le mouvement : seulement pour qui ne l'a pas coupe ---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .telephone {
    transition: transform 1s var(--courbe);
  }

  .telephone-scene:hover .telephone,
  .telephone:focus-within {
    transition-duration: 0.6s;
  }

  .feuillet {
    transition: transform 0.6s var(--courbe), border-color 0.3s, box-shadow 0.6s var(--courbe);
  }

  .feuillet:hover,
  .feuillet:focus-visible {
    transform: translateX(6px);
  }

  .sommaire-puces a {
    transition: border-color 0.3s, color 0.3s;
  }

  .portail {
    transition: transform 0.6s var(--courbe), border-color 0.3s;
  }

  .portail::after {
    transition: transform 0.8s var(--courbe);
  }

  .portail:hover {
    transform: translateY(-4px);
  }

  /* Ce qui suit l'ecran qui defile : sans lui (Firefox, Safari avant la 26), la page reste celle du dessus. */
  @supports (animation-timeline: view()) {
    /* Le papier : deux quadrilles qui derivent a des vitesses differentes. */
    .carnet::before,
    .carnet::after {
      animation: derive linear both;
      animation-timeline: scroll(root);
    }

    .carnet::before {
      --derive: -18vh;
    }

    .carnet::after {
      --derive: -34vh;
    }

    @keyframes derive {
      to {
        transform: translateY(var(--derive));
      }
    }

    .une-texte .numero-filigrane {
      animation: filigrane-glisse linear both;
      animation-timeline: view();
    }

    @keyframes filigrane-glisse {
      from {
        transform: translateY(3rem);
      }
      to {
        transform: translateY(-3rem);
      }
    }

    /* Le rail du fil se trace, les feuillets entrent un a un. */
    .fil::before {
      animation: rail-trace linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 30%;
    }

    @keyframes rail-trace {
      from {
        transform: scaleY(0);
      }
    }

    .feuillet {
      animation: feuillet-entre linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    @keyframes feuillet-entre {
      from {
        opacity: 0;
        transform: translateX(3rem) rotateY(-10deg);
      }
    }

    /* La video du numero se redresse en arrivant au centre. */
    .numero-cote .telephone {
      animation: telephone-redresse linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    @keyframes telephone-redresse {
      from {
        transform: rotateY(-22deg) rotateX(12deg) translateY(3rem);
      }
      to {
        transform: none;
      }
    }

    /* L'entree active du sommaire suit le defilement : chaque section porte une ligne de temps nommee. */
    .numero-corps {
      timeline-scope: --s1, --s2, --s3, --s4, --s5, --s6, --s7, --s8, --s9, --s10;
    }

    #s-01 { view-timeline-name: --s1; }
    #s-02 { view-timeline-name: --s2; }
    #s-03 { view-timeline-name: --s3; }
    #s-04 { view-timeline-name: --s4; }
    #s-05 { view-timeline-name: --s5; }
    #s-06 { view-timeline-name: --s6; }
    #s-07 { view-timeline-name: --s7; }
    #s-08 { view-timeline-name: --s8; }
    #s-09 { view-timeline-name: --s9; }
    #s-10 { view-timeline-name: --s10; }

    .sommaire-vertical li:nth-child(1) a { animation: sommaire-actif linear both; animation-timeline: --s1; }
    .sommaire-vertical li:nth-child(2) a { animation: sommaire-actif linear both; animation-timeline: --s2; }
    .sommaire-vertical li:nth-child(3) a { animation: sommaire-actif linear both; animation-timeline: --s3; }
    .sommaire-vertical li:nth-child(4) a { animation: sommaire-actif linear both; animation-timeline: --s4; }
    .sommaire-vertical li:nth-child(5) a { animation: sommaire-actif linear both; animation-timeline: --s5; }
    .sommaire-vertical li:nth-child(6) a { animation: sommaire-actif linear both; animation-timeline: --s6; }
    .sommaire-vertical li:nth-child(7) a { animation: sommaire-actif linear both; animation-timeline: --s7; }
    .sommaire-vertical li:nth-child(8) a { animation: sommaire-actif linear both; animation-timeline: --s8; }
    .sommaire-vertical li:nth-child(9) a { animation: sommaire-actif linear both; animation-timeline: --s9; }
    .sommaire-vertical li:nth-child(10) a { animation: sommaire-actif linear both; animation-timeline: --s10; }

    @keyframes sommaire-actif {
      0%, 25%, 75%, 100% {
        color: var(--texte-3);
        background: transparent;
      }
      30%, 70% {
        color: var(--ambre);
        background: var(--ambre-doux);
      }
    }

    /* Le numero geant d'une section glisse plus lentement que le texte. */
    .page-carnet .num-geant {
      animation: num-lent linear both;
      animation-timeline: view();
    }

    @keyframes num-lent {
      from {
        transform: translateY(4rem);
      }
      to {
        transform: translateY(-4rem);
      }
    }

    /* Les sorts a portee minimale entrent en cascade. */
    .sorts-portee li {
      animation: sort-entre linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }

    .sorts-portee li:nth-child(3n + 2) { animation-range: entry 6% cover 30%; }
    .sorts-portee li:nth-child(3n) { animation-range: entry 12% cover 35%; }

    @keyframes sort-entre {
      from {
        opacity: 0;
        transform: translateY(1rem) rotateX(25deg);
      }
    }

    /* La parade monte marche par marche. */
    .parade li {
      animation: marche-entre linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    .parade li:nth-child(2) { animation-range: entry 8% cover 36%; }
    .parade li:nth-child(n + 3) { animation-range: entry 16% cover 42%; }

    @keyframes marche-entre {
      from {
        opacity: 0;
        transform: translateX(-2rem);
      }
    }

    /* Le schema : les pieces se posent une a une quand il entre dans l'ecran, puis le Cra sort et les jauges se vident. */
    .schema .apparait-1,
    .schema .apparait-2,
    .schema .apparait-3,
    .schema .apparait-4 {
      animation: piece-pose linear both;
      animation-timeline: view();
    }

    .schema .apparait-1 { animation-range: entry 20% cover 35%; }
    .schema .apparait-2 { animation-range: cover 30% cover 42%; }
    .schema .apparait-3 { animation-range: cover 38% cover 50%; }
    .schema .apparait-4 { animation-range: cover 46% cover 58%; }

    @keyframes piece-pose {
      from {
        opacity: 0;
        transform: translateY(-14px);
      }
    }

    .schema .cra-sort {
      animation: cra-sort linear both;
      animation-timeline: view();
      animation-range: cover 40% cover 60%;
    }

    @keyframes cra-sort {
      from {
        transform: translate(0, 0);
      }
      to {
        transform: translate(-132px, 66px);
      }
    }

    .schema .pas {
      animation: pas-trace linear both;
      animation-timeline: view();
      animation-range: cover 34% cover 58%;
    }

    @keyframes pas-trace {
      from {
        stroke-dashoffset: 200;
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
    }

    .schema .jauge-pa-vide,
    .schema .jauge-pm-vide {
      transform-box: fill-box;
      transform-origin: right;
      animation: jauge-se-vide linear both;
      animation-timeline: view();
      animation-range: cover 40% cover 55%;
    }

    @keyframes jauge-se-vide {
      from {
        transform: scaleX(0);
      }
    }

    /* Les lignes du journal de ZaapBot s'ecrivent une a une quand la carte traverse l'ecran. */
    .terminal li {
      animation: ligne-ecrit linear both;
      animation-timeline: view();
    }

    .terminal li:nth-child(1) { animation-range: entry 40% cover 30%; }
    .terminal li:nth-child(2) { animation-range: cover 25% cover 38%; }
    .terminal li:nth-child(3) { animation-range: cover 33% cover 46%; }
    .terminal li:nth-child(n + 4) { animation-range: cover 41% cover 54%; }

    @keyframes ligne-ecrit {
      from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
      }
      to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
      }
    }
  }
}

/* Les transitions entre pages d'un meme numero : l'affiche et le titre de la une passent de l'index au numero (le dernier
   numero seulement : un autre n'a pas de nom de transition, et la page entre sans). Comme plan.css, sans mouvement reduit
   et hors telephone, rien ne se declare. */
@media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
  .une .affiche-partagee {
    view-transition-name: affiche-une;
  }

  .une-texte h2 {
    view-transition-name: titre-une;
  }

  .est-la-une .numero-cote .affiche-partagee {
    view-transition-name: affiche-une;
  }

  .est-la-une .numero-tete h1 {
    view-transition-name: titre-une;
  }
}

/* --- l'impression : le texte, a plat, en encre ------------------------------------------------------------- */
@media print {
  :root {
    --ambre: #6b5210;
    --ambre-doux: transparent;
    --ambre-trait: rgba(0, 0, 0, 0.35);
    --quadrille: transparent;
  }

  /* Les effets lies au defilement n'ont pas de chronologie sur papier : tout est imprime a sa place, sa derniere image. */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .carnet::before,
  .carnet::after,
  .fil::before,
  .telephone::after,
  .portail::after,
  .num-geant,
  .numero-filigrane,
  .numero-cote .telephone-scene,
  .sommaire-vertical,
  .suivre {
    display: none;
  }

  .numero-corps {
    display: block;
  }

  .numero-cote {
    position: static;
  }

  .telephone {
    transform: none;
    box-shadow: none;
    background: none;
  }

  .feuillet,
  .sorts-portee li,
  .terminal,
  .formule,
  .prochain-patch,
  .parade li,
  .portail,
  .aujourdhui {
    background: none;
    box-shadow: none;
  }

  .terminal {
    color: #000;
  }

  .terminal-tete,
  .terminal li,
  .terminal .vert,
  .prochain-patch .moins,
  .prochain-patch .plus {
    color: #000;
  }

  .formule {
    background: none;
  }

  .schema .case {
    fill: #f2f2f2;
    stroke: #999;
  }

  .schema .case-portee {
    fill: #e6b4b4;
    stroke: #a33;
  }

  .schema .etiq,
  .schema .etiq-rouge,
  .schema .etiq-ambre {
    fill: #000;
  }

  .schema .jauge-fond {
    fill: #ddd;
  }
}