:root {
  /* Palette Lumos — vague : vert d'eau → turquoise → bleu lagon → bleu océan */
  --mint: #bdf0dc;
  --mint-pale: #e3f8ef;
  --turquoise: #5fd6c4;
  --turquoise-deep: #2fb3a3;
  --lagoon: #4bb8d6;
  --ocean: #2f86ad;
  --ocean-deep: #1f6a8c;
  --sky-pale: #d9f2f3;
  --aqua-pale: #eaf9f6;

  --gris-bleute: #7c8f98;
  --gris-bleute-pale: #eef3f4;
  --blanc-casse: #fbfdfd;

  --texte: #2a3a41;
  --texte-doux: #4d5f66;
  --muted: #83959c;

  --degrade-primaire: linear-gradient(135deg, var(--turquoise) 0%, var(--ocean) 100%);
  --degrade-fond: radial-gradient(circle at 15% 0%, #f2fbf9 0%, #eaf7f3 22%, #e2f3f1 45%, #dcefef 68%, #d7ecf1 100%);

  --carte-bg: rgba(255, 255, 255, 0.72);
  --carte-bg-pleine: #ffffff;
  --ombre-douce: 0 10px 30px rgba(47, 108, 130, 0.08);
  --ombre-legere: 0 4px 14px rgba(47, 108, 130, 0.06);

  /* Couleurs fonctionnelles — cycle uniquement (bulle de phase sur l'accueil, jamais toute la carte) */
  --rose-regles: #f3b9c8;
  --lilas-ovulation: #cdb9f2;
  --beige-luteale: #e6d7c3;
  --vert-folliculaire: #c8e8c4;
  --gris-jour-vide: #ccd6da; /* calendrier sport : jour sans séance - gris clair net, jamais blanc/transparent */

  /* Pastilles du Planning (30/09) : reflètent le STATUT (à mener / menée), pas le domaine d'origine. */
  --pastille-a-mener: #a9d4f5;
  --pastille-menee: #9fe0c9;
  /* Bulle "+ Ajouter repas" (Accueil, 30/09) : dégradé bleu/vert d'eau plus soutenu que le fond Lumos. */
  --degrade-aliment: linear-gradient(135deg, #3fc9b3 0%, #1f7fa8 100%);

  /* ===== Thèmes par univers (30/09) ===== */
  /* Références FIXES par domaine (toujours ces couleurs-ci, ex. pastilles du Planning qui gardent
     l'accent d'origine d'un événement quel que soit le thème de la page où elles s'affichent). */
  --sport-accent: #6fa3d8; --sport-accent-deep: #4a86c8; --sport-accent-pale: #dcebf8;
  --sport-degrade: linear-gradient(135deg, #8fc0e8 0%, #4a86c8 100%);
  --bienetre-accent: #e0947e; --bienetre-accent-deep: #c97558; --bienetre-accent-pale: #fbe4d9;
  --bienetre-degrade: linear-gradient(135deg, #f0b79e 0%, #d98a77 100%);
  --divertissement-accent: #c98a6b; --divertissement-accent-deep: #a8694e; --divertissement-accent-pale: #f0d9c9;
  --divertissement-degrade: linear-gradient(135deg, #d9a284 0%, #b06f52 100%);
  --bushido-accent: #7fa568; --bushido-accent-deep: #5f8a49; --bushido-accent-pale: #e2ead9;
  --bushido-degrade: linear-gradient(135deg, #a3c48a 0%, #6f9159 100%);

  /* Références DYNAMIQUES (utilisées par les composants partagés : boutons, onglets actifs, filtres,
     contours, pastilles, jauges...) - valent la palette Lumos par défaut (Accueil/Planning, inchangés),
     redéfinies par domaine via body.univers-* plus bas. */
  --accent: var(--turquoise-deep);
  --accent-texte: var(--ocean-deep);
  --accent-pale: var(--mint-pale);
  --accent-tres-pale: var(--aqua-pale);
  --accent-bordure: var(--turquoise);
  --degrade-accent: var(--degrade-primaire);

  --rayon-lg: 26px;
  --rayon-md: 18px;
  --rayon-pill: 999px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100vh;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, sans-serif;
  color: var(--texte);
  background: var(--degrade-fond);
  background-attachment: fixed;
  padding-bottom: 96px;
  transition: background 0.4s ease;
}

/* Identité colorimétrique par univers (30/09) : dégradés pastel diffus, zones floutées sur fond clair
   (esprit Solaia), pas d'aplats. Accueil/Planning gardent le dégradé Lumos par défaut ci-dessus. */
body.univers-sport {
  --accent: var(--sport-accent-deep);
  --accent-texte: var(--sport-accent-deep);
  --accent-pale: var(--sport-accent-pale);
  --accent-tres-pale: var(--sport-accent-pale);
  --accent-bordure: var(--sport-accent);
  --degrade-accent: var(--sport-degrade);
  background:
    radial-gradient(circle at 15% 12%, rgba(158, 199, 235, 0.55) 0%, rgba(158, 199, 235, 0) 45%),
    radial-gradient(circle at 88% 22%, rgba(186, 219, 245, 0.5) 0%, rgba(186, 219, 245, 0) 50%),
    radial-gradient(circle at 50% 92%, rgba(210, 234, 250, 0.6) 0%, rgba(210, 234, 250, 0) 55%),
    #f6fbfe;
  background-attachment: fixed;
}
body.univers-bushido {
  --accent: var(--bushido-accent-deep);
  --accent-texte: var(--bushido-accent-deep);
  --accent-pale: var(--bushido-accent-pale);
  --accent-tres-pale: var(--bushido-accent-pale);
  --accent-bordure: var(--bushido-accent);
  --degrade-accent: var(--bushido-degrade);
  background:
    radial-gradient(circle at 18% 18%, rgba(194, 222, 178, 0.55) 0%, rgba(194, 222, 178, 0) 45%),
    radial-gradient(circle at 82% 28%, rgba(213, 230, 194, 0.5) 0%, rgba(213, 230, 194, 0) 50%),
    radial-gradient(circle at 50% 92%, rgba(238, 238, 220, 0.6) 0%, rgba(238, 238, 220, 0) 55%),
    #f8faf3;
  background-attachment: fixed;
}
body.univers-bienetre {
  --accent: var(--bienetre-accent-deep);
  --accent-texte: var(--bienetre-accent-deep);
  --accent-pale: var(--bienetre-accent-pale);
  --accent-tres-pale: var(--bienetre-accent-pale);
  --accent-bordure: var(--bienetre-accent);
  --degrade-accent: var(--bienetre-degrade);
  background:
    radial-gradient(circle at 14% 18%, rgba(250, 201, 178, 0.5) 0%, rgba(250, 201, 178, 0) 45%),
    radial-gradient(circle at 82% 14%, rgba(245, 190, 206, 0.45) 0%, rgba(245, 190, 206, 0) 50%),
    radial-gradient(circle at 28% 82%, rgba(250, 230, 180, 0.45) 0%, rgba(250, 230, 180, 0) 50%),
    radial-gradient(circle at 86% 82%, rgba(211, 196, 231, 0.45) 0%, rgba(211, 196, 231, 0) 50%),
    #fdf8f5;
  background-attachment: fixed;
}
body.univers-divertissement {
  --accent: var(--divertissement-accent-deep);
  --accent-texte: var(--divertissement-accent-deep);
  --accent-pale: var(--divertissement-accent-pale);
  --accent-tres-pale: var(--divertissement-accent-pale);
  --accent-bordure: var(--divertissement-accent);
  --degrade-accent: var(--divertissement-degrade);
  background:
    radial-gradient(circle at 18% 18%, rgba(224, 160, 130, 0.45) 0%, rgba(224, 160, 130, 0) 45%),
    radial-gradient(circle at 86% 24%, rgba(235, 190, 160, 0.45) 0%, rgba(235, 190, 160, 0) 50%),
    radial-gradient(circle at 50% 92%, rgba(240, 215, 195, 0.5) 0%, rgba(240, 215, 195, 0) 55%),
    #fbf5f0;
  background-attachment: fixed;
}

/* ===================== EN-TÊTE ===================== */

.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 6px;
  max-width: 720px;
  margin: 0 auto;
}
.top-header.cache { display: none; }

#page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--texte);
  letter-spacing: -0.01em;
}

.avatar-bulle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--degrade-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: var(--ombre-legere);
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  padding: 0;
}
.avatar-bulle svg {
  width: 22px;
  height: 22px;
}

/* ===================== CONTENU ===================== */

main#page {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 18px 40px;
}

.chargement, .bientot {
  text-align: center;
  color: var(--muted);
  padding: 90px 20px;
}
.bientot h2 { color: var(--texte); margin-bottom: 8px; font-weight: 700; }

/* ===================== GRILLE & CARTES ===================== */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.carte {
  background: var(--carte-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--rayon-lg);
  padding: 22px 22px;
  box-shadow: var(--ombre-douce);
}
.carte.large { grid-column: 1 / -1; }
.carte.pleine { background: var(--carte-bg-pleine); }

.carte h3 {
  margin: 0 0 12px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--gris-bleute);
}

.accueil-entete { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.accueil-entete h1 {
  margin: 0 0 4px;
  font-size: 1.4rem;
  font-weight: 700;
}
.accueil-entete .date {
  color: var(--muted);
  text-transform: capitalize;
  font-size: 0.95rem;
}
.bulle-aliment {
  display: block;
  width: 100%;
  margin: 14px 0;
  padding: 16px 20px;
  border-radius: var(--rayon-lg);
  background: var(--degrade-aliment);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  border: none;
  cursor: pointer;
  box-shadow: var(--ombre-douce);
}

/* Titre de section pleine page (ex. "Mes routines" Bien-être, 30/09) - même esprit que .carte h3. */
.libelle-section-page {
  margin: 0 0 10px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--texte);
}

/* Filtre catégorie Divertissement (30/09) : une seule ligne "Toutes" / "Catégorie ▾". */
.ligne-filtre-cat { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.filtre-cat-toutes {
  padding: 6px 14px;
  border-radius: var(--rayon-pill);
  border: none;
  cursor: pointer;
  background: var(--gris-bleute-pale);
  color: var(--texte-doux);
  font-size: 0.85rem;
  font-weight: 600;
}
.filtre-cat-toutes.actif { background: var(--degrade-accent); color: #fff; }
.sel-filtre-cat {
  padding: 6px 14px;
  border-radius: var(--rayon-pill);
  border: 1px solid var(--gris-bleute-pale);
  background: #fff;
  color: var(--texte-doux);
  font-size: 0.85rem;
}

.pensee-precepte {
  color: var(--accent-texte);
  font-weight: 700;
  margin-bottom: 8px;
}
.pensee-texte {
  font-style: italic;
  line-height: 1.55;
  color: var(--texte-doux);
}

/* ===================== VALEURS / JAUGES ===================== */

.valeur {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--texte);
}
.sous-valeur {
  color: var(--muted);
  font-size: 0.86rem;
}

.barre-progres {
  width: 100%;
  height: 12px;
  background: var(--gris-bleute-pale);
  border-radius: var(--rayon-pill);
  overflow: hidden;
  margin-top: 12px;
}
.barre-progres > div {
  height: 100%;
  border-radius: var(--rayon-pill);
  background: linear-gradient(90deg, var(--mint), var(--turquoise), var(--ocean));
  transition: width .3s;
}

/* Anneau de progression circulaire */
.anneau {
  --pct: 0;
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--gris-bleute-pale) 0);
  flex-shrink: 0;
}
.anneau::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--carte-bg-pleine);
}
.anneau-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.anneau-centre .valeur { font-size: 1.15rem; line-height: 1.1; }
.anneau-centre .sous-valeur { font-size: 0.7rem; }

