/* ============================================================================
   BOUGE — tokens.css
   La seule source de vérité pour les couleurs, tailles, espacements, rayons,
   ombres et courbes. Aucun composant n'écrit une valeur en dur.
   La charte qui explique ces choix : docs/DESIGN.md.

   Les contrastes annotés `@contraste` sont recalculés depuis ce fichier par
   `node scripts/verifier-contrastes.mjs`, qui échoue si un rapport est faux
   ou tombe sous le seuil annoncé. Ne jamais changer une couleur sans relancer
   ce script.

   Niveaux employés : AAA ≥ 7 · AA ≥ 4,5 (texte courant) ·
   AA-grand ≥ 3 (texte ≥ 24 px, ou ≥ 19 px gras, et contours de composants) ·
   decoratif ≥ 1 (ne porte jamais d'information).
   ============================================================================ */

/* ---------- 1. Police : Bricolage Grotesque variable (OFL), locale ---------- */
/* Axe des graisses réduit à 400-700 (les graisses employées vont de 450 à 700) et fractions
   retirées : -8,3 Ko au premier lancement (v0.5.1, docs/DESIGN.md § Police et poids). */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/BricolageGrotesque-variable.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 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/BricolageGrotesque-variable-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;
}

/* ---------- 2. Jetons communs aux deux thèmes ---------- */

