/* Vénus — ton de la page (soufre de Vénus, blanc bleuté du Collectif, verre du Caveau, vert du
   Jardin, rouge des yeux vex), ambiance par section (data-mood sur <body> : ishtar, vault, garden,
   mind, voir js/rituals.js), étapes du raid, question du spécimen 12, armurerie, témoignages,
   fable du jardinier, couleurs du plan et pastilles. Les trois mini-jeux sont dans css/games.css. */

.venus {
  --sulphur: #e8c87a;
  --sulphur-hi: #fff1cf;
  --ishtar: #9fd8ff;
  --ishtar-hi: #e4f4ff;
  --vault: #7ff0e0;
  --vault-hi: #d8fff9;
  --garden: #9be37a;
  --garden-hi: #e2ffd2;
  --mind: #ff6a5c;
  --mind-hi: #ffd6d0;
  --vex: #d9a35a;
  --winter: #8fb4ff;
  --frontier: #ff9a6a;
  --page-accent: var(--sulphur);
  --page-accent-hi: var(--sulphur-hi);
}
.venus[data-mood="ishtar"] { --page-accent: var(--ishtar); --page-accent-hi: var(--ishtar-hi); }
.venus[data-mood="vault"] { --page-accent: var(--vault); --page-accent-hi: var(--vault-hi); }
.venus[data-mood="garden"] { --page-accent: var(--garden); --page-accent-hi: var(--garden-hi); }
.venus[data-mood="mind"] { --page-accent: var(--mind); --page-accent-hi: var(--mind-hi); }
.venus ::selection { background: rgba(232, 200, 122, .3); }
.venus main { background: radial-gradient(ellipse 70% 18% at 80% 5%, rgba(232, 200, 122, .08), transparent 70%), radial-gradient(ellipse 55% 16% at 8% 28%, rgba(255, 154, 92, .05), transparent 70%); }
.venus .sec-title { transition: text-shadow .8s; text-shadow: 0 0 34px color-mix(in srgb, var(--page-accent) 24%, transparent); }
.venus .kicker, .venus .tag { transition: color .6s; }

/* ---------- Héros ---------- */
.venus .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); }

