/* === static/css/tokens.css === */
/* tokens.css — Design tokens (custom properties) */

:root {
    /* ── Spacing ────────────────────────────────────────── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

    /* ── Typography ─────────────────────────────────────── */
    --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;
    --font-code: var(--font-mono); /* alias compat */
    --text-2xs: 10px; --text-xs: 12px; --text-sm: 14px; --text-base: 15px;
    --text-lg: 17px; --text-xl: 21px; --text-2xl: 26px;
    --weight-normal: 400; --weight-medium: 500; --weight-semi: 600;
    --weight-bold: 700; --weight-heavy: 800; --weight-black: 900;

    /* ── Radius — nobl-style rounded ────────────────────── */
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
    --radius-xl: 18px; --radius-full: 9999px;

    /* ── Layout ─────────────────────────────────────────── */
    --sidebar-w: 240px;          /* legacy, conservé pour compat éventuelle */
    --sidebar-w-icon: 56px;      /* legacy */
    --topbar-h: 56px;            /* nav horizontale en haut */
    --bottom-nav-h: 64px;
    --content-max: 1400px;
    --content-pad: 32px;

    /* ── Transitions ────────────────────────────────────── */
    --tr-fast: 150ms ease;
    --tr-normal: 250ms ease;
    --tr-slow: 350ms ease;

    /* ── Z-index ────────────────────────────────────────── */
    --z-sidebar: 50;
    --z-drawer-backdrop: 90;
    --z-drawer: 100;
    --z-bottom-nav: 80;
    --z-toast: 200;
}

/* ════════════════════════════════════════════════════════════
   DARK THEME — Carbon Curves v3 : earthy coral + smoke blue
   Palette extraite de docs/10days.zip (strategie/theme.jsx)
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Backgrounds — deep blue-black, calm */
    --bg-main: #0E0F12;
    --bg-card: #16181D;
    --bg-card-alt: #1A1D24;
    --bg-elevated: #1C1F26;

    /* Borders — hairlines */
    --border-color: #2A2D35;
    --border-dash: #33363F;
    --border-subtle: #1E2128;

    /* Text — warm cream on near-black */
    --text-main: #E8E6E1;
    --text-muted: #A8A6A0;
    --text-dim: #6B6963;

    /* ── Accents: coral primary + smoke blue secondary ── */
    --accent-blue:   #7BA8B5;   /* secondary — smoke blue */
    --accent-green:  #7FA56B;
    --accent-red:    #B85450;
    --accent-yellow: #C4A961;
    --accent-teal:   #E8745A;   /* primary — warm coral (was teal) */
    --accent-coral:  #E8745A;   /* fused with primary */

    /* ── Sport discipline colors (carte blanche, palette terreuse) ── */
    --sport-none-bg: #0E0F12;   --sport-none-dot: #33363F;
    --sport-swim-bg: rgba(91,141,168,0.15);   --sport-swim-dot: #5B8DA8;
    --sport-bike-bg: rgba(232,116,90,0.15);   --sport-bike-dot: #E8745A;
    --sport-run-bg:  rgba(196,169,97,0.15);   --sport-run-dot:  #C4A961;
    --sport-renf-bg: rgba(122,139,92,0.15);   --sport-renf-dot: #7A8B5C;

    /* Charts */
    --chart-line-1: #E8745A;
    --chart-line-2: #7BA8B5;
    --chart-line-3: #C4A961;
    --chart-fill: rgba(232,116,90,0.08);
    --chart-grid: rgba(255,255,255,0.05);

    /* TSB zones */
    --tsb-risk: #B85450;
    --tsb-optimal: #7FA56B;
    --tsb-grey: #6B6963;
    --tsb-transition: #D4925E;
    --tsb-fresh: #7BA8B5;

    /* Status — earth tones */
    --status-green:  #7FA56B;   --status-green-bg:  rgba(127,165,107,0.12);
    --status-orange: #D4925E;   --status-orange-bg: rgba(212,146,94,0.12);
    --status-red:    #B85450;   --status-red-bg:    rgba(184,84,80,0.12);
    --status-grey:   #6B6963;   --status-grey-bg:   rgba(107,105,99,0.10);

    /* Sidebar */
    --sidebar-bg: #0A0B0E;
    --sidebar-border: #1E2128;
    --sidebar-hover: #16181D;
    --sidebar-active: rgba(232,116,90,0.12);
    --sidebar-active-text: #E8745A;

    /* Bottom nav */
    --bottom-nav-bg: #0A0B0E;
    --bottom-nav-border: #1E2128;

    /* Drawer */
    --drawer-backdrop: rgba(5,6,9,0.7);

    /* Chat compat aliases */
    --surface-0: #0E0F12;
    --surface-1: #13151A;
    --surface-2: #16181D;
    --surface-3: #1C1F26;
    --text: #E8E6E1;
    --border: #2A2D35;
    --accent: #E8745A;
    --danger: #B85450;
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME — Carbon Curves v3 : warm off-white + saturated coral
   Palette extraite de docs/10days.zip (strategie/theme.jsx)
   ════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    /* Backgrounds — warm off-white */
    --bg-main: #FDFCFA;
    --bg-card: #F6F4F0;
    --bg-card-alt: #FBFAF7;
    --bg-elevated: #FFFFFF;

    /* Borders — hairlines */
    --border-color: #E0DCD3;
    --border-dash: #D0CCC0;
    --border-subtle: #EDEAE3;

    /* Text — warm near-black */
    --text-main: #1F1A14;
    --text-muted: #5C5141;
    --text-dim: #8C8068;

    /* Accents — saturated for light contrast */
    --accent-blue:   #3F5D70;   /* slate blue */
    --accent-green:  #5A7858;
    --accent-red:    #A2402F;
    --accent-yellow: #8C5A37;
    --accent-teal:   #C25E37;   /* primary — saturated coral (was teal) */
    --accent-coral:  #C25E37;   /* fused with primary */

    /* Sport colors (palette terreuse light) */
    --sport-none-bg: #FFFFFF;     --sport-none-dot: #D0CCC0;
    --sport-swim-bg: rgba(61,110,97,0.12);    --sport-swim-dot: #3D6E61;
    --sport-bike-bg: rgba(194,94,55,0.12);    --sport-bike-dot: #C25E37;
    --sport-run-bg:  rgba(140,90,55,0.12);    --sport-run-dot:  #8C5A37;
    --sport-renf-bg: rgba(90,120,88,0.12);    --sport-renf-dot: #5A7858;

    /* Charts */
    --chart-line-1: #C25E37;
    --chart-line-2: #3F5D70;
    --chart-line-3: #8C5A37;
    --chart-fill: rgba(194,94,55,0.06);
    --chart-grid: rgba(31,26,20,0.06);

    /* TSB zones */
    --tsb-risk: #A2402F;
    --tsb-optimal: #5A7858;
    --tsb-grey: #8C8068;
    --tsb-transition: #B36B2C;
    --tsb-fresh: #3F5D70;

    /* Status */
    --status-green:  #5A7858;   --status-green-bg:  rgba(90,120,88,0.10);
    --status-orange: #B36B2C;   --status-orange-bg: rgba(179,107,44,0.10);
    --status-red:    #A2402F;   --status-red-bg:    rgba(162,64,47,0.10);
    --status-grey:   #8C8068;   --status-grey-bg:   rgba(140,128,104,0.08);

    /* Sidebar */
    --sidebar-bg: #F6F4F0;
    --sidebar-border: #E0DCD3;
    --sidebar-hover: #EDEAE3;
    --sidebar-active: rgba(194,94,55,0.10);
    --sidebar-active-text: #C25E37;

    /* Bottom nav */
    --bottom-nav-bg: #F6F4F0;
    --bottom-nav-border: #E0DCD3;

    /* Drawer */
    --drawer-backdrop: rgba(31,26,20,0.25);

    /* Chat compat aliases */
    --surface-0: #FDFCFA;
    --surface-1: #FBFAF7;
    --surface-2: #F6F4F0;
    --surface-3: #EDEAE3;
    --text: #1F1A14;
    --border: #E0DCD3;
    --accent: #C25E37;
    --danger: #A2402F;
}

/* === static/css/reset.css === */
/* reset.css — Minimal reset + base */

*, *::before, *::after { box-sizing: border-box; }

/* Réserve la place de la scrollbar en permanence : évite que les rails sticky
   se décalent quand la scrollbar du viewport apparaît/disparaît (drag d'un
   pool item, modale qui pousse l'overflow, etc.). */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll;       /* fallback navigateurs sans scrollbar-gutter */
}

body {
    margin: 0; padding: 0;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: 1.55;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    min-height: 100dvh;
    transition: background var(--tr-normal), color var(--tr-fast);
}

button {
    font-family: inherit; cursor: pointer;
    border: none; background: none; color: inherit;
}

input, textarea, select {
    font-family: inherit;
    color: var(--text-main);
}

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--weight-heavy);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p { margin: 0 0 var(--sp-3) 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Scrollbar (webkit) — valeurs alignées sur l'override carbon (8px / radius 4px)
   précédent ; consolidé dans reset.css S4.c lot 5. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* Firefox scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }

/* === static/style.css === */
/* static/style.css — Legacy component rules only.
   Design tokens live in css/tokens.css (loaded first).
   This file keeps only component-level rules for plan/analysis backward compat. */

/* Legacy .light class sync (old app.js still toggles it) — just forwards to data-theme */
.light { /* handled by tokens.css [data-theme="light"] */ }

/* ── BASE ────────────────────────────────────────────── */
/* When inside app-shell, body padding is 0 (reset.css handles it).
   When standalone (activity.html), the 20px padding is still useful. */
body:not(:has(.app-shell)) { padding: 20px; }
/* body base : règle finale dans reset.css. Le bloc legacy ici était
   totalement redondant avec reset (mêmes valeurs) — supprimé S4.c lot 5. */
.container { max-width: 1400px; margin: 0 auto; }
/* .step-card, .step-header, .step-header::after : migrés vers carbon.css (lot S4.c 1e, 1f) */
/* .flex-row, .flex-col : règles finales dans components.css (lot S4.c 4) */
.metric-box { background: var(--bg-card-alt); border: 1px solid var(--border-color); padding: 10px 12px; border-radius: 6px; display: flex; flex-direction: column; transition: background .25s; }
.metric-val { font-size: 16px; font-weight: 800; color: var(--text-main); font-family: var(--font-code); }
/* .metric-label, .metric-label-xs, .metric-val-lg, .metric-val-xl : migrés vers carbon.css (lot S4.c 1g) */

.macro-editor { display: none; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); padding: 15px; border-radius: 6px; margin-bottom: 15px; }
.macro-editor.active { display: block; }
.form-control { width: 100%; background: var(--bg-card-alt); border: 1px solid var(--border-color); color: var(--text-main); font-family: var(--font-ui); font-size: 12px; padding: 8px; border-radius: 4px; box-sizing: border-box; }

/* ── SLIDER (semantic gradient) ──────────────────────── */
.slider-container { position: relative; margin: 15px 0; }
input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; background: transparent; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; border: 1px solid var(--border-color); background: linear-gradient(to right, var(--status-green) 0%, var(--status-green) 30%, var(--status-orange) 60%, var(--status-red) 100%); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: var(--bg-card); border: 3px solid var(--text-main); margin-top: -7px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.3); transition: transform .15s; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; border: 1px solid var(--border-color); background: linear-gradient(to right, var(--status-green) 0%, var(--status-green) 30%, var(--status-orange) 60%, var(--status-red) 100%); }
input[type=range]::-moz-range-thumb { height: 20px; width: 20px; border-radius: 50%; background: var(--bg-card); border: 3px solid var(--text-main); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
/* .slider-ticks : migré vers carbon.css (lot S4.c 1g) */

/* ── CHARTS & DETAILS ────────────────────────────────── */
.chart-wrapper { height: 180px; width: 100%; margin-top: 15px; border-top: 1px dashed var(--border-color); padding-top: 10px; }
.split-box { margin-top: 8px; background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: 6px; padding: 8px 10px; font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-ui); }
.split-box strong { color: var(--text-main); font-size: var(--text-xs); }
ul.split-list { margin: 4px 0 0 0; padding-left: 15px; color: var(--text-main); font-weight: 700; font-size: var(--text-xs); }

/* ── CALENDRIER ──────────────────────────────────────── */
.grid-calendar { display: grid; grid-template-columns: 80px repeat(7, 1fr); gap: 6px; }
.grid-today-col { background: rgba(78,136,216,0.10) !important; border-color: var(--accent-blue) !important; }
.grid-nav-btn { background:var(--bg-card-alt); border:1px solid var(--border-color); color:var(--text-main); font-size: var(--text-xs); padding:4px 10px; border-radius:4px; cursor:pointer; font-weight:700; font-family: var(--font-ui); transition: background .15s; }
.grid-nav-btn:hover { background: var(--bg-card); }
.grid-header { text-align: center; font-weight: 700; color: var(--text-muted); font-size: var(--text-xs); padding: 5px 0; font-family: var(--font-ui); }
.grid-row-label { display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-align: right; font-family: var(--font-ui); }

.slot-cell { background: var(--bg-card); border: 1px solid var(--border-color); height: 75px; border-radius: 6px; position: relative; display: flex; flex-direction: column; transition: background .2s, border-color .2s; }

/* Cell states — couleurs franches */
.slot-cell.cell-done { background: rgba(61,170,116,0.12); border: 2px solid var(--status-green); }
.slot-cell.cell-locked { background: rgba(61,170,116,0.06); border: 1px solid rgba(61,170,116,0.4); }
.slot-cell.cell-planned { background: rgba(78,136,216,0.06); border: 1px solid rgba(78,136,216,0.35); }
.slot-cell.cell-new-day { background: rgba(201,168,64,0.08); border: 1px dashed var(--accent-yellow); }
.slot-cell.cell-missed { background: rgba(110,110,110,0.10); border: 1px dashed var(--text-dim); }
.slot-cell.cell-missed .draggable-pill { opacity: 0.55; text-decoration: line-through; }
.slot-cell.cell-empty { background: var(--bg-card); border: 1px dashed var(--border-color); }

/* Pill ✕ delete button (top-right, discreet) */
.draggable-pill .pill-delete-btn {
    position: absolute; top: 2px; right: 4px;
    width: 18px; height: 18px; padding: 0;
    background: transparent; border: none;
    color: var(--text-dim); font-size: 14px; line-height: 1;
    cursor: pointer; border-radius: 3px;
    opacity: 0; transition: opacity .15s, color .15s, background .15s;
    font-family: var(--font-ui);
}
.draggable-pill:hover .pill-delete-btn { opacity: 0.7; }
.draggable-pill .pill-delete-btn:hover { opacity: 1; color: var(--status-red); background: rgba(216,80,80,0.12); }
.draggable-pill.pill-done .pill-delete-btn { display: none; }

/* Mismatch tint sur pill réalisée à un autre créneau ou avec gros delta */
.draggable-pill.pill-mismatch { border-left-color: var(--status-orange) !important; }

/* Modale de suppression d'une séance */
.delete-pill-modal {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-ui);
}
.delete-pill-modal-box {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 8px; padding: 18px 20px; max-width: 460px; width: 92%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4); color: var(--text-main);
}
.delete-pill-modal-title { font-weight: 800; font-size: var(--text-md); margin-bottom: 8px; }
.delete-pill-modal-summary { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 14px; font-family: var(--font-code); }
.delete-pill-modal-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; font-size: var(--text-sm); }
.delete-pill-modal-options label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; padding: 6px; border-radius: 4px; }
.delete-pill-modal-options label:hover { background: var(--bg-card-alt); }
.delete-pill-modal-note { font-size: var(--text-2xs); color: var(--text-dim); margin-bottom: 14px; font-style: italic; }
.delete-pill-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.delete-pill-modal-actions .btn-secondary {
    background: var(--bg-card-alt); border: 1px solid var(--border-color); color: var(--text-main);
    padding: 6px 14px; border-radius: 4px; font-weight: 700; cursor: pointer; font-family: var(--font-ui);
}
.delete-pill-modal-actions .btn-danger {
    background: var(--status-red); border: 1px solid var(--status-red); color: white;
    padding: 6px 14px; border-radius: 4px; font-weight: 700; cursor: pointer; font-family: var(--font-ui);
}
.delete-pill-modal-actions .btn-danger:disabled { opacity: 0.5; cursor: wait; }

/* Panneau orphelines */
.orphans-panel {
    margin-top: 12px; padding: 10px 14px;
    background: rgba(201,168,64,0.06); border: 1px solid rgba(201,168,64,0.3); border-radius: 6px;
    font-family: var(--font-ui);
}
.orphans-head { font-weight: 800; color: var(--accent-yellow); font-size: var(--text-sm); margin-bottom: 6px; }
.orphans-list { display: flex; flex-direction: column; gap: 4px; }
.orphan-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 5px 8px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px;
    font-size: var(--text-xs);
}
.orphan-meta { color: var(--text-muted); font-family: var(--font-code); white-space: nowrap; }
.orphan-name { font-weight: 700; flex: 1; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orphan-stats { color: var(--text-muted); font-family: var(--font-code); white-space: nowrap; }
.orphan-slot-select { font-size: var(--text-2xs); padding: 2px 4px; background: var(--bg-card-alt); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 3px; font-family: var(--font-ui); }
.orphan-link-btn { font-size: var(--text-2xs); padding: 3px 8px; background: var(--accent-blue); border: none; color: white; font-weight: 700; border-radius: 3px; cursor: pointer; font-family: var(--font-ui); }
.orphan-ignore-btn { background: transparent; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; padding: 0 4px; }
.orphan-ignore-btn:hover { color: var(--status-red); }

/* Today.html — badges réconciliation et action infaisable */
.brief-wo-status { font-size: var(--text-2xs); margin-left: auto; padding-right: 6px; }
.brief-wo-done-badge { color: var(--status-green); font-weight: 700; }
.brief-wo-delta { color: var(--text-muted); font-family: var(--font-code); font-weight: 500; }
.brief-wo-shift { color: var(--status-orange); font-weight: 600; }
.brief-wo-missed-badge { color: var(--text-dim); font-weight: 700; }
.brief-wo-skipped-badge { color: var(--status-red); font-weight: 700; }
.brief-wo--missed .brief-wo-name { text-decoration: line-through; opacity: 0.7; }
.brief-wo--skipped .brief-wo-name { text-decoration: line-through; opacity: 0.5; }
.brief-wo--mismatch { border-left: 3px solid var(--status-orange) !important; }
.brief-wo-actions { margin-top: 8px; text-align: right; }
.brief-wo-skip-btn {
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-muted); font-size: var(--text-2xs); padding: 4px 10px;
    border-radius: 4px; cursor: pointer; font-family: var(--font-ui); font-weight: 600;
    transition: color .15s, border-color .15s;
}
.brief-wo-skip-btn:hover { color: var(--status-red); border-color: var(--status-red); }

/* Column state overlays (applied to headers too) */
.grid-col-locked .grid-header { color: var(--status-green); }
.grid-col-new .grid-header { color: var(--accent-yellow); }
.weight-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--text-dim); opacity: 0.15; pointer-events: none; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* ── SPORT DISKS & CHECKBOX ──────────────────────────── */
.slot-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; padding: 4px; width: 100%; box-sizing: border-box; }
.sport-disk { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.15s ease; }
.sport-disk:hover { transform: scale(1.15); }
.slot-lock { accent-color: var(--text-muted); width: 14px; height: 14px; margin: 0; cursor: pointer; }

.slot-input { position: relative; z-index: 2; width: 40px; margin: auto; background: transparent; border: none; border-bottom: 1px solid var(--text-dim); text-align: center; font-family: var(--font-code); font-size: 12px; font-weight: 800; color: var(--text-main); transition: border-color .15s; }
.slot-input:focus { outline: none; border-bottom-color: var(--accent-blue); }

/* ── DAY CONSTRAINT BUTTONS ──────────────────────────── */
.day-constraint-btn { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; font-size: var(--text-2xs); font-weight: 700; color: var(--text-muted); cursor: pointer; padding: 4px 6px; transition: all 0.15s; font-family: var(--font-ui); }
.day-constraint-btn:hover { background: var(--bg-card-alt); color: var(--text-main); border-color: var(--text-dim); }
.active-free { background: var(--bg-card-alt) !important; border-color: var(--text-main) !important; color: var(--text-main) !important; box-shadow: 0 0 0 2px var(--text-dim) inset; }
.active-block { background: var(--bg-card-alt) !important; border-color: var(--text-muted) !important; color: var(--text-muted) !important; box-shadow: 0 0 0 2px var(--text-dim) inset; opacity: 0.6; }

/* ── BUTTONS & BOXES ───────────────────────────────────
   .btn et .btn-primary base : règles finales dans components.css
   (lot S4.c 4). Les pseudos :hover/:active/:hover spécifiques ci-dessous
   restent ici car ils complètent les states components sans être en
   doublon strict. */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary:hover { opacity: 0.9; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.btn-warning { background: var(--bg-card-alt); color: var(--text-main); border: 1px dashed var(--text-muted); }
.alert-warn { background: var(--bg-card-alt); border: 1px dashed var(--text-muted); color: var(--text-main); padding: 12px; border-radius: 6px; margin-top: 15px; font-size: var(--text-xs); display: none; }
.alert-err  { background: var(--bg-card-alt); border: 1px solid var(--text-dim); color: var(--text-main); padding: 12px; border-radius: 6px; margin-top: 15px; font-size: var(--text-xs); display: none; }
.conflict-box { background: var(--bg-card-alt); border: 1px dashed var(--text-muted); color: var(--text-main); padding: 15px; border-radius: 6px; margin-top: 15px; display: none; }
.success-box { background: var(--bg-card-alt); border: 1px solid var(--status-green); color: var(--text-main); padding: 15px; border-radius: 6px; margin-top: 15px; display: none; }

.input-minimal {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    font-family: var(--font-ui);
    font-size: 14px;
    padding: 6px 0;
    outline: none;
    color: var(--text-main);
    transition: border-color 0.2s;
    width: 100%;
}
.input-minimal:focus { border-bottom-color: var(--accent-blue); }
select.input-minimal { cursor: pointer; font-weight: 600; }

/* ==========================================================================
   DASHBOARD DIDACTIQUE — B&W
   ========================================================================== */

/* ── PALIERS & ROADMAP ───────────────────────────────── */
.step-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: var(--text-xs); margin-bottom: 4px; font-family: var(--font-ui); }
.step-valid { background: var(--bg-card-alt); color: var(--text-muted); border: 1px solid var(--border-color); opacity: 0.7; border-left: 4px solid var(--status-green); }
.step-current { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--text-muted); font-weight: 700; border-left: 4px solid var(--accent-blue); }
.step-locked { background: var(--bg-card-alt); color: var(--text-dim); border: 1px dashed var(--border-color); }

