/* ============================================================
   EXPRISM — Landing
   Fond sombre cinéma, faisceau de lumière, grain fin. DM Sans.
   Sobre et raffiné (DA Maxime). La simplicité comme sophistication.
   ============================================================ */

:root {
  /* contraste franc : blanc net sur gris */
  --text: #ffffff;
  --body: rgba(255, 255, 255, 0.82);
  --muted: rgba(255, 255, 255, 0.56);
  --faint: rgba(255, 255, 255, 0.34);

  /* aura de la marque */
  --cyan: #5fd0ff;
  --indigo: #7a9bff;
  --violet: #b07bff;

  /* dégradé MAGIQUE multicolore, façon Apple : lumineux, légèrement pastel,
     saturé mais jamais criard. Un seul dégradé ancré au viewport pour que
     chaque usage révèle exactement les mêmes teintes au même endroit. */
  --rainbow: linear-gradient(100deg,
    #c77dff 0%, #7d8bff 17%, #4fb6ff 33%, #45e0d0 49%,
    #7fe5a0 60%, #ffe27a 73%, #ff9d7a 86%, #ff7eb3 100%);

  /* les quatre flux qui convergent */
  --s1: #4fb6ff;
  --s2: #7d8bff;
  --s3: #b07bff;
  --s4: #ff7eb3;

  --line: rgba(255, 255, 255, 0.1);
  --card: rgba(255, 255, 255, 0.05);
  --max: 1060px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0; min-width: 320px;
  color: var(--text);
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.65; letter-spacing: -0.012em;
  overflow-x: hidden;
  /* Gris échantillonné depuis le fond du logo + vignette cinéma légère */
  background:
    radial-gradient(120% 100% at 50% 38%, transparent 58%, rgba(0,0,0,0.35) 100%),
    radial-gradient(140% 120% at 50% 30%, #35383e 0%, #282b32 48%, #1a1d23 100%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2 { margin: 0; font-weight: 800; letter-spacing: -0.038em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- grain cinéma ---------- */
.grain {
  position: fixed; inset: -60%; z-index: 0; pointer-events: none;
  width: 220%; height: 220%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.2; mix-blend-mode: overlay;
  animation: grain 0.6s steps(3) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 33% { transform: translate(-2%,1.5%); }
  66% { transform: translate(1.5%,-2%); } 100% { transform: translate(0,0); }
}

main, .hero, .footer { position: relative; z-index: 1; }

/* ---------- révélation au scroll ---------- */
/* apparition : émerge de la lumière (flou qui se précise), pas de parallax */
.reveal { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(11px); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), filter 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }

/* ---------- marque ---------- */
.brand { display: inline-flex; align-items: center; gap: 0.55rem; }
.wordmark { font-weight: 700; font-size: 1.04rem; color: var(--muted); letter-spacing: 0.01em; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100svh; display: flex; flex-direction: column;
  padding: 1.6rem clamp(1.2rem, 5vw, 3rem) 3rem; text-align: center;
}
.hero > .brand { align-self: flex-start; }

/* ---------- sélecteur de langue ---------- */
.lang-switch {
  position: absolute;
  top: 1.4rem;
  right: clamp(1.2rem, 5vw, 3rem);
  display: flex;
  gap: 0.2rem;
  align-items: center;
  z-index: 10;
}
.lang-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.lang-btn.active {
  color: var(--text);
  border-color: var(--line);
  background: rgba(255,255,255,0.06);
}
.lang-btn:hover {
  color: var(--text);
}

/* ---------- Renvoi vers la rubrique publique (16/09/2026) ---------- */
/* ⛔ LE SPECTRE MARQUE L'ACTION, JAMAIS LE REPOS. Au repos c'est une pilule calme ; la
   traversée de couleur ne s'allume qu'au survol et au focus. Un titre de marque qui boucle en
   permanence devient un fond d'écran : il cesse de vouloir dire « ça travaille »
   (DESIGN-UNIVERS §4). */
.nav-tutoriels {
  border-color: var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  letter-spacing: 0.01em;
  padding: 0.34rem 0.85rem;
  line-height: 1.2;
  text-align: center;
}
.nav-tutoriels:hover {
  border-color: var(--cyan);
  background: rgba(255, 255, 255, 0.11);
}
.nav-tutoriels:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ⛔ LES DEUX LIBELLÉS VIVENT DANS LE HTML, LE CSS CHOISIT LEQUEL (16/09/2026). `i18n.js` pose
   `lang` sur `<html>` : une règle suffit — aucun libellé n'a besoin d'être ajouté à un fichier
   qui porte encore une modification de l'utilisateur en attente de commit. */
.tuto-en { display: none; }
html[lang="en"] .tuto-fr { display: none; }
html[lang="en"] .tuto-en { display: inline; }

.hero-inner {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  max-width: 900px; margin: 0 auto;
}
.hero-logo { margin-bottom: 1.7rem; }
.hero-logo img {
  width: min(40vw, 220px);
  border-radius: 23%;                 /* icône d'app carrée arrondie */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 30px 80px rgba(0,0,0,0.42),
    0 0 96px rgba(255,255,255,0.18);
  animation: float 13s var(--ease) infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hero h1 { font-size: clamp(2.5rem, 6.6vw, 5rem); line-height: 1.02; font-weight: 800; max-width: 16ch; }
/* multicolore vivant : le spectre complet traverse le texte et coule lentement
   (façon Apple). Même dégradé partout, mais on en voit toutes les teintes. */
.grad, .proof-punch, .rush-final {
  background-image: var(--rainbow);
  background-size: 240% auto; background-position: 0% 50%;
  animation: gradFlow 2.6s linear infinite;
}
@keyframes gradFlow {
  to { background-position: -240% 50%; }
}
.grad {
  display: inline-block;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.promise { margin-top: 1.6rem; font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 600; color: var(--text); }
.hero-sub { margin-top: 0.6rem; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.15rem); }

/* chevron blanc fin = invitation à descendre, épuré et lumineux */
.tri-cue { position: relative; width: 30px; height: 20px; margin: 3rem auto 0; }
.tri-cue svg { width: 100%; height: 100%; animation: tricue 1.9s var(--ease) infinite; filter: drop-shadow(0 0 6px rgba(255,255,255,0.35)); }
@keyframes tricue {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(6px); opacity: 0.95; }
}

/* ============================================================
   BANDES
   ============================================================ */
.band { padding: clamp(5rem, 12vw, 9rem) clamp(1.2rem, 5vw, 3rem); }
.wrap { max-width: var(--max); margin: 0 auto; }
.wrap.center { text-align: center; }
.kicker { color: var(--text); font-size: clamp(1.25rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.band h2 { font-size: clamp(2rem, 5.4vw, 3.8rem); line-height: 1.04; }
.big { color: var(--body); font-size: clamp(1.12rem, 1.9vw, 1.4rem); line-height: 1.6; }
.big + .big { margin-top: 1.3rem; }
.big.middle { max-width: 42rem; margin-left: auto; margin-right: auto; }

.problem { text-align: center; }
/* Vrai triangle typographique : UNE seule taille, un interligne RÉGULIER, chaque
   ligne centrée. La forme naît uniquement de la longueur décroissante des lignes
   (technique de mise en page classique). Les lettres ne sont jamais déformées et
   les écarts entre lignes restent identiques. Typo fine et sûre d'elle. */
.tri { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.tri-row {
  color: var(--body); text-align: center; white-space: nowrap;
  font-size: clamp(1.05rem, 2.7vw, 1.7rem);
  line-height: 1.95; letter-spacing: -0.012em; font-weight: 300;
}
.tri-row:first-child { color: var(--text); font-weight: 500; }
/* mots importants mis en avant */
.hot { color: var(--text); font-weight: 600; }
@media (max-width: 560px) {
  .tri-row { white-space: normal; line-height: 1.6; }
}

/* ============================================================
   CONVERGENCE (les 4 points → Exprism)
   ============================================================ */
.merge { max-width: 720px; margin: 3rem auto 3.4rem; }
.streams {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; align-items: start;
}
.stream {
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  padding: 1.2rem 0.7rem; border-radius: 16px; min-height: 7rem; justify-content: center;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
  font-size: 0.94rem; font-weight: 600; color: var(--text); line-height: 1.25; text-align: center;
  cursor: pointer; user-select: none;
  transform: translateY(var(--float-y, 0)) rotate(var(--float-r, 0deg));
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
  animation: streambob 6.5s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}
/* léger décalage organique : la rangée respire, pas un alignement rigide */
.stream:nth-child(1) { --float-y: -6px; --float-r: -1.1deg; --float-delay: 0s; }
.stream:nth-child(2) { --float-y: 7px;  --float-r: 0.9deg;  --float-delay: 0.5s; }
.stream:nth-child(3) { --float-y: -3px; --float-r: -0.7deg; --float-delay: 1s; }
.stream:nth-child(4) { --float-y: 9px;  --float-r: 1.2deg;  --float-delay: 1.5s; }
@keyframes streambob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}
.stream:hover {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 22px 50px rgba(0,0,0,0.5), 0 0 30px rgba(120,220,245,0.18);
}
.stream:active { transform: scale(0.96) translateY(var(--float-y, 0)); }
.stream svg {
  width: 30px; height: 30px;
  filter: drop-shadow(0 0 10px currentColor);
  transition: transform 0.5s var(--ease);
}
.stream.pulse svg { animation: streampulse 0.6s var(--ease); }
@keyframes streampulse {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.35) rotate(-8deg); }
  70%  { transform: scale(0.92) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.stream:nth-child(1) svg { color: var(--s1); }
.stream:nth-child(2) svg { color: var(--s2); }
.stream:nth-child(3) svg { color: var(--s3); }
.stream:nth-child(4) svg { color: var(--s4); }

.funnel { display: block; width: 100%; height: 150px; margin-top: -2px; filter: drop-shadow(0 6px 14px rgba(160,210,255,0.25)); }

.merge-core { position: relative; display: grid; place-items: center; margin-top: -14px; }
/* halo blanc de fusion : les quatre flux entrent dans le logo et libèrent une
   lumière blanche — vitesse de la lumière, transcendant. Rien de chargé. */
.merge-halo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 280px; height: 280px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle,
    rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.16) 30%,
    rgba(255,255,255,0.07) 48%, transparent 70%);
  filter: blur(6px);
  animation: haloBreathe 4.5s var(--ease) infinite;
}
@keyframes haloBreathe {
  0%,100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); }
  50%     { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}
