/* Carnet — saison AMPL 2027. Garage sombre, plaque claire. */
@font-face{
  font-family:Archivo; font-style:normal; font-weight:400 800;
  font-display:swap; src:url('fonts/archivo.woff2') format('woff2');
}
:root{
  --loam:#14110E; --iron:#211C17; --iron-hi:#2C251E;
  --plate:#FAFAF7; --numeral:#14110E;
  --red:#C8342B; --pine:#5C7A52; --sand:#C09A5B;
  --dim:#8B8177; --line:#332B23;
  --gut:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--loam); color:var(--plate);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-variation-settings:'wght' 400;
  line-height:1.45; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
  overscroll-behavior-y:none;
}

/* ─── Barrière de départ : les 26 semaines ─────────────────── */
.gate-wrap{
  position:sticky; top:0; z-index:20; background:var(--loam);
  border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) var(--gut) 11px;
}
.gate-meta{display:flex; align-items:baseline; gap:9px; margin-bottom:9px}
.gate-week{font-variation-settings:'wght' 800; font-size:19px; letter-spacing:-.015em}
.gate-phase{font-size:13px; color:var(--dim); font-variation-settings:'wght' 500}
.gate-count{margin-left:auto; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums}
.gate{display:flex; gap:3px; align-items:flex-end; height:26px}
.slot{
  flex:1; height:16px; border-radius:1px;
  background:var(--iron-hi); border:1px solid transparent;
  transition:height .18s ease, background .18s ease;
}
.slot.is-done{background:var(--plate)}
.slot.is-part{background:linear-gradient(to top,var(--plate) 50%,var(--iron-hi) 50%)}
.slot.is-deload{background:transparent; border-color:var(--sand)}
.slot.is-deload.is-done{background:var(--sand); border-color:var(--sand)}
.slot.is-now{background:var(--red); height:26px}
.gate-flag{
  width:13px; height:26px; flex:none; margin-left:5px; border-radius:1px;
  background-color:var(--plate);
  background-image:
    linear-gradient(45deg,var(--numeral) 25%,transparent 25%,transparent 75%,var(--numeral) 75%),
    linear-gradient(45deg,var(--numeral) 25%,transparent 25%,transparent 75%,var(--numeral) 75%);
  background-size:8px 8px; background-position:0 0,4px 4px;
}

/* ─── Corps ────────────────────────────────────────────────── */
.wrap{padding:var(--gut); max-width:640px; margin:0 auto}
.eyebrow{font-size:12px; color:var(--dim); font-variation-settings:'wght' 600; margin-bottom:3px}
.daystamp{font-size:15px; color:var(--dim); font-variation-settings:'wght' 500; margin-bottom:15px}
.daystamp .today-red{color:var(--red)}