/* ── FORM INDICATOR ──────────────────────────────────── */
.form-indicator { padding: 4px 12px; border-radius: 20px; font-weight: 700; font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: 0.3px; }

/* ── READINESS STATUS (border-style differentiation) ── */
.status-box { font-size: 24px; font-weight: 800; padding: 20px; border-radius: 8px; border: 2px solid var(--text-main); text-align: center; font-family: var(--font-ui); }
.status-go     { background: var(--status-green-bg); color: var(--status-green); border: 2px solid var(--status-green); }
.status-adjust { background: var(--status-orange-bg); color: var(--status-orange); border: 2px solid var(--status-orange); }
.status-rest   { background: var(--status-red-bg); color: var(--status-red); border: 2px solid var(--status-red); }

/* legacy compat (used by template) */
.status-red    { background: var(--status-red-bg); color: var(--status-red); border: 2px solid var(--status-red); }
.status-orange { background: var(--status-orange-bg); color: var(--status-orange); border: 2px solid var(--status-orange); }
.status-green  { background: var(--status-green-bg); color: var(--status-green); border: 2px solid var(--status-green); }
.status-grey   { background: var(--status-grey-bg); color: var(--status-grey); border: 1px solid var(--status-grey); }

/* ── INDICATOR BOXES (Couzens) ───────────────────────── */
.indicator-box { padding: 8px 12px; border-radius: 6px; font-size: var(--text-xs); display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--border-color); margin-bottom: 5px; background: var(--bg-card); transition: background .25s; font-family: var(--font-ui); }
.indicator-box.green  { border-left: 4px solid var(--status-green); }
.indicator-box.orange { border-left: 4px solid var(--status-orange); }
.indicator-box.red    { border-left: 4px solid var(--status-red); }
.indicator-box.grey   { border-left: 4px solid var(--status-grey); }

/* ── DIDACTIC & LOGIC ────────────────────────────────── */
.didactic-note { background: transparent; border-left: 2px solid var(--border-color); font-size: var(--text-xs); padding: 8px 12px; margin-top: 8px; margin-bottom: 8px; color: var(--text-dim); font-family: var(--font-ui); line-height: 1.5; border-radius: 0; }
.didactic-note strong { color: var(--text-muted); }
.didactic-note .ref { font-size: var(--text-2xs); color: var(--text-dim); font-style: italic; display: block; margin-top: 4px; }
.logic-tree { background: var(--bg-card-alt); color: var(--text-muted); padding: 10px; border-radius: 6px; font-size: var(--text-2xs); margin-top: 10px; font-family: var(--font-code); white-space: pre-wrap; border: 1px solid var(--border-color); }
.logic-highlight { color: var(--status-green); font-weight: bold; }
.logic-warn { color: var(--status-orange); font-weight: bold; }
.logic-err { color: var(--status-red); font-weight: bold; text-decoration: line-through; }

/* ── SCIENCE CALLOUT (new) ──────────────────────────── */
.science-callout { background: transparent; border: 1px solid var(--border-color); border-radius: 4px; padding: 8px 12px; margin: 8px 0; font-size: var(--text-xs); font-family: var(--font-ui); line-height: 1.55; color: var(--text-dim); }
.science-callout summary { font-weight: 500; color: var(--text-dim); font-size: var(--text-xs); cursor: pointer; user-select: none; padding: 2px 0; }
.science-callout summary::marker { color: var(--text-dim); }
.science-callout .ref { font-size: var(--text-2xs); color: var(--text-dim); font-style: italic; margin-top: 4px; display: block; }

/* ── OLD THEME TOGGLE — hidden in app-shell, kept for activity.html standalone ── */
.app-shell ~ .theme-toggle,
.app-shell .theme-toggle-track { display: none; }
.theme-toggle {
    position: fixed; top: 12px; right: 16px; z-index: 100;
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 20px; padding: 6px 14px;
    font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 500; color: var(--text-muted);
    cursor: pointer; user-select: none;
    transition: background .2s, border-color .2s;
    backdrop-filter: blur(8px);
}
.theme-toggle:hover { border-color: var(--text-muted); }
.theme-toggle-track {
    width: 28px; height: 15px; border-radius: 8px;
    background: var(--text-dim); position: relative; transition: background .2s;
}
.light .theme-toggle-track,
[data-theme="light"] .theme-toggle-track { background: var(--text-muted); }
.theme-toggle-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--text-main); transition: transform .2s;
}
.light .theme-toggle-thumb,
[data-theme="light"] .theme-toggle-thumb { transform: translateX(13px); }

/* ==========================================================================
   DASHBOARD — ANIMATIONS & DETAILS
   ========================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
details > summary::-webkit-details-marker { display: none; }
details > summary { list-style-type: none; }

.slot-cell { height: auto !important; min-height: 80px; padding-bottom: 10px; min-width: 0; }
.draggable-pill { max-width: 100%; box-sizing: border-box; overflow: hidden; }
.draggable-pill summary { flex-wrap: wrap; row-gap: 4px; }
.pill-type-label { white-space: normal; word-break: break-word; line-height: 1.1; }
.tsb-box { background: var(--bg-card); border: 1px solid var(--border-color); }

/* ── Pill states ── */
.draggable-pill { transition: opacity 0.15s, box-shadow 0.15s, transform 0.15s; }
.draggable-pill:not(.pill-locked):not(.ghost-pill) { box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.draggable-pill:not(.pill-locked):not(.ghost-pill):hover { box-shadow: 0 2px 8px rgba(0,0,0,0.2); transform: translateY(-1px); }
.pill-locked { opacity: 1; }
.pill-done { opacity: 0.85; }

.ghost-pill { opacity: 0.45; cursor: pointer; transition: all 0.2s ease; box-shadow: none !important; }
.ghost-pill:hover { opacity: 0.85; transform: scale(1.02); box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; }
.ghost-pill::before { content: "Clic pour valider"; display: block; text-align: center; font-size: var(--text-2xs); color: var(--text-muted); font-weight: 600; margin-bottom: 4px; background: var(--bg-card-alt); border-radius: 3px; font-family: var(--font-ui); padding: 1px 0; }

.step-item { padding: 8px 12px; border-radius: 6px; margin-bottom: 5px; font-size: var(--text-xs); background: var(--bg-card); border: 1px solid var(--border-color); font-family: var(--font-ui); }
.step-valid   { border-left: 4px solid var(--status-green); opacity: 0.72; }
.step-current { border-left: 4px solid var(--accent-blue); }
.step-locked  { border-left: 4px solid var(--text-dim); opacity: 0.45; }
.step-row1    { display: flex; align-items: center; gap: 7px; }
.step-row2    { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.step-badge   { font-size: var(--text-2xs); padding: 2px 6px; border-radius: 3px; font-weight: 600; white-space: nowrap; font-family: var(--font-code); }
.badge-zone   { background: var(--bg-card-alt); color: var(--text-muted); }
.badge-time   { background: var(--bg-card-alt); border: 1px solid var(--border-color); color: var(--text-main); }
.badge-dec    { background: var(--bg-card-alt); border: 1px solid var(--border-color); color: var(--text-muted); }
.badge-ok     { background: var(--status-green-bg); color: var(--status-green); border: 1px solid var(--status-green); }
.badge-nok    { background: var(--bg-card-alt); color: var(--text-dim); border: 1px dashed var(--text-dim); }

.steps-tabs   { display: flex; gap: 0; margin-bottom: 10px; border-bottom: 2px solid var(--border-color); }
.steps-tab    { padding: 6px 16px; font-size: var(--text-xs); font-weight: 600; cursor: pointer; border: none; background: none; color: var(--text-dim); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; font-family: var(--font-ui); }
.steps-tab.active { color: var(--text-main); border-bottom-color: var(--accent-blue); }
.steps-panel  { display: none; }
.steps-panel.active { display: block; }
.step-item details[open] summary span { display: inline-block; transform: rotate(90deg); }

.weight-period-btn { padding:4px 10px; font-size: var(--text-xs); font-weight:600; cursor:pointer; border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-dim); border-radius:4px; transition:all .15s; font-family:var(--font-ui); }
.weight-period-btn.active { background:var(--accent-blue); color:var(--bg-main); border-color:var(--accent-blue); }
.weight-period-btn:hover:not(.active) { border-color:var(--accent-blue); color:var(--text-main); }

.grid-calendar { display: grid; grid-template-columns: 110px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: start; }
.grid-row-label { font-size: var(--text-xs); font-weight: 600; display: flex; align-items: center; color: var(--text-main); font-family: var(--font-ui); }

/* ── ICS Agenda row ── */
.ics-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; position: relative; min-height: 22px; }
.ics-cell { font-size: var(--text-2xs); color: var(--text-muted); overflow: hidden; max-height: 40px; line-height: 1.2; padding: 2px; z-index: 1; }
.ics-event { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ics-span {
    position: absolute; top: 0; height: 100%;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-2xs); font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 6px; z-index: 0; pointer-events: auto;
    box-sizing: border-box;
    border: 1px solid;
}
.ics-span:hover { filter: brightness(1.15); }

.conclusion-go    { background: var(--status-green-bg); border-left: 4px solid var(--status-green); }
.conclusion-adjust{ background: var(--status-orange-bg); border-left: 4px solid var(--status-orange); }
.conclusion-rest  { background: var(--status-red-bg); border-left: 4px solid var(--status-red); }
.sig-critical { background: var(--status-red-bg); border-left: 4px solid var(--status-red); font-family: var(--font-ui); }
.sig-high     { background: var(--status-orange-bg); border-left: 4px solid var(--status-orange); font-family: var(--font-ui); }
.sig-medium   { background: var(--status-green-bg); border-left: 4px solid var(--status-green); font-family: var(--font-ui); }

.dc-badge-ok  { font-family: var(--font-code); font-size: var(--text-2xs); background: var(--status-green-bg); color: var(--status-green); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--status-green); }
.dc-badge-nok { font-family: var(--font-code); font-size: var(--text-2xs); background: var(--bg-card-alt); color: var(--text-dim); padding: 2px 6px; border-radius: 3px; }
.dec-color-green { font-family: var(--font-code); font-size: var(--text-xs); font-weight: 700; color: var(--status-green); }
.dec-color-red   { font-family: var(--font-code); font-size: var(--text-xs); font-weight: 700; color: var(--status-red); }
.dec-color-grey  { font-family: var(--font-code); font-size: var(--text-xs); font-weight: 700; color: var(--text-dim); }

.ls-m { display:inline-flex; align-items:center; gap:4px; background:var(--bg-card-alt); border:1px solid var(--border-color); padding:3px 8px; border-radius:4px; font-family:var(--font-ui); }
.ls-l { color:var(--text-dim); font-size: var(--text-2xs); font-weight:500; }
.ls-v { color:var(--text-main); font-weight:700; font-size: var(--text-xs); font-family:var(--font-code); }
.ls-hi { color:var(--text-main); }

.di-good   { font-weight: 700; color: var(--status-green); }
.di-ok     { font-weight: 700; color: var(--status-orange); }
.di-bad    { font-weight: 700; color: var(--status-red); }
.di-none   { color: var(--text-dim); }
.dc-progress-track { flex: 1; height: 4px; background: var(--border-color); border-radius: 2px; overflow: hidden; }
.dc-progress-bar   { height: 100%; border-radius: 2px; transition: width 0.3s; }
.dc-bar-green  { background: var(--status-green); }
.dc-bar-yellow { background: var(--status-orange); }
.dc-bar-red    { background: var(--status-red); }

/* Gap Analysis — Race Readiness */
.gap-score-gauge { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.gap-score-num { font-size:28px; font-weight:800; line-height:1; font-family:var(--font-code); }
.gap-score-label { font-size: var(--text-xs); font-weight:600; text-transform:uppercase; color:var(--text-muted); font-family:var(--font-ui); letter-spacing:0.3px; }
.gap-dim { display:flex; align-items:center; gap:8px; padding:5px 10px; border-radius:4px; margin-bottom:2px; background:transparent; border-bottom:1px solid var(--border-color); font-family:var(--font-ui); }
.gap-dim:last-child { border-bottom:none; }
.gap-dim-icon { font-size: var(--text-xs); flex-shrink:0; width:14px; text-align:center; }
.gap-dim-name { font-size: var(--text-xs); font-weight:600; min-width:110px; color:var(--text-muted); }
.gap-dim-bar-track { flex:1; height:4px; background:var(--border-color); border-radius:2px; overflow:hidden; min-width:60px; }
.gap-dim-bar-fill { height:100%; border-radius:2px; transition:width .4s ease; }
.gap-dim-pct { font-size: var(--text-xs); font-weight:700; min-width:32px; text-align:right; font-family:var(--font-code); }
.gap-dim-detail { font-size: var(--text-2xs); color:var(--text-dim); min-width:140px; font-family:var(--font-code); }
.gap-recs { margin-top:8px; padding:8px 12px; background:var(--bg-card-alt); border:1px solid var(--border-color); border-radius:4px; }
.gap-rec-item { font-size: var(--text-xs); padding:2px 0; line-height:1.5; font-family:var(--font-ui); color:var(--text-muted); }
.gap-rec-urgency-high { color:var(--text-main); }
.gap-rec-urgency-medium { color:var(--text-muted); }
.gap-rec-urgency-low { color:var(--text-dim); }

/* ==========================================================================
   DASHBOARD — SUIVI QUOTIDIEN
   ========================================================================== */
.missing-tag { display:inline-block; font-size: var(--text-2xs); padding:2px 6px; border-radius:3px; background:rgba(216,80,80,0.15); color:var(--status-red); font-weight:700; margin-left:4px; cursor:pointer; font-family:var(--font-ui); transition: opacity .15s; }
.missing-tag:hover { opacity: 0.8; }
.filled-tag { display:inline-block; font-size: var(--text-2xs); padding:2px 6px; border-radius:3px; background:rgba(61,170,116,0.15); color:var(--status-green); font-weight:700; margin-left:4px; font-family:var(--font-ui); }
.sq-input { width:100%; box-sizing:border-box; max-width:100%; background:var(--bg-card); border:1px solid var(--border-color); border-radius:4px; padding:6px 8px; color:var(--text-main); font-family:var(--font-ui); font-size: var(--text-xs); transition: border-color .15s; }
.sq-input:focus { border-color: var(--accent-blue); outline: none; }
.sq-input-auto { width: auto; max-width: 100%; }
.sq-label { color:var(--text-muted); font-size: var(--text-xs); display:block; margin-bottom:3px; font-family:var(--font-ui); font-weight:500; }
.sq-label-inline { display: inline; margin: 0; }
.sq-btn { font-size: var(--text-xs); padding:6px 12px; margin-top:4px; }
.sq-btn-inline { margin: 0; }
.sq-col { flex:1; min-width:0; background:var(--bg-card-alt); border:1px solid var(--border-color); border-radius:6px; padding:12px; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.sq-col > * { max-width: 100%; }
.sq-col-wide { flex: 1.5; }
.sq-title { font-size: var(--text-xs); font-weight:700; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; letter-spacing:0.3px; font-family:var(--font-ui); }
.sq-title-inline { margin: 0; }
.rpe-badge { display:inline-block; font-size: var(--text-xs); font-weight:800; font-family:var(--font-code); padding:2px 8px; border-radius:4px; }

/* ==========================================================================
   DASHBOARD — UTILITY CLASSES (extracted from inline styles)
   ========================================================================== */

/* ── Layout helpers ── */
.d-flex { display: flex; }
.d-grid { display: grid; }
.flex-center { display: flex; align-items: center; }
.flex-baseline { display: flex; align-items: baseline; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-col-layout { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-1-5 { flex: 1.5; }
.flex-2 { flex: 2; }
.min-w-0 { min-width: 0; }
.min-w-320 { min-width: 320px; }
/* .gap-4 : règle finale dans components.css (gap: var(--sp-4)) — lot S4.c 4. */
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-14 { gap: 14px; }
.gap-15 { gap: 15px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mb-0 { margin-bottom: 0; }
/* .mb-4 : règle finale dans components.css (var(--sp-4)) — lot S4.c 4. */
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-15 { margin-bottom: 15px; }
.mt-2 { margin-top: 2px; }
/* .mt-4 : règle finale dans components.css (var(--sp-4)) — lot S4.c 4. */
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-15 { margin-top: 15px; }
.pt-6 { padding-top: 6px; }
.pt-8 { padding-top: 8px; }
.pt-10 { padding-top: 10px; }
.p-8 { padding: 8px; }

/* ── Semantic dashboard classes ── */
.ascii-banner { font-family: var(--font-code); font-size: var(--text-2xs); color: var(--text-dim); margin: 0 0 5px 0; line-height: 1.15; letter-spacing: 1px; }
.pipeline-header { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-ui); }
.meth-link { font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; font-weight: 600; border: 1px solid var(--border-color); padding: 4px 12px; border-radius: 4px; transition: border-color .15s; }
.macro-banner { background: var(--accent-blue); color: var(--bg-main); padding: 8px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-ui); }
.macro-date { font-size: var(--text-xs); opacity: 0.8; font-family: var(--font-code); }
.metric-val-xxl { font-family: var(--font-code); font-size: 29px; font-weight: 800; line-height: 1; }
.metric-val-xxxl { font-family: var(--font-code); font-size: 37px; font-weight: 900; line-height: 1; }
.gauge-track { height: 4px; border-radius: 2px; background: var(--bg-card-alt); overflow: hidden; }
.gauge-bar { height: 100%; border-radius: 2px; }
.gauge-labels { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; }
.gauge-pct { font-size: var(--text-2xs); font-weight: 600; }
.gauge-detail { font-size: var(--text-2xs); font-family: var(--font-code); color: var(--text-dim); }
.sep-dashed { margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--border-color); }
.sep-dashed-lg { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border-color); }
.sport-stats { font-size: var(--text-xs); margin-top: 8px; font-weight: 600; display: flex; gap: 8px; flex-wrap: wrap; }
.sport-trend { color: var(--text-dim); font-weight: 400; font-size: var(--text-xs); }
.tiz-block { font-family: var(--font-code); font-size: var(--text-2xs); margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--border-color); line-height: 1.5; }
.vol-dim { font-size: var(--text-xs); color: var(--text-dim); }
.section-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.3px; }
.section-label-xs { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.3px; }
.durability-label { font-size: var(--text-2xs); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.durability-detail { font-size: var(--text-xs); margin-top: 4px; line-height: 1.7; }
.durability-link { font-size: var(--text-2xs); color: var(--text-dim); margin-top: 3px; cursor: pointer; }
.di-inline { font-size: var(--text-2xs); font-family: var(--font-code); }

/* ── Decision / Readiness ── */
.decision-box { font-size: 22px; font-weight: 800; padding: 16px; border-radius: 8px; font-family: var(--font-ui); }
.decision-score { font-size: 14px; font-family: var(--font-code); opacity: 0.8; }
.action-box { margin-top: 10px; padding: 12px 14px; border-radius: 6px; }
.action-box-sm { margin-top: 10px; padding: 10px 12px; border-radius: 6px; }
.action-title { font-size: 13px; font-weight: 700; font-family: var(--font-ui); }
.action-desc { font-size: var(--text-xs); color: var(--text-main); margin-top: 4px; line-height: 1.5; }
.impact-box { margin-top: 8px; padding: 8px; background: var(--bg-card); border-radius: 4px; border: 1px solid var(--border-color); }
.impact-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.impact-original { text-decoration: line-through; color: var(--text-muted); }
.impact-arrow { font-weight: 800; }
.impact-new { font-weight: 800; font-family: var(--font-code); }
.impact-zone-badge { background: var(--bg-card-alt); padding: 2px 6px; border-radius: 3px; font-size: var(--text-xs); font-weight: 800; }
.impact-desc { font-size: var(--text-xs); color: var(--text-muted); margin-top: 6px; }
.impact-session-row { padding: 6px 0; border-bottom: 1px dashed var(--border-color); }
.impact-session-row:last-of-type { border-bottom: none; }
.impact-session-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.impact-slot-tag { font-size: var(--text-2xs); font-weight: 700; color: var(--text-muted); background: var(--bg-card-alt); padding: 1px 5px; border-radius: 3px; letter-spacing: 0.3px; }
.impact-class-tag { font-size: var(--text-2xs); font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.3px; }
.impact-class-intense { background: var(--status-red-bg); color: var(--status-red); }
.impact-class-moderate { background: var(--status-orange-bg); color: var(--status-orange); }
.impact-class-easy { background: var(--status-green-bg); color: var(--status-green); }
.impact-zone-tag { background: var(--bg-card-alt); padding: 2px 6px; border-radius: 3px; font-size: var(--text-xs); font-weight: 800; }
.impact-new-reduced { color: var(--status-orange); }
.impact-new-cancelled { color: var(--status-red); }
.impact-new-kept { color: var(--status-green); }
.impact-total-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border-color); font-size: var(--text-xs); }
.impact-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.btn-apply-adjustment { background: var(--status-orange); color: #fff; border: none; padding: 8px 12px; border-radius: 4px; font-size: var(--text-xs); font-weight: 800; cursor: pointer; text-transform: uppercase; letter-spacing: 0.3px; font-family: var(--font-ui); }
.btn-apply-adjustment:hover { filter: brightness(1.1); }
.btn-apply-adjustment:disabled { opacity: 0.5; cursor: not-allowed; }
.impact-actions-hint { font-size: var(--text-2xs); color: var(--text-muted); font-style: italic; }
.conclusion-box { margin-top: 12px; padding: 12px 14px; border-radius: 6px; text-align: left; }
.tss-reco-box { margin-top: 8px; padding: 6px 8px; background: var(--bg-card); border-radius: 4px; border: 1px solid var(--border-color); font-size: var(--text-xs); }
.signals-col { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.signal-item { padding: 7px 9px; border-radius: 4px; font-size: var(--text-xs); }
.signal-rationale { margin-top: 3px; color: var(--text-muted); font-style: italic; }
.signal-action { margin-top: 3px; color: var(--text-main); }
.indicators-col { margin-top: 12px; border-top: 1px dashed var(--border-color); padding-top: 10px; display: flex; flex-direction: column; }
.indicator-key { text-transform: uppercase; font-size: var(--text-xs); }
.indicator-detail { color: var(--text-muted); font-family: var(--font-code); font-size: var(--text-xs); }
.signal-card { padding: 6px 10px; border-radius: 4px; background: var(--bg-card-alt); border: 1px solid var(--border-color); font-size: var(--text-xs); font-family: var(--font-ui); line-height: 1.5; }

/* Toggles "Méthode & science" — visibles et cliquables */
.toggle-method { margin-top: var(--sp-2); }
.toggle-method > summary {
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--accent-teal, var(--accent-blue));
    list-style: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 4px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: color var(--tr-fast), background var(--tr-fast);
    font-family: var(--font-ui);
    letter-spacing: 0.02em;
}
.toggle-method > summary:hover {
    color: var(--text-main);
    background: var(--bg-elevated);
}
.toggle-method > summary::-webkit-details-marker { display: none; }
.toggle-method > summary::before { content: "▸"; font-size: var(--text-sm); transition: transform var(--tr-fast); display: inline-block; }
.toggle-method[open] > summary::before { transform: rotate(90deg); }
.toggle-method > div {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.65;
    padding: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-2);
    background: var(--bg-card);
    border-left: 2px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.toggle-method > div strong { color: var(--text-main); font-weight: var(--weight-bold); }

/* Toggle "[?]" — variante compacte inline */
.toggle-inline { display: inline-block; margin-left: 6px; vertical-align: middle; }
.toggle-inline > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    color: var(--accent-teal, var(--accent-blue));
    background: color-mix(in srgb, var(--accent-teal, var(--accent-blue)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-teal, var(--accent-blue)) 40%, transparent);
    border-radius: 50%;
    list-style: none;
    user-select: none;
    transition: background var(--tr-fast), transform var(--tr-fast);
    vertical-align: middle;
}
.toggle-inline > summary:hover {
    background: color-mix(in srgb, var(--accent-teal, var(--accent-blue)) 25%, transparent);
    transform: scale(1.08);
}
.toggle-inline > summary::-webkit-details-marker { display: none; }
.toggle-inline > summary::before { content: "?"; line-height: 1; }
.toggle-inline > div {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.65;
    margin-top: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-card);
    border-left: 3px solid var(--accent-teal, var(--accent-blue));
    border-radius: var(--radius-sm);
}
.toggle-inline > div strong { color: var(--text-main); font-weight: var(--weight-bold); }
.toggle-inline > div strong { color: var(--text-main); }
.confidence-note { font-size: var(--text-xs); color: var(--text-dim); margin-top: 4px; font-style: italic; }
.no-data-msg { padding: 20px; text-align: center; color: var(--text-dim); font-size: 12px; }
/* .sub-desc : migré vers carbon.css (lot S4.c 1f) */
.sub-desc b, .sub-desc strong { color: var(--text-main); font-weight: var(--weight-bold); }
.sub-desc code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-card); padding: 1px 5px; border-radius: 3px; color: var(--text-main); }
/* .font-bold : règle finale dans components.css (var(--weight-bold)) — lot S4.c 4. */
.font-800 { font-weight: 800; }
/* .font-code : migré vers carbon.css (lot S4.c 1g) */
.font-ui { font-family: var(--font-ui); }
.fs-9 { font-size: var(--text-xs); }
.fs-10 { font-size: 12px; }
.fs-11 { font-size: 13px; }
.fs-12 { font-size: 14px; }
.fs-13 { font-size: 15px; }
.fs-16 { font-size: 18px; }
.fs-22 { font-size: 24px; }
.lh-1-5 { line-height: 1.5; }
.lh-1-6 { line-height: 1.6; }
.lh-1-7 { line-height: 1.7; }

