/* ============================================================
   DESIGN SYSTEM — Tactile Luxury Sombre HighContrast (v3)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Playfair+Display:wght@800&family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700;900&display=swap');

/* Évite le flash du template brut ({{ ... }} non interprété) le temps que Vue
   compile et monte l'application (visible surtout sur connexions/CPU lentes,
   ex: juste après le retour du popup Google). */
[v-cloak] { display: none !important; }

:root {
  /* Couleurs */
  --bg-app: #121316;
  --surface-card: #21242C;
  --surface-card-light: #F5F0EB;
  --text-primary: #F8FAFC;
  --text-secondary: #A0AEC0;
  --text-on-light: #1A1817;
  --text-secondary-on-light: #6B6560;
  --accent-gold: #E2B842;
  --accent-clay: #FF9E79;
  --accent-sage: #88B0A8;
  --danger: #E5484D;

  /* Contours / fonds discrets, adaptés automatiquement selon la carte (voir .card-light) */
  --border-card: rgba(226, 184, 66, 0.35);
  --border-hairline: rgba(248, 250, 252, 0.1);
  --surface-muted: rgba(248, 250, 252, 0.06);

  /* Rayons */
  --radius-button: 28px;
  --radius-card: 20px;

  /* Largeur de contenu partagée par les cartes principales et popups, pour que
     toutes les "colonnes" s'alignent sur la même largeur. Plafond choisi pour
     rester confortable sur le contenu le plus large de l'app (la carte
     "Ressenti sur 28 jours", qui affiche un graphique + une jauge côte à côte)
     tout en évitant un étirement excessif sur tablette/desktop. En dessous de
     ce plafond (mobile), les cartes utilisent déjà toute la largeur dispo via
     width:100%, donc rien ne change sur téléphone. */
  --content-max-width: 500px;

  /* Typographies */
  --font-hero: 'Instrument Serif', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-impact: 'Outfit', 'Trebuchet MS', sans-serif;

  /* Indique au navigateur que la page est sombre par défaut, pour que les
     contrôles natifs (menus déroulants de <select>...) restent lisibles */
  color-scheme: dark;
}

/* Carte "séance active" : surface claire à très fort contraste. */
.card-light {
  --surface-card: var(--surface-card-light);
  --text-primary: var(--text-on-light);
  --text-secondary: var(--text-secondary-on-light);
  --border-card: rgba(26, 24, 23, 0.12);
  --border-hairline: rgba(26, 24, 23, 0.1);
  --surface-muted: rgba(26, 24, 23, 0.05);
  color-scheme: light;
}

/* Les options d'un <select> ignorent souvent les styles du parent : on force
   explicitement leurs couleurs pour éviter le texte blanc sur fond blanc */
select option {
  background: var(--surface-card);
  color: var(--text-primary);
}

/* Curseurs (Hooper, RPE...) : remplissage visuel immédiat via un dégradé
   calculé en JS et posé en style inline, requiert de neutraliser le style
   natif du navigateur pour que le dégradé serve de fond de piste. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  background: var(--surface-muted);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-clay);
  border: 2px solid var(--bg-app);
  cursor: pointer;
  margin-top: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-clay);
  border: 2px solid var(--bg-app);
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 4px;
  background: transparent;
}

/* Reset et mise en page globale */
body {
  font-family: var(--font-ui);
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-app);
  color: var(--text-primary);
}

/* #app est un flex-item de body avec align-items:center, donc sans largeur
   explicite il se redimensionne selon le contenu actuellement monté (ex: le
   formulaire de connexion, plus étroit) au lieu de toujours occuper la même
   largeur disponible — ce qui rétrécissait certaines cartes malgré leur
   max-width identique. */
#app {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Certaines vues regroupent plusieurs cartes empilées (dashboard, séance en
   cours) dans un <div v-if="..."> purement logique, sans intention visuelle
   propre. Sans "display:contents", cette boîte se comportait comme un item
   flex sans largeur explicite et se dimensionnait selon son contenu le plus
   large (ex: la grille des 7 jours) au lieu de rester neutre — ce qui rendait
   ses cartes plus larges que celles des vues à une seule carte (qui n'ont pas
   ce wrapper). display:contents fait disparaître la boîte du rendu : ses
   enfants (les .auth-card) redeviennent directement des items flex de #app,
   et se limitent donc correctement à --content-max-width comme les autres. */
.vue-groupe {
  display: contents;
}

/* 1. Header centré (Logo + Titre sur la même ligne) */
.header-container {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 25px;
  width: 100%;
  color: var(--text-primary);
}

.header-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.header-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.header-brand:active {
  opacity: 0.7;
}

.install-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto 16px;
  padding: 10px 12px;
  background: var(--surface-card);
  border: 0.8px solid var(--border-card);
  border-radius: 14px;
  box-sizing: border-box;
}

