/* ============================================================================
   Hub FR6 — feuille de style
   Direction : « Raffinage » — identité noir & or conservée, plus aérée et plus lisible.
   Tout passe par des variables (couleurs, tailles, espacements, arrondis, ombres) : le thème
   clair n'est qu'un second jeu de valeurs ([data-theme="light"]), aucun composant n'est dupliqué.
   Repères mesurables : texte ≥ 4,5:1 · pastilles ≥ 3:1 · aucun texte fonctionnel < 12 px ·
   zones cliquables ≥ 24 px (44 px au toucher) · une seule échelle de tailles/espacements.
   ========================================================================== */

@font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --font: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;

  /* Surfaces : 4 niveaux d'élévation (fond → carte → élément survolé/champ → menu) */
  --bg: #0b0b0c;
  --surface: #141415;
  --surface-2: #1b1b1d;
  --surface-3: #232326;
  --scrim: rgba(0, 0, 0, 0.6);
  --bar-bg: rgba(11, 11, 12, 0.82);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Texte : 17:1 / 8:1 / 5,2:1 sur les cartes */
  --text: #f6f6f7;
  --text-2: #b4b4ba;
  --text-3: #94949b;

  /* Accent */
  --accent: #ffb800;
  --accent-ink: #0b0b0c;
  --accent-text: #ffb800;
  --accent-soft: rgba(255, 184, 0, 0.12);

  /* Leviers : couleurs profondes pour les formes (≥ 3:1) ; les libellés restent en texte neutre */
  --lev-haut: #850606;       /* rouge profond (remplissage) */
  --lev-haut-edge: #c43a3a;  /* liseré de même teinte, plus vif : garde la forme lisible sur fond sombre (≥ 3:1) */
  --lev-moyen: #ffb800;  /* or */
  /* teintes de TEXTE (≥ 4,5:1) : les plus profondes possibles pour chaque couleur de niveau */
  --lev-haut-text: #f53838; --lev-moyen-text: #ffb800; --lev-bas-text: #477ef5;
  --lev-bas: #2f5fd0;    /* saphir */
  --danger: #ff6a5f;
  --danger-soft: rgba(255, 106, 95, 0.12);

  /* Surlignages de l'éditeur */
  --hl-gold: rgba(255, 184, 0, 0.32);
  --hl-red: rgba(196, 58, 58, 0.34);
  --hl-teal: rgba(127, 219, 218, 0.30);

  /* Échelle typographique (aucune taille fonctionnelle sous 12 px) */
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 15px; --fs-5: 16px; --fs-6: 20px; --fs-7: 28px;
  --fs-title: clamp(30px, 4.4vw, 44px);
  --lh-body: 1.55;

  /* Espacements (grille de 4) et arrondis */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-pill: 999px;

  /* Ombres et mouvement */
  --shadow-pop: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border-strong);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms; --t-med: 180ms;

  --container-max: 1360px;
  --sidebar-w: 232px;

  /* Alias historiques (anciens noms encore cités ailleurs) */
  --surface-dark: var(--bg); --surface-dark-raised: var(--surface-2); --border-on-dark: var(--border);
  --text-on-dark-primary: var(--text); --text-on-dark-secondary: var(--text-2); --text-on-dark-muted: var(--text-3);
  --accent-gold: var(--accent);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #f0f0ed;
  --surface-3: #ffffff;
  --scrim: rgba(20, 20, 24, 0.38);
  --bar-bg: rgba(246, 246, 244, 0.85);
  --border: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.2);
  --text: #111114;
  --text-2: #4a4a50;
  --text-3: #6a6a72;
  --accent: #ffb800;
  --accent-ink: #111114;
  --accent-text: #8a5a00;
  --accent-soft: rgba(255, 184, 0, 0.18);
  --lev-haut: #850606;
  --lev-haut-edge: #850606;
  --lev-moyen: #b07600;
  --lev-haut-text: #850606; --lev-moyen-text: #8a5a00; --lev-bas-text: #2a55c4;
  --lev-bas: #2a55c4;
  --danger: #850606;
  --danger-soft: rgba(133, 6, 6, 0.1);
  --hl-gold: rgba(255, 184, 0, 0.4);
  --hl-red: rgba(133, 6, 6, 0.20);
  --hl-teal: rgba(0, 150, 150, 0.22);
  --shadow-pop: 0 16px 40px -12px rgba(20, 20, 30, 0.28), 0 0 0 1px var(--border-strong);
  --shadow-card: 0 1px 2px rgba(20, 20, 30, 0.05);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-3);
  line-height: 1.4; min-height: 100vh; -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss03'; font-variant-numeric: tabular-nums;
}
button, input, select, textarea { font-family: inherit; }
button { background: none; border: none; cursor: pointer; color: inherit; font-size: inherit; }
[hidden] { display: none !important; }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
input:focus-visible, textarea:focus-visible { outline: none; }
::selection { background: var(--accent-soft); }
.icon { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes slide-up { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Boutons génériques ---------- */
.btn-primary, .add-note-btn, .imm-new, .capture-submit-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 36px; padding: 0 var(--sp-4); border-radius: var(--r-2);
  background: var(--accent); color: var(--accent-ink); font-size: var(--fs-2); font-weight: 600; white-space: nowrap;
  transition: filter var(--t-fast) ease, transform var(--t-fast) var(--ease);
}
.btn-primary:hover, .add-note-btn:hover, .imm-new:hover, .capture-submit-solid:hover { filter: brightness(1.08); }
.btn-primary:active, .add-note-btn:active, .imm-new:active, .capture-submit-solid:active { transform: scale(0.97); }
.imm-new { min-height: 32px; padding: 0 var(--sp-3); }

/* ---------- Connexion ---------- */
.login-screen { max-width: 400px; margin: 14vh auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: 36px 30px; text-align: center; box-shadow: var(--shadow-card); }
.login-screen h1 { font-size: var(--fs-6); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--sp-2); }
.login-screen p { font-size: var(--fs-2); color: var(--text-2); margin-bottom: var(--sp-5); line-height: 1.5; }
.login-screen input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-2); padding: 12px 14px; color: var(--text); font-size: var(--fs-3); margin-bottom: var(--sp-3); outline: none; transition: border-color var(--t-fast) ease; }
.login-screen input:focus { border-color: var(--accent); }
.login-screen button.primary { width: 100%; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-2); min-height: 44px; font-size: var(--fs-2); font-weight: 600; }
.login-status { font-size: var(--fs-1); color: var(--text-3); margin-top: var(--sp-4); min-height: 16px; }
.login-otp { margin-top: var(--sp-1); }
.login-otp input { text-align: center; letter-spacing: 0.3em; font-size: var(--fs-5); }

