/* Carnet d'entraînement — habillage Hello Ted.
   Les fondations (couleurs, typo, espacement, formes, mouvement) viennent de
   assets/hello-ted/styles.css. Ce fichier ne définit aucune valeur brute :
   il alias les tokens du design system puis habille les blocs de l'app. */

:root {
  /* ---- Alias applicatifs des tokens Hello Ted ---- */
  --page:        var(--cream-50);
  --carte:       var(--white);
  --creux:       var(--ink-100);   /* fonds enfoncés : splits, jauges, rails */
  --encre:       var(--ink-900);
  --encre-douce: var(--ink-500);
  --encre-pale:  var(--ink-300);
  --trait:       var(--ink-900);
  --trait-fin:   var(--ink-200);

  /* --accent est réécrit au chargement avec la couleur du bloc en cours
     (voir app.js) : la page prend la teinte de la phase d'entraînement. */
  --accent:      var(--orange-500);
  --or:          var(--yellow-400);
  --alerte:      var(--amber-500);
  --danger:      var(--orange-500);   /* la charte n'a pas de rouge */

  --dp:   var(--font-display);        /* Space Mono — titres et chiffres */
  --tx:   var(--font-body);           /* DM Sans — corps de texte */
  --mo:   var(--font-mono);           /* Space Mono — étiquettes capitales */
  --dial: var(--font-dialogue);       /* la voix de Ted */

  /* gouttière : 20px sur mobile (la valeur de la charte), élargie sur grand
     écran mais toujours sur la grille de 4px */
  --marge: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  background: var(--page);
  color: var(--encre);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}

/* la charte n'admet aucun arrondi : ni sur les images, ni sur les contrôles */
img, button, input, select, textarea { border-radius: var(--radius-none); }

code { font-family: var(--mo); font-size: 0.85em; color: var(--accent); }
pre {
  font-family: var(--mo); font-size: var(--text-sm);
  background: var(--carte); color: var(--encre);
  border: var(--border-1) solid var(--trait); box-shadow: var(--shadow-pixel-sm);
  padding: var(--space-3) var(--space-4); overflow-x: auto;
}

.erreur {
  max-width: 44rem; margin: 12vh auto; padding: var(--space-6) var(--marge);
  border-left: var(--border-3) solid var(--accent);
}
.erreur h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.erreur p { color: var(--text-muted); margin-bottom: var(--space-3); }

/* ---------- Marque ---------- */

/* le picto « T » seul, jamais le lockup complet dans le bandeau — et jamais
   sur fond orange (le picto contient de l'orange et y perd ses contours). */
.marque { height: 32px; width: 32px; display: block; margin-bottom: var(--space-4); }

/* ---------- Tête ---------- */

.tete {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: end;
  padding: var(--space-6) var(--marge) var(--space-8);
  border-bottom: var(--border-3) solid var(--trait);
}

.oeil {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 var(--space-4);
}

.tete__titre {
  font-family: var(--dp);
  font-weight: var(--weight-bold);
  font-size: clamp(36px, 9vw, 64px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
  /* la charte réserve les capitales aux étiquettes mono : les titres restent
     en casse de phrase */
}
.tete__chrono {
  color: var(--accent);
  font-feature-settings: "tnum";
}
.tete__sous {
  color: var(--text-muted);
  font: var(--type-body-sm);
  max-width: 34ch;
  margin: var(--space-4) 0 0;
}

.tete__droite { text-align: right; }
.compteur {
  font-family: var(--mo); font-size: var(--text-xs);
  color: var(--text-muted);
  border-top: var(--border-1) solid var(--trait-fin);
  padding: var(--space-2) 0;
}
.compteur b {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-xl); color: var(--encre);
  display: inline-block; margin-right: var(--space-1);
  font-feature-settings: "tnum";
}
.compteur__date { display: block; margin-top: var(--space-1); color: var(--encre-douce); }
.compteur__date::before {
  content: "";
  display: inline-block; width: 8px; height: 2px;
  margin-right: var(--space-2); background: var(--encre-douce);
  vertical-align: 0.3em;
}
.maj {
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre-pale); margin: var(--space-4) 0 0;
}

