/* Polices hébergées avec le site (Geist, licence SIL OFL) : aucune requête vers Google */
@font-face { font-family: "Geist"; src: url("assets/fonts/geist-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/fonts/geist-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/fonts/geist-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* =========================================================
   LUMEN — régie de médias experts
   Concept : le lever de soleil. En haut, le soleil monte derrière
   l'horizon pendant qu'on fait défiler ; en bas, un demi-soleil se
   lève derrière le logo. Entre les deux, la souris porte la lumière.
   Une seule famille (Geist) + une version mono pour les étiquettes.
   ========================================================= */

:root {
  --nuit: #06070b;
  --nuit-2: #0d0f16;
  --blanc: #efede7;
  --gris: #8b909d;
  --gris-2: #7a7f8d;
  --trait: rgba(239, 237, 231, 0.11);

  --bleu: #2a5ee0;
  --bleu-clair: #8fb0ff;
  --cyan: #45d0cf;
  --vert: #a8e494;
  --jaune: #ffd84a;
  --aurore: linear-gradient(90deg, var(--bleu), var(--cyan) 35%, var(--vert) 65%, var(--jaune));
  --aurore-texte: var(--aurore);

  /* Valeurs propres au thème (sombre par défaut) */
  --header-bg: rgba(6, 7, 11, .72);
  --sky-1: #1c47b8; --sky-2: #0d1d5c; --sky-3: rgba(69,208,207,.35);
  --logo-filter: drop-shadow(0 0 40px rgba(6,7,11,.6));
  --logo-ink: brightness(1);
  --mot-eteint: rgba(239, 237, 231, .3);
  --mot-front: var(--accent);
  --accent-texte: var(--accent);
  --voile: rgba(3, 4, 8, .7);
  --erreur: #ff8a7f;

  /* Couleur d'accent : change selon l'univers choisi */
  --accent: var(--cyan);

  --f: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --header-h: 72px;
  --gl: max(24px, env(safe-area-inset-left, 0px));
  --gr: max(24px, env(safe-area-inset-right, 0px));
  --max: 1320px;
  --espace-section: clamp(7rem, 14vw, 12rem);   /* même espace entre toutes les parties */
  --ease: cubic-bezier(.2, .7, .1, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--blanc);
  font-family: var(--f);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
main { position: relative; z-index: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, dl, dd { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--nuit); }

[hidden] { display: none !important; }
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 300; background: var(--blanc); color: var(--nuit); padding: .6rem 1rem; }
.skip:focus { top: 1rem; }

.label {
  font-family: var(--f-mono);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris);
  display: flex; align-items: center; gap: .6rem;
}
.label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
  transition: background .6s, box-shadow .6s;
}

.h2 {
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 400;
  max-width: 18ch;
  text-wrap: balance;
}

/* ---------- Progression + halo souris ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 150; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--aurore); transform-origin: left; transform: scaleX(0); }

.cursor-glow {
  /* au-dessus du contenu (sous la barre), en mode « éclaircir » : la lumière agit partout, sans bord */
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: 640px; height: 640px; margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 13%, transparent), transparent);
  mix-blend-mode: screen;
  transform: translate3d(var(--gx, -999px), var(--gy, -999px), 0);
  opacity: 0; transition: opacity .6s, background .6s;
}
.cursor-glow.is-on { opacity: 1; }

/* ---------- En-tête ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gr) 0 var(--gl);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.header.is-solid { background: var(--header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--trait); }
.header__logo { width: 44px; flex-shrink: 0; transition: transform .5s var(--ease); }
.header__logo:hover { transform: rotate(-12deg); }
.header__logo img, .sunset__logo { filter: var(--logo-ink); }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a { text-decoration: none; font-size: .92rem; color: var(--gris); padding-block: .7rem; transition: color .2s; }
.nav a:hover { color: var(--blanc); }
.nav .nav__cta {
  color: var(--nuit); background: var(--blanc);
  padding: .55rem 1.1rem; border-radius: 999px; font-weight: 500;
  transition: box-shadow .3s;
}
.nav .nav__cta:hover { color: var(--nuit); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
.burger { display: none; }
.header__cta { display: none; }

/* =========================================================
   1. ACCUEIL — le soleil se lève pendant le défilement
   --p va de 0 (nuit) à 1 (jour levé), piloté par script.js
   ========================================================= */
.hero { position: relative; height: 220vh; --p: 0; --px: 0; }
.hero__sticky {
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  overflow: hidden; isolation: isolate;
  background: var(--nuit);
}

