/* ==========================================================================
   UNEAR — site vitrine statique
   Aucun build step, aucune dépendance npm. Chemins relatifs uniquement.

   Les tokens ci-dessous sont repris tels quels de l'app mobile
   (unear-front/theme/colors.ts) : ne jamais écrire un hex en dur ailleurs
   dans cette feuille — ajouter/utiliser une variable ici.
   ========================================================================== */

:root{
  /* --- Core palette (= colors.ts) --- */
  --bg:            #F9F8FF;   /* colors.background */
  --ink:           #1D1D1D;   /* colors.primary */
  --grey:          #9B9691;   /* colors.gray */
  --dark-grey:     #3E3E3E;   /* colors.darkGray */
  --white:         #FFFFFF;   /* colors.white */
  --violet:        #40206F;   /* colors.chatPlaceholderGradient[0] */
  --orange:        #F89F2B;   /* colors.orange */

  /* --- Brand gradient (colors.brandGradient : pink -> yellow) --- */
  --brand-start:   #FF9797;   /* colors.brandPink */
  --brand-end:     #FFE46E;
  --brand-grad:    linear-gradient(90deg, var(--brand-start) 0%, var(--brand-end) 100%);

  /* --- Tints & surfaces (= colors.ts design tints) --- */
  --separator:     rgba(29, 29, 29, .12);    /* colors.separator */
  --card:          rgba(249, 248, 255, .55); /* colors.cardTranslucent */
  --card-solid:    rgba(249, 248, 255, .92);
  --white-50:      rgba(255, 255, 255, .50); /* ProfileScreen userInfoCard */
  --ink-50:        rgba(29, 29, 29, .5);     /* colors.primary50 */
  --pink-28:       rgba(255, 151, 151, .28); /* colors.ownBubble */

  /* --- Recette « bouton » de l'app --------------------------------------
     GradientBorder (contour dégradé) + brandGradient plein posé à opacité
     0.5 sur la surface claire (cf. PlanScreen.softFill / ProfileScreen
     .createCategorySoftFill). Reproduit ici avec 3 couches de background :
     fill (padding-box) + base opaque (padding-box) + contour (border-box).
     ------------------------------------------------------------------- */
  --surface:       linear-gradient(var(--bg), var(--bg));
  --soft-fill:     linear-gradient(90deg, rgba(255,151,151,.50) 0%, rgba(255,228,110,.50) 100%);
  --soft-fill-hov: linear-gradient(90deg, rgba(255,151,151,.68) 0%, rgba(255,228,110,.68) 100%);

  /* --- Rythme --- */
  --radius:        18px;
  --radius-lg:     26px;
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, .06);
  --shadow-md:     0 12px 30px -14px rgba(29, 29, 29, .25);
  --shadow-lg:     0 30px 60px -22px rgba(29, 29, 29, .28);
  --wrap:          1160px;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; }

body{
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
button{ font-family:inherit; }

::selection{ background:var(--pink-28); color:var(--ink); }

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

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 40px; position:relative; z-index:1; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   Fond dégradé — UNE SEULE couche fixe pour toute la page.

   C'est le mesh de l'app (components/MeshBackground.tsx), mêmes teintes et
   même enchaînement rose -> pêche -> crème, mais adapté au web :
     · orienté en diagonale (158deg) au lieu d'une bande horizontale, pour
       balayer une page large plutôt qu'un écran de téléphone ;
     · posé à ~40 % d'opacité sur le fond, donc nettement plus doux ;
     · voile blanc horizontal au-dessus, cœur décalé à x≈58 % (comme dans
       l'app, où il est à 54 %) pour creuser les bords.

   Une seule couche, fixe : aucune section ne porte son propre dégradé, sinon
   une ligne de raccord apparaît à la frontière entre le hero et la suite.
   -------------------------------------------------------------------------- */
.mesh{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
/* Grain de tramage (dithering), posé sur le fond de .mesh — donc SOUS le blob
   et le voile, qui sont tous deux semi-transparents et le laissent transparaître.

   Pourquoi : un dégradé très peu contrasté étalé sur tout un écran dépasse la
   précision de 8 bits par canal. Le navigateur arrondit, et les paliers
   d'arrondi se lisent comme des bandes. Un bruit quasi invisible casse ces
   paliers. SVG inline en data-URI : aucun fichier, aucune requête réseau. */
.mesh{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}
/* Blob : stops repris de MeshBackground.tsx, en diagonale et adoucis */
.mesh::before{
  content:"";
  position:absolute;
  inset:-14% -8%;
  opacity:.4;
  background-image:linear-gradient(158deg,
    #F9F8FF  0%,
    #F9F8FF 10%,
    #FBDFE4 19%,
    #FBC8CB 25%,
    #FDB4B1 31%,
    #FCACA0 37%,
    #FCB198 43%,
    #FCBB97 49%,
    #FBC7A1 55%,
    #FBD8B4 61%,
    #FCE3C4 67%,
    #FBEBD5 73%,
    #FAF0E4 79%,
    #FAF4EF 85%,
    #F9F8FF 92%,
    #F9F8FF 100%);
}
/* Voile blanc : creuse les bords, cœur chaud décalé à droite.
   Rampe volontairement très découpée : avec 4 ou 5 arrêts, les changements de
   pente se lisent comme des barres verticales (effet de bandes de Mach). */
.mesh::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(90deg,
    rgba(249,248,255,.78)   0%,
    rgba(249,248,255,.72)   6%,
    rgba(249,248,255,.65)  12%,
    rgba(249,248,255,.58)  18%,
    rgba(249,248,255,.50)  24%,
    rgba(249,248,255,.42)  30%,
    rgba(249,248,255,.34)  36%,
    rgba(249,248,255,.27)  42%,
    rgba(249,248,255,.20)  48%,
    rgba(249,248,255,.14)  53%,
    rgba(249,248,255,.09)  57%,
    rgba(249,248,255,.06)  61%,
    rgba(249,248,255,.08)  65%,
    rgba(249,248,255,.13)  69%,
    rgba(249,248,255,.19)  73%,
    rgba(249,248,255,.26)  77%,
    rgba(249,248,255,.34)  81%,
    rgba(249,248,255,.43)  85%,
    rgba(249,248,255,.52)  89%,
    rgba(249,248,255,.61)  93%,
    rgba(249,248,255,.70)  97%,
    rgba(249,248,255,.76) 100%);
}

/* --------------------------------------------------------------------------
   Boutons — contour dégradé + fond dégradé doux (recette de l'app)
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
  padding:13px 28px;
  border:2px solid transparent;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  background-image:var(--soft-fill), var(--surface), var(--brand-grad);
  background-origin:border-box;
  background-clip:padding-box, padding-box, border-box;
  transition:background-image .22s ease, transform .22s ease, box-shadow .22s ease;
}
.btn:hover{
  background-image:var(--soft-fill-hov), var(--surface), var(--brand-grad);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn:active{ transform:translateY(0); }
.btn[disabled]{ opacity:.55; cursor:default; transform:none; box-shadow:none; }

.btn--lg{ padding:16px 38px; font-size:16px; }

/* Variante discrète : contour encre, sans dégradé */
.btn--ghost{
  background-image:none;
  background-color:transparent;
  border:1.5px solid var(--separator);
  font-weight:500;
}
.btn--ghost:hover{ background-image:none; border-color:var(--ink); box-shadow:none; }

/* Surface réutilisable : contour dégradé + fond doux */
.soft-grad{
  border:2px solid transparent;
  background-image:var(--soft-fill), var(--surface), var(--brand-grad);
  background-origin:border-box;
  background-clip:padding-box, padding-box, border-box;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(249, 248, 255, .78);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--separator);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:76px; }

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-weight:800;
  font-size:20px;
  letter-spacing:.05em;
}
.brand img{ width:34px; height:34px; border-radius:9px; box-shadow:var(--shadow-sm); }

.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a:not(.btn){ font-size:15px; font-weight:500; color:var(--grey); transition:color .2s; }
.nav-links a:not(.btn):hover{ color:var(--ink); }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border:1.5px solid var(--separator);
  border-radius:12px;
  background:var(--card);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.nav-toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--ink); position:relative; }
