/* ─── RESET ─── */
*{box-sizing:border-box;margin:0;padding:0}

/* ─── LOADING OVERLAY ─── */
#loading-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:var(--bg);
  transition:opacity .35s ease;
}
#loading-overlay.hidden{opacity:0;pointer-events:none}
.ld-spinner{
  width:42px;height:42px;border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:var(--blu);
  animation:ld-spin .8s linear infinite;
}
.ld-text{font-size:12px;color:var(--t2);letter-spacing:.4px}
@keyframes ld-spin{to{transform:rotate(360deg)}}
:root{
  --bg:#070b0a;--s:#0e1512;--s2:#141c18;--s3:#1a251f;
  --blu:#2dd4a3;--blu-r:45;--blu-g:212;--blu-b:163;
  --blu2:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.12);
  --blu3:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.22);
  --org:#d99a2b;--org-r:217;--org-g:154;--org-b:43;
  --org2:rgba(var(--org-r),var(--org-g),var(--org-b),.10);
  --org3:rgba(var(--org-r),var(--org-g),var(--org-b),.22);
  --grn:#4ade80;--yel:#eab308;--red:#fb5c6c;--pur:#a78bfa;
  --t1:#f4f8f6;--t2:#9ba8a3;--t3:#7c8a83;
  --bd:rgba(255,255,255,.09);--bd2:rgba(255,255,255,.16);
  --r:14px;--sb:256px;
  /* Échelle d'espacement — nouveaux composants (dtile/rtoggle) uniquement,
     le reste du CSS existant garde ses valeurs px ad hoc (pas de migration). */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --font:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Barlow Condensed','Archivo',-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --card-sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.18)
}
html,body{height:100%;background:var(--bg);color:var(--t1);font-family:var(--font);font-size:13px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Atmosphère : halo bleu diffus en haut du contenu */
body::before{content:'';position:fixed;top:-30%;right:-10%;width:60vw;height:60vh;background:radial-gradient(circle,rgba(var(--blu-r),var(--blu-g),var(--blu-b),.08),transparent 70%);pointer-events:none;z-index:0}
/* Tous les gros chiffres et titres en display étendu + chiffres tabulaires */
.page-title,.hero-title,.stat-value,.cd-num2,.mv,.race-time,.load-val,.brief-val,.athlete-name,.m-title{font-family:var(--font-display);font-variant-numeric:tabular-nums}
button{background:none;border:none;cursor:pointer;font-family:var(--font)}
a{color:inherit;text-decoration:none}
input{font-family:var(--font)}
/* Label accessible non visible (champs identifiés par placeholder seul à l'écran,
   mais un placeholder n'est pas un nom accessible pour un lecteur d'écran). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Focus clavier visible (uniquement clavier, pas au clic souris) — a11y */
button:focus-visible,.nav-item:focus-visible,a:focus-visible,summary:focus-visible,[onclick]:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blu);outline-offset:2px;border-radius:8px
}

/* ─── LAYOUT ─── */
.layout{min-height:100vh}

/* ─── SIDEBAR ─── */
.sidebar{
  width:var(--sb);position:fixed;top:0;left:0;bottom:0;
  background:linear-gradient(180deg,var(--s) 0%,var(--bg) 100%);
  border-right:1px solid var(--bd);
  display:flex;flex-direction:column;gap:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;z-index:100
}
.sidebar::-webkit-scrollbar{display:none}

/* athlete block */
.athlete-block{padding:22px 18px 16px;border-bottom:1px solid var(--bd)}
.athlete-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.avatar{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blu),#8af3cf);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:900;color:#fff;letter-spacing:-.5px
}
.athlete-name{font-size:16px;font-weight:700;color:var(--t1);letter-spacing:.5px;text-transform:uppercase}
.athlete-sub{font-size:10px;color:var(--t2);margin-top:2px}
.live-pill{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.07);border:1px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.18);
  border-radius:20px;padding:3px 10px;font-size:9px;font-weight:700;
  color:var(--blu);text-transform:uppercase;letter-spacing:.8px
}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--grn);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* sidebar stats */
.sb-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bd);border-top:1px solid var(--bd)}
.stat-item{background:var(--bg);padding:10px 12px}
.stat-value{font-size:16px;font-weight:700;color:var(--t1);letter-spacing:0;line-height:1.1;font-variant-numeric:tabular-nums}
.stat-label{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.8px;margin-top:2px}
.stat-item:first-child .stat-value{color:var(--blu)}
.stat-delta{font-size:9px;color:var(--grn);font-weight:600;margin-top:1px;font-variant-numeric:tabular-nums}

/* nav */
.nav{padding:10px 10px;flex:1}
.nav-section{font-size:9px;text-transform:uppercase;letter-spacing:1.2px;color:var(--t3);padding:10px 8px 6px;font-weight:700}
.nav-item{
  position:relative;
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px 9px 14px;
  border-radius:10px;color:var(--t2);font-size:12px;font-weight:500;
  text-align:left;transition:background .15s,color .15s,transform .1s;margin-bottom:1px
}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.6;transition:opacity .15s}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--t1)}
.nav-item:hover svg{opacity:.9}
.nav-item:active{transform:scale(0.97)}
.nav-item.active{background:var(--blu2);color:var(--blu);font-weight:700}
.nav-item.active svg{opacity:1;stroke:var(--blu)}
.nav-item.active::before{content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);width:3px;height:15px;border-radius:3px;background:var(--blu);box-shadow:0 0 8px rgba(var(--blu-r),var(--blu-g),var(--blu-b),.7)}
.nav-badge{font-size:8px;font-weight:700;background:var(--blu);color:#fff;border-radius:4px;padding:1px 5px;margin-left:auto}
.nav-badge.orange{background:var(--org)}

/* countdowns */
.cd-section{padding:10px;border-top:1px solid var(--bd)}
.cd-card{border-radius:12px;padding:12px 14px;margin-bottom:6px}
.cd-card:last-child{margin-bottom:0}
.cd-blue{background:linear-gradient(135deg,rgba(var(--blu-r),var(--blu-g),var(--blu-b),.12),rgba(var(--blu-r),var(--blu-g),var(--blu-b),.04));border:1px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.18)}
.cd-orange{background:linear-gradient(135deg,rgba(var(--org-r),var(--org-g),var(--org-b),.10),rgba(var(--org-r),var(--org-g),var(--org-b),.03));border:1px solid rgba(var(--org-r),var(--org-g),var(--org-b),.16)}
.cd-label2{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--t2);margin-bottom:4px}
.cd-race2{font-size:10px;font-weight:700;color:var(--blu);margin-bottom:8px}
.cd-orange .cd-race2{color:var(--org)}
.cd-row{display:flex;gap:6px;align-items:baseline}
.cd-block{text-align:center}
.cd-num2{font-size:25px;font-weight:800;color:var(--blu);letter-spacing:-.3px;line-height:1;font-variant-numeric:tabular-nums}
.cd-orange .cd-num2{color:var(--org)}
.cd-unit2{font-size:8px;text-transform:uppercase;color:var(--t3);display:block;margin-top:1px}
.cd-sep2{font-size:16px;color:var(--t3);padding-bottom:6px}

