/* =====================================================================
   ROLOX MOTORSPORT - Feuille de style principale
   ---------------------------------------------------------------------
   Theme : clair, motorsport, tuning, flammes
   Approche : mobile-first, responsive PC via media queries
   ===================================================================== */

/* =====================================================================
   1. VARIABLES DE THEME
   ===================================================================== */
:root {
  /* ===================================================================
     v0.28 - REFONTE. Theme CLAIR conserve, mais assaini :
       - fonds legerement chauds (l'orange y respire mieux que sur du gris)
       - contraste de texte remonte
       - une SEULE echelle de rayons, de typo et d'espacement
       - l'elevation remplace les bordures pour separer les surfaces
     =================================================================== */

  /* Fonds */
  --bg-page: #faf8f7;          /* fond principal, tres legerement chaud */
  --bg-surface: #ffffff;       /* cartes, panneaux */
  --bg-surface-2: #f2efee;     /* surfaces secondaires (hover, etc.) */
  --bg-elevated: #f7f4f3;      /* surfaces sur cartes */
  --bg-flame-soft: #fff3ee;    /* fond teinte accent (selections, actifs) */

  /* Textes - contraste remonte (l'ancien #8888a0 passait mal en plein soleil) */
  --text-primary: #16161c;
  --text-secondary: #4e4e5c;
  --text-tertiary: #85858f;
  --text-on-flame: #ffffff;

  /* Palette motorsport (inchangee : c'est l'identite) */
  --flame: #ff5722;
  --flame-light: #ff8a50;
  --flame-dark: #d84315;
  --racing: #e63946;
  --racing-dark: #c1121f;
  --turbo: #ffb800;
  --turbo-dark: #cc9300;

  /* Couleurs PPL */
  --push-color: var(--flame);
  --pull-color: var(--racing);
  --legs-color: var(--turbo);

  /* Etats */
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;

  /* Bordures - volontairement tres discretes : la separation passe
     desormais par l'ombre, pas par le trait. */
  --border-light: #f0ecea;
  --border: #e8e3e0;
  --border-strong: #cfc8c4;

  /* Rayons - echelle unique. Avant : 8/12/14/16/18/20/24 melanges. */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Typographie - echelle stricte. Toute taille hors de cette liste est un
     accident a corriger, pas une nuance. */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: 40px;
  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* Espacement - multiples de 4 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Ombres - teintees chaud pour rester coherentes avec le fond */
  --shadow-sm: 0 1px 2px rgba(60, 40, 30, 0.05);
  --shadow-md: 0 2px 10px rgba(60, 40, 30, 0.06);
  --shadow-lg: 0 8px 28px rgba(60, 40, 30, 0.09);
  --shadow-flame: 0 6px 20px rgba(255, 87, 34, 0.28);
  --shadow-racing: 0 6px 20px rgba(230, 57, 70, 0.24);

  /* Degrades signature */
  --gradient-flame: linear-gradient(135deg, var(--flame) 0%, var(--turbo) 100%);
  --gradient-racing: linear-gradient(135deg, var(--racing) 0%, var(--flame) 100%);
  --gradient-push: linear-gradient(135deg, var(--flame) 0%, var(--racing) 100%);
  --gradient-pull: linear-gradient(135deg, var(--racing) 0%, var(--racing-dark) 100%);
  --gradient-legs: linear-gradient(135deg, var(--turbo) 0%, var(--flame) 100%);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* v0.40 : alias historiques. Ces noms sont utilises dans les CSS mais
     n'avaient jamais ete definis : les composants retombaient donc sur leur
     valeur de repli en dur (souvent #fff), ce qui produisait des blocs blancs
     en theme sombre. On les branche sur les tokens reels. */
  --bg: var(--bg-page);
  --bg-card: var(--bg-surface);
  --text: var(--text-primary);
  --text-muted: var(--text-tertiary);

  /* Layout */
  --nav-width-desktop: 240px;
  --nav-height-mobile: 70px;
  --content-max-width: 880px;
}

/* =====================================================================
   2. RESET & BASE
   ===================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  /* v0.18 : force le rendu en theme clair (canvas/scrollbars/over-scroll du
     navigateur). Sans ca, en mode sombre du telephone, la zone derriere la
     page (sous le contenu / over-scroll) s'affiche en NOIR. */
  color-scheme: light;
  background: var(--bg-page);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  /* Petit pattern de lignes diagonales subtil "racing stripes" */
  /* v0.28 : le double degrade radial salissait le fond sans rien apporter.
     On garde une seule touche chaude, tres faible, en haut de page. */
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255, 87, 34, 0.035) 0%, transparent 42%);
  background-attachment: fixed;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input {
  font-family: inherit;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* =====================================================================
   3. LAYOUT PRINCIPAL (.app)
   ===================================================================== */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  padding-bottom: calc(var(--nav-height-mobile) + 20px);
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
}

/* =====================================================================
   4. NAVIGATION (.nav)
   Mobile : tab bar en bas
   Desktop (>= 900px) : sidebar a gauche
   ===================================================================== */

.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height-mobile);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav__brand {
  display: none; /* cache en mobile */
}

.nav__items {
  display: flex;
  width: 100%;
}

.nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-tertiary);
  transition: var(--transition-fast);
  padding: 8px 4px;
  position: relative;
}

.nav__item i {
  font-size: 20px;
  transition: var(--transition-fast);
}

/* v0.23 : pastille rouge de notification (nouveautes dans le fil social) */
.nav__dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 2px var(--bg, #fff);
  pointer-events: none;
}

.nav__item span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.nav__item--active {
  color: var(--flame);
}

.nav__item--active i {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgba(255, 87, 34, 0.4));
}

.nav__item:hover:not(.nav__item--active) {
  color: var(--text-secondary);
}

/* =====================================================================
   5. ECRANS (.screen)
   ===================================================================== */

.screen {
  display: none;
  padding: 20px;
  animation: fadeUp 0.35s ease;
}

.screen--active {
  display: block;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-top: 8px;
}

.screen__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.screen__date {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.screen__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--gradient-flame);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  box-shadow: var(--shadow-flame);
}

.screen__greeting {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.screen__greeting strong {
  color: var(--text-primary);
  background: var(--gradient-flame);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* =====================================================================
   6. BANDEAU DE SEANCE (.session-banner)
   ===================================================================== */

.session-banner {
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  color: #fff;
  box-shadow: var(--shadow-md);
}

.session-banner--push  { background: var(--gradient-push); }
.session-banner--pull  { background: var(--gradient-pull); }
.session-banner--legs  { background: var(--gradient-legs); }

.session-banner__badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

/* v0.24 : date du jour dans le bandeau (remplace l'ancien en-tete de page). */
.session-banner__date {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .3px;
  opacity: .85;
  margin-bottom: 6px;
  text-transform: capitalize;
}
/* Laisse passer le bouton flottant Manuel/Auto (fixe en haut a droite). */
#sessionBanner { margin-top: calc(34px + env(safe-area-inset-top)); }

.session-banner__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.session-banner__desc {
  font-size: 14px;
  opacity: 0.9;
}

.session-banner__flame {
  position: absolute;
  right: -10px;
  top: -10px;
  font-size: 90px;
  opacity: 0.15;
  transform: rotate(15deg);
  animation: flicker 2.5s ease-in-out infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 0.15; transform: rotate(15deg) scale(1); }
  50%      { opacity: 0.25; transform: rotate(18deg) scale(1.05); }
}

/* =====================================================================
   7. TIMER (.timer)
   ===================================================================== */

/* v0.25 (B2) : mise en page robuste sur TOUTES largeurs (320px -> tablette).
   Ancien layout : flex + flex-wrap + margin-left:auto -> wrapping incoherent
   selon la largeur (presets qui passent a la ligne, boutons orphelins).
   Nouveau layout : grille deterministe a 2 rangees.
     rangee 1 : [icone] [chrono] [play/reset]
     rangee 2 : presets pleine largeur, repartis en 4 colonnes egales. */
.timer {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon    display buttons"
    "presets presets presets";
  align-items: center;
  column-gap: 14px;
  row-gap: 12px;
  box-shadow: var(--shadow-sm);
}

.timer__icon {
  grid-area: icon;
  width: 40px;
  height: 40px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--flame);
  flex-shrink: 0;
}

.timer__display {
  grid-area: display;
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  background: var(--gradient-flame);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.timer__presets {
  grid-area: presets;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.timer__preset {
  padding: 8px 6px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  transition: var(--transition-fast);
  background: var(--bg-surface);
  text-align: center;
  white-space: nowrap;
}

.timer__preset:hover {
  border-color: var(--flame);
  color: var(--flame);
}

.timer__preset--active {
  border-color: var(--flame);
  color: var(--flame);
  background: rgba(255, 87, 34, 0.08);
}

.timer__buttons {
  grid-area: buttons;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.timer__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition-fast);
}

.timer__btn--play {
  background: var(--gradient-flame);
  color: #fff;
  box-shadow: var(--shadow-flame);
}

.timer__btn--play:hover {
  transform: scale(1.05);
}

.timer__btn--reset {
  background: var(--bg-surface-2);
  color: var(--text-secondary);
}

.timer__btn--reset:hover {
  background: var(--border);
  color: var(--text-primary);
}

/* =====================================================================
   8. LISTE D'EXERCICES (.exercises)
   ===================================================================== */

.exercises {
  margin-bottom: 24px;
}

.exercises__title,
.section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 14px;
}

.exercises__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.exercise-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}

.exercise-card--open {
  border-color: var(--flame);
  box-shadow: var(--shadow-md);
}

.exercise-card__header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.exercise-card__header:hover {
  background: var(--bg-elevated);
}

.exercise-card__icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 87, 34, 0.1);
  color: var(--flame);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.exercise-card__info {
  flex: 1;
  min-width: 0;
}

.exercise-card__name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}

.exercise-card__muscles {
  font-size: 12px;
  color: var(--text-secondary);
}

.exercise-card__toggle {
  color: var(--text-tertiary);
  transition: transform 0.3s;
  font-size: 14px;
}