@media (max-width: 680px) {
  .tete { grid-template-columns: 1fr; align-items: start; gap: var(--space-6); }
  .tete__droite { text-align: left; }
}

/* ---------- Sections ---------- */

.section {
  padding: var(--space-8) var(--marge);
  border-bottom: var(--border-1) solid var(--trait-fin);
}

.etiquette {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--encre);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.etiquette__num {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 var(--space-1);
  background: var(--accent); color: var(--cream-50);
  border: var(--border-1) solid var(--trait);
  font-family: var(--dp); font-weight: var(--weight-bold); font-size: var(--text-2xs);
  letter-spacing: 0;
}
.etiquette::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--trait-fin);
}

.section__intro { color: var(--text-muted); max-width: 60ch; margin: 0 0 var(--space-6); }
.sous-titre {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-lg); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-2);
}
.note { color: var(--encre-douce); font: var(--type-body-sm); max-width: 62ch; margin: 0 0 var(--space-4); }

/* ---------- Ted ---------- */

/* Ted ne parle que dans une bulle, jamais en corps de texte. L'ombre lavande
   lui est réservée : les cartes de l'interface portent l'ombre d'encre. */
.ted {
  display: flex; align-items: flex-end; gap: var(--space-3);
  /* la pointe déborde de 16px sous la bulle : on lui réserve la place,
     plus 4px pour qu'elle ne touche pas le bloc suivant */
  margin-bottom: var(--space-5);
}
.ted__avatar {
  width: 48px; height: 48px; flex: 0 0 auto;
  display: grid; place-items: end center; overflow: hidden;
  background: var(--ted-sky);
  border: var(--border-1) solid var(--trait);
  border-radius: var(--radius-pill);   /* le seul rond de tout le système */
}
.ted__avatar img { width: 92%; display: block; image-rendering: pixelated; }

.ted__bulle {
  position: relative; flex: 1; min-width: 0;
  background: var(--carte); color: var(--encre);
  border: var(--border-3) solid var(--trait);
  box-shadow: var(--shadow-dialogue);
  padding: var(--space-3) var(--space-4);
  font: var(--type-dialogue);
}
/* la pointe : le conduit blanc prolonge les montants d'encre de la bulle… */
.ted__bulle::before {
  content: ""; position: absolute; left: 16px; bottom: -12px;
  width: 16px; height: 12px; background: var(--carte);
  border-left: var(--border-3) solid var(--trait);
  border-right: var(--border-3) solid var(--trait);
}
/* …et se ferme à plat, un pixel d'encre en bas */
.ted__bulle::after {
  content: ""; position: absolute; left: 16px; bottom: -16px;
  width: 16px; height: 4px; background: var(--trait);
}
.ted__titre {
  display: block; font: var(--type-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--encre-douce); margin-bottom: var(--space-2);
}
.ted--large .ted__avatar { width: 64px; height: 64px; }

/* Ted tient en 1 à 2 phrases : au-delà de quatre lignes, la bulle ne montre que
   le début et le reste s'ouvre en superposition. Quatre et non trois : Silkscreen
   est large, il n'y tient que trois ou quatre mots par ligne. */
.ted__texte {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
.ted__bulle--repliable { cursor: pointer; }
.ted__plus {
  display: inline-flex; align-items: center; margin-top: var(--space-2);
  padding: 0; background: none; border: 0;
  border-bottom: var(--border-1) solid var(--trait);
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre); cursor: pointer;
}
.ted__plus:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ted__plus:focus-visible { outline: var(--outline-focus); outline-offset: var(--outline-focus-offset); }

/* La modale est le seul endroit du système qui utilise la transparence :
   un voile d'encre à 55 %. Jamais de flou. */