.nav-toggle span::before,
.nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:2px;
  border-radius:2px; background:var(--ink);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
section{ padding:100px 0; position:relative; }

/* Sections qui se lisent d'un seul tenant : on resserre l'espace entre elles.
   Un écart = padding bas de l'une + padding haut de la suivante. */
.gap-t{ padding-top:46px; }
.gap-b{ padding-bottom:46px; }

/* Our story → Who it's for : resserré aussi, mais un cran plus large que le
   reste (ce sont deux sujets distincts). Sélecteurs d'id : ils l'emportent
   sur .gap-t / .gap-b, d'où les surcharges correspondantes en responsive. */
#story{ padding-bottom:64px; }
#who{ padding-top:64px; }

.eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:18px;
}
h1, h2, h3{ letter-spacing:-.02em; }

h2{ font-weight:800; font-size:clamp(28px, 4vw, 42px); line-height:1.12; max-width:700px; }

.lead{ font-size:18px; font-weight:300; color:var(--dark-grey); max-width:620px; margin-top:22px; }

/* Texte en dégradé (violet -> rose = colors.chatPlaceholderGradient, assez
   contrasté sur fond clair, contrairement au rose -> jaune). */
.grad-text{
  background-image:linear-gradient(100deg, var(--violet) 0%, var(--brand-start) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Bloc d'appel à l'action, en tête de page : c'est la cible de tous les
   boutons « Join the waitlist » (#waitlist).

   Il occupe à lui seul le premier écran (hauteur du viewport moins celle de la
   nav, qui est sticky et occupe donc 76px dans le flux) et son contenu est
   centré verticalement — rien d'autre n'est visible avant de faire défiler. */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  /* 76px = hauteur de la nav (sticky, donc elle occupe la place dans le flux).
     Les 80px retirés en plus raccourcissent le hero d'autant : « How it works »
     remonte et dépasse plus franchement sous la ligne de flottaison. */
  min-height:calc(100vh - 246px);
  min-height:calc(100svh - 246px);  /* évite le saut lié à la barre d'URL mobile */
  /* Paddings volontairement asymétriques : le contenu reste centré dans
     l'espace restant, donc ce bas plus épais le remonte et laisse le haut de
     « How it works » dépasser — l'indice qu'on peut faire défiler.
     Le padding bas est réduit en même temps que min-height, sinon raccourcir
     le hero remonterait aussi son contenu. */
  padding:60px 0 40px;
}
.hero > .wrap{ width:100%; }
.hero-cta-in{ max-width:760px; margin:0 auto; text-align:center; }
.hero h1{ font-weight:800; font-size:clamp(38px, 5.4vw, 62px); line-height:1.05; }
.hero .sub{
  font-size:18px; font-weight:300; color:var(--dark-grey);
  margin:24px auto 34px; max-width:580px;
}

.socials{ display:flex; gap:12px; justify-content:center; margin-top:34px; }
.socials a{
  position:relative;
  width:54px; height:54px;
  border:1.5px solid var(--separator);
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--card);
  color:var(--ink);
  transition:border-color .2s, transform .2s;
}
.socials a:hover{ border-color:var(--brand-start); transform:translateY(-2px); }
.socials svg{ width:22px; height:22px; }

/* Vignette à cheval sur le coin haut-gauche d'une icône, pour désigner le
   canal à privilégier (Discord).
   Le fond est empilé en deux couches — dégradé de marque à 50 % posé sur une
   base opaque, la recette « bouton » du site : à cheval sur la bordure, un
   fond translucide laisserait voir le trait de la tuile passer dessous. */
.social-tag{
  position:absolute;
  top:-7px; left:-8px;
  padding:2px 7px;
  border-radius:7px;
  background:var(--soft-fill), var(--surface);
  box-shadow:var(--shadow-sm);
  color:var(--ink);
  font-size:9px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}

/* ==========================================================================
   COMMENT ÇA MARCHE + maquettes — deux colonnes, repères en dessous
   ========================================================================== */
/* Le hero occupant tout le premier écran, son contenu centré laisse déjà du
   vide en dessous : on rogne le padding haut de section (100px) pour que
   « How it works » remonte et suive de plus près. */
#how{ padding-top:20px; }

.showcase-in{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:center;
  gap:56px;
}
/* Les étapes passent en colonne : numéro à gauche, texte à droite. */
.showcase-text .steps{ grid-template-columns:1fr; gap:14px; margin-top:34px; }
.showcase-text .step{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:22px 24px;
  border-radius:var(--radius);
}
.showcase-text .step .n{ flex:none; width:40px; height:40px; font-size:13px; margin-bottom:0; }
.showcase-text .step h3{ font-size:17px; margin-bottom:6px; }
.showcase-text .step p{ font-size:14.5px; }

/* ==========================================================================
   MAQUETTES TÉLÉPHONE — reproductions fidèles de deux écrans de l'app
   Écran 1 : GroupScreen pendant un défi actif
   Écran 2 : ProfileScreen (la photo vit dans assets/images/profile.jpg)
   Tout est en CSS : aucune capture d'écran à héberger.
   ========================================================================== */
.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  /* --ps = échelle des maquettes. TOUT en découle : la taille du châssis,
     mais aussi l'UI reproduite à l'intérieur, qui est mise à l'échelle d'un
     bloc (voir .ph-screen). Pour redimensionner les maquettes, une seule
     valeur à changer dans un media query.

     Sans cela, réduire le châssis laissait l'UI interne à sa taille d'origine :
     le nom du groupe devenait illisible et la carte de défi débordait. */
  --ps:1;
  --pw:calc(252px * var(--ps));
  min-height:calc(580px * var(--ps));
  transform:translateX(48px);   /* décale l'ensemble des maquettes vers la droite */
}
.phone{
  width:var(--pw);
  height:calc(518px * var(--ps));
  border-radius:calc(30px * var(--ps));
  background:var(--bg);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
  flex:none;
}
.phone::after{           /* encoche */
  content:"";
  position:absolute;
  top:calc(11px * var(--ps)); left:50%; transform:translateX(-50%);
  width:calc(62px * var(--ps)); height:calc(6px * var(--ps));
  border-radius:99px; background:var(--ink);
  z-index:6;
}
/* L'écran est TOUJOURS mis en page à 252 × 518 — la taille pour laquelle
   toute l'UI interne ci-dessous a été dessinée — puis mis à l'échelle d'un
   seul bloc. Les valeurs en pixels des règles .ph-* restent donc valables
   quelle que soit la taille d'affichage. */
