/* =========================================================================
   Accueil — « Between the abyss and the stars »
   Héros sombre, livre à la une, bibliothèque, trois chapitres numérotés
   (journalisme, documentaires, recherche), interlude « univers », auteur.
   ========================================================================= */

.home main { overflow-x: clip; }
.home section { position: relative; }

/* Image de fond commune (héros, interlude) : le <picture> remplit le bloc */
.hero-media, .universe-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media picture, .universe-media picture { height: 100%; }
.hero-media img, .universe-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 1. Héros ---------- */
.hero {
  isolation: isolate; display: grid; grid-template-rows: 1fr auto;
  min-height: clamp(36rem, calc(100svh - var(--header-h)), 58rem);
  background: var(--abyss);
}
.hero-media img { object-position: 84% 35%; }
.hero-media::after { /* lisibilité : voile du bas (mobile) puis de la gauche (bureau) */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, var(--abyss) 0%, rgba(11, 18, 20, .9) 30%, rgba(11, 18, 20, .35) 62%, rgba(11, 18, 20, .15) 100%);
}
.hero-inner { align-self: end; width: 100%; padding-block: 8rem 2.5rem; }
.hero-roles {
  margin: 0 0 1.25rem; font: 500 .75rem/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass);
}
.hero-title {
  margin: 0 0 1.5rem; max-width: 10ch;
  font-size: clamp(3.1rem, 1.4rem + 7.4vw, 8.5rem); line-height: .92; letter-spacing: -.03em;
  font-weight: 340;
}
.hero-title em { font-style: italic; font-weight: 300; color: var(--brass); }
.hero-lead {
  max-width: 34ch; margin: 0 0 2.25rem;
  font: 350 clamp(1.15rem, 1rem + .7vw, 1.6rem)/1.4 var(--serif); color: var(--on-dark);
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin: 0; }
.hero-actions .btn { min-height: 2.75rem; }
.hero-actions .link-arrow { display: inline-block; min-height: 2.75rem; padding-block: .7em .25em; }
.hero-foot { width: 100%; }
.hero-press {
  margin: 0; padding: 1.1rem 0 1.4rem; border-top: 1px solid var(--line-dark);
  font: 400 .75rem/1.6 var(--mono); letter-spacing: .06em; color: var(--on-dark-soft);
}
.hero-press span { color: var(--brass); text-transform: uppercase; letter-spacing: .14em; margin-right: .75em; }

@media (min-width: 56rem) {
  .hero-media img { object-position: 78% 40%; }
  .hero-media::after {
    background:
      linear-gradient(90deg, rgba(11, 18, 20, .92) 0%, rgba(11, 18, 20, .72) 32%, rgba(11, 18, 20, .15) 62%, rgba(11, 18, 20, 0) 80%),
      linear-gradient(0deg, rgba(11, 18, 20, .85) 0%, rgba(11, 18, 20, 0) 30%);
  }
  .hero-inner { align-self: center; padding-block: 6rem 3rem; }
}

/* Héros vidéo : l'extrait remplit le bloc ; image fixe (poster) si l'animation est réduite */
.hero-media--video { background: var(--abyss) url(/assets/video/extrait-lac-poster-l.jpg) 85% 30% / cover no-repeat; }
@media (orientation: portrait) {
  .hero-media--video { background-image: url(/assets/video/extrait-lac-poster-p.jpg); background-position: 50% 30%; }
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* ---------- 2. Livre à la une ---------- */
.featured {
  padding-block: var(--section);
  background:
    radial-gradient(60rem 36rem at 22% 85%, rgba(116, 214, 200, .12), transparent 70%),
    linear-gradient(180deg, var(--abyss) 0%, var(--abyss-2) 100%);
}
.featured-grid { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.featured-cover { display: block; width: min(62vw, 17rem); margin-inline: auto; }
.featured-cover .book-cover { box-shadow: 0 2px 2px rgba(0,0,0,.4), 0 30px 60px -12px rgba(0,0,0,.7), 0 0 90px -10px rgba(116, 214, 200, .28); }
.featured-title { font-size: clamp(3rem, 1.8rem + 5vw, 6rem); line-height: .95; margin-bottom: .2em; letter-spacing: -.03em; }
.featured-subtitle { margin: 0 0 1.25rem; font: italic 300 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.3 var(--serif); color: var(--glow); }
.featured-meta { margin-bottom: 1.75rem; }
.featured .lead { max-width: 38ch; color: var(--on-dark); }
.featured-note { max-width: 52ch; color: var(--on-dark-soft); font-size: .9375rem; }
.featured-buy { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line-dark); }
.featured-status { color: var(--on-dark-soft); font-size: .9375rem; }
.featured-status .status { color: var(--glow); margin-right: .5em; }
.featured-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin: 1.25rem 0 0; }
.featured-actions .btn { min-height: 2.75rem; }
.featured-actions .link-arrow { padding-block: .6em .2em; }
@media (min-width: 56rem) {
  .featured-grid { grid-template-columns: minmax(16rem, 5fr) 7fr; }
  .featured-cover { width: 100%; max-width: 24rem; }
}

