:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --text: #1c1c22;
  --muted: #6b6b76;
  --line: #e2e2e8;
  --accent: #4338ca;
  --accent-text: #ffffff;
  --rec: #dc2626;
  --warn: #b45309;
  --ok: #15803d;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111114;
    --surface: #1c1c21;
    --text: #ececf1;
    --muted: #9a9aa6;
    --line: #2e2e36;
    --accent: #6366f1;
    --rec: #ef4444;
    --warn: #f59e0b;
    --ok: #178a43;
  }
}

* { box-sizing: border-box; }

/* Le défilement vertical reste au navigateur ; le geste de côté est à nous
   (changer d'onglet, `common.js`) : sans cela il reprendrait le doigt. Sur
   `html` et non `body` : une page courte laisse sous le corps une zone vide,
   celle où l'on glisse le plus volontiers, qui n'appartient qu'à `html`. Les
   barres qui défilent de côté (`.chips`) sont leur propre zone de défilement
   et gardent le leur. */
html { touch-action: pan-y pinch-zoom; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 16px 4px;
}

nav { display: flex; gap: 4px; }
nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
}
nav a[aria-current="page"] { color: var(--text); background: var(--surface); }
/* Quatre onglets : sur un téléphone étroit, on resserre pour que le compte
   et la roue des réglages restent entiers. */
@media (max-width: 420px) {
  nav { flex-shrink: 0; gap: 0; }
  nav a { font-size: 16px; padding: 6px 8px; }
}
.muted { color: var(--muted); font-size: 13px; }

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px max(24px, env(safe-area-inset-bottom));
}

/* --- enregistreur --- */

.recorder {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0 12px;
}

#rec {
  width: 152px;
  height: 152px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 24px rgb(67 56 202 / 0.35);
  transition: background 0.15s, transform 0.1s;
  touch-action: manipulation;
}
#rec:active { transform: scale(0.97); }
#rec svg { width: 64px; height: 64px; grid-area: 1 / 1; }
#rec .icon-mic rect { fill: currentColor; }
#rec .icon-mic path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#rec .icon-stop rect { fill: currentColor; }
#rec .icon-stop, #rec .spinner { display: none; }

body.recording #rec { background: var(--rec); animation: pulse 1.6s ease-in-out infinite; }
body.recording #rec .icon-mic { display: none; }
body.recording #rec .icon-stop { display: block; }

body.sending #rec { opacity: 0.6; }
body.sending #rec .icon-mic { display: none; }
body.sending #rec .spinner {
  display: block;
  grid-area: 1 / 1;
  width: 56px;
  height: 56px;
  border: 5px solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes pulse {
  50% { box-shadow: 0 0 0 18px rgb(220 38 38 / 0.12); }
}
@keyframes spin { to { transform: rotate(360deg); } }

#hint {
  margin: 16px 0 0;
  text-align: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* « Annuler » : seulement pendant l'enregistrement, et discret, pour ne pas
   se confondre avec le grand bouton qui envoie. */
#cancel {
  display: none;
  margin-top: 14px;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  touch-action: manipulation;
}
body.recording #cancel { display: block; }

/* --- saisie texte --- */

details {
  margin: 8px 0 16px;
  text-align: center;
}
summary { color: var(--muted); cursor: pointer; font-size: 14px; }
#text-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
textarea {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
#text-form button, .card .primary {
  align-self: flex-end;
  border: 0;
  border-radius: 10px;
  padding: 8px 18px;
  background: var(--accent);
  color: var(--accent-text);
}

/* --- aujourd'hui : les tâches dues, repliées sous le bouton de dictée --- */

/* Pendant l'enregistrement, rien ne doit détourner du geste en cours. */
body.recording #today { display: none; }
#today { text-align: left; }
#today summary { text-align: center; }
#today-list { list-style: none; margin: 10px 0 0; padding: 0; }
#today-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px 0 4px;
  margin-bottom: 6px;
}
#today-list li > label { min-height: 44px; }
#today-list .title { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 8px 0; }
#today-list .due { flex: none; }
#today-status:empty { display: none; }
.today-more { margin: 4px 0 0; text-align: center; font-size: 14px; }
.today-more a { color: var(--accent); }

/* --- cartes résultat --- */

#cards { display: flex; flex-direction: column; gap: 12px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}
.card.error { border-color: var(--warn); }
.card.pending .summary { color: var(--muted); }
.card .heard {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-style: italic;
  overflow-wrap: anywhere;
}
.card .summary { white-space: pre-line; overflow-wrap: anywhere; }
.card .summary a { color: var(--accent); }
.card .status {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  white-space: pre-line;
}
.card .status:empty { display: none; }