.ph-screen{
  position:absolute;
  top:0; left:0;
  width:252px;
  height:518px;
  display:flex;
  flex-direction:column;
  transform:scale(var(--ps));
  transform-origin:top left;
}

/* Mesh interne : reprise fidèle de components/MeshBackground.tsx
   (mêmes stops) — ici c'est de l'UI d'app, pas le fond du site. */
.ph-mesh{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(90deg,
      rgba(249,248,255,.72) 0%, rgba(249,248,255,.28) 30%,
      rgba(249,248,255,0) 54%, rgba(249,248,255,.15) 78%,
      rgba(249,248,255,.62) 100%),
    linear-gradient(180deg,
      #F9F8FF 0%, #F9F8FF 12%, #FBDFE4 20%, #FBC8CB 25%, #FDB4B1 30%,
      #FCACA0 35%, #FCB198 40%, #FCBB97 45%, #FBC7A1 50%, #FBD8B4 55%,
      #FCE3C4 60%, #FBEBD5 65%, #FAF0E4 70%, #FAF4EF 75%, #F9F8FF 82%,
      #F9F8FF 100%);
}

/* Décalages en POURCENTAGE de la taille du téléphone (et non en pixels) :
   ils suivent donc --pw. En pixels fixes, le téléphone du fond sortait de
   l'écran à gauche sur les petites largeurs. */
.phone--group{ z-index:3; transform:rotate(3deg) translateX(18%); }            /*   46 / 252 */
.phone--profile{ position:absolute; z-index:2; transform:rotate(-9deg) translate(-47%, 3.5%); } /* -118 / 252 */

/* ---------- Écran 1 : GroupScreen ---------- */
.ph-gs{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  height:100%;
  padding:26px 10px 0;
  overflow:hidden;   /* le feed est coupé par le châssis, comme un vrai scroll */
}

/* Header : logo | séparateur | groupe | album | cloche */
.ph-gs-header{ display:flex; align-items:center; gap:4px; padding:0 6px; height:36px; }
.ph-gs-logo{ width:26px; height:26px; border-radius:7px; flex:none; }
.ph-gs-sep{ width:1px; height:16px; background:var(--separator); margin:0 3px; flex:none; }
.ph-gs-avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--ink); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.ph-gs-avatar svg{ width:12px; height:12px; color:var(--bg); }
.ph-gs-group{ flex:1; min-width:0; margin-left:5px; line-height:1.25; }
.ph-gs-group strong{
  display:block; font-size:9.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ph-gs-group span{ display:block; font-size:8px; font-weight:400; color:var(--grey); }
.ph-gs-sq{
  width:28px; height:28px; border-radius:9px;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  flex:none; position:relative;
}
.ph-gs-sq svg{ width:15px; height:15px; color:var(--bg); }
.ph-gs-dot{
  position:absolute; top:6px; right:6px;
  width:5px; height:5px; border-radius:50%; background:var(--orange);
}

/* Badges : pill combinée (catégorie + timer) à gauche, Skip à droite */
.ph-gs-badges{
  display:flex; align-items:center; justify-content:space-between;
  gap:6px; padding:0 6px; margin-top:10px;
  position:relative; z-index:3;
}
.ph-gs-combined{
  display:flex; align-items:center;
  background:var(--bg);
  border-radius:10px;
  padding:2px;
  box-shadow:var(--shadow-sm);
}
.ph-gs-cat{
  display:flex; align-items:center; gap:3px;
  padding:4px 8px;
  font-size:8.5px; font-weight:600; color:var(--ink);
}
.ph-gs-cat svg{ width:10px; height:10px; }
.ph-gs-timer{
  background:var(--ink); color:var(--bg);
  border-radius:8px;
  padding:4px 8px;
  font-size:8.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.ph-gs-skip{
  display:flex; align-items:center; gap:2px;
  background:var(--bg);
  border-radius:10px;
  padding:5px 9px;
  font-size:8.5px; font-weight:600; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.ph-gs-skip svg{ width:10px; height:10px; }

/* Carte du défi : contour dégradé, coin haut-gauche carré (la pill s'y encastre) */
.ph-gs-card{
  margin:-11px 6px 0;
  border:2px solid transparent;
  border-radius:0 12px 12px 12px;
  padding:20px 11px 12px;
  background-image:
    linear-gradient(rgba(249,248,255,.55), rgba(249,248,255,.55)),
    var(--brand-grad);
  background-origin:border-box;
  background-clip:padding-box, border-box;
  box-shadow:var(--shadow-sm);
  position:relative; z-index:2;
}
.ph-gs-card p{ font-size:11px; font-weight:500; line-height:1.4; color:var(--ink); }

/* Champ de chat : pill blanche, placeholder en dégradé violet -> rose */
.ph-gs-input{
  display:flex; align-items:center; gap:6px;
  margin:7px 6px 0;
  background:var(--bg);
  border-radius:16px;
  padding:8px 9px 8px 13px;
  min-height:32px;
}
.ph-gs-input span{ flex:1; font-size:10px; font-weight:500; }
.ph-gs-input svg{ width:15px; height:15px; color:var(--ink); flex:none; }

/* Feed — reproduction de components/Post.tsx
   (avatar rond 32 sur fond cream avec l'initiale, pseudo 14/600, horodatage
   12 gris à 8px du pseudo, légende sous le pseudo, « ⋯ » aligné en haut à
   droite, puis l'image carrée en radius 12). Échelle ≈ 0,62. */
.ph-gs-feed{ margin:10px 6px 0; flex:1; overflow:hidden; }
.ph-gs-post{ padding-top:5px; }
.ph-gs-post-head{ display:flex; align-items:flex-start; gap:5px; margin-bottom:5px; }
.ph-gs-post-avatar{
  width:20px; height:20px; border-radius:50%;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:8.5px; font-weight:600; color:var(--ink);
  flex:none;
}
.ph-gs-post-body{ flex:1; min-width:0; }
.ph-gs-post-row{ display:flex; align-items:center; }
.ph-gs-post-row b{ font-size:9px; font-weight:600; color:var(--ink); }
.ph-gs-post-row time{ font-size:7.5px; font-weight:400; color:var(--grey); margin-left:5px; }
.ph-gs-post-caption{ font-size:8.5px; font-weight:400; line-height:1.4; color:var(--ink); margin-top:1px; }
.ph-gs-post-dots{ font-size:12px; font-weight:700; color:var(--grey); line-height:1; padding:2px; flex:none; }
.ph-gs-post-img{
  position:relative;
  width:100%;
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  background:var(--ink);
}
.ph-gs-post-img::before{      /* repli tant qu'aucune photo n'est déposée */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 40% 35%, rgba(255,151,151,.42), transparent 72%),
    radial-gradient(60% 60% at 75% 80%, rgba(255,228,110,.30), transparent 70%),
    var(--ink);
}
.ph-gs-post-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }

/* ---------- Barre d'onglets flottante (components/CustomTabBar.tsx) ----------
   Pill sombre en position absolue, hauteur 63 / radius 31.5, 4 onglets de 62 de
   large, icônes blanches 24 (32 + translateY(-3) quand actif), libellés 11/500.
   Échelle ≈ 0,62. Commune aux deux maquettes. */
.ph-tabbar{
  position:absolute;
  left:0; right:0; bottom:9px;
  z-index:5;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.ph-tabbar-pill{
  display:flex;
  align-items:center;
  height:39px;
  border-radius:19.5px;
  background:var(--ink);
  padding:0 6px;
  box-shadow:0 6px 18px -6px rgba(29,29,29,.5);
}
.ph-tab{
  width:38px;
  display:flex; flex-direction:column; align-items:center;
  color:var(--white);
}
.ph-tab-ico{ height:20px; display:flex; align-items:center; justify-content:center; position:relative; }
.ph-tab-ico svg{ width:15px; height:15px; }
.ph-tab.is-active .ph-tab-ico svg{ width:20px; height:20px; transform:translateY(-2px); }
.ph-tab-label{ font-size:6.5px; font-weight:500; margin-top:-1px; }
.ph-tab-badge{
  position:absolute; top:-2px; right:-5px;
  min-width:10px; height:10px;
  border-radius:5px;
  background:var(--orange);
  color:var(--white);
  font-size:6px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  padding:0 2px;
}

/* ---------- Écran 2 : ProfileScreen ---------- */
.ph-pf{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; }

.ph-pf-hero{
  position:relative;
  height:238px;
  flex:none;
  background:var(--ink);
  overflow:hidden;
}
/* Repli quand assets/images/profile.jpg n'est pas encore importée */
.ph-pf-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 38%, rgba(255,151,151,.35), transparent 70%),
    var(--ink);
}
.ph-pf-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:1;
}
.ph-pf-settings{
  position:absolute; top:34px; right:12px; z-index:3;
  width:24px; height:24px; border-radius:999px;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.ph-pf-settings svg{ width:14px; height:14px; color:var(--ink); }
.ph-pf-card{
  position:absolute; left:11px; bottom:34px; z-index:3;
  max-width:70%;
  background:var(--white-50);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-radius:14px;
  padding:8px 11px;
}
.ph-pf-card strong{ display:block; font-size:11px; font-weight:700; color:var(--ink); }
.ph-pf-card span{ display:block; font-size:8.5px; line-height:1.35; color:var(--ink); }

.ph-pf-content{
  position:relative; z-index:2;
  flex:1;
  margin-top:-17px;
  background:var(--bg);
  border-radius:17px 17px 0 0;
  padding:14px 13px 0;
}
.ph-pf-share{
  display:flex; align-items:center; gap:8px;
  background:var(--bg);
  border-radius:14px;
  padding:9px 11px;
  box-shadow:var(--shadow-sm);
  margin-bottom:15px;
}
.ph-pf-share div{ flex:1; min-width:0; }
.ph-pf-share strong{ display:block; font-size:10px; font-weight:600; color:var(--ink); }
.ph-pf-share span{ display:block; font-size:8.5px; color:var(--grey); }
.ph-pf-share svg{ width:15px; height:15px; color:var(--ink); flex:none; }

.ph-pf-stats{ display:flex; justify-content:space-between; margin-bottom:18px; }
.ph-pf-stat{ flex:1; text-align:center; }
.ph-pf-stat-row{ display:flex; align-items:center; justify-content:center; gap:3px; }
.ph-pf-stat-row svg{ width:12px; height:12px; color:var(--ink); }
.ph-pf-stat-row svg.is-fire{ color:var(--orange); }
.ph-pf-stat-row b{ font-size:11.5px; font-weight:700; color:var(--ink); }
.ph-pf-stat > span{ display:block; font-size:7px; color:var(--grey); margin-top:2px; }

.ph-pf-cats{
  font-size:7.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--grey); margin-bottom:9px;
}
.ph-pf-create{
  display:flex; align-items:center; justify-content:center; gap:5px;
  border:1.5px solid transparent;
  border-radius:12px;
  padding:9px;
  font-size:9.5px; font-weight:600; color:var(--ink);
  background-image:var(--soft-fill), var(--surface), var(--brand-grad);
  background-origin:border-box;
  background-clip:padding-box, padding-box, border-box;
}
.ph-pf-create svg{ width:11px; height:11px; }

