/* Revontulet — training-log app shell + screen layouts */

html, body.rv-app-html { height: 100%; background: var(--night-950); }
body.rv-app-html { 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 <hr/> 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);
}
.rv-sidebar__notice {
  margin-top: auto; padding: 12px; border-radius: var(--radius-md); background: var(--night-850); border: 1px solid var(--border-subtle);
}
.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); }

@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); }

/* ---- 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-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-3, .rv-grid-metrics { grid-template-columns: 1fr; }
}

/* ---- Login ---- */
.rv-login { height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.rv-login__brand { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 44px; }
.rv-login__brand .rv-aurora__content { display: flex; flex-direction: column; justify-content: space-between; }
.rv-login__headline { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1.08; color: var(--frost-50); letter-spacing: -0.02em; max-width: 380px; }
.rv-login__headline .grad { background: var(--grad-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-login__sub { margin-top: 16px; font-size: 14px; color: var(--frost-200); max-width: 360px; line-height: 1.6; }
.rv-login__meta { font-family: var(--font-mono); font-size: 11px; color: var(--frost-300); }
.rv-login__form-side { background: var(--night-900); display: flex; align-items: center; justify-content: center; padding: 40px; }
.rv-login__form { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 18px; }
.rv-login__form h2 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--text-primary); }
.rv-login__form p { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.rv-login__links { display: flex; justify-content: space-between; font-size: 12.5px; }
.rv-login__links a:first-child { color: var(--link); }
.rv-login__links a:last-child { color: var(--text-muted); }
/* Un seul lien (ex: "Retour a la connexion" des ecrans 2FA) : les deux regles
   ci-dessus matchent toutes les deux (:first-child ET :last-child), la
   derniere l'emportant a specificite egale — sans cette regle, un lien seul
   heritait silencieusement de la couleur estompee de :last-child (SPOR-584,
   retour utilisateur : lien "Retour a la connexion"/"Annuler" invisible). */
.rv-login__links a:only-child { color: var(--link); }

/* Step panels toggled by interactions.js (display:'' restores the class value) */
.rv-step-col { display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 800px) {
  .rv-login { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .rv-login__brand { padding: 32px 24px; min-height: 260px; }
  .rv-login__headline { font-size: 30px; }
}

/* ---- Modal ---- */
.rv-modal-overlay {
  position: absolute; inset: 0; background: rgba(7,8,9,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 20; padding: 20px;
}
.rv-modal-overlay.is-open { display: flex; }
.rv-modal {
  /* +15% (demande explicite de l'utilisateur, addendum SPOR-503) : 480px -> 552px. */
  width: 552px; max-width: 100%; background: var(--surface-raised); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden;
}
.rv-modal--lg { width: 874px; } /* +15% (SPOR-503) : 760px -> 874px. */
/* Caps tall forms to the viewport instead of letting them push past it — body scrolls, head/footer don't. */
.rv-modal--scroll { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.rv-modal--scroll .rv-modal__body { overflow-y: auto; }

/* Two-column edit layout: activity data left, added/computed data right. */
.rv-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 720px) { .rv-edit-grid { grid-template-columns: 1fr; } }
.rv-modal__head { padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; }
.rv-modal__title-row { display: flex; align-items: center; gap: 12px; }
.rv-modal__head h3 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-primary); }
.rv-modal__step { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.rv-modal__close { background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; }
.rv-modal__body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.rv-modal__dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); padding: 30px 20px; text-align: center; cursor: pointer;
}
.rv-modal__dropzone .icon { margin: 0 auto 8px; }
.rv-modal__dropzone-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.rv-modal__dropzone-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.rv-modal__file-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--night-850);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary);
}
.rv-modal__file-row .status { margin-left: auto; color: var(--aurora-green); font-size: 11px; }
.rv-modal__detect { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted); }
.rv-modal__metrics { display: flex; gap: 26px; flex-wrap: wrap; }
.rv-modal__actions { display: flex; gap: 10px; justify-content: flex-end; }
.rv-modal__actions--split { justify-content: space-between; }
.rv-modal__actions-group { display: flex; gap: 10px; }

/* ---- Toast ---- */
.rv-toast { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 30; min-width: 300px; display: none; }
.rv-toast.is-open { display: block; }

