/* ============================================================================
   styles.css — Design system + responsive (console desktop / app mobile)
   Identité « plateau la nuit » : palette disques calibrés + display condensée.
   ========================================================================== */

/* --- police d'affichage embarquée (offline, précachée par sw.js) ---------- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/oswald-latin.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: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/oswald-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;
}

:root {
  --bg: #0B0C0F;            /* plateau (fond) */
  --bg-2: #14161B;          /* acier (surface) */
  --bg-3: #1D2027;          /* wells / éléments imbriqués */
  --line: #2B2F38;
  --text: #F3F5F8;          /* craie — aussi lumière « good lift » */
  --muted: #8B93A0;
  --accent: #E23A34;        /* rouge disque 25 kg — accent & signature */
  --accent-2: #F26A3D;
  --ok: #33A852;            /* vert disque 10 kg — statut réglé/terminé */
  /* disques calibrés (couleurs fonctionnelles pour données/charges) */
  --p20: #2E63E6;           /* bleu 20 kg */
  --p15: #F2B01E;           /* jaune 15 kg */
  --p10: #33A852;           /* vert 10 kg */
  /* --- tokens dérivés (Lot 0 mode clair) : chaque valeur reprend À L'IDENTIQUE
     un littéral qui vivait en dur dans les règles — zéro changement visuel.
     C'est la surface que le thème clair redéfinira. ------------------------- */
  --warn: #d9a441;              /* ambre invitations / en attente (ex-fantôme) */
  --load-dim: rgba(226,58,52,.14); /* fond pilule de charge (ex-fantôme) */
  --line-hover: #3b4759;        /* bordure au survol des cartes/lignes */
  --on-accent: #fff;            /* texte posé sur un aplat accent/ok */
  --danger: #ff6b6b;            /* rouge lisible sur sombre (actions destructives) */
  --danger-soft: #ff8a86;       /* erreur de connexion, lien démo */
  --danger-dim: #ff9b9b;        /* badge paiement en retard */
  --danger-line: #5a2c2c;       /* bordure du badge retard */
  --ok-soft: #7ee2a8;           /* vert doux : payé, record battu */
  --ok-line: #2c5a3c;           /* bordure verte sombre */
  --ok-strong: #2ea043;         /* pastille « payé » */
  --info-soft: #8fbcff;         /* bleu doux : mois offert */
  --info-soft-2: #9db8ff;       /* bleu doux : libellé mot du coach */
  --info-line: #2c4a6a;         /* bordure bleue sombre */
  --info-strong: #1f6feb;       /* pastille « offert » */
  --media-bg: #000;             /* fond des lecteurs vidéo / youtube */
  --scrim: rgba(11, 12, 15, .82);   /* voile des overlays plein écran */
  --scrim-2: rgba(11, 12, 15, .85); /* voile éditeur / import */
  --scrim-hard: rgba(0,0,0,.72);    /* voile modale vidéo */
  --shadow-hover: 0 12px 28px rgba(0,0,0,.30);
  --shadow-hover-sm: 0 8px 20px rgba(0,0,0,.25);
  --sheen: rgba(255,255,255,.015);  /* texture de l'écran de connexion */
  /* écran de connexion — le plateau la nuit */
  --login-photo: url('../img/login-plateau.webp');
  --login-photo-pos: center 62%;    /* la barre reste sous la carte */
  --login-veil: linear-gradient(180deg, rgba(11,12,15,.58) 0%, rgba(11,12,15,.26) 30%, rgba(11,12,15,.38) 60%, rgba(11,12,15,.86) 100%);
  --login-card-bg: rgba(20,22,27,.74);
  --login-card-line: rgba(255,255,255,.10);
  --login-card-shadow: 0 24px 64px rgba(0,0,0,.60);
  /* halo du texte posé à même la photo : deux couches (net + diffus) — on garde
     la photo lumineuse au lieu de l'assombrir pour rendre le texte lisible */
  --login-on-photo: 0 1px 2px rgba(0,0,0,.90), 0 2px 14px rgba(0,0,0,.75);
  /* triplets r,g,b — pour les fonds/halos en rgba(var(--x-rgb), α) */
  --accent-rgb: 226,58,52;      /* = --accent */
  --accent-hi-rgb: 245,65,63;   /* rouge « chaud » des glows/badges actifs */
  --ok-rgb: 51,168,82;          /* = --ok */
  --ok-strong-rgb: 46,160,67;   /* = --ok-strong */
  --info-strong-rgb: 31,111,235;/* = --info-strong */
  --p20-rgb: 46,99,230;         /* = --p20 */
  --p15-rgb: 242,176,30;        /* = --p15 */
  --warn-rgb: 217,164,65;       /* = --warn */
  --line-rgb: 43,47,56;         /* = --line */
  --text-rgb: 243,245,248;      /* = --text */
  /* palette des GRAPHIQUES — calibrée sur fond sombre, voir js/progression.js */
  --chart-squat: #E23A34;
  --chart-bench: #2E63E6;
  --chart-deadlift: #BC8A14;
  --chart-other: #7A8496;
  --radius: 12px;
  --shadow: 0 10px 34px rgba(0,0,0,.45);
  --elev-card: none;        /* élévation au repos : NÉANT en sombre (inchangé) ;
                               le thème clair « craie » y met une ombre douce */
  --font-disp: 'Oswald', 'Bahnschrift', 'Arial Narrow', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--font-body);
}

/* ==========================================================================
   MODE CLAIR — « craie sur papier » (Parti B, validé le 24/07/2026)
   Ne redéfinit QUE les tokens : aucun sélecteur de composant ne connaît le
   thème (règle d'architecture du chantier). Le sombre reste le défaut ;
   ce bloc s'active via data-theme="light" sur <html> (posé par theme-init.js
   au lancement, puis par le toggle). Contrastes recalculés au Lot 3 (WCAG AA).
   ========================================================================== */
html[data-theme="light"] {
  --bg: #F7F7F4;            /* craie (fond papier) */
  --bg-2: #FFFFFF;          /* surface (cartes) */
  --bg-3: #EFEFE9;          /* wells / éléments imbriqués */
  --line: #E4E4DB;          /* filet doux */
  --text: #1A1A17;          /* encre */
  --muted: #6B6B62;
  --accent: #D0342C;        /* rouge disque 25 assombri pour tenir sur blanc */
  --accent-2: #B84A24;      /* orange secondaire assombri (hover primaire, jauge) */
  --ok: #237A3C;            /* vert disque 10 assombri */
  --p20: #2C55C4;           /* bleu 20 */
  --p15: #8A6410;           /* jaune 15 → ambre foncé (illisible en clair sinon) */
  --p10: #237A3C;           /* vert 10 */
  --warn: #977013;
  --load-dim: rgba(208,52,44,.10);
  --line-hover: #C9C9BE;
  --on-accent: #fff;        /* le texte reste blanc sur les aplats accent/ok */
  --danger: #B3261E;
  --danger-soft: #B3261E;
  --danger-dim: #B3261E;
  --danger-line: #EBC0BD;
  --ok-soft: #1E6C35;
  --ok-line: #B5D6BE;
  --ok-strong: #237A3C;
  --info-soft: #2C55C4;
  --info-soft-2: #2C55C4;
  --info-line: #BFCCEE;
  --info-strong: #2C55C4;
  --media-bg: #000;         /* lecteurs vidéo : fond noir dans les deux thèmes */
  --scrim: rgba(32,32,29,.42);      /* voile des overlays (dim le fond clair) */
  --scrim-2: rgba(32,32,29,.52);
  --scrim-hard: rgba(0,0,0,.72);    /* modale vidéo : entourage noir, inchangé */
  --shadow-hover: 0 12px 28px rgba(26,26,23,.14);
  --shadow-hover-sm: 0 8px 20px rgba(26,26,23,.10);
  --sheen: rgba(0,0,0,.02);         /* texture login : sombre sur clair */
  /* écran de connexion — version craie : la photo claire, très en retrait */
  --login-photo: url('../img/login-plateau-clair.webp');
  --login-photo-pos: center 62%;
  --login-veil: linear-gradient(180deg, rgba(247,247,244,.86) 0%, rgba(247,247,244,.72) 34%, rgba(247,247,244,.84) 62%, rgba(247,247,244,.97) 100%);
  --login-card-bg: rgba(255,255,255,.88);
  --login-card-line: rgba(26,26,23,.10);
  --login-card-shadow: 0 24px 64px rgba(26,26,23,.16);
  --login-on-photo: 0 1px 2px rgba(247,247,244,.95), 0 2px 14px rgba(247,247,244,.85);
  /* triplets r,g,b — DOIVENT suivre leur token de couleur ci-dessus */
  --accent-rgb: 208,52,44;
  --accent-hi-rgb: 208,52,44;
  --ok-rgb: 35,122,60;
  --ok-strong-rgb: 35,122,60;
  --info-strong-rgb: 44,85,196;
  --p20-rgb: 44,85,196;
  --p15-rgb: 151,112,19;
  --warn-rgb: 151,112,19;
  --line-rgb: 228,228,219;
  --text-rgb: 26,26,23;
  /* palette GRAPHIQUES claire — VALIDÉE au validateur dataviz (24/07) sur les
     deux surfaces (#FFFFFF carte ET #F7F7F4 craie) : bande L, chroma, contraste
     ≥3:1, et surtout séparation daltonisme. Le piège rouge/ambre sur blanc a
     imposé de REMONTER le jaune (assombri, rouge et ambre s'effondraient sous
     deutéranopie, ΔE 2.0) : #C57E05 rétablit ΔE deutan 8.6 (cible ≥8) tout en
     gardant ≥3:1 sur craie. « Autre » reste neutre (gris 4.6:1, hors catégoriel). */
  --chart-squat: #D0342C;
  --chart-bench: #2C55C4;
  --chart-deadlift: #C57E05;
  --chart-other: #71716A;
  --shadow: 0 10px 34px rgba(26,26,23,.14);
  --elev-card: 0 1px 2px rgba(26,26,23,.04), 0 6px 20px rgba(26,26,23,.06);
}

* { box-sizing: border-box; }
/* l'attribut hidden gagne TOUJOURS (sinon un display:flex/grid posé par une
   classe l'écrase silencieusement — déjà mordu deux fois) */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100%; }

a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
h1, h2, h3 { margin: 0; line-height: 1.1; font-family: var(--font-disp); font-weight: 700; letter-spacing: .01em; }

/* ==========================================================================
   TYPOGRAPHIE — la display condensée porte l'identité (« le poids est le héros »)
   ========================================================================== */
/* labels / kickers / eyebrows : condensé, capitales, interlettrage marqué */
.hero-kicker, .today-kicker, .daymon-kicker, .prog-week h2, .set-row.head,
.nopr-label, .badge, .badge-active, .brand, .month-abbr, .year-label,
.pr-lift, .pr-card-lift, .fee-label, .empty-icon + h2, .sec-label {
  font-family: var(--font-disp);
}
.hero-kicker, .today-kicker, .daymon-kicker, .prog-week h2,
.set-row.head, .nopr-label { letter-spacing: .14em; }

/* chiffres : display condensée + chiffres tabulaires (colonnes alignées) */
.pr-card-value, .nopr-num, .year-label, .month-mark, .pr-card-lift,
.set-in, .set-table input, .monitor-table, .pay-table, .fee-input input,
.set-plan, .today-exos li, .hero-progress, .session-progress {
  font-variant-numeric: tabular-nums;
}
.pr-card-value, .nopr-num, .year-label, .month-mark {
  font-family: var(--font-disp); font-weight: 700;
}