/* Liste « My categories » sous le bouton (ProfileScreen.myCategoryRow) :
   icône 40 en radius 12 sur gray20, nom + statut, méta, puis stats + chevron. */
.ph-pf-catlist{ display:flex; flex-direction:column; gap:5px; margin-top:7px; }
.ph-pf-cat{
  display:flex; align-items:center; gap:7px;
  background:var(--bg);
  border-radius:9px;
  padding:7px 9px;
}
.ph-pf-cat-ico{
  width:24px; height:24px; border-radius:7px;
  background:rgba(217, 217, 217, .2);   /* colors.gray20 */
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  flex:none;
}
.ph-pf-cat-info{ flex:1; min-width:0; }
.ph-pf-cat-name{ display:flex; align-items:center; gap:5px; }
.ph-pf-cat-name b{
  font-size:9px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ph-pf-cat-name em{ font-size:7px; font-weight:600; font-style:normal; color:var(--grey); flex:none; }
.ph-pf-cat-meta{ font-size:7px; color:var(--grey); margin-top:1px; }
.ph-pf-cat-end{ display:flex; align-items:center; gap:1px; flex:none; }
.ph-pf-cat-end svg{ width:11px; height:11px; color:var(--grey); }

/* ==========================================================================
   NOTRE HISTOIRE
   ========================================================================== */
.story-in{
  display:grid;
  /* Plancher explicite sur la colonne photos : toutes les cartes étant en
     position absolue, la colonne n'a aucune largeur intrinsèque et pouvait
     être écrasée par la colonne texte. */
  grid-template-columns:minmax(340px, 1.1fr) minmax(0, 1fr);
  align-items:center;
  gap:56px;
}

/* --- Pile de photos « tirages papier » ---------------------------------
   Un clic envoie la photo de devant sous la pile et révèle la suivante ;
   des autres on ne voit que la tranche. Les positions sont pilotées par la
   variable --i (0 = devant) posée en JS, tout le reste est du CSS.
   ---------------------------------------------------------------------- */
.deck-wrap{ width:100%; max-width:560px; margin:0 auto; }
.deck{
  position:relative;
  padding:26px 38px 0 0;     /* place pour le décalage des cartes du dessous */
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  /* Chrome recale le scroll quand la géométrie change au-dessus du viewport ;
     combiné à scroll-behavior:smooth, ça donnait un petit saut de page à
     chaque changement de photo. */
  overflow-anchor:none;
}
.deck:focus-visible{ outline:2px solid var(--violet); outline-offset:6px; border-radius:12px; }
.deck-stage{ position:relative; }

.deck-card{
  position:absolute;
  top:0; left:0; right:0;
  display:flex; flex-direction:column;
  background:var(--white);
  border-radius:9px;
  padding:11px 11px 0;
  box-shadow:0 20px 36px -20px rgba(29,29,29,.5), 0 1px 2px rgba(29,29,29,.08);
  transform-origin:50% 92%;
  transform:
    translate(calc(var(--i, 0) * 11px), calc(var(--i, 0) * -7px))
    rotate(calc(var(--i, 0) * 1.4deg))
    scale(calc(1 - var(--i, 0) * .03));
  z-index:calc(50 - var(--i, 0));
  transition:transform .42s cubic-bezier(.22,.72,.3,1), opacity .28s ease;
}
/* La première carte du DOM reste dans le flux : c'est elle qui donne sa hauteur
   à .deck-stage, et donc au conteneur.

   Avant, la hauteur venait d'un `padding-top:112%` sur .deck-stage — un ratio
   fixe qui ne peut pas être juste à toutes les largeurs, puisque la légende a
   une hauteur constante alors que la photo est carrée (donc proportionnelle à
   la largeur). Trop court, la photo (élément flex) se faisait comprimer ; et
   comme AUCUNE carte n'était dans le flux, la colonne de grille n'avait aucune
   largeur intrinsèque. D'où des cartes minuscules dès que la largeur
   disponible bougeait.

   Le JS ne réordonne jamais le DOM (il ne change que --i) : cette carte de
   référence est donc stable, et sa transformée n'affecte pas la mise en page. */
.deck-card:first-child{ position:relative; }
/* Instant « on repose le tirage » : la carte descend avant de repasser dessous */
.deck-card.is-out{
  transform:translate(6px, 52px) rotate(-3.5deg) scale(.95);
  opacity:.75;
}

.deck-photo{
  position:relative;
  flex:none;              /* jamais comprimée par la légende */
  border-radius:3px;
  overflow:hidden;
  background:var(--ink);
}
.deck-photo::before{ content:""; display:block; padding-top:100%; }   /* carré */
.deck-photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:1;                 /* au-dessus du repli */
}
/* Repli visible tant que la photo n'est pas déposée dans assets/images/ */
.deck-fallback{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:9px;
  text-align:center;
  padding:18px;
  font-size:12px;
  color:var(--grey);
  background-image:var(--soft-fill), var(--surface);
}
.deck-fallback svg{ width:26px; height:26px; color:var(--ink); opacity:.5; }
.deck-fallback code{
  font-size:10.5px;
  background:var(--white-50);
  border-radius:6px;
  padding:2px 6px;
  word-break:break-all;
}