.merge-logo {
  position: relative; z-index: 1;
  width: 116px; border-radius: 23%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 18px 50px rgba(0,0,0,0.42),
    0 0 64px rgba(255,255,255,0.17);
  animation: corepulse 4.5s var(--ease) infinite;
}
@keyframes corepulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 18px 50px rgba(0,0,0,0.42), 0 0 50px rgba(255,255,255,0.14); }
  50%     { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 18px 50px rgba(0,0,0,0.42), 0 0 78px rgba(255,255,255,0.22); }
}

.proof-punch {
  margin-top: 2.4rem; font-size: clamp(1.9rem, 5vw, 3.3rem); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.035em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(150,200,255,0.18));
}
.soon {
  margin-top: 2rem; display: inline-flex; align-items: center;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
  padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px dashed rgba(255,255,255,0.22);
  text-decoration: none; transition: border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.soon:hover {
  border-color: rgba(255,255,255,0.5);
  color: var(--text);
  box-shadow: 0 0 18px rgba(255,255,255,0.08);
}

/* ============================================================
   AVANT / APRÈS
   ============================================================ */
.ba-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1.2rem, 3.5vw, 2.6rem); align-items: center;
}
.ba-col {
  padding: 2.2rem 1.8rem; border-radius: 22px; min-height: 22rem;
  display: flex; flex-direction: column; border: 1px solid var(--line);
}
.ba-tag {
  align-self: flex-start; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.6rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--line);
}
.ba-tag.glow { color: var(--text); border-color: rgba(43,208,228,0.45); box-shadow: 0 0 22px rgba(43,208,228,0.18); }

