/* ==========================================================================
   Motio — espace web
   Direction : le carnet d'entraînement. Fond crème, cartes claires posées
   dessus, olive du logo en accent, et le chronomètre comme motif directeur
   (emblème animé, graduations de cadran sous les titres).
   ========================================================================== */

:root{
  color-scheme:light;
  /* couleurs de l'application */
  --charbon:#171A11;
  --charbon-2:#242B1B;
  --olive:#4F6021;
  --olive-clair:#A9C25E;
  --bronze:#8C6B2F;

  /* surfaces — valeurs exactes de motioLight (Theme.kt) */
  --creme:#F4F3EE;
  --creme-2:#E5E8D8;
  --carte:#FFFFFF;
  --trait:#E3E0D3;
  --encre:#23261C;
  --encre-2:#6E7160;
  --alerte:#8C3B24;

  /* accent (bascule en thème sombre plus bas) — WorkGreen/RestOrange/OverGold
     de motioLight, mêmes tons mats qu'en clair côté natif */
  --accent:#4F6021;
  --accent2:#8C6B2F;
  --dore:#A8802E;
  --accent-vif:#5E7328;
  --accent-sur:#FFFFFF;
  --accent-halo:rgba(79,96,33,.16);
  --accent-voile:#EDF0DF;

  /* formes */
  --r-s:10px;
  --r-m:14px;
  --r-l:20px;
  --r-pill:999px;

  --ombre-1:0 1px 2px rgba(23,26,17,.04), 0 6px 16px -10px rgba(23,26,17,.22);
  --ombre-2:0 2px 4px rgba(23,26,17,.05), 0 18px 34px -18px rgba(23,26,17,.30);

  --f-display:"Outfit",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  /* L'application n'utilise AUCUNE police à chasse fixe : ses libellés, ses
     métadonnées et ses chronos sont tous dans la police du corps. L'espace web
     en mettait partout (une quarantaine d'endroits), ce qui lui donnait une
     tout autre allure — évident en comparant les deux écrans côte à côte sur
     le même téléphone. Plutôt que de reprendre chaque règle, la variable
     pointe désormais sur la police du corps : les tailles, les graisses et les
     espacements de lettres restent ceux qui ont été réglés écran par écran.
     (La variable garde son nom, utilisé dans tout le fichier ; les chiffres
     restent alignés grâce à font-variant-numeric:tabular-nums là où il faut.) */
  --f-mono:"Inter",system-ui,sans-serif;

  --ressort:cubic-bezier(.22,.72,.28,1);

  /* Marge intérieure de l'aire de contenu (#vue) : nommée pour que les écrans
     qui doivent prendre TOUTE la largeur (séance en direct) puissent
     l'annuler exactement, sans redevinner la valeur. */
  --pad-vue:clamp(1.5rem,3.5vw,3rem);
  /* Hauteurs réelles des deux barres fixes, mesurées au chargement par
     main.js (mesurerBarreBas) : la barre du bas (0 en desktop, où elle est
     cachée) et l'en-tête sticky, toujours présent. */
  --barre-bas:0px;
  --haut-appbar:3.2rem;
  /* Hauteur visible, clavier déduit (main.js, mesurerHauteurVisible). Repli
     sur 100dvh tant que la mesure n'a pas eu lieu. */
  --haut-visuel:100dvh;
}

/* Palette sombre "motio", éclaircie (Theme.kt) : le fond quasi noir d'origine
   (#171A11/#181C12) rendait l'appli plus sombre que voulu, encore aggravé
   côté web où --creme/--creme-2 étaient même plus foncés que leurs
   équivalents natifs (BgDark/Panel). Alignés ici sur les mêmes valeurs.
   Deux déclencheurs : le système (media query) et le réglage explicite de
   l'utilisateur (data-theme, voir applyTheme() dans main.js) — le second
   l'emporte toujours sur le premier. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --creme:#1E2216;
    --creme-2:#333A24;
    --carte:#282E1D;
    --trait:#3A4129;
    --encre:#ECEADD;
    --encre-2:#9BA084;

    --accent:#A9C25E;
    --accent2:#D3A45E;
    --dore:#C9A44A;
    --accent-vif:#BCD473;
    --accent-sur:#171A11;
    --accent-halo:rgba(169,194,94,.22);
    --accent-voile:#333A24;

    --ombre-1:0 1px 2px rgba(0,0,0,.3), 0 6px 16px -10px rgba(0,0,0,.6);
    --ombre-2:0 2px 4px rgba(0,0,0,.35), 0 18px 34px -18px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --creme:#1E2216;
  --creme-2:#333A24;
  --carte:#282E1D;
  --trait:#3A4129;
  --encre:#ECEADD;
  --encre-2:#9BA084;

  --accent:#A9C25E;
  --accent2:#D3A45E;
  --dore:#C9A44A;
  --accent-vif:#BCD473;
  --accent-sur:#171A11;
  --accent-halo:rgba(169,194,94,.22);
  --accent-voile:#333A24;

  --ombre-1:0 1px 2px rgba(0,0,0,.3), 0 6px 16px -10px rgba(0,0,0,.6);
  --ombre-2:0 2px 4px rgba(0,0,0,.35), 0 18px 34px -18px rgba(0,0,0,.75);
}
:root[data-theme="light"]{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}

/* overscroll-behavior + tap-highlight : sans ça, tirer vers le bas en haut
   d'un écran déclenche le pull-to-refresh du navigateur (spinner, rechar-
   gement) et chaque appui flashe en gris — deux réflexes de navigateur que
   l'application n'a pas (Compose gère ses propres ripples). Les :active déjà
   en place (.btn, .run-cellule, .pave-touche…) restent le retour au toucher. */
html{overflow-x:hidden;overscroll-behavior-y:none}

body{
  margin:0;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  background:var(--creme);
  color:var(--encre);
  font-family:var(--f-body);
  font-size:15.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   Barre du haut
   ========================================================================== */

.appbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1rem;
  padding:.6rem 1.25rem;
  background:linear-gradient(100deg,#12150E 0%,var(--charbon) 42%,#2D3620 100%);
  color:#F4F3EE;
  box-shadow:0 1px 0 rgba(0,0,0,.25), 0 10px 26px -20px rgba(0,0,0,.9);
}

.wordmark{
  display:flex;align-items:center;gap:.55rem;
  margin-right:auto;
  text-decoration:none;color:inherit;
}
.wordmark img{display:block}
.wordmark-word{height:30px;width:auto}

.menu-btn{
  display:none;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;padding:0;
  background:rgba(244,243,238,.08);border:0;border-radius:var(--r-s);
  color:#F4F3EE;cursor:pointer;
}
.menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.menu-btn:hover{background:rgba(244,243,238,.16)}

.appbar-actions{display:flex;align-items:center;gap:.4rem}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;padding:0;flex:none;
  background:rgba(244,243,238,.08);border:0;border-radius:var(--r-s);
  color:#F4F3EE;cursor:pointer;
}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.icon-btn:hover{background:rgba(244,243,238,.16)}
body:not(.connecte) .icon-btn{display:none}

.lien-txt{
  background:rgba(244,243,238,.08);border:1px solid rgba(244,243,238,.14);
  border-radius:var(--r-pill);
  color:#F4F3EE;cursor:pointer;
  padding:.4rem .85rem;
  font-family:var(--f-body);font-weight:500;font-size:.78rem;letter-spacing:.02em;
  transition:background .18s ease,border-color .18s ease;
}
.lien-txt:hover{background:rgba(169,194,94,.2);border-color:rgba(169,194,94,.5)}

/* ==========================================================================
   Coque et navigation
   ========================================================================== */

.coque{
  display:grid;grid-template-columns:16rem minmax(0,1fr);
  min-height:calc(100vh - 3.4rem);
}

.nav{
  padding:1.5rem 1rem;
  border-right:1px solid var(--trait);
  background:var(--creme);
  align-self:start;position:sticky;top:3.4rem;
}
.nav-groupe{
  font-family:var(--f-mono);font-size:.64rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--encre-2);
  margin:1.6rem .6rem .45rem;
}
.nav-groupe:first-child{margin-top:0}

.nav a{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .7rem;margin-bottom:.15rem;
  border-radius:var(--r-s);
  font-family:var(--f-display);font-weight:500;font-size:.95rem;
  letter-spacing:.01em;text-decoration:none;color:var(--encre);
  transition:background .18s ease,color .18s ease,transform .18s var(--ressort);
}
.nav-ico{
  width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.65;transition:opacity .18s ease;
}
.nav a:hover{background:var(--creme-2);transform:translateX(2px)}
.nav a:hover .nav-ico{opacity:1}
.nav a[aria-current="page"]{
  background:var(--accent-voile);color:var(--accent);font-weight:600;
}
.nav a[aria-current="page"] .nav-ico{opacity:1}

.nav-pied{
  margin:2rem .6rem 0;padding-top:1rem;
  border-top:1px solid var(--trait);
  font-size:.8rem;line-height:1.5;color:var(--encre-2);
}

#vue{padding:var(--pad-vue);outline:none}
.page{max-width:58rem}
.page-etroite{max-width:30rem}

/* ==========================================================================
   Barre du bas — mêmes 4 destinations que la barre Android (Minuteurs,
   Entraînement, Social, Profil ; "Minuteurs" devient "Moti" côté web, le
   chrono en direct se lance depuis une séance plutôt que d'un onglet dédié).
   Cachée en desktop (règle de base ci-dessous), où la colonne de gauche
   suffit ; réactivée en mobile par la media query plus bas — DOIT rester
   avant cette media query dans le fichier, sinon elle l'emporte sur elle.
   ========================================================================== */

.bottombar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:.35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
  background:var(--charbon);
  border-top:1px solid rgba(244,243,238,.08);
  box-shadow:0 -8px 22px -14px rgba(0,0,0,.6);
}
.bottombar a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;
  padding:.3rem 0 .35rem;border-radius:var(--r-s);
  font-family:var(--f-display);font-size:.64rem;font-weight:500;letter-spacing:.01em;
  text-decoration:none;color:rgba(244,243,238,.55);
  transition:color .18s ease;
}
.bb-ico{
  width:21px;height:21px;padding:.3rem 1rem;box-sizing:content-box;border-radius:var(--r-pill);
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:background-color .18s ease;
}
.bottombar a[aria-current="page"]{color:var(--olive-clair);font-weight:600}
.bottombar a[aria-current="page"] .bb-ico{background:rgba(169,194,94,.18)}