/* ===================== BOUTONS ===================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--rayon-pill);
  padding: 12px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--degrade-accent);
  color: #fff;
  box-shadow: var(--ombre-legere);
  transition: transform .12s, opacity .15s, box-shadow .15s;
}
.bouton:active { transform: scale(0.97); }
.bouton:hover { opacity: 0.94; }

.bouton.secondaire {
  background: var(--accent-tres-pale);
  color: var(--accent-texte);
  box-shadow: none;
}

.bouton:disabled { opacity: .5; cursor: default; transform: none; }

/* Cartes de choix (intensité, options) */
.choix-ligne {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.choix-carte {
  flex: 1;
  min-width: 90px;
  text-align: center;
  padding: 16px 10px;
  border-radius: var(--rayon-md);
  background: var(--gris-bleute-pale);
  border: 2px solid transparent;
  color: var(--texte-doux);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.choix-carte.selectionnee {
  background: var(--accent-pale);
  border-color: var(--accent-bordure);
  color: var(--accent-texte);
}

/* Segmented control (sous-onglets) */
.sous-nav {
  display: flex;
  gap: 4px;
  background: var(--gris-bleute-pale);
  border-radius: var(--rayon-pill);
  padding: 4px;
  margin-bottom: 18px;
  overflow-x: auto;
}
.onglet {
  flex: 1;
  white-space: nowrap;
  border: none;
  background: transparent;
  color: var(--gris-bleute);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 14px;
  border-radius: var(--rayon-pill);
  cursor: pointer;
  transition: all .15s;
}
.onglet.actif {
  background: #fff;
  color: var(--accent-texte);
  box-shadow: var(--ombre-legere);
}

/* ===================== FORMULAIRES ===================== */

.ligne-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.ligne-form input, .ligne-form select,
.v-champ {
  background: #fff;
  border: 1px solid var(--gris-bleute-pale);
  color: var(--texte);
  padding: 10px 12px;
  border-radius: var(--rayon-md);
  font-size: 0.9rem;
}

.champ { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: 0.82rem; color: var(--gris-bleute); font-weight: 600; }
.champ input, .champ select, .champ textarea {
  background: #fff;
  border: 1px solid var(--gris-bleute-pale);
  color: var(--texte);
  padding: 12px 14px;
  border-radius: var(--rayon-md);
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

/* Jauges horizontales (Aliment du jour, 30/09) : vert = objectif non dépassé, rouge = dépassé. */
.jauge-fond {
  width: 100%;
  height: 8px;
  border-radius: var(--rayon-pill);
  background: var(--gris-bleute-pale);
  overflow: hidden;
}
.jauge-remplie {
  height: 100%;
  border-radius: var(--rayon-pill);
  background: var(--degrade-accent);
  transition: width 0.3s ease;
}
.jauge-remplie.jauge-verte { background: linear-gradient(90deg, #a8dcb4, #6fb87f); }
.jauge-remplie.jauge-rouge { background: linear-gradient(90deg, #f0a8a8, #d97070); }

.chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--rayon-pill);
  font-weight: 700;
  font-size: 0.85rem;
}

.badge-ok {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-pale);
  padding: 6px 14px;
  border-radius: var(--rayon-pill);
  font-size: 0.85rem;
  display: inline-block;
}

.onboarding { max-width: 420px; margin: 30px auto; }
.onboarding h2 { margin-top: 0; font-weight: 700; }

.hidden { display: none !important; }

/* ===================== CONNEXION (mot de passe) ===================== */
#login-gate {
  position: fixed; inset: 0; z-index: 200; background: var(--degrade-fond);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px;
}
.login-logo { text-align: center; margin-bottom: 30px; animation: login-flotte 3.5s ease-in-out infinite; }
.login-logo img { width: 84px; height: 84px; border-radius: var(--rayon-md); box-shadow: var(--ombre-douce); }
.login-nom { margin-top: 12px; font-size: 1.6rem; font-weight: 800; color: var(--ocean-deep); letter-spacing: -0.01em; }
@keyframes login-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.login-carte { max-width: 320px; width: 100%; text-align: center; }
.login-carte .champ { text-align: left; }
.login-erreur { color: #d9534f; font-size: 0.85rem; min-height: 1.2em; margin: 6px 0 10px; }

/* ===================== NAVIGATION BASSE ===================== */

.bottom-nav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 14px;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--rayon-pill);
  padding: 8px;
  box-shadow: 0 12px 30px rgba(47, 108, 130, 0.14);
  z-index: 30;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--gris-bleute);
  text-decoration: none;
  transition: all .15s;
  flex-shrink: 0;
}
.nav-link svg { width: 21px; height: 21px; }
.nav-link.kanji { font-size: 1.05rem; font-weight: 700; font-family: serif; }
.nav-link.actif {
  color: var(--accent-texte);
  background: var(--accent-pale);
}

/* ===================== PLANNING (semaine) ===================== */

.jour-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: none;
  border-radius: var(--rayon-md);
  background: transparent;
  color: var(--texte-doux);
  cursor: pointer;
}
.jour-pill .jp-abr { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--gris-bleute); }
.jour-pill .jp-num { font-size: 1rem; font-weight: 700; }
.jour-pill.aujourdhui .jp-num { color: var(--ocean-deep); }
.jour-pill.selectionne { background: var(--degrade-primaire); }
.jour-pill.selectionne .jp-abr, .jour-pill.selectionne .jp-num { color: #fff; }

/* Actions du jour = petites bulles dans la même carte que le calendrier (30/09), pas de sous-carte. */
.pl-swipe-zone { margin-top: 14px; }
.pilule-planning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--gris-bleute-pale);
  font-size: 0.92rem;
  color: var(--texte);
}
.pilule-planning:last-child { border-bottom: none; }
.pilule-planning.cliquable { cursor: pointer; }
.pilule-point { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pilule-texte { flex: 1; }

/* ===================== ROUE DU CYCLE ===================== */

.roue-fond {
  background: linear-gradient(165deg, #fdeef1 0%, #f7e7f4 45%, #ece3f7 100%);
  border-radius: var(--rayon-lg);
  padding: 22px 16px 26px;
  text-align: center;
}
.roue-phase-ligne {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.roue-phase-nom {
  font-size: 1.15rem;
  font-weight: 700;
}
.roue-aide {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.7);
  color: var(--gris-bleute);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.roue-conteneur {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 6px auto 0;
}
.roue-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 30%;
}
.roue-centre .phase-nom { font-size: 1.05rem; font-weight: 700; color: var(--ocean-deep); }
.roue-centre .sous-valeur { margin-top: 4px; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 45, 50, 0.35);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 20px;
}
.modal-carte {
  background: var(--carte-bg-pleine);
  border-radius: var(--rayon-lg);
  padding: 26px 24px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--ombre-douce);
  text-align: center;
}
.modal-carte h3 {
  text-transform: none;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texte);
  letter-spacing: 0;
  margin-bottom: 12px;
}
.modal-carte p {
  color: var(--texte-doux);
  line-height: 1.55;
  margin: 0 0 18px;
  text-align: left;
}
.modal-carte .liste-instructions { text-align: left; margin: 0 0 18px; padding-left: 20px; color: var(--texte-doux); line-height: 1.6; }
.modal-carte .liste-instructions li { margin-bottom: 4px; }
.modal-carte.form-modal { text-align: left; max-width: 440px; }
.modal-carte.form-modal h3 { text-align: center; }
.modal-carte .liste-periodes { max-height: 160px; overflow-y: auto; margin: 10px 0; }
.ligne-periode { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--gris-bleute-pale); font-size: 0.9rem; }

