/* ============================================================================
   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 */
  --radius: 12px;
  --shadow: 0 10px 34px rgba(0,0,0,.45);
  --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);
}

* { 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: #3b4759; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; }
.btn.danger { color: #ff6b6b; }
.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: #ff6b6b; }

.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
   ========================================================================== */
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; gap: 1rem; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, transparent 2px 9px); }
.login-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; width: 100%; max-width: 420px; box-shadow: var(--shadow);
}
.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: #fff; }
.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; }
/* 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: #ff8a86; 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;
  transition: border-color .15s, transform .12s;
}
.ath-row:hover { border-color: #3b4759; 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; }
.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: #7ee2a8; border-color: #2c5a3c; background: rgba(46,160,67,.12); }
.badge.pay-late { color: #ff9b9b; border-color: #5a2c2c; background: rgba(245,65,63,.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 */
/* 7 onglets ne tiennent pas sur un portable : la barre défile horizontalement
   plutôt que de déborder de la page (l'onglet tronqué signale qu'il y a
   la suite). */
.profile-tabs {
  display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.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; }
.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: #3b4759; }
.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; }
.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: #fff; box-shadow: 0 0 12px rgba(51,168,82,.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(46,99,230,.1); border: 1px solid rgba(46,99,230,.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: #9db8ff;
}
.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: #8fbcff; opacity: 1; }
.month-gift .ico { display: block; }
.month-cell.status-paid { background: rgba(46,160,67,.16); border-color: #2c5a3c; }
.month-cell.status-paid .month-abbr, .month-cell.status-paid .month-mark { color: #7ee2a8; }
.month-cell.status-free { background: rgba(31,111,235,.16); border-color: #2c4a6a; }
.month-cell.status-free .month-abbr, .month-cell.status-free .month-mark { color: #8fbcff; }
.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: #2ea043; }
.dot-free { background: #1f6feb; }
.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; }

/* ==========================================================================
   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(226,58,52,.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: 0 12px 28px rgba(0,0,0,.30); border-color: #3b4759; }
.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(243,245,248,.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: #7ee2a8; font-weight: 700; border-color: #2c5a3c; }

/* --- C : records (pulse coté coach, glow "frais" coté athlète) --- */
@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(245,65,63,.5); } 100% { box-shadow: 0 0 0 16px rgba(245,65,63,0); } }
.pr-field.pulse { animation: pulseGlow .7s ease; }
.pr-card.fresh { border-left-color: var(--ok); }
.pr-card.fresh .pr-card-value { color: #7ee2a8; }
@keyframes glowOk { 0% { box-shadow: 0 0 0 0 rgba(46,160,67,.45); } 100% { box-shadow: 0 0 0 14px rgba(46,160,67,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: #fff; 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: #fff; 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: #fff; box-shadow: 0 0 10px rgba(226,58,52,.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(226,58,52,.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; }

/* 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: rgba(0,0,0,.72); 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: #000; }
.vmodal-actions { display: flex; gap: .5rem; justify-content: flex-end; padding: 0 1rem .9rem; }

/* --- 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: #3b4759; }
.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(242,176,30,.12); border: 1px solid rgba(242,176,30,.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: #fff;
  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(51,168,82,0); }
  45% { transform: scale(1.04); box-shadow: 0 0 22px rgba(51,168,82,.55); }
  100% { transform: scale(1); box-shadow: 0 0 12px rgba(51,168,82,.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(43,47,56,.55); }
.week-sets li:first-child { border-top: none; }
.ws-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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(245,65,63,.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: #fff; }
.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; }
.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; }

/* 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, rgba(226,58,52,.14)); border: 1px solid var(--accent); border-radius: 999px; padding: .28rem .7rem;
  color: #ff8a86; cursor: pointer; transition: background .15s, transform .12s;
}
.demo-link:hover { background: rgba(226,58,52,.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: #000; }

/* 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(43, 47, 56, .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: #fff;
  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(226,58,52,.13); border: 1px solid rgba(226,58,52,.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: #3b4759; }
.chat-send { background: var(--accent); border-color: var(--accent); color: #fff; }
.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: #3b4759; }
.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: #3b4759; box-shadow: 0 8px 20px rgba(0,0,0,.25); }

/* ==========================================================================
   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: rgba(11, 12, 15, .82); 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: rgba(11, 12, 15, .85); 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: #fff; }
.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(43, 47, 56, .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(226, 58, 52, .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(226,58,52,.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(226,58,52,.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(226,58,52,.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, #d9a441); }
.my-coach-card .btn { align-self: flex-start; margin-top: .5rem; }

/* --- affiliation (LOT 4B) : demande athlète → coach --- */
.badge-pending { background: rgba(217,164,65,.16); color: #d9a441; border: 1px solid #d9a441; }
.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 #d9a441;
  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(217,164,65,.1); border-color: #d9a441; }
.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(226,58,52,.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: #fff; 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. */
.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; }
}
