/* =========================================================
   NoctiPulse — Site marketing
   Dark immersif nocturne · couleurs signature · CSS pur
   ========================================================= */

:root {
  /* Site nocturne dark-only : on le déclare au navigateur pour que TOUS les
     contrôles natifs (menu <select>, autofill, barres de défilement, etc.)
     rendent en sombre — sinon ils surgissent en thème clair par défaut sur le
     fond nuit (« dark-mode partout »). */
  color-scheme: dark;

  /* Couleurs signature (identité de marque — ne changent jamais) */
  --rose: #FF2D7A;
  --violet: #7B61FF;
  --blue: #3A86FF;
  --teal: #1FE5C0;     /* présence : moi */
  --green: #00E87A;    /* présence : amis */
  --gold: #FFB800;     /* premium partenaire */
  --sport: #00E676;    /* compétition / sport (règle dure founder 2026-06-18) — jamais rose ni rouge */
  --safe: #00D4FF;     /* Safe Home — cyan sécurité (« on garde nos codes couleurs ») */

  /* Fond nuit + surfaces glassmorphism */
  --night: #070710;
  --night-2: #0c0c1a;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Texte */
  --text: #FFFFFF;
  --text-2: #A0A0B8;
  --text-3: #7d7d96; /* contraste ≥ 4.5:1 sur --night (a11y) — était #6e6e85 (4.0:1) */

  /* Gradient signature rose → violet → bleu */
  --grad: linear-gradient(100deg, var(--rose) 0%, var(--violet) 52%, var(--blue) 100%);

  --radius: 18px;
  --radius-lg: 24px;
  --maxw: 1140px;

  /* Typo (refonte anti-« AI-slop » 2026-06-17) : display caractérielle
     (Bricolage Grotesque) qui PORTE le design, corps net (Hanken Grotesk),
     mono éditorial (Geist Mono) pour les labels/kickers. */
  --font-display: 'Bricolage Grotesque', Georgia, serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Glow quasi supprimé (dé-slop) : un seul accent discret, plus de néon partout. */
  --shadow-glow: 0 0 24px rgba(255, 45, 122, 0.12);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Coupe net les animations restantes (audit a11y 2026-06-20) : pulses, halos,
     dégradé, traînées de révélation. Le bloc générique ci-dessus écrase déjà la
     durée ; on désactive en plus explicitement pour ne laisser AUCUN mouvement
     résiduel (boucle 0.001ms incluse) sur les éléments décoratifs porteurs. */
  .grad-text,
  .reveal,
  .door,
  .door::before,
  .halo-1, .halo-2, .halo-3,
  .brand-logo,
  .portal-logo-big,
  .np-cursor-glow,
  .hero-carousel-spot,
  .portal-phone-frame {
    animation: none !important;
  }
}

/* Transition de page : fondu à l'arrivée. PAS de transform (founder 2026-06-17) :
   un transform persistant sur <body> (fill both) en faisait le bloc conteneur des
   éléments position:fixed → le lightbox se centrait sur le document, pas le
   viewport (« photo pas centrée »). Fondu d'opacité seul = aucun bloc conteneur. */
@keyframes np-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--night);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  animation: np-page-in 0.28s ease-out both;
}

/* ─── Système typographique (dé-slop 2026-06-17) ───────────────────────────
   La display PORTE le design : titres en Bricolage Grotesque, serrés. Les
   kickers/eyebrows passent en mono (Geist Mono) → signature éditoriale. */
h1, h2, h3,
.portal-title, .hero-title, .b2b-title, .portal-wordmark, .brand-name,
.door-title, .audience-card h3, .legal-article h2, .legal-article h1,
.not-col h3, .roi-card h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.door-kicker, .portal-cue, .portal-note,
.h-chip, .section-eyebrow, .b2b-kicker,
.value-tag, .audience-kicker, .feature-kicker {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.nav-cta { white-space: nowrap; }

/* Fade-out déclenché par JS avant navigation */
body.page-leaving {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 { line-height: 1.1; margin: 0; letter-spacing: -0.02em; }

.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;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--rose); color: #fff; padding: 12px 18px;
  border-radius: 0 0 12px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.narrow { max-width: 820px; }

section { position: relative; }

.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-2);
  margin: 0 0 14px;
}

.section-title {
  font-size: clamp(1.9rem, 4.5vw, 3.1rem);
  font-weight: 800;
  margin-bottom: 22px;
}

.lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-2);
  max-width: 64ch;
}
.lead.center { margin-left: auto; margin-right: auto; text-align: center; }

.grad-text {
  background: var(--grad);
  background-size: 100% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Le dégradé signature est désormais STATIQUE (fin du shimmer permanent, audit
     2026-06-20) : un seul fade-in discret au chargement, plus de boucle 7s qui
     scintillait en continu (anti AI-slop). Coupé en reduced-motion. */
  animation: np-grad-in 0.8s ease-out both;
}
@keyframes np-grad-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .grad-text { animation: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease;
  font-family: inherit;
}
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 30px rgba(123, 97, 255, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255, 45, 122, 0.45); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: var(--surface-2); transform: translateY(-2px); }

/* CTA beta en CONTOUR (founder 2026-06-20 : le bouton plein gênait). Bordure rose
   signature, fond transparent ; le rose se remplit légèrement au survol. Sobre,
   pas de gradient plein. Utilisé par les boutons « Je veux la beta » / beta. */
.btn-beta-outline {
  background: transparent;
  color: var(--rose);
  border: 1.5px solid rgba(255, 45, 122, 0.55);
  box-shadow: none;
}
.btn-beta-outline:hover {
  background: rgba(255, 45, 122, 0.10);
  border-color: var(--rose);
  transform: translateY(-2px);
  box-shadow: none;
}
.btn-beta-outline:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

.cta-center { text-align: center; margin-top: 34px; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  background: rgba(7, 7, 16, 0.7);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.brand-logo {
  width: 34px; height: 34px;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(255, 45, 122, 0.45)) drop-shadow(0 0 18px rgba(123, 97, 255, 0.3));
  transition: transform 0.3s ease, filter 0.3s ease;
}
/* Logo DYNAMIQUE au survol (founder 2026-06-17) : pulse d'énergie animé tant
   que le curseur est dessus, au lieu d'un simple scale figé. S'applique au logo
   du header ET au grand logo du hero. */
