/* =========================================================
   Thème : Le Vélo rouge
   Une confession tapée à 3 h 47 dans un diner, sous la pluie.
   Machine à écrire pour les titres, lampadaires au sodium, brouillard des Appalaches,
   bourbon et braises, néons de diner. La pluie tombe sur la page pendant l'excavation
   et dans le diner. Au moment de la découverte, un ruban de scène de crime se tend.
   enfance → hopital → brume → bourbon → creux → motel → braises → dossier → diner
   ========================================================= */

@property --bg     { syntax: "<color>"; inherits: true; initial-value: #14100c; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #e0a35c; }

.theme-velo {
  --bg: #14100c;
  --surface: #1b1612;
  --ink: #e6e1d8;
  --ink-muted: #a39b8d;
  --accent: #e0a35c;           /* lampadaire au sodium */
  --accent-2: #d65a4a;         /* gyrophare */
  --font-display: "Special Elite", "Courier New", monospace;
  --font-body: "Source Serif 4", Georgia, serif;
  --measure: 34em;

  transition: --bg 2.4s ease, --accent 2.4s ease;
}
.theme-velo[data-mood="enfance"] { --bg: #14100c; --accent: #e0a35c; }
.theme-velo[data-mood="hopital"] { --bg: #0e1415; --accent: #8fb7b0; }
.theme-velo[data-mood="brume"]   { --bg: #0e131a; --accent: #9db4c9; }
.theme-velo[data-mood="bourbon"] { --bg: #17100b; --accent: #d49a4a; }
.theme-velo[data-mood="creux"]   { --bg: #0a0f0e; --accent: #8fa89a; }
.theme-velo[data-mood="motel"]   { --bg: #14120a; --accent: #cfc15a; }
.theme-velo[data-mood="braises"] { --bg: #160c0a; --accent: #cf5a43; }
.theme-velo[data-mood="dossier"] { --bg: #101214; --accent: #b0b6bf; }
.theme-velo[data-mood="diner"]   { --bg: #090c11; --accent: #e0674f; }

.theme-velo .chapter { font-size: calc(var(--step-0) * var(--reader-scale) * 1.03); }

/* ---------- Ouverture ---------- */
.theme-velo .hero {
  position: relative; isolation: isolate;
  min-height: 100svh; display: grid; align-items: end;
  overflow: hidden; background: #06080c;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(.82) saturate(1.05); }
/* Pluie fine devant l'image, gyrophares qui rougissent le bas de l'écran */
.hero__rain {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(34% 22% at 54% 74%, rgb(255 50 70 / .20), transparent 70%),
    radial-gradient(34% 22% at 60% 74%, rgb(70 100 255 / .18), transparent 70%),
    repeating-linear-gradient(104deg, rgb(190 205 225 / 0) 0 5px, rgb(190 205 225 / .13) 5px 6px, rgb(190 205 225 / 0) 6px 24px);
  background-size: auto, auto, 220px 220px;
  animation: hero-rain .6s linear infinite;
}
@keyframes hero-rain { to { background-position: 0 0, 0 0, -45px 220px; } }
.theme-velo .hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(6 8 12 / .96) 0%, rgb(6 8 12 / .6) 32%, transparent 62%);
}
.theme-velo .hero__content { position: relative; z-index: 1; width: min(100%, 76rem); margin: 0 auto; padding: 6rem var(--gutter) clamp(2.5rem, 8vh, 4.5rem); }
.hero__kicker { max-width: 28em; font-style: italic; line-height: 1.5; color: var(--ink); }
.theme-velo .hero__title {
  margin-top: .5em;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3rem, 1.6rem + 7vw, 7.2rem); line-height: .92; letter-spacing: .01em;
  color: #efe6d4; text-shadow: 0 2px 28px rgb(0 0 0 / .9);
}
.theme-velo .hero__subtitle { margin-top: .8rem; font-style: italic; font-size: var(--step-1); }
.theme-velo .hero__meta { margin-top: .8rem; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }
.theme-velo .hero__start {
  display: inline-block; margin-top: 1.4rem; padding: .75rem 1.25rem; border-radius: 2px;
  font-family: var(--font-ui); font-size: .95rem; font-weight: 600; text-decoration: none;
  color: #1a1208; background: var(--accent);
}
.theme-velo .hero__start:hover { background: #efbb68; }

/* ---------- Sommaire, titres ---------- */
.theme-velo .toc { padding-top: clamp(3rem, 8vh, 5rem); }
.theme-velo .toc a { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }
.theme-velo .toc a::before { color: var(--accent); font-family: var(--font-ui); font-size: .9rem; }
.theme-velo .chapter__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.7rem); line-height: 1.05; }
.theme-velo .chapter__num { color: var(--accent); font-family: var(--font-ui); }
.theme-velo .chapter__title::after {
  content: ""; display: block; width: 3rem; height: 2px; margin-top: .9rem;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.lead { font-size: var(--step-1); line-height: 1.55 !important; }
.theme-velo .beat { color: #f1e9d8; }

/* La dernière partie : c'est ce qu'il tape, dans le diner */
#partie-9 p { font-family: "Courier Prime", "Courier New", monospace; font-size: .96em; line-height: 1.75; }
#partie-9 .chapter__title { font-family: var(--font-display); }

/* ---------- Illustrations ---------- */
.theme-velo .illu__frame { background: #090b0e; }
.theme-velo .illu--mid { max-width: 30rem; margin-inline: auto !important; }
.theme-velo .illu--duo { max-width: min(40rem, 100%); margin-inline: auto !important; }
.theme-velo .illu__frame--duo { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; background: transparent; overflow: visible; border-radius: 0; }
.theme-velo .illu__frame--duo img { max-height: none; border-radius: 4px; height: 100%; object-fit: cover; }
.theme-velo .illu figcaption { font-style: italic; }
@media (max-width: 36rem) { .theme-velo .illu__frame--duo { grid-template-columns: 1fr; } }

/* ---------- Pluie sur la page (excavation et diner) ---------- */
.rain {
  position: fixed; inset: -20% 0 0 0; z-index: 30; pointer-events: none; opacity: 0;
  background:
    repeating-linear-gradient(104deg, rgb(190 205 225 / 0) 0 5px, rgb(190 205 225 / .16) 5px 6px, rgb(190 205 225 / 0) 6px 22px),
    repeating-linear-gradient(98deg, transparent 0 11px, rgb(190 205 225 / .10) 11px 12px, transparent 12px 37px);
  background-size: 200px 200px, 300px 300px;
  animation: rainfall .55s linear infinite;
  transition: opacity 2.2s ease;
}
@keyframes rainfall { to { background-position: -40px 200px, -60px 300px; } }
.theme-velo[data-mood="creux"] .rain, .theme-velo[data-mood="diner"] .rain { opacity: .34; }
.fx-off .rain, .fx-off .hero__rain { animation: none; }
.fx-off .rain { display: none; }
@media (prefers-reduced-motion: reduce) { .rain { display: none; } .hero__rain { animation: none; } }

/* ---------- Le ruban de scène de crime ---------- */
.tape {
  position: relative; overflow: hidden; white-space: nowrap;
  width: calc(100% + 2 * var(--gutter)); margin: 2.6rem calc(-1 * var(--gutter)) !important;
  height: 2.1rem; line-height: 2.1rem; transform: rotate(-1.4deg);
  background: #f2c200; color: #15110a; box-shadow: 0 6px 18px -8px rgb(0 0 0 / .8);
  font-family: var(--font-ui); font-weight: 800; font-size: .8rem; letter-spacing: .28em;
}
.tape::before {
  content: "NE PAS FRANCHIR · NE PAS FRANCHIR · NE PAS FRANCHIR · NE PAS FRANCHIR · NE PAS FRANCHIR · NE PAS FRANCHIR · NE PAS FRANCHIR · NE PAS FRANCHIR · NE PAS FRANCHIR · NE PAS FRANCHIR ·";
}
:lang(en) .tape::before {
  content: "DO NOT CROSS · DO NOT CROSS · DO NOT CROSS · DO NOT CROSS · DO NOT CROSS · DO NOT CROSS · DO NOT CROSS · DO NOT CROSS · DO NOT CROSS · DO NOT CROSS · DO NOT CROSS ·";
}
.js-fx .tape { transform: rotate(-1.4deg) scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.js-fx .tape.is-seen { transform: rotate(-1.4deg) scaleX(1); }

/* ---------- Le chiffre ---------- */
.count {
  margin-block: .6em !important; text-align: center;
  font-family: var(--font-display); font-size: clamp(4rem, 2rem + 9vw, 8rem); line-height: 1; color: var(--accent);
}

/* ---------- La dernière phrase ---------- */
.sting { margin-top: 2.2em !important; font-style: italic; color: #f1e9d8; }
.js-fx .sting { opacity: 0; transform: translateY(.3em); transition: opacity 3.2s ease, transform 3.2s ease; }
.js-fx .sting.is-seen { opacity: 1; transform: none; }

:lang(sq) .tape::before { content: "MOS KALO · MOS KALO · MOS KALO · MOS KALO · MOS KALO · MOS KALO · MOS KALO · MOS KALO ·"; }