/* En-tête de section avec lien « Tout voir » */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { margin: 0; }
.section-head .link-arrow { color: var(--ink); padding-block: .6em .2em; }

/* ---------- 3. Bibliothèque ---------- */
.shelf { padding-block: var(--section); background: var(--paper-2); }
.shelf-list {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 46%);
  gap: 1.5rem; margin: 0 calc(-1 * var(--gutter)); padding: 1rem var(--gutter) 1.5rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain;
}
.shelf-item { scroll-snap-align: start; display: flex; flex-direction: column; }
.shelf-link { display: block; color: var(--ink); text-decoration: none; }
.shelf-link .book-cover { margin-bottom: 1.25rem; }
.shelf-title { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); margin: 0 0 .35rem; }
.shelf-link:hover .shelf-title { text-decoration: underline; text-decoration-color: var(--brass-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.shelf-item .meta { margin: 0; }
@media (min-width: 40rem) { .shelf-list { grid-auto-columns: minmax(11rem, 30%); } }
@media (min-width: 64rem) {
  .shelf-list { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); gap: 2rem; margin: 0; padding: 0; overflow: visible; }
  .shelf-list { padding-bottom: 2rem; border-bottom: 1px solid var(--line-light); }
}

/* ---------- 4-6. Chapitres numérotés ---------- */
.chapter { padding-block: var(--section); }
.chapter-head { display: grid; gap: 1.5rem 3rem; margin-bottom: clamp(3rem, 6vw, 5rem); align-items: start; }
.chapter-num {
  margin: 0; font: italic 200 clamp(4.5rem, 3rem + 6vw, 9rem)/.8 var(--serif);
  letter-spacing: -.04em; color: var(--brass-deep);
}
.on-dark .chapter-num { color: var(--brass); }
.chapter-text h2 { margin-bottom: .4em; }
.chapter-intro { max-width: 34ch; font: 350 clamp(1.15rem, 1.05rem + .5vw, 1.4rem)/1.45 var(--serif); margin-bottom: 1.5rem; }
.chapter-text .link-arrow { display: inline-block; padding-block: .6em .2em; }
.chapter-media { overflow: hidden; border-radius: var(--radius); }
.chapter-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 56rem) {
  .chapter-head { grid-template-columns: auto minmax(0, 5fr) minmax(0, 6fr); }
  .chapter-num { padding-top: .1em; }
  .chapter-media img { aspect-ratio: 16 / 10; }
}

