/* =========================================================================
   PRYNCE « LAVAR » DAVIS — feuille de styles
   1. Tokens   2. Base   3. Calques globaux   4. HUD & nav
   5. Chapitres & scènes   6. Typographie narrative
   7. Décors « peints » de substitution (remplacés par les PNG générés)
   8. Accessoires animés   9. Modes : animé / statique / mobile
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --ink: #07090f;
  --night: #0b1a24;
  --petrol: #12333f;
  --petrol-2: #1d4b57;
  --violet: #23143a;
  --violet-2: #3d2257;

  --amber: #f2a23a;
  --sodium: #ff8a2a;
  --amber-soft: #ffd08a;
  --ember: #e0432a;
  --ember-deep: #8f1d14;

  --paper: #efe6d6;
  --paper-dim: #c9bfae;
  --muted: #9a9183;

  --accent: var(--amber);

  --f-title: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-serif: "Spectral", Georgia, "Times New Roman", serif;
  --f-mono: "Courier Prime", "Courier New", monospace;
  --f-tag: "Permanent Marker", "Comic Sans MS", cursive;

  --gutter: clamp(16px, 6vw, 96px);
  --mx: 0;
  --my: 0;

  /* Grain papier / texture pinceau générés en SVG (aucun fichier externe) */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1.4 .9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-serif);
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--amber-soft); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
h1:focus, h2:focus, .chapter:focus { outline: none; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--amber); color: var(--ink); padding: .6em 1em;
  font-family: var(--f-mono); text-decoration: none; transition: top .2s;
}
.skip:focus { top: 16px; }
.noscript { padding: 2rem var(--gutter); font-family: var(--f-mono); }

/* ---------- 3. Calques globaux ---------- */
#fx {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 40;
}
.grain {
  position: fixed; inset: -50%; z-index: 41; pointer-events: none;
  background-image: var(--noise);
  opacity: .22; mix-blend-mode: overlay;
}
.anim .grain { animation: grain 0.9s steps(4) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -2%); }
}
.vignette {
  position: fixed; inset: 0; z-index: 39; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(4, 5, 10, .75) 100%);
}
.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; background: rgba(255,255,255,.06); }
.progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--amber), var(--ember));
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- 4. HUD & navigation ---------- */
.hud {
  position: fixed; top: 14px; right: 16px; z-index: 60;
  display: flex; align-items: center; gap: 1rem;
}
.hud__hint {
  font-family: var(--f-mono); font-size: .75rem; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
}
.sound {
  display: inline-flex; align-items: center; gap: .6em;
  font: 700 .75rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper); background: rgba(7, 9, 15, .55);
  border: 1px solid rgba(239, 230, 214, .25); border-radius: 999px;
  padding: .65em 1em; cursor: pointer; backdrop-filter: blur(6px);
}
.sound:hover { border-color: var(--amber); }
.sound__bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.sound__bars i { width: 3px; height: 4px; background: var(--muted); }
.sound[aria-pressed="true"] .sound__bars i { background: var(--amber); animation: bars 1s ease-in-out infinite alternate; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-delay: -.4s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-delay: -.7s; }
@keyframes bars { from { height: 3px; } to { height: 12px; } }

.chapters-nav {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 60;
}
.chapters-nav ol { display: flex; flex-direction: column; gap: 4px; }
.chapters-nav a {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end; gap: .6em;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em;
  color: var(--muted); text-decoration: none; padding: 3px 4px;
}
.chapters-nav a span { opacity: .55; transition: opacity .2s, color .2s; }
.chapters-nav a em {
  position: absolute; right: calc(100% + 4px); pointer-events: none;
  font-style: normal; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s;
  background: rgba(7,9,15,.7); padding: 2px 6px;
}
.chapters-nav a::after {
  content: ""; width: 14px; height: 2px; background: currentColor; opacity: .5;
  transition: width .25s, opacity .25s;
}
.chapters-nav a:hover em, .chapters-nav a:focus-visible em { opacity: 1; transform: none; }
.chapters-nav a:hover span, .chapters-nav a:focus-visible span { opacity: 1; }
.chapters-nav a[aria-current="step"] { color: var(--accent); }
.chapters-nav a[aria-current="step"] span { opacity: 1; }
.chapters-nav a[aria-current="step"]::after { width: 28px; opacity: 1; }

/* ---------- 5. Chapitres & scènes ---------- */
.chapter {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink);
  isolation: isolate;
}
.stage { position: relative; min-height: inherit; }
.scene {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  perspective: 1200px;
}
.tilt {
  position: absolute; inset: 0;
  transform: rotateX(calc(var(--my) * -1.4deg)) rotateY(calc(var(--mx) * 2deg));
}
.layer { position: absolute; inset: -12% -6%; }
.layer-inner {
  position: absolute; inset: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transform: translate3d(calc(var(--mx) * var(--d, 0) * -26px), calc(var(--my) * var(--d, 0) * -16px), 0);
}
/* Quand un PNG peint est chargé, il remplace le décor de substitution */
.has-art > .layer-inner > *, .has-art.half__art > * { display: none; }
.has-art > .layer-inner::before, .has-art > .layer-inner::after { display: none; }
.layer-inner > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Flashback : désaturé, légèrement sépia */
.chapter--flashback .scene { filter: grayscale(.8) sepia(.25) contrast(1.05) brightness(.9); }
.chapter--flashback .copy { --accent: var(--paper-dim); }

/* Coup de pinceau de transition (injecté par JS) */
.wipe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 30; pointer-events: none;
}
.wipe path {
  fill: none; stroke: var(--ink); stroke-width: 26; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 0;
}

