/* ============================================================
   SOMATHEON — feuille de style de l'application
   Écrite à la main, sans chaîne de build : aucune étape Node
   entre l'édition et le rendu.

   Les classes utilitaires de la section 9 portent des noms hérités
   (`bg-slate-900`, `text-orange-400`…). Elles sont redirigées vers les
   jetons de design plutôt que renommées dans trente gabarits : le nom
   reste un identifiant, la valeur vit ici. Toute couleur de l'interface
   se change donc à un seul endroit.
   ============================================================ */

/* ── 1. Jetons de design ──────────────────────────────────── */
.exercise-preview {
  position: fixed;
  z-index: 1000;
  width: min(400px, calc(100vw - 24px));
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid var(--color-gray-400);
  border-radius: 16px;
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 12px 40px #0005;
}
.exercise-preview__title { font-weight: 700; margin-bottom: 12px; }
.exercise-preview img { display: block; width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
[data-exercise-preview] { -webkit-touch-callout: none; user-select: none; }

:root {
  /* Marque */
  --color-primary:        #53CA6B;
  --color-primary-dark:   #256933;
  --color-primary-light:  #D0E6D4;
  --color-primary-pale:   #F6F9F7;
  --color-secondary:      #5CC1A3;
  --color-accent:         #CC51B3;

  /* Neutres */
  --color-gray-900: #161D18;
  --color-gray-800: #29322B;
  --color-gray-600: #59695C;
  --color-gray-400: #8D9A90;
  --color-gray-200: #C9CFCA;
  --color-gray-100: #EAEBEA;
  --color-gray-50:  #F7F8F7;

  /* Texte */
  --text-primary:   #161D18;
  --text-secondary: #59695C;
  --text-muted:     #5F6D63;
  --text-on-bright: #161D18;
  --text-accent:    #256933;

  /* Fonds */
  --bg-surface: #FFFFFF;
  --bg-default: #F7F8F7;
  --bg-muted:   #EAEBEA;
  --bg-dark:    #161D18;
  /* Surfaces volontairement sombres. Contrairement a l'echelle `gray`, elles
     ne sont jamais inversees : elles portent toujours du texte clair. */
  --bg-deep:    #161D18;
  --bg-strong:  #29322B;
  --text-on-dark-muted: #B7C1BA;

  /* Accents propres au planificateur. Ils ont leur équivalent sombre plus bas,
     au lieu de conserver des pastels blancs derrière un texte clair. */
  --discipline-calisthenie:      #7B3F98;
  --discipline-calisthenie-pale: #F7F0FA;
  --discipline-calisthenie-line: #DFC8E8;
  --discipline-hyrox:            #A94B18;
  --discipline-hyrox-pale:       #FFF4EB;
  --discipline-hyrox-line:       #F2CDB5;

  /* États */
  --color-success:      #22C55E;
  --color-success-dark: #15803D;
  --color-success-pale: #EAF7EE;
  --color-success-line: #B7E4C6;
  --color-warning:      #F59E0B;
  --color-warning-dark: #92600A;
  --color-warning-pale: #FEF5E5;
  --color-warning-line: #F3D9A4;
  --color-error:        #EF4444;
  --color-error-dark:   #B91C1C;
  --color-error-pale:   #FDECEC;
  --color-error-line:   #F3B4B4;

  /* Espacements */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-7: 1.75rem;  --space-8: 2rem;     --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;    --space-20: 5rem;
  --space-24: 6rem;

  /* Typographie */
  --font-sans: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 0.75rem;   --font-size-sm: 0.875rem;
  --font-size-base: 1rem;    --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;   --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;     --font-size-6xl: 3.75rem;

  --leading-tight: 1.25;  --leading-snug: 1.375;
  --leading-normal: 1.5;  --leading-relaxed: 1.625;

  --fw-normal: 400;  --fw-medium: 500;  --fw-semibold: 600;
  --fw-bold: 700;    --fw-extrabold: 800;

  /* Rayons */
  --radius-sm: 0.25rem;  --radius-md: 0.5rem;   --radius-lg: 0.75rem;
  --radius-xl: 1rem;     --radius-2xl: 1.5rem;  --radius-full: 9999px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(22, 29, 24, 0.06);
  --shadow-md: 0 4px 12px rgba(22, 29, 24, 0.10);
  --shadow-lg: 0 8px 24px rgba(22, 29, 24, 0.14);
  --shadow-xl: 0 16px 40px rgba(22, 29, 24, 0.18);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Profondeurs. Déclarées ensemble et nommées : éparpillées dans la feuille,
     elles finissent par se contredire et un élément passe derrière un autre
     sans qu'on sache lequel a la priorité. L'ordre ci-dessous est la règle. */
  --z-fond: 1;        /* décors d'accroche, derrière le contenu */
  --z-contenu: 2;     /* texte posé sur un décor */
  --z-flottant: 30;   /* case de calendrier survolée */
  --z-apercu: 40;     /* aperçu de séance, au-dessus des cases voisines */
  --z-entete: 100;    /* en-tête collant, au-dessus du contenu de la page */
  --z-coach: 110;     /* bulle et fenêtre du coach, au-dessus de l'en-tête */

  /* Gabarit */
  --container-max: 1200px;
  --header-height: 72px;
  /* Hauteur de l'encoche/île dynamique en PWA plein écran sur iPhone : avec
     apple-mobile-web-app-status-bar-style=black-translucent et
     viewport-fit=cover, le contenu est dessiné sous la barre système. Nulle
     hors de ce contexte (Android, desktop, Safari normal). */
  --safe-top: env(safe-area-inset-top, 0px);
  --header-height-total: calc(var(--header-height) + var(--safe-top));

  color-scheme: light;

  /* Marque : les deux racines du nom, chacune sa couleur.
     Redéfinies dans les zones sombres (voir section 3). */
  --brand-soma:  var(--color-gray-900);
  --brand-theon: var(--color-primary-dark);
}

/* ── 2. Réinitialisation ──────────────────────────────────── */

/* `hidden` doit masquer, toujours.
   
   La règle du navigateur — `[hidden] { display: none }` — a la spécificité la
   plus faible qui soit : n'importe quel `display` posé sur l'élément la bat.
   Un `element.hidden = true` en JavaScript n'a alors **aucun effet visible**,
   et le défaut est particulièrement traître : le script croit avoir masqué, le
   reste de l'interface est recalculé sans l'élément, et celui-ci reste à
   l'écran avec des valeurs périmées.
   
   C'est exactement ce qui se produisait sur le cycle de pratiques : une
   discipline décochée gardait sa carte, son numéro d'ordre d'origine et aucune
   date, pendant que le résumé et la frise, eux, l'ignoraient. Tout se
   contredisait à l'écran pour cette seule raison. */
[hidden] { display: none !important; }

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-default);
  min-height: 100vh;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
ul, ol { list-style: none; }

/* Sans cet héritage, les champs reprennent la police du système et la
   mise en page dérive. */
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* Anneau de focus : exigence d'accessibilité, pas une décoration. */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── 3. Marque SOMA / THEON ───────────────────────────────── */
/* Le nom se lit en deux racines — sôma, le corps ; theôn, des dieux.
   Deux couleurs pour que la composition se voie au premier coup d'œil. */
.brand {
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand__soma  { color: var(--brand-soma); }
.brand__theon { color: var(--brand-theon); }

/* Sur fond sombre, les deux couleurs basculent ensemble. */
.site-header,
.site-footer,
.hero,
.on-dark {
  --brand-soma: #FFFFFF;
  --brand-theon: var(--color-primary);
}

.brand-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-extrabold);
  font-size: var(--font-size-lg);
  color: var(--text-on-bright);
  letter-spacing: -0.02em;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.site-logo .brand { font-size: var(--font-size-xl); }

.site-logo:hover .brand-mark {
  transform: rotate(-5deg) scale(1.05);
  box-shadow: 0 0 16px rgba(83, 202, 107, 0.45);
}

/* ── 4. En-tête et navigation ─────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  height: var(--header-height-total);
  padding-top: var(--safe-top);
  background-color: rgba(22, 29, 24, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(83, 202, 107, 0.15);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav__link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 60%;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transform: translateX(-50%) scaleX(0);
  transition: transform var(--transition-base);
}

.site-nav__link:hover {
  color: #FFFFFF;
  background-color: rgba(83, 202, 107, 0.10);
}

.site-nav__link:hover::after,
.site-nav__link--active::after { transform: translateX(-50%) scaleX(1); }

.site-nav__link--active { color: var(--color-primary); }

.site-nav__cta {
  padding: var(--space-2) var(--space-5);
  background: var(--color-primary);
  color: var(--text-on-bright);
  border-radius: var(--radius-full);
  font-weight: var(--fw-bold);
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.site-nav__cta:hover {
  background: var(--color-primary-dark);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(83, 202, 107, 0.40);
}

/* ── 5. Pied de page ──────────────────────────────────────── */
.site-footer {
  background-color: var(--bg-dark);
  color: var(--text-on-dark-muted);
  padding-block: var(--space-12) var(--space-6);
  margin-top: var(--space-16);
}

.footer-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.footer-note {
  font-size: var(--font-size-xs);
  color: var(--text-on-dark-muted);
  line-height: var(--leading-relaxed);
  max-width: 640px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-size-xs);
}

.footer-links a { color: var(--text-on-dark-muted); }
.footer-links a:hover { color: var(--color-primary); }

/* ── 6. Boutons ───────────────────────────────────────────── */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-7);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-on-bright);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(83, 202, 107, 0.40);
}

.btn--primary:active { transform: translateY(0); box-shadow: none; }

.btn--outline {
  background-color: transparent;
  color: var(--text-accent);
  border-color: var(--color-gray-200);
}

.btn--outline:hover {
  border-color: var(--color-primary-dark);
  background-color: var(--color-primary-pale);
  transform: translateY(-2px);
}

.btn--outline-light {
  background-color: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.35);
}

.btn--outline-light:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

.btn--sm { padding: var(--space-2) var(--space-5); font-size: var(--font-size-xs); }
.btn--lg { padding: var(--space-4) var(--space-10); font-size: var(--font-size-base); }
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

/* ── 7. Surfaces et accroche ──────────────────────────────── */
.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.section-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-accent);
  background-color: var(--color-primary-light);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-dark);
  padding-block: var(--space-20);

  /* Sort du conteneur central pour occuper toute la largeur : une accroche
     encadrée de marges perd sa force. `overflow-x: hidden` sur `body` évite
     la barre de défilement que `100vw` provoquerait. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: calc(-1 * var(--space-8));
}

.hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 160%;
  background: radial-gradient(ellipse at center, rgba(83, 202, 107, 0.18) 0%, transparent 70%);
  animation: pulse-glow 6s ease-in-out infinite;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(83, 202, 107, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 202, 107, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: var(--z-contenu);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(83, 202, 107, 0.12);
  border: 1px solid rgba(83, 202, 107, 0.25);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
}

.hero__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: blink 1.5s ease-in-out infinite;
}

.hero__title {
  font-size: clamp(2.25rem, 5vw, var(--font-size-5xl));
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.hero__title .highlight { color: var(--color-primary); }

.hero__subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-on-dark-muted);
  line-height: var(--leading-relaxed);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hero__stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: 1;
}

.hero__stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-on-dark-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Bandeau de titre des pages intérieures.

   Sans lui, chaque page s'ouvre sur un titre noir posé sur du blanc : le fond
   est à 3 % des cartes, donc rien ne structure l'écran et l'application perd
   toute identité. Ce bandeau ancre la page et fait respirer le contenu clair
   qui suit. */
.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-strong) 100%);
  padding-block: var(--space-10);
  margin-bottom: var(--space-8);

  /* Même sortie de conteneur que l'accroche : le bandeau va de bord à bord. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: calc(-1 * var(--space-8));
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -8%;
  width: 45%;
  height: 180%;
  background: radial-gradient(ellipse, rgba(83, 202, 107, 0.14) 0%, transparent 65%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: var(--z-contenu);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.page-hero__title {
  font-size: clamp(1.75rem, 3.5vw, var(--font-size-4xl));
  font-weight: var(--fw-extrabold);
  color: #FFFFFF;
  line-height: var(--leading-tight);
}

.page-hero__subtitle {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-on-dark-muted);
  max-width: 560px;
  line-height: var(--leading-relaxed);
}

.page-hero__aside {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.page-hero__aside:hover { color: #FFFFFF; }

/* ── 8. Formulaires ───────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="time"], input[type="url"],
select, textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              background-color var(--transition-fast);
}

input:hover, select:hover, textarea:hover { border-color: var(--color-gray-400); }

input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(83, 202, 107, 0.18);
  background-color: var(--color-primary-pale);
}

::placeholder { color: var(--text-muted); }

textarea { resize: vertical; min-height: 7rem; }

/* `accent-color` évite de réimplémenter le contrôle natif : sans lui, cases,
   boutons radio et curseurs restent au bleu du système, seule touche de
   couleur étrangère à la marque. */
input[type="checkbox"], input[type="radio"], input[type="range"] {
  width: auto;
  accent-color: var(--color-primary);
}

input[type="range"] { width: 100%; }

label { font-weight: var(--fw-medium); }

/* ── 9. Utilitaires ───────────────────────────────────────── */
/* Noms hérités des gabarits, valeurs redirigées vers les jetons. */

/* Dimensions */
.h-full { height: 100%; }
.w-full { width: 100%; }
.h-1 { height: 0.25rem; }
.h-1\.5 { height: 0.375rem; }

/* Affichage */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.cursor-pointer { cursor: pointer; }

