/* ============================================================
   RESET / BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  background: #d4e7f6;          /* couleur ciel (sky2) : aucun blanc même en rebond/overscroll */
  overscroll-behavior: none;    /* coupe le rubber-band (pas de bande blanche en fin de scroll) */
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  letter-spacing: -0.01em;
  background: #d4e7f6; /* fallback proche du bas du ciel, évite tout flash blanc */
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* les contrôles de formulaire n'héritent pas de la police par défaut :
   on force Inter partout (boutons, inputs, selects…) → typographie homogène */
button, input, select, textarea, optgroup {
  font-family: inherit;
}

/* ============================================================
   SCENE — piste de scroll. Sa hauteur = durée de l'animation.
   Hauteur réglée en JS depuis PIN_DISTANCE (fallback ci-dessous).
   Comme c'est le DERNIER élément, le scroll s'arrête exactement à
   la fin de l'animation : aucun espace blanc, rien après.
   ============================================================ */
.scene {
  position: relative;
  height: 155vh; /* = 100vh (hero) + 55vh d'animation ; surchargé par le JS */
}

/* ============================================================
   HERO — reste "collé" (sticky) à l'écran pendant l'animation
   ============================================================ */
.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden; /* masque les calques qui débordent (dock bas, colline) */
}

.hero__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Calques images : couvrent le hero, légèrement surdimensionnés pour éviter
   tout bord visible quand ils se déplacent / scalent. */
.layer {
  position: absolute;
  left: 50%;
  width: 110%;            /* un peu plus large que le viewport */
  height: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform; /* perf : on n'anime que transform/opacity */
}

/* --- CIEL (z-index 1, derrière) --- */
.layer--sky {
  top: -25%;             /* débordement vers le HAUT : couvre quand le ciel descend */
  transform: translateX(-50%);
  z-index: 1;
  /* surdimensionné en hauteur pour couvrir pendant le translateY lent */
  width: 120%;
  min-height: 155%;
  object-fit: cover;
}

/* --- COLLINE (z-index 3, premier plan) --- */
.layer--mountain {
  bottom: -2%;            /* ancrée en bas */
  transform: translateX(-50%);
  transform-origin: 50% 100%; /* scale "caméra qui avance" depuis le bas */
  z-index: 3;
  width: 120%;            /* base (mobile) : dimensionnée en largeur */
}

/* Desktop : on dimensionne la colline en HAUTEUR de viewport, pas en largeur.
   Sinon, sur un écran large et court (ex. 16:9 Windows), la hauteur — calculée
   depuis la largeur — augmente et le sommet de la colline remonte dans le titre.
   En vh, le sommet reste à une position CONSTANTE quel que soit le ratio.
   min-width garantit la couverture latérale (pas de ciel visible sur les côtés). */
@media (min-width: 768px) {
  .layer--mountain {
    width: auto;
    height: 107vh;
    min-width: 104%;
    max-width: none;
  }
}

/* --- FLEURS FLOTTANTES (z-index 2, DERRIÈRE la colline) ---
   Placées sous mountain.png (z-index 3) : elles volent dans le ciel et la
   colline les masque en bas → effet de fleurs qui s'élèvent derrière le relief.
   .petals : calque plein cadre, clippé, ne capte pas la souris.
   .petal  : wrapper positionné → reçoit la parallaxe au scroll (GSAP).
   .petal img : reçoit le flottement idle continu (GSAP) — transform séparé. */