/* ---------- 6. Typographie narrative ---------- */
.copy {
  position: relative; z-index: 5;
  min-height: inherit;
  display: grid; align-content: center;
  padding: 14vh calc(var(--gutter) + 90px) 14vh var(--gutter);
}
.copy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.copy--left { justify-items: start; }
.copy--left::before { background: linear-gradient(90deg, rgba(7,9,15,.82) 0%, rgba(7,9,15,.45) 45%, transparent 75%); }
.copy--right { justify-items: end; }
.copy--right::before { background: linear-gradient(270deg, rgba(7,9,15,.82) 0%, rgba(7,9,15,.45) 45%, transparent 75%); }
.copy--center { justify-items: center; text-align: center; }
.copy--center::before { background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(7,9,15,.7), transparent 75%); }

.beats { display: flex; flex-direction: column; gap: 4rem; max-width: 36rem; width: 100%; }
.copy--center .beats { max-width: 60rem; align-items: center; }
.beat { position: relative; display: flex; flex-direction: column; gap: 1.1rem; }
.copy--center .beat { align-items: center; }
.beat--wide { width: 100%; }

.mono {
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.mono--accent { font-size: 1rem; color: var(--amber); }
.narr { color: var(--paper); text-wrap: pretty; }
.narr--big { font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem); line-height: 1.2; font-style: italic; }
.lede { font-style: italic; color: var(--paper-dim); }

.chapter-title {
  font-family: var(--f-title); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.4rem, 1.4rem + 4.5vw, 5rem); line-height: .95; letter-spacing: .01em;
  color: var(--paper);
}

/* Titres « peints » : texture de pinceau dans la lettre + bords irréguliers */
.paint, .paint-red {
  filter: url(#rough-text);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .paint, .paint-red {
    background-image: var(--brush), linear-gradient(170deg, var(--amber-soft) 0%, var(--amber) 45%, var(--sodium) 100%);
    background-size: 600px 300px, 100% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .paint-red {
    background-image: var(--brush), linear-gradient(170deg, #ff8f6e 0%, var(--ember) 50%, #b8261a 100%);
  }
}

/* Texte découpé mot par mot : la texture est portée par chaque mot
   (Chrome casse le background-clip:text d'un parent dont les enfants sont composités). */
.paint-words .w, .paint-words-red .w { filter: url(#rough-text); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .paint-words .w, .paint-words-red .w {
    background-image: var(--brush), linear-gradient(170deg, var(--amber-soft) 0%, var(--amber) 45%, var(--sodium) 100%);
    background-size: 600px 300px, 100% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding: .18em .04em 0; margin-top: -.18em; /* laisse la place aux accents (É) */
  }
  .paint-words-red .w {
    background-image: var(--brush), linear-gradient(170deg, #ff8f6e 0%, var(--ember) 50%, #b8261a 100%);
  }
}
.q { font-family: var(--f-serif); font-weight: 400; font-size: .55em; vertical-align: .35em; padding: 0 .12em; }

.title { display: flex; flex-direction: column; align-items: center; line-height: .9; font-weight: 400; }
.title__small {
  font-family: var(--f-title); text-transform: uppercase; letter-spacing: .3em;
  font-size: clamp(1.3rem, .9rem + 2vw, 2.4rem); color: var(--paper);
}
.title__big {
  font-family: var(--f-title); text-transform: uppercase;
  font-size: clamp(4rem, 1rem + 13vw, 13rem); letter-spacing: -.01em; padding: .05em .1em;
}
.scroll-cue {
  margin-top: 2rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--muted);
}
.scroll-cue::after {
  content: ""; display: block; width: 1px; height: 42px; margin: .8rem auto 0;
  background: linear-gradient(var(--amber), transparent);
}

.scribble {
  font-family: var(--f-tag); color: var(--paper-dim); opacity: .75;
  font-size: 1.6rem; transform: rotate(-6deg); align-self: flex-end; margin-right: -1rem;
}
.scribble--alt { transform: rotate(4deg); color: var(--amber-soft); }
.scribble--red { color: var(--ember); }

.nickname {
  font-family: var(--f-title); font-size: clamp(5rem, 1rem + 17vw, 17rem);
  line-height: .9; letter-spacing: -.01em; white-space: nowrap; display: flex;
}
.nickname .ins { display: inline-block; overflow: hidden; max-width: 1em; }
.definition {
  max-width: 34rem; font-style: italic; color: var(--paper);
  border-left: 2px solid var(--amber); padding-left: 1rem; text-align: left;
}
.definition .mono { font-style: normal; font-size: 1rem; }

.dialogue { display: flex; flex-direction: column; gap: .9rem; }
.d { max-width: 30rem; padding-left: 1rem; border-left: 2px solid; font-style: italic; }
.d--her { border-color: var(--ember); }
.d--him { border-color: var(--amber); margin-left: 2rem; }

.ultimatum {
  font-family: var(--f-title); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3.6rem, 1rem + 12vw, 12rem); line-height: .9;
}
.chapter--tension .copy { --accent: var(--ember); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ultimatum.paint { background-image: var(--brush), linear-gradient(170deg, #ff8f6e, var(--ember) 50%, #a81f14); }
}

.quote { font-size: clamp(1.8rem, 1rem + 3vw, 3.4rem); line-height: 1.15; font-style: italic; font-weight: 500; }

.officially {
  font-family: var(--f-title); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3rem, 1rem + 9vw, 9rem); line-height: .9;
}
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; text-align: left; width: 100%; }
.card {
  position: relative; padding: 1.4rem 1.3rem 1.6rem;
  background: rgba(14, 22, 30, .82); border: 1px solid rgba(242, 162, 58, .25);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  font-size: 1.05rem;
}
.card::before {
  content: ""; position: absolute; left: 1.2rem; top: -8px; width: 54px; height: 16px;
  background: rgba(239, 230, 214, .35); transform: rotate(-3deg);
}
.card .mono { margin-bottom: .6rem; }

.copy--center .dialogue { text-align: left; }

.attentions { display: flex; flex-direction: column; gap: 1.1rem; max-width: 40rem; text-align: left; }
.attentions li { position: relative; padding-left: 1.6rem; }
.attentions li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: .7rem; height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--ember));
}

