:root {
  --red: #dc4c3e;
  --bg-sidebar: #fcfaf8;
  --bg-main: #ffffff;
  --bg-elev: #ffffff;      /* cartes, dialogues, boutons */
  --bg-soft: #faf9f7;      /* colonnes des tableaux */
  --bg-mute: #f0efed;      /* chips, commentaires */
  --bg-hover-row: #fafafa;
  --text: #202020;
  --text-soft: #666;
  --text-faint: #999;
  --border: #eee;
  --border-strong: #ddd;
  --hover: #f2efed;
  --active: #ffefe5;
  --active-row: #f1ece7;   /* ligne de projet active : neutre, le rouge dit le retard */
  --load-track: #efebe7;
  --load-ok: #b9b2ab;
  --late: #d1453b;
  --late-bg: #fbdedb;  --late-fg: #b8352a;
  --p1: #d1453b;
  --p2: #eb8909;
  --p3: #246fe0;
  --p4: #999;
  --hl-date-bg: #d8f0e2;   --hl-date-fg: #0a7a3d;
  --hl-recur-bg: #e9e0f7;  --hl-recur-fg: #6a3fb5;
  --hl-project-bg: #e3ecfb; --hl-project-fg: #1d5fc4;
  --hl-person-bg: #fdeacc;  --hl-person-fg: #a36407;
  --hl-prio-bg: #fbdedb;   --hl-prio-fg: #c53727;
  --hl-est-bg: #d9eef2;    --hl-est-fg: #0b6b7a;
  --cal-accent: #4fc3d0;
  /* Actions à trancher (spec 2026-09-29) : teinte ambrée de la palette
     « personne », texte plus sombre que --hl-person-fg pour tenir 4,5:1. */
  --tri-fond: #fffaf3; --tri-bord: #f0e2cc; --tri-ligne: #f1e6d6;
  --tri-texte: #7a4600; --tri-rond: #b3a288;
  /* Lot B (#2563) : couleurs du texte et surligneur des Détails et des notes, 4,5:1 sur --bg-elev et sur le surligneur. */
  --ed-rouge: #c62828; --ed-orange: #9a4a06; --ed-vert: #13703a;
  --ed-bleu: #1d4ed8; --ed-violet: #7e22ce; --ed-gris: #636363;
  --ed-surligne: #fff3a3;
}

[data-theme="dark"] {
  color-scheme: dark;      /* widgets natifs (date, heure, select) en sombre */
  --bg-sidebar: #242220;
  --bg-main: #1c1b1a;
  --bg-elev: #2a2827;
  --bg-soft: #232120;
  --bg-mute: #35322f;
  --bg-hover-row: #232120;
  --text: #eceae7;
  --text-soft: #b3afaa;
  --text-faint: #7f7b76;
  --border: #383533;
  --border-strong: #4a4644;
  --hover: #322f2d;
  --active: #42302a;
  --active-row: #35312e;
  --load-track: #35322f;
  --load-ok: #6f6a65;
  --late-bg: #46261f;  --late-fg: #f2988a;
  --p4: #8a8a8a;
  --hl-date-bg: #1d3a2a;   --hl-date-fg: #7fd6a2;
  --hl-recur-bg: #322a44;  --hl-recur-fg: #c2a8f0;
  --hl-project-bg: #223350; --hl-project-fg: #93b8f2;
  --hl-person-bg: #40331b;  --hl-person-fg: #ecc078;
  --hl-prio-bg: #46261f;   --hl-prio-fg: #f2988a;
  --hl-est-bg: #16363c;    --hl-est-fg: #7fcbd8;
  --cal-accent: #5fd0e0;
  --tri-fond: #25211d; --tri-bord: #45392a; --tri-ligne: #3a3129;
  --tri-texte: #ecc078; --tri-rond: #8a7a63;
  --ed-rouge: #ffa59c; --ed-orange: #fdba74; --ed-vert: #86efac;
  --ed-bleu: #93c5fd; --ed-violet: #d8b4fe; --ed-gris: #c4c0bb;
  --ed-surligne: #4a3d0a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg-main);
  font-size: 14px;
}
.hidden { display: none !important; }
/* Texte lu par un lecteur d'écran, invisible à l'œil (une explication que
   l'écran donne déjà autrement, par la place ou par un survol). */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
button { font: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s; }
button:active { transform: scale(.97); }
:focus-visible { outline: 2px solid var(--p3); outline-offset: 2px; border-radius: 4px; }
#mobile-nav, #drawer-overlay { display: none; }
.vh-compte, #m-add-bar { display: none; }
.m-top-btn { width: 44px; height: 44px; flex: none; border: none; border-radius: 50%; background: var(--bg-mute); color: var(--text); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.m-top-btn svg { width: 20px; height: 20px; }

/* ---------- Login ---------- */
#login-overlay {
  position: fixed; inset: 0; background: var(--bg-sidebar);
  display: flex; align-items: center; justify-content: center;
}
#login-form {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
  padding: 40px; width: 340px; text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
.login-logo { display: block; width: 56px; height: 56px; margin: 0 auto 12px; }
#login-form h1 { margin: 0 0 4px; font-size: 22px; }
#login-form p { margin: 0 0 20px; color: var(--text-soft); }
#login-form input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px;
  font: inherit; margin-bottom: 12px;
}
#login-form button {
  width: 100%; padding: 10px; border: none; border-radius: 8px;
  background: var(--red); color: #fff; font-weight: 600;
}
.login-error { color: var(--p1); margin-top: 10px; min-height: 1em; }
#login-form .login-alt {
  margin-top: 10px; background: transparent; color: var(--text);
  border: 1px solid var(--border-strong); font-weight: 500;
}
.login-totp-hint { margin: 4px 0 12px; color: var(--text-soft); font-size: 13px; }
/* Lien « Confidentialité » sous les formulaires d'accès (exigé par Google,
   2026-10-08) : discret, en gris secondaire (5,7:1 en clair, 7,3:1 en sombre,
   et non le rouge des liens des pages autonomes, à 4,1:1). */
#login-form p.login-conf, .auth-card p.login-conf { margin: 16px 0 0; font-size: 12.5px; }
.login-conf a, .auth-card .login-conf a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }
.login-conf a:hover, .auth-card .login-conf a:hover { color: var(--text); }
@media (hover: none) {
  .login-conf a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
}
.totp-block {
  margin: 0 0 8px; padding: 8px 10px; border-radius: 6px; background: var(--bg-sidebar);
  border: 1px solid var(--border); font-size: 12.5px; white-space: pre-wrap;
  word-break: break-all; user-select: all;
}

/* ---------- Layout ---------- */
#app { display: flex; height: 100vh; }
#sidebar {
  width: 280px; flex-shrink: 0; background: var(--bg-sidebar);
  border-right: 1px solid var(--border); padding: 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
#main { flex: 1; overflow-y: auto; padding: 28px 48px; min-width: 0; }

/* Repli de la barre latérale (desktop) : le bouton reste dans l'en-tête pour la
   rouvrir, et #main récupère toute la largeur. */
#view-header { justify-content: flex-start; }
#view-header #view-actions { margin-left: auto; }
#sidebar-toggle { flex: none; }
body.sidebar-collapsed #sidebar { display: none; }
/* Barre repliée au bureau : la loupe, la cloche et la photo passent à droite de l'en-tête de la vue, comme au
   téléphone et en mode voiture (#2024, décision 12). */
@media (min-width: 769px) {
  html:not([data-voiture="1"]) body.sidebar-collapsed .vh-compte { display: flex; align-items: center; gap: 8px; margin-left: 16px; flex: none; }
  html:not([data-voiture="1"]) body.sidebar-collapsed .vh-compte .account-btn { width: 44px; height: 44px; }
  html:not([data-voiture="1"]) body.sidebar-collapsed .vh-compte .account-btn .avatar { box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 3.5px var(--border-strong); }
}

.sidebar-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 2px 4px; }
/* Le logo ne rétrécit jamais : quand la sidebar se resserre (écrans
   intermédiaires), c'est le nom de l'app qui cède, en ellipse. */
.app-logo { flex: none; width: 28px; height: 28px; display: block; }
.app-name {
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-btn {
  flex: none; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
  background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.account-btn .avatar { box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 0 3.5px var(--border-strong); }
.account-btn[aria-expanded="true"] .avatar { box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 0 4px var(--red); }
.account-menu { min-width: 272px; }
.account-head {
  display: flex; align-items: center; gap: 12px; padding: 6px 8px 12px;
  margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.account-id { display: flex; flex-direction: column; min-width: 0; font-size: 14.5px; }
.account-id span { font-size: 12.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; }
.account-menu [role="menuitem"] {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0 10px;
  border: none; border-radius: 8px; background: none; font: inherit; font-size: 14px;
  color: var(--text); text-align: left; text-decoration: none; cursor: pointer;
}
.account-menu [role="menuitem"]:hover, .account-menu [role="menuitem"]:focus-visible { background: var(--hover); }
.account-menu [role="menuitem"] svg { width: 18px; height: 18px; flex: none; color: var(--text-soft); }
.account-menu [role="menuitem"] span { flex: 1; }
.account-menu kbd { font: inherit; font-size: 11.5px; color: var(--text-soft); }
.account-menu hr { border: none; border-top: 1px solid var(--border); margin: 6px; }
.account-menu .danger, .account-menu .danger svg { color: var(--late-fg); }
/* Ancre des boutons du compte (barre latérale, en-tête du téléphone). Au
   doigt, les entrées du menu du compte font 44 px. */
.compte-ancre { position: relative; display: inline-flex; flex: none; }
@media (hover: none) {
  .account-menu [role="menuitem"] { height: 44px; }
}

/* ---------- Centre de notifications (#2024, lot 1b) ----------
   Cloche : en tête de barre ; dans l'en-tête de la vue (téléphone, mode voiture, barre repliée), elle prend la
   taille de la loupe (.m-top-btn). Pastille rouge (décision 12). */
.nt-cloche { position: relative; }
.sidebar-head .nt-cloche {
  flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-head .nt-cloche svg { width: 21px; height: 21px; }
.sidebar-head .nt-cloche:hover, .sidebar-head .nt-cloche[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.nt-pastille {
  position: absolute; top: 1px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg-sidebar); pointer-events: none;
}
.vh-compte .nt-pastille { top: 3px; right: 2px; box-shadow: 0 0 0 2px var(--bg-main); }
/* Deux chiffres et « 99+ » : plus petite, posée au-dessus du dôme et un peu à droite, elle laisse la cloche lisible
   sans toucher la photo du compte (mesuré en tête de barre, au téléphone et en mode voiture). */
.nt-pastille.large { top: -6px; left: calc(50% - 6px); right: auto; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font-size: 10px; line-height: 16px; }

/* Panneau : TuduPopover au bureau (décision 13). */
.pop.nt-pop { max-width: none; padding: 0; overflow: hidden; border-radius: 12px; }
.nt-panneau { width: 400px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; color: var(--text); }
.nt-tete { display: flex; align-items: center; gap: 2px; padding: 12px 10px 10px 16px; }
.nt-tete h2 { margin: 0; flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.nt-tout { border: 0; background: none; color: var(--text-soft); font-size: 13px; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.nt-tout:hover { background: var(--hover); color: var(--text); }
.nt-tout:disabled { opacity: .45; cursor: default; background: none; }
.nt-regl { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-soft); }
.nt-regl svg { width: 18px; height: 18px; }
.nt-barre { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; }
/* Le nombre de l'onglet « Non lues » (planches 2 et 3), discret. */
.nt-onglets button { display: inline-flex; align-items: center; gap: 6px; }
.nt-onglets .count { margin: 0; font-size: 12px; color: inherit; }
/* Dans l'onglet actif, le rouge de l'onglet reste sous 4,5:1 sur son fond : le rouge foncé des retards y atteint 5,2 et 5,7. */
.nt-onglets .active .count { color: var(--late-fg); }
.nt-onglets .count:empty { display: none; }
/* Bornée par la fenêtre : sur un écran bas, la liste défile dans le panneau et non la page. */
.nt-liste { max-height: min(560px, calc(100vh - 180px)); overflow-y: auto; border-top: 1px solid var(--border); padding: 4px 0 6px; }
.nt-jour { margin: 10px 16px 2px; padding-bottom: 5px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text); }
.nt-groupe:first-child .nt-jour { margin-top: 6px; }
.nt-ligne { position: relative; }
.nt-ouvrir {
  display: grid; grid-template-columns: 8px 28px minmax(0, 1fr); column-gap: 9px; align-items: start; width: 100%;
  padding: 9px 14px 9px 10px; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.nt-ligne:hover .nt-ouvrir, .nt-ouvrir:focus-visible { background: var(--hover); }
.nt-point { width: 8px; height: 8px; border-radius: 50%; margin-top: 10px; }
.nt-nonlue .nt-point { background: var(--red); }
.nt-ico { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.nt-ico svg { width: 16px; height: 16px; }
.nt-ico.done { background: var(--hl-date-bg); color: var(--hl-date-fg); }
.nt-ico.doing { background: var(--hl-person-bg); color: var(--hl-person-fg); }
.nt-ico.blocked, .nt-ico.deleted { background: var(--hl-prio-bg); color: var(--hl-prio-fg); }
.nt-ico.reopened, .nt-ico.todo { background: var(--bg-mute); color: var(--text-soft); }
.nt-ico.restored { background: var(--hl-est-bg); color: var(--hl-est-fg); }
/* Fusionnée en bleu, Synthèse en violet : distinctes (spec §4.1). */
.nt-ico.amoi, .nt-ico.merged { background: var(--hl-project-bg); color: var(--hl-project-fg); }
.nt-ico.synthese { background: var(--hl-recur-bg); color: var(--hl-recur-fg); }
.nt-ico.mention { background: var(--hl-person-bg); color: var(--hl-person-fg); }
.nt-corps { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13.5px; line-height: 19px; color: var(--text-soft); }
.nt-nonlue .nt-l1 { color: var(--text); }
/* La phrase entière (§4.1) : elle passe à la ligne plutôt que d'être coupée. */
.nt-phrase { min-width: 0; }
.nt-l1 strong { font-weight: 650; }
.nt-via { color: var(--text-faint); }
.nt-heure { margin-left: auto; flex: none; font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ligne 2 : au bureau, le projet garde sa place (au plus 40 %) et le titre se coupe d'abord ; au téléphone, le projet qui
   ne tient plus passe sous la ligne, donc caché, plutôt que coupé en « Banq… » (§4.1). */
.nt-l2 { display: flex; align-items: baseline; height: 18px; overflow: hidden; font-size: 13px; line-height: 18px; color: var(--text-soft); }
.nt-l2a { display: flex; align-items: baseline; min-width: 0; max-width: 100%; }
.nt-n { flex: none; margin-right: 6px; font-size: 11.5px; line-height: 17px; font-weight: 600; color: var(--text-soft); background: var(--bg-mute); border-radius: 999px; padding: 0 7px; }
.nt-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-projet { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); font-size: 12.5px; }
.nt-sep { color: var(--text-soft); margin: 0 5px; }
.nt-lu {
  position: absolute; right: 10px; top: 7px; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center;
  /* Caché par l'opacité, pas retiré du rendu : redessiné après un clic, il doit pouvoir reprendre le focus (Échap le rend ensuite à la cloche). */
  opacity: 0; pointer-events: none;
}
.nt-lu svg { width: 14px; height: 14px; }
.nt-lu-point { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.nt-ligne:hover .nt-lu, .nt-ligne:focus-within .nt-lu { opacity: 1; pointer-events: auto; }
/* Ligne au focus (ouverture, flèches) : son heure reste lue ; le rond, joignable par Tab, ne la remplace qu'au survol ou
   quand il a lui-même le focus du clavier. */
@media (hover: hover) {
  .nt-ligne:focus-within:not(:hover) .nt-lu:not(:focus-visible) { opacity: 0; pointer-events: none; }
}
.nt-ligne:hover .nt-heure { visibility: hidden; }
/* À part : un navigateur sans :has écarterait toute la règle, survol compris. */
.nt-ligne:has(.nt-lu:focus-visible) .nt-heure { visibility: hidden; }
.nt-vide { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 16px 52px; color: var(--text-soft); font-size: 14px; }
.nt-vide-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-mute); color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center; }
.nt-vide-ico svg { width: 22px; height: 22px; }
/* Téléphone : feuille plein écran, sous l'encoche. */
.pop.nt-feuille {
  position: fixed; inset: 0; left: 0 !important; top: 0 !important; width: auto; z-index: 4000; border: 0; border-radius: 0; box-shadow: none;
  background: var(--bg-main); display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.nt-feuille .nt-panneau { width: auto; max-width: none; flex: 1; min-height: 0; }
.nt-feuille .nt-tete { padding: 8px 16px; gap: 6px; }
.nt-feuille .nt-tete h2 { font-size: 21px; }
.nt-feuille .nt-regl, .nt-feuille .nt-fermer {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--bg-mute); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.nt-feuille .nt-regl svg, .nt-feuille .nt-fermer svg { width: 20px; height: 20px; }
.nt-feuille .nt-barre { padding: 2px 16px 12px; }
.nt-feuille .nt-tout { font-size: 14px; min-height: 44px; padding: 0 6px; }
.nt-feuille .nt-onglets button { min-height: 40px; font-size: 14px; padding: 6px 16px; }
.nt-feuille .nt-liste { max-height: none; flex: 1; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.nt-feuille .nt-ouvrir { padding: 12px 16px 12px 12px; column-gap: 10px; grid-template-columns: 8px 32px minmax(0, 1fr); }
.nt-feuille .nt-ico { width: 32px; height: 32px; }
.nt-feuille .nt-ico svg { width: 18px; height: 18px; }
.nt-feuille .nt-point { margin-top: 12px; }
.nt-feuille .nt-l1 { font-size: 15px; line-height: 21px; }
.nt-feuille .nt-l2 { flex-wrap: wrap; font-size: 14px; line-height: 20px; height: 20px; }
.nt-feuille .nt-projet { flex: 0 1 auto; max-width: none; font-size: 13.5px; }
.nt-feuille .nt-heure { font-size: 13px; }
.nt-feuille .nt-jour { margin: 12px 16px 2px; font-size: 14px; }
.nt-feuille .nt-vide { padding-top: 120px; font-size: 16px; }
/* Au doigt, le bouton rond lue / non lue reste visible, à droite de la ligne (décision 13). */
@media (hover: none) {
  .nt-ligne { display: flex; align-items: center; }
  .nt-ouvrir { flex: 1; min-width: 0; }
  .nt-lu { position: relative; right: auto; top: auto; flex: none; width: 32px; height: 32px; margin: 0 12px 0 6px; opacity: 1; pointer-events: auto; }
  /* Rond dessiné à 32 px, cible du doigt à 44 px comme les autres de la feuille (7 px autour de la boîte intérieure, bordure
     comprise) ; la marge de gauche la garde hors de .nt-ouvrir. */
  .nt-lu::before { content: ''; position: absolute; inset: -7px; }
  .nt-lu svg { width: 15px; height: 15px; }
  .nt-ligne:hover .nt-heure { visibility: visible; }
  .nt-ligne:has(.nt-lu:focus-visible) .nt-heure { visibility: visible; }
}
.icon-btn {
  border: none; background: none; color: var(--text-faint); font-size: 15px;
  padding: 4px 7px; border-radius: 6px;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }

.search-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 7px 0 11px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(60,30,20,.04); color: var(--text-soft); font: inherit; font-size: 13.5px;
  text-align: left; cursor: text;
}
.search-trigger:hover { border-color: var(--text-soft); }
.search-trigger svg { width: 16px; height: 16px; flex: none; }
.search-trigger span { flex: 1; }
/* #1584 : rappels de raccourcis dessinés en touche de clavier (bord bas épaissi, largeur minimale) : un « Q » seul se lit comme une touche. */
.search-trigger kbd, .palette kbd, .qa-kbd {
  display: inline-block; box-sizing: border-box; min-width: 22px; text-align: center;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--text-soft); background: var(--bg-elev);
  border: 1px solid var(--border-strong); border-bottom-width: 3px; border-radius: 6px; padding: 1px 6px;
}
.palette-dialog { width: 620px; max-width: calc(100vw - 32px); padding: 0; border: none; border-radius: 16px; margin-top: 10vh; background: var(--bg-elev); color: var(--text); box-shadow: 0 30px 70px rgba(20,12,8,.35); }
.palette-dialog::backdrop { background: rgba(32,24,20,.38); }
/* QA 2 : `label.palette-champ` reçoit aussi `dialog label { display: flex;
   flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft);
   }` (règle générale des formulaires de dialogue) ; comme .palette-champ ne
   fixait pas flex-direction, la loupe, le champ et « Échap » s'empilaient en
   colonne. On fixe flex-direction et on neutralise les propriétés héritées de
   cette règle qui ne conviennent pas ici (gap déjà repris ci-dessous, mais
   taille de police et couleur restaient celles, plus petites et plus
   pâles, de « dialog label »). */
.palette-champ { display: flex; flex-direction: row; align-items: center; gap: 12px; height: 58px; padding: 0 16px 0 18px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text); }
.palette-champ svg { width: 20px; height: 20px; flex: none; color: var(--red); }
#palette-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 18px; color: var(--text); }
#palette-resultats { max-height: 52vh; overflow-y: auto; padding: 8px; }
.pal-section { font-size: 11.5px; font-weight: 600; color: var(--text-soft); padding: 10px 10px 6px; }
.pal-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 10px; border: none; border-radius: 9px; background: none; font: inherit; font-size: 14.5px; color: var(--text); text-align: left; cursor: pointer; }
.pal-item[aria-selected="true"] { background: var(--active); }
.pal-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-hint { font-size: 12.5px; color: var(--text-soft); flex: none; }
.pal-hash { width: 22px; flex: none; text-align: center; font-weight: 700; color: var(--text-soft); display: inline-flex; justify-content: center; }
.pal-hash svg { width: 16px; height: 16px; }
.pal-rond { width: 18px; height: 18px; flex: none; margin: 0 2px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--p4); }
.pal-plus { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pal-plus svg { width: 13px; height: 13px; }
.pal-vide { color: var(--text-soft); font-size: 13.5px; padding: 14px 10px; margin: 0; }
.palette-pied { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--border); background: var(--bg-soft); font-size: 12px; color: var(--text-soft); border-radius: 0 0 16px 16px; }
@media (max-width: 768px) {
  .palette-dialog { margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; top: 0; bottom: auto; }
  .palette-pied { display: none; }
  #palette-resultats { max-height: none; }
  /* Décision 6 : le projet et l'état d'une tâche passent sous son titre, qui reste lisible. */
  .pal-item:has(> .pal-rond) { flex-wrap: wrap; row-gap: 2px; padding-block: 6px; }
  .pal-item:has(> .pal-rond) .pal-hint { flex: 1 1 calc(100% - 34px); margin-left: 34px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.vacation-banner {
  width: 100%; margin: 0 0 8px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elev); color: var(--text);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.vacation-banner:hover { background: var(--hover); }

.app-update-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 4px 0 6px; padding: 8px 10px; border-radius: 8px;
  background: var(--active); color: var(--text); font-size: 13px;
}
.app-update-banner.hidden, .app-update-btn.hidden, .app-update-aide.hidden { display: none; }
.app-update-btn {
  margin-left: auto; border: none; border-radius: 6px; padding: 4px 10px;
  background: var(--red); color: #fff; font-size: 12.5px; cursor: pointer; text-decoration: none;
}
.app-update-btn[disabled] { opacity: .6; cursor: default; }
/* Nouvelle version (#2063, décision 8) : flottant en bas, à la place des
   messages, il ne décale rien. Un message, la feuille de saisie, la visite,
   le tiroir, la sélection (sa barre d'actions) et l'écran de connexion
   passent devant, comme la fiche quand elle couvre la liste (pleine page
   comprise) ; il revient après eux. Fiche à côté de la liste (1320 px et
   plus, voiture), il se centre sur la liste, comme le toast en voiture. */
#site-update-banner {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2400;
  margin: 0; width: max-content; max-width: calc(100vw - 32px); box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
body.qa-open #site-update-banner, body.selection-active #site-update-banner, body.drawer-open #site-update-banner,
body.visite #site-update-banner { display: none; }
/* À part : un navigateur sans :has() écarterait toute la règle. */
body:has(> #toast:not([hidden]):not(:empty)) #site-update-banner,
body:has(> #login-overlay:not(.hidden)) #site-update-banner { display: none; }
@media (max-width: 1319px) { html:not([data-voiture="1"]) body.fiche-ouverte #site-update-banner { display: none; } }
/* Voiture au téléphone : la fiche (64vw, posée à gauche par le bloc mobile) couvre aussi la liste. */
@media (max-width: 768px) { body.fiche-ouverte #site-update-banner { display: none; } }
@media (min-width: 812px) { html:not([data-voiture="1"]) body.fiche-grande.fiche-ouverte #site-update-banner { display: none; } }
@media (min-width: 1320px) {
  body.fiche-ouverte #site-update-banner { left: calc((100vw - 580px) / 2); }
  /* Barre latérale ouverte : centré entre elle (280 px) et la fiche (580 px). */
  body.fiche-ouverte:not(.sidebar-collapsed) #site-update-banner { left: calc(280px + (100vw - 860px) / 2); }
}
/* Même poids que la règle des 1320 px, et après elle : la voiture garde sa place. */
[data-voiture="1"] body.fiche-ouverte #site-update-banner { left: 18vw; max-width: calc(36vw - 32px); }
@media (max-width: 768px) { #site-update-banner { bottom: calc(150px + env(safe-area-inset-bottom)); } }
/* Recharger et la croix passent ensemble à la ligne quand la place manque (voiture, fiche ouverte). */
.site-update-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-update-fermer {
  width: 26px; height: 26px; padding: 0; border: none; background: none; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: var(--text-soft); cursor: pointer;
}
.site-update-fermer:hover { background: var(--hover); color: var(--text); }
/* « Recharger » et la croix se visent au doigt, comme les boutons des Nouveautés. */
@media (hover: none) { #site-update-btn { min-height: 44px; } .site-update-fermer { width: 44px; height: 44px; } }
.app-update-aide { flex-basis: 100%; margin: 2px 0 0; color: var(--text-soft); font-size: 12px; }

nav { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: none; background: none; text-align: left;
  padding: 7px 8px; border-radius: 7px; color: var(--text); font-size: 14px;
}
.nav-item:hover { background: var(--hover); }
.nav-item.active { background: var(--active); color: var(--red); font-weight: 600; }
.nav-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-soft);
}
.nav-icon svg { width: 17px; height: 17px; display: block; }
.nav-item.active .nav-icon { color: var(--red); }
.icon-btn svg { width: 16px; height: 16px; display: block; }
.chip-ico {
  width: 12px; height: 12px; display: inline-block;
  vertical-align: -1.5px; margin-right: 1px;
}
.count { margin-left: auto; color: var(--text-faint); font-size: 12px; }
.proj-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin: 0 4px; }
.proj-logo {
  width: 18px; height: 18px; border-radius: 5px; object-fit: cover;
  flex-shrink: 0; margin: 0 0 0 1px; background: var(--bg-mute);
}
.proj-logo.sm { width: 14px; height: 14px; border-radius: 4px; margin-right: 3px; vertical-align: -3px; }
/* Icône emoji : mêmes gabarits que le logo, mais rendue en texte centré. */
.proj-logo.emoji {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; font-size: 15px; line-height: 1;
}
.proj-logo.emoji.sm { font-size: 12px; }
.pf-emoji-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
dialog #pf-emoji-input {
  width: 150px; text-align: center; font-size: 16px; padding: 5px 8px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-elev); color: var(--text);
}
#pf-emoji-grid { display: flex; flex-wrap: wrap; gap: 3px; flex-basis: 100%; }
.pf-emoji {
  font-size: 17px; line-height: 1; padding: 4px 5px; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 7px;
}
.pf-emoji:hover { background: var(--bg-mute); }
.pf-emoji.selected { border-color: var(--red); background: var(--bg-mute); }
.pf-logo-btn { display: inline-block; cursor: pointer; }
.pf-logo-hint { flex-basis: 100%; }
.proj-edit { margin-left: auto; visibility: hidden; }
/* Une seule marge automatique par ligne : sinon le crayon et le compteur se
   partagent l'espace libre et le crayon flotte au milieu de la ligne. */
.proj-edit + .count { margin-left: 6px; }
/* Lignes de projet de la barre latérale : hauteur régulière, nom sur une
   seule ligne (tronqué, jamais replié), barre d'accent sur la ligne active. */
.nav-item { position: relative; min-height: 32px; }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 3px; background: var(--red);
}
.proj-row-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#project-list .proj-dot, #shared-project-list .proj-dot { width: 10px; height: 10px; margin: 0 4px; }
#project-list .proj-logo, #shared-project-list .proj-logo { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.count { font-variant-numeric: tabular-nums; font-size: 11.5px; }
/* Intertitres « Collaboratifs » / « Personnels » de « Mes projets ». */
.proj-group {
  margin: 10px 8px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
}
/* Icône d'un projet collaboratif. Sa bulle se place par rapport à la LIGNE
   (l'icône reste non positionnée) : toujours dans la largeur de la barre,
   hors du flux, donc sans décalage ni débordement horizontal. */
.proj-collab { flex: none; display: inline-flex; color: var(--text-faint); border-radius: 4px; cursor: default; }
.proj-collab svg { width: 14px; height: 14px; }
.proj-collab:hover, .proj-collab:focus-visible { color: var(--text-soft); }
.proj-collab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.proj-collab-pop {
  position: absolute; left: 28px; top: calc(100% + 2px); z-index: 30;
  max-width: calc(100% - 36px); min-width: 150px;
  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px;
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.18);
  font-size: 12.5px; font-weight: 400; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-2px); pointer-events: none;
  cursor: default;
}
/* Visible, la bulle capte les clics (app.js les avale) : sinon ils
   traverseraient vers la ligne qu'elle recouvre et ouvriraient un autre
   projet. Elle disparaît sans délai (fondu à l'entrée seulement) : jamais de
   phase où elle recouvre une ligne sans capter les clics. Survoler la bulle
   garde l'icône (son parent) en :hover, la bulle reste donc ouverte. */
.proj-collab:hover .proj-collab-pop, .proj-collab:focus .proj-collab-pop {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .12s ease, transform .12s ease;
}
.proj-collab-pop-title {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
}
.proj-collab-member { display: flex; align-items: center; gap: 8px; min-width: 0; }
.proj-collab-member-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .proj-collab-pop, .proj-collab:hover .proj-collab-pop, .proj-collab:focus .proj-collab-pop { transition: none; transform: none; }
}
/* Projet mis de côté : marque discrète, le nom reste lisible normalement. */
.proj-hidden { color: var(--text-soft); font-size: 15px; line-height: 1; margin-left: 2px; }
.nav-item:hover .proj-edit { visibility: visible; }

/* ---------- Barre des projets (spec 2026-09-22-barre-projets) ---------- */
/* Tuile unique : logo, emoji ou initiale sur la couleur du projet teintée. */
.proj-tile {
  --pc: #999;
  flex: none; width: 22px; height: 22px; border-radius: 6px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  /* Repli pour les WebView sans color-mix (Android ancien, macOS < 13). */
  color: var(--text-soft); background: var(--bg-mute);
  color: color-mix(in srgb, var(--pc) 78%, var(--text));
  background: color-mix(in srgb, var(--pc) 14%, transparent);
}
[data-theme="dark"] .proj-tile { color: color-mix(in srgb, var(--pc) 45%, #fff); background: color-mix(in srgb, var(--pc) 38%, transparent); }
.proj-tile.emoji { font-size: 14px; font-weight: 400; }
.proj-tile.logo { background: var(--bg-mute); }
.proj-tile.logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ligne : nom et jauge empilés, actif neutre (fond, gras, anneau sur la tuile). */
.proj-row { gap: 10px; min-height: 36px; }
.proj-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.proj-row-main .proj-row-name { flex: none; }
#project-list .nav-item.active, #shared-project-list .nav-item.active {
  background: var(--active-row); color: var(--text); font-weight: 600;
}
#project-list .nav-item.active::before, #shared-project-list .nav-item.active::before { content: none; }
.proj-row.active .proj-tile { box-shadow: 0 0 0 1.5px var(--pc); }
.proj-load { display: flex; height: 3px; border-radius: 2px; overflow: hidden; background: var(--load-track); }
.proj-load-late { background: var(--late); }
.proj-load-ok { background: var(--load-ok); }
/* Textes secondaires et boutons à glyphe (＋, crayons) de la barre en
   --text-soft : --text-faint n'est pas assez contrasté sur --bg-sidebar
   (spec 2026-10-13, 7). */
#sidebar .count { color: var(--text-soft); }
#sidebar .icon-btn { color: var(--text-soft); }
#sidebar .icon-btn:hover { color: var(--text); }

/* Membres : pile d'avatars à la place du pictogramme. */
.proj-collab-stack { display: inline-flex; align-items: center; }
.proj-collab-stack .avatar { width: 18px; height: 18px; font-size: 8px; box-shadow: 0 0 0 1.5px var(--bg-sidebar); }
.proj-collab-stack .avatar + .avatar { margin-left: -5px; }
.proj-row.active .proj-collab-stack .avatar { box-shadow: 0 0 0 1.5px var(--active-row); }
.proj-collab-more { background: var(--bg-mute); color: var(--text-soft); }

/* Sans clavier physique (Android, iPhone), le crayon d'un groupe reste
   visible comme celui d'un projet. */
@media (hover: none) {
  .proj-group-edit { visibility: visible; }
}

/* Intertitres de groupe repliables. */
.proj-group-head { position: relative; display: flex; align-items: center; margin-top: 6px; border-radius: 7px; }
.proj-group-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 8px;
  border: none; background: none; border-radius: 7px; color: var(--text-soft);
  font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer;
}
.proj-group-toggle:hover { background: var(--hover); }
.proj-group-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.proj-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-chevron { width: 12px; height: 12px; flex: none; transform: rotate(90deg); transition: transform .15s ease; }
.proj-group-head.closed .proj-chevron { transform: none; }
.proj-group-icon { width: 12px; height: 12px; flex: none; }
.proj-group-toggle .count { font-weight: 400; }
.proj-group-edit { visibility: hidden; flex: none; width: 28px; height: 28px; }
.proj-group-head:hover .proj-group-edit, .proj-group-edit:focus-visible { visibility: visible; }
.proj-group-head.drop-target { outline: 2px dashed var(--red); outline-offset: -2px; }
.proj-late-pill {
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--late-bg); color: var(--late-fg); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.proj-empty { margin: 2px 8px 6px; font-size: 12px; color: var(--text-soft); }
/* Contenu d'un dossier (Épinglés, un groupe, Sans groupe) : en retrait, avec
   un filet à gauche, pour qu'on voie ce que le dossier contient (spec
   2026-10-13, 4). */
.proj-group-corps { margin-left: 13px; padding-left: 4px; border-left: 1px solid var(--border); }

/* Rubriques Pro, Perso et « À classer » de « Mes projets » (spec 2026-10-05,
   8) : intertitres en petites capitales au-dessus des groupes, repliables
   comme eux. Un filet les sépare : sans lui, la rubrique se lisait plus
   faible que les groupes qu'elle contient (recette visuelle). */
.proj-rubrique-head {
  position: relative; display: flex; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border);
}
.proj-rubrique-head:first-child { margin-top: 2px; padding-top: 0; border-top: none; }
.proj-rubrique-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 8px;
  border: none; background: none; border-radius: 7px; color: var(--text-soft);
  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  text-align: left; cursor: pointer;
}
.proj-rubrique-toggle:hover { background: var(--hover); color: var(--text); }
.proj-rubrique-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.proj-rubrique-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-rubrique-toggle .count { font-weight: 400; letter-spacing: 0; text-transform: none; }
.proj-rubrique-head.closed .proj-chevron { transform: none; }
.proj-rubrique-head.drop-target { outline: 2px dashed var(--red); outline-offset: -2px; }
/* « Tout en Pro », sur l'intertitre « À classer ». */
.proj-rubrique-action {
  flex: none; margin-right: 4px; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--bg-elev); color: var(--text-soft); font-size: 12px; font-weight: 600;
}
.proj-rubrique-action:hover { color: var(--text); border-color: var(--text-soft); }
/* Étiquettes Pro et Perso d'un projet « À classer » : au survol à la souris,
   toujours au doigt, et en voiture (aucune action utile n'y est réservée au
   survol). */
.proj-classer { display: none; flex: none; gap: 4px; }
.nav-item:hover .proj-classer { display: inline-flex; }
/* Survolée, la ligne montre ses étiquettes à la place de son compteur : le
   nom garde de quoi se lire (recette visuelle). */
.nav-item:hover .proj-classer ~ .count { display: none; }
.proj-classer-btn {
  padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--bg-elev); color: var(--text-soft); font-size: 11px; font-weight: 600; line-height: 16px;
}
.proj-classer-btn:hover { color: var(--text); border-color: var(--text-soft); }
@media (hover: none) { .proj-classer { display: inline-flex; } .proj-classer-btn { padding: 5px 10px; } }
[data-voiture="1"] .proj-classer { display: inline-flex; }
/* Au doigt et en voiture, où les étiquettes restent affichées, le compteur
   leur cède aussi sa place, sinon le nom en retrait dans un dossier n'a plus
   de quoi se lire (relecture de L1). Masqué comme .sr-only et non retiré :
   c'est la seule lecture du nombre pour un lecteur d'écran. */
@media (hover: none) { .proj-classer ~ .count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
[data-voiture="1"] .proj-classer ~ .count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Projet sans tâche ouverte (spec 2026-10-13, 5) : à sa place dans son
   groupe, en plus clair. */
.proj-row.sans-tache .proj-row-name { color: var(--text-soft); }
.proj-row.sans-tache .proj-tile { opacity: .55; }

.proj-add-group {
  display: flex; align-items: center; gap: 8px; margin: 12px 4px 4px; min-height: 34px; padding: 6px 8px;
  border: 1px dashed var(--border-strong); border-radius: 8px; background: none; color: var(--text-soft);
  font: inherit; font-size: 13px; cursor: pointer;
}
.proj-add-group:hover { color: var(--text); background: var(--hover); }
.proj-add-group svg { width: 14px; height: 14px; }
.gd-order { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.sidebar-section {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 0 8px; color: var(--text-soft); font-weight: 600;
}
/* Grille des vues (spec 2026-10-13, 2) : collée en bas de la barre, qui
   défile. Les marges négatives et `bottom` reprennent le padding de
   #sidebar : le filet va d'un bord à l'autre et rien ne défile dessous. */
.grille-vues {
  position: sticky; bottom: -14px; z-index: 2; margin: auto -14px -14px; padding: 8px 6px 12px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 4px;
  background: var(--bg-sidebar); border-top: 1px solid var(--border);
}
/* Entrées serrées : à 280 px de barre, tous les libellés tiennent, pastille
   de revue due et compteurs compris (mesuré). */
.grille-vues .nav-item { gap: 4px; padding-left: 5px; padding-right: 5px; font-size: 13px; min-width: 0; white-space: nowrap; }
/* À la souris, le crayon du Digest ne prend sa place qu'au survol : caché
   mais présent, il coupait le libellé de la colonne. */
@media (hover: hover) {
  .grille-vues .proj-edit { display: none; }
  .grille-vues .nav-item:hover .proj-edit { display: inline; }
}
/* L'écart de la ligne suffit : 6 px de plus coupaient le Digest en voiture. */
.grille-vues .proj-edit + .count { margin-left: 0; }
/* Au doigt, le crayon reste affiché : son padding vertical haussait la rangée
   du Digest de 8 px. */
.grille-vues .proj-edit { padding-block: 0; }
/* Libellé tronqué si la colonne est étroite (barre de 232 px) : le nom
   complet reste dans la page (lecteur d'écran) et en info-bulle. Il prend la
   place libre : sans cela, le compteur du Digest, collé au crayon masqué,
   quittait le bord droit. */
.grille-vues .nav-lbl { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
/* Écran très bas : collée, la grille mangerait la hauteur des projets. */
@media (max-height: 619px) { .grille-vues { position: static; } }
/* En voiture, collée, elle cacherait tous les projets d'un petit téléphone
   (décision de Vincent du 2026-10-13, sur captures). */
@media (max-height: 859px) { [data-voiture="1"] .grille-vues { position: static; } }
/* Boîte vide (renderSidebar) : hors du haut de la barre, sauf pendant la
   visite guidée, dont le halo la cherche (spec 2026-10-13, 1 et 6). */
body:not(.visite) .nav-item.boite-vide { display: none; }
/* Les deux vides : le repère « Boîtes » sort aussi de la liste du lecteur
   d'écran. */
body:not(.visite) .boites:not(:has(> .nav-item:not(.boite-vide))) { display: none; }

#pf-members { display: flex; flex-direction: column; gap: 6px; }
.pf-member {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  display: flex; align-items: center; gap: 8px; font-size: 13px;
}
.pf-member-name { font-weight: 600; }
/* Le badge est imbriqué DANS .pf-member-name (public/app.js,
   renderProjectMembers) : sans règle propre, il hérite de font-weight: 600
   et se lit comme une partie du nom (« Denis Compte désactivé »). Poids
   normal, couleur et casse du même registre sobre que .pf-member-role. */
.pf-member-disabled { font-weight: 400; color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.pf-member-email { color: var(--text-faint); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-member-role { color: var(--text-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.pf-member-remove { margin-left: 4px; }
.pf-member-role-select { font-size: 12px; padding: 2px 4px; }

/* ---------- Vue principale ---------- */
#view-header h1 { font-size: 24px; margin: 0 0 4px; }
#view-header .subtitle { color: var(--text-faint); font-size: 13px; }

#quickadd-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 18px 0 10px; padding: 9px 9px 9px 11px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(60,30,20,.05), 0 6px 20px rgba(60,30,20,.05);
  transition: border-color .15s, box-shadow .15s;
}
#quickadd-form.qa-ouvert { border-color: var(--red); box-shadow: 0 0 0 4px rgba(220,76,62,.12), 0 12px 32px rgba(60,30,20,.08); }
.qa-plus { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.qa-plus svg { width: 16px; height: 16px; }
.qa-box { position: relative; flex: 1; min-width: 0; height: 26px; }
#quickadd-input, #quickadd-highlight {
  position: absolute; inset: 0; font: inherit; font-size: 15px;
  line-height: 26px; letter-spacing: normal; white-space: pre;
}
.qa-ex-titre { color: var(--text); font-weight: 500; }
.qa-ex { margin-left: 10px; font-size: 13.5px; color: var(--text-soft); }
.qa-kbd { flex: none; }
#quickadd-form.qa-ouvert .qa-kbd { display: none; }
#qa-sendto {
  flex-shrink: 0; max-width: 130px; font-size: 12.5px; color: var(--text-soft);
  border: 1px solid var(--border); border-radius: 20px; background: var(--bg-elev);
  padding: 3px 8px;
}
#qa-mic { width: 38px; height: 38px; flex: none; border: none; border-radius: 10px; background: var(--bg-mute); color: var(--text-soft); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
#qa-mic svg { width: 19px; height: 19px; display: block; }
#qa-mic:hover { color: var(--text); }
#qa-mic.recording { background: #d23f31; color: #fff; animation: qa-pulse 1.4s ease-out infinite; }
@keyframes qa-pulse { 0% { box-shadow: 0 0 0 0 rgba(210,63,49,.45); } 70% { box-shadow: 0 0 0 12px rgba(210,63,49,0); } 100% { box-shadow: 0 0 0 0 rgba(210,63,49,0); } }
@media (prefers-reduced-motion: reduce) { #qa-mic.recording { animation: none; } }
.qa-voice-status {
  margin: 4px 0 0; font-size: 12.5px; color: var(--red);
}
#quickadd-input {
  width: 100%; border: none; outline: none; background: none; padding: 0;
  color: transparent; caret-color: var(--text);
}
#quickadd-input::placeholder { color: var(--text-faint); }
#quickadd-input::selection { background: rgba(36,111,224,.25); }
#quickadd-highlight { pointer-events: none; overflow: hidden; color: var(--text); }
#quickadd-highlight .hl { padding: 3px 0; border-radius: 4px; }
.hl-date { background: var(--hl-date-bg); color: var(--hl-date-fg); }
.hl-recur { background: var(--hl-recur-bg); color: var(--hl-recur-fg); }
.hl-project { background: var(--hl-project-bg); color: var(--hl-project-fg); }
.hl-person { background: var(--hl-person-bg); color: var(--hl-person-fg); }
/* « @nom » que le serveur refusera : inconnu, ou prénom partagé. */
.hl-person-unknown { color: var(--p1); text-decoration: underline wavy var(--p1); text-underline-offset: 3px; }
.hl-priority { background: var(--hl-prio-bg); color: var(--hl-prio-fg); }
.hl-est { background: var(--hl-est-bg); color: var(--hl-est-fg); }

.group-title {
  font-weight: 700; font-size: 13px; margin: 22px 0 4px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.group-title.overdue { color: var(--p1); }

.task {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.task:hover { background: var(--bg-hover-row); }
.task.dragging, .nav-item.dragging { opacity: .4; }
.nav-item.drop-target, .sidebar-section.drop-target {
  outline: 2px dashed var(--red); outline-offset: -2px; border-radius: 7px;
}
.task-check {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--p4);
  background: none; flex-shrink: 0; margin-top: 2px; position: relative;
  transition: background .12s;
}
.task-check.pr1 { border-color: var(--p1); background: rgba(209,69,59,.08); }
.task-check.pr2 { border-color: var(--p2); background: rgba(235,137,9,.08); }
.task-check.pr3 { border-color: var(--p3); background: rgba(36,111,224,.08); }
.task-check:hover::after, .task.done .task-check::after {
  content: '✓'; position: absolute; inset: 0; font-size: 11px;
  line-height: 15px; text-align: center; color: inherit;
}
.task-check.pr1 { color: var(--p1); } .task-check.pr2 { color: var(--p2); }
.task-check.pr3 { color: var(--p3); } .task-check.pr4 { color: var(--p4); }
.task.done .task-check { background: var(--p4); border-color: var(--p4); color: #fff; }
.task.done .task-content { text-decoration: line-through; color: var(--text-faint); }
.task.ouverte { background: var(--active-row); box-shadow: inset 3px 0 0 var(--red); border-radius: 8px; }

/* Évènement d'agenda (GET /api/calendar/events) : visuellement proche d'une
   tâche pour s'intégrer aux mêmes groupes, mais sans case à cocher ni
   glisser-déposer, distingué par un liseré de couleur, ce n'en est pas une. */
.cal-event {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 4px 10px 10px; border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--cal-accent);
}
.cal-event-time {
  flex-shrink: 0; width: 92px; color: var(--text-soft); font-size: 12.5px;
  padding-top: 1px; display: flex; align-items: center; gap: 4px;
}
.cal-event-body { flex: 1; min-width: 0; }
.cal-event-summary { line-height: 1.4; }
.cal-event-location { color: var(--text-faint); font-size: 12.5px; margin-top: 1px; }
/* Invitation refusée, laissée affichée par le réglage « Masquer les
   invitations que j’ai refusées » éteint (spec 2026-10-06, 5.4) : barrée et
   atténuée, liseré compris. Couleurs du thème, justes en clair comme en
   sombre ; --text-soft garde au titre un contraste de 4,5:1. */
.cal-event.refuse { border-left-color: var(--border-strong); }
.cal-event.refuse .cal-event-summary { text-decoration: line-through; color: var(--text-soft); }

.task-body { flex: 1; min-width: 0; }
.task-content { line-height: 1.4; }
/* La description porte les détails des tâches IA (spec 2026-10-06, 2.2) : le
   gris de --text-soft tient 4,5:1 sur le fond des lignes dans les deux thèmes,
   que le gris pâle des pastilles voisines (--text-faint) n'atteignait pas en
   clair. La taille, plus petite que celle du titre, et le gris gardent la
   hiérarchie. */
.task-desc { color: var(--text-soft); font-size: 12.5px; margin-top: 1px; white-space: pre-line; }
/* Tâche terminée : son titre barré passe au gris pâle, sa description le
   suit, sans quoi elle paraîtrait plus forte que lui (hiérarchie inversée). */
.task.done .task-desc { color: var(--text-faint); }
/* Liens d'une description : le bleu de la palette, comme ceux des
   commentaires, et non celui du navigateur (hors palette, lavande en sombre). */
.task-desc a { color: var(--hl-project-fg); text-underline-offset: 2px; overflow-wrap: anywhere; }
/* Tâche née d'un mail : la ligne ne garde que « Objet : … », coupée au
   besoin ; son titre la donne entière, la fiche aussi. */
.task-desc-objet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Règle des deux lignes (spec 2026-10-06, 6.1) : dans une liste, une
   description tient sur deux lignes au plus, coupée par « … » ; la fiche
   montre tout. texteDeuxLignes() (public/app.js) prépare le texte, cette
   classe coupe à l'affichage une ligne trop longue pour la largeur. Un seul
   endroit pour cette règle, celui des lignes de liste : les cartes du tableau
   n'ont pas de description, seulement le compteur des étapes (#1422). */
.deux-lignes {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; white-space: pre-line; overflow-wrap: anywhere;
}
/* Au clavier (spec 2026-10-06, 2.2) : tant qu'un lien de la description a le
   focus, elle s'ouvre en entier. Coupée, c'est une boîte qui défile : un lien
   de la partie cachée, atteint par Tab, la faisait défiler, et elle le restait
   après le départ du focus (début et « … » perdus) ; la coupe rognait aussi
   l'anneau de focus d'un lien posé au bord. Ouverte, rien ne défile, l'anneau
   est entier, et elle se referme au départ du focus. :focus-visible et non
   :focus-within : un clic de souris sur un lien ne la déplie pas. */
.deux-lignes:has(:focus-visible) { display: block; -webkit-line-clamp: none; overflow: visible; }
.task-meta { display: flex; gap: 10px; margin-top: 4px; font-size: 12px; align-items: center; flex-wrap: wrap; }
.chip-date { color: var(--text-soft); }
.chip-date.overdue { color: var(--p1); font-weight: 600; }
.chip-date.today { color: #058527; font-weight: 600; }
.chip-assignee { display: inline-flex; align-items: center; }
/* Pastille d'une personne (avatarHtml) : photo ronde, ou initiale blanche
   sur la couleur attribuée par le serveur. */
.avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 700; object-fit: cover; line-height: 1;
}
.avatar-xs { width: 18px; height: 18px; font-size: 10px; }
.avatar-sm { width: 24px; height: 24px; font-size: 12px; }
.avatar-md { width: 32px; height: 32px; font-size: 14px; }
.avatar-lg { width: 56px; height: 56px; font-size: 22px; }
.chip-project { margin-left: auto; color: var(--text-faint); display: flex; align-items: center; gap: 5px; }
.chip-recur { color: #6a3fb5; }
.chip-est { color: var(--hl-est-fg); display: inline-flex; align-items: center; gap: 4px; }
/* Avancement des étapes (spec 2026-10-06, 6.2) : « 1/3 » et l'icône d'une
   case, en gris lisible (le gris pâle des pastilles voisines tombe sous
   4,5:1 en clair), vert une fois toutes les étapes faites. Positionnée, elle
   retient sa phrase .sr-only (en position absolue) : sans elle, la phrase
   sortait de #main et de .board, et la page entière défilait vers du vide. */
.chip-etapes { position: relative; color: var(--text-soft); display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.chip-etapes.fini { color: var(--hl-date-fg); }
.chip-author { color: var(--text-faint); font-style: italic; }
.chip-origin { color: var(--text-faint); font-style: italic; }
/* Provenance : discrète, elle informe sans rivaliser avec la date ni le projet.
   Le nom de la réunion peut être long, il est tronqué plutôt qu'il ne pousse
   les autres chips hors de la ligne. */
.chip-source {
  color: var(--text-faint); display: inline-flex; align-items: center; gap: 4px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Enveloppe dessinée d'une tâche née d'un mail (Messagerie, lot 2). */
.chip-source .chip-ico { width: 13px; height: 13px; flex: none; }
/* Une source cliquable doit se voir comme telle : sans indice, personne ne
   pense à cliquer un libellé qui a toujours été décoratif. Soulignement au
   survol seulement, pour ne pas alourdir une ligne de tâche qui en porte
   déjà plusieurs. */
a.chip-source-lien { text-decoration: none; cursor: pointer; }
a.chip-source-lien:hover { color: var(--text-soft); text-decoration: underline; }
/* Sans survol (tactile, écran de voiture), l'indice doit être permanent. */
@media (hover: none) {
  a.chip-source-lien { text-decoration: underline; text-underline-offset: 2px; }
}
/* Cible tactile : la ligne de tâche est dense, mais un lien reste un lien. */
[data-voiture="1"] a.chip-source-lien { padding: 6px 0; }

/* Tâches privées (spec 6.2) : teinte graphite, distincte des six teintes des
   chips. Le bloc sombre suit le bloc clair : à spécificité égale, il gagne. */
:root { --priv-bg: #e6e9ef; --priv-fg: #3b4a63; }
[data-theme="dark"] { --priv-bg: #2c3240; --priv-fg: #b7c3da; }
/* Cadenas de ligne : discret tant que la tâche est partagée (visible au
   survol), toujours visible et teinté quand elle est privée. */
.task-lock {
  flex-shrink: 0; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; padding: 0;
  border: none; border-radius: 6px; background: none;
  color: var(--text-faint); visibility: hidden;
}
.task-lock .chip-ico { width: 14px; height: 14px; margin: 0; vertical-align: 0; }
/* `.task:focus-within` est indispensable, et `.task-lock:focus-visible` seul
   était du code MORT : un élément en `visibility: hidden` n'est pas rendu,
   donc pas focusable, donc il ne peut jamais se révéler par son propre focus.
   Sans la révélation portée par la LIGNE, personne au clavier ne pouvait
   rendre une tâche privée depuis une liste. Éprouvé dans Chrome sans tête :
   avant, focus() sur le cadenas d'une tâche partagée laissait activeElement
   sur le body, même le focus déjà posé sur la case à cocher de la ligne. */
.task:hover .task-lock, .task:focus-within .task-lock,
.task-lock:focus-visible, .task-lock.on { visibility: visible; }
.task-lock:hover { background: var(--hover); color: var(--text-soft); }
.task-lock.on { background: var(--priv-bg); color: var(--priv-fg); }
/* Sans survol (tactile), le cadenas ouvert reste accessible au doigt. */
@media (hover: none) {
  .task-lock { visibility: visible; }
}
[data-voiture="1"] .task-lock { visibility: visible; width: 44px; height: 44px; align-self: center; }
[data-voiture="1"] .task-lock .chip-ico { width: 20px; height: 20px; }

/* Applications à installer : une entrée par plateforme publiée. */
.app-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.app-item:last-child { border-bottom: none; }
.app-item-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.app-item-meta { color: var(--text-faint); font-size: .85rem; }
.app-item .settings-hint { margin: 4px 0 10px; }
.app-item a.header-btn { display: inline-block; text-decoration: none; }
/* Extension dans les applications (spec 2026-09-29) */
.app-nouveau { font-size: 11.5px; font-weight: 700; color: var(--hl-date-fg); background: var(--hl-date-bg); border-radius: 10px; padding: 1px 8px; }
.ext-guide { list-style: none; margin: 4px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); display: flex; flex-direction: column; gap: 14px; }
.ext-guide li { display: flex; gap: 12px; }
.ext-guide li > div { flex: 1; min-width: 0; }
.ext-guide p { margin: 0; font-size: 13.5px; line-height: 20px; }
.ext-guide .settings-hint { margin: 6px 0 0; }
.ext-guide li > div > a.header-btn { margin-top: 8px; }
.ext-num { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--hl-project-bg); color: var(--hl-project-fg); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ext-ligne { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ext-ligne[hidden] { display: none; }
.ext-ligne code { padding: 6px 12px; border-radius: 8px; background: var(--bg-mute); font-size: 13px; word-break: break-all; }

/* Avertissement « pas encore enregistré » : visible sans être alarmant, et
   placé juste au-dessus du bouton qui le résout. */
.settings-warn {
  color: var(--red); font-size: .9rem; font-weight: 500;
  margin: 10px 0 6px; padding: 8px 10px;
  border: 1px solid var(--red); border-radius: 8px;
}
/* Le bouton d'enregistrement se met en avant tant qu'un choix est en attente. */
#bd-mapping-save.primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }

.bd-mois-label { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.bd-mois-label input { width: auto; }

.chip-stage { font-weight: 600; }
.chip-stage.stage-doing { color: var(--p2); }
.chip-stage.stage-blocked { color: var(--p1); }
/* Nom de sa colonne sur une carte du Kanban global (spec 2026-10-05, 5.2). */
.chip-colonne { color: var(--text-soft); }
.chip-status { color: var(--text-soft); }
.chip-status.completed { color: #058527; }
.chip-status.deleted { color: var(--p1); }
.sent-row { align-items: center; cursor: default; }

/* Visite guidée de première connexion.
   Overlay maison plutôt qu'un dialog modal : un dialog en showModal occupe le
   top layer, et plus rien du document normal ne peut passer devant, halo
   compris. Le voile est produit par l'ombre portée du trou, ce qui donne une
   découpe nette autour de la cible sans masque ni SVG. */
#tour-overlay { position: fixed; inset: 0; z-index: 2000; }
#tour-overlay[hidden] { display: none; }
/* Sans cible visible : voile uni, posé sur l'overlay lui-même. Classe explicite
   plutôt que :has(), qui manque encore sur les navigateurs un peu anciens et
   ferait disparaître le voile sans erreur. */
#tour-overlay.no-target { background: rgba(0, 0, 0, .5); }
#tour-hole {
  position: fixed; border-radius: 9px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5), 0 0 0 2px var(--red) inset;
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
#tour-hole[hidden] { display: none; }
#tour-panel {
  position: fixed; width: min(440px, calc(100vw - 24px));
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 22px 22px 16px; box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}
#tour-panel.tour-centered {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
#tour-body h2 { margin: 0 0 10px; font-size: 18px; }
#tour-body p { margin: 0; line-height: 1.6; color: var(--text-soft); font-size: 13.5px; }
.tour-footer { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.tour-dots { display: flex; gap: 5px; margin-right: auto; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.tour-dot.on { background: var(--text-soft); }
/* Au téléphone, les points prennent leur ligne : « Retour », « Passer » et « Suivant » tiennent dans le panneau,
   dont « Suivant » débordait de 53 px à 360 px (#2253). Au doigt, des cibles de 44 px. */
@media (max-width: 480px) {
  .tour-footer { flex-wrap: wrap; justify-content: flex-end; row-gap: 12px; }
  .tour-dots { flex: 1 0 100%; margin-right: 0; }
}
@media (hover: none) { .tour-footer .header-btn { min-height: 44px; } }

/* Liste d'étapes de la prise en main. */
.ob-step {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
/* Dans les réglages, la liste vit dans une carte : lignes plus aérées. */
#onboarding-list .ob-step { padding: 12px 16px; border-bottom: 0; border-top: 1px solid var(--border); align-items: center; }
#onboarding-list .ob-step:first-child { border-top: 0; }
#onboarding-list .ob-mark { width: 24px; height: 24px; margin-top: 0; }
#onboarding-list .ob-step.done .ob-title { color: var(--text-soft); font-weight: 500; }
.ob-mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; font-size: 12px; color: var(--text-faint);
}
.ob-step.done .ob-mark { background: #058527; border-color: #058527; color: #fff; }
.ob-step.skipped { opacity: .55; }
.ob-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ob-title { font-weight: 600; font-size: 13.5px; }
.ob-title em { font-weight: 400; color: var(--text-faint); font-style: normal; }
.ob-why { color: var(--text-faint); font-size: 12.5px; line-height: 1.5; }
.ob-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.ob-skip {
  border: none; background: none; color: var(--text-faint); cursor: pointer;
  font-size: 12px; text-decoration: underline;
}
.ob-skip:hover { color: var(--text); }

/* Blocs de configuration MCP : du code à copier, jamais à retaper. */
.mcp-block {
  flex: 1; min-width: 0; margin: 0; padding: 9px 11px;
  background: var(--bg-mute); border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; line-height: 1.55; overflow-x: auto; white-space: pre;
  user-select: all;
}

/* Vue Grand ménage : des piles de tâches à trancher une par une. */
.review-note {
  margin: 0 0 14px; color: var(--text-faint); font-size: 13px; line-height: 1.5;
}
.review-pile {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 14px; background: var(--bg-elev);
}
.review-head { position: relative; margin-bottom: 8px; }
.review-head h3 {
  margin: 0 0 2px; font-size: 14.5px; display: flex; align-items: center; gap: 8px;
}
.review-count {
  background: var(--bg-mute); color: var(--text-soft); border-radius: 999px;
  padding: 1px 8px; font-size: 12px; font-weight: 600;
}
.review-hint { margin: 0; color: var(--text-faint); font-size: 12.5px; }
.review-keep-all {
  position: absolute; top: 0; right: 0;
  border: 1px solid var(--border); border-radius: 7px; background: none;
  color: var(--text-soft); cursor: pointer; padding: 4px 9px; font-size: 12px;
}
.review-keep-all:hover { background: var(--hover); color: var(--text); }
.review-row {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--border);
}
.review-row .task { flex: 1; min-width: 0; }
.review-actions { display: flex; gap: 5px; flex: none; }
.review-actions button {
  border: 1px solid var(--border); border-radius: 7px; background: none;
  color: var(--text-soft); cursor: pointer; padding: 4px 9px; font-size: 12px;
}
.review-actions button:hover { background: var(--hover); color: var(--text); }
.review-actions button.danger:hover { background: var(--p1); color: #fff; border-color: var(--p1); }
/* Pastille « une revue est due » : un point, pas un chiffre. Le nombre exact
   demanderait de calculer les piles à chaque rendu de la barre latérale. */
#review-nav.due .count { color: var(--p1); font-weight: 700; }

/* Vue Collaboration : une carte par personne. Grille fluide, pour rester
   lisible d'un écran de téléphone à un large écran. */
.shared-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.shared-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px;
  background: var(--bg-elev); display: flex; flex-direction: column; gap: 10px;
}
.shared-head { display: flex; align-items: center; gap: 9px; }
.shared-name { font-weight: 600; }
.shared-late {
  margin-left: auto; color: var(--p1); font-size: 12px; font-weight: 600;
}
.shared-stats {
  display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-faint);
}
.shared-stats span + span::before { content: '·'; margin-right: 10px; }
.shared-projects { display: flex; flex-direction: column; gap: 4px; }
.shared-proj {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 5px 7px; border: none; border-radius: 7px; cursor: pointer;
  background: none; color: var(--text); font-size: 13px; text-align: left;
}
.shared-proj:hover { background: var(--hover); }
.shared-proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-proj-dir { color: var(--text-faint); font-size: 11.5px; }
.shared-proj .count { margin-left: auto; }
.shared-tasks-btn {
  align-self: flex-start; border: 1px solid var(--border); border-radius: 7px;
  background: none; color: var(--text-soft); cursor: pointer;
  padding: 5px 10px; font-size: 12.5px;
}
.shared-tasks-btn:hover { background: var(--hover); color: var(--text); }
.shared-tasklist { border-top: 1px solid var(--border); padding-top: 8px; }
.route-btn {
  margin-left: auto; border: 1px solid var(--border); background: var(--bg-elev);
  border-radius: 20px; padding: 2px 10px; font-size: 12px; color: var(--red);
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.route-btn:hover { background: var(--active); border-color: var(--red); }

/* ---------- En-tête de vue ---------- */
#view-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.segmented button {
  border: none; background: var(--bg-elev); padding: 6px 14px; color: var(--text-soft); font-size: 13px;
}
.segmented button.active { background: var(--active); color: var(--red); font-weight: 600; }
/* Onglets d'Aujourd'hui : la couleur et le fond marquent l'onglet courant ;
   en gras, il s'élargissait et les onglets bougeaient d'une vue à l'autre. */
.onglets-jour button.active { font-weight: inherit; }
/* Au bureau, repliés sous les autres actions (fiche ouverte, fenêtre
   étroite), les onglets restent au bord droit ; et « Sélectionner » ne se lit
   pas comme un quatrième onglet. Sous 769 px, #view-actions est un flex. */
@media (min-width: 769px) {
  #view-header #view-actions:has(> .onglets-jour) { text-align: right; }
  #view-actions .selection-entrer + .onglets-jour { margin-left: 8px; }
}
/* Le titre a la largeur d'« Aujourd'hui » dans les trois vues : l'en-tête
   passe à la ligne au même seuil, les onglets ne sautent pas en hauteur. */
@media (min-width: 769px) {
  #view-header:has(.onglets-jour) #view-title { min-width: 5.5em; }
  .onglets-jour button { white-space: nowrap; }
}
.header-btn {
  border: 1px solid var(--border); background: var(--bg-elev); border-radius: 8px;
  padding: 6px 12px; font-size: 13px;
}
.header-btn.danger { color: var(--p1); }
.header-btn.danger:hover { background: #fdf0ef; }
/* En-tête des tableaux par statut (spec 2026-10-05) : « Trier » et
   « Colonnes… », à côté des modes de la vue. */
.tableau-outils { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; vertical-align: middle; }
.tableau-outils .header-btn { white-space: nowrap; }

/* ---------- Vues tableau (kanban, planning) ---------- */
/* Les vues tableau s'étalent sur toute la largeur de la fenêtre */
#main.board-mode { max-width: none; }
.board {
  display: flex; gap: 12px; align-items: flex-start;
  overflow-x: auto; padding: 16px 0 24px;
}
/* Glisser vers une colonne courte (spec 2026-10-06, 4.2) : au-dessus de
   768 px, chaque colonne prend la hauteur de la plus haute, et toute sa
   hauteur accepte le dépôt (le gestionnaire est sur la colonne). À 768 px et
   moins, pas de glisser au doigt : les colonnes gardent leur hauteur. */
@media (min-width: 769px) {
  .board { align-items: stretch; }
}
.board-col {
  /* colonnes fluides : elles se partagent la largeur, plancher à 210px
     (au-delà du plancher, la rangée défile horizontalement) */
  flex: 1 1 0; min-width: 210px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px;
}
.board-col-title {
  font-weight: 700; font-size: 13px; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
/* Compteur de colonne en pastille : il ne se colle jamais au libellé, même
   quand la colonne repliée se rétracte à son contenu (« Terminé5 », retour
   terrain du 2026-10-05). Vide (colonne sans carte), il disparaît. */
.board-col-title .count {
  flex: none; min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-mute); color: var(--text-soft); font-weight: 600; text-align: center;
}
.board-col-title .count:empty { display: none; }
.board-col.collapsed .board-col-title { margin-bottom: 0; }
.col-p1 .board-col-title { color: var(--p1); }
.col-p2 .board-col-title { color: var(--p2); }
.col-p3 .board-col-title { color: var(--p3); }
.col-p4 .board-col-title { color: var(--p4); }
.col-overdue .board-col-title { color: var(--p1); }
.col-today .board-col-title { color: #058527; }
.col-nodate .board-col-title { color: var(--text-faint); }
/* Vue Statut : à faire neutre, en cours et bloqué comme les priorités, terminé
   au vert des journées à jour */
.col-stage-todo .board-col-title { color: var(--text-soft); }
.col-stage-doing .board-col-title { color: var(--p2); }
.col-stage-blocked .board-col-title { color: var(--p1); }
.col-stage-done .board-col-title { color: #058527; }
/* Mode Personne : pastille puis nom, le compteur repoussé à droite */
.board.person .board-col-title { display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.board.person .board-col-title .count { margin-left: auto; }
.col-unassigned .board-col-title { color: var(--text-faint); }
/* Ajout direct en pied de colonne */
.board-col-add { margin-top: 6px; }
.board-col-add input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  border: 1px dashed var(--border); border-radius: 8px; padding: 6px 8px;
  background: transparent; color: var(--text);
}
.board-col-add input:focus { border-style: solid; outline: none; border-color: var(--red); background: var(--bg-elev); }
/* Texte indicatif : le gris par défaut du navigateur ne tient pas 4,5:1 sur le
   fond des colonnes ; le gris doux du thème le fait dans les deux thèmes. */
.board-col-add input::placeholder { color: var(--text-soft); }
/* Au toucher : 40 px de haut, et 16 px de corps pour que iOS ne zoome pas la
   page quand le champ prend le focus. */
@media (hover: none) { .board-col-add input { min-height: 40px; font-size: 16px; } }
/* « Mes tâches » et « + non attribuées » : bascules en pilule */
.mine-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 8px;
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-soft);
  border-radius: 999px; padding: 4px 10px; font-size: 13px; cursor: pointer;
}
.mine-toggle.on { border-color: var(--red); color: var(--red); background: var(--active); }
/* Au Kanban, « Trier » suit « Mes tâches » à 8 px, comme les autres actions,
   et non 16 (les deux marges de 8 px). */
.mine-toggle + .tableau-outils { margin-left: 0; }
/* Au toucher, « Mes tâches » et « Trier » ne restent pas à 28 px à côté de
   modes à 44 px. Le mode voiture (48 px, plus bas dans ce fichier) l'emporte
   à spécificité égale. */
@media (hover: none) {
  .mine-toggle, .tableau-outils .header-btn { min-height: 40px; }
}
/* Colonne repliable : le titre est le bouton, le corps se cache par [hidden].
   La règle display:flex de .board-col-body l'emporterait sinon sur le
   display:none que le navigateur applique par défaut à cet attribut, et la
   colonne repliée resterait ouverte. */
.board-col.collapsible .board-col-title { cursor: pointer; user-select: none; }
.board-col-body[hidden] { display: none; }
.board-col.collapsed { flex: 0 0 auto; min-width: 0; }

/* Vue Effort : dégradé de la plus petite tâche à la plus grosse */
.col-eff-xs .board-col-title { color: #058527; }
.col-eff-s .board-col-title { color: var(--hl-est-fg); }
.col-eff-m .board-col-title { color: var(--p2); }
.col-eff-l .board-col-title { color: var(--p1); }
.col-eff-none .board-col-title { color: var(--text-faint); }
/* Plage et budget de la colonne, sous son nom : le titre passe en deux lignes */
.board.effort .board-col-title { align-items: flex-start; }
.board-col-sub {
  display: block; font-weight: 400; font-size: 11.5px; color: var(--text-faint);
  margin-top: 2px;
}
.board-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 30px; }
.board-col.drop-target { outline: 2px dashed var(--red); outline-offset: -2px; }
.board-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 10px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.board-card:hover { border-color: #ddd; }
.board-card.dragging { opacity: .4; }
.board-card-top { display: flex; gap: 8px; align-items: flex-start; }
.board-card .task-content { font-size: 13px; line-height: 1.35; }
.board-card .task-meta { margin-top: 6px; font-size: 11.5px; flex-wrap: wrap; row-gap: 4px; }
/* Nom de projet d'une carte (spec 2026-10-05, 5.1) : coupé par des points de
   suspension plutôt que de déborder ; les autres pastilles passent à la ligne. */
.board-card .chip-project { margin-left: 0; min-width: 0; max-width: 100%; }
.chip-project-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Priorité d'une carte : en tête de ses pastilles, aux couleurs des
   priorités. P4, le cas ordinaire, n'en porte pas. */
.chip-prio {
  flex: none; font-weight: 700; font-size: 10.5px; line-height: 16px;
  padding: 0 6px; border: 1px solid currentColor; border-radius: 999px;
}
.chip-prio.p1 { color: var(--p1); }
.chip-prio.p2 { color: var(--p2); }
.chip-prio.p3 { color: var(--p3); }
.chip-prio.p4 { color: var(--p4); }
/* Bouton de statut de la carte : discret à la souris, cible confortable au
   doigt (le glisser-déposer n'existe pas au tactile). */
.card-status {
  margin-left: auto; flex: none; border: 1px solid var(--border); border-radius: 6px;
  background: none; color: var(--text-faint); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 3px 6px;
}
.card-status:hover { color: var(--text-soft); border-color: #ddd; }
.card-status.stage-doing { color: var(--p2); border-color: var(--p2); }
.card-status.stage-blocked { color: var(--p1); border-color: var(--p1); }
.card-status.stage-done { color: #058527; border-color: #058527; }
.board-card.ouverte { box-shadow: 0 0 0 2px var(--red); }

/* ---------- Corbeille ---------- */
.trash-row { align-items: center; cursor: default; }
.trash-row .task-content { color: var(--text-soft); }
.trash-restore {
  border: 1px solid var(--border); background: var(--bg-elev); border-radius: 7px;
  padding: 5px 10px; font-size: 12.5px; white-space: nowrap;
}
.trash-restore:hover { border-color: #058527; color: #058527; }
.trash-purge {
  border: none; background: none; color: var(--text-faint); font-size: 14px; padding: 4px 8px;
}
.trash-purge:hover { color: var(--p1); }

.empty {
  text-align: center; color: var(--text-faint); padding: 60px 0;
}
.empty .big { font-size: 40px; margin-bottom: 10px; }

/* ---------- Dialogs ---------- */
dialog {
  border: none; border-radius: 12px; padding: 0; width: 480px; max-width: 92vw;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  background: var(--bg-elev); color: var(--text);
}
dialog input, dialog textarea, dialog select, #login-form input {
  background: var(--bg-elev); color: inherit;
}
dialog::backdrop { background: rgba(0,0,0,.25); }
dialog form { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
dialog h2 { margin: 0; font-size: 17px; }
dialog input:not([type="checkbox"]):not([type="radio"]), dialog textarea, dialog select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit;
}
#tf-content { font-weight: 600; font-size: 16px; border: none; padding: 4px 0; outline: none; }
#tf-description { border: none; padding: 4px 0; outline: none; resize: vertical; }
.tf-row { display: flex; gap: 10px; }
.tf-row label { flex: 1; }
dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); }
dialog label.pf-check { flex-direction: row; align-items: center; gap: 8px; }
dialog label.pf-check input { width: auto; }
.tf-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.spacer { flex: 1; }
.tf-actions button {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-elev);
}
.tf-actions .primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.tf-actions .danger { color: var(--p1); border-color: transparent; background: none; }
.tf-actions .danger:hover { background: #fdf0ef; }

/* Confirmation d'une action destructive et message à acquitter : plus étroits
   que les formulaires, action de droite en plein pour qu'on voie ce qu'on
   valide. Voir ui/dialogs.js. */
#confirm-dialog, #alert-dialog { width: 380px; }
#cd-message, #ad-message { margin: 0; padding: 22px 22px 0; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
/* Question à titre (askConfirm, message { titre, texte }) : la question en
   gras, puis ses paragraphes, plus discrets ; un peu plus large au bureau,
   pour qu'un texte de plusieurs paragraphes ne s'étire pas en colonne. Aucun
   max-width ici : celui des dialogues (92vw, et 100vw pour les feuilles
   basses du téléphone) doit s'appliquer. */
#cd-titre { margin: 0; padding: 22px 22px 0; font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
#confirm-dialog.cd-avec-titre { width: 460px; }
#confirm-dialog.cd-avec-titre #cd-message { padding-top: 8px; font-size: 13.5px; color: var(--text-soft); }
/* Au téléphone, les dialogues sont des feuilles basses de toute la largeur
   (« Dialogues en feuilles », plus bas) ; la confirmation et le message
   gardaient leur largeur de bureau, si bien qu'entre 381 et 768 px la feuille
   restait étroite et calée à gauche (QA visuelle du lot 2). */
@media (max-width: 768px) {
  #confirm-dialog, #alert-dialog, #confirm-dialog.cd-avec-titre { width: 100vw; }
}
/* Refus « hors projet » du quickadd (askHorsProjet) : même gabarit. */
#hors-projet-dialog { width: 400px; max-width: calc(100vw - 32px); }
#hors-projet-dialog .cd-actions { flex-wrap: wrap; }
#hors-projet-msg { margin: 0; padding: 22px 22px 0; line-height: 1.45; overflow-wrap: anywhere; }
.cd-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px 20px; }
.cd-actions button {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--bg-elev); color: var(--text);
}
.cd-actions .danger { background: var(--p1); border-color: var(--p1); color: #fff; font-weight: 600; }
.cd-actions .primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
/* Lien d'issue d'un message (showAlert, `lien` : « Ouvrir Tudu dans le
   navigateur » dans l'app macOS) : la forme d'un bouton plein, dans le rouge
   plus sombre des écrans de la Messagerie (#c43d30, 5,2:1 sous le texte
   blanc ; le rouge de Tudu, --red, n'y fait que 4,1:1). */
#ad-lien {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-strong);
  text-decoration: none;
}
#ad-lien[hidden] { display: none; }
#ad-lien.primary { background: #c43d30; border-color: #c43d30; }
/* Au doigt, les gestes de la question et du message font 44 px (QA du lot
   5 : « Continuer chez Google » en faisait 35). */
@media (hover: none) { #confirm-dialog .cd-actions button, #alert-dialog .cd-actions :is(button, #ad-lien) { min-height: 44px; } }

/* Doublon probable (askDuplicate, ui/dialogs.js) : la tâche saisie dans
   l'ajout rapide ressemble à une tâche existante. Gabarit de la fusion
   manuelle : le titre en tête, une ligne par tâche existante (le choix, son
   titre, puis projet, échéance et ressemblance dessous, « Ouvrir » à droite),
   les trois issues en pied. Sans ces règles, `dialog label` faisait de chaque
   ligne une colonne de 12 px en gris : le bouton radio seul sur sa ligne, le
   titre collé au nom du projet, « Ouvrir » en barre grise (relevé du
   2026-10-06). Largeur réservée au bureau : sous 768 px, la règle des
   dialogues en feuilles s'applique telle quelle. */
@media (min-width: 769px) { #duplicate-dialog { width: 520px; } }
#dup-title { margin: 0; padding: 22px 22px 0; font-size: 17px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
#dup-list { margin: 14px 22px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
#duplicate-dialog label.dup-row {
  flex-direction: row; align-items: flex-start; gap: 10px; padding: 9px 10px; border-top: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.45; color: var(--text); cursor: pointer;
}
#duplicate-dialog label.dup-row:first-child { border-top: none; }
/* La ligne choisie, celle que « Fusionner » complétera. */
#duplicate-dialog label.dup-row:has(input:checked) { background: var(--active); }
#duplicate-dialog .dup-row input { width: auto; margin: 3px 0 0; flex: none; accent-color: var(--red); }
.dup-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dup-content { overflow-wrap: anywhere; }
/* Projet, échéance, « terminée » et ressemblance : le gris de --text-soft
   reste lisible sur le fond de la ligne choisie, celui de --text-faint non. */
.dup-meta { font-size: 12px; color: var(--text-soft); overflow-wrap: anywhere; }
.dup-open {
  flex: none; align-self: center; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--bg-elev); color: var(--text); font-size: 12.5px; line-height: 1.4;
}
.dup-open:hover { background: var(--hover); }
@media (hover: none) { .dup-open { padding: 8px 12px; } }
#duplicate-dialog .cd-actions { flex-wrap: wrap; }
/* En feuille, les boutons ne passent pas sous la barre d'accueil de l'iPhone. */
@media (max-width: 768px) { #duplicate-dialog .cd-actions { padding-bottom: calc(20px + env(safe-area-inset-bottom)); } }

/* Dialogue « Colonnes… » (spec 2026-10-05, 5.2). Sa largeur ne vaut qu'au-dessus
   de 768 px : posée hors média, l'identifiant l'emporterait sur la feuille
   basse pleine largeur des petits écrans (vu en recette). */
@media (min-width: 769px) { #colonnes-dialog { width: 560px; } }
.colonnes-corps { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 0; }
.colonnes-corps h2 { margin: 0; font-size: 17px; }
.colonnes-corps .settings-hint { margin: 0; }
#colonnes-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.colonne-ligne { display: flex; align-items: center; gap: 6px; }
/* Le nom prend la place libre ; l'étape garde sa largeur : sans ces deux
   règles, `dialog select { width: 100% }` écraserait le champ voisin. */
#colonnes-dialog .colonne-ligne .colonne-nom { flex: 1 1 auto; min-width: 0; }
#colonnes-dialog .colonne-ligne .colonne-etape { flex: none; width: auto; }
.colonne-ligne button {
  flex: none; min-width: 32px; height: 32px; padding: 0 6px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-elev); color: var(--text-soft);
}
.colonne-ligne button:disabled { opacity: .35; }
.colonne-pastille { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }
.colonne-pastille.vide { border: 1.5px dashed var(--text-faint); box-sizing: border-box; }
.colonnes-outils { display: flex; flex-wrap: wrap; gap: 8px; }
.colonnes-erreur { margin: 0; color: var(--p1); font-size: 13px; }
.colonnes-erreur[hidden] { display: none; }
#colonnes-dialog .cd-actions { flex-wrap: wrap; align-items: center; }
#colonnes-dialog .cd-actions .colonnes-defaut {
  margin-right: auto; border-color: transparent; background: none; color: var(--text-soft); padding-left: 0;
}
#colonnes-dialog .cd-actions .colonnes-defaut[hidden] { display: none; }
@media (hover: none) { .colonne-ligne button { min-width: 40px; height: 40px; } }
@media (max-width: 768px) {
  .colonne-ligne { flex-wrap: wrap; }
  #colonnes-dialog .colonne-ligne .colonne-nom { flex-basis: 100%; }
}

/* Écran « Nouveautés » du premier chargement (NOUVEAUTES, app.js) : une carte
   par item, empilées en une seule colonne, avec des marges de 16 px pour
   rester lisible en mobile. */
#nouveautes-dialog { width: 520px; max-width: calc(100vw - 32px); }
/* Seule la liste défile : à sept cartes, la fenêtre entière défilait jusqu'au
   lien « Voir la visite guidée », que showModal focalise, et cachait le titre
   et la première carte. Plus spécifique que la feuille du bas des mobiles
   (dialog { overflow-y: auto }). */
#nouveautes-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
#nouveautes-titre { margin: 0; padding: 20px 16px 0; font-size: 17px; }
#nouveautes-liste { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px; overflow-y: auto; min-height: 0; }
/* showModal donne le focus à la liste qui défile : décalé vers l'extérieur,
   son anneau barrait le titre et touchait « C'est parti ». Il se dessine
   dans la liste. */
#nouveautes-liste:focus-visible { outline-offset: -2px; }
.nouveaute { padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-sidebar); }
.nouveaute-titre { display: block; margin-bottom: 4px; }
.nouveaute p { margin: 4px 0 0; font-size: 13px; color: var(--text-soft); line-height: 1.4; }
#nouveautes-dialog .cd-actions { justify-content: space-between; align-items: center; padding: 0 16px 16px; }
#nouveautes-tour { font-size: 13px; color: var(--text-soft); }
/* Au doigt, « C'est parti » fait 44 px (35 sans cela, à 375 px). */
@media (hover: none) { #nouveautes-ok { min-height: 44px; } }

#token-secret {
  margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--bg-sidebar);
  border: 1px solid var(--border); font-size: 12.5px; white-space: pre-wrap; word-break: break-all;
}

#tf-comments { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
.comment {
  background: var(--bg-mute); border-radius: 8px; padding: 8px 10px;
  display: flex; align-items: flex-start; gap: 8px;
}
.comment-body { flex: 1; min-width: 0; }
.comment-text { white-space: pre-line; overflow-wrap: break-word; }
.comment-date { color: var(--text-faint); font-size: 11px; margin-top: 2px; }
.comment-del {
  border: none; background: none; color: var(--text-faint); padding: 0 2px; font-size: 13px;
}
.comment-del:hover { color: var(--p1); }
.chip-comments { color: var(--text-faint); }
.chip-done-at, .chip-created, .chip-updated { color: var(--text-faint); font-style: italic; }

/* ---------- Pièces jointes ---------- */
#tf-attachments { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
#tf-attachments .settings-hint { margin: 0; }
/* Tâches fusionnées dans celle-ci (renderFusionsFiche) : leurs titres, en liste
   discrète sous les pièces jointes. */
.tf-fusions { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-soft); line-height: 1.45; }
.tf-fusions li { overflow-wrap: anywhere; }
.attachment {
  background: var(--bg-mute); border-radius: 8px; padding: 6px 10px;
  display: flex; align-items: center; gap: 8px;
}
.attach-thumb {
  width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
  background: var(--bg-elev);
}
/* Pas d'emoji : l'extension du fichier (« PDF », « XLSX »…) tient lieu d'icône. */
.attach-generic { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: .2px; color: var(--text-soft); }
.attach-name { flex: 1; min-width: 0; overflow-wrap: anywhere; color: inherit; }
.attach-size { color: var(--text-faint); font-size: 11.5px; flex-shrink: 0; }
.attach-del { border: none; background: none; color: var(--text-faint); padding: 0 2px; font-size: 13px; }
.attach-del:hover { color: var(--p1); }

#task-dialog #tf-comments { display: flex; flex-direction: column; gap: 14px; max-height: none; overflow: visible; }
#task-dialog .tf-vide { margin: 0; font-size: 13px; color: var(--text-faint); }
#task-dialog .comment { background: none; padding: 0; gap: 10px; align-items: flex-start; }
#task-dialog .comment .avatar { flex: none; margin-top: 1px; }
#task-dialog .comment-sans-auteur { background: var(--bg-mute); }
/* Le libellé d'un commentaire d'origine mail porte une adresse
   (« Mail de <nom> (<adresse>) ») souvent sans point de coupure :
   elle se coupe où il faut, au lieu de passer sous le « ✕ » et de faire
   défiler les commentaires de côté (relecture finale du lot 2, important 2). */
#task-dialog .comment-head { font-size: 13px; overflow-wrap: anywhere; }
#task-dialog .comment-auteur { font-weight: 600; margin-right: 6px; }
/* D'un bloc : « il y a 9 min » se coupait au téléphone (revue du lot 2, mineur 4). */
#task-dialog .comment-date { display: inline; margin: 0; font-size: 12px; color: var(--text-faint); white-space: nowrap; }
#task-dialog .comment-text { margin-top: 2px; font-size: 14px; line-height: 20px; }
#task-dialog .comment-del { opacity: 0; }
#task-dialog .comment:hover .comment-del, #task-dialog .comment-del:focus-visible { opacity: 1; }
@media (hover: none) { #task-dialog .comment-del { opacity: 1; } }

:is(#task-dialog #tf-attachments, #notes-vue .nq-pieces-liste) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: none; overflow: visible; }
:is(#task-dialog, #notes-vue) .attachment { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-sidebar); }
:is(#task-dialog, #notes-vue) .attach-thumb { width: 32px; height: 32px; border-radius: 7px; }
:is(#task-dialog #tf-attach-count, #notes-vue .nq-pieces-compte) { color: var(--text-faint); font-weight: 500; }

#task-dialog .tf-composer { flex: none; padding: 12px 24px 14px; border-top: 1px solid var(--border); background: var(--bg-elev); }
#task-dialog .tf-composer-box { border: 1px solid var(--border-strong); border-radius: 12px; padding: 10px 10px 8px 12px; }
#task-dialog .tf-composer-box:focus-within { border-color: var(--p3); }
#task-dialog #tf-comment-input {
  width: 100%; margin: 0; border: 0; padding: 2px 0; resize: none; max-height: 132px; overflow-y: auto;
  background: none; font: inherit; font-size: 14px; line-height: 20px; color: var(--text); outline: none;
}
#task-dialog .tf-composer-bar { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
#task-dialog .tf-composer-aide { flex: 1; min-width: 0; padding-left: 6px; font-size: 12px; color: var(--text-faint); }
/* Brouillon du commentaire (#1739) : collé à « Envoyer », téléphone compris
   (l'aide y est masquée, la marge automatique passe alors à la mention). À
   320 px, elle passe sur deux lignes plutôt que de pousser « Envoyer » hors
   du cadre (les espaces de « 14 h 32 » sont insécables). --text-soft, comme
   le témoin de la réponse proposée : --text-faint ne tient que 2,85:1. */
#task-dialog .tf-composer-etat { margin-left: auto; min-width: 0; padding: 0 6px; font-size: 12px; text-align: right; color: var(--text-soft); }
#task-dialog .tf-composer-etat:not([hidden]) + #tf-comment-send { margin-left: 0; }
/* Un échec retient la fiche au clic dans le vide : il ressort, comme « Non enregistré · Réessayer ». */
#task-dialog .tf-composer-etat[data-etat="echec"] { color: var(--late-fg); }
#task-dialog #tf-comment-send {
  height: 32px; padding: 0 14px; border: 0; border-radius: 8px; margin-left: auto;
  background: var(--red); color: #fff; font-size: 13px; font-weight: 600;
}

/* Dépôt de fichier sur le dialogue de tâche. */
#task-dialog.drop-target { outline: 2px dashed var(--red); outline-offset: -6px; }
.tf-meta-info { font-size: 11.5px; color: var(--text-faint); }

/* ---------- Fiche projet (onglets Projet, Pour moi, Partage) ---------- */
/* Ancrée en haut plutôt que centrée : la hauteur varie d'un onglet à l'autre,
   et une fiche centrée ferait sauter la barre d'onglets sous le pointeur. */
#project-dialog { width: 560px; margin-top: 6vh; margin-bottom: auto; max-height: 88vh; overflow: hidden; }
#project-form { padding: 0; gap: 0; max-height: 88vh; }
.pf-head { padding: 18px 24px 0; display: flex; flex-direction: column; gap: 14px; }
.pf-head-top { display: flex; align-items: center; justify-content: space-between; }
#project-dialog h2 {
  font-size: 12px; font-weight: 600; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
.pf-close {
  width: 32px; height: 32px; border: none; background: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--text-soft); cursor: pointer;
}
.pf-close:hover { background: var(--hover); color: var(--text); }
.pf-identity { display: flex; align-items: center; gap: 14px; }
.pf-avatar {
  width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px; font-weight: 800; background: var(--p4);
}
.pf-avatar.is-emoji { background: var(--bg-mute); font-size: 30px; font-weight: 400; }
.pf-avatar.is-logo { background: none; border: 1px solid var(--border); }
#pf-logo-preview { width: 100%; height: 100%; object-fit: cover; }
dialog label.pf-name-label { flex: 1; min-width: 0; }
dialog #pf-name { font-size: 19px; font-weight: 600; color: var(--text); }
.pf-tabs { display: flex; gap: 24px; margin: 0 -24px; padding: 0 24px; border-bottom: 1px solid var(--border); }
.pf-tabs [role="tab"] {
  border: none; background: none; padding: 10px 0; margin-bottom: -1px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--text-soft);
  border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px;
}
.pf-tabs [role="tab"]:hover { color: var(--text); }
.pf-tabs [role="tab"][aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--red); }
/* Notes de projet (N3, planche 1) : rangée Tâches | Notes sous le titre du projet, sans le débord de la fiche projet. */
.onglets-projet.pf-tabs { margin: 8px 0 0; padding: 0; }
.pf-tab-count { font-size: 12px; font-weight: 500; background: var(--bg-mute); color: var(--text-soft); border-radius: 10px; padding: 1px 7px; }
.pf-body { padding: 18px 24px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.pf-panel { display: flex; flex-direction: column; gap: 20px; }
.pf-section { display: flex; flex-direction: column; gap: 12px; }
.pf-section + .pf-section { border-top: 1px solid var(--border); padding-top: 18px; }
#project-dialog h3 {
  margin: 0; font-size: 12px; font-weight: 600; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
#project-dialog h4 { margin: 0; font-size: 14px; font-weight: 600; }
.pf-grid { display: flex; flex-direction: column; gap: 12px; }
.pf-grid:empty { display: none; }
dialog .pf-grid-row, .pf-grid-row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px;
  align-items: start; font-size: 14px; color: var(--text);
}
.pf-grid-row > .pf-grid-label { padding-top: 6px; }
dialog label.pf-grid-row { align-items: center; }
.pf-icon-field, .pf-pro-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-icon-detail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-hint { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-soft); }
.pf-error { margin: 0; font-size: 13px; color: var(--p1); }
.pf-note {
  margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-soft);
  background: var(--bg-soft); border-radius: 8px; padding: 10px 12px;
}
.pf-link-btn { border: none; background: none; padding: 5px 4px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text-soft); text-decoration: underline; }
.pf-link-btn:hover { color: var(--text); }
/* Choix exclusif en boutons collés : Logo / Emoji / Aucune, Pro / Perso. */
.pf-seg { display: inline-flex; gap: 2px; background: var(--bg-mute); border-radius: 8px; padding: 3px; align-self: flex-start; }
.pf-seg > button, .pf-seg > label > span {
  display: block; border: none; background: none; border-radius: 6px; padding: 5px 14px;
  font: inherit; font-size: 13px; color: var(--text-soft); cursor: pointer;
}
dialog .pf-seg > label { display: block; font-size: 13px; }
.pf-seg > label > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pf-seg > button[aria-pressed="true"], .pf-seg > label > input:checked + span {
  background: var(--bg-elev); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.pf-seg > label > input:focus-visible + span { outline: 2px solid var(--p3); outline-offset: 1px; }
#pf-colors { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
/* Interrupteur : libellé court, explication dessous, bascule à droite. La
   case reste un vrai input checkbox (même id qu'avant), dessinée en CSS. */
dialog label.pf-switch {
  flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px;
  font-size: 14px; color: var(--text); cursor: pointer;
}
.pf-switch-text { display: flex; flex-direction: column; gap: 2px; }
.pf-switch-title { font-weight: 500; }
dialog .pf-switch input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 0; cursor: pointer;
  width: 40px; height: 24px; border-radius: 12px; background: var(--border-strong);
  position: relative; transition: background .15s;
}
dialog .pf-switch input[type="checkbox"]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
dialog .pf-switch input[type="checkbox"]:checked { background: var(--red); }
dialog .pf-switch input[type="checkbox"]:checked::before { transform: translateX(16px); }
dialog .pf-switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--p3); outline-offset: 2px; }
.pf-invite-label { font-size: 14px !important; font-weight: 500; color: var(--text) !important; }
.pf-invite { display: flex; gap: 8px; }
dialog .pf-invite input, dialog .pf-invite select { flex: 1; min-width: 0; }
dialog .pf-invite #pf-member-role { flex: 0 0 auto; width: auto; }
.pf-invite-btn { flex-shrink: 0; font-weight: 600; }
/* Mails d'équipe du projet (Messagerie, lot 3) : le sujet, et les adresses
   de groupe sur le modèle des membres. */
#pf-mail { gap: 16px; }
.pf-champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#pf-subject { resize: vertical; min-height: 64px; }
.pf-mail-aide { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#pf-subject-count { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-mail-adresses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-mail-adresses:empty { display: none; }
.pf-mail-adresse {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
  display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0;
}
.pf-mail-adresse-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pf-mail-origine { flex: none; color: var(--text-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.pf-mail-origine.appris { color: var(--hl-person-fg); }
.pf-mail-usage { flex: none; color: var(--text-soft); font-size: 12px; }
.pf-mail-ajout { margin-top: 4px; }
.pf-mail-retirer:disabled, #pf-group-add:disabled { opacity: .5; cursor: default; }
/* Le refus d'un ajout : le rouge de --p1 ne tient pas 4,5:1 sur le fond du
   dialogue sombre (3,2:1), --late-fg le tient dans les deux thèmes. */
#pf-group-error { color: var(--late-fg); }
/* En feuille du bas (le dialogue y prend toute la largeur) ou sans survol, le
   titre qui donnerait l'adresse entière n'existe pas : la couper en fin de
   ligne cacherait son domaine, ce qui la distingue. Elle s'écrit donc entière,
   à la ligne si elle est longue, et « Saisie » ou « Apprise », le nombre de
   mails et « Retirer » passent dessous. Le champ d'ajout garde son bouton à
   côté, sur une seule ligne, à 16 px (en dessous, un iPhone zoome la page). */
@media (max-width: 768px), (hover: none) {
  .pf-mail-adresse { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; }
  .pf-mail-adresse-nom { grid-column: 1 / -1; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
  .pf-mail-origine { grid-column: 1; }
  .pf-mail-usage { grid-column: 2; }
  .pf-mail-retirer { grid-column: 3; }
}
@media (max-width: 768px) {
  #pf-group-address { font-size: 16px; }
}
@media (max-width: 600px) {
  .pf-invite.pf-mail-ajout { flex-wrap: nowrap; }
  dialog .pf-invite.pf-mail-ajout input { flex-basis: 0%; }
}
/* Au doigt, comme les gestes « Probablement traitée » (44 px). */
@media (hover: none) {
  .pf-mail-retirer, #pf-group-add { min-height: 44px; }
}
.pf-roles { display: flex; flex-direction: column; gap: 4px; }
.pf-roles strong { color: var(--text); font-weight: 600; }
.pf-sensitive { border: 1px solid var(--border-strong); border-radius: 10px; padding: 14px 16px !important; }
.pf-section + .pf-sensitive { border-top: 1px solid var(--border-strong); }
#pf-share-owner, #pf-share-editor, #pf-share { display: flex; flex-direction: column; gap: 20px; }
.pf-actions { margin: 0; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--bg-sidebar); border-radius: 0 0 12px 12px; }
@media (max-width: 600px) {
  .pf-grid-row, dialog .pf-grid-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pf-grid-row > .pf-grid-label { padding-top: 0; }
  .pf-invite { flex-wrap: wrap; }
  dialog .pf-invite input { flex-basis: 100%; }
}

/* ---------- Réglages ---------- */
dialog h3 { margin: 10px 0 0; font-size: 13px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .4px; }
.settings-status { font-size: 13px; color: var(--text-soft); min-height: 1.2em; }
.settings-hint { margin: 0; font-size: 12.5px; color: var(--text-faint); }
/* Nom cliquable au fil d'un texte d'aide : mène là où le réglage se change,
   plutôt que de se contenter de le nommer. */
.hint-lien {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.hint-lien:hover { color: var(--text); }
.settings-subhead { margin: 10px 0 2px; font-size: 12px; font-weight: 700; color: var(--text-soft); }
.settings-row { display: flex; gap: 8px; align-items: center; }
.settings-row input[readonly] { flex: 1; font-size: 12px; color: var(--text-soft); }
#deleg-received-list, #deleg-sent-list { display: flex; flex-direction: column; gap: 6px; }
#deleg-received-list .settings-row, #deleg-sent-list .settings-row { flex-wrap: wrap; }
.ics-projects { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ics-proj { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 13px !important; color: var(--text) !important; }
/* Le texte de consentement unique porte un `\n` par usage (public/ui/connectors.js:
   consentGlobalText) : sans `pre-line`, ces retours à la ligne s'effondrent en
   espaces et la liste « un usage par ligne » voulue par la spec devient un
   paragraphe de six phrases (revue finale, C2). */
#connectors-consent-text { white-space: pre-line; }
/* .ics-proj impose `align-items: center`, ce qui centre la case verticalement
   sur ce bloc devenu haut à cause du `pre-line` ci-dessus : la case doit
   rester en tête du texte, pas au milieu. */
#connectors-consent-row { align-items: flex-start !important; }
.tf-row .grow { flex: 2; }
.color-swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0;
}
.color-swatch.selected { border-color: var(--text); }

/* ---------- Ranger l'Inbox : grappes de tâches proches (tâche 8) ---------- */
#rangement-panneau { display: flex; flex-direction: column; gap: 14px; }
.rangement-tete { display: flex; align-items: center; justify-content: space-between; }
#rangement-fusions { display: flex; flex-direction: column; gap: 8px; }
/* Même flex-wrap que .grappe-tache : sur un écran étroit, le titre de la tâche
   gardée est le seul élément qui permette de reconnaître la fusion à défaire,
   il ne doit jamais être écrasé par le bouton. */
.fusion-faite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grappe {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.grappe-tete { margin: 0; font-size: 12.5px; color: var(--text-soft); }
/* flex-wrap (MIN-4) : sans lui, la mention nowrap et le bouton incompressible
   écrasent le texte de la tâche, seul élément qui permette de choisir, sur un
   écran étroit. */
.grappe-tache { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grappe-texte { flex: 1; min-width: 0; }
.grappe-porte { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
/* Grappes (spec 2026-10-05, 7.3) : « Ce ne sont pas des doublons » sur la
   ligne de tête, une case « Dans la fusion » par tâche. */
.grappe-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.grappe-dans { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); cursor: pointer; white-space: nowrap; }
.grappe-dans input { margin: 0; accent-color: var(--red); }
.grappe .header-btn:disabled { opacity: .5; cursor: default; }

/* =====================================================================
   Mobile (téléphones et petites tablettes)
   Sidebar → drawer coulissant · barre d'onglets en bas · barre d'ajout + bottom
   sheet pour l'ajout rapide · dialogues en feuilles · cibles 44px+
   ===================================================================== */
@media (max-width: 768px) {
  #app { display: block; min-height: 100dvh; }

  /* Le repli desktop n'a pas de sens en mobile (la sidebar est un drawer) : on
     masque le bouton et on ignore l'état replié. */
  #sidebar-toggle { display: none; }
  body.sidebar-collapsed #sidebar { display: flex; }

  /* ---- Sidebar en drawer ---- */
  #sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: min(82vw, 320px); height: 100dvh;
    transform: translateX(-105%);
    /* Fermé, le tiroir sort aussi de l'arbre d'accessibilité (VoiceOver,
       TalkBack), une fois sa glissade finie (spec 2026-10-13, 7). */
    visibility: hidden;
    transition: transform .25s ease, visibility 0s .25s;
    box-shadow: 4px 0 24px rgba(60, 30, 20, .14);
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  body.drawer-open #sidebar { transform: translateX(0); visibility: visible; transition: transform .25s ease; }
  /* La grille reprend aussi la zone d'accueil de l'iPhone : sinon les projets
     défilent dans la bande laissée sous elle. */
  .grille-vues {
    bottom: calc(-14px - env(safe-area-inset-bottom)); margin-bottom: calc(-14px - env(safe-area-inset-bottom));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  #drawer-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(32, 24, 20, .38);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  body.drawer-open #drawer-overlay,
  body.qa-open #drawer-overlay { display: block; opacity: 1; pointer-events: auto; }
  #drawer-overlay { display: block; }

  /* ---- Contenu principal ---- */
  #main {
    max-width: none;
    padding: 16px 16px calc(150px + env(safe-area-inset-bottom));
  }
  /* En-tête sur deux rangées (décision de Vincent, 2026-10-06 ; spec
     2026-10-06, 2.2, « 375 px de large »). Rangée 1 : le titre, sur une ligne
     et tronqué par « … », puis Recherche et Compte, toujours visibles.
     Rangée 2, pleine largeur : les actions de la vue. Sur une seule rangée, les
     cinq modes d'un projet partagé repoussaient Recherche et Compte hors de
     l'écran. Entre 481 et 768 px, seuls les en-têtes à sélecteur de modes
     gardent ces deux rangées (bloc @media plus bas). Le mode voiture garde ses
     règles propres (tailles, écarts, 48 px, plus bas et plus spécifiques) ;
     seule la mise en page est partagée : entre 600 et 768 px, un en-tête à
     sélecteur de modes y passe aussi sur deux rangées, ce qui est nécessaire à
     600 px (Compte sortait de l'écran). */
  #view-header {
    position: sticky; top: 0; z-index: 5; background: var(--bg-main); padding: 6px 0;
    flex-wrap: wrap; row-gap: 6px;
  }
  #view-header h1 {
    font-size: 21px;
    flex: 1 1 0; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .vh-compte { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
  /* Actions d'en-tête : la rangée 2, après le titre quel que soit l'ordre du
     document. Sur plusieurs lignes quand la place manque (« Mes tâches » puis
     « Trier » au Kanban, spec 2026-10-06, 5.1) : alignées à gauche et
     espacées, au lieu de se toucher avec un retrait de 8 px. min-width: 0
     empêche un contenu large (le sélecteur de modes) d'élargir la rangée. */
  #view-header #view-actions {
    margin-left: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    order: 1; flex: 0 0 100%; min-width: 0;
  }
  /* Sans action (Terminées, Ma journée...), pas de rangée vide. */
  #view-header #view-actions:empty { display: none; }
  #view-actions .mine-toggle { margin-right: 0; }
  #view-actions .tableau-outils { margin-left: 0; }
  /* Sélecteur de modes (Liste, Statut, Priorité, Effort, Personne) : une rangée
     qui défile au doigt au lieu de déborder, sans barre de défilement et sans
     rebond vers la page. Chaque mode garde sa largeur et ne se coupe pas. La
     hauteur de 44 px est posée sous :where(), de spécificité nulle : le mode
     voiture garde ainsi ses 48 px. renderView ramène le mode actif dans la zone
     visible (ramenerModeActif, public/app.js). */
  #view-actions .segmented {
    max-width: 100%; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  #view-actions .segmented::-webkit-scrollbar { display: none; }
  #view-actions .segmented button { flex: none; white-space: nowrap; }
  :where(#view-actions) .segmented button { min-height: 44px; }
  /* Onglets d'Aujourd'hui : la barre du bas porte déjà ces trois vues, sauf
     en voiture, où elle est masquée (spec 2026-10-13, 3). Là, ils ouvrent
     la rangée : ils ne suivent plus « Sélectionner » ou « Mes tâches ». */
  #view-actions .onglets-jour { display: none; }
  [data-voiture="1"] #view-actions .onglets-jour { display: inline-flex; order: -1; }
  /* Masqués et seuls (Planning sans projet partagé) : pas de rangée vide. */
  html:not([data-voiture="1"]) #view-header #view-actions:has(> .onglets-jour:only-child) { display: none; }
  /* Rapports : la liste des projets (un nom de 65 caractères la rendait plus
     large que l'écran à 375 px) ne dépasse jamais la rangée, et la page ne
     défile plus à l'horizontale. */
  #view-actions .rep-select { max-width: 100%; }
  .vh-compte .account-btn { width: 44px; height: 44px; }
  .vh-compte .account-btn .avatar { box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 3.5px var(--border-strong); }

  /* ---- Quick add en bottom sheet, ouvert par la barre d'ajout ---- */
  #quickadd-wrap {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--bg-main);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(60, 30, 20, .18);
    transform: translateY(110%);
    transition: transform .22s ease;
  }
  body.qa-open #quickadd-wrap { transform: translateY(0); }
  /* QA 4b : la feuille (#quickadd-wrap) est déjà le cadre visuel ; sans ceci,
     la carte gardait sa bordure, son ombre et son anneau rouge au focus, d'où
     un double cadre. Les marges internes (padding) restent lisibles. */
  #quickadd-form { margin: 0; padding: 12px 14px; border: none; box-shadow: none; }
  #quickadd-form.qa-ouvert { border-color: transparent; box-shadow: none; }

  /* Feuille de saisie */
  .qa-box { height: 28px; }
  /* 16px minimum : évite le zoom automatique iOS à la prise de focus */
  #quickadd-input, #quickadd-highlight { font-size: 18px; line-height: 28px; }
  .qa-kbd { display: none; }
  #qa-chips { padding-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #qa-chips .chip { flex: none; min-height: 36px; font-size: 14px; }
  .qa-astuce { display: none; }
  /* L'aide Syntaxe (sans retrait, une colonne) se règle plus bas, après ses
     règles générales : ici, elle serait écrasée (même défaut que QA 4a). */
  /* QA 4c : « Ajouter la tâche » passait sur deux lignes ; en mobile, le
     bouton n'affiche que « Ajouter » (voir le second <span> dans
     renderQaPied, public/app.js). */
  .qa-ajouter-suite { display: none; }

  /* ---- Barre d'ajout, remplace le bouton rond ---- */
  #m-add-bar {
    display: flex; align-items: center; gap: 8px;
    position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 40;
    height: 56px; padding: 0 8px 0 10px; box-sizing: border-box;
    background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 18px;
    box-shadow: 0 10px 28px rgba(60,30,20,.16);
  }
  body.qa-open #m-add-bar, body.no-add #m-add-bar, body.drawer-open #m-add-bar { display: none; }
  .m-add-open { flex: 1; display: flex; align-items: center; gap: 12px; height: 100%; border: none; background: none; font: inherit; font-size: 16px; color: var(--text); text-align: left; padding: 0; }
  .m-add-open .qa-plus { width: 34px; height: 34px; }
  .m-add-mic { width: 44px; height: 44px; flex: none; border: none; border-radius: 50%; background: var(--bg-mute); color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
  .m-add-mic svg { width: 20px; height: 20px; }

  /* ---- Barre d'onglets ---- */
  #mobile-nav {
    display: flex; flex-direction: row; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--bg-main); border-top: 1px solid var(--border);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  }
  .m-nav {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
    border: none; background: none; padding: 6px 2px 4px;
    color: var(--text-soft); border-radius: 10px; position: relative;
    min-height: 48px;
  }
  .m-nav.active { color: var(--red); background: var(--active); font-weight: 600; }
  .m-ico { width: 21px; height: 21px; display: inline-flex; }
  .m-ico svg { width: 21px; height: 21px; }
  .m-lbl { font-size: 10.5px; }
  .m-badge {
    position: absolute; top: 2px; right: calc(50% - 22px);
    background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
    border-radius: 10px; padding: 0 5px; min-width: 16px; line-height: 15px;
  }
  .m-badge:empty { display: none; }

  /* ---- Confort tactile des listes ---- */
  .task { padding: 13px 4px; gap: 13px; }
  .task-check { width: 22px; height: 22px; }
  .task-check:hover::after { content: none; }  /* pas d'aperçu hover au doigt */
  .task.done .task-check::after { content: '✓'; }
  .task-content { font-size: 15px; }
  .task-meta { margin-top: 5px; }
  .proj-edit { visibility: visible; }          /* le crayon reste accessible au doigt */
  .nav-item { padding: 11px 8px; }
  .trash-restore { padding: 9px 12px; }

  /* ---- Kanban : colonnes plein écran avec snap horizontal ---- */
  .board { scroll-snap-type: x mandatory; gap: 10px; padding: 12px 0 18px; }
  .board-col {
    scroll-snap-align: start;
    flex: 0 0 84vw; min-width: 84vw; width: 84vw;
  }
  .board-card { padding: 12px; }
  /* Au doigt, le bouton de statut est la seule voie : il doit se viser. */
  .card-status { padding: 8px 10px; font-size: 14px; }
  .board-card .task-content { font-size: 14px; }

  /* ---- Planning : agenda vertical (pas de drag & drop au tactile,
          les colonnes horizontales n'apportaient rien) ---- */
  .board.planning {
    flex-direction: column; overflow-x: visible;
    scroll-snap-type: none; gap: 10px;
  }
  .board.planning .board-col,
  .board.effort .board-col { flex: none; min-width: 0; width: 100%; }
  /* colonnes vides : rangée compacte grisée */
  .board.planning .board-col:has(.board-col-body:empty),
  .board.effort .board-col:has(.board-col-body:empty) {
    padding: 7px 10px; background: none; border-style: dashed;
  }
  .board.planning .board-col:has(.board-col-body:empty) .board-col-title,
  .board.effort .board-col:has(.board-col-body:empty) .board-col-title {
    margin-bottom: 0; font-weight: 500; color: var(--text-faint);
  }
  .board.planning .board-col:has(.board-col-body:empty) .board-col-body,
  .board.effort .board-col:has(.board-col-body:empty) .board-col-body { min-height: 0; }

  /* ---- Dialogues en feuilles ---- */
  dialog {
    position: fixed; top: auto; bottom: 0; margin: 0;
    width: 100vw; max-width: 100vw;
    border-radius: 18px 18px 0 0;
    max-height: 92dvh; overflow-y: auto;
  }
  dialog form { padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
  /* « Nouveautés » a sa largeur propre (520 px), plus spécifique : elle aussi
     prend toute la largeur en feuille du bas. */
  #nouveautes-dialog { width: 100vw; max-width: 100vw; }
  .tf-row { flex-wrap: wrap; }
  .tf-row label { min-width: 45%; }
  /* Le texte prend sa propre ligne pleine largeur (MIN-4) : la mention et le
     bouton, plus courts, se replient dessous plutôt que de comprimer le seul
     élément qui permette de choisir entre deux tâches. */
  .grappe-texte { flex: 1 1 100%; }
  dialog input:not([type="checkbox"]):not([type="radio"]),
  dialog textarea, dialog select, #tf-content, #tf-description,
  #login-form input, #search-input { font-size: 16px; }
  .tf-actions button { padding: 11px 16px; }
  #tf-comments { max-height: 30dvh; }
}

/* En-tête à deux rangées seulement là où il le faut (décision de Vincent,
   2026-10-06 ; spec 2026-10-06, 2.2). Sur téléphone (480 px et moins), le
   palier ci-dessus donne deux rangées partout. Entre 481 et 768 px, seuls les
   en-têtes à sélecteur de modes (les projets, et les Rapports avec leurs
   périodes « 7 j / 30 j / 90 j ») les gardent ; les autres retrouvent leur
   rangée unique d'avant, ce qui rend au mode voiture (600 à 768 px) son en-tête
   collant de 64 px. Le conteneur des actions ne descend jamais sous la largeur
   de ses boutons (min-width: auto, que le palier mettait à 0) : c'est le titre
   qui se tronque, par « … », quand la requête de la vue Recherche est longue.
   Un navigateur sans :has() ignore ce bloc et garde simplement les deux
   rangées. Hors voiture, les onglets d'Aujourd'hui, masqués ici, ne sont pas
   un sélecteur de modes. */
@media (min-width: 481px) and (max-width: 768px) {
  #view-header:not(:has(#view-actions .segmented)),
  html:not([data-voiture="1"]) #view-header:not(:has(#view-actions .segmented:not(.onglets-jour))) { flex-wrap: nowrap; }
  #view-header:not(:has(#view-actions .segmented)) #view-actions,
  html:not([data-voiture="1"]) #view-header:not(:has(#view-actions .segmented:not(.onglets-jour))) #view-actions { order: 0; flex: 0 1 auto; min-width: auto; }
  #view-header:not(:has(#view-actions .segmented)) h1,
  html:not([data-voiture="1"]) #view-header:not(:has(#view-actions .segmented:not(.onglets-jour))) h1 { flex: 0 1 auto; }
}

/* Écrans intermédiaires : sidebar plus étroite, marges réduites */
@media (min-width: 769px) and (max-width: 1000px) {
  #sidebar { width: 232px; }
  /* Les libellés longs (Aujourd'hui, Collaboration, Grand ménage) sont à
     gauche : elle prend la place que la droite n'use pas, et les écarts se
     resserrent pour le crayon du Digest au doigt (mesuré, rien de coupé). Le
     tiroir de voiture, plus large, garde ses colonnes. */
  html:not([data-voiture="1"]) .grille-vues {
    grid-template-columns: minmax(0, 1.17fr) minmax(0, 1fr); padding-left: 2px; padding-right: 2px; column-gap: 2px;
  }
  .grille-vues .nav-item { gap: 3px; padding-left: 3px; padding-right: 3px; }
  #main { padding: 24px 28px; }
}

/* ---------- Vue « Ma journée » (capture d'activité) ---------- */
.capture-view { max-width: 640px; margin: 0 auto; padding: 4px 4px 40px; }
.cap-datebar { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 16px; }
.cap-date { font-weight: 600; font-size: 1.05rem; min-width: 160px; text-align: center; }
.cap-durseg { margin: 0 auto 10px; width: max-content; }
.cap-hint { color: var(--text-soft); font-size: .9rem; text-align: center; margin: 0 0 14px; }
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cap-abs-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.cap-btn {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-elev);
  color: var(--text); font-size: .95rem; font-weight: 500; cursor: pointer; text-align: left;
  transition: background .12s, transform .05s;
}
.cap-btn:hover { background: var(--hover); }
.cap-btn:active { transform: scale(.97); }
.cap-abs { justify-content: center; color: var(--text-soft); font-weight: 500; }
.cap-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.cap-nomission { color: var(--text-soft); font-size: .9rem; }
.cap-total {
  text-align: center; font-weight: 600; margin: 16px 0 10px; padding: 8px;
  border-radius: 10px; background: var(--bg-mute);
}
.cap-over { color: var(--red); }
.cap-logs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cap-log {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev);
}
.cap-log-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cap-log-name { flex: 1; }
.cap-log-dur { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cap-del {
  border: none; background: none; color: var(--text-faint); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.cap-del:hover { color: var(--red); background: var(--hover); }
.cap-empty { color: var(--text-soft); font-size: .9rem; text-align: center; padding: 10px; list-style: none; }

/* ---------- Récap mensuel (sous « Ma journée ») ---------- */
.cap-recap { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 16px; }
.cap-recap-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cap-recap-title { font-weight: 600; }
.cap-recap-total {
  margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--bg-mute); padding: 3px 10px; border-radius: 999px;
}
.cap-wk-toggle { font-size: .78rem; padding: 3px 8px; }
.cap-heatmap { display: grid; gap: 6px; margin-bottom: 18px; }
.cap-hm-wd { text-align: center; font-size: .72rem; color: var(--text-faint); padding-bottom: 2px; }
.cap-hm-cell {
  min-height: 66px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
  background: var(--bg-elev); padding: 4px; display: flex; flex-direction: column; gap: 3px;
  align-items: stretch; text-align: left; transition: transform .05s, background .12s;
  overflow: hidden;
}
.cap-hm-cell:hover { background: var(--hover); }
.cap-hm-cell:active { transform: scale(.97); }
.cap-hm-pad { background: transparent; border: none; cursor: default; min-height: 0; }
.cap-hm-num { font-size: .72rem; color: var(--text-faint); line-height: 1; align-self: flex-end; }
.cap-hm-we { background: var(--bg-soft); }
.cap-hm-over .cap-hm-num { color: var(--red); font-weight: 700; }
.cap-hm-over { border-color: var(--red); }
.cap-hm-sel { outline: 2px solid var(--text); outline-offset: 1px; }
.cap-entry {
  display: flex; align-items: center; gap: 4px; border-radius: 5px; padding: 1px 5px;
  font-size: .72rem; line-height: 1.35; background: color-mix(in srgb, var(--c) 20%, transparent);
  border-left: 3px solid var(--c);
}
.cap-entry-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cap-entry-val { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cap-entry-abs { font-style: italic; }
.cap-recap-block { margin-bottom: 14px; }
.cap-recap-block h4 { margin: 0 0 8px; font-size: .82rem; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: .03em; }
.cap-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.cap-bar-name { width: 34%; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-bar-track { flex: 1; height: 10px; background: var(--bg-mute); border-radius: 999px; overflow: hidden; }
.cap-bar-fill { display: block; height: 100%; border-radius: 999px; }
.cap-bar-days { width: 54px; text-align: right; font-size: .85rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* ---------- Vue Synthèses (liste + lecteur, en journal) ---------- */
/* Le sous-titre de la vue (spec Synthèses 2026-10-13, 3), puis les synthèses
   (.dg-md : liste et lecteur côte à côte). Lecture en journal (#2050) : serif
   du système, aucune police téléchargée. */
.digest-view { display: block; max-width: 1180px; --dg-serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif; }
.dg-md { display: flex; gap: 32px; align-items: flex-start; }
.dg-sous-titre { margin: 4px 2px 18px; font-size: 13.5px; color: var(--text-soft); }
.dg-vide { margin: 0 2px; color: var(--text-soft); }
.dg-list { flex: 0 0 300px; display: flex; flex-direction: column; max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 4px; }
/* Le lecteur est un conteneur : la semaine passe en deux colonnes quand il a la place. */
.dg-reader { flex: 1; min-width: 0; container-type: inline-size; }
.dg-back { display: none; margin-bottom: 12px; }
.dg-audio { display: block; width: 100%; margin-bottom: 14px; }

/* En-tête de groupe hebdomadaire : filet double, petites capitales. */
.dg-week {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 18px 0 2px; padding: 7px 4px 5px; border-top: 3px double var(--text);
  font-family: var(--dg-serif); font-variant-caps: all-small-caps; letter-spacing: .08em;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.dg-week:first-child { margin-top: 0; }
.dg-week-range { font-weight: 400; color: var(--text-soft); letter-spacing: .02em; }

.dg-item {
  display: block; position: relative; width: 100%; padding: 10px 10px 11px 12px;
  border: none; border-bottom: 1px solid var(--border); border-radius: 0;
  background: none; cursor: pointer; text-align: left; color: var(--text); font: inherit;
}
.dg-item:hover { background: var(--hover); }
.dg-active { background: var(--active-row); }
.dg-active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--text); }
.dg-item-date { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.dg-unread .dg-item-date::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 6px; vertical-align: 1px; }
.dg-item-title {
  font-family: var(--dg-serif); font-size: 17px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dg-unread .dg-item-title { font-weight: 700; }
.dg-read:not(.dg-active) .dg-item-title { color: var(--text-soft); }
.dg-item-extrait {
  display: block; margin-top: 2px; font-family: var(--dg-serif); font-style: italic; font-size: 13.5px;
  color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* La une : manchette, titre, sous-titre, filet double, chapeau à lettrine. */
.dg-une { max-width: 680px; margin: 0 auto; padding: 4px 4px 48px; font-family: var(--dg-serif); color: var(--text); }
.dg-une.dg-hebdo { max-width: 760px; }
.dg-manchette {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-top: 1px solid var(--text); border-bottom: 1px solid var(--text);
  font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 14px; color: var(--text-soft);
}
.dg-une-titre { margin: 22px 0 6px; text-align: center; font-size: 54px; line-height: 1.02; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dg-une-sous { margin: 0; text-align: center; font-style: italic; color: var(--text-soft); font-size: 15px; }
.dg-filet { margin: 18px 0 20px; border-top: 3px double var(--text); }
.dg-chapeau { margin: 0 0 22px; font-size: 19px; line-height: 1.5; font-weight: 600; }
.dg-chapeau::first-letter { float: left; font-size: 4.1em; line-height: .82; margin: .06em .09em 0 0; font-weight: 700; color: var(--red); }

/* Le corps : texte justifié, une section par h2 sous un filet. */
.dg-doc { font-size: 16px; line-height: 1.58; text-align: justify; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.dg-doc > *:first-child { margin-top: 0; }
.dg-doc h2 { margin: 0 0 8px; padding-top: 7px; border-top: 1px solid var(--text); font-size: 16px; font-variant-caps: all-small-caps; letter-spacing: .09em; font-weight: 700; text-align: left; }
.dg-doc h3, .dg-doc h4, .dg-doc h5, .dg-doc h6 { margin: 1em 0 .35em; font-size: 16px; font-style: italic; text-align: left; }
.dg-doc .dg-sec { margin-bottom: 22px; }
.dg-doc p { margin: .5em 0; }
.dg-doc ul, .dg-doc ol { margin: .4em 0; padding-left: 1.15em; }
.dg-doc li { margin: .3em 0; }
.dg-doc li::marker { color: var(--text-faint); }
.dg-doc blockquote {
  margin: 14px 0; padding: 10px 4px; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
  font-style: italic; font-size: 18px; line-height: 1.45; text-align: center; color: var(--text);
}
.dg-doc blockquote strong { font-style: normal; font-variant-caps: all-small-caps; letter-spacing: .08em; }
.dg-doc code { background: var(--bg-mute); padding: .1em .4em; border-radius: 5px; font-size: .86em; }
.dg-doc hr { border: none; border-top: 1px solid var(--border); margin: 1.4em 0; }
.dg-doc a { color: inherit; text-decoration-color: var(--text-faint); text-underline-offset: 2px; }
.dg-doc strong { font-weight: 700; }
/* La semaine sur deux colonnes dès que le lecteur a la place (grand écran). */
@container (min-width: 720px) {
  .dg-hebdo .dg-doc { column-count: 2; column-gap: 34px; column-rule: 1px solid var(--border); }
  .dg-doc h2 { break-after: avoid; }
  .dg-doc li, .dg-doc blockquote { break-inside: avoid; }
}

/* Les quatre actions, en texte, sous un filet double. */
.dg-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 18px; padding-top: 12px;
  border-top: 3px double var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.dg-actions button { border: none; background: none; padding: 8px 6px; color: var(--text-soft); font-size: 13.5px; cursor: pointer; }
.dg-actions button:hover { color: var(--text); text-decoration: underline; }
.dg-actions [data-dg-act="supprimer"]:hover { color: var(--late-fg); }

@media (max-width: 760px) {
  .dg-md { display: block; }
  .dg-list { flex-basis: auto; max-height: none; }
  /* Une synthèse ouverte prend l'écran : le sous-titre s'efface avec la
     liste, « ‹ Liste » ramène l'un et l'autre. */
  body.dg-reading .dg-sous-titre { display: none; }
  .dg-reader { display: none; }
  body.dg-reading .dg-list { display: none; }
  body.dg-reading .dg-reader { display: block; }
  .dg-back { display: inline-block; }
  .dg-manchette { font-size: 12.5px; letter-spacing: .05em; }
  .dg-manchette-mid { display: none; }
  .dg-une-titre { font-size: 36px; margin-top: 16px; }
  .dg-chapeau { font-size: 17px; }
  .dg-doc { font-size: 16.5px; text-align: left; }
}

/* ---------- Pages autonomes : invite, reset ---------- */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-sidebar);
}
.auth-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
  padding: 40px; width: 340px; max-width: calc(100vw - 40px); text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
.auth-card h1 { margin: 0 0 4px; font-size: 22px; }
.auth-card p { margin: 0 0 16px; color: var(--text-soft); }
.auth-card input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px;
  font: inherit; margin-bottom: 12px; box-sizing: border-box;
}
.auth-card button[type="submit"] {
  width: 100%; padding: 10px; border: none; border-radius: 8px;
  background: var(--red); color: #fff; font-weight: 600;
}
.auth-msg { margin-top: 4px; min-height: 1em; font-size: 13px; }
.auth-msg.error { color: var(--p1); }
.auth-msg.ok { color: #0a7a3d; }
.auth-card a { color: var(--red); }

/* Page de confidentialité (Messagerie, fin du lot 1) : le gabarit des pages
   autonomes en colonne de lecture, texte à gauche, interligne ample. Liens
   et gris viennent des variables de .mail-ecran (accent à 4,5:1). Sur
   téléphone, la carte prend la largeur, à 16 px des bords. */
.conf-page { align-items: flex-start; padding: 48px 16px; }
.auth-card.conf-carte {
  width: 720px; max-width: 100%; padding: 40px 48px 32px; text-align: left;
  font-size: 15px; line-height: 1.6; color: var(--text);
}
.conf-tete { margin-bottom: 28px; text-align: center; }
.auth-card.conf-carte h1 { margin: 0 0 6px; font-size: 24px; line-height: 1.25; }
.auth-card.conf-carte .conf-sous-titre { margin: 0; font-size: 13.5px; color: var(--mail-soft); }
.conf-carte h2 { margin: 28px 0 8px; font-size: 17px; line-height: 1.35; }
.auth-card.conf-carte p { margin: 0 0 12px; color: var(--text); }
.conf-carte ul { margin: 0 0 12px; padding-left: 22px; }
.conf-carte li { margin: 0 0 6px; }
.conf-carte li::marker { color: var(--mail-soft); }
.auth-card.conf-carte a { color: var(--mail-accent-texte); text-underline-offset: 2px; overflow-wrap: anywhere; }
.conf-carte code { padding: 1px 5px; border-radius: 4px; background: var(--bg-mute); font-size: 13.5px; }
.auth-card.conf-carte .conf-google {
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft);
}
.auth-card.conf-carte ul.conf-jamais {
  padding: 14px 16px 8px 36px; border: 1px solid var(--border); border-left: 4px solid var(--mail-accent-texte);
  border-radius: 10px; background: var(--bg-soft);
}
/* Entraînement des modèles coupé (2026-10-08) : un encadré de la même famille
   que « Ce que Tudu ne fait jamais », filet vert (une garantie, pas un
   avertissement), en paragraphe. */
.auth-card.conf-carte .conf-encart {
  padding: 14px 16px; border: 1px solid var(--border); border-left: 4px solid var(--mail-ok-fg);
  border-radius: 10px; background: var(--bg-soft);
}
.conf-pied { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; }
@media (max-width: 600px) {
  .conf-page { padding: 16px; }
  .auth-card.conf-carte { padding: 28px 20px 24px; }
  .auth-card.conf-carte h1 { font-size: 21px; }
}

/* ---------- Page admin ---------- */
.admin-page { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }
.admin-page h1 { margin: 10px 0 4px; }
.admin-page .top-link { font-size: 13px; margin: 0; }
.admin-page .top-link a { color: var(--red); text-decoration: none; }
.admin-guard { font-size: 14px; color: var(--text-soft); margin-top: 24px; }
.admin-section { margin-top: 32px; }
/* Les phrases d'aide de l'administration, dont celle qui demande de couper
   l'entraînement sur le compte Claude de l'instance avant d'approuver un
   repli : --text-faint (#999 sur blanc, 2,85:1) ne tenait pas 4,5:1 ;
   --text-soft le tient (5,7:1). La page ne suit pas le thème sombre. */
.admin-page .settings-hint { color: var(--text-soft); }
.admin-section h2 { font-size: 16px; margin: 0 0 10px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td {
  text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle;
}
.admin-table th { color: var(--text-soft); font-weight: 600; }
.admin-table td.actions-cell { white-space: nowrap; text-align: right; }
.admin-table td.actions-cell button { margin-left: 6px; }
.admin-extra td { border-bottom: 1px solid var(--border); padding: 8px; background: var(--bg-soft); }
.admin-inline-form { display: flex; gap: 8px; margin-bottom: 12px; }
.admin-inline-form input { flex: 1; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; }
/* Adresses secondaires d'un compte (spec 2026-10-05, 4.3). */
.admin-alias-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 12px; color: var(--text-soft); }
.admin-alias { display: inline-flex; align-items: center; gap: 4px; }
.admin-alias-remove { border: none; background: none; color: var(--text-faint); cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1; }
.admin-alias-remove:hover, .admin-alias-remove:focus-visible { color: var(--red); }
.admin-alias-primary { border: none; background: none; color: var(--text-faint); cursor: pointer; padding: 0 4px; font-size: 11px; line-height: 1; }
.admin-alias-primary:hover, .admin-alias-primary:focus-visible { color: var(--text); text-decoration: underline; }
.admin-inline-error { color: var(--p1); font-size: 12px; margin-left: 8px; }
.admin-empty { color: var(--text-faint); font-size: 13px; margin: 6px 0; }
.admin-note { font-size: 12.5px; color: var(--text-soft); word-break: break-all; }

/* ---------- Langage « chips » (refonte UX 2026-07) ---------- */
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }

/* L'attribut `hidden` doit gagner contre nos propres règles d'affichage. La
   feuille du navigateur lui applique `display: none`, mais avec une
   spécificité si faible que le moindre `.classe { display: flex }` l'annule
   en silence : le code posait bien `element.hidden = true`, et l'élément
   restait visible. Vécu sur le rang de chips de l'ajout rapide, qui réservait
   une ligne vide à toutes les largeurs. Trente-six règles d'affichage de cette
   feuille pouvaient produire le même effet ailleurs. */
[hidden] { display: none !important; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1px solid var(--border-strong); border-radius: 20px;
  background: var(--bg-elev); color: var(--text); font-size: 13px;
  line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.chip:hover { background: var(--hover); }
.chip svg { width: 14px; height: 14px; flex: none; }
.chip.set { border-color: transparent; }
.chip.set[data-kind="date"]  { background: var(--hl-date-bg);    color: var(--hl-date-fg); }
.chip.set[data-kind="prio"]  { background: var(--hl-prio-bg);    color: var(--hl-prio-fg); }
.chip.set[data-kind="proj"]  { background: var(--hl-project-bg); color: var(--hl-project-fg); }
.chip.set[data-kind="assignee"] { background: var(--hl-person-bg); color: var(--hl-person-fg); }
.chip.set[data-kind="recur"] { background: var(--hl-recur-bg);   color: var(--hl-recur-fg); }
.chip.set[data-kind="est"]   { background: var(--hl-est-bg);     color: var(--hl-est-fg); }
.chip.set[data-kind="priv"]  { background: var(--priv-bg);       color: var(--priv-fg); }

/* Popover ancré */
.pop {
  position: absolute; z-index: 3000; min-width: 220px; max-width: 320px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 8px;
}
.pop .pop-opt {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border-radius: 7px; font-size: 13.5px; cursor: pointer;
}
.pop .pop-opt:hover, .pop .pop-opt.on { background: var(--hover); }
/* Entrée de liste au clavier (spec 2026-10-06, 5.3) : l'anneau de focus
   commun, rentré dans l'entrée pour ne pas mordre sur ses voisines. */
.pop .pop-opt:focus-visible { background: var(--hover); outline: 2px solid var(--p3); outline-offset: -2px; }
/* Icône d'une entrée : l'étape d'une colonne (spec 2026-10-06, 5.3). */
.pop .pop-opt .pop-ico { display: inline-flex; flex: none; }
.pop .pop-opt .pop-ico svg { width: 15px; height: 15px; }
.pop-field {
  width: 100%; padding: 7px 9px; margin-bottom: 6px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg-elev); color: var(--text); font: inherit;
}

/* ---------- Sélecteur de date (ui/datepicker.js) ---------- */
/* Le popover s'élargit pour ce contenu : sept colonnes ne tiennent pas dans
   les 220px par défaut. */
.pop:has(.dp) { min-width: 268px; }
.dp { width: 252px; }

.dp-quick { display: flex; flex-direction: column; gap: 1px; }
.dp-shortcut {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 7px 9px; border: none; background: none;
  border-radius: 7px; font: inherit; font-size: 13.5px; color: var(--text);
  cursor: pointer; text-align: left;
}
.dp-shortcut:hover { background: var(--hover); }
.dp-shortcut.on { background: var(--hl-date-bg); color: var(--hl-date-fg); font-weight: 600; }
.dp-hint { color: var(--text-faint); font-size: 12px; }
.dp-shortcut.on .dp-hint { color: inherit; }

.dp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 0 4px; padding-top: 8px; border-top: 1px solid var(--border);
}
.dp-title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  text-transform: capitalize;
}
.dp-nav {
  width: 26px; height: 26px; border: none; background: none; cursor: pointer;
  border-radius: 7px; color: var(--text-soft); font-size: 17px; line-height: 1;
}
.dp-nav:hover { background: var(--hover); color: var(--text); }

.dp-dows, .dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.dp-dows {
  margin-bottom: 2px; font-size: 11px; color: var(--text-faint);
  text-align: center; font-weight: 600;
}
.dp-day {
  aspect-ratio: 1; border: none; background: none; border-radius: 50%;
  font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dp-day:hover { background: var(--hover); }
.dp-day.we { color: var(--text-soft); }
/* Les jours des mois voisins restent cliquables, mais en retrait : ils servent
   à attraper un 31 ou un 1er sans changer de mois. */
.dp-day.out { color: var(--text-faint); opacity: .55; }
.dp-day.today { box-shadow: inset 0 0 0 1.5px var(--red); font-weight: 700; }
.dp-day.on {
  background: var(--red); color: #fff; font-weight: 700;
  box-shadow: none;
}
.dp-day.on:hover { background: var(--red); }

.dp-clear {
  width: 100%; margin-top: 8px; padding: 7px 9px; border: none;
  border-top: 1px solid var(--border); border-radius: 0 0 7px 7px;
  background: none; font: inherit; font-size: 13px; color: var(--text-soft);
  cursor: pointer; text-align: left;
}
.dp-clear:hover { background: var(--hover); color: var(--text); }

/* Menu de complétion */
.ac-menu {
  min-width: 240px; max-height: 280px; overflow: auto;
  background: var(--bg-elev); border-radius: 8px;
}
.ac-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  font-size: 13.5px; border-radius: 7px; cursor: pointer;
}
.ac-row.on { background: var(--hover); }
.ac-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ac-avatar { display: inline-flex; flex: none; }
.ac-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-hint { margin-left: auto; color: var(--text-faint); font-size: 12px; }
/* Projet partagé : le badge vient AVANT l'indice, qui garde son margin-left
   auto et reste collé à droite. */
.ac-badge {
  flex: none; padding: 1px 6px; border-radius: 999px; font-size: 10.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  background: var(--hover); color: var(--text-faint); border: 1px solid var(--border);
}
.ac-new { color: var(--red); font-weight: 600; border-top: 1px solid var(--border); }
.ac-foot {
  padding: 6px 10px; margin-top: 4px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-faint);
}

/* Titre et description du dialog de tâche */
.tf-title {
  border: 0 !important; padding: 0 !important; font-size: 17px; font-weight: 650;
  letter-spacing: -.01em; background: none !important; width: 100%; margin-bottom: 4px;
}
.tf-desc {
  border: 0 !important; padding: 0 !important; background: none !important;
  width: 100%; resize: none; color: var(--text-soft); font-size: 13.5px; margin-bottom: 12px;
}
.tf-title:focus, .tf-desc:focus { outline: none; }

/* Rangée de chips de l'ajout rapide */
#qa-chips { width: 100%; padding: 0 0 4px 42px; }
/* QA 4a : cette règle générale (retrait de 42px pour la pastille rouge « + »
   du bureau) vient après la media query mobile plus haut dans le fichier ;
   même sélecteur, même spécificité (deux règles #qa-chips) : c'est donc elle
   qui l'emportait en mobile aussi, malgré `padding-left: 0` posé là-bas. On
   la fait suivre ici d'un correctif mobile, plus tardif dans le fichier. */
@media (max-width: 768px) { #qa-chips { padding-left: 0; } }
#qa-chips .chip { border-radius: 8px; padding: 5px 10px; }
#qa-chips .chip:not(.set) { border-style: dashed; color: var(--text-soft); background: var(--bg-elev); }
#qa-chips .chip-hash { font-weight: 700; }
.chip.set[data-kind="rappel"] { background: var(--hl-recur-bg); color: var(--hl-recur-fg); }
/* Puce « Statut » (spec 2026-10-06, 5.3) : l'icône de l'étape, colorée comme
   dans la fiche une fois la colonne choisie ; un fond neutre, les pastilles
   Projet (bleue) et Pour (ambrée) l'encadrant déjà. */
#qa-chips .chip-etape { display: inline-flex; }
.chip.set[data-kind="statut"] { background: var(--bg-mute); color: var(--text); }
.chip.set[data-kind="statut"][data-stage="doing"] .chip-etape { color: var(--p3); }
.chip.set[data-kind="statut"][data-stage="blocked"] .chip-etape { color: var(--hl-person-fg); }
.qa-pied { width: calc(100% + 20px); margin: 0 -9px -9px -11px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); }
.qa-lien, .qa-secondaire { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: none; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.qa-lien svg { width: 16px; height: 16px; color: var(--text-soft); }
.qa-lien:hover, .qa-lien[aria-expanded="true"], .qa-secondaire:hover { background: var(--hover); }
.qa-secondaire { background: var(--bg-mute); height: 36px; padding: 0 14px; border-radius: 10px; }
.qa-astuce { font-size: 12.5px; color: var(--text-soft); }
.qa-espace { flex: 1; }
.qa-ajouter { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: none; border-radius: 10px; background: #d23f31; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.qa-ajouter:hover { background: #b8352a; }
.qa-ajouter svg { width: 15px; height: 15px; }
.qa-aide { width: 100%; margin-left: 42px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; }
.qa-aide p { margin: 0 0 10px; color: var(--text); }
.qa-aide-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; }
.qa-aide-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qa-aide-ligne > span { width: 62px; color: var(--text-soft); }
.qa-aide-ligne button { border: none; background: none; padding: 0; font: inherit; cursor: pointer; }
/* La ligne Date compte sept exemples : elle prend toute la largeur. */
.qa-aide-large { grid-column: 1 / -1; }
.qa-aide-ligne button .hl { padding: 2px 5px; border-radius: 5px; }
.task.vient-d-arriver { animation: vient-d-arriver 1.6s ease-out; }
@keyframes vient-d-arriver { from { background: var(--active); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .task.vient-d-arriver { animation: none; } }
@media (max-width: 1000px) { .qa-aide-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Même défaut de cascade que QA 4a : le palier mobile du haut du fichier
   posait déjà ces valeurs, mais les règles générales ci-dessus (retrait de
   42 px, trois puis deux colonnes) venaient après lui et l'emportaient. Le
   correctif mobile doit donc suivre ces règles dans le fichier. */
@media (max-width: 768px) {
  .qa-aide { margin-left: 0; }
  .qa-aide-grille { grid-template-columns: minmax(0, 1fr); }
}

/* Interrupteur */
.switch {
  appearance: none; -webkit-appearance: none; width: 36px; height: 21px; border-radius: 20px;
  background: var(--border-strong); position: relative; cursor: pointer;
  transition: background .15s; flex: none; border: 0;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.switch:checked { background: var(--red); }
.switch:checked::after { transform: translateX(15px); }

/* Réglages : dialogue à deux panneaux, rubriques regroupées en familles */
/* Dialogue large : la colonne de droite accueille des cartes à deux colonnes
   (libellé à gauche, contrôle à droite) qui se tassent mal sous 560 px. */
#settings-dialog {
  width: 1000px; max-width: calc(100vw - 32px);
  --set-card-border: #ebe7e2;
  --set-soft: #faf9f7;
  --set-ok-bg: #e1f2e8; --set-ok-fg: #0a6b36;
  --set-warn-bg: #fcecd2; --set-warn-fg: #7a4800;
  --set-danger-border: #f1d6d2;
  --set-hint: #666;
}
[data-theme="dark"] #settings-dialog {
  --set-card-border: #3a3735;
  --set-soft: #232120;
  --set-ok-bg: #1d3a2a; --set-ok-fg: #7fd6a2;
  --set-warn-bg: #40331b; --set-warn-fg: #ecc078;
  --set-danger-border: #5a2e28;
  --set-hint: #aaa49e;
}
#settings-dialog form { padding: 0; gap: 0; }
#settings-dialog .settings-hint { color: var(--set-hint); line-height: 1.45; }
.set-head {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--border);
}
.set-head h2 { width: 196px; flex: none; font-size: 18px; }
#settings-dialog label.set-search {
  flex: 1; max-width: 420px; position: relative;
  flex-direction: row; align-items: center; color: var(--text-faint);
}
.set-search svg { position: absolute; left: 10px; pointer-events: none; }
#settings-dialog .set-search input { padding-left: 32px; background: var(--set-soft); }
.set-x {
  width: 34px; height: 34px; border: 0; background: none; border-radius: 8px;
  color: var(--text-soft); display: flex; align-items: center; justify-content: center; flex: none;
}
.set-x:hover { background: var(--hover); color: var(--text); }
#settings-dialog .tf-actions { padding: 12px 20px 12px 24px; border-top: 1px solid var(--border); margin: 0; }
.set-saved { font-size: 13px; color: var(--text-faint); transition: color .2s; }
.set-saved.ok { color: var(--set-ok-fg); font-weight: 600; }
.set-saved.ok::before { content: '✓ '; }

.set-panes {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  height: min(640px, 72vh); gap: 0;
  /* Sans `minmax(0, 1fr)`, la piste se dimensionne sur le contenu (940 px
     mesurés) et ignore la hauteur du conteneur : le panneau déborde au lieu
     de défiler, quoi qu'on mette sur l'enfant. */
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.set-nav {
  background: var(--bg-sidebar); border-right: 1px solid var(--border);
  padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
}
.set-group {
  margin: 14px 0 4px; padding: 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
}
.set-nv {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  min-height: 36px; padding: 0 10px; border: 0; background: none; border-radius: 8px;
  font-size: 13.5px; color: var(--text);
}
.set-nv > span:first-child { flex: 1; }
.set-nv:hover { background: var(--hover); }
.set-nv.on { background: var(--active); color: var(--red); font-weight: 600; }
.set-count {
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px;
  background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.set-search-vide { padding: 8px 10px; }
/* min-height: 0 est indispensable : un grid item vaut min-height: auto par
   defaut, refuse donc de devenir plus petit que son contenu, et overflow-y
   ne s'active jamais. */
.set-pane { padding: 24px 32px 40px; overflow-y: auto; min-height: 0; background: var(--set-soft); }
/* Chaque rubrique empile ses blocs avec un espacement régulier. Le sélecteur
   exclut les sections masquées : sinon `display:flex` écraserait l'attribut
   `hidden` (display:none) et toutes les rubriques s'afficheraient à la fois. */
.set-pane section:not([hidden]) { display: flex; flex-direction: column; gap: 14px; max-width: 700px; }
.set-sec-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
#settings-dialog h3.set-title {
  margin: 0; font-size: 21px; font-weight: 700; color: var(--text);
  text-transform: none; letter-spacing: -.01em;
}
.set-lead { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--set-hint); }
#settings-dialog h4.set-cap {
  margin: 10px 0 -4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-soft); display: flex; align-items: center; gap: 8px;
}
.set-scope {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  background: var(--bg-mute); color: var(--text-soft);
  font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; vertical-align: 1px; white-space: nowrap;
}

/* Carte : un groupe de réglages sur fond blanc, lignes séparées d'un filet. */
.set-card {
  background: var(--bg-elev); border: 1px solid var(--set-card-border); border-radius: 10px;
  display: flex; flex-direction: column;
}
.set-card:empty { display: none; }
.set-card-pad { padding: 16px; gap: 12px; }
.set-card-note { margin: 0; padding: 10px 16px; }
.set-card-note:empty { display: none; }
.set-card > .set-row { padding: 12px 16px; border-bottom: 0; border-top: 1px solid var(--border); min-height: 44px; box-sizing: border-box; }
.set-card > .set-row:first-child { border-top: 0; }
.set-card-pad > .set-row { padding: 8px 0; border-bottom: 0; }
.set-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.set-row:last-child { border-bottom: 0; }
.set-row .set-k { color: var(--text); flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.set-row .set-k > span:first-child { font-weight: 500; }
.set-row .set-k .settings-status { min-height: 0; font-size: 12.5px; }
.set-row .set-k .settings-status:empty { display: none; }
/* Fiche Agenda : la ligne qui porte une aide (« Masquer les invitations que
   j’ai refusées ») garde la graisse de ses deux voisines, sans aide. */
[data-fiche="agenda"] .set-row .set-k > span:first-child { font-weight: 400; }
.set-row .set-v { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
#settings-dialog .set-row .set-v select { width: auto; min-width: 190px; max-width: 280px; }
/* Un statut vide ne réserve pas de ligne dans une carte. */
.set-card .settings-status:empty { display: none; }
#settings-dialog .set-row .set-v input[type="time"] { width: 130px; }
.set-row-end { justify-content: flex-end; }

/* Grille du centre de notifications (#2024, décision 14) : un tableau de cases, toute la cellule cliquable. */
#settings-dialog fieldset.ntg-bloc { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ntg-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--ntg-col, 104px) var(--ntg-col, 104px); align-items: center;
  min-height: 40px; padding: 0 16px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text);
}
.ntg-ligne:first-child { border-top: 0; }
.ntg-entete { min-height: 38px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); background: var(--set-soft); border-radius: 10px 10px 0 0; }
.ntg-entete span + span { justify-self: center; text-align: center; }
.ntg-sec { font-weight: 700; }
.ntg-sous .ntg-k { padding-left: 14px; }
#settings-dialog .ntg-cel { display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 40px; cursor: pointer; }
.ntg-case {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--text-faint); border-radius: 4px;
  background: var(--bg-elev); display: inline-grid; place-content: center; cursor: pointer;
}
.ntg-case:checked { background: var(--red); border-color: var(--red); }
.ntg-case:checked::after { content: ''; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.ntg-case:focus-visible { outline: 2px solid var(--p3); outline-offset: 2px; }
.ntg-case:disabled { background: none; border-color: var(--text-soft); border-style: dashed; cursor: default; }
#settings-dialog .ntg-cel:has(.ntg-case:disabled) { cursor: default; }
/* « Montrer le titre » : la case tombe dans la colonne « Sur l'écran ». */
.ntg-te { display: grid; grid-template-columns: minmax(0, 1fr) var(--ntg-col, 104px) var(--ntg-col, 104px); align-items: center; padding: 12px 16px; }
.ntg-te .set-k { grid-column: 1 / 3; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--text); }
.ntg-te > .ntg-cel { grid-column: 3; }

/* Champ avec libellé au-dessus, jamais le texte d'exemple comme seul libellé. */
#settings-dialog label.set-field { gap: 6px; }
.set-field-l { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.set-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.set-actions .settings-status { flex: 1; }
#settings-dialog .header-btn { min-height: 34px; }
#settings-dialog .header-btn.primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
#settings-dialog .header-btn.primary:hover { filter: brightness(.93); }
#settings-dialog .header-btn.danger { border-color: var(--set-danger-border); }

/* Étape numérotée d'une carte (Assistant IA). */
#settings-dialog .set-step {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0;
}
.set-step-n {
  width: 24px; height: 24px; border-radius: 12px; flex: none;
  background: var(--bg-mute); color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}

/* « En savoir plus » : le détail à la demande, une seule ligne d'aide sinon. */
.set-more summary {
  cursor: pointer; font-size: 12.5px; color: var(--red); list-style: none; width: fit-content;
}
.set-more summary::-webkit-details-marker { display: none; }
.set-more summary::after { content: ' ›'; }
.set-more[open] summary::after { content: ' ⌄'; }
.set-more > p { margin-top: 6px !important; }

/* Effets d'une période de congés, en trois cases lisibles d'un coup d'œil. */
.set-effets {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.set-effets li {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border-radius: 8px; background: var(--set-soft); font-size: 13px;
}
.set-vac-row { align-items: flex-end; }
.set-vac-row label { flex: 0 1 180px !important; }
.set-vac-row .header-btn { margin-left: auto; }

/* Zone de déconnexion d'une fiche : isolée en bas, jamais collée au bouton
   principal. Elle disparaît tant qu'il n'y a rien à déconnecter. */
.set-danger {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  padding: 12px 16px; border: 1px solid var(--set-danger-border); border-radius: 10px;
  background: var(--bg-elev);
}
.set-danger .set-k { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.set-danger .set-k > span:first-child { font-weight: 500; }
.set-danger:has(> .header-btn.hidden) { display: none; }
/* Champ + bouton sur une ligne : le champ occupe la place restante. */
.settings-row input:not([readonly]) { flex: 1; min-width: 0; }
.settings-row .header-btn { flex: none; white-space: nowrap; }
/* Listes (passkeys, sessions, jetons, partages) : nom + action sur la 1re
   ligne, méta dessous, avec un filet entre les entrées. */
#passkeys-list, #sessions-list, #tokens-list { display: flex; flex-direction: column; }
#passkeys-list .settings-row, #sessions-list .settings-row, #tokens-list .settings-row,
#deleg-received-list .settings-row, #deleg-sent-list .settings-row {
  flex-wrap: wrap; column-gap: 10px; row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--border);
}
#passkeys-list .settings-row > span:first-child,
#sessions-list .settings-row > span:first-child,
#tokens-list .settings-row > span:first-child,
#deleg-received-list .settings-row > span:first-child,
#deleg-sent-list .settings-row > span:first-child { flex: 1; min-width: 0; font-weight: 500; }
/* La méta passe sous le nom et le bouton (order: 1 la place en dernier, donc
   sur sa propre ligne, laissant nom + action sur la première). */
#passkeys-list .settings-row .settings-hint,
#sessions-list .settings-row .settings-hint,
#tokens-list .settings-row .settings-hint { flex-basis: 100%; order: 1; }
#deleg-received-list, #deleg-sent-list { gap: 0; }
.set-back { display: none; }

@media (max-width: 720px) {
  /* Feuille pleine largeur, comme les autres dialogues sur téléphone. */
  #settings-dialog { width: 100vw; max-width: 100vw; }
  #settings-dialog .tf-actions { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .set-back { border: 0; background: none; padding: 0; color: var(--red); font-weight: 600; }
  .set-back::before { content: '‹'; margin-right: 4px; }
  .set-head { padding: 12px 12px 12px 16px; gap: 10px; flex-wrap: wrap; }
  .set-head h2 { width: auto; }
  #settings-dialog label.set-search { order: 3; flex-basis: 100%; max-width: none; }
  .set-panes { grid-template-columns: minmax(0, 1fr); height: min(640px, 70vh); }
  .set-nav { border-right: 0; }
  .set-pane { padding: 14px 12px 24px; }
  .set-panes.drill .set-nav { display: none; }
  .set-panes:not(.drill) .set-pane { display: none; }
  .set-panes.drill .set-back { display: inline-flex; margin-bottom: 10px; }
  .set-row, .set-danger { flex-wrap: wrap; }
  .set-row .set-v { margin-left: 0; }
  /* « Notifications, Cet appareil » : le libellé garde la ligne, les deux boutons passent dessous (#2024, §4.1). */
  #notif-device .set-k { flex-basis: 100%; }
  #notif-device .set-v { flex-wrap: wrap; }
  /* Grille du centre de notifications : colonnes resserrées, cellules de 44 px au doigt. */
  .ntg-ligne, .ntg-te { --ntg-col: 70px; }
  .ntg-ligne { padding: 0 10px 0 14px; min-height: 44px; }
  .ntg-entete { line-height: 1.2; }
  .ntg-entete span + span { max-width: 54px; }
  #settings-dialog .ntg-cel { min-height: 44px; }
  .ntg-te { padding: 12px 10px 12px 14px; }
  .set-effets { grid-template-columns: minmax(0, 1fr); }
  /* Catalogue : le texte garde toute la largeur, pastille et bouton passent dessous. */
  #integ-liste .integ-row { flex-wrap: wrap; }
  #integ-liste .integ-row-txt { flex: 1 1 calc(100% - 48px); }
  #integ-liste .integ-row .conn-badge { margin-left: 48px; }
  #integ-liste .integ-row .header-btn { margin-left: auto; }
  .pop { left: 8px !important; right: 8px; max-width: none; width: auto; }
}

/* Ligne de réglage inopérante : la case existe mais son préalable manque
   (source Plaud du cockpit sans consentement Plaud, par exemple). */
.set-row-inactive .set-k { opacity: .55; }

/* État synthétique d'un connecteur : la réponse à « ai-je quelque chose à
   faire, ou est-ce que ça marche ? », lisible avant même la phrase, par la
   seule couleur de la pastille. */
.conn-health { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 6px 0 2px; }
.conn-badge {
  flex: none; font-size: 11px; font-weight: 700; border-radius: 9px;
  padding: 0 8px; line-height: 18px; white-space: nowrap;
  border: 1px solid var(--border); color: var(--text-soft);
}
.conn-badge.ok { color: #058527; border-color: #058527; }
.conn-badge.blocked { color: #b3261e; border-color: #b3261e; }
/* En pause (limite ou quota Claude, #1564) : l'ambre de l'attente, rien à faire. */
.conn-badge.pending, .conn-badge.paused { color: #8a6100; border-color: #8a6100; }
/* En sombre, les teintes du clair tombent sous 3,1:1 : jetons des Réglages,
   de 6,7:1 à 8,7:1 sur la carte (#2a2827), décision du 2026-10-14. */
[data-theme="dark"] .conn-badge.ok { color: var(--set-ok-fg); border-color: var(--set-ok-fg); }
[data-theme="dark"] .conn-badge.blocked { color: var(--late-fg); border-color: var(--late-fg); }
[data-theme="dark"] .conn-badge.pending, [data-theme="dark"] .conn-badge.paused { color: var(--set-warn-fg); border-color: var(--set-warn-fg); }
.conn-detail { flex: 1 1 240px; font-size: 12.5px; color: var(--text-faint); line-height: 1.45; }

/* La fiche d'un connecteur et l'en-tête du catalogue ont quitté les enfants
   directs de <section> (`.set-pane section:not([hidden])`, plus haut) pour
   devenir des enfants d'un conteneur intermédiaire : `gap` ne traverse pas un
   niveau de nesting, et sans cette règle leurs blocs (titres, indications,
   champs) s'afficheraient collés les uns aux autres. Même valeur que la
   règle de section pour un rythme identique, juste reproduit un niveau plus
   bas. Le sélecteur exclut la fiche masquée pour la même raison que la
   section : `display:flex` écraserait sinon `hidden` (display:none). */
.integ-fiche:not([hidden]), #integ-catalogue { display: flex; flex-direction: column; gap: 14px; }
/* Clé et étape 2 du connecteur Claude, un niveau plus bas que l'étape 1 :
   même rythme. */
#mcp-result:not([hidden]) { display: flex; flex-direction: column; gap: 14px; }

/* Catalogue des applications connectées : une ligne courte par connecteur,
   regroupées en deux cartes (sources de tâches, Tudu ailleurs). */
.integ-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.integ-row:first-child { border-top: none; }
.integ-tile {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  background: var(--active); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; text-transform: capitalize;
}
.integ-row-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.integ-row-name { font-weight: 600; }
.integ-row-why { font-size: 12.5px; color: var(--set-hint, var(--text-soft)); }
#integ-liste { display: flex; flex-direction: column; gap: 14px; }
.integ-retour {
  align-self: flex-start; border: 0; background: none; padding: 0; margin-bottom: 2px;
  color: var(--red); font-weight: 600; font-size: 13px; cursor: pointer;
}
.integ-retour::before { content: '‹ '; }

/* Encart « Raccorder Claude » unique : un jeton, N connecteurs cochés. */
.claude-uses { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 8px; }
.claude-use-state { color: var(--text-faint); font-size: 12px; }

/* Raison d'une case grisée, à côté de la case : une dépendance invisible se
   lit comme une panne (source Plaud du cockpit sans son consentement). */
.set-note { display: block; margin-top: 3px; font-size: 12px; color: var(--text-faint); line-height: 1.4; }

/* =====================================================================
   Disposition voiture (Tesla et autres navigateurs embarqués)
   ---------------------------------------------------------------------
   Couche ADDITIVE, posée par-dessus les paliers existants : elle ne
   s'applique que sous l'attribut `data-voiture="1"`, écrit sur <html> par
   app.js. Les trois voies d'activation (réglage explicite, user-agent,
   règle de média) sont décidées dans public/ui/voiture.js, où vivent AUSSI
   les seuils de dimensions : aucun chiffre de largeur ou de hauteur ne doit
   apparaître ici, sans quoi il y aurait deux endroits à corriger le jour où
   les vraies mesures d'un écran partagé seront connues.

   Trois partis pris, dans l'ordre des contraintes :
   1. lisibilité à un mètre : tout le texte utile grossit nettement ;
   2. cibles de 48 px minimum, sans jamais dépendre du survol ;
   3. la hauteur est la ressource rare (~700 px moins les barres du
      navigateur) : on supprime du chrome vertical (barre d'onglets du bas,
      marges empilées) plutôt que d'élargir.
   La barre latérale devient un tiroir. Elle ne réinvente rien : ce sont les
   classes du palier mobile (drawer-open, #drawer-overlay) et la même
   fonction de fermeture, seul le bouton d'ouverture change (#sidebar-toggle,
   déjà dans l'en-tête, au lieu du #browse-btn de la barre d'onglets).
   ===================================================================== */
[data-voiture="1"] {
  --v-texte: 19px;       /* corps des listes */
  --v-texte-sec: 15px;   /* méta, descriptions, aides */
  --v-cible: 48px;       /* cible tactile minimale, dans les deux dimensions */
  --v-ligne: 1.5;
}

/* ---- Structure : le contenu prend toute la largeur, le tiroir sort du flux ---- */
[data-voiture="1"] body { font-size: 16px; }
[data-voiture="1"] #app { display: flex; height: 100dvh; }
[data-voiture="1"] #main { flex: 1; max-width: none; padding: 4px 18px 20px; }

[data-voiture="1"] #sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: min(88vw, 340px); height: 100dvh;
  display: flex; padding: 12px; gap: 8px;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform .22s ease, visibility 0s .22s;
  box-shadow: 4px 0 24px rgba(60, 30, 20, .18);
}
[data-voiture="1"] body.drawer-open #sidebar { transform: translateX(0); visibility: visible; transition: transform .22s ease; }
/* Le repli desktop, mémorisé sur cet appareil, masquerait le tiroir sans rien
   pour le rouvrir : on l'ignore ici, exactement comme le fait le palier mobile. */
[data-voiture="1"] body.sidebar-collapsed #sidebar { display: flex; }

[data-voiture="1"] #drawer-overlay {
  display: block; position: fixed; inset: 0; z-index: 50;
  background: rgba(32, 24, 20, .45);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
[data-voiture="1"] body.drawer-open #drawer-overlay { opacity: 1; pointer-events: auto; }

/* La barre d'onglets du bas et la barre d'ajout coûtent une centaine de
   pixels de haut, soit deux tâches lisibles : en voiture, l'en-tête suffit. */
[data-voiture="1"] #mobile-nav,
[data-voiture="1"] #m-add-bar { display: none; }
[data-voiture="1"] #sidebar-toggle {
  display: inline-flex; align-items: center; justify-content: center;
}
/* Le palier mobile déporte l'ajout rapide dans une feuille ouverte par la
   barre d'ajout, qu'on vient de masquer : on le remet dans le flux de la page. */
[data-voiture="1"] #quickadd-wrap {
  position: static; transform: none; box-shadow: none;
  border-radius: 0; padding: 0; background: none; z-index: auto;
}

/* ---- En-tête : haut réduit, titre lisible, toujours à portée ---- */
[data-voiture="1"] #view-header {
  position: sticky; top: 0; z-index: 5; background: var(--bg-main);
  padding: 2px 0 6px; gap: 14px;
}
[data-voiture="1"] #view-header h1 { font-size: 25px; margin: 0; line-height: 1.2; }
[data-voiture="1"] #view-header .subtitle { font-size: var(--v-texte-sec); }

/* ---- Listes de tâches : le cœur de la lecture en un coup d'œil ---- */
[data-voiture="1"] .task,
[data-voiture="1"] .cal-event {
  align-items: center; min-height: 60px; padding: 10px 6px; gap: 16px;
}
[data-voiture="1"] .task-content,
[data-voiture="1"] .cal-event-summary { font-size: var(--v-texte); line-height: var(--v-ligne); }
[data-voiture="1"] .task-desc,
[data-voiture="1"] .cal-event-location { font-size: var(--v-texte-sec); }
[data-voiture="1"] .task-meta { font-size: var(--v-texte-sec); gap: 12px; margin-top: 6px; }
[data-voiture="1"] .cal-event-time { font-size: var(--v-texte-sec); width: 104px; }
[data-voiture="1"] .group-title { font-size: 16px; margin: 16px 0 4px; }
[data-voiture="1"] .chip-source { max-width: 180px; }
[data-voiture="1"] .chip-etapes .chip-ico { width: 16px; height: 16px; }

/* La case à cocher est dessinée à 34 px mais sensible sur 48 : c'est le doigt
   qu'on vise, pas le dessin. Le pseudo-élément tient dans la hauteur de ligne
   (60 px), il ne déborde donc pas sur la tâche voisine. */
[data-voiture="1"] .task-check {
  width: 34px; height: 34px; border-width: 3px; margin-top: 0;
}
/* -10px et non -7 : un absolu se cale sur la boîte de padding de son parent,
   soit 28 px ici (34 moins deux bordures de 3), et 28 + 2 x 10 = 48. Mesuré
   dans Chrome, pas déduit. */
/* Zone carrée et non ronde : 48 px « de côté » veut dire les coins compris.
   Arrondie, elle laissait passer les appuis en diagonale (mesuré). */
[data-voiture="1"] .task-check::before {
  content: ''; position: absolute; inset: -10px;
}
[data-voiture="1"] .task.done .task-check::after { font-size: 20px; line-height: 28px; }
/* Aucune action utile derrière le survol : il n'y a ni souris ni pointeur.
   L'aperçu au survol de la case disparaît, le crayon d'édition reste visible. */
[data-voiture="1"] .task-check:hover::after { content: none; }
[data-voiture="1"] .task.done .task-check::after { content: '✓'; }
[data-voiture="1"] .proj-edit { visibility: visible; }

/* ---- Navigation du tiroir ---- */
[data-voiture="1"] .nav-item {
  font-size: 17px; padding: 11px 10px; gap: 12px; min-height: var(--v-cible);
}
[data-voiture="1"] .nav-icon,
[data-voiture="1"] .nav-icon svg { width: 22px; height: 22px; }
[data-voiture="1"] .proj-group-toggle,
[data-voiture="1"] .proj-rubrique-toggle { min-height: var(--v-cible); font-size: var(--v-texte-sec); }
/* Le tiroir de voiture a 12 px de padding, pas 14. */
[data-voiture="1"] .grille-vues { bottom: -12px; margin: auto -12px -12px; padding-left: 4px; padding-right: 4px; }
/* Colonnes de 160 px environ (tiroir de 330 à 340 px) : écarts resserrés pour
   que les libellés tiennent, compteurs compris (mesuré), et pas de padding
   vertical, sinon le crayon du Digest (48 px) porte sa rangée à 70. */
[data-voiture="1"] .grille-vues .nav-item { gap: 4px; padding: 0 4px; }
[data-voiture="1"] .count { font-size: var(--v-texte-sec); }
[data-voiture="1"] .sidebar-section { font-size: var(--v-texte-sec); margin-top: 12px; }
[data-voiture="1"] .app-name { font-size: 19px; }
[data-voiture="1"] #search-input {
  font-size: 17px; padding: 11px 12px; min-height: var(--v-cible);
}
[data-voiture="1"] .vacation-banner { font-size: var(--v-texte-sec); padding: 11px 12px; }
[data-voiture="1"] #site-update-banner { font-size: var(--v-texte-sec); }
[data-voiture="1"] #site-update-btn { min-height: var(--v-cible); padding: 0 16px; font-size: var(--v-texte-sec); }
[data-voiture="1"] .site-update-fermer { width: var(--v-cible); height: var(--v-cible); }

/* ---- En-tête : loupe et photo du compte, agrandies ---- */
[data-voiture="1"] .vh-compte { display: flex; align-items: center; gap: 12px; margin-left: auto; }
[data-voiture="1"] .m-top-btn { width: var(--v-cible); height: var(--v-cible); }
[data-voiture="1"] .vh-compte .account-btn { width: 56px; height: 56px; }
[data-voiture="1"] .vh-compte .account-btn .avatar { width: 52px; height: 52px; font-size: 21px; }
/* Panneau des notifications (#2024) : cibles de 48 px et texte de 19 px, comme le reste du mode. */
[data-voiture="1"] .nt-tout { min-height: var(--v-cible); padding: 0 12px; font-size: var(--v-texte-sec); }
[data-voiture="1"] .nt-l1 { font-size: var(--v-texte); line-height: var(--v-ligne); }
[data-voiture="1"] .nt-l2 { height: 23px; font-size: var(--v-texte-sec); line-height: 23px; }
[data-voiture="1"] .nt-lu { width: var(--v-cible); height: var(--v-cible); }
[data-voiture="1"] .nt-heure, [data-voiture="1"] .nt-projet, [data-voiture="1"] .nt-jour { font-size: var(--v-texte-sec); }
[data-voiture="1"] .nt-n { font-size: var(--v-texte-sec); line-height: 21px; }
/* Titre au-dessus du corps de 19 px : la taille de la feuille du téléphone. */
[data-voiture="1"] .nt-tete h2 { font-size: 21px; }
[data-voiture="1"] .qa-plus { width: 40px; height: 40px; }
[data-voiture="1"] #qa-chips .chip { min-height: var(--v-cible); font-size: var(--v-texte-sec); padding: 9px 16px; border-radius: 12px; }
[data-voiture="1"] .qa-ajouter, [data-voiture="1"] .qa-secondaire { height: 56px; padding: 0 22px; font-size: 18px; border-radius: 14px; }
[data-voiture="1"] .qa-lien { min-height: var(--v-cible); font-size: 16px; }
[data-voiture="1"] .a-prendre-btn { min-height: var(--v-cible); font-size: 16px; padding: 0 16px; }
[data-voiture="1"] .a-prendre-nom { font-size: var(--v-texte); }
[data-voiture="1"] .a-prendre-meta { font-size: var(--v-texte-sec); }
[data-voiture="1"] .a-prendre-sous { font-size: var(--v-texte-sec); }
/* QA 5 : les lignes de « À prendre » grandissent en mode voiture (ci-dessus),
   mais son en-tête restait en petit (titre 14px, phrase 12,5px, pictogramme
   30px). */
[data-voiture="1"] .a-prendre-tete { min-height: var(--v-cible); }
[data-voiture="1"] .plus-tard-tete { min-height: var(--v-cible); font-size: 16px; }
[data-voiture="1"] .a-prendre-titre { font-size: 19px; }
[data-voiture="1"] .a-prendre-phrase { font-size: var(--v-texte-sec); }
[data-voiture="1"] .a-prendre-ico { width: 40px; height: 40px; }
[data-voiture="1"] .a-prendre-ico svg { width: 22px; height: 22px; }
[data-voiture="1"] .qa-kbd { display: none; }

/* ---- Tout ce qui se touche : 48 px au minimum ---- */
[data-voiture="1"] .icon-btn {
  min-width: var(--v-cible); min-height: var(--v-cible);
  display: inline-flex; align-items: center; justify-content: center;
}
[data-voiture="1"] .icon-btn svg { width: 22px; height: 22px; }
[data-voiture="1"] .header-btn,
[data-voiture="1"] .segmented button,
[data-voiture="1"] .trash-restore,
[data-voiture="1"] .set-nv,
[data-voiture="1"] .cap-btn,
[data-voiture="1"] .mine-toggle {
  font-size: 16px; padding: 11px 16px; min-height: var(--v-cible);
}
[data-voiture="1"] .chip { font-size: var(--v-texte-sec); padding: 9px 14px; }
[data-voiture="1"] .trash-purge { min-width: var(--v-cible); min-height: var(--v-cible); }

/* ---- Ajout rapide ---- */
[data-voiture="1"] #quickadd-form { padding: 6px 14px; margin: 8px 0 6px; }
/* Le champ lui-même fait 48 px de haut sur toute la largeur : c'est la cible,
   pas le cadre qui l'entoure. La hauteur de ligne suit, sans grossir les
   pastilles de coloration (fond d'une boîte en ligne : métriques de la police,
   pas hauteur de ligne). */
[data-voiture="1"] .qa-box { height: 48px; }
[data-voiture="1"] #quickadd-input,
[data-voiture="1"] #quickadd-highlight { font-size: 18px; line-height: 48px; }
/* La pastille « + » ne porte qu'un <svg> de 16 px (.qa-plus svg) : c'est lui
   qui grandit avec elle (40 px), une taille de police n'y changerait rien. */
[data-voiture="1"] .qa-plus svg { width: 22px; height: 22px; }
[data-voiture="1"] #qa-mic {
  min-width: var(--v-cible); min-height: var(--v-cible);
  display: inline-flex; align-items: center; justify-content: center;
}
[data-voiture="1"] #qa-mic svg { width: 24px; height: 24px; }
[data-voiture="1"] #qa-sendto { font-size: var(--v-texte-sec); padding: 7px 10px; }
/* ---- Vues tableau ---- */
[data-voiture="1"] .board-card .task-content { font-size: 16px; }
[data-voiture="1"] .board-card .task-meta { font-size: 14px; }
[data-voiture="1"] .board-col-title { font-size: var(--v-texte-sec); }

/* ---- Dialogues et réglages ---- */
[data-voiture="1"] dialog { max-height: 92dvh; }
[data-voiture="1"] dialog h2 { font-size: 20px; }
[data-voiture="1"] dialog label { font-size: 14px; }
[data-voiture="1"] dialog input:not([type="checkbox"]):not([type="radio"]),
[data-voiture="1"] dialog textarea,
[data-voiture="1"] dialog select {
  font-size: 17px; padding: 11px 12px; min-height: var(--v-cible);
}
[data-voiture="1"] #tf-content { font-size: 20px; }
[data-voiture="1"] .tf-actions button {
  font-size: 16px; padding: 11px 18px; min-height: var(--v-cible);
}
[data-voiture="1"] .settings-hint,
[data-voiture="1"] .settings-status { font-size: 14px; }

/* ---- Vide et messages ---- */
[data-voiture="1"] .empty { padding: 28px 0; font-size: 17px; }
[data-voiture="1"] .empty .big { font-size: 34px; }

/* ---------- Vue Rapports ---------- */
.reports-view { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px 40px; }
.rep-block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.rep-block h3 { margin: 0 0 10px; font-size: 14px; color: var(--text-soft); font-weight: 600; }
.rep-select { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 4px 6px; }
.rep-hidden { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 13px; }
.chart-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.chart-tile { flex: 1 1 120px; border: 1px solid var(--border); border-left: 3px solid var(--tile, var(--p4));
  border-radius: 8px; padding: 8px 10px; background: var(--bg-soft); }
.chart-tile-val { display: block; font-size: 22px; font-weight: 600; color: var(--text); }
.chart-tile-lib { display: block; font-size: 12px; color: var(--text-soft); }
.chart-svg { display: block; max-width: 100%; }
.chart-label, .chart-tick { fill: var(--text-soft); font-size: 11px; }
.chart-row { cursor: pointer; }
.chart-col.attenue rect { opacity: .55; }
.chart-data { margin-top: 8px; color: var(--text-soft); font-size: 12px; }
.chart-fallback { border-collapse: collapse; margin-top: 6px; }
.chart-fallback th, .chart-fallback td { border: 1px solid var(--border); padding: 2px 8px; text-align: left; }
.rep-note { margin: 8px 0 0; color: var(--text-faint); font-size: 12px; white-space: pre-line; }
.rep-chiffres { margin: 0; color: var(--text); font-size: 14px; }

/* Vocabulaire de l'assistant : un tableau dense, qui tient sur un écran étroit. */
.vocab-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vocab-table th { text-align: left; padding: 4px 6px; color: var(--text-soft); font-weight: 600; }
.vocab-table td { padding: 3px 6px; vertical-align: top; }
.vocab-table input[type="text"], .vocab-table select { width: 100%; box-sizing: border-box; }
.vocab-msg, .vocab-erreur { color: var(--red); font-size: 12px; white-space: pre-line; }
/* Propositions de dossier ignorées (spec 2026-10-05, 7.2) : une liste courte
   dans la carte du vocabulaire, un nom et son bouton par ligne. */
.prop-ignorees-bloc { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.prop-ignorees { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.prop-ignorees li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.prop-ignorees li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.prop-ignorees-vide { color: var(--text-faint); }
.nouveau-dossier .nd-ignorer { color: var(--text-soft); }

/* Rangement automatique : une pastille discrète sur la ligne, une ligne d'info
   au-dessus de la liste. La palette déclare --text-soft et --text-faint, jamais
   --muted : employer un nom qui n'existe pas rendrait la couleur héritée. */
.chip-auto-route { font-size: 11px; color: var(--text-faint); border: 1px solid var(--border);
  border-radius: 10px; padding: 0 6px; }
.auto-route-info { font-size: 12px; color: var(--text-faint); padding: 4px 0 8px; white-space: pre-line; }
#suggestion-choix select { width: 100%; box-sizing: border-box; margin: 6px 0; }

/* Nouveau dossier proposé par l'assistant (spec 2026-09-30) : nom
   corrigeable, tâches concernées, corrections des titres, vocabulaire.
   Les libellés de cases sont en ligne, pas en colonne comme les champs des
   autres dialogues (dialog label). */
/* Largeur réservée au bureau : sur téléphone, la règle des dialogues en
   feuilles (pleine largeur, collés en bas) doit s'appliquer telle quelle, et
   un sélecteur d'identifiant l'emporterait sur elle. */
@media (min-width: 769px) { #nouveau-dossier { width: 520px; } }
#nouveau-dossier form { gap: 14px; }
/* Le nom est LE champ du dialogue : écrit à la taille d'un titre de tâche,
   pas aux 12 px hérités du libellé. 16 px aussi pour que Safari sur iPhone ne
   zoome pas à la mise au point. */
#nouveau-dossier #nd-nom { font-size: 16px; }
/* Le nom, son origine et son état forment un bloc : l'état vide ne prend
   aucune place, sans quitter l'arbre d'accessibilité (région annoncée). */
.nd-champ { display: flex; flex-direction: column; }
.nd-origine, .nd-etat { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-faint); overflow-wrap: anywhere; }
.nd-etat { color: var(--text-soft); }
.nd-etat:empty { margin: 0; }
.nd-etat.nd-etat-erreur { color: var(--late-fg); }
.nd-lien { border: none; background: none; padding: 0; font: inherit; color: var(--red); text-decoration: underline; cursor: pointer; }
.nd-bloc { border: none; margin: 0; padding: 0; min-width: 0; }
.nd-bloc legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text-soft); }
.nd-taches { max-height: 38vh; max-height: 38dvh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
#nouveau-dossier label.nd-tache, #nouveau-dossier label.nd-option {
  flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--text); cursor: pointer;
}
#nouveau-dossier label.nd-tache { padding: 8px 10px; border-top: 1px solid var(--border); }
#nouveau-dossier label.nd-tache:first-child { border-top: none; }
#nouveau-dossier label.nd-option { padding: 3px 0; }
#nouveau-dossier .nd-tache input, #nouveau-dossier .nd-option input { width: auto; margin: 3px 0 0; flex: none; accent-color: var(--red); }
/* Abrégé à trois lignes, sauf un titre qui porte une correction : l'aperçu
   vaut consentement, rien de corrigé ne doit s'y cacher. */
.nd-tache-titre { overflow-wrap: anywhere; }
.nd-tache-titre:not(.nd-entier) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* La marge négative rend au texte l'espace que prend le fond : « (Brugmann »
   ne doit pas se lire « ( Brugmann ». */
.nd-tache-titre mark { background: var(--hl-date-bg); color: var(--hl-date-fg); border-radius: 4px; padding: 0 2px; margin: 0 -2px; font-weight: 600; }
.nd-nb { color: var(--text-faint); }
.nd-aide { display: block; margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-faint); }
.nd-erreur { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--late-bg); color: var(--late-fg); font-size: 13px; overflow-wrap: anywhere; }
#nouveau-dossier .tf-actions button:disabled { opacity: .55; cursor: default; }
/* « Ignorer cette proposition » (suite du lot 4) : à gauche du pied, en geste
   discret, jamais confondu avec le bouton principal. Le pied passe à la ligne
   plutôt que de déborder ; sur téléphone, le geste prend sa propre ligne,
   sous les deux boutons. */
#nouveau-dossier .tf-actions { flex-wrap: wrap; }
#nouveau-dossier .tf-actions #nd-ignorer { border-color: transparent; background: none; color: var(--text-soft); padding-left: 6px; padding-right: 6px; }
#nouveau-dossier .tf-actions #nd-ignorer:hover { color: var(--text); background: var(--hover); }
@media (max-width: 768px) {
  #nouveau-dossier .tf-actions #nd-ignorer { order: 1; flex-basis: 100%; }
}
.nouveau-dossier { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px;
  color: var(--text-soft); border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; margin: 0 0 8px; }
/* Ligne de proposition (spec 2026-10-05, 7.2) : le texte, puis ses gestes,
   qui passent à la ligne sur un écran étroit plutôt que de déborder. */
.nouveau-dossier .nd-ligne-texte { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.nouveau-dossier .nd-gestes { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.nouveau-dossier .nd-gestes .route-btn { margin-left: 0; white-space: normal; text-align: left; }
/* Mode « Dossier existant » du dialogue : la liste des dossiers, proches en
   tête, avec sa recherche. */
.nd-champ[hidden] { display: none; }
#nouveau-dossier #nd-recherche { font-size: 16px; }
.nd-dossiers { max-height: 30vh; max-height: 30dvh; overflow-y: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; }
.nd-dossiers-titre { margin: 0; padding: 7px 10px 3px; font-size: 11.5px; font-weight: 600; color: var(--text-soft); }
#nouveau-dossier label.nd-dossier {
  flex-direction: row; align-items: baseline; gap: 10px; padding: 7px 10px;
  font-size: 13.5px; line-height: 1.45; color: var(--text); cursor: pointer;
}
#nouveau-dossier .nd-dossier input { width: auto; margin: 0; flex: none; accent-color: var(--red); }
.nd-dossier-nom { overflow-wrap: anywhere; }
.nd-dossier-chemin { margin-left: auto; font-size: 12px; color: var(--text-faint); text-align: right; overflow-wrap: anywhere; }
.nd-dossiers > .nd-aide { margin: 0; padding: 8px 10px; }

/* « À prendre » (spec 2026-09-22) */
.a-prendre { margin-top: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft); padding: 4px 16px 6px; }
.a-prendre-tete { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0 8px; border: none; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.a-prendre-ico { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--hl-person-bg); color: var(--hl-person-fg); display: inline-flex; align-items: center; justify-content: center; }
.a-prendre-ico svg { width: 17px; height: 17px; }
.a-prendre-titres { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.a-prendre-titre { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.a-prendre-nb { font-size: 12px; font-weight: 600; color: var(--hl-person-fg); background: var(--hl-person-bg); border-radius: 10px; padding: 1px 7px; }
.a-prendre-phrase { font-size: 12.5px; color: var(--text-soft); }
.a-prendre-chevron { color: var(--text-soft); transition: transform .15s; display: inline-flex; }
.a-prendre-chevron svg { width: 17px; height: 17px; }
.a-prendre.replie .a-prendre-chevron { transform: rotate(-90deg); }
.a-prendre.replie .a-prendre-liste { display: none; }
/* « Plus tard » (#2074) : échéances lointaines en fin de liste, repliées par défaut. */
.plus-tard-tete { display: flex; align-items: center; gap: 6px; width: 100%; margin: 22px 0 4px; padding: 0 0 6px; border: none; border-bottom: 1px solid var(--border); background: none; font: inherit; font-weight: 700; font-size: 13px; color: var(--text-soft); text-align: left; cursor: pointer; }
.plus-tard-tete .group-nb { color: var(--text-soft); font-weight: 500; }
.plus-tard-chevron { display: inline-flex; transition: transform .15s; }
.plus-tard-chevron svg { width: 15px; height: 15px; }
.plus-tard.replie .plus-tard-chevron { transform: rotate(-90deg); }
.plus-tard.replie .plus-tard-liste { display: none; }
/* Atténuées par la couleur et non l'opacité : le texte garde un contraste AA. */
.plus-tard-liste .task .task-content, .board-card.lointaine .task-content { color: var(--text-soft); }
.a-prendre-ligne { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
/* Intertitres des deux sous-sections (spec Synthèses 2026-10-13, 2.2). */
.a-prendre-sous { padding: 12px 0 6px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.a-prendre-sous + .a-prendre-ligne { border-top: none; }
.a-prendre-rond { width: 20px; height: 20px; flex: none; box-sizing: border-box; border-radius: 50%; border: 2px dashed var(--p4); }
.a-prendre-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; border: none; background: none; padding: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.a-prendre-nom { font-size: 14.5px; }
.a-prendre-meta { font-size: 12.5px; color: var(--text-soft); }
/* Le compteur des étapes au fil de la ligne (spec 2026-10-06, 6.2) : sur la
   ligne de base du texte. Centré, il montait d'un pixel et demi, la boîte
   flexible prenant le bas de l'icône pour ligne de base. */
.a-prendre-meta .chip-etapes { align-items: baseline; }
.a-prendre-hash { font-weight: 700; }
.a-prendre-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--bg-elev); font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; flex: none; }
.a-prendre-btn:hover { background: var(--hover); }
.a-prendre-btn svg { width: 15px; height: 15px; }
@media (hover: none) { .a-prendre-btn { min-height: 44px; } }
.a-prendre-confiee { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-soft); }
.task-confiee { margin-top: 4px; }
.vide-court { color: var(--text-soft); font-size: 14px; margin: 20px 2px 0; }

/* ---------- Actions à trancher (spec 2026-09-29) ---------- */
.a-trancher { margin: 4px 0 20px; border: 1px solid var(--tri-bord); border-radius: 14px; background: var(--tri-fond); padding: 4px 18px 6px; }
.a-trancher-tete { display: flex; align-items: center; gap: 12px; padding: 12px 0 10px; }
.a-trancher-ico { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--hl-person-bg); color: var(--tri-texte); display: inline-flex; align-items: center; justify-content: center; }
.a-trancher-ico svg { width: 18px; height: 18px; }
.a-trancher-titres { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.a-trancher-titre { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.a-trancher-nb { font-size: 12px; font-weight: 600; color: var(--tri-texte); background: var(--hl-person-bg); border-radius: 10px; padding: 1px 7px; }
.a-trancher-phrase { font-size: 12.5px; color: var(--text-soft); }
.a-trancher-ligne { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--tri-ligne); }
.a-trancher-rond { width: 20px; height: 20px; flex: none; margin-top: 1px; box-sizing: border-box; border-radius: 50%; border: 2px dashed var(--tri-rond); }
.a-trancher-corps { flex: 1; min-width: 0; }
.a-trancher-texte { display: block; width: 100%; padding: 0; border: none; background: none; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text); text-align: left; cursor: pointer; }
.a-trancher-corps .task-meta { margin-top: 4px; }
.a-trancher-extrait { margin: 8px 0 0; font-size: 13px; line-height: 19px; color: var(--text-soft); font-style: italic; }
.a-trancher-actions { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.a-trancher-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 9px; font: inherit; font-size: 13px; cursor: pointer; }
.a-trancher-actions button svg { width: 15px; height: 15px; flex: none; }
.a-trancher-actions button:disabled { opacity: .6; cursor: default; }
.a-trancher-confier { border: 1px solid var(--tri-bord); background: var(--hl-person-bg); color: var(--tri-texte); font-weight: 600; }
.a-trancher-gens { display: inline-flex; margin-left: 2px; }
.a-trancher-gens .avatar { box-shadow: 0 0 0 1.5px var(--hl-person-bg); }
.a-trancher-gens .avatar + .avatar { margin-left: -5px; }
.a-trancher-garder { border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); font-weight: 600; }
.a-trancher-garder svg { color: var(--hl-date-fg); }
.a-trancher-garder:hover { background: var(--hover); }
.a-trancher-rejeter { border: 1px solid transparent; background: transparent; color: var(--text-soft); }
.a-trancher-rejeter:hover { color: var(--late-fg); background: var(--hover); }
/* Ligne tranchée, en attente de son remplacement par le rafraîchissement. */
.a-trancher-ligne.tranchee { opacity: .55; }
/* « Probablement traitées » (spec Synthèses 2026-10-13, 2.1) : l'encart de
   « À trancher » en neutre, avec les lignes ordinaires de la liste. */
.a-trancher.probables { border-color: var(--border); background: var(--bg-soft); }
.probables .a-trancher-ico { color: var(--hl-date-fg); }
.probables .task:last-child { border-bottom: none; }
/* Menu « Confier… » (spec 2026-10-05, 7.1) : le dossier proposé, ses
   membres, puis le choix d'un autre dossier partagé. Deux projets candidats
   (Messagerie, lot 3) doublent la liste : au-delà de la hauteur de l'écran
   elle défile (le focus au clavier amène l'entrée dans la vue), et ses entrées
   gardent leur hauteur (flex: none), un nom de projet long passant à la ligne. */
.confier-menu { min-width: 240px; display: flex; flex-direction: column; max-height: min(60vh, 440px);
  overflow-y: auto; overscroll-behavior: contain; }
.confier-menu [role="menuitem"] {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 6px 10px; flex: none;
  border: none; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--text);
  text-align: left; cursor: pointer;
}
.confier-menu [role="menuitem"]:hover, .confier-menu [role="menuitem"]:focus-visible { background: var(--hover); outline: none; }
/* Le fond --hover seul ne se voit pas (1,1:1 sur le fond du panneau, en clair
   comme en sombre) : au clavier, le contour des autres panneaux (.pop-opt). */
.confier-menu [role="menuitem"]:focus-visible { outline: 2px solid var(--p3); outline-offset: -2px; }
.confier-menu [role="menuitem"] > svg { width: 16px; height: 16px; flex: none; color: var(--text-soft); }
.confier-menu .confier-libelle { min-width: 0; overflow-wrap: anywhere; }
.confier-menu hr { flex: none; border: none; border-top: 1px solid var(--border); margin: 4px 6px; }
@media (hover: none) { .confier-menu [role="menuitem"] { min-height: 44px; } }
#confier-dialog label.confier-option {
  flex-direction: row; align-items: flex-start; gap: 10px; padding: 4px 0;
  font-size: 13.5px; line-height: 1.45; color: var(--text); cursor: pointer;
}
#confier-dialog .confier-option input { width: auto; margin: 3px 0 0; flex: none; accent-color: var(--red); }
#confier-dialog .tf-actions button:disabled { opacity: .55; cursor: default; }
.chip-a-trancher { font-size: 12px; font-weight: 600; color: var(--tri-texte); background: var(--hl-person-bg); border-radius: 10px; padding: 0 7px; }
/* Tâche confiée à l'équipe (spec 2026-10-03, 4.5) : sa pastille, « Je
   prends » au bout de la ligne, et le prénom du preneur une fois prise. Le
   texte de la pastille est --tri-texte, comme celui de « À trancher » :
   --hl-person-fg ne tient que 4,1:1 en clair sur ce fond. Le bouton ne dépend
   pas du survol : la souris, le doigt et le clavier le trouvent au même endroit. */
.chip-equipe { font-size: 12px; font-weight: 600; color: var(--tri-texte); background: var(--hl-person-bg); border-radius: 10px; padding: 0 7px; }
.chip-prise { gap: 5px; color: var(--text-soft); }
.task-prendre {
  flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg-elev); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer;
  white-space: nowrap;
}
.task-prendre:hover { background: var(--hover); }
.task-prendre svg { width: 14px; height: 14px; flex: none; }
.task-prendre:disabled { opacity: .6; cursor: default; }
/* Au doigt, téléphone comme tablette : la cible de 44 px des autres gestes de
   la ligne (« Probablement traitée »). Après la règle de base, qu'elle
   complète ; le critère est l'absence de survol, celui du pointeur grossier
   est réservé à la disposition voiture (public/ui/voiture.js). */
@media (hover: none) {
  .task-prendre { min-height: 44px; padding: 0 14px; font-size: 14px; }
}
/* Sur un téléphone, au doigt, « Je prends » passe sous le texte, aligné sur lui :
   à côté, avec le cadenas, il laissait 131 px au titre à 375 px (mesuré dans
   Chromium), « Relire la réponse à l’appel d’offres Keolis » sur trois lignes.
   Le corps prend la ligne moins la case et le cadenas (22 + 13 + 13 + 26 = 74 px,
   ceux du palier mobile), si bien que le bouton ne tient pas à côté et passe à
   la ligne suivante ; le cadenas, par `order`, reste en haut à droite. Les 35 px
   sont la case et son écart : le bouton s'aligne sur le texte. Pas en voiture,
   dont les cases et les écarts sont plus grands, ni à la souris dans une fenêtre
   étroite, où les gestes au survol de la ligne tiennent à côté. */
@media (hover: none) and (max-width: 768px) {
  html:not([data-voiture="1"]) .task.prenable { flex-wrap: wrap; }
  html:not([data-voiture="1"]) .task.prenable > .task-body { flex: 1 1 calc(100% - 74px); }
  html:not([data-voiture="1"]) .task.prenable > .task-lock { order: 1; }
  html:not([data-voiture="1"]) .task.prenable > .task-prendre { order: 2; margin-left: 35px; }
}
[data-voiture="1"] .task-prendre { min-height: var(--v-cible); font-size: 16px; padding: 0 16px; }
[data-voiture="1"] .chip-equipe { font-size: var(--v-texte-sec); }
.chip-gardee { font-size: 12px; font-weight: 600; color: var(--hl-date-fg); }
.fin-tri { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--hl-date-bg); color: var(--hl-date-fg); font-size: 13px; }
.fin-tri svg { width: 16px; height: 16px; flex: none; }
.group-title.vos-actions .group-nb { color: var(--text-faint); font-weight: 500; margin-left: 4px; }
@media (max-width: 768px) {
  .a-trancher { padding: 2px 14px 4px; }
  .a-trancher-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-trancher-actions button { height: 44px; }
  .a-trancher-confier { grid-column: 1 / -1; }
}

/* Toast. `width: max-content` : avec left: 50 % et une largeur automatique,
   le toast se bridait à la moitié de l'écran, sur quatre ou cinq lignes au
   téléphone (revue du lot 2, F3) ; il prend désormais sa largeur, jusqu'au
   max-width, plafonné à 640 px pour ne pas s'étaler sur un grand écran (un
   bilan de la sélection multiple, retours terrain vague 2). Le filet clair le
   détache des cartes en sombre, où son fond se confondait avec elles ; il
   s'éclaircit aussi un peu (texte 12,1:1, action 7,1:1). */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2500; display: flex; align-items: center; gap: 12px; width: max-content; padding: 10px 10px 10px 16px; background: #2b2724; color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); font-size: 13.5px; max-width: min(calc(100vw - 32px), 640px); }
[data-theme="dark"] .toast { background: #3a3532; }
/* Vide, il attend son texte à l'image suivante (montrerToast) : invisible,
   mais présent pour les aides techniques, qui l'annonceront rempli. */
.toast:empty { opacity: 0; pointer-events: none; }
.toast-ico { display: inline-flex; color: #7fd6a2; }
.toast-ico svg { width: 16px; height: 16px; }
/* Une adresse de boîte longue, sans point de coupure, sortait du toast :
   le message rétrécit avec lui et se coupe où il faut (relecture finale du
   lot 2, important 2). */
.toast-msg { min-width: 0; overflow-wrap: anywhere; }
.toast-action { height: 30px; padding: 0 10px; border: none; border-radius: 8px; background: rgba(255,255,255,.12); font: inherit; font-size: 13px; font-weight: 600; color: #ffb4a8; cursor: pointer; }
@media (max-width: 768px) {
  .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
  /* Dans un dialogue plein écran (Réglages, réglage d'une boîte, revue), le
     toast se pose juste au-dessus du pied (« Terminé »), et non au milieu du
     contenu, posé sur une carte. */
  dialog .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* La fiche de tâche couvre l'écran mais n'est pas modale : son toast reste
     dans le body, et à 150 px du bas il se posait sur « Commentaires ». Il
     se pose juste au-dessus du champ de commentaire (relecture finale du
     lot 2, mineur 5). Porté par un dialogue modal, il n'est plus enfant du
     body : la règle ne le touche pas. */
  body.fiche-ouverte > .toast { bottom: calc(124px + env(safe-area-inset-bottom)); }
  /* La feuille de saisie reste ouverte après un ajout (body.qa-open) et monte
     à environ 200 px du bas (mesuré à 390 px de large) : à 150 px, le toast
     couvrait son champ. Il passe alors en haut de l'écran, hors de la feuille
     et du clavier. */
  body.qa-open .toast { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }
}
/* Fiche ouverte en panneau (580 px à droite), le toast resté dans le body se
   centrait sur la page, en bas : à 880 px, où le panneau couvre la liste, il
   se posait sur le champ de commentaire et son trombone, et à 1512 px un
   message long en mordait le bord (QA de la relecture finale du lot 2, suite
   du mineur 5). Comme au téléphone, il se pose au-dessus de ce champ, centré
   sur le panneau, où se font la plupart des gestes qu'il confirme. En
   voiture, le panneau prend 64 % de la largeur et son pied est plus haut :
   le toast se centre sur la liste, à côté, à sa hauteur habituelle. */
@media (min-width: 769px) {
  body.fiche-ouverte > .toast { left: auto; right: 290px; transform: translateX(50%); bottom: 124px; max-width: 548px; }
}
[data-voiture="1"] body.fiche-ouverte > .toast {
  left: 18vw; right: auto; transform: translateX(-50%); bottom: 26px; max-width: calc(36vw - 32px);
}

/* =====================================================================
   Sélection multiple (spec 2026-10-05, section 6) : case de sélection,
   barre d'actions, menus, dialogue de fusion, actions au survol.
   ===================================================================== */
.task-case { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--red); cursor: pointer; }
.task-case[hidden] { display: none; }
[data-voiture="1"] .task-case { width: 34px; height: 34px; margin-top: 0; }
.task.selectionnee, .task.selectionnee:hover { background: var(--active); }
/* En mode sélection, un clic coche : Maj-clic ne sélectionne pas de texte. */
body.selection-active #task-list .task { -webkit-user-select: none; user-select: none; }
.selection-entrer.on { background: var(--active); border-color: var(--red); color: var(--red); }
/* La barre d'actions : en bas, sous le toast (2500) et sous la fiche (1000),
   centrée sur le contenu et non sur la fenêtre, qu'elle couvrirait côté barre
   latérale (280 px) ; trop étroite, elle passe à la ligne. */
.selection-barre {
  position: fixed; left: calc(50% + 140px); bottom: 20px; transform: translateX(-50%); z-index: 900;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; box-sizing: border-box;
  width: max-content; max-width: calc(100vw - 312px);
  padding: 8px 8px 8px 14px; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.18);
  font-size: 13px;
}
.selection-barre[hidden] { display: none; }
.sel-compte { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.sel-btn {
  height: 32px; padding: 0 10px; border: none; border-radius: 8px; background: none;
  color: var(--text); font: inherit; white-space: nowrap; cursor: pointer;
}
.sel-btn:hover:not(:disabled) { background: var(--hover); }
.sel-btn:disabled { color: var(--text-faint); cursor: default; }
.sel-danger { color: var(--p1); }
.sel-quitter {
  flex: none; width: 32px; height: 32px; border: none; border-radius: 8px;
  background: var(--bg-mute); color: var(--text-soft); font: inherit; cursor: pointer;
}
.sel-quitter:hover { color: var(--text); }
.selection-barre button:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
/* Le toast et la fin de la liste passent au-dessus de la barre. */
body.selection-active .toast { bottom: 84px; }
body.selection-active #main { padding-bottom: 96px; }
/* Sans barre latérale (repliée, ou en tiroir en voiture) : la fenêtre entière. */
body.sidebar-collapsed .selection-barre, [data-voiture="1"] .selection-barre { left: 50%; max-width: calc(100vw - 32px); }
@media (min-width: 769px) and (max-width: 1000px) {
  .selection-barre { left: calc(50% + 116px); max-width: calc(100vw - 264px); }
}
/* Fiche ouverte à côté de la liste (580 px à droite). */
@media (min-width: 1320px) {
  body.fiche-ouverte .selection-barre { left: calc(50% - 150px); max-width: calc(100vw - 892px); }
  body.sidebar-collapsed.fiche-ouverte .selection-barre { left: calc(50% - 290px); max-width: calc(100vw - 612px); }
}
@media (max-width: 768px) {
  /* Elle prend la place de la barre d'ajout, au-dessus des onglets : le
     compte et « ✕ » en tête, les actions dessous, toutes visibles (sur deux
     rangs s'il le faut). L'identifiant passe devant l'état replié de la barre
     latérale, que l'appareil a pu garder. */
  #selection-barre {
    left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); transform: none; z-index: 40;
    width: auto; max-width: none; padding: 6px 6px 6px 14px;
  }
  .sel-quitter { order: 2; margin-left: auto; width: 40px; height: 40px; }
  .sel-actions { order: 3; flex: 1 1 100%; }
  .sel-btn { flex: none; height: 38px; padding: 0 8px; font-size: 14px; }
  body.selection-active #m-add-bar { display: none; }
  body.selection-active .toast { bottom: calc(232px + env(safe-area-inset-bottom)); }
  body.selection-active #main { padding-bottom: calc(250px + env(safe-area-inset-bottom)); }
}
/* Menus de la barre (Déplacer, Priorité, Échéance) : des boutons. */
.sel-menu .pop-opt { width: 100%; border: none; background: none; font: inherit; color: inherit; text-align: left; }
.pop .pop-opt[hidden] { display: none; }
.sel-liste { display: flex; flex-direction: column; max-height: 45vh; overflow-y: auto; }
/* Question en tête d'une bulle (restaurer une note dans un projet choisi, N7). */
.pop-titre { margin: 2px 4px 8px; font-size: 13px; font-weight: 600; }
@media (max-width: 768px) { .sel-projets .pop-field { font-size: 16px; } }
/* Fusion manuelle (spec 6.3). Largeur réservée au bureau : sous 768 px, la
   règle des dialogues en feuilles s'applique telle quelle. */
@media (min-width: 769px) { #fusion-manuelle { width: 560px; } }
#fusion-manuelle form { gap: 14px; }
.fm-bloc { border: none; margin: 0; padding: 0; min-width: 0; }
.fm-bloc legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text-soft); }
.fm-taches { max-height: 46vh; max-height: 46dvh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
#fusion-manuelle label.fm-tache, #fusion-manuelle label.fm-sous-taches {
  flex-direction: row; align-items: flex-start; gap: 10px; padding: 9px 10px; border-top: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.45; color: var(--text); cursor: pointer;
}
#fusion-manuelle label.fm-tache:first-child { border-top: none; }
#fusion-manuelle label.fm-tache.fm-gardee { background: var(--active); }
#fusion-manuelle .fm-tache input, #fusion-manuelle .fm-sous-taches input { width: auto; margin: 3px 0 0; flex: none; accent-color: var(--red); }
/* Reprise des titres (spec 2026-10-14, 7) : un cadre à part sous la liste. */
#fusion-manuelle label.fm-sous-taches { border: 1px solid var(--border); border-radius: 8px; }
/* Un titre sans espace (une adresse) se coupe, comme dans la liste au-dessus. */
#fusion-manuelle #fm-sous-taches-phrase { overflow-wrap: anywhere; }
.fm-tache-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fm-tache-titre { overflow-wrap: anywhere; }
.fm-tache-meta { font-size: 12px; color: var(--text-faint); }
.fm-sort { flex: none; font-size: 11.5px; color: var(--text-faint); }
.fm-gardee .fm-sort { color: var(--red); font-weight: 600; }
.fm-phrase { margin: 0; font-size: 13px; color: var(--text-soft); }
.fm-erreur { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--late-bg); color: var(--late-fg); font-size: 13px; overflow-wrap: anywhere; }
/* Actions au survol d'une ligne (corbeille, « Pas pour moi ») : à la souris
   seulement (spec 6.2) ; au doigt, par le mode sélection ou par la fiche. */
.task-survol { display: none; flex: none; align-self: flex-start; align-items: center; gap: 4px; }
@media (hover: hover) and (pointer: fine) {
  .task-survol { display: inline-flex; visibility: hidden; }
  .task:hover .task-survol, .task:focus-within .task-survol { visibility: visible; }
}
body.selection-active .task-survol, [data-voiture="1"] .task-survol { display: none; }
.task-corbeille {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; padding: 0;
  border: none; border-radius: 6px; background: none; color: var(--text-faint); cursor: pointer;
}
.task-corbeille svg { width: 15px; height: 15px; }
.task-corbeille:hover { background: var(--hover); color: var(--p1); }
.task-pas-pour-moi {
  height: 22px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: none;
  color: var(--text-soft); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer;
}
.task-pas-pour-moi:hover { background: var(--hover); color: var(--text); }
@media (hover: none) {
  .task-case { width: 22px; height: 22px; }
  /* L'appui long ouvre la sélection : ni loupe ni menu du système sur le texte. */
  #task-list .task:has(> .task-case) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* =====================================================================
   Fiche de tâche en panneau (spec 2026-09-24). Toutes les règles portent
   #task-dialog : l'identifiant bat les règles génériques `dialog`,
   `dialog label`, `dialog form` et la feuille basse mobile, quel que soit
   leur rang dans ce fichier.
   ===================================================================== */
#task-dialog .tf-head { display: flex; align-items: center; gap: 4px; }
:is(#task-dialog, #notes-vue) .tf-save-zone { display: inline-flex; min-width: 0; }
:is(#task-dialog, #notes-vue) .tf-save { font-size: 12px; color: var(--text-faint); background: none; border: 0; padding: 0; cursor: default; }
:is(#task-dialog, #notes-vue) .tf-save[data-etat="ok"]::before { content: '✓ '; color: var(--hl-date-fg); }
:is(#task-dialog, #notes-vue) .tf-save[data-etat="echec"], :is(#task-dialog, #notes-vue) .tf-save[data-etat="conflit"] { color: var(--late-fg); cursor: pointer; text-decoration: underline; }
#task-dialog .tf-icon {
  width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: none; color: var(--text-soft); padding: 0;
}
#task-dialog .tf-icon:hover { background: var(--hover); color: var(--text); }
#task-dialog .tf-icon:disabled { opacity: .35; cursor: default; background: none; }
#task-dialog .tf-icon svg { width: 18px; height: 18px; }
#task-dialog .tf-back {
  display: none; align-items: center; gap: 2px; height: 44px; padding: 0 10px 0 4px;
  border: 0; border-radius: 22px; background: none; color: var(--late-fg); font-size: 16px;
}
#task-dialog .tf-back svg { width: 24px; height: 24px; }

/* ---------- Fiche de tâche en panneau (bureau, spec 2026-09-24) --------- */
#task-dialog {
  position: fixed; inset: 0 0 0 auto; margin: 0; z-index: 1000;
  width: 580px; max-width: 100vw; height: 100dvh; max-height: none;
  border: 0; border-left: 1px solid var(--border); border-radius: 0;
  box-shadow: -12px 0 32px rgba(40, 30, 20, .08);
  background: var(--bg-elev); overflow: hidden;
}
#task-dialog[open] { display: flex; flex-direction: column; }
/* Les textes indicatifs de TOUS les champs de la fiche (le titre, les
   Détails, « Commenter… », l'idée et la réponse de l'encart, et le champ d'un
   menu ouvert depuis la fiche, qui s'y pose) : la teinte par défaut du
   navigateur ne tenait que 3,2:1 en sombre dans Chromium (#757575 sur
   --bg-elev), moins encore dans WebKit. --text-soft, à pleine opacité
   (Firefox en pose une par défaut) : 5,7:1 en clair, 6,7:1 en sombre, sur le
   fond des champs (règle de l'encart, 9133551, étendue à la fiche). */
#task-dialog input::placeholder,
#task-dialog textarea::placeholder { color: var(--text-soft); opacity: 1; }
#task-dialog #task-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 0; }
@media (min-width: 1320px) { body.fiche-ouverte #main { margin-right: 580px; } }
/* Fiche en pleine page (spec 2026-10-14, 6) : à droite de la barre latérale,
   la liste cachée, une colonne de texte de 760 px. Ni au téléphone (déjà
   plein écran) ni en voiture (64vw). La liste est cachée jusque dans ses
   descendants : le cadenas d'une tâche privée et les boutons de survol se
   remettent en visibility: visible, et restaient atteignables au clavier sous
   la fiche (relecture de L6). Sous 812 px, la fiche en grand ne serait pas
   plus large que le panneau : pas de bouton, panneau. */
#task-dialog .tf-agrandir { width: auto; gap: 6px; padding: 0 10px; font-size: 13px; }
@media (min-width: 769px) and (max-width: 811px) { #task-dialog #tf-agrandir { display: none; } }
@media (min-width: 812px) {
  html:not([data-voiture="1"]) body.fiche-grande #task-dialog { width: calc(100vw - 280px); }
  html:not([data-voiture="1"]) body.fiche-grande.sidebar-collapsed #task-dialog { width: 100vw; }
  html:not([data-voiture="1"]) body.fiche-grande.fiche-ouverte #main,
  html:not([data-voiture="1"]) body.fiche-grande.fiche-ouverte #main * { visibility: hidden; }
  html:not([data-voiture="1"]) body.fiche-grande #task-dialog .tf-body,
  html:not([data-voiture="1"]) body.fiche-grande #task-dialog .tf-composer { padding-inline: max(24px, calc((100% - 760px) / 2)); }
  html:not([data-voiture="1"]) body.fiche-grande.fiche-ouverte > .toast { right: calc((100vw - 280px) / 2); max-width: 640px; }
  html:not([data-voiture="1"]) body.fiche-grande.sidebar-collapsed.fiche-ouverte > .toast { right: 50%; }
}
@media (min-width: 812px) and (max-width: 1000px) {
  html:not([data-voiture="1"]) body.fiche-grande:not(.sidebar-collapsed) #task-dialog { width: calc(100vw - 232px); }
  html:not([data-voiture="1"]) body.fiche-grande:not(.sidebar-collapsed).fiche-ouverte > .toast { right: calc((100vw - 232px) / 2); max-width: min(640px, calc(100vw - 264px)); }
}

#task-dialog .tf-head { height: 52px; flex: none; padding: 0 12px 0 22px; border-bottom: 1px solid var(--border); }
#task-dialog .tf-crumb {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; margin-left: -8px;
  border: 0; border-radius: 8px; background: none; color: var(--text-soft); font-size: 13px; min-width: 0;
}
/* Un nom de projet long se coupe par « … » plutôt que de passer à la ligne
   dans l'en-tête de 52 px, que le bouton « Agrandir » resserre (le dernier
   span : le premier peut être l'icône du projet). Au bureau, le témoin
   d'enregistrement garde sa ligne et c'est ce nom qui cède : sur deux lignes
   serrées, « Réessayer » passait sous ↑ (relecture croisée de L6). Au
   téléphone, le témoin garde son retour à la ligne. */
#task-dialog .tf-crumb > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le numéro garde sa largeur : c'est le nom du projet qui cède. */
#task-dialog .tf-num {
  flex: none; height: 30px; padding: 0 6px; border: 0; border-radius: 8px; background: none;
  color: var(--text-soft); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (min-width: 769px) {
  :is(#task-dialog, #notes-vue) .tf-save-zone { flex-shrink: 0; }
  :is(#task-dialog, #notes-vue) .tf-save { white-space: nowrap; }
}
#task-dialog .tf-crumb:hover, #task-dialog .tf-num:hover { background: var(--hover); color: var(--text); }
#task-dialog .tf-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 20px; display: flex; flex-direction: column; gap: 14px; }

#task-dialog .tf-titre-ligne { display: flex; gap: 12px; align-items: flex-start; }
#task-dialog .tf-done {
  width: 24px; height: 24px; position: relative; flex: none; margin-top: 3px; padding: 0; border-radius: 50%;
  border: 2px solid var(--p4); background: none; color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
#task-dialog .tf-done.pr1 { border-color: var(--p1); }
#task-dialog .tf-done.pr2 { border-color: var(--p2); }
#task-dialog .tf-done.pr3 { border-color: var(--p3); }
#task-dialog .tf-done svg { width: 14px; height: 14px; display: none; }
#task-dialog .tf-done.fait { background: var(--hl-date-fg); border-color: var(--hl-date-fg); }
#task-dialog .tf-done.fait svg { display: block; }
#task-dialog #tf-content {
  flex: 1; min-width: 0; margin: 0; resize: none; overflow: hidden; border: 0; padding: 0; background: none;
  font: inherit; font-size: 20px; line-height: 28px; font-weight: 650; letter-spacing: -.01em; color: var(--text);
}
#task-dialog #tf-content.fait { color: var(--text-faint); text-decoration: line-through; }

#task-dialog .tf-stage {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
  padding: 3px; border-radius: 11px; background: var(--bg-mute);
}
#task-dialog .tf-stage button {
  display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px;
  border: 0; border-radius: 9px; background: none; color: var(--text-soft); font-size: 13px;
}
#task-dialog .tf-stage button[aria-checked="true"] {
  background: var(--bg-elev); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(40, 30, 20, .14);
}
#task-dialog .tf-stage-ico, #task-dialog .tf-stage-ico svg { display: inline-flex; width: 15px; height: 15px; }
#task-dialog [data-stage="doing"] .tf-stage-ico { color: var(--p3); }
#task-dialog [data-stage="blocked"] .tf-stage-ico { color: var(--hl-person-fg); }
#task-dialog [data-stage="done"] .tf-stage-ico { color: var(--hl-date-fg); }
/* Colonnes d'un projet dans la fiche (spec 2026-10-05, 5.2) : de deux à
   douze, elles passent à la ligne plutôt que de se serrer. */
#task-dialog .tf-stage.perso { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
#task-dialog .tf-stage.perso button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#task-dialog .tf-source {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-sidebar);
}
#task-dialog .tf-source-ico {
  width: 38px; height: 38px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--hl-recur-bg); color: var(--hl-recur-fg);
}
#task-dialog .tf-source-ico svg { width: 20px; height: 20px; }
#task-dialog .tf-source[data-source="mail"] .tf-source-ico,
#task-dialog .tf-source[data-source="extension"] .tf-source-ico,
#task-dialog .tf-source[data-source="mattermost"] .tf-source-ico { background: var(--hl-project-bg); color: var(--hl-project-fg); }
#task-dialog .tf-source[data-source="mcp"] .tf-source-ico,
#task-dialog .tf-source[data-source="api"] .tf-source-ico { background: var(--hl-est-bg); color: var(--hl-est-fg); }
#task-dialog .tf-source[data-source="delegation"] .tf-source-ico { background: var(--hl-person-bg); color: var(--hl-person-fg); }
#task-dialog .tf-source-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#task-dialog .tf-source-type { font-size: 12px; color: var(--text-soft); }
#task-dialog .tf-source-label { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#task-dialog .tf-source-meta { font-size: 12px; color: var(--text-faint); }
#task-dialog .tf-source-action {
  flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 9px; background: var(--bg-elev);
  color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none;
}
#task-dialog .tf-source-action:hover { background: var(--hover); }

#task-dialog .tf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 2px; }
#task-dialog .tf-field { position: relative; display: flex; align-items: center; min-height: 38px; min-width: 0; }
/* Échéance, heure et responsable sur toute la rangée au bureau : dans le
   panneau de 580 px, une date en gras ou avec l'année ne tenait pas à côté de
   « + heure » (spec 2026-10-14, 8). Le responsable aussi, pour garder l'ordre
   du DOM sans trou au milieu (le dernier champ peut rester seul). */
@media (min-width: 769px) {
  #task-dialog .tf-field:has(> .tf-val-sec), #task-dialog .tf-field:has(> [data-kind="assignee"]) { grid-column: 1 / -1; }
}
#task-dialog .tf-field-label { width: 104px; flex: none; font-size: 13px; color: var(--text-soft); }
#task-dialog .tf-val {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; height: 30px;
  padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--text-faint); font-size: 14px;
}
#task-dialog .tf-val.set { color: var(--text); }
#task-dialog .tf-val:hover { background: var(--hover); }
#task-dialog .tf-val-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#task-dialog .tf-val.late { color: var(--late-fg); font-weight: 600; }
#task-dialog .tf-val[data-kind="est"].set { color: var(--hl-est-fg); }
#task-dialog .tf-val[data-kind="recur"].set { color: var(--hl-recur-fg); }
#task-dialog .tf-val.tf-val-sec { font-size: 13px; padding: 0 6px; flex: none; white-space: nowrap; }
#task-dialog .tf-val.set[data-kind="priv"] { background: var(--priv-bg); color: var(--priv-fg); }
/* #1581 : un champ changé hors de la fiche s'éclaire une seconde. Le titre et
   les Détails ont un fond forcé (!important), qui passe avant une animation :
   une ombre intérieure, que rien ne force, les éclaire. */
#task-dialog .tf-eclat { animation: tf-eclat 1s ease-out; }
#task-dialog #tf-content.tf-eclat, #task-dialog #tf-description.tf-eclat { animation-name: tf-eclat-ombre; }
@keyframes tf-eclat { from { background-color: var(--active); } }
@keyframes tf-eclat-ombre { from { box-shadow: inset 0 0 0 100vmax var(--active); } }
@media (prefers-reduced-motion: reduce) {
  #task-dialog .tf-eclat, #task-dialog #tf-content.tf-eclat, #task-dialog #tf-description.tf-eclat { animation: none; }
}
/* L'éditeur des Détails s'éclaire comme la zone de texte qu'il remplace. */
#task-dialog #tf-editeur.tf-eclat { animation-name: tf-eclat-ombre; }
@media (prefers-reduced-motion: reduce) {
  #task-dialog #tf-editeur.tf-eclat { animation: none; }
}

#task-dialog .tf-meta-info { margin: 0; font-size: 12px; color: var(--text-faint); }
:is(#task-dialog, #notes-vue) .tf-bloc { display: flex; flex-direction: column; gap: 6px; }
:is(#task-dialog, #notes-vue) .tf-section-titre { display: inline; font-size: 13px; font-weight: 600; color: var(--text-soft); }
:is(#task-dialog, #notes-vue) .tf-section-ligne { display: flex; align-items: center; justify-content: space-between; }
:is(#task-dialog, #notes-vue) .tf-lien { border: 0; background: none; padding: 4px 6px; border-radius: 8px; font-size: 13px; color: var(--text-soft); }
:is(#task-dialog, #notes-vue) .tf-lien:hover { background: var(--hover); color: var(--text); }
#task-dialog #tf-description {
  width: 100%; margin: 0; padding: 10px 12px !important; border: 1px solid var(--border) !important; border-radius: 10px;
  background: var(--bg-elev) !important; color: var(--text); font-size: 14px; line-height: 20px; resize: none;
}
/* Détails en éditeur riche (spec 2026-10-14, 4) : le cadre, la police et la
   hauteur de ligne de la zone de texte qu'il remplace ; il grandit avec son
   texte. La barre, collée en haut pendant la saisie, reste affichée hors
   focus (demande de Vincent du 2026-10-26 : cachée, elle laissait un trou),
   jamais en voiture ni en lecture seule ; trop large, elle défile. Collée,
   elle remonte du padding haut de .tf-body (18 px, 14 px au téléphone), que
   sticky respecte, sans quoi le texte défilait au-dessus d'elle. Le champ de
   lien se pose sur ses boutons, son message de refus passe dessous, sur le
   texte. Règles de ProseMirror :
   blancs gardés, pas de ligatures, pas de contour au focus (le cadre le
   marque). Le compteur des sous-tâches reprend la pastille des lignes
   (.chip-etapes), à la taille de son titre (spec 2026-10-14, 1). */
#task-dialog .tf-details-titre { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
#task-dialog #tf-st-avancement { font-size: 13px; }
:is(#task-dialog #tf-editeur, #notes-editeur) { position: relative; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); color: var(--text); }
:is(#task-dialog #tf-editeur, #notes-editeur):focus-within { border-color: var(--border-strong); }
:is(#task-dialog, #notes-vue) .ed-barre {
  display: flex; position: sticky; top: -18px; z-index: 1; gap: 2px; padding: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; background: var(--bg-elev);
}
/* display: flex l'emporte sur l'attribut hidden (note en lecture seule). */
:is(#task-dialog, #notes-vue) .ed-barre[hidden] { display: none; }
:is(#task-dialog, #notes-vue) .ed-bouton {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-soft);
}
:is(#task-dialog, #notes-vue) .ed-bouton svg { width: 18px; height: 18px; }
:is(#task-dialog, #notes-vue) .ed-bouton:hover { background: var(--hover); color: var(--text); }
/* Enfoncé : fond et filet dessous, lisible en clair et en sombre (décision 20). */
:is(#task-dialog, #notes-vue) .ed-bouton:is([aria-pressed="true"], .ed-enfonce) { background: var(--active); color: var(--text); box-shadow: inset 0 -2px 0 var(--p1); }
/* En sombre, --p1 ne tient que 2,7:1 sur --active ; --hl-prio-fg, 5,7:1. */
[data-theme="dark"] :is(#task-dialog, #notes-vue) .ed-bouton:is([aria-pressed="true"], .ed-enfonce) { box-shadow: inset 0 -2px 0 var(--hl-prio-fg); }
:is(#task-dialog, #notes-vue) .ed-bouton[aria-disabled="true"] { opacity: .35; cursor: default; background: none; }
/* Dictée en cours (#1839) : le rouge du micro de l'ajout vocal ; le texte provisoire, estompé, n'est pas encore écrit. */
:is(#task-dialog, #notes-vue) .ed-bouton[data-commande="dictee"][aria-pressed="true"] { background: #d23f31; color: #fff; box-shadow: none; }
:is(#task-dialog, #notes-vue) .ed-dictee { color: var(--text-soft); font-style: italic; }
/* Bulle d'un lien nommé (décision 18) : le site, l'adresse entière, « Ouvrir ». */
.ed-bulle-lien { display: flex; flex-direction: column; gap: 6px; max-width: 320px; padding: 4px; }
.ed-bulle-site { font-weight: 650; overflow-wrap: anywhere; }
.ed-bulle-adresse { font-size: 12px; color: var(--text-soft); overflow-wrap: anywhere; }
.ed-bulle-lien .header-btn { align-self: flex-start; }
/* Champ posé sur les boutons, refus en surimpression sous la bande : sa hauteur ne bouge pas (décision 17) ; clip-path rogne les côtés, pas le message. */
:is(#task-dialog, #notes-vue) .ed-barre.ed-champ-ouvert { overflow: visible; clip-path: inset(0 0 -10em); }
:is(#task-dialog, #notes-vue) .ed-lien { position: absolute; inset: 0; padding: 4px; display: flex; align-items: center; border-radius: inherit; background: var(--bg-elev); }
:is(#task-dialog, #notes-vue) .ed-lien input { flex: 1; min-width: 0; height: 32px; padding: 0 8px; font-size: 14px; }
:is(#task-dialog, #notes-vue) .ed-lien-message {
  position: absolute; top: calc(100% + 1px); left: 4px; right: 4px; padding: 6px 8px; font-size: 12px; line-height: 16px;
  color: var(--late-fg); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 8px;
}
:is(#task-dialog, #notes-vue) .ed-lien-message:empty { display: none; }
/* Menu « / » (spec 2026-10-14, 4) : sous le curseur, situé par le cadre des Détails, jamais plus large que lui. */
:is(#task-dialog, #notes-vue) .ed-menu {
  position: absolute; z-index: 2; width: min(248px, 100%); padding: 4px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); box-shadow: 0 10px 30px rgba(0,0,0,.16);
}
:is(#task-dialog, #notes-vue) .ed-menu-titre { padding: 6px 10px 4px; font-size: 12px; font-weight: 650; color: var(--text-soft); }
:is(#task-dialog, #notes-vue) .ed-menu-option { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 7px; font-size: 14px; cursor: pointer; }
:is(#task-dialog, #notes-vue) .ed-menu-option svg { flex: none; width: 16px; height: 16px; color: var(--text-soft); }
:is(#task-dialog, #notes-vue) .ed-menu-option:hover { background: var(--hover); }
:is(#task-dialog, #notes-vue) .ed-menu-option[aria-selected="true"] { background: var(--active); }
:is(#task-dialog, #notes-vue) .ed-menu-rappel { margin-left: auto; color: var(--text-soft); font: 12px ui-monospace, Menlo, monospace; }
:is(#task-dialog, #notes-vue) .ed-texte {
  position: relative; padding: 10px 12px; font-size: 14px; line-height: 20px;
  white-space: pre-wrap; word-wrap: break-word; font-variant-ligatures: none; outline: none; overflow-wrap: anywhere;
}
:is(#task-dialog, #notes-vue) .ed-texte[data-vide="1"]::before {
  content: attr(aria-placeholder); position: absolute; color: var(--text-soft); pointer-events: none;
}
/* Texte de remplacement vide : l'indication n'est pas lue comme un texte
   saisi (aria-placeholder la dit). Un moteur qui ignore cette forme garde la
   déclaration d'avant. */
:is(#task-dialog, #notes-vue) .ed-texte[data-vide="1"]::before { content: attr(aria-placeholder) / ''; }
/* Le repère d'envoi tient la ligne vide : l'indication ne le recouvre pas. */
:is(#task-dialog, #notes-vue) .ed-texte[data-vide="1"]:has(.ed-envoi)::before { content: none; }
:is(#task-dialog, #notes-vue) .ed-texte * { margin: 0; }
:is(#task-dialog, #notes-vue) .ed-texte > * + * { margin-top: 6px; }
/* Lot B (#2563) : quatre tailles de titre ; H5 et H6, lus d'un texte, ont la taille du Titre 4. */
:is(#task-dialog, #notes-vue) .ed-texte :is(h1, h2, h3, h4, h5, h6) { line-height: 1.3; font-weight: 650; }
:is(#task-dialog, #notes-vue) .ed-texte h1 { font-size: 1.55em; }
:is(#task-dialog, #notes-vue) .ed-texte h2 { font-size: 1.3em; }
:is(#task-dialog, #notes-vue) .ed-texte h3 { font-size: 1.12em; }
:is(#task-dialog, #notes-vue) .ed-texte :is(h4, h5, h6) { font-size: 1em; font-weight: 700; }
:is(#task-dialog, #notes-vue) .ed-texte :is(ul, ol) { padding-left: 22px; }
/* Lot B (#2563) : règles globales, une classe de la palette seule, jamais un style tiré du texte (reprises par le PDF). */
.ed-c-rouge { color: var(--ed-rouge); }
.ed-c-orange { color: var(--ed-orange); }
.ed-c-vert { color: var(--ed-vert); }
.ed-c-bleu { color: var(--ed-bleu); }
.ed-c-violet { color: var(--ed-violet); }
.ed-c-gris { color: var(--ed-gris); }
mark.ed-surligne { background: var(--ed-surligne); color: inherit; border-radius: 2px; }
.ed-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
:is(#task-dialog, #notes-vue) .ed-texte blockquote { padding-left: 10px; border-left: 3px solid var(--border-strong); color: var(--text-soft); }
:is(#task-dialog, #notes-vue) .ed-texte code { padding: 1px 4px; border-radius: 4px; background: var(--bg-mute); font: .92em ui-monospace, Menlo, monospace; }
:is(#task-dialog, #notes-vue) .ed-texte pre { padding: 8px 10px; border-radius: 8px; background: var(--bg-mute); overflow-x: auto; }
:is(#task-dialog, #notes-vue) .ed-texte pre code { padding: 0; background: none; }
/* Une vidéo seule sur sa ligne se suit comme un lien. */
:is(#task-dialog, #notes-vue) .ed-texte :is(a, [data-video]) { color: var(--hl-project-fg); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* Une vidéo choisie au clavier se voit : la frappe la remplacerait. */
:is(#task-dialog, #notes-vue) .ed-texte .ProseMirror-selectednode { outline: 2px solid var(--p3); outline-offset: 1px; border-radius: 4px; }
/* Tableaux (spec 2026-10-14, 4) : trop larges, ils défilent dans leur bloc, jamais la page. */
:is(#task-dialog, #notes-vue) .ed-texte table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
/* Mots entiers, et une cellule vide assez large pour le doigt. */
:is(#task-dialog, #notes-vue) .ed-texte :is(th, td) {
  min-width: 72px; padding: 4px 8px; border: 1px solid var(--border-strong); text-align: left; vertical-align: top; overflow-wrap: normal;
}
:is(#task-dialog, #notes-vue) .ed-texte th { font-weight: 650; background: var(--bg-mute); }
:is(#task-dialog, #notes-vue) .ed-texte [data-align="center"] { text-align: center; }
:is(#task-dialog, #notes-vue) .ed-texte [data-align="right"] { text-align: right; }
:is(#task-dialog, #notes-vue) .ed-texte .selectedCell { background: var(--active); }
/* Cellules choisies : la sélection du navigateur cachée sous .selectedCell. */
:is(#task-dialog, #notes-vue) .ed-texte.ProseMirror-hideselection *::selection { background: transparent; }
/* Vidéo (spec 2026-10-14, 4) : en ligne sur toute la largeur, car en bloc le saut de ligne suivant laissait une ligne vide. */
:is(#task-dialog, #notes-vue) .ed-video {
  display: inline-flex; width: 100%; vertical-align: top; flex-direction: column; align-items: flex-start; gap: 6px; margin: 4px 0; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-mute);
}
:is(#task-dialog, #notes-vue) .ed-video-titre { font-weight: 650; }
:is(#task-dialog, #notes-vue) .ed-video-adresse { max-width: 100%; font-size: 12px; color: var(--text-soft); overflow-wrap: anywhere; }
:is(#task-dialog, #notes-vue) .ed-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: var(--bg-elev); }
/* Choisie, elle se voit avant d'être effacée. */
:is(#task-dialog, #notes-vue) .ed-video.ProseMirror-selectednode { outline: 2px solid var(--hl-project-fg); outline-offset: 1px; }
/* Sommaire (#2563, lot C) : carte comme la vidéo, titres en retrait selon leur niveau. */
:is(#task-dialog, #notes-vue) .ed-sommaire { margin: 4px 0; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-mute); }
:is(#task-dialog, #notes-vue) .ed-sommaire-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 650; }
:is(#task-dialog, #notes-vue) .ed-sommaire-liste ul { list-style: none; margin: 6px 0 0; padding: 0; }
:is(#task-dialog, #notes-vue) .ed-sommaire-entree { font: inherit; text-align: left; background: none; border: 0; padding: 2px 0; color: var(--hl-project-fg); cursor: pointer; overflow-wrap: anywhere; }
:is(#task-dialog, #notes-vue) .ed-sommaire-entree:is(:hover, :focus-visible) { text-decoration: underline; }
:is(#task-dialog, #notes-vue) .ed-sommaire-n2 { padding-left: 16px; }
:is(#task-dialog, #notes-vue) .ed-sommaire-n3 { padding-left: 32px; }
:is(#task-dialog, #notes-vue) .ed-sommaire-n4 { padding-left: 48px; }
:is(#task-dialog, #notes-vue) .ed-sommaire-vide { margin: 6px 0 0; color: var(--text-soft); }
:is(#task-dialog, #notes-vue) .ed-sommaire.ProseMirror-selectednode { outline: 2px solid var(--hl-project-fg); outline-offset: 1px; }
/* Images (spec 2026-10-14, 5) : contenues dans la largeur ; lecture, absence et envoi en carte, comme la vidéo. */
:is(#task-dialog, #notes-vue) .ed-image { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
:is(#task-dialog, #notes-vue) .ed-image-cadre { position: relative; display: flow-root; width: fit-content; max-width: 100%; }
:is(#task-dialog, #notes-vue) .ed-image img { display: block; max-width: 100%; height: auto; margin: 4px 0; border: 1px solid var(--border); border-radius: 8px; cursor: zoom-in; }
/* Lot B (#2563) : un paragraphe de deux images ou plus est une rangée ; chacune y garde sa largeur choisie en plafond, et passe à la ligne sous 160 px. */
:is(#task-dialog, #notes-vue) .ed-rangee { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
:is(#task-dialog, #notes-vue) .ed-rangee > .ed-image { flex: 1 1 0; min-width: min(160px, 100%); }
/* Les repères du curseur de ProseMirror sortent du flux : ils ne comptent ni comme élément ni comme écart. */
:is(#task-dialog, #notes-vue) .ed-rangee > :is(.ProseMirror-separator, .ProseMirror-trailingBreak) { position: absolute; }
/* En écrivant, un clic choisit l'image (décision 30) ; choisie, sa poignée au coin bas droit, sur le coin de l'image (marge de 4 px), ou ses tailles au doigt (décision 31). */
:is(#task-dialog, #notes-vue) .tf-details:focus-within .ed-image img { cursor: default; }
:is(#task-dialog, #notes-vue) .ed-image-poignee {
  position: absolute; right: -8px; bottom: -4px; width: 16px; height: 16px; padding: 0;
  border: 2px solid var(--bg-elev); border-radius: 4px; background: var(--p3); cursor: nwse-resize; touch-action: none;
}
:is(#task-dialog, #notes-vue) .ed-recadrage { position: absolute; inset: 4px 0; overflow: hidden; border-radius: 8px; cursor: crosshair; touch-action: none; }
/* s373 (#2563) : hors de la partie gardée, l'image s'assombrit. */
:is(#task-dialog, #notes-vue) .ed-recadrage-zone { position: absolute; box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.55); outline: 2px dashed #fff; outline-offset: -2px; }
:is(#task-dialog, #notes-vue) .ed-recadrage-zone:focus-visible { outline: 3px solid var(--p3); outline-offset: -3px; }
:is(#task-dialog, #notes-vue) .ed-image-outils { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
:is(#task-dialog, #notes-vue) .ed-image-outils button { min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); color: var(--text); font-size: 14px; }
:is(#task-dialog, #notes-vue) .ed-image-outils [aria-pressed="true"] { background: var(--active); box-shadow: inset 0 -2px 0 var(--p1); }
[data-theme="dark"] :is(#task-dialog, #notes-vue) .ed-image-outils [aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--hl-prio-fg); }
/* En lisant, rien : comme la barre, les outils ne paraissent qu'en saisie. */
:is(#task-dialog, #notes-vue) .tf-details:not(:focus-within) :is(.ed-image-poignee, .ed-image-outils) { display: none; }
:is(#task-dialog, #notes-vue) .ed-image-raison { display: block; margin-top: 2px; font-size: 12px; }
:is(#task-dialog, #notes-vue) :is(.ed-image-texte, .ed-envoi) {
  display: inline-flex; flex-direction: column; width: 100%; vertical-align: top; margin: 4px 0; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-mute); color: var(--text-soft); font-size: 13px;
}
/* Visionneuse : l'image en grand, contenue, sur un fond sombre le même en clair et en sombre ; ce fond la ferme. */
#image-dialog {
  inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 64px 16px 44px;
  border-radius: 0; box-shadow: none; background: rgba(18, 16, 15, .92); color: #fff; overflow: hidden;
}
#image-dialog[open] { display: flex; align-items: center; justify-content: center; }
#image-dialog img { display: block; max-width: 100%; max-height: 100%; border-radius: 8px; }
/* 44 px à la souris comme au doigt ; 60 en voiture, comme les boutons de la fiche. */
#image-dialog-fermer {
  position: absolute; top: 10px; right: 10px; min-width: 44px; height: 44px; padding: 0 14px; gap: 6px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; line-height: 1;
}
#image-dialog-fermer:hover { background: rgba(255, 255, 255, .18); }
/* Nom du fichier et aide (décision 27) : un clic sur eux tombe sur le fond, qui ferme. */
#image-dialog :is(.image-dialog-nom, .image-dialog-aide) { position: absolute; left: 16px; margin: 0; pointer-events: none; }
#image-dialog .image-dialog-nom { top: 22px; right: 140px; font-weight: 600; font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#image-dialog .image-dialog-aide { bottom: 14px; right: 16px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .78); }
/* Au doigt, ni Échap ni « à côté » à la souris : l'aide se tait, la croix et « Fermer » restent. */
@media (hover: none) { #image-dialog .image-dialog-aide { display: none; } }
[data-voiture="1"] #image-dialog { padding-top: 80px; }
[data-voiture="1"] #image-dialog-fermer { min-width: 60px; height: 60px; border-radius: 16px; font-size: 20px; }
[data-voiture="1"] #image-dialog .image-dialog-nom { top: 30px; }
/* Case des Détails (li.ed-case) : le dessin des cases de sous-tâches. */
:is(#task-dialog, #notes-vue) .ed-texte li.ed-case { display: flex; align-items: flex-start; gap: 8px; margin-left: -22px; list-style: none; }
:is(#task-dialog, #notes-vue) .ed-case > div { flex: 1; min-width: 0; }
:is(#task-dialog, #notes-vue) .ed-case > [role="checkbox"] {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-top: 1px; border: 2px solid var(--text-soft); border-radius: 5px;
  background: var(--bg-elev); color: transparent; cursor: pointer;
}
:is(#task-dialog, #notes-vue) .ed-case > [role="checkbox"]:hover { border-color: var(--text); }
:is(#task-dialog, #notes-vue) .ed-case > [role="checkbox"] svg { width: 12px; height: 12px; }
:is(#task-dialog, #notes-vue) .ed-case > [aria-checked="true"] { background: var(--hl-date-fg); border-color: var(--hl-date-fg); color: var(--bg-elev); }
:is(#task-dialog, #notes-vue) .ed-case[data-checked="true"] > div { text-decoration: line-through; color: var(--text-soft); }
/* Au doigt, tablette comprise : cibles de 44 px, les 12 boutons de la barre rétrécis jusqu'à 24 quand ils ne tiennent pas (décision 26). La bande de la barre, réservée même au repos, grandit d'autant : rien ne bouge (décision 17).
   Case, champ et bulle du lien comme au téléphone (bloc mobile) : la case de 22 px plus 2 × 13 de débord, le champ à 16 px contre le zoom de Safari. */
@media (hover: none) {
  :is(#task-dialog, #notes-vue) .ed-bouton { flex: 0 1 44px; width: auto; min-width: 24px; height: 44px; }
  :is(#task-dialog, #notes-vue) .ed-menu-option { min-height: 44px; font-size: 16px; }
  :is(#task-dialog, #notes-vue) .ed-video button { min-height: 44px; font-size: 16px; }
  :is(#task-dialog, #notes-vue) .ed-image-outils button { min-height: 44px; font-size: 16px; }
  :is(#task-dialog, #notes-vue) .ed-texte li.ed-case { gap: 12px; padding: 11px 0; }
  :is(#task-dialog, #notes-vue) .ed-case > [role="checkbox"] { width: 22px; height: 22px; margin-top: 0; }
  :is(#task-dialog, #notes-vue) .ed-case > [role="checkbox"]::before { content: ''; position: absolute; inset: -13px; }
  :is(#task-dialog, #notes-vue) .ed-lien input { height: 44px; font-size: 16px; }
  :is(#task-dialog, #notes-vue) .ed-bulle-lien .header-btn { min-height: 48px; font-size: 16px; }
}
/* Notes de projet (N3, planche 1) : au bureau, la liste sur 280 px, qui garde sa place et défile seule, puis la
   note. Une colonne (data-une : téléphone, voiture, sous 1000 px, fiche ouverte) montre la liste, ou la note seule
   sous data-plein, avec « ‹ Notes ». */
#notes-vue { display: grid; grid-template-columns: 280px minmax(0, 1fr); margin-top: 18px; border-top: 1px solid var(--border); color: var(--text); }
#notes-vue[hidden], #notes-vue [hidden] { display: none; }
.nq-gauche { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; box-sizing: border-box; min-width: 0;
  padding: 14px 16px 24px 0; border-right: 1px solid var(--border); }
.nq-liste { display: flex; flex-direction: column; gap: 1px; }
.nq-intertitre { margin: 6px 0 0 8px; font-size: 12px; font-weight: 700; color: var(--text-soft); }
.nq-item { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; padding: 9px 10px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nq-item[aria-current="true"] { background: var(--active-row); }
.nq-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; line-height: 19px; }
.nq-meta { font-size: 12px; line-height: 16px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nq-edite { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 1px 9px 1px 2px; border-radius: 999px;
  background: var(--hl-person-bg); color: var(--hl-person-fg); font-size: 12px; font-weight: 600; line-height: 18px; }
.nq-note { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* #2563 (351) : au bureau, la note descend jusqu'en bas de #main et le cadre du texte prend la place restante ; un clic dans
   le vide du cadre met le curseur à la fin (vue-notes.mjs). Hauteur tirée de #main (flex), jamais 100vh : l'en-tête s'y
   ajouterait et une note courte ferait défiler. Les règles :is(#task-dialog, #notes-vue) ne changent pas. */
#main:has(> #notes-vue:not([hidden]):not([data-une="1"])) { display: flex; flex-direction: column; }
#notes-vue:not([data-une="1"]) { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
#notes-vue:not([data-une="1"]) > .nq-note { padding: 18px 0 32px 32px; }
#notes-vue:not([data-une="1"]) > .nq-note > .tf-details { flex: 1; display: flex; flex-direction: column; }
#notes-vue:not([data-une="1"]) #notes-editeur { flex: 1; cursor: text; }
/* s365 (#2563) : au bureau, la vue tient dans #main (règle plus haut) et chaque colonne défile seule ; à gauche, la liste des notes défile
   et les tâches liées restent en bas (au plus 45 % de la colonne, défilant à leur tour). */
#notes-vue:not([data-une="1"]) > .nq-note { overflow-y: auto; }
#notes-vue:not([data-une="1"]) > .nq-gauche { position: static; align-self: stretch; max-height: none; display: flex; flex-direction: column;
  overflow: hidden; padding-bottom: 0; }
#notes-vue:not([data-une="1"]) > .nq-gauche > * { flex: none; }
#notes-vue:not([data-une="1"]) > .nq-gauche > :is(.nq-liste, .nq-resultats) { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#notes-vue:not([data-une="1"]) > .nq-gauche > .nq-liees { max-height: 45%; overflow-y: auto; padding-bottom: 16px; }
.nq-titre { margin: 0; font-size: 24px; line-height: 31px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
#notes-vue .nq-sans-titre { color: var(--text-soft); font-style: italic; }
.nq-meta-note { font-size: 12.5px; color: var(--text-faint); margin-top: -4px; }
.nq-barre-haut { display: flex; align-items: center; min-height: 52px; }
.nq-retour { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px 0 6px; border: 0; background: none; color: var(--red);
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
#notes-vue[data-une="1"] { grid-template-columns: minmax(0, 1fr); border-top: 0; margin-top: 12px; }
#notes-vue[data-une="1"] .nq-gauche { position: static; max-height: none; border-right: 0; padding: 0 0 24px; }
#notes-vue[data-une="1"]:not([data-plein="1"]) > .nq-note,
#notes-vue[data-une="1"][data-plein="1"] > .nq-gauche { display: none; }
#notes-vue[data-une="1"] .nq-item { padding: 12px 10px 12px 6px; border-bottom: 1px solid var(--border); border-radius: 0; }
#notes-vue[data-une="1"] .nq-t { font-size: 16px; line-height: 22px; }
/* N4 : « + Note », le titre modifiable (aux mesures de .nq-titre), le témoin à sa droite, les bandeaux de la planche 2. */
.nq-nouvelle { display: block; width: 100%; min-height: 32px; margin: 0 0 8px; padding: 0 10px; border: 1px dashed var(--border); border-radius: 8px;
  background: none; color: var(--text-soft); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.nq-nouvelle:hover { background: var(--hover); color: var(--text); }
.nq-tete { display: flex; align-items: center; gap: 12px; }
.nq-tete > .nq-titre { flex: 1; min-width: 0; }
.nq-titre-champ { width: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.nq-titre-champ::placeholder { color: var(--text-soft); font-style: italic; opacity: 1; }
.nq-bandeau { padding: 10px 12px; border-radius: 10px; background: var(--hl-person-bg); color: var(--tri-texte); font-size: 13px; line-height: 1.4; }
.nq-bandeau[data-cle="quitte"] { background: var(--hl-date-bg); color: var(--hl-date-fg); }
.nq-bandeau strong { display: block; font-size: 14px; }
/* « Écrire ici » sous la phrase, jamais coupé au milieu d'elle (recette N4). */
.nq-bandeau-phrase { display: block; }
.nq-bandeau .header-btn { margin-top: 8px; }
/* N8 : le crayon barré d'une note verrouillée, devant le titre de l'entrée et à côté du titre de la note ; « Verrouiller »
   à gauche de « Plus d'actions ». */
.nq-verrou { display: inline-flex; flex: none; color: var(--text-faint); }
.nq-verrou svg { width: 14px; height: 14px; }
.nq-t .nq-verrou { margin-right: 1px; vertical-align: -2px; }
.nq-tete > .nq-verrou svg { width: 18px; height: 18px; }
.nq-verrouiller { flex: none; }
/* N5 : les pièces de la note sous son éditeur, dans sa colonne ; la grille et la ligne de pièce sont celles de la fiche. */
.nq-pieces { min-width: 0; margin-top: 4px; }
/* N9 : barre « Filtrer par tag » (pastille pressée : contour et graisse, la couleur n'est jamais seule), tags des entrées
   et de la note, « + Tag », « Épingler », bulle « Gérer les tags » et son nuancier déplié dans la ligne. */
.nq-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12.5px; }
.nq-filtre-titre { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--text-soft); }
.nq-filtre-tags, .nq-tags-puces { display: contents; }
.nq-filtre-tag { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 999px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.nq-filtre-tag:hover { background: var(--hover); }
.nq-filtre-tag[aria-pressed="true"] { padding: 0 9px; border: 2px solid var(--text); background: var(--active-row); font-weight: 700; }
.nq-filtre-resume { flex-basis: 100%; color: var(--text-faint); }
.nq-filtre-resume:empty { display: none; }
.nq-filtre-effacer, .nq-gerer { min-height: 28px; padding: 0 6px; border: 0; background: none; color: var(--red); font: inherit; font-weight: 600; cursor: pointer; }
.nq-point { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.nq-tags { display: flex; flex-wrap: wrap; gap: 2px 10px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--text-soft); }
.nq-tag { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.nq-tags-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.nq-tags-note .nq-tag { padding: 1px 2px 1px 9px; border: 1px solid var(--border); border-radius: 999px; }
.nq-tag-retirer { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 0; border: 0;
  border-radius: 50%; background: none; color: var(--text-faint); font: inherit; cursor: pointer; }
.nq-tag-retirer:hover { background: var(--hover); color: var(--text); }
.nq-ajout-tag { min-height: 28px; padding: 0 10px; border: 1px dashed var(--border); border-radius: 999px; background: none; color: var(--text-soft);
  font: inherit; font-weight: 600; cursor: pointer; }
.nq-ajout-tag:hover { background: var(--hover); color: var(--text); }
.nq-epingler { flex: none; }
.nq-bulle-tag .pop-field { width: 100%; box-sizing: border-box; }
/* N12 : recherche au-dessus du filtre, portée en deux boutons pressés, résultats à la place de la liste ; terme surligné
   comme dans la recherche des tâches, nom du projet hors du projet ouvert. */
.nq-recherche { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.nq-chercher { flex: 1 1 100%; min-width: 0; min-height: 32px; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg-elev); color: var(--text); font: inherit; font-size: 13.5px; box-sizing: border-box; }
.nq-portee { display: flex; gap: 6px; font-size: 12.5px; }
.nq-portee-btn { min-height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text);
  font: inherit; cursor: pointer; }
.nq-portee-btn:hover { background: var(--hover); }
.nq-portee-btn[aria-pressed="true"] { padding: 0 9px; border: 2px solid var(--text); background: var(--active-row); font-weight: 700; }
.nq-resultats { display: flex; flex-direction: column; gap: 1px; }
.nq-projet { font-size: 12px; line-height: 16px; color: var(--text-faint); }
.nq-extrait { font-size: 12.5px; line-height: 17px; color: var(--text-soft); overflow-wrap: anywhere; }
.nq-extrait mark { background: var(--hl-date-bg); color: var(--hl-date-fg); border-radius: 4px; padding: 0 2px; margin: 0 -2px; font-weight: 600; }
.nq-aucun { padding: 9px 10px; font-size: 13px; color: var(--text-faint); }
/* N11 : tâches liées à la note, notes liées à la tâche ; une ligne par lien, titre en bouton, « ✕ » comme celui d'un tag. */
.nq-liees { min-width: 0; margin-top: 4px; }
/* #2563 (350) : au bureau, en bas de la colonne de gauche, sous la liste ; le titre replie la liste. */
#notes-vue .nq-gauche > .nq-liees { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
#notes-vue .nq-liees-replier { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer; }
#notes-vue .nq-liees-replier::before { content: '▾' / ''; color: var(--text-faint); }
#notes-vue .nq-liees-replier[aria-expanded="false"]::before { content: '▸' / ''; }
#notes-vue .nq-liee .chip-prio { margin-left: 4px; }
/* s363 (#2563) : dans la colonne étroite, drapeau, titre et « ✕ » sur une même ligne ; le titre long passe à la ligne
   dans sa colonne, projet et « Terminée » dessous. Colonne du drapeau gardée : les titres restent alignés. */
#notes-vue .nq-liee { display: grid; grid-template-columns: minmax(34px, auto) minmax(0, 1fr) auto; column-gap: 4px; align-items: start; }
#notes-vue .nq-liee > .chip-prio { grid-column: 1; justify-self: start; margin-top: 5px; }
#notes-vue .nq-liee > :is(.nq-liee-titre, .nq-liee-projet, .nq-liee-etat) { grid-column: 2; justify-self: start; }
#notes-vue .nq-liee > :is(.nq-liee-projet, .nq-liee-etat) { padding: 0 4px; }
#notes-vue .nq-liee > .nq-lien-retirer { grid-column: 3; grid-row: 1; margin-top: 2px; }
/* s372 : une tâche liée terminée se lit barrée, comme dans les listes. */
#notes-vue .nq-liee.faite > .nq-liee-titre { text-decoration: line-through; color: var(--text-faint); }
:is(.nq-liees-liste, .tf-notes-liees) { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
:is(.nq-liee, .tf-note) { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
:is(.nq-liee-titre, .tf-note-titre) { min-width: 0; min-height: 28px; padding: 2px 4px; border: 0; border-radius: 6px; background: none;
  color: var(--text); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
:is(.nq-liee-titre, .tf-note-titre):hover { background: var(--hover); text-decoration: underline; }
:is(.nq-liee-projet, .nq-liee-etat, .tf-note-projet) { font-size: 12px; color: var(--text-faint); }
:is(.nq-lien-retirer, .tf-note-retirer) { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px;
  margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-faint); font: inherit; cursor: pointer; }
:is(.nq-lien-retirer, .tf-note-retirer):hover { background: var(--hover); color: var(--text); }
/* N13 : historique à la place du corps, des pièces et des tâches liées ; une ligne par version, comme une entrée de la
   liste ; la version lue sous la liste, son corps dans le cadre de l'éditeur, sans barre. Couleurs par variables : clair et sombre. */
#notes-vue .nq-note[data-historique="1"] > :is(.tf-details, .nq-pieces, .nq-liees) { display: none; }
#notes-vue:has(> .nq-note[data-historique="1"]) .nq-liees { display: none; }
.nq-historique { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; margin-top: 4px; }
.nq-historique-retour { align-self: flex-start; }
.nq-versions { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.nq-version { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nq-version:hover { background: var(--hover); }
.nq-version[aria-current="true"] { background: var(--active-row); }
.nq-version-tete { font-size: 12.5px; line-height: 17px; color: var(--text-soft); }
.nq-version-courante { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--hl-person-bg); color: var(--hl-person-fg);
  font-size: 11.5px; font-weight: 600; line-height: 17px; }
.nq-version-apercu { font-size: 13px; line-height: 18px; color: var(--text); overflow-wrap: anywhere; }
.nq-version-lue { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--border); }
.nq-version-bandeau { margin: 0; font-size: 13px; color: var(--text-soft); }
.nq-version-titre { margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.nq-version-corps { align-self: stretch; min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); color: var(--text); }
/* Bouton principal des notes (N14), comme la fiche (.tf-actions .primary) : restauration et encart de conflit. */
#notes-vue .header-btn.primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
#notes-vue .nq-restaurer[aria-disabled="true"] { opacity: .55; cursor: default; }
.nq-bulle-vide { margin: 8px 4px 4px; font-size: 13px; color: var(--text-faint); }
.nq-gerer-bulle { display: flex; flex-direction: column; gap: 6px; }
.nq-gerer-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nq-gerer-nom { flex: 1; min-width: 0; min-height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-elev);
  color: var(--text); font: inherit; font-size: 13.5px; }
.nq-gerer-couleur { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border); border-radius: 7px; background: none; cursor: pointer; }
.nq-gerer-couleur .nq-point { width: 14px; height: 14px; }
.nq-gerer-suppr { min-height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--late-fg); font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; }
.nq-gerer-suppr:hover, .nq-gerer-couleur:hover { background: var(--hover); }
.nq-nuancier { flex-basis: 100%; }
/* N10 : « Sélectionner » à côté de « + Note » ; la barre de la sélection, collée en haut de la colonne, passe à la ligne
   dans ses 280 px ; en mode sélection, le rond d'une entrée (aria-hidden) se remplit quand elle est cochée. */
.nq-haut { display: flex; gap: 6px; margin: 0 0 8px; }
.nq-haut > .nq-nouvelle { flex: 1; width: auto; min-width: 0; margin: 0; }
.nq-selectionner, .nq-trier { flex: none; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: none;
  color: var(--text-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
:is(.nq-selectionner, .nq-trier):hover { background: var(--hover); color: var(--text); }
.nq-selectionner[aria-pressed="true"] { background: var(--active); border-color: var(--red); color: var(--red); }
.nq-sel { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 0 8px; padding: 6px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-elev); color: var(--text); font-size: 12.5px; }
.nq-sel-compte { flex: 1 0 100%; padding: 2px 4px 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nq-sel-btn { min-height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--text); font: inherit; white-space: nowrap; cursor: pointer; }
.nq-sel-btn:hover:not(:disabled) { background: var(--hover); }
.nq-sel-btn:disabled { color: var(--text-faint); cursor: default; }
.nq-sel-danger { color: var(--p1); }
.nq-sel-quitter { flex: none; width: 28px; height: 28px; margin-left: auto; border: 0; border-radius: 7px; background: var(--bg-mute);
  color: var(--text-soft); font: inherit; cursor: pointer; }
.nq-sel-quitter:hover { color: var(--text); }
.nq-sel button:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
/* Un clic coche : Maj+clic ne sélectionne pas de texte. */
#notes-vue[data-sel="1"] .nq-item { position: relative; padding-left: 34px; -webkit-user-select: none; user-select: none; }
.nq-rond { position: absolute; left: 9px; top: 11px; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--text-soft); border-radius: 50%; }
.nq-item[aria-pressed="true"] { background: var(--active); }
.nq-item[aria-pressed="true"] .nq-rond { border-color: var(--red); background: var(--red); box-shadow: inset 0 0 0 2px var(--bg-elev); }
#task-dialog .tf-etapes { margin: 0; padding: 0; list-style: none; }
#task-dialog .tf-etape { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
/* Contour de la case vide à 3:1 au moins sur le fond (WCAG 1.4.11, contour
   d'un contrôle) : --text-soft tient 5,74:1 en clair et 6,73:1 en sombre,
   quand --border-strong n'en tient que 1,36 et 1,57, et --p4 2,85 en clair. */
#task-dialog .tf-etape-case {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-top: 1px; padding: 0; border: 2px solid var(--text-soft); border-radius: 5px;
  background: var(--bg-elev); color: transparent; cursor: pointer;
}
#task-dialog .tf-etape-case:hover { border-color: var(--text); }
#task-dialog .tf-etape-case svg { width: 12px; height: 12px; }
#task-dialog .tf-etape-case[aria-checked="true"] { background: var(--hl-date-fg); border-color: var(--hl-date-fg); color: var(--bg-elev); }
/* Sous-tâches (spec 2026-10-14, 1) : le titre se modifie en place, sans
   cadre, barré à sa place une fois fait ; trop long, il finit par « … »
   hors focus (le titre entier est dans son attribut title). La croix paraît
   au survol et au focus, toujours au doigt, sans agrandir la ligne.
   « + Ajouter une sous-tâche » reste un lien à gauche, comme sur les
   maquettes, et non un bouton de toute la largeur du bloc. */
#task-dialog .tf-st-texte {
  flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; font-size: 14px; line-height: 20px; color: var(--text); text-overflow: ellipsis;
}
#task-dialog .tf-st-texte:focus { text-overflow: clip; }
#task-dialog #tf-st-ajouter { align-self: flex-start; }
#task-dialog .tf-etape.faite .tf-st-texte { text-decoration: line-through; color: var(--text-soft); }
#task-dialog .tf-st-suppr { width: 24px; height: 24px; margin: -2px 0; opacity: 0; }
#task-dialog .tf-etape:hover .tf-st-suppr,
#task-dialog .tf-st-suppr:focus-visible { opacity: 1; }
@media (hover: none) {
  #task-dialog .tf-st-suppr { opacity: 1; }
}
#task-dialog .tf-st-saisie { align-items: center; }
#task-dialog .tf-st-saisie .tf-st-texte { padding: 2px 8px; border: 1px solid var(--p3); border-radius: 6px; background: var(--bg-elev); }
#task-dialog .tf-st-aide { flex: none; font-size: 12px; color: var(--text-soft); }
/* Ajouts non enregistrés (réseau, serveur, session) : la ligne garde son
   titre en retrait, une case en pointillés (rien à cocher), « non
   enregistrée », « Réessayer » en lien et la croix toujours visible.
   « Sous-tâches indisponibles » prend la même allure. */
#task-dialog .tf-st-attente, #task-dialog .tf-st-indispo { display: flex; align-items: center; gap: 10px; padding: 4px 0; color: var(--text-soft); }
#task-dialog .tf-st-attente-case { flex: none; width: 18px; height: 18px; border: 2px dashed var(--text-soft); border-radius: 5px; }
#task-dialog .tf-st-attente-texte { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
#task-dialog .tf-st-attente-mention { flex: none; font-size: 12px; }
#task-dialog .tf-st-attente .tf-lien, #task-dialog .tf-st-indispo .tf-lien { flex: none; text-decoration: underline; text-underline-offset: 2px; }
#task-dialog .tf-st-attente .tf-st-suppr { opacity: 1; }
/* Tablette au doigt, plus large que le téléphone : ses cibles de 44 px (une
   croix de 24 px et une case de 18 px se manquaient), lignes espacées pour
   que deux cibles voisines ne se chevauchent pas. :where garde la
   spécificité des règles du téléphone, que la voiture dépasse. « Au doigt »
   se dit (hover: none), comme ailleurs : le pointeur grossier est réservé à
   la disposition voiture (ui/voiture.js). */
@media (hover: none) {
  #task-dialog :where(#tf-st-liste) .tf-etape, #task-dialog .tf-st-attente { gap: 12px; padding: 11px 0; }
  #task-dialog :where(#tf-st-liste) .tf-etape-case, #task-dialog .tf-st-attente-case { width: 22px; height: 22px; margin-top: 0; }
  #task-dialog :where(#tf-st-liste) .tf-etape-case::before { content: ''; position: absolute; inset: -13px; }
  #task-dialog .tf-st-suppr { width: 44px; height: 44px; margin: -11px 0; }
}
/* « Toutes les sous-tâches sont faites » : la région reste dans la page, vide
   et sans place, pour que son message soit annoncé quand il apparaît ; plein,
   la teinte verte des tâches abouties, le texte en couleur de texte (le vert
   de la palette sur sa teinte reste sous 4,5:1 en clair). */
#task-dialog .tf-etapes-fin:empty { margin-top: 0; }
#task-dialog .tf-etapes-fin:not(:empty) {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin-top: 8px; padding: 4px 4px 4px 10px;
  border-radius: 8px; background: var(--hl-date-bg); color: var(--text); font-size: 13px; font-weight: 600; cursor: default;
}
#task-dialog .tf-etapes-fin-ico { display: inline-flex; color: var(--hl-date-fg); }
#task-dialog .tf-etapes-fin-ico svg { width: 16px; height: 16px; }
#task-dialog .tf-etapes-fin .tf-lien { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#task-dialog .tf-etapes-fin .tf-lien:hover { background: var(--bg-elev); }
#task-dialog .tf-tabs { display: flex; gap: 22px; margin-top: 6px; border-bottom: 1px solid var(--border); }
#task-dialog .tf-tab-actif {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-bottom: -1px;
  border-bottom: 2px solid var(--text); font-size: 13px; font-weight: 600;
}
#task-dialog #tf-comment-count { color: var(--text-faint); font-weight: 500; }

/* Fiche de tâche : mobile */
@media (max-width: 768px) {
  #task-dialog {
    inset: 0; top: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
  }
  #task-dialog .tf-head { height: 56px; padding: 0 6px; }
  #task-dialog .tf-back { display: inline-flex; min-width: 0; flex: 0 1 auto; }
  /* Décision 5 : un nom de vue long tient sur une ligne, coupé par « … ». */
  #task-dialog #tf-back-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #task-dialog .tf-back svg { flex: none; }
  #task-dialog #tf-crumb, #task-dialog #tf-prev, #task-dialog #tf-next, #task-dialog #tf-close, #task-dialog #tf-agrandir { display: none; }
  #task-dialog .tf-num { height: 44px; min-width: 44px; padding: 0 8px; border-radius: 22px; }
  #task-dialog .tf-icon { width: 44px; height: 44px; border-radius: 50%; }
  #task-dialog .tf-body { padding: 14px 16px 16px; }
  #task-dialog #tf-content { font-size: 19px; line-height: 26px; }
  #task-dialog .tf-stage button { flex-direction: column; gap: 3px; height: 50px; font-size: 12.5px; }
  #task-dialog .tf-stage-ico, #task-dialog .tf-stage-ico svg { width: 17px; height: 17px; }
  #task-dialog .tf-fields { gap: 8px; }
  #task-dialog .tf-field {
    flex-direction: column; align-items: flex-start; justify-content: center; flex-wrap: wrap;
    min-height: 58px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 12px;
  }
  #task-dialog .tf-field-label { width: auto; font-size: 12px; }
  #task-dialog .tf-val { height: auto; padding: 0; font-size: 15px; }
  /* Toute la tuile est la cible : le bouton s'étend dessus. L'heure reste
     au-dessus, cliquable à part. */
  #task-dialog .tf-val::after { content: ''; position: absolute; inset: 0; }
  #task-dialog .tf-val.tf-val-sec { position: relative; z-index: 1; }
  #task-dialog .tf-val.tf-val-sec::after { content: none; }
  #task-dialog #tf-description, #task-dialog #tf-comment-input { font-size: 16px; }
  /* Détails et sous-tâches (spec 2026-10-06, 6.2) : éditeur et zone de texte
     au même texte mobile, boutons de la barre de 44 px, et des cases
     dessinées à 22 px dont la cible fait 44 px (22 moins deux bordures de 2 =
     18 de boîte de padding, plus 2 × 13), sans déborder sur la voisine :
     chacune garde 11 px au-dessus et au-dessous. */
  #task-dialog #tf-description, :is(#task-dialog, #notes-vue) .ed-texte { font-size: 16px; line-height: 22px; }
  /* Les boutons se partagent la largeur, 44 px de haut : à 44 px de
     large, Code et Lien sortaient du champ à 375 px, sans signe qu'il faille
     balayer. 24 px au moins, le minimum d'une cible (WCAG 2.5.8) : les douze
     boutons, comme les onze d'un tableau, tiennent dès 360 px (326 px de
     barre). Le champ de lien ouvert défile comme au bureau. */
  :is(#task-dialog, #notes-vue) .ed-barre { top: -14px; }
  :is(#task-dialog, #notes-vue) .ed-bouton { flex: 1 0 0; width: auto; min-width: 24px; height: 44px; }
  /* 16 px : sous ce corps, Safari iOS agrandit la page au focus du champ. */
  :is(#task-dialog, #notes-vue) .ed-lien input { height: 44px; font-size: 16px; }
  :is(#task-dialog, #notes-vue) .ed-texte li.ed-case { gap: 12px; padding: 11px 0; }
  :is(#task-dialog, #notes-vue) .ed-case > [role="checkbox"] { width: 22px; height: 22px; margin-top: 0; }
  :is(#task-dialog, #notes-vue) .ed-case > [role="checkbox"]::before { content: ''; position: absolute; inset: -13px; }
  #task-dialog .tf-etape { gap: 12px; padding: 11px 0; }
  #task-dialog .tf-etape-case { width: 22px; height: 22px; margin-top: 0; }
  #task-dialog .tf-etape-case::before { content: ''; position: absolute; inset: -13px; }
  #task-dialog .tf-st-texte { font-size: 16px; line-height: 22px; }
  #task-dialog .tf-st-suppr { margin: -11px 0; }
  /* Ligne non enregistrée : le titre sur toute la largeur, la mention, « Réessayer »
     et la croix dessous, alignés sur lui (serrés sur une ligne, il se lisait mot à mot). */
  #task-dialog .tf-st-attente, #task-dialog .tf-st-indispo { padding: 0; }
  #task-dialog .tf-st-attente { flex-wrap: wrap; column-gap: 12px; row-gap: 0; padding-top: 11px; }
  #task-dialog .tf-st-attente-case { width: 22px; height: 22px; }
  #task-dialog .tf-st-attente-texte { flex-basis: calc(100% - 34px); font-size: 16px; line-height: 22px; }
  #task-dialog .tf-st-attente-mention { margin-left: 34px; }
  #task-dialog .tf-st-attente .tf-st-suppr { margin-left: auto; }
  :is(#task-dialog #tf-attachments, #notes-vue .nq-pieces-liste) { grid-template-columns: 1fr; }
  #task-dialog .tf-composer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  #task-dialog .tf-composer-aide { display: none; }
  #task-dialog #tf-comment-send { height: 44px; }
  #task-dialog .tf-source-action { height: 44px; }
  /* Le rond reste dessiné à 24 px ; sa zone de clic, elle, fait 44 px
     (24 + 2 × 10), dans l'écart de 12 px qui le sépare du titre. */
  #task-dialog .tf-done::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
  :is(#task-dialog, #notes-vue) .tf-lien { min-height: 44px; padding: 0 12px; }
  /* Cibles tactiles de 44 px (les icônes ✕ restent visuellement petites). */
  #task-dialog .comment-del, :is(#task-dialog, #notes-vue) .attach-del {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  }
  /* Une pièce sans croix (suppression non permise) garde la hauteur d'une
     pièce avec : 44 px de cible + 16 de marge + 2 de bordure. */
  :is(#task-dialog, #notes-vue) .attachment { min-height: 62px; }
  /* Sélecteurs de la fiche en feuille basse (décision 3.4). popover.js pose
     left et top en style en ligne : !important les neutralise ici seulement. */
  /* La bulle d'un lien des Détails reste ancrée au lien : le clavier du
     téléphone, resté ouvert (décision 21), couvrirait une feuille basse. */
  #task-dialog .pop:not(:has(.ed-bulle-lien)) {
    position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0;
    width: 100vw; min-width: 0; max-width: 100vw; max-height: 70dvh; overflow-y: auto;
    border-radius: 18px 18px 0 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }
  #task-dialog .pop .pop-opt { min-height: 48px; font-size: 16px; }
  :is(#task-dialog, #notes-vue) .ed-bulle-lien .header-btn { min-height: 48px; font-size: 16px; }
  /* Notes de projet (N3) : rangée Tâches | Notes au doigt ; la note ouverte en plein écran (D15). */
  #onglets-projet [role="tab"] { min-height: 44px; }
  .nq-nouvelle { min-height: 44px; font-size: 16px; }
  .nq-verrouiller { min-height: 44px; }
  .nq-filtre-tag, .nq-filtre-effacer, .nq-gerer, .nq-ajout-tag, .nq-epingler { min-height: 44px; }
  .nq-tag-retirer { min-width: 44px; min-height: 44px; }
  .nq-lien-retirer, .tf-note-retirer { min-width: 44px; min-height: 44px; }
  .nq-liee-titre, .tf-note-titre { min-height: 44px; }
  .nq-selectionner, .nq-trier, .nq-sel-btn { min-height: 44px; font-size: 15px; }
  .nq-chercher, .nq-portee-btn { min-height: 44px; font-size: 16px; }
  .nq-sel-quitter { width: 44px; height: 44px; }
  /* Le témoin passe sous le titre plutôt que de le couper (recette N4). */
  .nq-tete { flex-wrap: wrap; row-gap: 2px; }
  .nq-tete > .nq-titre { flex-basis: 100%; }
  .nq-plein { position: fixed; inset: 0; z-index: 45; padding: 0 16px 28px; background: var(--bg-main); overflow-y: auto; }
  .nq-plein .nq-barre-haut { position: sticky; top: 0; z-index: 3; margin: 0 -16px; padding: 4px 8px 4px 4px; border-bottom: 1px solid var(--border); background: var(--bg-main); }
}
/* Carte Source sur un téléphone étroit (revue du lot 2, mineur 3) : le bouton
   passe sous le libellé, qui ne se coupe plus (« Mail de Claire D… » à 375 px). */
@media (max-width: 480px) {
  #task-dialog .tf-source { flex-wrap: wrap; }
  #task-dialog .tf-source-action { flex-basis: 100%; justify-content: center; }
}

/* Fiche de tâche : voiture */
/* <html data-voiture="1">. Après le bloc mobile : à largeur égale, la voiture
   l'emporte. */
[data-voiture="1"] #task-dialog { width: 64vw; }
[data-voiture="1"] #task-dialog #tf-agrandir { display: none; }
[data-voiture="1"] body.fiche-ouverte #main { margin-right: 64vw; }
[data-voiture="1"] #task-dialog .tf-head { height: 76px; }
[data-voiture="1"] #task-dialog .tf-icon { width: 60px; height: 60px; border-radius: 16px; background: var(--bg-mute); }
[data-voiture="1"] #task-dialog .tf-icon svg { width: 26px; height: 26px; }
[data-voiture="1"] #task-dialog .tf-crumb { height: 60px; padding: 0 14px; border-radius: 16px; font-size: 17px; }
/* Décision 8 : en conduisant, on ne copie pas un numéro ; masqué, il rend sa place à l'en-tête (et sort de la tabulation). */
[data-voiture="1"] #task-dialog .tf-num { display: none; }
/* Zone de clic du rond : 60 px (24 + 2 × 18) sans agrandir le rond dessiné ;
   l'écart avec le titre passe à 20 px pour qu'elle ne le recouvre pas. */
[data-voiture="1"] #task-dialog .tf-titre-ligne { gap: 20px; }
[data-voiture="1"] #task-dialog .tf-done::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; }
[data-voiture="1"] :is(#task-dialog, #notes-vue) .tf-lien { min-height: 60px; padding: 0 16px; font-size: 17px; }
[data-voiture="1"] #task-dialog #tf-content { font-size: 26px; line-height: 34px; }
[data-voiture="1"] #task-dialog .tf-stage { gap: 10px; padding: 0; background: none; }
[data-voiture="1"] #task-dialog .tf-stage button {
  flex-direction: row; gap: 10px; height: 72px; border-radius: 18px; font-size: 19px; background: var(--bg-mute);
}
[data-voiture="1"] #task-dialog .tf-stage button[aria-checked="true"] { background: var(--bg-elev); box-shadow: inset 0 0 0 2px var(--text); }
[data-voiture="1"] #task-dialog .tf-stage-ico, [data-voiture="1"] #task-dialog .tf-stage-ico svg { width: 26px; height: 26px; }
[data-voiture="1"] #task-dialog .tf-fields { grid-template-columns: 1fr; }
/* Au-delà de 768 px le bloc mobile ne joue plus : sans retour à la ligne, les
   raccourcis écrasaient la date et sortaient du panneau (spec 2026-10-14, 8). */
[data-voiture="1"] #task-dialog .tf-field { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 64px; border: 0; padding: 0; gap: 12px; }
[data-voiture="1"] #task-dialog .tf-field-label { width: 130px; font-size: 17px; }
[data-voiture="1"] #task-dialog .tf-val { height: 60px; padding: 0 12px; font-size: 19px; }
[data-voiture="1"] #task-dialog .tf-val::after { content: none; }
[data-voiture="1"] #task-dialog .tf-raccourci {
  height: 60px; padding: 0 20px; border: 1px solid var(--border-strong); border-radius: 16px;
  background: var(--bg-elev); color: var(--text); font-size: 18px;
}
[data-voiture="1"] #task-dialog .tf-source { padding: 14px 16px; border-radius: 18px; }
[data-voiture="1"] #task-dialog .tf-source-label { font-size: 19px; }
[data-voiture="1"] #task-dialog .tf-source-action { height: 60px; padding: 0 20px; font-size: 17px; }
[data-voiture="1"] #task-dialog .comment-text { font-size: 18px; line-height: 26px; }
[data-voiture="1"] #task-dialog #tf-comment-send { height: 60px; padding: 0 22px; font-size: 18px; }
/* QA visuelle L14 : les petits textes hérités du bureau (12-13 px) restent
   illisibles au volant. */
[data-voiture="1"] #task-dialog .tf-source-type { font-size: 15px; }
[data-voiture="1"] #task-dialog .tf-source-meta { font-size: 15px; }
[data-voiture="1"] #task-dialog #tf-comment-input { font-size: 18px; line-height: 26px; }
[data-voiture="1"] #task-dialog .tf-composer-aide { font-size: 15px; }
[data-voiture="1"] #task-dialog .tf-composer-etat { font-size: 15px; }
[data-voiture="1"] :is(#task-dialog, #notes-vue) .tf-section-titre { font-size: 16px; }
[data-voiture="1"] #task-dialog .tf-tab-actif { font-size: 16px; }
[data-voiture="1"] #task-dialog .comment-head { font-size: 15px; }
/* Détails en voiture (spec 2026-10-06, 6.2 ; 2026-10-14, 4) : texte de 18 px,
   pas de barre, cases dessinées à 30 px et sensibles sur 60 (30 moins deux
   bordures de 3 = 24 de boîte de padding, plus 2 × 18), dans les 15 px que
   chaque case garde autour. */
[data-voiture="1"] #task-dialog #tf-description,
[data-voiture="1"] :is(#task-dialog, #notes-vue) .ed-texte { font-size: 18px; line-height: 26px; }
[data-voiture="1"] :is(#task-dialog, #notes-vue) .tf-details .ed-barre { display: none; }
[data-voiture="1"] :is(#task-dialog, #notes-vue) .ed-video button { min-height: 60px; padding: 0 18px; font-size: 17px; }
[data-voiture="1"] :is(#task-dialog, #notes-vue) .ed-texte li.ed-case { gap: 16px; padding: 15px 0; }
[data-voiture="1"] :is(#task-dialog, #notes-vue) .ed-case > [role="checkbox"] { width: 30px; height: 30px; margin-top: -2px; border-width: 3px; border-radius: 8px; }
[data-voiture="1"] :is(#task-dialog, #notes-vue) .ed-case > [role="checkbox"] svg { width: 18px; height: 18px; }
[data-voiture="1"] :is(#task-dialog, #notes-vue) .ed-case > [role="checkbox"]::before { content: ''; position: absolute; inset: -18px; }
[data-voiture="1"] #onglets-projet [role="tab"] { min-height: 48px; }
[data-voiture="1"] .nq-plein { position: fixed; inset: 0; z-index: 45; padding: 0 16px 28px; background: var(--bg-main); overflow-y: auto; }
[data-voiture="1"] .nq-plein .nq-barre-haut { position: sticky; top: 0; z-index: 3; min-height: 64px; margin: 0 -16px; padding: 4px 8px 4px 4px;
  border-bottom: 1px solid var(--border); background: var(--bg-main); }
[data-voiture="1"] .nq-retour { min-height: 48px; font-size: 19px; }
[data-voiture="1"] .nq-nouvelle { min-height: 48px; font-size: 19px; }
[data-voiture="1"] .nq-verrouiller { min-height: 48px; font-size: 19px; }
[data-voiture="1"] :is(.nq-filtre-tag, .nq-filtre-effacer, .nq-gerer, .nq-ajout-tag, .nq-epingler) { min-height: 48px; font-size: 19px; }
[data-voiture="1"] .nq-tag-retirer { min-width: 48px; min-height: 48px; }
[data-voiture="1"] :is(.nq-lien-retirer, .tf-note-retirer) { min-width: 48px; min-height: 48px; }
[data-voiture="1"] :is(.nq-liee-titre, .tf-note-titre) { min-height: 48px; font-size: 19px; }
[data-voiture="1"] :is(.nq-selectionner, .nq-trier, .nq-sel-btn) { min-height: 48px; font-size: 19px; }
[data-voiture="1"] :is(.nq-chercher, .nq-portee-btn) { min-height: 48px; font-size: 19px; }
[data-voiture="1"] .nq-sel-quitter { width: 48px; height: 48px; }
/* La croix d'une pièce de note au doigt en voiture, même hors de la largeur du téléphone. */
[data-voiture="1"] #notes-vue .attach-del { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
[data-voiture="1"] #task-dialog #tf-st-avancement { font-size: 16px; }
[data-voiture="1"] #task-dialog .tf-etape { gap: 16px; padding: 15px 0; }
[data-voiture="1"] #task-dialog .tf-etape-case { width: 30px; height: 30px; margin-top: -2px; border-width: 3px; border-radius: 8px; }
[data-voiture="1"] #task-dialog .tf-etape-case svg { width: 18px; height: 18px; }
[data-voiture="1"] #task-dialog .tf-etape-case::before { content: ''; position: absolute; inset: -18px; }
[data-voiture="1"] #task-dialog .tf-st-texte { font-size: 18px; line-height: 26px; }
[data-voiture="1"] #task-dialog .tf-st-suppr { margin: -15px 0; }
[data-voiture="1"] #task-dialog .tf-etapes-fin:not(:empty) { font-size: 17px; }

/* ---------- Mise en valeur des noms (spec 2026-10-01, option B « Surligneur ») ----------
   Un trait de surligneur sous le bas du mot : le texte garde sa couleur, donc
   tout son contraste. Les couleurs des deux thèmes sont des variables. */
:root {
  --mv-personne: #fbd99a;
  --mv-organisation: #cfe0fb;
  --mv-montant: #c4e6ec;
  --mv-moi-fond: #f9cd7f; --mv-moi-texte: #3d2200;
  --mv-lien-trait: rgba(32, 32, 32, .4);
  --mv-anneau: rgba(36, 111, 224, .55);
}
[data-theme="dark"] {
  --mv-personne: #5a4520;
  --mv-organisation: #2a3d5e;
  --mv-montant: #16424a;
  --mv-moi-fond: #e9b866; --mv-moi-texte: #1c1b1a;
  --mv-lien-trait: rgba(236, 234, 231, .45);
  --mv-anneau: rgba(147, 184, 242, .7);
}
.mv {
  font: inherit; color: inherit; line-height: inherit; text-align: inherit;
  margin: 0; border: 0; padding: 0 2px; border-radius: 2px; font-weight: 500;
  background: linear-gradient(180deg, transparent 56%, var(--mv-trait, transparent) 56%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
button.mv { cursor: pointer; }
.mv-personne, .mv-membre { --mv-trait: var(--mv-personne); }
.mv-organisation { --mv-trait: var(--mv-organisation); }
.mv-montant { --mv-trait: var(--mv-montant); font-variant-numeric: tabular-nums; }
.mv-moi { background: var(--mv-moi-fond); color: var(--mv-moi-texte); font-weight: 600; padding: 0 4px; border-radius: 3px; }
button.mv:hover { filter: saturate(1.35) brightness(.97); }
button.mv:focus-visible, button.mv[aria-expanded="true"] { outline: 2px solid var(--mv-anneau); outline-offset: 1px; }
.mv-avatar {
  display: inline-block; width: 15px; height: 15px; margin-right: 4px; border-radius: 50%;
  color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
  vertical-align: 1px; object-fit: cover;
}
.mv-avatar::before { content: attr(data-initiale); }
.mv-lien { color: inherit; text-decoration: underline; text-decoration-color: var(--mv-lien-trait); text-underline-offset: 2.5px; overflow-wrap: anywhere; }
.mv-lien .mv-ico { width: 11px; height: 11px; margin-left: 2px; vertical-align: -1px; color: var(--text-soft); }
.mv-email .mv-ico { width: 12px; height: 12px; margin-left: 3px; vertical-align: -2px; }
/* Une tâche terminée perd ses couleurs : le texte barré reste pâle. */
.task.done .mv { background: none; color: inherit; font-weight: inherit; padding: 0; }
.task.done .mv-avatar { opacity: .5; }

/* Fiche d'un nom (popover) ; sous 768 px, une feuille au bas de l'écran. */
.mv-fiche { width: 270px; max-width: calc(100vw - 40px); padding: 6px; display: flex; flex-direction: column; gap: 10px; }
.mv-fiche-tete { display: flex; align-items: center; gap: 10px; }
.mv-fiche-rond {
  width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
}
.mv-fiche-rond svg { width: 17px; height: 17px; }
.mv-fiche-rond img { width: 100%; height: 100%; object-fit: cover; }
.mv-rond-personne { background: var(--hl-person-bg); color: var(--tri-texte); }
.mv-rond-moi { background: var(--mv-moi-fond); color: var(--mv-moi-texte); }
.mv-rond-organisation { background: var(--hl-project-bg); color: var(--hl-project-fg); }
.mv-rond-membre { color: #fff; }
.mv-fiche-nom { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.mv-fiche-origine { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-soft); }
.mv-fiche-voir {
  height: 36px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--border-strong); border-radius: 9px; background: var(--bg-elev);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text);
}
.mv-fiche-voir:hover, .mv-fiche-action:hover { background: var(--hover); }
.mv-fiche-voir svg, .mv-fiche-action svg { width: 16px; height: 16px; flex: none; }
.mv-fiche-corrections { display: flex; flex-direction: column; border-top: 1px solid var(--border); padding-top: 6px; }
.mv-fiche-action {
  height: 34px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 8px;
  background: none; padding: 0 6px; font: inherit; font-size: 13.5px; color: var(--text); text-align: left;
}
.mv-fiche-action svg { color: var(--text-soft); }
.mv-fiche-hash { width: 16px; text-align: center; font-weight: 700; }
@media (max-width: 768px) {
  .pop.mv-feuille {
    position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0;
    max-width: none; border-radius: 18px 18px 0 0; padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .pop.mv-feuille .mv-fiche { width: auto; max-width: none; }
  .pop.mv-feuille .mv-fiche-voir, .pop.mv-feuille .mv-fiche-action { height: 48px; font-size: 15px; }
}

/* Rubrique « Mise en valeur » des Réglages. */
.mv-apercu { font-size: 14px; }
.mv-ajouts-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mv-ajouts-titre { width: 110px; font-size: 12.5px; color: var(--text-soft); }
.mv-puce { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px 0 10px; border-radius: 14px; font-size: 13px; font-weight: 500; }
.mv-puce-personne { background: var(--hl-person-bg); color: var(--tri-texte); }
.mv-puce-organisation { background: var(--hl-project-bg); color: var(--hl-project-fg); }
.mv-puce-jamais { background: var(--bg-mute); color: var(--text-soft); }
.mv-puce-x { width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: inherit; }
.mv-puce-x:hover { background: rgba(0, 0, 0, .08); }
.mv-puce-x svg { width: 12px; height: 12px; }
.mv-ajout { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.mv-ajout input { flex: 1 1 200px; min-width: 0; }
/* La règle générale des dialogues met les listes à 100 % : ici la liste garde
   sa largeur naturelle, sinon elle écrase le champ « Ajouter un nom ». */
.mv-ajout select { flex: none; width: auto; }
@media (max-width: 768px) {
  /* Sur téléphone, le champ prend sa ligne ; la liste et le bouton suivent. */
  .mv-ajout input { flex-basis: 100%; }
  .mv-ajout select { flex: 1; }
}
.mv-ajout-btn { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: #d23f31; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; }
.mv-ajout-btn:hover { background: #b8352a; }
.mv-candidat-n { color: var(--text-soft); font-size: 12.5px; font-weight: 400; }
.mv-candidat-extrait { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-classer { height: 30px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-elev); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); }
.mv-classer-personne { background: var(--hl-person-bg); border-color: transparent; color: var(--tri-texte); }
.mv-classer-organisation { background: var(--hl-project-bg); border-color: transparent; color: var(--hl-project-fg); }
.mv-classer-ignorer { border-color: transparent; background: none; color: var(--text-soft); font-weight: 400; }
@media (max-width: 768px) {
  .mv-candidat { flex-wrap: wrap; }
  .mv-candidat .set-v { margin-left: 0; }
}

/* =====================================================================
   Messagerie (spec 2026-10-03, lot 1) : fiche, réglage d'une boîte, revue.
   ---------------------------------------------------------------------
   Deux écarts VOULUS par rapport au reste de l'app, limités à ces écrans par
   des variables locales : l'accent des boutons pleins et des textes d'accent
   est assombri (#c43d30 tient 4,5:1 sur blanc, le rouge de l'app #dc4c3e
   seulement 4,1:1), et le gris des métadonnées passe de #999 (2,8:1) à
   #767676 (4,5:1). Tout le reste vient des variables de l'app.
   ===================================================================== */
.mail-ecran {
  --mail-accent: #c43d30;
  --mail-accent-survol: #ad3428;
  --mail-accent-texte: #c43d30;
  --mail-faint: #767676;
  --mail-soft: #5f5f5f;
  --mail-carte: var(--set-card-border, #ebe7e2);
  --mail-ok-bg: #e1f2e8;
  --mail-ok-fg: #0a6b36;
  --mail-warn-bg: #fcecd2;
  --mail-warn-fg: #7a4800;
}
[data-theme="dark"] .mail-ecran {
  --mail-accent-texte: #f2988a;
  --mail-faint: #9a958f;
  --mail-soft: #c2beb9;
  --mail-carte: #3a3735;
  --mail-ok-bg: #1d3a2a;
  --mail-ok-fg: #7fd6a2;
  --mail-warn-bg: #40331b;
  --mail-warn-fg: #ecc078;
}
.mail-ecran .header-btn.primary,
#settings-dialog .mail-ecran .header-btn.primary {
  background: var(--mail-accent); border-color: var(--mail-accent); color: #fff; font-weight: 600;
}
.mail-ecran .header-btn.primary:hover,
#settings-dialog .mail-ecran .header-btn.primary:hover { background: var(--mail-accent-survol); filter: none; }
.mail-ecran :is(button, select, input, a):focus-visible { outline: 2px solid var(--mail-accent-texte); outline-offset: 2px; }
.mail-aide { margin: 0; font-size: 12.5px; color: var(--mail-soft); line-height: 1.45; }
.mail-lbl { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.mail-erreur { margin: 0; font-size: 13px; color: var(--late-fg); }
/* Lien discret vers la page de confidentialité (fiche, mise en garde d'une
   boîte pro) : la couleur du texte qui l'entoure, souligné. */
.mail-lien-conf { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.mail-lien-conf:hover { color: var(--mail-accent-texte); }
/* Même lien discret dans une aide : la rubrique de l'administration nommée à
   l'administrateur (relecture finale du lot 2, mineur 10). Il peut passer à
   la ligne : il est long. */
.mail-aide a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mail-aide a:hover { color: var(--mail-accent-texte); }

/* Réglage d'une boîte : dialogue de 560 px, plein écran sur téléphone. */
#mail-boite { width: 560px; max-width: calc(100vw - 32px); }
#mail-boite form { padding: 0; gap: 0; }
.mail-boite-tete { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 16px; border-bottom: 1px solid var(--border); }
.mail-boite-titre-ligne { display: flex; align-items: center; gap: 10px; }
.mail-coche {
  width: 32px; height: 32px; border-radius: 16px; flex: none; display: inline-flex; align-items: center;
  justify-content: center; background: var(--mail-ok-bg); color: var(--mail-ok-fg);
}
.mail-coche svg { width: 18px; height: 18px; }
.mail-boite-adresse { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.mail-boite-corps { display: flex; flex-direction: column; gap: 20px; padding: 18px 24px; }
.mail-champ { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
dialog .mail-champ { font-size: 13.5px; color: var(--text); }
.mail-champ select { height: 40px; }
.mail-seg { display: flex; gap: 4px; padding: 4px; background: var(--bg-mute); border-radius: 10px; }
.mail-seg-btn {
  flex: 1; min-height: 44px; border: 0; border-radius: 7px; background: transparent; color: var(--text-soft);
  font-family: inherit; font-size: 13.5px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; cursor: pointer;
}
/* Le sous-libellé garde la couleur pleine du bouton : atténué, il tombait à
   3,7:1 sur le fond du segment (5,0:1 sans). */
.mail-seg-btn span { font-size: 11.5px; font-weight: 500; }
.mail-seg-btn[aria-pressed="true"] { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
/* En sombre, --bg-elev est plus foncé que le fond du segment : la pastille
   choisie paraissait enfoncée. Elle prend un ton plus clair que le fond. */
[data-theme="dark"] .mail-seg-btn[aria-pressed="true"] { background: var(--border-strong); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.mail-note {
  display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.45;
  background: var(--tri-fond); border: 1px solid var(--tri-bord); color: var(--tri-texte);
}
.mail-note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
dialog label.mail-option {
  flex-direction: row; align-items: flex-start; gap: 10px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--mail-carte); border-radius: 10px; background: var(--bg-elev); color: var(--text); font-size: 13.5px;
}
dialog label.mail-option.choisie { border-color: var(--mail-accent-texte); }
dialog label.mail-option input { margin-top: 2px; width: auto; accent-color: var(--mail-accent); }
.mail-option-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mail-option-txt strong { font-weight: 600; }
.mail-depuis { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
dialog .mail-depuis input[type="date"] { width: auto; height: 36px; }
.mail-estimation { font-size: 12.5px; font-weight: 600; color: var(--text); }
.mail-estimation.mail-estimation-echec { flex-basis: 100%; font-weight: 500; color: var(--late-fg); }
.mail-boite-pied { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border); }
.mail-boite-pied .header-btn { min-height: 40px; padding: 0 16px; }
/* Sur téléphone, la feuille commune à tous les dialogues (style.css,
   « Dialogues en feuilles », même seuil de 768 px) : pleine largeur. */
@media (max-width: 768px) {
  #mail-boite { width: 100vw; max-width: 100vw; }
  /* Pied collant : la feuille défile (92 % de la hauteur au plus), et
     « Enregistrer » reste à portée du pouce, quelle que soit la hauteur du
     réglage. */
  .mail-boite-pied {
    position: sticky; bottom: 0; z-index: 1; background: var(--bg-elev);
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .mail-boite-pied .header-btn { flex: 1; min-height: 48px; }
}

/* Revue de l'essai : large, plein écran sur téléphone. */
#mail-revue { width: 1240px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); background: var(--bg-main); }
.mail-revue-cadre { display: flex; flex-direction: column; gap: 20px; padding: 24px 28px 32px; }
.mail-revue-tete { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.mail-revue-titres { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; min-width: 0; }
.mail-revue-titres h2 { font-size: 22px; }
.mail-revue-retour {
  align-self: flex-start; border: 0; background: none; padding: 0; color: var(--mail-accent-texte);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.mail-revue-retour::before { content: '‹ '; }
dialog label.mail-revue-filtre { font-size: 12px; font-weight: 600; color: var(--mail-soft); }
dialog label.mail-revue-filtre select { min-width: 220px; height: 36px; font-weight: 400; }
.mail-revue-etat:empty { display: none; }
.mail-revue-etat { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px;
  border: 1px solid var(--mail-carte); border-radius: 12px; background: var(--bg-elev); }
/* Pas les petites capitales grises de « dialog h3 » (rubriques des
   Réglages) : un titre d'état se lit comme une phrase. */
.mail-revue-etat h3 { margin: 0; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--text); }
.mail-revue-etat .mail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Sous « Lancer un passage », sa raison quand il est grisé (comme dans la
   fiche, le bouton garde l'apparence grisée du navigateur). */
.mail-lancer-etat { flex-basis: 100%; }
.mail-num { font-variant-numeric: tabular-nums; }
/* Un vrai <table> (lecteurs d'écran), aux colonnes de la maquette :
   1,1 / 1 / 1 / 0,8 de la largeur. */
.mail-comparatif { background: var(--bg-elev); border: 1px solid var(--mail-carte); border-radius: 12px; overflow: hidden; }
.mail-comparatif:empty, .mail-tuiles:empty { display: none; }
.mail-cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mail-cmp-table col:nth-child(1) { width: 28.205%; }
.mail-cmp-table col:nth-child(2), .mail-cmp-table col:nth-child(3) { width: 25.641%; }
.mail-cmp-cell {
  padding: 12px 18px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums;
  text-align: left; vertical-align: top; font-weight: inherit;
}
.mail-cmp-tete { border-top: 0; }
.mail-cmp-tete strong, .mail-cmp-tete span { display: block; }
.mail-cmp-tete span { margin-top: 2px; }
.mail-cmp-tete strong { font-size: 15px; }
.mail-cmp-tete span, .mail-cmp-note { font-size: 12px; color: var(--mail-soft); }
.mail-cmp-lib { font-size: 13.5px; color: var(--mail-soft); }
.mail-cmp-val { font-size: 20px; font-weight: 700; }
.mail-cmp-val.petit { font-size: 15px; font-weight: 600; }
.mail-cmp-val.mail-cmp-pale { color: var(--mail-faint); }
.mail-cmp-val .mail-cmp-note { font-weight: 500; }
.mail-cmp-ecart { font-size: 13px; color: var(--mail-soft); }
.mail-ton { display: inline-block; padding: 3px 9px; border-radius: 999px; font-weight: 700; }
.mail-ton-ok { background: var(--mail-ok-bg); color: var(--mail-ok-fg); }
.mail-ton-alerte { background: var(--late-bg); color: var(--late-fg); }
.mail-cmp-val.mail-ton-texte-alerte { color: var(--late-fg); }
.mail-tuiles { display: none; gap: 8px; }
.mail-tuile-stat { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg-elev); border: 1px solid var(--mail-carte); }
.mail-tuile-stat span:first-child { font-size: 12px; color: var(--mail-soft); }
.mail-tuile-stat strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.mail-tuile-stat strong.mail-alerte { color: var(--late-fg); }
.mail-revue-barre { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mail-filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.mail-filtre {
  min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text);
}
.mail-filtre[aria-pressed="true"] { background: var(--text); color: var(--bg-main); border-color: var(--text); }
.mail-progres { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.mail-progres-piste { flex: 1; height: 8px; border-radius: 4px; background: var(--load-track); overflow: hidden; }
.mail-progres-barre { height: 100%; width: 0; background: var(--hl-date-fg); }
#mail-revue-compte { font-size: 13px; font-weight: 600; white-space: nowrap; }
.mail-raccourcis { margin: 0; font-size: 12px; color: var(--mail-soft); display: flex; align-items: center; gap: 5px; }
.mail-raccourcis kbd {
  display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 4px; text-align: center;
  font: 600 11.5px ui-monospace, Menlo, monospace; border: 1px solid var(--border-strong); border-bottom-width: 3px; background: var(--bg-elev);
}
.mail-revue-liste { list-style: none; margin: 0; padding: 0; background: var(--bg-elev); border: 1px solid var(--mail-carte);
  border-radius: 12px; overflow: hidden; }
.mail-revue-liste:empty { display: none; }
.mail-ligne {
  display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(0, 1.8fr) minmax(150px, 1fr) auto; gap: 18px; align-items: center;
  padding: 14px 18px; border-top: 1px solid var(--border);
}
.mail-ligne:first-child { border-top: 0; }
.mail-ligne:focus { outline: none; }
.mail-ligne:focus-visible, .mail-ligne.mail-ligne-active { box-shadow: inset 3px 0 0 var(--mail-accent-texte); background: var(--hover); }
.mail-ligne-mail, .mail-ligne-tache { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mail-ligne-de { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mail-de { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-objet { font-size: 12.5px; color: var(--mail-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Date et boîte sur une ligne : la boîte (son type, ou son adresse) se
   coupe en fin de ligne, jamais au milieu d'une adresse. */
.mail-meta { display: flex; gap: .3em; min-width: 0; font-size: 11.5px; color: var(--mail-faint); white-space: nowrap; }
.mail-meta-quand { flex: none; }
.mail-meta-boite { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mail-role { flex: none; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.mail-role-direct { background: var(--hl-project-bg); color: var(--hl-project-fg); }
.mail-role-copie { background: var(--hl-recur-bg); color: var(--hl-recur-fg); }
.mail-role-liste { background: var(--hl-est-bg); color: var(--hl-est-fg); }
.mail-tache { font-size: 14px; font-weight: 600; }
.mail-raison { font-size: 12.5px; color: var(--mail-soft); }
.mail-echeance { align-self: flex-start; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--hl-date-bg); color: var(--hl-date-fg); }
/* Puces d'une tâche proposée : « Pour l'équipe » (lot 3), puis l'échéance. Le
   texte de « Pour l'équipe » est --tri-texte, comme celui des autres puces sur
   le fond « personne » : --hl-person-fg n'y tient que 4,1:1 en clair. */
.mail-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-pour-equipe { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; background: var(--hl-person-bg); color: var(--tri-texte); }
.mail-pour-equipe svg { width: 13px; height: 13px; flex: none; }
.mail-ecartee { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; font-size: 12px;
  background: var(--tri-fond); border: 1px solid var(--tri-bord); color: var(--tri-texte); }
.mail-gardee { font-size: 12px; color: var(--mail-faint); }
.mail-ligne-actions { display: flex; gap: 6px; justify-content: flex-end; }
.mail-marque {
  min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong);
  background: var(--bg-elev); color: var(--text);
}
.mail-marque svg { width: 14px; height: 14px; }
.mail-marque-utile[aria-pressed="true"] { background: var(--mail-ok-bg); color: var(--mail-ok-fg); border-color: var(--mail-ok-fg); }
.mail-marque-bruit[aria-pressed="true"] { background: var(--late-bg); color: var(--late-fg); border-color: var(--late-fg); }
.mail-revue-note { margin: 0; font-size: 12px; color: var(--mail-faint); }
/* Sur téléphone (seuil des feuilles de dialogue, 768 px) : la revue occupe
   tout l'écran, le comparatif se résume en trois tuiles et chaque tâche
   devient une carte aux boutons de 48 px. */
@media (max-width: 768px) {
  #mail-revue { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .mail-revue-cadre { padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); gap: 14px; }
  /* En-tête resserré, pour que la première tâche remonte : « ‹ Messagerie »
     (44 px de haut, cible tactile) et le titre sur une ligne, la phrase
     d'aide masquée, Boîte et Période côte à côte. */
  .mail-revue-tete { align-items: stretch; gap: 12px 8px; }
  .mail-revue-titres { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  .mail-revue-titres .mail-aide { display: none; }
  .mail-revue-retour { min-height: 44px; display: inline-flex; align-items: center; gap: .25em; }
  dialog label.mail-revue-filtre { flex: 1 1 0; min-width: 0; }
  dialog label.mail-revue-filtre select { min-width: 0; width: 100%; padding-left: 8px; padding-right: 4px; }
  .mail-comparatif, .mail-raccourcis { display: none; }
  .mail-tuiles:not(:empty) { display: flex; }
  .mail-revue-liste { background: none; border: 0; display: flex; flex-direction: column; gap: 10px; }
  .mail-ligne { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px;
    border: 1px solid var(--mail-carte); border-radius: 12px; background: var(--bg-elev); }
  .mail-ligne:first-child { border-top: 1px solid var(--mail-carte); }
  .mail-tache { font-size: 16px; }
  .mail-objet, .mail-ligne-regle.gardee { display: none; }
  .mail-ligne-actions { justify-content: stretch; }
  .mail-marque { flex: 1; min-height: 48px; justify-content: center; font-size: 15px; border-radius: 10px; }
}

/* Fiche Messagerie : état d'ensemble, boîtes, évaluation, liste B. */
.mail-fiche-etat { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.mail-fiche-etat .conn-health { margin: 0; }
.mail-puce {
  display: inline-flex; align-items: center; flex: none; font-size: 11.5px; font-weight: 600; line-height: 18px;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap; background: var(--bg-mute); color: var(--mail-soft);
}
.mail-puce-pro { background: var(--hl-project-bg); color: var(--hl-project-fg); }
.mail-puce-perso { background: var(--hl-date-bg); color: var(--hl-date-fg); }
.mail-puce-alerte { background: var(--mail-warn-bg); color: var(--mail-warn-fg); }
/* Puces de MODE (essai, réel), sur chaque boîte et en tête de la fiche : en
   contour, sans fond, pour ne se confondre ni avec le profil (« Perso » avait
   le même vert que « Réel ») ni avec un état. Le contour est une ombre
   intérieure : la puce garde la taille des autres. Texte (essai, réel) :
   7,6:1 et 6,6:1 sur blanc, 8,7:1 et 8,4:1 sur le fond sombre des cartes. */
.mail-puce-essai { background: transparent; color: var(--mail-warn-fg); box-shadow: inset 0 0 0 1px currentColor; }
.mail-puce-reel { background: transparent; color: var(--mail-ok-fg); box-shadow: inset 0 0 0 1px currentColor; }
/* Lot 5 : brouillons autorisés, dans la teinte des récurrences (5,5:1 sur
   son fond clair, 6,5:1 en sombre), distincte du profil et de l'état. */
.mail-puce-brouillons { background: var(--hl-recur-bg); color: var(--hl-recur-fg); }
.mail-retour { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.45;
  background: var(--late-bg); color: var(--late-fg); }
.mail-carte-etat { align-items: flex-start; }
.mail-carte-titre { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
/* Entraînement des modèles coupé (vérification OAuth de Google, 2026-10-08).
   Exigé, l'encart se voit : fond et filet d'alerte de la fiche (texte à
   14:1 en clair, 10:1 en sombre ; erreur --late-fg à 5,0:1 et 5,6:1).
   Confirmé, il reste lisible mais discret : fond de carte, filet vert, texte
   atténué (--mail-soft à 6,4:1 et 7,9:1). Au doigt, la case et le lien
   prennent 44 px de haut. */
.mail-entrainement {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--mail-warn-fg); border-left-width: 4px; border-radius: 10px;
  background: var(--mail-warn-bg); color: var(--text);
}
.mail-entrainement[hidden] { display: none; }
.mail-entrainement-titre { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--text); }
.mail-entrainement p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); }
.mail-entrainement .mail-erreur { color: var(--late-fg); }
.mail-entrainement .mail-erreur:empty { display: none; }
.mail-entrainement-chemin a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.claude-entrainement a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* En ligne et en couleur pleine : `dialog label` (colonne, gris secondaire)
   passait la case au-dessus de son libellé (QA Chromium). */
.mail-entrainement-case {
  display: flex; flex-direction: row; align-items: flex-start; gap: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer;
}
.mail-entrainement-case input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--mail-accent); }
.mail-entrainement.est-confirme {
  gap: 6px; padding: 12px 14px; border-color: var(--mail-carte); border-left-color: var(--mail-ok-fg);
  background: var(--bg-elev);
}
.mail-entrainement.est-confirme .mail-entrainement-titre { font-size: 13.5px; }
.mail-entrainement.est-confirme p:not(.mail-erreur) { font-size: 12.5px; color: var(--mail-soft); }
.mail-entrainement.est-confirme .mail-entrainement-case { font-size: 13px; font-weight: 500; }
@media (hover: none) {
  .mail-entrainement-case { min-height: 44px; align-items: center; }
  .mail-entrainement-case input { margin-top: 0; }
  /* Le lien de l'encart sur sa propre ligne : en ligne dans le texte, ses
     44 px creusaient un interligne au milieu de la phrase. */
  .mail-entrainement-chemin a { display: flex; width: fit-content; align-items: center; min-height: 44px; }
  /* Dans le rappel de la carte du jeton, la zone de toucher s'élargit à
     44 px sans creuser l'interligne : la boîte de marge d'un inline-block
     garde la hauteur de la ligne. */
  .claude-entrainement a { display: inline-block; padding: 13px 0; margin: -13px 0; }
}
.mail-faible { color: var(--mail-faint); }
.mail-actions { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.mail-compte { font-size: 11px; font-weight: 700; letter-spacing: 0; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-mute); color: var(--mail-soft); }
/* Sur le fond des Réglages (#faf9f7), --mail-faint tombe à 4,3:1 : à 11 px,
   le gris plus soutenu. */
.mail-cap-note { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mail-soft); }
.mail-tuile {
  width: 36px; height: 36px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-mute); color: var(--mail-faint);
}
.mail-tuile svg { width: 18px; height: 18px; }
.mail-tuile-pro { background: var(--hl-project-bg); color: var(--hl-project-fg); }
.mail-tuile-perso { background: var(--hl-date-bg); color: var(--hl-date-fg); }
.mail-tuile-alerte { background: var(--mail-warn-bg); color: var(--mail-warn-fg); }
.mail-tuile-grande { width: 44px; height: 44px; border-radius: 12px; }
.mail-tuile-grande svg { width: 22px; height: 22px; }
.mail-boite-nom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.mail-boite-nom .integ-row-name { overflow-wrap: anywhere; }
.mail-boite-ligne .header-btn { flex: none; white-space: nowrap; }
.mail-plus {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center;
}
.mail-plus:hover, .mail-plus[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.mail-plus svg { width: 18px; height: 18px; }
.mail-ajout { background: var(--bg-main); border-radius: 0 0 10px 10px; flex-wrap: wrap; }
.mail-ajout .header-btn svg, .mail-carte-etat .header-btn svg { width: 15px; height: 15px; }
.mail-ajout .header-btn, .mail-carte-etat .header-btn { display: inline-flex; align-items: center; gap: 6px; }
/* Lien à l'allure de bouton (app macOS : « Ouvrir Tudu dans le navigateur »,
   « Reconnecter dans le navigateur ») : ni bleu ni souligné. */
.mail-ecran a.header-btn { color: var(--text); text-decoration: none; font-weight: 600; }
.mail-eval-ligne { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mail-eval-ligne .mail-progres-piste { flex: 1 1 160px; min-width: 120px; }
.mail-eval-compte { font-size: 13px; font-weight: 600; white-space: nowrap; }
.mail-ln-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-ln-puce {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--bg-mute); color: var(--text); font-size: 12.5px; overflow-wrap: anywhere;
}
.mail-ln-x {
  width: 24px; height: 24px; flex: none; border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: var(--mail-soft); font-size: 15px; line-height: 1;
}
.mail-ln-x:hover { background: var(--hover); color: var(--text); }
.mail-ln-saisie { margin: 0; }
#mail-ln-statut:empty { display: none; }
.mail-menu { min-width: 220px; display: flex; flex-direction: column; }
.mail-menu :is([role="menuitem"], [role="menuitemradio"]) {
  display: flex; align-items: center; width: 100%; min-height: 38px; padding: 0 10px; border: none; border-radius: 8px;
  background: none; font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer;
}
.mail-menu :is([role="menuitem"], [role="menuitemradio"]):is(:hover, :focus-visible) { background: var(--hover); outline: none; }
.mail-menu [role="menuitemradio"][aria-checked="true"]::after { content: '✓' / ''; margin-left: auto; padding-left: 12px; color: var(--red); }
.mail-menu .danger { color: var(--late-fg); }
.mail-menu [role="menuitem"][aria-disabled="true"] { color: var(--text-faint); cursor: default; background: none; }
@media (max-width: 720px) {
  /* Ligne 1 : tuile, adresse et menu « ⋯ » ; ligne 2 : l'action principale.
     Tuile et « ⋯ » s'alignent sur la ligne de l'adresse, en haut du bloc de
     texte, et non au milieu de ses trois ou quatre lignes. */
  .mail-boite-ligne { flex-wrap: wrap; align-items: flex-start; }
  .mail-boite-ligne .integ-row-txt { flex: 1 1 calc(100% - 110px); }
  .mail-boite-ligne .mail-plus { order: 1; width: 44px; height: 44px; margin: -12px -6px -12px 0; }
  .mail-boite-ligne .header-btn { order: 2; margin-left: 48px; min-height: 40px; }
  .mail-ln-x { width: 32px; height: 32px; }
  .mail-menu :is([role="menuitem"], [role="menuitemradio"]) { min-height: 44px; }
}

/* ---------- « Probablement traitée » (Messagerie, spec 2026-10-03, 3.3) ----------
   Une réponse dans le fil du mail semble régler la demande : teinte verte
   des tâches abouties, sans la confondre avec une tâche terminée. Deux gestes,
   sur la ligne et dans la fiche. */
.task-probable { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 6px; }
.chip-probable {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 18px;
  padding: 1px 8px; border-radius: 999px; background: var(--hl-date-bg); color: var(--hl-date-fg);
}
/* Les deux gestes restent ensemble quand la ligne passe à la suivante. */
.task-probable-actions { display: inline-flex; gap: 8px; }
.probable-btn {
  border: 1px solid var(--hl-date-fg); background: var(--bg-elev); color: var(--hl-date-fg);
  border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.probable-btn:hover { background: var(--hl-date-bg); }
.probable-btn.secondaire { border-color: var(--border); color: var(--text-soft); font-weight: 500; }
.probable-btn.secondaire:hover { background: var(--hover); color: var(--text); }
/* Un geste en vol, ou la ligne tranchée qui attend son remplacement par le
   rafraîchissement : rien ne repart (même parade que « À trancher »). */
.probable-btn:disabled, :is(#task-dialog, #notes-vue) .tf-probable .header-btn:disabled { opacity: .6; cursor: default; }
.task-probable.tranchee { opacity: .55; }
@media (max-width: 768px) {
  .probable-btn { min-height: 36px; padding: 4px 14px; font-size: 13px; }
}
/* Au doigt, téléphone comme tablette, les gestes de la ligne prennent la
   cible de 44 px du bandeau de la fiche et du menu « ⋯ » (relecture finale
   du lot 2, mineur 2 : 36 px avant). Après le palier mobile, qu'elle
   complète. Le critère est l'absence de survol, comme pour le cadenas de la
   ligne : celui du pointeur grossier est réservé à la disposition voiture
   (public/ui/voiture.js, test/voiture-view.test.js). */
@media (hover: none) {
  .probable-btn { min-height: 44px; }
}
:is(#task-dialog, #notes-vue) .tf-probable {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px;
  border-radius: 12px; background: var(--hl-date-bg); color: var(--hl-date-fg);
}
:is(#task-dialog, #notes-vue) .tf-probable[hidden] { display: none; }
:is(#task-dialog, #notes-vue) .tf-probable-ico { display: inline-flex; flex: none; }
:is(#task-dialog, #notes-vue) .tf-probable-ico svg { width: 22px; height: 22px; }
:is(#task-dialog, #notes-vue) .tf-probable-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; }
:is(#task-dialog, #notes-vue) .tf-probable-txt strong { font-size: 14px; }
:is(#task-dialog, #notes-vue) .tf-probable-txt span { color: var(--text-soft); }
:is(#task-dialog, #notes-vue) .tf-probable-actions { display: flex; gap: 8px; flex-wrap: wrap; }
:is(#task-dialog, #notes-vue) .tf-probable .header-btn.primary { background: var(--hl-date-fg); border-color: var(--hl-date-fg); color: var(--bg-elev); }
/* Conflit des Détails : le nouveau texte, sur sa ligne, défile au lieu d'allonger la fiche (Détails de 200 Ko). */
:is(#task-dialog, #notes-vue) .tf-conflit-nouveau {
  flex: 1 1 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev);
  color: var(--text); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto;
}
:is(#task-dialog, #notes-vue) .tf-conflit-nouveau:empty::before { content: 'Aucun détail'; color: var(--text-faint); }
#notes-vue .tf-conflit-nouveau:empty::before { content: none; }
/* Au doigt (revue du lot 2, mineur 2) : les deux gestes se partagent une
   ligne entière, à 44 px de haut (29 px avant), comme « Ouvrir dans Gmail ». */
@media (max-width: 768px) {
  :is(#task-dialog, #notes-vue) .tf-probable-actions { flex: 1 1 100%; }
  :is(#task-dialog, #notes-vue) .tf-probable .header-btn { flex: 1; min-height: 44px; }
}
/* En voiture, les gestes de la ligne prennent la cible de 48 px, comme les
   autres boutons (ceux du bandeau sont des .header-btn, déjà couverts). */
[data-voiture="1"] .probable-btn { min-height: var(--v-cible); padding: 0 18px; font-size: 16px; }
[data-voiture="1"] .chip-probable { font-size: var(--v-texte-sec); padding: 4px 12px; }
[data-voiture="1"] :is(#task-dialog, #notes-vue) .tf-conflit-nouveau { font-size: var(--v-texte-sec); }
/* ---------- Réponse proposée (Messagerie, lot 5, spec 6.4) ----------
   Un encart à part dans la fiche : la réponse qu'on enverra, distincte des
   Détails de la tâche. Les groupes Intention et Registre reprennent le
   contrôle segmenté du statut (.tf-stage). L'accent des boutons pleins est
   celui des écrans de la Messagerie (#c43d30 : 5,2:1 sous le texte blanc),
   redéfini ici en variables locales, l'encart n'étant pas un .mail-ecran ;
   l'anneau de focus passe à #f2988a en sombre (6,7:1 sur le fond des
   cartes). Les petits textes (boîte, origine, témoin) sont en --text-soft :
   --text-faint n'y tenait que 2,7:1 en clair et 3,8:1 en sombre (QA du lot
   5). Au doigt (hover: none), chaque cible fait 44 px ; sous 768 px de large
   aussi ; en voiture, la cible de la disposition voiture. */
#task-dialog .tf-reponse {
  --reponse-accent: #c43d30; --reponse-accent-survol: #ad3428; --reponse-focus: #c43d30;
  gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-sidebar);
}
[data-theme="dark"] #task-dialog .tf-reponse { --reponse-focus: #f2988a; }
#task-dialog .tf-reponse[hidden] { display: none; }
/* `dialog h3` est en capitales ailleurs : le titre de l'encart garde la
   forme des autres titres de la fiche (« Détails »). */
#task-dialog h3.tf-section-titre { margin: 0; text-transform: none; letter-spacing: normal; }
#task-dialog .tf-reponse [hidden] { display: none; }
#task-dialog .tf-reponse-temoin { font-size: 12px; color: var(--text-soft); }
#task-dialog .tf-reponse-temoin[data-etat="echec"] { color: var(--late-fg); }
#task-dialog .tf-reponse-boite { margin: -4px 0 0; font-size: 12px; color: var(--text-soft); overflow-wrap: anywhere; }
#task-dialog .tf-reponse-etat { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
#task-dialog .tf-reponse-aide { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-soft); }
#task-dialog .tf-reponse-meta { margin: 0; font-size: 12px; color: var(--text-soft); }
#task-dialog .tf-reponse-reglages { display: flex; flex-direction: column; gap: 8px; }
#task-dialog .tf-reponse-ligne { display: flex; align-items: center; gap: 10px; }
#task-dialog .tf-reponse-lib { width: 72px; flex: none; font-size: 12.5px; color: var(--text-soft); }
#task-dialog label.tf-reponse-lib { width: auto; }
#task-dialog .tf-seg {
  flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
  padding: 3px; border-radius: 11px; background: var(--bg-mute);
}
#task-dialog .tf-seg-court { flex: 0 1 200px; }
#task-dialog .tf-seg button {
  min-height: 32px; padding: 4px 8px; border: 0; border-radius: 9px; background: none; color: var(--text-soft);
  font-size: 13px; line-height: 1.2;
}
#task-dialog .tf-seg button:hover:not(:disabled) { color: var(--text); }
#task-dialog .tf-seg button[aria-checked="true"] {
  background: var(--bg-elev); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(40, 30, 20, .14);
}
#task-dialog .tf-seg button:disabled { opacity: .55; cursor: default; }
#task-dialog .tf-reponse :is(button, input, textarea):focus-visible { outline: 2px solid var(--reponse-focus); outline-offset: 2px; }
#task-dialog .tf-reponse-precision,
#task-dialog .tf-reponse-texte {
  width: 100%; margin: 0; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--bg-elev); color: var(--text); font: inherit; font-size: 14px; line-height: 20px;
}
#task-dialog .tf-reponse-texte { min-height: 150px; resize: vertical; }
#task-dialog .tf-reponse-texte[readonly] { color: var(--text-soft); background: var(--bg-soft); }
#task-dialog .tf-reponse-precision:disabled { opacity: .6; }
#task-dialog .tf-reponse-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
/* `dialog label` est en colonne ailleurs : la case et son libellé, en ligne. */
#task-dialog .tf-reponse-tous { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text); }
#task-dialog .tf-reponse-tous input { width: 18px; height: 18px; margin: 0; accent-color: var(--reponse-accent); }
#task-dialog .tf-reponse-boutons { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
#task-dialog .tf-reponse .header-btn { min-height: 34px; }
#task-dialog .tf-reponse .header-btn.primary { background: var(--reponse-accent); border-color: var(--reponse-accent); color: #fff; font-weight: 600; }
#task-dialog .tf-reponse .header-btn.primary:hover { background: var(--reponse-accent-survol); }
#task-dialog .tf-reponse .header-btn[aria-disabled="true"] { opacity: .55; cursor: default; }
#task-dialog .tf-reponse-autoriser { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
#task-dialog .tf-reponse-autoriser p { flex: 1 1 220px; margin: 0; font-size: 13px; color: var(--text-soft); }
#task-dialog .tf-reponse-autoriser p:empty { display: none; }
@media (max-width: 768px) {
  #task-dialog .tf-reponse { padding: 12px; }
  #task-dialog .tf-reponse-ligne { flex-direction: column; align-items: stretch; gap: 4px; }
  #task-dialog .tf-reponse-lib { width: auto; }
  #task-dialog .tf-seg-court { flex: 1; }
  #task-dialog .tf-seg button { min-height: 44px; font-size: 14px; }
  #task-dialog .tf-reponse-precision, #task-dialog .tf-reponse-texte { font-size: 16px; }
  #task-dialog .tf-reponse-precision { min-height: 44px; }
  #task-dialog .tf-reponse-boutons { width: 100%; }
  #task-dialog .tf-reponse .header-btn { flex: 1; min-height: 44px; }
  #task-dialog .tf-reponse-tous { min-height: 44px; }
}
@media (hover: none) {
  #task-dialog .tf-seg button, #task-dialog .tf-reponse .header-btn, #task-dialog .tf-reponse-tous,
  #task-dialog .tf-reponse-precision { min-height: 44px; }
}
[data-voiture="1"] #task-dialog .tf-seg button { min-height: var(--v-cible); font-size: 16px; }
[data-voiture="1"] #task-dialog .tf-reponse .header-btn { min-height: var(--v-cible); font-size: 16px; }
/* Commentaire d'origine mail : l'enveloppe tient lieu d'avatar. */
.comment-origine { display: inline-flex; align-items: center; justify-content: center; background: var(--hl-project-bg); color: var(--hl-project-fg); }
.comment-origine svg { width: 14px; height: 14px; }
.comment-text a { color: var(--hl-project-fg); text-underline-offset: 2px; overflow-wrap: anywhere; }
/* Mention résolue parmi les lecteurs (#2615) : la pastille personne de l'ajout rapide. */
.comment-text .mention, .ed-texte .mention { background: var(--hl-person-bg); color: var(--hl-person-fg); border-radius: 4px; padding: 0 3px; }

/* ---------- Administration : tri des mails (Messagerie, spec 3.1) ----------
   Le comparatif reprend les classes de l'écran de revue (.mail-cmp-*) ; la
   section porte .mail-ecran pour leurs variables. */
#mail-tri .mail-tri-etat { margin: 8px 0 2px; font-weight: 600; }
#mail-tri .mail-comparatif { margin: 12px 0 14px; }
#mail-tri .mail-note { margin: 10px 0 0; }
/* Le choix du tri : deux options à libellés fixes (revue du lot 2, mineur 8).
   La sélection est neutre, une coche et un contour : le rouge plein des
   boutons d'action laissait croire qu'« Tri B choisi » était un geste à
   faire. Côte à côte, une sous l'autre quand la largeur manque. */
#mail-tri .mail-tri-choix { display: flex; gap: 10px; flex-wrap: wrap; }
#mail-tri .mail-tri-option {
  flex: 1 1 240px; display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 12px 14px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-elev); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
#mail-tri .mail-tri-option:hover { background: var(--hover); }
#mail-tri .mail-tri-option[aria-checked="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); cursor: default; }
#mail-tri .mail-tri-option[aria-checked="true"]:hover { background: var(--bg-elev); }
#mail-tri .mail-tri-coche {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--border-strong); border-radius: 50%; color: transparent;
}
#mail-tri .mail-tri-coche svg { width: 12px; height: 12px; }
#mail-tri .mail-tri-option[aria-checked="true"] .mail-tri-coche { background: var(--text); border-color: var(--text); color: var(--bg-elev); }
#mail-tri .mail-tri-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#mail-tri .mail-tri-txt strong { font-size: 14px; }
#mail-tri .mail-tri-txt span { font-size: 12.5px; color: var(--mail-soft); }
/* Sous 768 px, l'écran de revue remplace ce tableau par des tuiles ; ici, il
   reste un tableau, qui défile dans sa carte quand la largeur manque. */
@media (max-width: 768px) {
  #mail-tri .mail-comparatif { display: block; overflow-x: auto; }
  #mail-tri .mail-cmp-table { min-width: 520px; }
}

/* Vos collaborateurs, sous un champ d'adresse : un clic remplit le champ
   (spec 2026-10-05, 4.3). La règle [hidden] est explicite : display: flex
   l'emporterait sinon sur le display: none que le navigateur applique. */
.collab-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.collab-suggest[hidden] { display: none; }
.collab-suggest-list { display: flex; flex-wrap: wrap; gap: 6px; }
.collab-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px 3px 4px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); color: var(--text-soft);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.collab-chip:hover { border-color: var(--red); color: var(--text); }
.collab-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
/* Sans survol (tactile), une cible plus haute ; pas de règle « pointer » ici,
   réservée à la disposition voiture (ui/voiture.js). */
@media (hover: none) { .collab-chip { min-height: 40px; } }

/* Historique de la fiche (#2036) : replié, en bas, discret comme les fusions. */
.tf-historique { margin-top: 14px; }
#task-dialog .tf-historique > summary { cursor: pointer; display: list-item; }
.tf-historique-liste { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.tf-historique-liste li { overflow-wrap: anywhere; }
.tf-historique-liste li.est-claude::marker { color: var(--hl-est-fg); }
.tf-historique-quand { white-space: nowrap; }
.tf-historique-liste li.tf-historique-borne { list-style: none; margin-top: 4px; font-style: italic; }