/* ============================================================
   COLOMBE LINOTTE — Home
   DA : éditorial, fond blanc, asymétrie, grandes typo.
   Moonblossom = gros titres manuscrits · pile système = tout le reste
   · Playfair Display = accents inline (mots mis en avant).
   Accent unique : pêche #FFD6C8 / oiseau #FFE1D7.
   ============================================================ */

@font-face {
  font-family: "moonblossom";
  src: url("../src/moonblossom.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --white:  #ffffff;
  --ink:    #0e0d0c;
  --muted:  #6b6560;
  --line:   rgba(14,13,12,.14);
  --peach:  #ffd6c8;
  --yellow: #f9eda3;
  --soft:   #f2efec;

  --hand:  "moonblossom", "Caveat", cursive;                 /* gros titres */
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* corps + titres */
  --accent:"Playfair Display", Georgia, serif;               /* accents inline */

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1600px;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scrollbar-gutter : réserve toujours la place de la barre de défilement.
   Sans ça, quand le loader se retire et que la page devient scrollable, l'apparition
   de la scrollbar décalait tout le contenu de ~15px vers la gauche. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--ink);
  line-height: 1.45;
  font-size: 18px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Amélioration progressive : le chemin `.js` conserve exactement la mise en scène
   habituelle. Ces deux états ne servent que si JavaScript est désactivé ou si le script
   d'animation échoue avant d'avoir libéré la page. */
.no-js .loader, .site-static .loader,
.no-js .page-curtain, .site-static .page-curtain,
.no-js .page-sheet, .site-static .page-sheet { display: none !important; }
.no-js [data-stagger], .site-static [data-stagger] { visibility: visible !important; }
.no-js .reveal, .site-static .reveal {
  opacity: 1 !important; visibility: visible !important; transform: none !important;
}
.site-static [data-stagger] .hline-in,
.site-static [data-stagger] .w__in,
.site-static .hero-gallery .cover {
  opacity: 1 !important; visibility: visible !important; transform: none !important;
}
html.no-js, html.site-static,
html.no-js body, html.site-static body {
  overflow-x: hidden !important; overflow-y: auto !important;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* surlignage : jaune pastel par défaut ; blanc sur le contact une fois devenu jaune */
::selection { background: var(--yellow); color: var(--ink); }
.contact ::selection, .contact::selection { background: var(--white); color: var(--ink); }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============================================================
   LOADER V3 : vertical (2 oiseaux face à face) → horizontal → baseline staggered
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 10000; background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.loader__stage {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .8rem;
}
.ll {
  display: block; height: auto; will-change: transform, opacity;
}
.ll--animate    { position: relative; width: min(74vw, 860px); opacity: 0; }
.ll--animate svg { width: 100%; height: auto; display: block; }
/* Les 2 oiseaux du logo — le pivot est piloté 100% en JS via GSAP `svgOrigin`
   (transform-box: fill-box + transform-origin CSS interfèrent avec GSAP → à ne PAS mettre). */
.ll--animate #bird-1, .ll--animate #bird-2 { will-change: transform; }
/* PAS d'opacity:0 ici : la baseline est cachée par le masque (clipPath créé en JS) et
   remonte derrière lui — effet machine à sous. Une opacité la rendrait invisible à jamais. */
.ll--animate #baseline { will-change: transform; }

/* ============================================================
   PAGE CURTAIN — transition entre les pages
   Overlay noir 40 % qui monte du bas → couvre l'ancienne page,
   puis la nouvelle page arrive derrière et le rideau se lève.
   ============================================================ */
/* Voile noir : apparaît INSTANTANÉMENT au clic pour détacher visuellement l'ancienne page.
   Il ne bouge pas — c'est la feuille blanche par-dessus qui translate. */
.page-curtain {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0, 0, 0, .4);
  opacity: 0; pointer-events: none;
}
.page-curtain.is-active { opacity: 1; pointer-events: auto; }

/* Feuille blanche = la NOUVELLE page qui arrive du bas vers le haut */
.page-sheet {
  position: fixed; inset: 0; z-index: 9600;
  background: var(--white);
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform;
}
.page-sheet.is-active { pointer-events: auto; }

/* ============================================================
   Page MENTIONS LÉGALES
   ============================================================ */
.legal {
  padding: clamp(7rem, 15vh, 11rem) max(var(--gutter), calc((100% - var(--maxw)) / 2)) clamp(6rem, 12vh, 10rem);
  max-width: 100%;
}
.legal .back-link { margin-bottom: clamp(2rem, 4vw, 3rem); }
.legal .page-title { max-width: 100%; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.legal__body { max-width: 70ch; }
.legal__body h2 {
  font-family: var(--sans); font-weight: 500;
  font-size: 1.15rem; letter-spacing: -.01em;
  margin: 2.4rem 0 .8rem;
}
.legal__body h2:first-of-type { margin-top: 0; }
.legal__body p { font-size: 1rem; line-height: 1.6; color: var(--muted); margin-bottom: 1rem; }
.legal__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal__body em { font-family: var(--accent); font-style: italic; }

/* grain très léger */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- helpers ---------- */
.label {
  font-family: var(--sans); font-weight: 500;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.hand { font-family: var(--hand); font-weight: 600; line-height: .85; }
/* accent inline (Playfair italique) + ligatures rares (st, ct…) activées */
.accent {
  font-family: var(--accent); font-style: italic; font-weight: 400; letter-spacing: -.03em;
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
  font-feature-settings: "dlig" 1, "hlig" 1, "liga" 1, "clig" 1;
}

/* titre de section partagé (H2 en regular) */
.kicker {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -.03em;
  max-width: 28ch;
}
/* la coupure du kicker mag est explicite dans le HTML (<br>), pas besoin de contraindre la largeur */
.mags .kicker { max-width: 34ch; }
.mags:not(.mags--page) .kicker {
  font-size: clamp(1.8rem, 4vw, 3.35rem);
  line-height: 1.08;
}

.link-line {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 500; font-size: 1rem;
  padding-bottom: .25rem; border-bottom: 1px solid var(--ink);
  transition: gap .4s var(--ease);
}
.link-line__arrow { transition: transform .4s var(--ease); }
.link-line:hover { gap: .85rem; }
.link-line:hover .link-line__arrow { transform: translate(3px,-3px); }

/* ---------- slot-machine (hover CTA / liens) ---------- */
.roll {
  position: relative; display: inline-block; overflow: hidden;
  vertical-align: top; line-height: 1.15;
  padding-bottom: .14em; margin-bottom: -.14em;   /* place pour les jambages */
}
.roll__line { display: block; transition: transform .55s var(--ease); }
.roll__line--2 { position: absolute; left: 0; top: 0; transform: translateY(110%); }
a:hover .roll__line--1, .roll:hover .roll__line--1, .magrow:hover .roll__line--1 { transform: translateY(-110%); }
a:hover .roll__line--2, .roll:hover .roll__line--2, .magrow:hover .roll__line--2 { transform: translateY(0); }

/* Les titres à révélation staggered sont MASQUÉS dès le CSS : sinon on les voyait
   une fraction de seconde en clair avant que le découpage en lignes (qui attend le
   chargement des polices) ne se déclenche. Le JS les repasse en visible juste après. */
[data-stagger] { visibility: hidden; }
[data-stagger].is-split { visibility: visible; }

/* ---------- staggered LINE reveal (titres) — mask ligne-par-ligne, comme le H1 ---------- */
.stagger .hline, [data-stagger] .hline { display: block; overflow: hidden; padding-bottom: .08em; }
.stagger .hline-in, [data-stagger] .hline-in { display: block; will-change: transform; }
/* compat : anciens usages word-level */
.stagger .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.stagger .w__in { display: inline-block; will-change: transform; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.35rem var(--gutter);
  transition: transform .5s var(--ease), padding .4s var(--ease), background .4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(255,255,255,.8); backdrop-filter: blur(12px);
  padding-top: .85rem; padding-bottom: .85rem;
  box-shadow: 0 1px 0 var(--line);
}
.nav.is-hidden { transform: translateY(-110%); }
/* Marque : logo AVEC baseline en haut de page, logo SEUL une fois qu'on scrolle.
   Les deux SVG font 993 de large (171 et 93 de haut) : à largeur égale, le mot-symbole se
   superpose exactement et seule la baseline disparaît. On les empile et on fond de l'un à
   l'autre, en réduisant la hauteur du conteneur — d'où une barre réellement plus compacte. */
.nav__brand {
  --logo-w: clamp(200px, 19vw, 260px);
  /* ratio exact du SVG avec baseline ; la variante mobile a sa propre valeur (viewBox plus
     haut, baseline plus grande) — voir la media query. */
  --logo-ratio-full: 0.17221;   /* logo-baseline.svg : 171 / 993 */
  position: relative; display: block; justify-self: start;
  width: var(--logo-w);
  height: calc(var(--logo-w) * var(--logo-ratio-full));
  overflow: hidden;
  transition: height .45s var(--ease);
}
.nav.is-scrolled .nav__brand { height: calc(var(--logo-w) * 93 / 993); }
.nav__logo {
  position: absolute; left: 0; top: 0;
  width: 100%; height: auto;
  transition: opacity .35s var(--ease);
}
.nav__logo > img { width: 100%; height: auto; display: block; }
.nav__logo--compact { opacity: 0; }
.nav.is-scrolled .nav__logo--full { opacity: 0; }
.nav.is-scrolled .nav__logo--compact { opacity: 1; }
.nav__menu { justify-self: center; display: flex; gap: 2rem; }
.nav__menu a, .nav__mail { font-size: .9rem; font-weight: 500; }
.nav__mail { justify-self: end; color: var(--muted); display: inline-flex; align-items: center; gap: .45rem; }
.nav__feather { flex: none; transform: rotate(-8deg); }
.nav__mail:hover { color: var(--ink); }

.burger { display: none; background: none; border: 0; cursor: pointer; width: 30px; height: 20px; position: relative; justify-self: end; }
.burger span { position: absolute; left: 0; height: 2px; width: 100%; background: var(--ink); transition: .3s var(--ease); }
.burger span:nth-child(1){ top: 4px; } .burger span:nth-child(2){ bottom: 4px; }
.burger.is-open span:nth-child(1){ top: 9px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2){ bottom: 9px; transform: rotate(-45deg); }

/* ============================================================
   MENU MOBILE — volet plein écran
   Le burger n'ouvrait rien jusqu'ici : il ne faisait que basculer sa propre croix.
   ============================================================ */
.mobnav {
  position: fixed; inset: 0; z-index: 95;
  background: var(--white);
  display: flex; flex-direction: column;
  /* les intitulés se posent dans le tiers supérieur, le bloc contact reste collé en bas :
     le vide central fait respirer la liste au lieu de la tasser sous le header. */
  padding: 22svh var(--gutter) 2.5rem;
  visibility: hidden; opacity: 0;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.mobnav.is-open { visibility: visible; opacity: 1; }
.mobnav__list { display: flex; flex-direction: column; gap: .65rem; }
.mobnav__list a {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(2.2rem, 11vw, 3.2rem); letter-spacing: -.03em;
  color: var(--ink);
  /* interligne élargi : le masque (overflow: hidden) coupe au ras de la boîte de ligne, et
     les jambages du « g » de Magazines la dépassaient de 2 à 3 px. L'écart entre les entrées
     est réduit d'autant pour conserver le même rythme visuel. */
  line-height: 1.3;
  /* chaque intitulé est masqué par son conteneur puis remonte à l'ouverture */
  display: block; overflow: hidden;
}
.mobnav__list a > span { display: block; transform: translateY(110%); transition: transform .6s var(--ease); }
.mobnav.is-open .mobnav__list a > span { transform: translateY(0); }
.mobnav__list a:nth-child(1) > span { transition-delay: .08s; }
.mobnav__list a:nth-child(2) > span { transition-delay: .14s; }
.mobnav__list a:nth-child(3) > span { transition-delay: .20s; }
.mobnav__list a:nth-child(4) > span { transition-delay: .26s; }
.mobnav__foot {
  margin-top: auto; padding-top: 2.5rem;
  display: flex; flex-direction: column; gap: .9rem;
  border-top: 1px solid var(--line);
  opacity: 0; transition: opacity .5s var(--ease) .3s;
}
.mobnav.is-open .mobnav__foot { opacity: 1; }
.mobnav__mail { font-size: 1rem; color: var(--ink); display: inline-flex; align-items: center; gap: .5rem; }
.mobnav__social { display: flex; gap: 1.4rem; font-size: .95rem; color: var(--muted); }
body.is-navopen { overflow: hidden; }

/* ============================================================
   HERO-SCENE V3 — galerie livres pleine largeur, 3 colonnes parallax
   ============================================================ */
.hero-scene {
  position: relative; background: var(--white);
  padding: 0 max(var(--gutter), calc((100% - var(--maxw)) / 2)) clamp(9rem, 18vh, 15rem);
  display: grid; grid-template-columns: 1fr;
}
.hero-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  padding-top: clamp(9.5rem, 19vh, 16rem);   /* respiration sous la nav (compense le drift parallax) */
}
.hero-gallery .gcol {
  display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.5rem);
  will-change: transform;
}
/* la col centrale démarre plus bas → décalage éditorial, la parallax fait le reste */
.hero-gallery .gcol--offset { padding-top: clamp(6rem, 13vh, 10rem); }

/* le bouton "Tous les livres" : centré sous la grille, remonté */
.hero-scene__more { display: inline-flex; margin-top: clamp(.5rem, 1.2vw, 1.2rem); justify-self: center; }

.page { position: relative; z-index: 1; background: var(--white); }

.cover__link { display: block; }
.cover__media {
  overflow: hidden; border-radius: 0; background: var(--soft);
  transition: border-radius .6s var(--ease);
}
.cover__media img {
  width: 100%; height: auto; display: block;
  transition: transform .9s var(--ease);
}
.cover:hover .cover__media { border-radius: 0 0 80px 0; }   /* arrondi coin bas-droit au hover — smooth */
.cover:hover .cover__media img { transform: scale(1.04); }

.cover__meta { margin-top: 1.1rem; }
.cover__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cover__title {
  font-weight: 500; font-size: clamp(1.05rem, 1.4vw, 1.4rem);
  letter-spacing: -.02em; line-height: 1.12;
}
.cover__year { flex: none; font-size: .95rem; color: var(--muted); }
.cover__pub { display: block; margin-top: .55rem; font-size: .92rem; color: var(--ink); }
.cover__ill { display: block; margin-top: .15rem; font-size: .92rem; color: var(--muted); }

/* ============================================================
   STATEMENT — citation sur blanc, juste avant le contact
   ============================================================ */
.statement {
  position: relative; z-index: 3; background: var(--white);
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(4rem, 12vh, 9rem) clamp(1.25rem, 4vw, 3rem); text-align: center;
  overflow: hidden;
}
.statement__text {
  font-family: var(--sans); font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 2rem);
  line-height: 1.45; letter-spacing: -.03em; margin: 0 auto; max-width: 44ch;
  font-kerning: normal;
  font-style: normal;
}
.statement__text .accent-italic, .statement__text em { font-style: italic; }
.statement__text .sw__word { color: #d8d7d2; }   /* gris discret avant révélation sur blanc */
.statement__cite {
  display: block; margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--accent); font-style: italic;
  font-size: clamp(1.15rem, 2.1vw, 1.75rem); color: var(--ink);
  opacity: .7;
}

/* ============================================================
   ABOUT — fond blanc (V2)
   ============================================================ */
.about {
  position: relative; z-index: 2; background: var(--white); color: var(--ink);
  min-height: 100svh;
  padding: clamp(3rem, 7vh, 6rem) max(var(--gutter), calc((100% - var(--maxw)) / 2)) clamp(7rem, 14vh, 11rem);
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}
.about__media { width: 100%; max-width: 430px; justify-self: center; }
.about__frame {
  position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 6px;
  background: var(--soft);
}
.about__img {
  position: absolute; top: -12%; left: 0; width: 100%; height: 128%;
  object-fit: cover; object-position: center 32%;   /* garde le visage centré, marge douce pour le parallax */
  will-change: transform;
}
/* largeur commune au surtitre, au titre et au paragraphe : le titre ne dépasse plus */
.about__body { max-width: 30rem; }
.about__body .label { display: block; margin-bottom: 1.4rem; color: var(--muted); }
.about__title {
  font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.08; letter-spacing: -.03em; margin-bottom: 1.8rem; color: var(--ink);
  max-width: 100%;   /* la largeur est imposée par .about__body → titre et paragraphe alignés */
}
.about__title .accent { font-size: 1.15em; color: inherit; }
.about__text { font-size: 1.12rem; line-height: 1.6; max-width: 46ch; color: var(--muted); margin-bottom: 2rem; }
.about__text .accent { font-size: 1.1em; color: inherit; }
.about .link-line { color: var(--ink); border-color: var(--ink); }

/* ============================================================
   MAGAZINES — fond blanc, enchaînement direct avec .about
   ============================================================ */
/* padding bas : assez d'air pour que l'intercalaire "Archives" ne recouvre pas le CTA */
.mags { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: clamp(1rem, 3vh, 2.5rem) var(--gutter) clamp(7rem, 15vh, 12rem); }
/* Page magazines : la liste doit s'aligner exactement sur le titre. Les titres de page
   utilisent la gouttière « max(gutter, (100% - maxw)/2) », alors que .mags combine un
   max-width ET une gouttière : au-delà de 1600 px de large, la liste se retrouvait rentrée
   d'une gouttière supplémentaire de chaque côté. */
.mags--page {
  max-width: 100%;
  padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--maxw)) / 2));
}
.gallery__head { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.gallery__head .label { display: block; margin-bottom: 1.2rem; }
.maglist { border-top: 1px solid var(--line); }
.magrow {
  position: relative;
  display: grid; grid-template-columns: 7rem 1fr auto; align-items: baseline; gap: 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.9rem) 0; border-bottom: 1px solid var(--line);
  transition: opacity .55s var(--ease);
}
/* survol : les autres lignes s'estompent */
.maglist[data-maglist]:hover .magrow { opacity: .28; }
.maglist[data-maglist]:hover .magrow:hover { opacity: 1; }