.before { background: #181920; }
.app-pile { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: auto; padding-bottom: 1.6rem; }
.app-pile span {
  display: inline-flex; align-items: center; height: 2.1rem; padding: 0 0.85rem; border-radius: 9px;
  font-size: 0.86rem; font-weight: 500; color: var(--muted);
  background: rgba(255,255,255,0.05); border: 1px solid var(--line); filter: grayscale(1);
}
.app-pile span:nth-child(2n) { transform: rotate(-2.2deg); }
.app-pile span:nth-child(3n) { transform: rotate(1.8deg); }
.ba-col p { color: var(--body); font-size: 1rem; }
.before p { color: var(--muted); }
.ba-arrow { color: rgba(255,255,255,0.35); display: grid; place-items: center; }

.after {
  background: radial-gradient(60% 60% at 50% 34%, rgba(255,255,255,0.1), transparent 70%), var(--card);
  align-items: center; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.after-mark { margin: auto 0; }
.after-mark img {
  width: 8.2rem; border-radius: 23%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 18px 44px rgba(0,0,0,0.42), 0 0 56px rgba(255,255,255,0.16);
}

/* ============================================================
   CRESCENDO
   ============================================================ */
.rush { text-align: center; padding-top: clamp(3rem, 8vw, 6rem); }
.rush-line { font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--faint); }
.rush-line:nth-of-type(1) { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
.rush-line:nth-of-type(2) { font-size: clamp(1.7rem, 4vw, 2.9rem); color: rgba(243,242,239,0.5); margin-top: 0.4rem; }
.rush-line:nth-of-type(3) { font-size: clamp(1.9rem, 4.6vw, 3.4rem); color: rgba(243,242,239,0.72); margin-top: 0.4rem; }
.rush-final {
  margin-top: 1.6rem; font-size: clamp(2.3rem, 6.4vw, 5rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.04em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(150,200,255,0.2));
}

/* ============================================================
   FONDATEUR
   ============================================================ */
.me .wrap { max-width: 44rem; text-align: center; }
.me .kicker { margin-bottom: 1.4rem; }
.me-text { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.6; color: var(--body); }

/* ============================================================
   OFFRE
   ============================================================ */
.offer h2 { margin-bottom: 1.6rem; }
.price-card {
  max-width: 30rem; margin: 3.5rem auto 0; padding: 2.6rem 2.2rem; text-align: center; border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.16);
  background: radial-gradient(80% 70% at 50% 0%, rgba(255,255,255,0.08), transparent 66%), rgba(255,255,255,0.045);
  box-shadow: 0 36px 90px rgba(0,0,0,0.38);
}
.price-tag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.price { margin: 0.8rem 0 1.8rem; display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; }
.price strong { font-size: clamp(3rem, 9vw, 4rem); font-weight: 900; letter-spacing: -0.04em; }
.price span { color: var(--muted); font-size: 1rem; }
.perks { display: grid; gap: 0.8rem; margin-bottom: 2rem; text-align: left; }
.perks li { position: relative; padding-left: 1.9rem; color: var(--body); font-size: 1rem; }
.perks li::before {
  /* triangle = symbole de l'application */
  content: ""; position: absolute; left: 0.1rem; top: 0.45rem; width: 0.85rem; height: 0.85rem;
  background: rgba(255,255,255,0.82);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.18));
}
.seats { margin-top: 1.2rem; color: var(--faint); font-size: 0.88rem; }
.seats strong { color: var(--muted); }