/* ─── MAIN ─── */
.main{margin-left:var(--sb);min-height:100vh;position:relative;z-index:1}
.page{padding:28px 32px;display:none}
.page.active{display:block}

/* ─── SECTION HEADER ─── */
.page-hdr{margin-bottom:26px;position:relative;padding-left:15px}
.page-hdr::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:linear-gradient(var(--blu),rgba(var(--blu-r),var(--blu-g),var(--blu-b),.15))}
.page-title{font-size:25px;font-weight:700;color:var(--t1);letter-spacing:1.2px;text-wrap:balance;text-transform:uppercase}
.page-sub{font-size:12px;color:var(--t2);margin-top:6px;max-width:70ch}

/* ─── CARDS ─── */
.card{
  background:var(--s);border:1px solid var(--bd);
  border-radius:var(--r);padding:20px;margin-bottom:14px;
  box-shadow:var(--card-sh);
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)
}
@media(hover:hover){.card:hover{border-color:var(--bd2);transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.28)}}
.card-glow-blue{
  background:linear-gradient(145deg,rgba(var(--blu-r),var(--blu-g),var(--blu-b),.07) 0%,var(--s) 60%);
  border-color:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.2);
  box-shadow:var(--card-sh),0 0 40px rgba(var(--blu-r),var(--blu-g),var(--blu-b),.05)
}
.card-glow-orange{
  background:linear-gradient(145deg,rgba(var(--org-r),var(--org-g),var(--org-b),.07) 0%,var(--s) 60%);
  border-color:rgba(var(--org-r),var(--org-g),var(--org-b),.18);
  box-shadow:var(--card-sh),0 0 40px rgba(var(--org-r),var(--org-g),var(--org-b),.05)
}
.card-glow-green{
  background:linear-gradient(145deg,rgba(var(--blu-r),var(--blu-g),var(--blu-b),.06) 0%,var(--s) 60%);
  border-color:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.2)
}
.ch{
  display:flex;align-items:center;gap:8px;
  font-size:11px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--t2);font-weight:700;margin-bottom:12px;padding-bottom:10px;
  border-bottom:1px solid var(--bd)
}
.ch::before{content:'';width:6px;height:6px;border-radius:2px;background:var(--blu);box-shadow:0 0 8px rgba(var(--blu-r),var(--blu-g),var(--blu-b),.6);flex-shrink:0}

/* ─── ENTRÉE DE PAGE (révélation échelonnée) ─── */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.page.active>*{animation:riseIn .45s var(--ease) both}
.page.active>*:nth-child(2){animation-delay:.04s}
.page.active>*:nth-child(3){animation-delay:.08s}
.page.active>*:nth-child(4){animation-delay:.12s}
.page.active>*:nth-child(n+5){animation-delay:.16s}
@media(prefers-reduced-motion:reduce){.page.active>*{animation:none}}

.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick-btn{
  min-height:118px;padding:14px 15px;border-radius:14px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  border:1px solid var(--bd);color:var(--t1);
  display:flex;flex-direction:column;gap:6px;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.quick-btn:hover{
  transform:translateY(-1px);
  border-color:var(--bd2);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.quick-btn:active{transform:scale(.96)}
.quick-btn strong{
  font-size:14px;letter-spacing:-.2px;line-height:1.25;
  text-wrap:balance;
}
.quick-btn span:last-child{
  font-size:11px;color:var(--t2);line-height:1.5;
  text-wrap:pretty;
}
.quick-kicker{
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--t3)
}
.quick-btn-blue{
  background:linear-gradient(180deg,rgba(var(--blu-r),var(--blu-g),var(--blu-b),.10),rgba(var(--blu-r),var(--blu-g),var(--blu-b),.04));
  border-color:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.22);
}
.quick-btn-blue .quick-kicker,.quick-btn-blue strong{color:var(--blu)}
.quick-btn-orange{
  background:linear-gradient(180deg,rgba(var(--org-r),var(--org-g),var(--org-b),.10),rgba(var(--org-r),var(--org-g),var(--org-b),.04));
  border-color:rgba(var(--org-r),var(--org-g),var(--org-b),.22);
}
.quick-btn-orange .quick-kicker,.quick-btn-orange strong{color:var(--org)}
@media(max-width:900px){.quick-grid{grid-template-columns:1fr}}

/* ─── GRIDS ─── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
@media(max-width:1280px){.g4{grid-template-columns:1fr 1fr}}
@media(max-width:1100px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ─── TODAY HERO ─── */
.hero-card{
  background:linear-gradient(145deg,rgba(var(--blu-r),var(--blu-g),var(--blu-b),.09) 0%,rgba(var(--blu-r),var(--blu-g),var(--blu-b),.03) 50%,var(--s) 100%);
  border:1px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.2);border-radius:18px;padding:24px;margin-bottom:18px;
  box-shadow:0 4px 60px rgba(var(--blu-r),var(--blu-g),var(--blu-b),.06),0 1px 3px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04)
}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.08);border:1px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.2);
  border-radius:20px;padding:4px 12px;font-size:9px;font-weight:700;
  color:var(--grn);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px
}
.hero-title{font-size:23px;font-weight:700;color:var(--t1);letter-spacing:.8px;text-wrap:balance;text-transform:uppercase}
.hero-sub{font-size:11px;color:var(--t2);margin-top:3px}
.hero-tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{display:inline-flex;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;border:1px solid}
.tag-green{background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.08);border-color:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.2);color:var(--grn)}
.tag-red{background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.18);color:var(--red)}
.tag-blue{background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.08);border-color:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.2);color:var(--blu)}
.tag-orange{background:rgba(var(--org-r),var(--org-g),var(--org-b),.08);border-color:rgba(var(--org-r),var(--org-g),var(--org-b),.2);color:var(--org)}

