/* Lueur de papier (drapeau lueur, docs/design/lueur-de-papier.md). Chaque règle commence par .lueur :
   drapeau éteint, ce fichier ne touche à rien (tests/lueur.js le vérifie). */

/* ---------- Jetons (§Tokens) ---------- */
.lueur {
  /* palette */
  --nuit: #0E1033; --brume: #2C2F6E; --lueur: #FFD27A; --braise: #FF9D5C; --luciole: #7DF3E1; --eteint: #5E5A7E;
  --papier: #F3E6C9; --feutre: #2E3384; --fil: #E9B040; --fil-sombre: #C9A24A; --syl1: #2457D3; --syl2: #D23C4E;
  --ombre: #0A0B22; --ombre-rim: #8C9BFF; --encre: #26224A;
  /* durées */
  --t-tap: 120ms; --e-tap: cubic-bezier(.22, 1, .36, 1);
  --t-pop: 240ms; --e-pop: cubic-bezier(.34, 1.56, .64, 1);
  --t-move: 420ms; --e-move: cubic-bezier(.37, 0, .63, 1);
  --t-moment: 900ms; --t-story: 2400ms; --t-breath: 3.6s; --t-blink: 150ms;
  /* le papier avance par images : steps(n) sur une durée « stamp » de 5 à 7 images à 12 images/s */
  --t-stamp: 500ms; --e-stamp: steps(6, end);
  /* l'ancien thème prend les couleurs de Lueur (les écrans gardent leurs noms de variables) */
  --night: var(--nuit); --night-2: #161946; --dusk: var(--brume); --stone: #34377A; --stone-hi: #474B9A;
  --gold: var(--lueur); --gold-soft: #FFE9B8; --parch: var(--papier); --mist: #A9A6D6;
  --syl-a: var(--syl1); --syl-b: var(--syl2);
}
/* Fraunces doux et un peu « wonky » partout ; Lexend n'a pas ces axes et les ignore */
.lueur body { font-variation-settings: 'SOFT' 100, 'WONK' 1; }
/* Les titres : Fraunces autour de 560 (l'ancienne police gothique était grasse à 700–900) */
.lueur h1, .lueur .screen-title, .lueur .floor-title span, .lueur .recipe > b, .lueur .reward-box h2, .lueur .grim-head h2,
.lueur .gf-head, .lueur .pc-t, .lueur .ench-obj .zz, .lueur .zzz { font-weight: 560; }

/* ---------- Matières (§Materials) ---------- */
/* Papier : couleur pleine, grain, ombre douce. Feutre : grain de feutre. Le grain vient de js/lueur.js (images calculées une fois). */
.lueur .lp-paper { background-color: var(--papier); background-image: var(--g-paper); color: var(--encre); box-shadow: 2px 5px 0 rgba(3, 4, 15, .45); }
.lueur .lp-felt { background-color: var(--feutre); background-image: var(--g-felt); }
/* Étiquette de papier en Fraunces (§Components · Labels on objects) */
.lueur .lp-tag { display: inline-block; font: 600 18px var(--display); color: #3A2A1A; background-color: var(--papier); background-image: var(--g-paper);
  padding: .25em .8em .32em; transform: rotate(-2deg); box-shadow: 2px 5px 0 rgba(3, 4, 15, .5); }

