/* ==========================================================================
   Cairn — feuille de style du dashboard
   Approche mobile-first : la mise en page par défaut est celle du téléphone,
   les media queries ajoutent les colonnes et la sidebar sur grand écran.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg: #faf9f6;
  --bg-sidebar: #f5f4ef;
  --surface: #ffffff;
  --surface-accent: #eef3fb;
  --border: #e7e5df;
  --border-strong: #d8d5cc;

  /* Texte */
  --text: #1a1d21;
  --text-muted: #6f7780;
  --text-faint: #9aa1a9;

  /* Accent */
  --accent: #1e6ae1;
  --accent-soft: #dbe7fb;

  /* Couleurs par sport — reprises telles quelles dans les graphiques */
  --swim: #2f7de1;
  --bike: #d9482a;
  --run: #34a853;
  --sleep: #5b34c7;

  /* Marques tierces */
  --strava: #fc4c02;

  /* Etats */
  --ok: #1a9c53;
  --warn: #e2a03f;
  --danger: #d63b23;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 20, 24, 0.04), 0 1px 3px rgba(16, 20, 24, 0.03);

  --sidebar-w: 236px;
  --gap: 16px;
}

* { box-sizing: border-box; }

/* L'attribut hidden ne pose qu'un display:none de faible priorite : toute regle
   d'auteur posant un display (nos .icon-btn en display:grid, par exemple) le
   neutralise. On le reaffirme une bonne fois. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

button { font: inherit; color: inherit; cursor: pointer; }

/* ------------------------------------------------------------------ Shell */

.shell {
  min-height: 100%;
  /* Mobile : une seule colonne, la sidebar est masquée au profit de la tabbar */
  display: block;
}

/* ---------------------------------------------------------------- Sidebar */

.sidebar { display: none; }

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 26px;
}

.brand__mark { color: var(--text); display: flex; }

.brand__name { font-size: 21px; font-weight: 650; letter-spacing: -0.01em; }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }

.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 15px;
  transition: background 0.15s, color 0.15s;
}

.nav__item:hover { background: rgba(0, 0, 0, 0.035); color: var(--text); }

.nav__item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.nav__icon { width: 18px; text-align: center; font-size: 14px; opacity: 0.85; }

/* Bloc utilisateur : un bouton qui ouvre le menu du compte au-dessus. */
.sidebar__user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  text-align: left;
  transition: background 0.15s;
}

.sidebar__user:hover,
.sidebar__user.is-open { background: rgba(0, 0, 0, 0.04); }

.sidebar__user-chevron {
  margin-left: auto;
  flex: none;
  color: var(--text-faint);
  transition: transform 0.15s;
}

.sidebar__user.is-open .sidebar__user-chevron { transform: rotate(180deg); }

