/* Éternité — ton de la page : un plateau de jeu télévisé au bout du paravers. La glace bleue de la Vallée, l'or du
   Magot, le magenta des projecteurs, le bleu étoilé du Cheval Stellaire, le vert de Xûr, le violet des Neuf, et le
   vert de Marathon pour les 30 ans de Bungie.
   Ambiance par section (data-mood sur <body> : glace, paravers, plateau, magot, cheval, xur, neuf, bungie ;
   js/components/moods.js).
   Faveur du Cheval Stellaire (body.is-faveur) : voile d'étoiles, crânes visibles.
   Générique de l'émission (#opening), plan en plateau, races, finalistes, galerie, Cheval, Xûr, Neuf, clins d'œil,
   arsenal, légendes. Les mini-jeux sont dans css/games.css. */

.eternite {
  --gold: #ffcf5c;
  --gold-hi: #fff1c4;
  --ice: #a9d8ff;
  --ice-hi: #e6f4ff;
  --stage: #ff5fb8;
  --stage-hi: #ffd6ee;
  --vault: #8fa2ff;
  --finale: #ff8a4a;
  --nine: #b49bff;
  --nine-hi: #e8dfff;
  --horse: #6fb8ff;
  --horse-hi: #dcefff;
  --xur: #9fe7c8;
  --xur-hi: #e2fff2;
  --marathon: #8fe36a;
  --page-accent: var(--gold);
  --page-accent-hi: var(--gold-hi);
}
.eternite[data-mood="glace"] { --page-accent: var(--ice); --page-accent-hi: var(--ice-hi); }
.eternite[data-mood="paravers"] { --page-accent: #c7b0ff; --page-accent-hi: #efe8ff; }
.eternite[data-mood="plateau"] { --page-accent: var(--stage); --page-accent-hi: var(--stage-hi); }
.eternite[data-mood="magot"] { --page-accent: var(--gold); --page-accent-hi: var(--gold-hi); }
.eternite[data-mood="cheval"] { --page-accent: var(--horse); --page-accent-hi: var(--horse-hi); }
.eternite[data-mood="xur"] { --page-accent: var(--xur); --page-accent-hi: var(--xur-hi); }
.eternite[data-mood="neuf"] { --page-accent: var(--nine); --page-accent-hi: var(--nine-hi); }
.eternite[data-mood="bungie"] { --page-accent: var(--marathon); --page-accent-hi: #e2ffd3; }
.eternite .kicker, .eternite .tag { transition: color .6s; }
.eternite .kicker { color: var(--page-accent); }
.eternite .sec-head .tag, .eternite .quarter .tag, .eternite .duo .tag, .eternite .final .tag, .eternite .emissary .tag { color: var(--page-accent); }
.eternite .regions li::before { background: var(--page-accent); }
.eternite .footer-crest, .eternite .brand svg { color: var(--gold); }
/* un ciel étoilé et deux nébuleuses, très discrets, derrière toute la page */
.eternite main {
  background-image:
    radial-gradient(1px 1px at 31px 47px, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 157px 101px, rgba(220, 235, 255, .45), transparent 60%),
    radial-gradient(1.5px 1.5px at 219px 197px, rgba(255, 236, 190, .5), transparent 60%),
    radial-gradient(1px 1px at 83px 229px, rgba(200, 225, 255, .4), transparent 60%),
    radial-gradient(1px 1px at 271px 17px, rgba(255, 255, 255, .35), transparent 60%),
    radial-gradient(ellipse 60% 16% at 14% 4%, rgba(255, 95, 184, .05), transparent 70%),
    radial-gradient(ellipse 50% 14% at 88% 9%, rgba(111, 184, 255, .06), transparent 70%);
  background-size: 300px 270px, 300px 270px, 300px 270px, 300px 270px, 300px 270px, 100% 100%, 100% 100%;
}
@media (min-width: 1021px) { .eternite .nav-menu a { padding: 8px 6px; letter-spacing: .06em; font-size: .66rem; white-space: nowrap; } }
@media (min-width: 1021px) and (max-width: 1500px) { .eternite .brand span { display: none; } }

/* ---------- Héros ---------- */
.eternite .hero-status { display: grid; grid-template-columns: auto auto auto; column-gap: 18px; row-gap: 0; }
.eternite .hero-status .status-label { grid-row: 1; }
.eternite .hero-status .status-value { grid-row: 2; font-variant-numeric: tabular-nums; }
.eternite .hero-content .actions { flex-wrap: wrap; }
.eternite .hero-content .d-btn svg { width: 16px; height: 16px; }
.eternite .hero-title { font-size: clamp(2.6rem, 7vw, 6.4rem); }
.eternite .hero-title span:last-child { margin-top: .06em; padding-top: .14em; line-height: 1.25; font-size: .36em; font-weight: 900; letter-spacing: .3em;
  background: linear-gradient(90deg, var(--gold), #fff6d8 35%, var(--stage) 70%, var(--horse)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not (background-clip: text) { .eternite .hero-title span:last-child { color: var(--gold); } }
body.is-faveur [data-favor-hud] { color: var(--horse-hi); text-shadow: 0 0 10px var(--horse); }

/* ---------- 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); }
.duo-note .tr, .sec-sub .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); }
.eternite .sec-sub a, .eternite .duo-body a, .eternite .words-note a, .eternite .touched a { color: var(--page-accent-hi); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--page-accent) 60%, transparent); text-underline-offset: 3px; }
.eternite .atlas-photo > a { position: absolute; inset: 0; }
.eternite .quarter-photo > a { display: block; height: 100%; }
.eternite .quarter-photo > a > img { width: 100%; height: 100%; object-fit: cover; }
.eternite .quarter { transition: box-shadow .4s, border-color .4s; }
.eternite .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); }
.eternite .words-note + .duo, .eternite .duo + .duo, .eternite .duo + .sub-title, .eternite .duo + .gallery, .eternite .gallery + .game,
.eternite .game + .collect-cards, .eternite .horse + .gallery, .eternite .gallery + .collect-cards, .eternite .duo + .game, .eternite .voices + .words-note + .game,
.eternite .game + .sub-title, .eternite .emissaries + .duo, .eternite .duo + .gallery, .eternite .keyart + .duo, .eternite .races + .game, .eternite .words-note + .gallery,
.eternite .finals + .duo, .eternite .duo + .sub-title { margin-top: clamp(30px, 4vw, 44px); }
.eternite .nine-symbols + .words-note + .emissaries { margin-top: clamp(26px, 3.5vw, 40px); }
.eternite .event-img > a { display: block; height: 100%; }

/* ---------- 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); }
.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); }

/* ---------- Plan : un plateau de jeu (brique commune : css/components/depths.css) ---------- */
.eternite .depths { aspect-ratio: 10 / 11; background: radial-gradient(circle at 50% 50%, rgba(255, 207, 92, .08), transparent 62%), #07060f; }
.eternite .depths::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(0, 0, 0, .45) 100%), repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 207, 92, .035) 0 6deg, transparent 6deg 12deg); }
.stratum--magot { background: linear-gradient(180deg, rgba(70, 50, 14, .5), rgba(46, 32, 10, .35)); }
.stratum--vallee { background: linear-gradient(180deg, rgba(20, 44, 70, .5), rgba(14, 32, 54, .35)); }
.stratum--coffre { background: linear-gradient(180deg, rgba(28, 30, 70, .5), rgba(20, 22, 52, .35)); }
.stratum--finale { background: linear-gradient(180deg, rgba(70, 30, 18, .45), rgba(50, 20, 14, .35)); }
.stratum--audela { background: linear-gradient(180deg, rgba(40, 24, 70, .45), rgba(28, 16, 52, .35)); }
.stage-ring { fill: none; stroke: rgba(255, 207, 92, .2); stroke-width: .3; stroke-dasharray: .8 1.6; }
.stage-ring--in { stroke: rgba(255, 95, 184, .16); }
.stage-ring--core { stroke: rgba(111, 184, 255, .18); stroke-dasharray: none; }
.way-line { stroke: rgba(255, 230, 180, .32); }
.way-line--portail { stroke: rgba(180, 155, 255, .65); stroke-dasharray: 3 3; }
.room-node--zone { color: #fff1c4; }
.room-node--magot { color: var(--gold); }
.room-node--vallee { color: var(--ice); }
.room-node--coffre { color: var(--vault); }
.room-node--finale { color: var(--finale); }
.room-node--audela { color: var(--nine); }
.eternite .room-label { text-shadow: 0 1px 6px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9); }
.eternite .depths-count b { color: var(--gold-hi); }

/* ---------- Pastilles ---------- */
.spot[data-secret="pieces"] { color: #fff3d0; border-color: rgba(255, 207, 92, .95); }
.spot[data-secret="restes"] { color: #ffe9d2; border-color: rgba(255, 170, 110, .95); }
.spot[data-secret="cranes"] { display: none; color: #f6f1e4; border-color: #f6f1e4; background: rgba(10, 8, 20, .7); animation: skull-pulse 1.6s ease-in-out infinite; }
body.is-faveur .spot[data-secret="cranes"], .spot[data-secret="cranes"].found { display: grid; }
.spot[data-secret="cranes"].found { animation: none; }
@keyframes skull-pulse { 50% { box-shadow: 0 0 22px var(--horse); } }
.eternite .spot.found { background: var(--pearl); border-color: var(--pearl); color: var(--night); }
.gallery-item .spot, .duo-photo .spot, .place-photo .spot, .horse-figure .spot { z-index: 2; }

/* ---------- La Faveur du Cheval Stellaire dans la page ---------- */
.favor-veil { position: fixed; inset: 0; z-index: 44; pointer-events: none; opacity: 0; transition: opacity 1s ease; mix-blend-mode: screen;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 76% 12%, #dcefff, transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 72%, #fff6d8, transparent 60%), radial-gradient(1px 1px at 88% 64%, #fff, transparent 60%),
    radial-gradient(1px 1px at 22% 88%, #dcefff, transparent 60%), radial-gradient(1.5px 1.5px at 60% 36%, #fff, transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 52%, rgba(111, 184, 255, .26) 100%);
  background-size: 340px 300px, 340px 300px, 340px 300px, 340px 300px, 340px 300px, 340px 300px, 100% 100%;
  animation: favor-drift 14s linear infinite; }
body.is-faveur .favor-veil { opacity: 1; }
@keyframes favor-drift { to { background-position: 0 300px, 0 300px, 0 300px, 0 300px, 0 300px, 0 300px, 0 0; } }
.favor-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(--horse); background: rgba(6, 10, 22, .92); box-shadow: 0 0 24px rgba(111, 184, 255, .5); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.favor-badge svg { width: 18px; height: 18px; color: var(--horse); }
.favor-badge b { min-width: 3.2em; font-variant-numeric: tabular-nums; }
.favor-badge[hidden] { display: none; }

/* ---------- Le générique de l'émission ---------- */
.opening { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; overflow: hidden; text-align: center;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255, 95, 184, .22), transparent 70%), radial-gradient(ellipse 80% 60% at 50% 40%, #1a0f33, #05040a 75%); }
.opening[hidden] { display: none; }
.opening-lights { position: absolute; inset: 0; pointer-events: none; }
.opening-lights i { position: absolute; bottom: -10%; width: 34vw; height: 130vh; transform-origin: 50% 100%; opacity: .0; transition: opacity 1.2s;
  background: linear-gradient(0deg, rgba(255, 240, 210, .38), rgba(255, 240, 210, 0) 80%); clip-path: polygon(45% 100%, 55% 100%, 100% 0, 0 0); }
.opening-lights i:nth-child(1) { left: -6vw; --a: -24deg; --b: 8deg; }
.opening-lights i:nth-child(2) { left: 18vw; --a: -10deg; --b: 14deg; background: linear-gradient(0deg, rgba(255, 95, 184, .32), transparent 80%); }
.opening-lights i:nth-child(3) { right: 18vw; --a: 10deg; --b: -14deg; background: linear-gradient(0deg, rgba(111, 184, 255, .32), transparent 80%); }
.opening-lights i:nth-child(4) { right: -6vw; --a: 24deg; --b: -8deg; }
.opening.is-on .opening-lights i { opacity: 1; animation: light-sweep 5s ease-in-out infinite alternate; }
.opening.is-on .opening-lights i:nth-child(2n) { animation-duration: 6.4s; }
@keyframes light-sweep { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }
.opening-kicker { position: relative; margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--stage); opacity: 0; }
.opening-title { position: relative; margin: 0; font-size: clamp(2.4rem, 8vw, 6.6rem); font-weight: 900; letter-spacing: .04em; line-height: 1; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 0 30px rgba(255, 207, 92, .55), 0 6px 0 #5a3a08; }
.opening-title span { display: inline-block; white-space: pre; opacity: 0; transform: translateY(.4em) scale(.6); }
.opening-sub { position: relative; margin: 0; font-family: var(--font-lore); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--horse-hi); opacity: 0; }
.opening-line { position: relative; max-width: 760px; min-height: 3.2em; margin: 18px 0 0; font-family: var(--font-lore); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.45rem); line-height: 1.4; color: #f4f0ff; }
.opening-line.is-new { animation: line-in .6s ease both; }
@keyframes line-in { from { opacity: 0; transform: translateY(8px); } }
.opening.is-on .opening-kicker { animation: fade-in .8s .2s ease both; }
.opening.is-on .opening-title span { animation: letter-pop .5s calc(.5s + var(--i) * 55ms) cubic-bezier(.2, 1.6, .4, 1) both; }
.opening.is-on .opening-sub { animation: fade-in .8s 1.6s ease both; }
@keyframes fade-in { to { opacity: 1; } }
@keyframes letter-pop { to { opacity: 1; transform: none; } }
.opening-skip { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .5); color: #fff; font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.opening-skip kbd { padding: 1px 6px; border: 1px solid rgba(255, 255, 255, .4); font: inherit; font-size: .62rem; }
body.is-opening { overflow: hidden; }

/* ---------- Les Défis : étapes, races, finalistes, triomphes ---------- */
.eternite .lead-quote { color: var(--stage-hi); }
.steps--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.races { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.race { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-top: 3px solid var(--rc); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 10%, transparent), transparent 60%), var(--panel-solid); }
.race b { font-size: 1rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--rc); }
.race p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.race small { margin-top: auto; font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pearl); }
.finals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.final { display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 3px solid var(--rc); background: var(--panel-solid); }
.final-photo { position: relative; aspect-ratio: 16 / 10; margin: 0; overflow: hidden; }
.final-photo > a { position: absolute; inset: 0; display: block; }
.final-photo img { width: 100%; height: 100%; object-fit: cover; }
.final-photo figcaption { position: absolute; left: 0; bottom: 0; padding: 5px 10px; background: rgba(6, 10, 22, .82); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.final-body { padding: 16px 18px 20px; }
.final-body h3 { margin: 4px 0 10px; font-size: 1.2rem; font-weight: 800; text-transform: uppercase; color: var(--rc); }
.final-body p:not(.tag) { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.feat { position: relative; padding: 14px 16px 14px 52px; border: 1px solid var(--line); background: var(--panel-solid); }
.feat::before { content: ''; position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; background: url("../assets/icons/triumph.png") center / contain no-repeat; opacity: .9; }
.feat b { display: block; margin-bottom: 4px; font-size: .86rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.feat p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }

/* ---------- Galeries ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gallery--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-item { position: relative; margin: 0; border: 1px solid var(--line); background: var(--panel-solid); }
.gallery-item > a { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.gallery-item > a img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery-item:hover > a img { transform: scale(1.04); }
.gallery-item figcaption { padding: 8px 12px; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.keyart { position: relative; margin: 0; border: 1px solid rgba(255, 207, 92, .35); }
.keyart > a { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.keyart img { width: 100%; height: 100%; object-fit: cover; }
.keyart figcaption { padding: 8px 14px; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* ---------- Cartes à collectionner ---------- */
.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); }

/* ---------- Le Cheval Stellaire ---------- */
.horse { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border: 1px solid rgba(111, 184, 255, .35); background: radial-gradient(ellipse 80% 70% at 30% 40%, rgba(111, 184, 255, .1), transparent 70%), var(--panel-solid); }
.horse-figure { position: relative; min-height: 380px; margin: 0; overflow: hidden; }
.horse-figure > a { position: absolute; inset: 0; display: block; }
.horse-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.horse-figure 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); }
.horse-figure.is-neigh img { animation: neigh-shake .9s ease; }
@keyframes neigh-shake { 15% { transform: translateX(-6px) rotate(-.6deg); } 30% { transform: translateX(5px) rotate(.5deg); } 45% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 80% { transform: none; filter: brightness(1.25) saturate(1.2); } }
.horse-panel { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3vw, 30px); }
.horse-say { position: relative; min-height: 5.2em; margin: 0; padding: 14px 16px; border: 1px solid rgba(111, 184, 255, .35); background: rgba(6, 12, 28, .7); font-family: var(--font-lore); font-style: italic; font-size: 1.1rem; line-height: 1.45; color: var(--horse-hi); }
.horse-say.is-new { animation: line-in .5s ease both; }
.horse-say.is-good { border-color: var(--horse); }
.horse-say.is-bad { color: #ffc9b0; border-color: rgba(255, 140, 100, .6); }
.horse-foods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.food { position: relative; display: grid; gap: 2px; padding: 10px 12px 10px 34px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--pearl); font: inherit; font-size: .84rem; text-align: left; cursor: pointer; transition: border-color .25s, background .25s; }
.food::before { content: ''; position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 1px solid var(--horse); border-radius: 50%; }
.food small { font-size: .66rem; letter-spacing: .06em; color: var(--gold); }
.food:hover, .food:focus-visible { border-color: var(--horse); background: rgba(111, 184, 255, .08); outline: 0; }
.food.is-fed::before { background: var(--horse); box-shadow: 0 0 10px var(--horse); }
.horse-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.horse-actions .d-btn svg { width: 16px; height: 16px; }
.horse-purse { margin: 0; font-size: .78rem; color: var(--muted); }
.horse-purse b { color: var(--pearl); font-variant-numeric: tabular-nums; }
.horse-note { margin: 0; font-size: .74rem; font-style: italic; line-height: 1.5; color: var(--faint); }