/* ===================== TOAST ===================== */

.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--texte);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--rayon-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 50;
  font-size: 0.88rem;
  box-shadow: var(--ombre-douce);
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===================== DIVERS ===================== */

.ligne-seance { transition: transform .1s; }
.ligne-seance:active { transform: scale(0.99); }

/* Calendrier annuel sportif : trame compacte façon "contributions" (inspiration Stance "Your gym years",
   cercles + couleurs Lumos au lieu de carrés noir/violet) - toute l'année en un seul coup d'œil. */
.legende-calendrier { display: flex; flex-wrap: wrap; gap: 14px; }
.legende-item { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--texte-doux); }
.legende-item .pastille { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.bloc-annee { margin-bottom: 26px; }
.trame-annuelle { width: 100%; }
.trame-mois { display: grid; grid-template-rows: 12px; gap: 1px; margin-bottom: 3px; }
.trame-mois-nom { font-size: 0.62rem; font-weight: 700; color: var(--texte-doux); text-transform: uppercase; white-space: nowrap; }
.trame-jours { display: grid; grid-template-rows: repeat(7, 6px); gap: 1px; }
.trame-jour { width: 4px; height: 4px; border-radius: 50%; align-self: center; justify-self: center; box-shadow: inset 0 0 0 1px var(--gris-bleute-pale); }

/* Listes compactes Divertissement (livres/films/séries) */
.carte.compacte { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 8px; }

/* Notation 1-5 étoiles, tactile (glisser le doigt) */
.etoiles-zone { display: flex; justify-content: center; gap: 10px; font-size: 2.4rem; color: var(--gris-bleute-pale); touch-action: none; user-select: none; cursor: pointer; padding: 10px 0; }
.etoiles-zone .etoile { transition: color .1s, transform .1s; }
.etoiles-zone .etoile.remplie { color: var(--accent); transform: scale(1.08); }
.etoiles-lecture { color: var(--accent); font-size: 1rem; letter-spacing: 1px; cursor: pointer; }

/* Routines Bien-être (Aujourd'hui) */
.grille-routines-jour { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .grille-routines-jour { grid-template-columns: 1fr; } }
.routine-entete { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.routine-soustitre { font-size: 0.78rem; letter-spacing: .04em; color: var(--accent); font-weight: 600; margin-top: 2px; }
.routine-etapes { list-style: none; margin: 12px 0 0; padding: 0; }
.routine-etapes li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; flex-wrap: wrap; }
.routine-etapes label { display: flex; align-items: center; gap: 10px; }
.indication { font-style: italic; color: var(--muted); font-size: 0.82rem; margin-left: 4px; }
.controles-etape { display: flex; gap: 4px; }
.controles-etape .bouton { padding: 2px 8px; font-size: 0.8rem; }

/* Blocs répétables (Course en fractionné) */
.bloc-repetable { border: 1.5px dashed var(--accent); border-radius: var(--rayon-lg); padding: 12px 14px; margin-bottom: 10px; background: var(--accent-tres-pale); }
.bloc-entete { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.9rem; color: var(--accent-texte); }
.bloc-repetable .carte { background: var(--carte-bg-pleine); }

/* Mode live (course en direct) */
.live-carte { max-width: 340px; position: relative; }
.live-son { position: absolute; top: 10px; right: 10px; padding: 4px 8px; font-size: 1rem; }
.live-valeur { font-size: 1.05rem; color: var(--texte-doux); margin-bottom: 6px; }
.live-bloc-progress { font-size: 0.8rem; font-weight: 700; color: var(--accent); letter-spacing: .04em; margin-bottom: 6px; }
.live-chrono { font-size: 2.4rem; font-weight: 700; color: var(--accent-texte); margin: 6px 0 18px; font-variant-numeric: tabular-nums; }
.live-chrono-global { font-size: 0.85rem; color: var(--muted); margin-top: -8px; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.live-compte-a-rebours { font-size: 4rem; font-weight: 700; color: var(--accent-texte); margin: 10px 0; font-variant-numeric: tabular-nums; }
.live-boutons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.live-carte.pulse { animation: live-pulse .5s ease-in-out 2; }
@keyframes live-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(64, 190, 180, 0.15); }
}

@media (max-width: 640px) {
  main#page { padding: 8px 14px 40px; }
  .top-header { padding: 16px 16px 4px; }
}