/* La vallée d'Arcadia — ton de la page (ciel turquoise, feuillage rouge, pierre blanche et
   « lait » vex), deux voix de Failsafe (classes voice-cheery et voice-gloomy sur <body>, voir
   js/rituals.js), ambiance par section (data-mood : forge, core), couleurs de la coupe et
   pastilles. Le mini-jeu des forges est dans css/forge.css. */

.nessos {
  --sky: #46e0c2;
  --sky-hi: #b4f5e6;
  --flora: #ff6a55;
  --flora-hi: #ffc0b4;
  --ember: #ff9a3d;
  --ember-hi: #ffd6a3;
  --core: #c7a4ff;
  --core-hi: #e8dbff;
  --milk: #eaf6ff;
  --vex: #7fe0d2;
  --page-accent: var(--sky);
  --page-accent-hi: var(--sky-hi);
}
/* Failsafe morose : la page vire au rouge des arbres */
.nessos.voice-gloomy { --page-accent: var(--flora); --page-accent-hi: var(--flora-hi); }
.nessos[data-mood="forge"] { --page-accent: var(--ember); --page-accent-hi: var(--ember-hi); }
.nessos[data-mood="core"] { --page-accent: var(--core); --page-accent-hi: var(--core-hi); }
.nessos ::selection { background: rgba(70, 224, 194, .32); }
.nessos main { background: radial-gradient(ellipse 70% 20% at 85% 6%, rgba(70, 224, 194, .09), transparent 70%), radial-gradient(ellipse 55% 18% at 6% 30%, rgba(255, 106, 85, .07), transparent 70%); }
.nessos .sec-title { transition: text-shadow .8s; text-shadow: 0 0 34px color-mix(in srgb, var(--page-accent) 22%, transparent); }
.nessos .kicker, .nessos .tag { transition: color .6s; }

/* ---------- Héros ---------- */
.nessos .hero-title span:last-child { margin-top: .18em; font-size: .36em; font-weight: 500; letter-spacing: .3em; color: var(--page-accent-hi); transition: color .6s; }
.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); font-variant-numeric: tabular-nums; }

