:root{--red:#e32636;--bg:#0d0d0f;--panel:#171719;--panel2:#202024;--line:#303035;--text:#f7f7f8;--muted:#a4a4ad;--white:#fff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
button,input,select,textarea{font:inherit}button{cursor:pointer}
.app{min-height:100vh}

/* BARRE DU HAUT AVEC IMAGE DE FOND ET LIGNE ROUGE */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px clamp(16px,4vw,48px);border-bottom:2px solid var(--red);background:linear-gradient(to right, rgba(13,13,15,0.6) 0%, rgba(13,13,15,0.4) 100%), url('fond-header.png') center/cover no-repeat;position:sticky;top:0;z-index:5}

/* LOGO ET TEXTE AGRANDIS */
.brand{display:flex;align-items:center;gap:16px;font-weight:900;letter-spacing:.8px;font-size:22px}
.logo{width:105px;height:105px;border:3px solid var(--red);border-radius:50%;display:grid;place-items:center;background:#fff;overflow:hidden;flex-shrink:0}
.logo img{width:100%;height:100%;object-fit:cover}
.brand small{display:block;color:var(--muted);font-size:16px;letter-spacing:1.5px;font-weight:700;margin-top:4px}

.status{font-size:12px;color:#ffb8bd;border:1px solid #6b242a;border-radius:99px;padding:6px 10px;background:rgba(0,0,0,0.5)}
.layout{display:grid;grid-template-columns:230px minmax(0,1fr);max-width:1500px;margin:auto}.sidebar{padding:24px 14px;border-right:1px solid var(--line);min-height:calc(100vh - 76px)}.nav{display:grid;gap:7px}.nav button{background:transparent;border:0;color:var(--muted);text-align:left;padding:12px 14px;border-radius:10px;font-weight:700}.nav button:hover,.nav button.active{background:#2b171a;color:#fff}.nav button.active{box-shadow:inset 3px 0 var(--red)}.side-note{margin:28px 8px;padding:14px;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:12px}
main{padding:clamp(18px,3vw,40px);min-width:0}.page{display:none}.page.active{display:block}.eyebrow{color:var(--red);font-size:12px;letter-spacing:2px;font-weight:900;text-transform:uppercase}.heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}h1{font-size:clamp(28px,4vw,43px);line-height:1.1;margin:6px 0 8px;letter-spacing:-1.1px}h2{font-size:20px;margin:0 0 14px}h3{margin:0 0 8px;font-size:17px}p{color:var(--muted);margin:0 0 12px}.btn{border:0;border-radius:10px;padding:11px 15px;font-weight:800;background:var(--red);color:white}.btn:hover{filter:brightness(1.12)}.btn.secondary{background:#29292e;border:1px solid #414148}.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}.btn.small{padding:7px 10px;font-size:12px}

/* BANDEAU D'ACCUEIL AVEC VIDÉO */
.hero{border:1px solid #472126;border-radius:20px;padding:clamp(22px,4vw,42px);position:relative;overflow:hidden;min-height:350px;display:flex;align-items:center}
.hero-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0.7}
.hero::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to right, rgba(13,13,15,0.9) 0%, rgba(13,13,15,0.4) 100%);z-index:1}
.hero-content{position:relative;z-index:2;max-width:580px}
.hero::after{content:"TOP TEAM";position:absolute;right:-15px;bottom:-30px;font-size:clamp(65px,12vw,150px);font-weight:1000;letter-spacing:-8px;color:#ffffff08;pointer-events:none;z-index:1}

/* LES CARTES DE DISCIPLINES */
.discipline-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:28px}
.discipline-card{border:1px solid var(--line);border-radius:15px;padding:30px 20px;min-height:160px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;transition:transform 0.2s, border-color 0.2s;background-size:cover;background-position:center;position:relative;overflow:hidden}
.discipline-card:hover{transform:translateY(-4px);border-color:var(--red)}
.discipline-card h3{margin:0 0 4px;font-size:20px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,0.8);z-index:2;position:relative}
.discipline-card p{margin:0;font-size:12px;color:#ffb8bd;font-weight:700;text-transform:uppercase;letter-spacing:1px;z-index:2;position:relative}

/* VIDÉOS DANS LES CARTES */
.card-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;z-index:0;opacity:0.8;transition:opacity 0.3s}
.discipline-card:hover .card-video{opacity:1}
.card-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.9));z-index:1}