/* ---- Sessions filter ---- */
.rv-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Goal card ---- */
.rv-goal-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rv-goal-card__due { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-left: auto; }
.rv-goal-card h3 { margin: 0 0 16px; font-family: var(--font-display); font-size: 16.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.rv-goal-card__figures { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); }
.rv-goal-card__current { font-size: 26px; font-weight: 600; color: var(--text-primary); }
/* Records (SPOR-190) : deux lignes de record (absolu + annee) dans une meme
   carte — la seconde ligne reprend .rv-goal-card__current (meme famille de
   police/poids) mais plus petite, pour rester secondaire au record absolu
   sans paraitre comme une simple cible de seuil (.rv-goal-card__target). */
.rv-goal-card__current--sm { font-size: 16px; }
.rv-goal-card__target { font-size: 13px; color: var(--text-muted); }
.rv-goal-card__bar { position: relative; margin-top: 14px; height: 6px; border-radius: 3px; background: var(--night-600); overflow: hidden; }
.rv-goal-card__bar-fill { height: 100%; background: var(--grad-aurora); border-radius: 3px; display: block; }
/* Repere de prevision (SPOR-435, addendum SPOR-434) : trait fin positionne
   au pourcentage attendu ("pacePercent") sur la piste — comparer visuellement
   le remplissage reel (rv-goal-card__bar-fill) au repere donne d'un coup
   d'oeil si l'objectif est en avance (fill au-dela du trait) ou en retard
   (fill en-deca). `position: relative` ci-dessus sert d'ancre a ce repere
   sur TOUTES les barres de l'app (Goals/Races/Records/Year progress
   compris) — sans effet visuel pour elles, aucune n'a de marqueur enfant. */
.rv-goal-card__bar-marker {
  position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.75);
  transform: translateX(-1px); z-index: 1;
}
.rv-goal-card__progress { margin-top: 8px; font-size: 11.5px; font-family: var(--font-mono); color: var(--aurora-green); }

/* Ruban de statut d'inscription d'une course (SPOR-544, demande explicite
   de l'utilisateur) : bande diagonale dans le coin superieur droit de la
   card, clippee par le `overflow: hidden` deja present sur .rv-card (voir
   plus haut dans ce fichier) — aucun nouvel element de layout, juste une
   bande pivotee positionnee hors-flux. Meme convention de contraste que
   .rv-chip.is-active/.rv-btn--danger (fond sature + texte --night-950,
   pas de blanc) plutot qu'introduire un nouveau couple couleur/texte. */
.rv-corner-ribbon {
  position: absolute; top: 14px; right: -34px; width: 130px;
  transform: rotate(45deg); text-align: center; padding: 3px 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--night-950); box-shadow: var(--shadow-sm); pointer-events: none;
}
.rv-corner-ribbon--planned, .rv-corner-ribbon--finished { background: var(--status-success); }
.rv-corner-ribbon--considering, .rv-corner-ribbon--ongoing { background: var(--status-info); }
.rv-corner-ribbon--missed { background: var(--status-warn); }

/* Dashboard : panneau fusionne Year progress + Yearly objectives (demande
   explicite de l'utilisateur — meilleure comparaison des barres). Une
   colonne "label" LARGEUR FIXE (badge sport optionnel + texte, tronque en
   "…" au-dela) devant chaque barre : sans ca, une barre de progression
   demarre a une position differente selon la longueur du libelle qui la
   precede, rendant leurs longueurs impossibles a comparer d'un coup d'oeil
   — largeur fixe -> toutes les barres demarrent et se terminent au meme x. */
.rv-dashboard-objective-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.rv-dashboard-objective-row__label {
  flex: 0 0 190px; max-width: 190px; display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-primary);
}
/* Seul le texte (dernier enfant : libelle de l'objectif, ou l'annee pour la
   ligne Year) se tronque — le badge sport (s'il y en a un) garde sa taille
   naturelle, jamais compresse ni tronque. */
.rv-dashboard-objective-row__label > span:last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-dashboard-objective-row__label > .rv-badge { flex: 0 0 auto; }
.rv-dashboard-objective-row__bar { flex: 1; min-width: 80px; margin-top: 0; }
/* Largeur (56px, pas 40px) prevoit la fleche avance/retard ▲/▼ prependue
   au pourcentage des lignes d'objectif (SPOR-434) — couleur recolorable
   inline par la vue (vert = ahead, orange = behind) au lieu du vert fixe
   ci-dessous, qui reste la valeur par defaut (ligne Year, sans fleche). */
.rv-dashboard-objective-row__percent {
  flex: 0 0 56px; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--aurora-green);
}

