/* =====================================================================
   Nemoris — feuille de style du site vitrine

   Les jetons de couleur, de rayon et d'espacement sont repris tels quels
   de NemorisApp/Nemoris/UI/AppTheme.swift : le site et l'application
   partagent littéralement la même palette, pas une approximation.

   Sommaire
     1. Jetons
     2. Base et typographie
     3. Mise en page et sections
     4. Composants
     5. Le déchiffrement (interaction signature)
     6. Blocs spécifiques
     7. Formulaire de liste d'attente
     8. Pages légales
     9. Mouvement et accessibilité
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Jetons                                                           */
/* ------------------------------------------------------------------ */

:root {
  /* Couleurs invariantes — identiques dans les deux apparences,
     exactement comme AppTheme.Colors.accentSecondary et consorts. */
  --copper:  #B07A4F;
  --forest:  #1D3A32;
  --green:   #52B896;
  --success: #3DAA82;
  --warning: #C49A5A;
  --danger:  #C25A46;

  /* Apparence claire : ivoire doux sur graphite */
  --bg:        #F3F0EA;
  --surface:   #FFFFFF;
  --surface-2: #E8E4DC;
  --text:      #111315;
  --text-2:    #4F5654;
  --accent:    #1D3A32;
  --hairline:  rgb(17 19 21 / 0.12);
  --shadow-soft:   0 3px 10px rgb(0 0 0 / 0.07);
  --shadow-medium: 0 6px 18px rgb(0 0 0 / 0.09);
  --shadow-strong: 0 10px 28px rgb(0 0 0 / 0.13);

  /* Géométrie — AppTheme.Spacing et AppTheme.Radius */
  --sp-xs: 4px;   --sp-sm: 8px;   --sp-md: 12px;  --sp-lg: 16px;
  --sp-xl: 20px;  --sp-2xl: 24px; --sp-3xl: 32px;
  --sp-4xl: 48px; --sp-5xl: 72px; --sp-6xl: 112px;

  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 24px; --r-full: 999px;

  --measure: 62ch;
  --page: 1180px;

  /* Courbe reprise de AppTheme.Animations.spring
     (response 0.4, dampingFraction 0.8) */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  /* Inter Tight si disponible, sinon SF Pro Display — la police de
     l'application elle-même, donc un repli parfaitement dans la marque. */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
               Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #111315;
    --surface:   #191D1B;
    --surface-2: #222826;
    --text:      #F0EDE6;
    --text-2:    #A8AFAC;
    --accent:    #52B896;
    --hairline:  rgb(240 237 230 / 0.14);
    --shadow-soft:   0 3px 10px rgb(0 0 0 / 0.35);
    --shadow-medium: 0 6px 18px rgb(0 0 0 / 0.45);
    --shadow-strong: 0 10px 28px rgb(0 0 0 / 0.55);
  }
}

/* Bloc volontairement inversé par rapport au reste de la page.
   En apparence claire il devient graphite ; en apparence sombre il vire au
   vert forêt très profond, pour rester un bloc distinct plutôt que de se
   fondre dans le fond. Le site rejoue ainsi la double apparence de l'app. */
.invert {
  --bg:        #111315;
  --surface:   #191D1B;
  --surface-2: #222826;
  --text:      #F0EDE6;
  --text-2:    #A8AFAC;
  --accent:    #52B896;
  --hairline:  rgb(240 237 230 / 0.16);
  color: var(--text);
  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  .invert {
    --bg:        #0C1613;
    --surface:   #12201B;
    --surface-2: #172A23;
    --hairline:  rgb(82 184 150 / 0.22);
  }
}

/* ------------------------------------------------------------------ */
/* 2. Base et typographie                                              */
/* ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "cv11";
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

/* L'échelle des titres est fluide : le même rythme visuel du téléphone
   au grand écran, sans paliers de rupture. */
/* Le titre reste imposant — c'est la signature des visuels App Store — mais
   plafonné pour que l'accroche, les boutons et les pastilles tiennent au-dessus
   de la ligne de flottaison sur un portable. */
