:root {
  /* Marges de sécurité (encoche, barre d'accueil) : non nulles seulement sur iPhone / iPad, grâce à viewport-fit=cover */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --bg: #0f1318;
  --panel: #171d25;
  --panel-2: #1f2731;
  --panel-3: #2a3441; /* tuile choisie */
  --line: rgba(255, 255, 255, 0.09);
  --text: #eef2f6;
  --muted: #8a97a8;
  --accent: #ffd166;
  --accent-ink: #1b1500;
  --danger: #ff6b6b;
  --ok: #4fd18b;
  --radius: 12px;
  /* Teintes qui changent avec le thème (voir le bloc :root[data-theme="light"] plus bas) */
  --accent-text: #ffd166; /* jaune des textes et traits : plus foncé en clair, pour rester lisible */
  --ctrl: #2a3440; /* pastilles rondes, pistes de jauge, interrupteur éteint */
  --faint: #5b6675; /* icônes éteintes, poignées */
  --hair: var(--hair); /* filets plus marqués que --line */
  --tint: rgba(255, 255, 255, 0.08);
  --hover: rgba(255, 255, 255, 0.04);
  --dim: #c9d2dc;
  --shadow: var(--shadow);
  --bar: #3a4452; --bar-off: #2a333f; --bar-light: #3a4658;
  --sunk: #141a22; /* fond des semaines du plan */
  --past: #4a5668; /* jours passés du calendrier */
  --scrim: rgba(0, 0, 0, 0.65); /* voile derrière les panneaux */
  /* Rayon des boutons selon leur hauteur : compact (≈36-38 px), standard (40-52 px), grand (≥56 px) */
  --r-s: 10px; --r-m: 12px; --r-l: 14px; --r-xl: 20px; /* --r-xl : fenêtres, feuilles du bas, grands panneaux */
  --info: #4d94e0; /* icônes et traits d'information (zone Z2) */
  --strava: #fc4c02; /* orange de la marque Strava */
  --zone-off: #5b6675; /* liseré des étapes sans zone */
  --danger-ink: #2a0505; /* texte sur fond rouge */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Appli : pas de zoom (pincement, double tap), ni de rebond ou de défilement horizontal */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; overscroll-behavior: none; }
/* Appli iPhone / Android : le texte ne se sélectionne pas (sauf dans les champs) */
html.native body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.native input, html.native textarea { -webkit-user-select: text; user-select: text; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  display: flex; flex-direction: column;
}
h2 { font-size: 17px; margin: 22px 0 10px; }
a { color: var(--accent-text); }
code { background: var(--panel-2); padding: 1px 6px; border-radius: 5px; font-size: 13px; }
.muted { color: var(--muted); }
.spacer { flex: 1; }
[hidden] { display: none !important; }

button, .btn, select, input, textarea {
  font: inherit; color: inherit;
}
/* Boutons gris : sans contour (le contour sert seulement à marquer un état : actif, sélectionné, danger) */
button, .btn {
  background: var(--panel-2); border: 1px solid transparent; border-radius: var(--r-s);
  padding: 8px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
@media (hover: hover) { button:hover:not(:disabled), .btn:hover { filter: brightness(1.15); } }
button:disabled { opacity: 0.4; cursor: not-allowed; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .timeline:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Focus donné à l'ouverture d'un panneau (croix, Reprendre) : pas de contour jaune */
.sheet-close:focus-visible, .pause-actions .primary:focus-visible, .sheet-back:focus-visible, .delete-confirm:focus-visible, .delete-cancel:focus-visible { outline: none; }
button.primary, .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 650; }
button.danger { color: var(--danger); }
button.big { font-size: 18px; padding: 12px 30px; }
input, select, textarea {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
}
input[type="number"] { width: 90px; }
input.invalid { border-color: var(--danger); }

/* ---------- barre du haut ---------- */
.topbar {
  display: flex; align-items: center; gap: 22px;
  padding: calc(var(--sa-t) + 10px) max(18px, var(--sa-r)) 10px max(18px, var(--sa-l));
  background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.brand { font-weight: 800; letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; font-size: 17px; }
.brand img { width: 26px; height: 26px; }
.tabs { display: flex; gap: 4px; }
.tabs button { background: transparent; border-color: transparent; color: var(--muted); }
.tabs button.active { color: var(--text); background: var(--panel-2); border-color: var(--line); }
.devices { margin-left: auto; display: flex; gap: 8px; }
.chip { border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--muted); }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); display: inline-block; }
.chip.connected { color: var(--text); }
.chip.connected i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.chip.connecting i, .chip.reconnecting i { background: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

main { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.tab { display: none; padding: 16px max(18px, var(--sa-r)) calc(var(--sa-b) + 30px) max(18px, var(--sa-l)); max-width: 1280px; margin: 0 auto; }
.tab.active { display: block; }

/* ---------- Rouler ---------- */
.banner {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px;
  background: rgba(255, 209, 102, 0.12); border: 1px solid rgba(255, 209, 102, 0.4); border-radius: var(--radius);
}
.banner span { flex: 1; }
.demo-banner { margin: 10px 18px 0; max-width: 1244px; box-sizing: border-box; justify-content: center; padding: 5px 8px; }
.demo-banner .btn { padding: 5px 14px; font-size: 13px; }
@media (min-width: 1280px) { .demo-banner { margin: 14px auto 0; } }
.tag { align-self: center; font-size: 12px; color: var(--accent-text); border: 1px solid rgba(255, 209, 102, 0.5); border-radius: 999px; padding: 3px 10px; }
.eyebrow { display: block; margin: 0 0 8px; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
kbd { font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; background: rgba(0, 0, 0, 0.14); border-radius: 5px; padding: 4px 7px; }

/* Barre de sortie : partie centrale renflée pour la durée */

/* Accueil de l'onglet Rouler */
.ride-home { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.home-left { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.home-right { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.week-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.week-head { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; }
.week-head .eyebrow { margin: 0; }
.week-head p { margin: 0; font-size: 14px; line-height: 1.2; white-space: nowrap; } /* une seule ligne : la charge à droite garde sa place */
.week-head > div:first-child { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; } /* la ligne durée · km sur la même ligne que « Charge cumulée » */
.week-tss { flex: none; text-align: right; }
.week-tss b { display: block; font-size: 30px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.week-tss small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.2; color: var(--muted); }
.week-head { transition: opacity 0.2s; } .week-head.fade { opacity: 0; transition-duration: 0.12s; } /* sortie rapide, entrée plus douce */
/* Seuls le graphique et les jours glissent (la tuile reste fixe) : un panneau par semaine, les plus anciennes à gauche */
.week-vp { position: relative; overflow: hidden; margin: 0 -16px; padding: 0 16px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
.week-vp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.week-track { position: relative; will-change: transform; }
.week-track.snap { transition: transform 0.3s cubic-bezier(0.3, 0.9, 0.3, 1); }
.week-pn { position: absolute; top: 0; left: 0; width: 100%; } .week-pn:first-child { position: relative; }
.week-dots { display: flex; justify-content: center; gap: 6px; } .week-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--panel-3); transition: background 0.2s; } .week-dots i.on { background: var(--accent); }
.week-chart { width: 100%; height: 70px; display: block; }
.week-chart .wb { fill: var(--bar); }
.week-chart .wb.off { fill: var(--bar-off); }
.week-chart .wcum { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.week-chart .wcum-dot { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; vector-effect: non-scaling-stroke; } /* point rond malgré l'étirement du graphique */
.week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin-top: 4px; text-align: center; font-size: 11px; color: var(--muted); } /* colonnes de 46 unités comme le graphique : jours et barres alignés à toute largeur */
.week-days .today { color: var(--accent-text); font-weight: 700; }
.last-ride { display: flex; align-items: center; gap: 12px; text-align: left; background: transparent; border: 0; padding: 4px; min-height: 48px; }
.last-ride > span:first-child { flex: 1; min-width: 0; font-size: 14px; }
.last-ride small { display: block; font-size: 12px; color: var(--muted); }
.last-ride > span:last-child, .free-row .chev { color: var(--muted); }
.next-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.next-card, .free-row { transition: opacity 0.08s; }
/* Choix entre « Prochaine séance » et « Sortie libre » : la tuile choisie garde ses couleurs, l'autre est estompée */
.next-card:not(.active), .free-row:not(.active) { opacity: 0.55; }
.next-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin-bottom: -6px; } /* zone tactile de « Changer » gardée, titre de la séance plus près de l'en-tête */
.next-head .eyebrow { margin: 0; line-height: 1; }
.next-head .link-btn { align-self: center; min-height: 32px; padding: 0; line-height: 1; } /* .link-btn est aligné en haut par défaut : centré sur le titre */
.next-main { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left; background: transparent; border: 0; padding: 0; }
.next-main strong { font-size: 20px; }
.next-main small { font-size: 13px; color: var(--muted); }
.next-main .pv-profile { display: block; margin-top: 12px; }
.next-main .pv-profile svg { width: 100%; height: 120px; display: block; }
.rest-block { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.rest { display: flex; align-items: center; gap: 12px; }
.rest strong { display: block; font-size: 20px; }
.rest small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.rest-ico { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: var(--r-m); background: var(--panel-2); fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linejoin: round; }
.rest-next { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; font-size: 13px; }
.rest-next b { font-size: 15px; }
.rest-sheet-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.rest-sheet-actions button { justify-content: center; min-height: 56px; font-size: 17px; font-weight: 650; border-radius: var(--r-l); }
#btn-start.discouraged { background: var(--panel-2); color: var(--muted); }
.free-row { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; min-height: 58px; }
.free-row svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--info); stroke-width: 2; stroke-linejoin: round; }
.free-row strong { flex: 1; font-size: 15px; }
.free-check { display: none; } /* l'état choisi se voit à l'opacité des tuiles */
.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pick-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; text-align: left; background: var(--panel-2); border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; }
.pick-item strong { font-size: 15px; }
.pick-item small { display: block; font-size: 13px; color: var(--muted); }
.pick-item svg { width: 100%; height: 26px; display: block; }
.pick-item.active { border-color: var(--accent); background: rgba(255, 209, 102, 0.16); }
.pick-tag { display: inline-block; font-style: normal; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--accent-ink); background: var(--accent); border-radius: 10px; padding: 2px 8px; margin-left: 8px; vertical-align: middle; } /* même pastille que « Plan » de la tuile Prochaine séance (.plan-pill) */
.start-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
button.start { font-size: 20px; font-weight: 700; padding: 15px 40px; border-radius: var(--r-l); gap: 10px; }
button.start svg, .pause-actions .primary svg { width: 20px; height: 20px; fill: currentColor; }

.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { background: transparent; border-color: transparent; color: var(--muted); }
.seg button.active { background: var(--panel-2); color: var(--text); border-color: var(--line); }

.unit-toggle { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); padding: 2px; }
.unit-toggle button { border: 0; background: transparent; color: var(--muted); padding: 3px 10px; font-size: 12px; font-weight: 650; border-radius: 6px; }
.unit-toggle button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); }
/* Sortie libre : choix ERG / Pente sous l'heure ; le +/- porte le titre du mode */
.free-seg { display: flex; padding: 3px; border-radius: var(--r-m); background: var(--panel); }
.free-seg button { flex: 1; min-height: 40px; justify-content: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 15px; font-weight: 700; }
.free-seg button[aria-pressed="true"] { background: var(--panel-3); color: var(--text); }
.bias.free { width: 88px; } /* largeur fixe : titre, + et − ne bougent pas entre ERG (« 150 W », « 75 % FTP ») et Pente (« 2,5 % ») */
.bias-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ob-ftp input::-webkit-inner-spin-button, .ob-ftp input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Sortie en cours ---------- */
#ride-live { display: flex; flex-direction: column; gap: 20px; }
.live-clock { display: flex; justify-content: flex-end; margin-bottom: -8px; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.live-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; }
@media (max-width: 900px) { .live-top { grid-template-columns: minmax(0, 1fr); } }
.live-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.live-power { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.lp-label { display: flex; align-items: center; gap: 8px; margin-left: -6px; color: var(--muted); font-size: 17px; }
.lp-val { display: flex; align-items: baseline; gap: 10px; line-height: 1; }
.lp-val span { font-size: 150px; font-weight: 800; letter-spacing: -6px; font-variant-numeric: tabular-nums; }
.lp-val small { font-size: 36px; font-weight: 650; color: var(--muted); }
.lp-target { background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 17px; border-radius: 999px; padding: 5px 15px; font-variant-numeric: tabular-nums; }
/* Pastille ronde des icônes (puissance, cardio, cadence, temps restant) */
.badge { flex: none; box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%; background: var(--ctrl); border: 2px solid var(--bg); display: grid; place-items: center; }
.badge svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.badge .ic-power { stroke: var(--accent); }
.badge .ic-hr { stroke: var(--danger); }
/* Intensité de la séance : + / % / −, le % passe en jaune quand il n'est plus à 100 */
.bias { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bias button { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; border: 0; background: var(--ctrl); color: var(--text); }
.bias button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.bias strong { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bias.changed strong { color: var(--accent); }
.live-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 12px; }
.live-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.live-tiles .tile { position: relative; background: var(--panel-2); border-radius: var(--r-l); padding: 20px 12px 14px; display: flex; flex-direction: column; align-items: center; }
.live-tiles .badge { position: absolute; top: -12px; left: -6px; }
.live-tiles b { font-size: 36px; font-weight: 750; line-height: 1.15; font-variant-numeric: tabular-nums; }
.live-tiles .tile > span:last-child { margin-top: 2px; font-size: 15px; color: var(--muted); }
/* Palier en cours */
.step-now { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 18px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: left; font-weight: 400; color: var(--text); }
.sn-head > span { display: flex; align-items: center; gap: 2px; }
.sn-head svg { width: 16px; height: 16px; margin-right: -4px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#steps-sheet .steps { max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
#steps-list .st { cursor: pointer; }
.sn-head, .sn-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sn-head b { font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-head span { font-size: 14px; color: var(--muted); white-space: nowrap; }
.sn-line { font-size: 16px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sn-bar { display: block; height: 6px; border-radius: 3px; background: var(--ctrl); overflow: hidden; }
.sn-bar i { display: block; width: 0; height: 100%; background: var(--accent); }
.chart-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 16px 18px; min-width: 0; }
#chart { width: 100%; height: clamp(200px, 32vh, 360px); display: block; }
.controls { display: flex; align-items: center; gap: 12px; }
#btn-pause { min-height: 52px; padding: 0 34px; font-weight: 750; }
#btn-skip { min-height: 52px; gap: 8px; }
#btn-skip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.keys { margin-left: auto; font-size: 14px; }


/* Encadré des paliers : une ligne par étape (intervalles dégroupés) */
.steps-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.steps-card.wide { margin-top: 14px; }
.steps-card h3 { margin: 0 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.st { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--panel-2); border: 1px solid var(--line);
  border-left: 5px solid var(--zone, var(--zone-off)); border-radius: var(--r-s); font-size: 13px; font-variant-numeric: tabular-nums; flex: none; }
.st-num { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--tint); color: var(--muted);
  display: grid; place-items: center; font-size: 11px; font-weight: 650; }
.st-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.st-body b { font-weight: 650; }
.st-pow { color: var(--muted); margin-left: auto; white-space: nowrap; }
.st-dur { flex: none; font-size: 14px; font-weight: 650; min-width: 38px; text-align: right; }
.st.done .st-body, .st.done .st-dur { opacity: 0.45; }
.st.done { border-left-color: var(--hair); }
.st-ico { flex: none; width: 20px; height: 20px; display: grid; place-items: center; }
.st-ico svg { width: 16px; height: 16px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.st.ok .st-ico svg { stroke: var(--ok); }
.st.miss .st-ico svg { stroke: var(--danger); }
.st.skip .st-ico svg { stroke: var(--muted); }
.st-res { width: 100%; color: var(--muted); font-size: 12px; }
.st.active { position: relative; overflow: hidden; }
.st.active .st-dur { font-size: 26px; font-weight: 750; color: var(--accent); min-width: 64px; }
.st.active .st-num { width: 24px; height: 24px; font-size: 12px; }
.st-prog { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); }
.st.active { background: rgba(255, 209, 102, 0.14); border-color: var(--accent); padding: 12px 10px 14px; font-size: 15px; }
.st.active .st-body b { font-size: 17px; }
.st.active .st-num { background: var(--accent); color: var(--accent-ink); }
.st.active .st-pow { color: var(--text); font-weight: 650; margin-left: 0; }
.st.active .st-body { flex-direction: column; align-items: flex-start; gap: 2px; } /* nom puis cible : pas de décalage quand la cible est longue */
.st-empty { color: var(--muted); font-size: 13px; padding: 6px 2px; }

/* ---------- Séances ---------- */
.wk-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 800px) { .wk-layout { grid-template-columns: minmax(0, 1fr); } }
.wk-side { display: flex; flex-direction: column; gap: 8px; }
.wk-side > button { justify-content: center; }
#wk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#wk-list li button { width: 100%; display: block; text-align: left; padding: 8px 10px; }
#wk-list li.active button { border-color: var(--accent); background: rgba(255, 209, 102, 0.08); }
#wk-list .nm { font-weight: 650; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wk-list .meta { color: var(--muted); font-size: 12px; }
#wk-list svg { width: 100%; height: 26px; margin-top: 4px; display: block; }
/* Séance choisie : consultation ou édition (classe .editing sur #wk-main) */
.wk-main:not(.editing) .wk-edit-only, .wk-main.editing .wk-view-only { display: none; }
.wk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; min-height: 46px; }
.wk-main.editing .wk-head { flex-wrap: nowrap; } /* en édition : nom, Supprimer, Annuler, Enregistrer restent sur une seule ligne */
.wk-main.editing .wk-head input { flex: 1 1 0; min-width: 0; }
.wk-main.editing .wk-head button { flex: none; white-space: nowrap; }
.wk-main.editing .wk-head .spacer { display: none; } /* le champ du nom prend toute la place libre */
@media (max-width: 1000px) { .wk-badge { display: none; } } /* portrait : le badge « Édition » est redondant et prend la place du bouton Enregistrer */ /* hauteur fixe : rien ne bouge en passant de la consultation à l'édition (le champ du nom est plus haut que le titre) */
.wk-title { margin: 0; font-size: 24px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-head input { font-size: 18px; font-weight: 700; min-width: 260px; border-color: var(--accent); box-sizing: border-box; height: 46px; }
.wk-badge { font-size: 12px; color: var(--accent-text); border: 1px solid rgba(255, 209, 102, 0.4); border-radius: 999px; padding: 3px 10px; }
.wk-head #wk-ride svg { width: 16px; height: 16px; fill: currentColor; }
.wk-head #wk-ride, .wk-head #wk-save { padding-inline: 18px; font-weight: 700; }
button.ghost { background: transparent; border-color: transparent; }

/* Données de la séance, unité W / %, aide (i) */
.wk-stats-row { position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.wk-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-right: auto; }
.wk-stats div { display: flex; flex-direction: column; }
.wk-stats span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.wk-stats b { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.wk-stats-row .unit-toggle { background: var(--panel-2); border-color: transparent; }
.wk-stats-row .unit-toggle button { padding: 5px 14px; font-size: 13px; }
.wk-stats-row .unit-toggle button[aria-pressed="true"] { background: var(--panel-3); }
.info-wrap { position: relative; }
.info-btn { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; border: 0; }
.info-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.info-btn[aria-expanded="true"] svg { stroke: var(--accent); }
.info-pop { position: absolute; top: 40px; right: 0; z-index: 20; width: 320px; background: var(--panel-2); border: 1px solid var(--hair); border-radius: 12px;
  padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--dim); box-shadow: 0 12px 30px var(--shadow); }
.info-pop strong { color: var(--text); }
.info-pop ul { margin: 4px 0 0; padding-left: 18px; }
.info-pop p { margin: 6px 0 0; color: var(--muted); }

/* Frise (pleine largeur) et, en édition, blocs à ajouter à droite */
.wk-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
/* Blocs à ajouter : cinq tuiles égales sous la frise (vignette au-dessus, nom dessous) */
.palette { display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
#editor-root.editing .palette { display: grid; }
.pal { flex-direction: column; justify-content: center; gap: 6px; cursor: grab; padding: 10px 8px 9px; border-radius: 12px; }
.pal svg { flex: none; width: 72px; height: 30px; display: block; }
.pal strong { font-weight: 650; font-size: 14px; text-align: center; }
.pal:active { cursor: grabbing; }
.pal { touch-action: none; } /* le doigt qui glisse déplace le bloc au lieu de faire défiler la page */
.pal-ghost { position: fixed; z-index: 1000; margin: 0; pointer-events: none; opacity: 0.92; box-shadow: 0 10px 28px var(--shadow); }
.timeline { position: relative; display: flex; align-items: stretch; gap: 6px; height: 292px; box-sizing: border-box; padding: 14px 14px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; outline-offset: 2px; }
.timeline .empty { align-self: center; margin: 0 auto; color: var(--muted); }
.blk { position: relative; flex: 1 1 0; min-width: 22px; display: flex; flex-direction: column; user-select: none; }
#editor-root.editing .blk { cursor: pointer; }
.blk > svg { flex: 1 1 0; height: 0; min-height: 0; width: 100%; display: block; opacity: 0.92; border-radius: 6px; }
#editor-root.editing .blk:hover > svg { opacity: 1; }
.timeline.has-sel .blk:not(.sel) > svg { opacity: 0.45; }
.blk.sel > svg { opacity: 1; filter: brightness(1.12); }
.blk.dragging { opacity: 0.35; }
/* Poubelle du bloc sélectionné : juste au-dessus du palier, sous son résumé (la place est réservée pour que rien ne bouge) */
.blk > svg { margin-top: 36px; } /* place de la poubelle, entre le résumé et le palier */
.blk-del { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); z-index: 4; width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 50%; color: var(--danger); touch-action: manipulation; }
.blk-del svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#editor-root.editing .blk { touch-action: none; }
.blk.touch-drag { z-index: 3; opacity: 0.8; filter: drop-shadow(0 8px 14px var(--shadow)); }
.blk-label { display: flex; flex-direction: column; font-size: 11px; line-height: 1.25; margin-bottom: 6px; white-space: nowrap; overflow: hidden; pointer-events: none; }
.blk-label span { color: var(--muted); }
.drop-marker { position: absolute; top: 10px; bottom: 10px; width: 3px; margin-left: -4px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); pointer-events: none; z-index: 5; }

/* Réglages du bloc sélectionné (édition) */
.inspector { display: none; margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
#editor-root.editing .inspector { display: block; }
.insp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.insp-actions { display: flex; gap: 6px; }
.insp-fields { display: flex; flex-wrap: wrap; gap: 16px; }
.insp-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.insp-fields input { color: var(--text); text-align: center; }
.insp-fields input[data-kind="dur"] { width: 76px; }
.insp-fields input[data-kind="pct"] { width: 64px; }
.insp-fields input[data-kind="int"] { width: 64px; }
.insp-step { display: flex; align-items: center; gap: 6px; }
.insp-step button { flex: none; width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; font-size: 20px; line-height: 1; }
.insp-fields:has(.insp-panel) { justify-content: center; }
/* Intervalles : l'interrupteur est dans l'en-tête, entre le titre et les actions (à la même hauteur) ; en portrait étroit il passe sous le titre */
.insp-head:has(.insp-seg) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 0; }
.insp-head:has(.insp-seg) .insp-seg { justify-self: center; }
.insp-head:has(.insp-seg) .insp-actions { align-self: stretch; }
.insp-head:has(.insp-seg) .insp-actions button { height: 100%; }
@media (max-width: 1000px) {
  .insp-head:has(.insp-seg) { grid-template-columns: minmax(0, 1fr) auto; }
  .insp-head:has(.insp-seg) .insp-seg { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}
.insp-seg { position: relative; display: flex; gap: 2px; padding: 3px; width: min(calc(var(--n, 3) * 150px), 100%); flex: none; box-sizing: border-box;
  background: var(--panel-2); border-radius: var(--r-l); touch-action: none; user-select: none; -webkit-user-select: none; }
.insp-thumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--r-m); background: var(--panel-3); opacity: 0; pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.3, 0.9, 0.3, 1), width 0.3s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.15s; }
:root[data-theme="light"] .insp-thumb { background: var(--panel); box-shadow: 0 1px 4px rgba(11, 31, 58, 0.14); }
.insp-thumb.show { opacity: 1; }
.insp-thumb.no-anim { transition: none; }
.insp-chip { position: relative; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 0; padding: 6px 4px; border-radius: var(--r-m); background: transparent; }
.insp-chip span { display: flex; align-items: center; font-size: 12px; color: var(--muted); }
.insp-chip i { width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--c); }
.insp-chip.rep i { display: none; }
.insp-chip b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.insp-panel { display: flex; justify-content: center; }
.insp-panel:empty { display: none; }
.insp-panel:not(:empty) { margin-top: 12px; }
.insp-panel .insp-row { justify-content: center; margin: 0; }
.insp-panel .insp-f { align-items: center; }
.insp-row { display: flex; flex-wrap: wrap; gap: 16px; }

