/* =================================================================
   Backyard - feuille de style
   Identite : tableau de bord "donnees sportives". Barlow Semi Condensed
   pour titres & chiffres, Inter pour le texte. Accent ember discipline.
   Signatures : bandeau microcycle J1-J6 + grille de regularite.
   ================================================================= */

:root{
  --paper:#F4F5F7;
  --card:#FFFFFF;
  --ink:#16181D;
  --ink-soft:#3A4048;
  --muted:#6B7280;
  --line:#E7E9EE;
  --line-strong:#D9DDE4;
  --ember:#E4572E;
  --ember-600:#C8431F;
  --ember-tint:#FCEAE3;
  --steel:#2F6E8E;
  --steel-tint:#E7F0F5;
  --good:#1F9D6B;
  --good-tint:#E3F5EC;
  --warn:#B8860B;
  --r:16px;
  --r-lg:20px;
  --sh-sm:0 1px 2px rgba(16,18,24,.04), 0 1px 6px rgba(16,18,24,.03);
  --sh:0 1px 2px rgba(16,18,24,.04), 0 4px 12px rgba(16,18,24,.05), 0 16px 32px rgba(16,18,24,.05);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{overflow-x:hidden}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--steel);text-decoration:none}
a:hover{text-decoration:underline}
.num{font-family:'Barlow Semi Condensed',sans-serif;font-variant-numeric:tabular-nums}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:30;background:var(--ink);border-bottom:2px solid var(--ember)}
.topbar .wrap{display:flex;align-items:center;gap:14px;justify-content:space-between;padding-top:12px;padding-bottom:12px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:1.1rem;color:#fff}
.brand:hover{text-decoration:none}
.brand .logo{height:22px;width:auto;display:block;flex:0 0 auto}
.brand b{color:var(--ember)}
.nav{display:flex;gap:2px;flex-wrap:wrap}
.nav a{color:#C2C8D2;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:500;padding:8px 11px;border-radius:9px}
.nav a:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff}
.nav a.actif{color:#fff;background:rgba(228,87,46,.24)}

.wrap{max-width:900px;margin:0 auto;padding:20px 16px 0}

/* ---------- type ---------- */
.eyebrow{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--ember);font-weight:600;margin:0 0 6px}
h1{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:2rem;line-height:1.1;margin:.1em 0 .35em;letter-spacing:.005em}
h2{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:1.3rem;margin:1.6em 0 .6em;letter-spacing:.01em}
h3{font-size:1rem;font-weight:600;margin:1.1em 0 .4em}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);padding:18px;margin:0 0 16px}
.card.hero{box-shadow:var(--sh);border-color:var(--line-strong)}
.card-titre{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- badges ---------- */
.badge{display:inline-block;font-family:'Barlow Semi Condensed',sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:#EEF1F5;color:var(--muted);border:1px solid var(--line)}
.badge.charge{background:var(--ember-tint);color:#A23417;border-color:#F4CFC1}
.badge.deload{background:var(--steel-tint);color:#1F5D7A;border-color:#CFE2EC}
.badge.affutage{background:#FBF1D2;color:#8A6D12;border-color:#EFE0A6}
.badge.precharge{background:var(--good-tint);color:#2C6B4C;border-color:#CFE4D6}
.badge.course{background:var(--ink);color:#fff;border-color:var(--ink)}
.badge.fait{background:var(--good-tint);color:#1A7A52;border-color:#C2E7D4}

/* ---------- microstrip (signature 1) ---------- */
.microstrip{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 6px}
.garde-blk{flex:0 0 auto;width:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;background:repeating-linear-gradient(45deg,#ECEEF2,#ECEEF2 7px,#E4E7ED 7px,#E4E7ED 14px);border:1px solid var(--line);color:var(--muted);padding:8px 4px;min-height:76px}
.garde-blk .g-lib{font-size:.56rem;text-transform:uppercase;letter-spacing:.08em}
.garde-blk .g-day{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:1rem;color:var(--ink-soft)}
.day{flex:1 1 132px;min-width:116px;appearance:none;font:inherit;text-align:center;border:1px solid var(--line);border-radius:12px;padding:10px 8px;background:#FBFCFD;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:76px}
.day .lib{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.02em}
.day .sous{font-size:.72rem;color:var(--muted);line-height:1.25}
button.day{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .08s}
button.day:hover{border-color:var(--line-strong);box-shadow:var(--sh-sm)}
button.day:active{transform:translateY(1px)}
.day.fait{border-color:#C2E7D4;background:var(--good-tint)}
.day .tick{color:var(--good);font-weight:700}
.day.active{border-color:var(--ember);box-shadow:0 0 0 3px var(--ember-tint)}
.day:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.legende{font-size:.8rem;color:var(--muted);margin:2px 0 0}

/* ---------- panneau seance (dans le dashboard) ---------- */
.seance-view{display:none}
.seance-view.actif{display:block}
.seance-view .head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kicker{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--ember);font-weight:600}

/* ---------- liste d'etapes ---------- */
.steps{list-style:none;margin:8px 0 0;padding:0}
.steps li{padding:11px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}
.steps li:last-child{border-bottom:0}
.steps li.sub{padding-left:16px;border-left:3px solid var(--ember-tint);margin-left:2px}
.steps .ph{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;min-width:118px;text-transform:uppercase;font-size:.8rem;letter-spacing:.04em;color:var(--ink-soft)}
.steps .det{flex:1}
.steps .cible{color:var(--steel);font-weight:600}

/* ---------- boutons ---------- */
.btn{display:inline-block;cursor:pointer;border:1px solid var(--line-strong);background:#fff;color:var(--ink);font-weight:600;font-size:.92rem;padding:10px 15px;border-radius:11px;text-align:center;transition:background .12s,border-color .12s}
.btn:hover{text-decoration:none;border-color:#C2C8D2;background:#FAFBFC}
.btn.primary{background:var(--ember);border-color:var(--ember);color:#fff}
.btn.primary:hover{background:var(--ember-600);border-color:var(--ember-600)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--steel)}
.btn.block{display:block;width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}

/* ---------- formulaires ---------- */
label{display:block;font-weight:600;font-size:.85rem;margin:14px 0 5px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:11px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:var(--ember)}
textarea{min-height:120px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}
.grid2{display:grid;grid-template-columns:1fr;gap:0 16px}
.alert{padding:11px 13px;border-radius:11px;margin:0 0 14px;font-size:.9rem}
.alert.err{background:#FDECEA;color:#9B261A;border:1px solid #F5C6BF}
.alert.ok{background:var(--good-tint);color:#1A7A52;border:1px solid #C2E7D4}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line)}
th{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;font-size:.74rem;letter-spacing:.05em;color:var(--muted);font-weight:600}
td .num{font-size:.95rem}

/* ---------- toggle segmente ---------- */
.seg{display:inline-flex;background:#EDEFF3;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;font-weight:600;font-size:.85rem;color:var(--muted);padding:7px 16px;border-radius:999px;transition:background .12s,color .12s}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.seg button:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-sm)}
.kpi .v{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:1.9rem;line-height:1;letter-spacing:.01em}
.kpi .l{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:4px}
.kpi .v.ember{color:var(--ember)} .kpi .v.good{color:var(--good)} .kpi .v.steel{color:var(--steel)}

/* ---------- charts ---------- */
.chart-card{padding:18px 16px 8px}
.chart-card h2{margin-top:.2em}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.chart-card canvas{width:100%!important}

footer{color:var(--muted);font-size:.8rem;text-align:center;padding:28px 16px 44px}

/* ---------- responsive ---------- */
@media (min-width:640px){
  .grid2{grid-template-columns:1fr 1fr}
  h1{font-size:2.3rem}
  .wrap{padding-top:24px}
}
@media (max-width:520px){
  .kpis{gap:8px}
  .kpi{padding:12px}
  .kpi .v{font-size:1.5rem}
  .steps .ph{min-width:96px;font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- compte a rebours ---------- */
.countdown{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:var(--r);padding:12px 16px;margin:0 0 16px;border-left:4px solid var(--ember)}
.countdown .jminus{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:1.5rem;color:var(--ember);letter-spacing:.02em;line-height:1}
.countdown .course{font-size:.85rem;color:#C2C8D2;text-transform:uppercase;letter-spacing:.07em}

/* ---------- seance sautee ---------- */
.day.saute{border-color:#E5C4BB;background:#FBF1EE;color:var(--muted)}
.day .cross{color:#B8503A;font-weight:700}
.badge.saute{background:#FBF1EE;color:#A2442F;border-color:#EFD2C9}

/* ---------- journal : actions + commentaires ---------- */
.row-actions{white-space:nowrap;text-align:right}
.mini{display:inline-block;appearance:none;border:1px solid var(--line-strong);background:#fff;color:var(--ink-soft);border-radius:8px;font-size:.85rem;line-height:1;padding:5px 8px;cursor:pointer;text-decoration:none}
.mini:hover{border-color:#C2C8D2;text-decoration:none;background:#FAFBFC}
.mini.danger{color:#A2442F}
.mini.danger:hover{border-color:#E5C4BB;background:#FBF1EE}
tr.has-com td{border-bottom:0}
tr.com td{padding-top:0;color:var(--muted)}

/* ---------- jalons & records ---------- */
.kpis.jalons{grid-template-columns:repeat(4,1fr);margin:0 0 14px}
.kpis.jalons .v{font-size:1.35rem}
.kpis.jalons .l{font-size:.66rem}
@media (max-width:640px){.kpis.jalons{grid-template-columns:1fr 1fr}}

/* ---------- rangee de stats de seance (duree / difficulte / FC) ---------- */
.stat-row{display:flex;gap:0;border:1px solid var(--line);border-radius:12px;background:#FBFCFD;margin:12px 0 2px;overflow:hidden}
.stat{flex:1;padding:10px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.stat + .stat{border-left:1px solid var(--line)}
.stat .sl{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .sv{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:1.25rem;line-height:1.15}
.bolts{display:inline-flex;gap:2px;align-items:center}
.bolts .bolt{width:11px;height:15px;fill:#D8DCE3}
.bolts .bolt.on{fill:var(--ember)}

/* ---------- duree estimee sur les tuiles ---------- */
.day .tdur{font-size:.68rem;color:var(--ink-soft);font-weight:600;margin-top:1px}
.day.garde .tdur{display:none}

/* ---------- carte Regularite : grille waffle ---------- */
.reg-hero{margin:0 0 10px}
.reg-hero .pct{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:2.6rem;line-height:1;letter-spacing:.01em}
.waffle{display:grid;gap:3px;align-items:stretch;grid-template-columns:30px repeat(var(--wf-n,21),1fr)}
@media (max-width:560px){
  /* version compacte : cases sans bordure, gouttieres nettes, rangees aerees */
  .waffle{gap:5px 3px;grid-template-columns:20px repeat(var(--wf-n,21),1fr)}
  .waffle .wf-cell{border-radius:2.5px;border:none;aspect-ratio:auto;height:15px}
  .waffle .wf-cell.future{background:#fff;box-shadow:inset 0 0 0 1px #E2E5EB}
  .waffle .wf-cell.due{box-shadow:none}
  .wf-lab{font-size:.6rem;justify-content:flex-start}
}
.wf-lab{font-size:.66rem;color:var(--muted);display:flex;align-items:center;font-weight:600}
.wf-cell{display:block;aspect-ratio:1/1;border-radius:4px;background:#F1F3F6;border:1px solid #E7E9EE;min-width:0}
.wf-cell.faite{background:var(--ember);border-color:var(--ember)}
.wf-cell.sautee{background:#F3CDC2;border-color:#EDBBAD}
.wf-cell.due{background:#E2E6EC;border-color:#D8DDE5}
.wf-cell.future{background:#FFFFFF;border-color:var(--line)}
.wf-cell.opt.due,.wf-cell.opt.future{opacity:.55}
.waffle-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:.78rem;color:var(--muted)}
.waffle-legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px;border:1px solid var(--line)}
.waffle-legend .sw.faite{background:var(--ember);border-color:var(--ember)}
.waffle-legend .sw.sautee{background:#F3CDC2}
.waffle-legend .sw.due{background:#E2E6EC}
.waffle-legend .sw.future{background:#fff}

/* ---------- navigation microcycle (responsive) ---------- */
.nav-mc{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav-mc-sel{display:flex;align-items:center;gap:6px;margin:0;flex:1;justify-content:center;min-width:0}
.nav-mc-sel select{width:auto;max-width:100%;padding:7px 10px}
.nav-mc .nav-prev{order:-1}
@media (max-width:560px){
  .nav-mc-sel{flex-basis:100%;order:-2}
  .nav-mc .nav-prev,.nav-mc .nav-next{flex:1;text-align:center;white-space:nowrap}
}

/* =================================================================
   POLISH - raffinement visuel global (sobre, leger, stable).
   Cette couche ne change aucune structure : uniquement l'execution.
   ================================================================= */

::selection{background:var(--ember-tint);color:var(--ember-600)}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:4px}

/* --- topbar : encre translucide + filet ember en degrade --- */
.topbar{
  background:rgba(20,22,27,.94);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 -2px 0 0 transparent;
  position:sticky;
}
.topbar::after{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--ember) 0%,var(--ember) 38%,rgba(228,87,46,.25) 70%,transparent 100%)}
.nav a{transition:background .14s,color .14s}
.nav a.actif{background:rgba(228,87,46,.22);box-shadow:inset 0 0 0 1px rgba(228,87,46,.35)}

/* --- eyebrow : petit tiret ember (marqueur de section) --- */
.eyebrow{display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:16px;height:2px;background:var(--ember);border-radius:2px;flex:0 0 auto}

/* --- cartes : bord fin, ombre etagee, coins doux --- */
.card{border-radius:var(--r);border-color:#E3E6EC;transition:box-shadow .18s}
.card.hero{border-color:#DDE1E8}

/* --- boutons : micro-interactions discretes --- */
.btn{transition:background .14s,border-color .14s,box-shadow .14s,transform .1s}
.btn:hover{box-shadow:var(--sh-sm)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(180deg,#EA6035 0%,var(--ember) 55%,var(--ember-600) 100%);
  border-color:var(--ember-600);
  box-shadow:0 1px 2px rgba(200,67,31,.25), 0 4px 10px rgba(228,87,46,.18);
}
.btn.primary:hover{background:linear-gradient(180deg,var(--ember) 0%,var(--ember-600) 100%);box-shadow:0 2px 6px rgba(200,67,31,.3)}

/* --- tuiles du bandeau : survol et etat actif plus nets --- */
button.day{transition:border-color .14s,box-shadow .14s,transform .1s,background .14s}
button.day:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(16,18,24,.07)}
.day.active{border-color:var(--ember);box-shadow:0 0 0 3px var(--ember-tint), 0 2px 8px rgba(228,87,46,.12)}
.garde-blk{color:#9AA1AC}

/* --- compte a rebours : halo ember + filigrane infini --- */
.countdown{
  position:relative;overflow:hidden;
  background:
    radial-gradient(420px 140px at 12% 50%, rgba(228,87,46,.22), transparent 65%),
    var(--ink);
  border-left:0;border-radius:var(--r);
  padding:14px 18px;
}
.countdown::before{content:"";position:absolute;inset:0 0 0 auto;width:150px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M20 12 C20 6.5 12 6.5 9 12 C6 17.5 14 17.5 20 12' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' opacity='.07'/%3E%3Cpath d='M20 12 C20 17.5 28 17.5 31 12 C34 6.5 26 6.5 20 12' fill='none' stroke='%23E4572E' stroke-width='3.2' stroke-linecap='round' opacity='.16'/%3E%3C/svg%3E") right -14px center / 150px auto no-repeat;
  pointer-events:none;
}
.countdown .jminus{font-size:1.65rem;text-shadow:0 1px 0 rgba(0,0,0,.3)}

/* --- KPI : chiffres qui respirent --- */
.kpi{transition:box-shadow .18s}
.kpi .v{letter-spacing:0}
.kpi .l{margin-top:5px}

/* --- rangee de stats seance : fond plus doux --- */
.stat-row{background:linear-gradient(180deg,#FCFDFE,#F8FAFB);border-color:#E3E6EC}

/* --- tables : lecture ligne a ligne --- */
tbody tr{transition:background .12s}
tbody tr:hover{background:#FAFBFC}
tr.com:hover, tr.com{background:transparent}
th{padding-bottom:7px}

/* --- formulaires : focus doux, fonds legers --- */
input,select,textarea{background:#FCFDFE;transition:border-color .14s,box-shadow .14s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px var(--ember-tint)}

/* --- badges : verticalement stables --- */
.badge{line-height:1.5}

/* --- footer : discret, signe --- */
footer{padding-top:34px}
footer::before{content:"";display:block;margin:0 auto 12px;width:34px;height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M20 12 C20 6.5 12 6.5 9 12 C6 17.5 14 17.5 20 12' fill='none' stroke='%23C6CBD4' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M20 12 C20 17.5 28 17.5 31 12 C34 6.5 26 6.5 20 12' fill='none' stroke='%23E4572E' stroke-width='3.2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- mobile : rien ne bouge, tout respire un peu plus --- */
@media (max-width:560px){
  .card{padding:16px}
  .countdown::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .btn,button.day,.card,.kpi,tbody tr,input,select,textarea,.nav a{transition:none}
}

/* ---------- topbar mobile : marque + onglets sur une ligne balayable ---------- */
@media (max-width:720px){
  .topbar .wrap{flex-direction:column;align-items:stretch;gap:6px;padding-top:10px;padding-bottom:8px}
  .brand{justify-content:flex-start}
  .nav{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -16px;padding:0 16px 2px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 26px),transparent 100%);
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;flex:0 0 auto;font-size:.74rem;padding:7px 10px}
}