/* ============================================================
   Ewen Hervé — Page d'autorité
   DA du blog (30 oct. 2026) : fond lavande, encre bleu nuit, accent
   indigo. Typo : Instrument Sans + IBM Plex Mono, auto-hébergées.
   La page pose data-theme='jour' en dur sur <html> : le bloc « jour »
   en fin de fichier porte la palette (l'ancien mode nuit n'est plus
   jamais affiché, ni le bouton de bascule).

   Refonte « organique » (branche apropos-organique) : plus de
   cartes-conteneurs uniformes — le ciel est la seule surface, les
   preuves sont des objets posés dessus (ombres, inclinaisons
   légères), le texte coule en colonne étroite alignée à gauche.
   Règle de dosage : UN geste organique par section (quinconce pour
   les médias, alternance G/D pour les avis, débordement pour la
   bio), tout le reste sur la grille.
   ============================================================ */

@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/InstrumentSans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #05060d;
  --bg-2: #0b0e1a;
  --ink: #eef1f8;
  --muted: #a6adc2;
  --faint: #7d8499;
  --star: #e9dfc0;
  --star-dim: rgba(233, 223, 192, 0.6);
  --border: rgba(255, 255, 255, 0.09);
  --border-2: rgba(255, 255, 255, 0.18);
  /* DA du blog : une seule famille (Instrument Sans) ; --serif garde son nom
     pour ne pas toucher les règles qui l'utilisent. */
  --serif: 'Instrument Sans', system-ui, sans-serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --maxw: 760px;   /* largeur « pleine page » des médias */
  --col: 620px;    /* colonne de lecture (bio, WhatsApp) */
  /* Ombre des objets posés : surchargée en jour (le noir pur ferait
     sale sur l'aurore claire). */
  --drop: 0 22px 50px rgba(0, 0, 0, 0.5);
  --drop-soft: 0 14px 34px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  line-height: 1.55;
  isolation: isolate;
  background:
    radial-gradient(1100px 600px at 50% -12%, rgba(148, 163, 214, 0.10), transparent 65%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 46%, var(--bg) 100%);
  overflow-x: hidden;
}