@media (max-width:820px){
  /* Valeur de repli tant que main.js n'a pas mesuré la barre (ou si le JS
     échoue) : la mesure inline sur <html> prend ensuite le dessus. */
  :root{--barre-bas:4.4rem}
  /* En mobile, .nav et #vue passent de deux COLONNES à deux LIGNES (nav en
     accordéon au-dessus du contenu). `.coque` garde son min-height pour
     remplir l'écran, mais sans grid-template-rows explicite les deux lignes
     restent en `auto` : l'espace excédentaire (min-height moins le contenu
     réel) se répartissait alors sur LES DEUX lignes par défaut
     (align-content:normal ≈ stretch), y compris celle du nav REPLIÉ — un vide
     de plusieurs centaines de pixels s'ouvrait au-dessus de chaque écran,
     visible en comparant le fil web au même écran natif. `1fr` sur la ligne
     de #vue absorbe tout cet excédent à sa place ; `auto` sur celle du nav le
     laisse à sa vraie taille de contenu (repliée ou déployée). */
  .coque{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .menu-btn{display:flex}
  .nav{
    position:static;
    border-right:0;border-bottom:1px solid var(--trait);
    max-height:0;padding-top:0;padding-bottom:0;opacity:0;
    overflow:hidden;
    transition:max-height .32s var(--ressort),opacity .25s ease,padding .32s var(--ressort);
  }
  body.menu-ouvert .nav{max-height:30rem;padding-top:1rem;padding-bottom:1.25rem;opacity:1}
  body.connecte{padding-bottom:var(--barre-bas)}   /* place pour la barre du bas */
  .bottombar{display:flex}
}

/* ==========================================================================
   Typographie
   ========================================================================== */

.eyebrow{
  display:inline-block;
  font-family:var(--f-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  margin:0 0 .6rem;
}
/* Taille alignée sur les titres d'écran de l'application (22sp, gras, un peu
   d'interlettrage) : le web montait jusqu'à 2,6rem, presque le double. */
h1{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.35rem,3vw,1.6rem);line-height:1.15;
  letter-spacing:.04em;
  margin:0 0 1rem;
}
/* La « graduation de cadran » sous les titres n'existe pas dans
   l'application : retirée pour que les deux écrans se superposent. */
h2{
  font-family:var(--f-display);font-weight:600;
  font-size:1.12rem;letter-spacing:-.005em;
  margin:0 0 .8rem;
}
.lede{color:var(--encre-2);margin:0 0 1.75rem;max-width:46ch;font-size:1.02rem}
.fineprint{
  font-size:.82rem;color:var(--encre-2);margin-top:1.6rem;
}
.fineprint a{color:var(--accent);text-decoration:none}
.fineprint a:hover{text-decoration:underline}

/* ==========================================================================
   Champs et boutons
   ========================================================================== */

.champ{display:block;margin:0 0 1rem;max-width:26rem}
.champ span{
  display:block;
  font-family:var(--f-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);
  margin-bottom:.4rem;
}
.champ input,.champ select{
  width:100%;padding:.7rem .85rem;
  font-family:var(--f-body);font-size:.98rem;color:var(--encre);
  background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--r-s);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.champ select{padding:.68rem .6rem}
.champ input:focus,.champ select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-halo);
}
.champ input::placeholder{color:var(--encre-2);opacity:.7}

/* Le champ multiligne n'avait aucune règle à lui : il tombait sur le rendu
   par défaut du navigateur (police système, coins carrés, bordure grise) au
   milieu de champs dessinés. Mêmes règles que `.champ input`, plus le
   redimensionnement vertical seul. */
.champ textarea{
  width:100%;padding:.7rem .85rem;
  font-family:var(--f-body);font-size:.98rem;line-height:1.5;color:var(--encre);
  background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--r-s);
  resize:vertical;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.champ textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-halo);
}
.champ textarea::placeholder{color:var(--encre-2);opacity:.7}
/* Champ réservé à l'abonnement : visible et lisible, mais inerte — il montre
   ce que l'abonnement débloque au lieu de disparaître. */
.champ textarea:disabled{
  background:var(--creme-2);color:var(--encre-2);
  border-style:dashed;cursor:not-allowed;
}

/* Pastille « IA » du bouton et de la fenêtre « Générer une séance » (BadgeIA,
   Subscription.kt côté natif) : dorée quand l'abonnement est actif — c'est le
   coach qui écrit la séance ; grise sinon — c'est le générateur local, à
   règles fixes. Le bouton, lui, est le même dans les deux cas. */
.badge-ia{
  display:inline-flex;align-items:center;
  /* Pastille, pas médaillon : sans `nowrap`, « ✦ IA » revenait à la ligne
     dans un bouton étroit et la pilule devenait un rond. */
  white-space:nowrap;
  padding:.1rem .45rem;margin-left:.4rem;
  border-radius:var(--r-pill);
  font-family:var(--f-display);font-size:.66rem;font-weight:700;letter-spacing:.06em;
  background:var(--creme-2);color:var(--encre-2);border:1px solid var(--trait);
  vertical-align:middle;
}
.badge-ia.on{background:var(--dore);color:var(--accent-sur);border-color:var(--dore)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-family:var(--f-display);font-weight:600;font-size:.88rem;
  letter-spacing:.01em;text-decoration:none;
  padding:.6rem 1.25rem;
  background:var(--accent);color:var(--accent-sur);
  border:1px solid var(--accent);border-radius:var(--r-pill);
  box-shadow:var(--ombre-1);
  transition:transform .16s var(--ressort),background .18s ease,box-shadow .18s ease;
}
.btn:hover{background:var(--accent-vif);border-color:var(--accent-vif);transform:translateY(-1px);box-shadow:var(--ombre-2)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.btn-lg{padding:.8rem 1.6rem;font-size:.98rem}
.btn-sm{padding:.4rem .9rem;font-size:.78rem}
.btn-ghost{
  background:var(--carte);color:var(--encre);border-color:var(--trait);
  box-shadow:none;
}
.btn-ghost:hover{
  background:var(--carte);color:var(--accent);
  border-color:var(--accent);box-shadow:var(--ombre-1);
}

.separateur{
  display:flex;align-items:center;gap:.9rem;
  margin:1.5rem 0;max-width:26rem;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-2);
}
.separateur::before,.separateur::after{content:"";flex:1;height:1px;background:var(--trait)}

.lien-inline{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--f-body);font-weight:500;font-size:.84rem;color:var(--accent);
  text-decoration:none;border-bottom:1px solid var(--accent-halo);
  transition:border-color .18s ease;
}
.lien-inline:hover{border-bottom-color:var(--accent)}
/* Croix de suppression dans une liste (catégories) : même orange que le natif. */
.lien-danger{color:var(--accent2);border-bottom-color:transparent;font-weight:700}
.lien-inline:disabled{color:var(--encre-2);cursor:default;border-bottom-color:transparent}

/* ==========================================================================
   Listes en cartes
   ========================================================================== */