:root {
  color-scheme: light dark;

  /* --- Palette de marque, invariante. Ces cinq couleurs SONT BOUGE. --- */
  --couleur-encre: #101418;
  --couleur-sable: #F4EFE6;
  --couleur-corail: #FF5A3C;
  --couleur-menthe: #2ED3A5;
  --couleur-jaune-go: #FFD43B;

  /* Déclinaisons lisibles : la marque telle quelle ne passe pas AA comme
     texte sur fond clair (corail 2,70 · menthe 1,67). Ces deux variantes
     assombries gardent la teinte et passent AA — elles ne servent QUE de
     texte ou d'icône sur fond clair, jamais d'aplat de marque. */
  --couleur-corail-fonce: #C43315;
  --couleur-menthe-fonce: #136A53;
  /* Rouge d'alerte : plus sombre et plus rouge que le corail, pour rester
     distinguable de l'accent même en niveaux de gris. */
  --couleur-brique: #96200F;
  --couleur-abricot: #FF8A70;

  /* --- Typographie : une famille, cinq tailles --- */
  --police: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --chiffres: tabular-nums lining-nums;

  /* taille / graisse / opsz / interligne / interlettrage
     1rem = 17 px : la racine est posée par `base.css`, comme dans la maquette de référence.
     Les valeurs ci-dessous sont donc des RAPPORTS, pas des pixels — `--taille-4` vaut 17 px,
     `--taille-2` 29,75 px, `--taille-5` 13,8 px. Changer la racine change toute l'échelle
     d'un coup, ce qui est le but : les rapports dessinés restent intacts. */
  --taille-1: 3.5rem;      --graisse-1: 700; --opsz-1: 96; --ligne-1: 1;    --lettre-1: -0.025em;
  --taille-2: 1.75rem;     --graisse-2: 700; --opsz-2: 40; --ligne-2: 1.15; --lettre-2: -0.02em;
  --taille-3: 1.25rem;     --graisse-3: 600; --opsz-3: 20; --ligne-3: 1.25; --lettre-3: -0.01em;
  --taille-4: 1rem;        --graisse-4: 450; --opsz-4: 16; --ligne-4: 1.45; --lettre-4: 0;
  --taille-5: 0.8125rem;   --graisse-5: 550; --opsz-5: 13; --ligne-5: 1.35; --lettre-5: 0.005em;
  /* Deux tailles dérivées de l'échelle, jamais indépendantes d'elle :
     le compte à rebours 3-2-1 et le chronomètre de séance. */
  --taille-compte: calc(var(--taille-1) * 2.4);   /* 142,8 px */
  --taille-chrono: calc(var(--taille-1) * 1.15);  /* 68,4 px */

  /* --- Espacements : grille de 4 --- */
  --espace-4: 4px;
  --espace-8: 8px;
  --espace-12: 12px;
  --espace-16: 16px;
  --espace-24: 24px;
  --espace-32: 32px;
  --espace-48: 48px;
  --marge-ecran: var(--espace-16);

  /* --- Hauteurs et largeurs de référence --- */
  /* Minimum absolu d'une zone touchable. 48 et non 44 : c'est la règle écrite de la maquette
     de référence (apercu/README.md), et le passage a coûté ZÉRO pixel sur la fiche — mesuré,
     la décision et ses chiffres sont dans docs/DESIGN.md § Cible tactile. */
  --cible-tactile: 48px;
  --hauteur-champ: 48px;
  --hauteur-bouton: 52px;
  --hauteur-nav: 60px;
  --hauteur-go: 96px;      /* le bouton GO ne descend jamais en dessous */
  --diametre-chrono: 240px;
  --diametre-chrono-court: 200px; /* séance sur un écran de 740 px de haut ou moins */
  --perso-seance-max: 240px;      /* hauteur maximale du personnage pendant la séance */
  --vignette-exercice: 88px;      /* largeur de la pose clé dans la bibliothèque */
  --diametre-portrait: 48px;
  --largeur-colonne: 560px;
  --largeur-max: 1120px;
  --epaisseur-anneau: 12px; /* trait du chronomètre circulaire */

  /* --- Rayons --- */
  --rayon-s: 8px;      /* champs, puces, badges */
  --rayon-m: 14px;     /* boutons secondaires */
  --rayon-carte: 20px; /* cartes : séance du jour, coach, bilan */
  --rayon-go: 28px;    /* bouton GO */
  --rayon-rond: 999px;

  /* --- Durées --- */
  --duree-1: 90ms;   /* pression d'un bouton */
  --duree-2: 160ms;  /* changement d'état */
  --duree-3: 220ms;  /* sortie d'écran */
  --duree-4: 320ms;  /* entrée d'écran, barre de progression */
  --duree-5: 460ms;  /* carte, portrait de coach */
  --duree-6: 520ms;  /* ressort du GO */
  --duree-anneau: 1000ms; /* le chronomètre avance d'une seconde : pas de lissage au-delà */

  /* --- Courbes --- */
  --courbe-sortie: cubic-bezier(0.2, 0, 0, 1);  /* apparition, décélération */
  --courbe-entree: cubic-bezier(0.4, 0, 1, 1);  /* disparition, accélération */
  --courbe-lineaire: linear;                    /* chronomètre : le temps ne s'assouplit pas */
  /* Ressorts calculés par simulation d'un oscillateur amorti (25 points).
     ζ 0,55 · ω 22 · 520 ms · dépassement 12,6 % · posé à 88 % — le GO. */
  --ressort-go: linear(0, 0.094 4%, 0.307 8%, 0.554 13%, 0.777 17%, 0.948 21%, 1.058 25%,
    1.113 29%, 1.126 33%, 1.112 38%, 1.084 42%, 1.053 46%, 1.025 50%, 1.005 54%, 0.992 58%,
    0.985 63%, 0.984 67%, 0.986 71%, 0.99 75%, 0.994 79%, 0.997 83%, 1 88%, 1.001 92%,
    1.002 96%, 1);
  /* ζ 0,90 · ω 18 · 460 ms · dépassement 0,2 % · posé à 71 % — cartes, portraits. */
  --ressort-doux: linear(0, 0.048 4%, 0.158 8%, 0.291 13%, 0.424 17%, 0.547 21%, 0.652 25%,
    0.74 29%, 0.809 33%, 0.864 38%, 0.905 42%, 0.935 46%, 0.957 50%, 0.973 54%, 0.984 58%,
    0.991 63%, 0.996 67%, 0.998 71%, 1 75%, 1.001 79%, 1.001 83%, 1.002 88%, 1.001 92%,
    1.001 96%, 1);

  /* --- Plans --- */
  --plan-contenu: 0;
  --plan-nav: 10;
  --plan-bandeau: 15;
  --plan-voile: 20;
  --plan-feuille: 30;
  --plan-toast: 40;
  --plan-compte: 60;   /* le compte à rebours 3-2-1 couvre l'écran de séance */
  --plan-intro: 9999;  /* l'intro du studio est au-dessus de tout */

  /* Nacre de l'intro Vakana Studio : couleur du STUDIO, pas de l'app.
     Elle ne suit ni le thème clair ni le thème sombre. */
  --intro-nacre: #F5F1E8;
}