/* ---------- CIEL ÉTOILÉ (2 couches fixes) ---------- */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
}
/* poussière d'étoiles */
body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27700%27 height=%27700%27%3E%3Cg fill=%27%23ffffff%27%3E%3Ccircle cx=%27420.8%27 cy=%27313.8%27 r=%270.93%27 opacity=%270.41%27/%3E%3Ccircle cx=%27122.4%27 cy=%27368.6%27 r=%270.64%27 opacity=%270.39%27/%3E%3Ccircle cx=%27605.8%27 cy=%27330.6%27 r=%270.62%27 opacity=%270.47%27/%3E%3Ccircle cx=%27522%27 cy=%27214.9%27 r=%270.6%27 opacity=%270.36%27/%3E%3Ccircle cx=%27480.6%27 cy=%27427.4%27 r=%270.5%27 opacity=%270.35%27/%3E%3Ccircle cx=%27586.1%27 cy=%2735.8%27 r=%270.8%27 opacity=%270.23%27/%3E%3Ccircle cx=%27186.9%27 cy=%2743.2%27 r=%270.59%27 opacity=%270.44%27/%3E%3Ccircle cx=%27371.2%27 cy=%2719%27 r=%270.59%27 opacity=%270.46%27/%3E%3Ccircle cx=%27341.4%27 cy=%27566.3%27 r=%270.66%27 opacity=%270.35%27/%3E%3Ccircle cx=%2726.2%27 cy=%2736%27 r=%270.78%27 opacity=%270.39%27/%3E%3Ccircle cx=%27171.6%27 cy=%27452%27 r=%270.6%27 opacity=%270.31%27/%3E%3Ccircle cx=%27517%27 cy=%27601.1%27 r=%270.75%27 opacity=%270.28%27/%3E%3Ccircle cx=%27198.9%27 cy=%27205.1%27 r=%270.54%27 opacity=%270.4%27/%3E%3Ccircle cx=%27476.5%27 cy=%27485.2%27 r=%270.96%27 opacity=%270.24%27/%3E%3Ccircle cx=%27660.6%27 cy=%27301.8%27 r=%270.97%27 opacity=%270.26%27/%3E%3Ccircle cx=%2777.7%27 cy=%2711.1%27 r=%270.68%27 opacity=%270.35%27/%3E%3Ccircle cx=%27428.3%27 cy=%27629.7%27 r=%270.54%27 opacity=%270.42%27/%3E%3Ccircle cx=%27654.4%27 cy=%27194.8%27 r=%270.85%27 opacity=%270.27%27/%3E%3Ccircle cx=%27364.2%27 cy=%27575.3%27 r=%270.56%27 opacity=%270.5%27/%3E%3Ccircle cx=%27394%27 cy=%27641.3%27 r=%270.72%27 opacity=%270.38%27/%3E%3Ccircle cx=%27235.9%27 cy=%27417.4%27 r=%270.66%27 opacity=%270.42%27/%3E%3Ccircle cx=%27206.6%27 cy=%27314.8%27 r=%270.92%27 opacity=%270.41%27/%3E%3Ccircle cx=%27695.8%27 cy=%27623.1%27 r=%270.72%27 opacity=%270.37%27/%3E%3Ccircle cx=%27207.2%27 cy=%2770.6%27 r=%270.85%27 opacity=%270.31%27/%3E%3Ccircle cx=%27550.2%27 cy=%27633.3%27 r=%270.55%27 opacity=%270.35%27/%3E%3Ccircle cx=%27575.4%27 cy=%2791%27 r=%270.99%27 opacity=%270.27%27/%3E%3Ccircle cx=%27496.6%27 cy=%27489.8%27 r=%270.61%27 opacity=%270.34%27/%3E%3Ccircle cx=%27114.4%27 cy=%27458.3%27 r=%270.67%27 opacity=%270.28%27/%3E%3Ccircle cx=%27440.2%27 cy=%27620.8%27 r=%270.66%27 opacity=%270.44%27/%3E%3Ccircle cx=%27275.1%27 cy=%2792%27 r=%270.93%27 opacity=%270.32%27/%3E%3Ccircle cx=%276.7%27 cy=%27516.2%27 r=%270.82%27 opacity=%270.47%27/%3E%3Ccircle cx=%27635.7%27 cy=%27146.3%27 r=%270.8%27 opacity=%270.36%27/%3E%3Ccircle cx=%27128.8%27 cy=%2733.2%27 r=%270.85%27 opacity=%270.42%27/%3E%3Ccircle cx=%27204%27 cy=%27192.8%27 r=%270.67%27 opacity=%270.23%27/%3E%3Ccircle cx=%27154.6%27 cy=%27695.5%27 r=%270.79%27 opacity=%270.5%27/%3E%3Ccircle cx=%27114.7%27 cy=%27119.6%27 r=%270.78%27 opacity=%270.3%27/%3E%3Ccircle cx=%27276.3%27 cy=%27304.1%27 r=%270.71%27 opacity=%270.41%27/%3E%3Ccircle cx=%27279%27 cy=%27235.3%27 r=%270.95%27 opacity=%270.31%27/%3E%3Ccircle cx=%27346.7%27 cy=%27427.6%27 r=%270.77%27 opacity=%270.39%27/%3E%3Ccircle cx=%27164.8%27 cy=%27227.8%27 r=%270.65%27 opacity=%270.31%27/%3E%3Ccircle cx=%27468.5%27 cy=%27154.6%27 r=%270.58%27 opacity=%270.41%27/%3E%3Ccircle cx=%27220%27 cy=%2787.4%27 r=%270.66%27 opacity=%270.23%27/%3E%3Ccircle cx=%27404.3%27 cy=%27145.4%27 r=%270.74%27 opacity=%270.33%27/%3E%3Ccircle cx=%27498.4%27 cy=%27638.8%27 r=%270.91%27 opacity=%270.34%27/%3E%3Ccircle cx=%27107.9%27 cy=%27607.3%27 r=%270.76%27 opacity=%270.46%27/%3E%3Ccircle cx=%27626.2%27 cy=%27315.1%27 r=%270.57%27 opacity=%270.39%27/%3E%3C/g%3E%3C/svg%3E");
}
/* étoiles brillantes, scintillement lent */
body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%271100%27 height=%271100%27%3E%3Cg fill=%27%23ffffff%27%3E%3Ccircle cx=%2712.9%27 cy=%2768.2%27 r=%271.59%27 opacity=%270.78%27/%3E%3Ccircle cx=%27573.6%27 cy=%27446.1%27 r=%271.28%27 opacity=%270.6%27/%3E%3Ccircle cx=%27608.7%27 cy=%27802.8%27 r=%271.15%27 opacity=%270.56%27/%3E%3Ccircle cx=%27840.5%27 cy=%27570.2%27 r=%271.12%27 opacity=%270.65%27/%3E%3Ccircle cx=%27322.6%27 cy=%27588.2%27 r=%271.18%27 opacity=%270.89%27/%3E%3Ccircle cx=%27272.3%27 cy=%27965.6%27 r=%271.11%27 opacity=%270.56%27/%3E%3Ccircle cx=%27170.1%27 cy=%27320%27 r=%271.33%27 opacity=%270.8%27/%3E%3Ccircle cx=%2782%27 cy=%271004.2%27 r=%271.33%27 opacity=%270.75%27/%3E%3Ccircle cx=%27748.1%27 cy=%271062.6%27 r=%271.37%27 opacity=%270.87%27/%3E%3Ccircle cx=%27910.4%27 cy=%2744%27 r=%271.1%27 opacity=%270.64%27/%3E%3Ccircle cx=%27467.8%27 cy=%2722.2%27 r=%271.05%27 opacity=%270.81%27/%3E%3Ccircle cx=%27405.9%27 cy=%27469.4%27 r=%271.28%27 opacity=%270.88%27/%3E%3Ccircle cx=%27773.6%27 cy=%27757.1%27 r=%271.2%27 opacity=%270.64%27/%3E%3Ccircle cx=%27152.7%27 cy=%27146.6%27 r=%271.55%27 opacity=%270.63%27/%3E%3Ccircle cx=%27209.4%27 cy=%27695.4%27 r=%271.2%27 opacity=%270.52%27/%3E%3Ccircle cx=%27752.7%27 cy=%271013.5%27 r=%271.33%27 opacity=%270.83%27/%3E%3C/g%3E%3C/svg%3E");
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 450;
  letter-spacing: -0.01em;
}

