/* MY/RIDER — composants partagés. Toutes les valeurs viennent des tokens. */
body{margin:0;font-family:var(--font-sans);color:var(--graphite);background:var(--light);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.mr-pad{padding:var(--space-5)}
.mr-row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.mr-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Boutons */
.mr-btn{font:inherit;font-weight:700;font-size:15px;line-height:1.2;border-radius:var(--radius-control);padding:11px 18px;border:1px solid transparent;cursor:pointer;white-space:nowrap;min-height:var(--touch-target)}
.mr-btn--primary{background:var(--orange);color:var(--on-orange)}
.mr-btn--secondary{background:var(--surface);color:var(--graphite);border-color:var(--control-border)}
.mr-btn--link{background:none;color:var(--ink-2);padding:0 var(--space-1);min-height:0;text-decoration:underline;text-underline-offset:3px}
.mr-btn--sm{font-size:14px;padding:8px 14px;min-height:36px}
.mr-btn--block{display:block;width:100%;font-size:16px;padding:14px}
.mr-btn:disabled{opacity:.45;cursor:not-allowed}

/* Pastilles d'état */
.mr-pill{display:inline-flex;align-items:center;font-size:13px;font-weight:700;line-height:1.3;border-radius:var(--radius-pill);padding:4px 10px;white-space:nowrap}
.mr-pill--late{background:var(--orange);color:var(--on-orange)}
.mr-pill--soon{background:var(--orange-soft);color:var(--orange-ink)}
.mr-pill--ok{background:var(--light);color:var(--ink-3);border:1px solid var(--line)}
.mr-pill--watch{background:var(--surface);color:var(--ink-2);border:1px dashed var(--control-border)}
.mr-pill--profile{background:var(--graphite);color:var(--on-graphite)}

/* Carte jauge */
.mr-gauge{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:18px var(--space-5)}
.mr-gauge__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.mr-gauge__name{font-weight:700;font-size:17px}
.mr-gauge__value{font-weight:800;font-size:17px;white-space:nowrap}
.mr-gauge__sub{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-top:2px;font-size:14px;color:var(--ink-3)}
.mr-bar{height:var(--gauge-height);border-radius:var(--radius-pill);background:var(--track);margin:var(--space-3) 0 14px;overflow:hidden}
.mr-bar i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--ink-4)}
.mr-bar--soon i{background:var(--orange-mid)}
.mr-bar--late i{background:var(--orange)}
.mr-bar--unknown{background:repeating-linear-gradient(90deg,var(--track) 0 6px,var(--surface) 6px 10px)}
.mr-bar--unknown i{display:none}
.mr-gauge__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.mr-when{font-size:14px;font-weight:700;color:var(--ink-3)}
.mr-when--alert{color:var(--orange-ink)}

/* Ligne d'heures */
.mr-hourline{position:relative;height:100px;margin:var(--space-6) var(--space-2) 0}
.mr-hourline__track{position:absolute;left:0;right:0;top:44px;height:var(--track-height);border-radius:var(--radius-pill);background:var(--track)}
.mr-hourline__done{position:absolute;left:0;top:44px;height:var(--track-height);border-radius:var(--radius-pill);background:var(--graphite)}
.mr-hourline__band{position:absolute;top:40px;height:12px;border-radius:6px;background:var(--orange-soft)}
.mr-hourline__tick{position:absolute;top:0;font-size:13px;font-weight:600;color:var(--ink-3);white-space:nowrap;transform:translateX(-50%)}
.mr-hourline__now{position:absolute;top:28px;width:2px;height:28px;background:var(--graphite)}
.mr-hourline__now span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:800;white-space:nowrap;background:var(--graphite);color:var(--on-graphite);border-radius:6px;padding:2px 7px}
.mr-hourline__pt{position:absolute;top:40px;transform:translateX(-50%);text-align:center}
.mr-hourline__pt i{display:block;width:12px;height:12px;border-radius:50%;margin:0 auto;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--ink-4);background:var(--ink-4)}
.mr-hourline__pt--soon i{background:var(--orange-mid);box-shadow:0 0 0 1px var(--orange-mid)}
.mr-hourline__pt--late i{background:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.mr-hourline__label{position:absolute;top:60px;transform:translateX(-50%);text-align:center;white-space:nowrap}
.mr-hourline__label b{display:block;font-size:13px;font-weight:700}
.mr-hourline__label--alert b{color:var(--orange-ink)}
.mr-hourline__label em{display:block;font-style:normal;font-size:13px;color:var(--ink-3)}

/* Ruban de saison */
.mr-ribbon{position:relative;height:74px;margin:var(--space-4) var(--space-1) var(--space-1)}
.mr-ribbon__track{position:absolute;left:0;right:0;top:22px;height:var(--track-height);border-radius:var(--radius-pill);background:var(--track)}
.mr-ribbon__done{position:absolute;left:0;top:22px;height:var(--track-height);border-radius:var(--radius-pill);background:var(--graphite)}
.mr-ribbon__month{position:absolute;top:42px;font-size:13px;font-weight:600;color:var(--ink-3);transform:translateX(-50%);white-space:nowrap}
.mr-ribbon__ev{position:absolute;top:16px;transform:translateX(-50%)}
.mr-ribbon__ev i{display:block;width:16px;height:16px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--graphite);background:var(--graphite)}
.mr-ribbon__ev--future i{background:var(--surface);box-shadow:0 0 0 2px var(--ink-4)}
.mr-ribbon__ev--next i{background:var(--orange);box-shadow:0 0 0 1px var(--orange);width:18px;height:18px;margin-top:-1px}
.mr-ribbon__now{position:absolute;top:6px;width:2px;height:36px;background:var(--graphite)}
.mr-ribbon__now span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:800;white-space:nowrap}

