/* plan.css : le chassis du plan « L'Atelier ouvert » (02/11/2026), pose par-dessus site.css sur toutes les pages :
   l'en-tete a quatre liens et son bouton Menu, le menu « Plan » (un popover plein ecran : quatre tuiles, un objet 3D
   par zone), le pied en quatre colonnes revele sous le dernier chapitre, la barre d'onglets du Journal de bord et les
   transitions entre pages, puis (T2) l'accueil a six chapitres numerotes 00 a 05 : l'index « Sur cette page », les trois
   portes, le chapitre du Journal de bord en eventail, l'encadre des pages du bot et les trois etapes. Les pages du Journal ont
   leur feuille (journal.css). Le HTML du chassis est ecrit par tools/site_zaapbot/generer_pages.py, celui du chapitre 04 de
   l'accueil et de l'encadre par tools/site_zaapbot/generer_journal.py.
   Hugo, le 01/11/2026 : « Si on fait le journal sur le site il faudrais changer un peu le site et le layout global.
   Car il y aurais trop de choses dessus alors que la base reste une one page scroll tu vois ? ».
   Trois couleurs, trois roles : indigo = agir (boutons, liens), turquoise du zaap = la lueur (arche, vortex, halo des
   tuiles du plan), ambre = le temps (numeros d'episodes, dates, Journal de bord), jamais ailleurs.
   Aucun script : popover, view transitions, animations liees au defilement.
   LE MOUVEMENT. Tout ce qui bouge (transition, animation, transition de page) est sous
   (prefers-reduced-motion: no-preference), et le mouvement lie au defilement sous @supports (animation-timeline: view())
   en plus : sous mouvement reduit, tout est deja a sa place, rien n'est cache. 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_chassis.py) refuse une transition, une animation ou une transition de page
   hors de ce garde. */

:root {
  --ambre: #d6b25e;
  --ambre-doux: rgba(214, 178, 94, 0.14);
  --ambre-trait: rgba(214, 178, 94, 0.38);
  --quadrille: rgba(214, 178, 94, 0.06);
  --mono: var(--police-code);
}

/* --- l'en-tete : quatre liens, Discord, Menu ---------------------------------------------------- */
.navigation a.nav-journal[aria-current="page"],
.dans-le-journal .navigation a.nav-journal {
  color: var(--ambre);
  background: var(--ambre-doux);
}

.entete-menu {
  padding: 0.55rem 0.9rem;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
}

.menu-traits {
  display: inline-grid;
  gap: 4px;
  width: 16px;
}

.menu-traits i {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.menu-traits i:last-child {
  width: 70%;
  justify-self: end;
}

@media (max-width: 52rem) {
  .navigation li:nth-child(1),
  .navigation li:nth-child(3) {
    display: none;
  }
}

@media (max-width: 42rem) {
  .navigation {
    display: none;
  }

  .entete-discord {
    display: none;
  }

  .entete-menu {
    margin-left: auto;
  }
}

/* --- le menu « Plan » : un popover plein ecran, ouvert depuis le bouton Menu ------------------------------ */
.plan {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  color: var(--texte);
  background:
    radial-gradient(60% 50% at 78% 40%, rgba(35, 161, 172, 0.12), transparent 70%),
    radial-gradient(40% 40% at 15% 85%, rgba(94, 106, 210, 0.12), transparent 70%),
    #09090b;
  clip-path: circle(0% at calc(100% - 3.2rem) 2rem);
}

.plan:popover-open {
  clip-path: circle(160% at calc(100% - 3.2rem) 2rem);
}

.plan::backdrop {
  background: transparent;
}

.plan-cadre {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
  min-height: 100%;
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
  padding: 1rem 0 2rem;
}

.plan-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
}

.plan-fermer {
  cursor: pointer;
  font-family: inherit;
}

/* Les quatre tuiles : une par zone, l'objet 3D de la zone en grand (une image rendue une fois, voir
   tools/site_zaapbot/3d/README.md), son numero, son nom, ses sous-liens. Hugo, le 02/11/2026 : « il leur faudrais une
   icone par zone et/ou des éléments 3D chacuns pour représenter "Le bot" "Journal de bord" "Commencer" "Aide" ».
   Trois mises en page : sur telephone une rangee par zone (l'objet a gauche, 4,5 rem), de 40 rem a 64 rem deux colonnes,
   au-dela quatre tuiles en une seule rangee. Le lien de la tuile est son nom : il est etire sur toute la tuile, les
   sous-liens passent au-dessus. `--halo` est la couleur de la lueur de la tuile : turquoise, et l'ambre du temps pour le
   Journal de bord. */