.magrow__date { font-size: .85rem; color: var(--muted); }
.magrow__title {
  font-weight: 500; font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  line-height: 1.06; letter-spacing: -.02em;
}
.magrow__pub { font-size: .9rem; color: var(--muted); text-align: right; }

/* deux images qui apparaissent près de la ligne, positions variées (vars inline) */
.magrow__media { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.mm {
  position: absolute; width: clamp(120px, 12vw, 185px); aspect-ratio: .84;
  object-fit: cover; border-radius: 4px; box-shadow: 0 24px 45px rgba(20,15,10,.28);
  opacity: 0; transition: opacity .5s var(--ease), transform .65s var(--ease);
}
.mm--a { right: var(--ax); top: var(--ay); transform: rotate(var(--ar)) translateY(24px) scale(.94); }
.mm--b { right: var(--bx); top: var(--by); transform: rotate(var(--br)) translateY(24px) scale(.94); }
.magrow:hover .mm--a { opacity: 1; transform: rotate(var(--ar)) translateY(0) scale(1); }
.magrow:hover .mm--b { opacity: 1; transform: rotate(var(--br)) translateY(0) scale(1); transition-delay: .06s; }
.mags .link-line { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  position: relative; z-index: 3;   /* passe PAR-DESSUS le dossier d'archives épinglé */
  overflow: hidden; min-height: 100svh; background: var(--white);
  display: flex; align-items: center; padding: clamp(6rem, 14vh, 10rem) var(--gutter);
}
.contact__inner { position: relative; z-index: 1; max-width: var(--maxw); width: 100%; margin: 0 auto; text-align: center; }
.contact__big {
  font-family: var(--hand); font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 7rem); line-height: .95; letter-spacing: 0;
  max-width: 18ch; margin: 0 auto clamp(2rem,5vw,3.5rem);
}
/* titre : mots insécables, révélation lettre par lettre (les lettres d'un mot ne se coupent pas) */
.contact__big .word { display: inline-block; white-space: nowrap; }
.contact__big .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.contact__big .w__in { display: inline-block; }
.contact__mail {
  position: relative; display: inline-block;
  font-weight: 500; font-size: clamp(1.4rem, 3.6vw, 2.6rem); letter-spacing: -.03em;
  padding-bottom: .12em;
}
/* souligné par défaut ; au survol : disparaît INSTANTANÉMENT puis réapparaît de gauche à droite */
.contact__mail::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--ink); clip-path: inset(0 0 0 0);
}
.contact__mail:hover::after { animation: underline-slide .5s var(--ease); }
@keyframes underline-slide {
  0%   { clip-path: inset(0 100% 0 0); }   /* disparu (instantané) */
  100% { clip-path: inset(0 0 0 0); }      /* réapparu de gauche à droite */
}
.contact__sub { margin-top: 1.8rem; color: var(--muted); font-size: 1.05rem; }

