/* Hallmark · macrostructure: Spotlight Roll (variant du systeme qui-sommes-nous)
 * Hallmark · pre-emit critique: P5 H5 E5 S4 R5 V5
 * Page "Nos intervenants" — Sorbonne Sport Business.
 * Memes tokens/chrome que le reste du site, mais un motif propre a cette
 * page : un halo qui suit le curseur, comme une poursuite de scene, repris
 * du hero jusque sur chaque carte intervenant (des gens qui prennent la
 * lumiere). Trois intervenants reels traites en grand plutot qu'en grille
 * dense de cartes identiques. Aucune metrique inventee, aucun intervenant
 * fictif, aucun faux chrome.
 * ========================================================================= */

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

:root {
  --navy-950: #02101f;
  --navy-900: #041a35;
  --navy-800: #062750;
  --navy-700: #0a2f5c;
  --navy-600: #123a6b;
  --navy-500: #1d508f;

  --paper: #ffffff;
  --paper-2: #f6f5f2;
  --paper-3: #eceae5;

  --ink: #041a35;
  --ink-muted: #5b6472;
  --on-navy: #ffffff;
  --on-navy-soft: #c5dbf2;
  --on-navy-mute: rgba(197, 219, 242, 0.74);

  --gold: #7ab1e8;
  --gold-soft: #a9cdf2;
  --gold-deep: #2660a5;
  --gold-ink: #041a35;

  --line-navy: rgba(197, 219, 242, 0.16);
  --line-ink: rgba(4, 26, 53, 0.12);

  --font: "General Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;

  --r-card: 16px;
  --r-media: 16px;

  --shell: min(1280px, 90vw);
  --hdr-h: 80px;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(4rem, 9vw, 8rem);

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 140ms;
  --dur-mid: 260ms;
  --dur-slow: 420ms;

  --z-media: 0;
  --z-content: 2;
  --z-floatnav: 60;
  --z-header: 100;
  --z-skip: 200;
}

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }

h1, h2, h3 {
  font-weight: 500; line-height: 1.02; letter-spacing: -0.035em;
  text-wrap: balance; overflow-wrap: anywhere;
}
p { text-wrap: pretty; }

.logo { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.035em; }
/* Embleme officiel dans le header : blanc sur theme navy, couleurs sur clair. */
.hdr .logo { display: inline-flex; align-items: center; gap: 0.55rem; }
.hdr .logo img { width: 42px; height: auto; }
body[data-theme="navy"] .hdr .logo img { filter: brightness(0) invert(1); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.shero :focus-visible, .hdr :focus-visible, .final :focus-visible { outline-color: var(--gold-soft); }

.skip-link {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: var(--z-skip); background: var(--navy-900); color: #fff;
  padding: 0.8rem 1.3rem; border-radius: 0 0 12px 12px; font-weight: 600;
  transition: transform var(--dur-mid) var(--ease-out-quart);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ------------------------------ PILLS / BTN ------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0 20px; border-radius: 100px;
  font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out-quart),
              background var(--dur-mid) var(--ease-out-quart),
              color var(--dur-mid) var(--ease-out-quart),
              box-shadow var(--dur-mid) var(--ease-out-quart);
}
.pill:hover { transform: translateY(-2px); }
.pill:active { transform: translateY(0); }
.pill.ghost { box-shadow: inset 0 0 0 1.5px currentColor; }
.pill.solid { background: var(--gold); color: var(--gold-ink); border-radius: 12px; }
.pill.solid:hover { background: var(--gold-soft); box-shadow: 0 12px 26px -14px rgba(122, 177, 232, 0.7); }
.pill.lg { min-height: 52px; padding: 0 26px; font-size: 1.02rem; }

/* -------------------------------- HEADER --------------------------------- */
.hdr {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--hdr-h);
  z-index: var(--z-header); display: flex; align-items: center;
  transition: background var(--dur-slow) var(--ease-out-quart),
              box-shadow var(--dur-slow) var(--ease-out-quart);
}
.hdr-in {
  width: var(--shell); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
}
.hdr-right { display: flex; align-items: center; gap: 0.6rem; }
/* Bouton d'adhesion a droite de l'en-tete. Il remplace l'ancien lien de
   connexion : c'est la seule action permanente du site, elle doit se voir sur
   les deux fonds (l'en-tete bascule navy / clair au fil du defilement). */
.hdr-cta { min-height: 48px; padding: 0 22px; font-size: 0.98rem; }
@media (max-width: 520px) { .hdr-cta { min-height: 42px; padding: 0 15px; font-size: 0.88rem; } }