/* La plaque : la séance du jour */
.plate{
  background:var(--plate); color:var(--numeral);
  border-radius:3px; padding:19px 18px; margin-bottom:13px;
}
.plate-kind{
  font-size:12px; font-variation-settings:'wght' 700;
  color:#6E655C; margin-bottom:7px;
}
.plate-kind.k-repos{color:#6B635A}
.plate-title{
  font-size:27px; line-height:1.12; letter-spacing:-.025em;
  font-variation-settings:'wght' 800; margin-bottom:9px;
}
.plate-sub{font-size:14px; color:#5C544B; font-variation-settings:'wght' 500}
.plate-charge{
  margin-top:11px; padding-top:11px; border-top:1px solid #E2DFD6;
  font-size:13px; color:#5C544B;
}
.exos{margin-top:14px; border-top:1px solid #E2DFD6}
.exo{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid #EFECE4; font-size:15px;
}
.exo:last-child{border-bottom:0}
.exo-r{color:#5C544B; font-variant-numeric:tabular-nums; text-align:right; flex:none}

/* Actions */
.acts{display:flex; gap:9px; margin-bottom:22px}
.btn{
  flex:1; padding:15px 12px; border:1px solid var(--line); border-radius:3px;
  background:var(--iron); color:var(--plate); font:inherit; font-size:15px;
  font-variation-settings:'wght' 600; cursor:pointer; text-align:center;
  transition:background .14s ease, border-color .14s ease;
}
.btn:active{background:var(--iron-hi)}
.btn.is-on{background:var(--pine); border-color:var(--pine); color:#0E1A0B}
.btn.is-skip.is-on{background:var(--iron-hi); border-color:var(--dim); color:var(--dim)}
.btn:focus-visible{outline:2px solid var(--plate); outline-offset:2px}

.rpe{margin-bottom:22px}
.rpe-lab{font-size:13px; color:var(--dim); margin-bottom:8px}
.rpe-row{display:flex; gap:4px}
.rpe-b{
  flex:1; aspect-ratio:1; border:1px solid var(--line); border-radius:2px;
  background:var(--iron); color:var(--dim); font:inherit; font-size:14px;
  font-variation-settings:'wght' 600; cursor:pointer; font-variant-numeric:tabular-nums;
}
.rpe-b.is-on{background:var(--plate); color:var(--numeral); border-color:var(--plate)}
.rpe-b:focus-visible{outline:2px solid var(--plate); outline-offset:1px}

/* Listes de séances */
.sect{margin-bottom:26px}
.sect-h{
  font-size:13px; color:var(--dim); font-variation-settings:'wght' 600;
  padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:2px;
}
.row{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 0; border-bottom:1px solid var(--line);
  background:none; border-left:0; border-right:0; border-top:0;
  color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.row-day{
  width:30px; flex:none; font-size:12px; color:var(--dim);
  font-variation-settings:'wght' 700;
}
.row-day.is-now{color:var(--red)}
.row-body{flex:1; min-width:0}
.row-t{display:block; font-size:15px; font-variation-settings:'wght' 500; line-height:1.3}
.row-m{display:block; font-size:12px; color:var(--dim); margin-top:2px}
.row.is-done .row-t{color:var(--dim)}
.row-mark{
  width:9px; height:9px; flex:none; border-radius:50%;
  border:1px solid var(--line);
}
.row.is-done .row-mark{background:var(--pine); border-color:var(--pine)}
.row.is-skip .row-mark{background:var(--iron-hi); border-color:var(--dim)}

/* Charge */
.stats{display:flex; gap:9px; margin-bottom:22px}
.stat{flex:1; background:var(--iron); border-radius:3px; padding:14px 13px}
.stat-n{
  font-size:26px; font-variation-settings:'wght' 800;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1;
}
.stat-n.is-warn{color:var(--sand)}
.stat-n.is-alert{color:var(--red)}
.stat-l{font-size:12px; color:var(--dim); margin-top:6px; line-height:1.3}
.chart{display:flex; align-items:flex-end; gap:3px; height:104px; margin-bottom:9px}
.bar{flex:1; background:var(--iron-hi); border-radius:1px 1px 0 0; min-height:3px}
.bar.is-now{min-height:8px}
.bar.is-done{background:var(--plate)}
.bar.is-deload{background:var(--sand)}
.bar.is-now{background:var(--red)}
.chart-l{display:flex; justify-content:space-between; font-size:11px; color:var(--dim)}

.note{
  background:var(--iron); border-left:2px solid var(--sand);
  border-radius:0 3px 3px 0; padding:13px 14px; font-size:14px;
  color:#C4BBB0; margin-bottom:22px; line-height:1.5;
}
.note b{color:var(--plate); font-variation-settings:'wght' 600}
.prose{padding:13px 0; font-size:14px; color:#C4BBB0; line-height:1.55}
.rules{list-style:none}
.rules li{padding:12px 0; border-bottom:1px solid var(--line); font-size:14px}
.rules b{display:block; font-variation-settings:'wght' 600; margin-bottom:3px}
.rules span{color:var(--dim)}
.zone{
  display:flex; justify-content:space-between; padding:11px 0;
  border-bottom:1px solid var(--line); font-size:14px;
}
.zone-v{font-variant-numeric:tabular-nums; color:var(--dim)}

/* Navigation */
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
  background:var(--iron); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-b{
  flex:1; padding:15px 6px 14px; background:none; border:0; cursor:pointer;
  color:var(--dim); font:inherit; font-size:13px; font-variation-settings:'wght' 600;
  border-top:2px solid transparent; margin-top:-1px;
}
.nav-b.is-on{color:var(--plate); border-top-color:var(--red)}
.nav-b:focus-visible{outline:2px solid var(--plate); outline-offset:-4px}

.hide{display:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.next{margin-bottom:24px}
.next-h{
  font-size:13px; color:var(--dim); font-variation-settings:'wght' 600;
  padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:0;
}
.empty{
  border:1px dashed var(--line); border-radius:3px; padding:22px 18px;
  text-align:left; color:var(--dim); font-size:14px; line-height:1.55;
}
.empty b{display:block; color:var(--plate); font-variation-settings:'wght' 600;
  font-size:16px; margin-bottom:6px}

.zone{align-items:flex-start}
.zone-note{display:block; font-size:12px; color:var(--dim); margin-top:2px;
  font-variation-settings:'wght' 400}

/* ─── Créneau week-end : la moto se pose samedi ou dimanche ── */
.wk{margin:26px 0 4px}
.wk-h{
  font-size:13px; color:var(--dim); font-variation-settings:'wght' 600;
  padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:14px;
}
.flex-h{font-size:13px; color:var(--dim); margin-bottom:8px}
.acts + .acts{margin-top:-13px}
.row-open{padding:4px 0 14px}
.row.is-static{cursor:default}
.row-day{width:30px}
.row-day.is-wk{color:var(--sand)}
.row.is-done .row-day.is-wk{color:var(--dim)}

/* ─── UX : repos discret, exercices cochables, cibles au pouce ── */

/* Un jour de repos ne doit pas ressembler a une tache a accomplir */
.plate.is-rest{background:var(--iron); color:var(--plate); box-shadow:none}
.plate.is-rest .plate-title{font-size:21px; color:var(--dim)}
.plate.is-rest .plate-kind{color:var(--dim)}
.plate.is-soft{background:#EDEAE1}
.row.is-rest{opacity:.42; padding:10px 0; cursor:default}
.row.is-rest .row-t{font-size:14px}

.btn.is-soft{background:transparent; border-style:dashed; color:var(--dim)}
.btn.is-soft.is-on{background:var(--pine); border-style:solid; border-color:var(--pine); color:#0E1A0B}

/* Exercices : cibles pleine largeur, cochables d'un pouce */
.exo{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:12px 0; border:0; border-bottom:1px solid #EFECE4;
  background:none; font:inherit; font-size:15px; color:var(--numeral);
  text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.exo:last-child{border-bottom:0}
.exo-box{
  width:21px; height:21px; flex:none; border-radius:4px;
  border:1.5px solid #C9C4B8; background:transparent; position:relative;
}
.exo.is-on .exo-box{background:var(--pine); border-color:var(--pine)}
.exo.is-on .exo-box::after{
  content:''; position:absolute; left:6px; top:2px; width:6px; height:11px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.exo-n{flex:1; min-width:0}
.exo.is-on .exo-n{color:#9C958A; text-decoration:line-through}
.exo:focus-visible{outline:2px solid var(--numeral); outline-offset:2px}

/* La note se tape en salle : 10 cibles de 31 px etaient trop petites */
.rpe-row{display:grid; grid-template-columns:repeat(5,1fr); gap:7px}
.rpe-b{aspect-ratio:auto; height:46px; font-size:16px}

/* Progression de la semaine */
.prog{display:flex; align-items:center; gap:11px; margin-bottom:18px}
.prog-bar{flex:1; height:5px; background:var(--iron-hi); border-radius:3px; overflow:hidden}
.prog-bar i{display:block; height:100%; background:var(--pine); border-radius:3px}
.prog-n{font-size:13px; color:var(--dim); font-variant-numeric:tabular-nums; flex:none}

/* La barriere devient un selecteur de semaine */
.slot{padding:0; -webkit-tap-highlight-color:transparent}
.slot.is-vue{outline:1.5px solid var(--plate); outline-offset:1px}
.slot:focus-visible{outline:2px solid var(--plate); outline-offset:2px}
.gate-back{
  margin-left:auto; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:12px; color:var(--red);
  font-variation-settings:'wght' 600;
}