.pct { display: flex; align-items: center; gap: 8px; color: var(--text); }
.pct em { font-style: normal; color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ---------- Historique ---------- */
.ride-card { margin-bottom: 10px; background: var(--panel); border: 1px solid transparent; border-radius: 14px; overflow: hidden; }
.ride-card.open { border-color: var(--accent); }
/* Même gabarit que les tuiles de l'onglet Séances : nom, ligne de chiffres, puis la courbe sur toute la largeur */
.ride-main { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 12px; align-items: center; width: 100%; padding: 12px 14px; border: 0; border-radius: 0; background: transparent; text-align: left; }
.ride-main > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* comme les tuiles de l'onglet Séances : <small> en ligne */
.ride-main strong { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ride-main small { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ride-main .chev { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.ride-card.open .chev { transform: rotate(90deg); }
.ride-thumb { grid-column: 1 / -1; display: block; height: 30px; }
.ride-thumb svg { width: 100%; height: 30px; display: block; }
.ride-card .acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 14px 12px; }
.hist-bar { display: flex; gap: 10px; margin-bottom: 10px; }
.hist-bar button { flex: 1; min-height: 40px; justify-content: center; border-radius: var(--r-m); }
.ride-card.selected { border-color: var(--accent); background: rgba(255, 209, 102, 0.16); }
.ride-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 12px; font-weight: 800; }
.ride-card.selected .ride-check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#rename-form { display: flex; flex-direction: column; gap: 12px; }
#rename-form input { min-height: 48px; font-size: 16px; }
.ride-card .acts > * { flex: 1 1 auto; justify-content: center; min-height: 38px; font-size: 14px; }

/* ---------- Réglages ---------- */
.settings { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.settings > .page-head { margin-bottom: 4px; }
/* En-tête commun de Séances, Historique et Réglages : même hauteur, même titre, 14 px avant les tuiles ; 10 px entre les tuiles */
.page-head { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 14px; }
.page-head .primary { min-height: 40px; border-radius: var(--r-m); } /* « + Créer », « Éditer » */
.page-title { flex: 1; margin: 0; font-size: 26px; font-weight: 800; }
.page-col { max-width: 680px; margin: 0 auto; }
.imp-ico { width: 14px; height: 14px; margin-left: 6px; vertical-align: -1px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.drop-ready { outline: 2px dashed var(--accent); outline-offset: -8px; border-radius: var(--r-l); }
.set-version { text-align: center; font-size: 13px; margin: 4px 0 0; }
.set-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.set-card-head { display: flex; align-items: center; gap: 14px; }
.set-card-head > svg { flex: none; width: 38px; height: 38px; padding: 9px; box-sizing: border-box; border-radius: 10px; background: rgba(255, 209, 102, 0.12);
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.set-card-head > div { flex: 1; min-width: 0; align-self: center; } /* titre seul : centré sur l'icône */
.set-card-head h3 { margin: 0; font-size: 16px; }
.set-card-head p { margin: 2px 0 0; font-size: 14px; }
.set-card-head .btn, .set-card-head .pill { flex: none; align-self: center; }
.pill { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 11px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.pill::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; }
button.pill { background: transparent; line-height: inherit; min-height: 0; }
button.pill:disabled { opacity: 1; cursor: default; }
button.pill:not(:disabled)::after { content: "›"; margin-left: 6px; }
#strava-sheet .sheet-action { width: 100%; justify-content: center; }
.pill[data-state="connected"] { color: var(--ok); border-color: rgba(79, 209, 139, 0.4); background: rgba(79, 209, 139, 0.08); }
.pill[data-state="configured"] { color: var(--accent-text); border-color: rgba(255, 209, 102, 0.4); background: rgba(255, 209, 102, 0.08); }
.set-card-head .ftp-input { flex: none; align-self: center; }
.set-card-head .link-btn { min-height: 28px; padding: 2px 0; font-size: 14px; }
.ftp-input { display: inline-flex; align-items: baseline; gap: 6px; background: var(--panel-2); border: 1px solid transparent; border-radius: var(--r-m); min-height: 40px; box-sizing: border-box; padding: 5px 12px; }
.ftp-input:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ftp-input input { width: 3.4ch; border: 0; background: transparent; font-size: 20px; font-weight: 700; text-align: center; padding: 0; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.ftp-input input::-webkit-inner-spin-button, .ftp-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ftp-input input:focus-visible { outline: none; }
.ftp-input b { color: var(--muted); font-weight: 600; }
/* Langue : on affiche « FR » / « EN » ; la vraie liste (invisible, par-dessus) montre « (par défaut) » à l'ouverture */
.lang-pick { position: relative; flex: none; align-self: center; display: inline-flex; align-items: center; gap: 4px; background: var(--panel-2); border: 1px solid transparent; border-radius: var(--r-m); min-height: 40px; box-sizing: border-box; padding: 7px 10px 7px 14px; font-weight: 700; }
.lang-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-pick svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lang-pick select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.zones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
#zones-dialog .zones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.link-btn { align-self: flex-start; padding: 4px 0; min-height: 32px; background: transparent; border: 0; color: var(--accent-text); font-size: 14px; }
.zone { border-radius: 9px; background: var(--panel-2); padding: 8px 8px 9px; border-top: 4px solid var(--z); font-variant-numeric: tabular-nums; }
.zone b { display: block; font-size: 13px; }
.zone span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone em { display: block; font-style: normal; font-size: 13px; margin-top: 3px; }
@media (max-width: 620px) { .zones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.set-steps { margin: 0; background: var(--panel-2); border-radius: 10px; padding: 10px 14px; color: var(--muted); }
.set-steps summary { cursor: pointer; color: var(--text); font-weight: 600; font-size: 14px; }
.set-steps ol { margin: 10px 0 2px; padding: 0; list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.set-steps li { counter-increment: st; position: relative; padding-left: 34px; }
.set-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--accent-text); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.set-grid .field { margin: 0; }
@media (max-width: 620px) { .set-grid { grid-template-columns: minmax(0, 1fr); } .set-card-head { flex-wrap: wrap; } }
.set-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.field input:not([type="number"]), .field textarea, .field select { width: 100%; box-sizing: border-box; color: var(--text); font-size: 15px; }
.field span { color: var(--text); }
details { margin-bottom: 14px; color: var(--muted); }
details summary { cursor: pointer; color: var(--text); }
details ol { padding-left: 20px; line-height: 1.7; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Boîte de fin de sortie ---------- */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 24px; width: min(560px, 94vw); }
dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
dialog h2 { margin-top: 0; }
.finish-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px; }
.finish-stats div { background: var(--panel-2); border-radius: 9px; padding: 8px 10px; }
.finish-stats span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.finish-stats b { font-size: 20px; font-variant-numeric: tabular-nums; }
.dialog-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.icon-btn { width: 42px; height: 42px; padding: 0; justify-content: center; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#finish-save { padding-inline: 22px; }

/* Fin du test progressif : FTP d'avant → nouvelle FTP, puis retour au calme */
dialog.ftp-dialog { width: min(342px, 94vw); transition: width 0.2s ease-out; }
dialog.ftp-dialog[data-page="finish"] { width: min(560px, 94vw); } /* « Sortie terminée » est plus large que les deux pages du test */
#ftpf-finish .finish-stats, #ftpf-finish .field, .ftp-dialog .dialog-actions { margin: 0; } /* l'espacement vient du panneau */
.ftp-dialog h2 { text-align: center; }
.ftp-change { display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding: 10px 0 14px; }
.ftp-change > div { text-align: center; }
.ftp-change span, .ftp-cool span { display: block; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.ftp-change p { display: flex; align-items: baseline; justify-content: center; gap: 5px; margin: 8px 0 0; line-height: 1; font-variant-numeric: tabular-nums; }
.ftp-change b { font-size: 40px; }
.ftp-change small { font-size: 16px; font-weight: 600; }
.ftp-change .before { color: var(--muted); }
.ftp-change .after { color: var(--accent); }
.ftp-change svg { flex-shrink: 0; width: 40px; height: 40px; margin-bottom: 8px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ftp-cool { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 14px; }
.ftp-cool svg { width: 120px; height: 44px; }

/* ---------- Popup de pause ---------- */
dialog.pause-dialog { width: min(440px, 94vw); box-sizing: border-box; border: 1px solid rgba(255, 209, 102, 0.55); border-radius: var(--r-xl); padding: 30px 28px 24px; text-align: center; box-shadow: 0 24px 60px var(--shadow); }
dialog.pause-dialog[open] { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pause-dialog::backdrop { background: rgba(8, 10, 14, 0.74); backdrop-filter: blur(4px); }
.pause-dialog h2 { margin: 0; font-size: 26px; }
.pause-stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pause-stats div { background: var(--panel-2); border-radius: 10px; padding: 10px 8px; }
.pause-stats span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.pause-stats b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pause-stats b span { display: inline; font-size: inherit; color: inherit; text-transform: none; letter-spacing: 0; }
.pause-stats small { font-size: 12px; color: var(--muted); font-weight: 500; }
#p-time { color: var(--accent); }
.calib-gauge { margin: 4px 0 14px; }
.cg-read { display: flex; align-items: baseline; gap: 6px; }
.cg-read b { font-size: 40px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cg-read span { color: var(--muted); }
.cg-read small { margin-left: auto; color: var(--muted); font-size: 14px; }
.cg-bar { position: relative; height: 16px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 8px; }
.cg-bar i { position: absolute; top: 0; bottom: 0; left: 0; }
.cg-zone { background: color-mix(in srgb, var(--ok) 35%, transparent); border-left: 2px solid var(--ok); border-right: 2px solid var(--ok); }
.cg-fill { background: var(--accent); border-radius: 999px; transition: width 0.3s; }
.cg-fill.ok { background: var(--ok); }
.cg-scale { display: flex; justify-content: space-between; margin-top: 4px; color: var(--muted); font-size: 12px; }
.live-clock { cursor: pointer; }
.pause-change { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; padding-top: 14px; border-top: 1px solid var(--line); }
.pause-change .eyebrow { margin: 0; }
.pause-change .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--bg); }
.pause-change .seg button { justify-content: center; }
.pause-change select { width: 100%; }
.pause-unit { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pause-unit .eyebrow { margin: 0; }
.pause-unit .unit-toggle { padding: 3px; border-radius: 10px; }
.pause-unit .unit-toggle button { min-width: 48px; min-height: 32px; justify-content: center; }
.pause-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pause-actions button { width: 100%; justify-content: center; border-radius: var(--r-m); }
.pause-actions .primary { font-size: 18px; font-weight: 700; padding: 14px 20px; gap: 10px; }
.pause-actions .danger { background: transparent; padding: 11px 20px; }

/* ---------- Notifications (toast.js, maquette docs/maquettes/toast-haut.html) ----------
   Une seule à l'écran. Téléphone : en haut, pleine largeur, 8 px sous l'encoche / la barre d'état, elle descend de derrière l'encoche et y remonte. iPad : en haut à droite, sous la barre. Ordinateur (souris) : en bas à droite. */
#toasts { --dir: -1; position: fixed; z-index: 50; inset: calc(var(--sa-t) + 64px) 16px auto auto; width: min(380px, calc(100vw - 32px)); margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
/* Posé en « popover » (couche supérieure) : visible aussi au-dessus des fenêtres et feuilles ouvertes */
#toasts:not(:popover-open) { display: none; }
@media (hover: hover) and (pointer: fine) { #toasts { --dir: 1; inset: auto 16px calc(var(--sa-b) + 16px) auto; } } /* ordinateur (souris) : en bas à droite ; iPad (tactile) : en haut */
.toast { --c: var(--accent-text); pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 8px 8px 12px; border-radius: var(--r-l);
  background: color-mix(in srgb, var(--c) 16%, var(--panel)); color: var(--text); box-shadow: 0 8px 24px var(--shadow); font-size: 14px; line-height: 1.35;
  touch-action: pan-x; user-select: none; -webkit-user-select: none; animation: toast-in 0.4s cubic-bezier(0.3, 0.9, 0.3, 1) both; }
.toast.ok { --c: var(--ok); }
.toast.error { --c: var(--danger); }
.toast .ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c); }
.toast .ic svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.toast:not(.ok):not(.error) .ic svg { stroke: var(--bg); } /* information : cercle marine en clair, jaune en sombre ; le glyphe prend le fond du thème */
.toast .msg { flex: 1; min-width: 0; padding: 4px 0; overflow-wrap: anywhere; }
.toast-action { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--accent-text); font-weight: 700; text-decoration: none; }
.toast-x { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-s); background: transparent; color: var(--muted); display: grid; place-items: center; }
.toast-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; }
.toast.drag { animation: none; transition: none; }
.toast.back { animation: none; transition: transform 0.3s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.3s; }
.toast.out { animation: none; transition: transform 0.25s ease-in, opacity 0.25s; transform: translateY(calc(var(--dir) * (100% + 24px))); opacity: 0; } /* repart vers son bord (haut : sous l'encoche) */
@keyframes toast-in { from { transform: translateY(calc(var(--dir) * (100% + 24px))); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* Appareils : réglages et popup de pause */
.dev-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dev-rows li { display: flex; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid var(--line); }
.dev-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dev-rows li.on .dev-ico, .pdev.on .dev-ico { stroke: var(--ok); }
.dev-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dev-txt strong { font-size: 15px; }
.dev-txt small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-rows li.on small { color: var(--ok); }
.dev-rows button { flex: none; font-size: 13px; padding: 7px 13px; min-height: 36px; }
.dev-rows .dev-off { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.pause-devices { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; padding-top: 14px; border-top: 1px solid var(--line); }
.pause-devices .eyebrow { margin: 0; }
.pdev-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pdev { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 70px; padding: 8px 4px; border-radius: var(--r-m); background: transparent; border: 1px solid transparent; }
/* Seule exception à « aucun contour » : un appareil à connecter garde un contour pointillé (outline : la règle des contours ne le touche pas), sinon la tuile est invisible */
.pdev:not(.on) { outline: 1.5px dashed var(--hair); outline-offset: -1.5px; }
.pdev:not(.on) span { color: var(--muted); }
.pdev .dev-ico { width: 20px; height: 20px; }
.pdev span { font-size: 13px; font-weight: 600; }
.pdev small { font-size: 12px; font-weight: 600; color: var(--accent-text); }
.pdev.on { border: 1px solid rgba(79, 209, 139, 0.4); background: rgba(79, 209, 139, 0.08); }
.pdev.on small { color: var(--ok); font-weight: 500; }
.pdev.busy small { color: var(--muted); }

/* Glisser pour supprimer (téléphone) */
.swipe { position: relative; }
.swipe-del { position: absolute; top: 0; bottom: 0; right: 0; width: 62px; display: flex; align-items: center; justify-content: center; padding: 0;
  background: color-mix(in srgb, var(--danger) 18%, var(--bg)); color: var(--danger); border: 0; border-radius: var(--r-l); opacity: 0; pointer-events: none; }
.swipe-del svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swipe.open .swipe-del { pointer-events: auto; }
.swipe[data-removing] { pointer-events: none; }
.swipe-body { position: relative; touch-action: pan-y; will-change: transform; transition: transform 0.3s cubic-bezier(0.3, 0.9, 0.3, 1); }
.swipe-del { transition: width 0.25s cubic-bezier(0.3, 0.9, 0.3, 1), background 0.2s, color 0.2s; }
.swipe-del svg { transition: transform 0.25s cubic-bezier(0.3, 0.9, 0.3, 1); }
/* Seuil de suppression franchi : lâcher supprime ; la case rouge s'étend sous la carte et la poubelle grossit */
.swipe.armed .swipe-del { width: 100%; background: var(--danger); color: var(--danger-ink); } /* le rouge plein n'apparaît qu'au seuil : lâcher supprime */
.swipe.armed .swipe-del svg { transform: scale(1.25); }
.swipe.swiping .swipe-body { transition: none; }
@media (prefers-reduced-motion: reduce) { .swipe-body, .swipe-del, .swipe-del svg { transition: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tab-ico { display: none; }
dialog.sheet { width: min(480px, 94vw); box-sizing: border-box; }
dialog.sheet[open] { display: flex; flex-direction: column; gap: 14px; }
/* Panneau à plusieurs pages (Compte) : les pages sont superposées, une seule visible, et glissent l'une sur l'autre */
.sheet-views { display: grid; overflow: hidden; }
.sheet-view { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; background: var(--panel); }
.sheet-view[hidden] { display: none; }
#tr-calib .sheet-close { margin-left: auto; }
.sheet-view.view-fwd { animation: view-fwd 0.22s ease-out; }
.sheet-view.view-back { animation: view-back 0.22s ease-out; }
.sheet-head { display: flex; align-items: center; gap: 10px; }
.sheet-head h2 { flex: 1; margin: 0; font-size: 20px; }
.sheet-close { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
#wk-detail p { margin: -6px 0 0; font-size: 14px; }
#wk-detail .pv-profile svg { width: 100%; height: 110px; display: block; }
.wd-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wd-blocks li { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
#wd-start { min-height: 56px; justify-content: center; border-radius: 14px; font-size: 18px; font-weight: 750; gap: 10px; }
#wd-start svg { width: 18px; height: 18px; fill: currentColor; }
.lbl-short { display: none; }
.dev-icons { display: none; }
.wkm { display: none; }
.steps-all { display: none; }

/* ---------- Premier lancement (affiché seulement sur téléphone) ---------- */
/* Écran de démarrage : le même que l'écran de lancement d'iOS, le temps de savoir s'il faut l'écran de connexion */
.boot { position: fixed; inset: 0; z-index: 60; background: var(--bg); }
/* Même place et même taille que le logo de l'écran de lancement iOS et de l'écran de connexion (40 % de la hauteur, 112 px) */
.boot img { position: absolute; left: 50%; top: 40%; width: 112px; height: 112px; transform: translate(-50%, -50%); }
.onboarding { position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: var(--bg); box-sizing: border-box;
  padding: calc(var(--sa-t) + 16px) max(22px, var(--sa-r)) calc(var(--sa-b) + 24px) max(22px, var(--sa-l)); }
.onboarding:not([hidden]) { display: flex; flex-direction: column; }
.ob-top { display: flex; align-items: center; min-height: 44px; }
.ob-back { width: 44px; height: 44px; padding: 0; justify-content: center; margin-left: -10px; background: transparent; border: 0; }
.ob-back svg { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ob-dots { flex: 1; display: flex; justify-content: center; gap: 6px; margin-right: 34px; }
.ob-back[hidden] + .ob-dots { margin-right: 0; }
.ob-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--ctrl); transition: width 0.2s; }
.ob-dots i.on { width: 24px; background: var(--accent); }
.ob-step { flex: 1; display: flex; flex-direction: column; gap: 20px; margin-top: 12px; }
.ob-step[hidden] { display: none; }
.ob-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-top: 8px; }
.ob-logo { width: 88px; height: 88px; }
.onboarding h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; }
.onboarding p { margin: 0; font-size: 16px; }
.ob-text { display: flex; flex-direction: column; gap: 8px; }
.ob-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ob-features li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.ob-features svg { width: 40px; height: 40px; }
.ob-features svg rect { fill: rgba(255, 209, 102, 0.12); }
.ob-features svg path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ob-features small { display: block; color: var(--muted); font-size: 14px; }
.ob-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.ob-card > svg { flex: none; width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--info); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ob-card h2 { margin: 0; font-size: 15px; }
.ob-card p { font-size: 14px; margin-top: 2px; }
.ob-zones-card { flex-direction: column; align-items: stretch; gap: 8px; }
.ob-zones-card .eyebrow { margin: 0; }
.ob-zones-card .zones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ob-ftp { display: flex; align-items: center; justify-content: center; gap: 18px; }
.ob-round { width: 56px; height: 56px; border-radius: 50%; padding: 0; justify-content: center; font-size: 26px; }
.ob-ftp label { display: flex; align-items: baseline; gap: 6px; }
.ob-ftp input { width: 3.3ch; min-width: 0; background: transparent; border: 0; border-bottom: 2px solid var(--accent); border-radius: 0; font-size: 64px; font-weight: 750; line-height: 1; text-align: center; padding: 0; font-variant-numeric: tabular-nums; }
.ob-ftp b { font-size: 20px; color: var(--muted); }
.ob-hint { font-size: 14px !important; }
.ob-devices { display: flex; flex-direction: column; gap: 10px; }
.ob-device { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.ob-device.on { border-color: rgba(79, 209, 139, 0.5); }
.ob-device > span:first-child { flex: 1; min-width: 0; }
.ob-device small { display: block; color: var(--muted); font-size: 14px; }
.ob-device button { min-height: 40px; }
.ob-ready { color: var(--ok); font-weight: 600; font-size: 13px; }
.ob-actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.ob-actions .primary { min-height: 56px; justify-content: center; border-radius: 14px; font-size: 18px; font-weight: 750; }
.ob-link { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 14px; background: transparent; border: 0; color: var(--accent-text); text-decoration: none; }
#ob-later { color: var(--muted); }

/* ---------- compte : écran de connexion, carte des réglages ---------- */
.login { z-index: 45; }
.login .ob-step { width: 100%; max-width: 440px; margin-inline: auto; }
/* Logo à la même place et à la même taille que sur l'écran de lancement (centre de l'écran) */
.login-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
/* Logo à 40 % de la hauteur, même taille et même endroit que l'écran de lancement (LaunchScreen.storyboard : 112 pt, centre à 0,8 × le milieu) ; le nom juste dessous */
.login-view[data-view="choose"] .login-hero { position: absolute; inset: 0; display: block; pointer-events: none; }
.login-logo { position: absolute; left: 50%; top: 40%; width: 112px; height: 112px; transform: translate(-50%, -50%); }
.login-name { position: absolute; left: 0; right: 0; top: calc(40% + 58px); font-size: 22px; font-weight: 750; letter-spacing: -0.3px; }
.login-btn { min-height: 44px; justify-content: center; gap: 10px; border-radius: var(--r-m); font-size: 15px; font-weight: 600; }
.login-btn svg, .login-sent-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-btn.apple { background: #fff; color: #000; border-color: #fff; }
.login-btn.apple svg { fill: #000; stroke: none; }
.login-btn svg.g { stroke: none; }
.login-btn:disabled { opacity: 0.6; }
.login-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login .ob-actions { gap: 8px; }
.login-sent-ico { width: 76px; height: 76px; border-radius: var(--r-xl); background: rgba(255, 209, 102, 0.12); display: flex; align-items: center; justify-content: center; color: var(--accent-text); }
.login-sent-ico svg { width: 38px; height: 38px; }
.login .field input { min-height: 52px; font-size: 17px; }
.login .login-main { min-height: 52px; justify-content: center; border-radius: 12px; font-size: 16px; }
#login-skip { color: var(--muted); }
.account-initial { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 750; display: flex; align-items: center; justify-content: center; }
#account-login { flex: none; align-self: center; }
.set-sub { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-row-label { display: inline-flex; align-items: center; gap: 4px; }
.set-warn { margin: 0; background: rgba(255, 209, 102, 0.12); border-radius: var(--r-m, 12px); padding: 10px 12px; font-size: 14px; }
.imp-tag { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 8px; position: relative; top: -1px; font-size: 12px; font-weight: 650; color: var(--strava); background: rgba(252, 76, 2, 0.12); border-radius: 999px; padding: 2px 8px; }
.head-connect { flex: none; align-self: center; font-size: 13px; padding: 7px 13px; min-height: 36px; }
#set-account { cursor: pointer; }
.chev-btn { flex: none; align-self: center; width: 44px; height: 44px; padding: 0; justify-content: center; margin-right: -12px; background: transparent; border: 0; color: var(--muted); }
.chev-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Panneau Compte : état de la synchro, actions groupées, suppression à part */
.account-head { gap: 14px; }
.account-head > div { flex: 1; min-width: 0; }
.account-head h2 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-initial.big { width: 46px; height: 46px; font-size: 18px; }
.account-sync { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.account-sync.ok { color: var(--ok); }
.account-sync.error { color: var(--danger); }
.sheet-group { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--panel-2); }
.sheet-group button { min-height: 52px; border: 0; border-radius: 0; background: transparent; justify-content: flex-start; gap: 12px; padding: 0 16px; font-size: 16px; text-align: left; }
.sheet-group button + button { border-top: 1px solid var(--line); }
@media (hover: hover) { .sheet-group button:hover:not(:disabled) { background: var(--hover); } }
.sheet-group svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sheet-group .chev { margin-left: auto; width: 14px; height: 14px; color: var(--muted); }
.sheet-back { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--accent-text); font-size: 15px; }
.sheet-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sheet-head:has(.sheet-back) { justify-content: space-between; }
.data-title { margin: 0; font-size: 20px; }
.tile-del { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--danger); border-radius: var(--radius); background: rgba(255, 107, 107, 0.12); color: var(--danger); font-size: 16px; font-weight: 600; text-align: left; }
.tile-del svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#acc-delete h2 { margin: 0; font-size: 22px; }
#acc-delete p { margin: 0; line-height: 1.45; }
.delete-confirm { min-height: 52px; justify-content: center; border-radius: 12px; font-size: 16px; font-weight: 650; margin-top: 6px; }
.delete-cancel { min-height: 52px; justify-content: center; background: rgba(255, 107, 107, 0.12); border: 1px solid var(--danger); color: var(--danger); border-radius: 12px; font-size: 16px; font-weight: 600; }
.mail-list { display: flex; flex-direction: column; gap: 8px; }
.mail-list button { width: 100%; justify-content: center; min-height: 50px; border-radius: 12px; font-size: 16px; }

/* ---------- Téléphone (portrait < 600 px, ou paysage de moins de 500 px de haut) ---------- */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  /* Barre d'onglets : sous les icônes, juste assez de marge pour le geste de la barre d'accueil d'iOS */
  :root { --tab-pb: max(4px, calc(var(--sa-b) - 16px)); --tab-h: calc(4px + 46px + var(--tab-pb) + 1px); }
  body { padding-bottom: 0; }
  .topbar { gap: 10px; padding: calc(var(--sa-t) + 10px) max(16px, var(--sa-r)) 10px max(16px, var(--sa-l)); }
  .devices { display: none; }
  .dev-icons { display: flex; gap: 0; margin: -6px -8px -6px auto; }
  .dev-icons button { width: 40px; height: 40px; padding: 0; justify-content: center; background: transparent; border: 0; border-radius: 10px; }
  .dev-icons svg { width: 22px; height: 22px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .dev-icons .on svg { stroke: var(--ok); }
  .dev-icons .busy svg { stroke: var(--accent); animation: pulse 1s infinite; }
  .tab { padding: 14px max(16px, var(--sa-r)) 24px max(16px, var(--sa-l)); }

  /* Onglets en barre du bas */
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
    background: var(--panel); border-top: 1px solid var(--line); padding: 4px max(4px, var(--sa-r)) var(--tab-pb) max(4px, var(--sa-l));
    box-sizing: border-box; height: var(--tab-h); }
  .tabs button { flex-direction: column; gap: 2px; justify-content: center; min-height: 46px; padding: 4px 0; font-size: 11px; border: 0; border-radius: 0; }
  .tabs button.active { background: transparent; border: 0; color: var(--accent-text); font-weight: 600; }
  .tabs button.active .tab-ico { stroke: var(--accent); }
  .tab-ico { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  main { padding-bottom: calc(var(--tab-h) + 4px); }

  /* Sortie en cours : plein écran, ni en-tête ni onglets */
  body.riding .topbar, body.riding .tabs, body.riding #demo-banner { display: none; }
  body.riding main { padding-bottom: 0; }
  body.riding #tab-ride { padding: calc(var(--sa-t) + 10px) max(16px, var(--sa-r)) calc(var(--sa-b) + 14px) max(16px, var(--sa-l)); }

  .demo-banner { margin: 10px 16px 0; font-size: 13px; }

  /* Accueil compact */
  .ride-home { flex-direction: column; gap: 14px; }
  .home-left, .home-right { max-width: none; flex: none; width: 100%; gap: 14px; }
  /* Ordre de la maquette : semaine, séance, sortie libre, dernière sortie */
  .ride-home { gap: 12px; align-items: stretch; }
  .home-left, .home-right { display: contents; }
  .week-card { order: 1; } .next-card { order: 2; } .free-row { order: 3; } .last-ride { order: 4; }
  .next-main .pv-profile svg { height: 56px; }
  /* Démarrer reste visible, collé au-dessus des onglets */
  /* Démarrer : barre fixe juste au-dessus des onglets (61 px + marge du bas), la page réserve sa place */
  .start-row { position: fixed; left: 0; right: 0; bottom: var(--tab-h); z-index: 15; margin: 0;
    padding: 10px max(16px, var(--sa-r)) 10px max(16px, var(--sa-l)); background: var(--bg); border-top: 1px solid var(--line); }
  #ride-home { padding-bottom: 96px; }
  dialog.sheet { width: 100%; max-width: none; margin: auto 0 0; border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 10px max(18px, var(--sa-r)) calc(var(--sa-b) + 24px) max(18px, var(--sa-l)); max-height: 85vh; overflow-y: auto; box-shadow: 0 -12px 40px var(--shadow); }
  dialog.sheet::before { content: ""; align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--hair); }
  .start-row .muted { display: none; }
  button.start { width: 100%; justify-content: center; min-height: 56px; border-radius: 14px; }
  button.start kbd { display: none; }

  #toasts { --dir: -1; inset: calc(var(--sa-t) + 8px) max(16px, var(--sa-r)) auto max(16px, var(--sa-l)); width: auto; } /* sous l'encoche / la barre d'état */

  /* Pause : panneau qui monte du bas */
  dialog.pause-dialog { width: 100%; max-width: none; margin: auto 0 0; border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 10px max(18px, var(--sa-r)) calc(var(--sa-b) + 24px) max(18px, var(--sa-l)); gap: 14px; box-shadow: 0 -12px 40px var(--shadow); }
  dialog.pause-dialog::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--hair); }
  .pause-actions kbd { display: none; }
  .pause-actions .primary { min-height: 58px; border-radius: var(--r-l); }
}

/* ---------- Tablette en portrait : appareils réduits à leurs icônes, comme sur téléphone ---------- */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  .devices { display: none; }
  .dev-icons { display: flex; gap: 0; margin: -6px -8px -6px auto; }
  .dev-icons button { width: 40px; height: 40px; padding: 0; justify-content: center; background: transparent; border: 0; border-radius: 10px; }
  .dev-icons svg { width: 22px; height: 22px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .dev-icons .on svg { stroke: var(--ok); }
  .dev-icons .busy svg { stroke: var(--accent); animation: pulse 1s infinite; }
}

/* ---------- Sortie en cours sur tablette et ordinateur : l'écran est rempli, le graphique prend la place restante ---------- */
@media (min-width: 601px) and (min-height: 701px) { /* en dessous, la page défile comme avant : les boutons restent atteignables */
  body.riding main { overflow: hidden; }
  body.riding #tab-ride.active { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
  body.riding #ride-live { flex: 1; min-height: 0; }
  .chart-box { flex: 1; min-height: 160px; display: flex; flex-direction: column; }
  #chart { flex: 1; min-height: 0; height: 0; }
  .controls { flex: none; }
  .lp-val span { font-size: clamp(150px, 17dvh, 210px); }
}

/* ---------- Éditeur de séances tactile (téléphone) ---------- */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .wk-layout { display: none; }
  .wkm { display: block; }
  body.wk-editing .topbar, body.wk-editing .tabs, body.wk-editing #demo-banner, body.plan-asking .topbar, body.plan-asking .tabs, body.plan-asking #demo-banner { display: none; }
  body.wk-editing main, body.plan-asking main { padding-bottom: 0; }
  .wkm-cards { display: flex; flex-direction: column; gap: 10px; }
  .wkm-cards .wkm-card { width: 100%; box-sizing: border-box; }
  .wkm-card { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 12px; align-items: center; text-align: left; padding: 12px 14px; background: var(--panel); border-radius: 14px; }
  .wkm-card strong { display: block; font-size: 16px; }
  .wkm-card small { font-size: 13px; color: var(--muted); }
  .wkm-card > svg:not(.chev) { grid-column: 1 / -1; width: 100%; height: 30px; display: block; }
  .chev { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }

  .wkm-edit { display: flex; flex-direction: column; gap: 12px; }
  .wkm-edit[hidden] { display: none; }
  /* Retour / Dupliquer / Éditer restent en haut pendant le défilement de la séance */
  .wkm-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 4px; margin: -14px -16px 0; padding: calc(14px + env(safe-area-inset-top, 0px)) 8px 4px; background: var(--bg); }
  .wkm-back { min-height: 44px; padding: 0 8px; gap: 2px; background: transparent; border: 0; color: var(--accent-text); }
  .wkm-back svg, .wkm-add svg, #wkm-ride svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .wkm-save { min-height: 36px; padding: 7px 14px; font-size: 14px; margin-right: 8px; }
  /* Consultation (Dupliquer, Éditer, Rouler) ou édition (Annuler, Enregistrer, Supprimer) */
  .wkm-edit:not(.editing) .wk-edit-only, .wkm-edit.editing .wk-view-only { display: none; }
  .wkm-top-btn { min-height: 36px; padding: 7px 12px; font-size: 14px; background: transparent; border: 0; color: var(--text); }
  .wkm-title { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
  .wkm-delete { justify-content: center; min-height: 48px; margin-top: 4px; background: transparent; border: 0; font-weight: 600; }
  .wkm-blocks:not(.editing) .wkm-handle, .wkm-blocks:not(.editing) .wkm-block > svg, .wkm-blocks:not(.editing) .swipe-del { display: none; }
  .wkm-blocks:not(.editing) .wkm-block { cursor: default; padding-left: 12px; }
  .wkm-name { display: flex; align-items: center; gap: 8px; }
  .wkm-name input { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px dashed var(--hair); border-radius: 0; padding: 2px 0; font-size: 24px; font-weight: 800; }
  .wkm-name svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linejoin: round; }
  .wkm-meta { margin: -8px 0 0; font-size: 14px; }
  .wkm-profile { padding: 10px; }
  .wkm-profile svg { width: 100%; height: 90px; display: block; }
  .wkm-blocks-head { display: flex; align-items: baseline; justify-content: space-between; }
  .wkm-blocks-head .eyebrow { margin: 0; }
  .wkm-blocks-head span { font-size: 12px; }
  .wkm-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .wkm-row { display: flex; align-items: stretch; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
  .wkm-blocks li.dragging { z-index: 1; }
  .wkm-blocks li.dragging .wkm-row { opacity: 0.85; border-color: var(--accent); box-shadow: 0 8px 24px var(--shadow); }
  .wkm-handle { width: 36px; flex: none; display: grid; place-items: center; color: var(--faint); font-size: 18px; touch-action: none; cursor: grab; user-select: none; }
  .wkm-block { flex: 1; min-width: 0; display: grid; grid-template-columns: 6px minmax(0, 1fr) 18px; gap: 10px; align-items: center; text-align: left; padding: 10px 12px 10px 0; background: transparent; border: 0; border-radius: 0 12px 12px 0; }
  .wkm-block i { align-self: stretch; border-radius: 3px; }
  .wkm-txt { display: flex; flex-direction: column; }
  .wkm-txt span { font-size: 14px; color: var(--muted); }
  .wkm-block svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
  .wkm-badge { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
  .wkm-add { justify-content: center; min-height: 48px; background: transparent; border: 1px dashed rgba(255, 209, 102, 0.5); border-radius: 12px; color: var(--accent-text); font-weight: 600; }
  .wkm-ride-row { position: sticky; bottom: 0; margin: 4px -16px 0; padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 8px); background: linear-gradient(to top, var(--bg) 70%, transparent); }
  #wkm-ride { width: 100%; justify-content: center; min-height: 56px; border-radius: 14px; font-size: 18px; font-weight: 750; gap: 10px; }
  #wkm-ride svg { fill: currentColor; stroke: none; }

  /* Panneaux : réglage d'un bloc, ajout, actions */
  .blk-sheet .sheet-head h2 { display: flex; flex-direction: column; font-size: 20px; }
  .blk-sheet .sheet-head h2 small { font-size: 13px; font-weight: 400; }
  .bs-field { display: flex; flex-direction: column; gap: 6px; }
  .bs-label { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
  .bs-step { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; align-items: center; }
  .bs-step > button { min-height: 50px; padding: 0; justify-content: center; border-radius: 12px; font-size: 22px; }
  .bs-step input { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 2px dashed rgba(255, 209, 102, 0.6); border-radius: 0; padding: 0 0 2px; text-align: center; font-size: 28px; font-weight: 750; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
  .bs-step input::-webkit-inner-spin-button, .bs-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .bs-val { display: flex; align-items: baseline; justify-content: center; gap: 4px; min-width: 0; }
  .bs-val b { font-size: 15px; color: var(--muted); }
  .bs-val .bs-big { font-size: 26px; color: var(--text); }
  .bs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bs-pair .bs-step { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 4px; }
  .bs-pair .bs-step input { font-size: 24px; }
  .bs-group { display: flex; flex-direction: column; gap: 8px; background: var(--panel-2); border-left: 4px solid var(--c); border-radius: 12px; padding: 10px 12px; }
  .bs-group .bs-step > button { background: var(--panel); }
  .bs-group .bs-step input { font-size: 22px; }
  .bs-actions { display: flex; gap: 8px; }
  .bs-actions .icon-btn { width: 52px; height: 52px; border-radius: 14px; }
  .bs-actions [data-del] { color: var(--danger); }
  .bs-actions .primary { flex: 1; min-height: 52px; justify-content: center; border-radius: 14px; font-size: 17px; font-weight: 750; }
  .sheet .unit-toggle button { min-width: 40px; min-height: 32px; justify-content: center; }
  .add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .add-grid button { flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 12px; min-height: 84px; border-radius: 14px; }
  .add-grid svg { width: 56px; height: 30px; display: block; }
  .sheet-action { width: 100%; justify-content: center; min-height: 50px; border-radius: 12px; font-size: 16px; }
}

/* Téléphone : Pause en grand ; Terminer seulement depuis la pause */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .skip-label, #btn-finish, #keys-hint { display: none; }
  .controls { gap: 10px; }
  #btn-pause { flex: 1; justify-content: center; min-height: 56px; border-radius: 14px; font-size: 18px; }
  #btn-skip { width: 64px; min-height: 56px; justify-content: center; border-radius: 14px; padding: 0; background: var(--panel); }
  #btn-skip svg { width: 22px; height: 22px; }
  /* La sortie occupe exactement la hauteur de l'écran, le graphique prend la place restante */
  body.riding main { overflow: hidden; }
  body.riding #tab-ride.active { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
  body.riding #ride-live { flex: 1; min-height: 0; }
  .chart-box { flex: 1; min-height: 70px; display: flex; flex-direction: column; padding: 0; background: transparent; border: 0; }
  #chart { flex: 1; min-height: 0; height: 0; }
  .controls { flex: none; }
}

/* Téléphone en portrait : tout en colonne */
@media (max-width: 600px) and (orientation: portrait) {
  #ride-live { gap: 16px; }
  .live-clock { margin-bottom: -4px; font-size: 14px; }
  .live-top { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .live-side { display: contents; }
  .live-main { gap: 12px; }
  .live-power { gap: 10px; }
  .lp-label { font-size: 15px; }
  .lp-val { gap: 8px; }
  .lp-val span { font-size: clamp(72px, 12dvh, 104px); letter-spacing: -4px; }
  .lp-val small { font-size: 28px; }
  .lp-target { font-size: 15px; padding: 4px 13px; }
  .badge { width: 28px; height: 28px; }
  .badge svg { width: 14px; height: 14px; }
  .bias { gap: 8px; }
  .bias button { width: 44px; height: 44px; }
  .bias button svg { width: 18px; height: 18px; }
  .bias strong { font-size: 15px; }
  .live-tiles { gap: 10px; }
  .live-tiles .tile { border-radius: 14px; padding: 16px 10px 10px; }
  .live-tiles .badge { top: -10px; }
  .live-tiles b { font-size: 26px; }
  .live-tiles .tile > span:last-child { font-size: 13px; }
  .step-now { padding: 14px 16px; }
  .sn-head b { font-size: 17px; }
  .sn-line { font-size: 15px; }
}

/* Petits téléphones (moins de 720 px de haut) : espacements resserrés */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 720px) {
  #ride-live, .live-top { gap: 10px; }
  .live-power { gap: 6px; }
  .step-now { padding: 10px 14px; gap: 8px; }
  #btn-pause, #btn-skip { min-height: 52px; }
}

/* Téléphone en paysage (posé sur le guidon) : puissance à gauche, tuiles et palier à droite, graphique dessous */
@media (orientation: landscape) and (max-height: 500px) {
  body.riding #tab-ride { padding: calc(var(--sa-t) + 6px) max(24px, var(--sa-r)) calc(var(--sa-b) + 10px) max(24px, var(--sa-l)); }
  #ride-live { gap: 8px; }
  .live-clock { margin-bottom: -6px; font-size: 13px; }
  .live-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .live-power { gap: 6px; }
  .lp-label { font-size: 13px; }
  .lp-val span { font-size: 72px; letter-spacing: -3px; }
  .lp-val small { font-size: 22px; }
  .lp-target { font-size: 13px; padding: 3px 10px; }
  .badge { width: 26px; height: 26px; }
  .badge svg { width: 13px; height: 13px; }
  .bias { gap: 6px; }
  .bias button { width: 40px; height: 40px; }
  .live-side { gap: 8px; padding-top: 10px; }
  .live-tiles { gap: 8px; }
  .live-tiles .tile { padding: 12px 8px 6px; border-radius: 12px; }
  .live-tiles .badge { top: -10px; }
  .live-tiles b { font-size: 24px; }
  .live-tiles .tile > span:last-child { font-size: 12px; }
  .step-now { padding: 8px 12px; gap: 6px; }
  .sn-head b { font-size: 15px; }
  .sn-line { font-size: 13px; }
  .free-seg button { min-height: 34px; }
  #btn-pause, #btn-skip { min-height: 46px; }
}

/* ---------- Boutons et apparitions ---------- */
* { -webkit-tap-highlight-color: transparent; }
button:focus, button:focus-visible, .btn:focus-visible { outline: none; }
/* Aucun cadre de focus (le bleu du navigateur sur une fenêtre ou un panneau après un toucher) : seuls les champs gardent leur cercle jaune, plus spécifique (voir plus haut) */
*:focus, *:focus-visible, dialog:focus, dialog:focus-visible { outline: none; }

/* Fenêtres, panneaux et pages : elles apparaissent en fondu (les panneaux du bas montent, sans transformer les pages :
   une transformation sur un parent déplacerait les barres fixes pendant l'animation) */
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes view-fwd { from { opacity: 0; transform: translateX(28px); } }
@keyframes view-back { from { opacity: 0; transform: translateX(-28px); } }
@keyframes sheet-up { from { opacity: 0; transform: translateY(28px); } }
dialog[open] { animation: pop-in 0.16s ease-out; }
dialog[open]::backdrop { animation: fade-in 0.16s ease-out; }
.tab.active, .wkm-edit:not([hidden]), #wkm-list-view, .login-view:not([hidden]) { animation: fade-in 0.15s ease-out; }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  dialog.sheet[open], dialog.pause-dialog[open] { animation: sheet-up 0.2s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-view.view-fwd, .sheet-view.view-back, dialog[open], dialog[open]::backdrop, .tab.active, .wkm-edit:not([hidden]), #wkm-list-view, .login-view:not([hidden]) { animation: none !important; }
}

/* ---------- Bibliothèque de séances ---------- */
.wkm-lib { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; min-height: 56px; margin-bottom: 14px; background: var(--panel); border-radius: var(--r-l); }
.wkm-lib-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-m); background: var(--accent); color: var(--accent-ink); }
.wkm-lib-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wkm-lib-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wkm-lib-txt strong { font-size: 17px; }
.wkm-lib-txt small { font-size: 13px; color: var(--muted); }
.wkm-fav-head { margin: 0 0 8px; }


dialog.lib-dialog { width: min(520px, 94vw); height: min(86vh, 860px); box-sizing: border-box; padding: 18px 20px 0; overflow: hidden; }
dialog.lib-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
.lib-dialog > * { flex: none; }
.lib-dialog > .lib-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -20px; padding: 2px 20px 24px; }
.lib-detail { display: flex; flex-direction: column; gap: 12px; }
.lib-top { display: flex; align-items: center; margin: 0 -8px; }
.lib-back { display: flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px; background: transparent; border: 0; color: var(--accent-text); font-weight: 600; }
.lib-top .lib-heart { margin-left: auto; margin-right: 0; }
.lib-top .lib-edit { margin-left: auto; min-height: 36px; padding: 7px 14px; font-size: 14px; }
.lib-top .lib-edit + .lib-heart { margin-left: 4px; }
.lib-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lib-title { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.lib-meta { margin: -8px 0 0; font-size: 14px; }
.lib-goals { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 2px; scrollbar-width: none; }
.lib-goals::-webkit-scrollbar { display: none; }
.lib-goals button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-s); background: var(--panel); color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.lib-goals button i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lib-goals button[aria-pressed="true"] { background: var(--panel-3); color: var(--text); }
.lib-lengths { display: flex; padding: 3px; border-radius: var(--r-m); background: var(--panel); }
.lib-lengths button { flex: 1; min-height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; padding: 0 6px; justify-content: center; }
.lib-lengths button[aria-pressed="true"] { background: var(--panel-3); color: var(--text); }
.lib-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lib-row { display: flex; align-items: center; background: var(--panel); border-radius: var(--r-l); }
.lib-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 4px 12px 14px; background: transparent; border: 0; }
.lib-item > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lib-item strong { font-size: 16px; }
.lib-item small { font-size: 13px; color: var(--muted); }
.lib-item svg { flex: none; width: 84px; height: 30px; display: block; }
.lib-heart { flex: none; width: 48px; height: 48px; padding: 0; justify-content: center; background: transparent; border: 0; color: var(--muted); }
.lib-heart svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.lib-heart[aria-pressed="true"] { color: var(--accent); }
.lib-heart[aria-pressed="true"] svg { fill: currentColor; }
.lib-profile { padding: 10px; }
.lib-profile svg { width: 100%; height: 90px; display: block; }
.lib-dialog .eyebrow { margin: 4px 0 0; }
.lib-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lib-block { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 10px; padding: 10px 12px; background: var(--panel); border-radius: var(--r-m); }
.lib-block i { align-self: stretch; border-radius: 3px; }
.lib-block > span { display: flex; flex-direction: column; }
.lib-block > span span { font-size: 14px; color: var(--muted); }
.lib-badge { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.lib-ride-row { margin: 0 -20px; padding: 12px 20px 20px; background: var(--panel); }
.lib-ride-row .primary { width: 100%; justify-content: center; min-height: 56px; border-radius: var(--r-l); font-size: 18px; font-weight: 750; gap: 10px; }
.lib-ride-row svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  dialog.lib-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; background: var(--bg);
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 0; }
  .lib-goals { margin: 0 -16px; padding: 0 16px 2px; }
  .lib-dialog > .lib-scroll { margin: 0 -16px; padding: 2px 16px calc(env(safe-area-inset-bottom, 0px) + 24px); }
  .lib-ride-row { margin: 0 -16px; padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px); background: var(--bg); }
}

/* ---------- Pas de contours ----------
   Choix de design : aucun contour visible. Les largeurs de bordure restent (la mise en page ne bouge pas) ;
   seules les couleurs deviennent transparentes. Les repères de couleur (zone d'un palier, soulignement
   d'un champ) sont conservés. Un état (sélection, actif) se marque par le fond ou l'opacité, jamais par un contour. */
*, *::before, *::after { border-color: transparent !important; }
.badge { border-color: var(--bg) !important; } /* l'anneau qui détache la pastille de sa tuile */
.st { border-left-color: var(--zone, var(--zone-off)) !important; }
.st.done { border-left-color: var(--hair) !important; }
.zone { border-top-color: var(--z) !important; }
.bs-group { border-left-color: var(--c) !important; }
.ob-ftp input { border-bottom-color: var(--accent) !important; }
.wkm-name input { border-bottom-color: var(--hair) !important; }
.bs-step input { border-bottom-color: rgba(255, 209, 102, 0.6) !important; }

/* ---------- Plan d'entraînement ---------- */
.plan { display: flex; flex-direction: column; gap: 10px; max-width: 520px; margin: 0 auto; }
.plan-intro { margin: -6px 0 4px; font-size: 14px; }
.plan-h1 { margin: 0; font-size: 20px; font-weight: 750; line-height: 1.25; }
.plan-head { align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.plan-head small { font-size: 13px; }
.plan-top { margin-bottom: 4px; }
.plan-meta { margin: -6px 0 0; font-size: 14px; }
.plan-sum { margin: 0; font-size: 15px; }
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-card { width: 100%; display: grid; grid-template-columns: 5px minmax(0, 1fr) 18px; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; background: var(--panel); border: 0; border-radius: var(--r-m); }
.plan-card i { align-self: stretch; min-height: 38px; border-radius: 3px; background: var(--c); }
.plan-card strong { display: block; font-size: 16px; }
.plan-card small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-card .chev, .plan-link .chev { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.plan-actions { display: flex; justify-content: space-between; margin-top: 6px; }
.plan-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; background: var(--panel); border: 0; border-radius: var(--r-m); font-size: 14px; text-align: left; }
.plan-links { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
.plan-cal-btn { display: grid; place-items: center; min-height: 52px; padding: 0; background: var(--panel); border: 0; border-radius: var(--r-m); }
.plan-cal-btn svg { width: 24px; height: 24px; fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-links .plan-link { min-height: 52px; }
.plan-link small { font-size: 13px; color: var(--muted); }
.plan-quit { width: 100%; min-height: 48px; margin-top: 12px; justify-content: center; text-align: center; border: 0; border-radius: var(--r-m); background: var(--panel); color: var(--danger); font-size: 15px; font-weight: 600; }
.plan-weeks { display: flex; flex-direction: column; gap: 8px; }
.plan-week { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: var(--sunk); border: 0; border-radius: var(--r-m); text-align: left; }
.plan-wk { font-size: 13px; font-weight: 700; color: var(--muted); }
.plan-wk-mid { display: flex; align-items: center; }
.plan-right { display: flex; align-items: center; gap: 10px; line-height: 1.2; }
.plan-right small { font-size: 13px; line-height: 1.2; color: var(--muted); } /* même taille et même interligne que les chiffres : centrés sur la même ligne */
.plan-nums { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.plan-nums b { color: var(--text); font-weight: 700; }
.plan-nums b.over { color: var(--danger); }
.plan-gauge { display: block; height: 8px; border-radius: 4px; background: var(--ctrl); overflow: hidden; }
.plan-gauge b { display: block; height: 100%; border-radius: 4px; background: var(--info); }
.plan-week.current { display: block; background: var(--panel); border: 1px solid rgba(255, 209, 102, 0.4) !important; padding: 12px 14px 6px; cursor: default; }
.plan-week.current .plan-gauge b { background: var(--accent); }
.plan-week-head { display: flex; align-items: baseline; justify-content: space-between; width: 100%; margin-bottom: 8px; padding: 0; background: transparent; border: 0; color: inherit; text-align: left; }
.plan-week-head strong { font-size: 15px; color: var(--accent-text); margin-right: 8px; }
.plan-week-head small { font-size: 13px; color: var(--muted); }
.plan-sessions { display: flex; flex-direction: column; margin-top: 4px; }
.plan-sess { display: grid; grid-template-columns: 34px minmax(0, 1fr) 64px auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; }
.plan-sess:first-child { border-top: 0; }
.plan-sess-txt { min-width: 0; }
.plan-sess strong, .plan-sess-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* la miniature garde sa place : c'est le nom qui est tronqué */
.plan-sess-txt small { display: block; }
.plan-thumb { width: 64px; height: 28px; }
.plan-thumb svg { display: block; width: 100%; height: 100%; }
.plan-end { min-width: 18px; display: flex; justify-content: center; }
.plan-weekbox { background: var(--sunk); border-radius: var(--r-m); }
.plan-weekrow { display: flex; align-items: stretch; }
.plan-weekrow .plan-week { flex: 1; min-width: 0; background: transparent; padding-right: 2px; }
.plan-exp { flex: none; width: 46px; display: grid; place-items: center; padding: 0; background: transparent; border: 0; color: var(--muted); }
.plan-exp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.plan-exp[aria-expanded="true"] svg { transform: rotate(180deg); }
.plan-weekbox .plan-sessions { margin: 0; padding: 0 14px 6px; }
.plan-sess strong { display: block; font-size: 14px; font-weight: 600; }
.plan-sess small { font-size: 12px; color: var(--muted); }
.plan-sess .plan-day { font-weight: 700; }
.plan-sess.today .plan-day, .plan-sess.today strong { color: var(--accent-text); }
.plan-sess.missed strong { color: var(--muted); }
.plan-go { min-height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; }
.plan-ico { width: 18px; height: 18px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.plan-ico.ok { stroke: var(--ok); }
.plan-ico.skip { stroke: var(--muted); stroke-width: 2.4; }
.plan-chart { display: flex; flex-direction: column; gap: 8px; }
.plan-chart .eyebrow { margin: 0; }
.plan-bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.plan-bars > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.plan-bars i { display: block; width: 100%; border-radius: 3px; background: var(--info); }
.plan-bars i.light { background: var(--bar-light); }
.plan-bars small { font-size: 11px; color: var(--muted); }
.plan-legend { display: flex; gap: 14px; margin: 0; font-size: 12px; }
.plan-legend span { display: flex; align-items: center; gap: 5px; }
.plan-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--info); }
.plan-legend i.light { background: var(--bar-light); }
.plan-rows { display: flex; flex-direction: column; gap: 6px; }
.plan-line { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 14px; background: var(--panel); border-radius: var(--r-m); }
.plan-line strong { font-size: 15px; }
.plan-line small { font-size: 13px; color: var(--muted); }
.plan-day { font-size: 12px; color: var(--muted); }
.plan-start { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.plan-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.plan-days button { min-height: 44px; padding: 0; justify-content: center; border: 0; border-radius: var(--r-m); background: var(--panel); color: var(--muted); font-size: 15px; font-weight: 700; }
.plan-days button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.plan-days-hint { margin: 0; font-size: 13px; }
.plan-days-hint.warn { color: var(--danger); }
.plan-cal { background: var(--panel); border-radius: var(--r-m); padding: 10px 10px 12px; }
.plan-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 8px; }
.plan-cal-head strong { font-size: 15px; }
.plan-cal-head button { width: 40px; height: 40px; padding: 0; justify-content: center; background: transparent; border: 0; color: var(--text); }
.plan-cal-head button:disabled { opacity: 0.25; }
.plan-cal-head svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plan-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.plan-cal-names { font-size: 12px; color: var(--muted); padding-bottom: 4px; }
.plan-cal-grid button { position: relative; height: 42px; padding: 0; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: 15px; }
.plan-cal-grid button.past { color: var(--past); }
.plan-cal-grid button.today { font-weight: 800; color: var(--accent-text); }
.plan-cal-grid button.sel { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.plan-cal-grid button.has::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent); }
.plan-cal-grid button.sel.has::after { background: var(--accent-ink); }
.plan-start .primary { min-height: 52px; border-radius: var(--r-l); font-size: 17px; font-weight: 750; justify-content: center; }
.plan-all { margin-top: 8px; }
.plan-all-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 6px; }
.plan-all-head .eyebrow { display: inline; margin: 0 8px 0 0; }
.plan-all-head small { font-size: 12px; color: var(--muted); }
.plan-all .plan-sessions { background: var(--panel); border-radius: var(--r-m); padding: 0 14px; margin: 0; }
.plan-context { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.plan-context svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.next-title-row { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; }
.next-title-row strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* nom trop long : coupé, la pastille reste */
.next-title-row .plan-pill { flex: none; white-space: nowrap; }
.plan-pill { display: flex; align-items: center; flex-shrink: 0; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--accent-ink); background: var(--accent); }
.drop-ready { outline-offset: -8px; }

/* Questionnaire du plan : plein écran sur téléphone */
.plan-hero { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 18px; }
.plan-hero > svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan-hero strong { display: block; font-size: 20px; line-height: 1.25; }
.plan-hero p { margin: 4px 0 0; font-size: 14px; }
.plan-hero .primary { min-height: 52px; border-radius: var(--r-l); font-size: 17px; font-weight: 750; justify-content: center; }
/* Téléphone : le questionnaire est un écran plein, comme le premier lancement : en-tête et boutons fixes, seul le contenu défile */
.plan-ask { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; box-sizing: border-box; background: var(--bg); padding: 0 max(16px, var(--sa-r)) 0 max(16px, var(--sa-l)); }
.plan-ask-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -16px; padding: 0 16px 16px; }
/* Même en-tête que le premier lancement : retour en blanc, pastilles centrées, sous la zone de l'heure et de l'encoche */
/* En-tête : retour et pastilles, sous la zone de l'heure et de l'encoche */
.plan-ask-top { flex: none; display: flex; align-items: center; min-height: 44px; margin: 0 0 8px; padding: calc(var(--sa-t) + 16px) 0 0; }
.plan-ask-back { width: 44px; height: 44px; padding: 0; justify-content: center; margin-left: -10px; background: transparent; border: 0; }
.plan-ask-back svg { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-dots { flex: 1; display: flex; justify-content: center; gap: 6px; margin-right: 34px; }
.plan-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--ctrl); transition: width 0.2s; }
.plan-dots i.on { width: 24px; background: var(--accent); }
.plan-ask-h1 { margin: 10px 0 6px; font-size: 28px; font-weight: 800; line-height: 1.2; }
.plan-ask-sub { margin: 0 0 4px; font-size: 14px; }
.plan-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.plan-ask .eyebrow { margin: 18px 0 8px; }
.plan-goals { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.plan-goal { display: grid; grid-template-columns: 5px minmax(0, 1fr) 22px; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--r-m); background: var(--panel); text-align: left; }
.plan-goal i { align-self: stretch; min-height: 38px; border-radius: 3px; background: var(--c); }
.plan-goal strong { display: block; font-size: 16px; }
.plan-goal small { font-size: 13px; color: var(--muted); }
.plan-goal svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.plan-goal[aria-pressed="true"] { background: rgba(255, 209, 102, 0.14); }
.plan-goal[aria-pressed="true"] svg { visibility: visible; }
.plan-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.plan-chips button { min-height: 48px; border: 0; border-radius: var(--r-m); background: var(--panel); color: var(--muted); font-size: 16px; font-weight: 700; justify-content: center; }
.plan-chips button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.plan-chips button:disabled { opacity: 0.3; }
.plan-ask-foot { flex: none; display: flex; flex-direction: column; gap: 4px; margin: 0 -16px; padding: 12px 16px calc(var(--sa-b) + 16px); background: var(--bg); }
.plan-ask-foot .primary { width: 100%; min-height: 52px; border-radius: var(--r-l); font-size: 17px; font-weight: 750; justify-content: center; }
.plan-ask-foot .primary:disabled { opacity: 0.4; }
.plan-ask-foot .link-btn { align-self: center; min-height: 44px; font-size: 15px; }
.plan-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.plan-why li { display: flex; gap: 10px; align-items: baseline; }
.plan-why svg { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.plan-ask .plan-cal { margin-top: 14px; }
.plan-ask .plan-days-hint { margin: 8px 2px 0; }
.plan-ask .plan-chart { margin-top: 18px; }
.plan-ask .plan-why { margin-top: 0; }
@media (min-width: 601px) { .plan-ask { position: static; display: block; padding: 0; background: none; } .plan-ask-body { overflow: visible; margin: 0; padding: 0; } .plan-ask-top { margin: 0 0 8px; padding: 0; } .plan-ask-foot { margin: 16px 0 0; padding: 0; background: none; } }
.plan-wcards { display: flex; flex-direction: column; gap: 10px; }
.plan-wcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 14px; background: var(--panel); border-radius: var(--r-l); cursor: pointer; }
.plan-wcard strong { display: block; font-size: 16px; }
.plan-wcard small { font-size: 13px; color: var(--muted); }
.plan-wcard.missed strong { color: var(--muted); }
.plan-wcard.today strong { color: var(--accent-text); }
.plan-wcard > svg:not(.plan-ico) { grid-column: 1 / -1; width: 100%; height: 30px; display: block; }
.plan-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 12px 14px; background: var(--panel); border-radius: var(--r-m); }
.plan-switch strong { display: block; font-size: 15px; }
.plan-switch small { font-size: 13px; color: var(--muted); }
.plan-switch button, .set-switch { position: relative; flex: none; width: 52px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: var(--ctrl); transition: background 0.15s; }
.plan-switch button i, .set-switch i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--text); transition: transform 0.15s; }
.plan-switch button[aria-checked="true"], .set-switch[aria-checked="true"] { background: var(--accent); }
.plan-switch button[aria-checked="true"] i, .set-switch[aria-checked="true"] i { transform: translateX(20px); background: var(--accent-ink); }
.plan-sess:focus, .plan-sess:focus-visible, .plan-wcard:focus, .plan-wcard:focus-visible { outline: none; } /* pas de cadre bleu après avoir touché une séance (le focus revient sur elle à la fermeture du détail) */
.wkm-empty, .wk-empty, .pick-empty { margin: 8px 2px; font-size: 14px; line-height: 1.45; }
.wk-empty { align-self: start; padding: 16px; background: var(--panel); border-radius: var(--r-m); }
.pick-lib { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin-top: 8px; padding: 10px 14px; background: var(--panel-2); border: 0; border-radius: var(--r-m); text-align: left; font-size: 15px; font-weight: 600; }
.pick-lib svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pick-lib .chev { width: 18px; height: 18px; stroke: var(--muted); }
#btn-start:disabled { opacity: 0.4; }

