/* =========================================================================
   idbeen — site V2 · css/styles.css                            (builder DA)
   -------------------------------------------------------------------------
   LA DA (décisions 20-24) : fond BLANC (#FFFFFF à #FCFCFA), encre quasi
   noire #1C1C19, gris chauds discrets. Panneaux FRANCS : hairlines, bords
   nets, filet 3px couleur-du-lieu en haut. Boutons à l'encre (plein noir =
   action principale, filet = secondaire). Zéro pastel, zéro crème (le crème
   ne survit QUE dans les styles internes du lieu Journal, chez lieux.js).
   Titres en Bricolage Grotesque (OFL, embarquée dans ../fonts/).
   LE VERT SACRÉ : point central, puces « qui voit ça ? », pupille de l'œil
   « Qui voit quoi », la marque de vérité de la valeur de BASE d'une
   info (.st-pvf__verite — décision 35), et LE POINT DU LOGO
   (.st-logo__dot — décision 46) — et rien d'autre, nulle part.
   Fluide du téléphone au 27 pouces : jamais de px figés pour la composition.

   CLASSES PARTAGÉES (contrat pour tous les builders) :
   .st-porte__carte  colonne centrée de la porte (et de l'escalier)
   .st-logo          LE logo : le point vert accolé au nom (décision 46,
                     qui révise la 20) — .st-logo__dot + .st-logo__nom
   .st-ciel          la constellation (plein écran ; + .st-ciel--regard
                     en mode « voir comme » : le point central disparaît)
   .st-moi           LE point vert central (bouton)
   .st-lieu          un lieu-tuile (+ __icone, __nom, __badge ; anneaux :
                     --proche ou --loin ; positions FIXES : --p1 … --p7
                     (anneau proche, heptagone), --p8 … --p13 (anneau loin))
   .st-lieu__badge   le point BLEU « du non-vu » (jamais vert)
   .st-coin          le bouton Réglages, discret en coin : l'icône SEULE
                     (décision 47, qui révise la 30 — __nom reste accepté
                     dans le DOM mais n'est plus affiché)
   .st-bandeau       le bandeau « tu regardes ta page comme… » (+ __btn)
   .st-sheet         feuillet = PANNEAU FRANC avec filet 3px
                     var(--st-couleur-lieu) en haut (posée par lieux.js /
                     constellation.js sur l'élément ; repli : encre), et
                     .st-sheet-fond, __tete, __titre, __fermer, __soustitre,
                     __section (+ --discret), __section-titre, __ligne,
                     __ligne-nom, __formulaire, __pied, et .st-case
   .st-page          une PAGE de lieu (brief V6, décision 66) : pleine,
                     blanche, filet 3px var(--st-couleur-lieu) en haut
                     (posée par js/pages.js dans #st-pages ; + __tete,
                     __medaillon (+ -point : LE point vert, tap = la
                     constellation), __marque, __corps, __titre, __contenu)
   .st-rail          le rail bas-droite des pages (+ __item, __nom,
                     __badge — le point BLEU du non-vu, jamais vert)
   .st-carte         carte de contenu (+ __tete, __titre, __pv, __corps)
   .st-info          ligne d'info (+ __label, __valeur, __pv)
   .st-btn           bouton (+ --primary, --petit, --pleine)
   .st-input         champ (input, select, textarea)
   .st-chip          puce d'audience (+ --active : la seule chip verte)
   .st-badge         étiquette discrète (+ --groupe, --cercle, --demo)
   .st-dot           LE point vert (+ --herite = cerclé, --masque = indice,
                     --grand) ; .st-pv = slot (Site.PointVert.attach)
   .st-pvf           les flèches de variantes (décisions 35, 43, 44),
                     posées par Site.PointVert.fleches (+ __fleche
                     (--creer), __verite = la marque VERTE de la base,
                     __valeur, __qui, __nav = les flèches à droite,
                     __case = la case vide inline de création)
   .st-pv-cherche    la recherche des listes qui grossissent (décision 48)
   .st-pv-soustitre  le sous-titre du feuillet quand il feuillette
   .st-code          un code qui se lit (clé de contact, code démo)
   .st-qr            le faux QR d'une clé de contact
   .st-photo-grille  grille de « photos » (+ .st-photo-case)
   .st-table         la table du Registre ; .st-alerte = alerte d'incohérence
   Utilitaires : .st-liste, .st-ligne, .st-barre, .st-discret, .st-erreur,
                 .st-vide, .st-sr
   LA NUIT (brief V5 — l'avant-porte et le monde, builder MONDE) :
   .st-avp-*  l'avant-porte (§13) · .st-mnd-* le monde habité (§14) ·
   .st-nz-*   la naissance-zoom (§15) · .st-rideau  la fin de plongée
   dans le vert (§16, déc. 61). La Terre de nuit = du CONTENU,
   pas un thème : le produit derrière reste blanc. Sur la nuit, le vert
   ne sert QUE le point-bouton, ton point et les naissances (déc. 52).
   LA PALETTE DES LIEUX : --st-lieu-<id> (14 tuiles : les 13 du brief §1
   + « Ma position » terre cuite, déc. 40) — lieux.js peut poser
   --st-couleur-lieu: var(--st-lieu-<id>) sur son feuillet.
   Les styles SPÉCIFIQUES d'un module restent chez lui (injectés, préfixés).
   ========================================================================= */

