/* Hallmark · macrostructure: Price-Led Hero + Featured Tier (variant du systeme SSB)
 * Hallmark · pre-emit critique: P5 H5 E5 S4 R5 V5
 * Page "Devenir adherent" — Sorbonne Sport Business.
 * Memes tokens/chrome que le reste du site. Signature propre : le prix
 * d'appel (2,99 €) est integre EN GRAND dans le titre du hero, pas relegue
 * a une carte plus bas. Carte Gold mise en avant par une bordure qui
 * respire (pas de translateY+shadow generique). Un seul CTA final.
 * Aucun prix ni avantage invente : donnees reelles du site.
 * ========================================================================= */

*, *::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, 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; }
.hero :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; }
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); }

/* Fond permanent minimal quand le theme est navy : evite tout texte qui
   defile "a travers" le header quand aucune section claire n'est proche. */
body[data-theme="navy"] .hdr { background: rgba(4, 26, 53, 0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* =================================== HERO ================================ */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 18% 0%, var(--navy-700) 0%, var(--navy-800) 46%, var(--navy-900) 100%);
  padding: calc(var(--hdr-h) + 4.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
.hero-in { position: relative; z-index: var(--z-content); width: var(--shell); margin: 0 auto; max-width: 52ch; }
.hero-kicker {
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-soft);
  text-transform: uppercase; margin-bottom: var(--space-sm); display: block;
}
.hero-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.4rem, 5.4vw, 4.6rem); letter-spacing: -0.01em; line-height: 1.05; }
.price-inline { color: var(--gold); font-weight: 600; }
.price-per { font-size: 0.4em; color: var(--on-navy-mute); font-weight: 500; }
.hero-sub { color: var(--on-navy-soft); font-size: clamp(1.02rem, 1.4vw, 1.25rem); margin-top: var(--space-md); max-width: 46ch; line-height: 1.55; letter-spacing: 0.01em; }
.trust-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-lg); }
.trust-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.95rem; border-radius: 100px; font-size: 0.86rem; font-weight: 600;
  color: var(--on-navy-soft); box-shadow: inset 0 0 0 1.5px var(--line-navy);
}
.trust-chip svg { color: var(--gold-soft); flex: none; }

/* ================================ PALIERS ================================= */
.pricing { padding: 0 0 var(--space-2xl); }
.pricing-in {
  width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md);
  align-items: start;
}
.plan {
  background: var(--navy-800); border-radius: var(--r-card); padding: 1.8rem 1.6rem;
  display: flex; flex-direction: column; gap: 0.9rem; position: relative;
  box-shadow: inset 0 0 0 1px var(--line-navy);
}
.plan-name { font-size: 0.95rem; font-weight: 700; color: var(--on-navy-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.plan-price { display: flex; align-items: baseline; gap: 0.4rem; }
.plan-price .amount { font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 600; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan-price .per { font-size: 0.9rem; color: var(--on-navy-mute); }
.plan-tagline { font-size: 0.94rem; color: var(--on-navy-mute); min-height: 2.6em; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 0.4rem 0 0.6rem; }
.plan-features li { position: relative; padding-left: 1.5rem; font-size: 0.92rem; color: var(--on-navy-soft); }
.plan-features li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 10px; height: 10px; border-radius: 50%;
}
.plan-features li.on::before { background: var(--gold); }
.plan-features li.off { color: var(--on-navy-mute); opacity: 0.55; }
.plan-features li.off::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-navy-mute); }
.plan .pill { margin-top: auto; justify-content: center; }

.plan--gold {
  background: linear-gradient(165deg, var(--navy-700), var(--navy-900));
  transform: translateY(-0.6rem);
  box-shadow: 0 40px 70px -30px rgba(2, 16, 31, 0.7);
}
.plan--gold::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ga, 0deg), transparent 0deg, var(--gold) 45deg, transparent 110deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.plan-badge {
  position: absolute; top: -14px; left: 1.6rem; background: var(--gold); color: var(--gold-ink);
  font-size: 0.76rem; font-weight: 700; padding: 0.35rem 0.8rem; border-radius: 100px;
  letter-spacing: 0.02em;
}

