/* =========================================================
   clemzy.fr · Feuille de style principale
   Univers « Cosmos sombre »
   ========================================================= */

/* ---------- 1. Variables ---------- */
:root {
  /* Couleurs de fond */
  --bg-deep:      #05060f;
  --bg:           #080b1a;
  --bg-elevated:  #0e1226;
  --bg-card:      rgba(255, 255, 255, 0.035);
  --bg-card-hov:  rgba(255, 255, 255, 0.06);

  /* Texte */
  --text:         #e8ecff;
  --text-soft:    #a8b0d0;
  /* --text-dim sert aux petites mentions (0,8 rem). L'ancienne valeur #6d76a0 tombait
     a 4,57:1 sur le fond nu, et sous le seuil AA de 4,5:1 par-dessus une .card
     (dont le fond translucide eclaircit legerement le noir). #7d86b0 donne 5,7:1. */
  --text-dim:     #7d86b0;

  /* Accents */
  --cyan:         #38e1ff;
  --violet:       #a878ff;
  --magenta:      #ff6ec7;
  --amber:        #ffc861;

  /* Dérivés */
  --border:       rgba(255, 255, 255, 0.09);
  --border-strong:rgba(255, 255, 255, 0.18);
  --glow-cyan:    rgba(56, 225, 255, 0.35);
  --glow-violet:  rgba(168, 120, 255, 0.35);

  --gradient:     linear-gradient(120deg, var(--cyan) 0%, var(--violet) 55%, var(--magenta) 100%);
  --gradient-soft:linear-gradient(120deg, rgba(56,225,255,.14), rgba(168,120,255,.14));

  /* Typo */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Rythme */
  --radius:       18px;
  --radius-sm:    12px;
  --radius-lg:    28px;
  --maxw:         1180px;
  --nav-h:        72px;

  --shadow:       0 24px 60px -20px rgba(0, 0, 0, 0.75);
  --ease:         cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* L'attribut hidden doit TOUJOURS gagner.
   Le navigateur applique « [hidden] { display: none } », mais avec une priorité
   si faible que n'importe quelle regle de cette feuille la bat : .hero__stats
   est en display:flex, l'element serait donc reste visible malgre son hidden.
   C'est le genre de piege qui fait publier des chiffres d'exemple. */
[hidden] { display: none !important; }

img, svg, video { max-width: 100%; display: block; }
/* Les attributs width/height des <img> servent a reserver la place et a eviter
   le saut de mise en page au chargement. Sans « height: auto », l'attribut
   height agit comme une hauteur imposee : des qu'une regle CSS reduit la
   largeur, l'image est ecrasee. Les regles plus specifiques
   (.post-card__cover img, .orbit__core img) gardent la main. */
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
/* Le site est sombre de bout en bout. Sans cette déclaration, le navigateur
   dessine ses contrôles natifs en clair : listes déroulantes sur fond blanc
   et champs non stylés à fond blanc, avec le texte clair hérité ci-dessus.
   Résultat, blanc sur blanc, lisible seulement au survol. */
:root { color-scheme: dark; }
select option { background: #101324; color: #e8ecff; }
/* Le remplissage automatique du navigateur impose son propre fond clair. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #e8ecff;
  -webkit-box-shadow: 0 0 0 1000px #101324 inset;
  caret-color: #e8ecff;
  transition: background-color 9999s ease-out 0s;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.5rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1.1em; color: var(--text-soft); }

::selection { background: var(--violet); color: #fff; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 3. Fond étoilé ---------- */
#starfield {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.aurora {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  filter: blur(90px);
  opacity: .5;
  border-radius: 50%;
}
.aurora--1 {
  width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
  top: -14vw; left: -10vw;
  background: radial-gradient(circle, rgba(56,225,255,.42), transparent 68%);
}
.aurora--2 {
  width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
  top: 32vh; right: -14vw;
  background: radial-gradient(circle, rgba(168,120,255,.42), transparent 68%);
}

/* ---------- 4. Utilitaires ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: clamp(72px, 11vw, 130px) 0; position: relative; }
.section--tight { padding-block: clamp(56px, 8vw, 90px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--glow-cyan);
}

.grad-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--text-soft); max-width: 62ch; }
.center { text-align: center; }
.center .eyebrow::before { display: none; }
.center .lead { margin-inline: auto; }

.section-head { max-width: 720px; margin-bottom: 54px; }
.section-head.center { margin-inline: auto; }
.videos-head { position: relative; z-index: 0; }
.videos-head__mascot {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: calc(100% + 8px);
  width: clamp(123px, 16vw, 176px);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.24));
}
.videos-head > :not(.videos-head__mascot) { position: relative; z-index: 1; }

/* ---------- 5. Boutons ---------- */
.btn {
  --btn-bg: var(--gradient);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .96rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  background: var(--btn-bg);
  color: #05060f;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .3s;
  box-shadow: 0 10px 34px -12px var(--glow-violet);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 20px 42px -14px var(--glow-violet); filter: brightness(1.08); }
.btn:active { transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: var(--bg-card-hov);
  border-color: var(--cyan);
  box-shadow: 0 0 26px -6px var(--glow-cyan);
}

.btn--sm { padding: 10px 20px; font-size: .87rem; }

/* Retour en haut : l'anneau conique indique la progression dans la page. */
.back-to-top {
  --scroll-progress: 0deg;
  position: fixed;
  z-index: 90;
  right: clamp(16px, 2.4vw, 32px);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--cyan) 0deg,
    var(--violet) var(--scroll-progress),
    rgba(125, 134, 176, .2) var(--scroll-progress),
    rgba(125, 134, 176, .2) 360deg
  );
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .34), 0 0 22px rgba(168, 120, 255, .13);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.9);
  transition: opacity .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.back-to-top::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: rgba(8, 10, 24, .96);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.back-to-top svg {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.back-to-top:hover {
  box-shadow: 0 12px 34px rgba(0, 0, 0, .38), 0 0 28px rgba(56, 225, 255, .24);
  transform: translateY(-3px);
}
.back-to-top:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .93rem;
  color: var(--cyan);
}
.link-arrow svg { transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- 6. Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(8, 11, 26, 0.78);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--border);
}
.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.03em;
}
.logo__mark {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gradient);
  position: relative;
  box-shadow: 0 0 20px -3px var(--glow-cyan);
}
.logo__mark::after {
  content: "";
  position: absolute;
  inset: -6px -11px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  transform: rotate(-22deg);
}
.logo__image {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 20px -3px var(--glow-cyan);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  display: block;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 500;
  color: var(--text-soft);
  /* Sans ceci, « À propos » et « Interventions » se coupent en deux lignes des
     que la place manque, et toute la barre grandit. */
  white-space: nowrap;
  transition: color .25s, background .25s;
}
.nav__links a:hover { color: var(--text); background: var(--bg-card); }
.nav__links a.is-active { color: var(--text); background: var(--gradient-soft); }

.nav__cta { margin-left: 8px; }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.nav__burger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 1.8px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s;
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 21px; }
.nav__burger span:nth-child(3) { top: 26px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  position: relative;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  width: 100%;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  font-size: .84rem;
  color: var(--text-soft);
  margin-bottom: 26px;
}
.badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 var(--glow-cyan);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--glow-cyan); }
  70%  { box-shadow: 0 0 0 9px rgba(56,225,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,225,255,0); }
}

.hero h1 { margin-bottom: .35em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 38px;
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

/* Indicateur de défilement inspiré du Domaine du Bigourdan, adapté aux
   couleurs de Clemzy. Le lien reste utilisable au clavier. */
.hero-scroll {
  position: absolute;
  z-index: 3;
  bottom: 65px;
  left: 50%;
  width: 28px;
  height: 44px;
  border: 1px solid rgba(56, 225, 255, .72);
  border-radius: 20px;
  box-shadow: 0 0 22px rgba(56, 225, 255, .16);
  transform: translateX(-50%);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.hero-scroll span {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  animation: heroScrollCue 1.8s infinite;
}
.hero-scroll:hover {
  border-color: var(--violet);
  box-shadow: 0 0 28px rgba(168, 120, 255, .28);
}
.hero-scroll:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }

@keyframes heroScrollCue {
  0% { opacity: 0; transform: translateY(0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px); }
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label {
  font-size: .8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 8px;
}

/* Visuel orbital : nuages de probabilite, configuration du carbone 1s2 2s2 2p2. */
.orbit {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.orbit::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 10%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0 2%, rgba(56,225,255,.06) 18%, transparent 66%);
  filter: blur(18px);
  z-index: -1;
}
.orbit__cloud,
.orbit__orbital {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.orbit__cloud--1s {
  inset: 32%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226,251,255,.86) 0 3%, rgba(56,225,255,.34) 18%, rgba(56,225,255,.08) 52%, transparent 72%);
  filter: blur(3px);
}
.orbit__cloud--2s {
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 25%, rgba(168,120,255,.09) 35%, rgba(168,120,255,.32) 50%, rgba(168,120,255,.08) 69%, transparent 78%);
  filter: blur(4px);
}
.orbit__orbital {
  inset: 12%;
  background:
    radial-gradient(ellipse 28% 21% at 21% 50%, rgba(255,110,199,.68), rgba(255,110,199,.18) 47%, transparent 76%),
    radial-gradient(ellipse 28% 21% at 79% 50%, rgba(255,110,199,.68), rgba(255,110,199,.18) 47%, transparent 76%);
  filter: blur(2px);
  opacity: .78;
}
.orbit__orbital--py { transform: rotate(90deg); opacity: .62; }
.orbit.is-visible .orbit__cloud--1s { animation: carbon-breathe 5.6s ease-in-out infinite; }
.orbit.is-visible .orbit__cloud--2s { animation: carbon-breathe 6.8s .7s ease-in-out infinite reverse; }
.orbit.is-visible .orbit__orbital--px { animation: carbon-drift 16s ease-in-out infinite; }
.orbit.is-visible .orbit__orbital--py { animation: carbon-drift-y 19s ease-in-out infinite reverse; }
@keyframes carbon-breathe { 0%, 100% { transform: scale(.96); opacity: .68; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes carbon-drift { 0%, 100% { transform: rotate(0deg) scale(.96); } 50% { transform: rotate(12deg) scale(1.05); } }
@keyframes carbon-drift-y { 0%, 100% { transform: rotate(90deg) scale(.96); } 50% { transform: rotate(102deg) scale(1.05); } }
.orbit__core {
  position: relative;
  z-index: 2;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), transparent 42%),
    var(--gradient);
  box-shadow: 0 0 90px -14px var(--glow-violet), inset 0 0 60px rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 2rem);
  color: #05060f;
  overflow: hidden;
}
.orbit__core img { width: 100%; height: 100%; object-fit: cover; }
.orbit__configuration {
  position: absolute;
  bottom: 6%;
  z-index: 3;
  padding: 5px 9px;
  border: 1px solid rgba(56,225,255,.22);
  border-radius: 99px;
  background: rgba(5,6,15,.55);
  color: rgba(231,242,255,.72);
  font-family: var(--font-head);
  font-size: clamp(.62rem, 1.25vw, .78rem);
  letter-spacing: .06em;
  backdrop-filter: blur(6px);
}

/* ---------- 8. Cartes ---------- */
.card {
  position: relative;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  transition: transform .45s var(--ease), border-color .35s, background .35s, box-shadow .45s var(--ease);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-soft);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  background: var(--bg-card-hov);
  box-shadow: var(--shadow);
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; }

.card__icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--gradient-soft);
  border: 1px solid var(--border);
  margin-bottom: 20px;
  font-size: 1.35rem;
}
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }

/* Cartes d'orientation de l'accueil : le mouvement révèle où mène le clic. */
.discovery-card { display: block; cursor: pointer; }
.discovery-card .card__icon { transition: opacity .18s, transform .2s; }
.discovery-card__flash { position: absolute !important; z-index: 2; inset: 18px auto auto 18px; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, rgba(105, 229, 255, .9) 22%, transparent 70%); opacity: 0; pointer-events: none; }
.discovery-card__platforms,
.discovery-card__previews { position: absolute !important; z-index: 3; top: 24px; right: 24px; display: flex; align-items: center; gap: 9px; opacity: 0; pointer-events: none; transform: translateY(12px) scale(.75); }
.discovery-card__platform { width: 45px; height: 45px; filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .34)); }
.discovery-card__platform--tiktok { padding: 4px; border-radius: 12px; background: #090b18; }
.discovery-card__previews { gap: 7px; }
.discovery-card__previews img { width: 68px; height: 43px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 7px; box-shadow: 0 8px 16px rgba(0, 0, 0, .3); object-fit: cover; }
.discovery-card:is(:hover, :focus-visible) .discovery-card__flash { animation: discovery-flash .55s var(--ease) both; }
.discovery-card--videos:is(:hover, :focus-visible) .card__icon { animation: discovery-clap .52s var(--ease) both; }
.discovery-card--articles:is(:hover, :focus-visible) .card__icon { animation: discovery-writing .55s var(--ease) both; }
.discovery-card:is(:hover, :focus-visible) .discovery-card__platforms,
.discovery-card:is(:hover, :focus-visible) .discovery-card__previews { animation: discovery-reveal .5s .16s var(--ease) both; }
@keyframes discovery-clap { 0% { transform: rotate(0); } 25% { transform: rotate(-13deg) translateY(-2px); } 52% { transform: rotate(9deg) scale(1.08); } 100% { transform: rotate(0); } }
@keyframes discovery-writing { 0%, 35% { transform: translateX(0) rotate(0); opacity: 1; } 12%, 28% { transform: translateX(-3px) rotate(-8deg); } 20% { transform: translateX(3px) rotate(8deg); } 62%, 100% { transform: scale(.25); opacity: 0; } }
@keyframes discovery-flash { 0%, 18% { opacity: 0; transform: scale(.25); } 42% { opacity: .95; transform: scale(2.6); } 100% { opacity: 0; transform: scale(4.6); } }
@keyframes discovery-reveal { from { opacity: 0; transform: translateY(12px) scale(.75); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .discovery-card:is(:hover, :focus-visible) .discovery-card__platforms,
  .discovery-card:is(:hover, :focus-visible) .discovery-card__previews { opacity: 1; transform: none; animation: none; }
  .discovery-card:is(:hover, :focus-visible) .card__icon { opacity: 0; animation: none; }
}

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 9. À propos ---------- */
.about__grid {
  --reading-mascot-gap: clamp(22px, 2vw, 34px);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  column-gap: var(--reading-mascot-gap);
  row-gap: clamp(38px, 6vw, 76px);
  align-items: start;
}
.portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-deep));
  display: grid;
  place-items: center;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Variante « blason ». Un logo n'est pas un portrait : le cadre devient carré,
   l'image est posée entière au lieu d'être rognée, et le dégradé sombre du bas
   disparaît : il mangeait la devise inscrite sur le blason.
   Le sélecteur double .portrait.portrait--logo est volontaire : .portrait::after
   est déclaré plus bas dans ce fichier, et à spécificité égale il l'emporterait. */