/* ------------------------------------------------------------------ *
 *  0. La typo embarquée — Bricolage Grotesque (variable 400-600,     *
 *     OFL — voir ../fonts/LICENCE-FONTS.txt)                         *
 * ------------------------------------------------------------------ */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ------------------------------------------------------------------ *
 *  1. Variables — l'unique source de vérité                          *
 * ------------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* Marque — LE vert, réservé au point / puces / pupille / marque
     de vérité (.st-pvf__verite, décision 35). */
  --st-vert: #5BBF4A;
  --st-vert-fonce: #4AA23B;
  --st-vert-doux: #E6F4E2;    /* halo du point, fond des puces actives */
  --st-vert-encre: #35722B;

  /* Neutres — blanc franc, gris chauds. */
  --st-fond: #FCFCFA;
  --st-papier: #FFFFFF;
  --st-surface: #FFFFFF;
  --st-surface-2: #F2F1EC;
  --st-bord: #E3E1DA;
  --st-bord-fort: #C7C4BA;
  --st-bord-doux: #EFEDE7;

  /* Encres */
  --st-encre: #1C1C19;
  --st-encre-douce: #55534B;
  --st-encre-pale: #8B887D;

  /* Accents fonctionnels (signal, jamais décor) */
  --st-ambre: #D98A1F;        /* l'indice « variante » du point vert */
  --st-ambre-doux: #FFFFFF;   /* les fonds ambrés d'hier deviennent blancs */
  --st-ambre-encre: #8A5407;
  --st-terre: #C24E38;        /* retirer / alerter */

  /* LA NUIT (brief V5) — l'avant-porte et le monde : la Terre de nuit.
     Points gris-bleu ; le vert n'y sert que le point-bouton, ton point
     et les naissances (déc. 52). */
  --st-nuit: #0F141C;
  --st-nuit-2: #151C27;
  --st-nuit-trait: #232D3C;
  --st-nuit-encre: #E9EEF6;
  --st-nuit-douce: #93A4BE;
  --st-nuit-pale: #5D6C84;

  /* LES 13 TUILES (palette EXACTE, brief §1) — la couleur vit sur les
     PORTES ; dans les pièces, un filet de 3px au plus (décision 23). */
  --st-lieu-infos: #2E7CF6;
  --st-lieu-gens: #FF8A3C;
  --st-lieu-groupes: #F04E3E;
  --st-lieu-photos: #FFC02E;
  --st-lieu-journal: #8B5CF6;
  --st-lieu-mots: #38BDF8;
  --st-lieu-musique: #EC4899;
  --st-lieu-jeux: #5865F2;
  --st-lieu-notes: #F59E0B;
  --st-lieu-reseaux: #14B8A6;
  --st-lieu-jours: #EF4444;
  --st-lieu-quivoitquoi: #23231F;   /* la tuile NOIRE — œil blanc, pupille verte */
  --st-lieu-dunouveau: #3B5BDB;
  --st-lieu-position: #C2410C;      /* TERRE CUITE — « Ma position » (déc. 40),
                                       distincte des 13 autres, jamais verte */
  --st-bleu-nonvu: #3B5BDB;         /* le badge « du non-vu » — BLEU, pas vert */

  /* Typo */
  --st-font-titres: "Bricolage Grotesque", "Segoe UI Variable Display",
    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --st-font-ui: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Rayons (bords nets) et ombres (retenues) */
  --st-r-sm: 4px;
  --st-r-md: 6px;
  --st-r-lg: 8px;
  --st-r-pilule: 999px;
  --st-ombre-1: 0 1px 2px rgba(28, 28, 25, 0.06);
  --st-ombre-2: 0 6px 20px rgba(28, 28, 25, 0.08);
  --st-ombre-3: 0 18px 48px rgba(28, 28, 25, 0.16);

  /* La constellation : rayons des 2 anneaux (x/y séparés), PROPORTIONNELS
     à l'écran — elle habite tout l'écran, du téléphone au 27 pouces.
     Resserrés à 380 px par la media query du §5. */
  --st-r1x: clamp(106px, 14vw, 260px);
  --st-r1y: clamp(118px, 21vh, 235px);
  --st-r2x: clamp(182px, 28vw, 520px);
  --st-r2y: clamp(210px, 38vh, 420px);

  /* Les tuiles, fluides elles aussi. */
  --st-tuile-taille: clamp(46px, 3.4vw + 34px, 62px);
  --st-tuile-rayon: clamp(15px, 0.9vw + 12px, 19px);
  --st-tuile-glyphe: clamp(24px, 1.4vw + 19px, 30px);
}

/* ------------------------------------------------------------------ *
 *  2. Base                                                           *
 * ------------------------------------------------------------------ */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--st-font-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--st-encre);
  background: var(--st-fond);
  min-height: 100vh;
}

button, input, select, textarea { font: inherit; color: inherit; }

[hidden] { display: none !important; }

::selection { background: #E7E5DE; }

:focus-visible {
  outline: 2px solid var(--st-encre);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 *  3. LE POINT VERT — l'élément n°1, taille généreuse                *
 *     plein  = réglé explicitement                                   *
 *     cerclé = hérité de la zone      (.st-dot--herite)              *
 *     indice = une variante existe    (.st-dot--masque)              *
 * ------------------------------------------------------------------ */
.st-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  flex: none;
}
button.st-dot { cursor: pointer; }
button.st-dot:disabled { cursor: default; }

.st-dot::before {
  content: "";
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--st-vert);
  transition: transform 0.15s ease;
}
.st-dot--herite::before {
  background: transparent;
  border: 3px solid var(--st-vert);
}
.st-dot--masque::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 3px;
  right: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--st-ambre);
  border: 2px solid var(--st-surface);
}
.st-dot--grand::before { width: 22px; height: 22px; }
.st-dot--grand.st-dot--herite::before { border-width: 4px; }
button.st-dot:hover::before { transform: scale(1.18); }
button.st-dot:active::before { transform: scale(0.92); }