/* Le ciel bleuit à mesure que le soleil monte */
.sky {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(90% 60% at 50% 100%, var(--sky-1) 0%, var(--sky-2) 35%, transparent 75%),
    radial-gradient(60% 40% at 50% 100%, var(--sky-3), transparent 70%);
  opacity: calc(.15 + var(--p) * .85);
}

/* Le soleil : un disque lumineux aux couleurs du logo */
.sun {
  position: absolute; left: 50%;
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle,
    #fffbe8 0%, var(--jaune) 16%, #d6ec7f 30%, var(--vert) 42%, var(--cyan) 58%, var(--bleu) 76%, rgba(42,94,224,0) 100%);
  pointer-events: none;
}
.sun::before { /* halo */
  content: ""; position: absolute; inset: -45%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,216,74,.28), rgba(69,208,207,.18) 45%, rgba(42,94,224,.1) 70%, transparent);
}
.sun--hero {
  z-index: -2;
  top: 60%;
  width: min(74vw, 780px);
  transform: translate(calc(-50% + var(--px) * 2.5vw), calc(30% - var(--p) * 74%)) scale(calc(.9 + var(--p) * .25));
  animation: sunrise 2.6s var(--ease) both .2s;
}
@keyframes sunrise { from { translate: 0 35vh; opacity: 0; } to { translate: 0 0; opacity: 1; } }

/* L'horizon : une planète sombre bordée de lumière */
.planet {
  position: absolute; left: 50%; top: 72%; z-index: -1;
  width: max(180vw, 1200px); height: 140vh;
  transform: translateX(-50%) translateY(calc(var(--p) * 4vh));
  border-radius: 50%;
  background: var(--aurore);
}
.planet::before { /* lueur du bord */
  content: ""; position: absolute; inset: -14% 5% auto; height: 46%; border-radius: 50%;
  background:
    radial-gradient(closest-side at 20% 50%, rgba(42,94,224,.55), transparent),
    radial-gradient(closest-side at 50% 50%, rgba(69,208,207,.5), transparent),
    radial-gradient(closest-side at 80% 50%, rgba(255,216,74,.45), transparent);
  z-index: -1;
  opacity: calc(.35 + var(--p) * .55);
  will-change: opacity;
}
.planet::after { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; background: var(--nuit); }

.hero__center {
  position: absolute; inset: 0 0 30% 0;
  display: grid; place-items: center;
  padding: var(--header-h) var(--gr) 0 var(--gl);
  opacity: var(--logo-op, 1);   /* le logo s'efface quand le bord du soleil le traverse (script.js) */
}
.hero__logo {
  width: min(56vw, 600px);
  transform: translateY(calc(var(--p) * -6vh)) scale(calc(1 - var(--p) * .06));
  animation: appear 1.2s var(--ease) both .3s;
  filter: var(--logo-ink) var(--logo-filter);
}
@keyframes appear { from { opacity: 0; translate: 0 18px; filter: blur(8px); } to { opacity: 1; translate: 0 0; } }