/* metrics row */
.mrow{display:flex;gap:8px;flex-wrap:wrap}
.mbox{
  background:rgba(0,0,0,.3);border:1px solid var(--bd);
  border-radius:10px;padding:12px 14px;flex:1;min-width:88px;text-align:center
}
.mv{font-size:31px;font-weight:800;color:var(--blu);line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;text-shadow:0 0 18px color-mix(in srgb,currentColor 28%,transparent)}
.mv.org{color:var(--org)}.mv.grn{color:var(--grn)}.mv.yel{color:var(--yel)}
.ml{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.8px;margin-top:5px}

/* ─── LOAD WIDGET ─── */
.load-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
@media(max-width:900px){.load-grid{grid-template-columns:1fr 1fr}}
.load-stat{background:rgba(255,255,255,.03);border:1px solid var(--bd);border-radius:12px;padding:16px 10px;text-align:center}
.load-val{font-size:32px;font-weight:800;letter-spacing:-.3px;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums}
.load-lbl{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.8px;margin-top:6px}
.load-sub{font-size:10px;margin-top:5px;font-weight:600;color:var(--t2)}

/* daily briefing */
.brief-card{border-color:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.16)}
.brief-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.brief-head .ch{margin-bottom:4px;padding-bottom:0;border-bottom:0}
.brief-date{font-size:11px;color:var(--t3)}
.brief-status{
  padding:5px 12px;border-radius:999px;border:1px solid var(--bd);
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;
  flex-shrink:0
}
.brief-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.brief-tile{background:rgba(255,255,255,.03);border:1px solid var(--bd);border-radius:12px;padding:14px}
.brief-val{font-size:24px;font-weight:900;line-height:1;color:var(--t1);font-variant-numeric:tabular-nums}
.brief-lbl{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.8px;margin-top:7px}
.brief-sub{font-size:11px;color:var(--t3);margin-top:5px;line-height:1.4}
.brief-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.brief-action{border-radius:8px;padding:9px 11px;background:rgba(255,255,255,.03);border:1px solid var(--bd);font-size:11px;color:var(--t2);line-height:1.35}
.brief-action strong{color:var(--t1)}
@media(max-width:1280px){.brief-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){.brief-grid{grid-template-columns:1fr 1fr 1fr}.brief-actions{grid-template-columns:1fr}}
@media(max-width:640px){.brief-head{display:block}.brief-status{display:inline-block;margin-top:10px}}

/* ─── SECTIONS REPLIABLES (<details>) ─── */
.fold > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t2);user-select:none}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::before{content:'';width:6px;height:6px;border-radius:2px;background:var(--blu);
  box-shadow:0 0 8px rgba(var(--blu-r),var(--blu-g),var(--blu-b),.6);flex-shrink:0}
.fold > summary::after{content:'';width:7px;height:7px;flex-shrink:0;margin-left:auto;
  border-right:2px solid var(--t3);border-bottom:2px solid var(--t3);transform:rotate(-45deg);transition:transform .2s}
.fold[open] > summary::after{transform:rotate(45deg);border-color:var(--blu)}
.fold > summary:hover{color:var(--t1)}
.fold-body{margin-top:12px}

/* ─── CHAUSSURES ─── */
.shoe-row{margin-bottom:13px}
.shoe-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;margin-bottom:5px}
.shoe-nm{font-weight:700;color:var(--t1)}
.shoe-km{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.shoe-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.shoe-bar>span{display:block;height:100%;border-radius:5px;transition:width .5s}
.shoe-sub{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:10px;color:var(--t3);margin-top:4px}
.shoe-act{cursor:pointer;color:var(--blu)}
.shoe-act:hover{text-decoration:underline}
.shoe-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.shoe-add input{background:rgba(0,0,0,.4);border:1.5px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.25);color:var(--t1);padding:7px 10px;border-radius:8px;font-size:12px;font-family:var(--font)}
.shoe-add input:focus{outline:none;border-color:var(--blu)}

/* ─── MUSCULATION ─── */
.mus-count{font-size:11px;font-weight:700;color:var(--t2);background:rgba(255,255,255,.05);padding:3px 10px;border-radius:20px}
.mus-count.full{color:var(--grn);background:rgba(74,222,128,.12)}
.mus-sess{border:1px solid var(--bd);border-radius:10px;margin-bottom:8px;overflow:hidden;background:rgba(255,255,255,.02)}
.mus-sess.done{border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.05)}
.mus-hdr{display:flex;align-items:center;gap:9px;padding:11px 13px;cursor:pointer;user-select:none}
.mus-chev svg{width:15px;height:15px;fill:none;stroke:var(--t3);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;display:block}
.mus-sess.open .mus-chev svg{transform:rotate(90deg);stroke:var(--org)}
.mus-title{font-size:12.5px;font-weight:700;color:var(--t1);flex:1;line-height:1.25}
.mus-opt-badge{font-size:8.5px;font-weight:700;color:var(--t3);background:rgba(255,255,255,.06);padding:1px 6px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px;vertical-align:middle}
.mus-sess.opt{border-style:dashed}
.mus-focus{font-size:10px;color:var(--t3);white-space:nowrap}
.mus-body{display:none;padding:4px 13px 13px}
.mus-sess.open .mus-body{display:block}
.mus-ex{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.05)}
.mus-ex-n{font-size:12.5px;font-weight:600;color:var(--t1)}
.mus-ex-sr{font-size:12px;font-weight:700;color:var(--org);white-space:nowrap;font-variant-numeric:tabular-nums}
.mus-ex-cue{grid-column:1/-1;font-size:10.5px;color:var(--t3);line-height:1.35}
.mus-guide{grid-column:1/-1;margin-top:5px}
.mus-guide summary{font-size:10.5px;font-weight:600;color:var(--org);cursor:pointer;list-style:none;user-select:none;display:inline-block}
.mus-guide summary::-webkit-details-marker{display:none}
.mus-guide summary::before{content:"▸ "}
.mus-guide[open] summary::before{content:"▾ "}
.mus-guide ul{margin:6px 0 2px;padding-left:16px}
.mus-guide li{font-size:11px;color:var(--t2);line-height:1.5;margin-bottom:3px}
.mus-demo{display:inline-block;margin-top:7px;font-size:11px;font-weight:600;color:var(--blu);text-decoration:none}
.mus-demo:hover{text-decoration:underline}
/* Log poids/reps par exo */
/* Séances de force enregistrées (Garmin) */
.st-sess{border:1px solid var(--bd);border-radius:10px;padding:12px 13px;margin-bottom:10px;background:rgba(255,255,255,.02)}
.st-sess:last-of-type{margin-bottom:6px}
.st-sess-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--bd)}
.st-date{font-family:var(--font-display);font-weight:700;color:var(--org);font-size:15px;letter-spacing:.3px}
.st-name{font-size:12px;color:var(--t2);font-weight:600}
.st-meta{font-size:11px;color:var(--t2);font-variant-numeric:tabular-nums}
.st-ex{padding:7px 0;border-top:1px solid rgba(255,255,255,.04)}
.st-ex:first-child{border-top:none}
.st-ex-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.st-ex-n{font-size:12.5px;font-weight:600;color:var(--t1)}
.st-rename{background:none;border:none;color:var(--t3);cursor:pointer;font-size:11px;padding:0 2px;font-family:var(--font);opacity:.6}
.st-rename:hover{color:var(--blu);opacity:1}
.st-ex-top{font-size:11px;font-weight:800;color:var(--org);font-variant-numeric:tabular-nums}
.st-sets{display:flex;flex-wrap:wrap;gap:5px}
.st-set{font-size:11px;font-weight:600;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:6px;padding:3px 7px;font-variant-numeric:tabular-nums}
.st-set.top{color:var(--blu);border-color:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.35);background:var(--blu2)}
.st-x{color:var(--t3);margin:0 1px}
.mus-toggle{margin-top:12px;width:100%;padding:10px;border-radius:9px;border:1px solid var(--bd2);
  background:rgba(255,255,255,.04);color:var(--t1);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.15s}