/* ---------- Xûr ---------- */
.xur-voices { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(26px, 3.5vw, 40px) 0 0; padding: 0; list-style: none; }
.xur-voices .voice { padding: 18px 20px; }
.xur-voices q { quotes: '« ' ' »'; font-family: var(--font-lore); font-style: italic; font-size: 1.15rem; line-height: 1.4; color: var(--xur-hi); }

/* ---------- Les Neuf ---------- */
.nine-symbols { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.nine-symbols li { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--line); background: var(--panel-solid); text-align: center; }
.nine-symbols img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 18px rgba(180, 155, 255, .25); }
.nine-symbols b { font-size: .9rem; font-weight: 900; letter-spacing: .08em; color: var(--nine-hi); }
.nine-symbols small { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nine-symbols .is-dead img { filter: grayscale(1) brightness(.6); }
.nine-symbols .is-dead b { text-decoration: line-through; text-decoration-color: var(--finale); }
.emissaries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.emissary { border: 1px solid var(--line); background: var(--panel-solid); padding-bottom: 16px; }
.emissary figure { position: relative; margin: 0 0 12px; aspect-ratio: 16 / 10; overflow: hidden; }
.emissary figure > a { position: absolute; inset: 0; display: block; }
.emissary figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.emissary .tag, .emissary h3, .emissary p:not(.tag) { margin-left: 16px; margin-right: 16px; }
.emissary h3 { margin-top: 4px; margin-bottom: 8px; font-size: 1.2rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.emissary p:not(.tag) { margin-top: 0; margin-bottom: 0; font-size: .88rem; line-height: 1.55; color: var(--muted); }
.touched { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.touched li { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(180, 155, 255, .3); border-left: 3px solid var(--nine); background: var(--panel-solid); }
.touched b { font-size: .84rem; font-weight: 800; color: var(--pearl); }
.touched span { font-size: .74rem; color: var(--muted); }

/* ---------- 30 ans : clins d'œil ---------- */
.nods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.nod { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--line); border-top: 2px solid var(--marathon); background: var(--panel-solid); }
.nod img { border: 1px solid rgba(255, 255, 255, .2); }
.nod b { display: block; margin-bottom: 4px; font-size: .84rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.nod p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }

/* ---------- 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, 207, 92, .4); }
.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; padding: 0; background: none; }
.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); }

/* ---------- Légendes ---------- */
.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, 207, 92, .3); }
.lore-card .item-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(90deg, rgba(255, 207, 92, .14), transparent); color: inherit; }
.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 16px; font-family: var(--font-lore); font-style: italic; font-size: 1.06rem; line-height: 1.42; color: #eef0f6; }
.lore-card details { padding: 0 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; }

