/* =========================================================================
   OMBRAL — Landing page (DA « Verre clair », en ligne depuis le 29/07/2026)
   La page vit dans le papier chaud ; le vert encre habille les cartes
   fortes et les boutons (pilules). Raffinement « Mobbin » : cartes plates
   à filet fin, ombres discrètes, un seul verre (la barre de navigation).
   Les écrans DANS le téléphone et le dashboard restent la reproduction
   fidèle du vrai produit (DA « Subframe », papier vélin), voir
   frontend/src/styles/{tokens,screens,dashboard}.css.
   Animations au scroll : GSAP + ScrollTrigger (app.js).
   Ancienne version « nuit verte » : git log landing/ (avant ce commit).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Sans:wght@400;500;600&family=Fragment+Mono&display=swap');

:root {
  /* Nuit : le vert encre ne sert plus de fond — il devient la couleur
     des cartes fortes et des boutons */
  --night-975: #0f1610;
  --night-950: #141d15;
  --night-900: #1a2519;

  /* Papier chaud : désormais le fond de la page */
  --paper-50:  #f6f4f1;
  --paper-100: #ece9e3;
  /* voix claire sur les surfaces sombres (panneau final, carte Pro) */
  --paper-dim:   rgba(246, 244, 241, 0.66);
  --paper-faint: rgba(246, 244, 241, 0.45);

  /* encre sur papier : la voix de la page claire */
  --ink:    #1b241c;
  --pencil: #576053;
  --faint:  #9aa296;

  /* filets : sombres sur fond clair (inversés par rapport à la version nuit) */
  --hairline:        rgba(27, 36, 28, 0.10);
  --hairline-strong: rgba(27, 36, 28, 0.18);

  --success: #3fb39a;
  --success-bg: rgba(63, 179, 154, 0.14);
  --success-ink: #23806d;

  --ink-btn: #141b14;

  /* ===== DA réelle du produit (« Subframe », papier vélin) =====
     Copie exacte de frontend/src/styles/tokens.css — ne pas inventer. */
  --sf-canvas:   #fafaf8;
  --sf-hairline: #e4e7e1;
  --sf-card:     #ebeee8;
  --sf-divider:  #d7dad2;
  --sf-graphite: #212b22;
  --sf-ink:      #1b241c;
  --sf-pencil:   #576053;
  --sf-faint:    #9aa296;
  --sf-btn-bevel:
    inset 0 4px 4px -2px rgba(255, 255, 255, 0.25),
    inset 0 -4px 4px -2px rgba(0, 0, 0, 0.25),
    inset -2px 0 2px -2px rgba(255, 255, 255, 0.1);

  /* Raffinement « Mobbin » : les ombres se font discrètes, la lumière
     vient du blanc de la page, pas des effets. Le seul verre restant
     est la barre de navigation (valeurs V2 posées sur .nav-pill). */
  --shadow-slab:  0 24px 56px -28px rgba(27, 36, 28, 0.25), 0 8px 20px -14px rgba(27, 36, 28, 0.15);
  --shadow-card:  0 12px 28px -18px rgba(27, 36, 28, 0.2);
  --shadow-pill:  0 8px 18px -10px rgba(20, 29, 21, 0.4);
  --shadow-flat: 0 1px 2px rgba(27, 36, 28, 0.05);   /* la « carte plate » */

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* boutons pilule, cartes très arrondies */
  --r-btn: 999px;
  --r-card: 24px;

  --bevel-paper:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -5px 6px -4px rgba(20, 27, 20, 0.28);

  --wrap: 1140px;
  --pad: clamp(20px, 4vw, 32px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Rien ne dépasse jamais la largeur de l'écran (les planches-contact et le
   téléphone épinglé « saignent » volontairement des bords : on les rogne à la
   fenêtre au lieu de créer une barre de défilement horizontale sur mobile).
   `clip` plutôt que `hidden` : ne crée pas de conteneur de défilement, donc
   n'interfère pas avec le pin GSAP ni les ancres. */
html { scroll-padding-top: 84px; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--paper-50);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ---- Le fond soyeux : voiles verts très dilués qui dérivent lentement ---- */
.silk {
  position: fixed; inset: -20vh -20vw; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42% 34% at 18% 22%, rgba(63, 179, 154, 0.07), transparent 70%),
    radial-gradient(38% 30% at 82% 12%, rgba(27, 36, 28, 0.04), transparent 70%),
    radial-gradient(46% 38% at 70% 78%, rgba(63, 179, 154, 0.05), transparent 70%),
    radial-gradient(34% 30% at 12% 84%, rgba(27, 36, 28, 0.03), transparent 70%);
  /* pas de filter: blur — les dégradés sont déjà doux, et un flou de 46px
     sur une couche plein écran animée coûtait du GPU en continu */
}
@media (prefers-reduced-motion: no-preference) {
  .silk { animation: drift 26s ease-in-out infinite alternate; }
  @keyframes drift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.04); }
  }
}
/* grain discret : le verre a besoin d'une matière derrière lui */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.03; /* fusion normale : à 3 % sur papier clair, multiply était invisible et coûteux */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgba(63, 179, 154, 0.25); }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid rgba(27, 36, 28, 0.6);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { max-width: 760px; }

/* ---- Vocabulaire commun ---- */

.eyebrow {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pencil);
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.dim { color: var(--pencil); }