.exercise-card__remove {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
  margin-right: 4px;
}
.exercise-card__remove:hover {
  background: rgba(230, 57, 70, 0.1);
  color: var(--danger, #e63946);
}

.exercise-card--open .exercise-card__toggle {
  transform: rotate(180deg);
  color: var(--flame);
}

/* v0.25 (F4) : boutons ▲/▼ pour reordonner les exos en mode manuel. */
.exercise-card__reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.exercise-card__move {
  width: 28px;
  height: 22px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}
.exercise-card__move:hover:not(:disabled) {
  background: rgba(255, 87, 34, 0.1);
  color: var(--flame);
}
.exercise-card__move:disabled {
  opacity: 0.3;
  cursor: default;
}

.exercise-card__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.exercise-card--open .exercise-card__body {
  max-height: 800px;
}

/* Tableau des series : N° | Reps | Poids | Ressenti | (-) */
.exercise-card__sets {
  padding: 4px 16px 16px;
}

.set-row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 56px 32px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}

/* v0.14.5 : ligne de set pour exo isometrique (gainage, planche, lever...).
   Pas de colonne "Reps" : on a juste N° / Duree / Feel / Remove. La case
   "Duree" prend toute la largeur centrale. */
.set-row--iso {
  grid-template-columns: 32px 1fr 56px 32px;
}

.set-row:last-of-type { border: none; }

.set-row--header {
  border-bottom: none;
  padding: 6px 0 4px;
}

.set-row__number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.set-row__header-cell {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

.set-row__input {
  width: 100%;
  padding: 9px 6px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: var(--transition-fast);
}

.set-row__input:focus {
  border-color: var(--flame);
}

/* Cellule ressenti (placeholder en attendant l'etape 6) */
.set-row__feeling {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-2);
  font-size: 16px;
  color: var(--text-tertiary);
  cursor: not-allowed;
  user-select: none;
}

/* Bouton suppression "-" */
.set-row__remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-surface-2);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: var(--transition-fast);
  border: 1px solid transparent;
}

.set-row__remove:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.3);
}

.set-row__remove:active {
  transform: scale(0.92);
}

.set-row__remove:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Bouton "+ Ajouter une serie" */
.set-add {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--transition-fast);
}

.set-add:hover {
  border-color: var(--flame);
  border-style: solid;
  color: var(--flame);
  background: rgba(255, 87, 34, 0.04);
}

.set-add i {
  font-size: 11px;
}

/* Zone de notes par exercice */
.exercise-notes {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

.exercise-notes__label {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.exercise-notes__label i {
  color: var(--flame);
}

.exercise-notes__textarea {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  resize: vertical;
  outline: none;
  transition: var(--transition-fast);
}

.set-row__input::-webkit-outer-spin-button,
.set-row__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.set-row__input[type=number] {
  -moz-appearance: textfield;
}

.exercise-notes__textarea:focus {
  border-color: var(--flame);
}

.exercise-notes__textarea::placeholder {
  color: var(--text-tertiary);
  font-style: italic;
}

/* Animation d'apparition d'une nouvelle ligne */
@keyframes slideInRow {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.set-row--new {
  animation: slideInRow 0.25s ease;
}

/* =====================================================================
   9. BOUTON TERMINER (.finish-btn)
   ===================================================================== */

.finish-container {
  margin-top: 24px;
}

.finish-btn {
  width: 100%;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--gradient-flame);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-flame);
  transition: var(--transition);
}

.finish-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255, 87, 34, 0.45);
}

.finish-btn:active {
  transform: translateY(0);
}

/* =====================================================================
   10. CALENDRIER (.calendar)
   ===================================================================== */

.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.calendar-nav__label {
  font-size: 18px;
  font-weight: 700;
  text-transform: capitalize;
}

.calendar-nav__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.calendar-nav__btn:hover {
  border-color: var(--flame);
  color: var(--flame);
}

.calendar {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 16px;
}

.calendar__weekdays {
  display: grid;
  /* v0.17 : minmax(0,1fr) — 1fr seul ne peut pas retrecir sous la largeur
     du contenu (nom de seance en nowrap) et faisait deborder la colonne
     dimanche hors de l'ecran sur mobile. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 8px;
}

.calendar__weekdays > div {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 0;
}

.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.calendar__day {
  aspect-ratio: 1;
  display: flex;
  /* v0.17 : numero au-dessus du nom de seance (avant ils etaient cote a
     cote -> "1Push zebi" illisible et debordement) */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
  transition: var(--transition-fast);
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 2px;
}

.calendar__day--empty {
  background: transparent;
  color: var(--border);
  cursor: default;
}

.calendar__day--today {
  border: 2px solid var(--flame);
  color: var(--flame);
  font-weight: 800;
}

.calendar__day--push  { background: var(--gradient-push); color: #fff; }
.calendar__day--pull  { background: var(--gradient-pull); color: #fff; }
.calendar__day--legs  { background: var(--gradient-legs); color: #fff; }

.calendar__day:not(.calendar__day--empty):hover {
  transform: scale(1.05);
  cursor: pointer;
}

.calendar-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 4px;
}

.calendar-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.calendar-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

.calendar-legend__dot--push { background: var(--gradient-push); }
.calendar-legend__dot--pull { background: var(--gradient-pull); }
.calendar-legend__dot--legs { background: var(--gradient-legs); }

/* =====================================================================
   11. PROFIL
   ===================================================================== */

.profile-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Petit effet "racing stripe" en arriere-plan */
.profile-card::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: var(--gradient-flame);
  opacity: 0.08;
  border-radius: 50%;
  filter: blur(20px);
}

.profile-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--gradient-flame);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 0;
  box-shadow: var(--shadow-flame);
  position: relative;
  z-index: 1;
}

.profile-card__name {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
}

.profile-card__level {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 12px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-full);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  transition: var(--transition);
}

.stat-card:hover {
  border-color: var(--flame);
  transform: translateY(-2px);
}

.stat-card__value {
  font-size: 28px;
  font-weight: 800;
  background: var(--gradient-flame);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}

.stat-card__label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
}

.chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
}

.bar-chart {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 140px;
}

.bar-chart__bar {
  flex: 1;
  background: var(--gradient-flame);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  position: relative;
  transition: var(--transition);
}

.bar-chart__bar:hover {
  filter: brightness(1.1);
}

.bar-chart__label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
}

.info-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px 20px;
  margin-bottom: 16px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}

.info-row:last-child { border: none; }

.info-row__label {
  color: var(--text-secondary);
}

.info-row__value {
  font-weight: 700;
  color: var(--text-primary);
}

/* =====================================================================
   12. RESPONSIVE - DESKTOP (>= 900px)
   ===================================================================== */

@media (min-width: 900px) {

  .app {
    flex-direction: row;
  }

  /* Sidebar visible sur PC */
  .nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: var(--nav-width-desktop);
    height: 100vh;
    flex-direction: column;
    border-top: none;
    border-right: 1px solid var(--border);
    padding: 24px 16px;
    backdrop-filter: none;
    background: var(--bg-surface);
  }

  .nav__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
  }

  .nav__logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    /* v0.14.3 : nouveau logo PNG sur fond noir (identite RXMS), on garde
       un fond noir + leger shadow pour le faire ressortir quel que soit
       le theme de la sidebar. */
    background: #0a0a0c;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(255, 87, 34, 0.25);
  }
  .nav__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Compat : fallback si icone <i> */
  .nav__logo:has(i) {
    background: var(--gradient-flame);
    box-shadow: var(--shadow-flame);
  }

  .nav__brand-text {
    line-height: 1.1;
  }

  .nav__title {
    font-family: 'Racing Sans One', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: var(--text-primary);
  }

  .nav__subtitle {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    background: var(--gradient-flame);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .nav__items {
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  .nav__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    width: 100%;
  }

  .nav__item i {
    font-size: 18px;
  }

  .nav__item span {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }

  .nav__item--active {
    background: rgba(255, 87, 34, 0.1);
  }

  .nav__item:hover:not(.nav__item--active) {
    background: var(--bg-surface-2);
  }

  /* Decalage du contenu pour la sidebar */
  .main {
    margin-left: var(--nav-width-desktop);
    margin-right: 0;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% - var(--nav-width-desktop));
    max-width: none;
  }

  .screen {
    padding: 32px;
    max-width: var(--content-max-width);
    margin: 0 auto;
  }

  .screen__title {
    font-size: 32px;
  }

  /* 4 colonnes pour les stats sur grand ecran */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =====================================================================
   13. RESPONSIVE - PETITS MOBILES (< 380px)
   ===================================================================== */

@media (max-width: 379px) {
  .screen { padding: 16px; }
  .screen__title { font-size: 22px; }
  .timer { padding: 12px; column-gap: 10px; }
  .timer__display { font-size: 26px; min-width: 0; }
  .timer__preset { padding: 8px 2px; font-size: 11px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   14. ECRAN LOGIN
   ===================================================================== */

.login {
  position: fixed;
  inset: 0;
  background: var(--bg-page);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 87, 34, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(230, 57, 70, 0.06) 0%, transparent 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.login.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.login__container {
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.login__logo {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  /* v0.14.3 : nouveau logo PNG (fond noir natif). On l'enchasse dans un
     carre arrondi noir + glow orange pour matcher l'identite RXMS. */
  background: #0a0a0c;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 8px 24px rgba(255, 87, 34, 0.35),
    0 0 0 2px rgba(255, 87, 34, 0.15);
  animation: pulse 2.5s ease-in-out infinite;
}

.login__logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Compat : si jamais on remet une icone <i> dans .login__logo */
.login__logo i {
  font-size: 44px;
  color: #fff;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.login__title {
  font-family: 'Racing Sans One', 'Inter', sans-serif;
  font-size: 42px;
  font-weight: 400; /* la font Racing Sans One n'a qu'un weight */
  letter-spacing: 2px;
  margin-bottom: 6px;
  line-height: 1;
}

.login__title span {
  background: var(--gradient-flame);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login__tagline {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 32px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
}

.login__form {
  text-align: left;
  margin-bottom: 24px;
}

.login__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.login__input {
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 600;
  outline: none;
  transition: var(--transition-fast);
}

.login__input:focus {
  border-color: var(--flame);
  box-shadow: 0 0 0 4px rgba(255, 87, 34, 0.12);
}

.login__hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 6px;
}

.login__error {
  font-size: 13px;
  color: var(--danger);
  margin-top: 8px;
  min-height: 18px;
  font-weight: 600;
}

.login__btn {
  width: 100%;
  padding: 16px;
  margin-top: 16px;
  border-radius: var(--radius-md);
  background: var(--gradient-flame);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-flame);
  transition: var(--transition);
}

.login__btn:hover { transform: translateY(-2px); }
.login__btn:active { transform: translateY(0); }
.login__btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.login__info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 12px;
  color: var(--text-secondary);
}

.login__info i {
  color: var(--flame);
}

/* =====================================================================
   15. ONBOARDING
   ===================================================================== */

.onboarding {
  position: fixed;
  inset: 0;
  background: var(--bg-page);
  display: none;
  flex-direction: column;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.onboarding.show {
  display: flex;
}

.onboarding__progress {
  padding: 24px 24px 0;
}

.onboarding__progress-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.onboarding__progress-fill {
  height: 100%;
  background: var(--gradient-flame);
  border-radius: 3px;
  transition: width 0.4s;
  width: 0%;
}

.onboarding__step {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  margin-top: 10px;
  text-align: right;
  letter-spacing: 0.5px;
}

.onboarding__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 24px;
  overflow-y: auto;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

.onboarding__body h1 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
  text-align: center;
}

.onboarding__body h2 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
  text-align: center;
}

.onboarding__body p {
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 28px;
  font-size: 14px;
  line-height: 1.5;
}

.onboarding__icon {
  font-size: 64px;
  color: var(--flame);
  margin-bottom: 20px;
  background: var(--gradient-flame);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 12px rgba(255, 87, 34, 0.3));
}