h1 { font-size: clamp(2.6rem, 5.6vw, 4.35rem); letter-spacing: -0.042em; line-height: 1.0; }
h2 { font-size: clamp(1.95rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -0.025em; line-height: 1.2; }
h4 { font-size: 1.0625rem; letter-spacing: -0.015em; line-height: 1.3; }

p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

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

::selection { background: color-mix(in srgb, var(--copper) 30%, transparent); }

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

.lead {
  font-size: clamp(1.125rem, 1.9vw, 1.4rem);
  line-height: 1.5;
  color: var(--text-2);
  letter-spacing: -0.012em;
  max-width: 52ch;
}

.small { font-size: 0.875rem; line-height: 1.55; color: var(--text-2); }

/* Le point cuivre du logotype, promu en ponctuation du site :
   chaque intertitre de section s'ouvre sur un carré cuivre. */
.kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 var(--sp-xl);
}
.kicker::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--copper);
  flex: none;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: -0.02em;
  font-variant-ligatures: none;
}

.num { font-variant-numeric: tabular-nums; }

em.hl {
  font-style: normal;
  color: var(--accent);
  position: relative;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--bg);
  padding: var(--sp-md) var(--sp-xl);
  z-index: 100;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ */
/* 3. Mise en page et sections                                         */
/* ------------------------------------------------------------------ */

.wrap {
  width: min(100% - 2.5rem, var(--page));
  margin-inline: auto;
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 2.25rem); }
}

.section {
  padding-block: var(--sp-6xl);
  position: relative;
}
.section--tight { padding-block: var(--sp-5xl); }

@media (max-width: 780px) {
  .section { padding-block: var(--sp-5xl); }
}

.section__head { margin-bottom: var(--sp-4xl); }
/* Un titre suivi d'une accroche respire, où qu'il se trouve — dans un
   en-tête de section comme dans une colonne de bloc scindé. */
h2 + .lead, h1 + .lead, h3 + .lead { margin-top: var(--sp-xl); }
.section__head h2 { margin-bottom: var(--sp-xl); }
.section__head h2 + .lead { margin-top: 0; }

/* Filet de séparation discret entre deux sections de même fond. */
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

.grid { display: grid; gap: var(--sp-3xl); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Deux colonnes texte + visuel, qui s'empilent proprement. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-3xl), 6vw, 88px);
  align-items: center;
}
.split--text-first > *:first-child { order: 0; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-4xl); }
}

/* ------------------------------------------------------------------ */
/* 4. Composants                                                       */
/* ------------------------------------------------------------------ */

/* -- En-tête ------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out);
}
.site-header[data-stuck="true"] { border-bottom-color: var(--hairline); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2xl);
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.04em;
  margin-right: auto;
}
.brand .nm-logo { width: 34px; height: auto; flex: none; }

/* Le point cuivre en exposant, repris du logotype des visuels App Store. */
.brand__dot {
  width: 5px; height: 5px;
  background: var(--copper);
  border-radius: 50%;
  align-self: flex-start;
  margin-top: 0.42em;
  margin-left: -2px;
}

.site-nav { display: flex; gap: var(--sp-2xl); align-items: center; }
.site-nav a {
  font-size: 0.9375rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s;
}
.site-nav a:hover { color: var(--text); }

@media (max-width: 860px) { .site-nav { display: none; } }

.lang-switch {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-2);
  text-decoration: none;
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  padding: 5px 12px;
  transition: border-color 0.2s, color 0.2s;
}
.lang-switch:hover { color: var(--text); border-color: currentColor; }

/* -- Logo ---------------------------------------------------------- */

.nm-logo { display: block; }
.nm-logo .nm-stroke { fill: var(--accent); }
.nm-logo .nm-bar { fill: var(--green); }
.nm-logo .nm-bar-accent { fill: var(--copper); }

@media (prefers-color-scheme: dark) {
  .nm-logo .nm-bar { fill: #FFFFFF; }
}
.invert .nm-logo .nm-bar { fill: #FFFFFF; }
.invert .nm-logo .nm-stroke { fill: var(--green); }

/* -- Boutons ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 17px 28px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s var(--ease-spring), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:active { transform: scale(0.975); }

.btn--primary { background: var(--accent); color: var(--bg); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--copper)); }

.btn--ghost { border-color: var(--hairline); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: currentColor; }

.btn--copper { background: var(--copper); color: #FFF; }
.btn--copper:hover { background: color-mix(in srgb, var(--copper) 88%, #000); }

/* -- Pastilles ----------------------------------------------------- */

.pills { display: flex; flex-wrap: wrap; gap: var(--sp-md); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 9px 18px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  color: var(--text);
  background: transparent;
}
.pill svg { width: 15px; height: 15px; flex: none; opacity: 0.75; }

/* -- Cartes -------------------------------------------------------- */

/* Recette exacte de AppTheme : 16 px de rayon, 16 px de marge intérieure,
   ombre douce. */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-2xl);
  box-shadow: var(--shadow-soft);
}
.card--flat { box-shadow: none; background: transparent; }
.card--pad-lg { padding: var(--sp-3xl); }