.liste{list-style:none;padding:0;margin:1.75rem 0 0;display:grid;gap:.7rem}
.ligne{
  position:relative;overflow:hidden;
  padding:1.05rem 1.25rem;
  background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--r-m);
  box-shadow:var(--ombre-1);
  transition:transform .2s var(--ressort),box-shadow .2s ease,border-color .2s ease;
}
.ligne::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .24s var(--ressort);
}
.ligne:hover{transform:translateY(-2px);box-shadow:var(--ombre-2);border-color:var(--accent-halo)}
.ligne:hover::before{transform:scaleY(1)}
.ligne-action{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ligne-tete{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ligne-titre{
  display:block;
  font-family:var(--f-display);font-weight:600;font-size:1.02rem;
  text-decoration:none;color:var(--encre);
}
a.ligne-titre:hover{color:var(--accent)}
.ligne-meta{font-family:var(--f-mono);font-size:.72rem;color:var(--encre-2)}
.ligne-corps{margin:.35rem 0 0;color:var(--encre-2);font-size:.94rem}

/* Records épinglés (PinnedRecords, Stats.kt) : étoile pleine dorée pour un
   record épinglé, fond légèrement relevé — comme Panel vs CardBg natif. */
.record-ligne{display:flex;align-items:center;gap:.7rem}
.record-corps{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.record-etoile{
  flex:none;background:none;border:none;cursor:pointer;
  font-size:1.35rem;line-height:1;color:var(--encre-2);padding:.2rem;
}
.record-ligne.epingle{background:var(--creme-2)}
.record-ligne.epingle .record-etoile{color:var(--dore)}
.ligne-stats{
  display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:.7rem 0 0;
  font-family:var(--f-mono);font-size:.72rem;color:var(--encre-2);
}
.ligne-stats>*{
  background:var(--creme);border:1px solid var(--trait);border-radius:var(--r-pill);
  padding:.15rem .6rem;
}

/* ==========================================================================
   Profil — en-tête d'identité, tonnage, trophées (IdentityHeader/TonnageCard/
   TrophyGrid, Profile.kt)
   ========================================================================== */

.profil-panneau{
  background:var(--creme-2);border-radius:var(--r-l);
  padding:1.1rem 1.15rem 1.3rem;margin-bottom:1rem;
}
.profil-tete{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.profil-avatar{
  width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--carte);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:700;font-size:1.4rem;color:var(--encre);
}
/* Avatar cliquable (IdentityHeader natif) : bouton nu autour du même rond,
   crayon en overlay bas-droit, voile + spinner pendant l'envoi. */
.profil-avatar-bouton{
  position:relative;flex:none;width:56px;height:56px;padding:0;
  background:none;border:none;border-radius:50%;cursor:pointer;
}
.profil-avatar-crayon{
  position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;
  background:var(--accent);color:var(--accent-sur);display:flex;align-items:center;justify-content:center;
  font-size:.7rem;border:2px solid var(--creme);
}
.profil-avatar-bouton.charge::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(0,0,0,.45);
  border:2px solid transparent;border-top-color:#fff;
  animation:tourner .8s linear infinite;
}
@keyframes tourner{to{transform:rotate(360deg)}}
.profil-identite{min-width:0}
.profil-identite b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.25rem;color:var(--encre)}
.profil-identite span{display:block;font-family:var(--f-mono);font-size:.78rem;color:var(--encre-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profil-stats-ligne{display:flex;gap:1.6rem}
.profil-stats-ligne div{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.profil-stats-ligne b{font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:var(--encre)}
.profil-stats-ligne span{font-family:var(--f-mono);font-size:.68rem;color:var(--encre-2)}

.tonnage-rangee{display:flex;gap:.75rem;margin-bottom:1.5rem}
.tonnage-carte{
  flex:1;background:var(--carte);border-radius:var(--r-m);padding:.9rem 1rem;
}
.tonnage-carte span{display:block;font-family:var(--f-mono);font-size:.72rem;color:var(--encre-2)}
.tonnage-carte b{display:block;margin-top:.15rem;font-family:var(--f-display);font-weight:700;font-size:1.35rem;color:var(--accent)}

/** Étiquette de section — TROPHÉES/ENTRAÎNEMENT/COMPTE (Profile.kt) : petit
 *  label mono capitales, pas un gros titre noir. Réutilisé partout où une
 *  page se découpe en sections nommées (même esprit que .eyebrow/.cat-nom). */
.bloc-titre{
  margin:0 0 .7rem;font-family:var(--f-mono);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);
}

.trophees-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem .6rem}
.trophee-carte{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  cursor:pointer;text-align:center;
}
/* Badge hexagonal (Profile.kt : icône + anneau coloré selon l'état) plutôt
   qu'une carte blanche neutre — verrouillé = gris terne, en cours = anneau
   olive, complet = anneau doré avec léger halo. */
/* L'image est maintenant le vrai dessin de l'application (assets/img/trophees),
   posé DANS l'hexagone : object-fit + un peu de marge intérieure pour que le
   badge respire comme côté natif. */
.trophee-badge{
  width:58px;height:58px;margin:0 auto;display:block;
  object-fit:contain;padding:9px;box-sizing:border-box;
  clip-path:polygon(50% 2%, 95% 26%, 95% 74%, 50% 98%, 5% 74%, 5% 26%);
  background:linear-gradient(150deg,var(--creme-2),var(--carte));
  border:2px solid var(--trait);
}
.trophee-carte.verrouille .trophee-badge{filter:grayscale(1);opacity:.55}
.trophee-carte.encours .trophee-badge{
  background:linear-gradient(150deg,var(--accent-voile),var(--creme-2));
  border-color:var(--accent);
}
.trophee-carte.complet .trophee-badge{
  background:linear-gradient(150deg,var(--dore),var(--accent2));
  border-color:var(--dore);box-shadow:0 0 14px var(--accent-halo);
}
.trophee-carte .nom{font-family:var(--f-display);font-weight:700;font-size:.72rem;color:var(--encre);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.trophee-carte.verrouille .nom{color:var(--encre-2)}
.trophee-etoiles{font-size:.72rem;letter-spacing:.1em;color:var(--dore)}
.trophee-etoiles .off{color:var(--encre-2);opacity:.5}

.menu-groupe{background:var(--carte);border-radius:var(--r-m);overflow:hidden}
.menu-ligne{
  display:flex;align-items:center;gap:.75rem;width:100%;
  padding:.85rem .9rem;text-decoration:none;background:none;border:none;
  text-align:left;cursor:pointer;border-bottom:1px solid var(--trait);
}
.menu-ligne:last-child{border-bottom:none}
.menu-ligne img.menu-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.menu-ligne .corps{flex:1;min-width:0}
.menu-ligne .corps b{display:block;font-family:var(--f-display);font-weight:500;font-size:.94rem;color:var(--encre)}
.menu-ligne .corps span{display:block;font-family:var(--f-mono);font-size:.72rem;color:var(--encre-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-ligne .chevron{color:var(--encre-2);font-size:1.3rem;flex:none}

/* ==========================================================================
   Bandeau de chiffres — cadran de statistiques
   ========================================================================== */

.chiffres{
  display:grid;gap:.7rem;margin:0 0 2rem;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  max-width:44rem;
}
.chiffres>*{
  position:relative;
  padding:.95rem 1rem .85rem;
  background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--r-m);
}
.chiffres b{
  display:block;
  font-family:var(--f-mono);font-size:1.7rem;font-weight:600;
  line-height:1.1;letter-spacing:-.02em;color:var(--encre);
  margin-top:.25rem;
}
.chiffres span{
  font-family:var(--f-mono);font-size:.64rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);
}

.bloc{margin-top:2.75rem;padding-top:1.6rem;border-top:1px solid var(--trait)}

/* ==========================================================================
   États
   ========================================================================== */

.etat{
  padding:2.25rem 1.5rem;max-width:40rem;
  background:var(--carte);
  border:1px dashed var(--trait);border-radius:var(--r-l);
  text-align:left;
}
.etat h2{font-size:1.25rem;margin-bottom:.4rem}
.etat p{color:var(--encre-2);margin:0 0 1rem}
.etat .btn{margin-top:.25rem}
.etat-mono{font-family:var(--f-body);font-size:.85rem;color:var(--encre-2)}
.etat-erreur{border-style:solid;border-color:rgba(140,59,36,.35)}
.etat-erreur h2{color:var(--alerte)}

.chantier{
  margin:1.75rem 0;padding:1.25rem 1.4rem;
  background:var(--accent-voile);
  border:1px solid var(--accent-halo);border-radius:var(--r-m);
}
.chantier h2{margin-bottom:.35rem;color:var(--accent)}
.chantier p{margin:0;color:var(--encre-2);font-size:.95rem}
.chantier code{
  font-family:var(--f-mono);font-size:.85em;
  background:var(--carte);border:1px solid var(--trait);border-radius:5px;
  padding:.08em .35em;
}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast{
  position:fixed;left:50%;bottom:1.75rem;z-index:80;
  padding:.7rem 1.2rem;
  background:var(--charbon);color:#F4F3EE;
  border-radius:var(--r-pill);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  font-size:.86rem;
  animation:toast-entree .32s var(--ressort) both;
  transition:opacity .35s ease,transform .35s ease;
  transform:translateX(-50%);
}
.toast.parti{opacity:0;transform:translateX(-50%) translateY(8px)}
@keyframes toast-entree{
  from{opacity:0;transform:translateX(-50%) translateY(14px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* ==========================================================================
   Fil et éditeur
   ========================================================================== */

.rangee{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}
.rangee .champ{flex:1 1 14rem;max-width:none}
.rangee-serree{gap:.6rem}
.champ-mini{flex:0 0 7.5rem;max-width:7.5rem}
/* Durée : bouton qui ouvre le pavé min:sec, dessiné comme un champ de saisie. */
.champ-duree{
  width:100%;padding:.7rem .85rem;text-align:left;cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--encre);
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-s);
  font-variant-numeric:tabular-nums;
}
.champ-duree:active{border-color:var(--accent)}

/* Réglages de notification (Compte) : libellé + explication + bascule. */
.notif-ligne{display:flex;align-items:center;gap:.8rem;padding:.5rem 0}
.notif-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.notif-corps b{font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--encre)}
.notif-corps span{font-family:var(--f-mono);font-size:.72rem;color:var(--encre-2);line-height:1.35}

/* Minuteurs — stepper Tabata (NumberRow, MainActivity.kt) : label + − + valeur + +. */
.minuteur-stepper{display:flex;align-items:center;gap:.7rem;width:100%}
/* Onglets Chrono/Minuteur/Tabata — TabRow de MinuteurScreen (MainActivity.kt) :
   trois libellés à égalité, celui qui est actif souligné en vert. Le web
   utilisait des puces en pilule, ce qui ne ressemblait à rien de l'appli. */
.minuteurs{display:flex;flex-direction:column;min-height:calc(100dvh - var(--haut-appbar) - var(--barre-bas) - var(--pad-vue))}
.min-onglets{
  display:flex;margin:calc(-1 * var(--pad-vue)) calc(-1 * var(--pad-vue)) 1rem;
  border-bottom:1px solid var(--trait);
}
.min-onglet{
  flex:1;padding:.85rem .3rem;background:none;border:none;cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--encre-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.min-onglet.on{color:var(--encre);border-bottom-color:var(--accent)}
/* Le cadran occupe l'espace libre, comme l'écran natif où le chrono trône
   seul au centre. */
.minuteurs .run-cadran{flex:1;justify-content:center}
.minuteurs .run-cadran-value{font-size:clamp(4rem,20vw,6.5rem)}

.minuteur-stepper-label{flex:0 0 5.5rem;font-family:var(--f-mono);font-size:.85rem;color:var(--encre-2)}
.minuteur-stepper-bouton{
  width:2.2rem;height:2.2rem;flex:none;border-radius:50%;border:1px solid var(--trait);
  background:var(--carte);color:var(--encre);font-size:1.15rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.minuteur-stepper-valeur{
  flex:0 0 4rem;text-align:center;font-family:var(--f-display);font-weight:700;
  font-size:1.15rem;color:var(--encre);
}
/* Valeur de durée : elle s'ouvre au pavé min:sec, elle doit donc se voir cliquable. */
.minuteur-stepper-valeur-clic{
  cursor:pointer;border-radius:var(--r-s);padding:.15rem .3rem;
  background:var(--creme-2);
}

.etiquette{
  display:inline-block;margin-left:.5rem;
  padding:.12rem .55rem;
  font-family:var(--f-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent-voile);color:var(--accent);
  border:1px solid var(--accent-halo);border-radius:var(--r-pill);
}

.estimation{
  display:inline-block;
  margin:1.1rem 0 0;padding:.45rem .85rem;
  background:var(--creme-2);border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:.78rem;color:var(--encre-2);
}
.estimation b{color:var(--encre);font-weight:600}

.barre-action{
  display:flex;gap:.75rem;flex-wrap:wrap;
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--trait);
}

/* carte du fil */
.carte{
  padding:1.4rem 1.5rem;margin-bottom:.85rem;
  background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--r-l);
  box-shadow:var(--ombre-1);
  transition:box-shadow .2s ease,border-color .2s ease;
}
.carte:hover{box-shadow:var(--ombre-2)}
.carte-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.carte-auteur{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-display);font-weight:600;font-size:.95rem;
  text-decoration:none;color:var(--accent);
}
.carte-auteur::before{
  content:"";width:.45rem;height:.45rem;border-radius:50%;
  background:var(--accent);
}
.carte-auteur:hover{text-decoration:underline}
.carte-titre{
  font-family:var(--f-display);font-weight:600;font-size:1.25rem;
  letter-spacing:-.01em;margin:.55rem 0 .5rem;
}
.carte-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.carte-detail{
  margin-top:1.1rem;padding:1rem 1.15rem;
  background:var(--creme);border-radius:var(--r-m);
}

.puce{
  cursor:pointer;
  padding:.38rem .85rem;
  font-family:var(--f-body);font-weight:500;font-size:.78rem;
  background:var(--carte);color:var(--encre);
  border:1px solid var(--trait);border-radius:var(--r-pill);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .16s var(--ressort);
}
.puce:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.puce-active{background:var(--accent);border-color:var(--accent);color:var(--accent-sur)}
.puce-active:hover{background:var(--accent-vif);border-color:var(--accent-vif);color:var(--accent-sur)}
.puce:disabled{opacity:.45;cursor:default;transform:none}
.puces{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.25rem}

.exo{
  margin-bottom:.6rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--trait);
}
.exo:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.exo-nom{
  font-family:var(--f-display);font-weight:600;font-size:.95rem;
  margin:0 0 .3rem;
}
.exo-series{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:.35rem .45rem;
  font-family:var(--f-mono);font-size:.72rem;color:var(--encre-2);
}
.exo-series li{
  background:var(--creme);border:1px solid var(--trait);border-radius:var(--r-pill);
  padding:.1rem .55rem;
}

.com{padding:.75rem 0;border-bottom:1px solid var(--trait)}
.com:last-of-type{border-bottom:0}
.com-tete{
  font-family:var(--f-display);font-weight:600;font-size:.88rem;
  margin:0 0 .15rem;
}
.com-corps{margin:0 0 .25rem;color:var(--encre-2);font-size:.94rem}
.com-saisie{display:flex;gap:.6rem;align-items:flex-end;padding-top:.9rem;flex-wrap:wrap}
.com-saisie .champ{flex:1 1 16rem;margin:0}

/* éditeur d'exercice — reprend CreateWorkout (TrainingScreens.kt) */
.champ-label{color:var(--encre-2);font-size:.86rem;margin:0 0 .4rem}
.exos-liste{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.75rem}

.exo-edit{
  padding:.85rem 1rem;margin-bottom:0;
  background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--r-s);
  box-shadow:var(--ombre-1);
}
.exo-edit-tete{display:flex;align-items:center;gap:.7rem}
.exo-edit-poignee{color:var(--encre-2);font-size:1.1rem;cursor:grab;flex:none;touch-action:none;user-select:none}
.exo-edit.dragging{position:relative;z-index:5;box-shadow:0 8px 22px rgba(0,0,0,.35);cursor:grabbing}
.exo-edit.dragging .exo-edit-poignee{cursor:grabbing}
.exo-edit-nom{flex:1;font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--encre)}
.exo-edit-suppr{color:var(--encre-2);font-size:1.05rem;cursor:pointer;flex:none;padding:.2rem}
.exo-edit-meta{margin:.3rem 0 0;color:var(--encre-2);font-size:.8rem}
.exo-edit-meta .etiquette{margin-left:.5rem}
.exo-edit [data-champs]{margin-top:.75rem}
.exo-edit .champ{margin-bottom:.5rem}
.exo-edit .etat-mono{margin:.5rem 0 0}