/* Slot d'un point vert (rempli par Site.PointVert.attach). */
.st-pv, .st-info__pv {
  margin-left: auto;
  display: inline-flex;
  flex: none;
}
.st-carte__pv { display: inline-flex; flex: none; }

/* ------------------------------------------------------------------ *
 *  4. La porte (et l'escalier d'inscription) — blanc, franc :        *
 *     le nom, les champs, rien d'autre                               *
 * ------------------------------------------------------------------ */
#st-porte {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 22px calc(28px + env(safe-area-inset-bottom, 0px));
}
.st-porte__carte {
  width: 100%;
  max-width: min(88vw, 340px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.st-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
}
/* Décision 46 (révise la 20) : LE logo = le point vert accolé au nom,
   partout — la porte comme l'accueil. Le même lockup. */
.st-logo__dot {
  flex: none;
  width: clamp(13px, 10px + 0.5vw, 16px);
  height: clamp(13px, 10px + 0.5vw, 16px);
  border-radius: 50%;
  background: var(--st-vert);
}
.st-logo__nom {
  font-family: var(--st-font-titres);
  font-size: clamp(1.9rem, 1.5rem + 1vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}
.st-porte__liens {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
.st-lien {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--st-encre-douce);
  font-size: 0.86rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.st-lien:hover { color: var(--st-encre); }

/* ------------------------------------------------------------------ *
 *  5. La constellation — le point vert (toi) au centre, 13 tuiles    *
 *     couleur autour en 2 anneaux. Disposition FIXE : chaque lieu    *
 *     porte .st-lieu--proche|--loin + sa position .st-lieu--p1…--p13 *
 *     (p1…p7 : heptagone proche ; p8…p13 : hexagone loin).           *
 * ------------------------------------------------------------------ */
#st-monde { min-height: 100vh; min-height: 100dvh; }

.st-ciel {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Toi : LE point, gros, vivant — le seul vert de l'accueil (avec la
   pupille de l'œil « Qui voit quoi »). */
.st-moi {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(88px, 5vw + 70px, 116px);
  height: clamp(88px, 5vw + 70px, 116px);
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}
.st-moi::before {
  content: "";
  width: clamp(56px, 3.2vw + 44px, 74px);
  height: clamp(56px, 3.2vw + 44px, 74px);
  border-radius: 50%;
  background: var(--st-vert);
  box-shadow: 0 0 0 clamp(12px, 0.8vw + 9px, 16px) var(--st-vert-doux),
    0 6px 18px rgba(59, 122, 47, 0.28);
  transition: transform 0.18s ease;
  animation: st-respire 4.5s ease-in-out infinite;
}
.st-moi:hover::before { transform: scale(1.06); }
.st-moi:active::before { transform: scale(0.96); }

/* En mode « voir comme » : zéro point vert. */
.st-ciel--regard .st-moi { display: none; }

.st-lieu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
    translate(calc(var(--st-ax, 0) * var(--st-rx, 0px)),
              calc(var(--st-ay, 0) * var(--st-ry, 0px)));
  width: clamp(76px, 4vw + 62px, 116px);
  padding: 4px 2px;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border-radius: var(--st-r-md);
}

/* La tuile : couleur franche, glyphe blanc plein (--st-tuile posée par
   constellation.js : var(--st-lieu-<id>)). */
.st-lieu__icone {
  position: relative;
  width: var(--st-tuile-taille);
  height: var(--st-tuile-taille);
  border-radius: var(--st-tuile-rayon);
  background: var(--st-tuile, var(--st-encre));
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(28, 28, 25, 0.14);
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.st-lieu__icone svg {
  width: var(--st-tuile-glyphe);
  height: var(--st-tuile-glyphe);
  display: block;
}
.st-lieu:hover .st-lieu__icone {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(28, 28, 25, 0.18);
}
.st-lieu:active .st-lieu__icone { transform: translateY(0); }
.st-lieu__nom {
  font-family: var(--st-font-titres);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.62rem + 0.35vw, 0.88rem);
  line-height: 1.25;
  color: var(--st-encre);
  text-align: center;
  max-width: 100%;
}

/* Le badge « du non-vu » : un petit point BLEU (jamais vert). */
.st-lieu__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--st-bleu-nonvu);
  border: 2px solid var(--st-fond);
}

/* Les anneaux. */
.st-lieu--proche { --st-rx: var(--st-r1x); --st-ry: var(--st-r1y); }
.st-lieu--loin   { --st-rx: var(--st-r2x); --st-ry: var(--st-r2y); }

/* Les positions fixes. p1…p7 : l'heptagone proche (un sommet en haut,
   pas de 51,43°) ; p8…p14 : l'heptagone loin (« Ma position » a rejoint
   l'anneau — déc. 40), décalé d'un demi-pas (25,7°) pour respirer entre
   les branches du proche. */
.st-lieu--p1  { --st-ax:  0;      --st-ay: -1; }
.st-lieu--p2  { --st-ax:  0.7818; --st-ay: -0.6235; }
.st-lieu--p3  { --st-ax:  0.9749; --st-ay:  0.2225; }
.st-lieu--p4  { --st-ax:  0.4339; --st-ay:  0.9010; }
.st-lieu--p5  { --st-ax: -0.4339; --st-ay:  0.9010; }
.st-lieu--p6  { --st-ax: -0.9749; --st-ay:  0.2225; }
.st-lieu--p7  { --st-ax: -0.7818; --st-ay: -0.6235; }
.st-lieu--p8  { --st-ax:  0.4339; --st-ay: -0.9010; }
.st-lieu--p9  { --st-ax:  0.9749; --st-ay: -0.2225; }
.st-lieu--p10 { --st-ax:  0.7818; --st-ay:  0.6235; }
.st-lieu--p11 { --st-ax:  0;      --st-ay:  1; }
.st-lieu--p12 { --st-ax: -0.7818; --st-ay:  0.6235; }
.st-lieu--p13 { --st-ax: -0.9749; --st-ay: -0.2225; }
.st-lieu--p14 { --st-ax: -0.4339; --st-ay: -0.9010; }

/* Réglages : un coin, discret, gris encre — l'icône SEULE (décision 47,
   qui révise la 30 : c'était à lui de trouver, instinctif). */
.st-coin {
  position: absolute;
  right: 14px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  padding: 4px 6px;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--st-encre-douce);
  cursor: pointer;
  border-radius: var(--st-r-md);
}
.st-coin__icone {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--st-bord-fort);
  background: var(--st-surface);
  display: grid;
  place-items: center;
}
.st-coin svg { width: 20px; height: 20px; display: block; }
/* Décision 47 : plus de libellé — la classe reste acceptée dans le DOM. */
.st-coin__nom { display: none; }
.st-coin:hover { color: var(--st-encre); }
.st-coin:hover .st-coin__icone { border-color: var(--st-encre); }