.card h3 { margin-bottom: var(--sp-md); }
.card p { color: var(--text-2); font-size: 0.9688rem; }

.card__icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  margin-bottom: var(--sp-xl);
}
.card__icon svg { width: 21px; height: 21px; }

/* Carte de module, avec sa capture d'écran en pied. */
.module {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-out);
}
.module:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); }
.module__body { padding: var(--sp-3xl) var(--sp-3xl) var(--sp-xl); }
.module__body p { font-size: 0.9688rem; color: var(--text-2); }
/* La capture est une fenêtre entièrement arrondie, détachée des bords de la
   carte. Auparavant elle filait jusqu'au bas de la carte, arrondie en haut
   seulement : elle paraissait collée et tranchée net. */
.module__shot {
  margin: 0 var(--sp-3xl) var(--sp-3xl);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  overflow: hidden;
  background: var(--surface-2);
  height: 244px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5);
}
/* On écarte le haut de la capture — barre d'état et barre de navigation
   n'apprennent rien au visiteur — pour cadrer sur le contenu réel de l'écran. */
.module__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}

/* -- Liste à filets ------------------------------------------------ */

.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-lg);
  padding: var(--sp-lg) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.9688rem;
}
.facts li:last-child { border-bottom: 0; }
.facts svg { width: 18px; height: 18px; color: var(--accent); margin-top: 3px; }
.facts strong { display: block; letter-spacing: -0.015em; }
.facts span { color: var(--text-2); }

/* ------------------------------------------------------------------ */
/* 5. Le déchiffrement — interaction signature                         */
/* ------------------------------------------------------------------ */

/* Toute la thèse visuelle du site tient dans le contraste entre le
   libellé bancaire brut (chasse fixe, gris pierre, illisible) et la ligne
   résolue (proportionnelle, marchand identifié, catégorie, montant). */

.decode {
  display: grid;
  gap: var(--sp-lg);
  padding: var(--sp-2xl);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-medium);
}

.decode__raw {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1.5vw, 0.9375rem);
  letter-spacing: -0.03em;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: var(--sp-lg);
  border-bottom: 1px dashed var(--hairline);
}
.decode__raw b { font-weight: 400; color: var(--text); }

.decode__arrow {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
}
.decode__arrow svg { width: 14px; height: 14px; }

.decode__row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--sp-lg);
}

/* Pastille du marchand — reprend le composant MerchantLogo de l'app :
   cercle, 44 pt, repli sur un symbole sur fond teinté. */
.decode__logo {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  flex: none;
}
.decode__logo svg { width: 20px; height: 20px; }

/* Ces libellés sont des <span> dans un <span> : sans display:block ils se
   posent sur la même ligne dès que le nom du marchand est court. */
.decode__name { display: block; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.decode__meta { display: block; font-size: 0.8125rem; color: var(--text-2); line-height: 1.35; }
.decode__amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.decode__amount[data-sign="-"] { color: var(--danger); }
.decode__amount[data-sign="+"] { color: var(--success); }

/* Les deux états de la ligne résolue, pilotés par app.js.
   Sans JavaScript, .is-resolved n'est jamais retiré : la version lisible
   est celle qui s'affiche par défaut. */
.decode__resolved {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-spring);
}
.decode[data-state="scrambling"] .decode__resolved {
  opacity: 0;
  transform: translateY(6px);
}

/* -- Le mur des libellés ------------------------------------------- */

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--sp-md);
}

.wall__item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  min-height: 62px;
  overflow: hidden;
}

.wall__logo {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  flex: none;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-spring);
}
.wall__item.is-resolved .wall__logo { opacity: 1; transform: scale(1); }

.wall__text { min-width: 0; }

.wall__raw {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: -0.02em;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.3s;
}
.wall__item.is-resolved .wall__raw { opacity: 0.45; font-size: 0.625rem; }

.wall__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
.wall__item.is-resolved .wall__name { max-height: 1.4em; opacity: 1; }

