/* ==========================================================================================
   UpTrainer — thème premium de la landing (retour n°48, 29/09/2026)
   Source unique des jetons : police, couleurs, tailles, espacements, rayons, ombres, verre, mouvement.
   Utilisé par : landing-premium/index.html (tout le haut de la page) et, à appliquer par l'autre agent,
   la section plateforme (section-plateforme/).
   Police : Geist, une seule famille partout (titres, textes, boutons, étiquettes, chiffres). Steeve, V18 :
   « toujours la même police » (il avait refusé une étiquette en police à chasse fixe).
   À charger dans la page, avant ce fichier :
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300..800&display=swap">
   Tout est opt-in : ce fichier ne pose que des variables (:root) et des classes préfixées « pr- ».
   ========================================================================================== */

:root{
  /* ---------- Police ---------- */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-nom: "Geist";                 /* pour document.fonts.load('600 40px "Geist"') avant les mesures de texte */

  /* ---------- Couleurs : un fond, une encre, un seul rouge ---------- */
  --bg: #08090a;                       /* fond de page (inchangé : les voiles de la section s'y fondent) */
  --bg-2: #0b0c0e;                     /* fond à peine relevé (sous le verre) */
  --ink: #f7f4f2;                      /* texte principal (blanc cassé, jamais #fff) */
  --ink-2: rgba(247,244,242,.74);      /* texte courant */
  --ink-3: rgba(247,244,242,.56);      /* texte secondaire, étiquettes (contraste 6:1 sur --bg) */
  --ink-4: rgba(247,244,242,.34);      /* texte barré, décor, désactivé */
  --red: #f9293e;                      /* LE rouge. Mots en avant, points, tracés, focus. Un seul. */
  --red-rgb: 249,41,62;
  --vert: #4ac480;                     /* vert du produit (« Gagné » dans la plateforme), rien d'autre */
  --wa: #25D366;                       /* vert WhatsApp, utilitaire */

  /* Deux lumières de fond, reprises du film (fond froid / fond chaud), jamais en aplat franc */
  --froid-1: #17181c; --froid-2: #0d0e11; --froid-3: #050506;       /* le monde d'avant (ardoise) */
  --braise-1: #48070f; --braise-2: #30050c; --braise-3: #170306;    /* le monde UpTrainer (rouge très sombre) */

  /* ---------- Filets ---------- */
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --line-3: rgba(255,255,255,.24);

  /* ---------- Typographie (fluide entre 390 et 1440 px de large) ---------- */
  --fs-hero:   clamp(42px, 4vw + 26px, 86px);     /* H1 : 42 → 84 */
  --fs-final:  clamp(40px, 5.4vw + 19px, 104px);  /* « coacher. » : 40 → 97 */
  --fs-fort:   clamp(38px, 3.4vw + 25px, 76px);   /* retournement : 38 → 74 */
  --fs-h2:     clamp(34px, 2.6vw + 24px, 62px);   /* titres de section : 34 → 61 */
  --fs-chute:  clamp(28px, 2vw + 20px, 52px);     /* chute du monde d'avant : 28 → 49 */
  --fs-h3:     clamp(30px, 1.6vw + 24px, 48px);   /* titres des étapes : 30 → 47 */
  --fs-lead:   clamp(17.5px, .4vw + 16px, 21px);  /* sous-titres : 17,5 → 21 */
  --fs-body:   clamp(16px, .2vw + 15.2px, 18px);  /* texte : 16 → 18 */
  --fs-small:  14px;
  --fs-micro:  12.5px;
  --fs-label:  13px;                              /* étiquettes (point rouge + texte) */

  --fw-titre: 600;  --fw-fort: 650;  --fw-texte: 400;  --fw-moyen: 500;  --fw-bouton: 600;
  --ls-hero: -.048em; --ls-titre: -.04em; --ls-h3: -.035em; --ls-lead: -.012em; --ls-texte: -.006em; --ls-label: .01em;
  --lh-hero: .98; --lh-titre: 1.02; --lh-h3: 1.06; --lh-lead: 1.45; --lh-texte: 1.6;

  /* ---------- Espacements (base 4) ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;
  --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px; --sp-13: 128px; --sp-14: 160px;
  --gut: clamp(22px, 4.4vw, 64px);                /* marge latérale : 22 (téléphone) → 64 (1440) */
  --section-y: clamp(96px, 11vw, 176px);          /* respiration entre deux blocs : 96 → 158 */
  --wrap: 1240px;                                 /* largeur de contenu */
  --wrap-texte: 700px;                            /* colonne de lecture */

  /* ---------- Rayons (trois, pas un de plus) ---------- */
  --r-sm: 12px;      /* cadre intérieur, champ */
  --r-card: 20px;    /* toute carte, photo, panneau de verre */
  --r-pill: 999px;   /* boutons, pastilles */

  /* ---------- Ombres (noires, jamais colorées) ---------- */
  --arete: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(255,255,255,.04);
  --ombre-verre: 0 1px 2px rgba(0,0,0,.35), 0 18px 40px -12px rgba(0,0,0,.55), 0 50px 90px -30px rgba(0,0,0,.5);
  --ombre-photo: 0 2px 4px rgba(0,0,0,.4), 0 30px 60px -20px rgba(0,0,0,.7), 0 70px 120px -40px rgba(0,0,0,.6);
  --ombre-bouton: 0 1px 1px rgba(0,0,0,.45), 0 12px 30px -8px rgba(0,0,0,.65);

  /* ---------- Verre (liquid glass) ---------- */
  --verre-fond: linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.03) 40%, rgba(255,255,255,.018) 100%), rgba(20,21,24,.38);
  --verre-fond-fonce: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 45%, rgba(0,0,0,.08) 100%), rgba(10,10,12,.62);
  --verre-flou: blur(20px) saturate(165%);
  --verre-lisere: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.13) 22%, rgba(255,255,255,0) 46%, rgba(255,255,255,0) 72%, rgba(255,255,255,.16) 100%);

  /* ---------- Mouvement ---------- */
  --ease: cubic-bezier(.22,1,.36,1);     /* la courbe de la page (arrivée douce) */
  --ease-io: cubic-bezier(.65,0,.35,1);  /* aller-retour (reflets) */
  --d-1: .18s; --d-2: .32s; --d-3: .6s; --d-4: .9s; --d-5: 1.4s;

  /* ---------- Grain (texture de toute la page) ---------- */
  --grain: 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='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-opacite: .07;

  color-scheme: dark;
}

