/* ==========================================================================
   Vigie — système visuel « lagon calédonien / poste de guet »
   Palette abysse + lagon turquoise + corail. Fraunces (display) + Inter (corps).
   ========================================================================== */

:root {
  --abyss: #0B2B36;
  --abyss-2: #12363F;
  --lagoon: #14B8A6;
  --lagoon-deep: #0E8C7F;
  --lagoon-soft: #D3ECE7;
  --coral: #FF7A5C;
  --coral-deep: #E85C42;
  --coral-soft: #FFE4DC;
  --gold: #F7C531;
  --gold-deep: #E9A80C;
  --gold-soft: #FDF3CD;
  --foam: #EAF3F1;
  --shell: #FFFFFF;
  --sand: #E7DFCE;
  --ink: #0B2B36;
  --muted: #5E7A80;
  --line: #D7E5E1;
  --track: #DCEAE6;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(11, 43, 54, 0.04), 0 6px 20px rgba(11, 43, 54, 0.06);
  --shadow-lift: 0 10px 28px rgba(11, 43, 54, 0.12);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  line-height: 1.45;
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(20, 184, 166, 0.10), transparent 60%),
    linear-gradient(180deg, var(--foam) 0%, #E2EEEB 100%);
  min-height: 100vh;
}

a { color: var(--lagoon-deep); }

/* GARDE-FOU GLOBAL — un élément porteur de l'attribut `hidden` est caché, POINT.
   Sans ça, toute règle d'auteur qui pose un `display:` (flex/grid/inline-block…)
   bat la règle du navigateur `[hidden] { display: none }` (même spécificité,
   auteur > UA) et l'élément reste VISIBLE malgré `hidden` — piège rencontré 3
   fois (formulaire d'ajout de quota, formulaire de lien projet, feedback sport).
   Posé haut + `!important` pour être une base que rien ne peut défaire.
   Corollaire : `hidden` ne sert QUE à cacher, jamais à autre chose. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--lagoon);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Barre du haut ------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem clamp(1rem, 4vw, 2rem);
  background: var(--abyss);
  color: #EaF3F1;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #fff;
}
.brand-mark { line-height: 0; display: inline-flex; align-items: center; }
.brand-mark svg { display: block; }
.brand-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}

.topbar-nav {
  display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.4rem);
  /* Mobile : le menu glisse horizontalement au doigt au lieu de déborder. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* pas de barre visible (Firefox) */
  min-width: 0;                     /* autorise le rétrécissement dans le flex parent */
  scroll-snap-type: x proximity;
  /* Dégradé d'indice : les bords s'estompent quand il y a du contenu au-delà. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  padding: 0 14px;
}
.topbar-nav::-webkit-scrollbar { display: none; }  /* pas de barre (WebKit) */
.topbar-nav a {
  color: #B9D3CE;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.topbar-nav a:hover { color: #fff; }
.topbar-nav .nav-here { color: #fff; border-bottom-color: var(--lagoon); }
.topbar-nav .logout { color: #7FA39C; }
.topbar-nav .logout:hover { color: var(--coral); }

main {
  padding: clamp(1rem, 3vw, 1.75rem);
  max-width: 1500px;
  margin: 0 auto;
}

/* ---- Connexion ----------------------------------------------------------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.login-form {
  width: 100%;
  max-width: 380px;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.login-form h1 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.8rem;
  text-align: center;
  color: var(--abyss);
}
.login-form label { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.login-form input {
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: #FBFDFC;
}
.login-form input:focus { border-color: var(--lagoon); }
.login-form button {
  margin-top: 0.85rem;
  padding: 0.8rem;
  background: var(--lagoon);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.08s ease;
}
.login-form button:hover { background: var(--lagoon-deep); }
.login-form button:active { transform: translateY(1px); }
.login-form .error { color: var(--coral-deep); font-size: 0.9rem; margin: 0.25rem 0 0; }
.login-form .success { color: var(--lagoon-deep); font-size: 0.9rem; margin: 0.25rem 0 0; }

/* ---- Compte : page mot de passe ------------------------------------------ */
.account-page {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 2rem) 1rem;
}
.account-page .login-form { max-width: 420px; }
.account-page > .card { width: 100%; max-width: 900px; }
.account-page > .success { color: var(--lagoon-deep); font-weight: 600; margin: 0; }
.account-page > .error { color: var(--coral-deep); font-weight: 600; margin: 0; }

/* ---- Réglages : mes projets (créer / renommer / icône / couleur / ordre / supprimer) ---- */
.account-projects h1 { margin: 0 0 0.3rem; }
.account-hint { color: var(--muted); font-size: 0.85rem; margin: 0 0 1rem; }
.account-project-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.account-project {
  border-left: 4px solid var(--line); border-radius: var(--radius-sm);
  background: var(--foam); padding: 0.6rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.account-project-form, .account-project-delete {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
}
.account-project input, .account-project-new input {
  font: inherit; font-size: 0.88rem; color: var(--abyss); background: #FBFDFC;
  border: 1px solid var(--line); border-radius: 6px; padding: 0.35rem 0.5rem; min-width: 0;
}
.account-project-icon { width: 3.2rem; text-align: center; }
.account-project-title { flex: 1 1 12rem; }
.account-project-slugin { flex: 0 1 10rem; }
.account-project-order { width: 4.2rem; }
.account-project-color { padding: 0.1rem; width: 2.6rem; height: 2rem; }
.account-project-slug { font-size: 0.8rem; color: var(--muted); text-decoration: none; }
.account-project-slug:hover { color: var(--lagoon-deep); }
.account-project-pct { font-size: 0.8rem; font-weight: 700; color: var(--lagoon-deep); font-variant-numeric: tabular-nums; }
.account-project button, .account-project-new button {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  border: none; border-radius: 6px; padding: 0.35rem 0.7rem;
  background: var(--lagoon-soft); color: var(--lagoon-deep);
}
.account-project button:hover, .account-project-new button:hover { background: #BFE4DD; }
.account-project-delete input { flex: 1 1 14rem; }
.account-project-danger { background: #FFE3E3 !important; color: var(--coral-deep) !important; }
.account-project-new { margin-top: 0.4rem; }

/* ---- Grille de La Une : SUPPRIMÉE le 19/08/2026 -------------------------
   La page tenait en deux étages : une zone haute (Sessions + météo) puis une
   grille (À faire / En vrac / En attente à gauche, RDV / Journal à droite).
   Les RDV et le Journal étant remontés dans la colonne droite, cette grille
   n'avait plus qu'une seule colonne et laissait un décrochement sous la zone
   haute — « c'est moche ! ». Les trois cartes restantes ont rejoint la pile de
   la colonne gauche, qui porte déjà son espacement (`--laune-gap`), et
   `.laune-grid` / `.laune-col-left` n'ont plus d'usage.
   `.laune-col-right` SURVIT : il empile encore RDV et Journal dans la colonne
   droite (cf. `.laune-top-meteo .laune-col-right`). */
.laune-col-right > .card + .card { margin-top: clamp(0.85rem, 2vw, 1.15rem); }

/* ---- Zone haute de La Une (2 colonnes : contenu large | météo à droite) --- */
/* Par défaut (et quand il n'y a pas de météo) : une seule colonne, la partie
   gauche prend toute la largeur -> aucune colonne vide béante. */
/* Respiration sous le haut de page : depuis que « Sessions » vit dans
   .laune-top-main, la grille (À faire / RDV…) démarrait collée à lui. */
.laune-top { margin-bottom: clamp(1.1rem, 2.6vw, 1.7rem); }

/* UN SEUL ESPACEMENT DANS CETTE COLONNE (18/08/2026).
   Cinq régimes de marges y cohabitaient, hérités de cinq chantiers : marge
   basse propre (bandeau de semaine 1.1rem, jauge et cartes du Lot 1.2rem),
   marge d'adjacence `.card + .card` (1rem), bandeaux « nudge » qui ne sont
   pas des `.card` (donc invisibles pour cette règle), et l'escalade des
   attentes en pixels. Résultat visible : 2.2rem entre deux cartes du Lot
   (1.2 + 1), et ZÉRO au-dessus du bandeau « séance surprise » — c'est
   l'écart qu'Amandine a signalé.
   La colonne devient une pile flex à `gap` unique, et les marges verticales
   de ses enfants DIRECTS sont neutralisées. Le sélecteur `> .card + .card`
   est répété exprès : sans lui, `.card + .card` (0,2,0) l'emporterait sur
   `> *` (0,1,0) et rouvrirait l'écart double. Les marges INTERNES des blocs
   ne sont pas touchées. */
.laune-top-main {
  --laune-gap: clamp(0.85rem, 2vw, 1.15rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--laune-gap);
}
.laune-top-main > *,
.laune-top-main > .card + .card { margin-top: 0; margin-bottom: 0; }
/* DEUX SATELLITES gardent leur rapprochement, qui n'est pas un accident :
   le lien « trier » et la réponse d'« Et maintenant ? » appartiennent
   visuellement au bloc juste au-dessus d'eux (ils portaient une marge
   négative avant la mise à plat). On annule le gap pour eux, sans revenir
   à des marges en dur : la valeur suit celle de la pile. */
.laune-top-main > #next-action { margin-top: calc(0.25rem - var(--laune-gap)); }
.laune-top-meteo {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.15rem);
}
/* Les cartes de la colonne droite ne portent plus leurs propres marges : le
   `gap` du wrapper commande, comme dans la colonne gauche. */
.laune-top-meteo > *, .laune-top-meteo .laune-col-right > .card + .card { margin-top: 0; margin-bottom: 0; }
.laune-top-meteo .laune-col-right {
  display: flex; flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.15rem);
}
/* Desktop : 2 colonnes UNIQUEMENT quand la météo est présente. Colonne gauche
   souple, colonne droite étroite (~300-340px) pour le widget météo. Les blocs
   s'alignent en haut : la météo se cale en haut à droite, sans être étirée. */
@media (min-width: 900px) {
  /* DEUX COLONNES TOUJOURS (19/08/2026) : la colonne droite ne porte plus
     seulement la météo, mais aussi les RDV et le Journal. La conditionner au
     widget les renverrait tout en bas de page le jour où Open-Meteo ne répond
     pas. `--with-meteo` reste sur l'élément (le gabarit la pose encore) mais
     ne commande plus la grille. */
  .laune-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 340px);
    gap: clamp(1rem, 2.5vw, 1.6rem);
    align-items: start;
  }
}

/* ---- Cartes -------------------------------------------------------------- */
.card {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.4rem);
  box-shadow: var(--shadow);
}
.card h2 {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--abyss);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card h2::before {
  content: "";
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--lagoon);
  flex: 0 0 auto;
}
.card-pins h2::before { background: var(--coral); }
.card-events h2::before { background: var(--sand); }
.card-fluid h2::before { background: var(--abyss-2); }
.card-journal h2::before { background: var(--muted); }

.card .placeholder { color: var(--muted); font-style: italic; margin: 0.2rem 0; }