/* ---------- Écrans moyens et petits ---------- */
@media (max-width: 1200px) {
  .arsenal, .nods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .races { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nine-symbols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .touched { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .duo, .duo--flip, .horse { grid-template-columns: minmax(0, 1fr); }
  .duo--flip .duo-photo { order: 0; }
  .duo-photo, .horse-figure { min-height: 0; aspect-ratio: 16 / 10; }
  .lore-books, .finals, .emissaries { grid-template-columns: minmax(0, 1fr); }
  .lore-card--wide { grid-column: auto; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--six, .feats, .xur-voices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .eternite .depths { aspect-ratio: 10 / 16; }
  .collect-cards, .arsenal, .nods, .races, .feats, .steps--six, .xur-voices, .touched, .gallery--three { grid-template-columns: minmax(0, 1fr); }
  .nine-symbols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .horse-foods { grid-template-columns: minmax(0, 1fr); }
  .eternite .hero-content { bottom: 170px; }
  .eternite .hero-content .actions { gap: 10px; }
  .eternite .hero-status { column-gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .spot[data-secret="cranes"], .favor-veil, .opening.is-on .opening-lights i, .horse-figure.is-neigh img { animation: none; }
  .opening.is-on .opening-title span, .opening.is-on .opening-kicker, .opening.is-on .opening-sub { animation: none; opacity: 1; transform: none; }
}