/* Le bandeau « voir comme » — à l'encre, franc, tout en haut. */
.st-bandeau {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--st-encre);
  color: #FFFFFF;
  font-size: 0.88rem;
}
.st-bandeau__btn {
  padding: 3px 12px;
  border-radius: var(--st-r-pilule);
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.st-bandeau__btn:hover { background: rgba(255, 255, 255, 0.16); }

/* Anneaux resserrés : le mobile est la référence (impeccable à 380 px). */
@media (max-width: 480px) {
  :root {
    --st-r1x: 80px;
    --st-r1y: 114px;
    --st-r2x: 146px;
    --st-r2y: min(200px, calc(50vh - 92px));
  }
  .st-lieu { width: 76px; }
}
/* Écrans bas (paysage, petits portables) : on resserre en hauteur. */
@media (max-height: 600px) {
  :root { --st-r1y: 88px; --st-r2y: calc(50vh - 64px); }
}

/* ------------------------------------------------------------------ *
 *  6. Cartes et lignes d'info — hairlines, bords nets                *
 * ------------------------------------------------------------------ */
.st-carte {
  background: var(--st-surface);
  border: 1px solid var(--st-bord);
  border-radius: var(--st-r-sm);
  padding: 14px 16px 12px;
}
.st-carte__tete {
  display: flex;
  align-items: center;
  gap: 10px;
}
.st-carte__titre {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--st-font-titres);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0;
}
.st-carte__corps { margin-top: 6px; }

.st-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  min-height: 36px;
}
.st-info + .st-info { border-top: 1px solid var(--st-bord-doux); }
.st-info__label {
  flex: 0 0 92px;
  font-size: 0.86rem;
  color: var(--st-encre-douce);
}
.st-info__valeur {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Les flèches de variantes (décisions 35, 43, 44) — posées par
   Site.PointVert.fleches(el, infoId). BASE → variantes ; la BASE
   porte la marque de vérité : LE quatrième emploi du vert, avec le
   point central, les puces et la pupille. Les flèches ‹ › vivent À
   DROITE de la ligne (décision 44) — le même niveau que le › des
   lignes sans variantes, jamais collées au texte. */
.st-pvf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  vertical-align: middle;
}
/* Dans une ligne d'info, le feuilletage prend la place de la valeur. */
.st-info .st-pvf { flex: 1 1 auto; }
/* Le sous-titre du feuillet feuillette sur la même ligne. */
.st-pv-soustitre {
  display: flex;
  align-items: center;
  gap: 6px;
}
.st-pv-soustitre .st-pvf {
  flex: 1 1 auto;
  min-width: 0;
}
.st-pvf__nav {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex: none;
}
.st-pvf__fleche {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--st-encre-douce);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.st-pvf__fleche:hover {
  background: var(--st-surface-2);
  color: var(--st-encre);
}
.st-pvf__fleche:disabled {
  opacity: 0.35;
  cursor: default;
  background: none;
}
.st-pvf__fleche--creer { color: var(--st-encre-pale); }
.st-pvf__verite {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--st-vert);
}
.st-pvf__valeur {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
button.st-pvf__valeur { cursor: pointer; border-radius: var(--st-r-sm); }
button.st-pvf__valeur:hover { background: var(--st-surface-2); }
.st-pvf__qui {
  flex: none;
  font-size: 0.78rem;
  color: var(--st-encre-pale);
  white-space: nowrap;
}
/* La case vide inline (décision 43) : créer d'abord, doser ensuite. */
.st-pvf__case {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 6px 10px;
  font-size: 0.95rem;
}
/* Décision 48 : quand la liste grossit, la recherche d'abord. */
.st-pv-cherche { margin: 2px 0 10px; }

/* ------------------------------------------------------------------ *
 *  7. Puces (audiences) et badges                                    *
 *     La puce active est VERTE : c'est un « qui voit ça ? » — l'une  *
 *     des trois places du vert.                                      *
 * ------------------------------------------------------------------ */
.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--st-r-pilule);
  border: 1px solid var(--st-bord-fort);
  background: var(--st-surface);
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--st-encre);
}
button.st-chip { cursor: pointer; }
button.st-chip:hover { border-color: var(--st-encre); }
.st-chip--active {
  background: var(--st-vert-doux);
  border-color: var(--st-vert);
  color: var(--st-vert-encre);
  font-weight: 600;
}