/* ---- Age category timeline (SPOR-303, Settings > Administrative) ----
   Same track sizing/rounding language as .rv-goal-card__bar above (a
   deterministic position marker, not a data series — no Chart.js, see
   TECHNICAL.md), but segmented into one block per age band instead of a
   single fill, plus a cursor marking the athlete's current age. Bands/
   cursor are positioned with inline left/width percentages computed by
   Http\Settings\AgeCategoryPresenter — this file only styles the shapes. */
/* Bug repere en verification utilisateur : le track etait en --night-700,
   EXACTEMENT la couleur de fond de .rv-card (--surface-card), donc
   invisible — seule la bande "current" (degrade) aurait du se voir, sur a
   peine 10% de la largeur d'une barre de 10px de haut, trop discrete pour
   etre remarquee. Track fonce (--night-850, en retrait sous la carte),
   bandes nettement plus claires (--night-500, "flottent" au-dessus du
   groove) separees par un liseret qui reprend la couleur du track — 3
   niveaux de contraste distincts au lieu d'un seul ecart d'une nuance. */
.rv-age-timeline { position: relative; height: 10px; border-radius: 5px; background: var(--night-850); margin: 18px 0 10px; }
.rv-age-timeline__band { position: absolute; top: 0; bottom: 0; background: var(--night-500); border-right: 2px solid var(--night-850); }
.rv-age-timeline__band:last-child { border-right: none; }
.rv-age-timeline__band--current { background: var(--grad-aurora); }
.rv-age-timeline__cursor { position: absolute; top: -5px; width: 3px; height: 20px; margin-left: -1.5px; border-radius: 2px; background: var(--text-primary); box-shadow: 0 0 0 1px var(--night-900); }

/* ---- Records progression charts (SPOR-194, Chart.js) ----
   Chart.js (responsive:true/maintainAspectRatio:false) sizes the canvas
   from its PARENT's rendered size — the parent must have a fixed,
   definite height. Setting a height on the canvas itself (as CSS or an
   inline style) instead of the wrapper creates a resize feedback loop
   where the canvas and its auto-sized parent keep growing each other
   ("infinite height" bug) — never set width/height on canvas elements
   here, only on their wrapper. */
.rv-sparkline-btn { display: block; position: relative; width: 100%; height: 40px; margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; }
.rv-sparkline { width: 100% !important; height: 100% !important; }
.rv-progression-chart-wrap { position: relative; width: 100%; height: 220px; }
.rv-progression-chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* ---- Gear photo (SPOR-178) ---- */
.rv-gear-photo { width: 64px; height: 64px; border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--border-subtle); flex-shrink: 0; }
.rv-gear-photo--sm { width: 36px; height: 36px; }

/* ---- Gear row (SPOR-188) : une ligne de la liste materiel du detail de seance ---- */
.rv-gear-row {
  display: flex; align-items: center; gap: 12px; padding: 6px 8px; margin: -6px -8px;
  border-radius: var(--radius-md); text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.rv-gear-row:hover { background: var(--surface-hover); }

/* ---- Session media (SPOR-295) : galerie photo/video/fichier en fin de page de detail ---- */
.rv-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 256px)); gap: 12px; }
.rv-media-item {
  display: flex; flex-direction: column; max-width: 256px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden; background: var(--night-850);
}
/* Plafond 256x256 (decision utilisateur) : object-fit: cover recadre plutot que deformer/depasser. */
.rv-media-item__preview { width: 100%; max-width: 256px; height: 256px; object-fit: cover; display: block; background: #000; }
.rv-media-item__file {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 256px; padding: 12px; text-decoration: none; color: inherit;
}
.rv-media-item__filename { font-size: 12px; color: var(--text-secondary); text-align: center; word-break: break-all; }
.rv-media-item__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px;
  border-top: 1px solid var(--border-subtle);
}
.rv-media-item__action {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; font-size: 12px; font-weight: 500;
  color: var(--text-secondary); border-radius: var(--radius-sm); background: transparent; border: none;
  text-decoration: none; cursor: pointer; line-height: 1;
}
.rv-media-item__action:hover { background: var(--surface-hover); color: var(--text-primary); }
.rv-media-item__action--danger { color: var(--status-danger); }
.rv-media-item__action--danger:hover { background: rgba(240,97,127,0.16); color: var(--status-danger); }