.ted-modale {
  width: min(420px, calc(100% - var(--space-10)));
  max-height: 80vh; overflow-y: auto;
  padding: 0; margin: auto;
  background: var(--carte); color: var(--encre);
  border: var(--border-3) solid var(--trait);
  box-shadow: var(--shadow-pixel-lg);
}
.ted-modale::backdrop { background: color-mix(in srgb, #252525 55%, transparent); }
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ted-modale::backdrop { background: rgba(37, 37, 37, 0.55); }
}
.ted-modale__tete {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-1) solid var(--trait);
}
.ted-modale__titre {
  flex: 1; min-width: 0;
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre-douce);
}
.ted-modale__fermer {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: var(--control-h-sm); height: var(--control-h-sm); padding: 0;
  background: none; border: 0; color: var(--encre); cursor: pointer;
}
.ted-modale__fermer svg { width: 24px; height: 24px; }
.ted-modale__fermer:hover { background: var(--creux); }
.ted-modale__fermer:focus-visible { outline: var(--outline-focus); outline-offset: calc(var(--outline-focus-offset) * -1); }
.ted-modale__texte { padding: var(--space-4); font: var(--type-dialogue); }

/* ---------- Règle chrono ---------- */

.regle { margin-top: var(--space-4); }

.regle-objectif {
  display: flex; align-items: baseline; gap: var(--space-2) var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--accent); color: var(--cream-50);
  border: var(--border-1) solid var(--trait);
  box-shadow: var(--shadow-pixel);
}
.regle-objectif__label {
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.regle-objectif__chrono {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-2xl); font-feature-settings: "tnum";
  letter-spacing: var(--tracking-display);
}
.regle-objectif__date { font-family: var(--mo); font-size: var(--text-xs); }

.regle-ligne { padding: var(--space-4) 0; border-top: var(--border-1) solid var(--trait-fin); }
.regle-ligne:first-child { border-top: 0; }
.regle-ligne__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.regle-ligne__date {
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre-douce);
}
.regle-ligne__chrono {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-xl); color: var(--encre); font-feature-settings: "tnum";
  text-align: right; white-space: nowrap; letter-spacing: var(--tracking-display);
}
.regle-ligne__allure {
  display: block; font-family: var(--mo); font-weight: var(--weight-regular);
  font-size: var(--text-2xs); color: var(--encre-douce); letter-spacing: 0;
}
.regle-ligne__titre {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-md); margin: var(--space-1) 0 0; letter-spacing: var(--tracking-display);
}
/* jauge : un rail encadré d'encre, un remplissage plein — pas d'arrondi */
.regle-ligne__jauge {
  position: relative; height: 12px; background: var(--carte);
  border: var(--border-1) solid var(--trait);
  margin: var(--space-3) 0 var(--space-2);
}
.regle-ligne__zone {
  position: absolute; top: 0; right: 0; bottom: 0;
  background: var(--accent); opacity: 0.35;
}
.regle-ligne__cible {
  position: absolute; top: -4px; bottom: -4px; border-left: 2px dashed var(--encre);
}
.regle-ligne__point {
  position: absolute; top: 50%; width: 12px; height: 12px;
  background: var(--point-couleur, var(--encre));
  border: 2px solid var(--encre);
  transform: translate(-50%, -50%);
}
.regle-ligne__note { color: var(--text-muted); font: var(--type-body-sm); margin: 0; max-width: 60ch; }

.regle-legende {
  display: flex; justify-content: space-between;
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre-pale); margin-top: var(--space-3);
}

/* ---------- Diagnostic ---------- */