/* `<details>` : le marqueur natif ne suit pas le style et diffère d'un
   navigateur à l'autre. On le remplace par un chevron cohérent. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before {
  content: '▸';
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--color-primary);
  transition: transform var(--transition-fast);
}
details[open] > summary::before { transform: rotate(90deg); }
.flex { display: flex; }
.grid { display: grid; }

.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

.sticky { position: sticky; }
.bottom-4 { bottom: var(--space-4); }

/* Marges */
.mx-auto { margin-inline: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.ml-1 { margin-left: var(--space-1); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-16 { margin-top: var(--space-16); }

.space-y-1 > * + * { margin-top: var(--space-1); }
.space-y-2 > * + * { margin-top: var(--space-2); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-4 > * + * { margin-top: var(--space-4); }
.space-y-5 > * + * { margin-top: var(--space-5); }
.space-y-6 > * + * { margin-top: var(--space-6); }
.space-y-8 > * + * { margin-top: var(--space-8); }

.divide-y > * + * { border-top: 1px solid var(--color-gray-100); }
.divide-slate-800 > * + * { border-color: var(--color-gray-100); }

/* Largeurs */
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-5xl { max-width: var(--container-max); }
.max-w-\[80\%\] { max-width: 80%; }
.max-w-\[85\%\] { max-width: 85%; }

/* Remplissage */
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.px-5 { padding-inline: var(--space-5); }
.px-6 { padding-inline: var(--space-6); }
.pl-5 { padding-left: var(--space-5); }

.py-1\.5 { padding-block: 0.375rem; }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }
.py-24 { padding-block: var(--space-24); }

/* Typographie */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.font-medium { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }

.tracking-tight { letter-spacing: -0.02em; }
.tracking-widest { letter-spacing: 0.12em; }

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.leading-relaxed { line-height: 1.625; }
.list-disc { list-style-type: disc; }
.overflow-x-auto { overflow-x: auto; }
.underline { text-decoration: underline; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.outline-none { outline: none; }

/* Couleurs de texte : l'ancienne échelle sombre pointe vers la nouvelle. */
.text-white { color: #FFFFFF; }
.text-slate-100 { color: var(--text-primary); }
.text-slate-300 { color: var(--text-secondary); }
.text-slate-400 { color: var(--text-secondary); }
.text-slate-500 { color: var(--text-muted); }

/* L'accent de l'application était orange ; c'est désormais le vert de marque. */
.text-orange-300 { color: var(--text-accent); }
.text-orange-400 { color: var(--text-accent); }
.text-orange-500 { color: var(--text-accent); }

.text-amber-200 { color: var(--color-warning-dark); }
.text-amber-100 { color: var(--color-warning-dark); }
.text-amber-300 { color: var(--color-warning-dark); }
.text-amber-400 { color: var(--color-warning-dark); }
.text-red-300 { color: var(--color-error-dark); }
.text-red-200 { color: var(--color-error-dark); }
.text-red-400 { color: var(--color-error-dark); }
.text-emerald-300 { color: var(--color-success-dark); }
.text-emerald-400 { color: var(--color-success-dark); }

/* Fonds */
.bg-transparent { background-color: transparent; }
.bg-slate-950 { background-color: var(--bg-default); }
.bg-slate-900 { background-color: var(--bg-surface); }
.bg-slate-800 { background-color: var(--bg-muted); }

/* Les surfaces de carte. Le fond de page et le blanc des cartes ne diffèrent
   que de 3 % : sans élévation, la carte disparaît purement et simplement.
   C'est l'ombre, pas la bordure, qui fait exister la surface. */
.bg-slate-900\/50,
.bg-slate-900\/60 {
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.bg-orange-600 { background-color: var(--color-primary); color: var(--text-on-bright); }
.bg-orange-600\/90 { background-color: var(--color-primary); color: var(--text-on-bright); }
.bg-amber-600 { background-color: var(--color-warning); color: var(--text-on-bright); }
.bg-amber-950\/30 { background-color: var(--color-warning-pale); }
.bg-amber-950\/40 { background-color: var(--color-warning-pale); }
.bg-red-950\/50 { background-color: var(--color-error-pale); }
.bg-red-950\/30 { background-color: var(--color-error-pale); }
.bg-emerald-950\/30 { background-color: var(--color-success-pale); }
.bg-orange-950\/20 { background-color: var(--color-primary-pale); }

/* Bordures */
.border { border: 1px solid var(--color-gray-100); }
.border-t { border-top: 1px solid var(--color-gray-100); }
.border-b { border-bottom: 1px solid var(--color-gray-100); }

.border-slate-700 { border-color: var(--color-gray-200); }
.border-slate-800 { border-color: var(--color-gray-100); }
.border-orange-800\/50 { border-color: var(--color-primary-light); }
.border-amber-700\/50 { border-color: var(--color-warning-line); }
.border-amber-700\/40 { border-color: var(--color-warning-line); }
.border-emerald-800\/50 { border-color: var(--color-success-line); }
.border-red-800 { border-color: var(--color-error-line); }
.border-red-800\/60 { border-color: var(--color-error-line); }

.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-bl-sm { border-bottom-left-radius: var(--radius-sm); }
.rounded-br-sm { border-bottom-right-radius: var(--radius-sm); }

/* Survols */
.hover\:bg-orange-500:hover { background-color: var(--color-primary-dark); color: #FFFFFF; }
.hover\:border-slate-500:hover { border-color: var(--color-primary-dark); }
.hover\:text-orange-300:hover { color: var(--color-primary); }
.hover\:text-slate-300:hover { color: var(--text-primary); }
.hover\:text-white:hover { color: #FFFFFF; }
.placeholder\:text-slate-600::placeholder { color: var(--text-muted); }

/* ── 10. Calendrier des séances ───────────────────────────── */

/* En-tête de l'agenda. Le titre porte le réglage d'historique : il se comporte
   donc comme une ligne de formulaire, pas comme un simple titre. */
.agenda-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.agenda-histo,
.agenda-histo__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Les champs du site occupent toute la largeur ; celui-ci vit à l'intérieur
   d'une phrase et doit garder la taille du nombre qu'il contient. */
.agenda-histo__champ {
  width: 4.5rem;
  padding: 0.15rem 0.4rem;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: normal;
  text-align: center;
}

.cal-head,
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}

.cal-head {
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
}

.cal-week { margin-top: 0.25rem; }

.cal-day {
  position: relative;
  min-height: 4.5rem;
  padding: 0.25rem;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
}

/* Sans cette remontée, l'aperçu d'un lundi passe DERRIÈRE les cases de la
   semaine suivante : entre deux éléments positionnés de même profondeur,
   c'est l'ordre du document qui tranche, et un `z-index` posé sur l'aperçu ne
   sort pas du contexte d'empilement de sa case. C'est la case entière qu'il
   faut élever, au survol comme au clavier. */
.cal-day:hover,
.cal-day:focus-within { z-index: var(--z-flottant); }

/* Idem pour la semaine : chaque rangée est un conteneur de grille, et une
   rangée ultérieure recouvrirait l'aperçu débordant de la précédente. */
.cal-week { position: relative; }
.cal-week:hover,
.cal-week:focus-within { z-index: var(--z-flottant); }

.cal-today { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.cal-past { opacity: 0.55; }
.cal-selected {
  border-color: var(--color-primary-dark);
  background-color: var(--color-primary-pale);
  box-shadow: 0 0 0 2px var(--color-primary-dark);
  opacity: 1;
}

.cal-num {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: right;
  padding-inline: 0.25rem;
}

.cal-chip {
  position: relative;
  display: block;
  margin-top: 0.25rem;
  padding: 0.25rem 0.375rem;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: var(--text-on-bright);
  transition: filter var(--transition-fast);
}

.cal-chip:hover,
.cal-chip:focus-visible {
  z-index: var(--z-flottant);
  filter: brightness(1.06);
}
.cal-chip-done { background-color: var(--color-primary-light); color: var(--text-accent); }
.cal-chip-active {
  background-color: var(--color-primary);
  color: var(--text-on-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.cal-chip-cancelled {
  background-color: var(--color-gray-200);
  color: var(--text-muted);
  text-decoration: line-through;
}
.cal-preview-cancelled {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-danger);
  text-decoration: none;
}
.cal-chip-deload { background-color: var(--color-warning); color: var(--text-on-bright); }
.cal-chip-rest {
  border: 1px solid var(--color-primary-light);
  background-color: var(--color-primary-pale);
  color: var(--text-accent);
  cursor: default;
}

.session-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.75rem 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.session-switcher__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  color: var(--text-primary);
}

.session-switcher__arrow--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.session-cancelled {
  border-color: color-mix(in srgb, var(--color-danger) 50%, transparent);
  background-color: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.cal-chip-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Aperçu au survol : présent dans le document, simplement masqué —
   survoler une date ne déclenche aucune requête. */
.cal-preview {
  position: absolute;
  z-index: var(--z-apercu);
  left: 0;
  top: calc(100% + 0.25rem);
  width: 16rem;
  padding: var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-weight: var(--fw-normal);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast),
              visibility var(--transition-fast);
}

.cal-chip:hover .cal-preview,
.cal-chip:focus-visible .cal-preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* En fin de semaine, l'aperçu sortirait de l'écran par la droite. */
.cal-day:nth-child(6) .cal-preview,
.cal-day:nth-child(7) .cal-preview { left: auto; right: 0; }

.cal-week:first-of-type .cal-preview { top: calc(100% + 0.25rem); bottom: auto; }

.cal-preview-title {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--font-size-sm);
}

.cal-preview-meta {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.cal-preview-list {
  display: block;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-gray-100);
}

.cal-preview-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  padding-block: 0.125rem;
  color: var(--text-secondary);
}

.cal-preview-dim { color: var(--text-muted); }

.cal-preview-done {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-success-dark);
}

/* ── 9 bis. Onglets ───────────────────────────────────────── */
/* De simples liens : l'adresse reste partageable, le bouton « précédent »
   fonctionne, et rien ne dépend de JavaScript. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 2px solid var(--color-gray-100);
}

.tab {
  position: relative;
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.tab::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -2px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.tab:hover { color: var(--text-primary); background-color: var(--color-primary-pale); }
.tab--active { color: var(--text-accent); }
.tab--active::after { transform: scaleX(1); }

/* ── 10 bis. Repas et courses ─────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-full);
  background-color: var(--color-primary-pale);
  border: 1px solid var(--color-primary-light);
  color: var(--text-accent);
}

/* Étapes numérotées : le compteur CSS évite d'écrire les numéros dans le
   contenu, où une étape insérée les décalerait tous. */
.recipe-step {
  counter-increment: etape;
  position: relative;
  padding-left: var(--space-8);
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.recipe-step::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 1px;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-light);
  color: var(--text-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

ol:has(.recipe-step) { counter-reset: etape; }

/* Ajustement des quantités : cible tactile suffisante, sans dominer la ligne. */
.qty-btn {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
  background-color: var(--bg-surface);
  color: var(--text-accent);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.qty-btn:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-pale);
}

.qty-value {
  min-width: 5rem;
  text-align: right;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* ── 10 ter. Graphiques de suivi ──────────────────────────── */
/* Tracés en SVG côté serveur : la politique de sécurité interdit toute
   bibliothèque externe, et le projet n'a pas de chaîne JavaScript. */
.spark {
  display: block;
  width: 100%;
  height: 4rem;
  margin-top: var(--space-3);
  overflow: visible;
}

.spark-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.spark-area {
  fill: var(--color-primary);
  opacity: 0.12;
  stroke: none;
}

/* Ligne d'option cochable : toute la ligne est cliquable, pas seulement la
   case — une cible de 13 px au doigt est un défaut d'ergonomie. */
.option-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.option-row:hover { border-color: var(--color-primary); background-color: var(--color-primary-pale); }
.option-row input { margin-top: 0.2rem; flex-shrink: 0; }
.option-row:has(input:checked) { border-color: var(--color-primary); }

/* ── 10 quater. Déroulé de séance ─────────────────────────── */
.runner {
  padding: var(--space-5);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

/* Pastilles de progression : l'avancement se lit d'un coup d'œil, et chaque
   pastille ramène à son exercice — indispensable pour reprendre un mouvement
   passé sans refaire tout le parcours. */
.pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-gray-200);
  background-color: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.pastille:hover { transform: scale(1.08); }
.pastille--done { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--text-on-bright); }
.pastille--skipped { background-color: var(--color-warning-pale); border-color: var(--color-warning); color: var(--color-warning-dark); }
.pastille--courante { border-color: var(--color-primary-dark); box-shadow: 0 0 0 3px var(--color-primary-pale); }

/* Récapitulatif partageable : l'aperçu reste assez grand pour juger la fiche,
   sans repousser le retour au calendrier sous plusieurs écrans sur mobile. */
.workout-share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-7);
  padding: var(--space-5);
  overflow: hidden;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--color-primary) 38%, var(--color-gray-100));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--color-primary) 15%, transparent), transparent 42%),
    var(--bg-surface);
}

.workout-share__copy { align-self: end; }
.workout-share__eyebrow {
  color: var(--color-success-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.workout-share h2 { margin-top: var(--space-2); font-size: var(--font-size-xl); }
.workout-share__copy > p:last-child { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--font-size-sm); }
.workout-share__preview {
  grid-row: span 2;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.workout-share__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-self: start; }
.workout-share__status { flex-basis: 100%; min-height: 1.25rem; color: var(--text-muted); font-size: var(--font-size-xs); }

.session-active-progress {
  height: .5rem;
  margin-top: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
}
.session-active-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

.workout-results { width: min(100%, 58rem); margin-inline: auto; }
.workout-results__hero {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}
.workout-results__hero h1 { margin-top: var(--space-2); font-size: clamp(1.75rem, 5vw, 2.6rem); }
.workout-results__hero > div > p:last-child { margin-top: var(--space-2); color: var(--text-muted); }
.workout-results__score {
  display: grid;
  place-items: center;
  flex: 0 0 8rem;
  aspect-ratio: 1;
  border: 10px solid color-mix(in srgb, var(--color-primary) 72%, var(--bg-muted));
  border-radius: 50%;
  background: var(--color-primary-pale);
}
.workout-results__score strong { font-size: 1.8rem; line-height: 1; }
.workout-results__score span { margin-top: -.9rem; color: var(--text-muted); font-size: var(--font-size-xs); }
.workout-results__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.workout-results__metrics > div {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.workout-results__metrics span { color: var(--text-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; }
.workout-results__metrics strong { font-size: var(--font-size-xl); }
.workout-results__extras { margin-top: var(--space-3); color: var(--color-success-dark); font-weight: var(--fw-bold); }
.workout-results__section { margin-top: var(--space-7); }
.workout-results__heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: var(--space-4); }
.workout-results__heading h2 { margin-top: var(--space-1); }
.workout-results__exercises { display: grid; gap: var(--space-3); }
.workout-result-exercise {
  padding: var(--space-5);
  border: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.workout-result-exercise--skipped { border-left-color: var(--color-warning); opacity: .78; }
.workout-result-exercise__head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.workout-result-exercise__head span { color: var(--color-success-dark); font-size: var(--font-size-xs); font-weight: var(--fw-bold); text-transform: uppercase; }
.workout-result-exercise--skipped .workout-result-exercise__head span { color: var(--color-warning-dark); }
.workout-result-sets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); padding: 0; list-style: none; }
.workout-result-sets li { display: grid; gap: .1rem; min-width: 8.5rem; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-default); }
.workout-result-sets b { font-size: var(--font-size-xs); color: var(--text-muted); }
.workout-coach {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-7);
  padding: var(--space-6);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-xl);
  background: var(--color-primary-pale);
}
.workout-coach__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-lg); background: var(--color-primary); color: var(--text-on-bright); font-size: 1.5rem; }
.workout-coach h2 { margin-top: var(--space-1); }
.workout-coach p:last-child { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-sm); }