/* ---------- Sections ---------- */
.venus .steps { margin-bottom: clamp(30px, 4vw, 44px); }
.venus .quarters + .raid, .venus .raid + .quarters, .venus .raid + .raid, .venus .duo + .quarters, .venus .quarters + .duo, .venus .quarters + .steps { margin-top: clamp(30px, 4vw, 44px); }
.ishtar-sec { background: radial-gradient(ellipse 60% 22% at 50% 4%, rgba(232, 244, 255, .1), transparent 70%); }
.vault-sec { background: radial-gradient(ellipse 60% 22% at 84% 6%, rgba(255, 210, 122, .09), transparent 70%), radial-gradient(ellipse 50% 20% at 8% 62%, rgba(20, 30, 60, .5), transparent 70%); }
.garden-sec { background: radial-gradient(ellipse 60% 26% at 16% 8%, rgba(255, 154, 92, .08), transparent 70%); }
.secrets-sec { background: radial-gradient(ellipse 60% 45% at 30% 30%, color-mix(in srgb, var(--page-accent) 7%, transparent), transparent 70%); }
.venus .secrets-layout .games { gap: 28px; }
/* photo cliquable d'une carte large : le lien remplit la colonne comme le ferait l'image seule */
.venus .quarter--wide .quarter-photo > a { height: 100%; }
.venus .quarter--wide .quarter-photo > a > img { height: 100%; object-fit: cover; }
/* un filet de Lumière entre deux sections */
.light-rule { position: relative; height: 1px; margin: 0; border: 0; overflow: visible; background: linear-gradient(90deg, transparent, rgba(232, 244, 255, .7) 30%, #fff 50%, rgba(232, 244, 255, .7) 70%, transparent); box-shadow: 0 0 22px rgba(232, 244, 255, .55); }
.light-rule::after { content: ''; position: absolute; left: 50%; top: -5px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 4px rgba(232, 244, 255, .9); animation: light-pulse 4s ease-in-out infinite; }
@keyframes light-pulse { 50% { transform: scale(.55); opacity: .6; } }
/* 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-line { margin: 0 0 12px; padding: 12px 16px; border-left: 3px solid var(--page-accent); background: color-mix(in srgb, var(--page-accent) 7%, transparent); }
.duo-line q { quotes: '« ' ' »'; font-family: var(--font-lore); font-style: italic; font-size: 1.2rem; line-height: 1.4; color: #e9e3d6; }
.duo-line cite { display: block; margin-top: 4px; font-size: .62rem; font-style: normal; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--page-accent-hi); }
.arms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(30px, 4vw, 44px); }
.arm-note { margin: 8px 0 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }

.mind-sec { background: radial-gradient(ellipse 60% 24% at 82% 6%, rgba(255, 106, 92, .08), transparent 70%); }
.time-sec { background: radial-gradient(ellipse 70% 26% at 50% 0%, rgba(127, 240, 224, .07), transparent 70%); }
.gardener-sec { background: radial-gradient(ellipse 60% 24% at 20% 10%, rgba(155, 227, 122, .07), transparent 70%); }
.venus .steps + .duo, .venus .duo + .duo, .venus .game + .duo, .venus .fable + .game, .venus .game + .quarters, .venus .quarters + .gardener-note,
.venus .time-axis + .quarters, .venus .testimonies + .quarters, .venus .raid + .armory { margin-top: clamp(30px, 4vw, 44px); }
.venus .raid-steps + .game, .venus .game + .game { margin-top: clamp(30px, 4vw, 44px); }
.venus .duo + .quarters, .venus .quarters + .duo { margin-top: clamp(30px, 4vw, 44px); }

/* ---------- Étapes du 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 img { width: 100%; height: 100%; object-fit: cover; }
.raid-step > div { padding: 16px 18px 62px; }
.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); }
.raid-step--last { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-color: color-mix(in srgb, var(--vault) 50%, transparent); }
.raid-step--last figure { aspect-ratio: auto; min-height: 260px; }
.raid-step--last > div { padding: 24px 26px; align-self: center; }


/* ---------- Le spécimen 12 (js/rituals.js) ---------- */
.subject { margin-top: 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--ishtar) 55%, transparent); background: color-mix(in srgb, var(--ishtar) 8%, transparent); }
.subject-note { margin: 0 0 14px; font-family: var(--font-lore); font-style: italic; font-size: 1.15rem; line-height: 1.4; color: #e9e3d6; }
.subject-note[data-kind="ok"] { color: var(--ishtar-hi); }
.subject-note[data-kind="bad"] { color: #ffb08a; }
.subject-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.subject-actions .picked { outline: 2px solid var(--ishtar); outline-offset: 2px; }
.subject[data-state="saved"] .subject-actions { display: none; }

/* ---------- Kabr : les textes de son armure ---------- */
.lore-lines { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.lore-lines li { padding-left: 12px; border-left: 2px solid var(--vault); }
.lore-lines q { quotes: '« ' ' »'; font-family: var(--font-lore); font-style: italic; font-size: 1.08rem; line-height: 1.35; color: #e9e3d6; }
.duo-note { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--muted); }

/* ---------- Le temps : passé, présent, futur ---------- */
.time-axis { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 0 0; text-align: center; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.time-axis::before { content: ''; position: absolute; left: 4%; right: 4%; top: 6px; height: 2px; background: linear-gradient(90deg, #d9a35a, var(--sulphur) 50%, var(--vault)); box-shadow: 0 0 14px rgba(127, 240, 224, .4); }
.time-axis span { position: relative; padding-top: 12px; }
.time-axis span::before { content: ''; position: absolute; left: 50%; top: -18px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: currentColor; box-shadow: 0 0 12px currentColor; }
.axis-past { color: #e6b87a; } .axis-now { color: var(--sulphur-hi); } .axis-future { color: var(--vault-hi); }

/* ---------- Le jardinier : la fable et ses règles ---------- */
.fable { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; border: 1px solid color-mix(in srgb, var(--garden) 40%, transparent); background: var(--panel-solid); }
.fable-text { padding: clamp(22px, 3vw, 34px); border-right: 1px solid var(--line); }
.fable-text p:not(.tag) { margin: 0 0 12px; font-family: var(--font-lore); font-style: italic; font-size: 1.18rem; line-height: 1.45; color: #e9e3d6; }
.fable-rules { display: grid; align-content: center; gap: 12px; margin: 0; padding: clamp(22px, 3vw, 34px); list-style: none; counter-reset: rule; }
.fable-rules li { position: relative; padding-left: 40px; font-size: .92rem; line-height: 1.55; color: var(--muted); counter-increment: rule; }
.fable-rules li::before { content: counter(rule); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--garden); color: var(--garden-hi); font-weight: 800; font-size: .8rem; transform: rotate(45deg); }
.fable-rules b { color: var(--garden-hi); }
.gardener-note { padding: 18px 22px; border-left: 3px solid var(--garden); background: color-mix(in srgb, var(--garden) 6%, transparent); }
.gardener-note p:not(.tag) { margin: 6px 0 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }

/* ---------- Les Vex pensent-ils ? ---------- */
.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(--mind); background: var(--panel-solid); }
.testimony--ghost { border-top-color: var(--ishtar); background: linear-gradient(180deg, rgba(159, 216, 255, .07), 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.12rem; line-height: 1.42; color: #e9e3d6; }
.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 ---------- */
.armory { display: grid; grid-template-columns: repeat(2, 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: .78rem; line-height: 1.5; color: var(--vault-hi); }

/* ---------- Plan (brique commune : css/components/depths.css) ---------- */
.venus .depths { aspect-ratio: 10 / 12; }
.stratum--ailleurs { background: linear-gradient(180deg, #1c120c, #22160e); }
.stratum--surface { background: linear-gradient(180deg, #23200f 0%, #1d2210 55%, #141b12 100%); }
.stratum--caveau { background: linear-gradient(180deg, #0c1a1c 0%, #0a1418 60%, #081014 100%); }
.stratum--jardin { background: linear-gradient(180deg, #0c160c 0%, #0a120a 60%, #060a06 100%); }
.sea { fill: rgba(80, 140, 120, .18); stroke: rgba(160, 230, 210, .3); stroke-width: .6; }
.citadel-shape { fill: rgba(217, 163, 90, .1); stroke: rgba(255, 220, 160, .35); stroke-width: .6; }
.glass { fill: none; stroke: rgba(127, 240, 224, .35); stroke-width: 1; stroke-dasharray: 3 3; }
.heart-glow { fill: rgba(30, 10, 30, .55); stroke: rgba(200, 120, 255, .35); stroke-width: .6; }
.way-line { stroke: rgba(231, 235, 245, .3); }
.way-line--rift { stroke: rgba(240, 200, 110, .85); stroke-dasharray: 1 5; stroke-linecap: round; }
.room-node--zone { color: #f4f0df; }
.room-node--far { color: #c9d6e6; }
.room-node--frontier { color: var(--frontier); }
.room-node--ishtar { color: var(--ishtar); }
.room-node--winter { color: var(--winter); }
.room-node--vex { color: var(--vex); }
.room-node--raid { color: var(--vault); }
.room-node--garden { color: var(--garden); }
.room-node--hidden { color: #ff9a8a; }
.venus .room-label { text-shadow: 0 1px 6px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9); }

/* ---------- Pastilles ---------- */
.venus .spot[hidden] { display: none; }
.spot[data-secret="winks"] { color: #fff4dc; border-color: rgba(232, 200, 122, .85); }
.spot[data-secret="records"] { color: #e4f4ff; border-color: rgba(159, 216, 255, .95); box-shadow: 0 0 14px rgba(159, 216, 255, .5); }
.spot[data-secret="praedyth"] { color: #d8fff9; border-color: rgba(127, 240, 224, .9); }
.spot[data-secret="garden"] { color: #e2ffd2; border-color: rgba(155, 227, 122, .95); box-shadow: 0 0 14px rgba(155, 227, 122, .5); }
.spot[data-secret="chests"] { color: #ffe9b8; border-color: rgba(232, 200, 122, .95); }

@media (max-width: 1200px) {
  .raid-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .duo { 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)); }
  .raid-step--last { grid-template-columns: minmax(0, 1fr); }
  .testimonies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fable { grid-template-columns: minmax(0, 1fr); }
  .fable-text { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .venus .depths { aspect-ratio: 10 / 17; }
  .raid-steps, .testimonies, .armory { grid-template-columns: minmax(0, 1fr); }
  .time-axis { font-size: .5rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .light-rule::after { animation: none; }
}