body[data-theme="navy"] .hdr {
  color: #fff; background: rgba(4, 26, 53, 0.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body[data-theme="navy"] .hdr .pill.ghost { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
body[data-theme="light"] .hdr {
  color: var(--ink); background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -24px rgba(4, 26, 53, 0.5);
}
body[data-theme="light"] .hdr .pill.ghost { box-shadow: inset 0 0 0 1.5px var(--line-ink); }

/* ============================ HERO SPOTLIGHT =============================== */
.shero {
  position: relative; background: var(--navy-900); color: #fff; overflow: hidden;
  min-height: 100svh; display: flex; align-items: flex-end;
  padding: calc(var(--hdr-h) + 3rem) 0 clamp(3.5rem, 7vw, 6rem);
}
.shero-media { position: absolute; inset: 0; z-index: var(--z-media); }
.shero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.shero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(195deg, rgba(2, 16, 31, 0.55) 0%, rgba(4, 26, 53, 0.82) 55%, var(--navy-900) 98%);
}
/* Lueur fixe : le halo suivait le curseur, ce qui faisait passer une tache
   blanche derrière le titre à chaque mouvement de souris. */
.shero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(900px circle at 72% 28%, rgba(122, 177, 232, 0.14), transparent 70%);
}
.shero-in { position: relative; z-index: var(--z-content); width: var(--shell); margin: 0 auto; max-width: 50ch; }
.shero-kicker {
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-soft);
  text-transform: uppercase; margin-bottom: var(--space-sm);
}
.shero-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.8rem, 6.6vw, 6rem); letter-spacing: -0.01em; line-height: 1.0; margin-bottom: var(--space-md); }
.shero-sub { color: var(--on-navy-soft); font-size: clamp(1.05rem, 1.5vw, 1.35rem); max-width: 42ch; line-height: 1.55; letter-spacing: 0.01em; }

/* ------------------------- INTRO SPEAKERS -------------------------------- */
.speakers-head { width: var(--shell); margin: var(--space-2xl) auto var(--space-lg); max-width: 62ch; }
.speakers-kicker {
  display: inline-block; border: 1.5px solid var(--line-ink); color: var(--ink);
  border-radius: 100px; padding: 0.4rem 1rem; font-size: 0.85rem; font-weight: 600;
  margin-bottom: var(--space-md);
}
.speakers-intro { font-size: clamp(1.6rem, 3.2vw, 2.6rem); color: var(--ink); }

/* ============================ SPEAKERS (spotlight roll) ==================== */
.speakers { background: var(--paper); padding: 0 0 var(--space-2xl); display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 3.5rem); width: var(--shell); margin: 0 auto; }
.speaker {
  display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; padding-bottom: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--line-ink);
  perspective: 1200px;
}
.speaker:last-child { border-bottom: none; padding-bottom: 0; }
.speaker--flip { grid-template-columns: 1fr minmax(0, 360px); }
.speaker--flip .speaker-visual { order: 2; }
.speaker--flip .speaker-body { order: 1; text-align: right; align-items: flex-end; }

.speaker-visual {
  position: relative; aspect-ratio: 1; border-radius: var(--r-media); overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(140% 140% at var(--mx, 30%) var(--my, 20%), var(--card-a, var(--navy-600)), var(--card-b, var(--navy-900)) 74%);
  box-shadow: 0 44px 80px -44px rgba(4, 26, 53, 0.55);
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform 420ms var(--ease-out-quart), box-shadow 420ms var(--ease-out-quart);
  will-change: transform;
}
.speaker-visual:hover { box-shadow: 0 16px 36px -20px rgba(4, 26, 53, 0.6); }
.speaker-quote {
  position: absolute; top: 0.5rem; left: 1rem; z-index: 1; pointer-events: none;
  font-size: 4.5rem; font-weight: 700; line-height: 1;
  font-family: Georgia, "Times New Roman", serif; color: rgba(255, 255, 255, 0.16);
}
/* Photo réelle de l'intervenant : couvre la carte, le dégradé sert de fond
   de chargement. Le guillemet reste posé dessus. */
.speaker-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.speaker-quote { z-index: 2; }
/* Logo du club en couleurs, à côté du nom. */
.speaker-namerow { display: flex; align-items: center; gap: 0.9rem; }
.speaker--flip .speaker-namerow { flex-direction: row-reverse; }
.speaker-logo { width: auto; height: clamp(34px, 3.4vw, 46px); flex: none; }

.speaker-body { display: flex; flex-direction: column; gap: 0.3rem; }
.speaker-org {
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-muted);
}
.speaker-name { font-size: clamp(1.8rem, 3.6vw, 2.8rem); color: var(--ink); }
.speaker-role { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--ink-muted); }