/* ── Roadmap ── */
.roadmap-container { display: flex; height: 35px; border-radius: 6px; overflow: visible; background: var(--bg-card-alt); position: relative; }
.race-marker { position: absolute; right: 0; top: -35px; background: var(--text-main); color: var(--bg-main); padding: 5px 10px; border-radius: 6px; font-size: var(--text-xs); font-weight: 700; z-index: 20; font-family: var(--font-ui); }
.race-marker-arrow { position: absolute; bottom: -5px; right: 20px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--text-main); }
.roadmap-wrapper { position: relative; margin: 40px 0 20px 0; }

/* ── Phase rules ── */
.phase-rules { flex: 1.5; background: var(--bg-card); border: 1px solid var(--border-color); padding: 14px; border-radius: 6px; font-size: var(--text-xs); }
.phase-title { font-weight: 700; color: var(--text-main); margin-bottom: 10px; font-size: 12px; text-transform: uppercase; font-family: var(--font-ui); letter-spacing: 0.3px; }
.phase-rule-line { margin-bottom: 6px; line-height: 1.5; }
.phase-rule-label { font-weight: 600; }
.phase-rule-value { font-family: var(--font-code); font-size: var(--text-xs); }

/* ── Coach IA card (.coach-card : migré vers carbon.css — lot S4.c 1e) ── */
.coach-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.coach-badge { font-size: var(--text-2xs); font-weight: 700; padding: 3px 8px; border-radius: 3px; background: color-mix(in srgb, var(--accent-blue) 20%, transparent); color: var(--accent-blue); letter-spacing: 0.5px; text-transform: uppercase; font-family: var(--font-code); }
.coach-btn { background: var(--accent-blue); color: #fff; font-size: var(--text-xs); padding: 8px 18px; font-weight: 700; border: none; letter-spacing: 0.3px; display: flex; align-items: center; gap: 8px; }
.coach-cost { font-size: var(--text-2xs); opacity: 0.7; font-family: var(--font-code); background: rgba(255,255,255,0.15); padding: 2px 6px; border-radius: 3px; }
.coach-desc { font-size: var(--text-xs); font-weight: 500; color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
.coach-result { display: none; margin-top: 15px; }
.coach-content { font-size: 12px; color: var(--text-main); line-height: 1.7; font-family: var(--font-ui); }
.coach-timestamp { font-size: var(--text-2xs); color: var(--text-dim); font-family: var(--font-code); }
.coach-loading { display: none; text-align: center; padding: 30px 0; }
.coach-loading-text { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-ui); }
.coach-spinner { margin-top: 8px; width: 40px; height: 40px; border: 3px solid var(--border-color); border-top-color: var(--accent-blue); border-radius: 50%; animation: spin 1s linear infinite; margin: 12px auto 0; }
.coach-history-summary { cursor: pointer; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--font-ui); user-select: none; }
.coach-history-content { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

/* ── Solver ── */
/* .solver-wrapper, .solver-header, .tss-display, .time-display, .weekly-display : migrés vers carbon.css (lot S4.c 1g) */
.slider-warning { font-size: var(--text-xs); font-weight: 800; text-align: center; color: var(--text-muted); }
.resize-btn { background: var(--bg-card-alt); border: 1px solid var(--border-color); color: var(--text-muted); font-size: var(--text-xs); padding: 2px 8px; border-radius: 4px; cursor: pointer; font-weight: 700; line-height: 1.2; }
.chart-legend { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: nowrap; margin-top: 6px; font-size: var(--text-2xs); font-weight: 600; color: var(--text-muted); white-space: nowrap; font-family: var(--font-ui); }
.proj-feedback { padding: 8px 12px; border-radius: 4px; font-size: var(--text-xs); margin-top: 8px; border-left: 4px solid; font-weight: 600; }
.deploy-desc { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 15px; line-height: 1.6; font-family: var(--font-ui); }
.rules-details { margin-top: 10px; font-size: var(--text-xs); font-family: var(--font-ui); }
.rules-content { padding: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; margin-top: 6px; }
.rules-textarea { width: 100%; border: 1px solid var(--border-color); border-radius: 4px; font-family: var(--font-ui); font-size: var(--text-xs); padding: 8px; box-sizing: border-box; background: var(--bg-card-alt); color: var(--text-main); }
.sport-targets { min-height: 100px; padding: 10px; background: var(--bg-card-alt); border: 2px dashed var(--border-color); border-radius: 8px; margin-top: 10px; }
.tiz-profile-box { margin-top: 15px; background: var(--bg-card-alt); padding: 12px; border-radius: 6px; font-family: var(--font-code); font-size: var(--text-xs); color: var(--text-main); line-height: 1.5; border: 1px solid var(--border-color); }
.grid-footer { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border-color); display: flex; justify-content: flex-end; font-weight: 700; font-family: var(--font-ui); font-size: 12px; }
.live-tss { font-size: 16px; font-family: var(--font-code); font-weight: 800; }
.deploy-btns { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.btn-lock { background: var(--bg-card-alt); color: var(--text-main); border: 2px solid var(--text-main); font-weight: 700; }
.btn-auto { font-size: var(--text-xs); padding: 8px 14px; }
.btn-reopt { font-size: var(--text-xs); padding: 8px 14px; background: var(--bg-card-alt); color: var(--text-main); border: 1px solid var(--text-muted); }
.reset-reco-btn { display: none; font-size: var(--text-2xs); padding: 2px 8px; border-radius: 3px; border: 1px solid var(--text-muted); background: var(--bg-card-alt); color: var(--text-main); font-weight: 800; cursor: pointer; white-space: nowrap; }

/* ── Calendar legend ── */
.cal-legend { display: flex; gap: 14px; font-size: var(--text-xs); font-weight: 500; margin-bottom: 8px; color: var(--text-muted); font-family: var(--font-ui); flex-wrap: wrap; }
.cal-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.cal-dot-done { border: 2px solid var(--status-green); background: rgba(61,170,116,0.20); }
.cal-dot-missed { border: 1px dashed var(--text-dim); background: rgba(110,110,110,0.20); }
.cal-dot-locked { border: 1px solid rgba(61,170,116,0.5); background: rgba(61,170,116,0.10); }
.cal-dot-planned { border: 1px solid rgba(78,136,216,0.5); background: rgba(78,136,216,0.12); }
.cal-dot-auto { border: 1px dashed var(--accent-yellow); background: rgba(201,168,64,0.12); }
.cal-dot-empty { border: 1px dashed var(--border-color); background: var(--bg-card); }
.cal-dot-today { border: 1px solid var(--accent-blue); background: rgba(78,136,216,0.10); border-radius: 2px; }

/* ── Readiness dots ── */
.readiness-dots { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 8px; }
.readiness-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ── Step details (paliers) ── */
.step-desc { font-size: var(--text-xs); color: var(--text-muted); margin: 2px 0 2px 22px; line-height: 1.4; }
.step-detail-toggle summary { cursor: pointer; color: var(--accent-blue); font-size: var(--text-2xs); font-weight: 600; list-style: none; display: inline; }
.step-detail-toggle summary .arrow { font-size: var(--text-2xs); }
.step-detail-body { margin-top: 3px; padding: 4px 8px; background: var(--bg-card-alt); border-radius: 4px; color: var(--text-main); font-size: var(--text-xs); line-height: 1.5; }
.step-source { font-size: var(--text-2xs); color: var(--text-dim); margin-top: 3px; font-style: italic; }
.step-no-data { font-size: var(--text-xs); color: var(--text-muted); padding: 8px; background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: 4px; }
.steps-rationale {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-muted);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    background: color-mix(in srgb, var(--accent-teal, var(--accent-blue)) 4%, var(--bg-card-alt));
    border-left: 3px solid var(--accent-teal, var(--accent-blue));
    border-radius: var(--radius-sm);
}
.steps-rationale strong { color: var(--text-main); font-weight: var(--weight-bold); }
.steps-rationale-icon { font-size: var(--text-base); flex-shrink: 0; color: var(--accent-teal, var(--accent-blue)); }

/* ── Weight panel ── */
.weight-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.weight-stat { text-align: center; padding: 8px; }
.weight-chart-wrapper { position: relative; height: 220px; }
.weight-chart-hint { font-size: var(--text-2xs); color: var(--text-dim); margin-top: 4px; text-align: center; }

/* ── Session feedback ── */
.session-nav { display: flex; gap: 4px; align-items: center; }
.session-nav-btn { font-size: var(--text-2xs); padding: 2px 6px; }
.session-index { font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--font-code); }
.session-loading { font-size: var(--text-2xs); color: var(--text-dim); }
.session-feedback { padding-top: 6px; border-top: 1px dashed var(--border-color); display: none; font-size: var(--text-xs); }
.session-feedback-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.session-feedback-field { display: flex; align-items: center; gap: 4px; min-width: 0; }
.session-feedback-field select { max-width: 100%; }
.session-result { font-size: var(--text-2xs); color: var(--status-green); display: none; }
.deep-stats-toggle { margin-top: 4px; }
.deep-stats-summary { font-family: var(--font-code); font-size: var(--text-2xs); color: var(--text-muted); cursor: pointer; padding: 3px 0; user-select: none; }
.deep-stats-body { padding-top: 8px; border-top: 1px dashed var(--border-color); }

/* ── Grid layouts for dashboard ──
   .grid-2col, .grid-3col : règles finales dans components.css — lot S4.c 4.
   `.grid-2col > * { min-width: 0; }` (utilitaire de shrinking lié) migré
   dans components.css. */
.grid-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* ── Misc dashboard ── */
.step-card-yellow { border-left: 4px solid var(--accent-yellow); }
.step-card-muted { border-left: 4px solid var(--text-muted); }
.tabs-flush { margin-bottom: 0; flex: 1; }
.mc-result { font-size: var(--text-2xs); color: var(--status-green); }
.rpe-badge-default { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); }
.sq-input-mb { margin-bottom: 4px; }

/* ==========================================================================
   METHODOLOGY PAGE
   ========================================================================== */
.meth-section p strong { color: var(--text-main); }

/* .ref, .critique, .choix : migrés vers carbon.css (lot S4.c 1f) */
.critique strong { color: var(--text-muted); }
.choix strong { color: var(--text-muted); }

.back-link { font-size: var(--text-xs); color: var(--text-dim); text-decoration: none; font-weight: 700; }
.back-link:hover { color: var(--text-main); }


/* ==========================================================================
   RESPONSIVE — MOBILE & TABLET
   ========================================================================== */

/* ── Tablet / phone landscape ───────────────────────── */
@media (max-width: 768px) {
    body { padding: 12px; }
    .grid-calendar { overflow-x: auto; }
    .flex-row { gap: 10px; }
    .chart-wrapper { height: 150px; }
}

/* ── Phone portrait ─────────────────────────────────── */
@media (max-width: 480px) {
    body { padding: 8px; font-size: 14px; }
    .step-card { padding: 12px; margin-bottom: 12px; }
    .step-card > [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .flex-row { flex-direction: column; gap: 10px; }
    .flex-col { min-width: 100%; }

    /* Typography floor */
    .slider-ticks, .day-constraint-btn, .logic-tree,
    ul.split-list, .step-badge, .theme-toggle { font-size: var(--text-xs); }
    .split-box, .didactic-note, .form-indicator, .step-item { font-size: 12px; }

    /* Touch targets */
    .btn { padding: 12px 16px; font-size: 13px; min-height: 44px; }
    .day-constraint-btn { padding: 6px 8px; min-height: 36px; }
    .sport-disk { width: 28px; height: 28px; }
    .slot-lock { width: 18px; height: 18px; }
    .theme-toggle { padding: 8px 14px; }

    /* Slider thumb bigger for touch */
    input[type=range]::-webkit-slider-thumb { height: 24px; width: 24px; margin-top: -9px; }
    input[type=range]::-moz-range-thumb { height: 24px; width: 24px; }

    /* Status box readable */
    .status-box { font-size: 18px; padding: 14px; }

    /* Journal responsive */
    .journal-grid { grid-template-columns: 1fr !important; }
    .journal-nav { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════
   JOURNAL — vue hebdomadaire prevu / realise / coach
   (sélecteurs en doublon migrés vers carbon.css — lot S4.c 1d)
   ══════════════════════════════════════════════════════════ */

.journal-loading { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-muted); font-size: 12px; }

.journal-morning-badge { font-size: var(--text-2xs); font-weight: 700; font-family: var(--font-code); padding: 1px 5px; border-radius: 3px; margin-left: auto; }
.journal-morning-badge.badge-good { background: var(--status-green-bg); color: var(--status-green); }
.journal-morning-badge.badge-mid { background: var(--status-orange-bg); color: var(--status-orange); }
.journal-morning-badge.badge-low { background: var(--status-red-bg); color: var(--status-red); }

/* Planned */
.journal-section-planned { border-left: 2px solid var(--text-dim); padding-left: 6px; }
.journal-planned-item { display: flex; flex-direction: column; gap: 1px; margin-bottom: 3px; }
.journal-planned-detail { font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--font-code); }

/* Activities */
.journal-section-actual { border-left: 2px solid var(--status-green); padding-left: 6px; }
.journal-activity-item { margin-bottom: 4px; }
.journal-activity-detail { font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--font-code); line-height: 1.4; }

/* Session feedback */
.journal-section-feedback { font-size: var(--text-2xs); color: var(--text-muted); }
.journal-feedback-item { padding: 2px 0; }

/* Nutrition */
.journal-section-nutri { display: flex; align-items: center; gap: 8px; font-size: var(--text-2xs); font-family: var(--font-code); padding: 3px 0; }
.journal-nutri-val { font-weight: 700; color: var(--text-main); }
.journal-nutri-macros { color: var(--text-muted); }

/* Coach IA */
.journal-section-coach { background: var(--bg-card-alt); border: 1px solid var(--border-color); border-radius: 4px; padding: 6px; }
.journal-coach-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.journal-coach-text p { margin: 0 0 4px 0; }
.journal-coach-text ul, .journal-coach-text ol { margin: 2px 0; padding-left: 16px; }
.journal-coach-text li { margin-bottom: 2px; }

.journal-readiness-badge { font-size: var(--text-2xs); font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.3px; }
.journal-readiness-push { background: var(--status-green-bg); color: var(--status-green); }
.journal-readiness-maintain { background: var(--status-orange-bg); color: var(--status-orange); }
.journal-readiness-absorb { background: var(--status-red-bg); color: var(--status-red); }
.journal-decision-badge { font-size: var(--text-2xs); font-weight: 700; padding: 1px 5px; border-radius: 3px; background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border-color); }

/* Notes */
.journal-section-note { margin-top: auto; }
.journal-note-input:focus { border-color: var(--accent-blue); outline: none; box-shadow: 0 0 0 2px rgba(78,136,216,0.15); }
.journal-note-readonly { font-size: var(--text-xs); color: var(--text-muted); font-style: italic; padding: 4px 0; }
.journal-note-empty { font-size: var(--text-2xs); color: var(--text-dim); }

/* ── GLYCOGÈNE BAR ─────────────────────────────────── */
.glyco-bar {
    width: 100%; height: 10px;
    background: var(--bg-card-alt);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.glyco-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease, background 0.3s ease;
}
.glyco-projected .glyco-fill {
    opacity: 0.5;
}
.glyco-projected {
    border-style: dashed;
}
.glyco-label {
    display: block;
    text-align: center;
    font-size: var(--text-2xs);
    font-weight: 700;
    font-family: var(--font-code);
    margin-top: 1px;
    line-height: 1.2;
}

/* ── Tendance semaine synthèse (3 niveaux) ────────────────────────────── */
/* .ts-action, .ts-action-{red,orange,green,neutral,title,body} : migrés vers carbon.css (lot S4.c 1g) */
.ts-action-body strong { color: var(--text-main); }
.ts-target-val    { color: var(--text-main); font-size: 12px; font-weight: 800; }
.ts-note-dim      { font-size: var(--text-xs); color: var(--text-dim); font-style: italic; }

.ts-decorr-badge {
    font-size: var(--text-xs); color: var(--text-muted); margin-top: 6px;
    padding: 5px 10px; background: var(--bg-card-alt);
    border-left: 2px solid var(--text-dim); border-radius: 4px;
    font-family: var(--font-ui); line-height: 1.5;
}

/* .ts-toggle, .ts-toggle > summary, .ts-toggle > summary::-webkit-details-marker,
   .ts-toggle-label, .ts-toggle-val : migrés vers carbon.css (lot S4.c 1g) */
.ts-toggle > summary::after {
    content: '▾';
    font-size: var(--text-xs);
    color: var(--text-dim);
    margin-left: 6px;
    transition: transform 0.15s ease;
}
.ts-toggle[open] > summary::after { transform: rotate(180deg); }
.ts-toggle-body  {
    padding: 10px 12px 12px 12px;
    border-top: 1px dashed var(--border-color);
    font-size: 12px;
    color: var(--text-main);
    line-height: 1.55;
}
.ts-toggle-red    { border-left: 3px solid var(--status-red); }
.ts-toggle-orange { border-left: 3px solid var(--status-orange); }

.ts-kv-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 12px;
    font-family: var(--font-ui);
}
.ts-kv-row + .ts-kv-row { border-top: 1px dashed var(--border-color); }
.ts-kv-row > span { color: var(--text-dim); }
.ts-kv-note {
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--bg-card);
    border-left: 2px solid var(--text-dim);
    border-radius: 0 4px 4px 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

.ts-formula-footer {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--bg-card);
    border-radius: 4px;
    font-size: var(--text-xs);
    color: var(--text-dim);
    line-height: 1.55;
    font-family: var(--font-ui);
}

.ts-rebuild-gap {
    background: var(--bg-card);
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 2px solid var(--border-color);
    margin-bottom: 10px;
    font-family: var(--font-code);
    font-size: 12px;
    color: var(--text-muted);
}
.ts-rebuild-gap strong { color: var(--text-main); }

.ts-block-title {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    margin: 8px 0 4px 0;
    font-family: var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ts-plan-list {
    margin: 0 0 10px 0;
    padding-left: 16px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.6;
    font-family: var(--font-ui);
}
.ts-plan-list strong { color: var(--text-main); }
.ts-plan-list-muted { color: var(--text-muted); }
.ts-plan-list-muted strong { color: var(--text-main); }

.ts-warning-box {
    padding: 8px 10px;
    background: var(--bg-card);
    border-left: 2px solid var(--text-dim);
    border-radius: 4px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.55;
    font-family: var(--font-ui);
}
.ts-warning-box strong { color: var(--text-main); }
.ts-warning-box ul { margin: 4px 0 0 0; padding-left: 14px; }

.ts-leviers-list {
    margin: 0;
    padding-left: 16px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.6;
    font-family: var(--font-ui);
}
.ts-leviers-list > li + li { margin-top: 4px; }
.ts-levier-actions { color: var(--text-dim); font-size: var(--text-xs); }
.ts-impact { color: var(--text-dim); font-size: var(--text-2xs); }
.ts-principle {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--border-color);
    font-size: var(--text-xs);
    color: var(--text-dim);
    line-height: 1.55;
    font-family: var(--font-ui);
}
.ts-confidence-note {
    font-size: var(--text-xs);
    color: var(--text-dim);
    margin-top: 4px;
    font-style: italic;
}