/* accent : italique « lumière d'étoile » (ex-dégradé) */
.grad {
  font-style: italic;
  font-weight: 400;
  color: var(--star);
}

/* ---------- NAV ---------- */
/* Pas de bandeau : la lune et le CTA flottent simplement en haut du contenu.
   fixed plutôt que sticky : l'en-tête reste visible au scroll SANS occuper
   de place dans le flux. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 0.95rem 0;
  padding-top: max(0.95rem, env(safe-area-inset-top));
}
.nav__logo {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  color: #4338ca; background: #fff; border: 1px solid #e3e4ee;
}
.nav__logo:focus-visible { outline: 2px solid #4338ca; outline-offset: 3px; }
.nav__cta {
  font-size: 0.8rem; font-weight: 400; letter-spacing: 0.04em;
  text-decoration: none; color: var(--muted, #b9b4c4); white-space: nowrap;
  background: rgba(5, 6, 13, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.5rem 1rem; border-radius: 999px;
  border: 1px solid var(--border);
  transition: color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .nav__cta:hover { color: #fff; border-color: rgba(233, 223, 192, 0.45); }
}

/* ---------- HERO ----------
   Fin du tout-centré : titre à gauche, puis la photo — réduite,
   légèrement inclinée, calée à droite — et le texte dessous. En
   desktop le lead, les stats et le CTA remontent à gauche de la
   photo (grid areas). La trustbar en boîtes est une ligne nue. */
.hero {
  position: relative;
  padding: calc(clamp(2rem, 6vh, 3.6rem) + 1.2rem) 1.1rem 2.6rem;
  overflow: hidden;
}
.hero__glow {
  position: absolute; inset: -25% -30% auto -30%; height: 60%;
  background: radial-gradient(closest-side, rgba(148, 163, 214, 0.12), transparent);
  filter: blur(12px); pointer-events: none;
}
.hero__inner {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  display: grid; justify-items: start; text-align: left; gap: 1rem;
}
.hero__title {
  font-size: clamp(2.5rem, 10.5vw, 3.7rem); line-height: 1.04;
  color: #fff;
}
.hero__lead {
  font-size: 1.02rem; color: var(--muted); max-width: 44ch; margin: 0;
  line-height: 1.65;
}

/* La photo, objet posé : plus petite qu'avant (elle mangeait un écran
   entier), inclinée, calée à droite pour installer la diagonale. */
.hero__photo {
  position: relative; width: 74%; max-width: 320px;
  justify-self: end; margin: 0.2rem 0;
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--drop);
  transform: rotate(var(--tilt, 0deg));
  --tilt: -1.5deg;
}
.hero__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Desktop : toute la colonne de texte (titre, lead, stats, CTA) à
   gauche, serrée et dans l'ordre de lecture ; la photo occupe la
   droite, centrée sur la hauteur du bloc. Le CTA suit la trustline
   au lieu d'être aligné sur le bas de la photo (ça creusait des
   trous entre chaque élément). */
@media (min-width: 780px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      'title photo'
      'lead  photo'
      'trust photo'
      'cta   photo';
    column-gap: 2.4rem; align-items: start;
  }
  .hero__title { grid-area: title; }
  .hero__photo { grid-area: photo; width: 100%; max-width: 380px; margin: 0; align-self: center; justify-self: center; }
  .hero__lead { grid-area: lead; margin-top: 0.2rem; }
  .hero__inner .trustline { grid-area: trust; }
  .hero__inner .cta { grid-area: cta; align-self: start; justify-self: start; margin-top: 0.4rem; }
}

