/* ============================================================
   _preloader.css — Le Rideau de braises · la page avant la page
   Deux voiles d'obsidienne — la couleur exacte du fond du site — à peine
   tiédies par des bulles de verre fondu et un brasier sous la pierre, soudés en
   leur milieu par une veine de rubis qui pulse : des braises montent du sol, le
   sceau se rallume, puis les deux voiles se rétractent et rendent la scène au
   contenu. Le voile ne doit pas se reconnaître comme une surface : seule la
   couture et le sceau portent la lumière.
   Toute la chorégraphie vit par `transform` et `opacity` : aucune surface
   n'est repeinte, donc le rideau reste fluide sur mobile comme sur machine
   modeste, et il n'a rien à perdre au gel de _perf-motion.css. Seule entorse,
   mesurée et bornée : un `blur(4px)` qui se lève sur les deux lignes de texte,
   sur machine complète uniquement (`data-modeste` le coupe).
   Jetons portés par <html> : data-pl="premier" (première page d'un onglet,
   scène qui s'allume) ou "suite" (changement de page, scène déjà montée),
   data-pl-ouvert (la scène est rendue). Moteur : preloader.js.
   ============================================================ */

/* ── 1. Jetons ──────────────────────────────────────────────── */
.rideau{
  --rd-ink: #f8ede8;
  --rd-ruby: #ff4d63;
  --rd-ember: #ff8a4c;
  --rd-gold: #ffdc9a;
  --rd-flame: linear-gradient(96deg, #ff4d63 0%, #ff8a4c 46%, #ffdc9a 100%);
  /* La pierre du voile EST le fond du site : `#0a0608`, la valeur exacte de
     `--pure-bg`. Le voile ne se reconnaît qu'à sa couture et à son sceau. */
  --rd-obsidienne: linear-gradient(178deg, #ffffff05, #ffffff01 30%), #0a0608;
  --rd-line: #ffb9a326;
  --rd-ease: cubic-bezier(.16, 1, .3, 1);
  --rd-part: cubic-bezier(.77, 0, .18, 1);
  /* La venue douce : départ retenu, longue descente. `--rd-ease` est une
     easeOutExpo — à 100 ms elle a déjà fait 70 % du chemin, ce qui tampe le
     texte au lieu de l'amener. Elle reste pour les gestes mécaniques. */
  --rd-vel: cubic-bezier(.33, .1, .2, 1);
  --rd-duree: .78s;
  /* Le cadre de l'emblème. `min(56vw, 42vh)` d'abord : la pile sceau + nom +
     souffle + jauge doit rester entière dans un cadre de téléphone paysage
     comme dans un 1440×900, et l'emblème ne rogne jamais sur le texte.
     196 px de plancher : en dessous, Kouta et Fido ne sont plus lisibles. */
  --rd-sceau: clamp(196px, min(56vw, 42vh), 348px);

  position: fixed; inset: 0; z-index: 99999;
  display: block; margin: 0; padding: 0;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  contain: layout style paint;
  color: var(--rd-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
html[data-pl] .rideau{ opacity: 1; visibility: visible }

/* ── 2. Les deux voiles ─────────────────────────────────────── */
/* De la pierre fondue, pas un aplat : trois matières, toutes statiques et
   toutes peintes une seule fois dans la couche du voile.
   · bulles fondues — quatre gouttes de verre en fusion, rouges et jaunes.
     Chacune est **pleine** : l'intérieur est déjà lumineux, le bord monte à
     peine plus haut puis s'éteint sur un tiers du rayon. C'est ce faible
     écart (0a→1c, pas 00→22) qui fait une bulle et non un cercle tracé ;
     deux sont écrasées (`26vw 21vw`) pour que la goutte s'affaisse comme du
     verre encore chaud ;
   · braises éteintes — deux nappes de points à 1 px sur deux trames
     décalées (137×173 et 211×149) : la régularité de la grille se casse ;
   · le grain (`.rideau-moitie::before`) et le talus sombre (le `box-shadow`
     inset des deux moitiés), ci-dessous.
   Tout vit SUR le voile et non sur une couche à part : à l'ouverture, la
   pierre part avec ses voiles, elle ne reste pas plaquée sur la page. */
.rideau-moitie{
  position: absolute; top: 0; bottom: 0; width: calc(50% + 1px);
  background:
    radial-gradient(26vw 21vw at 22% 78%, #ff4d6305 0 28%, #ff4d6309 56%, #ff8a4c05 70%, transparent 88%),
    radial-gradient(15vw at 70% 58%, #ffb34004 0 26%, #ffb34009 52%, #ffdc9a05 66%, transparent 84%),
    radial-gradient(19vw 17vw at 38% 22%, #ff4d6304 0 30%, #ff8a4c07 58%, #ff4d6304 72%, transparent 88%),
    radial-gradient(9vw at 86% 30%, #ffd25e03 0 24%, #ffd25e07 50%, #ffb34004 64%, transparent 82%),
    radial-gradient(1px 1px at 23px 41px, #ffdc9a1c 50%, transparent 55%),
    radial-gradient(1px 1px at 71px 12px, #ff8a4c16 50%, transparent 55%),
    /* Le brasier sous la pierre : la moitié basse du voile est chauffée de
       dessous, comme la gueule de la forge sous sa plaque. */
    linear-gradient(0deg, #ff4d630c 0%, #ff8a4c06 10%, #ffb34003 20%, transparent 34%),
    var(--rd-obsidienne);
  background-size: auto, auto, auto, auto, 137px 173px, 211px 149px, auto, auto;
}
/* Le talus sombre aux deux bords de l'écran : un `box-shadow` inset, pas une
   couche de plus — il suit la moitié qui glisse et ne reste donc pas plaqué
   sur la page pendant l'ouverture. */
.rideau-moitie--g{ left: 0; box-shadow: inset 54px 0 96px -26px #050303cc }
.rideau-moitie--d{ right: 0; box-shadow: inset -54px 0 96px -26px #050303cc }
/* Le grain de la forge : un bruit de turbulence en data-URI. Une seule requête
   de zéro octet (il est dans la feuille), rastérisé une fois par le moteur puis
   répété — pas de filtre live, rien qui se repeigne pendant la glisse.
   La chaleur est dans le bruit lui-même : le `feColorMatrix` renvoie la
   luminance en rouge/vert/bleu dééquilibrés, donc le grain sort ambre et non
   gris. Un `filter: sepia()` sur la couche aurait donné le même résultat pour
   une rastérisation de tout le voile, et sans `mix-blend-mode` : sur
   l'obsidienne, un mode de fusion paie une passe de composition pour un gain
   invisible. */
.rideau-moitie::before{
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.62 .28 .1 0 0 .34 .42 .1 0 0 .16 .22 .22 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E") repeat;
  background-size: 180px 180px;
  opacity: .045;
}
/* La lueur qui habille chaque bord intérieur : posée en dégradé statique,
   elle voyage avec la translate de la moitié au lieu d'être repeinte. Elle
   respire en `scaleX` seulement — la largeur d'un dégradé ne se repeint pas,
   sa couche se retourne. */
.rideau-moitie::after{
  content: ''; position: absolute; top: 0; bottom: 0; width: 30vw; max-width: 400px;
  background: linear-gradient(90deg, #ff4d6300, #ff4d6304 46%, #ff8a4c0c 84%, #ffdc9a08);
}
.rideau-moitie--g::after{ right: 0 }
.rideau-moitie--d::after{ left: 0; transform: scaleX(-1) }

/* La veine qui les soude : elle court de haut en bas à l'allumage. */
.rideau-couture{
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px;
  background: var(--rd-flame);
  box-shadow: 0 0 18px 2px #ff6a4a55;
  transform: scaleY(0);
}

/* Le champ de braises : dix étincelles qui montent du sol de la forge. Elles
   ne pèsent que ce que pèse un calque composé — `transform` et `opacity`, rien
   de repeint — et partent de `bottom` sous le voile pour traverser tout le
   cadre. Deux images-cles (`-g` et `-d`) au lieu d'une dérive en variable :
   `var()` dans une image-cle de `transform` n'est pas garanti interpolable. */
.rideau-braises{ position: absolute; inset: 0; z-index: 1; overflow: hidden }
.rideau-braises i{
  position: absolute; bottom: -8px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--rd-gold); opacity: 0;
  box-shadow: 0 0 7px 2px #ff8a4c73;
}
@keyframes rd-braise-g{
  0%{ opacity: 0; transform: translate3d(0, 0, 0) scale(.4) }
  14%{ opacity: .95 }
  68%{ opacity: .55 }
  100%{ opacity: 0; transform: translate3d(-26px, -86vh, 0) scale(1) }
}
@keyframes rd-braise-d{
  0%{ opacity: 0; transform: translate3d(0, 0, 0) scale(.4) }
  14%{ opacity: .95 }
  68%{ opacity: .55 }
  100%{ opacity: 0; transform: translate3d(30px, -86vh, 0) scale(1) }
}
/* Les retards sont négatifs : avec `infinite`, un retard négatif plonge dans le
   cycle, donc le champ est déjà peuplé à la milliseconde où le voile se peint.
   Avec des retards positifs, le visiteur ne verrait les braises que dans le
   tiers bas du cadre — le rideau ne vit que 1,4 seconde. */
html[data-pl] .rideau-braises i:nth-child(1){ left: 6%;  width: 4px; height: 4px; animation: rd-braise-g 3.4s -2.6s cubic-bezier(.2,.55,.35,1) infinite }
html[data-pl] .rideau-braises i:nth-child(2){ left: 15%; animation: rd-braise-d 4.1s -1.1s cubic-bezier(.2,.55,.35,1) infinite }
html[data-pl] .rideau-braises i:nth-child(3){ left: 24%; width: 2px; height: 2px; animation: rd-braise-g 3.0s -2.2s cubic-bezier(.2,.55,.35,1) infinite }
html[data-pl] .rideau-braises i:nth-child(4){ left: 33%; animation: rd-braise-d 4.6s -3.4s cubic-bezier(.2,.55,.35,1) infinite }
html[data-pl] .rideau-braises i:nth-child(5){ left: 42%; width: 4px; height: 4px; animation: rd-braise-g 3.8s -0.7s cubic-bezier(.2,.55,.35,1) infinite }
html[data-pl] .rideau-braises i:nth-child(6){ left: 55%; animation: rd-braise-d 3.2s -2.8s cubic-bezier(.2,.55,.35,1) infinite }
html[data-pl] .rideau-braises i:nth-child(7){ left: 64%; width: 2px; height: 2px; animation: rd-braise-g 4.4s -1.6s cubic-bezier(.2,.55,.35,1) infinite }
html[data-pl] .rideau-braises i:nth-child(8){ left: 73%; animation: rd-braise-d 3.6s -3.1s cubic-bezier(.2,.55,.35,1) infinite }
html[data-pl] .rideau-braises i:nth-child(9){ left: 84%; width: 4px; height: 4px; animation: rd-braise-g 4.0s -0.4s cubic-bezier(.2,.55,.35,1) infinite }
html[data-pl] .rideau-braises i:nth-child(10){ left: 93%; animation: rd-braise-d 3.1s -2.0s cubic-bezier(.2,.55,.35,1) infinite }
/* À l'ouverture, les braises s'éteignent avant les voiles : elles rendent le
   sol à la page au lieu de flotter au-dessus d'elle pendant sa glisse. */
html[data-pl-ouvert] .rideau-braises{ animation: rd-extinction .26s linear both }

/* ── 3. Le coeur : empreinte, sceau, braises, nom, jauge ────── */
.rideau-coeur{
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: clamp(16px, 2.4vh, 26px);
}

/* L'empreinte de génération : un filigrane de la version, posé derrière la
   scène et non dans son flux (`place-content` ignorerait un absolu). Elle est
   effacée avec le coeur à l'ouverture, puisqu'elle vit dans son subtree.
   `color` quasi-nul + `-webkit-text-stroke` : la forme se devine, le sceau
   reste seul à lire. */
.rideau-marque{
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-content: center; justify-items: center;
}
.rideau-marque > b{
  font-family: var(--font-head); font-weight: 700; line-height: .78;
  font-size: clamp(184px, 46vw, 430px); letter-spacing: -.02em;
  color: #f8ede807; -webkit-text-stroke: 1px #ff8a4c1c;
}
/* La mention se pose au pied de la scène, pas dans la pile : à 390 px de large,
   le nom et le souffle tombent exactement dans cette bande. */
.rideau-marque > small{
  position: absolute; left: 0; right: 0; bottom: clamp(20px, 5vh, 48px);
  font-size: clamp(8px, .9vw, 11px); letter-spacing: .42em; text-transform: uppercase;
  text-indent: .42em; color: #ffdc9a2e; text-align: center;
}

.rideau-sigil{ position: relative; width: var(--rd-sceau); height: var(--rd-sceau); display: grid; place-items: center }

/* Le halo de l'emblème : un disque statique, pas une ombre portée. Deux
   `drop-shadow` sur un PNG se rastérisent à chaque image de la montée, un
   dégradé ne se pose qu'une fois — et il ne sort jamais du subtree gelé.
   Il déborde (`inset: -7%`) parce que l'emblème est opaque : posé derrière lui,
   un halo contenu dans son cadre ne se verrait pas. */
.rideau-sigil::before{
  content: ''; position: absolute; inset: -7%; border-radius: 50%;
  background: radial-gradient(circle, #ff4d6338, #ff8a4c1c 52%, transparent 74%);
}

/* La marque : l'emblème complet de la confrérie — Kouta tendant la main, Fido
  accroché à son épaule, le mot-dièse en braises. C'est lui qui dit qui ouvre
  la forge, et il se lit : 340 px sur un grand cadre, jamais moins de 176.
  Taillé en rond : la composition du visuel est déjà circulaire et ses quatre
  coins sont quasi noirs (#320108 contre l'obsidienne #0b0709) — un cadre
  carré laisserait voir une arête de boîte, un disque les efface et rend la
  médaille. `url($_embleme)` est recousue comme celle du héros de l'accueil,
  donc sur la page d'entrée le voile relit la même entrée de cache. */
.rideau-logo{
  position: relative; display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  background: #160409;
}

/* Trois braises en orbite : une seule rotation de conteneur, les braises
   ne font que respirer en opacite. Le rayon se déduit du cadre, pas de sa
   taille à lui : les braises tournent autour de l'emblème, jamais dessus. */
.rideau-orbite{
  position: absolute; inset: 0; display: block;
  animation: rd-orbite 2.6s linear infinite;
}
.rideau-orbite i{
  position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--rd-gold);
  box-shadow: 0 0 12px 3px #ff8a4c80;
  animation: rd-respir 1.5s var(--rd-ease) infinite;
}
.rideau-orbite i:nth-child(1){ transform: rotate(-26deg) translateY(calc(var(--rd-sceau) / -2 - 13px)) }
.rideau-orbite i:nth-child(2){ transform: rotate(94deg) translateY(calc(var(--rd-sceau) / -2 - 13px)); animation-delay: .42s; background: var(--rd-ember) }
.rideau-orbite i:nth-child(3){ transform: rotate(214deg) translateY(calc(var(--rd-sceau) / -2 - 13px)); animation-delay: .84s; background: var(--rd-ruby) }

.rideau-mot{
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.02rem, .86rem + .7vw, 1.34rem);
  letter-spacing: .34em; text-transform: uppercase; text-indent: .34em;
  color: var(--rd-gold); text-align: center;
}
.rideau-souffle{
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; text-indent: .22em;
  color: #c69aa0; text-align: center;
}

/* Jauge sans mensonge : une braise court le long du fil, aucun pourcentage
   n'est promis parce qu'aucun n'est mesurable. */
.rideau-fil{
  position: relative; display: block; width: min(232px, 46vw); height: 1px;
  background: var(--rd-line); overflow: hidden;
}
.rideau-fil i{
  position: absolute; inset: 0 auto 0 0; width: 38%; height: 1px;
  background: var(--rd-flame);
  animation: rd-court 1.35s cubic-bezier(.65, .05, .36, 1) infinite;
}

/* ── 4. Images-cles ─────────────────────────────────────────── */
@keyframes rd-orbite{ to{ transform: rotate(360deg) } }
@keyframes rd-respir{ 0%, 100%{ opacity: .35 } 50%{ opacity: 1 } }
@keyframes rd-court{ 0%{ transform: translateX(-105%) } 100%{ transform: translateX(272%) } }
/* La flamme vivante : la lueur du bord intérieur inspire et expire en
   `scaleX`, la veine de rubis pulse en opacité. Deux gestes composés, aucune
   largeur ni aucune ombre animée — un dégradé ne se repeint pas, sa couche se
   retourne. La variante `-d` rembarre le `scaleX(-1)` qui miroir la moitié
   droite, sinon l'animation écraserait la symétrie. */
@keyframes rd-haleine{ from{ transform: scaleX(1) } to{ transform: scaleX(1.32) } }
@keyframes rd-haleine-d{ from{ transform: scaleX(-1) } to{ transform: scaleX(-1.32) } }
@keyframes rd-veine{ 0%, 100%{ opacity: .64 } 50%{ opacity: 1 } }

/* Allumage : la couture court, puis le sceau, le nom, la jauge.
   Le texte n'est plus monté par une seule animation qui fait d'un coup
   l'opacité, la place et la netteté : trois pistes découplées, chacune avec
   sa courbe. Le fondu part à `linear` — c'est lui qui donne la douceur, une
   courbe ease-out sur l'opacité éclaircit le texte dans les 150 premiers
   millisecondes et le fait « clignoter » — pendant que la hausse et le flou
   s'appuient sur `--rd-vel`. */
@keyframes rd-soudure{ from{ transform: scaleY(0) } to{ transform: scaleY(1) } }
@keyframes rd-ignition{ from{ opacity: 0; transform: scale(.72) } to{ opacity: 1; transform: scale(1) } }
@keyframes rd-fond{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes rd-hausse{ from{ transform: translateY(9px) } to{ transform: none } }
@keyframes rd-flou{ from{ filter: blur(4px) } to{ filter: blur(0) } }
@keyframes rd-fil-node{ from{ opacity: 0; transform: scaleX(.2) } to{ opacity: 1; transform: none } }
/* L'empreinte descend au lieu de monter : elle est déjà là quand on la lit. */
@keyframes rd-empreinte{ from{ transform: scale(1.06) } to{ transform: none } }
/* Les braises s'éteignent à l'ouverture : `rd-fond` est une montée, il fallait
   son contraire. Sans image-cle `from`, c'est la valeur calculée de l'élément
   qui fait le départ — un `to` suffit. */
@keyframes rd-extinction{ to{ opacity: 0 } }

html[data-pl] .rideau-couture{ animation: rd-soudure .62s .04s var(--rd-vel) both, rd-veine 2.6s .66s ease-in-out infinite }
html[data-pl] .rideau-moitie--g::after{ animation: rd-haleine 3.1s ease-in-out infinite alternate }
html[data-pl] .rideau-moitie--d::after{ animation: rd-haleine-d 3.1s ease-in-out infinite alternate }
html[data-pl] .rideau-marque{ animation: rd-fond 1s .04s linear both, rd-empreinte 1s .04s var(--rd-vel) both }
html[data-pl] .rideau-sigil{ animation: rd-ignition .7s .12s var(--rd-vel) both }
html[data-pl] .rideau-mot{ animation: rd-fond .78s .22s linear both, rd-hausse .78s .22s var(--rd-vel) both, rd-flou .78s .22s var(--rd-vel) both }
html[data-pl] .rideau-souffle{ animation: rd-fond .78s .36s linear both, rd-hausse .78s .36s var(--rd-vel) both, rd-flou .78s .36s var(--rd-vel) both }
html[data-pl] .rideau-fil{ animation: rd-fil-node .58s .48s var(--rd-vel) both }

/* Machine modeste : le flou se ré-rastérise à chaque image. On garde le fondu
   et la hausse, qui ne coûtent que de la composition, et on serre la cadence
   pour que le texte soit posé avant l'ouverture. La clef porte
   `data-pl="premier"` : elle ne peut donc jamais écraser le régime `suite`. */
html[data-modeste][data-pl="premier"] :is(.rideau-mot, .rideau-souffle){
  animation: rd-fond .56s linear both, rd-hausse .56s var(--rd-vel) both;
}
html[data-modeste][data-pl="premier"] .rideau-souffle{ animation-delay: .1s }
html[data-modeste][data-pl="premier"] .rideau-mot{ animation-delay: .15s }
html[data-modeste][data-pl="premier"] .rideau-marque{ animation-duration: .7s; animation-delay: .03s }

/* Sur un changement de page (jeton « suite »), la scène est déjà montée :
   la couture est pleine, le sceau, le nom et la jauge sont à leur place, sans
   allumage. Ces règles ont la même spécificité (0,2,1) que l'allumage et les
   suivent dans la source, donc elles le battent. Les boucles infinies
   (orbite, respiration, court du fil) vivent sur d'autres règles et tournent. */
html[data-pl="suite"] .rideau-couture{ transform: scaleY(1); animation: rd-veine 2.6s ease-in-out infinite }
html[data-pl="suite"] :is(.rideau-marque, .rideau-sigil, .rideau-mot, .rideau-souffle, .rideau-fil){ animation: none }
/* Déjà montée ne veut pas dire tampée : sur un changement de page, le coeur
   entier arrive en fondu court — pas d'allumage, mais pas d'apparition
   brutale non plus. La sortie (`data-pl-ouvert`, 0,3,1) reprend la main. */
html[data-pl="suite"] .rideau-coeur{ animation: rd-fond .34s var(--rd-vel) both }
html[data-pl="suite"] .rideau{ --rd-duree: .5s }

/* ── 5. La scène est rendue ─────────────────────────────────── */
@keyframes rd-ouverture-g{ to{ transform: translate3d(-101%, 0, 0) } }
@keyframes rd-ouverture-d{ to{ transform: translate3d(101%, 0, 0) } }
@keyframes rd-flambe{ 0%{ opacity: 1 } 100%{ opacity: 0; transform: scaleY(.04) } }
@keyframes rd-rendu{ to{ opacity: 0; transform: scale(1.05) } }

/* Les voiles s'écartent de leur couture, la veine se consume, le coeur rend
   la place. Tout est piloté par le jeton posé sur <html> : un sélecteur en
   `.rideau-ouvert .x` (0,2,0) perdrait contre `html[data-pl] .x` (0,2,1) et
   la couture resterait plantée au milieu de la page une fois le rideau tombé. */
html[data-pl-ouvert] .rideau-moitie--g{ animation: rd-ouverture-g var(--rd-duree) var(--rd-part) both }
html[data-pl-ouvert] .rideau-moitie--d{ animation: rd-ouverture-d var(--rd-duree) var(--rd-part) both }
html[data-pl-ouvert] .rideau-couture{ animation: rd-flambe .34s ease-in both }
/* Le coeur ne se coupe pas net : il rend la place pendant que les voiles
   glissent, sur la meme venue douce que son arrivee. */
html[data-pl-ouvert] .rideau-coeur{ animation: rd-rendu .5s var(--rd-vel) both }

/* ── 6. Les chorégraphies de page attendent leur tour ───────── */
/* Derrière le voile, le document est sous clé : rien de ce que la page anime
   ne démarre avant l'ouverture. `animation-play-state` ne s'hérite pas, donc
   chaque descendant doit être nommé ; `:not(.rideau)` écarte le subtree du
   rideau, qui lui doit vivre. L'ancre est `body` et non un jeton de motion :
   ces jetons sont posés soit sur `<html>`, soit sur la racine de page, jamais
   les deux à la fois. */
html[data-pl]:not([data-pl-ouvert])
  :where(body, body > :not(.rideau), body > :not(.rideau) *){
  animation-play-state: paused !important;
}

/* ── 7. Reserves ────────────────────────────────────────────── */
/* Machine modeste et mobile : on garde le geste, on coupe l'orbite et la
   respiration des braises, et la couture devient un simple liseré. */
html[data-modeste] .rideau-orbite,
html[data-modeste] .rideau-orbite i{ animation: none }
/* Le champ de braises tient à cinq étincelles : elles ne coûtent que des
   couches composées, mais dix couches sur un GPU de téléphone, c'est dix
   rasters de plus à chaque image de la glisse. La veine et les haleurs
   respirent encore, le feu ne meurt pas. */
html[data-modeste] .rideau-braises i:nth-child(n+6){ display: none }
/* La sortie doit tenir avant la purge du noeud (`TOMBE`), sinon les voiles
   sont tranchés en pleine glisse et la scène saute. Regle placee apres celles
   de `suite`, meme specificite : c'est l'ordre de source qui decide. */
html[data-modeste] .rideau{ --rd-duree: .42s }
html[data-modeste][data-pl-ouvert] .rideau-coeur{ animation-duration: .32s }
@media (prefers-reduced-motion: reduce){ .rideau{ display: none } }
@media print{ .rideau{ display: none } }