/* Hauteur fixe : les cartes du dessous sont calées sur celle du dessus, une
   légende qui passerait sur deux lignes ne doit pas décaler la pile. */
.deck-caption{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  height:52px;
  padding:0 4px;
  overflow:hidden;
}
.deck-caption b{ font-size:15px; font-weight:600; color:var(--ink); }
.deck-caption span{ font-size:13px; font-weight:300; color:var(--grey); }
.story-text p{ font-size:16.5px; font-weight:300; color:var(--dark-grey); margin-top:20px; }
.story-text p strong{ font-weight:600; color:var(--ink); }
.story-sign{
  display:flex; align-items:center; gap:10px;
  margin-top:30px;
  font-size:14px; font-weight:500; color:var(--ink);
}
.story-sign span{
  width:34px; height:2px; border-radius:2px;
  background-image:var(--brand-grad);
}

/* --------------------------------------------------------------------------
   Comment ça marche
   -------------------------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:56px; }
.step{
  background:var(--card);
  border:1px solid var(--separator);
  border-radius:var(--radius-lg);
  padding:32px 30px;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:transform .25s ease, box-shadow .25s ease;
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.step .n{
  width:46px; height:46px;
  border:2px solid transparent;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
  margin-bottom:22px;
  background-image:var(--soft-fill), var(--surface), var(--brand-grad);
  background-origin:border-box;
  background-clip:padding-box, padding-box, border-box;
}
.step h3{ font-weight:600; font-size:19px; margin-bottom:10px; }
.step p{ font-size:15px; font-weight:300; color:var(--dark-grey); }

/* --------------------------------------------------------------------------
   Pour qui
   -------------------------------------------------------------------------- */
