:root{
  --bg:#F5F7FB;
  --panel:#FFFFFF;
  --panel2:#F8FAFF;
  --ink:#0F172A;
  --muted:#475569;
  --line:#E5E7EB;

  --primary:#0B2E4E;          /* bleu Handball Lab */
  --primaryHover:#08253E;
  --accent:#00C77C;           /* vert sport */
  --accent2:#00B9FF;          /* bleu énergie */
  --danger:#EF4444;

  --shadow: 0 18px 45px rgba(15, 23, 42, .10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 30% 0%, rgba(0,199,124,.10), transparent 60%),
    radial-gradient(700px 520px at 80% 10%, rgba(0,185,255,.10), transparent 55%),
    var(--bg);
}

.app{ max-width:760px; margin:0 auto; padding:18px; }

.topbar{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}

.brand{ display:flex; gap:10px; align-items:center; }
.brand-sub{ font-size:12px; color:var(--muted); }
.brand-logo{
  height:46px; width:auto; max-width:350px; display:block; object-fit:contain;
}
@media (max-width: 480px){
  .brand-logo{ height:36px !important; max-width:150px !important; }
}

.progress{ min-width:160px; text-align:right; }
.progress-text{ font-size:12px; color:var(--muted); margin-bottom:6px; }
.progress-bar{
  height:8px; border-radius:999px;
  background:#EEF2F7;
  overflow:hidden;
  border:1px solid #E6EBF2;
}
#progressFill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.screen{ padding-bottom:28px; }
.hidden{ display:none; }

.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
  box-shadow: var(--shadow);
}

h1{ margin:0 0 10px; font-size:24px; letter-spacing:.2px; }
h2{ margin:12px 0 12px; font-size:22px; }

.muted{ color:var(--muted); line-height:1.55; }
.hint{ margin-top:14px; font-size:12px; color:rgba(71,85,105,.78); }
.error{ margin-top:12px; color: var(--danger); font-weight:900; }

.label{ display:block; margin:14px 0 8px; font-size:13px; color:var(--muted); }

.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid #DCE3EE;
  background: var(--panel2);
  color: var(--ink);
  outline:none;
}
.input:focus{
  border-color: rgba(0,199,124,.35);
  box-shadow: 0 0 0 4px rgba(0,199,124,.14);
  background:#fff;
}

.btn{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:2px solid #CBD5E1;
  background:#FFFFFF;
  color: var(--ink);
  font-weight:950;
  cursor:pointer;
  margin-top:12px;
  transition: transform .06s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
  color:#FFFFFF;
  box-shadow: 0 10px 22px rgba(11,46,78,.18);
}
.btn-primary:hover{ background: var(--primaryHover); border-color: var(--primaryHover); }