.plan-zones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-content: center;
}

.plan-zone {
  --halo: var(--lueur-vive);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-areas:
    "objet ici"
    "objet lien"
    "objet liste";
  align-content: center;
  align-items: start;
  column-gap: 1rem;
  padding: 0.8rem 1rem 0.8rem 0.8rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  background: rgba(255, 255, 255, 0.02);
}

.plan-zone-journal {
  --halo: var(--ambre);
}

/* Le voile de lueur de la tuile, sous son contenu (isolation : le -1 reste dans la tuile). */
.plan-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--halo) 10%, transparent), transparent 65%);
  opacity: 0;
  pointer-events: none;
}

.plan-zone-ici {
  border-color: color-mix(in srgb, var(--halo) 28%, var(--bordure));
}

.plan-zone-ici::before {
  opacity: 0.55;
}

.plan-zone:hover,
.plan-zone:focus-within {
  border-color: color-mix(in srgb, var(--halo) 50%, transparent);
}

.plan-zone:hover::before,
.plan-zone:focus-within::before {
  opacity: 1;
}

/* Le focus clavier entoure la tuile entiere, pas seulement la ligne du nom. */
.plan-zone-lien:focus-visible {
  outline: none;
}

.plan-zone:has(.plan-zone-lien:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* L'objet : l'image de la pose, et derriere elle la lueur qui s'allume au survol. */
.plan-objet {
  grid-area: objet;
  align-self: center;
  position: relative;
  display: block;
}

.plan-objet img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.plan-objet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 50% 62%, color-mix(in srgb, var(--halo) 30%, transparent), transparent 72%);
  opacity: 0;
}

.plan-zone-ici .plan-objet::before {
  opacity: 0.5;
}

.plan-zone:hover .plan-objet::before,
.plan-zone:focus-within .plan-objet::before {
  opacity: 1;
}

/* « Tu es ici » : une pastille sur la tuile de la page ; l'ecran n'en montre qu'une (aucune sur la page introuvable). */
.plan-ici {
  grid-area: ici;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--halo) 32%, transparent);
  border-radius: 99px;
  background: color-mix(in srgb, var(--halo) 10%, transparent);
  color: var(--halo);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  pointer-events: none;
}

.plan-ici::before {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* Le nom de la zone, qui est son lien, et le numero (gris : l'ambre est reserve au temps). */
.plan-zone-lien {
  grid-area: lien;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--texte);
  text-decoration: none;
  font-family: var(--police-titre);
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.plan-zone-lien::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--rayon-carte);
}

.plan-num {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--texte-3);
}

.plan-zone:hover .plan-zone-lien,
.plan-zone:focus-within .plan-zone-lien {
  color: var(--halo);
}

/* Les sous-liens, au-dessus du lien etire. Sur telephone ils se suivent sur la ligne. */
.plan-zone ul {
  grid-area: liste;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.9rem;
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
}

.plan-zone ul a {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 0.3rem 0;
  color: var(--texte-2);
  font-size: 0.88rem;
  text-decoration: none;
}

.plan-zone ul a:hover,
.plan-zone ul a:focus-visible {
  color: var(--texte);
}

@media (min-width: 40rem) {
  /* Deux colonnes : l'objet au-dessus du nom, et il depasse un peu du haut de la tuile (la place est reservee). */
  .plan-zones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.4rem 1rem;
    padding-top: 2.6rem;
  }

  .plan-zone {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "objet"
      "lien"
      "liste";
    align-content: start;
    padding: 0 1.2rem 1.1rem;
  }

  .plan-objet {
    justify-self: center;
    width: min(100%, 12rem);
    margin-top: -2.6rem;
  }

  .plan-zone-lien {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.4rem;
    font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2rem);
  }

  .plan-ici {
    grid-area: lien;
    justify-self: end;
    margin: 0.4rem 0 0;
  }

  .plan-zone ul {
    display: block;
    margin-top: 0.9rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--bordure);
  }

  .plan-zone ul a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.42rem 0;
    font-size: 0.95rem;
  }

  .plan-zone ul a::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    opacity: 0.45;
    transform: rotate(45deg);
  }
}