/* Grille d'options (objectif, niveau, frequence) */
.onboarding__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}

.ob-option {
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 14px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  font-size: 14px;
  font-weight: 600;
}

.ob-option:hover {
  border-color: var(--flame);
  transform: translateY(-2px);
}

.ob-option.selected {
  border-color: var(--flame);
  background: rgba(255, 87, 34, 0.08);
  box-shadow: var(--shadow-flame);
}

.ob-option i {
  font-size: 30px;
  display: block;
  margin-bottom: 10px;
  color: var(--flame);
}

.ob-option small {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
  font-weight: 500;
}

/* Tags (blessures) */
.onboarding__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 420px;
}

.ob-tag {
  padding: 12px 18px;
  border-radius: var(--radius-full);
  font-size: 13px;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: var(--transition-fast);
  font-weight: 600;
}

.ob-tag.selected {
  border-color: var(--racing);
  background: rgba(230, 57, 70, 0.08);
  color: var(--racing);
}

/* Inputs (mensurations) */
.onboarding__inputs {
  width: 100%;
  max-width: 420px;
}

.ob-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.ob-row > div {
  flex: 1;
}

.ob-row label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ob-row input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  outline: none;
  transition: var(--transition-fast);
}

.ob-row input:focus {
  border-color: var(--flame);
}

/* Resume final */
.onboarding__summary {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-sm);
}

.ob-sum-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}