/* oiseau PLEIN (net) + œil séparé qui disparaît au scroll → fond entièrement jaune */
.contact__grow {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: 150vw; aspect-ratio: 770 / 645;
  transform: translate(-50%,-50%) scale(.28); transform-origin: center center;
  will-change: transform;
}
.contact__grow img { width: 100%; height: 100%; display: block; }
.contact__eye {
  position: absolute; left: 53.5%; top: 36%; width: 10.5%; height: 14.5%;
  background: #fff; border-radius: 50%; transform: translate(-50%,-50%) rotate(-10deg);
}

/* ============================================================
   BLOG-LINK — DOSSIER D'ARCHIVES : bloc gris avec un "tab" (onglet) en haut à gauche.
   Au scroll, le dossier s'élargit progressivement jusqu'à la largeur du container.
   Le texte apparaît en fade + staggered (piloté en JS).
   ============================================================ */
/* Le fond de section est TRANSPARENT au départ : on voit les magazines assombris
   autour du dossier. Il blanchit en fin de pin (JS) pour révéler le bloc contact. */
/* Bloc plein écran, SANS padding : le dossier occupe 100vw et son fond gris devient
   le fond de la page. En se fondant vers le blanc au scroll, il enchaîne naturellement
   avec le bloc contact (oiseau jaune sur fond blanc) — aucune couture visible. */