/* Vignette photo cliquable (agrandissement en modale, addendum SPOR-295) —
   videos/fichiers gardent leur interaction native (lecteur/telechargement),
   pas de loupe sur ces types-la. */
img.rv-media-item__preview[data-lightbox-src] { cursor: zoom-in; }
img.rv-media-item__preview[data-lightbox-src]:hover { opacity: 0.9; }
.rv-modal--lightbox { width: auto; max-width: 92vw; }
.rv-modal--lightbox .rv-modal__body { padding: 0; }
.rv-modal--lightbox .rv-modal__body img { display: block; max-width: 92vw; max-height: 78vh; object-fit: contain; background: #000; }

/* ---- Record card ---- */
.rv-record-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rv-record-card__head span.label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); }
.rv-record-card__value { font-family: var(--font-mono); font-size: 30px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; }
.rv-record-card__value--muted { color: var(--night-400); }
.rv-record-card__meta { margin-top: 8px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.rv-record-card__meta .date { font-family: var(--font-mono); color: var(--text-secondary); }

/* ---- Tab panels (settings.php, session_detail.php) : les .rv-card empiles
   dans un panneau n'ont pas de marge propre, donc sans ce gap ils se
   touchent — voir data-tabs/data-tab-panel dans interactions.js. */
[data-tab-panel] { display: flex; flex-direction: column; gap: 20px; }

/* ---- Settings ---- */
.rv-settings { max-width: 620px; display: flex; flex-direction: column; gap: 20px; }
.rv-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rv-settings-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); }
.rv-settings-row:last-child { border-bottom: none; }
.rv-settings-row__text { flex: 1; }
.rv-settings-row__title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.rv-settings-row__hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 560px) { .rv-settings-grid { grid-template-columns: 1fr; } }

/* ---- Session detail ---- */
.rv-back-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-family: var(--font-sans); font-size: 13px; padding: 0; align-self: flex-start; }
.rv-back-link:hover { color: var(--text-secondary); }
/* Navigation Previous/Next (SPOR-430) */
.rv-session-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rv-session-nav__adjacent { display: flex; align-items: center; gap: 18px; }
.rv-detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rv-detail-head h2 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--text-primary); }
.rv-detail-head__date { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.rv-detail-head__actions { margin-left: auto; display: flex; gap: 8px; }

/* ---- Route map (Leaflet stand-in) ---- */
.rv-route-map { position: relative; height: 300px; overflow: hidden; background: #0c1420; }
.rv-route-map__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
}
.rv-route-map__glow { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, rgba(45,212,191,0.08), transparent 60%); }
.rv-route-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rv-route-map__zone {
  position: absolute; left: 4%; bottom: 10%; width: 74px; height: 74px; border-radius: 50%;
  background: rgba(61,220,132,0.10); border: 1px dashed rgba(61,220,132,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.rv-route-map__privacy {
  position: absolute; left: 12px; bottom: 10px; display: flex; gap: 6px; align-items: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--frost-200); background: rgba(5,7,11,0.6); padding: 4px 8px; border-radius: 6px;
}

/* ---- Zone reading rows (session detail > zones tab) ---- */
.rv-zone-rows { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.rv-zone-row { display: flex; align-items: center; gap: 12px; }
.rv-zone-row__id { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); width: 20px; }
.rv-zone-row__name { font-size: 12px; color: var(--text-muted); width: 76px; }
.rv-zone-row__track { flex: 1; height: 8px; border-radius: 4px; background: var(--night-600); overflow: hidden; }
.rv-zone-row__fill { display: block; height: 100%; border-radius: 4px; }
.rv-zone-row__val { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); width: 52px; text-align: right; }

/* ---- Load figure ---- */
.rv-load-figure { display: flex; align-items: baseline; gap: 10px; }
.rv-load-figure__value { font-family: var(--font-mono); font-size: 34px; font-weight: 600; color: var(--text-primary); }
.rv-load-figure__hint { font-size: 12px; color: var(--text-muted); }

/* ---- Calendar (month view) ---- */
.rv-cal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-cal-head h2 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text-primary); }
.rv-cal-head__nav { display: flex; gap: 4px; }
.rv-cal-head__totals { margin-left: auto; display: flex; gap: 26px; }