/* ---- En-tête de carte avec lien externe ---------------------------------- */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
}
.card-head h2 { margin: 0; }
.card-link {
  flex: 0 0 auto;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.card-link:hover { color: var(--lagoon-deep); background: var(--foam); }

/* ---- Bouton resync (bandeau semaine) -------------------------------------- */
.resync-btn {
  margin-left: auto;
  padding: 0.4rem 0.95rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--lagoon-deep);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.resync-btn:hover { border-color: var(--lagoon); background: var(--lagoon-soft); }
.resync-btn:disabled { opacity: 0.6; cursor: wait; }

/* ---- Badge points cliquable (À faire / En vrac / RDV) --------------------- */
.points-badge {
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--lagoon-deep);
  background: var(--lagoon-soft);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease;
}
.points-badge:hover { background: #BFE4DD; }
.points-badge:active { transform: scale(0.94); }

/* Le héros Quotas respire davantage */
.card-quotas { padding: clamp(1.1rem, 3vw, 1.75rem); }
.card-quotas h2 { font-size: 1.3rem; }

/* ---- Suggestion auto (agenda -> quota) ----------------------------------- */
.suggestions { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.suggestion {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--coral);
  background: var(--coral-soft);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.suggestion-text { color: var(--abyss); }
.suggestion-accept {
  flex-shrink: 0;
  border: none;
  background: var(--coral);
  color: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}
.suggestion-accept:hover { background: var(--coral-deep); }

/* ---- Quotas : le geste (hublot + croix) ---------------------------------- */
.quotas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem 1.4rem;
  margin-bottom: 1.25rem;
}
.quota { min-width: 0; }
.quota-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.quota-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}
.quota-head .quota-label { margin-bottom: 0; }
.quota-remove {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: #C7D6D2;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  transition: color 0.15s ease;
}
.quota-remove:hover { color: var(--coral); }
.quota-points-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.55rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.quota-points {
  width: 3rem;
  padding: 0.25rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: inherit;
  text-align: center;
}
.quota-points:focus { border-color: var(--lagoon); }
/* Dans l'en-tête de carte, le bouton est aligné avec le titre : pas de marge. */
.card-head .quota-add-toggle { margin-bottom: 0; flex: 0 0 auto; }
.quota-add-toggle {
  padding: 0.55rem 1rem;
  margin-bottom: 0.6rem;
  background: var(--lagoon-soft);
  color: var(--lagoon-deep);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.quota-add-toggle:hover { background: #BFE4DD; }
.dots { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dot {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-width: 40px;
  border: 2px solid var(--track);
  border-radius: 50%;
  font-size: 1rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--shell);
  cursor: pointer; user-select: none;
  transition: transform 0.14s cubic-bezier(.34,1.56,.64,1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dot:hover { border-color: var(--lagoon); color: var(--lagoon-deep); transform: translateY(-1px); }
.dot:active { transform: scale(0.9); }
.dot.filled {
  background: var(--lagoon);
  border-color: var(--lagoon);
  color: transparent;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.35);
}
/* la croix « bon, c'est fait » */
.dot.filled::before, .dot.filled::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 58%; height: 2.5px; background: #fff; border-radius: 3px;
}
.dot.filled::before { transform: translate(-50%, -50%) rotate(45deg); }
.dot.filled::after  { transform: translate(-50%, -50%) rotate(-45deg); }
/* Sessions faites EN PLUS que prévu : mêmes pastilles, en or (le dépassement). */
.dot.extra.filled {
  background: var(--gold-deep); border-color: var(--gold-deep);
  box-shadow: 0 4px 12px rgba(233, 168, 12, 0.35);
}
/* Bouton « +1 » : une session de plus que prévu (apparaît quand la cible est atteinte). */
.quota-plus {
  height: 40px; padding: 0 0.85rem; border-radius: 999px;
  border: 2px dashed var(--gold-deep); background: var(--gold-soft);
  color: var(--gold-deep); font-weight: 700; font-size: 0.95rem; font-family: inherit;
  cursor: pointer; display: inline-flex; align-items: center; user-select: none;
  transition: transform 0.14s cubic-bezier(.34,1.56,.64,1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.quota-plus:hover { background: var(--gold); color: #fff; border-color: var(--gold); transform: translateY(-1px); }
.quota-plus:active { transform: scale(0.92); }

/* ---- Jauge : la mer qui monte, minimum vital = bouée --------------------- */
/* Jauge d'énergie : désormais un élément de premier niveau de La Une (sortie
   de la carte Sessions), juste sous le titre de semaine. Le wrapper réserve
   l'espace au-dessus pour l'étiquette « X / N pts » et la bouée du minimum
   vital (positionnées en négatif au-dessus de la barre), et neutralise les
   marges internes de la jauge. */
.laune-gauge {
  padding-top: 1.9rem;
  margin: 0 0 1.2rem;
}
.laune-gauge .gauge { margin: 0; }
.gauge {
  position: relative;
  height: 24px;
  background: var(--track);
  border-radius: 999px;
  margin: 0.5rem 0 2.1rem;
  box-shadow: inset 0 1px 3px rgba(11,43,54,0.10);
}
.gauge .fill {
  height: 100%;
  min-width: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2CD0BD 0%, var(--lagoon) 55%, var(--lagoon-deep) 100%);
  box-shadow: 0 2px 8px rgba(20,184,166,0.35);
  transition: width 0.5s cubic-bezier(.22,1,.36,1), background 0.3s ease;
}
/* petite crête d'écume au bord de l'eau */
.gauge .fill::after {
  content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  filter: blur(1px);
}
.gauge .mv {
  position: absolute; top: -7px;
  width: 3px; height: 38px;
  transform: translateX(-1px);
  background: var(--coral);
  border-radius: 3px;
  z-index: 2;
}
/* la bouée en haut du repère minimum vital */
.gauge .mv::before {
  content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--coral); border: 2px solid var(--shell);
  box-shadow: 0 1px 4px rgba(232,92,66,0.5);
}
.gauge .pct {
  position: absolute; top: -1.9rem; right: 0;
  font-size: 0.85rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--abyss);
}
.gauge.vital .fill { background: linear-gradient(180deg, #2CD0BD 0%, var(--lagoon) 60%, var(--lagoon-deep) 100%); }
/* 100 % : coucher de soleil corail */
.gauge.bonus .fill {
  background: linear-gradient(180deg, #FF9E86 0%, var(--coral) 60%, var(--coral-deep) 100%);
  animation: sunset 2s ease-in-out infinite;
}
@keyframes sunset {
  0%, 100% { box-shadow: 0 2px 8px rgba(255,122,92,0.35); }
  50% { box-shadow: 0 2px 18px rgba(255,122,92,0.7); }
}
/* Barre d'équilibre : le remplissage est SEGMENTÉ par type de points, chaque
   couleur proportionnelle à sa part. Les segments couvrent le dégradé du .fill
   (conservé en repli/quand done=0). overflow:hidden les clippe à la pilule. */
.gauge .fill { position: relative; overflow: hidden; }
.gauge-segs { display: flex; height: 100%; width: 100%; }
.gauge-seg { height: 100%; min-width: 2px; }
.gauge-seg + .gauge-seg { box-shadow: inset 1px 0 0 rgba(255,255,255,0.6); } /* fine séparation */
/* Huit parts distinctes (19/08/2026). Les trois DOMAINES partagent la famille
   lagon (ce sont trois faces d'une même vie), les modules concrets prennent
   des teintes franchement autres, et `divers` reste le gris de ce qu'on ne
   sait pas ranger — il doit se voir maigrir, c'est son intérêt. */
.gauge-seg--perso     { background: var(--lagoon); }
.gauge-seg--asso      { background: #2C7BA6; }
.gauge-seg--pro       { background: #17556E; }
.gauge-seg--projets   { background: var(--gold-deep, #B8860B); }
.gauge-seg--entretien { background: #7FB069; }
.gauge-seg--sport     { background: var(--coral); }
.gauge-seg--courses   { background: var(--gold); }
.gauge-seg--divers    { background: #9AA5AB; }
/* Légende compacte sous la barre : pastille couleur + libellé + pts. */
.gauge-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: 0.55rem; }
.gauge-leg { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.78rem; color: var(--muted); }
.gauge-leg-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.gauge-leg-nom { color: var(--ink); }
.gauge-leg-pts { font-weight: 700; color: var(--abyss); font-variant-numeric: tabular-nums; }

/* ---- « Et maintenant ? » (remonté dans le bandeau semaine) --------------- */
.next-action { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }
#next-action-btn {
  padding: 0.6rem 1.1rem;
  background: var(--lagoon-soft);
  color: var(--lagoon-deep); border: 1px solid var(--lagoon-soft);
  border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
#next-action-btn:hover { background: var(--foam); border-color: var(--lagoon); }
#next-action-btn:active { transform: translateY(1px); }
/* La réponse s'affiche pleine largeur, juste sous le bandeau semaine. */
.next-action-text {
  margin: -0.5rem 0 1.1rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--lagoon-deep);
}
.next-action-text.kind-rest { color: var(--muted); }
.next-action-text.kind-entretien { color: var(--gold-deep); }
.next-action-go-link { color: inherit; text-decoration: underline; }

/* ---- Formulaire d'ajout de quota ----------------------------------------- */
.quota-add, .fluid-add { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.quota-add input[type="text"], .fluid-add input[type="text"] {
  flex: 1 1 150px; min-width: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.95rem; font-family: inherit; background: #FBFDFC; min-height: 40px;
}
.quota-add input[type="number"] {
  width: 4.5rem; padding: 0.6rem 0.4rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.95rem; font-family: inherit; min-height: 40px;
}
.fluid-add select {
  padding: 0.6rem 0.4rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 0.95rem; font-family: inherit; min-height: 40px; background: #FBFDFC;
}
.quota-add input:focus, .fluid-add input:focus, .fluid-add select:focus { border-color: var(--lagoon); }
.quota-add button, .fluid-add button {
  padding: 0.6rem 1rem; min-height: 40px;
  background: var(--lagoon-soft); color: var(--lagoon-deep);
  border: none; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease;
}
.quota-add button:hover, .fluid-add button:hover { background: #BFE4DD; }

/* ---- Chantiers ★ prioritaires (tous projets) en tête de « À faire » ------ */
.starred-chantiers-block { margin-bottom: 0.9rem; }
.starred-chantiers-title {
  display: block; margin-bottom: 0.45rem;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gold-deep);
}
.starred-chantiers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.starred-chantier-link {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  border-radius: var(--radius-sm);
  text-decoration: none; color: inherit;
  transition: background 0.15s ease, transform 0.1s ease;
}
.starred-chantier-link:hover { background: #F6E4B8; transform: translateX(2px); }
.starred-chantier-star { flex: 0 0 auto; color: var(--gold-deep); font-size: 1.05rem; line-height: 1; }
.starred-chantier-label {
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
  font-size: 0.92rem; font-weight: 600; color: var(--abyss);
}
.starred-chantier-project {
  flex: 0 0 auto; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--lagoon-deep); background: var(--lagoon-soft);
  border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap;
}
.starred-chantier-bar {
  flex: 0 0 auto; width: 64px; height: 6px; border-radius: 999px;
  background: rgba(224, 169, 59, 0.25); overflow: hidden;
}
.starred-chantier-bar-fill { height: 100%; background: var(--gold-deep); border-radius: 999px; }
.starred-chantier-pct {
  flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; color: var(--gold-deep);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 480px) {
  .starred-chantier-bar { display: none; }
}

/* ---- À pas oublier : shortlist TickTick ---------------------------------- */
.shortlist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.shortlist-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  transition: background 0.15s ease;
}
.shortlist-item:hover { background: var(--foam); }
.shortlist-item.priority {
  background: var(--coral-soft);
  border-left-color: var(--coral);
}
.shortlist-item label { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.shortlist-check { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; cursor: pointer; accent-color: var(--lagoon); }
.shortlist-title { overflow-wrap: anywhere; font-size: 0.95rem; }
.shortlist-item.done .shortlist-title { text-decoration: line-through; opacity: 0.55; }
.shortlist-meta { display: flex; gap: 0.3rem; flex: 0 0 auto; align-items: center; flex-wrap: wrap; }
.shortlist-tag {
  font-size: 0.7rem; font-weight: 600;
  color: var(--muted); background: var(--track);
  border-radius: 999px; padding: 0.1rem 0.55rem; white-space: nowrap;
}
.shortlist-list-tag { background: var(--lagoon-soft); color: var(--lagoon-deep); }
.shortlist-due { background: var(--sand); color: #7A6A48; font-variant-numeric: tabular-nums; }
.shortlist-overdue { background: var(--coral); color: #fff; }
.shortlist-star {
  flex: 0 0 auto; border: none; background: none;
  color: #C7D6D2; font-size: 1.2rem; line-height: 1;
  cursor: pointer; padding: 0.2rem 0.35rem;
  transition: color 0.15s ease, transform 0.12s ease;
}
.shortlist-star:hover { color: var(--coral); transform: scale(1.15); }
.shortlist-star.active { color: var(--coral); }
/* Mobile : le titre de tâche doit rester LISIBLE (bug 1 lettre/ligne). Les
   tags (date/retard) + l'étoile écrasaient le titre jusqu'à ~1 caractère de
   large. On passe l'item en 2 lignes : le libellé (checkbox+titre) prend
   toute la largeur, meta + étoile descendent sous le titre. Desktop inchangé. */
@media (max-width: 560px) {
  .shortlist-item { flex-wrap: wrap; }
  .shortlist-item label { flex: 1 1 100%; }
  .shortlist-meta { flex: 1 1 auto; margin-left: 1.8rem; }
  .shortlist-star { flex: 0 0 auto; margin-left: auto; }
}

/* ---- RDV : colonne agenda ------------------------------------------------ */
.events-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.event {
  display: flex; flex-direction: column; gap: 0.05rem;
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
  transition: background 0.15s ease;
}
.event:hover { background: var(--foam); }
.event + .event { border-top: 1px solid var(--line); }
.event-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.event-when {
  font-size: 0.72rem; font-weight: 700; color: var(--lagoon-deep);
  text-transform: uppercase; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.event-title { font-size: 0.95rem; }
.event.struck { opacity: 0.5; }
.event.struck .event-title { text-decoration: line-through; }

/* ---- Journal : ce qui a été fait les jours passés (lecture seule) -------- */
.journal-days { display: flex; flex-direction: column; gap: 0.9rem; }
.journal-day + .journal-day { padding-top: 0.8rem; border-top: 1px solid var(--line); }
.journal-day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.journal-day-label {
  font-size: 0.82rem; font-weight: 700; color: var(--abyss);
  font-variant-numeric: tabular-nums;
}
.journal-day-points {
  font-size: 0.82rem; font-weight: 700; color: var(--lagoon-deep);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.journal-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.journal-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.2rem 0; font-size: 0.85rem; color: var(--ink);
}
.journal-item-label { overflow-wrap: anywhere; }
/* Les THÈMES du journal (18/08/2026) : une petite ligne de tête par famille,
   discrète — c'est un rangement, pas une hiérarchie. Le total du thème est là
   parce que « voir que j'ai fait des trucs » passe autant par le compte que
   par la liste. */
.journal-theme-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  margin: 0.45rem 0 0.1rem;
  font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--muted);
}
.journal-theme-titre { font-weight: 600; }
.journal-theme-points { font-variant-numeric: tabular-nums; }
.journal-theme-head:first-child { margin-top: 0.2rem; }

/* « préparé ✓ » : le rendez-vous n'est PAS fait, il est prêt. Ton calme,
   jamais celui d'une validation — c'est un soulagement, pas un score. */
.event-prepare {
  display: inline-block; margin-top: 0.15rem;
  padding: 1px 8px; border-radius: 999px;
  background: var(--lagoon-soft); color: var(--lagoon-deep);
  font-size: 0.75rem; font-weight: 600;
}
.journal-item-points {
  flex: 0 0 auto;
  font-size: 0.7rem; font-weight: 600; color: var(--muted);
  background: var(--foam); border-radius: 999px; padding: 0.1rem 0.5rem;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.journal-day-empty { margin: 0; font-size: 0.82rem; }
/* Jour EN COURS, toujours en tête : discret mais identifiable (label lagon). */
.journal-day--today .journal-day-label { color: var(--lagoon-deep); }

/* ---- En vrac : zone fluide ----------------------------------------------- */
.fluid-groups { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.fluid-zone-title {
  margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.fluid-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.fluid-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); }
.fluid-item:hover { background: var(--foam); }
.fluid-item label { display: flex; align-items: center; gap: 0.55rem; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.fluid-check { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; cursor: pointer; accent-color: var(--lagoon); }
.fluid-text { overflow-wrap: anywhere; font-size: 0.95rem; }
.fluid-text.done, .shortlist-title.done, .done { text-decoration: line-through; opacity: 0.55; }
/* Saisie encore dans la file locale : elle EXISTE (rien n'est perdu) mais n'est
   pas encore partie chez TickTick. Sans ce marquage, la tâche semble disparaître
   entre la saisie et le passage du cron (5 min). Pas de case à cocher : on ne
   peut pas cocher une tâche qui n'a pas encore d'identifiant TickTick. Le ×,
   lui, existe : tant que la saisie n'a pas décollé, on peut encore la défaire. */
.fluid-list--en-file { margin-bottom: 0.6rem; }
.tache-en-file { opacity: 0.75; font-style: italic; }
.tache-en-file-pastille {
  flex: 0 0 auto; margin-left: auto; padding: 0.1rem 0.45rem;
  border-radius: 999px; background: var(--sand); color: #7A6A48;
  font-size: 0.72rem; font-style: normal; white-space: nowrap;
}
.tache-en-file-annuler {
  flex: 0 0 auto; border: none; background: none; color: #C7D6D2;
  font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem;
  transition: color 0.15s ease;
}
.tache-en-file-annuler:hover { color: var(--coral); }
/* Panne de configuration : distinguée du simple « rien à faire », sinon elle
   passe pour un état normal. */
.fluid-placeholder--panne { color: var(--coral-deep, #c0392b); font-style: normal; }
.fluid-placeholder--panne code { font-size: 0.85em; }

/* ---- Rituel du dimanche : prépa + historique ----------------------------- */
.sub-links { display: flex; gap: 1rem; margin-bottom: 1rem; font-size: 0.9rem; }
.sub-links a { color: var(--lagoon-deep); text-decoration: none; font-weight: 500; }
.sub-links a:hover { text-decoration: underline; }

.card + .card { margin-top: 1rem; }
.prep-period { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.5rem; }
.prep-mv-note { font-size: 0.95rem; color: var(--ink); margin: 0.5rem 0 0; }
.prep-field { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0; }
.prep-field label { font-size: 0.9rem; color: var(--muted); }
.prep-field input {
  width: 5rem; padding: 0.5rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 0.95rem; font-family: inherit;
}
.card-prep-next h3 {
  margin: 0.9rem 0 0.5rem; font-size: 0.78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.prep-quotas { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.prep-quota-row, .prep-quota-add { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.prep-quota-label {
  flex: 1 1 auto; min-width: 0; padding: 0.55rem 0.65rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit;
}
.prep-quota-target {
  width: 4rem; padding: 0.55rem 0.4rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit;
}
.prep-quota-x { color: var(--muted); font-size: 0.85rem; }
.prep-quota-points {
  width: 3.5rem; padding: 0.55rem 0.4rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit;
}
.prep-quota-pts-label { font-size: 0.8rem; color: var(--muted); }
.prep-quota-remove, .prep-actions button {
  border: none; background: none; color: var(--muted); cursor: pointer;
}
.prep-quota-remove { font-size: 1.1rem; padding: 0.2rem 0.4rem; }
.prep-quota-remove:hover { color: var(--coral); }
.prep-quota-add { margin-bottom: 1rem; }
.prep-quota-add input[type="text"] {
  flex: 1 1 auto; min-width: 0; padding: 0.55rem 0.65rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit;
}
.prep-quota-add input[type="number"] {
  width: 4rem; padding: 0.55rem 0.4rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit;
}
.prep-quota-add button {
  padding: 0.55rem 0.8rem; background: var(--lagoon-soft); color: var(--lagoon-deep);
  border: none; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; font-weight: 600; font-family: inherit;
}
.prep-energy-fields { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0.9rem 0 0.3rem; }
.prep-energy-fields .prep-field { margin: 0; }
.prep-energy-hint { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.9rem; }
.prep-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.prep-actions button {
  padding: 0.5rem 0.9rem; border: 1px solid var(--line); background: var(--shell);
  border-radius: var(--radius-sm); font-size: 0.85rem; font-family: inherit; color: var(--ink);
}
.prep-actions button:hover { border-color: var(--lagoon); color: var(--lagoon-deep); }
.prep-pin-link { font-size: 0.85rem; color: var(--muted); text-decoration: none; margin-left: auto; }
.prep-pin-link:hover { color: var(--lagoon-deep); }
.prep-commit-btn {
  width: 100%; padding: 0.9rem; background: var(--lagoon); color: #fff;
  border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background 0.15s ease;
}
.prep-commit-btn:hover { background: var(--lagoon-deep); }
.prep-commit-btn:disabled { opacity: 0.7; cursor: wait; }

/* Historique — pas de streak, ton neutre */
.history-weeks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.history-week-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; font-size: 0.92rem; }
.history-week-period { color: var(--ink); font-weight: 600; }
.history-week-pct { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.badge-minimum {
  font-size: 0.7rem; color: var(--lagoon-deep); background: var(--lagoon-soft);
  border-radius: 999px; padding: 0.1rem 0.55rem; white-space: nowrap; font-weight: 600;
}
.bar { position: relative; height: 12px; background: var(--track); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(11,43,54,0.08); }
.bar-fill { height: 100%; background: linear-gradient(180deg, #2CD0BD, var(--lagoon-deep)); border-radius: 999px; }
.bar-mv { position: absolute; top: -3px; width: 3px; height: 18px; background: var(--coral); border-radius: 2px; }
.history-note { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.75rem; }
.history-regularity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.history-regularity-row { display: grid; grid-template-columns: 6rem 1fr 3rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.history-regularity-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; color: var(--muted); }
.history-regularity-pct { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Historique : points par semaine -------------------------------------- */
.history-points-weeks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.history-points-week + .history-points-week { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.history-points-total { color: var(--lagoon-deep); font-weight: 700; margin-left: auto; font-variant-numeric: tabular-nums; }
.history-points-days { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.history-points-day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.history-points-bar-wrap {
  height: 48px; width: 100%; max-width: 22px;
  display: flex; align-items: flex-end;
  background: var(--track); border-radius: 6px; overflow: hidden;
}
.history-points-bar {
  width: 100%; min-height: 4px;
  background: linear-gradient(180deg, #2CD0BD, var(--lagoon-deep));
  border-radius: 6px 6px 0 0;
}
.history-points-day-label {
  font-size: 0.66rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.history-points-day-value { font-size: 0.72rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Bandeau semaine (contexte) ------------------------------------------ */
.week-banner {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 0 1.1rem;
}
.week-banner .eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lagoon-deep);
}
.week-banner .period {
  font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: var(--abyss);
}

/* ---- Strip « Mails à traiter » (épinglés-non-lus ASSO/PERSO/PRO) ---------- */
.mail-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.mail-strip-label {
  font-family: var(--display);
  font-size: 1.05rem; font-weight: 600;
  color: var(--abyss); white-space: nowrap;
}
.mail-counts { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.mail-count {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 84px;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--coral-soft); color: var(--coral-deep);
  line-height: 1.1;
}
.mail-count-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; margin-bottom: 0.1rem; }
.mail-count-value { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mail-count.zero { background: var(--lagoon-soft); color: var(--lagoon-deep); }
.mail-count.zero .mail-count-value { font-size: 1.15rem; }
.mail-strip .card-link { margin-left: auto; font-size: 1.1rem; }
@media (max-width: 560px) {
  .mail-count { min-width: 70px; padding: 0.4rem 0.6rem; }
  .mail-count-value { font-size: 1.4rem; }
}

/* ---- Carte nudge Courses (Task 7.3) : « va en courses »/« refais l'inventaire » ---- */
.courses-nudge-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  background: var(--coral-soft);
  border: 1px solid var(--coral);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: opacity 0.2s ease;
}
.courses-nudge-strip.courses-nudge-strip--inventaire { background: var(--shell); border-color: var(--line); }
.courses-nudge-strip.courses-nudge-hidden { display: none; }
.courses-nudge-body { display: flex; flex-direction: column; gap: 0.2rem; }
.courses-nudge-warning {
  margin: 0 0 0.2rem; font-weight: 700; color: var(--coral-deep);
  font-size: 0.85rem;
}
.courses-nudge-link { text-decoration: none; display: flex; flex-direction: column; gap: 0.15rem; }
.courses-nudge-title {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--abyss);
}
.courses-nudge-detail { font-size: 0.82rem; color: var(--muted); }
.courses-nudge-done-btn {
  flex: 0 0 auto; font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  padding: 0.5rem 0.9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--coral); background: #fff; color: var(--coral-deep);
}
.courses-nudge-done-btn:hover { background: var(--coral); color: #fff; }
.courses-nudge-done-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- Carte mystère 🎁 Entretien (Task 3.1) : jamais le nom de la tâche ---- */
.entretien-nudge-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: opacity 0.2s ease;
}
.entretien-nudge-strip.entretien-nudge-hidden { display: none; }
.entretien-nudge-body { display: flex; flex-direction: column; gap: 0.2rem; }
.entretien-nudge-link { text-decoration: none; display: flex; flex-direction: column; gap: 0.15rem; }
.entretien-nudge-title {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--abyss);
}
.entretien-nudge-detail { font-size: 0.82rem; color: var(--muted); }
.entretien-nudge-actions { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
.entretien-nudge-go-btn {
  font-family: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--gold-deep); background: var(--gold); color: var(--abyss);
}
.entretien-nudge-go-btn:hover { background: var(--gold-deep); color: #fff; }
.entretien-nudge-dismiss-btn {
  font-family: inherit; font-size: 0.78rem; color: var(--muted); cursor: pointer;
  padding: 0.3rem 0.4rem; border: none; background: none; text-decoration: underline;
}
.entretien-nudge-dismiss-btn:hover { color: var(--abyss); }

/* ---- Cartes 🤿 Plongée (Task 3.2) : détection / veille des sacs / matin ---- */
.plongee-nudge-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  background: var(--lagoon-soft);
  border: 1px solid var(--lagoon);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: opacity 0.2s ease;
}
.plongee-nudge-strip.plongee-nudge-hidden { display: none; }
.plongee-nudge-link { text-decoration: none; display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; }
.plongee-nudge-title {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--abyss);
}
.plongee-nudge-actions { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; flex-wrap: wrap; }
.plongee-nudge-dismiss-btn {
  font-family: inherit; font-size: 0.78rem; color: var(--muted); cursor: pointer;
  padding: 0.3rem 0.4rem; border: none; background: none; text-decoration: underline; flex: 0 0 auto;
}
.plongee-nudge-dismiss-btn:hover { color: var(--abyss); }
/* « C'est géré, tout est prêt » : marqueur PERSISTANT (distinct du « pas
   maintenant » journalier) — bouton d'action assumé, ton rassurant. */
.plongee-nudge-gere-btn {
  font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  padding: 0.42rem 0.85rem; border-radius: var(--radius-sm);
  border: 1px solid var(--lagoon); background: #fff; color: var(--abyss); flex: 0 0 auto;
}
.plongee-nudge-gere-btn:hover { background: var(--lagoon); color: #fff; }
.plongee-nudge-gere-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- Module Soin (Task 1.2) : carte « point du jour » escaladante -------
   3 paliers de présence (jamais de reproche, jamais de rouge) :
   p0 discret le matin, p1 bordure colorée l'après-midi, p2 en tête de
   La Une le soir + pulse DOUCE (opacity/shadow 3s, pas de clignotement). */
.soin-point-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: opacity 0.2s ease;
}
.soin-point-strip.soin-point-hidden { display: none; }
.soin-point-card-link { text-decoration: none; display: flex; flex-direction: column; gap: 0.15rem; }
.soin-point-card-title {
  font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--abyss);
}
.soin-point-strip--p0 { padding: 0.55rem 1.1rem; box-shadow: none; }
.soin-point-strip--p0 .soin-point-card-title { font-size: 0.88rem; font-weight: 500; color: var(--muted); }
.soin-point-strip--p1 { background: var(--lagoon-soft); border-color: var(--lagoon); }
.soin-point-strip--p2 {
  background: var(--gold-soft); border-color: var(--gold);
  animation: soin-pulse 3s ease-in-out infinite;
}
@keyframes soin-pulse {
  0%, 100% { box-shadow: var(--shadow); opacity: 1; }
  50% { box-shadow: 0 0 0 7px rgba(247, 197, 49, 0.22); opacity: 0.96; }
}
@media (prefers-reduced-motion: reduce) {
  .soin-point-strip--p2 { animation: none; }
}
.soin-point-dismiss-btn {
  font-family: inherit; font-size: 0.78rem; color: var(--muted); cursor: pointer;
  padding: 0.3rem 0.4rem; border: none; background: none; text-decoration: underline;
}
.soin-point-dismiss-btn:hover { color: var(--abyss); }

/* ---- Module Soin (Task 4.1) : carte lampe du radar sur La Une -----------
   La lampe alerte AVEC chaleur : couleurs douces de la palette (gold pour
   🟠, corail pour 🔴), AUCUNE animation clignotante — le rouge se démarque
   par sa place (en tête) et sa bordure, pas par une alarme. */
.soin-lampe-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: opacity 0.2s ease;
}
.soin-lampe-strip.soin-lampe-hidden { display: none; }
.soin-lampe-link { text-decoration: none; display: flex; flex-direction: column; gap: 0.15rem; }
.soin-lampe-title {
  font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--abyss);
}
.soin-lampe-strip--orange {
  background: var(--gold-soft); border: 1px solid var(--gold);
  padding: 0.7rem 1.1rem;
}
.soin-lampe-strip--orange .soin-lampe-title { font-size: 0.95rem; }
.soin-lampe-strip--rouge {
  background: var(--coral-soft); border: 1px solid var(--coral);
  border-left: 5px solid var(--coral-deep);
}
.soin-lampe-strip--rouge .soin-lampe-title { font-size: 1.08rem; }
.soin-lampe-dismiss-btn {
  font-family: inherit; font-size: 0.78rem; color: var(--muted); cursor: pointer;
  padding: 0.3rem 0.4rem; border: none; background: none; text-decoration: underline;
}
.soin-lampe-dismiss-btn:hover { color: var(--abyss); }

/* ---- Pente Soin (refonte Santé, T1) : « tu remontes 📈 / ça glisse 📉 » ----
   Bandeau doux, jamais alarmant. Le 📈 (récompense) en lagon, le 📉 (alerte
   PRÉCOCE, avant le rouge) en OR — surtout pas corail : ça glisse, on agit
   petit, on n'agite pas de rouge. Sans clignotement, comme le reste du module. */
.soin-pente,
.soin-pente-pastille {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem;
  margin: 0 0 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.soin-pente-fleche { font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }
.soin-pente-message {
  font-family: var(--body); font-size: 0.92rem; line-height: 1.3; color: var(--abyss);
}
.soin-pente--monte,
.soin-pente-pastille--monte {
  background: var(--lagoon-soft); border-color: var(--lagoon);
}
.soin-pente--descend,
.soin-pente-pastille--descend {
  background: var(--gold-soft); border-color: var(--gold-deep);
}
/* Sur La Une : plus compacte, cliquable (survol discret). */
.soin-pente-pastille { margin: 0 0 0.9rem; }
.soin-pente-pastille:hover { box-shadow: var(--shadow-lift); }
.soin-pente-pastille .soin-pente-message { font-size: 0.88rem; }

/* ---- LA CARTE UNIQUE « où tu en es » (/soin, 2026-07-15) ----
   Un seul verdict : le titre EST celui de la lampe (pastille comprise), puis
   « Maintenant », « Le fond » (s'il existe) ou le mot de la lampe (sinon), la
   trajectoire du jour, les preuves dépliables, les actions (secondaires) et le
   bouton unique « Faire le point ». La couleur vient de la LAMPE (lagon = vert,
   or = orange, corail = rouge) — jamais d'alarme clignotante, le corail reste
   protecteur. (Les anciennes cartes « lampe » et « bloc point » ont disparu :
   elles redisaient la même chose.) */
.soin-synthese {
  margin-bottom: 1.1rem;
  border-left: 5px solid var(--track);
}
.soin-synthese--lampe-vert { border-left-color: var(--lagoon); background: var(--lagoon-soft); }
.soin-synthese--lampe-orange { border-left-color: var(--gold-deep); background: var(--gold-soft); }
.soin-synthese--lampe-rouge { border-left-color: var(--coral-deep); background: var(--coral-soft); }
.soin-synthese-head { display: flex; align-items: center; gap: 0.9rem; }
.soin-synthese-titre {
  margin: 0; font-family: var(--display); font-size: 1.2rem; line-height: 1.3; color: var(--abyss);
}
.soin-synthese--lampe-orange .soin-lampe-pastille {
  background: var(--gold-deep);
  box-shadow: 0 0 0 6px rgba(233, 168, 12, 0.20), 0 0 22px rgba(233, 168, 12, 0.45);
}
.soin-synthese--lampe-rouge .soin-lampe-pastille {
  background: var(--coral-deep);
  box-shadow: 0 0 0 6px rgba(232, 92, 66, 0.20), 0 0 22px rgba(232, 92, 66, 0.45);
}
/* La consigne de la lampe : ligne de clôture, seulement quand il n'y a pas de
   fond (sinon elle ferait doublon avec lui). */
.soin-synthese-consigne {
  margin: 0.5rem 0 0;
  font-family: var(--body); font-size: 0.92rem; line-height: 1.5; color: var(--muted);
}
.soin-synthese--lampe-orange .soin-synthese-consigne,
.soin-synthese--lampe-rouge .soin-synthese-consigne { color: var(--abyss-2); }
/* Trajectoire du jour : la remontée est VALORISÉE (vert lagon), la dérive est
   dite doucement (gris chaud) — jamais un reproche. */
.soin-synthese-remontee {
  margin: 0.5rem 0 0;
  font-family: var(--body); font-size: 0.92rem; line-height: 1.4; font-weight: 600;
  color: var(--lagoon-deep);
}
.soin-synthese-derive {
  margin: 0.5rem 0 0;
  font-family: var(--body); font-size: 0.92rem; line-height: 1.4; color: var(--muted);
}
/* Les actions : SECONDAIRES (une liste compacte, pas trois gros pavés qui
   concurrencent le bouton « Faire le point »). */
.soin-synthese-actions {
  list-style: none; margin: 0.8rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.soin-synthese-action { margin: 0; }
.soin-synthese-action-link,
.soin-synthese-action > .soin-synthese-action-texte {
  display: block;
}
.soin-synthese-action-link,
.soin-synthese-action:not(:has(.soin-synthese-action-link)) {
  padding: 0.3rem 0 0.3rem 0.6rem;
  border-left: 2px solid var(--line);
  text-decoration: none;
}
.soin-synthese-action-link:hover { border-left-color: var(--lagoon); }
.soin-synthese-action-texte {
  display: block;
  font-family: var(--body); font-weight: 600; font-size: 0.9rem; color: var(--abyss, var(--ink));
}
.soin-synthese-action-pourquoi {
  display: block; margin-top: 0.1rem;
  font-family: var(--body); font-size: 0.82rem; line-height: 1.35; color: var(--muted);
}

/* ---- Module Soin (Task 6.1) : indicateurs de vie EN TÊTE, proéminents ----
   Le garde-fou anti-hyperfocus doit sauter aux yeux : 5 grandes tuiles
   cliquables en tête de La Une (emoji + nom + libellé chaud + accent couleur
   du niveau). Couleurs DOUCES de la palette (lagon / or / corail) : la bande
   rappelle que chaque pan de vie existe, elle ne note personne.
   ⚠️ FLEX, PAS UNE GRILLE À NOMBRE FIXE (fix 2026-08-30). Les colonnes étaient
   figées à 6 pour les 6 pastilles d'alors ; il n'y en a plus que 5, et la
   sixième colonne laissait un TROU béant en bout de ligne. En flex, la dernière
   pastille s'étire pour finir la ligne : la bande reste PLEINE même quand le
   compte ne tombe pas juste — c'est ça qu'on achète, pas une grille qui
   s'adapte toute seule. ⚠️ La base de 20 % est calibrée POUR CINQ pastilles
   (5 × 20 % = une ligne) : une SIXIÈME passerait à la ligne et s'étirerait sur
   toute la largeur. C'est laid mais jamais cassé — au contraire du trou que
   laissait la grille figée. Sous 640 px, base 33,333 % : 3 + 2 étirées.
   `min-width: 0` empêche tout débordement horizontal. */
.vie-indicateurs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}
.vie-ind {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 1rem 0.6rem 0.9rem;
  flex: 1 1 calc(20% - 0.7rem);
  min-width: 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-top: 4px solid var(--track);
  background: var(--shell);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.vie-ind:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.vie-ind-emoji { font-size: 1.75rem; line-height: 1; }
.vie-ind-nomrow { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; }
.vie-ind-dot {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
  background: var(--track);
}
.vie-ind-nom {
  font-family: var(--display); font-weight: 700; font-size: 0.98rem;
  color: var(--abyss); line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vie-ind-libelle {
  color: var(--muted); font-size: 0.78rem; line-height: 1.25;
  overflow-wrap: anywhere;
}
/* La raison courte (Task 5, pastilles Forme/Dehors) : sous le libellé, plus
   discrète — un détail auditable, pas un second message. */
.vie-ind small {
  display: block; color: var(--muted); font-size: 0.68rem; line-height: 1.2;
  opacity: 0.85; overflow-wrap: anywhere;
}
/* État FRANC : chaque niveau a un FOND coloré net (pas juste un liseré) —
   « ça va / pas ça va » se lit d'un coup d'œil, sans lire le libellé. Le texte
   (nom en abyss, libellé en muted) reste lisible sur ces fonds clairs. Ton
   chaud, jamais criard. */
.vie-ind--n3 { background: #DCF2E4; border-color: #A6DCBB; border-top-color: #2FA870; } /* ✨ tout roule */
.vie-ind--n3 .vie-ind-dot { background: #2FA870; }
.vie-ind--n2 { background: var(--lagoon-soft); border-color: #A8D6CE; border-top-color: var(--lagoon); } /* 🙂 ça va */
.vie-ind--n2 .vie-ind-dot { background: var(--lagoon); }
.vie-ind--n1 { background: var(--gold-soft); border-color: #EEDB93; border-top-color: var(--gold-deep); } /* 🌱 à surveiller */
.vie-ind--n1 .vie-ind-dot { background: var(--gold-deep); }
.vie-ind--n0 { background: #FFD8CD; border-color: #F7B09B; border-top-color: var(--coral-deep); } /* 🫂 besoin de toi */
.vie-ind--n0 .vie-ind-dot { background: var(--coral-deep); }
/* Neutre (revue finale Soin M3) : trou de données = gris franc, ni vert ni doré. */
.vie-ind--neutre { background: #EBEFF0; border-color: #D0DADC; border-top-color: #AEB9BC; }
.vie-ind--neutre .vie-ind-dot { background: #AEB9BC; }
@media (max-width: 640px) {
  .vie-indicateurs { gap: 0.5rem; }
  .vie-ind { padding: 0.75rem 0.4rem 0.7rem; gap: 0.3rem; flex-basis: calc(33.333% - 0.5rem); }
  .vie-ind-emoji { font-size: 1.5rem; }
  .vie-ind-nom { font-size: 0.9rem; }
  .vie-ind-libelle { font-size: 0.72rem; }
}

/* ---- Module Soin : « faire le point » (le parcours, refonte T2) ----------
   Une question à la fois, gros boutons (utilisable debout, au téléphone).
   Chaque réponse part au clic : aucun « Enregistrer », rien à perdre. */
.soin-flow-intro { text-align: center; }
.soin-flow-titre { margin: 0 0 0.4rem; font-size: 1.25rem; color: var(--abyss); }
.soin-flow-sous { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.soin-flow-deja { margin: 0 0 0.8rem; color: var(--lagoon-deep); font-size: 0.85rem; font-weight: 600; }
.soin-flow-start {
  padding: 0.75rem 1.6rem; border: none; border-radius: 999px;
  background: var(--lagoon); color: #fff; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.soin-flow-start:hover { background: var(--lagoon-deep); }

.soin-flow-bar { height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; margin-bottom: 1.1rem; }
.soin-flow-bar-fill { display: block; height: 100%; width: 0; background: var(--lagoon); transition: width 0.25s ease; }

.soin-flow-q { opacity: 0; transform: translateY(6px); }
.soin-flow-q.soin-flow-q-in { opacity: 1; transform: none; transition: opacity 0.22s ease, transform 0.22s ease; }
.soin-flow-question { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 600; color: var(--abyss); line-height: 1.45; }
.soin-flow-choix { display: flex; flex-direction: column; gap: 0.5rem; }
.soin-flow-choix-btn {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left;
  min-height: 3.1rem; padding: 0.6rem 0.9rem;
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm);
  font: inherit; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease;
}
.soin-flow-choix-btn:hover { background: var(--lagoon-soft); border-color: var(--lagoon); }
.soin-flow-choix-btn.soin-score-active { background: var(--lagoon); border-color: var(--lagoon); color: #fff; }
.soin-flow-choix-num {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--foam); color: var(--lagoon-deep); font-weight: 800; font-size: 0.95rem;
}
.soin-flow-choix-btn.soin-score-active .soin-flow-choix-num { background: rgba(255,255,255,0.22); color: #fff; }
.soin-flow-choix-lab { font-size: 0.95rem; font-weight: 600; }
.soin-flow-libre {
  width: 100%; margin-top: 0.7rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 0.9rem; background: #FBFDFC;
}
.soin-flow-libre-btn { margin-top: 0.5rem; justify-content: center; min-height: 2.6rem; }
.soin-flow-traj { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.soin-flow-feedback { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--gold-deep); }

/* La conclusion : ce qu'on vient d'apprendre, dit avec chaleur. */
.soin-flow-conclusion { margin: 0 0 0.6rem; font-size: 1.02rem; line-height: 1.5; color: var(--abyss); }
.soin-flow-extras { border-top: 1px solid var(--line); padding-top: 0.6rem; }

/* Les à-côtés du point (médicaments, note) : à la fin, jamais une question de plus. */
.soin-ligne-feedback { font-size: 0.78rem; font-weight: 700; color: var(--lagoon-deep); }
.soin-ligne-feedback.soin-ligne-feedback-erreur { color: var(--gold); }
.soin-point-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.6rem 0; border-bottom: 1px solid var(--line);
}
.soin-point-ligne-note { display: block; border-bottom: 0; }
.soin-point-libelle { font-weight: 600; color: var(--abyss); font-size: 0.95rem; }
.soin-point-scores { display: flex; gap: 0.45rem; }
.soin-score-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem;
  min-width: 3.4rem; min-height: 3.1rem;
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm);
  font-family: inherit; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.soin-score-btn:hover { background: var(--lagoon-soft); }
.soin-score-btn.soin-score-active { background: var(--lagoon); border-color: var(--lagoon); color: #fff; }
/* (le point guidé, /soin/guide, réutilise ces boutons 0-3 : num + légende) */
.soin-score-num { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.soin-score-cap { font-size: 0.6rem; color: var(--muted); line-height: 1.1; }
.soin-score-btn.soin-score-active .soin-score-cap { color: #EAF3F1; }
.soin-med-btn { font-size: 0.88rem; font-weight: 700; padding: 0 0.8rem; }
.soin-point-medicaments { margin-top: 0.2rem; }
.soin-point-note {
  width: 100%; margin-top: 0.9rem; padding: 0.6rem 0.7rem; min-height: 3.4rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.9rem; font-family: inherit; color: var(--ink); background: #FBFDFC; resize: vertical;
}
.soin-point-note:focus { border-color: var(--lagoon); }
.soin-point-note::placeholder { color: var(--muted); font-style: italic; }
@media (max-width: 560px) {
  .soin-point-ligne { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .soin-point-scores { width: 100%; }
  .soin-score-btn { flex: 1 1 0; }
}

/* ---- Soin : board radar (lampe + voyants + signaux ▲) --------------------
   Le ROUGE est ici LÉGITIME — la seule place de l'app : une alerte
   protectrice, pas un reproche. Chaleureux (corail), et JAMAIS de
   clignotement. ------------------------------------------------------------ */
/* La pastille de la lampe vit désormais DANS la carte unique (en tête, avec le
   titre) : la carte « lampe » séparée a disparu (elle redisait le verdict). */
.soin-lampe-pastille {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--lagoon); transition: background 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.18), 0 0 18px rgba(20, 184, 166, 0.45);
}

.soin-board-h2 { margin: 0 0 0.3rem; font-family: var(--display); font-size: 1.15rem; color: var(--abyss); }
.soin-board-intro { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.9rem; }
.soin-board-feedback { margin: 0; font-weight: 700; color: var(--coral-deep); }

.soin-fam { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.soin-fam + .soin-fam { margin-top: 0.8rem; }
.soin-fam-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  padding: 0.6rem 0.9rem; background: var(--foam); border-bottom: 1px solid var(--line);
  transition: background 0.3s;
}
.soin-fam-titre { display: block; font-weight: 700; color: var(--abyss); font-size: 0.98rem; }
.soin-fam-sens { display: block; font-size: 0.8rem; color: var(--muted); }
.soin-fam-cnt { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.soin-fam-lit .soin-fam-head { background: var(--coral-soft); }
.soin-fam-lit .soin-fam-cnt { color: var(--coral-deep); font-weight: 700; }

.soin-fam-body { display: flex; flex-direction: column; }
/* LES VOYANTS, EN LECTURE (refonte T2) : un résultat, pas une saisie. Chacun
   dit d'où il vient (la donnée, ou le jour où elle me l'a dit). Les CALMES sont
   repliés en une ligne, et les INCONNUS ne sont jamais rendus comme des
   signaux — gris, à part : « pas d'info récente ». */
.soin-voyant {
  display: flex; align-items: flex-start; gap: 0.7rem; width: 100%; text-align: left;
  padding: 0.65rem 0.9rem; font: inherit; color: inherit;
}
/* Le filet de séparation ne vaut que pour la LISTE (« Mes repères ») : tuiles et
   puces portent déjà leur propre bordure, un filet en plus les barrerait. */
.soin-voyant + .soin-voyant:not(.soin-voyant-tuile):not(.soin-voyant-puce) {
  border-top: 1px solid var(--track);
}
/* (`.soin-voyant-pastille` est partie avec la liste verticale : dans une tuile,
   c'est le fond corail qui dit « allumé », un point de plus était du bruit.) */
.soin-voyant-lab { font-size: 0.92rem; font-weight: 600; color: var(--abyss); }
.soin-voyant-on .soin-voyant-lab { color: var(--coral-deep); }
.soin-voyant-hint { display: block; font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.soin-voyant-raison { display: block; margin-top: 0.2rem; font-weight: 600; font-size: 0.78rem; color: var(--gold-deep); }
.soin-deep-badge {
  display: inline-block; vertical-align: middle; margin-left: 0.3rem; padding: 0 0.35rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--coral-deep); border: 1px solid var(--coral); border-radius: 4px; white-space: nowrap;
}
/* LES VOYANTS À DEUX DENSITÉS (30/08/2026) : les ALLUMÉS en tuiles (avec leur
   raison — c'est eux qu'on vient lire), les CALMES et les INCONNUS en PUCES sur
   une ligne qui passe à la ligne. La colonne d'avant repliait ces deux-là en
   phrases fourre-tout où plus aucun voyant n'était repérable ; tout passer en
   tuiles (premier jet) faisait sept cases là où il y avait une ligne, soit
   l'inverse du « ça prendrait moins de place » demandé. Les états gardent leur
   hiérarchie : allumé = corail plein, calme = atténué, inconnu = pointillé gris.
   (Les anciennes règles `.soin-voyants-calmes` / `.soin-voyants-inconnus` sont
   parties avec les paragraphes qu'elles habillaient.) */
.soin-voyants-tuiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; padding: 8px;
}
.soin-voyant-tuile {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--shell); min-height: 64px;
}
.soin-voyant-on.soin-voyant-tuile { background: var(--coral-soft); border-color: var(--coral); }
.soin-voyants-legende {
  margin: 0; padding: 0 8px 4px; font-size: 0.72rem; color: var(--muted);
}
.soin-voyants-puces { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px; }
/* ⚠️ SÉLECTEUR DOUBLE, VOLONTAIRE. `.soin-voyant` pose `display:flex` et
   `width:100%` ; reprendre ces deux-là depuis une classe SIMPLE ne tiendrait
   que par l'ordre des règles — une réorganisation du fichier ferait repasser
   chaque puce sur sa propre ligne, sans que rien ne le signale. On gagne par
   la SPÉCIFICITÉ (0,2,0 contre 0,1,0), qui elle ne dépend de rien. */
.soin-voyant.soin-voyant-puce {
  display: inline-block; width: auto;
  font-size: 0.78rem; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--shell);
  color: var(--muted); white-space: nowrap;
}
.soin-voyant-inconnu.soin-voyant-puce { border-style: dashed; }
.soin-voyant-calme { opacity: 0.75; }
.soin-voyant-inconnu { border-style: dashed; color: var(--muted); }

/* Les signaux ▲ et les briques (« Mes repères ») restent CLIQUABLES : ce sont
   des gestes positifs, pas de la détection. */
.soin-remontee-signal, .soin-brique { background: none; border: none; cursor: pointer; }
.soin-remontee-signal:hover, .soin-brique:hover { background: var(--foam); }
.soin-remontee-signal:disabled, .soin-brique:disabled { opacity: 0.6; cursor: wait; }
.soin-board-h3 { margin: 1.2rem 0 0.4rem; font-size: 0.95rem; color: var(--abyss); }

/* (Le bloc « Toujours vrai ? » a disparu avec les bascules manuelles, T1
   2026-07-14 : une observation datée périme par construction — il n'y a plus
   rien à reconfirmer.) */

/* Les deux couches du verdict (« Maintenant » / « Le fond »), affichées
   séparément quand elles divergent — c'est LA lecture utile. */
.soin-synthese-couche { margin: 0.35rem 0 0; font-size: 0.92rem; line-height: 1.45; }
.soin-synthese-fond { color: var(--abyss-2); }

/* « Pourquoi je te dis ça » : les PREUVES du verdict, dépliables (elle doit
   pouvoir juger elle-même, jamais me croire sur parole). */
.soin-preuves { margin-top: 0.7rem; }
.soin-preuves-titre {
  cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--abyss-2);
  list-style: none;
}
.soin-preuves-titre::-webkit-details-marker { display: none; }
.soin-preuves-titre::before { content: '▸ '; }
.soin-preuves[open] .soin-preuves-titre::before { content: '▾ '; }
.soin-preuves-liste { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.soin-preuve {
  padding: 0.35rem 0 0.35rem 0.6rem; border-left: 2px solid var(--line);
  font-size: 0.85rem; color: var(--abyss-2);
}
.soin-preuve--perime { border-left-color: var(--line); color: var(--muted); }
.soin-preuve-depuis { display: block; font-size: 0.76rem; color: var(--muted); }

/* Signaux de remontée ▲ : le positif est VERT lagon, jamais corail. */
.soin-remontee-statut {
  display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.9rem;
  padding: 0.7rem 0.9rem; background: var(--lagoon-soft); border: 1px solid var(--lagoon);
  border-radius: var(--radius-sm);
}
.soin-remontee-statut-titre { font-weight: 700; color: var(--lagoon-deep); }
.soin-remontee-statut-message { font-size: 0.85rem; color: var(--abyss-2); }
.soin-remontee-cnt { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.soin-remontee-coche {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line); background: var(--foam); color: var(--muted);
  font-size: 0.8rem; font-weight: 700; transition: all 0.2s;
}
.soin-remontee-done .soin-remontee-coche { background: var(--lagoon); border-color: var(--lagoon); color: #fff; }
.soin-remontee-done .soin-voyant-lab { color: var(--lagoon-deep); }
.soin-remontee-done { cursor: default; }
.soin-remontee-done:hover { background: none; }
.soin-fam-up .soin-fam-head { background: var(--foam); }

.soin-board-liens { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.soin-board-lien {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 0.9rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--shell); text-decoration: none; font-weight: 600; font-size: 0.9rem;
  color: var(--lagoon-deep);
}
a.soin-board-lien:hover { border-color: var(--lagoon); background: var(--lagoon-soft); }

/* ---- Soin : point guidé anti-routine (Task 5.1) --------------------------
   Une conversation, pas un questionnaire médical : une question à la fois,
   gros taps, transition douce, conclusion chaleureuse. ---------------------- */
.soin-guide-cta {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.8rem 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--lagoon); background: var(--lagoon-soft);
  text-decoration: none; transition: background 0.15s ease, transform 0.1s ease;
}
.soin-guide-cta:hover { background: #BFE4DD; transform: translateY(-1px); }
.soin-guide-cta-titre { font-weight: 700; font-size: 1.02rem; color: var(--lagoon-deep); }
.soin-guide-cta-sous { font-size: 0.82rem; color: var(--abyss-2); }

/* Le bouton primaire UNIQUE de la carte « où tu en es » : il porte l'état
   (teinte selon le niveau de la synthèse). L'ancien « bloc point » séparé a
   disparu — il était un deuxième « Faire le point » à l'écran. */
.soin-synthese .soin-guide-cta { margin-top: 1rem; background: var(--shell); }
.soin-synthese .soin-guide-cta:hover { background: var(--lagoon-soft); }
.soin-synthese--vigilance .soin-guide-cta { border-color: var(--amber, #D9A441); background: #FBF1DE; }
.soin-synthese--sature .soin-guide-cta { border-color: #C97A6D; background: #FBE7E3; }
.soin-guide-card { display: flex; flex-direction: column; gap: 0.9rem; }
.soin-guide-titre { margin: 0; font-family: var(--display); font-size: 1.35rem; color: var(--abyss); }
.soin-guide-texte-intro { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.soin-guide-btn {
  align-self: flex-start;
  font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  padding: 0.65rem 1.6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--lagoon-deep); background: var(--lagoon); color: #fff;
}
.soin-guide-btn:hover { background: var(--lagoon-deep); }
.soin-guide-btn-doux { background: var(--shell); color: var(--ink); border-color: var(--line); }
.soin-guide-btn-doux:hover { background: var(--lagoon-soft); color: var(--lagoon-deep); }
.soin-guide-intro { display: flex; flex-direction: column; gap: 0.7rem; }

.soin-guide-progress {
  height: 6px; border-radius: 999px; background: var(--lagoon-soft); overflow: hidden;
  margin-bottom: 1rem;
}
.soin-guide-bar {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--lagoon); transition: width 0.35s ease;
}
.soin-guide-q { opacity: 0; }
.soin-guide-q-in { animation: soinGuideIn 0.3s ease forwards; }
@keyframes soinGuideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.soin-guide-question {
  margin: 0 0 0.9rem; font-family: var(--display); font-size: 1.2rem;
  color: var(--abyss); line-height: 1.4;
}
.soin-guide-scores { flex-wrap: wrap; }
.soin-guide-score { min-width: 4.6rem; min-height: 3.4rem; }

.soin-guide-conclusion, .soin-guide-fin { display: flex; flex-direction: column; gap: 0.7rem; }
.soin-guide-message { margin: 0; font-size: 1rem; color: var(--abyss); line-height: 1.55; }
.soin-guide-repos { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.soin-guide-repos li { color: var(--ink); font-size: 0.95rem; line-height: 1.45; }
.soin-guide-repos li::marker { color: var(--lagoon); }
.soin-guide-propose { margin: 0; font-size: 0.8rem; color: var(--muted); font-style: italic; }
.soin-guide-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.soin-guide-fin .soin-board-lien { align-self: flex-start; }
@media (max-width: 560px) {
  .soin-guide-score { flex: 1 1 0; min-width: 0; }
}

/* ---- Soin : paliers & briques (Task 7.1) ---------------------------------
   Les 4 paliers-lois en cartes statiques (le maître ressort), les 6 briques
   d'environnement en coches DURABLES (vert lagon : c'est du positif posé,
   jamais du corail), le mini-historique ▲ 7 jours en lecture. ------------- */
.soin-palier {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem; background: var(--foam);
}
.soin-palier + .soin-palier { margin-top: 0.6rem; }
.soin-palier-maitre { border-color: var(--lagoon); background: var(--lagoon-soft); }
.soin-palier-head { display: flex; align-items: center; gap: 0.7rem; }
.soin-palier-prof {
  flex: none; min-width: 3.2rem; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.95rem;
  color: var(--lagoon-deep); padding: 0.2rem 0.35rem;
  border: 1px solid var(--lagoon); border-radius: var(--radius-sm); background: var(--shell);
}
.soin-palier-titres { flex: 1 1 auto; min-width: 0; }
.soin-palier-titre { display: block; font-weight: 700; color: var(--abyss); font-size: 0.98rem; }
.soin-palier-niveau { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.soin-palier-loi {
  flex: none; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap;
  background: var(--shell); border: 1px solid var(--line); color: var(--muted);
}
.soin-palier-loi-dure { background: var(--coral-soft); border-color: var(--coral); color: var(--coral-deep); }
.soin-palier-texte { margin: 0.45rem 0 0; font-size: 0.88rem; color: var(--abyss-2); line-height: 1.5; }

/* Procédure de descente sous/sur-stimulation (retour Amandine) : carte
   dépliable, toujours accessible, ton chaleureux. */
.soin-descente-summary {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--abyss);
  cursor: pointer; list-style: none;
}
.soin-descente-summary::-webkit-details-marker { display: none; }
.soin-descente-summary::before { content: '▸ '; color: var(--lagoon-deep); }
.soin-descente[open] .soin-descente-summary::before { content: '▾ '; }
.soin-descente-etapes { margin: 0.6rem 0 0; padding-left: 1.4rem; }
.soin-descente-etapes li { margin: 0.4rem 0; font-size: 0.92rem; color: var(--abyss-2); line-height: 1.5; }

.soin-briques-cnt { font-weight: 700; color: var(--lagoon-deep); white-space: nowrap; }
.soin-brique-coche {
  flex: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
  border: 2px solid var(--line); background: var(--foam); color: #fff;
  font-size: 0.85rem; font-weight: 700; transition: all 0.2s;
}
.soin-brique-posee .soin-brique-coche { background: var(--lagoon); border-color: var(--lagoon); }
.soin-brique-posee .soin-voyant-lab { color: var(--lagoon-deep); }
.soin-brique-coord {
  display: inline-block; vertical-align: middle; margin-left: 0.3rem; padding: 0 0.35rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lagoon-deep); border: 1px solid var(--lagoon); border-radius: 4px; white-space: nowrap;
}
.soin-brique-geste { display: block; font-weight: 400; font-size: 0.8rem; color: var(--abyss-2); margin-top: 0.15rem; }
.soin-brique-date { display: block; font-weight: 700; font-size: 0.78rem; color: var(--lagoon-deep); margin-top: 0.15rem; }

.soin-r7 { display: flex; gap: 0.5rem; align-items: stretch; height: 92px; margin-bottom: 0.8rem; }
.soin-r7-jour {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 0.2rem; min-width: 0;
}
.soin-r7-n { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.soin-r7-jour-plein .soin-r7-n { color: var(--lagoon-deep); font-weight: 700; }
.soin-r7-barre {
  width: 100%; max-width: 34px; border-radius: 6px 6px 2px 2px;
  background: var(--track); transition: height 0.3s;
}
.soin-r7-jour-plein .soin-r7-barre { background: var(--lagoon); }
.soin-r7-lab { font-size: 0.72rem; color: var(--muted); }

/* ---- Soin : écran Suivi — résumé + patterns (refonte Santé, Tranche 4) -----
   Le haut de /soin/courbes : un résumé actif (pente + check-ins) et les
   patterns détectés en observations douces. Ton chaud, jamais un verdict ;
   la « confiance » reste honnête (piste = faible, net = solide). */
.soin-suivi-resume-ligne {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center;
}
.soin-suivi-pente {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 700; color: var(--ink);
}
.soin-suivi-pente-emoji { font-size: 1.15rem; }
.soin-suivi-pente--monte { color: #2FBF71; }
.soin-suivi-pente--descend { color: var(--coral); }
.soin-suivi-checkins { color: var(--muted); font-size: 0.88rem; }

.soin-patterns-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.soin-pattern {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.7rem 0.9rem; border-radius: 12px;
  background: var(--lagoon-soft); border: 1px solid var(--line);
}
.soin-pattern-texte { color: var(--ink); font-size: 0.92rem; }
.soin-pattern-conf {
  flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--muted);
  padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--shell); border: 1px solid var(--line);
}
.soin-pattern--solide .soin-pattern-conf { color: var(--lagoon-deep); border-color: var(--lagoon); }
.soin-reperes-lead { font-size: 0.92rem; }

/* ---- Soin : courbes du point du jour (Task 8.1) ---------------------------
   Barres CSS sobres (motif history-points-bar) : hauteur = score 0-3, une
   seule couleur (aucun jugement bon/mauvais), trou = pointillé (jour non
   rempli, PAS un zéro). Frise des lampes 🟢🟠🔴 au-dessus, gris = inconnue. */
.soin-courbes-tabs { display: flex; gap: 0.5rem; margin: 0.8rem 0 1rem; }
.soin-courbes-tab {
  padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--shell); color: var(--muted); font-weight: 600; font-size: 0.85rem;
  cursor: pointer; transition: all 0.2s;
}
.soin-courbes-tab:hover { border-color: var(--lagoon); color: var(--lagoon-deep); }
.soin-courbes-tab-here { background: var(--lagoon-soft); border-color: var(--lagoon); color: var(--lagoon-deep); }

.soin-courbes-fenetre { display: flex; flex-direction: column; gap: 1rem; }
.soin-cb-libelle { font-size: 0.82rem; font-weight: 700; color: var(--muted); margin-bottom: 0.35rem; }

.soin-cb-frise { display: flex; gap: 2px; align-items: center; }
.soin-cb-lampe {
  flex: 1 1 0; min-width: 2px; max-width: 22px; height: 10px; border-radius: 999px;
}
.soin-cb-lampe-vert { background: #2FBF71; }
.soin-cb-lampe-orange { background: #F5A623; }
.soin-cb-lampe-rouge { background: var(--coral); }
.soin-cb-lampe-inconnue { background: var(--track); }

.soin-cb-chart { display: flex; gap: 2px; align-items: flex-end; height: 56px; }
.soin-cb-col {
  flex: 1 1 0; min-width: 2px; max-width: 22px; height: 100%;
  display: flex; align-items: flex-end;
  background: var(--foam); border-radius: 4px 4px 0 0;
}
.soin-cb-bar {
  width: 100%; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #2CD0BD, var(--lagoon-deep));
}
/* 0 est une vraie donnée (« ça va ») : petite barre pleine, distincte du trou. */
.soin-cb-s0 { height: 10%; }
.soin-cb-s1 { height: 40%; }
.soin-cb-s2 { height: 70%; }
.soin-cb-s3 { height: 100%; }
/* Jour non rempli : un trou en pointillé, pas une barre. */
.soin-cb-col-vide { background: none; border-bottom: 2px dotted var(--line); border-radius: 0; }

.soin-cb-axe {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* ---- Projets (Pilotis / Livre) : chantiers menés en parallèle ------------ */
.project-page { display: flex; flex-direction: column; gap: 1rem; max-width: 1400px; }

.project-hero-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.6rem;
}
.project-title {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--abyss);
}
.project-title-icon { font-family: inherit; }
/* Couleur du projet (choisie dans les Réglages) : liseré discret sur la carte d'en-tête. */
.project-hero.has-accent { border-left: 4px solid var(--project-accent, var(--lagoon)); }
.project-hero-pct {
  flex: 0 0 auto; font-size: 1.15rem; font-weight: 700; color: var(--lagoon-deep);
  font-variant-numeric: tabular-nums;
}
.project-gauge { height: 14px; margin-bottom: 1rem; }

.project-intro { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.7rem; }
.project-intro-text, .project-ws-note {
  width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit;
  color: var(--ink); background: #FBFDFC; resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.4s ease;
}
.project-intro-text:focus, .project-ws-note:focus { border-color: var(--lagoon); }
.project-intro-text::placeholder, .project-ws-note::placeholder { color: var(--muted); font-style: italic; }
.project-note-flash { border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18); }
.project-save-hint {
  align-self: flex-start; font-size: 0.75rem; font-weight: 600; color: var(--lagoon-deep);
  background: var(--lagoon-soft); border-radius: 999px; padding: 0.1rem 0.6rem;
}

.project-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.project-link-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.82rem; font-weight: 600; text-decoration: none;
  color: var(--lagoon-deep); background: var(--lagoon-soft);
  border-radius: 999px; padding: 0.3rem 0.85rem;
  transition: background 0.15s ease, transform 0.1s ease;
}
.project-link-chip:hover { background: #BFE4DD; transform: translateY(-1px); }

/* ---- Édition des liens (en-tête projet + par chantier) ---- */
.project-link-item { display: inline-flex; align-items: center; gap: 0.1rem; }
.project-link-edit, .project-link-remove {
  border: none; background: none; cursor: pointer; line-height: 1;
  color: var(--muted); padding: 0.15rem 0.25rem; border-radius: 6px;
  font-size: 0.8rem; transition: color 0.15s ease, background 0.15s ease;
}
.project-link-edit:hover { color: var(--lagoon-deep); background: var(--foam); }
.project-link-remove:hover { color: var(--coral); background: var(--foam); }
.project-link-item:not(:hover) .project-link-edit,
.project-link-item:not(:hover) .project-link-remove { opacity: 0.35; }

.project-links-add { margin-top: 0.5rem; }
.project-link-add-toggle {
  border: 1px dashed var(--line); background: none; cursor: pointer;
  color: var(--muted); font-size: 0.78rem; font-weight: 600; font-family: inherit;
  border-radius: 999px; padding: 0.2rem 0.7rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.project-link-add-toggle:hover { color: var(--lagoon-deep); border-color: var(--lagoon); }
.project-link-add-form, .project-link-edit-form {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.4rem;
}
.project-link-add-form input, .project-link-edit-form input {
  font: inherit; font-size: 0.82rem; color: var(--abyss);
  border: 1px solid var(--line); border-radius: 6px; padding: 0.25rem 0.5rem; min-width: 0;
}
.project-link-add-form input[name="url"], .project-link-edit-form input[name="url"] { flex: 1 1 12rem; }
.project-link-add-form button, .project-link-edit-form button {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  border: none; border-radius: 6px; padding: 0.25rem 0.6rem;
  background: var(--lagoon-soft); color: var(--lagoon-deep);
}
.project-link-add-form button:hover, .project-link-edit-form button:hover { background: #BFE4DD; }
.project-link-edit-form [data-link-cancel] { background: none; color: var(--muted); }

/* Liens d'un chantier : un peu plus discrets que ceux de l'en-tête */
.project-ws-links { margin-top: 0.15rem; }
.project-ws-links .project-link-chip { font-size: 0.78rem; padding: 0.22rem 0.7rem; }
.project-ws-links-add { margin-top: 0.35rem; }

.project-workstreams-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 1rem;
}
.project-workstreams-head h2 { margin: 0; }

/* Switch de vue Cartes/Barres (mémorisé localStorage, cf. project.js) */
.project-view-switch {
  display: inline-flex; flex: 0 0 auto; gap: 2px;
  padding: 2px; background: var(--foam);
  border: 1px solid var(--line); border-radius: 999px;
}
.project-view-btn {
  border: none; background: none; cursor: pointer;
  padding: 0.35rem 0.9rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; font-family: inherit;
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.project-view-btn:hover { color: var(--lagoon-deep); }
.project-view-btn.active { background: var(--shell); color: var(--lagoon-deep); box-shadow: var(--shadow); }

.project-workstreams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.9rem;
  align-items: start;
}
.project-workstream {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.85rem 0.9rem; background: #FBFDFC;
  display: flex; flex-direction: column; gap: 0.55rem;
  transition: border-color 0.15s ease;
}
.project-workstream:has(.project-badge-fait) { border-color: var(--lagoon-deep); background: var(--lagoon-soft); }
.project-workstream:has(.project-badge-en_cours) { border-color: #BFE4DD; }

.project-ws-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.project-ws-label { font-weight: 600; font-size: 0.95rem; color: var(--abyss); min-width: 0; overflow-wrap: anywhere; }
.project-ws-head-right { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }

.project-badge {
  flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; white-space: nowrap;
  border-radius: 999px; padding: 0.15rem 0.6rem;
}
.project-badge-a_venir { background: var(--sand); color: #7A6A48; }
.project-badge-en_cours { background: var(--lagoon-soft); color: var(--lagoon-deep); }
.project-badge-fait { background: var(--lagoon-deep); color: #fff; }

/* ★ chantier prioritaire : accent OR, distinct du corail des priorités TickTick. */
.project-ws-star {
  flex: 0 0 auto; border: none; background: none;
  color: #C7D6D2; font-size: 1.15rem; line-height: 1;
  cursor: pointer; padding: 0.1rem 0.3rem;
  transition: color 0.15s ease, transform 0.12s ease;
}
.project-ws-star:hover { color: var(--gold); transform: scale(1.15); }
.project-ws-star.active { color: var(--gold); }
.project-ws-star:disabled { cursor: wait; }
.project-workstream.is-starred {
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
}

.project-ws-bar-row { display: flex; align-items: center; gap: 0.6rem; }
.project-ws-count {
  flex: 0 0 auto; font-size: 0.78rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* % affiché seulement en vue Barres, devant le n/total (cf. .project-ws-count) */
.project-ws-pct { display: none; }

/* ---- Vue Barres : 1 barre pleine largeur par chantier, sans checklist ---- */
.project-workstreams.view-bars {
  display: flex; flex-direction: column; gap: 0.5rem;
  align-items: stretch; /* la grille de base pose align-items:start (cartes) ; ici on veut des barres pleine largeur */
}
.project-workstreams.view-bars .project-workstream {
  flex-direction: row; align-items: center; gap: 0.9rem;
  padding: 0.65rem 1rem;
}
.project-workstreams.view-bars .project-ws-head {
  flex: 0 0 auto; width: clamp(160px, 24vw, 320px);
  justify-content: flex-start; gap: 0.6rem;
}
.project-workstreams.view-bars .project-ws-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.project-workstreams.view-bars .project-ws-bar-row { flex: 1 1 auto; }
.project-workstreams.view-bars .project-ws-pct { display: inline; }
.project-workstreams.view-bars .project-steps,
.project-workstreams.view-bars .project-steps-empty,
.project-workstreams.view-bars .project-ws-footer,
.project-workstreams.view-bars .project-step-add-form,
.project-workstreams.view-bars .project-ws-links,
.project-workstreams.view-bars .project-ws-links-add,
.project-workstreams.view-bars .project-ws-note {
  display: none;
}
@media (max-width: 640px) {
  .project-workstreams.view-bars .project-workstream { flex-wrap: wrap; }
  .project-workstreams.view-bars .project-ws-head { width: 100%; }
  .project-workstreams.view-bars .project-ws-bar-row { flex: 1 1 100%; }
}

/* ---- Vue Cartes larges : une carte pleine largeur par ligne (grille 1 colonne) ---- */
.project-workstreams.view-wide { grid-template-columns: 1fr; }

/* ---- Chantiers TERMINÉS : relégués en fin de liste (ProjectService::get()) et
       repliés ici — seuls l'en-tête, la barre et le compteur restent visibles.
       Le chevron déplie/replie ; un clic n'importe où sur la carte repliée la
       déplie aussi (cf. bindWsCollapse() dans project.js). ---- */
.project-ws-collapse {
  display: none; flex: 0 0 auto;
  border: 0; background: none; padding: 0 0.1rem; cursor: pointer;
  color: var(--muted); font-size: 0.8rem; line-height: 1;
  transition: transform 0.15s ease, color 0.15s ease;
}
.project-workstream.is-done .project-ws-head .project-ws-collapse { display: inline-flex; }
.project-ws-collapse:hover { color: var(--lagoon-deep); }
.project-workstream.is-done.is-open .project-ws-collapse { transform: rotate(90deg); }

.project-workstream.is-done:not(.is-open) {
  padding: 0.5rem 0.7rem; gap: 0.35rem; cursor: pointer; opacity: 0.78;
}
.project-workstream.is-done:not(.is-open):hover { opacity: 1; }
.project-workstream.is-done:not(.is-open) .project-steps,
.project-workstream.is-done:not(.is-open) .project-steps-empty,
.project-workstream.is-done:not(.is-open) .project-ws-footer,
.project-workstream.is-done:not(.is-open) .project-step-add-form,
.project-workstream.is-done:not(.is-open) .project-ws-links,
.project-workstream.is-done:not(.is-open) .project-ws-links-add,
.project-workstream.is-done:not(.is-open) .project-ws-note {
  display: none;
}

/* Vue Barres : la checklist est déjà masquée pour TOUS les chantiers, le chevron
   n'aurait rien à ouvrir. Sélecteur plus spécifique que la règle d'affichage
   ci-dessus (5 classes contre 4), sinon il resterait visible. */
.project-workstreams.view-bars .project-workstream.is-done .project-ws-collapse { display: none; }

/* ---- Renommage inline (clic sur le titre du chantier / le texte d'une tâche) ---- */
.project-ws-label { cursor: text; }
.project-ws-label:hover { text-decoration: underline dotted; text-underline-offset: 2px; }
.project-step-text { cursor: text; border-radius: 4px; }
.project-step-text:hover { box-shadow: 0 0 0 3px var(--foam); background: var(--foam); }
.project-inline-edit {
  font: inherit; color: var(--abyss); width: 100%; min-width: 0;
  border: 1px solid var(--lagoon); border-radius: 6px;
  padding: 0.1rem 0.35rem; background: #fff;
}

/* ---- Poignée de glisser-déplacer des tâches ---- */
.project-step-drag {
  flex: 0 0 auto; cursor: grab; color: var(--muted);
  font-size: 1rem; line-height: 1; letter-spacing: -1px;
  padding: 0 0.25rem 0 0; user-select: none;
  transition: color 0.15s ease;
}
.project-step-drag:hover { color: var(--lagoon-deep); }
.project-step:hover .project-step-drag { color: var(--lagoon); }
.project-step-drag:active { cursor: grabbing; }
.project-step.dragging { opacity: 0.5; }

/* ---- Poignée de glisser-déplacer des chantiers (en-tête) ---- */
.project-ws-drag {
  flex: 0 0 auto; cursor: grab; color: var(--muted);
  font-size: 1.05rem; line-height: 1; letter-spacing: -1px;
  padding: 0 0.25rem 0 0; user-select: none;
  transition: color 0.15s ease;
}
.project-ws-drag:hover { color: var(--lagoon-deep); }
.project-ws-drag:active { cursor: grabbing; }
.project-workstream.dragging {
  opacity: 0.85;
  outline: 2px dashed var(--lagoon);
  outline-offset: 2px;
  box-shadow: var(--shadow);
}

/* Ligne à jalons : piste + remplissage + un nœud cliquable par étape */
.ws-track {
  position: relative; flex: 1 1 auto; height: 20px;
  background: var(--track); border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(11,43,54,0.08);
}
.ws-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(180deg, #2CD0BD, var(--lagoon-deep));
  border-radius: 999px;
  transition: width 0.3s ease;
}
.ws-milestone {
  position: absolute; top: 50%; z-index: 1;
  width: 14px; height: 14px; margin: 0; padding: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid var(--track);
  background: #FBFDFC; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.ws-milestone:hover { transform: translate(-50%, -50%) scale(1.2); border-color: var(--lagoon); }
.ws-milestone.done { background: var(--lagoon-deep); border-color: var(--lagoon-deep); }
/* Chantier ★ : barre, jalons et coches passent aussi en or */
.project-workstream.is-starred .ws-fill { background: var(--gold-deep); }
.project-workstream.is-starred .ws-milestone.done { background: var(--gold-deep); border-color: var(--gold-deep); }
.project-workstream.is-starred .project-step-checkbox { accent-color: var(--gold-deep); }

.project-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.project-step { border-radius: var(--radius-sm); display: flex; align-items: center; gap: 0.15rem; }
.project-step label {
  display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.2rem 0.15rem;
  cursor: pointer; font-size: 0.85rem; flex: 1 1 auto; min-width: 0;
}
.project-step-checkbox { flex: 0 0 auto; margin-top: 0.15rem; width: 1.05rem; height: 1.05rem; cursor: pointer; accent-color: var(--lagoon); }
.project-step-text { overflow-wrap: anywhere; color: var(--ink); }
.project-step-done .project-step-text { text-decoration: line-through; opacity: 0.55; }
.project-steps-empty { margin: 0; font-size: 0.82rem; }

/* ---- Ajout/suppression de chantiers & étapes depuis l'UI ----------------- */
.project-step-remove {
  flex: 0 0 auto; border: none; background: none; color: #C7D6D2;
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem;
  transition: color 0.15s ease;
}
.project-step-remove:hover { color: var(--coral); }

.project-ws-footer { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.project-step-add-toggle, .project-ws-remove {
  padding: 0.3rem 0.65rem;
  border: none; border-radius: var(--radius-sm);
  font-size: 0.78rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.project-step-add-toggle { background: var(--lagoon-soft); color: var(--lagoon-deep); }
.project-step-add-toggle:hover { background: #BFE4DD; }
.project-ws-remove { background: transparent; color: var(--muted); margin-left: auto; }
.project-ws-remove:hover { background: var(--coral-soft); color: var(--coral); }

.project-step-add-form { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.project-step-add-form input[type="text"] {
  flex: 1 1 150px; min-width: 0;
  padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.85rem; font-family: inherit; background: #FBFDFC; min-height: 34px;
}
.project-step-add-form input:focus { border-color: var(--lagoon); }
.project-step-add-form button {
  padding: 0.45rem 0.8rem; min-height: 34px;
  background: var(--lagoon-soft); color: var(--lagoon-deep);
  border: none; border-radius: var(--radius-sm);
  font-size: 0.8rem; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background 0.15s ease;
}
.project-step-add-form button:hover { background: #BFE4DD; }

.project-ws-add-form { margin-top: 0.6rem; }

/* ---- Grille d'évaluation (rendu markdown maison) ------------------------- */
.grille-page { display: flex; flex-direction: column; gap: 1rem; }
.grille-card h2 { font-size: 1.05rem; }

.md-content { font-size: 0.92rem; line-height: 1.6; color: var(--ink); }
.md-content .md-h1 {
  font-family: var(--display); font-weight: 600; font-size: 1.3rem;
  margin: 1.5rem 0 0.6rem; color: var(--abyss);
}
.md-content .md-h1:first-child { margin-top: 0; }
.md-content .md-h2 {
  font-family: var(--display); font-weight: 600; font-size: 1.12rem;
  margin: 1.3rem 0 0.5rem; color: var(--abyss);
  border-bottom: 1px solid var(--line); padding-bottom: 0.3rem;
}
.md-content .md-h3 { font-size: 1rem; margin: 1.1rem 0 0.4rem; color: var(--lagoon-deep); font-weight: 700; }
.md-content .md-h4, .md-content .md-h5, .md-content .md-h6 { font-size: 0.95rem; margin: 0.9rem 0 0.3rem; font-weight: 700; }
.md-content p { margin: 0 0 0.75rem; }
.md-content strong { color: var(--abyss); }
.md-content em { color: var(--muted); }
.md-content code {
  background: var(--foam); border: 1px solid var(--line); border-radius: 4px;
  padding: 0.05rem 0.35rem; font-size: 0.85em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.md-content pre.md-pre {
  background: var(--abyss); color: var(--foam); padding: 0.9rem; border-radius: var(--radius-sm);
  overflow-x: auto; font-size: 0.8rem; line-height: 1.55; margin: 0 0 1rem;
}
.md-content pre.md-pre code { background: none; border: none; padding: 0; color: inherit; }
.md-content ul.md-list, .md-content ol.md-list { margin: 0 0 0.9rem; padding-left: 1.3rem; }
.md-content li { margin: 0.25rem 0; }
.md-content .md-hr { border: none; border-top: 1px solid var(--line); margin: 1.3rem 0; }
.md-content blockquote.md-quote {
  margin: 0 0 0.9rem; padding: 0.6rem 0.9rem; border-left: 3px solid var(--lagoon);
  background: var(--foam); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--muted);
}
.md-content blockquote.md-quote p { margin: 0; }

.md-table-wrap { overflow-x: auto; margin: 0 0 1.1rem; }
.md-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.md-table th, .md-table td { border: 1px solid var(--line); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
.md-table thead th { background: var(--lagoon-soft); color: var(--abyss); font-weight: 700; }
.md-table tbody tr:nth-child(even) { background: var(--foam); }

/* ---- Courses : réglages Catalogue & Lieux -------------------------------- */
.courses-page { display: flex; flex-direction: column; gap: 1rem; max-width: 1500px; }

.courses-subnav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.4rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem;
  width: fit-content;
  max-width: 100%;
  box-shadow: var(--shadow);
  /* Mobile : le menu défile HORIZONTALEMENT à l'intérieur de son cadre —
     jamais de débordement de la page. Barre de scroll masquée. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.courses-subnav::-webkit-scrollbar { display: none; } /* WebKit/Blink */
.courses-subnav a {
  flex: 0 0 auto; /* les onglets ne rétrécissent pas -> ils défilent */
  padding: 0.4rem 1rem;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.courses-subnav a:hover { color: var(--lagoon-deep); }
.courses-subnav a.courses-subnav-here { background: var(--lagoon-soft); color: var(--lagoon-deep); }

.courses-card h2 { margin-bottom: 0.4rem; }
.courses-card > .placeholder { margin: 0 0 1rem; }

.courses-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.courses-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.courses-table th, .courses-table td {
  border: 1px solid var(--line);
  padding: 0.4rem 0.5rem;
  text-align: left;
  vertical-align: middle;
}
.courses-table thead th { background: var(--lagoon-soft); color: var(--abyss); font-weight: 700; white-space: nowrap; }
.courses-table tbody tr:nth-child(even) { background: var(--foam); }
.courses-row-empty td { text-align: center; }

.courses-input, .courses-select {
  width: 100%;
  min-width: 6rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: inherit;
  background: #FBFDFC;
  color: var(--ink);
}
.courses-input:focus, .courses-select:focus { border-color: var(--lagoon); }
.courses-input-narrow { min-width: 4.5rem; }
/* Saisie d'heure 24 h (HH:MM) : compacte, centrée ; rouge si format invalide. */
.courses-input-heure { width: 5.2rem; min-width: 5.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.courses-input-invalide { border-color: var(--coral) !important; background: #FDECEC; }

/* NB : ne PAS mettre un <td> en display:flex (casse le rendu du tableau). */
.courses-qty-cell { white-space: nowrap; }
.courses-qty-input { width: 4.5rem; min-width: 4.5rem; display: inline-block; vertical-align: middle; }
.courses-qty-unit { font-size: 0.78rem; color: var(--muted); display: inline-block; vertical-align: middle; margin-left: 0.3rem; }
.courses-hidden { display: none !important; }

/* Tableau à entêtes collantes : le tableau défile dans son cadre, le thead reste visible. */
.courses-table-scroll { max-height: 70vh; overflow: auto; }
.courses-table-scroll thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--shell);
  box-shadow: 0 1px 0 var(--line);
}

/* Carte « Faire les courses » : titre à gauche, horaires du jour à droite */
.courses-decision-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.courses-decision-head h2 { margin: 0; }
.courses-lieux-jour { font-size: 0.82rem; text-align: right; }
.courses-lieux-jour-title { display: block; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; margin-bottom: 0.2rem; }
.courses-lieux-jour-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.courses-lieux-jour-item { color: var(--muted); }
.courses-lieux-jour-item.est-ouvert .courses-lieux-jour-plages { color: var(--lagoon-deep); font-weight: 600; }
.courses-lieux-jour-nom { font-weight: 600; color: var(--abyss); margin-right: 0.4rem; }
/* Repère « ferme bientôt » : voyant chaleureux (ambre), pas alarmant. */
.courses-lieux-jour-badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: #FCEFD6;
  color: #9A5B00;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .courses-lieux-jour { text-align: left; }
}

/* Préférence : 3 boutons segmentés (préféré / 2e choix / si rien d'autre) */
.courses-pref-cell { white-space: nowrap; }
/* Boutons empilés verticalement : la colonne reste étroite. */
.courses-pref-group { display: inline-flex; flex-direction: column; gap: 2px; padding: 2px; background: var(--foam); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.courses-pref-btn {
  border: none; background: none; cursor: pointer;
  padding: 0.18rem 0.55rem; border-radius: 6px;
  font-size: 0.72rem; font-weight: 600; font-family: inherit;
  color: var(--muted); white-space: nowrap; text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.courses-pref-btn:hover { color: var(--lagoon-deep); }
.courses-pref-btn.courses-pref-active { background: var(--lagoon); color: #fff; }

/* Bloc d'aide dépliable « À quoi servent les colonnes ? » */
.courses-help { margin: 0.35rem 0 0.9rem; font-size: 0.86rem; }
.courses-help summary { cursor: pointer; color: var(--lagoon-deep); font-weight: 600; }
.courses-help-list { margin: 0.6rem 0 0; padding: 0.75rem 0.9rem; background: var(--foam); border-radius: var(--radius-sm); }
.courses-help-list dt { font-weight: 700; color: var(--abyss); margin-top: 0.45rem; }
.courses-help-list dt:first-child { margin-top: 0; }
.courses-help-list dd { margin: 0.1rem 0 0; color: var(--ink); }

.courses-check-cell { text-align: center; }
.courses-check-cell input, .courses-check-inline input { accent-color: var(--lagoon); }
.courses-check-inline { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

.courses-lieux-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 12rem;
}
.courses-lieu-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--shell);
  white-space: nowrap;
}
.courses-lieu-chip input { accent-color: var(--lagoon); }

.courses-row-delete {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.courses-row-delete:hover { color: var(--coral-deep); background: var(--coral-soft); }

.courses-add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem;
  background: var(--foam);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}
.courses-add-form input[type="text"], .courses-add-form select { flex: 1 1 9rem; }
.courses-add-form input[type="number"] { flex: 0 0 5.5rem; }
.courses-add-form .courses-lieux-cell { flex: 1 1 100%; }
.courses-add-form button {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  background: var(--lagoon);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
}
.courses-add-form button:hover { background: var(--lagoon-deep); }

/* ---- Lieux : cartes + éditeur d'horaires ---------------------------------- */
.courses-lieu-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem;
  margin-bottom: 0.9rem;
  background: #FBFDFC;
}
.courses-lieu-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.courses-lieu-head input[type="text"] { flex: 1 1 14rem; }
.courses-lieu-head select { flex: 0 0 9rem; }

.courses-horaires-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; margin-bottom: 0.5rem; }
.courses-horaires-table th, .courses-horaires-table td {
  border: 1px solid var(--line);
  padding: 0.35rem 0.5rem;
  text-align: left;
}
.courses-horaires-table thead th { background: var(--lagoon-soft); color: var(--abyss); font-weight: 700; }
.courses-horaires-table select, .courses-horaires-table input { min-width: 6rem; }

.courses-horaires-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.courses-btn, .courses-btn-secondary {
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.courses-btn { background: var(--lagoon); color: #fff; border: none; }
.courses-btn:hover { background: var(--lagoon-deep); }
.courses-btn-secondary { background: var(--shell); color: var(--lagoon-deep); border: 1px solid var(--line); }
.courses-btn-secondary:hover { background: var(--lagoon-soft); }
.courses-save-hint { font-size: 0.8rem; color: var(--lagoon-deep); }

/* ---- Écran Inventaire (Task 2.3) : gros boutons tap ---------------------- */
.courses-inventory-header { text-align: center; }
.courses-inventory-tenue { font-size: 1.2rem; margin: 0; }
.courses-inventory-tenue strong { color: var(--lagoon-deep); font-size: 1.5rem; }
.courses-inventory-list { display: flex; flex-direction: column; gap: 0.6rem; }
.courses-inventory-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem;
  padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--foam);
}
.courses-inventory-name { flex: 1 1 12rem; font-weight: 600; }
.courses-inventory-unit { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.courses-inventory-current { flex: 0 0 auto; font-size: 0.85rem; color: var(--muted); min-width: 9rem; }
.courses-inventory-taps { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.courses-tap-btn {
  min-width: 3rem; min-height: 3rem; padding: 0.4rem 0.6rem;
  font-size: 1.1rem; font-weight: 700; font-family: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--abyss);
}
.courses-tap-btn:hover { background: var(--lagoon-soft); }
.courses-tap-btn.courses-tap-active { background: var(--lagoon); color: #fff; border-color: var(--lagoon); }
.courses-tap-plus, .courses-tap-minus { color: var(--lagoon-deep); }
/* Valeur courante hors 0/½/1/2 : pastille « sélectionnée » entre − et + */
.courses-tap-value {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3rem; min-height: 3rem; padding: 0.4rem 0.6rem;
  font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid var(--lagoon); border-radius: var(--radius-sm);
  background: var(--lagoon); color: #fff;
}
.courses-tap-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- Tableau de bord (Task 2.4) : verdict, barres par rôle, ménager ------ */
.courses-dashboard-verdict { text-align: center; position: relative; }
.courses-dashboard-refresh { position: absolute; top: 0.9rem; right: 0.9rem; font-size: 0.78rem; padding: 0.35rem 0.7rem; }
.courses-dashboard-days { font-size: 1.3rem; margin: 0; }
.courses-dashboard-days strong { font-size: 2.6rem; font-family: var(--display); }
.courses-dashboard-days--vert strong { color: var(--lagoon-deep); }
.courses-dashboard-days--orange strong { color: var(--gold-deep); }
.courses-dashboard-days--rouge strong { color: var(--coral-deep); }
.courses-dashboard-freshness { font-size: 0.85rem; color: var(--muted); margin: 0.3rem 0 0; }
.courses-dashboard-stale {
  font-weight: 700; color: var(--coral-deep); background: var(--coral-soft);
  border-radius: var(--radius-sm); padding: 0.9rem 1rem; font-size: 1.05rem;
}

.courses-dashboard-meals { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; text-align: center; }
.courses-dashboard-meal { flex: 1 1 10rem; }
.courses-dashboard-meal h2 { font-size: 1rem; margin-bottom: 0.2rem; }
.courses-dashboard-meal-count { margin: 0; font-size: 1rem; }
.courses-dashboard-meal-count strong { font-size: 1.6rem; color: var(--lagoon-deep); }
.courses-dashboard-meal-limitant { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--muted); min-height: 1.1em; }

.courses-dashboard-bars { display: flex; flex-direction: column; gap: 0.55rem; }
.courses-dashboard-bar-row { display: flex; align-items: center; gap: 0.6rem; }
.courses-dashboard-bar-label { flex: 0 0 11rem; font-size: 0.85rem; }
.courses-dashboard-bar-track { flex: 1 1 auto; height: 14px; background: var(--track); border-radius: 8px; overflow: hidden; }
.courses-dashboard-bar-fill { height: 100%; background: var(--lagoon); border-radius: 8px; }
.courses-dashboard-bar-fill.courses-dashboard-bar-fill--low { background: var(--coral); }
.courses-dashboard-bar-value { flex: 0 0 3rem; text-align: right; font-size: 0.8rem; color: var(--muted); }

.courses-dashboard-menager-list { display: flex; flex-direction: column; gap: 0.35rem; }
.courses-dashboard-menager-item {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.9rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line);
}
.courses-dashboard-menager-item:last-child { border-bottom: none; }
.courses-dashboard-menager-days { color: var(--muted); }
.courses-dashboard-menager-days--low { color: var(--coral-deep); font-weight: 700; }

.courses-dashboard-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; text-decoration: none; }
.courses-dashboard-actions .courses-btn, .courses-dashboard-actions .courses-btn-secondary { text-decoration: none; display: inline-flex; align-items: center; }

/* ---- Décision « dois-je y aller ? » (Task 3.3) --------------------------- */
.courses-decision-petitdej-warning {
  font-weight: 700; color: var(--coral-deep); background: var(--coral-soft);
  border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin: 0 0 0.8rem; font-size: 0.9rem;
}
.courses-decision-verdict { margin: 0 0 0.6rem; font-size: 1.05rem; }
.courses-decision-lieux { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.6rem; }
.courses-decision-lieu {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.9rem; padding: 0.3rem 0.5rem; background: var(--shell); border-radius: var(--radius-sm);
}
.courses-decision-lieu-etat { color: var(--muted); }
.courses-decision-tient { margin: 0 0 0.4rem; font-size: 0.9rem; }
.courses-decision-tient--ok { color: var(--lagoon-deep); }
.courses-decision-tient--warn { color: var(--coral-deep); font-weight: 700; }
.courses-decision-agenda { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--muted); }
.courses-decision-mood-adapt { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--gold-deep); font-weight: 600; }
.courses-decision-mood { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.courses-decision-mood-label { font-size: 0.85rem; color: var(--muted); }
.courses-mood-btn--active { background: var(--lagoon); color: #fff; border-color: var(--lagoon); }

/* ---- Liste de courses (Task 4.2) ----------------------------------------- */
.courses-liste-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }
.courses-liste-offline-hint { font-size: 0.8rem; color: var(--gold-deep); font-weight: 600; }

.courses-liste-lieu-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.courses-liste-lieu-head h2 { margin: 0; }
.courses-liste-lieu-etat { font-size: 0.8rem; color: var(--muted); padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--shell); }
.courses-liste-lieu-etat--ouvert { color: var(--lagoon-deep); background: var(--lagoon-soft); font-weight: 600; }
.courses-liste-lieu-horaires { font-size: 0.8rem; color: var(--muted); }

.courses-liste-rayon { margin-bottom: 0.9rem; }
.courses-liste-rayon:last-child { margin-bottom: 0; }
.courses-liste-rayon h3 { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--lagoon-deep); }

.courses-liste-items { display: flex; flex-direction: column; gap: 0.15rem; }
.courses-liste-item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.2rem;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.courses-liste-item:last-child { border-bottom: none; }
.courses-liste-item input[type="checkbox"] { accent-color: var(--lagoon); width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.courses-liste-item-nom { flex: 1 1 auto; }
.courses-liste-item:has(input:checked) .courses-liste-item-nom { text-decoration: line-through; color: var(--muted); }
.courses-liste-item-qty { flex: 0 0 auto; font-size: 0.82rem; color: var(--muted); }

.courses-plaisir-block { border: 1px dashed var(--gold); background: var(--gold-soft); }
.courses-plaisir-block h2 { color: var(--gold-deep); }
.courses-plaisir-quota { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted); }

/* ---- Écran Ticket de caisse (Task 5.2) ----------------------------------- */
.courses-ticket-status { font-size: 0.9rem; color: var(--muted); margin: 0.7rem 0 0; }
.courses-ticket-header-fields { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.courses-ticket-header-fields label {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.85rem; color: var(--muted); flex: 1 1 10rem;
}

/* ---- Écran Historique & tendances (Task 6.2) ----------------------------- */
.courses-history-freq { font-size: 1rem; margin: 0 0 1rem; }
.courses-history-subtitle { margin: 1rem 0 0.5rem; font-size: 0.95rem; color: var(--lagoon-deep); }
.courses-history-subtitle:first-of-type { margin-top: 0; }
.courses-history-bar-value { flex-basis: 5rem; }
.courses-history-gauge { max-width: 26rem; }
.courses-history-plaisir-caption { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted); }
.courses-history-recurrents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.courses-history-recurrents li {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.9rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line);
}
.courses-history-recurrents li:last-child { border-bottom: none; }
.courses-history-recurrent-count { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Historique : lignes cliquables vers le détail d'achat (/courses/achat). */
.courses-table tbody tr.courses-row-link { cursor: pointer; transition: background 0.15s ease; }
.courses-table tbody tr.courses-row-link:hover { background: var(--lagoon-soft); }
.courses-history-date-link { color: inherit; text-decoration: none; font-weight: 600; }
.courses-history-date-link:hover { text-decoration: underline; color: var(--lagoon-deep); }
.courses-history-chevron { text-align: right; width: 1.4rem; }
.courses-history-chevron a { color: var(--muted); text-decoration: none; font-size: 1.15rem; }
.courses-history-chevron a:hover { color: var(--lagoon-deep); }

/* ---- Écran détail d'achat (/courses/achat) -------------------------------- */
.courses-achat-back { display: inline-block; margin-bottom: 0.6rem; font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.courses-achat-back:hover { color: var(--lagoon-deep); }
.courses-achat-meta { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0 0 1rem; font-size: 0.9rem; color: var(--muted); }
.courses-achat-ticket { margin: 0 0 0.8rem; }
.courses-achat-ticket-img { max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); display: block; }
.courses-achat-ticket-frame { width: 100%; height: 32rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.courses-achat-actions a { text-decoration: none; }

/* ---- Entretien — réglages (formulaire k/v) -------------------------------
   Le tableau du catalogue réutilise directement les classes .courses-* (motif
   partagé avec Courses) ; seul ce petit bloc de formulaire est spécifique. */
.entretien-settings-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem;
  padding: 0.9rem;
  background: var(--foam);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}
.entretien-settings-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.entretien-settings-form label.courses-check-inline { flex-direction: row; align-items: center; }
.entretien-settings-form input[type="text"], .entretien-settings-form input[type="number"] {
  font-weight: 400;
  color: var(--ink);
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: 0.9rem;
}
.entretien-settings-form input:focus { outline: none; border-color: var(--lagoon); }

/* ---- Entretien : tableau de bord (Task 2.2) — jauges PAR ZONE, jamais de
   rouge ni de vocabulaire « retard » : dégradé lagon -> or, et un libellé
   « gros gain dispo » à 80 % et plus. ---------------------------------- */
.entretien-zone-bars { margin-bottom: 0.4rem; }
/* LA COULEUR SUIT LA PROGRESSION (18/08/2026). Le degrade etait applique au
   REMPLISSAGE, dont la largeur varie : son extremite tombait donc sur l'or
   quelle que soit la charge — « elles ont toutes le bout jaune, ou qu'elles en
   soient, et ca ca me perturbe ». En etirant le fond a la largeur de la PISTE
   (`--pct` porte le pourcentage, pose par le gabarit), le remplissage n'en
   montre que sa part : une zone a 10 % reste franchement lagon, une zone a
   90 % arrive vraiment a l'or. Repli a 100 % si `--pct` manque : le degre
   complet, l'ancien comportement, plutot qu'une barre sans fond. */
.entretien-zone-bar-fill {
  background-image: linear-gradient(to right, var(--lagoon), var(--gold));
  background-size: calc(100% * 100 / var(--pct, 100)) 100%;
  background-repeat: no-repeat;
}
/* ---- « J'ai fait un truc » en deux gestes (19/08/2026) -------------------
   La barre de zone EST le bouton. Elle doit rester une jauge à l'œil (pas de
   bordure de bouton, pas de fond) tout en se signalant au survol : c'est un
   geste qu'on doit avoir envie de faire, pas un formulaire à remplir. */
.entretien-zone-btn {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.15rem 0.25rem; margin: 0;
  background: none; border: 0; border-radius: var(--radius-sm);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}
.entretien-zone-btn:hover { background: var(--foam); }
.entretien-zone-btn[aria-expanded="true"] { background: var(--foam); }

/* Les tâches de la zone, dépliées : de grosses pastilles tapables du pouce. */
.entretien-zone-taches {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0.15rem 0 0.6rem 11.6rem;
}
.entretien-zone-tache {
  padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--lagoon); background: var(--shell);
  color: var(--abyss); font-family: inherit; font-size: 0.88rem; cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}
.entretien-zone-tache:hover { background: var(--lagoon-soft); }
.entretien-zone-tache:active { transform: scale(0.96); }
.entretien-zone-tache--rate { border-color: var(--coral); }
/* Déjà notée aujourd'hui : visible (sinon on doute de l'avoir déclarée) mais
   éteinte, pour que le doublon se voie AVANT le clic. */
.entretien-zone-tache--deja {
  border-color: var(--line); background: var(--foam);
  color: var(--muted); cursor: default; opacity: 0.75;
}

/* La récompense se VOIT : elle monte et s'efface au-dessus de la barre. */
.entretien-zone-bravo {
  position: absolute; right: 0.5rem; top: -0.2rem;
  padding: 1px 8px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-deep);
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  animation: zone-bravo 1.8s ease-out forwards;
  pointer-events: none;
}
@keyframes zone-bravo {
  0%   { opacity: 0; transform: translateY(6px); }
  15%  { opacity: 1; transform: translateY(-2px); }
  75%  { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-14px); }
}
/* La jauge accompagne le geste au lieu de sauter. */
.entretien-zone-bar-fill { transition: width 0.45s ease; }

@media (max-width: 560px) {
  .entretien-zone-taches { margin-left: 0; }
}

/* L'ÉTOILE remplace la ligne « 🌟 gros gain dispo » (19/08/2026), qui
   s'insérait SOUS la barre et décalait toutes les jauges suivantes. Elle vit
   maintenant à côté du nom de la zone : même information, zéro déformation. */
.entretien-zone-etoile { font-size: 0.9em; margin-left: 0.25rem; }

.entretien-go-card { text-align: center; }
.entretien-go-form { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.entretien-duree-choice { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.entretien-duree-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.85rem; color: var(--muted); background: var(--shell); cursor: pointer;
}
.entretien-duree-chip:has(input:checked) { background: var(--lagoon-soft); color: var(--lagoon-deep); border-color: var(--lagoon); }
.entretien-duree-chip input { accent-color: var(--lagoon); }

.entretien-go-btn {
  display: inline-block;
  padding: 1.1rem 2.6rem;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--lagoon), var(--gold-deep));
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform 0.15s ease;
}
.entretien-go-btn:hover { transform: scale(1.04); }

/* ---- Entretien : « J'ai fait un truc moi-même » (déclaration après coup).
   Lien volontairement DISCRET sous les jauges ; le panneau (caché par
   défaut) est le seul endroit du board où des noms de tâches apparaissent,
   après un geste volontaire — cf. entretien.js bindDeclarerPanel(). ------ */
.entretien-declarer { text-align: center; margin: -0.4rem 0 1.1rem; }
.entretien-declarer-toggle {
  background: none; border: none; cursor: pointer;
  font-size: 0.85rem; color: var(--muted); text-decoration: underline dotted;
  padding: 0.2rem 0.5rem;
}
.entretien-declarer-toggle:hover { color: var(--lagoon-deep); }
.entretien-declarer-panel { text-align: left; margin-top: 0.7rem; }
.entretien-declarer-taches { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.9rem; }
.entretien-declarer-tache { text-align: left; }
.entretien-declarer-tache-quand { color: var(--muted); font-size: 0.8rem; font-weight: 400; margin-left: 0.45rem; }
.entretien-declarer-feedback { margin: 0.9rem 0 0; font-weight: 600; color: var(--lagoon-deep); }
.entretien-declarer-libre { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.entretien-declarer-libre .courses-input { flex: 1; }

/* ---- Le geste QUAND (Task 10) : partagé Entretien + Sport (declarer-quand-*
   est un nom générique volontairement réutilisé par sport.js/board.php). --- */
.declarer-quand, .entretien-declarer-quand { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); }
.declarer-quoi, .entretien-declarer-quoi { font-weight: 600; margin: 0 0 0.6rem; }
.declarer-quand-boutons, .entretien-declarer-quand-boutons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ---- Entretien : session, la RÉVÉLATION à suspense (Task 2.2) ------------ */
.entretien-session-page { max-width: 720px; margin: 0 auto; }
.entretien-session-card { text-align: center; }
.entretien-session-intro-text, .entretien-session-loading-text { font-size: 1.1rem; color: var(--muted); }
.entretien-session-stop { margin-top: 0.6rem; display: inline-block; text-decoration: none; }

.entretien-session-zone {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.entretien-session-nom {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--abyss);
}
.entretien-session-duree { margin: 0 0 0.8rem; color: var(--muted); font-size: 1rem; }

.entretien-session-debloque {
  margin: 0 0 1rem;
  padding: 0.6rem 1rem;
  background: var(--gold-soft);
  color: var(--gold-deep);
  border-radius: var(--radius-sm);
  font-weight: 700;
  display: inline-block;
}

.entretien-session-contrainte {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border: 1px dashed var(--lagoon);
  border-radius: var(--radius-sm);
  background: var(--foam);
}
.entretien-session-contrainte-texte { margin: 0; font-weight: 600; color: var(--abyss); }
.entretien-session-record { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--muted); }
.entretien-session-chrono { margin-top: 0.6rem; display: flex; align-items: center; justify-content: center; gap: 0.7rem; }
.entretien-session-chrono-value {
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--lagoon-deep);
  min-width: 3.2rem;
}

.entretien-session-checklist-btn { margin-bottom: 1rem; display: inline-block; text-decoration: none; }

.entretien-session-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.entretien-session-actions a { text-decoration: none; display: inline-flex; align-items: center; }

.entretien-session-points { font-family: var(--display); font-size: 1.8rem; color: var(--lagoon-deep); margin: 0.4rem 0; }
.entretien-session-menage { font-weight: 700; color: var(--gold-deep); margin: 0 0 0.8rem; }
.entretien-session-freinage p, .entretien-session-mystere { margin: 0.6rem 0 0; }
.entretien-session-freinage, .entretien-session-mystere { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.entretien-session-mystere a, .entretien-session-freinage a { text-decoration: none; }

/* ---- Entretien : checklist pas-à-pas (/entretien/check, Task 4.1) --------
   Ton positif : les items cochés passent en lagon doux, jamais de rouge ni
   de compteur culpabilisant. « pas maintenant » = simple lien discret. ---- */
.entretien-check-page { max-width: 720px; margin: 0 auto; }
.entretien-check-titre {
  margin: 0 0 0.7rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--abyss);
}
.entretien-check-kit {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  background: var(--gold-soft);
  color: var(--gold-deep);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.entretien-check-items { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.entretien-check-item-label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line, #dfe7ea);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.entretien-check-item-label input[type="checkbox"] { accent-color: var(--lagoon); margin-top: 0.2rem; flex: 0 0 auto; }
.entretien-check-item-fait .entretien-check-item-label {
  background: var(--lagoon-soft);
  border-color: var(--lagoon);
}
.entretien-check-item-fait .entretien-check-item-texte { color: var(--lagoon-deep); }
.entretien-check-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.entretien-check-done:disabled { opacity: 0.45; cursor: not-allowed; }
.entretien-check-later { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.entretien-check-later:hover { color: var(--abyss); }
.entretien-check-feedback,
.entretien-session-feedback { margin: 0 0 0.9rem; font-weight: 700; color: var(--lagoon-deep); }

/* ---- Entretien : carnet (/entretien/carnet, Task 6.1) --------------------
   Mémoire du temps : ton factuel, AUCUN rouge / vocabulaire de retard —
   « il y a N j » est une info (lagon), « jamais encore » un simple gris. */
.entretien-carnet-zone { margin: 1rem 0 0.4rem; font-size: 0.95rem; color: var(--abyss); }
.entretien-carnet-memoire { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.entretien-carnet-memoire-row {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.35rem 0.5rem; border-radius: 8px; background: var(--lagoon-soft);
}
.entretien-carnet-nom { flex: 1 1 auto; min-width: 8rem; }
.entretien-carnet-ilya { font-weight: 700; color: var(--lagoon-deep); white-space: nowrap; }
.entretien-carnet-jamais { font-weight: 400; color: var(--muted); font-style: italic; }
.entretien-carnet-record { font-size: 0.85rem; color: var(--gold-deep); white-space: nowrap; }
.entretien-carnet-libre { font-size: 0.78rem; color: var(--muted); font-style: italic; }

/* ---- Accessibilité : mouvement réduit ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Plongée (Task 2.2) — assistant de paramètres + écran sortie (3 checklists).
   Réutilise la palette lagon/corail. Gros boutons/toggles tactiles pour
   l'assistant, onglets + progression + bandeaux sereins pour l'écran sortie.
   ========================================================================== */

/* ---- Assistant ---- */
.plongee-field { margin: 0 0 1.4rem; border: none; padding: 0; }
.plongee-field-label { display: block; font-weight: 600; color: var(--ink); margin: 0 0 0.5rem; }
.plongee-choix { border: none; }
.plongee-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plongee-choice-btn {
  flex: 1 1 8rem; display: flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.6rem 0.9rem; text-align: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--shell); color: var(--ink); font-weight: 500;
  transition: background 0.12s, border-color 0.12s;
}
.plongee-choice-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.plongee-choice-btn:hover { border-color: var(--lagoon); }
.plongee-choice-btn:has(input:checked) { background: var(--lagoon); border-color: var(--lagoon); color: #fff; }
.plongee-choice-btn:has(input:focus-visible) { outline: 2px solid var(--lagoon-deep); outline-offset: 2px; }

.plongee-toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plongee-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
  min-height: 2.8rem; padding: 0.5rem 0.85rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--shell); color: var(--ink); font-weight: 500;
  transition: background 0.12s, border-color 0.12s;
}
.plongee-toggle input { width: 1.15rem; height: 1.15rem; accent-color: var(--lagoon); }
.plongee-toggle:has(input:checked) { background: var(--lagoon-soft); border-color: var(--lagoon); }
.plongee-douche { margin-top: 0.75rem; }

.plongee-assistant-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.2rem; }
.plongee-go-btn { min-height: 3rem; font-size: 1.05rem; }
.plongee-assistant-feedback, .plongee-sortie-feedback {
  margin: 0 0 1rem; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm);
  background: var(--coral-soft); color: var(--coral-deep); font-weight: 500;
}

/* ---- Badges (index + sortie) ---- */
.plongee-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.plongee-badge {
  display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; font-size: 0.85rem;
  font-weight: 500; border-radius: 999px; background: var(--foam); color: var(--muted);
}
.plongee-badge-confirmer { background: var(--gold-soft); color: var(--gold-deep); }

/* ---- Index : cartes des sorties ---- */
.plongee-index-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.plongee-index-tete h2 { margin: 0; }
.plongee-sortie-carte { display: block; text-decoration: none; color: inherit; transition: box-shadow 0.12s, transform 0.12s; }
.plongee-sortie-carte:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.plongee-sortie-carte-tete { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.plongee-sortie-date { font-weight: 600; color: var(--lagoon-deep); text-transform: capitalize; }
.plongee-sortie-titre-inline { font-family: var(--display); font-size: 1.15rem; color: var(--ink); }
.plongee-sortie-prog { font-size: 0.85rem; color: var(--muted); }

/* ---- Index : compteur doux + historique replié (Task 4.1) ---- */
.plongee-compteur-doux {
  margin: 0.6rem 0 0.3rem; text-align: center; font-weight: 600; color: var(--lagoon-deep);
}
.plongee-historique { margin-top: 0.5rem; }
.plongee-historique > summary {
  cursor: pointer; padding: 0.5rem 0; font-weight: 600; color: var(--muted); list-style-position: inside;
}
.plongee-historique[open] > summary { color: var(--ink); }
.plongee-historique-intro { margin: 0.2rem 0 0.6rem; font-size: 0.85rem; color: var(--muted); }
.plongee-sortie-passee { opacity: 0.82; }
.plongee-sortie-passee:hover { opacity: 1; }

/* ---- Progression ---- */
.plongee-progress { height: 0.5rem; border-radius: 999px; background: var(--track); overflow: hidden; margin: 0.6rem 0 0.3rem; }
.plongee-progress-bar { height: 100%; background: var(--lagoon); border-radius: 999px; transition: width 0.2s ease; }

/* ---- Écran sortie : entête ---- */
.plongee-sortie-entete-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.plongee-sortie-entete .plongee-sortie-titre { margin: 0.15rem 0 0; }
.plongee-modifier { flex: 0 0 auto; text-decoration: none; }

/* ---- Onglets ---- */
.plongee-tabs { display: flex; gap: 0.4rem; margin: 0.5rem 0 1rem; flex-wrap: wrap; }
.plongee-tab {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.8rem; padding: 0.5rem 0.8rem; cursor: pointer; font-weight: 600;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--shell); color: var(--muted);
}
.plongee-tab-here { background: var(--abyss); border-color: var(--abyss); color: #fff; }
.plongee-tab-compteur { font-size: 0.8rem; font-weight: 500; opacity: 0.85; font-variant-numeric: tabular-nums; }

/* ---- Panneaux + items ---- */
.plongee-panneau-cachee { display: none; }
.plongee-banner {
  margin: 0.4rem 0 1rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
  background: var(--lagoon-soft); color: var(--lagoon-deep); font-weight: 600;
}
.plongee-sac { margin: 0 0 1.1rem; }
.plongee-sac-titre { margin: 0 0 0.5rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.plongee-items { display: flex; flex-direction: column; gap: 0.15rem; }
.plongee-check-item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.5rem; cursor: pointer;
  border-radius: var(--radius-sm);
}
.plongee-check-item:hover { background: var(--foam); }
.plongee-check { width: 1.3rem; height: 1.3rem; accent-color: var(--lagoon); flex: 0 0 auto; }
.plongee-check-libelle { color: var(--ink); }
.plongee-check:checked + .plongee-check-libelle { color: var(--muted); text-decoration: line-through; }

.plongee-optionnels { margin: 0.6rem 0 0; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); background: var(--foam); opacity: 0.85; }
.plongee-optionnels-titre { margin: 0 0 0.2rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.plongee-check-optionnel .plongee-check-libelle { color: var(--muted); font-style: italic; }

.plongee-sortie-pied { text-align: center; }
.plongee-ignorer { background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 0.9rem; padding: 0.4rem; }
.plongee-ignorer:hover { color: var(--coral-deep); }

/* ---- Widget Météo (La Une) — carte verticale, colonne droite, palette lagon */
.meteo {
  margin: 0 0 1.2rem;
  padding: 1rem 1.05rem 0.9rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.85rem;
}
.meteo-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem; flex-wrap: wrap;
}
.meteo-head-label {
  font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--abyss);
}
.meteo-perime {
  font-size: 0.7rem; color: var(--muted); font-style: italic; white-space: nowrap;
}
/* Aujourd'hui, en grand et bien lisible. */
.meteo-today {
  display: flex; flex-direction: column; gap: 0.65rem;
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius-sm);
  background: var(--lagoon-soft);
}
.meteo-today-head { display: flex; align-items: center; gap: 0.85rem; }
.meteo-today-emoji { font-size: 3rem; line-height: 1; }
.meteo-today-main { display: flex; flex-direction: column; gap: 0.05rem; }
.meteo-today-temp {
  font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1;
  color: var(--abyss); font-variant-numeric: tabular-nums;
}
.meteo-today-desc {
  color: var(--lagoon-deep); font-size: 1rem; font-weight: 600; line-height: 1.15;
}
.meteo-today-desc::first-letter { text-transform: uppercase; }
.meteo-today-when {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.meteo-today-metrics { display: flex; flex-direction: column; gap: 0.32rem; }
.meteo-metric {
  font-size: 0.92rem; color: var(--abyss-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Frise des jours à venir : empilée verticalement, une ligne claire par jour. */
.meteo-frise { display: flex; flex-direction: column; gap: 0.35rem; }
.meteo-jour {
  display: grid;
  grid-template-columns: 2.4rem 1.6rem minmax(3.1rem, auto) 1fr;
  align-items: center; gap: 0.35rem 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--foam);
}
.meteo-jour-nom {
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--lagoon-deep);
}
.meteo-jour-emoji { font-size: 1.5rem; line-height: 1; text-align: center; }
.meteo-jour-temps { display: flex; gap: 0.3rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.meteo-jour-max { font-weight: 700; color: var(--abyss); font-size: 0.98rem; }
.meteo-jour-min { font-size: 0.8rem; color: var(--muted); }
.meteo-jour-lines {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.05rem 0.55rem;
}
.meteo-jour-line {
  font-size: 0.72rem; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Pluie du jour, en clair (jour 0) : phrase lisible + proba discrète. */
.meteo-pluie-auj { font-weight: 600; color: var(--abyss-2); }
.meteo-pluie-proba { font-weight: 400; color: var(--muted); }
/* Code couleur — force du vent (en nœuds). Lisible sur foam / lagoon-soft. */
.meteo-vent-orange { color: #C56A00; font-weight: 700; }
.meteo-vent-rouge { color: #C62020; font-weight: 700; }
.meteo-vent-violet { color: #7B2FC4; font-weight: 700; }
/* Code couleur — houle : rouge > 1.8 m, écarlate (crimson) > 2.5 m. */
.meteo-houle-rouge { color: #C62020; font-weight: 700; }
.meteo-houle-ecarlate { color: #9E0C39; font-weight: 800; }
/* Code couleur — direction du vent hors alizés (E/S/SE) : gras + bleu. */
.meteo-dir-bleuclair { color: #1F8FD6; font-weight: 700; }
.meteo-dir-bleufonce { color: #123E92; font-weight: 700; }
/* « voir aussi » : liens externes discrets sous la frise. */
.meteo-liens {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}
.meteo-liens-label {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.meteo-liens a { font-size: 0.8rem; color: var(--lagoon-deep); text-decoration: none; white-space: nowrap; }
.meteo-liens a:hover { text-decoration: underline; }

/* ==========================================================================
   Module 💪 Bouger (spec 2026-07-12-sport-design, Tranche 3). Palette lagon,
   sobre. Réutilise .courses-page / .courses-card / .courses-subnav /
   .courses-btn de l'existant ; ne définit que le spécifique Sport.
   ========================================================================== */

/* ---- Carte « proposition du jour » sur La Une (motif nudge) ---- */
.sport-nudge-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  background: var(--lagoon-soft);
  border: 1px solid var(--lagoon);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: opacity 0.2s ease;
}
.sport-nudge-strip.sport-nudge-hidden { display: none; }
.sport-nudge-body { display: flex; flex-direction: column; gap: 0.2rem; }
.sport-nudge-link { text-decoration: none; display: flex; flex-direction: column; gap: 0.15rem; }
.sport-nudge-title {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--abyss);
}
.sport-nudge-actions { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
.sport-nudge-go-btn {
  font-family: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--lagoon-deep); background: var(--lagoon); color: #fff;
}
.sport-nudge-go-btn:hover { background: var(--lagoon-deep); }
.sport-nudge-dismiss-btn {
  font-family: inherit; font-size: 0.78rem; color: var(--muted); cursor: pointer;
  padding: 0.3rem 0.4rem; border: none; background: none; text-decoration: underline;
}
.sport-nudge-dismiss-btn:hover { color: var(--abyss); }

/* ---- Check-in SURPRISE 🌱 (refonte Santé, Tranche 3) : micro-question du jour ---- */
.checkin-strip {
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  background: var(--foam);
  border: 1px solid var(--lagoon);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: opacity 0.2s ease;
}
.checkin-strip.checkin-hidden { display: none; }
.checkin-body { display: flex; flex-direction: column; gap: 0.2rem; }
.checkin-kicker { font-size: 0.78rem; color: var(--lagoon-deep); font-weight: 600; letter-spacing: 0.02em; }
.checkin-question {
  font-family: var(--display); font-weight: 600; font-size: 1.08rem; color: var(--abyss);
}
.checkin-scale { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.checkin-choice {
  font-family: inherit; font-size: 0.88rem; cursor: pointer;
  padding: 0.45rem 0.85rem; border-radius: var(--radius-sm);
  border: 1px solid var(--lagoon); background: var(--shell); color: var(--abyss);
}
.checkin-choice:hover { background: var(--lagoon-soft); }
.checkin-choice:disabled { opacity: 0.5; cursor: default; }
.checkin-ack { font-size: 0.95rem; color: var(--lagoon-deep); font-weight: 600; }
/* « On regarde ça 30 s ? » : la proposition de CREUSER quand la réponse bouge
   (refonte T2). Un lien, jamais une injonction — elle décide. */
.checkin-creuser {
  align-self: flex-start; padding: 0.4rem 0.9rem; border-radius: 999px;
  background: var(--lagoon-soft); color: var(--lagoon-deep);
  font-size: 0.88rem; font-weight: 700; text-decoration: none;
}
.checkin-creuser:hover { background: var(--lagoon); color: #fff; }
.checkin-actions { display: flex; align-items: center; }
.checkin-dismiss-btn {
  font-family: inherit; font-size: 0.78rem; color: var(--muted); cursor: pointer;
  padding: 0.2rem 0.3rem; border: none; background: none; text-decoration: underline;
}
.checkin-dismiss-btn:hover { color: var(--abyss); }

/* ---- Onglet Bouger : la proposition du jour ---- */
.sport-msg {
  margin: 0 0 1rem; padding: 0.7rem 0.9rem;
  background: var(--lagoon-soft); border: 1px solid var(--lagoon);
  border-radius: var(--radius-sm); color: var(--abyss); font-weight: 500;
}
.sport-defi-badge {
  display: inline-block; margin: 0 0 0.5rem; padding: 0.2rem 0.6rem;
  background: var(--gold-soft); border: 1px solid var(--gold);
  border-radius: 999px; font-weight: 700; font-size: 0.85rem; color: var(--abyss);
}
.sport-titre {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; margin: 0 0 0.3rem; color: var(--abyss);
}
.sport-duree { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.8rem; }
.sport-detail { margin: 0 0 1rem; }
.sport-exos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.sport-exo {
  padding: 0.5rem 0.75rem; background: var(--foam);
  border-radius: var(--radius-sm); font-size: 0.95rem; color: var(--ink);
}
.sport-pourquoi {
  margin: 0 0 1.2rem; padding: 0.7rem 0.9rem;
  background: var(--gold-soft); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); color: var(--abyss); font-style: italic;
}
.sport-actions, .sport-surprise-secondary, .sport-fb-actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
}
.sport-surprise {
  text-align: center; padding: 1rem 0;
}
.sport-surprise-resume {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--abyss); margin: 0 0 1rem;
}
.sport-tente-btn { font-size: 1.1rem; padding: 0.7rem 1.6rem; }
.sport-surprise-secondary { justify-content: center; margin-top: 1rem; }
.sport-repos, .sport-vide { text-align: center; padding: 1.2rem 0; }
.sport-repos-titre {
  font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin: 0 0 0.5rem; color: var(--abyss);
}
.sport-repos-texte { color: var(--muted); margin: 0 0 1rem; }
/* Récap du retour déjà donné (au lieu de re-demander le formulaire) + le lien
   discret pour se corriger. */
.sport-repos-recap {
  margin: 0 0 1rem; padding: 0.7rem 1rem; border-radius: 10px;
  background: var(--shell); border: 1px solid var(--line); color: var(--abyss);
}
.sport-lien-discret {
  background: none; border: 0; padding: 0; color: var(--muted);
  font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer;
}
.sport-lien-discret:hover { color: var(--lagoon-deep); }

/* ---- Feedback ---- */
.sport-feedback {
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1rem;
}
.sport-feedback h2 {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 0; color: var(--abyss);
}
.sport-fb-group { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.sport-fb-group legend { font-weight: 600; font-size: 0.9rem; color: var(--muted); padding: 0; margin: 0 0 0.3rem; width: 100%; }
.sport-fb-group label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.sport-fb-note { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--muted); }
.sport-fb-note textarea {
  font-family: inherit; font-size: 0.95rem; padding: 0.5rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); resize: vertical; color: var(--ink);
}

/* ---- Journal (Task 7 : une ligne par bloc, groupée par jour) ---- */
.sport-histo-resume { color: var(--muted); margin: 0 0 1rem; }
.sport-histo-jour + .sport-histo-jour { margin-top: 1.1rem; }
.sport-histo-date { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.sport-histo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.sport-histo-item {
  padding: 0.7rem 0.9rem; background: var(--foam);
  border-radius: var(--radius-sm); border-left: 3px solid var(--lagoon);
}
.sport-histo-row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: baseline; font-size: 0.85rem; }
.sport-histo-heure { color: var(--muted); }
.sport-histo-type { font-weight: 600; color: var(--abyss); }
.sport-histo-duree { color: var(--muted); }
.sport-histo-points { margin-left: auto; font-size: 0.85rem; color: var(--muted); }
.sport-histo-libelle { font-weight: 500; margin-top: 0.2rem; color: var(--ink); }

/* ---- Réglages ---- */
.sport-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.sport-baie-auto { margin: 0 0 0.6rem; }
.sport-baie-auto-etat {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--foam, #eef4f7);
  font-size: 0.9rem;
  color: var(--abyss);
}

/* ---- Bandeau de notifications in-app (brique générique) ------------------ */
.vigie-notifs {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px clamp(12px, 4vw, 28px);
}
.vigie-notif {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  box-shadow: var(--shadow);
}
.vigie-notif-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
a.vigie-notif-corps:hover .vigie-notif-titre { text-decoration: underline; }
.vigie-notif-titre { font-weight: 600; }
.vigie-notif-texte { color: var(--muted); font-size: 0.92rem; }
.vigie-notif-x {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.vigie-notif-x:hover { background: rgba(11, 43, 54, 0.08); color: var(--ink); }

/* === Documentation (/doc) : index + recherche + page ==================== */
.doc-page { display: flex; flex-direction: column; gap: 14px; }
.doc-empty { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.doc-empty code {
  background: var(--sand); padding: 1px 6px; border-radius: var(--radius-sm);
  font-size: 0.88em;
}
.doc-search {
  width: 100%; box-sizing: border-box; margin: 4px 0 14px;
  padding: 11px 14px; font-size: 1rem; color: var(--ink);
  background: var(--foam); border: 1px solid var(--line);
  border-radius: var(--radius-sm); outline: none;
}
.doc-search:focus { border-color: var(--lagoon); box-shadow: 0 0 0 3px var(--lagoon-soft); }
.doc-noresult { color: var(--muted); font-size: 0.95rem; margin: 0 0 8px; }
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.doc-item[hidden] { display: none; }
.doc-item-link {
  display: block; text-decoration: none; color: inherit;
  padding: 12px 14px; background: var(--shell); border: 1px solid var(--line);
  border-radius: var(--radius-sm); transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.doc-item-link:hover { border-color: var(--lagoon); background: var(--foam); }
.doc-item-link:active { transform: translateY(1px); }
.doc-item-title { display: block; font-weight: 700; color: var(--lagoon-deep); }
.doc-item-excerpt { display: block; margin-top: 3px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.doc-article .doc-html { font-size: 0.95rem; line-height: 1.65; color: var(--ink); }
.doc-article .doc-html img { max-width: 100%; height: auto; }
.doc-back { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.doc-back a { color: var(--lagoon-deep); text-decoration: none; font-weight: 600; }
.doc-back a:hover { text-decoration: underline; }
/* Doc HTML : page auto-suffisante isolée dans une iframe (voir doc/page.php). */
.doc-frame-wrap {
  background: var(--paper, #fff); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.doc-frame { display: block; width: 100%; min-height: 60vh; border: 0; }

/* === En attente : bloc calme (bas) + rappel escaladé (haut) ============= */
/* Rappel escaladé en tête : une bande d'attention CHAUDE (pas une alarme rouge
   qui clignote) — la relance est due, on te le rappelle avec douceur. */
.en-attente-escalade {
  background: var(--coral-soft, #fdeceb);
  border: 1px solid var(--coral, #ff6b6b);
  border-left: 4px solid var(--coral, #ff6b6b);
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 10px 0;
}
.en-attente-escalade-titre {
  font-weight: 700; color: var(--coral-deep, #c0392b); font-size: 0.9rem; margin-bottom: 8px;
}
.en-attente-escalade-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.en-attente-esc-item { display: flex; flex-direction: column; gap: 6px; }
.en-attente-esc-item + .en-attente-esc-item { border-top: 1px solid var(--coral, #ff6b6b); padding-top: 10px; }
.en-attente-esc-label { font-weight: 600; color: var(--ink); }
.en-attente-esc-meta { display: block; color: var(--muted); font-size: 0.85rem; }
.en-attente-esc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.en-attente-relance-lbl { font-size: 0.82rem; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }

/* Bloc calme du bas */
.card-en-attente .en-attente-hint { color: var(--muted); font-size: 0.88rem; margin: 0 0 12px; line-height: 1.5; }
.en-attente-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.en-attente-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--shell); border: 1px solid var(--line);
  border-radius: var(--radius-sm); flex-wrap: nowrap;
}
.en-attente-item--echue { border-color: var(--coral, #ff6b6b); background: var(--coral-soft, #fdeceb); }
.en-attente-main { min-width: 0; flex: 1 1 auto; }
.en-attente-label { display: block; font-weight: 600; color: var(--ink); }
.en-attente-meta { display: block; color: var(--muted); font-size: 0.83rem; margin-top: 2px; }
.en-attente-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.en-attente-date-lbl { font-size: 0.8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
/* .en-attente-date est désormais le SPAN enveloppe du widget frDate (bouton
   « reporter ») — aucune boîte : pas de fond, pas de bordure, pas de padding.
   (L'ancien style de boîte grise venait de la <input type=date> remplacée.) */
.en-attente-date { border: 0; background: none; padding: 0; }
.en-attente-resolve {
  font: inherit; font-size: 0.82rem; cursor: pointer; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--foam); color: var(--ink);
}
.en-attente-resolve:hover { border-color: var(--lagoon); color: var(--lagoon-deep); }
/* Groupage par domaine (spec §6), même intitulé que le vrac. */
.en-attente-groupes { display: flex; flex-direction: column; gap: 14px; }
.en-attente-sans-projet { margin-top: 14px; }
.en-attente-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.en-attente-add input[type="text"] { flex: 1 1 200px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--foam); color: var(--ink); font: inherit; }
.en-attente-add select { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--foam); color: var(--ink); font: inherit; max-width: 100%; }
.en-attente-add input[type="date"] { padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--foam); color: var(--ink); font: inherit; }
.en-attente-add button { padding: 8px 14px; border: 1px solid var(--lagoon); background: var(--lagoon); color: #fff; border-radius: var(--radius-sm); font: inherit; cursor: pointer; }
.en-attente-add button:hover { background: var(--lagoon-deep); }

/* === Sélecteur de date maison (JJ/MM/AAAA, calendrier lundi-first FR) ==== */
.frdate { position: relative; display: inline-block; }
.frdate-text {
  font: inherit; font-size: 0.82rem; padding: 4px 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--foam); color: var(--ink); min-width: 8.5em; box-sizing: border-box;
}
.frdate-text:focus { outline: none; border-color: var(--lagoon); box-shadow: 0 0 0 3px var(--lagoon-soft); }
.frdate-pop {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
  background: var(--paper, #fff); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lift, 0 8px 24px rgba(0,0,0,.18));
  padding: 8px; width: 15.5rem;
}
.frdate-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.frdate-title { font-weight: 700; font-size: 0.85rem; color: var(--ink); text-transform: capitalize; }
.frdate-nav {
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; width: 26px; height: 26px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--foam); color: var(--ink);
}
.frdate-nav:hover { border-color: var(--lagoon); color: var(--lagoon-deep); }
.frdate-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.frdate-dow { text-align: center; font-size: 0.68rem; color: var(--muted); padding: 2px 0; text-transform: uppercase; }
.frdate-empty { visibility: hidden; }
.frdate-day {
  font: inherit; font-size: 0.8rem; cursor: pointer; aspect-ratio: 1; padding: 0;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink);
}
.frdate-day:hover { background: var(--foam); border-color: var(--line); }
.frdate-day--sel { background: var(--lagoon); color: #fff; font-weight: 700; }
.frdate-day--sel:hover { background: var(--lagoon-deep); border-color: var(--lagoon-deep); }
/* Dans le formulaire d'ajout, le champ date s'aligne sur la hauteur des inputs. */
.en-attente-add .frdate-text { padding: 8px 10px; min-width: 12em; }

/* Reporter : petit bouton qui ouvre le calendrier (au lieu d'un champ visible). */
.frdate-btn {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 4px 10px;
  border: 1px solid var(--lagoon); border-radius: 999px;
  background: var(--lagoon-soft); color: var(--lagoon-deep);
}
.frdate-btn:hover { background: var(--lagoon); color: #fff; border-color: var(--lagoon); }
/* Dans les lignes (actions à droite), le calendrier s'ouvre ancré à DROITE
   pour ne pas déborder hors de l'écran. */
.en-attente-actions .frdate-pop, .en-attente-esc-actions .frdate-pop { left: auto; right: 0; }

/* Week-end (samedi/dimanche) mis en évidence dans la frise météo : fond doux
   doré + petit liseré à gauche, pour repérer le week-end d'un coup d'œil. */
.meteo-jour--weekend {
  background: var(--gold-soft, #fbf1d6);
  box-shadow: inset 3px 0 0 var(--gold-deep, #c8992a);
}
.meteo-jour--weekend .meteo-jour-nom { color: var(--gold-deep, #a8801f); }

/* ---- Intégration en panne (agenda injoignable…) -----------------------------
   Tout en haut de La Une. Registre AVERTISSEMENT, pas alarme : ce n'est pas une
   urgence de santé, c'est « ce que tu lis est peut-être faux ». Ambre, jamais
   rouge (le rouge est réservé au corps, cf. le radar Santé). */
.integration-ko {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  border-radius: 12px;
  background: var(--gold-soft, #fbf1d6);
  border: 1px solid var(--gold-deep, #c8992a);
  color: #6b5310;
  line-height: 1.45;
}
.integration-ko-icone { flex: 0 0 auto; font-size: 1.1rem; }
.integration-ko-texte { flex: 1 1 auto; font-size: .93rem; }
.integration-ko-texte strong { display: block; margin-bottom: .15rem; }
.integration-ko-detail {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .4rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, .06);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82em;
  opacity: .85;
}

/* ===== Atelier : cycle de vie des modules (fiche projet pilotis) ===== */
.atelier-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.atelier-board-head h2 { margin: 0; }
.atelier-board-meta { color: var(--muted); font-size: 0.85rem; }
.atelier-board-gauge { margin: 10px 0 16px; }

/* Pipeline : une colonne par état, les modules avancent de gauche à droite. */
.atelier-pipeline { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.atelier-col { background: var(--foam); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; min-height: 72px; }
.atelier-col-done { background: var(--lagoon-soft); border-color: var(--lagoon-deep); }
.atelier-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; margin-bottom: 6px; }
.atelier-col-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.atelier-col-done .atelier-col-title { color: var(--lagoon-deep); }
.atelier-col-count { font-size: 0.72rem; font-weight: 700; color: var(--ink); background: var(--shell); border-radius: 999px; padding: 0 6px; }
.atelier-col-chips { display: flex; flex-direction: column; gap: 4px; }
.atelier-chip { display: block; font-size: 0.78rem; background: var(--shell); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atelier-chip:hover { border-color: var(--lagoon-deep); color: var(--lagoon-deep); }
@media (max-width: 900px) { .atelier-pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .atelier-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Liste triée par complétude (finis en bas) : une barre par module. */
.atelier-list { display: flex; flex-direction: column; gap: 6px; }
.atelier-row { display: grid; grid-template-columns: minmax(110px, 180px) 1fr 46px 92px; align-items: center; gap: 10px; padding: 4px 8px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.atelier-row:hover { background: var(--foam); }
.atelier-row-done { opacity: 0.55; }
.atelier-row-slug { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atelier-row-bar { display: block; height: 10px; }
.atelier-row-bar .bar-fill { display: block; }
.atelier-row-count { font-size: 0.78rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.atelier-state { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 999px; padding: 2px 8px; text-align: center; }
.atelier-state-idee { background: var(--sand); color: #7A6A48; }
.atelier-state-cadrage { background: var(--gold-soft); color: var(--gold-deep); }
.atelier-state-code { background: var(--coral-soft); color: var(--coral-deep); }
.atelier-state-cloture { background: #E3E9F5; color: #4A5E8A; }
.atelier-state-vitrine { background: var(--lagoon-soft); color: var(--lagoon-deep); }
.atelier-state-commercial { background: var(--abyss-2); color: var(--foam); }
.atelier-state-fini { background: var(--lagoon-deep); color: #fff; }
@media (max-width: 560px) { .atelier-row { grid-template-columns: minmax(90px, 1fr) 1fr 40px; } .atelier-row .atelier-state { display: none; } }

/* Étape cochée par la machine (audit atelier) */
.project-step-machine { font-size: 0.8em; opacity: 0.7; cursor: help; }

/* ---- LE LOT (chantier B) : la série finie du jour, en tête de La Une -------
   Le bloc le plus lisible de la page : c'est lui qui répond à « je fais quoi,
   là ». Format et mode annoncés en clair au-dessus des éléments, un par
   ligne, cases larges (utilisable debout, au téléphone). Aucune couleur
   d'alerte, aucun rouge, aucun compte à rebours : rien ici ne doit ressembler
   à une note ni à un retard. */
/* ---- LE LINGE : une carte qui n'existe que tant qu'il y a du linge ------- */
/* Sobre à dessein : ce n'est pas une alerte, c'est un pense-bête qui attend.
   Elle ne se teinte (corail) qu'au-delà de 24 h de séchage, le seul moment où
   quelque chose ne va pas — le reste du temps, un cadre calme. */
.card-linge {
  display: flex; flex-direction: column; gap: 0.6rem;
  align-items: flex-start;
  border-color: var(--gold);
  background: var(--gold-soft);
}
.card-linge--alerte { border-color: var(--coral); background: var(--coral-soft, #fdeceb); }
.card-linge h2 { margin: 0; }
.linge-inner { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; width: 100%; }
.linge-phrase { margin: 0; color: var(--muted); }
/* Un seul bouton, large et franc : c'est un geste qu'on fait les mains
   encore mouillées, souvent d'une main. */
.linge-btn {
  padding: 0.6rem 1.4rem;
  font-family: var(--display); font-size: 1rem; font-weight: 600;
  color: var(--shell); background: var(--abyss);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.linge-btn:hover { background: var(--lagoon-deep); }
.linge-btn:disabled { opacity: 0.6; cursor: default; }
.linge-erreur { margin: 0; color: var(--coral, #ff6b6b); font-size: 0.9rem; }

.card-lot { margin: 0 0 1.2rem; border-color: var(--lagoon); background: linear-gradient(180deg, var(--shell) 0%, var(--foam) 100%); }
.card-lot h2::before { background: var(--gold); }
.lot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.lot-head h2 { margin: 0 0 0.4rem; }
.lot-taille { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lot-format, .lot-mode { margin: 0.15rem 0; font-size: 0.92rem; color: var(--muted); }
.lot-format-raison, .lot-mode-raison { color: var(--ink); }
.lot-mode-nom { font-weight: 600; color: var(--lagoon-deep); }
.lot-vide, .lot-vide-elements, .lot-indispo { margin: 0.4rem 0; color: var(--muted); font-style: italic; }

/* Corriger le mode : trois boutons, jamais une question sur son ressenti. */
.lot-mode-corriger { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: 0.35rem 0 0.8rem; }
.lot-mode-corriger-label { font-size: 0.78rem; color: var(--muted); }
.lot-mode-btn {
  font-family: inherit; font-size: 0.8rem; cursor: pointer;
  padding: 0.25rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--shell); color: var(--muted);
}
.lot-mode-btn:hover { border-color: var(--lagoon); color: var(--lagoon-deep); }
.lot-mode-btn--actif { background: var(--lagoon-soft); border-color: var(--lagoon); color: var(--abyss); font-weight: 600; }
.lot-mode-btn[disabled] { opacity: 0.6; cursor: progress; }

/* Les éléments : une ligne = une chose à boucler. */
.lot-elements { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.lot-element {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
  background: var(--shell); border: 1px solid var(--line);
}
.lot-element label { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; flex: 1 1 60%; }
.lot-element input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--lagoon); flex: 0 0 auto; }
.lot-el-texte { font-size: 0.98rem; }
.lot-el-titre.done { text-decoration: line-through; color: var(--muted); }
.lot-element.done { opacity: 0.7; }
/* Le groupe : là se voit l'optimisation (« Sortie : pharmacie + poste + courses »). */
.lot-element--groupe { border-color: var(--gold); background: var(--gold-soft); }
.lot-el-contexte { font-weight: 600; color: var(--abyss); }
.lot-el-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); }
.lot-el-optim { background: var(--gold); color: var(--abyss); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.lot-el-duree, .lot-el-points { font-variant-numeric: tabular-nums; }
/* D'OU VIENT LA LIGNE : discret mais toujours la — c'est un reperage, pas une
   information a lire. Il passe en tete de la meta. */
/* LES RENDEZ-VOUS QUI RESTENT, en pied du bloc du jour. Volontairement
   SOBRE : ce n'est pas une alerte (la peur s'en charge), c'est une mesure —
   l'heure, et le temps devant. Le fond neutre et la taille réduite disent
   « information », pas « urgence ». */
.lot-rdv {
  margin-top: 0.7rem; padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 0.25rem;
}
.lot-rdv-ligne {
  margin: 0; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--muted);
}
.lot-rdv-heure { font-weight: 600; color: var(--abyss); font-variant-numeric: tabular-nums; }
.lot-rdv-titre { color: var(--ink); overflow-wrap: anywhere; }
/* Collé au titre, pas rejeté au bout de la ligne (19/08/2026) : le temps
   restant se lit AVEC le rendez-vous, pas à trois centimètres de lui. */
.lot-rdv-reste { color: var(--lagoon-deep); font-style: italic; }
/* MOINS D'UNE DEMI-HEURE : l'information change de nature. Jusque-là le
   chiffre AUTORISE à commencer autre chose ; passé ce seuil il dit qu'il est
   temps de se préparer. L'or (et non le corail, réservé à l'heure atteinte)
   marque le palier sans crier. */
.lot-rdv-ligne--bientot .lot-rdv-reste { color: var(--gold-deep); font-style: normal; font-weight: 700; }

/* L'heure atteinte pendant qu'elle regarde : le décompte franchit forcément
   zéro sous ses yeux. Corail, sans clignotement ni majuscules — c'est un
   constat, pas une sirène. */
.lot-rdv-ligne--maintenant .lot-rdv-reste { color: var(--coral, #ff6b6b); font-style: normal; font-weight: 600; }

/* La NOTE d'une ligne : pourquoi elle est là aujourd'hui. Discrète et sur sa
   propre ligne — c'est une explication, pas une alerte, et elle ne doit pas
   concurrencer le titre. */
.lot-el-note {
  flex: 1 1 100%;
  margin: 0.1rem 0 0 1.9rem;
  font-size: 0.8rem; font-style: italic; color: var(--lagoon-deep);
}

.lot-el-origine {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 8px; color: var(--muted); font-size: 0.78rem;
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Le RENVOI (le point du jour) : sa case est un reflet de ce qui s'est passé
   ailleurs, le geste vit sur l'écran d'à côté — le lien est donc l'action. */
.lot-el-lien {
  font-size: 0.82rem; padding: 0.25rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--lagoon); color: var(--lagoon-deep); text-decoration: none;
}
.lot-el-lien:hover { background: var(--lagoon-soft); }
.lot-element input[type="checkbox"][disabled] { cursor: default; }
/* Les SOUS-ÉLÉMENTS d'un groupe : « cochée d'un geste OU élément par élément »
   (spec §5.4). Sans eux, cinq corvées derrière une seule case — tout ou rien. */
.lot-sous-elements {
  list-style: none; margin: 0.35rem 0 0; padding: 0 0 0 1.7rem;
  display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 100%;
}
.lot-sous-element label { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.lot-sous-element .lot-el-titre { font-size: 0.88rem; color: var(--muted); }
.lot-sous-element input[type="checkbox"] { width: 0.95rem; height: 0.95rem; accent-color: var(--lagoon); }
.lot-sous-element.done { opacity: 0.7; }

.lot-celebration {
  margin: 0.8rem 0 0; padding: 0.6rem 0.8rem;
  background: var(--lagoon-soft); border-radius: var(--radius-sm);
  font-family: var(--display); font-size: 1.02rem; color: var(--abyss);
}
/* Un geste qui n'est pas passé : dit clairement, sans alarme — c'est la
   machine qui a raté, pas elle. */
.lot-erreur {
  margin: 0.7rem 0 0; padding: 0.5rem 0.7rem;
  background: var(--coral-soft); border: 1px solid var(--coral);
  border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--abyss);
}
.lot-actions { margin-top: 0.8rem; }
.lot-nouveau-btn {
  font-family: inherit; font-size: 0.82rem; cursor: pointer; color: var(--muted);
  padding: 0.3rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
}
.lot-nouveau-btn:hover { border-color: var(--lagoon); color: var(--lagoon-deep); }
@media (max-width: 560px) {
  .lot-element { align-items: flex-start; }
  .lot-element label { flex: 1 1 100%; }
}

/* Le bouton « faire le tri » : petite barre entre la carte du Lot et celle du
   tri (Task 13) — HORS des deux cartes exprès (cf. le gabarit), donc son
   propre conteneur plutôt que de vivre dans `.lot-actions`. */
/* « faire le tri » vit DANS la carte, en haut a droite (18/08/2026). En
   absolu parce qu'il doit rester hors de `#lot-inner`, que le JS remplace a
   chaque geste : dans `.lot-head` (qui est dedans), son ecouteur serait perdu
   au premier cochage. Les offsets reprennent le padding de `.card` pour
   s'aligner sur le contenu, et `.lot-head` se reserve la place a droite pour
   que le titre et le compteur ne passent jamais dessous. */
.card-lot { position: relative; }
.lot-tri-toggle { position: absolute; top: clamp(1rem, 2.5vw, 1.4rem); right: clamp(1rem, 2.5vw, 1.4rem); margin: 0; }
.lot-head { padding-right: 7rem; }

/* ---- LE TRI ASSISTÉ (Task 13, spec §5.8) : même langage visuel que Le
   Lot — elle prend sa place à l'écran pendant qu'il est masqué, ce n'est
   pas un second module. */
.card-tri { margin: 0 0 1.2rem; border-color: var(--lagoon); background: linear-gradient(180deg, var(--shell) 0%, var(--foam) 100%); }
.card-tri h2::before { background: var(--gold); }
.tri-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.tri-head h2 { margin: 0 0 0.4rem; }
.tri-restant { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tri-intro { margin: 0.15rem 0 0.6rem; font-size: 0.88rem; color: var(--muted); }
.tri-elements { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.tri-element {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.6rem 0.7rem; border-radius: var(--radius-sm);
  background: var(--shell); border: 1px solid var(--line);
}
.tri-el-texte { display: flex; flex-direction: column; gap: 0.1rem; }
.tri-el-titre { font-size: 0.98rem; }
.tri-el-projet { font-size: 0.78rem; color: var(--muted); }
.tri-el-controles { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.tri-priorite, .tri-echeance {
  font-family: inherit; font-size: 0.85rem; padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--foam);
}
.tri-valider-btn, .tri-passer-btn {
  font-family: inherit; font-size: 0.82rem; cursor: pointer;
  padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--line);
}
.tri-valider-btn { background: var(--lagoon-soft); color: var(--abyss); font-weight: 600; }
.tri-valider-btn:hover { border-color: var(--lagoon); }
.tri-passer-btn { background: transparent; color: var(--muted); }
.tri-passer-btn:hover { border-color: var(--lagoon); color: var(--lagoon-deep); }
.tri-vide, .tri-celebration { margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); }
.tri-vide { color: var(--muted); font-style: italic; }
.tri-celebration { background: var(--lagoon-soft); font-family: var(--display); font-size: 1.02rem; color: var(--abyss); }
.tri-erreur {
  margin: 0.7rem 0 0; padding: 0.5rem 0.7rem;
  background: var(--coral-soft); border: 1px solid var(--coral);
  border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--abyss);
}
.tri-actions { margin-top: 0.8rem; }
@media (max-width: 560px) {
  .tri-el-controles { flex-direction: column; align-items: stretch; }
}

/* ---- Le CAPTEUR (Task 10), depuis La Une : discret, PAS une alerte — c'est
   un geste de mémoire, pas un rattrapage de retard. Motif visuel des
   panneaux « J'ai fait un truc moi-même » d'Entretien/Sport. */

/* ---- L'ENVIE, DÉCLARÉE ET BORNÉE (Task 11) : le cœur affectif du
   chantier — toujours visible, jamais un panneau qui se replie derrière une
   condition. Ton chaleureux, pas un formulaire administratif. */
.card-envie { padding: 0.9rem 1.1rem; }
.envie-titre { margin: 0 0 0.7rem; font-size: 1.05rem; }
.envie-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.envie-libelle { flex: 1 1 12rem; }
.envie-borne-champ { display: flex; align-items: center; gap: 0.35rem; }
.envie-borne { width: 4.2rem; min-width: 4.2rem; text-align: center; }
.envie-borne-unite { color: var(--muted); font-size: 0.85rem; }
.envie-en-cours { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; }
.envie-en-cours-texte { margin: 0; }
.envie-en-cours-libelle { color: var(--lagoon-deep); }
.envie-en-cours-borne { color: var(--muted); font-size: 0.85rem; }
.envie-reponse { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed var(--line); }
.envie-ok { margin: 0 0 0.4rem; font-weight: 600; color: var(--lagoon-deep); }
.envie-en-regard { margin: 0; padding-left: 1.2rem; }
.envie-en-regard li { margin: 0.2rem 0; }

/* ---- Forme : L'ÉCRAN UNIQUE `/forme` (2026-08-30) -------------------------
   Quatre blocs empilés, ordonnés par l'état du jour. Rien de décoratif : ce
   qui se FAIT est en pleine largeur, ce qui se CONSULTE est replié sous
   « plus » — une barre de sept liens permanents mettait les écrans de fond
   au même rang que le geste du jour.
   -------------------------------------------------------------------------- */
.forme-page { gap: 1.4rem; }
.forme-bloc { display: flex; flex-direction: column; gap: 0.8rem; }
.forme-bloc-titre { margin: 0; font-size: 1.05rem; }
.forme-bloc-vide,
.forme-bloc-panne,
.forme-quoi-vide { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* Le point POSÉ : une ligne, et rien de plus. Le rappeler en grand serait un
   reproche — le geste est fait. */
.forme-point-fait { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* ③ Quoi faire, maintenant — UNE proposition (`Forme\QuoiFaire`). */
.forme-quoi { display: flex; flex-direction: column; gap: 0.7rem; }
.forme-quoi-titre { margin: 0; font-size: 1.05rem; }
.forme-quoi-phrase { margin: 0; font-size: 1.05rem; }
.forme-quoi-allegement,
.forme-quoi-unseul { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* « plus » : les écrans de FOND, en tête d'écran, toujours visibles (2026-08-30
   au soir). Une seule ligne de pastilles qui défile horizontalement si elle
   déborde — discrète par la taille, jamais par la profondeur : repliée en bas
   de page, elle n'était tout simplement pas trouvée. */
.forme-plus-liens {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem 0 0.6rem;
}
.forme-plus-lien {
  white-space: nowrap;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--shell);
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ink);
}

/* Le retour, en tête de la sous-navigation des écrans secondaires. */
.forme-subnav-retour { font-weight: 600; }

/* ---- Forme : « Dire ce que j'ai fait » (tuiles + crans) -------------------
   LE composant partagé Bouger / La Une (2026-08-30). Des cibles GRANDES et
   colorées par type : le geste doit se faire au pouce, sans lire. Le second
   temps (crans, modulateur, autre date) n'apparaît qu'une fois la tuile
   choisie — deux taps pour une séance normale.
   -------------------------------------------------------------------------- */
.forme-declarer { margin-top: 1rem; }
.forme-declarer-titre { margin: 0 0 0.7rem; font-size: 1.05rem; }
/* ⚠️ DES TUILES QUI TIENNENT LEUR NOM (fix 2026-08-30). À 88 px de large et en
   carré forcé (`aspect-ratio: 1`), l'emoji mangeait la case et « Renforcement
   musculaire » se coupait en plein mot. On passe à 120 px minimum, une hauteur
   MINIMALE plutôt qu'un carré (la tuile grandit si le nom est long, au lieu de
   l'écraser) et une césure propre (`hyphens: auto`, la page est en `lang="fr"`). */
.forme-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.forme-tuile {
  min-height: 116px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: var(--shell);
  display: grid;
  place-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  padding: 10px 8px;
  text-align: center;
}
.forme-tuile[aria-pressed="true"] { border-color: var(--abyss); box-shadow: var(--shadow-lift); }
.forme-tuile-marche { background: var(--lagoon-soft); }
.forme-tuile-muscu { background: var(--coral-soft); }
.forme-tuile-nage { background: var(--foam); }
.forme-tuile-velo { background: var(--gold-soft); }
.forme-tuile-rando { background: var(--sand); }
/* `sport` est un type de catalogue à part entière (spec §3.5) — le geste que
   `typePourTitre` ne sait pas classer. Sans sa couleur, sa tuile restait
   blanche : elle avait l'air en panne à côté des cinq autres. `--track` est
   le seul jeton de la palette encore libre ici. */
.forme-tuile-sport { background: var(--track); }
.forme-tuile-emoji { font-size: 34px; line-height: 1; }
/* `hyphens: auto` coupe aux syllabes plutôt qu'au milieu d'un mot (`anywhere`
   donnait « Renforcem/ent »). ⚠️ Mais `break-word` reste NÉCESSAIRE à côté : le
   nom d'une activité est une SAISIE LIBRE, elle peut y taper un mot non
   lexical (une référence, une marque, un collage sans espace) que le
   dictionnaire de césure ne sait pas couper — sans filet, ça déborde de la
   tuile. `break-word` ne coupe que ce que la césure n'a pas su placer. */
.forme-tuile-nom {
  font-size: 0.86rem; line-height: 1.2; overflow-wrap: break-word;
  -webkit-hyphens: auto; hyphens: auto; /* Safari/iOS exige encore le préfixe */
}

@media (max-width: 480px) {
  /* Trois par ligne au téléphone : en `auto-fill` à 120 px, un écran de 360 px
     n'en tenait plus que deux et la grille devenait une colonne de pavés. */
  .forme-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.forme-declarer-suite { margin-top: 0.9rem; }
.forme-declarer-libre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.forme-declarer-menage { font-size: 0.85rem; color: var(--muted); }
.forme-declarer-quoi { margin: 0 0 0.5rem; font-weight: 600; }
.forme-crans { display: flex; flex-wrap: wrap; gap: 8px; }
.forme-crans button {
  border: 1px solid var(--line);
  background: var(--shell);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.forme-crans button[aria-pressed="true"] { background: var(--abyss); color: var(--shell); border-color: var(--abyss); }
.forme-declarer-duree { margin: 0.5rem 0; display: flex; align-items: center; gap: 0.5rem; }
.forme-declarer-duree input { max-width: 7rem; }
.forme-lien {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.forme-modulateur { margin: 0.4rem 0 0.7rem; font-size: 0.85rem; color: var(--muted); }
.forme-modulateur-choix { display: flex; gap: 8px; margin-top: 0.4rem; }
.forme-modulateur-choix button {
  border: 1px solid var(--line);
  background: var(--shell);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.forme-modulateur-choix button[aria-pressed="true"] { background: var(--lagoon-soft); border-color: var(--lagoon); }
.forme-cest-fait { margin-top: 0.3rem; }
.forme-declarer-quand { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.forme-declarer-quand input[type="date"] { max-width: 10rem; }
.forme-declarer-feedback { margin: 0.6rem 0 0; color: var(--lagoon-deep); font-weight: 600; }

.forme-journal { margin-top: 0.9rem; border-top: 1px dashed var(--line); padding-top: 0.6rem; }
.forme-journal-resume {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
}
.forme-journal-liste { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.forme-journal-liste li { margin: 0.2rem 0; }
.forme-journal-heure { color: var(--muted); }
.forme-journal-pied { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }
.forme-declarer-proposition {
  margin-top: 0.6rem;
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--gold-soft);
}
.forme-declarer-proposition p { margin: 0 0 0.5rem; }