.sec { padding: clamp(88px, 11vw, 150px) 0 0; }
.sec-head { margin-bottom: clamp(44px, 6vw, 68px); }
.sec-head h2 {
  margin-top: 14px;
  font-size: clamp(30px, 4.3vw, 52px);
  line-height: 1.06; letter-spacing: -0.035em;
}
.sec-head h2 .dim { display: block; margin-top: 4px; }
.sec-lede {
  margin-top: 16px;
  color: var(--pencil); font-size: 16px; line-height: 1.6;
  max-width: 480px;
}

/* Crochets de viseur — la signature du logo, paramétrable par contexte */
.ck {
  position: absolute;
  width: var(--ck-s, 18px); height: var(--ck-s, 18px);
  border: var(--ck-w, 2px) solid var(--ck-c, rgba(27, 36, 28, 0.55));
}
.ck.tl { top: var(--ck-o, 12px); left: var(--ck-o, 12px); border-right: 0; border-bottom: 0; border-top-left-radius: var(--ck-r, 8px); }
.ck.tr { top: var(--ck-o, 12px); right: var(--ck-o, 12px); border-left: 0; border-bottom: 0; border-top-right-radius: var(--ck-r, 8px); }
.ck.bl { bottom: var(--ck-o, 12px); left: var(--ck-o, 12px); border-right: 0; border-top: 0; border-bottom-left-radius: var(--ck-r, 8px); }
.ck.br { bottom: var(--ck-o, 12px); right: var(--ck-o, 12px); border-left: 0; border-top: 0; border-bottom-right-radius: var(--ck-r, 8px); }

/* ---- Boutons de la landing : des pilules, façon iDraft ---- */

/* le bouton fort : encre verte, ombre portée franche — UNE seule peau,
   partagée avec le bouton de la barre (.nav .btn-ink, qui n'ajoute que sa taille) */