.card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.card .actions:empty { display: none; }
.card .actions.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-height: 260px;
  overflow-y: auto;
}
.card .actions button {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 40px;
  text-align: left;
}
.card .actions button .dot { margin-right: 8px; vertical-align: -1px; }
.card .actions button.back { grid-column: 1 / -1; text-align: center; }
.card .actions button.ghost { border-style: dashed; color: var(--muted); }
/* « Réessayer » : `.card .actions button` lui ôtait son fond, et son texte blanc
   (`.card .primary`) se perdait sur la carte. */
.card .actions button.primary { background: var(--accent); border-color: var(--accent); }
.card .actions button:disabled { opacity: 0.5; }

/* --- courses --- */

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0 4px;
  scrollbar-width: none;
}
.chip {
  flex: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 36px;
}
.chip[aria-selected="true"], .chip[aria-pressed="true"], .chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.chip.ghost { background: transparent; color: var(--muted); }

.add { display: flex; gap: 8px; margin: 10px 0 4px; }
.add input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}
.add button {
  width: 46px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 24px;
  line-height: 1;
}

#status:empty { display: none; }

/* `.items` et `.notes` sont positionnées et isolées : le fond du balayage
   (voir plus bas) s'y ajoute le temps d'un geste, derrière les lignes.
   `overflow-x: clip` : une ligne qui sort à droite ne doit pas élargir la
   page (à gauche, rien ne déborde). */
.items { list-style: none; margin: 8px 0 0; padding: 0; position: relative; isolation: isolate; overflow-x: clip; }
.item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 8px 4px 4px;
  margin-bottom: 6px;
}
.check {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding-left: 8px;
  cursor: pointer;
}
.check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.check .title { overflow-wrap: anywhere; }
.item.done .title { text-decoration: line-through; color: var(--muted); }
.where {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  padding: 8px 6px;
  max-width: 45%;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.where.unset { opacity: 0.6; }
.due {
  flex: none;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  padding-right: 6px;
}
.due.late { color: var(--warn); font-weight: 600; }
.items .section, .notes .section { color: var(--muted); font-size: 13px; margin: 18px 0 6px 4px; }
.items .empty { color: var(--muted); text-align: center; padding: 28px 0; }
/* Courses : « N pas trouvés ici · Réafficher », sous les articles à acheter. */
.items .away { color: var(--muted); font-size: 14px; text-align: center; padding: 10px 0; }
.items .away .link { font-size: 14px; padding: 8px 6px; margin: -8px 0; }

/* --- tâches : la case seule coche, le nom ouvre un tiroir --- */

/* La case a sa propre zone d'appui (44 px de large, la hauteur d'une ligne) :
   la ligne entière ne coche plus. */
.tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 48px;
  cursor: pointer;
}
.tick input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
/* Le nom est un bouton sur le reste de la ligne. */
.item > .title {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 8px 6px;
  border: 0;
  background: transparent;
  text-align: left;
  overflow-wrap: anywhere;
}
/* La ligne ouverte et son tiroir ne font qu'un bloc. */
.item.open {
  margin-bottom: 0;
  border-color: var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.drawer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 6px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-top: 0;
  border-radius: 0 0 12px 12px;
}
.drawer .title-edit {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}
.drawer .chips { padding: 0; }
.drawer .chip, .drawer .secondary { min-height: 44px; }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* « Répéter » : le mot, les puces, la règle en toutes lettres, et le
   formulaire « Autre… » (les puces et le bouton sont ceux du tiroir). */
.repeat { display: flex; flex-direction: column; gap: 8px; }
.repeat > .muted, .repeat .repeat-label { margin: 0; }
.repeat-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.repeat-form input[type="number"], .repeat-form select {
  font: inherit;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}