/* Statistiques */
.mr-stats{display:grid;grid-template-columns:repeat(4,1fr)}
.mr-stat{padding:var(--space-4) var(--space-4) var(--space-1) 0}
.mr-stat + .mr-stat{padding-left:18px;border-left:1px solid var(--line)}
.mr-stat__v{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.mr-stat__v small{font-size:15px;font-weight:700;margin-left:2px}
.mr-stat__l{font-size:14px;color:var(--ink-3)}

/* Bandeau */
.mr-banner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:14px 18px;border-radius:var(--radius-card);background:var(--orange-wash);border:1px solid var(--orange-soft);font-size:15px}

/* Onglets */
.mr-tabs{display:flex;border-bottom:1px solid var(--line)}
.mr-tab{font:inherit;font-weight:700;font-size:15px;background:none;border:0;padding:10px 4px;margin-right:22px;color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.mr-tab[aria-selected="true"]{color:var(--graphite);border-bottom-color:var(--orange)}

/* Liste à puces d'état */
.mr-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--line)}
.mr-item__dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--ink-4)}
.mr-item__dot--late{background:var(--orange)} .mr-item__dot--soon{background:var(--orange-mid)}
.mr-item__txt{flex:1;min-width:0}
.mr-item__txt b{display:block;font-size:15px}
.mr-item__txt span{font-size:14px;color:var(--ink-3)}

/* Navigation latérale */
.mr-side{background:var(--nav-bg);color:var(--nav-ink);padding:26px var(--space-4);width:var(--sidebar-width);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-1)}
.mr-side__group{font-size:13px;color:var(--nav-ink-muted);margin:18px var(--space-3) 6px;font-weight:600}
.mr-side a{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-3);border-radius:var(--radius-control);color:var(--nav-ink);text-decoration:none;font-weight:600;font-size:15px;position:relative}
.mr-side a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.mr-side a[aria-current="page"]{color:var(--on-graphite);background:rgba(255,255,255,.06)}
.mr-side a[aria-current="page"]::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--nav-accent)}
.mr-side a:focus-visible{outline-color:var(--on-graphite)}
.mr-side__foot{margin-top:var(--space-4);padding:14px var(--space-3) 0;border-top:1px solid var(--nav-line);font-size:13px;color:var(--nav-ink-muted)}
.mr-side__foot b{display:block;color:var(--on-graphite);font-size:14px}
.mr-side__foot a{display:inline;padding:0;color:var(--nav-accent);font-weight:700;font-size:13px}

/* Barre d'onglets mobile */
.mr-tabbar{height:var(--tabbar-height);background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding-bottom:10px;box-sizing:border-box}
.mr-tabbar a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--ink-3);text-decoration:none;min-height:var(--touch-target);justify-content:center}
.mr-tabbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.mr-tabbar a[aria-current="page"]{color:var(--graphite)}
.mr-tabbar a[aria-current="page"] svg{stroke:var(--orange-ink)}
.mr-tabbar__home{width:46px;height:46px;border-radius:14px;background:var(--graphite);display:grid;place-items:center;margin-top:-18px}
.mr-tabbar__home svg{stroke:var(--on-graphite)}
a[aria-current="page"] .mr-tabbar__home{box-shadow:0 0 0 3px var(--orange-soft)}
a[aria-current="page"] .mr-tabbar__home svg{stroke:var(--orange)}

/* Checklist de démarrage */
.mr-steps{list-style:none;margin:0;padding:0}
.mr-steps li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--line);font-size:15px}
.mr-steps__ck{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px solid var(--control-border);font-size:13px;font-weight:800;color:var(--on-graphite);box-sizing:border-box}
.mr-steps li.is-done .mr-steps__ck{background:var(--graphite);border-color:var(--graphite)}
.mr-steps li.is-done .mr-steps__t{color:var(--ink-3);text-decoration:line-through}
.mr-steps li.is-current{font-weight:700}
.mr-steps li.is-current .mr-steps__ck{border-color:var(--orange)}
.mr-steps__t{flex:1}