/* ============================ GALERIE COMPLÈTE =========================== */
.roster { background: var(--paper); padding: 0 0 var(--space-2xl); width: var(--shell); margin: 0 auto; }
.roster-head { max-width: 62ch; margin-bottom: var(--space-lg); }
.roster-title { font-size: clamp(1.9rem, 3.6vw, 3rem); color: var(--ink); margin-bottom: 0.6rem; }
.roster-sub { color: var(--ink-muted); font-size: clamp(0.98rem, 1.3vw, 1.1rem); max-width: 52ch; }
.roster-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.5rem);
}
.rc { position: relative; }
.rc-media {
  aspect-ratio: 5 / 4; border-radius: var(--r-media); overflow: hidden;
  background: var(--navy-800); margin-bottom: 0.8rem;
}
.rc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-quart);
}
.rc:hover .rc-media img { transform: scale(1.04); }
.rc h3 { font-size: 1.12rem; color: var(--ink); margin-bottom: 0.15rem; }
.rc p { font-size: 0.88rem; color: var(--ink-muted); }

@media (max-width: 1024px) {
  .roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .roster-grid { grid-template-columns: 1fr; }
}

/* =============================== CTA FINAL =============================== */
.final { background: var(--navy-800); color: #fff; }
.final-in {
  width: var(--shell); margin: 0 auto; text-align: center;
  padding: var(--space-2xl) 0; display: flex; flex-direction: column;
  align-items: center; gap: var(--space-lg);
}
.final-title { font-size: clamp(2.4rem, 5.8vw, 4.6rem); max-width: 20ch; }
.final-sub { color: var(--on-navy-soft); font-size: clamp(1rem, 1.5vw, 1.25rem); max-width: 52ch; }
.final-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; }

/* ================================= FOOTER ================================ */
.ft { background: var(--paper); color: var(--ink); padding: var(--space-2xl) 0 2rem; }
.ft-in {
  width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 2fr; gap: clamp(2rem, 5vw, 4rem);
}
.ft-brand .logo { color: var(--ink); display: block; }
.ft-brand p { margin-top: var(--space-sm); max-width: 34ch; color: var(--ink-muted); }
.ft-socials { display: flex; gap: 0.6rem; margin-top: var(--space-md); }
.ft-socials a {
  width: 42px; height: 42px; border-radius: 50%; background: var(--paper-2);
  display: grid; place-items: center; color: var(--ink);
  transition: background var(--dur-mid) var(--ease-out-quart),
              color var(--dur-mid) var(--ease-out-quart);
}
.ft-socials a:hover { background: var(--navy-800); color: #fff; }
.ft-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.ft-h {
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 0.9rem; font-weight: 600;
}
.ft-col a {
  display: block; padding: 0.6rem 0; color: var(--ink); opacity: 0.82;
  transition: opacity var(--dur-fast) var(--ease-out-quart);
}
.ft-col a:hover { opacity: 1; }
.ft-base {
  width: var(--shell); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  display: grid; grid-template-columns: auto 1fr; align-items: end;
  gap: var(--space-md); border-top: 1px solid var(--line-ink);
  padding-top: var(--space-md);
  padding-bottom: clamp(4.5rem, 9vw, 5.5rem);
}
.ft-big {
  font-size: clamp(3rem, 9vw, 7rem); line-height: 0.8; font-weight: 700;
  letter-spacing: -0.05em; color: var(--paper-3);
}
.ft-legal {
  display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end;
  color: var(--ink-muted); font-size: 0.88rem; text-align: right;
}
.ft-links { display: flex; gap: 1.1rem; }

/* ================================ REVEAL ================================= */
html.motion-ready .reveal { opacity: 0; transform: translateY(26px); }
html.motion-ready .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease-out-quart), transform 620ms var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* =============================== RESPONSIVE ============================== */
@media (max-width: 900px) {
  .speaker, .speaker--flip {
    grid-template-columns: 1fr; text-align: left; gap: var(--space-md);
  }
  .speaker--flip .speaker-visual { order: 0; }
  .speaker--flip .speaker-body { order: 1; text-align: left; align-items: flex-start; }
  .speaker-visual { max-width: 220px; }
  .ft-in { grid-template-columns: 1fr; gap: var(--space-lg); }
}

