/* ==========================================================
   PaceCoach – Garde le rythme. Concentre-toi sur le coaching.
   Application d’assistance sonore et visuelle pour coachs.
   ----------------------------------------------------------
   Couleurs principales :
   - Bleu profond : #0077C8
   - Turquoise clair : #30E3CA
   - Fond clair : #F8FAFC
   - Texte foncé : #1E293B
   - Orange doux (alerte) : #FF8C42
   Typographies :
   - Titre / Logo : Rubik, Bold
   - Texte UI : Nunito Sans / Inter
   ========================================================== */

/* ----- Imports typographiques (Google Fonts, fallback offline) ----- */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@700&family=Nunito+Sans:wght@400;600&display=swap');

/* ----- Reset et base ----- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: #F8FAFC;
  color: #1E293B;
  font-family: "Nunito Sans", "Inter", "Arial Rounded", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(180deg, #F8FAFC 0%, #EAF6FB 100%);
}

/* ----- En-têtes et pied de page ----- */
header, footer {
  text-align: center;
  padding: 1.2rem;
  background: #ffffffaa;
  backdrop-filter: blur(4px);
  border-bottom: 2px solid #E0E7EF;
}

footer {
  border-top: 2px solid #E0E7EF;
  margin-top: auto;
  font-size: 0.9em;
  color: #475569;
}

h1 {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  color: #0077C8;
  font-size: 2em;
  letter-spacing: 0.5px;
}

h2 {
  margin: 1.2rem 0 0.6rem;
  font-weight: 600;
  font-size: 1.3em;
  color: #1E293B;
}

/* ----- Liens et boutons ----- */
a, button {
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

button, a.button {
  display: inline-block;
  background: #0077C8;
  color: white;
  padding: 0.8rem 1.3rem;
  border: none;
  border-radius: 12px;
  font-size: 1.05em;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0, 119, 200, 0.2);
}

button:hover, a.button:hover {
  background: #005fa3;
  box-shadow: 0 6px 15px rgba(0, 119, 200, 0.35);
}

button:active {
  transform: scale(0.98);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.actions {
  text-align: center;
  margin: 2rem 0;
}

/* ----- Listes de presets ----- */
#presetList {
  list-style: none;
  margin: 0 auto;
  max-width: 400px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  overflow: hidden;
}

#presetList li {
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#presetList li:last-child {
  border-bottom: none;
}

#presetList li button {
  background: #30E3CA;
  color: #1E293B;
}

#presetList li button:hover {
  background: #24cbb4;
}

/* ----- Onglets de l’éditeur ----- */
.tabs {
  text-align: center;
  margin-bottom: 1rem;
}

.tab {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: #E2E8F0;
  color: #1E293B;
  border-radius: 12px 12px 0 0;
  margin: 0 0.3rem;
  cursor: pointer;
  font-weight: 600;
}

.tab.active {
  background: #0077C8;
  color: white;
}

.tab-content {
  background: white;
  border-radius: 0 12px 12px 12px;
  padding: 1rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  display: none;
}

.tab-content.active {
  display: block;
}

/* ----- Formulaires ----- */
form label {
  display: block;
  margin: 0.6rem 0;
  font-weight: 500;
}

form input[type="number"],
form input[type="text"] {
  width: 5.5rem;
  padding: 0.4rem;
  margin-left: 0.4rem;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  font-size: 1em;
}

#pacingSteps .pacing-step {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

/* ----- Écran Coach ----- */
.mode-coach {
  background: #F8FAFC;
}

#coachDisplay {
  text-align: center;
  padding: 2rem 1rem;
}


#phaseName {
  font-size: 1.8rem;
  font-weight: 600;
  color: #30E3CA;
  margin-top: 0.6rem;
}

.controls button {
  margin: 0.3rem;
  background: #0077C8;
}

.controls button#pauseBtn { background: #FF8C42; }
.controls button#resumeBtn { background: #30E3CA; color: #1E293B; }
.controls button#skipBtn { background: #0077C8; }
.controls button#minus5,
.controls button#plus5 { background: #E2E8F0; color: #1E293B; }

.links {
  margin-top: 2rem;
}