/* ---------- Coque ---------- */
.app { max-width: var(--container-max); margin: 0 auto; display: flex; flex-direction: column; min-height: 100vh; }
.preview-banner { background: var(--accent); color: var(--accent-ink); font-size: var(--fs-1); font-weight: 600; text-align: center; padding: 6px; }

/* Barre du haut */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); background: var(--bar-bg); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--border); }
.logo { flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.logo-mark { height: 22px; width: auto; display: block; }
[data-theme="light"] .logo-mark { filter: invert(1) hue-rotate(180deg); }
.logo-word { font-size: var(--fs-5); font-weight: 800; letter-spacing: -0.02em; }
.divider-v { display: none; }

.field-box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-3); padding: 0 var(--sp-3); min-height: 44px; min-width: 0; transition: border-color var(--t-fast) ease, background var(--t-fast) ease; }
.field-box:focus-within { border-color: var(--border-strong); background: var(--surface); }

/* Capture rapide */
.capture-bar { position: relative; flex: 4 1 420px; flex-wrap: nowrap; padding-right: var(--sp-2); }
.capture-icon { display: flex; color: var(--accent-text); flex-shrink: 0; }
.capture-input { flex: 1 1 120px; min-width: 80px; background: transparent; border: none; outline: none; color: var(--text); font-size: var(--fs-3); height: 42px; }
.capture-input::placeholder, .search-input::placeholder, .notes-search input::placeholder, .imm-search input::placeholder { color: var(--text-3); }
.capture-controls { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.capture-kind { display: flex; padding: 3px; gap: 2px; background: var(--surface); border-radius: var(--r-2); flex-shrink: 0; }
.capture-kind button { min-height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-1); font-weight: 500; color: var(--text-3); border-radius: 7px; white-space: nowrap; transition: background var(--t-fast) ease, color var(--t-fast) ease; }
.capture-kind button:hover { color: var(--text); }
.capture-kind button.active { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.capture-sub { position: relative; flex-shrink: 0; }
.capture-sub-trigger { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-1); font-weight: 500; color: var(--text-2); border-radius: var(--r-2); white-space: nowrap; transition: background var(--t-fast) ease; }
.capture-sub-trigger:hover { background: var(--surface-3); color: var(--text); }
.capture-sub-trigger svg { color: var(--text-3); }
.capture-submit { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); flex-shrink: 0; transition: filter var(--t-fast) ease, transform var(--t-fast) var(--ease); }
.capture-submit:hover { filter: brightness(1.1); }
.capture-submit:active { transform: scale(0.92); }
.capture-submit-solid { width: auto; height: auto; border-radius: var(--r-2); }

.capture-note-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; background: var(--surface-3); border-radius: var(--r-3); padding: var(--sp-3); box-shadow: var(--shadow-pop); animation: pop-in var(--t-med) var(--ease); }
.capture-note-body { width: 100%; min-height: 120px; max-height: 40vh; resize: vertical; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-2); padding: var(--sp-3); color: var(--text); font-family: inherit; font-size: var(--fs-3); line-height: var(--lh-body); outline: none; }
.capture-note-body:focus { border-color: var(--accent); }
.capture-note-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.capture-note-hint { font-size: var(--fs-1); color: var(--text-3); }

.search-bar { flex: 1.2 1 180px; }
.search-bar svg { color: var(--text-3); }
.search-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: var(--fs-3); height: 42px; }
.whoami { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--text-3); flex-shrink: 0; }
.whoami button { color: var(--text-3); font-size: var(--fs-1); padding: 6px; border-radius: var(--r-1); }
.whoami button:hover { color: var(--text); background: var(--surface-2); }
.theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-2); color: var(--text-2); flex-shrink: 0; transition: background var(--t-fast) ease; }
.theme-toggle:hover { background: var(--surface-2); color: var(--text); }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.creator-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-size: var(--fs-1); font-weight: 600; }

/* ---------- Corps ---------- */
.body-row { display: flex; flex: 1; }

/* Barre latérale */
.sidebar { width: var(--sidebar-w); flex-shrink: 0; padding: var(--sp-5) var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 861px) { .sidebar { position: sticky; top: 70px; align-self: flex-start; max-height: calc(100vh - 70px); overflow-y: auto; } }
.nav-item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-2); text-align: left; color: var(--text-2); font-size: var(--fs-3); font-weight: 500; position: relative; transition: background var(--t-fast) ease, color var(--t-fast) ease; }
.nav-item .nav-icon { color: var(--text-3); display: flex; transition: color var(--t-fast) ease; }
.nav-item .nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .nav-count { font-size: var(--fs-1); color: var(--text-3); font-weight: 500; min-width: 1.4em; text-align: right; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--surface-2); color: var(--text); }
.nav-item.active .nav-icon { color: var(--accent-text); }
.nav-item.active::before { content: ''; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav-item:has(.sortable-ghost) { background: var(--accent-soft); color: var(--accent-text); outline: 1px dashed var(--accent); }
.nav-item .sortable-ghost { display: none; }
.nav-sep { height: 1px; background: var(--border); margin: var(--sp-3) var(--sp-2); }
.nav-item.notes-toggle .nav-icon { color: var(--accent-text); }
.notes-subnav { display: flex; flex-direction: column; gap: 2px; padding-left: var(--sp-5); position: relative; }
.notes-subnav::before { content: ''; position: absolute; left: 21px; top: 2px; bottom: 2px; width: 1px; background: var(--border); }
.sidebar .nav-item.notes-nav { min-height: 36px; font-size: var(--fs-2); }

/* Zone principale */
.main { flex: 1; padding: var(--sp-5) var(--sp-6) var(--sp-6) var(--sp-2); min-width: 0; }
.main-content { flex: 1; min-width: 0; max-width: 980px; }
.breadcrumb { font-size: var(--fs-1); font-weight: 600; color: var(--text-3); margin-bottom: var(--sp-1); letter-spacing: 0.02em; }
.breadcrumb.as-notes-label { color: var(--accent-text); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.page-title { font-size: var(--fs-title); font-weight: 750; letter-spacing: -0.035em; line-height: 1.05; }

/* Carte de liste */
.elevated-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-card); padding: var(--sp-3); position: relative; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); color: var(--text-3); font-size: var(--fs-3); text-align: center; }
.empty-state .icon { color: var(--text-3); opacity: 0.7; }