@media (min-width: 64rem) {
  /* Quatre tuiles en une rangee. L'objet suit la hauteur de l'ecran : le menu entier tient sans defiler des 720 px de haut. */
  .plan-zones {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .plan-objet {
    width: min(100%, 15rem);
    width: min(100%, 15rem, 32dvh);
  }
}

.plan-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--bordure);
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--texte-3);
}

.plan-bas a {
  color: var(--texte-2);
}

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

.plan-bas .bouton {
  margin-left: auto;
  font-family: var(--police);
}

/* --- le pied : quatre colonnes, revele derriere le dernier chapitre sur grand ecran -------------------------- */
.pied-colonnes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 62rem) {
  .pied-colonnes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pied-titre-ambre {
  color: var(--ambre);
}

/* Le pied se revele sous le contenu, qui est un cadre aux coins arrondis pose dessus. Garde sur la largeur ET la hauteur :
   a 200 % de zoom la hauteur disponible chute et l'effet se coupe tout seul, au lieu de rogner le pied. */
@media (min-width: 62rem) and (min-height: 46rem) {
  main {
    position: relative;
    z-index: 1;
    background: var(--fond);
    box-shadow: 0 40px 60px -20px rgba(0, 0, 0, 0.9);
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
  }

  .pied {
    position: sticky;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
  }

  .pied::before {
    content: "ZaapBot";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: -0.18em;
    transform: translateX(-50%);
    font-family: var(--police-titre);
    font-size: 18vw;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(56, 255, 255, 0.12);
    pointer-events: none;
  }
}

/* --- la barre d'onglets du Journal de bord (Tout, Versions, Feuille de route) ------------------------------ */
.onglets {
  position: sticky;
  top: 4rem;
  z-index: 45;
  border-bottom: 1px solid var(--bordure);
  background: rgba(9, 9, 11, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.onglets ul {
  display: flex;
  gap: 0.4rem;
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.onglets a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.95rem 0.9rem;
  color: var(--texte-2);
  font-size: 0.94rem;
  text-decoration: none;
  white-space: nowrap;
}

.onglets a small {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--texte-3);
}

.onglets a:hover {
  color: var(--texte);
}

.onglets a[aria-current="page"] {
  color: var(--texte);
}

.onglets a[aria-current="page"] small {
  color: var(--ambre);
}

.onglets a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ambre);
  box-shadow: 0 0 14px rgba(214, 178, 94, 0.7);
}

/* --- sans popover : le bouton Menu ne servirait a rien, l'en-tete garde ses quatre liens a toute largeur et le pied
   fait office de plan -------------------------------------------------------------------------------------- */
@supports not selector(:popover-open) {
  .entete-menu,
  .plan {
    display: none;
  }

  .entete .enveloppe {
    flex-wrap: wrap;
    padding-block: 0.4rem;
  }

  .navigation,
  .navigation li:nth-child(n) {
    display: block;
  }

  .navigation ul {
    flex-wrap: wrap;
  }

  .entete-discord {
    display: inline-flex;
  }
}

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

  .entete-menu:hover .menu-traits i:last-child {
    transform: scaleX(1.43) translateX(-15%);
  }

  /* Le menu s'ouvre par un voile circulaire depuis le bouton (Chrome, Edge, Safari 18 : ailleurs il apparait d'un coup). */
  .plan {
    transition: clip-path 0.6s var(--courbe), overlay 0.6s allow-discrete, display 0.6s allow-discrete;
  }

  @starting-style {
    .plan:popover-open {
      clip-path: circle(0% at calc(100% - 3.2rem) 2rem);
    }
  }

  /* Les tuiles montent en cascade a l'ouverture. */
  .plan:popover-open .plan-zone {
    animation: plan-monte 0.7s var(--courbe) both;
  }

  .plan:popover-open .plan-zone:nth-child(2) { animation-delay: 0.06s; }
  .plan:popover-open .plan-zone:nth-child(3) { animation-delay: 0.12s; }
  .plan:popover-open .plan-zone:nth-child(4) { animation-delay: 0.18s; }

  @keyframes plan-monte {
    from {
      opacity: 0;
      transform: translateY(2.2rem);
    }
  }

  /* La lueur, la couleur et la bordure arrivent doucement. */
  .plan-zone {
    transition: border-color 0.3s;
  }

  .plan-zone::before,
  .plan-objet::before {
    transition: opacity 0.4s;
  }

  .plan-zone-lien,
  .plan-zone ul a {
    transition: color 0.25s;
  }

  .plan-zone ul a::after {
    transition: transform 0.35s var(--courbe), opacity 0.25s;
  }

  .plan-zone ul a:hover::after,
  .plan-zone ul a:focus-visible::after {
    opacity: 0.9;
    transform: translateX(0.18rem) rotate(45deg);
  }

  /* Le leger flottement : chaque objet monte et descend de 0,4 rem, chacun a son rythme (et il commence deja en route). */
  .plan:popover-open .plan-objet {
    animation: plan-flotte 6s ease-in-out infinite alternate;
  }

  .plan:popover-open .plan-zone:nth-child(2) .plan-objet {
    animation-duration: 6.8s;
    animation-delay: -2.1s;
  }

  .plan:popover-open .plan-zone:nth-child(3) .plan-objet {
    animation-duration: 5.6s;
    animation-delay: -3.4s;
  }

  .plan:popover-open .plan-zone:nth-child(4) .plan-objet {
    animation-duration: 6.4s;
    animation-delay: -0.9s;
  }

  @keyframes plan-flotte {
    to {
      transform: translateY(-0.4rem);
    }
  }

  .onglets a {
    transition: color 0.2s;
  }
}