/* Responsive: tablette */
@media (max-width: 1100px) {
    .journal-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .journal-grid { grid-template-columns: repeat(2, 1fr); }
    .journal-day { min-height: 140px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAV TOP 3-tabs — partagé entre /today, /plan, /analysis
   ═══════════════════════════════════════════════════════════════════════════ */
.main-nav {
    display: flex;
    gap: 6px;
    margin: 12px 0 18px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-ui);
}
.main-nav-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.main-nav-tab:hover {
    color: var(--text-main);
    background: var(--bg-card-alt);
}
.main-nav-tab.active {
    color: var(--accent-yellow);
    background: var(--bg-card-alt);
    box-shadow: inset 0 -2px 0 var(--accent-yellow);
}
.main-nav-ico { font-size: 14px; }
@media (max-width: 600px) {
    .main-nav-lbl { display: none; }
    .main-nav-ico { font-size: 18px; }
    .main-nav-tab { padding: 12px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALERT BANNERS — partials _global_alerts.html
   ═══════════════════════════════════════════════════════════════════════════ */
.alert-banner {
    margin: 12px 0;
    padding: 14px 18px;
    border-radius: 8px;
    font-family: var(--font-ui);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.alert-banner-success { background: var(--status-green-bg); border: 2px solid var(--status-green); }
.alert-banner-danger  { background: var(--status-red-bg);   border: 2px solid var(--status-red); }
.alert-banner-ico { font-size: 22px; flex-shrink: 0; }
.alert-banner-body { flex: 1; }
.alert-banner-title {
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 4px;
}
.alert-banner-success .alert-banner-title { color: var(--status-green); }
.alert-banner-danger  .alert-banner-title { color: var(--status-red); }
.alert-banner-text {
    font-size: 12px;
    color: var(--text-main);
    line-height: 1.6;
    margin-bottom: 8px;
}
.alert-banner-meta { font-size: var(--text-xs); color: var(--text-dim); }
.alert-banner-reason {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 10px;
}
.alert-banner-effect {
    font-size: var(--text-xs);
    color: var(--text-dim);
    line-height: 1.5;
    padding: 6px 8px;
    background: var(--bg-card);
    border-radius: 4px;
    border-left: 2px solid var(--accent-blue);
    margin-bottom: 10px;
}
.alert-banner-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.alert-btn {
    padding: 6px 14px;
    background: var(--bg-card-alt);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-ui);
}
.alert-btn-warn   { border-color: var(--status-orange); }
.alert-btn-mute   { color: var(--text-muted); }
.alert-btn-danger {
    padding: 8px 16px;
    background: var(--status-red);
    color: #fff;
    border: none;
    font-weight: 800;
}
.text-muted-strong   { color: var(--text-muted); }
.text-warn-strong    { color: var(--status-orange); }
.text-success-strong { color: var(--status-green); }

/* Footer partagé /plan et /analysis */
.dashboard-footer {
    margin-top: 24px;
    padding: 16px 0;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-dim);
    font-family: var(--font-ui);
    border-top: 1px dashed var(--border-color);
}
.dashboard-footer a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
}
.dashboard-footer a:hover { color: var(--accent-yellow); }

/* === static/css/layout.css === */
/* layout.css — App shell: sidebar + content area + bottom nav */

/* ── APP SHELL ──────────────────────────────────────────── */
.app-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ── TOPBAR (ex-sidebar reconfiguré en barre horizontale) ── */
.sidebar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--topbar-h);
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
    padding: 0 var(--sp-4);
    z-index: var(--z-sidebar);
    overflow: visible;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0;
    flex-shrink: 0;
}

.sidebar-logo {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-main);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-ui);
    font-weight: var(--weight-black);
    font-size: var(--text-sm);
    color: var(--accent-yellow);
    flex-shrink: 0;
}

.sidebar-title {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

/* Macro pill */
.sidebar-macro {
    margin: 0;
    padding: 4px var(--sp-3);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    white-space: nowrap;
    flex-shrink: 0;
}

.sidebar-macro-phase {
    font-weight: var(--weight-bold);
    color: var(--accent-teal, var(--accent-yellow));
}

.sidebar-macro-jcount {
    color: var(--text-dim);
}

/* Nav sections — désormais inline horizontal */
.sidebar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-nav-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 var(--sp-2);
    display: none;          /* labels d'ancienne sidebar verticale, masqués en topbar */
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px var(--sp-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    transition: background var(--tr-fast), color var(--tr-fast);
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: 0;
    height: calc(var(--topbar-h) - 16px);
}

.sidebar-link:hover {
    background: var(--sidebar-hover);
    color: var(--text-main);
}

.sidebar-link.active {
    background: var(--sidebar-active);
    color: var(--sidebar-active-text);
    font-weight: var(--weight-semi);
}

.sidebar-link-icon {
    width: 20px; height: 20px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}

.sidebar-link-icon svg {
    width: 18px; height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--sp-2) var(--sp-4);
}

/* Workflow widget */
.sidebar-workflow {
    padding: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-1);
}

.sidebar-workflow-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--sp-2);
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--tr-fast);
}

.workflow-step:hover { background: var(--sidebar-hover); }

.workflow-step-check {
    width: 16px; height: 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: border-color var(--tr-fast), background var(--tr-fast);
}

.workflow-step.done .workflow-step-check {
    background: var(--status-green);
    border-color: var(--status-green);
}

.workflow-step.done .workflow-step-check svg {
    stroke: #fff;
}

.workflow-step-time {
    margin-left: auto;
    font-family: var(--font-ui);
    font-size: 10px;
    color: var(--text-dim);
}

/* Quick stats */
.sidebar-stats {
    margin-top: auto;
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: var(--sp-4);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
}

.sidebar-stat-label {
    color: var(--text-dim);
    font-size: 10px;
    text-transform: uppercase;
}

.sidebar-stat-value {
    font-weight: var(--weight-bold);
    color: var(--text-main);
}

/* Theme toggle (footer ex-sidebar → fin de topbar) */
.sidebar-footer {
    padding: 0;
    border-top: none;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
    flex-shrink: 0;
}
.sidebar-footer .text-xs.text-dim.text-mono { display: none; }   /* "v3.0" cacher en topbar pour gagner de la place */

.sidebar-footer .theme-toggle {
    position: static;
    inset: auto;
    z-index: auto;
    padding: 0;
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background var(--tr-fast);
}

.theme-toggle:hover { background: var(--sidebar-hover); }

.theme-toggle svg {
    width: 18px; height: 18px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 1.8;
}

/* Show sun in dark mode, moon in light mode */
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* Logout (footer) — même style que theme-toggle, accent rouge au hover */
.sidebar-logout {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    text-decoration: none;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.sidebar-logout:hover {
    background: var(--sidebar-hover);
    color: var(--accent-red);
}
.sidebar-logout svg { width: 18px; height: 18px; }

/* ── CONTENT AREA ───────────────────────────────────────── */
.content-area {
    margin-left: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.content-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--bg-main) 85%, transparent);
    border-bottom: 1px solid var(--border-color);
    padding: var(--sp-5) var(--sp-8) var(--sp-4);
    margin-bottom: var(--sp-6);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-height: 72px;
    box-sizing: border-box;
}

/* Keep trailing element compact so header height stays fixed */
.content-header-right > * {
    max-height: 40px;
    display: inline-flex;
    align-items: center;
}

.content-header-left {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    flex-wrap: wrap;
    min-width: 0;
}

/* .content-title : règle finale dans carbon.css (font-display italic, 38px). */
/* .content-date : règle finale dans carbon.css (font-mono uppercase). */

.content-body {
    flex: 1;
    padding: var(--content-pad);
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
    container-type: inline-size;
    container-name: content;
}

/* ── BOTTOM NAV (mobile) ────────────────────────────────── */
.bottom-nav {
    display: none; /* hidden on desktop */
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-h);
    background: var(--bottom-nav-bg);
    border-top: 1px solid var(--bottom-nav-border);
    z-index: var(--z-bottom-nav);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: var(--bottom-nav-h);
    max-width: 500px;
    margin: 0 auto;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: var(--weight-semi);
    transition: color var(--tr-fast);
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item.active {
    color: var(--accent-teal, var(--accent-yellow));
}

/* Active indicator dot under icon */
.bottom-nav-item.active::after {
    content: '';
    display: block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent-teal, var(--accent-yellow));
    margin-top: 2px;
}

.bottom-nav-item svg {
    width: 22px; height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */

/* Tablet : topbar compacte, masque la pill macro pour gagner de la place */
@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar { gap: var(--sp-2); padding: 0 var(--sp-3); }
    .sidebar-macro { display: none; }
    .sidebar-link-num { display: none; }
}

/* Mobile : topbar masquée, bottom-nav prend le relais */
@media (max-width: 767px) {
    .sidebar { display: none; }

    .content-area {
        margin-left: 0;
        /* Only account for bottom-nav height; the nav itself handles safe-area */
        padding-bottom: var(--bottom-nav-h);
    }

    .content-header {
        padding: var(--sp-3) var(--sp-4);
        /* Safe-area for notch devices */
        padding-top: max(var(--sp-3), env(safe-area-inset-top, 0));
    }

    .content-body {
        padding: var(--sp-4);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bottom-nav {
        display: block;
    }
}

/* Container queries for content-area components */
@container content (max-width: 600px) {
    .metrics-row { grid-template-columns: repeat(2, 1fr); }
}

@container content (max-width: 400px) {
    .metrics-row { grid-template-columns: 1fr; }
}

/* === static/css/components.css === */
/* components.css — Reusable UI components */

/* ── CARD ────────────────────────────────────────────────── */
/* Base (carbon override les visuels via .card, .step-card dans carbon.css :
   border-radius, box-shadow, font-family du header, etc. — voir carbon.css
   pour la typo carbon des cards). */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
    margin-bottom: var(--sp-5);
    box-shadow: none;
    transition: background var(--tr-normal), border-color var(--tr-normal);
}

.card--flush { padding: 0; }

/* Flex spacer to push trailing pills/tags to the right */
.card-header::after {
    content: '';
    flex: 1;
}

/* ── READINESS HERO ─────────────────────────────────────── */
.readiness-hero {
    padding: var(--sp-6);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
}

/* .readiness-pill : forme finale dans carbon.css (transparent + cercle 12px,
   override total avec !important). Les variantes --go/--adjust/--rest
   utilitaires restent ici en fallback pour les surfaces qui n'appliquent
   pas carbon. */
.readiness-pill--go     { background: var(--status-green-bg); color: var(--status-green); }
.readiness-pill--adjust { background: var(--status-orange-bg); color: var(--status-orange); }
.readiness-pill--rest   { background: var(--status-red-bg); color: var(--status-red); }

.readiness-score {
    font-family: var(--font-ui);
    font-size: var(--text-2xl);
    font-weight: var(--weight-black);
}

.readiness-meta {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* ── METRICS ROW ────────────────────────────────────────── */
.metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--sp-3);
}

.metric {
    background: var(--bg-card-alt);
    border: 1px solid var(--border-color);
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    transition: background var(--tr-normal), border-color var(--tr-normal);
}

/* .metric-label : règle finale dans carbon.css (font-mono uppercase). */

.metric-value {
    font-family: var(--font-ui);
    font-size: var(--text-xl);
    font-weight: var(--weight-heavy);
    color: var(--text-main);
    letter-spacing: -0.02em;
}

.metric-value--positive { color: var(--status-green); }
.metric-value--negative { color: var(--status-red); }
.metric-value--warning  { color: var(--status-orange); }

/* ── SPORT BADGE ────────────────────────────────────────── */
.sport-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    font-family: var(--font-ui);
}

.sport-badge--swim { background: var(--sport-swim-bg); color: var(--sport-swim-dot); }
.sport-badge--bike { background: var(--sport-bike-bg); color: var(--sport-bike-dot); }
.sport-badge--run  { background: var(--sport-run-bg);  color: var(--sport-run-dot); }
.sport-badge--renf { background: var(--sport-renf-bg); color: var(--sport-renf-dot); }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semi);
    font-size: var(--text-sm);
    line-height: 1.3;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--tr-fast);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--accent-teal, var(--accent-yellow));
    color: #0a0d14;
    font-weight: var(--weight-bold);
}
.btn-primary:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-secondary {
    background: var(--bg-card-alt);
    border-color: var(--border-color);
    color: var(--text-main);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-elevated); }

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-card-alt); color: var(--text-main); }

.btn-danger {
    background: var(--status-red-bg);
    color: var(--status-red);
}
.btn-danger:hover:not(:disabled) { filter: brightness(1.1); }

.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--sp-3) var(--sp-6); font-size: var(--text-base); }

/* ── INDICATOR (Couzens-style) ──────────────────────────── */
.indicator {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-left: 3px solid var(--border-color);
    font-size: var(--text-sm);
}

.indicator--green  { border-left-color: var(--status-green); }
.indicator--orange { border-left-color: var(--status-orange); }
.indicator--red    { border-left-color: var(--status-red); }
.indicator--grey   { border-left-color: var(--status-grey); }

.indicator-name { color: var(--text-muted); min-width: 80px; }
.indicator-value {
    font-family: var(--font-ui);
    font-weight: var(--weight-bold);
}

/* ── DRAWER / BOTTOM SHEET ──────────────────────────────── */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: var(--drawer-backdrop);
    z-index: var(--z-drawer-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tr-normal), visibility var(--tr-normal);
}

.drawer-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 440px;
    max-width: 100vw;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--tr-normal);
    overflow-y: auto;
}

.drawer.open { transform: translateX(0); }

/* ── Variante "bottom sheet" (Lot 6 dock-restructure, 2026-05-21) ────
   Slide-up depuis le bas, centré, largeur limitée. Cohérent avec le
   sheet du wizard --docked. Utilisée par les drawers Matériel et
   Analyse ouverts depuis le .strat-dock central. Override les règles
   .drawer base (top/right/bottom 0 + translateX) : on doit donc
   recalculer la position + l'animation. */
.drawer.drawer--bottom {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    width: min(1100px, calc(100% - 32px));
    max-width: 100%;
    height: min(72vh, 760px);
    max-height: 92vh;
    border-left: none;
    border-top: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;
    transform: translate(-50%, 100%);
    /* PAS d'ombre quand ferme : le drawer est translate(100%) hors viewport,
       mais son box-shadow projetait quand meme vers le haut (offset -24px
       blur 64px) et apparaissait derriere le .strat-dock comme un halo
       gris flou — confirme par debug Playwright (computed box-shadow sur
       .strat-dock = none, mais drawers fermes avaient l'ombre visible).
       L'ombre est ajoutee uniquement quand .open (drawer dans viewport). */
}
.drawer.drawer--bottom.open {
    transform: translate(-50%, 0);
    box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.55);
}
html[data-theme="light"] .drawer.drawer--bottom.open {
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}
.drawer.drawer--bottom .drawer-header {
    /* Petite poignee visuelle en haut (style iOS bottom sheet) */
    position: relative;
    padding-top: calc(var(--sp-4) + 8px);
}
.drawer.drawer--bottom .drawer-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    opacity: 0.6;
}
@media (max-width: 600px) {
    .drawer.drawer--bottom {
        width: 100%;
        height: min(85vh, 100%);
        border-radius: 12px 12px 0 0;
    }
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
}

/* .drawer-title : forme finale dans carbon.css (font-display italic). */

.drawer-close {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--tr-fast);
}

.drawer-close:hover { background: var(--bg-card-alt); }

.drawer-close svg {
    width: 18px; height: 18px;
    stroke: var(--text-muted);
    stroke-width: 2;
}

.drawer-body {
    flex: 1;
    padding: var(--sp-5);
}

.drawer-footer {
    padding: var(--sp-4) var(--sp-5);
    padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-color);
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
}

/* Mobile: bottom sheet */
@media (max-width: 767px) {
    .drawer {
        top: auto; right: 0; left: 0; bottom: 0;
        width: 100%;
        max-height: 85dvh;
        border-left: none;
        border-top: 1px solid var(--border-color);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(100%);
    }

    .drawer.open { transform: translateY(0); }

    .drawer-header::before {
        content: '';
        position: absolute;
        top: 8px; left: 50%;
        transform: translateX(-50%);
        width: 32px; height: 4px;
        background: var(--border-color);
        border-radius: 2px;
    }
}

/* ── INFO BUTTON (i) — opens generic info drawer ────────────────── */
.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 6px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-display, var(--font-ui));
    font-style: italic;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    vertical-align: baseline;
    transition: color var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
}
.info-btn::before { content: 'i'; }
.info-btn:hover {
    color: var(--text-main);
    border-color: var(--text-main);
    background: var(--bg-card-alt);
}
.info-btn:focus-visible {
    outline: 2px solid var(--accent-coral, var(--accent-yellow));
    outline-offset: 2px;
}

/* ── INFO DRAWER body styling ───────────────────────────────────── */
.drawer--info .drawer-body { padding-bottom: var(--sp-7); }

.info-section {
    padding: var(--sp-3) 0;
    border-bottom: 1px dashed var(--border-color);
}
.info-section:last-child { border-bottom: none; }
.info-section + .info-section { padding-top: var(--sp-4); }

.info-h {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 var(--sp-2) 0;
}

.info-section p {
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-main);
    margin: 0 0 var(--sp-2) 0;
}
.info-section p:last-child { margin-bottom: 0; }

.info-section ul {
    margin: 0;
    padding-left: 18px;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-main);
}
.info-section li { margin-bottom: 3px; }

.info-section code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--bg-card-alt);
    padding: 1px 5px;
    border-radius: 3px;
}

.info-refs {
    font-size: var(--text-xs) !important;
    color: var(--text-dim) !important;
    font-style: italic;
}

.info-missing {
    color: var(--status-orange);
    font-size: var(--text-sm);
    font-style: italic;
}

/* ── FORM FIELDS ────────────────────────────────────────── */
.form-group {
    margin-bottom: var(--sp-4);
}

.form-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: var(--sp-2);
}