/* Sections par levier */
.levier-section { margin-bottom: var(--sp-4); }
.levier-section:last-child { margin-bottom: 0; }
.levier-section-header { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--fs-1); font-weight: 600; color: var(--text-2); }
.levier-section-header .lv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.levier-section-header .lv-count { color: var(--text-3); font-weight: 500; }
.levier-section-header.haut { color: var(--lev-haut-text); }
.levier-section-header.moyen { color: var(--lev-moyen-text); }
.levier-section-header.bas { color: var(--lev-bas-text); }
.levier-section-header .lv-count { color: var(--text-3); }
.levier-section-header.haut .lv-dot { background: var(--lev-haut); box-shadow: 0 0 0 1.5px var(--lev-haut-edge); }
.levier-section-header.moyen .lv-dot { background: var(--lev-moyen); }
.levier-section-header.bas .lv-dot { background: var(--lev-bas); }
.levier-section-header .lv-dot { width: 9px; height: 9px; }

/* ---------- Ligne de tâche ----------
   Au repos : case, titre, levier actuel, durée. Au survol / focus : poignée, − +, pastilles de levier,
   agrandir et ⋯ apparaissent. Au toucher : un appui sur levier/durée déploie les réglages. */
.task-row { position: relative; padding: 10px var(--sp-3); border-radius: var(--r-2); transition: background var(--t-fast) ease; }
.task-row + .task-row { margin-top: 1px; }
.sortable-ghost { opacity: 0.35; }
.row-main { display: flex; align-items: center; gap: var(--sp-3); }
.row-left { display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 auto; min-width: 0; }
.row-right { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.row-meta { display: flex; align-items: center; gap: var(--sp-2); }
.row-actions { display: flex; align-items: center; gap: 2px; }
.row-drag-handle { display: flex; align-items: center; justify-content: center; width: 16px; margin-left: -6px; margin-right: -6px; color: var(--text-3); cursor: grab; touch-action: none; flex-shrink: 0; opacity: 0; transition: opacity var(--t-fast) ease; }
.row-drag-handle:active { cursor: grabbing; }
.sortable-chosen .row-drag-handle { color: var(--accent-text); }

/* case à cocher : 20 px visibles, zone de clic étendue */
.checkbox { position: relative; width: 20px; height: 20px; border: 1.5px solid var(--border-strong); border-radius: 6px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--accent-ink); transition: background var(--t-fast) ease, border-color var(--t-fast) ease; }
.checkbox::after, .row-more::after, .dur-step::after, .seg::after, .row-expand::after { content: ''; position: absolute; inset: -6px; }
.checkbox:hover { border-color: var(--accent); }
.checkbox svg { opacity: 0; transform: scale(0.6); transition: opacity var(--t-fast) ease, transform var(--t-fast) var(--ease); }
.checkbox.checked { background: var(--accent); border-color: var(--accent); }
.checkbox.checked svg { opacity: 1; transform: none; }

.row-title { flex: 1; min-width: 0; font-size: var(--fs-4); font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; letter-spacing: -0.005em; }
.row-title-input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--accent); border-radius: var(--r-1); color: var(--text); font-size: var(--fs-4); font-weight: 500; padding: 3px 8px; outline: none; font-family: inherit; }
.row-details-preview { margin: 2px 0 0 calc(20px + var(--sp-3)); font-size: var(--fs-2); line-height: 1.5; color: var(--text-3); white-space: pre-wrap; cursor: pointer; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.row-details-preview:hover { color: var(--text-2); }
.details-input { display: block; margin: var(--sp-2) 0 0 calc(20px + var(--sp-3)); width: calc(100% - 20px - var(--sp-3)); min-height: 56px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-2); color: var(--text); font-size: var(--fs-2); line-height: 1.5; padding: var(--sp-2) var(--sp-3); outline: none; font-family: inherit; resize: vertical; }
.details-input:focus { border-color: var(--accent); }

/* levier : au repos, seule la pastille active ; au survol, les trois */
.seg-group { display: flex; align-items: center; flex-shrink: 0; }
.seg { position: relative; width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; overflow: visible; transition: width var(--t-med) var(--ease), opacity var(--t-med) var(--ease); }
.seg::before { content: ''; display: block; width: 14px; height: 6px; border-radius: 3px; border: 1.5px solid var(--border-strong); background: transparent; transition: border-color var(--t-fast) ease, width var(--t-fast) ease, height var(--t-fast) ease, background var(--t-fast) ease; }
.seg:hover::before { border-color: var(--text-2); }
.seg.active::before { width: 18px; height: 8px; }
.seg.active.haut::before { background: var(--lev-haut); border-color: var(--lev-haut-edge); }
.seg.active.moyen::before { background: var(--lev-moyen); border-color: var(--lev-moyen); }
.seg.active.bas::before { background: var(--lev-bas); border-color: var(--lev-bas); }

/* durée : pastille discrète ; − et + au survol */
.temporality { display: flex; align-items: center; }
.dur-pill { display: flex; align-items: center; gap: 0; border-radius: var(--r-pill); background: transparent; transition: background var(--t-fast) ease; }
.dur-step { position: relative; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-3); overflow: visible; transition: width var(--t-med) var(--ease), opacity var(--t-med) var(--ease), background var(--t-fast) ease, color var(--t-fast) ease; }
.dur-step:hover { background: var(--surface-3); color: var(--text); }
.dur-text { min-width: 3.4em; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 3px var(--sp-2); font-size: var(--fs-1); font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; border-radius: var(--r-pill); }
.dur-text:hover { color: var(--text); background: var(--surface-3); }
.dur-input { width: 72px; background: var(--surface-2); border: 1px solid var(--accent); border-radius: var(--r-1); color: var(--text); font-size: var(--fs-1); padding: 3px 6px; text-align: center; font-family: inherit; outline: none; }