@media (max-width: 720px) {
  :root { --hdr-h: 64px; }
  .hdr .pill.ghost { display: none; }
  .final-actions { flex-direction: column; align-items: stretch; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
  .ft-base { grid-template-columns: 1fr; align-items: start; }
  .ft-legal { align-items: flex-start; text-align: left; }
}

@media (max-width: 380px) {
  .ft-cols { grid-template-columns: 1fr; }
  .hdr-in { gap: 0.5rem; }
}

/* ============================= REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .reveal { opacity: 1; transform: none; }
  html.motion-ready .reveal.in { transition: opacity 120ms linear; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ====================== NAV BAR (header, remplace la floatnav) ============ */
.hdr-left { display: flex; align-items: center; gap: clamp(0.7rem, 1.8vw, 1.6rem); min-width: 0; }
.hdr-nav { display: flex; align-items: center; gap: 0.15rem; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px;
  border-radius: 100px; font-weight: 600; font-size: 0.94rem; white-space: nowrap;
  opacity: 0.8;
  transition: opacity var(--dur-fast) var(--ease-out-quart), background var(--dur-fast) var(--ease-out-quart);
}
.nav-link:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.nav-link.is-active { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.nav-burger {
  display: none; width: 44px; height: 44px; flex: none;
  border-radius: 12px; place-items: center;
}
.nav-burger:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.nav-burger svg path { transform-origin: center; transition: transform 300ms var(--ease-out-quart), opacity 200ms linear; }
.nav-burger[aria-expanded="true"] .nb-l1 { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nb-l2 { opacity: 0; }
.nav-burger[aria-expanded="true"] .nb-l3 { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-burger { display: grid; }
  .hdr-nav {
    position: absolute; top: calc(var(--hdr-h, 80px) - 10px); left: 5vw;
    min-width: 232px; flex-direction: column; align-items: stretch; gap: 0.15rem;
    padding: 0.5rem; border-radius: 16px;
    background: var(--navy-800); color: #fff;
    box-shadow: 0 30px 60px -30px rgba(2, 16, 31, 0.7);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--dur-mid) var(--ease-out-quart),
                transform var(--dur-mid) var(--ease-out-quart),
                visibility 0s linear var(--dur-mid);
  }
  .hdr-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .hdr-nav .nav-link { border-radius: 10px; min-height: 46px; }
}

/* Typographie : selection aux couleurs de la charte, titres equilibres. */
::selection { background: var(--gold); color: var(--navy-900); }
h1, h2, h3 { text-wrap: balance; }

/* Nav "studio" (référence Alethia) : liens centrés en mono uppercase,
   le logo tient lieu de lien Accueil sur desktop. */
:root { --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; }
.nav-link, .hdr .pill {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
@media (min-width: 1081px) {
  /* Le logo tient lieu de lien Accueil hors mobile. */
  .hdr-nav > .nav-link:first-child { display: none; }
}
@media (min-width: 1280px) {
  .hdr-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}

/* Menu à groupes déroulants (référence Alethia) + CTA header "Parlons-en". */
.nav-grp { position: relative; }
.nav-grp-btn { display: inline-flex; align-items: center; gap: 0.45rem; }
.nav-grp-btn svg { transition: transform var(--dur-mid) var(--ease-out-quart); }
.nav-grp-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drop {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  padding-top: 12px; /* pont de survol entre le bouton et le panneau */
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-mid) var(--ease-out-quart),
              transform var(--dur-mid) var(--ease-out-quart),
              visibility 0s linear var(--dur-mid);
}
.nav-grp:hover .nav-drop, .nav-grp:focus-within .nav-drop, .nav-grp.is-open .nav-drop {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav-drop-link {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  padding: 0.95rem 1.1rem; border-radius: 10px;
  background: rgba(10, 47, 92, 0.92); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--dur-fast) var(--ease-out-quart);
}
.nav-drop-link:hover, .nav-drop-link.is-active { background: var(--navy-600); }
body[data-theme="light"] .nav-drop-link {
  background: #fff; color: var(--ink);
  box-shadow: 0 18px 40px -24px rgba(4, 26, 53, 0.45), inset 0 0 0 1px var(--line-ink);
}
body[data-theme="light"] .nav-drop-link:hover,
body[data-theme="light"] .nav-drop-link.is-active { background: var(--paper-2); }

.hdr-login, .hdr-call {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.hdr-login { padding: 0.55rem 0.8rem; border-radius: 10px; opacity: 0.85; min-height: 44px; }
.hdr-login:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.hdr-call { gap: 0.75rem; min-height: 44px; }
.hdr-call-chip {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--gold); color: var(--navy-900);
  transition: transform var(--dur-mid) var(--ease-out-quart), background var(--dur-mid) var(--ease-out-quart);
}
.hdr-call:hover .hdr-call-chip { transform: translateX(3px); background: var(--gold-soft); }
@media (max-width: 720px) { .hdr-login { display: none; } }
@media (max-width: 1080px) {
  /* Menu mobile : les groupes s'aplatissent en liste simple. */
  .hdr-nav .nav-link { opacity: 1; }
  .nav-grp { display: contents; }
  .nav-grp-btn { display: none; }
  .nav-drop {
    position: static; min-width: 0; padding-top: 0;
    opacity: 1; visibility: visible; transform: none;
    gap: 0.15rem; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav-drop-link { background: none; min-height: 46px; display: flex; align-items: center; padding: 0.6rem 0.9rem; }
  body[data-theme="light"] .nav-drop-link { background: none; box-shadow: none; color: #fff; }
  .nav-drop-link:hover, .nav-drop-link.is-active { background: color-mix(in srgb, currentColor 14%, transparent); }
}

/* Menu mobile plein écran (référence Alethia) : grands liens sans mono,
   séparateurs fins, groupes en accordéon, CTA "Parlons-en" ancré en bas. */
.nav-cta { display: none; }
@media (max-width: 1080px) {
  .hdr-nav {
    position: fixed; inset: 0; width: 100vw; height: 100svh; min-width: 0;
    padding: calc(var(--hdr-h) + 1.5rem) 5vw calc(1.8rem + env(safe-area-inset-bottom, 0px));
    border-radius: 0; background: var(--navy-900); color: #fff;
    box-shadow: none; transform: translateY(-6px);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    overflow-y: auto; overscroll-behavior: contain;
    z-index: -1; /* la barre du header (logo, croix, CTA) reste au-dessus */
  }
  .hdr-nav.is-open { transform: none; }
  .hdr-nav > .nav-link, .hdr-nav .nav-grp-btn {
    font-family: var(--font); font-size: clamp(1.7rem, 7.5vw, 2.4rem); font-weight: 500;
    letter-spacing: -0.02em; text-transform: none; opacity: 1;
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: 0; padding: 1.15rem 0.2rem; border-radius: 0;
    border-bottom: 1px solid var(--line-navy);
  }
  .nav-grp { display: block; }
  .nav-grp-btn { display: flex; }
  .nav-grp-btn svg { width: 24px; height: 24px; opacity: 0.8; }
  .nav-drop {
    display: none; position: static; min-width: 0; padding: 0.4rem 0.2rem 1.1rem;
    opacity: 1; visibility: visible; transform: none; gap: 6px;
    border-bottom: 1px solid var(--line-navy);
  }
  .nav-grp.is-open .nav-drop { display: flex; }
  .nav-grp.is-open .nav-grp-btn { border-bottom-color: transparent; }
  .nav-drop-link { background: rgba(10, 47, 92, 0.6); }
  .hdr-nav > .nav-link.is-active, .nav-grp-btn.is-active { background: none; color: var(--gold-soft); }
  .nav-cta {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 0.9rem;
    font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--gold); color: var(--navy-900);
    padding: 0.55rem 0.6rem 0.55rem 1.25rem; border-radius: 14px;
  }
  .nav-cta-chip {
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    display: grid; place-items: center;
    background: var(--navy-900); color: #fff;
  }
}

/* Bouton header "Se connecter" : même construction que "Parlons-en"
   (texte + puce flèche), en version neutre pour laisser l'or au CTA. */
.hdr-login { gap: 0.75rem; padding: 0; border-radius: 0; opacity: 1; }
.hdr-login:hover { background: none; opacity: 1; }
.hdr-login-chip {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent);
  transition: transform var(--dur-mid) var(--ease-out-quart), background var(--dur-mid) var(--ease-out-quart);
}
.hdr-login:hover .hdr-login-chip { transform: translateX(3px); background: color-mix(in srgb, currentColor 22%, transparent); }

/* Le menu à 4 entrées est plus large : centré seulement à partir de 1440px,
   sinon il resterait collé aux boutons de droite. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .hdr-nav { position: static; transform: none; }
}

/* Le CTA "Parlons-en" du header a été retiré : "Se connecter" reste
   visible sur mobile (la place est libre à droite du logo). */
@media (max-width: 720px) { .hdr-login { display: inline-flex; } }

/* Signature de bas de page : le nom complet plutôt que le sigle. */
.ft-big { font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 0.95; }

/* Nom complet dans le header dès qu'il y a la place, sigle en dessous.
   Sans cette règle les deux libellés s'affichent l'un après l'autre. */
.logo-full { display: none; }
@media (min-width: 1200px) {
  .hdr .logo-full { display: inline; }
  .hdr .logo-abbr { display: none; }
  .hdr .logo { font-size: 1.05rem; letter-spacing: -0.02em; }
}

/* ============================ ACCENT EN DÉGRADÉ ============================
   L'accent n'est plus un aplat : c'est un dégradé de bleus. Les boutons
   pleins portent le dégradé sur une surface deux fois plus large que le
   bouton, et le survol fait voyager ce dégradé à l'intérieur (plus un reflet
   qui traverse) au lieu de basculer d'un aplat à un autre.
   Les bleus restent volontairement clairs : le texte des boutons est navy. */
:root {
  --grad-accent: linear-gradient(115deg, #6aa8e4 0%, #8fc0ee 42%, #b7d7f5 72%, #7ab1e8 100%);
  --grad-accent-text: linear-gradient(105deg, #7ab1e8 0%, #a9cdf2 45%, #d6e9fb 100%);
}

.pill.solid {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--gold);
  background-image: var(--grad-accent);
  background-size: 220% 100%;
  background-position: 0% 50%;
  transition: background-position 750ms var(--ease-out-quart),
              box-shadow var(--dur-mid) var(--ease-out-quart),
              transform var(--dur-mid) var(--ease-out-quart);
}
.pill.solid:hover {
  /* background-size répété : la règle historique utilise le raccourci
     `background`, qui remet la taille à `auto` et fige le dégradé. */
  background-image: var(--grad-accent);
  background-size: 220% 100%;
  background-position: 100% 50%;
  box-shadow: 0 14px 30px -14px rgba(122, 177, 232, 0.75);
}
/* Reflet : passe au-dessus du fond, sous le texte (z-index négatif). */
.pill.solid::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.4) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 900ms var(--ease-out-quart);
}
.pill.solid:hover::after { transform: translateX(130%); }

/* Pastilles fléchées : même dégradé, qui glisse au survol du parent. */
.hero-cta-chip, .nav-cta-chip, .of-arrow, .plan-badge {
  background-image: var(--grad-accent);
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 700ms var(--ease-out-quart),
              transform var(--dur-mid) var(--ease-out-quart);
}
.hero-cta:hover .hero-cta-chip,
.nav-cta:hover .nav-cta-chip,
.of-card:hover .of-arrow { background-position: 100% 50%; }

/* Les grands chiffres etaient remplis d'un degrade decoupe sur le texte.
   C'est un tic d'epoque, et il coute en lisibilite : le degrade delave le bas
   des glyphes. Aplat d'accent, la taille suffit a les faire ressortir. */
.hero-title .gold,
.partner-stat strong,
.phero-strip .stat strong,
.bc-stat strong,
.stat-num { color: var(--gold); }

/* Liens et boutons secondaires : le survol fait monter une nappe colorée
   depuis le bas plutôt que de repeindre le fond d'un coup. */
.pill.ghost {
  position: relative; overflow: hidden; isolation: isolate;
  transition: box-shadow var(--dur-mid) var(--ease-out-quart),
              color var(--dur-mid) var(--ease-out-quart),
              transform var(--dur-mid) var(--ease-out-quart);
}
.pill.ghost::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grad-accent);
  opacity: 0; transform: translateY(38%);
  transition: opacity 420ms var(--ease-out-quart), transform 520ms var(--ease-out-quart);
}
.pill.ghost:hover::after { opacity: 0.9; transform: none; }
.pill.ghost:hover { color: var(--gold-ink); box-shadow: inset 0 0 0 1.5px transparent; }