/* Ligne de confiance nue : chiffres en accent, libellés en
   petites capitales, séparés par de petites étoiles. */
.trustline {
  list-style: none; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.35rem 0.95rem; margin: 0.1rem 0 0.6rem;
}
.trustline li { display: inline-flex; align-items: baseline; gap: 0.42rem; }
.trustline li + li::before {
  content: '✦' / ''; color: var(--star-dim); font-size: 0.55rem;
  align-self: center; margin-right: 0.55rem;
}
.trustline strong {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.15rem; color: var(--star);
}
.trustline span {
  font-size: 0.66rem; font-weight: 400; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---------- CTA ---------- */
.cta {
  display: inline-block; text-decoration: none; white-space: nowrap;
  font-weight: 500; letter-spacing: 0.02em;
  font-size: clamp(0.9rem, 4vw, 1.02rem); color: var(--bg);
  background: var(--ink);
  padding: 0.95rem 2.1rem; border-radius: 999px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.cta:active { transform: translateY(1px) scale(0.99); }
@media (hover: hover) {
  .cta:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45), 0 0 30px rgba(233, 223, 192, 0.22);
  }
}
.cta--lg { font-size: clamp(0.95rem, 4vw, 1.12rem); padding: 1.1rem 2.4rem; }
.cta--bio { display: block; width: fit-content; margin: 2.1rem auto 0; }

/* ---------- SECTIONS ----------
   Plus de bandes alternées ni de filets pleine largeur : les sections
   se séparent par l'espace et un dinkus ✦ discret. Les titres
   s'alignent à gauche, et à droite une section sur deux — c'est
   l'alternance qui donne le rythme au scroll. */
.section { padding: 2.7rem 1.1rem; }
/* `+` et non :not(:first-of-type) : le hero est aussi un <section>, le
   combinateur exclut proprement la première .section (#medias). Le
   texte alternatif vide (`/ ''`) évite que les lecteurs d'écran
   annoncent l'étoile décorative. */
.section + .section::before {
  content: '✦' / '';
  display: block; text-align: center;
  color: var(--star-dim); font-size: 0.7rem;
  margin: 0 auto 2.6rem;
  opacity: 0.7;
}
.section__head { max-width: var(--maxw); margin: 0 auto 1.6rem; text-align: left; }
.section__head h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.14; color: #fff; }
.section__head--right { text-align: right; }
.section__head--center { text-align: center; }
.section__sub { margin-top: 0.6rem; color: var(--muted); font-size: 0.95rem; }

/* ---------- BANDEAU MÉDIAS (logos réels) ----------
   Centré sous le titre, logos francs, respiration large au-dessus et
   en dessous : le bandeau tient lieu d'en-tête de catégorie. Seul
   France 2 garde une plaque crème (son logo bicolore en a besoin) ;
   RTL est autonome (bloc rouge) et NRJ passe nu — tout entourer de
   blanc faisait « sur-encadré ». */
.mediabar {
  max-width: var(--maxw); margin: 2.2rem auto 2.6rem;
  display: flex; align-items: center; justify-content: center;
  gap: 1.4rem; flex-wrap: wrap;
}
.mediabar__logos { display: contents; }
.mediabar__logos img { width: auto; object-fit: contain; }
.mediabar__logos img:nth-child(1) {
  height: 48px;
  background: #f5f4ef; border-radius: 12px;
  padding: 0.55rem 0.85rem;
  box-shadow: var(--drop-soft);
}
.mediabar__logos img:nth-child(2) { height: 42px; border-radius: 8px; }  /* RTL (bloc rouge autonome) */
.mediabar__logos img:nth-child(3) { height: 54px; }  /* NRJ */

/* ---------- MÉDIAS (un héros + trois vignettes) ----------
   Un passage plein cadre puis une rangée de vignettes : hiérarchie
   claire plutôt que quinconce uniforme. Tirages nus à ombre portée,
   la chaîne en légende sous l'image. */
.media-grid {
  max-width: var(--maxw); margin: 0 auto; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 1.1rem 0.7rem;
}
.media-card {
  display: block; text-decoration: none;
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .media-card:hover { transform: translateY(-3px); }
}
.media-card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--drop-soft);
}
.media-card--lead { grid-column: 1 / -1; max-width: 560px; }
.media-card--lead img { aspect-ratio: 16 / 10; border-radius: 12px; box-shadow: var(--drop); }