/* ---------- formulaire liste d'attente ---------- */
.waitlist { display: grid; gap: 0.7rem; }
.waitlist .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist input[type="email"],
.waitlist input[type="text"] {
  width: 100%; height: 3.4rem; padding: 0 1.3rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06);
  color: var(--text); font: inherit; font-size: 1rem; text-align: center;
  outline: none; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.waitlist input[type="email"]::placeholder,
.waitlist input[type="text"]::placeholder { color: var(--faint); }
.waitlist input[type="email"]:focus,
.waitlist input[type="text"]:focus {
  border-color: rgba(255,255,255,0.42);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}
.waitlist-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
@media (max-width: 480px) { .waitlist-row { grid-template-columns: 1fr; } }

/* Choix du matériel : Mac / Windows en pilule segmentée */
.waitlist .os-pick { border: 0; padding: 0; margin: 0.1rem 0 0; }
.waitlist .os-pick legend {
  width: 100%; text-align: center; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 0.55rem;
}
.os-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.os-opt { position: relative; }
.os-opt input { position: absolute; opacity: 0; pointer-events: none; }
.os-opt span {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  height: 3.2rem; border-radius: 999px; cursor: pointer; user-select: none;
  border: 1px solid var(--line); background: rgba(255,255,255,0.06);
  color: var(--muted); font-weight: 600; font-size: 1rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.os-opt span::before {
  content: ""; width: 1.05rem; height: 1.05rem; border-radius: 50%; flex: none;
  border: 1.5px solid var(--faint); background: transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.os-opt:hover span { border-color: rgba(255,255,255,0.3); color: var(--text); }
.os-opt input:checked + span {
  color: #15161b; border-color: rgba(255,255,255,0.36);
  background-image: var(--rainbow); background-size: 240% auto; background-position: 0% 50%;
  animation: gradFlow 2.6s linear infinite;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}
.os-opt input:checked + span::before {
  border-color: rgba(21,22,27,0.7);
  background: rgba(21,22,27,0.85);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}
.os-opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }
.waitlist .btn[disabled] { opacity: 0.6; pointer-events: none; }
.form-note { min-height: 1.2em; font-size: 0.92rem; color: var(--muted); }
.form-note.ok { color: #7fe5a0; font-weight: 600; }
.form-note.err { color: #ff9d7a; }
.newsletter-note {
  font-size: 0.82rem;
  color: var(--faint);
  text-align: center;
  margin: 0;
  line-height: 1.4;
}
.waitlist.done input[type="email"], .waitlist.done input[type="text"], .waitlist.done .btn, .waitlist.done .os-pick { display: none; }
.waitlist.done .form-note { font-size: 1.05rem; }
.waitlist.done .newsletter-note { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 3.4rem;
  padding: 0 1.6rem; border-radius: 999px; font-weight: 600; font-size: 1.02rem; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-primary {
  color: #15161b;
  background-image: var(--rainbow);
  background-size: 240% auto;
  background-position: 0% 50%;
  border-color: rgba(255,255,255,0.36);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
  animation: gradFlow 2.6s linear infinite;
}
.btn-primary:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.58);
  box-shadow: 0 18px 44px rgba(0,0,0,0.28), 0 0 26px rgba(255,255,255,0.12);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding-top: clamp(2rem, 6vw, 4rem); }
.faq h2 { text-align: center; margin-bottom: 1.4rem; }
.faq .big.middle { margin-bottom: 3.4rem; }

.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 0.9rem; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}
.faq-item[open] {
  border-color: rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.075);
  box-shadow: 0 22px 50px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.06);
}
.faq-item summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 1.5rem;
  font-size: 1.06rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em;
  transition: color 0.3s var(--ease);
}
.faq-item summary:hover { color: #fff; }
.faq-item[open] summary {
  text-shadow: 0 0 18px rgba(255,255,255,0.2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex-shrink: 0; width: 11px; height: 11px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.35s var(--ease);
}
.faq-item[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
  border-color: var(--text);
}

.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.faq-item[open] .faq-body {
  grid-template-rows: 1fr;
}
.faq-body .faq-inner {
  overflow: hidden;
  padding: 0 1.5rem 1.5rem;
  color: var(--body); font-size: 0.98rem;
  animation: faqIn 0.6s var(--ease) both;
}
.faq-inner p { margin-bottom: 0.8rem; }
.faq-inner p:last-child { margin-bottom: 0; }
.faq-inner strong { color: var(--text); font-weight: 600; }

@keyframes faqIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ---------- FAQ : poser une question ---------- */
.faq-ask-wrap {
  margin-top: 1.6rem;
}
.faq-ask {
  border-color: rgba(255,255,255,0.2) !important;
  background: radial-gradient(60% 50% at 50% 0%, rgba(255,255,255,0.1), transparent 70%), rgba(255,255,255,0.04) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 20px 50px rgba(0,0,0,0.35) !important;
}
.faq-ask[open] {
  border-color: rgba(255,255,255,0.32) !important;
  background: radial-gradient(60% 50% at 50% 0%, rgba(255,255,255,0.14), transparent 70%), rgba(255,255,255,0.07) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 30px 70px rgba(0,0,0,0.45) !important;
}
.faq-ask-highlight {
  background-image: var(--rainbow);
  background-size: 240% auto;
  animation: gradFlow 3.6s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
.faq-form {
  display: grid;
  gap: 0.8rem;
}
.faq-form .hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
}
.faq-form input[type="text"],
.faq-form textarea {
  width: 100%;
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
  resize: vertical;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq-form input[type="text"]::placeholder,
.faq-form textarea::placeholder {
  color: var(--faint);
}
.faq-form input[type="text"]:focus,
.faq-form textarea:focus {
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.faq-form .btn {
  width: 100%;
  height: 3rem;
  font-size: 0.95rem;
}
.faq-form .form-note {
  min-height: 1.2em;
  font-size: 0.88rem;
  text-align: center;
}
.faq-form .form-note.ok { color: #7fe5a0; font-weight: 600; }
.faq-form .form-note.err { color: #ff9d7a; }

/* Questions chargées dynamiquement */
.faq-user-item .faq-user-pseudo {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,0.08);
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  margin-right: 0.6rem;
  vertical-align: middle;
}
.faq-user-item[open] .faq-user-pseudo {
  background: rgba(255,255,255,0.14);
  color: var(--text);
}

/* Admin : boutons répondre / supprimer */
.faq-admin-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.faq-admin-btn {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.faq-admin-btn:hover {
  background: rgba(255,255,255,0.15);
  color: var(--text);
  border-color: rgba(255,255,255,0.3);
}
.faq-admin-btn.danger {
  border-color: rgba(255,126,126,0.25);
  color: rgba(255,126,126,0.7);
}
.faq-admin-btn.danger:hover {
  background: rgba(255,126,126,0.15);
  color: #ff7e7e;
  border-color: rgba(255,126,126,0.4);
}
.faq-admin-btn.approve {
  border-color: rgba(126,255,160,0.25);
  color: rgba(126,255,160,0.7);
}
.faq-admin-btn.approve:hover {
  background: rgba(126,255,160,0.12);
  color: #7effa0;
  border-color: rgba(126,255,160,0.4);
}

/* Badge "en attente de validation" */
.faq-pending-badge {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(255,179,71,0.15);
  color: #ffb347;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.faq-user-pending {
  border-color: rgba(255,179,71,0.25) !important;
}

.faq-answer-form {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.faq-answer-form textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  outline: none;
  resize: vertical;
  min-height: 4rem;
}
.faq-answer-form textarea:focus {
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.faq-answer-form .faq-admin-btn {
  justify-self: start;
}

@media (prefers-reduced-motion: reduce) {
  .faq-body .faq-inner { animation: none; }
  .faq-body { transition: none; }
}

/* ---------- footer ---------- */
/* ---------- Appel vers Tutoriels & mises à jour (16/09/2026) ---------- */
/* Le contenant se tait : un trait, un rayon, un fond. La couleur va à l'action. */
.tuto-appel {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.4rem) clamp(1.2rem, 5vw, 3rem) 0;
}
.tuto-appel-inner {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
}
.tuto-appel-inner h2 { font-size: clamp(1.3rem, 3.2vw, 1.75rem); }
.tuto-appel-inner p { color: var(--body); max-width: 58ch; margin: 0.8rem auto 0; }
.tuto-appel-lien {
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0.62rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.tuto-appel-lien:hover { border-color: var(--cyan); background: rgba(255, 255, 255, 0.12); }
.tuto-appel-lien:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

@media (max-width: 640px) {
  /* ⛔ UN LIBELLÉ ROGNÉ SE LIT COMME UNE FAUTE DE FRAPPE (DESIGN.md §4) : il passe à la ligne
     plutôt que d'être coupé. */
  .nav-tutoriels { max-width: 8.6rem; padding: 0.32rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-tutoriels, .tuto-appel-lien { transition: none; }
}

.footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding: 2.4rem clamp(1.2rem, 5vw, 3rem); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem;
}
.footer .muted { color: var(--faint); }
.footer-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-links a { color: var(--muted); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.footer-links a:hover { color: var(--text); border-color: var(--line); }

/* ---------- kindness bar (bottom easter egg) ---------- */
.kindness-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  background: #1a1d23;
  padding: 1.1rem clamp(1.2rem, 5vw, 3rem);
  text-align: center; font-size: 0.92rem; line-height: 1.55; color: var(--body);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kindness-bar.show { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .kindness-bar { transition: none; }
}

/* ---------- mentions légales / confidentialité ---------- */
.legal-hero { min-height: 0; padding-top: 1.4rem; }
.legal-hero .hero-inner { padding: 3.2rem 0 1.4rem; }
.legal-hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.legal-hero .hero-logo { margin-bottom: 1.2rem; }
.legal-hero .hero-logo img { width: 84px; animation: none; }

.legal { position: relative; z-index: 1; padding: 1rem clamp(1.2rem, 5vw, 3rem) 5rem; }
.legal-block { max-width: 760px; margin: 0 auto 2.4rem; }
.legal-block h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.12; margin: 0 0 1.2rem;
  padding-top: 1.8rem; border-top: 1px solid var(--line);
}
.legal-block h2:first-child { border-top: none; padding-top: 0; }
.legal h3 { margin: 2rem 0 0.6rem; font-size: 1.06rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.legal p { color: var(--body); font-size: 1rem; line-height: 1.7; margin-bottom: 0.8rem; }
.legal p.legal-intro { color: var(--text); font-size: 1.08rem; }
.legal a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s var(--ease); }
.legal a:hover { color: #fff; }
.legal strong { color: var(--text); }

.footer-legal { flex-direction: column; align-items: center; text-align: center; gap: 0.8rem; }
.legal-cta { width: auto; height: 2.9rem; padding: 0 2.2rem; margin-top: 0.6rem; }

/* ---------- consentement RGPD (case à cocher) ---------- */
.waitlist .consent {
  display: flex; align-items: flex-start; justify-content: center; gap: 0.55rem;
  text-align: left; padding: 0 0.4rem; font-size: 0.85rem; line-height: 1.45; color: var(--muted); cursor: pointer;
}
.waitlist .consent input { margin-top: 0.28rem; width: 1rem; height: 1rem; flex-shrink: 0; accent-color: #fff; cursor: pointer; }
.waitlist .consent a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.waitlist .consent a:hover { color: #fff; }
.waitlist.done input[type="checkbox"], .waitlist.done .consent { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .streams { grid-template-columns: repeat(2, 1fr); }
  .funnel { display: none; }
  .merge-core { margin-top: 1.6rem; }
  .ba-grid { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); margin: 0 auto; }
  .ba-col { min-height: auto; }
}
@media (max-width: 540px) {
  body { font-size: 16px; }
  .hero-logo img { width: 58vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; }
}

/* ============================================================
   DÉMONSTRATIONS — Épuré, vidéos 50/50, centré
   ============================================================ */

/* ---------- Titre de section ---------- */
.demos-head {
  text-align: center;
  padding-bottom: clamp(1rem, 3vw, 2rem);
}
.demos-head h2 {
  font-size: clamp(2rem, 5.4vw, 3.8rem);
  line-height: 1.04;
  margin-bottom: 1.2rem;
}
.demos-head .big {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Hero vidéo ---------- */
.demos-hero {
  position: relative;
  height: 70vh;
  overflow: hidden;
  padding: 0;
}
.demos-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.demos-hero-chevron {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.demos-hero-chevron svg {
  width: 28px;
  height: 18px;
  animation: tricue 1.9s var(--ease) infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
  opacity: 0.6;
}

/* ---------- Bandes alternées vidéo / texte (50/50) ---------- */
.demo-split {
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.2rem, 5vw, 3rem);
}
.demo-split-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.demo-split.reverse .demo-visual {
  order: -1;
}

.demo-copy h3 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  background-image: var(--rainbow);
  background-size: 240% auto;
  animation: gradFlow 3.6s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.demo-copy p {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  color: var(--body);
}

.demo-visual video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1),
    0 24px 60px rgba(0,0,0,0.5);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.demo-visual video:hover {
  transform: scale(1.03);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 30px 70px rgba(0,0,0,0.55),
    0 0 40px rgba(120,200,240,0.12);
}
.demo-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  margin-top: 1rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

/* ---------- Lightbox vidéo ---------- */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
  cursor: pointer;
}
.video-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.video-lightbox video {
  max-width: 92vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 40px 100px rgba(0,0,0,0.6);
}
.video-lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
  z-index: 1;
}
.video-lightbox-close:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
}

/* ---------- Section "et ce n'est que le début" ---------- */
.demos-more {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 3rem);
}
.demo-more {
  max-width: 50rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.6rem, 4vw, 2.8rem);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.15);
  background: radial-gradient(60% 60% at 50% 0%, rgba(255,255,255,0.08), transparent 70%), rgba(255,255,255,0.03);
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  text-align: center;
}
.demo-more h3 {
  margin: 0 0 1.2rem;
  background-image: var(--rainbow);
  background-size: 240% auto;
  animation: gradFlow 3.6s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  display: inline-block;
}
.demo-more p {
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  line-height: 1.75;
  color: var(--body);
}

.demo-final {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 42rem;
  text-align: center;
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  background-image: var(--rainbow);
  background-size: 240% auto;
  background-position: 0% 50%;
  animation: gradFlow 3.2s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(150,200,255,0.18));
}

/* Responsive: single column on mobile */
@media (max-width: 720px) {
  .demos-hero {
    height: 50vh;
  }
  .demos-head h2 {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }
  .demo-split-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .demo-split.reverse .demo-visual {
    order: 0;
  }
  .demo-visual video {
    max-width: 100%;
  }
}