.row-expand, .row-more { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-1); color: var(--text-3); flex-shrink: 0; transition: opacity var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease; }
.row-expand:hover, .row-more:hover { background: var(--surface-3); color: var(--text); }

/* repos (appareils avec survol) */
@media (hover: hover) {
  .task-row:hover, .task-row:focus-within, .task-row.controls-open { background: var(--surface-2); }
  .task-row:not(:hover):not(:focus-within):not(.controls-open) .seg:not(.active) { width: 0; opacity: 0; pointer-events: none; overflow: hidden; }
  .task-row:not(:hover):not(:focus-within):not(.controls-open) .dur-step { width: 0; opacity: 0; pointer-events: none; overflow: hidden; }
  .task-row:not(:hover):not(:focus-within):not(.controls-open) .dur-pill[data-empty] { opacity: 0; }
  .task-row:not(:hover):not(:focus-within):not(.controls-open) .row-expand,
  .task-row:not(:hover):not(:focus-within):not(.controls-open) .row-more { opacity: 0; }
  .task-row:hover .row-drag-handle, .task-row:focus-within .row-drag-handle { opacity: 1; }
}
/* repos (toucher) : réglages repliés, ⋯ toujours présent, poignée inutile (appui long sur la ligne) */
@media (hover: none) {
  .row-drag-handle, .row-expand { display: none; }
  .task-row:not(.controls-open) .seg:not(.active), .task-row:not(.controls-open) .dur-step { width: 0; opacity: 0; pointer-events: none; overflow: hidden; }
  .task-row:not(.controls-open) .dur-pill[data-empty] { display: none; }
  .task-row.controls-open { background: var(--surface-2); }
  .task-row.controls-open .row-expand { display: flex; }
  /* titre sur toute la largeur, levier + durée sur une ligne dessous */
  .row-main { flex-wrap: wrap; row-gap: 2px; }
  .row-right { display: contents; }
  .row-left { flex: 1 1 0; }
  .row-actions { order: 2; }
  .row-meta { order: 3; flex: 1 0 100%; padding-left: calc(22px + var(--sp-3)); gap: 2px; }
  .row-meta:empty { display: none; }
  .seg { width: 28px; height: 30px; }
  .seg::after { inset: -6px -2px; }
  .dur-step { width: 32px; height: 32px; }
  .dur-text { min-width: 2.9em; padding: 6px var(--sp-2); }
  .row-more { width: 36px; height: 36px; }
  .checkbox { width: 22px; height: 22px; }
  .checkbox::after, .row-more::after, .dur-step::after { inset: -8px; }
  .task-row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; padding: 12px var(--sp-3); }
  .task-row input, .task-row textarea { -webkit-user-select: text; user-select: text; }
  .row-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}

/* Menu ⋯ et menus déroulants */
.row-menu, .capture-sub-menu, .note-aa-menu, .note-versions-menu { background: var(--surface-3); border-radius: var(--r-3); box-shadow: var(--shadow-pop); animation: pop-in var(--t-med) var(--ease); }
.row-menu { position: absolute; top: 40px; right: var(--sp-3); padding: var(--sp-1); display: flex; flex-direction: column; gap: 1px; z-index: 20; min-width: 210px; }
.row-menu button, .capture-sub-menu button { display: flex; align-items: center; gap: var(--sp-2); min-height: 36px; font-size: var(--fs-2); padding: 0 var(--sp-3); border-radius: var(--r-1); color: var(--text-2); text-align: left; width: 100%; white-space: nowrap; }
.row-menu button:hover, .capture-sub-menu button:hover { background: var(--surface-2); color: var(--text); }
.row-menu button.danger { color: var(--danger); }
.row-menu button.danger:hover { background: var(--danger-soft); }
.row-menu-confirm-text { font-size: var(--fs-2); color: var(--text-2); padding: var(--sp-2) var(--sp-3); }
.capture-sub-menu { position: absolute; top: calc(100% + 8px); right: 0; padding: var(--sp-1); display: flex; flex-direction: column; gap: 1px; z-index: 30; min-width: 190px; }
.capture-sub-menu button.active { color: var(--accent-text); }

.title-pop { position: fixed; z-index: 60; max-width: min(520px, 80vw); background: var(--surface-3); border-radius: var(--r-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-2); line-height: 1.4; color: var(--text); box-shadow: var(--shadow-pop); pointer-events: none; animation: fade-in var(--t-fast) ease; }

/* Annuler (toast) */
.undo-toast { position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--surface-3); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-2); color: var(--text-2); box-shadow: var(--shadow-pop); z-index: 100; white-space: nowrap; animation: slide-up var(--t-med) var(--ease); }
.undo-toast button { color: var(--accent-text); font-weight: 600; font-size: var(--fs-2); flex-shrink: 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-1); }
.undo-toast button:hover { background: var(--accent-soft); }