/* ---------- LECTEURS VIDÉO (avis + podcasts) ----------
   Plus aucune carte : lecteur nu + ombre, libellé en note dessous.
   Sur mobile étroit (<480px), une colonne de lecteurs réduits (~85 %)
   alternés gauche/droite : plus petits qu'avant (le « trop zoomé »)
   mais jamais sous la taille utilisable d'un player YouTube — en deux
   colonnes ils tomberaient à ~165px de large, contrôles intouchables.
   Dès 480px, deux colonnes. */
.pods {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  gap: 1.1rem 0.8rem;
}
.pods > .pod:not(.pod--une) { width: min(100%, 320px); }
.pods > .pod:not(.pod--une):nth-of-type(even) { margin-left: auto; }
@media (min-width: 480px) {
  .pods { grid-template-columns: repeat(2, 1fr); gap: 0.9rem 0.8rem; }
  .pods > .pod:not(.pod--une) { width: 100%; }
  .pods > .pod:not(.pod--une):nth-of-type(even) { margin-left: 0; }
}

/* Avis : deux témoignages « à la une » alternés gauche / droite,
   quatre brèves dessous — la section qui raccourcit la page. */
.pods--avis { gap: 1.5rem 0.8rem; }
.pod {
  background: none; border: none; overflow: visible;
}
.pod__player {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--drop-soft);
}
.pod__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pod__body { padding: 0.55rem 0.1rem 0; }
.pod__line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem;
}
.pod__body h3 { font-size: 0.92rem; color: var(--muted); line-height: 1.25; font-family: var(--sans); font-weight: 400; }
.pod__stars {
  font-size: 0.72rem; color: var(--star); letter-spacing: 2px;
  white-space: nowrap;
}

/* Les deux « à la une » : pleine ligne, largeur contenue, alternance. */
.pod--une { grid-column: 1 / -1; width: min(100%, 540px); }
.pod--une:nth-of-type(1) { margin-right: auto; }
.pod--une:nth-of-type(2) { margin-left: auto; }
.pod--une .pod__player { box-shadow: var(--drop); }
.pod--une .pod__body h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.08rem; color: var(--ink);
}
.pod--une .pod__stars { font-size: 0.78rem; }

/* ---------- MESSAGES WHATSAPP ----------
   Preuve écrite brute : la capture EST le conteneur (sa bulle suffit),
   posée inclinée sur le ciel, une version par thème (le switch se fait
   en CSS pur, comme le reste de la bascule jour/nuit). */
.wa {
  max-width: var(--col); margin: 0 auto;
  transform: rotate(var(--tilt, 0deg));
}
.pods--avis .wa { grid-column: 1 / -1; margin: 0.4rem auto; }
/* Les deux messages se chevauchent comme deux papiers posés l'un sur
   l'autre : le court calé à gauche, le long qui remonte dessus par la
   droite (leurs inclinaisons opposées font le reste). Le long remonte
   juste assez pour toucher le court sans masquer la fin de son message.
   Annulé à partir de 1024px, où ils vivent côte à côte. */
.pods--avis .wa--court { margin: 0.4rem auto 0 1.3rem; }
.pods--avis .wa--long { margin: -1.2rem 0.9rem 0 auto; }
.wa__img {
  width: 100%; height: auto;
  border-radius: 14px;
  box-shadow: var(--drop-soft);
}
/* Sur téléphone, les captures se font discrètes (~75 % / ~85 % de
   leur ancienne taille — la longue, mieux cadrée, garde un peu plus
   de place) ; elles reprennent leur taille pleine à partir de 1024px
   où elles vivent côte à côte. */
.wa--court { width: min(66%, 300px); --tilt: 1.2deg; }
.wa--long { width: min(70%, 306px); --tilt: -1.4deg; margin: 2rem auto 0; position: relative; z-index: 3; }
.wa__img--jour { display: none; }

/* ---------- BIO ----------
   La carte saute : le texte coule directement sur le ciel, colonne
   de lecture étroite, lettrine sur le premier paragraphe, et le
   paragraphe-résultat en exergue entre deux filets fins. */
.bio { max-width: var(--maxw); margin: 0 auto; }
.bio .section__head { margin-left: 0; }
.bio__text {
  max-width: var(--col); display: grid; gap: 0.9rem;
}
.bio__text p { color: var(--muted); font-size: 1rem; line-height: 1.7; }
.bio__text strong { color: var(--ink); font-weight: 500; }
.bio__text > p:first-child::first-letter {
  font-family: var(--serif); font-weight: 450;
  font-size: 3.2em; line-height: 0.82;
  float: left; padding: 0.04em 0.12em 0 0;
  color: var(--star);
}
.bio__text p.exergue {
  font-family: var(--serif); font-style: italic;
  font-size: 1.28rem; line-height: 1.45; color: var(--ink);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 1rem 0.1rem; margin: 0.4rem 0;
}
.bio__text p.exergue strong { font-weight: 500; }