.lien-enchainer{
  display:block;margin:.4rem auto;padding:.5rem 1.1rem;
  background:none;border:0;cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:.88rem;
  color:var(--encre-2);
}
.lien-enchainer.on{color:var(--dore)}

.estim-panel{
  display:flex;flex-direction:column;gap:.25rem;
  margin-top:1.25rem;padding:.85rem 1rem;
  background:var(--creme-2);border-radius:var(--r-m);
}
.estim-panel span{color:var(--encre-2);font-size:.82rem}
.estim-panel b{color:var(--dore);font-family:var(--f-display);font-weight:700;font-size:1.6rem}

/* Raisonnement du coach au-dessus d'une séance qu'il vient de générer : c'est
   du texte à lire une fois, pas un réglage — d'où le ton discret. */
.notes-ia{
  margin:0 0 1.25rem;padding:.9rem 1rem;
  background:var(--creme-2);border-radius:var(--r-m);border-left:3px solid var(--dore);
}
.notes-ia p{margin:0;color:var(--encre-2);font-size:.88rem;line-height:1.55}
/* Sélecteur aussi précis que celui du dessus, sinon la règle générique
   `.notes-ia p` l'emporte sur la taille et la couleur du libellé. */
.notes-ia p.notes-ia-tag{
  margin:0 0 .35rem;font-family:var(--f-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dore);
}

/* ==========================================================================
   Modale du catalogue
   ========================================================================== */

.modale{
  position:fixed;inset:0;z-index:70;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  background:rgba(18,21,14,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:voile .22s ease both;
}
.modale-boite{
  width:min(44rem,100%);max-height:86vh;
  display:flex;flex-direction:column;
  padding:1.5rem 1.6rem;
  background:var(--creme);
  border:1px solid var(--trait);border-radius:var(--r-l);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
  animation:boite .3s var(--ressort) both;
}
.modale-tete{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:1rem;
}
.modale-tete h2{margin:0}
.modale-corps{flex:1;overflow-y:auto;padding-right:.5rem}
.modale-pied{
  display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--trait);
}
.modale-pied .champ{flex:1 1 14rem;margin:0}
@keyframes voile{from{opacity:0}to{opacity:1}}
@keyframes boite{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* Menu d'action sur une carte de séance — AlertDialog natif
   (TrainingScreens.kt ~510-573) : aperçu centré, deux gestes fréquents en
   icônes, action principale pleine largeur, puis lignes de texte. */
.modale-boite-etroite{width:min(23rem,100%);text-align:center}
.menu-action-titre{margin:0 0 .3rem;font-family:var(--f-display);font-weight:700;font-size:1.15rem;color:var(--encre)}
.menu-action-sous{margin:0;color:var(--encre-2);font-size:.82rem}
.menu-action-duree{margin:.35rem 0 0;color:var(--dore);font-weight:700;font-size:.82rem}
.menu-action-icones{display:flex;justify-content:center;gap:1.6rem;margin:1.1rem 0}
.menu-action-icone{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  background:none;border:none;cursor:pointer;color:var(--encre-2);
  font-family:var(--f-body);font-size:.72rem;padding:.2rem;
}
.menu-action-icone svg{width:24px;height:24px;fill:currentColor}
.menu-action-icone:hover{color:var(--encre)}
.menu-action-icone.on{color:var(--dore)}
.menu-action-demarrer{width:100%;margin-top:.15rem}
.menu-action-lignes{display:flex;flex-direction:column;margin-top:.7rem}
.menu-action-ligne{
  background:none;border:none;border-top:1px solid var(--trait);
  padding:.75rem 0;font-size:.95rem;color:var(--encre);cursor:pointer;
  font-family:var(--f-body);width:100%;
}
.menu-action-ligne:hover{color:var(--accent)}
.menu-action-ligne-danger{color:var(--accent2)}
.menu-action-ligne-danger:hover{opacity:.8;color:var(--accent2)}
.menu-action-annuler{display:block;margin:.9rem auto 0}
.partage-aide{margin:.15rem 0 .6rem;color:var(--encre-2);font-size:.76rem;text-align:center}

/* QR (Sharing.kt::QrDialog) : fond blanc FORCÉ — un QR sombre-sur-clair
   inversé par le thème sombre du reste de la page ne se scanne plus. */
.qr-surface{
  background:#ffffff;border-radius:var(--r-m);padding:.6rem;margin:.4rem 0 .8rem;
}
.qr-canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:calc(var(--r-m) - .3rem)}

/* Scan QR caméra (ouvrirScanQR, groupes.js). */
.scan-video-zone{
  background:#000;border-radius:var(--r-m);overflow:hidden;margin:.4rem 0 .8rem;
  aspect-ratio:1;
}
.scan-video-zone video{width:100%;height:100%;object-fit:cover;display:block}

