/* ── The Undying DM — dark epic-fantasy theme (WoW / Forgotten Realms) ──
     Deep obsidian atmosphere, gilded ornaments, layered depth. Pure CSS —
     no images, no CDN. Gold = gradient text/borders; panels are lit stone.
     Fonts self-hosted (woff2 baked into the binary, served at /fonts). */
  @font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/ebgaramond-400.woff2") format("woff2");}
  @font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/ebgaramond-400i.woff2") format("woff2");}
  @font-face{font-family:"Cinzel";font-style:normal;font-weight:400 900;font-display:swap;src:url("/fonts/cinzel-600.woff2") format("woff2");}
  @font-face{font-family:"Cinzel Decorative";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/cinzeldec-700.woff2") format("woff2");}
  :root { color-scheme: dark;
    --serif:"EB Garamond","Iowan Old Style",Palatino,Georgia,serif;
    --display:"Cinzel","Trajan Pro",Georgia,serif;
    --display-orn:"Cinzel Decorative","Cinzel",Georgia,serif;
    --bg:#14100b; --bg2:#1b1610;
    --panel-1:#241d15; --panel-2:#1a150f; --stone:#241d15;
    --ink:#e7dabf; --parch:#f2e8d0; --ink-soft:#c0b193; --faint:#ab9878;
    --gold:#a98a4e; --gold-lt:#c9ad74; --gold-dk:#6f5527; --bronze:#5f4a24;
    --ember:#b9591f; --blood:#7c2b22; --line:#3a3120;
    /* Registre STREAM (dose homéopathique) : --veil = vert du Voile, réservé au
       signal « live » (présence de Xarnak) ; --eye = son regard de braise. */
    --veil:#8fd98a; --eye:#c8352a; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; overflow-x:clip; color:var(--ink); line-height:1.62;
    font-family:var(--serif);
    display:flex; flex-direction:column; min-height:100vh;
    background-color:var(--bg);
    background-image:
      radial-gradient(120% 80% at 50% -8%, #2e241533 0%, #17130c00 48%),
      radial-gradient(90% 60% at 50% 112%, #2a161033 0%, #12100c00 52%),
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
      linear-gradient(180deg,#17120c,#14100b);
    background-attachment:fixed; }
  a { color:var(--gold); text-decoration:none; }
  a:hover { color:var(--gold-lt); }
  :where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible {
    outline:3px solid var(--gold-lt); outline-offset:3px; }
  /* First focusable element in the shell. It stays off-canvas until a keyboard
     user tabs to it, then clears the sticky top bar. */
  .skip-link { position:fixed; top:8px; left:12px; z-index:1000; padding:9px 14px;
    border:1px solid var(--gold-lt); border-radius:4px; color:#14100b; font-family:var(--display);
    font-size:.78em; font-weight:700; letter-spacing:.04em; background:var(--gold-lt);
    box-shadow:0 5px 20px #000c; transform:translateY(calc(-100% - 18px)); }
  .skip-link:focus, .skip-link:focus-visible { color:#14100b; transform:translateY(0); }
  code { background:#00000055; border:1px solid var(--line); padding:1px 7px; border-radius:3px;
    font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.85em; color:var(--gold-lt); }
  h1,h2,h3 { font-family:var(--display); font-weight:700; letter-spacing:.4px; color:var(--ink); }
  h1 { font-size:1.9em; margin:.2em 0; } h2 { font-size:1.4em; } h3 { margin:.2em 0; }
  .muted { color:var(--ink-soft); } .small { font-size:.85em; }
  .center { text-align:center; } .narrow { max-width:600px; margin-inline:auto; }
  /* Gilded helper */
  .gild { color:var(--gold-lt); }
  /* Top bar — full-width band: menu · brand · search · account (YouTube-like) */
  header.topbar { display:flex; align-items:center; gap:14px; height:60px; padding:0 clamp(12px,2.5vw,22px);
    position:sticky; top:0; z-index:40;
    background:linear-gradient(180deg,#14110bF2,#0d0b08EE); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--gold-dk);
    box-shadow:0 1px 0 #00000080, 0 6px 20px #00000055; }
  .burger { appearance:none; display:grid; place-items:center; width:44px; height:44px; flex:0 0 auto; cursor:pointer;
    margin:0; padding:0; color:inherit; font:inherit;
    border:1px solid var(--line); border-radius:4px;
    background:linear-gradient(180deg,#1e1810,#15110b); user-select:none; }
  .burger span { position:relative; display:block; width:18px; height:2px; border-radius:2px; background:var(--gold-lt); }
  .burger span::before, .burger span::after { content:""; position:absolute; left:0; width:18px; height:2px; border-radius:2px; background:var(--gold-lt); }
  .burger span::before { top:-6px; } .burger span::after { top:6px; }
  .burger:hover { border-color:var(--gold-dk); }
  .burger:hover span, .burger:hover span::before, .burger:hover span::after { background:#fff; }
  a.brand { display:flex; align-items:center; gap:9px; }
  .brand-crest { width:30px; height:30px; flex:0 0 auto;
    filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 8px #c9ad7422); }
  .search { flex:1 1 auto; display:flex; max-width:560px; margin:0 auto; }
  .search input { flex:1; min-width:0; background:#0e0c08; color:var(--ink);
    border:1px solid var(--line); border-right:none; border-radius:4px 0 0 4px;
    padding:8px 15px; font-family:inherit; font-size:.98em; }
  .search input::placeholder { color:var(--faint); }
  .search input:focus { border-color:var(--gold-dk); background:#100d09; }
  .search button { flex:0 0 auto; width:54px; cursor:pointer; font-size:1em;
    border:1px solid var(--line); border-radius:0 4px 4px 0; color:var(--gold-lt);
    background:linear-gradient(180deg,#241d15,#181209); }
  .search button:hover { border-color:var(--gold-dk); color:#fff; }
  .topbar-right { flex:0 0 auto; display:flex; align-items:center; gap:8px; }
  .top-watch { flex:0 0 auto; }
  .top-watch-short { display:none; }
  .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
    margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important;
    white-space:nowrap!important; border:0!important; }
  .nav-signout { display:grid; place-items:center; width:38px; height:38px;
    border:1px solid var(--line); border-radius:4px; color:var(--faint);
    background:linear-gradient(180deg,#1e1810,#15110b); transition:.12s; }
  .nav-signout:hover { color:var(--parch); border-color:var(--gold-dk); }
  /* Mobile search: a real button opens a native dialog. Hidden on desktop,
     where the inline search box is shown instead. */
  .search-btn { display:none; appearance:none; margin:0; padding:0; font:inherit; }
  .search-modal { display:none; position:fixed; inset:0; z-index:60; }
  dialog.search-modal { width:100%; max-width:none; height:100dvh; max-height:none;
    margin:0; padding:0; border:0; color:inherit; background:transparent; }
  dialog.search-modal[open] { display:block; }
  dialog.search-modal::backdrop { background:#000000cc; backdrop-filter:blur(3px); }
  body:has(dialog.search-modal[open]), body.search-open { overflow:hidden; }
  .search-modal-form { position:relative; z-index:1; display:flex; align-items:center; gap:8px;
    width:calc(100% - 24px); max-width:520px; margin:74px auto 0; padding:10px;
    background:linear-gradient(180deg,#241d15,#1a150f); border:1px solid var(--gold-dk); border-radius:10px;
    box-shadow:0 24px 70px #000000d9; }
  .search-modal-form input { flex:1 1 auto; min-width:0; background:#0e0c08; color:var(--ink);
    border:1px solid var(--line); border-radius:6px; padding:12px 14px; font-family:inherit; font-size:1.05em; }
  .search-modal-form input::placeholder { color:var(--faint); }
  .search-modal-form input:focus { border-color:var(--gold-dk); background:#100d09; }
  .search-modal-form button { flex:0 0 auto; width:48px; height:46px; cursor:pointer; font-size:1em;
    border:1px solid var(--line); border-radius:6px; color:var(--gold-lt);
    background:linear-gradient(180deg,#2a2114,#181209); }
  .search-modal-form button:hover { border-color:var(--gold-dk); color:#fff; }
  .search-close { appearance:none; flex:0 0 auto; width:44px; height:46px; display:grid; place-items:center;
    margin:0; padding:0; border:0; cursor:pointer; color:var(--faint); background:transparent;
    font:inherit; font-size:1.15em; }
  .search-close:hover { color:var(--parch); }
  .search-modal-form button.search-close { width:44px; border:0; color:var(--faint); background:transparent; }
  .search-modal-form button.search-close:hover { border:0; color:var(--parch); background:transparent; }
  .burger[aria-expanded="true"], .search-btn[aria-expanded="true"] {
    color:#fff; border-color:var(--gold-lt); background:linear-gradient(180deg,#2a2114,#181209); }
  .burger[aria-expanded="true"] span,
  .burger[aria-expanded="true"] span::before,
  .burger[aria-expanded="true"] span::after { background:#fff; }
  /* Body layout — left rail + content column */
  .layout { flex:1; display:grid; grid-template-columns:232px minmax(0,1fr); }
  .content { display:flex; flex-direction:column; min-width:0; }
  .sidebar { position:sticky; top:60px; align-self:start; height:calc(100vh - 60px); overflow-y:auto;
    padding:16px 12px; border-right:1px solid var(--line);
    background:linear-gradient(180deg,#17130d,#120e09);
    display:flex; flex-direction:column; gap:3px; }
  .side-link { display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:6px;
    text-decoration:none; color:var(--ink-soft); font-size:.98em; transition:.12s; }
  .side-link .ico { font-size:1.1em; width:24px; text-align:center; filter:drop-shadow(0 1px 1px #000); }
  .side-link:hover { background:#ffffff0a; color:var(--parch); }
  .side-link.active { background:linear-gradient(90deg,#2a2013,#1a140d); color:var(--parch);
    box-shadow:inset 3px 0 0 var(--blood); }
  .side-play { color:#f3e7d0; border:1px solid #3a1613;
    background:linear-gradient(180deg,#893326,#5c221a); }
  .side-play:hover { color:#fff; border-color:var(--ember); background:linear-gradient(180deg,#98392b,#6a281e); }
  /* Codex accordion — native <details>, no JS */
  .side-acc { display:block; }
  .side-acc > summary { cursor:pointer; list-style:none; }
  .side-acc > summary::-webkit-details-marker { display:none; }
  .side-acc > summary::after { content:"\203A"; margin-left:auto; color:var(--faint);
    font-size:1.15em; line-height:1; transition:transform .15s ease; }
  .side-acc[open] > summary::after { transform:rotate(90deg); }
  .side-sub { display:flex; flex-direction:column; gap:1px; margin:1px 0 4px; }
  .side-sub a { display:block; text-decoration:none; color:var(--ink-soft); font-size:.9em;
    padding:7px 14px 7px 50px; border-radius:6px; transition:.12s; }
  .side-sub a:hover { background:#ffffff0a; color:var(--parch); }
  .side-sub a.active { color:var(--parch); box-shadow:inset 3px 0 0 var(--blood); }
  .side-sep { height:1px; margin:12px 8px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
  .side-cap { color:var(--faint); font-family:var(--display); font-size:.72em; letter-spacing:1.5px; padding:2px 14px 6px; }
  .side-social { display:flex; gap:8px; padding:2px 10px; flex-wrap:wrap; }
  .side-foot { display:flex; flex-wrap:wrap; gap:4px 16px; padding:2px 14px 6px; }
  .side-foot a { color:var(--faint); font-size:.82em; text-decoration:none; }
  .side-foot a:hover { color:var(--gold-lt); }
  .side-foot a.active { color:var(--parch); }
  .scrim { display:none; margin:0; padding:0; border:0; }
  /* Numbered steps (How to Play) */
  .steps { display:flex; flex-direction:column; gap:14px; margin:24px 0; counter-reset:step; }
  .step { display:flex; gap:16px; align-items:flex-start; padding:16px 20px; border-radius:8px;
    border:1px solid var(--line); background:linear-gradient(180deg,var(--panel-1),var(--panel-2));
    box-shadow:inset 0 1px 0 #ffffff08; }
  .step::before { counter-increment:step; content:counter(step); flex:0 0 auto;
    width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
    font-family:var(--display); font-weight:700; color:#f3e7d0;
    background:linear-gradient(180deg,#98392b,#5c221a); box-shadow:inset 0 1px 0 #ffffff22, 0 2px 6px #0007; }
  .step h3 { margin:0 0 4px; color:var(--parch); } .step p { margin:0; color:var(--ink-soft); }
  /* Commands table */
  table.cmd { width:100%; border-collapse:collapse; margin:16px 0; }
  table.cmd th, table.cmd td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
  table.cmd th { color:var(--faint); font-family:var(--display); font-size:.78em; letter-spacing:1px; }
  table.cmd td:first-child { white-space:nowrap; }
  /* FAQ accordions */
  details.faq { border:1px solid var(--line); border-radius:8px; margin:10px 0;
    background:linear-gradient(180deg,var(--panel-1),var(--panel-2)); }
  details.faq > summary { cursor:pointer; list-style:none; padding:14px 18px; display:flex; align-items:center; gap:10px;
    font-family:var(--display); font-size:1.02em; color:var(--parch); }
  details.faq > summary::-webkit-details-marker { display:none; }
  details.faq > summary::after { content:"+"; margin-left:auto; color:var(--gold); font-size:1.3em; line-height:1; }
  details.faq[open] > summary::after { content:"\2013"; }
  details.faq > div { padding:0 18px 16px; color:var(--ink-soft); }
  /* Prose (legal / long-form) */
  .prose { max-width:760px; }
  .prose h2 { margin:26px 0 8px; font-size:1.18em; color:var(--parch); }
  .prose p, .prose li { color:var(--ink-soft); }
  .prose ul { padding-left:1.2em; }
  /* Chips (races / classes) */
  .chips { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 4px; justify-content:center; }
  .chip { padding:8px 16px; border-radius:999px; border:1px solid var(--gold-dk);
    background:linear-gradient(180deg,var(--panel-1),var(--panel-2)); color:var(--parch);
    font-family:var(--display); font-size:.88em; letter-spacing:.5px; box-shadow:inset 0 1px 0 #ffffff08; }
  /* Clickable feature cards (hub pages) */
  a.feature { text-decoration:none; color:inherit; }
  a.feature:hover { border-color:var(--gold-dk);
    box-shadow:inset 0 1px 0 #ffffff10, inset 0 0 40px #00000060, 0 16px 36px #00000080, 0 0 16px #0000004d; }
  /* Reference list (races / classes) */
  .reflist { display:flex; flex-direction:column; gap:1px; margin:20px 0; }
  .ref { display:flex; gap:16px; padding:12px 4px; border-bottom:1px solid var(--line); }
  .ref-name { flex:0 0 132px; color:var(--parch); font-family:var(--display); font-size:.92em; letter-spacing:.3px; }
  .ref-desc { color:var(--ink-soft); }
  @media (max-width:520px) { .ref { flex-direction:column; gap:2px; } .ref-name { flex-basis:auto; } }
  /* Cast profile cards */
  .castcard { display:flex; gap:22px; align-items:flex-start; padding:26px; border-radius:10px; margin:18px 0;
    border:1px solid var(--line); background:linear-gradient(180deg,var(--panel-1),var(--panel-2));
    box-shadow:inset 0 1px 0 #ffffff08, inset 0 0 40px #00000050, 0 12px 30px #00000070; }
  .castcard .portrait { flex:0 0 auto; width:88px; height:88px; display:grid; place-items:center; font-size:2.7em;
    border-radius:12px; border:1px solid var(--gold-dk); box-shadow:inset 0 0 26px #000a, 0 2px 8px #0007;
    background:radial-gradient(circle at 50% 34%, #2a2013, #14100b); }
  /* Portrait porté par une image (Rictus) : remplit le cadre, bord doré conservé. */
  .castcard .portrait.has-img { overflow:hidden; background:#0c0f0b; }
  .castcard .portrait.has-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .castcard h2 { margin:0; color:var(--parch); }
  .castcard .epithet { color:var(--gold); font-family:var(--display); font-size:.8em; letter-spacing:1.2px; margin:3px 0 10px; }
  .castcard p { color:var(--ink-soft); margin:0; }
  @media (max-width:520px) { .castcard { flex-direction:column; align-items:center; text-align:center; } }
  /* Reserved artwork placeholders */
  .artframe { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    width:100%; border:1px solid var(--gold-dk); border-radius:8px; color:var(--faint); overflow:hidden;
    background:repeating-linear-gradient(45deg,#1a150f,#1a150f 10px,#171209 10px,#171209 20px);
    box-shadow:inset 0 0 34px #0007; }
  .artframe::before { content:""; position:absolute; inset:6px; border:1px dashed #6a522855; border-radius:5px; pointer-events:none; }
  .artframe .art-ico { font-size:1.7em; opacity:.45; }
  .artframe .art-cap { font-family:var(--display); font-size:.68em; letter-spacing:1.2px; text-transform:uppercase; }
  .artframe.banner { aspect-ratio:16/6; }
  .artframe.portrait { aspect-ratio:3/4; }
  .artframe.square { aspect-ratio:1/1; }
  /* Entity card grid (classes, factions, figures) */
  .cardgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px; margin:22px 0; }
  .tile { display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit; }
  .tile-name { font-family:var(--display); color:var(--parch); font-size:.98em; }
  .tile-sub { color:var(--ink-soft); font-size:.82em; line-height:1.4; }
  a.tile:hover .artframe { border-color:var(--gold); box-shadow:inset 0 0 34px #0007, 0 0 14px #d8b86933; }
  a.tile:hover .tile-name { color:#fff; }
  /* Chronicle — the timeline frieze (/codex/chronicle) */
  .timeline { max-width:760px; margin:28px auto 0; }
  .era { margin:0 0 30px; }
  .era-title { font-family:var(--display); color:var(--gold-lt); font-size:1.02em; letter-spacing:1.6px;
    text-transform:uppercase; margin:0 0 16px; padding-bottom:7px; border-bottom:1px solid var(--line); }
  .tl { list-style:none; margin:0; padding:2px 0 0 24px; border-left:2px solid var(--gold-dk); }
  .tl-item { position:relative; padding:0 0 20px 18px; }
  .tl-item:last-child { padding-bottom:2px; }
  .tl-item::before { content:""; position:absolute; left:-31px; top:4px; width:11px; height:11px;
    border-radius:50%; background:var(--bg); border:2px solid var(--gold);
    box-shadow:0 0 0 3px var(--bg), 0 0 8px #d8b86955; }
  .tl-date { display:block; font-family:var(--display); color:var(--gold-lt); font-size:.8em;
    letter-spacing:1px; margin-bottom:2px; }
  .tl-t { color:var(--parch); font-weight:600; }
  .tl-body { color:var(--ink-soft); font-size:.92em; line-height:1.5; }
  /* the present burns */
  .era.present .era-title { color:var(--ember); }
  .era.present .tl { border-left-color:var(--ember); }
  .era.present .tl-date { color:var(--ember); }
  .era.present .tl-item::before { border-color:var(--ember); box-shadow:0 0 0 3px var(--bg), 0 0 10px var(--ember); }
  /* World map — interactive parchment map (/codex/worldmap) */
  /* Carte EN COUCHES + navigable (pan/zoom). Le viewport rogne, .map-zoom se transforme. */
  .map-viewport { position:relative; overflow:hidden; border-radius:4px; max-width:820px; margin:16px auto 0;
    touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; }
  .map-viewport.grabbing { cursor:grabbing; }
  .map-zoom { transform-origin:0 0; will-change:transform; }
  .map-zoom-ctrls { position:absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:6px; z-index:8; }
  .mz-btn { width:44px; height:44px; font-size:20px; line-height:1; font-family:var(--display); cursor:pointer;
    color:var(--parch); background:#14100be0; border:1px solid var(--gold-dk); border-radius:6px; padding:0;
    box-shadow:0 2px 6px #0007; display:flex; align-items:center; justify-content:center; transition:all .12s; }
  .mz-btn:hover { background:var(--gold-dk); color:#14100b; border-color:var(--gold-lt); }
  .worldmap { position:relative; line-height:0; }
  .worldmap .lyr { display:block; width:100%; height:auto; border-radius:4px; transition:opacity .18s; }
  .worldmap .lyr.base { position:relative; }
  .worldmap .lyr.seas, .worldmap .lyr.regions, .worldmap .cities { position:absolute; inset:0; }
  .worldmap svg.svg-names { height:100%; overflow:visible; pointer-events:none; }
  .worldmap .region-names text { pointer-events:auto; cursor:help; }
  /* le conteneur des villes couvre toute la carte AU-DESSUS du SVG des
     régions : sans ceci il avale les clics droits destinés aux noms. */
  .worldmap .cities { pointer-events:none; }
  .worldmap .mapspot { pointer-events:auto; }
  #map-ctx { position:fixed; z-index:40; min-width:210px; background:#1a140d;
    border:1px solid #6b5637; border-radius:6px; box-shadow:0 8px 24px #000a;
    overflow:hidden; }
  #map-ctx .ctx-title { font-family:var(--display); color:var(--parch); font-size:.95em;
    letter-spacing:1px; padding:10px 14px 8px; border-bottom:1px solid #3a2e1c; }
  #map-ctx .ctx-item { display:flex; align-items:center; min-height:44px; padding:9px 14px; color:var(--ink-soft);
    text-decoration:none; font-size:.92em; }
  #map-ctx .ctx-item:hover { background:#ffffff0d; color:var(--parch); }
  .worldmap .region-names text { font-family:"Cinzel",serif; font-weight:600; fill:#4a3420;
    stroke:#f1e9d2; stroke-width:.34; paint-order:stroke; text-anchor:middle; }
  .worldmap .sea-names text { font-family:"EB Garamond",serif; font-style:italic; fill:#33556e;
    stroke:#ecf4f8; stroke-width:.42; stroke-linejoin:round; paint-order:stroke;
    text-anchor:middle; filter:drop-shadow(0 0 .5px #ffffffcc); }
  .worldmap .cities { transition:opacity .18s; }
  /* Contrôles : cases à cocher masquées + « chips » cliquables. */
  .mtoggle { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .map-ctrls { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:14px 0 0; }
  .map-ctrls label { display:inline-flex; align-items:center; min-height:44px; font-family:var(--display);
    font-size:.8em; letter-spacing:.4px; cursor:pointer;
    padding:7px 15px; border:1px solid var(--gold-dk); border-radius:22px; color:var(--parch);
    background:#14100b55; user-select:none; transition:all .12s; }
  .map-ctrls label:hover { border-color:var(--gold-lt); }
  #mtg-reg:focus-visible ~ .map-ctrls label[for="mtg-reg"],
  #mtg-sea:focus-visible ~ .map-ctrls label[for="mtg-sea"],
  #mtg-cit:focus-visible ~ .map-ctrls label[for="mtg-cit"] {
    outline:3px solid var(--gold-lt); outline-offset:3px; }
  #mtg-reg:checked ~ .map-ctrls label[for="mtg-reg"],
  #mtg-sea:checked ~ .map-ctrls label[for="mtg-sea"],
  #mtg-cit:checked ~ .map-ctrls label[for="mtg-cit"] { background:var(--gold-dk); color:#14100b; border-color:var(--gold-lt); }
  #mtg-reg:not(:checked) ~ .map-viewport .regions { opacity:0; visibility:hidden; }
  #mtg-sea:not(:checked) ~ .map-viewport .seas { opacity:0; visibility:hidden; }
  #mtg-cit:not(:checked) ~ .map-viewport .cities { opacity:0; visibility:hidden; pointer-events:none; }
  .mapspot { position:absolute; display:block; width:6px; height:6px; transform:translate(-50%,-50%);
    line-height:1; color:inherit; text-decoration:none; border-radius:50%; }
  /* Zone interactive de 44 px sans agrandir la pastille visuelle. */
  .mapspot::before { content:""; position:absolute; left:50%; top:50%;
    width:44px; height:44px; transform:translate(-50%,-50%); border-radius:50%; }
  .mapdot { display:block; width:6px; height:6px; border-radius:50%; background:var(--gold-lt);
    border:1px solid #2a1f12; box-shadow:0 0 3px #0009; transition:transform .12s; }
  .maplabel { position:absolute; left:50%; bottom:150%; transform:translateX(-50%); white-space:nowrap;
    font-family:var(--display); font-size:.72em; letter-spacing:.5px; color:var(--parch);
    background:#14100bf0; padding:2px 8px; border:1px solid var(--gold-dk); border-radius:3px;
    box-shadow:0 3px 10px #000a; opacity:0; pointer-events:none; transition:opacity .12s; }
  .mapspot:hover, .mapspot:focus-visible, .mapspot:focus-within { z-index:6; }
  .mapspot:hover .mapdot, .mapspot:focus-visible .mapdot, .mapspot:focus-within .mapdot { transform:scale(1.5); }
  .mapspot:hover .maplabel, .mapspot:focus-visible .maplabel, .mapspot:focus-within .maplabel { opacity:1; }
  .mapspot:focus-visible::before, .mapspot:focus-within::before {
    outline:3px solid var(--gold-lt); outline-offset:2px; }
  .map-directory { max-width:820px; margin:16px auto 0; border:1px solid var(--line);
    border-radius:8px; background:linear-gradient(180deg,var(--panel-1),var(--panel-2)); }
  .map-directory > summary { cursor:pointer; padding:12px 16px; color:var(--parch);
    font-family:var(--display); }
  .map-directory-cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:0 18px 16px; }
  .map-directory h3 { font-size:.9em; }
  .map-directory ul { columns:2; margin:0; padding-left:1.2em; }
  .map-directory li { break-inside:avoid; margin:.25em 0; }
  @media (max-width:620px) {
    .map-directory-cols { grid-template-columns:1fr; }
    .map-directory ul { columns:1; }
  }
  /* Figure detail page */
  .figure { display:flex; gap:28px; align-items:flex-start; }
  .figure-art { flex:0 0 240px; max-width:42%; }
  .figure-body { min-width:0; }
  .figure-body h1 { margin:.1em 0 0; }
  @media (max-width:560px) { .figure { flex-direction:column; } .figure-art { flex-basis:auto; max-width:100%; width:220px; } }
  .brand { font-family:var(--display-orn); font-size:1.16em; letter-spacing:1px; text-decoration:none; font-weight:700;
    color:var(--parch); text-shadow:0 1px 2px #000000b0; white-space:nowrap; }
  .brand:hover { color:#fff; }
  .nav-links { display:flex; gap:28px; margin-left:8px; }
  .nav-links a { font-family:var(--display); font-weight:600; text-decoration:none; color:var(--ink-soft); letter-spacing:.6px; font-size:.82em; }
  .nav-links a:hover { color:var(--gold-lt); }
  .nav-spacer { flex:1; }
  .nav-user { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);
    padding:5px 14px 5px 6px; border:1px solid var(--gold-dk); border-radius:3px;
    background:linear-gradient(180deg,#241f15,#181309); }
  .nav-user:hover { border-color:var(--gold); }
  .nav-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid var(--gold-dk); }
  /* Buttons — gilded raised / bordered */
  .btn { display:inline-block; padding:11px 22px; text-decoration:none; font-weight:700;
    font-family:var(--display); letter-spacing:.6px; cursor:pointer; font-size:.82em; white-space:nowrap;
    border-radius:3px; border:1px solid var(--gold-dk); color:var(--gold-lt);
    background:linear-gradient(180deg,#2a2416,#1a150c); transition:.15s; }
  .btn:hover { color:#fff; border-color:var(--gold); box-shadow:0 0 14px #d8b86933; }
  .btn-sm { padding:8px 15px; font-size:.9em; }
  .btn.lg { padding:14px 32px; font-size:1.1em; }
  .btn.primary { color:#f3e7d0; border-color:#3a1613;
    background:linear-gradient(180deg,#98392b,#722a20 60%,#5c221a);
    box-shadow:inset 0 1px 0 #ffffff22, inset 0 -2px 6px #00000060, 0 2px 10px #00000070; text-shadow:0 1px 1px #00000090; }
  .btn.primary:hover { color:#fff; border-color:var(--ember); box-shadow:inset 0 1px 0 #ffffff33, 0 0 20px #7c2b2255; }
  .btn.ghost { background:transparent; }
  .btn.danger { color:#e0a08a; border-color:var(--blood); background:linear-gradient(180deg,#2a1512,#180b09); }
  .btn.danger:hover { color:#fff; border-color:var(--ember); box-shadow:0 0 14px #8e2f2440; }
  .btn.disabled { opacity:.45; cursor:not-allowed; }
  /* Main = a lit column over the dark field */
  main { flex:1; width:100%; max-width:980px; margin-inline:auto; padding:8px clamp(16px,4vw,40px) 72px; }
  .section { padding:46px 0; position:relative; scroll-margin-top:76px; }
  .section + .section::before { content:"❖"; position:absolute; top:-2px; left:50%; transform:translateX(-50%);
    color:var(--gold-dk); font-size:1.1em; }
  .section + .section { border-top:1px solid #ffffff08; }
  .section-title { font-family:var(--display); font-size:1.32em; margin:0 0 10px; letter-spacing:1px; text-align:center;
    color:var(--parch); }
  .section-title::after { content:""; display:block; width:120px; height:14px; margin:10px auto 0;
    background:
      linear-gradient(90deg,transparent,var(--gold-dk) 42%,transparent 43%) center/100% 1px no-repeat,
      radial-gradient(circle at 50% 50%, var(--gold) 0 3px, transparent 4px); }
  /* Hero — dramatic frontispiece with a radial glow */
  .hero { text-align:center; padding:clamp(44px,8vw,92px) 0 40px; position:relative; }
  .crest { display:block; width:clamp(96px,15vw,138px); height:auto; margin:0 auto 20px;
    filter:drop-shadow(0 2px 3px #000) drop-shadow(0 0 22px #d8b8692e); }
  /* Regard de Xarnak : orbites braise en permanence ; le survol les INTENSIFIE. */
  .crest .eye { fill:var(--eye); transition:fill .4s ease; }
  .crest { transition:filter .45s ease; }
  .crest:hover { filter:drop-shadow(0 2px 3px #000) drop-shadow(0 0 22px #d8b8692e)
    drop-shadow(0 0 7px #c8352a88); }
  .crest:hover .eye { fill:#f14536; }
  /* Signal LIVE : pastille verte du Voile (seule dose de vert du site). */
  .live-dot { display:inline-block; width:.52em; height:.52em; border-radius:50%;
    background:var(--veil); box-shadow:0 0 7px var(--veil), 0 0 2px #fff8; margin-right:.55em;
    vertical-align:middle; animation:livepulse 1.9s ease-in-out infinite; }
  @keyframes livepulse { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
  @media (prefers-reduced-motion: reduce) { .live-dot { animation:none; } }
  /* Bandeau global « ON AIR » (rendu seulement quand la chaîne diffuse) —
     collé sous le topbar (60px), même registre vert du Voile. */
  .live-banner { display:flex; align-items:center; justify-content:center; gap:.55em;
    padding:7px 14px; text-decoration:none; position:sticky; top:60px; z-index:39;
    font-family:var(--display); font-size:.8em; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--veil);
    background:linear-gradient(90deg,#101c0d,#17270f 50%,#101c0d);
    border-bottom:1px solid #2c451f; box-shadow:0 4px 14px #00000040; }
  .live-banner:hover { color:#c9f2c2;
    background:linear-gradient(90deg,#132211,#1b2e13 50%,#132211); }
  .side-live { margin-left:auto; padding:2px 6px; border-radius:3px;
    font-family:var(--display); font-size:.62em; font-weight:700; letter-spacing:.14em;
    color:var(--veil); border:1px solid #2c451f; background:#101c0d;
    box-shadow:0 0 8px #8fd98a33; animation:livepulse 1.9s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .side-live { animation:none; } }
  /* ── Création de personnage façon RPG (/characters/new) ───────────── */
  .cc-chapter { display:flex; align-items:baseline; gap:12px; margin:34px 0 14px;
    border-bottom:1px solid var(--line); padding-bottom:8px; }
  .cc-chapter h2 { margin:0; font-size:1.15em; }
  .cc-step { font-family:var(--display-orn); color:var(--gold); font-size:1.05em;
    min-width:1.4em; text-align:center; text-shadow:0 1px 1px #000; }
  .cc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  /* fixed (pas absolute) : un radio absolute sans parent positionné s'ancre
     en haut de page, et le focus au clic sur la carte y fait défiler. */
  .cc-radio { position:fixed; width:1px; height:1px; opacity:0; pointer-events:none; }
  .cc-card { display:flex; flex-direction:column; gap:4px; padding:12px 12px 10px; cursor:pointer;
    border:1px solid var(--line); border-radius:8px; min-height:96px;
    background:linear-gradient(180deg,#221b12,#181209); transition:.15s;
    box-shadow:inset 0 1px 0 #ffffff08; }
  .cc-card:hover { border-color:var(--gold-dk); transform:translateY(-1px); }
  .cc-radio:checked + .cc-card { border-color:var(--gold);
    background:linear-gradient(180deg,#2c2213,#1d150a);
    box-shadow:0 0 0 1px var(--gold-dk), 0 4px 16px #00000060, inset 0 1px 0 #ffffff10; }
  .cc-radio:focus-visible + .cc-card { outline:2px solid var(--gold-lt); outline-offset:2px; }
  .cc-radio:disabled + .cc-card { opacity:.5; cursor:default; transform:none; }
  .cc-ico { font-size:1.5em; filter:drop-shadow(0 1px 1px #000); }
  .cc-name { font-family:var(--display); font-weight:600; color:var(--parch); letter-spacing:.04em; }
  .cc-flavor { font-size:.82em; color:var(--faint); line-height:1.35; }
  /* Portraits générés (PixArt) sur les cartes + aperçu du héros. */
  .cc-art { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:5px;
    border:1px solid #00000070; box-shadow:0 2px 8px #00000050; background:#0d0b08; }
  .cc-grid-2 { grid-template-columns:repeat(2,minmax(150px,230px)); justify-content:center; }
  .cc-portrait-wrap { display:flex; justify-content:center; margin-top:18px; }
  .cc-preview { width:min(340px,80vw); height:auto; border:1px solid var(--gold-dk);
    border-radius:10px; box-shadow:0 8px 30px #000000a0, 0 0 0 4px #00000040; }
  /* Wizard pas-à-pas (création) : rail + pages + navigation. Sans JS, la
     classe .cc-wizard n'est jamais posée → toutes les étapes restent visibles. */
  .cc-rail { display:flex; flex-wrap:wrap; gap:4px 16px; list-style:none;
    margin:16px 0 4px; padding:10px 14px; border:1px solid var(--line); border-radius:8px;
    background:linear-gradient(180deg,#1d1710,#151009); }
  .cc-rail-step { display:flex; align-items:center; gap:7px; cursor:pointer;
    font-family:var(--display); font-size:.78em; letter-spacing:.08em;
    color:var(--faint); text-transform:uppercase; padding:3px 2px; transition:.12s; }
  .cc-rail-step:hover { color:var(--ink-soft); }
  .cc-rail-dot { width:9px; height:9px; border-radius:50%; border:1px solid var(--gold-dk);
    background:transparent; transition:.12s; }
  .cc-rail-step.done { color:var(--ink-soft); }
  .cc-rail-step.done .cc-rail-dot { background:var(--gold-dk); }
  .cc-rail-step.active { color:var(--gold-lt); }
  .cc-rail-step.active .cc-rail-dot { background:var(--gold-lt);
    box-shadow:0 0 7px #c9ad7480; border-color:var(--gold-lt); }
  .cc-wizard .cc-page { display:none; }
  .cc-wizard .cc-page.active { display:block; animation:ccfade .22s ease; }
  @keyframes ccfade { from { opacity:0; transform:translateY(6px); } to { opacity:1; } }
  @media (prefers-reduced-motion: reduce) { .cc-wizard .cc-page.active { animation:none; } }
  .cc-nav { display:flex; gap:10px; margin-top:22px; }
  .cc-nav #cc-next, .cc-nav #cc-forge { margin-left:auto; }
  .cc-review { display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; margin:6px 0 14px; }
  .cc-summary { display:grid; gap:9px; margin:0; min-width:min(280px,100%); }
  .cc-summary dt { font-family:var(--display); font-size:.72em; letter-spacing:.14em;
    text-transform:uppercase; color:var(--gold); }
  .cc-summary dd { margin:1px 0 0; color:var(--parch); }
  .cc-view-portrait { float:right; width:min(220px,42vw); height:auto; margin:0 0 14px 18px;
    border:1px solid var(--gold-dk); border-radius:9px; box-shadow:0 6px 24px #00000090; }
  /* Deux colonnes : panneau de description (gauche, collant) + liste. */
  .cc-split { display:flex; gap:16px; align-items:flex-start; }
  .cc-split > .cc-info { flex:0 1 280px; min-width:210px; }
  .cc-split > .cc-abils, .cc-split > .cc-skill-col { flex:1; min-width:0; }
  .cc-info { position:sticky; top:74px; padding:14px 16px; border-radius:8px;
    border:1px solid var(--gold-dk);
    background:linear-gradient(180deg,#241d15,#181209);
    box-shadow:inset 0 1px 0 #ffffff08, 0 4px 14px #00000050; }
  .cc-info h4 { margin:0 0 7px; font-family:var(--display); color:var(--gold-lt);
    letter-spacing:.06em; display:flex; align-items:center; gap:8px; }
  .cc-info p { margin:0; font-size:.9em; color:var(--ink-soft); line-height:1.5; }
  .cc-info-key { font-style:normal; font-size:.72em; color:var(--faint);
    border:1px solid var(--line); border-radius:4px; padding:1px 6px; }
  .cc-info-tab { display:none; }
  @media (max-width: 700px) {
    .cc-split { flex-direction:column; }
    .cc-split > .cc-info { flex:none; width:100%; min-width:0; }
    .cc-info { position:static; }
    /* Création (wizard) : panneau FLOTTANT fermé par défaut + languette ⓘ
       sur le bord gauche pour l'ouvrir/fermer (pur CSS, case à cocher). */
    .cc-wizard .cc-info-tab { display:grid; place-items:center; position:fixed;
      left:0; top:34vh; z-index:60; width:32px; height:46px; cursor:pointer;
      border:1px solid var(--gold-dk); border-left:none; border-radius:0 9px 9px 0;
      background:linear-gradient(180deg,#241d15,#181209); color:var(--gold-lt);
      box-shadow:2px 2px 12px #00000070; }
    .cc-wizard .cc-info-tab::after { content:'ⓘ'; font-size:1.05em; }
    .cc-wizard .cc-info-toggle:checked ~ .cc-info-tab::after { content:'✕'; }
    .cc-wizard .cc-split > .cc-info { position:fixed; left:10px; top:calc(34vh + 54px);
      width:min(80vw,320px); max-height:44vh; overflow:auto; z-index:59;
      transform:translateX(calc(-100% - 24px)); transition:transform .22s ease;
      box-shadow:0 10px 34px #000000c0; }
    .cc-wizard .cc-info-toggle:checked ~ .cc-info { transform:none; }
  }
  .cc-abils { display:flex; flex-direction:column; gap:8px; }
  .cc-abil { display:grid; grid-template-columns:minmax(110px,1fr) 86px auto;
    gap:10px; align-items:center; cursor:pointer;
    padding:10px 12px; border:1px solid var(--line); border-radius:8px;
    background:linear-gradient(180deg,#201a11,#171108); transition:.12s; }
  .cc-abil:hover { border-color:var(--gold-dk); }
  .cc-abil label { font-family:var(--display); font-size:.78em;
    letter-spacing:.14em; color:var(--gold-lt); cursor:pointer; }
  .cc-abil.sel, .cc-skill.sel { border-color:var(--gold);
    box-shadow:0 0 0 1px var(--gold-dk), inset 0 1px 0 #ffffff10; }
  .cc-skill-col { display:flex; flex-direction:column; gap:8px; }
  .cc-mod { font-family:var(--display); color:var(--parch); background:#00000040;
    border:1px solid var(--line); border-radius:5px; padding:2px 7px;
    min-width:2.4em; text-align:center; }
  .cc-tools { display:flex; align-items:center; gap:10px; margin:12px 0 2px; flex-wrap:wrap; }
  .cc-sub { font-family:var(--display); font-size:.92em; letter-spacing:.1em;
    text-transform:uppercase; color:var(--gold-lt); margin:22px 0 10px;
    padding-bottom:6px; border-bottom:1px solid var(--line); }
  .cc-vitals { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .cc-vital { display:flex; flex-direction:column; gap:4px; padding:10px 12px;
    border:1px solid var(--line); border-radius:8px;
    background:linear-gradient(180deg,#201a11,#171108); }
  .cc-vital label { font-family:var(--display); font-size:.78em; letter-spacing:.14em;
    color:var(--gold-lt); text-transform:uppercase; }
  .cc-vital-hint { font-size:.78em; color:var(--faint); line-height:1.3; }
  .cc-derived-val { font-family:var(--display); font-size:1.45em; font-weight:600;
    color:var(--parch); text-shadow:0 1px 1px #000; }
  /* Étape Training : chips de sauvegarde, cases de compétences, cap visuel. */
  .cc-chips { display:flex; gap:8px; flex-wrap:wrap; }
  .cc-chip { font-family:var(--display); font-size:.8em; letter-spacing:.1em;
    color:var(--gold-lt); border:1px solid var(--gold-dk); border-radius:5px;
    padding:4px 10px; background:#00000030; }
  .cc-skill-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; }
  .cc-skill { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer;
    border:1px solid var(--line); border-radius:6px;
    background:linear-gradient(180deg,#1e1810,#15110b); transition:.12s; font-size:.92em; }
  .cc-skill:hover { border-color:var(--gold-dk); }
  .cc-skill:has(input:checked) { border-color:var(--gold); color:var(--parch);
    background:linear-gradient(180deg,#2a2013,#1a140d); }
  .cc-skill em { font-style:normal; font-size:.78em; color:var(--faint); margin-left:auto; }
  .cc-skill.off { opacity:.35; pointer-events:none; }
  .cc-skill input { accent-color:#a98a4e; }
  #cc-skill-count.over { color:#e08f6a; }
  .cc-racial { margin-left:6px; font-size:.85em; color:var(--veil); font-weight:700; }
  /* Cartes de sorts (Spellbook création) : icône d'école + nom + école. */
  .cc-spell-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
  .cc-spell { display:flex; align-items:center; gap:10px; padding:9px 11px; cursor:pointer;
    border:1px solid var(--line); border-radius:6px;
    background:linear-gradient(180deg,#1e1810,#15110b); transition:.12s; font-size:.92em; }
  .cc-spell:hover { border-color:var(--gold-dk); }
  .cc-spell:has(input:checked) { border-color:var(--gold); background:linear-gradient(180deg,#2a2013,#1a140d); }
  .cc-spell input { accent-color:#a98a4e; }
  .cc-spell-ico { font-size:1.25em; filter:drop-shadow(0 1px 1px #000); }
  .cc-spell-body { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
  .cc-spell-body b { color:var(--parch); font-weight:600; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .cc-spell-body em { font-style:normal; font-size:.76em; color:var(--faint); }
  #cc-cant-count.over, #cc-l1-count.over { color:#e08f6a; }
  .cc-spell-info { margin-left:auto; flex:0 0 auto; width:24px; height:24px;
    border:1px solid var(--line); border-radius:50%; cursor:pointer;
    background:#00000030; color:var(--faint); font-size:.8em; line-height:1;
    display:grid; place-items:center; transition:.12s; }
  .cc-spell-info:hover { color:var(--gold-lt); border-color:var(--gold-dk); }
  /* Modal de fiche de sort (clic droit / ⓘ). */
  .cc-modal { position:fixed; inset:0; z-index:80; display:grid; place-items:center; }
  .cc-modal[hidden] { display:none; } /* display:grid écraserait le hidden natif */
  .cc-modal-bg { position:absolute; inset:0; background:#000000b8;
    backdrop-filter:blur(3px); cursor:pointer; }
  .cc-modal-card { position:relative; width:min(560px,92vw); max-height:84vh;
    overflow:auto; padding:20px 22px; border-radius:10px;
    border:1px solid var(--gold-dk);
    background:linear-gradient(180deg,#241d15,#161009);
    box-shadow:0 18px 60px #000000d0, inset 0 1px 0 #ffffff0a; }
  .cc-mo-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
  .cc-mo-ico { font-size:1.9em; filter:drop-shadow(0 1px 2px #000); }
  .cc-mo-titles h3 { margin:0; font-family:var(--display); color:var(--parch);
    letter-spacing:.04em; }
  .cc-mo-close { margin-left:auto; width:30px; height:30px; cursor:pointer;
    border:1px solid var(--line); border-radius:5px; background:#00000030;
    color:var(--ink-soft); display:grid; place-items:center; }
  .cc-mo-close:hover { color:var(--parch); border-color:var(--gold-dk); }
  .cc-mo-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
  .cc-mo-effect { margin:0 0 12px; padding:9px 12px; border-radius:6px;
    border:1px solid var(--gold-dk); background:#00000035;
    font-family:var(--display); font-size:.9em; color:var(--gold-lt); }
  .cc-mo-desc { margin:0; color:var(--ink-soft); line-height:1.55;
    white-space:pre-line; font-size:.94em; }
  .cc-mo-up { margin:12px 0 0; font-style:italic; }
  .cc-grid-3 { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
  /* Galerie « skin & hair » : cartes image seules, plus compactes. */
  .cc-grid-sm { grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
  .cc-grid-pv { grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:9px; }
  .cc-grid-in-split { flex:1; min-width:0; }
  /* Toast discret (bas d'écran). */
  #cc-toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
    z-index:90; max-width:min(92vw,480px); padding:11px 18px; border-radius:8px;
    border:1px solid var(--gold-dk); background:linear-gradient(180deg,#241d15,#161009);
    color:var(--parch); font-size:.92em; box-shadow:0 12px 40px #000000c0;
    opacity:0; pointer-events:none; transition:.22s; }
  #cc-toast.show { opacity:1; transform:translate(-50%,0); }
  /* Erreur d'étape (wizard). */
  .cc-step-err { margin:14px 0 0; padding:9px 13px; border-radius:6px;
    border:1px solid #7c2b22; background:#2a120d; color:#e8a08f; font-size:.92em; }
  /* Ligne Nom + dé. */
  .cc-name-row { display:flex; gap:10px; align-items:flex-end; }
  .cc-dice { flex:0 0 auto; font-size:1.1em; }
  /* Lignes de règles dans les panneaux Origin/Calling. */
  .cc-info-line { margin:9px 0 0 !important; font-size:.84em !important;
    color:var(--faint) !important; }
  .cc-info-line b { color:var(--gold-lt); font-weight:600; }
  /* Encart funnel post-création (fiche). */
  .cc-join-callout { display:flex; align-items:center; gap:14px; margin:14px 0 18px;
    padding:14px 18px; border-radius:9px; border:1px solid var(--gold-dk);
    background:linear-gradient(90deg,#241d15,#1a150f);
    box-shadow:inset 0 1px 0 #ffffff08, 0 4px 16px #00000050; font-size:.96em; }
  .cc-join-callout > .btn { margin-left:auto; flex:0 0 auto; }
  .cc-hook { margin:2px 0 14px; font-style:italic; color:var(--ink-soft);
    border-left:3px solid var(--gold-dk); padding-left:12px; }
  /* Inventaire en grille de jeu : tuiles Équipé / Sac. */
  .inv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:8px; margin:10px 0 18px; }
  .inv-item { position:relative; display:flex; flex-direction:row; align-items:center;
    gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
    background:linear-gradient(180deg,#1e1810,#15110b);
    box-shadow:inset 0 1px 0 #ffffff08; transition:.12s; }
  .inv-item:hover { border-color:var(--gold-dk); }
  .inv-item.equipped { border-color:var(--gold);
    background:linear-gradient(180deg,#2a2013,#1a140d);
    box-shadow:0 0 0 1px var(--gold-dk), inset 0 1px 0 #ffffff10; }
  .inv-item.equipped::after { content:'EQUIPPED'; position:absolute; top:8px; right:9px;
    font-family:var(--display); font-size:.56em; letter-spacing:.14em;
    color:var(--gold-lt); }
  .inv-ico { font-size:1.6em; filter:drop-shadow(0 1px 1px #000); }
  .inv-img { width:52px; height:52px; flex:0 0 auto; object-fit:cover;
    border-radius:6px; border:1px solid #00000070; background:#0d0b08;
    box-shadow:0 2px 8px #00000050; }
  .inv-name { flex:1; min-width:0; font-family:var(--display); font-size:.84em;
    color:var(--parch); letter-spacing:.03em; line-height:1.3; }
  .inv-qty { font-size:.78em; color:var(--faint); font-weight:600; flex:0 0 auto; }
  .inv-charges { font-size:.78em; color:var(--veil); flex:0 0 auto; }
  .inv-act { flex:0 0 auto; margin-left:2px; }
  .inv-act .btn { padding:4px 10px; font-size:.8em; }
  /* Paper-doll : portrait au centre, une case par emplacement autour du
     corps (casque en haut, bottes en bas, mains sur les côtés…). */
  .doll { display:grid; gap:10px; margin:14px 0 22px; max-width:600px;
    grid-template-columns:88px 1fr 1fr 88px;
    grid-template-areas:
      ".      head   head   .    "
      "amulet doll   doll   cloak"
      "main   doll   doll   off  "
      "ring1  doll   doll   ring2"
      "ranged doll   doll   ammo "
      "hands  armor  belt   boots"; }
  .doll-portrait { grid-area:doll; border:1px solid var(--gold-dk); border-radius:10px;
    overflow:hidden; background:#0d0b08; box-shadow:0 8px 30px #00000090; }
  .doll-portrait img { width:100%; height:100%; object-fit:cover; display:block; }
  .doll-slot { position:relative; width:88px; justify-self:center; padding:0; margin:0;
    display:flex; flex-direction:column; align-items:center; gap:3px; }
  .doll-slot[style*="head"], .doll-slot[style*="armor"], .doll-slot[style*="belt"]
    { justify-self:center; }
  .doll-slot button { all:unset; cursor:pointer; display:block; width:88px; height:88px;
    border:1px solid var(--gold); border-radius:9px; overflow:hidden;
    background:#15110b; box-shadow:0 0 0 1px var(--gold-dk), 0 3px 10px #00000070;
    transition:.12s; position:relative; }
  .doll-slot button:hover { filter:brightness(1.15); }
  .doll-slot button:disabled { cursor:default; filter:none; }
  .doll-slot button img { width:100%; height:100%; object-fit:cover; display:block; }
  .doll-slot .doll-ph { width:88px; height:88px; object-fit:cover; border-radius:9px;
    border:1px dashed var(--line); opacity:.28; filter:grayscale(.6); background:#0d0b08; }
  .doll-cap { font-family:var(--display); font-size:.58em; letter-spacing:.14em;
    text-transform:uppercase; color:var(--faint); white-space:nowrap; }
  .doll-slot.filled .doll-cap { color:var(--gold-lt); }
  .doll-qty { position:absolute; right:4px; bottom:3px; font-size:.72em; font-weight:700;
    color:var(--parch); text-shadow:0 1px 2px #000, 0 0 4px #000; pointer-events:none; }
  /* Drag & drop : cibles compatibles illuminées, objet saisi estompé. */
  .dragging { opacity:.45; }
  .doll-slot.drop-ok .doll-ph, .doll-slot.drop-ok button {
    border-color:var(--veil); border-style:solid; opacity:1;
    box-shadow:0 0 0 2px #8fd98a55, 0 0 16px #8fd98a44; }
  #inv-backpack.drop-ok { outline:2px dashed var(--veil); outline-offset:6px;
    border-radius:8px; }
  [data-drag-item] { cursor:grab; }
  [data-drag-item].dragging { cursor:grabbing; }
  /* Vitals de la fiche : barres PV/XP + chips de table. */
  .vt { display:flex; flex-direction:column; gap:9px; margin:14px 0 8px; max-width:640px; }
  .vt-row { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; }
  .vt-cap { font-family:var(--display); font-size:.72em; letter-spacing:.16em; color:var(--gold); }
  .vt-bar { height:14px; border-radius:7px; border:1px solid var(--line);
    background:#0d0b08; overflow:hidden; box-shadow:inset 0 1px 3px #000000a0; }
  .vt-fill { height:100%; border-radius:6px; transition:width .3s; }
  .vt-fill.hp { background:linear-gradient(90deg,#3f7d3a,#8fd98a); }
  .vt-fill.hp.mid { background:linear-gradient(90deg,#8a6420,#d9b45a); }
  .vt-fill.hp.low { background:linear-gradient(90deg,#7c2b22,#c8352a); }
  .vt-fill.xp { background:linear-gradient(90deg,#6f5527,#c9ad74); }
  .vt-val { font-size:.85em; color:var(--ink-soft); white-space:nowrap; }
  .vt-chips { margin-top:3px; }
  .vt-wallet { display:flex; align-items:center; gap:9px; margin:8px 0 0;
    color:var(--ink-soft); font-size:.94em; }
  .vt-wallet img { width:30px; height:30px; border-radius:5px; border:1px solid var(--line); }
  .vt-wallet b { color:var(--gold-lt); }
  .cc-chip.cond { color:#e8a08f; border-color:#7c2b22; background:#2a120d; }
  .vt-conds { margin-top:8px; }
  /* Chronique du héros. */
  .xp-log { list-style:none; margin:6px 0 0; padding:0; display:flex;
    flex-direction:column; gap:6px; }
  .xp-log li { padding:8px 12px; border:1px solid var(--line); border-radius:7px;
    background:linear-gradient(180deg,#1c1610,#141009); font-size:.93em; }
  .xp-log b { color:var(--veil); }
  /* Danger zone + mémorial. */
  .danger-zone { margin-top:34px; padding-top:8px; border-top:1px solid #7c2b2255; }
  .fallen-note { border-color:#7c2b22; }
  .live-note { border-color:#2c451f; }
  .fallen .doll-portrait img, .doll-portrait.fallen img { filter:grayscale(1) brightness(.7); }
  /* Liste des personnages : vignette de portrait par ligne. */
  .row-portrait { width:52px; height:52px; flex:0 0 auto; object-fit:cover;
    border-radius:8px; border:1px solid var(--gold-dk);
    box-shadow:0 2px 8px #00000060; background:#0d0b08; }
  .row-portrait.fallen { filter:grayscale(1) brightness(.7); }
  /* Onglets de la fiche (pur CSS, radios). */
  .tabs > input[name=cc-tab] { position:absolute; opacity:0; pointer-events:none; }
  .tab-bar { display:flex; gap:6px; border-bottom:1px solid var(--line);
    margin:22px 0 0; }
  .tab-bar label { padding:9px 20px; cursor:pointer; font-family:var(--display);
    letter-spacing:.07em; font-size:.92em; color:var(--ink-soft);
    border:1px solid transparent; border-bottom:none; border-radius:7px 7px 0 0;
    transition:.12s; position:relative; top:1px; }
  .tab-bar label:hover { color:var(--parch); }
  #tab-stats:checked ~ .tab-bar label[for="tab-stats"],
  #tab-inv:checked ~ .tab-bar label[for="tab-inv"],
  #tab-hist:checked ~ .tab-bar label[for="tab-hist"] {
    color:var(--gold-lt); border-color:var(--line);
    background:linear-gradient(180deg,#241d15,#1a150f);
    border-bottom:1px solid #1f1810; }
  .tab-panel { display:none; padding-top:20px; }
  #tab-stats:checked ~ #panel-stats,
  #tab-inv:checked ~ #panel-inv,
  #tab-hist:checked ~ #panel-hist { display:block; }
  /* Onglet Character : portrait + caracs côte à côte, compétences en lignes. */
  .char-head { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-bottom:6px; }
  .char-side { display:flex; flex-direction:column; gap:10px; flex:0 0 auto; }
  .char-portrait { width:min(220px,60vw); height:auto; border:1px solid var(--gold-dk);
    border-radius:10px; box-shadow:0 8px 30px #00000090; }
  .char-portrait.fallen { filter:grayscale(1) brightness(.7); }
  .char-abilities { flex:1; min-width:min(300px,100%); }
  .skill-rows { display:flex; flex-direction:column; gap:8px; }
  .skill-row { display:grid; grid-template-columns:minmax(190px,240px) 1fr; gap:14px;
    align-items:baseline; padding:9px 13px; border:1px solid var(--line); border-radius:7px;
    background:linear-gradient(180deg,#1c1610,#141009); }
  .skill-head { display:flex; align-items:baseline; gap:8px; }
  .skill-head b { color:var(--parch); font-family:var(--display); font-size:.92em; }
  .skill-head em { font-style:normal; font-size:.74em; color:var(--faint); }
  .skill-bonus { margin-left:auto; font-family:var(--display); color:var(--gold-lt); font-weight:700; }
  .skill-desc { margin:0; font-size:.87em; color:var(--ink-soft); line-height:1.45; }
  @media (max-width: 640px) {
    .skill-row { grid-template-columns:1fr; gap:4px; }
  }
  @media (max-width: 560px) {
    .doll { grid-template-columns:64px 1fr 1fr 64px; gap:7px; }
    .doll-slot, .doll-slot button, .doll-slot .doll-ph { width:64px; }
    .doll-slot button, .doll-slot .doll-ph { height:64px; }
    .doll-cap { font-size:.5em; }
  }
  .cc-summary div[data-step] { cursor:pointer; border-radius:5px; padding:2px 6px; margin:-2px -6px; }
  .cc-summary div[data-step]:hover { background:#ffffff0a; }
  .cc-card-img { padding:6px; min-height:0; gap:0; }
  /* Boutons de genre (étape Identity) : pilules à icône, sans portrait. */
  .cc-gender-row { display:flex; gap:10px; margin-top:14px; }
  .cc-gbtn { display:flex; align-items:center; gap:9px; padding:10px 20px; cursor:pointer;
    border:1px solid var(--line); border-radius:8px; color:var(--ink-soft);
    background:linear-gradient(180deg,#1e1810,#15110b); transition:.12s;
    font-family:var(--display); letter-spacing:.06em; }
  .cc-gbtn:hover { border-color:var(--gold-dk); color:var(--parch); }
  .cc-gico { font-size:1.25em; color:var(--gold-lt); }
  .cc-radio:checked + .cc-gbtn { border-color:var(--gold); color:var(--parch);
    background:linear-gradient(180deg,#2c2213,#1d150a);
    box-shadow:0 0 0 1px var(--gold-dk), inset 0 1px 0 #ffffff10; }
  .cc-radio:focus-visible + .cc-gbtn { outline:2px solid var(--gold-lt); outline-offset:2px; }
  .cc-radio:disabled + .cc-gbtn { opacity:.5; cursor:default; }
  .cc-points { font-family:var(--display); font-size:.85em; letter-spacing:.06em;
    color:var(--ink-soft); border:1px solid var(--line); border-radius:5px;
    padding:4px 9px; background:#00000030; }
  .cc-points.over { color:#e08f6a; border-color:#7c2b22; }
  /* ── /chronicle — le canon du show ─────────────────────────────────── */
  .chron-empty { color:var(--faint); font-style:italic; }
  .memorial { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
  .memorial li { padding:14px 18px; border:1px solid var(--line); border-radius:6px;
    background:linear-gradient(180deg,#1d1710,#151009);
    font-family:var(--display); font-size:.92em; letter-spacing:.04em; color:var(--parch);
    box-shadow:inset 0 1px 0 #ffffff0a, 0 2px 8px #00000050;
    border-top:2px solid var(--gold-dk); text-align:center; }
  .errcode { font-family:var(--display-orn); font-size:clamp(4.5em,17vw,9em); line-height:.9; margin-bottom:2px;
    color:var(--gold-dk); text-shadow:0 2px 2px #000, 0 0 44px #d8b86920; }
  .hero::before { content:""; position:absolute; inset:-10% -20% auto; height:340px; z-index:-1;
    background:radial-gradient(60% 100% at 50% 30%, #b3803514, transparent 70%); }
  .eyebrow { font-family:var(--display); color:var(--faint); letter-spacing:.2em; font-size:.72em; margin:0 0 16px; }
  .eyebrow::before, .eyebrow::after { content:"✦"; color:var(--gold); margin:0 12px; }
  .hero h1 { font-family:var(--display-orn); font-size:clamp(2.2em,7vw,4.1em); margin:0; line-height:1.12; letter-spacing:.5px;
    color:var(--parch);
    text-shadow:0 2px 1px #000000cc, 0 1px 0 #6f552733, 0 0 30px #00000080; }
  .lead { color:var(--ink-soft); font-size:clamp(1.08em,2.4vw,1.3em); font-style:italic; max-width:660px; margin:22px auto 0; }
  .cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px; }
  .dropcap::first-letter { float:left; font-size:3.4em; line-height:.8; padding:6px 12px 0 0;
    color:var(--gold); filter:drop-shadow(0 1px 1px #000); font-weight:700; }
  /* Feature panels — carved stone with gilt inner frame + corner studs */
  .grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:30px; }
  .feature { position:relative; padding:26px 24px 28px; border-radius:4px;
    background:linear-gradient(180deg,var(--panel-1),var(--panel-2));
    border:1px solid var(--line);
    box-shadow:inset 0 1px 0 #ffffff0c, inset 0 0 40px #00000060, 0 12px 30px #00000070; }
  .feature::before { content:""; position:absolute; inset:7px; border:1px solid #6a52284d; border-radius:3px; pointer-events:none; }
  .feature::after { content:""; position:absolute; top:3px; left:3px; right:3px; height:1px;
    background:linear-gradient(90deg,transparent,var(--gold-dk),transparent); }
  .ficon { font-size:1.9em; filter:drop-shadow(0 2px 3px #000); }
  .feature h3 { font-family:var(--display); margin:10px 0 8px; font-size:1.02em; letter-spacing:.5px; color:var(--parch); }
  .feature p { color:var(--ink-soft); margin:0; font-size:.98em; }
  /* Band CTA — a gilded reliquary strip */
  .band { position:relative; padding:30px clamp(22px,4vw,44px); border-radius:4px;
    background:linear-gradient(135deg,#251a10,#140f0a);
    border:1px solid var(--gold-dk);
    box-shadow:inset 0 1px 0 #ffffff10, inset 0 0 50px #00000070, 0 10px 30px #00000080; }
  .band-inner { display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap; }
  .band-cta { display:flex; gap:10px; flex-wrap:wrap; }
  /* Variante CENTRÉE du bandeau : titre et boutons empilés au milieu. Classe
     dédiée plutôt que changement du défaut — /legends et /achievements
     utilisent la disposition texte-à-gauche / boutons-à-droite. */
  .band-inner.stack { flex-direction:column; text-align:center; }
  .band-inner.stack .band-cta { justify-content:center; }
  /* Account / lists — ledger rows */
  .account-head { display:flex; align-items:center; gap:16px; margin:26px 0 10px; }
  .avatar { width:76px; height:76px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-dk); box-shadow:0 0 0 1px #000, 0 4px 12px #000a; }
  .list { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
  .row { display:flex; justify-content:space-between; align-items:center; gap:12px; text-decoration:none; color:var(--ink);
    background:linear-gradient(180deg,var(--panel-1),var(--panel-2)); border:1px solid var(--line);
    padding:14px 18px; border-radius:4px; box-shadow:inset 0 1px 0 #ffffff08; }
  .row:hover { border-color:var(--gold-dk); box-shadow:inset 0 1px 0 #ffffff10, 0 0 14px #00000060; }
  .row-main { flex:1; min-width:0; }
  .list-actions { margin:2px 0 14px; }
  .row-hp { color:var(--ink-soft); font-size:.92em; white-space:nowrap; }
  .empty { text-align:center; border:1px dashed var(--line); border-radius:4px; padding:40px 24px; margin-top:22px;
    background:linear-gradient(180deg,#17130c,#100d08); display:flex; flex-direction:column; gap:16px; align-items:center; }
  .head-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
  .actions-row { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
  .badge { font-size:.72em; padding:2px 9px; border-radius:3px; vertical-align:middle; font-variant:small-caps; border:1px solid var(--gold-dk); color:var(--gold-lt); background:#00000040; }
  .badge.dead { color:#e0a08a; border-color:var(--blood); }
  /* Sheet bits */
  .stats { display:flex; gap:12px; margin:16px 0; flex-wrap:wrap; }
  .stat { background:linear-gradient(180deg,var(--panel-1),var(--panel-2)); border:1px solid var(--line); border-radius:4px; padding:12px 20px; text-align:center; }
  .stat .big { font-size:1.6em; font-weight:700; color:var(--parch); }
  .abilities { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
  .abil { background:linear-gradient(180deg,var(--panel-1),var(--panel-2)); border:1px solid var(--line); border-radius:4px; padding:10px 4px; text-align:center; }
  .abil-name { color:var(--faint); font-size:.75em; font-variant:small-caps; } .abil-score { font-size:1.35em; font-weight:700; color:var(--ink); }
  .abil-mod { color:var(--gold); font-size:.85em; }
  pre.json, textarea.json { background:#0c0a07; border:1px solid var(--line); border-radius:4px;
    padding:12px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85em; color:var(--ink-soft); overflow:auto; width:100%; }
  .sheet-form { display:flex; flex-direction:column; gap:14px; margin-top:16px; }
  .sheet-form label { display:flex; flex-direction:column; gap:4px; font-size:.9em; color:var(--ink-soft); font-variant:small-caps; }
  .sheet-form input, .sheet-form select, .sheet-form textarea {
    background:#0e0c08; color:var(--ink); border:1px solid var(--line); border-radius:3px; padding:9px 11px; font-size:1em; font-family:inherit; }
  .sheet-form input:focus, .sheet-form select:focus, .sheet-form textarea:focus {
    border-color:var(--gold-dk); box-shadow:0 0 0 2px #d8b86922; }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  fieldset { border:1px solid var(--line); border-radius:4px; }
  legend { color:var(--faint); font-size:.85em; padding:0 6px; font-variant:small-caps; }
  .errors { background:#1e0f0c; border:1px solid var(--blood); border-radius:4px; padding:12px 16px; color:#e8c0b0; }
  .errors ul { margin:.3em 0 0; padding-left:1.2em; }
  /* Footer — colophon spanning the content column (never under the rail) */
  footer.site { width:100%; padding:22px clamp(16px,4vw,40px);
    display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:var(--faint);
    border-top:1px solid var(--line); }
  .socials { display:flex; gap:12px; }
  .soc { display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
    border:1px solid var(--line); color:var(--ink-soft); text-decoration:none;
    background:linear-gradient(180deg,#1a160f,#100d08); transition:.15s; }
  .soc:hover { color:var(--gold-lt); border-color:var(--gold); box-shadow:0 0 12px #d8b86933; }
  .soc.off { opacity:.3; cursor:default; }
  .soc.off:hover { color:var(--ink-soft); border-color:var(--line); box-shadow:none; }
  /* Desktop: the ☰ button collapses/expands the rail (default = shown). */
  @media (min-width:861px) {
    body.sidebar-collapsed .layout { grid-template-columns:minmax(0,1fr); }
    body.sidebar-collapsed .sidebar { display:none; }
  }
  @media (max-width:860px) {
    .layout { display:block; }
    .sidebar { position:fixed; top:60px; left:0; z-index:36; width:270px; height:calc(100vh - 60px);
      transform:translateX(-100%); transition:transform .22s ease; box-shadow:10px 0 40px #000c; }
    .scrim { position:fixed; inset:60px 0 0 0; z-index:35; background:#000000a6; }
    body.nav-open { overflow:hidden; }
    body.nav-open .layout .sidebar { transform:translateX(0); }
    body.nav-open .layout .scrim { display:block; }
  }
  /* Avoid fixed-background repaints and unnecessary compositing on constrained
     touch/mobile devices. The surfaces remain opaque enough without blur. */
  @media (max-width:860px), (hover:none), (pointer:coarse) {
    body { background-attachment:scroll; }
    header.topbar { -webkit-backdrop-filter:none; backdrop-filter:none; }
    dialog.search-modal::backdrop { -webkit-backdrop-filter:none; backdrop-filter:none; }
    .map-zoom { will-change:auto; }
  }
  @media (hover:none), (pointer:coarse) {
    .map-viewport { touch-action:pan-y pinch-zoom; }
  }
  /* Phones : the bar was too wide. Drop the inline search box AND the login /
     account button; leave a single 🔍 icon that opens the search modal. Login
     stays reachable from the ☰ drawer. */
  @media (max-width:640px) {
    header.topbar .search { display:none; }
    .topbar-right { display:none; }
    .search-btn { display:grid; place-items:center; flex:0 0 auto; margin-left:auto;
      width:44px; height:44px; cursor:pointer; font-size:1.05em; text-decoration:none;
      border:1px solid var(--line); border-radius:4px; color:var(--gold-lt);
      background:linear-gradient(180deg,#1e1810,#15110b); }
    .search-btn:hover { border-color:var(--gold-dk); color:#fff; }
    .top-watch-wide { display:none; }
    .top-watch-short { display:inline; }
    .top-watch { padding-inline:14px; }
  }
  @media (max-width:620px) { .grid2 { grid-template-columns:1fr; }
    footer.site { flex-direction:column-reverse; text-align:center; } }
  @media (max-width:460px) {
    header.topbar { gap:8px; padding-inline:8px; }
    .brand-name { display:none; }
    .brand-crest { width:26px; height:26px; }
  }

  /* ===== Le Décompte (/chronicle) — un CHIFFRE, plus une liste de noms =====
     Le mémorial supposait des héros différents ; avec un protagoniste unique
     qui revient, seul le total porte du sens. */
  .toll { text-align:center; padding:26px 18px;
    background:linear-gradient(180deg,#1b1610,#151009);
    border:1px solid var(--gold-dk); border-radius:10px; }
  .toll-n { font-family:var(--display); font-size:clamp(46px,9vw,78px); line-height:1;
    color:var(--gold-lt); text-shadow:0 2px 18px #00000090; }
  .toll-lead { max-width:44ch; margin:12px auto 0; color:var(--ink-soft); }
  .toll-last { margin:10px 0 0; color:var(--faint); font-style:italic; font-size:.92em; }

  /* ===== Hall of Legends (/legends) — les MOMENTS, plus le classement XP ===== */
  /* Une chronologie, pas un tableau : on relit des instants, on ne compare
     pas des scores. Regroupée par jour de show, la soirée étant l'unité du
     récit pour qui a suivi le direct. */
  .lg-list { max-width:760px; margin:0 auto; }
  .lg-day { font-family:var(--display); font-size:.78em; letter-spacing:.16em;
    text-transform:uppercase; color:var(--faint); margin:26px 0 10px;
    padding-bottom:6px; border-bottom:1px solid var(--gold-dk); }
  .lg-day:first-child { margin-top:0; }
  .lg-row { display:flex; gap:14px; align-items:flex-start; padding:11px 14px;
    background:linear-gradient(180deg,#1b1610,#151009);
    border:1px solid rgba(111,85,39,.34); border-radius:10px; margin-bottom:8px; }
  .lg-icon { font-size:1.35em; line-height:1.2; flex:0 0 auto; }
  .lg-body { min-width:0; }
  .lg-text { margin:0; color:var(--ink); line-height:1.45; }
  .lg-text b { color:var(--gold-lt); font-weight:600; }
  /* La catégorie est une ÉTIQUETTE de lecture, pas une information de premier
     plan : discrète sous la phrase, jamais en concurrence avec elle. */
  .lg-cat { margin:3px 0 0; font-family:var(--display); font-size:.66em;
    letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }
  @media (max-width:620px) { .lg-row { padding:10px 11px; gap:10px; } }

  /* ===== « Last session » (/account) ===== */
  .since-card { margin:18px 0 26px; padding:16px 18px; border-radius:12px;
    border:1px solid var(--gold-dk);
    background:linear-gradient(180deg,#1d1710,#161109); }
  .since-head { font-family:var(--display); letter-spacing:.06em;
    color:var(--gold-lt); margin-bottom:6px; }
  .since-recap { margin:.35em 0 .6em; color:var(--ink-soft); }
  .since-chips { margin-top:4px; }
  .since-chip { text-decoration:none; }
  .since-chip:hover { border-color:var(--gold-lt); color:var(--gold-lt); }

  /* ===== Badge « à la table » (fiche, poll live) ===== */
  .vt-table-badge { display:inline-block; font-family:var(--display);
    font-size:.7em; letter-spacing:.14em; text-transform:uppercase;
    color:#ffd9d3; background:#3a1410; border:1px solid #7c2b22;
    border-radius:999px; padding:3px 10px; margin-bottom:8px;
    animation:vtpulse 2.2s ease-in-out infinite; }
  @keyframes vtpulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }
  @media (prefers-reduced-motion:reduce) { .vt-table-badge { animation:none; } }

  /* ===== Table Record (/chronicle) ===== */
  .tr-list { list-style:none; margin:14px 0 0; padding:14px 16px; border-radius:12px;
    border:1px solid var(--gold-dk); background:linear-gradient(180deg,#1b1610,#151009); }
  .tr-line { padding:5px 0; border-bottom:1px solid rgba(111,85,39,.22);
    font-size:.95em; color:var(--ink-soft); }
  .tr-line:last-child { border-bottom:none; }
  .tr-line b { color:var(--ink); }
  .tr-turn { display:inline-block; min-width:2.6em; margin-right:8px;
    font-family:var(--display); font-size:.72em; letter-spacing:.08em;
    color:var(--faint); }
  .tr-ok { color:#9fd8a6; }
  .tr-ko { color:#e8a08f; }

  /* ===== Living Archive (/codex/lore) ===== */
  .arch-grid .arch-card h3 { margin:.1em 0 .3em; font-size:1.02em; }
  .arch-card p { margin:0; font-size:.9em; color:var(--ink-soft); }
  .arch-door { border-color:var(--gold); box-shadow:0 0 18px rgba(169,138,78,.12) inset; }
  .sealed-note { margin:0 0 22px; padding:12px 16px; border-radius:10px;
    border:1px dashed var(--gold-dk); color:var(--ink-soft);
    background:rgba(169,138,78,.06); }
  .arch-body p { margin:.7em 0; line-height:1.7; }

  /* ===== Badge de sync (mode 2 bases) ===== */
  .sync-note { margin:10px 0 0; padding:8px 14px; border-radius:8px; font-size:.9em;
    border:1px dashed var(--gold-dk); color:var(--ink-soft);
    background:rgba(169,138,78,.06); }
  .sync-note.rejected { border-color:#7c2b22; color:#e8a08f; background:#2a120d; }

  /* ===== Achievements ===== */
  .ach-row { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 6px; }
  .ach { display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
    border-radius:999px; border:1px solid var(--gold-dk); font-size:.82em;
    font-family:var(--display); letter-spacing:.06em; color:var(--gold-lt);
    background:linear-gradient(180deg,#1e1810,#15110b); cursor:default; }
  .ach-ico { font-size:1.15em; }
  .ach.locked { opacity:.38; filter:grayscale(1); border-style:dashed; }

  /* ===== Timeline du héros (sessions) ===== */
  .tl-session { list-style:none; font-family:var(--display); font-size:.72em;
    letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
    padding:10px 0 4px; text-align:center; }

  /* ===== Quest Log (/chronicle) ===== */
  .ql-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  .ql-status { font-family:var(--display); font-size:.68em; letter-spacing:.12em;
    text-transform:uppercase; padding:2px 9px; border-radius:999px;
    border:1px solid var(--gold-dk); color:var(--gold-lt); }
  .ql-status.done { color:#9fd8a6; border-color:#2e5c37; }
  .ql-progress { font-size:.78em; color:var(--faint); }
  .ql-card h3 { margin:.15em 0 .35em; }
  .ql-card p { margin:0; font-size:.9em; color:var(--ink-soft); }

  /* ===== Page publique du héros ===== */
  .vis-form { display:inline-block; margin-top:8px; }
  .hero-pub-fallen { color:#e8a08f; font-family:var(--display);
    letter-spacing:.08em; }
  .ach-cat { margin:18px 0 2px; font-size:.95em; color:var(--ink); }
  .ach-count { font-family:var(--display); font-size:.72em; letter-spacing:.1em;
    color:var(--faint); margin-left:8px; }

  /* ===== Salle des trophées (/account) ===== */
  .troph-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:10px; margin:8px 0 4px; }
  .troph { display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
    border-radius:10px; border:1px dashed var(--gold-dk); opacity:.55;
    background:linear-gradient(180deg,#1a150e,#141008); }
  .troph.won { opacity:1; border-style:solid;
    background:linear-gradient(180deg,#1e1810,#15110b); }
  .troph-ico { font-size:1.5em; line-height:1.2; filter:grayscale(1); }
  .troph.won .troph-ico { filter:none; }
  .troph-body b { font-family:var(--display); letter-spacing:.04em; font-size:.92em; }
  .troph-body p { margin:.15em 0 0; font-size:.82em; color:var(--ink-soft); line-height:1.4; }
  .troph-date { font-size:.72em; color:var(--gold-lt); font-family:var(--display);
    letter-spacing:.08em; }
  .troph-score { margin:.2em 0 0; color:var(--gold-lt); font-family:var(--display);
    font-size:.82em; letter-spacing:.12em; text-transform:uppercase; }
  .troph-body { min-width:0; flex:1; }
  .troph-kicker { display:flex; justify-content:space-between; gap:8px; margin-bottom:3px;
    color:var(--faint); font-family:var(--display); font-size:.62em;
    letter-spacing:.1em; text-transform:uppercase; }
  .troph-progress { height:5px; margin-top:8px; overflow:hidden; border-radius:999px;
    background:#090705; box-shadow:inset 0 1px 2px #000; }
  .troph-progress span { display:block; height:100%; border-radius:inherit;
    background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt)); }
  .troph-numbers { display:block; margin-top:3px; text-align:right; color:var(--faint);
    font-family:var(--display); font-size:.66em; letter-spacing:.07em; }
  .troph.tier-silver { border-color:#81868f; }
  .troph.tier-gold { border-color:var(--gold); }
  .troph.tier-mythic { border-color:#744c91; box-shadow:inset 0 0 18px #5a24731c; }
  .troph.secret { background:linear-gradient(180deg,#18131c,#100d13); }
  .troph.legacy { border-color:#685f4e; filter:saturate(.65); }

  /* ===== Recherche unifiée : chip de type de résultat ===== */
  .sr-kind { display:inline-block; font-family:var(--display); font-size:.62em;
    letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
    border:1px solid var(--gold-dk); border-radius:4px; padding:1px 6px;
    margin-right:8px; vertical-align:2px; }

  /* ===== Changelog ===== */
  .clg-list { max-width:780px; margin-inline:auto; }
  .clg { display:flex; gap:18px; padding:16px 0; border-bottom:1px solid rgba(111,85,39,.28); }
  .clg:last-child { border-bottom:none; }
  .clg-date { flex:0 0 120px; font-family:var(--display); font-size:.78em;
    letter-spacing:.08em; color:var(--faint); padding-top:4px; }
  .clg-body h2 { margin:0 0 6px; font-size:1.05em; }
  .clg-body ul { margin:0; padding-left:18px; }
  .clg-body li { margin:3px 0; color:var(--ink-soft); font-size:.95em; }
  @media (max-width:620px) { .clg { flex-direction:column; gap:4px; } }

  /* ===== Visuels du panthéon (pages déités) ===== */
  .figure-img { width:100%; height:auto; border-radius:12px;
    border:1px solid var(--gold-dk); box-shadow:0 10px 34px rgba(0,0,0,.5); }
  .deity-gallery figure { margin:0; }
  .deity-gallery img { width:100%; height:auto; border-radius:10px;
    border:1px solid var(--gold-dk); }
  .deity-gallery figcaption { margin-top:6px; font-family:var(--display);
    font-size:.72em; letter-spacing:.12em; text-transform:uppercase;
    color:var(--faint); text-align:center; }
  .tile-img { width:100%; height:auto; aspect-ratio:1; object-fit:cover;
    border-radius:10px 10px 0 0; display:block; }

  /* One comprehensive motion override also covers future components. Tiny
     durations preserve any code that waits for transition/animation events. */
  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after {
      scroll-behavior:auto !important;
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      transition-delay:0ms !important;
    }
    .map-zoom { will-change:auto; }
  }