/* Hallmark · macrostructure: Proof-Led Hero + Workbench Tabs (variant du systeme qui-sommes-nous)
 * Hallmark · pre-emit critique: P5 H5 E5 S4 R4 V5
 * Page "Devenir partenaire" — Sorbonne Sport Business.
 * Memes tokens/chrome que qui-sommes-nous.html (c'est le meme site), mais
 * une identite de page distincte : hero photo + preuve chiffree immediate
 * (public partenaire = decideurs, on prouve avant d'argumenter), formats en
 * onglets explorables plutot qu'en grille passive, bandeaux defilants pour
 * la sensation de reseau. Un seul CTA final, pas de faux chrome, pas de
 * carte numerotee generique.
 * ========================================================================= */

*, *::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;
  --gold-line: rgba(122, 177, 232, 0.5);

  --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);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 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, 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; }
.phero :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); }

/* Contenu réservé aux lecteurs d'écran (équivalent textuel des marquees). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 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 PHOTO + STRIP ========================== */
.phero { position: relative; background: var(--navy-900); color: #fff; overflow: hidden; }
.phero-media {
  position: absolute; inset: 0; z-index: var(--z-media);
  overflow: hidden;
}
.phero-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
}
.phero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(2, 16, 31, 0.55) 0%, rgba(4, 26, 53, 0.72) 55%, var(--navy-900) 96%);
}
.phero-in {
  position: relative; z-index: var(--z-content); width: var(--shell); margin: 0 auto;
  padding: calc(var(--hdr-h) + 5.5rem) 0 clamp(3rem, 7vw, 5rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md);
  min-height: 100svh; justify-content: flex-end;
}
.phero-kicker {
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-soft);
  text-transform: uppercase;
}
.phero-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(2.8rem, 6.8vw, 6rem); letter-spacing: -0.01em; line-height: 1.0; max-width: 16ch;
}
.phero-sub { color: var(--on-navy-soft); font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 42ch; line-height: 1.55; letter-spacing: 0.01em; }
.phero-strip {
  position: relative; z-index: var(--z-content); width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md); border-top: 1px solid var(--line-navy);
  padding: var(--space-lg) 0 clamp(2.5rem, 5vw, 4rem);
}
.phero-strip .stat { display: flex; flex-direction: column; gap: 0.35rem; }
.phero-strip .stat strong {
  font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em;
  color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums;
}
.phero-strip .stat > span { color: var(--on-navy-mute); font-size: 0.92rem; }

/* Wipe reveal : rideau qui glisse et se retire, distinct du reveal
   ligne-par-ligne de qui-sommes-nous. */
html.motion-ready [data-wipe] { position: relative; overflow: hidden; }
html.motion-ready [data-wipe]::after {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  transform: translateX(0%); z-index: 1;
}
html.motion-ready [data-wipe].is-wiped::after {
  transform: translateX(101%);
  transition: transform 760ms var(--ease-out-quart);
}