.cat-nom{
  font-family:var(--f-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin:1.4rem 0 .5rem;
}
.grp-nom{
  font-family:var(--f-display);font-weight:600;font-size:.9rem;
  margin:.85rem 0 .4rem;
}

/* ==========================================================================
   Mise en mouvement
   ========================================================================== */

@keyframes montee{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
#vue>*{animation:montee .36s var(--ressort) both}

.liste .ligne,.carte{animation:montee .4s var(--ressort) both}
.liste .ligne:nth-child(1),.carte:nth-of-type(1){animation-delay:.03s}
.liste .ligne:nth-child(2),.carte:nth-of-type(2){animation-delay:.06s}
.liste .ligne:nth-child(3),.carte:nth-of-type(3){animation-delay:.09s}
.liste .ligne:nth-child(4),.carte:nth-of-type(4){animation-delay:.12s}
.liste .ligne:nth-child(5),.carte:nth-of-type(5){animation-delay:.15s}
.liste .ligne:nth-child(6),.carte:nth-of-type(6){animation-delay:.18s}
.liste .ligne:nth-child(n+7),.carte:nth-of-type(n+7){animation-delay:.21s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .nav a:hover,.ligne:hover,.btn:hover,.puce:hover{transform:none}
}

/* ==========================================================================
   Écran de connexion — pas de session, pas de chrome autour
   ========================================================================== */

body:not(.connecte) .nav,
body:not(.connecte) .menu-btn,
body:not(.connecte) .bottombar,
body:not(.connecte) .lien-txt{display:none}
body:not(.connecte) .coque{grid-template-columns:minmax(0,1fr)}
body:not(.connecte) #vue{
  display:flex;justify-content:center;
  padding-top:clamp(2rem,9vh,5rem);
}
body:not(.connecte) .page-etroite{width:100%;max-width:25rem}

/* le second choix ne doit pas peser autant que le premier */
.btn[data-google]{
  width:100%;
  background:var(--carte);color:var(--encre);
  border-color:var(--trait);box-shadow:none;
}
.btn[data-google]:hover{
  color:var(--accent);border-color:var(--accent);box-shadow:var(--ombre-1);
}
.btn[data-valider]{width:100%}

/* ==========================================================================
   Séance en direct
   ========================================================================== */

.rangee-titre{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.rangee-titre h1{margin:0}

/* La séance occupe TOUT l'écran (demande explicite de Nicolas : « il faut que
   toutes les informations s'étalent sur tout l'écran plutôt que d'être
   regroupées au centre »). Les marges de #vue sont annulées puis reprises en
   plus serré, et la colonne s'étire sur toute la hauteur : en-tête en haut,
   cadran au milieu de l'espace libre, saisie et navigation posées en bas. */
.page.run{
  max-width:none;
  /* La marge négative du bas annule le padding que body.connecte réserve pour
     la barre : la séance gère elle-même cette réserve dans son propre
     padding-bottom, ce qui garantit que « Exercice suivant » reste au-dessus
     de la barre même quand le contenu déborde d'un cheveu. */
  margin:calc(-1 * var(--pad-vue)) calc(-1 * var(--pad-vue)) calc(-1 * var(--pad-vue) - var(--barre-bas));
  padding:.85rem .85rem calc(.9rem + var(--barre-bas));
  min-height:calc(100dvh - var(--haut-appbar));
  display:flex;flex-direction:column;
}
.run > [data-corps]{flex:1;display:flex;flex-direction:column}
.run > [data-corps] > div{flex:1;display:flex;flex-direction:column}
/* Le cadran mange l'espace restant, ce qui pousse les cellules et la
   navigation vers le bas de l'écran plutôt que de tout tasser au centre. */
.run .run-cadran{flex:1 1 auto;min-height:4rem;margin-bottom:.6rem}
.run .run-bas{margin-top:auto;padding-top:.4rem}
/* Écran de séance : on resserre ce qui, ailleurs, respire davantage — tout
   doit tenir sans défilement pendant qu'on s'entraîne. */
.run .run-saisie{margin-bottom:.8rem}
.run .run-cellule{padding:.55rem .5rem}
.run .run-cellules{margin-bottom:.7rem}
.run .run-rir{margin-bottom:.6rem}
/* La liste des séries déjà faites est bornée puis défilante : sans ça, une
   séance à 5 séries repoussait la navigation loin sous l'écran. */
.run .run-series{margin-bottom:.6rem;max-height:22vh;overflow-y:auto}
.run .run-controles{margin-bottom:.6rem}
.run .run-sousligne{margin-bottom:.6rem}

.run-tete{
  display:flex;align-items:flex-start;gap:.75rem;
  margin-bottom:.35rem;
}
/* Retour à la liste SANS terminer la séance : elle reste en cours et se
   reprend depuis l'onglet Entraînement ou le bandeau de la liste. */
.run-arriere{
  margin-top:.2rem;padding:0;background:none;border:none;cursor:pointer;
  font-family:var(--f-mono);font-size:.66rem;color:var(--encre-2);
}
.run-tete-gauche{display:flex;flex-direction:column;align-items:flex-start;flex:none}
.run-tete-label{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-2);
}
.run-chrono-global{
  font-family:var(--f-mono);font-size:.95rem;font-weight:700;color:var(--dore);
  font-variant-numeric:tabular-nums;
}
.run-titre{
  flex:1;min-width:0;margin:0;text-align:left;font-size:1.15rem;line-height:1.2;
  font-weight:700;font-family:inherit;color:var(--encre);
  background:none;border:none;padding:0;cursor:pointer;
}
.run-titre::after{display:none}
.run-titre-crayon{font-size:.75rem;color:var(--encre-2);vertical-align:middle}
.run-tete-droite{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;flex:none}
.run-tete-icones{display:flex;align-items:center;gap:.55rem}
.run-tete-icones a{display:flex;text-decoration:none}
.run-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.run-cadran{cursor:pointer}
.run-icone{
  font-size:1rem;color:var(--encre-2);cursor:pointer;line-height:1;padding:.15rem;
  background:none;border:none;
}
.run-reste{
  font-family:var(--f-mono);font-size:.68rem;color:var(--encre-2);white-space:nowrap;
}
.run-sousligne{
  margin:0 0 1.1rem;text-align:center;color:var(--encre-2);
  font-family:var(--f-mono);font-size:.76rem;
}

.run-derniere{margin-bottom:1.5rem}
.run-derniere-label{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-2);margin:0 0 .5rem;
}
.run-derniere-liste{list-style:none;margin:0 0 .5rem;padding:0;font-family:var(--f-mono);font-size:.82rem}
.run-derniere-liste li{color:var(--dore);padding:.15rem 0}
.run-conseil{margin:0;color:var(--accent);font-size:.86rem;font-weight:600}

.run-cadran{
  margin:0 0 1.5rem;padding:.5rem 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  text-align:center;
}
.run-cadran-label{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-2);
}
.run-cadran-value{
  font-family:var(--f-display);font-weight:650;font-size:clamp(3.2rem,16vw,5rem);
  line-height:1;letter-spacing:-.02em;color:var(--encre);
  font-variant-numeric:tabular-nums;
}
.run-cad-warmup .run-cadran-value{
  font-size:clamp(1.9rem,7vw,2.6rem);font-weight:800;color:var(--dore);letter-spacing:0;
}
.run-cad-serie .run-cadran-value{color:var(--accent)}
.run-cad-recup .run-cadran-value,.run-cad-place .run-cadran-value{color:var(--encre)}

.run-controles{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.run-controles .btn{flex:1 1 12rem}

.run-saisie{margin-bottom:1.5rem}
/* La zone de saisie reste ouverte pendant la récupération, sur la série qui
   vient d'être faite : ce titre dit laquelle on est en train de renseigner. */
.run-saisie-titre{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-2);margin:0 0 .5rem;text-align:center;
}
.run-saisie-aide{
  margin:0;text-align:center;font-family:var(--f-mono);font-size:.68rem;color:var(--encre-2);
}
.run-cellules{display:flex;gap:.75rem;margin-bottom:1rem}
.run-cellule{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.75rem .5rem;border-radius:var(--r-m);background:var(--carte);
  border:1px solid var(--trait);cursor:pointer;font:inherit;
}
.run-cellule:active{background:var(--accent-halo)}
.run-cellule-label{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-2);
}
.run-cellule-valeur{
  width:100%;text-align:center;background:none;border:none;color:var(--encre);
  font-family:var(--f-display);font-weight:700;font-size:1.5rem;padding:0;
  font-variant-numeric:tabular-nums;
}
.run-cellule-valeur:focus{outline:none}
.run-cellule-ref{
  font-family:var(--f-display);font-style:italic;font-size:.78rem;color:var(--encre-2);
  min-height:1.1em;
}
.run-rir-label{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-2);margin:0 0 .5rem;
}
/* Les 6 puces RIR se partagent toute la largeur au lieu de se serrer à
   gauche — même logique « on occupe l'écran » que le reste de la séance. */
.run-rir{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;margin-bottom:1rem}
.run-rir .puce{padding:.45rem .2rem;font-size:.82rem;text-align:center}
.run-saisie .btn{width:100%}

.run-series{margin-bottom:1.5rem}

/* Ligne glissable (glissement pour corriger une série déjà faite,
   TrainingScreens.kt) : l'action « Modifier » vit sous la ligne, révélée en
   glissant le contenu vers la gauche — pas de bouton visible en permanence. */
.run-serie-rangee{position:relative;overflow:hidden;border-radius:var(--r-s)}
.run-serie-rangee+.run-serie-rangee{margin-top:2px}
.run-serie-action{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;
  background:var(--accent);border-radius:var(--r-s);
}
.run-serie-action button{
  height:100%;padding:0 1.1rem;background:none;border:none;color:var(--accent-sur);
  font-family:var(--f-display);font-weight:700;font-size:.85rem;cursor:pointer;
}
.run-serie-faite{
  position:relative;padding:.6rem .9rem;font-family:var(--f-mono);font-size:.82rem;
  color:var(--encre-2);background:var(--creme);touch-action:pan-y;
  transition:transform .18s var(--ressort);
}

.run-bas{display:flex;align-items:stretch;gap:.6rem}
.run-fleche-ronde{
  flex:0 0 auto;width:2.8rem;font-size:1.3rem;font-weight:700;color:var(--encre);
  background:none;border:1px solid var(--trait);border-radius:50%;
  cursor:pointer;
}
.run-fleche-ronde:disabled{opacity:.35;cursor:default}
.run-suivant{flex:1}

/* Entraînement libre : première action de l'écran Entraînement, avant même la
   liste — on part s'entraîner, on remplit la séance en la faisant. */
.libre-bouton{display:block;text-align:center;margin-bottom:.4rem}
.libre-aide{margin:0 0 1rem;text-align:center;font-family:var(--f-mono);font-size:.7rem;color:var(--encre-2)}

/* Bandeau « Séance en cours » sur l'écran Entraînement — une séance mise en
   arrière-plan (run-state.js) doit sauter aux yeux et se reprendre d'un
   appui, pas se perdre. */