.repeat-form input[type="number"] { width: 4.5em; }
.repeat-form .chips, .repeat-form .after { flex-basis: 100%; }
/* Sept jours sur une ligne, même à 375 px : ils se partagent la largeur. */
.repeat-form .chips.days { gap: 4px; overflow: visible; }
.repeat-form .chip.day { flex: 1 1 0; min-width: 0; padding: 6px 0; text-align: center; }
.repeat-form .after { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.repeat-form .after input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
.repeat-form .primary { min-height: 44px; margin-left: auto; }
/* « 📅 » : un champ date transparent recouvre la puce, le toucher l'ouvre. */
.chip.date { position: relative; display: inline-flex; align-items: center; overflow: hidden; }
.chip.date input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* --- balayage : « À planifier » à gauche, « Fait » à droite --- */

/* `pan-y` : le défilement vertical reste au navigateur, le reste est à nous. */
.swipeable { touch-action: pan-y; transition: transform 0.2s ease-out; }
.swipeable.swiping { transition: none; user-select: none; -webkit-user-select: none; }
.swipe-reveal {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  /* La ligne part à gauche (`to-left`) : le texte se lit à droite. */
  justify-content: flex-end;
  padding-right: 18px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.15s;
}
.swipe-reveal.to-right { justify-content: flex-start; padding: 0 0 0 18px; }
/* Ce qui règle la ligne (cocher, archiver) : vert, texte blanc lisible. */
.swipe-reveal.done { background: var(--ok); }
/* Ce qui supprime : rouge, comme le reste de ce qui ne se défait pas d'un geste. */
.swipe-reveal.delete { background: var(--rec); }
/* Passé le seuil, relâcher déclenche : le fond s'affirme. */
.swipe-reveal.armed { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .swipeable, .swipe-reveal { transition: none; }
}

/* Changer d'onglet d'un geste : la page part du côté du doigt avant que la
   suivante s'ouvre. Sans mouvement réduit seulement (common.js navigue tout de
   suite sinon). */
main.tab-leaving {
  transform: translateX(var(--tab-shift, 0));
  opacity: 0;
  transition: transform 0.15s ease-in, opacity 0.15s ease-in;
}

/* « Annuler » dans la ligne de statut : zone d'appui large, sans grossir la ligne. */
.undo {
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  padding: 8px 6px;
  margin: -8px -6px;
}

/* --- notes --- */

.notes { list-style: none; margin: 8px 0 0; padding: 0; position: relative; isolation: isolate; overflow-x: clip; }
.notes li { margin-bottom: 6px; }
.note-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
  /* Un appui long entre en sélection : ni menu du lien (Android, iOS), ni
     texte pris. Le texte reste sélectionnable dans l'éditeur. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* La couleur du dossier arrive par `--folder` (notes.js) ; sans dossier, la
   carte garde sa bordure neutre. Le padding rend les 3 px pris à la bordure. */
.note-card.filed { border-left: 4px solid var(--folder); padding-left: 11px; }
.note-card .excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notes .empty { color: var(--muted); text-align: center; padding: 28px 0; }
#list-status:empty, #edit-status:empty { display: none; }

/* --- dossiers : pastilles, sections, dialogues --- */

/* Neutre tant que `--folder` n'est pas posé : « Sans dossier ». */
.dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--folder, var(--muted));
}
.chip .dot { margin-right: 6px; }
.chip .count { margin-left: 2px; opacity: 0.7; }
/* Sur une puce choisie (fond d'accent), un anneau garde la pastille visible. */
.chip[aria-selected="true"] .dot, .chip[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85); }
.chips.wrap { flex-wrap: wrap; overflow: visible; }

.folder-line { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.folder-line .link { font-size: 14px; padding: 8px 6px; margin: -8px -6px; }

/* En-tête de section de « Toutes » (dossiers des Notes, magasins des Courses) :
   un bouton sur toute la largeur. */
.notes .folder-head, .items .folder-head { margin: 14px 0 6px; }
.notes .folder-head:first-child, .items .folder-head:first-child { margin-top: 0; }
.folder-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--folder, var(--line));
  border-radius: 12px;
}
.folder-toggle .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-toggle .count { color: var(--muted); font-size: 13px; font-weight: 400; }
/* La flèche à gauche, comme celle d'« Aujourd'hui » et d'« Écrire plutôt » :
   au bout à droite, « ▸ » semblait mener ailleurs plutôt que déplier. Une
   largeur fixe : passer de « ▸ » à « ▾ » ne décale pas le nom. */
.folder-toggle .chevron { color: var(--muted); order: -1; width: 1em; text-align: center; }
/* Notes : « 🗄 Archivées (n) », sous la liste, replié ; même bouton que « À venir ». */
.notes.archived { margin-top: 22px; }
.notes.archived .folder-head:first-child { margin-top: 0; }
.notes .section .dot { margin-right: 6px; }
.note-card.archived-card { opacity: 0.85; }
/* Tâches : « 🔁 À venir (n) », replié, sans couleur de groupe. */
.folder-toggle.upcoming { border-left-width: 1px; font-weight: 500; color: var(--muted); }
/* Pendant une recherche tout est ouvert : rien à plier, le bouton se tait. */
.folder-toggle:disabled { cursor: default; }
.folder-toggle:disabled .chevron { visibility: hidden; }

