/* Variante B « Atelier du bâtisseur » : papier pointé ; en sombre, le tableau d'atelier, percé comme un panneau à outils. */
:root {
  --fond: #f4f6f5;
  --surface: #e6ebe9;
  --filet: #c3cdca;
  --encre: #13202a;
  --encre-2: #3a4851;
  --encre-3: #4f5d66;
  --accent: #1b645a;
  --accent-fort: #0f4840;
  --rouge: #a3221b;
  --ambre: #7a5200;
  --attente-fond: #fff3c4;
  --attente-trait: #7a5200;
  --grille: #c6d0cd;
  --trame: radial-gradient(circle, var(--grille) 1.3px, transparent 1.8px) 0 0 / 1.5rem 1.5rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #161b19;
    --surface: #1f2522;
    --filet: #39433e;
    --encre: #ecf0ea;
    --encre-2: #c6cdc6;
    --encre-3: #aab4ac;
    --accent: #7ccbb9;
    --accent-fort: #aadfd2;
    --rouge: #f59a8f;
    --ambre: #f0c75a;
    --attente-fond: #29251a;
    --attente-trait: #f0c75a;
    --grille: #070908;
    color-scheme: dark;
  }
}

/* ==========================================================================
   Le socle commun des variantes (A plan, B atelier, C ville, D le site qui grandit avec moi).
   Bonjour à vous qui lisez le code : ce site se démonte sans outil. Des pages HTML
   statiques, une feuille de style, trois polices hébergées ici ; aucun cookie déposé
   par ce site, aucune base de données, rien qui se charge depuis un autre site.
   Le seul script, dans la version en ligne, sert à l'interrupteur « Rétro ».
   Le motif est le point de jonction des schémas électriques : un fil, un nœud.
   Les cinq gestes de « Ma façon de voir » sont dessinés comme un Grafcet.
   La suite est dans /humans.txt, et l'adresse en bas de chaque page.
   ========================================================================== */

/* ---------- Polices hébergées sur le site (SIL Open Font License 1.1) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400-latin1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400-italique-latin1.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-600-latin1.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --f-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --f-texte: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --cadre: 72rem;
  --mesure: 41rem;
  --marge: 1.25rem;
  --respiration: clamp(3.5rem, 2.25rem + 4.5vw, 6.5rem);
  --trait: 1.5px;
  --labo-libelle: "Fiche ";
}

@media (min-width: 48rem) {
  :root {
    --marge: 2rem;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--filet) var(--fond);
}

body {
  position: relative;
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: clamp(1.1875rem, 1.1rem + 0.25vw, 1.25rem);
  line-height: 1.7;
  font-kerning: normal;
  overflow-wrap: break-word;
}

/* le papier de la variante : une trame en haut de chaque page, qui s'efface en descendant */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: var(--trame-hauteur, 36rem);
  background: var(--trame);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent);
  pointer-events: none;
}

::selection {
  background: var(--accent);
  color: var(--fond);
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent-fort);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

main:focus {
  outline: none;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--encre);
  font-family: var(--f-titre);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.375rem, 1.6rem + 3.2vw, 4rem);
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  letter-spacing: -0.005em;
}

h3 {
  font-size: clamp(1.4375rem, 1.3rem + 0.45vw, 1.625rem);
  line-height: 1.25;
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

kbd,
code {
  font-family: var(--f-mono);
  font-size: 0.85em;
}

kbd {
  padding: 0.05em 0.4em;
  border: 1px solid var(--filet);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--surface);
  white-space: nowrap;
}

time {
  font-variant-numeric: tabular-nums;
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.evitement {
  position: absolute;
  top: 0.5rem;
  left: -999rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--encre);
  color: var(--fond);
  font-family: var(--f-mono);
  font-size: 1rem;
}

.evitement:hover,
.evitement:focus {
  left: var(--marge);
  color: var(--fond);
}

.cadre {
  max-width: var(--cadre);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.bloc {
  margin-top: var(--respiration);
}

[id] {
  scroll-margin-top: 1.5rem;
}

/* ---------- Le motif : un fil, son nœud, et le numéro du fil ---------- */
main {
  counter-reset: section labo;
}

.bloc > h2 {
  margin-bottom: 1.25rem;
  counter-increment: section;
}

.bloc > h2::before {
  content: counter(section, decimal-leading-zero);
  content: counter(section, decimal-leading-zero) / "";
  display: block;
  width: max-content;
  margin-bottom: 0.9rem;
  padding-left: 3.75rem;
  background:
    radial-gradient(circle at 5px 50%, var(--accent) 4px, transparent 4.5px),
    linear-gradient(var(--accent), var(--accent)) 5px 50% / 2.75rem 2px no-repeat;
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
}

.prose {
  max-width: var(--mesure);
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.prose li {
  margin-bottom: 0.6em;
}

.prose li::marker {
  color: var(--accent);
}

/* les repères en chasse fixe */
.surtitre,
.gestes-titre,
.sommaire-titre,
.suite-page .suite-titre {
  margin: 0 0 0.9rem;
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lettrine > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  color: var(--accent);
  font-family: var(--f-titre);
  font-size: 3.3em;
  font-weight: 600;
  line-height: 0.85;
}

/* ---------- En-tête : la marque, puis le fil de navigation ---------- */
.entete {
  border-bottom: 1px solid var(--filet);
}

.entete-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-block: 1rem 0;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.3rem;
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: 1.375rem;
  font-weight: 600;
  text-decoration: none;
}

/* le symbole du favicon : un fil, une dérivation, un nœud */
.marque::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background:
    radial-gradient(circle at 10px 14px, var(--accent) 4px, transparent 4.5px),
    linear-gradient(var(--accent), var(--accent)) 9px 3px / 2px 11px no-repeat,
    linear-gradient(var(--encre), var(--encre)) 0 13px / 20px 2px no-repeat;
}

.marque:hover {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.nav {
  max-width: 100%;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nav;
}

.nav li {
  counter-increment: nav;
}

.nav a {
  position: relative;
  display: inline-block;
  padding-block: 0.6rem 0.55rem;
  border-bottom: 2px solid transparent;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}

.nav a::before {
  content: counter(nav, decimal-leading-zero) "\00a0";
  content: counter(nav, decimal-leading-zero) "\00a0" / "";
  color: var(--accent);
}

.nav a:hover {
  border-bottom-color: var(--filet);
  color: var(--encre);
}

.nav a[aria-current="page"] {
  border-bottom-color: var(--accent);
  color: var(--encre);
}

@media (max-width: 47.99rem) {
  .entete-in {
    display: block;
  }

  .nav ul {
    gap: 0 1.25rem;
  }
}

@media (min-width: 48rem) {
  .nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: -6.5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--fond);
  }
}

/* ---------- Tête de page ---------- */
.tete {
  position: relative;
  padding-top: clamp(2.75rem, 1.5rem + 4.5vw, 5.5rem);
}

.tete h1 {
  max-width: 52rem;
  margin-bottom: 1.1rem;
}

.chapo {
  max-width: 40rem;
  margin: 0;
  color: var(--encre-2);
  font-size: clamp(1.1875rem, 1.1rem + 0.45vw, 1.375rem);
  line-height: 1.55;
}

.mode-emploi {
  max-width: var(--mesure);
  margin: 1.25rem 0 1.1em;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--filet);
  border-radius: 4px;
  color: var(--encre-2);
  font-size: 1.0625rem;
}

/* ---------- Accueil ---------- */
.accueil {
  display: grid;
  gap: 2.75rem;
  padding-top: clamp(2.75rem, 1.5rem + 4.5vw, 5.5rem);
}

.accueil-nom {
  margin-bottom: 1.25rem;
  font-size: clamp(2.875rem, 1.5rem + 5.6vw, 5.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.accueil-metier {
  max-width: 34rem;
  margin-bottom: 1.5rem;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  line-height: 1.45;
}

/* le portrait, entre quatre repères de coupe */
.portrait {
  max-width: 17rem;
  margin: 0;
}

.portrait picture {
  display: block;
  padding: 0.65rem;
  background:
    linear-gradient(var(--encre-3), var(--encre-3)) 0 0 / 1rem 1.5px no-repeat,
    linear-gradient(var(--encre-3), var(--encre-3)) 0 0 / 1.5px 1rem no-repeat,
    linear-gradient(var(--encre-3), var(--encre-3)) 100% 0 / 1rem 1.5px no-repeat,
    linear-gradient(var(--encre-3), var(--encre-3)) 100% 0 / 1.5px 1rem no-repeat,
    linear-gradient(var(--encre-3), var(--encre-3)) 0 100% / 1rem 1.5px no-repeat,
    linear-gradient(var(--encre-3), var(--encre-3)) 0 100% / 1.5px 1rem no-repeat,
    linear-gradient(var(--encre-3), var(--encre-3)) 100% 100% / 1rem 1.5px no-repeat,
    linear-gradient(var(--encre-3), var(--encre-3)) 100% 100% / 1.5px 1rem no-repeat;
}

.portrait img {
  border: 1px solid var(--filet);
}

.portrait figcaption {
  margin-top: 0.75rem;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* la fiche signalétique, comme un tableau de notice */
.fiche {
  max-width: 40rem;
  margin: 0;
  border-top: 2px solid var(--encre);
}

.fiche > div {
  display: grid;
  gap: 0.1rem 1.5rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--filet);
}

.fiche dt {
  padding-top: 0.3rem;
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fiche dd {
  margin: 0;
  font-size: 1.0625rem;
}

@media (min-width: 36rem) {
  .fiche > div {
    grid-template-columns: 8.5rem minmax(0, 1fr);
  }
}

/* les gestes de l'accueil : un fil, et une dérivation par geste */
.gestes-bloc {
  max-width: 40rem;
}

.gestes {
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--encre);
  list-style: none;
  counter-reset: geste;
}

.gestes li {
  position: relative;
  padding: 0.8rem 0 0.8rem 2rem;
  background: linear-gradient(var(--filet), var(--filet)) 2rem 100% / calc(100% - 2rem) 1px no-repeat;
  color: var(--encre-2);
  counter-increment: geste;
}

.gestes li::before {
  content: "";
  position: absolute;
  top: calc(0.8rem + 0.85em - 6px);
  left: 0;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--fond);
}

.gestes li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(0.8rem + 0.85em);
  left: 5px;
  height: 100%;
  border-left: 2px solid var(--filet);
}

.gestes li:first-child::before {
  background: var(--accent);
}

.gestes strong {
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: 1.25rem;
}

.gestes strong::before {
  content: counter(geste, decimal-leading-zero) "\00a0\00a0";
  content: counter(geste, decimal-leading-zero) "\00a0\00a0" / "";
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  vertical-align: 0.12em;
}

@media (min-width: 60rem) {
  .accueil {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: 4.5rem;
    align-items: start;
  }

  .portrait {
    grid-column: 2;
    grid-row: 1 / span 3;
    max-width: none;
  }

  .gestes-bloc,
  .fiche {
    grid-column: 1;
  }
}

/* ---------- Les récits et les labos ---------- */
.famille-intro {
  max-width: var(--mesure);
  margin: -0.25rem 0 1.75rem;
  color: var(--encre-2);
}

.labo {
  padding-block: 2rem;
  border-top: 1px solid var(--filet);
}

.labo > h3 {
  margin-bottom: 0.9rem;
}

.temps-liens {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.temps-liens li {
  margin-top: 0.45rem;
}

.temps-liens a {
  font-weight: 600;
}

.temps-liens a::after {
  content: "\00a0→";
  content: "\00a0→" / "";
}

/* la fiche d'un labo : un numéro, une ligne, le statut, puis le titre */
.labo:has(> .labo-tete) {
  border-top: 2px solid var(--encre);
  padding-top: 1rem;
}

.labo-tete {
  display: grid;
  grid-template-columns: auto minmax(1.5rem, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  max-width: var(--mesure);
  margin-bottom: 1.1rem;
  counter-increment: labo;
}

.labo-tete::before {
  content: var(--labo-libelle) counter(labo, decimal-leading-zero) var(--labo-suite, "");
  grid-column: 1;
  grid-row: 1;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.labo-tete::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  border-top: 1px dashed var(--filet);
}

.labo-tete .statut {
  grid-column: 3;
  grid-row: 1;
}

.labo-tete h3 {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* l'étincelle : la phrase à emporter, dans un cadre étiqueté */
.etincelle {
  position: relative;
  margin: 1.9rem 0 0;
  padding: 1.25rem 1.15rem 1rem;
  border: var(--trait) solid var(--encre-3);
  border-radius: 3px;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.etincelle strong {
  position: absolute;
  top: 0;
  left: 0.85rem;
  padding: 0.1rem 0.5rem;
  background: var(--fond);
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  transform: translateY(-50%);
}

/* ---------- Les statuts : un signe, un mot, jamais la couleur seule ---------- */
.statut {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.18rem 0.55rem 0.18rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.1em;
}

.statut::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.statut--usage {
  color: var(--accent);
}

.statut--usage::before {
  background: currentColor;
}

.statut--prototype {
  color: var(--ambre);
}

.statut--prototype::before {
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

.statut--reserve::before {
  background: radial-gradient(circle, currentColor 0 28%, transparent 32%);
}

.statut--abandon {
  color: var(--encre-3);
}

.statut--abandon::before {
  background: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%);
}

.statuts {
  position: relative;
  display: grid;
  gap: 0.65rem 2rem;
  max-width: 56rem;
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.25rem 1.15rem;
  border: 1px solid var(--filet);
  border-radius: 4px;
  background: var(--surface);
  font-size: 1rem;
}

.statuts::before {
  content: "Légende";
  content: "Légende" / "";
  position: absolute;
  top: 0;
  left: 1rem;
  padding: 0 0.5rem;
  background: var(--fond);
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.statuts > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
}

.statuts dd {
  margin: 0;
  color: var(--encre-2);
}

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

/* ---------- Sommaires ---------- */
.sommaire {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filet);
}

.sommaire-titre {
  margin-bottom: 0.5rem;
  color: var(--encre-3);
  font-size: 0.8125rem;
}

.sommaire ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.0625rem;
}

.sommaire a {
  display: inline-block;
  padding-block: 0.2rem;
}

.sommaire a::before,
.sommaire-page a::before {
  content: "↓\00a0";
  content: "↓\00a0" / "";
  color: var(--accent);
  font-family: var(--f-mono);
}

.sommaire-page {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 46rem;
  margin-top: 1.25rem;
}

.sommaire-page a {
  display: inline-block;
  padding: 0.45rem 0.85rem 0.5rem;
  border: 1px solid var(--filet);
  border-radius: 3px;
  background: var(--surface);
  color: var(--accent-fort);
  font-size: 1rem;
  text-decoration: none;
}

.sommaire-page a:hover {
  border-color: var(--accent);
  color: var(--encre);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Le parcours : les étapes, datées ---------- */
.frise {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: jalon;
}

.jalon {
  position: relative;
  max-width: 44rem;
  padding: 0 0 2.75rem 2.25rem;
  counter-increment: jalon;
}

.jalon::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  border-left: 2px solid var(--filet);
}

.jalon:first-child::before {
  top: 0.5rem;
}

.jalon:last-child::before {
  bottom: auto;
  height: 0.6rem;
}

.jalon::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--fond);
}

.jalon--aujourdhui::after {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

.jalon-date {
  margin: 0 0 0.25rem;
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.jalon h3 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.jalon p:last-child {
  margin-bottom: 0;
}

@media (min-width: 48rem) {
  .jalon {
    max-width: 54rem;
    padding-left: 12rem;
  }

  .jalon::before {
    left: calc(10rem + 5px);
  }

  .jalon::after {
    top: 0.6rem;
    left: 10rem;
  }

  .jalon-date {
    position: absolute;
    top: 0.2rem;
    left: 0;
    width: 9rem;
    margin: 0;
    line-height: 1.6;
    text-align: right;
  }
}

/* ---------- Le chemin d'une demande : des étapes reliées par un fil ---------- */
.chemin {
  display: grid;
  gap: 2.25rem;
  max-width: 44rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.etape {
  position: relative;
  padding: 1.1rem 1.25rem 1.25rem;
  border: var(--trait) solid var(--encre-2);
  border-radius: 3px;
  background: var(--fond);
  counter-increment: etape;
}

.etape--moi {
  border-color: var(--accent);
  box-shadow: inset 0 5px 0 var(--accent);
}

.etape-qui {
  margin-bottom: 0.45rem;
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
}

.etape-quoi {
  margin: 0;
  color: var(--encre-2);
  font-size: 1.0625rem;
}

.etape-note {
  margin: 0.75rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--filet);
  color: var(--encre-2);
  font-size: 1rem;
}

.chemin--ligne .etape-qui::before {
  content: counter(etape, decimal-leading-zero);
  content: counter(etape, decimal-leading-zero) / "";
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.chemin--ligne .etape + .etape::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--trait) - 2.25rem);
  left: 1.6rem;
  height: 2.25rem;
  border-left: 2px solid var(--encre-2);
}

.chemin--ligne .etape + .etape::after {
  content: "";
  position: absolute;
  top: -5.75px;
  left: calc(1.6rem - 4px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--encre-2);
}

@media (min-width: 64rem) {
  .chemin--ligne {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
    max-width: none;
  }

  .chemin--ligne .etape + .etape::before {
    top: 1.85rem;
    left: calc(-1 * var(--trait) - 2.5rem);
    width: 2.5rem;
    height: 0;
    border-top: 2px solid var(--encre-2);
    border-left: 0;
  }

  .chemin--ligne .etape + .etape::after {
    top: calc(1.85rem - 4px);
    left: -5.75px;
  }
}

/* ---------- Les cinq gestes, en Grafcet ----------
   Une étape par carré (l'étape initiale est doublée), l'action dans son cadre à droite,
   une transition entre deux étapes, et la boucle qui remonte à l'étape 1. */
.chemin:not(.chemin--ligne) {
  --g-x: 1rem;
  --g-c: 2.5rem;
  --g-d: 4.75rem;
  position: relative;
  gap: 2rem;
  padding-block: 1.75rem;
  background:
    linear-gradient(var(--encre-2), var(--encre-2)) 0 0.5rem / var(--trait) calc(100% - 1rem) no-repeat,
    linear-gradient(var(--encre-2), var(--encre-2)) 0 0.5rem / calc(var(--g-x) + var(--g-c) / 2) var(--trait) no-repeat,
    linear-gradient(var(--encre-2), var(--encre-2)) 0 calc(100% - 0.5rem) / calc(var(--g-x) + var(--g-c) / 2) var(--trait) no-repeat,
    linear-gradient(var(--encre-2), var(--encre-2)) calc(var(--g-x) + var(--g-c) / 2 - var(--trait) / 2) 0.5rem / var(--trait) calc(100% - 1rem) no-repeat;
}

.chemin:not(.chemin--ligne)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--trait) / 2 - 0.4rem);
  width: 0.8rem;
  height: 0.75rem;
  background: var(--encre-2);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.chemin:not(.chemin--ligne) .etape {
  margin-left: var(--g-d);
}

.chemin:not(.chemin--ligne) .etape::before {
  content: counter(etape);
  position: absolute;
  top: 0.75rem;
  left: calc(var(--g-x) - var(--g-d) - var(--trait));
  display: grid;
  place-items: center;
  width: var(--g-c);
  height: var(--g-c);
  border: var(--trait) solid var(--encre);
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 1rem;
  line-height: 1;
}

.chemin:not(.chemin--ligne) .etape:first-child::before {
  box-shadow: inset 0 0 0 3px var(--fond), inset 0 0 0 calc(3px + var(--trait)) var(--encre);
}

.chemin:not(.chemin--ligne) .etape::after {
  content: "";
  position: absolute;
  top: calc(0.75rem + var(--g-c) / 2 - var(--trait) / 2);
  left: calc(var(--g-x) + var(--g-c) - var(--g-d) - var(--trait));
  width: calc(var(--g-d) - var(--g-x) - var(--g-c));
  border-top: var(--trait) solid var(--encre-2);
}

.chemin:not(.chemin--ligne) .etape + .etape .etape-qui::before,
.chemin:not(.chemin--ligne) .etape:last-child .etape-quoi::after {
  content: "";
  position: absolute;
  left: calc(var(--g-x) + var(--g-c) / 2 - var(--g-d) - var(--trait) - 0.625rem);
  width: 1.25rem;
  height: 2.5px;
  background: var(--encre);
}

.chemin:not(.chemin--ligne) .etape + .etape .etape-qui::before {
  top: calc(-1rem - var(--trait) - 1.25px);
}

.chemin:not(.chemin--ligne) .etape:last-child .etape-quoi::after {
  top: calc(100% + 0.625rem);
}

@media (max-width: 35.99rem) {
  .chemin:not(.chemin--ligne) {
    --g-x: 0.75rem;
    --g-c: 2.25rem;
    --g-d: 3.75rem;
  }
}

/* ---------- Trois noms ---------- */
.noms {
  margin: 0;
  border-top: 2px solid var(--encre);
}

.nom {
  display: grid;
  gap: 0.35rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--filet);
}

.nom dt {
  font-family: var(--f-titre);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

.nom dd {
  max-width: var(--mesure);
  margin: 0;
}

.nom .nom-statut {
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  line-height: 1.6;
}

.nom dd:last-child a {
  font-family: var(--f-mono);
  font-size: 1rem;
}

@media (min-width: 48rem) {
  .nom {
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: 2rem;
  }

  .nom dt {
    grid-row: 1 / span 3;
  }

  .nom dd {
    grid-column: 2;
  }
}

/* ---------- Ma façon de voir ---------- */
.phrase {
  position: relative;
  max-width: 34rem;
  margin: 0 0 1.75rem;
  padding: 0.15rem 0 0.15rem 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.35;
}

.principes {
  max-width: var(--mesure);
  margin: 0;
}

.principes dt {
  position: relative;
  margin-top: 1.4rem;
  padding-left: 1.15rem;
  font-weight: 600;
}

.principes dt::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.principes dt:first-child {
  margin-top: 0;
}

.principes dd {
  margin: 0.25rem 0 0;
  padding-left: 1.15rem;
}

/* ---------- Les essais : un registre ---------- */
.essais {
  max-width: 44rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.essais li {
  padding-block: 1.1rem;
  border-top: 1px solid var(--filet);
}

.essais .statut {
  margin-right: 0.4rem;
}

.essais + h3,
.essais ~ h3 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.avertissement {
  max-width: 40rem;
  margin: 2rem 0 0;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px solid var(--accent);
  color: var(--encre-2);
  font-size: 1.0625rem;
}

.chapitre {
  max-width: var(--mesure);
}

.chapitre + .chapitre {
  margin-top: 1.25rem;
}

.date {
  margin-bottom: 0.5rem;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.citation {
  max-width: var(--mesure);
  margin: 1.2rem 0 1.4rem;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--accent);
}

.citation p {
  margin: 0;
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.45;
}

.fil {
  max-width: var(--mesure);
  margin: -0.25rem 0 1.5rem;
  color: var(--accent-fort);
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  font-style: italic;
  line-height: 1.5;
}

.fil--accueil {
  max-width: 34rem;
  margin: 0 0 1.5rem;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--accent);
  color: var(--encre);
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  line-height: 1.45;
}

/* ---------- Encadré « Un point de départ » (texte imposé) ---------- */
.depart {
  max-width: 44rem;
  margin: 2rem 0 0;
  padding: 1.25rem 1.25rem 1.1rem;
  border: 2px solid var(--rouge);
  border-left-width: 6px;
  border-radius: 2px;
  background: var(--fond);
  color: var(--encre);
}

.depart h2,
.depart .depart-titre {
  margin: 0 0 0.6rem;
  color: var(--rouge);
  font-family: var(--f-titre);
  font-size: 1.375rem;
  font-weight: 600;
}

.depart p {
  margin: 0 0 0.75rem;
}

.depart .depart-citation {
  margin: 0;
  font-style: italic;
}

/* ---------- Alerte « Attention : RGPD et AI Act » (08/11/2026) ----------
   Un dépliable à côté d'un exemple : le point de vigilance, ce que nous faisons, ce que nous cherchons encore.
   Le rouge ne sert qu'au filet, le texte garde l'encre (contraste). */
.deplier--alerte {
  border: 2px solid var(--rouge);
  border-left-width: 6px;
  border-radius: 2px;
  background: var(--fond);
  color: var(--encre);
}
.deplier--alerte > summary {
  font-weight: 600;
}
.deplier--alerte .alerte-sources {
  font-size: 0.92em;
}

/* ---------- Blocs à déplier ----------
   « L'anecdote » : le souvenir, façon carnet, un rond. « Pour les curieux » : le détail
   technique, façon notice, un carré. Éléments natifs <details>, sans script. */
.deplier {
  margin: 0.8rem 0 1.2rem;
  padding: 0.55rem 1rem;
  border-radius: 4px;
}

.deplier > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
}