.diag { max-width: 66ch; margin-bottom: var(--space-10); }
.diag__titre {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: clamp(22px, 3.4vw, 28px);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.diag__corps { color: var(--text-muted); margin: 0 0 var(--space-5); }
.leviers { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.leviers li {
  font: var(--type-body-sm);
  padding-left: var(--space-6);
  position: relative;
  color: var(--encre);
}
.leviers li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 12px; height: 4px; background: var(--accent);
}

.zones { border-top: var(--border-1) solid var(--trait-fin); padding-top: var(--space-6); }
#zones-echelle svg { width: 100%; height: auto; display: block; margin: var(--space-4) 0 var(--space-5); overflow: visible; }
.zone-label { font-family: var(--mo); font-size: 9px; font-weight: 700; fill: var(--encre); }
.zone-borne { font-family: var(--mo); font-size: 8.5px; fill: var(--encre-douce); }

/* le graphique SVG des zones cardiaques est dessiné dans un viewBox fixe de
   1000 unités : sur un écran étroit, ce viewBox est mis à l'échelle vers le
   bas et le texte devient illisible. On compense en agrandissant les polices
   internes (en unités du viewBox) à mesure que le conteneur rétrécit. */
@media (max-width: 560px) {
  .zone-label { font-size: 15px; }
  .zone-borne { font-size: 14px; }
}
@media (max-width: 400px) {
  .zone-label { font-size: 18px; }
  .zone-borne { font-size: 16px; }
}

.tableau { width: 100%; border-collapse: collapse; font: var(--type-body-sm); table-layout: fixed; }
.tableau td { padding: var(--space-2) var(--space-2) var(--space-2) 0; border-bottom: var(--border-1) solid var(--trait-fin); vertical-align: baseline; }
.tableau td:first-child { width: 44px; }
.tableau .z-pastille {
  display: inline-block; min-width: 32px; text-align: center;
  font: var(--type-label); letter-spacing: var(--tracking-label);
  color: var(--encre); border: var(--border-1) solid var(--trait);
  padding: 3px var(--space-1);
}
.tableau .z-plage { font-family: var(--mo); color: var(--encre); white-space: nowrap; }
.tableau .z-role { color: var(--text-muted); }

/* ---------- Blocs ---------- */

.blocs { display: grid; gap: 0; }
.bloc {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: var(--border-1) solid var(--trait-fin);
  position: relative;
}
.bloc:last-child { border-bottom: var(--border-1) solid var(--trait-fin); }
/* le bloc en cours : une carte pleine, pas un dégradé */
.bloc--actif {
  background: var(--carte);
  border: var(--border-1) solid var(--trait);
  box-shadow: var(--shadow-pixel);
  padding: var(--space-4);
  margin: var(--space-2) 0;
}
.bloc__dates { font-family: var(--mo); font-size: var(--text-xs); color: var(--encre-douce); padding-top: 2px; }
.bloc__barre { width: 100%; height: 8px; margin-bottom: var(--space-2); border: var(--border-1) solid var(--trait); }
.bloc__nom {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-lg); margin: 0 0 var(--space-2);
  letter-spacing: var(--tracking-display);
}
.bloc__zone, .badge-actif {
  display: inline-block;
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  border: var(--border-1) solid var(--trait);
  padding: 3px var(--space-2); margin-left: var(--space-2);
  vertical-align: 0.22em; color: var(--encre);
}
.badge-actif { background: var(--accent); color: var(--cream-50); }
.bloc__intention { color: var(--text-muted); font: var(--type-body-sm); margin: 0 0 var(--space-2); max-width: 62ch; }
.bloc__cle { font: var(--type-body-sm); color: var(--encre); }
.bloc__cle span {
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre-douce); margin-right: var(--space-2);
}
@media (max-width: 620px) { .bloc { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ---------- Jalons ---------- */

.jalons { position: relative; padding-left: var(--space-6); }
.jalons::before {
  content: ""; position: absolute; left: 4px; top: var(--space-2); bottom: var(--space-2);
  width: 2px; background: var(--trait-fin);
}
.jalon { position: relative; padding-bottom: var(--space-6); }
.jalon:last-child { padding-bottom: 0; }
.jalon__marque {
  position: absolute; left: calc(var(--space-6) * -1); top: 6px;
  width: 12px; height: 12px; border: 2px solid var(--encre);
}
.jalon--passe .jalon__marque { background: var(--encre-pale); }
.jalon--avenir .jalon__marque { background: var(--accent); }
.jalon__date {
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre-douce);
}
.jalon__compte {
  margin-left: var(--space-2); color: var(--cream-50); background: var(--accent);
  border: var(--border-1) solid var(--trait); padding: 2px var(--space-1);
}
.jalon__libelle {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-md); letter-spacing: var(--tracking-display);
  margin: var(--space-2) 0 var(--space-1); color: var(--encre);
}
.jalon__detail { color: var(--text-muted); font: var(--type-body-sm); margin: 0; max-width: 60ch; }
.jalon--passe .jalon__libelle { color: var(--encre-douce); }
.jalon--passe .jalon__detail { color: var(--encre-pale); }