/* boutons : capitales condensées = CTA « barre » */
.btn { font-family: var(--font-disp); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.btn.big { text-transform: none; letter-spacing: .02em; }  /* boutons de rôle (login) : lecture longue */
.nav-link, .ptab, .tab span { font-family: var(--font-disp); letter-spacing: .04em; }

/* --- boutons -------------------------------------------------------------- */
.btn {
  font: inherit; font-family: var(--font-disp); cursor: pointer; border: 1px solid var(--line);
  background: var(--bg-3); color: var(--text);
  padding: .55rem .9rem; border-radius: 10px; transition: .15s;
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn:hover { border-color: var(--line-hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); }
.btn.small { padding: .35rem .6rem; font-size: .82rem; }
.btn.big { width: 100%; justify-content: flex-start; padding: 1rem; font-size: 1rem; text-align: left; }
.btn.block-btn { width: 100%; justify-content: center; margin-top: 1rem; padding: .9rem; }
.icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; }
.icon-btn:hover { color: var(--danger); }

.badge { background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; color: var(--muted); }

input, select {
  font: inherit; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: .45rem .55rem;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }

/* --- barre de progression ------------------------------------------------- */
.progress { background: var(--bg-3); border-radius: 999px; height: 8px; overflow: hidden; flex: 1; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s; }

/* --- icônes (Lucide, SVG inline) ------------------------------------------ */
.ico { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* --- marque --------------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: .6rem; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-text { display: flex; flex-direction: column; gap: .1rem; line-height: 1; }
.brand-word { font-family: var(--font-disp); font-weight: 700; font-size: 1.35rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.brand-word b { color: var(--accent); font-weight: 700; }
.brand-tag { font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .26em; font-size: .58rem; color: var(--muted); }
/* variante hero (login) : mark + wordmark plus grands */
.brand-lg .brand-mark { width: 42px; height: 42px; }
.brand-lg .brand-word { font-size: 1.9rem; }
.brand-lg .brand-tag { font-size: .64rem; letter-spacing: .24em; }

/* ==========================================================================
   ÉCRAN DE CONNEXION
   ========================================================================== */
/* Fond « plateau la nuit » : la photo est le sol, la carte est la lumière.
   Tout passe par des tokens → le thème clair rejoue LA MÊME SCÈNE en plein
   jour (basculer de thème fait passer le plateau de la nuit au matin), avec
   un voile pâle qui la réduit à un fantôme dans le papier. Si l'image ne
   charge pas, --bg reste dessous : l'écran est lisible en toute circonstance. */
.login {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem; gap: 1rem;
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(135deg, var(--sheen) 0 2px, transparent 2px 9px),
    var(--login-veil),
    var(--login-photo);
  background-size: auto, cover, cover;
  background-position: center, center, var(--login-photo-pos);
  background-repeat: repeat, no-repeat, no-repeat;
}
.login-card {
  background: var(--login-card-bg); border: 1px solid var(--login-card-line); border-radius: var(--radius);
  padding: 2rem; width: 100%; max-width: 420px; box-shadow: var(--login-card-shadow);
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
.login-card h1 { margin: 1rem 0 .25rem; font-size: 1.4rem; }
.login-card .brand { font-size: 1.1rem; }
.login-card .btn.big { margin-top: 1.5rem; }
.role-ico { color: var(--on-accent); }
.login-divider { display: flex; align-items: center; gap: .75rem; color: var(--muted); margin: 1.25rem 0 .75rem; font-size: .8rem; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.athlete-pick { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.login-foot { margin: 0; }
/* tout ce qui vit HORS de la carte est posé à même la photo : mention légale,
   invite démo, « Réinitialiser la démo »… text-shadow s'hérite, une seule règle
   suffit et couvre aussi ce qu'on ajoutera plus tard. */
.login > :not(.login-card) { text-shadow: var(--login-on-photo); }
/* CTA démo mis en valeur — les prospects (arrivant du réel) doivent le voir tout de suite */
.demo-invite { width: 100%; max-width: 420px; text-align: center; margin-top: .25rem; }
.demo-invite-lead { margin: 0 0 .55rem; font-size: .9rem; color: var(--muted); }
.demo-invite-lead strong { color: var(--text); }
.btn.demo-hero {
  width: 100%; justify-content: center; gap: .55rem;
  padding: 1rem; font-size: 1.02rem; font-weight: 600;
  text-transform: none; letter-spacing: .01em;
  color: var(--ok-soft);
  background: rgba(var(--ok-strong-rgb), .14);
  border: 1.5px solid rgba(var(--ok-strong-rgb), .55);
  border-radius: 12px;
  animation: demoGlow 2.8s ease-in-out infinite;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);  /* posé sur la photo */
}
.btn.demo-hero:hover { background: rgba(var(--ok-strong-rgb), .22); border-color: var(--ok-strong); }
.btn.demo-hero .role-ico { color: var(--ok-soft); }
@keyframes demoGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ok-strong-rgb), 0); }
  50% { box-shadow: 0 0 24px 2px rgba(var(--ok-strong-rgb), .30); }
}
@media (prefers-reduced-motion: reduce) { .btn.demo-hero { animation: none; } }
/* connexion cloud (comptes réels) */
.cloud-form { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }
.cloud-form input { padding: .7rem .8rem; font-size: 1rem; }
.cloud-form .btn.big { margin-top: .5rem; justify-content: center; text-align: center; }
.login-error { color: var(--danger-soft); margin: 0; }
.role-pick { display: flex; gap: .5rem; }
.role-pick .btn { flex: 1; justify-content: center; }
.coach-code { justify-content: flex-start; text-align: left; }
.coach-code strong { font-family: var(--font-disp); letter-spacing: .12em; color: var(--accent); margin-left: .3rem; }
.admin-coach .list { margin-top: .6rem; }
.reset-demo { margin-top: .35rem; color: var(--muted); border-color: transparent; font-weight: 400; text-transform: none; letter-spacing: normal; }
.reset-demo:hover { border-color: var(--line); color: var(--text); }

/* ==========================================================================
   CONSOLE COACH (desktop)
   ========================================================================== */
.console { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
/* sidebar collante : elle reste à l'écran au défilement des longues pages
   (éditeur…), donc « Se déconnecter » (pied) est toujours accessible. */
.sidebar {
  background: var(--bg-2); border-right: 1px solid var(--line);
  padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 1.5rem;
  position: sticky; top: 0; height: 100vh; align-self: start;
}
.sidebar nav { display: flex; flex-direction: column; gap: .25rem; }
.nav-link { display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; border-radius: 9px; color: var(--muted); font-weight: 500; }
.nav-link:hover { background: var(--bg-3); color: var(--text); }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }

/* ==========================================================================
   TABLEAU D'ORDRE DE PASSAGE (tableau de bord coach)
   Des LIGNES, pas des cartes : 4 cartes tiennent à l'écran, 20 athlètes non.
   Le liseré reprend les couleurs des disques calibrés — on lit l'état d'une
   ligne comme on lit une barre chargée depuis l'autre bout de la salle.
   ========================================================================== */
.roster { display: flex; flex-direction: column; gap: .3rem; }
.roster-group { display: flex; align-items: center; gap: .55rem; margin: 1.3rem 0 .45rem; }
.roster-group:first-child { margin-top: 0; }
.roster-group .lbl {
  font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .13em;
  font-size: .7rem; color: var(--muted);
}

.ath-row {
  display: grid;
  grid-template-columns: 4px minmax(160px, 1.5fr) minmax(180px, 1.6fr) 104px 20px;
  align-items: center; gap: 1rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: .7rem .9rem .7rem 0; overflow: hidden; cursor: pointer;
  box-shadow: var(--elev-card);
  transition: border-color .15s, transform .12s;
}
.ath-row:hover { border-color: var(--line-hover); transform: translateX(2px); }
.ath-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* la signature : le liseré de disque, pleine hauteur */
.ath-row .plate { align-self: stretch; margin: -.7rem 0; border-radius: 10px 0 0 10px; }
.plate.p-25 { background: var(--accent); }
.plate.p-20 { background: var(--p20); }
.plate.p-15 { background: var(--p15); }
.plate.p-10 { background: var(--ok); }

.ath-row .who { min-width: 0; padding-left: .9rem; }
.ath-name { font-family: var(--font-disp); font-size: 1.05rem; font-weight: 500; letter-spacing: .01em; }
.ath-row .signal { font-size: .82rem; color: var(--muted); margin-top: .05rem; }
.ath-row .signal .hot { color: var(--accent); font-weight: 600; }

.ath-blk { min-width: 0; }
.blk-name { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-none { font-size: .84rem; color: var(--muted); font-style: italic; }
.ath-blk .progress { margin-top: .4rem; }
.blk-meta { font-size: .74rem; color: var(--muted); margin-top: .25rem; font-variant-numeric: tabular-nums; }

.ath-pay { text-align: right; }
.ath-row .chev { color: var(--muted); text-align: right; font-size: 1.1rem; }

/* téléphone : la ligne se replie en deux étages, aucune colonne sacrifiée */
@media (max-width: 720px) {
  .ath-row {
    grid-template-columns: 4px 1fr auto;
    grid-template-areas: 'plate who pay' 'plate blk blk';
    row-gap: .5rem; padding-right: .7rem;
  }
  .ath-row .plate { grid-area: plate; }
  .ath-row .who { grid-area: who; }
  .ath-pay { grid-area: pay; }
  .ath-blk { grid-area: blk; padding-left: .9rem; }
  .ath-row .chev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ath-row { transition: none; }
  .ath-row:hover { transform: none; }
}

/* code coach : c'est LA clé d'entrée des athlètes → bien visible dans la barre */
.coach-code-card {
  background: var(--bg-3); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: .7rem .8rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
}
.ccc-label { font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: var(--muted); }
.ccc-code {
  font-family: var(--font-disp); font-size: 1.5rem; line-height: 1.1;
  letter-spacing: .14em; color: var(--accent); user-select: all;
}
.ccc-hint { font-size: .72rem; color: var(--muted); line-height: 1.35; }

/* NB : pas d'overflow-x ici (casserait les en-têtes collants de l'éditeur) ;
   les tables larges gèrent leur propre défilement en petit écran. */
/* min-width:0 est INDISPENSABLE : un élément de grille vaut min-width:auto par
   défaut, donc cette colonne refusait de rétrécir sous la largeur de son
   contenu et poussait toute la console hors de l'écran (barre de défilement
   horizontale, boutons et onglets coupés entre ~720px et ~1000px). */
.console-main { padding: 1.5rem 2rem; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.topbar h1 { font-size: 1.5rem; flex: 1; }
.topbar-actions { display: flex; gap: .5rem; }
.title-input { flex: 1; font-size: 1.3rem; font-weight: 700; background: transparent; border: 1px solid transparent; padding: .3rem .5rem; }
.title-input:hover, .title-input:focus { border-color: var(--line); }

/* cartes de blocs */
.grid.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--elev-card); }
.card-head { display: flex; justify-content: space-between; align-items: start; gap: .5rem; margin-bottom: .5rem; }
.card-head h3 { font-size: 1.05rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; align-items: center; }
.card-actions .select { margin-left: auto; }

/* éditeur */
.week { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.25rem; }
.week-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; gap: .5rem; }
.week-head h2 { font-size: 1.1rem; }
.row-actions { display: flex; gap: .35rem; }
.days { display: flex; flex-direction: column; gap: 1rem; }
.day-edit { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: .85rem; }
.day-head { display: flex; gap: .5rem; align-items: center; margin-bottom: .65rem; }
.day-name { flex: 1; font-weight: 600; }
.ex-edit { border-top: 1px dashed var(--line); padding-top: .7rem; margin-top: .7rem; }
.ex-head { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.ex-name { flex: 1; font-weight: 600; }

.set-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.set-table th { text-align: left; color: var(--muted); font-weight: 500; padding: .2rem .3rem; font-size: .75rem; }
.set-table td { padding: .2rem .3rem; }
.set-table input { width: 100%; min-width: 56px; }
.set-table input[type="text"] { min-width: 120px; }

.list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.list-row { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: .75rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.list-row.is-prepared { border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; }
.list-row > div { display: flex; flex-direction: column; gap: .15rem; }

/* --- dashboard athlètes --- */
.athlete-card { display: flex; flex-direction: column; gap: .35rem; }
.athlete-name { background: none; border: none; padding: 0; cursor: pointer; color: var(--text); font-family: var(--font-disp); font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; text-align: left; }
.athlete-name:hover { color: var(--accent); text-decoration: underline; }
.ath-block { margin: .35rem 0 .5rem; display: flex; flex-direction: column; gap: .3rem; }

/* badges de statut paiement */
.badge.pay-ok { color: var(--ok-soft); border-color: var(--ok-line); background: rgba(var(--ok-strong-rgb),.12); }
.badge.pay-late { color: var(--danger-dim); border-color: var(--danger-line); background: rgba(var(--accent-hi-rgb),.12); }
.badge.pay-none { color: var(--muted); }

/* --- profil athlète --- */
.profile-sub { margin-top: -.75rem; margin-bottom: 1.25rem; }
.profile-section { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.section-head h2 { font-size: 1.2rem; }
.active-block { background: var(--bg); }
.active-block .card-head h3 { display: flex; align-items: center; gap: .5rem; }
.hist-title { margin: 1.25rem 0 .6rem; font-size: .95rem; color: var(--muted); }

/* onglets de la fiche athlète — depuis la refonte « Parti A », 4 onglets.
   La barre reste défilante par sécurité, mais sur téléphone on resserre le
   padding pour que les 4 tiennent d'un coup d'œil sans défiler. */
.profile-tabs {
  display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem;
  flex-wrap: nowrap;
}
.ptab { padding: .6rem 1rem; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: 0 0 auto; }
/* Filet de sécurité UNIQUEMENT sur petit écran : la barre peut défiler si les
   onglets ne tiennent pas. Sur desktop, pas d'overflow → aucune scrollbar
   parasite et le soulignement actif (::after à -1px) reste net.
   overflow-y:hidden tue la scrollbar verticale que overflow-x:auto induit. */
@media (max-width: 720px) {
  .profile-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; overscroll-behavior-x: contain; }
}
@media (max-width: 480px) {
  .profile-tabs { gap: .05rem; }
  .ptab { padding: .55rem .5rem; font-size: .9rem; }
  /* l'ampoule d'« Assistant IA » est décorative : on la retire sur téléphone
     pour gagner la place des onglets (le libellé suffit) */
  .ptab svg { display: none; }
}
.ptab:hover { color: var(--text); }
.ptab.active { color: var(--text); border-bottom-color: var(--accent); }

/* aperçu « semaine en cours » */
.week-preview { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.week-preview .section-head { margin-bottom: .5rem; }
.week-preview .section-head h3 { font-size: 1.05rem; }
.wp-sub { margin: 0 0 .75rem; }
.wp-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .85rem; }
.wp-day { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: .85rem; }
.wp-day.done { border-left: 3px solid var(--ok); }
.wp-day-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.wp-day-head strong { font-size: .95rem; }

/* règlements */
.sub-fee { margin-bottom: 1.25rem; }
.revenue .sub-fee { margin: 1rem 0 0; }
.fee-label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: var(--muted); }
.fee-input { display: inline-flex; align-items: center; gap: .4rem; color: var(--text); font-size: 1rem; }
.fee-input input { width: 110px; }
.price-save { margin-left: .2rem; }
.price-save.pulse { animation: pulseGlow .7s ease; }

/* chiffre d'affaires réalisé avec l'athlète (sous la frise) */
.revenue { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.rev-main { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.rev-label { font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--muted); }
.rev-value { font-family: var(--font-disp); font-weight: 700; font-size: 1.9rem; font-variant-numeric: tabular-nums; color: var(--ok); line-height: 1; }
.rev-sub { margin: .25rem 0 0; }
.pay-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.pay-head h3 { font-size: 1rem; }
.pay-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pay-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: .78rem; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.pay-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.pay-actions { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }

/* ==========================================================================
   APP ATHLÈTE (mobile)
   ========================================================================== */
.app { max-width: 520px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; position: relative; }
.app-screen { padding: 1.1rem 1.1rem calc(80px + env(safe-area-inset-bottom)); }
.app-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.app-head h1 { font-size: 1.25rem; }
.day-sub { margin-top: 0; }

.app-hero { background: linear-gradient(135deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.hero-kicker { margin: 0 0 .25rem; color: var(--accent); font-weight: 700; font-size: .75rem; letter-spacing: .1em; }
.app-hero h1 { font-size: 1.5rem; }
.hero-progress { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; }

.today-card { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1.2rem; }
.today-kicker { color: var(--accent); font-weight: 700; font-size: .72rem; letter-spacing: .12em; margin: 0 0 .35rem; }
.today-card h2 { font-size: 1.25rem; }
.today-exos { list-style: none; padding: 0; margin: .85rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.today-exos li { padding: .5rem .7rem; background: var(--bg); border-radius: 9px; font-weight: 500; }

/* programme */
.prog-week { margin-bottom: 1.25rem; }
.prog-week h2 { font-size: 1rem; color: var(--muted); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .05em; }
.prog-day { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: .5rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: .85rem 1rem; margin-bottom: .5rem; cursor: pointer; color: inherit; }
.prog-day:hover { border-color: var(--line-hover); }
.prog-day.done { border-left: 3px solid var(--ok); }
.prog-day > div { display: flex; flex-direction: column; gap: .15rem; }
.prog-day-status { color: var(--muted); font-size: 1.1rem; }
.prog-day.done .prog-day-status { color: var(--ok); }

/* séance / saisie */
.exo-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--elev-card); }
.exo-card h3 { font-size: 1.05rem; margin-bottom: .75rem; }
.set-list { display: flex; flex-direction: column; gap: .4rem; }
.set-row { display: grid; grid-template-columns: 24px 1fr 56px 46px 46px 66px; gap: .4rem; align-items: center; }
.set-row.head { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.set-row.head span { text-align: center; }
.set-row.head span:nth-child(2) { text-align: left; }
.set-idx { color: var(--muted); text-align: center; }
.set-plan { font-size: .8rem; color: var(--muted); }
.set-in { width: 100%; text-align: center; padding: .5rem .2rem; }
.set-row.done .set-plan { color: var(--text); }
/* la coche est TOUJOURS visible (grise au repos) — l'action se devine sans
   avoir à cliquer ; validée, elle passe au vert « good lift ». */
.check { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; font-weight: 800; }
.check.on { background: var(--ok); border-color: var(--ok); color: var(--on-accent); box-shadow: 0 0 12px rgba(var(--ok-rgb),.45); }
.validate { background: var(--accent); }

/* tabbar mobile */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px;
  background: var(--bg-2); border-top: 1px solid var(--line);
  display: flex; justify-content: space-around;
  padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom));
}
.tab { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: 1.3rem; color: var(--muted); padding: .25rem .75rem; border-radius: 9px; }
.tab span { font-size: .68rem; }
.tab.active { color: var(--accent); }

/* états vides */
.empty { text-align: center; padding: 4rem 1.5rem; }
.empty-icon { font-size: 3rem; color: var(--muted); margin-bottom: .25rem; }
.empty h2 { margin: 1rem 0 .5rem; }

/* toast */
.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  padding: .7rem 1.1rem; border-radius: 999px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: .25s; z-index: 100; font-size: .9rem;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- commentaire de séance (athlète l'écrit, coach le lit) --- */
.day-note { margin-top: 1rem; }
.day-note-box { margin-top: .6rem; }
.day-note-input {
  width: 100%; resize: vertical; min-height: 72px; font: inherit; line-height: 1.4;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem; color: var(--text);
}
.day-note-input:focus { outline: none; border-color: var(--accent); }
.athlete-note {
  background: rgba(var(--p20-rgb),.1); border: 1px solid rgba(var(--p20-rgb),.35); border-left: 3px solid var(--p20, #2E63E6);
  border-radius: 0 10px 10px 0; padding: .6rem .8rem; margin-bottom: .9rem;
}
.athlete-note-label {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: var(--info-soft-2);
}
.athlete-note p { margin: .3rem 0 0; font-size: .92rem; line-height: 1.4; white-space: pre-wrap; }

/* --- éditeur : chaque jour = programmation | réalisé alignés côte à côte --- */
.day-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.day-monitor { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: .85rem; }
.day-monitor.pending { opacity: .95; }
.monitor-empty { padding: 1rem; text-align: center; }
.daymon-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: .6rem; }
.daymon-kicker { color: var(--accent); font-weight: 700; font-size: .68rem; letter-spacing: .12em; }
.monitor-exo { margin-bottom: 1rem; }
.monitor-exo h4 { margin: 0 0 .35rem; font-size: .95rem; }
.monitor-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.monitor-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: .72rem; padding: .25rem .4rem; border-bottom: 1px solid var(--line); }
.monitor-table td { padding: .3rem .4rem; border-bottom: 1px solid var(--line); }
.monitor-table tr.done td { color: var(--text); }
.ok-check { color: var(--ok); font-weight: 800; }

/* --- frise de paiement (12 mois + navigation années) --- */
.year-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .9rem; }
.year-label { font-weight: 800; font-size: 1.15rem; min-width: 4ch; text-align: center; }
.frieze { display: grid; grid-template-columns: repeat(12, 1fr); gap: .4rem; }
.month-cell { position: relative; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--bg-3); }
.month-cell.is-current { outline: 2px solid var(--accent); outline-offset: 1px; }
.month-main { width: 100%; border: none; background: transparent; color: var(--text); cursor: pointer; padding: .55rem .2rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; font: inherit; }
.month-abbr { font-size: .72rem; color: var(--muted); }
.month-mark { font-size: .95rem; font-weight: 800; min-height: 1em; }
.month-gift { position: absolute; top: 2px; right: 2px; border: none; background: transparent; cursor: pointer; font-size: .7rem; color: var(--muted); opacity: .8; padding: 1px; line-height: 1; }
.month-gift:hover { opacity: 1; color: var(--accent); }
.month-cell.status-free .month-gift { color: var(--info-soft); opacity: 1; }
.month-gift .ico { display: block; }
.month-cell.status-paid { background: rgba(var(--ok-strong-rgb),.16); border-color: var(--ok-line); }
.month-cell.status-paid .month-abbr, .month-cell.status-paid .month-mark { color: var(--ok-soft); }
.month-cell.status-free { background: rgba(var(--info-strong-rgb),.16); border-color: var(--info-line); }
.month-cell.status-free .month-abbr, .month-cell.status-free .month-mark { color: var(--info-soft); }
.month-cell.status-pending { background: var(--bg-3); }
.frieze-legend { display: flex; gap: 1rem; margin-top: .75rem; flex-wrap: wrap; }
.frieze-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .3rem; vertical-align: middle; }
.dot-paid { background: var(--ok-strong); }
.dot-free { background: var(--info-strong); }
.dot-pending { background: var(--bg-3); border: 1px solid var(--line); }