@media (prefers-reduced-motion: reduce) {
  .pill.solid, .pill.solid::after, .pill.ghost::after,
  .hero-cta-chip, .nav-cta-chip, .of-arrow { transition: none; }
  .pill.solid::after { display: none; }
}

/* ===================== MENU : TRAIT PLUTÔT QUE PASTILLE =====================
   Plus de fond arrondi autour des entrées : le survol et la page courante
   sont marqués par un trait fin qui se déploie sous le libellé. Rien ne
   reste "surligné" après un clic (voir le bloc :focus plus bas). */
@media (min-width: 1081px) {
  .hdr-nav { gap: 0.9rem; }
  .nav-link {
    position: relative; border-radius: 0; padding: 0 2px; background: none;
    transition: opacity var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
  }
  .nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 1.5px;
    background: var(--grad-accent-text); border-radius: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform 380ms var(--ease-out-quart);
  }
  .nav-link:hover, .nav-link.is-active { background: none; opacity: 1; }
  .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
  /* Le chevron ne doit pas être souligné avec le libellé. */
  .nav-grp-btn::after { right: 18px; }
  .nav-grp-btn[aria-expanded="true"]::after { transform: scaleX(1); }
}

/* Après un clic à la souris, plus aucune trace : l'anneau de focus n'apparaît
   que pour la navigation au clavier (:focus-visible). */
