/* =========================================================
   Thème : Le Dernier Voyage
   Noir, rouge sang, bleu électrique. Typographie condensée.
   L'ambiance glisse d'un chapitre à l'autre via data-mood :
   lab (bleu) → ash (rouge) → truth (rouge/bleu) → vortex → dawn (orangé)
   ========================================================= */

/* Propriétés typées : permettent une transition douce des couleurs */
@property --accent      { syntax: "<color>"; inherits: true; initial-value: #4c9bff; }
@property --accent-2    { syntax: "<color>"; inherits: true; initial-value: #9fd0ff; }
@property --accent-text { syntax: "<color>"; inherits: true; initial-value: #8cc0ff; }
@property --bg          { syntax: "<color>"; inherits: true; initial-value: #000000; }
@property --glow        { syntax: "<color>"; inherits: true; initial-value: #1d4fd1; }

.theme-ldv {
  --bg: #000000;
  --surface: #0a0c12;
  --ink: #e8e2d8;
  --ink-muted: #9b958c;
  --font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Literata", Georgia, serif;

  --blood: #b00d14;
  --blood-bright: #ff3b3b;
  --electric: #4c9bff;

  transition: --accent 1.6s ease, --accent-2 1.6s ease, --accent-text 1.6s ease, --bg 2s ease, --glow 1.6s ease;
}

.theme-ldv[data-mood="lab"]    { --accent: #4c9bff; --accent-2: #9fd0ff; --accent-text: #8cc0ff; --bg: #000; --glow: #1d4fd1; }
.theme-ldv[data-mood="ash"]    { --accent: #d0141c; --accent-2: #ff7a4a; --accent-text: #ff4d4d; --bg: #0d0203; --glow: #8a0a10; }
.theme-ldv[data-mood="truth"]  { --accent: #d0141c; --accent-2: #6fb0ff; --accent-text: #ff4d4d; --bg: #07030a; --glow: #5a0a2a; }
.theme-ldv[data-mood="vortex"] { --accent: #6f8dff; --accent-2: #ff4d6a; --accent-text: #9fb3ff; --bg: #02030b; --glow: #3a2cff; }
.theme-ldv[data-mood="dawn"]   { --accent: #ff9a4a; --accent-2: #ffd38a; --accent-text: #ffb37a; --bg: #0c0910; --glow: #a3461a; }

/* Halo ambiant derrière le texte, teinté par le chapitre */
.theme-ldv::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 40vmax at 85% 110%, color-mix(in srgb, var(--glow) 28%, transparent), transparent 70%),
    radial-gradient(40vmax 30vmax at 0% 0%, color-mix(in srgb, var(--glow) 14%, transparent), transparent 70%);
}

/* ---------- Grain et brume ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

.fog { pointer-events: none; }
.fog::before, .fog::after {
  content: ""; position: absolute; inset: -20% -40%;
  background:
    radial-gradient(35% 25% at 30% 60%, rgb(200 210 230 / .10), transparent 70%),
    radial-gradient(30% 20% at 70% 40%, rgb(200 210 230 / .08), transparent 70%),
    radial-gradient(40% 30% at 50% 90%, rgb(200 210 230 / .12), transparent 70%);
  filter: blur(20px);
  animation: drift 38s linear infinite alternate;
}
.fog::after { animation-duration: 55s; animation-direction: alternate-reverse; opacity: .7; }
@keyframes drift { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(8%, -3%, 0); } }

.fog--hero { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.fog--fixed { position: fixed; inset: 0; z-index: 0; opacity: .5; overflow: hidden; }
.theme-ldv[data-mood="dawn"] .fog--fixed { opacity: .15; transition: opacity 2s; }

/* ---------- Ouverture ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; align-items: end;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: -10% 0 0; z-index: -1; will-change: transform; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; animation: lab-flicker 7s infinite; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(to top, #000 4%, rgb(0 0 0 / .55) 40%, rgb(0 0 0 / .25) 70%, rgb(0 0 0 / .6)),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px);
}

.hero__content {
  position: relative; z-index: 2;
  width: min(100%, 76rem); margin: 0 auto;
  padding: 6rem var(--gutter) clamp(3rem, 10vh, 6rem);
}
.hero__date {
  display: flex; gap: 1.2rem;
  font-family: var(--font-display); font-weight: 500; font-size: 1.15rem;
  font-variant-numeric: tabular-nums; letter-spacing: .08em;
  color: var(--electric);
  text-shadow: 0 0 12px rgb(76 155 255 / .7);
}
.hero__date span:last-child { color: var(--blood-bright); text-shadow: 0 0 12px rgb(255 59 59 / .6); }

.hero__title {
  margin-top: .3em;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3rem, min(10vw, 15vh), 8.5rem);
  line-height: .8; text-transform: uppercase; letter-spacing: -.01em;
  color: var(--ink);
  text-shadow: 0 0 1px #fff, 0 0 30px rgb(76 155 255 / .45);
  animation: title-flicker 6s infinite;
}
.hero__subtitle { margin-top: 1.4rem; max-width: 30em; font-style: italic; color: var(--ink); }
.hero__meta { margin-top: .4rem; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }
.hero__start {
  display: inline-block; margin-top: 2rem;
  padding: .85rem 1.4rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  color: #fff; background: var(--blood);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(255 59 59 / .5), 0 0 30px rgb(208 20 28 / .45);
}
.hero__start:hover { background: #d0141c; text-decoration: none; }

/* Lumières vacillantes : creux irréguliers, jamais d'éclair stroboscopique */
@keyframes title-flicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20% { opacity: .55; }
  63% { opacity: .7; }
}
@keyframes lab-flicker {
  0%, 40%, 44%, 100% { filter: brightness(1); }
  42% { filter: brightness(.6); }
  43% { filter: brightness(.9); }
}

/* ---------- Sommaire ---------- */
.toc { padding-top: clamp(3rem, 8vh, 5rem); }
.toc a { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; }
.toc a::before { color: var(--accent-text); }

/* ---------- Texte ---------- */
.chapter__title {
  font-weight: 800; text-transform: uppercase; letter-spacing: .005em;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); line-height: .92;
}
.chapter__num { color: var(--accent-text); font-family: var(--font-ui); text-transform: none; font-weight: 500; }

.whisper {
  font-style: italic; color: var(--accent-2);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent-2) 55%, transparent);
  animation: breathe 4.5s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 1; letter-spacing: 0; } 50% { opacity: .65; letter-spacing: .02em; } }

.shout {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem); line-height: 1;
  color: var(--blood-bright); text-indent: 0; padding-left: 0;
  margin-block: .6em !important;
}
.shout.is-seen { animation: shake .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); }
}