.petals {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.petal {
  position: absolute;
  pointer-events: auto;     /* réactive le hover (le parent .petals est inerte) */
  will-change: transform;   /* porte la parallaxe au scroll */
  cursor: default;
}
.petal__inner {
  display: block;
  width: 100%;
  will-change: transform, opacity; /* porte le flottement idle + le fondu */
  /* flou de mouvement vertical : la fleur "vole" → traînée dans l'axe du bob */
  filter: url(#flower-motion);
}
.petal img {
  display: block;
  width: 100%;
  height: auto;
  /* ombre douce pour ancrer la fleur dans la lumière de la scène */
  filter: drop-shadow(0 6px 10px rgba(20, 45, 30, 0.14));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
  will-change: transform; /* porte uniquement le grossissement au hover */
}
.petal:hover img {
  transform: scale(1.28);
  filter: drop-shadow(0 10px 16px rgba(20, 45, 30, 0.22));
}

/* --- NUAGES (z-index 1, juste au-dessus du ciel, derrière tout le reste) --- */
.clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.cloud {
  position: absolute;
  will-change: transform; /* parallaxe au scroll */
}
.cloud img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform; /* dérive horizontale lente */
  filter: drop-shadow(0 8px 18px rgba(80, 120, 150, 0.12));
}

/* ============================================================
   DOCK LIQUID GLASS — recréation carte Umbra (z-index 2, au milieu)
   Style "Apple liquid glass" : verre dépoli, reflets, bordures claires.
   ============================================================ */
:root {
  /* ----------------------------------------------------------------
     PALETTE UNIQUE — dérivée du ciel (sky2) : une seule famille bleue.
     Accent "sky blue" Umbra, encres bleu-marine, verres blancs neutres.
     ---------------------------------------------------------------- */
  --brand: #1e9bff;        /* accent principal (bleu ciel Umbra) */
  --brand-deep: #0a6fe0;   /* accent profond (boutons, états actifs) */
  --ink: #0a2030;          /* texte principal — bleu-marine profond */
  --ink-2: #41586a;        /* texte secondaire — bleu-gris */
  --ink-3: #8197a8;        /* texte tertiaire / placeholder — bleu-gris clair */
  --glass-stroke: rgba(255, 255, 255, 0.55);
  --sky-fallback: #bfe1f4; /* bleu bas du ciel : zéro flash blanc */
}

.glass-dock {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(440px, 90vw);
  /* point de départ : translaté vers le bas (caché derrière la colline) */
  transform: translate(-50%, 100%);
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: 34px;
  color: var(--ink);

  /* --- LIQUID GLASS BLANC (transparent, neutre, blur fort) --- */
  /* saturate faible = le verre reste BLANC et ne prend pas la teinte du fond */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.22));
  backdrop-filter: blur(34px) saturate(115%);
  -webkit-backdrop-filter: blur(34px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 36px 80px -34px rgba(31, 51, 66, 0.30),
    0 12px 28px -20px rgba(31, 51, 66, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  will-change: transform, opacity, filter;
}

/* reflet spéculaire en haut du verre */
.glass-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 40%);
  opacity: 0.7;
}

/* point séparateur "·" réutilisable */
.dock-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 7px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  opacity: 0.7;
}

/* --- Onglets --- */
.dock-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.dock-tab {
  appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600; font-size: 13px; line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink-3);
  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.dock-tab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.dock-tab.is-active:hover {
  color: var(--brand-deep);
}

.dock-tab.is-active {
  color: var(--brand-deep);
  /* On NE change PAS la graisse (600 partout) : passer en 700 élargit le texte
     et décale les autres onglets à chaque switch. Le fond + la couleur suffisent. */
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 10px rgba(12, 27, 36, 0.1);
}

/* --- Carte "You're Shielding" --- */
.dock-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 18px -12px rgba(12, 27, 36, 0.25);
}

.dock-card__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-deep);
}

.dock-card__amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dock-card__amount {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-3);
}

/* Le montant est maintenant un <input> éditable : on neutralise le style
   natif (bordure, fond, contour) pour qu'il reste identique à l'ancien
   gros chiffre, mais saisissable. Texte saisi en encre pleine, placeholder gris. */
input.dock-card__amount {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  outline: none;
  padding: 0;
  font-family: inherit;
  color: var(--ink);
  caret-color: var(--brand-deep);
}
input.dock-card__amount::placeholder { color: var(--ink-3); opacity: 1; }