.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--st-r-pilule);
  border: 1px solid var(--st-bord-fort);
  background: var(--st-surface);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--st-encre-douce);
  white-space: nowrap;
}
.st-badge--groupe {   /* « les membres se voient » — à l'encre, franc */
  background: var(--st-encre);
  border-color: var(--st-encre);
  color: #FFFFFF;
}
.st-badge--cercle {   /* « toi seul le vois » */
  border-style: dashed;
}
.st-badge--demo {     /* « démo » — un signal ambré, honnête */
  background: var(--st-surface);
  border-color: var(--st-ambre);
  color: var(--st-ambre-encre);
}

/* ------------------------------------------------------------------ *
 *  8. Boutons et champs — à l'encre                                  *
 *     plein noir = action principale · filet = secondaire            *
 * ------------------------------------------------------------------ */
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--st-r-md);
  border: 1px solid var(--st-encre);
  background: var(--st-surface);
  color: var(--st-encre);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.st-btn:hover { background: var(--st-surface-2); }
.st-btn:active { transform: translateY(1px); }
.st-btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.st-btn--primary {
  background: var(--st-encre);
  border-color: var(--st-encre);
  color: #FFFFFF;
}
.st-btn--primary:hover { background: #3A3831; }
.st-btn--petit {
  padding: 4px 10px;
  font-size: 0.8rem;
}
.st-btn--pleine {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
}

.st-input {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--st-r-md);
  border: 1px solid var(--st-bord-fort);
  background: var(--st-surface);
  font-size: 1rem;
  color: var(--st-encre);
}
.st-input::placeholder { color: var(--st-encre-pale); opacity: 1; }
.st-input:focus {
  outline: none;
  border-color: var(--st-encre);
  box-shadow: 0 0 0 3px rgba(28, 28, 25, 0.10);
}
textarea.st-input { resize: vertical; min-height: 72px; }

/* ------------------------------------------------------------------ *
 *  9. Le feuillet — PANNEAU FRANC : plein écran sur mobile, posé au  *
 *     centre sur grand écran. Bords nets, hairline d'encre, filet    *
 *     3px couleur-du-lieu en haut (var(--st-couleur-lieu), posée par *
 *     lieux.js / constellation.js ; repli : encre).                  *
 *     Structure attendue, posée dans #st-sheets :                    *
 *       <div class="st-sheet-fond"></div>                            *
 *       <div class="st-sheet" role="dialog">…</div>                  *
 * ------------------------------------------------------------------ */
.st-sheet-fond {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(28, 28, 25, 0.40);
  animation: st-fondu 0.18s ease-out;
}
.st-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--st-papier);
  border-top: 3px solid var(--st-couleur-lieu, var(--st-encre));
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  animation: st-montee 0.22s ease-out;
}
.st-sheet__tete {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.st-sheet__titre {
  margin: 2px 0 2px;
  flex: 1;
  min-width: 0;
  font-family: var(--st-font-titres);
  font-size: clamp(1.28rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.st-sheet__fermer {
  flex: none;
  width: 38px;
  height: 38px;
  margin-right: -8px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--st-encre-pale);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.st-sheet__fermer:hover { background: var(--st-surface-2); color: var(--st-encre); }
.st-sheet__soustitre {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--st-encre-douce);
  overflow-wrap: anywhere;
}
.st-sheet__section {
  padding: 12px 0 8px;
  border-top: 1px solid var(--st-bord);
}
.st-sheet__section--discret {
  margin-top: 14px;
}
.st-sheet__section--discret .st-sheet__section-titre {
  color: var(--st-bord-fort);
}
.st-sheet__section-titre {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--st-encre-pale);
}
.st-sheet__ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-radius: var(--st-r-sm);
}
label.st-sheet__ligne { cursor: pointer; }
label.st-sheet__ligne:hover { background: var(--st-surface-2); }
.st-sheet__ligne-nom {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.st-sheet__formulaire {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0 4px;
}
.st-sheet__formulaire .st-input {
  flex: 1 1 130px;
  width: auto;
}
.st-sheet__pied {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid var(--st-bord);
}
.st-case {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  accent-color: var(--st-encre);
}

@media (min-width: 700px) {
  .st-sheet {
    inset: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(540px, calc(100vw - 48px));
    max-height: min(680px, 86vh);
    border: 1px solid var(--st-encre);
    border-top-width: 3px;
    border-top-color: var(--st-couleur-lieu, var(--st-encre));
    border-radius: 0;
    box-shadow: var(--st-ombre-3);
    padding: 18px 22px 20px;
    animation: st-pose 0.18s ease-out;
  }
}

/* ------------------------------------------------------------------ *
 * 10. Petits meubles partagés                                        *
 * ------------------------------------------------------------------ */
.st-liste {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}
.st-ligne + .st-ligne { border-top: 1px solid var(--st-bord-doux); }
.st-barre {
  text-decoration: line-through;
  text-decoration-color: var(--st-encre-pale);
  color: var(--st-encre-pale);
}

.st-code {
  font-family: var(--st-font-titres);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  text-align: center;
  color: var(--st-encre);
}

.st-qr {
  width: 96px;
  height: 96px;
  flex: none;
  margin-inline: auto;
  border: 6px solid var(--st-surface);
  border-radius: var(--st-r-sm);
  box-shadow: 0 0 0 1px var(--st-encre);
  background:
    repeating-linear-gradient(0deg,
      rgba(28, 28, 25, 0.85) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(90deg,
      var(--st-encre) 0 6px, var(--st-papier) 6px 12px);
}

.st-photo-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.st-photo-case {
  aspect-ratio: 1;
  border-radius: var(--st-r-sm);
  border: 1px solid rgba(28, 28, 25, 0.08);
}

.st-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.st-table th, .st-table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 8px;
  border-bottom: 1px solid var(--st-bord-doux);
}
.st-table th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--st-encre-pale);
}