.btn-primary, .nav .btn-ink {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer;
  border-radius: var(--r-btn);
  background: var(--night-950);
  color: var(--paper-50);
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  padding: 16px 26px;
  text-decoration: none;
  box-shadow: var(--shadow-pill), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.btn-primary:hover, .nav .btn-ink:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(20, 29, 21, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.btn-primary:active, .nav .btn-ink:active { transform: scale(0.98); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; cursor: pointer;
  border: 1px solid rgba(27, 36, 28, 0.14);
  color: var(--ink);
  border-radius: var(--r-btn);
  font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  padding: 15px 24px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.18s ease;
}
.btn-ghost:hover { background: #fff; transform: translateY(-2px); }
.btn-ghost:active { transform: scale(0.985); }

/* bouton secondaire : la pilule blanche plate à filet fin — le fond et le
   filet viennent de .btn-ghost, ici seulement l'ombre et le survol */
.btn-glass {
  box-shadow: var(--shadow-flat);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}
.btn-glass:hover {
  border-color: rgba(27, 36, 28, 0.3);
  box-shadow: 0 6px 16px -10px rgba(27, 36, 28, 0.25);
}
/* sa petite flèche, qui s'avance au survol */
.hero-cta .btn-ghost::after {
  content: '\2192';
  margin-left: 8px; font-weight: 500;
  transition: transform 0.2s ease;
}
.hero-cta .btn-ghost:hover::after { transform: translateX(3px); }

/* =========================================================================
   Navigation
   ========================================================================= */

/* ======= La barre de la V2 « verre », copiée telle quelle =======
   .nav est un rail invisible qui centre la pilule ; .nav-pill est le
   verre blanc dépoli. Ces règles sont la copie exacte de la V2 —
   y compris sa police (Instrument Sans), pour la barre uniquement. */
.nav {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center; padding-inline: var(--pad);
  pointer-events: none;          /* le rail laisse passer les clics… */
}
.nav-pill {
  pointer-events: auto;          /* …seule la pilule est cliquable */
  display: flex; align-items: center; gap: 26px;
  background: rgba(255, 255, 255, 0.52);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px; padding: 10px 12px 10px 22px;
  box-shadow: 0 14px 34px -18px rgba(27, 36, 28, 0.35);
  font-family: 'Instrument Sans', var(--font-sans);
  /* pas de max-width : le rail .nav borne déjà la pilule par son padding */
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 22px; width: auto; opacity: 0.96; }

.nav-links { display: flex; gap: 22px; font-size: 14.5px; font-weight: 500; color: var(--pencil); }
.nav-links a { text-decoration: none; transition: color 0.15s ease; }
.nav-links a:hover { color: var(--ink); }

/* le bouton d'encre de la V2 : même peau que .btn-primary (déclarée avec
   lui plus haut), seule la taille change ici */
.nav .btn-ink { gap: 8px; font-size: 14.5px; padding: 10px 20px; white-space: nowrap; }

@media (max-width: 860px) {
  /* jamais sous l'encoche des iPhone (zone sûre) ; la pilule reste
     compacte : juste le logo et le bouton */
  .nav { top: max(22px, calc(env(safe-area-inset-top) + 12px)); }
  .nav-links { display: none; }
  .nav-pill { gap: 14px; }
}

/* =========================================================================
   1. Hero — la scène
   ========================================================================= */

/* Le hero tient dans le premier écran : la planche-contact fait partie
   de la première impression, elle n'est plus coupée sous le pli. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 88px; /* l'îlot de navigation flotte au-dessus */
  display: flex; flex-direction: column;
  text-align: center;
}
.hero-in {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: clamp(16px, 3vh, 48px);
}

.hero-title {
  margin-top: 14px;
  font-size: clamp(31px, 7vw, 92px);
  line-height: 0.99; letter-spacing: -0.048em; font-weight: 800;
}
/* façon Mobbin : le titre entier parle d'une seule voix d'encre */
.hero-title .dim { display: block; margin-top: 6px; color: var(--ink); }

.hero-sub {
  margin-top: 22px;
  color: var(--pencil); font-size: clamp(16.5px, 1.7vw, 20px);
  line-height: 1.55; font-weight: 450;
  max-width: 30em;
}
.hero-sub b { color: var(--ink); font-weight: 600; }

.hero-cta {
  margin-top: 28px;
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.hero-note {
  margin-top: 18px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint);
}

/* La planche-contact : les photos flottent sur le papier, un peu pâles ;
   la photo retrouvée reprend toutes ses couleurs.
   Elle « saigne » au-delà des bords ; on la rogne à la largeur de l'écran
   (overflow: clip) pour ne jamais élargir la page sur mobile — le fondu des
   bords (mask) tombe alors proprement dans la fenêtre. */
.wall {
  margin-top: clamp(28px, 4.5vh, 60px);
  display: flex; justify-content: center; gap: clamp(10px, 1.4vw, 16px);
  padding: 0 12px clamp(18px, 3.5vh, 36px);
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.wall-cell {
  position: relative; flex-shrink: 0;
  width: clamp(96px, 11.5vw, 152px); aspect-ratio: 1;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: var(--paper-100);
  box-shadow: 0 8px 20px -14px rgba(27, 36, 28, 0.22);
}
.wall-cell:nth-child(odd) { transform: translateY(12px); }
.wall-cell img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55; filter: saturate(0.55) contrast(1.02) brightness(1.06);
}
.wall-cell.found {
  --ck-s: 15px; --ck-o: 7px; --ck-w: 2px; --ck-r: 7px;
  --ck-c: rgba(63, 179, 154, 0.95);
  border-color: rgba(63, 179, 154, 0.5);
  box-shadow: 0 0 0 1px rgba(63, 179, 154, 0.3), 0 16px 32px -16px rgba(27, 36, 28, 0.32);
  /* la photo retrouvée prend un demi-pas de plus que ses voisines */
  transform: scale(1.07);
  z-index: 1;
}
.wall-cell.found img { opacity: 1; filter: saturate(0.98) contrast(1.05); }
.found-tag {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-50);
  background: var(--night-950);
  border: 0;
  border-radius: 999px; padding: 4px 10px;
  box-shadow: 0 6px 14px -6px rgba(15, 22, 16, 0.6);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .wall-cell:nth-child(n+7) { display: none; }
}

/* =========================================================================
   2. La démo — l'iPhone épinglé
   Le téléphone se fige au centre pendant que les 5 écrans (calques
   superposés) s'enchaînent au scroll. Orchestré par app.js (GSAP).
   ========================================================================= */

.demo-stage { position: relative; }
/* la scène occupe déjà tout l'écran : pas de double espace au-dessus */
.sec.demo { padding-top: clamp(16px, 3.5vh, 40px); }

/* la scène : titre calé en haut (sous l'îlot), téléphone + légendes
   centrés dans tout l'espace restant */
.demo-wrap {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: clamp(92px, 11vh, 112px);  /* l'îlot + un souffle */
  padding-bottom: 16px;
}
.demo-head { margin-bottom: clamp(18px, 3.5vh, 40px); }
.demo-head h2 { font-size: clamp(24px, 2.8vw, 36px); margin-top: 10px; }
.demo-head h2 .dim { display: inline; margin-top: 0; } /* une seule ligne d'air */
.demo-lede {
  margin-top: 12px; color: var(--pencil);
  font-size: 15px; line-height: 1.55; max-width: 46ch;
}

.demo-grid {
  flex: 1; /* tout l'espace sous le titre */
  display: grid; grid-template-columns: 340px 1fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
  align-content: center;
}
/* L'échelle du téléphone vit sur .mini (via --ph) et sa boîte suit le
   même calcul : GSAP peut animer .demo-phone sans jamais casser la taille. */
.demo-phone {
  --ph: 1;
  display: flex; justify-content: center; position: relative;
  height: calc(612px * var(--ph));
}
.demo-phone .mini { transform: scale(var(--ph)); transform-origin: top center; }
/* (raffinement Mobbin : plus de lumière de scène — le téléphone se
   détache par son ombre douce, rien d'autre) */

.demo-caps { display: flex; flex-direction: column; gap: clamp(22px, 3.2vh, 34px); }
.beat-cap { max-width: 480px; }
/* le numéro du temps : une petite pastille de papier, façon iDraft */
.beat-num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--pencil);
  display: inline-block; margin-bottom: 10px;
  background: #fff; border: 1px solid var(--hairline);
  border-radius: 999px; padding: 4px 11px;
}
.beat-cap h3 { font-size: clamp(20px, 2.1vw, 24px); letter-spacing: -0.025em; margin-bottom: 8px; }
.beat-cap p { font-size: 16px; line-height: 1.6; color: var(--pencil); }
.beat-cap b { color: var(--ink); font-weight: 600; }

/* écrans peu hauts : tout se resserre pour que titre + téléphone +
   les cinq légendes tiennent à l'écran (préfixe .demo-stage pour
   l'emporter sur les règles de base ci-dessus) */