/* ============================ FORMATS (ONGLETS) =========================== */
.formats { background: var(--paper); padding: var(--space-2xl) 0; }
.formats-in { width: var(--shell); margin: 0 auto; }
.formats-head { max-width: 60ch; margin-bottom: var(--space-lg); }
.prose-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);
}
.formats-title { font-size: clamp(2rem, 4.5vw, 3.8rem); color: var(--ink); }
.formats-panel {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch;
}
.formats-tabs { position: relative; display: flex; flex-direction: column; }
.formats-rail {
  position: absolute; left: 0; top: 0; width: 3px; height: 25%;
  background: var(--gold); border-radius: 3px;
  transition: transform var(--dur-slow) var(--ease-out-quart), height var(--dur-slow) var(--ease-out-quart);
}
.formats-tab {
  text-align: left; padding: 1.3rem 0 1.3rem 1.6rem; border-bottom: 1px solid var(--line-ink);
  display: flex; align-items: baseline; gap: 1rem;
  transition: opacity var(--dur-mid) var(--ease-out-quart);
  opacity: 0.55;
}
.formats-tab:first-child { border-top: 1px solid var(--line-ink); }
.formats-tab:hover { opacity: 0.85; }
.formats-tab.is-active { opacity: 1; }
.formats-tab-body { display: flex; flex-direction: column; gap: 0.3rem; }
.formats-tab-label { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
.formats-tab-desc {
  font-size: 0.96rem; color: var(--ink-muted); max-width: 40ch;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--dur-slow) var(--ease-out-quart), opacity var(--dur-mid) var(--ease-out-quart);
}
.formats-tab.is-active .formats-tab-desc { max-height: 4rem; opacity: 1; margin-top: 0.15rem; }
.formats-stage {
  position: relative; border-radius: var(--r-media); overflow: hidden;
  background: var(--navy-700); aspect-ratio: 4 / 3.4;
}
.formats-media {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.04);
  transition: opacity var(--dur-slow) var(--ease-out-quart), transform var(--dur-slow) var(--ease-out-quart);
}
.formats-media.is-active { opacity: 1; transform: scale(1); }
.formats-media img { width: 100%; height: 100%; object-fit: cover; }

/* ================== RÉSEAU DE DÉCIDEURS (statement navy) ================= */
.netw { background: var(--navy-800); color: #fff; padding: var(--space-2xl) 0 0; }
.netw-in {
  width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-bottom: var(--space-2xl);
}
.netw-photo { border-radius: var(--r-media); overflow: hidden; background: var(--navy-700); }
.netw-photo img { width: 100%; height: min(420px, 44vw); object-fit: cover; }
.netw-title { font-size: clamp(2.2rem, 4.8vw, 4rem); }
.netw-p { color: var(--on-navy-soft); font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 46ch; margin-top: var(--space-md); }
.netw-copy .pill { margin-top: var(--space-lg); }

/* ============================ BANDEAU DÉFILANT ============================ */
.marquee {
  border-top: 1px solid var(--line-navy); overflow: hidden;
  padding: 1.3rem 0; white-space: nowrap;
}
.marquee--light { border-top: 1px solid var(--line-ink); margin-top: var(--space-lg); }
.marquee-track {
  display: inline-flex; gap: 3rem; will-change: transform;
  animation: marquee-scroll 34s linear infinite;
}
.marquee-track span {
  font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 500; letter-spacing: -0.01em;
  color: var(--on-navy-mute);
}
.marquee--light .marquee-track span { color: var(--ink-muted); }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==================== INSTITUTIONS & PARTENAIRES ========================= */
.inst { background: var(--paper); padding: clamp(3rem, 7vw, 6rem) 0 var(--space-2xl); }
.inst-head { width: var(--shell); margin: 0 auto; max-width: 62ch; }
.inst-title { font-size: clamp(2rem, 4.5vw, 3.8rem); color: var(--ink); }
.inst-p { color: var(--ink-muted); font-size: clamp(1.02rem, 1.4vw, 1.15rem); margin-top: var(--space-sm); }
.inst .marquee { width: 100%; }

/* =============================== CTA FINAL =============================== */
.final { position: relative; background: var(--navy-800); color: #fff; 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.24; }
.final-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 39, 80, 0.88), rgba(4, 26, 53, 0.95));
}
.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.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: 1024px) {
  .phero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formats-panel { grid-template-columns: 1fr; }
  .formats-stage { aspect-ratio: 16 / 9; order: -1; }
  .netw-in { grid-template-columns: 1fr; gap: var(--space-lg); }
  .ft-in { grid-template-columns: 1fr; gap: var(--space-lg); }
}

@media (max-width: 720px) {
  :root { --hdr-h: 64px; }
  .hdr .pill.ghost { display: none; }
  .phero-in { padding-top: calc(var(--hdr-h) + 3.5rem); min-height: 100svh; }
  .phero-strip { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .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; }
}

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