.install-banner-text {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.4;
  text-align: left;
}

.install-banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.header-title {
  margin: 0 !important;
  font-family: 'Playfair Display', var(--font-hero);
  font-style: normal;
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--text-primary);
}

/* Carte principale, utilisée pour quasiment tous les écrans.
   Sombre "Charbon Profond" par défaut ; devient claire "Crème Argile"
   quand combinée à .card-light (utilisé pour l'écran de séance active). */
.auth-card {
  background: var(--surface-card);
  color: var(--text-primary);
  padding: 25px;
  border-radius: var(--radius-card);
  border: 0.8px solid var(--border-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 1px 1px 1px rgba(255, 255, 255, 0.08);
  width: 100%;
  max-width: var(--content-max-width);
  box-sizing: border-box;
  text-align: center;
}

.auth-title {
  font-family: var(--font-hero);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input-field {
  width: 100%;
  padding: 12px;
  background: var(--surface-muted);
  color: var(--text-primary);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: 14px;
}

.input-field::placeholder {
  color: var(--text-secondary);
}

/* 2. Bouton CTA principal — "Terre Cuite Lumineuse" */
.btn-submit {
  width: 100%;
  min-height: 56px;
  padding: 12px;
  background-color: var(--accent-clay);
  color: #121316;
  border: none;
  border-radius: var(--radius-button);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-top: 5px;
  transition: transform 0.1s ease, filter 0.1s ease;
}

.btn-submit:active {
  transform: scale(0.96);
  filter: brightness(0.94);
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

/* 3. Les 2 boutons secondaires en dessous */
.secondary-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
}

.btn-secondary {
  flex: 1;
  min-height: 44px;
  padding: 8px 5px;
  background-color: transparent;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-button);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  color: var(--text-primary);
  transition: transform 0.1s ease;
}

.btn-secondary:active {
  transform: scale(0.96);
}

.separator {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid var(--border-hairline);
}

/* Bouton Google */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 10px;
  background-color: var(--surface-muted);
  color: var(--text-primary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-button);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  gap: 10px;
}

.google-icon {
  width: 18px;
  height: 18px;
}

/* Bouton hamburger dans le header */
.menu-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-primary);
  padding: 4px 8px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Panneau latéral (menu rétractable) */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}

.menu-panel {
  background: var(--surface-card);
  color: var(--text-primary);
  width: 78%;
  max-width: 300px;
  height: 100%;
  box-shadow: -2px 0 24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
  animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-hairline);
}

.menu-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-secondary);
}

.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 12px 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 10px;
}

.menu-item.active {
  background: rgba(226, 184, 66, 0.15);
  color: var(--accent-gold);
  font-weight: 600;
}

/* Petits boutons qui ne doivent JAMAIS s'étirer (contrairement à .btn-secondary) */
.icon-btn {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--surface-muted);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s ease;
}

.icon-btn:active {
  transform: scale(0.9);
}

.btn-small {
  flex: none;
  min-height: 32px;
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  background: var(--surface-muted);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-button);
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: transform 0.1s ease;
}

.btn-small:active {
  transform: scale(0.96);
}

/* Popup "fiche bibliothèque" d'un exercice, gestion matériel, etc. */
.popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.popup-card {
  background: var(--surface-card);
  color: var(--text-primary);
  border-radius: var(--radius-card);
  border: 0.8px solid var(--border-card);
  width: 100%;
  max-width: 440px; /* les popups restent des fenêtres compactes, contrairement aux cartes de page */
  max-height: 85vh;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  text-align: left;
}

.popup-title {
  font-family: var(--font-hero);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
}