@keyframes np-logo-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 12px rgba(255, 45, 122, 0.55)) drop-shadow(0 0 22px rgba(123, 97, 255, 0.4));
  }
  50% {
    transform: scale(1.13);
    filter: drop-shadow(0 0 22px rgba(255, 45, 122, 0.95)) drop-shadow(0 0 42px rgba(123, 97, 255, 0.7));
  }
}
.brand:hover .brand-logo,
.portal-brand-hero:hover .portal-logo-big {
  animation: np-logo-pulse 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-logo,
  .portal-brand-hero:hover .portal-logo-big { animation: none; }
}
.brand-name {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.site-footer .brand-logo { width: 30px; height: 30px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a { color: var(--text-2); font-weight: 500; font-size: 0.95rem; transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
/* Onglets de navigation principale (Noctambules / Établissements / Organisateurs) */
/* `.nav-links a.nav-tab` (et non `.nav-tab`) : sinon `.nav-links a` (plus
   spécifique) écrase la transition et seul `color` s'animait → le fond/bordure
   au survol surgissaient sec. Ici les 3 propriétés s'animent ensemble. */
.nav-links a.nav-tab {
  position: relative;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.nav-tab:hover {
  color: var(--text);
  background: rgba(255,255,255,0.05);
}
.nav-tab[aria-current="page"] {
  color: var(--rose);
  font-weight: 700;
  background: rgba(255,45,122,0.10);
  border-color: rgba(255,45,122,0.22);
  box-shadow: 0 0 14px rgba(255,45,122,0.12);
}

/* =========================================================
   NAV — Menu déroulant « Professionnels »
   Regroupe Établissements + Organisateurs. Ouverture au survol
   (desktop) ET au clic/clavier (JS toggle `.is-open` + aria-expanded).
   Sobre, cohérent avec les onglets : surface nuit glassmorphism.
   ========================================================= */
.nav-dropdown { position: relative; }

/* Le toggle est un <button> : on neutralise le style natif et on réutilise
   l'apparence des onglets via `.nav-tab`. font/cursor explicites car bouton. */
.nav-links button.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  /* Sans color explicite, le <button> prenait la couleur UA par défaut
     (ButtonText sombre) → « Professionnels » ressortait gris/noir, différent
     des onglets <a> (var(--text-2)). On aligne (founder 2026-06-24). */
  color: var(--text-2);
  background: transparent;
}
.nav-caret {
  font-size: 0.7em;
  line-height: 1;
  transition: transform 0.22s ease;
  opacity: 0.85;
}
/* Chevron retourné quand le menu est ouvert (survol desktop OU clic). */
.nav-dropdown:hover .nav-caret,
.nav-dropdown.is-open .nav-dropdown-toggle .nav-caret { transform: rotate(180deg); }

/* Onglet « Professionnels » mis en avant quand une de ses pages est active
   (réutilise la sémantique visuelle de aria-current). */
.nav-links button.nav-dropdown-toggle.is-active {
  color: var(--rose);
  font-weight: 700;
  background: rgba(255,45,122,0.10);
  border-color: rgba(255,45,122,0.22);
  box-shadow: 0 0 14px rgba(255,45,122,0.12);
}

/* Panneau déroulant : petite surface nuit, 2 liens empilés. Masqué par défaut. */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 188px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: rgba(12, 12, 24, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
/* Petit tampon invisible pour que le survol ne se coupe pas entre l'onglet
   et le panneau (les 8px de gap). */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown-link {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  color: var(--text-2);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav-dropdown-link:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-dropdown-link[aria-current="page"] {
  color: var(--rose);
  font-weight: 700;
  background: rgba(255,45,122,0.10);
}
.nav-dropdown-link:focus-visible,
.nav-dropdown-toggle:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

/* `.nav-links a.nav-cta` : même raison que `.nav-tab` — sans ce surcroît de
   spécificité, `.nav-links a` impose `transition: color` seul et le passage au
   dégradé au survol surgissait sec. */
/* CTA « Rejoindre la beta » en CONTOUR (founder 2026-06-20 : le bouton plein le
   gênait — « moche rempli »). Bordure rose signature, fond transparent, sobre.
   Le rose passe en plein seulement au survol (lien discret avec l'identité). */
.nav-links a.nav-cta {
  color: var(--rose) !important;
  background: transparent;
  border: 1.5px solid rgba(255, 45, 122, 0.55);
  padding: 8px 19px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: none;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.2s ease, transform 0.2s ease;
}
.nav-links a.nav-cta:hover {
  border-color: var(--rose);
  background: rgba(255, 45, 122, 0.10);
  transform: translateY(-1px);
}
.nav-links a.nav-cta:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-toggle span {
  width: 24px; height: 2px; background: var(--text); border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 0 60px;
}
.hero-map { position: absolute; inset: 0; z-index: 0; }
.hero-svg { width: 100%; height: 100%; }
.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 40%, transparent 0%, rgba(7,7,16,0.55) 75%),
    linear-gradient(180deg, rgba(7,7,16,0.4) 0%, rgba(7,7,16,0.85) 100%);
}

.hero-inner { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-2);
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(8px);
  margin: 0 0 22px;
}
.hero-title {
  font-size: clamp(2.8rem, 9vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.hero-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--text-2);
  max-width: 56ch;
  margin: 0 0 36px;
}
.hero-sub strong { color: var(--text); font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }

/* Nuages d'énergie (.neb/.n1-.n11 + @keyframes neb-pulse) SUPPRIMÉS
   (dé-slop 2026-06-17) : le SVG qui les portait a été retiré du HTML. */

/* ─── Carte décorative du hero noctambules (SVG Artères Vivantes) ───────────
   Le SVG s'appuyait uniquement sur ses attributs inline → les pins .me/.friend/
   .pin-none rendaient en NOIR (aucun fill défini) et les artères en trait 1px à
   peine visible. On câble ici la palette signature : artères lisibles, pins par
   catégorie, présence teal (moi) / vert (amis). Respire doucement (coupé en
   reduced-motion). Décoratif (aria-hidden) — voilé par .hero-veil. */
.arteries { stroke-width: 2.5px; opacity: 0.6; }
.artery { stroke-dasharray: 4 10; opacity: 0.7; }

.pin { stroke: rgba(7, 7, 16, 0.6); stroke-width: 1.5px; }
.pin-bar     { fill: #FF4FD8; }
.pin-club    { fill: var(--violet); }
.pin-concert { fill: #C9A6F5; }
.pin-premium { fill: var(--violet); }
.pin-none    { fill: #4A4658; stroke: none; opacity: 0.5; }
.pin-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5px;
  opacity: 0.8;
}
/* Présence : moi = teal froid, amis = vert (système couleurs énergie) */
.me     { fill: var(--teal);  stroke: rgba(31, 229, 192, 0.35); stroke-width: 5px; }
.friend { fill: var(--green); stroke: rgba(0, 232, 122, 0.35);  stroke-width: 4px; }

.halo { transform-origin: center; transform-box: fill-box; }
@keyframes np-halo-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.halo-1 { animation: np-halo-breathe 6s ease-in-out infinite; }
.halo-2 { animation: np-halo-breathe 7.5s ease-in-out infinite; }
.halo-3 { animation: np-halo-breathe 8.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .halo-1, .halo-2, .halo-3 { animation: none; }
}

/* =========================================================
   PROMESSE
   ========================================================= */
.promise { padding: clamp(70px, 10vw, 130px) 0; }
.not-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 44px;
}
.not-col {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  background: var(--surface);
}
.not-col h3 { font-size: 1.1rem; margin-bottom: 16px; }
.not-col ul { margin: 0; padding: 0; list-style: none; }
.not-col li {
  padding: 9px 0 9px 28px;
  position: relative;
  color: var(--text-2);
  border-top: 1px solid var(--border);
}
.not-col li:first-child { border-top: none; }
.not-col.not li::before {
  content: "×"; position: absolute; left: 4px; top: 8px;
  color: var(--text-3); font-weight: 700;
}
.not-col.is li::before {
  content: ""; position: absolute; left: 4px; top: 16px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--grad);
}
.not-col.is { border-color: var(--border-strong); background: rgba(123, 97, 255, 0.06); }
.not-col.is li { color: var(--text); }

/* Section PILIERS (.piliers/.pilier-*/.icon-*) SUPPRIMÉE (dé-slop 2026-06-17) :
   les 3 piliers sont désormais racontés en sections alternées (.feature-rows). */

/* =========================================================
   FEATURES
   ========================================================= */
.features { padding: clamp(70px, 10vw, 130px) 0; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 50px;
}
.feature-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  background: var(--surface);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.feature-card h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.2rem; margin-bottom: 12px;
}
.feature-card p { color: var(--text-2); margin: 0; font-size: 0.97rem; }
.feature-dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
}
.dot-rose   { background: var(--rose);   box-shadow: 0 0 10px var(--rose); }
.dot-violet { background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.dot-blue   { background: var(--blue);   box-shadow: 0 0 10px var(--blue); }
.dot-cyan   { background: var(--safe);   box-shadow: 0 0 10px var(--safe); }  /* Safe Home = cyan */
.dot-gold   { background: var(--gold);   box-shadow: 0 0 10px var(--gold); }  /* Premium / récap annuel = or */

/* =========================================================
   PARTENAIRES
   ========================================================= */
.partenaires {
  padding: clamp(70px, 10vw, 130px) 0;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%);
}
.partenaires .section-title { text-align: center; }
.partenaires .section-eyebrow { text-align: center; }

.offer-wrap { margin: 48px 0 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.offer-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
}
.offer-table th,
.offer-table td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text-2);
}
.offer-table thead th { vertical-align: bottom; border-bottom: 1px solid var(--border-strong); }
.offer-feature, .offer-table tbody th[scope="row"] {
  text-align: left;
  color: var(--text);
  font-weight: 600;
}
.offer-table tbody th[scope="row"] { font-weight: 500; }

.tier-name { display: block; font-weight: 800; font-size: 1.05rem; color: var(--text); margin-top: 6px; }
.tier-price { display: block; font-weight: 700; color: var(--text-2); margin-top: 4px; }
.tier-price small { font-size: 0.75rem; color: var(--text-3); font-weight: 500; }