/* ============================= TROIS RAISONS ============================== */
/* --------------------------- ADHESION HELLOASSO -------------------------
   Le formulaire est servi par HelloAsso dans un iframe. La hauteur de depart
   couvre la premiere etape ; le script de la page l'ajuste ensuite au fil des
   etapes. Le cadre garde le rayon et le filet des cartes du site pour que le
   formulaire ne fasse pas piece rapportee. */
.adhesion { background: var(--paper); padding: var(--space-2xl) 0; }
.adhesion-in { width: var(--shell); margin: 0 auto; }
.adhesion-head { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.adhesion-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); color: var(--ink); max-width: 20ch; }
.adhesion-lead { margin-top: var(--space-md); max-width: 58ch; color: var(--ink-muted); font-size: 1.05rem; line-height: 1.6; }
.adhesion-cadre {
  border-radius: var(--r-card); overflow: hidden; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-ink);
}
.adhesion-cadre iframe { display: block; width: 100%; height: 780px; border: 0; }
@media (max-width: 720px) { .adhesion-cadre iframe { height: 900px; } }
/* Sortie de secours si un bloqueur empeche l'iframe de s'afficher : le meme
   formulaire, mais sur le site de HelloAsso. */
.adhesion-cta { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-md); }

.reasons { background: var(--paper); padding: var(--space-2xl) 0; }
.reasons-in { width: var(--shell); margin: 0 auto; }
.reasons-title { font-size: clamp(1.9rem, 4vw, 3.2rem); color: var(--ink); margin-bottom: var(--space-lg); max-width: 20ch; }
.reasons-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.reason-media {
  position: relative; border-radius: var(--r-media); overflow: hidden; aspect-ratio: 4 / 5;
  background: var(--navy-700); margin-bottom: 1.1rem;
}
.reason-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out-quart); }
.reason:hover .reason-media img { transform: scale(1.05); }
.reason-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 26, 53, 0) 45%, rgba(4, 26, 53, 0.82));
}
.reason-word {
  position: absolute; left: 1.1rem; bottom: 1rem; z-index: 1; color: #fff;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em;
}
.reason-text { color: var(--ink-muted); font-size: 0.98rem; max-width: 42ch; }

/* =================================== FAQ =================================== */
.faq { background: var(--paper); padding: 0 0 var(--space-2xl); }
.faq-in { width: var(--shell); margin: 0 auto; max-width: 760px; }
.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);
}
.faq-title { font-size: clamp(1.8rem, 4vw, 3rem); color: var(--ink); margin-bottom: var(--space-lg); }
.accordion { display: flex; flex-direction: column; gap: 0.7rem; }
.acc-item { background: var(--paper-2); border-radius: 16px; overflow: hidden; transition: background var(--dur-mid) var(--ease-out-quart); }
.acc-item.is-open, .acc-item:hover { background: var(--paper-3); }
.acc-head {
  width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.5rem;
  font-size: clamp(1.02rem, 1.6vw, 1.25rem); font-weight: 500; color: var(--ink); text-align: left; letter-spacing: -0.015em;
}
.acc-plus { position: relative; width: 18px; height: 18px; flex: none; }
.acc-plus::before, .acc-plus::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; transition: transform var(--dur-slow) var(--ease-out-quart); }
.acc-plus::before { top: 8px; left: 0; width: 18px; height: 2px; }
.acc-plus::after { top: 0; left: 8px; width: 2px; height: 18px; }
.acc-item.is-open .acc-plus::after { transform: scaleY(0); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out-quart); }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-inner { padding: 0 1.5rem 1.3rem 3.4rem; color: var(--ink-muted); font-size: 0.98rem; max-width: 58ch; }

/* =============================== 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.1rem, 5vw, 3.6rem); max-width: 20ch; }
.final-sub { color: var(--on-navy-soft); font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 50ch; }

/* ================================= 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) {
  .pricing-in { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  /* En pile, les paliers gardent l'ordre croissant Bronze, Silver, Gold. */
  .plan--gold { transform: none; }
  .reasons-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .ft-in { grid-template-columns: 1fr; gap: var(--space-lg); }
}