.napkin {
  width: min(26rem, 92%); height: auto; margin-top: .6rem;
  transform: rotate(-2.5deg); filter: drop-shadow(0 24px 40px rgba(0,0,0,.55));
}
.napkin__paper { fill: #ece4d4; }
.napkin__fold { fill: none; stroke: rgba(60, 50, 40, .12); stroke-width: 1; stroke-dasharray: 3 4; }
.napkin__sketch path {
  fill: none; stroke: #2e2b28; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: url(#rough-soft);
}
.napkin__notes text { font-family: var(--f-tag); font-size: 13px; fill: #3a332c; }
.napkin__notes text:nth-child(4) { fill: var(--ember); font-size: 15px; }
.napkin__notes text:nth-child(5) { fill: #8f1d14; font-size: 15px; }
.napkin__notes path { fill: none; stroke: #8f1d14; stroke-width: 1.5; stroke-linecap: round; }
html:not(.anim) .napkin__sketch path { stroke-dashoffset: 0; }

.clock {
  position: relative; font-family: var(--f-mono); font-weight: 700;
  font-size: clamp(4rem, 2rem + 9vw, 10rem); line-height: 1; color: var(--paper);
  display: grid;
}
.clock span { grid-area: 1 / 1; }
.clock__b { color: var(--ember); opacity: 0; }

.phone {
  position: relative; width: min(320px, 80vw); aspect-ratio: 9 / 18; justify-self: center;
  border-radius: 34px; padding: 3.2rem 1rem 1rem;
  background: linear-gradient(180deg, #0c1219, #070a0f);
  border: 2px solid rgba(239,230,214,.18);
  box-shadow: 0 0 0 8px #05070b, 0 30px 80px rgba(0,0,0,.7), 0 0 120px rgba(224, 67, 42, .18);
  overflow: hidden;
}
.phone::before {
  content: ""; position: absolute; top: 14px; left: 50%; width: 80px; height: 18px;
  transform: translateX(-50%); background: #05070b; border-radius: 12px;
}
.phone__count { color: var(--ember); margin-bottom: .9rem; font-size: .72rem; }
.phone__list { display: flex; flex-direction: column; gap: .5rem; }
.notif {
  font-family: var(--f-mono); font-size: .78rem; line-height: 1.35; color: var(--paper-dim);
  background: rgba(239,230,214,.07); border-radius: 12px; padding: .55rem .7rem;
}
.notif span { display: block; color: var(--paper); font-weight: 700; letter-spacing: .05em; }

.copy--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center;
}
.copy--split::before { background: linear-gradient(270deg, rgba(7,9,15,.8), rgba(7,9,15,.3) 60%, transparent); }

.copy--duo { justify-items: center; text-align: center; align-content: center; gap: 1.2rem; }
.copy--duo::before { background: radial-gradient(ellipse 80% 60% at 50% 55%, rgba(7,9,15,.65), transparent 80%); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 8vw, 10rem); width: min(100%, 70rem); margin-top: 2rem; text-align: left; }
.duo__who {
  font-family: var(--f-title); text-transform: uppercase; font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  line-height: 1;
}
.duo__col--him .duo__who { color: var(--amber); }
.duo__col--her .duo__who { color: var(--ember); }
.duo__col--her { text-align: right; }

.final { font-family: var(--f-title); text-transform: uppercase; font-size: clamp(2.4rem, 1rem + 6vw, 7rem); line-height: .95; }
.credits { margin-top: 2rem; color: var(--paper-dim); }
.restart {
  display: inline-block; margin-top: 1rem; font-family: var(--f-mono); font-size: .8rem;
  letter-spacing: .15em; text-transform: uppercase; text-decoration: none;
  border: 1px solid currentColor; padding: .7em 1.2em;
}
.restart:hover { color: var(--ink); background: var(--amber-soft); }

/* Mots découpés pour l'effet d'encre */
.w { display: inline-block; will-change: opacity, filter, transform; }

/* ---------- 7. Décors de substitution « peints » ----------
   Chaque classe ph-* approxime le calque à générer. Le fichier PNG/WebP
   déclaré dans assets/manifest.json prend sa place automatiquement. */

.ph-sky-night {
  background:
    radial-gradient(ellipse 30% 22% at 72% 18%, rgba(190, 160, 255, .22), transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 92%, rgba(255, 138, 42, .32), transparent 70%),
    linear-gradient(180deg, #0e0820 0%, #1d1036 35%, #1b2a48 68%, #12333f 85%, #0b1a24 100%);
}
.ph-city-glow {
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 78%, rgba(255, 150, 60, .55), transparent 9%),
    radial-gradient(circle at 34% 84%, rgba(255, 170, 80, .45), transparent 7%),
    radial-gradient(circle at 57% 80%, rgba(255, 130, 40, .5), transparent 8%),
    radial-gradient(circle at 76% 86%, rgba(255, 175, 90, .45), transparent 6%),
    radial-gradient(circle at 88% 76%, rgba(224, 67, 42, .4), transparent 7%),
    radial-gradient(ellipse 70% 18% at 50% 92%, rgba(255, 138, 42, .35), transparent 70%);
}
.ph-lamp {
  position: absolute; left: 8%; bottom: 0; width: 26px; height: 92%;
  background: linear-gradient(90deg, #04060a, #141a22 50%, #04060a);
}
.ph-lamp::before {
  content: ""; position: absolute; top: 0; left: 0; width: 220px; height: 22px;
  background: #06080c; border-radius: 0 14px 14px 0;
}
.ph-lamp::after {
  content: ""; position: absolute; top: 10px; left: 120px; width: 420px; height: 420px;
  transform: translate(-50%, -30%);
  background: radial-gradient(circle, rgba(255, 170, 70, .85) 0, rgba(255, 138, 42, .35) 12%, transparent 60%);
  mix-blend-mode: screen;
}
.ph-wires {
  position: absolute; inset: 0;
  background:
    linear-gradient(176deg, transparent 22.6%, #05070b 22.7%, #05070b 23%, transparent 23.1%),
    linear-gradient(178deg, transparent 30.6%, #05070b 30.7%, #05070b 30.9%, transparent 31%);
}

.ph-sky-overcast {
  background:
    radial-gradient(ellipse 60% 30% at 40% 20%, rgba(200,200,200,.12), transparent),
    linear-gradient(180deg, #2c3138 0%, #23282e 50%, #15181c 100%);
}
.ph-el-train {
  background:
    linear-gradient(180deg, transparent 38%, #111418 38%, #111418 43%, #1b1f24 43%, #1b1f24 45%, transparent 45%),
    repeating-linear-gradient(90deg, transparent 0 9%, #101317 9% 10.2%, transparent 10.2% 12%);
  -webkit-mask: linear-gradient(180deg, transparent 37%, #000 37%);
          mask: linear-gradient(180deg, transparent 37%, #000 37%);
}
.ph-visit-window {
  background:
    radial-gradient(ellipse 12% 22% at 50% 58%, rgba(220, 210, 180, .16), transparent 80%),
    linear-gradient(90deg, transparent 38%, rgba(160,170,175,.1) 38% 62%, transparent 62%);
}
.ph-bars {
  background:
    repeating-linear-gradient(90deg, transparent 0 7%, #090b0e 7% 8.6%, #1c2026 8.6% 9.1%, transparent 9.1% 14%),
    linear-gradient(180deg, #090b0e 0 6%, transparent 6% 94%, #090b0e 94%);
}

.ph-kitchen {
  background:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(29, 75, 87, .35), transparent 70%),
    linear-gradient(180deg, #0c1820 0%, #0a131a 70%, #070c11 100%);
}
.ph-window {
  position: absolute; left: 66%; top: 16%; width: 22%; height: 32%;
  background:
    repeating-linear-gradient(180deg, rgba(10, 14, 20, .9) 0 14px, transparent 14px 22px),
    radial-gradient(circle at 70% 30%, rgba(255, 160, 60, .9), rgba(255, 120, 40, .4) 35%, rgba(60, 30, 40, .6) 80%);
  box-shadow: 0 0 0 10px #0a0f14, 0 0 120px 20px rgba(255, 138, 42, .2);
}
.ph-floor-spill {
  background: radial-gradient(ellipse 40% 18% at 36% 86%, rgba(190, 230, 255, .28), transparent 70%);
}
.ph-fridge {
  position: absolute; left: 26%; top: 22%; width: 18%; min-width: 150px; height: 60%;
  background: linear-gradient(180deg, #d9f0ff 0%, #9cc4d8 60%, #6d97ab 100%);
  border: 10px solid #1a252d; border-radius: 6px;
  box-shadow: 0 0 160px 40px rgba(170, 220, 255, .22);
}
.ph-fridge i {
  position: absolute; left: 4%; right: 4%; height: 3px; background: rgba(40, 60, 70, .55);
}
.ph-fridge i:nth-child(1) { top: 28%; }
.ph-fridge i:nth-child(2) { top: 52%; }
.ph-fridge i:nth-child(3) { top: 76%; }
.ph-fridge b {
  position: absolute; right: 100%; top: -10px; bottom: -10px; width: 70%;
  background: linear-gradient(90deg, #0f171d, #1d2a33);
  transform: perspective(500px) rotateY(55deg); transform-origin: 100% 50%;
}
.ph-cold-light {
  mix-blend-mode: screen;
  background: conic-gradient(from 200deg at 34% 40%, transparent 0deg, rgba(170, 220, 255, .18) 30deg, transparent 75deg);
}
.ph-table {
  background:
    linear-gradient(175deg, transparent 72%, #05080b 72.5%),
    radial-gradient(ellipse 30% 6% at 30% 74%, rgba(239,230,214,.15), transparent);
}

.ph-concrete {
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(242, 162, 58, .14), transparent 70%),
    linear-gradient(180deg, #1a1f26, #10141a);
}
.ph-tags span {
  position: absolute; font-family: var(--f-tag); font-size: clamp(2rem, 5vw, 5rem);
  color: rgba(239, 230, 214, .16); white-space: nowrap;
}
.ph-tags--red span { color: rgba(224, 67, 42, .35); }
.ph-tags .crossed { text-decoration: line-through; text-decoration-thickness: .12em; }
.ph-splats {
  background:
    radial-gradient(circle at 22% 30%, rgba(242,162,58,.5) 0 2.2%, transparent 2.5%),
    radial-gradient(circle at 25% 34%, rgba(242,162,58,.5) 0 .6%, transparent .8%),
    radial-gradient(circle at 78% 64%, rgba(224,67,42,.45) 0 3%, transparent 3.3%),
    radial-gradient(circle at 74% 70%, rgba(224,67,42,.45) 0 .8%, transparent 1%),
    radial-gradient(circle at 60% 22%, rgba(242,162,58,.35) 0 1.2%, transparent 1.4%);
  filter: url(#rough-soft);
}
.ph-fence {
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(5,7,11,.9) 18px 21px),
    repeating-linear-gradient(-45deg, transparent 0 18px, rgba(5,7,11,.9) 18px 21px);
  -webkit-mask: linear-gradient(90deg, #000 0 16%, transparent 30% 78%, #000 92%);
          mask: linear-gradient(90deg, #000 0 16%, transparent 30% 78%, #000 92%);
}

.ph-sky-flood {
  background:
    linear-gradient(115deg, transparent 30%, rgba(220, 235, 255, .1) 38%, transparent 46%),
    linear-gradient(65deg, transparent 54%, rgba(220, 235, 255, .08) 62%, transparent 70%),
    linear-gradient(180deg, #0a1520 0%, #12333f 70%, #1d4b57 100%);
}
.ph-facility { background: linear-gradient(180deg, transparent 40%, #0d151c 40%); }
.ph-facility::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(255, 200, 120, .45) 60px 70px, transparent 70px 120px);
  -webkit-mask: linear-gradient(180deg, transparent 45%, #000 45% 47.5%, transparent 47.5% 53%, #000 53% 55.5%, transparent 55.5%);
          mask: linear-gradient(180deg, transparent 45%, #000 45% 47.5%, transparent 47.5% 53%, #000 53% 55.5%, transparent 55.5%);
}
.ph-chainlink {
  background:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(150, 170, 180, .25) 22px 24px),
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(150, 170, 180, .25) 22px 24px);
  -webkit-mask: linear-gradient(180deg, transparent 28%, #000 32%, #000 85%, transparent);
          mask: linear-gradient(180deg, transparent 28%, #000 32%, #000 85%, transparent);
}
.ph-ground-pool {
  background: radial-gradient(ellipse 45% 14% at 40% 88%, rgba(240, 245, 255, .2), transparent 70%);
}
.ph-wire { top: 4% !important; height: 18% !important; }
.ph-wire path { fill: none; stroke: #05070b; stroke-width: 6; }

.ph-brick-red {
  background:
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(224, 67, 42, .3), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(0,0,0,.35) 30px 33px),
    linear-gradient(180deg, #2a1012, #160a0c);
}
.ph-red-glow {
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 50% 35% at 50% 52%, rgba(224, 67, 42, .35), transparent 70%);
}
.ph-crowd {
  background:
    radial-gradient(ellipse 18% 32% at 6% 100%, #040507 70%, transparent 71%),
    radial-gradient(ellipse 14% 26% at 20% 104%, #06070a 70%, transparent 71%),
    radial-gradient(ellipse 16% 30% at 84% 102%, #040507 70%, transparent 71%),
    radial-gradient(ellipse 20% 36% at 98% 100%, #06070a 70%, transparent 71%);
}

.ph-sky-dusk {
  background: linear-gradient(180deg, #1b1a33 0%, #3a2742 45%, #7a3b33 80%, #b85a2e 100%);
}
.ph-yard-wall {
  background:
    repeating-linear-gradient(90deg, transparent 0 140px, rgba(0,0,0,.25) 140px 144px),
    linear-gradient(180deg, transparent 30%, #1d2027 30% 62%, transparent 62%);
}
.ph-asphalt {
  background:
    linear-gradient(170deg, transparent 72%, rgba(239,230,214,.25) 72.3% 72.8%, transparent 73%),
    linear-gradient(180deg, transparent 58%, #191b20 58%, #0c0d10 100%);
}
.ph-asphalt--day { background: linear-gradient(180deg, transparent 62%, #1f2228 62%, #121418 100%); }
.ph-shoes { position: absolute; bottom: 14%; left: 50%; width: 46%; height: 18%; transform: translateX(-50%); }
.ph-shoes i {
  position: absolute; bottom: 0; width: 42%; height: 100%; border-radius: 50% 50% 18% 18%;
  background: linear-gradient(180deg, #14161b, #050608);
}
.ph-shoes i:first-child { left: 0; }
.ph-shoes i:last-child { right: 0; }

.ph-laundry {
  background:
    radial-gradient(circle at 12% 62%, #0b1218 0 7%, #2b3a44 7% 8.5%, transparent 8.6%),
    radial-gradient(circle at 34% 62%, #0b1218 0 7%, #2b3a44 7% 8.5%, transparent 8.6%),
    radial-gradient(circle at 56% 62%, #0b1218 0 7%, #2b3a44 7% 8.5%, transparent 8.6%),
    radial-gradient(circle at 78% 62%, #0b1218 0 7%, #2b3a44 7% 8.5%, transparent 8.6%),
    linear-gradient(180deg, #101b22, #0b1218 50%, #182630 50% 78%, #0b1218 78%);
}
.ph-sheets {
  background:
    linear-gradient(90deg, transparent 8%, rgba(239,230,214,.12) 8% 22%, transparent 22% 62%, rgba(239,230,214,.1) 62% 80%, transparent 80%);
  -webkit-mask: linear-gradient(180deg, transparent 10%, #000 12%, #000 55%, transparent 70%);
          mask: linear-gradient(180deg, transparent 10%, #000 12%, #000 55%, transparent 70%);
}
.ph-warm-shaft {
  mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 190, 110, .18) 40%, transparent 52%);
}
.ph-steam {
  background:
    radial-gradient(ellipse 40% 20% at 20% 95%, rgba(239,230,214,.12), transparent 70%),
    radial-gradient(ellipse 40% 20% at 80% 98%, rgba(239,230,214,.1), transparent 70%);
}

.ph-sky-dawn {
  background: linear-gradient(180deg, #1a1430 0%, #3b2350 40%, #8b4a3a 75%, #e08a45 100%);
}
.ph-gate-far {
  background:
    radial-gradient(circle at 40% 62%, rgba(255, 200, 120, .8) 0 .5%, transparent 1.6%),
    radial-gradient(circle at 62% 62%, rgba(255, 200, 120, .8) 0 .5%, transparent 1.6%),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(10,12,16,.8) 14px 16px),
    linear-gradient(180deg, transparent 58%, #0d1015 58%);
  -webkit-mask: linear-gradient(180deg, transparent 50%, #000 52%);
          mask: linear-gradient(180deg, transparent 50%, #000 52%);
}
.ph-windshield {
  background:
    linear-gradient(180deg, #06080c 0 10%, transparent 14% 62%, #070a0e 66%);
  box-shadow: inset 0 0 0 4vw #06080c;
}
.ph-seat {
  position: absolute; right: 8%; bottom: 0; width: 46%; height: 48%;
  background: linear-gradient(180deg, #1f1a1a, #0c0a0b);
  border-radius: 40% 40% 0 0 / 22% 22% 0 0;
  box-shadow: inset 0 20px 50px rgba(255, 160, 80, .1);
}
.ph-wheel {
  background: radial-gradient(circle at 8% 92%, transparent 0 22%, #040507 22.3% 26%, transparent 26.3%);
}

.ph-facade {
  background:
    radial-gradient(ellipse 30% 40% at 30% 60%, rgba(239, 230, 214, .08), transparent),
    linear-gradient(180deg, #1c2430 0%, #141b24 100%);
}
.ph-car-frame {
  background:
    linear-gradient(90deg, #030405 0 7%, transparent 9% 91%, #030405 93%),
    linear-gradient(180deg, #030405 0 6%, transparent 9% 88%, #030405 92%);
}

.ph-bokeh {
  background:
    radial-gradient(circle at 15% 30%, rgba(255, 150, 60, .5), transparent 5%),
    radial-gradient(circle at 30% 60%, rgba(224, 67, 42, .45), transparent 6%),
    radial-gradient(circle at 70% 25%, rgba(255, 190, 110, .4), transparent 4%),
    radial-gradient(circle at 85% 70%, rgba(224, 67, 42, .4), transparent 7%),
    radial-gradient(circle at 55% 80%, rgba(80, 160, 190, .35), transparent 6%),
    linear-gradient(180deg, #0a0f18, #120a14);
}
.ph-rain-glass {
  background: repeating-linear-gradient(100deg, transparent 0 38px, rgba(200, 220, 235, .05) 38px 39px);
}
.ph-dark-edge { background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 60%, #030405 100%); }

.ph-sky-industrial {
  background:
    radial-gradient(ellipse 80% 30% at 50% 80%, rgba(255, 138, 42, .28), transparent 70%),
    linear-gradient(180deg, #0a0d14 0%, #161220 45%, #22202a 75%, #0e1116 100%);
}
.ph-containers {
  background:
    linear-gradient(180deg, transparent 56%, rgba(0,0,0,.5) 56% 57%, transparent 57% 66%, rgba(0,0,0,.5) 66% 67%, transparent 67%),
    linear-gradient(90deg, #2a1712 0 14%, #12262c 14% 30%, transparent 30% 36%, #1f2a1c 36% 52%, #31190f 52% 64%, transparent 64% 70%, #142229 70% 88%, #2a1712 88%);
  -webkit-mask: linear-gradient(180deg, transparent 50%, #000 50% 76%, transparent 76%);
          mask: linear-gradient(180deg, transparent 50%, #000 50% 76%, transparent 76%);
  opacity: .55;
}
.ph-sodium-pools {
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 14% 30% at 24% 46%, rgba(255, 150, 60, .5), transparent 70%),
    radial-gradient(ellipse 12% 26% at 68% 44%, rgba(255, 150, 60, .45), transparent 70%),
    radial-gradient(ellipse 50% 10% at 46% 80%, rgba(255, 138, 42, .25), transparent 70%);
}
.ledger { display: flex; flex-direction: column; gap: .2rem; }
.ledger b {
  font-family: var(--f-mono); font-weight: 700; color: var(--amber);
  font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.ph-sky-horizon {
  background:
    radial-gradient(ellipse 60% 16% at 62% 64%, rgba(255, 170, 80, .55), transparent 70%),
    linear-gradient(180deg, #0b0a1c 0%, #1e1436 38%, #4a2a48 56%, #b8662e 64%, #2a1a24 66%, #0b0d14 100%);
}
.ph-ledge {
  background:
    linear-gradient(176deg, transparent 76%, #1a1d24 76.2% 77.4%, #07090d 77.6%);
}
.bottle {
  position: absolute; right: 22%; bottom: 20%; width: clamp(34px, 3.4vw, 54px); z-index: 2;
  filter: drop-shadow(0 0 18px rgba(255, 160, 70, .35)) url(#rough-soft);
}
.bottle__glass { fill: rgba(120, 70, 30, .55); stroke: rgba(255, 200, 130, .5); stroke-width: 1.5; }
.bottle__liquid { fill: rgba(242, 162, 58, .75); }
.bottle__shine { fill: none; stroke: rgba(255, 235, 200, .7); stroke-width: 2; stroke-linecap: round; }

/* Partie II */
.ph-alley {
  background:
    linear-gradient(90deg, #07090d 0 18%, transparent 30% 70%, #07090d 82%),
    radial-gradient(ellipse 30% 50% at 50% 55%, rgba(255, 138, 42, .18), transparent 70%),
    linear-gradient(180deg, #0d1018 0%, #141821 60%, #0a0c11 100%);
}
.ph-gang {
  background:
    radial-gradient(ellipse 3.2% 15% at 40% 66%, #040507 70%, transparent 72%),
    radial-gradient(ellipse 3% 14% at 46% 67%, #05060a 70%, transparent 72%),
    radial-gradient(ellipse 3.6% 17% at 52% 65%, #030406 70%, transparent 72%),
    radial-gradient(ellipse 3% 14% at 58% 67%, #05060a 70%, transparent 72%),
    radial-gradient(ellipse 2.8% 13% at 63% 68%, #040507 70%, transparent 72%);
}
.ph-alley-lamp {
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 52% 26%, rgba(255, 175, 80, .7) 0 1%, rgba(255, 138, 42, .25) 6%, transparent 22%),
    linear-gradient(180deg, transparent 26%, rgba(255, 150, 60, .08) 40%, transparent 80%);
}

.chapter--low .scene { filter: grayscale(.65) brightness(.8); }
.ph-room {
  background:
    radial-gradient(ellipse 50% 40% at 40% 40%, rgba(29, 75, 87, .25), transparent 70%),
    linear-gradient(180deg, #0b1218 0%, #0a1015 65%, #06090c 100%);
}
.ph-blind-stripes {
  mix-blend-mode: screen; opacity: .35;
  background: repeating-linear-gradient(160deg, transparent 0 34px, rgba(255, 190, 120, .22) 34px 48px);
  -webkit-mask: linear-gradient(90deg, transparent 20%, #000 40% 70%, transparent 90%);
          mask: linear-gradient(90deg, transparent 20%, #000 40% 70%, transparent 90%);
}
.ph-mattress {
  background:
    linear-gradient(178deg, transparent 70%, #151a20 70.4% 74%, #090c10 74.4%),
    radial-gradient(ellipse 12% 4% at 30% 71%, rgba(239,230,214,.12), transparent);
}

.ph-void {
  background:
    radial-gradient(ellipse 40% 50% at 72% 50%, rgba(160, 170, 180, .1), transparent 70%),
    linear-gradient(180deg, #0a0d12, #07090d);
}
.mono--red { color: var(--ember); }

.stone-heart {
  position: absolute; right: 12%; top: 50%; width: clamp(150px, 22vw, 320px); z-index: 2;
  transform: translateY(-50%); overflow: visible;
}
.stone-heart__warm { fill: var(--amber); filter: drop-shadow(0 0 28px rgba(242, 162, 58, .55)); }
.stone-heart__marble { opacity: 0; }
.stone-heart__crack {
  fill: none; stroke: #0b0c0f; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
}
html:not(.anim) .stone-heart__marble { opacity: 1; }
html:not(.anim) .stone-heart__crack { stroke-dashoffset: 0; }

.report {
  position: relative; width: min(28rem, 100%); padding: 1.4rem 1.5rem 1.6rem;
  background: #e9e1d1; color: #1a1612; transform: rotate(1.5deg);
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
}
.report__head { color: #5a4f45; font-size: .7rem; margin-bottom: 1rem; }
.report dl { margin: 0; display: grid; gap: .55rem; }
.report__row {
  display: grid; grid-template-columns: 7rem 1fr; gap: 1rem;
  font-family: var(--f-mono); font-size: 1rem; border-bottom: 1px dashed rgba(26, 22, 18, .3); padding-bottom: .4rem;
}
.report__row dt { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #5a4f45; align-self: center; }
.report__row dd { margin: 0; font-weight: 700; }
.report__stamp {
  position: absolute; right: 1rem; bottom: .8rem;
  font-family: var(--f-title); text-transform: uppercase; font-size: 2.4rem; letter-spacing: .08em;
  color: rgba(185, 34, 22, .85); border: 4px solid currentColor; padding: 0 .4em; line-height: 1.1;
  transform: rotate(-12deg); filter: url(#rough-text);
}

@media (max-width: 768px) {
  .stone-heart { right: 50%; top: 22%; transform: translate(50%, -50%); width: 130px; }
}

.ph-road {
  background:
    linear-gradient(180deg, transparent 62%, #121218 62%, #08090c 100%),
    conic-gradient(from 180deg at 50% 62%, transparent 0deg 176deg, rgba(255, 200, 140, .35) 178deg 182deg, transparent 184deg);
  -webkit-mask: linear-gradient(180deg, transparent 62%, #000 62%);
          mask: linear-gradient(180deg, transparent 62%, #000 62%);
}
.ph-sunrise {
  mix-blend-mode: screen; opacity: .25;
  background: radial-gradient(ellipse 45% 25% at 50% 62%, rgba(255, 170, 80, .9), rgba(255, 120, 40, .3) 40%, transparent 70%);
}

.ph-parking {
  background:
    repeating-linear-gradient(118deg, transparent 0 130px, rgba(239, 230, 214, .2) 130px 134px),
    linear-gradient(180deg, transparent 60%, #101217 60%, #07080b 100%);
  -webkit-mask: linear-gradient(180deg, transparent 60%, #000 60%);
          mask: linear-gradient(180deg, transparent 60%, #000 60%);
}
.ph-smoke {
  background:
    radial-gradient(ellipse 30% 14% at 30% 72%, rgba(200, 200, 210, .14), transparent 70%),
    radial-gradient(ellipse 34% 16% at 72% 74%, rgba(200, 200, 210, .12), transparent 70%);
}
.headlights { position: absolute; left: 0; right: 0; bottom: 18%; height: 30%; z-index: 1; opacity: 0; }
.headlights i {
  position: absolute; bottom: 0; width: 46%; height: 100%; mix-blend-mode: screen;
  background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 245, 220, .55), rgba(255, 220, 160, .15) 45%, transparent 75%);
}
.headlights i:first-child { left: 8%; }
.headlights i:last-child { right: 8%; }

.flyer {
  position: relative; width: min(30rem, 100%); padding: 1.6rem 1.6rem 1.4rem;
  background: linear-gradient(170deg, #1a0d10, #0c0a10); text-align: left;
  border: 1px solid rgba(224, 67, 42, .45); transform: rotate(-2deg);
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 80px rgba(224, 67, 42, .15);
}
.flyer__top { color: var(--ember); font-size: .7rem; }
.flyer__big {
  font-family: var(--f-title); text-transform: uppercase; color: var(--paper);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); line-height: .95; margin: .6rem 0 1rem;
}
.flyer__org { color: var(--paper-dim); font-size: .78rem; }
.redact { position: relative; display: inline-block; }
.redact b { color: var(--ember); }
.redact__bar { position: absolute; inset: -2px -4px; background: #050507; transform-origin: 100% 50%; }
html:not(.anim) .redact__bar { display: none; }

.ph-final {
  background:
    radial-gradient(ellipse 50% 70% at 15% 55%, rgba(242, 162, 58, .3), transparent 70%),
    radial-gradient(ellipse 50% 70% at 85% 55%, rgba(224, 67, 42, .32), transparent 70%),
    linear-gradient(180deg, #0b0a16, #07090f);
}

/* ---------- 8. Accessoires animés ---------- */
.bracelet {
  position: absolute; left: 58%; top: 18%; width: clamp(110px, 14vw, 200px); z-index: 2;
  overflow: visible; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6));
}
.bracelet ellipse { fill: none; stroke-width: 6; stroke-linecap: round; }
.bracelet__a { stroke: var(--ember); stroke-dasharray: 10 8; }
.bracelet__b { stroke: var(--amber); stroke-dasharray: 8 10; stroke-dashoffset: 9; }
.bracelet__tail { stroke: var(--ember); stroke-width: 3; fill: none; stroke-linecap: round; }

.pudding {
  position: absolute; right: 22%; bottom: 30%; width: clamp(70px, 8vw, 120px); z-index: 2;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)) url(#rough-soft);
}
.pudding__cup { fill: #e9e1d3; }
.pudding__top { fill: #3b2015; }
.pudding__shine { fill: none; stroke: rgba(255, 220, 180, .55); stroke-width: 3; stroke-linecap: round; }
.pudding__spoon { stroke: #c9c1b3; stroke-width: 5; stroke-linecap: round; }

.door {
  position: absolute; left: 30%; top: 22%; width: clamp(110px, 14vw, 220px); height: 54%;
  perspective: 900px; z-index: 1;
}
.door__light {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #fff6e2, #ffd08a);
  box-shadow: 0 0 120px 40px rgba(255, 208, 138, .35);
  opacity: .08;
}
.door__panel {
  position: absolute; inset: 0; background: linear-gradient(90deg, #2a323d, #1a2029);
  border: 6px solid #0d1117; transform-origin: 0 50%;
}

.half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.half--l { left: 0; }
.half--r { right: 0; }
.half__art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.half--l .half__art {
  background:
    radial-gradient(ellipse 70% 50% at 70% 60%, rgba(242, 162, 58, .55), transparent 70%),
    linear-gradient(180deg, #1a1222, #3a2414 70%, #110b08);
}
.half--r .half__art {
  background:
    radial-gradient(ellipse 70% 50% at 30% 60%, rgba(224, 67, 42, .55), transparent 70%),
    linear-gradient(180deg, #1a0e1c, #3d1210 70%, #120708);
}
.seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--paper) 30% 70%, transparent);
  filter: url(#rough-soft); opacity: .6;
}

.heart {
  position: absolute; top: 50%; width: clamp(90px, 12vw, 180px); z-index: 2;
  filter: url(#rough-soft) drop-shadow(0 0 30px currentColor);
}
.heart path { fill: currentColor; }
.heart--l { left: 50%; color: var(--amber); transform: translate(-150%, -50%); }
.heart--r { left: 50%; color: var(--ember); transform: translate(50%, -50%); }
.flash {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0); z-index: 3;
  background: radial-gradient(circle, #fff3dc, rgba(255, 170, 90, .6) 40%, transparent 70%);
}

/* ---------- 9. Modes ---------- */

/* Mode animé : chaque chapitre est un plan plein écran épinglé,
   les « beats » de texte se superposent et se succèdent au scroll. */
.anim .chapter { height: 100vh; height: 100svh; min-height: 0; overflow: hidden; }
.anim .stage { height: 100%; }
.anim .copy { height: 100%; min-height: 0; padding-top: 10vh; padding-bottom: 10vh; }
.anim .beats { display: grid; gap: 0; }
.anim .beat { grid-area: 1 / 1; align-self: center; }
.anim .layer { will-change: transform, filter; }

/* Mode statique (prefers-reduced-motion, ou GSAP indisponible) :
   tout est affiché, empilé, lisible, sans pinning. */
html:not(.anim) .chapter { border-top: 1px solid rgba(239,230,214,.06); }
html:not(.anim) .copy { padding-top: 18vh; padding-bottom: 18vh; }
html:not(.anim) .clock__a { display: none; }
html:not(.anim) .clock__b { opacity: 1; }
html:not(.anim) .door__panel { transform: rotateY(-70deg); }
html:not(.anim) .door__light { opacity: 1; }
html:not(.anim) .bracelet { top: auto; bottom: 14%; transform: rotate(14deg); }
html:not(.anim) .heart--l { transform: translate(-120%, -50%); }
html:not(.anim) .heart--r { transform: translate(20%, -50%); }
html:not(.anim) .scroll-cue { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Mobile : parallaxe allégée, textes recentrés, nav compacte */
@media (max-width: 768px) {
  .hud__hint { display: none; }
  .chapters-nav { right: 4px; }
  .chapters-nav a { padding: 2px; }
  .chapters-nav a span { display: none; }
  .chapters-nav a::after { width: 10px; }
  .chapters-nav a[aria-current="step"]::after { width: 18px; }

  .copy { padding-left: 16px; padding-right: 40px; }
  .copy--left, .copy--right { justify-items: center; text-align: left; }
  .title__big { font-size: clamp(5rem, 1rem + 16vw, 8rem); }
  .copy--left::before, .copy--right::before, .copy--split::before {
    background: linear-gradient(180deg, rgba(7,9,15,.3), rgba(7,9,15,.85) 45%, rgba(7,9,15,.85) 70%, rgba(7,9,15,.4));
  }
  .anim .copy { align-content: end; padding-bottom: 12vh; }
  .anim .copy--center, .anim .copy--duo { align-content: center; }

  .scribble { font-size: 1.2rem; margin-right: 0; }
  .d--him { margin-left: 1rem; }
  .cards { grid-template-columns: 1fr; gap: .9rem; }
  .card { padding: 1rem; font-size: .95rem; }

  .copy--split { grid-template-columns: 1fr; gap: 2rem; align-content: center; }
  .anim .copy--split { align-content: center; }
  .phone { width: min(230px, 64vw); aspect-ratio: 9 / 13; padding-top: 2.6rem; }
  .notif:nth-child(n+6) { display: none; }

  .duo { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 1rem; }
  .duo__col--her { text-align: left; }
  .half--l, .half--r { width: 100%; height: 50%; }
  .half--l { top: 0; bottom: auto; }
  .half--r { top: auto; bottom: 0; }
  .seam { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 3px; transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, var(--paper) 30% 70%, transparent); }

  .ph-fridge { left: 38%; min-width: 110px; }
  .bracelet { left: 50%; }
  .door { left: 12%; }
}