:focus:not(:focus-visible) { outline: none; }
.nav-link:focus:not(:focus-visible),
.pill:focus:not(:focus-visible),
.nav-drop-link:focus:not(:focus-visible),
.hdr-login:focus:not(:focus-visible),
.acc-head:focus:not(:focus-visible),
.formats-tab:focus:not(:focus-visible),
.filters button:focus:not(:focus-visible) { outline: none; background-color: transparent; }
.pill.solid:focus:not(:focus-visible) { background-color: var(--gold); }

/* Le survol ne doit se déclencher que sur les appareils qui en ont un :
   sur tactile, l'état "hover" restait collé après le tap. */
@media (hover: none) {
  .nav-link:hover::after { transform: scaleX(0); }
  .nav-link.is-active::after { transform: scaleX(1); }
  .pill.solid:hover { background-position: 0% 50%; }
  .pill.solid:hover::after { transform: translateX(-130%); }
  .pill.ghost:hover::after { opacity: 0; transform: translateY(38%); }
  .pill.ghost:hover { color: inherit; }
}

/* ===================== TYPOGRAPHIE UNIFIÉE (la home fait foi) =============
   Les autres pages composaient leurs grands titres en Fraunces (serif) alors
   que la home est en General Sans. On neutralise le token serif : tout ce qui
   l'utilisait bascule sur la grotesque, avec la graisse et l'interlettrage
   des titres de la home (500 / -0.035em). Fraunces n'est plus chargé. */