.tier-premium {
  background: rgba(255, 184, 0, 0.06);
  border-radius: 14px 14px 0 0;
  position: relative;
}
.tier-premium .tier-name { color: var(--gold); }
.tier-badge {
  display: inline-block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: #1a1300;
  background: var(--gold);
  padding: 3px 9px;
  border-radius: 999px;
}
.tier-standard .tier-name { color: #d8d8e8; }

/* Cellules oui / non */
.offer-table td.yes::before {
  content: "✓";
  color: var(--green);
  font-weight: 800;
  font-size: 1.1rem;
}
.offer-table td.no {
  color: var(--text-3);
}
.offer-table td.no::before {
  content: "—";
  color: var(--text-3);
}
/* texte explicite dans une cellule no (ex "Repère seul") */
.offer-table td.no:not(:empty) { font-size: 0.88rem; }
.offer-table td.no:not(:empty)::before { content: ""; }

.offer-note {
  text-align: center;
  color: var(--text-2);
  font-size: 0.95rem;
  max-width: 62ch;
  margin: 22px auto 0;
}

/* =========================================================
   PREMIUM USER
   ========================================================= */
.premium {
  padding: clamp(70px, 10vw, 130px) 0;
  text-align: center;
}
.premium .section-eyebrow { text-align: center; }
.premium-price { font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 800; margin: 6px 0 0; }
.premium-per { font-size: 1.3rem; font-weight: 600; color: var(--text-2); }
.premium-anchor { color: var(--text-2); margin: 4px 0 36px; }

.premium-benefits {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: left;
}
.premium-benefits li {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-weight: 500;
}
.check {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--grad);
  position: relative;
}
.check::after {
  content: "✓"; color: #fff; font-size: 0.72rem; font-weight: 800;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.premium-soon { color: var(--text-3); font-size: 0.88rem; margin: 16px 0 0; }

/* Capture du comparatif Premium, centrée façon écran de téléphone. */
.premium-shot {
  margin: 0 auto 40px;
  max-width: 260px;
}
.premium-shot img {
  display: block;
  width: 100%;
  border-radius: 28px;
  border: 1px solid var(--border);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55);
  cursor: zoom-in;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.premium-shot img:hover { transform: translateY(-6px); }
@media (max-width: 560px) { .premium-shot { max-width: 210px; } }

/* =========================================================
   BETA / CTA FINAL
   ========================================================= */
.beta {
  padding: clamp(80px, 12vw, 150px) 0;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(123, 97, 255, 0.18), transparent 60%),
    var(--night);
}
.beta-inner { text-align: center; }
.beta .section-eyebrow { text-align: center; }
.beta .section-title { text-align: center; }

.beta-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 34px auto 0;
  flex-wrap: wrap;
}
.beta-form input {
  flex: 1 1 240px;
  padding: 15px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}
.beta-form input::placeholder { color: var(--text-3); }
.beta-form input:focus { outline: 2px solid var(--violet); outline-offset: 2px; }
/* État désactivé lisible (a11y, audit 2026-06-20) — symétrique du partner-form. */
.beta-form input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--text-3);
}
.beta-form .btn { flex: none; }
.beta-hint { color: var(--text-3); font-size: 0.88rem; margin: 16px 0 0; }
.beta-hint.ok { color: var(--green); }
.beta-hint.err { color: var(--rose); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--night-2);
  padding: 56px 0 32px;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border);
}
.footer-tag { color: var(--text-3); font-size: 0.9rem; margin: 12px 0 0; }
.footer-launch {
  font-size: 0.78rem;
  color: var(--text-3);
  margin: 4px 0 0;
  letter-spacing: 0.03em;
}
.footer-links { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-links h4 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-2); margin-bottom: 14px;
}
.footer-links a {
  display: block; color: var(--text-2); font-size: 0.92rem;
  padding: 5px 0; transition: color 0.2s;
}
.footer-links a:hover { color: var(--text); }
.footer-bottom { padding-top: 24px; }
.footer-bottom p { color: var(--text-3); font-size: 0.85rem; margin: 0; }

/* =========================================================
   AUDIENCE TEASER (accueil → pages B2B)
   ========================================================= */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 48px;
}
.audience-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  background: var(--surface);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.audience-card:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.audience-card h3 { font-size: 1.6rem; }
.audience-card p { color: var(--text-2); margin: 0; }
.audience-card .btn { margin-top: 8px; }
.audience-kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--text-2);
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 5px 12px;
  border-radius: 999px;
}

/* =========================================================
   PAGES B2B — HERO COMPACT
   ========================================================= */
.b2b-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 11vw, 130px) 0 clamp(50px, 8vw, 90px);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 90% at 80% -10%, rgba(123, 97, 255, 0.20), transparent 60%),
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(255, 45, 122, 0.14), transparent 55%),
    var(--night);
}
.b2b-hero .container { position: relative; z-index: 2; }
.b2b-kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-2);
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  margin: 0 0 22px;
}
.b2b-title {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  max-width: 18ch;
}
.b2b-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--text-2);
  max-width: 60ch;
  margin: 0 0 32px;
}
.b2b-sub strong { color: var(--text); font-weight: 700; }
.b2b-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Bandeau de stats / preuve de valeur */
.proof-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.proof-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--surface);
  text-align: center;
}
.proof-num {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.proof-label { color: var(--text-2); font-size: 0.92rem; margin: 6px 0 0; }
/* Bandeau de preuve à 2 cartes (établissements) : 2 colonnes au lieu de laisser
   une 3e colonne vide dans la grille repeat(3,…). */
.proof-row-2 { grid-template-columns: repeat(2, 1fr); }

/* =========================================================
   PAGES B2B — BÉNÉFICES (cartes valeur)
   ========================================================= */
.value {
  padding: clamp(70px, 10vw, 120px) 0;
  border-top: 1px solid var(--border);
}
.value-alt { background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 50px;
}
.value-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  background: var(--surface);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.value-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.value-card h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.2rem; margin-bottom: 12px;
}
.value-card p { color: var(--text-2); margin: 0; font-size: 0.97rem; }
.value-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rose);
  margin: 0 0 8px;
  text-transform: uppercase;
}

/* Vision/Roadmap accueil : 4 cartes (lancement / expansion / piliers / récap
   annuel) → grille 2×2 équilibrée à partir de la tablette (évite l'orpheline
   3+1 d'une grille à 3 colonnes). Sous 720px, le bloc partagé replie en 1fr
   (cette règle est gardée >720px pour ne pas écraser ce repli mobile, vu sa
   spécificité ID). */