/* ---------- Thème clair ---------- */
/* Posé sur <html> par le script de index.html (réglage « Thème », par défaut celui de l'appareil). Les formes ne changent pas, seulement les teintes. */
:root[data-theme="light"] {
  --bg: #f4f2ed; --panel: #ffffff; --panel-2: #edeae3; --panel-3: #e0dcd2;
  --line: rgba(11, 31, 58, 0.1); --text: #0b1f3a; --muted: #5b6778;
  --accent: #f2b705; --accent-ink: #1b1500; --accent-text: #0b1f3a;
  --danger: #d93b3b; --ok: #1f9d63; --info: #2f78c4;
  --ctrl: #e0dcd2; --faint: #9aa4b2; --hair: rgba(11, 31, 58, 0.22); --tint: rgba(11, 31, 58, 0.08); --hover: rgba(11, 31, 58, 0.04);
  --dim: #33425c; --shadow: rgba(11, 31, 58, 0.22);
  --scrim: rgba(11, 31, 58, 0.45);
  --bar: #c9ccd2; --bar-off: #e3e1da; --bar-light: #b8c9e4; --sunk: #edeae3; --past: #b3b9c4;
  color-scheme: light;
}
:root[data-theme="light"] dialog::backdrop { background: rgba(11, 31, 58, 0.45); }
:root[data-theme="light"] .pause-dialog::backdrop { background: rgba(11, 31, 58, 0.55); }
:root[data-theme="light"] img[src="/mark.svg"] { content: url(/mark-clair.svg); }
:root[data-theme="light"] .login-btn.apple { background: #000; color: #fff; border-color: #000; }
:root[data-theme="light"] .login-btn.apple svg { fill: #fff; }
:root[data-theme="light"] .tag { border-color: rgba(154, 107, 0, 0.45) !important; }

/* Réglage du thème (dernière carte des réglages) */
/* Trois icônes dans la ligne, comme le sélecteur de langue : sombre, clair, comme l'appareil */
.theme-seg { flex: none; align-self: center; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-m); background: var(--panel-2); }
.theme-seg button { width: 38px; height: 34px; padding: 0; justify-content: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted); }
.theme-seg button[aria-pressed="true"] { background: var(--panel-3); color: var(--accent); }
.set-card .free-seg { gap: 2px; background: var(--panel-2); } /* comme le thème : fond contrasté dans la carte, choix actif en jaune */
.set-card .free-seg button[aria-pressed="true"] { color: var(--accent); }
.theme-seg svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-seg button { justify-content: center; min-height: 40px; }