.blog-link {
  position: relative; z-index: 2; background: #EFECE5;
  padding: 0;
  display: flex; justify-content: center; align-items: stretch;
  min-height: 100svh;
}
.blog-link__wrap { width: 100%; display: flex; align-items: stretch; }

/* ── LE DOSSIER : 100vw, il REMPLIT la section (son haut = haut du bloc gris),
   ce qui permet à l'intercalaire de dépasser par-dessus la section précédente. ── */
.blog-link__card {
  position: relative;
  width: 100vw;
  padding: clamp(4rem, 9vh, 7rem) clamp(2rem, 4vw, 4rem);
  background: #EFECE5;
  display: flex; align-items: center; justify-content: center;
}
/* le contenu garde une largeur de lecture confortable, centré */
.blog-link__inner {
  position: relative; z-index: 2;
  /* large : le titre doit tenir sur les DEUX lignes voulues (la coupure est explicite via
     <br>). À 54ch, la seconde ligne débordait et se recassait en deux. Le paragraphe garde
     sa propre largeur de lecture via .blog-link__text. */
  width: 100%; max-width: min(1200px, 100%);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
}

/* INTERCALAIRE : vrai onglet de dossier — trapèze PLUS LARGE EN BAS qu'en haut,
   biseauté des deux côtés, aligné sur le bord gauche de l'écran (comme un classeur). */
.blog-link__tab {
  position: absolute; top: 1px; left: 0;
  transform: translateY(-100%);
  padding: .85rem 3.6rem .95rem 3.2rem;
  background: #EFECE5;
  /* haut rentré des 2 côtés → les flancs s'évasent vers le bas */
  clip-path: polygon(26px 0, calc(100% - 34px) 0, 100% 100%, 0 100%);
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(.8rem, 1.1vw, .95rem); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  z-index: 3;
}

/* voile qui assombrit les MAGAZINES quand le dossier d'archives arrive par-dessus.
   `.mags` est contraint par max-width : on force le voile à couvrir toute la largeur
   du viewport pour que les bandes latérales soient assombries elles aussi. */
.mags__veil {
  position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%); width: 100vw;
  z-index: 6;
  background: rgba(14,13,12,.55);
  opacity: 0; pointer-events: none;
}