@media (max-width: 720px) {
  :root { --hdr-h: 64px; }
  .hdr .pill.ghost { display: none; }
  .acc-inner { padding-left: 1.5rem; }
  .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; }
}

/* Tarifs 2026 : mention promo Gold + CTA dans le hero. */
.hero-in > .pill { margin-top: var(--space-lg); }
.plan-promo { margin-top: 0.35rem; font-size: 0.88rem; font-weight: 600; color: var(--gold-soft); }
.plan--gold .plan-tagline { margin-top: 0.5rem; }

/* Ancres du menu : ne pas caler la section sous le header fixe. */
#paliers, #don { scroll-margin-top: calc(var(--hdr-h, 80px) + 12px); }

/* Section "Faire un don" (menu Devenir membre > Faire un don). */
.don { padding: clamp(4.5rem, 9vw, 7.5rem) 5vw; background: var(--paper-2); color: var(--ink); }
.don-in { max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.don-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -0.01em; margin-top: 0.9rem; }
.don-p { margin-top: var(--space-md); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; color: var(--ink-muted); }
.don-in .pill { margin-top: var(--space-lg); }
.don-note { margin-top: 0.9rem; font-size: 0.88rem; color: var(--ink-muted); }

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

/* ============================== PALIERS ==================================
   Adaptation de la référence "pricing" (React/Tailwind) au CSS du site :
   bascule mensuel/annuel avec pastille glissante, prix animé au changement,
   carte mise en avant par un liseré, listes "Tout X, plus :" à coches. */
.pricing {
  padding: clamp(3.5rem, 7vw, 6rem) 0 var(--space-2xl);
  /* Fond a plat : le halo bleu radial pose par-dessus etait purement
     atmospherique, un tic de gabarit. La profondeur vient des liserees. */
  background: var(--navy-900);
}
/* display:block obligatoire : la règle historique .pricing-in est une grille
   à 3 colonnes, qui transformait l'en-tête et la liste en colonnes. */