.form-input {
    width: 100%;
    padding: var(--sp-3);
    background: var(--bg-card-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-main);
    transition: border-color var(--tr-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Segmented control (1-2-3 buttons) */
.seg-group {
    display: flex;
    gap: 2px;
    background: var(--bg-card-alt);
    border-radius: var(--radius-sm);
    padding: 2px;
    border: 1px solid var(--border-color);
}

.seg-btn {
    flex: 1;
    padding: var(--sp-2) var(--sp-3);
    border-radius: 3px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-align: center;
    cursor: pointer;
    transition: all var(--tr-fast);
    color: var(--text-muted);
}

.seg-btn.active {
    background: var(--accent-teal, var(--accent-yellow));
    color: #0b0c0f;
}

/* Pill selectors */
.pill-group {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.pill {
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    cursor: pointer;
    transition: all var(--tr-fast);
    color: var(--text-muted);
}

.pill.active {
    background: var(--accent-teal, var(--accent-yellow));
    color: #0b0c0f;
    border-color: var(--accent-teal, var(--accent-yellow));
}

/* ── TOAST ──────────────────────────────────────────────── */
.toast {
    position: fixed;
    top: var(--sp-5);
    right: var(--sp-5);
    padding: var(--sp-3) var(--sp-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-main);
    z-index: var(--z-toast);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--tr-fast), transform var(--tr-fast);
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast--success { border-left: 3px solid var(--status-green); }
.toast--warning { border-left: 3px solid var(--status-orange); }
.toast--error   { border-left: 3px solid var(--status-red); }

@media (max-width: 767px) {
    .toast {
        top: auto;
        bottom: calc(var(--bottom-nav-h) + var(--sp-3));
        right: var(--sp-4);
        left: var(--sp-4);
    }
}

/* ── LOGIN PAGE ─────────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--bg-main);
    padding: var(--sp-6);
    color: var(--text-main);
    font-family: 'Space Grotesk', system-ui, sans-serif;
}
.login-card {
    width: min(380px, 100%);
    padding: var(--sp-8);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
}
.login-brand-logo {
    display: inline-grid;
    place-items: center;
    width: 36px; height: 36px;
    background: var(--accent-teal);
    color: var(--bg-main);
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: var(--text-base);
}
.login-brand-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-main);
}
.login-brand-accent { color: var(--accent-teal); }
.login-card form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.login-card label {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.login-card input {
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: var(--text-base);
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
}
.login-card input:focus {
    outline: none;
    border-color: var(--accent-teal);
}
.login-card button {
    margin-top: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--accent-teal);
    color: var(--bg-main);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: inherit;
}
.login-card button:hover { filter: brightness(1.08); }
.login-error {
    padding: var(--sp-3) var(--sp-4);
    background: rgba(184, 84, 80, 0.12);
    border: 1px solid rgba(184, 84, 80, 0.4);
    border-radius: var(--radius-md);
    color: var(--accent-red);
    font-size: var(--text-sm);
    text-align: center;
    margin-bottom: var(--sp-4);
}

/* ── SOFT DELETE DIALOG (RULE-AUTHORING-003) ─────────────── */
/* Modal natif <dialog> ouvert par IC.SoftDelete.promptCancel. */
.ic-softdelete-dialog {
    border: none;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 0;
    max-width: 520px;
    width: calc(100vw - var(--sp-6));
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.ic-softdelete-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}
.ic-softdelete-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
}
.ic-softdelete-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-heavy);
}
.ic-softdelete-summary {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: var(--sp-2) var(--sp-3);
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
}
.ic-softdelete-doctrine {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-style: italic;
}
.ic-softdelete-cats {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.ic-softdelete-cat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.ic-softdelete-cat:hover {
    border-color: var(--accent-amber, var(--text-primary));
    background: rgba(255, 255, 255, 0.04);
}
.ic-softdelete-cat input[type="radio"] {
    grid-row: 1 / span 2;
    align-self: center;
    accent-color: var(--accent-amber, var(--text-primary));
}
.ic-softdelete-cat-label {
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
}
.ic-softdelete-cat-hint {
    font-size: var(--text-xs);
    color: var(--text-dim);
}
.ic-softdelete-cat:has(input:checked) {
    border-color: var(--accent-amber, var(--text-primary));
    background: rgba(255, 184, 60, 0.08);
}
.ic-softdelete-reason-label {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.ic-softdelete-reason {
    width: 100%;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
    resize: vertical;
}
.ic-softdelete-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}
.ic-softdelete-cancel,
.ic-softdelete-confirm {
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
    border: 1px solid transparent;
}
.ic-softdelete-cancel {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-muted);
}
.ic-softdelete-confirm {
    background: var(--accent-red, #c0392b);
    color: white;
}
.ic-softdelete-confirm:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Marker ⊘ : cellule strat-cell annulée. Désature et barre légèrement. */
.strat-cell--cancelled {
    opacity: 0.55;
    position: relative;
}
.strat-cell--cancelled .strat-cell-name,
.strat-cell--cancelled .strat-cell-meta {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.strat-cell-status--cancelled {
    color: var(--accent-amber, var(--text-muted));
    font-weight: var(--weight-heavy);
}

/* ── Daily prompt hint — question rotative au-dessus des champs texte ───
   Rendue par static/js/daily_prompts.js. Discret, italique, ton secondaire :
   doit guider sans concurrencer le label. */
.daily-prompt-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.35;
    margin: 0 0 var(--sp-2) 0;
    padding: 0;
}

/* ── UTILITIES ──────────────────────────────────────────── */
.text-mono { font-family: var(--font-ui); }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.font-bold { font-weight: var(--weight-bold); }
.font-heavy { font-weight: var(--weight-heavy); }
.uppercase { text-transform: uppercase; letter-spacing: 0.5px; }
.flex-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.flex-col { display: flex; flex-direction: column; gap: var(--sp-3); }
.grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.grid-2col > * { min-width: 0; }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.mt-4 { margin-top: var(--sp-4); }
.mb-4 { margin-bottom: var(--sp-4); }
.hidden { display: none !important; }

/* ── Routes Card (B4) — widget "3 routes adaptées à la séance" ───────────
   Utilisé dans /today (sous la pillule séance) et /strategie (drawer détail).
   Rendu compact, mobile-first, mini-tracé SVG normalisé.                   */
.rc-root {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--bg-elevated, rgba(255,255,255,0.02));
    border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
    border-radius: 6px;
    font-family: var(--font-ui);
}
.rc-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-2);
}
.rc-kicker {
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}
.rc-relaxed-note {
    font-size: 10px;
    color: var(--status-orange, #D4925E);
    text-transform: lowercase;
    font-style: italic;
}
.rc-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.rc-item {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-card, rgba(255,255,255,0.03));
    border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
    border-left: 3px solid var(--accent-teal, #E8745A);
    border-radius: 4px;
    align-items: center;
    /* Cliquable → ouvre le drawer détail (carte Leaflet). */
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
    font: inherit;
    color: inherit;
}
.rc-item:hover {
    background: var(--bg-elevated, rgba(255,255,255,0.06));
}
.rc-item:active {
    transform: translateY(1px);
}
.rc-item:focus-visible {
    outline: 2px solid var(--accent-teal, #E8745A);
    outline-offset: 2px;
}
.rc-item--flat     { border-left-color: var(--accent-blue,   #7BA8B5); }
.rc-item--rolling  { border-left-color: var(--accent-green,  #7FA56B); }
.rc-item--hilly    { border-left-color: var(--accent-yellow, #C4A961); }
.rc-item--mountain { border-left-color: var(--accent-red,    #B85450); }
.rc-item--unknown  { border-left-color: var(--text-muted); }
.rc-mini-wrap {
    flex: 0 0 80px;
    height: 48px;
}
.rc-mini {
    width: 100%;
    height: 100%;
    display: block;
}
.rc-mini polyline {
    stroke: var(--text-main);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}
.rc-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rc-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
}
.rc-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rc-passages {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.rc-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.rc-meta .rc-sep { opacity: 0.4; }
.rc-badges {
    margin-top: 2px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.rc-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rc-badge--flat     { background: rgba(123,168,181,0.18); color: #B8D8E0; }
.rc-badge--rolling  { background: rgba(127,165,107,0.18); color: #C8E0B8; }
.rc-badge--hilly    { background: rgba(196,169,97,0.18);  color: #E5D2A0; }
.rc-badge--mountain { background: rgba(184,84,80,0.18);   color: #F0B0AE; }
.rc-loader,
.rc-empty,
.rc-error {
    font-size: 12px;
    color: var(--text-muted);
    padding: var(--sp-2) 0;
    font-style: italic;
}
.rc-error { color: var(--accent-red, #B85450); font-style: normal; }

/* ── Variante "wide" — drawers qui hébergent du contenu riche (Route Detail
   B5 carte+profil, analyse séance complète IC.ActivityView dans le drawer
   /strategie). Note : le `.drawer` de base impose width:440px, donc on doit
   override la `width` ET la `max-width`. La combo `.drawer--right.drawer--wide`
   bat la règle `drawer--right` simple (spécificité 0,3,0 vs 0,2,0). */
.drawer.drawer--wide {
    width: min(800px, 100vw);
    max-width: min(800px, 100vw);
}
.drawer.drawer--right.drawer--wide {
    width: min(800px, 100vw);
    max-width: min(800px, 100vw);
}
@media (max-width: 900px) {
    .drawer.drawer--wide,
    .drawer.drawer--right.drawer--wide { width: 100vw; max-width: 100vw; }
}
#drawer-route-detail .drawer-body {
    padding: var(--sp-4);
    overflow-y: auto;
}
.rd-loader,
.rd-error {
    font-size: 13px;
    color: var(--text-muted);
    padding: var(--sp-4) 0;
    text-align: center;
}
.rd-error { color: var(--accent-red, #B85450); }
.rd-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.rd-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-2);
    background: var(--bg-card, rgba(255,255,255,0.03));
    border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
    border-radius: 4px;
}
.rd-stat-lbl {
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px;
}
.rd-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}
.rd-badges {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}
.rd-badge {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rd-badge--flat     { background: rgba(123,168,181,0.18); color: #B8D8E0; }
.rd-badge--rolling  { background: rgba(127,165,107,0.18); color: #C8E0B8; }
.rd-badge--hilly    { background: rgba(196,169,97,0.18);  color: #E5D2A0; }
.rd-badge--mountain { background: rgba(184,84,80,0.18);   color: #F0B0AE; }
.rd-period {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}
.rd-map {
    width: 100%;
    height: 320px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: var(--sp-3);
    background: var(--bg-card, rgba(255,255,255,0.03));
}
.rd-map-marker {
    color: var(--text-main);
    font-size: 14px;
    text-align: center;
    line-height: 14px;
    text-shadow: 0 0 3px rgba(0,0,0,0.7);
}
.rd-map-marker--start { color: #7FA56B; }
.rd-map-marker--end   { color: #B85450; }
.rd-section {
    margin-top: var(--sp-4);
}
.rd-section-kicker {
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: var(--sp-2);
}
.rd-alt-svg {
    width: 100%;
    height: auto;
    background: var(--bg-card, rgba(255,255,255,0.03));
    border-radius: 4px;
    display: block;
}
.rd-alt-line {
    stroke: var(--accent-teal, #E8745A);
    stroke-width: 1.5;
    fill: none;
}
.rd-alt-fill {
    fill: var(--accent-teal, #E8745A);
    opacity: 0.18;
}
.rd-alt-grid {
    stroke: var(--text-muted);
    stroke-width: 0.5;
    opacity: 0.2;
}
.rd-alt-tick {
    font-size: 9px;
    fill: var(--text-muted);
    font-family: var(--font-ui);
}
.rd-alt-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: var(--sp-2) 0;
    font-style: italic;
}
.rd-passages-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rd-passages-empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
.rd-passage {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px var(--sp-2);
    background: var(--bg-card, rgba(255,255,255,0.03));
    border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
    border-radius: 4px;
    text-decoration: none;
    color: var(--text-main);
    font-size: 12px;
    transition: background 0.15s ease;
}
.rd-passage:hover {
    background: var(--bg-elevated, rgba(255,255,255,0.06));
}
.rd-passage-date {
    font-weight: 600;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.rd-passage-meta {
    color: var(--text-muted);
    flex: 1 1 auto;
}
.rd-passage-arrow {
    color: var(--text-muted);
    font-size: 14px;
}
/* Sur petit écran : 2 stats par ligne, drawer pleine largeur. */
@media (max-width: 640px) {
    .rd-stats { grid-template-columns: repeat(2, 1fr); }
    .rd-map { height: 240px; }
    .drawer.drawer--wide { max-width: 100%; }
}

/* ── WIZARD planification 5 étapes ─────────────────────────────
   Modal sheet plein écran déclenché par le bouton "PLANIFIER LA
   SEMAINE". Singleton DOM créé dynamiquement par wizard.js. Z-index
   au-dessus des drawers existants (.drawer = z-index ~100). */
.wizard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4, 16px);
}
.wizard-overlay[hidden] { display: none; }
body.wizard-open { overflow: hidden; }
/* Adoucit le push de la page quand le sheet change de hauteur entre
   étapes (paddingBottom recalculé par _wizardUpdateBodyPadding). */
body.wizard-docked {
    transition: padding-bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-sheet {
    background: var(--bg-card, #14181c);
    border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
    border-radius: 8px;
    width: min(960px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.wizard-head {
    display: flex;
    align-items: center;
    gap: var(--sp-4, 16px);
    padding: var(--sp-4, 16px) var(--sp-5, 20px);
    border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.08));
    flex: 0 0 auto;
}
.wizard-title-block { flex: 0 0 auto; }
.wizard-kicker {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.wizard-title {
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main, #fff);
}

.wizard-stepbar {
    display: flex;
    gap: 6px;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.wizard-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
    border-radius: 999px;
    color: var(--text-muted, rgba(255,255,255,0.55));
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wizard-chip:hover {
    background: var(--bg-elevated, rgba(255,255,255,0.07));
    color: var(--text-main, #fff);
}
.wizard-chip-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-elevated, rgba(255,255,255,0.07));
    color: var(--text-muted, rgba(255,255,255,0.55));
    font-size: 10px;
    font-weight: 700;
}
.wizard-chip--active {
    background: var(--accent-teal, #5fa8a8);
    color: #0a0d10;
    border-color: var(--accent-teal, #5fa8a8);
}
.wizard-chip--active .wizard-chip-num {
    background: rgba(0,0,0,0.25);
    color: #0a0d10;
}
.wizard-chip--done {
    color: var(--text-main, #fff);
    border-color: var(--accent-teal, #5fa8a8);
}
.wizard-chip--done .wizard-chip-num {
    background: var(--accent-teal, #5fa8a8);
    color: #0a0d10;
}
.wizard-chip--optional {
    border-style: dashed;
}
/* Étape antérieure non-frozen : invalidée par un retour en arrière, à
   rejouer. Visuellement distincte du done (--done = vert teal) :
   bordure jaune pour signaler "attente de revalidation". */
.wizard-chip--invalidated {
    border-color: var(--accent-yellow, #c8a13b);
    color: var(--accent-yellow, #c8a13b);
}
.wizard-chip--invalidated .wizard-chip-num {
    background: rgba(200, 161, 59, 0.18);
    color: var(--accent-yellow, #c8a13b);
}

.wizard-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
    color: var(--text-muted, rgba(255,255,255,0.55));
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.wizard-close:hover {
    background: var(--bg-elevated, rgba(255,255,255,0.07));
    color: var(--text-main, #fff);
}

.wizard-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--sp-5, 20px) var(--sp-5, 20px);
    color: var(--text-main, #fff);
}

.wizard-loading,
.wizard-error {
    padding: var(--sp-5, 20px);
    text-align: center;
    color: var(--text-muted, rgba(255,255,255,0.55));
    font-size: 13px;
}
.wizard-error { color: var(--accent-red, #B85450); }
.wizard-error-detail {
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.7;
    font-family: var(--font-mono, monospace);
}

.wizard-step-hint {
    margin: 0 0 var(--sp-4, 16px);
    padding: 8px 12px;
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    border-left: 3px solid var(--accent-teal, #5fa8a8);
    color: var(--text-muted, rgba(255,255,255,0.65));
    font-size: 12px;
    border-radius: 2px;
}

.wizard-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-3, 12px);
    margin-bottom: var(--sp-5, 20px);
}
.wizard-card {
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
    border-radius: 6px;
}
.wizard-card-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255,255,255,0.55));
    margin-bottom: 4px;
}
.wizard-card-val {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main, #fff);
    font-variant-numeric: tabular-nums;
}
.wizard-card-unit {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, rgba(255,255,255,0.55));
    margin-left: 2px;
}
.wizard-card-sub {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted, rgba(255,255,255,0.55));
}

.wizard-section {
    margin-top: var(--sp-4, 16px);
    padding-top: var(--sp-4, 16px);
    border-top: 1px solid var(--border-soft, rgba(255,255,255,0.06));
}
.wizard-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255,255,255,0.55));
    margin-bottom: var(--sp-3, 12px);
}
.wizard-counts-row {
    display: flex;
    gap: var(--sp-3, 12px);
    flex-wrap: wrap;
}
.wizard-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.wizard-count-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.wizard-count-val {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main, #fff);
}
.wizard-milestones-hint {
    font-size: 12px;
    font-style: italic;
    color: var(--text-muted, rgba(255,255,255,0.45));
}

.wizard-step--stub {
    text-align: center;
    padding: var(--sp-6, 32px) var(--sp-4, 16px);
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.wizard-stub-icon { font-size: 32px; opacity: 0.4; }
.wizard-stub-title {
    margin-top: var(--sp-3, 12px);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main, #fff);
}
.wizard-stub-detail {
    margin-top: 6px;
    font-size: 13px;
}
.wizard-stub-meta {
    margin-top: var(--sp-3, 12px);
    font-size: 11px;
    opacity: 0.6;
    font-style: italic;
}

.wizard-foot {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    padding: var(--sp-3, 12px) var(--sp-5, 20px);
    border-top: 1px solid var(--border-soft, rgba(255,255,255,0.08));
    flex: 0 0 auto;
}
.wizard-foot-spacer { flex: 1 1 auto; }
.wizard-btn {
    padding: 8px 18px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.wizard-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wizard-btn--ghost {
    background: transparent;
    border: 1px solid var(--border-soft, rgba(255,255,255,0.12));
    color: var(--text-muted, rgba(255,255,255,0.65));
}
.wizard-btn--ghost:not(:disabled):hover {
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    color: var(--text-main, #fff);
}
.wizard-btn--primary {
    background: var(--accent-teal, #5fa8a8);
    border: 1px solid var(--accent-teal, #5fa8a8);
    color: #0a0d10;
}
.wizard-btn--primary:not(:disabled):hover {
    filter: brightness(1.08);
}
.wizard-btn--warn {
    background: transparent;
    border: 1px solid var(--accent-yellow, #c8a13b);
    color: var(--accent-yellow, #c8a13b);
}
.wizard-btn--warn:not(:disabled):hover {
    background: rgba(200, 161, 59, 0.12);
}

/* Stepbar compactée sur mobile : on cache les labels, on garde les
   numéros. Le sheet prend toute la largeur. */
@media (max-width: 720px) {
    .wizard-overlay { padding: 0; }
    .wizard-sheet { border-radius: 0; max-height: 100vh; height: 100vh; width: 100vw; }
    .wizard-head { flex-wrap: wrap; }
    .wizard-stepbar { order: 3; width: 100%; justify-content: space-between; }
    .wizard-chip-lbl { display: none; }
    .wizard-chip { padding: 6px; }
}

/* ── Wizard étape 1 éditable : budget + counts + milestones (lot 2) ── */
.wizard-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px;
    background: var(--bg-elevated, rgba(255,255,255,0.07));
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.wizard-badge--manual {
    background: var(--accent-yellow, #c8a13b);
    color: #0a0d10;
}

.wizard-budget-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4, 16px);
    flex-wrap: wrap;
}
.wizard-budget-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wizard-budget-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted, rgba(255,255,255,0.55));
    text-transform: uppercase;
}
.wizard-budget-input {
    width: 110px;
    padding: 6px 10px;
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    border: 1px solid var(--border-soft, rgba(255,255,255,0.12));
    border-radius: 4px;
    color: var(--text-main, #fff);
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.wizard-budget-input:focus {
    outline: none;
    border-color: var(--accent-teal, #5fa8a8);
}
.wizard-budget-val {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main, #fff);
    font-variant-numeric: tabular-nums;
}
.wizard-btn--small {
    padding: 4px 10px;
    font-size: 10px;
}

.wizard-counts-edit-row {
    display: flex;
    gap: var(--sp-3, 12px);
    flex-wrap: wrap;
}
.wizard-count-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.wizard-count-edit .wizard-count-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.wizard-count-edit .wizard-count-val {
    min-width: 18px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main, #fff);
}
.wizard-count-bump {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid var(--border-soft, rgba(255,255,255,0.12));
    background: transparent;
    color: var(--text-muted, rgba(255,255,255,0.65));
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.wizard-count-bump:hover {
    background: var(--bg-elevated, rgba(255,255,255,0.07));
    color: var(--text-main, #fff);
}

.wizard-milestones-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wizard-milestone {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 12px;
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    border-radius: 4px;
    font-size: 12px;
}
.wizard-milestone-date {
    flex: 0 0 90px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, rgba(255,255,255,0.55));
    font-family: var(--font-mono, monospace);
    font-size: 11px;
}
.wizard-milestone-name {
    flex: 1 1 auto;
    color: var(--text-main, #fff);
    font-weight: 500;
}
.wizard-milestone-type,
.wizard-milestone-race {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 2px;
    background: var(--bg-elevated, rgba(255,255,255,0.07));
    color: var(--text-muted, rgba(255,255,255,0.65));
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.wizard-milestone-days {
    flex: 0 0 auto;
    color: var(--accent-teal, #5fa8a8);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Mode docked (étapes 2 et 3 — passe-muraille) ─────────────
   En étapes 2 (POOL) et 3 (PLACEMENT), le wizard libère la vue de la
   page pour que l'utilisateur puisse interagir avec le pool sidebar
   et le calendrier hebdo. On désactive l'overlay sombre et on
   transforme le sheet en barre flottante en bas. */
.wizard-overlay.wizard-overlay--docked {
    background: transparent;
    pointer-events: none;     /* clic à travers, sauf sur le sheet */
    align-items: flex-end;
    padding: 0;
    /* En docked, on n'occupe que le bas de l'écran (la zone du sheet
       + marges), pas tout le viewport. Sinon l'overlay fixed inset:0
       intercepte les wheel events à côté du sheet, même avec
       pointer-events: none — la roue ne scrolle plus la page sauf
       quand le pointeur est pile sur le sheet. */
    top: auto;
    height: auto;
}
.wizard-overlay.wizard-overlay--docked .wizard-sheet {
    pointer-events: auto;
    width: min(1280px, calc(100% - 32px));
    margin: 16px;
    /* Hauteur fixe (min = max) : le sheet ouvre directement à pleine
       hauteur, le contenu scrolle dedans. Évite le bounce de "petit
       loader → grand contenu" à l'ouverture, et la croissance par
       paliers quand step 1 charge weekly_pattern + milestones en async.
       Étape 1 la plus dense (3 cards + budget + counts + milestones)
       tient ici sans trop scroller ; étapes plus courtes (modulation,
       revue) ont un peu d'air en bas, acceptable. */
    height: min(60vh, 620px);
    min-height: min(60vh, 620px);
    max-height: min(60vh, 620px);
    border-radius: 8px;
    background: var(--bg-card, #14181c);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-soft, rgba(255,255,255,0.08));
}
body.wizard-docked { overflow: auto; }

/* En docked, le head est plus compact et le body affiche les
   indicateurs d'étape (recap chiffré). */
.wizard-sheet--docked .wizard-head { padding: 10px var(--sp-4, 16px); }
.wizard-sheet--docked .wizard-title { font-size: 13px; }
.wizard-sheet--docked .wizard-kicker { font-size: 9px; }
.wizard-sheet--docked .wizard-body { padding: var(--sp-3, 12px) var(--sp-4, 16px); }
.wizard-sheet--docked .wizard-foot { padding: 10px var(--sp-4, 16px); }

/* ── Recap d'étape (pool / placement) ────────────────────────── */
.wizard-recap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3, 12px);
    align-items: center;
}
.wizard-recap-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.wizard-recap-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.wizard-recap-val {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main, #fff);
}
.wizard-recap-item--warn {
    border-color: var(--accent-yellow, #c8a13b);
    color: var(--accent-yellow, #c8a13b);
}
.wizard-recap-item--ok {
    border-color: var(--accent-teal, #5fa8a8);
}

.wizard-step--docked {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 12px);
}
.wizard-step-hint--docked {
    margin: 0;
    padding: 6px 10px;
    background: transparent;
    border-left: 2px solid var(--accent-teal, #5fa8a8);
    color: var(--text-muted, rgba(255,255,255,0.65));
    font-size: 11px;
}

/* Zone "Actions recommandées" dans le wizard étape 4 — Lot 4 dock-restructure
   (2026-05-21). Accueille le card #wizardWeeklyActionsCard rendu par
   IC.Strategie._loadActions (mixin trajectory.js). Header avec kicker + bouton
   ANNULER LA DERNIÈRE ACTION (visible quand un snapshot serveur existe). */
.wizard-actions-zone {
    margin-top: var(--sp-3, 12px);
    padding: var(--sp-3, 12px);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    border-radius: 4px;
    background: var(--bg-card, rgba(255,255,255,0.02));
}
.wizard-actions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2, 8px);
    margin-bottom: var(--sp-2, 8px);
}
.wizard-actions-kicker {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--accent-coral, #e8745a);
    font-weight: 700;
    text-transform: uppercase;
}

.wizard-unplaced {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--sp-3, 12px);
    max-height: 120px;
    overflow-y: auto;
}
.wizard-unplaced-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 8px;
    background: rgba(184, 84, 80, 0.08);
    border-left: 2px solid var(--accent-red, #B85450);
    font-size: 11px;
}
.wizard-unplaced-sport {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-red, #B85450);
}
.wizard-unplaced-name { flex: 1 1 auto; color: var(--text-main, #fff); }
.wizard-unplaced-reason {
    color: var(--text-muted, rgba(255,255,255,0.55));
    font-style: italic;
    font-size: 10px;
}

/* ── Diff TSS par jour (étape 4 MODULATION, lot 4) ───────────── */
.wizard-diff {
    margin-top: var(--sp-3, 12px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}
.wizard-diff-head {
    display: grid;
    grid-template-columns: 48px 56px 24px 56px 56px;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.wizard-diff-row {
    display: grid;
    grid-template-columns: 48px 56px 24px 56px 56px;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    border-radius: 2px;
    font-size: 12px;
}
.wizard-diff-dow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted, rgba(255,255,255,0.65));
}
.wizard-diff-before { color: var(--text-muted, rgba(255,255,255,0.55)); }
.wizard-diff-arrow { color: var(--text-muted, rgba(255,255,255,0.35)); text-align: center; }
.wizard-diff-after  { color: var(--text-main, #fff); font-weight: 600; }
.wizard-diff-delta {
    font-size: 11px;
    font-weight: 600;
    text-align: right;
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.wizard-diff-delta.wizard-diff-up   { color: var(--accent-yellow, #c8a13b); }
.wizard-diff-delta.wizard-diff-down { color: var(--accent-teal,   #5fa8a8); }

/* ── Étape 5 REVUE LLM (lot 6) ───────────────────────────────── */
.wizard-issues {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: var(--sp-3, 12px);
}
.wizard-issue {
    padding: 8px 12px;
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    border-left: 3px solid var(--text-muted, rgba(255,255,255,0.4));
    border-radius: 2px;
    font-size: 12px;
}
.wizard-issue--high   { border-left-color: var(--accent-red, #B85450); }
.wizard-issue--medium { border-left-color: var(--accent-yellow, #c8a13b); }
.wizard-issue--low    { border-left-color: var(--accent-teal, #5fa8a8); }
.wizard-issue--dismissed { opacity: 0.45; }

.wizard-issue-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.wizard-issue-sev {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 1px 6px;
    border-radius: 2px;
    background: rgba(255,255,255,0.08);
    color: var(--text-muted, rgba(255,255,255,0.65));
}
.wizard-issue--high .wizard-issue-sev   { background: rgba(184, 84, 80, 0.18); color: var(--accent-red, #B85450); }
.wizard-issue--medium .wizard-issue-sev { background: rgba(200, 161, 59, 0.18); color: var(--accent-yellow, #c8a13b); }
.wizard-issue--low .wizard-issue-sev    { background: rgba(95, 168, 168, 0.18); color: var(--accent-teal, #5fa8a8); }

.wizard-issue-cat {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.wizard-issue-title {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main, #fff);
}
.wizard-issue-detail {
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--text-muted, rgba(255,255,255,0.75));
}
.wizard-issue-fix {
    margin-bottom: 6px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 2px;
    font-size: 11px;
    color: var(--text-main, #fff);
    font-style: italic;
}
.wizard-issue-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.wizard-issue-no-route {
    font-size: 10px;
    font-style: italic;
    color: var(--text-muted, rgba(255,255,255,0.45));
}

/* ── FAB lanceur wizard (Lot M1 page minimaliste) ────────────
   Position fixe en bas à droite. Toujours visible, sauf quand le
   wizard est ouvert (overlay.hidden = false → wizard.js cache le FAB
   via [hidden]). Cohérent avec accent-teal du bouton primaire wizard.
   Décalé à gauche du .coach-fab (Carbon C° rond 56px à right:sp-6,
   bottom:sp-6) pour éviter le chevauchement. */
.wizard-fab {
    position: fixed;
    bottom: var(--sp-6, 24px);
    right: calc(var(--sp-6, 24px) + 56px + var(--sp-3, 12px));
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--accent-teal, #5fa8a8);
    color: #0a0d10;
    border: 1px solid var(--accent-teal, #5fa8a8);
    border-radius: 32px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wizard-fab:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.wizard-fab:active { transform: translateY(0); }
.wizard-fab[hidden] { display: none; }

.wizard-fab-icon {
    font-size: 22px;
    line-height: 1;
}
.wizard-fab-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.1;
}
.wizard-fab-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.wizard-fab-status {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}
.wizard-fab-status[hidden] { display: none; }

/* Mobile : FAB plus compact, toujours décalé à gauche du coach-fab
   (qui passe à 48×48 et right:sp-4 sous 768px, cf carbon.css). */
@media (max-width: 720px) {
    .wizard-fab {
        bottom: calc(var(--bottom-nav-h, 56px) + var(--sp-3, 12px));
        right: calc(var(--sp-4, 16px) + 48px + var(--sp-2, 8px));
        padding: 10px 14px;
        gap: 8px;
    }
    .wizard-fab-label { font-size: 11px; }
    .wizard-fab-status { font-size: 9px; }
}

/* === static/css/visuals.css === */
/* visuals.css — Visual indicators (dot-grid, rings, weekly strip, donuts) */

/* ════════════════════════════════════════════════════════════
   DOT GRID — Score visualization (0-100)
   ════════════════════════════════════════════════════════════ */
.dot-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    padding: var(--sp-3) 0;
    max-width: 180px;
}

.dot-grid--sm { max-width: 120px; gap: 3px; }
.dot-grid--lg { max-width: 240px; gap: 5px; }

.dot-grid {
    cursor: help;
}

.dot-grid .dot {
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--bg-elevated);
    transition: background var(--tr-fast), transform var(--tr-fast);
}

.dot-grid .dot:hover {
    transform: scale(1.3);
}

.ring-chart {
    cursor: help;
}

.ring-chart-fg:hover {
    filter: brightness(1.2);
}

.weekly-strip-day {
    cursor: help;
}

.dot-grid .dot.filled {
    background: var(--accent-teal);
    box-shadow: 0 0 4px rgba(61,217,184,0.4);
}

.dot-grid .dot.filled--warning { background: var(--status-orange); box-shadow: 0 0 4px rgba(240,184,88,0.4); }
.dot-grid .dot.filled--danger { background: var(--status-red); box-shadow: 0 0 4px rgba(255,122,122,0.4); }

/* Score wrap with label */
.score-visual {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-4) 0;
}

.score-visual-numbers {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.score-visual-main {
    font-family: var(--font-ui);
    font-size: var(--text-2xl);
    font-weight: var(--weight-black);
    color: var(--text-main);
    letter-spacing: -0.02em;
    line-height: 1;
    transition: color var(--tr-fast);
}

.score-visual-main--go     { color: var(--status-green); }
.score-visual-main--adjust { color: var(--status-orange); }
.score-visual-main--rest   { color: var(--status-red); }

.score-visual-total {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-dim);
}

.score-visual-label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: var(--weight-semi);
    margin-top: var(--sp-2);
}

/* ════════════════════════════════════════════════════════════
   WEEKLY STRIP — 7 days with mood/decision indicator
   ════════════════════════════════════════════════════════════ */
.weekly-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: var(--sp-2) 0;
}

.weekly-strip-day {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 8px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--text-dim);
    border-radius: 2px;
    text-align: left;
    min-height: 110px;
    transition: background var(--tr-fast), border-color var(--tr-fast);
    cursor: pointer;
    font-family: var(--font-mono);
}
.weekly-strip-day--go        { border-top-color: var(--status-green); }
.weekly-strip-day--adjust    { border-top-color: var(--status-orange); }
.weekly-strip-day--rest      { border-top-color: var(--text-dim); }
.weekly-strip-day--done      { border-top-color: var(--status-green); }
.weekly-strip-day--skipped   { border-top-color: var(--status-red); }
.weekly-strip-day--overshot  { border-top-color: var(--status-orange); }
.weekly-strip-day--unknown   { border-top-color: var(--text-dim); }
.weekly-strip-day.active {
    background: var(--bg-elevated);
    border-color: var(--accent-coral);
}
.weekly-strip-day.future { opacity: 0.4; }

.weekly-strip-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.weekly-strip-dayname {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.16em;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
}
.weekly-strip-daynum {
    font-size: 13px;
    color: var(--text-main);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum';
    line-height: 1;
}
.weekly-strip-day.active .weekly-strip-daynum { color: var(--accent-coral); }

.weekly-strip-tss {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.weekly-strip-tss-lbl {
    font-size: 8px;
    color: var(--text-dim);
    letter-spacing: 0.14em;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
}
.weekly-strip-tss-vals {
    display: flex;
    align-items: baseline;
    gap: 3px;
}
.weekly-strip-tss-r {
    font-size: 14px;
    color: var(--text-main);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum';
}
.weekly-strip-tss-p {
    font-size: 9px;
    color: var(--text-dim);
}
.weekly-strip-progress {
    height: 3px;
    background: var(--border-subtle);
    border-radius: 1px;
    overflow: hidden;
}
.weekly-strip-progress-fill {
    height: 100%;
    background: var(--text-dim);
}
.weekly-strip-day--go .weekly-strip-progress-fill,
.weekly-strip-day--done .weekly-strip-progress-fill { background: var(--status-green); }
.weekly-strip-day--adjust .weekly-strip-progress-fill,
.weekly-strip-day--overshot .weekly-strip-progress-fill { background: var(--status-orange); }
.weekly-strip-day--rest .weekly-strip-progress-fill { background: var(--text-dim); }
.weekly-strip-day--skipped .weekly-strip-progress-fill { background: var(--status-red); }

.weekly-strip-sport {
    display: inline-flex;
    align-items: center;
    padding-left: 6px;
    border-left: 2px solid var(--text-dim);
    font-size: 8px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.14em;
    color: var(--text-dim);
}
.weekly-strip-sport--swim { color: var(--sport-swim-dot); border-left-color: var(--sport-swim-dot); }
.weekly-strip-sport--bike { color: var(--sport-bike-dot); border-left-color: var(--sport-bike-dot); }
.weekly-strip-sport--run  { color: var(--sport-run-dot);  border-left-color: var(--sport-run-dot); }
.weekly-strip-sport--renf { color: var(--sport-renf-dot); border-left-color: var(--sport-renf-dot); }

.weekly-strip-morning {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 9px;
    color: var(--status-green);
    font-weight: var(--weight-bold);
}

.weekly-strip-day:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-coral);
}

@media (max-width: 640px) {
    .weekly-strip { gap: 3px; }
    .weekly-strip-day { min-height: 90px; padding: 8px 4px; }
    .weekly-strip-tss-r { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
   RING CHART — Concentric rings (CTL/ATL/TSB, TIZ, etc.)
   ════════════════════════════════════════════════════════════ */
.ring-chart {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
}

.ring-chart svg {
    transform: rotate(-90deg);
    width: 100%; height: 100%;
}

.ring-chart-bg {
    fill: none;
    stroke: var(--bg-elevated);
}

.ring-chart-fg {
    fill: none;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease;
}

.ring-chart-fg--teal   { stroke: var(--accent-teal); }
.ring-chart-fg--coral  { stroke: var(--accent-coral, var(--status-orange)); }
.ring-chart-fg--yellow { stroke: var(--accent-yellow); }
.ring-chart-fg--green  { stroke: var(--status-green); }
.ring-chart-fg--blue   { stroke: var(--accent-blue); }

.ring-chart-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    line-height: 1;
}

.ring-chart-center-value {
    font-family: var(--font-ui);
    font-size: var(--text-2xl);
    font-weight: var(--weight-black);
    color: var(--text-main);
    line-height: 1;
    letter-spacing: -0.02em;
}

.ring-chart-center-label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    font-weight: var(--weight-semi);
    margin-top: 4px;
    line-height: 1;
}

.ring-chart-legend {
    display: flex;
    justify-content: space-around;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    flex-wrap: wrap;
}

.ring-chart-legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ring-chart-legend-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
}

.ring-chart-legend-value {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-heavy);
    color: var(--text-main);
}

.ring-chart-legend-label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: var(--weight-semi);
}

/* ════════════════════════════════════════════════════════════
   DONUT CHART — Single donut with center value + segments
   ════════════════════════════════════════════════════════════ */
.donut-chart {
    position: relative;
    width: 140px;
    height: 140px;
}

.donut-chart svg {
    transform: rotate(-90deg);
    width: 100%; height: 100%;
}

.donut-bg { fill: none; stroke: var(--bg-elevated); }
.donut-seg { fill: none; stroke-linecap: butt; transition: stroke-dashoffset 0.8s ease; }

/* ════════════════════════════════════════════════════════════
   STACKED BAR — Horizontal zone distribution
   ════════════════════════════════════════════════════════════ */
.stacked-bar {
    display: flex;
    height: 10px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--bg-elevated);
    margin: var(--sp-2) 0;
}

.stacked-bar-seg {
    height: 100%;
    transition: width var(--tr-normal);
}

/* Palette alignée intervals.icu (Coggan) */
.stacked-bar-seg--z1 { background: #b3b3b3; }
.stacked-bar-seg--z2 { background: #3fa9f5; }
.stacked-bar-seg--z3 { background: #7bc142; }
.stacked-bar-seg--z4 { background: #ffd400; }
.stacked-bar-seg--z5 { background: #ff7f00; }

.stacked-bar-legend {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: var(--weight-semi);
}

.stacked-bar-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stacked-bar-legend-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
}

/* ════════════════════════════════════════════════════════════
   MONTHLY BARS — Vertical bar chart with colored values
   ════════════════════════════════════════════════════════════ */
.month-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 90px;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
}

.month-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
}

.month-bar {
    width: 100%;
    background: var(--accent-teal);
    border-radius: var(--radius-sm);
    min-height: 4px;
    transition: height var(--tr-normal);
}

.month-bar--coral { background: var(--accent-coral, var(--status-orange)); }
.month-bar--yellow { background: var(--accent-yellow); }
.month-bar--muted { background: var(--bg-elevated); }

.month-bar-label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: var(--weight-semi);
}

/* ════════════════════════════════════════════════════════════
   VALUE CARD — Big number with label & trend
   ════════════════════════════════════════════════════════════ */
.value-card {
    padding: var(--sp-5);
    background: var(--bg-card-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    transition: border-color var(--tr-fast);
}

.value-card:hover { border-color: var(--accent-teal); }

.value-card-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: var(--weight-semi);
}

.value-card-value {
    font-family: var(--font-ui);
    font-size: var(--text-2xl);
    font-weight: var(--weight-black);
    color: var(--text-main);
    letter-spacing: -0.02em;
    line-height: 1;
}

.value-card-suffix {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-left: 4px;
    letter-spacing: 0;
    text-transform: lowercase;
    font-weight: var(--weight-normal);
}

.value-card-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

.value-card-trend--up   { color: var(--status-green); }
.value-card-trend--down { color: var(--status-red); }
.value-card-trend--flat { color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════
   MOOD EMOJIS — for weekly mood strip
   ════════════════════════════════════════════════════════════ */
.mood-emoji {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg-elevated);
    transition: transform var(--tr-fast);
}

.mood-emoji:hover { transform: scale(1.1); }

.mood-emoji--great  { background: var(--status-green-bg); }
.mood-emoji--good   { background: rgba(77,209,153,0.06); }
.mood-emoji--ok     { background: var(--bg-elevated); }
.mood-emoji--low    { background: var(--status-orange-bg); }
.mood-emoji--bad    { background: var(--status-red-bg); }

/* ════════════════════════════════════════════════════════════
   FTP TRACKER — propositions calibration + sub-form splits
   ════════════════════════════════════════════════════════════ */
.ftp-proposals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-3, 12px);
}

.ftp-proposal-card {
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: var(--radius-md, 8px);
    padding: var(--sp-3, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 8px);
}

.ftp-proposal-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--text-xs, 11px);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #888);
}

.ftp-proposal-sport {
    color: var(--text-strong, #fff);
    font-weight: var(--weight-bold, 600);
}

.ftp-proposal-source { font-style: italic; }

.ftp-proposal-vals {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2, 8px);
    flex-wrap: wrap;
    font-family: var(--font-ui, system-ui);
}

.ftp-proposal-current,
.ftp-proposal-proposed {
    font-size: var(--text-xl, 20px);
    font-weight: var(--weight-bold, 700);
}

.ftp-proposal-current { color: var(--text-muted, #888); }
.ftp-proposal-proposed { color: var(--text-strong, #fff); }

.ftp-proposal-current small,
.ftp-proposal-proposed small {
    font-size: var(--text-xs, 11px);
    font-weight: var(--weight-normal, 400);
    margin-left: 2px;
    color: var(--text-muted, #888);
}

.ftp-proposal-arrow {
    font-size: var(--text-md, 14px);
    color: var(--text-muted, #888);
}

.ftp-delta {
    font-size: var(--text-sm, 12px);
    font-weight: var(--weight-bold, 600);
    padding: 1px 6px;
    border-radius: 4px;
}

.ftp-delta--pos {
    color: var(--status-green, #4dd199);
    background: var(--status-green-bg, rgba(77,209,153,0.10));
}

.ftp-delta--neg {
    color: var(--status-orange, #f0a020);
    background: var(--status-orange-bg, rgba(240,160,32,0.10));
}

.ftp-proposal-meta {
    font-size: var(--text-xs, 11px);
    color: var(--text-dim, #aaa);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.ftp-proposal-session-link {
    color: var(--text-dim, #aaa);
    text-decoration: none;
    font-size: var(--text-xs, 11px);
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
}

.ftp-proposal-session-link:hover {
    color: var(--accent, #4dd199);
    opacity: 1;
}

.ftp-proposal-action { margin-top: 2px; }

/* Bouton « Pourquoi ? » qui ouvre le drawer info latéral
   (RULE-FTP-Z3MIN-001, RULE-FTP-MANUAL-PUSH-001) */
.ftp-explain {
    margin-top: 4px;
}

.ftp-explain-trigger {
    background: transparent;
    border: 0;
    color: var(--text-dim, #aaa);
    font-size: var(--text-xs, 11px);
    cursor: pointer;
    padding: 2px 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    transition: color 0.15s;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-color: var(--border-subtle, rgba(255,255,255,0.2));
}

.ftp-explain-trigger:hover {
    color: var(--accent, #4dd199);
    text-decoration-color: var(--accent, #4dd199);
}

/* Contenu du drawer info latéral (.drawer-body > .ftp-explain-drawer-body) */
.ftp-explain-drawer-body {
    font-size: var(--text-sm, 13px);
    color: var(--text-main, #e5e5e5);
    line-height: 1.55;
}

.ftp-explain-drawer-body p { margin: 0 0 12px 0; }
.ftp-explain-drawer-body p:last-child { margin-bottom: 0; }

.ftp-explain-drawer-body code {
    background: var(--surface-2, rgba(255,255,255,0.05));
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.95em;
}

.ftp-explain-list {
    margin: 6px 0 12px 18px;
    padding: 0;
}

.ftp-explain-list li {
    margin-bottom: 6px;
}

.ftp-explain-meta-secondary {
    font-style: italic;
    opacity: 0.8;
    font-size: 0.93em;
}

/* Bouton « Voir l'historique » dans la carte estimateur (Lot D) */
.ftp-history-open-btn {
    background: transparent;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.15));
    color: var(--text-dim, #aaa);
    padding: 6px 12px;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    font-size: var(--text-xs, 11px);
    font-family: inherit;
    margin-left: 8px;
    transition: background 0.15s, color 0.15s;
}

.ftp-history-open-btn:hover {
    background: var(--surface-2, rgba(255,255,255,0.05));
    color: var(--text-main, #e5e5e5);
}

/* Drawer historique FTP (overlay full-screen, Lot D) */
.ftp-history-drawer-root {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ftp-history-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(2px);
}

.ftp-history-drawer {
    position: relative;
    width: min(900px, 92vw);
    max-height: 90vh;
    background: var(--bg-base, #0a0a0a);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.15));
    border-radius: var(--radius-md, 8px);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: auto;
}

.ftp-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

.ftp-history-header h2 {
    margin: 0;
    font-size: var(--text-lg, 16px);
    font-weight: var(--weight-bold, 600);
}

.ftp-history-subtitle {
    margin: 6px 0 0 0;
    font-size: var(--text-xs, 11px);
    color: var(--text-dim, #aaa);
    line-height: 1.5;
    max-width: 720px;
}

.ftp-history-subtitle code {
    background: var(--surface-2, rgba(255,255,255,0.05));
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.95em;
}

.ftp-history-subtitle a {
    color: var(--accent, #4dd199);
    text-decoration: none;
}

.ftp-history-subtitle a:hover {
    text-decoration: underline;
}

.ftp-history-close {
    background: transparent;
    border: 0;
    color: var(--text-dim, #aaa);
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}

.ftp-history-close:hover {
    color: var(--text-main, #e5e5e5);
}

.ftp-history-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ftp-history-sport-toggle {
    display: inline-flex;
    gap: 4px;
}

.ftp-history-tab {
    background: transparent;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.15));
    color: var(--text-dim, #aaa);
    padding: 6px 14px;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    font-size: var(--text-xs, 11px);
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}

.ftp-history-tab.active {
    background: var(--accent, #4dd199);
    color: var(--bg-base, #0a0a0a);
    border-color: var(--accent, #4dd199);
}

.ftp-history-tab:not(.active):hover {
    color: var(--text-main, #e5e5e5);
}

.ftp-history-period {
    background: var(--surface-1, rgba(255,255,255,0.03));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.15));
    color: var(--text-main, #e5e5e5);
    padding: 6px 10px;
    border-radius: var(--radius-sm, 6px);
    font-family: inherit;
    font-size: var(--text-xs, 11px);
}

.ftp-history-chart-wrap {
    position: relative;
    height: 380px;
    max-height: 50vh;
}

.ftp-history-chart {
    width: 100% !important;
    height: 100% !important;
}

.ftp-history-legend {
    font-size: var(--text-xs, 11px);
    color: var(--text-dim, #aaa);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ftp-history-legend .legend-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.ftp-history-legend strong {
    color: var(--text-main, #e5e5e5);
    font-weight: var(--weight-bold, 600);
    margin-right: 6px;
}

.ftp-history-legend .legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.ftp-history-legend .legend-dot--big {
    width: 14px;
    height: 14px;
}

.ftp-history-legend .legend-line {
    display: inline-block;
    width: 22px;
    height: 3px;
    background: rgba(255, 200, 80, 0.85);
    margin-right: 4px;
    vertical-align: middle;
    border-radius: 2px;
}

.ftp-history-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-dim, #aaa);
    font-style: italic;
}

/* Bloc auto-détection de test FTP/CSS (drawer post-session) */
.ftp-auto-detect {
    padding: 12px;
    margin-bottom: 12px;
    background: var(--surface-2, rgba(255,255,255,0.04));
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--accent, #4dd199);
}

.ftp-auto-detect-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ftp-auto-detect-badge {
    background: var(--accent, #4dd199);
    color: var(--bg-base, #0a0a0a);
    padding: 3px 8px;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--text-xs, 11px);
    font-weight: var(--weight-bold, 600);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ftp-auto-detect-protocol {
    font-size: var(--text-sm, 13px);
    font-weight: var(--weight-bold, 600);
    color: var(--text-base, #fff);
}

.ftp-auto-detect-result {
    text-align: center;
    margin: 10px 0;
}

.ftp-auto-detect-value {
    font-size: 32px;
    font-weight: var(--weight-bold, 700);
    color: var(--accent, #4dd199);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.ftp-auto-detect-value small {
    font-size: 16px;
    margin-left: 2px;
    color: var(--text-dim, #aaa);
}

.ftp-auto-detect-value-sep {
    margin: 0 8px;
    color: var(--text-dim, #aaa);
    font-size: 24px;
}

.ftp-auto-detect-value-num {
    display: inline-block;
}

.ftp-auto-detect-value-label {
    font-size: var(--text-xs, 11px);
    color: var(--text-dim, #aaa);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.ftp-auto-detect-details {
    margin: 8px 0;
}

.ftp-auto-detect-details > summary {
    font-size: var(--text-xs, 11px);
    color: var(--text-dim, #aaa);
    cursor: pointer;
    padding: 4px 0;
}

.ftp-auto-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 12px);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

.ftp-auto-detail-table th {
    text-align: left;
    font-size: var(--text-xs, 11px);
    color: var(--text-dim, #aaa);
    font-weight: normal;
    padding: 3px 6px;
}

.ftp-auto-detail-table td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--border-dim, rgba(255,255,255,0.04));
}

.ftp-auto-detail-status { text-align: right; font-weight: var(--weight-bold, 600); }

.ftp-auto-detect-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.ftp-auto-detect-manual {
    background: transparent;
    border: none;
    color: var(--text-dim, #aaa);
    font-size: var(--text-xs, 11px);
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 8px;
}

.ftp-auto-detect-manual:hover { color: var(--text-base, #fff); }

.ftp-proposal-zones {
    margin-top: 4px;
    padding: 8px 10px;
    background: var(--surface-2, rgba(255,255,255,0.03));
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-dim, rgba(255,255,255,0.08));
}

.ftp-proposal-zones-title {
    font-size: var(--text-xs, 11px);
    font-weight: var(--weight-bold, 600);
    color: var(--text-dim, #aaa);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.ftp-proposal-zones-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 12px);
    font-variant-numeric: tabular-nums;
}

.ftp-proposal-zones-table td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--border-dim, rgba(255,255,255,0.04));
}

.ftp-proposal-zones-table tr:last-child td { border-bottom: none; }

.ftp-proposal-zones-table td:first-child { font-weight: var(--weight-bold, 600); }
.ftp-proposal-zones-table td:nth-child(2) { color: var(--text-dim, #aaa); }
.ftp-proposal-zones-table td:last-child { text-align: right; }

.ftp-push-btn {
    background: var(--accent, #4dd199);
    color: var(--bg-base, #0a0a0a);
    border: none;
    border-radius: var(--radius-sm, 6px);
    padding: 6px 12px;
    font-size: var(--text-sm, 12px);
    font-weight: var(--weight-bold, 600);
    cursor: pointer;
    transition: opacity var(--tr-fast, 120ms);
}

.ftp-push-btn:hover:not([disabled]) { opacity: 0.85; }
.ftp-push-btn[disabled] { opacity: 0.5; cursor: wait; }
.ftp-push-btn.success {
    background: var(--status-green, #4dd199);
    color: var(--bg-base, #0a0a0a);
}

.ftp-noop {
    font-size: var(--text-xs, 11px);
    color: var(--text-muted, #888);
    font-style: italic;
}

/* ── Estimateur FTP : card spécifique + badge overestimation ── */
.ftp-proposal-card--estimator {
    border-left: 2px solid var(--accent, #4dd199);
}

.ftp-overest-badge {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 6px);
    background: var(--status-orange-bg, rgba(240,160,32,0.10));
    color: var(--status-orange, #f0a020);
    font-size: var(--text-xs, 11px);
    line-height: 1.4;
}

/* ── Bloc SIGNAL FTP per-session sous l'analyse Claude ── */
.session-analysis-ftp-signal {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-1, rgba(255,255,255,0.03));
    border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
    font-size: var(--text-sm, 12px);
}

.ftp-signal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ftp-signal-kicker {
    font-size: var(--text-xs, 11px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim, #aaa);
    font-weight: var(--weight-bold, 600);
}

.ftp-signal-status {
    font-size: var(--text-xs, 11px);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: var(--weight-bold, 600);
}

.ftp-signal-status.is-bump {
    color: var(--status-green, #4dd199);
    background: var(--status-green-bg, rgba(77,209,153,0.12));
}

.ftp-signal-status.is-stable {
    color: var(--text-muted, #888);
    background: var(--surface-2, rgba(255,255,255,0.05));
}

.ftp-signal-status.is-below {
    color: var(--status-orange, #f0a020);
    background: var(--status-orange-bg, rgba(240,160,32,0.10));
}

.ftp-signal-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    color: var(--text-strong, #fff);
}

.ftp-signal-effort { color: var(--text-main, #1F1A14); }
.ftp-signal-arrow { color: var(--text-dim, #aaa); }
.ftp-signal-floor { font-weight: var(--weight-bold, 600); }
.ftp-signal-vs { color: var(--text-muted, #888); font-size: var(--text-xs, 11px); }

.ftp-signal-meta {
    margin-top: 4px;
    font-size: var(--text-xs, 11px);
    color: var(--text-dim, #aaa);
    font-style: italic;
}

/* ── Tableau de référence zones (collapsible) sous l'analyse séance ── */
.session-zones-ref {
    margin-top: 10px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
    background: var(--surface-1, rgba(255,255,255,0.03));
    overflow: hidden;
}

.session-zones-ref-summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm, 12px);
    user-select: none;
}

.session-zones-ref-summary::-webkit-details-marker { display: none; }
.session-zones-ref-summary::before {
    content: '▸';
    color: var(--text-dim, #aaa);
    transition: transform var(--tr-fast, 120ms);
    font-size: 10px;
}
.session-zones-ref[open] .session-zones-ref-summary::before {
    transform: rotate(90deg);
}

.session-zones-ref-title {
    font-weight: var(--weight-bold, 600);
    color: var(--text-main, #1F1A14);
}

.session-zones-ref-sport {
    color: var(--text-dim, #aaa);
    font-style: italic;
}

.session-zones-ref-body {
    padding: 4px 12px 10px;
}

.zones-ref-loading,
.zones-ref-error {
    padding: 8px 0;
    font-size: var(--text-xs, 11px);
    color: var(--text-dim, #aaa);
    font-style: italic;
}

.zones-ref-error { color: var(--status-orange, #f0a020); }

.zones-ref-ftp {
    font-size: var(--text-xs, 11px);
    color: var(--text-dim, #aaa);
    margin: 4px 0 8px;
}

.zones-ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs, 11px);
}

.zones-ref-table th,
.zones-ref-table td {
    padding: 4px 6px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.06));
}

.zones-ref-table th {
    font-weight: var(--weight-bold, 600);
    color: var(--text-dim, #aaa);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10px;
}

.zones-ref-table tbody tr:last-child td { border-bottom: none; }

.zones-ref-name { color: var(--text-main, #1F1A14); }
.zones-ref-pct,
.zones-ref-watts,
.zones-ref-hr {
    color: var(--text-muted, #888);
    font-variant-numeric: tabular-nums;
}
.zones-ref-hr small {
    color: var(--text-dim, #aaa);
    font-style: italic;
    margin-left: 4px;
}

/* ── Cellule calendrier : encadré spécifique pour séance produisant un
   signal FTP exploitable (ftp_signal.informative === true) ────────────── */
.strat-cell--ftp-signal {
    box-shadow: inset 0 0 0 1px var(--accent-green, #5A7858),
                inset 0 2px 0 0 var(--accent-green, #5A7858);
    position: relative;
}

.strat-cell--ftp-signal::after {
    content: 'FTP';
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 8px;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--accent-green, #5A7858);
    background: var(--surface-1, rgba(255,255,255,0.95));
    padding: 0 3px;
    border-radius: 2px;
    pointer-events: none;
}

/* ── Sub-form splits FTP/CSS dans drawer post-session ── */
.ftp-splits-toggle {
    background: transparent;
    border: 1px dashed var(--border-color, #333);
    color: var(--text-dim, #aaa);
    padding: 8px 12px;
    border-radius: var(--radius-sm, 6px);
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: var(--text-sm, 12px);
}

.ftp-splits-toggle:hover {
    border-color: var(--text-muted, #888);
    color: var(--text-strong, #fff);
}

.ftp-splits-chevron {
    float: right;
    font-size: var(--text-md, 14px);
}

.ftp-splits-panel {
    border-left: 2px solid var(--accent, #4dd199);
    padding-left: var(--sp-3, 12px);
    margin-top: var(--sp-2, 8px);
}

/* pages/today.css est chargé APRÈS le bundle → spécificité égale
   (.drawer .form-submit-btn) override sinon. On bump à 3 classes pour gagner. */
.drawer .form-submit-btn.form-submit-btn--secondary {
    background: var(--accent-coral, #e07a5f);
    color: var(--bg-main, #0a0a0a);
    border: none;
    height: 44px;
    font-size: var(--text-sm);
    margin-top: var(--sp-2, 8px);
}

.drawer .form-submit-btn.form-submit-btn--secondary:hover {
    opacity: 0.88;
}

.ftp-splits-result {
    margin-top: var(--sp-2, 8px);
}

.ftp-splits-result-card {
    background: var(--bg-elevated, #1f1f1f);
    border-radius: var(--radius-sm, 6px);
    padding: var(--sp-3, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 8px);
}

.ftp-splits-error {
    color: var(--status-red, #ff6b6b);
    font-size: var(--text-sm, 12px);
    padding: var(--sp-2, 8px);
}

/* ── HRV & RHR daily charts (style HRV4Training) ────────────────────── */
.hrv-chart, .rhr-chart {
    width: 100%;
    margin: var(--sp-3, 12px) 0 var(--sp-2, 8px);
}
.hrv-chart svg, .rhr-chart svg {
    width: 100%;
    height: auto;
    min-height: 160px;
    display: block;
}
/* "Normal range" band (baseline ± 1×SD), rendered as a rolling polygon */
.hrv-band, .rhr-band {
    fill: var(--status-grey, #888);
    fill-opacity: 0.14;
    stroke: var(--text-dim, #888);
    stroke-width: 0.5;
    stroke-opacity: 0.25;
}
/* Baseline 60j (dashed, neutral) */
.hrv-baseline, .rhr-baseline {
    stroke: var(--text-muted, #666);
    stroke-width: 1.25;
    stroke-dasharray: 4 3;
    opacity: 0.7;
}
/* 7d moving average — distinctive accent colour, thicker */
.hrv-avg7d, .rhr-avg7d {
    stroke: var(--accent-blue, #3F5D70);
    stroke-width: 2.25;
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: 1;
}
/* Bars — colour shared by both charts; direction-awareness is in JS */
.hrv-bar, .rhr-bar { rx: 2; }
.hrv-bar--green,   .rhr-bar--green   { fill: var(--status-green, #7FA56B); fill-opacity: 0.85; }
.hrv-bar--orange,  .rhr-bar--orange  { fill: var(--status-orange, #D4925E); fill-opacity: 0.90; }
.hrv-bar--red,     .rhr-bar--red     { fill: var(--status-red, #B85450); fill-opacity: 0.90; }
.hrv-bar--today,   .rhr-bar--today   { fill: var(--accent-yellow, #C4A961); fill-opacity: 1; }
.hrv-bar--missing, .rhr-bar--missing { fill: var(--text-dim, #888); fill-opacity: 0.25; }
/* Numeric value labels — text-main with white-ish halo for contrast on bars */
.hrv-val, .rhr-val {
    font-size: 10px;
    font-weight: 600;
    fill: var(--text-main, #1a1a1a);
    font-family: var(--font-mono, ui-monospace, monospace);
    paint-order: stroke;
    stroke: var(--bg-main, #ffffff);
    stroke-width: 2.5px;
    stroke-linejoin: round;
}
.hrv-val--today, .rhr-val--today {
    font-weight: 700;
    fill: var(--text-main, #1a1a1a);
}
.hrv-day, .rhr-day {
    font-size: 11px;
    font-weight: 500;
    fill: var(--text-main, #1a1a1a);
    font-family: var(--font-mono, ui-monospace, monospace);
    opacity: 0.85;
}
.hrv-day--today, .rhr-day--today {
    fill: var(--accent-yellow, #C4A961);
    font-weight: 700;
    opacity: 1;
}
/* Compact legend below the chart */
.hrv-chart-legend, .rhr-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2, 8px) var(--sp-4, 16px);
    margin: var(--sp-1, 4px) 0 var(--sp-2, 8px);
    font-size: var(--text-xs, 11px);
    color: var(--text-dim, #888);
}
.hrv-chart-legend-item, .rhr-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hrv-chart-legend-band, .rhr-chart-legend-band,
.hrv-chart-legend-baseline, .rhr-chart-legend-baseline,
.hrv-chart-legend-avg7d, .rhr-chart-legend-avg7d {
    display: inline-block;
    width: 18px;
    height: 6px;
    border-radius: 1px;
}
.hrv-chart-legend-band, .rhr-chart-legend-band {
    background: var(--status-grey, #888);
    opacity: 0.30;
}
.hrv-chart-legend-baseline, .rhr-chart-legend-baseline {
    background: transparent;
    border-top: 1.25px dashed var(--text-muted, #666);
    height: 0;
    margin-top: 3px;
    opacity: 0.75;
}
.hrv-chart-legend-avg7d, .rhr-chart-legend-avg7d {
    background: var(--accent-blue, #3F5D70);
    height: 2.5px;
    margin-top: 2px;
    opacity: 1;
}

/* === static/css/carbon.css === */
/* ════════════════════════════════════════════════════════════════════
   carbon.css — Carbon Curves overlay (additif, drop-in)
   ────────────────────────────────────────────────────────────────────
   - À charger APRÈS bundle.css (ou ajouté à _CSS_BUNDLE_FILES en dernier).
   - Override de :root pour radius adoucis + nouveau token --font-display.
   - Ne modifie PAS les couleurs des thèmes dark/light, ni les sport
     colors, ni les status colors. Tous les sélecteurs ciblent des
     classes existantes (pas de classes parallèles type .card-carbon).
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens : radius adoucis + nouvelle famille display ────────────── */
:root {
    /* Radius — Carbon Curves : plus serrés, plus précis */
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 7px;
    --radius-xl: 10px;
    /* Nouveau token typo : serif éditorial pour les titres + narratif coach */
    --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
    /* Override des stacks UI/mono pour pointer Space Grotesk + JetBrains Mono
       (chargés depuis Google Fonts dans base_app.html). Fallbacks préservés. */
    --font-ui:   'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
    --font-code: var(--font-mono);
}

/* ── Body : adopter Space Grotesk partout ───────────────────────────
   font-family + smoothing déjà dans reset.css. Carbon ajoute juste les
   variantes typographiques Space Grotesk. */
body {
    font-feature-settings: 'ss01', 'ss02', 'cv01';
}

/* ── Header de page : date mono uppercase + titre Fraunces italic ──
   .content-header lives in layout.css (it carries the structural rules
   too — sticky, flex, blur). Carbon's overrides ont été fondues dans
   layout au S4.c lot 3. */
.content-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin: 0;
}
.content-date,
.content-header .content-date {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: var(--sp-2);
    white-space: nowrap;
}

/* ── Cards : hairlines, padding aéré, fond plus discret ─────────────
   Note : la règle de base de .card vit dans components.css. Ici on
   définit la variante .step-card (pas dans components) et la cascade
   entre cards. */
.step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
    box-shadow: none;
    transition: background .25s, border-color .25s;
}
.card + .card,
.step-card + .step-card,
.card + .step-card,
.step-card + .card {
    margin-top: var(--sp-6);
}
.card--accent {
    border-color: var(--accent-coral);
    border-left: 2px solid var(--accent-coral);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: var(--bg-card);
    position: relative;
}
.card--accent::before {
    content: "";
    position: absolute;
    top: -1px; bottom: -1px; left: -1px;
    width: 2px;
    background: var(--accent-coral);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* ── Card headers : mono uppercase letterspaced ───────────────────── */
.card-header,
.step-header {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.step-header::after {
    content: '';
    flex: 1;
    margin-left: 10px;
    border-bottom: 1px dashed var(--border-color);
}
.sub-desc {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: var(--sp-4);
    text-wrap: pretty;
}

/* ── Stats / metrics : grand mono, label mono uppercase ───────────── */
.today-metric-lbl,
.metric-label,
.metric-label-xs {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.today-metric-val,
.metric-val-lg,
.metric-val-xl {
    font-family: var(--font-mono);
    font-weight: 700;
    font-feature-settings: 'tnum', 'zero';
    color: var(--text-main);
    letter-spacing: -0.02em;
}
.today-metric-val { font-size: var(--text-xl); }
.metric-val-lg    { font-size: 22px; }
.metric-val-xl    { font-size: 26px; }

/* Generic numeric utility class (use anywhere mono numbers needed) */
.num,
.font-code {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum', 'zero';
}

/* ── "Feu décision" : pastille → cercle 12px + texte mono plat ─── */
.readiness-pill {
    background: transparent !important;
    color: var(--text-main) !important;
    border: none !important;
    padding: 0 !important;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
.readiness-pill::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--status-grey);
    flex: none;
}
.readiness-pill.readiness-go::before    { background: var(--status-green);  box-shadow: 0 0 0 3px var(--status-green-bg); }
.readiness-pill.readiness-adjust::before{ background: var(--status-orange); box-shadow: 0 0 0 3px var(--status-orange-bg); }
.readiness-pill.readiness-rest::before  { background: var(--status-red);    box-shadow: 0 0 0 3px var(--status-red-bg); }

/* ── Coach narrative : Fraunces italic, distinct ───────────────── */
.brief-coach-text,
.coach-cite {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-main);
    text-wrap: pretty;
}
.brief-coach-head .brief-coach-label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.brief-coach-head .brief-coach-time {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-dim);
}

/* ── Indicators cliquables (5 box) : hairline + summary aligné ── */
.today-ind-box {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card-alt);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-2);
    transition: border-color var(--tr-fast);
}
.today-ind-box[open] {
    border-color: var(--text-muted);
    background: var(--bg-card);
}
.today-ind-box > summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 18px auto 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--text-sm);
}
.today-ind-box > summary::-webkit-details-marker { display: none; }
.today-ind-key {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}
.today-ind-detail {
    color: var(--text-main);
    font-size: var(--text-sm);
}
.today-ind-pts {
    font-family: var(--font-mono);
    font-weight: 700;
    font-feature-settings: 'tnum';
    font-size: var(--text-sm);
}
.today-ind-explain {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--border-color);
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--text-main);
}
.today-ind-method {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--bg-main);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}
.today-ind-method > summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    list-style: none;
}
.today-ind-method > summary::-webkit-details-marker { display: none; }
.today-ind-method > summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform var(--tr-fast);
}
.today-ind-method[open] > summary::before { content: "▾ "; }
.today-ind-method-body {
    margin-top: var(--sp-2);
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    line-height: 1.6;
}

/* ── Hub cards (Morning / Session / Nutrition) : aérées, hairlines ─ */
.hub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-3);
}
.hub-card {
    background: var(--bg-card-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    transition: border-color var(--tr-fast), background var(--tr-fast);
}
.hub-card:hover {
    border-color: var(--text-muted);
    background: var(--bg-card);
}
.hub-title {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-main);
}
.hub-sub {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Weekly strip : laisser IC.Visuals piloter, juste tweak conteneur ─ */
.weekly-strip-wrap {
    padding: 4px 0;
}

/* ── Drawers : fond plus calme, hairlines ───────────────────────
   .drawer / .drawer-header / .drawer-footer : règles définies dans
   components.css (redondance carbon retirée S4.c lot 2). Carbon ne
   garde ici que le ton typographique du titre. */
.drawer-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: var(--text-xl);
    color: var(--text-main);
}
.field-label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}
.text-input,
.num-input,
.date-input {
    font-family: var(--font-ui);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card-alt);
    color: var(--text-main);
    padding: 10px 12px;
    transition: border-color var(--tr-fast);
}
.num-input { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.text-input:focus,
.num-input:focus,
.date-input:focus {
    outline: none;
    border-color: var(--accent-coral);
}
.form-submit-btn {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    border: 1px solid var(--text-main);
    background: var(--text-main);
    color: var(--bg-card);
    padding: 12px var(--sp-5);
    cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.form-submit-btn:hover {
    background: var(--accent-coral);
    border-color: var(--accent-coral);
    color: var(--bg-card);
}

/* Segmented row (1-10) — flat hairline buttons */
.seg-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
}
.seg-row > .seg-btn,
.seg-row > button {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: var(--bg-card-alt);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 10px 0;
    cursor: pointer;
    transition: all var(--tr-fast);
}
.seg-row > .seg-btn.active,
.seg-row > button.active {
    background: var(--text-main);
    color: var(--bg-card);
    border-color: var(--text-main);
}

.pill-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
}
.pill-btn {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--border-color);
    background: var(--bg-card-alt);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    cursor: pointer;
    transition: all var(--tr-fast);
}
.pill-btn.active {
    background: var(--text-main);
    color: var(--bg-card);
    border-color: var(--text-main);
}

/* ── Sport tags : préserver couleurs immuables, juste typo ─────── */
.sport-tag {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    border: 1px solid currentColor;
}
.sport-tag--swim { color: var(--sport-swim-dot); background: var(--sport-swim-bg); }
.sport-tag--bike { color: var(--sport-bike-dot); background: var(--sport-bike-bg); }
.sport-tag--run  { color: var(--sport-run-dot);  background: var(--sport-run-bg); }
.sport-tag--renf { color: var(--sport-renf-dot); background: var(--sport-renf-bg); }

/* ── Brief week (workouts) ─────────────────────────────────────── */
.brief-wo {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card-alt);
    margin-bottom: 6px;
    padding: 0;
}
.brief-wo-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
}
.brief-wo-summary::-webkit-details-marker { display: none; }
.brief-wo-name {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--text-main);
    font-size: var(--text-sm);
}
.brief-wo-meta {
    margin-left: auto;
    display: inline-flex;
    gap: var(--sp-3);
}
.brief-wo-dur,
.brief-wo-tss {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-feature-settings: 'tnum';
}
.brief-wo--adjusted {
    border-color: var(--accent-coral);
}
.brief-wo-body {
    padding: 0 var(--sp-4) var(--sp-4);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── Sidebar : sobre, hairline droite ───────────────────────────
   .sidebar : structure dans layout.css. La hairline droite carbon était
   un résidu de la sidebar verticale ; la sidebar étant maintenant une
   topbar horizontale, le border-right était invisible — supprimé S4.c
   lot 3. Le ton typographique des liens reste défini ici. */
.sidebar a,
.sidebar-link,
.sidebar-item {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 500;
}
.sidebar a.active,
.sidebar-link.active,
.sidebar-item.active {
    color: var(--sidebar-active-text);
}

/* ── Bottom nav (mobile) : ton typo carbon ─────────────────────
   .bottom-nav structure dans layout.css. Carbon n'ajoute ici que le ton
   typographique (mono uppercase). background/border-top redondants
   retirés S4.c lot 3. */
.bottom-nav {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* ── Methodology : éditorial, h2 Fraunces ─────────────────────── */
.meth-banner {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-6);
}
.meth-intro {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--text-main);
    text-wrap: pretty;
    margin-bottom: var(--sp-8);
}
.meth-section { margin-bottom: var(--sp-10); }
.meth-section h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 26px;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-4);
    letter-spacing: -0.01em;
}
.meth-section h3 {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: var(--sp-5) 0 var(--sp-3);
}
.meth-section p {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--text-main);
    text-wrap: pretty;
    margin-bottom: var(--sp-3);
}
.meth-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-3) 0 var(--sp-4);
    font-size: var(--text-xs);
}
.meth-table th,
.meth-table td {
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-subtle);
    border-left: 1px solid var(--border-color);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.meth-table th {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card-alt);
}
.meth-table tr:nth-child(odd) td { background: transparent; }
.meth-table tr:nth-child(even) td { background: var(--bg-card-alt); }
.choix, .critique, .ref {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    line-height: 1.6;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    margin: var(--sp-3) 0;
    border-left: 2px solid currentColor;
    background: var(--bg-card-alt);
}
.choix    { color: var(--status-green);  border-left-color: var(--status-green); }
.critique { color: var(--status-orange); border-left-color: var(--status-orange); }
.ref      {
    display: block;
    color: var(--text-dim);
    border-left-color: var(--border-color);
    font-style: italic;
    font-size: var(--text-2xs);
    background: transparent;
    padding: 4px var(--sp-3);
    margin: 2px 0;
}
.meth-footer {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.10em;
    color: var(--text-dim);
    border-top: 1px solid var(--border-color);
    padding-top: var(--sp-4);
    margin-top: var(--sp-10);
}
.color-green   { color: var(--status-green); }
.color-orange  { color: var(--status-orange); }
.color-red     { color: var(--status-red); }
.color-blue    { color: var(--accent-blue); }
.color-dim     { color: var(--text-dim); }
.color-muted   { color: var(--text-muted); }
.color-main    { color: var(--text-main); }

/* ── Journal : day cards aérés, mono dates, Fraunces coach feedback ─ */
.journal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) 0 var(--sp-5);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--sp-5);
}
.journal-week-label {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: var(--text-xl);
    color: var(--text-main);
}
.journal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-4);
}
.journal-week-summary {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--sp-6);
    padding: var(--sp-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    margin-bottom: var(--sp-3);
}
.journal-week-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.journal-stat-label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.journal-stat-val {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum';
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-main);
}
.journal-day {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 180px;
    transition: background .25s, border-color .25s;
}
.journal-day-today {
    border-color: var(--accent-coral);
}
.journal-day-future {
    opacity: 0.6;
}
.journal-day-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.journal-day-name {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-main);
}
.journal-day-date {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    font-feature-settings: 'tnum';
}
.journal-today-badge {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-coral);
    border: 1px solid var(--accent-coral);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
}
.journal-section {
    padding: var(--sp-2) 0;
    border-top: 1px dashed var(--border-color);
}
.journal-section:first-of-type { border-top: none; }
.journal-section-title {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.journal-sport-badge {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid currentColor;
    white-space: nowrap;
}
.journal-sport-badge.sport-swim { color: var(--sport-swim-dot); background: var(--sport-swim-bg); }
.journal-sport-badge.sport-bike { color: var(--sport-bike-dot); background: var(--sport-bike-bg); }
.journal-sport-badge.sport-run  { color: var(--sport-run-dot);  background: var(--sport-run-bg); }
.journal-sport-badge.sport-renf { color: var(--sport-renf-dot); background: var(--sport-renf-bg); }
.journal-delta {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    margin-top: var(--sp-2);
    text-align: center;
}
.journal-delta-ok    { color: var(--status-green);  background: var(--status-green-bg); }
.journal-delta-over  { color: var(--status-orange); background: var(--status-orange-bg); }
.journal-delta-under { color: var(--status-orange); background: var(--status-orange-bg); }
.journal-delta-miss  { color: var(--status-red);    background: var(--status-red-bg); }
.journal-delta-extra { color: var(--accent-blue);   background: rgba(107,168,216,0.12); }
.journal-coach-text,
.journal-section-coach .journal-coach-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-main);
    text-wrap: pretty;
    max-height: 120px;
    overflow-y: auto;
}
.journal-note-input {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-main);
    background: var(--bg-card-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px;
    width: 100%;
    min-height: 44px;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s;
}
.journal-note-input.journal-note-saved {
    border-color: var(--status-green);
}

/* ── Chat : layout sobre, composer hairline, narrative italic ──── */
.chat-layout {
    display: flex;
    height: calc(100vh - 80px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-card);
}
.chat-sidebar {
    width: 240px;
    border-right: 1px solid var(--border-color);
    background: var(--bg-card-alt);
    display: flex;
    flex-direction: column;
}
.chat-sidebar-head {
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border-color);
}
.chat-new-btn {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    width: 100%;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--text-main);
    background: var(--text-main);
    color: var(--bg-card);
    cursor: pointer;
}
.chat-sessions {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-2);
}
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.chat-header-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-color);
}
.chat-current-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--text-main);
    flex: 1;
}
.chat-usage-meter {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.10em;
    color: var(--text-dim);
    text-transform: uppercase;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-5);
}
.chat-welcome h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 28px;
    color: var(--text-main);
    margin-bottom: var(--sp-2);
}
.chat-welcome p {
    font-family: var(--font-ui);
    color: var(--text-muted);
    line-height: 1.6;
}
.chat-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 var(--sp-4) var(--sp-3);
}
.chat-shortcut {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card-alt);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--tr-fast);
}
.chat-shortcut:hover {
    border-color: var(--accent-coral);
    color: var(--accent-coral);
}
.chat-composer {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border-color);
}
.chat-input {
    flex: 1;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card-alt);
    color: var(--text-main);
    padding: 10px 12px;
    resize: vertical;
}
.chat-send-btn {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border: 1px solid var(--text-main);
    background: var(--text-main);
    color: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 0 var(--sp-5);
    cursor: pointer;
}

/* ── Plan / Analysis solver — keep mechanics, restyle chrome ───── */
.solver-wrapper {
    background: var(--bg-card-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    margin-top: var(--sp-4);
}
.solver-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
}
.tss-display,
.weekly-display,
.time-display {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum';
}
.tss-display {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-main);
}
.time-display,
.weekly-display {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.slider-ticks {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 6px;
}
input[type="range"]#engageSlider {
    width: 100%;
    accent-color: var(--accent-coral);
}

/* Steps progression */
.step-card-v2 {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card-alt);
    padding: var(--sp-3);
    margin-bottom: 6px;
}

/* Phase rules grid */
.phase-rules--full {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-3);
}

/* Action / toggles in tendance card */
.ts-action {
    border: 1px solid var(--border-color);
    border-left-width: 2px;
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-3) 0;
    background: var(--bg-card-alt);
}
.ts-action-red    { border-left-color: var(--status-red); }
.ts-action-orange { border-left-color: var(--status-orange); }
.ts-action-green  { border-left-color: var(--status-green); }
.ts-action-neutral{ border-left-color: var(--text-muted); }
.ts-action-title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-main);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ts-action-body {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--text-main);
}
.ts-toggle {
    border-top: 1px dashed var(--border-color);
    padding: var(--sp-2) 0;
    margin-top: var(--sp-2);
}
.ts-toggle > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    user-select: none;
}
.ts-toggle > summary::-webkit-details-marker { display: none; }
.ts-toggle-label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ts-toggle-val {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-feature-settings: 'tnum';
    font-weight: 600;
}

/* ── Scrollbar discrète : valeurs consolidées dans reset.css S4.c lot 5. */

/* ── Editorial utility classes (ajoutables ad-hoc) ─────────────── */
.editorial-head {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .content-title { font-size: 26px; }
    .card, .step-card { padding: var(--sp-4); }
    .hub { grid-template-columns: 1fr; }
    .chat-layout { flex-direction: column; height: auto; }
    .chat-sidebar { width: 100%; max-height: 200px; }
}


/* ════════════════════════════════════════════════════════════════════
   Carbon v1 intensity push — appended to bring the layout closer to
   the original Carbon Curves editorial feel without touching templates.
   6 leviers : hero display, sharp corners, 2px emphasis borders,
   generous spacing, coach pull-quote, KPI hairline dividers.
   Tout est CSS pur, additif, n'override que les classes existantes.
   ════════════════════════════════════════════════════════════════════ */

/* ── Lever 2 : coins quasi-flat ─────────────────────────────────── */
:root {
    --radius-sm: 0;
    --radius-md: 2px;
    --radius-lg: 3px;
    --radius-xl: 4px;
}

/* ── Lever 1 : hero décision en bloc éditorial Fraunces ─────────── */
/* Le card-header de .today-readiness devient un display heading large.
   On garde la feu pastille (déjà stylée par carbon.css existant) +
   on ajoute le texte de décision en grand Fraunces italic. */
.today-readiness {
    padding: var(--sp-8) var(--sp-6);
}

.today-readiness > .card-header {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.15;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--text-main);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: var(--sp-5);
    align-items: center;
    gap: var(--sp-3);
}

.today-readiness > .card-header::after {
    /* annule le flex-spacer hérité — on veut feu+heading+pill rapprochés */
    content: none;
}

.today-readiness > .card-header > .readiness-pill {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-style: normal;
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-left: auto;
    flex: 0;
}

.today-readiness-reason {
    font-family: var(--font-display);
    font-size: 17px;
    font-style: italic;
    line-height: 1.55;
    color: var(--text-muted);
    margin: var(--sp-5) 0 var(--sp-6);
    max-width: 56ch;
}

/* ── Lever 3 : bordures 2px solid sur cards d'emphase ──────────────
   .card--accent : règle fusionnée plus haut (bloc principal). */
.readiness-action {
    border-left: 2px solid var(--accent-coral);
    padding-left: var(--sp-5);
    margin-top: var(--sp-6);
}

.today-signal-critical {
    border-left: 2px solid var(--status-red);
}
.today-signal-high {
    border-left: 2px solid var(--status-orange);
}

/* ── Lever 4 : espacement éditorial entre sections ──────────────── */
.today-shell > section,
.today-shell > .card {
    margin-bottom: var(--sp-10);  /* 40px au lieu de --sp-5 (20px) */
}

.today-shell > section:last-child,
.today-shell > .card:last-child {
    margin-bottom: 0;
}

/* ── Lever 5 : coach narrative en pull-quote ────────────────────── */
.brief-coach,
.brief-coach-text {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.6;
    font-style: italic;
    font-weight: 400;
    color: var(--text-main);
    border-left: 2px solid var(--accent-coral);
    padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-6);
    margin: var(--sp-3) 0 0;
    max-width: 60ch;
    text-wrap: pretty;
}

/* Cite "— Coach" : on ajoute un ::after à .brief-coach */
.brief-coach::after {
    content: "— Coach";
    display: block;
    margin-top: var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-style: normal;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-dim);
}

/* ── Lever 6 : KPI dividers hairline verticaux ──────────────────── */
.today-metrics-row {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: var(--sp-5) 0;
    margin-top: var(--sp-6);
}

.today-metric {
    text-align: center;
    padding: 0 var(--sp-4);
}

.today-metric:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

.today-metric-lbl {
    display: block;
    margin-bottom: var(--sp-2);
}

.today-metric-val {
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
}

/* ── Hub cards : alléger ─────────────────────────────────────────── */
.hub-card {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
}

.hub-card:hover {
    border-color: var(--accent-coral);
}

/* ── Indicators : aérer un peu plus ─────────────────────────────── */
.today-ind-box {
    margin-bottom: var(--sp-2);
}

/* ── content-header : valeurs finales fusionnées dans le bloc principal
   .content-title / .content-date plus haut (S4.c lot 3). */

/* ── Theme toggle button : aligné mono ──────────────────────────── */
.content-header-right .theme-toggle {
    border-radius: var(--radius-sm);
}

/* ════════════════════════════════════════════════════════════
   Carbon Curves v3 — Sidebar : nav 3 entrées numérotées (P2)
   ════════════════════════════════════════════════════════════ */

.sidebar-title-accent {
    color: var(--accent-coral);
}

.sidebar-nav--primary .sidebar-link {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: 2px;
    border-left: 2px solid transparent;
    color: var(--text-muted);
    font-weight: var(--weight-medium);
    transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}

.sidebar-link-num {
    flex-shrink: 0;
    width: 18px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.18em;
    color: var(--text-dim);
    font-feature-settings: 'tnum', 'zero';
}

.sidebar-link-label {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    letter-spacing: -0.005em;
}

.sidebar-nav--primary .sidebar-link:hover {
    background: var(--sidebar-hover);
    color: var(--text-main);
}

.sidebar-nav--primary .sidebar-link:hover .sidebar-link-num {
    color: var(--text-muted);
}

.sidebar-nav--primary .sidebar-link.active {
    background: var(--sidebar-active);
    color: var(--sidebar-active-text);
    border-left-color: var(--accent-coral);
    font-weight: var(--weight-semi);
}

.sidebar-nav--primary .sidebar-link.active .sidebar-link-num {
    color: var(--accent-coral);
}

/* ════════════════════════════════════════════════════════════
   Carbon Curves v3 — Coach FAB rond compact "C°"
   ════════════════════════════════════════════════════════════ */
.coach-fab {
    position: fixed;
    bottom: var(--sp-6);
    right: var(--sp-6);
    z-index: 70;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--accent-coral);
    color: var(--bg-main);
    border: 1px solid color-mix(in srgb, var(--accent-coral) 85%, black 15%);
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 16px -4px rgba(0, 0, 0, 0.18);
    transition: transform var(--tr-fast), background var(--tr-fast);
    cursor: pointer;
}
.coach-fab-text {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
}
.coach-fab-deg {
    font-size: 18px;
    vertical-align: super;
    margin-left: -2px;
    color: color-mix(in srgb, var(--bg-main) 80%, var(--accent-coral) 20%);
}
.coach-fab:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--accent-coral) 92%, white 8%);
}
.coach-fab:active {
    transform: translateY(0);
}

@media (max-width: 767px) {
    .coach-fab {
        bottom: calc(var(--bottom-nav-h) + var(--sp-3));
        right: var(--sp-4);
        width: 48px;
        height: 48px;
    }
    .coach-fab-text { font-size: 24px; }
    .coach-fab-deg { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════
   Coach card : refonte carbon (coral + Fraunces)
   override des styles legacy bleus de bundle.css
   utilisée dans /strategie sous la section Analyse (en collapse)
   ════════════════════════════════════════════════════════════ */
.coach-card {
    background: var(--bg-card);
    background-image: none;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-coral);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    position: relative;
}
/* Variante inline : utilisée dans .strat-collapse-body, sans double card */
.coach-card--inline {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.coach-card--inline .coach-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: var(--sp-3);
}
.coach-card .coach-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-3);
    flex-wrap: nowrap;
}
.coach-card .coach-header > .flex-center {
    width: 100%;
    justify-content: space-between;
    gap: var(--sp-3);
}
.coach-card .step-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.coach-card .step-header::after { display: none; }
.coach-card .coach-badge {
    background: color-mix(in srgb, var(--accent-coral) 14%, transparent);
    color: var(--accent-coral);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}
.coach-card .coach-btn {
    background: var(--accent-coral);
    color: var(--bg-main);
    border: none;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    cursor: pointer;
    transition: background var(--tr-fast), transform var(--tr-fast);
}
.coach-card .coach-btn:hover {
    background: color-mix(in srgb, var(--accent-coral) 92%, white 8%);
    transform: translateY(-1px);
}
.coach-card .coach-btn:active { transform: translateY(0); }
.coach-card .coach-cost {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    background: rgba(0, 0, 0, 0.20);
    color: inherit;
    padding: 2px 6px;
    border-radius: 3px;
    opacity: 0.92;
}
.coach-card .coach-desc {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 var(--sp-4) 0;
    text-wrap: pretty;
}
.coach-card .coach-result { margin-top: var(--sp-4); }
.coach-card .coach-content {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--text-main);
    text-wrap: pretty;
}
.coach-card .coach-loading { padding: var(--sp-6) 0; text-align: center; }
.coach-card .coach-loading-text {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.coach-card .coach-spinner {
    margin: var(--sp-4) auto 0;
    width: 32px; height: 32px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-coral);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.coach-card .coach-timestamp {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-dim);
    letter-spacing: 0.06em;
}
.coach-card .coach-history-summary {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    padding: var(--sp-2) 0;
    user-select: none;
}
.coach-card .coach-history-summary::-webkit-details-marker { display: none; }
.coach-card .coach-history-summary::before {
    content: "+ ";
    color: var(--accent-coral);
    font-weight: 700;
}
.coach-card details[open] .coach-history-summary::before { content: "− "; }

/* Bloc #coachFeedbackContent retiré au Lot 5 dock-restructure (2026-05-21) :
   l'id ne vit plus dans le DOM depuis Lot 2 (section coachSection retirée
   de /strategie). Le bilan narratif vit sur /today (.today-coach-text). */

/* ============================================================================
   DRAWER SÉANCE RÉALISÉE — HERO (Lot 1)
   ----------------------------------------------------------------------------
   Bandeau d'attaque du drawer quand une activité est matchée au slot. Remplace
   les anciennes sections sport+titre+lien icu pour donner la priorité visuelle
   au moment "je regarde ma séance" : titre lisible + 6/7 tuiles de chiffres.

   Tuiles peuplées par _hydrateSessionHero(payload) après le fetch view_payload.
   ========================================================================== */
.strat-hero {
    margin: 0 0 var(--sp-4) 0;
    padding: var(--sp-4) var(--sp-3) var(--sp-3) var(--sp-3);
    background: linear-gradient(180deg, rgba(232,116,90,0.07) 0%, transparent 80%);
    border-bottom: 1px solid var(--border-color);
    border-radius: 4px 4px 0 0;
}
.strat-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}
.strat-hero-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
}
.strat-hero-title em {
    font-style: italic;
    color: var(--accent-coral);
}
.strat-hero-link {
    display: inline-block;
    margin-top: var(--sp-1);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 120ms, border-color 120ms;
}
.strat-hero-link:hover,
.strat-hero-link:focus-visible {
    color: var(--text-main);
    border-bottom-color: var(--accent-coral);
    outline: none;
}
.strat-hero-tiles {
    margin-top: var(--sp-3);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}
.strat-hero-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-2);
    background: var(--bg-card);
    text-align: center;
    transition: background 120ms;
}
.strat-hero-tile:hover {
    background: var(--bg-card-alt);
}
.strat-hero-tile-lbl {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}
.strat-hero-tile-val {
    font-family: var(--font-mono);
    font-size: 19px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.1;
}
.strat-hero-tile-val small {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 2px;
}

/* ============================================================================
   TEMPS EN ZONES (TIZ) — Lot 3
   ----------------------------------------------------------------------------
   Card dans IC.ActivityView. Barres horizontales colorées par zone, lisibles
   en un coup d'œil. Pastille `via Power|HR|Pace` indique la source résolue.
   ========================================================================== */
.icv-root .tiz-card .stitle {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}
.icv-root .tiz-source {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}
.icv-root .tiz-bars {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.icv-root .tiz-bar {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    align-items: center;
    gap: var(--sp-2);
}
.icv-root .tiz-bar-zone {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-main);
}
.icv-root .tiz-bar-track {
    position: relative;
    height: 10px;
    background: var(--bg-card-alt, var(--bg-card));
    border-radius: 5px;
    overflow: hidden;
}
.icv-root .tiz-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 5px;
    transition: width 240ms ease-out;
}
.icv-root .tiz-bar-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    min-width: 48px;
    text-align: right;
}
.icv-root .tiz-bar-pct {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    min-width: 32px;
    text-align: right;
}

/* ============================================================================
   BILAN COACH — CARD DÉDIÉE (Lot 4)
   ----------------------------------------------------------------------------
   Avant : note coachée collée sous le tableau des blocs, sans contour visuel.
   Maintenant : card avec border-left coral, typo lisible, juste après TIZ.
   Classes préfixées `icv-coach-*` pour ne pas collider avec la coach-card du
   bandeau /today (.coach-card existant déjà côté today.css).
   ========================================================================== */
.icv-root .icv-coach-card {
    border-left: 3px solid var(--accent-coral);
    background: linear-gradient(90deg, rgba(232,116,90,0.05) 0%, transparent 35%);
}
.icv-root .icv-coach-stitle {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}
.icv-root .icv-coach-icon {
    color: var(--accent-coral);
    font-weight: 700;
}
.icv-root .icv-coach-body {
    font-family: var(--font-text, var(--font-mono));
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-main);
}
.icv-root .icv-coach-body h1,
.icv-root .icv-coach-body h2,
.icv-root .icv-coach-body h3,
.icv-root .icv-coach-body h4 {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-coral);
    margin: var(--sp-4) 0 var(--sp-2) 0;
}
.icv-root .icv-coach-body h1:first-child,
.icv-root .icv-coach-body h2:first-child,
.icv-root .icv-coach-body h3:first-child {
    margin-top: 0;
}
.icv-root .icv-coach-body p {
    margin: 0 0 var(--sp-2) 0;
}
.icv-root .icv-coach-body ul,
.icv-root .icv-coach-body ol {
    margin: 0 0 var(--sp-2) 0;
    padding-left: var(--sp-4);
}
.icv-root .icv-coach-body li {
    margin-bottom: var(--sp-1);
}
.icv-root .icv-coach-body strong { color: var(--text-main); font-weight: 700; }
.icv-root .icv-coach-body em { color: var(--text-muted); font-style: italic; }
.icv-root .icv-coach-body blockquote {
    margin: var(--sp-2) 0;
    padding: var(--sp-1) var(--sp-3);
    border-left: 2px solid var(--text-muted);
    color: var(--text-muted);
    font-style: italic;
}
.icv-root .icv-coach-body code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-coral);
    background: var(--bg-card-alt, transparent);
    padding: 1px 4px;
    border-radius: 2px;
}

/* ============================================================================
   PLAN D'ORIGINE — COLLAPSE (Lot 5)
   ----------------------------------------------------------------------------
   Quand la séance est matchée à une activité, scale / kpis cibles / CHO /
   shape / structure / coach méthodo / "Pourquoi cette séance ?" passent dans
   un <details> fermé par défaut. L'attention reste sur le hero + analyse.
   ========================================================================== */
.strat-plan-original {
    margin: var(--sp-3) 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card);
}
.strat-plan-original-summary {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    list-style: none;
    border-radius: 4px;
}
.strat-plan-original-summary::-webkit-details-marker { display: none; }
.strat-plan-original-summary::before {
    content: "▸";
    color: var(--accent-coral);
    margin-right: var(--sp-1);
    transition: transform 120ms;
    display: inline-block;
}
.strat-plan-original[open] > .strat-plan-original-summary::before {
    transform: rotate(90deg);
}
.strat-plan-original-summary:hover,
.strat-plan-original-summary:focus-visible {
    color: var(--text-main);
    background: var(--bg-card-alt);
    outline: none;
}
.strat-plan-original-lbl {
    font-weight: 700;
    color: var(--text-main);
}
.strat-plan-original-hint {
    font-weight: 500;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 10px;
}
.strat-plan-original-body {
    padding: var(--sp-2) var(--sp-3) var(--sp-3) var(--sp-3);
    border-top: 1px solid var(--border-color);
}
/* Premier enfant du plan body : retirer la marge top pour rythme propre. */
.strat-plan-original-body > *:first-child {
    margin-top: 0;
}