/* ---------- Séances ---------- */

/* colonne unique explicite : sans elle, la piste « auto » de la grille se
   dimensionne sur le titre le plus long (texte non cassé) au lieu de la
   largeur disponible, ce qui fait déborder toute la page à l'horizontale */
.seances { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

/* carte de la charte : fond blanc, contour d'encre 2px, ombre dure 4px,
   angles droits. Le statut se lit sur un badge, pas sur un liseré. */
.seance {
  background: var(--carte);
  border: var(--border-1) solid var(--trait);
  box-shadow: var(--shadow-pixel);
  padding: var(--space-4);
}

/* séance à venir : creuse, en pointillés, sans ombre — jamais confondue
   avec une séance réalisée */
.seance--prevue {
  background: var(--page);
  border-style: dashed;
  box-shadow: none;
}

/* la liste n'affiche plus que des cartes de navigation, jamais d'accordéon :
   chaque carte est un vrai <button>, l'analyse complète vit sur sa propre
   page (voir .seance-detail plus bas) */
button.seance.seance--nav {
  display: block; width: 100%;
  appearance: none; font: inherit; color: inherit; text-align: left;
  cursor: pointer; position: relative;
}
.seance--nav:hover { background: var(--creux); }
.seance--nav:focus-visible { outline: var(--outline-focus); outline-offset: var(--outline-focus-offset); }
.seance__nav {
  position: absolute; top: 50%; right: var(--space-4); transform: translateY(-50%);
  display: inline-flex; width: 14px; height: 14px; color: var(--encre-pale);
}
.seance__nav svg { width: 100%; height: 100%; fill: currentColor; }

/* séance réalisée : un résumé d'une ligne — jour, titre, note — c'est tout.
   Sélecteur préfixé par `button` : même spécificité que la règle
   `button.seance.seance--nav` ci-dessus, pour que ce display:flex l'emporte
   bien sur son display:block (sinon le titre, en inline, déborde au lieu
   de tronquer avec l'ellipsis). */
button.seance--realisee.seance--nav {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) calc(var(--space-4) + 22px) var(--space-3) var(--space-4);
}
.seance__check {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--green-500); color: var(--cream-50);
  border: var(--border-1) solid var(--trait);
}
.seance__check svg { width: 14px; height: 14px; fill: currentColor; }
.seance__resume-jour {
  flex: 0 0 auto;
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre-douce);
}
.seance__resume-titre {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-sm); letter-spacing: var(--tracking-display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seance--realisee .seance__note { flex: 0 0 auto; }

/* séance à venir, dans la liste : jour, titre, créneau — rien d'autre. La
   consigne de Ted et le reste sont sur la page détail */
.seance--prevue.seance--nav { padding-right: calc(var(--space-4) + 22px); }

.seance__meta {
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre-douce); margin: 0 0 var(--space-2);
}

.seance__note {
  display: inline-flex; align-items: center;
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  border: var(--border-1) solid var(--trait); padding: 3px var(--space-2);
  color: var(--encre); background: var(--creux);
}
.seance__note--excellent { background: var(--green-500); }
.seance__note--bon { background: var(--lime-400); }
.seance__note--attention { background: var(--yellow-400); }
.seance__note--reference { background: var(--orange-500); color: var(--cream-50); }

