/* Hallmark · macrostructure: Dark Canvas Agenda + Curved Drag Gallery (variant du systeme SSB)
 * Hallmark · pre-emit critique: P5 H5 E5 S4 R4 V5
 * Page "Nos evenements" — Sorbonne Sport Business.
 * Memes tokens/chrome que le reste du site, mais cette page reste presque
 * entierement sombre (hero, agenda, galerie, CTA) : c'est le calendrier vu
 * comme un vrai lieu, pas une liste administrative. Elevation par surfaces
 * (navy-700/800 sur navy-900), pas par alternance clair/sombre. Trois
 * signatures propres : carte "prochain rendez-vous" dans le hero, jauges
 * d'inscription animees en or, galerie courbe qu'on fait glisser (souris,
 * tactile, molette, fleches). Chiffres et evenements reels du site, aucune
 * invention.
 * ========================================================================= */

*, *::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(--navy-900);
  color: #fff;
  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, h4 {
  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; }
.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-950); 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),
              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; color: #fff;
  background: rgba(4, 26, 53, 0.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.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; } }
.hdr .pill.ghost { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }

/* ============================ HERO ================================ */
.hero { position: relative; overflow: hidden; min-height: 100svh; display: flex; align-items: flex-end; }
.hero-media { position: absolute; inset: 0; z-index: var(--z-media); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(2, 16, 31, 0.5) 0%, rgba(4, 26, 53, 0.78) 55%, var(--navy-900) 98%);
}
.hero-in {
  position: relative; z-index: var(--z-content); width: var(--shell); margin: 0 auto;
  padding: calc(var(--hdr-h) + 4rem) 0 clamp(3.5rem, 7vw, 6rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md);
}
.hero-kicker {
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-soft);
  text-transform: uppercase;
}
.hero-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.4rem, 5.6vw, 5rem); letter-spacing: -0.01em; line-height: 1.04; max-width: 20ch; }
.hero-sub { color: var(--on-navy-soft); font-size: clamp(1.02rem, 1.4vw, 1.25rem); max-width: 42ch; line-height: 1.55; letter-spacing: 0.01em; }

/* Gros appel à l'action du hero, à la place de l'ancienne carte vitrée
   « prochain rendez-vous ». La flèche avance au survol. */
/* .hero-in est deja en flex colonne aligne a gauche, avec sa gouttiere :
   inutile de reposer align-self ni une marge haute complete. */
.hero-cta {
  margin-top: 0.4rem;
  display: inline-flex; align-items: center; gap: 0.85rem;
  min-height: 64px; padding: 0 2rem; border-radius: 14px;
  background: var(--gold); color: var(--gold-ink);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem); font-weight: 600; letter-spacing: -0.01em;
  transition: background var(--dur-mid) var(--ease-out-quart),
              transform var(--dur-mid) var(--ease-out-quart),
              box-shadow var(--dur-mid) var(--ease-out-quart);
}
.hero-cta svg { transition: transform var(--dur-mid) var(--ease-out-quart); }
.hero-cta:hover {
  background: var(--gold-soft); transform: translateY(-2px);
  box-shadow: 0 16px 34px -16px rgba(122, 177, 232, 0.75);
}
.hero-cta:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .hero-cta, .hero-cta svg { transition: none; }
  .hero-cta:hover { transform: none; }
  .hero-cta:hover svg { transform: none; }
}

/* ============================ AGENDA =============================== */
.agenda { padding: var(--space-2xl) 0; }
.agenda-in { width: var(--shell); margin: 0 auto; }
.agenda-head { max-width: 60ch; margin-bottom: var(--space-lg); }
.agenda-kicker {
  display: inline-block; border: 1.5px solid rgba(255, 255, 255, 0.24); color: var(--on-navy-soft);
  border-radius: 100px; padding: 0.4rem 1rem; font-size: 0.85rem; font-weight: 600;
  margin-bottom: var(--space-md);
}
.agenda-title { font-size: clamp(2rem, 4.4vw, 3.6rem); }

.filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-lg);
}
.filters button {
  min-height: 44px; padding: 0.55rem 1.1rem; border-radius: 100px; font-size: 0.9rem; font-weight: 600;
  color: var(--on-navy-soft); box-shadow: inset 0 0 0 1.5px var(--line-navy);
  transition: background var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart);
}
.filters button:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); color: #fff; }
.filters button.is-active { background: var(--gold); color: var(--gold-ink); box-shadow: none; }

.ev-month {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-navy-mute); margin: var(--space-lg) 0 var(--space-sm);
}
.ev-month:first-child { margin-top: 0; }
.ev-row {
  display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: var(--space-md);
  padding: 1.2rem 1.4rem; border-radius: var(--r-card); background: var(--navy-800);
  margin-bottom: 0.7rem;
  transition: background var(--dur-mid) var(--ease-out-quart), transform var(--dur-mid) var(--ease-out-quart);
}
.ev-row:hover { background: var(--navy-700); transform: translateX(4px); }
.ev-row--past { opacity: 0.72; }
.ev-row--full .gauge-fill { background: var(--on-navy-mute); }
.ev-date { display: flex; flex-direction: column; align-items: center; line-height: 1; font-variant-numeric: tabular-nums; }
.ev-date .d { font-size: 1.7rem; font-weight: 600; color: var(--gold); }
.ev-date .m { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--on-navy-mute); margin-top: 0.2rem; }
.ev-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ev-tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-soft); }
.ev-body h4 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: #fff; font-weight: 600; letter-spacing: -0.01em; }
.ev-meta { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.86rem; color: var(--on-navy-mute); }
.ev-aside { display: flex; align-items: center; }
.gauge { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-end; min-width: 140px; }
.gauge-bar { width: 140px; height: 4px; border-radius: 100px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.gauge-fill { display: block; height: 100%; width: 0%; background: var(--gold); border-radius: 100px; transition: width 1.1s var(--ease-out-quart); }
.gauge-cap { font-size: 0.78rem; color: var(--on-navy-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.agenda-note { margin-top: var(--space-md); font-size: 0.9rem; color: var(--on-navy-mute); max-width: 62ch; }

/* ============================ GALERIE 3D =========================== */
.g3d-section { padding: 0 0 var(--space-2xl); }
.g3d-head {
  width: var(--shell); margin: 0 auto var(--space-lg);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
}
.g3d-title { font-size: clamp(1.8rem, 3.8vw, 3.2rem); max-width: 20ch; }
.g3d-nav { display: flex; gap: 0.5rem; }
.g3d-nav button {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  transition: background var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart);
}
.g3d-nav button:hover { background: var(--gold); color: var(--gold-ink); transform: translateY(-2px); }

.gallery3d {
  position: relative; height: clamp(280px, 42vw, 420px); overflow: hidden; cursor: grab;
  touch-action: pan-y;
}
.gallery3d.is-grab { cursor: grabbing; }
.gallery3d-track { position: absolute; inset: 0; }
.gallery3d-track figure {
  position: absolute; top: 50%; left: 50%; width: min(300px, 42vw); border-radius: var(--r-media);
  overflow: hidden; box-shadow: 0 40px 70px -30px rgba(2, 16, 31, 0.8);
  will-change: transform, opacity;
}
.gallery3d-track img { width: 100%; height: clamp(190px, 26vw, 260px); object-fit: cover; }
.gallery3d-track figcaption {
  padding: 0.7rem 0.9rem; background: var(--navy-800); color: var(--on-navy-soft);
  font-size: 0.82rem; font-weight: 500;
}
.gallery3d-track figure.is-active figcaption { color: #fff; }
.g3d-hint { width: var(--shell); margin: var(--space-md) auto 0; font-size: 0.82rem; color: var(--on-navy-mute); text-align: center; }

/* =============================== CTA FINAL =============================== */
.final { position: relative; overflow: hidden; }
.final-media { position: absolute; inset: 0; z-index: var(--z-media); }
.final-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.final-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 39, 80, 0.9), rgba(4, 26, 53, 0.96));
}
.final-in {
  position: relative; z-index: var(--z-content); width: var(--shell); margin: 0 auto;
  padding: var(--space-2xl) 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--space-lg);
}
.final-title { font-size: clamp(2.4rem, 6vw, 4.8rem); max-width: 16ch; }
.final-sub { color: var(--on-navy-soft); font-size: clamp(1rem, 1.5vw, 1.25rem); max-width: 46ch; }
.final-actions { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }

/* ================================= 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.03em; 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: 1024px) {
  .ev-row { grid-template-columns: 56px 1fr; }
  .ev-aside { grid-column: 1 / -1; justify-content: flex-start; margin-top: 0.3rem; }
  .gauge { align-items: flex-start; }
  .ft-in { grid-template-columns: 1fr; gap: var(--space-lg); }
}

@media (max-width: 720px) {
  :root { --hdr-h: 64px; }
  .hdr .pill.ghost { display: none; }
  .hero { min-height: 100svh; }
  .hero-in { padding-top: calc(var(--hdr-h) + 2.5rem); }
  .filters { gap: 0.4rem; }
  .filters button { padding: 0.45rem 0.85rem; font-size: 0.84rem; }  /* min-height 44px herite */
  .final-actions { flex-direction: column; align-items: flex-start; }
  .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; }
  .gallery3d { height: clamp(220px, 60vw, 320px); }
}

@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; }
  .hero-media img { transform: none; }
  *, *::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; }

/* ===================== ÉVÉNEMENTS PASSÉS : DATE AU MOIS ==================
   Les conférences déjà tenues sont datées au mois : LinkedIn, d'où viennent
   ces archives, n'expose pas le jour exact. On affiche donc ce que l'on sait
   plutôt qu'une date précise mais fausse. */
.ev-date--mois { display: grid; place-items: center; text-align: center; }
.ev-date--mois .m { font-size: 0.82rem; line-height: 1.25; text-transform: none; letter-spacing: 0; }
.ev-resume { margin-top: 0.5rem; font-size: 0.92rem; line-height: 1.5; color: var(--ink-muted); max-width: 62ch; }
.ev-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.88rem; font-weight: 600; color: var(--gold-deep); white-space: nowrap;
}
.ev-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ev-row:target { box-shadow: inset 0 0 0 2px var(--gold-deep); border-radius: 12px; }

/* ======================= AGENDA EN CARTES ================================
   Les événements ne sont plus des lignes de tableau mais des cartes
   cliquables, chacune menant à sa propre page. */
.ev-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 1.8rem); align-items: stretch;
}
.ev-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-card); background: var(--paper);
  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);
}
.ev-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(38, 96, 165, 0.4), 0 28px 50px -36px rgba(4, 26, 53, 0.55); }
.ev-card-media { display: block; overflow: hidden; background: var(--navy-800); }
.ev-card-media img { width: 100%; height: 168px; object-fit: cover; display: block; transition: transform 800ms var(--ease-out-quart); }
.ev-card:hover .ev-card-media img { transform: scale(1.05); }
.ev-card-body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.2rem 1.3rem 1.3rem; flex: 1; }
.ev-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ev-card-date, .ev-card-tag {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.ev-card-date { color: var(--ink); }
.ev-card-tag { padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(38, 96, 165, 0.1); color: var(--gold-deep); }
.ev-card-title { font-size: 1.08rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.ev-card-guests { font-size: 0.92rem; color: var(--ink); }
.ev-card-meta { font-size: 0.86rem; color: var(--ink-muted); line-height: 1.4; }
.ev-card-more { margin-top: auto; padding-top: 0.7rem; font-size: 0.9rem; font-weight: 600; color: var(--gold-deep); }
.ev-card:hover .ev-card-more { text-decoration: underline; text-underline-offset: 3px; }
/* Les événements passés restent lisibles mais reculent d'un plan. */
.ev-card--past .ev-card-media img { filter: saturate(0.55) brightness(0.94); }
.ev-card--past:hover .ev-card-media img { filter: none; }
.ev-card:target { box-shadow: inset 0 0 0 2px var(--gold-deep); }
.ev-empty { display: none; padding: var(--space-lg) 0; color: var(--ink-muted); }

/* =========== 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; }