.blog-link__title {
  font-family: var(--sans); font-weight: 400;
  /* même taille que le kicker "Le plaisir des histoires, c'est aussi dans la presse." */
  font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -.03em; margin: 0;
  max-width: 100%;   /* la coupure est explicite via <br> dans le HTML */
}
.blog-link__title .hline { display: block; overflow: hidden; padding-bottom: .08em; }
.blog-link__title .hline-in { display: block; will-change: transform; }
.blog-link__text {
  font-size: 1.05rem; line-height: 1.55; color: var(--muted); margin: 0;
  max-width: 52ch;
}
.blog-link__cta { margin-top: .8rem; }


/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--ink); color: var(--white); padding: clamp(3rem, 7vw, 5rem) 0 2rem; }
.foot__cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(3rem,7vw,5rem);
}
.foot__brand { height: clamp(44px, 5.2vw, 68px); width: auto; margin-left: 0; align-self: start; filter: invert(1); }
.foot__col { display: flex; flex-direction: column; gap: .7rem; align-items: start; }
.foot__label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .5rem; }
.foot__col a { font-size: 1rem; width: fit-content; display: inline-flex; align-items: center; gap: .5rem; transition: opacity .3s var(--ease); }
.foot__col a:hover { opacity: .6; }
.foot__social { color: inherit; }
.foot__social svg { flex: none; }
.foot__social-label { }
.foot__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  max-width: var(--maxw); margin: 0 auto; padding: 2rem var(--gutter) 0;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .85rem; color: rgba(255,255,255,.6);
}
.foot__link { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   VOLET MAGAZINE (drawer) + LIGHTBOX
   ============================================================ */
.magrow[data-mag-open] { cursor: pointer; }

.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0; background: rgba(14,13,12,.42);
  opacity: 0; transition: opacity .55s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  /* plus large : le carrousel laisse voir une illustration entière + le début de la suivante */
  position: absolute; top: 0; left: 0; height: 100%; width: min(820px, 96vw);
  background: var(--white); box-shadow: 30px 0 70px rgba(14,13,12,.2);
  transform: translateX(-100%); transition: transform .6s var(--ease);
  overflow: hidden; display: flex; flex-direction: column;   /* pas de scroll vertical : tout tient à l'écran */
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__close {
  position: absolute; top: clamp(1rem,2vw,1.6rem); right: clamp(1rem,2vw,1.6rem); z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px); color: var(--ink); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.drawer__close:hover { background: var(--ink); color: var(--white); }

/* slider horizontal des photos (en premier) — scrollbar native masquée, drag activé
   La galerie prend la place restante (flex:1), la carte prend la hauteur dispo. */
/* padding-top généreux : la croix vit dans cette bande, au-dessus des illustrations */
/* flex:0 0 auto — la galerie ne prend que sa hauteur propre ; c'est la fiche en dessous
   qui absorbe l'espace restant et y centre son texte. */
.drawer__gallery { padding: clamp(4.2rem, 6vw, 5rem) 1rem 0; flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; }
.drawer__slider {
  /* hauteur PLAFONNÉE (et non plus « tout l'espace restant ») : les visuels respirent et
     laissent la place à la fiche du bas, illustrateur compris. */
  display: flex; gap: 1rem; overflow-x: auto; flex: 0 1 auto;
  height: min(56vh, 560px); min-height: 0;
  cursor: grab; scrollbar-width: none; -ms-overflow-style: none;
}
.drawer__slider::-webkit-scrollbar { display: none; }
.drawer__slider.is-dragging,
.drawer__slider.is-dragging .drawer__slide { cursor: grabbing; }
.drawer__slide {
  position: relative; flex: 0 0 auto;
  border: 0; padding: 0; background: none; cursor: pointer;
  border-radius: 8px; overflow: hidden;
  aspect-ratio: .84; height: 100%; width: auto;   /* la carte remplit la hauteur, la largeur suit le ratio */
}
.drawer__slide img { pointer-events: none; }
/* barre de défilement custom + flèches */
.drawer__controls { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 0 .4rem; }
.drawer__bar { position: relative; flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
/* La barre ne fait que 2 px de haut : on élargit la zone saisissable sans rien changer
   à son apparence, sinon elle serait quasi impossible à attraper à la souris. */
.drawer__bar::before, .book-gallery__bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px;
}
.drawer__bar-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  background: var(--ink); border-radius: 2px; transition: left .1s linear, width .2s var(--ease);
}
.drawer__arrows { display: flex; gap: .5rem; }
.drawer__arrow {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.drawer__arrow:hover { background: var(--ink); color: var(--white); }
.drawer__arrow[disabled] { opacity: .3; cursor: default; }
.drawer__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.drawer__body {
  flex: 1 1 auto;   /* absorbe la hauteur restante */
  display: flex; flex-direction: column; justify-content: center;
  /* marges haute et basse ÉGALES : avec un padding asymétrique, le centrage flex se faisait
     bien dans la boîte de contenu, mais le bloc paraissait poussé vers le haut. */
  padding: clamp(1.2rem,2.5vw,1.8rem) clamp(1.6rem,4vw,3rem);
}
.drawer__date { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.drawer__title {
  font-weight: 500; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em;
  line-height: 1.08; margin: .5rem 0 .35rem;
}
.drawer__pub { font-size: .95rem; color: var(--ink); margin-bottom: .2rem; }
.drawer__ill { font-size: .95rem; color: var(--ink); }

.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(14,13,12,.93);
  display: flex; align-items: center; justify-content: center; padding: 5vw;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lightbox__close {
  position: absolute; top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem);
  width: 48px; height: 48px; border: 0; background: none; color: #fff; cursor: pointer;
}
/* navigation d'un visuel à l'autre SANS quitter le plein écran */
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px;
  /* fond sombre et opaque : en blanc translucide, les flèches devenaient invisibles
     dès que l'illustration derrière était claire. */
  border: 1px solid rgba(255,255,255,.28); background: rgba(14,13,12,.62);
  color: #fff; cursor: pointer;
  transition: background .3s var(--ease), opacity .3s var(--ease);
}
.lightbox__nav:hover { background: rgba(14,13,12,.88); }
.lightbox__nav[disabled] { opacity: .25; cursor: default; }
.lightbox__nav--prev { left: clamp(.75rem, 2.5vw, 2rem); }
.lightbox__nav--next { right: clamp(.75rem, 2.5vw, 2rem); }
.lightbox__count {
  position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%);
  font-size: .85rem; letter-spacing: .08em; color: rgba(255,255,255,.75);
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.reveal.is-inview { opacity: 1; transform: none; }