/* Le mouvement des objets du menu : au survol (ou au focus) d'une tuile, la planche de neuf vues de l'objet (un balancement de
   40 degres, voir tools/site_zaapbot/3d/README.md) se joue a la place de la pose, par un decalage du fond en `steps(9)`, sans
   script, en aller-retour. La planche ne vit QUE ici et que sous ce garde : sans mouvement ou sans survol possible (un
   telephone, un mouvement reduit), la pose seule reste, nette, et la planche n'est jamais demandee. Pour qu'elle soit la au
   premier survol, elle est demandee a l'ouverture du menu, sous un calque transparent, et pas avant : 145 Ko par zone. La
   vue du milieu est exactement la pose, et le delai negatif de la moitie de la duree fait partir le balancement de la pose :
   le passage de l'une a l'autre ne se voit pas. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .plan:popover-open .plan-objet::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 900% 100%;
    opacity: 0;
  }

  .plan:popover-open .plan-zone-bot .plan-objet::after {
    background-image: url(/images/plan/bot-mouvement.webp);
  }

  .plan:popover-open .plan-zone-journal .plan-objet::after {
    background-image: url(/images/plan/journal-mouvement.webp);
  }

  .plan:popover-open .plan-zone-commencer .plan-objet::after {
    background-image: url(/images/plan/commencer-mouvement.webp);
  }

  .plan:popover-open .plan-zone-aide .plan-objet::after {
    background-image: url(/images/plan/aide-mouvement.webp);
  }

  .plan:popover-open .plan-zone:hover .plan-objet img,
  .plan:popover-open .plan-zone:focus-within .plan-objet img {
    opacity: 0;
  }

  .plan:popover-open .plan-zone:hover .plan-objet::after,
  .plan:popover-open .plan-zone:focus-within .plan-objet::after {
    opacity: 1;
    animation: plan-balance 1.2s steps(9, jump-none) infinite alternate;
    animation-delay: -0.6s;
  }

  @keyframes plan-balance {
    to {
      background-position: 100% 0;
    }
  }
}

/* Les transitions entre pages (Chrome, Edge, Safari 18.2 : ailleurs la page change d'un coup) : l'en-tete reste en place,
   le contenu se fond et glisse de 12 px, le trait ambre de l'onglet actif glisse d'un onglet a l'autre. Pas sur
   telephone (48 rem), ou la page entiere qui glisse ferait plus de bruit que d'effet. */
