/* ── Jetons ───────────────────────────────────────────────────────────────
   Les valeurs sombres sont declarees sous les deux portees : la media query
   couvre le reglage systeme, [data-theme] couvre le bascule explicite.       */
:root {
  color-scheme: light;
  --bg: #f7f7f5;
  --surface-1: #fcfcfb;
  --surface-2: #f0efec;
  --border: #e4e3df;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #8a8985;
  --series-1: #2a78d6;
  --grid: #e4e3df;
  /* Les taches, a part des habitudes (bleu) et des seances (vert). */
  --task: #8a4fd6;

  /* Statuts : palette fixe, jamais thematisee. Warning et serious passent
     sous 3:1 en clair — ils ne sortent JAMAIS sans libelle texte.            */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  /* Rampe sequentielle bleue, clair -> fonce quand la magnitude monte.       */
  --seq-0: #eceae6;
  --seq-1: #b7d3f6;
  --seq-2: #86b6ef;
  --seq-3: #5598e7;
  --seq-4: #2a78d6;
  --seq-5: #184f95;

  --radius: 10px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.03);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131312;
    --surface-1: #1a1a19;
    --surface-2: #232320;
    --border: #2e2e2b;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #8a8981;
    --series-1: #3987e5;
    --grid: #2e2e2b;
    --task: #b48cf0;
    /* Sur fond sombre la rampe monte vers le clair.                          */
    --seq-0: #232320;
    --seq-1: #1c5cab;
    --seq-2: #2a78d6;
    --seq-3: #5598e7;
    --seq-4: #86b6ef;
    --seq-5: #b7d3f6;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 12px rgb(0 0 0 / 0.2);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131312;
  --surface-1: #1a1a19;
  --surface-2: #232320;
  --border: #2e2e2b;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #8a8981;
  --series-1: #3987e5;
  --grid: #2e2e2b;
  --task: #b48cf0;
  --seq-0: #232320;
  --seq-1: #1c5cab;
  --seq-2: #2a78d6;
  --seq-3: #5598e7;
  --seq-4: #86b6ef;
  --seq-5: #b7d3f6;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 12px rgb(0 0 0 / 0.2);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font: 14px/1.5 ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding-block: 24px 64px; padding-left: 20px; padding-right: 20px; }