.shriek.is-seen { animation: shriek .9s steps(2) 1; }
@keyframes shriek { 0%, 100% { transform: none; } 25% { transform: skewX(-6deg); color: var(--blood-bright); } 50% { transform: skewX(4deg); } 75% { transform: skewX(-2deg); } }

.sky { transition: color 2.5s ease; }
.sky.is-seen { color: var(--blood-bright); }

.tear.is-seen { animation: tear 1.1s steps(1) 1; }
@keyframes tear {
  0%   { clip-path: inset(0 0 0 0); transform: none; }
  15%  { clip-path: inset(10% 0 55% 0); transform: translateX(-10px); }
  30%  { clip-path: inset(60% 0 5% 0); transform: translateX(12px); }
  45%  { clip-path: inset(30% 0 40% 0); transform: translateX(-6px); }
  60%, 100% { clip-path: inset(0 0 0 0); transform: none; }
}

.flash.is-seen::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none;
  background: #fff; opacity: 0;
  animation: flash 1.6s ease-out 1;
}
@keyframes flash { 0% { opacity: 0; } 12% { opacity: .55; } 100% { opacity: 0; } }

.void { margin-bottom: 6em; color: var(--ink-muted); }

.readout {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--electric);
  padding: 0 .3em; border: 1px solid currentColor; border-radius: 2px;
  white-space: nowrap;
}
.readout--alert { color: var(--blood-bright); animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.readout--block {
  display: table; margin-inline: auto; padding: .3em .8em;
  font-size: var(--step-2); color: var(--accent-2);
}

.terminal {
  margin-block: 2em !important;
  padding: 1.2rem 1.4rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .95rem; line-height: 1.5;
  color: #9fd0ff; background: #020611;
  border-left: 3px solid var(--electric);
  box-shadow: inset 0 0 40px rgb(76 155 255 / .12);
}
.terminal__blink { animation: pulse 1.1s steps(2) infinite; }
.terminal__blink::after { content: "▌"; margin-left: .25em; }

/* ---------- Illustrations ---------- */
.illu__frame { box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--glow) 70%, transparent); }
.illu__frame img { transition: transform .1s linear; will-change: transform; }
.illu--flicker .illu__frame img { animation: lab-flicker 9s infinite 2s; }