.who-in{ text-align:center; }
.who-in h2{ margin:0 auto; }
.who-in .lead{ margin-left:auto; margin-right:auto; }

/* --- Demi-ovale -----------------------------------------------------------
   Le SVG et les cartes partagent le repère 1000 × 440 : le SVG via son
   viewBox, les cartes via --x / --y convertis en pourcentages. Tout se
   redimensionne ensemble, et les libellés restent du vrai texte.
   -------------------------------------------------------------------------- */
.arc{
  position:relative;
  max-width:1000px;
  margin:0 auto;
  aspect-ratio:1000 / 440;
}
.arc-svg{ position:absolute; inset:0; width:100%; height:100%; }

.arc-base{ stroke-width:2; opacity:.65; }

/* Titre + texte, posés dans le creux de l'arc */
.arc-copy{
  position:absolute;
  left:50%;
  top:5%;
  transform:translateX(-50%);
  width:min(560px, 62%);
  text-align:center;
}
.arc-copy h2{ font-size:clamp(26px, 3.4vw, 38px); margin:0 auto; }
.arc-copy .lead{ font-size:16.5px; margin:18px auto 0; }

/* Cartes enfilées sur l'arc */
.arc-node{
  position:absolute;
  left:calc(var(--x) / 1000 * 100%);
  top:calc(var(--y) / 440 * 100%);
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  gap:9px;
  /* Sans width:max-content, la largeur d'un élément en position absolue est
     limitée par l'espace restant entre `left` et le bord droit du conteneur.
     La carte de droite est posée à left:88,2% : il ne lui restait que 11,8 %
     de largeur, et aucun max-width ne pouvait l'élargir. Les trois autres,
     plus à gauche, n'étaient pas concernées. */
  width:max-content;
  /* --w permet d'élargir une carte au cas par cas (libellé plus long). */
  max-width:var(--w, 220px);
  padding:12px 20px;
  font-size:15px;
  font-weight:500;
  line-height:1.3;
  color:var(--ink);
  border:2px solid transparent;
  border-radius:999px;
  background-image:var(--soft-fill), var(--surface), var(--brand-grad);
  background-origin:border-box;
  background-clip:padding-box, padding-box, border-box;
  box-shadow:var(--shadow-sm);
}
.arc-node svg{ width:18px; height:18px; flex:none; }