/* Titre + selecteur mois/annee (SPOR-360, redesign simplifie) : le titre
   du mois EST le bouton qui ouvre le panneau (au lieu d'une mini-icone
   separee a cote du texte) — une seule cible cliquable, plus grande, moins
   de boutons dans l'entete. `.rv-cal-jump-panel` reste positionne en
   `fixed` via JS (getBoundingClientRect() du bouton, initCalendarJump()
   dans interactions.js) — meme raison que .rv-tag-tooltip-panel plus haut
   dans components.css : .rv-card a `overflow: hidden` (arrondi des coins)
   qui rognerait silencieusement un panneau `position: absolute` imbrique. */
.rv-cal-head__title-wrap { margin: 0; line-height: 1; }
.rv-cal-head__title {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin: 0;
  background: none; border: none; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-out);
}
.rv-cal-head__title:hover,
.rv-cal-head__title[aria-expanded="true"] { background: var(--surface-hover); }
.rv-cal-head__title .icon { color: var(--text-muted); display: flex; flex: 0 0 auto; }
.rv-cal-jump-panel {
  position: fixed; z-index: 45; display: none; gap: 6px; padding: 8px;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.rv-cal-jump-panel.is-open { display: flex; }
.rv-cal-jump-panel select { min-width: 108px; }

.rv-calendar-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; font-family: var(--font-sans); }
.rv-calendar-month__weekday {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted);
  text-align: center; padding: 2px 0 4px;
}
.rv-calendar-month__day {
  min-height: 104px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.rv-calendar-month__day.is-out { background: transparent; border-style: dashed; }
.rv-calendar-month__day.is-out .rv-calendar-month__date { color: var(--night-500); }
.rv-calendar-month__day.is-today { border-color: var(--aurora-green); }
.rv-calendar-month__day.is-today .rv-calendar-month__date { color: var(--aurora-green); }
.rv-calendar-month__date { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }

/* Calendrier compact de la fiche Evenement (epic SPOR-565, demande explicite
   de l'utilisateur : calendrier plus petit, un seul icone pour les jours
   avec seance) — reduit juste la taille des cellules du calendrier
   principal ci-dessus, meme grille/mecanique. */
.rv-event-calendar .rv-calendar-month__day { min-height: 40px; padding: 4px; gap: 2px; }
.rv-event-calendar .rv-calendar-month__date { font-size: 10.5px; }
.rv-event-calendar .rv-calendar-month__weekday { font-size: 9px; padding: 0 0 2px; }
.rv-cal-chip {
  display: flex; align-items: center; gap: 6px; padding: 3px 7px; border-radius: var(--radius-xs);
  font-size: 10.5px; font-weight: 600; line-height: 1.3; min-width: 0;
  background: var(--rv-cal-chip-tint, var(--surface-hover)); color: var(--rv-cal-chip-color, var(--text-secondary));
  border-left: 2px solid var(--rv-cal-chip-color, var(--border-strong));
  transition: filter var(--dur-fast) var(--ease-out);
}
a.rv-cal-chip:hover { filter: brightness(1.25); }
.rv-cal-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-cal-chip--run  { --rv-cal-chip-color: var(--sport-run);  --rv-cal-chip-tint: var(--sport-run-tint); }
.rv-cal-chip--bike { --rv-cal-chip-color: var(--sport-bike); --rv-cal-chip-tint: var(--sport-bike-tint); }
.rv-cal-chip--swim { --rv-cal-chip-color: var(--sport-swim); --rv-cal-chip-tint: var(--sport-swim-tint); }
.rv-cal-chip--rest { font-weight: 500; }

@media (max-width: 900px) {
  .rv-calendar-month__day { min-height: 72px; padding: 6px; }
  .rv-cal-chip span { display: none; }
  .rv-cal-chip { align-self: flex-start; width: 8px; height: 8px; padding: 0; border-radius: 50%; border-left: none; background: var(--rv-cal-chip-color); }
  .rv-cal-head__totals { margin-left: 0; width: 100%; }
}

/* ---- Hex mosaic (dashboard, from the original mobile mockup) ----
   Fluid hex size keeps the 7-day strip on a single honeycomb line down to
   ~900px viewports; below that it degrades into the mockup's cluster. */
.rv-hexrow { display: flex; flex-wrap: wrap; padding-bottom: 34px; --rv-hex: clamp(64px, 8.6vw, 116px); }
.rv-hex {
  position: relative; width: var(--rv-hex); height: calc(var(--rv-hex) * 1.1547);
  margin-right: 5px; flex: 0 0 auto;
  filter: drop-shadow(0 4px 10px rgba(3,6,12,0.5));
  transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.rv-hex:nth-child(even) { transform: translateY(30%); }
a.rv-hex:hover { filter: drop-shadow(0 4px 14px rgba(3,6,12,0.7)) brightness(1.12); }
.rv-hex__shape {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 16px 14px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--rv-hex-color, var(--surface-card));
  color: var(--night-950); font-family: var(--font-sans);
}
.rv-hex--rest .rv-hex__shape { background: var(--surface-card); color: var(--text-muted); }
.rv-hex--rest .rv-hex__shape::before {
  content: ''; position: absolute; inset: 2px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--night-850);
}
.rv-hex--rest .rv-hex__shape > * { position: relative; }
.rv-hex--plan { opacity: 0.55; }
.rv-hex--today { filter: drop-shadow(0 0 12px rgba(61,220,132,0.55)); }
.rv-hex__day { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; opacity: 0.75; }
.rv-hex--rest .rv-hex__day { opacity: 1; }
.rv-hex__value { font-family: var(--font-mono); font-size: 17px; font-weight: 600; line-height: 1; }
.rv-hex__label { font-size: 9.5px; font-weight: 600; opacity: 0.8; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-hex .icon { display: flex; }
/* Plusieurs seances le meme jour (SPOR-171) : compteur "×N" en coin de
   l'hexagone + jusqu'a 2 icones de sport cote a cote au lieu d'une seule. */
.rv-hex__count {
  position: absolute; top: 6px; right: 8px; z-index: 1;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; line-height: 1.4;
  color: var(--night-950); background: rgba(255,255,255,0.4); border-radius: 999px; padding: 1px 5px;
}
.rv-hex__icons { display: flex; gap: 3px; align-items: center; justify-content: center; }

/* Comparaison par jour sous la mosaique (SPOR-554) : rangee separee sous
   .rv-hexrow, une colonne par jour de meme largeur (--rv-hex duplique ici,
   pas d'ancetre commun avec .rv-hexrow pour heriter la custom property) —
   voir .rv-metric__delta pour les couleurs up/down. */
.rv-hex-deltas { display: flex; flex-wrap: wrap; margin-top: 2px; --rv-hex: clamp(64px, 8.6vw, 116px); }
.rv-hex-deltas__item { width: var(--rv-hex); margin-right: 5px; flex: 0 0 auto; text-align: center; --rv-metric-label-fs: 9px; }

@media (max-width: 900px) { .rv-hexrow { --rv-hex: 88px; } .rv-hex__value { font-size: 14px; } .rv-hex__label { display: none; } .rv-hex-deltas { --rv-hex: 88px; } }

/* ---- Quote of the day ---- */
.rv-quote { display: flex; flex-direction: column; gap: 10px; justify-content: center; height: 100%; }
.rv-quote__text {
  font-family: var(--font-brush); font-size: 24px; line-height: 1.35; color: var(--text-primary);
  transform: rotate(-1.2deg); margin: 6px 0 2px;
}
.rv-quote__text .grad { background: var(--grad-fox); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-quote__author { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* ---- Onboarding (« Rêve ») ---- */
.rv-onboard { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.rv-onboard__card {
  position: relative; width: 560px; max-width: 100%;
  background: var(--surface-raised); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); padding: 34px 38px 30px;
}
.rv-onboard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.rv-onboard__card h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--text-primary); }
.rv-onboard__card .sub { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.rv-onboard__dots { display: flex; gap: 6px; }
.rv-onboard__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--night-500); }
.rv-onboard__dot.is-active { background: var(--aurora-green); }
.rv-onboard__sports { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-onboard__sports .rv-chip { display: inline-flex; align-items: center; gap: 7px; }
.rv-onboard__actions { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; }

@media (max-width: 640px) { .rv-onboard__card { padding: 26px 22px; } }

/* ---- Profile ---- */
.rv-profile-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rv-profile-head__avatar {
  width: 84px; height: 84px; border-radius: 50%; background: var(--grad-fox); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--night-950); font-family: var(--font-display); font-weight: 700; font-size: 30px;
}
.rv-profile-head__id h2 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--text-primary); }
.rv-profile-head__meta { margin-top: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.rv-reve { display: flex; align-items: flex-start; gap: 14px; margin-top: 20px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--night-850); border: 1px solid var(--border-subtle); }
.rv-reve .icon { color: var(--fox-400); margin-top: 3px; }
.rv-reve__text { flex: 1; }
.rv-reve__quote { font-family: var(--font-brush); font-size: 21px; line-height: 1.35; color: var(--text-primary); transform: rotate(-0.8deg); }
.rv-reve__hint { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* ---- Awards / badges (V2.2) ---- */
.rv-award-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rv-award {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 18px 12px 14px; border-radius: var(--radius-md);
  background: var(--night-850); border: 1px solid var(--border-subtle);
}
.rv-award__icon {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--rv-award-tint, var(--surface-hover)); color: var(--rv-award-color, var(--text-secondary));
}
.rv-award__name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.rv-award__date { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.rv-award--locked { border-style: dashed; opacity: 0.55; }
.rv-award--locked .rv-award__icon { background: var(--night-700); color: var(--night-400); }

/* ---- Gear (V2.1) ---- */
.rv-gear-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.rv-gear-card__icon {
  width: 40px; height: 40px; border-radius: var(--radius-md); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--rv-gear-tint, var(--surface-hover)); color: var(--rv-gear-color, var(--text-secondary));
}
.rv-gear-card__title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.rv-gear-card__sub { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }
.rv-gear-card__figures { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; font-family: var(--font-mono); }
.rv-gear-card__km { font-size: 24px; font-weight: 600; color: var(--text-primary); }
.rv-gear-card__limit { font-size: 12px; color: var(--text-muted); }
.rv-gear-card__bar { margin-top: 10px; height: 6px; border-radius: 3px; background: var(--night-600); overflow: hidden; }
.rv-gear-card__bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--rv-gear-wear, var(--aurora-green)); }
.rv-gear-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.rv-gear-card__note { font-size: 11.5px; color: var(--text-muted); }
.rv-gear-card__note--warn { color: var(--status-warn); }