.illu--vortex .illu__frame { background: #000; }
.vortex-rings { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; mix-blend-mode: screen; pointer-events: none; }
.vortex-rings span {
  grid-area: 1 / 1; border-radius: 50%;
  border: 2px solid rgb(111 141 255 / .55);
  border-top-color: rgb(255 77 106 / .8);
  width: 30%; aspect-ratio: 1.6;
  animation: spin 9s linear infinite;
}
.vortex-rings span:nth-child(2) { width: 55%; animation-duration: 14s; animation-direction: reverse; opacity: .7; }
.vortex-rings span:nth-child(3) { width: 85%; animation-duration: 22s; opacity: .45; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Photographie retournable ---------- */
.photo { margin: 3rem auto !important; width: min(20rem, 75vw); text-align: center; }
.photo__card {
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 6;
  padding: 0; border: 0; background: none;
  perspective: 1200px;
}
.photo__face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .9s var(--ease-out);
  background: #f2ece0; padding: .7rem .7rem 2.6rem;
  box-shadow: 0 20px 50px -15px rgb(0 0 0 / .8);
}
.photo__face--front { transform: rotate(-2deg); }
.photo__face--front img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) contrast(1.05); }
.photo__face--back {
  transform: rotateY(180deg) rotate(2deg);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem;
  color: #1a1410; padding: 1.5rem;
}
.photo__quote { font-family: var(--font-body); font-style: italic; font-size: 1.25rem; line-height: 1.4; }
.photo__date { position: absolute; right: 1rem; bottom: .8rem; font-family: var(--font-ui); font-size: .8rem; }
.photo__card[aria-pressed="true"] .photo__face--front { transform: rotateY(-180deg) rotate(-2deg); }
.photo__card[aria-pressed="true"] .photo__face--back  { transform: rotateY(0) rotate(2deg); }
.photo figcaption { margin-top: 1rem; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }
.photo[data-placeholder] .photo__face--front::after {
  content: "Illustration provisoire"; position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%);
  font: 500 .7rem/1 var(--font-ui); color: #6d6458;
}

.photo-text { font-style: italic; text-align: center; }

/* ---------- Fin ---------- */
.led {
  display: inline-block; width: .45rem; height: .45rem; margin-left: .5rem; vertical-align: middle;
  border-radius: 50%; background: #1a2333;
}
.led.is-seen { animation: led 2.2s ease-out 1 .6s; }
@keyframes led {
  0% { background: #1a2333; box-shadow: none; }
  15% { background: #6fc3ff; box-shadow: 0 0 12px 3px #4c9bff; }
  40%, 100% { background: #1a2333; box-shadow: none; }
}
.the-end {
  margin-top: 4em !important; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-2);
  text-transform: uppercase; letter-spacing: .3em; color: var(--accent-text);
}

/* Le mode page conserve l'ouverture visible au-dessus */
.is-paged .toc { padding-bottom: 1rem; }

/* Sans effets : figer l'image de l'ouverture */
.fx-off .hero__bg { transform: none !important; }
.fx-off .grain, .fx-off .fog { display: none; }
@media (prefers-reduced-motion: reduce) {
  .grain, .fog { display: none; }
  .flash.is-seen::after { display: none; }
}

:lang(en) .photo[data-placeholder] .photo__face--front::after { content: "Placeholder illustration"; }

:lang(sq) .photo[data-placeholder] .photo__face--front::after { content: "Ilustrim i përkohshëm"; }