/* ============================================================
DESIGN 3.0 — refonte visuelle et ergonomique
Chargé en dernier. Trois rôles :
1. corriger les composants historiques (styles.css / ui.css) pour
qu'ils suivent les tokens : rayons, graisses, titres, couleurs ;
2. définir les primitives partagées (boutons, chips, segmented,
états vides, toast) ;
3. styler les nouveaux écrans : Aujourd'hui, semaine datée,
journal de séance, suivi de charge, guide, activités.
Les tokens vivent dans styles.css (:root) et ui.css (thème clair).
============================================================ */
/* ------------------------------------------------------------
1. Base & typographie
------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font);
font-size: var(--fs-md);
color: var(--text);
background: var(--bg);
font-feature-settings: "tnum" 1, "ss01" 1;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
strong { font-weight: 600; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--accent-soft); }
/* LARGEUR DE PAGE — un seul réglage, deux consommateurs.
`.container` (le contenu) et `.topbar-inner` (l'en-tête collant) doivent
s'aligner au pixel près : une barre plus étroite que le contenu, et le
nom de l'athlète ne tombe plus au-dessus du titre de la page. Les deux
portaient jusqu'ici leur propre nombre, dans deux fichiers différents
(860 dans ui.css/styles.css, 880 ici) — c'est exactement le genre de
valeur qui dérive. Elle est maintenant unique.
POURQUOI ELLE GRANDIT PAR PALIERS, et pas d'un coup :
· en dessous de 1024 px, rien ne change — la colonne étroite est la
bonne réponse sur mobile et sur tablette ;
· au-dessus, la place existe et la laisser vide est du gâchis : sur un
écran de 1900 px, on affichait 880 px de contenu et 780 px de fond.
Le plafond de 1680 px n'est pas une coquetterie : au-delà, ce n'est plus
de la place, c'est une ligne de texte qu'on ne suit plus du regard. Sur
un écran de 1900 px (colonne de nav déduite) il n'est jamais atteint —
la page occupe donc TOUTE la largeur disponible. Il ne sert qu'aux
très grands écrans.
La largeur seule ne suffit pas : élargir une colonne unique donne des
cartes de 1600 px avec trois mots dedans. Ce que la place gagnée sert à
faire est plus bas, section « Densité en grand écran ». */
:root { --page-w: 880px; --page-pad: 16px; }
@media (min-width: 1024px) { :root { --page-w: 1180px; --page-pad: 24px; } }
@media (min-width: 1360px) { :root { --page-w: min(100%, 1680px); --page-pad: 32px; } }
.container { max-width: var(--page-w); padding-left: var(--page-pad); padding-right: var(--page-pad); }
.tab-content { margin-top: 20px; }
.page-head { margin: 4px 0 18px; }
.page-title { font-size: var(--fs-xl); font-weight: 600; margin: 0 0 4px; }
.page-sub { margin: 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; max-width: 62ch; }
.section-title { font-size: var(--fs-lg); font-weight: 600; margin: 0; }
.section-sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
/* Cartes : une seule surface, bordure fine, rayon modéré */
.card,
.timeline-card, .cal-wrapper, .zone-card, .distrib-card, .phase-btn, .phase-detail-card,
.progress-bar-card, .principle-card, .badge-card, .prog-sport-card, .ev-card, .landing-card,
.landing-feat, .swim-tips-card, .danger-tips-card, .prog-hero, .club-hero {
border-radius: var(--r-lg);
box-shadow: none;
}
.card { padding: 20px; margin-top: 16px; background: var(--surface); border: 1px solid var(--border); }
.card + .card { margin-top: 16px; }
/* RELIEF DOUX (07/10/2026) — pour les cartes de PREMIER NIVEAU, celles
qui découpent une page en blocs. La bordure reste : une zone ne doit
jamais être délimitée par la seule ombre (en sombre, on ne la voit
presque pas). Restent à plat, parce que le relief répété fatigue :
· une carte posée dans une carte ;
· les pages d'événement et l'administration (listes, tableaux,
kanban) — leurs conteneurs ont leurs propres classes, à plat. */
.card, .timeline-card, .cal-wrapper, .prog-hero { box-shadow: var(--elev-raised); }
.card .card, #tab-events .card, #tab-admin .card { box-shadow: none; }
.card-title {
margin: 0 0 12px;
font-size: var(--fs-lg);
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
text-transform: none;
display: flex;
align-items: center;
gap: 8px;
}
.card-title-spaced { margin-top: 22px; }
.card-title [data-icon] { color: var(--text-3); font-size: 16px; display: inline-flex; }
/* Formulaires */
.form-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); text-transform: none; letter-spacing: 0; }
.form-input, .form-select, .schedule-select, .sdp-note-input, .sdp-perf-input, .coach-comment-input {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-md);
color: var(--text);
font-size: var(--fs-md);
}
.form-input:focus, .form-select:focus, .schedule-select:focus, .sdp-note-input:focus, .sdp-perf-input:focus, .coach-comment-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-hint { font-size: var(--fs-xs); color: var(--text-3); margin: 4px 0 0; line-height: 1.45; }
.form-hint-lead { margin: -4px 0 14px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .form-row-2 { grid-template-columns: 1fr; } }
.form-select { appearance: none; -webkit-appearance: none; padding-right: 34px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; }
/* Boutons */
.btn, .btn-ghost, .ev-btn, .strava-btn, .sdp-validate-btn, .btn-profile-save, .btn-profile-reset,
.ev-create-btn, .member-add-btn, .coach-comment-send, .sdp-note-send, .landing-skip, .club-invite-chip {
font-family: inherit;
font-weight: 600;
border-radius: var(--r-md);
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
/* BOUTONS (relief doux, 07/10/2026)
· secondaire (.btn) : posé sur la carte, il s'ENFONCE au clic ;
· principal (.btn-primary) : le seul aplat de couleur — l'action de
l'écran (Voir la séance, Voir l'analyse, Enregistrer). Il était à
l'encre : noir en clair, blanc en sombre, donc sans hiérarchie
face aux titres ;
· petit principal (.btn-sm.btn-primary) : il valide un bandeau ou
une barre d'outils, pas l'écran — il reste à l'encre, pour qu'un
écran ne montre jamais deux boutons colorés ;
· fantôme, danger : à plat, ils ne doivent pas attirer l'œil. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 16px; font-size: var(--fs-sm); line-height: 1.2;
border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
min-height: 40px; box-shadow: var(--elev-raised-sm);
}
.btn:hover { background: var(--raised); border-color: var(--border-strong); }
.btn:active { background: var(--sunk); box-shadow: var(--elev-pressed); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn-primary {
background: var(--accent-strong); color: var(--on-accent); border-color: transparent;
box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-strong) 35%, transparent);
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent-strong) 90%, #000); border-color: transparent; }
.btn-primary:active { background: color-mix(in srgb, var(--accent-strong) 80%, #000); box-shadow: none; }
.btn-sm.btn-primary { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: none; }
.btn-sm.btn-primary:hover, .btn-sm.btn-primary:active { background: color-mix(in srgb, var(--text) 88%, var(--bg)); border-color: var(--text); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover, .btn-success:active { background: color-mix(in srgb, var(--success) 88%, #000); border-color: var(--success); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: transparent; box-shadow: none; }
.btn-danger:hover, .btn-danger:active { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); box-shadow: none; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-2); box-shadow: none; }
.btn-ghost:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.btn-ghost:active { background: var(--sunk); box-shadow: var(--elev-pressed); }
.btn-sm { padding: 6px 10px; min-height: 32px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
/* Au doigt, une cible de 44 px (les petits boutons de barre gardent 32). */
@media (pointer: coarse) { .btn:not(.btn-sm) { min-height: 44px; } }
.btn-block { width: 100%; }
.btn [data-icon], .btn svg { font-size: 15px; display: inline-flex; }
.btn-profile-save { background: var(--text); color: var(--bg); border: 1px solid var(--text); box-shadow: none; }
.btn-profile-save:hover { background: color-mix(in srgb, var(--text) 88%, var(--bg)); color: var(--bg); box-shadow: none; }
.btn-profile-reset { border-style: solid; }
.link-btn {
display: inline; background: none; border: none; padding: 0; color: var(--accent); font: inherit;
font-size: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--text); }
.ev-btn { min-height: 38px; }
.ev-btn-in { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); }
.strava-btn { border-radius: var(--r-md); }
/* Chips / badges */
.chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fs-xs); font-weight: 600; line-height: 1;
padding: 5px 9px; border-radius: 999px;
border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
white-space: nowrap;
}
.chip [data-icon], .chip svg { font-size: 13px; }
.chip-success { color: var(--success); background: var(--success-soft); border-color: transparent; }
.chip-warning { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.chip-danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.chip-accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.chip-sport { color: var(--sport); background: color-mix(in srgb, var(--sport) 14%, transparent); border-color: transparent; }
.chip-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Segmented control */
/* Une piste creusée, une pastille en relief pour le choix en cours. */
.segmented { display: inline-flex; gap: 2px; padding: 4px; background: var(--sunk); border: 0; border-radius: 999px; box-shadow: var(--elev-pressed); margin-bottom: 18px; max-width: 100%; overflow-x: auto; }
.segmented-btn {
background: transparent; border: none; color: var(--text-2); font-family: inherit;
font-size: var(--fs-sm); font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.15s ease;
}
.segmented-btn.active { background: var(--raised); color: var(--text); box-shadow: var(--elev-raised-sm); }
.segmented-btn:hover:not(.active) { color: var(--text); }
/* États vides & notes */
.empty-state {
border: 1px dashed var(--border-strong); border-radius: var(--r-lg); padding: 28px 20px; text-align: center;
color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5;
}
.empty-state [data-icon], .empty-state svg { font-size: 26px; color: var(--text-3); display: block; margin: 0 auto 10px; }
.empty-state strong { display: block; color: var(--text); font-size: var(--fs-md); margin-bottom: 4px; }
.guide-note { font-size: var(--fs-sm); color: var(--text-2); margin: 0 0 14px; line-height: 1.5; }
.guide-note strong { color: var(--text); }
/* Toast */
#profile-toast {
position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px);
background: var(--text); color: var(--bg); padding: 11px 16px; border-radius: var(--r-md);
font-weight: 600; font-size: var(--fs-sm); box-shadow: var(--shadow-md); z-index: 1000; opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease; max-width: min(92vw, 460px); text-align: center; line-height: 1.4;
}
#profile-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 769px) { #profile-toast { bottom: 28px; } }
/* ------------------------------------------------------------
2. Topbar, onglets, navigation basse
------------------------------------------------------------ */
.topbar { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.topbar-inner { max-width: var(--page-w); padding: 10px var(--page-pad); }
.topbar-profile { border-radius: var(--r-md); }
.topbar-avatar { background: var(--surface-2); }
.topbar-name { font-weight: 600; font-size: var(--fs-md); }
.topbar-sub { font-size: var(--fs-xs); font-weight: 500; }
/* LOGO TRIPULSE — la marque (tuile) est une image ; le mot « TRIPULSE »
en est une aussi, en deux versions : « TRI » bleu nuit sur fond clair,
blanc sur fond sombre. Il est posé en fond plutôt qu'en ![]()
pour
suivre le thème sans script (icons/logo-wordmark-*.png, ratio 4,77). */
.brand-mark { width: 28px; height: 28px; flex: none; display: block; }
.brand-word {
display: inline-block; flex: none;
height: 17px; aspect-ratio: 457 / 96;
background: url("/icons/logo-wordmark-dark.png") left center / contain no-repeat;
}
[data-theme="light"] .brand-word { background-image: url("/icons/logo-wordmark-light.png"); }
.topbar-btn { border-radius: var(--r-md); background: transparent; }
.topbar-btn:hover { background: var(--surface-2); }
/* `.tab-btn` ne vit plus que dans la colonne de navigation : les règles
d'onglet horizontal héritées de styles.css (rayon en haut, soulignement
du bas) sont annulées ici — cf. la section « colonne de navigation ». */
/* Fond = la surface des cartes (et non la page) : le libellé actif, en
accent, y garde 4,5:1 dans les deux thèmes. */
.bottom-nav { background: color-mix(in srgb, var(--surface) 94%, transparent); align-items: flex-end; }
.bottom-nav button { color: var(--text-3); gap: 3px; }
.bottom-nav button.active { color: var(--accent); }
.bottom-nav .bn-label { font-size: 10px; font-weight: 600; letter-spacing: 0; }
/* « Enregistrer » : un disque plein qui dépasse de la barre. L'anneau à la
couleur de la barre le détache du contenu qui défile dessous. */
.bottom-nav .bn-rec { color: var(--text); overflow: visible; }
.bn-rec-dot {
width: 52px; height: 52px; margin-top: -26px; border-radius: 50%;
display: grid; place-items: center; font-size: 22px;
background: var(--accent-strong); color: var(--on-accent);
box-shadow: 0 6px 14px color-mix(in srgb, var(--accent-strong) 45%, transparent), 0 0 0 5px var(--surface);
transition: transform 0.15s ease;
}
.bn-rec:active .bn-rec-dot { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) { .bn-rec-dot { transition: none; } }
.bn-sheet { border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.bn-sheet button { font-weight: 500; }
/* ------------------------------------------------------------
3. Aujourd'hui (tableau de bord)
------------------------------------------------------------ */
.today-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 18px; flex-wrap: wrap; }
.today-greet { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.today-date { font-size: var(--fs-sm); color: var(--text-2); margin: 4px 0 0; text-transform: capitalize; }
.today-countdown { text-align: right; }
/* En-tête : compte à rebours et « Personnaliser » empilés à droite. */
.today-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.today-custom-btn { color: var(--text-2); }
@media (max-width: 640px) { .today-head-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } }
/* Accueil personnalisable (js/today.js, TodayHome). */
.home-edit { border-color: var(--brand-green); }
.home-edit-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.home-edit-row {
display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px;
padding: 6px 8px; border-radius: var(--r-md); background: var(--surface-2); position: relative;
}
/* Poignée de glisser-déposer : seule zone qui capte le doigt (touch-action),
le reste de la ligne laisse défiler la page. */
.home-grip {
display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 36px;
border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-3); cursor: grab;
font-size: 18px; touch-action: none; user-select: none; -webkit-user-select: none;
}
.home-grip:hover { color: var(--text); background: var(--surface-3); }
.home-grip:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.home-edit-list.is-sorting, .home-edit-list.is-sorting * { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.home-edit-row.is-dragging {
z-index: 2; background: var(--surface); box-shadow: var(--shadow-md);
outline: 2px solid color-mix(in srgb, var(--brand-green) 60%, transparent);
}
.home-edit-row.is-off .home-edit-lab { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.home-edit-lab { font-size: var(--fs-sm); font-weight: 600; min-width: 0; }
.home-edit-lab small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-3); }
.home-eye, .home-move button {
display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 16px;
}
.home-eye[aria-pressed="true"] { color: var(--brand-green); border-color: color-mix(in srgb, var(--brand-green) 45%, var(--border)); }
.home-eye[aria-pressed="false"] { color: var(--text-3); }
.home-move { display: inline-flex; gap: 4px; }
.home-move button:disabled { opacity: 0.35; cursor: default; }
.home-eye:focus-visible, .home-move button:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.home-edit-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.home-start { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.home-start .form-select { width: auto; }
.home-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.home-shortcut {
display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-md);
border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; text-align: left;
}
.home-shortcut:hover { border-color: var(--border-strong); }
.home-shortcut svg { color: var(--brand-green); flex: none; }
.today-last .next-row { margin-top: 6px; }
.today-countdown-num { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.today-countdown-lab { font-size: var(--fs-xs); color: var(--text-2); margin-top: 3px; }
/* minmax(0, …) et non 1fr : une piste 1fr ne descend jamais sous la largeur
minimale de son contenu. Un titre en nowrap/ellipse (.next-title) l'élargissait
au-delà de l'écran et toute la page débordait à droite sur mobile. */
.today-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .today-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .today-span, .today-fill { grid-column: 1 / -1; } }
.today-session { padding: 0; overflow: hidden; margin-top: 0; }
.today-session-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.today-kicker { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.today-session-body { padding: 18px 20px; display: flex; gap: 16px; align-items: flex-start; }
.sport-glyph {
width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
color: var(--sport, var(--text-2)); background: color-mix(in srgb, var(--sport, var(--text-3)) 14%, transparent);
}
.sport-glyph-sm { width: 36px; height: 36px; border-radius: 10px; font-size: 17px; }
.today-session-title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.today-session-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.today-session-desc { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; }
.today-session-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px 18px; }
.today-rest { color: var(--text-2); }
.today-week { margin-top: 0; }
.today-week-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.today-week-head .card-title { margin: 0; }
.today-week-stat { font-size: var(--fs-sm); color: var(--text-2); }
.today-week-stat strong { color: var(--text); }
.week-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week-dot {
display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px;
border-radius: var(--r-md); border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--text-2);
}
.week-dot:hover { background: var(--surface-2); }
.week-dot.is-today { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.week-dot-dow { font-size: 11px; font-weight: 600; text-transform: capitalize; }
.week-dot-mark {
width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border);
}
.week-dot.done .week-dot-mark { background: var(--success); color: #fff; border-color: var(--success); }
.week-dot.planned .week-dot-mark { color: var(--sport); border-color: color-mix(in srgb, var(--sport) 45%, transparent); background: color-mix(in srgb, var(--sport) 12%, transparent); }
.week-dot.missed .week-dot-mark { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); background: var(--warning-soft); }
.week-dot.skipped .week-dot-mark { color: var(--text-3); border-style: dashed; }
.week-dot.rest .week-dot-mark { background: transparent; border-color: transparent; }
/* Jour à plusieurs séances : la pastille s'allonge en gélule, une icône
par séance (tenue dans la colonne, même sur téléphone). */
.week-dot.is-multi .week-dot-mark { width: auto; min-width: 26px; max-width: 100%; padding: 0 5px; gap: 2px; border-radius: 13px; font-size: 11px; }
.week-progress-line { margin-top: 12px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.week-progress-line > div { height: 100%; background: var(--success); border-radius: 3px; }
.today-next { margin-top: 0; }
.next-list { display: flex; flex-direction: column; }
.next-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); cursor: pointer; }
.next-row:first-child { border-top: none; padding-top: 0; }
.next-row:last-child { padding-bottom: 0; }
.next-date { width: 44px; flex-shrink: 0; text-align: center; line-height: 1.1; }
.next-date-dow { display: block; font-size: 11px; color: var(--text-3); font-weight: 600; text-transform: capitalize; }
.next-date-dom { display: block; font-size: var(--fs-lg); font-weight: 600; }
.next-main { flex: 1; min-width: 0; }
.next-title { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-meta { font-size: var(--fs-xs); color: var(--text-2); margin-top: 1px; }
.next-arrow { color: var(--text-3); font-size: 16px; }
.today-load { margin-top: 0; }
/* Charge : trois chiffres côte à côte, sans jauge colorée (le ratio
aigu:chronique ne prédit pas la blessure, cf. js/today.js). */
.load-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.load-trio-val { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; }
.load-trio-val small { font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); }
.load-trio-lab { font-size: var(--fs-xs); color: var(--text-3); margin-top: 3px; line-height: 1.3; }
.today-load .advice-line { margin-bottom: 10px; }
.load-hint { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; margin: 10px 0 0; }
/* Flamme de régularité (js/flame.js). La teinte de la carte suit l'état :
allumée (orange), protégée par un arrêt déclaré (bleu), éteinte (gris).
`--flame` est la seule variable à changer. */
.today-flame { --flame: var(--text-3); margin-top: 0; }
.today-flame.is-lit { --flame: var(--sport-run); }
.today-flame.is-safe { --flame: var(--accent); }
.flame-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.flame-main { display: flex; align-items: center; gap: 12px; }
.flame-glyph {
flex: none; width: 46px; height: 46px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; font-size: 24px;
color: var(--flame); background: color-mix(in srgb, var(--flame) 15%, transparent);
}
.today-flame.is-lit .flame-glyph svg { fill: color-mix(in srgb, var(--flame) 30%, transparent); animation: flame-flicker 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.flame-count { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.flame-num { font-size: var(--fs-2xl, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.flame-lab { font-size: var(--fs-sm); color: var(--text-2); }
/* Les dernières semaines : pleine = tenue, bouclier bleu = protégée,
creuse = non tenue, anneau = en cours. */
.flame-trail { display: flex; gap: 6px; margin-top: 14px; }
.flame-dot { flex: 1; max-width: 34px; height: 8px; border-radius: 4px; background: var(--surface-3); }
.flame-dot.is-held { background: var(--sport-run); }
.flame-dot.is-safe { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.flame-dot.is-lost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.flame-dot.is-now { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--flame); }
.flame-week { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.flame-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.flame-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--sport-run); }
.today-flame .load-hint svg { vertical-align: -2px; color: var(--accent); }
.flame-rule { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.45; margin: 6px 0 0; }
@keyframes flame-flicker { 0%, 100% { transform: scale(1) rotate(0); } 35% { transform: scale(1.07, 1.1) rotate(-2deg); } 70% { transform: scale(.97, 1.03) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .today-flame.is-lit .flame-glyph svg { animation: none; } }
/* Garde-fou (js/safety.js) : ligne d'état de la carte de charge et
encadré « avant → après » de la page de séance. */
.guard-line { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.guard-line svg { flex-shrink: 0; margin-top: 2px; color: var(--brand-green); }
.guard-line strong { color: var(--text); }
.guard-off svg { color: var(--text-3); }
.advice-line.guard-callout { flex-wrap: wrap; align-items: flex-start; margin: 0 0 14px; }
.guard-callout .advice-icon { margin-top: 3px; }
.guard-callout-body { flex: 1; min-width: 220px; line-height: 1.5; }
.guard-callout .adapt-actions { flex-basis: 100%; justify-content: flex-end; }
.today-coach { margin-top: 0; }
.today-banner {
display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg);
background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
font-size: var(--fs-sm); line-height: 1.45; color: var(--text); margin-bottom: 16px;
}
.today-banner [data-icon], .today-banner svg { color: var(--warning); font-size: 20px; flex-shrink: 0; }
.today-banner .btn { margin-left: auto; flex-shrink: 0; }
@media (max-width: 520px) { .today-banner { flex-wrap: wrap; } .today-banner .btn { margin-left: 0; width: 100%; } }
/* ------------------------------------------------------------
4. Plan : semaine datée
------------------------------------------------------------ */
.timeline-card { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 16px; }
.timeline-header { margin-bottom: 14px; align-items: flex-start; }
.vol-badge { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: 999px; font-weight: 600; font-size: var(--fs-xs); padding: 5px 10px; }
.timeline-track { gap: 6px; padding-bottom: 6px; scroll-snap-type: x proximity; }
.tl-week {
flex: 0 0 auto; min-width: 74px; padding: 8px 8px 10px; position: relative; overflow: hidden;
background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer;
display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--text); text-align: left;
scroll-snap-align: start; transition: border-color 0.15s ease, background 0.15s ease;
}
.tl-week:hover { border-color: var(--border-strong); }
.tl-week.active { border-color: var(--text); background: var(--surface-3); }
.tl-week.is-current::before { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tl-num { font-size: var(--fs-sm); font-weight: 600; }
.tl-dates { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.tl-tag { font-size: 10px; font-weight: 600; color: var(--text-2); }
.tl-tag.rec { color: var(--zone-1); }
.tl-tag.race { color: var(--danger); }
.tl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--phase) 22%, transparent); }
.tl-bar > i { display: block; height: 100%; background: var(--phase); }
.tl-week.active .tl-bar { background: color-mix(in srgb, var(--phase) 30%, transparent); }
.timeline-footer { border-top: none; padding-top: 0; margin-top: 8px; font-size: var(--fs-xs); color: var(--text-3); }
.weekly-progress-wrapper { margin-top: 6px; }
.weekly-progress-bar-bg { height: 6px; border: none; background: var(--surface-3); border-radius: 3px; }
.weekly-progress-bar-fill { background: var(--success); }
.weekly-progress-text { color: var(--text-2); font-weight: 600; font-size: var(--fs-xs); }
.week-focus-banner { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); align-items: center; }
.week-focus-icon { color: var(--text-2); font-size: 18px; display: inline-flex; }
.week-focus-text { color: var(--text-2); font-size: var(--fs-sm); }
.plan-banner-missing-date { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 35%, transparent); border-radius: var(--r-md); font-weight: 500; }
.plan-banner-missing-date strong { color: var(--warning); }
.plan-banner-missing-date [data-icon], .plan-banner-missing-date svg { color: var(--warning); font-size: 18px; }
.cal-wrapper { margin-top: 0; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.cal-header { background: transparent; padding: 14px 18px 10px; border-bottom: 1px solid var(--border); flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cal-header-title { font-size: var(--fs-lg); font-weight: 600; }
.cal-header-sub { font-size: var(--fs-xs); color: var(--text-3); }
.sess-list { display: flex; flex-direction: column; }
.sess-row {
display: grid; grid-template-columns: 46px 40px 1fr auto auto; align-items: center; gap: 12px;
padding: 11px 18px; border-bottom: 1px solid var(--border); cursor: pointer; position: relative;
transition: background 0.12s ease;
}
.sess-row:hover { background: var(--surface-2); }
.sess-row.selected { background: var(--surface-2); }
.sess-row.selected::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--text); }
.sess-row.rest { opacity: 0.55; }
.sess-row.rest:hover { opacity: 0.8; }
.sess-date { text-align: center; line-height: 1.05; }
.sess-dow { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-3); text-transform: capitalize; }
.sess-dom { display: block; font-size: var(--fs-lg); font-weight: 600; }
.sess-row.is-today .sess-dom { color: var(--accent); }
.sess-row.is-today .sess-dow { color: var(--accent); }
.sess-icon {
width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
color: var(--sport, var(--text-3)); background: color-mix(in srgb, var(--sport, var(--text-3)) 14%, transparent);
}
.sess-row.rest .sess-icon { background: transparent; border: 1px dashed var(--border-strong); }
.sess-main { min-width: 0; }
.sess-title { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess-meta { font-size: var(--fs-xs); color: var(--text-2); margin-top: 2px; }
.sess-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); white-space: nowrap; }
.sess-status svg { font-size: 18px; }
.sess-row.done .sess-status { color: var(--success); }
.sess-row.done .sess-title { color: var(--text-2); }
.sess-row.missed .sess-status { color: var(--warning); }
.sess-row.skipped .sess-status { color: var(--text-3); }
.sess-row.is-today .sess-status .chip { margin-right: 2px; }
@media (max-width: 520px) {
.sess-row { grid-template-columns: 40px 34px 1fr auto auto; gap: 10px; padding: 10px 14px; }
.sess-wx-min { display: none; }
.sess-status .sess-status-txt { display: none; }
}
/* Plusieurs séances le même jour (cf. PlanDay, app.js) : la séance
supplémentaire se range sous la principale, sans seconde date — un « + »
dans la colonne de date, et pas de filet entre les deux lignes. */
.sess-row:has(+ .sess-row.is-extra) { border-bottom-color: transparent; }
.sess-row.is-extra { padding-top: 4px; }
.sess-extra-mark {
display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
border-radius: 50%; border: 1px dashed var(--border-strong); color: var(--text-3); font-size: 13px; font-weight: 700; line-height: 1;
}
.sdp-add-more { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
/* Page de détail de séance : remplace la liste de la semaine, avec retour */
#tab-week.session-open .timeline-card { display: none; }
.sess-page-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sess-back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 8px 10px; margin: -4px 0 -4px -4px; border-radius: var(--r-md); cursor: pointer; }
.sess-back:hover { background: var(--surface-2); }
.sess-back svg { font-size: 16px; }
.sess-page-ctx { font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; white-space: nowrap; }
.session-open .session-detail-panel { animation: sdp-in .18s ease-out; }
@keyframes sdp-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .session-open .session-detail-panel { animation: none; } }
/* Panneau de détail de séance */
.session-detail-panel { padding: 20px 18px 22px; animation: none; }
.sdp-header { margin-bottom: 14px; }
.sdp-sport-chip { border-radius: 12px; font-size: 20px; width: 44px; height: 44px; }
.sdp-title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; }
.sdp-day-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; text-transform: none; }
.sdp-day-label::first-letter { text-transform: uppercase; }
.sdp-badge { border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: var(--fs-xs); padding: 5px 10px; color: var(--text-2); }
.sdp-badge svg { font-size: 13px; }
.sdp-divider { margin: 14px 0; }
.sdp-body { background: var(--surface-2); border-radius: var(--r-md); border-left-width: 3px; }
.sdp-steps { gap: 8px; }
.sdp-step { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; }
.sdp-step-rail { width: 3px; }
.sdp-step-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.sdp-step-name svg { color: var(--text-3); font-size: 15px; }
.sdp-step-meta { font-weight: 500; }
.sdp-tips { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0; margin-top: 8px; }
.sdp-tips summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.sdp-tips summary::-webkit-details-marker { display: none; }
.sdp-tips summary svg { color: var(--text-3); }
.sdp-tips summary .sdp-tips-chev { margin-left: auto; transition: transform 0.15s ease; }
.sdp-tips[open] summary .sdp-tips-chev { transform: rotate(180deg); }
.sdp-tips-list { padding: 0 14px 12px 32px; }
.sdp-tips-list li { color: var(--text-2); }
.sdp-coach-note { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--r-md); }
.sdp-coach-note-head { color: var(--accent); font-weight: 600; text-transform: none; letter-spacing: 0; }
.sdp-rest-card { border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }
.sdp-rest-icon { color: var(--text-3); font-size: 26px; display: inline-flex; }
.sdp-rest-title { font-weight: 600; font-size: var(--fs-md); margin-bottom: 4px; }
/* Journal de séance */
.log { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); padding: 16px; }
.log-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.log-title svg { color: var(--text-3); }
.log-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.log-actions .btn { flex: 1 1 160px; }
.log-skip-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.log-skip-reasons .chip { cursor: pointer; }
.log-skip-reasons .chip:hover { border-color: var(--border-strong); color: var(--text); }
.log-state { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.log-state-txt { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; }
.log-state-txt svg { font-size: 18px; }
.log-state.done .log-state-txt { color: var(--success); }
.log-state.skipped .log-state-txt { color: var(--text-2); }
.log-field { margin-top: 14px; }
.log-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.log-label span:last-child { color: var(--text-3); font-weight: 500; }
.rpe-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.rpe-btn {
height: 36px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
font-size: var(--fs-sm); font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.12s ease;
}
.rpe-btn:hover { border-color: var(--border-strong); color: var(--text); }
.rpe-btn.active { color: #fff; border-color: transparent; background: var(--rpe); }
.rpe-legend { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); margin-top: 5px; }
.perf-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.perf-field { display: flex; flex-direction: column; gap: 4px; }
.perf-field label { font-size: 10.5px; color: var(--text-3); font-weight: 600; }
.perf-input { width: 100%; padding: 9px 10px; }
.perf-result { margin-top: 8px; font-size: var(--fs-sm); color: var(--text-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.perf-result strong { color: var(--text); font-size: var(--fs-md); }
.perf-source { font-size: 10.5px; color: var(--text-3); }
@media (max-width: 480px) { .perf-row { grid-template-columns: 1fr 1fr; } .perf-row .btn { grid-column: 1 / -1; } }
.log-load { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-2); }
.log-load strong { color: var(--text); }
.log-load svg { color: var(--text-3); }
.log-note-row { display: flex; gap: 8px; }
.log-note-row .form-input { flex: 1; }
.log-foot { margin-top: 14px; display: flex; justify-content: flex-end; }
/* ------------------------------------------------------------
5. Progression
------------------------------------------------------------ */
.prog-hero { background: var(--surface); border: 1px solid var(--border); padding: 20px; gap: 20px; }
[data-theme="light"] .prog-hero { background: var(--surface); }
.prog-ring-fill { stroke: var(--success); filter: none; }
.prog-ring-bg { stroke: var(--surface-3); }
.prog-ring-pct { color: var(--text); font-weight: 600; font-size: 26px; }
.prog-hero-title { font-size: var(--fs-lg); font-weight: 600; }
.prog-hero-text { color: var(--text-2); }
.prog-stat { background: var(--surface-2); border-radius: var(--r-md); text-align: left; padding: 12px 14px; }
.prog-stat-val { font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.prog-stat-unit { font-weight: 500; }
.prog-stat-lab { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); color: var(--text-3); margin-top: 3px; }
.level-chip { border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-weight: 600; }
.level-bar-bg { background: var(--surface-3); border: none; height: 6px; }
.level-bar-fill { background: var(--accent); }
.prog-sport-card { background: var(--surface); }
.prog-sport-count { font-weight: 600; }
.prog-sport-icon { display: inline-flex; font-size: 20px; }
.badge-group-title { text-transform: none; letter-spacing: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.badge-card { background: var(--surface); }
.badge-card.badge-earned { background: var(--surface); }
.badge-card.badge-earned:hover { transform: none; }
.badge-icon { background: var(--surface-2); border-radius: 10px; }
.badge-name { font-weight: 600; }
.badge-prog-bar { background: var(--surface-3); border: none; height: 5px; }
.advice-line { background: var(--surface-2); border-radius: var(--r-md); border-left-width: 3px; align-items: center; }
.advice-icon { display: inline-flex; color: var(--text-3); font-size: 16px; }
.advice-good { border-left-color: var(--success); }
.advice-warn { border-left-color: var(--warning); }
.advice-recap { border-left-color: var(--accent); }
.charge-hint { background: var(--surface-2); border-radius: var(--r-md); color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.charge-hint svg { color: var(--text-3); flex-shrink: 0; }
.perf-chip { background: var(--surface-2); border-radius: 999px; font-weight: 500; }
.perf-latest { font-weight: 600; }
.perf-chart { width: 100%; height: 100px; display: block; margin: 6px 0 4px; }
.perf-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Suivi de charge — graphique hebdo (sRPE) */
.load-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 560px) { .load-kpis { grid-template-columns: 1fr; } }
.kpi { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; }
.kpi-val { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; display: flex; align-items: baseline; gap: 4px; }
.kpi-val small { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.kpi-lab { font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; }
.kpi-status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; margin-top: 6px; }
.kpi-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kpi-good { color: var(--success); }
.kpi-warn { color: var(--warning); }
.kpi-bad { color: var(--danger); }
.kpi-low { color: var(--zone-1); }
.load-chart { display: flex; gap: 5px; align-items: stretch; height: 150px; margin-top: 4px; }
.load-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 8px; padding: 4px 1px 2px; transition: background-color .15s; }
.load-col:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.load-col.is-current { background: var(--surface-2); }
.load-col.is-selected { outline: 1px solid var(--border-strong); }
/* Barres dans le style des graphiques D3 : sommets arrondis, le prévu en
piste claire, le réalisé en dégradé, une ligne de base. */
.load-bars { flex: 1; width: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid color-mix(in srgb, var(--text) 22%, transparent); }
.load-bar-planned { position: absolute; bottom: 0; width: 72%; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--text) 10%, transparent); }
.load-bar-done { position: absolute; bottom: 0; width: 44%; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--success), color-mix(in srgb, var(--success) 55%, transparent)); }
.load-bar-bonus { position: absolute; width: 44%; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 60%, transparent)); }
.stack-seg { position: absolute; width: 66%; border-radius: 2px; }
.load-val { font-size: 10px; color: var(--text-2); font-weight: 600; height: 12px; line-height: 12px; font-variant-numeric: tabular-nums; }
.load-week { font-size: 10px; color: var(--text-3); font-weight: 600; }
.load-col.is-current .load-week { color: var(--text); }
.load-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: var(--fs-xs); color: var(--text-2); }
.load-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.load-legend .l-planned { background: var(--surface-3); border: 1px solid var(--border-strong); }
.load-legend .l-done { background: var(--success); }
.load-legend .l-bonus { background: var(--accent); }
.load-footnote { font-size: var(--fs-xs); color: var(--text-3); margin-top: 10px; line-height: 1.5; }
@media (max-width: 560px) { .load-val { display: none; } .load-week { font-size: 8.5px; } }
/* ------------------------------------------------------------
6. Guide (zones, phases, principes)
------------------------------------------------------------ */
.guide-section { display: none; }
.guide-section.active { display: block; }
.zone-card { background: var(--surface); padding: 14px 16px; border-radius: var(--r-md); }
.zone-badge { border-radius: 10px; width: 40px; height: 40px; font-weight: 600; font-size: 14px; border-width: 1px !important; }
.zone-name { font-weight: 600; }
.zone-bpm { font-weight: 600; font-size: 18px; }
.zone-pct { font-weight: 600; }
.distrib-card { margin-top: 12px; }
.distrib-title { font-weight: 600; }
.distrib-block { color: #fff; font-weight: 600; font-size: 10.5px; }
.distrib-bar { border-radius: 6px; }
/* Légende de la répartition : la pastille reprend les zones qu'elle
regroupe (Z1+Z2, Z3 à Z5), dans les couleurs de la barre. */
.distrib-legend .legend-dot { width: 18px; height: 10px; }
/* Zones personnalisées (js/hrzones.js) */
#zones-fcm-note .link-btn { margin-left: 4px; }
#zones-fcm-note .link-btn svg { width: 14px; height: 14px; }
.zones-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--brand-green, var(--success)); margin-right: 4px; }
.zones-tag svg { width: 14px; height: 14px; }
.zed-card { display: flex; flex-direction: column; gap: 12px; }
.zed-rows { display: flex; flex-direction: column; gap: 8px; }
.zed-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.zed-name { font-weight: 600; font-size: var(--fs-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zed-field { display: inline-flex; align-items: center; gap: 6px; }
.zed-lab { font-size: var(--fs-xs); color: var(--text-3); }
.zed-input { width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.zed-to { font-size: var(--fs-sm); color: var(--text-2); min-width: 84px; font-variant-numeric: tabular-nums; }
.zed-error { min-height: 1.2em; font-size: var(--fs-sm); color: var(--danger); }
.zed-error:empty { display: none; }
.zed-fill, .zed-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.zed-actions { justify-content: flex-end; }
@media (max-width: 480px) {
.zed-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
.zed-row .zone-badge { width: 36px; height: 36px; }
.zed-to { grid-column: 2 / -1; min-width: 0; font-size: var(--fs-xs); margin-top: -6px; text-align: right; }
}
.phases-grid { gap: 8px; }
.phase-btn { background: var(--surface); padding: 14px; border-radius: var(--r-md); }
.phase-btn.active { border-color: var(--phase) !important; background: color-mix(in srgb, var(--phase) 10%, var(--surface)) !important; }
.phase-icon { color: var(--phase, var(--text-2)); display: inline-flex; font-size: 18px; margin-bottom: 8px; }
.phase-name { font-weight: 600; }
.phase-detail-card { background: var(--surface); border-color: var(--border) !important; }
.phase-detail-badge { display: inline-flex; font-size: 22px; color: var(--phase, var(--text-2)); width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; background: color-mix(in srgb, var(--phase, var(--text-3)) 14%, transparent); }
.phase-detail-title { font-weight: 600; font-size: var(--fs-lg); color: var(--text) !important; }
.phase-vol-badge { border-radius: 999px; }
.phase-focus-item { background: var(--surface-2); border-radius: var(--r-md); align-items: center; }
.phase-focus-arrow { display: inline-flex; color: var(--phase, var(--text-3)) !important; }
.progress-bar-card { background: var(--surface); }
.progress-title { text-transform: none; letter-spacing: 0; }
.progress-segment { border-radius: 4px; font-weight: 600; }
.principle-card { background: var(--surface); }
.principle-icon { display: inline-flex; color: var(--text-2); font-size: 20px; width: 36px; height: 36px; border-radius: 10px; align-items: center; justify-content: center; background: var(--surface-2); }
.principle-name { font-weight: 600; }
.swim-tips-card { background: var(--surface); border-color: var(--border); }
.swim-tips-card .card-title { color: var(--sport-swim); }
.danger-tips-card { background: var(--surface); border-color: var(--border); }
.danger-tips-card .card-title { color: var(--danger); }
.tip-check, .danger-check { display: inline-flex; font-size: 16px; margin-top: 1px; }
.tip-check { color: var(--sport-swim); }
.danger-check { color: var(--danger); }
.tip-row { color: var(--text-2); }
/* ------------------------------------------------------------
7. Profil
------------------------------------------------------------ */
.profile-container { gap: 28px; }
.avatar-option { border-radius: var(--r-sm); background: var(--surface-2); }
.avatar-option.active { border-color: var(--text); background: var(--surface-3); box-shadow: none; }
.avatar-photo-preview { background: var(--surface-2); }
.schedule-day-row { background: var(--surface-2); border-radius: var(--r-md); padding: 6px 10px 6px 14px; grid-template-columns: 90px 1fr 1fr; }
/* Les deux listes se partagent la ligne : sans min-width 0, la plus longue
option impose sa largeur et la ligne déborde sur téléphone. */
.schedule-day-row .schedule-select { min-width: 0; width: 100%; text-overflow: ellipsis; }
/* 2e séance du jour : discrète tant qu'elle est vide. */
.schedule-select-2:not(.is-set) { color: var(--text-3); border-style: dashed; background: transparent; }
@media (max-width: 560px) {
.schedule-day-row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
.schedule-day-row .schedule-day-name { grid-column: 1 / -1; }
}
.schedule-day-name { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.schedule-select { background: var(--surface); }
.formats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.format-btn { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; }
.format-btn.active { background: var(--surface-3); border: 1px solid var(--text); }
.format-btn .format-key { font-weight: 600; font-size: var(--fs-lg); }
.format-btn.active .format-key { color: var(--text); }
.format-btn .format-name { font-weight: 600; font-size: var(--fs-xs); color: var(--text-2); }
.format-btn .format-details { color: var(--text-3); }
.format-btn .format-vol { color: var(--text-3); font-weight: 500; }
.format-btn.active .format-vol { color: var(--text-2); }
.profile-countdown { margin-top: 8px; font-size: var(--fs-sm); color: var(--text-2); min-height: 20px; }
.profile-countdown strong { color: var(--text); }
.fcm-container { align-items: center; }
.fcm-slider { accent-color: var(--text); }
.fcm-value { color: var(--text); font-weight: 600; font-size: 40px; }
.fcm-slider-labels { color: var(--text-3); }
.fcm-info { color: var(--text-2); line-height: 1.5; }
.fcm-info span { color: var(--text); font-weight: 600; }
.fcm-info .link-btn { margin-top: 6px; display: inline-block; }
.vma-inline { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-2); }
.vma-inline strong { color: var(--text); font-size: var(--fs-lg); font-weight: 600; margin-right: 4px; }
.plan-close-summary { background: var(--surface-2); border-radius: var(--r-md); }
.plan-history-badge { border-radius: 999px; background: var(--surface-2); border-color: var(--border); color: var(--text-2); }
.plan-history-row { border-radius: var(--r-md); }
.strava-note { color: var(--text-2); }
.strava-connected { color: var(--success); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.strava-powered { color: var(--text-3); text-transform: none; letter-spacing: 0; }
/* ------------------------------------------------------------
8. Accueil / onboarding
------------------------------------------------------------ */
.landing { background: var(--bg); padding-top: 48px; }
.landing-logo { width: 72px; height: 72px; border-radius: 0; background: none; border: none; }
.landing-logo img { width: 100%; height: 100%; display: block; }
.landing-title {
font-size: clamp(26px, 6vw, 36px); font-weight: 600; letter-spacing: -0.02em;
background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--text);
}
[data-theme="light"] .landing-title { background: none; -webkit-text-fill-color: initial; }
.landing-tagline { color: var(--text-2); font-size: var(--fs-md); }
.landing-card { border-radius: var(--r-lg); background: var(--surface); }
.landing-card-title { font-weight: 600; }
.wiz-progress { margin-top: 26px; }
.wiz-dot { width: 22px; height: 4px; border-radius: 2px; background: var(--surface-3); }
.wiz-dot.active { background: var(--text); }
.wiz-progress-label { color: var(--text-3); font-weight: 500; letter-spacing: 0; }
.wiz-hint { color: var(--text-3); }
.wiz-discipline-card { background: var(--surface-2); border-radius: var(--r-md); padding: 16px 10px; }
.wiz-discipline-card.active { border-color: var(--text); background: var(--surface-3); color: var(--text); }
.wiz-discipline-card:hover { transform: none; border-color: var(--border-strong); }
.wiz-discipline-icon { display: inline-flex; font-size: 24px; color: var(--sport, var(--text-2)); width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; background: color-mix(in srgb, var(--sport, var(--text-3)) 14%, transparent); margin-bottom: 4px; }
.wiz-discipline-label { font-weight: 600; }
.wiz-level-chip { background: var(--surface-2); border-radius: var(--r-md); }
.wiz-level-chip.active { border-color: var(--text); background: var(--surface-3); }
.wiz-level-chip-label { font-weight: 600; }
.wiz-format-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.wiz-format-btn {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; text-align: left;
background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-2); font-family: inherit; cursor: pointer;
}
.wiz-format-btn.active { border-color: var(--text); background: var(--surface-3); color: var(--text); }
.wiz-format-key { font-weight: 600; font-size: var(--fs-md); color: var(--text); }
.wiz-format-sub { font-size: 10.5px; color: var(--text-3); }
.landing-skip { color: var(--text-3); font-weight: 500; }
.landing-note { color: var(--text-3); }
/* ------------------------------------------------------------
10. Activités importées (Strava)
------------------------------------------------------------ */
.act-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.act-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.act-list { display: flex; flex-direction: column; gap: 8px; }
.act-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.act-main { min-width: 0; }
.act-title { font-weight: 600; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-meta { font-size: var(--fs-xs); color: var(--text-2); margin-top: 2px; }
.act-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.act-suggest { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-top: 2px; background: var(--accent-soft); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--text); }
.act-suggest svg { color: var(--accent); }
@media (max-width: 520px) { .act-row { grid-template-columns: 36px 1fr; } .act-actions { grid-column: 1 / -1; justify-content: flex-start; } }
/* ------------------------------------------------------------
11. Club / événements — cohérence minimale
------------------------------------------------------------ */
.club-hero { background: var(--surface); }
.lb-row, .member-row, .coach-day, .grp-card, .pb-plan { background: var(--surface-2); border-radius: var(--r-md); }
.lb-row.lb-me { background: var(--success-soft); }
.athlete-chip { border-radius: 999px; background: var(--surface-2); }
.athlete-chip.active { border-color: var(--text); background: var(--surface-3); color: var(--text); }
.ev-card { background: var(--surface); }
/* ------------------------------------------------------------
12. Accessibilité : mouvement réduit
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ------------------------------------------------------------
13. Compléments
------------------------------------------------------------ */
.log-skip-reasons { display: none; }
.log-skip-reasons.open { display: flex; }
.cal-wrapper > .plan-banner-missing-date { margin: 12px 12px 0; }
.sess-row:focus-visible { outline-offset: -2px; }
.sdp-badges { align-items: center; }
.avatar-emoji { line-height: 1; }
.session-detail-panel .sdp-badge svg { color: var(--text-3); }
@media (max-width: 768px) {
.today-greet { font-size: 22px; }
.page-title { font-size: 18px; }
.card { padding: 16px; }
.session-detail-panel { padding: 16px 14px 18px; }
.rpe-btn { height: 34px; font-size: 12px; }
}
.today-date { text-transform: none; }
.today-date::first-letter { text-transform: uppercase; }
.today-week-head { flex-wrap: wrap; }
.today-week-head .card-title { white-space: nowrap; }
/* Téléphone : le J-x reste LE chiffre de l'écran, à droite de la
salutation ; « Personnaliser » passe dessous (la colonne de droite est
dissoute dans la grille de l'en-tête). */
@media (max-width: 520px) {
.today-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 12px; }
.today-head-side { display: contents; }
.today-countdown-num { font-size: 40px; }
.today-custom-btn { grid-column: 1 / -1; justify-self: start; }
}
/* ------------------------------------------------------------
14. Chargement, synchronisation, données
------------------------------------------------------------ */
#app-loading { display: none; position: fixed; inset: 0; z-index: 400; background: var(--bg); align-items: center; justify-content: center; flex-direction: column; gap: 14px; color: var(--text-2); font-size: var(--fs-sm); }
body.is-loading #app-loading { display: flex; }
body.is-loading .topbar, body.is-loading .container, body.is-loading .bottom-nav { visibility: hidden; }
.app-loading-mark { width: 56px; height: 56px; animation: tp-pulse 1.2s ease-in-out infinite; }
@keyframes tp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.92); opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .app-loading-mark { animation: none; } }
/* ANIMATION D'ARRIVÉE — jouée une fois, juste après une connexion (cf. le
script posé sous #app-welcome dans index.html : c'est lui qui la
déclenche, puis la retire). Le logo se dessine : point bleu, pulsation,
point orange, courbe, point vert — puis le nom de l'app et un bonjour.
Elle RECOUVRE l'écran de chargement et ne retarde donc rien : les
données se lisent pendant qu'elle joue. Le tracé est celui de
login.html (.pulse) : même dessin de part et d'autre de la connexion. */
#app-welcome {
position: fixed; inset: 0; z-index: 401; background: var(--bg);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
transition: opacity .4s ease;
}
#app-welcome[hidden] { display: none; }
#app-welcome.is-leaving { opacity: 0; pointer-events: none; }
.aw-pulse { width: min(58vw, 260px); height: auto; overflow: visible; transition: transform .4s ease; }
#app-welcome.is-leaving .aw-pulse { transform: scale(1.12); }
.aw-pulse path {
fill: none; stroke: var(--text); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 1; stroke-dashoffset: 1;
animation: aw-draw 1s .15s cubic-bezier(.6, .05, .3, 1) forwards;
}
/* Le rebond (1.6 dans la courbe) : chaque point « claque » à l'arrivée du
trait, au lieu d'apparaître. Les délais suivent la position du point
sur le tracé — l'orange est à mi-longueur. */
.aw-pulse circle {
stroke: var(--bg); stroke-width: 6; transform-box: fill-box; transform-origin: center;
opacity: 0; animation: aw-pop .45s cubic-bezier(.3, 1.6, .5, 1) forwards;
}
.aw-pulse circle:nth-of-type(2) { animation-delay: .6s; }
.aw-pulse circle:nth-of-type(3) { animation-delay: 1.05s; }
.aw-word { height: 26px; opacity: 0; animation: aw-rise .45s .95s ease-out forwards; }
.aw-hello { min-height: 1.4em; color: var(--text-2); font-size: var(--fs-md); opacity: 0; transition: opacity .3s ease; }
.aw-hello.on { opacity: 1; }
@keyframes aw-draw { to { stroke-dashoffset: 0; } }
@keyframes aw-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes aw-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* CÉLÉBRATION (js/celebrate.js) — badge, niveau, record, flamme. Une
carte au centre, au-dessus de tout sauf des messages (.toast, 1000) :
le « Séance validée · Annuler » doit rester atteignable. Rien à
fermer : un toucher n'importe où, ou cinq secondes. `--tone` est la
couleur de l'occasion. */
.cel {
position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
padding: 24px; background: color-mix(in srgb, var(--bg) 62%, transparent);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
cursor: pointer; animation: cel-in .25s ease-out both; transition: opacity .25s ease;
}
.cel.is-leaving { opacity: 0; pointer-events: none; }
.cel-card {
position: relative; width: min(100%, 340px); padding: 26px 22px 22px; text-align: center;
background: var(--surface); border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--border));
border-radius: var(--r-lg); box-shadow: var(--shadow-md), 0 0 0 6px color-mix(in srgb, var(--tone) 10%, transparent);
animation: cel-card .45s cubic-bezier(.3, 1.5, .5, 1) both;
}
.cel-glyph {
width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 36px;
color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--tone) 7%, transparent);
animation: aw-pop .5s .12s cubic-bezier(.3, 1.6, .5, 1) both;
}
.cel-emoji { font-size: 40px; line-height: 1; }
.cel-kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); }
.cel-title { margin-top: 6px; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.cel-text { margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.cel-extras { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.cel-extras .chip { white-space: normal; }
.cel-extras .cel-emoji { font-size: 13px; }
/* Confettis : chaque pièce part du centre de la carte vers (--x, --y),
puis retombe. Tout est dans la feuille — le script ne tire que les
directions. */
.cel-confetti { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; }
.cel-confetti i {
position: absolute; left: -4px; top: -7px; width: 8px; height: 14px; border-radius: 2px;
background: var(--c); opacity: 0;
animation: cel-burst var(--t) cubic-bezier(.12, .7, .3, 1) var(--d) both;
}
@keyframes cel-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cel-card { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes cel-burst {
0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.5); }
8% { opacity: 1; }
55% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
100% { opacity: 0; transform: translate(calc(var(--x) * 1.12), calc(var(--y) + 170px)) rotate(calc(var(--r) * 1.6)) scale(.9); }
}
@media (prefers-reduced-motion: reduce) { .cel, .cel-card, .cel-glyph { animation: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.sync-btn { color: var(--text-3); }
.sync-btn[data-state="synced"] { color: var(--success); }
.sync-btn[data-state="pending"], .sync-btn[data-state="syncing"] { color: var(--warning); }
.sync-btn[data-state="offline"], .sync-btn[data-state="error"], .sync-btn[data-state="auth"] { color: var(--danger); }
.sync-btn[data-state="local"] { display: none; }
.sync-btn[data-state="nocloud"] { color: var(--text-3); }
.sync-btn.spin svg { animation: spin 1s linear infinite; }
.sync-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: var(--fs-xs); color: var(--text); background: var(--warning-soft); border-bottom: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); }
.sync-banner svg { color: var(--warning); flex-shrink: 0; }
.sync-banner .btn { margin-left: auto; }
.physio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.data-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.data-meta { font-size: var(--fs-xs); color: var(--text-3); margin-top: 10px; line-height: 1.5; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text); cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--text); }
/* ------------------------------------------------------------
15. Check-in, forme, douleur, adaptation
------------------------------------------------------------ */
.ci-form { display: flex; flex-direction: column; gap: 10px; }
.ci-row { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 10px; align-items: center; }
@media (max-width: 520px) { .ci-row { grid-template-columns: 1fr; gap: 6px; } }
.ci-label { display: flex; flex-direction: column; }
.ci-label span:first-child { font-size: var(--fs-sm); font-weight: 600; }
.ci-hint { font-size: 11px; color: var(--text-3); }
/* Cinq touches en relief ; la note choisie est ENFONCÉE. L'état ne repose
pas sur l'ombre seule : liseré et chiffre passent à l'accent. */
.ci-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ci-btn { height: 40px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: var(--elev-raised-sm); transition: box-shadow 0.15s ease, background 0.15s ease; }
.ci-btn:hover { border-color: var(--border-strong); color: var(--text); }
.ci-btn.active { background: var(--sunk); color: var(--accent); border-color: var(--accent); box-shadow: var(--elev-pressed); }
.ci-extra { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 4px; }
.ci-result { display: flex; align-items: center; gap: 16px; }
.ci-gauge { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
background: conic-gradient(var(--col) calc(var(--val) * 1%), var(--surface-3) 0); position: relative; }
.ci-gauge::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.ci-gauge-num { position: relative; font-size: var(--fs-xl); font-weight: 600; }
.ci-result-title { font-size: var(--fs-lg); font-weight: 600; }
.ci-result-sub { font-size: var(--fs-xs); color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.pain-form { margin-top: 12px; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }
.pain-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pain-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pain-meta { font-size: var(--fs-xs); color: var(--text-2); flex: 1; min-width: 160px; }
.adapt-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.wl-strip { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; margin-top: 8px; }
.wl-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wl-bar { width: 100%; height: 44px; border-radius: 4px; background: var(--surface-3); position: relative; overflow: hidden; }
.wl-bar > i { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 4px; }
.wl-lab { font-size: 9px; color: var(--text-3); }
/* ------------------------------------------------------------
16. Cibles, journal replié, ajustements, glisser-déposer, toast action
------------------------------------------------------------ */
.target-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.target-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; padding: 4px 9px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-variant-numeric: tabular-nums; }
.target-chip > span { color: var(--text-3); font-weight: 500; }
/* Icône | texte | action, sur une ligne : le texte se replie DANS sa
colonne. En `flex-wrap: wrap`, un texte long passait entier à la ligne
et laissait l'icône seule au-dessus. */
.target-missing { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); }
.target-missing svg { flex: none; margin-top: 2px; color: var(--text-3); }
.target-missing .link-btn { flex: none; }
.sdp-player-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.log-more { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 4px; }
.log-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.log-more summary::-webkit-details-marker { display: none; }
.log-more summary svg { transition: transform 0.15s ease; }
.log-more[open] summary svg { transform: rotate(180deg); }
.log-more summary strong { color: var(--text); }
.log-adjust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.log-adjust-lab { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); margin-right: 4px; }
.log-move { width: auto; max-width: 100%; padding: 6px 30px 6px 10px; font-size: var(--fs-xs); min-height: 32px; }
.cal-footer { display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: var(--fs-xs); color: var(--text-2); border-bottom: 1px solid var(--border); }
.cal-footer svg { color: var(--text-3); }
/* Ajouter une séance à un jour de la semaine, même s'il en porte déjà une. */
.cal-add { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--border); color: var(--text-3); }
.cal-add .form-select { width: auto; max-width: 100%; padding: 6px 30px 6px 10px; font-size: var(--fs-xs); min-height: 32px; }
/* Jour vidé : sa séance se tient un autre jour (cf. PlanMoves, app.js). */
.sess-row.is-vacated .sess-meta { font-style: italic; }
.sess-row[draggable="true"] { cursor: grab; }
.sess-row.dragging { opacity: 0.5; }
.sess-row.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
#profile-toast { display: flex; align-items: center; gap: 12px; }
.toast-action { background: transparent; border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent); color: var(--bg); font: inherit; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
/* ------------------------------------------------------------
17. Records, Jour J, mode séance, courbe de forme, bilan
------------------------------------------------------------ */
.rec-list { display: flex; flex-direction: column; }
.rec-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--border); }
.rec-row:first-child { border-top: none; padding-top: 0; }
.rec-lab { font-size: var(--fs-sm); font-weight: 600; min-width: 120px; }
.rec-val { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-empty { color: var(--text-3); font-weight: 500; }
.rec-hint { font-size: var(--fs-xs); color: var(--text-3); margin-left: auto; }
.test-field { background: var(--accent-soft); border-radius: var(--r-md); padding: 12px; }
.race-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.race-scenario { background: var(--surface-2); border-radius: var(--r-md); padding: 12px; text-align: center; border: 1px solid transparent; color: inherit; font: inherit; cursor: pointer; width: 100%; transition: background 0.15s, border-color 0.15s; }
.race-scenario:hover { background: var(--surface-3); }
.race-scenario.race-main { border-color: var(--text); }
.race-scenario-lab { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.race-scenario-val { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; margin-top: 2px; }
.race-main .race-scenario-val { color: var(--text); }
.race-segs { display: flex; flex-direction: column; }
.race-seg { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.race-seg:first-child { border-top: none; }
.race-seg-main { flex: 1; min-width: 0; }
.race-seg-title { font-weight: 600; font-size: var(--fs-md); }
.race-seg-sub { font-size: var(--fs-xs); color: var(--text-2); }
.race-seg-time { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.race-check { display: flex; flex-direction: column; }
.race-check-row { display: grid; grid-template-columns: 24px 56px 1fr; gap: 10px; align-items: start; text-align: left; padding: 10px 0; border-top: 1px solid var(--border); background: none; border-left: none; border-right: none; border-bottom: none; color: var(--text); font: inherit; cursor: pointer; }
.race-check-row:first-child { border-top: none; }
.race-check-box { color: var(--text-3); font-size: 20px; display: inline-flex; }
.race-check-row.done .race-check-box { color: var(--success); }
.race-check-row.done .race-check-txt { color: var(--text-3); text-decoration: line-through; }
.race-check-when { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); padding-top: 3px; }
.race-check-txt { font-size: var(--fs-sm); line-height: 1.45; }
.race-teaser .today-week-head { margin-bottom: 0; }
@media (max-width: 520px) { .race-scenarios { grid-template-columns: 1fr; } .race-scenario { display: flex; justify-content: space-between; align-items: baseline; } }
/* Mode séance et mode course : même coque plein écran, deux contenus.
Écran pensé pour être lu à bout de bras, en mouvement : un chrono
dominant, une consigne, des boutons d'au moins 52 px. */
#player, #race-coach, #freerec { position: fixed; inset: 0; z-index: 500; background: var(--bg); display: flex; align-items: stretch; justify-content: center; overflow-y: auto; }
.pl-sheet { width: 100%; max-width: 560px; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.pl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pl-head-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pl-kicker { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.pl-title { font-size: var(--fs-lg); font-weight: 600; }
.pl-audio { gap: 6px; }
.pl-audio-lab { font-size: var(--fs-xs); }
.pl-step { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 12px 0; }
.pl-step-name { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-lg); font-weight: 600; color: var(--text-2); flex-wrap: wrap; justify-content: center; }
.pl-step-left { font-size: 72px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pl-lead { font-size: 96px; color: var(--accent); }
.pl-rep { font-size: var(--fs-xs); font-weight: 600; color: var(--text); background: var(--surface-3); border-radius: 999px; padding: 2px 8px; }
.pl-bar { width: 100%; max-width: 360px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.pl-bar > i { display: block; height: 100%; background: var(--seg, var(--text)); transition: width 0.25s linear; }
.pl-detail { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; max-width: 44ch; margin: 0; }
.pl-note { font-size: var(--fs-xs); color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pl-paused { font-size: var(--fs-sm); color: var(--warning); display: inline-flex; align-items: center; gap: 8px; background: var(--warning-soft); padding: 8px 12px; border-radius: var(--r-md); }
.pl-controls { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 8px; }
.pl-controls-2 { grid-template-columns: 1fr 1fr; }
.pl-controls .btn { min-height: 52px; font-size: var(--fs-md); }
.pl-foot { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); color: var(--text-3); }
.pl-foot strong { color: var(--text); font-variant-numeric: tabular-nums; }
.pl-next { font-size: var(--fs-sm); color: var(--text-2); display: flex; align-items: center; gap: 8px; justify-content: center; border-top: 1px solid var(--border); padding-top: 12px; }
.pl-next strong { color: var(--text); }
.pl-next-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; max-width: 420px; display: flex; flex-direction: column; gap: 6px; }
.pl-next-lab { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); font-weight: 600; }
.pl-next-name { font-size: var(--fs-md); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
/* Ligne de temps : un segment = un bloc, largeur proportionnelle à sa
durée, cliquable pour sauter directement au bloc voulu. */
.pl-timeline { display: flex; gap: 2px; height: 14px; }
.pl-tl-seg { position: relative; min-width: 4px; padding: 0; border: none; border-radius: 3px; background: var(--surface-3); overflow: hidden; cursor: pointer; opacity: 0.55; transition: opacity 0.2s, transform 0.2s; }
.pl-tl-seg > i { display: block; height: 100%; width: 0; background: var(--seg, var(--text-2)); }
.pl-tl-seg.is-warm { --seg: var(--zone-2); }
.pl-tl-seg.is-work { --seg: var(--zone-4); }
.pl-tl-seg.is-rest { --seg: var(--zone-1); }
.pl-tl-seg.is-steady { --seg: var(--zone-3); }
.pl-tl-seg.is-cool { --seg: var(--zone-1); }
.pl-tl-seg.done { opacity: 0.85; }
.pl-tl-seg.now { opacity: 1; transform: scaleY(1.45); }
.pl-kind-warm { --seg: var(--zone-2); }
.pl-kind-work { --seg: var(--zone-4); }
.pl-kind-rest, .pl-kind-cool { --seg: var(--zone-1); }
.pl-kind-steady { --seg: var(--zone-3); }
/* Les classes ci-dessus sont le repli : un bloc qui annonce une zone
reçoit sa couleur en ligne (`--seg`, cf. segColor dans js/player.js,
recap.js et designer.js) — la palette des zones du Guide. */
.pl-kind-work .pl-step-left { color: var(--seg, var(--zone-4)); }
.pl-kind-rest .pl-step-left, .pl-kind-cool .pl-step-left { color: var(--text-2); }
/* Bandeau GPS : trois chiffres lisibles d'un coup d'œil, en course.
L'allure se colore quand elle sort de la cible du bloc. */
/* Quatre chiffres, deux par ligne sur téléphone : à 375 px, quatre
colonnes couperaient « En mouvement » en deux. */
/* Le nombre de tuiles varie : quatre d'ordinaire, cinq quand la cadence
est mesurée (cf. js/cadence.js). `auto-fit` évite d'avoir à compter. */
.pl-gps { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; text-align: center; }
@media (max-width: 520px) { .pl-gps { grid-template-columns: repeat(2, 1fr); gap: 10px 8px; } }
/* État détecté (arrêt, marche) — discret, sous les chiffres. */
.pl-phase {
display: flex; align-items: center; justify-content: center; gap: 7px;
margin-top: 8px; padding: 6px 12px; border-radius: var(--r-sm);
font-size: var(--fs-xs); font-weight: 600;
background: color-mix(in srgb, var(--warning) 12%, transparent);
color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}
.pl-phase.is-walk { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
/* Angle mort : l'app est passée en arrière-plan et le relevé s'est tu (cf.
BLIND_MIN dans js/gps.js). Plus grave qu'un arrêt détecté — là, de la
donnée manque VRAIMENT — d'où la teinte d'alerte. La phrase nomme une
cause et une conséquence : elle a le droit de tenir sur deux lignes,
et `align-items: flex-start` garde alors l'icône en tête de texte au
lieu de la centrer sur la hauteur du bloc. */
.pl-phase.is-blind {
background: color-mix(in srgb, var(--danger) 12%, transparent);
color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent);
align-items: flex-start; text-align: left; line-height: 1.35; font-weight: 500;
}
.pl-phase.is-blind svg { flex: none; margin-top: 2px; }
.pl-phase svg { width: 14px; height: 14px; }
.pl-gps > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 6px; display: flex; flex-direction: column; gap: 2px; }
.pl-gps-lab { font-size: var(--fs-xs); color: var(--text-3); }
.pl-gps-val { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-gps-pace.is-ok { color: var(--success); }
.pl-gps-pace.is-fast { color: var(--warning); }
.pl-gps-pace.is-slow { color: var(--accent); }
/* Choix de l'accompagnement, sur l'écran de préparation */
.pl-mode { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 420px; }
.pl-mode-lab { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.pl-mode-seg { margin-bottom: 0; width: 100%; }
.pl-mode-seg .segmented-btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }
.pl-mode-hint { margin: 0; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.5; text-align: center; min-height: 2.6em; }
/* Choix de la voix : discret, mais à portée de pouce — c'est ce qui décide
qu'on entend un coach plutôt qu'un synthétiseur. */
.pl-voice-box { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pl-voice { display: flex; align-items: center; gap: 8px; width: 100%; font-size: var(--fs-xs); color: var(--text-3); }
.pl-voice > span { flex: none; width: 46px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.pl-voice > select { flex: 1 1 auto; min-width: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px; font-size: var(--fs-xs); font-family: inherit; }
.pl-rate-seg { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.pl-rate-seg .segmented-btn { flex: 1 1 0; min-width: 0; padding: 5px 4px; font-size: var(--fs-xs); }
/* Voix mécanique : le dire ne suffit pas, il faut donner la sortie — la
marche à suivre de l'appareil, comme pour un refus de localisation. */
.pl-voice-hint { width: 100%; margin: 0; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.5; text-align: left; background: var(--accent-soft); border-radius: var(--r-sm); padding: 8px 10px; }
.pl-voice-hint strong { color: var(--text); }
.pl-voice-help { width: 100%; font-size: var(--fs-xs); background: var(--warning-soft); border-radius: var(--r-sm); padding: 8px 10px; text-align: left; }
.pl-voice-help > summary { cursor: pointer; color: var(--warning); font-weight: 600; list-style: none; display: flex; align-items: center; gap: 6px; }
.pl-voice-help > summary::-webkit-details-marker { display: none; }
.pl-voice-help p { margin: 8px 0 0; color: var(--text-2); line-height: 1.5; }
.pl-voice-help ol { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); line-height: 1.5; }
.pl-voice-help li + li { margin-top: 6px; }
/* Aide GPS : le message d'erreur porte toujours de quoi agir — la marche à
suivre de l'appareil et un bouton pour relancer une fois le réglage changé. */
.pl-gps-help { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; }
.pl-gps-msg { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.pl-gps-steps { width: 100%; font-size: var(--fs-sm); }
.pl-gps-steps > summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
.pl-gps-steps > summary::-webkit-details-marker { display: none; }
.pl-gps-steps ol { margin: 8px 0 0; padding-left: 20px; text-align: left; color: var(--text-2); line-height: 1.5; }
.pl-gps-steps li + li { margin-top: 6px; }
/* Splits : les derniers kilomètres annoncés restent affichés, du plus
ancien au plus récent, pour l'athlète qui jette un œil à l'écran. */
.pl-splits { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pl-split { display: inline-flex; align-items: baseline; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: var(--fs-xs); color: var(--text-3); }
.pl-split > strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------
Carte du parcours (trace GPS) — fond de tuiles Esri, la même carte
claire dans les deux thèmes (cf. TILES dans js/map.js), tracé en SVG
par-dessus. Hors-ligne le fond ne charge pas, et le tracé seul reste
parfaitement lisible.
------------------------------------------------------------ */
.tmap-card { display: flex; flex-direction: column; gap: 8px; }
/* Conteneur Leaflet. `z-index: 0` n'est pas décoratif : il crée un contexte
d'empilement qui ENFERME les z-index de Leaflet (ses panneaux montent à
800, ses contrôles au-dessus). Sans lui, les boutons de zoom d'une carte
posée dans le journal passeraient par-dessus l'en-tête collant et les
feuilles plein écran. */
.trace-map { position: relative; z-index: 0; width: 100%; min-height: 140px; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.leaflet-container { background: var(--surface-2); font: inherit; outline: none; }
/* Vignette tactile : un appui ouvre le plein écran (cf. map.js). Le
curseur et le halo au survol disent que c'est cliquable. */
.trace-map.tmap-tap { cursor: zoom-in; }
.trace-map.tmap-tap .leaflet-container { cursor: zoom-in; }
/* Fond de carte : LA MÊME CARTE CLAIRE dans les deux thèmes (cf. BASES
dans js/map.js). Le filtre ne l'inverse pas — ça retournait les teintes
et virait les forêts au vert fluo — et ne l'assombrit pas : une carte
assombrie est une carte moins lisible, ce qu'on cherche justement à
éviter. Il désature juste assez pour qu'aucune route ne vienne
rivaliser avec le bleu du tracé.
EN THÈME SOMBRE, on ne change donc pas la carte : on lui retire son
ÉCLAT. `brightness` reste à 1 — baisser la luminosité rabattrait les
gris de la carte les uns sur les autres — et c'est un voile posé
par-dessus (cf. .trace-map::after) qui calme le rectangle blanc au
milieu d'une page sombre, sans rien retirer au contraste dessous.
Le filtre porte sur les TUILES seules : appliqué au conteneur, il
emporterait aussi le tracé, les repères et les info-bulles. */
.leaflet-tile { filter: saturate(0.85) contrast(1.04); }
/* Le voile de thème sombre. `pointer-events: none` n'est pas négociable :
il est posé au-dessus des tuiles, il ne doit intercepter ni le geste de
déplacement, ni le clic sur un bloc du tracé. Il se range sous les
panneaux Leaflet (z-index 400+) : ni le tracé, ni les repères, ni les
contrôles ne passent dessous. */
:root:not([data-theme="light"]) .trace-map::after {
content: "";
position: absolute;
inset: 0;
z-index: 350;
pointer-events: none;
background: color-mix(in srgb, var(--bg) 16%, transparent);
}
/* Contrôles et attribution au thème de l'app — le blanc par défaut de
Leaflet jure avec tout le reste. */
.leaflet-bar a, .leaflet-bar a:hover {
background: var(--surface-2); color: var(--text); border-bottom-color: var(--border);
}
.leaflet-bar a:hover { background: var(--surface-3); }
.leaflet-bar { border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.leaflet-control-attribution {
background: color-mix(in srgb, var(--bg) 78%, transparent) !important;
color: var(--text-3); font-size: 10px; padding: 1px 6px; border-radius: 4px 0 0 0;
}
.leaflet-control-attribution a { color: var(--text-3); }
/* Info-bulle du bloc mis en évidence.
ELLE N'AVAIT PAS DE FOND. Ces deux propriétés désignaient
`--surface-1` et `--text-1`, qui n'existent pas : les tokens
s'appellent `--surface` et `--text` (cf. styles.css et ui.css). Une
variable non définie rend la déclaration INVALIDE — pas « ignorée au
profit de celle d'avant », invalide — et la bulle se retrouvait sans
aucun fond, son texte posé à même la carte, illisible dès que le
tracé ou une rue passait dessous.
C'est le défaut typique d'un token fantôme : rien ne casse, rien ne
prévient, et le style manquant ne se voit que sur un fond chargé. Sept
autres déclarations de ce fichier étaient dans le même cas.
La flèche prend la couleur du FOND, pas de la bordure : c'est la
pointe de la bulle, elle en fait partie. */
.leaflet-tooltip.tmap-tip {
background: var(--surface); color: var(--text); border: 1px solid var(--border);
box-shadow: var(--shadow-md); border-radius: var(--r-sm); font-size: var(--fs-xs);
line-height: 1.35; padding: 5px 8px; text-align: center; white-space: nowrap;
}
.leaflet-tooltip.tmap-tip.leaflet-tooltip-top::before { border-top-color: var(--surface); }
.leaflet-tooltip.tmap-tip.leaflet-tooltip-bottom::before { border-bottom-color: var(--surface); }
.leaflet-tooltip.tmap-tip.leaflet-tooltip-left::before { border-left-color: var(--surface); }
.leaflet-tooltip.tmap-tip.leaflet-tooltip-right::before { border-right-color: var(--surface); }
/* Barre de blocs sous la carte plein écran : la même liste que le récap,
mais à portée de pouce pendant qu'on regarde la carte. Défilement
horizontal — sur un téléphone, huit blocs ne tiennent pas en largeur. */
.tmap-blocks { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.tmap-block {
flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
padding: 7px 11px; border-radius: var(--r-sm); border: 1px solid var(--border);
background: var(--surface-2); color: var(--text-2); cursor: pointer; text-align: left;
border-left-width: 3px; transition: background .15s, border-color .15s, color .15s;
}
.tmap-block:hover { background: var(--surface-3); color: var(--text); }
.tmap-block.is-work { border-left-color: var(--danger); }
.tmap-block.is-steady { border-left-color: var(--accent); }
.tmap-block.is-warm { border-left-color: var(--warning); }
.tmap-block.is-cool { border-left-color: var(--success); }
.tmap-block.is-rest { border-left-color: var(--text-3); }
.tmap-block-lab { font-weight: 600; font-size: var(--fs-xs); color: var(--text); }
.tmap-block-sub { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tmap-block.is-focused { background: var(--surface-3); border-color: var(--accent); color: var(--text); }
/* ------------------------------------------------------------
RÉPARTITION DE L'EFFORT — course / marche / arrêt
Une barre empilée plutôt que trois chiffres : la proportion se lit
avant même les durées, et c'est elle qui explique une séance.
------------------------------------------------------------ */
.eff-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-3); }
.eff-seg { display: block; height: 100%; }
.eff-seg.is-run { background: var(--accent); }
.eff-seg.is-walk { background: var(--warning); }
.eff-seg.is-stop { background: var(--text-3); opacity: 0.5; }
.eff-keys { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.eff-key { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-xs); }
.eff-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; align-self: center; }
.eff-dot.is-run { background: var(--accent); }
.eff-dot.is-walk { background: var(--warning); }
.eff-dot.is-stop { background: var(--text-3); opacity: 0.5; }
.eff-lab { color: var(--text-2); }
.eff-val { font-variant-numeric: tabular-nums; }
.eff-sub { color: var(--text-3); }
/* Allure de l’état : elle ne se lit qu’avec sa légende, d’où la puce
plutôt qu’une colonne — la ligne reste lisible quand la marche ou
l’arrêt n’en ont pas. */
.eff-pace {
font-variant-numeric: tabular-nums; color: var(--text);
background: var(--surface-3); border-radius: 999px; padding: 1px 7px;
font-size: calc(var(--fs-xs) - 1px);
}
/* Split : le temps arrêts déduits, en second rang sous le chrono */
.tmap-split-move { display: block; font-style: normal; font-size: 10px; font-weight: 500; color: var(--text-3); }
/* ------------------------------------------------------------
COURBE D'ALLURE (js/paceplot.js)
Le SVG s'étire en largeur (preserveAspectRatio="none") : les épaisseurs
de trait sont donc données en unités du repère interne, pas en pixels.
------------------------------------------------------------ */
.pp-wrap { display: flex; flex-direction: column; gap: 8px; }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; }
.pp-title svg { width: 15px; height: 15px; }
.pp-legend { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); }
.pp-key { width: 10px; height: 3px; border-radius: 2px; display: inline-block; margin-left: 6px; }
.pp-key.is-run { background: var(--accent); }
.pp-key.is-walk { background: var(--warning); }
.pp-key.is-stop { background: var(--text-3); opacity: 0.6; }
.pp-svg {
width: 100%; height: 220px; display: block;
background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
}
.pp-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pp-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pp-line.is-run { stroke: var(--accent); }
.pp-line.is-walk { stroke: var(--warning); }
.pp-stop { fill: var(--text-3); opacity: 0.45; }
.pp-ylab, .pp-xlab, .pp-unit { fill: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.pp-unit { font-size: 10px; }
.pp-band:hover .pp-band-top { opacity: 1; }
.pp-band.is-focused rect:first-child { opacity: 0.18; }
.pp-band.is-focused .pp-band-top { opacity: 1; }
/* Deux tuiles côte à côte sous la courbe (régularité, dérive) */
.rcp-tiles-2 { grid-template-columns: repeat(2, 1fr) !important; margin-top: 10px; }
/* ------------------------------------------------------------
ANCIENS ESPACES DE DONNÉES (Profil → Mes données)
Volontairement mis en avant : quelqu'un qui croit avoir tout perdu
doit tomber dessus, pas le chercher.
------------------------------------------------------------ */
.own-box {
margin: 14px 0; padding: 14px; border-radius: var(--r-md);
border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
background: color-mix(in srgb, var(--warning) 7%, transparent);
}
.own-box .card-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.own-box .card-title svg { width: 16px; height: 16px; color: var(--warning); }
.own-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.own-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 12px; border-radius: var(--r-sm);
background: var(--surface-2); border: 1px solid var(--border);
}
.own-icon { display: inline-flex; color: var(--text-3); flex: none; }
.own-icon svg { width: 18px; height: 18px; }
.own-id { flex: 1; min-width: 160px; }
.own-name { font-size: var(--fs-sm); font-weight: 600; }
.own-sub { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.own-done {
display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px;
font-size: var(--fs-xs); color: var(--success); line-height: 1.45;
}
.own-done svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.own-done-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--success); }
.own-done-chip svg { width: 13px; height: 13px; }
/* Splits du journal : une barre par kilomètre, la plus rapide en repère */
.tmap-splits { display: flex; flex-direction: column; gap: 4px; }
.tmap-splits-lab { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 2px; }
.tmap-split { display: grid; grid-template-columns: 52px 1fr 54px; align-items: center; gap: 10px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.tmap-split-n { color: var(--text-3); }
.tmap-split-t { text-align: right; font-weight: 600; }
.tmap-split-bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.tmap-split-bar > i { display: block; height: 100%; background: var(--accent); opacity: 0.8; }
.tmap-split.is-best .tmap-split-bar > i { background: var(--success); opacity: 1; }
.tmap-split.is-best .tmap-split-t { color: var(--success); }
/* ------------------------------------------------------------
Récap de séance — même coque plein écran que le mode séance, mais
pensée pour être LUE, pas regardée à bout de bras : on peut donc
redescendre en taille et empiler l'information.
------------------------------------------------------------ */
/* DÉTAIL D'ACTIVITÉ EN MODE FOCUS (cf. js/recap.js) : il occupe la zone
de contenu à la place de l'onglet courant, masqué mais pas repeint.
Menu de gauche, barre du haut et fil d'Ariane restent. Sa largeur est
celle de la zone de contenu : les colonnes se règlent donc sur ELLE
(requêtes de conteneur), pas sur l'écran — à 1440 px d'écran, le menu
en prend déjà 232. */
body.focus-open .container > .tab-content.active { display: none; }
.focus-view { container-type: inline-size; padding-bottom: 24px; }
.rcp-sheet { display: flex; flex-direction: column; gap: 18px; }
.focus-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 -8px; }
.focus-bar .sess-back { margin-left: -10px; }
.focus-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 0; }
.focus-head .page-title { min-width: 0; }
/* Trois à quatre chiffres en tête : ce qu'on veut savoir avant tout. */
.rcp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.rcp-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.rcp-tile-lab { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.rcp-tile-val { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rcp-tile-sub { font-size: var(--fs-xs); color: var(--text-3); }
/* Puissance estimée (js/power.js) : hypothèses du calcul, en une ligne. */
.pw-basis { margin: 8px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-3); }
.pw-basis .link-btn { font-size: inherit; }
.rcp-section { display: flex; flex-direction: column; gap: 10px; }
.rcp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--text-3); }
.rcp-section-head > span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.rcp-map { display: flex; flex-direction: column; gap: 8px; }
/* Une ligne par bloc : nom et chiffres réels à gauche, réalisé face au
prévu à droite. Le rail coloré reprend la teinte du type de bloc, comme
la ligne de temps du mode séance. */
.rcp-rows { display: flex; flex-direction: column; }
.rcp-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.rcp-row:first-child { border-top: none; padding-top: 0; }
.rcp-rail { flex: none; width: 3px; align-self: stretch; min-height: 34px; border-radius: 2px; background: var(--seg, var(--text-3)); }
.rcp-row.is-warm { --seg: var(--zone-2); }
.rcp-row.is-work { --seg: var(--zone-4); }
.rcp-row.is-rest { --seg: var(--zone-1); }
.rcp-row.is-steady { --seg: var(--zone-3); }
.rcp-row.is-cool { --seg: var(--zone-1); }
/* Une ligne de bloc devient un