:root { --font-serif: var(--font); }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; }
.hero-title, .shero-title, .phero-title, .bc-title, .don-title, .pricing-title,
.statement-title, .focus-title, .collage-title, .prose-title, .gallery-title,
.join-title, .social-title, .netw-title, .formats-title, .inst-title,
.reasons-title, .faq-title, .final-title, .legal-title, .auth-head h1 {
  font-family: var(--font); font-weight: 500; letter-spacing: -0.03em;
}

/* ================= PLUS DE FLÈCHES EN PASTILLE ==========================
   Les puces fléchées accolées aux boutons (header, hero, cartes offres)
   sont retirées du HTML ; on neutralise ici les styles qui les portaient et
   on rend au bouton du hero un fond plein, sans flou de fond. */
.hdr-login-chip, .nav-cta-chip, .hero-cta-chip, .of-arrow { display: none; }
.hdr-login { gap: 0; }
.hero-cta {
  gap: 0; padding: 0.9rem 1.6rem; border-radius: 12px;
  background-color: transparent; background-image: var(--grad-accent);
  background-size: 220% 100%; background-position: 0% 50%;
  color: var(--gold-ink); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-position 700ms var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-mid) var(--ease-out-quart);
}
.hero-cta:hover {
  /* La regle historique .hero-cta:hover utilisait le raccourci background,
     qui remet background-image a none : sans ce rappel, le degrade
     disparaissait au survol et le bouton s'effacait. */
  background-color: transparent; background-image: var(--grad-accent);
  background-size: 220% 100%; background-position: 100% 50%;
  transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(122, 177, 232, 0.8);
}
@media (max-width: 1080px) {
  .nav-cta { gap: 0; padding: 0.7rem 1.25rem; }
}
@media (hover: none) {
  .hero-cta:hover { background-position: 0% 50%; transform: none; }
}

/* ===================== "SE CONNECTER" : BOUTON VERRE =====================
   Le lien du header redevient un bouton, en verre dépoli : fond translucide
   pris sur la couleur courante, fin liseré et flou de fond, pour qu'il tienne
   aussi bien sur une photo sombre que sur une section claire. */
.hdr-login {
  padding: 0.55rem 1.05rem; border-radius: 12px; min-height: 40px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  transition: background var(--dur-mid) var(--ease-out-quart),
              box-shadow var(--dur-mid) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
}
.hdr-login:hover {
  background: color-mix(in srgb, currentColor 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent);
  transform: translateY(-1px);
}
@media (hover: none) { .hdr-login:hover { transform: none; } }

/* Le CTA "Parlons-en" a été retiré du menu mobile. */
.nav-cta { display: none !important; }

/* =========================================================================
   INTERVENANTS — refonte : vidéo de présentation + grille complète filtrable
   Chaque visage est un lien vers la source qui fait autorité sur la personne
   (Wikipédia ou LinkedIn), et chaque carte renvoie vers sa conférence.
   ========================================================================= */

/* ------------------------------- VIDÉO --------------------------------- */
.sp-video { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--navy-800); color: #fff; }
.sp-video-in {
  width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 1fr minmax(240px, 340px);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.sp-video-kicker {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-soft);
  display: flex; align-items: center; gap: 0.7rem;
}
.sp-video-kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.sp-video-title { margin-top: var(--space-md); font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.05; }
.sp-video-p { margin-top: var(--space-md); max-width: 52ch; color: var(--on-navy-soft); line-height: 1.6; }
.sp-video-p em { font-style: italic; color: #fff; }
.sp-video-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: var(--space-lg); }
.sp-video-frame { margin: 0; }
.sp-video-frame video {
  width: 100%; height: auto; display: block; border-radius: var(--r-media);
  background: #000; box-shadow: 0 40px 70px -46px rgba(0, 0, 0, 0.9);
}
.sp-video-frame figcaption { margin-top: 0.8rem; font-size: 0.85rem; color: var(--on-navy-mute); line-height: 1.45; }

