/* ---------------------------------------------------------------- coquille */

.shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--fonte);
  border-bottom: 1px solid var(--filet);
}

.topbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -6px;
  border: 1px solid var(--filet);
  border-radius: var(--r-1);
  background: none;
  color: var(--craie);
  font-size: var(--t-15);
  cursor: pointer;
}

.topbar__t {
  flex: 1;
  min-width: 0;
  font-size: var(--t-13);
  font-weight: 600;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__aside {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-13);
  color: var(--craie-douce);
}

.main {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s8);
}

.main--wide { max-width: 1180px; }

/* Barre de navigation basse : quatre ecrans quotidiens et le bouton « Plus »,
   cibles >= 44 px, dans le tiers inferieur ou le pouce atteint. Cinq colonnes
   egales tiennent sans defilement : la barre ne bouge plus, donc la cible d'un
   ecran est toujours au meme endroit. Les dix ecrans d'entretien
   sont dans la feuille « Plus » (app/menu.js). */
.nav {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--acier);
  border-top: 1px solid var(--filet);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav a,
.nav__plus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0; /* une colonne de grille ne doit pas etre elargie par son libelle */
  min-height: 52px;
  padding: var(--s2) 2px;
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  color: var(--craie-douce);
  text-decoration: none;
  font: inherit;
  font-size: var(--t-11);
  font-weight: 600;
  font-stretch: 100%;
  /* Ni capitales ni interlettrage, contrairement au reste des libelles : a
     78 px de colonne, « Progression » en capitales espacees demande 86 px et
     se ferait rogner. Un libelle tronque dans une barre de navigation coute
     plus cher que l'ecart de style. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.nav a[aria-current="page"],
.nav__plus[aria-current="page"] {
  color: var(--craie);
  border-top-color: var(--p25);
}

.nav svg { width: 18px; height: 18px; }

/* Sous 360 px la colonne tombe a 62 px : « Progression » ne rentre plus a
   11 px. Un cran de police plutot qu'un libelle tronque. */
@media (max-width: 360px) {
  .nav a,
  .nav__plus { font-size: 9px; padding-left: 1px; padding-right: 1px; }
  .nav svg { width: 16px; height: 16px; }
}

/* ------------------------------------------------------------------ cartes */

.card {
  background: var(--acier);
  border: 1px solid var(--filet);
  border-radius: var(--r-2);
  padding: var(--s4);
  margin-bottom: var(--s4);
}

.card--flat { background: none; }
.card--tight { padding: var(--s3); }

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.rule {
  height: 1px;
  background: var(--filet);
  border: 0;
  margin: var(--s3) 0;
}

.sec {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s6) 0 var(--s3);
}
.sec::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--filet);
}

/* ----------------------------------------------------- ligne libelle/valeur */

.kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--filet);
}
.kv:last-child { border-bottom: 0; }

/* Ligne kv cliquable (liste des mesures corporelles) : ni couleur ni
   soulignement de lien, sinon la liste ressemble a un paragraphe de liens ;
   le chevron suffit a dire qu'on peut la toucher. */
a.kv { color: inherit; text-decoration: none; }
a.kv::after { content: '\203A'; color: var(--craie-douce); font-size: var(--t-18); }

/* Precision sous le libelle d'une ligne kv : elle doit passer a la ligne,
   sinon elle se colle au libelle et la ligne devient illisible en 390 px. */
.kv__sous { display: block; }

.kv__v {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.stat {
  /* Trois chiffres cote a cote sur 390 px : la taille suit la largeur, sinon
     « 181,8 t » et « 602 » se chevauchent. */
  font-size: clamp(var(--t-15), 6vw, var(--t-34));
  font-weight: 700;
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.stat__u {
  font-size: var(--t-15);
  font-weight: 500;
  font-stretch: 100%;
  color: var(--craie-douce);
  margin-left: 2px;
}

/* Deux mentions a la suite (unite puis variation) : 2px les collent. */
.stat__u + .stat__u { margin-left: var(--s2); }

.stats3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}
.stats3 > div { min-width: 0; }
.stats3 .stat { white-space: nowrap; }

.muted { color: var(--craie-douce); }
.small { font-size: var(--t-13); }
.up    { color: var(--p10-txt); }
.down  { color: var(--p25-txt); }


/* ------------------------------------------------ etat de synchronisation */

/* Indicateur de la coquille (F10). Jaune 15 kg = avertissement : il n'existe
   pas d'etat « vert » ici, la file vide en ligne masque simplement l'element.
   --p15-txt sur --fonte : 8.5:1. */
.sync {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  flex-shrink: 0;
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--p15-txt);
}