@media (min-width: 721px) {
  #vision .value-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   VISION — FRISE NARRATIVE CONTINUE (#vision .np-timeline)
   Une seule ligne du temps verticale. Le STATUT se lit par la POSITION + la
   LUMIÈRE du trait, jamais par des badges : la portion « parcours » (genèse →
   1er août) est VIVE (dégradé violet→rose plein) ; la portion « perspectives »
   (après le pivot) devient DISCRÈTE (pointillé estompé). Repère « Aujourd'hui »
   distinct (point pulsé), pivot « 1er août » mis en avant (halo rose).
   ========================================================= */
.np-timeline {
  list-style: none;
  margin: 50px 0 0;
  padding: 0;
  position: relative;
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 18px;
  padding: 0 0 30px 0;
}
.tl-item:last-child { padding-bottom: 0; }
/* Trait dessiné PAR NŒUD (auto-aligné sur la hauteur réelle du contenu) : chaque
   item trace le segment qui descend vers le suivant. Par défaut = trait VIVANT
   (lumière = réalisé), dégradé violet→rose. Le dernier item ne descend pas.
   La portion future (.tl-future) bascule en pointillé estompé plus bas. */
.tl-item::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: -12px;
  width: 2px;
  background: linear-gradient(180deg, var(--violet), var(--rose));
  opacity: 0.85;
  z-index: 0;
}
.tl-item:last-child::before { display: none; }
.tl-marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--night);
  border: 1px solid var(--border-strong);
}
.tl-marker .feature-dot { width: 8px; height: 8px; }
.tl-body {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: var(--surface);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.tl-item:hover .tl-body {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.tl-when {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 6px;
}
.tl-when--accent { color: var(--rose); }
.tl-when sup { font-size: 0.6em; }
.tl-title {
  font-size: 1.18rem;
  margin: 0 0 9px;
  line-height: 1.25;
}
.tl-title sup { font-size: 0.55em; }
.tl-text {
  color: var(--text-2);
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
}
.tl-text strong { color: var(--text); }

/* ── PARCOURS (.tl-node) : lumière pleine. Pastille bien visible, pas de badge.
   Le statut « construit » est implicite (avant le repère Aujourd'hui). ── */
.tl-node .tl-marker { border-color: rgba(255, 255, 255, 0.28); }

/* ── ● AUJOURD'HUI (.tl-now) : repère DISTINCT, point pulsé rose. ── */
.tl-now .tl-body {
  border-color: rgba(255, 45, 122, 0.32);
  background: linear-gradient(180deg, rgba(255, 45, 122, 0.05), var(--surface));
}
.tl-marker--now {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 0;
  background: transparent;
}
.tl-now-pulse {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 3px rgba(255, 45, 122, 0.22), 0 0 14px var(--rose);
}
.tl-now-pulse::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--rose);
  animation: tlNowPulse 2.2s ease-out infinite;
}
@keyframes tlNowPulse {
  0%   { transform: scale(0.7); opacity: 0.85; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
/* Libellé « Aujourd'hui » accentué + petit point pulsé inline. */
.tl-when--now { color: var(--rose); display: flex; align-items: center; gap: 7px; }
.tl-now-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 8px var(--rose);
  animation: tlNowDot 2.2s ease-in-out infinite;
}
@keyframes tlNowDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ── 1ER AOÛT (.tl-launch) : nœud PIVOT mis en avant — halo + carte rose. ── */
.tl-launch .tl-body {
  border-color: rgba(255, 45, 122, 0.45);
  background: linear-gradient(180deg, rgba(255, 45, 122, 0.1), var(--surface));
  box-shadow: 0 0 26px rgba(255, 45, 122, 0.16);
}
.tl-launch .tl-title { color: var(--text); }
.tl-marker--launch {
  border-color: var(--rose);
  box-shadow: 0 0 14px rgba(255, 45, 122, 0.5);
}
.tl-marker--launch .feature-dot { width: 9px; height: 9px; }

/* ── Bascule LUMIÈRE → ESTOMPÉ du trait : à partir du pivot « 1er août »,
   le segment qui descend vers les perspectives devient pointillé discret. ── */
.tl-launch::before,
.tl-future::before {
  background: none;
  background-image: linear-gradient(180deg, var(--border-strong), var(--border));
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 11px);
  mask-image: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 11px);
  opacity: 0.45;
}

/* ── PERSPECTIVES (.tl-future) : ESTOMPÉ/OUTLINE — pas encore là. ── */
.tl-future .tl-body {
  background: transparent;
  border-style: dashed;
  border-color: var(--border);
  opacity: 0.78;
}
.tl-future:hover .tl-body { opacity: 1; }
.tl-future .tl-when,
.tl-future .tl-title,
.tl-future .tl-text { color: var(--text-3); }
.tl-future .tl-text strong { color: var(--text-2); }
.tl-future .tl-marker {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-strong);
}
.tl-future .tl-marker .feature-dot {
  background: transparent;
  border: 1.5px solid var(--text-3);
  box-shadow: none;
}

@media (max-width: 560px) {
  .tl-item { gap: 14px; }
  .tl-body { padding: 16px 16px; }
  .tl-title { font-size: 1.08rem; }
}

/* Étapes « comment ça marche » */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 50px;
}
.step {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  background: var(--surface);
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { color: var(--text-2); margin: 0; font-size: 0.92rem; }

/* Encart différenciation Établissement vs Organisateur */
.distinction {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  background: rgba(123, 97, 255, 0.06);
  margin-top: 50px;
}
.distinction h3 { font-size: 1.15rem; margin-bottom: 10px; }
.distinction p { color: var(--text-2); margin: 0; }
.distinction strong { color: var(--text); }

/* =========================================================
   MODE COMPÉTITION — sport = VERT (règle dure founder 2026-06-18),
   jamais rose ni rouge. Mini-note accueil + note B2B établissements.
   ========================================================= */

/* Mini-carte discrète (accueil) */
.compet-mini {
  max-width: 760px;
  margin: clamp(40px, 6vw, 70px) auto 0;
  border: 1px solid rgba(0, 230, 118, 0.30);
  border-left: 3px solid var(--sport);
  border-radius: var(--radius);
  padding: 24px 28px;
  background: rgba(0, 230, 118, 0.06);
}
.compet-ball { width: 13px; height: 13px; flex: none; }
.compet-mini-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sport);
  margin-bottom: 8px;
}
.compet-mini-title {
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  margin: 0 0 10px;
}
.compet-mini-text { color: var(--text-2); margin: 0; font-size: 0.98rem; line-height: 1.55; }
.compet-mini-text strong { color: var(--text); }

/* Variante avec capture réelle (« Je diffuse ce match » vert) à côté du texte. */
.compet-mini--shot {
  max-width: 920px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
}
.compet-mini-body { min-width: 0; }
.compet-mini-shot {
  margin: 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 230, 118, 0.28);
}
@media (max-width: 680px) {
  .compet-mini--shot { grid-template-columns: 1fr; gap: 20px; }
}

/* Note B2B (établissements) */
.compet-note-sec { padding: clamp(50px, 8vw, 90px) 0; }
.compet-note {
  border: 1px solid rgba(0, 230, 118, 0.30);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 38px);
  background: rgba(0, 230, 118, 0.06);
}
.compet-note-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sport);
  margin-bottom: 8px;
}
.compet-note-title { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin: 0 0 12px; }
.compet-note-text { color: var(--text-2); margin: 0; font-size: 1rem; line-height: 1.6; max-width: 62ch; }
.compet-note-text strong { color: var(--text); }

.compet-note-shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 0;
}

/* Photo réelle (founder 2026-06-18) — cadre rempli 4/3.
   4/3, coins arrondis, fin liseré. Sobre : on évoque, on ne déballe pas tout. */
.photo-shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.07);
}
.photo-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Variante portrait : captures d'écran d'app (téléphone) dans le cadre compét.
   On bascule en ratio portrait + contain pour montrer toute l'UI sans rogner. */
.photo-shot--portrait {
  aspect-ratio: 9 / 16;
  background: #070710;
}
.photo-shot--portrait img {
  object-fit: contain;
}

@media (max-width: 560px) {
  .compet-note-shots { grid-template-columns: 1fr; }
}

/* CTA final B2B */
.b2b-cta {
  padding: clamp(80px, 12vw, 140px) 0;
  border-top: 1px solid var(--border);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255, 45, 122, 0.16), transparent 60%),
    var(--night);
}
.b2b-cta .section-eyebrow,
.b2b-cta .section-title { text-align: center; }
.b2b-cta .lead { margin-left: auto; margin-right: auto; text-align: center; }

/* =========================================================
   REVEAL AU SCROLL (piloté par JS, fallback no-JS visible)
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* Sans JS : tout reste visible */
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   PORTAIL — HERO SAS (accueil)
   ========================================================= */