.ob-sum-row:last-child { border: none; }
.ob-sum-row span:first-child { color: var(--text-secondary); }
.ob-sum-row span:last-child {
  font-weight: 700;
  background: var(--gradient-flame);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Actions */
.onboarding__actions {
  padding: 20px 24px 36px;
  display: flex;
  gap: 12px;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

.ob-btn {
  flex: 1;
  padding: 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  transition: var(--transition);
}

.ob-btn--primary {
  background: var(--gradient-flame);
  color: #fff;
  box-shadow: var(--shadow-flame);
}

.ob-btn--primary:hover { transform: translateY(-2px); }
.ob-btn--primary:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.ob-btn--secondary {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* =====================================================================
   16. BOUTONS PROFIL (logout / reset)
   ===================================================================== */

.logout-btn, .reset-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  transition: var(--transition-fast);
}

.logout-btn {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.logout-btn:hover {
  border-color: var(--flame);
  color: var(--flame);
}

.reset-btn {
  background: rgba(239, 68, 68, 0.05);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.reset-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* =====================================================================
   17. SELECTEUR PUSH/PULL/LEGS
   ===================================================================== */

.session-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  align-items: stretch;
}

.session-selector__tabs {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
}

.session-selector__tab {
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--transition-fast);
}

.session-selector__tab i {
  font-size: 12px;
}

.session-selector__tab:hover {
  color: var(--text-primary);
}

.session-selector__tab--push.active {
  background: var(--gradient-push);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.session-selector__tab--pull.active {
  background: var(--gradient-pull);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.session-selector__tab--legs.active {
  background: var(--gradient-legs);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.session-selector__suggest {
  width: 48px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--turbo-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--transition-fast);
}

.session-selector__suggest:hover {
  background: var(--turbo);
  color: #fff;
  border-color: var(--turbo);
  transform: rotate(15deg);
}

/* =====================================================================
   18. TOAST AUTO-SAVE
   ===================================================================== */

.toast {
  position: fixed;
  bottom: calc(var(--nav-height-mobile) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  /* v0.15.1 : au-dessus des modales (1500) et du mode auto (2000/2500),
     sinon les toasts "Sauvegardé" / "Série enregistrée" etaient invisibles
     pendant le mode auto et derriere les modales. */
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: var(--shadow-lg);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast i {
  color: var(--success);
  font-size: 14px;
}

.toast.toast--error i {
  color: var(--danger);
}

/* Sur PC : positionner le toast en bas a droite */
@media (min-width: 900px) {
  .toast {
    bottom: 20px;
    left: auto;
    right: 20px;
    transform: translateY(20px);
  }
  .toast.show {
    transform: translateY(0);
  }
}

/* =====================================================================
   19. MODALE FIN DE SEANCE
   ===================================================================== */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  padding: 24px;
}

.modal.show {
  display: flex;
  animation: fadeIn 0.3s ease;
}

.modal__content {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  padding: 36px 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: slideUpModal 0.4s ease;
  position: relative;
  overflow: hidden;
}

@keyframes slideUpModal {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.modal__content::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  right: -40px;
  height: 160px;
  background: var(--gradient-flame);
  opacity: 0.1;
  filter: blur(40px);
  pointer-events: none;
}

.modal__flame {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--gradient-flame);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-flame);
  animation: pulse 2s ease-in-out infinite;
  position: relative;
}

.modal__title {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 6px;
  background: var(--gradient-flame);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.modal__subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.modal__stats {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal__stat {
  text-align: center;
}

.modal__stat-value {
  font-size: 22px;
  font-weight: 800;
  background: var(--gradient-flame);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.modal__stat-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-top: 2px;
}

.modal__btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--gradient-flame);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--shadow-flame);
  position: relative;
}

.modal__btn:hover {
  transform: translateY(-2px);
}

/* ============================================================================
   v0.25 (B3 + F1) - Modale recap de fin de seance : scrollable + fermable,
   + bouton "Rapport". La modale reprend le pattern .modal__content--scroll
   (max-height:85vh; flex column) avec en-tete/croix, corps scrollable et pied
   fixe. Le halo .modal__content::before reste pointer-events:none (n'entrave
   pas le scroll).
============================================================================ */
.modal__content--finish {
  padding: 0;
  text-align: center;
  max-width: 420px;
}
.modal__content--finish .modal__body {
  padding: 34px 28px 12px;
  overflow-y: auto;
  flex: 1;
}
.modal__content--finish .modal__flame { margin-top: 4px; }
.modal__footer--finish {
  display: flex;
  gap: 10px;
  padding: 14px 28px 24px;
  border-top: 1px solid var(--border-light, #f0f0f0);
}
.modal__footer--finish .modal__btn { margin: 0; }
/* Le bouton "Rapport" reste secondaire (le CTA principal = "Continuer"). */
.modal__btn--ghost {
  flex: 0 0 auto;
  width: auto;
  padding: 14px 18px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  box-shadow: none;
  border: 1px solid var(--border);
}
.modal__btn--ghost:hover { transform: translateY(-2px); }
.modal__close--finish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: none;
  font-size: 15px;
}
.modal__close--finish:hover { background: var(--border); color: var(--text-primary); }
/* Bouton "Rapport" dans l'en-tete de la modale detail d'historique (F1). */
.modal__report-btn {
  background: none;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  color: var(--flame, #ff5722);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.modal__report-btn:hover { background: rgba(255, 87, 34, 0.08); }

/* ============================================================================
   v0.12 - Bouton "Ajouter un exercice" en cours de seance
============================================================================ */
.add-exo-btn {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition-fast);
}
.add-exo-btn:hover {
  border-color: var(--flame);
  border-style: solid;
  color: var(--flame);
  background: rgba(255, 87, 34, 0.05);
  transform: translateY(-1px);
}
.add-exo-btn i { font-size: 12px; }

/* ============================================================================
   v0.12 - Bandeau "Annuler" pour la suppression de series
============================================================================ */
.undo-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--text-primary, #1a1a1a);
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9999;
  transition: transform 0.3s ease;
  max-width: 92vw;
}
.undo-toast.show {
  transform: translateX(-50%) translateY(0);
}
.undo-toast__btn {
  background: var(--flame, #ff5722);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.undo-toast__btn:hover { filter: brightness(1.1); }

/* ============================================================================
   v0.13 - Section Historique dans le profil
============================================================================ */
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.section-title__hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0;
  text-transform: none;
}

.history-card {
  background: var(--bg-surface, #fff);
  border-radius: var(--radius-md, 16px);
  border: 1px solid var(--border, #eee);
  overflow: hidden;
  margin-bottom: 16px;
}

.history-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light, #f5f5f5);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s);
}
.history-row:last-child { border-bottom: none; }
.history-row:hover { background: rgba(255, 87, 34, 0.04); }
.history-row:active { background: rgba(255, 87, 34, 0.08); }

.history-row__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-flame, #ff5722);
  color: #fff;
  font-size: 18px;
}
.history-row__icon--push { background: linear-gradient(135deg, #ff5722, #e63946); }
.history-row__icon--pull { background: linear-gradient(135deg, #3a7bd5, #00d2ff); }
.history-row__icon--legs { background: linear-gradient(135deg, #f77062, #fe5196); }
.history-row__icon--custom { background: linear-gradient(135deg, #6c63ff, #2196f3); }

.history-row__main {
  min-width: 0;
}
.history-row__name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-row__meta {
  font-size: 12px;
  color: var(--text-tertiary, #888);
  margin-top: 2px;
}

.history-row__chev {
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Bouton "Voir plus" en bas de la liste */
.history-load-more {
  display: block;
  width: 100%;
  padding: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--flame, #ff5722);
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-light, #f5f5f5);
  cursor: pointer;
}
.history-load-more:hover { background: rgba(255, 87, 34, 0.04); }

/* Modale detail historique */
.modal__content--scroll {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--border-light, #f5f5f5);
}
.modal__subtitle {
  font-size: 13px;
  color: var(--text-tertiary, #888);
  margin-top: 4px;
}
.modal__body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  flex: 1;
}

.history-exo {
  border-bottom: 1px solid var(--border-light, #f5f5f5);
  padding: 12px 0;
}
.history-exo:last-child { border-bottom: none; }
.history-exo__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.history-exo__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 87, 34, 0.1);
  color: var(--flame, #ff5722);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.history-exo__name {
  font-weight: 700;
  font-size: 14px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-exo__sets {
  display: grid;
  grid-template-columns: 30px 1fr 1fr 60px;
  gap: 8px;
  font-size: 13px;
  align-items: center;
}
.history-exo__sets-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-tertiary, #888);
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-light, #f5f5f5);
  margin-bottom: 4px;
}
.history-exo__set-row {
  padding: 4px 0;
  color: var(--text-secondary, #555);
}
.history-exo__set-row strong {
  color: var(--text-primary, #1a1a1a);
  font-weight: 700;
}
.history-exo__notes {
  font-size: 12px;
  color: var(--text-tertiary, #888);
  font-style: italic;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}

/* ============================================================================
   v0.13 - Modale "Serie non validee"
============================================================================ */
.autofail-hint {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 87, 34, 0.08);
  border-left: 3px solid var(--flame, #ff5722);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary, #555);
  line-height: 1.5;
}
.autofail-hint strong { color: var(--text-primary, #1a1a1a); }

.ghost-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--border, #ddd);
  color: var(--text-secondary, #555);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast, 0.15s);
}
.ghost-btn:hover { background: rgba(0, 0, 0, 0.03); border-color: var(--text-tertiary, #888); }

/* ============================================================================
   v0.13 - Onglet Social (cache par defaut, prepare l'architecture future)
   Pour activer : document.body.classList.add('has-social')
============================================================================ */
.nav__item--social { display: none; }
body.has-social .nav__item--social { display: flex; }
body.has-social .nav__item--social i,
body.has-social .nav__item--social span { display: inline-flex; }

.social-coming-soon {
  text-align: center;
  padding: 40px 24px;
  background: var(--bg-card, #fff);
  border-radius: var(--radius-lg, 20px);
  border: 1px solid var(--border, #eee);
}
.social-coming-soon__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--gradient-flame);
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: var(--shadow-flame);
}
.social-coming-soon h3 {
  font-family: 'Racing Sans One', 'Inter', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  margin: 0 0 12px;
}
.social-coming-soon p {
  font-size: 14px;
  color: var(--text-secondary, #555);
  line-height: 1.6;
  margin: 0 0 12px;
}
.social-coming-soon__small {
  font-size: 12px;
  color: var(--text-tertiary, #888);
}
.social-coming-soon__small code {
  background: rgba(0,0,0,0.05);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* v0.15.1 : met en evidence la barre du jour dans le graphe hebdo */
.bar-chart__bar--today {
  outline: 2px solid var(--flame);
  outline-offset: 1px;
}


/* =============================================================================
   v0.17 - Etat "aucune seance en cours" (ecran Seance)
   ============================================================================= */
.session--empty .mode-toggle-wrap,
.session--empty #sessionBanner,
.session--empty .timer,
.session--empty .exercises,
.session--empty .finish-container { display: none; }

/* v0.17.1 : rappel discret quand rien n'est planifie */
.no-session-hint {
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary, #999);
  padding: 28px 16px;
}
.no-session-hint i { margin-right: 6px; }

.no-session {
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, #eee);
  border-radius: var(--radius-lg, 20px);
  padding: 28px 18px;
  text-align: center;
}
.no-session__icon {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px;
}
.no-session__title {
  margin: 0 0 18px;
  font-size: 18px; font-weight: 800;
}
.no-session__planned {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, #ffb800, #ff8a00);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 14px);
  padding: 14px 16px;
  margin-bottom: 18px;
  cursor: pointer;
  text-align: left;
}
.no-session__planned-tag { display: block; font-size: 11px; font-weight: 700; opacity: .9; text-transform: uppercase; letter-spacing: .5px; }
.no-session__planned-name { display: block; font-size: 16px; font-weight: 800; margin-top: 2px; }
.no-session__planned-go {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: grid; place-items: center;
  font-size: 14px;
}
.no-session__section {
  font-size: 12px; font-weight: 700;
  color: var(--text-tertiary, #999);
  text-transform: uppercase; letter-spacing: .5px;
  margin: 4px 0 10px;
}
.no-session__hint { font-size: 13px; color: var(--text-secondary, #666); }
.no-session__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.no-session__tpl {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: var(--bg-elevated, #f6f6f8);
  border: 1px solid var(--border, #eee);
  border-radius: var(--radius-md, 14px);
  padding: 12px 14px;
  cursor: pointer;
  transition: var(--transition-fast, .15s);
  text-align: left;
}
.no-session__tpl:hover { border-color: var(--flame, #ff5722); }
.no-session__tpl-color { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.no-session__tpl-name { flex: 1; font-weight: 700; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-session__tpl-meta { font-size: 12px; color: var(--text-tertiary, #999); }
.no-session__free { width: 100%; }

/* Legende "Réalisée" */
.calendar-legend__dot--completed { background: linear-gradient(135deg, #2ecc71, #27ae60); }

/* =====================================================================
   v0.21 : Modale "Modifier mon profil" - puces selectionnables
   ===================================================================== */
.edit-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.edit-chip {
  border: 1.5px solid var(--border, #e3e3ec);
  background: var(--bg-surface, #fff);
  color: var(--text-secondary, #555);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s ease;
}
.edit-chip:hover { border-color: #ff5722; color: #ff5722; }
.edit-chip.is-on {
  background: linear-gradient(135deg, #ff5722, #e63946);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,87,34,.3);
}
.edit-num-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.edit-num-row label.field-label { margin-top: 0; }

/* =====================================================================
   v0.22 — Refonte anti-friction (Express, reprise, création exo, mode
   simplifié, enregistrer comme modèle). Réutilise les variables de thème.
   ===================================================================== */

/* --- État vide de l'onglet Séance : Express + Lancer (F1 + F4) --- */
.ns-actions { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 14px; }
.ns-cta {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 18px; border: none; border-radius: 16px;
  cursor: pointer; text-align: left; color: #fff;
  background: linear-gradient(135deg, var(--flame, #ff5722), #d84315);
  box-shadow: 0 6px 18px rgba(255, 87, 34, 0.28);
}
.ns-cta i { font-size: 22px; }
.ns-cta__txt { display: flex; flex-direction: column; line-height: 1.25; }
.ns-cta__txt strong { font-size: 16px; }
.ns-cta__txt small { font-size: 12px; opacity: 0.9; }
.ns-cta:active { transform: scale(0.99); }

/* v0.25 (F5) : CTA "Séance vocale" (variante bleu nuit pour se distinguer du
   CTA orange "Séance personnalisée"). */
.ns-cta--voice {
  background: linear-gradient(135deg, #3a3a5c, #23233b);
  box-shadow: 0 6px 18px rgba(35, 35, 59, 0.28);
}

/* Modale séance vocale : micro + statut + liste "non trouvés". */
/* v0.26 : bascule "Séance à faire" / "Déjà faite" dans la modale vocale. */
.voice-mode {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--bg-elevated, #f4f4f7);
}
.voice-mode__btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 8px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted, #82828e);
  font-family: inherit;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.voice-mode__btn i { font-size: 12px; }
.voice-mode__btn--active {
  background: var(--bg-card, #fff);
  color: var(--flame, #ff5722);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.voice-rec {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin: 6px 0 18px;
}
.voice-mic {
  width: 76px; height: 76px; border-radius: 50%;
  border: none; cursor: pointer; color: #fff; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--flame, #ff5722), #d84315);
  box-shadow: 0 6px 18px rgba(255, 87, 34, 0.3);
  transition: transform .1s ease, box-shadow .15s ease;
}
.voice-mic:active { transform: scale(0.95); }
.voice-mic--active {
  background: linear-gradient(135deg, #e63946, #b71c1c);
  animation: voicePulse 1.2s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.5); }
  50%      { box-shadow: 0 0 0 14px rgba(230, 57, 70, 0); }
}
.voice-rec__status {
  font-size: 13px; color: var(--text-secondary, #666);
  text-align: center; min-height: 18px;
}
.voice-unmatched {
  margin-top: 12px; padding: 10px 12px;
  border-radius: 10px; font-size: 13px; line-height: 1.4;
  background: rgba(230, 57, 70, 0.08);
  border: 1px solid rgba(230, 57, 70, 0.25);
  color: var(--text-primary, #222);
}

.ns-launch { margin: 6px 0 16px; }
.ns-launch__title {
  font-size: 13px; font-weight: 700; color: var(--text-secondary, #55556a);
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.ns-launch__title i { color: var(--flame, #ff5722); }
.ns-launch__list { display: flex; flex-direction: column; gap: 8px; }
.ns-launch__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 13px 14px; border-radius: 12px; cursor: pointer;
  background: var(--bg-surface, #fff); border: 1px solid var(--border, #d9d9e0);
  color: var(--text-primary, #0a0a0f); text-align: left;
}
.ns-launch__item:hover { border-color: var(--flame, #ff5722); }
.ns-launch__name { font-weight: 700; font-size: 14px; flex: 1; }
.ns-launch__meta { font-size: 12px; color: var(--text-tertiary, #8888a0); }
.ns-launch__item i { color: var(--text-tertiary, #8888a0); }
.no-session-hint--muted { opacity: 0.7; font-size: 12px; }

/* --- Sélecteur de date Express --- */
.express-date {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 4px; padding: 8px 12px; border-radius: 12px;
  background: var(--bg-surface-2, #f3f3f7);
}
.express-date__label { font-size: 13px; font-weight: 600; color: var(--text-secondary, #55556a); display: flex; align-items: center; gap: 6px; }
.express-date__input {
  flex: 1; border: 1px solid var(--border, #d9d9e0); border-radius: 8px;
  padding: 7px 10px; font-size: 14px; background: var(--bg-surface, #fff);
  color: var(--text-primary, #0a0a0f);
}

/* --- Bouton "Lancer" sur les cartes templates (F4) --- */
.tpl-card__btn--launch { color: var(--flame, #ff5722); }
.tpl-card__btn--launch:hover { background: rgba(255, 87, 34, 0.12); }

/* --- Indice de reprise de perf (F2) --- */
.exercise-card__perfhint {
  font-size: 11px; font-weight: 600; color: var(--flame, #ff5722);
  margin-top: 2px;
}

/* --- Création d'exo à la volée (F7) --- */
.catalog-create-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 14px 0 6px; padding: 13px;
  border: 1.5px dashed var(--flame, #ff5722); border-radius: 12px;
  background: rgba(255, 87, 34, 0.06); color: var(--flame, #ff5722);
  font-weight: 700; font-size: 14px; cursor: pointer;
}
.catalog-create-cta:hover { background: rgba(255, 87, 34, 0.12); }

.newexo { padding: 4px 2px 10px; }
.newexo__title { font-size: 16px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.newexo__title i { color: var(--flame, #ff5722); }
.newexo__name {
  width: 100%; padding: 12px 14px; border-radius: 10px; font-size: 15px;
  border: 1px solid var(--border, #d9d9e0); background: var(--bg-surface, #fff);
  color: var(--text-primary, #0a0a0f); margin-bottom: 12px;
}
.newexo__lbl { font-size: 12px; font-weight: 700; color: var(--text-secondary, #55556a); margin: 8px 0 6px; }
.newexo__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.newexo__toggle { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: 13px; color: var(--text-secondary, #55556a); }
.newexo__actions { display: flex; gap: 10px; margin-top: 18px; }
.newexo__cancel, .newexo__create { flex: 1; padding: 13px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; border: none; }
.newexo__cancel { background: var(--bg-surface-2, #ebebef); color: var(--text-secondary, #55556a); }
.newexo__create { background: var(--flame, #ff5722); color: #fff; }
.newexo__create:disabled { opacity: 0.6; }

/* --- Enregistrer comme modèle (F3) --- */
.save-tpl {
  margin-top: 14px; padding: 14px; border-radius: 14px; text-align: left;
  background: var(--bg-surface-2, #f3f3f7); border: 1px solid var(--border, #d9d9e0);
}
.save-tpl__title { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.save-tpl__sub { font-size: 12px; color: var(--text-secondary, #55556a); margin-bottom: 10px; }
.save-tpl__name {
  width: 100%; padding: 10px 12px; border-radius: 9px; font-size: 14px; margin-bottom: 10px;
  border: 1px solid var(--border, #d9d9e0); background: var(--bg-surface, #fff);
  color: var(--text-primary, #0a0a0f);
}
.save-tpl__actions { display: flex; gap: 10px; }
.save-tpl__no, .save-tpl__yes { flex: 1; padding: 11px; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer; border: none; }
.save-tpl__no { background: transparent; color: var(--text-secondary, #55556a); border: 1px solid var(--border, #d9d9e0); }
.save-tpl__yes { background: var(--flame, #ff5722); color: #fff; }
.save-tpl--done { text-align: center; font-weight: 700; color: #1a9d5a; }

/* --- Préférences + switch (F8) --- */
.pref-card { background: var(--bg-surface, #fff); border: 1px solid var(--border, #d9d9e0); border-radius: 14px; padding: 4px 14px; }
.pref-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.pref-row__txt { flex: 1; }
.pref-row__title { font-weight: 700; font-size: 14px; color: var(--text-primary, #0a0a0f); }
.pref-row__sub { font-size: 12px; color: var(--text-tertiary, #8888a0); margin-top: 3px; line-height: 1.35; }
.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
  background: var(--border, #d9d9e0); transition: 0.2s;
}
.switch__slider::before {
  content: ""; position: absolute; height: 22px; width: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.switch input:checked + .switch__slider { background: var(--flame, #ff5722); }
.switch input:checked + .switch__slider::before { transform: translateX(20px); }

/* --- Mode simplifié : masque Calendrier + Mes séances (non destructif) --- */
body.simple-mode .nav__item[data-screen="calendar"],
body.simple-mode .nav__item[data-screen="templates"] { display: none !important; }

/* =============================================================================
   v0.27 - Ajustements d'interface (moins de texte, plus de repères)
   ============================================================================= */

/* Zone de statut de la modale vocale : plus de texte d'aide par defaut, donc
   elle ne doit pas occuper d'espace quand elle est vide. */
.voice-rec__status:empty { display: none; }

/* Heure de la seance dans le calendrier (distingue plusieurs seances du meme
   jour portant le meme nom). */
.day-done-item__time {
  margin-left: auto;
  padding-right: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted, #8a8a95);
  font-variant-numeric: tabular-nums;
}

/* Modale "info seance" (bouton i) : resume succinct, une ligne par exo. */
.tplinfo__sub {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-muted, #8a8a95);
}
.tplinfo__list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tplinfo__item {
  padding-left: 4px;
}
.tplinfo__name { font-weight: 600; }
.tplinfo__detail {
  margin-left: 8px;
  font-size: 13px;
  color: var(--text-muted, #8a8a95);
  font-variant-numeric: tabular-nums;
}
.tplinfo__empty,
.tplinfo__loading {
  padding: 12px 0;
  color: var(--text-muted, #8a8a95);
  font-size: 14px;
}

/* Le CTA "Créer un exercice" est desormais en tete de liste. */
.catalog-create-cta { margin: 0 0 12px; }

/* =============================================================================
   v0.28 - REFONTE GRAPHIQUE (couche d'harmonisation)
   -----------------------------------------------------------------------------
   Principe : ne pas reecrire chaque composant, mais imposer une regle commune
   par-dessus. Trois decisions structurantes :
     1. Une surface se distingue par son OMBRE, pas par un trait.
     2. Un seul rayon par famille de composant (fini le 12/14/16/18/20 melange).
     3. Les titres de section sont des reperes discrets, pas des annonces.
   ============================================================================= */

/* --- 1. Surfaces : ombre au lieu de bordure ------------------------------- */
.stat-card,
.chart-card,
.levels-card,
.history-card,
.info-card,
.pref-card,
.tpl-card,
.social-card,
.profile-card {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--bg-surface);
}
.tpl-card:hover,
.social-card:hover {
  border: none;
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.social-card { transition: box-shadow var(--transition-fast), transform var(--transition-fast); }

/* --- 2. Titres de section : repere, pas proclamation ---------------------- */
.section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-tertiary);
  margin: var(--sp-6) 0 var(--sp-3);
}

/* --- 3. Cartes de stats : le chiffre porte, le label s'efface ------------- */
.stat-card { padding: var(--sp-4); }
.stat-card__value {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.stat-card__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: var(--sp-1);
}

/* --- 4. Champs de saisie ------------------------------------------------- */
.field-input,
textarea.field-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);      /* 16px : empeche le zoom auto iOS au focus */
  background: var(--bg-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field-input:focus,
textarea.field-input:focus {
  outline: none;
  border-color: var(--flame);
  box-shadow: 0 0 0 3px rgba(255, 87, 34, .13);
}
.field-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-tertiary);
  font-weight: 700;
}

/* --- 5. Modales ---------------------------------------------------------- */
.modal__content {
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(60, 40, 30, .18);
  border: none;
}
.modal__title { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; }

/* --- 6. Puces / chips ---------------------------------------------------- */
.chip {
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  font-size: var(--fs-sm);
  transition: all var(--transition-fast);
}
.chip--active {
  background: var(--flame);
  border-color: var(--flame);
  color: var(--text-on-flame);
}

/* --- 7. Navigation ------------------------------------------------------- */
.nav {
  background: rgba(255, 255, 255, .88);
  border-top: 1px solid var(--border-light);
}

/* --- 8. Etats vides : un titre, rien de plus ----------------------------- */
.empty-state p { color: var(--text-tertiary); font-size: var(--fs-sm); }
.empty-state h3 { font-size: var(--fs-md); font-weight: 700; }

/* =============================================================================
   v0.28 - Progression par exercice + répartition musculaire
   ============================================================================= */
.prog-metric,
.muscle-range {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  margin-bottom: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.prog-metric__btn,
.muscle-range__btn {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--sp-2);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.prog-metric__btn--active,
.muscle-range__btn--active {
  background: var(--bg-surface);
  color: var(--flame);
  box-shadow: var(--shadow-sm);
}

.prog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.prog-head__value {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.prog-head__value span { font-size: var(--fs-sm); color: var(--text-tertiary); font-weight: 700; }
.prog-delta { font-size: var(--fs-sm); font-weight: 700; color: var(--text-tertiary); }
.prog-delta--up { color: var(--success); }
.prog-delta--down { color: var(--danger); }

.prog-svg { width: 100%; height: 150px; display: block; overflow: visible; }
.prog-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.prog-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.prog-empty {
  padding: var(--sp-5) 0;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
}

.muscle-bars { display: flex; flex-direction: column; gap: var(--sp-3); }
.muscle-bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-1);
}
.muscle-bar__name { font-size: var(--fs-sm); font-weight: 700; }
.muscle-bar__val {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.muscle-bar__track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  overflow: hidden;
}
.muscle-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gradient-flame);
  transition: width var(--transition);
}


/* =============================================================================
   v0.29 FIX - Le recadrage s'ouvrait DERRIERE la modale appelante
   -----------------------------------------------------------------------------
   #cropModal, #socialDetailModal et #socialPostModal partagent la classe
   .modal (z-index: 1500). A z-index egal, c'est l'ORDRE DANS LE DOM qui
   tranche : cropModal est declare en premier (l.354), il passait donc DESSOUS.
   Symptomes constates : on choisit une photo et "rien ne se passe" ; le
   recadreur n'apparait qu'au clic sur Enregistrer, quand la modale de post se
   ferme et le devoile ; et comme le recadrage n'a jamais ete valide, la photo
   n'est pas enregistree.
   Le recadrage est TOUJOURS appele par-dessus une autre modale : il lui faut
   donc un plan superieur, y compris au mode auto (2500).
   ============================================================================= */
#cropModal { z-index: 2800; }

/* --- v0.30 : bloc "Clé API IA" (espace admin) ----------------------------- */
.aikey-status {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}
.aikey-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
.aikey-dot--on  { background: var(--success); }
.aikey-dot--off { background: var(--text-tertiary); }
.aikey-providers { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.aikey-prov {
  flex: 1 1 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.aikey-prov--active {
  background: var(--flame); border-color: var(--flame); color: #fff;
}
.aikey-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.aikey-actions > * { flex: 1 1 0; justify-content: center; }
.aikey-result { margin-top: var(--sp-3); font-size: var(--fs-sm); min-height: 20px; }
.aikey-result--ok { color: var(--success); }
.aikey-result--ko { color: var(--danger); }
.aikey-result--info { color: var(--text-tertiary); }

/* --- v0.30 : bordures de profil ------------------------------------------
   v0.31 FIX (mobile) : `.pframe` est un enfant de conteneurs flex
   (.comment, .social-card__head). Sans `align-self`, il heritait du
   `align-items: stretch` par defaut et s'etirait sur TOUTE la hauteur du
   commentaire : l'anneau, centre dans cette boite trop haute, apparaissait
   bien plus gros que la photo et decale vers le haut. C'est le bug visible
   sur la capture. `align-self: flex-start` + `flex: 0 0 auto` collent la
   boite a la taille reelle de l'avatar.                                    */
.pframe {
  position: relative;
  display: inline-block;
  line-height: 0;
  flex: 0 0 auto;
  align-self: flex-start;
  vertical-align: middle;
}
.pframe > *:not(.pframe__ring) { margin: 0 !important; }
/* v0.32 FIX (Safari / iOS) : un <svg> sans attributs width/height possede une
   taille intrinseque par defaut de 300x150. Avec `inset` + `width:auto`,
   Blink (Chrome/PC) resout la taille depuis les offsets, mais WebKit retombe
   sur cette taille intrinseque : la boite faisait donc 300x150, ancree en haut
   a gauche, et preserveAspectRatio centrait le cercle dans ce cadre enorme
   -> anneau trop grand et decale, uniquement sur iPhone.
   On donne donc des dimensions EXPLICITES, jamais deduites. */
.pframe__ring {
  position: absolute;
  top: -9px;
  left: -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  pointer-events: none;
  overflow: visible;
}
/* Le texte courbe a besoin de place : quand il y en a un, on agrandit
   legerement les petits avatars plutot que d'afficher 3 px illisibles. */
.pframe--text .comment__avatar { width: 40px; height: 40px; flex-basis: 40px; }
.pframe--text .social-card__avatar { width: 48px; height: 48px; }
.pframe--text .likers-avatar { width: 40px; height: 40px; }
.pframe--text .pframe__ring {
  top: -10px; left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
}

/* Panneau admin des bordures */
.frame-colors { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; min-height: 30px; }
.frame-chip {
  width: 30px; height: 30px; border-radius: 999px;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer; position: relative;
}
/* v0.39 : la croix est un VRAI bouton (supprimer), la pastille elle-meme sert
   a selectionner la couleur que le slider va modifier. */
.frame-chip__x {
  position: absolute; top: -6px; right: -5px;
  width: 17px; height: 17px; padding: 0;
  border: none; border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: 12px; line-height: 17px; text-align: center;
  cursor: pointer; font-family: inherit;
}
.frame-chip--sel {
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--flame);
}
.frame-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.frame-hue {
  flex: 1 1 140px; min-width: 120px; height: 22px;
  -webkit-appearance: none; appearance: none;
  border-radius: 999px; outline: none;
  background: linear-gradient(to right,
    #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.frame-hue::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px;
  border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35); cursor: pointer;
}
.frame-swatches { display: flex; gap: 4px; }
.frame-sw {
  width: 24px; height: 24px; border-radius: 999px;
  border: 1px solid var(--border); cursor: pointer;
}
.frame-speed-val { font-size: var(--fs-xs); color: var(--text-tertiary); margin-bottom: 10px; }
.frame-preview { display: flex; justify-content: center; padding: 16px 0; }
.frame-preview .pframe__avatar {
  width: 64px; height: 64px; border-radius: 999px;
  background: var(--bg-elevated);
  display: grid; place-items: center;
  font-weight: 800; color: var(--text-tertiary);
}
.frame-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.frame-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.frame-item__name { flex: 1; font-size: var(--fs-sm); font-weight: 600; }
.frame-item__del {
  border: none; background: transparent; color: var(--danger);
  cursor: pointer; font-size: 14px;
}

/* --- v0.30 : profil en sous-pages ---------------------------------------- */
.profile-menu {
  display: flex; flex-direction: column;
  gap: 1px;
  margin-top: var(--sp-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--border-light);
}
.profile-menu__item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: 16px var(--sp-4);
  border: none;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.profile-menu__item > span { flex: 1; }
.profile-menu__item > i:first-child {
  width: 22px; text-align: center;
  color: var(--flame);
  font-size: var(--fs-sm);
}
.profile-menu__chev { color: var(--text-tertiary); font-size: var(--fs-xs); }
.profile-menu__item:hover { background: var(--bg-elevated); }
.profile-menu__item--admin > i:first-child { color: var(--racing); }

.subpage__back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--sp-3);
  padding: 8px 14px 8px 10px;
  border: none; border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
}
.subpage__title {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: var(--sp-4);
}
/* Dans une sous-page, le premier titre de section est redondant avec le titre
   de la page : on l'efface. */
.subpage > .section-title:first-of-type { display: none; }

/* --- v0.31 : espace admin en sous-pages ---------------------------------- */
.adminpage__title {
  font-size: var(--fs-md);
  font-weight: 800;
  margin-bottom: var(--sp-4);
}
/* Dans une sous-page admin, le premier titre de section repete le titre. */
.adminpage .section-title:first-of-type { display: none; }

/* --- v0.31 : liste des exercices dans Progression ------------------------ */
.prog-exos { display: flex; flex-direction: column; gap: 1px; margin-top: var(--sp-3); }
.prog-exo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%;
  padding: 12px var(--sp-3);
  border: none;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition-fast);
}
.prog-exo:last-child { border-bottom: none; }
.prog-exo:hover { background: var(--bg-elevated); }
.prog-exo i { color: var(--flame); font-size: var(--fs-xs); }

/* --- v0.32 : photo de profil animée (GIF / vidéo muette) ------------------ */
.avatar-video {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* cadrage automatique, quel que soit le format */
  object-position: center;
  display: block;
  border-radius: inherit;
  pointer-events: none;   /* l'avatar reste cliquable (profil), pas la vidéo */
}
/* Le conteneur doit clipper la vidéo pour rester rond. */
.profile-card__avatar { overflow: hidden; }

/* --- v0.33 : champ humeur dans le profil --------------------------------- */
.profile-card__mood {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
  width: 100%;
  max-width: 280px;
}
.profile-mood__input {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  text-align: center;
}
.profile-mood__input:focus {
  outline: none;
  border-color: var(--flame);
  box-shadow: 0 0 0 3px rgba(255, 87, 34, .13);
}
.profile-mood__save {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: none; border-radius: 999px;
  background: var(--flame); color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
}

/* --- v0.36 : provenance de la métrique de progression -------------------- */
.prog-from {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.prog-hint {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-tertiary);
}
.prog-head { align-items: flex-start; }

/* =============================================================================
   v0.38 - THÈME SOMBRE
   -----------------------------------------------------------------------------
   Le thème clair est construit sur des tokens (v0.28) : le sombre se contente
   donc de les redéfinir sur <body class="theme-dark">, sans toucher aux
   composants. Trois principes tenus depuis la refonte :

   1. Ce n'est PAS un simple inversement. Les surfaces sombres remontent en
      clarté à mesure qu'elles s'élèvent (page < carte < surface posée), là où
      en clair elles descendent. C'est ce qui rend la profondeur lisible sans
      bordures.
   2. L'orange de la charte est légèrement ÉCLAIRCI (#ff5722 -> #ff7043). Sur
      fond sombre, un orange saturé "vibre" et fatigue ; sur fond clair il ne
      poserait pas de problème.
   3. Les ombres ne suffisent plus à séparer deux surfaces sombres : on rend
      donc les bordures un peu plus présentes qu'en clair, et les ombres plus
      profondes.
   ============================================================================= */
body.theme-dark {
  /* Fonds : gris chauds, jamais du noir pur (le noir pur crée un halo autour
     du texte clair sur écran OLED). */
  --bg-page: #14131a;
  --bg-surface: #1d1c25;
  --bg-surface-2: #262530;
  --bg-elevated: #262530;
  --bg-flame-soft: #33221c;

  /* Textes : blanc cassé, jamais #fff pur (contraste trop dur). */
  --text-primary: #f2f0f4;
  --text-secondary: #b6b3c0;
  --text-tertiary: #8f8c99;   /* remonte pour atteindre 4.5:1 (AA) */
  --text-on-flame: #14131a;

  /* Accent éclairci pour fond sombre */
  --flame: #ff7043;
  --flame-light: #ffa270;
  --flame-dark: #e64a19;
  --racing: #f2545b;
  --turbo: #ffc233;

  --success: #34d17c;
  --warning: #fbbf24;
  --danger: #f4626b;

  --border-light: #262530;
  --border: #322f3d;
  --border-strong: #4a4657;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, .55);
  --shadow-flame: 0 6px 20px rgba(255, 112, 67, .35);

  color-scheme: dark;   /* claviers, sélecteurs de date et scrollbars natifs */
}

/* Fond de page : on retire la touche chaude, invisible et sale sur sombre. */
body.theme-dark { background-image: none; }

/* -----------------------------------------------------------------------------
   Reprise des couleurs écrites EN DUR avant la refonte par tokens.
   Elles sont peu nombreuses mais très visibles (carte du mode auto, barre de
   navigation, bulles de commentaires) : sans ces reprises, le thème sombre
   laisserait des blocs blancs éclatants au milieu de l'écran.
   -------------------------------------------------------------------------- */
body.theme-dark .nav {
  background: rgba(29, 28, 37, .92);
  border-top-color: var(--border);
}
body.theme-dark .auto-screen { background: var(--bg-page); }
body.theme-dark .auto-card,
body.theme-dark .auto-screen__rest,
body.theme-dark .auto-screen__cancel {
  background: var(--bg-surface);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}
body.theme-dark .auto-card__exo-name,
body.theme-dark .auto-target__value { color: var(--text-primary); }
body.theme-dark .auto-card__muscles,
body.theme-dark .auto-target__label { color: var(--text-tertiary); }
body.theme-dark .auto-target { background: var(--bg-elevated); }
body.theme-dark .auto-target:focus-within { background: var(--bg-surface-2); }
body.theme-dark .auto-card__info,
body.theme-dark .auto-step-btn { background: var(--bg-surface-2); color: var(--flame); }
body.theme-dark .auto-card__img { background: var(--bg-elevated); }

body.theme-dark .comment__bubble,
body.theme-dark .comment-attach__menu,
body.theme-dark .social-card__menu,
body.theme-dark .modal__content,
body.theme-dark .ptr { background: var(--bg-surface); }
body.theme-dark .comment__photo,
body.theme-dark .comment__video,
body.theme-dark .social-card__photo,
body.theme-dark .social-card__video,
body.theme-dark .comment-media__img,
body.theme-dark .comment-media__vid { background: var(--bg-elevated); }

body.theme-dark .field-input,
body.theme-dark textarea.field-input,
body.theme-dark .profile-mood__input {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
body.theme-dark .chip { background: var(--bg-elevated); border-color: var(--border); }
body.theme-dark .ghost-btn { background: var(--bg-elevated); color: var(--text-secondary); }

/* Les images d'exercices du catalogue sont des PNG à fond blanc : sans ce
   traitement elles deviennent des rectangles blancs sur fond sombre. */
body.theme-dark .auto-card__img,
body.theme-dark .exo-thumb img { filter: brightness(.92) contrast(1.04); }
.frame-none { font-size: var(--fs-xs); color: var(--text-tertiary); font-style: italic; }
.frame-item__name small { display: block; font-weight: 400; font-size: 11px; color: var(--text-tertiary); }

/* =============================================================================
   v0.39 - THÈME SOMBRE : reprise EXHAUSTIVE des fonds clairs codés en dur
   -----------------------------------------------------------------------------
   La v0.38 ne redéfinissait que les tokens. Or 68 sélecteurs, écrits avant la
   refonte par tokens, portent encore un fond clair en dur (#fff, #f5f5f7,
   #fff5f0…). En sombre ils restaient des blocs blancs éclatants : boutons du
   mode auto, cartes de séances, sélecteur d'exercices, chips de la modale.

   Ils sont repris ici par famille. Les couleurs viennent des tokens, donc si la
   charte bouge un jour, ce bloc suit automatiquement.
   ============================================================================= */

/* --- 1. Fond de page : couvre aussi la zone d'over-scroll -----------------
   C'est la cause du bandeau BLANC visible en bas quand on descend : le fond
   sombre était posé sur <body>, mais la zone que le navigateur peint au-delà
   du contenu vient de <html>. Sur iOS, l'élastique de fin de scroll révélait
   donc le blanc par défaut. */
html { background-color: var(--bg-page); }
html.theme-dark, body.theme-dark { background-color: #14131a; }
/* Le degrade chaud est peint sur body en `background-attachment: fixed` : en
   sombre on le retire, sinon il eclaircit le bas de page. */
html.theme-dark body { background-image: none; }
body.theme-dark #appContainer,
body.theme-dark .screen { background-color: transparent; }

/* --- 2. Mode auto : la totalité de l'écran de séance ---------------------- */
body.theme-dark .auto-screen,
body.theme-dark .auto-screen__body { background: var(--bg-page); }
body.theme-dark .auto-screen__back,
body.theme-dark .auto-screen__skip-exo,
body.theme-dark .auto-screen__cancel,
body.theme-dark .auto-screen__rest,
body.theme-dark .auto-screen__rest button,
body.theme-dark .auto-step-btn,
body.theme-dark .auto-card__info,
body.theme-dark .auto-done-btn--note,
body.theme-dark .auto-done-btn--addexo,
body.theme-dark .auto-action--addexo,
body.theme-dark .auto-feel-toggle.active,
body.theme-dark .feel-emoji--active,
body.theme-dark .mode-switch--auto {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border-color: var(--border);
}
body.theme-dark .auto-step-btn:hover,
body.theme-dark .auto-done-btn--note:hover,
body.theme-dark .auto-done-btn--addexo:hover,
body.theme-dark .auto-action--addexo:hover,
body.theme-dark .feel-emoji:hover,
body.theme-dark .mode-switch--auto:hover { background: var(--bg-flame-soft); }
/* Le chrono de repos : le texte était en #222, illisible sur fond sombre. */
body.theme-dark .auto-screen__rest span { color: var(--text-primary); }
body.theme-dark .auto-screen__rest i { color: var(--flame); }

/* --- 3. Listes et cartes (séances, catalogue, calendrier, niveaux) -------- */
body.theme-dark .tpl-card,
body.theme-dark .catalog-row,
body.theme-dark .catalog-filters,
body.theme-dark .day-picker-item,
body.theme-dark .day-picker-date,
body.theme-dark .day-done-item,
body.theme-dark .day-done-add,
body.theme-dark .level-row,
body.theme-dark .level-add-item,
body.theme-dark .past-exo,
body.theme-dark .editor-exo,
body.theme-dark .editor-exo__head,
body.theme-dark .editor-add-tile,
body.theme-dark .exo-preview__imgwrap,
body.theme-dark .admin-ads__counter,
body.theme-dark .ads-log-chip,
body.theme-dark .social-card__post-btn,
body.theme-dark .social-profile__level,
body.theme-dark .session-banner__badge,
body.theme-dark .no-session__planned-go {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border);
}
body.theme-dark .catalog-row:hover,
body.theme-dark .day-picker-item:hover,
body.theme-dark .editor-add-tile:hover { background: var(--bg-surface-2); }
body.theme-dark .catalog-row--selected { background: var(--bg-flame-soft); }
body.theme-dark .editor-exo__sets,
body.theme-dark .editor-exo__weight { background: var(--bg-elevated); color: var(--text-primary); }

/* --- 4. Boutons à choix (objectif, repos, type, niveau) ------------------- */
body.theme-dark .objective-choice__btn,
body.theme-dark .tpl-rest-btn,
body.theme-dark .past-type-btn,
body.theme-dark .level-choice__btn,
body.theme-dark .adtoggle-btn.is-on {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border-color: var(--border);
}
body.theme-dark .objective-choice__btn.is-active,
body.theme-dark .tpl-rest-btn.is-active,
body.theme-dark .past-type-btn.is-active,
body.theme-dark .level-choice__btn.is-active {
  background: var(--flame);
  color: #fff;
  border-color: var(--flame);
}

/* --- 5. Contrôles natifs (curseurs, interrupteurs, listes déroulantes) ---- */
body.theme-dark .switch__slider::before { background: #f2f0f4; }
body.theme-dark .ads-log-bar__sort select {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border);
}
body.theme-dark .ads-freq__slider::-webkit-slider-thumb,
body.theme-dark .ads-freq__slider::-moz-range-thumb,
body.theme-dark .frame-hue::-webkit-slider-thumb,
body.theme-dark .tpl-color-hue::-webkit-slider-thumb,
body.theme-dark .tpl-color-hue::-moz-range-thumb {
  background: #f2f0f4;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .6);
}
body.theme-dark .danger-btn { background: var(--bg-surface-2); color: var(--danger); }
/* Tuile "+" de l'état vide du mode auto (dernier fond clair restant). */
body.theme-dark .auto-card--empty .auto-card__icon {
  background: var(--bg-surface-2);
  color: var(--flame);
}

/* --- v0.39 : sélecteur d'image dans la banque de pubs --------------------- */
.adpost-source { display: flex; gap: var(--sp-2); margin-top: 10px; }
.adpost-source > * { flex: 1 1 0; justify-content: center; }
.adpost-bank {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-top: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding: 8px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.adbank-item {
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
}
.adbank-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adbank-item:hover { border-color: var(--flame); }

/* =============================================================================
   v0.40 - THÈME SOMBRE : fonds clairs écrits en valeur LITTÉRALE
   -----------------------------------------------------------------------------
   L'audit v0.39 ne cherchait qu'une liste de codes (#fff, #f5f5f7…). Il ratait
   donc #f5f5f5, #e8f8ef, #eee, #f2f2f2… Le nouvel audit raisonne sur la
   LUMINANCE : toute couleur de fond claire est signalée, quel que soit son code.
   ============================================================================= */
body.theme-dark .tpl-card__btn,
body.theme-dark .level-row__edit,
body.theme-dark .level-row__del,
body.theme-dark .editor-exo__set-btn,
body.theme-dark .editor-exo__move button,
body.theme-dark .past-exo__remove,
body.theme-dark .mode-toggle,
body.theme-dark .catalog-row__preview,
body.theme-dark .ads-log-chip.is-off,
body.theme-dark .ads-manage__thumb,
body.theme-dark .social-post-preview,
body.theme-dark .modal__close:hover {
  background: var(--bg-surface-2);
  color: var(--text-secondary);
}
body.theme-dark .tpl-card__name { color: var(--text-primary); }
body.theme-dark .tpl-card__meta,
body.theme-dark .tpl-card__desc { color: var(--text-tertiary); }
body.theme-dark .modal__close { color: var(--text-tertiary); }
body.theme-dark .modal__head,
body.theme-dark .modal__footer,
body.theme-dark .modal__header { border-color: var(--border); }

/* Pastilles d'état : on garde la teinte, on en baisse la luminosité. */
body.theme-dark .catalog-row__add { background: #17331f; color: #34d17c; }
body.theme-dark .editor-exo__remove,
body.theme-dark .past-exo__remove:hover,
body.theme-dark .auto-card__remove:hover,
body.theme-dark .social-card__menu-item--danger:hover { background: #3a1d20; }
body.theme-dark .social-cal__status--completed { background: #17331f; color: #34d17c; }
body.theme-dark .social-cal__status--missed    { background: #3a1d20; color: #f4626b; }
body.theme-dark .social-cal__status--planned   { background: #33221c; color: #ff7043; }
body.theme-dark .level-up-box {
  background: linear-gradient(135deg, #33221c, #2a1a15);
  color: var(--text-primary);
}
body.theme-dark .auto-screen__progress-bar,
body.theme-dark .day-picker-divider { background: var(--border); }

/* =============================================================================
   v0.40 - Le "carré" derrière les modales arrondies (iOS)
   -----------------------------------------------------------------------------
   `.modal` combine `backdrop-filter: blur(8px)` et un enfant animé qui crée sa
   propre couche de composition. Sur WebKit, le flou est alors calculé sur la
   BOÎTE ENGLOBANTE de cette couche, pas sur sa forme arrondie : un rectangle
   plus clair apparaît derrière la carte. On remplace le flou par un voile
   opaque en thème sombre — l'effet visuel est équivalent et l'artefact
   disparaît. `isolation` empêche la carte de créer une couche parasite.
   ============================================================================= */
body.theme-dark .modal {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(8, 8, 12, 0.82);
}
body.theme-dark .modal__content {
  isolation: isolate;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
body.theme-dark .social-detail__photo { background: var(--bg-elevated); }
.danger-btn--full {
  width: 100%;
  margin-top: var(--sp-2);
  justify-content: center;
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--border);
}

/* =============================================================================
   v0.40 - Récap de séance : lignes de séries épurées
   -----------------------------------------------------------------------------
   Deux colonnes alignées, un en-tête unique en haut du récap. Les chiffres sont
   en `tabular-nums` pour que les colonnes restent droites d'une ligne à l'autre.
   ============================================================================= */
.setlines__legend {
  display: grid;
  grid-template-columns: 4.5em 1fr auto;
  gap: var(--sp-3);
  padding: 0 var(--sp-1) var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-tertiary);
}
.setlines { display: flex; flex-direction: column; }
.setline {
  display: grid;
  grid-template-columns: 4.5em 1fr auto;
  gap: var(--sp-3);
  padding: 5px var(--sp-1);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.setline__reps { font-weight: 700; color: var(--text-primary); }
.setline__val  { color: var(--text-secondary); }
.setline__feel { color: var(--text-tertiary); }
.setline--empty { color: var(--text-tertiary); font-style: italic; }

/* =============================================================================
   v0.41 - THEME SOMBRE : couleurs de TEXTE ecrites en dur
   -----------------------------------------------------------------------------
   Mon audit precedent ne verifiait que les FONDS. Les regles `color: #222` /
   `#888` passaient donc au travers : sur la page "Mes niveaux", les noms
   d'exercices etaient du gris tres sombre sur fond sombre, donc illisibles.
   L'audit couvre desormais aussi le texte, et distingue :
     - le gris tres sombre (#222, #444) -> texte principal
     - le gris moyen (#888, #666)       -> texte secondaire
   Les accents (orange, rouge, vert) sont volontairement laisses tels quels :
   ils restent lisibles sur fond sombre.
   ============================================================================= */
body.theme-dark .ads-log-bar__sort select,
body.theme-dark .auto-card__exo-name,
body.theme-dark .auto-screen__back,
body.theme-dark .auto-screen__rest span,
body.theme-dark .auto-screen__skip-exo,
body.theme-dark .auto-screen__title,
body.theme-dark .auto-target__value,
body.theme-dark .catalog-row__name,
body.theme-dark .chip,
body.theme-dark .day-done-item__name,
body.theme-dark .day-picker-item__name,
body.theme-dark .editor-exo__move button,
body.theme-dark .editor-exo__name,
body.theme-dark .editor-exo__set-btn,
body.theme-dark .empty-state h3,
body.theme-dark .level-add-item__name,
body.theme-dark .level-choice__btn,
body.theme-dark .level-row__edit,
body.theme-dark .level-row__name,
body.theme-dark .level-up-box__row,
body.theme-dark .level-up-box__row strong,
body.theme-dark .modal__close:hover,
body.theme-dark .mode-toggle__btn:hover,
body.theme-dark .objective-choice__btn,
body.theme-dark .past-exo__name,
body.theme-dark .past-type-btn,
body.theme-dark .tpl-card__btn,
body.theme-dark .tpl-card__name,
body.theme-dark .tpl-rest-btn {
  color: var(--text-primary);
}
body.theme-dark .ads-log-bar__sort,
body.theme-dark .ads-log-chip.is-off,
body.theme-dark .auto-card__muscles,
body.theme-dark .auto-feel-toggle,
body.theme-dark .auto-screen__sub,
body.theme-dark .auto-target__label,
body.theme-dark .calendar-tip,
body.theme-dark .catalog-filter-label,
body.theme-dark .catalog-row__meta,
body.theme-dark .catalog-row__preview,
body.theme-dark .day-done-item__meta,
body.theme-dark .day-picker-item__count,
body.theme-dark .day-picker-item__meta,
body.theme-dark .day-picker-section,
body.theme-dark .editor-add-tile,
body.theme-dark .editor-exo__meta,
body.theme-dark .editor-exo__param > label,
body.theme-dark .empty-state,
body.theme-dark .exo-preview__meta,
body.theme-dark .field-label,
body.theme-dark .level-add-item__muscle,
body.theme-dark .level-row__meta,
body.theme-dark .modal__close,
body.theme-dark .mode-toggle__btn,
body.theme-dark .past-empty,
body.theme-dark .past-exo__remove,
body.theme-dark .past-set__h,
body.theme-dark .tpl-card__desc,
body.theme-dark .tpl-card__meta {
  color: var(--text-tertiary);
}


/* =============================================================================
   v0.41 - L'ENCOCHE BLANCHE PERMANENTE EN BAS D'ÉCRAN
   -----------------------------------------------------------------------------
   `.toast` et `.undo-toast` utilisent `background: var(--text-primary)`. En
   thème clair c'est astucieux : le token vaut #16161c, donc une pastille sombre
   sur fond clair. En thème sombre le token devient #f2f0f4 et l'astuce se
   retourne : la pastille devient QUASI BLANCHE.

   `.undo-toast` est masquée par `translateY(120%)`, ce qui la sort de l'écran
   tant qu'elle tient sur une ligne. Dès que son contenu passe sur deux lignes,
   120 % de sa hauteur ne suffisent plus : un bout blanc restait affiché en
   permanence en bas de l'écran, sur tous les onglets.

   Deux corrections : une couleur de fond explicite (jamais dérivée du texte),
   et un masquage qui ne dépend plus de la hauteur du contenu.
   ============================================================================= */
body.theme-dark .toast,
body.theme-dark .undo-toast {
  background: #2b2936;
  color: var(--text-primary);
  border: 1px solid var(--border);
}
/* Masquage fiable, indépendant de la hauteur du contenu. */
.undo-toast:not(.show) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.toast:not(.show) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.form-hint { font-size: var(--fs-xs); color: var(--text-tertiary); margin: 8px 0 0; }

/* v0.42 : croix d'annulation sur la bannière de séance (mode manuel) */
.session-banner { position: relative; }
.session-banner__cancel {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border: none; border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 15px;
}
.session-banner__cancel:hover { background: rgba(255, 255, 255, .35); }
#screenProfile { position: relative; overscroll-behavior-y: contain; }

/* --- v0.42 : bordure en étoile de David ----------------------------------
   Le cercle inscrit dans un hexagramme a un rayon de R/2 : l'étoile a donc
   besoin de bien plus de place autour de la photo qu'un simple anneau, sinon
   les six pointes viendraient mordre sur l'avatar. */
.pframe--star6 .pframe__ring {
  top: -20px; left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
}
.pframe--star6.pframe--text .pframe__ring {
  top: -22px; left: -22px;
  width: calc(100% + 44px);
  height: calc(100% + 44px);
}
/* L'étoile déborde : on réserve la place pour ne pas chevaucher le pseudo. */
.pframe--star6 { margin: 8px 10px 8px 8px; }

/* --- v0.42 : bordure en étoile de David ----------------------------------
   Le cercle inscrit dans un hexagramme n'a qu'un rayon de R/2 : l'étoile a
   donc besoin de bien plus de place autour de la photo qu'un simple anneau,
   sinon les six pointes viendraient mordre sur l'avatar. */
.pframe--star6 .pframe__ring {
  top: -20px; left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
}
.pframe--star6.pframe--text .pframe__ring {
  top: -22px; left: -22px;
  width: calc(100% + 44px);
  height: calc(100% + 44px);
}
/* L'étoile déborde davantage : on réserve la place pour ne pas chevaucher
   le pseudo ni la carte voisine. */
.pframe--star6 { margin: 10px 12px 10px 10px; }
.frame-shapes { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.frame-shape {
  flex: 1 1 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
}
.frame-shape--active { background: var(--flame); border-color: var(--flame); color: #fff; }


/* v0.43 : la chip active doit se VOIR en thème sombre. `.chip--active` était
   défini avant le bloc sombre, mais `body.theme-dark .chip` (plus spécifique)
   repassait derrière et écrasait le fond orange : impossible de savoir quel
   filtre était actif. On rétablit la priorité. */
body.theme-dark .chip--active,
body.theme-dark .catalog-scroller .chip--active {
  background: var(--flame);
  border-color: var(--flame);
  color: #fff;
}
body.theme-dark .catalog-row__info-btn { background: var(--bg-surface-2); }

/* --- v0.43 : en-tête du détail d'historique ------------------------------- */
.modal__header--history { flex-direction: column; align-items: stretch; gap: 6px; }
.history-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}
.history-head__title {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
  text-align: left;
}
.history-head__sub {
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.modal__report-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--bg-flame-soft);
  color: var(--flame);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
}
body.theme-dark .modal__report-btn { background: var(--bg-surface-2); color: var(--flame); }