.pricing-in { width: var(--shell); margin: 0 auto; display: block; }
.pricing-head { max-width: 40ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.pricing-title {
  font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.05;
  color: #fff; /* la section est sur navy : ne pas hériter de la couleur d'encre */
}
.pricing-lead { margin-top: var(--space-sm); color: var(--on-navy-soft); font-size: 1.05rem; line-height: 1.55; }

/* Bascule mensuel / annuel : la pastille glisse d'une option à l'autre. */
.billing-switch {
  position: relative; display: inline-flex; align-items: stretch; gap: 0;
  margin-top: var(--space-lg); padding: 5px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--line-navy);
}
.billing-pin {
  position: absolute; top: 5px; left: 5px; height: calc(100% - 10px);
  border-radius: 10px; background: var(--grad-accent); background-size: 160% 100%;
  transition: transform 420ms var(--ease-out-quart), width 420ms var(--ease-out-quart);
  pointer-events: none;
}
.billing-opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1.1rem; border-radius: 10px;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-navy-soft); background: none; cursor: pointer;
  transition: color 300ms var(--ease-out-quart);
}
.billing-opt.is-active { color: var(--gold-ink); }
.billing-save {
  font-size: 0.66rem; letter-spacing: 0.04em; text-transform: none;
  padding: 0.15rem 0.45rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22); color: inherit;
}

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); align-items: start; }
/* Deux tarifs seulement (adhésion 2026/2027) : grille resserrée et centrée. */
.plans--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 1.9rem 1.7rem; border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px var(--line-navy);
}
.plan--gold {
  background: linear-gradient(168deg, rgba(122, 177, 232, 0.16) 0%, rgba(4, 26, 53, 0.2) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(122, 177, 232, 0.55), 0 30px 60px -40px rgba(122, 177, 232, 0.5);
}
.plan-badge {
  position: absolute; top: -0.85rem; left: 1.7rem;
  padding: 0.35rem 0.8rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink);
}
.plan-name { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.plan-tagline { margin-top: 0.45rem; font-size: 0.94rem; color: var(--on-navy-mute); line-height: 1.5; min-height: 3em; }
.plan-price { display: flex; align-items: baseline; margin-top: var(--space-md); }
.plan-price .amount {
  font-size: clamp(2.2rem, 3.4vw, 2.9rem); font-weight: 600; color: #fff;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  transition: opacity 220ms var(--ease-out-quart), transform 220ms var(--ease-out-quart);
}
.plan-price .cur { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 600; color: #fff; }
.plan-price.is-swapping .amount { opacity: 0; transform: translateY(-8px); }
.plan-price .per { margin-left: 0.4rem; font-size: 0.9rem; color: var(--on-navy-mute); }
.plan-promo { margin-top: 0.4rem; font-size: 0.86rem; font-weight: 600; color: var(--gold-soft); }
.plan-cta { margin-top: var(--space-lg); width: 100%; justify-content: center; }
.plan-list { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line-navy); }
.plan-list-head { font-size: 0.9rem; font-weight: 600; color: #fff; margin-bottom: 0.8rem; }
.plan-list ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.plan-list li { position: relative; padding-left: 1.9rem; font-size: 0.92rem; color: var(--on-navy-soft); line-height: 1.45; }
.plan-list li::before {
  content: ""; position: absolute; left: 0; top: 0.05rem;
  width: 1.35rem; height: 1.35rem; border-radius: 999px;
  background: rgba(122, 177, 232, 0.14);
  box-shadow: inset 0 0 0 1px rgba(122, 177, 232, 0.5);
}
.plan-list li::after {
  content: ""; position: absolute; left: 0.42rem; top: 0.42rem;
  width: 0.5rem; height: 0.28rem;
  border-left: 1.6px solid var(--gold-soft); border-bottom: 1.6px solid var(--gold-soft);
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .plans, .plans--duo { grid-template-columns: 1fr; }
  .plan-tagline { min-height: 0; }
}

/* Les paliers ouvrent la page (plus de hero) : il faut dégager le header
   fixe et laisser respirer le titre. */
.pricing { padding-top: calc(var(--hdr-h) + clamp(3rem, 6vw, 5rem)); }

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

/* En-tête des paliers : centré et compact, pour que les trois cartes tiennent
   entièrement dans un écran d'ordinateur (le titre débordait sur 3 lignes). */
.pricing-head { max-width: 64ch; margin: 0 auto clamp(1.5rem, 2.8vw, 2.2rem); text-align: center; }
.pricing-title { font-size: clamp(1.9rem, 3.2vw, 2.8rem); max-width: none; }
.pricing-lead { max-width: 58ch; margin-left: auto; margin-right: auto; }
.billing-switch { margin-top: var(--space-md); }
.pricing { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
/* Cartes légèrement resserrées, même objectif. */
.plan { padding: 1.6rem 1.5rem; }
.plan-tagline { min-height: 2.9em; }
.plan-cta { margin-top: var(--space-md); }
.plan-list { margin-top: var(--space-md); padding-top: 1rem; }
.plan-list ul { gap: 0.55rem; }
/* La promo des 6 premiers mois est un tarif mensuel. */
.pricing.is-annual .plan-promo { display: none; }
.pricing { padding-top: calc(var(--hdr-h) + clamp(1.4rem, 3vw, 2.6rem)); }

/* ============ PALIERS : LISIBILITÉ DES CTA + OFFRE ANNUELLE ==============
   Les boutons "Choisir Bronze/Silver" sont des .pill.ghost : leur libellé et
   leur liseré prenaient currentColor, soit l'encre navy de la page, donc
   navy sur navy = invisibles hors survol. Sur fond sombre, on force le blanc
   et un liseré bleuté ; le survol garde la nappe dégradée et son encre. */
.plan .pill.ghost {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(122, 177, 232, 0.55);
}
.plan .pill.ghost:hover {
  color: var(--gold-ink);
  box-shadow: inset 0 0 0 1.5px transparent;
}

/* Mention de l'offre sous la bascule, et rappel "sans engagement" juste
   sous les cartes, là où l'on décide. */
.billing-note {
  margin-top: 0.75rem; font-size: 0.88rem; color: var(--on-navy-soft);
}
.billing-note strong { color: var(--gold-soft); font-weight: 600; }
.plans-note {
  margin-top: var(--space-md); text-align: center;
  font-size: 0.92rem; color: var(--on-navy-soft);
}
.plans-note strong { color: #fff; font-weight: 600; }

/* Plein tarif barré, dans la ligne de prix et à droite de celui-ci :
   uniquement en facturation annuelle, en miroir de la promo mensuelle qui,
   elle, ne s'affiche qu'en mensuel. */
.plan-was {
  display: none; margin-left: 0.7rem;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 600;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--on-navy-mute);
  text-decoration: line-through; text-decoration-thickness: 2px;
}
.pricing.is-annual .plan-was { display: inline; }

/* Une fois l'échéance passée (data-promo-until sur la section), le JS pose
   .promo-finie : plus de -50 %, plus de barré, plein tarif annuel. */
.pricing.promo-finie .billing-save,
.pricing.promo-finie .billing-note { display: none; }
.pricing.promo-finie .plan-was { display: none !important; }

/* Écrans peu hauts (portables 900 px et moins) : on resserre l'en-tête et
   les cartes pour que les trois billets restent visibles de haut en bas
   sans défiler, mention "sans engagement" comprise. */
@media (min-width: 1081px) and (max-height: 960px) {
  .pricing { padding-bottom: clamp(2rem, 4vw, 3rem); }
  .pricing-head { margin-bottom: 1.2rem; }
  .pricing-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
  .pricing-lead { font-size: 0.98rem; }
  .billing-switch { margin-top: 0.9rem; }
  .billing-note { margin-top: 0.5rem; font-size: 0.84rem; }
  .plan { padding: 1.35rem 1.4rem; }
  .plan-tagline { min-height: 2.7em; font-size: 0.9rem; }
  .plan-list { margin-top: 1rem; padding-top: 0.85rem; }
  .plan-list ul { gap: 0.45rem; }
  .plan-list li { font-size: 0.88rem; }
  .plans-note { margin-top: 0.9rem; font-size: 0.88rem; }
}

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

/* ============ CARTES D'ADHÉSION : LES DEUX DOIVENT DONNER ENVIE ==========
   La carte étudiante concentrait tout le traitement graphique (dégradé, filet
   doré tournant, bouton plein) pendant que l'Adhérent restait un aplat
   translucide : elle se lisait comme l'option par défaut, celle qu'on ne
   choisit pas. Les deux reçoivent donc un fond travaillé, un badge et un
   bouton qui a l'air cliquable. L'étudiante garde sa primauté par son accent
   bleu, son filet et sa position plus haute.

   ATTENTION : le décalage passe par margin-top, PAS par transform. Ces cartes
   portent aussi .reveal, et html.motion-ready .reveal.in impose
   transform: none avec une spécificité plus forte : tout translateY posé ici
   serait annulé dès la fin de l'animation d'apparition. Même raison pour le
   survol, qui joue sur l'ombre et le liseré plutôt que sur un soulèvement. */
.plans--duo .plan {
  margin-top: 0.5rem;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.022) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: box-shadow var(--dur-mid) var(--ease-out-quart);
}
.plans--duo .plan:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3),
              0 30px 56px -34px rgba(2, 16, 31, 0.9);
}
/* Étudiant : la carte mise en avant, un cran plus haute et plus lumineuse. */
.plans--duo .plan--gold {
  margin-top: 0;
  background: linear-gradient(168deg, rgba(122, 177, 232, 0.2) 0%, rgba(4, 26, 53, 0.28) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(122, 177, 232, 0.6),
              0 34px 64px -38px rgba(122, 177, 232, 0.5);
}
.plans--duo .plan--gold:hover {
  box-shadow: inset 0 0 0 1.5px rgba(122, 177, 232, 0.85),
              0 38px 72px -34px rgba(122, 177, 232, 0.65);
}

/* Badge de l'Adhérent : en verre, pour ne pas concurrencer le doré de
   l'étudiante tout en donnant la même symétrie aux deux cartes. */
.plan-badge--plein {
  background-image: none;
  background-color: rgba(255, 255, 255, 0.13);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Le bouton de l'Adhérent était un simple liseré : il reçoit une nappe
   translucide au repos pour se lire comme un bouton, et garde le survol
   dégradé commun à tous les .pill.ghost du site. */
.plans--duo .plan .pill.ghost {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.32);
}

@media (max-width: 900px) {
  /* En pile, aucun décalage : il creuserait un trou entre les deux cartes. */
  .plans--duo .plan, .plans--duo .plan--gold { margin-top: 0; }
}

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

/* ===================== LES DEUX CARTES D'ADHESION ======================
   La liste des avantages etait dupliquee a l'identique dans les deux
   cartes : la seconde ne pouvait que sembler une copie fade de la premiere.
   Les avantages sont donc communs et vivent sous les deux cartes (.inclus).
   Chaque carte ne porte plus que son public, son tarif et son bouton, et les
   deux ont le meme poids : l'etudiante en bleu, la pleine en blanc.

   ATTENTION : aucun decalage par transform, ces cartes portent .reveal et
   html.motion-ready .reveal.in impose transform: none. */
.plans--duo { align-items: stretch; }
.plans--duo .plan {
  margin-top: 0; padding: clamp(1.8rem, 3vw, 2.4rem);
  transition: box-shadow var(--dur-mid) var(--ease-out-quart);
}
.plans--duo .plan-head { flex: 1 1 auto; }
.plans--duo .plan-tagline { min-height: 0; margin-top: 0.55rem; }
.plans--duo .plan-price { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); }
.plans--duo .plan-price .amount { font-size: clamp(2.6rem, 4.4vw, 3.6rem); }
.plans--duo .plan-cta { margin-top: clamp(1.2rem, 2.4vw, 1.6rem); }