/* ============================================================
   PAGES SECONDAIRES (livres, magazines, book detail)
   ============================================================ */
.page-hero {
  padding: clamp(7rem, 15vh, 11rem) max(var(--gutter), calc((100% - var(--maxw)) / 2)) clamp(3rem, 6vh, 5rem);
  max-width: 100%;
}
.page-hero .label { display: block; margin-bottom: 1.2rem; color: var(--muted); }
.page-title {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em;
  margin: 0 0 1.5rem; max-width: none;
}
@media (min-width: 769px) {
  .page-hero .page-title { white-space: nowrap; }
}
.page-lead {
  font-size: 1.15rem; line-height: 1.5; color: var(--muted);
  max-width: 52ch;
}

/* Grille en LIGNES (lecture naturelle gauche→droite = ordre chronologique).
   Pour éviter les gros trous entre deux livres d'une même colonne, toutes les cartes
   ont la MÊME hauteur : la vignette a un ratio fixe et la couverture est contenue
   (jamais rognée) sur un fond neutre, et les métas s'alignent en bas. */
.books-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  padding: 0 max(var(--gutter), calc((100% - var(--maxw)) / 2)) clamp(6rem, 12vh, 10rem);
  align-items: start;
}
.books-grid .cover__link { display: flex; flex-direction: column; height: 100%; }
.books-grid .cover__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--soft);
  overflow: hidden;
}
/* La couverture tient ENTIÈREMENT dans le carré, quel que soit son format.
   L'image est posée en absolu sur tout le carré (boîte à hauteur DÉFINIE) et le retrait est
   porté par son propre padding : `object-fit` s'applique au CONTENT BOX, donc l'image est
   contenue dans le carré moins la marge. Deux pièges évités ici :
   – `max-height: 100%` ne se résout pas contre une piste de grille en `auto` (les formats
     hauts — Journal intime, La grande roue… — débordaient) ;
   – `inset: <marge>` ne suffit pas non plus : sur un élément REMPLACÉ, width/height `auto`
     retombent sur la taille intrinsèque au lieu de s'étirer. */
.books-grid .cover__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  padding: clamp(1rem, 2vw, 2rem);
  box-sizing: border-box;
  object-fit: contain;
}
.books-grid .cover:hover .cover__media img { transform: scale(1.03); }

.book-page {
  padding: clamp(7rem, 15vh, 11rem) max(var(--gutter), calc((100% - var(--maxw)) / 2)) clamp(6rem, 12vh, 10rem);
}
.back-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .95rem; color: var(--muted); margin-bottom: clamp(2rem, 4vw, 3.5rem);
  transition: color .3s var(--ease);
}
.back-link:hover { color: var(--ink); }
.book-page__grid {
  display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  max-width: 1100px; margin: 0 auto;      /* container plus étroit et centré */
}