.portrait--logo { aspect-ratio: 1; }
.portrait--logo img { object-fit: contain; }
.portrait.portrait--logo::after { content: none; }
.portrait--book {
  width: min(100%, 340px);
  justify-self: center;
  aspect-ratio: 2 / 3;
  box-shadow: 0 24px 42px rgba(0, 0, 0, .38);
}
.portrait--book img { object-fit: contain; }
.portrait.portrait--book::after { content: none; }
.reading-shelf { --shelf-book-height: 240px; --shelf-book-width: 160px; display: grid; grid-template-columns: var(--shelf-book-width) clamp(116px, 12vw, 166px); grid-auto-rows: var(--shelf-book-height); column-gap: var(--reading-mascot-gap); row-gap: 20px; justify-self: end; align-self: start; }
.reading-shelf__book { grid-column: 1; display: block; width: var(--shelf-book-width); height: var(--shelf-book-height); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 18px 32px rgba(0, 0, 0, .34); transition: transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease); }
.reading-shelf__book:hover { border-color: var(--cyan); box-shadow: 0 22px 38px rgba(0, 0, 0, .48), 0 0 22px rgba(56, 225, 255, .13); transform: translateY(-4px); }
.reading-shelf__book:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.reading-shelf__book img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reading-shelf__mascot { grid-column: 2; grid-row: 1; z-index: 2; align-self: center; justify-self: center; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 12px 16px rgba(0,0,0,.26)); }
.reading-shelf__mascot--werber { grid-row: 2; }
.reading-shelf__mascot--trinh-xuan-thuan { grid-row: 3; }
.reading-shelf__mascot--kip-thorne { grid-row: 4; }
.reading-shelf__mascot--hubert-reeves { grid-row: 5; }
.portrait__placeholder {
  text-align: center;
  color: var(--text-dim);
  font-size: .85rem;
  padding: 24px;
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,6,15,.72), transparent 52%);
  pointer-events: none;
}

.facts { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.facts li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--text-soft);
}
.facts li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 12px var(--glow-cyan);
}

.science-squad-link { display: inline-flex; align-items: center; gap: 7px; color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(56, 225, 255, .42); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.science-squad-link:hover { color: var(--text); text-decoration-color: currentColor; }
.science-squad-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.science-squad-link img { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(56, 225, 255, .48); object-fit: cover; vertical-align: middle; }

.reading-list { margin-top: 34px; }
.reading-list h3 { margin: 0; color: var(--text); font-family: var(--font-display); font-size: 1.15rem; }
.reading-path { position: relative; display: grid; gap: 0; list-style: none; margin: 20px 0 0; padding: 0; }
.reading-path::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 5px; width: 1px; background: linear-gradient(var(--cyan), rgba(157, 125, 255, .25)); }
.reading-path li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 13px; align-items: start; min-height: 50px; padding-bottom: 11px; }
.reading-path li:last-child { min-height: 0; padding-bottom: 0; }
.reading-path__mark { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 7px; border: 2px solid var(--violet); border-radius: 50%; background: var(--bg-deep); box-shadow: 0 0 0 4px var(--bg-deep); }
.reading-path cite { display: block; color: var(--text); font-family: var(--font-display); font-size: .96rem; font-style: normal; font-weight: 700; line-height: 1.35; }
.reading-path small { display: block; margin-top: 2px; color: var(--text-dim); font-size: .8rem; }
.reading-path small a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(105, 229, 255, .4); text-underline-offset: 3px; }

/* ---------- 10. Vidéos ---------- */
.video-card {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: transform .45s var(--ease), border-color .35s, box-shadow .45s var(--ease);
}
.video-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow); }

.video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, #12183a, #0a0d20);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video-card--vertical .video-card__thumb { aspect-ratio: 9 / 16; }
/* Aperçu carré : plus compact que le 9/16, utile quand on n'a que deux ou
   trois vidéos à montrer et qu'une colonne de grands rectangles verticaux
   déséquilibrerait la page. */
.video-card--carre .video-card__thumb { aspect-ratio: 1; }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.video-card:hover .video-card__thumb img { transform: scale(1.05); }

/* Façades TikTok locales : le lecteur vertical officiel n'est chargé qu'au
   clic, afin de ne transmettre aucune donnée à TikTok au chargement. */
/* Les deux cartes doivent faire exactement la même taille, quel que soit le
   nombre de lignes de leur titre. « align-self: start » les laissait à leur
   hauteur de contenu : 363 px pour l'une, 404 px pour l'autre. En les étirant
   et en laissant le corps occuper le reste, elles s'alignent sur la plus haute. */
.tiktok-player { align-self: stretch; display: flex; flex-direction: column; }
.tiktok-player .video-card__body { flex: 1; }
/* Rangées de hauteur égale. « align-self: stretch » n'égalise que les cartes
   d'une MÊME rangée : empilées en une colonne sur mobile, chacune occupe sa
   propre rangée et l'écart revenait dès qu'un titre passait à trois lignes. */
.tiktok-duo { grid-auto-rows: 1fr; }
.tiktok-player__facade {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.tiktok-player__facade .video-card__thumb { display: grid; width: 100%; }
.tiktok-player__facade:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.tiktok-player__label {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(5, 6, 15, .82);
  color: var(--text);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.tiktok-player__iframe {
  display: block;
  width: 100%;
  /* 9/16, EXACTEMENT le format de la vignette qu'il remplace : la carte ne
     change pas de taille au clic, la page ne saute pas sous le doigt et les
     deux cartes restent alignées. C'est le format qui prend le plus de place,
     donc celui qui laisse la vidéo verticale s'afficher en entier. */
  aspect-ratio: 9 / 16;
  border: 0;
  background: #05060f;
}
.tiktok-player__external {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 10px;
  color: var(--cyan);
  font-size: .78rem;
  font-weight: 600;
}
.tiktok-player__external:hover { color: var(--violet); }
.tiktok-player--active:hover { transform: none; }

.play {
  position: absolute;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(5,6,15,.55);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  transition: transform .35s var(--ease), background .3s;
}
.video-card:hover .play { transform: scale(1.12); background: rgba(5,6,15,.75); }
.play::after {
  content: "";
  border-left: 15px solid var(--text);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}

.video-card__body { padding: 20px 22px 24px; }
.video-card__body h3 { font-size: 1.05rem; margin-bottom: .35em; }
.video-card__meta { font-size: .82rem; color: var(--text-dim); }

/* Lecteur YouTube chargé uniquement après une action explicite. La vignette
   reste locale afin qu'aucune requête ne parte vers YouTube avant le clic. */
.youtube-player {
  width: min(760px, 100%);
  margin: 2.4em auto 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .22);
}
.youtube-player__facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #080a16;
  color: var(--text);
  cursor: pointer;
}
.youtube-player__facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease), filter .4s;
}
.youtube-player__facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(5, 6, 15, .88));
}
.youtube-player__facade:hover img { transform: scale(1.025); filter: brightness(.82); }
.youtube-player__facade:hover .play { transform: translate(-50%, -50%) scale(1.1); }
.youtube-player__facade .play {
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(5, 6, 15, .76);
}
.youtube-player__facade:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.youtube-player__label {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 16px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(5, 6, 15, .8);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
}
.youtube-player__iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.youtube-player__body { padding: 18px 22px 21px; }
.youtube-player__body h3 { margin: 0 0 5px; font-size: 1.05rem; }
.youtube-player__body p { margin: 0; color: var(--text-dim); font-size: .84rem; }
.youtube-player__body small { display: block; margin-top: 10px; color: var(--text-dim); }
.youtube-player__body a { display: inline-block; margin-top: 9px; }

.platform-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  margin-bottom: 40px;
}
.platform-tabs button {
  padding: 9px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.platform-tabs button[aria-selected="true"] {
  background: var(--gradient);
  color: #05060f;
}

/* ---------- 11. Articles ---------- */
.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  transition: transform .45s var(--ease), border-color .35s, box-shadow .45s var(--ease);
}
.post-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.post-card--soon { cursor: default; }
.post-card--soon:hover { transform: none; border-color: var(--border); box-shadow: none; }
.post-card__cover {
  aspect-ratio: 16 / 10;
  background: linear-gradient(140deg, #141a3e, #090c1e);
  position: relative;
  overflow: hidden;
}
.post-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-card__body h3 { font-size: 1.12rem; }
.post-card__body p { font-size: .95rem; flex: 1; }

/* Mise en scène des articles récents : les deux sujets d'astrophysique
   encadrent Clemzy, tandis que l'expérience de Young complète la composition. */
.articles-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "light mascot false"
    ". young .";
  gap: 22px;
  align-items: start;
}
.articles-feature-grid__card--light { grid-area: light; }
.articles-feature-grid__card--false-vide { grid-area: false; }
.articles-feature-grid__card--young {
  grid-area: young;
  transform: translateY(-100px);
}
.articles-feature-grid__card--young:hover { transform: translateY(-106px); }
.articles-feature-grid__card--young.post-card--soon:hover { transform: translateY(-100px); }
.articles-feature-grid__mascot {
  grid-area: mascot;
  align-self: center;
  justify-self: center;
  width: min(100%, 360px);
  margin-top: 6px;
  pointer-events: none;
}
.articles-feature-grid__mascot img { display: block; width: 100%; height: auto; }

.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--font-display);
  border: 1px solid var(--border);
  color: var(--cyan);
  background: rgba(56,225,255,.07);
  margin-bottom: 14px;
}
.tag--violet { color: var(--violet); background: rgba(168,120,255,.08); }
.tag--amber  { color: var(--amber);  background: rgba(255,200,97,.08); }

.meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .8rem;
  color: var(--text-dim);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Filtres */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 42px; }
.filters button {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-soft);
  font-size: .88rem;
  cursor: pointer;
  transition: all .3s var(--ease);
}
.filters button:hover { border-color: var(--border-strong); color: var(--text); }
.filters button[aria-pressed="true"] {
  background: var(--gradient);
  color: #05060f;
  border-color: transparent;
  font-weight: 600;
}

/* Corps d'article */
.article { max-width: 760px; margin-inline: auto; }
.article h2 { margin-top: 2em; }
.article h3 { margin-top: 1.6em; }
.article p, .article li { font-size: 1.06rem; color: var(--text-soft); }
.article ul, .article ol { padding-left: 1.3em; margin-bottom: 1.4em; }
.article li { margin-bottom: .5em; }
.article blockquote {
  margin: 2em 0;
  padding: 22px 28px;
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--gradient-soft);
  font-size: 1.1rem;
  color: var(--text);
}
.article blockquote p:last-child { margin-bottom: 0; }
.article figure { margin: 2.4em 0; }
.article figure img { border-radius: var(--radius); border: 1px solid var(--border); width: 100%; }
.article figcaption { margin-top: 12px; font-size: .86rem; color: var(--text-dim); text-align: center; }
.article a:not(.btn) { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* Univers observable : Einstein dirige le regard vers l'illustration, dont la
   version WebP complète reste ouvrable pour lire les annotations en détail. */
.article-observable {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  width: min(100%, 680px);
  margin: 2.6em auto 2.2em;
}
.article-observable__observer {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: end;
  width: min(100%, 360px);
  pointer-events: none;
}
.article-observable__observer img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .32));
}
.article .article-observable__figure {
  width: clamp(118px, 30vw, 230px);
  margin: 0;
  min-width: 0;
  transform: translateY(-36px);
}
.article-observable__zoom {
  position: relative;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .32));
}
.article .article-observable__zoom img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  transition: transform .35s ease, filter .35s ease;
}
.article-observable__zoom span {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(5, 6, 15, .78);
  color: #fff;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  backdrop-filter: blur(8px);
}
.article-observable__zoom:hover img { transform: scale(1.025); filter: brightness(1.08); }
.article-observable__zoom:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.article .article-observable__figure figcaption { margin-inline: -8px; }

@media (max-width: 620px) {
  .article-observable {
    gap: 14px;
    margin-top: 2.2em;
  }
  .article-observable__observer { align-self: start; margin-top: 22px; }
  .article .article-observable__figure { transform: translateY(-18px); }
  .article-observable__zoom span { bottom: 6px; padding: 5px 8px; font-size: .66rem; }
  .article .article-observable__figure figcaption { margin-inline: -18px 0; font-size: .74rem; }
}