.cible-puces { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.cible-puce {
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre); background: var(--carte);
  border: var(--border-1) solid var(--trait); padding: var(--space-1) var(--space-2);
}
.seance__structure { color: var(--text-muted); font: var(--type-body-sm); margin: 0 0 var(--space-3); }

/* bouton de la charte : contour 3px, ombre dure, et il tombe dans son ombre
   quand on appuie */
.seance__montre {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--control-h-sm); padding: 0 var(--space-4); margin-top: var(--space-2);
  background: var(--accent); color: var(--cream-50);
  border: var(--border-2) solid var(--trait); box-shadow: var(--shadow-pixel);
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-instant) var(--ease-snap), box-shadow var(--dur-instant) var(--ease-snap);
}
.seance__montre:hover { background: var(--orange-600); color: var(--cream-50); }
.seance__montre:active { transform: translate(var(--press-translate), var(--press-translate)); box-shadow: var(--shadow-pressed); }
.seance__montre svg { width: 16px; height: 16px; fill: currentColor; }
.seance__montre[hidden] { display: none; }
.seance--renfo .exos { margin-top: var(--space-4); }

/* le titre prend la place qui reste, le badge de note ne passe jamais à la
   ligne — mais le créneau est du texte libre (ex. « premier mercredi soir
   pris ») : il doit pouvoir s'enrouler, sinon il pousse la carte hors écran */
.seance__tete { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.seance__ident { flex: 1 1 auto; min-width: 0; }
.seance__tete > .seance__note { flex: 0 0 auto; }
.seance__tete > .seance__date { flex: 0 1 auto; min-width: 0; }
.seance__date {
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre-douce);
  text-align: right;
}
.seance__jour {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-md); letter-spacing: var(--tracking-display); color: var(--encre);
  font-feature-settings: "tnum"; text-transform: uppercase;
}
.seance__semaine {
  font-family: var(--mo); font-weight: var(--weight-regular);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
  color: var(--encre-douce); margin-left: var(--space-2); vertical-align: 0.12em;
}
.seance__titre {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-xl); letter-spacing: var(--tracking-display);
  margin: var(--space-1) 0 var(--space-1);
}
.seance__lieu { font: var(--type-body-sm); color: var(--encre-douce); margin: 0 0 var(--space-4); }

/* les chiffres sont toujours en Space Mono : un nombre en DM Sans est un bug */
.chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-2); margin-bottom: var(--space-4);
}
.chiffre {
  min-width: 0; overflow: hidden; padding: var(--space-2);
  background: var(--page); border: var(--border-1) solid var(--trait);
}
.chiffre__v {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-lg); line-height: 1; letter-spacing: -0.03em;
  font-feature-settings: "tnum"; display: block; white-space: nowrap;
}
.chiffre__u { font-family: var(--mo); font-size: var(--text-2xs); font-weight: var(--weight-bold); margin-left: 2px; opacity: 0.7; }
/* les libellés français sont longs : ils passent à la ligne plutôt que d'être
   coupés — « Coût cardiaque » tronqué en « Coût card… » ne dit plus rien */
.chiffre__l {
  display: block; margin-top: var(--space-1);
  font: var(--type-label); line-height: 1.3;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre-douce);
}
.chiffre--phare { background: var(--accent); border-color: var(--trait); }
.chiffre--phare .chiffre__v, .chiffre--phare .chiffre__l, .chiffre--phare .chiffre__u { color: var(--cream-50); }

.bande { margin: 0 0 var(--space-4); }
.bande svg { width: 100%; height: auto; display: block; overflow: visible; }
.bande-txt { font-family: var(--mo); font-size: 9px; fill: var(--encre-douce); }
.bande-val { font-family: var(--mo); font-size: 10px; font-weight: 700; fill: var(--encre); }

.splits { display: flex; gap: 2px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.split {
  flex: 1 1 3.4rem; min-width: 3.4rem;
  background: var(--creux); border: var(--border-1) solid var(--trait);
  padding: var(--space-1) var(--space-1) 0; text-align: center;
}
.split__k { font: var(--type-label); letter-spacing: var(--tracking-label); color: var(--encre-douce); }
.split__a { font-family: var(--mo); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--encre); margin-bottom: var(--space-1); }
/* la couleur de zone est une pastille pleine, jamais une couleur de texte :
   le lime et le jaune sont illisibles en typo sur fond clair */