/* ------------------------------- GRILLE -------------------------------- */
.sp { padding: var(--space-2xl) 0; background: var(--paper); }
/* La page ouvre sur la grille (hero retiré) : dégager le header fixe. */
.sp--first { padding-top: calc(var(--hdr-h) + clamp(2.5rem, 5vw, 4rem)); }
.sp-in { width: var(--shell); margin: 0 auto; }
.sp-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sp-kicker {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-deep);
}
.sp-title { margin-top: var(--space-sm); font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--ink); }
.sp-lead { margin-top: var(--space-md); color: var(--ink-muted); font-size: 1.05rem; line-height: 1.6; }

.sp-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-lg); }
.sp-filter {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0 1rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--paper-2); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-ink);
  transition: color var(--dur-mid) var(--ease-out-quart), background var(--dur-mid) var(--ease-out-quart);
}
.sp-filter span { font-size: 0.68rem; opacity: 0.65; }
.sp-filter:hover { color: var(--ink); }
.sp-filter.is-active { background: var(--navy-900); color: #fff; box-shadow: none; }
.sp-filter.is-active span { opacity: 0.75; }

.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(1.2rem, 2.4vw, 1.8rem); }
.sp-card {
  display: flex; flex-direction: column;
  border-radius: var(--r-card); overflow: hidden;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-ink);
  transition: transform var(--dur-mid) var(--ease-out-quart), box-shadow var(--dur-mid) var(--ease-out-quart);
}
.sp-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(38, 96, 165, 0.35), 0 26px 46px -34px rgba(4, 26, 53, 0.55); }
.sp-card.is-hidden { display: none; }

.sp-visual { position: relative; display: block; overflow: hidden; background: var(--navy-800); }
.sp-photo { width: 100%; height: clamp(200px, 22vw, 260px); object-fit: cover; object-position: center 22%; display: block; }
.sp-visual--lien .sp-photo { transition: transform 700ms var(--ease-out-quart), filter var(--dur-mid) var(--ease-out-quart); }
/* Le léger zoom de la photo suffit à signaler que la carte est cliquable :
   la pastille « Wikipédia » / « LinkedIn » a été retirée (demande de Tom,
   08/2026), la destination reste annoncée par l'aria-label du lien. */
.sp-visual--lien:hover .sp-photo { transform: scale(1.05); filter: saturate(1.05); }

.sp-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.2rem 1.2rem; flex: 1; }
.sp-tag {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep);
}
.sp-namerow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.sp-name { font-size: 1.1rem; color: var(--ink); line-height: 1.15; }
.sp-logo { width: 26px; height: 26px; object-fit: contain; flex: none; }
.sp-role { font-size: 0.9rem; color: var(--ink); }
.sp-org { font-size: 0.88rem; color: var(--ink-muted); }

.sp-event {
  display: flex; flex-direction: column; gap: 0.15rem;
  margin-top: auto; padding-top: 0.9rem;
  border-top: 1px solid var(--line-ink);
  font-size: 0.85rem; line-height: 1.35;
}
.sp-event-lab {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.sp-event-tit { color: var(--gold-deep); font-weight: 600; }
.sp-event:hover .sp-event-tit { text-decoration: underline; text-underline-offset: 3px; }
.sp-event-date { color: var(--ink-muted); font-size: 0.82rem; }
.sp-event--vide { color: var(--ink-muted); font-style: italic; }

.sp-note { margin-top: var(--space-lg); color: var(--ink-muted); font-size: 0.95rem; }
.sp-note a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .sp-video-in { grid-template-columns: 1fr; }
  .sp-video-frame { max-width: 320px; }
}
@media (max-width: 560px) {
  .sp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
  .sp-body { padding: 0.9rem; }
  .sp-name { font-size: 0.98rem; }
}

/* =========== SOCLE D'INTERACTION (Web Interface Guidelines) ==============
   Manques releves par la revue et communs a toutes les feuilles.

   color-scheme: only light — le site est sur fond blanc. Sans cette
   declaration, macOS et Windows en theme sombre repeignent les controles
   natifs (champs de connexion, listes deroulantes, barres de defilement) en
   sombre sur nos pages claires.

   touch-action: manipulation supprime le delai de 300 ms que le navigateur
   mobile s'accorde pour guetter un double-tap sur les elements cliquables.

   Les encoches : le header est fixe et les heros sont plein cadre, donc le
   contenu passait sous la barre systeme en paysage sur iPhone. */
:root { color-scheme: only light; }

a, button, label, summary, [role="button"], [role="tab"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(4, 26, 53, 0.12);
}

.hdr-in { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.ft { padding-bottom: env(safe-area-inset-bottom); }

/* Les chiffres qui se comparent d'une colonne a l'autre doivent s'aligner :
   sans tabular-nums, les chasses variables decalent les bandeaux de stats. */
.cstat strong, .stat strong, .cstats-in strong,
.univ-fig dt, .tier-price, .plan-price .amount { font-variant-numeric: tabular-nums; }