/* Layout : carnet à points (bullet journal). Barre latérale sur ordinateur, onglets en bas sur téléphone,
   pages en feuilles posées sur un fond pointillé, surligneur jaune pour « aujourd'hui », encre bleue de stylo bille. */
:root {
  --paper: #EFF0EB;
  --dot: #D3D5CC;
  --sheet: #FCFCFA;
  --sheet-2: #F5F6F1;
  --ink: #16181F;
  --ink-2: #4E5160;
  --muted: #63666F; /* au moins 4,5:1 sur tous les fonds clairs, même les petits textes */
  --line: #E1E3DC;
  --accent: var(--accent-light, #2441C7);
  --accent-ink: #FFFFFF;
  --accent-soft: var(--soft-light, #E3E8FB);
  --marker: var(--marker-light, #FFE45C);
  --on-marker: var(--marker-ink-light, #1D1B0E);
  --pos: #0B7A3B;
  --neg: #C3352B;
  --warn: #9A6400;
  --crit: #d03b3b;
  --s-in: #2a78d6;
  --s-out: #eb6834;
  --grid: #E6E7E1;
  --scrim: rgba(18, 20, 28, .42);
  --shadow: 0 1px 0 rgba(22,24,31,.04), 0 10px 24px -16px rgba(22,24,31,.22);
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --r: 14px;
  --r-sm: 9px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1117; --dot: #232733; --sheet: #171A22; --sheet-2: #1D2029;
    --ink: #ECEDF2; --ink-2: #B6B9C6; --muted: #8A8E9C; --line: #2A2E3A;
    --accent: var(--accent-dark, #8197FF); --accent-ink: #0F1117; --accent-soft: var(--soft-dark, #232B4F);
    --marker: var(--marker-dark, #5E5312); --on-marker: var(--marker-ink-dark, #FFF4BD);
    --pos: #45C982; --neg: #FF7B6F; --warn: #F0B43C; --crit: #e66767;
    --s-in: #3987e5; --s-out: #d95926; --grid: #252935;
    --scrim: rgba(0,0,0,.6);
    --shadow: 0 1px 0 rgba(0,0,0,.3), 0 12px 28px -18px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1117; --dot: #232733; --sheet: #171A22; --sheet-2: #1D2029;
  --ink: #ECEDF2; --ink-2: #B6B9C6; --muted: #8A8E9C; --line: #2A2E3A;
  --accent: var(--accent-dark, #8197FF); --accent-ink: #0F1117; --accent-soft: var(--soft-dark, #232B4F);
  --marker: var(--marker-dark, #5E5312); --on-marker: var(--marker-ink-dark, #FFF4BD);
  --pos: #45C982; --neg: #FF7B6F; --warn: #F0B43C; --crit: #e66767;
  --s-in: #3987e5; --s-out: #d95926; --grid: #252935;
  --scrim: rgba(0,0,0,.6);
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 12px 28px -18px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* Palettes : les couleurs d'alerte et les montants positifs/négatifs restent stables. */
:root[data-palette="vert"] {
  --accent-light: #176448; --soft-light: #E1F2E9; --accent-dark: #71D6A4; --soft-dark: #18392D;
  --marker-light: #C8EFDC; --marker-ink-light: #173C2B; --marker-dark: #28533E; --marker-ink-dark: #D6F8E5;
}
:root[data-palette="violet"] {
  --accent-light: #6937AB; --soft-light: #F0E6FA; --accent-dark: #C5A1FF; --soft-dark: #342244;
  --marker-light: #E5D4FA; --marker-ink-light: #3A225B; --marker-dark: #4D3368; --marker-ink-dark: #F0E3FF;
}
:root[data-palette="rose"] {
  --accent-light: #A43060; --soft-light: #FBE5EE; --accent-dark: #F1A1C2; --soft-dark: #452635;
  --marker-light: #F8D1E0; --marker-ink-light: #5A2338; --marker-dark: #603247; --marker-ink-dark: #FFE0EC;
}
:root[data-palette="cuivre"] {
  --accent-light: #955015; --soft-light: #F9EBDD; --accent-dark: #EEB77F; --soft-dark: #402E20;
  --marker-light: #F6DDBD; --marker-ink-light: #503014; --marker-dark: #593D23; --marker-ink-dark: #FFE9CC;
}
:root[data-palette="turquoise"] {
  --accent-light: #116776; --soft-light: #DFF2F5; --accent-dark: #75CFDE; --soft-dark: #17373E;
  --marker-light: #C5EAF0; --marker-ink-light: #153C44; --marker-dark: #26505A; --marker-ink-dark: #D8F7FC;
}
/* Sobre et Complet : fond uni ; le fond à points et l'écriture manuscrite restent propres au style Carnet. */
:root[data-layout="sobre"] {
  --f-display: var(--f-body); --f-hand: var(--f-body); --r: 10px; --r-sm: 6px;
  --shadow: none; --marker: var(--accent-soft); --on-marker: var(--accent);
}
:root:is([data-layout="sobre"], [data-layout="complet"]) body { background-image: none; }
:root:is([data-layout="sobre"], [data-layout="complet"]) .brand b { font-size: 1.55rem; font-weight: 700; line-height: 1.2; }
:root:is([data-layout="sobre"], [data-layout="complet"]) .brand-sm { font-size: 1.1rem; font-weight: 700; }
:root:is([data-layout="sobre"], [data-layout="complet"]) .hello .hand { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
/* Sobre : style d'application. Grandes cartes blanches sans cadre, grande date, cartes repliées en liste à lignes,
   boutons, champs de saisie rapide et onglet actif en pilule. */
:root[data-layout="sobre"] { --r: 20px; --r-sm: 12px; }
:root[data-layout="sobre"] :is(.card, .ess, .ftile) { border-color: transparent; }
:root[data-layout="sobre"] #view .card { padding: 18px; }
/* V1.18.6 : un titre de carte est un titre (« Tâches du jour » comme « Premiers pas »), pas une étiquette en capitales. */
:root[data-layout="sobre"] .review-cta { border-style: solid; border-color: transparent; border-radius: var(--r); }
:root[data-layout="sobre"] .ess.appt { border-left: 0; }
:root[data-layout="sobre"] .ess.prio { border-top: 0; }
:root[data-layout="sobre"] .ess .eyebrow { color: var(--accent); }
:root[data-layout="sobre"] .hello { display: grid; gap: 0; }
:root[data-layout="sobre"] .hello .hand { font-size: .9rem; font-weight: 600; color: var(--muted); }
:root[data-layout="sobre"] .hello b { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
:root[data-layout="sobre"] .hello b::first-letter { text-transform: uppercase; }
:root[data-layout="sobre"] .shelf { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--sheet); border-radius: var(--r); overflow: hidden; }
:root[data-layout="sobre"] .ftile { border-radius: 0; background: none; padding: 14px 16px; border-bottom: 1px solid var(--line); }
:root[data-layout="sobre"] .ftile:last-child { border-bottom-color: transparent; }
:root[data-layout="sobre"] .ftile .txt { grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; }
:root[data-layout="sobre"] .ftile b { font-size: .95rem; font-weight: 600; }
:root[data-layout="sobre"] .ftile small { text-align: right; font-size: .82rem; }
:root[data-layout="sobre"] :is(.btn, .fab, .seg, .seg span, .seg button) { border-radius: 99px; }
:root[data-layout="sobre"] .btn:not(.primary, .ghost, .solid) { background: var(--sheet-2); border-color: transparent; }
:root[data-layout="sobre"] :is(.capture, .quick) input { border-radius: 99px; padding-inline: 16px; border-color: transparent; }
:root[data-layout="sobre"] #view > .capture input { background: var(--sheet); }
:root[data-layout="sobre"] .tabbar { border-top-color: transparent; box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, .45); }
:root[data-layout="sobre"] .tab { gap: 4px; padding-top: 8px; }
:root[data-layout="sobre"] .tab svg { width: 56px; height: 30px; padding: 5px 17px; border-radius: 99px; }
:root[data-layout="sobre"] .tab[aria-current="page"] { color: var(--ink); font-weight: 700; }
:root[data-layout="sobre"] .tab[aria-current="page"] svg { background: var(--accent-soft); color: var(--accent); }
@media (min-width: 900px) {
  :root[data-layout="sobre"] .side { background: transparent; border-right: 0; }
  :root[data-layout="sobre"] .nav-btn { border-radius: 99px; }
}
.home-appt { width: 100%; display: grid; text-align: left; gap: 4px; margin-bottom: 14px; padding: 18px; border: 0; border-radius: var(--r); background: var(--accent-soft); color: var(--ink); overflow-wrap: anywhere; }
.home-appt .eyebrow { color: var(--accent); }
.home-appt b { font-size: 1.05rem; }
.home-appt time { font: 600 2.15rem/1.2 var(--f-display); letter-spacing: -.05em; }
.home-appt small { font-size: .83rem; color: var(--ink-2); }
.home-appt.add-appt { display: flex; align-items: center; gap: 8px; padding-block: 12px; min-height: 44px; background: var(--sheet); color: var(--accent); }
.home-appt.add-appt svg { width: 18px; height: 18px; }
:root .ess-grid.has-featured-appt { grid-template-columns: minmax(0,1fr); grid-template-areas: "prio"; }
.home-shortcuts { display: flex; gap: 8px; margin-bottom: 14px; }
.home-shortcuts button { flex: 1; min-width: 0; display: grid; align-content: start; text-align: left; gap: 3px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sheet); padding: 12px; color: var(--ink); overflow-wrap: anywhere; }
.home-shortcuts svg { width: 19px; height: 19px; color: var(--accent); margin-bottom: 4px; }
.home-shortcuts small { font-size: .76rem; color: var(--muted); }
/* Un seul raccourci (Courses, V1.17.1) : une ligne, l'icône à gauche du nom et du nombre d'articles. */
.home-shortcuts button:only-child { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: 44px; }
.home-shortcuts button:only-child svg { grid-row: 1 / span 2; margin-bottom: 0; }
/* Complet : tableau de bord. Toutes les fonctions en tuiles, cartes serrées avec un en-tête souligné en couleur. */
:root[data-layout="complet"] { --f-hand: var(--f-display); --r: 10px; --r-sm: 7px; }
:root[data-layout="complet"] #view .card { padding: 12px 14px; }
:root[data-layout="complet"] #view .card-head { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
:root[data-layout="complet"] #view .card-head h2 { font-size: .98rem; color: var(--accent); }
:root[data-layout="complet"] :is(.grid-today, .col) { gap: 10px; }
:root[data-layout="complet"] .task { padding-block: 6px; }
:root[data-layout="complet"] .ess-grid { gap: 8px; margin-bottom: 10px; }
:root[data-layout="complet"] .today-tasks { margin-bottom: 10px; }
:root[data-layout="complet"] .ess { padding: 10px 12px; }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
@media (min-width: 600px) { .board { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bt { display: grid; align-content: start; padding: 7px 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--sheet); color: var(--ink); text-align: left; min-width: 0; line-height: 1.3; }
.bt:hover { border-color: var(--accent); }
.bt svg { width: 16px; height: 16px; color: var(--accent); margin-bottom: 3px; }
.bt b, .bt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt b { font-size: .78rem; font-weight: 700; }
.bt small { font-size: .7rem; color: var(--muted); }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sp { flex: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Structure ---------- */
.app { display: grid; grid-template-columns: 1fr; min-height: 100%; }
.side { display: none; }
.main {
  min-width: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 14px calc(150px + env(safe-area-inset-bottom, 0px));
  max-width: 1180px; width: 100%; margin: 0 auto;
}
.top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.top h1 { font-size: 1.55rem; min-width: 0; }
.brand-sm { font-family: var(--f-hand); font-size: 1.5rem; color: var(--accent); line-height: 1; }
.back-btn:not([hidden]) + .brand-sm { display: none; } /* la flèche prend la place du petit logo */
/* Changement d'écran en glissant : le nouvel écran arrive du côté du geste. */
#view.slide-l { animation: slide-l .2s ease-out; }
#view.slide-r { animation: slide-r .2s ease-out; }
@keyframes slide-l { from { opacity: .35; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes slide-r { from { opacity: .35; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.icon-btn {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink-2);
}
.icon-btn:hover { color: var(--ink); border-color: var(--muted); }
.icon-btn svg, .btn svg, .tab svg, .nav-btn svg { width: 18px; height: 18px; flex: none; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); /* 4 ou 5 onglets, sans case vide */
  background: var(--sheet); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 0; min-height: 58px;
  padding: 9px 2px 8px; border: 0; background: none; color: var(--muted);
  font-size: .7rem; font-weight: 500;
}
.tab > span { max-width: 100%; line-height: 1.2; text-align: center; overflow-wrap: anywhere; hyphens: auto; }
.tab svg { width: 21px; height: 21px; }
.tab[aria-current="page"] { color: var(--accent); }
.fab {
  position: fixed; z-index: 31;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 18px; border: 0;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; box-shadow: 0 10px 24px -10px var(--accent);
}
.fab svg { width: 24px; height: 24px; }
/* Le « + » reste à portée pendant le défilement ; le retrait du bas de .main protège le dernier contenu. */
.top .add-desk { display: none; }

@media (min-width: 900px) {
  .app { grid-template-columns: 232px 1fr; }
  .side {
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    padding: 22px 14px; padding-left: max(14px, env(safe-area-inset-left, 0px));
    background: var(--sheet); border-right: 1px solid var(--line);
  }
  .brand { display: flex; flex-direction: column; padding: 4px 10px 22px; }
  .brand b { font-family: var(--f-hand); font-size: 2.1rem; line-height: .9; color: var(--accent); font-weight: 600; }
  .brand small { color: var(--muted); font-size: .78rem; margin-top: 4px; }
  .nav-btn {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px;
    border-radius: 11px; border: 0; background: none; color: var(--ink-2); font-weight: 500; text-align: left;
  }
  .nav-btn:hover { background: var(--sheet-2); color: var(--ink); }
  .nav-btn[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  .side .foot { margin-top: auto; padding: 10px; font-size: .78rem; color: var(--muted); }
  .main { padding-block: 26px 48px; padding-left: 32px; padding-right: max(32px, env(safe-area-inset-right, 0px)); }
  .tabbar, .fab, .brand-sm { display: none; }
  .top .add-desk { display: inline-flex; }
  .top h1 { font-size: 1.9rem; }
}

/* ---------- Composants ---------- */
.card {
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 16px; min-width: 0;
}
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { font-size: 1.08rem; }
/* Étiquettes (V1.18.6) : en casse de phrase, demi-gras, sans lettres espacées ; les styles Manga gardent leurs capitales. */
.eyebrow { font-size: .8rem; color: var(--muted); font-weight: 600; }
.count { font-size: .78rem; color: var(--muted); font-weight: 500; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--sheet); color: var(--ink); font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--sheet-2); color: var(--ink); }
.btn.danger { color: var(--neg); }
.btn.danger.solid { background: var(--neg); border-color: var(--neg); color: #fff; }
.btn.sm { padding: 6px 10px; font-size: .82rem; border-radius: 9px; }
.btn:disabled { opacity: .55; cursor: default; }
.link { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; font-size: .85rem; }
.link:hover { text-decoration: underline; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px;
  font-size: .74rem; font-weight: 600; background: var(--sheet-2); color: var(--ink-2); border: 1px solid var(--line);
}
button.chip { min-height: 26px; cursor: pointer; } /* « Payé », « Reçu » : assez grands à toucher */
.chip.warn { color: var(--warn); }
.chip.crit { color: var(--neg); }
.chip.ok { color: var(--pos); }
.empty { color: var(--muted); font-size: .9rem; padding: 10px 2px; }
.empty b { color: var(--ink-2); }
.banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px; border-radius: 12px;
  background: var(--accent-soft); color: var(--ink); font-size: .88rem;
}
.banner.note { background: var(--sheet); border: 1px dashed var(--line); color: var(--ink-2); }

/* Hero du jour */
.hero { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin: 4px 0 18px; }
.stamp { display: flex; flex-direction: column; line-height: 1; }
.stamp .hand { font-family: var(--f-hand); font-size: 1.9rem; color: var(--accent); margin-bottom: 2px; }
.stamp .big { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.1rem, 7vw, 3.1rem); letter-spacing: -.03em; }
mark.hl {
  background: linear-gradient(176deg, transparent 52%, var(--marker) 52%, var(--marker) 90%, transparent 90%);
  color: inherit; padding: 0 .08em;
}
.hero-sub { margin: 0 0 6px; color: var(--ink-2); max-width: 46ch; }
.hero-sub b { color: var(--ink); }

.grid-today { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
.col { display: grid; gap: 14px; min-width: 0; }
@media (min-width: 760px) { .grid-today { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

/* Tâches */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; }
.task {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 9px 4px 9px 0; border-bottom: 1px solid var(--line);
}
.task:last-child { border-bottom: 0; }
.check {
  width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--muted);
  background: transparent; display: grid; place-items: center; padding: 0; color: transparent;
}
.check svg { width: 14px; height: 14px; }
.task.prio-haute .check { border-color: var(--neg); }
.task.done .check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.task-main { min-width: 0; min-height: 24px; align-content: center; background: none; border: 0; padding: 0; text-align: left; display: grid; gap: 1px; } /* 24 px au moins à toucher */
.task-title { font-weight: 500; overflow-wrap: anywhere; }
.task.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-meta { font-size: .78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.task-meta .prio { color: var(--neg); font-weight: 600; }
.task-time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem; color: var(--ink-2); min-width: 44px; text-align: right; }
.sub-label { font-size: .82rem; font-weight: 600; color: var(--neg); margin: 8px 0 2px; }
.quick { display: flex; gap: 8px; margin-top: 10px; }
.quick input { flex: 1; min-width: 0; }

input[type="text"], input[type="url"], input[type="tel"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], select, textarea, .inp {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--sheet-2); color: var(--ink); min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
textarea { resize: vertical; }

/* Argent */
.money-big { font-family: var(--f-display); font-weight: 700; font-size: 2rem; letter-spacing: -.02em; line-height: 1.1; }
.money-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.mini { display: grid; gap: 1px; }
.mini .v { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.meter { height: 8px; border-radius: 99px; background: var(--sheet-2); border: 1px solid var(--line); overflow: hidden; margin-top: 12px; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.meter.over i { background: var(--crit); }

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { padding: 14px 16px; }
.tile .v { font-family: var(--f-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em; margin-top: 4px; overflow-wrap: anywhere; }
.tile .s { font-size: .78rem; color: var(--muted); margin-top: 2px; }

.budget-grid { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .budget-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .budget-grid .wide { grid-column: 1 / -1; } }

.cats { display: grid; gap: 12px; }
.cat-row { display: grid; gap: 5px; }
.cat-top { display: flex; align-items: baseline; gap: 8px; font-size: .9rem; }
.cat-top .name { font-weight: 600; }
.cat-top .amt { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: .85rem; text-align: right; }
.track { position: relative; height: 10px; background: var(--sheet-2); border-radius: 99px; border: 1px solid var(--line); }
.track .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 99px; }
.track .over { position: absolute; top: 0; bottom: 0; background: var(--crit); border-radius: 0 99px 99px 0; }
.track .limit { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 2px; }
.over-note { font-size: .76rem; color: var(--neg); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.legend { display: flex; gap: 14px; font-size: .8rem; color: var(--ink-2); margin-bottom: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tip {
  position: absolute; pointer-events: none; z-index: 5; min-width: 150px;
  background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-radius: 10px; padding: 8px 10px; font-size: .8rem; display: grid; gap: 2px;
}
.tip b { font-weight: 600; }
.tip .r { display: flex; gap: 8px; align-items: center; }
.tip .r i { width: 8px; height: 8px; border-radius: 2px; }
.tip .r span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }
details.tbl summary { cursor: pointer; font-size: .82rem; color: var(--accent); font-weight: 600; margin-top: 8px; }
.tbl-scroll { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: .84rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; }

.rec-list, .tx-list { list-style: none; margin: 0; padding: 0; }
.rec { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rec:last-child { border-bottom: 0; }
.rec .lbl { min-width: 0; background: none; border: 0; padding: 0; text-align: left; display: grid; }
.rec .lbl b { font-weight: 500; overflow-wrap: anywhere; }
.rec .lbl small { color: var(--muted); font-size: .76rem; }
.amt-in { color: var(--pos); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt-out { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-day { font-size: .82rem; color: var(--muted); font-weight: 600; padding: 12px 0 4px; }
.tx-day::first-letter { text-transform: uppercase; } /* « Dimanche 8 novembre » : la date française commence en minuscule */
.tx { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; }
.tx:hover .tx-l b { color: var(--accent); }
.tx-l { min-width: 0; display: grid; }
.tx-l b { font-weight: 500; overflow-wrap: anywhere; }
.tx-l small { color: var(--muted); font-size: .76rem; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.filters input { flex: 1 1 160px; }
.seg { display: inline-flex; background: var(--sheet-2); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; }
.seg label, .seg button { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span, .seg button { display: block; padding: 6px 12px; border-radius: 8px; font-size: .85rem; font-weight: 600; color: var(--ink-2); border: 0; background: none; }
.seg input:checked + span, .seg button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }

.month-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.month-nav h2 { font-size: 1.25rem; min-width: 150px; text-align: center; }

/* Agenda */
.week-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.week-head h2 { font-size: 1.1rem; flex: 1; min-width: 0; }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.day-btn {
  display: grid; justify-items: center; gap: 2px; padding: 8px 2px 9px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--sheet); color: var(--ink-2); min-width: 0;
}
.day-btn .wd { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.day-btn .dn { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.day-btn .dots { display: flex; gap: 3px; height: 6px; }
.day-btn .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.day-btn .dots i.d { background: var(--muted); opacity: .5; }
.day-btn.today .dn { background: var(--marker); color: var(--on-marker); border-radius: 6px; padding: 0 5px; }
.day-btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.agenda-grid { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .agenda-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.up-day { font-size: .78rem; font-weight: 600; color: var(--ink-2); padding: 10px 0 2px; }

/* Habitudes */
.habits { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .habits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.habit-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.hd { display: grid; justify-items: center; gap: 4px; font-size: .68rem; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.hd button {
  width: 100%; max-width: 44px; aspect-ratio: 1; border-radius: 12px; border: 2px dashed var(--line);
  background: transparent; display: grid; place-items: center; color: transparent; padding: 0;
}
.hd button svg { width: 18px; height: 18px; }
.hd button.on { background: var(--accent); border: 2px solid var(--accent); color: var(--accent-ink); }
.hd.today span { color: var(--on-marker); background: var(--marker); border-radius: 4px; padding: 0 4px; }
.habit-stats { display: flex; gap: 14px; font-size: .82rem; color: var(--ink-2); margin-top: 10px; flex-wrap: wrap; }
.habit-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.hchips { display: flex; flex-wrap: wrap; gap: 8px; }
.hchip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 9px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--sheet-2); font-weight: 500; font-size: .88rem;
}
.hchip .box { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--muted); display: grid; place-items: center; color: transparent; }
.hchip .box svg { width: 12px; height: 12px; }
.hchip.on { border-color: var(--accent); background: var(--accent-soft); }
.hchip.on .box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Objectifs */
.goals { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.goal-fig { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.goal-fig .money-big { font-size: 1.7rem; }
.goal-meter { height: 14px; border-radius: 99px; background: var(--sheet-2); border: 1px solid var(--line); overflow: hidden; margin: 12px 0 8px; }
.goal-meter i { display: block; height: 100%; background: repeating-linear-gradient(135deg, var(--accent) 0 8px, color-mix(in srgb, var(--accent) 82%, var(--sheet)) 8px 16px); }
.goal-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--ink-2); }

/* Courses */
.shop-grid { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .shop-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .shop-side { position: sticky; top: 20px; } }
.shop-add { display: flex; gap: 8px; }
.shop-add input { flex: 1; min-width: 0; }
.recents { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.recents .lab { font-size: .82rem; color: var(--muted); font-weight: 600; margin-right: 2px; }
.rchip { padding: 4px 10px; border-radius: 99px; border: 1px dashed var(--muted); background: transparent; font-size: .8rem; color: var(--ink-2); }
.rchip:hover { border-color: var(--accent); color: var(--accent); }
.aisle { font-size: .82rem; color: var(--muted); font-weight: 600; padding: 14px 0 2px; }
.aisle.cart { color: var(--accent); }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.sum-row:last-child { border-bottom: 0; }
.sum-row b { font-variant-numeric: tabular-nums; }

/* Dettes */
.tiles.three .tile:last-child { grid-column: 1 / -1; }
@media (min-width: 760px) { .tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles.three .tile:last-child { grid-column: auto; } }
.debt-grid { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .debt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.debt { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 7px; }
.debt:last-child { border-bottom: 0; padding-bottom: 2px; }
.debt-top { display: flex; gap: 10px; align-items: flex-start; }
.debt-top .lbl { flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; display: grid; }
.debt-top .lbl b { font-weight: 600; overflow-wrap: anywhere; }
.debt-top .lbl small { color: var(--muted); font-size: .78rem; }
.debt-amt { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.debt-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); }
.debt-foot svg { vertical-align: -2px; }
.meter.thin { height: 6px; margin-top: 0; }
details.settled { margin-top: 14px; }
details.settled summary { cursor: pointer; display: flex; gap: 8px; align-items: center; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; }

/* À prévoir */
.month-group { display: flex; align-items: baseline; gap: 8px; padding: 14px 0 2px; font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.month-group .t { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); text-transform: none; }
.month-group.late { color: var(--neg); }

/* Tickets */
.sub-tabs { margin-bottom: 14px; }
.scan-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.scan-wait { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--ink-2); flex-wrap: wrap; }
.dot-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }
.rd-head { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.rd-head .fld:first-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .rd-head { grid-template-columns: 2fr 1fr 1fr; } .rd-head .fld:first-child { grid-column: auto; } }
.rd-cols, .rd-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px 86px 34px; gap: 6px; align-items: center; }
.rd-cols { font-size: .78rem; color: var(--muted); font-weight: 600; margin-top: 14px; }
.rd-cols span:nth-child(2) { text-align: center; }
.rd-cols span:nth-child(3) { text-align: right; }
.rd-items { display: grid; gap: 6px; margin-top: 6px; }
.rd-row input { padding: 7px 9px; }
.rd-row .q { text-align: center; }
.rd-row .p { text-align: right; font-variant-numeric: tabular-nums; }
/* Poids ou volume d'un article (V1.15) : une petite ligne sous l'article, discrète tant qu'elle ne sert pas. */
.rd-line { display: grid; gap: 2px; }
.rd-size { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.rd-size .rd-size-add { font-size: .78rem; font-weight: 500; color: var(--muted); min-height: 32px; padding: 0 2px; }
.rd-size-lab { font-size: .78rem; color: var(--muted); }
.rd-size input { width: 8.5em; padding: 5px 8px; font-size: .88rem; }
.rd-size small { flex: 1 1 12em; min-width: 0; font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.shop-end { display: flex; align-items: center; gap: 6px; }
.icon-x { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); display: grid; place-items: center; padding: 0; font-size: 1.1rem; }
.icon-x:hover { color: var(--neg); border-color: var(--neg); }
.prod { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.prod:last-child { border-bottom: 0; }
.prod b { font-weight: 600; overflow-wrap: anywhere; }
.prod small { color: var(--muted); font-size: .78rem; }
.prod .r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.prod .acts { justify-self: end; }

.plink { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-align: left; overflow-wrap: anywhere; }
.plink:hover { color: var(--accent); text-decoration: underline; }
table.data td.l, table.data th.l { text-align: left; }
.loans { margin-top: 14px; }

/* Réglages */
.settings { display: grid; gap: 14px; max-width: 760px; }
/* V1.18.2 : rubriques repliées. Le titre (avec son résumé) se touche sur toute sa largeur ; la flèche tourne à l'ouverture. */
.settings { gap: 10px; }
.set-sec > summary { list-style: none; cursor: pointer; min-height: 44px; margin: -4px 0; padding: 4px 0; }
.set-sec > summary::-webkit-details-marker { display: none; }
.set-sec > summary > svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform .2s ease; }
.set-sec[open] > summary { margin-bottom: 10px; }
.set-sec[open] > summary > svg { transform: rotate(180deg); }
.set-sec > summary { flex-wrap: nowrap; }
.set-sec > summary h2 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-sec > summary .count { flex: 0 20 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-sec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
/* Petites aides pour débuter (sous les champs d'ajout, tant que le carnet est presque vide). */
.newbie-tip { color: var(--muted); font-size: .8rem; }
/* V1.18.3 : une phrase pour comprendre une notion, avec « Compris » pour la retirer sur cet appareil. */
.explain { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--ink); font-size: .84rem; line-height: 1.45; }
.explain span { flex: 1; min-width: 0; }
.explain .link { flex: none; min-height: 32px; font-size: .82rem; }
/* V1.18.4 : taille du texte (Réglages → Apparence). Presque tout est en rem : agrandir la racine agrandit l'app. */
:root[data-text="grand"] { font-size: 112.5%; }
:root[data-text="grand"] body { font-size: 16.9px; }
:root[data-text="tres-grand"] { font-size: 125%; }
:root[data-text="tres-grand"] body { font-size: 18.75px; }
/* « Comment ça marche ? » en haut à droite des écrans les moins évidents, et sa fenêtre. */
.help-row { display: flex; justify-content: flex-end; margin: -6px 0 4px; }
.help-row .link { min-height: 36px; font-size: .82rem; }
.help-list { margin: 8px 0 4px; padding-left: 1.2em; display: grid; gap: 8px; line-height: 1.5; }
.capture-tip { margin: 6px 2px 0; }
.appearance-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } /* la colonne ne s'élargit jamais au-delà de l'écran (texte très grand) */
.appearance-card .card-head, .appearance-card p { margin: 0; }
.appearance-label { margin-top: 6px; font-size: .86rem; font-weight: 700; }
.appearance-mode { display: flex; flex-wrap: wrap; }
.appearance-mode button { flex: 1 1 auto; min-height: 42px; padding-inline: 8px; } /* passent à la ligne plutôt que déborder */
.theme-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.color-choice { display: flex; align-items: center; gap: 6px; padding: 10px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet); font-size: .82rem; }
.color-choice[aria-pressed="true"], .interface-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.color-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--swatch); border: 1px solid rgba(255,255,255,.5); flex: none; }
.choice-check { width: 16px; height: 16px; display: inline-flex; flex: none; }
.choice-check svg { width: 16px; height: 16px; color: var(--accent); }
.color-choice .choice-check { margin-left: auto; }
.interface-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.interface-choice { display: grid; align-content: start; gap: 7px; padding: 10px; min-width: 0; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); }
/* Sur téléphone, présenter les aperçus par paires pour faciliter la comparaison. */
@media (max-width: 560px) {
  .interface-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interface-choice { overflow-wrap: anywhere; }
}
.interface-choice-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 700; }
.interface-choice small { font-size: .78rem; color: var(--ink-2); line-height: 1.4; }
.interface-preview { display: grid; gap: 5px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background-color: var(--paper); color: var(--accent); }
.interface-preview.carnet { background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 10px 10px; }
.interface-preview.carnet > span { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.3rem; line-height: 1; }
.interface-preview:not(.carnet) > span { font-family: var(--f-body); font-size: .9rem; font-weight: 700; line-height: 1.45; }
.interface-preview i { display: block; height: 6px; border-radius: 3px; background: var(--accent-soft); border-left: 3px solid var(--accent); }
.interface-preview i:last-child { width: 70%; }
.interface-preview.sobre i { height: 9px; border-radius: 5px; border-left: 0; background: var(--sheet); }
.interface-preview.complet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.interface-preview.complet > span { grid-column: 1 / -1; }
.interface-preview.complet i { width: auto; height: 11px; border-radius: 3px; border: 1px solid var(--accent); background: var(--accent-soft); }
.appearance-card > .link { justify-self: start; text-align: left; margin-top: 2px; min-height: 44px; }
@media (max-width: 500px) { .theme-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fld { display: grid; gap: 5px; font-size: .84rem; font-weight: 600; color: var(--ink-2); min-width: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.budget-inputs { display: grid; gap: 8px 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.budget-inputs label { display: grid; grid-template-columns: 1fr 104px; align-items: center; gap: 8px; font-size: .86rem; }
.budget-inputs input { padding: 7px 9px; text-align: right; }
.toggle { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: .9rem; }
.toggle input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); } /* sans rétrécir quand le texte passe sur deux lignes */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hint { font-size: .78rem; color: var(--muted); margin: 0; font-weight: 400; }

/* IA */
.ai { border-style: dashed; background: var(--sheet); }
.ai-form { display: flex; gap: 8px; }
.ai-form input { flex: 1; min-width: 0; }
.ai-out { margin-top: 10px; white-space: pre-wrap; font-size: .92rem; color: var(--ink); }
.ai-out.loading { color: var(--muted); }
.ai-items { display: grid; gap: 8px; margin-top: 10px; }
.ai-item { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 9px 10px; border-radius: 10px; background: var(--sheet-2); border: 1px solid var(--line); }
.ai-item .desc { flex: 1 1 200px; min-width: 0; font-size: .88rem; }
.ai-item .desc b { display: block; font-weight: 600; }
.ai-err { color: var(--neg); font-size: .86rem; margin-top: 8px; }
.spark { color: var(--accent); }

/* Modale */
.scrim {
  position: fixed; inset: 0; z-index: 60; background: var(--scrim);
  display: grid; align-items: end; justify-items: center;
}
.sheet {
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  background: var(--sheet); border-radius: 20px 20px 0 0; border: 1px solid var(--line);
  padding: 20px max(18px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  animation: up .2s ease-out;
}
@media (min-width: 640px) { .scrim { align-items: center; } .sheet { border-radius: 20px; padding: 22px; } }
@keyframes up { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-form { display: grid; gap: 12px; }
.sheet h2 { font-size: 1.3rem; margin-bottom: 2px; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.chooser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.choice { display: grid; gap: 4px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--sheet-2); text-align: left; }
.choice:hover { border-color: var(--accent); }
.choice b { font-family: var(--f-display); font-size: 1.05rem; }
.choice small { color: var(--muted); font-size: .78rem; }
.gcal { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.gcal:hover { text-decoration: underline; }
.gcal svg { width: 16px; height: 16px; }

/* Rappels & toasts */
.reminders {
  position: fixed; z-index: 70; display: grid; gap: 10px;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  pointer-events: none;
}
@media (min-width: 640px) { .reminders { left: auto; width: 360px; } }
.rem {
  pointer-events: auto; background: var(--sheet); border: 1px solid var(--line); border-left: 5px solid var(--marker);
  border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); padding: 12px 14px; display: grid; gap: 6px;
  animation: up .25s ease-out;
}
.rem .rt { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-2); font-weight: 600; }
.rem .rt svg { width: 15px; height: 15px; color: var(--accent); }
.rem .rn { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.rem .ra { display: flex; gap: 6px; flex-wrap: wrap; }
.toasts {
  position: fixed; z-index: 80; left: 50%; transform: translateX(-50%);
  bottom: calc(146px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; justify-items: center;
  width: min(92vw, 420px); pointer-events: none;
}
@media (min-width: 900px) { .toasts { bottom: 28px; } }
.toast { background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 12px; font-size: .88rem; font-weight: 500; box-shadow: var(--shadow); animation: up .2s ease-out; }
.toast.err { background: var(--neg); color: #fff; }

/* Chargement / accueil */
.loading { display: grid; place-items: center; min-height: 50vh; text-align: center; color: var(--muted); }
.loading .hand { font-family: var(--f-hand); font-size: 2rem; color: var(--accent); }
.onboard { max-width: 560px; margin: 4vh auto 0; display: grid; gap: 16px; }
.onboard .hand { font-family: var(--f-hand); font-size: 2.3rem; color: var(--accent); line-height: 1; }
.onboard h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); letter-spacing: -.03em; line-height: 1.05; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Application autonome (hors claude.ai) ---------- */
:root { color-scheme: light; }
body { margin: 0; padding-top: env(safe-area-inset-top, 0px); }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Écrans de connexion, d'installation et d'accueil : pas de navigation */
.locked .tabbar, .locked .fab, .locked #side-nav, .locked .top .add-desk, .locked #gear, .locked #search-btn, .locked #back-btn { display: none !important; }
.locked .main { padding-bottom: 40px; }

/* ---------- Comptes et carnets ---------- */
.carnet-chip {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 46vw;
  padding: 5px 8px 5px 11px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--sheet); color: var(--ink-2); font-size: .82rem; font-weight: 600;
}
.carnet-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carnet-chip svg { width: 15px; height: 15px; flex: none; }
/* V1.18.1 : le titre de l'écran passe avant le nom du carnet. Le bouton du carnet prend la place qui reste (44 px au
   moins) ; le titre ne se coupe qu'en dernier recours. Sur téléphone, le petit logo laisse sa place au carnet. */
.top h1 { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .carnet-chip { flex: 100 1 0; min-width: 44px; max-width: fit-content; min-height: 36px; }
@media (max-width: 560px) { .top { gap: 4px; } .top h1 { font-size: 1.4rem; } .top:has(.carnet-chip:not([hidden])) .brand-sm { display: none; } }
@media (max-width: 360px) { .top h1 { font-size: 1.25rem; } .top .icon-btn { width: 36px; } }
/* Guide progressif : une ligne de résumé ; les quatre étapes ne prennent de la place qu'à la demande. */
.first-steps { margin: 0 0 14px; }
.fs-summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; }
.fs-summary::-webkit-details-marker { display: none; }
.fs-summary > span:first-child { display: grid; gap: 3px; min-width: 0; flex: 1; }
.fs-summary b { font-family: var(--f-display); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.fs-summary small { color: var(--muted); font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.fs-summary .count { flex: none; white-space: nowrap; }
.fs-summary > svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.first-steps[open] > .fs-summary > svg { transform: rotate(180deg); }
.fs-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }
.fs-details { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.fs-details > .link { min-height: 44px; margin-top: 8px; font-size: .82rem; text-align: left; }
.fs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fs-list li { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.fs-go { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 48px; padding: 8px 2px; border: 0; background: none; color: var(--ink); text-align: left; }
.fs-go > svg { width: 18px; height: 18px; margin-left: auto; color: var(--muted); flex: none; }
.fs-list .txt { display: grid; gap: 1px; min-width: 0; }
.fs-list .txt b { font-weight: 600; overflow-wrap: anywhere; }
.fs-list .txt small { color: var(--muted); font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.fs-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--accent); display: grid; place-items: center; }
.fs-list li.done .fs-mark { background: var(--accent); color: var(--accent-ink); }
.fs-list li.done .fs-mark svg { width: 14px; height: 14px; }
.fs-list li.done .txt b { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.steps-help { margin: 10px 0 0; padding-left: 1.3em; display: grid; gap: 8px; }
.carnet-chip:hover { border-color: var(--accent); color: var(--accent); }
.chooser.one { grid-template-columns: 1fr; }
.choice.on { border-color: var(--accent); background: var(--accent-soft); }
.code-box {
  font-family: var(--f-display); font-weight: 700; font-size: 2rem; letter-spacing: .12em; text-align: center;
  padding: 14px; border-radius: 14px; border: 2px dashed var(--accent); color: var(--accent); background: var(--accent-soft);
  user-select: all; font-variant-numeric: tabular-nums;
}
.people { list-style: none; margin: 8px 0 0; padding: 0; }
.people li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.people li:last-child { border-bottom: 0; }
.people .who { flex: 1; min-width: 0; display: grid; }
.people .who b { font-weight: 600; overflow-wrap: anywhere; }
.people .who small { color: var(--muted); font-size: .78rem; }
.people svg { width: 18px; height: 18px; color: var(--muted); flex: none; }

/* ---------- Agenda : mois et année ---------- */
.agenda-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cal { margin-bottom: 14px; }
.cal-heads, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-heads { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; text-align: center; margin-bottom: 4px; }
.cal-day {
  min-width: 0; min-height: 86px; display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  padding: 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); text-align: left; overflow: hidden;
}
.cal-day .n { font-family: var(--f-display); font-weight: 700; font-size: .95rem; align-self: flex-start; }
.cal-day.other { background: transparent; color: var(--muted); border-style: dashed; }
.cal-day.today .n { background: var(--marker); color: var(--on-marker); border-radius: 5px; padding: 0 4px; }
.cal-day[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-day:hover { border-color: var(--accent); }
.cal-t { display: grid; gap: 2px; min-width: 0; }
.cal-t i { font-style: normal; font-size: .72rem; line-height: 1.3; padding: 1px 5px; border-radius: 5px; background: var(--accent-soft); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-t i.d { opacity: .55; text-decoration: line-through; }
.cal-t i.more { background: none; color: var(--muted); padding: 0 2px; }
.cal-dots { display: none; gap: 3px; justify-content: center; }
.cal-dots b { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cal-dots b.d { background: var(--muted); opacity: .5; }
@media (max-width: 640px) {
  .cal-day { min-height: 54px; padding: 5px 2px; align-items: center; }
  .cal-day .n { align-self: center; }
  .cal-t { display: none; }
  .cal-dots { display: flex; }
}
.year-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-bottom: 10px; }
.ym { padding: 10px; }
.ym-title { background: none; border: 0; padding: 0 0 6px; font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: var(--ink); text-transform: capitalize; }
.ym-title:hover { color: var(--accent); text-decoration: underline; }
.ym-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.ym-grid .h { font-size: .62rem; color: var(--muted); text-align: center; font-weight: 600; text-transform: uppercase; }
.ym-d { aspect-ratio: 1; min-width: 0; border: 0; border-radius: 6px; background: transparent; font-size: .72rem; color: var(--ink-2); padding: 0; font-variant-numeric: tabular-nums; }
.ym-d:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.ym-d.lvl1 { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--ink); }
.ym-d.lvl2 { background: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--ink); font-weight: 600; }
.ym-d.lvl3 { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.ym-d.today { outline: 2px solid var(--marker); outline-offset: -1px; }
.ym-d.sel { box-shadow: inset 0 0 0 2px var(--ink); }
.ym-legend { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--muted); margin-bottom: 14px; }
.ym-legend i { width: 14px; height: 14px; display: inline-block; aspect-ratio: auto; }
/* Budgets : groupes et catégories personnalisées */
.bud-group { color: var(--muted) !important; margin: 14px 0 6px !important; }
.budget-inputs label.custom { grid-template-columns: 1fr 104px 34px; }
.tag-month { font-size: .7rem; font-weight: 600; color: var(--accent); }
.track .planned { position: absolute; top: 0; bottom: 0; border-radius: 0 99px 99px 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent) 0 4px, transparent 4px 8px); }
.over-note.warn { color: var(--warn); }

/* ---------- État de synchronisation ---------- */
.banner.err { background: color-mix(in srgb, var(--neg) 12%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--neg) 45%, transparent); }
.banner.err svg { width: 18px; height: 18px; color: var(--neg); flex: none; }
#side-foot[data-level="err"] { color: var(--neg); font-weight: 600; }
#side-foot[data-level="off"] { color: var(--warn); }

/* ---------- V1.3 : à trier, notes, recherche, accueil, corbeille ---------- */
.stack { display: grid; gap: 14px; }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.sm svg { width: 16px; height: 16px; }
.icon-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* Saisie rapide vers « À trier » */
.capture { display: flex; gap: 8px; margin: 0 0 14px; }
.capture input { flex: 1; min-width: 0; }
.card .capture { margin: 0; }
.sheet .capture { margin: 10px 0 0; }
.inbox-list, .trash-list, .sres-list { list-style: none; margin: 0; padding: 0; }
.inbox-row { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.inbox-row:last-child, .trash-list li:last-child { border-bottom: 0; }
.inbox-row .txt, .trash-list .txt, .sres .txt, .pick .txt { display: grid; min-width: 0; }
.inbox-row b, .trash-list b, .sres b, .pick b { font-weight: 500; overflow-wrap: anywhere; }
.inbox-row small, .trash-list small, .sres small, .pick small { color: var(--muted); font-size: .76rem; }
.inbox-row .acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inbox-row .acts .icon-btn { margin-left: auto; }
.trash-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }

/* Filtres en pastilles */
.notes-bar { display: flex; gap: 8px; }
.notes-bar input { flex: 1; min-width: 0; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink-2); font-size: .82rem; font-weight: 600; }
.fchip:hover { border-color: var(--accent); }
.fchip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fchip .n { font-weight: 500; opacity: .75; }
@media (max-width: 640px) {
  .search .fchips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .search .fchips::-webkit-scrollbar { display: none; }
  .fchip { flex: none; }
}

/* Notes */
.note-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; }
.note-card {
  display: grid; gap: 6px; text-align: left; padding: 14px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--sheet); box-shadow: var(--shadow); color: var(--ink); min-width: 0;
}
.note-card:hover { border-color: var(--accent); }
.note-card.pinned { border-top: 4px solid var(--marker); }
.note-t { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; display: flex; gap: 6px; align-items: flex-start; }
.note-t svg, .note-b svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ink-2); }
.note-b { color: var(--ink-2); font-size: .88rem; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.note-l { display: grid; gap: 3px; font-size: .86rem; }
.note-l > span { display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; min-width: 0; }
.note-l .done { color: var(--muted); text-decoration: line-through; }
.note-l .box { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 4px; border: 1.5px solid var(--muted); display: grid; place-items: center; font-style: normal; }
.note-l .done .box { background: var(--muted); border-color: var(--muted); color: var(--sheet); }
.note-l .box svg { width: 10px; height: 10px; }
.note-l .more { color: var(--muted); font-size: .78rem; }
.note-f { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .74rem; color: var(--muted); }
.note-f:empty { display: none; }
.note-f svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
.tag { color: var(--accent); font-weight: 600; }
.note-top { display: flex; gap: 8px; align-items: center; }
.note-title-in { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem !important; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.checklist li.done .check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.checklist li.done input { text-decoration: line-through; color: var(--muted); }
.checklist input { padding: 7px 9px; }
.checklist .btn.sm { padding: 6px 8px; }
.checklist .btn svg { width: 14px; height: 14px; }
.lchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 500; }
.lchip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--sheet-2); font-size: .84rem; max-width: 100%; }
.lchip .plink { font-weight: 500; font-size: .84rem; }
.lchip .x { border: 0; background: none; color: var(--muted); font-size: 1.05rem; line-height: 1; padding: 0 4px; }
.lchip .x:hover { color: var(--neg); }
.note-link-row { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.note-link-row select { flex: 1; min-width: 0; }
@media (max-width: 480px) { .checklist .btn.sm svg { display: none; } }

/* Recherche */
.sres { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 2px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink); }
.sres-list li:last-child .sres { border-bottom: 0; }
.sres:hover b { color: var(--accent); text-decoration: underline; }
.sres > svg { width: 18px; height: 18px; color: var(--ink-2); }

/* Accueil */
.hero.compact { display: block; margin: 0 0 12px; }
.hello { margin: 0 0 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hello .hand { font-family: var(--f-hand); font-size: 1.5rem; color: var(--accent); line-height: 1; }
.hello b { font-family: var(--f-display); font-size: 1.05rem; }
.hero.compact .hero-sub { margin: 0; max-width: none; font-size: .85rem; }
.ess.prio .task { padding-block: 6px; }
@media (min-width: 640px) { .hello .hand { font-size: 1.8rem; } .hello b { font-size: 1.2rem; } .hero.compact .hero-sub { font-size: .92rem; } }
/* L'essentiel : le prochain rendez-vous, puis les priorités (côte à côte sur grand écran). Le reste à vivre n'y est
   plus : il est en tête de la carte « Ce mois-ci » (V1.20). */
.ess-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "appt" "prio"; margin-bottom: 14px; }
.ess { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--sheet); box-shadow: var(--shadow); text-align: left; color: var(--ink); min-width: 0; }
button.ess:hover { border-color: var(--accent); }
.ess b { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.ess small { color: var(--muted); font-size: .78rem; }
.ess.appt { grid-area: appt; border-left: 4px solid var(--accent); }
.ess.prio { grid-area: prio; border-top: 4px solid var(--marker); }
.ess-head { display: flex; align-items: center; gap: 8px; }
.ess.prio .tasks { margin-top: 2px; }
.ess.prio .empty { padding: 4px 0 0; }
@media (min-width: 900px) { .ess-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "appt prio"; } }
.today-tasks { margin-bottom: 14px; }
/* Téléphone : les deux saisies rapides gardent leur texte d'aide entier ; le bouton n'affiche que son icône. */
@media (max-width: 480px) {
  :is(.capture, .today-tasks .quick) .btn { min-width: 46px; padding-inline: 12px; justify-content: center; }
  :is(.capture, .today-tasks .quick) .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.grid-today:not(:has(.card)) { display: none; }
.shelf { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 14px; }
.grid-today:not(:has(.card)) + .shelf { margin-top: 0; }
.ftile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 8px 10px 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); text-align: left; min-width: 0; }
.ftile:hover { border-color: var(--accent); }
.ftile .txt { display: grid; min-width: 0; }
.ftile b { font-family: var(--f-display); font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftile small { color: var(--muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftile svg { width: 16px; height: 16px; color: var(--muted); transform: rotate(-90deg); }
.fold-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; }
.fold-btn svg { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; flex: none; }
.fold-btn[aria-expanded="false"] svg { transform: rotate(-90deg); }
.fold-btn:hover span { color: var(--accent); }

/* Choix des priorités */
.pick-list { display: grid; gap: 6px; max-height: 55vh; overflow-y: auto; }
.pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--sheet-2); text-align: left; color: var(--ink); }
.pick .box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--muted); display: grid; place-items: center; color: transparent; }
.pick .box svg { width: 12px; height: 12px; }
.pick.on { border-color: var(--accent); background: var(--accent-soft); }
.pick.on .box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Toast avec « Annuler » */
.toast.has-act { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.toast-act { background: none; border: 0; padding: 2px 0; color: var(--marker); font-weight: 700; font-size: .88rem; }
.toast-act:hover { text-decoration: underline; }

/* ============ V1.4 : rendez-vous ============ */
.task.rdv .task-title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); margin-right: 7px; vertical-align: 1px; }
.task-meta b { color: var(--ink-2); font-weight: 600; }
.task-time small { display: block; font-weight: 500; color: var(--muted); font-size: .74rem; }
.rm-list { display: grid; gap: 6px; }
.rm-list:empty { display: none; }
.rm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.rm-row:has(.rm-ref) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.rm-list + .btn, .ck-list + .btn { justify-self: start; }
.ck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ck-list:empty { display: none; }
.ck-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ck-row .ck-done { width: 18px; height: 18px; accent-color: var(--accent); }
.ck-row:has(.ck-done:checked) .ck-text { text-decoration: line-through; color: var(--muted); }
details.fold-sec { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 10px; }
details.fold-sec[open] { padding-bottom: 12px; }
details.fold-sec > summary { cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--ink); }
details.fold-sec[open] > summary { margin-bottom: 10px; }
details.fold-sec > :not(summary) + :not(summary) { margin-top: 10px; }
.hint.depart:empty, .hint.conflict:empty { display: none; }
.hint.depart { color: var(--ink-2); font-weight: 600; }
.hint.conflict { color: var(--neg); font-weight: 600; }
a.btn { text-decoration: none; }

/* ============ V1.5 : organiser son temps ============ */
.every { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 6px; }
.ess-head .link + .link { margin-left: 10px; }
.who-chip { font-weight: 600; color: var(--accent); }
/* Ajout rapide */
.quick-add { display: grid; gap: 8px; margin: 0 0 14px; }
.qa-preview { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 26px; font-size: .84rem; }
.qa-preview .qa-title { font-weight: 600; margin-right: 4px; overflow-wrap: anywhere; }
.qa-preview .chip.kind { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
/* Sous « Ajouter une tâche aujourd'hui » : ce qui a été compris, seulement s'il y a autre chose qu'une tâche du jour */
.qt-hint { margin: 8px 0 0; }
.qt-hint:empty { display: none; }
/* Dates souples : « Pas fait à la date prévue » et son lien, « Quand j'aurai le temps », « Reprendre tranquillement » */
.sub-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sub-row .link { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.sub-row .link, .today-tasks .card-head .link { margin-left: auto; } /* à droite, même passé à la ligne */
.qt-row.sd { grid-template-columns: auto minmax(0, 1fr) auto; }
/* Suite d'une liste trop longue, repliée sous la liste */
.more-list > summary { cursor: pointer; padding: 8px 0 2px; color: var(--accent); font-weight: 600; font-size: .85rem; min-height: 24px; }
.rs-rest { border: 0; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
/* Réglages → Rappels : heure du récapitulatif du jour, sous sa case */
.digest-row { display: grid; gap: 6px; margin: 8px 0 0 28px; }
.digest-row .fld { max-width: 180px; }
.quiet-times { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.quiet-times .fld { flex: 1 1 120px; max-width: 160px; }
.rs-rest legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .9rem; }
/* Plan du jour */
.plan-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pill { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--sheet); font-size: .84rem; color: var(--ink-2); }
.pill b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pill.over { border-color: var(--neg); color: var(--neg); }
.pill.over b { color: var(--neg); }
.pill.ok { border-color: var(--pos); color: var(--pos); }
.plan-win { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plan-win input[type="time"] { width: auto; padding: 4px 8px; font-size: .82rem; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--sheet-2); }
.pl.fixed { background: var(--accent-soft); border-color: transparent; }
.pl.focus { border-color: var(--marker); box-shadow: inset 4px 0 0 var(--marker); }
.pl .tm { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .84rem; display: grid; }
.pl .tm small { color: var(--muted); font-weight: 500; font-size: .74rem; }
.pl .txt { display: grid; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: var(--ink); }
.pl .txt b { font-weight: 500; overflow-wrap: anywhere; }
.pl .txt small, .rep small, .rv-row small, .qt-row small, .tpl small { color: var(--muted); font-size: .76rem; }
.rep-list, .rv-list, .qt-list, .tpl-list { list-style: none; margin: 0; padding: 0; }
.rep { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rep input { width: 18px; height: 18px; accent-color: var(--accent); }
.rep .txt, .rv-row .txt, .qt-row .txt, .tpl .txt { display: grid; min-width: 0; }
.rep b, .rv-row b, .qt-row b, .tpl b { font-weight: 500; overflow-wrap: anywhere; }
/* Revue de la semaine */
.card.rv { margin-bottom: 14px; }
.rv-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--marker); color: var(--on-marker); font-weight: 700; font-size: .85rem; flex: none; }
.rv-row { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rv-row:last-child, .qt-row:last-child, .tpl:last-child, .rep:last-child { border-bottom: 0; }
.rv-row .warn { color: var(--warn); }
@media (min-width: 720px) { .rv-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.review-cta { display: flex; gap: 12px; align-items: center; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--ink); text-align: left; }
.review-cta svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.review-cta span { display: grid; }
.review-cta small { color: var(--muted); font-size: .78rem; }
/* J'ai 15 minutes, modèles */
.sheet-form .fchips { margin: 0; }
.qt-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.qt-row .txt { background: none; border: 0; padding: 0; text-align: left; color: var(--ink); }
.tpl { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.plan-win .full { flex-basis: 100%; }

/* ============ V1.6 : foyer, menus, dossiers, anniversaires, abonnements, concentration ============ */
.row3 { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.agenda-top .seg + .seg { margin-left: 0; }
.bday-list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.tag.dossier { color: var(--warn); font-weight: 600; }
.fold-sec.dossier { display: grid; gap: 10px; }
.card.person { margin-bottom: 12px; }
/* Menus */
.meal-grid { display: grid; gap: 8px; }
.meal-day { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.meal-day .md { font-size: .82rem; font-weight: 600; color: var(--ink-2); align-self: center; }
.meal-day.today .md { color: var(--accent); }
.meal { display: grid; gap: 1px; align-content: start; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); min-width: 0; }
.meal.empty { border-style: dashed; background: transparent; }
.meal small { color: var(--muted); font-size: .76rem; }
.meal b { font-weight: 600; font-size: .88rem; overflow-wrap: anywhere; }
.meal i { font-style: normal; color: var(--muted); font-size: .74rem; }
/* Mode concentration */
#focus-root { position: fixed; inset: 0; z-index: 65; background: var(--paper, var(--bg)); display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.focus-box { width: min(560px, 100%); display: grid; gap: 16px; justify-items: center; text-align: center; }
.focus-box h2 { font-family: var(--f-display); font-size: clamp(1.5rem, 6vw, 2.2rem); margin: 0; overflow-wrap: anywhere; }
.focus-box .hchips, .focus-box .fchips, .focus-box .btn-row { justify-content: center; }
.focus-timer { font-family: var(--f-display); font-size: clamp(2.4rem, 12vw, 4rem); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }

/* ============ V1.7 : simplification ============ */
/* Menus Ajouter et Plus : groupes, 4 grands choix, le reste replié */
.sub-label.menu-group { color: var(--muted); margin: 16px 0 0; }
.chooser.daily .choice { padding: 16px 14px; }
.chooser.daily .choice b { display: flex; align-items: center; gap: 8px; }
.chooser.daily .choice svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
details.add-more, details.add-write { margin-top: 14px; } /* les deux volets du menu « + », sous les choix de tous les jours */
details.add-more .chooser { margin-top: 0; }
/* « Plus d'options » des formulaires : le résumé dit ce qui est rempli */
details.opts > summary small { font-weight: 500; font-size: .8rem; }
details.opts > summary .opt-hint { color: var(--muted); }
details.opts > summary .opt-set { color: var(--accent); }
/* Réglages : personnaliser mon accueil */
.mod-list { display: grid; gap: 10px; margin-top: 12px; }
.mod-list small { color: var(--muted); font-weight: 400; }
.btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
@media (min-width: 900px) {
  .nav-group { padding: 14px 12px 4px; font-size: .8rem; font-weight: 600; color: var(--muted); }
  .nav-group:empty { padding: 6px 0 0; }
  /* Colonne de gauche : outils occasionnels en groupes repliables */
  .nav-fold { display: grid; gap: 4px; }
  .nav-fold > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; border-radius: 8px; }
  .nav-fold > summary::-webkit-details-marker { display: none; }
  .nav-fold > summary:hover { color: var(--ink); }
  .nav-fold > summary svg { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s; flex: none; }
  .nav-fold[open] > summary svg { transform: none; }
}
/* Tâches du jour : la note et les sous-tâches sous la tâche, avec « Me concentrer » */
.task-more { grid-column: 2 / -1; display: grid; gap: 4px; justify-items: start; min-width: 0; margin-top: -4px; }
.task-note { margin: 0; font-size: .84rem; line-height: 1.4; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.task-subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; width: 100%; }
.task-subs .sub { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 5px 0; color: var(--ink); font-size: .86rem; text-align: left; overflow-wrap: anywhere; }
.task-subs .sub .box { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--muted); display: grid; place-items: center; color: transparent; flex: none; }
.task-subs .sub .box svg { width: 12px; height: 12px; }
.task-subs .sub.on .box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.task-subs .sub.on span:last-child { text-decoration: line-through; color: var(--muted); }
.focus-link { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
.focus-link svg { width: 14px; height: 14px; }
.focus-note { margin: 0; max-width: 46ch; font-size: 1rem; line-height: 1.5; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
/* Liens vers les pages publiques (aide, confidentialité, suppression de compte) : réglages et écran de connexion */
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: .85rem; }
.legal-links a { color: var(--accent); font-weight: 600; text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.legal-links a:hover { text-decoration: underline; }
.nowrap { white-space: nowrap; }
.rs-rest .toggle select { flex: 1 1 auto; min-width: 0; } /* « Le confier à » reste sur une ligne, le menu prend la place */

/* ============ V1.19.1 : lisibilité et confort sur téléphone ============ */
/* Suite d'informations séparées par un point (détails d'une tâche, d'un objectif) : le point reste entre deux
   éléments d'une même ligne, jamais seul en fin ni en début de ligne. Chaque élément porte son point à sa gauche ;
   celui du premier de chaque ligne tombe dans la marge, qui est coupée. */
.bits { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 0; margin-left: -1.1em; clip-path: inset(0 0 0 1.1em); min-width: 0; }
.bits > * { position: relative; padding-left: 1.1em; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.bits > *::before { content: "·"; position: absolute; left: 0; width: 1.1em; text-align: center; color: var(--muted); font-weight: 400; }
.goal-foot .bits { flex: 1 1 auto; }
.goal-foot > .btn { margin-left: auto; }

/* En-tête : quand la place manque (fitTop dans app.js), le bouton du carnet ne garde que son icône, puis le titre
   passe en plus petit, sur deux lignes au besoin, au lieu d'être coupé (« Revue de la se… »). */
.carnet-chip .chip-ic { display: none; }
.top.chip-mini .carnet-chip { flex: none; gap: 2px; padding-inline: 9px 6px; }
.top.chip-mini .carnet-chip span { display: none; }
.top.chip-mini .carnet-chip .chip-ic { display: block; width: 17px; height: 17px; }
.top.title-sm h1 { font-size: 1.12rem; line-height: 1.15; white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.locked .brand-sm { display: none; } /* connexion, bienvenue : le nom de l'app est déjà en grand dans la carte */

/* Réglages : le titre d'une rubrique ne se coupe plus ; sur téléphone, son résumé passe dessous. */
.set-sec > summary h2 { flex: 0 0 auto; max-width: 100%; white-space: normal; overflow: visible; }
/* Repliée, « Apparence » a la hauteur des autres rubriques (ni intervalle sous le titre, ni marge propre). */
.appearance-card:not([open]) { gap: 0; }
.appearance-card.set-sec:not([open]) > summary { margin: -4px 0; }
@media (max-width: 560px) {
  .set-sec > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; align-items: center; }
  .set-sec > summary h2, .set-sec > summary .count { grid-column: 1; }
  .set-sec > summary .count { white-space: normal; overflow: visible; }
  .set-sec > summary .sp { display: none; }
  .set-sec > summary > svg { grid-column: 2; grid-row: 1 / span 2; }
}

/* Prochain rendez-vous (accueil) : quand, heure de départ et lieu chacun sur sa ligne. */
.ess small.dep { color: var(--ink-2); font-weight: 600; }
.ess small.place { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }

/* Zones à toucher : la case d'une tâche et les petits liens d'en-tête offrent environ 40 px au doigt, sans changer
   de taille à l'œil (la case fait toujours 24 px, la zone déborde de 10 px autour, 8 px du côté du titre). */
.task > .check, .qt-row > .check { position: relative; }
.task > .check::after, .qt-row > .check::after { content: ""; position: absolute; inset: -12px -10px -12px -12px; }
.card-head .link, .sub-row .link, .ess-head .link { padding-block: 10px; margin-block: -10px; }
.focus-link { padding-block: 4px 12px; margin-block: -4px -12px; }

/* Longs formulaires (ceux qui ont « Plus d'options ») et note : les boutons du bas restent à portée pendant qu'on
   fait défiler, au lieu d'attendre tout en bas. La colonne en flex (et non en grille) laisse la rangée se fixer. */
.sheet { --sheet-t: 20px; --sheet-l: max(18px, env(safe-area-inset-left, 0px)); --sheet-r: max(18px, env(safe-area-inset-right, 0px)); --sheet-b: calc(18px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 640px) { .sheet { --sheet-t: 22px; --sheet-l: 22px; --sheet-r: 22px; --sheet-b: 22px; } }
/* Le formulaire descend jusqu'au bord de la fenêtre (marge négative égale au retrait du bas), et la rangée se fixe
   à ce bord : le navigateur compte la position fixée depuis l'intérieur du retrait, d'où le « bottom » négatif. Elle
   couvre ainsi toute la bande du bas, sans laisser voir le formulaire dessous. */
.sheet-form:has(> details.opts), .note-ed > .sheet-form { display: flex; flex-direction: column; margin-bottom: calc(-1 * var(--sheet-b)); }
.sheet-form:has(> details.opts) > .actions, .note-ed > .sheet-form > .actions {
  position: sticky; bottom: calc(-1 * var(--sheet-b)); z-index: 2; background: var(--sheet); border-top: 1px solid var(--line);
  margin: 0 calc(-1 * var(--sheet-r)) 0 calc(-1 * var(--sheet-l));
  padding: 10px var(--sheet-r) var(--sheet-b) var(--sheet-l);
}

/* Note : le texte grandit avec ce qu'on écrit (navigateurs récents), « Enregistré automatiquement » au-dessus des boutons sur téléphone. */
#n-body { field-sizing: content; min-height: 5.5em; }
.note-foot .saved { font-size: .78rem; }
@media (max-width: 560px) { .note-foot { row-gap: 2px; } .note-foot .saved { order: -1; flex: 1 1 100%; text-align: right; } }

/* ============ V1.19.2 : bienvenue, une question et deux réponses ============ */
/* Les deux réponses sont de vrais boutons radio : le champ, invisible, couvre toute la carte (souris, doigt, clavier) ;
   la carte qui le suit porte l'aspect. La coche a les couleurs de celle d'une tâche faite, dans un rond (un seul choix). */
.onboard h1 { text-wrap: balance; } /* dans le titre, « veux-tu » et « commencer ? » ne se coupent pas (.nowrap) */
.ob-choices { display: grid; gap: 10px; }
.ob-choice { position: relative; display: block; }
.ob-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ob-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet-2); }
.ob-mark { width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; color: var(--accent-ink); }
.ob-mark svg { width: 14px; height: 14px; visibility: hidden; } /* cachée pour de bon : une couleur transparente réapparaît en contraste élevé */
.ob-txt { display: grid; gap: 3px; min-width: 0; }
.ob-txt b { font-family: var(--f-display); font-size: 1.12rem; line-height: 1.25; }
.ob-txt small { font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.ob-choice:hover .ob-card { border-color: var(--accent); }
.ob-choice input:checked + .ob-card { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.ob-choice input:checked + .ob-card .ob-mark { background: var(--accent); border-color: var(--accent); }
.ob-choice input:checked + .ob-card .ob-mark svg { visibility: visible; }
.ob-choice input:focus-visible + .ob-card { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Monnaie, demandée au premier montant (budget et écrans d'argent encore vides) : une ligne discrète, déjà remplie,
   que la plupart laisseront telle quelle ; la précision passe dessous si la place manque. */
.cur-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; font-size: .84rem; color: var(--ink-2); }
.cur-ask label { font-weight: 600; }
.cur-ask select { width: auto; max-width: 100%; padding: 8px 10px; font-size: .84rem; background: var(--sheet); }
.cur-ask small { flex: 1 1 170px; color: var(--muted); font-size: .78rem; }
.stack > .cur-ask { margin-bottom: 0; } /* Abonnements : l'écart vient déjà de la colonne */

/* ============ V1.19.3 ============ */
/* Menu « + » : avec trois choix de tous les jours (budget décoché), le dernier prend toute la largeur au lieu de
   laisser une case vide. */
.chooser.daily .choice:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ============ V1.20 : accueil arrangé par l'utilisateur ============ */
/* Reste à vivre, en tête de la carte « Ce mois-ci » (il n'a plus sa tuile dans l'essentiel). */
.month-lead { display: grid; gap: 1px; }
.month-lead b { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.month-lead b small { font-family: var(--f-body); font-size: .8rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.month-lead b.neg { color: var(--neg); }

/* Blocs dans l'ordre choisi (accueil arrangé) : des voisins de même nature sont réunis. Tuiles de l'essentiel côte à
   côte quand la place le permet ; cartes dépliées sur deux colonnes à partir de 760 px ; cartes repliées en tuiles. */
.ess-grid.flow { grid-template-areas: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ess-grid.flow > .ess { grid-area: auto; }
.cards-flow { display: grid; gap: 14px; margin-bottom: 14px; }
.shelf.flow { margin: 0 0 14px; }
@media (min-width: 760px) {
  .cards-flow { display: block; column-count: 2; column-gap: 14px; margin-bottom: 0; }
  .cards-flow > .card { break-inside: avoid; margin-bottom: 14px; }
  .cards-flow > .card:only-child { column-span: all; }
}

/* Le lien discret en bas de l'accueil, pour qui ne connaît pas l'appui long. */
.home-edit { margin: 16px 0 0; text-align: center; }
.home-edit .link { min-height: 44px; padding-inline: 14px; color: var(--muted); font-size: .86rem; }

/* « Modifier l'accueil » : une ligne par bloc, avec ses boutons. */
.he-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.he-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sheet-2); }
.he-row.hit { border-color: var(--accent); background: var(--accent-soft); }
.he-name { display: grid; gap: 1px; min-width: 0; }
.he-name b { font-weight: 600; overflow-wrap: anywhere; }
.he-name small { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.he-row.hit .he-name small { color: var(--ink-2); }
.he-row .icon-btn { width: 40px; height: 40px; background: var(--sheet); }
.he-row .icon-btn:disabled { opacity: .3; }
.he-row .he-del { color: var(--neg); }
.he-row .he-add { color: var(--accent); border-color: var(--accent); }
.he-fixed { width: 40px; }
/* À la taille normale, une ligne par bloc : la liste reste courte, on en voit une dizaine d'un coup. Sur un écran
   très étroit, ou sur téléphone avec le texte agrandi, le nom ne tient plus entre trois boutons : il prend sa ligne,
   les commandes passent dessous, à droite, avec des cibles de 44 px. */
@media (max-width: 340px) {
  .he-row { grid-template-columns: minmax(0, 1fr) 44px 44px 44px; row-gap: 8px; padding: 12px; }
  .he-name { grid-column: 1 / -1; }
  .he-row > .icon-btn:nth-child(2) { grid-column: 2; }
  .he-row > .icon-btn:nth-child(3) { grid-column: 3; }
  .he-row > :is(.he-del, .he-fixed) { grid-column: 4; }
  .he-row > .icon-btn.he-add { grid-column: 4; } /* « À ajouter » : un seul bouton, à droite lui aussi */
  .he-row .icon-btn { width: 44px; height: 44px; }
  .he-fixed { width: 44px; }
}
@media (max-width: 560px) {
  :root:is([data-text="grand"], [data-text="tres-grand"]) .he-row { grid-template-columns: minmax(0, 1fr) 44px 44px 44px; row-gap: 8px; padding: 12px; }
  :root:is([data-text="grand"], [data-text="tres-grand"]) .he-name { grid-column: 1 / -1; }
  :root:is([data-text="grand"], [data-text="tres-grand"]) .he-row > .icon-btn:nth-child(2) { grid-column: 2; }
  :root:is([data-text="grand"], [data-text="tres-grand"]) .he-row > .icon-btn:nth-child(3) { grid-column: 3; }
  :root:is([data-text="grand"], [data-text="tres-grand"]) .he-row > :is(.he-del, .he-fixed) { grid-column: 4; }
  :root:is([data-text="grand"], [data-text="tres-grand"]) .he-row > .icon-btn.he-add { grid-column: 4; }
  :root:is([data-text="grand"], [data-text="tres-grand"]) .he-row .icon-btn { width: 44px; height: 44px; }
  :root:is([data-text="grand"], [data-text="tres-grand"]) .he-fixed { width: 44px; }
}
/* La liste peut dépasser la hauteur de la fenêtre (13 blocs) : le titre reste en haut et « Terminé » en bas pendant
   qu'elle défile, comme les boutons des longs formulaires. La colonne va d'un bord à l'autre de la fenêtre (marges
   négatives égales aux retraits du haut et du bas) et les deux bandes couvrent toute la largeur. */
.home-editor { display: flex; flex-direction: column; margin-block: calc(-1 * var(--sheet-t)) calc(-1 * var(--sheet-b)); }
.home-editor > h2 {
  position: sticky; top: calc(-1 * var(--sheet-t)); z-index: 2; background: var(--sheet); border-bottom: 1px solid var(--line);
  margin: 0 calc(-1 * var(--sheet-r)) 0 calc(-1 * var(--sheet-l));
  padding: var(--sheet-t) var(--sheet-r) 10px var(--sheet-l);
}
.home-editor > .actions {
  position: sticky; bottom: calc(-1 * var(--sheet-b)); z-index: 2; background: var(--sheet); border-top: 1px solid var(--line);
  margin: 0 calc(-1 * var(--sheet-r)) 0 calc(-1 * var(--sheet-l));
  padding: 10px var(--sheet-r) var(--sheet-b) var(--sheet-l);
}
/* Au clavier, un bouton atteint sous l'une des deux bandes est ramené dans la partie visible. */
.sheet:has(> .home-editor) { scroll-padding-block: 4.5rem 5.5rem; }

/* Appui long sur un bloc de l'accueil (écran tactile) : il ouvre « Modifier l'accueil », sans sélection de texte ni
   menu du système. Les champs de saisie gardent leur comportement (coller, corriger). */
@media (pointer: coarse) {
  #view :is([data-w], form.capture) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  #view :is([data-w], form.capture) :is(input, textarea) { -webkit-user-select: text; user-select: text; }
}

/* ============ V1.21 : Agenda, la journée heure par heure ============ */
/* Échelle en rem (elle suit la taille du texte) : une heure = --tl-h. Chaque élément porte sa position (--y, en heures
   depuis le haut de l'échelle), sa durée (--dy) et, quand des éléments se chevauchent, sa colonne (--c sur --n).
   Les couleurs viennent du style choisi (accent, feuille, filets) : rien à redéfinir pour le mode sombre. */
.tl-label { font-size: .82rem; font-weight: 600; color: var(--ink-2); margin: 10px 0 2px; }
.tl { --tl-h: 3.25rem; --tl-g: 2.9rem; position: relative; height: calc(var(--tl-h) * var(--hours)); margin: 1.1rem 0 .5rem; }
.tl-hours { position: absolute; inset: 0; }
.tl-hour { position: absolute; left: var(--tl-g); right: 0; top: calc(var(--tl-h) * var(--y)); border-top: 1px solid var(--line); }
.tl-hour span { position: absolute; right: calc(100% + .45rem); top: -.62em; font-size: .74rem; line-height: 1.2; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-lane { position: absolute; top: 0; bottom: 0; left: calc(var(--tl-g) + 4px); right: 0; margin: 0; padding: 0; list-style: none; }
.tl-ev, .tl-free { position: absolute; box-sizing: border-box; top: calc(var(--tl-h) * var(--y) + 1px); }
.tl-ev { z-index: 1; left: calc(100% * var(--c) / var(--n)); width: calc(100% / var(--n) - 4px); height: max(calc(var(--tl-h) * var(--dy) - 2px), 2.25rem); display: flex; overflow: hidden; border-radius: var(--r-sm); }
.tl-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: .35rem .6rem; border: 0; background: none; color: inherit; text-align: left; font: inherit; }
.tl-open b { font-size: .86rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-open small { font-size: .74rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rendez-vous : un bloc plein, le trajet en hachures au-dessus ; « à confirmer » : en pointillés. */
.tl-ev.rdv { flex-direction: column; background: var(--accent); color: var(--accent-ink); }
.tl-ev.rdv.tentative { background: var(--sheet); color: var(--ink); border: 1.5px dashed var(--accent); }
.tl-ev.rdv.tentative small { color: var(--muted); }
.tl-trip { flex: none; height: calc(var(--tl-h) * var(--tr)); display: flex; align-items: center; padding: 0 .6rem; font-size: .72rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; background: repeating-linear-gradient(135deg, var(--accent-soft) 0 6px, var(--sheet-2) 6px 12px); }
/* Tâche à heure fixe : un cadre, la case à cocher du style choisi. */
.tl-ev.tl-task { align-items: flex-start; padding-left: .45rem; border: 1.5px solid var(--accent); background: var(--sheet); color: var(--ink); }
.tl-ev.tl-task small { color: var(--muted); }
.tl-ev .check { flex: none; position: relative; width: 1.3rem; height: 1.3rem; margin-top: .4rem; }
.tl-ev .check::after { content: ""; position: absolute; inset: -10px -8px -10px -6px; } /* une zone de 40 px environ au doigt */
/* Court (moins de 50 min environ) : le titre puis l'heure sur une seule ligne, le titre gardé en priorité. */
.tl-ev.short .tl-open { flex-direction: row; align-items: center; gap: .45rem; padding-block: 0; }
.tl-ev.short .tl-open b { flex: 0 1 auto; min-width: 0; }
.tl-ev.short .tl-open small { flex: 0 3 auto; min-width: 0; }
.tl-ev.tl-task.short { align-items: center; }
.tl-ev.short .check { margin-top: 0; }
.tl-ev.done { opacity: .6; }
.tl-ev.done b { text-decoration: line-through; }
.tl-ev.done .check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* Aujourd'hui : le temps libre jusqu'au prochain élément, et le trait de l'heure qu'il est. */
.tl-free { left: 0; right: 4px; height: calc(var(--tl-h) * var(--dy) - 6px); margin-top: 2px; display: grid; place-content: center; gap: 2px; padding: 0 .5rem; text-align: center; border: 1.5px dashed var(--line); border-color: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: var(--r-sm); color: var(--ink-2); font-size: .84rem; overflow: hidden; }
.tl-free b { font-weight: 600; }
.tl-free small { font-size: .76rem; color: var(--muted); }
.tl-now { position: absolute; z-index: 2; left: calc(var(--tl-g) - 2px); right: 0; top: calc(var(--tl-h) * var(--y)); height: 2px; margin-top: -1px; background: var(--neg); pointer-events: none; }
.tl-now::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--neg); }
.tl-now span { position: absolute; right: calc(100% + 4px); top: -.6rem; padding: 0 .3rem; border-radius: 999px; background: var(--neg); color: var(--sheet); font-size: .7rem; font-weight: 700; line-height: 1.2rem; font-variant-numeric: tabular-nums; }