/* pitch du panneau membership / création de carte (4e onglet) */
.dock-card__pitch { display: flex; align-items: center; gap: 13px; padding: 7px 0 5px; }
.dock-card__pitch-ico {
  width: 46px; height: 46px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; color: var(--brand-deep);
  background: linear-gradient(140deg, rgba(76, 184, 245, 0.22), rgba(10, 111, 224, 0.14));
}
.dock-card__pitch-ico svg { width: 24px; height: 24px; }
.dock-card__pitch-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dock-card__pitch-txt strong { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.dock-card__pitch-txt strong small { font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.dock-card__pitch-txt > span { font-size: 12.5px; font-weight: 500; color: var(--ink-2); line-height: 1.35; }

/* léger feedback d'erreur (montant manquant) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.shake { animation: shake 0.4s; }

/* bouton "Max" — lien discret en bleu accent */
.max-btn {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
  transition: opacity 0.2s;
}
.max-btn:hover { opacity: 0.65; }

/* champ destinataire (panneau Send) éditable, aligné à droite dans la ligne de frais */
.dock-fee__input {
  flex: 1;
  min-width: 0;
  margin-left: 14px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  outline: none;
  text-align: right;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.dock-fee__input::placeholder { color: var(--ink-3); opacity: 1; }

/* ============================================================
   SÉLECTEUR DE TOKEN — menu déroulant glass ancré sous le bouton
   ============================================================ */
.dock-card__amount-row { position: relative; }

.token-select.is-open > svg { transform: rotate(180deg); }

.token-menu {
  position: fixed; /* ancré en JS via getBoundingClientRect → échappe à tout
                      contexte d'empilement parent (sinon la ligne de frais,
                      qui garde un transform de son animation d'entrée, repasse
                      par-dessus le menu). */
  z-index: 9000;
  min-width: 150px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(31, 51, 66, 0.1);
  box-shadow: 0 18px 44px -16px rgba(31, 51, 66, 0.4), 0 2px 6px rgba(31, 51, 66, 0.08);
  transform-origin: top right;
  animation: tokenMenuIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes tokenMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.token-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-weight: 600; font-size: 14px; line-height: 1;
  text-align: left;
  transition: background-color 0.18s, color 0.18s;
}
.token-menu__item:hover { background: rgba(255, 255, 255, 0.62); }
.token-menu__item.is-selected { color: var(--brand-deep); }
.token-menu__item .tick { width: 15px; height: 15px; opacity: 0; flex-shrink: 0; }
.token-menu__item.is-selected .tick { opacity: 1; }

/* ============================================================
   MODALE — récap → traitement → succès (UI seule, sans backend)
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[hidden] { display: none; }

.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 36, 52, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: scrimIn 0.3s ease both;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

.modal__card {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 26px;
  border-radius: 28px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.68));
  backdrop-filter: blur(34px) saturate(120%);
  -webkit-backdrop-filter: blur(34px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 44px 90px -36px rgba(20, 40, 55, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: modalIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.modal.is-closing .modal__card { animation: modalOut 0.24s ease forwards; }
.modal.is-closing .modal__scrim { animation: scrimOut 0.24s ease forwards; }
@keyframes modalOut { to { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes scrimOut { to { opacity: 0; } }

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: background-color 0.2s, color 0.2s;
}
.modal__close:hover { background: rgba(255, 255, 255, 0.88); color: var(--ink); }
.modal__close svg { width: 16px; height: 16px; }

/* en-tête */
.m-head { text-align: center; margin-bottom: 4px; }
.m-icon {
  width: 54px;
  height: 54px;
  margin: 2px auto 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(76, 184, 245, 0.24), rgba(10, 111, 224, 0.16));
  color: var(--brand-deep);
}
.m-icon svg { width: 26px; height: 26px; }
.m-title { margin: 0 0 5px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.m-sub { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink-2); line-height: 1.45; }

/* lignes récap */
.m-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 18px 0 20px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.m-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.32);
  font-size: 14px;
}
.m-row__k { color: var(--ink-2); font-weight: 600; }
.m-row__v { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; text-align: right; word-break: break-word; }
.m-row--total .m-row__v { color: var(--brand-deep); }

/* actions */
.m-actions { display: flex; flex-direction: column; gap: 10px; }
.m-cta { width: 100%; height: 52px; justify-content: center; }
.m-ghost {
  width: 100%;
  height: 46px;
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.4);
  color: var(--ink-2);
  font-weight: 600; font-size: 14px; line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
}
.m-ghost:hover { background: rgba(255, 255, 255, 0.72); color: var(--ink); }

.m-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
}
.m-note svg { width: 14px; height: 14px; flex-shrink: 0; }

/* --- Lien alternatif sous un formulaire (ex. rejoindre la waitlist) --- */
.m-altlink {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}
.m-altlink a {
  color: var(--brand-deep);
  font-weight: 600;
  text-decoration: none;
}
.m-altlink a:hover { text-decoration: underline; }