.btn-ghost{ background:#FFFFFF; border-color:#CBD5E1; }
.btn-small{ width:auto; padding:8px 10px; border-radius:12px; margin:0; font-weight:950; }
.btn-inline{ width:auto; margin:0; padding:10px 12px; border-radius:999px; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; padding:6px 10px;
  border-radius:999px;
  border:1px solid #E2E8F0;
  background:#FFFFFF;
  color: var(--muted);
}

.pill-validated{
  border-color: rgba(0,199,124,.35);
  background: rgba(0,199,124,.10);
  color: rgba(0,140,90,1);
  font-weight:1000;
}

.workout-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.left-top{ display:flex; align-items:center; gap:10px; }

.grid{ display:grid; gap:12px; margin:14px 0 6px; }
.grid-two{ grid-template-columns:1fr 1fr; }
@media (max-width: 420px){ .grid-two{ grid-template-columns:1fr; } }

.box{
  border:1px solid #E2E8F0;
  background:#FFFFFF;
  border-radius:16px;
  padding:14px;
}
.box-ghost{ background: #FBFCFF; }
.box-title{ font-size:12px; color:rgba(71,85,105,.85); margin-bottom:6px; }
.box-value{ font-weight:1000; font-size:18px; }

.section{ margin-top:18px; }
.section-title{ font-weight:1000; margin-bottom:10px; font-size:13px; color: rgba(15,23,42,.92); }
.list{ margin:0; padding-left:18px; color:var(--muted); }
.list li{ margin:8px 0; }

.divider{ height:1px; background:#EEF2F7; margin:18px 0; border-radius:999px; }

/* ✅ VIDEO CTA (premium clair) */
.video-cta{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(0,185,255,.25);
  background:
    radial-gradient(900px 120px at 20% 0%, rgba(0,199,124,.12), transparent 60%),
    radial-gradient(900px 140px at 80% 0%, rgba(0,185,255,.12), transparent 60%),
    #FFFFFF;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  transition: transform .06s ease, filter .12s ease, border-color .12s ease;
}
.video-cta:hover{ filter: brightness(1.01); border-color: rgba(0,185,255,.40); }
.video-cta:active{ transform: translateY(1px); }

.video-icon{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:14px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color:#05121A;
  font-weight:1200;
  flex:0 0 auto;
}
.video-text{ display:flex; flex-direction:column; gap:3px; text-align:left; flex:1 1 auto; }
.video-title{ font-weight:1100; font-size:14px; }
.video-sub{ font-size:12px; color: rgba(71,85,105,.85); }
.video-arrow{ color: rgba(15,23,42,.60); font-weight:1200; }

/* ✅ Rest card after video */
.rest-card{
  margin-top:18px;
  border:2px solid rgba(0,185,255,.25);
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(0,199,124,.08), transparent 60%),
    radial-gradient(600px 200px at 80% 0%, rgba(0,185,255,.08), transparent 60%),
    #FFFFFF;
  border-radius:20px;
  padding:20px;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

.rest-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.rest-label{
  font-weight:1000;
  font-size:14px;
  color: rgba(71,85,105,.85);
}

.rest-value{
  font-size:32px;          /* 🔥 GROS */
  font-weight:1200;
  color: var(--primary);
}

.rest-sub{
  margin-top:10px;
  font-size:13px;
  color: rgba(71,85,105,.85);
}

/* Timer */
.timer{
  margin-top:16px;
  border:1px solid #E2E8F0;
  background:#FFFFFF;
  border-radius:18px;
  padding:14px;
}
.timer-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.timer-title{ font-weight:1000; }
.timer-controls{ display:flex; gap:8px; }
.timer-time{
  font-size:44px;
  font-weight:1100;
  text-align:center;
  margin-top:12px;
  letter-spacing:1px;
}
@media (max-width: 420px){ .timer-time{ font-size:38px; } }

.actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }

.choice-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  width:auto; margin:0;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid #DCE3EE;
  background:#FFFFFF;
  font-weight:1000;
  cursor:pointer;
  transition: transform .06s ease, border-color .12s ease, background .12s ease;
}
.chip:active{ transform: translateY(1px); }
.chip.active{
  border-color: rgba(0,199,124,.45);
  background: rgba(0,199,124,.10);
}

.mini-status{ margin-top:10px; font-size:12px; color: rgba(71,85,105,.88); min-height: 16px; }

/* Slider */
.rating-wrap{
  border:1px solid #E2E8F0;
  background:#FFFFFF;
  border-radius:16px;
  padding:14px;
  margin-bottom:12px;
}
.rating-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.rating-value{ font-weight:1100; }
.range{ width:100%; }

/* Sessions cards */
.sessions-wrap{ margin-top:14px; display:grid; gap:12px; }
.session-card{
  text-align:left;
  border:1px solid #E2E8F0;
  background: radial-gradient(900px 120px at 20% 0%, rgba(0,199,124,.10), transparent 60%),
              radial-gradient(900px 140px at 80% 0%, rgba(0,185,255,.10), transparent 60%),
              #FFFFFF;
  border-radius:18px;
  padding:16px;
  cursor:pointer;
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
  transition: transform .08s ease, border-color .12s ease, filter .12s ease;
}
.session-card:hover{ border-color: rgba(11,46,78,.25); filter: brightness(1.01); }
.session-card:active{ transform: translateY(1px); }
.session-card-title{ font-weight:1100; font-size:16px; margin-bottom:6px; }
.session-card-sub{ font-size:12px; color: rgba(71,85,105,.86); }
.session-card-cta{
  margin-top:10px;
  display:inline-flex;
  padding:8px 10px;
  border-radius:999px;
  background: var(--primary);
  color:#fff;
  font-weight:1100;
}

/* Confetti */
.confetti{
  position:fixed;
  width:10px; height:14px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-radius:4px;
  pointer-events:none;
  animation: fall 1.2s ease-in forwards;
  z-index:9999;
}
@keyframes fall{
  0%{ transform: translateY(0) rotate(0deg); }
  100%{ transform: translateY(110vh) rotate(520deg); }
}

/* BRAVO overlay */
.bravo{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px);
  z-index: 9998;
}
.bravo-card{
  width:min(560px, 92vw);
  background: rgba(255,255,255,.95);
  border:1px solid #E2E8F0;
  border-radius:26px;
  padding:28px 22px;
  text-align:center;
  box-shadow: 0 30px 70px rgba(0,0,0,.25);
}
.bravo-kicker{ font-size:12px; letter-spacing: .22em; font-weight:1100; color: rgba(71,85,105,.85); }
.bravo-title{ margin-top:10px; font-size:56px; font-weight:1200; color: var(--primary); }
.bravo-sub{ margin-top:8px; font-size:14px; color: rgba(71,85,105,.95); }