.split__f {
  font-family: var(--mo); font-size: var(--text-2xs); font-weight: var(--weight-bold);
  color: var(--encre); border-top: var(--border-1) solid var(--trait);
  margin: 0 calc(var(--space-1) * -1);
  padding: 2px 0;
}
.split--partiel { opacity: 0.55; }

.analyse { border-top: var(--border-1) solid var(--trait-fin); padding-top: var(--space-4); }
/* le verdict reste la voix de l'interface — courte, impersonnelle ;
   « à retenir » passe, lui, dans la bulle de Ted */
.analyse__verdict {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-md); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-3); text-wrap: balance;
}
.analyse__corps { color: var(--text-muted); font: var(--type-body-sm); margin: 0 0 var(--space-4); max-width: 68ch; white-space: pre-line; }
.citation { font: var(--type-body-sm); color: var(--encre-douce); font-style: italic; margin: 0 0 var(--space-4); }

/* ---------- Séances — page détail ---------- */

/* on quitte la liste pour cette page : la flèche du haut est le seul chemin
   retour, jamais un accordéon qui pousse le reste de la liste */
.seance-detail[hidden] { display: none; }

.detail-retour {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--control-h-sm); padding: 0 var(--space-3) 0 var(--space-2);
  margin-bottom: var(--space-5);
  background: var(--page); color: var(--encre);
  border: var(--border-1) solid var(--trait);
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  cursor: pointer;
}
.detail-retour:hover { background: var(--creux); }
.detail-retour:focus-visible { outline: var(--outline-focus); outline-offset: var(--outline-focus-offset); }
.detail-retour__icone { width: 14px; height: 14px; transform: scaleX(-1); }

.detail-carte {
  background: var(--carte);
  border: var(--border-1) solid var(--trait);
  box-shadow: var(--shadow-pixel);
  padding: var(--space-5);
}
/* séance encore à venir : même traitement creux et pointillé que sa carte
   dans la liste, pour rester lisible comme « pas encore faite » */
.detail-carte--prevue {
  background: var(--page);
  border-style: dashed;
  box-shadow: none;
}
.detail-carte .ted { margin-bottom: var(--space-4); }
/* la page détail est déjà l'endroit où Ted développe : jamais de repli ici */
.detail-carte .ted__texte { display: block; -webkit-line-clamp: unset; overflow: visible; }
.detail-carte .ted__plus { display: none; }

/* ---------- Stats ---------- */

.stats-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-2); margin-bottom: var(--space-8);
}
.stat {
  background: var(--carte); padding: var(--space-3);
  border: var(--border-1) solid var(--trait); box-shadow: var(--shadow-pixel-sm);
  min-width: 0; overflow: hidden;
}
.stat__v {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.03em;
  font-feature-settings: "tnum"; white-space: nowrap;
}
.stat__u { font-family: var(--mo); font-size: var(--text-xs); font-weight: var(--weight-bold); margin-left: 2px; opacity: 0.7; }
.stat__l {
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre-douce); margin-top: var(--space-2);
}

.graphe-bloc { margin-bottom: var(--space-8); }
.graphe-bloc svg { width: 100%; height: auto; display: block; overflow: visible; margin-top: var(--space-3); }
.g-axe { stroke: var(--encre); stroke-width: 2; }
.g-txt { font-family: var(--mo); font-size: 9px; fill: var(--encre-douce); }
.g-val { font-family: var(--mo); font-size: 9.5px; font-weight: 700; fill: var(--encre); }
.g-ligne { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linejoin: miter; }
.g-barre { fill: var(--creux); stroke: var(--encre); stroke-width: 2; }
.g-barre--fait { fill: var(--accent); stroke: var(--encre); stroke-width: 2; }