.deplier > summary::-webkit-details-marker {
  display: none;
}

.deplier > summary:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.deplier > summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.deplier[open] > summary {
  margin-bottom: 0.5rem;
}

.deplier > p,
.deplier > ul {
  margin: 0.5rem 0;
}

.deplier > summary::before,
.etiquette--geek::before {
  content: "+";
  content: "+" / "";
  flex: none;
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
  border: var(--trait) solid currentColor;
  font-family: var(--f-mono);
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2rem;
  text-align: center;
}

.deplier[open] > summary::before {
  content: "−";
  content: "−" / "";
}

.deplier--anecdote {
  border-left: 4px solid var(--attente-trait);
  background: var(--attente-fond);
}

.deplier--anecdote > summary {
  color: var(--attente-trait);
  font-family: var(--f-titre);
  font-style: italic;
  font-weight: 600;
}

.deplier--anecdote > summary::before {
  border-radius: 50%;
}

.deplier--geek {
  border: 1px solid var(--filet);
  border-left: 3px solid var(--accent);
  background: var(--surface);
}

.deplier--geek > summary {
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 1rem;
  font-weight: 400;
}

.deplier--geek > summary::before {
  border-radius: 2px;
  color: var(--accent);
}

.deplier--geek[open] > summary {
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--filet);
}

.deplier--geek > :not(summary) {
  font-size: 1.0625rem;
}

.etiquette {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 3px;
  white-space: nowrap;
}

.etiquette--anecdote {
  background: var(--attente-fond);
  color: var(--attente-trait);
  font-family: var(--f-titre);
  font-style: italic;
  font-weight: 600;
}

.etiquette--geek {
  border: 1px solid var(--filet);
  background: var(--surface);
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.9em;
}

.etiquette--geek::before {
  width: 1.05rem;
  height: 1.05rem;
  margin-right: 0.4rem;
  border-radius: 2px;
  color: var(--accent);
  font-size: 0.8rem;
  line-height: 0.95rem;
  vertical-align: -0.1em;
}

/* ---------- Le lien suivi : un cadre de sélection, comme dans un logiciel de dessin ---------- */
.labo:target,
.essais li:target,
h2:target,
h3:target {
  outline: 1.5px dashed var(--accent);
  outline-offset: 0.6rem;
  border-radius: 1px;
}

.labo:has(> .labo-tete h3:target) {
  outline: 1.5px dashed var(--accent);
  outline-offset: 0.6rem;
}

.labo:has(> .labo-tete h3:target) h3:target {
  outline: none;
}

.bloc:target > h2 {
  color: var(--accent-fort);
}

/* ---------- La suite du chemin ---------- */
.suite-page {
  position: relative;
  max-width: 44rem;
  padding: 1.5rem 0 0;
  border-top: 2px solid var(--encre);
}

.suite-page::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--encre);
}

.suite-page .suite-titre {
  margin-bottom: 0.6rem;
  color: var(--encre-3);
  font-size: 0.8125rem;
}

.suite-page p {
  max-width: var(--mesure);
  color: var(--encre-2);
}

.suite-lien {
  display: inline-block;
  margin-top: 0.25rem;
  font-family: var(--f-titre);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  text-decoration-thickness: 2px;
}

.suite-lien::after {
  content: "\00a0→";
  content: "\00a0→" / "";
}

/* ---------- Pages de renvoi, mentions ---------- */
.liste-pages {
  margin: 1.5rem 0 0;
  padding-left: 1.2em;
}

.liste-pages li {
  margin-bottom: 0.4rem;
}

.mentions h2 {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

.mentions .bloc {
  margin-top: 2.75rem;
}

.a-completer {
  padding: 0.05rem 0.4rem;
  border: 1px dashed var(--encre-3);
  background: var(--surface);
  color: var(--encre);
}

.interview[hidden] {
  display: none;
}

.interview {
  max-width: 44rem;
  margin: 1.75rem 0;
  padding: 0.9rem 1.1rem 1rem;
  border: 2px dashed var(--attente-trait);
  border-radius: 4px;
  background: var(--attente-fond);
  color: var(--encre);
  font-size: 1rem;
}

/* ---------- La page introuvable ---------- */
.schema-404 {
  max-width: 36rem;
  margin: 2.25rem 0 0;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--filet);
  border-radius: 4px;
  background: var(--fond);
}

.schema-404 svg {
  width: 100%;
  overflow: visible;
  color: var(--encre-2);
}

.schema-404 .fil {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.schema-404 .tirets {
  stroke-dasharray: 5 5;
}

.schema-404 .plein {
  fill: var(--fond);
}

.schema-404 .borne {
  fill: var(--fond);
  stroke: currentColor;
  stroke-width: 2;
}

.schema-404 .noeud {
  fill: currentColor;
}

.schema-404 .ouvert {
  stroke: var(--rouge);
}

.schema-404 .allume {
  stroke: var(--accent);
}

.schema-404 .sol {
  fill: var(--surface);
}

.schema-404 text {
  fill: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 15px;
}

.schema-404 .repere-404 {
  fill: var(--rouge);
}

.schema-404 .repere-accueil {
  fill: var(--accent);
}

.schema-404 figcaption {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--filet);
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* la table des routes : le nom de la page, puis son adresse */
.introuvable .liste-pages {
  max-width: 36rem;
  padding: 0;
  list-style: none;
}

.introuvable .liste-pages li {
  margin: 0;
  border-bottom: 1px dashed var(--filet);
}

.introuvable .liste-pages a {
  display: block;
  padding-block: 0.55rem;
}

.introuvable .liste-pages a::after {
  content: attr(href);
  content: attr(href) / "";
  float: right;
  margin-left: 1rem;
  padding-top: 0.2rem;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.875rem;
}

/* ---------- Pied de page, et son cartouche ---------- */
.pied {
  margin-top: var(--respiration);
  padding-block: 2.75rem 2.5rem;
  border-top: 1px solid var(--filet);
  background: var(--surface);
  font-size: 1.0625rem;
}

.pied-in {
  display: grid;
  gap: 2rem;
}

.pied p {
  max-width: 34rem;
}

.pied-nom {
  margin-bottom: 0.5rem;
  font-family: var(--f-titre);
  font-size: 1.25rem;
  font-weight: 600;
}

.pied-titre {
  margin-bottom: 0.5rem;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pied ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pied li {
  margin-bottom: 0.45rem;
}

.pied-signature {
  margin-bottom: 0;
  color: var(--encre-3);
  font-size: 1rem;
}

.pied-bienveillance {
  margin: 0.75rem 0 0;
  color: var(--encre-2);
  font-size: 1rem;
}

@media (min-width: 60rem) {
  .pied-in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr);
    column-gap: 3rem;
  }
}

/* le cartouche : le bloc-titre d'un folio de plan */
.cartouche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  margin: 2.5rem 0 0;
  border: 1px solid var(--encre-3);
  background: var(--filet);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  line-height: 1.45;
}

.cartouche > div {
  padding: 0.5rem 0.75rem 0.55rem;
  background: var(--surface);
}

.cartouche dt {
  color: var(--encre-3);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cartouche dd {
  margin: 0.1rem 0 0;
  color: var(--encre);
}

/* ---------- Impression : de l'encre sur du papier ---------- */
@media print {
  :root {
    --fond: #ffffff;
    --surface: #ffffff;
    --filet: #999999;
    --encre: #000000;
    --encre-2: #222222;
    --encre-3: #333333;
    --accent: #000000;
    --accent-fort: #000000;
    --rouge: #000000;
    --ambre: #000000;
    --attente-fond: #ffffff;
    --attente-trait: #000000;
    color-scheme: light;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  body::before,
  .tete::after,
  .evitement,
  .nav,
  .sommaire,
  .sommaire-page,
  .suite-page,
  .pied nav,
  .deplier > summary::before {
    display: none;
  }

  a {
    color: inherit;
  }

  .prose a[href^="http"]::after,
  .pied a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }

  .labo,
  .jalon,
  .etape,
  .essais li,
  .deplier,
  .etincelle,
  .cartouche {
    break-inside: avoid;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  .deplier::details-content {
    content-visibility: visible;
  }

  .pied {
    margin-top: 2rem;
    border-top: 1px solid #000000;
  }
}

/* ---------- Moins de mouvement, partout : le filet de sécurité (08/11/2026) ----------
   Chaque animation du site prévoit déjà son « moins de mouvement » ; ce filet rattrape celle qui l'oublierait.
   Quand le visiteur l'a demandé, rien ne bouge : chaque élément arrive d'emblée à son état final. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Variante B « Atelier du bâtisseur » : l'équilibre entre l'envie de jouer et le sérieux.
   Une vue éclatée de briques en tête de page (démonter pour comprendre, puis remonter),
   des fiches de chantier pour les labos (numéro, statut, révision), le parcours en
   étapes de construction, un mur de briques le long de la phrase sur les petites pièces,
   et l'étincelle comme un gabarit à découper. En sombre : le tableau d'atelier.
   ========================================================================== */
:root {
  --labo-libelle: "Chantier ";
  --labo-suite: " · rév. 2026-11-07";
}

/* la vue éclatée, à droite de la tête de page, sur grand écran */
@media (min-width: 64rem) {
  :where(:root:not([data-theme="plan"], [data-theme="ville"])) .tete h1 {
    max-width: 46rem;
  }

  :where(:root:not([data-theme="plan"], [data-theme="ville"])) .tete:not(.introuvable)::after {
    content: "";
    position: absolute;
    top: clamp(2.75rem, 1.5rem + 4.5vw, 5.5rem);
    right: var(--marge);
    width: 17rem;
    aspect-ratio: 343 / 201;
    background: url("../img/plan-briques-clair.svg") center / contain no-repeat;
    pointer-events: none;
  }
}

@media (min-width: 64rem) and (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="plan"], [data-theme="ville"])) .tete:not(.introuvable)::after {
    background-image: url("../img/plan-briques-sombre.svg");
  }
}

/* l'accueil, dès le premier écran : la vue éclatée sous le portrait */
:where(:root:not([data-theme="plan"], [data-theme="ville"])) .portrait::after {
  content: "";
  display: block;
  aspect-ratio: 343 / 201;
  margin-top: 1.25rem;
  background: url("../img/plan-briques-clair.svg") left center / contain no-repeat;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="plan"], [data-theme="ville"])) .portrait::after {
    background-image: url("../img/plan-briques-sombre.svg");
  }
}

/* « J'aime construire en toutes petites pièces » : un mur de briques le long de la phrase */
:where(:root:not([data-theme="plan"], [data-theme="ville"])) .phrase {
  padding-left: 3.25rem;
  border-left: 0;
}

:where(:root:not([data-theme="plan"], [data-theme="ville"])) .phrase::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2.5rem;
  background: url("../img/brique-mur-clair.svg") 0 0 / 2.5rem 1.25rem repeat-y;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="plan"], [data-theme="ville"])) .phrase::before {
    background-image: url("../img/brique-mur-sombre.svg");
  }
}

/* l'étincelle : un gabarit à découper, avec son étiquette tamponnée */
:where(:root:not([data-theme="plan"], [data-theme="ville"])) .etincelle {
  border: var(--trait) dashed var(--accent);
  background: var(--surface);
}

:where(:root:not([data-theme="plan"], [data-theme="ville"])) .etincelle strong {
  border-radius: 2px;
  background: var(--accent);
  color: var(--fond);
}

/* le parcours : chaque date est une étape de chantier, numérotée */
:where(:root:not([data-theme="plan"], [data-theme="ville"])) .jalon-date::after {
  content: "\00a0· étape " counter(jalon, decimal-leading-zero);
  color: var(--encre-3);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

@media (min-width: 48rem) {
  :where(:root:not([data-theme="plan"], [data-theme="ville"])) .jalon-date::after {
    content: "étape " counter(jalon, decimal-leading-zero);
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
  }
}

/* les jalons : des briques plutôt que des nœuds, posées sur le fil */
:where(:root:not([data-theme="plan"], [data-theme="ville"])) .jalon::after {
  width: 14px;
  height: 10px;
  border-radius: 1px;
}

@media (min-width: 48rem) {
  :where(:root:not([data-theme="plan"], [data-theme="ville"])) .jalon::after {
    top: 0.65rem;
    left: calc(10rem - 1px);
  }
}

/* le portrait, en sombre, cadré comme une planche punaisée */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="plan"], [data-theme="ville"])) .portrait img {
    border-color: var(--encre-3);
  }
}

/* ==========================================================================
   « Le site qui grandit avec moi » (07/11/2026), sur la base de B : la version en ligne.
   L'accueil commence avec rien : l'écran du TO8, un enfant tape quelques lignes de BASIC.
   Puis les années passent en descendant (l'électronique, le DOS, le bac, les PIC, l'IUT, l'ADSL…),
   jusqu'au site d'aujourd'hui. La frappe est une animation CSS de moins de 6 secondes, que
   prefers-reduced-motion supprime ; le jeu des couleurs (cadre, fond, caractères) passe par des
   boutons radio et :has(). Un seul petit script : l'interrupteur « Rétro » (assets/js/retro.js),
   qui montre ou cache le voyage. Chaque époque a ses couleurs posées, en clair comme en sombre.
   ========================================================================== */
:root {
  /* les huit couleurs du BASIC 1.0 Thomson, de 0 à 7 */
  --t8-0: #000000;
  --t8-1: #ff2a1a;
  --t8-2: #00e000;
  --t8-3: #ffff00;
  --t8-4: #1a3cff;
  --t8-5: #ff00ff;
  --t8-6: #00ffff;
  --t8-7: #ffffff;
}

/* ---------- La tête du voyage, et le lien pour passer ---------- */
.voyage-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.75rem;
}

.voyage-titre {
  margin: 0;
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.passer {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--surface);
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  text-decoration: none;
}

.passer::after {
  content: "\00a0↓";
  content: "\00a0↓" / "";
}

.passer:hover {
  text-decoration: underline;
}

/* ---------- Avant le TO8 : remonter le temps ---------- */
.avant {
  margin-top: 1.25rem;
}

.avant > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  cursor: pointer;
  list-style: none;
}

.avant > summary::-webkit-details-marker {
  display: none;
}

.avant > summary::before {
  content: "↑";
  content: "↑" / "";
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: var(--trait) solid currentColor;
  border-radius: 2px;
}

.avant[open] > summary::before {
  content: "↓";
  content: "↓" / "";
}

.avant-contenu {
  max-width: 52rem;
  padding: 1rem 0 0.5rem;
}

.avant-objets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.objet {
  margin: 0;
}

.objet figcaption {
  margin-top: 0.4rem;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
}

