/* Frontière hors la loi — ton de la page : un space opera. Le jaune d'or d'un générique dans les étoiles, le sable de
   Mars, la glace d'Europe, la jungle de Vénus, le rouge de l'Imperium, le bleu des hologrammes et des lames.
   Ambiance par section (data-mood sur <body> : mars, cantina, holo, europe, praxic, imperium, nuit ; js/components/moods.js).
   Lame praxique allumée (body.is-lame) : voile bleuté, pointeur en sabre, cristaux visibles.
   Générique d'ouverture (#crawl), saut en hyperespace (#hyperspace), atelier du sabre, cantina, syndicats, projecteur
   holographique, enquête sur Bael, plans de Nuit noire, arsenal. Les mini-jeux sont dans css/games.css. */

.frontiere {
  --sw: #ffe81f;
  --gold: #ffd23a;
  --gold-hi: #fff2b8;
  --mars: #ff9a55;
  --mars-hi: #ffd9bf;
  --europe: #9fd8ff;
  --europe-hi: #e2f4ff;
  --venus: #8fd48a;
  --imperium: #ff4a4a;
  --imperium-hi: #ffc9c9;
  --praxic: #6fd0ff;
  --praxic-hi: #dcf4ff;
  --cantina: #ffb347;
  --holo: #5fd6ff;
  --piques: #ff6f91;
  --totalite: #ff5a3c;
  --reforme: #4fb2ff;
  --blade-core: #e8f2ff;
  --blade-glow: #3a8bff;
  --blade-glow2: #3a8bff;
  --page-accent: var(--gold);
  --page-accent-hi: var(--gold-hi);
}
.frontiere[data-mood="mars"] { --page-accent: var(--mars); --page-accent-hi: var(--mars-hi); }
.frontiere[data-mood="cantina"] { --page-accent: var(--cantina); --page-accent-hi: #ffe4bd; }
.frontiere[data-mood="holo"] { --page-accent: var(--holo); --page-accent-hi: #d8f6ff; }
.frontiere[data-mood="europe"] { --page-accent: var(--europe); --page-accent-hi: var(--europe-hi); }
.frontiere[data-mood="praxic"] { --page-accent: var(--praxic); --page-accent-hi: var(--praxic-hi); }
.frontiere[data-mood="imperium"] { --page-accent: var(--imperium); --page-accent-hi: var(--imperium-hi); }
.frontiere[data-mood="nuit"] { --page-accent: #ff6b8a; --page-accent-hi: #ffd6e0; }
.frontiere .kicker, .frontiere .tag { transition: color .6s; }
.frontiere .kicker { color: var(--page-accent); }
.frontiere .sec-head .tag, .frontiere .quarter .tag, .frontiere .duo .tag, .frontiere .mission-step .tag { color: var(--page-accent); }
.frontiere .regions li::before { background: var(--page-accent); }
.frontiere .footer-crest, .frontiere .brand svg { color: var(--gold); }
/* un ciel étoilé, très discret, derrière toute la page */
.frontiere main {
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 141px 97px, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(1.5px 1.5px at 201px 187px, rgba(255, 240, 200, .5), transparent 60%),
    radial-gradient(1px 1px at 77px 213px, rgba(200, 225, 255, .45), transparent 60%),
    radial-gradient(1px 1px at 263px 23px, rgba(255, 255, 255, .35), transparent 60%),
    radial-gradient(ellipse 70% 14% at 82% 3%, rgba(255, 210, 58, .06), transparent 70%);
  background-size: 290px 260px, 290px 260px, 290px 260px, 290px 260px, 290px 260px, 100% 100%;
}
@media (min-width: 1021px) { .frontiere .nav-menu a { padding: 8px 6px; letter-spacing: .06em; font-size: .66rem; white-space: nowrap; } }
@media (min-width: 1021px) and (max-width: 1600px) { .frontiere .brand span { display: none; } }

/* ---------- Héros ---------- */
.frontiere .hero-status { display: grid; grid-template-columns: auto auto auto; column-gap: 18px; row-gap: 0; }
.frontiere .hero-status .status-label { grid-row: 1; }
.frontiere .hero-status .status-value { grid-row: 2; }
.frontiere .hero-content .actions { flex-wrap: wrap; }
.frontiere .hero-content .d-btn svg { width: 16px; height: 16px; }
.frontiere .hero-title { font-size: clamp(2.6rem, 7vw, 6.4rem); }
.frontiere .hero-title span:last-child { margin-top: .16em; font-size: .36em; font-weight: 900; letter-spacing: .32em; color: transparent; -webkit-text-stroke: 1.4px var(--sw); text-shadow: 0 0 24px rgba(255, 232, 31, .25); }
@supports not (-webkit-text-stroke: 1px red) { .frontiere .hero-title span:last-child { color: var(--sw); } }
body.is-lame [data-lame-hud] { color: var(--blade-glow); text-shadow: 0 0 10px var(--blade-glow); }
[data-credits] { font-variant-numeric: tabular-nums; }

/* ---------- Petits éléments ---------- */
.tr { display: block; margin-top: 6px; font-family: var(--font-ui); font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.quarter-body .tr, .sec-sub .tr, .duo-body .tr, .duo-note .tr, .mission-step .tr, .voice-body .tr { display: inline; margin: 0 0 0 6px; }
.words-note { margin: 14px 0 0; font-size: .76rem; font-style: italic; line-height: 1.55; color: var(--muted); }
.sub-title { margin: clamp(34px, 5vw, 54px) 0 16px; font-size: .8rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--page-accent-hi); }
.frontiere .atlas-photo > a { position: absolute; inset: 0; }
.frontiere .quarter-photo > a { display: block; height: 100%; }
.frontiere .quarter-photo > a > img { width: 100%; height: 100%; object-fit: cover; }
.frontiere .quarter { transition: box-shadow .4s, border-color .4s; }
.frontiere .quarter:hover { border-color: color-mix(in srgb, var(--page-accent) 55%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--page-accent) 14%, transparent); }
.frontiere .words-note + .duo, .frontiere .duo + .duo, .frontiere .duo + .saber-lab, .frontiere .saber-lab + .powers, .frontiere .powers + .game,
.frontiere .duo + .game, .frontiere .game + .bazaar, .frontiere .syndicates + .pledge-status, .frontiere .spider-kit + .duo, .frontiere .duo + .sub-title,
.frontiere .forces + .holo, .frontiere .sketches + .case, .frontiere .duo + .blueprints, .frontiere .blueprints + .game, .frontiere .game + .sketches,
.frontiere .arsenal + .homages, .frontiere .duo + .sketches { margin-top: clamp(30px, 4vw, 44px); }

/* ---------- Deux colonnes : une image et son texte ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); background: var(--panel-solid); border: 1px solid var(--line); }
.duo--flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.duo--flip .duo-photo { order: 2; }
.duo-photo { position: relative; min-height: 380px; margin: 0; overflow: hidden; }
.duo-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.duo .duo-photo > a { position: absolute; inset: 0; display: block; }
.duo-photo figcaption { position: absolute; left: 0; bottom: 0; padding: 6px 12px; background: rgba(6, 10, 22, .82); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.duo-body { padding: clamp(22px, 3vw, 36px); }
.duo-body h3 { margin: 4px 0 14px; font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--pearl); }
.duo-body > p:not(.tag) { margin: 0 0 14px; font-size: .95rem; line-height: 1.65; color: var(--muted); }
.duo-note { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--muted); }
.duo-actions { margin: 18px 0 0 !important; }
.duo-actions .d-btn svg { width: 16px; height: 16px; }
.frontiere .d-btn:disabled { opacity: .5; cursor: default; }
.lore-lines { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.lore-lines li { padding-left: 12px; border-left: 2px solid var(--page-accent); }
.lore-lines q { quotes: '« ' ' »'; font-family: var(--font-lore); font-style: italic; font-size: 1.1rem; line-height: 1.4; color: #eef0f6; }
.lore-lines small { display: block; margin-top: 2px; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--page-accent-hi); }

/* ---------- Esquisses ---------- */
.sketches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sketches--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sketch { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); }
.sketch > a { display: block; height: 100%; }
.sketch img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.sketch:hover img { transform: scale(1.04); }
.sketch figcaption { position: absolute; left: 0; bottom: 0; padding: 4px 10px; background: rgba(6, 10, 22, .85); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Cartes à image (pouvoirs) ---------- */
.powers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(30px, 4vw, 44px) 0 0; padding: 0; list-style: none; }
.power { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel-solid); }
.power figure { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.power figure > a { display: block; height: 100%; }
.power figure img { width: 100%; height: 100%; object-fit: cover; }
.power > div { position: relative; padding: 16px 18px 18px; }
.power-icon { position: absolute; top: -22px; right: 16px; border: 1px solid rgba(255, 255, 255, .3); background: #10131c; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.power h3 { margin: 4px 0 8px; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.power p:not(.tag) { margin: 0; font-size: .86rem; line-height: 1.58; color: var(--muted); }
.frontiere .game { border-color: color-mix(in srgb, var(--page-accent) 30%, var(--line)); box-shadow: 0 0 40px color-mix(in srgb, var(--page-accent) 7%, transparent); }
.game-foot { margin: 10px 0 0; font-size: .72rem; font-style: italic; color: var(--muted); }
.game > .game-foot { margin: -8px 0 0; padding: 0 24px 18px; }

/* ---------- Le périple ---------- */
.mission-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mission-step { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel-solid); transition: border-color .3s, box-shadow .3s; }
.mission-step:hover { border-color: color-mix(in srgb, var(--page-accent) 60%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--page-accent) 16%, transparent); }
.mission-step figure { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.mission-step figure > a { display: block; height: 100%; }
.mission-step figure img { width: 100%; height: 100%; object-fit: cover; }
.mission-step > div { padding: 14px 16px 18px; }
.mission-step h3 { margin: 4px 0 8px; font-size: 1.02rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--pearl); }
.mission-step p:not(.tag) { margin: 0; font-size: .86rem; line-height: 1.58; color: var(--muted); }
.mission-step--alert { border-color: rgba(255, 74, 74, .45); background: linear-gradient(180deg, rgba(60, 8, 12, .55), var(--panel-solid) 60%); }
.mission-step--alert .tag { color: #ff8a8a !important; }
.side-quests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.side-quests li { padding: 8px 0 8px 14px; border-left: 2px solid color-mix(in srgb, var(--page-accent) 55%, transparent); font-size: .84rem; line-height: 1.55; color: var(--muted); }
.side-quests b { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pearl); }