/* ---------- Le nom du jeu (§Type · Wordmark) ---------- */
.lueur .wordmark { font-family: var(--display); font-style: italic; font-weight: 380; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-size: clamp(64px, calc(var(--u) * 16), 160px); color: #6E68A8; padding: .1em .2em .26em; line-height: 1; white-space: nowrap; cursor: pointer; }
.lueur .wordmark .wm-word { display: inline-flex; }
.lueur .wordmark .wm-word i { position: relative; display: inline-block; font-style: italic; color: #6E68A8; text-shadow: none; transition: color .35s, text-shadow .5s; }
.lueur .wordmark .wm-word i.lit { color: #FFE9B8; text-shadow: 0 0 .22em rgba(255, 196, 90, .75), 0 0 .7em rgba(255, 150, 70, .3); }
/* l'étincelle sur le ı, un peu à droite pour suivre l'italique */
.lueur .wordmark .wm-dot { position: absolute; left: 50%; top: .02em; width: .2em; height: .2em; margin-left: .09em; border-radius: 50%;
  background: radial-gradient(circle, #FFFDF2 0 22%, #FFD27A 40%, rgba(255, 157, 92, 0) 72%); transform: translateX(-50%) scale(1.6); opacity: .35; transition: opacity .3s; pointer-events: none; }
.lueur .wordmark .wm-word i.lit .wm-dot { opacity: 1; }
.lueur .wordmark .wm-trail { left: .2em; bottom: .1em; height: .05em; min-height: 3px; background: linear-gradient(90deg, rgba(255, 210, 122, .15), #FFD27A); box-shadow: 0 0 .25em rgba(255, 200, 100, .9); }
.lueur .wordmark .wm-head { position: absolute; bottom: .04em; width: .3em; height: .3em; margin-left: -.15em; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, #FFD27A 34%, rgba(255, 157, 92, 0) 70%); }
/* (V7) la phrase du titre est une étiquette de papier, comme dans l'intro */
.lueur .tagline { font: 600 clamp(15px, calc(var(--u) * 2.3), 22px) var(--display); color: #3A2A1A; background: var(--papier) var(--g-paper); padding: .2em .7em .28em; rotate: -1.5deg; box-shadow: 2px 4px 0 rgba(3, 4, 15, .5); letter-spacing: 0; }

/* ---------- Surfaces de lecture (V5 · §Components · Reading card) ---------- */
/* Les mots à lire sont sur du papier crème : couleur pleine, grain, ombre douce. La carte de lecture a une lampe derrière. */
.lueur .card-syl, .lueur .pic-card, .lueur .tile, .lueur .parchment, .lueur .recipe, .lueur .order-banner, .lueur .bubble {
  background: var(--papier) var(--g-paper); color: var(--encre); border-color: transparent; box-shadow: 3px 7px 0 rgba(3, 4, 15, .45); }
.lueur .card-syl, .lueur .pic-card, .lueur .tile { border-radius: 8px; }
.lueur .card-syl, .lueur .parchment, .lueur .order-banner { font-weight: 600; letter-spacing: .02em; }
.lueur .parchment { border: 0; border-radius: 6px; box-shadow: 0 0 70px -10px rgba(255, 200, 110, .45), 5px 12px 0 rgba(3, 4, 15, .45); }
.lueur .bubble::before { border-right-color: var(--papier); }
@media (max-width: 760px) { .lueur .bubble::before { border-right-color: transparent; border-bottom-color: var(--papier); } }
.lueur .muet { color: #A9A2BE; }
/* Bonne réponse : de l'or et de la lumière, jamais de vert ni de rouge */
.lueur .card-syl.right, .lueur .pic-card.right, .lueur .tile.right { border-color: var(--fil); box-shadow: 0 0 36px 8px rgba(255, 210, 122, .55), 3px 7px 0 rgba(3, 4, 15, .45); }
.lueur .parchment.glow { box-shadow: 0 0 120px 10px rgba(255, 200, 110, .75), 5px 12px 0 rgba(3, 4, 15, .45); }
/* Mauvaise réponse : la carte vacille en stop-motion (6 images), rien ne glisse */
.lueur .shake { animation: lp-wobble .5s steps(6, end); }
@keyframes lp-wobble { 0% { rotate: 0deg; } 20% { rotate: -2.6deg; } 45% { rotate: 2deg; } 70% { rotate: -1.3deg; } 100% { rotate: 0deg; } }

/* ---------- L'étincelle de lecture (js/finger.js) ---------- */
/* Lumière pure, sans filtre ; elle bat avec la propriété scale (transform la place sous le doigt) */
/* (le battement est sur ::before : un scale sur l'élément placé par transform multiplierait aussi son déplacement) */
.lueur .f-spark.lp { width: .62em; min-width: 26px; max-width: 46px; filter: none; background: none; }
.lueur .f-spark.lp::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 14%, #FFD27A 30%, rgba(255, 157, 92, .35) 52%, rgba(255, 157, 92, 0) 70%); }
.lueur .f-spark.lp.rest::before { animation: lp-pulse 1.6s ease-in-out infinite; }
.lueur .f-spark.lp.done::before { animation: none; scale: 1.1; }
@keyframes lp-pulse { 50% { scale: 1.25; } }
.lueur .f-rail { height: 4px; background: #E2CFA4; box-shadow: none; transition: opacity .4s; }
.lueur .lp-done .f-rail { opacity: 0; }
/* Une lettre s'allume quand l'étincelle passe ; elle ne bouge jamais */
.lueur .finger .lit, .lueur .finger.lumi .lit { text-shadow: 0 0 .2em rgba(255, 190, 90, .6), 0 0 .05em #FFF3C4; box-shadow: none; }
.lueur .finger .muet.lit { text-shadow: 0 0 .2em rgba(201, 184, 255, .7); }
.lueur .finger.lumi { animation: lp-lamp 1.1s ease-out; }
@keyframes lp-lamp { 25% { box-shadow: 0 0 140px 14px rgba(255, 200, 110, .9), 5px 12px 0 rgba(3, 4, 15, .45); } }
.lueur .f-arcs { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 2; fill: none; stroke-linecap: round; }
.lueur .lumi-sweep { background: linear-gradient(90deg, rgba(255, 210, 122, .15), #FFD27A); box-shadow: 0 0 12px #FFC96B; }

/* ---------- La gommette de papier (js/lueur-fx.js) ---------- */
.lueur .lp-sticker { position: fixed; z-index: 46; pointer-events: none; display: block; animation: lp-stamp .42s steps(5, end) both; }
.lueur .lp-sticker svg { width: 100%; height: 100%; overflow: visible; display: block; }
.lueur .lp-sticker.off { opacity: 0; transition: opacity .4s; }
@keyframes lp-stamp { 0% { opacity: 0; transform: scale(2.2) rotate(-30deg); } 70% { opacity: 1; transform: scale(.9) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }

/* ---------- Boutons (§Components · Buttons) : pilule d'or, grain de papier, une lueur ; on appuie, il fait .95 ---------- */
.lueur .btn-play, .lueur .round-btn.gold, .lueur .ear { color: #2A1A06; background: #FFD27A var(--g-paper); box-shadow: 0 0 0 5px rgba(255, 210, 122, .18), 0 0 30px rgba(255, 200, 100, .6); }
.lueur .round-btn { background-image: var(--g-paper); }
.lueur button { transition: scale var(--t-tap) var(--e-tap); }
.lueur button:active { scale: .95; }
.lueur .round-btn:active, .lueur .btn-play:active, .lueur .ear:active, .lueur .card-syl:active, .lueur .pic-card:active, .lueur .tile:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .lueur .shake { animation: none; } .lueur .f-spark.lp.rest::before, .lueur .finger.lumi { animation: none; } }

/* ---------- Les personnages (V6 · js/lueur-cast.js) ---------- */
/* Ils respirent, clignent et parlent par leur rig : les anciennes animations de cadre (bob, menace, balancement) se taisent */
.lueur .speaking .guide .plume-svg { animation: none; }
.lueur .story.effaceur .story-art, .lueur .hx-mini { animation: none; }
.lueur .duel-foe:not(.laugh):not(.ko):not(.super) .foe-body { animation: none; }
/* L'Effaceur est une marionnette d'ombre : ses grands gestes avancent aussi par images, jamais de filtre sur lui */
.lueur .duel-foe.laugh .foe-body, .lueur .duel-foe.ko .foe-body, .lueur .duel-foe.super .foe-body, .lueur .hx-foe.laugh, .lueur .hx-foe.zapped, .lueur .hx-mini.ouch { animation-timing-function: steps(4, end); }
.lueur .hx-foe.zapped { filter: none; }
.lueur .story-art svg.lc, .lueur .hx-foe svg.lc { overflow: visible; }
/* Sa bulle : du papier gris d'ombre, pas rose */
.lueur .story.effaceur .bubble { background: #DCD6EC var(--g-paper); color: #1F1C3E; }
.lueur .story.effaceur .bubble::before { border-right-color: #DCD6EC; }
@media (max-width: 760px) { .lueur .story.effaceur .bubble::before { border-right-color: transparent; border-bottom-color: #DCD6EC; } }
/* La bande : de petites marionnettes d'ombre ; chacun a sa lumière dans les découpes (plus de filtre de teinte) */
.lueur .duel-foe.rival .foe-body { filter: none; scale: .82; }
.lueur .duel-foe.rival .lc-hole { fill: hsl(var(--rh) 90% 82%); }
.lueur .duel-foe.rival .lc-hole-s { stroke: hsl(var(--rh) 90% 82%); }

/* ---------- Le vol (heist.js) : volée, une lettre devient ombre ; rendue, elle redevient lumière ---------- */
.lueur .pk-chip.stolen { background: #121436; box-shadow: inset 0 0 0 1.5px rgba(140, 155, 255, .45); outline: none; }
.lueur .pk-chip.stolen .pk-off { color: #0A0B22; opacity: 1; filter: none; text-shadow: 0 0 1px #8C9BFF, 0 0 .3em rgba(140, 155, 255, .4); }
.lueur .pk-fly.hx-loot { background: #121436; color: #0A0B22; border-radius: 6px; box-shadow: 0 0 0 2px #8C9BFF, 0 0 24px rgba(140, 155, 255, .35); text-shadow: 0 0 1px #B9B2E6, 0 0 2px #8C9BFF; }
.lueur .pk-fly:not(.hx-loot) { background: radial-gradient(circle, rgba(255, 210, 122, .45), rgba(255, 157, 92, 0) 70%); box-shadow: none; color: #FFF3CF; text-shadow: 0 0 .15em #FFD27A, 0 0 .45em #FF9D5C; }
.lueur .hx-stone { background: #171A48 var(--g-paper); border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(140, 155, 255, .55), 0 0 12px rgba(140, 155, 255, .35); }
.lueur .hx-stone b { color: #0A0B22; opacity: 1; text-shadow: 0 0 1px #B9B2E6, 0 0 .25em rgba(140, 155, 255, .5); }
.lueur .hx-stone.d2 { box-shadow: inset 0 0 0 1.5px #B9B2E6, 0 0 14px rgba(255, 210, 122, .35); }
.lueur .hx-crack path { stroke: #FFD27A; }
.lueur .hx-sack { opacity: 0; } /* il porte déjà son sac d'ombre : les lettres volent vers lui */

/* ---------- L'écran titre (V7) : l'image de repos de l'intro ---------- */
.lueur #title { background: #05061A; justify-content: flex-start; align-items: flex-start; }
/* Le décor couvre l'écran (16:9, ancré en bas, recadré autour de l'apprenti et de la tour) */
.lueur .lp-scene { position: absolute; left: 40%; bottom: 0; width: max(100vw, 100vh * 1.7778); aspect-ratio: 16 / 9; translate: -40% 0; pointer-events: none; z-index: 0; }
.lueur .lp-scene .lp-bg, .lueur .lp-scene .lp-light, .lueur .lp-scene .lp-lights { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lueur #title-wiz { position: absolute; left: 28.5%; top: 42.5%; bottom: auto; width: 17.8%; height: 42%; }
/* (V7-perf) le calque de lumière est immobile ; le grimoire flotte dans son propre calque, en transform seulement */
.lueur .lp-bookwrap { position: absolute; animation: lp-float 3.1s ease-in-out infinite; will-change: transform; }
.lueur .lp-bookwrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes lp-float { 50% { transform: translateY(-.5%) rotate(-1.5deg); } }
.lueur .title-block { position: absolute; left: max(4vw, 20px); top: 6vh; margin: 0; align-items: flex-start; text-align: left; gap: 1.8vh; z-index: 3; }
.lueur .title-block .btn-play { margin-top: 1vh; }
@media (max-aspect-ratio: 1/1) { .lueur .title-block { left: 50%; translate: -50% 0; align-items: center; text-align: center; } }

/* ---------- La carte de la tour (V7) : étages de papier découpé, haltes en disques de papier ---------- */
.lueur #map-scroll { background: radial-gradient(1.5px 1.5px at 12% 18%, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 28% 48%, #fff8 50%, transparent 51%), radial-gradient(2px 2px at 84% 26%, #fffb 50%, transparent 51%), radial-gradient(1px 1px at 72% 62%, #fff7 50%, transparent 51%), radial-gradient(1.5px 1.5px at 18% 80%, #fffa 50%, transparent 51%), radial-gradient(1px 1px at 90% 86%, #fff8 50%, transparent 51%), linear-gradient(#05061A, #10123A 55%, #1C1A4E); background-attachment: local; }
.lueur .floor { background: var(--g-soft), linear-gradient(90deg, #171A50 0, #23286C 10%, #262B72 50%, #23286C 90%, #171A50 100%);
  border-top: 4px solid rgba(116, 128, 222, .45); box-shadow: 0 -10px 16px -6px rgba(2, 3, 12, .6); }
/* Chaque étage prend un peu de sa couleur (ET1) ; le grain du fond est le plus discret (--g-soft, ET4) : sa teinte (S.FLOORS[].hue) se mêle au bleu nuit, sans le quitter */
.lueur .floor { --tint: hsl(var(--hue, 236) 70% 46%);
  background: var(--g-soft), linear-gradient(90deg, color-mix(in oklab, #171A50 80%, var(--tint)) 0, color-mix(in oklab, #23286C 74%, var(--tint)) 10%, color-mix(in oklab, #262B72 72%, var(--tint)) 50%, color-mix(in oklab, #23286C 74%, var(--tint)) 90%, color-mix(in oklab, #171A50 80%, var(--tint)) 100%); }
.lueur .floor::before { background: radial-gradient(ellipse at 50% 55%, rgba(125, 243, 225, .06), transparent 65%); }
.lueur .floor.restored::before { background: radial-gradient(ellipse at 50% 55%, rgba(255, 210, 122, .16), transparent 70%); }
/* Un étage pas encore ouvert est éteint (sans filtre : la carte défile) */
.lueur .floor.locked { filter: none; }
.lueur .floor.locked::after { background: linear-gradient(rgba(14, 16, 51, .55), rgba(14, 16, 51, .82)); }
/* Une fenêtre par halte : un arc de papier noir, de la lumière chaude quand la halte est finie */
.lueur .fw { width: 15px; height: 24px; border-radius: 8px 8px 2px 2px; background: #070821; box-shadow: 0 0 0 3px #3A4090; }
.lueur .fw.lit { background: linear-gradient(#FFE7A8, #FFA94D); box-shadow: 0 0 0 3px #3A4090, 0 0 16px 4px rgba(255, 201, 107, .55); }
.lueur .floor.restored .fw.lit { box-shadow: 0 0 0 3px #3A4090, 0 0 24px 8px rgba(255, 201, 107, .7); }
/* Le chemin : une couture de fil d'or */
.lueur .path path { stroke: #E9B040; stroke-opacity: .65; stroke-width: 2.6; stroke-dasharray: 7 6; }
.lueur .floor.restored .path path { stroke-opacity: .9; }
/* Le nom de l'étage : une étiquette de papier en Fraunces */
.lueur .floor-title { background: var(--papier) var(--g-paper); border: 0; border-radius: 3px; rotate: -1.2deg; box-shadow: 2px 5px 0 rgba(3, 4, 15, .5); }
.lueur .floor:nth-child(even) .floor-title { rotate: 1deg; }
.lueur .floor-title small { color: #6A5A44; }
.lueur .floor-title small b { color: #2A1A06; background: #FFD27A var(--g-paper); }
.lueur .floor-title span { color: #3A2A1A; font-weight: 600; }
.lueur .floor-title .act-tag { color: #8A5A12; text-shadow: none; }
/* Les haltes : des disques de papier. Finie = or qui luit ; aujourd'hui = indigo et un anneau de lumière ; fermée = gris-violet */
.lueur .node { background: #34377A var(--g-paper); border: 0; color: #C9C5F0; box-shadow: 2px 5px 0 rgba(3, 4, 15, .5); }
.lueur .node.done { color: #5A2E0E; background: #FFD27A var(--g-paper); box-shadow: 0 0 24px rgba(255, 200, 100, .6), 2px 5px 0 rgba(3, 4, 15, .5); }
.lueur .node.locked { opacity: 1; color: #7F7AA6; background: #3A3862 var(--g-paper); }
.lueur .node.current { color: #FFE9B8; background: #2A2F74 var(--g-paper); box-shadow: 0 0 0 3px rgba(255, 210, 122, .7), 0 0 30px rgba(255, 200, 100, .45), 2px 6px 0 rgba(3, 4, 15, .5); animation: none; }
.lueur .node.current.popin { animation: popin .8s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
.lueur .node.current::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid #FFD27A; animation: lp-ring 1.8s ease-out infinite; pointer-events: none; }
@keyframes lp-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.lueur .nstars i.on { color: #FFD27A; filter: none; }
.lueur .nstars i { color: rgba(3, 4, 15, .55); }
/* Les boutons du haut : le grimoire est un livre de feutre */
.lueur .hud-who, .lueur .hud-book, .lueur .salle-btn { color: #FFD27A; background: #2E3384 var(--g-felt); box-shadow: inset 0 0 0 2px rgba(233, 176, 64, .0), 2px 5px 0 rgba(3, 4, 15, .5); outline: 1.5px dashed #E9B040; outline-offset: -6px; }
.lueur .salle-btn { border: 0; } /* H5 : même étoffe que ses voisins ; un nouveau son l'entoure d'or */
.lueur .salle-btn.lit { box-shadow: 0 0 0 3px #FFD27A, 0 0 18px rgba(255, 210, 122, .6), 2px 5px 0 rgba(3, 4, 15, .5); }
.lueur .hud-who svg, .lueur .hud-book svg { color: #FFD27A; }
.lueur .hud-who svg [stroke], .lueur .hud-book svg path[stroke] { stroke: #2E3384; }
.lueur .xp-panel { background: rgba(14, 16, 51, .8); border-color: rgba(233, 176, 64, .35); }

/* ---------- Le grimoire (V7) : un livre de feutre aux pages crème ---------- */
/* Grimoire de poche (pendant la quête) : pas de filtre pendant qu'il grandit */
.lueur .pocket { filter: none; }
.lueur .pocket.focus { filter: none; }
.lueur .pk-book { background: #2E3384 var(--g-felt); box-shadow: 0 6px 14px rgba(3, 4, 15, .6); outline: 1.2px dashed #E9B040; outline-offset: -3px; }
.lueur .pocket.focus .pk-book { box-shadow: 0 0 34px 6px rgba(255, 210, 122, .45), 0 6px 14px rgba(3, 4, 15, .6); }
.lueur .pk-pages { background: var(--papier) var(--g-paper); }
.lueur .pk-stack { background: repeating-linear-gradient(#F3E6C9 0 1px, #CDB483 1px 2px); }
/* Une lettre gagnée : une gommette de papier doré, éclairée par derrière */
.lueur .pk-chip.got { background: #FFD27A var(--g-paper); box-shadow: 0 0 6px rgba(255, 200, 100, .6), 1px 2px 0 rgba(3, 4, 15, .35); rotate: -2deg; }
.lueur .pk-chip.got:nth-child(3n) { rotate: 1.5deg; }
.lueur .pk-chip.got .pk-g { color: #5A2E0E; }
/* La lettre en cours : de la lumière qui monte dans un contour de fil d'or */
.lueur .pk-chip.cur { background: #1E2262 var(--g-paper); box-shadow: none; outline: 1.2px dashed #E9B040; outline-offset: -2px; overflow: hidden; animation: none; }
.lueur .pk-chip.cur::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(rgba(255, 210, 122, .15), rgba(255, 210, 122, .6)); box-shadow: 0 -2px 8px rgba(255, 210, 122, .7); animation: lp-rise 2.2s ease-in-out infinite alternate; transform-origin: bottom; }
@keyframes lp-rise { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
.lueur .pk-chip.cur > * { position: relative; }
.lueur .pk-chip.cur > i { color: #FFE9B8; }
.lueur .pk-chip.cur.got { background: #FFD27A var(--g-paper); }
/* Le mystère : du papier sombre plié, une étincelle turquoise */
.lueur .pk-chip.mys { background: var(--g-paper), linear-gradient(135deg, transparent 49%, rgba(140, 155, 255, .22) 50%, transparent 51%), #171A48; box-shadow: 1px 2px 0 rgba(3, 4, 15, .35); }
.lueur .pk-chip.mys > i { font-size: 0; }
.lueur .pk-chip.mys::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #7DF3E1; box-shadow: 0 0 6px #7DF3E1; animation: lp-tw 2.4s ease-in-out infinite; }
@keyframes lp-tw { 50% { opacity: .25; transform: scale(.7); } }
/* Le grand grimoire : couverture de feutre cousue d'or, pages crème */
.lueur .book { border: 12px solid transparent; border-radius: 10px; background: var(--g-paper) padding-box, linear-gradient(90deg, #E6D6B0, var(--papier) 6%, var(--papier) 94%, #E6D6B0) padding-box, var(--g-felt) border-box, linear-gradient(#2E3384, #2E3384) border-box;
  box-shadow: 0 20px 40px rgba(3, 4, 15, .6); outline: 1.5px dashed #E9B040; outline-offset: -7px; }
.lueur .grim-head h2 { color: #FFE7B0; }
.lueur #grim-tabs button { background: rgba(46, 51, 132, .6); color: #C9C5F0; border-radius: 10px 10px 4px 4px; }
.lueur #grim-tabs button.on { background: var(--papier) var(--g-paper); color: #3A2A1A; border-color: #E9B040; }
.lueur .grim-rune:not(.unknown) { background: #FFD27A var(--g-paper); border: 0; border-radius: 6px; box-shadow: 0 0 16px rgba(255, 200, 100, .5), 2px 4px 0 rgba(3, 4, 15, .3); }
.lueur .grim-rune:not(.unknown) .glyph { color: #5A2E0E; }
.lueur .grim-rune.unknown { position: relative; background: var(--g-paper), linear-gradient(135deg, transparent 49.4%, rgba(140, 155, 255, .22) 50%, transparent 50.8%), #171A48; border: 0; border-radius: 6px; box-shadow: 2px 4px 0 rgba(3, 4, 15, .3); }
.lueur .grim-rune.unknown .glyph, .lueur .grim-rune.unknown .gpic { visibility: hidden; }
.lueur .grim-rune.unknown::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #7DF3E1; box-shadow: 0 0 10px #7DF3E1; animation: lp-tw 2.4s ease-in-out infinite; }
.lueur .gf-head { border-bottom: 1.5px dashed rgba(107, 58, 18, .35); padding-bottom: 6px; }
.lueur .grim-word { background: #FFF8E8 var(--g-paper); border: 0; border-radius: 6px; box-shadow: 2px 4px 0 rgba(3, 4, 15, .2); }

/* ---------- Les rangs (V7) : des écussons de feutre brodés ---------- */
.lueur .lp-patch.off { opacity: .55; }

/* ---------- Coffre et trésors (V7) ---------- */
/* La lueur du coffre est un dégradé dans le dessin (ch-glow), pas un filtre animé */
.lueur .xp-chest.ready { filter: none; }
.lueur .chest-svg.lp .ch-glow { opacity: .35; transition: opacity .4s; }
.lueur .reward-box h2 { color: #FFE7B0; text-shadow: 0 0 .3em rgba(255, 198, 96, .55), 0 0 1.1em rgba(255, 160, 80, .22); font-weight: 560; }
.lueur .rw-rune { background: #FFD27A var(--g-paper); color: #5A2E0E; border-radius: 10px; box-shadow: 0 0 90px 20px rgba(255, 200, 100, .45), 5px 10px 0 rgba(3, 4, 15, .45); }
.lueur .rw-icon { filter: none; }
.lueur .rw-stars i.on { color: #FFD27A; filter: none; }
@media (prefers-reduced-motion: reduce) { .lueur .lp-bookwrap, .lueur .node.current::after, .lueur .pk-chip.cur::before, .lueur .pk-chip.mys::after, .lueur .grim-rune.unknown::after { animation: none; } }
/* Un trésor montre une partie du sorcier : on coupe au cadre (le dessin et son voile débordent sinon) */

/* ---------- Potion (V8) : bocaux de verre-lumière, étagère de papier, chaudron sans filtre ---------- */
.lueur .cauldron .brew { filter: none; }
.lueur .toad .t-spot { animation: lp-spot 2.2s ease-in-out infinite; }
@keyframes lp-spot { 50% { opacity: .35; } }
.lueur .jar-svg [stroke="#1D1426"] { stroke: rgba(207, 227, 255, .55); stroke-width: 3; }
.lueur .jar-svg .cork rect { fill: #8A5A36; stroke: none; }
.lueur .jar.rare .jar-svg [stroke="#1D1426"] { stroke: #FFD27A; }
.lueur .pic-card.right .il, .lueur .jar:hover .il { filter: none; }
.lueur .shelf::after { background: #3A2F6E var(--g-paper); box-shadow: 2px 5px 0 rgba(3, 4, 15, .5); }
.lueur .tick { border-color: #C9A24A; }
.lueur .ing.ok .tick { background-color: #E9B040; }

/* ---------- Lucioles (V8) : de la lumière pure ; la lettre reste à l'encre sur le cœur crème ---------- */
.lueur .lu-body { border: 0; box-shadow: 0 0 24px 6px color-mix(in srgb, var(--lu) 70%, transparent), 0 0 70px 18px color-mix(in srgb, var(--lu) 30%, transparent); }
.lueur .luciole.caught .lu-body { background: radial-gradient(circle at 50% 46%, #FFFDF2 0 42%, #FFD27A 70%); box-shadow: 0 0 40px 12px rgba(255, 210, 122, .75); }
.lueur .lu-head ellipse { stroke: none; fill: #2B2766; }
.lueur .lu-head circle { stroke: none; }
.lueur .lu-head path:not(.lu-mouth) { stroke: #2B2766; }
.lueur .lu-wings path { stroke: none; fill: #CFE3FF; fill-opacity: .5; }
.lueur .cj-glass path { stroke: rgba(207, 227, 255, .55); stroke-width: 3; }

/* ---------- Duel (V8) : syllabes allumées sur le papier, bouclier d'ombre ---------- */
.lueur .dsyl.lit { color: inherit; background: rgba(255, 210, 122, .32); box-shadow: 0 0 18px rgba(255, 200, 100, .6); }
.lueur .duel-scroll.charged { box-shadow: 0 0 80px 14px rgba(255, 200, 110, .7), 5px 12px 0 rgba(3, 4, 15, .45); }
.lueur .duel-shield i { background: #0A0B22; border: 0; border-radius: 3px 3px 7px 7px; box-shadow: inset 0 0 0 1.5px #8C9BFF, 0 0 10px rgba(140, 155, 255, .5); }
.lueur .duel-shield i.broken { box-shadow: none; opacity: .3; }
.lueur .duel-combo i { background: #171A48 var(--g-paper); border: 0; box-shadow: inset 0 0 0 1.5px rgba(233, 176, 64, .5); }
.lueur .duel-combo i.on { background: #FFD27A var(--g-paper); box-shadow: 0 0 12px rgba(255, 210, 122, .8); }
@media (prefers-reduced-motion: reduce) { .lueur .toad .t-spot { animation: none; } }

/* ---------- Fluidité ---------- */
/* Chaque personnage animé a son propre calque : ses changements ne font pas redessiner l'écran autour de lui */
.lueur .wiz, .lueur svg.lc, .lueur .toad.lp, .lueur .cauldron.lp { will-change: transform; }

/* ---------- L'intro de la tour et la grande fin (V2 · js/lueur-intro.js) ---------- */
.lueur .lp-intro { position: fixed; inset: 0; z-index: 48; /* sous le canvas des particules (50) */ overflow: hidden; background: #05061A; opacity: 0; transition: opacity .6s; touch-action: none; user-select: none; -webkit-user-select: none; }
.lueur .lp-intro.in { opacity: 1; }
.lueur .lp-intro.out { opacity: 0; transition: opacity .4s; }
.lueur .lpi-stage { position: absolute; left: 40%; bottom: 0; width: max(100vw, 100vh * 1.7778); aspect-ratio: 16 / 9; translate: -40% 0; overflow: hidden; }
.lueur .lpi-layers { position: absolute; inset: 0; }
/* chaque calque bouge par transform seulement (parallaxe de la caméra) */
.lueur .lpi-layer { position: absolute; left: 0; top: 0; will-change: transform; }
.lueur .lpi-layer > img { width: 100%; height: 100%; display: block; }
.lueur .lpi-layer > div, .lueur .lpi-dyn > *, .lueur .lpi-vwin { position: absolute; }
.lueur .lpi-win { opacity: 0; display: block; will-change: opacity; }
.lueur .lpi-win svg, .lueur .lpi-loot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lueur .lpi-vwin { display: block; border-radius: 50%; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle, #FFE7A8 0 22%, rgba(255, 201, 107, .5) 40%, rgba(255, 201, 107, 0) 70%); }
.lueur .lpi-vwin.on { opacity: 1; }
.lueur .lpi-beacon { display: block; border-radius: 50%; opacity: 0; will-change: opacity;
  background: radial-gradient(circle, #FFF6D8 0 4.5%, rgba(255, 210, 122, .7) 12%, rgba(255, 157, 92, .18) 40%, rgba(255, 157, 92, 0) 70%); }
.lueur .lpi-flood { display: block; border-radius: 50%; opacity: 0; transform: scale(.2); will-change: transform, opacity; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 240, 200, .5), rgba(255, 210, 122, .22) 35%, rgba(255, 157, 92, 0) 70%); }
.lueur .lpi-effa { opacity: 0; will-change: transform; }
.lueur .lpi-effa svg { width: 100%; height: 100%; overflow: visible; display: block; }
.lueur .lpi-book { opacity: 0; will-change: transform, opacity; }
.lueur .lpi-book > svg { width: 100%; height: 100%; display: block; transform-origin: 50% 50%; }
.lueur .lpi-fall { display: block; border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle, #FFFDF2 0 10%, #FFD27A 22%, rgba(255, 157, 92, .3) 45%, rgba(255, 157, 92, 0) 70%); }
.lueur .lpi-loot { display: block; border-radius: 4px; background: #121436; box-shadow: inset 0 0 0 1.5px #8C9BFF, 0 0 10px rgba(140, 155, 255, .35); will-change: transform; }
.lueur .lpi-loot path { fill: #0A0B22; stroke: #8C9BFF; stroke-width: 1; }
/* l'apprenti attend dans le noir : pas encore d'étincelle au bout de sa baguette */
.lueur .lpi-hero [data-p="spark"], .lueur .lpi-hero [data-p="pool"] { transition: opacity .6s; }
.lueur .lpi-hero.lpi-dark [data-p="spark"], .lueur .lpi-hero.lpi-dark [data-p="pool"] { opacity: 0; }
.lueur .lpi-title { position: absolute; left: max(4vw, 20px); top: 7vh; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6vh; opacity: 0; transition: opacity .9s; pointer-events: none; }
.lueur .lp-intro.titled .lpi-title { opacity: 1; }
.lueur .lpi-wm { font-family: var(--display); font-style: italic; font-weight: 380; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; font-size: clamp(56px, 9vw, 120px); line-height: 1;
  color: #FFE9B8; text-shadow: 0 0 .22em rgba(255, 196, 90, .75), 0 0 .7em rgba(255, 150, 70, .3); }
.lueur .lpi-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-aspect-ratio: 1/1) { .lueur .lpi-title { left: 50%; translate: -50% 0; align-items: center; } }
/* le bouton pour revoir l'intro : petit, papier, une tour et un triangle */
.lueur .lp-replay { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 3; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; color: #3A2A1A; background: var(--papier) var(--g-paper); box-shadow: 2px 5px 0 rgba(3, 4, 15, .5), 0 0 18px rgba(255, 210, 122, .35); }
.lueur .lp-replay svg { width: 58%; }
.lueur .pa-undo { background: var(--papier) var(--g-paper); }
.lueur .lpi-char { display: block; will-change: transform, opacity; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 122, .55), rgba(255, 157, 92, 0) 70%); }
.lueur .lpi-char svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---------- V9 · fluidité des jeux d'avant : aucun filtre sur ce qui bouge ---------- */
/* (on garde les filtres qui ne bougent pas et qui servent : silhouettes « à trouver », états éteints) */
.lueur #hand, .lueur .pl-fog i, .lueur .pillar, .lueur .rune-ring .seg.lit, .lueur .trace-svg .inked,
.lueur .fg-fill, .lueur .owl-gift, .lueur .pa-ball, .lueur .pa-ball.glow, .lueur .pa-pot, .lueur .spark > svg,
.lueur .mirror, .lueur .dj-fly, .lueur .kh-esc, .lueur .kh.hint .kh-esc, .lueur .ring-key .key, .lueur .flyer.key-fly, .lueur .node .nseal,
.lueur .lbook, .lueur .hanger .hg-svg, .lueur .hanger.right .hg-svg, .lueur .ench-obj .il, .lueur .ench-obj.sleep .il, .lueur .ench-obj.awake,
.lueur .ench-obj.reveal, .lueur .vt-moon, .lueur .vt-moon.lit, .lueur .vt-star.lit, .lueur .vol-gate .vol-ring, .lueur .vol-gate.right .vol-ring,
.lueur .vol-gate.reveal .vol-ring, .lueur .flyer.vol-fly, .lueur .potion.rank-2 .pot, .lueur .potion.rank-3 .pot, .lueur .jar.rare,
.lueur .catch.rank-2 .catch-jar, .lueur .catch.rank-3 .catch-jar, .lueur .duel.rank-3 .duel-orb i, .lueur .build-pic, .lueur .tg-door { filter: none; }
/* les animations qui animaient un filtre : la même, en transform seulement */
.lueur .jar.hint svg { animation-name: lp-jarHint; }
@keyframes lp-jarHint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.lueur .jar.rare { animation: none; }
.lueur .spark.sing { animation-name: lp-sparkSing; }
@keyframes lp-sparkSing { 35% { transform: scale(1.3) rotate(12deg); } }
.lueur .mirror.merged, .lueur .book-pic.awake { animation-name: lp-mirGlow; }
@keyframes lp-mirGlow { 30% { transform: scale(1.04); } }
.lueur .st-word.nope { animation-name: lp-stNope; }
@keyframes lp-stNope { 40% { transform: scale(.9); opacity: .6; } }
.lueur .node.tower-door { filter: none; animation: none; box-shadow: none; }

/* ---------- V9 · les cadres d'avant : plus de bordure d'encre noire, un bord d'indigo doux ---------- */
.lueur .lock-plate,
.lueur .dial,
.lueur .owl-letter .seal,
.lueur .portrait,
.lueur .portrait .pframe,
.lueur .portrait.got-mail::after,
.lueur .pearl,
.lueur .spark.letter,
.lueur .dj-leaf,
.lueur .dj-grate,
.lueur .key-bow,
.lueur .wardrobe,
.lueur .wr-door,
.lueur .wr-rail,
.lueur .hanger .hg-g,
.lueur .ench-room,
.lueur .st-word,
.lueur .client-want,
.lueur .xp-pips i { border-color: rgba(27, 22, 64, .4); }
.lueur .client-want::before { border-right-color: rgba(27, 22, 64, .4); }
.lueur .dj-door { box-shadow: 0 0 0 3px rgba(27, 22, 64, .5), inset 0 0 0 3px rgba(27, 22, 64, .45), 0 18px 40px rgba(3, 4, 15, .6); }
.lueur .lock.golden .dj-door { box-shadow: 0 0 0 3px rgba(74, 44, 8, .55), inset 0 0 0 3px rgba(74, 44, 8, .5), 0 0 46px rgba(255, 214, 107, .4), 0 18px 40px rgba(3, 4, 15, .6); }
.lueur .lock.golden .dj-leaf { border-color: rgba(74, 44, 8, .5); }
.lueur .cam-g { -webkit-text-stroke: 1.5px rgba(27, 22, 64, .45); }
.lueur .st-count, .lueur .rw-trophy b { text-shadow: 0 0 .3em rgba(255, 210, 122, .6); }
.lueur .vg-letter { text-shadow: 0 0 18px rgba(255, 210, 122, .6); }
.lueur .salle-moons i::before { background: #0E1033; }
/* papier pour les surfaces qu'on lit dans ces jeux */
.lueur .client-want, .lueur .spark.letter, .lueur .dial, .lueur .key-bow { background: var(--papier) var(--g-paper); }
/* Les pierres de lettres (Miroir, Fusion, Écoute…) : on y lit des lettres, donc du papier crème (règle 5), une ombre douce */
.lueur .stone { background: var(--papier) var(--g-paper); color: var(--encre); border-color: transparent; box-shadow: 3px 6px 0 rgba(3, 4, 15, .45); border-radius: 12px; }
.lueur .stone.lit, .lueur .stone.right { color: #5A2E0E; background: #FFD27A var(--g-paper); border-color: transparent; box-shadow: 0 0 30px 6px rgba(255, 200, 100, .55), 3px 6px 0 rgba(3, 4, 15, .45); }
.lueur .stone .muet { color: #A9A2BE; }
.lueur .stone:active { transform: none; }
/* Hibou : un nom ne se coupe jamais (Lexend est plus large que l'ancienne police : « Jouj / ou » coupait une syllabe) */
.lueur .portrait .plaque { white-space: nowrap; font-size: clamp(18px, 3.3vmin, 28px); letter-spacing: 0; background: var(--papier) var(--g-paper); border-color: rgba(168, 112, 30, .55); }

/* La malle (drapeau wardrobe2, js/malle.js, wardrobe-malle §Rules/§Smooth) : seule la partie changée rebondit,
   toujours visible (jamais depuis le transparent), 1,12 → 0,96 → 1 en 300 ms ; un objet, ou une partie du corps (soft). */
.lueur .lp-pop { transform-box: fill-box; transform-origin: 50% 50%; animation: lp-pop .3s cubic-bezier(.3, .7, .4, 1) both; }
.lueur .lp-pop.soft { animation-name: lp-pop-soft; }
.lueur .lp-pop.foot { transform-origin: 50% 100%; }
@keyframes lp-pop { 0% { transform: scale(1.12); } 55% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes lp-pop-soft { 0% { transform: scale(1.06); } 55% { transform: scale(.98); } 100% { transform: scale(1); } }
.lueur .lp-bloom { position: fixed; z-index: 44; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #FFF6D8CC, #FFD27A66 40%, #FFD27A00); animation: lp-bloom .7s ease-out both; }
@keyframes lp-bloom { 0% { transform: scale(.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
.lueur .flyer.lp-w2fly { display: grid; place-items: center; border-radius: 50%; background: radial-gradient(closest-side, #FFD27A55, #FFD27A00); }
.lueur .flyer.lp-w2fly > .lp-blob { display: block; width: 100%; height: 100%; }
.lueur .lp-blob { border-radius: 50%; }

/* ---------- La porte d'entrée (E2, js/porte.js) : écrans du parent, papier crème sur la nuit ---------- */
.lueur #porte { background: radial-gradient(120% 80% at 50% 0%, #23276A 0%, var(--nuit) 65%); overflow-y: auto; align-items: center; justify-content: safe center;
  padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px)); }
.lueur .po-wrap { width: 100%; max-width: 440px; margin: auto 0; }
.lueur .po-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px; border-radius: 18px; color: var(--encre);
  background-color: var(--papier); background-image: var(--g-paper); font-family: var(--read); font-size: 16px; line-height: 1.45;
  box-shadow: 0 0 90px rgba(255, 210, 122, .16), 2px 8px 0 rgba(3, 4, 15, .45); }
.lueur .po-head { display: flex; justify-content: space-between; align-items: center; }
.lueur .po-wm { font: italic 380 26px var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; color: var(--fil-sombre); }
.lueur .po-lang { font: 600 13px var(--read); color: var(--encre); background: transparent; border: 1.5px solid #CDBB94; border-radius: 99px; padding: 5px 14px; cursor: pointer; min-height: 44px; }
.lueur .po-card h2 { margin: 6px 0 0; font: 560 26px/1.15 var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--encre); text-wrap: balance; }
.lueur .po-lead { margin: 0; color: #4A4468; }
.lueur .po-form { display: flex; flex-direction: column; gap: 8px; }
.lueur .po-form label { font-size: 14px; font-weight: 600; }
.lueur .po-form input { font: 17px var(--read); color: var(--encre); padding: 12px 14px; border-radius: 10px; border: 1.5px solid #D9C9A6; background: #FBF4E3; width: 100%; box-sizing: border-box; }
.lueur .po-form input:focus-visible { outline: 3px solid var(--fil); outline-offset: 1px; }
.lueur .po-form .po-code { font-size: 28px; letter-spacing: .45em; text-align: center; padding-inline: 0 0; font-variant-numeric: tabular-nums; }
.lueur .po-btn { font: 600 17px var(--read); border: 0; border-radius: 99px; padding: 13px 18px; min-height: 48px; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px; }
.lueur .po-btn.ink { background: var(--feutre); color: #FFF4DA; }
.lueur .po-btn.google { background: #fff; color: #2B2B2B; border: 1.5px solid #CDBB94; }
.lueur .po-btn.google i { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); }
.lueur .po-btn:focus-visible, .lueur .po-lang:focus-visible, .lueur .po-links button:focus-visible { outline: 3px solid var(--fil); outline-offset: 2px; }
.lueur .po-btn:active { transform: scale(.98); }
.lueur .po-or { display: flex; align-items: center; gap: 10px; color: #6A6386; font-size: 14px; }
.lueur .po-or::before, .lueur .po-or::after { content: ""; flex: 1; height: 1px; background: #D9C9A6; }
.lueur .po-msg { margin: 0; min-height: 1.2em; font-size: 14px; color: #8A3A2A; }
.lueur .po-links { margin: 0; font-size: 14px; color: #6A6386; text-align: center; }
.lueur .po-links button { font: inherit; color: var(--encre); background: none; border: 0; padding: 4px; text-decoration: underline; cursor: pointer; }
.lueur .po-fine { margin: 2px 0 0; font-size: 13px; color: #6A6386; }
.lueur .po-fine a { color: var(--encre); }
.lueur .po-kids { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.lueur .po-kid { display: grid; justify-items: center; gap: 2px; font-size: 15px; }
.lueur .po-kid small { color: #6A6386; font-size: 13px; }
.lueur .po-av { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #2C2F6E, var(--nuit)); display: grid; place-items: center; }
.lueur .po-av svg { width: 100%; height: 100%; }
.lueur .po-busy { margin: 6px 0; display: flex; align-items: center; gap: 12px; font-weight: 600; }
.lueur .po-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #D9C9A6; border-top-color: var(--fil); animation: lp-spin .9s linear infinite; }
@keyframes lp-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .lueur .po-spin { animation-duration: 3s; } }
/* « Qui joue ? » devient le premier écran : le nom qui s'allume au-dessus */
.lueur #pick.home .pick-mark { display: flex; justify-content: center; margin-top: max(3vh, env(safe-area-inset-top, 0px)); position: relative; z-index: 1; }
.lueur #pick.home .wordmark { font-size: clamp(48px, calc(var(--u) * 11), 110px); }
.lueur #pick.home .screen-title { margin: 0 0 2.5vh; font-size: clamp(30px, calc(var(--u) * 5.5), 52px); position: relative; z-index: 1; }
.lueur #pick.home #pick-list { position: relative; z-index: 1; }
/* E3 · essai ou tour, enfants, c'est prêt */
.lueur .po-plans { display: grid; gap: 12px; }
.lueur .po-plan { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-radius: 14px; border: 1.5px solid #D9C9A6; background: #FBF4E3; }
.lueur .po-plan.gold { border: 2px solid var(--fil); box-shadow: 0 0 24px rgba(233, 176, 64, .18); }
.lueur .po-plan h3 { margin: 0; font: 560 20px/1.2 var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--encre); }
.lueur .po-plan ul { margin: 0; padding-left: 18px; color: #4A4468; font-size: 15px; display: grid; gap: 3px; }
.lueur .po-price { margin: 4px 0 0; font-size: 15px; color: #4A4468; }
.lueur .po-price b { font-size: 24px; color: var(--encre); }
.lueur .po-founder { margin: 0; font-size: 13px; color: #6A6386; }
.lueur .po-plan .po-btn { margin-top: auto; }
.lueur .po-btn.line { background: transparent; color: var(--encre); border: 2px solid var(--encre); }
.lueur .po-btn.gold { background: var(--lueur); color: var(--encre); box-shadow: 0 0 18px rgba(255, 210, 122, .55); }
.lueur .po-key { width: 64px; height: 64px; align-self: center; color: var(--fil); }
.lueur .po-key svg { width: 100%; height: 100%; }
.lueur .po-hello { display: flex; justify-content: center; gap: 10px; }
.lueur .po-tip { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FFE9B8; font-size: 14px; }
@media (min-width: 720px) { .lueur #porte .po-wrap:has(.po-plans) { max-width: 680px; } .lueur .po-plans { grid-template-columns: 1fr 1fr; } }
/* « Qui joue ? » : l'apprenti pas encore choisi est une ombre avec une étoile */
.lueur .pick-card.fresh { position: relative; }
.lueur .pick-card.fresh .avatar-svg { opacity: .28; }
.lueur .pick-new { position: absolute; top: 34%; left: 50%; translate: -50% -50%; font: 600 44px var(--display); color: var(--lueur); text-shadow: 0 0 .4em rgba(255, 210, 122, .8); }
/* E4 : l'ancienne adresse montre la nouvelle */
.lueur .po-moved { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FFE9B8; color: var(--encre); font: 14px/1.4 var(--read); }
.lueur .po-moved a { color: var(--encre); font-weight: 600; }
.lueur #pick > .po-moved { position: absolute; left: 50%; translate: -50% 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); width: min(92vw, 520px); z-index: 2; }

/* ---------- Lire un sort, rang Étoile (F12) : les images flottent dans des bulles de savon ---------- */
/* Le bouton ne bouge pas (press et shake gardent leur animation) ; la bulle flotte dans .bub-float, la chose tombe dans .bub-pic */
.lueur .read.bubbles .pic-card, .lueur .read.bubbles .pic-card.right { background: none; border-color: transparent; box-shadow: none; border-radius: 50%; overflow: visible; }
.lueur .read.bubbles .bub-float { position: relative; display: grid; place-items: center; width: 100%; height: 100%;
  animation: lp-bub-rise .9s var(--d, 0ms) cubic-bezier(.2, .9, .3, 1.15) both, lp-bub-bob var(--bob, 3s) calc(var(--d, 0ms) + .9s) ease-in-out infinite; }
.lueur .read.bubbles .bub-pic { display: grid; place-items: center; width: 74%; height: 74%; }
.lueur .read.bubbles .bub-pic > .il { width: 100%; height: 100%; overflow: visible; }
.lueur .read.bubbles .bub { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .9) 0 5%, rgba(255, 255, 255, 0) 13%),
    radial-gradient(circle at 72% 78%, rgba(255, 255, 255, .4) 0 3%, rgba(255, 255, 255, 0) 9%),
    radial-gradient(circle, rgba(170, 230, 255, .05) 50%, rgba(150, 220, 255, .26) 67%, rgba(255, 160, 230, .3) 82%, rgba(255, 255, 255, .55) 95%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 26px rgba(160, 220, 255, .22); transition: transform .22s ease-out, opacity .22s ease-out; }
.lueur .read.bubbles .popped .bub { transform: scale(1.45); opacity: 0; }
.lueur .read.bubbles .popped .bub-float { animation-play-state: paused; }
.lueur .read.bubbles .away .bub-float { animation: lp-bub-away .9s ease-in forwards; }
.lueur .pics.four .pic-card { width: clamp(72px, calc(var(--u) * 15), 160px); }
@media (max-width: 560px) { .lueur .pics.four { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; } .lueur .pics.four .pic-card { width: clamp(96px, 30vw, 150px); } } /* étroit : deux sur deux, jamais trois plus une */
@keyframes lp-bub-rise { from { transform: translateY(55vh) scale(.6); opacity: 0; } 50% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes lp-bub-bob { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(4px, -8px); } 50% { transform: translate(0, -12px); } 75% { transform: translate(-4px, -5px); } }
@keyframes lp-bub-away { to { transform: translateY(-70vh) scale(.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lueur .read.bubbles .bub-float, .lueur .read.bubbles .away .bub-float { animation: none; } }

/* ---------- Les salles en papier découpé (ET4, js/room.js + js/paper.js) ----------
   La scène fait 1600 × 900 unités ; fit() la met à l'échelle. Le fond est une image cuite une fois ; ce qui bouge est
   une petite image (papier : « on twos », 12 images/s) ; la lumière est en CSS et bouge en douceur. */
.lueur .rscene { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
.lueur .rscene img, .lueur .rpiece img { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.lueur .rbase, .lueur .rmoon { left: 0; top: 0; width: 1600px; height: 900px; }
.lueur .rmoon { animation: lp-r-moon 7s ease-in-out infinite alternate; }
.lueur .rpiece { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
.lueur .psp { will-change: transform; }
/* Le papier bouge par à-coups réguliers (steps = secondes × 12) */
.lueur .pp-sway { animation: lp-pp-sway 2.6s steps(31) infinite alternate; }
.lueur .pp-swag { animation: lp-pp-swag 3.4s steps(41) infinite alternate; }
.lueur .pp-late { animation-delay: -1.3s; }
.lueur .pp-swish { animation: lp-pp-swish 1.8s steps(22) infinite alternate; }
.lueur .pp-nibble { animation: lp-pp-nibble 1.5s steps(18) infinite; }
@keyframes lp-pp-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes lp-pp-swag { from { transform: rotate(-.5deg) translateY(0); } to { transform: rotate(.5deg) translateY(2px); } }
@keyframes lp-pp-swish { from { transform: rotate(-10deg); } to { transform: rotate(8deg); } }
@keyframes lp-pp-nibble { 0%, 46%, 100% { transform: rotate(0); } 54%, 70% { transform: rotate(-4deg) translateY(1px); } 62%, 78% { transform: rotate(-1deg); } }
/* La lumière : flamme, halo, lucioles */
.lueur .lf { position: absolute; width: calc(20px * var(--s)); height: calc(32px * var(--s)); margin: calc(-30px * var(--s)) 0 0 calc(-10px * var(--s));
  border-radius: 50% 50% 48% 48% / 64% 64% 36% 36%; background: radial-gradient(ellipse 50% 46% at 50% 68%, #FFFDF2 0, #FFF1C2 30%, #FFD27A 58%, rgba(255, 157, 92, 0) 100%);
  transform-origin: 50% 90%; animation: lp-lf-flick 1.2s ease-in-out infinite alternate; }
.lueur .lf::before { content: ''; position: absolute; left: 50%; top: 66%; width: calc(150px * var(--s)); height: calc(150px * var(--s)); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .32), rgba(255, 170, 100, .1) 45%, transparent); animation: lp-lf-halo 2.8s ease-in-out infinite alternate; }
.lueur .lf-2 { animation-duration: 1.45s; animation-delay: -.4s; } .lueur .lf-2::before { animation-delay: -1s; }
.lueur .lf-3 { animation-duration: 1.05s; animation-delay: -.8s; } .lueur .lf-3::before { animation-delay: -2s; }
@keyframes lp-lf-flick { 0% { transform: scale(1, 1) skewX(0); opacity: .92; } 50% { transform: scale(.94, 1.06) skewX(-2deg); } 100% { transform: scale(1.03, .96) skewX(2deg); opacity: 1; } }
@keyframes lp-lf-halo { from { opacity: .75; } to { opacity: 1; } }
.lueur .lg { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); opacity: var(--o, 1); }
.lueur .lg-pulse { animation: lp-lg-pulse 2.6s ease-in-out infinite alternate; }
@keyframes lp-lg-pulse { from { opacity: calc(var(--o, 1) * .6); } to { opacity: var(--o, 1); } }
.lueur .lm { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px 3px rgba(125, 243, 225, .55); }
.lueur .lm-jar { animation: lp-lm-jar 5s ease-in-out infinite; }
.lueur .lm-2 { animation-duration: 6.4s; animation-delay: -2s; } .lueur .lm-3 { animation-duration: 4.4s; animation-delay: -1s; }
@keyframes lp-lm-jar { 0%, 100% { transform: translate(0, 0); opacity: .9; } 30% { transform: translate(8px, -9px); opacity: 1; } 60% { transform: translate(-7px, -3px); opacity: .5; } 80% { transform: translate(3px, 6px); opacity: 1; } }
@keyframes lp-r-moon { from { opacity: .8; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lueur .rscene *, .lueur .rscene *::before { animation: none !important; } }

/* ---------- Les objets de papier de la carte (ET4, js/floor-props.js) : éteints, puis allumés quand l'étage est repris ---------- */
.lueur .fprop { position: absolute; z-index: 1; pointer-events: none; }
.lueur .fprop img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lueur .fp-on, .lueur .fp-move { position: absolute; inset: 0; }
.lueur .floor:not(.restored) .fp-on, .lueur .floor.restored .fp-off { display: none; }
.lueur .floor.restored .fprop::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 122, .22), transparent); }
.lueur .fp-swing { animation: lp-fp-swing 2.2s steps(26) infinite alternate; }
.lueur .fp-unroll { animation: lp-fp-sway 2.8s steps(34) infinite alternate; }
.lueur .fp-plop { transform-origin: 50% 88%; animation: lp-fp-plop 3.6s steps(43) infinite; }
.lueur .lf-sneeze { animation: lp-lf-flick 1.2s ease-in-out infinite alternate, lp-lf-sneeze 4.6s ease-in-out infinite; }
@keyframes lp-fp-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes lp-fp-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes lp-fp-plop { 0%, 80%, 100% { transform: scale(1, 1); } 85% { transform: scale(1.05, .94); } 90% { transform: scale(.97, 1.04); } }
@keyframes lp-lf-sneeze { 0%, 72%, 88%, 100% { opacity: 1; } 76%, 84% { opacity: 0; } }
/* L'étage vient d'être repris : chaque objet se pose d'un coup de tampon, l'un après l'autre */
.lueur .floor.fp-new .fp-on { animation: lp-fp-stamp .6s steps(7) both; animation-delay: calc(var(--i) * .45s + .5s); }
@keyframes lp-fp-stamp { 0% { transform: scale(.3); opacity: 0; } 45% { transform: scale(1.14); opacity: 1; } 72% { transform: scale(.94); } 100% { transform: scale(1); } }
/* Étages 2 et 3 : des yeux qui suivent, des fantômes qui flottent, une araignée qui descend (tout sur le papier, on twos) */
.lueur .pp-look { animation: lp-pp-look 4.2s steps(50) infinite; }
.lueur .pp-look-s { animation: lp-pp-look-s 4.2s steps(50) infinite; }
.lueur .pp-bob { animation: lp-pp-bob 2.6s steps(31) infinite alternate; }
.lueur .pp-peek { animation: lp-pp-peek 4.4s steps(53) infinite; }
.lueur .pp-drop { animation: lp-pp-drop 5s steps(60) infinite; }
@keyframes lp-pp-look { 0%, 40% { transform: translateX(-4px); } 50%, 90% { transform: translateX(4px); } 100% { transform: translateX(-4px); } }
@keyframes lp-pp-look-s { 0%, 40% { transform: translateX(-1.6px); } 50%, 90% { transform: translateX(1.6px); } 100% { transform: translateX(-1.6px); } }
@keyframes lp-pp-bob { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-12px) rotate(1deg); } }
@keyframes lp-pp-peek { 0%, 30% { transform: translateY(4px); opacity: .4; } 42%, 82% { transform: translateY(0); opacity: 1; } 90%, 100% { transform: translateY(4px); opacity: .4; } }
@keyframes lp-pp-drop { 0%, 15% { transform: translateY(-40px); } 45%, 75% { transform: translateY(0); } 100% { transform: translateY(-40px); } }
/* Objets de la carte : deux images qui alternent (moitié-moitié, ou un clin d'œil bref), et les mouvements des étages 2 et 3 */
.lueur .fp-a-half { animation: lp-fp-a-half 2.8s steps(1) infinite; } .lueur .fp-b-half { animation: lp-fp-b-half 2.8s steps(1) infinite; }
.lueur .fp-b-blink { animation: lp-fp-b-blink 3.4s steps(1) infinite; } .lueur .fp-a-blink { animation: lp-fp-a-blink 3.4s steps(1) infinite; }
@keyframes lp-fp-a-half { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lp-fp-b-half { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes lp-fp-a-blink { 0%, 84%, 96%, 100% { opacity: 1; } 85%, 95% { opacity: 0; } }
@keyframes lp-fp-b-blink { 0%, 84%, 96%, 100% { opacity: 0; } 85%, 95% { opacity: 1; } }
.lueur .fp-wobble { animation: lp-fp-wobble 2.4s steps(29) infinite alternate; }
.lueur .fp-straighten { animation: lp-fp-straighten 5s steps(60) infinite; }
.lueur .fp-bob { animation: lp-fp-bob 2.4s steps(29) infinite alternate; }
.lueur .fp-drop { animation: lp-fp-drop 4s steps(48) infinite; }
@keyframes lp-fp-wobble { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes lp-fp-straighten { 0% { transform: rotate(-15deg); } 20%, 70% { transform: rotate(0); } 100% { transform: rotate(-15deg); } }
@keyframes lp-fp-bob { from { transform: translateY(0); } to { transform: translateY(-6%); } }
@keyframes lp-fp-drop { 0%, 15% { transform: translateY(-34%); } 45%, 75% { transform: translateY(0); } 100% { transform: translateY(-34%); } }
/* Étages 4 à 6 : l'œuf qui tremble, les paupières qui clignent, les lianes, le mobile, la lunette ; la lumière des potions */
.lueur .pp-wobble { animation: lp-pp-wobble 1.4s steps(17) infinite alternate; }
.lueur .pp-lid { animation: lp-pp-lid 4.6s steps(1) infinite; }
.lueur .pp-blink { animation: lp-pp-blink 5.2s steps(62) infinite; }
.lueur .pp-stir { animation: lp-pp-stir 4s steps(48) infinite alternate; }
.lueur .pp-spin { animation: lp-pp-spin 3.2s steps(38) infinite alternate; }
.lueur .pp-nudge { animation: lp-pp-nudge 6s steps(72) infinite alternate; }
.lueur .pp-turn { animation: lp-pp-turn 3.6s steps(43) infinite alternate; }
@keyframes lp-pp-wobble { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes lp-pp-lid { 0%, 90%, 96%, 100% { opacity: 0; } 91%, 95% { opacity: 1; } }
@keyframes lp-pp-blink { 0%, 88%, 100% { transform: scaleY(1); } 92% { transform: scaleY(.1); } }
@keyframes lp-pp-stir { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }
@keyframes lp-pp-spin { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes lp-pp-nudge { 0%, 55% { transform: rotate(0); } 70%, 100% { transform: rotate(-4deg); } }
@keyframes lp-pp-turn { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.lueur .lg-late { animation-delay: -1.3s; }
.lueur .lf-blue { background: radial-gradient(ellipse 50% 46% at 50% 68%, #F2FCFF 0, #BFE9FF 34%, #5A9CFF 62%, rgba(90, 156, 255, 0) 100%); }
.lueur .lf-blue::before { background: radial-gradient(closest-side, rgba(140, 190, 255, .3), transparent); }
.lueur .lm-rise { animation: lp-lm-rise 2.4s ease-out infinite; }
.lueur .lm-1 { animation-delay: -.8s; } .lueur .lm-2 { animation-delay: -1.6s; } .lueur .lm-3 { animation-delay: -.3s; }
.lueur .lm-travel { animation: lp-lm-travel 6s linear infinite; }
.lueur .lm-drip { animation: lp-lm-drip 3.2s ease-in infinite; }
.lueur .lm-tw { width: 5px; height: 5px; box-shadow: 0 0 6px 2px rgba(255, 255, 255, .6); animation: lp-lm-tw 3s ease-in-out infinite; }
.lueur .lm-shoot { animation: lp-lm-shoot 7s ease-out infinite; box-shadow: 0 0 10px 4px rgba(255, 240, 200, .7), -18px 9px 0 -1px rgba(255, 240, 200, .5), -34px 17px 0 -2px rgba(255, 240, 200, .3); }
@keyframes lp-lm-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-60px) scale(1); opacity: 0; } }
@keyframes lp-lm-travel { 0% { transform: translateX(0); opacity: 0; } 8%, 92% { opacity: 1; } 100% { transform: translateX(760px); opacity: 0; } }
@keyframes lp-lm-drip { 0%, 60% { transform: translateY(0) scale(.6); opacity: 0; } 70% { opacity: 1; } 100% { transform: translateY(120px) scale(1); opacity: 0; } }
@keyframes lp-lm-tw { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes lp-lm-shoot { 0% { transform: translate(0, 0); opacity: 0; } 3% { opacity: 1; } 12% { transform: translate(200px, -100px); opacity: 0; } 100% { transform: translate(200px, -100px); opacity: 0; } }
.lueur .fp-rise { animation: lp-fp-rise 2.6s steps(31) infinite; }
.lueur .fp-wag { animation: lp-fp-wag 1s steps(12) infinite alternate; }
.lueur .fp-shoot { animation: lp-fp-shoot 3.2s steps(38) infinite; }
.lueur .fp-spin { animation: lp-fp-spin 3s steps(36) infinite alternate; }
.lueur .fp-sway-s { animation: lp-fp-sway 3.4s steps(41) infinite alternate; }
@keyframes lp-fp-rise { 0% { transform: translateY(14%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-10%); opacity: 0; } }
@keyframes lp-fp-wag { from { transform: rotate(-14deg); } to { transform: rotate(12deg); } }
@keyframes lp-fp-shoot { 0%, 30% { transform: translate(-30%, 30%) scale(.5); opacity: 0; } 40% { opacity: 1; } 70% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(8%, -8%); opacity: 0; } }
@keyframes lp-fp-spin { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
/* Étages 7 à 9 : la cloche qui balance, la plante qui claque, la mouche, les faisceaux des projecteurs */
.lueur .pp-bell { animation: lp-pp-bell 2.4s steps(29) infinite alternate; }
.lueur .pp-snap { animation: lp-pp-snap 2.6s steps(31) infinite; }
.lueur .pp-wiggle { animation: lp-pp-wiggle 1.3s steps(16) infinite alternate; }
@keyframes lp-pp-bell { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes lp-pp-snap { 0%, 62%, 100% { transform: scale(1) rotate(0); } 70% { transform: scale(1.14) rotate(-5deg); } 78% { transform: scale(.94) rotate(2deg); } 86% { transform: scale(1.02); } }
@keyframes lp-pp-wiggle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.lueur .pp-fly { position: absolute; width: 0; height: 0; animation: lp-pp-fly 2.6s ease-in-out infinite; }
@keyframes lp-pp-fly { 0% { transform: translate(0, 0); } 25% { transform: translate(28px, -18px); } 50% { transform: translate(8px, -36px); } 75% { transform: translate(-22px, -12px); } 100% { transform: translate(0, 0); } }
.lueur .lbeam { position: absolute; width: 460px; height: 760px; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(255, 241, 204, .22), rgba(255, 241, 204, 0) 85%);
  transform-origin: 50% 0; animation: lp-lbeam 5s ease-in-out infinite alternate; }
.lueur .lbeam-2 { animation-delay: -2.5s; }
@keyframes lp-lbeam { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.lueur .fp-snap { animation: lp-fp-snap 2.4s steps(29) infinite; }
.lueur .fp-pour { animation: lp-fp-pour 1.6s steps(19) infinite; }
.lueur .fp-fly { animation: lp-fp-fly 3s steps(36) infinite; }
.lueur .fp-bow { animation: lp-fp-bow 3.2s steps(38) infinite; }
@keyframes lp-fp-snap { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.16) rotate(-6deg); } 80% { transform: scale(.94); } }
@keyframes lp-fp-pour { 0% { transform: translateY(-8%); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(10%); opacity: 0; } }
@keyframes lp-fp-fly { 0%, 20% { transform: translate(0, 30%) rotate(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: translate(14%, -14%) rotate(20deg); opacity: 1; } 100% { transform: translate(18%, -18%) rotate(30deg); opacity: 0; } }
@keyframes lp-fp-bow { 0%, 40% { transform: rotate(0); } 55%, 75% { transform: rotate(30deg); } 90%, 100% { transform: rotate(0); } }
/* Étages 10 à 12 : nuages qui dérivent, plats de livre qui battent, une page qui tombe, un dragon au loin, la braise du phare */
.lueur .pp-drift { animation: lp-pp-drift 7s steps(84) infinite alternate; }
.lueur .pp-flap { animation: lp-pp-flap .7s steps(8) infinite alternate; }
.lueur .pp-fall-page { animation: lp-pp-fall-page 6s steps(72) infinite; }
@keyframes lp-pp-drift { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
@keyframes lp-pp-flap { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
@keyframes lp-pp-fall-page { 0% { transform: translate(0, -60px) rotate(-20deg); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(40px, 120px) rotate(18deg); } 90% { opacity: 1; } 100% { transform: translate(-10px, 300px) rotate(-12deg); opacity: 0; } }
.lueur .pp-glide { position: absolute; width: 0; height: 0; animation: lp-pp-glide 38s linear infinite; }
@keyframes lp-pp-glide { from { transform: translate(0, 0); } 50% { transform: translate(900px, -40px); } to { transform: translate(1840px, 10px); } }
.lueur .lm-ember { animation: lp-lm-ember 3s ease-in-out infinite alternate; box-shadow: 0 0 10px 4px rgba(255, 157, 92, .6); }
@keyframes lp-lm-ember { from { opacity: .4; } to { opacity: 1; } }
.lueur .fp-fall { animation: lp-fp-fall 3.4s steps(41) infinite; }
@keyframes lp-fp-fall { 0%, 40% { transform: translate(0, 0) rotate(0); opacity: 1; } 80% { transform: translate(4%, 60%) rotate(70deg); opacity: 1; } 100% { transform: translate(4%, 60%) rotate(70deg); opacity: 0; } }