/* Légendes — ton de la page : le violet des raids, et une couleur par extension : l'or de Calus, le rose du Récif, le vert
   du Jardin noir, la glace d'Europe, le marais de Savathûn, le rose cristal d'Essence, le blanc du Voyageur, le sable de
   Kepler. Ambiance par section (data-mood sur <body> : raid, calus, voeu, jardin, glace, sorciere, cauchemar, forme,
   desert, course, butin ; js/components/moods.js).
   Cartes de présentation, index des extensions, filtre collant, dossiers (.op.rd) avec étapes, butin, exotique et course,
   graphique de la course, moments, règles du butin, coffre, histoire du butin, petits mécanismes (leviers, biscuit, panier). */

.legendes {
  --raid: #c4a1ff;
  --raid-hi: #efe5ff;
  --page-accent: var(--raid);
  --page-accent-hi: var(--raid-hi);
}
.legendes[data-mood="calus"] { --page-accent: #f0c55a; --page-accent-hi: #fff0c4; }
.legendes[data-mood="voeu"] { --page-accent: #ff9ad5; --page-accent-hi: #ffe2f3; }
.legendes[data-mood="jardin"] { --page-accent: #8fe08a; --page-accent-hi: #e1fbdc; }
.legendes[data-mood="glace"] { --page-accent: #8fd3ff; --page-accent-hi: #e0f4ff; }
.legendes[data-mood="sorciere"] { --page-accent: #b5e36c; --page-accent-hi: #ecfbd6; }
.legendes[data-mood="cauchemar"] { --page-accent: #ff8fd8; --page-accent-hi: #ffe0f4; }
.legendes[data-mood="forme"] { --page-accent: #f4ead2; --page-accent-hi: #ffffff; }
.legendes[data-mood="desert"] { --page-accent: #ffd59a; --page-accent-hi: #fff2dc; }
.legendes[data-mood="course"] { --page-accent: #ffcf5a; --page-accent-hi: #fff1c8; }
.legendes[data-mood="butin"] { --page-accent: var(--exotic); --page-accent-hi: #fff3c4; }
.legendes .kicker, .legendes .tag, .legendes .op-name, .legendes .op-facts b, .legendes .sub-title { transition: color .6s; }
.legendes .kicker, .legendes .tag { color: var(--page-accent); }
.legendes .footer-crest, .legendes .brand svg { color: var(--raid); }
/* un semis d'étoiles violettes, très discret */
.legendes main {
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(196, 161, 255, .35), transparent 60%),
    radial-gradient(1px 1px at 68% 42%, rgba(196, 161, 255, .25), transparent 60%),
    radial-gradient(1px 1px at 34% 76%, rgba(196, 161, 255, .3), transparent 60%),
    radial-gradient(ellipse 60% 14% at 85% 2%, rgba(196, 161, 255, .06), transparent 70%);
  background-size: 260px 260px, 340px 340px, 300px 300px, 100% 100%;
}
@media (min-width: 1021px) and (max-width: 1300px) { .legendes .brand span { display: none; } }

/* ---------- Héros ---------- */
.legendes .hero-status { display: grid; grid-template-columns: auto auto auto; column-gap: 18px; row-gap: 0; }
.legendes .hero-status .status-label { grid-row: 1; }
.legendes .hero-status .status-value { grid-row: 2; font-variant-numeric: tabular-nums; }
.legendes .hero-content .actions { flex-wrap: wrap; }
.legendes .d-btn svg { width: 16px; height: 16px; flex: none; }
.legendes .hero-title { font-size: clamp(2.6rem, 7vw, 6.4rem); }
.legendes .hero-title span:last-child { margin-top: .06em; padding-top: .14em; line-height: 1.25; font-size: .3em; font-weight: 900; letter-spacing: .24em;
  background: linear-gradient(90deg, var(--raid), #fff 40%, #ffcf5a 75%, #8fd3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not (background-clip: text) { .legendes .hero-title span:last-child { color: var(--raid); } }

/* ---------- Cartes de présentation ---------- */
.brief-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.brief-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-left: 2px solid var(--page-accent); background: var(--panel-solid); transition: border-color .6s; }
.brief-card img { width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .2); background: #000; object-fit: cover; }
.brief-card h3 { margin: 2px 0 6px; font-size: 1rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.brief-card p:not(.tag) { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--muted); }
.brief-cards--rules { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.brief-cards--rules .brief-card { grid-template-columns: minmax(0, 1fr); }
.sub-title { margin: clamp(40px, 5vw, 64px) 0 16px; font-size: 1.2rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--page-accent); }

/* ---------- Index des extensions, filtre collant ---------- */
.era-index ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.era-index a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--line); background: rgba(12, 19, 40, .6);
  font-size: .9rem; font-weight: 700; color: var(--pearl); text-decoration: none; transition: border-color .25s, background .25s; }
.era-index a span { font-size: .64rem; font-weight: 700; letter-spacing: .2em; color: var(--page-accent); }
.era-index a:hover { border-color: var(--page-accent); background: rgba(12, 19, 40, .9); }
.dossiers-sec { padding-bottom: 28px; }
.ops-wrap { position: relative; }
.ops-filter { position: sticky; top: 62px; z-index: 20; padding: 0 var(--gutter); }
.ops-filter-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; max-width: 1280px; margin: 0 auto; padding: 10px 14px;
  border: 1px solid var(--line); background: rgba(6, 10, 22, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.chips { display: flex; gap: 6px; }
.chip { padding: 7px 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: inherit; font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { color: var(--pearl); border-color: var(--pearl); }
.chip.is-on { background: var(--page-accent); border-color: var(--page-accent); color: var(--night); }
.ops-count { margin: 0 0 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.ops-launch { padding: 8px 14px; font-size: .64rem; }
.ops-era[hidden] { display: none; }
.ops-era { padding-top: clamp(64px, 8vw, 110px); padding-bottom: 20px; }
.era-head { max-width: 860px; }

/* ---------- Dossiers ---------- */
.op { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(22px, 3vw, 44px); align-items: start;
  margin: 0 0 clamp(64px, 8vw, 110px); scroll-margin-top: 130px; }
.op[hidden] { display: none; }
.op--flip .op-media { order: 2; }
.op::before { content: ''; position: absolute; inset: -16px; z-index: -1; border: 1px solid transparent; pointer-events: none; transition: border-color .4s, box-shadow .4s; }
.op.is-launched::before { border-color: var(--page-accent); box-shadow: 0 0 40px -10px var(--page-accent); animation: op-ping 2.4s ease-out; }
@keyframes op-ping { 0%, 30% { border-color: var(--page-accent-hi); } 100% { border-color: transparent; box-shadow: none; } }
.op-media { position: sticky; top: 140px; display: grid; gap: 8px; }
.op-media figure { position: relative; margin: 0; overflow: hidden; background: var(--deep); }
.op-media a { display: block; }
.op-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s var(--ease); }
.op-media a:hover img { transform: scale(1.03); }
.op-main { border: 1px solid var(--line); }
.op-main figcaption, .op-thumb figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 8px; pointer-events: none;
  background: linear-gradient(0deg, rgba(6, 10, 22, .92), rgba(6, 10, 22, 0)); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.op-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.op-thumbs--1 { grid-template-columns: minmax(0, 1fr); }
.op-thumbs--1 img { aspect-ratio: 21 / 9; }
.op-thumbs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-thumb figcaption { padding: 18px 8px 6px; font-size: .54rem; letter-spacing: .12em; }
.op-thumb { border: 1px solid var(--line); }

.op-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.op-status { padding: 3px 9px; font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; border: 1px solid; }
.op-status--jouable { color: #9be7b5; border-color: rgba(155, 231, 181, .5); }
.op-status--coffre { color: #c3c9db; border-color: rgba(195, 201, 219, .4); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 6px, transparent 6px 12px); }
.op-era { font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.op-name { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 900; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; color: var(--pearl); }
.op-en { margin: 4px 0 14px; font-family: var(--font-lore); font-size: 1.15rem; font-style: italic; color: var(--page-accent); transition: color .6s; }
.op-quote { margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 2px solid var(--page-accent); }
.op-quote p { margin: 0; font-family: var(--font-lore); font-size: 1.25rem; font-style: italic; line-height: 1.4; color: var(--pearl); }
.op-quote cite { display: block; margin-top: 4px; font-size: .6rem; font-style: normal; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.op-facts { display: grid; gap: 6px; margin: 0 0 18px; padding: 12px 14px; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.op-facts li { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; font-size: .86rem; line-height: 1.45; color: var(--ink); }
.op-facts b { font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--page-accent); padding-top: .25em; }
.op-facts a { color: var(--pearl); text-decoration-color: var(--page-accent); text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.op-brief p { margin: 0 0 12px; font-size: .98rem; line-height: 1.72; color: #cfd6e8; }
.op-brief a, .op-eggs a, .loot-note a { color: var(--pearl); text-decoration-color: var(--page-accent); text-underline-offset: 3px; }

/* ---------- Étapes et butin ---------- */
.raid-sub { margin: 22px 0 10px; font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--page-accent); }
.rd-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-strong); font-size: .78rem; font-weight: 800; color: var(--pearl); font-variant-numeric: tabular-nums; }
.step--final .step-n { border-color: var(--exotic); color: var(--exotic); }
.step-body h4 { margin: 4px 0 4px; font-size: .95rem; font-weight: 800; color: var(--pearl); }
.step-body > p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.loot { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.chip-loot { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); background: rgba(12, 19, 40, .7); font-size: .76rem; line-height: 1.3; color: var(--ink); }
.chip-loot b { font-weight: 700; color: var(--pearl); }
.chip-loot span { font-size: .66rem; color: var(--faint); }
.chip-a { color: var(--muted); font-size: .7rem; letter-spacing: .04em; border-style: dashed; }
.chip-x { border-color: rgba(206, 174, 51, .6); background: rgba(206, 174, 51, .1); }
.chip-x b { color: var(--exotic); }
.odds { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; font-size: .74rem; line-height: 1.5; color: var(--faint); }
.odds svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--page-accent); }
.loot-note { margin: 14px 0 0; padding: 12px 14px; border-left: 2px solid var(--line-strong); background: rgba(255, 255, 255, .02); }
.loot-note p { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--muted); }
.loot--pool { margin-top: 10px; }

/* ---------- Exotique ---------- */
.exo { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; margin: 16px 0 0; padding: 14px; border: 1px solid rgba(206, 174, 51, .45);
  background: linear-gradient(135deg, rgba(206, 174, 51, .12), rgba(206, 174, 51, .02) 60%); }
.exo img { width: 64px; height: 64px; border: 1px solid rgba(206, 174, 51, .6); background: #000; }
.exo .tag { color: var(--exotic); }
.exo h4 { margin: 2px 0 6px; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; color: #fff3c4; }
.exo-how { margin: 0 0 8px; font-size: .88rem; line-height: 1.55; color: var(--ink); }
.exo-flavor { margin: 0; font-family: var(--font-lore); font-size: 1.02rem; font-style: italic; line-height: 1.45; color: var(--muted); }
.boosts { margin: 12px 0 0; border-top: 1px solid rgba(206, 174, 51, .3); }
.boosts summary { display: flex; align-items: center; gap: 8px; padding: 10px 0 4px; cursor: pointer; list-style: none; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pearl); }
.boosts summary::-webkit-details-marker { display: none; }
.boosts summary span { margin-left: auto; color: var(--exotic); letter-spacing: .06em; }
.boosts summary::before { content: '+'; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--line-strong); font-size: .8rem; color: var(--muted); }
.boosts[open] summary::before { content: '−'; }
.boosts table { width: 100%; margin: 6px 0 8px; border-collapse: collapse; font-size: .82rem; }
.boosts th { padding: 5px 0; text-align: left; font-weight: 400; color: var(--ink); border-bottom: 1px solid var(--line); }
.boosts td { padding: 5px 0 5px 10px; text-align: right; font-weight: 800; color: var(--exotic); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.boosts p { margin: 0; font-size: .76rem; line-height: 1.5; color: var(--faint); }

/* ---------- Course mondiale (dans un dossier) ---------- */
.wf { margin: 16px 0 0; padding: 14px; border: 1px solid var(--line); background: rgba(255, 207, 90, .04); }
.wf-label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #ffcf5a; }
.wf-label svg { width: 15px; height: 15px; }
.wf-time { margin: 6px 0 2px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 900; color: var(--pearl); font-variant-numeric: tabular-nums; }
.wf-team { margin: 0 0 8px; font-size: .8rem; line-height: 1.5; color: var(--faint); }
.wf-team b { color: var(--ink); }
.wf-story { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.wf-more { margin: 8px 0 0; }
.wf-more a, .op-link a { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--page-accent); text-decoration: none; }
.wf-more a:hover, .op-link a:hover { text-decoration: underline; }
.op-link { margin: 14px 0 0; }

/* ---------- Tiroir des secrets ---------- */
.op-eggs { margin: 16px 0 0; border: 1px solid var(--line); background: rgba(12, 19, 40, .7); }
.op-eggs summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pearl); }
.op-eggs summary::-webkit-details-marker { display: none; }
.op-eggs summary svg { width: 18px; height: 18px; color: var(--page-accent); }
.op-eggs summary::after { content: '+'; margin-left: auto; font-size: 1.1rem; font-weight: 400; color: var(--muted); }
.op-eggs[open] summary::after { content: '−'; }
.op-eggs summary:hover { background: rgba(255, 255, 255, .03); }
.op-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line-strong); font-size: .64rem; color: var(--muted); }
.op-eggs.is-read .op-count { border-color: var(--page-accent); color: var(--page-accent); }
.op-eggs.is-read summary svg { opacity: .55; }
.op-eggs ul { display: grid; gap: 10px; margin: 0; padding: 4px 16px 16px 16px; list-style: none; }
.op-eggs li { position: relative; padding-left: 16px; font-size: .9rem; line-height: 1.65; color: var(--muted); }
.op-eggs li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--page-accent); transform: rotate(45deg); }
.op-eggs li b { color: var(--pearl); }

/* ---------- Petits mécanismes ---------- */
.op-extra-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 16px 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.op-say { flex-basis: 100%; margin: 0; font-family: var(--font-lore); font-size: 1.1rem; font-style: italic; color: var(--pearl); }
.op-say.pop { animation: say-in .5s var(--ease); }
@keyframes say-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.levers { display: flex; gap: 6px; }
.lever { display: grid; justify-items: center; gap: 2px; width: 40px; padding: 6px 0 4px; border: 1px solid var(--line-strong); background: rgba(240, 197, 90, .06); color: #f0c55a; font: inherit; cursor: pointer; transition: background .2s; }
.lever svg { width: 22px; height: 22px; transition: transform .25s var(--ease); }
.lever span { font-size: .62rem; font-weight: 800; color: var(--muted); }
.lever:hover { background: rgba(240, 197, 90, .14); }
.lever.is-down svg { transform: scaleX(-1); }
.lever.is-down { background: rgba(240, 197, 90, .22); }
.levers.is-open .lever { border-color: #f0c55a; }
.levers-reset { padding: 8px 12px; font-size: .62rem; }
.court { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.court-meter { position: relative; width: 180px; height: 12px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .04); }
.court-zone { position: absolute; top: 0; bottom: 0; left: 44%; width: 12%; background: rgba(255, 166, 77, .45); }
.court-cursor { position: absolute; top: -4px; bottom: -4px; left: 0; width: 3px; background: var(--pearl); }
.court-score { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.court-score b { font-size: 1rem; color: var(--pearl); }

/* ---------- La course ---------- */
.race-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; margin: 0 0 24px; }
.race-intro p { margin: 0; font-size: .98rem; line-height: 1.72; color: #cfd6e8; }
.race-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.race-tiles li { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); background: var(--panel-solid); }
.race-tiles span { font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.race-tiles b { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 900; color: var(--pearl); font-variant-numeric: tabular-nums; }
.race-tiles a { font-size: .8rem; color: var(--muted); }
.race-chart { margin: 0; padding: 18px 18px 14px; border: 1px solid var(--line); background: var(--panel-solid); }
.race-chart figcaption { display: grid; gap: 2px; margin: 0 0 14px; }
.race-chart figcaption b { font-size: .9rem; color: var(--pearl); }
.race-chart figcaption span { font-size: .78rem; color: var(--faint); }
.race-rows { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.race-row { position: relative; display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 12px; padding: 3px 4px; outline: none; }
.race-row:hover, .race-row:focus-visible { background: rgba(255, 255, 255, .04); }
.race-name { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; color: var(--ink); text-decoration: none; }
.race-name span { color: var(--faint); font-variant-numeric: tabular-nums; }
.race-name:hover { color: var(--pearl); }
/* la piste : la zone des barres (toute la largeur moins 70px pour la valeur), lignes de repère toutes les 5 heures */
.race-track { position: relative; display: flex; align-items: center; gap: 8px; height: 18px; padding-right: 70px; }
.race-track::before { content: ''; position: absolute; inset: 0 70px 0 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 25% 100%; border-right: 1px solid var(--line); }
.race-bar { position: relative; display: block; width: calc(var(--w) * 1%); min-width: 4px; height: 10px; border-radius: 0 4px 4px 0; background: var(--page-accent); transition: background .6s; }
.race-val { position: relative; }
.race-row:hover .race-bar, .race-row:focus-visible .race-bar { background: var(--page-accent-hi); }
.race-val { flex: none; font-size: .74rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.race-tip { position: absolute; z-index: 5; left: 242px; bottom: calc(100% + 4px); display: none; gap: 2px; min-width: 240px; max-width: 360px; padding: 10px 12px;
  border: 1px solid var(--line-strong); background: rgba(6, 10, 22, .96); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); pointer-events: none; }
.race-row:hover .race-tip, .race-row:focus-visible .race-tip { display: grid; }
.race-tip b { font-size: .82rem; color: var(--pearl); }
.race-tip span { font-size: .74rem; line-height: 1.45; color: var(--muted); }
.race-axis { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; margin: 6px 0 0; padding: 0 4px; font-size: .66rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.race-ticks { display: flex; justify-content: space-between; margin-right: 70px; }
.race-ticks i { font-style: normal; width: 0; white-space: nowrap; text-indent: -.3em; }
.race-ticks i:last-child { text-indent: -2.2em; }
.race-src { margin: 12px 0 0; font-size: .74rem; line-height: 1.5; color: var(--faint); }
.race-row--epic .race-bar { background: repeating-linear-gradient(135deg, var(--page-accent) 0 6px, var(--page-accent-hi) 6px 9px); }
.race-row--epic .race-name { font-style: italic; }

/* ---------- Podium d'un dossier ---------- */
.wf-podium { display: grid; gap: 4px; margin: 12px 0 0; padding: 10px 0 0; list-style: none; border-top: 1px dashed var(--line); }
.wf-podium li { display: grid; grid-template-columns: 26px 78px minmax(0, 1fr); gap: 8px; font-size: .78rem; line-height: 1.45; color: var(--muted); }
.wf-podium b { color: var(--pearl); }
.wf-gap { color: #ffcf5a; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Classement complet ---------- */
.board { margin-top: clamp(36px, 5vw, 56px); padding: 18px; border: 1px solid var(--line); background: var(--panel-solid); scroll-margin-top: 90px; }
.board-head .sub-title { margin: 0 0 6px; }
.board-head p { margin: 0 0 14px; max-width: 760px; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.board-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0 0 12px; }
.board-tools input { padding: 8px; border: 1px solid var(--line-strong); background: var(--deep); color: var(--pearl); font: inherit; font-size: .86rem; letter-spacing: 0; }
.board-found { margin: 0 0 12px; padding: 10px 12px; border-left: 2px solid #ffcf5a; background: rgba(255, 207, 90, .05); }
.board-found-head { margin: 0 0 6px; font-size: .8rem; color: var(--ink); }
.board-found ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.board-hit { padding: 5px 9px; border: 1px solid var(--line); background: rgba(12, 19, 40, .7); color: var(--muted); font: inherit; font-size: .76rem; cursor: pointer; }
.board-hit b { color: var(--pearl); }
.board-hit:hover { border-color: #ffcf5a; }
.board-scroll { overflow-x: auto; }
.board-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.board-table th { padding: 6px 8px; text-align: left; font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line-strong); }
.board-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.board-rank { width: 44px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.board-time, .board-gap { width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.board-time { color: var(--ink); }
.board-gap { color: var(--faint); }
.board-team { line-height: 1.5; }
.board-top .board-rank { color: #ffcf5a; }
.board-top--1 td { background: rgba(255, 207, 90, .06); }
.board-top--1 .board-team { color: var(--pearl); }
.board-table tr.is-hit td { background: rgba(196, 161, 255, .12); }
.board-team .is-me { color: var(--pearl); font-weight: 800; text-decoration: underline; text-decoration-color: var(--raid); text-underline-offset: 3px; }
.board-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 12px 0 0; }
.board-foot span { font-size: .74rem; line-height: 1.5; color: var(--faint); }
.regulars { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); background: var(--panel-solid); }
.regulars h4 { margin: 0 0 4px; font-size: .95rem; font-weight: 900; text-transform: uppercase; color: var(--pearl); }
.regulars p { margin: 0 0 12px; font-size: .8rem; color: var(--faint); }
.regulars ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: reg; }
.regulars li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); counter-increment: reg; }
.regulars li b { font-size: .9rem; color: var(--pearl); }
.regulars li b::before { content: counter(reg) '. '; color: #ffcf5a; }
.regulars li span { font-size: .72rem; line-height: 1.45; color: var(--muted); }
.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.moment { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-top: 2px solid var(--page-accent); background: var(--panel-solid); }
.moment h3 { margin: 2px 0 8px; font-size: 1rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.moment p:not(.tag) { margin: 0 0 10px; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.moment a { margin-top: auto; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--page-accent); text-decoration: none; }

/* ---------- Le butin ---------- */
.chest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1.1fr); gap: 20px; margin-top: clamp(30px, 4vw, 54px); scroll-margin-top: 90px; }
.chest-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 280px; padding: 24px; text-align: center;
  border: 1px solid rgba(206, 174, 51, .45); background: radial-gradient(ellipse at 50% 40%, rgba(206, 174, 51, .14), transparent 70%), #070c19; }
.chest-screen .panel-title { display: flex; align-items: center; gap: 8px; }
.chest-screen .panel-title svg { width: 16px; height: 16px; color: var(--exotic); }
.chest-icon { width: 96px; height: 96px; border: 1px solid rgba(206, 174, 51, .6); background: #000; transition: filter .4s; filter: grayscale(.8) brightness(.7); }
.chest.is-exotic .chest-icon { filter: none; box-shadow: 0 0 30px rgba(206, 174, 51, .6); }
.chest-result { margin: 0; max-width: 40ch; font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 800; line-height: 1.4; color: var(--pearl); }
.chest.is-exotic .chest-result { color: var(--exotic); }
.chest-count { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chest-count b { font-size: 1rem; color: var(--pearl); font-variant-numeric: tabular-nums; }
.chest-side { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); background: var(--panel-solid); }
.chest-field { display: grid; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.chest-field b { color: var(--pearl); font-variant-numeric: tabular-nums; }
.chest-field select { padding: 8px; border: 1px solid var(--line-strong); background: var(--deep); color: var(--pearl); font: inherit; font-size: .86rem; letter-spacing: 0; }
.chest-field input[type=range] { width: 100%; accent-color: var(--exotic); }
.chest-check { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.chest-check input { margin-top: 3px; accent-color: var(--exotic); }
.chest-odds { margin: 0; padding: 10px 12px; border-left: 2px solid var(--exotic); background: rgba(206, 174, 51, .06); font-size: .86rem; line-height: 1.55; color: var(--ink); }
.chest-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chest-note { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--faint); }
.hists { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line-strong); }
.hist { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 16px; padding: 12px 0 12px 20px; }
.hist::before { content: ''; position: absolute; left: -5px; top: 18px; width: 9px; height: 9px; background: var(--page-accent); transform: rotate(45deg); }
.hist-year { font-size: .8rem; font-weight: 900; letter-spacing: .1em; color: var(--page-accent); font-variant-numeric: tabular-nums; padding-top: 2px; }
.hist h3 { margin: 0 0 4px; font-size: .95rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.hist p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }

/* ---------- Petits écrans ---------- */
@media (max-width: 1020px) {
  .op, .op--flip { grid-template-columns: minmax(0, 1fr); }
  .op--flip .op-media { order: 0; }
  .op-media { position: relative; top: 0; }
  .chest { grid-template-columns: minmax(0, 1fr); }
  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .brief-cards { grid-template-columns: minmax(0, 1fr); }
  .ops-filter { top: 56px; padding: 0 10px; }
  .ops-filter-inner { gap: 8px; padding: 8px; }
  .ops-count { margin-left: 0; }
  .ops-launch { display: none; }
  .op-thumbs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-thumbs--3 figure:last-child { grid-column: span 2; }
  .op-facts li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .era-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .race-intro, .race-tiles, .moments { grid-template-columns: minmax(0, 1fr); }
  .race-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .race-axis { grid-template-columns: minmax(0, 1fr); }
  .race-axis > span:first-child { display: none; }
  .race-tip { left: 0; }
  .hist { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .board { padding: 12px; }
  .board-tools, .regulars ol { grid-template-columns: minmax(0, 1fr); }
  .board-table th:nth-child(4), .board-table td:nth-child(4) { display: none; }
  .wf-podium li { grid-template-columns: 26px minmax(0, 1fr); }
  .wf-podium li span:last-child { grid-column: 2; }
  .levers { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .op.is-launched::before, .op-say.pop { animation: none; }
}