/* L'épave du Léviathan — ton de la page (or terni du palais pourri, vert des spores d'Égrégore,
   rouge des Cauchemars, orange de l'esprit de Calus, violet du Témoin), ambiance par section
   (data-mood sur <body> : rot, nightmare, mind, herald, voir js/rituals.js), étapes, portraits,
   rituels de rupture, Voix des Tourments, textes de légende, couleurs du plan et pastilles.
   Les deux mini-jeux sont dans css/games.css. */

.epave {
  --tarnish: #d9b26a;
  --tarnish-hi: #f6e6c2;
  --spore: #7fd6a8;
  --spore-hi: #ddfaeb;
  --nightmare: #ff5f52;
  --nightmare-hi: #ffd9d4;
  --mind: #ff8a5c;
  --mind-hi: #ffe0d2;
  --herald: #b48cff;
  --herald-hi: #ece2ff;
  --moon: #cfd8ea;
  --royal: var(--tarnish);
  --royal-hi: var(--tarnish-hi);
  --wine: var(--herald);
  --wine-hi: var(--herald-hi);
  --page-accent: var(--tarnish);
  --page-accent-hi: var(--tarnish-hi);
}
.epave[data-mood="nightmare"] { --page-accent: var(--nightmare); --page-accent-hi: var(--nightmare-hi); }
.epave[data-mood="mind"] { --page-accent: var(--mind); --page-accent-hi: var(--mind-hi); }
.epave[data-mood="herald"] { --page-accent: var(--herald); --page-accent-hi: var(--herald-hi); }
.epave ::selection { background: rgba(241, 199, 90, .3); }
.epave 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%); }
.epave .sec-title { transition: text-shadow .8s; text-shadow: 0 0 34px color-mix(in srgb, var(--page-accent) 26%, transparent); }
.epave .kicker, .epave .tag { transition: color .6s; }

