/* Polices auto-hébergées (licence SIL Open Font License, sous-ensemble latin de Fontsource). Aucune requête vers Google Fonts.
   Les navigateurs ne téléchargent une police que si une page l'utilise réellement. Fraunces et Newsreader sont des polices
   variables allégées aux plages de graisse/taille optique utilisées (tools/alleger-polices.py) ; le nom du fichier porte la plage. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/fraunces-normal-300_700-latin.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/fraunces-italic-300_700-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/instrument-sans-normal-400_700-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/instrument-sans-italic-400_700-latin.woff2") format("woff2"); }
/* Sous-titre grec « ΑΙΩΝΙΑ » : 4 glyphes de GFS Didot (OFL), 1 Ko, utilisés seulement pour la plage grecque. */
@font-face { font-family: "AKIA Grec"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/gfs-didot-grec-aionia.woff2") format("woff2"); unicode-range: U+0391, U+0399, U+039D, U+03A9; }
/* AIONIA — Lumière */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/cormorant-garamond-normal-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/cormorant-garamond-italic-400-latin.woff2") format("woff2"); }
/* Témoins de Papier — Papier */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/newsreader-normal-400_700-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/newsreader-italic-400_700-latin.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/courier-prime-normal-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/courier-prime-normal-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/courier-prime-italic-400-latin.woff2") format("woff2"); }
/* AnonySong — Son */
@font-face { font-family: "Syne"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/syne-normal-400_800-latin.woff2") format("woff2"); }
/* Témoins de Papier — titre slab lourd, comme la bannière de la chaîne (Bevan, OFL, 21 Ko, ajouté le 2026-10-20) */
@font-face { font-family: "Bevan"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/bevan-latin-400-normal.woff2") format("woff2"); }
/* Gemini EternaL — Miroir : capitales gravées du logo (Cinzel variable 400–900, OFL, 25 Ko, ajouté le 2026-10-20) */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/cinzel-latin-wght-normal.woff2") format("woff2"); }
/* Gemini EternaL — titre : capitales ornées (Cinzel Decorative 700, OFL, 15 Ko, ajouté le 2026-10-20 : « plus mythique ») */
@font-face { font-family: "Cinzel Decorative"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/cinzel-decorative-latin-700-normal.woff2") format("woff2"); }

/* ==========================================================================
   AKIA.pro — feuille de style
   1. jetons · 2. base · 3. cadre (entête, pied) · 4. accueil · 5. monde · 6. pages & formulaire · 7. mouvement
   Le cadre AKIA est « la pierre » (clair, ou nuit en mode sombre). Chaque monde redéfinit ses couleurs via
   [data-monde] (variables --m-* générées dans mondes.css à partir des fichiers content/mondes/*.md).
   ========================================================================== */

/* 1. JETONS ------------------------------------------------------------- */
:root {
  --police-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --police-texte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --police-etiquette: var(--police-texte);

  --fond: #F3F0EA; --fond-2: #E9E4DA; --encre: #15130F; --encre-2: #5F5A50; --filet: #D6D0C4; --accent: #15130F;
  --m-schema: light;

  --gouttiere: clamp(1rem, 4vw, 3rem);
  --largeur-max: 90rem;
  --mesure: 64ch;
  --rayon: 0.125rem;
  --duree: 220ms; --courbe: cubic-bezier(.2, .7, .2, 1);

  --t-corps: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --t-petit: 0.8125rem;
  --t-etiquette: 0.75rem; /* 12 px : plancher de lisibilité (audit du 2026-10-20, T-05 ; 0,72rem = 11,5 px auparavant) */
  --t-3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  --t-1: clamp(2.4rem, 1.4rem + 4.5vw, 6rem);
  --t-planche: clamp(2.6rem, 1.4rem + 5.5vw, 6.75rem);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-monde]) {
    --fond: #141311; --fond-2: #1C1A17; --encre: #EDE8DF; --encre-2: #A39D92; --filet: #2F2B26; --accent: #EDE8DF;
    color-scheme: dark;
  }
}
[data-monde] {
  --fond: var(--m-fond); --fond-2: var(--m-fond-2); --encre: var(--m-encre); --encre-2: var(--m-encre-2);
  --filet: var(--m-filet); --accent: var(--m-accent); --police-etiquette: var(--m-police-etiquette, var(--police-texte));
  color-scheme: var(--m-schema);
}

/* 2. BASE --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--fond); }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--fond); color: var(--encre);
  font: 400 var(--t-corps)/1.55 var(--police-texte);
  font-feature-settings: "kern", "liga"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  transition: background-color 400ms var(--courbe), color 400ms var(--courbe);
}
main { flex: 1; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); transition: text-decoration-color var(--duree) var(--courbe); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--rayon); }
::selection { background: var(--accent); color: var(--fond); }
h1, h2, h3, h4 { font-family: var(--police-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; margin: 0; text-wrap: balance; font-variation-settings: "opsz" 144; }
p { margin: 0; text-wrap: pretty; }
ol, ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--filet); margin: 2rem 0; }
code { font-family: var(--police-mono); font-size: 0.92em; }
b, strong { font-weight: 600; }
time { font-variant-numeric: tabular-nums; }

mark.a-fournir { background: color-mix(in oklab, var(--accent) 16%, transparent); color: inherit; outline: 1px dashed var(--accent); outline-offset: 2px; padding: 0 .25em; border-radius: var(--rayon); box-decoration-break: clone; }
mark.a-fournir::before { content: "À fournir — "; font-size: .72em; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cadre { width: min(100% - 2 * var(--gouttiere), var(--largeur-max)); margin-inline: auto; }
.etiquette { font-family: var(--police-etiquette); font-size: var(--t-etiquette); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--encre-2); line-height: 1.4; }
.lien-fleche { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: .2rem; }
.lien-fleche span { transition: translate var(--duree) var(--courbe); }
.lien-fleche:hover span { translate: .3rem 0; }

.prose { max-width: var(--mesure); font-size: calc(var(--t-corps) * 1.08); line-height: 1.6; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--t-2); margin-top: 1.6em; }
.prose h3 { font-size: var(--t-3); margin-top: 1.4em; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose ol { list-style: decimal; padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 1rem; color: var(--encre-2); font-family: var(--police-display); font-style: italic; font-size: 1.12em; }
.prose a { text-decoration-color: var(--accent); padding-block: .125rem; background-origin: content-box; /* lien en ligne : cible ≥ 24 px sans toucher à la ligne ni au soulignement animé */ }
/* Soulignement qui se trace au survol (en plus du soulignement discret toujours présent). */
.prose a, .journal-accueil a, .liens-liste a > span { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size 320ms var(--courbe), text-decoration-color var(--duree) var(--courbe); }
.prose a:hover, .journal-accueil a:hover, .liens-liste a:hover > span { background-size: 100% 1px; }

.skip { position: absolute; left: var(--gouttiere); top: -100%; z-index: 100; background: var(--encre); color: var(--fond); padding: .6rem 1rem; text-decoration: none; }
.skip:focus { top: .6rem; }

/* 3. CADRE : entête et pied -------------------------------------------- */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--filet); }
.marque { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-family: var(--police-display); font-weight: 600; letter-spacing: .16em; font-size: 1rem; }
.marque .monogramme { width: 1.75rem; height: 1.75rem; flex: none; }
.nav { display: flex; gap: clamp(.9rem, 2.5vw, 2rem); font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }
.nav a { text-decoration: none; padding: .3rem 0; border-bottom: 1px solid transparent; transition: border-color var(--duree) var(--courbe); }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
@media (max-width: 30rem) { .marque span { display: none; } .nav { gap: .9rem; font-size: .75rem; letter-spacing: .06em; } /* menu mobile : 12 px minimum, était .72rem (T-05) */ }