/* ---- Gear wear preview (SPOR-512, epic Materiel SPOR-175) ----
   Apercu du delta d'usure sous le picker "Gear used" (session_modals.php /
   session_detail.php) : une carte par materiel coche ayant un seuil de
   remplacement actif, peuplee live par initGearWearPreview() (interactions.js).
   Le remplissage reutilise --grad-aurora-full (tokens.css) — deja vendorise
   depuis la maquette, jusqu'ici jamais consomme par une vue de l'appli. */
.rv-gear-wear-preview { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rv-gear-wear-preview__item { padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--night-600); }
.rv-gear-wear-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-primary); margin-bottom: 6px; }
.rv-gear-wear-preview__name { font-weight: 600; }
.rv-gear-wear-preview__pct { font-family: var(--font-mono); font-weight: 600; }
.rv-gear-wear-preview__pct--ok { color: var(--aurora-green); }
.rv-gear-wear-preview__pct--near { color: var(--status-warn); }
.rv-gear-wear-preview__pct--over { color: var(--status-danger); }
.rv-gear-wear-preview__bar { height: 6px; border-radius: 3px; background: var(--night-600); overflow: hidden; }
.rv-gear-wear-preview__bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--grad-aurora-full); }
.rv-gear-wear-preview__foot { margin-top: 6px; font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); }
.rv-gear-wear-preview__delta { color: var(--status-danger); }