/* ---------- L'ACCOMPAGNEMENT EN BREF (sous la bio) ---------- */
.offer { max-width: var(--col); display: grid; gap: 0.75rem; }
.offer p { color: var(--muted); font-size: 1rem; line-height: 1.65; }
.offer strong { color: var(--ink); font-weight: 500; }
.offer a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.offer p.offer__lead { color: var(--ink); font-size: 1.08rem; margin-bottom: 0.3rem; }

/* ---------- COLLAGE DE PREUVES (sous la bio) ----------
   Polaroids inclinés qui se chevauchent, façon photos posées sur une
   table. Les cadres restent sombres dans les deux thèmes : ce sont
   des captures d'app en dark mode, un cadre clair jurerait. */
.collage { margin-top: 2rem; }

/* Avant → aujourd'hui : deux polaroids côte à côte, flèche tracée
   main entre les deux (le seul geste dessiné de la page). */
.evo {
  display: flex; justify-content: center; align-items: center;
  gap: 0.4rem;
  position: relative; z-index: 2;
}
.evo__step {
  width: 44%; max-width: 240px;
  /* Plaque gardée sombre dans les deux thèmes → liseré clair figé
     (var(--border) devient invisible dessus en jour) et ombre en
     token pour s'adoucir sur l'aurore. */
  background: #1e1b4b; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px;
  padding: 0.45rem;
  box-shadow: var(--drop);
  transform: rotate(var(--tilt, 0deg));
}
.evo__step:first-child { --tilt: -3deg; }
.evo__step:last-child { --tilt: 2.5deg; }
.evo__step img { width: 100%; height: auto; border-radius: 9px; display: block; }
.evo__arrow { flex: none; width: 40px; height: 26px; color: var(--star-dim); }

/* Trois relevés bruts en quinconce, qui remontent sous l'avant/après */
.proofs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 0.6rem; align-items: start;
  margin-top: 1.1rem;
}
.proofs__shot {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px;
  box-shadow: var(--drop-soft);
  background: #1e1b4b;
  transform: rotate(var(--tilt, 0deg));
}
.proofs__shot:nth-child(1) { --tilt: -2deg; margin-top: 0.9rem; }
.proofs__shot:nth-child(2) { --tilt: 3deg; position: relative; z-index: 1; }
.proofs__shot:nth-child(3) {
  grid-column: 1 / -1; width: 78%; margin: -1.6rem auto 0;
  --tilt: -1.5deg; position: relative; z-index: 2;
}

/* ---------- AVIS VIDÉO (carousel vertical 9:16) ----------
   Le carrousel reste (bon pattern mobile) mais les cartes se
   déshabillent : cadre 9:16 nu + ombre, la fiche devient une légende
   posée sur le ciel — elle suit les tokens des deux thèmes. */
.vscroll-wrap { position: relative; }
.vscroll {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.4rem 1.1rem 1.2rem; margin: 0 -1.1rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.vscroll-wrap::after {
  content: '›' / ''; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  font-size: 2.8rem; font-weight: 300; line-height: 1;
  color: rgba(255, 255, 255, 0.25); pointer-events: none;
  animation: fadeArrow 2s ease-in-out infinite alternate;
}
@keyframes fadeArrow { from { opacity: 0.18; transform: translateY(-50%) translateX(0); } to { opacity: 0.55; transform: translateY(-50%) translateX(4px); } }
.vscroll::-webkit-scrollbar { display: none; }
.vcard {
  position: relative; flex: 0 0 auto; width: 200px;
  display: flex; flex-direction: column;
  scroll-snap-align: center;
}
.vcard:first-child { margin-left: max(0px, calc(50vw - var(--maxw)/2 - 1.1rem)); }
.vcard:nth-child(even) { margin-top: 0.8rem; }
.vcard__frame {
  position: relative; aspect-ratio: 9 / 16; background: #000;
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--drop-soft);
}
.vcard__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vcard__ph {
  position: absolute; inset: 0; cursor: pointer;
  background:
    radial-gradient(130% 70% at 50% 8%, rgba(233, 223, 192, 0.10), transparent 60%),
    linear-gradient(160deg, #141830, #0a0c18);
}
.vcard__initial {
  position: absolute; top: 16%; left: 50%; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 1.4rem; font-weight: 500; color: var(--bg);
  background: var(--star); box-shadow: 0 10px 28px rgba(233, 223, 192, 0.3);
}
.vcard__phlabel {
  position: absolute; top: 60%; left: 0; right: 0; text-align: center;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: #7d8499;
}
.vcard__meta { padding: 0.55rem 0.15rem 0; text-align: left; }
.vcard__name {
  font-family: var(--serif); font-style: italic;
  font-weight: 450; color: var(--ink); font-size: 1rem;
}
.vcard__tag { display: block; font-size: 0.7rem; color: var(--faint); font-weight: 400; margin-top: 1px; text-transform: uppercase; letter-spacing: 0.07em; }
.vcard__stars { font-size: 0.7rem; color: var(--star); letter-spacing: 2px; margin-top: 3px; }

/* ---------- FINAL CTA ---------- */
.final { position: relative; padding: 3rem 1.1rem 3.4rem; overflow: hidden; }
.final__glow {
  position: absolute; inset: auto -20% -30% -20%; height: 70%;
  background: radial-gradient(closest-side, rgba(233, 223, 192, 0.08), transparent);
  filter: blur(20px); pointer-events: none;
}
.final__inner {
  position: relative; max-width: 560px; margin: 0 auto; text-align: center;
  display: grid; justify-items: center; gap: 1.1rem;
}
.final__inner::before { content: '✦' / ''; color: var(--star-dim); font-size: 0.8rem; }
.final__inner h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); color: #fff; line-height: 1.14; }
.final__note {
  font-size: 0.68rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.16em;
}

