/* === Couleur dynamique par phase (haut) === */
body.active-sn1 { --sn-color: #66e8ff; }
body.active-sn2 { --sn-color: #fff700; }
body.active-sn3 { --sn-color: #ff9100; }
body.active-sn4 { --sn-color: #ff1900; }
body.active-sng { --sn-color: #b600fd; }

/* === Phases === */
#phases { margin: 1rem; }

.phase-box .avatar{ position:relative; font-size:3rem; z-index:1; }
.phase-box .avatar::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:2rem; height:2rem; border-radius:50%; z-index:-1; filter:blur(10px);
}
.phase-box.sn1 .avatar::before{ background:rgba(132,228,247,.83); }
.phase-box.sn2 .avatar::before{ background:rgba(255,242,0,.83); }
.phase-box.sn3 .avatar::before{ background:rgba(255,149,0,.85); }
.phase-box.sn4 .avatar::before{ background:rgba(255,25,0,.70); }
.phase-box.sng .avatar::before{ background:rgba(183,0,255,.80); }

.phase-title{
  font-size:1rem; font-weight:900; margin:.2rem 0 .5rem;
  text-transform:uppercase; letter-spacing:1px;
}

.phases-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem;
  text-align:center; margin:1rem 0;
}
.phase-box{
  background:#1a1a1a; border-radius:8px; padding:.5rem; color:#fff; font-size:.6rem;
  box-shadow:0 2px 5px rgba(0,0,0,.6); transition:.3s; display:flex; flex-direction:column; align-items:center;
}
.avatar{ font-size:2rem; margin-bottom:.3rem; transition:.3s; }
.avatar.sn1{ color:#fff; text-shadow:0 0 6px rgba(255,255,255,.5); }
.avatar.sn2{ color:#f1c40f; text-shadow:0 0 12px rgba(241,196,15,.9); }
.avatar.sn3{ color:#f39c12; text-shadow:0 0 14px rgba(243,156,18,.8); }
.avatar.sn4{ color:#e74c3c; text-shadow:0 0 16px rgba(231,76,60,.9); }
.avatar.sng{ color:#9b59b6; text-shadow:0 0 18px rgba(155,89,182,.9); }

.phase-box.current{
  border:2px solid var(--sn-color); box-shadow:0 0 10px var(--sn-color);
  transform:scale(1.05); color:var(--sn-color); font-weight:bold;
}

/* === Planning === */
#planning{ margin:1rem; }
.planning-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; width:100%; box-sizing:border-box;
}
.planning-day{
  background:#1a1a1a; border-radius:8px; padding:.2rem; text-align:center; color:#fff; font-size:.6rem;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}
.planning-day.today{
  border:2px solid var(--sn-color); box-shadow:0 0 8px var(--sn-color);
  color:var(--sn-color); transform:scale(1.03); transition:.2s;
}
.day-name{ font-weight:bold; margin-bottom:.3rem; font-size:.6rem; }
.activity{
  border-radius:4px; padding:.2rem; margin:.2rem 0; font-size:.6rem; font-weight:bold; color:#fff;
  width:100%; text-align:center; box-sizing:border-box; display:inline-block;
}
.marche{ background:#1b5e20; }
.ruck{ background:#6b6b3d; }
.hiit{ background:#b71c1c; }
.muscu{ background:#ef6c00; }
.planche{ background:#1565c0; }

/* === Thèmes KPI === */
:root{
  --color-poids:#2196f3; --color-imc:#9d00ff; --color-graisse:#f44336; --color-muscle:#4caf50;
}
.kpi-joursDebut .kpi-value,.kpi-joursLundi .kpi-value{ color:#fff; }
.kpi-poids .kpi-value{ color:var(--color-poids); }
.kpi-imc .kpi-value{ color:var(--color-imc); }
.kpi-perteTotale .kpi-value,.kpi-perteMoy .kpi-value{ color:#fff; }
.kpi-graisse .kpi-value,.kpi-graisse-pct .kpi-value{ color:var(--color-graisse); }
.kpi-muscle .kpi-value,.kpi-muscle-pct .kpi-value{ color:var(--color-muscle); }

/* === Barre progression === */
.progress-wrapper{
  grid-column:span 3; width:100%; display:flex; flex-direction:column; align-items:center; margin-top:.5rem;
}
.progress-container{
  width:95%; height:36px; background:#1a1a1a; border-radius:18px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,.6);
}
#progress-bar{
  height:100%; width:0%; background:var(--sn-color);
  border-radius:12px 0 0 12px; transition:width 1s ease, background .5s ease;
  display:flex; align-items:center; justify-content:center; color:#1a1a1a; font-size:1.2rem; font-weight:bold;
}
#progress-labels{
  width:95%; display:flex; justify-content:space-between; margin-top:.3rem; font-size:.6rem; font-weight:bold; color:#fff;
}

/* === Groupe pertes === */
.kpi-group-pertes{
  grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr 1fr;
  background:#1a1a1a; border:2px solid var(--sn-color); border-radius:12px; box-shadow:0 0 8px var(--sn-color);
  margin:.5rem 0; overflow:hidden;
}
.kpi-group-pertes .kpi-card{ background:transparent; border:none; box-shadow:none; margin:0; }
.kpi-group-pertes .kpi-title{ font-size:.6rem; color:#ccc; margin-bottom:.3rem; text-transform:uppercase; }
.kpi-group-pertes .kpi-value{ font-size:1.6rem; font-weight:bold; }
.kpi-poids .kpi-title{ color:var(--color-poids); }
.kpi-imc .kpi-title{ color:var(--color-imc); }
.kpi-graisse .kpi-title,.kpi-graisse-pct .kpi-title{ color:var(--color-graisse); }
.kpi-muscle .kpi-title,.kpi-muscle-pct .kpi-title{ color:var(--color-muscle); }
.kpi-group-pertes .perte-totale .kpi-title,.kpi-group-pertes .perte-totale .kpi-value{ color:var(--sn-color); }
.kpi-group-pertes .perte-graisse .kpi-title,.kpi-group-pertes .perte-graisse .kpi-value{ color:var(--color-graisse); }
.kpi-group-pertes .gain-muscle .kpi-title,.kpi-group-pertes .gain-muscle .kpi-value{ color:var(--color-muscle); }

/* === Layout global === */
body{ font-family:system-ui, sans-serif; margin:0; padding:0; background:#000; color:#fff; }
.kpi-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; margin:1rem; margin-bottom:2rem; }
.kpi-card{ background:#1a1a1a; padding:1rem; border-radius:10px; text-align:center; box-shadow:0 2px 5px rgba(0,0,0,.6); }
.kpi-title{ font-size:.6rem; color:#ccc; text-transform:uppercase; letter-spacing:1px; }
.kpi-value{ font-size:1.8rem; font-weight:bold; margin-top:.5rem; display:block; }
canvas{ background:#000; border-radius:10px; padding:.5rem; margin:1rem; }

.kpi-card.kpi-perteTotale.today{
  border:2px solid var(--sn-color); box-shadow:0 0 8px var(--sn-color);
  color:var(--sn-color); transform:scale(1.03); transition:.2s;
}
.kpi-card.kpi-perteTotale.today .kpi-title{ color:var(--sn-color); }

/* ====== STEPS (scopé pour ne PAS toucher aux blocs SN du haut) ====== */

.steps-wrap{ margin:1rem; display:grid; gap:1rem; }

/* Zone 0 : total */
.steps-zone0{
  width:100%; text-align:center; font-size:2.5rem; font-weight:900;
  color:var(--sn-color); background:#111; border:2px solid var(--sn-color);
  border-radius:12px; padding:.8rem 0;
}

/* Zone 1 : récap SN (4 colonnes fixes, +20% hauteur, texte plus gros) */
.steps-zone1{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.8rem;
}
.sn-chip{
  border-radius:16px; padding:0.1rem; text-align:center; color:#000; font-weight:900;
  min-height:96px; display:flex; flex-direction:column; justify-content:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
}
.sn-chip .label{ font-size:.9rem; opacity:.7; display:block; }
.sn-chip .value{ font-size:1.2rem; display:block; }

/* couleurs uniquement si .sn-chip a la classe */
.sn-chip.sn1{ background:#66e8ff; }
.sn-chip.sn2{ background:#fff700; }
.sn-chip.sn3{ background:#ff9100; }
.sn-chip.sn4{ background:#ff1900; color:#fff; }

/* Zone 2 : carrousel semaines (gauche -> droite) */
.steps-zone2{ overflow:hidden; }
.weeks-carousel{
  display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.2rem;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.weeks-carousel::-webkit-scrollbar{ height:6px; }
.weeks-carousel::-webkit-scrollbar-thumb{ background:#333; border-radius:6px; }

.week-card{
  width:128px; background:#111; border-radius:14px; padding:.6rem; color:#fff;
  border:3px solid #ffd5001a; text-align:center; flex:0 0 auto;
}

/* bande couleur selon SN, texte semaine en NOIR */
.week-badge{
  margin:-.2rem -.2rem .35rem; padding:.25rem .35rem; border-radius:10px;
  font-size:1.05rem; font-weight:1000; color:#000;
}
.week-card.sn1 .week-badge{ background:#66e8ff; }
.week-card.sn2 .week-badge{ background:#fff700; }
.week-card.sn3 .week-badge{ background:#ff9100; }
.week-card.sn4 .week-badge{ background:#ff1900; color:#fff; }

.week-card .cal{ font-size:.75rem; opacity:.9; }
.week-card .steps{ font-size:1rem; margin-top:.25rem; font-weight:900; }

/* Zone 3 : bar chart */
.steps-zone3 canvas{ background:#000; border-radius:10px; }

/* Zone 4 : podium (double hauteur + grosses médailles) */
.steps-zone4{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.top-chip{
  border-radius:16px; padding:0.2rem; text-align:center; color:#000; font-weight:900;
  min-height:160px; display:flex; flex-direction:column; justify-content:center;
}
.top-gold{ background:#FFD700; }
.top-silver{ background:#C0C0C0; }
.top-bronze{ background:#CD7F32; }

.top-chip .medal{ font-size:5.2rem; line-height:1; display:block; margin-bottom:.25rem; }
.top-chip .wk{ font-size:1.6rem; font-weight:1000; }
.top-chip .wk2{ font-size:.95rem; opacity:.9; display:block; margin-top:.1rem; }
.top-chip .val{ font-size:1.4rem; margin-top:.35rem; }

.steps-km {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  opacity: 0.9;
  margin-top: 0.2rem;
}