@media (max-width: 640px) {
  .workout-share { grid-template-columns: minmax(0, 1fr) 7.5rem; padding: var(--space-4); }
  .workout-share__preview { grid-row: 1; grid-column: 2; }
  .workout-share__actions { grid-column: 1 / -1; }
  .workout-share__actions .btn { flex: 1 1 100%; }
  .workout-results__hero { align-items: flex-start; padding: var(--space-5); }
  .workout-results__score { flex-basis: 5.5rem; border-width: 7px; }
  .workout-results__score strong { font-size: 1.3rem; }
  .workout-results__metrics { grid-template-columns: repeat(2, 1fr); }
  .workout-results__metrics > div { padding: var(--space-4); }
  .workout-coach { grid-template-columns: auto 1fr; padding: var(--space-5); }
  .workout-coach .btn { grid-column: 1 / -1; width: 100%; }
}

/* ── 11. Suivi des travaux ────────────────────────────────── */
.job-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
}

.job-ok { border-color: var(--color-primary-light); background-color: var(--color-primary-pale); }
.job-warn { border-color: var(--color-warning-line); background-color: var(--color-warning-pale); }
.job-error { border-color: var(--color-error-line); background-color: var(--color-error-pale); }

.job-icon { font-weight: var(--fw-bold); }
.job-ok .job-icon { color: var(--text-accent); }
.job-warn .job-icon { color: var(--color-warning-dark); }
.job-error .job-icon { color: var(--color-error-dark); }

.job-spinner {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border: 2px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── 12. Animations ───────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes pulse { 50% { opacity: 0.5; } }
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-fade-up { animation: fade-in-up 0.6s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-pulse,
  .animate-fade-up,
  .job-spinner,
  .hero::before,
  .hero__badge::before { animation: none; }
  .cal-preview { transition: none; }
}

/* ── 13. Points de rupture ────────────────────────────────── */
@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:text-5xl { font-size: var(--font-size-5xl); }
}

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

@media (max-width: 767px) {
  :root { --header-height: 64px; }

  .hero { padding-block: var(--space-12); }
  .cal-day { min-height: 3.5rem; }
  .cal-preview { display: none; }
  .footer-inner { padding-inline: var(--space-4); }
}

/* ── 19 bis. Menu replié ─────────────────────────────────────
   Le bouton n'existe que si le script a pris la main : `js-menu` est posée par
   `app.js`. La navigation repliée derrière un bouton mort serait une impasse,
   celle-ci n'apparaît donc jamais sans lui. */

.burger { display: none; }
.lien-evitement {
  position: absolute;
  left: -9999px;
  z-index: var(--z-entete);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--text-on-bright);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
}
/* Il n'apparaît qu'au clavier : à la souris, personne n'en a besoin, et il
   masquerait le logo. */
.lien-evitement:focus { left: var(--space-4); top: var(--space-4); }

/* Seuil mesuré et non choisi au jugé : la barre d'un compte connecté — six
   entrées et la déconnexion — réclame 1006 px avec le logo. En dessous, elle
   débordait de l'écran par la droite. Le repli sans JavaScript suit le même
   seuil, sans quoi il resterait une bande qui déborde. */
@media (max-width: 1023px) {
  .site-header { height: auto; position: static; }

  .header-inner {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  /* Sans JavaScript, la navigation reste une ligne sous l'en-tête, qui défile
     horizontalement : c'est le repli de secours, et il doit rester utilisable. */
  .site-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: var(--space-1);
  }

  .js-menu .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44 px : la cible tactile en dessous de laquelle on rate le bouton une
       fois sur trois. */
    width: 44px;
    height: 44px;
    margin-inline-start: auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(83, 202, 107, 0.25);
    background: rgba(83, 202, 107, 0.10);
    color: var(--color-primary);
  }

  .js-menu .burger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* Trois barres dessinées en une seule boîte : deux ombres portées suffisent,
     et l'ensemble bascule en croix sans second élément à animer. */
  .js-menu .burger__barres {
    position: relative;
    width: 20px;
    height: 2px;
    border-radius: var(--radius-full);
    background: currentColor;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast),
                transform var(--transition-fast);
  }

  .js-menu [data-menu="ouvert"] .burger__barres {
    background: transparent;
    box-shadow: 0 0 0 currentColor, 0 0 0 currentColor;
  }

  .js-menu [data-menu="ouvert"] .burger__barres::before,
  .js-menu [data-menu="ouvert"] .burger__barres::after {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    border-radius: var(--radius-full);
  }

  .js-menu [data-menu="ouvert"] .burger__barres::before { transform: rotate(45deg); }
  .js-menu [data-menu="ouvert"] .burger__barres::after { transform: rotate(-45deg); }

  /* Avec le bouton, l'en-tête tient de nouveau sur une seule ligne : il
     redevient collant, ce qui remet la navigation à portée de pouce sur les
     longues pages. */
  .js-menu .site-header {
    position: sticky;
    top: 0;
    height: var(--header-height-total);
  }

  .js-menu .header-inner {
    flex-wrap: nowrap;
    height: 100%;
    padding-inline: var(--space-4);
  }

  .js-menu .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    width: auto;
    overflow: visible;
    padding: var(--space-3) var(--space-4) var(--space-5);
    /* Fond parfaitement opaque, et surtout pas de `backdrop-filter` ici :
       imbriqué sous l'en-tête qui en porte déjà un, le panneau était composé
       dans la couche de son parent et laissait lire le titre de la page au
       travers. Un menu translucide sur du texte ne se lit pas. */
    background-color: #161D18;
    border-bottom: 1px solid rgba(83, 202, 107, 0.20);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  }

  .js-menu [data-menu="ouvert"] .site-nav { display: flex; }

  /* Dans le panneau, chaque entrée occupe toute la largeur : viser un mot de
     six lettres au pouce ne marche pas. */
  .js-menu .site-nav__link,
  .js-menu .site-nav__cta {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
    padding-inline: var(--space-4);
    font-size: var(--font-size-base);
    text-transform: none;
    letter-spacing: 0.01em;
  }

  .js-menu .site-nav__cta { justify-content: center; margin-top: var(--space-2); }
  .js-menu .site-nav form { width: 100%; }
  .js-menu .site-nav form .site-nav__link { justify-content: flex-start; }
  /* Le soulignement animé vise un lien centré : sur une entrée pleine largeur
     il flotte au milieu du vide. */
  .js-menu .site-nav__link::after { display: none; }
}

/* ── 20. Tableau de bord ──────────────────────────────────────
   Quatre choses et pas une de plus : l'heure, l'objectif, la séance à lancer,
   le repas du moment. Tout le reste de la page est du second rang et vient
   après. */

.page-hero__eyebrow {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: capitalize;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* Chiffres tabulaires : sans eux, la largeur des glyphes change à chaque
   seconde et l'heure tressaute. */
.horloge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0.02em;
}

/* Deux colonnes : ce qu'on regarde à gauche, ce qu'on fait à droite. */
.tdb {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  /* Sans cela, la carte objectif s'étire jusqu'au bas de la colonne voisine et
     laisse un grand vide sous les courbes. */
  align-items: start;
}