.hero__bottom {
  position: absolute; inset: auto 0 0 0;
  display: grid; justify-items: center;
  padding: 0 var(--gr) 2rem var(--gl);
  animation: appear 1.4s var(--ease) both 1.4s;
}
.hero__cue { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); display: flex; gap: .5rem; }
.hero__cue span { display: inline-block; font-size: 1.1rem; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

/* =========================================================
   2. MANIFESTE
   ========================================================= */
.manifesto {
  max-width: var(--max); margin-inline: auto;
  padding: var(--espace-section) var(--gr) 0 var(--gl);
  display: grid; gap: 2rem;
}
.manifesto__text { display: grid; gap: 1.6rem; }
.manifesto__lead {
  font-size: clamp(2.2rem, 5.4vw, 4.8rem);
  line-height: 1.04; letter-spacing: -.045em; font-weight: 350;
  max-width: 18ch; text-wrap: balance;
}
.manifesto__body {
  font-size: clamp(1.35rem, 2.5vw, 2.1rem);
  line-height: 1.25; letter-spacing: -.025em; font-weight: 350;
  max-width: 38ch; text-wrap: pretty;
}
@keyframes pulse { 50% { transform: scale(1.5); opacity: .6; } }
.manifesto__text .w { color: var(--mot-eteint); transition: color .5s; }
.manifesto__text .w.on { color: var(--blanc); }
.manifesto__text .w.front { color: var(--mot-front); }

/* =========================================================
   Sections communes
   ========================================================= */
.section { max-width: var(--max); margin-inline: auto; padding: var(--espace-section) var(--gr) 0 var(--gl); }
.section__intro { color: var(--gris); font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.45; max-width: 46ch; }
.section__head { display: grid; gap: 1.4rem; margin-bottom: clamp(3rem, 6vw, 5rem); }

/* Effet projecteur : une lumière suit la souris dans la carte */
.spot { position: relative; isolation: isolate; overflow: hidden; }
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.spot::after { /* bordure qui s'allume près de la souris */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--accent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s;
}
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* =========================================================
   3. LA PUISSANCE DU COLLECTIF
   ========================================================= */
.stats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); border-radius: 18px; overflow: hidden;
}
.stat {
  background: var(--nuit);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  display: grid; align-content: space-between; gap: 3rem;
  min-height: 15rem; min-width: 0;
}
.stat__value {
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 300; line-height: .9; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: .08em;
}
.stat__value span { background: var(--aurore-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__value small { font-size: .42em; color: var(--blanc); letter-spacing: -.02em; }
.stat::after { /* trait de lumière qui se remplit quand le chiffre apparaît */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--aurore); transform-origin: left; transform: scaleX(0);
  transition: transform 1.8s var(--ease) .2s;
}
.stat.is-visible::after { transform: scaleX(1); }
.stat__label { font-family: var(--f-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }

/* =========================================================
   4. NOS FORMATS
   ========================================================= */
.formats__intro {
  font-size: clamp(1.3rem, 2.3vw, 1.9rem); line-height: 1.3; letter-spacing: -.02em;
  color: var(--gris); max-width: 40ch; margin-top: 1.4rem;
}
.formats__intro strong { color: var(--blanc); font-weight: 400; }
.formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.format {
  border: 1px solid var(--trait); border-radius: 22px;
  background: var(--nuit-2);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  min-height: 30rem; min-width: 0;
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem;
}
.format__top { display: flex; justify-content: space-between; align-items: center; }
.format__num { font-family: var(--f-mono); font-size: .78rem; color: var(--gris); letter-spacing: .1em; }
.format__title {
  font-size: clamp(2.2rem, 3.6vw, 3.6rem); font-weight: 400; letter-spacing: -.05em; line-height: .95;
  text-transform: uppercase; align-self: end;
  transition: letter-spacing .6s var(--ease);
}
.format:hover .format__title { letter-spacing: -.03em; }
.format__lead { font-size: 1.2rem; line-height: 1.35; margin-top: .9rem; max-width: 26ch; }
.format__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.format__tags li {
  font-size: .88rem; padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid var(--trait); color: var(--gris);
  transition: border-color .3s, color .3s;
}
.format:hover .format__tags li { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--blanc); }

/* Pictogrammes lumineux : ondes (amplifier) et soleil qui tourne (imaginer) */
.glyph { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.glyph--waves i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--cyan);
  animation: wave 3s ease-out infinite;
}
.glyph--waves i:nth-child(2) { animation-delay: 1s; }
.glyph--waves i:nth-child(3) { animation-delay: 2s; }
.glyph--waves::after { content: ""; position: absolute; inset: 40%; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
@keyframes wave { from { transform: scale(.25); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.glyph--orbit { border-radius: 50%; border: 1px solid rgba(255, 216, 74, .35); }
.glyph--orbit::before { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: radial-gradient(circle, #fffbe8, var(--jaune) 45%, var(--vert)); box-shadow: 0 0 18px var(--jaune); animation: pulse 2.4s ease-in-out infinite; }
.glyph--orbit i { position: absolute; inset: -1px; border-radius: 50%; animation: spin 3.2s linear infinite; }
.glyph--orbit i::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
@keyframes spin { to { transform: rotate(360deg); } }

.live {
  margin-top: 1.2rem;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--trait); border-radius: 999px;
  width: fit-content; max-width: 100%;
}
.live__pulse { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #ff5a4f; flex-shrink: 0; }
.live__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff5a4f; animation: ping 1.6s ease-out infinite; }
@keyframes ping { to { transform: scale(3); opacity: 0; } }
.live__text { font-size: .98rem; color: var(--gris); }
.live__text strong { color: var(--blanc); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 1.15rem; padding-inline: .15em; }

/* =========================================================
   5. UNIVERS
   ========================================================= */
.universe { position: relative; }
@media (min-width: 1001px) {
  .universe { margin-top: var(--espace-section); }
  .universe__pin { display: grid; align-content: start; padding-top: calc(var(--header-h) + 1.5rem); }
  .universe .section__head { margin-bottom: 1.8rem; }
}
.universe__progress { max-width: 420px; height: 1px; background: var(--trait); }
.universe__progress span { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 10px var(--accent); transform-origin: left; transform: scaleX(var(--u, .25)); transition: transform .5s var(--ease), background .6s; }
.universe__wrap {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3rem;
  align-items: start;
}
.universe__wrap::before { /* halo de la couleur de l'univers */
  content: ""; position: absolute; z-index: -1; pointer-events: none; right: -10%; top: -20%;
  width: 60%; aspect-ratio: 1; max-width: 100%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  transition: background .8s;
}
.universe__tabs { display: grid; }
.utab {
  display: flex; align-items: center; gap: 1rem;
  background: none; border: 0; border-bottom: 1px solid var(--trait);
  padding: 1.1rem 0; text-align: left; cursor: pointer;
  font-size: clamp(2rem, 4.6vw, 4rem); letter-spacing: -.045em; line-height: 1; font-weight: 400;
  color: var(--gris-2);
  transition: color .4s, padding .5s var(--ease);
}
.utab:first-child { border-top: 1px solid var(--trait); }
.utab:hover { color: var(--gris); }
.utab[aria-current="true"] { color: var(--blanc); padding-left: .6rem; }
.utab__dot { width: .2em; height: .2em; border-radius: 50%; background: currentColor; flex-shrink: 0; transition: background .4s, box-shadow .4s; }
.utab[aria-current="true"] .utab__dot { background: var(--accent); box-shadow: 0 0 18px var(--accent); }

/* Les 4 univers se suivent ; celui en cours de lecture s'allume (voir plus bas) */
.universe__panels { min-width: 0; padding-top: .5rem; display: grid; }
.upanel__lead { font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.3; letter-spacing: -.02em; max-width: 30ch; margin-bottom: 2.5rem; }
.upanel__grid { display: grid; gap: 0; }
.upanel__grid > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--trait); }
.upanel__grid dt { font-family: var(--f-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-texte); padding-top: .25rem; transition: color .6s; }
.upanel__grid dd { color: var(--gris); }

/* Grand écran : les lignes de droite (description, expertise, public, formats)
   ont la même hauteur que les 4 univers de gauche, pour que les traits soient alignés */
@media (min-width: 1001px) {
  .universe__wrap { --uni-row: clamp(5.8rem, min(7.4vw, 11vh), 6.8rem);   /* s'adapte à la hauteur de l'écran */ }
  .utab { height: var(--uni-row); padding-top: 0; padding-bottom: 0; }
  .utab:first-child { border-top: 0; }
  .universe__panels { padding-top: 0; }
  .upanel { display: grid; grid-template-rows: repeat(4, var(--uni-row)); }
  .upanel__lead { margin: 0; display: flex; align-items: center; border-bottom: 1px solid var(--trait);
    font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1.3; max-width: none; }
  .upanel__grid { display: contents; }
  .upanel__grid > div { border-top: 0; border-bottom: 1px solid var(--trait); padding: 0; align-items: center; }
  .upanel__grid dt { padding-top: 0; }
}

/* Écrans d'ordinateur peu hauts : lignes un peu plus serrées */
@media (min-width: 1001px) and (max-height: 820px) {
  .universe__wrap { --uni-row: 5.8rem; }
}

/* =========================================================
   6. RIGUEUR — frise compacte : un trait de lumière relie les 5 étapes
   ========================================================= */
.rigor { max-width: var(--max); margin-inline: auto; padding: var(--espace-section) var(--gr) 0 var(--gl); }
.rigor__head { display: grid; gap: 1.4rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.rigor__line { position: relative; --beam: 0; }
/* Le petit soleil qui parcourt la frise */
.rigor__sun {
  position: absolute; top: 5.5px; left: calc(var(--beam) * 100%); z-index: 1;
  width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fffbe8 0%, var(--jaune) 35%, var(--vert) 65%, var(--cyan) 100%);
  box-shadow: 0 0 18px 4px rgba(255, 216, 74, .45), 0 0 40px 10px rgba(69, 208, 207, .25);
  opacity: min(1, calc(var(--beam) * 20));
  pointer-events: none;
}
.rigor__sun::after { /* halo qui respire */
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(255, 216, 74, .5);
  animation: breathe 2.2s ease-out infinite;
}
@keyframes breathe { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.rigor__beam { position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--trait); }
.rigor__beam span {
  display: block; height: 100%; background: var(--aurore);
  transform-origin: left; transform: scaleX(var(--beam));
  box-shadow: 0 0 12px var(--cyan);
}
.rigor__track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; }
.step { display: grid; align-content: start; gap: .9rem; min-width: 0; }
/* seul le texte bouge : le point reste toujours posé sur le trait */
.step > * { opacity: .4; transform: translateY(8px); transition: opacity .6s, transform .8s var(--ease); }
.step.is-lit > * { opacity: 1; transform: none; }
.step:not(.is-lit)::before { opacity: .6; }
.step::before { /* point sur le trait */
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--nuit); border: 1px solid var(--gris-2);
  transition: background .5s, border-color .5s, box-shadow .5s;
}
.step.is-lit::before { animation: flash .9s var(--ease); }
@keyframes flash { 0% { transform: scale(1); } 40% { transform: scale(1.9); } 100% { transform: scale(1); } }
.step.is-lit::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px var(--accent); }
.step h3 { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.15; margin-bottom: .45rem; }
.step p { color: var(--gris); font-size: .95rem; line-height: 1.5; }