.reprise-carte{margin:0 0 1rem}
.reprise-principal{
  width:100%;display:flex;align-items:center;gap:.7rem;text-align:left;
  padding:.85rem 1rem;border-radius:var(--r-m);cursor:pointer;
  background:var(--accent-voile);border:1px solid var(--accent);color:var(--encre);
  font:inherit;
}
.reprise-principal .corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.reprise-principal .corps b{font-family:var(--f-display);font-size:.95rem}
.reprise-principal .corps span{font-family:var(--f-mono);font-size:.72rem;color:var(--encre-2)}
.reprise-principal .chevron{color:var(--accent);font-size:1.2rem}
.reprise-point{
  width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 4px var(--accent-halo);
}
.reprise-abandon{display:block;margin:.45rem auto 0;font-size:.75rem}

.run-fin-actions{display:flex;flex-direction:column;gap:.6rem;align-items:stretch;margin-top:1rem}
.run-fin-actions .lien-inline{text-align:center}

.run-moods{display:flex;justify-content:space-between;gap:.4rem;margin:.6rem 0 1rem}
.run-mood{
  flex:1;padding:.5rem 0;font-size:1.4rem;background:none;border:1px solid transparent;
  border-radius:var(--r-m);cursor:pointer;
}
.run-mood.on{background:var(--accent-halo);border-color:var(--accent)}

/* ==========================================================================
   Écran Entraînement — reprend exactement TrainingList/WorkoutCard
   (TrainingScreens.kt) : carte Moti, puces de catégorie, cartes de séance.
   ========================================================================== */

.chip-cat{
  padding:.5rem 1rem;border-radius:var(--r-s);border:1px solid var(--encre-2);
  font-family:var(--f-display);font-weight:700;font-size:.86rem;
  background:transparent;color:var(--encre);cursor:pointer;
}
.chip-cat.on{background:var(--accent);border-color:var(--accent);color:var(--accent-sur)}

.social-entete{margin-bottom:1.25rem}
.social-titre-rangee{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.social-entete h1{margin:0 0 .85rem}
.social-tabs{
  display:flex;gap:.5rem;overflow-x:auto;white-space:nowrap;
  -webkit-overflow-scrolling:touch;padding-bottom:.15rem;
}
.social-tabs::-webkit-scrollbar{display:none}
/* Correction du 2026-08-19 : les onglets avaient d'abord été RÉTRÉCIS pour
   tous tenir sans défiler, sur l'hypothèse (jamais vérifiée sur l'appli)
   que le natif les montrait tous à la fois. Faux : SocialScreens.kt les met
   dans un `Row(...horizontalScroll...)` avec des PresetChip de taille
   NORMALE — le natif fait défiler, il ne rétrécit pas. `.social-tabs` était
   déjà scrollable (overflow-x:auto) avant ce rétrécissement inutile ; seule
   la taille des puces revient à celle de `.chip-cat`. */
.social-tab{text-decoration:none;flex:none}

.liste-serree{display:flex;flex-direction:column;gap:.5rem;list-style:none;margin:0;padding:0}
.standing{
  display:flex;align-items:center;gap:.75rem;padding:.65rem .8rem;
  border-radius:var(--r-m);background:var(--carte);
}
.standing-mine{background:var(--creme-2)}
.standing-rang{width:1.9rem;text-align:center;font-size:1.05rem;font-weight:700;color:var(--encre-2)}
.standing-rang.standing-top{color:var(--dore)}
.standing-corps{flex:1;min-width:0;display:flex;flex-direction:column}
.standing-corps b{font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--encre)}
.standing-nom-moi{color:var(--dore)}
.standing-meta{font-family:var(--f-body);font-size:.78rem;color:var(--encre-2);white-space:nowrap}
.standing-valeur{font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--accent)}

.rangee-feed{display:flex;flex-direction:column;gap:.5rem}
.feed-carte{
  background:var(--carte);border-radius:var(--r-m);box-shadow:var(--ombre-1);
  padding:.65rem .8rem;cursor:pointer;
  display:flex;flex-direction:column;gap:.3rem;
}
.feed-tete{display:flex;align-items:center;gap:.4rem}
.feed-avatar{
  width:20px;height:20px;border-radius:50%;background:var(--creme-2);
  display:flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--f-display);font-weight:700;font-size:.66rem;color:var(--encre);
  object-fit:cover;   /* quand c'est une vraie photo et non l'initiale */
}
.feed-pastille{width:7px;height:7px;border-radius:50%;flex:none}
.feed-auteur{font-family:var(--f-display);font-weight:700;font-size:.82rem;color:var(--accent);text-decoration:none}
.feed-auteur-moi{color:var(--dore)}
/* Police du corps, pas la mono : l'application n'utilise nulle part de police
   à chasse fixe, et l'écart sautait aux yeux en comparant les deux fils. */
.feed-quand{margin-left:auto;font-family:var(--f-body);font-size:.7rem;color:var(--encre-2)}
.feed-titre{margin:0;font-family:var(--f-display);font-weight:700;font-size:.94rem;color:var(--encre)}
.feed-stats-ligne{
  margin:0;font-family:var(--f-body);font-size:.78rem;color:var(--encre-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.feed-bas{display:flex;align-items:center;gap:.8rem}
.feed-kudo{font-family:var(--f-display);font-weight:700;font-size:.82rem;color:var(--encre-2);cursor:pointer}
.feed-kudo-on{color:var(--dore)}
.feed-commenter{font-family:var(--f-mono);font-size:.74rem;color:var(--encre-2)}
.feed-chevron{margin-left:auto;color:var(--encre-2);font-size:1.05rem}

.moti-card{
  display:flex;align-items:center;gap:.7rem;padding:.65rem .85rem;
  border-radius:var(--r-m);background:var(--creme-2);cursor:pointer;
  text-decoration:none;margin:1rem 0;
}
.moti-card img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.moti-card .corps{flex:1;min-width:0}
.moti-card .corps b{display:block;color:var(--encre);font-size:.9rem}
.moti-card .corps span{display:block;color:var(--encre-2);font-size:.72rem}
.moti-card .chevron{color:var(--dore);font-size:1.3rem;font-weight:700}

.wcard{
  display:flex;align-items:center;gap:.75rem;padding:.75rem;
  border-radius:var(--r-m);background:var(--carte);cursor:pointer;
  box-shadow:var(--ombre-1);margin-bottom:.6rem;
  text-decoration:none;
  width:100%;border:none;text-align:left;font:inherit;color:inherit;
}
.wcard:hover{box-shadow:var(--ombre-2)}
.wcard-ico{width:44px;height:44px;border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;flex:none}
.wcard-ico svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
/* Colonne, pas des spans inline qui se suivaient : la durée se retrouvait au
   bout de la ligne de méta et repassait à la ligne en plein milieu
   (« … ⏱ 1 h 08 en / moyenne »), là où l'application lui donne sa propre
   ligne. */
.wcard .corps{flex:1;min-width:0;display:flex;flex-direction:column}
.wcard .titre-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.wcard .titre-row b{color:var(--encre);font-size:1.05rem}
/* Punaise reprise de ic_pin.xml : petite, dorée, discrète — l'emoji 📌 rouge
   n'avait rien à voir avec le marqueur de l'application. */
.wcard .pin{width:13px;height:13px;flex:none;fill:var(--dore)}
.wcard .badge-faire{background:var(--accent);color:var(--accent-sur);font-size:.62rem;font-weight:700;padding:.15rem .55rem;border-radius:var(--r-l)}
.wcard .meta{color:var(--encre-2);font-size:.8rem;margin-top:.15rem}
.wcard .duree{color:var(--dore);font-weight:700;font-size:.8rem;margin-top:.1rem}
.wcard .chevron{color:var(--encre-2);font-size:1.5rem;flex:none}
.wcard-sec{
  display:flex;align-items:center;justify-content:space-between;
  color:var(--encre-2);font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;margin:1.1rem 0 .4rem;
}
.wcard-sec a{color:var(--dore);text-decoration:none;font-size:.72rem}

/* Pied de l'écran Entraînement — même disposition que le bloc « actions » de
   TrainingList (TrainingScreens.kt) : lien doré vers le carnet complet, deux
   boutons contour pleine largeur, puis créer + importer côte à côte. */
.pied-liste{margin-top:1.5rem;display:flex;flex-direction:column;gap:.6rem}
.pied-tout{
  background:none;border:0;padding:.35rem 0;cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:.88rem;
  color:var(--dore);text-align:center;
}
/* Les deux boutons du pied portent le texte d'accent, comme les
   OutlinedButton du natif — le gris du .btn-ghost ordinaire les rendait
   nettement plus ternes que dans l'application. */
.pied-liste .btn-ghost{width:100%;color:var(--accent)}
.pied-creer{display:flex;gap:.6rem;align-items:stretch}
.pied-creer .btn{flex:1;text-align:center}
.pied-import{
  flex:0 0 3.1rem;
  background:none;color:var(--encre-2);
  font-size:1.15rem;font-weight:700;line-height:1;
  border:1px dashed var(--encre-2);border-radius:var(--r-m);
  cursor:pointer;
}
.pied-import:hover{color:var(--accent);border-color:var(--accent)}

/* ==========================================================================
   Tutoriel de première ouverture — portage d'OnboardingScreen (Onboarding.kt)
   ========================================================================== */

body:not(.connecte) #vue:has(.onb){
  display:block;padding-top:0;width:100%;
}
.onb{
  display:flex;flex-direction:column;
  min-height:100vh;max-width:32rem;margin:0 auto;
  padding:1.5rem clamp(1.25rem,4vw,2rem) 2rem;
}
.onb-haut{display:flex;justify-content:flex-end}
.onb-corps{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2rem 0}
.onb-corps h1{font-size:1.7rem;margin:0 0 1rem}
.onb-texte{color:var(--encre-2);font-size:1rem;line-height:1.6;margin:0 0 1.25rem;white-space:pre-line}
.onb-astuce{
  background:var(--carte);color:var(--dore);font-weight:700;font-size:.84rem;
  padding:.65rem .85rem;border-radius:var(--r-m);margin:0;
}
.onb-points{display:flex;justify-content:center;gap:.4rem;padding:1rem 0}
.onb-point{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:var(--creme-2);cursor:pointer}
.onb-point.on{width:10px;height:10px;background:var(--accent)}
.onb-boutons{display:flex;gap:.65rem}
.onb-boutons .btn{flex:1}
.onb-page{text-align:center;color:var(--encre-2);font-size:.7rem;margin:.6rem 0 0}

/* ==========================================================================
   Coach IA
   ========================================================================== */

.coach-fil,.msg-fil{
  display:flex;flex-direction:column;gap:.85rem;
  min-height:20rem;max-height:60vh;overflow-y:auto;
  margin:1.5rem 0;padding:.25rem;
}
.msg-actions{margin-bottom:.75rem}
.coach-vide{padding:1rem 0}
/* En-tête (CoachScreen.kt ~112-129) : flèche, avatar Moti, identité,
   « Recommencer » à droite. */
.coach-tete{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.coach-retour{font-size:1.8rem;line-height:1;color:var(--encre);text-decoration:none;padding:0 .3rem;flex:none}
.coach-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.coach-identite{flex:1;min-width:0;display:flex;flex-direction:column}
.coach-identite b{font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--encre)}
.coach-identite span{color:var(--encre-2);font-size:.72rem}

.coach-ligne{display:flex;align-items:flex-end;gap:.4rem}
.coach-ligne.mine{justify-content:flex-end}
.coach-bulle-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}