/* --------------------------------------------------------------------------
   Pourquoi (grille)
   -------------------------------------------------------------------------- */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px; }
.cell{
  background:var(--card);
  border:1px solid var(--separator);
  border-radius:var(--radius-lg);
  padding:34px 32px;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:transform .25s ease, box-shadow .25s ease;
}
.cell:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.cell-ico{
  width:44px; height:44px;
  border:2px solid transparent;
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  color:var(--ink);
  background-image:var(--soft-fill), var(--surface), var(--brand-grad);
  background-origin:border-box;
  background-clip:padding-box, padding-box, border-box;
}
.cell-ico svg{ width:20px; height:20px; }
.cell h3{ font-weight:600; font-size:19px; margin-bottom:9px; }
.cell p{ font-size:15px; font-weight:300; color:var(--dark-grey); }

/* --------------------------------------------------------------------------
   Confiance
   -------------------------------------------------------------------------- */
.trust{ text-align:center; }
.trust p{ font-size:clamp(19px, 2.4vw, 25px); font-weight:300; line-height:1.5; max-width:800px; margin:0 auto; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-head{ text-align:center; margin-bottom:48px; }
.faq-head h2{ margin:0 auto; }
.faq{ max-width:790px; margin:0 auto; }

.faq-cat{
  font-size:12.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey); margin:44px 0 12px;
}
.faq-cat:first-child{ margin-top:0; }

.item{
  background:var(--card);
  border:1px solid var(--separator);
  border-radius:16px;
  margin-bottom:10px;
  overflow:hidden;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:border-color .22s ease;
}
.item.open{ border-color:var(--brand-start); }
.q{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  cursor:pointer;
  font-size:16.5px;
  font-weight:500;
  color:var(--ink);
  padding:20px 22px;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
}
.chev{ flex:none; width:20px; height:20px; position:relative; transition:transform .25s ease; }
.chev::before, .chev::after{
  content:""; position:absolute; top:9px;
  width:11px; height:2px; border-radius:2px; background:var(--ink);
}
.chev::before{ left:0; transform:rotate(45deg); }
.chev::after{ right:0; transform:rotate(-45deg); }
.item.open .chev{ transform:rotate(180deg); }

.a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.a-inner{ padding:0 22px 22px; font-size:15.5px; font-weight:300; color:var(--dark-grey); max-width:660px; }