.mus-toggle:hover{border-color:var(--org)}
.mus-toggle.done{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.3);color:var(--grn)}

/* ─── BILAN DE LA SEMAINE ─── */
.wr-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.wr-tile{background:rgba(255,255,255,.03);border:1px solid var(--bd);border-radius:12px;padding:12px}
.wr-val{font-size:22px;font-weight:900;letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums}
.wr-lbl{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.6px;margin-top:6px}
.wr-sub{font-size:10px;color:var(--t3);margin-top:4px;line-height:1.3}
.wr-verdict{margin-top:12px;font-size:12px;color:var(--t1);line-height:1.5;
  background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.06);
  border-left:2px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.4);padding:9px 12px;border-radius:0 8px 8px 0}
@media(max-width:1100px){.wr-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.wr-grid{grid-template-columns:1fr 1fr}}
.wr-int{margin-top:14px}
.wr-int-top{display:flex;justify-content:space-between;font-size:11px;color:var(--t2);margin-bottom:5px;font-weight:600}
.wr-int-bar{position:relative;height:10px;border-radius:6px;background:rgba(var(--org-r),var(--org-g),var(--org-b),.40)}
.wr-int-bar>span{display:block;height:100%;border-radius:6px;background:var(--grn);transition:width .5s}
.wr-int-bar>i{position:absolute;top:-3px;width:2px;height:16px;background:var(--t1);opacity:.75;border-radius:2px}
.wr-int-cue{font-size:10px;color:var(--t3);margin-top:6px;line-height:1.35}

/* ─── HEATMAP ─── */
.heatmap-outer{overflow-x:auto;padding-bottom:6px}
.hm-header{display:flex;gap:0;margin-bottom:6px;min-height:14px;padding-left:26px}
/* Cases élastiques : la grille remplit toute la largeur de la carte. */
.heatmap{display:flex;gap:3px;width:100%}
.hm-col{display:flex;flex-direction:column;gap:3px;flex:1 1 0;min-width:11px;max-width:22px}
/* colonne des libellés de jours (Lun/Mer/Ven) — s'étire pour suivre les lignes */
.hm-wd{display:flex;flex-direction:column;gap:3px;width:23px;flex-shrink:0}
.hm-wd-lbl{flex:1;display:flex;align-items:center;justify-content:flex-end;font-size:8px;color:var(--t3);padding-right:5px;white-space:nowrap}
.hm-sq{width:100%;aspect-ratio:1;border-radius:3px;cursor:default;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .12s}
.hm-sq.fill{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hm-sq:hover{transform:scale(1.5);z-index:5;position:relative;box-shadow:0 0 0 1px rgba(var(--blu-r),var(--blu-g),var(--blu-b),.55),0 3px 10px rgba(0,0,0,.55)}
/* jour courant : anneau lumineux */
.hm-sq.hm-today{box-shadow:0 0 0 1.5px var(--blu),0 0 7px rgba(var(--blu-r),var(--blu-g),var(--blu-b),.65)}

/* bar rows */
.br{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.bl{font-size:10px;color:var(--t2);white-space:nowrap}
.bw{flex:1;background:rgba(255,255,255,.04);border-radius:4px;height:16px;overflow:hidden}
.bf{height:100%;border-radius:4px;display:flex;align-items:center;padding-left:7px;font-size:9px;color:rgba(255,255,255,.85);font-weight:700;transition:width .9s cubic-bezier(.4,0,.2,1)}
.bv{font-size:10px;color:var(--t2);white-space:nowrap;min-width:48px;font-variant-numeric:tabular-nums}

/* ─── RACE CARDS ─── */
.race-card{text-align:center;padding:24px 16px 20px}
.race-tag{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--t2);margin-bottom:6px}
.race-time{font-size:54px;font-weight:800;line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums;text-wrap:balance}
.race-time.blue{color:var(--blu)}.race-time.orange{color:var(--org)}
.race-pace{font-size:13px;color:var(--t2);margin-top:6px}
.race-chip{display:inline-block;margin-top:10px;padding:4px 14px;border-radius:20px;font-size:10px;font-weight:700}
.race-chip.blue{background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.12);color:var(--blu)}
.race-chip.orange{background:rgba(var(--org-r),var(--org-g),var(--org-b),.1);color:var(--org)}
.prog{background:rgba(255,255,255,.05);border-radius:6px;height:3px;margin-top:14px;overflow:hidden}
.prog-fill{height:100%;border-radius:6px}

/* ─── TABLES ─── */
table{width:100%;border-collapse:collapse;font-size:12px}
th{background:rgba(255,255,255,.02);color:var(--t2);padding:9px 12px;text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:1px;font-weight:700;border-bottom:1px solid var(--bd)}
/* th[scope=row] (a11y : nom de métrique en tableau clé/valeur) doit avoir le
   même rendu qu'un td normal, pas le style de th d'en-tête de colonne. */