.tdb__cote {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .tdb { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* ── Cartes ── */
.carte {
  background-color: var(--bg-surface);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

.carte--objectif { border-top: 3px solid var(--color-primary); }
.carte--alerte {
  background-color: var(--color-warning-pale);
  border-color: var(--color-warning-line);
}
.carte--succes {
  background-color: var(--color-success-pale);
  border-color: var(--color-success-line);
}

/* La carte d'action porte le geste principal de la page : elle doit se
   distinguer au premier coup d'œil, pas se fondre dans la grille. */
.carte--action {
  background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-strong) 100%);
  border-color: transparent;
  color: #FFFFFF;
}
.carte--action .carte__valeur { color: #FFFFFF; }
.carte--action .carte__label { color: var(--color-primary); }
.carte--action .carte__note,
.carte--action .carte__texte { color: var(--text-on-dark-muted); }
.carte--action .lien-discret { color: var(--color-primary); }

.carte--repas .carte__illu {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  margin-bottom: var(--space-4);
  display: block;
}

.carte__label {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.carte__titre {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.carte__valeur {
  margin-top: var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.carte__texte {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.carte__note {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.carte__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ── Chiffres clés ── */
.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.chiffres b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.chiffres--serres { gap: var(--space-4); }

.jauge {
  height: 6px;
  width: 100%;
  border-radius: var(--radius-full);
  background-color: var(--bg-muted);
  overflow: hidden;
}
.jauge__barre {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
}

/* ── Les deux courbes ── */
.courbes {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gray-100);
}
@media (min-width: 560px) {
  .courbes { grid-template-columns: 1fr 1fr; }
}

.courbe__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.courbe__valeur {
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.courbe__valeur small {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-normal);
  color: var(--text-muted);
  margin-left: 2px;
}
.courbe__valeur em {
  font-style: normal;
  font-size: var(--font-size-sm);
  margin-left: var(--space-2);
}
.est-bon   { color: var(--color-success-dark); }
.est-tiede { color: var(--color-warning-dark); }

.courbe__vide {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
.courbe__vide a { color: var(--text-accent); font-weight: var(--fw-semibold); }

/* Plus haute que la sparkline du bas de page : ce sont les deux courbes
   qu'on est venu voir. */
.spark--grande { height: 96px; margin-top: var(--space-3); }

/* ── Histogramme de consommation ──
   Des barres et non une courbe : les crédits consommés sont une suite de
   journées indépendantes, pas une grandeur continue. Relier deux jours par un
   segment laisserait lire une progression là où il n'y a que deux totaux.

   Le pic est plein, les autres barres translucides : c'est la seule barre que
   l'œil doit trouver sans la chercher. */
.histo-svg {
  display: block;
  width: 100%;
  height: 11rem;
  overflow: visible;
}
.histo-barre { fill: var(--color-primary); opacity: 0.5; }
.histo-barre--pic { opacity: 1; }

.histo-axe {
  position: relative;
  height: 1.1rem;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
.histo-axe__repere { position: absolute; white-space: nowrap; }
/* Une étiquette centrée sur la première barre déborderait à gauche du cadre,
   et la dernière à droite : les deux extrêmes s'ancrent donc par leur bord. */
.histo-axe__repere--milieu { transform: translateX(-50%); }
.histo-axe__repere--fin { right: 0; }

/* ── Listes ── */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.liste-etapes {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  counter-reset: etape;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.liste-etapes li {
  counter-increment: etape;
  padding-left: var(--space-7);
  position: relative;
}
.liste-etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 1px;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-pale);
  border: 1px solid var(--color-primary-light);
  color: var(--text-accent);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
}

.liste-simple { display: flex; flex-direction: column; }
.liste-simple li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
}
.liste-simple li:last-child { border-bottom: none; }

.titre-section {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lien-discret {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
}
.lien-discret:hover { color: var(--color-primary); }

/* Signalement depuis une séance : ce contrôle repose sur une surface sombre.
   Le vert foncé des liens discrets n'y avait pas assez de contraste. */
.signalement__resume {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast),
              background-color var(--transition-fast);
}
.signalement__resume::before { color: var(--color-primary); }
.signalement__resume:hover,
.signalement__resume:focus-visible {
  border-color: var(--color-primary);
  background-color: var(--color-primary-pale);
  color: var(--text-primary);
}

/* ── 21. Carnet de séries et chronomètres ─────────────────────
   Ce bloc est utilisé une main moite entre deux séries : cibles larges,
   chiffres lisibles de loin, aucun geste de précision. */

.chrono {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-gray-100);
  background-color: var(--bg-surface);
  text-align: center;
}

.chrono--repos {
  background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-strong) 100%);
  border-color: transparent;
}
.chrono--repos .chrono__label { color: var(--color-primary); }
.chrono--repos .chrono__valeur { color: #FFFFFF; }
.chrono--repos .lien-discret { color: var(--text-on-dark-muted); }
.chrono--repos .lien-discret:hover { color: #FFFFFF; }

/* Le repos écoulé doit se remarquer sans qu'on fixe l'écran. */
.chrono--fini { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); }
.chrono--fini .chrono__valeur,
.chrono--fini .chrono__label { color: #FFFFFF; }

.chrono__label {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chrono__valeur {
  margin-top: var(--space-1);
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--text-primary);
  /* Sans chiffres tabulaires, le compte à rebours tressaute à chaque seconde. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.chrono__jauge {
  height: 4px;
  margin: var(--space-3) 0;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.chrono__barre {
  height: 100%;
  width: 100%;
  background-color: var(--color-primary);
  /* Pas de transition : elle ferait dériver la barre du décompte affiché. */
}

.chrono__actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

/* ── Carnet ── */
.carnet {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-gray-100);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.carnet__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.series {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.serie {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-pale);
  border: 1px solid var(--color-primary-light);
}

.serie__rang {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-dark);
  color: #FFFFFF;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
}

.serie__chiffres {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.serie__chiffres b { font-weight: var(--fw-bold); }

/* ── Saisie d'une série ── */
.saisie {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  /* Deux champs côte à côte, le bouton sous toute la largeur : la validation
     doit rester une cible large, atteignable au pouce. */
  .saisie { grid-template-columns: 1fr 1fr; }
  .saisie .chrono--maintien,
  .saisie__valider { grid-column: 1 / -1; }
}

.saisie__champ { display: flex; flex-direction: column; gap: var(--space-2); }
.saisie__champ span {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Les chiffres se relisent d'un coup d'œil entre deux séries. */
.saisie__champ input {
  font-size: var(--font-size-xl);
  font-weight: var(--fw-semibold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Historique et progression ── */
.histo {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-gray-100);
  background-color: var(--bg-default);
}

.histo__grille {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.histo__valeur {
  margin-top: var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.verdict {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
}
.verdict--hausse {
  background-color: var(--color-success-pale);
  border: 1px solid var(--color-success-line);
  color: var(--color-success-dark);
}
.verdict--egal {
  background-color: var(--bg-muted);
  border: 1px solid var(--color-gray-200);
  color: var(--text-secondary);
}
/* Une baisse n'est pas une faute : fatigue, décharge, mauvaise nuit. Le ton
   reste neutre, jamais alarmant. */
.verdict--baisse {
  background-color: var(--color-warning-pale);
  border: 1px solid var(--color-warning-line);
  color: var(--color-warning-dark);
}

/* Volume prescrit atteint : un état, pas une alerte. Aller au bout de ce qui
   était prévu est une réussite. */
.complet {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-success-pale);
  border: 1px solid var(--color-success-line);
  color: var(--color-success-dark);
  font-weight: var(--fw-semibold);
  text-align: center;
}
.complet .carte__note { display: block; color: var(--color-success-dark); opacity: 0.75; }

/* ── 22. Compte : sécurité et applications ────────────────────
   Ces écrans se lisent une fois, dans un moment d'attention : les états
   doivent être lisibles d'un coup d'œil, sans jargon. */

.bandeau-retour {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
}
.bandeau-retour--ok {
  background-color: var(--color-success-pale);
  border: 1px solid var(--color-success-line);
  color: var(--color-success-dark);
}
.bandeau-retour--ko {
  background-color: var(--color-error-pale);
  border: 1px solid var(--color-error-line);
  color: var(--color-error-dark);
}

.carte--compacte { padding: var(--space-4); }

/* Reglage d'apparence compact : une preference de compte ne doit pas prendre
   la hauteur d'un formulaire de profil complet. */
.theme-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.theme-setting__intro { min-width: 12rem; }
.theme-setting__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.theme-picker {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  background-color: var(--bg-muted);
}
.theme-picker__option { position: relative; cursor: pointer; }
.theme-picker__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.theme-picker__option span {
  display: block;
  min-width: 5.25rem;
  padding: .4rem .75rem;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.theme-picker__option input:checked + span {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.theme-picker__option input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

@media (max-width: 640px) {
  .theme-setting { align-items: flex-start; flex-direction: column; }
  .theme-setting__controls,
  .theme-picker { width: 100%; }
  .theme-picker__option span { min-width: 0; padding-inline: .35rem; }
}

.etiquette {
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  background-color: var(--bg-muted);
  color: var(--text-muted);
  white-space: nowrap;
}
.etiquette--ok {
  background-color: var(--color-success-pale);
  border: 1px solid var(--color-success-line);
  color: var(--color-success-dark);
}

/* Une action irréversible ne prend pas la couleur de marque : elle ne doit
   jamais être le bouton que l'on clique par habitude. */
.btn-danger {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-error-line);
  background-color: transparent;
  color: var(--color-error-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.btn-danger:hover { background-color: var(--color-error-pale); }

/* ── MFA ── */
.qr {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background-color: #FFFFFF;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  display: inline-block;
  /* Le QR est un SVG sans dimensions : c'est le conteneur qui les fixe. */
  line-height: 0;
}
.qr svg { width: 200px; height: 200px; }

/* Une clé base32 se recopie caractère par caractère : espacée et monospace,
   sinon on la saisit faux. */
.cle-secrete {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--bg-muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
  letter-spacing: 0.12em;
  word-break: break-all;
}

/* Tableau d'instructions : le contrat d'envoi, le vocabulaire accepté. Sobre
   par construction — c'est de la documentation, pas une carte de tableau de
   bord. */
.table-contrat {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  text-align: left;
}
.table-contrat th,
.table-contrat td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
  vertical-align: top;
}
.table-contrat thead th { color: var(--text-secondary); font-weight: var(--fw-semibold); }
.table-contrat tbody th { color: var(--text-secondary); font-weight: var(--fw-medium); white-space: nowrap; }
.table-contrat tr:last-child th,
.table-contrat tr:last-child td { border-bottom: none; }
.table-contrat code { word-break: break-all; }

/* Le tableau du vocabulaire a quatre colonnes : sur un téléphone il défile
   dans son cadre plutôt que de faire déborder la page. Le `min-width` est ce
   qui déclenche le défilement — sans lui, la table se comprime jusqu'à couper
   les mots au milieu (« wei/ght ») et rien ne défile jamais. */
.table-defile { overflow-x: auto; }
.table-defile .table-contrat {
  width: auto;
  min-width: 30rem;
}
.table-defile .table-contrat td,
.table-defile .table-contrat th { white-space: nowrap; }
.table-defile .table-contrat td:last-child { white-space: normal; }

/* Un exemple de charge JSON à recopier. Il défile dans son propre cadre :
   sans `overflow-x`, une ligne longue fait défiler la page entière sur
   mobile. */
.bloc-code {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--bg-muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.saisie__code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--font-size-2xl);
  letter-spacing: 0.3em;
  text-align: center;
}

.codes {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.codes li {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--bg-muted);
  border: 1px solid var(--color-gray-200);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--font-size-base);
  letter-spacing: 0.08em;
  text-align: center;
}

/* Utilitaires employés par les gabarits du compte et du déroulé. */
.max-w-xl { max-width: 36rem; }
.mb-2 { margin-bottom: var(--space-2); }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 23. Activités déclarées ──────────────────────────────────
   Sports et cours saisis par l'utilisateur. Ils partagent les cases du
   calendrier avec les séances du programme, mais doivent s'en distinguer d'un
   coup d'œil : ce n'est pas le coach qui les a prescrits. */

.cal-chip-activite {
  background-color: var(--color-primary-pale);
  border: 1px dashed var(--color-primary-light);
  color: var(--text-accent);
  cursor: default;
}

.grille-form {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grille-form { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ── Choix entre habitude et date isolée ── */
.choix { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .choix { grid-template-columns: 1fr 1fr; } }

.choix__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.choix__option:hover { border-color: var(--color-primary-light); }
/* La bordure suit le bouton radio : cocher doit se voir sans lire. */
.choix__option:has(input:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-primary-pale);
}
.choix__option input { width: auto; margin-top: 3px; }
.choix__option b { display: block; font-weight: var(--fw-semibold); }
.choix__option small {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ── Cycle annuel des pratiques ────────────────────────────── */
.discipline-planner {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 100% 0, rgb(83 202 107 / .12), transparent 28rem),
    var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.discipline-planner__lead {
  max-width: 52rem;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.training-builder__modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: var(--bg-muted);
}
.profile-training-width { width: 100%; max-width: 56rem; }
.training-builder__modes legend {
  grid-column: 1 / -1;
  padding: 0 var(--space-1) var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
}
.training-builder__modes label { position: relative; cursor: pointer; }
.training-builder__modes input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.training-builder__modes label > span {
  display: grid;
  min-height: 4.5rem;
  align-content: center;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
}
.training-builder__modes b { font-size: var(--font-size-sm); }
.training-builder__modes small { color: var(--text-muted); font-size: var(--font-size-xs); }
.training-builder__modes input:checked + span {
  border-color: var(--color-primary);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.training-builder__modes input:checked + span b { color: var(--text-accent); }

.discipline-cadence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: var(--bg-muted);
}
.discipline-cadence legend {
  grid-column: 1 / -1;
  padding: 0 var(--space-1) var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
}
.discipline-cadence label { position: relative; cursor: pointer; }
.discipline-cadence input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.discipline-cadence label > span {
  display: grid;
  min-height: 4.5rem;
  align-content: center;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              background var(--transition-fast), transform var(--transition-fast);
}
.discipline-cadence label:hover > span { transform: translateY(-1px); }
.discipline-cadence b { color: var(--text-primary); font-size: var(--font-size-sm); }
.discipline-cadence small { font-size: var(--font-size-xs); }
.discipline-cadence input:checked + span {
  border-color: var(--color-primary);
  background: var(--bg-surface);
  box-shadow: 0 5px 16px rgb(22 29 24 / .08);
}
.discipline-cadence input:checked + span b { color: var(--text-accent); }
.discipline-cadence input:focus-visible + span {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}
.discipline-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.discipline-choice,
.discipline-phase,
.discipline-timeline__segment {
  --discipline-color: var(--text-accent);
  --discipline-pale: var(--color-primary-pale);
  --discipline-line: var(--color-primary-light);
}
.discipline-choice--calisthenie,
.discipline-phase--calisthenie,
.discipline-timeline__segment--calisthenie {
  --discipline-color: var(--discipline-calisthenie);
  --discipline-pale: var(--discipline-calisthenie-pale);
  --discipline-line: var(--discipline-calisthenie-line);
}
.discipline-choice--hyrox,
.discipline-phase--hyrox,
.discipline-timeline__segment--hyrox {
  --discipline-color: var(--discipline-hyrox);
  --discipline-pale: var(--discipline-hyrox-pale);
  --discipline-line: var(--discipline-hyrox-line);
}
.discipline-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  min-height: 5.5rem;
  padding: var(--space-4);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast), background var(--transition-fast);
}
.discipline-choice:hover {
  border-color: var(--discipline-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.discipline-choice > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.discipline-choice__check {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border: 1.5px solid var(--color-gray-400);
  border-radius: .45rem;
  color: transparent;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  transition: inherit;
}
.discipline-choice__content b {
  display: block;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}
.discipline-choice__content small {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--leading-relaxed);
}
.discipline-choice:has(input:checked) {
  border-color: var(--discipline-color);
  background: linear-gradient(145deg, var(--discipline-pale), var(--bg-surface));
  box-shadow: 0 8px 24px rgb(22 29 24 / .08);
}
.discipline-choice input:checked ~ .discipline-choice__check {
  border-color: var(--discipline-color);
  background: var(--discipline-pale);
  color: var(--discipline-color);
}
.discipline-choice:has(input:focus-visible) {
  outline: 3px solid var(--discipline-line);
  outline-offset: 2px;
}

.discipline-choice > .infobulle { align-self: start; }

.mix-configurator {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: var(--color-gray-50);
}
.mix-configurator__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.mix-configurator__heading h3 { margin-top: 2px; font-size: var(--font-size-xl); }
.mix-preview {
  display: flex;
  min-height: 3.75rem;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.mix-preview__segment {
  --discipline-color: var(--text-accent);
  --discipline-pale: var(--color-primary-pale);
  display: grid;
  min-width: 4.5rem;
  place-items: center;
  padding: var(--space-2);
  border-right: 1px solid color-mix(in srgb, var(--discipline-color) 25%, transparent);
  color: var(--discipline-color);
  background: var(--discipline-pale);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-align: center;
}
.mix-preview__segment:last-child { border-right: 0; }
.mix-preview__segment--calisthenie,
.mix-row--calisthenie {
  --discipline-color: var(--discipline-calisthenie);
  --discipline-pale: var(--discipline-calisthenie-pale);
}
.mix-preview__segment--hyrox,
.mix-row--hyrox {
  --discipline-color: var(--discipline-hyrox);
  --discipline-pale: var(--discipline-hyrox-pale);
}
.mix-rows { display: grid; gap: var(--space-2); }
.mix-row {
  --discipline-color: var(--text-accent);
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--discipline-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
}
.mix-row__input {
  display: grid;
  grid-template-columns: 4.25rem 4.75rem;
  align-items: center;
  gap: var(--space-2);
}
.mix-row__input input { width: 4.25rem; padding: .55rem; text-align: center; }
.mix-row__input b { color: var(--text-muted); font-size: var(--font-size-xs); }
.mix-row__moves { display: flex; gap: var(--space-1); }
.mix-row__moves button {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}
.mix-row__moves button:hover {
  border-color: var(--discipline-color);
  color: var(--discipline-color);
}
.mix-row__moves button:disabled { opacity: .3; cursor: not-allowed; }
.mix-total { color: var(--text-secondary); font-size: var(--font-size-sm); }
.mix-total b { color: var(--text-accent); }
.mix-total--invalid b { color: var(--color-error); }
.mix-configurator > .discipline-balance {
  justify-self: start;
  padding: var(--space-2) 0;
  color: var(--text-accent);
}

.discipline-cycle {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: var(--color-gray-50);
}
.discipline-cycle__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}
.discipline-cycle__eyebrow {
  color: var(--text-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.discipline-cycle__header h3 { margin-top: var(--space-1); font-size: var(--font-size-xl); }
.discipline-cycle__header p {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.discipline-cycle__start {
  display: grid;
  flex: 0 0 auto;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
}
.discipline-cycle__start input { min-width: 10.5rem; background: var(--bg-surface); }
.discipline-timeline {
  display: flex;
  min-height: 5rem;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.discipline-timeline__segment {
  display: grid;
  min-width: 0;
  align-content: center;
  padding: var(--space-3);
  border-left: 1px solid rgb(255 255 255 / .8);
  background: var(--discipline-pale);
  color: var(--discipline-color);
  text-align: center;
}
.discipline-timeline__segment:first-child { border-left: 0; }
.discipline-timeline__segment strong,
.discipline-timeline__segment span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.discipline-timeline__segment strong { font-size: var(--font-size-sm); }
.discipline-timeline__segment span { font-size: var(--font-size-xs); }
.discipline-cycle__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.discipline-cycle__summary b { color: var(--color-success-dark); }
.discipline-cycle__summary--invalid b { color: var(--color-error-dark); }
.discipline-balance {
  color: var(--text-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.discipline-balance:hover { text-decoration: underline; }
.discipline-phases { display: grid; gap: var(--space-2); }
.discipline-phase {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.discipline-phase::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--discipline-color);
  content: '';
}
.discipline-phase--active {
  border-color: var(--discipline-line);
  box-shadow: 0 5px 18px rgb(22 29 24 / .07);
}
.discipline-phase__order {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--discipline-pale);
  color: var(--discipline-color);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
}
.discipline-phase__identity > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.discipline-phase__identity strong { color: var(--text-primary); }
.discipline-phase__identity small { display: block; margin-top: 2px; color: var(--text-muted); }
.discipline-phase__current {
  padding: .15rem .45rem;
  border-radius: var(--radius-full);
  background: var(--discipline-pale);
  color: var(--discipline-color);
  font-size: .65rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.discipline-phase__duration { display: grid; gap: 2px; color: var(--text-muted); font-size: .68rem; }
.discipline-phase__input {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: .15rem .4rem;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.discipline-phase__input input {
  width: 2.6rem;
  padding: .3rem .2rem;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-weight: var(--fw-bold);
  text-align: center;
}
.discipline-phase__moves { display: flex; gap: var(--space-1); }
.discipline-phase__moves button {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.discipline-phase__moves button:hover {
  border-color: var(--discipline-color);
  color: var(--discipline-color);
}
.discipline-phase__moves button:disabled {
  border-color: var(--color-gray-100);
  color: var(--color-gray-200);
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .training-builder__modes { grid-template-columns: 1fr; }
  .discipline-cadence { grid-template-columns: 1fr; }
  .discipline-picker { grid-template-columns: 1fr; }
  .discipline-choice { min-height: 0; }
  .discipline-cycle__header { display: grid; }
  .discipline-cycle__start { width: 100%; }
  .discipline-cycle__start input { width: 100%; }
  .discipline-phase { grid-template-columns: auto minmax(0, 1fr) auto; }
  .discipline-phase__duration { grid-column: 2; }
  .discipline-phase__moves { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 440px) {
  .discipline-planner,
  .discipline-cycle,
  .mix-configurator { padding: var(--space-3); }
  .discipline-timeline { min-height: 4.25rem; }
  .discipline-timeline__segment { padding-inline: var(--space-1); }
  .discipline-timeline__segment strong { font-size: .68rem; }
  .discipline-phase__identity small { font-size: .65rem; }
}

/* ── Jours de la semaine ── */
.jours { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.jour { cursor: pointer; }
/* La case elle-même est masquée : c'est l'étiquette qui devient la cible, plus
   large et atteignable au pouce. */
.jour input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.jour span {
  display: block;
  min-width: 3rem;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  text-transform: capitalize;
  color: var(--text-secondary);
}
.jour input:checked + span {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}
/* Le focus clavier doit rester visible malgré la case masquée. */
.jour input:focus-visible + span { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; }

/* Activités : les radios sont masquées visuellement, l'état reste parfaitement
   lisible sur leur carte — notamment sur mobile où le petit cercle seul se perd. */
.activity-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.activity-choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--bg-default);
  cursor: pointer;
}

.activity-choice:has(input:checked) {
  color: var(--text-accent);
  border-color: var(--color-primary);
  background: var(--color-primary-pale);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.activity-days { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.activity-day {
  position: relative;
  display: grid;
  min-width: 52px;
  min-height: 44px;
  place-items: center;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--bg-default);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.activity-day input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.activity-day:has(input:checked) {
  color: var(--text-accent);
  border-color: var(--color-primary);
  background: var(--color-primary-pale);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.activity-day:has(input:focus-visible) { outline: 2px solid var(--color-primary); }
.activity-day--large { min-width: 58px; min-height: 48px; }

@media (min-width: 640px) {
  .activity-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Bascule entre habitude et date isolée, sans JavaScript : la politique de
   sécurité interdit l'évaluation d'expressions, donc `x-show` et consorts
   restent muets. `:has()` lit directement l'état du bouton radio. */
.quand:has(input[value="ponctuelle"]:checked) .quand__jours { display: none; }
.quand:has(input[value="habitude"]:checked) .quand__date { display: none; }

/* ── 24. Liste de courses ─────────────────────────────────────
   Cochée d'une main, au supermarché : cibles larges, champ de quantité
   lisible sans lunettes. */

/* Case à cocher agrandie : la taille par défaut est intenable au pouce. */
.article-checkbox {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.qty-input {
  width: 5rem;
  padding: var(--space-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}

/* Empêche l'unité de se faire écraser par le champ voisin. */
.min-w-fit { min-width: fit-content; }

/* Rappels de l'ancienne palette sombre, encore employés par la page nutrition. */
.bg-slate-800\/50 { background-color: var(--bg-muted); }
.hover\:text-red-300:hover { color: var(--color-error-dark); }

/* ── 25. Propositions du coach ────────────────────────────────
   Le coach ne se contente plus de conseiller : il propose d'agir. La carte
   doit se distinguer nettement de sa réponse — c'est un bouton qui change des
   données, pas une phrase de plus. */

.proposition {
  margin-top: var(--space-3);
  margin-right: auto;
  max-width: 85%;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background-color: var(--bg-surface);
  border: 2px solid var(--color-primary-light);
  box-shadow: var(--shadow-md);
}

.proposition__titre {
  font-size: var(--font-size-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.proposition__texte {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.proposition__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.proposition__note {
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

/* Une proposition tranchée reste visible, en retrait : effacer la trace de ce
   qu'on a accepté ou refusé rendrait le fil incompréhensible à la relecture. */
.proposition__etat {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.proposition__etat--ok { color: var(--color-success-dark); }

/* ── 26. Coach ────────────────────────────────────────────────
   Écrit avec les jetons du projet. La version précédente employait 91 classes
   Tailwind alors qu'il n'y a pas de chaîne Tailwind ici : elles ne
   produisaient rien, d'où une page cassée sur ordinateur comme sur mobile. */

.coach {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}
@media (min-width: 900px) {
  .coach { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
}

/* Sur mobile, la colonne de présentation prend une place qu'on n'a pas :
   le fil de discussion passe d'abord. */
.coach__aside { display: none; }
@media (min-width: 900px) {
  .coach__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: sticky;
    top: var(--space-6);
  }
}

.coach__profil { text-align: center; }

.coach__avatar {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-3);
  display: grid;
  place-items: center;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #FFFFFF;
}
.coach__avatar svg { width: 60px; height: 60px; }

.coach__atouts {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.coach__atouts li { padding-left: var(--space-4); position: relative; }
.coach__atouts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 2px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

.coach__mention { font-style: italic; }

/* ── Le fil ── */
.coach__fil { display: flex; flex-direction: column; gap: var(--space-4); }

.coach__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Hauteur bornée plutôt que `h-screen` : la page a déjà un en-tête et un
     pied, et un fil qui fait la hauteur de l'écran les pousse hors du cadre. */
  min-height: 40vh;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: var(--space-2);
}

.coach__vide {
  margin: auto;
  max-width: 420px;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

/* ── Bulles ── */
.bulle {
  max-width: min(88%, 720px);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  line-height: var(--leading-relaxed);
}

/* Les réponses contiennent des listes et des sauts de ligne. La règle porte sur
   le paragraphe et non sur la bulle : appliquée au conteneur, elle préservait
   aussi l'indentation du gabarit et ajoutait des lignes vides. */
.bulle__texte { white-space: pre-wrap; overflow-wrap: anywhere; }

.bulle--moi {
  margin-left: auto;
  border-bottom-right-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #FFFFFF;
}

.bulle--coach {
  margin-right: auto;
  border-bottom-left-radius: var(--radius-sm);
  background-color: var(--bg-surface);
  border: 1px solid var(--color-gray-100);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.bulle__heure {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

/* ── Saisie ── */
.coach__saisie {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  background-color: var(--bg-surface);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-md);
  /* Collée au bas de la fenêtre sur mobile : sans cela, il faut faire défiler
     tout le fil pour retrouver le champ. */
  position: sticky;
  bottom: var(--space-3);
}
.coach__saisie textarea[name="message"] {
  flex: 1;
  min-height: 4.5rem;
  max-height: 12rem;
  resize: vertical;
  border: none;
  background: transparent;
  box-shadow: none;
}
.coach__saisie textarea[name="message"]:focus { outline: none; box-shadow: none; }

/* ── 27. Utilitaires employés par `profile/activities.html` ───
   Ce gabarit a été écrit avec des classes Tailwind, que rien ne compile ici.
   Plutôt que de le réécrire, on définit les utilitaires manquants — traduits
   dans les jetons du projet, pour que la page reste cohérente avec le reste. */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.italic { font-style: italic; }
.transition { transition: all var(--transition-fast); }
.accent-orange-500 { accent-color: var(--color-primary); }

.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.p-3 { padding: var(--space-3); }
.px-2 { padding-inline: var(--space-2); }
.border-2 { border-width: 2px; border-style: solid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Rappels de l'ancienne palette sombre, retraduits en surfaces claires. */
.bg-slate-800\/20,
.bg-slate-800\/30,
.bg-slate-800\/40,
.bg-slate-900\/30 { background-color: var(--bg-default); }
.border-slate-600,
.border-slate-700\/50 { border-color: var(--color-gray-200); }
.text-slate-200 { color: var(--text-primary); }
.placeholder-slate-500::placeholder { color: var(--text-muted); }

.bg-amber-900\/40 { background-color: var(--color-warning-pale); }
.bg-emerald-900\/40,
.bg-emerald-950\/20 { background-color: var(--color-success-pale); }
.border-emerald-700\/30 { border-color: var(--color-success-line); }
.bg-orange-900\/20 { background-color: var(--color-primary-pale); }

.hover\:bg-slate-700:hover,
.hover\:bg-slate-800\/50:hover,
.hover\:bg-slate-800\/60:hover { background-color: var(--bg-muted); }
.hover\:border-orange-500:hover,
.hover\:border-orange-500\/50:hover { border-color: var(--color-primary); }
.hover\:text-red-400:hover { color: var(--color-error-dark); }

.focus\:outline-none:focus { outline: none; }
.focus\:border-orange-500:focus { border-color: var(--color-primary); }
/* `:has()` couvre le cas où la classe est posée sur l'étiquette englobante. */
.checked\:border-orange-500:checked,
.checked\:border-orange-500:has(:checked) { border-color: var(--color-primary); }
.checked\:bg-orange-900\/20:checked,
.checked\:bg-orange-900\/20:has(:checked) { background-color: var(--color-primary-pale); }

/* Détail concret de la proposition : ce qui la distingue d'une autre. */
.proposition__detail {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
}

/* ── 28. Bulle du coach ───────────────────────────────────────
   Présente sur toutes les pages. Les styles étaient en attributs `style` dans
   le gabarit : palette hors charte, largeur fixe débordant sur mobile, et
   règles dupliquées à chaque rendu de page. */

.widget-bulle {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  /* Au-dessus de l'en-tête collant. `.site-header` est un enfant flex du
     `body` : son `z-index` s'y applique même quand il repasse en `static` sur
     mobile, et il recouvrait la fenêtre plein écran du coach — ni le « × » de
     fermeture ni les boutons des signaux n'étaient cliquables. */
  z-index: var(--z-coach);
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #FFFFFF;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.widget-bulle:hover { transform: scale(1.06); }
.widget-bulle:active { transform: scale(0.95); }
/* La bulle flottante ne doit jamais recouvrir la dernière action de la page. */
body:has(.widget-bulle) main { padding-bottom: 6rem; }

.widget-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-coach) - 1);
  background: rgb(3 10 7 / 72%);
  backdrop-filter: blur(2px);
}
.widget-backdrop[hidden] { display: none; }

.widget {
  position: fixed;
  right: var(--space-5);
  bottom: calc(3.5rem + var(--space-8));
  z-index: var(--z-coach);
  /* Bornée par la fenêtre : la largeur fixe de 24 rem débordait dès qu'un
     écran faisait moins de 400 px. */
  width: min(28rem, calc(100vw - var(--space-8)));
  height: min(38rem, calc(100dvh - 8rem));
  max-height: calc(100dvh - 8rem);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-gray-100);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
/* `data-open` est la source d'état actuelle. L'absence de `hidden` dans le
   HTML garde aussi la page compatible avec une ancienne version du JS encore
   en cache, qui pilotait directement la propriété `display`. */
.widget[data-open="true"] { display: flex; }

.widget__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #FFFFFF;
}
.widget__identite { display: flex; align-items: center; gap: var(--space-3); }
.widget__emoji { font-size: 1.5rem; }
.widget__titre { font-weight: var(--fw-bold); }
.widget__sous-titre { font-size: var(--font-size-xs); opacity: 0.85; }

.widget__fermer {
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}
.widget__fermer:hover { opacity: 1; }
.widget__actions { display: flex; align-items: center; gap: var(--space-2); }
.widget__agrandir {
  border: none;
  background: none;
  color: #FFFFFF;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}
.widget__agrandir:hover { opacity: 1; }

@media (min-width: 641px) {
  .widget--expanded {
    right: max(var(--space-8), calc((100vw - 72rem) / 2));
    width: min(72rem, calc(100vw - 4rem));
    height: calc(100dvh - 5rem);
    max-height: calc(100dvh - 5rem);
    bottom: var(--space-5);
  }
}

.widget__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--bg-default);
}

.widget__saisie {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-gray-100);
  background-color: var(--bg-surface);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
}
.widget__saisie textarea {
  flex: 1;
  min-height: 3.25rem;
  max-height: 9rem;
  resize: vertical;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font: inherit;
  font-size: var(--font-size-base);
  line-height: var(--leading-relaxed);
}
.widget__saisie button {
  flex: none;
  align-self: flex-end;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.widget__saisie button:hover { background-color: var(--color-primary-dark); }
.widget__saisie button:disabled { opacity: 0.55; cursor: wait; }

.report-result { min-height: 1.25rem; }

/* ── Messages du widget ── */
.coach-message,
.coach-user,
.coach-coach {
  max-width: 88%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  line-height: var(--leading-relaxed);
  overflow-wrap: anywhere;
  animation: widget-entree 0.25s ease-out;
}
.coach-user {
  margin-left: auto;
  background-color: var(--color-primary);
  color: #FFFFFF;
}
.coach-coach {
  margin-right: auto;
  background-color: var(--bg-surface);
  border: 1px solid var(--color-gray-100);
  color: var(--text-primary);
  white-space: pre-wrap;
}
.coach-coach:has(.bulle__riche) { white-space: normal; }

@keyframes widget-entree {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.coach-typing {
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-default);
  color: var(--text-muted);
}
.coach-typing-dots { display: flex; gap: 4px; align-items: center; }
.coach-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  animation: widget-points 1.4s infinite;
}
.coach-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.coach-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes widget-points {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

/* Suggestion poussée par le widget : couleur d'avertissement de la charte,
   pas un ambre choisi au hasard. */
.coach-suggestion {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-warning-pale);
  border: 1px solid var(--color-warning-line);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
}
.coach-suggestion-btn {
  margin-top: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-lg);
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.coach-suggestion-btn:hover { background-color: var(--color-primary-dark); }

/* Sur mobile, la bulle occupe l'écran. `dvh` et non `vh` : la barre d'adresse
   se rétracte, et `100vh` faisait passer le champ de saisie sous le pli. */
@media (max-width: 640px) {
  body.chatbot-ouvert {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }
  body.chatbot-ouvert .widget { touch-action: auto; }
  .widget-backdrop {
    background: var(--bg-default);
    backdrop-filter: none;
  }
  .widget {
    right: auto;
    left: 0;
    top: 0;
    bottom: auto;
    width: var(--coach-viewport-width, 100vw);
    height: var(--coach-viewport-height, 100dvh);
    max-height: none;
    transform: translate3d(
      var(--coach-viewport-left, 0px),
      var(--coach-viewport-top, 0px),
      0
    );
    border-radius: 0;
    border: none;
    background: var(--bg-default);
    box-shadow: none;
  }
  .widget__messages { scrollbar-gutter: auto; }
  .widget__saisie textarea { resize: none; }
  body.chatbot-clavier .widget__tete { padding-top: var(--space-3); }
  body.chatbot-clavier .widget__saisie { padding-bottom: var(--space-3); }
  .widget__tete {
    padding-top: max(var(--space-4), env(safe-area-inset-top));
  }
  .widget-bulle {
    right: max(var(--space-4), env(safe-area-inset-right));
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }
  .chatbot-ouvert .widget-bulle { visibility: hidden; }
}

/* ── 29. Réponses mises en forme ──────────────────────────────
   Le coach répond en Markdown : listes numérotées, puces imbriquées, gras.
   `domain.richtext` les convertit en balises ; il reste à leur donner un
   rythme lisible dans une bulle étroite. */

.bulle__riche > :first-child { margin-top: 0; }
.bulle__riche > :last-child { margin-bottom: 0; }
.bulle__riche p { margin-block: var(--space-3); }

.bulle__riche ol,
.bulle__riche ul {
  margin-block: var(--space-3);
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bulle__riche ol { list-style: decimal; }
.bulle__riche ul { list-style: disc; }
/* Les puces imbriquées se resserrent : dans une bulle étroite, le même
   espacement qu'au premier niveau casse le lien avec l'étape qui les porte. */
.bulle__riche li > ul,
.bulle__riche li > ol {
  margin-block: var(--space-2);
  gap: var(--space-1);
}
.bulle__riche li::marker { color: var(--text-accent); font-weight: var(--fw-semibold); }

.bulle__riche strong { font-weight: var(--fw-bold); color: var(--text-primary); }
.bulle__riche em { font-style: italic; }
.bulle__riche h3,
.bulle__riche h4 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}
.bulle__riche h3 { font-size: var(--font-size-lg); font-weight: var(--fw-bold); }
.bulle__riche h4 { font-size: var(--font-size-base); font-weight: var(--fw-bold); }
.bulle__riche code {
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--bg-muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* ── Mode agrandi ─────────────────────────────────────────────
   Une conversation longue tient mal dans une colonne : on rend la pleine
   largeur et toute la hauteur disponible, sans quitter la page. */

.coach__barre { display: flex; justify-content: flex-end; }

.coach__agrandir {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
  cursor: pointer;
  user-select: none;
}
.coach__agrandir:hover { color: var(--color-primary); }
.coach__agrandir--fermer { display: none; }

.coach:has(#coach-agrandi:checked) .coach__agrandir--ouvrir { display: none; }
.coach:has(#coach-agrandi:checked) .coach__agrandir--fermer { display: inline; }

/* La colonne de présentation cède la place, le fil prend toute la largeur. */
.coach:has(#coach-agrandi:checked) { grid-template-columns: 1fr; }
.coach:has(#coach-agrandi:checked) .coach__aside { display: none; }
.coach:has(#coach-agrandi:checked) .coach__messages {
  /* `dvh` : la barre d'adresse mobile se rétracte, et `vh` laisserait la
     saisie sous le pli. */
  max-height: calc(100dvh - 18rem);
  min-height: calc(100dvh - 18rem);
}

/* Le focus clavier doit rester visible malgré la case masquée. */
#coach-agrandi:focus-visible + .coach__aside ~ .coach__fil .coach__agrandir,
.coach:has(#coach-agrandi:focus-visible) .coach__agrandir {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── 30. Consignes et glossaire ───────────────────────────────
   L'illustration arrive en tâche de fond ; les consignes, elles, sont en base.
   Elles s'affichent toujours — une séance sans mode d'emploi n'est pas une
   séance qu'on sait exécuter. */

.execution {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background-color: var(--bg-default);
  border: 1px solid var(--color-gray-100);
}

.liste-eviter {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.liste-eviter li { position: relative; padding-left: var(--space-6); }
.liste-eviter li::before {
  content: '×';
  position: absolute;
  left: 0;
  top: -1px;
  width: 1.1rem;
  height: 1.1rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background-color: var(--color-warning-pale);
  border: 1px solid var(--color-warning-line);
  color: var(--color-warning-dark);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
}

/* ── Info-bulle ──
   Un `<details>` : cliquable, atteignable au clavier, sans JavaScript — la
   politique de sécurité interdit de toute façon l'évaluation d'expressions. */
.infobulle { position: relative; display: inline-block; }

.infobulle > summary {
  list-style: none;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-gray-200);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  font-style: italic;
  cursor: pointer;
}
.infobulle > summary::-webkit-details-marker { display: none; }
/* La règle générale des `<details>` remplace le marqueur natif par un chevron
   (§ 12). Ici, le marqueur **est** le « i » : le chevron s'ajoutait dans la
   pastille et repoussait la lettre hors du cercle. */
.infobulle > summary::before { content: none; }
.infobulle > summary:hover { border-color: var(--color-primary); color: var(--text-accent); }

.infobulle__contenu {
  position: absolute;
  z-index: var(--z-apercu);
  top: calc(100% + var(--space-2));
  /* Ancrée à droite : ouverte vers la gauche, elle sortirait du cadre sur
     mobile, où l'icône se trouve déjà près du bord. */
  right: 0;
  width: min(20rem, calc(100vw - var(--space-8)));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.infobulle__terme {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin-top: var(--space-3);
}
.infobulle__terme:first-child { margin-top: 0; }
.infobulle__texte {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
}
.infobulle__usage {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Utilitaires restants, traduits dans les jetons du projet. */
.mb-3 { margin-bottom: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.bg-green-900\/30 { background-color: var(--color-success-pale); }
.border-green-800 { border-color: var(--color-success-line); }
.text-green-300 { color: var(--color-success-dark); }

/* Sur mobile, l'info-bulle ne peut pas s'ancrer à son icône : celle-ci se
   trouve au milieu de la ligne, et un panneau de 20 rem sort du cadre par la
   gauche. Il devient donc une feuille au bas de l'écran, qui tient par
   construction. */
@media (max-width: 640px) {
  .infobulle__contenu {
    position: fixed;
    inset: auto var(--space-4) var(--space-4) var(--space-4);
    width: auto;
    max-height: 60dvh;
    overflow-y: auto;
  }
}

/* ── 31. Observations du coach ────────────────────────────────
   Ce qu'il remarque dans les mesures reçues. Un signal de santé se distingue :
   il ne doit pas se lire comme un conseil d'entraînement. */

.observation {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background-color: var(--bg-surface);
  border: 1px solid var(--color-gray-100);
  border-left: 3px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}
.observation--sante { border-left-color: var(--color-warning); }

.observation__constat {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
}

/* ── 32. Repli ────────────────────────────────────────────────
   Détail qu'on ne consulte qu'en cas de doute. Un `<details>` : cliquable,
   atteignable au clavier, sans JavaScript. */

.repli > summary { list-style: none; }
.repli > summary::-webkit-details-marker { display: none; }

.repli__bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-gray-200);
  background-color: var(--bg-surface);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  cursor: pointer;
}
.repli__bouton:hover { border-color: var(--color-primary); color: var(--text-accent); }
/* Le chevron dit dans quel sens ça va s'ouvrir, puis se retourne. */
.repli__bouton::after { content: '▾'; font-size: 0.8em; }
.repli[open] .repli__bouton::after { content: '▴'; }

.repli__contenu {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background-color: var(--bg-default);
  border: 1px solid var(--color-gray-100);
}

/* ── 33. Pastille de signaux ──────────────────────────────────
   Le compteur de ce que le coach a remarqué, sur la bulle flottante. Il n'y a
   plus de page dédiée : le signal vient à l'utilisateur, il ne va pas le
   chercher. */

/* La pastille s'ancre sur la bulle, qui est déjà `position: fixed` (§ 28). */
.widget-pastille {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  /* Bordure de la couleur du fond : elle détache la pastille de la bulle,
     quel que soit ce qu'il y a derrière. */
  border: 2px solid var(--bg-default);
  background-color: var(--color-error);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* ── Signaux dans la bulle ── */
.widget-signaux {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
}

.widget-signaux__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Dans une bulle étroite, la carte perd son ombre et ses marges : c'est le
   trait de gauche qui suffit à la distinguer d'un message. */
.widget-signaux .observation {
  padding: var(--space-4);
  box-shadow: none;
}

/* ── Préférences alimentaires ────────────────────────────────────────────
   Les choix forment un rythme compréhensible, pas une feuille de paramètres.
   Le vert signale immédiatement ce qui sera réellement utilisé par le coach. */
.nutrition-preferences {
  display: grid;
  gap: var(--space-6);
}

.preference-panel {
  display: grid;
  gap: var(--space-5);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.preference-panel--green {
  border-color: var(--color-primary-light);
  background: linear-gradient(145deg, var(--color-primary-pale), var(--bg-surface) 55%);
}

.preference-panel__heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.preference-panel__heading h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.preference-panel__heading p,
.mini-choice p {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
}

.preference-panel__number {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--text-on-bright);
  font-weight: var(--fw-bold);
}

.option-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-gray-200);
  border-radius: 999px;
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast),
              transform var(--transition-fast);
}

.option-chip:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.option-chip:has(input:checked) {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-pale);
  color: var(--text-accent);
}
.option-chip--compact { padding: var(--space-2) var(--space-3); }

/* Calendrier de disponibilite alimentaire. */
.meal-availability { display: grid; gap: var(--space-4); }
.meal-availability__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.meal-availability__intro h3 {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
}
.meal-availability__intro p,
.meal-availability__hint,
.meal-availability__range { color: var(--text-secondary); font-size: var(--font-size-sm); }
.meal-availability__range { white-space: nowrap; }
.meal-availability__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
}
.availability-mode { position: relative; cursor: pointer; }
.availability-mode input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.availability-mode > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-gray-200);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  transition: border-color var(--transition-fast), background var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.availability-mode:hover > span { border-color: var(--color-primary); transform: translateY(-1px); }
.availability-mode__check {
  display: grid;
  width: 1.1rem;
  min-height: 1.1rem;
  padding: 0;
  place-items: center;
  border: 1.5px solid var(--color-gray-400);
  border-radius: .35rem;
  color: transparent;
  font-size: .7rem;
  line-height: 1;
}
.availability-mode input:checked + span {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-pale);
  color: var(--text-accent);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
.availability-mode input:checked + span .availability-mode__check {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-dark);
  color: white;
}
.availability-mode--no-cook input:checked + span {
  border-color: var(--color-secondary);
  background: var(--color-secondary-pale, #fff5ec);
  color: var(--color-secondary-dark, #9a4318);
}
.availability-mode input:focus-visible + span { outline: 3px solid var(--color-primary-light); }
.meal-availability__hint {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-primary-pale);
}
.availability-calendar {
  max-height: min(38rem, 72vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0 var(--space-3) var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7);
}
.availability-calendar::-webkit-scrollbar { width: .7rem; }
.availability-calendar::-webkit-scrollbar-track { background: transparent; }
.availability-calendar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--color-gray-400);
  background-clip: padding-box;
}
.availability-month { position: relative; padding-bottom: var(--space-5); }
.availability-month:last-child { padding-bottom: 0; }
.availability-month__title {
  position: sticky;
  z-index: 4;
  top: 0;
  margin: 0 calc(var(--space-3) * -1);
  padding: var(--space-4) var(--space-3) var(--space-2);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
}
.availability-calendar__head,
.availability-month__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .35rem;
}
.availability-calendar__head {
  position: sticky;
  z-index: 3;
  top: 3.35rem;
  padding-bottom: var(--space-2);
  background: var(--bg-surface);
}
.availability-calendar__head span {
  padding: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.availability-day {
  min-width: 0;
  min-height: 5.75rem;
  padding: var(--space-2);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(15 23 42 / .04);
  transition: border-color var(--transition-fast), background var(--transition-fast),
              box-shadow var(--transition-fast), transform var(--transition-fast);
}
.availability-day:hover {
  z-index: 1;
  border-color: var(--color-primary-dark);
  box-shadow: 0 7px 18px rgb(15 23 42 / .09);
  transform: translateY(-1px);
}
.availability-day:focus-visible { z-index: 2; outline: 3px solid var(--color-primary-light); }
.availability-day--empty {
  min-height: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
.availability-day--today .availability-day__number {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--text-on-bright);
}
.availability-day--selected {
  border-color: var(--color-primary-light);
  background: linear-gradient(145deg, var(--color-primary-pale), var(--bg-surface));
}
.availability-day--past { opacity: .42; cursor: not-allowed; }
.availability-day__number { font-weight: var(--fw-bold); }
.availability-day__badges { display: grid; gap: .2rem; margin-top: var(--space-2); }
.availability-badge {
  overflow: hidden;
  padding: .15rem .35rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--text-accent);
  font-size: .68rem;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.availability-badge--no-cook { background: var(--color-warning-pale); color: var(--color-warning-dark); }
.meal-availability__conditions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.meal-availability__success {
  color: var(--text-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
}

@media (max-width: 640px) {
  .meal-availability__intro { display: grid; }
  .meal-availability__range { white-space: normal; }
  .availability-calendar { max-height: 32rem; padding-inline: var(--space-2); }
  .availability-month__title { margin-inline: calc(var(--space-2) * -1); padding-inline: var(--space-2); }
  .availability-day { min-height: 4.75rem; padding: .35rem; }
  .availability-calendar__head span { padding-inline: 0; font-size: .65rem; }
  .availability-day__number { font-size: var(--font-size-sm); }
  .availability-badge { padding-inline: .2rem; font-size: .58rem; }
}

.meal-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.meal-slot-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 5.25rem;
  padding: var(--space-4);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast),
              transform var(--transition-fast), box-shadow var(--transition-fast);
}

.meal-slot-card > input,
.segmented-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.meal-slot-card:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.meal-slot-card:has(input:checked) {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-pale);
  box-shadow: 0 0 0 1px var(--color-primary-light);
}
.meal-slot-card:has(input:focus-visible),
.segmented-options label:has(input:focus-visible) {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}

.meal-slot-card__check {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  place-items: center;
  border: 2px solid var(--color-gray-300);
  border-radius: 50%;
  color: transparent;
}
.meal-slot-card:has(input:checked) .meal-slot-card__check {
  border-color: var(--color-primary-dark);
  background: var(--color-primary);
  color: var(--text-on-bright);
}
.meal-slot-card strong,
.meal-slot-card small { display: block; }
.meal-slot-card small { margin-top: var(--space-1); color: var(--text-muted); font-weight: normal; }

.nutrition-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.mini-choice {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.mini-choice legend { padding: 0 var(--space-2); font-weight: var(--fw-bold); }

.segmented-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.segmented-options label { position: relative; cursor: pointer; }
.segmented-options span {
  display: grid;
  min-height: 2.75rem;
  padding: var(--space-2);
  place-items: center;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--bg-default);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-align: center;
}
.segmented-options label:has(input:checked) span {
  border-color: var(--color-primary-dark);
  background: var(--color-primary);
  color: var(--text-on-bright);
  font-weight: var(--fw-bold);
}

.nutrition-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.supplement-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--color-primary-light);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  cursor: pointer;
}
.supplement-consent:has(input:checked) {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-pale);
}
.supplement-consent input { margin-top: .25rem; accent-color: var(--color-primary-dark); }
.supplement-consent strong,
.supplement-consent small { display: block; }
.supplement-consent small {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
}

.supplement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.supplement-card {
  display: grid;
  align-content: start;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
}
.supplement-card:has(input:checked) {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-pale);
  box-shadow: 0 0 0 1px var(--color-primary-light);
}
.supplement-card__choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 9.5rem;
  padding: var(--space-4);
  cursor: pointer;
}
.supplement-card input { margin-top: .2rem; accent-color: var(--color-primary-dark); }
.supplement-card strong,
.supplement-card small { display: block; }
.supplement-card small {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
}
.supplement-info { border-top: 1px solid var(--color-gray-200); }
.supplement-info summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--text-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
}
.supplement-info summary::-webkit-details-marker { display: none; }
.supplement-info summary > span {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: serif;
  font-style: italic;
  line-height: 1;
}
.supplement-info[open] summary { background: var(--color-primary-pale); }
.supplement-info__body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-primary-light);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
}
.supplement-info__body p strong {
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}
.supplement-info__caution {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
}
.supplement-warning {
  padding: var(--space-4);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
}
.supplement-warning p { margin-top: var(--space-1); line-height: var(--leading-relaxed); }

.schedule-exclusions { border-color: var(--color-primary-light); }
.schedule-exclusions > legend {
  padding: 0 var(--space-3);
  color: var(--text-accent);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
}

.meal-special {
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--color-primary-pale);
  color: var(--text-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
}
.meal-special--pleasure {
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
}
.meal-special--mission {
  border: 1px solid var(--color-primary-light);
  background: var(--color-primary);
  color: var(--text-on-bright);
}

@media (max-width: 640px) {
  .meal-slot-grid,
  .nutrition-choice-grid,
  .nutrition-numbers,
  .supplement-grid { grid-template-columns: 1fr; }
  .segmented-options { grid-template-columns: 1fr; }
}

/* ── 26. Téléphone : ce qui débordait ─────────────────────────
   Mesuré, pas supposé : à 390 px, « Commencer — 100 crédits offerts » sortait
   de l'écran par la droite. Un bouton d'appel à l'action tronqué, sur la seule
   page que voit un visiteur qui ne connaît pas le service. */

@media (max-width: 560px) {
  /* `nowrap` protège un libellé court d'une coupure disgracieuse ; sur un
     écran étroit il transforme le même libellé en débordement. */
  .btn { white-space: normal; text-align: center; }
  .btn--lg { padding-inline: var(--space-6); }

  /* Empilés et pleine largeur : deux boutons côte à côte sur 390 px donnent
     deux boutons illisibles. */
  .hero__inner .btn { width: 100%; }

  .hero { padding-block: var(--space-10); }
  .hero__inner { padding-inline: var(--space-4); }
  .hero__title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .hero__subtitle { font-size: var(--font-size-base); }

  /* Les trois chiffres tiennent en colonne, avec un filet entre eux : côte à
     côte ils se réduisaient à deux mots par ligne. */
  .hero__stats { gap: var(--space-5); }
  .hero__stats > * + * {
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
  }

  /* La coupure de ligne du titre est pensée pour un écran large. */
  .hero__saut { display: none; }
}

/* ── 27. Guidage de démarrage ─────────────────────────────────
   Le même bloc au tableau de bord, au profil et à l'accueil connecté. Il
   remplace un simple pourcentage : ce qui fait terminer un parcours, c'est de
   savoir quelle est la prochaine action, à quoi elle sert, et combien il en
   reste. */

.guide {
  background-color: var(--bg-surface);
  border: 1px solid var(--color-gray-100);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  margin-top: var(--space-6);
}

/* Variante resserrée : sur l'accueil, le guidage accompagne l'appel à
   l'action, il ne le remplace pas. La liste complète des étapes reste au
   tableau de bord et au profil. */
.guide--compact {
  margin-top: 0;
  padding: var(--space-5);
}
.guide--compact .guide__etape { margin-top: var(--space-4); }

.guide--complete {
  border: 1px solid var(--color-success-line);
  background: linear-gradient(135deg, var(--color-success-pale), var(--bg-surface) 75%);
  padding: clamp(var(--space-5), 4vw, var(--space-8));
}
.guide--complete .guide__titre { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.guide--complete .guide__compte {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--color-success-dark);
}
.guide__success { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-5); }
.guide__success > div { flex: 1; }
.guide__success-title { font-weight: var(--fw-semibold); color: var(--text-primary); }
.guide__success .btn { flex-shrink: 0; }
@media (max-width: 600px) {
  .guide__success { align-items: stretch; flex-direction: column; }
  .guide__success .btn { width: 100%; white-space: normal; text-align: center; }
}

/* Sur l'accueil, le bloc est posé sur le bandeau sombre. */
.hero .guide {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  border-left-color: var(--color-primary);
  box-shadow: none;
}
.hero .guide .guide__titre,
.hero .guide .guide__etape-titre { color: #FFFFFF; }
.hero .guide .guide__etape-raison,
.hero .guide .guide__reste { color: var(--color-gray-400); }
.hero .guide .guide__etape { background-color: rgba(0, 0, 0, 0.25); }

.guide__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.guide__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.guide__titre {
  margin-top: var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.guide__compte {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
  color: var(--text-accent);
  white-space: nowrap;
}

.guide__jauge {
  height: 6px;
  margin-top: var(--space-4);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.guide__jauge-remplie {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

.guide__etape {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background-color: var(--color-primary-pale);
  border-radius: var(--radius-lg);
}

.guide__etape-label {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-accent);
}

.guide__etape-titre {
  margin-top: var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.guide__etape-raison {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.guide__reste {
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.guide__bloquant {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-warning-pale);
  border: 1px solid var(--color-warning-line);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--color-warning-dark);
}

.guide__liste {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-gray-100);
}

.guide__ligne {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: var(--font-size-sm);
}

.guide__puce {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-100);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
}

.guide__ligne--faite .guide__puce {
  background-color: var(--color-success-pale);
  color: var(--color-success-dark);
}

.guide__ligne-label { flex: 1; color: var(--text-primary); }
.guide__ligne--faite .guide__ligne-label { color: var(--text-muted); }
a.guide__ligne-label:hover { color: var(--text-accent); }

.guide__minutes,
.guide__modifier {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.guide__modifier:hover { color: var(--text-accent); }

@media (max-width: 560px) {
  .guide { padding: var(--space-5); }
  .guide__etape { padding: var(--space-4); }
  .guide__etape .btn { width: 100%; }
}

/* ── 28. Le petit « i » des formulaires ───────────────────────
   L'infobulle elle-même est celle de la séance en cours (`.infobulle`, § 24) :
   même geste, même besoin, aucune raison d'en dessiner une seconde. Ne reste
   ici que la ligne qui l'accole à un libellé de formulaire. */

.aide-ligne {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.aide-ligne__libelle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* La bulle se cale sur la largeur de la **ligne**, pas sur le « i ».
   Le composant l'ancre à droite de l'icône, ce qui convient à un bouton posé
   au bord de l'écran ; ici l'icône suit le libellé, donc à gauche : la bulle
   partait alors dans la marge, tronquée. */
.aide-ligne .infobulle { position: static; }
.aide-ligne .infobulle__contenu {
  left: 0;
  right: 0;
  width: auto;
  max-width: 34rem;
}

/* ── 34. Mes séances : atelier de composition ─────────────────
   Deux colonnes sur grand écran — la bibliothèque à gauche, la séance en
   construction à droite — et une seule colonne sur téléphone : on choisit
   d'abord, on règle ensuite. */

.seances-boite {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .seances-boite { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.atelier-seance {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

/* `min-width: 0` sur les deux colonnes : sans lui, un nom d'exercice long fait
   déborder la grille au lieu de passer à la ligne, et la page part en
   défilement horizontal. */
.atelier-seance__catalogue,
.atelier-seance__panier { min-width: 0; }
@media (min-width: 960px) {
  .atelier-seance {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  /* La séance reste visible pendant qu'on fait défiler la bibliothèque : sans
     cela, on ajoute à l'aveugle et le coût n'est plus jamais sous les yeux. */
  .atelier-seance__panier { position: sticky; top: var(--space-4); }
}

/* ── Bibliothèque ── */
.catalogue {
  display: flex;
  flex-direction: column;
  max-height: 32rem;
  overflow-y: auto;
}
.catalogue__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-gray-100);
}
.catalogue__ligne:last-child { border-bottom: none; }

.catalogue__titre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.catalogue__titre b { font-weight: var(--fw-semibold); color: var(--text-primary); }
.catalogue__titre small { font-size: var(--font-size-xs); color: var(--text-muted); }

/* ── Ce que la séance coûte ── */
.cout {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-pale);
}
.cout__chiffre { display: flex; flex-direction: column; text-align: center; }
.cout__chiffre b {
  font-size: var(--font-size-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.cout__chiffre small {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ── La séance en construction ── */
.panier { display: flex; flex-direction: column; gap: var(--space-4); }
.panier__ligne {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  background-color: var(--bg-default);
}
.panier__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.panier__entete b { font-weight: var(--fw-semibold); color: var(--text-primary); }
.panier__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

.panier__reglages {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) {
  .panier__reglages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.reglage { display: flex; flex-direction: column; gap: var(--space-1); }
.reglage span {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.reglage input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}

/* ── 35. Repli du détail de complétude ────────────────────────
   La liste des sections se replie. Elle s'ouvre d'elle-même tant qu'il manque
   quelque chose — c'est le moment où l'on veut la lire — et se range une fois
   le profil complet, où elle n'apprend plus rien.

   Le chevron et sa rotation viennent du style global de `summary` : rien à
   redéfinir ici, seulement la mise en page de la ligne cliquable. */

.guide__detail { margin-top: var(--space-5); }

.guide__bascule {
  display: flex;
  align-items: center;
  padding: var(--space-2) 0;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  border-top: 1px solid var(--color-gray-100);
  transition: color var(--transition-fast);
}
.guide__bascule:hover { color: var(--text-accent); }
.guide__bascule:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

/* Le libellé suit l'état : « voir » quand c'est replié, « masquer » quand
   c'est ouvert. Un intitulé fixe obligerait à deviner ce que fait le clic. */
.guide__bascule--fermer { display: none; }
.guide__detail[open] > .guide__bascule > .guide__bascule--ouvrir { display: none; }
.guide__detail[open] > .guide__bascule > .guide__bascule--fermer { display: inline; }

/* La liste porte déjà son propre filet en haut ; celui de la bascule suffit. */
.guide__detail > .guide__liste { margin-top: 0; border-top: none; }

/* ── 36. Page d'erreur ────────────────────────────────────────
   Une seule page pour tous les codes. Elle doit rester lisible quand tout le
   reste va mal : aucune dépendance à une image, à une police distante ou à un
   script — c'est précisément le moment où ils manquent. */

.erreur {
  max-width: 42rem;
  margin-inline: auto;
  padding-block: var(--space-16);
}

/* Le code en gros et en pâle : il situe sans crier. C'est le titre qui parle,
   pas le nombre — « 500 » n'a jamais aidé personne. */
.erreur__code {
  font-size: var(--font-size-4xl);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  line-height: 1;
}

.erreur__titre {
  margin-top: var(--space-2);
  font-size: var(--font-size-2xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.erreur__texte {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  line-height: 1.6;
}

.erreur__reference {
  margin-top: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
/* Faite pour être recopiée dans un message ou dictée : espacée, sélectionnable
   d'un bloc, et jamais coupée en fin de ligne. */
.erreur__reference code {
  padding: 2px var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--bg-muted);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  white-space: nowrap;
  user-select: all;
}

.erreur__form {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  background-color: var(--bg-surface);
}
.erreur__form textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
}

.erreur__merci {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-success-line);
  background-color: var(--color-success-pale);
}
.erreur__merci-titre {
  font-weight: var(--fw-semibold);
  color: var(--color-success-dark);
}

.erreur__sorties {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.erreur__note {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* La rotation en toutes lettres, sous la frise : c'est la ligne qu'on relit
   pour vérifier son réglage, elle doit se détacher du reste. */
.discipline-cycle__recap {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--bg-muted);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}
.discipline-cycle__recap:empty { display: none; }

/* ── 37. Thème sombre ─────────────────────────────────────────
   Trois états, le même contrat que le back-office :

     * `.clair` sur `<html>`  → thème clair imposé ;
     * `.sombre` sur `<html>` → thème sombre imposé ;
     * aucune classe          → `prefers-color-scheme` tranche.

   La classe est posée **côté serveur**, avant le premier octet de HTML : un
   basculement fait après le rendu ferait clignoter l'écran en blanc à chaque
   navigation.

   Rien d'autre que des jetons n'est redéfini ici, et c'est ce qui rend le thème
   possible : les utilitaires de la feuille passent tous par `var(--…)` — c'est
   la discipline que `test_style.py` impose depuis le début. Aucune règle de
   composant n'a eu à changer.

   Les deux blocs ci-dessous sont **identiques par construction** ; un test le
   vérifie, parce que deux palettes qui divergent donnent une interface
   différente selon qu'on a choisi le sombre ou qu'on l'a hérité du système. */

@media (prefers-color-scheme: dark) {
  /* `:not(.clair)` : un choix explicite pour le clair doit gagner contre la
     préférence du système, sinon le réglage n'a aucun effet la nuit. */
  :root:not(.clair) {
  color-scheme: dark;

  /* Neutres inversés. La marque, elle, ne bouge pas : le vert reste le vert,
     sinon l'application change d'identité en changeant de thème. */
  --color-gray-900: #F2F5F3;
  --color-gray-800: #DCE2DE;
  --color-gray-600: #A7B3AB;
  --color-gray-400: #7D8A82;
  --color-gray-200: #3A443E;
  --color-gray-100: #2A332E;
  --color-gray-50:  #1E2621;

  --text-primary:   #F2F5F3;
  --text-secondary: #B3BFB7;
  --text-muted:     #A0ABA4;
  --text-on-bright: #161D18;
  --text-accent:    #8FE3A0;

  --bg-surface: #1E2621;
  --bg-default: #151B18;
  --bg-muted:   #2A332E;
  --bg-dark:    #0F1411;
  --bg-deep:    #0F1411;
  --bg-strong:  #1E2621;
  --text-on-dark-muted: #B7C1BA;

  --discipline-calisthenie:      #D8A9EC;
  --discipline-calisthenie-pale: #302039;
  --discipline-calisthenie-line: #714B81;
  --discipline-hyrox:            #F0A16E;
  --discipline-hyrox-pale:       #352319;
  --discipline-hyrox-line:       #7A4B2E;

  /* Les teintes d'état sont éclaircies et leurs fonds assombris : un
     `--color-success-pale` clair sur fond sombre éblouit, et le texte foncé
     qu'il porte devient illisible. */
  --color-primary-pale:  #1C2E22;
  --color-primary-light: #2F5A3C;
  --color-success-dark: #6EE7A0;
  --color-success-pale: #16281D;
  --color-success-line: #2C5039;
  --color-warning-dark: #FBBF24;
  --color-warning-pale: #2C2412;
  --color-warning-line: #574620;
  --color-error-dark:   #FCA5A5;
  --color-error-pale:   #2E1A1A;
  --color-error-line:   #5A2E2E;

  /* Ombres portées : sur fond sombre, une ombre grise ne se voit pas. On
     assombrit davantage plutôt que d'en supprimer, sinon les cartes se
     confondent avec le fond. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.60);

  --brand-soma: #F2F5F3;
  }
}

:root.sombre {
  color-scheme: dark;

  /* Neutres inversés. La marque, elle, ne bouge pas : le vert reste le vert,
     sinon l'application change d'identité en changeant de thème. */
  --color-gray-900: #F2F5F3;
  --color-gray-800: #DCE2DE;
  --color-gray-600: #A7B3AB;
  --color-gray-400: #7D8A82;
  --color-gray-200: #3A443E;
  --color-gray-100: #2A332E;
  --color-gray-50:  #1E2621;

  --text-primary:   #F2F5F3;
  --text-secondary: #B3BFB7;
  --text-muted:     #A0ABA4;
  --text-on-bright: #161D18;
  --text-accent:    #8FE3A0;

  --bg-surface: #1E2621;
  --bg-default: #151B18;
  --bg-muted:   #2A332E;
  --bg-dark:    #0F1411;
  --bg-deep:    #0F1411;
  --bg-strong:  #1E2621;
  --text-on-dark-muted: #B7C1BA;

  --discipline-calisthenie:      #D8A9EC;
  --discipline-calisthenie-pale: #302039;
  --discipline-calisthenie-line: #714B81;
  --discipline-hyrox:            #F0A16E;
  --discipline-hyrox-pale:       #352319;
  --discipline-hyrox-line:       #7A4B2E;

  /* Les teintes d'état sont éclaircies et leurs fonds assombris : un
     `--color-success-pale` clair sur fond sombre éblouit, et le texte foncé
     qu'il porte devient illisible. */
  --color-primary-pale:  #1C2E22;
  --color-primary-light: #2F5A3C;
  --color-success-dark: #6EE7A0;
  --color-success-pale: #16281D;
  --color-success-line: #2C5039;
  --color-warning-dark: #FBBF24;
  --color-warning-pale: #2C2412;
  --color-warning-line: #574620;
  --color-error-dark:   #FCA5A5;
  --color-error-pale:   #2E1A1A;
  --color-error-line:   #5A2E2E;

  /* Ombres portées : sur fond sombre, une ombre grise ne se voit pas. On
     assombrit davantage plutôt que d'en supprimer, sinon les cartes se
     confondent avec le fond. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.60);

  --brand-soma: #F2F5F3;
}

/* ── 38. Invitation professionnelle ───────────────────────────
   L'écran au bout d'un lien d'invitation. Il doit se distinguer d'une
   inscription ordinaire dès le premier coup d'œil — on n'y arrive pas par
   hasard, on y a été invité — sans sortir de la charte pour autant : mêmes
   jetons, mêmes composants, une pastille et une adresse mises en avant. */

.invitation-pro__pastille {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-primary-dark);
  background-color: var(--color-primary-pale);
  color: var(--text-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* L'adresse invitée est affichée, jamais saisissable : c'est l'invitation qui
   la porte. Elle est donc traitée comme une donnée, pas comme un champ. */
.invitation-pro__adresse {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  background-color: var(--bg-muted);
}

.invitation-pro__adresse-label {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.invitation-pro__adresse-valeur {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* ── Badges et parrainage ───────────────────────────────────────────────── */
.achievements,
.referral-card {
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.achievements__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.achievements__heading h2,
.referral-card h2 { font-size: var(--font-size-2xl); font-weight: var(--fw-bold); }
.achievements__score {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary-pale);
  color: var(--text-accent);
  font-size: var(--font-size-xl);
  font-weight: var(--fw-bold);
}
.achievements__score span { font-size: var(--font-size-sm); }
.achievements-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-decoration: none;
}
.achievements-link:hover { border-color: var(--color-primary); }
.badges-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.badge-card {
  display: flex;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}
.badge-card--earned {
  border-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
  background: linear-gradient(145deg, var(--color-primary-pale), var(--bg-surface));
}
.badge-card--locked { filter: saturate(0.45); }
.badge-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: 1.45rem;
  box-shadow: var(--shadow-sm);
}
.badge-card--locked .badge-card__icon { opacity: 0.5; }
.badge-card__body { min-width: 0; flex: 1; }
.badge-card__topline { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.badge-card h3 { font-weight: var(--fw-bold); }
.badge-card p { color: var(--text-muted); font-size: var(--font-size-sm); }
.badge-card__earned {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  color: var(--text-accent);
}
.badge-card__progress {
  height: 0.35rem;
  margin-top: var(--space-3);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
}
.badge-card__progress span { display: block; height: 100%; background: var(--color-primary); }
.badge-card__metric { margin-top: var(--space-1); }
.badge-card__rank {
  margin-top: var(--space-2);
  color: var(--text-accent) !important;
  font-weight: var(--fw-semibold);
}
.badge-card__reward {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-pale);
  color: var(--text-secondary) !important;
}
.badge-card__reward strong { display: block; color: var(--text-accent); }
.badge-card__share {
  margin-top: var(--space-2);
  border: 0;
  background: transparent;
  color: var(--text-accent);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.referral-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
  gap: var(--space-8);
  background: linear-gradient(135deg, var(--bg-surface), var(--color-primary-pale));
}
.referral-card__content > p:not(.eyebrow) { margin-top: var(--space-3); color: var(--text-secondary); }
.referral-stats { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-block: var(--space-5); }
.referral-stats div { display: flex; flex-direction: column; }
.referral-stats strong { font-size: var(--font-size-2xl); color: var(--text-accent); }
.referral-stats span { font-size: var(--font-size-xs); color: var(--text-muted); }
.referral-card__result {
  align-self: center;
  padding: var(--space-4);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.referral-card__result label { display: block; margin-bottom: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--fw-semibold); }
.referral-card__link { display: flex; gap: var(--space-2); }
.referral-card__link input { min-width: 0; width: 100%; }
@media (max-width: 640px) {
  .badges-grid,
  .referral-card { grid-template-columns: 1fr; }
  .badge-card { padding: var(--space-3); }
  .referral-card__link { flex-direction: column; }
  .achievements-link { align-items: flex-start; }
}

/* Les surfaces toujours sombres gardent des textes clairs dans les deux th?mes.
   Les accents de texte sont distincts des fonds verts de la marque. */
.site-header, .site-footer, .hero, .page-hero, .carte--action, .chrono--repos {
  --text-primary: #FFFFFF;
  --text-secondary: #B7C1BA;
  --text-muted: #B7C1BA;
  --text-accent: #8FE3A0;
}
.carte--action { color: var(--text-primary); }
.carte--action .achievements__score {
  background: var(--bg-strong);
  color: var(--text-accent);
  border: 1px solid var(--color-primary);
}
.carte--action .btn--outline { color: var(--text-accent); }
.carte--action .btn--outline:hover { background: var(--bg-strong); }
.hero .guide .guide__etape-raison,
.hero .guide .guide__reste { color: var(--text-on-dark-muted); }
.lien-discret:hover,
.hover\:text-orange-300:hover { color: var(--text-accent); }

/* Texte sur les fonds verts lumineux : m?me contraste en clair et en sombre. */
.jour input:checked + span,
.widget__saisie button,
.coach-suggestion-btn,
.coach-user { color: var(--text-on-bright); }
.widget__saisie button:hover,
.coach-suggestion-btn:hover { color: #FFFFFF; }
.bulle--moi, .widget__tete, .chrono--fini {
  background: var(--bg-strong);
  color: #FFFFFF;
}
.bulle--moi .bulle__heure { opacity: 1; color: var(--text-on-dark-muted); }

/* Entrée entraînement et récupération. */
.training-entry {
  display: grid;
  gap: var(--space-6);
  padding: clamp(var(--space-5), 5vw, var(--space-10));
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-primary-light);
  background: linear-gradient(135deg, var(--color-primary-pale), var(--bg-surface));
}
.training-entry h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: var(--fw-bold); margin-top: var(--space-2); }
.training-entry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.training-entry__actions .btn--primary { min-height: 64px; padding-inline: var(--space-8); font-size: var(--font-size-base); }
.training-program { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); background: var(--bg-surface); }
.training-program > summary { color: var(--text-secondary); }
.recovery-page { display: grid; gap: var(--space-5); }
.recovery-drill { padding-block: var(--space-4); border-bottom: 1px solid var(--color-gray-100); }
.recovery-drill h3 { font-weight: var(--fw-semibold); }
.recovery-drill p { margin-top: var(--space-2); color: var(--text-secondary); }
.recovery-drill span { display: block; margin-top: var(--space-2); color: var(--text-accent); font-size: var(--font-size-sm); }
.recovery-timer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.recovery-timer output { font-size: var(--font-size-3xl); font-variant-numeric: tabular-nums; }
.recovery-choice { display: flex; gap: var(--space-3); padding-block: var(--space-3); align-items: flex-start; }
.recovery-choice input { margin-top: .25rem; flex-shrink: 0; }
.recovery-choice small { display: block; margin-top: var(--space-1); color: var(--text-secondary); }
.recovery-page fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

/* Formulaires de profil : un choix principal lisible, puis les options. */
.goals-choice { display: grid; gap: var(--space-3); }
.goal-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  cursor: pointer;
}
.goal-choice:hover { border-color: var(--color-primary); }
.goal-choice:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-pale);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.goal-choice__priority {
  display: none;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--text-on-bright);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
}
.goal-choice:has(input:checked) .goal-choice__priority { display: inline-flex; }
.secondary-goals,
.activity-start-date {
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}
.secondary-goals > summary,
.activity-start-date > summary { cursor: pointer; font-weight: var(--fw-semibold); }
.secondary-goals__choices { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.secondary-goals__choices label { display: flex; align-items: center; gap: var(--space-2); }
.activity-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.form-error {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  background: var(--bg-surface);
}

/* Nutrition : les contraintes et la validation des repas restent visibles. */
.meal-plan-constraints { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.meal-plan-constraints span {
  padding: .35rem .65rem;
  border: 1px solid var(--color-primary-light);
  border-radius: 999px;
  color: var(--text-accent);
  background: var(--color-primary-pale);
  font-size: var(--font-size-xs);
}
.nutrition-journal-action,
.meal-journal-row,
.meal-journal-actions { display: flex; align-items: center; gap: var(--space-3); }
.nutrition-journal-action {
  justify-content: space-between;
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-lg);
  background: var(--color-primary-pale);
}
.nutrition-journal-action p { margin-top: var(--space-1); color: var(--text-secondary); }
.meal-journal-row { justify-content: space-between; padding-block: var(--space-3); }
.meal-journal-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) {
  .training-entry__actions { flex-direction: column; align-items: stretch; }
  .training-entry__actions .btn { white-space: normal; text-align: center; }
  .goal-choice { grid-template-columns: auto minmax(0, 1fr); }
  .goal-choice__priority { grid-column: 2; justify-self: start; }
  .activity-form-actions,
  .nutrition-journal-action,
  .meal-journal-row { align-items: stretch; flex-direction: column; }
  .activity-form-actions .btn,
  .nutrition-journal-action .btn,
  .meal-journal-actions,
  .meal-journal-actions form,
  .meal-journal-actions .btn { width: 100%; }
}