/* ---------- 11 bis. Pages d'article (préfixe « am- ») ------------------
   Les règles communes restent ici pour conserver une mise en page cohérente
   et faire profiter tous les articles d'une même correction. */
.am-head { padding-top: calc(var(--nav-h) + 70px); }
.am-head__inner { max-width: 760px; margin-inline: auto; }
.am-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); margin-bottom: .5em; }
.am-head .meta-row { max-width: 760px; flex-wrap: wrap; }
.am-back { margin-bottom: 24px; }
.am-kicker { margin: 0; }
.am-head__lab-cta { margin: 30px 0 0; }
.btn--lab {
  width: 100%;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  font-size: clamp(.94rem, 2vw, 1.05rem);
  line-height: 1.35;
  text-align: left;
}
.btn--lab span { flex: 0 0 auto; font-size: 1.35em; }

.am-cover { max-width: 980px; margin: 46px auto 0; }
.am-cover img {
  width: 100%;
  /* 16/10 : le format des illustrations de assets/img/articles/. Un schéma ne
     doit pas être rogné, contrairement à une photo. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(140deg, #141a3e, #090c1e);
}
.am-cover figcaption {
  margin-top: 14px;
  font-size: .86rem;
  color: var(--text-dim);
  text-align: center;
}

/* ---------- 11 ter. Page de la conférence AFIS ---------- */
.conf-page { min-height: 100vh; }
.conf-head { padding-bottom: clamp(54px, 7vw, 84px); }
.conf-head .lead { margin-bottom: 24px; }
.conf-visual {
  max-width: 1080px;
  margin: 46px auto 0;
}
.conf-visual img {
  width: 100%;
}
/* Le sommaire des trois parties. Sans regle, les trois liens se suivaient en
   une seule ligne de texte courant : on lisait une phrase, pas un menu. */
.conf-parties {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
}
.conf-parties a {
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .18s, color .18s, background .18s;
}
.conf-parties a:hover,
.conf-parties a:focus-visible {
  border-color: rgba(56, 225, 255, .55);
  background: rgba(56, 225, 255, .08);
  color: var(--text);
}
/* L'en-tete du site est fixe : sans cette marge, le titre vise atterrit dessous. */
#conf-mesure-title,
#conf-intro-title { scroll-margin-top: 90px; }
@media (max-width: 560px) {
  .conf-parties { gap: 8px; margin-bottom: 22px; }
  .conf-parties a { padding: 8px 13px; font-size: .8rem; }
}

.conf-intro { padding-top: 0; }
.conf-article { max-width: 820px; }
.conf-article > h2:first-of-type { margin-top: 1.2em; }
.conf-definition { margin: 2.4em 0 3em; padding: 24px 28px; border: 1px solid rgba(168,120,255,.35); border-radius: var(--radius); background: linear-gradient(130deg, rgba(168,120,255,.11), rgba(56,225,255,.05)); }
.conf-definition__term { margin: 0 0 10px; color: var(--text); font-family: var(--font-display); font-size: 1.2rem !important; font-weight: 700; }
.conf-definition__term span:first-child { color: var(--cyan); }
.conf-definition__term span:last-child { color: var(--violet); }
.conf-definition p:not(.conf-definition__term) { margin-bottom: 12px; }
.conf-definition a { font-size: .84rem; }
.conf-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 2em 0 2.4em; }
.conf-model-card { padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(14,18,38,.58); }
.conf-model-card__index { color: var(--cyan); font: 700 .72rem var(--font-display); letter-spacing: .12em; }
.conf-model-card h3 { margin: 8px 0 7px; font-size: 1.15rem; }
.conf-model-card p { margin: 0; font-size: .94rem !important; }
.conf-variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 1.8em 0 2.4em; }
.conf-variants > div { display: grid; gap: 5px; padding: 15px 17px; border-left: 2px solid var(--violet); background: rgba(168,120,255,.055); }
.conf-variants strong { font-family: var(--font-display); font-size: .94rem; }
.conf-variants span { color: var(--text-dim); font-size: .86rem; line-height: 1.5; }
.conf-sources { display: grid; gap: 14px; padding-left: 1.35em; }
.conf-sources li { padding-left: 4px; }
.conf-sources a { display: inline-block; font-family: var(--font-display); font-weight: 600; }
.conf-sources span { display: block; margin-top: 3px; color: var(--text-dim); font-size: .88rem; line-height: 1.5; }
.conf-lab { padding-top: 20px; }
.conf-lab__header { max-width: 760px; margin: 0 auto 34px; }
.conf-lab__header h2 { margin-bottom: .35em; }
.conf-lab__layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: clamp(22px,4vw,52px); align-items: center; }
.conf-lab__stage { position: sticky; top: calc(var(--nav-h) + 18px); align-self: start; min-width: 0; overflow: hidden; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: radial-gradient(circle at 50% 40%, rgba(56,225,255,.1), transparent 54%), rgba(5,6,15,.72); box-shadow: inset 0 0 80px rgba(0,0,0,.3); }
/* « pan-y » et non « none » : le doigt qui glisse verticalement fait defiler
   la page, le glissement horizontal fait tourner la scene. Avec « none », le
   canevas pleine largeur bloquait le defilement sur telephone et le lecteur
   ne pouvait plus depasser cette section. */