.portal-hero {
  position: relative;
  min-height: calc(100vh - 68px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(60px, 9vh, 110px) 0 clamp(50px, 8vh, 90px);
}
/* Blobs dégradés SUPPRIMÉS (dé-slop 2026-06-17). À la place : grille électrique
   très discrète (clin d'œil aux Artères) + un unique halo léger en haut. */
.portal-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 62px 62px;
  background-position: center top;
}
.portal-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 46% at 50% -2%, rgba(255,45,122,0.10), transparent 62%),
    linear-gradient(180deg, transparent 0%, rgba(7,7,16,0.55) 62%, var(--night) 100%);
}
/* Grain subtil pour la profondeur (SVG inline, léger) */
.portal-grain {
  position: absolute; inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.portal-inner { position: relative; z-index: 2; text-align: center; }
.portal-title {
  font-size: clamp(2.9rem, 9vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 26px;
  text-wrap: balance;
}
.portal-sub {
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  color: var(--text-2);
  max-width: 64ch;
  margin: 0 auto 18px;
  text-wrap: balance;
}
.portal-sub strong { color: var(--text); font-weight: 700; }

/* ===== Hero épuré (founder 2026-06-20) ======================================
   Titre « La nuit, en temps réel » sur UNE ligne + une seule question + bannière
   de lancement + CTA beta. */

/* Bannière de lancement 1er août (fête nationale suisse) — discrète, classe. */
.launch-banner {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin: 0 auto 18px;
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(255, 45, 122, 0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.launch-banner strong {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.launch-banner sup { font-size: 0.62em; }
.launch-banner-flag {
  align-self: center;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.launch-banner-city { color: var(--text-2); }

/* Titre sur UNE seule ligne (le wooow). On empêche le retour à la ligne sur
   desktop ; mobile reprend la main (cf. media queries). Le clamp est calé pour
   que « La nuit, en temps réel. » tienne sur une ligne SANS déborder du bloc
   copy centré (max 720px) — au-delà de ~72px la phrase débordait (audit
   2026-06-20, visible en tablette 768-1024 ET desktop). */
.portal-title--oneline {
  white-space: nowrap;
  font-size: clamp(2.4rem, 6.6vw, 4.5rem);
  margin-bottom: 16px;
}
.portal-title--oneline .grad-text { white-space: nowrap; }
/* Dans le hero centré, le titre n'est plus bridé par la largeur du bloc copy :
   il peut s'étaler sur sa propre largeur centrée, ce qui empêche tout débordement
   du nowrap (le sub/question reste, lui, contenu à 56ch). */
.portal-lead--centered .portal-title--oneline {
  max-width: none;
}

/* La question : courte, mise en avant, rien d'autre dessous.
   Desktop/tablette (> 560px) : tient sur UNE seule ligne (nowrap + taille
   légèrement réduite). Mobile (≤ 560px, plus bas) : wrap propre autorisé. */
.portal-sub--question {
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  line-height: 1.4;
  color: var(--text);
  max-width: none;
  margin: 0 auto 4px;
  white-space: nowrap;
}
.portal-sub--question strong { color: var(--rose); font-weight: 700; }
/* Mobile : la question peut wrapper proprement (pas de débordement forcé). */
@media (max-width: 560px) {
  .portal-sub--question {
    white-space: normal;
    max-width: 32ch;
  }
}

/* CTA beta dans le hero (réutilise .beta-form, version centrée compacte). */
.hero-cta {
  margin: clamp(26px, 4vh, 40px) auto 0;
  max-width: 480px;
}
.beta-form--hero { margin-top: 0; }
.hero-cta .beta-hint {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  /* Mobile : le titre peut revenir sur 2 lignes pour rester lisible. */
  .portal-title--oneline { white-space: normal; }
}

/* ===== Hero SPLIT « photos d'abord » (founder 2026-06-17) ===================== */
.portal-lead {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  text-align: left;
  margin-bottom: 8px;
}
.portal-lead-copy .portal-brand-hero {
  justify-content: flex-start;
  margin-bottom: 22px;
}

/* ===== Hero-merge (founder 2026-06-18 « j'arrive, je vois ça, je signe ») =====
   Le carousel devient le visuel d'entrée : copy centrée en haut, carousel des
   téléphones en grand juste dessous (pleine largeur), légende adaptative sous
   le carousel. On empile (pas de split) pour que le carousel soit LE héros. */
.portal-lead--centered {
  display: block;
  text-align: center;
  margin-bottom: 4px;
}
.portal-lead--centered .portal-lead-copy {
  max-width: 720px;
  margin: 0 auto 6px;
}
.portal-lead--centered .portal-brand-hero { justify-content: center; }

.portal-cue {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-3);
  margin: 40px 0 22px;
  position: relative;
}
.portal-cue::after {
  content: "";
  display: block;
  width: 1px; height: 26px;
  margin: 14px auto 0;
  background: linear-gradient(180deg, var(--violet), transparent);
}

/* ---- 3 PORTES ---- */
.portal-doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px 26px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(14px);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1),
              border-color 0.3s ease, box-shadow 0.35s ease;
}
.door-glow {
  position: absolute;
  inset: -1px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.door-noctambules .door-glow {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,45,122,0.28), transparent 70%);
}
.door-etablissements .door-glow {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(123,97,255,0.28), transparent 70%);
}
.door-organisateurs .door-glow {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(58,134,255,0.28), transparent 70%);
}
.door::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1);
}
.door:hover, .door:focus-visible {
  transform: translateY(-8px);
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 22px 60px rgba(0,0,0,0.45);
}
.door:hover::before, .door:focus-visible::before { transform: scaleX(1); }
.door:hover .door-glow, .door:focus-visible .door-glow { opacity: 1; }

.door-kicker {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--text-2);
}
.door-noctambules .door-kicker { color: var(--rose); }
.door-etablissements .door-kicker { color: var(--violet); }
.door-organisateurs .door-kicker { color: var(--blue); }
.door-title {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 2px 0 4px;
}
.door-desc { color: var(--text-2); font-size: 0.96rem; line-height: 1.55; flex: 1; }
.door-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text);
}
.door-arrow { transition: transform 0.25s ease; }
.door:hover .door-arrow, .door:focus-visible .door-arrow { transform: translateX(5px); }

.portal-note {
  font-size: 0.85rem;
  color: var(--text-3);
  margin: 38px 0 0;
}

/* =========================================================
   B2B HERO — orbe parallax décoratif
   ========================================================= */
.b2b-hero { isolation: isolate; }
/* Halo B2B calmé (dé-slop cohérence 2026-06-17) : plus de gros blob flou
   (filter:blur retiré, opacité ~0.22→0.10) — aligné sur le traitement sobre
   de la home. */
.b2b-orb {
  position: absolute;
  z-index: 0;
  top: -180px; right: -160px;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,45,122,0.10), rgba(123,97,255,0.05) 45%, transparent 70%);
  pointer-events: none;
}

/* Lueur de respiration commune (titres gradient au survol des cartes) */
.proof-card { transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; }
.proof-card:hover { transform: translateY(-4px); border-color: var(--border-strong); background: var(--surface-2); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Nav → hamburger dès 920px : la nav horizontale (brand + 4 onglets + CTA)
   réclame ~900px de contenu ; sous ~900px (ex. tablette portrait 880px) le
   dernier onglet / le CTA débordaient du conteneur (scroll horizontal de ~10px).
   On replie donc AVANT que ça déborde. Source unique du repli nav, partagée par
   toutes les pages. */
@media (max-width: 920px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 24px 24px;
    background: rgba(7, 7, 16, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 12px 4px; font-size: 1.05rem; }
  .nav-cta { text-align: center; margin-top: 8px; }

  /* Dropdown « Professionnels » : sur mobile il coule DANS la colonne (pas de
     popover absolu). Le toggle occupe toute la largeur ; le panneau s'ouvre
     en accordéon au clic/tap (pas de hover sur mobile). */
  .nav-dropdown { width: 100%; }
  .nav-links button.nav-tab {
    width: 100%;
    justify-content: space-between;
    padding: 12px 4px;
    font-size: 1.05rem;
  }
  .nav-dropdown-menu {
    position: static;
    min-width: 0;
    margin: 2px 0 4px 12px;
    padding: 4px 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    /* Replié par défaut : seul le clic (.is-open) le déroule — le hover desktop
       ne s'applique pas ici (on neutralise la règle :hover plus bas). */
    transform: none;
  }
  /* Sur mobile, NE PAS ouvrir au survol : seul .is-open compte. */
  .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 0;
    pointer-events: none;
  }
  .nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-link { padding: 11px 12px; font-size: 1rem; }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 900px) {
  .portal-doors { grid-template-columns: 1fr; max-width: 460px; }
  .b2b-orb { width: 440px; height: 440px; top: -140px; right: -120px; }
}
@media (max-width: 900px) {
  .feature-grid,
  .value-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  /* Repli nav géré par le bloc partagé @media (max-width: 920px) ci-dessus. */
  .feature-grid,
  .not-grid,
  .audience-grid,
  .value-grid,
  .proof-row,
  .steps { grid-template-columns: 1fr; }

  .premium-benefits { grid-template-columns: 1fr; }

  .hero { min-height: 86vh; }
  .portal-hero { min-height: auto; padding-top: 56px; }
  .portal-doors { grid-template-columns: 1fr; }
  .portal-cue { margin-top: 32px; }
}

@media (max-width: 420px) {
  .container { padding: 0 18px; }
  .btn { width: 100%; }
  .hero-actions .btn { width: auto; }
  .door-title { font-size: 1.5rem; }
}

/* =========================================================
   PAGES LÉGALES (privacy.html, cgu.html)
   ========================================================= */