th[scope=row]{background:none;font-size:12px;text-transform:none;letter-spacing:0;font-weight:400;border-bottom:1px solid rgba(255,255,255,.04)}
td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--t2);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.03)}

/* pills */
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700}
.z1{background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.12);color:var(--blu)}
.z2{background:rgba(110,211,160,.1);color:#6dd3a0}
.z3{background:rgba(245,158,11,.1);color:var(--yel)}
.z4{background:rgba(var(--org-r),var(--org-g),var(--org-b),.1);color:var(--org)}
.z5{background:rgba(239,68,68,.1);color:var(--red)}

/* ─── NUMBER INPUTS (global) ─── */
input[type=number]{
  background:rgba(0,0,0,.4);border:1.5px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.25);
  color:var(--blu);padding:8px 12px;border-radius:8px;
  font-size:22px;font-weight:800;width:70px;text-align:center;-moz-appearance:textfield;letter-spacing:-1px;font-variant-numeric:tabular-nums
}
input[type=number]::-webkit-inner-spin-button{display:none}
input[type=number]:focus{outline:none;border-color:var(--blu);box-shadow:0 0 0 3px var(--blu2)}

/* ─── ALERTS ─── */
.hl{color:var(--blu);font-weight:600}.hl-g{color:var(--grn);font-weight:600}
.hl-o{color:var(--org);font-weight:600}.hl-y{color:var(--yel)}.hl-r{color:var(--red)}
.tip,.ok{background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.05);border-left:2px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.35);padding:10px 14px;font-size:12px;color:var(--t2);border-radius:0 8px 8px 0;margin-bottom:8px;line-height:1.65}
.warn{background:rgba(var(--org-r),var(--org-g),var(--org-b),.05);border-left:2px solid rgba(var(--org-r),var(--org-g),var(--org-b),.35);padding:10px 14px;font-size:12px;color:var(--t2);border-radius:0 8px 8px 0;margin-bottom:8px;line-height:1.65}
.sep{height:1px;background:var(--bd);margin:18px 0}

/* ─── TRAINING PLAN ACCORDION ─── */
.week-card{border:1px solid var(--bd);border-radius:12px;margin-bottom:6px;overflow:hidden}
.week-hdr{
  background:var(--s2);padding:11px 16px;
  display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;user-select:none;transition:background .15s
}
.week-hdr:hover{background:var(--s3)}
.wn{font-weight:900;color:var(--blu);font-size:13px;margin-right:8px}
.wt{font-size:11px;color:var(--t2)}
.wv{font-size:11px;color:var(--t2)}
.wlr{font-size:11px;color:var(--org);font-weight:700;margin-left:8px}
.wa{color:var(--t3);font-size:10px;transition:transform .2s}
.wb{display:none;border-top:1px solid var(--bd)}
.wb.open{display:block}
.sr{display:flex;gap:10px;padding:9px 16px;border-bottom:1px solid rgba(255,255,255,.03);font-size:12px;align-items:flex-start}
.sr:last-child{border-bottom:none}
.sd{width:28px;color:var(--blu);font-weight:700;flex-shrink:0;padding-top:1px;font-size:11px}
.st{width:88px;flex-shrink:0;padding-top:1px;font-size:11px;font-weight:600}
.si{flex:1;color:var(--t2);line-height:1.55}

/* ─── NOLIO SESSIONS ─── */
.nolio-wk{margin-bottom:10px;scroll-margin-top:64px}
/* En-tête de semaine cliquable (accordéon) */
.nolio-wk-hdr{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:12px 14px;border:1px solid var(--bd);border-radius:10px;
  background:rgba(255,255,255,.02);color:inherit;font-family:inherit;cursor:pointer;
  transition:border-color .15s,background .15s}
.nolio-wk-hdr:hover{border-color:rgba(255,255,255,.13)}
.nolio-wk.cur .nolio-wk-hdr{border-color:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.35);background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.06)}
.nolio-wk-n{font-size:11px;font-weight:700;color:var(--blu);text-transform:uppercase;letter-spacing:.8px}
.nolio-wk-d{font-size:11px;color:var(--t3)}
.nolio-wk-cur{font-size:8.5px;font-weight:700;color:var(--grn);text-transform:uppercase;letter-spacing:.5px;
  background:rgba(74,222,128,.12);padding:2px 7px;border-radius:20px}
.nolio-wk-sum{margin-left:auto;font-size:11px;color:var(--t2);font-weight:600;font-variant-numeric:tabular-nums}
.nolio-wk-chev{width:16px;height:16px;flex-shrink:0;color:var(--t3);
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease}
.nolio-wk.open .nolio-wk-chev{transform:rotate(90deg);color:var(--blu)}
.nolio-wk-body{display:none;padding:12px 2px 4px}
.nolio-wk.open .nolio-wk-body{display:block}
.ns{display:flex;gap:10px;padding:10px 14px;border-radius:10px;margin-bottom:5px;background:rgba(255,255,255,.02);border:1px solid var(--bd);align-items:flex-start;transition:border-color .15s}
.ns:hover{border-color:rgba(255,255,255,.1)}
.ns.today{border-color:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.3);background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.06)}
.ns.past{opacity:.45}
.ns.race{border-color:rgba(var(--org-r),var(--org-g),var(--org-b),.3);background:rgba(var(--org-r),var(--org-g),var(--org-b),.06)}
.ns-wd{width:26px;font-size:11px;font-weight:700;color:var(--blu);flex-shrink:0;padding-top:2px}
.ns-type{width:88px;flex-shrink:0;font-size:11px;font-weight:600;padding-top:2px}
.ns-body{flex:1}
.ns-title{font-size:12px;font-weight:600;color:var(--t1);margin-bottom:2px}
.ns-meta{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}
.ns-chip{font-size:9px;font-weight:600;padding:1px 7px;border-radius:20px;background:rgba(255,255,255,.06);color:var(--t3)}
.ns-cmt{font-size:11px;color:var(--t2);line-height:1.6;margin-top:2px;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ns-cmt.exp{display:block;-webkit-line-clamp:unset}
.ns-date{font-size:10px;color:var(--t3);margin-top:3px}
.ns-actual{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.07)}
.ns-actual-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.ns-chip-done{background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.08) !important;color:var(--grn) !important;border:1px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.18)}
.ns-coach{font-size:11px;padding:5px 10px;margin:2px 0 0;border-radius:6px;line-height:1.5}
.ns-missed{font-size:10px;color:var(--t3);font-style:italic;margin-top:6px;padding:3px 8px}
.nolio-empty{text-align:center;padding:48px 20px;color:var(--t2);font-size:13px}