/* ==========================================================================================
   Recettes (classes « pr- », à poser sur un élément en position relative)
   ========================================================================================== */

/* Panneau de verre : fond fumé, flou d'arrière-plan, arête haute qui prend la lumière, liseré spéculaire,
   lumière fixe venue d'en haut à gauche (retour n°49 : aucun reflet ne suit la souris). */
.pr-verre{position:relative;isolation:isolate;border-radius:var(--r-card);background:var(--verre-fond);
  -webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);
  box-shadow:var(--arete),inset 0 0 0 1px rgba(255,255,255,.06),var(--ombre-verre)}
.pr-verre.pr-fonce{background:var(--verre-fond-fonce)}
.pr-verre::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:var(--verre-lisere);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pr-verre::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(260px circle at 28% -10%,rgba(255,255,255,.07),transparent 62%)}

/* Pastille de verre (étiquettes posées sur une photo, puces de l'équipe, barre épinglée) */
.pr-pastille{position:relative;display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04)),rgba(12,12,14,.42);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.2),inset 0 0 0 1px rgba(255,255,255,.09),0 6px 16px -6px rgba(0,0,0,.55)}

/* Bouton principal : pilule claire, bombée (arête haute blanche, pied plus sombre) ; au survol, seule l'icône avance */
.pr-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:60px;padding:0 28px 0 8px;border:0;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#ffffff 0%,#f1efee 48%,#dcd8d6 100%);color:#0b0b0c;
  font:var(--fw-bouton) 16.5px/1 var(--font);letter-spacing:-.012em;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.4),var(--ombre-bouton);
  transition:transform var(--d-1) var(--ease),box-shadow var(--d-2) var(--ease)}
.pr-btn .pr-ico{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:radial-gradient(120% 120% at 30% 20%,#2a2b2f,#0b0b0d 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 6px rgba(0,0,0,.35);transition:transform var(--d-2) var(--ease)}
.pr-btn:hover .pr-ico{transform:translateX(2px) scale(1.04)}
.pr-btn:active{transform:scale(.985)}

/* Étiquette de section : point rouge + texte court, même police, jamais dans une pilule */
.pr-oeil{display:inline-flex;align-items:center;gap:10px;margin:0;font:var(--fw-moyen) var(--fs-label)/1.2 var(--font);
  letter-spacing:var(--ls-label);color:var(--ink-3);font-variant-numeric:tabular-nums}
.pr-oeil::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 3px rgba(var(--red-rgb),.14)}

/* Couche de grain (à poser en position fixe sur body::after, ou dans une section) */
.pr-grain{position:absolute;inset:0;pointer-events:none;background-image:var(--grain);background-size:240px 240px;opacity:var(--grain-opacite)}

/* Filet qui s'éteint aux deux bouts (séparateur) */
.pr-filet{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line-3) 20%,var(--line-3) 80%,transparent)}