/* Video modal */
.video-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.video-modal.hidden { display: none; }
.video-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); }
.video-content { position: relative; width: 95%; max-width: 900px; background: #000; border-radius: 16px; overflow: hidden; z-index: 2; }
.video-wrapper { position: relative; padding-top: 56.25%; }
.video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-close { position: absolute; top: 10px; right: 15px; background: white; border: none; font-size: 18px; padding: 6px 10px; border-radius: 8px; cursor: pointer; z-index: 3; }

/* ✅ Transition exo */
.exo-enter{ animation: exoEnter .22s ease-out; }
@keyframes exoEnter{
  0%{ opacity:0; transform: translateY(10px); }
  100%{ opacity:1; transform: translateY(0); }
}

/* ✅ Pop validé */
.validated-pop{ animation: pop .22s ease-out; }
@keyframes pop{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.01); }
  100%{ transform: scale(1); }
}
/* SAFETY: l'overlay BRAVO ne doit JAMAIS bloquer si hidden */
.bravo.hidden{ display:none !important; }

/* FIX BÉTON: "hidden" doit toujours cacher, même si un autre CSS casse tout */
.hidden{ display:none !important; }

/* et l’overlay BRAVO doit redevenir visible quand il n’est pas hidden */
.bravo{ display:flex; }

.chip.disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* --- Video thumbnail (YouTube-style) --- */
.video-thumb {
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,.25);
  cursor: pointer;
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

.video-thumb img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.01);
}

.video-thumb::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 55% at 50% 50%, rgba(0,0,0,.05), rgba(0,0,0,.55));
}

.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  width: 74px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,76,76,.92); /* rouge punchy handball-lab */
  display: grid;
  place-items: center;
  box-shadow: 0 16px 35px rgba(0,0,0,.38);
}

.video-play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
  fill: #fff;
}

.video-thumb:hover .video-play {
  transform: translate(-50%,-50%) scale(1.03);
}

.box-full{
  width: 100%;
  display: block;
}

/* Progress fill visible (barre près du titre) */
#progressFill2{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent, #007BFF), var(--accent2, #00C2FF));
}

/* (optionnel) si la barre elle-même est trop pâle */
#workoutProgress .progress-bar{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
}