/* ---------- Notes (grille) ---------- */
.notes-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.notes-search { flex: 1 1 220px; }
.notes-search svg { color: var(--text-3); }
.notes-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: var(--fs-3); height: 42px; }
.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); }
.note-card { background: var(--surface-2); border-radius: var(--r-3); padding: var(--sp-4); cursor: pointer; display: flex; flex-direction: column; gap: var(--sp-2); border: 1px solid transparent; transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease), background var(--t-fast) ease; }
.note-card:hover { border-color: var(--border-strong); transform: translateY(-1px); background: var(--surface-3); }
.note-card-type { font-size: var(--fs-1); font-weight: 500; color: var(--text-3); }
.note-card-title { font-size: var(--fs-4); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.note-card-preview { font-size: var(--fs-2); color: var(--text-2); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.note-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.note-card-date { font-size: var(--fs-1); color: var(--text-3); }

.search-section-header { font-size: var(--fs-1); font-weight: 600; color: var(--text-3); margin-bottom: var(--sp-2); padding: 0 var(--sp-3); }
.search-section { margin-bottom: var(--sp-5); }
.search-section:last-child { margin-bottom: 0; }

/* ---------- Éditeur riche ---------- */
.note-editor { font-size: var(--fs-3); line-height: var(--lh-body); color: var(--text); }
.note-editor h1 { font-size: var(--fs-6); font-weight: 750; line-height: 1.2; letter-spacing: -0.025em; margin-bottom: var(--sp-3); }
.note-editor p { margin-bottom: var(--sp-3); color: var(--text-2); }
.note-editor p:last-child { margin-bottom: 0; }
.note-editor a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.note-editor mark { color: inherit; border-radius: 3px; padding: 0 2px; }
.note-editor mark.hl-gold { background: var(--hl-gold); }
.note-editor mark.hl-red { background: var(--hl-red); }
.note-editor mark.hl-teal { background: var(--hl-teal); }
.note-editor .note-checklist-item { display: block; margin-bottom: var(--sp-2); color: var(--text-2); }
.note-editor .note-checklist-item[data-checked="true"] { text-decoration: line-through; opacity: 0.55; }
.note-editor .check-box { display: inline-block; width: 18px; height: 18px; margin-right: var(--sp-2); vertical-align: -4px; border: 1.5px solid var(--border-strong); border-radius: 5px; cursor: pointer; transition: background var(--t-fast) ease; }
.note-editor .note-checklist-item[data-checked="true"] .check-box { background: var(--accent); border-color: var(--accent); }
.note-editor-wrap { position: relative; }
.note-editor { min-height: 160px; outline: none; }
.note-editor h1:empty:before { content: attr(data-placeholder); color: var(--text-3); }

.note-aa-btn, .note-versions-btn { position: absolute; bottom: var(--sp-4); width: 38px; height: 38px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-2); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); transition: color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) var(--ease); }
.note-aa-btn { right: var(--sp-4); font-size: var(--fs-2); font-weight: 700; }
.note-versions-btn { right: calc(var(--sp-4) + 46px); }
.note-versions-btn[hidden] { display: none; }
.note-aa-btn:hover, .note-aa-btn.active, .note-versions-btn:hover, .note-versions-btn.active { color: var(--accent-text); border-color: var(--accent); }
.note-aa-btn:active, .note-versions-btn:active { transform: scale(0.94); }
.note-aa-menu { position: absolute; right: var(--sp-4); bottom: calc(var(--sp-4) + 46px); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 20; min-width: 236px; }
.note-versions-menu { position: absolute; right: var(--sp-4); bottom: calc(var(--sp-4) + 46px); padding: var(--sp-2); display: flex; flex-direction: column; gap: 2px; z-index: 20; width: min(340px, 90%); max-height: 280px; overflow-y: auto; }
.note-aa-menu[hidden], .note-versions-menu[hidden] { display: none; }
.note-versions-menu .versions-title { font-size: var(--fs-1); font-weight: 600; color: var(--text-3); padding: var(--sp-1) var(--sp-2) var(--sp-2); }
.note-versions-menu button { text-align: left; padding: var(--sp-2); border-radius: var(--r-1); font-size: var(--fs-2); color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.note-versions-menu button:hover { background: var(--surface-2); color: var(--text); }
.note-versions-menu button small { color: var(--text-3); font-size: var(--fs-1); }
.aa-group { display: flex; gap: var(--sp-1); }
.aa-group button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 var(--sp-2); font-size: var(--fs-1); font-weight: 500; border-radius: var(--r-1); color: var(--text-2); background: var(--surface-2); transition: background var(--t-fast) ease, color var(--t-fast) ease; }
.aa-group button:hover { background: var(--surface); color: var(--text); }
.aa-group button.active { background: var(--accent-soft); color: var(--accent-text); }
.aa-group.aa-history button { font-size: var(--fs-1); }
.aa-group.aa-styles button[data-style="h1"] { font-weight: 800; font-size: var(--fs-2); }
.aa-group.aa-styles button[data-style="p"] { font-weight: 400; font-size: var(--fs-2); }
.aa-group.aa-glyphs button { font-size: var(--fs-4); }
.aa-group.aa-glyphs button[data-inline="bold"] { font-weight: 700; }
.aa-group.aa-glyphs button[data-inline="italic"] { font-style: italic; }
.aa-group.aa-glyphs button[data-inline="underline"] { text-decoration: underline; }
.aa-group.aa-highlight button { min-height: 28px; }
.aa-group.aa-highlight button[data-highlight="gold"] { background: var(--hl-gold); }
.aa-group.aa-highlight button[data-highlight="red"] { background: var(--hl-red); }
.aa-group.aa-highlight button[data-highlight="teal"] { background: var(--hl-teal); }
.aa-group.aa-link { align-items: stretch; }
.aa-link-input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-1); padding: 0 var(--sp-2); min-height: 34px; color: var(--text); font-size: var(--fs-2); font-family: inherit; outline: none; }
.aa-link-input:focus { border-color: var(--accent); }

/* Carte de lien */
.note-editor .link-card { position: relative; display: flex; gap: var(--sp-4); align-items: stretch; margin: var(--sp-2) 0 var(--sp-4); padding: var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-3); cursor: pointer; -webkit-user-select: none; user-select: none; transition: border-color var(--t-fast) ease, background var(--t-fast) ease; }
.note-editor .link-card:hover { border-color: var(--border-strong); background: var(--surface-3); }
.link-card-thumb { width: 136px; flex-shrink: 0; aspect-ratio: 16 / 9; border-radius: var(--r-2); overflow: hidden; background: #000; }
.link-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); padding-right: 56px; }
.link-card-title { font-size: var(--fs-3); font-weight: 600; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.link-card-site { font-size: var(--fs-1); color: var(--text-3); }
.link-card-tools { position: absolute; top: var(--sp-2); right: var(--sp-2); display: flex; gap: 2px; opacity: 0; transition: opacity var(--t-fast) ease; }
.link-card:hover .link-card-tools, .link-card:focus-within .link-card-tools { opacity: 1; }
.link-card-tools button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-1); background: var(--surface-3); color: var(--text-2); }
.link-card-tools button:hover { color: var(--accent-text); }
.link-card-title-input { width: 100%; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-1); padding: 5px var(--sp-2); color: var(--text); font-size: var(--fs-3); font-family: inherit; outline: none; -webkit-user-select: text; user-select: text; }
@media (hover: none) { .link-card-tools { opacity: 1; } }