/* --- STYLE POUR LES NIVEAUX --- */
.niveau-grid{display:flex;flex-direction:column;gap:12px;max-width:600px;margin:0 auto}
.niveau-card{height:25vh;min-height:160px;border-radius:12px;background:linear-gradient(135deg, #2b171a, #171719);background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 30px;cursor:pointer;transition:transform 0.2s, filter 0.2s;border:1px solid var(--line)}
.niveau-card:hover{transform:scale(1.02);filter:brightness(1.2);border-color:var(--red)}
.niveau-card h2{font-size:32px;font-weight:900;text-transform:uppercase;margin:0 0 4px 0;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.8);line-height:1}
.niveau-card p{margin:0;font-size:14px;color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,0.8)}

/* --- STYLE DU MÉGA CHRONOMÈTRE --- */
.chrono-tabs { display: flex; gap: 8px; margin-bottom: 20px; justify-content: center; flex-wrap: wrap; width: 100%; padding: 0 10px; box-sizing: border-box; }
.chrono-tab { background: var(--panel); border: 1px solid var(--line); color: var(--muted); padding: 10px 20px; border-radius: 99px; font-weight: 800; white-space: nowrap; transition: all 0.2s; flex: 1; min-width: 100px; text-align: center; }
.chrono-tab.active { background: var(--red); color: #fff; border-color: var(--red); }
.chrono-container { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 40px 20px; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; box-sizing: border-box; }
.chrono-main { text-align: center; width: 100%; }
.chrono-message { font-size: 24px; font-weight: 900; color: #fff; letter-spacing: 2px; margin-bottom: 5px; }
.chrono-display { font-size: 100px; font-weight: 1000; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -3px; text-shadow: 0 0 30px rgba(227, 38, 54, 0.5); line-height: 1; }
.chrono-display.finished { color: var(--red); animation: pulse 1s infinite; }
.chrono-label { font-size: 18px; font-weight: 900; color: var(--red); text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; height: 25px; }
.chrono-round { font-size: 16px; font-weight: 800; color: var(--muted); margin-top: 10px; height: 20px; }
.chrono-settings { width: 100%; display: block; margin-bottom: 10px; }
.chrono-controls { display: flex; gap: 15px; width: 100%; justify-content: center; }
.chrono-controls .btn { font-size: 20px; padding: 18px 40px; flex: 1; max-width: 250px; }
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }

/* Grille spéciale pour les champs du Tabata */
#chronoSettings.tabata-active .form-grid { grid-template-columns: repeat(2, 1fr) !important; }

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 28px}.stat,.card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:18px}.stat strong{font-size:28px;display:block}.stat span{font-size:12px;color:var(--muted)}.section-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 0 14px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.card{display:flex;flex-direction:column;gap:10px;min-width:0}.card p{font-size:13px}.tag{display:inline-flex;align-items:center;width:max-content;max-width:100%;border:1px solid #633039;background:#29171a;color:#ffb9c0;padding:4px 8px;border-radius:99px;font-size:11px;font-weight:800}.card-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto}.muscle-icon{height:90px;border-radius:11px;background:linear-gradient(135deg,#2b171a,#252529);display:grid;place-items:center;color:var(--red);font-size:30px;font-weight:1000}.exercise-icon{height:115px;border-radius:11px;background:linear-gradient(135deg,#28282d,#151517);display:grid;place-items:center;font-size:36px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.filters input,.filters select{max-width:100%}input,select,textarea{width:100%;background:#101012;border:1px solid #3a3a42;color:var(--text);padding:10px 11px;border-radius:9px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--red)}label{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px}.field{margin-bottom:13px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.empty{padding:28px;text-align:center;border:1px dashed #45454b;border-radius:13px;color:var(--muted)}.list{display:grid;gap:10px}.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px}.list-row small{display:block;color:var(--muted)}.exercise-row{display:grid;grid-template-columns:1fr 80px 80px 90px 80px auto;gap:8px;align-items:end;border-bottom:1px solid var(--line);padding:12px 0}.exercise-row .field{margin:0}.exercise-row label{font-size:10px}.muted{color:var(--muted)}.notice{border:1px solid #5e4b1f;background:#211d12;color:#ead7a0;border-radius:11px;padding:12px 14px;font-size:12px;margin-top:18px}.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#f6f6f6;color:#111;padding:11px 16px;border-radius:10px;box-shadow:0 8px 30px #0007;z-index:20;display:none;font-weight:700}.mobile-nav{display:none}

/* --- MODE CLAIR --- */
body.light-mode { --bg: #f0f2f5; --panel: #ffffff; --panel2: #f9f9f9; --line: #d1d5db; --text: #111111; --muted: #6b7280; }
body.light-mode .topbar { background: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%), url('fond-header.png') center/cover no-repeat; }
body.light-mode .hero::before { background: linear-gradient(to right, rgba(240,242,245,0.6) 0%, rgba(240,242,245,0) 100%); }
body.light-mode .hero::after { color: #00000008; }
body.light-mode .niveau-card { background: linear-gradient(135deg, #ffffff, #e5e7eb); color: #111; }
body.light-mode .niveau-card h2 { color: #111; text-shadow: none; }
body.light-mode .card-video, body.light-mode .hero-video { opacity: 0.9; }
body.light-mode .card-overlay { background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4)); }
body.light-mode .discipline-card h3, body.light-mode .discipline-card p { color: #111; text-shadow: 0 1px 3px rgba(255,255,255,0.8); }
body.light-mode .side-note { background: #fff; }
body.light-mode .notice { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
body.light-mode .chrono-message { color: #111; }
body.light-mode .chrono-display { color: #111; text-shadow: 0 0 30px rgba(227, 38, 54, 0.2); }
body.light-mode .status { color: #e32636; border-color: #e32636; background: rgba(255, 255, 255, 0.8); }
body.light-mode .mobile-nav { background: #ffffff; border-bottom: 1px solid var(--line); }
body.light-mode .mobile-nav button { background: #f0f2f5; color: #111; }
body.light-mode .mobile-nav button.active { background: var(--red); color: #fff; }

@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .mobile-nav{display:flex;overflow:auto;gap:6px;padding:10px;border-bottom:1px solid var(--line);position:sticky;top:120px;background:#101012;z-index:4}
  .mobile-nav button{white-space:nowrap;background:#242428;border:0;color:var(--muted);padding:9px 12px;border-radius:9px;font-size:12px;font-weight:800}
  .mobile-nav button.active{background:var(--red);color:white}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .discipline-grid{grid-template-columns:1fr}
  .discipline-card{min-height:120px;padding:20px}
  .exercise-row{grid-template-columns:1fr 1fr 1fr}
  .exercise-row .field:first-child{grid-column:span 3}
  .exercise-row .remove-ex{grid-column:span 3}
  .brand{font-size:18px}
  .logo{width:85px;height:85px}
  .brand small{font-size:14px}
}

@media(max-width:560px){
  .topbar{padding:12px 15px}
  .logo{width:75px;height:75px;border-width:2px}
  .brand{font-size:16px;gap:12px}
  .brand small{font-size:12px;margin-top:2px}
  .status{display:none}
  .grid,.grid.two,.stats,.form-grid{grid-template-columns:1fr}
  .hero::after{font-size:65px}
  .hero{min-height:250px}
  .stat{padding:14px}
  .heading{align-items:flex-start}
  main{padding:20px 14px}
  .exercise-row{grid-template-columns:1fr 1fr}
  .exercise-row .field:first-child{grid-column:span 2}
  .exercise-row .remove-ex{grid-column:span 2}
  .mobile-nav{top:100px}
  .niveau-card{height:28vh}
  .niveau-card h2{font-size:26px}
  .chrono-display { font-size: 75px; }
  .chrono-controls { flex-direction: column; }
  .chrono-controls .btn { max-width: 100%; }
  #chronoSettings.tabata-active .form-grid { grid-template-columns: 1fr !important; }
  #chronoSettings.tabata-active .tabata-fields#field-tabataSets { grid-column: span 1 !important; }
}
/* Animation pour le chrono quand ça sonne */
@keyframes pulse-red {
    0% { color: #fff; text-shadow: none; transform: scale(1); }
    50% { color: var(--red); text-shadow: 0 0 20px var(--red); transform: scale(1.05); }
    100% { color: #fff; text-shadow: none; transform: scale(1); }
}
.chrono-alert {
    animation: pulse-red 1s infinite;
}