/* Revontulet — training-log app shell + screen layouts */
html, body.rv-app-html { height: 100%; background: var(--night-950); }
/* SPOR-748 : overflow:hidden est le comportement du SHELL dashboard (.rv-app,
height:100vh + zones de scroll internes). Les ecrans plein cadre SANS shell
— auth (.rv-login), onboarding (.rv-onboard), pages d'erreur brandees —
grandissent avec leurs alertes (etat erreur du register/login) et DOIVENT
pouvoir defiler, surtout en mobile ou la maquette passe en colonne unique.
Restreindre le clip aux pages qui portent reellement le shell. */
body.rv-app-html:has(.rv-app) { overflow: hidden; }
/* ---- Shell ---- */
.rv-app { display: flex; height: 100vh; background: var(--night-900); }
.rv-app__main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.rv-app__body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* ---- Sidebar ---- */
.rv-sidebar {
width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--night-950);
border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; padding: 20px 14px; gap: 6px;
min-height: 0; overflow-y: auto;
}
.rv-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.rv-sidebar__brand img { height: 34px; }
.rv-sidebar__brand span {
font-family: var(--font-display); font-weight: 700; letter-spacing: 0.12em; font-size: 15px; text-transform: uppercase;
background: var(--grad-aurora); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rv-sidebar__nav-item {
display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-md);
cursor: pointer; text-align: left; font-family: var(--font-sans); font-size: 14px; font-weight: 500;
background: transparent; color: var(--text-secondary); transition: background var(--dur-fast) var(--ease-out);
}
.rv-sidebar__nav-item .icon { color: currentColor; }
.rv-sidebar__nav-item.is-active {
background: var(--surface-hover); color: var(--text-primary); box-shadow: inset 3px 0 0 var(--aurora-green);
}
.rv-sidebar__nav-item.is-active .icon { color: var(--aurora-green); }
/* Sous-menu (epic Pain & Injuries, SPOR-379) : entree indentee sous un
nav-item parent (Health) — plus petite, pas de prise de couleur de
l'icone a l'etat actif (garde une hierarchie visuelle secondaire par
rapport a l'item parent juste au-dessus). */
.rv-sidebar__nav-item--sub {
padding: 8px 12px 8px 34px; font-size: 13px; gap: 9px; margin-top: -2px;
}
.rv-sidebar__nav-item--sub.is-active { box-shadow: inset 2px 0 0 var(--aurora-green); }
.rv-sidebar__nav-item--sub.is-active .icon { color: var(--text-secondary); }
/* Regroupement "Objectives" (SPOR-429) : label de groupe NON cliquable
au-dessus de Goals/Races/Yearly, indentes en .rv-sidebar__nav-item--sub
dessous — memes tokens typographiques que .rv-eyebrow (styles.css) plutot
qu'un nouveau vocabulaire, seul le padding s'aligne sur les nav-item de la
sidebar. N'existe pas dans la maquette statique (References/design), qui
n'a pas cette grouping — meme precedent que --sub ci-dessus (SPOR-379). */
.rv-sidebar__group-label {
display: block; padding: 14px 12px 2px; font-size: 11px; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--text-muted); font-weight: 600;
}
/* Tri par glisser-deposer (SPOR-431) : affordance visuelle minimale — toute
la carte/ligne se saisit (pas de poignee dediee), curseur "grab" au repos,
"grabbing" + opacite reduite pendant le glisser (voir initDragReorder(),
interactions.js). Attribut plutot que classe : n'affecte que les elements
explicitement marques data-drag-id (Yearly, /yearly + /dashboard). */
[data-drag-id] { cursor: grab; }
[data-drag-id].is-dragging { cursor: grabbing; opacity: 0.4; }
/* Separateur avant la section Admin : bande degradee (meme --grad-aurora que
.rv-card--accent-aurora::before), plutot qu'un
plat, pour marquer
visuellement la bascule vers les entrees reservees au role admin. */
.rv-sidebar__separator { margin: 6px 4px; }
.rv-sidebar__separator--aurora { height: 3px; border-radius: var(--radius-pill); background: var(--grad-aurora); }
/* Post-MVP marker (maquette only): roadmap V2.x entries, not part of the V1 build */
.rv-nav-tag {
margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 600;
padding: 2px 6px; border-radius: var(--radius-pill); letter-spacing: 0.06em;
background: var(--night-800); color: var(--text-muted); border: 1px solid var(--border-subtle);
}
/* Pastille Gear (SPOR-176) : repartition du materiel actif par categorie,
memes couleurs que rv-badge--{sport} (components.css) pour swim/bike/run ;
"others" (golf/ppg/yoga/cardio/triathlon) reste neutre, aucune couleur
unique ne le representerait fidelement. */
.rv-nav-gearcounts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rv-nav-gearcount {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
background: var(--rv-gearcount-tint); color: var(--rv-gearcount-color);
border: 1px solid var(--rv-gearcount-color);
}
.rv-nav-gearcount--swim { --rv-gearcount-color: var(--sport-swim); --rv-gearcount-tint: var(--sport-swim-tint); }
.rv-nav-gearcount--bike { --rv-gearcount-color: var(--sport-bike); --rv-gearcount-tint: var(--sport-bike-tint); }
.rv-nav-gearcount--run { --rv-gearcount-color: var(--sport-run); --rv-gearcount-tint: var(--sport-run-tint); }
.rv-nav-gearcount--others { --rv-gearcount-color: var(--text-muted); --rv-gearcount-tint: var(--night-800); }
/* Pastille Records (SPOR-196) : meme mecanisme visuel que la pastille Gear
ci-dessus, mais toujours exactement 2 nombres (annee courante, puis
absolu) — memes couleurs que les icones medal/trophy de /records. */
.rv-nav-recordcounts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rv-nav-recordcount {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
background: var(--rv-gearcount-tint); color: var(--rv-gearcount-color);
border: 1px solid var(--rv-gearcount-color);
}
.rv-nav-recordcount--year { --rv-gearcount-color: var(--text-muted); --rv-gearcount-tint: var(--night-800); }
.rv-nav-recordcount--absolute { --rv-gearcount-color: var(--fox-400); --rv-gearcount-tint: rgba(251,146,60,0.16); }
/* Pastille Badges (demande explicite de l'utilisateur) : meme mecanisme
visuel, un seul nombre (badges gagnes, pas de notion d'annee) — meme
couleur que l'icone "star" gagnee sur /badges. */
.rv-nav-badgecounts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rv-nav-badgecount {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
background: rgba(61,220,132,0.16); color: var(--aurora-green);
border: 1px solid var(--aurora-green);
}
/* Pastille Goals (demande explicite de l'utilisateur) : meme mecanisme
visuel que Badges, meme couleur aurora-green (Volume/Performance restent
la famille "objectifs" par defaut, Races a sa propre couleur fox). */
.rv-nav-goalscounts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rv-nav-goalscount {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
background: rgba(61,220,132,0.16); color: var(--aurora-green);
border: 1px solid var(--aurora-green);
}
/* Pastille Races (SPOR-247, demande explicite de l'utilisateur) : meme
mecanisme visuel que Badges, couleur fox (meme famille que l'icone
"medal") pour la distinguer du vert Badges/Volume. */
.rv-nav-racecounts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rv-nav-racecount {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
background: rgba(251,146,60,0.16); color: var(--fox-400);
border: 1px solid var(--fox-400);
}
/* Pastille Yearly (SPOR-427/SPOR-429) : meme mecanisme visuel, couleur cyan
(distincte du vert Goals/orange Races) pour la 3e entree du groupe Objectives. */
.rv-nav-yearlycounts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rv-nav-yearlycount {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
background: rgba(56,189,248,0.16); color: var(--aurora-cyan);
border: 1px solid var(--aurora-cyan);
}
/* Pastille Events (epic SPOR-565) : meme mecanisme visuel que Yearly, couleur
violet (distincte du vert Goals/Badges, orange Races, cyan Yearly) pour
cette entree top-level (hors groupe Objectives). */
.rv-nav-eventscounts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rv-nav-eventscount {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
background: rgba(166,107,240,0.16); color: var(--aurora-violet);
border: 1px solid var(--aurora-violet);
}
/* Pastille Alerts (epic SPOR-228) : meme mecanisme visuel, mais couleur
--status-danger (au lieu du vert des autres pastilles) — signale une
alerte non lue, contrairement aux autres pastilles qui sont juste des
compteurs neutres. Masquee entierement si 0 (voir app_sidebar.php). */
.rv-nav-alertcounts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rv-nav-alertcount {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
background: rgba(240,97,127,0.16); color: var(--status-danger);
border: 1px solid var(--status-danger);
}
/* Pastille Health (SPOR-341, demande explicite de l'utilisateur) : meme
mecanisme visuel et meme couleur --status-danger que la pastille Alerts
ci-dessus — signale une blessure en cours (resolved_at IS NULL), pas un
compteur neutre. Masquee entierement si 0 (voir app_sidebar.php). */
.rv-nav-injurycounts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rv-nav-injurycount {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
background: rgba(240,97,127,0.16); color: var(--status-danger);
border: 1px solid var(--status-danger);
}
/* SPOR-697 : petit cadenas juste apres le libelle d'une entree santé quand le
floutage de confidentialite est actif. Colle au texte (compense le gap flex
de .rv-sidebar__nav-item--sub), ne pousse rien a droite (contrairement aux
pastilles de comptage ci-dessus). */
.rv-nav-lock { margin-left: -5px; color: var(--text-muted); }
.rv-sidebar__notice-title { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--aurora-green); font-weight: 600; }
.rv-sidebar__notice p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
/* Version deployee en pied de sidebar (SPOR-642) : ajout projet, pas une
classe de la maquette — meme precedent que .rv-sidebar__group-label
(SPOR-429). .rv-sidebar__notice porte deja margin-top:auto, cette ligne
se cale donc juste sous l'encart, tout en bas. */
.rv-sidebar__version { padding: 8px 12px 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
/* Lien vers les notes de version (SPOR-644) : discret, se revele au survol. */
.rv-sidebar__version a { color: inherit; text-decoration: none; }
.rv-sidebar__version a:hover { color: var(--text-secondary); text-decoration: underline; }
/* Bouton "Deconnexion" en pied de navigation (SPOR-747, demande explicite de
l'utilisateur) : place juste apres "Reglages", detache des .rv-sidebar__nav-item
(vrai bouton, pas un lien de navigation). Ajout projet, absent de la maquette
statique — meme precedent que .rv-sidebar__group-label (SPOR-429). Reprend le
gabarit d'un nav-item (largeur pleine, alignement a gauche, meme padding) mais
en teinte --status-danger pour signaler une action qui sort de l'app. */
.rv-sidebar__logout {
width: 100%; justify-content: flex-start; gap: 11px; height: auto;
padding: 10px 12px; margin-top: 2px; font-size: 14px; font-weight: 500;
color: var(--status-danger);
}
.rv-sidebar__logout .icon { color: currentColor; }
.rv-sidebar__logout:hover:not(:disabled) { background: rgba(240,97,127,0.12); }
@media (max-width: 900px) {
.rv-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out); box-shadow: var(--shadow-pop); }
.rv-app.is-nav-open .rv-sidebar { transform: translateX(0); }
.rv-app__scrim { display: none; position: fixed; inset: 0; background: rgba(5,7,11,0.6); z-index: 39; }
.rv-app.is-nav-open .rv-app__scrim { display: block; }
}
/* ---- Top bar ---- */
.rv-topbar {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 16px 26px; border-bottom: 1px solid var(--border-subtle); background: var(--night-900);
}
.rv-topbar h1 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.rv-topbar__actions { display: flex; align-items: center; gap: 14px; }
.rv-topbar__search { width: 220px; }
.rv-topbar__avatar {
width: 38px; height: 38px; border-radius: 50%; background: var(--grad-fox); display: flex; align-items: center;
justify-content: center; color: var(--night-950); font-weight: 700; font-family: var(--font-display); font-size: 14px; flex: 0 0 auto;
transition: box-shadow var(--dur-fast) var(--ease-out);
}
a.rv-topbar__avatar:hover { box-shadow: 0 0 0 2px var(--night-900), 0 0 0 4px var(--fox-400); }
.rv-topbar__menu-btn { display: none; }
@media (max-width: 900px) {
.rv-topbar__menu-btn { display: flex; }
.rv-topbar__search { display: none; }
}
@media (max-width: 640px) {
.rv-topbar { padding: 14px 16px; }
.rv-topbar h1 { font-size: 18px; }
.rv-topbar__actions { gap: 8px; }
.rv-topbar__actions .rv-btn span:last-child { display: none; }
}
/* ---- Screen ---- */
.rv-screen { padding: 26px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; height: 100%; }
.rv-screen--tight { gap: 18px; }
/* Direct children (e.g. cards with overflow:hidden) must not be flex-shrunk below
content size — overflow != visible makes min-height:auto resolve to 0, so a
height-constrained scrollable column would otherwise crush them. */
.rv-screen > * { flex-shrink: 0; }
@media (max-width: 640px) { .rv-screen { padding: 18px; } }
.rv-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.rv-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 4px; gap: 4px 12px; }
.rv-section-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
/* SPOR-936 (épic Alimentation SPOR-932) : `svg { display: block }` (reset
base.css) n'est jamais contré pour une icône DANS un h3 de section-head
(patron déjà utilisé par records.php/badges.php/trends.php) — l'icône
tombait sur sa propre ligne, au-dessus du libellé, au lieu de s'aligner
avec lui. */
.rv-section-head h3 .icon { display: inline-flex; vertical-align: -3px; margin-right: 2px; }
/* ---- Grids ---- */
.rv-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.rv-grid-2--wide { grid-template-columns: 1.5fr 1fr; }
.rv-grid-2--even { grid-template-columns: 1fr 1fr; }
.rv-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.rv-grid-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rv-cards-flow { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.rv-cards-flow--sm { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.rv-stack { display: flex; flex-direction: column; gap: 12px; }
.rv-week-metrics { display: flex; gap: 40px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 900px) {
.rv-grid-2, .rv-grid-2--wide, .rv-grid-2--even, .rv-grid-3, .rv-grid-metrics { grid-template-columns: 1fr; }
}
/* ---- Cartes « bilan de semaine » (SPOR-668) : « Semaine en un coup d'oeil »
(courante) et « La semaine passee » (reference), cote a cote (rv-grid-2--even),
MEME balisage (templates/partials/week_review_card.php). Une ligne par sport
puis par mesure physio, colonnes fixes pour que tous les sparklines des deux
cartes s'alignent : badge/label | metriques | delta | sparkline. ---- */
.rv-week-review__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 10px; }
.rv-week-review__head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.rv-week-review__totals {
margin-left: auto; font-family: var(--font-mono); font-size: 11px;
color: var(--text-muted); white-space: nowrap;
}
.rv-week-review__empty { margin: 0; font-size: 12px; color: var(--text-muted); }
/* Barre d'avancement de la semaine : reprend rv-dashboard-objective-row (label
| barre dégradée | %) mais resserrée (label = juste « S36 »). */
.rv-week-review__progress { margin-top: 0; margin-bottom: 12px; gap: 10px; }
.rv-week-review__progress .rv-dashboard-objective-row__label { flex: 0 0 auto; max-width: none; font-size: 12px; color: var(--text-muted); }
.rv-week-review__progress .rv-dashboard-objective-row__percent { flex: 0 0 40px; font-size: 11px; }
.rv-week-review__rows { display: flex; flex-direction: column; gap: 6px; }
.rv-week-review__row {
display: grid; grid-template-columns: 90px minmax(0, 1fr) 46px 96px;
align-items: center; gap: 8px; font-size: 11.5px;
}
/* SPOR-741 : variante « large » — sur /trends/{période} la carte occupe
toute la largeur (pas 2-up comme au dashboard), la sparkline peut donc
s'étaler. Colonne sparkline élastique + un peu plus haute. */
.rv-week-review--wide .rv-week-review__row { grid-template-columns: 100px minmax(160px, 1fr) 56px minmax(220px, 1.6fr); }
.rv-week-review--wide .rv-week-review__spark { height: 30px; }
.rv-week-review__metrics {
font-family: var(--font-mono); color: var(--text-secondary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv-week-review__physio-label {
color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv-week-review__delta {
font-family: var(--font-mono); font-weight: 600; text-align: right; white-space: nowrap;
}
/* Conteneur de sparkline : hauteur FIXE + canvas hors flux (position:absolute)
— sinon Chart.js (responsive, maintainAspectRatio:false) fait grandir le
canvas sans limite dans une cellule de grille. */
.rv-week-review__spark { position: relative; display: block; height: 24px; overflow: hidden; }
.rv-week-review__spark canvas.rv-sparkline { position: absolute; inset: 0; }
.rv-week-review__total {
font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
border-top: 1px solid var(--border-subtle); padding-top: 6px; margin-top: 2px;
}
/* SPOR-807 : ligne « blessure active » = icone + texte sur la MEME ligne.
Le contient un