/* ---------- Fenêtre immersive ---------- */
body.imm-open { overflow: hidden; }
.imm { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; background: var(--bg); animation: fade-in var(--t-med) ease; }
.imm:not(.imm--side-open) .imm-side { display: none; }
.imm-side { width: 308px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-right: 1px solid var(--border); }
.imm-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: max(var(--sp-4), env(safe-area-inset-top)) var(--sp-4) var(--sp-3); }
.imm-close { display: flex; align-items: center; gap: var(--sp-1); min-height: 36px; padding: 0 var(--sp-3) 0 var(--sp-2); margin-left: calc(var(--sp-2) * -1); border-radius: var(--r-2); font-size: var(--fs-2); font-weight: 500; color: var(--text-2); }
.imm-close:hover { color: var(--text); background: var(--surface-2); }
.imm-search { display: flex; align-items: center; gap: var(--sp-2); margin: 0 var(--sp-4) var(--sp-3); padding: 0 var(--sp-3); min-height: 38px; background: var(--surface-2); border-radius: var(--r-2); color: var(--text-3); }
.imm-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: var(--fs-2); font-family: inherit; }
.imm-collections { padding: 0 var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 1px; }
.imm-col-group { font-size: var(--fs-1); font-weight: 600; color: var(--text-3); padding: var(--sp-3) var(--sp-2) var(--sp-1); }
.imm-col { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 34px; padding: 0 var(--sp-2); border-radius: var(--r-1); font-size: var(--fs-2); color: var(--text-2); text-align: left; width: 100%; transition: background var(--t-fast) ease; }
.imm-col:hover { background: var(--surface-2); color: var(--text); }
.imm-col.active { background: var(--surface-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.imm-col-count { font-size: var(--fs-1); color: var(--text-3); }
.imm-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-1); border-top: 1px solid var(--border); font-size: var(--fs-1); font-weight: 600; color: var(--text-3); }
.imm-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-1) var(--sp-3) var(--sp-5); }
.imm-item { display: block; width: 100%; text-align: left; padding: var(--sp-3); border-radius: var(--r-2); transition: background var(--t-fast) ease; }
.imm-item:hover { background: var(--surface-2); }
.imm-item.active { background: var(--surface-3); }
.imm-item[data-lev="haut"] { box-shadow: inset 3px 0 0 var(--lev-haut-edge); }
.imm-item[data-lev="moyen"] { box-shadow: inset 3px 0 0 var(--lev-moyen); }
.imm-item[data-lev="bas"] { box-shadow: inset 3px 0 0 var(--lev-bas); }
.imm-item-title { font-size: var(--fs-2); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imm-item-sub { margin-top: 2px; font-size: var(--fs-1); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imm-list-empty { padding: var(--sp-4) var(--sp-3); font-size: var(--fs-2); color: var(--text-3); }

.imm-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.imm-topbar { display: flex; align-items: center; gap: var(--sp-3); padding: max(var(--sp-3), env(safe-area-inset-top)) var(--sp-5) var(--sp-3); min-height: 56px; }
.imm-side-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-2); color: var(--text-2); flex-shrink: 0; }
.imm-side-toggle:hover { background: var(--surface-2); color: var(--text); }
.imm-status { flex: 1; min-width: 0; font-size: var(--fs-1); color: var(--text-3); }
.imm-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.imm-act { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-2); font-weight: 500; color: var(--text-2); border-radius: var(--r-2); white-space: nowrap; transition: background var(--t-fast) ease; }
.imm-act:hover { background: var(--surface-2); color: var(--text); }
.imm-act.danger { color: var(--danger); }
.imm-act.danger:hover { background: var(--danger-soft); }
.imm-confirm { font-size: var(--fs-2); color: var(--text-2); }
.imm-doc { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-5) var(--sp-6) 140px; }
.imm-doc .note-editor-wrap { position: static; max-width: 720px; margin: 0 auto; }
.imm-doc .note-editor { min-height: calc(100vh - 240px); font-size: var(--fs-5); }
.imm-doc .note-editor h1 { font-size: 36px; line-height: 1.12; letter-spacing: -0.035em; margin-bottom: var(--sp-5); }
.imm-doc .note-editor p { font-size: var(--fs-5); line-height: 1.7; margin-bottom: var(--sp-3); }
.imm-main .note-aa-btn, .imm-main .note-versions-btn { bottom: var(--sp-5); }
.imm-main .note-aa-btn { right: var(--sp-5); }
.imm-main .note-versions-btn { right: calc(var(--sp-5) + 46px); }
.imm-main .note-aa-menu, .imm-main .note-versions-menu { right: var(--sp-5); bottom: calc(var(--sp-5) + 46px); }
.imm-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); color: var(--text-3); }
.imm-empty-title { font-size: var(--fs-3); }