.wall__cat {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--copper) 14%, transparent);
  color: color-mix(in srgb, var(--copper) 82%, var(--text));
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-spring);
}
.wall__item.is-resolved .wall__cat { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* 6. Blocs spécifiques                                                */
/* ------------------------------------------------------------------ */

/* -- Héro ---------------------------------------------------------- */

.hero { padding-block: clamp(var(--sp-3xl), 6vh, 68px) var(--sp-5xl); position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--sp-3xl), 5vw, 72px);
  align-items: center;
}
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-4xl); }
}

.hero h1 { margin-bottom: var(--sp-2xl); }
.hero .lead { margin-bottom: var(--sp-3xl); }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center; margin-bottom: var(--sp-2xl); }

.hero__device {
  position: relative;
  justify-self: center;
  max-width: 330px;
  width: 100%;
}
.hero__device img {
  width: 100%;
  border-radius: 34px;
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--hairline);
}

/* La carte de déchiffrement flotte sur le coin de l'appareil. */
.hero__decode {
  position: absolute;
  left: -14%;
  bottom: 9%;
  width: min(340px, 108%);
}
@media (max-width: 1080px) { .hero__decode { left: -6%; } }
@media (max-width: 940px)  { .hero__decode { position: static; width: 100%; margin-top: var(--sp-2xl); } }

/* -- Le constat ---------------------------------------------------- */

.claim {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  max-width: 20ch;
  text-wrap: balance;
}
.claim em { font-style: normal; color: var(--copper); }

/* -- Schéma de souveraineté ---------------------------------------- */

.sovereign {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-lg);
  margin-top: var(--sp-4xl);
}

.node {
  position: relative;
  padding: var(--sp-2xl);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.node--core {
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
}
.node--off {
  border-style: dashed;
  background: transparent;
}
.node__tag {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--sp-md);
  display: block;
}
.node--core .node__tag { color: var(--green); }
.node h3 { font-size: 1.0625rem; letter-spacing: -0.015em; line-height: 1.3; margin-bottom: var(--sp-sm); }
.node p { font-size: 0.875rem; color: var(--text-2); margin: 0; }

/* Ligne « ce qui ne sort jamais » — la promesse en négatif. */
.never {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-2xl);
  margin-top: var(--sp-3xl);
  padding-top: var(--sp-2xl);
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  color: var(--text-2);
}
.never span { display: inline-flex; align-items: center; gap: var(--sp-sm); }
.never svg { width: 15px; height: 15px; color: var(--danger); flex: none; }

/* -- Import IA ----------------------------------------------------- */

.pipeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  align-items: stretch;
}
@media (max-width: 760px) { .pipeline { grid-template-columns: 1fr; } }

.step {
  position: relative;
  padding: var(--sp-2xl);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.step__n {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--copper);
  display: block;
  margin-bottom: var(--sp-md);
}
.step h3 { font-size: 1.0625rem; letter-spacing: -0.015em; line-height: 1.3; margin-bottom: var(--sp-sm); }
.step p { font-size: 0.875rem; color: var(--text-2); margin: 0; }

/* Documents source, empilés légèrement en éventail. */
.docs { display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.doc {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--text-2);
}
.doc svg { width: 15px; height: 15px; opacity: 0.7; }

/* -- FAQ ----------------------------------------------------------- */

.faq { border-top: 1px solid var(--hairline); }
.faq details {
  border-bottom: 1px solid var(--hairline);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-xl);
  padding: var(--sp-2xl) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 13px; height: 13px;
  margin-top: 6px;
  border-right: 2px solid var(--copper);
  border-bottom: 2px solid var(--copper);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease-spring);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding-bottom: var(--sp-2xl); }
.faq p { color: var(--text-2); }

/* -- Plateformes --------------------------------------------------- */

.platforms { display: flex; flex-wrap: wrap; gap: var(--sp-3xl); }
.platform { display: flex; align-items: center; gap: var(--sp-lg); }
.platform svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.platform strong { display: block; letter-spacing: -0.02em; }
.platform span { font-size: 0.8125rem; color: var(--text-2); }

/* -- Pied de page -------------------------------------------------- */