.legal-article {
  max-width: 760px;
  padding-top: 100px;
  padding-bottom: 80px;
}

.legal-header {
  margin-bottom: 48px;
}

.legal-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose);
  background: rgba(255, 45, 122, 0.12);
  border: 1px solid rgba(255, 45, 122, 0.25);
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 16px;
}

.legal-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 12px;
}

.legal-updated {
  font-size: 0.85rem;
  color: var(--text-3);
  margin: 0 0 20px;
}

.legal-intro {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.7;
  margin: 0;
  padding: 20px;
  background: var(--surface);
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.legal-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.legal-section {
  border-top: 1px solid var(--border);
  padding-top: 32px;
}

.legal-section:first-child {
  border-top: none;
  padding-top: 0;
}

.legal-section h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
}

.legal-section h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin: 20px 0 10px;
}

.legal-section p {
  font-size: 0.94rem;
  color: var(--text-2);
  line-height: 1.75;
  margin: 0 0 12px;
}

.legal-section p:last-child { margin-bottom: 0; }

.legal-section ul {
  padding-left: 20px;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-section li {
  font-size: 0.94rem;
  color: var(--text-2);
  line-height: 1.65;
}

.legal-section a {
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-section a:hover { opacity: 0.8; }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-top: 8px;
}

.legal-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
}

.legal-table td {
  padding: 10px 14px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.legal-table tr:last-child td { border-bottom: none; }

.legal-back {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-2);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.btn-ghost-sm:hover {
  border-color: var(--text-2);
  color: var(--text);
}

.legal-cross-link {
  font-size: 0.88rem;
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-cross-link:hover { opacity: 0.8; }

/* Footer OSM attribution */
.footer-osm {
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 4px;
}

.footer-osm a {
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-osm a:hover { color: var(--text-2); }

@media (max-width: 600px) {
  .legal-article { padding-top: 80px; }
  .legal-table { display: block; overflow-x: auto; }
  .legal-back { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* =========================================================
   PORTAL — logo grand format (index.html)
   ========================================================= */
/* Hero épuré (audit 2026-06-20) : le bloc marque du portail est dégonflé pour
   laisser le carousel dominer (~60% du regard). Logo + wordmark plus discrets,
   rythme resserré. */
.portal-brand-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.portal-logo-big {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 0 18px rgba(255,45,122,0.40));
}

/* Wordmark dé-emphasé (audit hero 2026-06-20) : le logo + le nom vivent déjà
   dans le header ; ici ils ne sont qu'une signature au-dessus du titre. On les
   rend plus discrets pour que le TITRE mène le copy, et que le carousel domine
   le hero. */
.portal-wordmark {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =========================================================
   HERO SPLIT — téléphone + texte (noctambules.html)
   ========================================================= */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 64px;
  align-items: center;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.h-chip {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.52);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  padding: 4px 12px;
}

.h-chip-rose {
  color: var(--rose);
  background: rgba(255,45,122,0.08);
  border-color: rgba(255,45,122,0.22);
}

/* =========================================================
   PHONE MOCKUP CSS
   ========================================================= */
.phone-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone {
  width: 232px;
  border-radius: 36px;
  background: #08080f;
  border: 2px solid rgba(255,255,255,0.11);
  box-shadow:
    0 0 0 5px rgba(255,255,255,0.035),
    0 48px 96px rgba(0,0,0,0.85),
    0 0 56px rgba(123,97,255,0.24),
    0 0 96px rgba(255,45,122,0.12);
  overflow: hidden;
  position: relative;
}

.phone-screen {
  width: 100%;
  aspect-ratio: 9 / 19;
  position: relative;
  overflow: hidden;
  background: #070710;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: inherit;
}

/* =========================================================
   TESTIMONIAL (établissements)
   ========================================================= */
.testimonial {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 72px 0;
}

.testimonial-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  margin: 0;
}

.testimonial-logo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.testimonial-quote {
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.72;
  max-width: 580px;
  margin: 0;
  font-style: italic;
}

.testimonial-attr {
  font-size: 0.85rem;
  color: var(--text-2);
}

.testimonial-attr strong { color: var(--text); }

/* =========================================================
   ROI SECTION (établissements)
   ========================================================= */
.roi { padding: 88px 0; }

.roi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.roi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.22s, background 0.22s;
}

.roi-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.roi-product {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-3);
  margin: 0;
}

.roi-desc {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.roi-amount {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}

.roi-vs {
  font-size: 0.76rem;
  color: var(--text-3);
  margin: 0;
  font-style: italic;
}

/* =========================================================
   PARTNER FORM (établissements CTA)
   ========================================================= */
.partner-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 500px;
  margin: 32px auto 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.partner-form input,
.partner-form select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.92rem;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
  appearance: none;
}

.partner-form input::placeholder { color: var(--text-3); }

.partner-form input:focus,
.partner-form select:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(123,97,255,0.15);
}
/* Focus clavier explicite (a11y, audit 2026-06-20) : anneau net en plus du
   liseré, pour les inputs qui ont outline:none. */
.partner-form input:focus-visible,
.partner-form select:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
/* État désactivé lisible (a11y, audit 2026-06-20) : pendant l'envoi du
   formulaire les champs passent disabled — on le signale sans les rendre
   illisibles (opacité douce + curseur). */
.partner-form input:disabled,
.partner-form select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--surface);
  color: var(--text-3);
}

.partner-form select { color: var(--text-2); cursor: pointer; }
.partner-form select option { background: #0e0e1f; color: var(--text); }

.partner-form .btn { width: 100%; }

.form-note {
  font-size: 0.8rem;
  color: var(--text-3);
  text-align: center;
  margin: 0;
  line-height: 1.6;
}

.form-link {
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}
.form-link:hover { opacity: 0.8; }

.form-note.ok { color: #00E87A; }
.form-note.err { color: var(--rose); }

/* proof label gold (établissements) */
.proof-label-gold { color: var(--gold) !important; }

/* =========================================================
   HERO CAROUSEL — 8 captures de l'app (index.html)
   ========================================================= */
/* Refonte 2026-06-20 (founder « 8 photos, 1 explication par photo, wooow ») :
   le strip statique de 4 téléphones inclinés devient un VRAI carousel de 8
   captures — piste scroll-snap (swipe natif mobile + desktop), boutons
   prev/next, points, légende live par slide. Accessible (aria, clavier).
   Les anciennes règles .portal-phone-frame--compet / .phone-photo-slot
   (placeholder vert) sont conservées plus bas au cas où on réintroduit un
   slot « capture à venir ». */
.hero-carousel {
  position: relative;
  /* Le carousel domine le hero (founder 2026-06-20) : on lui donne un peu plus
     d'air au-dessus que la copy compacte qui le précède, pour qu'il s'impose
     comme le visuel d'entrée. */
  margin: clamp(34px, 6vh, 64px) auto 0;
  max-width: 1000px;
}
/* Projecteur produit derrière le carousel (clippé par overflow:hidden du hero). */
.hero-carousel-spot {
  position: absolute;
  top: 38%;
  left: 50%;
  width: min(720px, 92vw);
  height: min(720px, 92vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(255,45,122,0.20), rgba(123,97,255,0.09) 42%, transparent 70%);
}

/* Piste défilable (scroll-snap). Une diapo centrée nette, les voisines en
   aperçu sur les côtés (padding = (100% - largeur slide) / 2). */
.phones-strip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 14px calc(50% - 132px);
}
.phones-strip::-webkit-scrollbar { display: none; }
.phones-strip:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
  border-radius: 28px;
}

/* Cadres UNIFORMES : même largeur/hauteur, l'aspect-ratio 9/19.5 fixe la hauteur.
   Le slide centré (.is-active, posé par le JS) est mis en avant ; les autres
   reculent légèrement (échelle + opacité) pour focaliser l'œil sur la capture
   active. */