/* ============================= REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .reveal { opacity: 1; transform: none; }
  html.motion-ready .reveal.in { transition: opacity 120ms linear; }
  html.motion-ready [data-wipe]::after { display: none; }
  .marquee-track { animation: none; }
  .phero-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; }
}

/* Hero partenaires : double CTA (plaquette + appel). */
.phero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }

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

/* ===================== PARLONS-EN (formulaire déplacé de book-a-call) =====================
   Mêmes classes de champs que la page book-a-call pour garder le comportement
   JS (branches par profil, validation, RGPD). Le conteneur .pcontact remplace
   le hero de la page d'origine. */
:root { --danger: #c0392b; }
.pcontact { background: var(--paper); color: var(--ink); padding: var(--space-2xl) 0; }
.pcontact-in {
  width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
#parlons-en, #reserver { scroll-margin-top: calc(var(--hdr-h, 80px) + 12px); }
.bc-kicker { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-deep); text-transform: uppercase; margin-bottom: var(--space-sm); }
.bc-title { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(2.2rem, 4.4vw, 3.4rem); color: var(--ink); max-width: 16ch; }
.bc-sub { color: var(--ink-muted); font-size: 1.1rem; margin-top: var(--space-sm); margin-bottom: var(--space-lg); }
.pcontact-photo-col { border-radius: var(--r-media); overflow: hidden; position: sticky; top: calc(var(--hdr-h, 80px) + 2.5rem); }
.pcontact-photo-col img { width: 100%; height: clamp(360px, 46vw, 620px); object-fit: cover; }

.bc-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 46rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field-label { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.req { color: var(--gold-deep); }
.field-opt { font-weight: 400; color: var(--ink-muted); font-size: 0.85rem; }
.field-input, .field-textarea {
  width: 100%; padding: 0.85rem 1rem; border-radius: 12px; font-size: 1rem; font-family: inherit;
  background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-ink);
  transition: box-shadow var(--dur-fast) var(--ease-out-quart);
  scroll-margin-bottom: 100px;
}
.field-input:focus, .field-textarea:focus { box-shadow: inset 0 0 0 1.5px var(--navy-700); outline: none; }
.field-textarea { min-height: 110px; resize: vertical; }
.field-input::placeholder, .field-textarea::placeholder { color: rgba(91, 100, 114, 0.9); }
.field-error { display: none; font-size: 0.82rem; color: var(--danger); }
.field.is-invalid .field-input, .field.is-invalid .field-textarea { box-shadow: inset 0 0 0 1.5px var(--danger); }
.field.is-invalid .field-error { display: block; }
.form-branch { display: none; }
.form-branch.is-active { display: block; }
.bc-consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.86rem; color: var(--ink-muted); cursor: pointer; border-radius: 8px; }
.bc-consent.is-invalid { box-shadow: inset 0 0 0 1.5px var(--danger); padding: 0.5rem; margin: -0.5rem; color: var(--danger); }
.bc-consent input { margin-top: 0.2rem; flex: none; width: 16px; height: 16px; accent-color: var(--navy-800); }
.bc-consent a { color: var(--ink); text-decoration: underline; }
.bc-submit { align-self: flex-start; scroll-margin-bottom: 100px; }
.bc-micro { font-size: 0.82rem; color: var(--ink-muted); margin-top: -0.5rem; }
.form-feedback {
  display: none; padding: 0.9rem 1.1rem; border-radius: 12px; background: rgba(37, 130, 90, 0.1);
  color: #1c6b4c; font-size: 0.92rem; font-weight: 500;
}
.form-feedback.is-shown { display: block; }

@media (max-width: 1024px) {
  .pcontact-in { grid-template-columns: 1fr; }
  .pcontact-photo-col { position: static; order: -1; }
  .pcontact-photo-col img { height: 280px; }
}
@media (max-width: 720px) {
  .field-row { grid-template-columns: 1fr; }
}

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

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