/* --- Déconnexion (bas de la dashboard) --- */
.m-signout {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(31, 51, 66, 0.1);
  display: flex;
  justify-content: center;
}
.m-signout__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
  transition: color 0.2s, background-color 0.2s;
}
.m-signout__btn svg { width: 18px; height: 18px; }
.m-signout__btn:hover { color: #d4483f; background: rgba(212, 72, 63, 0.08); }

/* --- Sélecteur de moyen de paiement (SEPA / carte one-time) --- */
.m-pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.m-pay__k { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.m-seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(31, 51, 66, 0.07);
}
.m-seg__opt {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 600; font-size: 13px; line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink-3);
  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.m-seg__opt:hover { color: var(--ink-2); }
.m-seg__opt.is-on {
  color: var(--brand-deep);
  background: #fff;
  box-shadow: 0 2px 8px -3px rgba(31, 51, 66, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.m-pay__detail {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 2px 18px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
}
.m-pay__detail svg { width: 13px; height: 13px; flex-shrink: 0; }
.m-pay__detail strong { font-weight: 700; color: var(--ink-2); }

/* Paiement membership en crypto : label au-dessus, 3 segments pleine largeur. */
.m-cypay { margin-top: 16px; }
.m-cypay .m-pay__k { display: block; margin-bottom: 8px; }
.m-seg--cy { display: flex; width: 100%; }
.m-seg--cy .m-seg__opt {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
}
.m-seg--cy .tok-logo { width: 17px; height: 17px; flex-shrink: 0; }

/* flash quand on régénère une carte one-time */
.m-card__num.flash { animation: cardFlash 0.5s ease; }
@keyframes cardFlash {
  from { opacity: 0.2; letter-spacing: 0.32em; }
  to   { opacity: 1; letter-spacing: 0.14em; }
}

/* champ de formulaire (inscription / membre) */
.m-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; text-align: left; }
.m-field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.m-input {
  width: 100%;
  height: 48px;
  appearance: none;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink);
  font-weight: 600; font-size: 15px; line-height: 1;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.m-input::placeholder { color: var(--ink-3); }
.m-input:focus { border-color: rgba(30, 155, 255, 0.6); box-shadow: 0 0 0 3px rgba(30, 155, 255, 0.16); }
.m-input[readonly] { color: var(--brand-deep); cursor: default; }

/* champ avec préfixe @ pour le handle */
.m-inwrap { position: relative; display: flex; align-items: center; }
.m-inprefix {
  position: absolute;
  left: 16px;
  font-weight: 700;
  color: var(--ink-3);
  pointer-events: none;
}
.m-input--prefixed { padding-left: 30px; }

/* badge self-custody */
.m-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(30, 155, 255, 0.1);
  color: var(--brand-deep);
  font-size: 12.5px;
  font-weight: 600;
}
.m-badge svg { width: 15px; height: 15px; flex-shrink: 0; }

/* paragraphe d'intro (login) */
.m-lead { margin: 4px 0 18px; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-align: center; }

/* --- Phrase de récupération (12 mots) --- */
.seed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 16px;
}
.seed-word {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.seed-word b { font-size: 10px; font-weight: 700; color: var(--ink-3); width: 12px; flex-shrink: 0; }

/* case à cocher « j'ai sauvegardé » */
.m-ack {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  padding: 4px 2px 2px;
  margin-bottom: 14px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.m-ack__box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid rgba(31, 51, 66, 0.28);
  background: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, border-color 0.2s;
}
.m-ack__box svg { width: 14px; height: 14px; color: #fff; opacity: 0; transition: opacity 0.2s; }
.m-ack.is-on .m-ack__box { background: var(--brand); border-color: var(--brand); }
.m-ack.is-on .m-ack__box svg { opacity: 1; }

/* CTA verrouillé tant qu'une condition n'est pas remplie */
.m-cta.is-disabled { opacity: 0.45; pointer-events: none; filter: saturate(0.7); }

/* --- Carte wallet (création + dashboard) --- */
.w-card {
  margin: 4px 0 2px;
  padding: 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #143047 0%, #0a6fe0 100%);
  box-shadow: 0 16px 36px -18px rgba(10, 111, 224, 0.7);
}
.w-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.w-card__brand { display: inline-flex; align-items: center; gap: 7px; }
.w-card__brand svg { width: 17px; height: 17px; }
.w-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.w-badge svg { width: 11px; height: 11px; }
.w-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 600;
}

/* chip adresse copiable */
.w-addr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  appearance: none;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
  position: relative;
}
.w-addr svg { width: 14px; height: 14px; opacity: 0.85; }
.w-addr.is-copied::after {
  content: "Copied";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-family: inherit;
}
/* version sur fond clair (dashboard) */
.w-addr--solo {
  margin: 2px auto 16px;
  background: rgba(31, 51, 66, 0.07);
  color: var(--ink-2);
  display: flex;
  width: fit-content;
}