.links a {
  color: #0077C8;
  text-decoration: underline;
}

/* ----- Phases (fond dynamique) ----- */
body.phase-work {
  background: #0077C8;
  color: #fff;
  transition: background 0.5s ease;
}

body.phase-rest {
  background: #30E3CA;
  color: #1E293B;
  transition: background 0.5s ease;
}

body.phase-warning {
  background: #FF8C42;
  color: #fff;
  transition: background 0.3s ease;
}

/* ----- Mode Athlètes ----- */
.mode-athletes {
  background: #0077C8;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  text-align: center;
}

#bigTimer {
  font-family: "Rubik", sans-serif;
  font-size: 14vw;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

#bigPhase {
  font-size: 6vw;
  color: #30E3CA;
  margin-top: 1rem;
  font-weight: 600;
}

/* ----- Effets et animations ----- */
@keyframes phasePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.phase-warning #bigTimer {
  animation: phasePulse 1s infinite;
}

/* ----- Responsive ----- */
@media (max-width: 700px) {
  #timerDisplay {
    font-size: 4rem;
  }

  #bigTimer {
    font-size: 22vw;
  }

  #bigPhase {
    font-size: 10vw;
  }

  button {
    font-size: 0.9em;
    padding: 0.5rem 0.8rem;
  }
}
/* ===== Splash Overlay PaceCoach ===== */
#pc-splash {
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 120% at 80% 20%, #30E3CA 0%, #0077C8 50%, #0063a3 100%);
  display: grid;
  place-items: center;
  z-index: 9999;
  transition: opacity 600ms ease, visibility 600ms ease;
}
#pc-splash.hidden { opacity: 0; visibility: hidden; }

.pc-splash-inner {
  text-align: center;
  color: #F8FAFC;
  padding: 2rem;
}

.pc-logo {
  width: min(56vw, 220px);
  aspect-ratio: 1/1;
  margin: 0 auto 1rem;
  animation: pc-pop 800ms ease-out both;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.25));
}

.pc-title {
  font-family: "Rubik", "Arial Rounded", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 44px);
  letter-spacing: 0.3px;
  line-height: 1.1;
}
.pc-title .alt { color: #30E3CA; }

.pc-tagline {
  margin-top: .5rem;
  font-size: clamp(14px, 3.3vw, 18px);
  opacity: 0.9;
}

/* Progress bar douce */
.pc-progress {
  width: min(60vw, 420px);
  height: 6px;
  background: rgba(248, 250, 252, 0.25);
  border-radius: 999px;
  overflow: hidden;
  margin: 1.4rem auto 0;
}
.pc-progress > i {
  display: block;
  width: 40%;
  height: 100%;
  background: #30E3CA;
  border-radius: inherit;
  animation: pc-progress 1400ms ease-in-out infinite;
}

/* Keyframes */
@keyframes pc-pop {
  0% { transform: translateY(12px) scale(.94); opacity: 0; }
  60% { transform: translateY(0) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
@keyframes pc-progress {
  0% { transform: translateX(-60%); }
  50% { transform: translateX(30%); }
  100% { transform: translateX(120%); }
}
/* ====== Décompte central coach ====== */
#timerDisplay {
  font-family: "Rubik", "Arial Rounded", sans-serif;
  font-weight: 700;
  font-size: clamp(4rem, 15vw, 10rem);
  color: #2e6dad;             
  text-shadow: 0 0 20px rgba(0,0,0,0.35);
  transition: color 0.3s, background 0.3s;
}

/* Phase précompte / countdown : fond orange doux, texte foncé */
body.phase-countdown #timerDisplay {
  color: #1E293B;              /* gris anthracite */
  background: #FF8C42;         /* orange doux */
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  text-shadow: none;
}

/* Phase travail : fond bleu foncé, texte clair */
body.phase-work #timerDisplay {
  color: #F8FAFC;
  background: #0077C8;
  border-radius: 1rem;
}

/* Phase repos : fond turquoise clair */
body.phase-rest #timerDisplay {
  color: #1E293B;
  background: #30E3CA;
  border-radius: 1rem;
}