.flat-model { display: block; width: 100%; height: auto; aspect-ratio: 18 / 13; border-radius: calc(var(--radius) - 8px); cursor: grab; touch-action: pan-y; }
.flat-model:active { cursor: grabbing; }
.conf-lab__legend { position: absolute; top: 22px; left: 22px; display: flex; flex-wrap: wrap; gap: 8px 14px; max-width: calc(100% - 44px); padding: 8px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(5,6,15,.72); color: var(--text-soft); font-size: .72rem; backdrop-filter: blur(8px); pointer-events: none; }
.conf-lab__legend span { display: inline-flex; align-items: center; gap: 6px; }
.conf-lab__swatch { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.conf-lab__swatch--sun { color: #ffd36b; background: currentColor; }
.conf-lab__swatch--moon { color: #b9d5ff; background: currentColor; }
.conf-lab__swatch--ice { color: #91ecff; background: currentColor; }
.conf-lab__gesture { margin: 0 0 2px; padding: 0 2px; color: var(--text-dim); font-size: .7rem; text-align: center; pointer-events: none; }
.conf-lab__controls { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.conf-range-label { display: flex; justify-content: space-between; gap: 15px; color: var(--text-soft); font-family: var(--font-display); font-size: .9rem; }
.conf-range-label strong { color: var(--cyan); }
.conf-lab__controls input[type="range"] { width: 100%; margin: 14px 0 18px; accent-color: var(--cyan); }
/* Au bord du canevas, pas en bas de la colonne des reglages : sur telephone
   la colonne passe sous la scene, et on lancait l'animation sans la voir. */
.conf-lab__play { width: 100%; margin: 10px 0 6px; }
.conf-lab__speed-label { margin: 10px 0 6px; color: var(--text-dim); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.conf-lab__speed { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-bottom: 10px; }
.conf-lab__speed button { padding: 7px 4px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.03); color: var(--text-soft); font: inherit; font-size: .76rem; cursor: pointer; }
.conf-lab__speed button.is-active { border-color: rgba(56,225,255,.6); background: rgba(56,225,255,.12); color: var(--text); }
/* Le recit : c'est lui qui rend l'animation comprehensible. Il doit rester
   lisible et ne pas sauter de hauteur a chaque phrase, sinon la page bouge
   sous les yeux du lecteur pendant la lecture. */
.conf-lab__story { min-height: 4.2em; margin: 0 0 12px; padding: 11px 13px; border: 1px solid var(--border); border-left: 3px solid rgba(56,225,255,.75); border-radius: 10px; background: rgba(5,6,15,.6); color: var(--text-soft); font-size: .82rem; line-height: 1.5; }
.conf-lab__story b { color: var(--text); }
.conf-lab__story .is-event { color: #ffd36b; }
.conf-lab__why { margin: 0 0 12px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.02); }
.conf-lab__why summary { cursor: pointer; color: var(--text); font-size: .84rem; font-weight: 600; }
.conf-lab__why p { margin: 10px 0 0; color: var(--text-soft); font-size: .8rem; line-height: 1.55; }
/* Le catalogue des reparations ad hoc : une entree par ingredient imaginaire,
   avec son prix. Il prend toute la largeur du bloc d'explications. */
.gravity-note .conf-lab__why--adhoc { grid-column: 1 / -1; }
ol.adhoc { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: adhoc; display: grid; gap: 10px; }
ol.adhoc li {
  position: relative;
  counter-increment: adhoc;
  padding: 11px 13px 12px 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.022);
}
ol.adhoc li::before {
  content: counter(adhoc);
  position: absolute;
  top: 12px;
  left: 13px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(168,120,255,.16);
  color: #d8c4ff;
  font-family: var(--font-display);
  font-size: .7rem;
  line-height: 19px;
  text-align: center;
}
ol.adhoc strong { display: block; color: var(--text); font-family: var(--font-display); font-size: .84rem; }
ol.adhoc p { margin: 6px 0 0; }
ol.adhoc em { color: var(--text); font-style: normal; font-weight: 600; }
.conf-lab__play[aria-pressed="true"] { background: linear-gradient(135deg, rgba(255,77,141,.95), rgba(168,120,255,.95)); color: #fff; }
.conf-lab__observer-choice { display: grid; gap: 8px; margin: 16px 0 4px; padding: 15px; border: 1px solid rgba(56,225,255,.2); border-radius: 12px; background: rgba(56,225,255,.045); }
.conf-lab__observer-choice label { color: var(--text) !important; font: 600 .82rem var(--font-display); }
.conf-lab__observer-choice select { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 9px; background: #0d1125; color: var(--text); font: 600 .82rem var(--font-display); cursor: pointer; }
.conf-lab__observer-choice button { min-height: 40px; padding: 8px 12px; border: 1px solid rgba(255,148,186,.42); border-radius: 9px; background: rgba(255,77,141,.08); color: #ffc0d5; font: 600 .78rem var(--font-display); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.conf-lab__observer-choice button:hover { border-color: rgba(255,148,186,.75); background: rgba(255,77,141,.14); }
.conf-lab__observer-choice button[aria-pressed="true"] { border-color: rgba(255,148,186,.82); background: rgba(255,77,141,.18); color: #fff; }
.conf-lab__observer-choice p { margin: 0; color: var(--text-dim); font-size: .7rem; line-height: 1.45; }
.conf-lab__observer-status { padding: 8px 10px; border-left: 2px solid var(--cyan); background: rgba(56,225,255,.055); color: var(--text-soft) !important; }
.conf-lab__controls fieldset { display: grid; gap: 12px; margin: 24px 0 18px; padding: 0; border: 0; }
.conf-lab__controls legend { margin-bottom: 12px; color: var(--text); font: 600 .9rem var(--font-display); }
.conf-lab__controls label { display: flex; align-items: flex-start; gap: 9px; color: var(--text-soft); font-size: .9rem; line-height: 1.35; cursor: pointer; }
.conf-lab__controls input[type="checkbox"] { flex: 0 0 auto; margin-top: 2px; accent-color: var(--violet); }
.conf-lab__tests { padding-top: 20px !important; border-top: 1px solid var(--border) !important; }
.conf-lab__tests legend { color: var(--pink) !important; }
.conf-lab__tests input[type="checkbox"] { accent-color: var(--pink); }
.conf-lab__tests-note { margin: -4px 0 3px; color: var(--text-dim); font-size: .76rem; line-height: 1.45; }
.conf-lab__report { display: grid; gap: 10px; margin: 4px 0 18px; }
.conf-lab__report[hidden] { display: none; }
.conf-lab__report p { margin: 0; padding: 11px 13px; border-left: 2px solid var(--pink); background: rgba(255,77,141,.065); color: var(--text-dim); font-size: .78rem; line-height: 1.5; }
.conf-lab__report strong { display: block; margin-bottom: 3px; color: #ffc0d5; font-family: var(--font-display); font-size: .78rem; }
.conf-lab__note { margin: 0; padding-top: 16px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: .84rem; line-height: 1.55; }
.conf-lab__source { margin: 10px 0 0; color: var(--text-dim); font-size: .72rem; line-height: 1.45; }
.conf-lab__source a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(56,225,255,.35); text-underline-offset: 3px; }
.conf-lab__source a:hover { text-decoration-color: currentColor; }
.conf-lab__evidence { max-width: 880px; margin: 44px auto 0; padding: clamp(20px,4vw,30px); border: 1px solid var(--border); border-radius: var(--radius); background: rgba(14,18,38,.62); }
/* Les sources sont repliees : on veut pouvoir les ouvrir, pas les subir. */
.conf-lab__evidence summary {
  margin: 0;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}
.conf-lab__evidence summary:hover { color: var(--cyan); }
.conf-lab__evidence[open] summary { margin-bottom: 14px; }
.conf-lab__evidence > p { margin: 0 0 18px; font-size: .9rem; }
.conf-lab__evidence ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 22px; margin: 0; padding: 0; list-style: none; }
.conf-lab__evidence li { min-width: 0; }
.conf-lab__evidence a { font-family: var(--font-display); font-size: .86rem; font-weight: 600; }
.conf-lab__evidence span { display: block; margin-top: 3px; color: var(--text-dim); font-size: .76rem; line-height: 1.45; }
.conf-gravity { padding-top: 42px; }
.conf-gravity__header { max-width: 830px; margin: 0 auto 34px; }
.conf-gravity__header h2 { margin-bottom: .35em; }
/* --- le globe qui se deroule en disque ------------------------------------ */
.conf-distances__header { max-width: 760px; margin: 0 auto 1.6em; text-align: center; }
.conf-distances__header h2 { margin: 8px 0 10px; }
.conf-distances__header .lead { margin: 0; }
.conf-distances__extrait { max-width: 860px; margin-inline: auto; }
.distance-app {
  max-width: 1120px;
  margin: 2em auto 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: rgba(8,11,26,.9);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.distance-app__stage { padding: 16px clamp(14px,2.4vw,22px) 0; }
#distance-globe {
  display: block;
  width: 100%;
  height: clamp(320px,48vw,560px);
  border-radius: var(--radius-sm);
  background: radial-gradient(circle at 50% 42%, rgba(56,225,255,.06), transparent 62%), #04060f;
  /* Comme les autres modeles : le doigt fait tourner a l'horizontale, et le
     defilement vertical reste a la page. Avec none, on ne pouvait plus quitter
     le globe sur un telephone. */
  touch-action: pan-y;
  cursor: grab;
}
#distance-globe:active { cursor: grabbing; }
.distance-actions { display: grid; gap: 10px; margin: 14px 0 0; }
.distance-actions .btn { justify-self: start; }
/* Les deux commandes de lancement cote a cote : on deroule, puis on revele. */
.distance-lancement { display: flex; flex-wrap: wrap; gap: 10px; }
.distance-lancement .btn { justify-self: start; }
.distance-actions .gravity-stage-speed { justify-self: start; }
.distance-hint { margin: 0; color: var(--text-dim); font-size: .74rem; line-height: 1.5; }
.distance-app__panel { padding: 16px clamp(20px,3vw,30px) clamp(20px,3vw,26px); }
.distance-readout { grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); }
/* En projection, le globe et les chiffres doivent se voir ensemble : empiles,
   le Mach et le verdict tombaient sous le bord de l'ecran, en 720 comme en
   1080. Cote a cote, le globe garde exactement sa taille, que sa hauteur
   limite, et les chiffres montent a sa hauteur. */
@media (min-width: 1180px) {
  .distance-app {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    align-items: start;
  }
  .distance-app__stage { padding-bottom: 20px; }
  .distance-app__panel { border-left: 1px solid var(--border); }
  /* Le bloc porte aussi .meridien-readout, dont la regle arrive plus bas dans
     la feuille : sans ce selecteur plus precis, elle l'emportait. */
  .distance-app .distance-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- cinq batons sur un meridien ------------------------------------------ */
.meridien-app {
  max-width: 1040px;
  margin: 2.6em auto 3em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: rgba(8,11,26,.9);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.meridien-app__head { padding: clamp(20px,3vw,30px) clamp(20px,3vw,30px) 0; }
.meridien-app__head h3 { margin: 6px 0 8px; font-size: clamp(1.25rem,2.2vw,1.6rem); }
.meridien-app__head p { margin: 0; color: var(--text-dim); font-size: .86rem; line-height: 1.55; }
.meridien-app__stage { position: relative; padding: 14px clamp(14px,2.4vw,22px) 0; }
#meridien-plot {
  display: block;
  width: 100%;
  height: clamp(280px,42vw,420px);
  border-radius: var(--radius-sm);
  background: radial-gradient(circle at 50% 40%, rgba(56,225,255,.07), transparent 60%), #050711;
}
.meridien-actions { display: grid; gap: 10px; margin: 14px 0 0; }
.meridien-actions .gravity-stage-speed { justify-self: start; }
/* La citation et la scene filmee cote a cote. Le bloc deborde un peu de la
   colonne de texte, sinon les deux colonnes seraient trop etroites. */
.conf-citation-filmee {
  display: grid;
  gap: 20px;
  align-items: start;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  width: min(100%, 1000px);
  margin-inline: calc((100% - min(100%, 1000px)) / 2);
  margin-block: 2em;
}
.conf-citation-filmee blockquote { margin: 0; }
.conf-citation-filmee__video { display: grid; gap: 10px; }
.conf-citation-filmee__video .video-launch { margin: 0; }
@media (max-width: 880px) {
  .conf-citation-filmee { grid-template-columns: 1fr; width: 100%; margin-inline: 0; }
}

.conf-citation-source {
  margin: 10px 0 0 !important;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  color: var(--text-dim) !important;
  font-size: .78rem !important;
  line-height: 1.5 !important;
}

.conf-video-inline {
  display: grid;
  gap: 12px;
  align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  margin: 1.8em 0;
}
.conf-video-inline .video-launch { margin: 0; }
.conf-video-inline__legende { margin: 0 !important; color: var(--text-dim) !important; font-size: .82rem !important; line-height: 1.55 !important; }
.conf-video-inline__legende strong { color: var(--text); }
/* Dans un protocole, la liste a deja son retrait : on resserre l ecart. */
.conf-video-inline--protocole { margin: 1.1em 0 .2em; }
@media (max-width: 620px) {
  .conf-video-inline { grid-template-columns: 1fr; }
}
.meridien-note { margin: 2px 0 0; color: var(--text-dim); font-size: .74rem; line-height: 1.5; }
.meridien-app__panel { padding: 16px clamp(20px,3vw,30px) clamp(20px,3vw,26px); }
.meridien-readout { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); margin-bottom: 14px; }
.meridien-readout span {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.022);
  color: var(--text-dim);
  font-size: .72rem;
}
.meridien-readout strong { color: var(--text); font-family: var(--font-display); font-size: 1rem; }
.meridien-verdict {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--amber, #ffa046);
  background: rgba(255,160,70,.07);
  color: var(--text-dim);
  font-size: .82rem;
  line-height: 1.55;
}
.meridien-verdict b { color: #ffd0a0; }
.meridien-table-wrap { overflow-x: auto; margin-bottom: 14px; }
.meridien-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.meridien-table caption { margin-bottom: 7px; color: var(--text-dim); font-size: .72rem; text-align: left; }
.meridien-table th, .meridien-table td { padding: 7px 9px; border-bottom: 1px solid var(--border); text-align: right; }
.meridien-table thead th { color: var(--text-dim); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.meridien-table tbody th { color: var(--text); text-align: left; font-weight: 600; }
.meridien-table td { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.meridien-table td.is-loin { color: #ffb27a; font-weight: 600; }

.gravity-app { overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: rgba(8,11,26,.9); box-shadow: var(--shadow); }
.gravity-app__tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid var(--border); background: rgba(255,255,255,.025); }
.gravity-app__tab { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; padding: 13px 16px; border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--text-dim); font: 600 .88rem var(--font-display); cursor: pointer; transition: color .2s ease, background .2s ease; }
.gravity-app__tab:last-child { border-right: 0; }
.gravity-app__tab span { color: var(--violet); font-size: .68rem; letter-spacing: .12em; }
.gravity-app__tab:hover { color: var(--text); background: rgba(255,255,255,.035); }
.gravity-app__tab.is-active { color: #fff; background: linear-gradient(135deg, rgba(56,225,255,.105), rgba(168,120,255,.12)); box-shadow: inset 0 -2px 0 var(--cyan); }
.gravity-app__layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); min-height: 610px; }
.gravity-app__stage { position: relative; display: grid; place-items: center; align-content: start; min-width: 0; padding: 18px 18px 74px; border-right: 1px solid var(--border); background: radial-gradient(circle at 50% 46%, rgba(56,225,255,.09), transparent 56%), #050711; }
#gravity-model { display: block; width: 100%; height: auto; aspect-ratio: 45 / 26; }
/* Meme format que le canevas de la chute : changer d'onglet ne fait pas
   sauter la page. Le glissement horizontal tourne la scene, le vertical
   fait defiler. */
.dislocation-model { display: block; width: 100%; height: auto; aspect-ratio: 45 / 26; border-radius: 12px; cursor: grab; touch-action: pan-y; }
.dislocation-model:active { cursor: grabbing; }
.gravity-stage-speed.dislocation-speed { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 8px; }
.dislocation-readout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.gravity-stage-speed.dislocation-view { grid-template-columns: .6fr .6fr 1.4fr 1.4fr; margin-bottom: 8px; }
.dislocation-view button { font-size: .78rem; }
.dislocation-options { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 2px 0 8px; color: var(--text-soft); font-size: .8rem; }
.dislocation-options label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.dislocation-sources { flex-basis: 100%; }
.dislocation-sources select { margin-left: 6px; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 8px; background: #101324; color: var(--text); font: inherit; font-size: .8rem; max-width: 100%; }
.dislocation-sources select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(56,225,255,.14); }
.dislocation-hint { margin: 0 0 8px; color: var(--text-dim); font-size: .7rem; text-align: center; }
/* Au bord du canevas : les boutons ouvraient la colonne des reglages, qui
   passe sous la scene des que l'ecran se retrecit. Sur telephone, il y avait
   637 px entre le bas de l'animation et le bouton qui la lance. */
.gravity-stage-actions { width: min(100%, 460px); margin-top: 10px; }
.gravity-stage-actions .gravity-action { width: 100%; margin: 0 0 8px; }
/* Bouton de projection. Discret sur la page, il n'a d'interet que le jour
   de la conference, mais ce jour-la il compte. */
/* Cartes illustrees du modele platiste. L'image sert a la projection, le
   resume reste dans la page pour qui relit ou suit a distance. */
.conf-model-card__visual { display: block; width: 100%; margin: 12px 0 10px; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: #05060f; overflow: hidden; cursor: zoom-in; position: relative; }
.conf-model-card__visual img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; transition: transform .35s ease; }
.conf-model-card__visual:hover img, .conf-model-card__visual:focus-visible img { transform: scale(1.04); }
.conf-model-card__visual:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.conf-model-card__zoom { position: absolute; right: 8px; bottom: 8px; padding: 4px 9px; border-radius: 999px; background: rgba(5,6,15,.82); color: var(--text-soft); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.conf-model-card__more { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.conf-model-card__more summary { color: var(--text-dim); font-size: .8rem; font-weight: 600; cursor: pointer; list-style: none; }
.conf-model-card__more summary::-webkit-details-marker { display: none; }
.conf-model-card__more summary::after { content: " +"; color: var(--accent); }
.conf-model-card__more[open] summary::after { content: " \2212"; }
.conf-model-card__more summary:hover { color: var(--text); }
.conf-model-card__more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.conf-model-card__resume { margin-top: 10px; color: var(--text-soft); font-size: .84rem; line-height: 1.6; }
.conf-model-card__resume p { margin: 0 0 8px; }
.conf-model-card__credit { color: var(--text-dim); font-size: .74rem; }
.conf-model-grid__hint { margin: 14px 0 0; color: var(--text-dim); font-size: .8rem; }

/* La fiche agrandie. Format pense pour un videoprojecteur : image large,
   texte lisible de loin, fond opaque pour ne pas laisser passer la page. */
.fiche { width: min(1000px, 94vw); max-height: 92vh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text); overflow: auto; }
.fiche::backdrop { background: rgba(3,4,12,.86); backdrop-filter: blur(4px); }
.fiche__inner { position: relative; padding: 26px clamp(18px,3vw,34px) 30px; }
.fiche__inner h3 { margin: 0 44px 16px 0; font-size: clamp(1.15rem,2.4vw,1.6rem); }
.fiche__image { display: block; width: 100%; height: auto; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 12px; background: #05060f; }
.fiche__texte { color: var(--text-soft); font-size: clamp(.92rem,1.5vw,1.05rem); line-height: 1.7; }
.fiche__texte p { margin: 0 0 10px; }
.fiche__close { position: absolute; top: 18px; right: clamp(18px,3vw,34px); padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--text-soft); font: inherit; font-size: .78rem; cursor: pointer; }
.fiche__close:hover { border-color: rgba(56,225,255,.55); color: var(--text); }

.conf-lab__fullscreen { display: block; width: 100%; margin: 0 0 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.03); color: var(--text-dim); font: inherit; font-size: .74rem; cursor: pointer; }
.conf-lab__fullscreen:hover { border-color: rgba(56,225,255,.5); color: var(--text); }

/* En plein ecran, la scene quitte sa colonne : plus de position collante, et
   le canevas se dimensionne sur la HAUTEUR disponible, sans quoi il resterait
   large et plat au milieu d'un ecran vide. */
.conf-lab__stage:fullscreen,
.gravity-app__stage:fullscreen {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 18px;
  border: 0;
  background: #05060f;
  overflow: auto;
}
.conf-lab__stage:fullscreen .flat-model,
.gravity-app__stage:fullscreen #gravity-model {
  width: auto;
  max-width: 100%;
  height: min(100%, calc(100vh - 140px));
}
.conf-lab__stage:fullscreen .conf-lab__legend { position: static; max-width: none; }
.gravity-app__stage:fullscreen .gravity-app__caption { position: static; right: auto; bottom: auto; left: auto; max-width: 900px; }
.conf-lab__stage:fullscreen .conf-lab__play,
.gravity-app__stage:fullscreen .gravity-stage-actions { width: min(100%, 460px); }

.gravity-stage-speed { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.gravity-stage-speed button { padding: 7px 4px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.03); color: var(--text-soft); font: inherit; font-size: .74rem; cursor: pointer; }
.gravity-stage-speed button.is-active { border-color: rgba(56,225,255,.6); background: rgba(56,225,255,.12); color: var(--text); }
/* Zoom des distances suspendu pendant le deroulement et le recadrage. */
.gravity-stage-speed button:disabled { opacity: .38; cursor: not-allowed; }
.gravity-app__caption { position: absolute; right: 22px; bottom: 18px; left: 22px; margin: 0; padding: 10px 13px; border: 1px solid rgba(56,225,255,.16); border-radius: 10px; background: rgba(5,7,17,.82); color: var(--text-soft); font-size: .78rem; line-height: 1.45; backdrop-filter: blur(9px); }
.gravity-app__controls { display: flex; min-width: 0; padding: clamp(22px,3vw,34px); background: rgba(14,18,38,.66); }
.gravity-panel { width: 100%; align-self: center; }
.gravity-panel__kicker { margin: 0 0 6px; color: var(--cyan); font: 700 .7rem var(--font-display); letter-spacing: .13em; text-transform: uppercase; }
.gravity-panel h3 { margin-bottom: 12px; font-size: clamp(1.35rem,2.4vw,1.85rem); }
.gravity-panel > p { font-size: .88rem; line-height: 1.58; }
.gravity-drop-spec { margin: 0 0 18px !important; padding: 10px 12px; border: 1px solid rgba(56,225,255,.18); border-radius: 10px; background: rgba(56,225,255,.05); color: var(--text-dim) !important; font-size: .74rem !important; }
.gravity-drop-spec strong { display: block; color: var(--cyan); font-family: var(--font-display); }
.gravity-panel > input[type="range"] { width: 100%; margin: 12px 0 17px; accent-color: var(--cyan); }
.gravity-presets { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0 0 14px; }
.gravity-presets--places { grid-template-columns: repeat(3,minmax(0,1fr)); }
.gravity-presets--speed { grid-template-columns: repeat(3,minmax(0,1fr)); }
.gravity-panel__kicker--speed { margin-top: 14px; color: var(--text-dim); }
.gravity-presets button { min-height: 38px; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 9px; background: rgba(255,255,255,.035); color: var(--text-soft); font: 600 .72rem var(--font-display); cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.gravity-presets button:hover, .gravity-presets button.is-active { border-color: rgba(56,225,255,.5); background: rgba(56,225,255,.09); color: var(--cyan); }
.gravity-action { width: 100%; margin: 2px 0 16px; }
.gravity-action[aria-pressed="true"] { background: linear-gradient(135deg, rgba(255,110,199,.95), rgba(168,120,255,.95)); color: #fff; }
.gravity-drop-readout { display: grid; gap: 6px; margin: 0 0 9px; }
.gravity-drop-readout span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.025); color: var(--text-dim); font-size: .65rem; }
.gravity-drop-readout strong { color: var(--text); font: 600 .72rem var(--font-display); white-space: nowrap; }
.gravity-impact-times { margin: 0 0 10px !important; color: var(--text-dim) !important; font-size: .68rem !important; line-height: 1.4 !important; }
.gravity-equation { margin: 0 0 13px !important; padding: 9px 10px; border-radius: 8px; background: rgba(0,0,0,.2); color: #cfd6f5 !important; font: 500 .72rem var(--font-display) !important; text-align: center; }
.gravity-equation span { display: block; margin-bottom: 2px; color: var(--violet); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.gravity-model-limit { margin: -3px 0 13px !important; color: var(--text-dim) !important; font-size: .64rem !important; line-height: 1.45 !important; }
.gravity-panel__result { margin: 0 !important; padding: 13px 14px; border-left: 2px solid var(--violet); background: rgba(168,120,255,.07); color: var(--text-dim) !important; font-size: .77rem !important; line-height: 1.5 !important; }
.gravity-panel__result strong { display: block; margin-bottom: 3px; color: #d8c4ff; font-family: var(--font-display); }
.gravity-panel__note { margin: 14px 0 0 !important; color: var(--text-dim) !important; font-size: .7rem !important; line-height: 1.45 !important; }

/* --- explications sous la scene ------------------------------------------
   Elles etiraient la colonne de droite sans rien donner a la scene : elles
   occupent maintenant toute la largeur, sous les deux colonnes. */
.gravity-notes { border-top: 1px solid var(--border); background: rgba(10,13,30,.55); }
.gravity-notes__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(18px,3vw,30px) 0;
}
.gravity-notes__title { margin: 0; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.gravity-notes__body { padding: 12px clamp(18px,3vw,30px) clamp(18px,3vw,26px); }
.gravity-note[hidden] { display: none; }
.gravity-note {
  display: grid;
  gap: 12px;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.gravity-note__kicker {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Dans ce bloc large, les notes retrouvent une taille lisible de loin. */
.gravity-note .gravity-model-limit,
.gravity-note .gravity-panel__note { margin: 0 !important; font-size: .76rem !important; }
.gravity-note .gravity-panel__result { font-size: .82rem !important; }
.gravity-note .conf-lab__why { margin: 0; }

/* --- fenetre flottante ----------------------------------------------------
   Detachee, deplacable, et d'opacite reglable pour rester lisible par-dessus
   l'animation. Elle suit le plein ecran, ou rien d'exterieur ne s'affiche. */
.conf-float {
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 16px);
  max-height: 76vh;
  min-width: 260px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(8,11,26,.96);
  box-shadow: var(--shadow);
  backdrop-filter: blur(9px);
}
.conf-float[hidden] { display: none; }
.conf-float.is-dragging { user-select: none; }
.conf-float__bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: grab;
  touch-action: none;
}
.conf-float.is-dragging .conf-float__bar { cursor: grabbing; }
.conf-float__grip { width: 22px; height: 3px; border-radius: 2px; background: var(--border-strong); box-shadow: 0 5px 0 var(--border-strong); }
.conf-float__title { flex: 1; margin: 0; color: var(--text); font-family: var(--font-display); font-size: .82rem; }
.conf-float__opacity { display: flex; gap: 7px; align-items: center; color: var(--text-dim); font-size: .68rem; cursor: default; }
.conf-float__opacity input { width: 92px; accent-color: var(--cyan); cursor: pointer; }
.conf-float__close {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.conf-float__close:hover { border-color: var(--border-strong); background: var(--bg-card); color: var(--text); }
.conf-float__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px 16px; }

/* Poignees de redimensionnement : les bords lateraux et le bas, plus les deux
   coins bas. Le haut reste la poignee de deplacement. */
.conf-float__handle { position: absolute; z-index: 2; touch-action: none; }
.conf-float__handle--e { top: 14px; bottom: 16px; right: -5px; width: 11px; cursor: ew-resize; }
.conf-float__handle--w { top: 14px; bottom: 16px; left: -5px; width: 11px; cursor: ew-resize; }
.conf-float__handle--s { left: 16px; right: 16px; bottom: -5px; height: 11px; cursor: ns-resize; }
.conf-float__handle--se { right: -5px; bottom: -5px; width: 20px; height: 20px; cursor: nwse-resize; }
.conf-float__handle--sw { left: -5px; bottom: -5px; width: 20px; height: 20px; cursor: nesw-resize; }
/* Une marque discrete au coin, pour que la prise se devine. */
.conf-float__handle--se::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
  border-radius: 0 0 4px 0;
}
.conf-float.is-resizing { user-select: none; }
.conf-float__body .gravity-note { grid-template-columns: 1fr; }
.conf-float__marker {
  margin: 0;
  padding: 11px 13px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: .76rem;
}
.conf-lab__detach { margin-bottom: 12px; }

@media (max-width: 720px) {
  /* Sur un telephone, une fenetre flottante ne rend aucun service. */
  .gravity-notes__detach, .conf-lab__detach { display: none; }
  .conf-float { left: 8px !important; width: calc(100vw - 16px) !important; }
}
.gravity-check { display: flex; align-items: flex-start; gap: 9px; margin: 13px 0; color: var(--text-soft); font-size: .82rem; line-height: 1.4; cursor: pointer; }
.gravity-check input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--violet); }
.gravity-check--warning { margin-bottom: 18px; padding: 11px 12px; border: 1px solid rgba(255,110,199,.2); border-radius: 10px; background: rgba(255,110,199,.05); }
.gravity-check--warning input { accent-color: var(--magenta); }
.gravity-ua-readout, .gravity-measures { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0 0 14px; }
.gravity-ua-readout span, .gravity-measures span { min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.025); color: var(--text-dim); font-size: .66rem; line-height: 1.35; }
.gravity-ua-readout strong, .gravity-measures strong { display: block; margin-top: 3px; color: var(--text); font: 650 .86rem var(--font-display); }
.gravity-videos { display: grid; grid-template-columns: .85fr 1fr 1fr; gap: 20px; align-items: start; margin-top: clamp(52px,8vw,88px); }
.gravity-videos__intro { padding: 10px 18px 0 0; }
.gravity-videos__intro h3 { margin-bottom: 10px; font-size: clamp(1.45rem,2.5vw,2rem); }
.gravity-videos__intro p:last-child { font-size: .88rem; line-height: 1.55; }
.gravity-video-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.gravity-video-card__frame { position: relative; aspect-ratio: 16 / 9; background: #02030a; }
.gravity-video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Facade de lancement : une affiche locale, rien de charge chez YouTube. */
.video-launch { display: grid; place-items: center; width: 100%; padding: 0; border: 0; color: #fff; font: inherit; cursor: pointer; }
.video-launch--chambre { background: radial-gradient(circle at 50% 40%, rgba(56,225,255,.28), transparent 60%), linear-gradient(160deg, #13203f, #05070f); }
.video-launch--lune { background: radial-gradient(circle at 50% 85%, rgba(200,205,220,.35), transparent 55%), linear-gradient(170deg, #0b0d16, #1b1e28); }
/* L'apercu est une image locale : rien n'est demande a YouTube avant le clic.
   Un voile sombre garde le bouton lisible sur n'importe quelle image. */
.video-launch { position: relative; overflow: hidden; }
.video-launch__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.video-launch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,15,.05), rgba(5,6,15,.45)); pointer-events: none; }
.video-launch:hover .video-launch__poster { transform: scale(1.04); }
.video-launch__play, .video-launch__label { z-index: 1; }
.video-launch__play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(5,6,15,.55); border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(3px); transition: transform .2s ease, background .2s ease; }
.video-launch__label { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(5,6,15,.8); color: var(--text-soft); font-size: .72rem; }
.video-launch:hover .video-launch__play, .video-launch:focus-visible .video-launch__play { transform: scale(1.08); background: rgba(56,225,255,.3); }
.video-launch:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* Encadre de lecture : la moitie de la largeur de l'ecran sur ordinateur, ce
   que Clement a demande. Sur un petit ecran, la moitie serait illisible : on
   descend alors a 560 px au minimum, sans jamais depasser 92 % de l'ecran. */
.video-dialog { width: max(50vw, min(92vw, 560px)); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: #02030a; color: var(--text); overflow: visible; }
.video-dialog::backdrop { background: rgba(3,4,12,.86); backdrop-filter: blur(4px); }
.video-dialog__inner { position: relative; padding: 46px 12px 12px; }
.video-dialog__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
/* Un extrait tourne au telephone est vertical : le cadre prend son format. */
.video-dialog__frame[data-format="vertical"] { aspect-ratio: 9 / 16; }
.video-dialog__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-dialog__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Poignees de redimensionnement de la fenetre video. Elles vivent dans la
   gouttiere de 12 px laissee par le remplissage, donc jamais sur l'image. */
/* Surtout pas de position ici : le navigateur pose une fenetre modale en
   position fixed, et la surcharger la remettait dans le flux du document, donc
   hors de l ecran, la page defilant pour aller la chercher. Les poignees s y
   ancrent tres bien sans, attendu qu une modale est deja positionnee. */
.video-dialog.is-resizing { user-select: none; }
.video-dialog .redim { position: absolute; z-index: 3; touch-action: none; }
/* 22 px de prise, dont 9 qui debordent : viser une lisiere de 12 px devant une
   salle n etait pas realiste, et mes propres essais la rataient. */
.video-dialog .redim--e { top: 46px; bottom: 14px; right: -9px; width: 22px; cursor: ew-resize; }
.video-dialog .redim--w { top: 46px; bottom: 14px; left: -9px; width: 22px; cursor: ew-resize; }
.video-dialog .redim--s { left: 26px; right: 26px; bottom: -9px; height: 22px; cursor: ns-resize; }
.video-dialog .redim--se { right: -9px; bottom: -9px; width: 30px; height: 30px; cursor: nwse-resize; }
.video-dialog .redim--sw { left: -9px; bottom: -9px; width: 30px; height: 30px; cursor: nesw-resize; }
.video-dialog .redim--se::after {
  content: '';
  position: absolute;
  right: 13px;
  bottom: 13px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
}
.video-dialog__zoom {
  position: absolute;
  top: 9px;
  width: 30px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--text-soft);
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}
.video-dialog__zoom--moins { left: 12px; }
.video-dialog__zoom--plus { left: 48px; }
.video-dialog__zoom:hover { border-color: rgba(56,225,255,.55); color: var(--text); }

.video-dialog__close { position: absolute; top: 9px; right: 12px; padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--text-soft); font: inherit; font-size: .78rem; cursor: pointer; }
.video-dialog__close:hover { border-color: rgba(56,225,255,.55); color: var(--text); }
.gravity-video-card h4 { margin: 15px 17px 4px; font: 650 .92rem var(--font-display); line-height: 1.3; }
.gravity-video-card p { margin: 0 17px 17px; color: var(--text-dim); font-size: .72rem; line-height: 1.45; }
.gravity-evidence { margin-top: clamp(38px,6vw,64px); }
.conf-login {
  min-height: calc(100vh - var(--nav-h) - 95px);
  display: grid;
  align-items: center;
  padding-top: calc(var(--nav-h) + 52px);
}
.conf-login__card {
  width: min(520px, 100%);
  margin-inline: auto;
  padding: clamp(28px, 5vw, 46px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(100% 100% at 100% 0%, rgba(168,120,255,.14), transparent 58%),
    rgba(14,18,38,.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.conf-login__card h1 { margin: .35em 0 .25em; font-size: clamp(2rem, 7vw, 3rem); }
.conf-login__form { margin-top: 28px; }
.conf-login__form input[type="password"] {
  display: block;
  width: 100%;
  margin: 8px 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #101324;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: .08em;
}
.conf-login__form input[type="password"]:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(56,225,255,.14);
}
.conf-login__form label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}
.conf-login__error {
  margin: -8px 0 0;
  color: #ff9fbd;
  font-size: .92rem;
}
.conf-footer { padding-top: 28px; }

/* Repli des deux applications. Visible seulement si le module ne demarre pas,
   ou si JavaScript est absent : le lecteur doit comprendre ce qui manque,
   pas rester devant un cadre vide. */
.app-fallback { margin: 12px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: rgba(5,6,15,.7); color: var(--text-soft); font-size: .86rem; line-height: 1.55; }

/* La scene passe sur toute la largeur bien avant le telephone : a deux
   colonnes sur une tablette, le modele tombait sous les 420 px et ses
   etiquettes se chevauchaient. */
@media (max-width: 900px) {
  .conf-lab__layout { grid-template-columns: 1fr; }
  .conf-lab__stage { position: relative; top: auto; }
}

@media (max-width: 560px) {
  .conf-model-grid, .conf-variants { grid-template-columns: 1fr; }
  /* Format plus haut : la scene gagne des pixels verticaux, ou les
     etiquettes peuvent s'ecarter sans sortir du cadre. */
  .flat-model { aspect-ratio: 1 / 1; }
  .conf-lab__stage { padding: 6px; }
  .conf-lab__legend { top: 12px; left: 12px; max-width: calc(100% - 24px); padding: 6px 8px; font-size: .66rem; }
  .conf-lab__gesture { font-size: .67rem; }
  .conf-definition { padding: 20px; }
  .conf-lab__layout { grid-template-columns: 1fr; }
  .conf-lab__stage { position: relative; top: auto; }
  .conf-lab__controls { padding: 20px; }
  .conf-lab__evidence ul { grid-template-columns: 1fr; }
  .gravity-app__tabs { grid-template-columns: 1fr; }
  .gravity-app__tab { justify-content: flex-start; min-height: 48px; border-right: 0; border-bottom: 1px solid var(--border); }
  .gravity-app__tab:last-child { border-bottom: 0; }
  /* Sur telephone, la legende rentre dans le flux : posee en absolu au pied
     de la scene, elle recouvrait les dernieres commandes des qu'un onglet en
     avait plus que les autres. */
  .gravity-app__stage { padding: 8px; }
  .gravity-app__caption { position: static; margin-top: 8px; }
  .dislocation-model { aspect-ratio: 1 / 1; }
  .gravity-stage-speed.dislocation-speed { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gravity-stage-speed.dislocation-view { grid-template-columns: 1fr 1fr; }
  .gravity-app__controls { padding: 22px 18px; }
  .gravity-ua-readout, .gravity-measures { grid-template-columns: 1fr 1fr; }
  .gravity-presets--places { grid-template-columns: 1fr 1fr 1fr; }
  .conf-login { padding-top: calc(var(--nav-h) + 34px); }
  .conf-login__card { padding: 28px 22px; }
  .conf-visual { margin-top: 32px; }
}

@media (max-width: 900px) {
  .gravity-app__layout { grid-template-columns: 1fr; }
  .gravity-app__stage { border-right: 0; border-bottom: 1px solid var(--border); }
  .gravity-videos { grid-template-columns: 1fr 1fr; }
  .gravity-videos__intro { grid-column: 1 / -1; max-width: 690px; padding-right: 0; }
}

@media (max-width: 650px) {
  .gravity-videos { grid-template-columns: 1fr; }
  .gravity-videos__intro { grid-column: auto; }
}

.am-toc {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  backdrop-filter: blur(12px);
}
.am-toc h2 {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--text-dim);
  margin: 0 0 16px;
}
.am-toc ol { margin: 0; padding-left: 1.25em; display: grid; gap: 10px; }
.am-toc li { color: var(--text-dim); font-size: .96rem; }
.am-toc a { color: var(--text-soft); transition: color .25s; }
.am-toc a:hover { color: var(--cyan); }

.am-note {
  margin: 2.2em 0;
  padding: 20px 24px;
  border: 1px dashed var(--border-strong);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  background: rgba(255, 200, 97, .05);
}
.am-note p { margin: 0; font-size: .99rem; }
.am-note p + p { margin-top: .9em; }
.am-note b {
  display: block;
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
}

.am-equation {
  margin: 2.6em 0;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(56, 225, 255, .35);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 8%, rgba(168, 120, 255, .17), transparent 30%),
    linear-gradient(135deg, rgba(16, 31, 65, .9), rgba(8, 12, 31, .94));
  box-shadow: 0 22px 52px -38px var(--glow-cyan);
}
.am-equation__eyebrow {
  margin: 0 0 8px !important;
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: .74rem !important;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.am-equation h3 { margin: 0 0 .8em; font-size: clamp(1.35rem, 3vw, 1.8rem); }
#equation-instanton { scroll-margin-top: calc(var(--nav-h) + 32px); }
.am-equation__formula {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .2em;
  margin: 1.05em 0 .8em;
  color: #f5fbff;
  font-family: "Cambria Math", Cambria, Georgia, serif;
  font-size: clamp(2rem, 7vw, 3.25rem);
  line-height: 1;
  text-align: center;
}
.am-equation__formula i,
.am-equation__legend i,
.am-equation__takeaway i { font-style: italic; }
.am-equation__formula sup,
.am-equation__formula sub { font-size: .52em; line-height: 0; }
.am-equation__fraction {
  display: inline-grid;
  grid-template-rows: auto auto;
  align-items: center;
  margin-left: .12em;
  vertical-align: middle;
}
.am-equation__fraction > span { display: block; padding: 0 .13em; }
.am-equation__fraction > span:first-child { border-bottom: 1px solid currentColor; padding-bottom: .12em; }
.am-equation__fraction > span:last-child { padding-top: .12em; font-size: .8em; }
.am-equation__radic { text-decoration: overline; text-decoration-thickness: 1px; }
.am-equation__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 1.6em 0 1.25em;
}
.am-equation__legend div {
  padding: 15px;
  border: 1px solid rgba(157, 125, 255, .22);
  border-radius: var(--radius-sm);
  background: rgba(4, 6, 15, .24);
}
.am-equation__legend dt {
  margin-bottom: 7px;
  color: var(--cyan);
  font-family: "Cambria Math", Cambria, Georgia, serif;
  font-size: 1.22rem;
  font-weight: 700;
}
.am-equation__legend dd { margin: 0; color: var(--text-soft); font-size: .88rem; line-height: 1.58; }
.am-equation__takeaway {
  padding: 15px 17px;
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(168, 120, 255, .09);
}
.am-equation__source { margin: 1.2em 0 0 !important; color: var(--text-dim); font-size: .79rem !important; }

/* ---------- 11 ter. Mini-laboratoire du faux vide ---------- */
.fv-lab {
  width: min(980px, calc(100vw - 48px));
  margin: 3.5em 0;
  margin-left: 50%;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid rgba(56, 225, 255, .34);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 83% 9%, rgba(168, 120, 255, .2), transparent 25%),
    radial-gradient(circle at 10% 96%, rgba(56, 225, 255, .12), transparent 31%),
    linear-gradient(145deg, #101b43, #070a1a 72%);
  box-shadow: 0 30px 70px -50px var(--glow-cyan);
  scroll-margin-top: calc(var(--nav-h) + 28px);
  transform: translateX(-50%);
}
.fv-lab__head { max-width: 730px; }
.fv-lab__head h2 { margin: 0 0 .5em; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.fv-lab__head p { color: var(--text-soft); }
.fv-lab__modes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 30px 0;
}
.fv-lab__modes label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(4, 6, 15, .28);
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.fv-lab__modes label:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.fv-lab__modes input { accent-color: var(--cyan); margin-top: 4px; }
.fv-lab__modes b { display: block; color: var(--text); font-family: var(--font-display); font-size: .96rem; }
.fv-lab__modes small { display: block; margin-top: 3px; color: var(--text-dim); font-size: .8rem; line-height: 1.4; }
.fv-lab__modes label:has(input:checked) { border-color: var(--cyan); background: rgba(56, 225, 255, .08); }
.fv-lab__orientation {
  display: none;
  margin: -8px 0 22px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 200, 97, .38);
  border-radius: var(--radius-sm);
  background: rgba(255, 200, 97, .06);
  color: var(--text-soft);
  font-size: .84rem;
  line-height: 1.45;
}
.fv-lab__orientation span { color: var(--amber); font-size: 1.25rem; vertical-align: -.08em; }
.fv-lab__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: clamp(24px, 4vw, 46px);
  align-items: start;
}
.fv-lab__scene,
.fv-lab__controls {
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(157, 125, 255, .22);
  border-radius: var(--radius);
  background: rgba(4, 7, 20, .34);
}
.fv-lab__scene-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--text); font-family: var(--font-display); font-weight: 700; }
.fv-lab__scene-head output { color: var(--cyan); font-family: var(--font-body); font-size: .79rem; font-weight: 500; }
.fv-lab__energy { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.fv-lab__energy-fill { fill: url(#fv-energy-gradient); }
.fv-lab__energy-path { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(56, 225, 255, .42)); }
.fv-lab__energy-line { stroke: rgba(198, 208, 255, .18); stroke-width: 1; }
.fv-lab__energy text { fill: var(--text-dim); font-family: var(--font-body); font-size: 15px; }
.fv-lab__energy #fv-barrier-value { fill: var(--amber); font-family: "Cambria Math", Cambria, Georgia, serif; font-size: 21px; font-style: italic; }
.fv-lab__marble { fill: var(--cyan); stroke: #f3fdff; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(56, 225, 255, .9)); }
.fv-lab__cloud {
  position: relative;
  min-height: 170px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(56, 225, 255, .25);
  border-radius: var(--radius-sm);
  background: linear-gradient(130deg, rgba(35, 134, 183, .34), rgba(16, 25, 72, .65));
}
.fv-lab__cloud::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(222, 252, 255, .4) 1px, transparent 1px);
  background-size: 21px 21px;
  opacity: .32;
}
.fv-lab__cloud-label,
.fv-lab__bubble-label { position: absolute; z-index: 1; }
.fv-lab__cloud-label { top: 13px; left: 16px; color: #c6f7ff; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fv-lab__bubble {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb9e6, #a878ff 52%, #4d1a83);
  box-shadow: 0 0 0 4px rgba(255, 110, 199, .12), 0 0 24px rgba(168, 120, 255, .65);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.1);
}
.fv-lab__bubble-label { top: 14px; right: 16px; opacity: 0; color: #ffe0f4; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: opacity .3s; }
.fv-lab__cloud.is-nucleating .fv-lab__bubble { animation: fv-nucleate .72s var(--ease) forwards; }
.fv-lab__cloud.is-grown .fv-lab__bubble { opacity: .93; transform: translate(-50%, -50%) scale(11); transition: transform .7s var(--ease), opacity .25s; }
.fv-lab__cloud.is-grown .fv-lab__bubble-label { opacity: 1; }
@keyframes fv-nucleate {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  35% { opacity: .9; transform: translate(-50%, -50%) scale(3); }
  62% { opacity: .55; transform: translate(-50%, -50%) scale(1.9); }
  100% { opacity: .93; transform: translate(-50%, -50%) scale(11); }
}
.fv-lab__control + .fv-lab__control { margin-top: 25px; }
.fv-lab__control-heading { display: grid; grid-template-columns: minmax(0, 1fr) 3.5ch; gap: 12px; align-items: start; }
.fv-lab__control label { min-width: 0; color: var(--text); font-family: var(--font-display); font-size: .92rem; font-weight: 700; white-space: nowrap; }
.fv-lab__control output { color: var(--cyan); font-family: var(--font-body); text-align: right; white-space: nowrap; }
.fv-lab__control input[type="range"] { width: 100%; margin: 13px 0 9px; accent-color: var(--cyan); }
.fv-lab__control small { display: block; color: var(--text-dim); font-size: .81rem; line-height: 1.48; }
.fv-lab__control.is-disabled { opacity: .48; }
.fv-lab__formula { margin-top: 28px; padding: 18px; border-left: 3px solid var(--cyan); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(56, 225, 255, .07); }
.fv-lab__formula > span { display: block; color: var(--cyan); font-family: "Cambria Math", Cambria, Georgia, serif; font-size: 1.07rem; }
.fv-lab__formula strong { display: block; margin-top: 10px; color: var(--text); font-family: var(--font-display); font-size: 1.05rem; }
.fv-lab__formula small { display: block; margin-top: 7px; color: var(--text-dim); font-size: .79rem; line-height: 1.42; }
.fv-lab__formula sup, .fv-lab__formula sub { font-size: .62em; line-height: 0; }
.fv-lab__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.fv-lab__actions .btn { justify-content: center; padding-inline: 13px; font-size: .86rem; }
.fv-lab__outcome {
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(56, 225, 255, .28);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(56, 225, 255, .07);
  color: var(--text);
  font-size: .95rem;
  line-height: 1.5;
}
.fv-lab__results { display: grid; grid-template-columns: .65fr 1fr 1.45fr; gap: 1px; margin-top: 24px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--border); }
.fv-lab__results > div { min-width: 0; padding: 16px; background: rgba(7, 10, 27, .78); }
.fv-lab__results span { display: block; margin-bottom: 5px; color: var(--text-dim); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.fv-lab__results strong { color: var(--text); font-size: .92rem; line-height: 1.35; }
.fv-lab__results > div:first-child strong { color: var(--cyan); font-size: 1.35rem; }
.fv-lab__disclaimer { margin-top: 22px; padding: 17px 19px; border: 1px dashed rgba(255, 200, 97, .44); border-radius: var(--radius-sm); background: rgba(255, 200, 97, .045); }
.fv-lab__disclaimer b { display: block; color: var(--amber); font-family: var(--font-display); font-size: .82rem; }
.fv-lab__disclaimer p { margin: 7px 0 0; color: var(--text-soft); font-size: .88rem; line-height: 1.55; }

@media (max-width: 640px) {
  .am-equation__legend { grid-template-columns: 1fr; }
  .am-equation__formula { font-size: clamp(1.8rem, 10vw, 2.5rem); }
  .fv-lab { width: calc(100vw - 48px); padding: 24px 17px; }
  .fv-lab__modes, .fv-lab__grid, .fv-lab__results { grid-template-columns: 1fr; }
  .fv-lab__scene, .fv-lab__controls { padding: 17px; }
  .fv-lab__results { gap: 1px; }
  .fv-lab__results > div { padding: 14px 16px; }
  .fv-lab__actions { grid-template-columns: 1fr; }
  .fv-lab__orientation { display: block; }
  .fv-lab__control label { white-space: normal; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .fv-lab { width: min(980px, calc(100vw - 32px)); padding: 22px; }
  .fv-lab__head h2 { font-size: clamp(1.65rem, 3.6vw, 2.25rem); }
  .fv-lab__head p { margin-bottom: 0; }
  .fv-lab__modes { margin: 20px 0; }
  .fv-lab__grid { grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); gap: 20px; }
  .fv-lab__scene, .fv-lab__controls { padding: 16px; }
  .fv-lab__cloud { min-height: 130px; }
  .fv-lab__results { grid-template-columns: .65fr 1fr 1.45fr; }
  .fv-lab__orientation { display: none; }
}

/* Protocole et résultats du laboratoire : une fenêtre finie peut ne rien observer. */
.fv-lab__protocol { display: flex; align-items: stretch; gap: 10px; margin: 28px 0; padding: 14px; border: 1px solid rgba(56, 225, 255, .2); border-radius: var(--radius-sm); background: rgba(56, 225, 255, .045); }
.fv-lab__protocol > div { flex: 1; min-width: 0; padding: 2px 8px; }
.fv-lab__protocol span { display: inline-grid; width: 22px; height: 22px; margin-right: 7px; place-items: center; border-radius: 50%; background: rgba(56, 225, 255, .18); color: var(--cyan); font-size: .74rem; font-weight: 800; }
.fv-lab__protocol b { color: var(--text); font-family: var(--font-display); font-size: .83rem; }
.fv-lab__protocol small { display: block; margin: 5px 0 0 29px; color: var(--text-dim); font-size: .74rem; line-height: 1.35; }
.fv-lab__protocol > i { align-self: center; color: var(--cyan); font-style: normal; }
.fv-lab__central-window { position: absolute; z-index: 1; top: 27px; bottom: 25px; left: 45%; width: 10%; border-inline: 1px dashed rgba(255, 200, 97, .8); background: rgba(255, 200, 97, .07); }
.fv-lab__central-label { position: absolute; z-index: 2; top: 35px; left: 50%; transform: translateX(-50%); color: var(--amber); font-size: .65rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.fv-lab__cloud-axis { position: absolute; z-index: 2; right: 16px; bottom: 8px; left: 16px; display: flex; justify-content: space-between; color: rgba(198, 208, 255, .7); font-size: .65rem; }
.fv-lab__cloud-axis b { color: var(--amber); font-weight: 600; }
.fv-lab__cloud-axis i { font-style: normal; }
.fv-lab__failed-fluctuation { position: absolute; z-index: 2; top: 50%; left: 50%; width: 11px; height: 11px; border: 2px solid var(--amber); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.2); }
.fv-lab__cloud.is-failure .fv-lab__failed-fluctuation { animation: fv-fade-fluctuation .85s var(--ease) forwards; }
@keyframes fv-fade-fluctuation { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 42% { opacity: .9; transform: translate(-50%, -50%) scale(3.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
.fv-lab__history { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; min-height: 48px; margin: 16px 0 0; padding: 0; list-style: none; }
.fv-lab__history:empty::before { grid-column: 1 / -1; content: "Les douze derniers essais apparaîtront ici."; display: grid; place-items: center; min-height: 48px; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-size: .77rem; }
.fv-lab__history li { position: relative; min-width: 0; min-height: 48px; overflow: hidden; border: 1px solid var(--border); border-radius: 5px; background: rgba(7, 10, 27, .7); }
.fv-lab__history li::before { position: absolute; top: 5px; bottom: 5px; left: var(--trial-position); width: 2px; content: ""; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.fv-lab__history li.is-failure::before { background: var(--amber); box-shadow: 0 0 7px var(--amber); }
.fv-lab__history li span { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, transparent var(--trial-position), rgba(255, 200, 97, .09) var(--trial-position)); }
.fv-lab__history li b { position: absolute; right: 0; bottom: 2px; left: 0; overflow: hidden; color: var(--text-dim); font-size: .56rem; font-weight: 600; letter-spacing: .01em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.fv-lab__history li.is-success b { color: var(--cyan); }

@media (max-width: 640px) {
  .fv-lab__protocol { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .fv-lab__protocol > i { display: none; }
  .fv-lab__protocol > div { padding: 4px; }
  .fv-lab__history { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.am-box {
  margin: 3.4em 0 0;
  padding: 30px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.am-box h2 { margin-top: 0; font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.am-box ul { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 14px; }
.am-box li { margin: 0; font-size: .96rem; }
.am-box li small { display: block; color: var(--text-dim); font-size: .84rem; }

.am-share {
  max-width: 760px;
  margin: 56px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.am-share h2 {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.am-share__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.am-share a, .am-share button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-soft);
  font-size: .88rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color .25s, border-color .25s, transform .3s var(--ease);
}
.am-share a:hover, .am-share button:hover {
  color: var(--text);
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.am-pager {
  max-width: 760px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.am-pager a {
  display: block;
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: border-color .3s, background .3s, transform .35s var(--ease);
}
.am-pager a:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hov);
  transform: translateY(-4px);
}
.am-pager span {
  display: block;
  font-family: var(--font-display);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--text-dim);
  margin-bottom: 9px;
}
.am-pager strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.am-pager__next { text-align: right; }

/* Figure reprise d'une publication : fond clair assumé, car les figures
   scientifiques sont dessinées pour le papier. Les afficher telles quelles sur
   fond sombre serait illisible ; on les pose donc sur une carte blanche. */
.am-figure-papier {
  margin: 2.6em 0;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #f7f9ff;
}
.am-figure-papier img { width: 100%; border-radius: 6px; }
.am-figure-papier figcaption {
  margin-top: 16px;
  font-size: .86rem;
  line-height: 1.6;
  color: #3d4568;
}
.am-figure-papier figcaption b { color: #12183a; }
.am-figure-papier figcaption a { color: #2a4bd7; text-decoration: underline; }

@media (max-width: 700px) {
  .am-pager { grid-template-columns: 1fr; }
  .am-pager__next { text-align: left; }
  .am-toc, .am-box { padding: 22px 24px; }
  .am-figure-papier { padding: 14px; }
}

/* ---------- 12. Timeline / interventions ---------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--cyan), var(--violet), transparent);
}
.timeline li { position: relative; padding-left: 38px; padding-bottom: 34px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 14px var(--glow-cyan);
}
.timeline h3 { font-size: 1.08rem; margin-bottom: .25em; }
.timeline .meta-row { margin-top: 8px; padding-top: 0; border: 0; }

/* ---------- 13. Formulaire ---------- */
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label {
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-soft);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--cyan);
  background-color: rgba(255,255,255,.05);
  box-shadow: 0 0 0 4px rgba(56,225,255,.12);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  appearance: none;
  cursor: pointer;
  color-scheme: dark;
  padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23a878ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}
.field select option { background: #101324; color: var(--text); }
.hp { position: absolute; left: -9999px; opacity: 0; }

.form__note { font-size: .84rem; color: var(--text-dim); }

/* Confirmation d'envoi : le formulaire laisse place a une petite mise en scene quantique. */
.contact-success { min-height: 350px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, rgba(56,225,255,.08), rgba(168,120,255,.09) 50%, rgba(255,110,199,.08)); padding: 28px; text-align: center; }
.contact-success__scene { position: relative; width: min(100%, 360px); height: 205px; }
.contact-success__cloud, .contact-success__envelope, .contact-success__schrodinger { position: absolute; left: 50%; top: 50%; }
.contact-success__cloud { width: 112px; transform: translate(-50%, -50%); color: var(--cyan); filter: drop-shadow(0 0 12px var(--glow-cyan)); }
.contact-success__cloud svg { width: 100%; height: auto; }
.contact-success__cloud::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 12px; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 9px #fff, 0 0 48px 24px var(--violet); opacity: 0; transform: translate(-50%, -50%) scale(.1); }
.contact-success__envelope { width: 106px; height: 72px; transform: translate(-50%, -50%) translateX(112px); border: 1px solid rgba(255,255,255,.58); border-radius: 7px; background: linear-gradient(145deg, #a878ff, #ff6ec7); box-shadow: 0 12px 30px rgba(168,120,255,.3); }
.contact-success__envelope::before, .contact-success__envelope::after { content: ""; position: absolute; inset: 0; border-radius: 7px; }
.contact-success__envelope::before { clip-path: polygon(0 0, 50% 58%, 100% 0); border-bottom: 1px solid rgba(5,6,15,.5); background: rgba(5,6,15,.16); }
.contact-success__envelope::after { clip-path: polygon(0 100%, 50% 49%, 100% 100%); border-top: 1px solid rgba(5,6,15,.42); }
.contact-success__laser { position: absolute; top: calc(50% - 2px); left: 4%; width: 0; height: 4px; border-radius: 99px; background: #ff426d; box-shadow: 0 0 8px #fff, 0 0 20px #ff426d, 0 0 46px #ff426d; opacity: 0; }
.contact-success__bits { position: absolute; inset: 44% 8% auto; color: #45ef78; font-family: var(--font-head); font-size: clamp(.9rem, 3vw, 1.25rem); letter-spacing: .28em; opacity: 0; text-shadow: 0 0 12px rgba(69,239,120,.9); white-space: nowrap; }
.contact-success__schrodinger { width: 142px; height: 177px; transform: translate(-50%, -50%) translateY(36px) scale(.5); opacity: 0; }
.contact-success__schrodinger img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.32)); }
.contact-success__words { max-width: 500px; opacity: 0; transform: translateY(12px); }
.contact-success__words h3 { margin: 0 0 9px; }
.contact-success__words p { margin: 0; color: var(--text-soft); }
.contact-success.is-animating .contact-success__envelope { animation: contact-envelope 1.15s var(--ease) both; }
.contact-success.is-animating .contact-success__cloud { animation: contact-cloud-received .5s .78s var(--ease) both, contact-cloud-dissolve .45s 1.75s var(--ease) both; }
.contact-success.is-animating .contact-success__cloud::after { animation: contact-flash .52s 1.85s var(--ease) both; }
.contact-success.is-animating .contact-success__laser { animation: contact-laser .72s 1.15s linear both; }
.contact-success.is-animating .contact-success__bits { animation: contact-bits 1.15s 2.14s var(--ease) both; }
.contact-success.is-animating .contact-success__schrodinger { animation: contact-schrodinger .7s 2.9s var(--ease) both; }
.contact-success.is-animating .contact-success__words { animation: contact-words .65s 3.3s var(--ease) both; }
@keyframes contact-envelope { 0% { transform: translate(-50%, -50%) translateX(112px) rotate(6deg); } 70% { transform: translate(-50%, -50%) translateX(12px) rotate(-3deg) scale(.9); } 100% { transform: translate(-50%, -50%) scale(.15); opacity: 0; } }
@keyframes contact-cloud-received { from { color: var(--cyan); transform: translate(-50%, -50%) scale(1); } to { color: var(--violet); transform: translate(-50%, -50%) scale(1.09); filter: drop-shadow(0 0 18px var(--glow-violet)); } }
@keyframes contact-cloud-dissolve { 0% { color: var(--violet); opacity: 1; transform: translate(-50%, -50%) scale(1.09); filter: drop-shadow(0 0 18px var(--glow-violet)); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.5); filter: blur(8px); } }
@keyframes contact-laser { 0% { width: 0; opacity: 0; } 18%, 65% { width: 46%; opacity: 1; } 100% { width: 52%; opacity: 0; } }
@keyframes contact-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(5); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(10); } }
@keyframes contact-bits { 0% { opacity: 0; transform: scale(.5); } 28% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(42px) scale(1.16); } }
@keyframes contact-schrodinger { from { opacity: 0; transform: translate(-50%, -50%) translateY(36px) scale(.5); } to { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); } }
@keyframes contact-words { to { opacity: 1; transform: none; } }

/* ---------- 14. CTA / bandeau ---------- */
.cta-band {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(168,120,255,.2), transparent 65%),
    var(--bg-elevated);
  padding: clamp(42px, 7vw, 76px);
  text-align: center;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .45;
  pointer-events: none;
}
.cta-band h2 { margin-bottom: .4em; }

/* ---------- 14 bis. Bandeau d'annonce, tout en haut de page ---------- */
.annonce {
  /* C'est ce bandeau, et non le hero, qui compense la barre de navigation
     fixe quand il se trouve en tête de page. */
  position: relative;
  padding-top: calc(var(--nav-h) + 16px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(56,225,255,.10), rgba(168,120,255,.13));
  backdrop-filter: blur(10px);
}
/* Le hero réserve normalement la hauteur de la barre fixe. Précédé du
   bandeau, il ne doit plus le faire : sans cette règle, on obtiendrait
   72 px de vide. */
.annonce + .hero { padding-top: 0; }

/* Le bandeau d'annonce occupe déjà le haut de la première vue : le hero de
   l'accueil n'a donc pas besoin de réserver une seconde hauteur d'écran. */
.annonce + .hero--home {
  min-height: clamp(640px, 78svh, 740px);
  align-items: flex-start;
  padding: clamp(58px, 7vh, 76px) 0 96px;
}

/* Le journal suit immédiatement la présentation, sans grand sas vide. */
.home-formats {
  padding-top: clamp(46px, 6vw, 72px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.home-videos { padding-top: clamp(204px, 22vw, 274px); }
.home-about { padding-bottom: clamp(54px, 7vw, 82px); }
.home-articles {
  padding-top: clamp(28px, 2.6vw, 38px);
  padding-bottom: clamp(54px, 7vw, 72px);
}
.home-contact { padding-top: clamp(44px, 6vw, 72px); }

.annonce__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  pointer-events: none;
}
.annonce__inner a { pointer-events: auto; }
.annonce__reservation {
  flex: 0 0 auto;
  flex-direction: column;
  gap: 1px;
  padding: 11px 20px;
  line-height: 1.45;
  text-align: center;
}
.annonce__reservation small { font-size: .73rem; font-weight: 500; }
.annonce__direct {
  display: flex;
  flex: 1 0 100%;
  align-items: center;
  gap: 14px;
  padding: 11px 15px;
  border: 1px solid rgba(56, 225, 255, .3);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(5, 6, 15, .78), rgba(168, 120, 255, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  color: var(--text);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.annonce__direct:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 225, 255, .62);
  background: linear-gradient(100deg, rgba(10, 13, 25, .92), rgba(168, 120, 255, .17));
  box-shadow: 0 9px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.annonce__direct:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.annonce__direct-signal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: #ff94ba;
  font-family: var(--font-display);
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.annonce__direct-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d8d;
  box-shadow: 0 0 0 4px rgba(255, 77, 141, .12), 0 0 14px rgba(255, 77, 141, .7);
}
.annonce__direct-copy {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.annonce__direct-copy strong {
  font-family: var(--font-display);
  font-size: .94rem;
  font-weight: 600;
}
.annonce__direct-copy small {
  color: var(--text-muted);
  font-size: .78rem;
}
.annonce__direct svg {
  flex: 0 0 auto;
  color: var(--cyan);
  transition: transform .2s ease;
}
.annonce__direct:hover svg { transform: translateX(4px); }

@media (max-width: 700px) {
  .annonce { padding-top: calc(var(--nav-h) + 14px); }
  .annonce__inner { align-items: flex-start; }
  .annonce__reservation { max-width: 100%; }
  .annonce__direct { align-items: center; gap: 11px; }
  .annonce__direct-copy { display: grid; gap: 1px; }
  .annonce__direct-copy strong { font-size: .89rem; }
  .annonce__direct-copy small { font-size: .73rem; }
  .annonce + .hero { min-height: auto; padding: 46px 0 96px; }
  .hero__grid { gap: 36px; }
  .hero__grid .orbit { order: 0; }
  /* Sur un écran étroit, le visuel du carbone passe sous le titre. Le témoin
     reste donc visible entre le bouton et l'atome, au lieu de sortir du cadre. */
  .hero-scroll { top: 286px; bottom: auto; }
  .home-articles { padding-top: 28px; }
}

/* ---------- 14 ter. Agenda : prochaine intervention ---------- */
.agenda {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 30px;
  align-items: center;
  padding: 28px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  backdrop-filter: blur(12px);
}
.agenda__date {
  display: grid;
  place-items: center;
  min-width: 112px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--gradient-soft);
  text-align: center;
}
.agenda__jour {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.agenda__mois {
  margin-top: 8px;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.agenda h2, .agenda h3 {
  font-size: clamp(1.12rem, 2.1vw, 1.45rem);
  margin-bottom: .4em;
}
.agenda p { margin: 0; font-size: .96rem; }
.agenda p + p { margin-top: .7em; }

@media (max-width: 700px) {
  .agenda { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .agenda__date { justify-self: start; min-width: 0; padding: 14px 20px; }
}

/* ---------- 15. Presse / logos ---------- */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
}
.logo-strip div {
  display: grid;
  place-items: center;
  padding: 22px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .04em;
  transition: color .3s, border-color .3s;
}
.logo-strip div:hover { color: var(--text); border-color: var(--border-strong); }

.kit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.kit-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  transition: border-color .3s, background .3s;
}
.kit-list li:hover { border-color: var(--border-strong); background: var(--bg-card-hov); }
.kit-list span { color: var(--text-soft); font-size: .95rem; }

/* ---------- 16. Réseaux ---------- */
.socials { display: flex; flex-wrap: wrap; gap: 14px; }
.social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px 13px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.social:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 14px 30px -16px var(--glow-cyan); }
.social svg { width: 20px; height: 20px; flex: 0 0 auto; }
.social strong { font-family: var(--font-display); font-size: .95rem; font-weight: 600; }
.social small { display: block; color: var(--text-dim); font-size: .78rem; }

/* ---------- 17. Pied de page ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 64px 0 34px;
  background: linear-gradient(to bottom, transparent, rgba(14,18,38,.55));
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer h4 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer ul a { color: var(--text-soft); font-size: .94rem; transition: color .25s; }
.footer ul a:hover { color: var(--cyan); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: .84rem;
  color: var(--text-dim);
}

/* ---------- 18. Animations d'apparition ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- 19. Page 404 ---------- */
.error-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--nav-h) 24px 60px;
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 22vw, 14rem);
  font-weight: 700;
  line-height: .9;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .9;
}

/* ---------- 20. Responsive ---------- */
/* Entre le menu déroulant mobile (820 px) et le confort du grand écran, les
   sept entrées plus le bouton d'abonnement deviennent à l'étroit. On resserre
   plutôt que de laisser la barre se déformer. */
@media (max-width: 1120px) and (min-width: 821px) {
  .nav__links { gap: 2px; }
  .nav__links a { padding: 9px 10px; font-size: .89rem; }
  .nav__cta { margin-left: 4px; }
}

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  /* Largeur EXPLICITE indispensable ici : « margin-inline: auto » annule
     l'etirement de l'element de grille, la largeur retomberait alors sur le
     contenu, or .orbit__core est en pourcentage, donc d'une largeur indefinie.
     Resultat sans cette ligne : l'orbite s'effondre a une quinzaine de pixels. */
  .orbit { width: min(420px, 74vw); max-width: none; margin-inline: auto; order: -1; }
  .about__grid { grid-template-columns: 1fr; }
  /* Sur mobile aussi : les livres à gauche, le personnage en face à droite.
     C'est ce face-à-face qui fait tout l'intérêt de la section, il n'y a donc
     pas de raison de le supprimer. On rétrécit plutôt que de masquer. */
  /* Sur mobile : 3 couvertures sur la première rangée, 2 centrées en dessous.
     On passe en flex enveloppant, qui centre tout seul une dernière rangée
     incomplète. Une grille en 3 colonnes collerait les 2 derniers livres à
     gauche, et les recentrer demanderait de viser un enfant précis. */
  .reading-shelf {
    --shelf-gap: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--shelf-gap);
    width: 100%;
    max-width: 380px;
    justify-self: center;
    margin-inline: auto;
  }
  .reading-shelf__book {
    /* Trois par rangée quelle que soit la largeur de l'écran. */
    width: calc((100% - 2 * var(--shelf-gap)) / 3);
    height: auto;
    aspect-ratio: 2 / 3;
  }
  /* Cette disposition ne laisse pas de place pour un personnage en face de
     chaque livre : ils sont retirés du mobile. */
  .reading-shelf__mascot { display: none; }
  .portrait { max-width: 420px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .nav__burger { display: block; }
  .nav__cta { display: none; }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 28px;
    background: rgba(8, 11, 26, .96);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: 13px 16px; font-size: 1rem; }

  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  /* La mascotte à son bureau est retirée du mobile : empilée entre deux
     cartes, elle coupait la lecture sans rien apporter. Son emplacement est
     donc aussi retiré de la grille, sans quoi il resterait une rangée vide. */
  .articles-feature-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "light" "young" "false";
    gap: 18px;
  }
  .articles-feature-grid__mascot { display: none; }
  .articles-feature-grid__card--young { transform: none; }
  .articles-feature-grid__card--young:hover { transform: translateY(-6px); }
  .articles-feature-grid__card--young.post-card--soon:hover { transform: none; }
  .form__row { grid-template-columns: 1fr; }
  .hero__stats { gap: 26px 34px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  /* Les couvertures se resserrent encore sur les écrans les plus étroits,
     pour que les trois de la première rangée restent lisibles. */
  .reading-shelf { --shelf-gap: 10px; }
  .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .card { padding: 24px; }
  .btn { width: 100%; }
  .hero__actions { flex-direction: column; }
  .back-to-top {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
  }
}

/* En paysage mobile/tablette, conserver le titre et le nuage électronique sur
   une même ligne évite un hero inutilement haut. */
@media (max-width: 1000px) and (min-width: 701px) and (orientation: landscape) {
  .annonce + .hero--home {
    min-height: 470px;
    padding: 38px 0 76px;
  }
  .hero--home .hero__grid {
    grid-template-columns: 1.05fr .95fr;
    gap: 32px;
  }
  .hero--home .hero__grid .orbit {
    width: min(300px, 36vw);
    order: initial;
  }
  .hero--home .hero-scroll { bottom: 60px; }
}

/* ---------- 14 ter. Bandeau du direct TikTok, sur toutes les pages ----------
   Il ouvre chaque page : c'est donc lui qui compense la barre fixe. La section
   qui le suit n'a plus a le faire, et la variable est remise a zero pour elle
   seule (ses marges ecrites en ligne s'en servent aussi). */
.annonce.annonce--direct {
  padding-top: calc(var(--nav-h) + 10px);
  padding-bottom: 10px;
  background: linear-gradient(90deg, rgba(56,225,255,.05), rgba(168,120,255,.08));
}
.annonce--direct + * { --nav-h: 0px; }
.annonce--direct .annonce__direct { padding: 9px 15px; border-color: var(--border); }
.annonce--direct .annonce__direct-signal { min-width: 7.2em; color: var(--text-muted); }

/* Hors ligne, ou etat inconnu : une pastille grise, sans eclat. */
.annonce--direct .annonce__direct-point {
  position: relative;
  background: #7d8297;
  box-shadow: none;
}

/* En direct, chez soi ou chez un autre : la pastille rouge rayonne et bat
   doucement. L'onde part d'un pseudo-element pour ne pas deformer le point. */
.annonce--direct:is([data-etat="direct"], [data-etat="invite"]) .annonce__direct { border-color: rgba(255,45,85,.42); }
.annonce--direct:is([data-etat="direct"], [data-etat="invite"]) .annonce__direct:hover { border-color: rgba(255,45,85,.7); }
.annonce--direct:is([data-etat="direct"], [data-etat="invite"]) .annonce__direct-signal { color: #ff8fa6; }
.annonce--direct:is([data-etat="direct"], [data-etat="invite"]) .annonce__direct-point {
  background: #ff2d55;
  box-shadow: 0 0 7px 1px rgba(255,45,85,.7);
  animation: direct-battement 1.6s ease-in-out infinite;
}
.annonce--direct:is([data-etat="direct"], [data-etat="invite"]) .annonce__direct-point::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: direct-onde 1.6s ease-out infinite;
}
@keyframes direct-battement {
  0%, 100% { transform: scale(1); box-shadow: 0 0 6px 1px rgba(255,45,85,.6); }
  50% { transform: scale(1.14); box-shadow: 0 0 12px 3px rgba(255,45,85,.9); }
}
@keyframes direct-onde {
  0% { box-shadow: 0 0 0 0 rgba(255,45,85,.5); }
  75%, 100% { box-shadow: 0 0 0 8px rgba(255,45,85,0); }
}
@media (prefers-reduced-motion: reduce) {
  .annonce--direct .annonce__direct-point,
  .annonce--direct .annonce__direct-point::after { animation: none !important; }
}

/* Le lecteur du direct, monte dans la fenetre flottante au clic seulement.
   Il est vertical : on lui laisse de la hauteur. */
.direct__panneau { display: block; }
.direct__panneau[hidden] { display: none; }
.direct__panneau iframe {
  display: block;
  width: 100%;
  height: clamp(360px, 72vh, 760px);
  border: 0;
  border-radius: var(--radius-sm);
  background: #000;
}

/* La carte de la conference, parmi les dernieres publications : meme gabarit
   que les cartes TikTok, mais un simple lien vers la page. */
.tiktok-duo > .video-card { align-self: stretch; display: flex; flex-direction: column; }
.tiktok-duo > .video-card .video-card__body { flex: 1; }
.publication-conf__lien { display: block; color: var(--text); }
.publication-conf__lien .video-card__thumb { width: 100%; }
.publication-conf__lien:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }

/* ---------- 21. Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

.skip-link {
  position: absolute;
  top: -60px; left: 24px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--cyan);
  color: #05060f;
  border-radius: 0 0 12px 12px;
  font-weight: 600;
  transition: top .25s;
}
.skip-link:focus { top: 0; }