/* =============================================================================
   ROLOX MOTORSPORT - styles additionnels v0.7
   Templates / Banque / Planning
   ============================================================================= */

/* ===== Toggle Manuel / Auto ===== */
.mode-toggle-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}
.mode-toggle {
  display: inline-flex;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.mode-toggle__btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; color: #666; border: none;
  border-radius: 8px; padding: 7px 11px;
  font-weight: 600; font-size: 12px;
  cursor: pointer; transition: all .15s ease;
  font-family: inherit;
}
.mode-toggle__btn:hover { color: #222; }
.mode-toggle__btn--active {
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,87,34,.3);
}
.mode-toggle__btn--active:hover { color: #fff; }
.mode-toggle__btn i { font-size: 11px; }

/* v0.18 : bouton unique de bascule Manuel <-> Auto */
.mode-switch {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(255,87,34,.3);
  transition: transform .12s ease, box-shadow .12s ease;
}
.mode-switch:hover { box-shadow: 0 4px 12px rgba(255,87,34,.45); }
.mode-switch:active { transform: scale(.97); }
.mode-switch i { font-size: 12px; }
/* Variante dans l'ecran auto (header) : fond blanc translucide */
.mode-switch--auto {
  background: rgba(255,255,255,.85);
  color: #ff5722;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.mode-switch--auto:hover { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.12); }

/* v0.18.1 : bouton bascule fixe en haut a droite -> meme position en manuel
   (ecran Seance) et en auto (overlay), pour qu'il ne saute pas. */
.mode-switch--fixed {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: 14px;
  z-index: 90;
}
/* Dans l'ecran auto (stacking context z-index:2000), on remonte le bouton
   au-dessus de la carte. */
.mode-switch--auto.mode-switch--fixed { z-index: 2050; }

/* v0.18 : tuile "gros +" pour ajouter des exercices dans l'editeur */
.editor-add-tile {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #fafafa;
  border: 2px dashed #e0e0e0;
  border-radius: 14px;
  padding: 22px 12px;
  margin-top: 10px;
  color: #999;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.editor-add-tile i { font-size: 24px; }
.editor-add-tile:hover {
  border-color: #ff5722;
  background: #fff5f0;
  color: #ff5722;
}

/* ===== Boutons PPL dans le day picker ===== */
.day-picker-section {
  font-size: 11px; font-weight: 700; color: #888;
  text-transform: uppercase; letter-spacing: .8px;
  margin: 12px 0 8px;
}
.day-picker-ppl {
  display: flex; gap: 8px; margin-bottom: 8px;
  flex-wrap: wrap;
}
.ppl-pick {
  flex: 1; min-width: 130px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; padding: 12px 14px;
  border: none; border-radius: 12px;
  cursor: pointer; text-align: left;
  font-family: inherit; color: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ppl-pick:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.ppl-pick i { font-size: 18px; }
.ppl-pick span { font-weight: 800; font-size: 16px; }
.ppl-pick small { font-size: 11px; opacity: .9; }

.ppl-pick--push { background: linear-gradient(135deg, #ff5722, #e63946); }
.ppl-pick--pull { background: linear-gradient(135deg, #e63946, #c92d3a); }
.ppl-pick--legs { background: linear-gradient(135deg, #ffb800, #ff8a00); }

/* ===== Calendrier cliquable ===== */
.calendar-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #888;
  margin: 10px 4px 16px;
  font-style: italic;
}
.calendar-tip i { color: #ff5722; }

.calendar__day--clickable {
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.calendar__day--clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255,87,34,.2);
}
.calendar__day-num { display: block; font-weight: 700; }
.calendar__day-label {
  display: block;
  font-size: 9px;
  color: #fff;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.calendar__day--planned   { background: linear-gradient(135deg, #ffb800, #ff8a00); color: #fff; }
.calendar__day--completed { background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; }
.calendar__day--missed    { background: linear-gradient(135deg, #e63946, #c92d3a); color: #fff; opacity: .75; }
/* v0.15 : séance "Autre" (custom) réalisée et non liée à une planif */
.calendar__day--custom    { background: linear-gradient(135deg, #ff5722, #e63946); color: #fff; }

.calendar-legend__dot--planned   { background: #ffb800; }
.calendar-legend__dot--completed { background: #2ecc71; }
.calendar-legend__dot--missed    { background: #e63946; }

/* ===== Bandeau seance custom ===== */
.session-banner--custom {
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff;
}

/* ===== Boutons generiques ===== */
.primary-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff; border: none; border-radius: 12px;
  padding: 14px 22px; font-weight: 700; font-size: 15px;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 4px 14px rgba(255,87,34,.35);
}
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,87,34,.45); }
.primary-btn--full { width: 100%; justify-content: center; }

.ghost-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: #ff5722; border: 1px solid #ff5722;
  border-radius: 10px; padding: 6px 12px; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: all .15s ease;
}
.ghost-btn:hover { background: rgba(255,87,34,.08); }

.danger-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #e63946; border: 1px solid #e63946;
  border-radius: 10px; padding: 10px 16px; font-weight: 600; font-size: 14px;
  cursor: pointer;
}
.danger-btn:hover { background: #fff5f5; }

/* ===== Cartes de templates ===== */
.tpl-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.tpl-card {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #eee; border-radius: 14px;
  padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: box-shadow .15s ease;
}
.tpl-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }

.tpl-card__main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.tpl-card__icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff; font-size: 18px; flex-shrink: 0;
}
.tpl-card__info { min-width: 0; flex: 1; }
.tpl-card__name { font-weight: 700; font-size: 15px; color: #222; }
.tpl-card__meta { font-size: 12px; color: #888; margin-top: 2px; }
.tpl-card__desc { font-size: 12px; color: #666; margin-top: 4px; font-style: italic; }

.tpl-card__actions { display: flex; gap: 6px; align-items: center; }
.tpl-card__btn {
  width: 36px; height: 36px; border-radius: 8px;
  background: #f5f5f5; border: none; color: #555;
  cursor: pointer; display: grid; place-items: center;
  transition: all .15s ease;
}
.tpl-card__btn:hover { background: #ff5722; color: #fff; }
.tpl-card__btn--danger:hover { background: #e63946; }

.tpl-card__badge {
  font-size: 10px; font-weight: 700; padding: 4px 8px;
  background: #ffb800; color: #fff; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .5px;
}

/* ===== Empty states ===== */
.empty-state {
  text-align: center; padding: 40px 20px; color: #999;
}
.empty-state i { font-size: 38px; color: #ddd; margin-bottom: 12px; }
.empty-state h3 { color: #444; margin: 0 0 6px; font-size: 16px; }
.empty-state p { margin: 4px 0; font-size: 13px; }
.empty-state--small { padding: 20px 10px; }
.empty-state--small i { font-size: 24px; }

/* ===== Modal large ===== */
.modal--large .modal__content--large {
  max-width: 560px; width: calc(100% - 32px);
  max-height: 90vh; display: flex; flex-direction: column;
  padding: 0;
}
.modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; border-bottom: 1px solid #eee;
}
.modal__head .modal__title { margin: 0; font-size: 18px; }
.modal__close {
  background: none; border: none; font-size: 20px; cursor: pointer; color: #666;
  width: 32px; height: 32px; border-radius: 8px;
  position: relative; z-index: 10;
}
.modal__close:hover { background: #f5f5f5; color: #222; }
.modal__body {
  padding: 18px 20px; overflow-y: auto; flex: 1;
}
.modal__footer {
  padding: 14px 20px; border-top: 1px solid #eee;
}

/* ===== Editor de template ===== */
.field-label {
  display: block; font-size: 12px; font-weight: 700;
  color: #666; text-transform: uppercase; letter-spacing: .5px;
  margin: 14px 0 6px;
}
.field-label--row {
  display: flex; justify-content: space-between; align-items: center;
}
.field-input {
  width: 100%; padding: 12px 14px;
  border: 1px solid #ddd; border-radius: 10px;
  font-size: 14px; font-family: inherit;
  background: #fafafa; transition: border-color .15s ease;
}
.field-input:focus {
  outline: none; border-color: #ff5722; background: #fff;
}

.editor-exos { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.editor-exo {
  display: flex; flex-direction: column; gap: 0;
  background: #fafafa; border: 1px solid #eee; border-radius: 12px;
  overflow: hidden;
}
.editor-exo__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.editor-exo__icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff; font-size: 14px; flex-shrink: 0;
}
.editor-exo__info { flex: 1; min-width: 0; }
.editor-exo__name { font-weight: 600; font-size: 14px; color: #222; }
.editor-exo__meta { font-size: 11px; color: #888; }

.editor-exo__move {
  display: flex; flex-direction: column; gap: 2px;
}
.editor-exo__move button {
  width: 26px; height: 18px;
  background: #f5f5f5; border: none; color: #555;
  cursor: pointer; border-radius: 4px;
  display: grid; place-items: center; font-size: 10px;
}
.editor-exo__move button:disabled { opacity: .3; cursor: not-allowed; }
.editor-exo__move button:hover:not(:disabled) { background: #ff5722; color: #fff; }

.editor-exo__remove {
  width: 32px; height: 32px; border-radius: 8px;
  background: #fff5f5; color: #e63946; border: none;
  cursor: pointer; display: grid; place-items: center;
  font-size: 14px;
}
.editor-exo__remove:hover { background: #e63946; color: #fff; }

.editor-exo__params {
  display: flex; gap: 12px;
  padding: 10px 12px;
  /* v0.14.5 : on a maintenant 2 ou 3 colonnes (Series / Reps / Poids ou
     Series / Duree). Sur petit ecran le 3-col devient trop serre, on
     autorise le wrap. */
  flex-wrap: wrap;
}
.editor-exo__param {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  min-width: 90px;
}
.editor-exo__param > label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: #999;
}
.editor-exo__param > label > i {
  margin-right: 3px;
  color: var(--flame, #ff5722);
}
.editor-exo__sets {
  display: flex; align-items: center; gap: 6px;
  background: #fff; padding: 4px; border-radius: 8px; border: 1px solid #eee;
  width: fit-content;
}
.editor-exo__set-btn {
  width: 28px; height: 28px; border-radius: 6px;
  background: #f5f5f5; border: none; color: #555;
  font-weight: 700; font-size: 16px; cursor: pointer;
}
.editor-exo__set-btn:hover { background: #ff5722; color: #fff; }
.editor-exo__sets-value { font-weight: 700; min-width: 24px; text-align: center; }
.editor-exo__weight {
  width: 100%; padding: 6px 10px;
  border: 1px solid #eee; border-radius: 8px;
  background: #fff; font-size: 14px; font-weight: 600;
  font-family: inherit;
}
.editor-exo__weight:focus {
  outline: none; border-color: #ff5722;
}

/* v0.14.5 : badge "ISO" pour signaler un exo mesure en secondes
   (planche, front lever, L-sit...). Petit pill discret a cote du nom. */
.editor-exo__badge-iso {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(135deg, #ff5722, #e63946);
  border-radius: 999px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* ===== Catalog picker (refonte v0.8b) ===== */
.catalog-filters {
  display: flex; flex-direction: column; gap: 10px;
  margin: 14px 0;
  padding: 12px;
  background: #fafafa; border-radius: 10px;
}
.catalog-filter-group {
  display: flex; flex-direction: column; gap: 6px;
}
.catalog-filter-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: #888;
}
.catalog-filter-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.chip {
  padding: 6px 12px;
  background: #fff; color: #555;
  border: 1px solid #ddd; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .12s ease;
  font-family: inherit;
}
.chip:hover { border-color: #ff5722; color: #ff5722; }
.chip--active {
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff;
  border-color: transparent;
}
.chip--active:hover { color: #fff; }

.catalog-section {
  margin: 14px 0 6px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: #ff5722;
}
.catalog-results { max-height: 50vh; overflow-y: auto; }
.catalog-flat-list {
  display: flex; flex-direction: column; gap: 4px;
}
.catalog-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; width: 100%;
  background: #fff; border: 1px solid #eee; border-radius: 10px;
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: all .12s ease;
}
.catalog-row:hover {
  border-color: #ff5722;
  background: #fff5f0;
  transform: translateX(2px);
}
.catalog-row__icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff; flex-shrink: 0;
}
.catalog-row__info { flex: 1; min-width: 0; }
.catalog-row__name { font-weight: 600; font-size: 14px; color: #222; }
.catalog-row__meta { font-size: 11px; color: #888; }
.catalog-row__add {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: #e8f8ef;
  color: #2ecc71;
  font-size: 14px;
  flex-shrink: 0;
  border: 2px solid #d0f0dc;
  transition: all .15s ease;
}
.catalog-row:hover .catalog-row__add {
  background: #2ecc71;
  color: #fff;
  border-color: #2ecc71;
  transform: scale(1.08);
}

/* v0.14.1 : etat "deja ajoute a la seance en cours d'edition".
   La coche reste cochee en orange (couleur du theme) tant que l'utilisateur
   n'a pas valide l'enregistrement de la seance. Affordance : "c'est dedans". */
.catalog-row--selected {
  background: #fff5f0;
  border-color: #ffd0bf;
}
.catalog-row--selected .catalog-row__add {
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(255, 87, 34, 0.35);
  transform: scale(1.05);
}
.catalog-row--selected:hover {
  border-color: #ff5722;
}
.catalog-row--selected:hover .catalog-row__add {
  /* On garde le style orange "selectionne" au hover, pas le vert d'ajout */
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff;
  border-color: transparent;
  transform: scale(1.12);
}

/* On garde l'ancienne grid au cas ou, mais le picker utilise plus que .catalog-row */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

/* ===== Day picker (planifier) ===== */
.day-picker-title { text-transform: capitalize; }
.day-picker-date {
  font-size: 16px; font-weight: 700; color: #ff5722;
  text-align: center; padding: 12px;
  background: #fff5f0; border-radius: 10px; margin-bottom: 16px;
  text-transform: capitalize;
}
.day-picker-list { display: flex; flex-direction: column; gap: 8px; }
.day-picker-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: #fafafa; border: 1px solid #eee;
  border-radius: 12px; cursor: pointer; text-align: left;
  font-family: inherit; width: 100%;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.day-picker-item:hover {
  background: #fff5f0; border-color: #ff5722; transform: translateX(2px);
}
.day-picker-item > i {
  font-size: 18px; color: #ff5722;
}
.day-picker-item__info { flex: 1; min-width: 0; }
.day-picker-item__name {
  font-weight: 700; color: #222;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.day-picker-item__meta { font-size: 12px; color: #888; }
.day-picker-item__count {
  font-size: 12px; font-weight: 600; color: #999; flex-shrink: 0;
}
.day-picker-item__chev { font-size: 12px; color: #ccc; flex-shrink: 0; }

/* ===== Show class universelle pour modals ===== */
.modal.show { display: flex; }

/* ===== Sidebar : ajustements pour 5 entrees ===== */
@media (min-width: 900px) {
  .nav__items { gap: 4px; }
  .nav__item { padding: 10px 14px; }
}

/* ===== Tab bar mobile : 5 onglets ===== */
@media (max-width: 899px) {
  .nav__items { display: flex; }
  .nav__item {
    flex: 1; padding: 8px 4px;
    font-size: 10px;
  }
  .nav__item i { font-size: 16px; }
  .nav__item span { font-size: 9px; }
}

/* ===== Color picker dans l'editeur de template (v0.20) ===== */
.tpl-color-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
/* input color natif gardé caché : sert de modèle + roue chromatique système */
.tpl-color-native {
  position: absolute;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
  border: 0; padding: 0;
}

/* Carré multicolore (ouvre le sélecteur perso) */
.tpl-color-trigger {
  width: 52px; height: 52px;
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 3px;
  cursor: pointer;
  flex-shrink: 0;
  background: conic-gradient(from 0deg,
    #ff5722, #ffb800, #2ecc71, #1abc9c, #3498db, #9b59b6, #e63946, #ff5722);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.12);
  transition: transform .12s ease;
}
.tpl-color-trigger:hover { transform: scale(1.05); }
.tpl-color-trigger__current {
  display: block; width: 100%; height: 100%;
  border-radius: 9px;
  border: 2px solid #fff;
  background: #ff5722;
}

.tpl-color-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.tpl-color-preset {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease, border-color .12s ease;
}
.tpl-color-preset:hover { transform: scale(1.1); border-color: rgba(0,0,0,.2); }
.tpl-color-preset--active { border-color: #222; transform: scale(1.1); }

/* Popover de couleur perso */
.tpl-color-popover {
  background: var(--bg-elevated, #fafafc);
  border: 1px solid var(--border, #d9d9e0);
  border-radius: 14px;
  padding: 14px;
  margin: 4px 0 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.tpl-color-popover[hidden] { display: none; }
.tpl-color-popover__row { display: flex; align-items: center; gap: 10px; }
.tpl-color-popover__preview {
  width: 38px; height: 38px; border-radius: 10px;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  background: #ff5722; flex-shrink: 0;
}
.tpl-color-popover__hexwrap {
  flex: 1; display: flex; align-items: center;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, #d9d9e0);
  border-radius: 10px; padding: 0 10px;
}
.tpl-color-popover__hash { font-family: monospace; font-weight: 800; color: var(--text-tertiary, #8888a0); }
.tpl-color-popover__hex {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: monospace; font-size: 15px; font-weight: 700;
  text-transform: lowercase; padding: 10px 6px; color: var(--text-primary, #0a0a0f);
  letter-spacing: 1px;
}
.tpl-color-popover__wheel {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--border, #d9d9e0);
  border-radius: 10px; background: var(--bg-surface, #fff);
  color: var(--flame, #ff5722); cursor: pointer; font-size: 15px;
}
.tpl-color-popover__wheel:hover { background: var(--bg-surface-2, #ebebef); }
.tpl-color-popover__label {
  display: block; margin: 14px 0 6px;
  font-size: 12px; font-weight: 700; color: var(--text-secondary, #55556a);
}

/* Curseur de teinte (le "dégradé") */
.tpl-color-hue {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 16px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(90deg,
    hsl(0,80%,52%), hsl(60,80%,52%), hsl(120,80%,52%), hsl(180,80%,52%),
    hsl(240,80%,52%), hsl(300,80%,52%), hsl(360,80%,52%));
}
.tpl-color-hue::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid rgba(0,0,0,.25);
  box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: pointer;
}
.tpl-color-hue::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid rgba(0,0,0,.25);
  box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: pointer;
}

/* ===== Cartes de templates avec couleur perso ===== */
.tpl-card__icon {
  background: var(--tpl-color, linear-gradient(135deg, #ff5722, #e63946));
}

/* ===== Bandeau seance custom (couleur dynamique via CSS var) ===== */
.session-banner--custom {
  background: var(--banner-color, linear-gradient(135deg, #ff5722, #e63946));
  color: #fff;
}

/* ===== Cases du calendrier avec couleur du template ===== */
.calendar__day--tpl {
  background: var(--day-color, linear-gradient(135deg, #ff5722, #e63946));
  color: #fff;
}

/* ===== Bouton de l'exo en mode Auto : icone teintee selon le template ===== */
.auto-card__icon--tpl {
  background: var(--auto-color, linear-gradient(135deg, #ff5722, #e63946));
}

/* ===== Suppression definitive du selecteur PPL (v0.10) ===== */
.session-selector { display: none !important; }

/* Pastille de couleur dans le day picker */
.day-picker-item__color {
  width: 14px; height: 32px; border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ===== Choix d'objectif dans l'editeur (v0.11) ===== */
.objective-choice {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 6px;
}
.objective-choice__btn {
  padding: 8px 14px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: #555;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s ease;
}
.objective-choice__btn:hover {
  border-color: #ff5722;
  color: #ff5722;
}
.objective-choice__btn--active {
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff;
  border-color: transparent;
}
.objective-choice__btn--active:hover { color: #fff; }

/* v0.25 (F3) : boutons "temps de recuperation" (memes visuels que l'objectif,
   classe distincte pour ne pas entrer en collision avec le binding objectif). */
.tpl-rest-btn {
  padding: 8px 14px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: #555;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s ease;
}
.tpl-rest-btn:hover { border-color: #ff5722; color: #ff5722; }
.tpl-rest-btn--active {
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff;
  border-color: transparent;
}
.tpl-rest-btn--active:hover { color: #fff; }

/* ===== Section "Mes niveaux" du profil (v0.11) ===== */
.levels-card {
  display: flex; flex-direction: column; gap: 8px;
}
.level-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  transition: box-shadow .15s ease;
}
.level-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.level-row__main { flex: 1; min-width: 0; }
.level-row__name {
  font-weight: 700; color: #222; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}
.level-row__name i { color: #ff5722; font-size: 13px; }
.level-row__meta { font-size: 11px; color: #888; margin-top: 2px; }
.level-row__badge {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: #fff;
  text-transform: uppercase; letter-spacing: .5px;
}
.level-row__edit {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: #f5f5f5;
  color: #555;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 12px;
}
.level-row__edit:hover { background: #ff5722; color: #fff; }

/* ===== Ajout / suppression d'exercice (v0.24) ===== */
.levels-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 24px 0 12px;
}
.levels-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: none; border-radius: 999px;
  background: #ff5722; color: #fff;
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; white-space: nowrap;
}
.levels-add-btn:hover { background: #e64a19; }
.level-row__del {
  width: 32px; height: 32px;
  border-radius: 8px; border: none;
  background: #f5f5f5; color: #c0392b;
  cursor: pointer; display: grid; place-items: center; font-size: 12px;
}
.level-row__del:hover { background: #e74c3c; color: #fff; }

.level-add-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 52vh; overflow-y: auto;
}
.level-add-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 11px 12px;
  border: 1px solid #eee; border-radius: 10px;
  background: #fff; cursor: pointer; font-family: inherit;
}
.level-add-item:hover { border-color: #ff5722; background: #fff7f4; }
.level-add-item i { color: #ff5722; font-size: 13px; width: 16px; text-align: center; }
.level-add-item__name { font-weight: 700; color: #222; font-size: 14px; flex: 1; min-width: 0; }
.level-add-item__muscle { font-size: 11px; color: #888; white-space: nowrap; }

/* ===== Aperçu exercice (GIF) v0.24 ===== */
.catalog-row__preview {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: #888; background: #f2f2f2;
  font-size: 13px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.catalog-row__preview:hover { background: #ff5722; color: #fff; }

#exoPreviewModal { z-index: 1600; }
.exo-preview { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.exo-preview__imgwrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 340px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 16px;
  display: grid; place-items: center;
  overflow: hidden;
}
.exo-preview__img { width: 100%; height: 100%; object-fit: contain; }
.exo-preview__icon { color: #ff5722; font-size: 48px; }
.exo-preview__meta { font-size: 13px; color: #888; font-weight: 600; }
.exo-preview__noimg { font-size: 12px; color: #aaa; }

/* ===== Choix de niveau (modal override) ===== */
.level-choice {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.level-choice__btn {
  padding: 14px; border: 2px solid #eee; border-radius: 12px;
  background: #fafafa;
  font-family: inherit; font-weight: 700; font-size: 14px;
  color: #444;
  cursor: pointer;
  transition: all .12s ease;
}
.level-choice__btn:hover { border-color: #ff5722; color: #ff5722; }
.level-choice__btn--active {
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff;
  border-color: transparent;
}
.level-choice__btn--active:hover { color: #fff; }

/* ===== Boite "Niveau supérieur" dans la modale fin de séance ===== */
.level-up-box {
  margin-top: 20px;
  padding: 14px;
  background: linear-gradient(135deg, #fff5f0, #ffe0d0);
  border-radius: 14px;
  border: 2px dashed #ff5722;
  text-align: center;
}
.level-up-box__title {
  font-weight: 800; color: #ff5722;
  font-size: 15px;
  margin-bottom: 8px;
}
.level-up-box__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px;
  font-size: 13px;
  color: #444;
}
.level-up-box__row strong { color: #222; }

/* ============================================================================
   SEANCE REALISEE (saisie / edition depuis le calendrier)
============================================================================ */

/* --- Section "Séance réalisée" dans le day picker --- */
.day-picker-divider {
  height: 1px;
  background: #eee;
  margin: 16px 0;
}
.day-picker-done { display: flex; flex-direction: column; gap: 8px; }

.day-done-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 12px 14px;
  border: 1px solid #eee; border-radius: 12px;
  background: #fafafa; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.day-done-item:hover { border-color: #ffb59a; background: #fff7f4; }
.day-done-item__info { flex: 1; min-width: 0; }
.day-done-item__name { font-weight: 700; color: #222; }
.day-done-item__meta { font-size: 12px; color: #888; }
.day-done-item > i { color: #ff5722; }

/* Bouton compact "Séance réalisée" : soft, sans gros cadre en pointilles. */
.day-done-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 14px;
  border: none; border-radius: 12px;
  background: #fff5f0; color: #ff5722; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: background .15s ease;
}
.day-done-add:hover { background: #ffe7db; }

/* --- Editeur de séance passée --- */
/* Au-dessous du catalog picker (z-index 1500) pour qu'il s'empile dessus. */
#pastSessionModal { z-index: 1480; }

.past-type-row { display: flex; gap: 8px; flex-wrap: wrap; }
.past-type-btn {
  flex: 1; min-width: 64px;
  padding: 10px 6px; border-radius: 10px;
  border: 1.5px solid #ddd; background: #fafafa;
  font-weight: 700; font-size: 13px; color: #555; cursor: pointer;
  transition: all .15s ease;
}
.past-type-btn--active {
  border-color: #ff5722; color: #fff;
  background: linear-gradient(135deg, #ff5722, #e63946);
}

.past-exos { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.past-empty {
  text-align: center; color: #999; padding: 18px 8px;
  border: 1px dashed #e0e0e0; border-radius: 12px;
}
.past-empty i { font-size: 22px; margin-bottom: 6px; color: #ccc; }
.past-empty p { font-size: 13px; margin: 0; }

.past-exo {
  background: #fafafa; border: 1px solid #eee; border-radius: 12px;
  padding: 12px; overflow: hidden;
}
.past-exo__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.past-exo__icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255, 87, 34, 0.1); color: #ff5722;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.past-exo__name {
  font-weight: 700; font-size: 14px; color: #222; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.past-exo__remove {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: #f0f0f0; color: #999; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.past-exo__remove:hover { background: #ffe5e0; color: #e63946; }

.past-exo__sets { display: flex; flex-direction: column; }

/* Lignes de séries : N° / Reps / Poids / supprimer (3 col si isométrique) */
.past-set {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 32px;
  gap: 8px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid #f0f0f0;
}
.past-set--iso { grid-template-columns: 32px 1fr 32px; }
.past-set:last-of-type { border-bottom: none; }
.past-set--header { border-bottom: none; padding: 4px 0 2px; }
.past-set__h {
  font-size: 10px; color: #999; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; text-align: center;
}

/* Pied de l'éditeur : supprimer + enregistrer côte à côte */
.past-session-footer { display: flex; gap: 10px; align-items: center; }
.past-session-footer .danger-btn { flex: 0 0 auto; }
.past-session-footer .primary-btn { flex: 1; }


/* v0.17.1 : bouton "Demarrer" sur les cartes de Mes seances */
.tpl-card__btn--play {
  background: linear-gradient(135deg, #ff5722, #e63946);
  color: #fff;
  border-color: transparent;
}
.tpl-card__btn--play:hover { opacity: .9; }

/* =============================================================================
   v0.43 - SÉLECTEUR D'EXERCICES : refonte
   -----------------------------------------------------------------------------
   Avant : deux blocs de chips sur plusieurs lignes (~350 px), puis des lignes
   d'exercices portant chacune leur muscle et leur matériel en sous-titre.
   La modale montrait deux exercices et demi.

   Après : deux rangées d'UNE ligne, défilables horizontalement, et des lignes
   réduites au nom. Le reste passe derrière un bouton « i ».
   Choix assumé : pas de bouton « Filtres » repliable. Il aurait rendu l'état
   des filtres invisible — on ne saurait plus qu'un filtre est actif sans
   ouvrir le panneau, ce qui est la première cause de « je ne trouve plus mes
   exercices ».
   ============================================================================= */
.catalog-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  background: transparent;
  border: none;
}
.catalog-scroller {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.catalog-scroller::-webkit-scrollbar { display: none; }
.catalog-scroller .chip { flex: 0 0 auto; white-space: nowrap; }
.chip--sm { font-size: 12px; padding: 5px 11px; }

/* Ligne d'exercice : le nom prend toute la place disponible. */
.catalog-row__info { flex: 1; min-width: 0; }
.catalog-row__name { white-space: normal; }
.catalog-row__info-btn {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--bg-elevated, #f4f4f7);
  color: var(--text-tertiary, #85858f);
  font-size: 12px;
  cursor: pointer;
}
.catalog-row__info-btn:hover { background: var(--bg-flame-soft, #fff3ee); color: var(--flame, #ff5722); }