/* ---------- FOOTER ---------- */
.footer {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 1.4rem 1.1rem 2rem; padding-bottom: max(2rem, env(safe-area-inset-bottom));
  text-align: center;
}
.footer__socials {
  display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap;
}
.footer__social {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  color: var(--faint); text-decoration: none; font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: color 0.2s ease;
}
.footer__social:hover { color: var(--star); }

/* ---------- FOCUS ---------- */
a:focus-visible {
  outline: 2px solid var(--star-dim);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- REVEAL ANIMATION ----------
   Compose la rotation --tilt : sans ça, la transition de .reveal
   écraserait les inclinaisons des objets posés. */
.reveal { opacity: 0; transform: translateY(22px) rotate(var(--tilt, 0deg)); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: rotate(var(--tilt, 0deg)); transition: none; }
  html { scroll-behavior: auto; }
  body::after { animation: none; }
  .vscroll-wrap::after { animation: none; }
}

/* ---------- DESKTOP (la page reste pensée mobile, on élargit juste) ---------- */
@media (min-width: 720px) {
  .hero { padding-top: 3.8rem; }
  .hero__title { font-size: clamp(2.7rem, 5vw, 3.8rem); }
  /* Le collage plein cadre écraserait la bio : on le resserre. */
  .collage { max-width: 600px; margin-left: auto; margin-right: auto; }
  .vcard { width: 230px; }
}

/* ---------- GRAND ÉCRAN (≥1024px) ----------
   La colonne mobile de 760px empilait tout : sur ordi on élargit à
   1020px et on met côte à côte ce qui n'a pas besoin d'être empilé —
   les deux avis « à la une », les quatre brèves, les quatre podcasts
   sur une rangée, et la bio texte + collage en deux colonnes. Rien
   ne change sous 1024px. */
@media (min-width: 1024px) {
  :root { --maxw: 1020px; }

  /* Médias : quatre grands passages de même taille, en 2×2 — la
     hiérarchie héros + vignettes ne vaut que sur mobile. */
  .media-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem; }
  .media-grid .media-card img { aspect-ratio: 16 / 10; border-radius: 12px; box-shadow: var(--drop); }
  .media-card--lead { grid-column: auto; max-width: none; }

  /* Avis : les deux « à la une » côte à côte, puis les deux messages
     WhatsApp côte à côte, puis les quatre brèves sur une rangée. */
  .pods--avis { grid-template-columns: repeat(4, 1fr); gap: 1.5rem 1rem; }
  .pod--une { grid-column: span 2; width: 100%; }
  .pod--une:nth-of-type(1) { margin-right: 0; }
  .pod--une:nth-of-type(2) { margin-left: 0; }
  .pods--avis .wa { grid-column: span 2; }
  .pods--avis .wa--court { align-self: center; margin: 0.4rem auto; }
  .pods--avis .wa--long { margin: 0.4rem auto; }
  .wa--court { width: min(88%, 400px); }
  .wa--long { width: min(82%, 360px); }

  /* Podcasts : deux colonnes de grands lecteurs, comme les avis
     « à la une » — pas quatre miniatures sur une rangée. */
  #podcasts .pods { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1rem; }

  /* Bio : le texte à gauche, le collage de preuves à droite — la
     section la plus verticale de la page devient un face-à-face. */
  .bio {
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      'head head'
      'text collage'
      'cta  cta';
    column-gap: 2.6rem; align-items: start;
  }
  .bio .section__head { grid-area: head; }
  .bio .bio__text { grid-area: text; }
  /* width:100% + marges à zéro : les margin auto hérités du bloc 720
     feraient s'effondrer l'item de grille à sa largeur intrinsèque. */
  .bio .collage { grid-area: collage; margin: 0; width: 100%; max-width: 440px; justify-self: center; }
  .bio .cta--bio { grid-area: cta; }
}