/* ---------- Les deux voix de Failsafe ---------- */
.nessos:not(.voice-cheery) [data-voice="cheery"], .nessos:not(.voice-gloomy) [data-voice="gloomy"] { display: none !important; }
.voice-switch { display: inline-flex; padding: 3px; gap: 3px; background: rgba(6, 10, 22, .66); border: 1px solid var(--line-strong); }
.voice-switch button { padding: 9px 16px; cursor: pointer; background: none; border: 1px solid transparent; font: inherit; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); transition: color .3s, background .3s, border-color .3s, box-shadow .3s; }
.voice-switch button:hover, .voice-switch button:focus-visible { outline: 0; color: #fff; border-color: var(--line-strong); }
.voice-switch [data-voice-set="cheery"] { --c: var(--sky); }
.voice-switch [data-voice-set="gloomy"] { --c: var(--flora); }
.voice-switch button[aria-checked="true"] { color: #0a0d16; background: var(--c); border-color: var(--c); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent); }
.failsafe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); margin-bottom: clamp(30px, 4vw, 44px); background: var(--panel-solid); border: 1px solid var(--line); }
.failsafe-photo { position: relative; min-height: 380px; }
.failsafe-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.failsafe-body { padding: clamp(22px, 3vw, 36px); }
.failsafe-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.failsafe-head h3 { margin: 4px 0 0; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--pearl); }
.failsafe-body > p:not(.tag) { margin: 0 0 14px; font-size: .95rem; line-height: 1.65; color: var(--muted); }
/* une réplique : un trait de couleur, l'humeur en petit, la phrase en italique */
.fs-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); transition: border-color .6s, background .6s; }
.fs-line b { display: block; margin-bottom: 4px; font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--page-accent-hi); }
.fs-line q { quotes: '« ' ' »'; font-family: var(--font-lore); font-style: italic; font-size: 1.2rem; line-height: 1.4; color: #e9e3d6; }
.fs-note { font-size: .78rem; color: var(--faint); }

/* ---------- Sections ---------- */
.nessos .steps { margin-bottom: clamp(30px, 4vw, 44px); }
.nessos .quarters + .raid, .nessos .raid + .quarters { margin-top: clamp(30px, 4vw, 44px); }
.forge-sec { background: radial-gradient(ellipse 60% 26% at 82% 8%, rgba(255, 154, 61, .1), transparent 70%), radial-gradient(ellipse 50% 22% at 10% 60%, rgba(255, 90, 60, .06), transparent 70%); }
.core-sec { background: radial-gradient(ellipse 60% 26% at 20% 6%, rgba(199, 164, 255, .1), transparent 70%), radial-gradient(ellipse 50% 22% at 90% 70%, rgba(70, 224, 194, .05), transparent 70%); }
.secrets-sec { background: radial-gradient(ellipse 60% 45% at 30% 30%, color-mix(in srgb, var(--page-accent) 7%, transparent), transparent 70%); }
.nessos .secrets-layout .games { gap: 28px; }
/* filet de radiolaire entre deux sections : un trait laiteux qui coule */
.milk { position: relative; height: 2px; margin: 0; border: 0; background: linear-gradient(90deg, transparent, rgba(234, 246, 255, .55) 20%, rgba(234, 246, 255, .9) 50%, rgba(234, 246, 255, .55) 80%, transparent); box-shadow: 0 0 18px rgba(190, 235, 255, .5); overflow: visible; }
.milk::after { content: ''; position: absolute; left: 0; top: -1px; width: 22%; height: 4px; background: linear-gradient(90deg, transparent, #fff, transparent); filter: blur(1px); animation: milk-run 7s linear infinite; }
@keyframes milk-run { from { transform: translateX(-100%); } to { transform: translateX(555%); } }

/* ---------- Coupe (brique commune : css/components/depths.css) ---------- */
.nessos .depths { aspect-ratio: 10 / 9.4; }
.stratum--surface { background: radial-gradient(ellipse 60% 120% at 50% -30%, rgba(180, 245, 230, .9), rgba(70, 224, 194, .5) 50%, transparent 80%), linear-gradient(180deg, #0f5e58, #2a8f7c 70%, #7a2f28 100%); }
.stratum--chambres { background: linear-gradient(180deg, #3a1c1a 0%, #16201f 14%, #0b1416 100%); }
.stratum--profondeurs { background: linear-gradient(180deg, #0b1416, #101226 80%, #1a1436); }
.stratum--noyau { background: radial-gradient(ellipse 60% 90% at 50% 70%, rgba(199, 164, 255, .34), transparent 75%), linear-gradient(180deg, #1a1436, #2a1d4c); }
.nessos .stratum--surface .stratum-name { color: rgba(255, 255, 255, .95); text-shadow: 0 1px 6px rgba(0, 40, 36, .9); }
.nessos .stratum--surface .stratum-note { color: rgba(255, 255, 255, .78); text-shadow: 0 1px 6px rgba(0, 40, 36, .9); }
.ground { stroke: rgba(40, 10, 8, .9); }
.fall { stroke: rgba(234, 246, 255, .5); stroke-width: 2.4; stroke-dasharray: 1 5; stroke-linecap: round; animation: fall-run 1.6s linear infinite; }
@keyframes fall-run { to { stroke-dashoffset: -12; } }
.core-glow { fill: rgba(199, 164, 255, .14); stroke: rgba(199, 164, 255, .4); stroke-width: 1; stroke-dasharray: 2 5; }
.way-line { stroke: rgba(231, 235, 245, .34); }
.way-line--vex { stroke: rgba(127, 224, 210, .55); }
.way-line--sector { stroke: rgba(231, 235, 245, .4); stroke-dasharray: 2 4; }
.way-line--forge { stroke: rgba(255, 154, 61, .7); }
.way-line--wreck { stroke: rgba(255, 255, 255, .5); stroke-dasharray: 6 4; }
.way-line--cabal { stroke: rgba(255, 106, 85, .6); }
.way-line--core { stroke: rgba(199, 164, 255, .7); }
.way-line--net { stroke: rgba(234, 246, 255, .5); stroke-dasharray: 1 5; }
.room-node--zone { color: #f3f7f4; }
.room-node--vex { color: var(--vex); }
.room-node--sector { color: #cfd6e6; }
.room-node--forge { color: var(--ember); }
.room-node--wreck { color: #ffffff; }
.room-node--cabal { color: var(--flora); }
.room-node--core { color: var(--core); }
.room-node--sector i, .room-node--wreck i { transform: none; }
.nessos .room-label { text-shadow: 0 1px 6px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9); }

/* ---------- Pastilles ---------- */
.nessos .spot[hidden] { display: none; }
.spot[data-secret="winks"] { color: #d7f6f1; border-color: rgba(127, 224, 210, .7); }
.spot[data-secret="crew"] { color: #fff; border-color: rgba(255, 255, 255, .8); box-shadow: 0 0 14px rgba(255, 255, 255, .4); }
.spot[data-secret="crew"].found { box-shadow: none; }
.spot[data-secret="pistols"] { color: #ffe3a6; border-color: rgba(255, 210, 122, .85); box-shadow: 0 0 14px rgba(255, 210, 122, .5); }
.spot--cayde { color: #0a0d16; background: var(--ember); border-color: var(--ember-hi); box-shadow: 0 0 0 0 rgba(255, 154, 61, .7); animation: cayde-blink 1.4s ease-in-out infinite; }
.spot--cayde.found { animation: none; background: rgba(8, 11, 18, .7); color: var(--ember-hi); }
@keyframes cayde-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 154, 61, .7); opacity: 1; } 50% { box-shadow: 0 0 0 12px rgba(255, 154, 61, 0); opacity: .55; } }

/* ---------- Planche des deux pistolets ---------- */
.pistols { position: relative; margin: 0 0 clamp(30px, 4vw, 44px); border: 1px solid var(--line); background: #8f9196; }
.pistols img { display: block; width: 100%; aspect-ratio: 16 / 8.2; object-fit: cover; object-position: 50% 38%; }
.pistols figcaption { padding: 10px 14px; background: var(--panel-solid); font-size: .84rem; line-height: 1.55; color: var(--muted); }
.pistols figcaption b { color: var(--pearl); }

@media (max-width: 1020px) {
  .failsafe { grid-template-columns: minmax(0, 1fr); }
  .failsafe-photo { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 680px) {
  .voice-switch button { padding: 8px 10px; letter-spacing: .1em; }
  .nessos .depths { aspect-ratio: 10 / 13; }
}
@media (prefers-reduced-motion: reduce) {
  .milk::after, .fall, .spot--cayde { animation: none; }
}
/* la coupe est suivie du récit de l'Épisode Échos : un peu d'air entre les deux */
.nessos .depths-layout + .steps { margin-top: clamp(36px, 5vw, 56px); }
.failsafe-photo.quarter-photo { aspect-ratio: auto; overflow: hidden; }