/* 01 — Journalisme : une grande « une » et trois brèves */
.chapter-journalism { background: var(--paper); }
.stories { display: grid; gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.story-link { display: grid; gap: 1rem 1.25rem; color: var(--ink); text-decoration: none; }
.story-media { display: block; overflow: hidden; border-radius: var(--radius); background: var(--paper-3); }
.story-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease); }
.story-link:hover img { transform: scale(1.035); }
.story-num { display: block; margin-bottom: .4rem; color: var(--brass-deep); }
.story-title { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); margin: 0 0 .5rem; }
.story-link:hover .story-title { text-decoration: underline; text-decoration-color: var(--brass-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.story-excerpt { display: block; color: var(--ink-soft); font-size: .9375rem; }
.story-lead .story-title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.story-lead .story-excerpt { font-size: 1.0625rem; }
.story-lead .story-media img { aspect-ratio: 1 / 1; object-position: 50% 50%; }
/* Pages de magazine scannées : recadrage sur le sujet */
.story-ricardo-amils .story-media img { object-position: 0% 30%; }
.story-zero-patient .story-media img { object-position: 30% 40%; }
.story-white-sharks .story-media img { object-position: 60% 60%; }
@media (min-width: 40rem) and (max-width: 55.99rem) {
  .story:not(.story-lead) .story-link { grid-template-columns: 12rem 1fr; align-items: start; }
  .story-lead .story-media img { aspect-ratio: 3 / 2; object-position: 50% 55%; }
}
@media (min-width: 56rem) {
  .stories { grid-template-columns: 6fr 5fr; column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 2rem; }
  .story-lead { grid-row: span 3; }
  .story:not(.story-lead) { padding-bottom: 2rem; border-bottom: 1px solid var(--line-light); }
  .story:last-child { border-bottom: 0; padding-bottom: 0; }
  .story:not(.story-lead) .story-link { grid-template-columns: minmax(9rem, 2fr) 3fr; align-items: start; }
  .story:not(.story-lead) .story-media img { aspect-ratio: 1 / 1; }
}

/* 02 — Documentaires : bande cinéma 16:9 */
.chapter-films {
  background:
    radial-gradient(50rem 30rem at 85% 0%, rgba(214, 165, 74, .08), transparent 70%),
    var(--abyss);
}
.chapter-films .chapter-media img { object-position: 50% 40%; }
.films { display: grid; gap: 2rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.film-link { display: block; color: var(--on-dark); text-decoration: none; }
.film-media { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--abyss-3); margin-bottom: 1rem; }
.film-media::after { /* cadre de projection */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(238, 240, 236, .1); background: linear-gradient(180deg, transparent 55%, rgba(11, 18, 20, .45));
}
.film-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s var(--ease), filter .6s var(--ease); filter: saturate(.9); }
.film-link:hover img { transform: scale(1.04); filter: saturate(1.05); }
.film-the-dark-world .film-media img { object-position: 50% 92%; }
.film-jennifer-doudna .film-media img { object-position: 30% 35%; }
.film-the-hydrogen-route .film-media img { transform: scale(1.06); } /* bandes noires de la source */
.film-the-hydrogen-route .film-link:hover img { transform: scale(1.1); }
.film-num { display: block; margin-bottom: .35rem; color: var(--brass); }
.film-title { font-size: clamp(1.15rem, 1.05rem + .35vw, 1.35rem); margin: 0; }
.film-link:hover .film-title { text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: .18em; }
@media (min-width: 40rem) { .films { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .films { grid-template-columns: repeat(4, 1fr); }
}

/* 03 — Recherche : sommaire typographique */
.chapter-research { background: var(--paper-2); }
.chapter-research .chapter-media img { transform: scale(1.06); } /* masque le liseré de l'image source */
.essays { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); }
.essay { border-bottom: 1px solid var(--line-light); }
.essay-link { display: grid; gap: .35rem 2rem; padding: 1.5rem 0; color: var(--ink); text-decoration: none; }
.essay-year { color: var(--brass-deep); }
.essay-title { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.85rem); margin: 0; transition: color .25s var(--ease); }
.essay-desc { color: var(--ink-soft); font-size: .9375rem; }
.essay-link:hover .essay-title { color: var(--brass-deep); }
@media (min-width: 56rem) {
  .essay-link { grid-template-columns: 6rem minmax(0, 1.4fr) minmax(0, 1fr); align-items: baseline; padding: 1.75rem 0; }
}

/* ---------- 7. Interlude « univers » ---------- */
.universe {
  isolation: isolate; display: grid; align-items: end;
  min-height: clamp(28rem, 80vh, 50rem); background: var(--abyss);
}
.universe-media img { object-position: 60% 50%; }
/* Téléphone : il ne reste qu'un quart de la largeur du panorama ; à 60 % on ne voyait que du ciel
   entre le dragon et la montgolfière : on centre le dragon */
@media (max-width: 39.99rem) { .universe-media img { object-position: 46% 50%; } }
.universe-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(11, 18, 20, .95) 0%, rgba(11, 18, 20, .7) 35%, rgba(11, 18, 20, .1) 70%),
    linear-gradient(90deg, rgba(11, 18, 20, .55) 0%, rgba(11, 18, 20, 0) 60%);
}
.universe-inner { width: 100%; padding-block: 8rem 4rem; }
.universe-line {
  max-width: 24ch; margin: 0;
  font: italic 300 clamp(1.7rem, 1.1rem + 2.8vw, 3.6rem)/1.15 var(--serif); letter-spacing: -.015em; text-shadow: 0 1px 24px rgba(11, 18, 20, .6);
}
.universe-credit {
  position: absolute; right: var(--gutter); bottom: .75rem; margin: 0;
  font: 400 .6875rem/1.2 var(--mono); letter-spacing: .04em; color: var(--on-dark-soft);
}

/* ---------- 8. L'auteur ---------- */
.author { padding-block: var(--section); background: var(--paper); }
.author-grid { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.author-portrait { width: min(80vw, 26rem); }
.author-portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); filter: grayscale(1) contrast(1.05); }
.author-text .lead { max-width: 40ch; }
.facts { display: grid; gap: 0; margin: 2rem 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); }
.facts li { display: grid; gap: .25rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--line-light); color: var(--ink-soft); }
.fact-key { font: 400 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.1 var(--serif); color: var(--ink); }
.facts cite { font-style: italic; }
.author-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 2rem; margin: 0; }
.author-links .link-arrow { color: var(--ink); padding-block: .6em .2em; }
/* Cibles tactiles ≥ 44 px pour les liens « → » isolés (43 px auparavant) */
.featured-actions .link-arrow, .section-head .link-arrow, .chapter-text .link-arrow, .author-links .link-arrow { min-height: 2.75rem; }
.author-agency { font-size: .9375rem; color: var(--ink-soft); }
@media (min-width: 40rem) { .facts li { grid-template-columns: 13rem 1fr; align-items: baseline; } }
@media (min-width: 56rem) {
  .author-grid { grid-template-columns: 5fr 7fr; }
  .author-portrait { width: 100%; }
}