/* ---------- Héros ---------- */
.epave .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 ---------- */
.epave .steps { margin-bottom: clamp(30px, 4vw, 44px); }
.epave .quarters + .duo, .epave .duo + .quarters, .epave .duo + .duo, .epave .duo + .confessions, .epave .confessions + .testimonies,
.epave .words-note + .quarters, .epave .duo + .shadow-cards, .epave .steps + .game, .epave .game + .quarters, .epave .quarters + .duo,
.epave .raid-steps + .words-note + .games, .epave .sub-head + .raid-steps, .epave .game + .quarters, .epave .quarters + .secrets-raid,
.epave .duo + .secrets-raid, .epave .secrets-raid + .quarters, .epave .menagerie-layout + .testimonies, .epave .duo + .armory,
.epave .quarters + .duo, .epave .exotics + .quarters, .epave .lairs + .duo { margin-top: clamp(30px, 4vw, 44px); }
.epave .raid-steps + .words-note { margin-top: -26px; margin-bottom: 0; }
.nightmare-sec { background: radial-gradient(ellipse 60% 22% at 18% 4%, rgba(255, 95, 82, .1), transparent 70%), radial-gradient(ellipse 50% 20% at 90% 60%, rgba(255, 95, 82, .05), transparent 70%); }
.rot-sec { background: radial-gradient(ellipse 60% 24% at 80% 6%, rgba(127, 214, 168, .08), transparent 70%); }
.mind-sec { background: radial-gradient(ellipse 60% 24% at 20% 6%, rgba(255, 138, 92, .1), transparent 70%), linear-gradient(180deg, transparent, rgba(40, 6, 4, .35) 50%, transparent); }
.herald-sec { background: radial-gradient(ellipse 60% 22% at 50% 2%, rgba(180, 140, 255, .1), 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%); }
.epave .secrets-layout .games { gap: 28px; }
.epave .atlas-photo > a { position: absolute; inset: 0; }
.epave .quarter-photo > a { display: block; height: 100%; }
.epave .quarter-photo > a > img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1021px) { .epave .nav-menu a { padding: 8px 7px; letter-spacing: .08em; font-size: .7rem; white-space: nowrap; } }
@media (min-width: 1021px) and (max-width: 1400px) { .epave .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 */
.spore-rule { position: relative; height: 1px; margin: 0; border: 0; overflow: visible; background: linear-gradient(90deg, transparent, rgba(127, 214, 168, .6) 30%, #c9ffe4 50%, rgba(127, 214, 168, .6) 70%, transparent); box-shadow: 0 0 20px rgba(127, 214, 168, .4); }
.spore-rule::after { content: ''; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: #c9ffe4; box-shadow: 0 0 16px 3px rgba(127, 214, 168, .8); }

/* ---------- Étapes ---------- */
.return-steps .n, .herald-steps .n { border-color: var(--herald); color: var(--herald-hi); }

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

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

/* ---------- Pastilles ---------- */
.epave .spot[hidden] { display: none; }
.spot[data-secret="clins"] { color: #fff4dc; border-color: rgba(217, 178, 106, .85); }
.spot[data-secret="effigies"] { color: #fff1c8; border-color: rgba(255, 214, 120, .95); box-shadow: 0 0 14px rgba(255, 214, 120, .5); }
.spot[data-secret="automates"] { color: #ece2ff; border-color: rgba(180, 140, 255, .95); box-shadow: 0 0 14px rgba(180, 140, 255, .45); }
.spot[data-secret="souvenirs"] { color: #ffe0d2; border-color: rgba(255, 138, 92, .95); box-shadow: 0 0 14px rgba(255, 138, 92, .45); }
.spot[data-secret="alcoves"] { color: #ffd9d4; border-color: rgba(255, 95, 82, .95); box-shadow: 0 0 14px rgba(255, 95, 82, .45); }
@media (max-width: 1200px) {
}
@media (max-width: 1020px) {
  .duo, .rite, .voices-cols { 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)); }
}
@media (max-width: 680px) {
  .epave .depths { aspect-ratio: 10 / 17; }
  .raid-steps, .armory, .armory.exotics, .armory.opulent { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .spore-rule::after { animation: none; }
}

/* ---------- Sous-titre dans une section ---------- */
.sub-head { max-width: 760px; margin: clamp(36px, 5vw, 56px) 0 18px; }
.sub-head h3 { margin: 4px 0 8px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.sub-head p:not(.tag) { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }

/* ---------- Les rituels de rupture ---------- */
.rite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); margin-top: clamp(30px, 4vw, 44px); border: 1px solid rgba(255, 95, 82, .3); background: var(--panel-solid); }
.rite--zavala { border-color: rgba(240, 180, 106, .35); }
.rite--caiatl { border-color: rgba(255, 138, 92, .35); }
.rite-photos { display: grid; grid-auto-rows: 1fr; }
.rite-photos figure { position: relative; margin: 0; min-height: 220px; overflow: hidden; }
.rite-photos figure > a { position: absolute; inset: 0; display: block; }
.rite-photos img { width: 100%; height: 100%; object-fit: cover; }
.rite-photos 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); }
.rite-body { padding: clamp(22px, 3vw, 36px); }
.rite-body h3 { margin: 4px 0 14px; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.rite-body > p:not(.tag):not(.duo-note) { margin: 0 0 14px; font-size: .95rem; line-height: 1.65; color: var(--muted); }
.dialogue { display: grid; gap: 6px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid rgba(255, 95, 82, .25); background: rgba(20, 6, 8, .45); list-style: none; }
.dialogue li { font-family: var(--font-lore); font-size: 1.04rem; line-height: 1.4; color: #efe2dc; }
.dialogue b { margin-right: 6px; font-family: var(--font-ui); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nightmare); }
.rite-act { margin: 0 0 14px; }
.rupture-end { margin-top: 12px; padding: 14px 16px; border-left: 3px solid var(--spore); background: linear-gradient(90deg, rgba(127, 214, 168, .08), transparent); animation: rite-in .8s ease; }
.rupture-end p { margin: 0 0 8px; font-family: var(--font-lore); font-size: 1.06rem; line-height: 1.45; color: #e6f3ec; }
.rupture-end p:last-child { margin-bottom: 0; }
.rupture-end b { margin-right: 6px; font-family: var(--font-ui); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--spore); }
@keyframes rite-in { from { opacity: 0; transform: translateY(6px); } }
.rupture-btn:disabled { opacity: 1; cursor: default; border-color: var(--spore); background: rgba(127, 214, 168, .15); color: var(--spore-hi); }

/* ---------- Voix des Tourments ---------- */
.voices { margin-top: clamp(30px, 4vw, 44px); padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(180, 140, 255, .35); background: linear-gradient(180deg, rgba(34, 16, 52, .5), var(--panel-solid)); }
.voices header h3 { margin: 4px 0 10px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.voices header > p:not(.tag) { max-width: 780px; margin: 0 0 22px; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.voices-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.voices-cols blockquote { margin: 0; padding: 16px 18px; border-left: 2px solid var(--herald); background: rgba(6, 6, 14, .45); }
.voices-cols p { margin: 0 0 10px; font-family: var(--font-lore); font-style: italic; font-size: 1.04rem; line-height: 1.42; color: #ebe4f6; }
.voices-cols .vc-title { font-family: var(--font-ui); font-style: normal; font-size: .64rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--herald-hi); }
.epave .steps + .voices, .epave .voices + .quarters, .epave .quarters + .duo, .epave .rite + .quarters, .epave .quarters + .duo, .epave .duo + .patrol-list,
.epave .words-note + .games, .epave .games + .duo, .epave .duo + .armory, .epave .steps + .quarters, .epave .quarters + .sub-head { margin-top: clamp(30px, 4vw, 44px); }
.duality-games { display: grid; gap: 28px; margin-top: clamp(30px, 4vw, 44px); }

/* ---------- Triomphes de l'épave ---------- */
.patrol-list { margin-top: clamp(30px, 4vw, 44px); padding: 20px 22px; border: 1px solid var(--line); background: var(--panel-solid); }
.patrol-list ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 12px 0 0; padding: 0; list-style: none; }
.patrol-list li { font-size: .86rem; line-height: 1.5; color: var(--muted); }
.patrol-list b { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--tarnish-hi); }
.bungie-joke { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; font-size: .82rem; font-style: italic; color: var(--muted); }

/* ---------- Plan (brique commune : css/components/depths.css) ---------- */
.epave .depths { aspect-ratio: 10 / 12; }
.stratum--orbite { background: linear-gradient(180deg, #0c0f1a, #141a26); }
.stratum--palais { background: linear-gradient(180deg, #1c1810 0%, #17140d 60%, #12100b 100%); }
.stratum--entrailles { background: linear-gradient(180deg, #0c1612 0%, #0a120f 60%, #080e0c 100%); }
.stratum--esprit { background: linear-gradient(180deg, #1e0b08 0%, #180806 60%, #100504 100%); }
.moon { fill: rgba(207, 216, 234, .12); stroke: rgba(207, 216, 234, .45); stroke-width: .4; }
.rot-line { fill: none; stroke: rgba(127, 214, 168, .3); stroke-width: 1; stroke-dasharray: 3 3; }
.mind-line { fill: none; stroke: rgba(255, 138, 92, .45); stroke-width: 1; stroke-dasharray: 2 4; }
.way-line { stroke: rgba(231, 235, 245, .3); }
.way-line--transmat { stroke: rgba(207, 216, 234, .55); stroke-dasharray: 1 5; stroke-linecap: round; }
.way-line--chute { stroke: rgba(127, 214, 168, .75); stroke-dasharray: 4 3; }
.way-line--rift { stroke: rgba(255, 138, 92, .85); stroke-dasharray: 1 5; stroke-linecap: round; }
.room-node--zone { color: #fff6dc; }
.room-node--far { color: var(--moon); }
.room-node--throne { color: var(--tarnish); }
.room-node--alcove { color: var(--nightmare); }
.room-node--under { color: var(--spore); }
.room-node--mind { color: var(--mind); }
.epave .room-label { text-shadow: 0 1px 6px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9); }

@media (max-width: 1020px) {
  .patrol-list ul { grid-template-columns: minmax(0, 1fr); }
  .rite-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .rite-photos figure { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 680px) {
  .epave .depths { aspect-ratio: 10 / 17; }
  .rite-photos { grid-template-columns: minmax(0, 1fr); }
}