.pied { border-top: 1px solid var(--filet); margin-top: clamp(3rem, 7vw, 6rem); padding-block: 2rem 2.5rem; font-size: var(--t-petit); color: var(--encre-2); display: grid; gap: 1.4rem; }
.pied p + p { margin-top: .35rem; }
.pied b { color: var(--encre); }
.pied-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
/* Zone cliquable ≥ 24 px (WCAG 2.5.8) sans changer la mise en page : le padding agrandit la cible, la marge négative le compense. */
.pied-nav a { text-decoration: none; padding-block: .1875rem; margin-block: -.1875rem; }
.pied-nav a:hover { text-decoration: underline; }
@media (min-width: 48rem) { .pied { grid-template-columns: 1fr auto; align-items: end; } }

/* 4. ACCUEIL ------------------------------------------------------------ */
.heros { display: grid; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 60rem) { .heros { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
/* Le logo de l'accueil : le monogramme gravé, cadre à méandre (src/templates/logo-meandre.html). Les anneaux de la machine
   ont été essayés puis retirés (décision du 2026-10-20) : la « machine » se lit dans la légende des mondes, sous le logo. */
.logo-bloc { display: grid; gap: 1.25rem; }
.logo-geant { width: min(100%, 26rem); height: auto; aspect-ratio: 1; color: var(--encre); }
.logo-geant .lettre { transform-box: fill-box; }
.heros-legende { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: .9rem; font-size: var(--t-petit); color: var(--encre-2); }
.heros-legende b { color: var(--encre); font-family: var(--police-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .1em; margin-right: .4rem; }
.heros-legende span:nth-child(2) b { font-style: italic; }
/* Acronyme (2026-10-21) : l'initiale en valeur, collée au mot (A·rt, K·nowledge…) ; plus de lettre en italique. */
.heros-acronyme { gap: .4rem 1.4rem; }
.heros-acronyme b, .heros-acronyme span:nth-child(2) b { margin-right: 0; font-style: normal; }
.heros-texte { max-width: 36rem; }
.heros-accroche { font-family: var(--police-display); font-size: var(--t-2); line-height: 1.15; font-weight: 400; letter-spacing: -0.015em; margin-top: 1rem; text-wrap: balance; }
.heros-sous { margin-top: 1.25rem; color: var(--encre-2); font-size: calc(var(--t-corps) * 1.05); max-width: 32rem; }
.heros .lien-fleche { margin-top: 2rem; }
.legende-mondes { display: grid; gap: .15rem; font-size: var(--t-petit); margin-top: .5rem; }
.legende-mondes a { text-decoration: none; display: inline-flex; gap: .7rem; align-items: baseline; padding: .3rem 0 .3rem .7rem; border-left: 3px solid var(--c, var(--filet)); transition: translate var(--duree) var(--courbe); }
.legende-mondes a:hover { translate: .25rem 0; }
.legende-mondes b { font-family: var(--police-display); font-weight: 300; font-size: 1.15rem; min-width: 2ch; }
.legende-mondes .en-cours a { color: var(--encre-2); border-left-style: dashed; }
.legende-mondes small { font-size: var(--t-etiquette); text-transform: uppercase; letter-spacing: .08em; }

.section-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.25rem; border-top: 1px solid var(--filet); }
.section-entete h2 { font-size: var(--t-3); font-weight: 500; }
.section-entete p { color: var(--encre-2); font-size: var(--t-petit); }

.planches { display: grid; }
.planche {
  --retrait: max(var(--gouttiere), calc((100% - var(--largeur-max)) / 2 + var(--gouttiere)));
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num matiere" "num titre" "num accroche" "num date" "num entrer";
  column-gap: clamp(1rem, 3vw, 2.5rem); row-gap: .4rem; align-content: center;
  min-height: clamp(17rem, 44vh, 27rem); padding: clamp(1.75rem, 4vw, 3rem) var(--retrait);
  background: var(--fond); color: var(--encre); text-decoration: none; border-top: 1px solid var(--filet);
  transition: background-color 400ms var(--courbe);
}
.planche-num { grid-area: num; font-family: var(--police-display); font-size: var(--t-2); font-weight: 300; line-height: 1; color: var(--encre-2); font-variant-numeric: tabular-nums; align-self: start; padding-top: .35rem; min-width: 2ch; }
.planche-matiere { grid-area: matiere; }
.planche-titre { grid-area: titre; font-family: var(--m-police-titre, var(--police-display)); font-size: var(--t-planche); font-weight: var(--m-titre-graisse, 500); font-style: var(--m-titre-style, normal); text-transform: var(--m-titre-casse, none); letter-spacing: var(--m-titre-espacement, 0); line-height: .95; text-wrap: balance; max-width: 14ch; margin-block: .3rem .4rem; font-variation-settings: "opsz" 144; }
.planche-titre.titre-long { font-size: min(clamp(1.9rem, 0.6rem + 5vw, 6rem), calc(var(--m-titre-max, 100cqi) * 0.85)); max-width: none; }
.planche-titre.titre-tres-long { font-size: min(clamp(1.6rem, 0.6rem + 4vw, 5rem), calc(var(--m-titre-max, 100cqi) * 0.85)); max-width: none; }
.planche-accroche { grid-area: accroche; max-width: 38rem; color: var(--encre-2); font-size: calc(var(--t-corps) * 1.02); }
/* Signe de vie (T-07) : « Dernière séquence : 20 oct. 2026 », date absolue lue dans le flux de la chaîne ; absente sans flux. */
.planche-date { grid-area: date; font-size: var(--t-petit); color: var(--encre-2); font-variant-numeric: tabular-nums; margin-top: .35rem; }
.planche-entrer { grid-area: entrer; justify-self: start; margin-top: 1.2rem; font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; display: inline-flex; gap: .5rem; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }
.planche-entrer::after { content: "→"; transition: translate var(--duree) var(--courbe); }
.planche:hover .planche-entrer::after, .planche:focus-visible .planche-entrer::after { translate: .35rem 0; }
.planche-texture { position: absolute; inset: 0 0 0 auto; width: min(62%, 44rem); z-index: -1; color: var(--accent); opacity: .5; pointer-events: none; mask-image: linear-gradient(to right, transparent, #000 40%); -webkit-mask-image: linear-gradient(to right, transparent, #000 40%); transition: opacity 600ms var(--courbe), scale 1.4s var(--courbe); }
.planche-texture .tx { width: 100%; height: 100%; }
/* Lumière réactive (site.js) : la texture glisse de quelques pour cent vers le pointeur, en douceur. */
.planche-texture, .monde-texture { transition: translate 700ms var(--courbe), opacity 600ms var(--courbe), scale 1.4s var(--courbe); will-change: translate; }
/* Textures : .tx est un bloc qui remplit son conteneur ; les parties animées sont des éléments HTML/SVG entiers
   (transform composité par le GPU), jamais des sous-éléments SVG animés un à un. */
.tx { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; }
.tx svg { display: block; }
.tx-lumiere-fond, .tx-son-onde { position: absolute; inset: 0; width: 100%; height: 100%; }
.tx-rayons { position: absolute; left: 50%; top: 50%; width: max(200%, 140vh); aspect-ratio: 1; height: auto; translate: -50% -50%; transform-origin: center; }
.tx-barres { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-evenly; padding-inline: 2%; }
.tx-barres i { display: block; width: 1.3%; min-width: 2px; height: var(--h, 30%); background: currentColor; opacity: .82; border-radius: 1px; transform-origin: center; }
.tx-barres i:nth-child(8n+1) { --h: 14%; } .tx-barres i:nth-child(8n+2) { --h: 30%; } .tx-barres i:nth-child(8n+3) { --h: 46%; } .tx-barres i:nth-child(8n+4) { --h: 22%; }
.tx-barres i:nth-child(8n+5) { --h: 58%; } .tx-barres i:nth-child(8n+6) { --h: 36%; } .tx-barres i:nth-child(8n+7) { --h: 70%; } .tx-barres i:nth-child(8n+8) { --h: 26%; }
/* Œil (AnonySong) : onde et barres fixes en fond, iris qui tourne (un seul bloc animé), contour et Λ fixes. */
.tx-oeil-fond, .tx-miroir-fond, .tx-miroir-etoiles { position: absolute; inset: 0; width: 100%; height: 100%; }
.tx-oeil-iris, .tx-oeil-contour { position: absolute; left: 56%; top: 50%; height: 88%; width: auto; aspect-ratio: 1; translate: -50% -50%; transform-origin: center; }
/* Miroir (Gemini EternaL) : deux lumières, un axe d'or, deux lunes ; les étoiles scintillent comme un seul bloc. */
.tx-miroir-etoiles { transform-origin: center; }
/* Hors de l'écran (classe posée par site.js), les textures sont figées : rien ne tourne pour personne. */
.hors-vue .tx, .hors-vue .tx * { animation-play-state: paused !important; }
.planche:hover .planche-texture, .planche:focus-visible .planche-texture { opacity: .85; scale: 1.03; }
.planche:focus-visible { outline-offset: -4px; }
@media (max-width: 40rem) {
  .planche { grid-template-columns: minmax(0, 1fr); grid-template-areas: "matiere" "titre" "accroche" "date" "entrer"; }
  .planche-num { display: none; }
  .planche-texture { width: 100%; opacity: .3; mask-image: linear-gradient(to bottom, transparent, #000 50%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 50%); }
}
.planche-vide { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; min-height: 7rem; padding-block: 1.5rem; border-top: 1px dashed var(--filet); border-bottom: 1px solid var(--filet); color: var(--encre-2); }
.planche-vide .planche-num { padding: 0; }

.journal-accueil { display: grid; gap: 0; }
.journal-accueil li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0 .9rem 1rem; border-bottom: 1px solid var(--filet); border-left: 3px solid var(--accent-monde, var(--filet)); }
.journal-accueil li:last-child { border-bottom: 0; }
.journal-accueil a { text-decoration: none; font-weight: 600; }
.journal-accueil a:hover { text-decoration: underline; }
.journal-accueil p { color: var(--encre-2); }
@media (max-width: 40rem) { .journal-accueil li { grid-template-columns: minmax(0, 1fr); gap: .25rem; } }

.contact-bande { padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--filet); display: grid; gap: 1.25rem; }
.contact-bande h2 { font-size: var(--t-1); font-weight: 400; letter-spacing: -0.02em; max-width: 18ch; line-height: 1; }

/* 5. MONDE -------------------------------------------------------------- */
.monde-entete { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 9vw, 7rem) clamp(2.5rem, 7vw, 5rem); border-bottom: 1px solid var(--filet); }
.monde-entete .cadre { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
.monde-entete .cadre > * { min-width: 0; }
.monde-sur-titre { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.monde-titre { font-family: var(--m-police-titre, var(--police-display)); font-size: clamp(3rem, 1.8rem + 9vw, 11rem); font-weight: var(--m-titre-graisse, 500); font-style: var(--m-titre-style, normal); text-transform: var(--m-titre-casse, none); letter-spacing: var(--m-titre-espacement, 0); line-height: .92; max-width: 12ch; margin-top: .5rem; }
.monde-titre.titre-long { font-size: min(clamp(2rem, 0.3rem + 7.5vw, 8.5rem), var(--m-titre-max, 100cqi)); max-width: none; }
.monde-titre.titre-tres-long { font-size: min(clamp(1.6rem, 0.3rem + 5.5vw, 6.5rem), var(--m-titre-max, 100cqi)); max-width: none; }
@media (max-width: 40rem) { .monde-titre, .planche-titre { overflow-wrap: anywhere; } }
.monde-sous-titre { font-family: "AKIA Grec", var(--m-police-titre, var(--police-display)); font-size: var(--t-2); color: var(--encre-2); font-weight: 400; letter-spacing: .04em; }
.monde-accroche { max-width: 42rem; font-size: calc(var(--t-corps) * 1.18); line-height: 1.45; margin-top: .75rem; }
.monde-texture { position: absolute; inset: -12% -8% -12% auto; width: min(72%, 62rem); z-index: -1; color: var(--accent); opacity: .5; pointer-events: none; mask-image: radial-gradient(ellipse at 65% 50%, #000 25%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 65% 50%, #000 25%, transparent 72%); }
.monde-texture .tx { width: 100%; height: 100%; }
@media (max-width: 40rem) { .monde-texture { width: 110%; inset: auto -5% -10% auto; height: 60%; opacity: .35; } .prose, .planche-accroche, .monde-accroche { hyphens: auto; -webkit-hyphens: auto; } }

.bloc { padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--filet); }
.bloc:first-of-type { border-top: 0; }
.bloc-grille { display: grid; gap: 1.25rem 3rem; align-items: start; }
@media (min-width: 56rem) { .bloc-grille { grid-template-columns: 14rem minmax(0, 1fr); } .bloc-grille > .etiquette, .bloc-grille > .bloc-tete { position: sticky; top: 1.5rem; } }
/* Tête de section avec une date sous l'étiquette (« Séquences » + « Dernière séquence : … »), T-07. */
.bloc-tete { display: grid; gap: .5rem; align-content: start; }
.bloc-date { font-size: var(--t-petit); color: var(--encre-2); font-variant-numeric: tabular-nums; }

.facettes { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .facettes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.facette { border-top: 1px solid var(--filet); padding-top: 1rem; display: grid; gap: .6rem; align-content: start; }
.facette h3 { font-family: var(--m-police-titre, var(--police-display)); font-size: var(--t-3); font-weight: 500; font-style: var(--m-titre-style, normal); }
.facette p { color: var(--encre-2); }

.galerie { display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); grid-auto-flow: dense; align-items: start; }
.galerie-item figure { display: grid; gap: .55rem; }
.galerie-item.paysage:first-child:nth-last-child(n+4) { grid-column: span 2; }
@media (max-width: 36rem) { .galerie-item.paysage:first-child:nth-last-child(n+4) { grid-column: span 1; } }
.galerie-cadre { display: block; position: relative; aspect-ratio: 3 / 2; background: var(--fond-2); border: 1px solid var(--filet); overflow: hidden; }
.portrait-img .galerie-cadre { aspect-ratio: 3 / 4; }
.carre .galerie-cadre { aspect-ratio: 1; }
.galerie-cadre img { width: 100%; height: 100%; object-fit: cover; transition: scale 700ms var(--courbe); }
a.galerie-cadre:hover img { scale: 1.03; }
.galerie-vide { display: grid; place-items: center; text-align: center; padding: 1rem; color: var(--encre-2); }
.galerie-vide .tx { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .22; color: var(--accent); }
.galerie-vide > span { position: relative; display: grid; gap: .4rem; font-size: var(--t-petit); max-width: 22ch; }
.galerie-vide > span b { font-family: var(--police-etiquette); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: var(--t-etiquette); }
figcaption { font-size: var(--t-petit); color: var(--encre-2); }

.videos { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.video { display: grid; gap: .55rem; }
.video-cadre { position: relative; aspect-ratio: 16 / 9; background: var(--fond-2); border: 1px solid var(--filet); overflow: hidden; }
.video-pied { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-size: var(--t-petit); }
/* Le pied peut passer sur deux lignes (titre, puis date + lien) : sur téléphone, cote + date + lien insécables dépassaient 390 px (constat du 2026-10-20). */
.video-pied { flex-wrap: wrap; row-gap: .3rem; }
.video-meta { display: inline-flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }
.video-date { color: var(--encre-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.video-ouvrir { color: var(--encre-2); white-space: nowrap; text-decoration: none; padding-block: .1875rem; margin-block: -.1875rem; /* cible ≥ 24 px, même astuce que .pied-nav a */ }
.video-ouvrir:hover { text-decoration: underline; }
.video-bouton { all: unset; cursor: pointer; display: block; width: 100%; height: 100%; position: relative; }
.video-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.video-bouton img { width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--courbe); }
.video-bouton:hover img, .video-bouton:focus-visible img { scale: 1.04; }
.video-note { opacity: .75; transition: opacity var(--duree) var(--courbe); }
.video-bouton:hover .video-note { opacity: 1; }
.video-bouton .tx { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; color: var(--accent); }
.video-lecture { position: absolute; inset: 0; display: grid; place-items: center; }
.video-lecture svg { width: 4rem; height: 4rem; color: var(--accent); filter: drop-shadow(0 2px 14px rgb(0 0 0 / .35)); transition: scale var(--duree) var(--courbe); }
.video-lecture path { fill: var(--fond); }
.video-bouton:hover .video-lecture svg { scale: 1.08; }
.video-titre { font-weight: 500; }
.video-note { position: absolute; left: 1rem; top: .85rem; }
.video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tag { display: inline-block; padding: .05rem .55rem; border: 1px solid var(--filet); border-radius: 999px; font-size: .75rem; /* 12 px minimum (était .68rem = 10,9 px) */ letter-spacing: .08em; vertical-align: middle; margin-left: .25rem; }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: .25rem 1.25rem; }
.filtre { all: unset; cursor: pointer; padding: .4rem .95rem; border: 1px solid var(--filet); border-radius: 999px; font-size: var(--t-petit); letter-spacing: .04em; transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe); }
.filtre:hover { border-color: var(--encre); }
.filtre[aria-pressed="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.filtre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.autres-mondes { padding-block: 1.5rem .5rem; }
.planches-compactes li { border-top: 1px solid var(--filet); }
.planches-compactes li:last-child { border-bottom: 1px solid var(--filet); }
.planches-compactes a { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: .9rem 0 .9rem 1rem; border-left: 3px solid var(--accent); text-decoration: none; }
.planches-compactes .planche-num { font-size: var(--t-3); padding: 0; }
.compact-titre { font-family: var(--m-police-titre, var(--police-display)); font-size: var(--t-3); font-weight: var(--m-titre-graisse, 500); font-style: var(--m-titre-style, normal); text-transform: var(--m-titre-casse, none); }
.compact-meta { color: var(--encre-2); font-size: var(--t-petit); }
@media (max-width: 40rem) { .planches-compactes a { grid-template-columns: minmax(0, 1fr); gap: .2rem; } .planches-compactes .planche-num { display: none; } }

.liens-liste li a { display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 0; border-top: 1px solid var(--filet); text-decoration: none; }
.liens-liste li:last-child a { border-bottom: 1px solid var(--filet); }
.liens-liste li a::after { content: "↗"; color: var(--encre-2); transition: translate var(--duree) var(--courbe); }
.liens-liste li a:hover::after { translate: .2rem -.2rem; }
.liens-liste small { color: var(--encre-2); margin-left: .6rem; }

.journal li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--filet); }
.journal li:last-child { border-bottom: 1px solid var(--filet); }
.journal h3 { font-family: var(--police-texte); font-size: var(--t-corps); font-weight: 600; letter-spacing: 0; margin-bottom: .2rem; }
.journal p { color: var(--encre-2); max-width: var(--mesure); }
@media (max-width: 40rem) { .journal li { grid-template-columns: minmax(0, 1fr); gap: .3rem; } }

/* Orientation (T-08) : en bas de chaque monde, le précédent et le suivant ; deux planches côte à côte dès 48 rem
   (contenu aligné sur la colonne de lecture : --retrait recalculé sur 200 % = la largeur de la bande), empilées en dessous. */
.monde-nav { display: grid; }
.monde-nav .planche { min-height: 14rem; grid-template-areas: "matiere" "titre" "entrer"; grid-template-columns: minmax(0, 1fr); }
.monde-nav .planche-titre { font-size: var(--t-1); }
/* Côte à côte, chaque planche n'a que la moitié de la largeur : le titre est borné par la place disponible (--m-titre-max, en cqi). */
.monde-nav.deux .planche-titre { font-size: min(clamp(1.8rem, 1rem + 3vw, 4rem), calc(var(--m-titre-max, 100cqi) * 0.85)); }
.monde-precedent .planche-entrer::after { content: "←"; order: -1; }
.monde-precedent:hover .planche-entrer::after, .monde-precedent:focus-visible .planche-entrer::after { translate: -.35rem 0; }
@media (min-width: 40.01rem) {
  .monde-precedent .planche-texture { inset: 0 auto 0 0; mask-image: linear-gradient(to left, transparent, #000 40%); -webkit-mask-image: linear-gradient(to left, transparent, #000 40%); }
  .monde-precedent .planche-objet img { object-position: left center; }
}
@media (min-width: 48rem) {
  .monde-nav.deux { grid-template-columns: 1fr 1fr; }
  .monde-nav.deux .planche { --retrait: max(var(--gouttiere), calc((200% - var(--largeur-max)) / 2 + var(--gouttiere))); }
  .monde-nav.deux .monde-precedent { padding-inline: var(--retrait) var(--gouttiere); }
  .monde-nav.deux .monde-suivant { padding-inline: var(--gouttiere) var(--retrait); justify-items: end; text-align: right; border-left: 1px solid var(--filet); }
  .monde-nav.deux .monde-suivant .planche-entrer { justify-self: end; }
}

/* 5b. SIGNES DES MONDES : champs facultatifs d'un monde (objet et cœur, tampon, phrases, devise, étiquette, filets,
   fenêtres, cote, objet de planche). Tout est générique : couleurs et polices viennent des variables du monde. */
.monde-titre, .planche-titre { color: var(--m-titre-couleur, inherit); }
/* Effets de titre (champ titre_effet, liste blanche du générateur) : un dégradé dans les lettres, sans animation, sur la page et
   sur la planche. Les couleurs viennent du monde : « or » et « bronze » de couleurs.or (sinon l'accent), « encre » des encres,
   « néon » de accent 2 → accent → or (décisions D14–D16 du 2026-10-21 : Témoins encre, AnonySong néon, AIONIA bronze).
   Avec background-clip: text et l'interligne serrée des titres, les accents (É) sortiraient de la boîte et perdraient le
   dégradé : un peu de padding en haut, compensé par la marge, pour que rien ne bouge. */
.monde-titre.effet-or, .planche-titre.effet-or, .monde-titre.effet-encre, .planche-titre.effet-encre, .monde-titre.effet-neon, .planche-titre.effet-neon, .monde-titre.effet-bronze, .planche-titre.effet-bronze { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-top: .18em; }
.monde-titre.effet-or, .monde-titre.effet-encre, .monde-titre.effet-neon, .monde-titre.effet-bronze { margin-top: calc(.5rem - .18em); }
.planche-titre.effet-or, .planche-titre.effet-encre, .planche-titre.effet-neon, .planche-titre.effet-bronze { margin-top: calc(.3rem - .18em); }
.monde-titre.effet-or, .planche-titre.effet-or { background-image: linear-gradient(180deg, #F6E7BE 0%, var(--m-or, var(--accent)) 52%, color-mix(in oklab, var(--m-or, var(--accent)) 62%, #1A1206) 100%); }
.monde-titre.effet-encre, .planche-titre.effet-encre { background-image: linear-gradient(180deg, color-mix(in oklab, var(--m-encre) 72%, var(--m-encre-2)) 0%, color-mix(in oklab, var(--m-encre) 88%, #000) 48%, color-mix(in oklab, var(--m-encre) 82%, var(--m-encre-2)) 100%); filter: drop-shadow(0 1px 0 color-mix(in oklab, var(--m-fond) 60%, #fff)); }
.monde-titre.effet-neon, .planche-titre.effet-neon { background-image: linear-gradient(90deg, var(--m-accent-2, var(--m-accent)) 0%, var(--m-accent) 52%, var(--m-or, var(--m-accent)) 100%); filter: drop-shadow(0 0 14px color-mix(in oklab, var(--m-accent) 55%, transparent)); }
.monde-titre.effet-bronze, .planche-titre.effet-bronze { background-image: linear-gradient(180deg, color-mix(in oklab, var(--m-or, var(--m-accent)) 42%, #FFF6E0) 0%, color-mix(in oklab, var(--m-or, var(--m-accent)) 84%, #3A2A10) 50%, color-mix(in oklab, var(--m-or, var(--m-accent)) 58%, #2A1C08) 100%); }
.filet-double { display: block; height: 7px; border-top: 3px solid var(--encre); border-bottom: 1px solid var(--encre); max-width: 34rem; margin-block: .9rem; }
.monde-objet { position: absolute; inset: -10% -4% -10% auto; width: min(76%, 66rem); z-index: -1; pointer-events: none; mask-image: radial-gradient(ellipse at 56% 50%, #000 26%, transparent 66%); -webkit-mask-image: radial-gradient(ellipse at 56% 50%, #000 26%, transparent 66%); }
.monde-objet picture { display: block; width: 100%; height: 100%; }
/* Sur téléphone, le <picture> sert la variante 720 px (image estompée et recadrée : la finesse ne se voit pas, le poids si). */
.monde-objet img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.monde-objet .monde-coeur { position: absolute; left: 50%; top: 50%; width: 16%; height: auto; aspect-ratio: 1; translate: -50% -50%; object-fit: contain; opacity: .9; will-change: opacity, transform; }
.a-objet .monde-texture { opacity: .35; }
/* Objet carré (un emblème) : moins large, calé à droite, bords fondus plus serrés, pour laisser le titre sur la nuit. */
.monde-objet.objet-carre { width: min(54%, 46rem); inset: -16% -6% -16% auto; mask-image: radial-gradient(ellipse at 50% 50%, #000 34%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 34%, transparent 70%); }
.monde-objet.objet-carre img { object-position: 50% 50%; }
@media (max-width: 48rem) { .monde-objet { width: 120%; inset: auto -10% -22% auto; height: 70%; opacity: .7; } }
.tampon { display: inline-block; justify-self: start; width: fit-content; margin: .9rem 0 0; padding: .3em .7em; border: 3px solid var(--accent); outline: 1px solid var(--accent); outline-offset: 2px; border-radius: .18em; color: var(--accent); font-family: var(--m-police-titre, var(--police-display)); font-weight: var(--m-titre-graisse, 500); font-size: clamp(1.05rem, .85rem + 1.2vw, 1.75rem); text-transform: uppercase; letter-spacing: .08em; line-height: 1.1; rotate: -4deg; opacity: .94; mix-blend-mode: var(--m-melange-tampon, normal); }
.tampon-petit { font-size: var(--t-petit); border-width: 2px; margin: .6rem 0 0; }
.planche .tampon { position: absolute; right: clamp(1rem, 6vw, 6rem); top: 18%; z-index: 1; }
@media (max-width: 40rem) { .planche .tampon { top: auto; bottom: 14%; right: clamp(.5rem, 4vw, 2rem); } }
.dactylo { display: grid; gap: .45rem; margin-top: 1.4rem; font-family: var(--m-police-mono, var(--police-mono)); font-size: calc(var(--t-corps) * 1.02); max-width: 42rem; }
.dactylo li { display: flex; gap: .8rem; align-items: center; }
.icone { width: 1.5em; height: 1.5em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.devise { display: inline-block; justify-self: start; margin-top: 1.2rem; padding-top: .6rem; border-top: 1px solid var(--encre); font-family: var(--m-police-mono, var(--police-mono)); font-size: var(--t-petit); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.etiquette-kraft { position: absolute; right: clamp(1rem, 7vw, 7rem); bottom: 12%; max-width: 15.5rem; margin: 0; background: color-mix(in oklab, var(--fond-2) 72%, var(--encre-2)); color: var(--encre); font-family: var(--m-police-mono, var(--police-mono)); font-size: var(--t-petit); line-height: 1.45; padding: 1rem 1.2rem 1rem 2.1rem; rotate: 5deg; box-shadow: 0 2px 0 rgb(0 0 0 / .12), 0 12px 22px -12px rgb(0 0 0 / .4); clip-path: polygon(9% 0, 100% 0, 100% 100%, 9% 100%, 0 50%); }
.etiquette-kraft i { position: absolute; left: .95rem; top: 50%; width: .55rem; aspect-ratio: 1; margin-top: -.28rem; border-radius: 50%; background: var(--fond); box-shadow: inset 0 0 0 1px var(--encre-2); }
@media (max-width: 56rem) { .etiquette-kraft { position: static; rotate: 0; margin: 1.6rem auto 0 0; width: fit-content; } }
.cote { font-family: var(--m-police-mono, var(--police-mono)); font-size: var(--t-etiquette); letter-spacing: .1em; color: var(--accent); border: 1px solid currentColor; padding: .1em .5em; margin-right: .6rem; white-space: nowrap; vertical-align: middle; }
.fenetres { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.fenetre { display: grid; gap: .6rem; }
.fenetre-cadre { position: relative; overflow: hidden; border: 1px solid var(--filet); background: var(--fond-2); }
.fenetre-large .fenetre-cadre { aspect-ratio: 21 / 9; }
.fenetre-bande .fenetre-cadre { aspect-ratio: 5 / 1; }
.fenetre-carre .fenetre-cadre { aspect-ratio: 1; }
.fenetre-carre { max-width: 26rem; }
.fenetre-cadre img { width: 100%; height: 100%; object-fit: cover; }
.fenetre figcaption { font-size: var(--t-petit); color: var(--encre-2); max-width: var(--mesure); }
.panoramique { width: 126%; max-width: none; will-change: transform; }
.planche-objet { display: grid; align-items: center; opacity: .95; mask-image: linear-gradient(to right, transparent, #000 35%); -webkit-mask-image: linear-gradient(to right, transparent, #000 35%); }
.planche-objet img { width: 100%; height: 100%; object-fit: contain; object-position: right center; }
@media (max-width: 40rem) { .planche-objet { opacity: .45; } }
.planche.en-preparation { border-top-style: dashed; }

/* 6. PAGES SIMPLES ET FORMULAIRE ---------------------------------------- */
.page-simple { padding-block: clamp(2.5rem, 7vw, 6rem) 0; display: grid; gap: 2rem; }
.page-entete { display: grid; gap: .75rem; }
.page-entete h1 { font-size: var(--t-1); font-weight: 400; letter-spacing: -0.02em; max-width: 18ch; }
.page-simple .etiquette.espace { margin-top: 1.5rem; }

.formulaire { display: grid; gap: 1.25rem; max-width: 40rem; margin-top: .5rem; }
.champ { display: grid; gap: .45rem; }
.champ label { font-size: var(--t-etiquette); text-transform: uppercase; letter-spacing: .12em; font-weight: 500; color: var(--encre-2); }
.champ input, .champ select, .champ textarea { font: inherit; color: inherit; background: var(--fond-2); border: 1px solid var(--filet); padding: .8rem .95rem; border-radius: var(--rayon); width: 100%; transition: border-color var(--duree) var(--courbe); }
.champ textarea { min-height: 11rem; resize: vertical; }
.champ :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.champ :is(input, textarea):user-invalid { border-color: #B3261E; }
.bouton { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .6rem; background: var(--encre); color: var(--fond); padding: .95rem 1.5rem; font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; border-radius: var(--rayon); transition: background-color var(--duree) var(--courbe); }
.bouton:hover { background: var(--encre-2); }
.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bouton:disabled { opacity: .55; cursor: progress; }
.bouton:active, .filtre:active, .at-bouton:active { translate: 0 1px; }
.form-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-note { font-size: var(--t-petit); color: var(--encre-2); max-width: 28rem; }
.hp { position: absolute !important; left: -200vw; top: 0; width: 1px; height: 1px; overflow: hidden; }
.form-message { padding: .9rem 1rem; border: 1px solid var(--filet); border-left: 3px solid var(--accent); background: var(--fond-2); }
.form-message.est-erreur { border-left-color: #B3261E; }
.form-message[hidden] { display: none; }

.visionneuse { border: 0; padding: 0; background: transparent; color: var(--encre); max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; display: grid; place-items: center; }
.visionneuse:not([open]) { display: none; }
.visionneuse::backdrop { background: rgb(8 8 10 / .86); }
.visionneuse figure { display: grid; gap: .7rem; justify-items: center; padding: 3.5rem 1rem 1.5rem; }
.visionneuse img { max-width: min(92vw, 100rem); max-height: 80dvh; width: auto; height: auto; object-fit: contain; }
.visionneuse figcaption { color: #CFCAC0; }
.visionneuse button { all: unset; cursor: pointer; position: fixed; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 999px; background: #F3F0EA; color: #15130F; font-size: 1.2rem; box-shadow: 0 1px 6px rgb(0 0 0 / .3); }
.visionneuse button:focus-visible { outline: 2px solid #F3F0EA; outline-offset: 3px; }
.visionneuse-fermer { top: 1rem; right: 1rem; }
.visionneuse-prec { left: 1rem; top: 50%; translate: 0 -50%; }
.visionneuse-suiv { right: 1rem; top: 50%; translate: 0 -50%; }

/* 7. MOUVEMENT ---------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--courbe); }
/* Morphing : le titre d'une planche devient le titre de la page du monde (noms générés dans mondes.css). */
::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: var(--courbe); }
@keyframes cadre-entre { from { opacity: 0; } }
@keyframes lettre-entre { from { opacity: 0; translate: 0 .16em; } }
@keyframes monte { from { opacity: 0; translate: 0 .6rem; } }
@keyframes apparaitre { from { opacity: 0; translate: 0 1.25rem; } to { opacity: 1; translate: 0 0; } }
@keyframes tourner { to { rotate: 360deg; } }
@keyframes onde { from { scale: 1 .18; } to { scale: 1 1; } }
@keyframes deriver { to { translate: 1.5% 0; } }
@keyframes scintiller { from { opacity: .55; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
@keyframes respirer { from { opacity: .3; transform: scale(.9); } to { opacity: .95; transform: scale(1.1); } }
@keyframes deriver-fenetre { from { transform: translateX(0); } to { transform: translateX(-20.6%); } }
@keyframes tamponnage { from { opacity: 0; scale: 1.7; rotate: -10deg; } 60% { opacity: .94; scale: .96; } to { scale: 1; rotate: -4deg; } }
/* Portes : à l'arrivée sur un monde, la nouvelle page se révèle selon sa matière (règles par monde dans mondes.css). */
@keyframes porte-iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(78% at 50% 50%); } }
@keyframes porte-tampon { from { opacity: 0; transform: scale(1.28) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes porte-onde { from { clip-path: inset(49.5% 0 49.5% 0); } to { clip-path: inset(0); } }
@keyframes porte-scission { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: no-preference) {
  .tx-oeil .tx-oeil-iris { animation: tourner 120s linear infinite; will-change: transform; }
  .tx-miroir .tx-miroir-etoiles { animation: scintiller 4.5s ease-in-out infinite alternate; }
  .monde-objet .monde-coeur { animation: respirer 5.5s ease-in-out infinite alternate; }
  .panoramique { animation: deriver-fenetre 56s ease-in-out infinite alternate; }
  /* Le tampon se pose quand il entre dans l'écran (site.js pose .tampon-pret puis .tamponne) ; sans JS il est simplement là. */
  .tampon.tampon-pret { opacity: 0; }
  .tampon.tamponne { opacity: .94; animation: tamponnage 460ms cubic-bezier(.2, 1.5, .4, 1) both; }
  @supports (animation-timeline: view()) {
    .reveler { animation: apparaitre linear both; animation-timeline: view(); animation-range: entry 5% entry 40%; }
  }
  .tx-lumiere .tx-rayons { animation: tourner 140s linear infinite; will-change: transform; }
  .tx-barres i { animation: onde 2.6s ease-in-out infinite alternate; will-change: transform; }
  .tx-barres i:nth-child(2n) { animation-duration: 3.4s; }
  .tx-barres i:nth-child(3n) { animation-delay: -1.1s; }
  .tx-barres i:nth-child(5n) { animation-duration: 1.9s; animation-delay: -.6s; }
  .tx-barres i:nth-child(7n) { animation-delay: -2.1s; animation-duration: 2.9s; }
  .tx-papier .tx-fibres { animation: deriver 36s ease-in-out infinite alternate; }
  /* Entrée en scène de l'accueil : une fois par session (tete.js pose html.deja-vu ensuite). */
  html:not(.deja-vu) .page-accueil .logo-geant { animation: cadre-entre 900ms var(--courbe) both; }
  html:not(.deja-vu) .page-accueil .logo-geant .lettre { animation: lettre-entre 800ms var(--courbe) both; }
  html:not(.deja-vu) .page-accueil .logo-geant .lettre:nth-child(1) { animation-delay: 120ms; }
  html:not(.deja-vu) .page-accueil .logo-geant .lettre:nth-child(2) { animation-delay: 250ms; }
  html:not(.deja-vu) .page-accueil .logo-geant .lettre:nth-child(3) { animation-delay: 380ms; }
  html:not(.deja-vu) .page-accueil .logo-geant .lettre:nth-child(4) { animation-delay: 510ms; }
  html:not(.deja-vu) .page-accueil .heros-legende { animation: monte 700ms var(--courbe) 760ms both; }
  html:not(.deja-vu) .page-accueil .heros-texte > * { animation: monte 700ms var(--courbe) both; }
  html:not(.deja-vu) .page-accueil .heros-texte > :nth-child(2) { animation-delay: 560ms; }
  html:not(.deja-vu) .page-accueil .heros-texte > :nth-child(3) { animation-delay: 640ms; }
  html:not(.deja-vu) .page-accueil .heros-texte > :nth-child(4) { animation-delay: 730ms; }
  html:not(.deja-vu) .page-accueil .heros-texte > :nth-child(5) { animation-delay: 820ms; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .monde-objet .monde-coeur { opacity: .6; }
}
@media print {
  /* Sur papier, rien ne bouge : les blocs révélés au défilement (.reveler, invisibles tant qu'ils ne sont pas entrés dans
     l'écran) et le tampon posé par site.js doivent être imprimés ; textures, menu, bouton de lecture, note « au clic » et
     bande « Monde suivant » n'ont pas de sens imprimés (T-03, audit du 2026-10-20 : opacité 0 à l'impression). */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveler { opacity: 1 !important; translate: none !important; }
  .tampon { opacity: .94 !important; }
  .planche-texture, .monde-texture, .skip, .nav, .video-lecture, .video-note, .monde-nav { display: none !important; }
  body { background: #fff; color: #000; }
  /* Les titres à dégradé (effets or, encre, néon, bronze) seraient transparents sans leur fond : en noir sur papier. */
  .monde-titre, .planche-titre { background: none !important; color: #000 !important; -webkit-text-fill-color: #000 !important; filter: none !important; }
}

/* Généré automatiquement à partir des en-têtes des fichiers mondes/*.md — ne pas modifier à la main. */
[data-monde="aionia"] {
  --m-fond: #0A0C14;
  --m-encre: #EDE3CF;
  --m-encre-2: #AC9F88;
  --m-accent: #D9A441;
  --m-filet: #262A36;
  --m-fond-2: #12151F;
  --m-police-titre: "Cormorant Garamond", var(--police-display);
  --m-police-texte: var(--police-texte);
  --m-police-mono: var(--police-mono);
  --m-police-etiquette: var(--police-texte);
  --m-titre-casse: uppercase;
  --m-titre-graisse: 500;
  --m-titre-style: normal;
  --m-titre-espacement: 0.08em;
  --m-schema: dark;
  --m-melange-tampon: normal;
}
[data-monde="aionia"] .planche-titre, html[data-monde="aionia"] .monde-titre { view-transition-name: titre-aionia; }
.accent-aionia { --accent-monde: #D9A441; }
.legende-aionia { --c: #D9A441; }
[data-monde="aionia"] .monde-coeur { left: 49.40%; top: 44.70%; width: 16.00%; }
html[data-monde="aionia"]::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html[data-monde="aionia"]::view-transition-new(root) { animation: porte-iris 650ms var(--courbe) both; mix-blend-mode: normal; }
[data-monde="temoins-de-papier"] {
  --m-fond: #EFE7D6;
  --m-encre: #2A2420;
  --m-encre-2: #6B5F52;
  --m-accent: #9B2F1F;
  --m-filet: #CDBFA6;
  --m-fond-2: #E6DCC6;
  --m-police-titre: "Bevan", var(--police-display);
  --m-police-texte: var(--police-texte);
  --m-police-mono: "Courier Prime", var(--police-mono);
  --m-police-etiquette: "Courier Prime", var(--police-texte);
  --m-titre-casse: uppercase;
  --m-titre-graisse: 400;
  --m-titre-style: normal;
  --m-titre-espacement: 0.02em;
  --m-schema: light;
  --m-melange-tampon: multiply;
}
[data-monde="temoins-de-papier"] .planche-titre, html[data-monde="temoins-de-papier"] .monde-titre { view-transition-name: titre-temoins-de-papier; }
.accent-temoins-de-papier { --accent-monde: #9B2F1F; }
.legende-temoins-de-papier { --c: #9B2F1F; }
html[data-monde="temoins-de-papier"]::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html[data-monde="temoins-de-papier"]::view-transition-new(root) { animation: porte-tampon 520ms cubic-bezier(.2, 1.45, .35, 1) both; mix-blend-mode: normal; }
[data-monde="anonysong"] {
  --m-fond: #0B0812;
  --m-encre: #F1ECFA;
  --m-encre-2: #A99BC4;
  --m-accent: #C084FF;
  --m-filet: #2A2238;
  --m-fond-2: #150F22;
  --m-police-titre: "Syne", var(--police-display);
  --m-police-texte: var(--police-texte);
  --m-police-mono: var(--police-mono);
  --m-police-etiquette: var(--police-texte);
  --m-titre-casse: uppercase;
  --m-titre-graisse: 500;
  --m-titre-style: normal;
  --m-titre-espacement: 0.2em;
  --m-schema: dark;
  --m-melange-tampon: normal;
  --m-titre-max: 7.28cqi;
  --m-accent-2: #4FD8FF;
  --m-or: #FF5BD6;
}
[data-monde="anonysong"] .planche-titre, html[data-monde="anonysong"] .monde-titre { view-transition-name: titre-anonysong; }
.accent-anonysong { --accent-monde: #C084FF; }
.legende-anonysong { --c: #C084FF; }
html[data-monde="anonysong"]::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html[data-monde="anonysong"]::view-transition-new(root) { animation: porte-onde 650ms var(--courbe) both; mix-blend-mode: normal; }
[data-monde="gemini-eternal"] {
  --m-fond: #050611;
  --m-encre: #ECE7DD;
  --m-encre-2: #A49FB4;
  --m-accent: #9CC4FF;
  --m-filet: #23213A;
  --m-fond-2: #0D0B1D;
  --m-police-titre: "Cinzel Decorative", var(--police-display);
  --m-police-texte: var(--police-texte);
  --m-police-mono: var(--police-mono);
  --m-police-etiquette: var(--police-texte);
  --m-titre-casse: uppercase;
  --m-titre-graisse: 700;
  --m-titre-style: normal;
  --m-titre-espacement: 0.06em;
  --m-schema: dark;
  --m-melange-tampon: normal;
  --m-titre-couleur: #D4B06A;
  --m-accent-2: #B98CFF;
  --m-or: #D4B06A;
}
[data-monde="gemini-eternal"] .planche-titre, html[data-monde="gemini-eternal"] .monde-titre { view-transition-name: titre-gemini-eternal; }
.accent-gemini-eternal { --accent-monde: #9CC4FF; }
.legende-gemini-eternal { --c: #9CC4FF; }
[data-monde="gemini-eternal"] .monde-coeur { left: 50.00%; top: 47.60%; width: 15.00%; }
html[data-monde="gemini-eternal"]::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html[data-monde="gemini-eternal"]::view-transition-new(root) { animation: porte-scission 650ms var(--courbe) both; mix-blend-mode: normal; }