@media (min-width: 861px) and (max-height: 980px) {
  .demo-stage .demo-wrap { padding-top: 88px; padding-bottom: 14px; }
  .demo-stage .demo-head { margin-bottom: 14px; }
  .demo-stage .demo-head h2 { font-size: 24px; }
  .demo-stage .demo-caps { gap: 14px; }
  /* la place se gagne en LARGEUR : colonne large = grandes lignes,
     même nombre de retours, pas plus de hauteur */
  .demo-stage .beat-cap { max-width: 700px; }
  .demo-stage .beat-num { margin-bottom: 4px; font-size: 10.5px; padding: 3px 9px; }
  .demo-stage .beat-cap h3 { font-size: 19.5px; margin-bottom: 5px; }
  .demo-stage .beat-cap p { font-size: 15.5px; line-height: 1.5; }
  .demo-stage .demo-phone { --ph: 0.88; }
}
/* Échelle progressive SANS TROU (bug vu sur Chrome avec barre de favoris :
   entre deux paliers, la scène épinglée débordait et le bas du téléphone
   était coupé). Chaque palier garantit : titre + téléphone ≤ fenêtre.
   Scène ≈ 300px d'habillage (titre plein) ou 225px (titre compact) + 612×ph. */
@media (min-width: 861px) and (max-height: 850px) {
  .demo-stage .demo-phone { --ph: 0.78; }    /* scène ≈ 778px */
}
@media (min-width: 861px) and (max-height: 790px) {
  .demo-stage .demo-wrap { padding-top: 70px; }
  .demo-stage .demo-head h2 { font-size: 20px; }
  .demo-stage .demo-lede { font-size: 13.5px; }
  .demo-stage .demo-caps { gap: 8px; }
  .demo-stage .beat-cap h3 { font-size: 16.5px; }
  .demo-stage .beat-cap p { font-size: 13px; line-height: 1.45; }
  /* titre compact, téléphone encore généreux : scène ≈ 715px */
}
@media (min-width: 861px) and (max-height: 715px) {
  .demo-stage .demo-phone { --ph: 0.68; }    /* scène ≈ 641px */
}
@media (min-width: 861px) and (max-height: 653px) {
  .demo-stage .demo-phone { --ph: 0.6; }    /* scène ≈ 592px */
}
@media (min-width: 861px) and (max-height: 592px) {
  .demo-stage .demo-phone { --ph: 0.5; }    /* scène ≈ 531px */
}

/* ---- Le téléphone ---- */

.mini {
  width: 300px; height: 612px; flex-shrink: 0;
  border-radius: 44px;
  border: 1px solid var(--hairline-strong);
  background: var(--sf-canvas);
  box-shadow:
    0 0 0 7px rgba(9, 13, 9, 0.92),
    0 26px 56px -24px rgba(27, 36, 28, 0.38);
  overflow: hidden;
  position: relative;
}

/* écrans = calques superposés ; seul le premier est visible sans JS */
.mini-screen {
  position: absolute; inset: 0;
  padding: 20px 18px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
}
.mini-screen:first-child { opacity: 1; visibility: visible; }

/* écrans intermédiaires : la légende garde toute sa place */
@media (min-width: 861px) and (max-width: 1020px) {
  .demo-grid { grid-template-columns: 320px 1fr; gap: 32px; }
  .beat-cap { max-width: none; padding-right: 8px; }
}

@media (max-width: 860px) {
  .demo-stage .demo-wrap { padding-top: 80px; padding-bottom: 14px; }
  .demo-stage .demo-head { text-align: center; margin-bottom: 14px; }
  .demo-stage .demo-head h2 { font-size: 21px; }
  .demo-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: 20px;
  }
  .demo-phone { --ph: 0.78; }
  .demo-caps {
    display: grid; align-content: start; justify-items: center;
    min-height: 200px; text-align: center;
    width: 100%; padding: 0 8px;
  }
  .beat-cap { grid-area: 1 / 1; max-width: min(340px, calc(100vw - 56px)); }
  .beat-cap p { font-size: 13.5px; }
}

/* petits téléphones peu hauts : le téléphone se réduit pour que
   la légende reste entière à l'écran pendant l'épinglage */
@media (max-width: 860px) and (max-height: 740px) {
  .demo-phone { --ph: 0.64; }
}

/* =========================================================================
   Les écrans « Subframe » — copie fidèle du vrai parcours invité
   (papier vélin #fafaf8, encre verte #1b241c, bouton graphite biseauté)
   — INTOUCHÉS par la V3 : c'est le vrai produit.
   ========================================================================= */

.sf { background: var(--sf-canvas); color: var(--sf-ink); }

.sf-brand { display: flex; justify-content: center; padding: 6px 0 0; }
.sf-brand img { height: 14px; opacity: 0.95; }

.m-spacer { flex: 1; min-height: 16px; }

.sf-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 13px;
  background: var(--sf-graphite); color: var(--sf-canvas);
  font-weight: 600; font-size: 12.5px;
  padding: 12px 14px;
  box-shadow: var(--sf-btn-bevel);
  text-align: center;
}
.sf-ghostbtn {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--sf-hairline);
  border-radius: 13px;
  color: var(--sf-ink);
  font-weight: 500; font-size: 11px;
  padding: 10px 12px; text-align: center;
}