/* ---------- La cantina ---------- */
.cantina-sec { background: radial-gradient(ellipse 60% 26% at 70% 8%, rgba(160, 90, 255, .08), transparent 70%), radial-gradient(ellipse 50% 22% at 10% 60%, rgba(255, 179, 71, .06), transparent 70%); }
.cantina-duo .duo-photo { min-height: 460px; }
.eaves { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; margin: 4px 0 16px; }
.eaves-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.eaves-list button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); color: var(--muted); font: inherit; font-size: .76rem; text-align: left; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.eaves-list button::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 179, 71, .35); }
.eaves-list button:hover, .eaves-list button:focus-visible { border-color: rgba(255, 179, 71, .6); color: var(--pearl); }
.eaves-list button[aria-pressed="true"] { border-color: var(--cantina); background: rgba(255, 179, 71, .1); color: #fff; }
.eaves-list button.is-heard::before { background: var(--cantina); box-shadow: 0 0 8px var(--cantina); }
.eaves-panel { position: relative; min-height: 160px; padding: 14px 16px; border: 1px solid rgba(255, 179, 71, .35); background: linear-gradient(180deg, rgba(40, 24, 8, .7), rgba(10, 8, 14, .9)); }
.eaves-panel .who { display: block; margin: 0 0 2px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cantina); }
.eaves-panel .where { display: block; margin: 0 0 10px; font-size: .66rem; letter-spacing: .06em; color: var(--faint); }
.eaves-panel q { quotes: none; display: block; font-family: var(--font-lore); font-style: italic; font-size: 1.12rem; line-height: 1.42; color: #fff3e0; animation: memory-in .7s var(--ease) both; }
.eaves-panel small { display: block; margin-top: 8px; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.eaves-panel.is-secret q { color: #c9b3ff; letter-spacing: .04em; }
.eaves-empty { margin: 0; font-size: .86rem; color: var(--faint); }
@keyframes memory-in { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }

.jukebox { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; padding: 12px 14px; border: 1px solid rgba(255, 179, 71, .3); background: rgba(255, 179, 71, .04); }
.jukebox-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--cantina); background: transparent; color: var(--cantina); font: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.jukebox-btn svg { width: 18px; height: 18px; }
.jukebox-btn[aria-pressed="true"] { background: var(--cantina); color: #1a1006; }
.jukebox-eq { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.jukebox-eq i { flex: 1; height: 15%; background: linear-gradient(0deg, var(--cantina), #ff6fb0); opacity: .35; transition: height .08s linear; }
.jukebox.is-playing .jukebox-eq i { opacity: 1; }
/* un fichier du visiteur ne se laisse pas analyser depuis le disque : l'égaliseur danse tout seul */
.jukebox.is-file .jukebox-eq i { animation: eq-dance .42s ease-in-out infinite alternate; }
.jukebox.is-file .jukebox-eq i:nth-child(2n) { animation-duration: .31s; }
.jukebox.is-file .jukebox-eq i:nth-child(3n) { animation-duration: .55s; animation-delay: -.2s; }
.jukebox.is-file .jukebox-eq i:nth-child(5n) { animation-duration: .38s; animation-delay: -.1s; }
@keyframes eq-dance { from { height: 18%; } to { height: 95%; } }
.jukebox-note { grid-column: 1 / -1; margin: 0; font-size: .68rem; font-style: italic; color: var(--faint); }

/* La porte sans inscription */
.door { margin-top: 6px; padding: 16px; border: 1px solid rgba(255, 255, 255, .12); background: repeating-linear-gradient(90deg, #17140f 0 46px, #1b1812 46px 92px); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .4); }
.door-sign { display: inline-block; margin: 0 0 12px; padding: 3px 10px; border: 1px dashed rgba(255, 255, 255, .25); font-family: var(--font-mono, monospace); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.door-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.door-form label { width: 100%; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.door-form input { flex: 1; min-width: 180px; padding: 9px 12px; border: 1px solid rgba(255, 179, 71, .4); background: #0b0a08; color: #fff3e0; font: inherit; font-family: var(--font-mono, monospace); font-size: .86rem; }
.door-form input:focus { outline: 2px solid var(--cantina); outline-offset: 1px; }
.door-status { margin: 10px 0 0; font-size: .82rem; line-height: 1.55; color: var(--muted); }
.door-status.is-ok { color: #ffe4bd; }
.door-status.is-no { color: #ffb3b3; }
.door #dropbox { margin-top: 10px; }
.door #dropbox[hidden] { display: none; }
.door.is-open { border-color: rgba(255, 179, 71, .6); }

/* ---------- Les syndicats ---------- */
.syndicates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.syndicate { --c: var(--gold); display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line); border-top: 3px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, transparent), var(--panel-solid) 40%); transition: box-shadow .4s, border-color .4s; }
.syndicate--piques { --c: var(--piques); }
.syndicate--totalite { --c: var(--totalite); }
.syndicate--reforme { --c: var(--reforme); }
.syndicate.is-pledged { border-color: var(--c); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 25%, transparent); }
.syndicate-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; }
.syndicate-crest { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 60%, transparent)); }
.syndicate h3 { margin: 2px 0 2px; font-size: 1.2rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.syndicate .tag { color: var(--c) !important; }
.syndicate-boss { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.syndicate-text { margin: 0; font-family: var(--font-lore); font-style: italic; font-size: 1.02rem; line-height: 1.45; color: #e8e8ee; }
.syndicate-qm { margin: 0; border: 1px solid var(--line); background: #0a0c12; }
.syndicate-qm img { display: block; width: 100%; aspect-ratio: 525 / 150; object-fit: cover; }
.syndicate-qm figcaption { padding: 8px 10px; font-size: .78rem; line-height: 1.5; color: var(--muted); }
.syndicate-qm b { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pearl); }
.abilities { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.abilities li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.abilities img { border: 1px solid rgba(255, 255, 255, .2); }
.abilities b { display: block; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pearl); }
.abilities--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.syndicate-shop { margin: 0; font-size: .8rem; color: var(--muted); }
.syndicate-shop b { color: var(--pearl); }
.syndicate-pledge { margin-top: auto; align-self: flex-start; border-color: var(--c) !important; color: var(--c) !important; }
.syndicate.is-pledged .syndicate-pledge { background: var(--c); color: #120b0a !important; }
.pledge-status { margin: 14px 0 0; font-size: .86rem; font-style: italic; color: var(--muted); }
.spider-kit { padding: 18px; border: 1px solid rgba(255, 210, 58, .25); background: radial-gradient(circle at 0% 0%, rgba(255, 210, 58, .07), transparent 50%), var(--panel-solid); margin-top: clamp(30px, 4vw, 44px); }
.spider-kit-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.spider-kit-head img { width: 56px; height: 56px; object-fit: contain; }
.spider-kit h3 { margin: 2px 0 6px; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.spider-kit-head p:not(.tag) { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--muted); }

/* ---------- La Lame praxique ---------- */
.lame-sec { background: radial-gradient(ellipse 60% 24% at 30% 4%, rgba(111, 208, 255, .08), transparent 70%), radial-gradient(ellipse 50% 22% at 90% 60%, rgba(111, 208, 255, .05), transparent 70%); }
.saber-lab { margin-top: clamp(30px, 4vw, 44px); border: 1px solid rgba(111, 208, 255, .3); background: radial-gradient(ellipse 80% 60% at 50% 30%, color-mix(in srgb, var(--blade-glow) 10%, transparent), transparent 70%), #05070d; }
.saber-head { padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 28px) 0; }
.saber-head h3 { margin: 4px 0 8px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.saber-head p:not(.tag) { max-width: 820px; margin: 0; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.saber-stage { position: relative; display: grid; justify-items: center; gap: 18px; padding: 34px 16px 22px; overflow: hidden; }
.saber { position: relative; display: flex; align-items: center; width: min(100%, 820px); height: 44px; }
.saber-hilt { flex: none; width: 220px; height: 40px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.saber-blade { position: relative; flex: 1; height: 12px; margin-left: -3px; border-radius: 0 9px 9px 0; background: var(--blade-core);
  box-shadow: 0 0 4px 1px var(--blade-glow), 0 0 16px 5px var(--blade-glow), 0 0 46px 12px color-mix(in srgb, var(--blade-glow2) 55%, transparent);
  transform: scaleX(0); transform-origin: left center; transition: transform .32s cubic-bezier(.2, .9, .2, 1); }
.saber.is-on .saber-blade { transform: scaleX(1); animation: blade-hum .08s steps(2) infinite; }
.saber.is-swing .saber-blade { filter: brightness(1.35); }
@keyframes blade-hum { 50% { opacity: .93; } }
.saber[data-crystal="degrade"] .saber-blade { background: linear-gradient(90deg, #fff, #fff); box-shadow: 0 0 4px 1px var(--blade-glow), -40px 0 18px 5px var(--blade-glow), 40px 0 18px 5px var(--blade-glow2), 0 0 46px 12px color-mix(in srgb, var(--blade-glow2) 50%, transparent); }
.saber[data-crystal="degrade"] .saber-blade::after { content: ''; position: absolute; inset: -6px -4px; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--blade-glow) 70%, transparent), color-mix(in srgb, var(--blade-glow2) 70%, transparent)); filter: blur(8px); z-index: -1; }
.saber[data-crystal="corrompu"] .saber-blade { background: #fff; box-shadow: 0 0 0 2px #050507, 0 0 12px 6px rgba(0, 0, 0, .9), 0 0 30px 10px rgba(220, 230, 255, .35); }
.saber[data-crystal="vex"] .saber-blade { background: repeating-linear-gradient(90deg, #ffe9e2 0 14px, #ffb2a0 14px 18px); }
.saber[data-crystal="esprit"] .saber-blade { background: linear-gradient(90deg, #fff4dc, #ffd28a 70%, #fff4dc); box-shadow: 0 0 4px 1px #ff9d2a, 0 0 16px 5px #ff7a1e, 0 0 46px 12px rgba(255, 60, 40, .45); }
.saber[data-crystal="prisme"] .saber-blade { animation: blade-hum .08s steps(2) infinite, prism 2.4s linear infinite; }
@keyframes prism { to { filter: hue-rotate(360deg); } }
.saber-ignite { min-width: 140px; }
.saber-controls { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr); gap: 18px; padding: 0 clamp(18px, 3vw, 28px) 14px; }
.saber-label { margin: 0 0 8px; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--praxic-hi); }
.saber-label span { color: var(--faint); font-weight: 600; }
.saber-crystals, .saber-hilts, .saber-forms { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.saber-crystals button { position: relative; display: block; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .15); background: #0d1018; cursor: pointer; overflow: hidden; }
.saber-crystals button img { width: 100%; height: 100%; object-fit: cover; }
.saber-crystals button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--blade-glow), 0 0 14px var(--blade-glow); }
.saber-crystals button.is-locked { cursor: help; }
.saber-crystals button.is-locked img { filter: grayscale(1) brightness(.35); }
.saber-crystals button.is-locked::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; color: rgba(255, 255, 255, .5); }
.saber-crystals button.is-new { animation: crystal-new 1.2s ease 3; }
@keyframes crystal-new { 50% { box-shadow: 0 0 0 3px #fff, 0 0 20px #fff; } }
.saber-hilts button, .saber-forms button { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid rgba(255, 255, 255, .15); background: #0d1018; color: var(--muted); font: inherit; font-size: .72rem; cursor: pointer; }
.saber-hilts img, .saber-forms img { width: 30px; height: 30px; object-fit: cover; }
.saber-hilts button[aria-pressed="true"], .saber-forms button[aria-pressed="true"] { border-color: var(--praxic); color: #fff; background: rgba(111, 208, 255, .1); }
.saber-form-text { margin: 10px 0 0; font-size: .8rem; line-height: 1.55; color: var(--muted); }
.saber-form-text b { color: var(--praxic-hi); }
.saber-lab > .game-foot { padding: 0 clamp(18px, 3vw, 28px) 18px; margin: 0; }

/* ---------- L'Imperium ---------- */
.imperium-sec { background: radial-gradient(ellipse 60% 24% at 70% 4%, rgba(255, 74, 74, .07), transparent 70%), linear-gradient(180deg, transparent, rgba(30, 6, 8, .35) 40%, transparent); }
.forces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.force { border: 1px solid var(--line); background: var(--panel-solid); }
.force figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.force figure > a { display: block; height: 100%; }
.force img { width: 100%; height: 100%; object-fit: cover; }
.force p { margin: 0; padding: 10px 12px 12px; font-size: .78rem; line-height: 1.45; color: var(--muted); }
.force b { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pearl); }

/* Le projecteur holographique */
.holo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); margin-top: clamp(30px, 4vw, 44px); border: 1px solid rgba(95, 214, 255, .35); background: #03070d; }
.holo-projector { position: relative; min-height: 340px; overflow: hidden; background: radial-gradient(ellipse 60% 20% at 50% 100%, rgba(95, 214, 255, .25), transparent 70%), #02050a; }
.holo-beam { position: absolute; left: 50%; bottom: 0; width: 80%; height: 92%; transform: translateX(-50%); clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); background: linear-gradient(0deg, rgba(95, 214, 255, .28), rgba(95, 214, 255, .02)); }
.holo-screen { position: absolute; inset: 8% 8% 22%; padding: 14px 16px; overflow: auto; color: #aaf0ff; text-shadow: 0 0 8px rgba(95, 214, 255, .7); font-family: var(--font-mono, monospace);
  background: repeating-linear-gradient(0deg, rgba(95, 214, 255, .07) 0 1px, transparent 1px 3px); animation: holo-flicker 4s steps(1) infinite; scrollbar-width: thin; }
.holo-head { margin: 0 0 10px; font-size: .62rem; letter-spacing: .16em; color: #6fdcff; }
.holo-text { margin: 0; font-size: .88rem; line-height: 1.55; white-space: pre-wrap; }
@keyframes holo-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .82; } 48% { opacity: 1; } 71% { opacity: .9; transform: translateX(1px); } 72% { transform: none; } }
.holo-body { padding: clamp(18px, 3vw, 28px); }
.holo-body h3 { margin: 4px 0 10px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.holo-body > p:not(.tag):not(.holo-actions) { margin: 0 0 14px; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.holo-body .tag { color: var(--holo) !important; }
.holo-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.holo-list button { width: 100%; padding: 8px 0; border: 1px solid rgba(95, 214, 255, .25); background: transparent; color: var(--faint); font: inherit; font-family: var(--font-mono, monospace); font-size: .78rem; cursor: pointer; }
.holo-list button.is-read { border-color: var(--holo); color: #dff8ff; background: rgba(95, 214, 255, .08); }
.holo-list button[aria-pressed="true"] { box-shadow: 0 0 12px rgba(95, 214, 255, .5); color: #fff; }
.holo-list button:disabled { opacity: .35; cursor: default; }
.holo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0; }
.holo-count { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.holo-count b { color: #dff8ff; font-variant-numeric: tabular-nums; }

/* L'enquête sur Bael */
.case { margin-top: clamp(30px, 4vw, 44px); border: 1px solid rgba(255, 74, 74, .35); background: linear-gradient(135deg, rgba(60, 8, 10, .5), transparent 60%), #0a0608; }
.case-body { padding: clamp(18px, 3vw, 28px); }
.case-body h3 { margin: 4px 0 14px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.case-clues { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.case-clues li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 10px 14px; border-left: 3px solid rgba(255, 74, 74, .6); background: rgba(255, 255, 255, .02); }
.case-q { font-family: var(--font-lore); font-style: italic; font-size: 1.1rem; line-height: 1.4; color: #f3e6e6; }
.case-clues small { grid-column: 1; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--imperium-hi); }
.case-clues .spot--inline { grid-row: 1 / span 2; grid-column: 2; width: 34px; height: 34px; }
.case-verdict { margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(255, 74, 74, .5); background: rgba(255, 74, 74, .06); animation: memory-in 1s var(--ease) both; }
.case-verdict p:not(.tag) { margin: 0; font-size: .95rem; line-height: 1.65; color: #f3e6e6; }

/* ---------- Nuit noire ---------- */
.nuit-sec { background: radial-gradient(ellipse 60% 26% at 50% 4%, rgba(255, 107, 138, .07), transparent 70%), linear-gradient(180deg, transparent, rgba(4, 6, 16, .6) 40%, transparent); }
.blueprints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.blueprint { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(120, 190, 255, .35); background: #06244a; }
.blueprint > a { display: block; height: 100%; }
.blueprint img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(1.1); mix-blend-mode: screen; opacity: .85; transition: filter .5s, opacity .5s; }
.blueprint:hover img { filter: none; mix-blend-mode: normal; opacity: 1; }
.blueprint::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(150, 210, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 210, 255, .14) 1px, transparent 1px); background-size: 24px 24px; }
.blueprint figcaption { position: absolute; left: 0; top: 0; z-index: 1; padding: 4px 10px; background: rgba(4, 20, 44, .9); font-family: var(--font-mono, monospace); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #bfe2ff; }
.blueprint .spot { z-index: 2; }

/* ---------- L'arsenal ---------- */
.arsenal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.arm { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel-solid); }
.arm.exotic { border-color: rgba(255, 210, 58, .35); }
.arm figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #2a2b33; }
.arm figure > a { display: block; height: 100%; }
.arm figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); transition: transform .5s var(--ease); }
.arm:hover figure img { transform: scale(1.35); }
.arm-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.arm .item-head { display: flex; align-items: center; gap: 10px; }
.arm .item-head img { flex: none; border: 1px solid rgba(255, 255, 255, .2); }
.arm .item-name { margin: 0; font-size: .86rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.arm .item-type { margin: 0; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.arm.exotic .item-type { color: var(--gold); }
.arm-flavor { margin: 0; font-family: var(--font-lore); font-style: italic; font-size: .98rem; line-height: 1.4; color: #e8e8ee; }
.arm-ref { margin: 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .78rem; line-height: 1.5; color: var(--muted); }
.arm-ref b { color: var(--sw); }
.homages { padding: clamp(18px, 3vw, 28px); border: 1px solid rgba(255, 232, 31, .3); background: radial-gradient(circle at 100% 0%, rgba(255, 232, 31, .06), transparent 50%), #07070b; }
.homages h3 { margin: 4px 0 14px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--sw); }
.homage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 26px; margin: 0; padding: 0; list-style: none; }
.homage-list li { padding: 6px 0 6px 14px; border-left: 2px solid rgba(255, 232, 31, .45); font-size: .84rem; line-height: 1.55; color: var(--muted); }
.homage-list b { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pearl); }

/* ---------- Personnages, secrets, légendes ---------- */
.voices--eight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.secrets-sec { background: radial-gradient(ellipse 60% 45% at 30% 30%, color-mix(in srgb, var(--page-accent) 6%, transparent), transparent 70%); }
.frontiere .secrets-layout .games { gap: 24px; }
.collect-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.collect-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); background: var(--panel-solid); }
.collect-card img { border: 1px solid rgba(255, 255, 255, .2); }
.collect-card h3 { margin: 2px 0 6px; font-size: 1rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.collect-card p:not(.tag) { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.lore-books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.lore-card { border: 1px solid var(--line); background: var(--panel-solid); }
.lore-card--wide { grid-column: span 2; border-color: rgba(255, 74, 74, .3); }
.lore-card .item-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(90deg, rgba(95, 214, 255, .12), transparent); }
.lore-card .item-head img { flex: none; border: 1px solid rgba(255, 255, 255, .2); }
.lore-card .item-name { margin: 0; font-size: .92rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.lore-card .item-type { margin: 2px 0 0; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lore-flavor { margin: 0; padding: 12px 16px 0; font-family: var(--font-lore); font-style: italic; font-size: 1.06rem; line-height: 1.42; color: #eef0f6; }
.lore-card details { padding: 10px 16px 6px; }
.lore-card details:last-child { padding-bottom: 16px; }
.lore-card summary { cursor: pointer; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--page-accent-hi); }
.lore-card details[open] summary { margin-bottom: 10px; }
.lore-card details p { margin: 0 0 10px; font-family: var(--font-lore); font-size: 1.04rem; line-height: 1.5; color: #e4e6ee; }
.frontiere .event-img > a { display: block; height: 100%; }

/* ---------- Plan : la table holographique (brique commune : css/components/depths.css) ---------- */
.frontiere .depths { aspect-ratio: 10 / 11; background: radial-gradient(circle at 50% 50%, rgba(95, 214, 255, .08), transparent 60%), #030a12; }
.frontiere .depths::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(95, 214, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 214, 255, .07) 1px, transparent 1px); background-size: 5% 4.545%; }
.stratum--orbite { background: linear-gradient(180deg, rgba(40, 10, 20, .55), rgba(20, 8, 16, .35)); }
.stratum--mars { background: linear-gradient(180deg, rgba(70, 30, 12, .45), rgba(50, 22, 10, .35)); }
.stratum--europe { background: linear-gradient(180deg, rgba(16, 40, 64, .45), rgba(10, 30, 50, .35)); }
.stratum--venus { background: linear-gradient(180deg, rgba(14, 46, 26, .45), rgba(10, 34, 20, .35)); }
.holo-ring { fill: none; stroke: rgba(95, 214, 255, .18); stroke-width: .25; stroke-dasharray: 1 1.4; }
.holo-ring--in { stroke: rgba(95, 214, 255, .12); }
.holo-axis { stroke: rgba(95, 214, 255, .1); stroke-width: .2; }
.way-line { stroke: rgba(160, 230, 255, .32); }
.way-line--navette { stroke: rgba(255, 210, 58, .55); stroke-dasharray: 3 3; }
.room-node--zone { color: #fff3cf; }
.room-node--tharsis { color: var(--cantina); }
.room-node--mars { color: var(--mars); }
.room-node--europe { color: var(--europe); }
.room-node--venus { color: var(--venus); }
.room-node--imperium { color: var(--imperium); }
.frontiere .room-label { text-shadow: 0 1px 6px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9); }
.frontiere .depths-count b { color: #d8f6ff; }

/* ---------- Pastilles ---------- */
.spot[data-secret="spectres"] { color: #e8f4ff; border-color: rgba(200, 225, 255, .95); }
.spot[data-secret="marchandises"] { color: #fff1d6; border-color: rgba(255, 179, 71, .95); }
.spot[data-secret="enregistrements"] { color: #e9fbff; border-color: rgba(95, 214, 255, .95); }
.spot[data-secret="bael"] { color: #ffe0e0; border-color: rgba(255, 74, 74, .95); }
.frontiere .spot.found { background: var(--pearl); border-color: var(--pearl); color: var(--night); }
.frontiere p > .spot--inline, .frontiere li > .spot--inline { width: 26px; height: 26px; margin: 0 0 0 6px; vertical-align: -7px; }
.frontiere .spot--inline svg { width: 14px; height: 14px; }
/* Les cristaux : seulement à la lueur de la Lame */
.spot--crystal { display: none; color: #fff; border-color: var(--blade-glow); background: rgba(6, 10, 22, .7); animation: crystal-pulse 1.4s ease-in-out infinite; }
body.is-lame .spot--crystal, .spot--crystal.found { display: grid; }
@keyframes crystal-pulse { 50% { box-shadow: 0 0 24px var(--blade-glow); } }

/* ---------- La Lame allumée dans la page ---------- */
.lame-veil { position: fixed; inset: 0; z-index: 44; pointer-events: none; opacity: 0; transition: opacity 1s ease;
  background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 50%, color-mix(in srgb, var(--blade-glow) 30%, transparent) 100%); mix-blend-mode: screen; }
body.is-lame .lame-veil { opacity: 1; }
.saber-cursor { position: fixed; left: 0; top: 0; z-index: 70; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.saber-cursor i { position: absolute; left: -3px; top: -96px; width: 6px; height: 92px; border-radius: 4px 4px 2px 2px; background: var(--blade-core); box-shadow: 0 0 4px 1px var(--blade-glow), 0 0 14px 4px var(--blade-glow); }
.saber-cursor i::after { content: ''; position: absolute; left: -3px; top: 92px; width: 12px; height: 26px; border-radius: 2px; background: linear-gradient(90deg, #6a6a70, #c8c8cc 40%, #55555b); }
body.is-lame .saber-cursor { opacity: 1; }
@media (hover: none) { .saber-cursor { display: none; } }
.lame-badge { position: fixed; left: 50%; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; transform: translateX(-50%); border: 1px solid var(--blade-glow); background: rgba(6, 10, 22, .92); box-shadow: 0 0 24px color-mix(in srgb, var(--blade-glow) 50%, transparent); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.lame-badge svg { width: 16px; height: 16px; color: var(--blade-glow); }
.lame-badge b { min-width: 3.2em; font-variant-numeric: tabular-nums; }
.lame-badge[hidden] { display: none; }

/* ---------- Le générique d'ouverture ---------- */
.crawl { position: fixed; inset: 0; z-index: 200; overflow: hidden; background: #000; color: var(--sw); }
.crawl[hidden] { display: none; }
.crawl-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.crawl-intro { position: absolute; top: 44%; left: 50%; width: min(88vw, 620px); margin: 0; transform: translate(-50%, -50%); color: #4bd5ee; font-size: clamp(1.1rem, 2.6vw, 1.7rem); line-height: 1.45; opacity: 0; }
.crawl.is-intro .crawl-intro { animation: crawl-intro 5s ease forwards; }
@keyframes crawl-intro { 0% { opacity: 0; } 14% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.crawl-logo { position: absolute; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%) scale(2.6); opacity: 0; white-space: nowrap; font-family: var(--font-ui); font-weight: 900; font-size: clamp(2.6rem, 13vw, 10rem); line-height: 1; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 3px var(--sw); }
@supports not (-webkit-text-stroke: 1px red) { .crawl-logo { color: var(--sw); } }
.crawl.is-logo .crawl-logo { animation: crawl-logo 8s cubic-bezier(.3, 0, .6, 1) forwards; }
@keyframes crawl-logo { 0% { opacity: 1; transform: translate(-50%, -50%) scale(2.6); } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.04); } }
.crawl-view { position: absolute; left: 50%; top: 0; bottom: 0; width: min(94vw, 820px); transform: translateX(-50%); perspective: 360px; perspective-origin: 50% 30%; overflow: hidden;
  -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent 100%); mask-image: linear-gradient(0deg, #000 55%, transparent 100%); }
.crawl-text { position: absolute; left: 0; right: 0; top: 100%; transform-origin: 50% 0; transform: rotateX(26deg); font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.15rem, 3.3vw, 2.3rem); line-height: 1.42; text-align: justify; hyphens: auto; opacity: 0; }
.crawl-text p { margin: 0 0 1.1em; }
.crawl-episode, .crawl-title { text-align: center; }
.crawl-episode { margin-bottom: .2em !important; font-size: .8em; letter-spacing: .1em; }
.crawl-title { font-size: 1.5em; font-weight: 900; letter-spacing: .14em; }
.crawl.is-crawl .crawl-text { opacity: 1; animation: crawl-roll var(--roll, 70s) linear forwards; }
@keyframes crawl-roll { from { transform: rotateX(26deg) translateY(0); } to { transform: rotateX(26deg) translateY(-210%); } }
.crawl-skip { position: absolute; right: 18px; bottom: 18px; z-index: 2; padding: 8px 14px; border: 1px solid rgba(255, 232, 31, .45); background: rgba(0, 0, 0, .6); color: var(--sw); font: inherit; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.crawl-skip kbd { margin-left: 6px; padding: 1px 5px; border: 1px solid rgba(255, 232, 31, .4); font: inherit; font-size: .6rem; }
.crawl-skip:hover, .crawl-skip:focus-visible { background: var(--sw); color: #000; }
/* sans animation : le texte à plat, au milieu */
.crawl.is-static .crawl-view { perspective: none; -webkit-mask-image: none; mask-image: none; overflow: auto; display: grid; align-content: center; padding: 60px 0; }
.crawl.is-static .crawl-text { position: static; transform: none; opacity: 1; font-size: clamp(1rem, 2.2vw, 1.4rem); }
.crawl.is-static .crawl-intro, .crawl.is-static .crawl-logo { display: none; }

/* Le saut en hyperespace, à l'arrivée */
.hyperspace { position: fixed; inset: 0; z-index: 195; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.hyperspace.is-on { opacity: 1; }

@media (max-width: 1200px) {
  .voices--eight { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arsenal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .syndicates { grid-template-columns: minmax(0, 1fr); }
  .syndicate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .syndicate-head, .syndicate-text, .syndicate-pledge { grid-column: 1; }
  .syndicate-qm, .abilities, .syndicate-shop { grid-column: 2; }
  .syndicate-qm { grid-row: 1 / span 2; }
  .saber-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .saber-controls .saber-group:first-child { grid-column: 1 / -1; }
}
@media (max-width: 1020px) {
  .duo, .duo--flip, .holo, .eaves { grid-template-columns: minmax(0, 1fr); }
  .duo--flip .duo-photo { order: 0; }
  .duo-photo, .cantina-duo .duo-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .lore-books, .powers, .abilities--row { grid-template-columns: minmax(0, 1fr); }
  .lore-card--wide { grid-column: auto; }
  .sketches, .forces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blueprints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .holo-projector { min-height: 300px; }
  .syndicate { display: flex; }
}
@media (max-width: 680px) {
  .frontiere .depths { aspect-ratio: 10 / 16; }
  .mission-steps, .collect-cards, .side-quests, .sketches--three, .homage-list, .arsenal { grid-template-columns: minmax(0, 1fr); }
  .voices--eight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frontiere .hero-content { bottom: 170px; }
  .frontiere .hero-content .actions { gap: 10px; }
  .frontiere .hero-status { column-gap: 14px; }
  .saber-controls { grid-template-columns: minmax(0, 1fr); }
  .saber-hilt { width: 130px; height: 24px; }
  .saber-blade { height: 8px; }
  .holo-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .case-clues li { grid-template-columns: minmax(0, 1fr); }
  .case-clues .spot--inline { grid-row: auto; grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .spot--crystal, .saber.is-on .saber-blade, .holo-screen, .saber-crystals button.is-new, .jukebox.is-file .jukebox-eq i { animation: none; }
  .saber[data-crystal="prisme"] .saber-blade { animation: none; background: linear-gradient(90deg, #ff6ad5, #ffd23a, #6fffb0, #5fd6ff, #c86bff); }
}