/* Placeholder « à compléter » */
.ph{
  background:var(--pink-28);
  color:var(--ink);
  font-weight:500;
  padding:1px 8px;
  border-radius:7px;
  font-size:14px;
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   Réseaux (après la FAQ)
   -------------------------------------------------------------------------- */
.follow{ text-align:center; padding-bottom:80px; }
.follow-line{ font-size:19px; font-weight:300; color:var(--dark-grey); }

/* --------------------------------------------------------------------------
   Formulaire de liste d'attente (dans le hero)
   -------------------------------------------------------------------------- */
.waitlist{ display:flex; gap:10px; max-width:470px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
/* Le padding + l'ombre vivent sur le wrapper, l'input reste sans padding :
   même règle que dans l'app (sinon Android perd le padding au focus). */
.field{
  flex:1 1 250px;
  display:flex;
  align-items:center;
  background:var(--card-solid);
  border:1.5px solid var(--separator);
  border-radius:999px;
  padding:14px 22px;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s;
}
.field:focus-within{ border-color:var(--brand-start); }
.field input{
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  font-family:inherit; font-size:15px; color:var(--ink); padding:0;
}
.field input::placeholder{ color:var(--grey); }

.form-note{ margin-top:18px; font-size:14px; font-weight:400; min-height:22px; }
.form-note.ok{ color:var(--violet); }
.form-note.err{ color:var(--orange); }

/* --------------------------------------------------------------------------
   Page contact (contact.html)

   Réutilise `.field` du formulaire de liste d'attente : même surface, même
   contour, même halo au focus. `.field--block` neutralise simplement le
   `flex:1 1 250px` et le rayon en gélule, qui ne conviennent qu'à la ligne
   email du hero.
   -------------------------------------------------------------------------- */
/* Pas de padding-top ici, contrairement à `.legal` (56px) : le contenu est
   court, le seul rythme de section suffit à le poser sous la nav. */
.contact{ max-width:790px; }
.contact-head h1{ font-size:clamp(32px, 4.4vw, 44px); font-weight:800; }
.contact-head .lead{ font-size:17px; font-weight:300; color:var(--dark-grey); margin-top:14px; }

.contact-form{ margin-top:40px; display:flex; flex-direction:column; gap:20px; }
/* Nom + email côte à côte sur une ligne, empilés sous 700px (cf. media query) */
.cf-row{ display:flex; gap:20px; }
.cf-row .cf-group{ flex:1 1 0; min-width:0; }
.cf-group{ display:flex; flex-direction:column; gap:9px; }
.cf-group label{
  font-size:13px; font-weight:600; letter-spacing:.04em;
  color:var(--dark-grey);
}

.field--block{ flex:0 0 auto; border-radius:var(--radius); padding:14px 18px; }
/* Les champs invalides ne se signalent qu'après une tentative d'envoi :
   la classe est posée par le script, `:invalid` seul crierait à la saisie. */
.field--block.is-err{ border-color:var(--orange); }

.field textarea{
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  font-family:inherit; font-size:15px; font-weight:300; line-height:1.6;
  color:var(--ink); padding:0; resize:vertical;
}
.field textarea::placeholder{ color:var(--grey); }

/* Le <select> natif garde sa liste déroulante système, mais perd son habillage
   (appearance:none) pour reprendre celui des autres champs ; le chevron est
   dessiné à côté, d'où le padding-right qui lui laisse la place. */
.field--select{ position:relative; }
.field select{
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  font-family:inherit; font-size:15px; color:var(--ink);
  padding:0 26px 0 0;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  cursor:pointer;
}
.cf-caret{
  position:absolute; right:18px;
  width:18px; height:18px;
  color:var(--grey); pointer-events:none;
}

.cf-actions{ margin-top:8px; }
.cf-actions .form-note{ margin-top:14px; }

.contact-alt{
  margin-top:34px; padding-top:26px;
  border-top:1px solid var(--separator);
  font-size:15px; font-weight:300; color:var(--dark-grey);
}
/* `:not(.grad-text)` : sans ça, cette règle (plus spécifique) redonnerait une
   couleur au lien mail et écraserait le texte en dégradé, qui a besoin de
   `color:transparent` pour laisser voir le fond détouré. */
.contact-alt a{ font-weight:500; }
.contact-alt a:not(.grad-text){ color:var(--ink); }
.contact-alt a:not(.grad-text):hover{ color:var(--violet); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer{
  background:var(--bg);
  border-top:1px solid var(--separator);
  padding:56px 0 44px;
  position:relative;
  z-index:1;
}
.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; }
.foot-brand p{ font-size:14px; font-weight:300; color:var(--grey); margin-top:10px; }
.foot-nav{ display:flex; gap:56px; flex-wrap:wrap; }
/* Les titres de colonne sont des <h3> (et non des <h4>) pour éviter un saut de
   niveau dans la hiérarchie des titres sur les pages légales (h1 → h2 → h4).
   Le sélecteur reste plus spécifique que la règle globale `h1, h2, h3`, donc
   c'est bien le letter-spacing ci-dessous qui s'applique. */
.foot-col h3{
  font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey); margin-bottom:14px;
}
.foot-col a{ display:block; font-size:14px; font-weight:500; color:var(--grey); padding:4px 0; transition:color .2s; }
.foot-col a:hover{ color:var(--ink); }
.foot-bottom{
  margin-top:40px; padding-top:24px;
  border-top:1px solid var(--separator);
  font-size:13px; color:var(--grey);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* --------------------------------------------------------------------------
   Pages légales (privacy / acceptable-use / dsa / moderation)
   -------------------------------------------------------------------------- */
.legal{ max-width:790px; padding-top:56px; }
.legal h1{ font-size:clamp(32px, 4.4vw, 44px); font-weight:800; }
.legal h2{ font-size:22px; margin-top:44px; }
.legal h3{ font-size:17px; font-weight:600; margin-top:26px; }
.legal p, .legal li{ font-size:15.5px; font-weight:300; color:var(--dark-grey); margin-top:14px; }
.legal ul, .legal ol{ padding-left:22px; }
.legal .updated{ font-size:14px; color:var(--grey); margin-top:12px; }

/* --------------------------------------------------------------------------
   Apparition au scroll
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .wrap{ padding:0 24px; }
  section{ padding:70px 0; }

  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute;
    top:76px; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:18px 24px 26px;
    background:rgba(249, 248, 255, .97);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--separator);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a:not(.btn){ padding:12px 2px; font-size:16px; }
  .nav-links .btn{ margin-top:10px; }

  .hero{
    padding:40px 0 34px;
    min-height:calc(100vh - 190px);
    min-height:calc(100svh - 190px);
  }
  #how{ padding-top:10px; }
  /* Une fois la mise en page empilée, les maquettes se recentrent. */
  .hero-visual{ --ps:.91; transform:none; }
  .follow{ padding-bottom:56px; }

  .showcase-in{ grid-template-columns:1fr; gap:26px; }

  .gap-t{ padding-top:34px; }
  .gap-b{ padding-bottom:34px; }
  #story{ padding-bottom:44px; }
  #who{ padding-top:44px; }

  .story-in{ grid-template-columns:1fr; gap:40px; }
  .deck-wrap{ max-width:460px; }

  .steps, .grid2{ grid-template-columns:1fr; }
  .foot-nav{ gap:36px; }
}

/* L'arc se déplie : en dessous de cette largeur, les cartes se
   chevaucheraient. Elles repassent en flux, sous le texte. */
@media (max-width:900px){
  .arc{ aspect-ratio:auto; }
  .arc-svg{ display:none; }
  .arc-copy{
    position:static;
    transform:none;
    width:auto;
    max-width:620px;
    margin:0 auto 24px;
  }
  .arc-node{
    position:static;
    transform:none;
    display:inline-flex;
    width:auto;
    max-width:100%;
    margin:8px 4px 0;
  }
}

/* Nom + email ne tiennent plus côte à côte : la ligne s'empile. */
@media (max-width:700px){
  .cf-row{ flex-direction:column; gap:20px; }
}

@media (max-width:560px){
  .hero .waitlist .btn{ width:100%; }
  .cf-actions .btn{ width:100%; }

  /* L'UI interne rétrécit avec le châssis (--ps), donc les proportions
     restent celles de l'app. Les décalages sont resserrés pour que le
     téléphone du fond reste entièrement visible. */
  .hero-visual{ --ps:.8; }
  .phone--group{ transform:rotate(2deg) translateX(10%); }
  .phone--profile{ transform:rotate(-9deg) translate(-24%, 3.5%); opacity:.92; }

  .deck{ padding:22px 30px 0 0; }

  .q{ font-size:15.5px; padding:18px; }
  .a-inner{ padding:0 18px 18px; }
  .ph{ white-space:normal; }
}

/* Deux derniers paliers pour les téléphones étroits : seule --ps change,
   châssis et UI interne rétrécissent ensemble. */
@media (max-width:440px){
  .hero-visual{ --ps:.68; }
}
@media (max-width:360px){
  .hero-visual{ --ps:.6; }
}

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