/* Écran 1 · Accueil (screens/Landing.tsx) */
.m-accueil { align-items: center; text-align: center; }
.sf-badge {
  width: 76px; height: 76px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--sf-card);
  border: 1px solid var(--sf-hairline);
  margin: 30px 0 20px;
}
.sf-badge svg { width: 44px; height: 44px; }
.sf-eyebrow {
  font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sf-faint); margin-bottom: 8px;
}
.sf-title {
  font-weight: 700; font-size: 23px; line-height: 1.05;
  letter-spacing: -0.035em; color: var(--sf-ink);
}
.sf-serif { display: block; font-weight: 700; color: var(--sf-pencil); margin-top: 2px; }
.sf-sub {
  margin-top: 10px;
  font-size: 11px; line-height: 1.5; font-weight: 500;
  color: var(--sf-pencil); max-width: 220px;
}
.sf-sub b { color: var(--sf-ink); font-weight: 600; }
.m-accueil .sf-btn { width: 100%; }
.sf-privacy {
  margin: 10px auto 0; max-width: 220px;
  font-size: 9px; line-height: 1.5; text-align: center;
  color: var(--sf-faint);
}

/* Écran 2 · Consentement (screens/Consent.tsx) */
.m-consent { justify-content: flex-end; padding: 0; }
.sf-ghost {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 20px 18px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  pointer-events: none;
}
.sf-ghost .sf-badge { margin: 24px 0 14px; width: 64px; height: 64px; }
.sf-ghost .sf-badge svg { width: 36px; height: 36px; }
.sf-ghost .sf-title { font-size: 20px; }
.sf-veil { position: absolute; inset: 0; background: rgba(27, 36, 28, 0.55); }
.sf-sheet {
  position: relative;
  background: var(--sf-canvas);
  border-radius: 20px 20px 0 0;
  padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 9px;
}
.sf-sheet h4 {
  font-weight: 700; font-size: 14.5px;
  letter-spacing: -0.02em; color: var(--sf-ink);
}
.sf-body { font-size: 9.8px; line-height: 1.5; font-weight: 500; color: var(--sf-pencil); }
.sf-body b { color: var(--sf-ink); font-weight: 600; }
.sf-check {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--sf-card); border-radius: 12px; padding: 10px;
  font-size: 9.5px; line-height: 1.45; font-weight: 500; color: var(--sf-ink);
}
.sf-box {
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px;
  border-radius: 4px; background: var(--sf-graphite); position: relative;
}
.sf-box::after {
  content: ''; position: absolute; left: 4.2px; top: 1.4px;
  width: 3.8px; height: 7.6px;
  border: solid var(--sf-canvas); border-width: 0 1.7px 1.7px 0;
  transform: rotate(42deg);
}
.sf-foot { font-size: 8.5px; font-weight: 500; color: var(--sf-faint); text-align: center; }

/* Écran 3 · Selfie (screens/Capture.tsx) */
.m-capture { align-items: center; }
.sf-hint {
  font-weight: 600; font-size: 12.5px; letter-spacing: -0.01em;
  color: var(--sf-ink); margin: 22px 0 13px;
}
.sf-camera {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 18px; overflow: hidden;
  background: var(--sf-card);
  border: 1px solid var(--sf-hairline);
}
/* retour caméra : le selfie de Léa (image IA — personne fictive) */
.sf-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: linear-gradient(180deg, #2a2f2a, #1c211c); /* le temps du chargement */
}
.sf-oval {
  position: absolute; inset: 0; margin: auto;
  width: 62%; height: 70%;
  border: 1.5px solid rgba(250, 250, 250, 0.92);
  border-radius: 50%;
  box-shadow: 0 0 0 1000px rgba(23, 23, 23, 0.32);
}
.sf-shutter {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--sf-graphite);
  margin: 0 auto 4px; display: block;
  box-shadow:
    var(--sf-btn-bevel),
    0 0 0 5px var(--sf-canvas),
    0 0 0 6px var(--sf-hairline);
}

/* Écran 4 · Recherche (screens/Searching.tsx) */
.m-searchr { align-items: center; justify-content: center; text-align: center; }
.sf-scanwrap {
  position: relative; width: 88px; height: 88px;
  display: grid; place-items: center;
  margin-bottom: 20px;
  color: var(--sf-ink);
}
.sf-scanring {
  position: absolute; inset: 0; border-radius: 22px;
  background: var(--sf-card);
  border: 1px solid var(--sf-hairline);
}
.sf-scanwrap svg { width: 42px; height: 42px; position: relative; }
.sf-scanline {
  position: absolute; left: 11px; right: 11px; top: 13px; height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0;
}
.sf-search-title { font-weight: 700; font-size: 14.5px; letter-spacing: -0.025em; color: var(--sf-ink); }
.sf-search-sub {
  margin-top: 6px; font-size: 10px; line-height: 1.5; font-weight: 500;
  color: var(--sf-pencil); max-width: 190px;
}

/* Écran 5 · Résultats (screens/Results.tsx) */
.sf-reshead { text-align: center; margin-bottom: 12px; }
.sf-checkbadge {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sf-graphite); color: var(--sf-canvas);
  font-size: 14px;
  box-shadow: var(--sf-btn-bevel);
  margin: 4px 0 8px;
}
.sf-res-title { font-weight: 700; font-size: 15px; letter-spacing: -0.025em; color: var(--sf-ink); }
.sf-res-sub { margin-top: 2px; font-size: 10px; font-weight: 500; color: var(--sf-pencil); }
.sf-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.sf-cell {
  display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: 10px;
  background: var(--sf-card);
  border: 1px solid var(--sf-hairline);
}
.sf-cell img { width: 100%; height: 100%; object-fit: cover; }
.sf-dock {
  margin-top: auto; padding-top: 10px;
  display: flex; flex-direction: column; gap: 7px;
}