/* --- sélection multiple --- */

/* Le ☑ à côté du « + » : l'entrée visible pour qui ne connaît pas l'appui long. */
.add button.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 20px;
}

/* La barre est fixe : on garde de la place sous la liste pour que la
   dernière note ne passe pas dessous. */
#list-view.selecting { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.selection-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Le contenu s'aligne sur la colonne de `main` (560 px, 16 px de marge). */
  padding: 10px max(16px, calc((100% - 560px) / 2 + 16px)) calc(10px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.selection-bar .link { font-size: 20px; line-height: 1; padding: 10px 12px; margin: 0 -4px 0 -12px; }
.select-count { flex: 1; min-width: 0; font-weight: 600; }
.selection-bar .primary { min-height: 40px; }

/* En sélection, chaque carte porte un rond à cocher ; cochée, elle prend
   un fond teinté, un anneau et un ✓. L'anneau est une ombre : il ne touche
   pas à la bordure de couleur du dossier. */
#list-view.selecting .note-card { padding-right: 46px; }
#list-view.selecting .note-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  color: var(--accent-text);
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}
#list-view.selecting .note-card[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--accent);
}
#list-view.selecting .note-card[aria-pressed="true"]::after {
  content: "✓";
  background: var(--accent);
  border-color: var(--accent);
}

/* --- dialogues : ranger, modifier un dossier --- */