.portal-phone-frame {
  flex: 0 0 auto;
  width: 264px;
  border-radius: 42px;
  overflow: hidden;
  scroll-snap-align: center;
  box-shadow: 0 18px 64px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.08);
  /* Coverflow accentué (founder 2026-06-20) : les voisines reculent nettement
     (échelle 0.74 + opacité), la centrale domine — image à gauche et à droite,
     centre toujours plus grand. */
  transform: scale(0.74);
  opacity: 0.46;
  filter: saturate(0.85);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
              opacity 0.45s ease, box-shadow 0.45s ease, filter 0.45s ease;
}
.portal-phone-frame.is-active {
  transform: scale(1.08);
  opacity: 1;
  filter: saturate(1.05);
  /* Discipline couleur (audit 2026-06-20) : le halo de la capture centrée suit
     l'accent de SA diapo (--frame-accent posé par le JS : rose / violet / bleu /
     or premium) au lieu d'un rose systématique → cohérence légende ↔ cadre,
     l'or reste réservé aux slides premium. Fallback rose si --frame-accent absent. */
  box-shadow:
    0 32px 100px color-mix(in srgb, var(--frame-accent, var(--rose)) 34%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--frame-accent, var(--rose)) 46%, transparent);
  z-index: 2;
}
/* Survol desktop : on remonte légèrement la capture pointée. */
@media (hover: hover) and (pointer: fine) {
  .portal-phone-frame:hover {
    opacity: 0.85;
    transform: scale(0.82) translateY(-6px);
  }
  .portal-phone-frame.is-active:hover {
    transform: scale(1.08) translateY(-6px);
  }
}

.portal-phone-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  object-position: top center;
}

/* ---- Boutons prev / next ---- */
.hero-carousel-btn {
  position: absolute;
  top: calc(50% - 24px);
  transform: translateY(-50%);
  z-index: 4;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  color: var(--text);
  background: rgba(12,12,26,0.72);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.hero-carousel-btn span { margin-top: -3px; }
.hero-carousel-btn:hover {
  background: rgba(255,45,122,0.18);
  border-color: rgba(255,45,122,0.45);
  transform: translateY(-50%) scale(1.06);
}
.hero-carousel-btn:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}
.hero-carousel-btn:disabled { opacity: 0.32; cursor: default; }
.hero-carousel-prev { left: -4px; }
.hero-carousel-next { right: -4px; }

/* ---- Points de navigation (20 captures) ----
   20 points : on autorise le wrap + un gap compact pour qu'ils tiennent sous le
   carousel sans déborder, même sur les largeurs intermédiaires. Sous 560px ils
   sont masqués au profit des flèches + swipe (un compteur « N / 20 » prendrait
   trop de place et les points deviennent trop petits pour être tappables). */
.hero-carousel-dots {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px auto 0;
  max-width: 420px;
}
.hero-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}
.hero-carousel-dot:hover { background: var(--text-3); }
.hero-carousel-dot:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.hero-carousel-dot.is-active {
  width: 22px;
  border-radius: 999px;
  background: var(--rose);
}
/* Mobile : on masque les 20 points (trop petits/serrés à tapper) ; la navigation
   se fait aux flèches + swipe natif. La légende live indique déjà le contexte. */
@media (max-width: 560px) {
  .hero-carousel-dots { display: none; }
}

/* Légende UNIQUE adaptative sous le carousel — le texte change selon la capture
   centrée (scroll/swipe/flèches/survol). Fallback no-JS = 1re légende inline. */
.phones-caption {
  --pc-accent: var(--rose);
  position: relative;
  z-index: 2;
  margin: 22px auto 0;
  max-width: 600px;
  min-height: 4.4em;
  text-align: center;
  padding: 0 20px;
}
.phones-caption .pc-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-accent);
  margin-bottom: 8px;
  /* L'accent change pendant le fondu `is-swapping` (opacité) — on ne transitionne
     PAS `color` directement : animer une couleur qui dépend d'une custom property
     laisse Chromium dans un état de transition jamais résolu (l'accent restait
     figé sur le rose précédent). Le swap d'opacité masque déjà le changement. */
  transition: opacity 0.28s ease;
}
.phones-caption .pc-text {
  display: block;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text);
  transition: opacity 0.28s ease;
}
.phones-caption .pc-text strong { color: var(--pc-accent); }
.phones-caption.is-swapping .pc-kicker,
.phones-caption.is-swapping .pc-text { opacity: 0; }
/* Au survol d'un cadre, fine bordure d'accent (lien légende ↔ encadré). */
.portal-phone-frame.is-hovered {
  box-shadow: 0 24px 72px rgba(0,0,0,0.5), 0 0 0 2px var(--frame-accent, var(--rose)) !important;
}

/* ---- Responsive : largeur de slide + padding de centrage (= (100% - w)/2) ---- */
@media (max-width: 1180px) {
  .phones-strip { gap: 22px; padding: 14px calc(50% - 120px); }
  .portal-phone-frame { width: 240px; }
}
@media (max-width: 980px) {
  .phones-strip { gap: 18px; padding: 14px calc(50% - 108px); }
  .portal-phone-frame { width: 216px; }
}
/* 561–720px : les points (20) restent visibles → on masque les flèches
   (le swipe natif + les points suffisent, écran assez large pour les tapper). */
@media (max-width: 720px) and (min-width: 561px) {
  .hero-carousel-btn { display: none; }
}
@media (max-width: 720px) {
  .phones-strip { gap: 16px; padding: 12px calc(50% - 92px); }
  .portal-phone-frame { width: 184px; border-radius: 32px; }
}
/* ≤560px : les 20 points sont masqués (trop serrés) → on GARDE les flèches
   comme contrôle explicite, en complément du swipe natif. Compactées pour ne
   pas masquer la capture. */
@media (max-width: 560px) {
  .hero-carousel-btn {
    display: flex;
    width: 38px;
    height: 38px;
    font-size: 1.6rem;
  }
  .hero-carousel-prev { left: 2px; }
  .hero-carousel-next { right: 2px; }
}
@media (max-width: 480px) {
  .phones-strip { gap: 14px; padding: 10px calc(50% - 78px); }
  .portal-phone-frame { width: 156px; border-radius: 26px; }
  .phones-caption .pc-text { font-size: 0.92rem; }
}
@media (max-width: 400px) {
  .phones-strip { gap: 12px; padding: 10px calc(50% - 68px); }
  .portal-phone-frame { width: 136px; border-radius: 24px; }
}

/* =========================================================
   FONDATEUR
   ========================================================= */
.founder {
  padding: 72px 0;
  background: var(--night);
  border-top: 1px solid var(--border);
}

/* Mot du fondateur dégonflé (founder 2026-06-17 : « un peu plus petit »). */
.founder-title {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 26px;
  color: var(--text);
}

.founder-quote {
  margin: 0;
  border-left: 2px solid;
  border-image: var(--grad) 1;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.founder-quote p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}

.founder-quote p strong { color: var(--text); font-weight: 600; }

