/* Deconstruire la guerre algorithmique — version web
   Noir, texte clair, un seul accent aqua (celui des images de l'atelier). */

@font-face {
  font-family: 'IvyPresto';
  src: url('../fonts/ivy-presto-headline-light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

:root {
  --bg: #000;
  --ink: #cfd4d3;
  --ink-hi: #f2f5f4;
  --dim: rgba(207, 212, 211, 0.62); /* contraste ~5,2:1 sur noir : lisible pour les petits textes (notes, statut) */
  --faint: rgba(207, 212, 211, 0.16);
  --aqua: #10edd1;
  --aqua-rgb: 16, 237, 209;
  --halo: #27bf9b;
  --halo-rgb: 39, 191, 155;
  --aqua-soft: rgba(var(--aqua-rgb), 0.14);
  --bin: #1e2322;
  --mono: 'Space Mono', 'Courier New', monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --serif: 'IvyPresto', 'Times New Roman', serif;
  --col: 42.5rem;
  --side: 18.125rem;
  --gap: 3.5rem;
  --gutter: 1rem;
  --hud-h: 2.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
/* pas d'ancrage : le glitch modifie le texte en continu et le navigateur ferait deriver la page */
html, body { overflow-anchor: none; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 1.0625rem/1.66 var(--sans);
  overflow-x: hidden;
}
::selection { background: var(--aqua); color: #000; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--aqua); color: #000; padding: 6px 10px; font: 700 12px var(--mono); }
.skip:focus { left: 0.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { padding: 30vh var(--gutter); font: 0.875rem var(--mono); text-align: center; }

/* ---------------------------------------------------------------- CRT */
.crt {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  mix-blend-mode: normal;
}
.tear {
  position: fixed; left: 0; right: 0; z-index: 41; pointer-events: none;
  height: 0.1875rem; background: var(--aqua); opacity: 0; mix-blend-mode: difference;
}
.tear.go { animation: tear .22s steps(3) forwards; }
@keyframes tear {
  0% { opacity: .9; transform: translateX(-4%); }
  50% { opacity: .5; transform: translateX(6%) scaleY(4); }
  100% { opacity: 0; transform: translateX(0); }
}

/* ---------------------------------------------------------------- HUD */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--hud-h);
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0 var(--gutter);
  font: 400 0.6562rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .92), rgba(0, 0, 0, 0));
}
.hud__id { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud__btn {
  background: none; border: 1px solid var(--faint); padding: 0.4375rem 0.625rem; cursor: pointer;
  font: 700 0.6562rem/1 var(--mono); letter-spacing: .1em; color: var(--ink-hi);
}
.hud__btn:hover, .hud__btn:focus-visible { border-color: var(--aqua); color: var(--aqua); outline: none; }

.folio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.625rem var(--gutter) 0.75rem;
  font: 400 0.625rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  background: linear-gradient(to top, rgba(0, 0, 0, .95), rgba(0, 0, 0, 0));
}
.folio__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folio__sep { margin: 0 .9em; }
#folio-ref { margin-left: .9em; color: var(--aqua); }
.folio__loop { color: var(--aqua); white-space: nowrap; }
.folio__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--faint); }
#folio-bar { display: block; height: 100%; width: 0; background: var(--aqua); }

/* ---------------------------------------------------------------- mise en page */
/* rien ne doit depasser en largeur : sur telephone, un element trop large elargit toute la page
   et pousse le bandeau du haut (et le bouton SOMMAIRE) hors de l'ecran */
#flux { position: relative; overflow-x: clip; }
.loop { position: relative; }
.page {
  max-width: calc(var(--col) + 2 * var(--gutter));
  margin: 0 auto; padding: 0 var(--gutter);
}
.b { max-width: var(--col); margin: 0 0 1.05em; }
.wide { max-width: none; }

/* Grand ecran : le texte n'est plus un bloc centre. Colonne de repere a gauche (partie, chapitre,
   section en cours), texte, puis notes a droite ; largeurs et corps suivent la largeur de l'ecran. */