/* ============================================================
   PALETTE — DA du blog. [data-theme='jour'] est posé en dur sur <html>
   (index.html) : ce bloc s'applique toujours. Les overlays d'images
   gardent leur voile sombre + texte clair.
   ============================================================ */
html[data-theme='jour'] {
  --bg: #f4f4f9;
  --bg-2: #ffffff;
  --ink: #16172b;
  --muted: #5a5f73;
  --faint: #868b9f;
  --star: #4338ca;
  --star-dim: #4338ca;
  --border: #e3e4ee;
  --border-2: #d4d6e3;
  --drop: 0 18px 40px rgba(22, 23, 43, 0.16);
  --drop-soft: 0 10px 26px rgba(22, 23, 43, 0.12);
  color-scheme: light;
}

html[data-theme='jour'] body { background: #f4f4f9; }
html[data-theme='jour'] body::before,
html[data-theme='jour'] body::after { display: none; }

/* Titres (blanc pur en nuit) → encre ; poids et interlettrage du blog */
html[data-theme='jour'] .hero__title,
html[data-theme='jour'] .section__head h2,
html[data-theme='jour'] .final__inner h2 { color: #16172b; font-weight: 600; letter-spacing: -0.03em; }

/* Captures WhatsApp : version claire */
html[data-theme='jour'] .wa__img--nuit { display: none; }
html[data-theme='jour'] .wa__img--jour { display: block; }

html[data-theme='jour'] .trustline strong { color: #4338ca; }

/* CTA : bouton plein indigo, comme le reste du site */
html[data-theme='jour'] .cta {
  color: #fff;
  background: #4338ca;
  border-radius: 12px;
  box-shadow: none;
}
@media (hover: hover) {
  html[data-theme='jour'] .cta:hover { background: #1e1b4b; box-shadow: none; transform: none; }
}
html[data-theme='jour'] .nav__cta { background: #fff; color: #16172b; border-color: #e3e4ee; }
@media (hover: hover) {
  html[data-theme='jour'] .nav__cta:hover { color: #4338ca; border-color: #dcdaf8; }
}

html[data-theme='jour'] .vscroll-wrap::after { color: rgba(22, 23, 43, 0.3); }

/* ============================================================
   THÈME SOMBRE (3 nov. 2026) — suit le réglage clair/sombre du
   téléphone ou de l'ordinateur, sans bouton. Gris anthracite neutre,
   même palette que le reste du site (app/_components/neurosleep/
   da-blog.css). Les captures WhatsApp repassent en version sombre.
   ============================================================ */
@media screen and (prefers-color-scheme: dark) {
  html[data-theme='jour'] {
    --bg: #121214;
    --bg-2: #1b1b20;
    --ink: #ececf1;
    --muted: #a1a3b0;
    --faint: #8a8c98;
    --star: #a39eff;
    --star-dim: #a39eff;
    --border: #2b2c33;
    --border-2: #393a42;
    --drop: 0 22px 50px rgba(0, 0, 0, 0.5);
    --drop-soft: 0 14px 34px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
  html[data-theme='jour'] body { background: #121214; }
  html[data-theme='jour'] .hero__title,
  html[data-theme='jour'] .section__head h2,
  html[data-theme='jour'] .final__inner h2 { color: #ececf1; }
  html[data-theme='jour'] .wa__img--nuit { display: block; }
  html[data-theme='jour'] .wa__img--jour { display: none; }
  html[data-theme='jour'] .trustline strong { color: #a39eff; }
  html[data-theme='jour'] .cta { background: #5b54e8; }
  html[data-theme='jour'] .nav__cta { background: #1b1b20; color: #ececf1; border-color: #2b2c33; }
  html[data-theme='jour'] .vscroll-wrap::after { color: rgba(236, 236, 241, 0.3); }
  html[data-theme='jour'] .nav__logo { color: #a39eff; background: #1b1b20; border-color: #2b2c33; }
}
@media screen and (prefers-color-scheme: dark) and (hover: hover) {
  html[data-theme='jour'] .cta:hover { background: #6d67ef; }
  html[data-theme='jour'] .nav__cta:hover { color: #a39eff; border-color: rgba(163, 158, 255, 0.4); }
}