@media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
  @view-transition {
    navigation: auto;
  }

  .entete {
    view-transition-name: entete;
  }

  .onglets {
    view-transition-name: onglets;
  }

  .onglets a[aria-current="page"]::after {
    view-transition-name: onglet-actif;
  }

  /* L'affiche de l'encadre d'une page du bot vole vers le numero, quand c'est le dernier : le numero porte le meme nom. */
  .encadre-du-journal.est-la-une img {
    view-transition-name: affiche-une;
  }

  ::view-transition-old(root) {
    animation: vt-sort 0.28s var(--courbe) both;
  }

  ::view-transition-new(root) {
    animation: vt-entre 0.42s var(--courbe) both;
  }

  @keyframes vt-sort {
    to {
      opacity: 0;
      transform: translateY(-12px);
    }
  }

  @keyframes vt-entre {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }

  /* En entrant dans le Journal de bord, un voile d'ambre tres sombre monte (la page d'arrivee le pose). */
  html.dans-le-journal::view-transition-new(root) {
    animation: vt-rideau 0.55s var(--courbe) both;
  }

  @keyframes vt-rideau {
    from {
      clip-path: inset(100% 0 0 0);
      filter: sepia(0.6) brightness(0.6);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
}

/* --- le lien vers le Journal de bord : l'ambre, la couleur du temps (feuille de route, fil et numeros du Journal) ------ */
.lien-recit {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ambre);
}

.vitrine-fonction .lien-recit {
  display: block;
  margin-top: 0.45rem;
  text-decoration: none;
}

/* --- l'accueil : six chapitres numerotes 00 a 05, comme les sections 00 a 06 des Shorts ------------------------------
   Hugo, le 01/11/2026 : la base reste « une one page scroll ». La regle d'or du plan : l'accueil pointe, il ne grandit jamais.
   00 la traversee (scene 3D, selecteurs cables dans zaap-scene.js : ils ne bougent pas), 01 une vraie session, 02 le trajet
   (trois portes), 03 pourquoi ZaapBot, 04 le Journal de bord (ecrit par generer_journal.py), 05 commencer.
   Tout ce qui bouge est plus bas, sous le garde du mouvement reduit ; ici, les pages telles qu'elles sont posees. */
.chapitre-num {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-3);
}

.chapitre-num b {
  font-weight: 400;
  color: var(--texte-2);
}

.chapitre-num::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--lueur), transparent);
}

/* L'ambre est le temps : seul le chapitre du Journal de bord le porte. */
.chapitre-ambre .chapitre-num,
.chapitre-ambre .chapitre-num b {
  color: var(--ambre);
}

.chapitre-ambre .chapitre-num::after {
  background: linear-gradient(90deg, var(--ambre), transparent);
}

/* L'index « Sur cette page » (grand ecran, souris) et la barre de progression (telephone) sont des enrichissements du
   defilement lie : sans lui, ou sous mouvement reduit, ils ne sont pas affiches (l'en-tete garde « Fonctionnalites »). */
.index-chapitres,
.progression {
  display: none;
}

/* --- 02 Le trajet : trois portes ------------------------------------------------------------------------------ */
.portes {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: minmax(0, 1fr);
  perspective: 1400px;
}

@media (min-width: 62rem) {
  .portes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.porte {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--rayon-carte);
  border: 1px solid var(--bordure-forte);
  background: linear-gradient(180deg, var(--panneau-fort), var(--panneau));
  color: var(--texte);
  text-decoration: none;
}

.porte:nth-child(1) { --incline: 14deg; }
.porte:nth-child(2) { --incline: 0deg; }
.porte:nth-child(3) { --incline: -14deg; }

.porte::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -20% -40% -20%;
  height: 70%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(35, 161, 172, 0.22), transparent 70%);
  opacity: 0;
}

.porte:hover,
.porte:focus-visible {
  color: var(--texte);
  border-color: rgba(56, 255, 255, 0.35);
  box-shadow: 0 30px 70px -30px rgba(35, 161, 172, 0.55);
}

.porte:hover::before,
.porte:focus-visible::before {
  opacity: 1;
}

.porte-visuel {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--bordure);
}

.porte-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.porte-metiers {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.2rem;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(193, 170, 125, 0.16), transparent 70%),
    var(--fond-2);
}

.porte-metiers span {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--bordure-forte);
  font-size: 0.88rem;
  color: var(--texte-2);
}

.porte-texte {
  display: grid;
  gap: 0.35rem;
  padding: 1.2rem 1.3rem 1.4rem;
}

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

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

.porte-fleche {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--lien);
}

.porte-fleche::after {
  content: " →";
  display: inline-block;
}

/* --- 04 Le Journal de bord : le quadrille ambre, trois cartes en eventail ------------------------------------------ */
.chapitre-journal {
  position: relative;
  isolation: isolate;
}