.site-footer { padding-block: var(--sp-5xl) var(--sp-3xl); border-top: 1px solid var(--hairline); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: var(--sp-3xl);
  margin-bottom: var(--sp-4xl);
}
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
.site-footer h3 { font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-2); margin-bottom: var(--sp-lg); font-family: var(--font-sans); font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-md); }
.site-footer a { font-size: 0.9375rem; color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding-top: var(--sp-2xl);
  border-top: 1px solid var(--hairline);
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* ------------------------------------------------------------------ */
/* 7. Formulaire de liste d'attente                                    */
/* ------------------------------------------------------------------ */

.waitlist { max-width: 480px; }

.waitlist__row { display: flex; gap: var(--sp-md); }
@media (max-width: 520px) { .waitlist__row { flex-direction: column; } }

.waitlist input[type="email"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  padding: 16px 20px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s;
}
.waitlist input[type="email"]::placeholder { color: var(--text-2); opacity: 0.75; }
.waitlist input[type="email"]:focus { border-color: var(--accent); outline: none; }
.waitlist input[type="email"]:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

/* Piège à robots : jamais affiché, jamais atteint au clavier. */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.waitlist__note { font-size: 0.8125rem; color: var(--text-2); margin-top: var(--sp-lg); }

.waitlist__msg {
  margin-top: var(--sp-lg);
  font-size: 0.9375rem;
  font-weight: 500;
  display: none;
  align-items: center;
  gap: var(--sp-sm);
}
.waitlist__msg svg { width: 17px; height: 17px; flex: none; }
.waitlist[data-state="ok"] .waitlist__msg--ok { display: flex; color: var(--success); }
.waitlist[data-state="error"] .waitlist__msg--error { display: flex; color: var(--danger); }
.waitlist[data-state="ok"] .waitlist__row { display: none; }
.waitlist[data-state="ok"] .waitlist__note { display: none; }
.waitlist[data-state="sending"] button { opacity: 0.6; pointer-events: none; }

/* ------------------------------------------------------------------ */
/* 8. Pages légales                                                    */
/* ------------------------------------------------------------------ */

.doc-page { padding-block: var(--sp-5xl) var(--sp-6xl); }
.doc-page .wrap { max-width: 760px; }
.doc-page h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); margin-bottom: var(--sp-lg); }
.doc-page h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin-top: var(--sp-4xl);
  margin-bottom: var(--sp-lg);
  padding-top: var(--sp-2xl);
  border-top: 1px solid var(--hairline);
}
.doc-page h3 { font-size: 1.0625rem; margin-top: var(--sp-2xl); margin-bottom: var(--sp-sm); }
.doc-page ul { padding-left: 1.15em; margin: 0 0 1em; max-width: var(--measure); }
.doc-page li { margin-bottom: 0.5em; }
.doc-page .updated { font-size: 0.875rem; color: var(--text-2); margin-bottom: var(--sp-3xl); }

/* Encadré de mise en avant dans les pages légales. */
.callout {
  border-left: 3px solid var(--copper);
  padding: var(--sp-lg) 0 var(--sp-lg) var(--sp-2xl);
  margin: var(--sp-2xl) 0;
  background: transparent;
}
.callout p { margin: 0; }
.callout strong { color: var(--text); }

/* Tableau des données, plus lisible qu'une liste à puces. */
.data-table { width: 100%; border-collapse: collapse; margin: var(--sp-2xl) 0; font-size: 0.9375rem; }
.data-table th, .data-table td { text-align: left; padding: var(--sp-md) var(--sp-lg) var(--sp-md) 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.data-table th { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.data-table td:first-child { font-weight: 600; white-space: nowrap; }
.data-table td:last-child { color: var(--text-2); }
@media (max-width: 640px) {
  .data-table td:first-child { white-space: normal; }
}

/* ------------------------------------------------------------------ */
/* 9. Mouvement et accessibilité                                       */
/* ------------------------------------------------------------------ */

/* Apparition au défilement. L'état initial n'est posé QUE si JavaScript
   est actif (app.js pose .js sur <html>) : sans JS, tout reste visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-spring);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@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;
    scroll-behavior: auto !important;
  }
  /* On ne se contente pas de couper les transitions : les éléments
     doivent être dans leur état final, sinon la page reste vide. */
  .js [data-reveal] { opacity: 1; transform: none; }
  .decode[data-state="scrambling"] .decode__resolved { opacity: 1; transform: none; }
  .wall__item .wall__logo { opacity: 1; transform: none; }
  .wall__item .wall__name { max-height: 1.4em; opacity: 1; }
  .wall__item .wall__cat { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .waitlist, .hero__device { display: none; }
  body { background: #fff; color: #000; }
}