/* =========================================================================
   4. Côté organisateur — le vrai dashboard « Studio »
   (copie fidèle de frontend/src/styles/dashboard.css, DA claire)
   ========================================================================= */

.studio-grid {
  position: relative;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.browser {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card); overflow: hidden;
  background: var(--sf-canvas);
  box-shadow: var(--shadow-slab);
}
.browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px;
  background: var(--sf-card);
  border-bottom: 1px solid var(--sf-hairline);
}
.browser-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sf-divider); }
.browser-url {
  margin-left: 10px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--sf-pencil);
  border: 1px solid var(--sf-hairline); border-radius: 999px;
  padding: 4px 12px;
  background: var(--sf-canvas);
}

.db { display: flex; color: var(--sf-ink); min-height: 340px; }

/* barre latérale du Studio */
.db-side {
  width: 128px; flex-shrink: 0;
  border-right: 1px solid var(--sf-hairline);
  padding: 14px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.db-logo { display: flex; align-items: center; padding: 2px 6px 0; }
.db-logo img { height: 16px; }
.db-nav { display: flex; flex-direction: column; gap: 3px; }
.db-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 500; color: var(--sf-pencil);
  padding: 7px 8px; border-radius: 10px; white-space: nowrap;
}
.db-item svg { width: 11px; height: 11px; flex-shrink: 0; }
.db-item.on {
  background: var(--sf-graphite); color: var(--sf-canvas);
  font-weight: 600; box-shadow: var(--sf-btn-bevel);
}

.db-main { flex: 1; padding: 16px 16px 18px; min-width: 0; }
.db-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.db-eyebrow {
  font-family: var(--font-mono); font-size: 7.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sf-faint); margin-bottom: 3px;
}
.db-title { font-weight: 700; font-size: 20px; letter-spacing: -0.03em; color: var(--sf-ink); }
.db-new {
  background: var(--sf-graphite); color: var(--sf-canvas);
  font-weight: 600; font-size: 9px;
  padding: 8px 11px; border-radius: 10px;
  box-shadow: var(--sf-btn-bevel);
  white-space: nowrap;
}

.db-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 14px;
}
.db-stat { background: var(--sf-card); border-radius: 12px; padding: 10px 11px; }
.db-stat .k {
  display: block;
  font-family: var(--font-mono); font-size: 6.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sf-pencil); margin-bottom: 6px;
}
.db-stat .v { display: block; font-weight: 700; font-size: 17px; letter-spacing: -0.04em; color: var(--sf-ink); line-height: 1; }

.db-sec { font-weight: 600; font-size: 10.5px; letter-spacing: -0.02em; margin-bottom: 7px; }
.db-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--sf-canvas);
  border: 1px solid var(--sf-hairline);
  border-radius: 11px; padding: 9px 12px;
  margin-bottom: 6px;
}
.db-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 6.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sf-pencil); background: var(--sf-card);
  padding: 2px 5px; border-radius: 4px; margin-right: 6px;
  vertical-align: middle;
}
.db-name { font-weight: 600; font-size: 10px; letter-spacing: -0.02em; color: var(--sf-ink); }
.db-sub { font-size: 8px; font-weight: 500; color: var(--sf-pencil); margin-top: 2px; }
.db-nums { font-size: 8.5px; font-weight: 500; color: var(--sf-pencil); white-space: nowrap; }
.db-nums b { color: var(--sf-ink); font-weight: 600; }

/* la liste des atouts : chaque point gagne sa tuile-icône, façon iDraft.
   Les icônes vivent en CSS (aucun changement de structure HTML). */
.studio-feats { list-style: none; }
.studio-feats li {
  padding: 20px 0;
  display: grid; grid-template-columns: 40px 1fr;
  column-gap: 16px; align-items: start;
}
.studio-feats li::before {
  content: '';
  grid-row: 1 / span 2;
  width: 40px; height: 40px; margin-top: 2px;
  border-radius: 13px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-flat);
}
.studio-feats h3, .studio-feats p { grid-column: 2; }
.studio-feats li + li { border-top: 1px solid var(--hairline); }
.studio-feats h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 7px; }
.studio-feats p { font-size: 14.5px; line-height: 1.6; color: var(--pencil); }

/* les cinq icônes, dans l'ordre des atouts (traits encre 1.8, coins ronds) */
.studio-feats li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b241c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); }
.studio-feats li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b241c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-5 4 4 8-8'/%3E%3Cpath d='M15 8h5v5'/%3E%3C/svg%3E"); }
.studio-feats li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b241c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2.5'/%3E%3Cpath d='m4.5 7.5 7.5 5.5 7.5-5.5'/%3E%3C/svg%3E"); }
.studio-feats li:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b241c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.6a2 2 0 0 1 3.4 0l1 1.6a2 2 0 0 0 1.7 1h1.9a2 2 0 0 1 1.7 3l-.9 1.6a2 2 0 0 0 0 2l.9 1.6a2 2 0 0 1-1.7 3h-1.9a2 2 0 0 0-1.7 1l-1 1.6a2 2 0 0 1-3.4 0l-1-1.6a2 2 0 0 0-1.7-1H5.7a2 2 0 0 1-1.7-3l.9-1.6a2 2 0 0 0 0-2L4 10.2a2 2 0 0 1 1.7-3h1.9a2 2 0 0 0 1.7-1Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E"); }
.studio-feats li:nth-child(5)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b241c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 3.5c-4 4.5-4 12.5 0 17M12 3.5c4 4.5 4 12.5 0 17M4 10h16M4 14h16'/%3E%3C/svg%3E"); }