.ecran-vert {
  display: flex;
  align-items: flex-end;
  height: 6.5rem;
  padding: 0.75rem;
  border: 10px solid #2b2b26;
  border-radius: 14px;
  background: radial-gradient(ellipse at center, #0f2a12, #061008);
}

.curseur-vert {
  width: 0.7rem;
  height: 1rem;
  background: #4dff7a;
  box-shadow: 0 0 6px #4dff7a;
}

.lcd {
  height: 6.5rem;
  padding: 1.2rem 0.9rem;
  border: 10px solid #2e3136;
  border-radius: 8px;
  background: #b9c4a4;
  color: #1c2416;
  font-family: var(--f-mono);
  font-size: 2rem;
  line-height: 1;
  text-align: right;
}

.objet-portes {
  grid-column: 1 / -1;
}

.objet-portes svg {
  width: 100%;
  max-width: 32rem;
  color: var(--encre-2);
}

.logique .porte {
  fill: var(--surface);
  stroke: currentColor;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.logique .trace {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.logique text {
  fill: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 13px;
}

/* ---------- Une époque ---------- */
.epoque {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-top: 1.25rem;
  background: linear-gradient(var(--encre), var(--encre)) var(--marge) 0 / calc(100% - 2 * var(--marge)) 2px no-repeat;
}

.to8,
.dos-scene,
.scene-1996 {
  margin-bottom: 1.75rem;
}

.epoque-date {
  margin: 0 0 0.2rem;
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}

.epoque-titre {
  margin: 0 0 1.25rem;
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-weight: 600;
  line-height: 1.15;
}

.epoque-texte {
  max-width: var(--mesure);
  color: var(--encre-2);
}

.parole {
  max-width: var(--mesure);
  margin: 1.5rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--accent);
}

.parole p {
  margin: 0 0 0.35rem;
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: 1.1875rem;
  font-style: italic;
  line-height: 1.45;
}

.note-technique {
  max-width: var(--mesure);
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* les places à remplir avec Seeb, visibles dans la maquette locale */
.a-raconter {
  max-width: var(--mesure);
  padding: 0.6rem 0.85rem;
  border: 1.5px dashed var(--attente-trait);
  border-radius: 3px;
  background: var(--attente-fond);
  color: var(--encre);
  font-size: 1rem;
}

/* ---------- 1986 : l'écran du TO8 ---------- */
.to8 {
  --c: var(--t8-2);
  --f: var(--t8-0);
  --t: var(--t8-4);
  --cn: "2";
  --fn: "0";
  --tn: "4";
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .to8 {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 2.5rem;
  }
}

.moniteur {
  justify-self: start;
  padding: clamp(0.5rem, 1.5vw, 1rem);
  border-radius: 18px;
  background: #24262a;
  box-shadow: inset 0 0 0 2px #3a3d42;
}

.ecran {
  border: clamp(14px, 3.4vw, 34px) solid var(--t);
  border-radius: 6px;
  background: var(--f);
  color: var(--c);
  animation: avant-run 4.6s steps(1, end) backwards;
}

@keyframes avant-run {
  from {
    border-color: #000000;
    background-color: #000000;
    color: #ffffff;
  }
}

.basic {
  width: 40ch;
  height: 12.5em;
  margin: 0;
  padding: 0.6em 0;
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: clamp(0.62rem, 2.55vw, 1.15rem);
  line-height: 1.3;
  text-transform: uppercase;
}

.basic .l {
  display: block;
  width: calc(var(--n) * 1ch);
  height: 1.3em;
  overflow: hidden;
  white-space: pre;
  /* une ligne pas encore tapée ne prend aucune place : le curseur suit la dernière ligne */
  animation:
    rang 0s var(--d) backwards,
    frappe calc(var(--n) * 0.05s) steps(var(--n), end) var(--d) backwards;
}

@keyframes rang {
  from {
    height: 0;
  }
}

.basic .l1 { --n: 15; --d: 0.3s; }
.basic .l2 { --n: 19; --d: 1.2s; }
.basic .l3 { --n: 37; --d: 2.3s; }
.basic .l4 { --n: 3; --d: 4.3s; }

.basic .l5,
.basic .l6 {
  --n: 26;
  animation: apparait 0s 4.7s backwards;
}

@keyframes frappe {
  from {
    width: 0;
  }
}

@keyframes apparait {
  from {
    height: 0;
    visibility: hidden;
  }
}

.curseur {
  display: inline-block;
  width: 1ch;
  height: 1.1em;
  vertical-align: -0.15em;
  background: currentColor;
  animation: clignote 1s steps(1, end) 6;
}

@keyframes clignote {
  50% {
    visibility: hidden;
  }
}

/* le jeu : cadre, fond, caractères */
.reglages fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}

.reglages legend {
  width: 100%;
  margin-bottom: 0.3rem;
  padding: 0;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pastille {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--encre-3);
  border-radius: 3px;
  background: var(--sw);
  cursor: pointer;
}

.pastille input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pastille > span {
  padding: 0 0.2rem;
  border-radius: 2px;
  background: #ffffff;
  color: #000000;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  line-height: 1.3;
}

.pastille:has(input:checked) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.pastille:has(input:focus-visible) {
  outline: 3px solid var(--encre);
  outline-offset: 2px;
}

.t0 { --sw: var(--t8-0); }
.t1 { --sw: var(--t8-1); }
.t2 { --sw: var(--t8-2); }
.t3 { --sw: var(--t8-3); }
.t4 { --sw: var(--t8-4); }
.t5 { --sw: var(--t8-5); }
.t6 { --sw: var(--t8-6); }
.t7 { --sw: var(--t8-7); }

.to8:has(#to8-c0:checked) { --c: var(--t8-0); --cn: "0"; }
.to8:has(#to8-c1:checked) { --c: var(--t8-1); --cn: "1"; }
.to8:has(#to8-c2:checked) { --c: var(--t8-2); --cn: "2"; }
.to8:has(#to8-c3:checked) { --c: var(--t8-3); --cn: "3"; }
.to8:has(#to8-c4:checked) { --c: var(--t8-4); --cn: "4"; }
.to8:has(#to8-c5:checked) { --c: var(--t8-5); --cn: "5"; }
.to8:has(#to8-c6:checked) { --c: var(--t8-6); --cn: "6"; }
.to8:has(#to8-c7:checked) { --c: var(--t8-7); --cn: "7"; }
.to8:has(#to8-f0:checked) { --f: var(--t8-0); --fn: "0"; }
.to8:has(#to8-f1:checked) { --f: var(--t8-1); --fn: "1"; }
.to8:has(#to8-f2:checked) { --f: var(--t8-2); --fn: "2"; }
.to8:has(#to8-f3:checked) { --f: var(--t8-3); --fn: "3"; }
.to8:has(#to8-f4:checked) { --f: var(--t8-4); --fn: "4"; }
.to8:has(#to8-f5:checked) { --f: var(--t8-5); --fn: "5"; }
.to8:has(#to8-f6:checked) { --f: var(--t8-6); --fn: "6"; }
.to8:has(#to8-f7:checked) { --f: var(--t8-7); --fn: "7"; }
.to8:has(#to8-t0:checked) { --t: var(--t8-0); --tn: "0"; }
.to8:has(#to8-t1:checked) { --t: var(--t8-1); --tn: "1"; }
.to8:has(#to8-t2:checked) { --t: var(--t8-2); --tn: "2"; }
.to8:has(#to8-t3:checked) { --t: var(--t8-3); --tn: "3"; }
.to8:has(#to8-t4:checked) { --t: var(--t8-4); --tn: "4"; }
.to8:has(#to8-t5:checked) { --t: var(--t8-5); --tn: "5"; }
.to8:has(#to8-t6:checked) { --t: var(--t8-6); --tn: "6"; }
.to8:has(#to8-t7:checked) { --t: var(--t8-7); --tn: "7"; }

.commande {
  margin: 0.5rem 0 0;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.9375rem;
}

.commande-code {
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  background: #000000;
  color: #ffffff;
  font-size: 1em;
}

.commande-code::after {
  content: "SCREEN " var(--cn) "," var(--fn) "," var(--tn);
}

/* ---------- Le DOS : le livre, puis l'écran ---------- */
.dos-scene {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .dos-scene {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.manuel {
  padding: 1.25rem 1.4rem 1.1rem;
  border: 1px solid #c9bfa6;
  border-radius: 2px;
  background: #f7f2e4;
  box-shadow: 4px 5px 0 #d9cfb6;
  color: #2a2620;
  transform: rotate(-0.8deg);
}

.manuel-titre {
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #2a2620;
  font-family: var(--f-titre);
  font-size: 1.375rem;
  font-weight: 600;
}

.arbre {
  margin: 0 0 1rem;
  color: #2a2620;
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  line-height: 1.45;
  white-space: pre;
}

.manuel-commandes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.manuel kbd {
  border-color: #a99f86;
  background: #ffffff;
  color: #2a2620;
}

.ecran-dos {
  overflow-x: auto;
  padding: 1rem 1.1rem;
  border: 10px solid #2a2c30;
  border-radius: 10px;
  background: #000000;
}

.ecran-dos pre {
  margin: 0;
  color: #c0c0c0;
  font-family: var(--f-mono);
  font-size: clamp(0.7rem, 0.55rem + 0.6vw, 0.95rem);
  line-height: 1.4;
}

.invite {
  color: #ffffff;
}

.curseur-dos {
  display: inline-block;
  width: 1ch;
  height: 0.2em;
  background: #c0c0c0;
}

/* ---------- 1996–1997 : l'éditeur bleu, et la voix ---------- */
.scene-1996 {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 60rem) {
  .scene-1996 {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  }
}

.editeur {
  overflow: hidden;
  border: 1px solid #000000;
  background: #0000aa;
}

.editeur-barre {
  margin: 0;
  padding: 0.15rem 0.75rem;
  background: #aaaaaa;
  color: #000000;
  font-family: var(--f-mono);
  font-size: 0.875rem;
  text-align: center;
}

.editeur pre {
  overflow-x: auto;
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  color: #d8d8d8;
  font-family: var(--f-mono);
  font-size: clamp(0.66rem, 0.5rem + 0.55vw, 0.875rem);
  line-height: 1.4;
}

.voix {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 7rem;
  padding: 0 1rem;
  border: 1px solid var(--filet);
  border-radius: 4px;
  background: var(--surface);
}

.voix span {
  flex: 1;
  height: 20%;
  border-radius: 2px;
  background: var(--accent);
}

.voix span:nth-child(2n) { height: 45%; }
.voix span:nth-child(3n) { height: 70%; }
.voix span:nth-child(5n) { height: 90%; }
.voix span:nth-child(7n) { height: 35%; }

/* ---------- La suite, puis aujourd'hui ---------- */
.suite-epoques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.85rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.suite-epoques li {
  padding: 0.85rem 1rem 0.9rem;
  border: 1px solid var(--filet);
  border-top: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--surface);
}

.suite-epoques p {
  margin: 0 0 0.45rem;
  color: var(--encre-2);
  font-size: 1rem;
  line-height: 1.55;
}

.suite-epoques p:last-child {
  margin-bottom: 0;
}

.suite-epoques .suite-date {
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.suite-epoques .suite-vide {
  color: var(--encre-3);
  font-style: italic;
}

.suite-epoques .suite-aujourdhui {
  grid-column: 1 / -1;
  border-top-color: var(--encre);
}

.passer--fin::after {
  content: "\00a0↓";
  content: "\00a0↓" / "";
}

/* là où commence le site d'aujourd'hui : un repère, dans la colonne */
.aujourdhui {
  margin-top: var(--respiration);
}

.aujourdhui::before {
  content: "Aujourd’hui";
  content: "Aujourd’hui" / "";
  display: block;
  box-sizing: content-box;
  max-width: calc(var(--cadre) - 2 * var(--marge));
  margin: 0 auto;
  padding: 0.6rem 0 0;
  border-top: 2px solid var(--encre);
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: calc(100% - 2 * var(--marge));
}

/* ==========================================================================
   Passe 3 (07/11/2026) : l'interrupteur rétro, les touches rétro des pages, les nouveaux souvenirs.
   ========================================================================== */

/* ---------- L'interrupteur à levier, dans l'esprit des schémas ---------- */
.retro {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0 1.25rem;
  padding: 0.3rem 0.65rem 0.3rem 0.45rem;
  border: var(--trait) solid var(--encre-3);
  border-radius: 4px;
  background: var(--surface);
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  align-self: center;
}

.retro[hidden] {
  display: none;
}

.retro:hover {
  border-color: var(--accent);
}

.retro:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.retro-boitier {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.15rem;
  height: 1.6rem;
  border: var(--trait) solid currentColor;
  border-radius: 3px;
  background: var(--fond);
}

/* le pivot */
.retro-boitier::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: currentColor;
}

/* le levier, et sa boule ; vers le haut : ON, vers le bas : OFF */
.retro-levier {
  position: absolute;
  top: calc(50% - 0.7rem);
  left: 50%;
  width: 3px;
  height: 0.7rem;
  margin-left: -1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(22deg);
  transform-origin: 50% 100%;
}

.retro-levier::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: currentColor;
}

.retro[aria-pressed="false"] .retro-levier {
  transform: rotate(158deg);
}

.retro-etat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 3.4em;
  color: var(--encre-3);
}

.retro-etat::before {
  content: "OFF";
}

.retro-etat::after {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.retro[aria-pressed="true"] .retro-etat {
  color: var(--accent-fort);
}

.retro[aria-pressed="true"] .retro-etat::before {
  content: "ON";
}

.retro[aria-pressed="true"] .retro-etat::after {
  background: var(--accent);
  border-color: var(--accent);
}

@media (min-width: 48rem) {
  .nav {
    margin-left: auto;
  }
}

@media (max-width: 47.99rem) {
  .entete-in {
    position: relative;
  }

  .retro {
    position: absolute;
    top: 0.85rem;
    right: var(--marge);
    margin: 0;
  }
}

/* sur un petit écran, l'interrupteur se resserre : le levier et le voyant disent l'état, aria-pressed aussi */
@media (max-width: 29.99rem) {
  .marque {
    font-size: 1.25rem;
  }

  .retro {
    gap: 0.35rem;
    padding: 0.25rem 0.45rem 0.25rem 0.35rem;
  }

  .retro-etat {
    min-width: 0;
  }

  .retro-etat::before,
  .retro[aria-pressed="true"] .retro-etat::before {
    content: none;
  }
}

/* ---------- Le lecteur audio d'un chapitre (seulement si son fichier existe) ---------- */
.audio-chapitre {
  margin: -0.4rem 0 1.25rem;
}

.audio-chapitre audio {
  width: min(100%, 22rem);
  height: 2.25rem;
}

/* ---------- Sobre (par défaut) et rétro : le même contenu, deux habillages (07/11/2026) ----------
   Tout le voyage se lit dans les deux thèmes : le rétro ne change que l'apparence, jamais ce qui s'affiche. */
[data-retro="on"] .voyage-off {
  display: none;
}

.voyage-off {
  margin-top: 1.25rem;
}

.voyage-off-bouton {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: transparent;
  color: var(--accent-fort);
  font: inherit;
  cursor: pointer;
}

.voyage-off-bouton:hover,
.voyage-off-bouton:focus-visible {
  background: var(--surface);
}

.voyage-off-bouton:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- ON : les touches rétro des pages intérieures ---------- */
/* le surtitre devient une ligne de BASIC sur l'écran du TO8 */
[data-retro="on"] .tete .surtitre {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 5px solid var(--t8-4);
  border-radius: 3px;
  background: #000000;
  color: var(--t8-2);
  letter-spacing: 0.04em;
}

[data-retro="on"] .tete .surtitre::before {
  content: "10 REM\00a0";
  content: "10 REM\00a0" / "";
}

/* les titres de section se numérotent comme des lignes de BASIC : 10, 20, 30… */
[data-retro="on"] .bloc > h2 {
  counter-increment: section 10;
}

/* le logo devient un petit écran de TO8, où le fil et le nœud du site s'allument en vert */
[data-retro="on"] .marque::before {
  width: 26px;
  height: 21px;
  border: 3px solid var(--t8-4);
  border-radius: 3px;
  background:
    radial-gradient(circle at 10px 10px, var(--t8-2) 2.7px, transparent 3.2px),
    linear-gradient(var(--t8-2), var(--t8-2)) 9px 2px / 2px 8px no-repeat,
    linear-gradient(var(--t8-2), var(--t8-2)) 2px 9px / 16px 2px no-repeat,
    #000000;
}

/* ---------- La sinusoïde du courant, entre les époques rétro ---------- */
.voyage .epoque {
  padding-top: 0;
  background: none;
}

.voyage .epoque::before {
  content: "";
  display: block;
  height: 24px;
  margin-bottom: 1.25rem;
  background: url("../img/sinus-clair.svg") 0 50% / 80px 24px repeat-x;
  animation: courant 5s linear 1;
}

.ronronnement {
  padding-bottom: 2.75rem;
  background: url("../img/sinus-accent-clair.svg") 0 100% / 120px 36px repeat-x;
  animation: courant-lent 5s linear 1;
}

@media (prefers-color-scheme: dark) {
  .voyage .epoque::before {
    background-image: url("../img/sinus-sombre.svg");
  }

  .ronronnement {
    background-image: url("../img/sinus-accent-sombre.svg");
  }
}

@keyframes courant {
  from {
    background-position: -160px 50%;
  }
}

@keyframes courant-lent {
  from {
    background-position: -240px 100%;
  }
}

/* ---------- Les dessins des souvenirs, au trait, dans l'esprit des schémas ---------- */
.dessin {
  max-width: 34rem;
  margin: 1.25rem 0;
}

.dessin--large {
  max-width: 46rem;
}

.dessin--etroit {
  max-width: 22rem;
}

.dessins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem 2rem;
  max-width: 64rem;
  margin: 1.25rem 0;
}

.dessins .dessin {
  max-width: none;
  margin: 0;
}

/* les schémas électriques, hauts et fins : côte à côte sur grand écran, l'un sous l'autre sur téléphone */
.dessins--schemas {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 23rem));
  justify-content: start;
}

/* ---------- Les dessins des cours, du brevet au DUT, et de l'époque du bitcoin ---------- */
.dessin .eau {
  fill: #3a8fd6;
  fill-opacity: 0.22;
  stroke: none;
}

.dessin .gaz {
  fill: var(--fond);
}

.dessin .bulle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dessin .alu {
  fill: #c9ccd1;
  stroke: #6b7079;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.dessin .alu-trait {
  fill: none;
  stroke: #4a4f57;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.dessin .led {
  fill: var(--accent);
}

.dessin .piece {
  fill: #d4a72c;
  stroke: #8a6a14;
  stroke-width: 1;
}

.dessin .lbl.acc-txt {
  fill: var(--accent);
}

.dessin .ind {
  font-size: 9px;
}

.dessin .barre {
  text-decoration: overline;
}

.dessin .lbl.tuile-symbole {
  fill: var(--encre);
  font-size: 30px;
}

.dessin .consigne {
  fill: none;
  stroke: var(--encre-3);
  stroke-width: 1.2;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}

.dessin .crb-p,
.dessin .crb-pi,
.dessin .crb-pid,
.dessin .f-carre,
.dessin .f-1,
.dessin .f-3,
.dessin .f-5,
.dessin .prix {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.dessin .crb-p {
  stroke: var(--encre);
  stroke-width: 2;
}

.dessin .crb-pi {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 8 5;
}

.dessin .crb-pid {
  stroke: var(--encre-2);
  stroke-width: 2.8;
  stroke-dasharray: 0.1 5;
  stroke-linecap: round;
}

.dessin .f-carre {
  stroke: var(--encre-3);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
}

.dessin .f-1 {
  stroke: var(--encre-3);
  stroke-width: 1.4;
}

.dessin .f-3 {
  stroke: var(--encre-2);
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
}

.dessin .f-5 {
  stroke: var(--accent);
  stroke-width: 2.2;
}

/* les sommes de Fourier s'allument l'une après l'autre, doucement */
.fourier .f-1,
.fourier .f-3,
.fourier .f-5 {
  animation: harmonique 9s ease-in-out 3 both;
}

.fourier .f-3 {
  animation-delay: 3s;
}

.fourier .f-5 {
  animation-delay: 6s;
}

@keyframes harmonique {
  0%,
  45%,
  100% {
    opacity: 0.35;
  }

  12%,
  30% {
    opacity: 1;
  }
}

/* le code des couleurs des résistances : des couleurs posées, en clair comme en sombre */
.dessin .r-corps {
  fill: #e2c38f;
  stroke: #8f6d3a;
  stroke-width: 1.2;
}

.b-noir { fill: #1d1d1d; background-color: #1d1d1d; }
.b-marron { fill: #7a4a24; background-color: #7a4a24; }
.b-rouge { fill: #d2322b; background-color: #d2322b; }
.b-orange { fill: #ee8a22; background-color: #ee8a22; }
.b-jaune { fill: #f1d02f; background-color: #f1d02f; }
.b-vert { fill: #2e9d50; background-color: #2e9d50; }
.b-bleu { fill: #2f6ed4; background-color: #2f6ed4; }
.b-violet { fill: #8b4fc6; background-color: #8b4fc6; }
.b-gris { fill: #8e9196; background-color: #8e9196; }
.b-blanc { fill: #f6f6f6; background-color: #f6f6f6; }
.b-or { fill: #c9a230; background-color: #c9a230; }
.b-argent { fill: #b9bdc4; background-color: #b9bdc4; }

.code-couleurs {
  margin-top: 0.75rem;
  border-collapse: collapse;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.75rem;
}

.code-couleurs caption {
  margin-bottom: 0.35rem;
  color: var(--encre-3);
  text-align: left;
}

.code-couleurs th,
.code-couleurs td {
  padding: 0.2rem 0.35rem;
  border-bottom: 1px solid var(--filet);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

.code-couleurs thead th {
  color: var(--encre);
}

.code-couleurs .couleur {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.45rem;
  border: 1px solid var(--filet);
  border-radius: 2px;
  vertical-align: -0.1rem;
}

/* le petit jeu : chaque résistance se déplie, au clic comme au clavier */
.jeu-consigne {
  margin: 0 0 0.6rem;
  color: var(--encre-2);
  font-size: 0.9375rem;
}

.jeu-r {
  margin: 0 0 0.55rem;
}

.jeu-r summary {
  display: block;
  max-width: 15rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--filet);
  border-radius: 4px;
  cursor: pointer;
  list-style: none;
}

.jeu-r summary::-webkit-details-marker {
  display: none;
}

.jeu-r summary:hover,
.jeu-r[open] summary {
  border-color: var(--accent);
}

.jeu-r summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.jeu-r p {
  margin: 0.35rem 0 0;
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 0.875rem;
}

/* le programme du chenillard : la liste défile dans sa fenêtre */
.dessin--code {
  max-width: 30rem;
}

.dessin--code pre {
  max-height: 30rem;
}

/* le distributeur autonome, en trois cases */
.sequence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sequence-texte {
  margin: 0.35rem 0 0;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
}

/* l'arc-en-ciel : dessin d'humeur, sans données */
.dessin .rb {
  stroke: none;
  fill-opacity: 0.55;
}

.dessin .rb0 { fill: #3b5fcf; }
.dessin .rb1 { fill: #2ea6c6; }
.dessin .rb2 { fill: #3fb46a; }
.dessin .rb3 { fill: #a5cd3b; }
.dessin .rb4 { fill: #f0cf3a; }
.dessin .rb5 { fill: #f29a2c; }
.dessin .rb6 { fill: #e0473a; }

.dessin .prix {
  stroke: var(--encre);
  stroke-width: 1.6;
}

.dessin .lbl.rb-nom {
  fill: var(--encre);
  stroke: var(--fond);
  stroke-width: 3px;
  paint-order: stroke;
}

/* la phrase-clé, et le bloc « Ce que je voyais en 2011 » */
.parole--cle p {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}

.parole .parole-titre {
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-style: normal;
  letter-spacing: 0.04em;
}

.dessin svg {
  width: 100%;
  height: auto;
  color: var(--encre-2);
  overflow: visible;
}

.dessin figcaption {
  margin-top: 0.5rem;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.dessin .t {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dessin .tf {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dessin .tr {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.dessin .tir {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.dessin .lim {
  stroke: var(--filet);
}

.dessin .p {
  fill: var(--surface);
}

.dessin .pt {
  fill: currentColor;
}

.dessin .acc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.dessin .bar {
  fill: var(--accent);
}

.dessin .borne {
  fill: var(--fond);
  stroke: currentColor;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.dessin .lbl {
  fill: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 12px;
}

.dessin .lbl--petit {
  font-size: 10px;
}

.dessin .lbl--grand {
  fill: var(--encre);
  font-size: 18px;
}

.dessin .lbl--italique {
  fill: var(--accent);
  font-size: 15px;
  font-style: italic;
}

/* les objets d'époque gardent leurs couleurs, en clair comme en sombre */
.dessin .ecranfix {
  fill: #111111;
  stroke: #3a3d42;
  stroke-width: 1.5;
}

.dessin .sept {
  font-family: var(--f-mono);
  font-size: 22px;
}

.dessin .rouge {
  fill: #ff5a46;
}

.dessin .vert {
  fill: #3ce06a;
}

.dessin .borne-rouge {
  fill: #d23a2a;
  stroke: #6b1b13;
  stroke-width: 1.5;
}

.dessin .borne-noire {
  fill: #222222;
  stroke: #000000;
  stroke-width: 1.5;
}

.dessin .borne-verte {
  fill: #2e9e55;
  stroke: #1c5e34;
  stroke-width: 1.5;
}

.dessin .puce {
  fill: #1c1c1c;
  stroke: #000000;
}

.dessin .puce-trait {
  fill: none;
  stroke: #6a6a6a;
  stroke-width: 1.5;
}

.dessin .puce-texte {
  fill: #e8e8e8;
  font-family: var(--f-mono);
  font-size: 14px;
}

.dessin .fil-de-fer {
  fill: none;
  stroke: #7fd4ff;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.dessin .manta {
  fill: #2f9e55;
  stroke: #1c5e34;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.dessin .manta-trait {
  fill: none;
  stroke: #1c5e34;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.dessin .manta-led {
  fill: #b6ff6a;
}

/* AutoCAD : la ligne de commande, et l'écran noir de la pièce */
.autocad {
  display: grid;
  gap: 1rem 1.5rem;
  align-items: start;
  margin: 1.25rem 0;
}

@media (min-width: 60rem) {
  .autocad {
    grid-template-columns: minmax(0, 15rem) minmax(0, 27rem);
  }
}

.autocad-ligne {
  overflow-x: auto;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 8px solid #2a2c30;
  border-radius: 6px;
  background: #000000;
  color: #f0f0f0;
  font-family: var(--f-mono);
  font-size: 0.875rem;
  line-height: 1.5;
}

.dessin--ecran {
  max-width: none;
  margin: 0;
}

.dessin .cad-fond {
  fill: #000000;
}

.dessin .cad-trait {
  fill: none;
  stroke: #f0f0f0;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.dessin .cad-cote {
  fill: none;
  stroke: #ffd400;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dessin .cad-texte {
  fill: #ffd400;
  font-family: var(--f-mono);
  font-size: 12px;
}

.dessin .cad-petit {
  fill: #f0f0f0;
  font-size: 9px;
}

/* la barre de téléchargement d'époque, très lente */
.telechargement {
  max-width: 22rem;
  border: 2px solid #808080;
  background: #c0c0c0;
  color: #000000;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
}

.tel-barre {
  margin: 0;
  padding: 0.15rem 0.5rem;
  background: #000080;
  color: #ffffff;
}

.tel-fichier {
  margin: 0.6rem 0.7rem 0.4rem;
}

.tel-jauge {
  height: 1.1rem;
  margin: 0 0.7rem;
  border: 2px inset #808080;
  background: #ffffff;
}

.tel-jauge span {
  display: block;
  width: 4%;
  height: 100%;
  background: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px);
}

.tel-vitesse {
  margin: 0.4rem 0.7rem 0.6rem;
  text-align: right;
}

/* ---------- L'écran du 286 de mon père, réglable (couleurs d'époque, en clair comme en sombre) ---------- */
.ecran-286 {
  max-width: 52rem;
}

.pc286 {
  padding: 1rem 1rem 1.6rem;
  border: 1px solid #8f8a7c;
  border-radius: 10px;
  background: #d8d2c2;
  box-shadow: inset 0 0 0 4px #e6e1d3;
}

.pc286-ecran {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 2px solid #3a3a3a;
  border-radius: 4px;
  background: #ffffff;
  color: #000000;
  font-family: var(--f-mono);
}

@media (min-width: 44rem) {
  .pc286-ecran {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }
}

.dessin .pc286-fond {
  fill: #ffffff;
}

.dessin .pc286-axe,
.dessin .pc286-consigne,
.dessin .pc286-p,
.dessin .pc286-pi,
.dessin .pc286-pid {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.dessin .pc286-axe {
  stroke: #000000;
  stroke-width: 1.5;
}

.dessin .pc286-consigne {
  stroke: #555555;
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.dessin .pc286-txt {
  fill: #000000;
  font-family: var(--f-mono);
  font-size: 9px;
}

.dessin .pc286-p,
.dessin .pc286-pi,
.dessin .pc286-pid {
  stroke-width: 2;
}

.dessin .pc286-p { stroke: #aa0000; }
.dessin .pc286-pi { stroke: #0000aa; }
.dessin .pc286-pid { stroke: #009a00; }

.pc286-variables {
  color: #000000;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.pc286-variables p {
  margin: 0 0 0.3rem;
}

.pc286-variables .pc286-titre {
  margin-bottom: 0.45rem;
  border-bottom: 2px solid #000000;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pc286-groupe {
  margin: 0 0 0.5rem;
  padding: 0.35rem 0.5rem 0.2rem;
  border: 1px solid #000000;
}

.pc286-groupe legend {
  padding: 0 0.3rem;
  font-weight: 700;
}

.pc286-g-p legend,
.pc286-l-p { color: #aa0000; }
.pc286-g-pi legend,
.pc286-l-pi { color: #0000aa; }
.pc286-g-pid legend,
.pc286-l-pid,
.pc286-q { color: #007a00; }

.pc286-variables .pc286-champ {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 3rem;
  gap: 0.4rem;
  align-items: center;
  margin: 0 0 0.2rem;
}

.pc286-champ input {
  width: 100%;
  min-height: 24px;
  margin: 0;
}

.pc286-g-p input { accent-color: #aa0000; }
.pc286-g-pi input { accent-color: #0000aa; }
.pc286-g-pid input { accent-color: #007a00; }

.pc286-champ output {
  text-align: right;
}

.pc286-q {
  padding: 0 0.25rem;
  font-weight: 700;
}

.pc286-q:focus-visible,
.pc286-champ input:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

.pc286-variables .pid-etat {
  margin-top: 0.45rem;
  color: #222222;
  font-size: 0.75rem;
}

.pid-fixe[hidden],
.pid-reglages[hidden] {
  display: none;
}

/* ---------- Le vieux cours d'automatique, côté S : un polycopié jauni ---------- */
.polycopie {
  max-width: 40rem;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem 1.4rem;
  border: 1px solid #cdbf98;
  background: #f4ecd4;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.08);
  color: #2b2618;
  font-family: var(--f-mono);
  font-size: 0.9rem;
  line-height: 1.6;
}

.polycopie p {
  margin: 0 0 0.6rem;
}

.polycopie .poly-entete {
  color: #5a5038;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.polycopie .poly-titre {
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.polycopie .poly-section {
  margin-top: 1rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.polycopie .poly-an {
  font-style: italic;
}

.polycopie .poly-note {
  padding-top: 0.5rem;
  border-top: 1px dashed #b9a978;
  color: #5a5038;
  font-size: 0.8rem;
}

.polycopie math {
  margin: 0.4rem 0 0.8rem;
  color: #1d1a10;
  font-size: 1.1em;
}

/* ---------- Les clins d'œil : les questions à ses parents, et « Dis, Seeb, raconte-nous… » ---------- */
.question-parent {
  padding-left: 1.1rem;
  border-left: 2px dotted var(--accent);
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: 1.125rem;
}

.raconte-nous {
  max-width: var(--mesure);
  margin: 0.6rem 0;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--filet);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  color: var(--encre-2);
  font-size: 0.9375rem;
}

.raconte-nous-suite {
  color: var(--encre-3);
  font-style: italic;
  white-space: nowrap;
}

/* « Dis, Seeb, raconte-nous » (08/11/2026) : avec assets/js/raconte.js, la question devient un bouton, la suite dit
   combien de curieux attendent l'histoire, et le défi du lapin s'ouvre dessous. Sans script, rien de tout cela. */
.raconte-nous-suite[id] {
  white-space: normal;
}

/* « Pourquoi ce bouton ? » : caché tant que le script n'a pas posé les boutons (sans script, aucun bouton à expliquer) */
.raconte-pourquoi[hidden] {
  display: none;
}

.raconte-bouton {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-decoration: underline dotted var(--accent);
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.raconte-bouton:hover {
  color: var(--encre);
  text-decoration-style: solid;
}

.raconte-bouton:focus-visible,
.raconte-lapin:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.raconte-defi {
  max-width: var(--mesure);
  margin: -0.35rem 0 0.8rem;
  padding: 0.5rem 0.8rem 0.6rem;
  border: 1px solid var(--filet);
  border-top: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0 0 3px 3px;
  color: var(--encre-2);
  font-size: 0.9375rem;
}

.raconte-defi p {
  margin: 0.3rem 0;
}

/* le message du défi reçoit le focus par script (tabindex=-1) : un contour reste visible (garde d'accessibilité,
   08/11/2026, RGAA 10.7) */
.raconte-etat:focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* le pré du lapin, et le lapin : une tête, deux oreilles, la diode du ventre */
.raconte-pre {
  position: relative;
  max-width: 14rem;
  height: 4.4rem;
  margin: 0.4rem 0;
  border-bottom: 2px dotted var(--filet);
}

.raconte-lapin {
  position: absolute;
  bottom: 0.15rem;
  left: 1rem;
  width: 2.75rem;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}

.raconte-lapin[data-pos="1"] {
  translate: 9rem 0;
}

.raconte-lapin[data-pos="2"] {
  translate: 4.5rem 0;
}

.raconte-tete,
.raconte-oreille {
  position: absolute;
  border: 2px solid var(--encre-2);
  background: var(--surface);
}

.raconte-tete {
  right: 0.15rem;
  bottom: 0;
  left: 0.15rem;
  height: 2.1rem;
  border-radius: 48% 48% 40% 40%;
  transform-origin: 50% 100%;
}

.raconte-tete::after {
  position: absolute;
  bottom: 0.35rem;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: -0.25rem;
  border-radius: 50%;
  background: var(--filet);
  content: "";
}

.raconte-oreille {
  bottom: 1.85rem;
  width: 0.6rem;
  height: 1.9rem;
  border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
  transform-origin: 50% 100%;
}

.raconte-oreille:first-child {
  left: 0.6rem;
  transform: rotate(-12deg);
}

.raconte-oreille:nth-child(2) {
  right: 0.6rem;
  transform: rotate(12deg);
}

/* endormi, les oreilles pendent le long de la tête ; une prise en relève une, deux prises les deux ; réveillé, la
   diode s'allume */
.raconte-lapin[data-oreilles="0"] .raconte-oreille:first-child {
  transform: rotate(-115deg);
}

.raconte-lapin[data-oreilles="0"] .raconte-oreille:nth-child(2),
.raconte-lapin[data-oreilles="1"] .raconte-oreille:nth-child(2) {
  transform: rotate(115deg);
}

.raconte-lapin[data-oreilles="3"] .raconte-oreille:first-child {
  transform: rotate(-28deg);
}

.raconte-lapin[data-oreilles="3"] .raconte-oreille:nth-child(2) {
  transform: rotate(28deg);
}

.raconte-lapin[data-oreilles="3"] .raconte-tete::after {
  background: var(--accent);
}

.raconte-diodes span {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.35rem;
  border: 1px solid var(--encre-3);
  border-radius: 50%;
}

.raconte-diodes .allumee {
  border-color: var(--accent);
  background: var(--accent);
}

/* le mouvement, seulement pour qui ne l'a pas refusé : le lapin respire en dormant, et saute d'une prise à l'autre */
@media (prefers-reduced-motion: no-preference) {
  .raconte-lapin {
    transition: translate 0.35s cubic-bezier(0.3, 1.3, 0.5, 1);
  }

  .raconte-oreille {
    transition: transform 0.25s ease-out;
  }

  .raconte-lapin[data-oreilles="0"] .raconte-tete {
    animation: raconte-dodo 2.4s ease-in-out infinite alternate;
  }

  .raconte-lapin[data-pos="1"] {
    animation: raconte-saut-a 0.35s ease-out;
  }

  .raconte-lapin[data-pos="2"] {
    animation: raconte-saut-b 0.35s ease-out;
  }
}

@keyframes raconte-dodo {
  to {
    transform: scaleY(0.94);
  }
}

@keyframes raconte-saut-a {
  45% {
    transform: translateY(-1.1rem);
  }
}

@keyframes raconte-saut-b {
  45% {
    transform: translateY(-1.1rem);
  }
}

/* ---------- Les frises par sujet : plein pour ma vie, creux pour l'histoire des techniques ---------- */
.frise {
  max-width: 64rem;
  margin: 1.75rem 0;
}

.frise-titre {
  margin-bottom: 0.4rem;
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

.frise-defile {
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.frise-defile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.frise-liste {
  position: relative;
  display: flex;
  width: max-content;
  margin: 0;
  padding: 1.3rem 0 0;
  list-style: none;
}

.frise-liste::before {
  content: "";
  position: absolute;
  top: 1.3rem;
  right: 0;
  left: 0;
  height: 2px;
  margin-top: -1px;
  background: var(--encre-3);
}

.frise-liste li {
  position: relative;
  flex: 0 0 9.5rem;
  margin: 0;
  padding: 0.95rem 1rem 0 0;
}

.frise-liste li::before {
  content: "";
  position: absolute;
  top: -0.45rem;
  left: 0;
  box-sizing: border-box;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--fond);
}

.frise-liste .frise-vie::before,
.frise-puce--vie {
  background: var(--accent);
}

.frise-quand {
  display: block;
  min-height: 1.3em;
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
}

.frise-quoi {
  display: block;
  color: var(--encre-2);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.frise-legende {
  margin: 0.5rem 0 0;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.75rem;
}

.frise-puce {
  display: inline-block;
  box-sizing: border-box;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.35rem 0 0.6rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  vertical-align: -0.05rem;
}

.frise-puce:first-child {
  margin-left: 0;
}

/* en mode rétro, la ligne de la frise devient la sinusoïde du courant ; sans rétro, un trait net */
[data-retro="on"] .frise-liste::before {
  height: 12px;
  margin-top: -6px;
  background: url("../img/sinus-accent-clair.svg") 0 50% / 60px 12px repeat-x;
}

@media (prefers-color-scheme: dark) {
  [data-retro="on"] .frise-liste::before {
    background-image: url("../img/sinus-accent-sombre.svg");
  }
}

[data-retro="off"] .frise-titre {
  font-family: var(--f-texte);
  font-weight: 600;
  letter-spacing: 0;
}

/* ---------- L'étincelle : le prompt qui est censé avoir créé le site ---------- */
.etincelle-site {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.invite {
  max-width: 44rem;
  overflow: hidden;
  border: 1px solid var(--filet);
  border-radius: 8px;
  background: var(--surface);
}

.invite-barre {
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-bottom: 1px solid var(--filet);
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.invite-message {
  margin: 0.9rem;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  line-height: 1.6;
}

.invite-message p {
  margin: 0 0 0.55rem;
}

.invite-message p:last-child {
  margin-bottom: 0;
}

.invite-message .invite-auteur {
  color: var(--accent-fort);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.invite-message .invite-ellipse {
  color: var(--encre-2);
}

.etincelle-etiquette {
  max-width: 44rem;
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.8rem;
  border: 1px dashed var(--filet);
  border-radius: 4px;
  color: var(--encre-2);
  font-size: 0.875rem;
}

/* ---------- Kléo, le conteur : clairement une IA, en chasse fixe et en couleur d'accent ---------- */
.conteur-presentation .conteur-texte {
  max-width: var(--mesure);
  color: var(--encre-2);
}

.conteur {
  max-width: var(--mesure);
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  margin-bottom: 0;
  color: var(--encre-2);
  font-style: italic;
}

.conteur--dans {
  margin-top: 0;
}

.conteur-nom {
  display: inline-block;
  margin-right: 0.45rem;
  padding: 0 0.4rem;
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.04em;
  vertical-align: 0.1rem;
}

.conteur--signature {
  margin-top: 1.5rem;
}

.conteur--signature p {
  margin: 0 0 0.7rem;
}

.conteur--signature .conteur-phrase {
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  font-style: normal;
  line-height: 1.4;
}

.conteur--signature .conteur-signe {
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-style: normal;
}

.seuil-suite {
  max-width: 40rem;
  margin: 0 0 0.75rem;
  color: var(--encre-2);
  font-family: var(--f-titre);
  font-size: 1.125rem;
  font-style: italic;
}

/* ---------- Les seuils : l'ouverture et la clôture du voyage, grandes et posées ---------- */
.seuil {
  margin-top: clamp(2rem, 1.5rem + 3vw, 4rem);
}

.seuil-citation {
  max-width: 40rem;
  margin: 1rem 0 0;
  padding: 0;
}

.seuil-texte {
  max-width: 34ch;
  margin: 0 0 0.75rem;
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.35rem);
  font-weight: 400;
  line-height: 1.3;
}

.seuil-signature {
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.875rem;
}

.seuil--cloture {
  margin: 2.5rem 0 0;
}

.seuil--cloture .seuil-texte {
  max-width: 40ch;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem);
}

.seuil--cloture .seuil-bienvenue {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
}

.seuil-bienvenue {
  color: var(--accent-fort);
  font-weight: 600;
}

/* ---------- L'hélicoptère : la scène, les temps du récit, puis la vue éclatée ---------- */
.temps {
  max-width: var(--mesure);
  margin: 1.25rem 0;
  padding-left: 2.2rem;
}

.temps li {
  margin: 0 0 1rem;
  padding-left: 0.4rem;
}

.temps li::marker {
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.875rem;
}

.temps p {
  margin: 0 0 0.4rem;
  color: var(--encre-2);
  font-size: 1.125rem;
}

.temps--conteur p {
  font-style: italic;
}

.temps .temps-mot {
  margin: 0.6rem 0 0.2rem;
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.1;
}

.dessin .tapis {
  fill: var(--accent);
  fill-opacity: 0.16;
  stroke: var(--accent);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.dessin .silhouette {
  fill: var(--encre-2);
}

.dessin .silhouette-bras {
  fill: none;
  stroke: var(--encre-2);
  stroke-width: 7;
  stroke-linecap: round;
}

.helico-scene .rotor-jouet {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: rotor-jouet 1.6s ease-in-out 6;
}

@keyframes rotor-jouet {
  50% {
    transform: scaleX(0.15);
  }
}

.dessin .bulle-rep {
  fill: var(--fond);
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.nomenclature {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.8rem;
  margin: 0.6rem 0 0;
  padding-left: 1.4rem;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
}

.nomenclature li {
  margin-right: 0.6rem;
}

/* la vue éclatée : les pièces écartées, au repos ; au défilement, elles reprennent leur place */
.heli-eclatee {
  view-timeline-name: --heli;
}

.heli-p1 { transform: translate(0px, -62px); }
.heli-p2 { transform: translate(0px, -34px); }
.heli-p3 { transform: translate(48px, -50px); }
.heli-p5 { transform: translate(46px, 0px); }
.heli-p6 { transform: translate(92px, 0px); }
.heli-p7 { transform: translate(0px, 46px); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .heli-eclatee .heli-mobile {
      animation: heli-remonte linear both;
      animation-timeline: --heli;
      animation-range: entry 40% contain 35%;
    }

    .heli-eclatee .heli-montage {
      animation: heli-efface linear both;
      animation-timeline: --heli;
      animation-range: entry 40% contain 35%;
    }
  }
}

@keyframes heli-remonte {
  to {
    transform: none;
  }
}

@keyframes heli-efface {
  to {
    opacity: 0;
  }
}

/* ---------- Lot 2 : l'étincelle repliable, le réseau, la propagation, fork(), la mémoire, le triptyque ---------- */
.invite-pli > summary {
  margin-bottom: 0.6rem;
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  cursor: pointer;
}

.invite-pli > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dessin .dossier-cache {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

.dessin .noeud {
  fill: var(--accent);
  stroke: var(--accent-fort);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.propagation .noeud {
  animation: allume 0.9s ease-out both;
}

.propagation .pg-d1 { animation-delay: 0.8s; }
.propagation .pg-d2 { animation-delay: 1.6s; }
.propagation .pg-d3 { animation-delay: 2.4s; }
.propagation .pg-d4 { animation-delay: 3.2s; }

@keyframes allume {
  from {
    fill: var(--fond);
  }
}

.dessin .acc-bloc {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.dessins--fork {
  align-items: start;
}

.editeur--unix {
  border-color: #3a3d42;
  background: #111315;
}

.editeur--unix .editeur-barre {
  background: #3a3d42;
  color: #e6e6e6;
}

.editeur--unix pre {
  color: #d6e3d6;
}

.dumps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
}

.dump {
  position: relative;
  padding: 0.5rem 0.65rem;
  border: 1px solid #2c3036;
  border-radius: 4px;
  background: #0f1113;
  color: #c9d1c9;
}

.dump-titre {
  margin: 0 0 0.35rem;
  color: #9fb3a6;
  font-family: var(--f-mono);
  font-size: 0.75rem;
}

.dump-octets {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre;
}

.dump .octet-cible {
  padding: 0 0.1rem;
  border-radius: 2px;
  background: #e8c547;
  color: #111111;
}

.dump .octet-bouge {
  color: #8a96a3;
  text-decoration: underline dotted;
}

.dump--jackpot {
  border-color: #e8c547;
}

.dump .jackpot {
  position: absolute;
  right: 0.6rem;
  bottom: 0.4rem;
  margin: 0;
  padding: 0.05rem 0.4rem;
  border: 2px solid #e8c547;
  border-radius: 3px;
  color: #e8c547;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: rotate(-6deg);
}

.triptyque {
  margin: 1.75rem 0;
}

.triptyque .seuil-texte {
  margin-bottom: 0.35rem;
}

/* ---------- Mes jeux : le duo, en deux répliques qui se répondent ---------- */
.duo {
  max-width: 44rem;
  margin: 1.5rem 0;
}

.duo-intro {
  margin: 0 0 0.6rem;
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: 1.25rem;
}

.duo-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem;
}

.duo-colonnes .duo-replique {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--filet);
  border-top: 3px solid var(--accent);
  border-radius: 3px;
  color: var(--encre-2);
  font-family: var(--f-titre);
  font-size: 1.125rem;
}

.duo-qui {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Les premiers codes : la console à deux lignes et le papier listing (couleurs d'époque) ---------- */
.dessin .lcd-texte {
  fill: #7cff9a;
  font-family: var(--f-mono);
  font-size: 10px;
}

.dessin .papier {
  fill: #fbfaf3;
  stroke: #b9b4a0;
  stroke-width: 1;
}

.dessin .papier-bande {
  fill: #dff0dc;
}

.dessin .papier-trou {
  fill: #e8e6dc;
  stroke: #b9b4a0;
  stroke-width: 1;
}

.dessin .papier-texte {
  fill: #2b2b2b;
  font-family: var(--f-mono);
  font-size: 11px;
}

/* ---------- Mes jeux : le tunnel de fret, et la chute ---------- */
.dessin .rail {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 10 4;
  vector-effect: non-scaling-stroke;
}

.dessin .tampon {
  fill: var(--fond);
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.dessin .lbl.tampon-texte {
  fill: var(--accent-fort);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.seuil--dernier {
  margin: 2.75rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
}

.seuil--dernier .seuil-texte--long {
  max-width: 44ch;
  margin-bottom: 1rem;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.5;
}

.seuil--dernier .seuil-erreur {
  margin: 0.4rem 0 0;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
}

.seuil--chute {
  margin: 2rem 0 0.5rem;
}

.seuil--chute .seuil-suite {
  max-width: 36rem;
}

/* ---------- Mes jeux : le statut de Cossacks, en clin d'œil ---------- */
.statut-jeu {
  display: inline-block;
  max-width: var(--mesure);
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.8rem;
  border: 2px solid var(--accent);
  border-radius: 4px;
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 0.875rem;
}

.statut-jeu-titre {
  margin-right: 0.5rem;
  padding: 0.05rem 0.4rem;
  border-radius: 2px;
  background: var(--accent);
  color: var(--fond);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Lot 3 : les univers, qui suivent le défilement (mode rétro seulement) ----------
   Chaque époque a sa teinte (--u), mêlée à petite dose au fond pour garder le contraste AA des textes, sa texture
   et, pour les écrans, sa police à chasse fixe. Le fond de la page prend la teinte de l'époque lue (univers.js). */
.voyage .epoque-helico { --u: #c98a3a; }
.voyage .epoque-pere { --u: #d9a400; }
.voyage .epoque-ecrans { --u: #2fd35c; }
.voyage .epoque-to8 { --u: #2b4bff; }
.voyage .epoque-electronique { --u: #2e9d50; }
.voyage .epoque-dos { --u: #000000; }
.voyage .epoque-centrales { --u: #3a8fd6; }
.voyage .epoque-bac { --u: #5f7fa8; }
.voyage .epoque-iut { --u: #d4a800; }
.voyage .epoque-adsl { --u: #4fb34f; }
.voyage .epoque-xiizeos { --u: #3d82d6; }
.voyage .epoque-jeux { --u: #d6339a; }
.voyage .epoque-bitcoin { --u: #e08a1a; }

[data-retro="on"] .voyage .epoque[data-univers]:not(.epoque-pont) {
  padding-top: 0;
  padding-bottom: 1.75rem;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--fond) 93%, var(--u));
}

/* les textures : le papier, l'acier, le phosphore, le BASIC, le circuit, l'écran noir, l'eau, le papier millimétré,
   le plan, le modem, le Web de 2005, l'arcade, la chaîne */
[data-retro="on"] .voyage .epoque-pere {
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--u) 7%, transparent) 0 2px, transparent 2px 16px);
}

[data-retro="on"] .voyage .epoque-ecrans,
[data-retro="on"] .voyage .epoque-dos {
  background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--u) 8%, transparent) 0 1px, transparent 1px 4px);
}

[data-retro="on"] .voyage .epoque-to8,
[data-retro="on"] .voyage .epoque-jeux {
  background-image:
    linear-gradient(color-mix(in srgb, var(--u) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--u) 6%, transparent) 1px, transparent 1px);
  background-size: 8px 8px;
}

[data-retro="on"] .voyage .epoque-electronique {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--u) 14%, transparent) 0 2px, transparent 2.5px);
  background-size: 28px 28px;
}

[data-retro="on"] .voyage .epoque-centrales {
  background-image: repeating-linear-gradient(170deg, color-mix(in srgb, var(--u) 6%, transparent) 0 1px, transparent 1px 18px);
}

[data-retro="on"] .voyage .epoque-bac,
[data-retro="on"] .voyage .epoque-iut {
  background-image:
    linear-gradient(color-mix(in srgb, var(--u) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--u) 9%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--u) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--u) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
}

[data-retro="on"] .voyage .epoque-xiizeos {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--u) 12%, transparent), transparent 60%);
}

[data-retro="on"] .voyage .epoque-bitcoin {
  background-image: radial-gradient(circle at 50% 50%, transparent 5px, color-mix(in srgb, var(--u) 7%, transparent) 5px 6px, transparent 6.5px);
  background-size: 22px 22px;
}

/* les écrans parlent en chasse fixe */
[data-retro="on"] .voyage .epoque-ecrans .epoque-titre,
[data-retro="on"] .voyage .epoque-to8 .epoque-titre,
[data-retro="on"] .voyage .epoque-dos .epoque-titre,
[data-retro="on"] .voyage .epoque-jeux .epoque-titre {
  font-family: var(--f-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* la sinusoïde qui ouvre chaque époque garde sa place, posée sur la teinte */
[data-retro="on"] .voyage .epoque[data-univers]:not(.epoque-pont)::before {
  margin-bottom: 1.1rem;
}


/* ---------- Les univers des pages intérieures, en mode rétro ---------- */
/* qui je suis : la frise, un fil vertical gradué le long de la page */
[data-retro="on"][data-page="qui-je-suis"] main {
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--accent) 40%, transparent)),
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--accent) 40%, transparent) 0 2px, transparent 2px 3rem);
  background-position:
    max(0.6rem, calc((100% - var(--cadre)) / 2 - 1.25rem)) 0,
    max(calc(0.6rem - 5px), calc((100% - var(--cadre)) / 2 - 1.25rem - 5px)) 0;
  background-repeat: no-repeat;
  background-size: 2px 100%, 12px 100%;
}

/* ce que je fais : le plan, un quadrillage d'architecte */
[data-retro="on"][data-page="ce-que-je-fais"] main {
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* le labo : l'établi, un panneau perforé où l'on accroche les outils */
[data-retro="on"][data-page="labos"] main {
  background-color: color-mix(in srgb, var(--fond) 95%, #b5835a);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--encre) 7%, transparent) 0 2px, transparent 2.5px);
  background-size: 22px 22px;
}

/* ma façon de voir : l'horizon, une aube douce en haut de la page */
[data-retro="on"][data-page="vision"] main {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--fond)) 0, var(--fond) 26rem);
}

/* ---------- Lot 4 : les démos, chargées à la demande ---------- */
.demo {
  max-width: 44rem;
  margin: 1.25rem 0;
  padding: 0.9rem 1rem 1rem;
  border: 1px dashed var(--accent);
  border-radius: 6px;
  background: var(--fond);
}

/* vide, la zone reste un fil d'un pixel : invisible, mais repérable par le chargeur quand elle approche de l'écran */
.demo:empty {
  min-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

.demo p {
  margin: 0 0 0.5rem;
}

.demo .demo-titre {
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

.demo .demo-consigne,
.demo .demo-etat {
  color: var(--encre-2);
  font-size: 0.9375rem;
}

.demo-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.demo-bouton {
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  cursor: pointer;
}

.demo-bouton[aria-pressed="true"] {
  background: var(--accent);
  color: var(--fond);
}

.demo-bouton:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.demo-sorties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  font-family: var(--f-mono);
  font-size: 0.875rem;
}

.demo-sortie {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.demo-lampe {
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--encre-3);
  border-radius: 50%;
  background: var(--surface);
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.75rem;
}

.demo-lampe.allumee {
  border-color: #b8860b;
  background: #ffd23f;
  box-shadow: 0 0 10px 2px rgba(255, 210, 63, 0.7);
  color: #1d1d1d;
}

.demo-voyants {
  display: flex;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.demo-lampe--grande {
  width: 2.6rem;
  height: 2.6rem;
}

.demo-tempo {
  width: min(100%, 22rem);
  height: 0.75rem;
  margin-bottom: 0.5rem;
  accent-color: var(--accent);
}

.table-verite {
  margin: 1rem 0 0;
  border-collapse: collapse;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  text-align: center;
}

.table-verite caption {
  margin-bottom: 0.35rem;
  color: var(--encre-3);
  text-align: left;
}

.table-verite th,
.table-verite td {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--filet);
  font-weight: 400;
}

.table-verite thead th {
  color: var(--encre);
}

/* l'invite du DOS et la ligne de commande d'AutoCAD : des écrans d'époque, couleurs fixes */
.demo-dos-ecran,
.demo-cad-journal {
  max-height: 14rem;
  overflow-y: auto;
  margin-bottom: 0.4rem;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  background: #0b0b0b;
  color: #c8c8c8;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  line-height: 1.45;
  white-space: pre;
}

.demo-cad-journal {
  max-height: 7rem;
  margin-top: 0.4rem;
  white-space: pre-wrap;
}

.demo-dos-ligne {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  background: #0b0b0b;
  color: #c8c8c8;
  font-family: var(--f-mono);
  font-size: 0.875rem;
}

.demo-dos-saisie {
  flex: 1;
  min-width: 6rem;
  border: 0;
  border-bottom: 1px solid #5a5a5a;
  background: transparent;
  color: #f0f0f0;
  font: inherit;
  text-transform: uppercase;
}

.demo-dos-saisie:focus-visible {
  outline: 2px solid #ffd23f;
  outline-offset: 2px;
}

.demo-cad-feuille {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: #000000;
}

.demo-cad-trait {
  fill: none;
  stroke: #ffd23f;
  stroke-width: 1;
}

/* la chasse aux crédits : seize octets, chacun avec son historique */
.demo-memoire {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.3rem;
  margin-bottom: 0.6rem;
  padding: 0.5rem;
  border-radius: 4px;
  background: #0f1113;
}

.demo-octet {
  display: grid;
  min-height: 2.75rem;
  padding: 0.25rem 0.1rem;
  border: 1px solid #2c3036;
  border-radius: 3px;
  background: #15181b;
  color: #c9d1c9;
  font-family: var(--f-mono);
  cursor: pointer;
}

.demo-octet:focus-visible {
  outline: 2px solid #ffd23f;
  outline-offset: 1px;
}

.demo-octet-valeur {
  font-size: 0.9375rem;
}

.demo-octet-passe {
  color: #8fa39a;
  font-size: 0.625rem;
}

.demo-octet.jackpot {
  border-color: #e8c547;
  background: #e8c547;
  color: #111111;
}

.demo-octet.jackpot .demo-octet-passe {
  color: #3a3000;
}

.demo .demo-verdict {
  min-height: 1.5em;
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 0.875rem;
}

/* le minage pour rire, et Pong */
.demo-choix {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
}

.demo-select {
  min-height: 2.5rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
  color: var(--encre);
  font: inherit;
}

.demo .demo-mono {
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.demo-chaine {
  margin: 0;
  padding-left: 1.4rem;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.demo-bouton:disabled {
  cursor: default;
  opacity: 0.55;
}

.demo-pong {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-bottom: 0.4rem;
  border-radius: 6px;
  background: #000000;
  touch-action: none;
}

.demo-pong:focus-visible {
  outline: 3px solid #ffd23f;
  outline-offset: 2px;
}

.dessin .pong-trait {
  fill: none;
  stroke: #e8e8e8;
  stroke-width: 4;
}

.dessin .pong-objet {
  fill: #e8e8e8;
}

.dessin .pong-score {
  fill: #e8e8e8;
  font-family: var(--f-mono);
  font-size: 28px;
}

/* ce que les démos éclairent dans les dessins : l'étape active du GRAFCET, les bobines sous tension */
.dessin .etape--active {
  fill: #ffd23f;
  stroke: #b8860b;
}

.dessin .sous-tension {
  fill: #ffd23f;
  stroke: #b8860b;
}

@media (prefers-reduced-motion: no-preference) {
  .demo-lampe,
  .dessin .etape,
  .dessin .bobine-km1,
  .dessin .bobine-km2,
  .dessin .bobine-km3 {
    transition: background-color 0.2s, fill 0.2s, box-shadow 0.2s;
  }
}

/* ---------- Le labo : « Mes technos », une courte liste ---------- */
.technos {
  max-width: var(--mesure);
  margin-top: 2rem;
  padding: 0.9rem 1.1rem 0.5rem;
  border: 1px solid var(--filet);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--fond);
}

.technos h3 {
  margin: 0 0 0.4rem;
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

.technos ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--encre-2);
}

.technos li {
  margin-bottom: 0.45rem;
}

/* ---------- Le duel de Supreme Commander 2 : sur téléphone, il défile dans son cadre, à taille lisible ---------- */
.defile-x {
  overflow-x: auto;
  padding-bottom: 0.4rem;
}

.defile-x:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.defile-x svg {
  min-width: 34rem;
}

/* ---------- Moins de mouvement : on arrive directement à l'état final ---------- */
@media (prefers-reduced-motion: reduce) {
  .ecran,
  .basic .l,
  .curseur,
  .voyage .epoque::before,
  .ronronnement,
  .fourier .f-1,
  .fourier .f-3,
  .fourier .f-5,
  .helico-scene .rotor-jouet,
  .propagation .noeud {
    animation: none;
  }
}

@media print {
  .retro,
  .voyage-tete .passer,
  .reglages,
  .avant > summary::before {
    display: none;
  }
}

/* ==========================================================================
   Lot 7 (07/11/2026) : la musique, le réseau coaxial, les mercis à leur place, « Pour aller plus loin »,
   la fin du voyage (les lois et Zakia, les lectures et les films, merci) et la scène après le générique.
   ========================================================================== */

/* ---------- La musique : sa teinte, et une portée en texture ---------- */
.voyage .epoque-musique { --u: #8a4fd6; }

[data-retro="on"] .voyage .epoque-musique {
  background-image: linear-gradient(180deg,
    transparent 0 20px, color-mix(in srgb, var(--u) 11%, transparent) 20px 21px,
    transparent 21px 28px, color-mix(in srgb, var(--u) 11%, transparent) 28px 29px,
    transparent 29px 36px, color-mix(in srgb, var(--u) 11%, transparent) 36px 37px,
    transparent 37px 44px, color-mix(in srgb, var(--u) 11%, transparent) 44px 45px,
    transparent 45px 52px, color-mix(in srgb, var(--u) 11%, transparent) 52px 53px,
    transparent 53px);
  background-size: 100% 96px;
}


/* l'invite du DOS et le disque qui avale les albums, côte à côte sur grand écran */
.mp3-scene {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem 2rem;
  align-items: center;
  max-width: 64rem;
  margin: 1.25rem 0;
}

.mp3-scene .dessin {
  max-width: none;
  margin: 0;
}

/* l'invite du DOS partage son nom de classe avec la boîte du prompt de l'étincelle : on la rend à l'écran noir */
.ecran-dos .invite {
  max-width: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  color: #ffffff;
}

/* un mot de Kléo dans une époque laisse respirer le paragraphe qui suit */
.voyage .conteur--dans {
  margin-bottom: 1rem;
}

/* ---------- Les dessins du lot 7 ---------- */
.dessin .touche-noire {
  fill: currentColor;
}

.dessin .coax {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  vector-effect: non-scaling-stroke;
}

.dessin .scotch {
  fill: none;
  stroke: var(--attente-trait);
  stroke-width: 6;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

.dessin .secteur {
  fill: #c0c0c0;
}

.dessin .secteur-libre {
  fill: none;
  stroke: #707070;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dessin .secteur-mauvais {
  fill: #c62828;
}

.dessin .secteur-b {
  fill: #ffffff;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
}

.dessin .secteur-txt {
  fill: #c0c0c0;
  font-family: var(--f-mono);
  font-size: 12px;
}

.dessin .secteur-txt--petit {
  font-size: 10px;
}

.dessin .brique {
  fill: color-mix(in srgb, var(--accent) 14%, var(--surface));
  stroke: currentColor;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.dessin .etiquette-mot {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.dessin .lbl--fort {
  fill: var(--encre);
}

/* ---------- La démo du bouchon : un seul câble, des postes, un bouchon qu'on retire ---------- */
.bouchon-bus {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 0.6rem;
  margin: 0.25rem 0 0.75rem;
  padding: 0 0 0.9rem;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.35rem) / 100% 4px no-repeat;
  color: var(--encre-2);
}

.bouchon-fin {
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--encre-3);
  border-radius: 3px;
  background: var(--surface);
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 0.75rem;
}

.bouchon-poste {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  font-family: var(--f-mono);
  font-size: 0.75rem;
}

.bouchon-ecran {
  display: block;
  width: 3.2rem;
  height: 2.2rem;
  border: 3px solid var(--encre-3);
  border-radius: 3px;
  background: #111111;
}

.bouchon-poste.allume .bouchon-ecran {
  background: #2fd35c;
  box-shadow: 0 0 10px 1px rgba(47, 211, 92, 0.55);
}

.bouchon-nom {
  color: var(--encre);
}

.demo-bouchon-coupe .bouchon-fin--droit {
  border-style: dashed;
  background: transparent;
  color: var(--rouge);
  font-weight: 700;
}

.bouchon-bouton {
  margin-bottom: 0.6rem;
}

@media (max-width: 30rem) {
  .bouchon-bus {
    gap: 0.6rem 0.35rem;
  }

  .bouchon-ecran {
    width: 2.3rem;
    height: 1.6rem;
  }

  .bouchon-poste,
  .bouchon-fin {
    font-size: 0.6875rem;
  }
}

.demo .bouchon-etat {
  color: var(--encre);
  font-size: 0.9375rem;
}

/* ---------- Les mercis du récit : un petit « merci » en marge, qui mène à la liste finale ---------- */
.merci-recit {
  position: relative;
  max-width: var(--mesure);
  margin: 0.5rem 0 1.1rem;
  color: var(--encre-2);
  font-family: var(--f-titre);
  font-size: 1.0625rem;
  font-style: italic;
}

.merci-marque {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0 0.4rem;
  border: 1px dashed var(--accent);
  border-radius: 3px;
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.06em;
  text-decoration: none;
  vertical-align: 0.1rem;
}

.merci-marque:hover,
.merci-marque:focus-visible {
  background: var(--surface);
  text-decoration: underline;
}

.merci-marque:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* sur grand écran, dans le voyage, le « merci » passe dans la marge, comme une note */
@media (min-width: 78rem) {
  .voyage .merci-recit .merci-marque {
    position: absolute;
    top: 0.2rem;
    right: 100%;
    margin-right: 0.9rem;
  }
}

/* ---------- Pour aller plus loin : les références, repliées en bas de chaque époque ---------- */
.plus-loin {
  max-width: var(--mesure);
  margin-top: 1.5rem;
}

.plus-loin ul {
  margin: 0.25rem 0 0.4rem;
  padding-left: 1.2rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.lien-discret {
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* ---------- La fin du voyage : les lois, les lectures et les films, merci ---------- */
.fin {
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}

.fin-intro,
.fin-suite {
  max-width: var(--mesure);
  color: var(--encre-2);
}

.lois {
  max-width: var(--mesure);
  margin: 1rem 0;
  padding-left: 1.6rem;
}

.lois li {
  margin: 0 0 0.7rem;
  padding-left: 0.25rem;
  line-height: 1.6;
}

.lois li::marker {
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-weight: 600;
}

.lois strong {
  color: var(--encre);
  font-family: var(--f-titre);
}

.fin-message {
  max-width: 36rem;
  margin: 1.75rem 0 0.5rem;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--attente-trait);
  border-radius: 3px;
  background: var(--attente-fond);
}

.fin-message p {
  margin: 0 0 0.5rem;
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.5;
}

.fin-message .seuil-signature {
  margin: 0;
  font-style: normal;
}

.lectures {
  max-width: 44rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.lecture {
  margin: 0 0 1.6rem;
}

.lecture-citation {
  margin: 0 0 0.35rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--filet);
}

.lecture-citation p {
  margin: 0;
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  font-style: italic;
  line-height: 1.55;
}

.lecture-coupe {
  color: var(--encre-3);
  font-style: normal;
}

.lecture-source {
  margin: 0;
  padding-left: 1rem;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
}

.lecture--films .seuil-texte {
  max-width: 40ch;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem);
}

.merci-liste {
  max-width: var(--mesure);
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.merci-liste li {
  margin: 0 0 0.45rem;
  padding-left: 1.1rem;
  font-family: var(--f-titre);
  font-size: 1.125rem;
  line-height: 1.5;
  text-indent: -1.1rem;
}

.merci-liste li::before {
  content: "✶ ";
  content: "✶ " / "";
  color: var(--accent);
}

.merci-liste li:target {
  border-radius: 3px;
  background: var(--attente-fond);
}

.conteur--merci {
  margin-top: 2rem;
}

.conteur--merci p {
  margin: 0 0 0.7rem;
}

.conteur--merci .conteur-titre {
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: 1.2rem;
  font-style: normal;
}

.merci-isa {
  margin: 0.5rem 0 0;
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: 1.25rem;
}

.seuil--merci {
  margin: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 0;
}

.seuil--merci .seuil-texte {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}

.voyage-suite {
  margin-top: 1.5rem;
}

/* ---------- La scène après le générique : un écran de fin de film ---------- */
.generique {
  margin-top: clamp(3rem, 2.5rem + 3vw, 5rem);
  padding: clamp(2.25rem, 1.5rem + 4vw, 4.5rem) clamp(1.25rem, 0.75rem + 3vw, 3rem);
  border-radius: 8px;
  background: #0d0d10;
  color: #e9e6df;
  text-align: center;
  view-timeline-name: --generique;
}

.generique p {
  margin-right: auto;
  margin-left: auto;
}

.generique-mention {
  margin: 0 0 1.75rem;
  color: #b4b0a6;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.generique-roles {
  margin: 0 auto 2.75rem;
  padding: 0;
  list-style: none;
  color: #d6d2c8;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  line-height: 2;
}

.generique-role {
  display: inline-block;
  min-width: 7.5rem;
  margin-right: 0.75rem;
  color: #b4b0a6;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-align: right;
  text-transform: uppercase;
}

@media (max-width: 30rem) {
  .generique-role {
    display: block;
    min-width: 0;
    margin: 0.5rem 0 0;
    text-align: center;
  }
}

.generique-fin {
  margin-bottom: 2.25rem;
  font-family: var(--f-titre);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  letter-spacing: 0.03em;
}

.generique-pause {
  color: #d6d2c8;
  font-style: italic;
}

.generique-attente {
  margin-bottom: 0.5rem;
  color: #d6d2c8;
  font-family: var(--f-titre);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  font-style: italic;
}

.generique-la {
  display: inline-block;
}

.generique-mot {
  margin-bottom: 2.25rem;
  color: #ffffff;
  font-family: var(--f-titre);
  font-size: clamp(2.2rem, 1.3rem + 4.5vw, 4.75rem);
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.generique-texte {
  max-width: 36rem;
  color: #e9e6df;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.generique a {
  color: #ffd479;
}

.generique a:focus-visible {
  outline: 2px solid #ffd479;
  outline-offset: 2px;
}

.generique .a-raconter {
  margin-top: 1.5rem;
  text-align: left;
}

/* l'apparition, douce, suit le défilement ; sans prise en charge, ou avec « moins de mouvement », tout est là d'emblée */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .generique-fin,
    .generique-attente,
    .generique-la,
    .generique-mot,
    .generique-texte {
      animation: generique-entree linear both;
      animation-timeline: --generique;
    }

    .generique-fin { animation-range: entry 30% cover 30%; }
    .generique-attente { animation-range: cover 24% cover 34%; }
    .generique-la { animation-range: cover 32% cover 40%; }
    .generique-mot { animation-name: generique-mot; animation-range: cover 38% cover 48%; }
    .generique-texte { animation-range: cover 44% cover 54%; }
  }
}

@keyframes generique-entree {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes generique-mot {
  from {
    opacity: 0;
    letter-spacing: 0.4em;
    filter: blur(4px);
  }

  to {
    opacity: 1;
    letter-spacing: 0.06em;
    filter: none;
  }
}

/* ---------- Les mots derrière un besoin, en tête du labo des seconds cerveaux ---------- */
.labo-mots {
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  font-style: italic;
  line-height: 1.5;
}

/* ---------- Lot 7, suite : la courbe de l'année dans la scène après le générique ---------- */
.generique .courbe-apres {
  max-width: 38rem;
  margin: 0 auto 1rem;
  color: #e9e6df;
}

.generique .courbe-apres figcaption {
  color: #b4b0a6;
  font-size: 0.8125rem;
  text-align: center;
}

.dessin .courbe-grille {
  fill: none;
  stroke: #e9e6df;
  stroke-opacity: 0.18;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dessin .courbe-trait {
  fill: none;
  stroke: #ffd479;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.dessin .courbe-suite {
  fill: none;
  stroke: #ffd479;
  stroke-width: 3;
  stroke-dasharray: 6 6;
  vector-effect: non-scaling-stroke;
}

.dessin .courbe-point {
  fill: #ffd479;
}

.dessin .courbe-txt {
  fill: #d6d2c8;
  font-family: var(--f-mono);
  font-size: 12px;
}

.dessin .courbe-txt--suite {
  font-style: italic;
}

.generique-courbe-phrase {
  max-width: 34rem;
  margin-bottom: 2.25rem;
  color: #e9e6df;
  font-family: var(--f-titre);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  font-style: italic;
}

/* le trait se dessine au défilement ; sans prise en charge, ou avec « moins de mouvement », il est entier */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .generique .courbe-trait {
      stroke-dasharray: 1;
      animation: courbe-trace linear both;
      animation-range: entry 40% cover 32%;
      animation-timeline: --generique;
    }

    .generique .courbe-suite,
    .generique-courbe-phrase {
      animation: generique-entree linear both;
      animation-range: cover 28% cover 36%;
      animation-timeline: --generique;
    }
  }
}

@keyframes courbe-trace {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- Les briques auxquelles je reviens toujours (Ma façon de voir) ---------- */
.barres {
  max-width: 44rem;
  margin: 1.75rem 0 0;
}

.barres-titre {
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: 1.25rem;
  font-weight: 600;
}

.barres-phrase {
  margin: 0.35rem 0 1rem;
  color: var(--encre-2);
}

.barres-liste {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barres-liste li {
  display: grid;
  grid-template-columns: minmax(12rem, 42%) 1fr 2.25rem;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.9375rem;
}

.barres-barre {
  display: block;
  height: 0.75rem;
  border-radius: 0.375rem;
  background: var(--accent);
}

.barres-valeur {
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  text-align: right;
}

.barres-barre.part-5 { width: 5%; }
.barres-barre.part-10 { width: 10%; }
.barres-barre.part-15 { width: 15%; }
.barres-barre.part-25 { width: 25%; }
.barres-barre.part-35 { width: 35%; }
.barres-barre.part-40 { width: 40%; }
.barres-barre.part-45 { width: 45%; }
.barres-barre.part-50 { width: 50%; }
.barres-barre.part-55 { width: 55%; }
.barres-barre.part-100 { width: 100%; }

.barres-legende {
  margin-top: 0.75rem;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
}

@media (max-width: 40rem) {
  .barres-liste li {
    grid-template-columns: 1fr 2.25rem;
    gap: 0.2rem 0.75rem;
  }

  .barres-sujet {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Passe 7, première étape (07/11/2026) : le thème sobre montre tout le voyage, avec son propre habillage,
   et les premiers univers de section. Ces règles ne valent que pour le thème Aujourd'hui.
   ========================================================================== */

/* entre deux époques, un filet net au lieu de la sinusoïde du courant */
[data-theme="aujourdhui"] .voyage .epoque::before {
  height: 1px;
  margin-bottom: 1.5rem;
  background: var(--filet);
  animation: none;
}

/* ---------- Les jeux : l'univers gamer, en pixels et en néon, dessiné ici, sans rien reprendre d'aucun jeu ---------- */
[data-theme="aujourdhui"] .voyage .epoque-jeux {
  padding-bottom: 1.75rem;
  border: 2px solid color-mix(in srgb, #d6339a 55%, var(--fond));
  box-shadow: 6px 6px 0 color-mix(in srgb, #19b8b8 45%, transparent);
  background-image:
    linear-gradient(color-mix(in srgb, #d6339a 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #19b8b8 5%, transparent) 1px, transparent 1px);
  background-size: 10px 10px;
}

[data-theme="aujourdhui"] .voyage .epoque-jeux::before {
  background: none;
}

[data-theme="aujourdhui"] .voyage .epoque-jeux .epoque-titre {
  font-family: var(--f-mono);
  font-weight: 600;
  letter-spacing: 0.01em;
}

[data-theme="aujourdhui"] .voyage .epoque-jeux .epoque-titre::after {
  content: "";
  display: block;
  width: 7.5rem;
  height: 6px;
  margin-top: 0.5rem;
  background: repeating-linear-gradient(90deg, #d6339a 0 6px, transparent 6px 9px, #19b8b8 9px 15px, transparent 15px 18px);
}

/* ---------- Les méthodes : un univers pro, net (Ma façon de voir, « Comment j'avance ») ---------- */
[data-theme="aujourdhui"] #avancer {
  padding-top: 1.25rem;
  background: linear-gradient(var(--encre), var(--encre)) var(--marge) 0 / calc(100% - 2 * var(--marge)) 3px no-repeat;
}

/* ---------- Les anecdotes : un carnet d'atelier, papier ligné et marge rouge ---------- */
[data-theme="aujourdhui"] .deplier--anecdote {
  padding-left: 2.6rem;
  background-image:
    linear-gradient(90deg, transparent 1.95rem, color-mix(in srgb, #c62828 40%, transparent) 1.95rem 2.05rem, transparent 2.05rem),
    repeating-linear-gradient(180deg, transparent 0 1.7rem, color-mix(in srgb, var(--attente-trait) 16%, transparent) 1.7rem calc(1.7rem + 1px));
}

/* ---------- Les rêves et les idées d'un monde positif : un univers poétique, un ciel étoilé, tout en douceur ----------
   Une ambiance seulement : aucune image, aucun personnage ni aucun dessin d'une œuvre. */
[data-theme="aujourdhui"] .voyage .seuil--ouverture,
[data-theme="aujourdhui"] .voyage .seuil--cloture,
[data-theme="aujourdhui"] .voyage .fin-lectures,
[data-theme="aujourdhui"] #demain {
  padding-top: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  padding-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  border-radius: 10px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--encre) 34%, transparent) 0 1px, transparent 1.6px) 0 0 / 53px 41px,
    radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent) 0 1.2px, transparent 1.8px) 19px 23px / 89px 67px,
    linear-gradient(180deg, color-mix(in srgb, var(--fond) 86%, #7b6fd6), color-mix(in srgb, var(--fond) 93%, #f2b38c));
}

[data-theme="aujourdhui"] .voyage .seuil--cloture {
  padding-inline: var(--marge);
}

/* ==========================================================================
   Passe 7, lot 1 (07/11/2026) : le pupitre des thèmes. Une croix de flèches et quatre diodes de pupitre d'époque,
   une par thème complet : Aujourd'hui, Rétro, Plan, Ville. Le pupitre garde son allure dans tous les thèmes.
   ========================================================================== */
/* une bande de pupitre, en haut de chaque page, au-dessus de l'en-tête : elle ne dérange ni la marque ni la navigation */
.pupitre-bande {
  --pupitre-texte: #e6e3da;
  border-bottom: 1px solid #0c0d0f;
  background: #24272c linear-gradient(#2a2d32, #1d2024);
  color: var(--pupitre-texte);
}

.pupitre-bande[hidden] {
  display: none;
}

.pupitre-cadre {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding-block: 0.3rem;
}

.pupitre-titre {
  margin: 0;
  color: #b9b5ab;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pupitre {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.25rem 0.55rem 0.2rem 0.4rem;
  border: 1px solid #3d4249;
  border-radius: 5px;
  background: #24272c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* la croix : quatre flèches autour d'un pivot */
.pupitre-croix {
  display: grid;
  grid-template-columns: repeat(3, 0.95rem);
  grid-template-rows: repeat(3, 0.95rem);
  gap: 1px;
}

.pupitre-fleche {
  position: relative;
  width: 0.95rem;
  height: 0.95rem;
  padding: 0;
  border: 1px solid #50565e;
  border-radius: 2px;
  background: #33373d;
  cursor: pointer;
}

.pupitre-fleche::before {
  content: "";
  position: absolute;
  inset: 0.2rem;
  background: var(--pupitre-texte);
}

.pupitre-fleche--haut { grid-area: 1 / 2; }
.pupitre-fleche--gauche { grid-area: 2 / 1; }
.pupitre-fleche--droite { grid-area: 2 / 3; }
.pupitre-fleche--bas { grid-area: 3 / 2; }

.pupitre-fleche--haut::before { clip-path: polygon(50% 10%, 100% 90%, 0 90%); }
.pupitre-fleche--bas::before { clip-path: polygon(0 10%, 100% 10%, 50% 90%); }
.pupitre-fleche--gauche::before { clip-path: polygon(10% 50%, 90% 0, 90% 100%); }
.pupitre-fleche--droite::before { clip-path: polygon(10% 0, 90% 50%, 10% 100%); }

.pupitre-fleche:hover {
  background: #444a52;
}

.pupitre-fleche:active {
  transform: translateY(1px);
}

.pupitre-pivot {
  grid-area: 2 / 2;
  place-self: center;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #50565e;
}

/* les diodes : un vrai groupe de boutons radio, sans sa pastille d'origine */
.pupitre-diodes {
  display: flex;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.pupitre-choix {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  min-width: 2.4rem;
  cursor: pointer;
}

.pupitre-choix input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.diode {
  --diode: #3fbf7f;
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid #15171a;
  border-radius: 50%;
  background: color-mix(in srgb, var(--diode) 22%, #1b1d21);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.diode--retro { --diode: #ffb020; }
.diode--plan { --diode: #4aa3ff; }
.diode--ville { --diode: #ff7a3d; }

.pupitre-choix input:checked + .diode {
  background: radial-gradient(circle at 35% 35%, #ffffff 0 12%, var(--diode) 45%);
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--diode) 70%, transparent);
}

.pupitre-choix input:focus-visible + .diode {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.pupitre-nom {
  color: #c9c5bc;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.pupitre-choix input:checked ~ .pupitre-nom {
  color: #ffffff;
}

@media (prefers-reduced-motion: no-preference) {
  .diode {
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
  }
}

/* sur un téléphone, la bande ne garde que le pupitre */
@media (max-width: 29.99rem) {
  .pupitre-titre {
    display: none;
  }

  .pupitre-cadre {
    justify-content: center;
  }
}

/* la cote de lecture n'appartient qu'au plan */
:root:not([data-theme="plan"]) .cote {
  display: none;
}

/* ==========================================================================
   Passe 7, lot 2 (07/11/2026) : l'univers de chaque page, dans le thème Aujourd'hui (sobre).
   Chaque page change le « papier » de son haut de page (la trame, qui s'efface en descendant, socle.css) selon ce
   qu'elle raconte. Le texte reste sur le fond du site : les contrastes ne bougent pas. Le rétro garde ses propres
   univers de page ; Plan et Ville ont les leurs.
   ========================================================================== */

/* l'accueil : le site qui grandit, en cernes d'arbre, depuis le coin de la page */
[data-theme="aujourdhui"][data-page="index"] {
  --trame-hauteur: 44rem;
  --trame: repeating-radial-gradient(circle at 92% -6rem, transparent 0 2.4rem,
    color-mix(in srgb, var(--accent) 16%, transparent) 2.4rem calc(2.4rem + 1px));
}

/* qui je suis : la frise, une règle graduée en haut, puis un fil gradué qui descend le long de la page */
[data-theme="aujourdhui"][data-page="qui-je-suis"] {
  --trame-hauteur: 30rem;
  --trame:
    linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 22%, transparent)) 0 4.5rem / 100% 1px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px) 0 3.6rem / 7.5rem 1.8rem repeat-x,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px) 0 4rem / 1.5rem 1rem repeat-x;
}

[data-theme="aujourdhui"][data-page="qui-je-suis"] main {
  background-image:
    linear-gradient(var(--filet), var(--filet)),
    repeating-linear-gradient(to bottom, var(--filet) 0 1px, transparent 1px 3rem);
  background-position:
    max(0.6rem, calc((100% - var(--cadre)) / 2 - 1.25rem)) 0,
    max(calc(0.6rem - 4px), calc((100% - var(--cadre)) / 2 - 1.25rem - 4px)) 0;
  background-repeat: no-repeat;
  background-size: 1px 100%, 9px 100%;
}

/* ce que je fais : un plan d'architecte, le quadrillage fin et ses grands carreaux */
[data-theme="aujourdhui"][data-page="ce-que-je-fais"] {
  --trame:
    linear-gradient(color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1px) 0 0 / 6rem 6rem,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1px) 0 0 / 6rem 6rem,
    linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px) 0 0 / 1.2rem 1.2rem,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px) 0 0 / 1.2rem 1.2rem;
}

/* le labo : l'établi, un panneau perforé sur un bois clair, où l'on accroche les outils */
[data-theme="aujourdhui"][data-page="labos"] {
  --trame:
    radial-gradient(circle, color-mix(in srgb, var(--encre) 16%, transparent) 0 2.5px, transparent 3px) 0 0 / 1.6rem 1.6rem,
    linear-gradient(color-mix(in srgb, #b5835a 12%, transparent), color-mix(in srgb, #b5835a 12%, transparent));
}

/* ma façon de voir : l'aube, un ciel qui s'éclaire au-dessus d'une ligne d'horizon */
[data-theme="aujourdhui"][data-page="vision"] {
  --trame-hauteur: 32rem;
  --trame:
    linear-gradient(color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent) 28%, transparent)) 0 22rem / 100% 1px no-repeat,
    radial-gradient(ellipse 60% 70% at 70% 22rem, color-mix(in srgb, #f2b38c 30%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, #7b6fd6 12%, transparent), color-mix(in srgb, #f2b38c 14%, transparent) 22rem, transparent 22rem);
}

/* les mentions : un registre, ses lignes et sa marge */
[data-theme="aujourdhui"][data-page="mentions"] {
  --trame-hauteur: 28rem;
  --trame:
    linear-gradient(90deg, transparent calc((100% - var(--cadre)) / 2 + 0.5rem), color-mix(in srgb, #c62828 30%, transparent) calc((100% - var(--cadre)) / 2 + 0.5rem) calc((100% - var(--cadre)) / 2 + 0.5rem + 1px), transparent 0),
    repeating-linear-gradient(180deg, transparent 0 1.8rem, color-mix(in srgb, var(--accent) 13%, transparent) 1.8rem calc(1.8rem + 1px));
}

/* ==========================================================================
   « Tu me connais ? » (07/11/2026) : quatre cartes, chacune avec un bouton qui ouvre un e-mail déjà prêt.
   Aucun formulaire. Les boutons sont de vrais liens : ils se prennent au clavier.
   ========================================================================== */
.connais-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  max-width: 64rem;
  margin: 1.5rem 0 1rem;
  padding: 0;
  list-style: none;
}

.connais-carte {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--filet);
  border-top: 4px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
}

.connais-carte p {
  margin: 0 0 0.6rem;
  color: var(--encre-2);
  font-size: 1rem;
  line-height: 1.55;
}

.connais-carte .connais-titre {
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}

.connais-carte--priorite {
  border-top-color: var(--rouge);
}

.connais-carte .connais-action {
  margin: auto 0 0;
  padding-top: 0.5rem;
}

.connais-bouton {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  background: var(--fond);
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  line-height: 1.35;
  text-decoration: none;
}

.connais-bouton::after {
  content: "\00a0✉";
  content: "\00a0✉" / "";
}

.connais-bouton:hover {
  background: var(--accent);
  color: var(--fond);
}

.connais-bouton:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.connais-carte--priorite .connais-bouton {
  border-color: var(--rouge);
  color: var(--rouge);
}

.connais-carte--priorite .connais-bouton:hover {
  background: var(--rouge);
  color: var(--fond);
}

.connais-adresse {
  max-width: var(--mesure);
  color: var(--encre-3);
  font-size: 0.9375rem;
}

.merci-connais {
  margin: 0.25rem 0 1rem;
  font-family: var(--f-mono);
  font-size: 0.9375rem;
}

.pied-connais {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
}

/* ---------- Passe 8 (07/11/2026) : les livres, une longue liste, en texte de lecture plutôt qu'en grande citation ---------- */
.lecture--livres .seuil-texte {
  max-width: 46rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

.lecture--livres cite {
  font-style: italic;
}

/* ---------- Passe 8 (07/11/2026) : le laboratoire de mes agents, et la suite de « Pourquoi un prénom ? » ---------- */
.labo-sous-titre {
  max-width: var(--mesure);
  margin: 1.75rem 0 0.75rem;
  font-family: var(--f-titre);
  font-size: 1.25rem;
  font-weight: 600;
}

.lecons {
  max-width: var(--mesure);
  margin: 0.5rem 0 1.25rem;
}

.lecons .deplier {
  margin: 0.45rem 0;
}

.lecons .deplier > summary {
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  font-weight: 600;
}

.prenom-suite {
  max-width: var(--mesure);
  margin-top: 1rem;
  color: var(--encre-2);
}

/* ---------- Passe 8 (07/11/2026) : les chapitres audio, et la mention de la voix de synthèse ---------- */
.audio-chapitre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
}

.audio-mention {
  margin: 0;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* ==========================================================================
   Passe 8 (07/11/2026) : la page « Mes briques ». Une carte par brique : le besoin, ce qu'elle fait, ce qu'elle
   m'a appris ; le détail se déplie. Les thèmes du pupitre l'habillent chacun à sa manière (habillages/).
   ========================================================================== */
.briques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.1rem 1.4rem;
  max-width: 66rem;
  margin: 1.25rem 0 0;
}

.brique {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid var(--filet);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
}

.brique > h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1875rem;
  line-height: 1.3;
}

.brique-trois {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}

.brique-trois > div {
  margin: 0;
}

.brique-trois dt {
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brique-trois dd {
  margin: 0.1rem 0 0;
  color: var(--encre-2);
  font-size: 1rem;
  line-height: 1.55;
}

.brique .deplier {
  margin: 0.85rem 0 0;
}

.brique .deplier > p,
.brique-liste {
  font-size: 1rem;
}

.brique-liste {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.1rem;
}

.brique-liste li {
  margin-bottom: 0.45rem;
}

/* la passerelle : une seule phrase, mise en avant, sans les trois lignes */
.brique--phare {
  grid-column: 1 / -1;
  border-top-color: var(--rouge);
}

.brique-phrase {
  max-width: 44rem;
  margin: 0;
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.45;
}

.brique-chantiers {
  margin-top: 1.25rem;
  color: var(--encre-2);
}

.lignees-titre {
  margin: 1.75rem 0 0.6rem;
}

.lignees {
  max-width: var(--mesure);
  margin: 0;
  padding-left: 1.2rem;
}

.lignees li {
  margin-bottom: 0.55rem;
  line-height: 1.55;
}

/* ==========================================================================
   Passe 9 (07/11/2026, soir) : la finition. L'étincelle expliquée dès le premier écran, le Collectif prénom par
   prénom, les racines des frises, les cartes longues de 2026 ; chaque thème du pupitre les habille (habillages/).
   ========================================================================== */

/* ---------- L'étincelle : la phrase de Seeb d'abord, en grand ; puis l'exemple, qui mène au prompt ---------- */
.etincelle-explique {
  max-width: var(--mesure);
  margin: 0 0 1.4rem;
}

.etincelle-explique p {
  margin: 0 0 0.85rem;
  color: var(--encre-2);
}

.etincelle-explique .etincelle-cherche {
  position: relative;
  margin: 0 0 1.1rem;
  padding-left: 1.05em;
  color: var(--accent-fort);
  font-family: var(--f-titre);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 600;
  line-height: 1.2;
}

/* l'étincelle elle-même : un losange d'accent, qui rayonne */
.etincelle-cherche::before {
  content: "";
  position: absolute;
  top: 0.36em;
  left: 0.1em;
  width: 0.42em;
  height: 0.42em;
  background: var(--accent);
  box-shadow: 0 0 0 0.16em color-mix(in srgb, var(--accent) 22%, transparent);
  transform: rotate(45deg);
}

.etincelle-explique .etincelle-exemple {
  margin: 1.2rem 0 0;
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.etincelle-exemple::after {
  content: "\00a0↓";
  content: "\00a0↓" / "";
}

/* ---------- Le Collectif, prénom par prénom : un groupe par métier, une ligne par agent ---------- */
.collectif {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.collectif-titre {
  margin: 0 0 0.4rem;
}

.collectif-intro {
  max-width: var(--mesure);
  margin: 0 0 1.25rem;
  color: var(--encre-2);
}

/* en colonnes : les groupes n'ont pas la même taille, ils s'empilent sans trou */
.collectif-groupes {
  max-width: 66rem;
  column-gap: 1.4rem;
  columns: 3 18rem;
}

.collectif-groupe {
  margin: 0 0 1.1rem;
  padding: 0.9rem 1.1rem 0.75rem;
  border: 1px solid var(--filet);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
  break-inside: avoid;
}

.collectif-groupe > h4 {
  margin: 0 0 0.5rem;
  color: var(--accent-fort);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.collectif-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.collectif-liste li {
  margin: 0;
  padding: 0.45rem 0;
  border-top: 1px solid var(--filet);
  color: var(--encre-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.collectif-liste li:first-child {
  border-top: 0;
}

.collectif-nom {
  color: var(--encre);
  font-weight: 600;
}

/* dans la carte du Collectif : le renvoi vers les prénoms, en bas de la carte */
.brique-lien {
  margin: auto 0 0;
  padding-top: 0.85rem;
  font-family: var(--f-mono);
  font-size: 0.875rem;
}

.brique-lien a::after {
  content: "\00a0↓";
  content: "\00a0↓" / "";
}

/* ---------- Les racines des frises : un losange creux, et le trait en pointillé, avant 2026 ---------- */
.frise-liste .frise-racine::before,
.frise-puce--racine {
  border-color: var(--encre-3);
  border-radius: 2px;
  background: var(--fond);
  transform: rotate(45deg) scale(0.85);
}

.frise-liste .frise-racine::before {
  z-index: 1;
}

.frise-liste .frise-racine::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  margin-top: -2px;
  background: repeating-linear-gradient(90deg, var(--fond) 0 5px, transparent 5px 10px);
}

/* en rétro, le trait est une sinusoïde plus haute : le pointillé la couvre entière */
[data-retro="on"] .frise-liste .frise-racine::after {
  height: 14px;
  margin-top: -7px;
}

.frise-liste .frise-racine .frise-quand {
  color: var(--encre-2);
}

/* ---------- Les cartes longues de 2026 : sur deux colonnes quand il y en a quatre, pour une ligne lisible ---------- */
.suite-epoques {
  container-type: inline-size;
}

@container (min-width: 66.6rem) {
  .suite-epoques .suite-large,
  .suite-epoques .suite-aujourdhui {
    grid-column: span 2;
  }
}

/* ---------- « Comment ça marche, en détail » : les dessins pédagogiques des labos (08/11/2026) ----------
   Un dépliable de plus, au bout de trois labos : un schéma, puis l'explication en prose. À l'ouverture, le schéma se
   construit une fois, étape par étape, sans boucle : apparition (opacité, petite translation) et tracé des flèches
   (stroke-dashoffset). Rien ne suit le défilement. Avec « moins de mouvement », il est là d'emblée, entier. */
.en-detail .dessin {
  max-width: 27rem;
  margin: 0.9rem 0 1.25rem;
}

.dessin .sd-boite,
.dessin .sd-cadre {
  fill: var(--surface);
  stroke: currentColor;
  stroke-width: 1.4;
}

.dessin .sd-cadre {
  fill: color-mix(in srgb, var(--accent) 6%, var(--surface));
  stroke: var(--accent);
}

.dessin .sd-boite--forte {
  fill: color-mix(in srgb, var(--accent) 14%, var(--surface));
  stroke: var(--accent);
}

.dessin .sd-lien,
.dessin .sd-fleche,
.dessin .sd-retour {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.dessin .sd-fleche {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dessin .sd-retour {
  stroke: var(--accent);
  stroke-dasharray: 4 4;
}

.dessin .sd-fleche--acc {
  stroke: var(--accent);
}

.dessin .sd-note {
  fill: var(--accent);
}

.dessin .sd-t {
  fill: var(--encre);
  font-family: var(--f-mono);
  font-size: 14px;
}

.dessin .sd-t--serre {
  font-size: 13px;
}

.dessin .sd-p {
  fill: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 12px;
}

.en-detail .a-retenir {
  margin-top: 1rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--filet);
}

.en-detail .a-retenir strong {
  color: var(--accent-fort);
}

/* l'ouverture construit le schéma : chaque étape apparaît, chaque flèche se trace, dans l'ordre de la lecture */
@media (prefers-reduced-motion: no-preference) {
  .en-detail[open] .sd-e {
    animation: sd-entre 0.5s ease-out both;
  }

  .en-detail[open] .sd-lien {
    stroke-dasharray: 1;
    animation: sd-trace 0.4s ease-out both;
  }

  .en-detail[open] .sd-a1 { animation-delay: 0.05s; }
  .en-detail[open] .sd-a2 { animation-delay: 0.3s; }
  .en-detail[open] .sd-a3 { animation-delay: 0.55s; }
  .en-detail[open] .sd-a4 { animation-delay: 0.8s; }
  .en-detail[open] .sd-a5 { animation-delay: 1.05s; }
  .en-detail[open] .sd-a6 { animation-delay: 1.3s; }
  .en-detail[open] .sd-a7 { animation-delay: 1.55s; }
  .en-detail[open] .sd-a8 { animation-delay: 1.8s; }
  .en-detail[open] .sd-a9 { animation-delay: 2.05s; }
}

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

@keyframes sd-trace {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   Éditeur et vues débutant / hardcore (08/11/2026)
   Une étincelle se lit en deux vues : « Débutant », le texte tel qu'il était, et « Hardcore », un extrait de prompt de
   haut niveau, dans un cadre façon éditeur de code. Sans script et sans ressource d'un autre site : deux boutons radio
   et :has() font les onglets (comme les pastilles du jeu TO8) ; les couleurs du code sont des classes posées dans le
   HTML. Au clavier : Tab atteint le choix, les flèches changent de vue. Sans :has(), la vue débutant reste seule.
   ========================================================================== */
.vues {
  max-width: 44rem;
  margin: 0 0 1rem;
}

.vues--etincelle {
  margin: 1.9rem 0 0;
}

.vues-choix {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}

.vue-onglet {
  position: relative;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  line-height: 1.4;
  cursor: pointer;
}

.vue-onglet input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.vue-onglet:hover {
  border-color: var(--encre-3);
  color: var(--encre);
}

.vue-onglet:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent-fort);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.vue-onglet:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.vue--hardcore {
  display: none;
}

.vues:has(.vue-choix--hardcore:checked) > .vue--hardcore {
  display: block;
}

.vues:has(.vue-choix--hardcore:checked) > .vue--debutant {
  display: none;
}

/* dans les labos, le cadre « Mon étincelle » vient juste sous les onglets */
.vue > .etincelle:first-child {
  margin-top: 1.1rem;
}

/* ---------- Le cadre façon éditeur : une barre, des numéros de ligne, une police à chasse fixe ---------- */
.prompt-ed {
  max-width: 44rem;
  margin: 0;
}

.prompt-cadre {
  overflow: hidden;
  border: 1px solid var(--filet);
  border-radius: 8px;
  background: var(--fond);
}

.prompt-barre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.45rem 0.9rem;
  border-bottom: 1px solid var(--filet);
  background: var(--surface);
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* les trois points de la fenêtre : un décor */
.prompt-points {
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  margin-right: 1.9rem;
  border-radius: 50%;
  background: #ec6a5e;
  box-shadow: 0.95rem 0 0 #f4bf4f, 1.9rem 0 0 #61c554;
}

.prompt-code {
  display: block;
  padding: 0.75rem 0.9rem 0.85rem 0;
  counter-reset: ligne;
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.prompt-code .l {
  position: relative;
  display: block;
  min-height: 1.6em;
  padding-left: 3.6em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  counter-increment: ligne;
}

/* les numéros de ligne : dessinés par la feuille de style, ni copiés ni lus (texte de remplacement vide) */
.prompt-code .l::before {
  content: counter(ligne);
  content: counter(ligne) / "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2.7em;
  padding-right: 0.6em;
  border-right: 1px solid var(--filet);
  color: var(--encre-3);
  text-align: right;
  user-select: none;
}

/* les couleurs du code : balises, clés, commentaires */
.prompt-code .c-bal {
  color: var(--accent-fort);
}

.prompt-code .c-cle {
  color: var(--accent);
}

.prompt-code .c-com {
  color: var(--encre-3);
  font-style: italic;
}

.prompt-note {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.8rem;
  border: 1px dashed var(--filet);
  border-radius: 4px;
  color: var(--encre-2);
  font-size: 0.875rem;
}

@media print {
  .vues-choix {
    display: none;
  }

  .vue--hardcore {
    display: block;
  }
}

/* ===== Pupitre : le thème « plan » (variante A), sous sa portée ===== */
/* Variante A « Plan d'architecte » : papier millimétré, cotes, cartouche ; en sombre, le plan bleu. */
[data-theme="plan"] {
  --fond: #f4f6f5;
  --surface: #e6ebe9;
  --filet: #c3cdca;
  --encre: #13202a;
  --encre-2: #3a4851;
  --encre-3: #4f5d66;
  --accent: #1b645a;
  --accent-fort: #0f4840;
  --rouge: #a3221b;
  --ambre: #7a5200;
  --attente-fond: #fff3c4;
  --attente-trait: #7a5200;
  --grille: #e1e7e5;
  --grille-forte: #cfd8d5;
  --trame:
    linear-gradient(var(--grille-forte) 1px, transparent 1px) 0 0 / 7.5rem 7.5rem,
    linear-gradient(90deg, var(--grille-forte) 1px, transparent 1px) 0 0 / 7.5rem 7.5rem,
    linear-gradient(var(--grille) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    linear-gradient(90deg, var(--grille) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  [data-theme="plan"] {
    --fond: #10243a;
    --surface: #163049;
    --filet: #2f4d6b;
    --encre: #eaf1f6;
    --encre-2: #c3d1dd;
    --encre-3: #a8bacb;
    --accent: #80d5c7;
    --accent-fort: #b4e7de;
    --rouge: #ff9f95;
    --ambre: #f3cb6c;
    --attente-fond: #2b2c25;
    --attente-trait: #f3cb6c;
    --grille: #162d46;
    --grille-forte: #1f3b5a;
    color-scheme: dark;
  }
}

/* ==========================================================================
   Variante A « Plan d'architecte » : la plus sobre.
   Le papier millimétré en haut de page ; sous chaque titre, une cote mesure la page
   (son nombre de mots et son temps de lecture, comptés à la construction) ;
   le parcours porte des repères de niveau ; le cartouche ferme chaque folio.
   ========================================================================== */
[data-theme="plan"] {
  --labo-libelle: "Fiche ";
}

/* la cote de lecture : une ligne de cote, ses lignes d'attache et ses traits obliques */
[data-theme="plan"] .cote {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: var(--mesure);
  margin: -0.35rem 0 1.4rem;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

[data-theme="plan"] .cote::before,
[data-theme="plan"] .cote::after {
  content: "";
  flex: 1 1 0;
  min-width: 1.5rem;
  height: 0.8rem;
}

[data-theme="plan"] .cote::before {
  border-left: 1px solid currentColor;
  background:
    linear-gradient(135deg, transparent calc(50% - 0.7px), currentColor calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px)) 0 50% / 0.7rem 0.7rem no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat;
}

[data-theme="plan"] .cote::after {
  border-right: 1px solid currentColor;
  background:
    linear-gradient(135deg, transparent calc(50% - 0.7px), currentColor calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px)) 100% 50% / 0.7rem 0.7rem no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat;
}

[data-theme="plan"] .cote span {
  flex: none;
  max-width: calc(100% - 4.5rem);
  text-align: center;
}

[data-theme="plan"] .accueil .cote {
  max-width: 34rem;
}

@media (max-width: 30rem) {
  [data-theme="plan"] .cote {
    gap: 0.45rem;
    font-size: 0.75rem;
    letter-spacing: 0;
  }

  [data-theme="plan"] .cote::before,
[data-theme="plan"] .cote::after {
    min-width: 1.25rem;
  }
}

/* le parcours : chaque date porte un repère de niveau, comme sur une coupe */
[data-theme="plan"] .jalon-date::before {
  content: "";
  display: inline-block;
  width: 0.65rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  vertical-align: 0.05em;
}

@media (min-width: 48rem) {
  [data-theme="plan"] .jalon-date {
    padding-bottom: 0.2rem;
    background: linear-gradient(var(--filet), var(--filet)) 100% 100% / 6.5rem 1px no-repeat;
  }
}

/* l'étincelle : une note de plan, cadrée, avec son étiquette */
[data-theme="plan"] .etincelle {
  border-color: var(--encre-3);
  background: var(--fond);
}

/* l'accueil, dès le premier écran : le portrait coté comme une planche, et son cartouche de tête */
[data-theme="plan"] .portrait picture {
  position: relative;
}

[data-theme="plan"] .portrait picture::before,
[data-theme="plan"] .portrait picture::after {
  position: absolute;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  line-height: 1;
}

/* la cote de largeur, au-dessus de la photo */
[data-theme="plan"] .portrait picture::before {
  content: "L";
  content: "L" / "";
  top: -1.5rem;
  left: 0.65rem;
  right: 0.65rem;
  height: 0.9rem;
  border-inline: 1px solid currentColor;
  background: linear-gradient(90deg, currentColor calc(50% - 0.7rem), transparent calc(50% - 0.7rem) calc(50% + 0.7rem), currentColor calc(50% + 0.7rem)) 0 50% / 100% 1px no-repeat;
  line-height: 0.9rem;
  text-align: center;
}

/* la cote de hauteur, à droite */
[data-theme="plan"] .portrait picture::after {
  content: "H";
  content: "H" / "";
  top: 0.65rem;
  right: -1.5rem;
  bottom: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  border-block: 1px solid currentColor;
  background: linear-gradient(currentColor calc(50% - 0.7rem), transparent calc(50% - 0.7rem) calc(50% + 0.7rem), currentColor calc(50% + 0.7rem)) 50% 0 / 1px 100% no-repeat;
}

/* le cartouche de tête : le folio de l'accueil, son échelle, sa révision */
[data-theme="plan"] .portrait::after {
  content: "Folio 00 · accueil\A Échelle 1:1 · rév. 2026-11-07";
  content: "Folio 00 · accueil\A Échelle 1:1 · rév. 2026-11-07" / "";
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 1rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--encre-3);
  background: linear-gradient(var(--filet), var(--filet)) 0 50% / 100% 1px no-repeat;
  color: var(--encre-2);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 2;
  text-transform: uppercase;
  white-space: pre;
}

/* en plan bleu, le portrait garde un cadre clair, comme une photo collée sur le tirage */
@media (prefers-color-scheme: dark) {
  [data-theme="plan"] .portrait img {
    border-color: var(--encre-3);
  }
}

/* ===== Pupitre : le thème « ville » (variante C), sous sa portée ===== */
/* Variante C « La ville en construction » : papier isométrique ; en sombre, la ville la nuit. */
[data-theme="ville"] {
  --fond: #f4f6f5;
  --surface: #e6ebe9;
  --filet: #c3cdca;
  --encre: #13202a;
  --encre-2: #3a4851;
  --encre-3: #4f5d66;
  --accent: #1b645a;
  --accent-fort: #0f4840;
  --rouge: #a3221b;
  --ambre: #7a5200;
  --attente-fond: #fff3c4;
  --attente-trait: #7a5200;
  --grille: #d6dedb;
  --trame:
    repeating-linear-gradient(30deg, var(--grille) 0 1px, transparent 1px 1.3rem),
    repeating-linear-gradient(150deg, var(--grille) 0 1px, transparent 1px 1.3rem);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  [data-theme="ville"] {
    --fond: #12172a;
    --surface: #1a2036;
    --filet: #313b5c;
    --encre: #eceef7;
    --encre-2: #c5cade;
    --encre-3: #aab1c9;
    --accent: #80d4c5;
    --accent-fort: #b3e7dd;
    --rouge: #ff9f95;
    --ambre: #f2c96a;
    --attente-fond: #28271f;
    --attente-trait: #f2c96a;
    --grille: #1d2440;
    color-scheme: dark;
  }
}

/* ==========================================================================
   Variante C « La ville en construction » : la plus ludique, avec mesure.
   Une petite ville en isométrie ouvre l'histoire, chaque chapitre a son bâtiment,
   chaque labo son état de chantier (fondations, en construction, livré, à l'arrêt),
   et la page « Construire la ville » se joue d'un clic, en CSS seul : des cases à
   cocher, :checked et :has(). Rien n'est enregistré, rien n'est verrouillé.
   ========================================================================== */
[data-theme="ville"] {
  --labo-libelle: "Chantier ";
}

/* ---------- La ville de l'accueil, dès le premier écran, sous le portrait ---------- */
[data-theme="ville"] .portrait::after {
  content: "";
  display: block;
  max-width: 21rem;
  aspect-ratio: 354 / 216;
  margin-top: 1.25rem;
  background: url("../img/ville-clair.svg") left bottom / contain no-repeat;
}

@media (prefers-color-scheme: dark) {
  [data-theme="ville"] .portrait::after {
    background-image: url("../img/ville-sombre.svg");
  }
}

/* ---------- Un bâtiment par chapitre ---------- */
[data-theme="ville"] #histoire .labo {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1rem;
}

[data-theme="ville"] #histoire .labo > * {
  grid-column: 2;
}

[data-theme="ville"] #histoire .labo::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 2.75rem;
  height: 3.25rem;
  background: var(--bati) center top / contain no-repeat;
}

@media (min-width: 48rem) {
  [data-theme="ville"] #histoire .labo {
    grid-template-columns: 3.75rem minmax(0, 1fr);
    column-gap: 1.5rem;
  }

  [data-theme="ville"] #histoire .labo::before {
    width: 3.75rem;
    height: 4.25rem;
  }
}

/* les dessins des bâtiments, aux couleurs du thème (images de fond : elles s'affichent aussi en file://) */
:root {
  --b-atelier: url("../img/bati-atelier-clair.svg");
  --b-tour: url("../img/bati-tour-clair.svg");
  --b-maison: url("../img/bati-maison-clair.svg");
  --b-immeuble: url("../img/bati-immeuble-clair.svg");
  --b-halle: url("../img/bati-halle-clair.svg");
  --b-parcelle: url("../img/bati-parcelle-clair.svg");
}

@media (prefers-color-scheme: dark) {
  :root {
    --b-atelier: url("../img/bati-atelier-sombre.svg");
    --b-tour: url("../img/bati-tour-sombre.svg");
    --b-maison: url("../img/bati-maison-sombre.svg");
    --b-immeuble: url("../img/bati-immeuble-sombre.svg");
    --b-halle: url("../img/bati-halle-sombre.svg");
    --b-parcelle: url("../img/bati-parcelle-sombre.svg");
  }
}

[data-theme="ville"] #histoire .labo[aria-labelledby="h-ordinateur"],
[data-theme="ville"] #histoire .labo[aria-labelledby="h-agences"] {
  --bati: var(--b-atelier);
}

[data-theme="ville"] #histoire .labo[aria-labelledby="h-ia"],
[data-theme="ville"] #histoire .labo[aria-labelledby="h-voir"] {
  --bati: var(--b-tour);
}

[data-theme="ville"] #histoire .labo[aria-labelledby="h-seeb"],
[data-theme="ville"] #histoire .labo[aria-labelledby="h-clone"] {
  --bati: var(--b-maison);
}

[data-theme="ville"] #histoire .labo[aria-labelledby="h-entreprises"],
[data-theme="ville"] #histoire .labo[aria-labelledby="h-espaces"] {
  --bati: var(--b-immeuble);
}

[data-theme="ville"] #histoire .labo[aria-labelledby="h-cerveaux"],
[data-theme="ville"] #histoire .labo[aria-labelledby="h-cms"] {
  --bati: var(--b-halle);
}

/* ---------- L'état du chantier, sur chaque fiche de labo ----------
   Quatre tronçons : fondations (idée), en construction (prototype), livré (en usage),
   à l'arrêt (en réserve). Le mot du statut reste écrit dans le badge, à droite. */
[data-theme="ville"] .labo-tete {
  --s1: var(--filet);
  --s2: var(--filet);
  --s3: var(--filet);
  --s4: var(--filet);
}

[data-theme="ville"] .labo-tete::after {
  content: var(--chantier, "");
  content: var(--chantier, "") / "";
  align-self: end;
  padding-bottom: 11px;
  border-top: 0;
  background:
    linear-gradient(var(--s1), var(--s1)) 0 100% / 23.5% 6px no-repeat,
    linear-gradient(var(--s2), var(--s2)) 33.33% 100% / 23.5% 6px no-repeat,
    linear-gradient(var(--s3), var(--s3)) 66.67% 100% / 23.5% 6px no-repeat,
    linear-gradient(var(--s4), var(--s4)) 100% 100% / 23.5% 6px no-repeat;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: right;
}

[data-theme="ville"] .labo-tete:has(.statut--idee) {
  --chantier: "fondations";
  --s1: var(--accent);
}

[data-theme="ville"] .labo-tete:has(.statut--prototype) {
  --chantier: "en construction";
  --s1: var(--ambre);
  --s2: var(--ambre);
}

[data-theme="ville"] .labo-tete:has(.statut--usage) {
  --chantier: "livré";
  --s1: var(--accent);
  --s2: var(--accent);
  --s3: var(--accent);
  --s4: var(--accent);
}

[data-theme="ville"] .labo-tete:has(.statut--reserve) {
  --chantier: "à l’arrêt";
  --s1: var(--encre-3);
  --s2: var(--encre-3);
}

/* l'étincelle : le panneau du chantier, avec son étiquette jaune */
[data-theme="ville"] .etincelle {
  border-color: var(--accent);
  background: var(--surface);
}

[data-theme="ville"] .etincelle strong {
  border-radius: 2px;
  background: var(--ambre);
  color: var(--fond);
}

/* le parcours : des étapes de chantier, et des briques sur le fil */
[data-theme="ville"] .jalon-date::after {
  content: "\00a0· étape " counter(jalon, decimal-leading-zero);
  color: var(--encre-3);
  font-size: 0.8125rem;
}

[data-theme="ville"] .jalon::after {
  width: 14px;
  height: 10px;
  border-radius: 1px;
}

@media (min-width: 48rem) {
  [data-theme="ville"] .jalon-date::after {
    content: "étape " counter(jalon, decimal-leading-zero);
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  [data-theme="ville"] .jalon::after {
    top: 0.65rem;
    left: calc(10rem - 1px);
  }
}

/* la 404 : le panneau de la parcelle porte son numéro en grand */
.parcelle-404 .repere-404 {
  font-size: 30px;
}

/* ---------- Le lien discret vers la ville, en bas de l'accueil ---------- */
.ville-lien p {
  position: relative;
  max-width: var(--mesure);
  margin: 0;
  padding: 0.9rem 1.1rem 0.95rem 4.5rem;
  border: 1px dashed var(--filet);
  border-radius: 4px;
  color: var(--encre-2);
  font-size: 1.0625rem;
}

.ville-lien p::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1rem;
  width: 2.5rem;
  height: 2.25rem;
  background: var(--b-parcelle) center / contain no-repeat;
  transform: translateY(-50%);
}

.ville-lien a {
  font-weight: 600;
}

/* ---------- La page « Construire la ville » ---------- */
.ville-jeu {
  counter-reset: pose;
}

.ville-jeu > h2 {
  margin-bottom: 1.5rem;
}

.parcelles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

@media (min-width: 60rem) {
  .parcelles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
  }
}

.parcelle {
  position: relative;
}

.parcelle input {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.parcelle input:checked {
  counter-increment: pose;
}

.parcelle label {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  height: 100%;
  padding: 0.75rem 0.6rem 0.85rem;
  border: 1px dashed var(--encre-3);
  border-radius: 4px;
  background: var(--fond);
  cursor: pointer;
}

.parcelle label:hover {
  border-color: var(--accent);
  background: var(--surface);
}

.parcelle input:focus-visible + label {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.parcelle .dessin {
  width: 100%;
  max-width: 7rem;
  aspect-ratio: 1;
  background: var(--b-parcelle) center 80% / 82% auto no-repeat;
}

.parcelle input:checked + label {
  border-style: solid;
  border-color: var(--accent);
  background: var(--surface);
}

.parcelle input:checked + label .dessin {
  background: var(--bati) center bottom / contain no-repeat;
}

.parcelle .nom-bati {
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: center;
}

.parcelle .nom-bati::after {
  content: "à bâtir";
  content: "à bâtir" / "";
  display: block;
  margin-top: 0.15rem;
  color: var(--encre-3);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.parcelle input:checked + label .nom-bati::after {
  content: "posé";
  content: "posé" / "";
  color: var(--accent);
}

.parcelle[data-bati="atelier"] {
  --bati: var(--b-atelier);
}

.parcelle[data-bati="tour"] {
  --bati: var(--b-tour);
}

.parcelle[data-bati="maison"] {
  --bati: var(--b-maison);
}

.parcelle[data-bati="immeuble"] {
  --bati: var(--b-immeuble);
}

.parcelle[data-bati="halle"] {
  --bati: var(--b-halle);
}

.compteur {
  margin: 1.25rem 0 0;
  color: var(--encre-3);
  font-family: var(--f-mono);
  font-size: 0.875rem;
}

.compteur::after {
  content: "Bâtiments posés : " counter(pose) " sur 10";
}

.registre {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  margin-top: 2rem;
}

.fiche-bati {
  padding: 1rem 1.15rem 1.05rem;
  border: 1px solid var(--filet);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  background: var(--surface);
}

.fiche-bati h3 {
  margin-bottom: 0.5rem;
  font-size: 1.375rem;
}

.fiche-bati p {
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
}

.fiche-bati p:last-child {
  margin-bottom: 0;
}

.ville-complete {
  display: none;
  max-width: 44rem;
  margin: 2rem 0 0;
  padding: 1rem 1.15rem;
  border: var(--trait) solid var(--accent);
  border-radius: 3px;
}

/* les résumés n'apparaissent qu'une fois le bâtiment posé ; sans :has(), ils restent tous visibles */
@supports selector(:has(a)) {
  .fiche-bati {
    display: none;
  }

  .ville-jeu:has(#b-ordinateur:checked) #f-ordinateur,
  .ville-jeu:has(#b-ia:checked) #f-ia,
  .ville-jeu:has(#b-seeb:checked) #f-seeb,
  .ville-jeu:has(#b-entreprises:checked) #f-entreprises,
  .ville-jeu:has(#b-clone:checked) #f-clone,
  .ville-jeu:has(#b-cerveaux:checked) #f-cerveaux,
  .ville-jeu:has(#b-espaces:checked) #f-espaces,
  .ville-jeu:has(#b-agences:checked) #f-agences,
  .ville-jeu:has(#b-cms:checked) #f-cms,
  .ville-jeu:has(#b-voir:checked) #f-voir {
    display: block;
  }

  .ville-jeu:not(:has(.parcelle input:not(:checked))) .ville-complete {
    display: block;
  }
}

/* ===== Habillage complet : « plan » ===== */
/* ==========================================================================
   Habillage complet « Plan » (passe 7, 07/11/2026) : le site comme un jeu de plans d'architecte.
   Écrit sans portée : la construction le pose sous [data-theme="plan"], après la variante A.
   Encre bleue sur papier de tirage (en sombre : le plan bleu), lettrage technique en capitales, sans empattements ;
   la page est une planche encadrée, repérée sur ses bords ; l'en-tête est un bloc-titre en cases ; chaque section a
   son repère de détail ; les fiches sont des cadres ; les boutons, des cases à cocher de nomenclature.
   ========================================================================== */
[data-theme="plan"] {
  --f-titre: var(--f-texte);
  --fond: #f6f8fb;
  --surface: #e8eef5;
  --filet: #b4c3d4;
  --encre: #12345a;
  --encre-2: #2c4a6c;
  --encre-3: #46607f;
  --accent: #1c5aa0;
  --accent-fort: #103d6e;
  --rouge: #a8241c;
  --grille: #dfe7f0;
  --grille-forte: #c9d6e4;
  --respiration: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}

@media (prefers-color-scheme: dark) {
  [data-theme="plan"] {
    --fond: #10243a;
    --surface: #163049;
    --filet: #2f4d6b;
    --encre: #eaf1f6;
    --encre-2: #c3d1dd;
    --encre-3: #a8bacb;
    --accent: #80d5c7;
    --accent-fort: #b4e7de;
    --rouge: #ff9f95;
    --grille: #162d46;
    --grille-forte: #1f3b5a;
  }
}

[data-theme="plan"] body {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.62;
}

/* ---------- Le lettrage : capitales techniques, sans empattements ---------- */
[data-theme="plan"] h1,
[data-theme="plan"] h2,
[data-theme="plan"] h3 {
  font-family: var(--f-texte);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

[data-theme="plan"] h1 {
  font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3rem);
  line-height: 1.08;
}

[data-theme="plan"] h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem);
  line-height: 1.2;
}

[data-theme="plan"] h3 {
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
}

/* ---------- La planche : un cadre double, repéré sur ses bords ---------- */
[data-theme="plan"] main {
  position: relative;
  max-width: var(--cadre);
  margin: 1.5rem auto 0;
  border: 1.5px solid var(--encre);
  outline: 1px solid var(--encre-3);
  outline-offset: 5px;
}

[data-theme="plan"] main::before,
[data-theme="plan"] main::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

[data-theme="plan"] main::before {
  top: 0;
  right: 0;
  left: 0;
  height: 7px;
  background: repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px 4.5rem);
}

[data-theme="plan"] main::after {
  top: 0;
  bottom: 0;
  left: 0;
  width: 7px;
  background: repeating-linear-gradient(180deg, var(--encre) 0 1px, transparent 1px 4.5rem);
}

@media (max-width: 47.99rem) {
  [data-theme="plan"] main {
    margin: 1rem 0.4rem 0;
    outline: 0;
  }
}

/* ---------- L'en-tête : un bloc-titre en cases ---------- */
[data-theme="plan"] .entete {
  border-bottom: 0;
}

[data-theme="plan"] .entete-in {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: 0;
  width: calc(100% - 2 * var(--marge));
  max-width: calc(var(--cadre) - 2 * var(--marge));
  margin-top: 1rem;
  padding: 0;
  border: 1.5px solid var(--encre);
}

[data-theme="plan"] .marque {
  padding: 0.65rem 1rem;
  border-right: 1.5px solid var(--encre);
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme="plan"] .nav {
  display: flex;
  justify-content: flex-end;
}

[data-theme="plan"] .nav ul {
  gap: 0;
}

[data-theme="plan"] .nav li + li {
  border-left: 1px solid var(--filet);
}

[data-theme="plan"] .nav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0.7rem 0.95rem;
  border-bottom: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-theme="plan"] .nav a:hover {
  background: var(--surface);
}

[data-theme="plan"] .nav a[aria-current="page"] {
  background: var(--encre);
  color: var(--fond);
}

[data-theme="plan"] .nav a[aria-current="page"]::before {
  color: inherit;
}

[data-theme="plan"] .nav a[aria-current="page"]::after {
  display: none;
}

@media (max-width: 47.99rem) {
  [data-theme="plan"] .entete-in {
    grid-template-columns: 1fr;
  }

  [data-theme="plan"] .marque {
    border-right: 0;
    border-bottom: 1.5px solid var(--encre);
  }

  [data-theme="plan"] .nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  [data-theme="plan"] .nav li + li {
    border-left: 0;
  }

  [data-theme="plan"] .nav li:nth-child(even) {
    border-left: 1px solid var(--filet);
  }

  [data-theme="plan"] .nav li:nth-child(n + 3) {
    border-top: 1px solid var(--filet);
  }

  [data-theme="plan"] .nav a {
    padding: 0.6rem 0.7rem;
    font-size: 0.75rem;
  }
}

/* ---------- La tête de page : l'étiquette de planche, le titre, l'échelle ---------- */
[data-theme="plan"] .tete {
  padding-top: clamp(2rem, 1.25rem + 3vw, 3.5rem);
}

[data-theme="plan"] .surtitre {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border: 1.5px solid var(--accent);
  color: var(--accent-fort);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

@media (min-width: 64rem) {
  [data-theme="plan"] .tete:not(.introuvable)::after {
    content: "Échelle 1:1";
    content: "Échelle 1:1" / "";
    position: absolute;
    top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    right: var(--marge);
    width: 11rem;
    padding-top: 0.85rem;
    border: 0;
    background:
      repeating-linear-gradient(90deg, var(--encre) 0 2.75rem, transparent 2.75rem 5.5rem) 0 0 / 100% 0.45rem no-repeat,
      linear-gradient(var(--encre), var(--encre)) 0 0.45rem / 100% 1px no-repeat;
    box-shadow: inset 0 0 0 0 transparent;
    color: var(--encre-3);
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-align: right;
    text-transform: uppercase;
    aspect-ratio: auto;
  }
}

[data-theme="plan"] .chapo {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
}

[data-theme="plan"] .mode-emploi {
  border: 1px solid var(--encre-3);
  border-left: 4px solid var(--encre);
  border-radius: 0;
}

/* ---------- Les sections : un repère de détail, cerclé, et le trait de coupe ---------- */
[data-theme="plan"] .bloc > h2 {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 0.55rem;
  border-bottom: 1.5px solid var(--encre);
}

[data-theme="plan"] .bloc > h2::before {
  content: counter(section, decimal-leading-zero);
  content: counter(section, decimal-leading-zero) / "";
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--encre);
  border-radius: 50%;
  background: none;
  color: var(--encre);
  font-size: 0.8125rem;
  letter-spacing: 0;
}

[data-theme="plan"] .prose {
  max-width: 40rem;
}

/* ---------- Les fiches : des cadres, et leur étiquette en négatif ---------- */
[data-theme="plan"] .labo:has(> .labo-tete) {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem 1.5rem;
  border: 1.5px solid var(--encre);
  background: var(--fond);
}

[data-theme="plan"] .labo-tete::before {
  padding: 0.15rem 0.5rem;
  background: var(--encre);
  color: var(--fond);
}

[data-theme="plan"] .labo-tete::after {
  border-top: 1px dashed var(--encre-3);
}

[data-theme="plan"] .deplier {
  border-radius: 0;
}

[data-theme="plan"] .deplier--geek {
  border: 1px solid var(--encre-3);
  border-left: 4px solid var(--accent);
}

/* ---------- Les boutons : des cases de nomenclature ---------- */
[data-theme="plan"] .sommaire-page a,
[data-theme="plan"] .demo-bouton,
[data-theme="plan"] .voyage-off-bouton,
[data-theme="plan"] .passer,
[data-theme="plan"] .connais-bouton {
  border: 1.5px solid var(--encre);
  border-radius: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

[data-theme="plan"] .sommaire-page a:hover,
[data-theme="plan"] .demo-bouton:hover,
[data-theme="plan"] .voyage-off-bouton:hover,
[data-theme="plan"] .passer:hover,
[data-theme="plan"] .connais-bouton:hover {
  background: var(--encre);
  color: var(--fond);
  text-decoration: none;
}

[data-theme="plan"] .sommaire-page a::before {
  color: inherit;
}

[data-theme="plan"] .suite-page {
  border-top: 1.5px solid var(--encre);
}

[data-theme="plan"] .suite-page::before {
  border-radius: 0;
  transform: rotate(45deg);
}

[data-theme="plan"] .suite-lien {
  font-family: var(--f-mono);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Les dessins, à l'encre de tirage ---------- */
[data-theme="plan"] .dessin {
  color: var(--accent-fort);
}

/* ---------- Le voyage : chaque époque est une planche ---------- */
[data-theme="plan"] .voyage .epoque::before {
  height: 14px;
  margin-bottom: 1.25rem;
  background:
    linear-gradient(var(--encre-3), var(--encre-3)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--encre-3), var(--encre-3)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--encre-3), var(--encre-3)) 100% 0 / 1px 100% no-repeat;
  animation: none;
}

[data-theme="plan"] .epoque-date {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1.5px solid var(--encre);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme="plan"] .epoque-titre {
  font-family: var(--f-texte);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- Le pied : le cartouche, en traits forts ---------- */
[data-theme="plan"] .pied {
  border-top: 1.5px solid var(--encre);
  background: var(--fond);
}

[data-theme="plan"] .pied-nom {
  font-family: var(--f-mono);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="plan"] .cartouche {
  border: 2px solid var(--encre);
  background: var(--encre);
}

[data-theme="plan"] .cartouche > div {
  background: var(--fond);
}

/* ---------- « Tu me connais ? » : des fiches de correspondance ---------- */
[data-theme="plan"] .connais-carte {
  border: 1.5px solid var(--encre);
  border-top-width: 1.5px;
  border-radius: 0;
  background: var(--fond);
}

[data-theme="plan"] .connais-carte .connais-titre {
  font-family: var(--f-texte);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

[data-theme="plan"] .connais-carte--priorite {
  border-color: var(--rouge);
}

/* ---------- Mes briques : des fiches de nomenclature ---------- */
[data-theme="plan"] .brique {
  border: 1.5px solid var(--encre);
  border-radius: 0;
  background: var(--fond);
}

[data-theme="plan"] .brique > h3 {
  font-size: 1rem;
}

/* ---------- Passe 9 : l'étincelle, repérée comme un détail ; le Collectif, en nomenclature à cartouche ---------- */
[data-theme="plan"] .etincelle-explique .etincelle-cherche {
  font-family: var(--f-texte);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

[data-theme="plan"] .etincelle-cherche::before {
  top: 0.32em;
  width: 0.52em;
  height: 0.52em;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0 26%, transparent 30%);
  box-shadow: none;
  transform: none;
}

[data-theme="plan"] .collectif-groupe {
  padding-top: 0;
  border: 1.5px solid var(--encre);
  border-radius: 0;
  background: var(--fond);
}

[data-theme="plan"] .collectif-groupe > h4 {
  margin: 0 -1.1rem 0.6rem;
  padding: 0.3rem 1.1rem;
  background: var(--encre);
  color: var(--fond);
}

[data-theme="plan"] .collectif-liste li {
  border-top-style: dashed;
}

/* ===== Habillage complet : « retro » ===== */
/* ==========================================================================
   Habillage complet « Rétro » (passe 8, 07/11/2026) : le site comme l'écran d'un ordinateur des années 80 et 90.
   Écrit sans portée : la construction le pose sous [data-theme="retro"], après les touches rétro du thème D.
   Un écran noir à phosphore vert, le même en clair comme en sombre ; tout le lettrage en chasse fixe ; l'en-tête est la
   barre de menus d'un logiciel du DOS ; les fiches sont des boîtes de dialogue grises, en relief, avec leur ombre ; les
   dépliables, des fenêtres bleues ; les boutons, des touches ; le pied, la barre d'état.
   ========================================================================== */
[data-theme="retro"] {
  --f-titre: var(--f-mono);
  --fond: #0c0f0d;
  --surface: #151a17;
  --filet: #2f3a33;
  --encre: #e4ecdf;
  --encre-2: #c3cfbf;
  --encre-3: #9fb09a;
  --accent: #4be37a;
  --accent-fort: #8ff0ad;
  --rouge: #ff7b6b;
  --ambre: #ffb000;
  --attente-fond: #231d0a;
  --attente-trait: #ffb000;
  --grille: #1a211c;
  --trame: repeating-linear-gradient(180deg, rgba(75, 227, 122, 0.05) 0 1px, transparent 1px 3px);
  --trame-hauteur: 100%;
  color-scheme: dark;
}

[data-theme="retro"] body {
  line-height: 1.68;
}

/* ---------- Le lettrage : la chasse fixe, et le phosphore ---------- */
[data-theme="retro"] h1,
[data-theme="retro"] h2,
[data-theme="retro"] h3 {
  font-family: var(--f-mono);
  font-weight: 400;
  letter-spacing: 0.01em;
}

[data-theme="retro"] h1 {
  color: var(--accent);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  line-height: 1.1;
  text-shadow: 0 0 10px rgba(75, 227, 122, 0.35);
}

[data-theme="retro"] h1::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.12em;
  margin-left: 0.2em;
  background: var(--accent);
  vertical-align: 0.05em;
}

@media (prefers-reduced-motion: no-preference) {
  [data-theme="retro"] h1::after {
    animation: retro-curseur 1.1s steps(1) infinite;
  }
}

@keyframes retro-curseur {
  50% {
    opacity: 0;
  }
}

[data-theme="retro"] h2 {
  color: var(--ambre);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
}

[data-theme="retro"] a {
  color: var(--accent);
}

/* ---------- L'en-tête : la barre de menus d'un logiciel du DOS ---------- */
[data-theme="retro"] .entete {
  border-bottom: 0;
  background: #aaaaaa;
  color: #000000;
}

[data-theme="retro"] .entete-in {
  align-items: center;
  padding-block: 0.25rem;
}

[data-theme="retro"] .marque {
  padding-bottom: 0;
  color: #000000;
  font-family: var(--f-mono);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-theme="retro"] .marque:hover {
  color: #000000;
}

[data-theme="retro"] .nav a {
  padding: 0.35rem 0.6rem;
  border-bottom: 0;
  color: #000000;
  font-size: 0.875rem;
  text-transform: uppercase;
}

[data-theme="retro"] .nav a::before {
  color: #7a0000;
}

[data-theme="retro"] .nav a:hover {
  background: #000000;
  color: #aaaaaa;
}

[data-theme="retro"] .nav a[aria-current="page"] {
  background: #000000;
  color: #ffffff;
}

[data-theme="retro"] .nav a[aria-current="page"]::before {
  color: var(--ambre);
}

[data-theme="retro"] .nav a[aria-current="page"]::after {
  display: none;
}

/* ---------- La tête de page : l'écran ---------- */
[data-theme="retro"] .chapo {
  color: var(--encre-2);
}

[data-theme="retro"] .mode-emploi {
  border: 3px double var(--accent);
  border-radius: 0;
  color: var(--encre-2);
}

/* la vue éclatée et le mur de briques de la base passent en traits clairs, sur l'écran noir */
@media (min-width: 64rem) {
  [data-theme="retro"] .tete:not(.introuvable)::after {
    background-image: url("../img/plan-briques-sombre.svg");
  }
}

[data-theme="retro"] .portrait::after {
  background-image: url("../img/plan-briques-sombre.svg");
}

[data-theme="retro"] .phrase::before {
  background-image: url("../img/brique-mur-sombre.svg");
}

/* ---------- Les sections : un numéro entre crochets, et un double trait ---------- */
[data-theme="retro"] .bloc > h2 {
  padding-top: 0.9rem;
  border-top: 3px double var(--filet);
}

[data-theme="retro"] .bloc > h2::before {
  content: "[" counter(section, decimal-leading-zero) "]";
  content: "[" counter(section, decimal-leading-zero) "]" / "";
  padding-left: 0;
  background: none;
  color: var(--accent);
}

/* ---------- Les fiches : des boîtes de dialogue grises, en relief, avec leur ombre ---------- */
[data-theme="retro"] .labo:has(> .labo-tete),
[data-theme="retro"] .brique,
[data-theme="retro"] .collectif-groupe,
[data-theme="retro"] .connais-carte {
  --fond: #c0c0c0;
  --surface: #d4d4d4;
  --filet: #808080;
  --encre: #000000;
  --encre-2: #111111;
  --encre-3: #2b2b2b;
  --accent: #00006e;
  --accent-fort: #00004a;
  --rouge: #8a0000;
  --ambre: #5a3d00;
  --attente-fond: #e8e1c0;
  --attente-trait: #5a4000;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem 1.4rem;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  border-radius: 0;
  background: #c0c0c0;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.75);
  color: #000000;
}

[data-theme="retro"] .labo:has(> .labo-tete) a,
[data-theme="retro"] .brique a,
[data-theme="retro"] .connais-carte a:not(.connais-bouton) {
  color: #00006e;
}

[data-theme="retro"] .labo:has(> .labo-tete) h3 {
  color: #000000;
}

[data-theme="retro"] .labo-tete::before {
  padding: 0.1rem 0.45rem;
  background: #00006e;
  color: #ffffff;
}

/* ---------- Les dépliables : des fenêtres bleues ---------- */
[data-theme="retro"] .deplier--geek {
  --surface: #0000a8;
  --encre: #ffffff;
  --encre-2: #e8e8ff;
  --encre-3: #cfd0ff;
  --accent: #ffff55;
  --accent-fort: #ffff99;
  --filet: #8080ff;
  border: 3px double #ffffff;
  border-radius: 0;
  background: #0000a8;
  color: #ffffff;
}

[data-theme="retro"] .deplier--geek a {
  color: #ffff55;
}

/* une fenêtre bleue posée dans une fiche grise garde ses liens jaunes (08/11/2026) */
[data-theme="retro"] .labo:has(> .labo-tete) .deplier--geek a {
  color: #ffff55;
}

[data-theme="retro"] .deplier--anecdote {
  border-left: 0;
  border: 1px solid var(--ambre);
  border-radius: 0;
}

/* ---------- Les boutons : des touches ---------- */
[data-theme="retro"] .sommaire-page a,
[data-theme="retro"] .demo-bouton,
[data-theme="retro"] .voyage-off-bouton,
[data-theme="retro"] .passer,
[data-theme="retro"] .connais-bouton {
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  border-radius: 0;
  background: #c0c0c0;
  color: #000000;
  font-family: var(--f-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
}

[data-theme="retro"] .sommaire-page a:hover,
[data-theme="retro"] .demo-bouton:hover,
[data-theme="retro"] .voyage-off-bouton:hover,
[data-theme="retro"] .passer:hover,
[data-theme="retro"] .connais-bouton:hover {
  border-color: #404040 #ffffff #ffffff #404040;
  background: #000000;
  color: var(--accent);
  text-decoration: none;
}

[data-theme="retro"] .sommaire-page a::before {
  color: inherit;
}

[data-theme="retro"] .suite-lien {
  font-family: var(--f-mono);
  font-weight: 400;
}

/* ---------- Le pied : la barre d'état ---------- */
[data-theme="retro"] .pied {
  --fond: #00a8a8;
  --surface: #00a8a8;
  --filet: #006060;
  --encre: #000000;
  --encre-2: #001414;
  --encre-3: #002828;
  --accent: #000000;
  --accent-fort: #000000;
  border-top: 0;
  background: #00a8a8;
  color: #000000;
}

[data-theme="retro"] .pied a {
  color: #000000;
}

[data-theme="retro"] .pied-nom {
  font-family: var(--f-mono);
  font-weight: 400;
  text-transform: uppercase;
}

[data-theme="retro"] .cartouche {
  border: 2px solid #000000;
  background: #000000;
}

[data-theme="retro"] .cartouche > div {
  background: #00a8a8;
}

/* ---------- Passe 9 : l'étincelle, à l'invite du DOS ; le Collectif, en boîtes de dialogue à barre de titre ---------- */
[data-theme="retro"] .etincelle-explique .etincelle-cherche {
  padding-left: 0;
  color: var(--accent);
  font-family: var(--f-mono);
  font-weight: 400;
  text-shadow: 0 0 10px rgba(75, 227, 122, 0.35);
}

[data-theme="retro"] .etincelle-cherche::before {
  content: ">\00a0";
  content: ">\00a0" / "";
  position: static;
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  transform: none;
}

[data-theme="retro"] .etincelle-cherche::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.12em;
  margin-left: 0.2em;
  background: var(--accent);
  vertical-align: 0.05em;
}

@media (prefers-reduced-motion: no-preference) {
  [data-theme="retro"] .etincelle-cherche::after {
    animation: retro-curseur 1.1s steps(1) infinite;
  }
}

[data-theme="retro"] .collectif-groupe {
  margin: 0 0 1.75rem;
}

[data-theme="retro"] .collectif-groupe > h4 {
  margin: -1rem -1.25rem 0.75rem;
  padding: 0.25rem 0.75rem;
  background: #00006e;
  color: #ffffff;
}

/* ---------- L'alerte « Attention » (08/11/2026, garde d'accessibilité) ----------
   Une boîte de dialogue grise, à l'encre noire, partout dans l'habillage rétro : posée dans une fenêtre bleue
   (dépliant geek) d'une fiche grise, elle héritait de l'encre blanche de l'une et du fond gris de l'autre (1,81:1). */
[data-theme="retro"] .deplier--alerte {
  --fond: #c0c0c0;
  --surface: #c0c0c0;
  --encre: #000000;
  --encre-2: #000000;
  --encre-3: #1a1a1a;
  --accent: #00006e;
  --accent-fort: #00006e;
  --rouge: #a80000;
  background: #c0c0c0;
  color: #000000;
}

[data-theme="retro"] .deplier--alerte a,
[data-theme="retro"] .deplier--geek .deplier--alerte a,
[data-theme="retro"] .labo:has(> .labo-tete) .deplier--geek .deplier--alerte a {
  color: #00006e;
}

/* ===== Habillage complet : « ville » ===== */
/* ==========================================================================
   Habillage complet « Ville » (passe 8, 07/11/2026) : le site comme une ville en construction.
   Écrit sans portée : la construction le pose sous [data-theme="ville"], après la variante C.
   De la pierre claire et de la brique le jour ; la ville la nuit, en sombre, avec ses fenêtres allumées.
   La navigation est faite de plaques de rue émaillées, chaque section porte son numéro de maison, les fiches sont des
   façades, le mode d'emploi est un panneau de chantier, les boutons sont des panneaux arrondis, et une rue sépare les
   époques ; en tête de page, la ville en isométrie ; au pied, la chaussée.
   ========================================================================== */
[data-theme="ville"] {
  --fond: #f3f1ea;
  --surface: #e7e3d8;
  --filet: #c9c1ad;
  --encre: #1f2430;
  --encre-2: #3b4250;
  --encre-3: #535b69;
  --accent: #a8431f;
  --accent-fort: #7a2e12;
  --rouge: #a3221b;
  --attente-fond: #fff1c2;
  --attente-trait: #7a5200;
  --plaque: #1f4e8c;
  --plaque-encre: #1f4e8c;
  --chaussee: #2f343d;
}

@media (prefers-color-scheme: dark) {
  [data-theme="ville"] {
    --fond: #12172a;
    --surface: #1b2238;
    --filet: #34405f;
    --encre: #eef0f5;
    --encre-2: #c9cfdc;
    --encre-3: #a9b2c4;
    --accent: #f2c14e;
    --accent-fort: #ffd98a;
    --rouge: #ff9c8f;
    --attente-fond: #2a2617;
    --attente-trait: #f2c14e;
    --plaque: #2c5fa8;
    --plaque-encre: #9cc2ff;
    --chaussee: #0a0d18;
  }
}

/* ---------- La signalétique : capitales grasses, sans empattements ---------- */
[data-theme="ville"] h1 {
  font-size: clamp(2.3rem, 1.5rem + 3.4vw, 3.9rem);
  letter-spacing: -0.015em;
  line-height: 1.02;
}

[data-theme="ville"] h2 {
  font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.15rem);
}

/* ---------- L'en-tête : un trottoir, la chaussée, et des plaques de rue ---------- */
[data-theme="ville"] .entete {
  position: relative;
  border-bottom: 0;
  background: var(--surface);
}

[data-theme="ville"] .entete::after {
  content: "";
  display: block;
  height: 12px;
  background:
    repeating-linear-gradient(90deg, #f3f1ea 0 18px, transparent 18px 38px) 0 50% / 100% 2px no-repeat,
    var(--chaussee);
}

[data-theme="ville"] .entete-in {
  align-items: center;
  padding-block: 0.85rem 0.85rem;
}

[data-theme="ville"] .marque {
  font-size: 1.5rem;
}

[data-theme="ville"] .marque::before {
  width: 30px;
  height: 30px;
  background: var(--b-maison) center bottom / contain no-repeat;
}

[data-theme="ville"] .nav ul {
  gap: 0.55rem;
}

[data-theme="ville"] .nav a {
  padding: 0.3rem 0.65rem 0.32rem;
  border: 0;
  border-radius: 6px;
  background: var(--plaque);
  box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 1.5px var(--plaque);
  color: #ffffff;
  font-family: var(--f-texte);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

[data-theme="ville"] .nav a::before {
  color: #ffffff;
}

[data-theme="ville"] .nav a:hover {
  color: #ffffff;
  text-decoration: underline;
}

[data-theme="ville"] .nav a[aria-current="page"] {
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--fond), 0 0 0 1.5px var(--accent);
  color: var(--fond);
}

[data-theme="ville"] .nav a[aria-current="page"]::before {
  color: inherit;
}

[data-theme="ville"] .nav a[aria-current="page"]::after {
  display: none;
}

@media (max-width: 47.99rem) {
  [data-theme="ville"] .nav {
    margin-top: 0.6rem;
  }

  [data-theme="ville"] .nav ul {
    gap: 0.5rem;
  }
}

/* ---------- La tête de page : une plaque, le titre, et la ville en isométrie ---------- */
[data-theme="ville"] .surtitre {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
  background: var(--plaque);
  box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 1.5px var(--plaque);
  color: #ffffff;
  font-family: var(--f-texte);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

@media (min-width: 64rem) {
  [data-theme="ville"] .tete h1 {
    max-width: 44rem;
  }

  [data-theme="ville"] .tete:not(.introuvable)::after {
    content: "";
    position: absolute;
    top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    right: var(--marge);
    width: 20rem;
    aspect-ratio: 354 / 216;
    background: url("../img/ville-clair.svg") right bottom / contain no-repeat;
    pointer-events: none;
  }
}

@media (min-width: 64rem) and (prefers-color-scheme: dark) {
  [data-theme="ville"] .tete:not(.introuvable)::after {
    background-image: url("../img/ville-sombre.svg");
  }
}

/* le mode d'emploi : un panneau de chantier, bordé de sa rubalise */
[data-theme="ville"] .mode-emploi {
  border: 0;
  border-top: 8px solid var(--attente-trait);
  border-image: repeating-linear-gradient(-45deg, #f2c14e 0 10px, #1f2430 10px 20px) 8 0 0 0 / 8px 0 0 0;
  background: var(--surface);
}

/* ---------- Les sections : un numéro de maison, émaillé ---------- */
[data-theme="ville"] .bloc > h2::before {
  content: "N° " counter(section);
  content: "N° " counter(section) / "";
  display: block;
  width: max-content;
  margin-bottom: 0.75rem;
  padding: 0.22rem 0.55rem;
  border-radius: 4px;
  background: var(--plaque);
  box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 1.5px var(--plaque);
  color: #ffffff;
  font-family: var(--f-texte);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ---------- Les fiches : des façades, avec leur toit de brique ---------- */
[data-theme="ville"] .labo:has(> .labo-tete) {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem 1.4rem;
  border: 1px solid var(--filet);
  border-top: 6px solid var(--accent);
  border-radius: 10px 10px 4px 4px;
  background: var(--surface);
  box-shadow: 0 3px 0 var(--filet);
}

[data-theme="ville"] .deplier {
  border-radius: 8px;
}

/* ---------- Les boutons : des panneaux arrondis ---------- */
[data-theme="ville"] .sommaire-page a,
[data-theme="ville"] .demo-bouton,
[data-theme="ville"] .voyage-off-bouton,
[data-theme="ville"] .passer,
[data-theme="ville"] .connais-bouton {
  border: 2px solid var(--plaque-encre);
  border-radius: 999px;
  background: var(--fond);
  color: var(--plaque-encre);
  font-family: var(--f-texte);
  font-size: 0.875rem;
  font-weight: 600;
}

[data-theme="ville"] .sommaire-page a:hover,
[data-theme="ville"] .demo-bouton:hover,
[data-theme="ville"] .voyage-off-bouton:hover,
[data-theme="ville"] .passer:hover,
[data-theme="ville"] .connais-bouton:hover {
  background: var(--plaque);
  color: #ffffff;
  text-decoration: none;
}

[data-theme="ville"] .sommaire-page a::before {
  color: inherit;
}

[data-theme="ville"] .connais-carte {
  border-radius: 10px 10px 4px 4px;
  border-top-width: 6px;
}

[data-theme="ville"] .suite-page::before {
  border-radius: 3px;
  background: var(--accent);
}

/* ---------- Le voyage : une rue entre deux quartiers ---------- */
[data-theme="ville"] .voyage .epoque::before {
  height: 12px;
  margin-bottom: 1.25rem;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, #f3f1ea 0 16px, transparent 16px 34px) 0 50% / 100% 2px no-repeat,
    var(--chaussee);
  animation: none;
}

[data-theme="ville"] .epoque-date {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  background: var(--plaque);
  box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 1.5px var(--plaque);
  color: #ffffff;
  font-family: var(--f-texte);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ---------- Le pied : de l'autre côté de la chaussée ---------- */
[data-theme="ville"] .pied {
  position: relative;
  border-top: 0;
}

[data-theme="ville"] .pied::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 14px;
  background:
    repeating-linear-gradient(90deg, #f3f1ea 0 18px, transparent 18px 38px) 0 50% / 100% 2px no-repeat,
    var(--chaussee);
}

[data-theme="ville"] .cartouche {
  border-radius: 6px;
  overflow: hidden;
}

/* ---------- Mes briques : des façades, avec leur toit de brique ---------- */
[data-theme="ville"] .brique {
  border-top: 6px solid var(--accent);
  border-radius: 10px 10px 4px 4px;
  box-shadow: 0 3px 0 var(--filet);
}

/* ---------- Passe 9 : l'étincelle, sur sa rubalise ; le Collectif, le tableau des habitants de l'immeuble ---------- */
[data-theme="ville"] .etincelle-explique .etincelle-cherche {
  width: fit-content;
  padding-bottom: 0.5rem;
  border-bottom: 6px solid var(--attente-trait);
  border-image: repeating-linear-gradient(-45deg, #f2c14e 0 10px, #1f2430 10px 20px) 0 0 6 0 / 0 0 6px 0;
}

[data-theme="ville"] .collectif-groupe {
  border-top: 6px solid var(--accent);
  border-radius: 10px 10px 4px 4px;
  box-shadow: 0 3px 0 var(--filet);
}

[data-theme="ville"] .collectif-groupe > h4 {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  background: var(--plaque);
  box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 1.5px var(--plaque);
  color: #ffffff;
  font-family: var(--f-texte);
  font-size: 0.75rem;
  font-weight: 600;
}