.sync__pt {
  display: block;
  width: var(--s2);
  height: var(--s2);
  border-radius: 50%;
  background: var(--p15);
}

/* Hors ligne : pastille creuse, pour que l'etat se distingue sans la couleur
   seule (file en attente en ligne = pastille pleine). */
.sync--hors .sync__pt {
  background: none;
  border: 2px solid var(--p15);
}

/* A 390 px la date du titre secondaire et l'indicateur ne tiennent pas
   ensemble : l'etat de synchronisation prime, la date reste dans l'ecran. */
@media (max-width: 480px) {
  .topbar:has(.sync:not([hidden])) .topbar__aside { display: none; }
}

/* ---------------------------------------------------- seance : supersets */

/* Cadre commun d'un groupe d'entrees : un seul filet renforce autour des
   cartes, le libelle en tete. Les cartes gardent leur propre bordure. */
.superset {
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-2);
  padding: var(--s2);
  margin-bottom: var(--s4);
}

.superset__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: 0 var(--s1) var(--s2);
}

.superset .ex { margin-bottom: var(--s2); }
.superset .ex:last-child { margin-bottom: 0; }

/* Exercice a enchainer dans le groupe : meme codage que la serie a saisir
   (.set--now), filet jaune a gauche. */
.ex--now {
  border-color: var(--p15);
  box-shadow: inset 3px 0 0 var(--p15);
}

/* ---------------------------------------------------- minuteur : fin proche */

/* Dix dernieres secondes : le chiffre passe aussi en jaune, pas seulement la
   colonne, pour etre vu bras tendus. --p15-txt sur --acier : 8.2:1 (calcul WCAG). */
.timer--soon .timer__v { color: var(--p15-txt); }

.timer__fin { color: var(--p15-txt); }

/* Serie saisie hors ligne, pas encore acceptee par le serveur. */
.set--attente { box-shadow: inset 3px 0 0 var(--p15); }

/* Serie en attente d'envoi : sa pastille ne doit pas reprendre le bleu plein
   de la serie validee par le serveur (.set--done .set__mark). Contour
   avertissement, texte --p15-txt (8.2:1 sur --acier). L'etat est dit en
   toutes lettres par l'etiquette « en attente », la pastille est decorative. */
.set--attente .set__mark { background: transparent; border-color: var(--p15); color: var(--p15-txt); }

/* ------------------------------------------------ minuteur : rappel colle */

/* Rappel du repos accroche sous le bandeau du haut, deja colle : visible quel
   que soit le defilement et l'ecran. Positionne en absolu sous le bandeau
   plutot que dans son flux : son apparition ne decale pas la page, sinon la
   liste sauterait de 45 px sous le doigt a chaque debut et fin de repos. Une
   ligne, pas une carte : il ne doit pas manger la liste sur un telephone. */
.repos {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: var(--fonte);
  border-bottom: 1px solid var(--filet);
}

.repos__v {
  font-size: var(--t-24);
  font-weight: 700;
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.repos__t {
  flex: 1;
  min-width: 0;
  font-size: var(--t-13);
  color: var(--craie-douce);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Jauge de 2 px en pied de ligne : meme lecture que la colonne du grand
   minuteur, sans prendre de hauteur. */
.repos__jauge {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--acier-haut);
}
.repos__jauge i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--p20);
}

.repos--soon .repos__v,
.repos--soon .repos__t { color: var(--p15-txt); }
.repos--soon .repos__jauge i { background: var(--p15); }

/* Pendant un repos, les en-tetes colles des cartes d'exercice descendent sous
   le rappel (49 px : 32 px de bouton, 2 x 8 px de marge, 1 px de filet), sinon
   le rappel masquerait le nom de l'exercice en cours. */
.shell:has(#repos:not([hidden])) .ex__head { top: 98px; }