/* =========================================================
   8. BANDEAU « Rejoignez Lumen »
   ========================================================= */
.join {
  display: block; overflow: hidden; text-decoration: none;
  width: min(var(--max) - 48px, calc(100% - 40px));
  margin: var(--espace-section) auto 0;
  border: 1px solid var(--trait); border-radius: 999px;
  padding-block: .85rem;
  /* fondu sur les bords */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  transition: border-color .3s;
}
.join:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.join__track { display: flex; align-items: center; gap: 1.6rem; width: max-content; animation: slide 45s linear infinite; }
.join__track span { font-family: var(--f-mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; color: var(--gris); transition: color .4s; }
.join__track i { width: 6px; height: 6px; border-radius: 50%; background: var(--aurore); flex-shrink: 0; box-shadow: 0 0 10px var(--cyan); }
.join:hover .join__track { animation-play-state: paused; }
.join:hover .join__track span { color: var(--blanc); }
@keyframes slide { to { transform: translateX(-50%); } }

/* Rassembler : des points de lumière qui convergent vers le centre */
.glyph--rays::after { content: ""; position: absolute; inset: 40%; border-radius: 50%; background: var(--vert); box-shadow: 0 0 16px var(--vert); }
.glyph--rays i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--jaune); left: 50%; top: 50%; animation: gather 2.4s var(--ease) infinite; }
.glyph--rays i:nth-child(1) { --dx: -26px; --dy: -26px; }
.glyph--rays i:nth-child(2) { --dx: 26px; --dy: -26px; animation-delay: .3s; }
.glyph--rays i:nth-child(3) { --dx: 26px; --dy: 26px; animation-delay: .6s; }
.glyph--rays i:nth-child(4) { --dx: -26px; --dy: 26px; animation-delay: .9s; }
@keyframes gather { from { transform: translate(var(--dx), var(--dy)); opacity: 0; } 30% { opacity: 1; } to { transform: translate(0, 0); opacity: 0; } }