/* --- section Records (PR) côté coach --- */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.pr-field { display: flex; flex-direction: column; gap: .35rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; }
.pr-lift { font-weight: 600; font-size: .9rem; }
.pr-field .fee-input input { width: 90px; }
.pr-date { font-style: italic; }

/* --- vidéo du record (filmée par l'athlète, effacée quand le PR change) ---
   Tokens existants uniquement : correct en thème sombre ET en thème clair. */
.pr-vid-link { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem;
  background: transparent; border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: .2rem .6rem; font-size: .78rem; font-weight: 600; cursor: pointer; }
.pr-vid-link:hover { border-color: var(--accent); color: var(--accent); }
/* pastille sur la carte PR de l'athlète — un <span>, la carte est déjà un bouton */
.pr-cam { display: inline-flex; vertical-align: middle; color: var(--accent); margin-left: .15rem; }
/* zone d'action dans la modale « records » (face athlète) */
.pr-vid { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .8rem; }
.pr-vid-title { margin: 0 0 .5rem; font-weight: 600; font-size: .92rem; }
.pr-vid-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.pr-vid .muted { margin: 0; }

/* ==========================================================================
   PROFIL PHYSIQUE — poids de corps, sexe, blessures (les deux faces)
   ========================================================================== */
.console .coach-profile { max-width: 720px; }
.pdc-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pdc-current { display: flex; flex-direction: column; gap: .15rem; }
.pdc-value { font-family: var(--font-disp); font-weight: 700; font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pdc-value small { font-size: .95rem; color: var(--muted); font-weight: 500; }
.pdc-entry { display: flex; align-items: center; gap: .5rem; }
.pdc-entry input { width: 110px; text-align: center; font-family: var(--font-disp); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pdc-entry input:disabled { opacity: .55; }

/* corps humain cliquable */
.injury-body { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; text-align: left; }
.injury-map { flex: none; width: 150px; text-align: center; }
.body-map { width: 140px; height: auto; display: block; margin: 0 auto; }
.body-zone { cursor: pointer; }
.body-zone circle, .body-zone rect, .body-zone path { fill: var(--bg-3); stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round; transition: fill .15s, stroke .15s; }
.body-zone:hover circle, .body-zone:hover rect, .body-zone:hover path { stroke: var(--accent); }
.body-zone.sel circle, .body-zone.sel rect, .body-zone.sel path { fill: rgba(var(--accent-rgb),.3); stroke: var(--accent); }
.body-zone:focus-visible { outline: none; }
.body-zone:focus-visible circle, .body-zone:focus-visible rect, .body-zone:focus-visible path { stroke: var(--accent); stroke-width: 2.5; }

/* sexe : valeur verrouillée + boutons discrets, sélecteur compact */
.sex-line { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.sex-current { font-family: var(--font-disp); font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; }
.sex-select { width: 120px; }
.injury-zone-label { margin: .5rem 0 0; font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .08em; }
.injury-form { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: .8rem; }
.injury-form input[type="date"] { color-scheme: dark; }
.inj-ongoing { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.injury-modal { max-width: 520px; }

/* listes de blessures : actives vs passées */
.injury-group { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin: 1rem 0 .5rem; color: var(--accent); }
.injury-group.muted { color: var(--muted); }
.injury-list .injury-row { align-items: flex-start; }
.injury-row.active { border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; }
.injury-row.past { opacity: .75; }
.injury-meta { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.injury-desc { color: var(--muted); white-space: pre-wrap; }

/* --- Total des 3 lifts (onglet PR, les deux faces) --- */
.total-card {
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.2rem; margin: 1rem 0;
}
.total-main { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.total-label { font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .18em; font-size: .85rem; color: var(--accent); font-weight: 600; }
.total-value { font-family: var(--font-disp); font-weight: 700; font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.total-value small { font-size: 1rem; color: var(--muted); font-weight: 500; letter-spacing: .06em; }
.total-sub { margin: .3rem 0 0; }
.gl-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.gl-label { font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--muted); font-weight: 600; }
.gl-value { font-family: var(--font-disp); font-weight: 700; font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--p15, #F2B01E); }
.gl-sub { margin: .25rem 0 0; }

/* --- onglet PR côté athlète --- */
.pr-cards { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.pr-card { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.pr-card-lift { font-weight: 600; margin: 0; }
.pr-card-value { font-size: 1.8rem; font-weight: 800; margin: 0; }
.pr-card-value span { font-size: .9rem; font-weight: 500; color: var(--muted); }
.pr-card .muted { width: 100%; margin: 0; }
.nopr-card { background: linear-gradient(135deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; text-align: center; }
.nopr-num { font-size: 3rem; font-weight: 800; margin: 0; color: var(--accent); line-height: 1; }
.nopr-label { margin: .35rem 0 0; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }

/* ==========================================================================
   RESPONSIVE — la console passe en pleine largeur sur petit écran
   ========================================================================== */
@media (max-width: 900px) {
  .day-row { grid-template-columns: 1fr; }
  .frieze { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 720px) {
  .console { grid-template-columns: 1fr; }
  /* barre horizontale : pas de sticky ici (elle recouvrirait les en-têtes
     de jour collants de l'éditeur) ni de hauteur pleine page */
  .sidebar { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1rem; border-right: none; border-bottom: 1px solid var(--line); position: static; height: auto; }
  /* la nav doit pouvoir passer à la ligne, sinon 4 liens + le code coach
     débordent de l'écran sur un téléphone (constaté à 375px) */
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar { min-width: 0; }
  .sidebar .brand { flex: 0 0 auto; }
  .sidebar-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  /* barre horizontale : le code coach se compacte en une puce sur une ligne */
  .coach-code-card { flex-direction: row; align-items: center; gap: .5rem; padding: .4rem .6rem; }
  .ccc-code { font-size: 1.05rem; }
  .ccc-hint { display: none; }
  .console-main { padding: 1rem; }
  .set-table { display: block; overflow-x: auto; }
}

/* ==========================================================================
   MICRO-INTERACTIONS (lots A/B/C/D)
   ========================================================================== */

/* --- D : boutons, focus, cartes --- */
.btn { transition: background .15s, border-color .15s, transform .08s, box-shadow .15s; }
.btn:active { transform: scale(.97); }
.icon-btn, .check, .month-main, .ptab, .tab, .athlete-name, .prog-day { transition: transform .12s ease, color .15s, background .15s, border-color .18s, box-shadow .18s; }
.icon-btn:active, .month-main:active, .month-gift:active { transform: scale(.9); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--line-hover); }
.prog-day:hover, .month-cell:hover { transform: translateY(-2px); }
.month-cell { transition: transform .14s ease, box-shadow .14s ease; }

/* --- D : apparition en cascade --- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.anim-stagger > * { animation: fadeInUp .34s ease both; }
.anim-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.anim-stagger > *:nth-child(2)  { animation-delay: 40ms; }
.anim-stagger > *:nth-child(3)  { animation-delay: 80ms; }
.anim-stagger > *:nth-child(4)  { animation-delay: 120ms; }
.anim-stagger > *:nth-child(5)  { animation-delay: 160ms; }
.anim-stagger > *:nth-child(6)  { animation-delay: 200ms; }
.anim-stagger > *:nth-child(7)  { animation-delay: 240ms; }
.anim-stagger > *:nth-child(8)  { animation-delay: 280ms; }
.anim-stagger > *:nth-child(9)  { animation-delay: 320ms; }
.anim-stagger > *:nth-child(10) { animation-delay: 360ms; }
.anim-stagger > *:nth-child(11) { animation-delay: 400ms; }
.anim-stagger > *:nth-child(n+12) { animation-delay: 440ms; }

/* --- B : transitions d'écran --- */
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.app-screen { animation: screenIn .26s ease both; }
.console-main { animation: screenIn .22s ease both; }

/* --- B : onglets (soulignement glissant + icône active qui se soulève) --- */
.tab.active .ico { transform: translateY(-2px) scale(1.08); }
.ptab { position: relative; }
.ptab.active { border-bottom-color: transparent; }
.ptab::after {
  content: ''; position: absolute; left: .8rem; right: .8rem; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform .22s ease;
}
.ptab.active::after { transform: scaleX(1); }

/* --- C : barres de progression qui se remplissent --- */
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.progress-bar { transform-origin: left; animation: growX .6s cubic-bezier(.4,0,.2,1) both; }

/* --- A : coche qui "pop" + ligne validée qui flashe --- */
.check { transition: transform .12s ease, background .15s, border-color .15s; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); } }
.check.pop { animation: pop .28s ease; }
@keyframes flashGreen { 0% { background: rgba(var(--text-rgb),.16); } 100% { background: transparent; } }
.set-row.flash { animation: flashGreen .65s ease; border-radius: 8px; }
.set-in { transition: border-color .15s, color .15s; }
.set-in.beat { color: var(--ok-soft); font-weight: 700; border-color: var(--ok-line); }

/* --- C : records (pulse coté coach, glow "frais" coté athlète) --- */
@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-hi-rgb),.5); } 100% { box-shadow: 0 0 0 16px rgba(var(--accent-hi-rgb),0); } }
.pr-field.pulse { animation: pulseGlow .7s ease; }
.pr-card.fresh { border-left-color: var(--ok); }
.pr-card.fresh .pr-card-value { color: var(--ok-soft); }
@keyframes glowOk { 0% { box-shadow: 0 0 0 0 rgba(var(--ok-strong-rgb),.45); } 100% { box-shadow: 0 0 0 14px rgba(var(--ok-strong-rgb),0); } }
.pr-card.fresh { animation: glowOk 1.1s ease; }

/* --- accessibilité : respecter la préférence "moins d'animations" --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
.pr-new { color: var(--ok); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-left: .4rem; }

/* --- séance en cours : bandeau compact + progression --- */
.session-banner { align-items: flex-start; }
.session-banner-main { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
#change-day { flex-shrink: 0; }
.session-banner-main .hero-kicker { margin: 0; }
.session-banner-main h1 { font-size: 1.25rem; }
.session-progress { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; }

/* --- état « programme terminé » --- */
.finished { text-align: center; padding: 3rem 1.5rem 1rem; }
.finished-icon { color: var(--accent); margin-bottom: .5rem; }
.finished h2 { margin: .5rem 0; }

/* ==========================================================================
   VIDÉOS DE LIFT
   ========================================================================== */
/* la ligne de série : dernière colonne = les 4 actions EN LIGNE (vidéo · note ·
   ✓ · ✕). Les colonnes de saisie se resserrent pour leur laisser la place. */
/* CHARGE doit contenir « 127.5 » sans rogner (mesuré : 45px de texte) */
.set-row { grid-template-columns: 15px minmax(70px, 1fr) 50px 29px 29px 104px; gap: .18rem; }
.set-row .set-plan { font-size: .74rem; line-height: 1.25; }
.set-row .set-in { padding: .5rem .1rem; }

.vid-btn {
  width: 32px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s, border-color .15s, transform .12s;
}
.vid-btn:active { transform: scale(.9); }
.vid-btn.has-video { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.vid-btn.pop { animation: pop .28s ease; }

/* --- actions par série, sur UNE ligne : vidéo · commentaire · valider · fail - */
.set-actions { display: flex; flex-wrap: nowrap; gap: 2px; justify-content: flex-end; align-items: center; }
.set-actions .vid-btn, .set-actions .note-btn, .set-actions .check, .set-actions .fail-btn {
  width: 25px; height: 30px; min-width: 25px; border-radius: 7px; font-size: .78rem; padding: 0;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.note-btn {
  border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, transform .12s;
}
.note-btn:active { transform: scale(.9); }
.note-btn.has-note { color: var(--on-accent); background: var(--p20); border-color: var(--p20); }
.fail-btn {
  border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; font-weight: 800;
  transition: color .15s, background .15s, border-color .15s, transform .12s;
}
.fail-btn:active { transform: scale(.9); }
.fail-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),.4); }
/* très petits écrans (≤360px) : on resserre encore pour garder les 4 actions
   sur une ligne SANS débordement horizontal */
@media (max-width: 360px) {
  .set-row { grid-template-columns: 14px minmax(44px, 1fr) 40px 28px 28px 98px; gap: .18rem; }
  .set-actions { gap: 1px; }
  .set-actions .vid-btn, .set-actions .note-btn, .set-actions .check, .set-actions .fail-btn {
    width: 23px; min-width: 23px; height: 28px; border-radius: 6px;
  }
  .set-row .set-plan { font-size: .7rem; }
}
/* --- hiérarchie de la consigne : c'est ce qu'on LIT, pas ce qu'on remplit ---
   Avant, « 127.5kg ×3 RPE9 » était au même gris minuscule que le reste, alors
   que les champs de saisie étaient blancs et gros : la hiérarchie était
   inversée. La charge et les reps passent devant, le RPE recule. */
.set-plan .plan-main {
  display: block; font-family: var(--font-disp); font-weight: 500;
  font-size: .92rem; color: var(--text); letter-spacing: 0;
  font-variant-numeric: tabular-nums; line-height: 1.15;
  white-space: nowrap;   /* « 127.5kg ×3 » doit tenir sur UNE ligne */
}
.set-plan .plan-main i { font-style: normal; font-size: .78em; color: var(--muted); }
.set-plan .plan-rpe { display: block; font-size: .68rem; color: var(--muted); letter-spacing: .04em; }
.set-row.done .set-plan .plan-main { color: var(--muted); font-weight: 400; }

/* la série en cours : la prochaine à faire se repère sans compter */
.set-row.is-next { background: rgba(var(--accent-rgb),.06); border-radius: 8px; }
.set-row.is-next .set-idx { color: var(--accent); font-weight: 700; }

.sets-count { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sets-count strong { color: var(--text); font-family: var(--font-disp); font-size: 1.05em; }
.session-sub { margin: .15rem 0 0; }

.set-row.failed .set-plan { text-decoration: line-through; }
.set-row.failed .set-in { color: var(--accent); }

/* commentaire par série (repliable sous la ligne) */
.set-note { padding: 0 0 .15rem; }
.set-note-input {
  width: 100%; padding: .5rem .6rem; resize: vertical; font: inherit;
  background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
}
.set-note-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* mot du coach : pastille discrète collée à la consigne « Prévu ».
   Deux modes — non lu (accent, ça attire l'œil) / lu (gris, effacé). */
.coachnote-btn {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-left: .25rem;
  width: 19px; height: 19px; padding: 0; border-radius: 5px;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  cursor: pointer; transition: color .15s, background .15s, border-color .15s, transform .12s;
}
.coachnote-btn:active { transform: scale(.9); }
.coachnote-btn.unread {
  color: var(--on-accent); background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb),.4);
}
.coach-note { padding: .1rem 0 .35rem; }
.coach-note-label {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .08em;
  font-size: .68rem; color: var(--accent);
}
.coach-note p {
  margin: .2rem 0 0; font-size: .85rem; color: var(--text); white-space: pre-wrap;
  background: var(--bg-3); border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0;
  padding: .45rem .6rem;
}

/* lien vidéo côté coach (tables de réalisé) */
.vid-link {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--accent); cursor: pointer; padding: .12rem .38rem;
  display: inline-flex; align-items: center;
}
.vid-link:hover { border-color: var(--accent); }
.wp-vids { color: var(--accent); font-weight: 600; }

/* lecteur modal */
.vmodal-overlay {
  position: fixed; inset: 0; background: var(--scrim-hard); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.vmodal {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow); animation: screenIn .2s ease both;
}
.vmodal-head { display: flex; align-items: flex-start; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.vmodal-title { margin: 0; font-weight: 600; font-size: .9rem; flex: 1; line-height: 1.35; }
.vmodal-body { padding: .75rem; overflow: auto; text-align: center; }
.vmodal-body video { max-width: 100%; max-height: 62vh; border-radius: 10px; background: var(--media-bg); }
.vmodal-actions { display: flex; gap: .5rem; justify-content: flex-end; padding: 0 1rem .9rem; }

/* modale de saisie (nommer un bloc / la copie d'un bloc ou d'une semaine) —
   même coque que le lecteur vidéo, mais étroite et alignée à gauche : c'est un
   formulaire, pas un média. */
.pmodal { max-width: 24rem; }
.pmodal-body { text-align: left; padding: 1rem; }
.pmodal-label { display: block; font-size: .8rem; color: var(--muted); }
.pmodal-input { display: block; width: 100%; margin-top: .4rem; }
/* `.btn:disabled` n'est pas stylé globalement (le changer toucherait toute
   l'app) : on éteint le bouton ici seulement, sinon « Valider » a l'air actif
   alors qu'il refuse le clic. */
.pmodal .btn:disabled { opacity: .4; cursor: not-allowed; }
/* au téléphone, le clavier occupe le bas de l'écran : centrée, la modale y
   perd son bouton de validation (mesuré). On la remonte — ici seulement, le
   lecteur vidéo reste centré (lui n'ouvre pas de clavier). */
@media (max-width: 720px) {
  .pmodal-overlay { align-items: flex-start; padding-top: 8vh; }
}

/* --- carte PR cliquable + modale « records par nombre de reps » --- */
.pr-card.clickable { cursor: pointer; font: inherit; color: inherit; text-align: left; width: 100%; }
.pr-card.clickable:hover { border-color: var(--line-hover); }
.rm-modal {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  width: 100%; max-width: 380px; box-shadow: var(--shadow); animation: screenIn .2s ease both;
  padding: .3rem .3rem .9rem;
}
.rm-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem .4rem; }
.rm-head h3 { margin: 0; font-size: 1rem; }
.rm-table { width: 100%; border-collapse: collapse; }
.rm-table td { padding: .55rem .9rem; border-top: 1px solid var(--line); }
.rm-reps { font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; color: var(--muted); }
.rm-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rm-meta { text-align: right; white-space: nowrap; }
.rm-foot { padding: .6rem .9rem 0; margin: 0; }

/* confirmation de validation de séance */
.confirm-modal { max-width: 420px; }
.confirm-body { padding: 0 .9rem; display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.confirm-body p { margin: 0; }
.confirm-warn {
  background: rgba(var(--p15-rgb),.12); border: 1px solid rgba(var(--p15-rgb),.5);
  border-radius: 8px; padding: .5rem .6rem; font-size: .88rem;
}
.confirm-actions { display: flex; gap: .5rem; justify-content: flex-end; padding: .9rem .9rem 0; }

/* animation de confirmation SUR le bouton « Valider la séance » */
.block-btn.validate.validated {
  background: var(--ok); border-color: var(--ok); color: var(--on-accent);
  animation: validPop .45s ease both;
}
.block-btn.validate.validated .v-check { display: inline-block; animation: checkIn .4s .1s ease both; }
@keyframes validPop {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(var(--ok-rgb),0); }
  45% { transform: scale(1.04); box-shadow: 0 0 22px rgba(var(--ok-rgb),.55); }
  100% { transform: scale(1); box-shadow: 0 0 12px rgba(var(--ok-rgb),.35); }
}
@keyframes checkIn {
  0% { transform: scale(.2) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .block-btn.validate.validated, .block-btn.validate.validated .v-check { animation: none; }
}

/* --- séries par exercice de la semaine (progression) --- */
.week-sets { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; }
.week-sets li { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .45rem .2rem; border-top: 1px solid rgba(var(--line-rgb),.55); }
.week-sets li:first-child { border-top: none; }
.ws-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
/* pastille de famille : même couleur que le mouvement dans les graphiques du dessus */
.ws-fam { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; align-self: center; }
/* sur sa propre ligne : accolée au titre elle se coupait en plein milieu */
.prog-hint { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); letter-spacing: 0; text-transform: none; margin-top: .15rem; }
.ws-count { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-count strong { color: var(--text); }

/* usage & gestion du stockage vidéo (écran de sélection athlète) */
.video-usage { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: var(--muted); font-size: .85rem; }
.vlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.vlist li { display: flex; align-items: center; gap: .6rem; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: .5rem .7rem; }
.vlist .vmeta { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

/* ==========================================================================
   SEMAINE ACTIVE + BARRE D'ACTIONS DE SEMAINE (éditeur)
   ========================================================================== */
.week.is-active { border-left: 3px solid var(--accent); }
.badge-active { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-hi-rgb),.1); margin-left: .5rem; vertical-align: middle; }

.week-head { flex-wrap: wrap; }
.week-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.week-actions .btn { font-weight: 600; }
.week-active-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.week-active-btn.on .ico { fill: currentColor; }
.week-actions .week-del { margin-left: .5rem; font-weight: 400; }

/* ==========================================================================
   PROGRESSION (tuiles de gains + courbe des barres + tonnage, SVG maison)
   ========================================================================== */
.pr-subtabs { margin: .25rem 0 1.1rem; }

.prog-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.prog-tile { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; }
.prog-tile .pt-num { font-family: var(--font-disp); font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.prog-tile .pt-lift { font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; color: var(--text); margin-top: .15rem; display: flex; flex-direction: column; gap: .05rem; }
.prog-tile .pt-sub { color: var(--muted); letter-spacing: .04em; text-transform: none; }
@media (max-width: 420px) { .prog-tile .pt-num { font-size: 1.1rem; } }

.prog-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; margin-bottom: 1rem; }
.prog-panel svg { display: block; width: 100%; height: auto; }
.prog-panel svg text { font-family: var(--font-disp); font-variant-numeric: tabular-nums; }
.prog-title { font-size: .95rem; margin-bottom: .5rem; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.prog-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .45rem; font-family: var(--font-disp); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.prog-legend .lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.prog-legend .lg-dash { display: inline-block; width: 16px; height: 0; border-top: 2px dashed var(--muted); margin-right: .35rem; vertical-align: 3px; }

.prog-empty { text-align: center; padding: 2.2rem 1rem; background: var(--bg-2); border: 1px dashed var(--line); border-radius: var(--radius); }
.prog-note { text-align: center; margin: 0 0 1rem; }

/* tracé progressif des courbes (instantané si prefers-reduced-motion) */
.prog-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: progDraw .9s ease-out .15s forwards; }
@keyframes progDraw { to { stroke-dashoffset: 0; } }

/* console coach : visuels compacts (l'app mobile garde la pleine largeur).
   Grand écran → tuiles plafonnées + les deux graphes côte à côte. */
.console .prog-body { max-width: 640px; }
@media (min-width: 1100px) {
  .console .prog-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; max-width: 1080px; }
  .console .prog-body .prog-tiles { grid-column: 1 / -1; max-width: 640px; margin-bottom: 0; }
  .console .prog-body .prog-panel { margin-bottom: 0; }
}

/* ==========================================================================
   ÉDITEUR DE BLOC — LISIBILITÉ (cellules aérées, hiérarchie, repères au scroll)
   ========================================================================== */
/* plus d'air entre les jours et autour des semaines */
.week { padding: 1.25rem; margin-bottom: 1.75rem; }
.days { gap: 1.5rem; }
.day-row { gap: 1.25rem; }

/* les deux volets = deux cartes sombres nettes sur la surface de la semaine */
.day-edit { padding: 0 1rem 1rem; }
.day-monitor { background: var(--bg); padding: 0 .9rem .9rem; }

/* en-tête de jour COLLANT : on sait toujours dans quel jour on se trouve */
.day-head {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg); margin: 0 -1rem .75rem; padding: .7rem 1rem .55rem;
  border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0;
}
.day-head-main { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

/* ---- DIFFÉRENCIER LES JOURS -----------------------------------------------
   Trois jours d'affilée se ressemblaient trait pour trait : même cadre, même
   en-tête, seul le texte du champ changeait — en défilant, on perdait le fil.
   Trois repères qui se renforcent, du plus voyant au plus discret :
     1. une PASTILLE de rang (J1, J2…), collée en haut avec l'en-tête ;
     2. une TEINTE par jour, en rotation sur 4, portée par la pastille et par
        un rail vertical le long du volet — la couleur est le repère qui se lit
        sans lire ;
     3. le RÉSUMÉ (n exos · n séries) sous le rang, pour situer la charge du jour.
   La teinte est celle du MOUVEMENT PRINCIPAL du jour, pas une rotation : ces
   trois couleurs codent déjà squat/bench/soulevé de terre dans les graphiques,
   les réutiliser au hasard aurait affiché un jour de bench en rouge. Elles sont
   déjà validées (contraste, daltonisme) sur les deux thèmes. */
.day-row[data-daylift="squat"]    { --day-tint: var(--chart-squat, #E23A34); }
.day-row[data-daylift="bench"]    { --day-tint: var(--chart-bench, #2E63E6); }
.day-row[data-daylift="deadlift"] { --day-tint: var(--chart-deadlift, #BC8A14); }
.day-row[data-daylift="other"]    { --day-tint: var(--chart-other, #7A8496); }

.day-edit { border-left: 3px solid var(--day-tint, var(--line)); }
.day-head { border-bottom-color: var(--day-tint, var(--line)); }
.day-index {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 2.1rem; padding: 0 .35rem; border-radius: 9px;
  background: var(--day-tint, var(--accent)); color: #fff;
  font-family: var(--font-disp); font-weight: 700; font-size: .95rem; letter-spacing: .04em;
}
.day-head .daymon-kicker { color: var(--day-tint, var(--accent)); }
.day-meta { color: var(--muted); font-weight: 400; letter-spacing: .04em; }
/* le volet « réalisé » porte la même teinte : les deux moitiés d'un jour se lisent en paire */
.day-monitor { border-left: 3px solid var(--day-tint, var(--line)); }
.day-name { font-family: var(--font-disp); font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; width: 100%; }
.daymon-head {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg); margin: 0 -.9rem .6rem; padding: .8rem .9rem .55rem;
  border-radius: 12px 12px 0 0;
}

/* hiérarchie : le nom d'exercice se distingue nettement des séries */
.ex-edit { border-top: 1px solid var(--line); padding-top: .85rem; margin-top: 1rem; }
.ex-name { font-family: var(--font-disp); font-weight: 600; font-size: 1rem; letter-spacing: .02em; }

/* poignée de glissement (⠿) : saisir pour réordonner à la souris ou au doigt.
   touch-action:none = saisir la poignée ne fait pas défiler la page. */
.ex-drag {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 24px; height: 30px; padding: 0; border: none; border-radius: 6px;
  background: none; color: var(--muted); cursor: grab; touch-action: none;
}
.ex-drag:hover { color: var(--text); background: var(--bg-3); }
.ex-drag:active { cursor: grabbing; }
/* l'exercice soulevé pendant le glissement */
.ex-edit.dragging {
  position: relative; z-index: 5; background: var(--bg-2);
  border-radius: 10px; outline: 1px solid var(--accent); box-shadow: var(--shadow);
  cursor: grabbing;
}
body.dragging-ex { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* flèches de réordonnancement d'un exercice (à gauche de son nom) */
.ex-move { display: inline-flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }
.ex-move .icon-btn {
  width: 22px; height: 17px; padding: 0; line-height: 1; border-radius: 5px;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  font-size: .7rem; display: flex; align-items: center; justify-content: center;
}
.ex-move .icon-btn:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.ex-move .icon-btn:disabled { opacity: .3; cursor: default; }

/* lien YouTube de démo d'exercice (éditeur coach + séance athlète) */
.ex-demo { display: inline-flex; align-items: center; gap: .35rem; }
.ex-demo-url { width: 170px; font-size: .78rem; color: var(--muted); }
.ex-demo-url:focus { color: var(--text); }
.demo-preview {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--accent); cursor: pointer; padding: .12rem .38rem;
  display: inline-flex; align-items: center;
}
.demo-preview:hover { border-color: var(--accent); }
.demo-link {
  display: inline-flex; align-items: center; gap: .38rem; vertical-align: 2px; margin-left: .6rem;
  font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 600;
  background: var(--load-dim); border: 1px solid var(--accent); border-radius: 999px; padding: .28rem .7rem;
  color: var(--danger-soft); cursor: pointer; transition: background .15s, transform .12s;
}
.demo-link:hover { background: rgba(var(--accent-rgb),.24); }
.demo-link:active { transform: scale(.94); }
.demo-link .ico { color: var(--accent); }
.yt-body { padding: 0; }
.yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--media-bg); }

/* tableau de séries : cellules aérées, lignes séparées, chiffres lisibles */
.set-table { font-size: .9rem; }
.set-table th {
  font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .08em;
  font-size: .68rem; padding: .4rem .35rem .3rem; border-bottom: 1px solid var(--line);
}
.set-table td { padding: .28rem .3rem; border-bottom: 1px solid rgba(var(--line-rgb), .5); }
.set-table tbody tr:last-child td { border-bottom: none; }
.set-table input { padding: .5rem .55rem; }
.set-table input[type="number"] {
  text-align: center; font-family: var(--font-disp); font-size: .95rem;
  font-variant-numeric: tabular-nums; min-width: 62px;
}

/* ==========================================================================
   CHAT coach↔athlète
   ========================================================================== */
/* badge de non-lus (tabbar, onglets profil, carte dashboard) */
.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-disp); font-size: .62rem; font-weight: 700; line-height: 1;
  vertical-align: 2px;
}
.tab { position: relative; }
.tab .tab-count { position: absolute; top: -2px; right: 4px; }
.athlete-card .chat-unread { margin: -.3rem 0 0; align-self: flex-end; font-size: .78rem; color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: .35rem; }

/* structure : le fil scrolle, la saisie reste en bas */
.chat-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-thread { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: .3rem; padding: .4rem .5rem; }
.chat-empty { text-align: center; margin: auto; }
.chat-day {
  align-self: center; margin: .7rem 0 .35rem;
  font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .12em; font-size: .62rem;
  color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem;
}

/* bulles */
.msg { position: relative; max-width: 82%; padding: .5rem .7rem 1rem; border-radius: 12px; font-size: .95rem; line-height: 1.35; }
.msg.them { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: rgba(var(--accent-rgb),.13); border: 1px solid rgba(var(--accent-rgb),.42); border-bottom-right-radius: 4px; }
.msg-text { margin: 0; word-break: break-word; }
.msg-meta { position: absolute; bottom: .22rem; right: .6rem; display: flex; gap: .3rem; font-family: var(--font-disp); font-variant-numeric: tabular-nums; font-size: .6rem; color: var(--muted); }
.ticks { letter-spacing: -.14em; color: var(--muted); }
.ticks.read { color: var(--text); }        /* lu = blanc craie (good lift) */

/* médias dans les bulles */
.msg-media img { display: block; max-width: 100%; max-height: 260px; object-fit: cover; border-radius: 9px; margin-bottom: .35rem; }
.msg-video {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .35rem;
  background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 9px;
  padding: .55rem .8rem; cursor: pointer; font: inherit; font-family: var(--font-disp);
}
.msg-video:hover { border-color: var(--accent); color: var(--accent); }
.media-missing { font-style: italic; }

/* indicateur « en train d'écrire » + zone de saisie */
.chat-typing { margin: .25rem .3rem; font-style: italic; }
.chat-input { display: flex; align-items: center; gap: .45rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.chat-input .chat-text { flex: 1; border-radius: 999px; padding: .55rem .95rem; min-width: 0; }
.chat-attach, .chat-send {
  flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--muted);
  transition: color .15s, border-color .15s, transform .08s;
}
.chat-attach:hover { color: var(--text); border-color: var(--line-hover); }
.chat-send { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chat-send:active, .chat-attach:active { transform: scale(.92); }

/* --- message vocal --- */
.chat-mic {
  flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--muted);
  transition: color .15s, border-color .15s, transform .08s;
}
.chat-mic:hover { color: var(--text); border-color: var(--line-hover); }
.chat-mic:active { transform: scale(.92); }

/* pendant l'enregistrement : la barre REMPLACE la ligne de saisie normale.
   (masquée par défaut — pas via [hidden], qu'un display:flex écraserait) */
.chat-recbar { display: none; }
.chat-input.recording > .chat-attach,
.chat-input.recording > .chat-text,
.chat-input.recording > .chat-mic,
.chat-input.recording > .chat-send { display: none; }
.chat-input.recording .chat-recbar { display: flex; flex: 1; align-items: center; gap: .55rem; min-width: 0; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; animation: recPulse 1.1s ease-in-out infinite; }
@keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.rec-time { font-family: var(--font-disp); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.6em; flex: none; }
.rec-hint { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-cancel { flex: none; }
.rec-stop { flex: none; }
.msg-audio audio { width: 240px; max-width: 100%; height: 36px; display: block; margin-bottom: .35rem; }

/* athlète (mobile) : l'écran chat occupe la hauteur dispo au-dessus de la tabbar */
.chat-screen { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
.chat-screen .chat-mount { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* coach (console) : panneau de hauteur fixe, largeur plafonnée */
.console .chat-panel .chat-mount { display: flex; flex-direction: column; height: 58vh; max-width: 680px; }

/* --- surfaces cliquables (raccourci vers l'éditeur) --- */
.clickable { cursor: pointer; }
.wp-day.clickable { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.wp-day.clickable:hover { transform: translateY(-2px); border-color: var(--line-hover); box-shadow: var(--shadow-hover-sm); }

/* ==========================================================================
   MÉDIAS : overlay de compression + jauge de stockage (admin)
   ========================================================================== */
.media-progress {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: var(--scrim); backdrop-filter: blur(3px);
}
.media-progress .mp-box {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.1rem 1.4rem; min-width: min(320px, 84vw); text-align: center;
}
.media-progress .mp-box p { margin: 0 0 .6rem; }
.media-progress .mp-bar { height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.media-progress .mp-fill { height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width .3s ease; }
.media-progress .mp-pct { margin: .5rem 0 0; }

/* ==========================================================================
   BOÎTE À IDÉES (coach → admin) + nav latérale active
   ========================================================================== */
.nav-link.active { background: var(--bg-3); color: var(--text); }
.nav-link .tab-count { margin-left: auto; }
.topbar-actions { display: flex; align-items: center; gap: .6rem; }

.sug-list { display: flex; flex-direction: column; gap: .8rem; max-width: 680px; }
.sug-card.unread { border-color: var(--accent); }
.sug-card .sug-text { margin: .5rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sug-form-card { max-width: 680px; margin-bottom: 1.2rem; }
.sug-form-card textarea {
  width: 100%; margin: .6rem 0; padding: .65rem .75rem; resize: vertical;
  background: var(--bg-3); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; font: inherit;
}
.sug-form-card textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sug-form-card form { display: flex; flex-direction: column; gap: .6rem; }
.bug-shot {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; align-self: flex-start;
  border: 1px dashed var(--line); border-radius: 8px; padding: .5rem .75rem;
  color: var(--muted); font-size: .88rem;
}
.bug-shot:hover { border-color: var(--accent); color: var(--text); }
.sug-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }

/* ==========================================================================
   IMPORT GOOGLE SHEETS (assistant 5 étapes, côté coach)
   ========================================================================== */
.imp-overlay {
  position: fixed; inset: 0; z-index: 280;
  display: flex; align-items: center; justify-content: center;
  background: var(--scrim-2); backdrop-filter: blur(3px); padding: 1.2rem;
}
.imp-modal {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); width: min(980px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column;
}
.imp-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.2rem .4rem; }
.imp-head h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.imp-steps {
  display: flex; gap: .3rem; list-style: none; margin: .4rem 0 0; padding: 0 1.2rem .7rem;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
  font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem;
}
.imp-steps li { display: flex; align-items: center; gap: .4rem; padding: .3rem .55rem; border-radius: 999px; color: var(--muted); }
.imp-steps li span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--bg-3); font-size: .7rem;
}
.imp-steps li.on { color: var(--text); background: var(--bg-3); }
.imp-steps li.on span { background: var(--accent); color: var(--on-accent); }
.imp-steps li.done { color: var(--ok); }
.imp-body { padding: 1rem 1.2rem; overflow-y: auto; flex: 1; }
.imp-body input[type="url"], .imp-body input[type="text"], .imp-body textarea {
  width: 100%; margin: .5rem 0; padding: .6rem .7rem;
  background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 9px; font: inherit;
}
.imp-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1.2rem; border-top: 1px solid var(--line);
}
.imp-foot-right { display: flex; gap: .6rem; }
.imp-tabs { display: flex; gap: .5rem; margin: .6rem 0 .8rem; flex-wrap: wrap; }
.imp-drop {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 2rem 1rem;
  color: var(--muted); cursor: pointer; text-align: center; margin: .6rem 0;
}
.imp-drop.over, .imp-drop:hover { border-color: var(--accent); color: var(--text); }
.imp-gridwrap { overflow: auto; max-height: 46vh; border: 1px solid var(--line); border-radius: 9px; margin: .6rem 0; }
.imp-grid { border-collapse: collapse; font-size: .8rem; min-width: 100%; }
.imp-grid td { border: 1px solid rgba(var(--line-rgb), .55); padding: .25rem .45rem; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.imp-grid .imp-ln { color: var(--muted); font-size: .68rem; text-align: right; background: var(--bg-3); }
.imp-grid tr.is-header td { background: rgba(var(--accent-rgb), .14); font-weight: 600; }
.imp-grid tr[data-row] { cursor: pointer; }
.imp-grid tr[data-row]:hover td { background: var(--bg-3); }
.imp-grid .imp-mapsel td, .imp-grid .imp-badges td { background: var(--bg-3); position: sticky; top: 0; z-index: 1; }
.imp-grid .imp-mapsel select { width: 100%; min-width: 110px; padding: .3rem; background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-size: .75rem; }
.imp-tree { border: 1px solid var(--line); border-radius: 9px; padding: .7rem .9rem; max-height: 34vh; overflow-y: auto; margin: .6rem 0; }
.imp-tree .imp-week { margin-bottom: .6rem; }
.imp-tree ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.imp-tree li { margin: .15rem 0; }
.imp-prlist { list-style: none; margin: .4rem 0; padding: 0; }
.imp-prlist li { margin: .3rem 0; }
.imp-prlist label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.imp-ai { text-align: center; padding: 2.5rem 1rem; }
.imp-ai-spin {
  width: 42px; height: 42px; margin: 0 auto 1rem;
  border: 3px solid var(--bg-3); border-top-color: var(--accent); border-radius: 50%;
  animation: imp-spin 1s linear infinite;
}
@keyframes imp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .imp-ai-spin { animation-duration: 3s; } }

.imp-bilan ul { margin: .4rem 0 .8rem; }
.imp-bilan details { margin: .6rem 0; }
.imp-bilan summary { cursor: pointer; color: var(--p15); }

/* admin : ouvrir l'espace d'un coach (nom cliquable) + bandeau d'usurpation */
.coach-open {
  background: none; border: none; padding: 0; cursor: pointer; color: inherit;
  font-family: var(--font-disp); font-size: 1.05rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .4rem; text-align: left;
}
.coach-open:hover { color: var(--accent); }
.coach-open-arr { color: var(--muted); font-weight: 400; }
.coach-open:hover .coach-open-arr { color: var(--accent); }
.asc-banner {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: rgba(var(--accent-rgb),.12); border: 1px solid var(--accent);
  border-radius: 10px; padding: .55rem .8rem; margin-bottom: 1rem; font-size: .9rem;
}
.asc-banner .btn { margin-left: auto; }

/* suppression de coach (admin) */
.admin-coach-actions { margin-top: .7rem; display: flex; justify-content: flex-end; }
.dc-modal { width: min(560px, 96vw); }
.dc-choice { display: flex; flex-direction: column; gap: .55rem; margin: .9rem 0; }
.dc-choice > label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dc-choice > label.is-disabled { opacity: .5; }
.dc-choice select { padding: .35rem .5rem; background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 7px; }
.dc-confirm-label { display: block; margin: .7rem 0 .3rem; }

.athlete-code-btn { display: block; margin: 0 0 1rem; letter-spacing: .04em; }
.athlete-code-btn strong { color: var(--accent); }

/* formulaires : profil coach + paramètres athlète */
.coach-profile-form, .settings-card { max-width: 560px; }
.coach-profile-form form, .settings-card { display: flex; flex-direction: column; gap: .7rem; }
.coach-profile-form label, .set-field { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.coach-profile-form input, .coach-profile-form textarea, .set-field input {
  padding: .55rem .7rem; background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
.coach-profile-form textarea { resize: none; }
.coach-profile-form input:disabled { opacity: .55; }
.settings-card { margin-top: 1.2rem; }
.settings-leave { margin-top: .3rem; padding-top: .7rem; border-top: 1px solid var(--line); }

/* désaffiliation */
.badge-leave { background: rgba(var(--accent-rgb),.16); color: var(--accent); border: 1px solid var(--accent); }
.badge-leave-row { margin: .35rem 0 0; }
.leave-banner {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: space-between;
  background: rgba(var(--accent-rgb),.1); border: 1px solid var(--accent); border-radius: 10px;
  padding: .6rem .8rem; margin: 0 0 .8rem; font-size: .9rem;
}
.leave-actions { display: flex; gap: .5rem; }

/* carte « Mon coach » (haut de l'écran Profil athlète) */
.my-coach-card {
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem;
  display: flex; flex-direction: column; gap: .12rem;
}
.my-coach-card.no-coach { border-left-color: var(--muted); }
.my-coach-card.pending { border-left-color: var(--warn); }
.my-coach-card .btn { align-self: flex-start; margin-top: .5rem; }

/* --- affiliation (LOT 4B) : demande athlète → coach --- */
.badge-pending { background: rgba(var(--warn-rgb),.16); color: var(--warn); border: 1px solid var(--warn); }
.refusal-banner {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: space-between;
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: 10px; padding: .6rem .8rem; margin: 0 0 .8rem; font-size: .9rem;
}
.aff-requests { margin-bottom: 1.4rem; }
.aff-req {
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .6rem;
}
.aff-req-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.aff-req-note { margin: .4rem 0 0; font-style: italic; }
.aff-req-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .6rem; flex-wrap: wrap; }
.aff-banner { background: rgba(var(--warn-rgb),.1); border-color: var(--warn); }
.req-modal { width: min(460px, 96vw); }
.req-form { display: flex; flex-direction: column; gap: .7rem; }
.req-form textarea, .req-form input {
  padding: .55rem .7rem; background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
.req-form textarea { resize: none; }
.req-err { color: var(--accent); margin: 0; }

/* --- invitation coach → athlète (LOT 4C) --- */
.invite-banner {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: space-between;
  background: rgba(var(--accent-rgb),.1); border: 1px solid var(--accent); border-radius: 10px;
  padding: .6rem .8rem; margin: 0 0 .8rem; font-size: .9rem;
}
.aff-req.invited { border-left-color: var(--muted); }
.add-modal { width: min(620px, 96vw); }
.add-body { display: flex; flex-direction: column; gap: 1rem; }
.add-way { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; }
.add-way h3 { margin: 0 0 .25rem; font-size: .95rem; }
.add-way p { margin: 0 0 .6rem; }
.add-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.add-row input {
  flex: 1 1 10rem; min-width: 0; padding: .5rem .7rem; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font: inherit;
}

/* --- assistant IA (onglet fiche athlète) --- */
.ai-wrap { max-width: 720px; display: flex; flex-direction: column; gap: .7rem; }
.ai-intro { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.ai-thread {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem; min-height: 220px; max-height: 56vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: .55rem;
}
.ai-empty { margin: auto 0; text-align: center; }
.ai-msg { max-width: 88%; padding: .55rem .75rem; border-radius: 12px; font-size: .92rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }
.ai-msg.me { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.ai-msg.ai { align-self: flex-start; background: var(--bg-3); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ai-li { display: block; padding-left: .35rem; }
.ai-typing { color: var(--muted); font-style: italic; animation: aiPulse 1.4s ease infinite; }
@keyframes aiPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.ai-input { display: flex; gap: .5rem; align-items: flex-end; }
.ai-input textarea {
  flex: 1; resize: none; padding: .55rem .7rem; background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; font: inherit; line-height: 1.4;
}
.ai-send { padding: .6rem .8rem; }
.ai-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.ai-sys { align-self: center; text-align: center; margin: 0; font-style: italic; max-width: 90%; }

/* proposition de l'assistant (aperçu + appliquer/ignorer) */
.ai-proposal {
  margin-top: .6rem; background: var(--bg-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 10px; padding: .6rem .75rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.aip-title { margin: 0; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.aip-rationale { margin: 0; }
.aip-week { border-top: 1px solid var(--line); padding-top: .45rem; }
.aip-week > strong { font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.aip-day { margin: .3rem 0 0 .4rem; display: flex; flex-direction: column; gap: .1rem; }
.aip-dayname { font-weight: 600; font-size: .85rem; }
.aip-exo { font-size: .84rem; color: var(--muted); padding-left: .6rem; }
.aip-exo em { font-style: italic; }
.aip-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .2rem; }
.aip-status { margin: .2rem 0 0; font-size: .85rem; }
.aip-status.ok { color: var(--ok); }

/* « je retiens ? » + panneau « Ma méthode » (base de connaissances du coach) */
.ai-foot-actions { display: flex; gap: .5rem; align-items: center; }
.ai-kb-card { border-left-color: var(--p15, #F2B01E); }
.kb-quote { margin: 0; font-style: italic; }
.kb-modal { width: min(620px, 96vw); }
.kb-body { display: flex; flex-direction: column; gap: 1rem; }
.kb-body h3 { margin: 0 0 .4rem; font-size: .95rem; }
.kb-interview, .kb-list-wrap { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; }
.kb-q { margin: 0 0 .5rem; font-weight: 600; }
.kb-interview textarea, .kb-add input {
  width: 100%; padding: .55rem .7rem; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font: inherit; resize: none;
}
.kb-row { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }
.kb-add { align-items: center; }
.kb-add input { flex: 1; }
.kb-list { list-style: none; margin: 0 0 .3rem; padding: 0; display: flex; flex-direction: column; }
.kb-list li { display: flex; align-items: flex-start; gap: .5rem; justify-content: space-between; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .88rem; }
.kb-list li:first-child { border-top: none; }
.kb-done { margin: 0; }
.kb-house { border-left: 3px solid var(--accent); }

/* lien discret « mot de passe oublié » sous le formulaire de connexion */
.btn-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: .85rem; text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-link:hover { color: var(--text); }
.btn-link[disabled] { opacity: .6; cursor: default; text-decoration: none; }
.forgot-link { display: block; margin: .7rem auto 0; }

/* console admin : socle Barbell + principes venus des coachs */
.kb-admin-lead { max-width: 70ch; margin-bottom: 1.2rem; }
.kb-admin-block { margin-bottom: 1.8rem; max-width: 900px; }
.kb-from-coaches .kb-who { color: var(--accent); margin-right: .3rem; }
.kb-done-tag { white-space: nowrap; color: var(--ok); }
.promote-modal { width: min(560px, 96vw); }
.promote-modal textarea {
  width: 100%; padding: .55rem .7rem; background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font: inherit; resize: none;
}
.kb-origin { font-style: italic; }
.mc-label { font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; color: var(--muted); }
.mc-name { font-size: 1.15rem; }

.quota-card { margin-bottom: 1.2rem; }
.quota-bar { height: 10px; border-radius: 5px; background: var(--bg-3); overflow: hidden; margin: .6rem 0 .5rem; }
.quota-fill { height: 100%; width: 0; background: var(--ok); border-radius: 5px; transition: width .5s ease; }
.quota-fill.warn { background: var(--p15); }
.quota-fill.crit { background: var(--accent); }

/* --- saisie groupée d'un exercice (« 3x7 @120 rpe8 ») --------------------- */
/* La barre d'outils reste sur une ligne au large, et se replie proprement sur
   téléphone : la console est prévue pour le PC mais doit rester utilisable. */
/* --- format de l'exercice (séries simples / top set + back-off / montée) --- */
.ex-format { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: .35rem; }
.fmt-select { font-size: .78rem; padding: .35rem .4rem; color: var(--muted); flex: 0 0 auto; }
.fmt-select:focus { color: var(--text); }
.fmt-tool { display: flex; gap: .4rem; align-items: flex-end; flex: 1 1 16rem; flex-wrap: wrap; }
/* le formulaire de montée : des champs étroits qui passent à la ligne au
   téléphone plutôt que de déborder */
.ramp-f { display: flex; flex-direction: column; gap: .15rem; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
/* largeur calée sur le CONTENU le plus long, pas sur la place disponible :
   « 162,5 » tronqué en « 162, » est pire qu'un bouton qui passe à la ligne. */
.ramp-f input { width: 3.6rem; font-size: .85rem; padding: .35rem .4rem; }
.ramp-f input[data-ramp="cible"] { width: 4.4rem; }
.ramp-f .fmt-select { margin: 0; }
.ex-edit[data-format="ramp"] .ex-format { align-items: flex-start; }
.ramp-form .btn { align-self: flex-end; }
/* le 1RM qui sert de référence : sans lui affiché, un « 80 % » ne veut rien dire */
.rm-chip { font-size: .7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }
.rm-chip strong { color: var(--text); font-weight: 600; }
.rm-in { max-width: 4.5rem; }
/* rang d'une série en « séries simples » : un simple numéro, pas un bouton —
   il n'y a pas de top set à désigner dans ce format */
.set-rank.is-plain { display: inline-block; color: var(--muted); font-size: .8rem; padding: 0 .2rem; }

.ex-tools {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .5rem;
}
/* juste sous le nom de l'exercice : c'est le premier geste du coach, il doit
   tomber sous les yeux avant le tableau plutôt qu'être cherché en dessous */
.quick-add {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  margin: .1rem 0 0;
}
.quick-in {
  flex: 1 1 200px; min-width: 0; max-width: 320px; font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.quick-in::placeholder { color: var(--muted); opacity: .75; }

/* l'aperçu occupe sa place en permanence : le bloc ne saute pas à la frappe */
.quick-hint { min-height: 1.15em; margin: .25rem 0 .35rem; color: transparent; }
.quick-hint.ok { color: var(--ok); }
.quick-hint.ko { color: var(--accent); }
.ex-empty { margin: .4rem 0 0; }
.ex-empty b { color: var(--text); font-weight: 600; }

/* --- top set / back-off (LOT 2) ------------------------------------------ */
/* Le rang sert de bouton : cliquer sur « 3 » fait de la 3e série le top set.
   Discret tant qu'on n'y touche pas, pour ne pas alourdir le tableau. */
.set-rank {
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer;
  padding: .1rem .35rem; min-width: 2.2rem;
}
.set-rank:hover { border-color: var(--line); color: var(--text); }
.set-rank.is-top {
  font-family: var(--font-disp); font-weight: 700; letter-spacing: .06em;
  color: var(--accent); border-color: var(--accent);
}

/* la référence de l'exercice : un filet rouge, rien de plus */
.set-table tr.is-top td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.set-table tr.is-backoff td:first-child { box-shadow: inset 2px 0 0 var(--line); }

.pct-in { max-width: 62px; }
.pct-in:disabled { opacity: .4; cursor: not-allowed; }
.pct-na { color: var(--muted); opacity: .5; padding-left: .4rem; }

/* --- repère du top set dans la séance athlète (LOT 3) --------------------- */
/* « TOP » décrit le programme ; « série en cours » (.is-next) dit où tu en es.
   Le rouge reste au signal dynamique — le repère se contente de la craie.
   La règle .set-row.is-next .set-idx l'emporte en spécificité : quand la série
   en cours EST le top set, l'accent reprend la main, et c'est voulu. */
.set-idx.is-top {
  font-family: var(--font-disp); font-weight: 700;
  font-size: .58rem; letter-spacing: .04em; color: var(--text);
}

/* envoi en cours : durée non mesurable (l'API de stockage ne remonte pas de
   progression), donc va-et-vient plutôt qu'une barre figée qui ferait croire
   à un blocage — c'est ce doute qui pousse l'athlète à relancer l'envoi. */
.media-progress.is-busy .mp-fill {
  width: 40%;
  animation: mpSlide 1.4s ease-in-out infinite;
  transition: none;
}
@keyframes mpSlide {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .media-progress.is-busy .mp-fill { animation: none; width: 100%; opacity: .5; }
}

/* ==========================================================================
   INTERRUPTEUR DE THÈME (chantier mode clair)
   Réutilise .btn.ghost.small ; ne fait qu'aligner l'icône et le libellé.
   ========================================================================== */
.theme-toggle { display: inline-flex; align-items: center; gap: .45rem; }
.theme-toggle .tt-ico { flex: none; }
/* dans la sidebar coach/admin : pleine largeur, au-dessus de « se déconnecter » */
.sidebar-foot .theme-toggle { width: 100%; justify-content: center; margin-bottom: .5rem; }
/* dans l'écran Profil athlète : une ligne « Apparence » + le bouton */
.settings-theme {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 1px solid var(--line);
}
.settings-theme .st-label { font-family: var(--font-disp); letter-spacing: .04em; }

/* ==========================================================================
   LES BÂTISSEURS — mur des contributeurs (frise). Tout par tokens → les deux
   thèmes marchent sans règle spécifique au thème.
   ========================================================================== */
.hof-screen { max-width: 760px; }
/* en-tête communautaire : carte-héros avec un halo d'accent */
.hof-head {
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--elev-card);
  padding: 1.4rem 1.3rem 1.2rem; margin-bottom: 1rem;
  background: radial-gradient(120% 130% at 0% 0%, rgba(var(--accent-rgb), .10), transparent 58%), var(--bg-2);
}
.hof-badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-disp);
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.hof-title { font-size: 1.6rem; margin: .4rem 0 .45rem; }
.hof-intro { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: 0; max-width: 60ch; }
.hof-intro b { color: var(--text); }
.hof-body { padding: 0 .1rem; }

/* la frise : ligne verticale + nœuds colorés par rôle */
.frise { position: relative; }
.frise::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 10px; width: 2px; background: var(--line); }
.fitem { position: relative; padding: 0 0 1.15rem 24px; }
.fitem::before { content: ''; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--bg); }
.fitem.ath::before { background: var(--p20); }
.fitem.com::before { background: var(--warn); }
.fitem:last-child { padding-bottom: 0; }
.fitem-date { font-family: var(--font-disp); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .15rem; }
.fitem-what { font-weight: 600; font-size: .95rem; line-height: 1.35; margin: 0 0 .4rem; }
.fitem-credit { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fitem-who { font-family: var(--font-disp); font-size: .92rem; letter-spacing: .01em; }

/* chip de rôle — fond en alpha du token (donc thème-aware) */
.role { display: inline-flex; align-items: center; font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: .12rem .5rem; border-radius: 999px; border: 1px solid; }
.role.coach { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb), .10); }
.role.ath   { color: var(--p20);    border-color: var(--p20);    background: rgba(var(--p20-rgb), .12); }
.role.com   { color: var(--warn);   border-color: var(--warn);   background: rgba(var(--warn-rgb), .12); }

.cta-foot { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line); color: var(--muted); font-size: .8rem; }
.cta-foot b { color: var(--text); }
.hof-empty { padding: .4rem .1rem 1rem; }
.hof-empty-title { font-family: var(--font-disp); font-size: 1.05rem; margin: 0 0 .35rem; }

/* carte d'entrée dans le Profil athlète */
.hof-entry { display: flex; align-items: center; gap: .75rem; margin: .2rem 0; padding: .8rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--elev-card); color: var(--text);
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), .09), transparent 55%), var(--bg-2); }
.hof-entry > svg { color: var(--accent); flex: none; }
.hof-entry-txt { display: flex; flex-direction: column; gap: .12rem; flex: 1; min-width: 0; }
.hof-entry-txt strong { font-family: var(--font-disp); letter-spacing: .01em; }
.hof-entry-arr { color: var(--muted); font-size: 1.15rem; flex: none; }

/* formulaire admin */
.hof-form { display: flex; flex-direction: column; gap: .6rem; }
.hof-form-row { display: grid; grid-template-columns: 2fr 1fr 1.1fr; gap: .6rem; }
@media (max-width: 640px) { .hof-form-row { grid-template-columns: 1fr; } }
.hof-form .set-field { margin: 0; }
.hof-admin-list li { align-items: flex-start; }
.hof-admin-who { font-family: var(--font-disp); }

/* ==========================================================================
   CHAT ADMIN ↔ COACHS (maître/détail admin) + actions de ligne athlète
   ========================================================================== */
.row-actions { display: inline-flex; gap: .4rem; align-items: center; }
.cc-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; align-items: start; margin-top: 1rem; }
@media (max-width: 720px) { .cc-layout { grid-template-columns: 1fr; } }
.cc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.cc-item {
  width: 100%; display: flex; align-items: center; gap: .5rem; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .75rem; color: var(--text); font-family: var(--font-disp);
  font-size: .92rem; cursor: pointer; transition: border-color .12s, background .12s;
}
.cc-item:hover { border-color: var(--line-hover); }
.cc-item.active { border-color: var(--accent); background: var(--bg-3); }
.cc-item .tab-count { margin-left: auto; }
.cc-chat { min-height: 62vh; }
.cc-chat .chat-mount { display: flex; flex-direction: column; height: 62vh; width: 100%; }
.cc-empty { color: var(--muted); padding: 2rem 0; text-align: center; }

/* ==========================================================================
   MÉDIATHÈQUE ADMIN — additif, tokens existants uniquement (2 thèmes)
   ========================================================================== */
.ml-aide { margin: 0 0 1.1rem; max-width: 70ch; line-height: 1.55; }
.ml-coach { margin-bottom: 1rem; }
.ml-orphan-coach { border-color: var(--warn); }
.ml-list { list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.ml-ath { border-top: 1px solid var(--line); }
.ml-ath:first-child { border-top: none; }
.ml-ath-head {
  width: 100%; display: flex; align-items: center; gap: .6rem;
  background: none; border: none; color: var(--text);
  padding: .6rem .2rem; cursor: pointer; text-align: left; font: inherit;
}
.ml-ath-head:hover { background: var(--bg-3); border-radius: 8px; }
.ml-chev { color: var(--muted); font-size: .8rem; width: 1ch; flex: 0 0 auto; }
.ml-ath-nom { font-weight: 600; flex: 1; min-width: 0; }
.ml-ath-info { flex: 0 0 auto; }
.ml-medias { padding: .2rem 0 .7rem 1.9rem; }
.ml-grid { list-style: none; display: grid; gap: .5rem;
           grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.ml-open {
  width: 100%; display: flex; flex-direction: column; gap: .22rem;
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: 10px; padding: .55rem .7rem; cursor: pointer; text-align: left;
  color: var(--text); font: inherit;
}
.ml-open:hover { border-color: var(--line-hover); background: var(--bg-3); }
.ml-type { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.ml-lib { font-size: .88rem; line-height: 1.25; }
.ml-meta { font-variant-numeric: tabular-nums; }
/* la couleur dit le TYPE — reprise des tokens de mouvement, cohérente avec l'app */
.ml-t-record   .ml-open { border-left-color: var(--accent); }
.ml-t-record   .ml-type { color: var(--accent); }
.ml-t-serie    .ml-open { border-left-color: var(--p20); }
.ml-t-serie    .ml-type { color: var(--p20); }
.ml-t-chat     .ml-open { border-left-color: var(--ok); }
.ml-t-chat     .ml-type { color: var(--ok); }
.ml-t-orphelin .ml-open { border-left-color: var(--warn); background: rgba(var(--warn-rgb), .07); }
.ml-t-orphelin .ml-type { color: var(--warn); }
.muted-badge { color: var(--muted); border-color: var(--line); background: transparent; }

/* ==========================================================================
   CONSOLE ADMIN — tableau des coachs (option B) : comparer au lieu d'empiler
   ========================================================================== */
.adm-tools { display: flex; align-items: center; gap: .8rem; margin: 0 0 .7rem; flex-wrap: wrap; }
.adm-search { flex: 1; min-width: 220px; max-width: 420px; padding: .55rem .8rem; font-size: .92rem; }
.adm-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.adm-tbl { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 680px; }
.adm-tbl thead th {
  text-align: left; font-family: var(--font-disp); font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); padding: .6rem .7rem;
  background: var(--bg-3); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.adm-tbl th.sortable { cursor: pointer; user-select: none; }
.adm-tbl th.sortable:hover { color: var(--text); }
.adm-tbl th.sortable::after { content: ''; opacity: .45; margin-left: .35em; }
.adm-tbl th.sortable.asc::after { content: '▲'; opacity: 1; color: var(--accent); }
.adm-tbl th.sortable.desc::after { content: '▼'; opacity: 1; color: var(--accent); }
.adm-tbl th.num, .adm-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-tbl td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.adm-grp:nth-of-type(even) .adm-row { background: var(--bg-2); }
.adm-row:hover { background: var(--bg-3); }
.adm-c-nom { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.adm-tbl td:first-child { min-width: 220px; }
.adm-chev {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .75rem; padding: .15rem .3rem; border-radius: 5px; flex: 0 0 auto;
}
.adm-chev:hover { color: var(--text); background: var(--bg-3); }
.adm-code { flex: 0 0 auto; }
.adm-pct { color: var(--muted); font-size: .8em; }
.adm-danger { color: var(--danger); font-weight: 700; }
.adm-warn { color: var(--warn); font-weight: 600; }
.adm-sub > td { background: var(--bg); padding: .5rem .9rem .9rem 2.1rem; }
.adm-grp[hidden] { display: none; }