/* Bulle « séance proposée » (CoachBubble, CoachScreen.kt ~209-227) : fond
   doré plein, texte/icône sombres — pas la teinte à 16% du bandeau de
   record, ici c'est un remplissage total. */
.coach-seance-pilule{
  display:flex;align-items:center;gap:.5rem;margin-left:32px;
  background:var(--dore);border:none;border-radius:var(--r-m);
  padding:.55rem .85rem;cursor:pointer;
}
.coach-seance-pilule img{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:none}
.coach-seance-pilule span{font-weight:700;font-size:.82rem;color:#1E2216}
.coach-bulle{
  max-width:80%;padding:.75rem 1rem;border-radius:var(--r-m);
  background:var(--carte);border:1px solid var(--trait);box-shadow:var(--ombre-1);
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;
}
.coach-ligne.mine .coach-bulle{background:var(--accent);border-color:var(--accent);color:var(--accent-sur)}
.coach-bulle p{margin:0;font-size:.94rem;line-height:1.5}
/* « Moti est en train d'écrire » : trois points qui rebondissent, à la place
   de la roue/des points statiques d'avant (CoachTypingBubble, CoachScreen.kt).
   L'état de base des points est l'état plein, pour qu'ils restent lisibles
   quand prefers-reduced-motion coupe l'animation. */
.coach-attente{display:flex;align-items:center;gap:.45rem;padding:.6rem 1rem}
.coach-attente>span:first-child{font-family:var(--f-mono);color:var(--encre-2);font-size:.82rem}
.coach-points{display:inline-flex;align-items:center;gap:.22rem}
.coach-points i{
  width:5px;height:5px;border-radius:50%;background:var(--encre-2);
  animation:coach-point 1.05s ease-in-out infinite;
}
.coach-points i:nth-child(2){animation-delay:.35s}
.coach-points i:nth-child(3){animation-delay:.7s}
@keyframes coach-point{
  0%,55%,100%{transform:translateY(0);opacity:.35}
  27%{transform:translateY(-3px);opacity:1}
}

/* Réactions emoji (Social.kt::REACTION_EMOJIS, appui long sur la bulle). */
.reac-rangee{display:flex;gap:.3rem;margin:.3rem 0 0;flex-wrap:wrap}
.reac-rangee.mine{justify-content:flex-end}
.reac-pilule{
  display:flex;align-items:center;gap:.2rem;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-pill);
  padding:.15rem .55rem;font-size:.76rem;color:var(--encre-2);cursor:pointer;
  font-family:var(--f-body);
}
.reac-pilule.mine{background:var(--accent-voile);border-color:var(--accent-halo);color:var(--accent)}
.reac-choix{display:flex;justify-content:center;gap:.7rem;margin:.4rem 0 .8rem}
.reac-emoji{
  background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;
  padding:.3rem;border-radius:var(--r-pill);
}
.reac-emoji:hover{background:var(--creme-2)}

/* En-tête de conversation (ChatThreadScreen, ChatScreens.kt) : flèche
   retour séparée, puis toute la ligne (avatar + pseudo) ouvre le profil. */
.msg-tete{display:flex;align-items:center;gap:.4rem;margin-bottom:1rem}
.msg-retour{
  font-size:1.8rem;line-height:1;color:var(--encre);text-decoration:none;
  padding:0 .4rem;flex:none;
}
.msg-tete-lien{
  display:flex;align-items:center;gap:.6rem;flex:1;min-width:0;
  text-decoration:none;color:inherit;
}
.msg-tete-lien b{
  font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--encre);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.msg-avatar{
  width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--accent);color:var(--accent-sur);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;
}
.msg-plus{flex:none;font-weight:700;font-size:1.1rem;padding:.72rem .95rem}

/* En-tête de groupe (GroupScreens.kt ~527-542) : avatar VIDE (pas de
   bannière côté web), flèche retour + « Inviter » à droite. */
.groupe-tete{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.groupe-avatar{width:34px;height:34px;border-radius:50%;background:var(--creme-2);flex:none}

/* Carte d'un groupe dans « Mes groupes » (GroupCard, GroupScreens.kt) : carré
   arrondi, bannière si le groupe en a une, sinon l'initiale du nom — absent
   du web jusqu'ici (seule la ligne .groupe-avatar du DÉTAIL d'un groupe,
   volontairement vide côté natif, existait). */
.groupe-carte-avatar{
  width:52px;height:52px;border-radius:var(--r-s);flex:none;
  background:var(--creme-2);object-fit:cover;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:700;font-size:1.15rem;color:var(--encre-2);
}
/* Même avatar, plus petit, dans les résultats de recherche
   (GroupSearchRow, GroupScreens.kt). */
.groupe-carte-avatar-sm{width:40px;height:40px;border-radius:var(--r-s);font-size:.95rem}
.groupe-nom{
  flex:1;min-width:0;font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--encre);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.msg-quand{margin:.2rem 0 0;font-size:.62rem}
.coach-ligne .msg-quand{color:var(--encre-2)}
.coach-ligne.mine .msg-quand{color:color-mix(in srgb, var(--accent-sur) 60%, transparent)}

.coach-saisie{display:flex;gap:.6rem;position:sticky;bottom:1rem}
/* En mobile, la barre du bas est en position:fixed — indépendante du flux,
   donc invisible pour un « sticky ». Le champ était décalé d'une valeur
   devinée en rem, ce qui laissait un grand vide entre lui et la barre
   (signalé par Nicolas) : il s'appuie maintenant sur la hauteur réelle
   mesurée de la barre (--barre-bas), sans écart deviné. */
@media (max-width:820px){
  /* Le champ se cale sur la hauteur mesurée de la barre, plus aucun écart
     deviné en rem. */
  .coach-saisie{bottom:var(--barre-bas)}

  /* Mais le vrai coupable du « grand espace » était ailleurs : une page de
     discussion courte s'arrêtait au milieu de l'écran, et un élément collant
     ne descend jamais plus bas que sa position dans le flux. L'écran de
     discussion occupe donc maintenant TOUTE la hauteur utile, fil extensible
     et champ posé au fond — comme l'écran natif. La marge négative annule le
     padding de #vue sous la page pour que le champ touche la barre.
     (position:fixed serait plus direct, mais l'animation d'entrée de #vue>*
     pose un transform qui en fait le référentiel des éléments fixes.) */
  /* HAUTEUR FIXE, PAS UN MINIMUM — c'est toute la différence. Avec un
     `min-height`, une discussion longue faisait grandir la page au-delà de
     l'écran : le fil ne défilait plus par lui-même (son overflow ne servait
     à rien puisqu'il n'était jamais à l'étroit), c'était la PAGE qui
     défilait, et le champ collant se posait alors PAR-DESSUS la fin du fil.
     À l'ouverture, la dernière réponse de Moti se retrouvait cachée derrière
     la zone de saisie — signalé par Nicolas. Une hauteur ferme redonne au fil
     son rôle de zone défilante : le champ reste dessous, jamais devant, et
     `fil.scrollTop = fil.scrollHeight` retombe bien sur le dernier message. */
  .page.msg-thread,.page.coach{
    height:calc(var(--haut-visuel) - var(--barre-bas) - var(--haut-appbar) - var(--pad-vue));
    margin-bottom:calc(-1 * var(--pad-vue));
    display:flex;flex-direction:column;
  }
  .msg-thread .msg-fil,.coach .coach-fil{flex:1;min-height:0;max-height:none;margin-bottom:.8rem}
}
.coach-saisie input{
  flex:1;padding:.72rem .9rem;font-family:var(--f-body);font-size:.94rem;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-pill);color:var(--encre);
}
.coach-saisie input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-halo)}

/* ==========================================================================
   Bilan de fin de séance — portage de SummaryScreen (TrainingScreens.kt) :
   charge totale, temps global/sous tension, carte musculaire, détail
   modifiable par exercice, partage. Écarts assumés : pas de zoom plein écran
   ni de bulle de nom sur la carte musculaire, pas de pavé numérique dédié
   (édition par prompt()), pas de rattachement manuel des exercices non
   reconnus par le lexique.
   ========================================================================== */

.bilan-grande{
  margin:1.1rem 0 .7rem;padding:1.1rem 1.2rem;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-m);
  display:flex;flex-direction:column;gap:.3rem;
}
.bilan-grande-label{font-size:.8rem;color:var(--encre-2)}
.bilan-grande-valeur{
  font-family:var(--f-display);font-weight:700;font-size:2.1rem;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.bilan-petites{display:flex;gap:.7rem;margin-bottom:.5rem}
.bilan-petite{
  flex:1;padding:.85rem 1rem;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r-m);display:flex;flex-direction:column;gap:.25rem;
}
.bilan-petite .label{font-size:.76rem;color:var(--encre-2)}
.bilan-petite .valeur{font-family:var(--f-display);font-weight:700;font-size:1.15rem;color:var(--encre);font-variant-numeric:tabular-nums}