/* ─── WEIGHT ─── */
.w-range-btn{background:rgba(255,255,255,.05);border:1px solid var(--bd);color:var(--t2);border-radius:6px;padding:3px 9px;font-size:10px;font-family:var(--font);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.w-range-btn.active{background:var(--blu2);color:var(--blu);border-color:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.3)}
.w-entry-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
input[type=date]{background:rgba(0,0,0,.3);border:1.5px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.25);color:var(--t1);padding:7px 10px;border-radius:8px;font-size:12px;font-family:var(--font)}
input[type=date]:focus{outline:none;border-color:var(--blu)}
.btn-add{background:var(--blu);color:#fff;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:var(--font);transition:opacity .15s,transform .1s}
.btn-add:hover{opacity:.85}
.btn-add:active{transform:scale(0.96)}
#w-goal-input{width:60px !important;font-size:18px !important}
#w-entry-val{width:80px}

/* ─── CANVAS ─── */
canvas{display:block;width:100%}

/* ─── DEV PAGE ─── */
.week-plan-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
@media(max-width:900px){.week-plan-grid{grid-template-columns:repeat(2,1fr)}}
.day-card{border-radius:10px;padding:12px;border:1px solid var(--bd);background:var(--s2)}
.day-name{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.day-type{font-size:12px;font-weight:600;color:var(--t1);margin-bottom:4px}
.day-dur{font-size:11px;color:var(--t2)}
.day-goal{font-size:10px;color:var(--t3);margin-top:4px;line-height:1.4}
.day-done{font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;margin-top:6px;display:inline-block}

/* ─── BARRE + MENU MOBILE (cachés sur desktop) ─── */
.m-topbar,.m-menu,.m-menu-backdrop{display:none}
.m-topbar{
  position:fixed;top:0;left:0;right:0;z-index:250;
  height:52px;align-items:center;gap:10px;padding:0 12px;
  background:rgba(7,11,10,.92);border-bottom:1px solid var(--bd);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.m-burger,.m-sync{
  width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bd);border-radius:10px;background:rgba(255,255,255,.03);
  color:var(--t1);cursor:pointer;padding:0
}
.m-burger svg{width:20px;height:20px}
.m-sync{color:var(--blu)}.m-sync svg{width:16px;height:16px}
.m-title{flex:1;font-size:18px;font-weight:700;color:var(--t1);letter-spacing:.8px;text-transform:uppercase}
.m-menu-backdrop{
  position:fixed;inset:0;z-index:260;background:rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .2s
}
.m-menu-backdrop.open{opacity:1;pointer-events:auto}
.m-menu{
  position:fixed;top:0;left:0;z-index:270;
  width:80%;max-width:300px;height:100%;
  flex-direction:column;gap:2px;padding:16px 14px;
  background:var(--s);border-right:1px solid var(--bd);
  box-shadow:4px 0 24px rgba(0,0,0,.5);
  transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);
  overflow-y:auto
}
.m-menu.open{transform:translateX(0)}
.m-menu-sec{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin:14px 8px 4px}
.m-menu-sec:first-child{margin-top:4px}
.m-menu-item{
  display:flex;align-items:center;width:100%;text-align:left;
  padding:12px 14px;border:none;border-radius:10px;background:transparent;
  color:var(--t2);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .12s,color .12s
}
.m-menu-item:hover{background:rgba(255,255,255,.04)}
.m-menu-item.active{background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.12);color:var(--blu)}

/* ─── MOBILE ─── */
@media(max-width:1023px){
  .layout{grid-template-columns:1fr}

  /* Sidebar latérale remplacée par le menu déroulant (bouton en haut à gauche) */
  .sidebar{display:none}
  .m-topbar{display:flex}
  .m-menu{display:flex}
  .m-menu-backdrop{display:block}

  .main{margin-left:0;padding-top:52px;padding-bottom:24px}
  .page{padding:14px 14px 14px}
  .g2,.g3,.g4{grid-template-columns:1fr}
}

