/* ==========================================================================
   Le Silicone Valley · Design system 1.0 (figé le 2 octobre 2026)
   Feuille unique de tous les supports : posts, carrousels, stories, couvertures, écrans du lieu, bannières,
   imprimé, et le site plus tard. Source : mix M1 « Nuit lumineuse » (tokens.css du 1er octobre), changements
   de la version 1.0 marqués « 1.0 ». Spécification : ../DESIGN-SYSTEM.md (A et B). Jetons résolus : tokens.json.

   Deux thèmes d'une même DA, choisis par une classe sur la scène : .nuit (les rendez-vous, la communauté,
   la marque ; tous les écrans du lieu) et .jour (les offres et le pratique). L'imprimé : .papier.
   La règle de rôle (C1) : « Ce visuel annonce-t-il un moment où l'on se retrouve, ou parle-t-il des gens
   ou de la marque ? Oui : la nuit. Il parle de ce qu'on réserve, de ce qu'on paie ou de comment venir et
   travailler : le jour. » Le fil se lit en trois colonnes : nuit, photo seule, jour (C2).

   Échelles par support (classe sur la scène) : .sv-reseaux (post et carrousel 1080 x 1350, couverture),
   .sv-story (1080 x 1920), .sv-ecran (télé 1920 x 1080), .sv-totem (1080 x 1920 lu à 3 m),
   .sv-banniere (1600 x 900 et 1200 x 627), .sv-a6, .sv-a3, .sv-site.

   Sommaire
     0. Polices
     1. Couleurs de la charte (fixes)
     2. Les deux thèmes : jetons sémantiques
     3. Lumières (une couleur par série), le lever, le faisceau, le bokeh, le grain
     4. Typographie : une échelle par support
     5. Unités, rayons, ombres
     6. Matières : le verre liquide (nuit, clair, opalin, navy)
     7. Composants : billet Wallet, bouton (site seulement), prix, curseur, jauge, trajet, pastille, mot-logo,
        anneaux, fenêtre photo, QR, avatar
     8. Gabarits et calques
     9. Replis (imprimé, transparence réduite, contraste renforcé)
    10. 1.0 : la goutte et ses états, le repère or, la flèche de suite, la carte de prix, les formules,
        les objets de saison, les portraits, l'en-tête de story, la couverture, les interrupteurs de contrôle
   ========================================================================== */

/* -------------------------------------------------------------------------- 0. Polices
   Fichiers web officiels Fontshare, non modifiés (licences FFL 2.0 dans fonts/). */
