/* BrutalBoost · LA MATIÈRE
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Arbitré le 2026-08-20 · REMPLACE la règle « zéro ombre, aplats stricts ».
 *
 * Le skeuomorphisme qui vieillit mal imite le PLASTIQUE BRILLANT : gros
 * dégradés, reflets bombés, ombres portées molles. Celui qui reste élégant
 * imite une MATIÈRE DURE sous une lumière unique.
 *
 * Or l'app a déjà cette lumière : les photos d'exercice sont éclairées par une
 * seule source latérale dure, en studio. Toute la règle tient en une phrase ·
 * L'INTERFACE EST ÉCLAIRÉE COMME LE STUDIO : une arête haute qui capte la
 * lumière, une ombre basse, jamais de brillance.
 *
 * Cinq matières, un mouvement :
 *   1 · fonte        les charges sont des disques · la charge choisie S'ENFONCE
 *   2 · moleté       le grip d'une barre, sur ce qu'on EMPOIGNE, et rien d'autre
 *   3 · Volt vivant  le Volt n'est plus peint, il ÉCLAIRE ce qui l'entoure
 *   4 · gravure      les chiffres sont FRAPPÉS dans la plaque
 *   5 · caoutchouc   les cartes sont DENSES, jamais brillantes
 *   6 · la masse     ce qui est lourd résiste à la pression et revient avec inertie
 *
 * Chargé APRÈS le <style> de chaque page · à spécificité égale, le dernier
 * gagne, donc ce fichier peut habiller sans que rien ne soit réécrit ailleurs.
 * Aucune propriété de MISE EN PAGE ici (ni taille, ni marge, ni position) : les
 * écrans ont été mesurés sur onze iPhone, la matière ne doit rien déplacer.
 */

/* ═══ 0 · LE GRAIN ═══════════════════════════════════════════════════════════
   Un bruit à 4 % que personne ne remarque consciemment · il suffit à retirer
   l'aspect « aplat imprimé ». Posé une seule fois sur la page, jamais sur les
   composants : trente pseudo-éléments coûteraient plus cher qu'un seul. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ═══ 1 · LA GRAVURE ═════════════════════════════════════════════════════════
   Une ombre d'un pixel au-dessus, une lumière d'un pixel au-dessous : le texte
   est frappé DANS la plaque. Le procédé le plus discret du lot, et celui qui
   change le plus l'impression d'ensemble. */
h1, .kpi b, .stepper b, .gros, .heros .gros, .f-compteur, .r-compte,
.w-kpi b, .bilan .gros, .reps .n, #rReps, .duel b, .f-echec b {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .09);
}
.titre-sec, .lab, .kpi span, .w-kpi span, .quoi, .sous, .sur {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
/* le Volt ne se grave pas, il rayonne · une lumière ne s'enfonce pas */
.kpi b.volt, .w-kpi.volt b, .f-compteur b, .heros .gros b, .ecart {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .7), 0 0 16px rgba(204, 255, 0, .45);
}

/* ═══ 2 · LE CAOUTCHOUC ══════════════════════════════════════════════════════
   Les cartes deviennent denses, comme un haltère revêtu : un dégradé sourd,
   l'arête haute qui capte la lumière rasante, la base qui s'enfonce dans le
   noir. Jamais un reflet. */