/* ─── SAFE AREA (notch) ─── */
@supports(padding: env(safe-area-inset-top)) {
  @media(max-width:1023px) {
    .m-topbar{height:calc(52px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
    .main{padding-top:calc(52px + env(safe-area-inset-top))}
    .m-menu{padding-top:calc(16px + env(safe-area-inset-top))}
  }
}

/* ─── IPHONE 15 PLUS (430px) & PETITS MOBILES ─── */
@media(max-width:480px){

  /* Nav items — Apple HIG 44px touch target */
  .nav-item{min-height:48px;min-width:54px;padding:6px 3px;font-size:8px;border-radius:8px}
  .nav-item svg{width:19px;height:19px}
  .nav-item span{max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

  /* Page */
  .page{padding:12px 12px 12px}
  .page-title{font-size:18px}
  .ch{font-size:10px;margin-bottom:10px;padding-bottom:8px}

  /* Hero card */
  .hero-card{padding:14px;border-radius:14px;margin-bottom:12px}
  .hero-title{font-size:16px}
  .hero-top{gap:6px;margin-bottom:12px}

  /* Metric boxes — 3 par ligne */
  .mrow{gap:5px}
  .mbox{min-width:calc(33.333% - 4px);padding:9px 6px;border-radius:8px}
  .mv{font-size:18px;letter-spacing:-.5px}
  .ml{font-size:8px;letter-spacing:.4px}

  /* Race time */
  .race-time{font-size:38px;letter-spacing:-.5px}
  .race-card{padding:16px 10px 12px}
  .race-pace{font-size:11px}
  .race-chip{font-size:9px;padding:3px 9px}

  /* Load grid — 2 colonnes */
  .load-grid{grid-template-columns:1fr 1fr}
  .load-val{font-size:24px;letter-spacing:-.3px}
  .load-lbl{font-size:8px}

  /* Briefing tiles — 2 colonnes, VFC pleine largeur */
  .brief-grid{grid-template-columns:1fr 1fr}
  .brief-grid > .brief-tile:nth-child(5){grid-column:1/-1}
  .brief-val{font-size:19px}
  .brief-lbl{font-size:8px}
  .brief-sub{font-size:10px}
  .brief-actions{grid-template-columns:1fr}
  .brief-action{font-size:10px;padding:8px 10px}

  /* Cards — scroll horizontal pour tableaux */
  .card{padding:12px;border-radius:12px;margin-bottom:10px;overflow-x:auto}
  .hero-card{box-shadow:0 2px 20px rgba(var(--blu-r),var(--blu-g),var(--blu-b),.06)}

  /* Tables */
  table{font-size:11px}
  th,td{padding:6px 8px;white-space:nowrap}

  /* Week plan — scrollable horizontal via la .card parente */
  .week-plan-grid{
    grid-template-columns:repeat(7,minmax(76px,1fr));
    min-width:560px
  }

  /* Pred cards: 1x1 déjà géré par g4 → 1col */

  /* Nolio sessions */
  .ns{padding:8px 10px}
  .ns-type{width:64px;font-size:10px}
  .ns-wd{width:22px;font-size:10px}
  .ns-title{font-size:11px}

  /* Alerts */
  .tip,.warn,.ok{padding:8px 11px;font-size:11px}

  /* Plan accordion */
  .week-hdr{padding:9px 12px}
  .sr{padding:7px 12px}

  /* Heatmap */
  .hm-sq{width:10px;height:10px}
}

/* ─── iPhone SE / très petits (390px) ─── */
@media(max-width:390px){
  .mbox{min-width:calc(50% - 3px)}
  .mv{font-size:16px}
  .brief-grid{grid-template-columns:1fr 1fr}
  .brief-val{font-size:17px}
  .race-time{font-size:26px}
  .load-val{font-size:18px}
  .page{padding:10px 10px 10px}
}

/* ─── TOAST NOTIFICATIONS ─── */
#toast-container{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:9999;pointer-events:none;
  width:max-content;max-width:calc(100vw - 32px)
}
.toast{
  background:var(--s2);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:10px 16px;font-size:12px;font-weight:600;
  color:var(--t1);display:flex;align-items:center;gap:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.6);pointer-events:auto;
  animation:toast-in .25s cubic-bezier(.34,1.56,.64,1) both
}
.toast.out{animation:toast-out .2s ease-in both}
.toast-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.toast-ok .toast-dot{background:var(--grn)}
.toast-warn .toast-dot{background:var(--org)}
.toast-err .toast-dot{background:var(--red)}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toast-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.95)}}

/* ─── SCROLL TO TOP ─── */
#scroll-top{
  position:fixed;right:16px;bottom:80px;z-index:299;
  width:38px;height:38px;border-radius:50%;
  background:rgba(20,20,20,.9);border:1px solid rgba(255,255,255,.12);
  color:var(--t2);font-size:16px;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.5);transition:opacity .2s,color .15s;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)
}
#scroll-top:hover{color:var(--t1)}
#scroll-top.visible{display:flex;animation:toast-in .2s ease both}
@media(min-width:1024px){#scroll-top{bottom:24px}}

/* ─── NAV FADE INDICATOR (mobile) ─── */
.nav-fade{
  display:none;position:absolute;right:0;top:0;bottom:0;width:36px;
  background:linear-gradient(to right,transparent,var(--s));
  pointer-events:none;z-index:1
}
@media(max-width:1023px){.nav-fade{display:block}}

/* ─── NUTRITION / MACROS ─── */
.m-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;align-items:end;margin-top:10px}
.m-form label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);font-weight:700;display:flex;flex-direction:column;gap:6px}
.m-form input[type=number]{width:100%;font-size:16px;font-weight:700;text-align:left;color:var(--t1);padding:9px 12px;letter-spacing:0}
.m-form select{width:100%;background:rgba(0,0,0,.4);border:1.5px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.25);color:var(--t1);padding:9px 10px;border-radius:8px;font-size:13px;font-family:var(--font);cursor:pointer}
.m-form select:focus{outline:none;border-color:var(--blu);box-shadow:0 0 0 3px var(--blu2)}
.m-form .btn-add{height:38px;align-self:end}
.m-split{display:flex;height:12px;border-radius:7px;overflow:hidden;margin-top:10px;background:var(--bd)}
.m-split>span{height:100%;transition:width .3s}
.m-split-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--t2)}
.m-split-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:middle}
.m-split-legend b{color:var(--t1);font-weight:700}
@media(max-width:480px){.m-form{grid-template-columns:1fr 1fr}.m-form .btn-add{grid-column:1/-1}}
/* Aperçu « copier un jour » — liste cochable */
.food-copy-preview{margin-top:8px}
.copy-prev-list{border:1px solid var(--bd);border-radius:10px;padding:8px 11px;background:rgba(255,255,255,.02)}
.copy-prev-hint{font-size:10px;color:var(--t3);margin-bottom:4px}
.copy-prev-meal{font-size:9px;font-weight:700;color:var(--blu);text-transform:uppercase;letter-spacing:.6px;margin:7px 0 2px}
.copy-prev-row{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:12.5px;color:var(--t1);cursor:pointer}
.copy-prev-chk{width:16px;height:16px;flex-shrink:0;accent-color:var(--blu);cursor:pointer}
.copy-prev-nm{flex:1;line-height:1.3}
.copy-prev-kc{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Anneau kcal consommées / objectif */
.food-ring{width:92px;height:92px;border-radius:50%;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}
.food-ring::before{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--s)}
.food-ring .fr-in{position:relative;z-index:1;text-align:center;line-height:1.15}
.food-ring .fr-pct{font-size:20px;font-weight:900;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.food-ring .fr-lbl{font-size:8.5px;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;margin-top:1px}
.food-quick{display:flex;flex-wrap:wrap;gap:6px}
.food-chip{font-size:11px;border:1px solid var(--bd);border-radius:14px;padding:5px 11px;cursor:pointer;color:var(--t1);transition:.15s;user-select:none}
.food-chip:hover{border-color:var(--blu);color:var(--blu)}
.food-chip:active{transform:scale(.96)}
.food-srow{margin-bottom:11px}
.food-bar{height:8px;border-radius:5px;background:var(--bd);overflow:hidden;margin-top:5px}
.food-bar>span{display:block;height:100%;transition:width .3s}
.food-entry input[type=number]{font-size:14px;font-weight:700;width:70px;padding:7px 9px;text-align:left;color:var(--t1)}
.food-sel,.food-entry input[type=text],#food-search,.food-res input[type=number]{background:rgba(0,0,0,.4);border:1.5px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.25);color:var(--t1);padding:8px 11px;border-radius:8px;font-size:13px;font-family:var(--font)}
.food-sel{padding:6px 10px;font-size:12px;cursor:pointer}
.food-res input[type=number]{padding:6px 8px;font-weight:700}
.food-g-edit{width:52px;background:rgba(0,0,0,.4);border:1.5px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.25);color:var(--t1);padding:3px 5px;border-radius:6px;font-size:12px;font-weight:700;font-family:var(--font)}
.food-sel:focus,#food-search:focus,.food-res input[type=number]:focus,.food-g-edit:focus,.food-entry input:focus{outline:none;border-color:var(--blu)}
.food-meal-hdr{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--blu);font-weight:700;margin:14px 0 2px;padding-bottom:3px;border-bottom:1.5px solid rgba(var(--blu-r),var(--blu-g),var(--blu-b),.25)}
.food-meal-rec{font-size:11px;letter-spacing:0;text-transform:none;color:var(--t2);font-weight:400;white-space:nowrap}
.food-meal-rec b{color:var(--grn);font-weight:700}
.food-res{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--bd);border-radius:8px;margin-bottom:5px;cursor:pointer;font-size:12px;transition:.12s}
.food-res:hover{border-color:var(--blu);background:rgba(var(--blu-r),var(--blu-g),var(--blu-b),.06)}
.food-res .fr-mac{color:var(--t3);font-size:11px;white-space:nowrap}