/* Tarif plein : surface et liseré ivoire, aussi affirmés que le bleu d'en
   face. Le bouton est plein blanc, pas un simple liseré. */
.plans--duo .plan--plein {
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.035) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.42),
              0 34px 64px -38px rgba(255, 255, 255, 0.3);
}
.plans--duo .plan--plein:hover {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.72),
              0 38px 72px -34px rgba(255, 255, 255, 0.4);
}
.plan-badge--plein {
  background-image: none; background-color: #fff; color: var(--navy-900);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.plans--duo .plan--plein .pill.solid { background: #fff; color: var(--navy-900); }
.plans--duo .plan--plein .pill.solid:hover {
  background: #e4eefb; box-shadow: 0 12px 26px -14px rgba(255, 255, 255, 0.55);
}

/* Les avantages, une seule fois, sous les deux cartes. */
.inclus {
  max-width: 860px; margin: clamp(1.2rem, 2.4vw, 1.8rem) auto 0;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px var(--line-navy);
}
.inclus-h { font-size: 1.02rem; font-weight: 600; color: #fff; margin-bottom: 0.9rem; }
/* Une ligne par droit, separees par un filet. La grille a deux colonnes
   alignait les lignes deux a deux : un item de trois lignes en face d'un item
   d'une seule creusait un trou sous le plus court. */
.inclus-liste { list-style: none; }
.inclus-liste li {
  position: relative; padding: 0.9rem 0 0.9rem 1.75rem;
  border-top: 1px solid var(--line-navy);
  font-size: 0.98rem; color: var(--on-navy-soft); line-height: 1.5;
}
.inclus-liste li::before {
  content: ""; position: absolute; left: 0.15rem; top: 1.35rem;
  width: 0.62rem; height: 0.34rem;
  border-left: 1.8px solid var(--gold-soft); border-bottom: 1.8px solid var(--gold-soft);
  border-radius: 1px; transform: rotate(-45deg);
  background: none; box-shadow: none;
}