/* Menu du compte : petite carte posee au-dessus du bloc utilisateur. */
.user-menu {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 76px;
  z-index: 30;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(16, 20, 24, 0.14), 0 2px 8px rgba(16, 20, 24, 0.06);
  animation: menu-in 0.12s ease-out;
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-menu__head {
  display: flex;
  flex-direction: column;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  line-height: 1.3;
}

.user-menu__head strong { font-size: 14px; font-weight: 650; }
.user-menu__head small {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.user-menu__item:hover { background: rgba(0, 0, 0, 0.045); }

.user-menu__icon {
  width: 17px;
  flex: none;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.user-menu__item--danger:hover { background: #fbeae7; color: var(--danger); }
.user-menu__item--danger:hover .user-menu__icon { color: var(--danger); }

.user-menu__sep { height: 1px; margin: 6px 4px; background: var(--border); }

.avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.sidebar__user-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sidebar__user-text strong { font-size: 14px; font-weight: 600; }
.sidebar__user-text small { font-size: 12px; color: var(--text-muted); }

/* ----------------------------------------------------------------- Topbar */

.main {
  padding: 20px 16px calc(76px + env(safe-area-inset-bottom, 0px));
  max-width: 1320px;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.topbar__title h1 { font-size: 23px; font-weight: 650; letter-spacing: -0.02em; }
.topbar__date { color: var(--text-muted); font-size: 14px; }
/* En francais seul le premier mot prend la majuscule : "lundi 24 aout 2026". */
.topbar__date::first-letter { text-transform: uppercase; }

.topbar__actions { display: flex; gap: 8px; flex: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13.5px;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}

.pill:hover:not(:disabled) { border-color: var(--border-strong); }
.pill:disabled { opacity: 0.55; cursor: default; }
.pill--ghost { background: transparent; border-style: dashed; color: var(--text-muted); }
.pill.is-busy { opacity: 0.7; cursor: progress; }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: none;
}

.dot--ok { background: var(--ok); }
.dot--off { background: var(--danger); }

/* ------------------------------------------------------------------ Grille */

.grid {
  display: grid;
  /* minmax(0, 1fr) et non 1fr : une piste "1fr" ne descend jamais sous la
     largeur minimale de son contenu, et un SVG de graphique suffirait alors
     a faire deborder la page sur telephone. */
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: start;

  /* Rangees fines plutot qu'une rangee par bloc. Une grille classique aligne
     les blocs d'une meme rangee sur la hauteur du plus grand, ce qui creuse un
     vide sous les plus courts. Ici chaque bloc occupe autant de rangees de huit
     pixels que sa hauteur reelle l'exige : c'est le module de disposition qui
     les compte, apres mesure.
     L'ecart vertical passe par une marge sur les blocs, pour ne pas s'ajouter
     a chacune de ces rangees. */
  row-gap: 0;
  grid-auto-rows: 8px;

  /* Placement dense : sans lui, le curseur de placement de la grille n'avance
     que vers le bas et un bloc court laisse un trou definitif sous lui — le
     bloc suivant de la meme colonne partait s'aligner sur le debut du voisin
     le plus haut au lieu de remonter. « dense » autorise chaque bloc a occuper
     le premier emplacement libre, donc a combler les trous. L'ordre DOM reste
     la priorite de placement : le mode Editer continue de fonctionner. */
  grid-auto-flow: row dense;
}

.grid > .card { margin-bottom: var(--gap); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  /* Autorise le bloc a se comprimer plutot qu'a pousser la grille. */
  min-width: 0;
  /* Repere de la poignee de redimensionnement du mode Editer. */
  position: relative;
}

.card--hero { background: var(--surface-accent); border-color: #dde7f7; }

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 12px;
  margin-bottom: 14px;
  min-width: 0;
}

.card__head h2 { font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; }

.card__sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.card__eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.card__label { font-size: 13.5px; color: var(--text-muted); }

.controls { display: flex; align-items: center; gap: 8px; flex: none; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
}

.icon-btn:hover { background: rgba(0, 0, 0, 0.04); color: var(--text); }
.icon-btn.is-active { background: var(--accent-soft); color: var(--accent); border-color: #cadcf8; }

/* Groupe de boutons S / M / A, 1M / 3M / … */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-sm);
  background: #f1efe9;
  flex: none;
}

.segmented button {
  min-width: 30px;
  padding: 4px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 550;
  transition: background 0.15s, color 0.15s;
}

.segmented button:hover { color: var(--text); }

.segmented button.is-active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ------------------------------------------------------------------ Tuiles */

.card--tile { display: flex; flex-direction: column; gap: 2px; }

.tile__value { font-size: 30px; font-weight: 660; letter-spacing: -0.03em; }
.tile__value--muted { color: var(--text-faint); }
.tile__meta { font-size: 12.5px; color: var(--text-muted); }

.delta { font-size: 14px; font-weight: 600; }
.delta--up { color: var(--ok); }
.delta--down { color: var(--danger); }

/* ------------------------------------------------------- Prochaine course */

/* L'en-tete du hero n'a pas de titre mais un sourcil : il faut donc aligner
   le crayon sur cette ligne-la. */
.card--hero .card__head { align-items: flex-start; margin-bottom: 0; }
.card--hero .card__eyebrow { margin: 0; }

.race__count {
  font-size: 44px;
  font-weight: 680;
  letter-spacing: -0.045em;
  color: var(--accent);
  line-height: 1.05;
}

.race__name { font-size: 19px; font-weight: 650; margin-top: 4px; }
.race__meta { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }
.race__prep { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; }

/* --------------------------------------------------------- Barres de progression */

.bar {
  height: 7px;
  border-radius: 999px;
  background: #e9e6de;
  overflow: hidden;
}

.bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.5s ease;
}

.goal { margin-bottom: 14px; }
.goal:last-child { margin-bottom: 0; }

.goal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.goal__name { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.goal__value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Crayon d'edition, a gauche de la distance. Discret au repos, il ne doit pas
   concurrencer le chiffre qu'il accompagne. */
.goal__edit {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-faint);
  transition: background 0.15s, color 0.15s;
}

.goal__edit:hover { background: rgba(0, 0, 0, 0.05); color: var(--accent); }
.goal__edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.goal__input {
  width: 78px;
  padding: 3px 7px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  text-align: right;
}

.goal__input.is-invalid { border-color: var(--danger); }
.goal__input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

.swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ------------------------------------------------------------------ Usure */

.wear { margin-bottom: 16px; }
.wear:last-child { margin-bottom: 0; }
.wear__name { font-size: 14.5px; margin-bottom: 6px; }

.wear__foot {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 5px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.wear__pct { font-weight: 650; }
.wear__km { color: var(--text-muted); }

/* ------------------------------------------------------------- Activités */

.feed { display: flex; flex-direction: column; }

/* Chaque ligne est un bouton : la fiche de l'activité s'ouvre au clic, et le
   clavier y accède sans qu'on ait à rejouer son comportement. */
.feed__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 6px;
  margin-inline: -6px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: background 0.15s;
}

.feed__item:hover { background: rgba(0, 0, 0, 0.035); }
.feed__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.feed__item:first-child { padding-top: 0; }
.feed__item:last-child { border-bottom: 0; padding-bottom: 0; }

.feed__chevron {
  margin-left: auto;
  flex: none;
  display: flex;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

.feed__item:hover .feed__chevron,
.feed__item:focus-visible .feed__chevron { opacity: 1; transform: translateX(2px); }

/* Au doigt il n'y a pas de survol : le chevron reste visible. */
@media (hover: none) {
  .feed__chevron { opacity: 1; }
}

.feed__icon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  background: #f1efe9;
}

.feed__text { min-width: 0; }
.feed__title { font-size: 14.5px; font-weight: 600; }
.feed__meta { font-size: 12.5px; color: var(--text-muted); }

/* -------------------------------------------------------------- Planning */

.week { display: flex; flex-direction: column; }

.week__row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
}

.week__row.is-today { background: var(--surface-accent); }

/* Seance suivante d'un meme jour : collee a la precedente et sans repeter le
   nom du jour, pour qu'elles se lisent comme une seule journee. */
.week__row.is-continued { margin-top: -4px; }
.week__row.is-today .week__day { color: var(--accent); font-weight: 650; }

.week__day { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.week__label { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.week__duration { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Sommeil */

.sleep {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.ring { flex: none; position: relative; }
.ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.1;
}

.ring__score { font-size: 21px; font-weight: 660; }
.ring__max { font-size: 11px; color: var(--text-muted); }

.sleep__stats { display: grid; gap: 10px; }

/* Palier de qualite de la nuit. Il porte la meme couleur que l'anneau :
   c'est lui qui explique pourquoi l'anneau est vert plutot que rouge. */
.sleep__level { font-size: 15px; font-weight: 640; }

/* Coucher et reveils : une seconde rangee sous l'anneau, discrete, pour ne
   pas disputer la vedette au score. */
.sleep__details {
  display: flex;
  gap: 28px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.sleep-chart { margin-top: 4px; }
.sleep__stat-label { font-size: 12.5px; color: var(--text-muted); }
.sleep__stat-value { font-size: 16px; font-weight: 620; }

/* ----------------------------------------------------------------- Séance */

.sport-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
}

.steps { display: flex; flex-direction: column; margin-top: 14px; }

.step {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.step:last-child { border-bottom: 0; }
.step__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; }
.step__name { font-size: 14.5px; font-weight: 600; }
.step__detail { font-size: 13px; color: var(--text-muted); }

.session__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Plusieurs seances le meme jour : un filet les separe. */
.session + .session {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* Profil d'intensite : le graphique porte la lecture, pas de grille ni d'axe. */
.profile-chart { margin: 14px 0 4px; }

/* Masquage groupe : une seule classe sur le conteneur suffit a cacher tous les
   profils, y compris celui du brouillon en cours de lecture. */
.hide-charts .profile-chart { display: none; }
.profile-chart .chart { border-radius: 4px; }

/* Un bloc repete : le facteur en marge, les etapes indentees dessous. */
.block { display: flex; gap: 12px; padding: 6px 0; }

.block__repeat {
  flex: none;
  padding-top: 11px;
  width: 40px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.block__steps {
  flex: 1;
  min-width: 0;
  border-left: 2px solid var(--border);
  padding-left: 12px;
}

.block__steps .step:last-child { border-bottom: 0; }

.actions { display: flex; gap: 10px; margin-top: 16px; }

/* ------------------------------------- lecture d'une seance en texte libre */

.wparse { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

.wparse__row { display: flex; gap: 8px; margin-top: 6px; }

.wparse__row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.wparse__row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.wparse__row .btn { flex: 0 0 auto; }

/* --------------------------------- brouillon : le formulaire d'etapes */

.draft {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fcfbf8;
}

.draft__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.draft__actions { display: flex; gap: 10px; margin-top: 14px; }

.dblock {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.dblock:last-of-type { border-bottom: 0; }

.dblock__head { display: flex; align-items: center; gap: 8px; }
.dblock__spacer { flex: 1; }

.dblock__repeat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-muted);
}

.dblock__repeat input { width: 44px; text-align: right; }

/* Une ligne d'etape editable. Elle passe a la ligne sur telephone. */
.dstep { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.dstep select,
.dstep input {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  min-width: 0;
}

.dstep select:focus,
.dstep input:focus,
.dblock__repeat input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.dstep [data-field="label"] { flex: 1 1 130px; }
.dstep__measure,
.dstep__target { display: inline-flex; gap: 4px; flex: none; }
.dstep__measure input { width: 58px; text-align: right; }
.dstep__target input { width: 62px; text-align: right; }
.dstep__target input:disabled { background: #f3f1ec; color: var(--text-faint); }

.dstep__remove {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
}

.dstep__remove:hover { background: #fbeae7; color: var(--danger); }



/* Retrait d'une seance, visible seulement en mode ajout. */
.week__remove {
  margin-left: 6px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-faint);
  font-size: 15px;
  line-height: 1;
}

.week__remove:hover { background: #fbeae7; color: var(--danger); }
.week__remove:disabled { opacity: 0.4; }

/* Formulaire d'ajout d'une seance au planning. */
.wform {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.wform select,
.wform input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  min-width: 0;
}

.wform select { flex: 0 0 auto; }
.wform input[name="title"] { flex: 1 1 180px; }
.wform input[name="minutes"] { flex: 0 0 74px; text-align: right; }

.wform select:focus,
.wform input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.wform .btn { flex: 0 0 auto; }

.wform__error {
  flex: 1 0 100%;
  margin: 0;
  color: var(--danger);
  font-size: 13px;
}

/* Saisie d'une nuit : neuf champs courts, chacun coiffe de son etiquette.
   Sans etiquette, une rangee de cases numeriques serait indechiffrable.
   La largeur est posee au cas par cas via --w, une date n'ayant pas besoin
   de la meme place qu'un nombre de reveils. */
.sform { align-items: flex-end; }

.sform__field {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 3px;
  width: var(--w, 72px);
}

.sform__field > span {
  color: var(--text-muted);
  font-size: 11px;
}

.sform__field input { width: 100%; }

.btn {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 14px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  /* Certains boutons sont des liens (ouvrir Strava, lancer l'autorisation) :
     sans cela ils arriveraient soulignés et en bleu de navigateur. */
  color: inherit;
  text-decoration: none;
}

.btn:hover:not(:disabled) { border-color: var(--border-strong); background: #fcfbf9; }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn--primary:hover:not(:disabled) { background: #1a5fca; border-color: #1a5fca; }

.btn--slim { flex: none; padding: 4px 10px; font-size: 12.5px; }

/* Bouton destructeur. Il reste discret au repos et ne prend sa couleur qu'une
   fois arme, quand il demande confirmation : rouge en permanence, il attirerait
   l'oeil sur la seule action qu'on ne veut pas encourager. */
.btn--danger { color: var(--danger); }
.btn--danger:hover:not(:disabled) { border-color: var(--danger); background: #fdf2f0; }

.btn--danger.is-armed {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}


/* --------------------------------------------------------------- Charge */

.load__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.load__value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 28px;
  font-weight: 660;
  letter-spacing: -0.03em;
}

.chip {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: #e6f4ec;
  color: var(--ok);
}

.chip--down { background: #fbeae7; color: var(--danger); }
.chip--flat { background: #f1efe9; color: var(--text-muted); }

.load__secondary {
  display: flex;
  gap: 18px;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.load__secondary strong { color: var(--text); font-weight: 620; }

/* ------------------------------------------------- Page Entrainements */

.view[hidden] { display: none; }

/* Deux colonnes sur grand écran : le flux à gauche, les réglages à droite.
   Sur téléphone tout s'empile, et c'est le flux qui vient en premier — d'où son
   ordre dans le document. Cette page n'utilise pas la grille du tableau de
   bord : ses blocs ne se réarrangent pas, ils ont une place. */
.tlayout { display: grid; gap: var(--gap); align-items: start; }

.tlayout__side { display: flex; flex-direction: column; gap: var(--gap); }

@media (min-width: 1040px) {
  /* Le flux prend la part du lion : c'est lui qu'on vient lire. Les réglages
     se contentent du reste, sans descendre sous la largeur qui casserait une
     ligne de zone en deux. */
  .tlayout { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); }
  .tlayout__side { position: sticky; top: 26px; }

  /* Colonne étroite : les blocs de réglage se resserrent pour que chaque zone
     tienne encore sur une seule ligne. */
  .tlayout__side .card { padding: 16px; }
  .tlayout__side .zone { gap: 7px; }
  .tlayout__side .zone__name { flex-basis: 80px; padding-inline: 7px; }
  .tlayout__side .zone__bound { width: 54px; padding-inline: 6px; }
  .tlayout__side .zone__unit { width: 26px; }
  .tlayout__side .field { margin-bottom: 11px; }
}

/* ------------------------------------------------------ Flux d'activités */

.feed__month {
  margin: 22px 0 10px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.feed__month:first-child { margin-top: 4px; }

/* Une carte du flux : un bouton, dont le contenu en ligne est repassé en bloc
   ici (un bouton n'a pas le droit de contenir des div). */
.fcard {
  display: block;
  width: 100%;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.fcard:last-of-type { margin-bottom: 0; }

.fcard:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 14px rgba(16, 20, 24, 0.07);
}

.fcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fcard__head { display: flex; align-items: center; gap: 11px; }

.fcard__icon {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
}

.fcard__title { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.fcard__name { font-size: 15px; font-weight: 620; }
.fcard__when { font-size: 12.5px; color: var(--text-muted); }
.fcard__when::first-letter { text-transform: uppercase; }

.fstats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 12px;
}

.fstat { display: flex; flex-direction: column; line-height: 1.3; }
.fstat__label { font-size: 11.5px; color: var(--text-muted); }
.fstat__value {
  font-size: 16.5px;
  font-weight: 640;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.fcard__foot {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}

.feed__more { display: flex; margin-top: 14px; }
.feed__more .btn { flex: 1; }

.feed__end {
  margin-top: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* Sur téléphone, quatre chiffres à la file retombent en 3 + 1 : une grille de
   deux colonnes les range proprement en 2 × 2. */
@media (max-width: 520px) {
  .fstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.field { display: block; margin-bottom: 14px; }
.field:last-of-type { margin-bottom: 10px; }

.field__label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.field__control { display: flex; align-items: center; gap: 8px; }

.field__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field__suffix { flex: none; font-size: 13px; color: var(--text-muted); }

.field__hint {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.field__hint em { font-style: normal; font-weight: 600; color: var(--text); }

/* Retour visuel apres enregistrement automatique d'un champ. */
.is-saved { border-color: var(--ok) !important; box-shadow: 0 0 0 3px #e6f4ec !important; }
.is-invalid { border-color: var(--danger) !important; }

/* Bandeau de reperage des couleurs de zones. */
.zone-strip {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.zone-strip__part {
  flex: 1;
  padding: 5px 0;
  text-align: center;
  color: #fff;
  font-size: 11.5px;
  font-weight: 650;
}

/* Une ligne de zone : couleur, indice, nom, bornes. */
.zone {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.zone:last-of-type { border-bottom: 0; }

.zone__color {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: none;
  cursor: pointer;
}

.zone__color::-webkit-color-swatch-wrapper { padding: 2px; }
.zone__color::-webkit-color-swatch { border: 0; border-radius: 5px; }

.zone__index { flex: none; width: 24px; font-size: 13px; font-weight: 700; }

.zone__name {
  flex: 1 1 110px;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.zone__name:hover { border-color: var(--border); }

.zone__bounds { display: flex; align-items: center; gap: 5px; flex: none; }

.zone__bound {
  width: 62px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.zone__name:focus,
.zone__bound:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.zone__dash { color: var(--text-faint); }
.zone__unit { width: 30px; font-size: 12.5px; color: var(--text-muted); }

/* ------------------------------------------------------------ Graphiques */

.chart { width: 100%; max-width: 100%; display: block; overflow: visible; }
.chart-wrap { margin-top: 12px; overflow-x: auto; max-width: 100%; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.legend__item { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------- États et squelettes */

.empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 0;
  color: var(--text-muted);
  font-size: 13.5px;
}

.empty strong { color: var(--text); font-size: 14.5px; font-weight: 600; }

.skeleton-block { min-height: 72px; border-radius: var(--radius-sm); background: #f4f2ec; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.skeleton-block { animation: pulse 1.4s ease-in-out infinite; }

.error {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: #fbeae7;
  color: #8f2a17;
  font-size: 13.5px;
}

/* ------------------------------------------------------------ Tabbar mobile */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: space-around;
  gap: 2px;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 249, 246, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  padding: 5px 2px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 10.5px;
}

.tabbar__item span { font-size: 15px; line-height: 1; }
.tabbar__item.is-active { color: var(--accent); }

/* ==========================================================================
   Tablette — deux colonnes, la tabbar reste
   ========================================================================== */

@media (min-width: 680px) {
  .main { padding: 24px 24px calc(80px + env(safe-area-inset-bottom, 0px)); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Sur deux colonnes, "large" et "pleine largeur" se confondent. */
  .card[data-span="2"],
  .card[data-span="3"] { grid-column: span 2; }
  .card { padding: 20px; }
  .topbar__title h1 { font-size: 26px; }
  .race__count { font-size: 52px; }
}

/* ==========================================================================
   Desktop — sidebar fixe, grille à 3 colonnes, plus de tabbar
   ========================================================================== */

@media (min-width: 1040px) {
  .shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
  }

  .tabbar { display: none; }

  .main { padding: 26px 28px 40px; }

  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* La largeur est posée dans le HTML, au plus près du bloc concerné, et
     réécrite par le mode Éditer. */
  .card[data-span="2"] { grid-column: span 2; }
  .card[data-span="3"] { grid-column: span 3; }

  /* Le hero n'impose plus sa hauteur en rangées : elle se mesure comme celle
     des autres blocs. Les tuiles Volume et FTP s'empilent d'elles-mêmes dans la
     troisième colonne, comme sur la maquette. */
  .card--hero { display: flex; flex-direction: column; justify-content: center; }

  .race__count { font-size: 56px; }
}

@media (min-width: 1360px) {
  .main { padding-inline: 34px; }
}

/* ==========================================================================
   Mode Éditer — réarrangement et redimensionnement des blocs
   ========================================================================== */

.grid.is-editing .card {
  cursor: grab;
  border-style: dashed;
  border-color: var(--border-strong);
  user-select: none;
  /* Sur mobile, un geste vertical sur une carte doit deplacer la carte, pas
     faire defiler la page. */
  touch-action: none;
}

/* Le contenu cesse de reagir : en mode Editer on manipule des blocs, pas des
   boutons. Un crayon cliquable pendant un glisser serait un piege. */
.grid.is-editing .card > *:not(.card__resize) { pointer-events: none; }

.grid.is-editing .card:hover { border-color: var(--accent); }

.card.is-dragging {
  cursor: grabbing;
  z-index: 5;
  opacity: 0.92;
  border-style: solid;
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(16, 20, 24, 0.14);
  /* Laisse passer elementFromPoint : sans cela la carte deplacee se
     designerait elle-meme comme cible de depot. */
  pointer-events: none;
}

.card.is-resizing { border-style: solid; border-color: var(--accent); }

/* Poignee de redimensionnement : un quart d'arrondi dans le coin haut-droit,
   qui reprend la courbure de la carte. */
.card__resize {
  position: absolute;
  top: 6px;
  right: 6px;
  /* Genereuse a saisir : la cible tactile compte plus que la discretion, et
     l'arc dessine ne remplit que le centre. */
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  z-index: 2;
}

.card__resize::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-top: 2.5px solid var(--accent);
  border-right: 2.5px solid var(--accent);
  border-top-right-radius: 9px;
}

.card__resize:hover::before { border-color: #1a5fca; }

/* Une seule colonne : toutes les cartes occupent la largeur, redimensionner
   ne veut plus rien dire. */
.grid.is-single-column .card__resize { display: none; }

.pill.is-active {
  background: var(--accent-soft);
  border-color: #cadcf8;
  border-style: solid;
  color: var(--accent);
  font-weight: 600;
}

/* ==========================================================================
   Pages dédiées — Matériel, Courses, Sommeil, Réglages
   ========================================================================== */

/* Petites étiquettes d'état (Retiré, Manuel, conseillé…). */
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f1efe9;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  vertical-align: 2px;
}

.badge--soft { background: transparent; border: 1px dashed var(--border-strong); }
.badge--accent { background: var(--accent-soft); color: var(--accent); margin-left: 0; }

/* ------------------------------------------------------------- Matériel */

.gitem { padding: 14px 0; border-bottom: 1px solid var(--border); }
.gitem:first-child { padding-top: 0; }
.gitem:last-child { border-bottom: 0; padding-bottom: 0; }
.gitem.is-retired { opacity: 0.55; }

.gitem__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.gitem__icon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  background: #f1efe9;
  color: var(--text-muted);
}

.gitem__name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.gitem__name strong { font-size: 14.5px; font-weight: 600; }
.gitem__name small { font-size: 12.5px; color: var(--text-muted); }
.gitem__notes { margin-top: 6px; font-size: 12.5px; color: var(--text-muted); font-style: italic; }

/* Alertes d'usure : une puce colorée par équipement à surveiller. */
.alert {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.45;
}

.alert:first-child { padding-top: 0; }
.alert:last-child { border-bottom: 0; padding-bottom: 0; }

.alert__dot {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--warn);
}

.alert--urgent .alert__dot { background: var(--danger); }
.alert--urgent { font-weight: 550; }

/* Suggestions : cartes en rangées fluides. */
.sug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.sug {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fcfbf8;
}

.sug.is-highlighted { border-color: #cadcf8; background: var(--surface-accent); }

.sug__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.sug__head strong { font-size: 14.5px; }
.sug__why { margin: 6px 0 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }

.sug__pick {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}

.sug__pick-name { font-size: 13.5px; font-weight: 600; }
.sug__pick-price { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sug__pick-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }

/* -------------------------------------------------------------- Courses */

.race-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
}

.race-item.is-target { background: var(--surface-accent); }
.race-item.is-past { opacity: 0.75; }

.race-item__count {
  flex: none;
  min-width: 74px;
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.race-item.is-past .race-item__count { font-size: 13px; font-weight: 550; color: var(--text-muted); }

.race-item__body { flex: 1; min-width: 0; }
.race-item__name { font-size: 15px; font-weight: 650; }
.race-item__meta { font-size: 13px; color: var(--text-muted); }
.race-item__notes { font-size: 12.5px; color: var(--text-muted); font-style: italic; margin-top: 2px; }
.race-item__actions { display: flex; align-items: center; gap: 4px; flex: none; }

/* -------------------------------------------------------------- Sommeil */

.statline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.statline strong { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

.night {
  display: grid;
  grid-template-columns: minmax(84px, auto) auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

.night:last-child { border-bottom: 0; }
.night__date { color: var(--text); font-weight: 550; }
.night__date::first-letter { text-transform: uppercase; }
.night__duration { font-variant-numeric: tabular-nums; }
.night__score { font-weight: 680; font-variant-numeric: tabular-nums; text-align: right; }
.night__meta { color: var(--text-muted); font-size: 12.5px; min-width: 0; }

/* ------------------------------------------------------------- Réglages */

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

.kv:last-of-type { border-bottom: 0; }
.kv__label { color: var(--text-muted); flex: none; }
.kv__value { text-align: right; font-weight: 550; min-width: 0; overflow-wrap: anywhere; }

.token-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.token {
  flex: 1 1 200px;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #f7f5f0;
  font-size: 12.5px;
  overflow-wrap: anywhere;
  user-select: all;
}

.field__hint code {
  font-size: 11.5px;
  background: #f1efe9;
  padding: 1px 5px;
  border-radius: 5px;
}

.field__hint.is-ok { color: var(--ok); font-weight: 600; }

/* ==========================================================================
   Page de connexion
   ========================================================================== */

.auth-page { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }

.auth {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.auth__card { padding: 26px 24px; }
.auth__card h1 { font-size: 21px; font-weight: 650; letter-spacing: -0.01em; }
.auth__form { margin-top: 18px; display: flex; flex-direction: column; }
.auth__submit { margin-top: 6px; }
.auth__foot { text-align: center; font-size: 12.5px; color: var(--text-faint); }

.auth__switch {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
}

.auth__link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Fenêtre modale — invitation à connecter Strava
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  /* Au-dessus de tout, tabbar mobile (z-index 20) comprise. */
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 20, 24, 0.45);
  backdrop-filter: blur(3px);
  animation: modal-fade 0.18s ease-out;
}

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes modal-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.modal__card {
  width: 100%;
  max-width: 430px;
  /* Un petit écran en paysage ne doit pas enfermer les boutons hors de vue. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 26px 24px 20px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(16, 20, 24, 0.3);
  animation: modal-rise 0.2s ease-out;
}

.modal__mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: #fff0e9;
  color: var(--strava);
}

.modal__card h2 {
  font-size: 20px;
  font-weight: 660;
  letter-spacing: -0.02em;
}

.modal__text {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

.modal__list {
  margin: 16px 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.modal__list li {
  position: relative;
  padding-left: 26px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Coche dessinée à la bordure : pas de glyphe à charger, et elle suit la
   couleur du thème. */
.modal__list li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(45deg);
}

.modal__actions { display: flex; gap: 10px; }
.modal__actions .btn { flex: 1; }

.modal__note {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--text-faint);
  text-align: center;
}

/* ==========================================================================
   Fiche d'une activité
   ========================================================================== */

/* La fiche est longue : c'est son contenu qui défile, pas la carte. Le bouton
   de fermeture reste ainsi à portée de clic du début à la fin. */
.modal__card--wide {
  max-width: 620px;
  position: relative;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#activity-body { overflow-y: auto; padding: 26px 24px 20px; }

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Fond opaque : le contenu défile dessous. */
  background: #f1efe9;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}

.modal__close:hover { background: #e4e0d6; color: var(--text); }

/* Laisse la place au bouton de fermeture, en haut à droite. */
.ahead { padding-right: 38px; }
.ahead__name { font-size: 19px; font-weight: 660; letter-spacing: -0.02em; margin-top: 10px; }
.ahead__when { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.ahead__when::first-letter { text-transform: uppercase; }

/* Tracé du parcours. Le SVG porte sa propre proportion, le cadre suit. */
.route {
  display: block;
  margin: 16px 0 4px;
  padding: 8px;
  border-radius: var(--radius);
  background: #f4f2ec;
}

.route__svg { display: block; width: 100%; height: auto; max-height: 240px; }

.route--compact { margin: 12px 0 0; padding: 6px; }
.route--compact .route__svg { max-height: 150px; }

/* Chiffres de tête : deux colonnes sur téléphone, quatre dès qu'il y a la place. */
.astats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 10px;
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.astat__label { font-size: 12px; color: var(--text-muted); }
.astat__value {
  font-size: 21px;
  font-weight: 660;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.akv { display: grid; gap: 0; }

.asection { margin-top: 22px; }

.asection__title {
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 10px;
}

.adesc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  white-space: pre-wrap;
}

.adetail-pending {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--text-faint);
  font-style: italic;
}

/* Splits et tours : indice, barre, chiffre, complément. */
.splits { display: flex; flex-direction: column; }

.split {
  display: grid;
  grid-template-columns: 22px minmax(50px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

/* Les tours n'ont pas de barre : trois colonnes de texte suffisent. */
.splits--laps .split { grid-template-columns: 22px auto auto 1fr; }

.split:last-child { border-bottom: 0; }
.split__index { color: var(--text-faint); font-variant-numeric: tabular-nums; }

.split__bar {
  height: 8px;
  border-radius: 999px;
  background: #ece9e1;
  overflow: hidden;
}

.split__fill { display: block; height: 100%; border-radius: 999px; }

.split__pace { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.split__partial { font-weight: 400; color: var(--text-faint); font-size: 12px; }
.split__extra {
  color: var(--text-muted);
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.efforts { display: flex; flex-direction: column; }

.effort {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

.effort:last-child { border-bottom: 0; }
.effort__name { flex: 1; }
.effort__time { font-weight: 650; font-variant-numeric: tabular-nums; }

@media (min-width: 560px) {
  .astats { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================ Page Analyse */

/* Le bouton d'analyse se range à gauche de la croix, sur la même ligne. */
.modal__analyse { right: 52px; }

.view--analysis { display: flex; flex-direction: column; gap: var(--gap); }

.ahead--page { padding-right: 0; }

.backlink {
  align-self: flex-start;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 550;
}

.backlink:hover { color: var(--accent); }

/* ------------------------------------------------------- temps en zones */

.zones-card .card__title { margin-bottom: 12px; }

/* Barre empilée : une seule ligne, les zones dans l'ordre, largeur = part du
   temps. Les coins ne sont arrondis qu'aux extrémités de la barre entière. */
.zbar {
  display: flex;
  overflow: hidden;
  height: 26px;
  border-radius: 7px;
  background: #f1efe9;
}

.zbar__slice {
  min-width: 2px;
  height: 100%;
  transition: opacity 0.15s;
}

.zbar:hover .zbar__slice { opacity: 0.75; }
.zbar__slice:hover { opacity: 1; }

.zrows { margin-top: 14px; }

.zrow {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 72px 52px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

.zrow:last-child { border-bottom: 0; }

/* Une zone où l'on n'a pas mis les pieds garde sa ligne — c'est une
   information — mais s'efface pour ne pas encombrer la lecture. */
.zrow--empty { color: var(--text-faint); }
.zrow--empty .zrow__swatch { opacity: 0.35; }

.zrow__swatch { width: 10px; height: 10px; border-radius: 3px; }
.zrow__name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zrow--empty .zrow__name { font-weight: 500; }

.zrow__bounds {
  color: var(--text-faint);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.zrow__time,
.zrow__pct {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.zrow__time { font-weight: 600; }
.zrow__pct { color: var(--text-muted); }

.zone-note { margin-top: 10px; color: var(--text-faint); font-size: 12.5px; }

/* ------------------------------------------------------------- courbes */

.schart-stack__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Position du curseur partagé, lue sur les quatre courbes à la fois. */
.schart__cursor {
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

#analysis-charts { display: flex; flex-direction: column; gap: 10px; }

.schart-card { padding-bottom: 8px; }

.schart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}

.schart__value {
  color: var(--text-muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Le SVG est dessiné à la largeur réelle de cette boîte, en pixels : c'est ce
   qui garde les graduations lisibles du téléphone à l'écran large. */
.schart-host { width: 100%; }
.schart { display: block; touch-action: pan-y; }

@media (max-width: 560px) {
  .zrow { grid-template-columns: 10px minmax(0, 1fr) 64px 46px; }
  /* Les bornes chiffrées sautent en premier : la couleur et le nom suffisent
     à se repérer, et l'écran est trop étroit pour cinq colonnes. */
  .zrow__bounds { display: none; }
}

/* Respect des préférences système */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}