/* Le Léviathan — ton de la page (or impérial du palais, violet du vin royal, vert de la Ruche de
   la Couronne, orange du réacteur), ambiance par section (data-mood sur <body> : gold, wine,
   shadow, hidden, sorrow, voir js/rituals.js), étapes, portraits, Ombres, Ménagerie, coupe,
   textes de légende, couleurs du plan et pastilles. Les deux mini-jeux sont dans css/games.css. */

.leviathan {
  --royal: #f1c75a;
  --royal-hi: #fff1c8;
  --wine: #b46cf0;
  --wine-hi: #efdcff;
  --shadow: #c9b6ff;
  --shadow-hi: #f1eaff;
  --hidden: #6fd0c4;
  --hidden-hi: #dcfaf5;
  --sorrow: #8fe08a;
  --sorrow-hi: #e3ffe0;
  --belly: #ff9a4d;
  --sky: #ffe08a;
  --page-accent: var(--royal);
  --page-accent-hi: var(--royal-hi);
}
.leviathan[data-mood="wine"] { --page-accent: var(--wine); --page-accent-hi: var(--wine-hi); }
.leviathan[data-mood="shadow"] { --page-accent: var(--shadow); --page-accent-hi: var(--shadow-hi); }
.leviathan[data-mood="hidden"] { --page-accent: var(--hidden); --page-accent-hi: var(--hidden-hi); }
.leviathan[data-mood="sorrow"] { --page-accent: var(--sorrow); --page-accent-hi: var(--sorrow-hi); }
.leviathan ::selection { background: rgba(241, 199, 90, .3); }
.leviathan main { background: radial-gradient(ellipse 70% 18% at 80% 5%, rgba(241, 199, 90, .08), transparent 70%), radial-gradient(ellipse 55% 16% at 8% 30%, rgba(180, 108, 240, .06), transparent 70%); }
.leviathan .sec-title { transition: text-shadow .8s; text-shadow: 0 0 34px color-mix(in srgb, var(--page-accent) 26%, transparent); }
.leviathan .kicker, .leviathan .tag { transition: color .6s; }

/* ---------- Héros ---------- */
.leviathan .hero-title span:last-child { margin-top: .18em; font-size: .36em; font-weight: 500; letter-spacing: .3em; color: var(--page-accent-hi); }
.hero-fact { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hero-fact b { color: var(--page-accent-hi); }
/* renvoi vers l'autre époque du vaisseau */
.era-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, transparent, rgba(241, 199, 90, .08), transparent); font-size: .78rem; text-align: center; color: var(--muted); }
.era-note a { font-weight: 700; color: var(--page-accent-hi); }