/* L'écran « Emails collectés » du vrai produit, posé sur le coin du
   navigateur : la soirée remplit aussi le carnet de contacts. */
.browser-wrap { position: relative; }
.db-emails {
  position: absolute; right: -14px; bottom: -34px;
  width: 234px;
  background: var(--sf-canvas); color: var(--sf-ink);
  border: 1px solid var(--hairline);
  border-radius: 14px; padding: 12px 12px 10px;
  box-shadow: var(--shadow-card);
}
.dbe-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.dbe-eyebrow {
  font-family: var(--font-mono); font-size: 6.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sf-faint); margin-bottom: 3px;
}
.dbe-count { font-weight: 700; font-size: 13px; letter-spacing: -0.03em; color: var(--sf-ink); }
.dbe-export {
  background: var(--sf-graphite); color: var(--sf-canvas);
  font-weight: 600; font-size: 8px;
  padding: 6px 9px; border-radius: 8px;
  box-shadow: var(--sf-btn-bevel); white-space: nowrap;
}
.dbe-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--sf-hairline); border-radius: 9px;
  padding: 6px 9px; margin-bottom: 5px;
}
.dbe-mail {
  font-family: var(--font-mono); font-size: 8px; color: var(--sf-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dbe-optin {
  flex-shrink: 0;
  font-size: 6.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #1f7a5c; background: var(--success-bg);
  border-radius: 999px; padding: 3px 7px;
}
.dbe-optin.muted { color: var(--sf-pencil); background: var(--sf-card); }
.dbe-note { margin-top: 7px; font-size: 7.5px; color: var(--sf-pencil); }

@media (max-width: 1020px) {
  .studio-grid { grid-template-columns: 1fr; }
  /* en colonne, la carte flottante ne doit pas mordre sur la liste dessous */
  .browser-wrap { margin-bottom: 40px; }
}
@media (max-width: 560px) {
  .db-side { display: none; }
  .db-emails { right: -6px; bottom: -30px; width: 210px; }
}

/* =========================================================================
   5. Confiance — quatre cartes blanches posées sur le papier
   ========================================================================= */

.trust-grid {
  position: relative;
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* la « carte plate » de la DA : UNE recette, partagée avec les cartes tarifs */
.trust-grid li, .plan {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-flat);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.trust-grid li:hover, .plan:hover {
  transform: translateY(-3px);
  border-color: rgba(27, 36, 28, 0.16);
  box-shadow: var(--shadow-card);
}
.trust-grid li { padding: 26px 24px; }
/* le mot-clé devient une pastille vert d'eau, façon iDraft */
.trust-k {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--success-ink);
  background: var(--success-bg);
  border-radius: 999px; padding: 4px 11px;
}
.trust-grid h3 { font-size: 18px; letter-spacing: -0.02em; margin: 14px 0 8px; }
.trust-grid p { font-size: 14px; line-height: 1.6; color: var(--pencil); }

@media (max-width: 1020px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .trust-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   6. Tarifs — cartes de verre blanc, la carte Pro passe à l'encre
   ========================================================================= */

.plans {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}
/* la carte tarif = la « carte plate » (voir section Confiance) + sa colonne */
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px 24px 24px;
}
/* la carte vedette : l'encre verte à la place du verre */
.plan.featured {
  background: linear-gradient(165deg, var(--night-900), var(--night-975));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-slab), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.plan.featured h3, .plan.featured .plan-price { color: var(--paper-50); }
.plan-flag {
  position: absolute; top: -12px; left: 22px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--success); color: var(--night-975);
  border-radius: 999px; padding: 5px 11px;
}
.plan h3 { font-size: 17px; letter-spacing: -0.02em; }
.plan-price {
  margin: 12px 0 18px;
  font-weight: 700; font-size: 34px; letter-spacing: -0.03em;
  color: var(--ink);
}
.plan-price span {
  font-size: 13px; font-weight: 500; letter-spacing: 0;
  color: var(--faint); margin-left: 2px;
}
.plan.featured .plan-price span { color: var(--paper-faint); }
.plan ul { list-style: none; flex: 1; margin-bottom: 26px; }
.plan li {
  font-size: 14px; color: var(--pencil); line-height: 1.5;
  padding: 9px 0 9px 24px;
  border-top: 1px solid var(--hairline);
  position: relative;
}
/* la coche : UN seul dessin (masque), la couleur est une simple background-color */
.plan li::before {
  content: '';
  position: absolute; left: 0; top: 12px;
  width: 14px; height: 14px;
  background: var(--success-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.plan.featured li { color: var(--paper-dim); border-top-color: rgba(246, 244, 241, 0.12); }
.plan.featured li::before { background: var(--success); }
/* sur l'encre (carte Pro ET panneau final), le bouton fort s'inverse :
   pilule de papier — une seule règle pour les deux surfaces sombres */
.plan.featured .btn-primary, .final-panel .btn-primary {
  background: var(--paper-50); color: var(--ink-btn);
  box-shadow: var(--bevel-paper), 0 14px 30px -12px rgba(0, 0, 0, 0.5);
}
.plan .btn-primary, .plan .btn-ghost { width: 100%; font-size: 14px; padding: 13px 16px; }

.quote-strip {
  margin-top: 36px; text-align: center;
  font-size: 14.5px; line-height: 1.6; color: var(--pencil);
}
.quote-strip a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.quote-strip a:hover { color: var(--night-975); }

@media (max-width: 1020px) { .plans { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 560px)  { .plans { grid-template-columns: 1fr; } }

/* =========================================================================
   7. Questions — chaque question devient une carte de verre arrondie
   ========================================================================= */

.faq-list details {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--shadow-flat);
  padding: 0 22px;
  margin-bottom: 11px;
  overflow: hidden;
}

.faq-list summary {
  list-style: none; cursor: pointer;
  padding: 20px 40px 20px 0;
  font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink);
  position: relative;
  transition: color 0.15s ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--night-975); }

/* le « + » qui devient « − » */
.faq-list summary::before,
.faq-list summary::after {
  content: '';
  position: absolute; right: 8px; top: 50%;
  width: 13px; height: 1.5px;
  background: var(--pencil);
  transform: translateY(-50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq-list summary::after { transform: translateY(-50%) rotate(90deg); }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.faq-list details p {
  padding: 0 2px 22px;
  font-size: 15px; line-height: 1.65; color: var(--pencil);
  max-width: 640px;
}

/* =========================================================================
   8. Dernier appel + pied de page
   ========================================================================= */

.final { padding-bottom: clamp(88px, 11vw, 150px); }
.final .wrap { position: relative; }
/* le panneau final : la grande dalle d'encre verte, comme la carte iDraft */
.final-panel {
  position: relative;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  background: linear-gradient(160deg, var(--night-900), var(--night-975));
  padding: clamp(60px, 9vw, 110px) var(--pad);
  box-shadow: var(--shadow-slab), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
/* une lueur vert d'eau respire en haut du panneau */
.final-panel::after {
  content: '';
  position: absolute; inset: -40% -20% auto;
  height: 90%;
  background: radial-gradient(48% 60% at 50% 0%, rgba(63, 179, 154, 0.14), transparent 70%);
  pointer-events: none;
}
.final-panel h2 {
  color: var(--paper-50);
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.08; letter-spacing: -0.035em;
  max-width: 22ch; margin: 0 auto;
  position: relative; z-index: 1;
}
.final-panel h2 .dim { color: var(--paper-dim); }
.final-panel .dim { display: block; margin-top: 4px; }
.final-cta { margin-top: 34px; display: flex; justify-content: center; position: relative; z-index: 1; }
/* (l'inversion papier du bouton est déclarée avec celle de la carte Pro,
   section Tarifs) */
.final-panel .btn-primary:hover { background: #fff; }
.final-panel .hero-note { color: var(--paper-faint); position: relative; z-index: 1; }

.foot { border-top: 1px solid var(--hairline); }
.foot-in {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-top: 52px; padding-bottom: 58px;
  text-align: center;
}
.foot-logo { height: 22px; opacity: 0.9; }
.foot-line { font-size: 14px; color: var(--pencil); }
/* rangée des documents légaux */
.foot-legal {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 18px; max-width: 560px; margin-top: 6px;
}
.foot-legal a {
  font-size: 12.5px; color: var(--pencil); text-decoration: none;
}
.foot-legal a:hover {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.foot-meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--faint);
  display: flex; gap: 10px; align-items: center;
}
.foot-meta a { text-decoration: none; }
.foot-meta a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   Animations d'ambiance : transform / opacity uniquement, coupées si
   l'utilisateur préfère réduire les animations.
   (Les animations au scroll — GSAP — vivent dans app.js.)
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* entrée du hero, en cascade */
  .reveal { opacity: 0; transform: translateY(16px); animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .r1 { animation-delay: 0.05s; }
  .r2 { animation-delay: 0.14s; }
  .r3 { animation-delay: 0.24s; }
  .r4 { animation-delay: 0.34s; }
  .r5 { animation-delay: 0.5s; }
  @keyframes rise { to { opacity: 1; transform: translateY(0); } }

  /* les crochets de la photo retrouvée respirent, façon Face ID */
  .wall-cell.found .ck { animation: ck-breathe 3s ease-in-out infinite; }
  @keyframes ck-breathe {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
  }

  /* l'ovale du selfie invite à se placer (identique au vrai écran) */
  .sf-oval { animation: oval-breathe 3.4s ease-in-out infinite; }
  @keyframes oval-breathe {
    0%, 100% { transform: scale(1); border-color: rgba(250, 250, 250, 0.8); }
    50% { transform: scale(1.015); border-color: rgba(250, 250, 250, 1); }
  }

  /* balayage de la ligne de scan (identique au vrai écran de recherche) */
  .sf-scanline { animation: sweep 2.1s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  @keyframes sweep {
    0%, 100% { transform: translateY(0); opacity: 0; }
    12% { opacity: 0.8; }
    50% { transform: translateY(60px); opacity: 0.8; }
    88% { opacity: 0.8; }
  }
  .sf-scanwrap > svg { animation: scan-pulse 2.1s ease-in-out infinite; }
  @keyframes scan-pulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
}

/* animations coupées : la ligne de scan devient un repère fixe discret */
@media (prefers-reduced-motion: reduce) {
  .sf-scanline { top: 50%; opacity: 0.35; }
}