/* ─── MOBILE : section nutrition + anti-zoom iOS ─── */
@media(max-width:480px){
  /* iOS zoome au focus si la police d'un champ < 16px → on force 16px partout */
  input,select,textarea{font-size:16px}
  /* Saisie manuelle : nom + bouton pleine largeur, kcal/P/G/L se répartissent à parts égales */
  .food-entry{gap:8px}
  .food-entry input[type=text]{flex:1 1 100%;width:auto}
  .food-entry input[type=number]{flex:1 1 0;width:auto;min-width:0;text-align:center}
  .food-entry .btn-add{flex:1 1 100%}
  /* Résultats recherche : nom tronqué, contrôles grammes intacts */
  .food-res{padding:9px;gap:8px}
  .food-res>div:first-child{min-width:0}
  .food-res input[type=number]{width:60px}
  /* Édition grammes dans le journal — assez grand pour le tap */
  .food-g-edit{width:58px;padding:5px 6px}
  /* Récap repas : passe à la ligne si étroit au lieu de déborder */
  .food-meal-hdr{flex-wrap:wrap;gap:2px 8px}
}

/* ─── PROGRESSION ─── */
.prog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
/* .rtoggle/.rtoggle-btn = alias génériques du sélecteur de période, réutilisés
   par les autres onglets (nutrition, muscu…) qui n'avaient chacun aucun
   sélecteur ou en réinventaient un — même look partout. */
.prog-range,.rtoggle{display:inline-flex;background:rgba(0,0,0,.35);border:1px solid var(--bd);border-radius:9px;padding:3px}
.prog-range-btn,.rtoggle-btn{font-family:var(--font);font-size:11px;font-weight:700;color:var(--t2);padding:5px 13px;border-radius:7px;transition:background .15s,color .15s;letter-spacing:.3px}
.prog-range-btn.active,.rtoggle-btn.active{background:var(--blu);color:#061524}
.prog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
/* .dtile = alias générique de la "tuile delta" (valeur + comparaison colorée
   vs période antérieure), réutilisée par insights/bilan/muscu-shoes à la
   place de leurs propres tuiles ad hoc (tile()/kpi()/raceCard() dupliqués). */
.prog-card,.dtile{background:rgba(0,0,0,.28);border:1px solid var(--bd);border-left:3px solid var(--t3);border-radius:10px;padding:12px 13px}
.prog-card.up,.dtile.up{border-left-color:var(--grn)}
.prog-card.down,.dtile.down{border-left-color:var(--org)}
.prog-card.flat,.dtile.flat{border-left-color:var(--t3)}
.prog-lbl,.dtile-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);font-weight:700}
.prog-val,.dtile-val{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;color:var(--t1);letter-spacing:0;line-height:1.15;margin-top:5px}
.prog-d,.dtile-d{font-size:12px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.prog-d.up,.dtile-d.up{color:var(--grn)}
.prog-d.down,.dtile-d.down{color:var(--org)}
.prog-d.flat,.prog-d.muted,.dtile-d.flat,.dtile-d.muted{color:var(--t3);font-weight:600}
.prog-ago,.dtile-ago{font-size:9.5px;color:var(--t3);margin-top:3px}
.prog-verdict{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--bd)}
.prog-col-h{font-size:11px;font-weight:800;letter-spacing:.4px;margin-bottom:8px}
.prog-col-h.up{color:var(--grn)}
.prog-col-h.down{color:var(--org)}
.prog-tags{display:flex;flex-wrap:wrap;gap:6px}
.prog-tag{font-size:11px;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:7px;padding:4px 9px}
.prog-tag b{color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums}
.muted{color:var(--t3)}
@media(max-width:560px){.prog-verdict{grid-template-columns:1fr}}

/* ─── PASSE VISUELLE DESKTOP — respiration + hiérarchie ─────────────────────
   Scopée à >900px (au-dessus du breakpoint mobile) pour ne pas retoucher les
   tailles déjà calées finement pour petits écrans (480px/390px plus haut).
   Objectif : plus d'air entre les blocs, des chiffres clés plus affirmés,
   des cartes qui se détachent mieux du fond — sans changer les teintes
   --blu/--org (utilisées dans ~40 règles) ni la structure des composants. */
@media(min-width:901px){
  .page{padding:var(--sp-6) 40px}
  .card{padding:22px 24px;margin-bottom:var(--sp-5)}
  .card-glow-blue{box-shadow:var(--card-sh),0 0 56px rgba(var(--blu-r),var(--blu-g),var(--blu-b),.08)}
  .card-glow-orange{box-shadow:var(--card-sh),0 0 56px rgba(var(--org-r),var(--org-g),var(--org-b),.08)}
  .page-title{font-size:29px;letter-spacing:1.4px}
  .page-sub{font-size:12.5px}
  .hero-card{padding:28px 28px 26px}
  .hero-title{font-size:26px}
  .mv{font-size:33px}
  .stat-value{font-size:17px}
  .brief-val{font-size:26px}
  .load-val{font-size:34px}
}