@font-face { font-family: "Clash Grotesk"; src: url("fonts/ClashGrotesk-Variable.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: block; }
@font-face { font-family: "Switzer"; src: url("fonts/Switzer-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }

@property --verre-angle { syntax: "<angle>"; inherits: true; initial-value: 135deg; }
@property --lentille-bord   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --lentille-force  { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --lentille-profil { syntax: "<number>"; inherits: false; initial-value: 0; }

/* -------------------------------------------------------------------------- 1. Couleurs (fixes) */
:root {
  --sv-jaune: #F2A81D;
  --sv-navy: #2C3587;
  --sv-encre: #1F1B16;
  --sv-casse: #F5F2EA;
  --sv-nuit: #171A3F;                 /* bleu nuit de la charte */
  /* Les nuits du navy : même teinte, de plus en plus profondes (jamais de noir) */
  --sv-navy-700: #252C78;
  --sv-navy-800: #1E2360;
  --sv-abysse: #10122E;
  /* L'or : le jaune joué en lumière, doré vers orangé. Jamais écrit sur du clair. */
  --or-1: #F8C552; --or-2: #F2A81D; --or-3: #EC8620;
  --or: linear-gradient(var(--verre-angle, 135deg), #F8C552 0%, #F2A81D 48%, #EC8620 100%);
  --or-texte: linear-gradient(172deg, #FFDC8E 0%, #F9C04A 30%, #F2A81D 58%, #EC8620 100%);
  --goutte-nacre: linear-gradient(180deg, #FFFFFF, #F1EEE6);   /* 1.0 : la goutte au repos (reprise de M2) */
  /* Couleurs du logo, en canaux R G B : le logo et la lumière douce, rien d'autre */
  --l-ambre: 241 173 83; --l-ciel: 84 175 230; --l-acier: 40 98 145; --l-violet: 84 79 159;
  --l-vermillon: 240 64 30; --l-or: 242 168 29; --l-orange: 236 134 32;

  /* Fonds de nuit : le navy en haut (la marque se lit), la nuit en bas */
  --fond-nuit:
    radial-gradient(ellipse 85% 55% at 14% 0%, rgb(70 82 176 / .55) 0%, rgb(70 82 176 / 0) 70%),
    linear-gradient(174deg, #2C3587 0%, #262D79 30%, #1D2259 62%, #151839 100%);
  /* Nuit profonde : soirées (Halloween, Silicone Awards) */
  --fond-nuit-profonde:
    radial-gradient(ellipse 80% 48% at 50% 0%, rgb(56 66 150 / .42) 0%, rgb(56 66 150 / 0) 70%),
    linear-gradient(180deg, #20276A 0%, #181C4C 38%, #121535 72%, #0D0F28 100%);
  /* Nuit de gala : Silicone Awards. Le bleu nuit de la charte domine (#171A3F), le navy ne reste qu'en haut. */
  --fond-nuit-gala:
    radial-gradient(ellipse 78% 42% at 50% 0%, rgb(44 53 135 / .46) 0%, rgb(44 53 135 / 0) 72%),
    linear-gradient(180deg, #1B1F4B 0%, #171A3F 34%, #131535 70%, #0E1029 100%);
  --fond-jour: #F5F2EA;
  /* Le doré franc des Silicone Awards (titre seulement) : plus saturé que --or-texte, sans jamais virer au brun. */
  --or-gala: linear-gradient(176deg, #FFE9A8 0%, #FFD266 22%, #FBB833 48%, #F29E22 74%, #EC861E 100%);
  /* Le verre allégé sous la lumière (jeton unique) : opacité TOTALE du verre de nuit dans la bande où la lumière
     passe derrière lui (le haut du billet, l'horizon). Partout ailleurs le cœur reste dense (lecture). */
  --verre-allege: .34;
  /* La souche or : son numéro est une date utile, jamais une signature. Taille maximale du corps (hauteur du
     chiffre environ 0,72 x le corps) : 180 px sur les écrans (chiffre de 130 px), 64 px sur le site. */
  --souche-num-max: 180px;

  --grain-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 1'/><feComponentTransfer><feFuncR type='linear' slope='2.6' intercept='-.8'/><feFuncG type='linear' slope='2.6' intercept='-.8'/><feFuncB type='linear' slope='2.6' intercept='-.8'/></feComponentTransfer></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------------------------- 2. Les deux thèmes
   Mêmes noms de jetons, deux valeurs. Les composants n'utilisent que ces jetons. */
.nuit {
  --c-titre: #F5F2EA;
  --c-texte: #F5F2EA;
  --c-texte-2: rgb(245 242 234 / .80);
  --c-texte-3: rgb(245 242 234 / .68);
  --c-filet: rgb(245 242 234 / .16);
  --c-rail: rgb(245 242 234 / .18);
  --c-cran: rgb(245 242 234 / .50);
  --c-accent: #F5F2EA;               /* prix et chiffres clés sur la nuit (le jaune ne s'écrit pas sur le navy) */
  --c-mot-logo: #F5F2EA;
  --anneaux-c: #F5F2EA;
  --anneaux-o: .15;
  --ombre-rgb: 6 8 28;
  --g-clash: 540;                    /* compensation optique : le clair sur sombre paraît plus gras */
  color: var(--c-texte);
  background: var(--fond-nuit);
}
.nuit.profonde { background: var(--fond-nuit-profonde); --anneaux-o: .10; }
.nuit.gala { background: var(--fond-nuit-gala); --anneaux-o: .09; --ombre-rgb: 4 5 20; }
.jour {
  --c-titre: #2C3587;
  --c-texte: #1F1B16;
  --c-texte-2: rgb(31 27 22 / .74);
  --c-texte-3: rgb(31 27 22 / .64);
  --c-filet: rgb(31 27 22 / .10);
  --c-rail: rgb(44 53 135 / .14);
  --c-cran: rgb(44 53 135 / .34);
  --c-accent: #2C3587;
  --c-mot-logo: #2C3587;
  --anneaux-c: #FFFFFF;
  --anneaux-o: .55;
  --ombre-rgb: 44 40 60;
  --g-clash: 560;
  color: var(--c-texte);
  background: var(--fond-jour);
}

/* -------------------------------------------------------------------------- 3. Lumières
   Une lumière = un calque .lumiere posé DERRIÈRE le verre (jamais devant un texte hors du verre).
   Large (au moins 40 % de la largeur de l'image), une seule source par visuel.
   Recette anti-brun (le défaut relevé sur Verre de nuit) : l'orangé posé en transparence sur le navy
   donne du taupe (rouge et vert au-dessus du bleu). On l'ADDITIONNE au lieu de le poser :
     ::before  le halo, en mode « écran » (la lumière s'ajoute, ne salit jamais), rampe en sept paliers :
               crème dorée, or, orangé, pêche, lavande, ciel du logo, zéro ;
     ::after   le cœur, en mode normal, petit, posé là où le halo a déjà éclairé le fond.
   Position et taille : --lx, --ly (centre), --lt (diamètre) ; force : --lf ; échelle : --ls (animables). */
.lumiere {
  --lx: 50%; --ly: 50%; --lt: 1100px; --lf: 1; --ls: 1;
  /* aube (défaut) : Café, offres, communauté, accueil */
  --l1: 255 238 196; --l2: 253 204 112; --l3: 247 156 64; --l4: 250 186 140; --l5: 146 156 236; --l6: 92 160 236;
  --c1: 255 224 146; --c2: 247 168 46;
  /* Pas de transform ni d'opacité sur le conteneur : il créerait un contexte d'empilement isolé
     et le mode « écran » du halo ne verrait plus le fond. Taille, force et échelle vont sur les calques.
     CONTRÔLE BLOQUANT (v2) : SVDS.controleLumiere() relève tout transform, opacité, filtre, isolation ou
     mélange posé sur .lumiere ou sur un de ses parents jusqu'à la scène ; outils/capture.mjs et les vidéos
     (motion/*) refusent alors de rendre (code de sortie 3). */
  position: absolute; left: var(--lx); top: var(--ly); width: 0; height: 0; pointer-events: none;
}
.lumiere::before, .lumiere::after { content: ""; position: absolute; border-radius: 50%; opacity: var(--lf); transform: scale(var(--ls)); }
.lumiere::before {
  left: calc(var(--lt) / -2); top: calc(var(--lt) / -2); width: var(--lt); height: var(--lt);
  mix-blend-mode: screen;
  background: radial-gradient(closest-side,
    rgb(var(--l1) / .97) 0%, rgb(var(--l2) / .90) 15%, rgb(var(--l3) / .74) 31%,
    rgb(var(--l4) / .46) 45%, rgb(var(--l5) / .24) 61%, rgb(var(--l6) / .10) 79%, rgb(var(--l6) / 0) 100%);
}
/* Le cœur reste dans la zone que le halo a déjà éclaircie : son fondu passe par la crème, jamais par le taupe. */
.lumiere::after {
  left: calc(var(--lt) * -.23); top: calc(var(--lt) * -.23); width: calc(var(--lt) * .46); height: calc(var(--lt) * .46);
  background: radial-gradient(closest-side, rgb(var(--c1) / .94) 0%, rgb(var(--c2) / .74) 38%, rgb(var(--c2) / .34) 68%, rgb(var(--c2) / .08) 88%, rgb(var(--c2) / 0) 100%);
}
/* Le jour : la même lumière, posée en mode normal (un orangé sur le blanc cassé ne salit pas, il réchauffe).
   On la place derrière un verre clair : elle le réchauffe par en dessous. */
.jour .lumiere::before {
  mix-blend-mode: normal;
  background: radial-gradient(closest-side, rgb(250 196 80 / .85) 0%, rgb(245 165 45 / .62) 24%, rgb(236 130 35 / .30) 52%, rgb(236 130 35 / .09) 78%, rgb(236 130 35 / 0) 100%);
}
.jour .lumiere::after { display: none; }
/* braise : Halloween (orangé vers le vermillon du logo, fin vers le violet du logo) */
.lumiere--braise { --l1: 255 222 168; --l2: 252 166 76; --l3: 244 116 56; --l4: 188 100 196; --l5: 112 92 214; --l6: 88 104 220;
  --c1: 255 206 120; --c2: 240 112 40; }
/* gala (ancien nom : champagne) : Silicone Awards (or pâle, fin vers le ciel du logo) */
.lumiere--gala, .lumiere--champagne { --l1: 255 250 232; --l2: 255 230 168; --l3: 244 202 126; --l4: 196 176 226; --l5: 136 156 232; --l6: 98 140 224;
  --c1: 255 244 214; --c2: 246 212 140; }
/* diffuse : le halo seul, sans cœur (quand la lumière reste discrète, le cœur fondu sur la nuit virerait au taupe) */
.lumiere--diffuse::after { display: none; }
/* douce : l'aube retenue, derrière une carte de prix chargée en chiffres */
.lumiere--douce { --lf: .78; }
/* ciel : la communauté (le cercle). Le ciel et le violet du logo, cœur blanc bleuté : la seule lumière froide,
   pour qu'en vignette les nuits ne se ressemblent pas (une lumière de série visiblement différente). */
.lumiere--ciel { --l1: 240 247 255; --l2: 190 224 252; --l3: 120 192 240; --l4: 150 160 238; --l5: 108 112 222; --l6: 84 118 222;
  --c1: 236 246 255; --c2: 150 206 246; }
/* opale : derrière un objet opalin rond ou une plaque (couvertures, domiciliation). La rampe passe directement
   de la pêche au lavande, sans palier orangé : au ras du disque, l'orangé à mi-force virait au rose-brun (189,139,118). */
.lumiere--opale { --l1: 255 240 204; --l2: 254 214 138; --l3: 251 196 150; --l4: 186 172 236; --l5: 136 150 236; --l6: 96 146 230;
  --c1: 255 228 160; --c2: 249 184 80; }
/* Le bokeh de gala (Awards) : des lumières de scène floues, champagne et pervenche, additionnées (mode écran).
   Dégradés précalculés (aucun filtre de flou), jamais près d'un texte, jamais un point net. Posées par sv.js
   ([data-bokeh] : liste "x,y,taille,force,teinte" séparée par des points-virgules ; teinte c = champagne, f = froide). */
.bokeh { position: absolute; inset: 0; pointer-events: none; }
.bokeh i { position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: var(--a, .5);
  background: radial-gradient(closest-side, rgb(255 246 224 / .95) 0%, rgb(255 228 168 / .80) 30%, rgb(250 206 150 / .42) 58%, rgb(196 186 246 / .14) 82%, rgb(196 186 246 / 0) 100%); }
.bokeh i.f { background: radial-gradient(closest-side, rgb(232 236 255 / .85) 0%, rgb(200 208 252 / .55) 46%, rgb(170 186 250 / .16) 80%, rgb(170 186 250 / 0) 100%); }
/* Le faisceau (Awards) : une lumière qui tombe d'en haut, cœur crème, fin en ciel (jamais de kaki). */
.faisceau {
  position: absolute; pointer-events: none; left: var(--fx, 50%); top: 0; width: var(--fw, 1300px); height: var(--fh, 1200px);
  transform: translateX(-50%); mix-blend-mode: screen; opacity: var(--lf, 1);
  background: radial-gradient(ellipse 34% 60% at 50% -4%,
    rgb(255 246 222 / .70) 0%, rgb(252 226 168 / .46) 18%, rgb(214 186 214 / .24) 40%, rgb(136 156 232 / .12) 64%, rgb(98 140 224 / 0) 100%);
}
/* Le jour : taches de lumière très larges posées par sv.js ([data-fond-jour="aube" | "ciel"]) */
.fond-jour { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fond-jour__tache { position: absolute; border-radius: 50%; pointer-events: none; }

/* Le texte rempli de lumière : seulement le titre des Silicone Awards et un signe discret (le « ? » du Café). */
.scene .en-lumiere { background: var(--or-texte); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.scene .en-lumiere--gala { background-image: var(--or-gala); }

/* Grain fixe, sur un calque à part (jamais animé) */
.grain { position: absolute; inset: 0; pointer-events: none; z-index: 60; opacity: .05; mix-blend-mode: soft-light; background-image: var(--grain-img); }
.jour > .grain { opacity: .04; }

/* -------------------------------------------------------------------------- 4. Typographie
   Clash Grotesk : titres, dates, prix TTC, grands chiffres. Casse phrase. Switzer : tout le reste.
   Une échelle par support (pas par thème) : le jour et la nuit ont exactement les mêmes tailles.
   Approche : -0,03 em pour les grands titres (le semi-gras serré, sans aller au-delà), puis on desserre. */
:root, .sv-site {
  --fs-display: 84px; --fs-titre: 56px; --fs-sous: 34px; --fs-carte: 26px;
  --fs-chapo: 21px; --fs-texte: 17px; --fs-etiquette: 14px; --fs-mention: 13px;
  --fs-prix-xl: 72px; --fs-prix-l: 48px; --fs-prix-m: 32px; --fs-valeur: 18px;
}
.sv-reseaux {
  --fs-display: 132px; --fs-titre: 104px; --fs-sous: 64px; --fs-carte: 54px;
  --fs-chapo: 38px; --fs-texte: 32px; --fs-etiquette: 28px; --fs-mention: 26px;
  --fs-prix-xl: 200px; --fs-prix-l: 108px; --fs-prix-m: 64px; --fs-valeur: 40px;
}
/* 1.0 : la story a son échelle (A5). */
.sv-story {
  --fs-display: 128px; --fs-titre: 112px; --fs-sous: 64px; --fs-carte: 54px;
  --fs-chapo: 38px; --fs-texte: 34px; --fs-etiquette: 30px; --fs-mention: 28px;
  --fs-prix-xl: 220px; --fs-prix-l: 120px; --fs-prix-m: 72px; --fs-valeur: 40px; --fs-repere: 34px;
}
/* Écrans (lus à 3 m), 1.0 : plancher de 44 px (mentions et étiquettes), chapô de 56 px ; aucun texte plus petit,
   adresse sous un QR comprise. Titre d'événement : 28 signes conseillés ; au-delà, sv.js l'ajuste
   sur deux lignes au plus ([data-ajuste]) et le billet garde sa place. */
.sv-ecran, .sv-totem {
  --fs-display: 150px; --fs-titre: 120px; --fs-sous: 80px; --fs-carte: 64px;
  --fs-chapo: 56px; --fs-texte: 48px; --fs-etiquette: 44px; --fs-mention: 44px;
  --fs-prix-xl: 220px; --fs-prix-l: 120px; --fs-prix-m: 72px; --fs-valeur: 56px;
}
.clash { font-family: "Clash Grotesk", "Switzer", sans-serif; font-weight: var(--g-clash, 560); font-feature-settings: "kern" 1; }
.t-display { font: var(--g-clash, 560) var(--fs-display)/.95 "Clash Grotesk", "Switzer", sans-serif; letter-spacing: -0.03em; text-wrap: balance; color: var(--c-titre); margin: 0; }
.t-titre   { font: var(--g-clash, 560) var(--fs-titre)/.97 "Clash Grotesk", "Switzer", sans-serif; letter-spacing: -0.028em; text-wrap: balance; color: var(--c-titre); margin: 0; }
.t-sous    { font: var(--g-clash, 560) var(--fs-sous)/1.02 "Clash Grotesk", "Switzer", sans-serif; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.t-carte   { font: var(--g-clash, 560) var(--fs-carte)/1.04 "Clash Grotesk", "Switzer", sans-serif; letter-spacing: -0.014em; margin: 0; }
.t-chapo   { font: 470 var(--fs-chapo)/1.28 "Switzer", sans-serif; letter-spacing: -0.012em; text-wrap: pretty; margin: 0; }
.t-texte   { font: 440 var(--fs-texte)/1.36 "Switzer", sans-serif; letter-spacing: -0.006em; text-wrap: pretty; margin: 0; }
.t-etiquette { font: 520 var(--fs-etiquette)/1.2 "Switzer", sans-serif; letter-spacing: 0; margin: 0; }
.t-mention { font: 520 var(--fs-mention)/1.25 "Switzer", sans-serif; letter-spacing: .004em; margin: 0; }
.t-valeur  { font: 620 var(--fs-valeur)/1.1 "Switzer", sans-serif; letter-spacing: -0.012em; margin: 0; white-space: nowrap; }
.doux { color: var(--c-texte-2); }
.chiffres { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------- 5. Unités, rayons, ombres
   --u : 1 px sur le site, 2,35 px sur un visuel Instagram 1080, 3 px sur les écrans du lieu.
   Rayons concentriques : rayon intérieur = rayon extérieur moins la marge. */
:root, .sv-site { --u: 1px; }
.sv-reseaux, .sv-story { --u: 2.35px; }
.sv-ecran, .sv-totem   { --u: 3px; }
.sv-banniere { --u: 2.2px; }
.sv-a6 { --u: .8px; }
.sv-a3 { --u: 2.2px; }
:root, .sv-site, .sv-reseaux, .sv-story, .sv-ecran, .sv-totem, .sv-banniere, .sv-a6, .sv-a3 {
  --r-xs: calc(var(--u) * 6);     /* étiquette */
  --r-s: calc(var(--u) * 10);     /* tuile QR, vignette */
  --r-m: calc(var(--u) * 16);     /* photo dans une carte */
  --r-l: calc(var(--u) * 24);     /* carte, billet */
  --r-xl: calc(var(--u) * 32);    /* grande carte, fenêtre photo */
  --r-2xl: calc(var(--u) * 44);   /* panneau plein cadre */
  --marge: calc(var(--u) * 30.6); /* 72 px sur Instagram */
}

/* -------------------------------------------------------------------------- 6. Matières : le verre
   Recette de research/08 (dosage B « liquide »). Cinq couches : teinte (cœur dense derrière le texte,
   bande des bords légère), fond vu à travers (flou, saturation), lentille (bords nets qui courbent le
   fond : lib/verre-liquide.js, Chromium), lumière (liseré spéculaire côté lumière, rebond, nappe,
   lueur interne), poids (ombre teintée en trois couches, grain).
   Le thème choisit la teinte par défaut : verre de nuit sur la nuit, verre clair sur le jour.
   Règles : jamais de verre sur du verre ; aucun texte dans la bande des bords (marge >= 1,4 x bande) ;
   une seule direction de lumière par visuel (--verre-angle, posé sur la scène). */
.verre {
  --verre-teinte: 24 28 72;          /* verre de nuit : bleu nuit un peu plus bleu que #171A3F (évite le gris mauve sous la lumière) */
  --verre-opacite: .60;
  --verre-opacite-bord: .24;
  --verre-coeur: 10;
  --verre-flou: 16;
  --verre-flou-bord: 1.1;
  --verre-sat: 1.45;
  --verre-lum: 1.06;
  --verre-rayon: 24;
  --verre-bord: 1.3;
  --verre-reflet: .78;
  --verre-rebond: .36;
  --verre-nappe: .08;
  --verre-lueur: .10;
  --verre-voile: 0;
  --verre-ombre-rgb: 6 8 28;
  --verre-ombre-a: .34;
  --verre-texte: #F5F2EA;
  --verre-texte-2: rgb(245 242 234 / .82);
  --verre-filet: rgb(245 242 234 / .18);
  --verre-accent: #F5F2EA;
  --lentille-bord: calc(var(--verre-coeur) * var(--u));
  --lentille-force: calc(var(--verre-coeur) * var(--u) * .40);   /* 0,40 x la bande (research/08 : 0,32) : la lentille se voit, sans repli (0,40 x 2,2 < 0,9) */
  --lentille-profil: 2.2;
  --verre-k: calc(1 - (1 - var(--verre-opacite)) / (1 - min(var(--verre-opacite-bord), .99)));
  --verre-grain-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 1'/><feComponentTransfer><feFuncR type='linear' slope='2.4' intercept='-.7'/><feFuncG type='linear' slope='2.4' intercept='-.7'/><feFuncB type='linear' slope='2.4' intercept='-.7'/><feFuncA type='linear' slope='0' intercept='.045'/></feComponentTransfer></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");

  position: relative; isolation: isolate; box-sizing: border-box;
  color: var(--verre-texte);
  --c-texte: var(--verre-texte); --c-texte-2: var(--verre-texte-2); --c-filet: var(--verre-filet); --c-accent: var(--verre-accent); --c-titre: var(--verre-accent);
  border-radius: calc(var(--verre-rayon) * var(--u));
  background:
    var(--verre-grain-img) 0 0 / calc(var(--u) * 100) calc(var(--u) * 100),
    linear-gradient(var(--verre-angle), rgb(255 255 255 / var(--verre-nappe)) 0%, rgb(255 255 255 / 0) 52%),
    linear-gradient(rgb(0 0 0 / var(--verre-voile)), rgb(0 0 0 / var(--verre-voile))),
    var(--verre-teinte-bord, linear-gradient(rgb(var(--verre-teinte) / var(--verre-opacite-bord)), rgb(var(--verre-teinte) / var(--verre-opacite-bord))));
  -webkit-backdrop-filter: blur(calc(var(--verre-flou) * var(--u))) saturate(var(--verre-sat)) brightness(var(--verre-lum));
          backdrop-filter: var(--verre-lentille, blur(calc(var(--verre-flou) * var(--u)))) saturate(var(--verre-sat)) brightness(var(--verre-lum));
  box-shadow:
    inset 0 0 calc(var(--u) * 14) rgb(255 255 255 / var(--verre-lueur)),
    0 calc(var(--u) * 1) calc(var(--u) * 2) rgb(var(--verre-ombre-rgb) / calc(var(--verre-ombre-a) * .35)),
    0 calc(var(--u) * 8) calc(var(--u) * 20) rgb(var(--verre-ombre-rgb) / calc(var(--verre-ombre-a) * .55)),
    0 calc(var(--u) * 22) calc(var(--u) * 56) rgb(var(--verre-ombre-rgb) / calc(var(--verre-ombre-a) * .55));
}
/* Liseré spéculaire : net et clair côté lumière, quasi absent sur les côtés, rebond discret en face. */
.verre::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  padding: calc(var(--verre-bord) * var(--u));
  background: linear-gradient(var(--verre-angle),
    rgb(255 255 255 / var(--verre-reflet)) 0%,
    rgb(255 255 255 / calc(var(--verre-reflet) * .40)) 15%,
    rgb(255 255 255 / calc(var(--verre-reflet) * .10)) 36%,
    rgb(255 255 255 / calc(var(--verre-reflet) * .06)) 62%,
    rgb(255 255 255 / calc(var(--verre-reflet) * var(--verre-rebond) * .5)) 84%,
    rgb(255 255 255 / calc(var(--verre-reflet) * var(--verre-rebond))) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* Cœur : la teinte dense derrière le texte, fondue vers la bande des bords. */
.verre::after {
  content: ""; position: absolute; z-index: -1;
  inset: calc(var(--verre-coeur) * var(--u));
  border-radius: max(0px, calc((var(--verre-rayon) - var(--verre-coeur)) * var(--u)));
  background: var(--verre-coeur-fond, rgb(var(--verre-teinte) / var(--verre-k)));
  filter: blur(calc(var(--verre-coeur) * var(--u) * .4));
  pointer-events: none;
}
/* Verre clair : la teinte par défaut du jour (fonds aube et ciel, photos claires) */
.jour .verre:not(.verre--nuit):not(.verre--or):not(.verre--navy), .verre--clair {
  --verre-teinte: 248 246 240;
  --verre-opacite: .66;
  --verre-opacite-bord: .30;
  --verre-flou: 18;
  --verre-sat: 1.7;
  --verre-lum: 1.05;
  --verre-reflet: .98;
  --verre-rebond: .5;
  --verre-nappe: .22;
  --verre-lueur: .40;                /* .40 au plus : au-delà, l'effet coussin */
  --verre-ombre-rgb: 44 40 60;
  --verre-ombre-a: .20;
  --verre-texte: #1F1B16;
  --verre-texte-2: rgb(31 27 22 / .76);
  --verre-filet: rgb(31 27 22 / .10);
  --verre-accent: #2C3587;
}
/* Verre opalin : le clair posé sur la nuit, pour l'information dense (cartes de prix).
   v2 : lueur interne ramenée à .16 (au-delà de .20, la brume lavande du bas faisait coussin), liseré net de
   1,25 u, cœur à .86 et bande à .44 : les anneaux du logo se devinent au travers. */
.verre--opalin {
  --verre-teinte: 245 242 234;
  --verre-opacite: .86;
  --verre-opacite-bord: .44;
  --verre-flou: 20;
  --verre-sat: 1.4;
  --verre-lum: 1.08;
  --verre-reflet: 1;
  --verre-rebond: .55;
  --verre-bord: 1.25;
  --verre-nappe: .16;
  --verre-lueur: .16;
  --verre-ombre-a: .06;              /* posé devant la lumière : presque pas d'ombre (une ombre sombre sur la lumière vire au brun) */
  --verre-texte: #1F1B16;
  --verre-texte-2: rgb(31 27 22 / .74);
  --verre-filet: rgb(31 27 22 / .10);
  --verre-accent: #2C3587;
}
/* Verre navy : la teinte de marque, petite pastille posée sur une photo claire */
.verre--navy {
  --verre-teinte: 44 53 135; --verre-opacite: .86; --verre-opacite-bord: .62; --verre-sat: 1.2; --verre-lum: 1;
  --verre-reflet: .62; --verre-nappe: .08; --verre-lueur: .12;
  --verre-texte: #F5F2EA; --verre-texte-2: rgb(245 242 234 / .94); --verre-accent: #F5F2EA;
}
/* Verre de nuit explicite (sur une photo, ou sur le jour pour un événement) */
.verre--nuit { --verre-teinte: 24 28 72; }
/* Or : l'action principale. Une seule surface dorée par visuel. */
.verre--or {
  --verre-teinte: 242 168 29; --verre-opacite: .94; --verre-opacite-bord: .76; --verre-sat: 1.3; --verre-lum: 1.05;
  --verre-reflet: .85; --verre-rebond: .40; --verre-nappe: .24; --verre-lueur: .30;
  --verre-ombre-rgb: 120 60 0; --verre-ombre-a: .26;
  --verre-texte: #1F1B16; --verre-texte-2: rgb(31 27 22 / .80); --verre-accent: #1F1B16;
}
/* Formes : plus c'est grand, plus c'est épais (Apple) */
.verre--pastille { --verre-rayon: 999; --verre-coeur: 6; --verre-flou: 10; --verre-bord: 1; --verre-ombre-a: .22; --lentille-profil: 2.4;
  display: inline-flex; align-items: center; gap: calc(var(--u) * 6); border-radius: 999px; white-space: nowrap; }
.verre--pastille::after { border-radius: 999px; }
.verre--carte { --verre-rayon: 32; --verre-coeur: 12; --verre-flou: 24; --verre-ombre-a: .40; --verre-lueur: .12; }
.jour .verre--carte:not(.verre--nuit), .verre--carte.verre--clair { --verre-opacite: .70; --verre-ombre-a: .22; --verre-lueur: .38; }
.verre--carte.verre--opalin { --verre-opacite: .86; --verre-ombre-a: .06; --verre-lueur: .16; }
/* Le verre allégé sous la lumière (research/08, § 3.5 : « le verre se réchauffe quand la lumière passe derrière lui »).
   Un seul jeton, --verre-allege (§ 1) : là où la lumière passe derrière le verre (une ellipse posée sur le bord, à
   --allege-x, --allege-y), le cœur descend à cette opacité totale ; il redevient dense en s'éloignant (--allege-rx,
   --allege-ry), avant la première ligne de texte. Contrôles : outils/brun.py (au plus 0,5 %) et outils/contraste.py. */
.verre--allege {
  --allege-x: 50%; --allege-y: 0%; --allege-rx: 62%; --allege-ry: 46%;
  --verre-coeur-fond: radial-gradient(ellipse var(--allege-rx) var(--allege-ry) at var(--allege-x) var(--allege-y),
    rgb(var(--verre-teinte) / calc(1 - (1 - var(--verre-allege)) / (1 - var(--verre-opacite-bord)))) 0%,
    rgb(var(--verre-teinte) / calc(1 - (1 - var(--verre-allege)) / (1 - var(--verre-opacite-bord)))) 22%,
    rgb(var(--verre-teinte) / var(--verre-k)) 100%);
}
/* Ancien nom (v1), gardé pour les pages qui l'emploient encore : même effet. */
.verre--traverse { --verre-opacite: .52; }
/* Sur un fond clair (photo claire), le verre de nuit s'épaissit pour garder le texte lisible. */
.sur-clair .verre--nuit, .sur-clair.verre--nuit { --verre-opacite: .80; --verre-opacite-bord: .52; }

/* -------------------------------------------------------------------------- 7. Composants */

/* 7.1 Le billet Wallet, en verre (repris de Signal, gardé par Nico, identique sur tous les supports).
   Anatomie d'un pass Apple Wallet : en-tête (date en Clash, heure en Switzer), champ principal (le titre),
   texte d'envie, ligne de coupe avec ses encoches, champs secondaires (étiquette au-dessus de la valeur),
   pied (qui anime, l'action ou le QR). Mise en page en flux : le billet prend la hauteur de son contenu.
   La position des encoches (--billet-coupe) est relevée sur .billet__coupe par sv.js.
   Marge intérieure 20 u (au-delà de la bande des bords, 10 u). */
.billet-cadre { position: relative; }
.billet-cadre::before {
  content: ""; position: absolute; inset: 0; border-radius: calc(var(--verre-rayon, 24) * var(--u));
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgb(var(--ombre-rgb, 6 8 28) / .26), 0 calc(var(--u) * 20) calc(var(--u) * 44) rgb(var(--ombre-rgb, 6 8 28) / .24);
}
.verre--billet {
  --verre-rayon: 24; --verre-coeur: 10; --verre-flou: 22; --verre-ombre-a: 0;
  --billet-coupe: 60%;
  --billet-encoche: calc(var(--u) * 11);
  display: flex; flex-direction: column;
  padding: calc(var(--u) * 19) calc(var(--u) * 20) calc(var(--u) * 16);
  -webkit-mask:
    radial-gradient(circle at 0 var(--billet-coupe), #0000 calc(var(--billet-encoche) - .5px), #000 var(--billet-encoche)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% var(--billet-coupe), #0000 calc(var(--billet-encoche) - .5px), #000 var(--billet-encoche)) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 var(--billet-coupe), #0000 calc(var(--billet-encoche) - .5px), #000 var(--billet-encoche)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% var(--billet-coupe), #0000 calc(var(--billet-encoche) - .5px), #000 var(--billet-encoche)) right / 51% 100% no-repeat;
  background:
    radial-gradient(circle at 0 var(--billet-coupe), #fff0 calc(var(--billet-encoche) - .5px), rgb(255 255 255 / calc(var(--verre-reflet) * .5)) var(--billet-encoche), #fff0 calc(var(--billet-encoche) + var(--verre-bord) * var(--u) + .5px)),
    radial-gradient(circle at 100% var(--billet-coupe), #fff0 calc(var(--billet-encoche) - .5px), rgb(255 255 255 / calc(var(--verre-reflet) * var(--verre-rebond))) var(--billet-encoche), #fff0 calc(var(--billet-encoche) + var(--verre-bord) * var(--u) + .5px)),
    var(--verre-grain-img) 0 0 / calc(var(--u) * 100) calc(var(--u) * 100),
    linear-gradient(var(--verre-angle), rgb(255 255 255 / var(--verre-nappe)) 0%, rgb(255 255 255 / 0) 52%),
    var(--verre-teinte-bord, linear-gradient(rgb(var(--verre-teinte) / var(--verre-opacite-bord)), rgb(var(--verre-teinte) / var(--verre-opacite-bord))));
}
/* Sur le jour, l'encoche se lit par une ombre intérieure (le liseré blanc ne se voit pas sur du clair) */
.jour .verre--billet:not(.verre--nuit), .verre--billet.verre--clair {
  background:
    radial-gradient(circle at 0 var(--billet-coupe), #0000 calc(var(--billet-encoche) - .5px), rgb(44 40 70 / .16) var(--billet-encoche), rgb(44 40 70 / .05) calc(var(--billet-encoche) + var(--u) * 3), #0000 calc(var(--billet-encoche) + var(--u) * 7)),
    radial-gradient(circle at 100% var(--billet-coupe), #0000 calc(var(--billet-encoche) - .5px), rgb(44 40 70 / .16) var(--billet-encoche), rgb(44 40 70 / .05) calc(var(--billet-encoche) + var(--u) * 3), #0000 calc(var(--billet-encoche) + var(--u) * 7)),
    var(--verre-grain-img) 0 0 / calc(var(--u) * 100) calc(var(--u) * 100),
    linear-gradient(var(--verre-angle), rgb(255 255 255 / var(--verre-nappe)) 0%, rgb(255 255 255 / 0) 52%),
    linear-gradient(rgb(var(--verre-teinte) / var(--verre-opacite-bord)), rgb(var(--verre-teinte) / var(--verre-opacite-bord)));
}
.billet__tete { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 8); }
.billet__date { font: var(--g-clash, 560) var(--fs-carte)/1 "Clash Grotesk", sans-serif; letter-spacing: -0.014em; white-space: nowrap; }
.billet__heure { font: 540 var(--fs-etiquette)/1 "Switzer", sans-serif; letter-spacing: -0.004em; white-space: nowrap; color: var(--c-texte-2); }
.billet__titre { font: var(--g-clash, 560) var(--fs-titre)/.95 "Clash Grotesk", sans-serif; letter-spacing: -0.028em; text-wrap: balance; margin: calc(var(--u) * 12) 0 0; }
.billet__texte { font: 450 var(--fs-texte)/1.32 "Switzer", sans-serif; letter-spacing: -0.006em; text-wrap: pretty; color: var(--c-texte-2); margin: calc(var(--u) * 8) 0 0; }
.billet__coupe { position: relative; height: 0; margin: calc(var(--u) * 15) calc(var(--billet-encoche) - var(--u) * 10) calc(var(--u) * 13);
  border-top: calc(var(--u) * 1.2) dashed currentColor; opacity: .30; flex: none; }
.billet__champs { display: grid; grid-template-columns: repeat(var(--n, 3), auto); justify-content: space-between; gap: calc(var(--u) * 10); }
.billet__pied { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 14); }
.champ { display: flex; flex-direction: column; gap: calc(var(--u) * 2.5); min-width: 0; }
.champ__l { font: 520 var(--fs-mention)/1.2 "Switzer", sans-serif; letter-spacing: .004em; color: var(--c-texte-2); white-space: nowrap; }
.champ__v { font: 620 var(--fs-valeur)/1.1 "Switzer", sans-serif; letter-spacing: -0.012em; white-space: nowrap; }
.champ__v small { font-size: .62em; font-weight: 520; color: var(--c-texte-2); letter-spacing: 0; }

/* Billet couché (écrans paysage, site) : souche or à gauche qui porte la date, coupe verticale, encoches en haut et en bas.
   La souche est un aplat dans le verre (jamais un second verre). --billet-coupe = bord droit de la souche. */
.verre--billet.billet--couche {
  flex-direction: row; padding: 0;
  -webkit-mask:
    radial-gradient(circle at var(--billet-coupe) 0, #0000 calc(var(--billet-encoche) - .5px), #000 var(--billet-encoche)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--billet-coupe) 100%, #0000 calc(var(--billet-encoche) - .5px), #000 var(--billet-encoche)) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle at var(--billet-coupe) 0, #0000 calc(var(--billet-encoche) - .5px), #000 var(--billet-encoche)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--billet-coupe) 100%, #0000 calc(var(--billet-encoche) - .5px), #000 var(--billet-encoche)) bottom / 100% 51% no-repeat;
  background:
    var(--verre-grain-img) 0 0 / calc(var(--u) * 100) calc(var(--u) * 100),
    linear-gradient(var(--verre-angle), rgb(255 255 255 / var(--verre-nappe)) 0%, rgb(255 255 255 / 0) 52%),
    var(--verre-teinte-bord, linear-gradient(rgb(var(--verre-teinte) / var(--verre-opacite-bord)), rgb(var(--verre-teinte) / var(--verre-opacite-bord))));
}
.billet__souche {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  margin: calc(var(--u) * 7) 0 calc(var(--u) * 7) calc(var(--u) * 7); padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 17) 0 0 calc(var(--u) * 17);
  background: var(--or); color: var(--sv-encre);
  box-shadow: inset 0 calc(var(--u) * .8) 0 rgb(255 255 255 / .45), inset calc(var(--u) * -1) 0 0 rgb(150 70 0 / .25);
}
.billet__souche .s-jour { font: 600 var(--fs-etiquette)/1 "Switzer", sans-serif; }
/* Le numéro de la souche : encre sur or, jamais en lumière, jamais animé en grossissement ; corps plafonné par --souche-num-max. */
.billet__souche .s-num { font: 600 min(var(--souche-num, calc(var(--fs-display) * 1.12)), var(--souche-num-max))/.86 "Clash Grotesk", sans-serif; letter-spacing: -0.03em; margin: calc(var(--u) * 3) 0 calc(var(--u) * 2); color: var(--sv-encre); }
.sv-site .billet__souche .s-num { --souche-num-max: 64px; }
.billet__souche .s-mois { font: 600 var(--fs-etiquette)/1 "Switzer", sans-serif; }
.billet__corps { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 16) calc(var(--u) * 22); min-width: 0; }
.billet--couche .billet__coupe-v { position: absolute; top: calc(var(--billet-encoche) + var(--u) * 8); bottom: calc(var(--billet-encoche) + var(--u) * 8);
  left: var(--billet-coupe); border-left: calc(var(--u) * 1.2) dashed var(--sv-encre); opacity: .30; }

/* 7.2 Bouton or : l'action principale, un aplat doré (dans un verre, jamais un second verre). Un seul par visuel. */
.bouton-or {
  display: inline-flex; align-items: center; justify-content: center; gap: .42em; white-space: nowrap;
  height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 15) 0 calc(var(--u) * 16); border-radius: 999px;
  background: var(--or); color: var(--sv-encre);
  font: 600 var(--fs-etiquette)/1 "Switzer", sans-serif; letter-spacing: -0.006em;
  box-shadow: inset 0 calc(var(--u) * .6) 0 rgb(255 255 255 / .5), inset 0 calc(var(--u) * -.6) 0 rgb(150 70 0 / .18),
    0 calc(var(--u) * 2) calc(var(--u) * 5) rgb(120 60 0 / .20), 0 calc(var(--u) * 7) calc(var(--u) * 16) rgb(150 75 0 / .16);
}
/* Bouton secondaire : contour, couleur du texte du thème */
.bouton-trait {
  display: inline-flex; align-items: center; gap: .42em; white-space: nowrap; height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 15);
  border-radius: 999px; box-shadow: inset 0 0 0 calc(var(--u) * .8) var(--c-filet); color: var(--c-texte);
  font: 560 var(--fs-etiquette)/1 "Switzer", sans-serif;
}
.fleche { width: 1em; height: 1em; flex: none; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* 7.3 Prix : TTC en grand (Clash), € réduit, unité en Switzer ; HT en tout petit (Switzer), juste dessous. */
.prix { display: inline-flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 3); }
.prix__ttc { font-family: "Clash Grotesk", "Switzer", sans-serif; font-weight: var(--g-clash, 560); letter-spacing: -0.03em; line-height: .86; white-space: nowrap; color: var(--c-accent); }
.prix__eur { font-size: .5em; letter-spacing: 0; margin-left: .05em; }
.prix__unite { font-family: "Switzer", sans-serif; font-size: max(var(--fs-mention), .17em); font-weight: 520; letter-spacing: 0; margin-left: .35em; color: var(--c-texte-2); }
.prix__ht { font: 520 var(--fs-mention)/1.2 "Switzer", sans-serif; letter-spacing: .006em; color: var(--c-texte-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 7.4 Curseur (repris de Signal) : rail creusé, remplissage en lumière dorée, bouton blanc cassé (il devient
   une goutte de verre quand on le tient, en mouvement), crans. --valeur : position du bouton (0 à 100 %). */
.curseur { position: relative; height: calc(var(--u) * 24); --valeur: 100%; }
.curseur__rail { position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--u) * 6); margin-top: calc(var(--u) * -3); border-radius: 999px;
  background: var(--c-rail); box-shadow: inset 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgb(var(--ombre-rgb, 6 8 28) / .22); }
.curseur__plein { position: absolute; left: 0; top: 50%; height: calc(var(--u) * 6); margin-top: calc(var(--u) * -3); border-radius: 999px;
  width: var(--valeur); background: linear-gradient(90deg, #F8C552, #F2A81D 60%, #EC8620); transform-origin: 0 50%; }
.curseur__cran { position: absolute; top: 50%; width: calc(var(--u) * 5); height: calc(var(--u) * 5); margin: calc(var(--u) * -2.5) 0 0 calc(var(--u) * -2.5); border-radius: 50%; background: var(--c-cran); }
.curseur__cran.passe { background: rgb(31 27 22 / .28); }
.curseur__bouton { position: absolute; top: 50%; left: var(--valeur); width: calc(var(--u) * 36); height: calc(var(--u) * 24);
  margin: calc(var(--u) * -12) 0 0 calc(var(--u) * -18); border-radius: 999px; background: linear-gradient(180deg, #FFFFFF, #F3F0E8);
  box-shadow: inset 0 0 0 calc(var(--u) * .6) rgb(255 255 255 / .9), 0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgb(var(--ombre-rgb, 6 8 28) / .26), 0 calc(var(--u) * 3.5) calc(var(--u) * 9) rgb(var(--ombre-rgb, 6 8 28) / .22); }
.curseur--fin .curseur__bouton { margin-left: calc(var(--u) * -36); }   /* bouton calé dans le rail quand --valeur = 100 % */
.curseur--debut .curseur__bouton { margin-left: 0; }

/* 7.5 Jauge (jours de la semaine, niveaux d'adhésion) */
.jauge { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: calc(var(--u) * 3); }
.jauge i { display: block; height: calc(var(--u) * 5.5); border-radius: 999px; background: var(--c-rail); }
.jauge i.on { background: linear-gradient(90deg, #F8C552, #F2A81D 60%, #EC8620); }
.jauge__legende { display: flex; justify-content: space-between; margin-top: calc(var(--u) * 5); }

/* Jauge de formule (domiciliation) : 1, 2 ou 3 crans allumés sur 3, en attendant les noms des formules. */
.jauge--formule { --n: 3; width: calc(var(--u) * 52); }

/* 7.5 bis Curseur de trajet (parking, repris de « Plein jour ») : la goutte va du parking du Jura à la porte.
   Un rail, deux bouts nommés, aucune carte, aucun plan, aucune coordonnée. */
.trajet { position: relative; }
.trajet .curseur { margin: calc(var(--u) * 10) 0 calc(var(--u) * 6); }
.trajet__bouts { display: flex; justify-content: space-between; }

/* 7.6 Pastille d'information */
.pastille { height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 14); font: 560 var(--fs-etiquette)/1 "Switzer", sans-serif; letter-spacing: -0.004em; }
.pastille .point { width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); border-radius: 50%; background: var(--or-2); flex: none; }

/* 7.7 Mot-logo : tracés réels Open Sans Bold (sv.js), jamais retapé. --cap : hauteur de capitale. */
[data-mot-logo] { --cap: 20px; display: inline-flex; line-height: 0; color: var(--c-mot-logo); }
[data-mot-logo] svg { height: calc(var(--cap) * 23.4 / 22.125); width: auto; display: block; }

/* 7.8 Anneaux du logo en fond : 18 arcs réels (lib/logo.js), exactement concentriques (centre du carré = centre du logo),
   ton sur ton. Jamais de graduation, de chiffre, de coordonnée ni d'aiguille. Placer avec --ax, --ay (centre), --at (taille). */
.anneaux { position: absolute; pointer-events: none; left: var(--ax, 50%); top: var(--ay, 50%); width: var(--at, 1600px); height: var(--at, 1600px);
  transform: translate(-50%, -50%) rotate(var(--ar, 0deg)); opacity: var(--anneaux-o); color: var(--anneaux-c); }
.anneaux svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* 7.9 Fenêtre photo : coins continus, jamais voilée, jamais en noir et blanc. Arche : les arches du lieu. */
.fenetre { position: absolute; overflow: hidden; border-radius: var(--r-xl); background: #2a2d55; isolation: isolate;
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2) rgb(var(--ombre-rgb) / .10), 0 calc(var(--u) * 10) calc(var(--u) * 26) rgb(var(--ombre-rgb) / .18); }
.fenetre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arche { border-radius: 999px 999px var(--r-m) var(--r-m); }
/* La nuit, une fenêtre posée devant la lumière n'a pas d'ombre sombre (une ombre sur la lumière salit en brun) :
   un liseré clair à la place, la lumière déborde sur ses bords. */
.nuit .fenetre { box-shadow: 0 0 0 calc(var(--u) * 1) rgb(255 244 222 / .22); }

/* 7.10 QR (toujours sur blanc cassé, modules en pixels entiers) */
.qr-tuile { background: #F5F2EA; color: #1F1B16; border-radius: var(--r-s); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 7); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgb(6 8 28 / .22); }
.qr-tuile [data-qr] { display: block; }
.qr-tuile span { font: 620 var(--fs-mention)/1 "Switzer", sans-serif; letter-spacing: -0.004em; white-space: nowrap; }

/* 7.11 Avatar (Instagram seulement : aucun visage sur les écrans ni sur le site) */
.avatar { display: flex; align-items: center; gap: calc(var(--u) * 7); }
.avatar img { width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 calc(var(--u) * 1.2) rgb(245 242 234 / .5); }
.avatar span { font: 500 var(--fs-etiquette)/1.15 "Switzer", sans-serif; }
.avatar b { font-weight: 650; }

/* -------------------------------------------------------------------------- 8. Gabarits
   Post 1080 x 1350 : marges de 72 px ; l'essentiel dans les 1012 px centraux (la grille du profil rogne le 4:5
   en 3:4, soit 34 px de chaque côté). Story 1080 x 1920 (1.0, B8) : rien d'important dans les 250 px du haut ni les
   250 px du bas ; zone du sticker x 240 à 840, y 1490 à 1670, vide. Écrans : 96 px sur les côtés, 64 px en haut et en bas ; rien sous 36 px.
   Calques animables (préparés pour l'étape vidéo, personnalité LUMIÈRE) : chaque pièce pose ses couches
   dans cet ordre et les marque data-calque (1.0) : fond, anneaux, lumiere, photo, deco, verre, texte, goutte, repere, qr.
   Ce sont aussi les rôles des zones sûres (B8) lus par ds/page.mjs.
   Au repos, aucun texte ne porte de transform ni de filtre. */
.scene { position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box; font-family: "Switzer", sans-serif;
  -webkit-font-smoothing: antialiased; font-kerning: normal; text-rendering: geometricPrecision; }
.scene *, .scene *::before, .scene *::after { box-sizing: border-box; }
.post { width: 1080px; height: 1350px; }
.story { width: 1080px; height: 1920px; }
.carre { width: 1080px; height: 1080px; }
.ecran { width: 1920px; height: 1080px; }
.ecran-v { width: 1080px; height: 1920px; }
.tete { position: absolute; left: 72px; right: 72px; top: 72px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.tete [data-mot-logo] { --cap: 21px; }
.calque { position: absolute; }

/* -------------------------------------------------------------------------- 9. Replis */
.sans-verre .verre { background: rgb(var(--verre-teinte)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; --verre-texte-2: var(--verre-texte); }
.sans-verre .verre::after { display: none; }
.sans-verre .verre::before { background: currentColor; opacity: .16; padding: max(.25pt, calc(var(--u) * 1)); }
.sans-verre .lumiere, .sans-verre .faisceau { display: none; }
/* L'imprimé : toujours sur papier clair. La classe .papier donne l'aperçu à l'écran ; @media print applique la même
   chose à toute page, y compris une scène .nuit (le fond de nuit passe en papier, les textes passent en encre et navy).
   Le billet d'événement reste le seul aplat de nuit (navy plein, souche or) : il garde ses encoches, sans verre. */
.papier, .papier.nuit {
  --c-titre: #2C3587; --c-texte: #1F1B16; --c-texte-2: rgb(31 27 22 / .76); --c-texte-3: rgb(31 27 22 / .66);
  --c-filet: rgb(31 27 22 / .14); --c-rail: rgb(44 53 135 / .16); --c-cran: rgb(44 53 135 / .40); --c-accent: #2C3587;
  --c-mot-logo: #2C3587; --anneaux-c: #2C3587; --anneaux-o: .10; --ombre-rgb: 44 40 60; --g-clash: 560;
  color: var(--c-texte); background: #F5F2EA;
}
.papier .verre { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.papier .verre::after { display: none; }
.papier .verre:not(.verre--billet)::before { background: rgb(31 27 22 / .16); padding: calc(var(--u) * 1); }
.papier .verre--billet { --verre-teinte: 44 53 135; --verre-opacite-bord: 1; --verre-nappe: 0; --verre-texte: #F5F2EA; --verre-texte-2: rgb(245 242 234 / .90);
  --verre-filet: rgb(245 242 234 / .24); --verre-accent: #F5F2EA; color: #F5F2EA; }
.papier .verre--billet::before { display: none; }
.papier .lumiere, .papier .faisceau, .papier .grain, .papier .bokeh { display: none; }
@media print {
  .nuit {
    --c-titre: #2C3587; --c-texte: #1F1B16; --c-texte-2: rgb(31 27 22 / .76); --c-texte-3: rgb(31 27 22 / .66);
    --c-filet: rgb(31 27 22 / .14); --c-rail: rgb(44 53 135 / .16); --c-cran: rgb(44 53 135 / .40); --c-accent: #2C3587;
    --c-mot-logo: #2C3587; --anneaux-c: #2C3587; --anneaux-o: .10; --g-clash: 560;
    background: #F5F2EA !important; color: #1F1B16;
  }
  .verre { background: rgb(var(--verre-teinte)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
  .nuit .verre:not(.verre--billet) { --verre-teinte: 245 242 234; --verre-texte: #1F1B16; --verre-texte-2: rgb(31 27 22 / .76); --verre-accent: #2C3587; }
  .verre--billet { --verre-teinte: 44 53 135; }
  .verre::after { display: none; }
  .lumiere, .faisceau, .grain, .bokeh { display: none; }
  .en-lumiere { -webkit-text-fill-color: #2C3587 !important; color: #2C3587 !important; background: none !important; }
  .verre--billet .en-lumiere { -webkit-text-fill-color: #F2A81D !important; color: #F2A81D !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .verre { --verre-opacite: .96; --verre-opacite-bord: .96; --verre-nappe: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .verre { --verre-opacite: .97; --verre-opacite-bord: .97; --verre-texte-2: var(--verre-texte); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* -------------------------------------------------------------------------- 10. Version 1.0
   Les composants ajoutés ou fixés le 2 octobre 2026 (DESIGN-SYSTEM.md, B3 à B11). */

/* 10.1 Échelles des supports ajoutés (A5). Totem : lu à 3 m, plus étroit que la télé. */
.sv-totem {
  --fs-display: 118px; --fs-titre: 104px; --fs-sous: 80px; --fs-carte: 64px;
  --fs-chapo: 56px; --fs-texte: 48px; --fs-etiquette: 44px; --fs-mention: 44px;
  --fs-prix-xl: 220px; --fs-prix-l: 120px; --fs-prix-m: 72px; --fs-valeur: 56px;
}
.sv-banniere {
  --fs-display: 110px; --fs-titre: 96px; --fs-sous: 56px; --fs-carte: 48px;
  --fs-chapo: 36px; --fs-texte: 32px; --fs-etiquette: 30px; --fs-mention: 28px;
  --fs-prix-xl: 160px; --fs-prix-l: 96px; --fs-prix-m: 56px; --fs-valeur: 40px;
  --souche-num-max: 96px;
}
.sv-a6 {
  --fs-display: 44px; --fs-titre: 34px; --fs-sous: 20px; --fs-carte: 16px;
  --fs-chapo: 12.5px; --fs-texte: 11px; --fs-etiquette: 11px; --fs-mention: 9.5px;
  --fs-prix-xl: 40px; --fs-prix-l: 28px; --fs-prix-m: 20px; --fs-valeur: 12.5px;
}
.sv-a3 {
  --fs-display: 124px; --fs-titre: 96px; --fs-sous: 56px; --fs-carte: 45px;
  --fs-chapo: 35px; --fs-texte: 31px; --fs-etiquette: 31px; --fs-mention: 27px;
  --fs-prix-xl: 113px; --fs-prix-l: 79px; --fs-prix-m: 56px; --fs-valeur: 35px;
}
.sv-reseaux { --goutte-w: 85px; --goutte-h: 56px; --fs-repere: 34px; }
.sv-story   { --goutte-w: 104px; --goutte-h: 64px; }
.sv-ecran, .sv-totem { --goutte-w: 108px; --goutte-h: 72px; --fs-repere: 44px; }
.sv-banniere { --goutte-w: 85px; --goutte-h: 56px; --fs-repere: 30px; }

/* 10.2 La goutte (B3) : l'objet du SV sur Instagram. Blanc nacré au repos ; la couche or (--k-or, 0 à 1) la
   fait passer à l'or (geste 3, mélange ease-in-out de 15 à 70 % du voyage). Une seule goutte par visuel.
   Jamais une flèche, une main ni un curseur de souris. Elle n'a pas de lentille : sa taille peut changer. */
.goutte { position: absolute; left: 0; top: 0; width: var(--goutte-w); height: var(--goutte-h); border-radius: 999px;
  background: var(--goutte-nacre); transform-origin: 50% 50%; pointer-events: none;
  box-shadow: inset 0 0 0 calc(var(--u) * .6) rgb(255 255 255 / .9),
    0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgb(var(--ombre-rgb, 6 8 28) / .26),
    0 calc(var(--u) * 3.5) calc(var(--u) * 9) rgb(var(--ombre-rgb, 6 8 28) / .22); }
.goutte__or { position: absolute; inset: 0; border-radius: inherit; opacity: var(--k-or, 0); background: var(--or);
  box-shadow: inset 0 calc(var(--u) * .6) 0 rgb(255 255 255 / .5), inset 0 calc(var(--u) * -.6) 0 rgb(150 70 0 / .18),
    0 calc(var(--u) * 2) calc(var(--u) * 5) rgb(120 60 0 / .20), 0 calc(var(--u) * 7) calc(var(--u) * 16) rgb(150 75 0 / .16); }
.goutte--point { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.goutte--or { --k-or: 1; }
/* Posée sur un rail : son centre sur le centre du rail (le gabarit la place par transform). */
.goutte--rail { margin: calc(var(--goutte-h) / -2) 0 0 calc(var(--goutte-w) / -2); }

/* 10.3 Le repère or (B6) : la goutte devenue or, centrée, au-dessus de la zone vide du sticker (story seulement).
   Un fait de 32 signes au plus, sans verbe d'action ni flèche. 96 px de haut en story, largeur = texte + 2 x 44 px,
   600 px au plus. Le texte monte dans la capsule (montée masquée). */
.repere { position: absolute; height: 96px; min-width: 96px; max-width: 600px; padding: 0 44px; border-radius: 999px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--or); color: var(--sv-encre);
  box-shadow: inset 0 calc(var(--u) * .6) 0 rgb(255 255 255 / .5), inset 0 calc(var(--u) * -.6) 0 rgb(150 70 0 / .18),
    0 calc(var(--u) * 2) calc(var(--u) * 5) rgb(120 60 0 / .20), 0 calc(var(--u) * 7) calc(var(--u) * 16) rgb(150 75 0 / .16); }
.repere__texte { font: 600 var(--fs-repere, 34px)/1 "Switzer", sans-serif; letter-spacing: -0.006em; white-space: nowrap; color: var(--sv-encre); }
.point-or { display: inline-block; width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: var(--or); flex: none;
  box-shadow: inset 0 calc(var(--u) * .5) 0 rgb(255 255 255 / .5), 0 calc(var(--u) * 1.5) calc(var(--u) * 4) rgb(120 60 0 / .2); }

/* 10.4 La flèche de suite (C4, Relecture I6) : petit dessin en bas à droite des slides 1 à n-1 d'un carrousel fixe
   et des stories 1 à n-1 d'une série, sans mot, jamais dans une pilule. 28 px de haut (post), 32 px (story). */
.fleche-suite { position: absolute; right: 72px; bottom: 72px; width: 28px; height: 28px; color: var(--c-texte-2); pointer-events: none; }
.fleche-suite svg { width: 100%; height: 100%; display: block; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.story .fleche-suite { width: 32px; height: 32px; bottom: 470px; }

/* 10.5 La carte de verre et ses formules (B2, B4) : trois colonnes alignées à gauche, au centre, à droite ;
   la formule active en --c-titre, graisse 620. Toutes les formules restent lisibles à l'image fixe (règle 8). */
.formules { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); align-items: start; }
.formule { display: flex; flex-direction: column; gap: calc(var(--u) * 3.4); min-width: 0; }
.formules > .formule:nth-child(2):not(:last-child) { align-items: center; text-align: center; }
.formules > .formule:last-child:not(:first-child) { align-items: flex-end; text-align: right; }
.formules[style*="--n: 2"] > .formule:last-child, .formules[style*="--n:2"] > .formule:last-child { align-items: flex-end; text-align: right; }
.formule__l { font: 520 var(--fs-etiquette)/1.2 "Switzer", sans-serif; color: var(--c-texte-2); white-space: nowrap; }
.formule.on .formule__l { color: var(--c-titre); font-weight: 620; }
.formule .prix__ttc { font-size: var(--fs-prix-l); }
.formule .prix { align-items: inherit; }
.prix__ht:empty { display: none; }
.jauge__legende span { font: 520 var(--fs-mention)/1.2 "Switzer", sans-serif; color: var(--c-texte-2); }
.trajet__bouts span { font: 560 var(--fs-etiquette)/1.2 "Switzer", sans-serif; color: var(--c-texte); }
.trajet__milieu { display: block; text-align: center; font: 620 var(--fs-etiquette)/1.2 "Switzer", sans-serif; color: var(--c-titre); }

/* 10.6 La pastille d'information (B6) et l'en-tête de story (A7) */
.pastille .point { background: var(--goutte-nacre); box-shadow: inset 0 0 0 1px rgb(31 27 22 / .12); }
.pastille .point.or { background: var(--or); box-shadow: none; }
.tete-story { position: absolute; left: 72px; top: 262px; height: 64px; padding: 0 28px; }
.tete-story [data-mot-logo] { --cap: 21px; }
.sv-ecran .tete [data-mot-logo], .sv-totem .tete [data-mot-logo] { --cap: 30px; }

/* 10.7 Le lever (B10, aube du Café ; repris de mix/m2-plein-jour/tokens.css, celui que Nico a vu) : une lumière
   aplatie posée sur le bord haut du billet, l'horizon ; le billet qui la suit s'allège dans sa bande haute
   (la lumière s'y voit dorée), puis redevient dense avant le premier texte. Jamais de z-index ni de transform.
   Réglages sur .billet-cadre : --lever-x (position sur le bord, 50 % par défaut), --lever-k (taille, 1). */
.billet-cadre > .lever { position: absolute; pointer-events: none;
  --lever-l: calc(var(--u) * 640 * var(--lever-k, 1)); --lever-h: calc(var(--u) * 196 * var(--lever-k, 1));
  left: var(--lever-x, 50%); top: 0; width: var(--lever-l); height: var(--lever-h);
  margin: calc(var(--lever-h) / -2) 0 0 calc(var(--lever-l) / -2);
  --l1: 255 238 204; --l2: 253 208 132; --l3: 247 172 100; --l4: 234 170 172; --l5: 156 158 234; --l6: 98 148 230;
  --c1: 255 232 176; --c2: 248 190 96; }
.billet-cadre > .lever::before, .billet-cadre > .lever::after { content: ""; position: absolute; border-radius: 50%; }
.billet-cadre > .lever::before { inset: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side,
    rgb(var(--l1) / .97) 0%, rgb(var(--l2) / .88) 15%, rgb(var(--l3) / .66) 31%,
    rgb(var(--l4) / .42) 46%, rgb(var(--l5) / .23) 62%, rgb(var(--l6) / .09) 80%, rgb(var(--l6) / 0) 100%); }
.billet-cadre > .lever::after { inset: 28% 32%; opacity: .9;
  background: radial-gradient(closest-side, rgb(var(--c1) / .80) 0%, rgb(var(--c2) / .50) 45%, rgb(var(--c2) / .14) 80%, rgb(var(--c2) / 0) 100%); }
.billet-cadre > .lever ~ .verre--billet {
  --lever-bande: calc(var(--u) * 30);
  --verre-reflet: .7;
  --verre-teinte-bord: linear-gradient(180deg,
    rgb(var(--verre-teinte) / .05) 0, rgb(var(--verre-teinte) / .08) var(--lever-bande),
    rgb(var(--verre-teinte) / var(--verre-opacite-bord)) calc(var(--lever-bande) * 2.2));
  --verre-coeur-fond: linear-gradient(180deg,
    rgb(var(--verre-teinte) / 0) 0, rgb(var(--verre-teinte) / .06) calc(var(--lever-bande) * .7),
    rgb(var(--verre-teinte) / .5) calc(var(--lever-bande) * 1.7), rgb(var(--verre-teinte) / var(--verre-k)) calc(var(--lever-bande) * 2.6)); }
.billet-cadre > .lever ~ .billet--couche {
  --verre-teinte-bord: radial-gradient(ellipse calc(var(--u) * 190 * var(--lever-k, 1)) calc(var(--u) * 64) at var(--lever-x, 50%) 0,
    rgb(var(--verre-teinte) / .05) 0, rgb(var(--verre-teinte) / .10) 45%, rgb(var(--verre-teinte) / var(--verre-opacite-bord)) 100%);
  --verre-coeur-fond: radial-gradient(ellipse calc(var(--u) * 210 * var(--lever-k, 1)) calc(var(--u) * 86) at var(--lever-x, 50%) 0,
    rgb(var(--verre-teinte) / 0) 0, rgb(var(--verre-teinte) / .08) 38%, rgb(var(--verre-teinte) / .5) 72%, rgb(var(--verre-teinte) / var(--verre-k)) 100%); }
/* Un billet qui suit un lever garde son texte loin de la bande claire : le gabarit pose un haut de 30 u au moins. */
.billet-cadre > .lever ~ .verre--billet:not(.billet--couche) { padding-top: calc(var(--u) * 34); }

/* 10.8 Les objets de saison (B10). La lune d'Halloween : reprise exacte de post-8-halloween.html de M1. */
.lune { position: absolute; width: 392px; height: 392px; margin: -196px 0 0 -196px; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 30% 58%, rgb(236 146 70 / .20) 0 6%, rgb(236 146 70 / 0) 8.5%),
    radial-gradient(circle at 63% 30%, rgb(236 146 70 / .16) 0 4.5%, rgb(236 146 70 / 0) 6.5%),
    radial-gradient(circle at 58% 70%, rgb(236 146 70 / .18) 0 8%, rgb(236 146 70 / 0) 11%),
    radial-gradient(circle at 76% 52%, rgb(236 146 70 / .12) 0 3.5%, rgb(236 146 70 / 0) 5.5%),
    radial-gradient(circle at 38% 34%, rgb(255 246 222 / .9) 0%, rgb(255 246 222 / 0) 46%),
    radial-gradient(circle at 50% 50%, #FFD999 0%, #FBBF6A 46%, #F39A44 82%, #EE8A3C 100%);
  box-shadow: 0 0 2px 1px rgb(255 214 150 / .55); }
.chauve { position: absolute; fill: #0F1230; pointer-events: none; }
.chauve svg { width: 100%; height: auto; display: block; overflow: visible; }
.chauve.loin { fill: #2A2F66; }
.araignee { position: absolute; pointer-events: none; overflow: visible; }
.araignee .fil { stroke: #5B5596; stroke-width: 2; fill: none; opacity: .9; }
.araignee .corps { fill: #0F1230; }
.araignee .pattes { fill: none; stroke: #0F1230; stroke-width: 3.2; stroke-linecap: round; }
/* Le portrait de l'hôte, dans la lumière (Instagram seulement, sauf Christian et Nico) */
.portrait-disque { position: absolute; width: 330px; height: 330px; margin: -165px 0 0 -165px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 5px rgb(255 244 222 / .70); }
.portrait-disque img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le titre doré des Silicone Awards (Clash 200 px sur le post) et le menu des trois grands prix */
.titre-gala { font: var(--g-clash, 540) 200px/.88 "Clash Grotesk", sans-serif; letter-spacing: -0.036em; padding-bottom: 14px; margin: 0; }
.menu-prix { margin: 0; padding: 0; list-style: none; }
.menu-prix li { display: flex; justify-content: center; align-items: baseline; gap: 16px; padding: 15px 0 16px; }
.menu-prix li + li { border-top: 1.5px solid rgb(246 220 160 / .22); }
.menu-prix small { font: 520 var(--fs-mention)/1 "Switzer", sans-serif; color: rgb(250 226 176 / .78); letter-spacing: .01em; }
.menu-prix b { font: var(--g-clash) 44px/1.06 "Clash Grotesk", sans-serif; letter-spacing: -0.012em; color: var(--c-texte); }

/* 10.9 La couverture à la une (A5) : un disque d'opalin centré, un signe (ou aucun pour le Café). */
.disque-opalin { position: absolute; left: 50%; top: 50%; width: 500px; height: 500px; margin: -250px 0 0 -250px;
  --verre-rayon: 999; --verre-coeur: 14; --verre-opacite: .84; --verre-opacite-bord: .42; --verre-flou: 22; --verre-lueur: .16; --verre-ombre-a: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.disque-opalin::after { border-radius: 50%; }
.signe { font: 600 250px/1 "Clash Grotesk", sans-serif; letter-spacing: -0.03em; margin-top: -10px; color: var(--sv-navy); }
.signe.court { font-size: 190px; letter-spacing: -0.04em; }
.signe svg { width: 210px; height: 210px; stroke: var(--sv-navy); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* 10.10 Fenêtre photo à point focal (A8) : object-position = point focal, posé par SVDS.photo(). */
.fenetre img[data-focal] { object-fit: cover; }
.photo-plein { position: absolute; inset: 0; overflow: hidden; }
.photo-plein img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 10.11 Le QR des écrans et de l'imprimé (B9) : tuile blanc cassé, marges de 18 px sur les écrans, libellé de 44 px. */
.sv-ecran .qr-tuile, .sv-totem .qr-tuile { padding: 18px 18px 16px; gap: 10px; border-radius: 30px; }
.sv-ecran .qr-tuile span, .sv-totem .qr-tuile span { font-size: 44px; }

/* 10.12 Les interrupteurs de contrôle (E2 point 5), posés sur <html> par sv.js d'après l'adresse.
   ?sanstexte=1 : textes transparents (contraste, chasse à la lumière qui éclot) ; ?sansor=1 : aplats or masqués ;
   ?sansphoto=1 : photos masquées ; ?anneauxseuls=1 : les anneaux seuls, opaques, sur noir (concentricité). */
html.sv-sanstexte .scene, html.sv-sanstexte .scene * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; }
html.sv-sanstexte .scene [data-mot-logo] svg { opacity: 0 !important; }
html.sv-sansor :is(.goutte__or, .goutte--or, .repere, .billet__souche, .curseur__plein, .jauge i.on, .point-or, .pastille .point.or, .en-lumiere, [data-or]) { visibility: hidden !important; }
html.sv-sansphoto .scene img { visibility: hidden !important; }
html.sv-sansgoutte .scene :is([data-calque="goutte"], [data-calque="repere"], .goutte, .repere) { visibility: hidden !important; }
html.sv-anneauxseuls .scene > :not(.anneaux) { display: none !important; }
html.sv-anneauxseuls .scene { background: #000 !important; }
html.sv-anneauxseuls .anneaux { opacity: 1 !important; color: #fff !important; }
/* ?zones=1 : les zones sûres en pointillés (mise au point seulement, jamais rendues en sortie) */
.sv-zones { position: absolute; inset: 0; pointer-events: none; z-index: 999; }
.sv-zones i { position: absolute; border: 2px dashed rgb(255 0 120 / .8); box-sizing: border-box; }
.sv-zones i.sticker { border-color: rgb(0 200 120 / .9); background: rgb(0 200 120 / .12); }

/* 10.13 Compléments du bâtisseur (relus sur la galerie le 2 octobre 2026) */
/* Le billet couché : l'heure de la souche dans une pastille encre à 10 %, une ligne de champs sous le titre. */
.billet__souche .s-heure { margin-top: calc(var(--u) * 5); padding: calc(var(--u) * 3) calc(var(--u) * 7); border-radius: 999px; background: rgb(31 27 22 / .10);
  font: 620 var(--fs-etiquette)/1 "Switzer", sans-serif; white-space: nowrap; color: var(--sv-encre); }
.billet--couche .billet__corps .serie { color: var(--c-texte-2); }
.billet--couche .billet__titre { margin-top: calc(var(--u) * 4); }
.billet--couche .ligne { display: flex; gap: calc(var(--u) * 15); margin-top: calc(var(--u) * 9); }
/* Le jour au billet : le billet garde sa nuit, d'un navy plus dense que le verre de nuit sur le clair (sinon il grisaille). */
.jour .verre--billet.verre--nuit, .sur-clair .verre--billet.verre--nuit { --verre-teinte: 30 36 98; --verre-opacite: .90; --verre-opacite-bord: .70; --verre-lueur: .10;
  --verre-texte: #F5F2EA; --verre-texte-2: rgb(245 242 234 / .84); --verre-accent: #F5F2EA; --verre-filet: rgb(245 242 234 / .18); color: #F5F2EA; }
/* Le lever posé librement (couverture du Café, bannière sans billet) : même recette que .billet-cadre > .lever,
   centré en --lever-x, --lever-y de la scène. */
.lever-libre { position: absolute; pointer-events: none; left: var(--lever-x, 50%); top: var(--lever-y, 50%);
  --lever-l: calc(var(--u) * 640 * var(--lever-k, 1)); --lever-h: calc(var(--u) * 196 * var(--lever-k, 1));
  width: var(--lever-l); height: var(--lever-h); margin: calc(var(--lever-h) / -2) 0 0 calc(var(--lever-l) / -2);
  --l1: 255 238 204; --l2: 253 208 132; --l3: 247 172 100; --l4: 234 170 172; --l5: 156 158 234; --l6: 98 148 230;
  --c1: 255 232 176; --c2: 248 190 96; }
.lever-libre::before, .lever-libre::after { content: ""; position: absolute; border-radius: 50%; }
.lever-libre::before { inset: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(var(--l1) / .97) 0%, rgb(var(--l2) / .88) 15%, rgb(var(--l3) / .66) 31%,
    rgb(var(--l4) / .42) 46%, rgb(var(--l5) / .23) 62%, rgb(var(--l6) / .09) 80%, rgb(var(--l6) / 0) 100%); }
.lever-libre::after { inset: 28% 32%; opacity: .9;
  background: radial-gradient(closest-side, rgb(var(--c1) / .80) 0%, rgb(var(--c2) / .50) 45%, rgb(var(--c2) / .14) 80%, rgb(var(--c2) / 0) 100%); }
/* Dans un verre clair ou opalin posé sur la nuit, le rail et les crans prennent les valeurs du jour (sinon le rail blanc
   cassé de la nuit disparaît sur l'opalin). */
.verre--opalin, .verre--clair, .jour .verre:not(.verre--nuit):not(.verre--navy) { --c-rail: rgb(44 53 135 / .14); --c-cran: rgb(44 53 135 / .34); }