.founder-sig {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.founder-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.founder-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.founder-role {
  display: block;
  font-size: 0.8rem;
  color: var(--text-3);
  margin-top: 2px;
}

/* portal-note city badge */
.portal-note-city {
  display: inline-block;
  background: rgba(255,45,122,0.12);
  color: var(--rose);
  border: 1px solid rgba(255,45,122,0.25);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* =========================================================
   RESPONSIVE — tous composants, breakpoints systématiques
   ========================================================= */

/* ── 960px : hero split téléphone ───────────────────────── */
@media (max-width: 960px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-phone { order: -1; }
  .roi-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── 900px : grids 3→2 colonnes ─────────────────────────── */
@media (max-width: 900px) {
  .feature-grid,
  .value-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .not-grid { grid-template-columns: 1fr; gap: 16px; }
  .audience-grid { grid-template-columns: 1fr; }
  .portal-doors { grid-template-columns: 1fr; max-width: 100%; gap: 16px; }
  .b2b-orb { width: 440px; height: 440px; top: -140px; right: -120px; }
}

/* ── 750px : réduction des gaps ─────────────────────────── */
@media (max-width: 750px) {
  .feature-grid,
  .value-grid,
  .proof-row { gap: 14px; }
}

/* ── 720px : grids 2→1 colonne (repli nav géré au bloc 920px) ─────────────── */
@media (max-width: 720px) {
  .feature-grid,
  .not-grid,
  .audience-grid,
  .value-grid,
  .proof-row,
  .steps { grid-template-columns: 1fr; }

  .premium-benefits { grid-template-columns: 1fr; }

  .hero { min-height: 86vh; }
  .portal-hero { min-height: auto; padding-top: 56px; }
  .portal-cue { margin-top: 32px; }

  /* Tableau offre établissements : scroll horizontal */
  .offer-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .offer-table th,
  .offer-table td { padding: 12px 10px; font-size: 0.87rem; }
  .offer-feature,
  .offer-table tbody th[scope="row"] { font-size: 0.82rem; font-weight: 500; }

  /* Témoignage */
  .testimonial-quote { font-size: 1rem; }
}

/* ── 600px : form 1 colonne, roi, not-col ───────────────── */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .partner-form input,
  .partner-form select { padding: 12px 14px; font-size: 0.88rem; }

  .roi-grid { grid-template-columns: 1fr; max-width: 100%; margin-left: 0; margin-right: 0; }
  .roi-card { padding: 20px 16px; }

  .not-col { padding: 20px; }
  .not-col h3 { font-size: 0.95rem; }

  .phone { width: 196px; }
  .portal-logo-big { width: 56px; height: 56px; }
  .portal-wordmark { font-size: 1.7rem; }

  .legal-article { padding-top: 80px; }
  .legal-table { display: block; overflow-x: auto; }
  .legal-back { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── 480px : mobile ultra ───────────────────────────────── */
@media (max-width: 480px) {
  .hero-split { gap: 24px; }
  .phone { width: 168px; }

  .portal-brand-hero { gap: 12px; margin-bottom: 18px; }
  .portal-logo-big { width: 48px; height: 48px; }
  .portal-wordmark { font-size: 1.4rem; }
  .portal-doors { gap: 12px; }

  .not-col { padding: 16px; }

  .feature-card p,
  .value-card p { font-size: 0.88rem; line-height: 1.5; }

  .premium-benefits { gap: 8px; }
  .premium-benefits li { padding: 10px 12px; font-size: 0.9rem; }

  .audience-card { padding: 24px 18px; }
  .audience-card h3 { font-size: 1.3rem; }

  .nav-links { padding: 12px 16px 18px; gap: 2px; }
  .nav-links a { padding: 10px 2px; }

  .hero-title,
  .b2b-title { font-size: clamp(2rem, 8vw, 5rem); }
  .portal-title { font-size: clamp(2rem, 7vw, 5rem); }

  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; text-align: center; }

  .h-chip { font-size: 0.7rem; padding: 3px 10px; }
}

/* ── 420px : container serré ────────────────────────────── */
@media (max-width: 420px) {
  .container { padding: 0 14px; }
  .btn { width: 100%; text-align: center; }
  .hero-actions .btn { width: auto; }
  .door-title { font-size: 1.5rem; }
}

/* =========================================================
   SCREENSHOTS — galerie "L'app en vrai"
   ========================================================= */
.screenshots {
  padding: 88px 0;
  background: var(--night-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* Ancienne galerie grille (.screens-grid/.screen-card/.screen-phone/.screen-label/
   .screen-desc) SUPPRIMÉE (dé-slop 2026-06-17) : remplacée par les sections
   alternées .feature-rows ci-dessous. */

/* ===================== Sections alternées image + texte (option A, 2026-06-17)
   Remplace la galerie carousel : chaque capture porte un message, alternance
   gauche/droite (style Linear/Vercel). Empile en mobile. ===================== */
.feature-rows {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 9vw, 104px);
}
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}
.feature-row:nth-child(even) .feature-shot { order: 2; }
.feature-shot {
  display: flex;
  justify-content: center;
}
.feature-shot img {
  width: 100%;
  max-width: 280px;
  border-radius: 30px;
  border: 1px solid var(--border);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
  cursor: zoom-in;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-shot img:hover { transform: translateY(-6px); }
.feature-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 14px;
}
.feature-kicker--safe { color: var(--safe); }  /* Safe Home = cyan */
.feature-kicker--sport { color: var(--sport); }  /* Compétition = vert sport */
/* Safe Home = cyan partout où le terme apparaît dans le corps de texte */
.safe-home { color: var(--safe); }
.feature-head {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 14px;
}
.feature-copy {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 42ch;
}
@media (max-width: 768px) {
  .feature-rows { gap: 48px; margin-top: 36px; }
  .feature-row { grid-template-columns: 1fr; gap: 22px; }
  /* En mobile, toujours capture EN HAUT puis texte (pas d'inversion). */
  .feature-row:nth-child(even) .feature-shot { order: 0; }
  .feature-shot img { max-width: 220px; }
  .feature-copy { max-width: none; }
}

/* Zoom hint (.screen-zoom-hint) + ancien lightbox (.lightbox*) + responsive
   carousel .screens-grid SUPPRIMÉS (dé-slop 2026-06-17) : galerie remplacée par
   .feature-rows (responsive géré dans son propre @media 768px), lightbox unifié
   en .np-lightbox ci-dessous. */

/* ===================== Lightbox screenshots (clic = agrandir) ===================== */
.np-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 7, 16, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
}
.np-lightbox.open { display: flex; }
.np-lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 92vw;
}
.np-lightbox-figure img {
  max-width: 92vw;
  max-height: 78vh;
  border-radius: 18px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.6);
}
.np-lightbox-cap {
  max-width: 52ch;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-2);
}
/* Bouton fermer (croix CSS pure, pas d'icône/emoji) */
.np-lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  z-index: 1;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.np-lightbox-close::before,
.np-lightbox-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}
.np-lightbox-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.np-lightbox-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.np-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--text-2);
  transform: scale(1.06);
}

/* ===================== Lueur d'énergie qui suit le curseur (desktop) ===================== */
/* Wrapper plein écran qui clippe la lueur (anti scroll horizontal — la lueur
   440px déborderait près des bords). */
.np-cursor-glow-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.np-cursor-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 440px;
  height: 440px;
  margin: -220px 0 0 -220px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    circle,
    rgba(255, 45, 122, 0.16),
    rgba(123, 97, 255, 0.10) 42%,
    transparent 70%
  );
  mix-blend-mode: screen;
  will-change: transform;
}
.np-cursor-glow.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .np-cursor-glow { display: none; }
}

/* =========================================================
   PORTE D'ENTRÉE BETA (gate client-side — teaser, pas une vraie sécurité)
   Code valide = « BETA » (sensible à la casse). Persisté en localStorage.
   Anti-flash : un script inline dans <head> pose .np-locked sur <html> AVANT
   le rendu du <body> ; tant que verrouillé, le contenu est masqué et le
   défilement bloqué. L'overlay est injecté par script.js.
   ========================================================= */
html.np-locked body > *:not(.np-gate) {
  visibility: hidden !important;
}
html.np-locked,
html.np-locked body {
  overflow: hidden !important;
}

.np-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(123, 97, 255, 0.18), transparent 55%),
    radial-gradient(120% 90% at 50% 100%, rgba(255, 45, 122, 0.16), transparent 55%),
    var(--night);
  /* visible immédiatement quand verrouillé (pas d'animation d'entrée qui
     laisserait voir le contenu derrière). */
  animation: none;
}
.np-gate[hidden] { display: none; }

/* Sortie de la porte : fondu doux une fois le bon code saisi. */
.np-gate.np-gate-leaving {
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.np-gate-inner {
  width: 100%;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.np-gate-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.np-gate-brand img { width: 44px; height: 44px; }
.np-gate-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
}
.np-gate-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0;
}
.np-gate-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  margin: 4px 0 2px;
}
.np-gate-sub {
  color: var(--text-2);
  font-size: 0.98rem;
  max-width: 34ch;
  margin: 0 auto 20px;
  line-height: 1.5;
}
.np-gate-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}
.np-gate-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
}
.np-gate-input {
  width: 100%;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}
.np-gate-input::placeholder {
  color: var(--text-3);
  letter-spacing: 0.12em;
}
.np-gate-input:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(255, 45, 122, 0.18);
}
.np-gate.np-gate-error .np-gate-input {
  border-color: var(--rose);
  animation: np-gate-shake 0.4s ease;
}
@keyframes np-gate-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.np-gate-submit {
  width: 100%;
  padding: 15px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 8px 30px rgba(123, 97, 255, 0.35);
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}
.np-gate-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255, 45, 122, 0.45);
}
.np-gate-submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.np-gate-msg {
  min-height: 1.2em;
  font-size: 0.86rem;
  color: var(--rose);
  margin: 2px 0 0;
}
.np-gate-note {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
@media (prefers-reduced-motion: reduce) {
  .np-gate.np-gate-error .np-gate-input { animation: none; }
  .np-gate.np-gate-leaving { transition: none; }
}