/* KPI garantis */
.kpi {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem 3rem; align-items: center;
  margin-top: 14px; padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--trait); border-radius: 22px;
}
.kpi__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.035em; line-height: 1.05; margin-bottom: .7rem; }
.kpi__text p { color: var(--gris); max-width: 42ch; }
.kpi__list { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.kpi__list li {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--trait); font-size: .95rem;
}
.kpi__list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 10px var(--vert); }

/* =========================================================
   5. MEDIAKIT
   ========================================================= */
.mediakit {
  position: relative; isolation: isolate;
  padding: var(--espace-section) var(--gr) 3rem var(--gl);   /* peu d'espace avant le coucher de soleil */
}
.mediakit__inner { max-width: 60rem; margin-inline: auto; display: grid; justify-items: center; gap: 1.6rem; text-align: center; }
.mediakit__inner .label { justify-content: center; }
.mediakit__title { font-size: clamp(2.8rem, 7.6vw, 6.4rem); letter-spacing: -.055em; line-height: .98; font-weight: 400; text-wrap: balance; }
.mediakit__title em { font-style: normal; background: var(--aurore-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mediakit__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .6rem; }
.btn.btn--ghost { background: transparent; color: var(--blanc); border-color: var(--trait); }
.btn.btn--ghost:hover { border-color: var(--blanc); box-shadow: none; }
.mediakit__text { color: var(--gris); font-size: 1.15rem; max-width: 38ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 56px; padding: 0 1.9rem; border-radius: 999px;
  background: var(--blanc); color: var(--nuit);
  font: 500 1rem var(--f); text-decoration: none; cursor: pointer;
  border: 1px solid var(--blanc);
  transition: box-shadow .3s, transform .3s var(--ease);
}
.btn span { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent), 0 14px 50px -10px var(--accent); }
.btn--block { width: 100%; }