.chapitre-journal::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(var(--quadrille) 1px, transparent 1px),
    linear-gradient(90deg, var(--quadrille) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 40%, transparent 100%);
}

.journal-tete {
  display: grid;
  gap: 1rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

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

.journal-tete .section-tete {
  margin-bottom: 0;
}

.journal-tete p {
  margin: 0;
  color: var(--texte-2);
  max-width: 34rem;
}

.journal-tete .boutons {
  margin: 0;
}

.bouton.ambre {
  border-color: var(--ambre-trait);
  color: var(--ambre);
  background: var(--ambre-doux);
}

.bouton.ambre:hover {
  color: #f1d48c;
  border-color: var(--ambre);
}

.pastille-temps {
  align-self: flex-start;
  justify-self: start;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--ambre-trait);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ambre);
}

.eventail {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: minmax(0, 1fr);
  perspective: 1600px;
}

@media (min-width: 62rem) {
  .eventail {
    grid-template-columns: 1.15fr 1fr 1fr;
    align-items: stretch;
  }
}

/* Sur telephone : une rangee a accroche, la carte suivante depasse. */
@media (max-width: 61.99rem) {
  .eventail {
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.6rem;
  }

  .eventail .feuille {
    scroll-snap-align: start;
  }
}

.feuille {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem;
  border-radius: var(--rayon-carte);
  border: 1px solid var(--bordure-forte);
  background: linear-gradient(180deg, rgba(23, 23, 28, 0.96), rgba(13, 13, 16, 0.96));
  color: var(--texte);
  text-decoration: none;
}

.feuille:hover,
.feuille:focus-visible {
  color: var(--texte);
  border-color: var(--ambre-trait);
  box-shadow: 0 40px 80px -40px rgba(214, 178, 94, 0.45);
}

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

.feuille h3 {
  margin: 0;
  font-size: 1.35rem;
}

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

.feuille ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.1rem;
}

.feuille-pied {
  margin-top: auto;
  padding-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--lien);
}

.feuille-episode {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}

.feuille-episode .affiche {
  grid-row: span 6;
  width: 7.5rem;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--ambre-trait), 0 24px 50px -20px rgba(0, 0, 0, 0.9);
  transform: rotate(-3deg);
}

/* Sur un petit ecran, l'affiche se resserre pour laisser sa place au texte. */
@media (max-width: 35.99rem) {
  .feuille-episode {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1rem;
  }

  .feuille-episode .affiche {
    width: 5.5rem;
  }
}

.feuille-episode .numero-geant {
  position: absolute;
  z-index: -1;
  right: 1rem;
  bottom: -0.4rem;
  font-family: var(--police-titre);
  font-size: 6rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(214, 178, 94, 0.22);
}

/* --- l'encadre « Dans le Journal de bord » des pages du bot (ecrit par generer_journal.py) ------------------------- */
.encadre-du-journal {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.1rem 1.3rem;
  border-radius: var(--rayon-carte);
  border: 1px solid var(--ambre-trait);
  background:
    linear-gradient(var(--quadrille) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--quadrille) 1px, transparent 1px) 0 0 / 24px 24px,
    rgba(214, 178, 94, 0.04);
  color: var(--texte);
  text-decoration: none;
}

.encadre-du-journal:hover,
.encadre-du-journal:focus-visible {
  color: var(--texte);
  border-color: var(--ambre);
}

.encadre-du-journal img {
  width: 5.5rem;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--ambre-trait);
}

.encadre-du-journal .feuille-etiquette {
  display: block;
  margin-bottom: 0.3rem;
}

.encadre-du-journal strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.2rem;
}

.encadre-du-journal span.ligne {
  display: block;
  margin-top: 0.2rem;
  color: var(--texte-2);
  font-size: 0.95rem;
}