.rail { display: none; }
@media (min-width: 1180px) {
  /* Grand ecran : la taille de base suit la largeur de la fenetre (16 px a 1280 px de large),
     et tout le reste est en rem ou en vw : un grand ecran est un 1280 px agrandi, sans vide a droite. */
  html { font-size: clamp(15px, min(100vw / 80, 100vh / 45), 32px); }
  :root {
    /* les proportions d'un ecran de 1280 px ; l'espace en trop devient des marges egales */
    --rail: 13.6rem;
    --col: 37.6rem;
    --side: 15.2rem;
    --gap: 2.4rem;
    --gutter: max(3.2rem, calc((var(--vw, 100vw) - 71.2rem) / 2));
  }
  body { font-size: 1.08rem; }
  .page { max-width: none; margin: 0; padding: 0 var(--gutter) 0 calc(var(--gutter) + var(--rail) + var(--gap)); }
  .row { display: grid; grid-template-columns: var(--col) var(--side); column-gap: var(--gap); max-width: none; }
  .row > :first-child { margin: 0; }
  /* images isolees : centrees sur l'ecran entier, comme les ouvertures, pas sur la colonne de texte */
  .page > .ascii { justify-content: center; max-width: none; width: var(--vw, 100vw); margin-left: calc(-1 * (var(--gutter) + var(--rail) + var(--gap))); }

  .rail {
    display: flex; flex-direction: column; gap: 0.875rem;
    position: fixed; z-index: 20; left: var(--gutter); top: 50%; transform: translateY(-50%);
    width: var(--rail); padding-left: 0.875rem; border-left: 1px solid var(--faint);
    font: 400 0.6875rem/1.55 var(--mono); letter-spacing: .08em; text-transform: uppercase;
    opacity: 0; transition: opacity .4s;
  }
  .rail.on { opacity: 1; }
  .rail__a { color: var(--dim); }
  .rail__b { color: var(--ink-hi); font-weight: 700; font-size: 0.7812rem; }
  .rail__c span { color: #000; background: var(--aqua); font-weight: 700; padding: .15em .4em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .rail__c { line-height: 1.9; }

  /* selecteurs renforces : les regles de base des ouvertures sont plus bas dans le fichier */
  .page > .hero { margin-left: calc(-1 * (var(--gutter) + var(--rail) + var(--gap))); }
  .hero > .hero__txt { max-width: none; margin: 0; padding-left: calc(var(--gutter) + var(--rail) + var(--gap)); padding-right: var(--gutter); }
}

/* ---------------------------------------------------------------- glitch des bords */
/* Les paragraphes sont decoupes en lignes figees (memoire.js) : un glyphe brouille,
   plus large ou plus etroit que la lettre, ne fait jamais recomposer le reste du texte. */
.ln { display: block; white-space: nowrap; }

/* ---------------------------------------------------------------- couverture */
.cover {
  position: relative; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
}
.cover__bin {
  position: absolute; inset: 0; margin: 0;
  font: 700 0.8125rem/1.25 var(--mono); letter-spacing: -.02em; white-space: pre;
  color: var(--bin);
  /* le vernis : un reflet qui passe sur le binaire */
  background: linear-gradient(105deg, var(--bin) 0 38%, #4a5452 50%, var(--bin) 62% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: vernis 7s linear infinite;
}
.cover__bin .oc { -webkit-text-fill-color: var(--aqua); color: var(--aqua); text-shadow: 0 0 8px rgba(var(--halo-rgb), .8); }
.cover__bin .oc.lit { -webkit-text-fill-color: #000; background: var(--aqua); }
@keyframes vernis { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.cover__meta {
  position: relative; z-index: 2; width: 100%;
  padding: 0 var(--gutter) calc(4rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, .96) 45%, rgba(0, 0, 0, 0));
}
.cover__meta > * { max-width: 68.75rem; margin-left: auto; margin-right: auto; }
.cover__title {
  margin: 0 auto .35em; font: 300 clamp(1.9rem, 8.6vw, 5.6rem)/.96 var(--serif);
  text-transform: uppercase; color: var(--ink-hi); letter-spacing: -.01em;
}
.cover__line { margin: 0 auto .4em; font: 400 0.6875rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.cover__line b { color: var(--aqua); font-weight: 400; }
.cover__hint { color: var(--ink-hi); }
.cover__hint::before { content: '\2193  '; color: var(--aqua); }

/* ---------------------------------------------------------------- pages liminaires */
.fiche {
  margin: 3rem 0 4rem; padding: 1.375rem 0; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint);
  font: 400 0.75rem/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.fiche__h { color: var(--aqua); margin: 0 0 0.75rem; font-weight: 700; }
.fiche dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 1.375rem; margin: 0; }
.fiche dt { color: var(--dim); }
.fiche dd { margin: 0; color: var(--ink-hi); }
.fiche__t { margin: 1.625rem 0 0.375rem; font: 300 clamp(1.8rem, 5vw, 2.8rem)/1 var(--serif); text-transform: uppercase; color: var(--ink-hi); letter-spacing: 0; }
.fiche__m { margin: 0; color: var(--dim); font-size: 0.625rem; text-transform: none; letter-spacing: .02em; }

.somm { font-size: 1.12rem; line-height: 1.75; color: var(--ink); }
.somm a { color: var(--ink-hi); text-decoration: none; background: linear-gradient(var(--aqua), var(--aqua)) 0 100% / 100% 1px no-repeat; }
.somm a:hover, .somm a:focus-visible { color: #000; background-size: 100% 100%; outline: none; }
.somm .sq { color: var(--aqua); font-size: .7em; margin-left: .15em; vertical-align: .1em; }

/* ---------------------------------------------------------------- titres */
.t-part { margin: 34vh 0 30vh; }
.t-part__k, .t-chap__k {
  display: block; margin-bottom: 1.125rem;
  font: 700 0.6875rem/1 var(--mono); letter-spacing: .16em; color: var(--aqua); text-transform: uppercase;
}
.t-part__t {
  margin: 0; font: 300 clamp(1.9rem, 8.6vw, 5rem)/.98 var(--serif); text-transform: uppercase; color: var(--ink-hi); letter-spacing: -.005em;
}
.t-part--simple { margin: 22vh 0 8vh; }
.t-part--simple .t-part__t { font-size: clamp(1.9rem, 7.6vw, 4rem); }
.t-chap { margin: 26vh 0 20vh; }
.t-chap__t {
  margin: 0; font: 700 clamp(1.5rem, 4.2vw, 2.5rem)/1.08 var(--mono); text-transform: uppercase; color: var(--ink-hi); letter-spacing: -.02em;
}
.t-sec { margin: 3.2em 0 1.3em; }
.t-sec__t {
  display: inline; margin: 0;
  font: 700 0.875rem/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--aqua); color: #000; padding: .18em .45em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.t-sub { margin: 2.2em 0 .8em; }
.t-sub__t { margin: 0; font: 700 0.8125rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--aqua); }
.t-sub__t::before { content: '\25A0\00A0\00A0'; }

/* ---------------------------------------------------------------- texte */
.lead::first-line { color: var(--ink-hi); }
.quote {
  margin: 2.4em 0; padding: 0 0 0 1.375rem; border-left: 1px solid var(--aqua);
  font: 300 clamp(1.35rem, 3.4vw, 1.8rem)/1.28 var(--serif); color: var(--ink-hi);
}
.list, .bib, .plan { margin: 0 0 1.4em; padding: 0; list-style: none; }
.list li { position: relative; padding-left: 1.5em; margin-bottom: .45em; }
.list li::before { content: '—'; position: absolute; left: 0; color: var(--aqua); }
.bib li { font: 400 0.7812rem/1.6 var(--mono); color: var(--dim); margin-bottom: .75em; padding-left: 1.4em; text-indent: -1.4em; }
.bib li::before { content: '> '; color: var(--aqua); }
.tag {
  display: inline-block; margin-right: .6em; padding: .1em .4em;
  font: 700 0.6875rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: #000; background: var(--aqua); vertical-align: .12em;
}
.plan li { display: grid; grid-template-columns: 1fr; gap: 0.125rem; padding: 0.625rem 0; border-top: 1px solid var(--faint); }
.plan li .tag { justify-self: start; }
@media (min-width: 640px) {
  .plan li { grid-template-columns: 11.875rem 1fr; gap: 1.125rem; align-items: baseline; }
}
.hyp { font: 700 0.8125rem/1.6 var(--mono); letter-spacing: .06em; color: var(--ink-hi); padding: 0.5rem 0; border-top: 1px solid var(--faint); margin: 0; }
.hyp + .b:not(.hyp) { margin-top: 1.4em; }
.verbatim { font-size: .95rem; padding-left: 0; }
.micro {
  margin: 12vh 0; text-align: center; max-width: none;
  font: 400 0.6562rem/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}

/* ---------------------------------------------------------------- notes */
.call {
  display: inline-block; min-width: 1.35em; margin: 0 .08em; padding: 0 .2em;
  border: 1px solid var(--aqua); background: none; cursor: pointer;
  font: 700 .62em/1.35 var(--mono); color: var(--aqua); vertical-align: .55em; text-align: center;
}
.call:hover, .call:focus-visible, .call[aria-expanded="true"] { background: var(--aqua); color: #000; outline: none; }
.side { display: none; margin: .6em 0 1.2em; padding: 0.625rem 0 0 0.875rem; border-left: 1px solid var(--aqua); }
.side.open { display: block; }
.note { margin: 0 0 .8em; font: 400 0.75rem/1.55 var(--mono); color: var(--dim); }
.note__n { color: var(--aqua); font-weight: 700; margin-right: .5em; }
.note.hl { color: var(--ink-hi); }
@media (min-width: 1180px) {
  .side, .side.open { display: block; margin: 0; padding: 0.25rem 0 0 1rem; }
}

/* ---------------------------------------------------------------- images ASCII */
.ascii {
  max-width: none; margin: 3rem 0; display: flex; justify-content: center;
}
@media (min-width: 700px) {
  .ascii { margin: 12vh 0; }
  .fiche { margin: 18vh 0 10vh; }
}
@media (min-width: 700px) and (max-width: 1179px) {
  body { font-size: 1.125rem; }
}
.ascii pre, .hero__art pre {
  margin: 0; white-space: pre; font-family: var(--mono); font-weight: 400;
  color: var(--aqua); letter-spacing: 0;
  /* le halo de l'atelier, en CSS : teinte #27bf9b */
  filter: drop-shadow(0 0 2px rgba(var(--halo-rgb), .9)) drop-shadow(0 0 12px rgba(var(--halo-rgb), .5));
  user-select: none;
}
.art-d { display: none; }
@media (min-width: 700px) and (orientation: landscape) {
  .art-m { display: none; }
  .art-d { display: block; }
}

/* ---------------------------------------------------------------- ouvertures : image + titre */
/* Comme les pages d'ouverture de l'imprime : l'image ASCII en plein ecran, le titre par-dessus
   en surlignage noir, texte clair. */
.hero {
  position: relative; max-width: none;
  width: var(--vw, 100vw); margin: 8vh 0 8vh calc(50% - var(--vw, 100vw) / 2);
  min-height: 60vh; /* sur telephone, memoire.js ajuste la hauteur a celle de l'image */
  display: flex; align-items: center; overflow: hidden;
}
.hero__art {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero__txt {
  position: relative; z-index: 2; width: 100%;
  max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto;
  padding: 0 var(--gutter);
}
/* grand ecran : le titre descend en bas de l'image, comme sur les pages d'ouverture de l'imprime */
@media (min-width: 700px) and (orientation: landscape) {
  .hero { align-items: flex-end; margin-top: 16vh; margin-bottom: 16vh; min-height: 100vh; min-height: 100svh; }
  .hero__txt { padding-bottom: calc(var(--hud-h) + 12vh); }
}
/* surtitres et micro-textes : petit bandeau noir ; grands titres : une ombre noire diffuse,
   un bandeau par ligne mordrait sur la ligne du dessus avec un interligne serre */
.hero__k span, .hero__micro span {
  background: #000; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero__txt::before {
  content: ''; position: absolute; z-index: -1; left: -10%; right: -10%; top: -18%; bottom: -18%;
  background: radial-gradient(ellipse at 35% 55%, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
}
.hero__k { display: block; margin-bottom: 0.625rem; font: 700 0.6875rem/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--aqua); }
.hero__k span { padding: .25em .5em; }
.hero__t { margin: 0; color: var(--ink-hi); text-transform: uppercase; }
.hero__t { text-shadow: 0 0 2px #000, 0 0 10px #000, 0 0 26px rgba(0, 0, 0, .95); }
.hero__title--part .hero__t { font: 300 clamp(1.9rem, 8.6vw, 5.6rem)/1.02 var(--serif); letter-spacing: -.005em; }
.hero__title--chap .hero__t { font: 700 clamp(1.5rem, 5.4vw, 2.7rem)/1.3 var(--mono); letter-spacing: -.02em; }
.hero__title--sec .hero__t { font: 700 clamp(1.15rem, 4vw, 1.75rem)/1.45 var(--mono); letter-spacing: .01em; }
.hero__title + .hero__title { margin-top: 1.875rem; }
.hero__micro { margin: 0 0 1rem; font: 400 0.6562rem/1.9 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.hero__micro span { padding: .2em .45em; }
.hero__title ~ .hero__micro { margin: 1.375rem 0 0; }


/* ---------------------------------------------------------------- diagrammes d'enquete */
.diag { margin: 2.6em 0; font: 400 0.7188rem/1.5 var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.diag__cap { margin: 0 0 0.75rem; color: var(--ink-hi); font-weight: 700; }
.diag__cap .tag { font-size: 0.6562rem; }
.diag ul { list-style: none; margin: 0; padding: 0; }
.diag li { display: grid; grid-template-columns: 1fr auto; gap: 0.125rem 0.875rem; padding: 0.3125rem 0; align-items: center; }
.diag__lab { color: var(--dim); overflow: hidden; }
.diag__val { color: var(--ink-hi); text-align: right; min-width: 3.4em; }
.diag__bar {
  grid-column: 1 / -1; justify-self: start; display: block; white-space: pre; overflow: hidden;
  outline: 1px solid rgba(var(--aqua-rgb), .55); outline-offset: 1px; line-height: 1.25;
}
.diag__bar i { font-style: normal; color: var(--aqua); }
.diag__bar s { text-decoration: none; color: transparent; }
@media (min-width: 640px) {
  .diag li { grid-template-columns: minmax(0, 1fr) auto 3.4em; }
  .diag__bar { grid-column: auto; }
}

.keyfigs { margin: 3em 0; border-top: 1px solid var(--faint); padding-top: 0.875rem; }
.keyfigs__h { margin: 0 0 1.25rem; font: 700 0.6875rem/1.4 var(--mono); letter-spacing: .12em; color: var(--aqua); }
.keyfigs__g { display: grid; grid-template-columns: 1fr 1fr; gap: 1.625rem 1.375rem; }
.kf__v { display: block; font: 300 clamp(2.6rem, 9vw, 4.2rem)/1 var(--serif); color: var(--ink-hi); }
.kf__l { display: block; margin-top: 0.5rem; font: 400 0.6562rem/1.45 var(--mono); letter-spacing: .06em; color: var(--dim); }
.kf__l::before { content: '\25A0\00A0'; color: var(--aqua); }

.tablewrap { overflow-x: auto; margin: 2em 0 2.6em; }
.tablewrap table { width: 100%; border-collapse: collapse; font: 400 0.75rem/1.5 var(--mono); }
.tablewrap th { text-align: left; font-weight: 700; color: var(--aqua); text-transform: uppercase; letter-spacing: .08em; padding: 0.5rem 0.625rem 0.5rem 0; border-bottom: 1px solid var(--aqua); }
.tablewrap td { padding: 0.625rem 0.625rem 0.625rem 0; border-bottom: 1px solid var(--faint); vertical-align: top; color: var(--ink); }
.tablewrap td:last-child, .tablewrap th:last-child { text-align: right; white-space: nowrap; padding-right: 0; }
.tablewrap tr.total td { color: #000; background: var(--aqua); font-weight: 700; padding-left: 0.5rem; }
.tablewrap tr.total td:last-child { padding-right: 0.5rem; }
@media (max-width: 639px) {
  .tablewrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tablewrap table, .tablewrap tbody, .tablewrap tr, .tablewrap td { display: block; width: 100%; }
  .tablewrap tr { padding: 0.75rem 0; border-bottom: 1px solid var(--faint); }
  .tablewrap td { border: 0; padding: 0; text-align: left !important; white-space: normal !important; }
  .tablewrap td:first-child { color: var(--ink-hi); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .tablewrap td:nth-child(2) { color: var(--dim); margin: 0.25rem 0; }
  .tablewrap td:last-child { color: var(--aqua); }
  .tablewrap tr.total { background: var(--aqua); padding: 0.625rem 0.5rem; }
  .tablewrap tr.total td { background: none; padding: 0; color: #000; }
}

/* ---------------------------------------------------------------- fin de boucle */
.fin { max-width: none; min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.875rem; text-align: center; }
.fin__a { font: 400 0.6875rem/1.6 var(--mono); letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }
.fin__b { font: 700 0.6875rem/1.6 var(--mono); letter-spacing: .16em; color: var(--aqua); text-transform: uppercase; }

/* ---------------------------------------------------------------- sommaire (index) */
.sommaire {
  position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .94);
  overflow-y: auto; overscroll-behavior: contain;
}
.sommaire__in { max-width: 51.25rem; margin: 0 auto; padding: 0 var(--gutter) 3.75rem; }
.sommaire__head {
  position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center;
  height: var(--hud-h); background: #000;
  font: 400 0.6562rem/1 var(--mono); letter-spacing: .1em; color: var(--dim);
}
.sommaire__list { list-style: none; margin: 1.125rem 0 0; padding: 0; }
.sommaire__list a {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 0.5625rem 0; text-decoration: none;
  border-bottom: 1px solid var(--faint); font: 400 0.8125rem/1.45 var(--mono); color: var(--ink);
}
.sommaire__list .lv1 a { margin-top: 1.125rem; font-weight: 700; color: var(--ink-hi); text-transform: uppercase; letter-spacing: .04em; }
.sommaire__list .lv2 a { font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: .04em; }
.sommaire__list .lv3 a { padding-left: 1.125rem; color: var(--dim); }
.sommaire__list a span:last-child { color: var(--aqua); }
.sommaire__list a:hover, .sommaire__list a:focus-visible { color: #000; background: var(--aqua); outline: none; }
.sommaire__list a:hover span:last-child, .sommaire__list a:focus-visible span:last-child { color: #000; }

/* ---------------------------------------------------------------- mouvement reduit */
@media (prefers-reduced-motion: reduce) {
  .cover__bin { animation: none; }
  .tear { display: none; }
}

/* un mot trop long pour l'ecran se coupe plutot que de deborder */
.cover__title, .t-part__t, .t-chap__t, .hero__t, .fiche__t, .t-sec__t { overflow-wrap: anywhere; }
/* les boutons du haut ne se laissent jamais pousser : c'est le texte a cote qui se coupe */
.hud__btn { flex: none; }
.hud__id, .sommaire__head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- ecran : bloom et incurvation */
/* Bloom : le texte rayonne legerement, comme du phosphore. */
body { text-shadow: 0 0 .5em rgba(214, 232, 228, .22); }
.cover__bin { text-shadow: none; }
.cover__bin .oc { text-shadow: 0 0 6px rgba(var(--aqua-rgb), .9), 0 0 18px rgba(var(--halo-rgb), .55); }
.t-sub__t, .note__n, .call, .diag__bar i, .folio__loop, #folio-ref, .fiche__h, .keyfigs__h,
.t-part__k, .t-chap__k, .hero__k, .fin__b, .quote, .sq, .list li::before, .bib li::before, .kf__l::before {
  text-shadow: 0 0 .35em rgba(var(--aqua-rgb), .75), 0 0 1.1em rgba(var(--halo-rgb), .35);
}
.t-part__t, .t-chap__t, .cover__title, .kf__v, .fiche__t { text-shadow: 0 0 .25em rgba(255, 255, 255, .28), 0 0 1em rgba(214, 232, 228, .16); }
/* etiquettes a fond aqua : texte noir net, c'est le cadre qui rayonne */
.tag, .t-sec__t, .rail__c span, .hero__k span, .tablewrap tr.total td, .somm a:hover {
  text-shadow: none;
  box-shadow: 0 0 10px rgba(var(--aqua-rgb), .45), 0 0 26px rgba(var(--halo-rgb), .2);
}
.hero__k span { box-shadow: none; }

/* Incurvation : un ecran aux coins arrondis dans un cadre noir, bords assombris comme la dalle
   d'un tube cathodique, reflet de verre et lueur au centre. Un calque fixe, qui ne deforme pas le texte. */
.screen {
  position: fixed; inset: 0; z-index: 46; pointer-events: none;
  border-radius: clamp(14px, 3.6vmin, 46px);
  box-shadow:
    0 0 0 100vmax #000,
    inset 0 0 0 1px rgba(214, 232, 228, .07),
    inset 0 0 3vmin 1vmin rgba(0, 0, 0, .9),
    inset 0 0 16vmin 4vmin rgba(0, 0, 0, .5);
}
.screen::before, .screen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
/* la dalle est un noir phosphore a peine eclaire : elle se detache du cadre, qui est noir pur */
.screen::before {
  background:
    radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .45) 100%),
    radial-gradient(55% 38% at 20% 10%, rgba(255, 255, 255, .05), transparent 70%);
}
.screen::after {
  background: radial-gradient(ellipse at center, rgba(var(--aqua-rgb), .07), rgba(120, 150, 145, .035) 55%, transparent 85%);
  mix-blend-mode: screen;
}
@media (min-width: 700px) {
  .screen { inset: .8vmin; }
}

/* L'interface (bandeau, statut, colonne de repere, index) passe au-dessus de l'effet d'ecran :
   sous le calque, elle etait assombrie par les bords et la vignette. */
.hud, .folio, .rail { z-index: 50; }
.sommaire { z-index: 55; }
.skip { z-index: 60; }
.hud, .folio { text-shadow: 0 0 .5em rgba(214, 232, 228, .25); }
/* grand ecran : l'interface se cale a l'interieur de la dalle, pas dans le cadre noir */
@media (min-width: 700px) {
  .hud { top: .8vmin; left: .8vmin; right: .8vmin; }
  .folio { bottom: .8vmin; left: .8vmin; right: .8vmin; }
}

/* Sommaire redige : seuls les titres du memoire sont en pleine lumiere, le texte de liaison est
   attenue pour qu'on ne le confonde pas avec une partie. */
.somm { color: rgba(207, 212, 211, .34); text-shadow: none; }
.somm a { color: var(--ink-hi); text-shadow: 0 0 .5em rgba(214, 232, 228, .22); }

/* fixed CRT layers on their own compositor layers: not repainted with the text while scrolling */
.crt, .screen, .screen::before, .screen::after { will-change: transform; transform: translateZ(0); }

/* ---------------------------------------------------------------- chargement */
.boot {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  padding: 0 var(--gutter);
  background: #000;
  font: 400 0.6875rem/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; text-align: center;
  transition: opacity .5s ease, visibility .5s;
}
.boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot__t { margin: 0; color: var(--aqua); text-shadow: 0 0 .5em rgba(var(--aqua-rgb), .6); }
.boot__s { margin: 0; color: var(--dim); font-size: 0.5625rem; }
.boot__dots::after { content: ''; animation: boot-dots 1.2s steps(4) infinite; }
@keyframes boot-dots {
  0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; }
}
.boot__bar {
  position: relative; display: block; overflow: hidden;
  width: min(16rem, 60vw); height: 2px; background: var(--faint);
}
.boot__bar i {
  position: absolute; inset: 0; width: 35%;
  background: var(--aqua); box-shadow: 0 0 8px var(--aqua);
  animation: boot-bar 1.1s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes boot-bar { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) {
  .boot__bar i { animation: none; width: 100%; opacity: .5; }
  .boot__dots::after { animation: none; content: '...'; }
}

/* ---------------------------------------------------------------- FX : couleur d'accent */
.hud__actions { display: flex; gap: 0.5rem; flex: none; }
.hud__start { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.hud__back { flex: none; text-decoration: none; }
@media (pointer: coarse) {
  :root { --hud-h: 3.75rem; }
  .hud__btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 480px) { .hud__id { display: none; } }
.fx-btn { display: inline-flex; align-items: center; gap: 0.5em; }
.fx-btn__dot { width: 0.5rem; height: 0.5rem; background: var(--aqua); box-shadow: 0 0 6px var(--aqua); }
.fx-btn[aria-expanded="true"] { border-color: var(--aqua); color: var(--aqua); }
.fx-pop {
  position: fixed; z-index: 56; top: calc(var(--hud-h) + 0.5rem); right: var(--gutter);
  width: min(17rem, calc(100vw - 2 * var(--gutter)));
  padding: 0.875rem 1rem; background: rgba(0, 0, 0, .94); border: 1px solid var(--faint);
  font: 400 0.625rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.fx-pop[hidden] { display: none; }
.fx-pop__t { margin: 0 0 0.875rem; color: var(--ink-hi); font-weight: 700; }
.fx-pop__row { display: flex; align-items: center; gap: 0.625rem; }
.fx-pop__row label { flex: 1; }
.fx-pop input[type="color"] {
  -webkit-appearance: none; appearance: none; width: 2rem; height: 1.25rem; padding: 0;
  border: 1px solid var(--faint); background: none; cursor: pointer;
}
.fx-pop input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.fx-pop input[type="color"]::-webkit-color-swatch { border: none; }
.fx-pop input[type="color"]::-moz-color-swatch { border: none; }
.fx-pop__val { min-width: 4.5em; text-align: right; color: var(--aqua); font-variant-numeric: tabular-nums; }
.fx-pop__reset { margin-top: 0.875rem; width: 100%; }
@media (min-width: 700px) {
  .fx-pop { top: calc(.8vmin + var(--hud-h) + 0.5rem); right: calc(.8vmin + var(--gutter)); }
}

/* ?apercu : la couverture seule, figee (image de partage) */
.apercu .hud, .apercu .folio, .apercu .rail, .apercu .cover__hint, .apercu .skip { display: none; }
.apercu .cover__bin { animation: none; background-position: 30% 0; }
.apercu .cover__line { font-size: 1.15rem; letter-spacing: .08em; color: var(--ink); }
.apercu .cover__meta { padding-bottom: 3.2rem; }