/* ---------- Mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .story, .film, .essay {
      animation: home-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes home-rise { from { opacity: .001; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .story-media img, .film-media img, .essay-title { transition: none; }
  .story-link:hover img, .film-link:hover img { transform: none; }
}

/* ---------- Jauge de profondeur (décor) ----------
   La page d'accueil est une descente : de 0 m (portrait) à 10 994 m (fosse des Mariannes) en bas de page.
   assets/js/depth.js écrit la profondeur et --depth-p (0 → 1) ; sans JavaScript, la jauge reste masquée.
   Grand écran : échelle des zones océaniques dans la marge de droite. Ailleurs : petit compteur en bas à droite. */
.depth { display: none; }
.has-depth .depth { display: contents; }
.depth-readout {
  position: fixed; right: .75rem; bottom: .75rem; z-index: 40; margin: 0;
  display: flex; align-items: baseline; gap: .4rem; padding: .45rem .75rem;
  background: rgba(11, 18, 20, .82); border: 1px solid var(--line-dark); border-radius: 999px;
  font: 500 .75rem/1 var(--mono); letter-spacing: .06em;
  /* Du laiton au bleu-vert « bioluminescent » en descendant */
  color: color-mix(in srgb, var(--glow) min(100%, calc(var(--depth-p, 0) * 160%)), var(--brass));
  pointer-events: none;
}
@supports (backdrop-filter: blur(1px)) { .depth-readout { background: rgba(11, 18, 20, .66); backdrop-filter: blur(10px); } }
.depth-label { color: var(--on-dark-soft); text-transform: uppercase; font-size: .625rem; letter-spacing: .14em; }
.depth-value { min-width: 6ch; text-align: right; font-variant-numeric: tabular-nums; }
.depth-unit { color: var(--on-dark-soft); }
.depth-scale { display: none; }
@media (max-width: 30rem) { .depth-readout { padding: .35rem .6rem; font-size: .6875rem; } .depth-label { display: none; } }

/* 91rem : à partir de là, la marge à droite du contenu (76rem) laisse la place à l'échelle (6.25rem) */
@media (min-width: 91rem) {
  .depth-readout { top: calc(var(--header-h) + 1.25rem); bottom: auto; right: 1.25rem; width: 6.25rem; flex-wrap: wrap; justify-content: flex-end; row-gap: .3rem; border-radius: .6rem; }
  .depth-label { flex-basis: 100%; text-align: right; }
  /* Blanc + « difference » : lisible sur l'abysse comme sur le papier */
  .depth-scale {
    display: block; position: fixed; z-index: 39; right: 1.25rem; width: 6.25rem;
    top: calc(var(--header-h) + 5.5rem); bottom: 2rem;
    color: #fff; mix-blend-mode: difference; pointer-events: none;
    border-right: 1px solid rgba(255, 255, 255, .35);
  }
  .depth-scale::before {
    content: ""; position: absolute; right: -1px; top: 0; width: 1px; background: #fff;
    height: calc(var(--depth-p, 0) * 100%);
  }
  .depth-marker {
    position: absolute; right: -5px; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: #fff;
    top: calc(var(--depth-p, 0) * 100%);
  }
  .depth-zones { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
  .depth-zone {
    position: absolute; right: .75rem; transform: translateY(-.35rem); text-align: right;
    font: 400 .5625rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .62;
  }
  .depth-mark { display: block; font-size: .6875rem; letter-spacing: .04em; opacity: .9; }
  .depth-zone::after { content: ""; position: absolute; right: -.75rem; top: .35rem; width: .45rem; height: 1px; background: currentColor; }
  /* Limites réelles des zones, proportionnelles à 10 994 m */
  .z1 { top: 0; } .z2 { top: 1.82%; } .z3 { top: 9.1%; } .z4 { top: 36.38%; } .z5 { top: 54.58%; }
  .z6 { top: 100%; transform: translateY(-100%); }
  .z6::after { top: auto; bottom: 0; }
  /* 0 m et 200 m sont trop proches pour deux étiquettes : en haut, seulement « 0 m » */
  .z1 { font-size: 0; } .z1 .depth-mark { font-size: .6875rem; }
  .z2 { transform: translateY(.1rem); }
}