.widget, .carte, .tl-carte, .kpi, .ligne, .suivant, .serie, .panneau,
.slider-bloc, .offre, .recap, .vis, .plaque {
  background-image: linear-gradient(rgba(255, 255, 255, .035), rgba(0, 0, 0, .22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .8);
}
/* la carte studio garde son noir profond · c'est un fond de photo, pas un objet */
.carte-exo, .photo, .c-photo, .fil-msg, .msg .bulle { background-image: none; box-shadow: none; }
.msg .bulle {
  background-image: linear-gradient(rgba(255, 255, 255, .05), rgba(0, 0, 0, .2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .7);
}
/* la série en cours est SOULEVÉE, pas seulement bordée */
.serie.courante {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .8),
              0 0 20px rgba(204, 255, 0, .18);
}

/* ═══ 3 · LA FONTE ═══════════════════════════════════════════════════════════
   Les charges sont des disques d'haltère : métal sombre, arête biseautée,
   assise noire. La charge choisie NE S'ALLUME PAS · elle s'ENFONCE, comme un
   disque qu'on pose. C'est la seule métaphore du lot qui dise quelque chose de
   vrai sur le geste. */
.choix.charge {
  background-image: linear-gradient(#242424, #141414 55%, #0D0D0D);
  border-color: #2C2C2C; color: #9A9A93;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 3px rgba(0, 0, 0, .9),
              0 1px 0 rgba(0, 0, 0, .8);
}
.choix.charge.on {
  background: linear-gradient(#0E0E0E, #1A1A1A);
  border-color: rgba(204, 255, 0, .55); color: var(--ink);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 1), inset 0 -1px 0 rgba(255, 255, 255, .09),
              0 0 0 1px rgba(204, 255, 0, .35);
}
/* les tuiles de phase et de matériel · même fonte, échelle plus petite */
.puce {
  background-image: linear-gradient(#202020, #121212);
  border-color: #2C2C2C;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 2px rgba(0, 0, 0, .85);
}
.puce.on {
  background: linear-gradient(#D9FF3D, #CCFF00 45%, #A9D000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 2px rgba(0, 0, 0, .25),
              0 0 16px rgba(204, 255, 0, .35);
}

/* ═══ 4 · LE VOLT VIVANT ═════════════════════════════════════════════════════
   Le Volt cesse d'être une peinture : il éclaire. Le bouton a un dessus plus
   clair (la lumière tombe dessus), une assise plus sombre, et il projette sa
   lueur autour de lui.
   ═══ 5 · LE MOLETÉ ══════════════════════════════════════════════════════════
   Par-dessus, le grip d'une barre : deux séries de diagonales à 7 %, réservées
   à CE QU'ON EMPOIGNE · le bouton d'action, et rien d'autre. */
.cta:not(.calme), .creux-plein, #payer, .puce.on {
  background-image:
    repeating-linear-gradient(48deg, rgba(0, 0, 0, .06) 0 .5px, transparent .5px 4px),
    repeating-linear-gradient(-48deg, rgba(0, 0, 0, .06) 0 .5px, transparent .5px 4px),
    linear-gradient(#DCFF4A, #CCFF00 42%, #A8CF00);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 2px rgba(0, 0, 0, .28),
              0 0 22px rgba(204, 255, 0, .4), 0 2px 0 rgba(0, 0, 0, .55);
}
/* le bouton calme est de la fonte, pas de la lumière */
.cta.calme {
  background-image: linear-gradient(#1E2016, #101206);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .85),
              0 1px 0 rgba(0, 0, 0, .6);
}
/* les jauges deviennent des tubes qui se chargent · reflet en haut, halo autour */
.jauge {
  background-image: linear-gradient(#090B04, #14170C);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .95), inset 0 -1px 0 rgba(255, 255, 255, .05);
  position: relative;
}
.jauge::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 42%;
  background: linear-gradient(rgba(255, 255, 255, .14), transparent);
  pointer-events: none; border-radius: inherit;
}
.jauge .plein, .jauge i {
  background-image: linear-gradient(90deg, #8FBE00, #CCFF00 72%, #E4FF77);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.jauge.pret .plein { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 16px rgba(204, 255, 0, .8); }
/* la pastille Volt et la pilule Brutal · allumées, donc elles rayonnent */
.pilule[aria-pressed="true"], .statut, .barre.brutal {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 18px rgba(204, 255, 0, .4);
}

/* ═══ 6 · LA MASSE ═══════════════════════════════════════════════════════════
   La matière n'est pas que dans les pixels · elle est dans le MOUVEMENT.
   Ce qui est lourd résiste à la pression (descente amortie) et revient avec
   de l'inertie (retour long, légèrement élastique). Zéro coût de rendu, et
   ça dit « lourd » mieux qu'un dégradé. */
.cta, .choix, .puce, .serie, .kpi, .ligne, .pilule, .vis, .rond, .info {
  transition: transform .34s cubic-bezier(.22, 1.15, .36, 1),
              box-shadow .34s ease, background-color .2s, border-color .2s, color .2s;
}
.cta:active { transform: translateY(2px) scale(.994); transition-duration: .11s; }
.choix:active, .puce:active { transform: translateY(1.5px) scale(.985); transition-duration: .1s; }
.serie:active, .ligne:active, .vis:active { transform: scale(.988); transition-duration: .1s; }
.rond:active, .info:active { transform: scale(.9); transition-duration: .08s; }
/* la charge qu'on pose s'enfonce plus lentement qu'elle ne revient · c'est le
   poids du disque, pas la vitesse du doigt */
.choix.charge:active { transform: translateY(2.5px); transition-duration: .16s; }

@media (prefers-reduced-motion: reduce) {
  .cta, .choix, .puce, .serie, .kpi, .ligne, .pilule, .vis, .rond, .info { transition: none; }
  .cta:active, .choix:active, .puce:active, .serie:active,
  .ligne:active, .vis:active, .rond:active, .info:active { transform: none; }
}