/* carte de solde unifiée : total + détail par token */
.w-balance {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 4px 16px;
  margin-bottom: 14px;
}
.w-balance__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0;
}
.w-balance__total span { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.w-balance__total strong { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.w-balance__list { border-top: 1px solid rgba(31, 51, 66, 0.08); }
.w-tok {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.w-tok + .w-tok { border-top: 1px solid rgba(31, 51, 66, 0.07); }
.w-tok__id { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.w-tok__val { display: inline-flex; align-items: baseline; gap: 7px; }
.w-tok__val strong { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.w-tok__val small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.w-empty { text-align: center; color: var(--ink-3); font-size: 13.5px; padding: 4px 0 14px; }

/* état vide : aucun fonds déposé → on n'affiche pas de balance */
.w-noFunds {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 22px 16px; margin-bottom: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.34);
  border: 1px dashed rgba(31, 51, 66, 0.16);
}
.w-noFunds__ico {
  width: 42px; height: 42px; margin-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: rgba(31, 51, 66, 0.06); color: var(--ink-2);
}
.w-noFunds__ico svg { width: 22px; height: 22px; }
.w-noFunds strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.w-noFunds > span:last-child { font-size: 12.5px; color: var(--ink-3); }

/* sélecteur de devise d'affichage */
.w-ccy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.w-ccy__k { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.w-ccy__seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(31, 51, 66, 0.06); }
.w-ccy__opt {
  appearance: none; border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font-weight: 600; font-size: 12.5px; line-height: 1;
  transition: background-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.w-ccy__opt:hover { color: var(--ink); }
.w-ccy__opt.is-on { background: #fff; color: var(--brand-deep); box-shadow: 0 1px 3px rgba(20, 40, 55, 0.12); }

/* actions en ligne (Add funds / Send) */
/* hauteur cohérente pour TOUS les CTA de modale (prime sur .btn/.m-cta) */
.m-actions .m-cta { height: 50px; }
.m-actions--row { flex-direction: row; gap: 10px; }
/* dans une rangée, labels centrés sans le padding asymétrique du badge flèche */
.m-actions--row .m-cta { flex: 1; padding: 0; justify-content: center; }
.m-cta--ghost {
  background: rgba(31, 51, 66, 0.06);
  color: var(--brand-deep);
  border: 1px solid rgba(31, 51, 66, 0.1);
  box-shadow: none;
}
.m-cta--ghost:hover { background: rgba(31, 51, 66, 0.1); }

/* sélecteur de token pour dépôt / envoi */
.dep-toks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dep-tok {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 9px;
  border-radius: 999px;
  appearance: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: rgba(255, 255, 255, 0.45);
  color: var(--ink-2);
  font-weight: 600; font-size: 13px; line-height: 1;
  transition: border-color 0.2s, background-color 0.2s;
}
.dep-tok .tok-logo { width: 20px; height: 20px; }
.dep-tok:hover { background: rgba(255, 255, 255, 0.7); }
.dep-tok.is-on { border-color: var(--brand); background: #fff; color: var(--brand-deep); }

/* ===== Page produit (dashboard) ===== */
/* en-tête de section */
.w-section { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 9px; }
.w-section > span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.w-link { appearance: none; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 13px; line-height: 1; color: var(--brand-deep); padding: 0; }
.w-link:hover { text-decoration: underline; }

/* promo membership (non-membre) */
.w-promo {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  appearance: none; cursor: pointer; padding: 14px; border-radius: 16px;
  border: 1px solid rgba(30, 155, 255, 0.28);
  background: linear-gradient(135deg, rgba(76, 184, 245, 0.16), rgba(10, 111, 224, 0.12));
  color: var(--ink); transition: border-color 0.2s, transform 0.12s;
}
.w-promo:hover { border-color: rgba(30, 155, 255, 0.55); }
.w-promo:active { transform: scale(0.99); }
.w-promo__ico {
  width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; background: rgba(255, 255, 255, 0.62); color: var(--brand-deep);
}
.w-promo__ico svg { width: 20px; height: 20px; }
.w-promo__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.w-promo__txt strong { font-size: 14.5px; font-weight: 700; }
.w-promo__txt small { font-size: 12px; color: var(--ink-2); }
.w-promo__arr { color: var(--brand-deep); flex-shrink: 0; }
.w-promo__arr svg { width: 18px; height: 18px; }

/* statut membre */
.w-member {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.55);
}
.w-member__pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--brand-deep); }
.w-member__pill svg { width: 15px; height: 15px; }

/* mini-cartes émises */
.w-cards { display: flex; flex-wrap: wrap; gap: 9px; }
.w-mini {
  flex: 1 1 calc(50% - 5px); min-width: 132px; text-align: left; appearance: none; border: 0; cursor: pointer;
  padding: 12px 13px; border-radius: 13px; color: #fff; display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(135deg, #143047, #0a6fe0);
  box-shadow: 0 10px 22px -14px rgba(10, 111, 224, 0.7); transition: transform 0.12s;
}
.w-mini:hover { transform: translateY(-1px); }
.w-mini--classic { background: linear-gradient(135deg, #2b2350, #7a4ff0); box-shadow: 0 10px 22px -14px rgba(122, 79, 240, 0.7); }
.w-mini__type { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.85; }
.w-mini__num { font: 600 14px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; }
.w-mini__exp { font-size: 11px; opacity: 0.8; }

/* historique des transactions */
.w-tx { display: flex; flex-direction: column; gap: 4px; }
.w-tx__row { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-radius: 11px; }
.w-tx__row:hover { background: rgba(255, 255, 255, 0.34); }
.w-tx__ico {
  width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: rgba(31, 51, 66, 0.07); color: var(--ink-2);
}
.w-tx__ico svg { width: 16px; height: 16px; }
.w-tx__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.w-tx__label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.w-tx__sub { font-size: 11.5px; color: var(--ink-3); }
.w-tx__amt { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.w-tx__amt.pos { color: #0a9e54; }
.w-tx__amt.neg { color: var(--ink-2); }

/* infos carte virtuelle (exp / cvv) */
.m-card--classic { background: linear-gradient(135deg, #2b2350 0%, #7a4ff0 100%); box-shadow: 0 16px 36px -18px rgba(122, 79, 240, 0.7); }
.m-card__grid { display: flex; gap: 26px; margin-top: 14px; }
.m-card__grid span { display: flex; flex-direction: column; gap: 3px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }
.m-card__grid small { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.72; }

/* état traitement */
.m-state { text-align: center; padding: 16px 0 6px; }
.m-spin {
  width: 52px;
  height: 52px;
  margin: 8px auto 18px;
  border-radius: 50%;
  border: 3px solid rgba(10, 111, 224, 0.18);
  border-top-color: var(--brand-deep);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* coche de succès */
.m-check {
  width: 64px;
  height: 64px;
  margin: 4px auto 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #38c47f, #16a34a);
  box-shadow: 0 14px 30px -12px rgba(22, 163, 74, 0.6);
  animation: checkPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes checkPop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.m-check svg { width: 32px; height: 32px; color: #fff; }
.m-check svg path { stroke-dasharray: 32; stroke-dashoffset: 32; animation: checkDraw 0.45s 0.18s ease forwards; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }

/* carte virtuelle mock (succès membre) */
.m-card {
  margin: 2px auto 18px;
  max-width: 300px;
  aspect-ratio: 1.586;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  text-align: left;
  background: linear-gradient(135deg, #143047, #0a6fe0);
  box-shadow: 0 20px 44px -18px rgba(10, 32, 48, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.m-card__top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; opacity: 0.92; }
.m-card__top svg { width: 20px; height: 20px; }
.m-card__num { font-size: 19px; font-weight: 600; letter-spacing: 0.14em; }
.m-card__bottom { display: flex; justify-content: space-between; align-items: flex-end; font-size: 11.5px; font-weight: 600; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .modal__card, .modal__scrim, .m-check, .m-check svg path, .token-menu, .m-card__num { animation: none; }
  .m-spin { animation-duration: 1.4s; }
}

.token-select {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 8px 10px 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink-2);
  font-weight: 600; font-size: 14px; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: background-color 0.25s, box-shadow 0.25s;
}

.token-select:hover {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 14px -8px rgba(31, 51, 66, 0.35);
}

.token-select > svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.token-select:hover > svg {
  transform: translateY(1px); /* micro-clin d'œil sur le chevron */
}

/* logo de marque dans le bouton sélecteur */
.token-select__logo {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.tok-logo { width: 18px; height: 18px; display: block; border-radius: 50%; }
/* logo + nom dans une entrée du menu déroulant */
.tmi-left { display: inline-flex; align-items: center; gap: 9px; }
.tmi-left .tok-logo { width: 20px; height: 20px; }

.dock-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
}

.dock-card__meta .left {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dock-card__meta svg {
  width: 14px;
  height: 14px;
}

/* --- Ligne de frais --- */
.dock-fee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}

/* --- CORPS / PANNEAUX D'ONGLET ---
   Tous les panneaux partagent le même squelette → même hauteur.
   Un seul est affiché à la fois ; le swap est un simple fondu (aucun
   déplacement), donc rien ne saute quand on change d'onglet. */
.dock-body {
  /* Tous les panneaux sont empilés dans une seule cellule grid → la boîte
     prend la taille du plus grand et NE BOUGE JAMAIS pendant le swap.
     On peut donc faire un vrai crossfade (les deux visibles un instant)
     sans aucun saut de mise en page. */
  display: grid;
  /* minmax(0, 1fr) : la piste peut rétrécir SOUS la taille min-content de
     son contenu. Sans ça, les <input> imposent une largeur intrinsèque et
     les panneaux débordent le dock vers la droite (effet « dédoublé »). */
  grid-template-columns: minmax(0, 1fr);
}

.dock-panel {
  grid-area: 1 / 1; /* empilés au même endroit */
  min-width: 0; /* autorise le panneau à suivre la piste grid (anti-débordement) */
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.992);
  /* fondu d'entrée/sortie doux → plus aucune coupure "sèche" */
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.4s;
  pointer-events: none;
}

.dock-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Belle animation au changement d'onglet : les éléments du panneau
   (carte → ligne secondaire → CTA) entrent en cascade, en fondu + montée
   douce + flou qui se résorbe. Le translate reste interne au panneau →
   la boîte du dock garde EXACTEMENT la même taille (aucun saut). */
.dock-panel.is-active > * {
  animation: dockItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dock-panel.is-active > *:nth-child(1) { animation-delay: 0.02s; }
.dock-panel.is-active > *:nth-child(2) { animation-delay: 0.09s; }
.dock-panel.is-active > *:nth-child(3) { animation-delay: 0.16s; }

@keyframes dockItemIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); filter: blur(7px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Le gros chiffre "0" se pose avec un léger délai pour un effet premium */
.dock-panel.is-active .dock-card__amount {
  animation: dockAmountIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.14s;
}
@keyframes dockAmountIn {
  from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dock-panel.is-active > *,
  .dock-panel.is-active .dock-card__amount { animation: none; }
}

/* --- CTA pleine largeur (hérite du look .btn--primary) --- */
.dock-cta {
  width: 100%;
  height: 54px;
  justify-content: center;
}

/* ============================================================
   TITRE DU HERO (z-index 4, toujours au-dessus)
   ============================================================ */
.hero__title {
  position: absolute;
  top: 13%;
  left: 0;
  right: 0;
  z-index: 4;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
  will-change: opacity, filter; /* le titre se fond + flou au scroll */
}

.hero__title h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--ink);
  text-shadow: 0 1px 20px rgba(255, 255, 255, 0.45);
}

.hero__title p {
  margin: 0 auto;
  max-width: 440px;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 500;
  color: var(--ink-2);
}

/* ============================================================
   TEXTE EXPLICATIF (lead) — apparaît au scroll, juste au-dessus
   du dock. Révélé par GSAP (opacity 0 → 1) ; il prend le relais
   du titre principal qui se fond.
   ============================================================ */
.hero__lead {
  position: absolute;
  top: 13%;
  left: 0;
  right: 0;
  z-index: 4;
  text-align: center;
  padding: 0 24px;
  opacity: 0; /* caché au départ, révélé pendant le scroll */
  pointer-events: none;
  will-change: opacity, transform, filter;
}

.hero__lead h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  text-shadow: 0 1px 18px rgba(255, 255, 255, 0.5);
}

.hero__lead p {
  margin: 0 auto;
  max-width: 480px;
  font-size: clamp(0.92rem, 1.9vw, 1.05rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ============================================================
   prefers-reduced-motion : on fige la première frame.
   (le JS ne crée aucune animation ; on assure ici l'état visuel
   final/initial propre = panneau caché derrière la colline.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .glass-dock {
    /* on révèle le dock dès la 1re frame (centré), sans animation de scroll */
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  .hero__lead { opacity: 1; }       /* texte explicatif visible d'emblée */
  .hero__title { opacity: 0; }      /* on évite le doublon titre/lead */
  .nav__inner { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   NAVBAR — barre glass flottante
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 14px 16px;
  pointer-events: none; /* seuls les enfants captent le clic */
}

.nav__inner {
  pointer-events: auto;
  width: min(1120px, 100%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 9px 9px 22px;
  border-radius: 999px;
  /* liquid glass blanc neutre (saturate faible = pas de teinte bleue) */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.28));
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 16px 36px -24px rgba(31, 51, 66, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  flex-shrink: 0;
  text-decoration: none;
  line-height: 1;
}

/* logo seul, sans badge : le PNG blanc sert de pochoir (mask) rempli en bleu */
.nav__logo {
  width: 46px;
  height: 46px;
  display: block;
  flex-shrink: 0;
  background: linear-gradient(140deg, #4cb8f5 0%, var(--brand-deep) 100%);
  -webkit-mask: url(assets/img/logo_white.png) center / contain no-repeat;
          mask: url(assets/img/logo_white.png) center / contain no-repeat;
}
.nav__word {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}

.nav__brand svg {
  height: 24px;
  width: auto;
  display: block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}

.nav__links a {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}

.nav__links a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.4);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* masque liens/“Get the app” en dessous de 720px pour rester propre */
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__actions .btn--ghost { display: none; }
  .nav__inner { padding-left: 18px; }
}

/* Téléphone : le dock rétrécit (90vw) → les 4 onglets doivent tenir sur UNE
   ligne (sinon "Membership" passe seul à la ligne = pas propre). On resserre
   padding/police et on interdit le retour à la ligne. */
@media (max-width: 480px) {
  .dock-tabs { flex-wrap: nowrap; gap: 3px; }
  .dock-tab { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  /* Sur téléphone le dock occupe 90vw : les fleurs placées vers les bords
     (pensées pour le dock centré du desktop) chevauchent alors son contenu.
     On les repasse SOUS le dock (z-index 1) → elles restent visibles dans le
     ciel et derrière le verre (joliment floutées), sans encombrer l'UI. */
  .petals { z-index: 1; }
}

/* ============================================================
   BOUTONS (façon FintechX) — ghost glass + primary gradient + flèche
   ============================================================ */
.btn {
  --r: 999px;
  position: relative;
  isolation: isolate;       /* contexte d'empilement propre pour le sheen */
  overflow: hidden;         /* le reflet (sheen) reste clippé dans le bouton */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 8px 0 18px;
  border: 0;
  border-radius: var(--r);
  font-weight: 600; font-size: 14px; line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow 0.35s, background-color 0.25s, filter 0.3s;
}

/* Reflet "sheen" qui balaie le bouton primaire au survol (sans le déplacer) */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn--primary:hover::after {
  left: 135%;
}

/* --- Ghost glass (Get the app) --- */
.btn--ghost {
  padding: 0 18px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* --- Primary gradient + badge flèche (sobre, sans mouvement) --- */
.btn--primary {
  color: #fff;
  background: linear-gradient(110deg, #4cb8f5 0%, var(--brand) 55%, var(--brand-deep) 100%);
  box-shadow:
    0 8px 18px -10px rgba(31, 120, 200, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn--primary:hover {
  box-shadow:
    0 10px 22px -10px rgba(31, 120, 200, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  filter: brightness(1.03);
}

.btn__label {
  position: relative;
  z-index: 1;
}

/* badge rond blanc avec flèche */
.btn__icon {
  position: relative;
  z-index: 1;               /* au-dessus du reflet sheen */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--brand-deep);
  flex-shrink: 0;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.btn--primary:hover .btn__icon {
  background: #fff;
  box-shadow: 0 2px 10px rgba(10, 60, 120, 0.25);
}

.btn__icon svg {
  width: 14px;
  height: 14px;
}

/* le CTA du dock (pleine largeur) : police un peu plus grande */
.dock-cta .btn__label {
  font-size: 16px;
}

/* ============================================================
   GRAIN — film de bruit subtil (opacité 0.1) sur TOUTE la page.
   Overlay fixe, non-cliquable (pointer-events:none), au-dessus de tout.
   Bruit fractal SVG désaturé → grain neutre, léger, premium.
   ============================================================ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ============================================================
   SOUS-PAGES (How it works / Membership)
   Même langage visuel (ciel clair, verre, cartes) mais mise en
   page classique scrollable. La nav fixe est réutilisée telle quelle.
   ============================================================ */
.subpage {
  min-height: 100vh;
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(255, 255, 255, 0.7), transparent 60%),
    linear-gradient(180deg, #bcdcfa 0%, #d8ecfc 28%, #eef6fd 58%, #ffffff 100%);
  color: var(--ink);
}
.page { max-width: 940px; margin: 0 auto; padding: 132px 22px 88px; }
.page-hero { text-align: center; margin-bottom: 44px; }
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; margin-bottom: 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.7);
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--brand-deep);
}
.page-hero h1 {
  margin: 0 0 14px; font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05;
}
.page-hero p {
  margin: 0 auto; max-width: 620px; font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 1.55; color: var(--ink-2);
}

/* carte verre générique */
.glass-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5));
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow: 0 30px 60px -42px rgba(20, 40, 55, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* étapes "how it works" */
.steps { display: flex; flex-direction: column; gap: 18px; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; padding: 26px; }
.step__num {
  width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px; font-size: 22px; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, #4cb8f5, var(--brand-deep));
  box-shadow: 0 10px 22px -12px rgba(31, 120, 200, 0.7);
}
.step__body h3 { margin: 4px 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.step__body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.step__tag {
  display: inline-block; margin-top: 12px; padding: 5px 11px; border-radius: 999px;
  background: rgba(30, 155, 255, 0.1); color: var(--brand-deep); font-size: 12px; font-weight: 700;
}

/* grille de bénéfices */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.feat { padding: 22px; text-align: left; }
.feat__ico {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; background: rgba(30, 155, 255, 0.12); color: var(--brand-deep); margin-bottom: 14px;
}
.feat__ico svg { width: 22px; height: 22px; }
.feat h4 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; }
.feat p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* section titre */
.page-section-title { text-align: center; margin: 56px 0 22px; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -0.025em; }

/* bandeau CTA */
.page-cta { margin-top: 46px; padding: 40px 30px; text-align: center; }
.page-cta h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.page-cta p { margin: 0 auto 22px; max-width: 460px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.page-cta .btn { height: 50px; padding: 0 10px 0 24px; font-size: 15px; }

.disclaimer { margin-top: 30px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* ---- page paiement membership ---- */
.checkout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; align-items: start; }
.checkout__col { padding: 30px; }
.price { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 22px; }
.price strong { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; }
.price span { font-size: 16px; color: var(--ink-3); font-weight: 600; }
.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bullets li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink); }
.bullets li svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand); margin-top: 1px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.field input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: 12px;
  border: 1px solid rgba(31, 51, 66, 0.14); background: rgba(255, 255, 255, 0.7);
  font-weight: 500; font-size: 15px; line-height: 1; color: var(--ink); appearance: none;
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { outline: none; border-color: rgba(30, 155, 255, 0.6); box-shadow: 0 0 0 3px rgba(30, 155, 255, 0.16); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-total { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 18px; padding-top: 16px; border-top: 1px solid rgba(31, 51, 66, 0.1); }
.pay-total span { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.pay-total strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.pay-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.pay-note svg { width: 14px; height: 14px; }
.pay-ok { text-align: center; padding: 14px 0; }
.pay-ok__check {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #34d27b, #15a85a); color: #fff;
}
.pay-ok__check svg { width: 32px; height: 32px; }
.pay-ok h3 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.pay-ok p { margin: 0 0 20px; color: var(--ink-2); font-size: 14.5px; }

/* --- WAITLIST : carte centrée + lien X --- */
.wait { max-width: 460px; margin: 0 auto; }

.wait-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wait-or::before, .wait-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(31, 51, 66, 0.12);
}

.x-follow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #0a0a0a;
  color: #fff;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.x-follow:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.7);
}
.x-follow__ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
}
.x-follow__ico svg { width: 20px; height: 20px; }
.x-follow__txt { display: flex; flex-direction: column; line-height: 1.3; }
.x-follow__txt strong { font-size: 15px; font-weight: 700; }
.x-follow__txt span { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.x-follow__arr { margin-left: auto; opacity: 0.6; }
.x-follow__arr svg { width: 20px; height: 20px; display: block; }

@media (max-width: 760px) {
  .feat-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 12px; }
  .checkout { grid-template-columns: 1fr; }
}