/* ── En-tete ─────────────────────────────────────────────────────────────── */
header.top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 16px; margin-bottom: 20px; }
.brand { font-size: 20px; font-weight: 640; letter-spacing: -0.01em; margin: 0; }
.brand span { color: var(--text-muted); font-weight: 400; }
.top .spacer { flex: 1 1 auto; }
.today-date { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; color: var(--text-secondary);
  background: var(--surface-1);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.badge.on .dot { background: var(--good); }

/* ── Grille ──────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }
.card {
  grid-column: span 12;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card > h2 {
  margin: 0 0 2px; font-size: 13px; font-weight: 620;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-secondary);
}
.card > .sub { margin: 0 0 14px; font-size: 12px; color: var(--text-muted); }
@media (min-width: 860px) {
  .col-7 { grid-column: span 7; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-12 { grid-column: span 12; }
}

/* ── Plan du jour ────────────────────────────────────────────────────────── */
.headline { font-size: 17px; line-height: 1.4; margin: 0 0 12px; letter-spacing: -0.01em; }
.focus { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.focus li {
  list-style: none; font-size: 12px; padding: 3px 9px;
  background: var(--surface-2); border-radius: 999px; color: var(--text-secondary);
}
.timeline { display: flex; flex-direction: column; gap: 2px; }
.slot { display: grid; grid-template-columns: 92px 3px 1fr; gap: 10px; align-items: stretch; padding: 7px 0; }
.slot time { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 12.5px; padding-top: 1px; }
.slot .rail { background: var(--series-1); border-radius: 2px; opacity: 0.85; }
.slot.training .rail { background: var(--good); }
/* Un evenement subi — cours, rendez-vous — se distingue d'un bloc propose :
   rail neutre, titre en second plan. La couleur ne porte pas le sens seule,
   la ligne du dessous dit « salle », « a distance » ou « echeance ». */
.slot.event .rail { background: var(--text-muted); opacity: 0.45; }
.slot.event .body strong { font-weight: 500; color: var(--text-secondary); }
.slot.event.remote .rail { background: repeating-linear-gradient(to bottom, var(--text-muted) 0 4px, transparent 4px 8px); opacity: 0.55; }
.slot.event.allday .rail { background: var(--warning); opacity: 0.8; }
.sources { color: var(--text-muted); }
/* Une tache se distingue d'une habitude a la couleur du rail — une teinte
   franchement a part du bleu des habitudes — mais jamais a la couleur seule :
   le bloc porte aussi une etiquette « tache » et l'echeance en clair. */
.slot.task .rail { background: var(--task); }
.slot.done .body strong { color: var(--text-muted); text-decoration: line-through; }
.slot.done .rail { opacity: 0.35; }
.slot .check { color: var(--good); text-decoration: none; display: inline-block; margin-left: 4px; }
.slot.task .body strong::before {
  content: "tâche";
  display: inline-block; margin-right: 8px; padding: 1px 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--task); border: 1px solid var(--task); border-radius: 4px; vertical-align: 1px;
}
.slot .body strong { font-weight: 560; display: block; }
.slot .body em { font-style: normal; color: var(--text-muted); font-size: 12px; }

/* ── Fraicheur (tuile + jauge) ───────────────────────────────────────────── */
.hero-num { font-size: 44px; font-weight: 620; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-unit { font-size: 15px; color: var(--text-muted); font-weight: 400; }
.meter { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 14px 0 10px; }
.meter > i { display: block; height: 100%; border-radius: 4px; }
.status-line { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 560; }
.status-line .ico { width: 14px; height: 14px; flex: none; }
.coach { margin: 12px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }

/* ── Habitudes ───────────────────────────────────────────────────────────── */
.habits { list-style: none; margin: 0; padding: 0; }
.habits li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.habits li:last-child { border-bottom: 0; }
.habits .name { flex: 1 1 auto; min-width: 0; }
.habits .name strong { font-weight: 540; display: block; }
.habits .name em { font-style: normal; font-size: 12px; color: var(--text-muted); }
.habits li.done .name strong { color: var(--text-muted); text-decoration: line-through; }
.habits li.skipped .name strong { color: var(--text-muted); }

/* ── Taches ───────────────────────────────────────────────────────────── */
.tasks .when { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
/* Le retard est en rouge ET en toutes lettres : la couleur ne porte jamais
   le sens seule. */
.tasks li.overdue .when { color: var(--critical); font-weight: 560; }
.tasks li.high .name strong::after { content: " !"; color: var(--text-secondary); font-weight: 600; }
.tasks .mins { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.row-task { display: grid; grid-template-columns: 2fr 90px 240px 120px auto; gap: 10px; align-items: end; }
.due-pair { display: grid; grid-template-columns: 96px 1fr; gap: 6px; }
/* Une tache « le » dont le jour n'est pas venu : en attente, pas a faire. */
.tasks li.waiting .name strong { color: var(--text-secondary); }
.tasks li.waiting .when::before { content: "⏳ "; }
.row-task button { margin-top: 0; }
@media (max-width: 720px) {
  .row-task { grid-template-columns: 1fr 1fr; }
  .row-task label:first-child { grid-column: 1 / -1; }
}
.streak { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate { width: 54px; flex: none; }
.rate > i { display: block; height: 4px; border-radius: 2px; background: var(--series-1); }
.rate-track { background: var(--surface-2); border-radius: 2px; }

.acts { display: flex; gap: 4px; flex: none; }
button, .btn {
  font: inherit; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-secondary); border-radius: 7px; padding: 5px 9px;
}
button:hover { border-color: var(--text-muted); color: var(--text-primary); }
button.primary { background: var(--series-1); border-color: var(--series-1); color: #fff; }
button.primary:hover { filter: brightness(1.08); color: #fff; }
button[aria-pressed="true"] { background: var(--surface-2); color: var(--text-primary); border-color: var(--text-muted); }
button:disabled { opacity: 0.45; cursor: default; }

/* ── Graphiques ──────────────────────────────────────────────────────────── */
.chart { width: 100%; display: block; overflow: visible; }
.chart text { fill: var(--text-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .bar { fill: var(--series-1); }
.chart .bar:hover { filter: brightness(1.15); }

.heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 260px; }
.heat .cell { aspect-ratio: 1; border-radius: 3px; background: var(--seq-0); }
.heat .cell:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
.legend-seq { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 11px; color: var(--text-muted); }
.legend-seq i { width: 13px; height: 13px; border-radius: 3px; display: block; }

.tip {
  position: fixed; z-index: 20; pointer-events: none; opacity: 0;
  transition: opacity .1s; background: var(--text-primary); color: var(--bg);
  padding: 6px 9px; border-radius: 6px; font-size: 12px; line-height: 1.35;
  max-width: 220px; box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
}
.tip.show { opacity: 1; }
.tip b { font-weight: 620; }

/* ── Barres hebdo ────────────────────────────────────────────────────────── */
.wbars { list-style: none; margin: 0; padding: 0; }
.wbars li { display: grid; grid-template-columns: 1fr 46px; gap: 10px; align-items: center; padding: 5px 0; }
.wbars .lab { font-size: 13px; }
.wbars .track { height: 14px; background: var(--surface-2); border-radius: 3px; position: relative; overflow: hidden; }
.wbars .fill { position: absolute; inset: 0 auto 0 0; background: var(--series-1); border-radius: 0 4px 4px 0; }
.wbars .val { font-size: 12px; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.delta { font-size: 11px; font-variant-numeric: tabular-nums; }

/* ── Formulaires ─────────────────────────────────────────────────────────── */
.form { display: grid; gap: 10px; }
.form label { font-size: 12px; color: var(--text-secondary); display: grid; gap: 4px; }
.form input, .form select, .form textarea {
  font: inherit; padding: 7px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-primary);
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tabs { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }

table.data { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 12px; }
table.data th, table.data td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--border); }
table.data th { color: var(--text-muted); font-weight: 560; }
table.data td { font-variant-numeric: tabular-nums; }

.empty { color: var(--text-muted); font-size: 13px; padding: 6px 0; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  background: var(--text-primary); color: var(--bg); padding: 9px 14px; border-radius: 8px;
  font-size: 13px; opacity: 0; transition: .18s; pointer-events: none; z-index: 30;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Bandeau d'export ────────────────────────────────────────────────────── */
.banner {
  border: 1px solid var(--border); border-left: 3px solid var(--warning);
  background: var(--surface-1); border-radius: var(--radius);
  padding: 11px 14px; margin-bottom: 16px; font-size: 13px;
  color: var(--text-secondary); line-height: 1.5;
}
.banner strong { color: var(--text-primary); }
.banner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--surface-2); padding: 1px 5px; border-radius: 4px;
}

/* L'attribut hidden doit gagner sur tout display explicite, sinon un
   `display: flex` le neutralise en silence. */
[hidden] { display: none !important; }

/* ── Releve, replie dans la carte Fraicheur ─────────────────────────────── */
.releve-done { display: flex; align-items: baseline; gap: 12px; padding-block: 12px; flex-wrap: wrap; }
.fresh-inline { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.releve-done .sub { margin: 0; flex: 1 1 auto; }
button.link, a.link {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--series-1); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
button.link:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; border-radius: 2px; }

/* ── Trajet du jour ──────────────────────────────────────────────────────── */
.commute { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.commute li { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.commute li.chosen { border-color: var(--series-1); box-shadow: inset 3px 0 0 var(--series-1); }
.commute .mode { font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.commute .mins { font-variant-numeric: tabular-nums; }
.commute .detail, .commute .incident { font-size: 12px; color: var(--text-muted); }
.commute .incident { color: var(--text-secondary); }
.commute .estimated { font-size: 11px; color: var(--text-muted); }

/* ── Repas et courses ────────────────────────────────────────────────────── */
.meals { width: 100%; border-collapse: collapse; font-size: 13px; }
.meals th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.meals td { padding: 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.meals tr:last-child td { border-bottom: 0; }
.meals td.day { white-space: nowrap; font-weight: 600; }
.meals td.day small { display: block; font-weight: 400; color: var(--text-muted); font-size: 11px; }
.meals .muted { color: var(--text-muted); }
.meals .tag { font-size: 11px; color: var(--text-muted); }
.shopping { list-style: none; margin: 0; padding: 0; }
.shopping li.aisle { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 10px 0 4px; }
.shopping li.item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.shopping li.item:last-child { border-bottom: 0; }
.shopping li.item label { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; }
.shopping li.item input { width: 18px; height: 18px; }
.shopping li.item.checked label { color: var(--text-muted); text-decoration: line-through; }
.shopping .qty { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* ── Zones ───────────────────────────────────────────────────────────────── */
.zone { margin-top: 26px; }
.zone-title { margin: 0 0 10px; font-size: 12px; font-weight: 640; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.zone-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.zone-fold > summary::-webkit-details-marker { display: none; }
.zone-fold > summary .zone-title { margin: 0; }
.zone-fold > summary .zone-title::before { content: "▸ "; color: var(--text-muted); }
.zone-fold[open] > summary .zone-title::before { content: "▾ "; }
.zone-fold > summary .sub { margin: 0; font-size: 12px; color: var(--text-muted); }
.zone-fold > .grid { margin-top: 6px; }
.row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) { .row4 { grid-template-columns: 1fr 1fr; } }

/* Une carte pliable : le resume en tete, le detail au clic. */
.fold > summary { list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { display: inline; }
.fold > summary h2::after { content: " ▸"; color: var(--text-muted); font-weight: 400; }
.fold[open] > summary h2::after { content: " ▾"; }
.fold > summary .sub { margin: 4px 0 0; }
.fold[open] > summary .sub { margin-bottom: 12px; }
.fold-actions { display: flex; gap: 14px; margin: 0 0 10px; }
.fold-form { margin-top: 10px; }
.fold-form > summary { cursor: pointer; font-size: 12.5px; color: var(--series-1); text-decoration: underline; text-underline-offset: 2px; list-style: none; }
.fold-form > summary::-webkit-details-marker { display: none; }
.fold-form[open] > summary { margin-bottom: 10px; }
.tabs { margin: 14px 0 0; }

/* La bande « maintenant » : la prochaine chose, en une ligne ou deux. */
.now { display: grid; gap: 8px; margin-bottom: 14px; }
.now:empty { display: none; }
.now .item { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; }
.now .item time { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.now .item .what { flex: 1; }
.now .item small { color: var(--text-muted); font-size: 12px; }
.now .item.urgent { border-color: var(--series-1); }

/* Les jours a venir. */
.ahead { list-style: none; margin: 0; padding: 0; }
.ahead > li { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ahead > li:last-child { border-bottom: 0; }
.ahead .day { font-weight: 600; white-space: nowrap; }
.ahead .day small { display: block; font-weight: 400; color: var(--text-muted); font-size: 11px; }
.ahead .what { color: var(--text-secondary); }
.ahead .what b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.ahead li.quiet .what { color: var(--text-muted); }

/* ── Telephone : les listes se plient, la table des repas s'empile ──────────
   Une ligne d'habitude ou de tache tient sur deux lignes : le nom en entier,
   puis l'echeance, la duree et les boutons. La table des repas devient une
   fiche par jour : « Midi · … », « Soir · … ». Rien ne se serre a un mot par
   ligne, rien ne deborde a droite.                                          */
@media (max-width: 720px) {
  .habits li { flex-wrap: wrap; row-gap: 6px; }
  .habits .name { flex-basis: 100%; min-width: 0; }
  .habits .name strong, .habits .name em { overflow-wrap: anywhere; }
  .habits .acts { margin-left: auto; }
  .tasks .when { flex: 1 1 auto; white-space: normal; }
  .row-task { grid-template-columns: 1fr; }
  .row-task label:first-child { grid-column: auto; }

  .meals, .meals tbody, .meals tr, .meals td { display: block; width: 100%; }
  .meals thead { display: none; }
  .meals tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .meals tr:last-child { border-bottom: 0; }
  .meals td { padding: 2px 0; border-bottom: 0; }
  .meals td.day { padding-bottom: 4px; }
  .meals td:nth-child(2)::before { content: "Midi · "; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
  .meals td:nth-child(3)::before { content: "Soir · "; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
  .meals tr:first-child { display: none; }   /* l'en-tete Midi / Soir est ecrit dans le corps */

  .commute { grid-template-columns: 1fr; }
  .data { display: block; overflow-x: auto; }
}

/* ── Calendriers : la couleur de Sacha, avec le nom a cote ─────────────────
   Ecole orange, Travail vert clair, Perso violet, Trajets bleu. Sur la
   timeline, le rail porte la couleur ; le titre dit toujours de quoi il
   s'agit.                                                                  */
:root { --cal-ecole: #e8862a; --cal-travail: #3fb95f; --cal-perso: #8a4fd6; --cal-trajets: #2a78d6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cal-ecole: #f0a052; --cal-travail: #5fd47c; --cal-perso: #b48cf0; --cal-trajets: #5598e7; }
}
:root[data-theme="dark"] { --cal-ecole: #f0a052; --cal-travail: #5fd47c; --cal-perso: #b48cf0; --cal-trajets: #5598e7; }
[data-cal="ecole"] { --cal: var(--cal-ecole); }
[data-cal="travail"] { --cal: var(--cal-travail); }
[data-cal="perso"] { --cal: var(--cal-perso); }
[data-cal="trajets"] { --cal: var(--cal-trajets); }
.slot[data-cal] .rail { background: var(--cal); }

/* ── Le trajet en etapes, et les jours a venir ─────────────────────────────
   Une ligne par moment — reveil, depart, retour — l'heure en gras, le
   detail dessous. Se lit de haut en bas, sur un telephone comme ailleurs.  */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.steps li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: baseline; }
.steps time { font-weight: 700; font-variant-numeric: tabular-nums; }
.steps li.none time { font-weight: 500; color: var(--text-muted); }
.steps .lab { font-weight: 600; display: block; }
.steps small { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.steps li.wake .lab::before { content: "🛏 "; }
.steps li.leave .lab::before { content: "🚇 "; }
.steps li.travel .lab::before { content: "🧳 "; }
.steps li.out .lab::before { content: "📍 "; }
.steps li.return .lab::before { content: "🏠 "; }
.ahead > li.full { display: block; }
.ahead .dayhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ahead .dayhead b { font-size: 14px; }
.ahead .dayhead small { color: var(--text-muted); font-size: 12px; }
.slot.event.skipped .body strong { text-decoration: line-through; color: var(--text-muted); }
.slot.event.skipped .rail { opacity: .3; }
.slot.event.skipped time { opacity: .5; }

/* Les pouces sur les plats : discrets, allumes quand Sacha a tranche. */
.thumbs { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.thumb { border: 0; background: transparent; padding: 0 3px; font-size: 13px; opacity: .35; cursor: pointer; line-height: 1; border-radius: 6px; }
.thumb:hover { opacity: .8; background: var(--surface-2); }
.thumb.on { opacity: 1; }

/* Mange ? — quatre mots sous le plat, celui qui est vrai reste allume. */
.eaten { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.eaten button { font-size: 11px; padding: 2px 7px; border-radius: 999px; opacity: .7; }
.eaten button.on { opacity: 1; border-color: var(--text-primary); color: var(--text-primary); font-weight: 600; }
.shopping li.item .thumbs { margin-left: auto; }