/* ── CARROUSEL de visuels du livre (prêt pour plusieurs images) ── */
.book-gallery { max-width: 340px; }       /* illustration nettement plus petite */
.book-gallery__slider {
  display: flex; gap: .75rem; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.book-gallery__slider::-webkit-scrollbar { display: none; }
.book-gallery__slider, .drawer__slider, .lightbox__img {
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.book-gallery__slider.is-dragging,
.book-gallery__slider.is-dragging .book-gallery__slide { cursor: grabbing; }
.book-gallery__slide {
  position: relative; flex: 0 0 100%;
  border: 0; padding: 0; background: var(--soft); cursor: pointer;
  border-radius: 4px; overflow: hidden;
}
.book-gallery__slide img {
  width: 100%; height: auto; display: block;
  /* pointer-events:none → c'est le bouton qui reçoit le geste, jamais l'image : le
     navigateur ne peut donc pas amorcer son glisser-déposer natif (le fantôme d'image
     qui suivait le curseur). Le volet magazine avait déjà cette protection. */
  pointer-events: none;
}
/* dès qu'il y a 2 visuels ou plus, on laisse entrevoir le suivant */
.book-gallery__slider > .book-gallery__slide:nth-child(n+2),
.book-gallery__slider:has(> .book-gallery__slide:nth-child(2)) > .book-gallery__slide { flex-basis: 88%; }

/* barre de défilement + flèches — injectées par le JS uniquement s'il y a 2 visuels ou plus */
.book-gallery__controls { display: flex; align-items: center; gap: 1rem; padding: 1rem 0 0; }
.book-gallery__bar { position: relative; flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
.book-gallery__bar-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  background: var(--ink); border-radius: 2px; transition: left .1s linear, width .2s var(--ease);
}
.book-gallery__arrows { display: flex; gap: .4rem; }
.book-gallery__arrow {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.book-gallery__arrow:hover { background: var(--ink); color: var(--white); }
.book-gallery__arrow[disabled] { opacity: .3; cursor: default; }
.book-page__meta { padding-top: clamp(1rem, 3vw, 2rem); }
.book-page__meta .label { display: block; margin-bottom: 1rem; color: var(--muted); }
.book-page__title {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -.025em;
  margin: 0 0 1.8rem;
}
/* fiche d'informations : libellé au-dessus (foncé), valeur en dessous (gris) */
.book-info { display: flex; flex-direction: column; gap: 1.35rem; margin-bottom: 2.5rem; }
.book-info__row { display: flex; flex-direction: column; gap: .15rem; }
.book-info__label {
  font-family: var(--sans); font-weight: 500; font-size: .95rem;
  color: var(--ink); letter-spacing: -.01em;
}
.book-info__value { font-size: .95rem; color: var(--muted); }
/* Le synopsis est un texte riche : la cliente peut écrire plusieurs paragraphes, chacun
   sort dans son propre <p>. Les styles portent donc sur les paragraphes, pas sur le bloc. */
.book-page__synopsis { max-width: 48ch; }
.book-page__synopsis p { font-size: 1.05rem; line-height: 1.65; color: var(--muted); }
.book-page__synopsis p + p { margin-top: 1rem; }

/* Espaceur de lecture entre les magazines (épinglés) et le dossier d'archives.
   Volontairement SANS fond : pendant qu'il défile on voit les magazines restés fixes. */
.mags-hold { pointer-events: none; }

.mags-note {
  max-width: var(--maxw); margin: clamp(2rem, 4vw, 3.5rem) auto 0;
  padding: 1.5rem var(--gutter); font-size: .95rem; color: var(--muted); font-style: italic;
  text-align: center;
}

/* ============================================================
   TACTILE — neutralisation des effets de survol
   Sur un écran tactile, :hover se déclenche au toucher ET reste actif après le tap
   (l'élément conserve l'état jusqu'à ce qu'on touche ailleurs) : les rouleaux « machine à
   sous » des CTA restaient bloqués à mi-course, et les vignettes des magazines s'ouvraient
   au premier appui. On cible le MODE D'INTERACTION via `hover: none`, et non la largeur
   d'écran : un grand écran tactile est concerné, un petit écran avec souris ne l'est pas.
   ============================================================ */
@media (hover: none) {
  /* machine à sous : la 1re ligne reste en place, la 2e reste hors champ */
  a:hover .roll__line--1, .roll:hover .roll__line--1, .magrow:hover .roll__line--1 { transform: none; }
  /* La copie décalée ne sert jamais sans hover. La masquer complètement évite que le
     sommet d'un accent (notamment le À) dépasse d'un pixel sous certains titres. */
  .roll__line--2 { display: none; }

  .link-line:hover { gap: .5rem; }
  .link-line:hover .link-line__arrow { transform: none; }
  .nav__mail:hover { color: var(--muted); }
  .back-link:hover { color: var(--muted); }
  .foot__col a:hover { opacity: 1; }

  /* couvertures : ni zoom ni arrondi au toucher */
  .cover:hover .cover__media { border-radius: 0; }
  .cover:hover .cover__media img,
  .books-grid .cover:hover .cover__media img { transform: none; }

  /* magazines : pas d'estompage des autres lignes, pas de vignettes volantes */
  .maglist[data-maglist]:hover .magrow { opacity: 1; }
  .magrow:hover .mm--a, .magrow:hover .mm--b { opacity: 0; }

  .contact__mail:hover::after { animation: none; }

  /* boutons du volet et de la lightbox : on garde l'état de repos */
  .drawer__close:hover, .drawer__arrow:hover, .book-gallery__arrow:hover {
    background: var(--white); color: var(--ink);
  }
  .lightbox__nav:hover { background: rgba(14,13,12,.62); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-gallery { gap: clamp(1rem, 2.5vw, 2rem); }
  .books-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  body { font-size: 17px; }
  /* Gouttière resserrée et UNIFORME : le bloc jaune était descendu à .9rem tandis que le
     reste de la page restait à 1.25rem, ce qui faisait paraître les autres blocs rentrés.
     Tout le contenu s'aligne désormais sur la même marge. */
  :root { --gutter: .95rem; }
  /* align-items: center centre le logo et le burger sur le MÊME axe horizontal, quelle que
     soit la hauteur du logo (qui varie entre l'état déployé et l'état compact). */
  .nav { grid-template-columns: 1fr auto; align-items: center; padding-left: 1.1rem; padding-right: 1.1rem; }
  .nav__brand { --logo-w: clamp(170px, 46vw, 210px); --logo-ratio-full: 0.18127; }
  .nav__menu, .nav__mail { display: none; }
  .burger { display: block; }

  /* Sans script, le menu plein écran ne peut pas être construit. La navigation HTML
     existante reste donc visible sous le logo, sans modifier le menu animé normal. */
  .no-js .nav, .site-static .nav {
    grid-template-columns: 1fr; gap: .65rem;
    background: rgba(255,255,255,.94);
  }
  .no-js .nav__menu, .site-static .nav__menu {
    display: flex; justify-self: start; flex-wrap: wrap; gap: .6rem 1rem;
  }
  .no-js .nav__menu a, .site-static .nav__menu a { font-size: .78rem; }
  .no-js .burger, .site-static .burger { display: none; }

  /* HERO mobile : 2 colonnes (3 en desktop). Les couvertures y sont réparties par le JS,
     qui masque la 3e colonne. La parallax est CONSERVÉE : les deux colonnes gardent leurs
     vitesses distinctes (0.75 et 1.15) — d'où l'absence de `transform: none` ici. */
  .hero-gallery {
    grid-template-columns: 1fr 1fr;
    /* dégagement sous la nav : le logo agrandi l'a fait grandir, et la colonne 1 remonte
       encore avec le parallax — il faut de la marge pour qu'elle ne passe pas derrière. */
    padding-top: clamp(7.5rem, 17vh, 10rem);
    gap: clamp(.9rem, 3.5vw, 1.4rem);
  }
  .hero-gallery .gcol { gap: clamp(.9rem, 3.5vw, 1.4rem); }
  /* les deux colonnes démarrent au MÊME y (le décalage vertical desktop tassait la
     colonne 1 sous la nav) ; le décalage visuel vient désormais du seul parallax. */
  .hero-gallery .gcol--offset { padding-top: 0; }
  /* CTA resserré : moins d'air au-dessus (colonnes) comme en dessous (bloc « Qui suis-je ») */
  .hero-scene__more { margin-left: 0; margin-top: .6rem; }
  .hero-scene { padding-bottom: clamp(3rem, 7vh, 5rem); }

  .ll--animate { width: calc(100vw - 24px); }   /* 12 px de marge de chaque côté */

  /* STATEMENT mobile : le dossier a déjà effectué la transition vers le blanc. Le bloc
     n'a donc pas besoin d'occuper un écran entier avant l'arrivée de l'oiseau. À 82svh,
     le texte centré remonte naturellement et la séquence reste respirante. */
  .statement {
    /* Le contact chevauche les 20 derniers svh. Sur Safari, deux sections opaques de même
       niveau faisaient passer le fond du contact devant « Gérard Z. ». La citation reste
       au-dessus mais devient transparente : le fond blanc et l'oiseau du contact peuvent
       apparaître derrière, tandis que le texte demeure entièrement lisible. */
    z-index: 4; background: transparent;
    min-height: 82svh;
    padding: clamp(3.5rem, 8vh, 5rem) var(--gutter);
  }
  /* max-width relevé : à 22ch la citation restait étroite quoi qu'on fasse du padding —
     c'était elle la contrainte, pas les gouttières. */
  .statement__text { font-size: clamp(1.45rem, 5.4vw, 2rem); line-height: 1.35; max-width: 30ch; }
  .statement__cite { font-size: 1.45rem; }

  .about { grid-template-columns: 1fr; padding-top: clamp(3rem,7vh,5rem); padding-bottom: clamp(3rem,7vh,5rem); }
  /* le portrait occupe toute la largeur DU CONTENU (les gouttières de la section sont
     conservées, il ne déborde pas jusqu'aux bords de l'écran) et s'aplatit : en 4/5 sur
     toute la largeur, il occupait presque un écran entier. */
  .about__media { max-width: none; }
  /* Cadre légèrement plus haut : le 3/2 recadrait le portrait trop près du visage.
     Le 4/3 reste horizontal tout en restituant davantage du buste. */
  .about__frame { aspect-ratio: 4 / 3; }
  /* marge d'image élargie : c'est elle qui borne l'amplitude du parallax — sans ça, un
     mouvement plus ample découvrirait le bord du cadre. */
  .about__img { top: -16%; height: 136%; }

  /* On garde svh (stable) et NON dvh : la section n'étant plus épinglée en mobile, une
     hauteur dynamique ne ferait que la redimensionner en continu au gré de la barre
     d'adresse, et donc décaler le contenu pendant le défilement. Le conteneur fournit une
     course de 105svh au sticky : la section reste en place jusqu'à la fin du titre, sans le
     spacer artificiel d'un pin GSAP. */
  /* La scène commence avant la fin géométrique de la citation. Les deux fonds étant
     blancs, le chevauchement est invisible mais l'oiseau entre environ 20vh plus tôt,
     juste après la signature, au lieu d'attendre que toute la section suivante défile. */
  .contact-stage {
    position: relative; height: 205svh; margin-top: -20svh;
    background: var(--white);
  }
  .contact-stage .contact {
    position: sticky; top: 0;
    height: 100svh; min-height: 100svh;
  }
  /* L'oiseau se présente légèrement au-dessus du centre : il entre plus tôt dans le champ
     après la citation, sans modifier le timeline de scale déjà stabilisé sur mobile. */
  .contact-stage .contact__grow { top: 38%; }

  /* ARCHIVES mobile : plus de hauteur d'écran imposée, le bloc se règle sur son contenu. */
  .blog-link { min-height: 0; }
  .blog-link__card { padding: clamp(3rem, 8vh, 4.5rem) clamp(1.5rem, 6vw, 2.5rem); }
  .blog-link__tab { padding: .7rem 2.4rem .8rem 2rem; }

  /* MAGAZINES mobile — liste simple, PAS d'images, PAS de highlight au scroll */
  .magrow {
    grid-template-columns: 5rem 1fr;
    grid-template-rows: auto auto;
    row-gap: .4rem;
  }
  .magrow__date { grid-column: 1; grid-row: 1; }
  .magrow__title { grid-column: 2; grid-row: 1; }
  .magrow__pub { grid-column: 2; grid-row: 2; text-align: left; }
  .magrow__media { display: none; }
  .maglist[data-maglist]:hover .magrow { opacity: 1; }   /* neutralise le hover desktop */

  /* l'année passe SOUS le titre : côte à côte, un titre long se retrouvait comprimé
     sur trois ou quatre lignes dans une colonne déjà étroite. */
  .cover__head { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .cover__year { color: var(--muted); }

  .foot__cols { grid-template-columns: 1fr 1fr; }
  /* le logo occupe toute la largeur et se centre ; les colonnes de liens restent à gauche.
     align-self sur le logo est indispensable : posé à `start` en desktop, il l'emportait
     sur le align-items du conteneur. */
  .foot__col:first-child { grid-column: 1 / -1; align-items: center; }
  .foot__brand { align-self: center; }

  /* PAGES SECONDAIRES mobile */
  /* deux colonnes égales : les vignettes sont carrées et les métas s'alignent, donc les
     deux colonnes restent équilibrées quelle que soit la longueur des titres. */
  .books-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 5vw, 2.5rem) clamp(.9rem, 3.5vw, 1.4rem);
  }
  .books-grid .cover__media img { padding: clamp(.5rem, 2.5vw, 1rem); }
  .books-grid .cover__title { font-size: 1rem; }
  .books-grid .cover__meta { margin-top: .7rem; }
  .book-page__grid { grid-template-columns: 1fr; }
  /* Plafond de HAUTEUR sur les visuels : une couverture très haute (Journal intime d'une
     femme enceinte, ratio 0.54) remplissait tout l'écran et repoussait le texte hors de vue.
     max-width seul ne suffisait pas — il faut borner la dimension qui déborde, la hauteur.
     Avec width:auto + max-width:100%, chaque format se cale dans le même budget vertical,
     sans déformation ni bande grise. */
  .book-gallery { max-width: 100%; margin: 0 auto; }
  .book-gallery__slide { background: none; }
  .book-gallery__slide img {
    /* plafond en PIXELS et non en unité de viewport : exprimé en svh, il se recalculait
       quand la barre d'adresse se rétractait — l'image semblait grandir au défilement. */
    max-height: 360px; width: auto; max-width: 100%;
    margin: 0 auto;
  }

  /* ── VOLET MAGAZINE mobile : il monte DU BAS, pleine largeur, hauteur selon le contenu ── */
  .drawer__panel {
    top: auto; bottom: 0; left: 0;
    width: 100%; height: auto; max-height: 92svh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -24px 60px rgba(14,13,12,.28);
  }
  .drawer.is-open .drawer__panel { transform: translateY(0); }
  /* la croix se loge dans la bande du haut, au-dessus des illustrations */
  .drawer__close {
    top: .55rem; right: .7rem; width: 40px; height: 40px;
    background: none; backdrop-filter: none;
  }
  .drawer__close svg { width: 22px; height: 22px; }
  .drawer__gallery { padding: 3.4rem .9rem 0; }
  .drawer__slider { height: 40svh; gap: .6rem; }
  .drawer__controls { padding: .8rem 0 .2rem; }
  .drawer__body { padding: .4rem 1.2rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .gcol { transform: none !important; }
}