.sheet {
  width: min(92vw, 420px);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
}
.sheet::backdrop { background: rgb(0 0 0 / 0.45); }
.sheet h2 { margin: 0 0 4px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.stack .sheet-actions { margin-top: 0; }
.sheet p { margin: 8px 0 0; }
.secondary.danger-text { color: var(--rec); border-color: var(--rec); }

/* Les couleurs sont de vrais boutons radio (flèches du clavier, lecteur
   d'écran) dessinés en pastilles : `--folder` porte la teinte. */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 36px;
  margin: 0;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--folder);
  box-shadow: 0 0 0 2px transparent;
  cursor: pointer;
}
.swatch:checked { box-shadow: 0 0 0 2px var(--text); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.editor-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
}
.link { border: 0; background: transparent; color: var(--accent); padding: 8px 0; font-weight: 600; }
/* « Partager » entre « ← Notes » et « Enregistrer » : il prend la place libre. */
.editor-bar #share { margin-left: auto; }
/* Le bandeau d'une note archivée dans l'éditeur. */
.archive-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; color: var(--muted); }
.archive-bar span { flex: 1; min-width: 120px; }
.primary {
  border: 0;
  border-radius: 10px;
  padding: 8px 18px;
  background: var(--accent);
  color: var(--accent-text);
}
.primary:disabled { opacity: 0.45; }
.note-title, .note-text {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.note-title { font-size: 19px; font-weight: 600; }
.note-title[readonly] { border-color: transparent; background: transparent; padding-left: 0; }
.folder-pick { display: flex; align-items: baseline; gap: 10px; margin: 10px 0; }
.folder-pick .chips { flex: 1; padding: 0; }
.note-text { resize: none; line-height: 1.5; }

/* --- compte : en-tête, connexion, réglages --- */

/* `hidden` doit gagner sur un `display` posé par une classe. */
[hidden] { display: none !important; }

/* Le QR code du TOTP : fond blanc quel que soit le thème, sinon les
   applis d'authentification le lisent mal en mode sombre. */
.qr { display: block; width: 220px; max-width: 100%; height: auto; background: #fff;
      border-radius: 8px; margin: 4px 0 8px; }
.secret code { font-size: 15px; overflow-wrap: anywhere; user-select: all; }
.link-box { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.link-box input { width: 100%; font: inherit; font-size: 14px; color: var(--text);
                  background: var(--bg); border: 1px solid var(--line);
                  border-radius: 10px; padding: 8px 10px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
a.button-link { display: inline-flex; align-items: center; color: var(--text);
                text-decoration: none; }
/* Étiré dans une colonne, il se lit comme les boutons voisins : centré. */
.stack > a.button-link { justify-content: center; }
.check-line { display: flex; align-items: center; gap: 8px; font-size: 14px; }

.account { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.account .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gear {
  color: var(--muted);
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  padding: 6px 4px;
}
.gear[aria-current="page"] { color: var(--text); }
.brand { font-size: 17px; font-weight: 600; padding: 6px 0; }

h1 { font-size: 24px; margin: 20px 0 4px; }
h2 { font-size: 17px; margin: 0 0 8px; }
.narrow { max-width: 400px; }
/* La note de confidentialité : des listes à puces dans des panneaux. */
.privacy ul { margin: 0 0 10px; padding-left: 20px; }
.privacy li { margin-bottom: 6px; }
.notice { margin-top: 28px; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
.field input, .field select {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
/* Une indication peut citer une adresse sans coupure possible (« À planifier »). */
.field > .muted { overflow-wrap: anywhere; }
.stack .primary { padding: 10px 18px; }
.stack .link { align-self: center; }
[role="status"]:empty { display: none; }
/* Un échec de formulaire : lisible, pas la note grise en petit. */
.status-error { color: var(--warn); font-size: 15px; font-weight: 600; }
.field input.invalid { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }

/* Le toast (`toast()`, common.js) : un échec sort en bas de l'écran, au-dessus
   de la zone du pouce et de la barre de sélection (~64 px). Un échec : fond
   d'alerte ; une information : fond sombre, qui tient dans les deux thèmes. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 100;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  border-radius: 12px;
  background: #2b2b33;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.3);
  overflow-wrap: anywhere;
  cursor: pointer;
}
.toast.error { background: var(--warn); }
@media (prefers-color-scheme: dark) {
  /* `--warn` est un orange clair en sombre : le texte blanc n'y tient pas. */
  .toast.error { color: #1c1c22; }
}

/* La bande hors ligne : collée en haut, dans le flux (elle repousse l'en-tête
   et les onglets, elle ne les recouvre pas). */
#offline {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: max(6px, env(safe-area-inset-top)) 16px 6px;
  background: var(--warn);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  #offline { color: #1c1c22; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0;
}
.panel p { margin: 0 0 10px; }
.panel.danger { border-color: var(--warn); }
.panel details { text-align: left; margin: 8px 0 0; }
.panel summary { margin-bottom: 10px; }

.secondary {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 10px;
  padding: 8px 14px;
  min-height: 40px;
}
.secondary.small { flex: none; padding: 4px 12px; min-height: 34px; font-size: 14px; }
.danger-button {
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  background: var(--rec);
  color: #fff;
}

/* --- listes partagées (lot B3) --- */

/* En tête d'un onglet, quand le compte a plusieurs listes du rôle : un menu au
   titre de la liste, avec qui elle est partagée, « Gérer ». Le menu se lit
   comme un titre ; le reste se tasse (points de suspension) à 375 px. */
.list-pick { display: flex; align-items: center; gap: 0 10px; margin: 6px 0 0; min-width: 0; }
.list-pick select {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 65%;
  min-height: 40px;
  padding: 6px 2px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 0;
  text-overflow: ellipsis;
}
.list-pick .with { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-pick .link { flex: none; margin-left: auto; font-size: 14px; padding: 8px 4px; text-decoration: none; }
/* Sous lui, les puces de magasins ou de dossiers n'ont pas à reprendre de l'air. */
.list-pick:not([hidden]) + .chips { padding-top: 4px; }

/* Réglages : les listes par onglet, chacune ouvre son dialogue. */
h3 { font-size: 15px; margin: 0 0 4px; }
.list-role + .list-role { margin-top: 16px; }
.list-rows { list-style: none; margin: 0 0 8px; padding: 0; }
.list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
}
.list-row .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.list-row .muted { flex: 0 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.list-row .chevron { color: var(--muted); }
.list-role .row { align-items: center; }
.dictation-pick { display: flex; align-items: center; gap: 6px; flex: 1 1 180px; min-width: 0; }
.dictation-pick select {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
}
/* Un champ et son bouton sur une ligne (renommer, ajouter un membre). */
.inline-form { display: flex; gap: 8px; }
.inline-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.members { list-style: none; margin: 0; padding: 0; }
.member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  border-bottom: 1px solid var(--line);
}
.member:last-child { border-bottom: 0; }
.member-name { min-width: 0; overflow-wrap: anywhere; }
.sheet .stack { gap: 14px; }
.sheet h3 { margin-bottom: 2px; }

.sessions { list-style: none; margin: 0 0 10px; padding: 0; }
.session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.session:last-child { border-bottom: 0; }
.session-text { display: flex; flex-direction: column; min-width: 0; }
.session-name { overflow-wrap: anywhere; }
.badge {
  flex: none;
  font-size: 12px;
  color: var(--accent-text);
  background: var(--accent);
  border-radius: 999px;
  padding: 2px 10px;
}