/* ---- Import batch (SPOR-524) : liste de progression affichee dans
   add-session-modal quand plusieurs fichiers sont selectionnes — construite
   par initImportBatch() (interactions.js), pas de markup PHP dedie (aucun
   ecran de maquette pour l'import multiple). ---- */
.rv-import-batch { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; max-height: 260px; overflow-y: auto; }
.rv-import-batch__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--night-600); }
.rv-import-batch__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-primary); }
.rv-import-batch__status { font-size: 11.5px; font-family: var(--font-mono); flex: 0 0 auto; }
.rv-import-batch__status--ok { color: var(--aurora-green); }
.rv-import-batch__status--error { color: var(--status-danger); }
.rv-import-batch__status--skip { color: var(--status-warn); }
.rv-import-batch__status--pending { color: var(--text-muted); }
.rv-import-batch__spinner {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--night-600); border-top-color: var(--text-secondary);
  animation: rv-import-spin 0.7s linear infinite;
}
@keyframes rv-import-spin { to { transform: rotate(360deg); } }
.rv-import-batch__summary { font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; }

/* ---- Trends ---- */
.rv-sport-total { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.rv-sport-total__figures { display: flex; flex-direction: column; gap: 2px; }
.rv-sport-total__main { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--text-primary); }
.rv-sport-total__sub { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); }