.popup-row {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.popup-exo-image {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

#popup-svg-muscles svg {
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
}

.exo-clickable {
  cursor: pointer;
  border-radius: 8px;
}
.exo-clickable:active {
  background: var(--surface-muted);
}

/* Visuel des 7 jours sur le dashboard */
.semaine-jour {
  flex: 1;
  text-align: center;
}
.semaine-jour-label {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.semaine-jour-date {
  font-family: var(--font-impact);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.semaine-barre {
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
}
.semaine-barre.jour-blanc { background: var(--surface-muted); }
.semaine-barre.jour-bleu { background: var(--accent-sage); border-color: var(--accent-sage); }
.semaine-barre.jour-violet { background: var(--accent-gold); border-color: var(--accent-gold); }
.semaine-barre.jour-gris { background: transparent; border-color: var(--border-hairline); }
.semaine-barre.aujourdhui { box-shadow: 0 0 0 2px var(--accent-clay); }
.semaine-emoji {
  font-size: 13px;
  margin-top: 4px;
  min-height: 16px;
}

/* Chiffres à fort impact (chrono, séries, BPM...) */
.chiffre-impact {
  font-family: var(--font-impact);
  font-weight: 700;
  color: var(--accent-clay);
}

/* ============================================================
   CLASSES UTILITAIRES
   Remplacent les styles en ligne dispersés dans le HTML.
   ============================================================ */

/* Texte */
.text-muted { color: var(--text-secondary); }
.text-danger { color: var(--danger); }
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-sm2 { font-size: 13px; }
.text-md { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-bold { font-weight: 600; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; }
.line-height-loose { line-height: 1.5; }
.line-height-2 { line-height: 2; }

.eyebrow-label {
  font-weight: 700;
  font-size: 11px;
  color: var(--accent-gold);
  text-transform: uppercase;
  text-align: left;
}

.section-label {
  font-weight: 600;
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Layout flex */
.d-flex { display: flex; }
.row { display: flex; align-items: center; }
.row-top { display: flex; align-items: flex-start; }
.row-1 { flex: 1; }
.row-gap-2 { gap: 2px; }
.row-gap-3 { gap: 3px; }
.row-gap-4 { gap: 4px; }
.row-gap-6 { gap: 6px; }
.row-gap-8 { gap: 8px; }
.row-between { justify-content: space-between; }
.row-wrap { flex-wrap: wrap; }
/* Barre d'onglets admin : toujours 4 colonnes égales, même sur une ligne
   incomplète (évite que 2 boutons restants s'étirent sur toute la largeur) */
.admin-tabs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.admin-tabs-grid button { width: 100%; }
.shrink-0 { flex-shrink: 0; }
.grow-none { flex: none; }
.min-w-0 { min-width: 0; }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }
.inline-block { display: inline-block; }
.text-gold { color: var(--accent-gold); }
.m-0 { margin: 0; }

/* Échelle d'espacements */
.mt-2 { margin-top: 2px; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-neg6 { margin-top: -6px; }
.mt-neg8 { margin-top: -8px; }
.mb-2 { margin-bottom: 2px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mv-12 { margin: 12px 0; }
.mv-14 { margin: 14px 0; }

/* Composants récurrents (motifs répétés partout dans l'app) */
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-hairline);
  gap: 6px;
}

.suggestion-list {
  text-align: left;
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  margin-top: 4px;
  overflow: hidden;
}

.suggestion-item {
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 13px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-muted);
  padding: 3px 8px;
  border-radius: 10px;
}

.field-narrow-70 { width: 70px; flex: none; padding: 6px; }
.field-narrow-60 { width: 60px; flex: none; padding: 6px; }
.icon-inline { width: 22px; height: 22px; font-size: 11px; }

.muted-panel {
  padding: 10px;
  background: var(--surface-muted);
  border-radius: 6px;
  text-align: left;
}

.row-divider {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-hairline);
}

.exo-block {
  text-align: left;
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
}

/* Bannières d'alerte (couleurs volontairement fixes, indépendantes du thème) */
.banner-warning {
  background: #fff3cd;
  color: #856404;
  font-size: 12px;
  text-align: center;
  padding: 6px;
  margin-bottom: 10px;
  border-radius: 6px;
}

.banner-success {
  background: #eafaf0;
  color: #1e7e34;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
}

/* États dynamiques (liés à :class plutôt qu'à :style dans le HTML) */
.non-fait { opacity: 0.45; }
.groupe-bloc {
  background: rgba(226, 184, 66, 0.08);
  border-left: 2px solid var(--accent-gold);
  border-right: 2px solid var(--accent-gold);
  border-top: none;
  border-bottom: none;
  border-radius: 0;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
}
.groupe-bloc.groupe-debut {
  border-top: 2px solid var(--accent-gold);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-top: 10px;
  margin-top: 10px;
}
.groupe-bloc.groupe-fin {
  border-bottom: 2px solid var(--accent-gold);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.item-selectionne { background: rgba(226, 184, 66, 0.15); font-weight: 600; }

/* Carte "Ressenti sur 28 jours" : chart à gauche, jauge à droite */
.ressenti-ligne {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ressenti-bloc-chart {
  flex: 1.3;
  min-width: 0;
}
.chart-wrap {
  position: relative;
  width: 100%;
  height: 190px; /* aligné sur la hauteur des jauges (SVG 140px + libellé + légende/texte) */
}
.chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.ressenti-bloc-gauge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ressenti-legende {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  font-size: 10px;
  color: var(--text-secondary);
}
.ressenti-legende span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ressenti-legende i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* En-tête "Séance en cours" : titre seul, puis les 3 rappels (Hooper / RPE / Tonnage) sur une ligne */
.rappel-seance-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  margin-bottom: 16px;
}
.rappel-seance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rappel-seance-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
}