.bilan-souscat{
  margin:1.3rem 0 .5rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--encre-2);
}
.bilan-canvas{width:100%;display:block;border-radius:var(--r-m);background:var(--carte);border:1px solid var(--trait)}
.bilan-faces{display:flex;margin-top:.4rem}
.bilan-faces span{flex:1;text-align:center;font-size:.72rem;color:var(--encre-2)}
.bilan-degrade-row{display:flex;align-items:center;gap:.5rem;margin-top:.6rem}
.bilan-degrade-row>span{font-size:.66rem;color:var(--encre-2);flex:none}
.bilan-degrade{flex:1;border-radius:4px;display:block}
.bilan-inconnus{margin:.6rem 0 0;font-size:.74rem;color:var(--encre-2)}

/* ==========================================================================
   Analyse — onglets Records/Volume/Progression (StatsScreens.kt), navigation
   semaine, calculateur de disques.
   ========================================================================== */

.analyse-entete{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.analyse-entete h1{margin:0}

.semaine-nav{display:flex;align-items:center;gap:.75rem;margin:.25rem 0 1rem}
.semaine-nav button{
  width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--encre-2);
  background:transparent;color:var(--encre);font-size:1.05rem;cursor:pointer;flex:none;
  font-family:var(--f-display);
}
.semaine-nav button:disabled{opacity:.35;cursor:default}
.semaine-nav span{flex:1;text-align:center;font-family:var(--f-display);font-weight:700;font-size:.92rem}

.groupe-volume{margin-bottom:.85rem}
.groupe-volume-tete{display:flex;align-items:baseline;gap:.4rem}
.groupe-volume-tete .nom{flex:1;color:var(--encre);font-size:.92rem}
.groupe-volume-tete .sets{color:var(--dore);font-weight:700;font-size:.92rem}
.groupe-volume-tete .kg{color:var(--encre-2);font-size:.78rem}
.groupe-volume-barre{height:8px;border-radius:4px;background:var(--creme-2);margin-top:.35rem;overflow:hidden}
.groupe-volume-barre>span{display:block;height:100%;background:var(--accent);border-radius:4px}

.sparkline-wrap{margin-top:.5rem}
.sparkline-minmax{display:flex;justify-content:space-between;font-size:.72rem;color:var(--encre-2)}
.sparkline-canvas{width:100%;height:150px;display:block}

.progression-trio{display:flex;gap:1rem;margin-top:1.1rem}
.progression-trio>div{flex:1;min-width:0}
.progression-trio span{display:block;font-size:.68rem;color:var(--encre-2)}
.progression-trio b{display:block;font-size:1rem;color:var(--encre);margin:.15rem 0;font-family:var(--f-display)}
.progression-trio .evolution-pos{color:var(--accent)}
.progression-trio .evolution-neg{color:var(--accent2)}

.bilan-exo{
  padding:.9rem 1rem;margin-bottom:.6rem;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-m);
}
.bilan-exo-tete{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.bilan-exo-tete b{font-size:1rem;color:var(--encre);font-weight:700}
.bilan-exo-drop{
  background:none;border:none;color:var(--encre-2);font-size:1.1rem;cursor:pointer;
  padding:.15rem .4rem;line-height:1;
}
.bilan-exo-drop:hover{color:var(--accent2)}
.bilan-exo-meta{margin:.2rem 0 .7rem;font-size:.78rem;color:var(--encre-2)}
.bilan-serie-row{display:flex;align-items:center;gap:.5rem;padding:.2rem 0}
.bilan-serie-idx{width:1.3rem;font-size:.78rem;color:var(--encre-2);font-weight:700;flex:none}
.bilan-cell{
  flex:1;padding:.45rem .5rem;text-align:center;font-variant-numeric:tabular-nums;
  background:var(--creme-2);border:none;border-radius:var(--r-s);color:var(--encre);
  font-family:var(--f-body);font-size:.9rem;cursor:pointer;
}
.bilan-cell:hover{box-shadow:0 0 0 2px var(--accent-halo)}
.bilan-x{color:var(--encre-2);font-size:.85rem;padding:0 .2rem;flex:none}
.bilan-suppr-serie{
  background:none;border:none;color:var(--accent2);font-weight:700;font-size:1rem;
  cursor:pointer;padding:.2rem .5rem;flex:none;
}
.bilan-ajouter-serie{width:100%;margin-top:.5rem}

.bilan-diverge{
  margin:1rem 0;padding:.9rem 1rem;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-m);
}
.bilan-diverge h3{margin:0 0 .3rem;font-size:.95rem;color:var(--encre)}
.bilan-diverge p{margin:0;font-size:.8rem;color:var(--encre-2);line-height:1.4}
.bilan-diverge .btn,.bilan-diverge .btn-ghost{width:100%;margin-top:.6rem}

/* ==========================================================================
   Pavé numérique dédié — NumPadDialog (TrainingScreens.kt)
   ========================================================================== */

.pave-numerique{text-align:center}
/* Sur un écran bas de plafond (paysage, petit téléphone), le pavé dépassait et
   le bouton OK sortait de la boîte : seul le pavé défile, les boutons restent
   collés en bas. Même parade que NumPadDialog côté natif. */
.pave-defile{flex:1;min-height:0;overflow-y:auto}
.pave-titre{
  margin:0;font-family:var(--f-mono);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);
}
.pave-valeur{
  margin:.5rem 0 1.1rem;font-family:var(--f-display);font-weight:700;font-size:2.6rem;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.pave-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.2rem}
.pave-touche{
  aspect-ratio:1;border-radius:50%;font-family:var(--f-display);font-weight:600;font-size:1.3rem;
  background:var(--creme-2);border:none;color:var(--encre);cursor:pointer;
}
.pave-touche:active{background:var(--accent-halo)}

/* Charge négative (délestage) sur un mouvement au poids du corps. */
.pave-valeur-moins{color:var(--alerte)}
.pave-signe{
  width:100%;margin:0 0 1.1rem;padding:.7rem 1rem;border:none;cursor:pointer;
  border-radius:var(--r-pill);background:var(--creme-2);color:var(--encre);
  font-family:var(--f-display);font-weight:600;font-size:1rem;
}
.pave-signe.on{background:var(--alerte);color:#fff}

/* Pavé de durée : les minutes et les secondes se touchent séparément. */
.pave-duree{
  margin:.5rem 0 .2rem;display:flex;align-items:center;justify-content:center;gap:.15rem;
}
.pave-duree .pave-sep{
  font-family:var(--f-display);font-weight:700;font-size:2.6rem;color:var(--encre-2);
}
.pave-seg{
  border:none;cursor:pointer;background:transparent;border-radius:var(--r-s);
  padding:.05rem .5rem;font-family:var(--f-display);font-weight:700;font-size:2.6rem;
  color:var(--encre);font-variant-numeric:tabular-nums;line-height:1.1;
}
.pave-seg.on{background:var(--accent-halo);color:var(--accent)}
.pave-duree-aide{
  margin:0 0 1rem;font-family:var(--f-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}

/* ==========================================================================
   Bannière de record — PrBanner (TrainingScreens.kt)
   ========================================================================== */

.run-pr-banniere{
  margin:0 0 .8rem;padding:.6rem .8rem;text-align:center;border-radius:var(--r-s);
  background:color-mix(in srgb, var(--dore) 16%, transparent);
  color:var(--dore);font-weight:700;font-size:.85rem;
}

/* ==========================================================================
   Suivi en direct — LiveBanner (fil) et LiveSessionScreen (écran dédié)
   ========================================================================== */

.fil-direct-titre{
  margin:1.2rem 0 .5rem;font-family:var(--f-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent2);
}
.fil-direct-ligne{
  display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  padding:.7rem .9rem;margin-bottom:.5rem;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r-m);cursor:pointer;font:inherit;color:inherit;text-decoration:none;
}
.fil-direct-point{width:8px;height:8px;border-radius:50%;background:var(--accent2);flex:none}
.fil-direct-corps{flex:1;min-width:0}
.fil-direct-corps b{display:block;font-size:.92rem;color:var(--encre)}
.fil-direct-corps span{
  display:block;font-size:.76rem;color:var(--encre-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fil-direct-regarder{color:var(--accent);font-weight:700;font-size:.76rem;flex:none}

.profil-direct{
  display:flex;align-items:center;gap:.4rem;margin:.4rem 0 0;
  color:var(--accent2);font-weight:700;font-size:.8rem;text-decoration:none;
}
.profil-direct .fil-direct-point{width:7px;height:7px}

.direct-carte{
  padding:1rem 1.1rem;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r-l);margin-top:1.2rem;
}
.direct-entete{display:flex;align-items:center;gap:.5rem}
.direct-label{
  font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--accent2);
}
.direct-depuis{margin-left:auto;font-size:.72rem;color:var(--encre-2)}
.direct-titre{margin:.5rem 0 0;font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--encre)}
.direct-exo{margin-top:.9rem}
.direct-exo-nom{margin:0 0 .3rem;font-weight:700;font-size:.9rem;color:var(--encre)}
.direct-exo-nom.courant{color:var(--accent)}
.direct-exo-meta{margin:.5rem 0 0;color:var(--encre-2);font-size:.85rem}
.direct-series{list-style:none;margin:0;padding:0;font-family:var(--f-mono);font-size:.8rem;color:var(--encre-2)}
.direct-series li{padding:.1rem 0}
.direct-en-cours{color:var(--accent);font-weight:700}

/* Panneau « réservé aux abonnés » (coach IA, génération de programme).
   Sobre et sans bouton d'achat tant qu'aucun moyen de paiement n'est
   branché : promettre un tunnel qui n'existe pas serait pire que rien. */
.coach-abonnement{
  margin:.8rem;padding:1rem 1.1rem;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-m);
}
.coach-abonnement b{display:block;color:var(--encre);font-size:.98rem;margin-bottom:.5rem}
.coach-abonnement p{margin:0 0 .6rem;color:var(--encre-2);font-size:.9rem;line-height:1.5}
.coach-abonnement p:last-child{margin-bottom:0;font-size:.8rem}