/* ---------- Glisser-déposer ---------- */
.drop-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom)); background: var(--bar-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--border); flex-direction: column; gap: var(--sp-2); }
.drop-bar-label { font-size: var(--fs-1); font-weight: 600; color: var(--text-3); text-align: center; }
.drop-targets { display: flex; gap: var(--sp-2); }
.drop-target { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; text-align: center; padding: 0 var(--sp-2); border: 1.5px dashed var(--border-strong); border-radius: var(--r-3); font-size: var(--fs-2); font-weight: 500; color: var(--text-2); transition: background var(--t-fast) ease, border-color var(--t-fast) ease; }
.drop-target:has(.sortable-ghost) { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.drop-target .sortable-ghost { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; }
body.dragging-task .drop-bar { animation: fade-in var(--t-fast) ease; }
@media (hover: none), (max-width: 640px) { body.dragging-task .drop-bar { display: flex; } }
.sortable-fallback { background: var(--surface-3) !important; border-radius: var(--r-2); box-shadow: var(--shadow-pop); opacity: 0.96 !important; }

/* ---------- Adaptation aux écrans étroits ---------- */
@media (max-width: 1100px) { .main { padding-right: var(--sp-5); } }
@media (max-width: 860px) {
  :root { --sidebar-w: 190px; }
  .search-bar { order: 3; flex-basis: 100%; }
}
@media (max-width: 760px) {
  .imm-side { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; z-index: 3; border-right: none; }
  .imm-doc { padding: var(--sp-3) var(--sp-4) 120px; }
  .imm-doc .note-editor h1 { font-size: 28px; }
  .imm-topbar { padding-left: var(--sp-3); padding-right: var(--sp-3); flex-wrap: wrap; row-gap: 2px; }
  .imm-actions { margin-left: auto; }
  .imm-status { order: 3; flex-basis: 100%; padding-left: 48px; }
  .imm-main .note-aa-btn { right: var(--sp-4); bottom: var(--sp-4); }
  .imm-main .note-versions-btn { right: calc(var(--sp-4) + 46px); bottom: var(--sp-4); }
  .imm-main .note-aa-menu, .imm-main .note-versions-menu { right: var(--sp-4); bottom: calc(var(--sp-4) + 46px); }
  .link-card-thumb { width: 96px; }
  .note-editor .link-card { gap: var(--sp-3); }
}
/* ---------- Téléphone ----------
   Navigation en barre d'onglets fixée en bas (au pouce), en-tête réduit (logo + actions, capture
   sur une ligne, recherche derrière une icône), zones tactiles de 44 px, marges de sécurité iPhone. */
.search-toggle { display: none; }
@media (max-width: 640px) {
  :root { --tabbar-h: 62px; }
  html { -webkit-tap-highlight-color: transparent; }
  button, a, .nav-item, .task-row { touch-action: manipulation; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); overscroll-behavior-y: none; }
  .body-row { flex-direction: column; }

  /* Barre d'onglets */
  .sidebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; width: 100%; max-height: none; flex-direction: row; align-items: stretch; gap: 0; padding: 0 var(--sp-2) env(safe-area-inset-bottom); background: var(--bar-bg); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--border); overflow: visible; }
  .nav-sep { display: none; }
  .nav-item { flex: 1 1 0; width: auto; min-width: 0; min-height: var(--tabbar-h); flex-direction: column; justify-content: center; gap: 3px; padding: var(--sp-2) 2px; border-radius: 0; background: none; font-size: var(--fs-1); font-weight: 500; color: var(--text-3); text-align: center; }
  .nav-item:hover { background: none; color: var(--text-3); }
  .nav-item .nav-icon { color: var(--text-3); }
  .nav-item .nav-icon svg { width: 22px; height: 22px; }
  .nav-item .nav-label { flex: none; max-width: 100%; }
  .nav-item.active, .nav-item.active:hover { background: none; color: var(--text); }
  .nav-item.notes-toggle .nav-icon { color: var(--text-3); }
  .nav-item.active .nav-icon, .nav-item.notes-toggle.active .nav-icon { color: var(--accent-text); }
  .nav-item.active::before { content: ''; display: block; position: absolute; left: 50%; top: 0; bottom: auto; width: 28px; height: 3px; transform: translateX(-50%); border-radius: 0 0 3px 3px; background: var(--accent); }
  .nav-item .nav-count { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px; border-radius: 9px; background: var(--surface-3); color: var(--text-2); font-size: var(--fs-1); font-weight: 600; text-align: center; }
  .nav-item .nav-count:empty { display: none; }
  /* Sous-navigation des notes : pastille flottante au-dessus de la barre */
  .notes-subnav { position: absolute; left: 50%; bottom: calc(100% + 72px); transform: translateX(-50%); flex-direction: row; gap: 2px; padding: 4px; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--r-pill); box-shadow: var(--shadow-pop); white-space: nowrap; animation: slide-up var(--t-med) var(--ease); }
  .notes-subnav::before { display: none; }
  .sidebar .nav-item.notes-nav { flex: none; flex-direction: row; min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-pill); font-size: var(--fs-3); color: var(--text-2); }
  .sidebar .nav-item.notes-nav.active { background: var(--accent); color: var(--accent-ink); }
  .sidebar .nav-item.notes-nav.active::before { display: none; }
  .sidebar .nav-item.notes-nav .nav-count { position: static; background: none; color: inherit; opacity: .7; min-width: 0; height: auto; line-height: inherit; padding: 0 0 0 var(--sp-2); }
  .nav-item:focus-visible { outline-offset: -5px; border-radius: var(--r-3); }

  /* Contenu */
  .main { padding: var(--sp-4) var(--sp-3) calc(var(--sp-6) + 72px); }
  .elevated-card { padding: var(--sp-1); border-radius: var(--r-3); }
  .page-head { margin-bottom: var(--sp-4); }

  /* En-tête compact : logo + actions sur une ligne, capture dessous */
  .topbar { position: static; padding: max(var(--sp-3), env(safe-area-inset-top)) var(--sp-3) var(--sp-2); gap: var(--sp-2); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: none; }
  .logo { order: 0; flex: 1 1 auto; }
  .search-toggle { order: 1; display: flex; }
  .whoami { order: 2; }
  .whoami .who-name { display: none; }
  .whoami button { min-height: 44px; padding: 0 var(--sp-2); }
  .theme-toggle { order: 3; width: 44px; height: 44px; }
  .icon-btn { align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-2); color: var(--text-2); flex-shrink: 0; }
  .icon-btn:active, .theme-toggle:active { background: var(--surface-2); }
  .topbar.search-open .search-toggle { color: var(--accent-text); }
  /* Capture rapide : barre fixée en bas, juste au-dessus des onglets (comme une messagerie) */
  .capture-bar { position: fixed; left: var(--sp-2); right: var(--sp-2); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-2) + var(--kb, 0px)); z-index: 46; order: 4; flex-wrap: wrap; padding: 16px var(--sp-3) 0; background: rgba(34, 34, 38, 0.72); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 28px; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.7); transition: border-radius var(--t-med) var(--ease); }
  [data-theme="light"] .capture-bar { background: rgba(255, 255, 255, 0.78); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 18px 50px -14px rgba(20, 20, 40, 0.3); }
  .capture-bar:focus-within { background: rgba(34, 34, 38, 0.82); }
  [data-theme="light"] .capture-bar:focus-within { background: rgba(255, 255, 255, 0.9); }
  /* poignée de feuille, comme une feuille système iOS */
  .capture-bar::before { content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--text-3); opacity: 0.55; }
  .capture-bar.expanded { border-radius: 28px; }
  .capture-note-panel { top: auto; bottom: calc(100% + 8px); }
  .capture-sub-menu { top: auto; bottom: calc(100% + 8px); }
  .capture-bar .capture-submit-solid { width: auto; height: 44px; padding: 0 var(--sp-5); border-radius: var(--r-3); order: 0; margin-left: 0; }
  body.kb-open { padding-bottom: 0; }
  body.kb-open .sidebar { display: none; }
  body.kb-open .capture-bar { bottom: calc(var(--kb, 0px) + var(--sp-2)); }
  .search-bar { order: 5; flex: 1 0 100%; min-height: 44px; display: none; }
  .topbar.search-open .search-bar { display: flex; }
  .capture-input { flex: 1 1 0; min-width: 0; height: 46px; }
  /* replié : icône + champ + bouton d'envoi sur une seule ligne ; déplié : choix Tâche/Note + destination */
  .capture-controls { display: contents; }
  .capture-submit { width: 36px; height: 36px; order: 2; margin-left: auto; }
  .capture-bar:not(.expanded) .capture-kind, .capture-bar:not(.expanded) .capture-sub { display: none; }
  .capture-bar.expanded { padding-bottom: var(--sp-3); }
  .capture-bar.expanded .capture-input { flex-basis: calc(100% - 84px); }
  .capture-bar.expanded .capture-kind, .capture-bar.expanded .capture-sub { order: 3; }
  .capture-bar.expanded .capture-kind { margin-bottom: 0; }
  .capture-kind button { min-height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-2); }
  .capture-sub-trigger { min-height: 40px; font-size: var(--fs-2); }

  .undo-toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 72px); }
}
/* iOS zoome la page dès qu'un champ de moins de 16 px prend le focus : on l'évite sur tactile */
@media (hover: none) {
  input, textarea, select { font-size: 16px; }
  .capture-input, .search-input, .notes-search input, .imm-search input, .capture-note-body { font-size: 16px; }
}
@media (hover: none) { .capture-note-hint { display: none; } .capture-note-footer { justify-content: flex-end; } }