.st-alerte {
  border: 1px solid var(--st-ambre);
  background: var(--st-surface);
  border-radius: var(--st-r-sm);
  padding: 10px 12px;
  color: var(--st-ambre-encre);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------ *
 * 11. Utilitaires                                                    *
 * ------------------------------------------------------------------ */
.st-discret {
  font-size: 0.84rem;
  color: var(--st-encre-douce);
}
.st-erreur {
  margin: 0;
  font-size: 0.86rem;
  color: var(--st-terre);
}
/* L'état vide : une phrase grise, centrée, SANS cadre pointillé
   (directive 50 — les vraies applis ne mettent pas de boîte). */
.st-vide {
  padding: 18px 12px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--st-encre-pale);
}
.st-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * 12. Mouvements                                                     *
 * ------------------------------------------------------------------ */
@keyframes st-fondu {
  from { opacity: 0; }
}
@keyframes st-montee {
  from { transform: translateY(26px); opacity: 0.6; }
}
@keyframes st-pose {
  from { transform: translate(-50%, -50%) scale(0.97); opacity: 0; }
}
@keyframes st-respire {
  50% {
    box-shadow: 0 0 0 clamp(18px, 1vw + 14px, 22px) var(--st-vert-doux),
      0 6px 18px rgba(59, 122, 47, 0.28);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * 13. L'AVANT-PORTE (brief V5 §1, décisions 39/42/51/52) — la nuit.  *
 *     Le compteur GRAND, le planisphère en replay, LE POINT VERT     *
 *     seul bouton, « Entrer » un mot en haut à droite. ZÉRO phrase.  *
 *     Tant qu'elle est devant (body.st-avp-devant), la porte blanche *
 *     attend dessous ; après le point vert, l'escalier se déroule    *
 *     en dessous d'elle (le produit derrière reste blanc).           *
 * ------------------------------------------------------------------ */
body.st-avp-devant #st-porte { display: none !important; }

#st-avantporte {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--st-nuit);
  color: var(--st-nuit-encre);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vh, 30px);
  padding: clamp(48px, 8vh, 72px) clamp(16px, 4vw, 48px)
    calc(clamp(28px, 6vh, 56px) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
.st-avp__entrer {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 2;
  padding: 8px 14px;
  border: 0;
  background: none;
  color: var(--st-nuit-douce);
  font-size: 0.92rem;
  cursor: pointer;
  border-radius: var(--st-r-md);
}
.st-avp__entrer:hover { color: var(--st-nuit-encre); }
.st-avp__entrer:focus-visible { outline-color: var(--st-nuit-encre); }
.st-avp__compteur {
  margin: 0;
  font-family: var(--st-font-titres);
  font-weight: 600;
  font-size: clamp(2.9rem, 1.4rem + 7.5vw, 6.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: transform 0.3s ease;
}
.st-avp__compteur.st-avp--bat { transform: scale(1.015); }
.st-avp__cadre {
  width: min(100%, 1080px);
  flex: none;
}
.st-avp__carte {
  display: block;
  width: 100%;
  aspect-ratio: 2.3 / 1;
  max-height: 48vh;
}
/* LE POINT VERT — le seul bouton (déc. 52) : généreux, halo respirant. */
.st-avp__point {
  width: clamp(92px, 6vw + 70px, 128px);
  height: clamp(92px, 6vw + 70px, 128px);
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
.st-avp__point::before {
  content: "";
  width: clamp(58px, 3.4vw + 46px, 78px);
  height: clamp(58px, 3.4vw + 46px, 78px);
  border-radius: 50%;
  background: var(--st-vert);
  box-shadow: 0 0 0 clamp(14px, 1vw + 10px, 20px) rgba(91, 191, 74, 0.14),
    0 0 44px rgba(91, 191, 74, 0.35);
  transition: transform 0.18s ease;
  animation: st-avp-respire 4.5s ease-in-out infinite;
}
.st-avp__point:hover::before { transform: scale(1.06); }
.st-avp__point:active::before { transform: scale(0.96); }
.st-avp__point:focus-visible { outline-color: var(--st-nuit-encre); }
/* La réservation : le numéro GRAND, le chrono discret (jamais anxiogène). */
.st-avp__resa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.st-avp__numero {
  margin: 0;
  font-family: var(--st-font-titres);
  font-weight: 600;
  font-size: clamp(1.8rem, 0.9rem + 4.4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.st-avp__chrono {
  margin: 0;
  font-size: 0.95rem;
  color: var(--st-nuit-pale);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
@keyframes st-avp-respire {
  50% {
    box-shadow: 0 0 0 clamp(22px, 1.4vw + 16px, 30px) rgba(91, 191, 74, 0.2),
      0 0 60px rgba(91, 191, 74, 0.42);
  }
}

/* ------------------------------------------------------------------ *
 * 14. LE MONDE habité (brief V5 §3, décisions 53-54) — la nuit,      *
 *     par-dessus la constellation : compteur, planisphère avec ta    *
 *     zone, ton point (la bascule retour), certificat, jalons.       *
 * ------------------------------------------------------------------ */
#st-lemonde {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--st-nuit);
  color: var(--st-nuit-encre);
  transition: opacity 0.95s ease;
}
#st-lemonde.st-mnd--loin { opacity: 0; }
#st-lemonde.st-mnd--anime { overflow: hidden; }
/* La plongée retour (déc. 61) : le zoom SANS fondu — le monde reste
   entier pendant que le vert l'avale (le rideau fait la fin). */
.st-mnd--creuse .st-mnd__page { transform: scale(7); }
.st-mnd__page {
  width: min(100%, 1080px);
  margin-inline: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.6vh, 26px);
  padding: clamp(20px, 4vh, 44px) clamp(16px, 4vw, 48px)
    calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px));
  transition: transform 0.95s cubic-bezier(0.5, 0, 0.3, 1);
}
.st-mnd--loin .st-mnd__page { transform: scale(7); }
.st-mnd__compteur {
  margin: 0;
  font-family: var(--st-font-titres);
  font-weight: 600;
  font-size: clamp(2.1rem, 1.2rem + 4.4vw, 4.2rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.st-mnd__cadre {
  position: relative;
  width: 100%;
}
.st-mnd__carte {
  display: block;
  width: 100%;
  aspect-ratio: 2.3 / 1;
  max-height: 44vh;
}
/* Ton point — présent dans le monde (déc. 53) : re-tap = plongée retour. */
.st-mnd__moi {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
.st-mnd__moi::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--st-vert);
  box-shadow: 0 0 0 6px rgba(91, 191, 74, 0.18),
    0 0 22px rgba(91, 191, 74, 0.5);
  transition: transform 0.15s ease;
  animation: st-mnd-respire 3.6s ease-in-out infinite;
}
.st-mnd__moi:hover::before { transform: scale(1.15); }
.st-mnd__moi:focus-visible { outline-color: var(--st-nuit-encre); }
.st-mnd__moi--zone {
  position: absolute;
  transform: translate(-50%, -50%);
}
@keyframes st-mnd-respire {
  50% {
    box-shadow: 0 0 0 10px rgba(91, 191, 74, 0.24),
      0 0 30px rgba(91, 191, 74, 0.6);
  }
}
/* Le certificat — une carte sobre sur la nuit (déc. 42). */
.st-mnd__certif {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(16px, 2.6vh, 26px) clamp(20px, 4vw, 40px);
  border: 1px solid var(--st-nuit-trait);
  border-radius: var(--st-r-md);
  background: var(--st-nuit-2);
}
.st-mnd__certif-num {
  margin: 0;
  font-family: var(--st-font-titres);
  font-weight: 600;
  font-size: clamp(1.15rem, 0.8rem + 1.8vw, 1.9rem);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.st-mnd__certif-date {
  margin: 0;
  font-size: 0.95rem;
  color: var(--st-nuit-douce);
  text-align: center;
}
.st-mnd__garder {
  margin-top: 8px;
  padding: 8px 18px;
  border: 1px solid var(--st-nuit-douce);
  border-radius: var(--st-r-md);
  background: none;
  color: var(--st-nuit-encre);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.st-mnd__garder:hover { border-color: var(--st-nuit-encre); }
.st-mnd__garder:focus-visible { outline-color: var(--st-nuit-encre); }
/* Les jalons calmes (déc. 42/53). */
.st-mnd__jalons {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-mnd__jalon {
  margin: 0;
  font-size: 0.92rem;
  color: var(--st-nuit-douce);
  text-align: center;
}
/* La constellation recule (déc. 54 : un mouvement, jamais un switch). */
.st-ciel--anime {
  transition: transform 0.95s cubic-bezier(0.5, 0, 0.3, 1),
    opacity 0.95s ease;
}
.st-ciel--recul {
  transform: scale(0.07);
  opacity: 0;
}

/* ------------------------------------------------------------------ *
 * 15. LA NAISSANCE-ZOOM (brief V5 §2, décisions 54/61) — la          *
 *     cérémonie sans un mot : ton point s'allume, la caméra plonge,  *
 *     le point couvre l'écran (plein vert, rideau §16), puis la      *
 *     constellation se révèle depuis l'intérieur. Un tap la saute.   *
 * ------------------------------------------------------------------ */
.st-nz {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--st-nuit);
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.9s ease;
}
.st-nz--fin { opacity: 0; }
.st-nz__scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  transition: transform 5.4s cubic-bezier(0.6, 0, 0.2, 1);
}
.st-nz--plonge .st-nz__scene { transform: scale(30); }
.st-nz__cadre {
  position: relative;
  width: min(100%, 1080px);
}
.st-nz__carte {
  display: block;
  width: 100%;
  aspect-ratio: 2.3 / 1;
  max-height: 62vh;
}
.st-nz__point {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: var(--st-vert);
  box-shadow: 0 0 18px rgba(91, 191, 74, 0.8);
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.st-nz--allume .st-nz__point { transform: translate(-50%, -50%) scale(1); }
.st-nz__onde {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--st-vert);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.st-nz--allume .st-nz__onde {
  animation: st-nz-onde 2s ease-out infinite;
}
.st-nz--allume .st-nz__onde:nth-child(2) { animation-delay: 0.65s; }
.st-nz--allume .st-nz__onde:nth-child(3) { animation-delay: 1.3s; }
@keyframes st-nz-onde {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(9); opacity: 0; }
}

/* ------------------------------------------------------------------ *
 * 16. LE RIDEAU (déc. 61) — la fin de toute plongée : le point       *
 *     grossit jusqu'à couvrir TOUT l'écran (plein vert), puis LE      *
 *     CERCLE BLANC GRANDIT DANS LE VERT (la constellation se révèle   *
 *     depuis l'intérieur — on SORT du point). Les cercles sont des    *
 *     clip-path posés et animés par js/avantporte.js (creerRideau),   *
 *     rayon calculé depuis la diagonale réelle du viewport.           *
 *     Partagé : naissance-zoom (dans .st-nz) et plongée retour du     *
 *     monde (sur body, au-dessus de tout). Jamais de clic mangé :     *
 *     pointer-events none (le skip de la naissance passe au travers). *
 * ------------------------------------------------------------------ */
.st-rideau {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.st-rideau__couche {
  position: absolute;
  inset: 0;
}
.st-rideau__vert { background: var(--st-vert); }
.st-rideau__blanc { background: var(--st-fond); }

/* ------------------------------------------------------------------ *
 * 17. LES PAGES (brief V6 §1, décision 66) — les lieux en pages       *
 *     PLEINES : blanches, aérées, filet 3px couleur du lieu en haut   *
 *     (var(--st-couleur-lieu), posée par js/pages.js ; repli encre).  *
 *     La page couvre l'écran AU-DESSUS de la constellation (z 40) et  *
 *     SOUS les feuillets-gestes (z 55/60, déc. 58). Elle naît de sa   *
 *     tuile : js/pages.js pose transform/opacity de départ puis les   *
 *     relâche — la transition ci-dessous fait le zoom (~250ms) ;      *
 *     reduced-motion : la règle globale du §12 la coupe.              *
 * ------------------------------------------------------------------ */
.st-page {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--st-papier);
  border-top: 3px solid var(--st-couleur-lieu, var(--st-encre));
  padding: 0 clamp(16px, 4vw, 44px)
    calc(96px + env(safe-area-inset-bottom, 0px));
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.st-page:focus { outline: none; }

/* Le corps : le contenu RESPIRE — ~720px centré, fluide. */
.st-page__corps {
  max-width: 720px;
  margin: 0 auto;
  padding-top: clamp(14px, 3.5vh, 34px);
}
.st-page__titre {
  margin: 0 0 clamp(14px, 3vh, 26px);
  font-family: var(--st-font-titres);
  font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.st-page__contenu { min-width: 0; }

/* ------------------------------------------------------------------ *
 * 18. LE MÉDAILLON — ton point vert, persistant en haut à gauche de   *
 *     CHAQUE page, à côté d'un « idbeen » discret (le même lockup     *
 *     que partout, déc. 46) : un tap = retour à la constellation.     *
 *     C'est la boussole — et l'un des rares verts (vert sacré).       *
 * ------------------------------------------------------------------ */
.st-page__tete {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0 0;
}
.st-page__medaillon {
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: -12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.st-page__medaillon-point {
  width: clamp(11px, 9px + 0.35vw, 14px);
  height: clamp(11px, 9px + 0.35vw, 14px);
  border-radius: 50%;
  background: var(--st-vert);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.st-page__medaillon:hover .st-page__medaillon-point {
  box-shadow: 0 0 0 6px var(--st-vert-doux);
}
.st-page__medaillon:active .st-page__medaillon-point {
  transform: scale(0.9);
}
.st-page__marque {
  font-family: var(--st-font-titres);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--st-encre);
  user-select: none;
}

/* ------------------------------------------------------------------ *
 * 19. LE RAIL (brief V6 §1, décision 66) — discret, bas-droite de     *
 *     chaque page : « Du nouveau » + le badge BLEU du non-vu (jamais  *
 *     vert). Socle extensible : chaque entrée est un __item, le chat  *
 *     s'y logera. Posé par js/pages.js dans #st-pages, au-dessus de   *
 *     la page (z 45), sous les feuillets-gestes.                      *
 * ------------------------------------------------------------------ */
.st-rail {
  position: fixed;
  right: clamp(12px, 2.5vw, 28px);
  bottom: calc(clamp(12px, 2.5vh, 24px) + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.st-rail__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--st-bord-fort);
  border-radius: var(--st-r-pilule);
  background: var(--st-papier);
  color: var(--st-encre);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--st-ombre-2);
}
.st-rail__item:hover { border-color: var(--st-encre); }
.st-rail__badge {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--st-bleu-nonvu);
}