/* Fenêtre du formulaire */
.modal {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 1px solid var(--trait); border-radius: 22px;
  background: var(--nuit-2); color: var(--blanc);
  overflow: auto;
}
.modal::backdrop { background: var(--voile); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal[open] { animation: modalIn .5s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__glow { height: 3px; background: var(--aurore); }
.modal__body { padding: clamp(1.5rem, 4vw, 2.4rem); display: grid; gap: 1.4rem; }
.modal__head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.modal__title { font-size: 1.7rem; letter-spacing: -.035em; line-height: 1.1; }
.modal__sub { color: var(--gris); font-size: .98rem; margin-top: .4rem; }
.modal__close {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--trait); background: none; cursor: pointer; font-size: 1.2rem; line-height: 1;
}
.modal__close:hover { border-color: var(--blanc); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: .45rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--f-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.field input, .field select {
  width: 100%; min-height: 50px; padding: 0 1rem;
  border-radius: 12px; border: 1px solid var(--trait);
  background: var(--nuit); color: var(--blanc); font: 400 1rem var(--f);
  transition: border-color .2s, box-shadow .2s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.field input[aria-invalid="true"] { border-color: var(--erreur); }
.field__error { font-size: .85rem; color: var(--erreur); min-height: 0; }
.form__legal { grid-column: 1 / -1; font-size: .8rem; color: var(--gris-2); line-height: 1.45; }
.form__legal a { color: var(--gris); text-underline-offset: 3px; }
.form__status { grid-column: 1 / -1; font-size: .92rem; color: var(--erreur); }
.form__status a { color: var(--blanc); text-underline-offset: 3px; }
.form .btn { grid-column: 1 / -1; margin-top: .4rem; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.hp { position: absolute; left: -9999px; }

.success { display: grid; justify-items: center; gap: 1rem; text-align: center; padding: 1rem 0 .5rem; }
.success__sun { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle, #fffbe8, var(--jaune) 30%, var(--vert) 55%, var(--cyan) 75%, transparent 100%); box-shadow: 0 0 40px rgba(255,216,74,.4); }
.success h3 { font-size: 1.6rem; letter-spacing: -.03em; }
.success p { color: var(--gris); max-width: 32ch; }

/* =========================================================
   Fin de page — coucher de soleil
   --q va de 0 (soleil levé) à 1 (soleil couché), piloté par script.js
   ========================================================= */
.sunset { position: relative; z-index: 1; height: 115vh; --q: 0; --p: var(--q); --px: 0; }
.sunset__sticky {
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  overflow: hidden; isolation: isolate;
  background: var(--nuit);
}
/* Même scène que l'accueil, retournée de haut en bas */
.sunset__scene { position: absolute; inset: 0; z-index: -1; isolation: isolate; transform: scaleY(-1); }
.sunset__scene .sun--hero {
  animation: none; top: 52%;
}
.sunset__scene .planet { top: 62%; width: max(260vw, 1700px); }
.sunset__center {
  position: absolute; inset: 38% 0 12% 0;
  display: grid; place-items: center;
  padding: 0 var(--gr) 0 var(--gl);
  opacity: var(--logo-op, 1);   /* s'efface quand le bord du soleil le traverse (script.js) */
}
.sunset__logo { width: min(56vw, 600px); }
.sunset__bottom {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 2rem;
  padding: 0 var(--gr) 1.4rem var(--gl);
  font-size: .9rem; color: var(--gris);
}
.footer__links { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; }
.footer__links a { text-decoration: none; display: inline-block; padding-block: .6rem; }
.footer__links a:hover { color: var(--blanc); }
.footer__copy { font-size: .85rem; color: var(--gris-2); }

/* Apparition douce (le contenu reste lisible sans JavaScript) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   Tablette
   ========================================================= */
@media (max-width: 1000px) {
  .kpi { grid-template-columns: 1fr; }
  .kpi__list { justify-content: flex-start; }
  .rigor__track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.4rem; }
  .rigor__beam, .rigor__sun { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:last-child { grid-column: 1 / -1; }
  .formats { grid-template-columns: 1fr; }
  .format { min-height: 22rem; }
  .universe__wrap { grid-template-columns: 1fr; gap: 2rem; }
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 720px) {
  :root { --header-h: 64px; --gl: max(20px, env(safe-area-inset-left, 0px)); --gr: max(20px, env(safe-area-inset-right, 0px)); }
  .header__cta {
    display: inline-flex; align-items: center; min-height: 40px; margin-left: auto; margin-right: .4rem;
    padding: 0 1rem; border-radius: 999px; background: var(--blanc); color: var(--nuit);
    font-size: .88rem; font-weight: 500; text-decoration: none;
  }
  .burger { display: grid; place-content: center; gap: 7px; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
  .burger span { width: 22px; height: 1.5px; background: var(--blanc); transition: transform .25s; }
  .burger[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child  { transform: translateY(-4.25px) rotate(-45deg); }
  .nav {
    position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 auto 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--gr) 1.5rem var(--gl);
    background: var(--nuit); border-bottom: 1px solid var(--trait);
  }
  .nav.is-open { display: flex; }
  .nav a { font-size: 1.5rem; color: var(--blanc); padding-block: .9rem; border-bottom: 1px solid var(--trait); }
  .nav .nav__cta { margin-top: 1rem; text-align: center; border: 0; }

  .hero__center { inset: 0 0 34% 0; }
  .hero__logo { width: 74vw; }
  .sun--hero { width: 115vw; top: 58%; }
  .header.is-solid { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .planet { top: 70%; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:last-child { grid-column: 1 / -1; }
  .live { border-radius: 16px; align-items: flex-start; }
  .live__pulse { margin-top: .45rem; }
  .stat { min-height: 0; gap: 1.6rem; padding: 1.3rem; }
  .format { min-height: 0; }
  .form { grid-template-columns: 1fr; }
  .upanel__grid > div { grid-template-columns: 1fr; gap: .3rem; }

  /* La frise devient verticale */
  .rigor__beam { display: block; top: 0; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
  .rigor__beam span { width: 100%; height: 100%; transform-origin: top; transform: scaleY(var(--beam)); }
  .rigor__sun { display: block; top: calc(var(--beam) * 100%); left: 5.5px; }
  .rigor__track { grid-template-columns: 1fr; gap: 1.8rem; }
  .step { grid-template-columns: 11px minmax(0, 1fr); column-gap: 1.2rem; row-gap: .3rem; }
  .step::before { grid-row: 1 / span 2; margin-top: .45rem; }
    .sunset__center { inset: 40% 0 18% 0; }
  .sunset__logo { width: 74vw; }
  .sunset__bottom { flex-direction: column; text-align: center; }
  .footer__links { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero { height: auto; --p: .6; }
  .sunset { height: auto; --q: .6; }
  .step > * { opacity: 1; transform: none; }
  .manifesto__text .w { color: var(--blanc); }
}

/* =========================================================
   Pages annexes (mentions légales, confidentialité, 404)
   ========================================================= */
.page { max-width: 46rem; margin-inline: auto; display: grid; gap: 1.2rem; padding: calc(var(--header-h) + 5rem) var(--gr) 6rem var(--gl); }
.page h1 { font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -.045em; line-height: 1; margin-bottom: 1rem; }
.page h2 { margin-top: 1.5rem; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--cyan); }
.page p, .page li { color: var(--gris); }
.page ul { list-style: disc; padding-left: 1.2rem; display: grid; gap: .4rem; }
.page a { color: var(--blanc); text-underline-offset: 3px; }
.page .btn { color: var(--nuit); margin-top: 1rem; width: fit-content; }
.page-back { margin-left: auto; color: var(--gris); text-decoration: none; padding-block: .7rem; }
.page-back:hover { color: var(--blanc); }

/* Mobile : finitions issues de la revue mobile */
@media (max-width: 720px) {
  .header { gap: .5rem; }
  .header__cta { min-height: 44px; }
  .nav { bottom: 0; overflow-y: auto; }
  .nav .nav__cta { display: none; }            /* déjà présent dans la barre */
  body:has(.nav.is-open) { overflow: hidden; }  /* la page ne défile plus derrière le menu */
  .modal { width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  .label, .stat__label, .format__num, .upanel__grid dt { font-size: .82rem; }
  .form__legal { font-size: .86rem; }
  .footer__links a { padding-block: .7rem; }
}


/* =========================================================
   UNIVERS — les 4 univers se suivent au défilement.
   La liste reste accrochée (à gauche sur ordinateur, en barre en haut sur mobile)
   et l'univers en cours de lecture s'allume. Rien n'est jamais coupé, quelle que soit la taille de l'écran.
   ========================================================= */
.universe__tabs { position: sticky; top: calc(var(--header-h) + 1.5rem); z-index: 5; align-self: start; }
.universe__panels { display: grid; align-content: start; }
.upanel { opacity: .28; transition: opacity .6s var(--ease); padding-bottom: 3rem; }
.upanel.is-active { opacity: 1; }
.upanel:last-of-type { padding-bottom: 0; }
@media (min-width: 1001px) {
  .universe { padding-top: calc(var(--header-h) + 1.5rem); }
}
@media (max-width: 1000px) {
  .universe__tabs {
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding: .6rem var(--gr) .6rem var(--gl);
    background: var(--header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--trait);
  }
  .universe__tabs::-webkit-scrollbar { display: none; }
  .universe__tabs .universe__progress { display: none; }
  .utab, .utab:first-child, .utab[aria-current="true"] {
    flex: 0 0 auto; height: auto; min-height: 44px; padding: 0 1rem; gap: .5rem;
    font-size: 1rem; letter-spacing: -.01em; border: 1px solid var(--trait); border-radius: 999px;
  }
  .utab[aria-current="true"] { border-color: var(--accent); }
  .utab__dot { width: .4em; height: .4em; }
  .upanel { padding-bottom: 2.5rem; }
}

/* =========================================================
   Corrections du contrôle qualité (accessibilité, iPhone)
   ========================================================= */
/* l'en-tête fixe ne cache jamais l'élément atteint au clavier ou par un lien */
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
/* bandeau « Rejoignez LUMEN » : focus visible et défilement en pause au clavier */
.join:focus-visible { outline-offset: -4px; border-color: var(--accent); }
.join:focus-visible .join__track { animation-play-state: paused; }
/* liens du pied de page : 44 px minimum au doigt */
.footer__links a { padding-block: .7rem; }
/* iPhone : rien sous l'encoche ni sous la barre d'accueil */
.sunset__bottom { padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 720px) {
  .modal__body {
    padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .nav { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Univers : le bouton « best cases » reste visible sous la liste accrochée */
@media (min-width: 1001px) {
  .universe__side { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; z-index: 5; }
  .universe__side .universe__tabs { position: static; }
  .universe__side .universe__progress { margin-top: 1.4rem; }
  .universe__side .universe__cta { margin-top: 1.4rem; justify-self: start; }
}
@media (max-width: 1000px) {
  .universe__side { display: contents; }
  .universe__panels { order: 1; }
  /* mobile : le bouton flotte en bas de l'écran pendant toute la lecture des univers */
  .universe__side .universe__cta {
    order: 2; justify-self: center; margin-top: 0; z-index: 6;
    position: sticky; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--blanc); color: var(--nuit); border-color: var(--blanc);
    white-space: nowrap; font-size: .9rem; padding-inline: 1.2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
  }
  .universe__side .universe__progress { display: none; }
}
/* Tablette étroite : la barre du haut tient sur une ligne */
@media (min-width: 721px) and (max-width: 900px) {
  .nav { gap: 1.1rem; font-size: .9rem; }
  .nav__cta { white-space: nowrap; padding-inline: 1rem; }
}
/* Sans JavaScript, le compteur en direct n'a pas de sens : il est masqué */
html:not(.has-js) .live { display: none; }
/* Formulaire : mention des champs obligatoires */
.form__required { grid-column: 1 / -1; margin: 0; font-size: .86rem; color: var(--gris); }
/* Très petits écrans : le bouton « best cases » flottant passe sur deux lignes plutôt que de déborder */
@media (max-width: 380px) {
  .universe__side .universe__cta { white-space: normal; text-align: center; max-width: 100%; }
}

/* Formulaire : message (contact, candidature) */
.field textarea {
  width: 100%; min-height: 8rem; padding: .8rem 1rem; resize: vertical;
  border-radius: 12px; border: 1px solid var(--trait);
  background: var(--nuit); color: var(--blanc); font: 400 1rem/1.5 var(--f);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.field textarea[aria-invalid="true"] { border-color: var(--erreur); }