/* ---------- Sélection multiple ---------- */
.select-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--sp-3); margin-top: 4px; border-radius: var(--r-pill); font-size: var(--fs-2); font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); flex-shrink: 0; white-space: nowrap; transition: background var(--t-fast) ease, color var(--t-fast) ease; }
.select-toggle:hover { color: var(--text); background: var(--surface-3); }
.select-toggle.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.select-toggle.small { min-height: 28px; margin-top: 0; padding: 0 var(--sp-3); font-size: var(--fs-1); }
.select-toggle[hidden] { display: none; }

.sel-mark { display: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); align-items: center; justify-content: center; flex-shrink: 0; color: transparent; transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease; }
.selecting .sel-mark { display: flex; }
.selected > .sel-mark, .selected .row-left > .sel-mark { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.selecting { -webkit-user-select: none; user-select: none; }
.selecting .task-row, .selecting .note-card, .selecting .imm-item { cursor: pointer; }
.selecting .row-drag-handle, .selecting .task-row .checkbox, .selecting .row-actions, .selecting .dur-step, .selecting .seg:not(.active) { display: none !important; }
.selecting .task-row.selected { background: var(--accent-soft); }
.note-card { position: relative; }
.note-card .sel-mark { position: absolute; top: 12px; right: 12px; }
.note-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.imm-item { position: relative; }
.imm-item .sel-mark { position: absolute; right: 12px; top: 50%; margin-top: -12px; }
.selecting .imm-item { padding-right: 48px; }
.imm-item.selected { background: var(--accent-soft); }

.sel-bar { position: fixed; left: 50%; bottom: max(var(--sp-5), env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 96; display: flex; align-items: center; gap: var(--sp-3); padding: 8px 10px; max-width: calc(100vw - 24px); background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--r-pill); box-shadow: var(--shadow-pop); animation: slide-up var(--t-med) var(--ease); }
.sel-bar[hidden] { display: none; }
.sel-top, .sel-actions { display: flex; align-items: center; gap: var(--sp-2); }
.sel-count { font-size: var(--fs-3); font-weight: 600; padding: 0 var(--sp-2); white-space: nowrap; }
.sel-x, .sel-btn { min-height: 40px; border-radius: var(--r-pill); font-size: var(--fs-3); font-weight: 600; color: var(--text); background: var(--surface-2); transition: filter var(--t-fast) ease, background var(--t-fast) ease; }
.sel-btn { padding: 0 var(--sp-4); white-space: nowrap; }
.sel-btn.ghost { background: none; color: var(--accent-text); padding: 0 var(--sp-3); }
.sel-btn.danger { color: var(--danger); }
.sel-btn.solid { background: var(--lev-haut); color: #fff; }
.sel-btn:hover:not(:disabled) { filter: brightness(1.15); }
.sel-btn:disabled { opacity: 0.4; cursor: default; }
.sel-x { width: 40px; display: flex; align-items: center; justify-content: center; background: none; color: var(--text-2); }
@media (max-width: 640px) {
  .sel-bar { left: var(--sp-2); right: var(--sp-2); bottom: calc(env(safe-area-inset-bottom) + var(--sp-2)); transform: none; max-width: none; flex-direction: column; align-items: stretch; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); border-radius: 24px; animation: fade-in var(--t-med) ease; }
  .sel-top { justify-content: space-between; }
  .sel-top .sel-count { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sel-actions .sel-btn { flex: 1 1 0; min-height: 46px; }
  body.selecting .capture-bar { display: none; }
}