/* Mode daltonien : état connecté / erreur en bleu / orange au lieu de vert / rouge (les zones changent côté JS, voir palette.js) */
:root[data-cb="1"] { --ok: #56b4e9; --danger: #ff8a4c; --info: #56b4e9; }
:root[data-cb="1"][data-theme="light"] { --ok: #0072b2; --danger: #d55e00; --info: #0072b2; }
:root[data-cb="1"] .pill[data-state="connected"] { border-color: rgba(86, 180, 233, 0.4); background: rgba(86, 180, 233, 0.08); }

/* Retour par glissement depuis l'éditeur : l'en-tête et les onglets reviennent sous la page qui se décale (z-index sous elle) */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  body.swiping-back .topbar { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 1; }
  body.swiping-back .tabs { display: grid; z-index: 1; }
}

/* Geste « retour » : couche sous la page qui se décale, avec l'écran précédent dedans */
.swipe-peek { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.swipe-peek > dialog.peek-dialog { position: absolute; left: 0; right: 0; bottom: 0; top: auto; margin: 0; animation: none; }
dialog.swiping::backdrop { background: transparent !important; backdrop-filter: none !important; }

/* Calendrier du plan (fenêtre) : un carré par jour, la miniature de la séance dedans */
.cal-nav { display: flex; align-items: center; justify-content: space-between; }
.cal-nav strong { font-size: 17px; }
.cal-step { width: 44px; height: 36px; display: grid; place-items: center; padding: 0; background: transparent; border: 0; color: var(--muted); }
.cal-step:disabled { opacity: 0.3; }
.cal-step svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cal-grid { display: grid; grid-template-columns: minmax(30px, 1fr) repeat(7, var(--cal-cell, minmax(0, 1fr))); gap: 4px; align-items: center; }
.cal-names { margin-bottom: 4px; text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.cal-weeks { display: flex; flex-direction: column; gap: 4px; }
.cal-wk { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; font-size: 11px; font-weight: 700; color: var(--muted); }
.cal-wk small { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-wk.now b { color: var(--accent-text); }
.cal-day { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; background: var(--panel-2); color: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
.cal-day b { position: absolute; top: 6px; left: 6px; font-size: 11px; line-height: 1; font-weight: 600; color: var(--muted); }
.cal-day.now { background: var(--panel-3); }
.cal-day.now b { color: var(--accent-text); font-weight: 700; }
.cal-day.out { opacity: 0.45; }
.cal-thumb { position: absolute; left: 4px; right: 4px; bottom: 5px; height: 22px; }
.cal-thumb svg { display: block; width: 100%; height: 100%; }
.cal-day.done .cal-thumb { opacity: 0.5; }
.cal-day.missed .cal-thumb { opacity: 0.3; }
.cal-check { position: absolute; top: 5px; right: 5px; width: 11px; height: 11px; fill: none; stroke: var(--ok); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
/* Changement de mois : le nouveau mois arrive en glissant du côté du geste */
@keyframes cal-next { from { opacity: 0; transform: translateX(32px); } }
@keyframes cal-prev { from { opacity: 0; transform: translateX(-32px); } }
.cal-body.slide.next { animation: cal-next 0.2s ease-out; }
.cal-body.slide.prev { animation: cal-prev 0.2s ease-out; }
.cal-body { touch-action: pan-y; will-change: transform; } /* toujours sur sa propre couche : la miniature ne se re-dessine pas 1 px plus haut à la fin du glissement */
/* Au retour du détail d'une séance, le focus revient sur le jour touché : pas de contour */
#plan-cal, #plan-cal :focus, #plan-cal :focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .cal-body.slide { animation: none !important; } }

/* ---------- Contrôles segmentés : curseur qui glisse (segmented.js) ----------
   Posé par le script sur .seg, .unit-toggle, .free-seg, .theme-seg, .lib-lengths ; le fond du choix actif passe du bouton au curseur. */
[data-seg] { --seg-r: var(--r-m); --seg-thumb: var(--panel-3); position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
[data-seg] > button { position: relative; z-index: 1; background: transparent !important; }
.seg-thumb { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 0; border-radius: var(--seg-r); background: var(--seg-thumb); opacity: 0; pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.3, 0.9, 0.3, 1), width 0.3s cubic-bezier(0.3, 0.9, 0.3, 1), height 0.3s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.15s; }
.seg-thumb.show { opacity: 1; }
.seg-thumb.no-anim { transition: none; }
.seg { --seg-r: 7px; --seg-thumb: var(--panel-2); }
.unit-toggle { --seg-r: 6px; --seg-thumb: var(--panel-2); }
.wk-stats-row .unit-toggle { --seg-thumb: var(--panel-3); }
.free-seg, .lib-lengths, .theme-seg { --seg-r: 9px; --seg-thumb: var(--panel-3); }
@media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none; } }

/* ---------- Assistant IA (maquette docs/maquettes/assistant-mcp.html) ---------- */
#assistant-sheet .muted { margin: 0; }
#assistant-sheet [hidden] { display: none; }
.assistant-addr { display: flex; align-items: center; gap: 8px; margin: 6px 0 14px; padding: 8px 8px 8px 12px; border-radius: var(--r-m); background: var(--panel); }
.assistant-addr code { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.assistant-copy { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: var(--panel-3); color: var(--text); font-weight: 700; }
.assistant-steps { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; }
#assistant-locked { display: flex; flex-direction: column; gap: 10px; }
#assistant-access { margin-top: 6px; }
/* Tuile IA (onglet Plan) et bandeau du brouillon */
.plan-draft { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.plan-draft .row { display: flex; align-items: center; gap: 12px; }
.plan-draft .ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.plan-draft .ico svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-draft blockquote { margin: 0; font-size: 14px; line-height: 1.4; }
.plan-draft .primary { width: 100%; justify-content: center; }
.draft-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.draft-actions button { min-height: 44px; border: 0; border-radius: var(--r-m); background: var(--panel-2); color: var(--text); font-weight: 700; }
.draft-actions .danger { color: var(--danger); }
.plan-draft-ses { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-top: 6px; border-radius: var(--r-s); background: var(--panel); }
.plan-draft-ses small { flex: none; }
.plan-draft-more { text-align: center; }
.plan-draft-warn { margin: 12px 0; padding: 10px 12px; border-radius: var(--r-m); background: color-mix(in srgb, var(--accent) 16%, transparent); font-size: 14px; }
.plan-draft-accept { width: 100%; justify-content: center; margin: 12px 0 8px; }