/* --- 05 Commencer : les trois etapes en ligne, numerotees au trait, avant l'appel final ---------------------------- */
.etapes-ligne {
  display: grid;
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

@media (min-width: 48rem) {
  .etapes-ligne {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.etapes-ligne li {
  counter-increment: etape;
  position: relative;
  padding: 3.4rem 1.2rem 1.2rem;
  border-radius: var(--rayon-carte);
  border: 1px solid var(--bordure);
  background: var(--panneau);
  color: var(--texte-2);
}

.etapes-ligne li::before {
  content: "0" counter(etape);
  position: absolute;
  top: 0.9rem;
  left: 1.2rem;
  font-family: var(--police-titre);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(56, 255, 255, 0.45);
}

.etapes-ligne strong {
  color: var(--texte);
}

/* --- le mouvement de l'accueil : seulement pour qui ne l'a pas coupe ---------------------------------------------------
   Les survols bougent ici ; ce qui suit le defilement est en plus sous @supports (animation-timeline: view()) : sans l'un
   ou l'autre, rien n'est cache et rien ne manque (l'index et la barre de progression ne sont alors pas affiches). */
@media (prefers-reduced-motion: no-preference) {
  .porte {
    transition: transform 0.6s var(--courbe), border-color 0.3s, box-shadow 0.6s var(--courbe);
  }

  .porte::before {
    transition: opacity 0.5s;
  }

  .porte:hover,
  .porte:focus-visible {
    transform: translateY(-6px);
  }

  .porte-visuel img {
    transform: scale(1.06);
    transition: transform 1.2s var(--courbe);
  }

  .porte:hover .porte-visuel img {
    transform: scale(1.12);
  }

  .porte-fleche::after {
    transition: transform 0.4s var(--courbe);
  }

  .porte:hover .porte-fleche::after {
    transform: translateX(0.35rem);
  }

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

  .feuille-episode .affiche {
    transition: transform 0.7s var(--courbe);
  }

  .feuille-episode:hover .affiche {
    transform: rotate(0deg) scale(1.03);
  }

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

  .encadre-du-journal:hover,
  .encadre-du-journal:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -30px rgba(214, 178, 94, 0.5);
  }

  @media (min-width: 62rem) {
    .eventail .feuille:hover {
      transform: translateY(-10px) rotateX(4deg);
    }
  }

  @supports (animation-timeline: view()) {
    /* Les six chapitres sont des lignes de temps nommees : l'index les lit pour allumer le chapitre en cours. */
    main.accueil {
      timeline-scope: --ch0, --ch1, --ch2, --ch3, --ch4, --ch5;
    }

    .traversee {
      view-timeline-name: --ch0;
    }

    #produit {
      view-timeline-name: --ch1;
    }

    #fonctionnalites {
      view-timeline-name: --ch2;
    }

    #atouts {
      view-timeline-name: --ch3;
    }

    #journal {
      view-timeline-name: --ch4;
    }

    #commencer {
      view-timeline-name: --ch5;
    }

    /* L'index « Sur cette page » : grand ecran avec souris, a partir de 84 rem (1344 px) : il faut 60 px de marge de chaque
       cote du contenu (74 rem) pour qu'il ne passe pas sur les cartes ; en dessous, la barre de progression le remplace.
       Il parait quand la traversee finit de defiler (sa ligne de temps `--ch0`, jamais celle de la section produit, que la
       scene deplace et epingle), et le numero du chapitre en cours s'allume. */
    @media (min-width: 84rem) and (hover: hover) {
      .index-chapitres {
        position: fixed;
        z-index: 40;
        right: 1rem;
        top: 50%;
        display: grid;
        gap: 0.35rem;
        transform: translateY(-50%);
        list-style: none;
        margin: 0;
        padding: 0;
        animation: index-parait linear both;
        animation-timeline: --ch0;
        animation-range: exit 70% exit 100%;
      }

      .index-chapitres a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.6rem;
        padding: 0.2rem 0;
        font-family: var(--mono);
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        color: var(--texte-3);
        text-decoration: none;
      }

      .index-chapitres a::after {
        content: "";
        width: 1.2rem;
        height: 1px;
        background: currentColor;
        transition: width 0.4s var(--courbe);
      }

      /* Le nom du chapitre apparait a gauche du numero, sans elargir l'index. */
      .index-chapitres a span {
        position: absolute;
        right: calc(100% + 0.6rem);
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translateX(0.5rem);
        transition: opacity 0.3s, transform 0.4s var(--courbe);
        color: var(--texte-2);
      }

      .index-chapitres a:hover span,
      .index-chapitres a:focus-visible span {
        opacity: 1;
        transform: none;
      }

      .index-chapitres a:hover::after,
      .index-chapitres a:focus-visible::after {
        width: 2rem;
      }

      .index-chapitres li:nth-child(1) a { animation: chapitre-actif linear both; animation-timeline: --ch0; }
      .index-chapitres li:nth-child(2) a { animation: chapitre-actif linear both; animation-timeline: --ch1; }
      .index-chapitres li:nth-child(3) a { animation: chapitre-actif linear both; animation-timeline: --ch2; }
      .index-chapitres li:nth-child(4) a { animation: chapitre-actif linear both; animation-timeline: --ch3; }
      .index-chapitres li:nth-child(5) a { animation: chapitre-actif-ambre linear both; animation-timeline: --ch4; }
      .index-chapitres li:nth-child(6) a { animation: chapitre-actif linear both; animation-timeline: --ch5; }
    }

    @keyframes index-parait {
      from {
        opacity: 0;
        transform: translate(1rem, -50%);
      }
    }

    @keyframes chapitre-actif {
      0%, 18%, 82%, 100% {
        color: var(--texte-3);
      }
      22%, 78% {
        color: var(--lueur-vive);
      }
    }

    @keyframes chapitre-actif-ambre {
      0%, 18%, 82%, 100% {
        color: var(--texte-3);
      }
      22%, 78% {
        color: var(--ambre);
      }
    }

    /* Sous 84 rem, ou sans souris : une barre de progression de 2 px sous l'en-tete, a la place de l'index. */
    .progression {
      position: fixed;
      z-index: 60;
      top: 4rem;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, var(--lueur-vive), var(--accent));
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: progresse linear both;
      animation-timeline: scroll(root);
    }

    @media (min-width: 84rem) and (hover: hover) {
      .progression {
        display: none;
      }
    }

    @keyframes progresse {
      to {
        transform: scaleX(1);
      }
    }

    /* Les portes et les cartes se redressent en entrant. Pas sous 48 rem : sur telephone, une page qui s'incline fait plus
       de bruit que d'effet. */
    @media (min-width: 48rem) {
      .porte {
        animation: porte-redresse linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
      }

      .porte:nth-child(2) { animation-range: entry 6% cover 40%; }
      .porte:nth-child(3) { animation-range: entry 12% cover 45%; }
    }

    @keyframes porte-redresse {
      from {
        opacity: 0;
        transform: translateY(5rem) rotateY(var(--incline)) rotateX(14deg) scale(0.92);
      }
    }

    /* En entrant dans le chapitre du Journal de bord, le quadrille ambre s'allume. */
    .chapitre-journal::before {
      animation: quadrille-allume linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    @keyframes quadrille-allume {
      from {
        opacity: 0;
      }
    }

    @media (min-width: 62rem) {
      .eventail .feuille {
        animation: feuille-deploie linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 45%;
      }

      .eventail .feuille:nth-child(1) { --rot: -9deg; --dx: 6rem; z-index: 3; }
      .eventail .feuille:nth-child(2) { --rot: 0deg; --dx: 0rem; z-index: 2; }
      .eventail .feuille:nth-child(3) { --rot: 9deg; --dx: -6rem; z-index: 1; }
    }

    @keyframes feuille-deploie {
      from {
        opacity: 0;
        transform: translateX(var(--dx)) translateY(4rem) rotate(var(--rot)) rotateY(calc(var(--rot) * -2));
      }
    }
  }
}

/* --- l'impression : ni menu, ni onglets, et le pied reprend sa place dans la page ---------------------------- */
@media print {
  .entete-menu,
  .plan,
  .onglets {
    display: none;
  }

  main {
    border-radius: 0;
    box-shadow: none;
  }

  .pied {
    position: static;
  }

  .pied::before {
    display: none;
  }

  /* L'accueil sur papier : ni index, ni barre de progression, et les cartes a leur place (un important l'emporte sur toute
     animation que le defilement aurait posee), sans quadrille ni fond. */
  .index-chapitres,
  .progression,
  .chapitre-journal::before {
    display: none !important;
  }

  .porte,
  .eventail .feuille {
    opacity: 1 !important;
    transform: none !important;
  }

  .porte,
  .feuille,
  .encadre-du-journal,
  .etapes-ligne li {
    background: none;
    box-shadow: none;
  }

  .eventail {
    display: block;
    overflow: visible;
  }

  .eventail .feuille {
    margin-bottom: 1rem;
  }
}