/* Phase fin : fond gris clair */
body.phase-end #timerDisplay {
  color: #1E293B;
  background: #F8FAFC;
  border-radius: 1rem;
}
#presetName {
  font-size: 1.1rem;
  padding: 0.4em 0.6em;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;
  max-width: 400px;
  margin-bottom: 1rem;
}
/* Chiffres tabulaires (alignement stable) */
#timerDisplay,
#bigTimer {
  font-variant-numeric: tabular-nums;
}
/* Chrono "depuis dernier passage" et meilleur tour */
.tile .since { font-variant-numeric: tabular-nums; }
.best {
  background: #30E3CA;
  color: #1E293B;
  padding: .05rem .35rem;
  border-radius: 6px;
}
/* Meilleur confort tactile/tablette */
.tile,
.pill,
.btn {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  user-select: none;
  touch-action: manipulation; /* évite le double-tap zoom */
  min-height: 44px; /* cible tactile recommandée */
}

/* évite les gestes multitouch indésirables sur les cartes */
.board { touch-action: pan-y; }

/* petit feedback quand on appuie */
.is-active {
  transform: scale(0.98);
  transition: transform 80ms ease;
}
.tile,.pill,.btn{ -webkit-tap-highlight-color:rgba(0,0,0,0); user-select:none; touch-action:manipulation; min-height:44px }
.is-active{ transform:scale(0.98); transition:transform 80ms ease }
.tile .since{ font-variant-numeric: tabular-nums; }
.best{ background:#30E3CA; color:#1E293B; padding:.05rem .35rem; border-radius:6px; }
/* Panneaux repliables (Roster / Groupes) */
.card.collapsed {
  padding-top: .6rem;
  padding-bottom: .4rem;
  overflow: hidden;
}
.card.collapsed .h,
.card.collapsed h3 {
  cursor: pointer;
  user-select: none;
  margin-bottom: .2rem;
}
.card.collapsed .row,
.card.collapsed textarea,
.card.collapsed input,
.card.collapsed #todayPick,
.card.collapsed #groupsList,
.card.collapsed p,
.card.collapsed .muted {
  display: none !important;
}

/* Popover membre (pour retirer du groupe) */
.member-pop .picker:hover { background:#e2e8f0; }
.member-pop { font-size:.95rem; }

/* Bouton mini dans titre de carte (changer représentant) */
.mini {
  font-size:.9rem;
  padding:.1rem .45rem;
  border:0;
  border-radius:8px;
  background:#e2e8f0;
  color:#1E293B;
  margin-left:.25rem;
  cursor:pointer;
}
.dual-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.dual-grid .timer { font-size: clamp(2.5rem, 7vw, 5rem); text-align:center; font-variant-numeric: tabular-nums; }
.dual-grid .panel { background:#F8FAFC; border-radius:12px; padding:1rem; }
.dual-grid h3 { margin:0 0 .5rem 0; color:#1E293B; }
/* Tabs génériques */
.tabs { display:flex; gap:.5rem; margin-bottom:.5rem; }
.tabs .tab { background:#e2e8f0; color:#1E293B; border:0; border-radius:10px; padding:.45rem .8rem; cursor:pointer; font-weight:700; }
.tabs .tab.active { background:#0077C8; color:#fff; }

.tabpanel { display:none; }
.tabpanel.active { display:block; }
/* Boutons PaceCoach – unifiés pour <a> et <button> */
button.btn, a.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .6rem 1rem;
  border-radius: 12px;
  border: 0;
  background: #0077C8;
  color: #fff;
  font-weight: 800;
  text-decoration: none;   /* pour <a> */
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
}
a.btn:link, a.btn:visited { color:#fff; text-decoration:none; }

button.btn:hover, a.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
button.btn:active, a.btn:active { transform: translateY(0); }

.btn.primary { background:#0077C8; color:#fff; }
.btn.alt { background:#30E3CA; color:#073b3a; }
.laps-info{
  margin-top: .25rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: #1E293B;
}
body.run .laps-info{ color:#1E293B; }
body.pacing .laps-info{ color:#0077C8; } /* bleu identitaire en pacing */