/* ---------- Sections ---------- */
.leviathan .steps { margin-bottom: clamp(30px, 4vw, 44px); }
.leviathan .quarters + .duo, .leviathan .duo + .quarters, .leviathan .duo + .duo, .leviathan .duo + .confessions, .leviathan .confessions + .testimonies,
.leviathan .words-note + .quarters, .leviathan .duo + .shadow-cards, .leviathan .steps + .game, .leviathan .game + .quarters, .leviathan .quarters + .duo,
.leviathan .raid-steps + .words-note + .throne-scene, .leviathan .throne-scene + .game, .leviathan .game + .quarters, .leviathan .quarters + .secrets-raid,
.leviathan .duo + .secrets-raid, .leviathan .secrets-raid + .quarters, .leviathan .menagerie-layout + .testimonies, .leviathan .duo + .armory,
.leviathan .quarters + .duo, .leviathan .exotics + .quarters, .leviathan .lairs + .duo { margin-top: clamp(30px, 4vw, 44px); }
.leviathan .raid-steps + .words-note { margin-top: -26px; margin-bottom: 0; }
.wine-sec { background: radial-gradient(ellipse 60% 22% at 18% 4%, rgba(180, 108, 240, .1), transparent 70%), radial-gradient(ellipse 50% 20% at 90% 60%, rgba(241, 199, 90, .05), transparent 70%); }
.shadow-sec { background: radial-gradient(ellipse 60% 24% at 84% 6%, rgba(201, 182, 255, .08), transparent 70%); }
.hidden-sec { background: radial-gradient(ellipse 60% 24% at 20% 6%, rgba(111, 208, 196, .08), transparent 70%), linear-gradient(180deg, transparent, rgba(0, 0, 0, .3) 50%, transparent); }
.sorrow-sec { background: radial-gradient(ellipse 60% 24% at 80% 6%, rgba(143, 224, 138, .07), transparent 70%), radial-gradient(ellipse 50% 20% at 10% 40%, rgba(241, 199, 90, .05), transparent 70%); }
.raid-sec { background: radial-gradient(ellipse 60% 22% at 50% 2%, rgba(241, 199, 90, .09), transparent 70%); }
.secrets-sec { background: radial-gradient(ellipse 60% 45% at 30% 30%, color-mix(in srgb, var(--page-accent) 7%, transparent), transparent 70%); }
.lore-sec { background: radial-gradient(ellipse 60% 24% at 20% 8%, rgba(180, 108, 240, .06), transparent 70%); }
.leviathan .secrets-layout .games { gap: 28px; }
.leviathan .atlas-photo > a { position: absolute; inset: 0; }
.leviathan .quarter-photo > a { display: block; height: 100%; }
.leviathan .quarter-photo > a > img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1021px) { .leviathan .nav-menu a { padding: 8px 7px; letter-spacing: .08em; font-size: .7rem; white-space: nowrap; } }
@media (min-width: 1021px) and (max-width: 1400px) { .leviathan .brand span { display: none; } }
.words-note { margin: 12px 0 0; font-size: .74rem; font-style: italic; color: var(--muted); }
.words-note .spot--inline { vertical-align: middle; }
/* un filet doré entre deux sections */
.gold-rule { position: relative; height: 1px; margin: 0; border: 0; overflow: visible; background: linear-gradient(90deg, transparent, rgba(241, 199, 90, .65) 30%, #ffe9a8 50%, rgba(241, 199, 90, .65) 70%, transparent); box-shadow: 0 0 20px rgba(241, 199, 90, .45); }
.gold-rule::after { content: ''; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: #ffe9a8; box-shadow: 0 0 16px 3px rgba(241, 199, 90, .8); }

/* ---------- Étapes ---------- */
.calus-steps .n { border-color: var(--wine); color: var(--wine-hi); }
.hidden-steps .n { border-color: var(--hidden); color: var(--hidden-hi); }
@media (min-width: 1021px) { .leviathan .hidden-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Deux colonnes : un portrait et son texte ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); background: var(--panel-solid); border: 1px solid var(--line); }
.duo-photo { position: relative; min-height: 380px; margin: 0; overflow: hidden; }
.duo-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.duo .duo-photo > a { position: absolute; inset: 0; display: block; }
.duo-photo figcaption { position: absolute; left: 0; bottom: 0; padding: 6px 12px; background: rgba(6, 8, 16, .78); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.duo-body { padding: clamp(22px, 3vw, 36px); }
.duo-body h3 { margin: 4px 0 14px; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--pearl); }
.duo-body > p:not(.tag) { margin: 0 0 14px; font-size: .95rem; line-height: 1.65; color: var(--muted); }
.duo-note { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--muted); }
.lore-lines { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.lore-lines li { padding-left: 12px; border-left: 2px solid var(--page-accent); }
.lore-lines q { quotes: '« ' ' »'; font-family: var(--font-lore); font-style: italic; font-size: 1.08rem; line-height: 1.38; color: #ece3d2; }
.lore-lines small { display: block; margin-top: 2px; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--page-accent-hi); }

/* ---------- Étapes de raid ---------- */
.raid-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 clamp(30px, 4vw, 44px); padding: 0; list-style: none; }
.raid-step { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel-solid); }
.raid-step figure { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.raid-step figure > a { display: block; height: 100%; }
.raid-step figure img { width: 100%; height: 100%; object-fit: cover; }
.raid-step > div { padding: 16px 18px 20px; }
.raid-step h3 { margin: 4px 0 8px; font-size: 1.12rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--pearl); }
.raid-step p:not(.tag) { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }

/* ---------- Témoignages ---------- */
.testimonies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.testimony { display: flex; flex-direction: column; margin: 0; padding: 20px 20px 16px; border: 1px solid var(--line); border-top: 2px solid var(--wine); background: var(--panel-solid); }
.testimony--gold { border-top-color: var(--royal); background: linear-gradient(180deg, rgba(241, 199, 90, .08), var(--panel-solid) 60%); }
.testimony blockquote { margin: 0 0 14px; }
.testimony blockquote p { margin: 0; font-family: var(--font-lore); font-style: italic; font-size: 1.1rem; line-height: 1.42; color: #ece3d2; }
.testimony figcaption { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.testimony figcaption b { color: var(--page-accent-hi); }

/* ---------- Le journal de Match ---------- */
.confessions { padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(180, 108, 240, .35); background: linear-gradient(180deg, rgba(40, 14, 52, .5), var(--panel-solid)); }
.confessions header h3 { margin: 4px 0 10px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.confessions header > p:not(.tag) { max-width: 780px; margin: 0 0 22px; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.confessions-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.confessions-cols blockquote { margin: 0; padding: 16px 18px; border-left: 2px solid var(--wine); background: rgba(6, 6, 14, .45); }
.confessions-cols p { margin: 0 0 10px; font-family: var(--font-lore); font-style: italic; font-size: 1.04rem; line-height: 1.42; color: #ebe2f3; }
.confessions-cols .cf-title { font-family: var(--font-ui); font-style: normal; font-size: .64rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--wine-hi); }

/* ---------- Les Ombres ---------- */
.shadow-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.shadow-card { position: relative; padding: 18px 16px 16px; border: 1px solid rgba(201, 182, 255, .18); background: radial-gradient(circle at 100% 0%, rgba(201, 182, 255, .1), transparent 55%), var(--panel-solid); }
.shadow-card::before { content: ''; position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--shadow); opacity: .5; }
.sc-race { margin: 0; font-size: .6rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--shadow); }
.shadow-card h3 { margin: 4px 0 0; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.sc-title { margin: 2px 0 8px; font-family: var(--font-lore); font-style: italic; font-size: .98rem; color: var(--shadow-hi); }
.shadow-card p:last-child { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.shadow-card--lost { border-color: rgba(143, 224, 138, .3); }
.shadow-card--lost .sc-race { color: var(--sorrow); }
.shadow-card--earth { border-color: rgba(241, 199, 90, .45); background: radial-gradient(circle at 100% 0%, rgba(241, 199, 90, .14), transparent 55%), var(--panel-solid); }
.shadow-card--earth .sc-race, .shadow-card--earth .sc-title { color: var(--royal-hi); }
.shadow-card--fiction { border-style: dashed; }

/* ---------- La Ménagerie ---------- */
.menagerie-layout { display: grid; gap: 22px; }
.trials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.trial { padding: 14px 16px; border: 1px solid var(--line); border-left: 2px solid var(--sorrow); background: var(--panel-solid); }
.tr-kind { margin: 0; font-size: .58rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--sorrow); }
.trial h3 { margin: 4px 0 6px; font-size: .98rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.trial p:last-child { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.trial--boss { border-left-color: var(--royal); background: linear-gradient(90deg, rgba(241, 199, 90, .08), var(--panel-solid)); }
.trial--boss .tr-kind { color: var(--royal); }

/* ---------- La coupe ---------- */
.throne-scene { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); border: 1px solid rgba(241, 199, 90, .4); background: var(--panel-solid); }
.scene-photo { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.scene-photo > a { display: block; height: 100%; }
.scene-photo img { width: 100%; height: 100%; object-fit: cover; }
.scene-body { align-self: center; padding: clamp(22px, 3vw, 34px); }
.scene-body h3 { margin: 4px 0 12px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.scene-body > p:not(.tag) { margin: 0 0 12px; font-size: .92rem; line-height: 1.6; color: var(--muted); }

/* ---------- Armurerie ---------- */
.secrets-raid { display: grid; gap: 18px; }
.armory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.armory .item-card { margin: 0; }
.item-card.legendary .item-head { background: linear-gradient(90deg, #5a3d7a, #43305e); }
.armory .item-flavor { font-size: .96rem; }
.armory .item-flavor span { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); font-family: var(--font-ui); font-style: normal; font-size: .8rem; line-height: 1.55; color: var(--muted); }
.armory.exotics, .armory.opulent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.item-shot { position: relative; margin: 0; aspect-ratio: 16 / 8; overflow: hidden; background: #0c0d16; }
.item-shot > a { display: block; height: 100%; }
.item-shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Textes de légende ---------- */
.lore-books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.lore-card { border: 1px solid var(--line); background: var(--panel-solid); }
.lore-card--wide { grid-column: span 2; border-color: rgba(180, 108, 240, .35); }
.lore-card .item-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(90deg, rgba(241, 199, 90, .1), transparent); }
.lore-card .item-head img { flex: none; border: 1px solid rgba(255, 255, 255, .2); }
.lore-card .item-name { margin: 0; font-size: .92rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.lore-card .item-type { margin: 2px 0 0; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lore-flavor { margin: 0; padding: 12px 16px 0; font-family: var(--font-lore); font-style: italic; font-size: 1.04rem; line-height: 1.4; color: #ece3d2; }
.lore-card details { padding: 10px 16px 16px; }
.lore-card summary { cursor: pointer; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--page-accent-hi); }
.lore-card details[open] summary { margin-bottom: 10px; }
.lore-card details p { margin: 0 0 10px; font-family: var(--font-lore); font-size: 1.02rem; line-height: 1.5; color: #e4dccb; }
.lore-card .lore-data { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wine-hi); }
/* les crochets de Savathûn dans le Chronicon */
.sav { display: inline; padding: 0 .1em; border: 0; border-bottom: 1px dashed rgba(143, 224, 138, .25); background: none; font: inherit; color: inherit; cursor: pointer; transition: color .5s, text-shadow .5s, border-color .5s; }
.sav:hover, .sav:focus-visible { border-bottom-color: rgba(143, 224, 138, .7); }
.sav.is-found { color: #c8ffbf; border-bottom-color: transparent; text-shadow: 0 0 14px rgba(143, 224, 138, .7); }

/* ---------- Divers ---------- */
.game-foot { margin: 10px 0 0; font-size: .72rem; font-style: italic; color: var(--muted); }
.game > .game-foot { margin: -8px 0 0; padding: 0 24px 18px; }
/* trois cartes : une rangée de trois plutôt que deux puis une */
@media (min-width: 1021px) { .quarters--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.then-now { border-color: rgba(111, 208, 196, .35); }

/* ---------- Plan (brique commune : css/components/depths.css) ---------- */
.leviathan .depths { aspect-ratio: 10 / 12; }
.stratum--ciel { background: linear-gradient(180deg, #120f1e, #1c1626); }
.stratum--palais { background: linear-gradient(180deg, #221a10 0%, #1c160e 60%, #15110b 100%); }
.stratum--entrailles { background: linear-gradient(180deg, #0c1717 0%, #0b1214 60%, #090e10 100%); }
.stratum--menagerie { background: linear-gradient(180deg, #121a10 0%, #10150d 60%, #0c110a 100%); }
.stratum--ventre { background: linear-gradient(180deg, #1d0e08 0%, #170a06 60%, #100604 100%); }
.sun { fill: rgba(255, 224, 138, .9); stroke: rgba(255, 240, 200, .9); stroke-width: .3; filter: drop-shadow(0 0 2px rgba(255, 224, 138, .9)); }
.hull-line { fill: none; stroke: rgba(241, 199, 90, .3); stroke-width: 1; stroke-dasharray: 3 3; }
.wine-line { fill: none; stroke: rgba(180, 108, 240, .45); stroke-width: 1; stroke-dasharray: 2 4; }
.way-line { stroke: rgba(231, 235, 245, .3); }
.way-line--raccourci { stroke: rgba(111, 208, 196, .85); stroke-dasharray: 2 4; stroke-linecap: round; }
.way-line--transmat { stroke: rgba(241, 199, 90, .55); stroke-dasharray: 1 5; stroke-linecap: round; }
.way-line--chute, .way-line--avale { stroke: rgba(255, 154, 77, .7); stroke-dasharray: 4 3; }
.room-node--zone { color: #fff6dc; }
.room-node--sky { color: var(--sky); }
.room-node--palace { color: var(--royal); }
.room-node--throne { color: var(--wine); }
.room-node--hidden { color: var(--hidden); }
.room-node--sorrow { color: var(--sorrow); }
.room-node--belly { color: var(--belly); }
.leviathan .room-label { text-shadow: 0 1px 6px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9); }

/* ---------- Pastilles ---------- */
.leviathan .spot[hidden] { display: none; }
.spot[data-secret="clins"] { color: #fff4dc; border-color: rgba(241, 199, 90, .85); }
.spot[data-secret="coffres"] { color: #ffe9b8; border-color: rgba(241, 199, 90, .95); }
.spot[data-secret="betes"] { color: #e3ffe0; border-color: rgba(143, 224, 138, .95); box-shadow: 0 0 14px rgba(143, 224, 138, .45); }
.spot[data-secret="automates"] { color: #f1eaff; border-color: rgba(180, 108, 240, .95); box-shadow: 0 0 14px rgba(180, 108, 240, .45); }
.spot--cup { color: #fff1c8; border-color: rgba(255, 224, 138, 1); box-shadow: 0 0 18px rgba(255, 224, 138, .7); }

@media (max-width: 1200px) {
  .shadow-cards, .trials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .duo, .throne-scene { grid-template-columns: minmax(0, 1fr); }
  .duo-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .raid-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonies, .confessions-cols, .lore-books { grid-template-columns: minmax(0, 1fr); }
  .lore-card--wide { grid-column: auto; }
  .armory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shadow-cards, .trials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .leviathan .depths { aspect-ratio: 10 / 17; }
  .raid-steps, .armory, .armory.exotics, .armory.opulent, .shadow-cards, .trials { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .gold-rule::after { animation: none; }
}