/* Repli si `linear()` manque (WebView Android antérieure à Chrome 113) :
   même durée, courbe douce, aucun rebond. */
@supports not (animation-timing-function: linear(0, 1)) {
  :root {
    --ressort-go: cubic-bezier(0.2, 0.9, 0.25, 1);
    --ressort-doux: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

/* ---------- 3. Thème clair (par défaut) ----------

   @contraste clair --texte / --fond = 16.15 AAA
   @contraste clair --texte / --surface = 17.45 AAA
   @contraste clair --texte / --surface-haute = 18.50 AAA
   @contraste clair --texte-doux / --fond = 6.77 AA
   @contraste clair --texte-doux / --surface = 7.31 AAA
   @contraste clair --texte-doux / --surface-haute = 7.75 AAA
   @contraste clair --accent / --fond = 4.79 AA
   @contraste clair --accent / --surface = 5.17 AA
   @contraste clair --accent / --surface-haute = 5.48 AA
   @contraste clair --sur-accent / --accent = 5.48 AA
   @contraste clair --succes / --fond = 5.70 AA
   @contraste clair --succes / --surface = 6.16 AA
   @contraste clair --succes / --surface-haute = 6.53 AA
   @contraste clair --sur-succes / --succes = 6.53 AA
   @contraste clair --alerte / --fond = 7.30 AAA
   @contraste clair --alerte / --surface = 7.89 AAA
   @contraste clair --alerte / --surface-haute = 8.37 AAA
   @contraste clair --sur-alerte / --alerte = 8.37 AAA
   @contraste clair --sur-go / --go = 12.98 AAA
   @contraste clair --go-contour / --go = 12.98 AAA
   @contraste clair --go-contour / --fond = 16.15 AAA
   @contraste clair --go / --fond = 1.24 decoratif
   @contraste clair --accent / --muscle-repos = 3.10 AA-grand
   @contraste clair --muscle-secondaire / --muscle-repos = 1.45 decoratif
   @contraste clair --muscle-repos / --surface = 1.67 decoratif
   @contraste clair --muscle-secondaire / --surface = 2.42 decoratif
   @contraste clair --silhouette / --surface = 1.34 decoratif

   Les deux paires critiques de la marque, vérifiées et non supposées :
   le jaune GO (#FFD43B) et l'encre (#101418) sont à 12,98 dans les deux sens
   — l'étiquette « GO » en encre sur le jaune passe AAA, et l'inverse aussi.
   En revanche le jaune GO sur le sable du fond ne fait que 1,24 : le bouton
   ne se détacherait pas seul. D'où `--go-contour`, un liseré d'encre de 2 px
   présent UNIQUEMENT en thème clair. En thème sombre le jaune sur l'encre
   fait 12,98 : le liseré disparaît.
   `--bordure` (1,24 sur le fond) ne sépare que visuellement : elle ne dit
   jamais à elle seule qu'un élément est actif, sélectionné ou en erreur.

   CARTE DES MUSCLES — les trois jetons `--muscle-*` et `--silhouette` sont des
   APLATS sur un dessin, ils ne portent jamais de texte. Un muscle principal se
   détache d'un muscle au repos (3,10 en clair, 3,21 en sombre) ; un muscle
   secondaire, non (1,45 en clair, 2,17 en sombre). C'est assumé et compensé,
   pas ignoré : le rôle de chaque muscle est ÉCRIT dans le titre de son groupe
   de légende (« Muscles principaux » / « Aussi sollicités »), et appuyer sur un
   nom isole ce muscle sur le dessin. La couleur ne porte jamais seule
   l'information (docs/DESIGN.md). Un vrai écart de teinte entre secondaire et
   repos reste à trancher avec la direction artistique. */

:root {
  --fond: #F4EFE6;          /* sable */
  --surface: #FBF8F2;       /* carte posée sur le sable */
  --surface-haute: #FFFFFF; /* feuille, dialogue */
  --texte: #101418;         /* encre */
  --texte-doux: #48545F;    /* ardoise */
  --bordure: #DFD8CC;
  --accent: #C43315;        /* corail lisible */
  --sur-accent: #FFFFFF;
  --succes: #136A53;        /* menthe lisible */
  --sur-succes: #FFFFFF;
  --alerte: #96200F;        /* brique */
  --sur-alerte: #FFFFFF;
  --go: #FFD43B;
  --sur-go: #101418;
  --go-contour: #101418;
  --serie: #C43315;         /* la flamme de la série reprend l'accent */
  /* Carte des muscles (assets/muscles.svg) : repos, rôle secondaire, silhouette. */
  --muscle-repos: #C9C2B6;
  --muscle-secondaire: #E58A70;
  --silhouette: #DFD8CC;

  --voile: rgb(16 20 24 / 0.42);
  --piste: rgb(16 20 24 / 0.10);        /* fond d'une barre ou d'un anneau */
  --pastille-vide: rgb(16 20 24 / 0.08); /* jour sans séance */
  --pression: rgb(16 20 24 / 0.06);      /* survol et appui */

  --ombre-carte: 0 1px 0 var(--bordure), 0 10px 24px -18px rgb(16 20 24 / 0.35);
  --ombre-go: 0 6px 0 -1px rgb(16 20 24 / 0.9), 0 14px 28px -14px rgb(16 20 24 / 0.45);
  --ombre-flottante: 0 12px 32px -16px rgb(16 20 24 / 0.4);
  --bord-eleve: none;
}

/* ---------- 3 bis. Le personnage animé (src/ui/personnage.js) ----------

   Le corps, les tenues des quatre coachs et la chaleur des muscles ne changent
   pas avec le thème : c'est le même personnage. Seule la scène (fond, sol,
   tapis, halo, ombre) et les pastilles de souffle ont une version sombre.
   Les teintes `-l0` / `-l1` d'une tenue habillent le bras lointain : la teinte
   claire × 0,85, canal par canal (calcul du prototype validé).

   @contraste clair --perso-inspire-texte / --perso-inspire-fond = 7.85 AAA
   @contraste clair --perso-expire-texte / --perso-expire-fond = 7.38 AAA
   @contraste clair --perso-rythme-texte / --perso-rythme-fond = 8.78 AAA
   @contraste clair --perso-respire-texte / --perso-respire-fond = 6.32 AA
   @contraste clair --texte / --perso-scene = 17.45 AAA
   @contraste sombre --perso-inspire-texte / --perso-inspire-fond = 9.67 AAA
   @contraste sombre --perso-expire-texte / --perso-expire-fond = 8.71 AAA
   @contraste sombre --perso-rythme-texte / --perso-rythme-fond = 9.48 AAA
   @contraste sombre --perso-respire-texte / --perso-respire-fond = 5.88 AA
   @contraste sombre --texte / --perso-scene = 14.84 AAA */

:root {
  --perso-contour: #1E1410;
  --perso-peau-0: #8E5534;
  --perso-peau-1: #B87650;
  --perso-peau-2: #CF915F;
  --perso-peau-loin-0: #6E4027;
  --perso-peau-loin-1: #96603F;
  --perso-peau-loin-2: #AC774F;
  --perso-short-0: #1F2830;
  --perso-short-1: #2B3640;
  --perso-short-2: #3D4A57;
  --perso-short-loin-0: #182027;
  --perso-short-loin-1: #26303A;
  --perso-chaussure-0: #CFC7BA;
  --perso-chaussure-1: #F4EFE6;
  --perso-chaussure-2: #FFFFFF;
  --perso-chaussure-loin-0: #B5AD9F;
  --perso-chaussure-loin-1: #DCD5C9;
  --perso-cheveux-0: #1E120C;
  --perso-cheveux-1: #3A2519;
  --perso-chaussette: #FBFAF7;
  --perso-chaussette-loin: #D8D2C6;
  --perso-lacets: #2B3640;
  --perso-lisere: #FFFFFF;
  --perso-reflet: #FFFFFF;
  --perso-ceinture: #4A5866;
  --perso-joue: #E8735A;
  --perso-sourcil: #1E120C;
  --perso-bouche: #5A2A1E;
  --perso-oreille: #B0704A;
  --perso-oreille-face: #B87650;
  --perso-nez: #8E5534;
  --perso-abdos-lignes: rgb(30 20 16 / 0.35);
  /* Chaleur d'un muscle : lue par le moteur, interpolée selon l'effort. Hex obligatoire. */
  --perso-muscle-faible: #FFD43B;
  --perso-muscle-moyen: #FF5A3C;
  --perso-muscle-fort: #E5281A;

  --perso-tahina-0: #C43315;
  --perso-tahina-1: #FF5A3C;
  --perso-tahina-2: #FF8A6E;
  --perso-tahina-l0: #A72B12;
  --perso-tahina-l1: #D94D33;
  --perso-marc-0: #136A53;
  --perso-marc-1: #2ED3A5;
  --perso-marc-2: #7BE8C8;
  --perso-marc-l0: #105A47;
  --perso-marc-l1: #27B38C;
  --perso-aicha-0: #C99A00;
  --perso-aicha-1: #FFD43B;
  --perso-aicha-2: #FFE68A;
  --perso-aicha-l0: #AB8300;
  --perso-aicha-l1: #D9B432;
  --perso-liam-0: #101418;
  --perso-liam-1: #26303A;
  --perso-liam-2: #44525F;
  --perso-liam-l0: #0E1114;
  --perso-liam-l1: #202931;

  --perso-scene: #FBF8F2;
  --perso-sol: #EFE7DA;
  --perso-tapis: #E2D8C8;
  --perso-tapis-bord: #CFC3B0;
  --perso-spot: rgb(255 255 255 / 0.95);
  --perso-ombre: rgb(16 20 24 / 0.28);
  --perso-souffle: #8FB2C4;
  --perso-inspire-fond: #DCEBF2;
  --perso-inspire-texte: #1D4A5E;
  --perso-expire-fond: #FFE3DC;
  --perso-expire-texte: #8A2410;
  --perso-rythme-fond: #D5F5EA;
  --perso-rythme-texte: #0E4A3A;
  --perso-respire-fond: #EFE7DA;
  --perso-respire-texte: #48545F;
}

/* ---------- 4. Thème sombre ----------

   @contraste sombre --texte / --fond = 16.15 AAA
   @contraste sombre --texte / --surface = 14.84 AAA
   @contraste sombre --texte / --surface-haute = 13.35 AAA
   @contraste sombre --texte-doux / --fond = 7.56 AAA
   @contraste sombre --texte-doux / --surface = 6.95 AA
   @contraste sombre --texte-doux / --surface-haute = 6.25 AA
   @contraste sombre --accent / --fond = 5.97 AA
   @contraste sombre --accent / --surface = 5.49 AA
   @contraste sombre --accent / --surface-haute = 4.94 AA
   @contraste sombre --sur-accent / --accent = 5.97 AA
   @contraste sombre --succes / --fond = 9.67 AAA
   @contraste sombre --succes / --surface = 8.89 AAA
   @contraste sombre --succes / --surface-haute = 7.99 AAA
   @contraste sombre --sur-succes / --succes = 9.67 AAA
   @contraste sombre --alerte / --fond = 8.03 AAA
   @contraste sombre --alerte / --surface = 7.38 AAA
   @contraste sombre --alerte / --surface-haute = 6.64 AA
   @contraste sombre --sur-alerte / --alerte = 8.03 AAA
   @contraste sombre --sur-go / --go = 12.98 AAA
   @contraste sombre --go / --fond = 12.98 AAA
   @contraste sombre --go / --surface = 11.93 AAA
   @contraste sombre --bordure / --fond = 1.48 decoratif
   @contraste sombre --accent / --muscle-repos = 3.21 AA-grand
   @contraste sombre --muscle-secondaire / --muscle-repos = 2.17 decoratif
   @contraste sombre --muscle-repos / --surface = 1.71 decoratif
   @contraste sombre --muscle-secondaire / --surface = 3.71 AA-grand
   @contraste sombre --silhouette / --surface = 1.36 decoratif

   En sombre la marque revient telle quelle : le corail #FF5A3C tient AA
   jusque sur la surface la plus claire (4,94) et la menthe #2ED3A5 est à
   7,99. Rien n'est assombri, rien n'est éclairci « pour faire joli ». */

/* Deux orthographes acceptées pour le même thème : `sombre` (nom canonique du
   projet, tout est en français) et `dark` (nom que pose déjà la coquille).
   Les faire cohabiter coûte une ligne ; les laisser diverger produirait une
   panne muette — l'app basculerait en sombre côté logique et resterait claire
   côté feuille de style, sans la moindre erreur en console. */
[data-theme="sombre"],
[data-theme="dark"] {
  --fond: #101418;
  --surface: #171D22;
  --surface-haute: #1F262D;
  --texte: #F4EFE6;
  --texte-doux: #9DA7B0;
  --bordure: #2C353D;
  --accent: #FF5A3C;
  --sur-accent: #101418;
  --succes: #2ED3A5;
  --sur-succes: #101418;
  --alerte: #FF8A70;
  --sur-alerte: #101418;
  --go: #FFD43B;
  --sur-go: #101418;
  --go-contour: transparent;
  --serie: #FF5A3C;
  --muscle-repos: #3A444D;
  --muscle-secondaire: #B85A44;
  --silhouette: #2C353D;

  --voile: rgb(4 6 8 / 0.62);
  --piste: rgb(244 239 230 / 0.12);
  --pastille-vide: rgb(244 239 230 / 0.09);
  --pression: rgb(244 239 230 / 0.07);

  --ombre-carte: none;
  --ombre-go: 0 14px 28px -16px rgb(255 212 59 / 0.45);
  --ombre-flottante: 0 12px 32px -16px rgb(0 0 0 / 0.6);
  --bord-eleve: 1px solid var(--bordure);

  --perso-scene: #171D22;
  --perso-sol: #12171B;
  --perso-tapis: #222B33;
  --perso-tapis-bord: #2F3A44;
  --perso-spot: rgb(70 90 105 / 0.55);
  --perso-ombre: rgb(0 0 0 / 0.55);
  --perso-souffle: #CFE3EC;
  --perso-inspire-fond: #1E3540;
  --perso-inspire-texte: #CFE3EC;
  --perso-expire-fond: #3A211B;
  --perso-expire-texte: #FFB4A3;
  --perso-rythme-fond: #143A30;
  --perso-rythme-texte: #9FF0D6;
  --perso-respire-fond: #222B33;
  --perso-respire-texte: #9DA7B0;
}

/* Le même bloc, appliqué quand le téléphone est en sombre et que l'app n'a
   pas d'avis contraire. Ces deux blocs doivent rester identiques :
   `verifier-contrastes.mjs` échoue s'ils divergent. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]):not([data-theme="light"]) {
    --fond: #101418;
    --surface: #171D22;
    --surface-haute: #1F262D;
    --texte: #F4EFE6;
    --texte-doux: #9DA7B0;
    --bordure: #2C353D;
    --accent: #FF5A3C;
    --sur-accent: #101418;
    --succes: #2ED3A5;
    --sur-succes: #101418;
    --alerte: #FF8A70;
    --sur-alerte: #101418;
    --go: #FFD43B;
    --sur-go: #101418;
    --go-contour: transparent;
    --serie: #FF5A3C;
    --muscle-repos: #3A444D;
    --muscle-secondaire: #B85A44;
    --silhouette: #2C353D;

    --voile: rgb(4 6 8 / 0.62);
    --piste: rgb(244 239 230 / 0.12);
    --pastille-vide: rgb(244 239 230 / 0.09);
    --pression: rgb(244 239 230 / 0.07);

    --ombre-carte: none;
    --ombre-go: 0 14px 28px -16px rgb(255 212 59 / 0.45);
    --ombre-flottante: 0 12px 32px -16px rgb(0 0 0 / 0.6);
    --bord-eleve: 1px solid var(--bordure);

    --perso-scene: #171D22;
    --perso-sol: #12171B;
    --perso-tapis: #222B33;
    --perso-tapis-bord: #2F3A44;
    --perso-spot: rgb(70 90 105 / 0.55);
    --perso-ombre: rgb(0 0 0 / 0.55);
    --perso-souffle: #CFE3EC;
    --perso-inspire-fond: #1E3540;
    --perso-inspire-texte: #CFE3EC;
    --perso-expire-fond: #3A211B;
    --perso-expire-texte: #FFB4A3;
    --perso-rythme-fond: #143A30;
    --perso-rythme-texte: #9FF0D6;
    --perso-respire-fond: #222B33;
    --perso-respire-texte: #9DA7B0;
  }
}

/* ---------- 5. Points de rupture ---------- */

@media (min-width: 480px) {
  :root {
    --marge-ecran: var(--espace-24);
  }
}

@media (min-width: 768px) {
  :root {
    --marge-ecran: var(--espace-32);
    --diametre-chrono: 300px;
  }
}