/* ============================================================
   Wayline — feuille de style
   Ambiance : "outil productif premium" + légère touche RPG.
   Deux thèmes (sombre par défaut / clair) via [data-theme].
   ============================================================ */

/* ---------- Tokens de design ---------- */
:root {
  /* Les POPUPS NATIFS (calendrier des input date, roue des input time, scrollbars) suivent le
     thème : sans ça ils sortaient en BLANC sur les thèmes sombres (retour Jason 2026-07-11). */
  color-scheme: dark;
  /* Rayons, ombres, transitions communs */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px -24px rgba(0,0,0,.65);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .14s var(--ease);
  --t: .24s var(--ease);

  /* Couleurs de rang (P1 → P9) : de plus en plus fade quand le rang descend.
     P1 rouge vif → P2 orange → P3 bleu → P4 violet → P5 gris ; P6-P9 (rangs étendus,
     v21) : gris de plus en plus sombres ; --pnone = « À trier » (pas encore classé). */
  /* P5-P9 : teintes FRANCHES et distinctes (avant : cinq gris quasi identiques — retour Jason 2026-07-11). */
  --p1: #ef4444; --p2: #f59e0b; --p3: #3b82f6; --p4: #8b5cf6; --p5: #14b8a6;
  --p6: #ec4899; --p7: #84cc16; --p8: #0ea5e9; --p9: #b45309; --pnone: #6b7280;
  /* Statuts timeline */
  --ok: #22c55e; --warn: #f59e0b; --late: #ef4444; --intime: #38bdf8;
}

/* Thème sombre (défaut) */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e15;
  --bg-grad: radial-gradient(1200px 600px at 80% -10%, rgba(99,102,241,.12), transparent 60%),
             radial-gradient(900px 500px at -10% 110%, rgba(34,197,94,.07), transparent 55%);
  --surface: #121622;
  --surface-2: #171c2b;
  --surface-3: #1d2335;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --text: #e9edf5;
  --text-dim: #9aa6bd;
  --text-faint: #7d8ba6;
  --accent: #6366f1;
  --accent-2: #8b5cf6;
  --accent-soft: rgba(99,102,241,.16);
  --track: rgba(255,255,255,.07);
  --xp-grad: linear-gradient(90deg, #6366f1, #8b5cf6 60%, #22d3ee);
  --prog-grad: linear-gradient(90deg, #22c55e, #4ade80);
  --scene: linear-gradient(155deg, #0c1024, #241c52 52%, #4a3f96);  /* carte Focus : nuit indigo */
}

/* Thème clair */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --bg-grad: radial-gradient(1000px 500px at 85% -10%, rgba(99,102,241,.10), transparent 60%),
             radial-gradient(800px 460px at -5% 110%, rgba(34,197,94,.08), transparent 55%);
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef1f7;
  --border: rgba(15,23,42,.09);
  --border-strong: rgba(15,23,42,.16);
  --text: #16203a;
  --text-dim: #47566f;   /* assombri pour respecter le contraste WCAG AA */
  --text-faint: #556484; /* idem (texte secondaire) */
  --accent: #5b5ef0;
  --accent-2: #8b5cf6;
  --accent-soft: rgba(99,102,241,.12);
  --track: rgba(15,23,42,.08);
  --xp-grad: linear-gradient(90deg, #6366f1, #8b5cf6 60%, #06b6d4);
  --prog-grad: linear-gradient(90deg, #16a34a, #22c55e);
  --shadow-md: 0 10px 26px -16px rgba(15,23,42,.32);
  --shadow-lg: 0 24px 56px -28px rgba(15,23,42,.34);
  --scene: linear-gradient(155deg, #14203a, #2a3f74 52%, #5b76c4);  /* carte Focus : nuit bleue */
}

/* Thème « Emma » — Nuit lo-fi (Direction D) : fond SOMBRE vert-ambré + menu VERT, actions OR.
   Texte CLAIR et bien contrasté (lisible partout). Priorités vives. Police système. */
[data-theme="emma"] {
  color-scheme: dark;
  --bg: #0F1610;            /* nuit forêt PROFONDE : fond assez sombre pour que les couleurs CLAQUENT */
  /* Halo FROID et discret (vert), faible opacité : plus de brume ambrée = écran net, pas voilé. */
  --bg-grad: radial-gradient(1200px 620px at 82% -14%, rgba(94,154,74,.06), transparent 58%),
             radial-gradient(900px 520px at -10% 112%, rgba(60,120,80,.05), transparent 55%);
  --surface: #232F25;       /* cartes NETTEMENT plus claires que le fond (profondeur) */
  --surface-2: #2F3C31;
  --surface-3: #3a483c;
  --border: #3d4d3f;        /* bordures visibles autour des cartes */
  --border-strong: #4e6050;
  --text: #F0F4EA;          /* crème très clair = HAUT contraste */
  --text-dim: #BAC8AF;      /* secondaire BIEN lisible (clé du contraste) */
  --text-faint: #8d9c7f;    /* faible mais encore lisible */
  --accent: #E2AC4E;        /* OR : actions, minuteur, progression */
  --accent-2: #cf9a3f;
  --accent-soft: rgba(226,172,78,.16);
  --track: #2F3C31;
  --xp-grad: linear-gradient(90deg, #d79a3f, #E2AC4E);
  --prog-grad: linear-gradient(90deg, #d79a3f, #E2AC4E);
  --ok: #7BB856;            /* coche « fait » = vert */
  /* Priorités & états VIFS = mêmes teintes flashy que le thème sombre (rouge/orange/bleu/violet purs). */
  /* P5-P9 : teintes FRANCHES et distinctes (avant : cinq gris quasi identiques — retour Jason 2026-07-11). */
  --p1: #ef4444; --p2: #f59e0b; --p3: #3b82f6; --p4: #8b5cf6; --p5: #14b8a6;
  --p6: #ec4899; --p7: #84cc16; --p8: #0ea5e9; --p9: #b45309; --pnone: #6b7280;
  --warn: #f59e0b; --late: #ef4444; --intime: #3b82f6;
  /* Jetons de la palette */
  --accent-ink: #211806; --nav: #7BB856; --nav-ink: #13230C;
  --warm: #C5895F; --sage: #8FB87E; --rose: #E0917A;
  --leaf: #5E9A4A; --leaf-light: #8FCB6A; --leaf-dark: #3C5E30;
  --scene: linear-gradient(155deg, #0D1A12, #244A2C 52%, #5E9A4A);
  --btn-light: #FFFFFF; --btn-light-ink: #211806;
  --glass: rgba(13,12,8,0.5); --bokeh: rgba(255,216,150,0.6);
  --shadow-md: 0 14px 36px -22px rgba(0,0,0,.6);
}
/* Menu = VERT (item actif vert plein, texte foncé) ; actions = OR. Texte clair partout. */
[data-theme="emma"] .nav__item { color: var(--text-dim); }
[data-theme="emma"] .nav__item .nav__icon,
[data-theme="emma"] .nav__item[data-nav="ideas"] .nav__icon { color: var(--leaf-light); opacity: .92; }
[data-theme="emma"] .nav__item:hover { background: var(--surface-2); color: var(--text); }
[data-theme="emma"] .nav__item.is-active { background: var(--nav); color: var(--nav-ink); border-radius: 14px; box-shadow: 0 10px 20px -12px var(--nav); }
[data-theme="emma"] .nav__item.is-active .nav__icon { color: var(--nav-ink); opacity: 1; }
[data-theme="emma"] .brand__logo { background: var(--nav); color: var(--nav-ink); }
[data-theme="emma"] .bottomnav__item.is-active { color: var(--leaf-light); }
[data-theme="emma"] .btn--primary { color: var(--accent-ink); }
/* Sidebar : niveau + barre XP en vert ; cartes détachées du fond (profondeur) */
[data-theme="emma"] .level-badge { background: var(--nav); color: var(--nav-ink); box-shadow: 0 8px 18px -10px var(--nav); }
[data-theme="emma"] .player-card .bar--xp .bar__fill { background: linear-gradient(90deg, #6aa548, #7BB856); }
[data-theme="emma"] .card { box-shadow: 0 14px 36px -22px rgba(0,0,0,.6); }

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
::selection { background: var(--accent-soft); }

/* Scrollbar discrète */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }

/* ============================================================
   STRUCTURE GÉNÉRALE
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: 252px 1fr;
  min-height: 100vh;
}

/* ---------- Barre latérale ---------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 16px;
  background: linear-gradient(180deg, var(--surface), var(--surface) 40%, var(--bg));
  border-right: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 8px; }
.brand__logo {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  color: #16305a;                 /* couleur du repli SVG (W + flèche) */
  background: #fff;               /* fond blanc → le logo marine ressort en thème clair ET sombre */
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.45);
  overflow: hidden;
}
.brand__img { width: 40px; height: 40px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand__text strong { font-size: 15.5px; letter-spacing: -.02em; display: flex; align-items: center; gap: 7px; }
.brand__tag { font-size: 10.5px; color: var(--text-faint); line-height: 1.3; margin-top: 2px; }
.brand__beta {
  font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; flex: none;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--border-strong);
}
.brand__ver { font-size: 9.5px; font-weight: 700; color: var(--text-faint); letter-spacing: .03em; margin-top: 3px; font-variant-numeric: tabular-nums; cursor: default; }
.brand__ver--link { cursor: pointer; display: inline-flex; align-items: center; }
.brand__ver--link:hover { color: var(--text-dim); text-decoration: underline; }
.ver-dot { display: none; }
.ver-dot.has-new { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--p1, #ef4444); margin-left: 5px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--p1, #ef4444) 25%, transparent); }
/* Bouton « Compte » (barre latérale) + onglets connexion / inscription */
.account-btn { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.account-btn__ic { font-size: 14px; opacity: .9; }
.account-btn.is-connected { color: var(--ok, #6cc070); border-color: color-mix(in srgb, var(--ok, #6cc070) 45%, transparent); }
.account-btn.is-connected .account-btn__ic { opacity: 1; }
.auth-tabs { display: flex; gap: 6px; background: var(--surface-2); padding: 4px; border-radius: 12px; margin-bottom: 12px; }
.auth-tab { flex: 1; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 650; color: var(--text-dim); transition: background var(--t-fast), color var(--t-fast); }
.auth-tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.more-ver { text-align: center; font-size: 10.5px; color: var(--text-faint); margin-top: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.more-ver:hover { color: var(--text-dim); text-decoration: underline; }
.more-item__new { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700; color: var(--accent-ink, #fff); background: var(--accent); border-radius: 999px; padding: 1px 7px; vertical-align: middle; letter-spacing: .02em; }
.link-btn { background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 0 0; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { opacity: .8; }
.rt-stat--done { color: var(--ok, #6cc070); font-variant-numeric: tabular-nums; }
.rt-stat--miss { color: var(--late, #e0492f); font-variant-numeric: tabular-nums; }
/* Écran d'accueil / connexion (plein écran) — affiché quand déconnecté sans données locales */
.auth-gate { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 24px; background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; overflow: auto; animation: ob-fade .25s ease; }
.auth-gate__card { width: 100%; max-width: 420px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 34px 26px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.55); }
.boot-spinner { width: 26px; height: 26px; margin: 18px auto 0; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: boot-spin .8s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
.auth-gate__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); margin-bottom: 20px; }
.auth-gate__brandname { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--text); display: inline-flex; align-items: center; gap: 7px; }
.auth-gate__title { font-size: 25px; font-weight: 700; margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; color: var(--text); }
.auth-gate__tag { font-size: 14px; color: var(--text-dim); margin: 0 0 4px; }
.auth-gate__sub { font-size: 13px; color: var(--text-faint); margin: 0 0 22px; line-height: 1.5; }
.auth-gate__actions { display: flex; flex-direction: column; gap: 10px; }
.auth-gate__actions .btn { width: 100%; padding: 12px; font-size: 15px; }
.auth-gate__local { display: inline-block; margin-top: 16px; }
.auth-gate__warn { font-size: 12.5px; color: var(--warn); margin: 18px 0 0; line-height: 1.5; }
.auth-gate__privacy { display: inline-block; margin-top: 16px; font-size: 12px; color: var(--text-faint); }
/* Section « Sécurité du compte » de la fenêtre Mon compte */
.acc-sec { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.link-btn--danger { color: var(--late, #c0472b); }
.link-btn--danger:hover { color: var(--late, #c0472b); opacity: .85; }
/* Compte créé, EN ATTENTE d'activation (lien email pas encore cliqué) : rappel permanent sur l'accueil */
.auth-gate__pending {
  font-size: 13.5px; line-height: 1.55; text-align: left;
  color: #d9a94a; background: rgba(217, 169, 74, .1);
  border: 1px solid rgba(217, 169, 74, .35); border-radius: 10px;
  padding: 11px 13px; margin: 0 0 16px;
}
.auth-gate__pending b { color: inherit; }
.auth-gate__retry { display: inline-block; margin-top: 8px; }
/* Champ mot de passe avec œil « afficher / masquer » */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { width: 100%; padding-right: 44px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--text-dim); background: transparent; cursor: pointer; }
.pw-toggle:hover { color: var(--text); background: var(--surface-2); }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-md);
  color: var(--text-dim); font-size: 14px; font-weight: 550;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  text-align: left;
}
.nav__icon { width: 18px; text-align: center; font-size: 13px; opacity: .8; }
.nav__item:hover { background: var(--surface-2); color: var(--text); }
.nav__item.is-active {
  background: var(--accent-soft); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.nav__item.is-active .nav__icon { color: var(--accent); opacity: 1; }

/* Carte joueur (RPG) */
.player-card {
  margin-top: auto;
  padding: 14px; border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.player-card__head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.level-badge {
  position: relative;
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px; font-weight: 750; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 16px -8px var(--accent);
}
.level-badge small { position: absolute; top: 3px; right: 5px; font-size: 7.5px; opacity: .8; font-weight: 600; letter-spacing: .04em; }
.player-card__meta { display: flex; flex-direction: column; line-height: 1.25; }
.player-card__meta b { font-size: 13.5px; }
.player-card__meta span { font-size: 11.5px; color: var(--text-faint); }

.sidebar__footer { display: flex; gap: 8px; }
.sidebar__footer + .sidebar__footer { margin-top: 8px; }
.ghost-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; border-radius: var(--r-md);
  font-size: 12px; color: var(--text-dim);
  border: 1px solid var(--border); background: var(--surface-2);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ghost-btn:hover { background: var(--surface-3); color: var(--text); }
.ghost-btn--danger:hover { color: var(--late); border-color: rgba(239,68,68,.4); }

/* ---------- Zone principale ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 30px 16px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar__title h1 { font-size: 21px; }
.topbar__title p { margin: 2px 0 0; font-size: 13px; color: var(--text-faint); }
.topbar__right { display: flex; align-items: center; gap: 14px; }
.topbar__xp { display: flex; align-items: center; gap: 14px; }

/* Boutons annuler / rétablir / son */
.ctrl-group { display: flex; gap: 4px; }
.ctrl-btn {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-size: 15px; color: var(--text-dim); border: 1px solid var(--border); background: var(--surface-2);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ctrl-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }

/* Bouton de langue : même gabarit que les autres boutons de la barre ; le drapeau SVG reste petit. */
.ctrl-btn--flag svg { display: block; border-radius: 2px; }
.ctrl-btn:disabled { opacity: .35; cursor: default; }
.ctrl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mini XP du topbar */
.xp-mini { display: flex; align-items: center; gap: 11px; }
.xp-mini__bar { width: 150px; }
.xp-mini__txt { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.xp-mini__txt b { color: var(--text); }

.content { padding: 24px 30px 90px; max-width: 1180px; width: 100%; }

/* ============================================================
   COMPOSANTS
   ============================================================ */

/* Barres de progression */
.bar { height: 8px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.bar__fill {
  height: 100%; border-radius: inherit;
  background: var(--prog-grad);
  width: 0; transition: width .6s var(--ease);
}
.bar--xp .bar__fill { background: var(--xp-grad); box-shadow: 0 0 14px -2px var(--accent); }
.bar--lg { height: 11px; }
.bar--sm { height: 6px; }

/* Cartes génériques */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-md);
}
.card--pad-lg { padding: 22px; }

.section-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); font-weight: 650;
  margin: 26px 2px 13px;
}
.section-title:first-child { margin-top: 4px; }
.section-title .count { color: var(--text-dim); background: var(--surface-2); padding: 1px 8px; border-radius: var(--r-pill); font-size: 11px; letter-spacing: 0; }

/* Boutons d'action */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600;
  transition: transform var(--t-fast), filter var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  border: 1px solid transparent; white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 8px 20px -10px var(--accent); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn--accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 700; }
.btn--accent:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.btn--sm { padding: 7px 12px; font-size: 12.5px; }
.btn--icon { padding: 8px 11px; }
.btn--block { width: 100%; }

/* Pastilles / badges */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
  background: var(--surface-2); color: var(--text-dim);
  border: 1px solid var(--border);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Badge de priorité */
.prio { font-weight: 700; }
.prio--1 { color: var(--p1); --ph: var(--p1); } .prio--2 { color: var(--p2); --ph: var(--p2); }
.prio--3 { color: var(--p3); --ph: var(--p3); } .prio--4 { color: var(--p4); --ph: var(--p4); } .prio--5 { color: var(--p5); --ph: var(--p5); }
.prio--6 { color: var(--p6); --ph: var(--p6); } .prio--7 { color: var(--p7); --ph: var(--p7); }
.prio--8 { color: var(--p8); --ph: var(--p8); } .prio--9 { color: var(--p9); --ph: var(--p9); }
.prio--none { color: var(--pnone); --ph: var(--pnone); }   /* « À trier » : pas encore de rang */
/* Puce de priorité : la PUCE garde la teinte pure, mais le TEXTE est mélangé vers la couleur du thème
   → lisible en clair ET en Emma (le violet P4 surtout, avant sous le seuil de contraste). */
.chip.prio--1, .chip.prio--2, .chip.prio--3, .chip.prio--4, .chip.prio--5,
.chip.prio--6, .chip.prio--7, .chip.prio--8, .chip.prio--9, .chip.prio--none {
  color: color-mix(in srgb, var(--ph) 55%, var(--text));
  background: color-mix(in srgb, var(--ph) 16%, transparent);
  border-color: color-mix(in srgb, var(--ph) 40%, transparent);
}
.chip.prio--1 .dot, .chip.prio--2 .dot, .chip.prio--3 .dot, .chip.prio--4 .dot, .chip.prio--5 .dot,
.chip.prio--6 .dot, .chip.prio--7 .dot, .chip.prio--8 .dot, .chip.prio--9 .dot, .chip.prio--none .dot { background: var(--ph); }
.chip.prio--none { border-style: dashed; }

/* Badge de statut timeline */
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 650; }
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; }
.st-ok    { color: var(--ok);     background: rgba(34,197,94,.12);  } .st-ok .dot    { background: var(--ok); }
.st-intime{ color: var(--intime); background: rgba(56,189,248,.12); } .st-intime .dot{ background: var(--intime); }
.st-late  { color: var(--late);   background: rgba(239,68,68,.12);  } .st-late .dot  { background: var(--late); }
.st-none  { color: var(--text-faint); background: var(--surface-2); } .st-none .dot { background: var(--text-faint); }

/* Statut tâche projet */
.tstatus { font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: var(--r-pill); }
.tstatus--todo { color: var(--text-faint); background: var(--surface-2); }
.tstatus--inprogress { color: var(--warn); background: rgba(245,158,11,.13); }
.tstatus--done { color: var(--ok); background: rgba(34,197,94,.13); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-hero {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px;
}
.hero-xp { position: relative; overflow: hidden; }
.hero-xp__top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.hero-xp__badge {
  width: 60px; height: 60px; flex: none; display: grid; place-items: center;
  border-radius: 16px; font-size: 24px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 30px -12px var(--accent);
}
.hero-xp__head h2 { font-size: 18px; }
.hero-xp__head p { margin: 3px 0 0; color: var(--text-dim); font-size: 13px; }
.hero-xp__nums { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; }
.hero-xp__nums b { font-size: 30px; font-weight: 750; letter-spacing: -.02em; }
.hero-xp__nums span { color: var(--text-faint); font-size: 13px; }
.hero-xp__hint { margin-top: 9px; font-size: 12.5px; color: var(--text-faint); }

/* Tuiles de stats */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 15px; display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.stat:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.stat__val { font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.stat__label { font-size: 12px; color: var(--text-faint); }
.stat__ic { font-size: 14px; opacity: .85; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.dash-grid--3 { grid-template-columns: 1.2fr 1fr 1fr; }

.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-head h3 { font-size: 15px; }
.panel-head .link { font-size: 12.5px; color: var(--accent); font-weight: 600; }
.panel-head .link:hover { text-decoration: underline; }

/* Liste compacte (tâches du jour, semaine, activité) */
.mini-list { display: flex; flex-direction: column; gap: 2px; }
.mini-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.mini-item:hover { background: var(--surface-2); }
.mini-item__main { min-width: 0; flex: 1; }
.mini-item__title { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-item__sub { font-size: 11.5px; color: var(--text-faint); }
.mini-item__xp { font-size: 11.5px; color: var(--ok); font-weight: 650; white-space: nowrap; }
.mini-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); }

/* Mini projet sur dashboard */
.proj-mini { display: flex; flex-direction: column; gap: 9px; padding: 11px 0; border-top: 1px solid var(--border); }
.proj-mini:first-child { border-top: none; padding-top: 2px; }
.proj-mini__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.proj-mini__name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-mini__pct { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

/* ============================================================
   MODE SIMPLE
   ============================================================ */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.toolbar__progress { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; }
.toolbar__progress .bar { flex: 1; }
.toolbar__progress .pct { font-size: 13px; font-weight: 650; color: var(--text); white-space: nowrap; }
.toolbar__progress .lbl { font-size: 12px; color: var(--text-faint); white-space: nowrap; }

/* Saisie rapide */
.quick-add { display: flex; gap: 8px; margin: 14px 0 6px; }
.quick-add input {
  flex: 1; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: 14px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.quick-add input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.quick-add select {
  padding: 0 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 13px;
}
/* Mobile : on n'entasse plus champ + échéance + bouton sur une ligne (c'était trop serré). */
@media (max-width: 560px) {
  .quick-add { flex-wrap: wrap; }
  .quick-add input { flex: 1 1 100%; }        /* le champ prend toute la 1re ligne */
  .quick-add select { flex: 1 1 auto; height: 42px; }   /* échéance + « + Ajouter » sur la 2e ligne */
}

/* Ligne de tâche (mode simple + projet) */
.task {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), opacity var(--t);
}
.task + .task { margin-top: 8px; }
.task:hover { border-color: var(--border-strong); }
.task.is-done { opacity: .62; }
.task.is-done .task__title { text-decoration: line-through; color: var(--text-dim); }
.task__main { flex: 1; min-width: 0; }
.task__title { font-size: 14px; font-weight: 550; overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }  /* titre long → COUPÉ à 2 lignes (…) */
.task__main { min-width: 0; }   /* laisse le titre se couper au lieu de déborder (mobile) */
.task__sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Un mot très long (URL collée dans une description…) doit se COUPER, pas élargir la page (mobile). */
.task__sub > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.desc-more { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer; white-space: nowrap; }  /* lien discret « voir plus » (descriptions tronquées) */
.desc-more:hover, .desc-more:focus-visible { text-decoration: underline; }
.task-pts { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 650; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 8px; }
.task__actions { display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity var(--t-fast); }
.task:hover .task__actions, .task:focus-within .task__actions { opacity: 1; }

/* Coche personnalisée */
.check {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex: none; border-radius: 7px;
  border: 2px solid var(--border-strong); background: transparent;
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.check:hover { border-color: var(--accent); }
.check:checked { background: linear-gradient(135deg, var(--ok), #4ade80); border-color: transparent; }
.check:checked::after { content: "✓"; color: #06270f; font-size: 13px; font-weight: 900; }
.check:active { transform: scale(.88); }

.icon-btn {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: var(--text-faint); font-size: 14px; transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn--danger:hover { color: var(--late); }

/* Indicateur de focus clavier visible (accessibilité) */
.nav__item:focus-visible, .bottomnav__item:focus-visible, .btn:focus-visible,
.icon-btn:focus-visible, .ghost-btn:focus-visible, .check:focus-visible,
.seg button:focus-visible, [data-go]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Sur écran tactile : cibles d'appui plus grandes (recommandation ~44 px — les 30-32 px
   du desktop sont trop petits au doigt) sans toucher à l'affichage souris. */
@media (pointer: coarse) {
  .icon-btn { width: 40px; height: 40px; }
  .ctrl-btn { width: 40px; height: 40px; }
}

/* Sur écran tactile (pas de survol), les actions de tâche restent visibles. */
@media (hover: none) {
  .task__actions { opacity: 1; }
}

/* ============================================================
   PROJETS
   ============================================================ */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.proj-card {
  display: flex; flex-direction: column; gap: 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--shadow-md); cursor: pointer;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.proj-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.proj-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.proj-card__title { font-size: 16px; font-weight: 650; }
.proj-card__goal { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proj-card__prog { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-faint); margin-bottom: 6px; }
.proj-card__prog b { color: var(--text); font-size: 13px; }
.proj-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* Pastille de statut : couleur distincte par statut (le texte se mélange au thème pour rester lisible). */
.proj-status--active { color: color-mix(in srgb, #3b82f6 60%, var(--text)); background: color-mix(in srgb, #3b82f6 15%, transparent); border-color: color-mix(in srgb, #3b82f6 40%, transparent); }
.proj-status--paused { color: color-mix(in srgb, #f59e0b 60%, var(--text)); background: color-mix(in srgb, #f59e0b 15%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, transparent); }
.proj-status--done   { color: color-mix(in srgb, #22c55e 60%, var(--text)); background: color-mix(in srgb, #22c55e 16%, transparent); border-color: color-mix(in srgb, #22c55e 42%, transparent); }
/* Bouton « Marquer terminé » sur une carte à 100 % : liseré doré/vert qui tourne autour. */
.proj-done-btn { position: relative; z-index: 0; display: block; width: 100%; margin: 2px 0 2px; border: 2px solid transparent; border-radius: 12px; background: var(--surface); color: color-mix(in srgb, #22c55e 55%, var(--text)); font-size: 13px; font-weight: 800; padding: 10px 14px; cursor: pointer; overflow: hidden; }
.proj-done-btn::before { content: ""; position: absolute; z-index: -2; inset: -60%; background: conic-gradient(from 0deg, transparent 0 52%, #22c55e 66%, #ffe08a 80%, #22c55e 90%, transparent 100%); animation: projDoneSpin 2.3s linear infinite; }
.proj-done-btn::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 10px; background: var(--surface); }
.proj-done-btn:hover { color: color-mix(in srgb, #22c55e 70%, var(--text)); }
.proj-done-btn:hover::after { background: color-mix(in srgb, #22c55e 10%, var(--surface)); }
@keyframes projDoneSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .proj-done-btn::before { animation: none; } }
/* Badge « X en ligne » (topbar, visible pour tous) + grille de stats admin */
.online-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 10px; white-space: nowrap; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent); animation: onlinePulse 2.2s ease-in-out infinite; }
@keyframes onlinePulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .online-dot { animation: none; } }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; text-align: center; }
.stat-box b { display: block; font-size: 26px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-box span { font-size: 12px; color: var(--text-dim); }
/* Stats admin : chiffres clés + courbe de croissance (progressionChartSVG) + bande d'activité */
.stats-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-box--kpi { text-align: left; padding: 14px 16px; }
.stat-box--kpi b { font-size: 30px; }
.online-dot--inline { display: inline-block; vertical-align: middle; margin-right: 7px; }
.stats-section { margin-top: 18px; }
.stats-h { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.stats-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-mini { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 6px; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; text-align: center; }
.stat-mini b { font-size: 20px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-mini span { font-size: 11px; color: var(--text-dim); }
.stats-note { font-size: 12px; color: var(--text-faint); margin-top: 16px; line-height: 1.5; }
.proj-card__meta { font-size: 11.5px; color: var(--text-faint); }

/* Board admin : sélecteur de période, tableau des outils, histogramme des heures, liste de comptes */
.adm-period { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); margin-bottom: 6px; }
.adm-period__btn { font-size: 12.5px; font-weight: 600; color: var(--text-dim); padding: 5px 12px; border-radius: var(--r-pill); transition: background var(--t-fast), color var(--t-fast); }
.adm-period__btn.is-on { background: var(--accent); color: #fff; }
.adm-tools { display: flex; flex-direction: column; gap: 2px; }
.adm-trow { display: grid; grid-template-columns: 1fr 68px 72px 74px 42px; align-items: center; gap: 6px; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.adm-trow--head { border-bottom: 1px solid var(--border-strong); }
/* Section « Fonctionnalités » : 3 colonnes ; les lignes à ZÉRO restent visibles (c'est l'info) mais éteintes. */
.adm-trow--feat { grid-template-columns: 1fr 82px 64px; }
.adm-trow--feat.is-zero { opacity: .45; }
.adm-trow--head span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.adm-tcell { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.adm-tcell--lbl { position: relative; text-align: left; font-weight: 600; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 4px; }
.adm-tbar { position: absolute; inset: 0 auto 0 0; z-index: -1; display: block; height: 100%; }
.adm-tbar__fill { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 0 6px 6px 0; }
.adm-hours { display: flex; align-items: flex-end; gap: 3px; height: 84px; padding-top: 6px; }
.adm-hour { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.adm-hour__fill { width: 100%; max-width: 14px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 3px 3px 0 0; }
.adm-hour__lbl { font-size: 9px; color: var(--text-faint); height: 10px; }
.adm-accounts { display: flex; flex-direction: column; gap: 8px; }
.adm-acc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.adm-acc__main { flex: 1; min-width: 0; }
.adm-acc__email { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.adm-acc__meta { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

/* Détail projet */
.detail-head { margin-bottom: 18px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); margin-bottom: 14px; }
.back-link:hover { color: var(--text); }
.detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.detail-top h2 { font-size: 24px; }
.detail-top__goal { color: var(--text-dim); font-size: 14px; margin-top: 6px; max-width: 620px; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Panneau de synthèse projet (progression + timeline) */
.proj-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 6px; }
.summary-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; }
.summary-box h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 12px; }
.summary-num { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.summary-num b { font-size: 32px; font-weight: 750; letter-spacing: -.02em; }
.summary-num span { color: var(--text-faint); font-size: 13px; }
.summary-line { font-size: 13px; color: var(--text-dim); margin-top: 12px; }
.replan {
  margin-top: 12px; padding: 11px 13px; border-radius: var(--r-md);
  background: rgba(245,158,11,.09); border: 1px solid rgba(245,158,11,.25);
  font-size: 12.5px; color: var(--text); line-height: 1.5;
}
.replan b { color: var(--warn); }
.timeline-track { position: relative; height: 11px; }
.timeline-marker {
  position: absolute; top: -4px; width: 2px; height: 19px; background: var(--text);
  border-radius: 2px;
}
.timeline-marker::after {
  content: "attendu"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: var(--text-faint); white-space: nowrap;
}

/* Catégories */
.category { margin-top: 16px; }
.category__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 10px; }
.category__title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; }
.category__title .cat-pct { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.category__bar { width: 120px; }

/* ============================================================
   IDÉES
   ============================================================ */
.ideas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.idea-card {
  display: flex; flex-direction: column; gap: 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 17px; box-shadow: var(--shadow-md);
  transition: transform var(--t), border-color var(--t);
}
.idea-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.idea-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.idea-card__title { font-size: 15px; font-weight: 650; }
.idea-card__desc { font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; }  /* le texte est tronqué à ~200 car. côté JS (« voir plus ») — l'ancien line-clamp: 3 aurait caché le lien */
.idea-card__notes { font-size: 12px; color: var(--text-faint); }
.idea-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.st-raw { color: var(--text-dim); background: var(--surface-2); }
.st-explore { color: var(--intime); background: rgba(56,189,248,.12); }
.st-transformed { color: var(--ok); background: rgba(34,197,94,.12); }
.idea-status { font-size: 11px; font-weight: 650; padding: 3px 10px; border-radius: var(--r-pill); }

/* ============================================================
   ÉTATS VIDES
   ============================================================ */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 46px 20px; text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  color: var(--text-faint); background: var(--surface);
}
.empty__ic { font-size: 30px; opacity: .5; }
.empty h3 { color: var(--text-dim); font-size: 15px; }
.empty p { font-size: 13px; max-width: 360px; }

/* ============================================================
   MODALE
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 18px;
  background: rgba(4,6,12,.55); backdrop-filter: blur(6px);
  animation: fade .18s var(--ease);
}
.modal {
  width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  animation: pop .22s var(--ease);
}
.modal--wide { max-width: 680px; }
/* « Grande fenêtre » (ordinateur) : on respire, utile pour une fiche de tâche avec des blocs.
   Le bouton ⤢ de l'en-tête bascule, et le choix est mémorisé sur l'appareil. */
.modal--big { max-width: min(1180px, 94vw); max-height: 94vh; }
.modal-expand { font-size: 15px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; }
/* Les boutons ⤢ / ✕ restent collés ensemble à droite (sinon space-between pousse ⤢ au milieu). */
.modal__head-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.modal__head h3 { font-size: 16px; min-width: 0; overflow-wrap: anywhere; }   /* un titre long ne doit jamais élargir la fenêtre (mobile) */
.modal__body { padding: 20px; }
.modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--surface); }

/* Formulaires */
.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 0; }
.field > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 13px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-size: 14px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 78px; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Icône d'ouverture du calendrier / de l'heure : bien VISIBLE et cliquable (retour Jason 2026-07-11).
   Avec color-scheme, le navigateur la dessine déjà dans la teinte du thème — on force juste le contraste.
   (On peut aussi TAPER directement dans le champ : chiffres au clavier, sans passer par le popup.) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: .8; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 5px; }

/* Sélecteur segmenté (priorité, complexité, statut, échéance) */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
  /* min-width: max-content (et pas un pixel fixe) : un bouton ne peut JAMAIS être plus étroit que
     son libellé — sur mobile le texte ne « sort plus de la bulle », le bouton passe à la ligne
     (flex-wrap du conteneur). Retour Jason 2026-07-09. */
  flex: 1; min-width: max-content; padding: 9px 8px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
  font-size: 12.5px; font-weight: 600; transition: all var(--t-fast); white-space: nowrap;
}
.seg button:hover { border-color: var(--border-strong); color: var(--text); }
.seg button.is-sel { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.seg--prio button.is-sel.prio--1 { color: var(--p1); border-color: var(--p1); background: rgba(239,68,68,.1); }
.seg--prio button.is-sel.prio--2 { color: var(--p2); border-color: var(--p2); background: rgba(249,115,22,.1); }
.seg--prio button.is-sel.prio--3 { color: var(--p3); border-color: var(--p3); background: rgba(59,130,246,.1); }
.seg--prio button.is-sel.prio--4 { color: var(--p4); border-color: var(--p4); background: rgba(139,92,246,.1); }
.seg--prio button.is-sel.prio--5 { color: var(--p5); border-color: var(--p5); background: rgba(148,163,184,.12); }
.seg--prio button.is-sel.prio--6, .seg--prio button.is-sel.prio--7,
.seg--prio button.is-sel.prio--8, .seg--prio button.is-sel.prio--9 { color: var(--ph); border-color: var(--ph); background: color-mix(in srgb, var(--ph) 12%, transparent); }
.seg--prio button.is-sel.prio--none { color: var(--pnone); border-color: var(--pnone); border-style: dashed; background: color-mix(in srgb, var(--pnone) 12%, transparent); }
/* Bouton « + » : révèle les rangs étendus P6-P9 (proposé seulement quand P1-P5 sont tous pris). */
.seg--prio .seg-more { flex: none; min-width: 38px; font-weight: 800; color: var(--text-dim); border-style: dashed; }

/* Notes d'idée */
.note-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; max-height: 220px; overflow-y: auto; }
.note {
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--border); font-size: 13px; line-height: 1.45;
}
.note__date { font-size: 10.5px; color: var(--text-faint); margin-top: 5px; }
.note-empty { font-size: 12.5px; color: var(--text-faint); padding: 8px 2px; }
/* Notes rapides (v23) : onglet Notes de la page Idées + bloc Notes de la fiche projet */
.gnote-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.gnote-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gnote-row__main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gnote-row__actions { display: flex; align-items: center; gap: 5px; flex: none; }
@media (max-width: 560px) { .gnote-row { flex-direction: column; } .gnote-row__actions { align-self: flex-end; } }
/* Commentaires longs : repliés sur 3 lignes, CLIC sur le texte pour tout voir / réduire. */
.cm-text--clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.cm-text--clamp.is-open { display: block; -webkit-line-clamp: unset; }
.cm-more-hint { font-size: 10.5px; color: var(--accent); cursor: pointer; user-select: none; }
.proj-notes { margin-top: 16px; padding: 12px 15px; }
/* Menu « Plus » (mobile) : intitulés de section (Aller à / Réglages) */
.more-sec-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 700; margin: 16px 2px 8px; }
.more-sec-lbl:first-child { margin-top: 0; }
.proj-notes__head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 0; cursor: pointer; color: var(--text-dim); text-align: left; }
.proj-notes__head h3 { font-size: 13.5px; margin: 0; }
.proj-notes__head:hover { color: var(--text); }

/* ============================================================
   TOASTS (feedback XP)
   ============================================================ */
.toasts { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }

/* Micro-jauge « cases cochées » sur une ligne de tâche (3/10 + barre). Verte quand tout est fait. */
.task-progress { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-progress__track { width: 56px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; flex: none; }
.task-progress__fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .25s var(--ease); }
.task-progress.is-full { color: #22c55e; }
.task-progress.is-full .task-progress__fill { background: #22c55e; }

/* « Écrire en grand » (téléphone) : BULLE centrée ouverte en touchant une zone d'écriture — pas
   une pleine page (retour Jason 2026-08-16). Placée en haut (le clavier vit en bas), elle grandit
   avec le texte. Au-dessus de tout (fenêtres 100, toasts 200, infobulles 300) ; 16px = pas de zoom iOS. */
.bigwrite { position: fixed; inset: 0; z-index: 350; display: flex; align-items: flex-start; justify-content: center; padding: max(16vh, 34px) 14px 14px; background: rgba(4, 6, 12, .55); backdrop-filter: blur(4px); animation: fade .15s var(--ease); }   /* ~centrée dans la zone VISIBLE (le clavier occupe le bas) */
.bigwrite__card { width: 100%; max-width: 560px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .18s var(--ease); }
.bigwrite__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.bigwrite__lbl { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bigwrite__ta { width: 100%; min-height: 52px; max-height: 40vh; overflow-y: auto; border: none; background: transparent; color: var(--text); font-size: 16px; line-height: 1.6; padding: 13px 14px; resize: none; font-family: inherit; }
.bigwrite__ta:focus { outline: none; }
.toast {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); min-width: 220px; max-width: 320px;
  animation: toast-in .3s var(--ease);
}
.toast.is-out { animation: toast-out .3s var(--ease) forwards; }
.toast__ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--ok), #4ade80); }
.toast__ic--big { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.toast__ic--level { background: linear-gradient(135deg, #f59e0b, #f97316); }
.toast__main b { font-size: 14px; }
.toast__main span { display: block; font-size: 12px; color: var(--text-dim); margin-top: 1px; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }
@keyframes pulse-done { 0% { transform: scale(1); } 35% { transform: scale(1.015); } 100% { transform: scale(1); } }
.task--celebrate { animation: pulse-done .4s var(--ease); border-color: var(--ok) !important; }

/* Apparition douce des vues */
.content > * { animation: fade .25s var(--ease); }

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   VUE « ENSEMBLE » (espaces partagés — plan 3, phase 3)
   ============================================================ */
.space-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.space-head__name { font-size: 20px; font-weight: 800; margin: 0; }
.space-head__actions { display: flex; gap: 14px; }
.slist-add { display: flex; gap: 8px; margin: 10px 0 14px; }
/* ⚠️ Le champ n'est PAS dans un .field → il faut le styler ici, sinon fond BLANC du navigateur
   et texte illisible en thème sombre (bug relevé par Jason 2026-07-11, vue Listes). */
.slist-add input {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: 14px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.slist-add input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.slist { display: flex; flex-direction: column; gap: 8px; }
.slist-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.slist-row.is-done .slist-row__text { color: var(--text-faint); text-decoration: line-through; }
.slist-row__main { flex: 1; min-width: 0; }
/* Variante cliquable (routine partagée de la vue Aujourd'hui → ramène à son espace). */
.slist-row__main--link { cursor: pointer; border-radius: 8px; transition: background var(--t-fast); }
.slist-row__main--link:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.slist-row__text { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.slist-row__meta { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.slist-check {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--border-strong); background: transparent; color: var(--ok);
  font-size: 14px; font-weight: 800; transition: border-color var(--t-fast), background var(--t-fast);
}
.slist-check:hover { border-color: var(--ok); }
.is-done .slist-check { border-color: var(--ok); background: rgba(34, 197, 94, .12); }
.sroutine--off { opacity: .55; }   /* routine pas prévue aujourd'hui (ou en pause) : présente mais discrète */
/* Badge « du nouveau chez les autres » sur l'onglet Ensemble (allumé par le moteur, éteint quand on regarde la vue) */
[data-nav].has-new .nav__label::after, .bottomnav__item.has-new small::after {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-left: 6px; vertical-align: middle;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
.bottomnav { display: none; }

@media (max-width: 980px) {
  .dash-hero, .dash-grid, .dash-grid--3, .proj-summary { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { padding: 16px 18px 12px; position: sticky; gap: 10px; }
  .topbar__title h1 { font-size: 18px; }
  .topbar__title p { display: none; }                                /* sous-titre masqué sur mobile (place) */
  .topbar__right { gap: 8px; min-width: 0; }
  /* Badge de présence : sa phrase est trop longue pour la barre mobile (elle poussait « + » hors
     écran — retour Jason 2026-07-09). Il reste visible sur ordinateur ; sur mobile, on ne le montre pas. */
  #online-count { display: none; }
  /* Sauvegarde/Aide/Langue/Son → menu « Plus » ; MAIS Annuler/Rétablir restent visibles : sur téléphone
     il n'y a ni Ctrl+Z ni autre moyen d'annuler une action (retour Jason 2026-07-11, iPhone).
     Drapeau + son retirés de la barre mobile (retour testeurs 2026-08) : l'accès passe par « Plus ». */
  #backup-btn, #help-btn, #lang-toggle, #sound-btn { display: none; }
  .nt-label { display: none; }                                       /* « + Nouvelle tâche » → juste « + » */
  .topbar [data-action="new-task-quick"] { padding-left: 13px; padding-right: 13px; }
  /* Marge basse = hauteur de la barre de navigation + zone sûre (encoches). */
  .content { padding: 18px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .xp-mini__bar { width: 96px; }

  /* Barre de navigation basse */
  .bottomnav {
    display: grid; grid-template-columns: repeat(7, 1fr);
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .bottomnav__item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border-radius: var(--r-md); color: var(--text-faint);
    font-size: 0; transition: color var(--t-fast), background var(--t-fast); min-width: 0;
  }
  .bottomnav__item span { font-size: 16px; }
  .bottomnav__item small { font-size: 9.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottomnav__item.is-active { color: var(--accent); background: var(--accent-soft); }

  .field-row { grid-template-columns: 1fr; }
  .detail-top h2 { font-size: 20px; }
  .toasts { left: 14px; right: 14px; bottom: 84px; align-items: stretch; }
  .toast { max-width: none; }
  /* Le TITRE peut défiler (gagne de la hauteur), mais le pied de fenêtre reste COLLANT : sans ça,
     il fallait faire défiler tout le formulaire pour atteindre « Ajouter » (retour Jason 2026-08-04). */
  .modal__head { position: static; }
  /* Sur téléphone la fenêtre occupe déjà l'écran : le bouton « agrandir » n'a rien à faire là. */
  .modal-expand { display: none; }
  .modal__foot { position: sticky; bottom: 0; z-index: 2; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, .45); }
}

@media (max-width: 420px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   v2 — TOOLTIPS / BULLES D'AIDE
   ============================================================ */
.tooltip {
  position: fixed; z-index: 300; left: 0; top: 0; max-width: 270px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  font-size: 12.5px; line-height: 1.45;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.tooltip.is-on { opacity: 1; transform: none; }
/* Petit "i" d'aide cliquable/survolable */
.help-i {
  display: inline-grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; font-size: 10px; font-weight: 800; font-style: normal;
  color: var(--text-faint); border: 1px solid var(--border-strong);
  cursor: help; vertical-align: middle; transition: color var(--t-fast), border-color var(--t-fast);
}
.help-i:hover { color: var(--accent); border-color: var(--accent); }
[data-tip] { cursor: help; }
.task [data-tip], .btn[data-tip], .nav__item[data-tip] { cursor: pointer; }

/* ============================================================
   v2 — DASHBOARD CLIQUABLE
   ============================================================ */
.stat.is-link { cursor: pointer; }
.stat.is-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.panel-head h3.is-link, .panel-head .link { cursor: pointer; }
.panel-head h3.is-link:hover { color: var(--accent); }

/* Barre de filtre (vue Projets filtrée depuis le dashboard) */
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 13px;
  border-radius: var(--r-pill); background: var(--accent-soft);
  border: 1px solid var(--accent); font-size: 12.5px; font-weight: 600;
}
.filter-chip button { color: var(--text-dim); font-size: 15px; line-height: 1; padding: 0 4px; }
.filter-chip button:hover { color: var(--text); }

/* Modale "focus" (Aujourd'hui / Cette semaine / Terminées en grand) */
.focus-list { display: flex; flex-direction: column; gap: 8px; }
.focus-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color var(--t-fast);
}
.focus-item:hover { border-color: var(--border-strong); }
.focus-item__main { flex: 1; min-width: 0; }
.focus-item__title { font-size: 14.5px; font-weight: 550; }
.focus-item.is-done .focus-item__title { text-decoration: line-through; color: var(--text-dim); }
.focus-item__sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ============================================================
   v2 — REDONDANCE (réutiliser une tâche d'une autre catégorie)
   ============================================================ */
.tmpl-box {
  margin-bottom: 15px; padding: 12px 13px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px dashed var(--border-strong);
}
/* En-tête devenu un BOUTON dépliant (bloc replié par défaut — retour Jason 2026-07-11). */
.tmpl-box__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-dim); width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.tmpl-box__head:hover { color: var(--text); }
.tmpl-box #tmpl-body { margin-top: 10px; }
.tmpl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tmpl-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-dim); cursor: pointer; transition: all var(--t-fast);
}
.tmpl-chip:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.tmpl-chip .dot { width: 6px; height: 6px; border-radius: 50%; }

/* ============================================================
   v2 — PRIORITÉ DE CATÉGORIE
   ============================================================ */
.cat-prio {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; line-height: 1.5;
  border: 1px solid var(--border);
}
.cat-prio .dot { width: 6px; height: 6px; border-radius: 50%; }
.cat-prio.prio--1, .cat-prio.prio--2, .cat-prio.prio--3, .cat-prio.prio--4, .cat-prio.prio--5,
.cat-prio.prio--6, .cat-prio.prio--7, .cat-prio.prio--8, .cat-prio.prio--9 { color: color-mix(in srgb, var(--ph) 55%, var(--text)); background: color-mix(in srgb, var(--ph) 13%, transparent); border-color: color-mix(in srgb, var(--ph) 34%, transparent); }

/* ============================================================
   v2 — VUE PYRAMIDE / ARBORESCENCE
   ============================================================ */
.view-toggle { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; }
.view-toggle button { padding: 6px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); transition: background var(--t-fast), color var(--t-fast); }
.view-toggle button.is-on { background: var(--accent-soft); color: var(--text); }

.pyramid { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 8px 0 6px; }
.pyr-apex {
  padding: 13px 26px; border-radius: 16px; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 34px -14px var(--accent);
}
.pyr-apex small { display: block; font-size: 9.5px; opacity: .85; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
.pyr-apex b { font-size: 15.5px; }
.pyr-apex .pyr-apex__pct { font-size: 12px; opacity: .9; margin-top: 3px; }
.pyr-row {
  width: 100%; max-width: 760px;
  background: var(--surface); border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--r-md); padding: 11px 14px; transition: width .45s var(--ease);
}
.pyr-row.prio--1 { border-left-color: var(--p1); }
.pyr-row.prio--2 { border-left-color: var(--p2); }
.pyr-row.prio--3 { border-left-color: var(--p3); }
.pyr-row.prio--4 { border-left-color: var(--p4); }
.pyr-row.prio--5 { border-left-color: var(--p5); }
.pyr-row__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.pyr-row__label { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.pyr-row__meta { font-size: 11px; color: var(--text-faint); }
.pyr-row__tasks { display: flex; flex-wrap: wrap; gap: 6px; }
.pyr-task {
  font-size: 11px; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
}
.pyr-task.is-done { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.32); color: var(--ok); text-decoration: line-through; }
.pyr-task.is-inprogress { border-color: rgba(245,158,11,.4); color: var(--warn); }
.pyr-empty-row { font-size: 11px; color: var(--text-faint); font-style: italic; }
.pyr-foundation { font-size: 11px; color: var(--text-faint); letter-spacing: .04em; }

/* ============================================================
   v2 — CALENDRIER
   ============================================================ */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-title { font-size: 17px; font-weight: 650; text-transform: capitalize; min-width: 170px; text-align: center; }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-faint); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.cal-grid-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-md); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-weekday { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
  min-height: 96px; border-radius: var(--r-sm); background: var(--surface-2);
  border: 1px solid var(--border); padding: 6px 7px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.cal-cell:hover { border-color: var(--border-strong); }
.cal-cell.is-out { opacity: .38; }
.cal-cell.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cell.is-sel { background: var(--accent-soft); }
.cal-cell__day { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.cal-cell.is-today .cal-cell__day { color: var(--accent); }
.cal-cell__evts { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-evt {
  font-size: 10.5px; padding: 2px 6px; border-radius: 5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; background: var(--surface-3);
  border-left: 3px solid var(--accent);
}
.cal-evt.is-done { opacity: .5; text-decoration: line-through; }
.cal-more { font-size: 10px; color: var(--text-faint); }
.cal-cell__dots { display: none; }   /* desktop : on montre les pastilles-texte, pas les points */

.cal-agenda { margin-top: 18px; }
.cal-agenda__day { display: flex; flex-direction: column; gap: 8px; }

/* Agenda refonte : sélecteur de vue + grilles horaires (Jour/Semaine) + vue Année + chooser création */
.cal-head__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-modes { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); }
.cal-modes__btn { font-size: 12.5px; font-weight: 600; color: var(--text-dim); padding: 5px 12px; border-radius: var(--r-pill); transition: background var(--t-fast), color var(--t-fast); }
.cal-modes__btn.is-on { background: var(--accent); color: #fff; }
.cal-tgwrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.cal-colhead { display: flex; border-bottom: 1px solid var(--border); }
.cal-colhead__gutter { width: 52px; flex: none; }
.cal-colhead__days { flex: 1; display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); }
.cal-colhead__day { padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; border-left: 1px solid var(--border); transition: background var(--t-fast); }
.cal-colhead__day:hover { background: var(--surface-2); }
.cal-colhead__wd { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); }
.cal-colhead__num { font-size: 16px; font-weight: 700; color: var(--text-dim); }
.cal-colhead__day.is-today .cal-colhead__num { background: var(--accent); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.cal-colhead__day.is-sel .cal-colhead__wd { color: var(--accent); }
.cal-ad { display: flex; border-bottom: 1px solid var(--border); background: var(--surface-2); min-height: 30px; }
.cal-ad__gutter { width: 52px; flex: none; font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; justify-content: center; text-align: center; }
.cal-ad__cells { flex: 1; display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); }
.cal-ad__cell { border-left: 1px solid var(--border); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-ad__evt { font-size: 11px; font-weight: 600; text-align: left; padding: 3px 7px; border-radius: 5px; color: var(--text); background: color-mix(in srgb, var(--c) 20%, transparent); border-left: 3px solid var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ad__evt.is-done { opacity: .5; text-decoration: line-through; }
.cal-tg__scroll { max-height: min(64vh, 660px); overflow-y: auto; display: flex; align-items: flex-start; }
.cal-tg__hours { width: 52px; flex: none; }
.cal-tg__hr { height: var(--hpx); position: relative; }
.cal-tg__hr span { position: absolute; top: -7px; right: 7px; font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
/* Hauteur EXPLICITE = 24 h : sinon les colonnes (contenu en position absolue) s'effondrent à la
   hauteur du cadre visible et se désalignent des heures au défilement. */
.cal-tg__cols { flex: 1; display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); height: calc(24 * var(--hpx)); }
.cal-tg__col { position: relative; border-left: 1px solid var(--border); min-width: 0; height: calc(24 * var(--hpx)); }
.cal-tg__col.is-today { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cal-tg__lines { position: absolute; inset: 0; }
.cal-tg__line { height: var(--hpx); border-bottom: 1px solid var(--border); }
.cal-blk { position: absolute; z-index: 1; overflow: hidden; text-align: left; padding: 2px 6px; border-radius: 5px; color: var(--text); background: color-mix(in srgb, var(--c) 24%, var(--surface)); border-left: 3px solid var(--c); box-shadow: var(--shadow-sm); transition: filter var(--t-fast); }
.cal-blk:hover { filter: brightness(1.06); z-index: 2; }
.cal-blk__t { font-size: 11.5px; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
.cal-blk--short .cal-blk__t { -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; }
.cal-blk.is-done { opacity: .5; }
.cal-blk.is-done .cal-blk__t { text-decoration: line-through; }
/* Ligne « maintenant » (colonne d'aujourd'hui, vues Jour/Semaine) */
.cal-tg__now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--late); z-index: 3; pointer-events: none; }
.cal-tg__now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--late); }
/* Vue Année : 12 mini-mois */
.cy-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cy-month { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; }
.cy-month__name { display: block; width: 100%; text-align: center; font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; text-transform: capitalize; border-radius: var(--r-sm); padding: 3px; transition: background var(--t-fast); }
.cy-month__name:hover { background: var(--surface-2); color: var(--accent); }
.cy-wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 3px; }
.cy-wd span { text-align: center; font-size: 9px; color: var(--text-faint); }
.cy-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cy-day { min-width: 0; aspect-ratio: 1; display: grid; place-items: center; font-size: 10.5px; color: var(--text-dim); border-radius: 5px; overflow: hidden; transition: background var(--t-fast); }
.cy-day:hover { background: var(--surface-2); }
.cy-day.is-out { opacity: .3; }
.cy-day.is-today { background: var(--accent); color: #fff; font-weight: 700; }
.cy-day.has-evt:not(.is-today) { box-shadow: inset 0 -3px 0 -1px color-mix(in srgb, var(--accent) 60%, transparent); font-weight: 700; color: var(--text); }
/* Chooser de création (clic sur l'agenda) */
.qc-choices { display: flex; flex-direction: column; gap: 8px; }
.qc-choice { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 4px 12px; text-align: left; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color var(--t-fast), background var(--t-fast); }
.qc-choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.qc-choice__ic { grid-row: 1 / 3; font-size: 22px; text-align: center; }
.qc-choice b { font-size: 14px; }
.qc-choice small { color: var(--text-faint); font-size: 12px; }
@media (max-width: 720px) {
  .cy-wrap { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cal-tg__hours, .cal-ad__gutter, .cal-colhead__gutter { width: 34px; }
  .cal-tg__hr span { font-size: 9px; right: 4px; }
  .cal-head { gap: 8px; }
  .cal-head__right { width: 100%; justify-content: space-between; }
  .cal-modes__btn { padding: 5px 9px; font-size: 12px; }
  /* Semaine sur mobile : 7 colonnes serrées mais alignées (pas de scroll horizontal fragile). */
  .cal-colhead__wd { font-size: 9px; }
  .cal-colhead__num { font-size: 13px; }
  .cal-colhead__day.is-today .cal-colhead__num { width: 22px; height: 22px; }
  .cal-blk { padding: 1px 3px; border-left-width: 2px; }
  .cal-blk__t { font-size: 9.5px; }
}

/* Calendrier responsive : mois = barres-titres d'événements (comme Google), pas juste des points */
@media (max-width: 720px) {
  .cal-cell { min-height: 76px; padding: 3px; align-items: stretch; }
  .cal-cell__evts { display: flex; gap: 2px; }
  .cal-evt { font-size: 9px; padding: 1px 3px; border-radius: 3px; line-height: 1.35; }
  .cal-evt b { display: none; }   /* pas d'heure sur mobile (place) — juste le titre, comme Google */
  .cal-more { font-size: 8.5px; }
  .cal-cell__day { font-size: 11px; }
  .cal-cell__dots { display: none; }
  .cal-dot { width: 6px; height: 6px; border-radius: 50%; }
  [data-theme="emma"] .cal-dot { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
  .cal-title { min-width: 0; font-size: 15px; }
  .pyr-row { padding: 10px 11px; }
}

/* ============================================================
   v2.1 — ARBORESCENCE (graphe de tâches reliées + glisser-déposer)
   ============================================================ */
/* Marge horizontale : sans elle, les pastilles des rangées touchent les bords (les fils partent
   du haut du Graal et s'étalent jusqu'aux extrémités). Respire des deux côtés. */
.arbo { position: relative; padding: 4px 18px 160px; }
/* Empilement d'origine : la toile de fils SOUS le contenu (svg z-0, inner z-1). */
.arbo-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.arbo-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.arbo-hint-top { font-size: 12.5px; color: var(--text-faint); text-align: center; max-width: 540px; }
/* Panneau pédagogique « comment lire les priorités » (repliable) */
.arbo-guide { width: 100%; max-width: 560px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; text-align: left; }
.arbo-guide__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: none; border: none; cursor: pointer; color: var(--text); font-size: 13.5px; font-weight: 700; }
.arbo-guide__chev { color: var(--text-faint); font-size: 12px; }
.arbo-guide__body { padding: 0 14px 13px; }
.arbo-guide__lead { margin: 0 0 10px; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.arbo-guide__levels { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.arbo-guide__levels li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); }
.arbo-guide__levels .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.arbo-guide__levels b { color: var(--text); }
.arbo-guide__rule { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 8px; padding: 9px 11px; }
.arbo-guide__rule b { color: var(--text); }
.arbo-goal {
  padding: 13px 26px; border-radius: 16px; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 34px -14px var(--accent);
}
.arbo-goal small { display: block; font-size: 9.5px; opacity: .85; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
.arbo-goal b { font-size: 15.5px; }
.arbo-goal .pct { font-size: 12px; opacity: .9; margin-top: 3px; }
/* Emma : le Graal est doré → texte blanc illisible (contraste ~2:1). On met une encre sombre lisible. */
[data-theme="emma"] .arbo-goal { color: var(--accent-ink); }
[data-theme="emma"] .arbo-goal small, [data-theme="emma"] .arbo-goal .pct { opacity: 1; }

/* Rangées étalées (visuel d'origine) : pas de boîte-conteneur, pastilles
   centrées sur fond libre, grand espacement vertical → l'ensemble (fils +
   pastilles) ressemble à un arbre. Chaque rangée = un CHANTIER (front
   stratégique), rangées triées par rang stratégique (P1 tout en haut). */
.arbo-lanes { display: flex; flex-direction: column; gap: 48px; width: 100%; max-width: 100%; }
.arbo-lane { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 0; border-radius: 18px; transition: background var(--t-fast), outline-color var(--t-fast); }
.arbo-lane.is-over { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: 8px; }
/* Étiquette flottante « P1 · Chantier · fait/total » — point à la couleur du
   rang stratégique ; cliquable (ouvrir le chantier en liste) ; déposer une
   tâche sur la rangée / l'étiquette = « À trier » de ce front. */
.arbo-lane__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.arbo-lane__tag:hover { border-color: var(--border-strong); background: var(--surface); }
.arbo-lane__tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arbo-lane__tag .dot { width: 7px; height: 7px; border-radius: 50%; }
.arbo-lane__name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
/* Pastilles étalées sur toute la largeur (space-around) → les fils s'écartent et
   chacun est visible. Les pastilles restent compactes pour en aligner plusieurs. */
.arbo-nodes { display: flex; flex-wrap: wrap; gap: 16px 10px; min-height: 26px; justify-content: space-around; align-items: flex-start; width: 100%; }
.arbo-lane-empty { font-size: 11.5px; color: var(--text-faint); font-style: italic; padding: 2px; }

/* Pastille de tâche (visuel d'origine) : pilule arrondie flottante.
   Truncation robuste : le titre coupe « … » pile au bord — il ne déborde JAMAIS. */
.arbo-node {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 260px; overflow: hidden;
  padding: 8px 13px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  font-size: 12.5px; font-weight: 550; cursor: grab; user-select: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.arbo-node:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.arbo-node:active { cursor: grabbing; }
.arbo-node.is-dragging { opacity: .35; }
.arbo-node.is-over { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: 2px; }
.arbo-node.prio--1 { border-left-color: var(--p1); }
.arbo-node.prio--2 { border-left-color: var(--p2); }
.arbo-node.prio--3 { border-left-color: var(--p3); }
.arbo-node.prio--4 { border-left-color: var(--p4); }
.arbo-node.prio--5 { border-left-color: var(--p5); }
.arbo-node.prio--6 { border-left-color: var(--p6); }
.arbo-node.prio--7 { border-left-color: var(--p7); }
.arbo-node.prio--8 { border-left-color: var(--p8); }
.arbo-node.prio--9 { border-left-color: var(--p9); }
/* « À trier » : pilule pointillée discrète, en fin de rangée. */
.arbo-node.prio--none { border-style: dashed; border-left-color: var(--pnone); color: var(--text-dim); }
/* Bloc « À trier » en fin de catégorie (mode liste). */
.totriage-label { font-size: 11.5px; font-weight: 650; color: var(--text-faint); margin: 10px 0 4px; padding-left: 2px; border-top: 1px dashed var(--border); padding-top: 8px; }
.arbo-node .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.arbo-node.is-inprogress { box-shadow: inset 0 0 0 1px var(--warn), var(--shadow-sm); }
.arbo-node__rank { flex: none; font-size: 10.5px; font-weight: 700; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); padding: 1px 7px; border-radius: var(--r-pill); }
/* Titre = priorité (toujours lisible) ; il se tronque « … » en dernier. */
.arbo-node__title { flex: 1 1 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La PROCHAINE ACTION OUVERTE du front : halo accent discret (pas d'étiquette texte). */
.arbo-node.is-next { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 16px -8px var(--accent); }

@media (max-width: 720px) {
  .arbo { padding-bottom: 120px; }
  /* Téléphone : les fils SVG (trop serrés) sont masqués → remplacés par une COLONNE verticale à
     gauche qui descend de rangée en rangée (chantier P1 → dernier) jusqu'au Graal, avec une
     station par chantier, colorée à son rang stratégique. */
  .arbo-threads { display: none; }
  .arbo-inner { gap: 18px; align-items: stretch; }
  .arbo-hint-top { text-align: left; max-width: none; }
  .arbo-lanes { gap: 20px; max-width: 100%; position: relative; padding-left: 24px; }
  .arbo-lanes::before {
    content: ''; position: absolute; left: 8px; top: 2px; bottom: -18px; width: 3px; border-radius: 3px; z-index: 0;
    background: linear-gradient(180deg, var(--p1), var(--p2) 26%, var(--p3) 50%, var(--p4) 72%, var(--accent));
    opacity: .85;
  }
  .arbo-lane { position: relative; align-items: stretch; gap: 9px; }
  .arbo-lane__tag { align-self: flex-start; }
  .arbo-lane::before {   /* station ronde sur la colonne, colorée au rang stratégique du chantier */
    content: ''; position: absolute; left: -20px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--p3); box-shadow: 0 0 0 3px var(--bg); z-index: 1;
  }
  .arbo-lane.prio--1::before { background: var(--p1); }
  .arbo-lane.prio--2::before { background: var(--p2); }
  .arbo-lane.prio--3::before { background: var(--p3); }
  .arbo-lane.prio--4::before { background: var(--p4); }
  .arbo-lane.prio--5::before { background: var(--p5); }
  .arbo-lane.prio--6::before { background: var(--p6); }
  .arbo-lane.prio--7::before { background: var(--p7); }
  .arbo-lane.prio--8::before { background: var(--p8); }
  .arbo-lane.prio--9::before { background: var(--p9); }
  .arbo-lane.prio--none::before { background: var(--pnone); }
  .arbo-nodes { justify-content: flex-start; gap: 8px; }
  .arbo-node { max-width: none; width: 100%; }
  .arbo-node__rank { display: none; }   /* le point coloré + l'ordre gauche→droite suffisent en 375px */
  .arbo-goal { align-self: stretch; box-shadow: 0 0 0 4px var(--bg), 0 16px 42px -14px var(--accent); }
}

/* ============================================================
   v2.2 — glisser-déposer en mode liste
   (le strip/panneau « progression par catégorie » et l'étiquette de
   catégorie sur les pastilles ont disparu : chaque RANGÉE est sa
   catégorie, l'étiquette flottante porte le rang et le fait/total)
   ============================================================ */
.arbo-node__check, .arbo-node .dot { flex: none; }

/* Glisser-déposer en mode liste */
.drag-handle { cursor: grab; color: var(--text-faint); font-size: 15px; padding: 0 2px; user-select: none; line-height: 1; }
.drag-handle:hover { color: var(--text-dim); }
.task[draggable="true"] { transition: opacity var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.task.is-dragging { opacity: .4; }
.category { border-radius: var(--r-md); transition: outline-color var(--t-fast), background var(--t-fast); }
.task.is-over { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: 10px; }
.category.is-over { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: 3px; }

/* ============================================================
   v2.3 — pastilles terminées rayonnantes (visuel d'origine)
   ============================================================ */
/* Pastille conquise : elle RESTE dans l'arbre et "rayonne" (halo vert pulsé). */
.arbo-node.is-done {
  color: var(--ok);
  border-color: rgba(34,197,94,.45); border-left-color: var(--ok);
  background: linear-gradient(180deg, rgba(34,197,94,.10), var(--surface));
  cursor: default;
  animation: nodeRadiate 2.6s var(--ease) infinite;
}
.arbo-node__check { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--ok); color: #06270f; font-size: 10px; font-weight: 900; flex: none; }
@keyframes nodeRadiate {
  0%, 100% { box-shadow: 0 0 0 1px rgba(34,197,94,.30), 0 0 12px -3px rgba(34,197,94,.40); }
  50%      { box-shadow: 0 0 0 1px rgba(34,197,94,.55), 0 0 24px 0 rgba(34,197,94,.65); }
}

/* Catégorie mise en évidence après un clic depuis l'arborescence */
.category.flash { animation: catFlash 1.3s var(--ease); }
@keyframes catFlash {
  0%   { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: 4px; }
  100% { background: transparent; outline-color: transparent; }
}

/* ============================================================
   v2.4 — détail de tâche, carte Graal, clic-pour-ouvrir
   ============================================================ */
/* Modale "détail de tâche" (lecture, puis Modifier) */
.td-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.td-block { margin-bottom: 14px; }
.td-block > label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.td-block > div { font-size: 14px; color: var(--text); }
.td-desc { white-space: pre-line; line-height: 1.55; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; min-height: 48px; }
.td-empty { color: var(--text-faint); font-style: italic; }

/* Corps de tâche cliquable (mode liste) */
.task__main--clickable { cursor: pointer; border-radius: var(--r-sm); }
.task__main--clickable:hover .task__title, .task__main--clickable:hover .mini-item__title, .task__main--clickable:hover .bw-row__title { color: var(--accent); }
/* Surbrillance quand on « arrive » sur une tâche (revealTask) : anneau accent qui s'estompe. */
@keyframes taskFlash { 0% { box-shadow: 0 0 0 3px var(--accent), 0 0 20px -4px var(--accent); } 70% { box-shadow: 0 0 0 3px var(--accent), 0 0 20px -4px var(--accent); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }
.task-flash { animation: taskFlash 1.9s ease-out; border-radius: 14px; position: relative; z-index: 1; }
.task__main--clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Carte Graal (objectif final) — bas de la liste + bas de l'arborescence */
.goal-card {
  display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 18px 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface));
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
}
.goal-card__ic { font-size: 30px; line-height: 1; flex: none; }
.goal-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.goal-card__main small { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; }
.goal-card__main b { font-size: 16px; }
.goal-card__pct { font-size: 12px; color: var(--text-dim); }
.arbo-goal--graal { margin-top: 6px; }
.idea-card--clickable { cursor: pointer; }
.idea-card--clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   v2.5 — célébration ÉPIQUE quand un projet atteint 100 %
   ============================================================ */
#epic-overlay { position: fixed; inset: 0; z-index: 500; pointer-events: none; display: grid; place-items: center; overflow: hidden; }

/* Éclairs (flashs plein écran) */
.epic-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.92), rgba(139,92,246,.45) 38%, transparent 72%);
  opacity: 0; animation: epicFlash 1.7s ease-out;
}
@keyframes epicFlash {
  0% { opacity: 0; } 5% { opacity: 1; } 11% { opacity: .15; } 17% { opacity: .95; } 25% { opacity: 0; }
  42% { opacity: 0; } 47% { opacity: .85; } 55% { opacity: 0; }
}

/* Bannière centrale */
.epic-banner {
  position: relative; text-align: center; color: #fff; max-width: 88vw;
  padding: 28px 46px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(99,102,241,.96), rgba(139,92,246,.96));
  box-shadow: 0 30px 90px -20px rgba(99,102,241,.9), inset 0 0 0 1px rgba(255,255,255,.22);
  transform: scale(.4); opacity: 0; animation: epicBanner 3s var(--ease) forwards;
}
.epic-banner__trophy { font-size: 56px; display: block; margin-bottom: 4px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.4)); animation: epicTrophy 3s var(--ease); }
.epic-banner__title { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; opacity: .9; }
.epic-banner__name { font-size: 30px; font-weight: 800; margin: 8px 0 6px; letter-spacing: -.01em; }
.epic-banner__sub { font-size: 14px; opacity: .92; }
@keyframes epicBanner {
  0% { transform: scale(.4); opacity: 0; }
  12% { transform: scale(1.08); opacity: 1; }
  20% { transform: scale(1); }
  82% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.95); opacity: 0; }
}
@keyframes epicTrophy { 0% { transform: scale(0) rotate(-35deg); } 14% { transform: scale(1.35) rotate(12deg); } 26% { transform: scale(1) rotate(0); } }

/* Confettis */
.confetti { position: absolute; top: -24px; border-radius: 2px; animation: confettiFall linear forwards; }
@keyframes confettiFall {
  0% { transform: translateY(-24px) rotate(0); opacity: 1; }
  100% { transform: translateY(106vh) rotate(720deg); opacity: .9; }
}

/* Tremblement de l'écran */
.epic-shake { animation: epicShake .6s var(--ease); }
@keyframes epicShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-9px, 5px); } 20% { transform: translate(8px, -6px); }
  30% { transform: translate(-7px, -4px); } 40% { transform: translate(7px, 6px); }
  50% { transform: translate(-6px, 3px); } 60% { transform: translate(6px, -3px); }
  70% { transform: translate(-4px, 2px); } 80% { transform: translate(4px, -2px); }
  90% { transform: translate(-2px, 1px); }
}

/* ============================================================
   v3 — VUE "AUJOURD'HUI" (cockpit du jour)
   ============================================================ */
.today { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.today-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.today-hero__msg h2 { font-size: 20px; letter-spacing: -.01em; }
.today-hero__msg p { margin: 4px 0 0; color: var(--text-faint); font-size: 13px; text-transform: capitalize; }
/* Salutation chaleureuse (Bonjour, Jason 👋) */
.today-hero__msg p.today-hero__date { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-faint); text-transform: capitalize; margin: 0; }
.today-hero__msg h2.today-hero__hello { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif; font-size: 30px; font-weight: 600; line-height: 1.12; margin: 5px 0 0; }
.today-hero__msg p.today-hero__sub { margin: 8px 0 0; color: var(--text-dim); font-size: 14px; text-transform: none; max-width: 46ch; }
.hero-wave { display: inline-block; }
.today-hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.today-started, .today-closed { font-size: 13px; color: var(--text-dim); font-weight: 600; }
/* Heure de début cliquable (corriger si on a oublié « Commencer ma journée ») */
.today-started--btn { background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; transition: color var(--t-fast); }
.today-started--btn:hover { color: var(--accent); }
.today-started__edit { font-size: 12px; opacity: .65; }
.today-startedit-link { background: none; border: none; cursor: pointer; padding: 0; font-size: 12px; color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; transition: color var(--t-fast); }
.today-startedit-link:hover { color: var(--accent); }

/* Humeur du jour */
.mood-row { display: flex; gap: 6px; }
.mood { width: 38px; height: 38px; border-radius: 11px; font-size: 19px; line-height: 1; border: 1px solid var(--border); background: var(--surface-2); transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.mood:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.mood.is-sel { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }

/* Jauge de charge */
.today-charge .charge-bar { height: 12px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; margin: 4px 0 10px; }
.today-charge .charge-bar__fill { height: 100%; border-radius: inherit; transition: width .6s var(--ease); }
/* « Ma journée » (refonte 2026-07-17) : jauge de charge COMPACTE dans l'en-tête du bloc fusionné,
   focus-card imbriquée, badges de stats dans le hero. */
.myday-gauge { display: inline-flex; align-items: center; }
.myday-gauge .charge-bar { display: block; width: 84px; height: 8px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.myday-gauge .charge-bar__fill { display: block; height: 100%; border-radius: inherit; transition: width .6s var(--ease); }
.focus-card--embedded { border-radius: var(--r-lg); margin: 4px 0 12px; }
.today-hero__stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hero-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); }
.hero-chip--link { cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.hero-chip--link:hover { border-color: var(--accent); color: var(--text); }
.today-charge--ok    .charge-bar__fill { background: linear-gradient(90deg, #22c55e, #4ade80); }
.today-charge--normal .charge-bar__fill { background: linear-gradient(90deg, #38bdf8, #22c55e); }
.today-charge--warn  .charge-bar__fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.today-charge--late  .charge-bar__fill { background: linear-gradient(90deg, #ef4444, #f97316); }
.charge-label { font-size: 13px; color: var(--text-dim); }
.charge-label b { color: var(--text); }
.charge-warn { color: var(--warn); font-weight: 600; }

/* Tâche de lancement */
.today-launch { display: flex; align-items: center; gap: 14px; border-color: var(--border-strong);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); }
.today-launch__ic { font-size: 26px; flex: none; }
.today-launch__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.today-launch__main small { font-size: 11.5px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.today-launch__main b { font-size: 15px; }
.today-launch__sub { font-size: 12px; color: var(--text-faint); }

.today-note { font-size: 12.5px; color: var(--text-faint); margin: -2px 0 12px; }
.today-footer { margin-top: 4px; }

/* Modale de sélection de tâche */
.pick-count { font-size: 12px; color: var(--text-faint); margin-bottom: 10px; }
.pick-list { display: flex; flex-direction: column; gap: 7px; max-height: 50vh; overflow-y: auto; }
.pick-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border); text-align: left; transition: border-color var(--t-fast), background var(--t-fast); }
.pick-row:hover { border-color: var(--border-strong); background: var(--surface-3); }
.pick-row.is-in { border-color: var(--accent); background: var(--accent-soft); }
.pick-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-row__title { font-size: 14px; font-weight: 550; }
.pick-row__sub { font-size: 11.5px; color: var(--text-faint); }
.pick-row__add { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; line-height: 1; border-radius: 8px; font-size: 18px; font-weight: 600; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); }
.pick-row.is-in .pick-row__add { color: var(--ok); border-color: rgba(34,197,94,.4); }
.pick-row__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Sélecteur Top 3 en arbre : Pro / Perso → projets (dépliables) → tâches */
.pick-tree { gap: 5px; }
.pick-group { display: flex; flex-direction: column; gap: 4px; }
.pick-grp__head, .pick-proj__head { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer; color: var(--text); }
.pick-grp__head { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-size: 14px; font-weight: 700; }
.pick-grp__head:hover { border-color: var(--accent); }
.pick-grp__name { flex: 1; min-width: 0; }
.pick-grp__count { font-size: 11.5px; font-weight: 600; color: var(--text-faint); background: var(--surface); border: 1px solid var(--border); padding: 1px 8px; border-radius: 999px; flex: none; }
.pick-caret { width: 12px; flex: none; font-size: 10px; color: var(--text-dim); }
.pick-proj { display: flex; flex-direction: column; gap: 4px; margin-left: 14px; }
.pick-proj__head { padding: 7px 11px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: transparent; font-size: 13px; font-weight: 650; }
.pick-proj__head:hover { border-color: var(--accent); background: var(--surface-2); }
.pick-proj__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-proj__tasks { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 2px 10px; padding-left: 8px; border-left: 2px solid var(--border); }
.pick-simples { display: flex; flex-direction: column; gap: 6px; margin-left: 14px; }
.pick-simples__lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 4px 2px 1px; }

/* Pastille catégorie (sobre : texte + point de couleur, couleur via --c, sans emoji) */
.sphere-tag { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  color: var(--c, var(--text-dim)); border: 1px solid var(--border); background: var(--surface-2);
  border-color: color-mix(in srgb, var(--c, var(--border)) 42%, transparent); background: color-mix(in srgb, var(--c, transparent) 12%, transparent); }
.sphere-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* Emma : éclaircit le libellé vers la crème (Perso vert sinon noyé dans le fond vert), pastille gardée pleine. */
[data-theme="emma"] .sphere-tag { color: color-mix(in srgb, var(--c, var(--text-dim)) 60%, #F0F4EA); }
[data-theme="emma"] .sphere-tag::before { background: var(--c, currentColor); }
.sphere-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--text-faint); flex: none; }

/* Sections par catégorie dans la vue Projets */
.proj-section { margin-bottom: 22px; }
.proj-section__head { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.proj-section__name { font-size: 15px; font-weight: 650; color: var(--text); background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; }
button.proj-section__name:hover { color: var(--accent); text-decoration: underline; }
.proj-section__name--plain { cursor: default; color: var(--text-dim); }
.proj-section__head .sphere-dot { width: 10px; height: 10px; margin: 0; }
.proj-section__count { font-size: 11.5px; font-weight: 600; color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); padding: 1px 9px; border-radius: 999px; }

/* En-tête de carte cliquable (déroulant) + récap « À faire aujourd'hui » / Agenda */
.panel-head--toggle { width: 100%; background: none; border: none; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.ta-head__right { display: flex; align-items: center; gap: 8px; }
.agenda-list { display: flex; flex-direction: column; gap: 7px; }
.agenda-row { display: flex; align-items: center; gap: 11px; }
.agenda-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px; cursor: pointer; color: var(--text); transition: border-color var(--t-fast), background var(--t-fast); }
.agenda-row__main:hover { border-color: var(--accent); background: var(--surface-3); }
.agenda-row__title { font-size: 13.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-row__title b { color: var(--text); }
.agenda-row__sub { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-row.is-done .agenda-row__main { opacity: .62; }
.agenda-row.is-done .agenda-row__title { text-decoration: line-through; }

@media (max-width: 720px) {
  .today-hero__side { align-items: stretch; width: 100%; }
  .today-hero { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   v4 — BILAN DE FIN DE JOURNÉE
   ============================================================ */
.review-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.rstat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; text-align: center; }
.rstat b { display: block; font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.rstat span { font-size: 11px; color: var(--text-faint); }
.review-line { font-size: 14px; color: var(--text-dim); margin: 0 0 10px; line-height: 1.5; }
.review-line b { color: var(--text); }
.review-line--muted { color: var(--text-faint); font-size: 13px; }
.review-block { margin: 14px 0; }
.review-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); margin-bottom: 8px; }
.review-proj { display: flex; justify-content: space-between; gap: 10px; padding: 8px 11px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; margin-bottom: 6px; }
.review-proj__pts { color: var(--ok); font-weight: 650; }
.review-done { font-size: 13.5px; color: var(--ok); padding: 4px 2px; }
.review-open { font-size: 13.5px; color: var(--text-dim); padding: 4px 2px; }

/* ============================================================
   v5 — STATUTS DE TÂCHE (bloqué / en attente / abandonné)
   ============================================================ */
.tstatus--blocked { color: var(--late); background: rgba(239,68,68,.13); }
.tstatus--waiting { color: var(--warn); background: rgba(245,158,11,.14); }
.tstatus--dropped { color: var(--text-faint); background: var(--surface-2); text-decoration: line-through; }

/* Badge visible (mode simple) */
.tbadge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 650; padding: 2px 8px; border-radius: var(--r-pill); }
.tbadge--inprogress { color: var(--warn); background: rgba(245,158,11,.13); border: 1px solid rgba(245,158,11,.32); }
.tbadge--blocked { color: var(--late); background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.28); }
.tbadge--waiting { color: var(--warn); background: rgba(245,158,11,.13); border: 1px solid rgba(245,158,11,.3); }
.tbadge--dropped { color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); }
/* « Urgent » (v21) : alerte spéciale, indépendante du rang — rouge sobre (règle 9). */
.tbadge--urgent { color: var(--late); background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.34); text-transform: uppercase; letter-spacing: .04em; font-size: 9.5px; }
.arbo-node.is-urgent { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--late) 60%, transparent); }
/* Case à cocher en ligne (modales) : « Urgent ». */
.check-line { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: var(--text-dim); }
.check-line input { width: 15px; height: 15px; accent-color: var(--late); flex: none; }
.check-line b { color: var(--text); }

/* Accent coloré à gauche de la tâche simple selon le statut (jaune = en cours/attente, rouge = bloqué) */
.task--inprogress { box-shadow: inset 3px 0 0 0 var(--warn); }
.task--blocked { box-shadow: inset 3px 0 0 0 var(--late); }
.task--waiting { box-shadow: inset 3px 0 0 0 var(--warn); }

.task.is-dropped { opacity: .55; }
.task.is-dropped .task__title { text-decoration: line-through; color: var(--text-dim); }

/* Champ de raison (modale) */
.reason-field[hidden] { display: none; }

/* Couleurs du sélecteur de statut */
.seg button.is-sel.st-opt--done { color: var(--ok); border-color: var(--ok); background: rgba(34,197,94,.1); }
.seg button.is-sel.st-opt--inprogress { color: var(--warn); border-color: var(--warn); background: rgba(245,158,11,.1); }
.seg button.is-sel.st-opt--blocked { color: var(--late); border-color: var(--late); background: rgba(239,68,68,.1); }
.seg button.is-sel.st-opt--waiting { color: var(--warn); border-color: var(--warn); background: rgba(245,158,11,.1); }
.seg button.is-sel.st-opt--dropped { color: var(--text-faint); border-color: var(--border-strong); }

/* ============================================================
   v6 — PROCHAINE ACTION RECOMMANDÉE
   ============================================================ */
.proj-card__next { font-size: 12.5px; color: var(--text-dim); padding: 8px 11px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); }
.proj-card__next-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; margin-right: 4px; }
.next-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--border); }
.next-row:first-of-type { border-top: none; }

/* ============================================================
   v7 — TAGS & FILTRES (Mode simple)
   ============================================================ */
.tag-pick { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
/* Tags colorés : la teinte vient d'une variable inline --tc (tags par défaut ET personnalisés).
   Sombre = teinte vive sur fond très sombre ; Emma = teinte ÉCLAIRCIE (mix blanc) pour claquer sur le vert. */
.tag-btn { padding: 6px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; border: 1px solid; border-color: color-mix(in srgb, var(--tc, var(--border)) 45%, transparent); background: var(--surface-2); color: var(--text-dim); transition: all var(--t-fast); }
.tag-btn:hover { border-color: color-mix(in srgb, var(--tc, var(--border-strong)) 78%, transparent); color: var(--text); }
.tag-btn.is-sel { color: var(--text); border-color: var(--tc, var(--accent)); background: color-mix(in srgb, var(--tc, var(--accent)) 22%, transparent); }
.tag-btn--add { border-style: dashed; color: var(--text-faint); font-size: 14px; line-height: 1; padding: 6px 12px; }
.tag-btn--add:hover { color: var(--text); border-color: var(--border-strong); }
.tag-chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 650; padding: 1px 8px; border-radius: var(--r-pill); border: 1px solid; border-color: color-mix(in srgb, var(--tc, var(--border)) 42%, transparent); background: color-mix(in srgb, var(--tc, var(--surface-2)) 12%, transparent); color: var(--tc, var(--text-dim)); }
[data-theme="emma"] .tag-chip { color: color-mix(in srgb, var(--tc, var(--text-dim)) 66%, #ffffff); border-color: color-mix(in srgb, var(--tc, var(--border)) 72%, transparent); background: color-mix(in srgb, var(--tc, var(--surface-2)) 26%, transparent); }
[data-theme="emma"] .tag-btn.is-sel { border-color: color-mix(in srgb, var(--tc, var(--accent)) 85%, #ffffff); background: color-mix(in srgb, var(--tc, var(--accent)) 36%, transparent); }

/* (Les règles .filter-pill--tag vivent APRÈS la base .filter-pill, plus bas — ordre CSS oblige.) */
.filter-pill--manage { border-style: dashed; color: var(--text-faint); }
.filter-pill--manage:hover { color: var(--text); }

/* Sélecteur inline (＋ nouveau tag) + gestionnaire de tags */
.tag-newrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.tag-newrow[hidden] { display: none; }
.tag-newrow__input { flex: 1 1 160px; min-width: 0; }
.modal-hint { color: var(--text-dim); font-size: 13px; margin: 0 0 12px; line-height: 1.4; }
.tagmgr-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.tagmgr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.tagmgr-row .tag-chip { flex: 0 0 auto; min-width: 70px; justify-content: center; }
.tagmgr-del { flex: 0 0 auto; margin-left: auto; border: 1px solid var(--border); background: transparent; color: var(--text-dim); border-radius: 9px; width: 34px; height: 30px; cursor: pointer; font-size: 14px; }
.tagmgr-del:hover { color: var(--late); border-color: var(--late); }
.tag-swatches { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; }
.tag-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); cursor: pointer; padding: 0; transition: transform var(--t-fast); }
.tag-swatch:hover { transform: scale(1.12); }
.tag-swatch.is-on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--sw); }
.tagmgr-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--border); }
.tagmgr-add #tag-new-name { flex: 1 1 160px; min-width: 0; }
.tagmgr-add .tag-swatches { flex: 1 1 100%; }
.empty-mini { color: var(--text-faint); font-size: 13px; padding: 8px 2px; }

.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 0 8px; }
/* Rangée repliée sur UNE ligne (retour testeurs 2026-08) : le surplus est masqué, le bouton
   « Tous les filtres » (affiché seulement si ça déborde, voir renderSimple) déplie tout. */
.filter-chips.is-clamped { max-height: 32px; overflow: hidden; }
.filter-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.filter-more { font-size: 12px; font-weight: 600; color: var(--text-faint); padding: 4px 6px; }
.filter-more:hover { color: var(--text); }
/* ============================================================
   IMPRESSION — seule la feuille #print-sheet sort sur papier :
   noir et blanc épuré, cases VIDES à cocher au stylo. Le bloc est
   injecté par printChecklist() (main.js) puis retiré après window.print().
   ============================================================ */
#print-sheet { display: none; }
@media print {
  body { background: #fff !important; }
  body > *:not(#print-sheet) { display: none !important; }
  #print-sheet { display: block; color: #000; background: #fff; padding: 8px 4px; }
  #print-sheet h1 { font-size: 20px; font-weight: 700; color: #000; margin: 0 0 2px; text-transform: none; letter-spacing: 0; }
  #print-sheet .print-date { font-size: 11px; color: #555; margin: 0 0 16px; }
  #print-sheet .print-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #ccc; font-size: 14px; color: #000; break-inside: avoid; }
  #print-sheet .print-box { width: 14px; height: 14px; border: 1.5px solid #000; border-radius: 3px; flex-shrink: 0; }
}

/* « Qu'ai-je fait de ma journée ? » : récap chronologique des tâches terminées aujourd'hui. */
.recap-list { display: flex; flex-direction: column; gap: 2px; max-height: 55vh; overflow-y: auto; }
.recap-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.recap-row:last-child { border-bottom: none; }
.recap-row__time { font-size: 12px; font-weight: 700; color: var(--text-faint); min-width: 42px; font-variant-numeric: tabular-nums; }
.recap-row__main { flex: 1; min-width: 0; }
.recap-row__title { font-size: 13.5px; font-weight: 600; }
.recap-row__sub { font-size: 11.5px; color: var(--text-faint); }
.recap-row__xp { font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }

/* Sections repliables « Ensemble · <espace> » des vues Listes et Tâches (accordéon par groupe, pensé mobile). */
.lists-space-toggle { margin-top: 18px; }
/* « Dernières modifications » d'un espace partagé : qui a touché quoi, et quand. */
.act-list { display: flex; flex-direction: column; margin: 8px 0 4px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.act-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.act-row:last-of-type { border-bottom: none; }
.act-row__who { font-weight: 700; color: var(--text); white-space: nowrap; }
.act-row__what { flex: 1; min-width: 0; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }
.act-row__when { color: var(--text-faint); white-space: nowrap; font-size: 11.5px; }
.act-note { padding: 8px 12px; font-size: 11px; color: var(--text-faint); background: var(--surface-2); border-top: 1px solid var(--border); }
@media (max-width: 720px) { .act-row { flex-wrap: wrap; gap: 4px 8px; } .act-row__what { flex: 1 1 100%; order: 3; } }

/* Notes COMPOSABLES : une pile de blocs (texte, tableau, liste) qu'on réordonne. */
.doc-title { font-size: inherit; font-weight: inherit; color: inherit; text-transform: inherit; }
.doc-title:hover { color: var(--accent); }
.doc-blocks { display: flex; flex-direction: column; gap: 18px; }   /* blocs bien détachés les uns des autres (retour Jason 2026-08-17) */
.doc-block { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px 12px; background: var(--surface); }
.doc-block .slist:empty { display: none; }   /* liste sans élément : pas de conteneur fantôme collé au champ d'ajout */
.doc-block__bar { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.doc-block__title { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 4px 6px; border-radius: 6px; }
.doc-block__title:hover { background: var(--surface-2); }
.doc-block__title:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface-2); }
.doc-block__title::placeholder { color: var(--text-faint); font-weight: 600; }
.doc-block__kind { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.doc-text { width: 100%; border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.6; resize: vertical; padding: 4px 2px; }
.doc-text:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.doc-addbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.doc-addbar__lbl { font-size: 12px; font-weight: 600; color: var(--text-faint); }

/* ============================================================
   TABLEAUX (petites bases à colonnes typées, dans un projet)
   La grille défile HORIZONTALEMENT dans son propre conteneur : sur
   téléphone, un tableau large ne doit jamais élargir la page.
   ============================================================ */
.tbl-list { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.tbl-block { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; background: var(--surface-2); }
.tbl-block__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tbl-block__title { font-size: 14px; font-weight: 700; color: var(--text); padding: 4px 6px; border-radius: 6px; }
.tbl-block__title:hover { background: var(--surface-3); }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.tbl { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13px; }
.tbl-th { text-align: left; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; position: relative; }
.tbl-th:last-child { border-right: none; }
/* Poignée de LARGEUR (2026-08-13) : fine bande sur le bord droit de l'en-tête, on tire pour régler. */
.tbl-grip { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; touch-action: none; z-index: 2; }
.tbl-grip:hover, .tbl-grip.is-resizing { background: var(--accent-soft); box-shadow: inset -2px 0 0 var(--accent); }
body.tbl-resizing { user-select: none; cursor: col-resize; }
/* Poignée de LIGNE : ⋮⋮ à gauche, on la saisit pour glisser la ligne plus haut / plus bas. */
.tbl-th--drag, .tbl-td--drag { width: 26px; }
.tbl-draghandle { display: block; padding: 8px 7px; color: var(--text-faint); cursor: grab; font-size: 11px; letter-spacing: -2px; line-height: 1; user-select: none; }
.tbl-draghandle:hover { color: var(--accent); }
.tbl tr.is-dragging { opacity: .45; }
.tbl tr.tbl-row-over .tbl-td { box-shadow: inset 0 2px 0 var(--accent); }
.tbl-th__btn { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; width: 100%; text-align: left; }
.tbl-th__btn:hover:not(:disabled) { background: var(--surface-3); }
.tbl-th__name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.tbl-th__type { font-size: 10.5px; color: var(--text-faint); font-weight: 600; }
.tbl-th--add { width: 40px; }
.tbl-addcol { width: 100%; padding: 10px 0; font-size: 16px; color: var(--text-faint); }
.tbl-addcol:hover { color: var(--accent); background: var(--surface-3); }
.tbl-td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0; }
.tbl-td:last-child { border-right: none; }
.tbl tbody tr:last-child .tbl-td { border-bottom: none; }
.tbl-in { width: 100%; min-width: 120px; border: none; background: transparent; padding: 9px 10px; font-size: 13px; color: var(--text); font-family: inherit; border-radius: 0; }
.tbl-in:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.tbl-in--num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-td--check { text-align: center; }
.tbl-check { width: 17px; height: 17px; margin: 9px auto; display: block; accent-color: var(--accent); }
.tbl-td--act { width: 38px; text-align: center; }
.tbl-total { background: var(--surface-2); font-weight: 700; font-size: 12.5px; padding: 9px 10px; text-align: right; font-variant-numeric: tabular-nums; border-top: 2px solid var(--border-strong); }
.tbl-actions { display: flex; gap: 8px; margin-top: 10px; }
@media (max-width: 720px) { .tbl-in { min-width: 96px; } }

/* Pastille « demande d'accès en attente » (accueil, ADMIN seulement — jamais annoncée ailleurs).
   Sans elle, une demande dormait jusqu'à ce qu'on pense à ouvrir le board. */
.admin-pending { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; text-align: left; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.admin-pending:hover { border-color: var(--accent); }
.admin-pending__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.admin-pending__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.admin-pending__txt b { font-size: 13.5px; font-weight: 650; }
.admin-pending__txt small { font-size: 11.5px; color: var(--text-faint); }
.admin-pending__chev { color: var(--text-faint); font-size: 18px; }

/* Rappel discret sur l'urgence (2e tâche urgente à la fois) : informatif, pas alarmant. */
.urgent-note { margin-top: 10px; padding: 9px 12px; font-size: 12px; line-height: 1.5; color: var(--text-dim);
  background: color-mix(in srgb, var(--late) 9%, transparent); border: 1px solid color-mix(in srgb, var(--late) 28%, transparent); border-radius: var(--r-md); }
.urgent-note b { color: var(--text); }

/* Bandeau « Plus d'options » (fenêtre de NOUVELLE tâche) : le formulaire s'ouvre court, on déplie
   à la demande — le bouton « Ajouter » reste ainsi visible sans faire défiler (surtout sur mobile). */
.adv-toggle { display: flex; align-items: center; gap: 7px; width: 100%; padding: 10px 12px; margin-bottom: 15px; font-size: 13px; font-weight: 600; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); text-align: left; }
.adv-toggle:hover { color: var(--text); border-color: var(--border-strong); }

/* Raccourcis épinglés (carte « Mes raccourcis » sur Aujourd'hui). Puces larges = cibles d'appui
   confortables sur téléphone ; la croix retire le raccourci sans ouvrir la cible. */
.pins-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pin-chip { display: flex; align-items: stretch; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-fast); }
.pin-chip:hover { border-color: var(--border-strong); }
.pin-chip__main { display: flex; align-items: center; gap: 9px; padding: 9px 12px; min-width: 0; text-align: left; }
.pin-chip__ic { font-size: 14px; color: var(--text-faint); flex-shrink: 0; }
.pin-chip__txt { display: flex; flex-direction: column; min-width: 0; }
.pin-chip__txt b { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.pin-chip__txt small { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.pin-chip__x { padding: 0 10px; color: var(--text-faint); font-size: 15px; border-left: 1px solid var(--border); }
.pin-chip__x:hover { color: var(--late); background: var(--surface-3); }
.pin-chip.is-done .pin-chip__txt b { text-decoration: line-through; color: var(--text-faint); }
/* Bouton punaise actif (la cible est déjà épinglée). */
.is-pinned { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* Ligne « Tout vider » sous le bandeau Déjà fait (vue Tâches). */
.done-clear-line { display: flex; justify-content: flex-end; margin: 6px 2px 2px; }

/* Lien discret « Personnaliser cette page » (bas d'Aujourd'hui) : masquer/afficher les cartes. */
.today-customize { display: block; margin: 10px auto 0; font-size: 12px; font-weight: 600; color: var(--text-faint); padding: 4px 8px; }
.today-customize:hover { color: var(--text); }
.filter-chips__label { font-size: 12px; font-weight: 600; color: var(--text-faint); margin-right: 2px; }
/* Ligne « Filtrer : … » avec le bouton « + Ajouter une tâche » aligné à droite (équilibré). */
@media (max-width: 560px) { .toolbar .task-add-btn { flex: 1 1 100%; } }   /* « + Ajouter une tâche » pleine largeur sur mobile */
/* Boutons de pied de modale : cibles tactiles confortables + pleine largeur sur mobile (ex. « Se déconnecter »). */
@media (max-width: 720px) {
  .modal__foot { flex-wrap: wrap; }
  .modal__foot .btn { min-height: 44px; flex: 1 1 auto; }
  .modal__head .icon-btn[data-close] { width: 44px; height: 44px; }   /* croix de fermeture confortable au doigt */
  .category__head { flex-wrap: wrap; }   /* en-tête de catégorie : barre + boutons passent sous le titre sur petit écran */
}
/* --- Sélecteur d'emoji (champs data-emoji) --- */
.field.has-emoji { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.field.has-emoji > label { flex: 1 1 100%; }
.field.has-emoji > .field-hint, .field.has-emoji > .field-help { flex: 1 1 100%; }
.field.has-emoji > input, .field.has-emoji > textarea { flex: 1 1 auto; min-width: 0; }
.emoji-btn { flex: 0 0 auto; align-self: flex-start; height: 38px; width: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
.emoji-btn:hover { border-color: var(--border-strong); filter: brightness(1.08); }
.emoji-btn[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
/* Sélecteur d'emoji INLINE : s'insère sous le champ (flex 100%) et pousse le formulaire vers le bas — ne recouvre jamais les autres champs. */
.emoji-pop { flex: 1 1 100%; margin-top: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; max-height: 46vh; overflow-y: auto; }
.emoji-pick { border: none; background: none; cursor: pointer; font-size: 20px; padding: 5px; border-radius: 8px; line-height: 1; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.emoji-pick:hover { background: var(--surface-3, var(--surface)); }
.filter-pill { padding: 6px 13px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); transition: all var(--t-fast); }
.filter-pill:hover { border-color: var(--border-strong); color: var(--text); }
.filter-pill.is-sel { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
/* Pastilles de filtre colorées par tag (page Tâches) — APRÈS la base : à spécificité égale,
   la base plus bas dans le fichier écrasait la couleur du tag (bug relevé par Jason 2026-07-11). */
.filter-pill--tag { border-color: color-mix(in srgb, var(--tc) 42%, var(--border)); color: color-mix(in srgb, var(--tc) 62%, var(--text-dim)); }
[data-theme="emma"] .filter-pill--tag { color: color-mix(in srgb, var(--tc) 60%, #F0F4EA); }
.filter-pill--tag.is-sel { color: var(--tc); border-color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
[data-theme="emma"] .filter-pill--tag.is-sel { color: color-mix(in srgb, var(--tc) 68%, #ffffff); border-color: color-mix(in srgb, var(--tc) 78%, transparent); }

/* Filtres par CATÉGORIE (sphère) : même mécanique couleur --tc que les tags, distingués par une pastille. */
.filter-pill--cat { border-color: color-mix(in srgb, var(--tc) 42%, var(--border)); color: color-mix(in srgb, var(--tc) 62%, var(--text-dim)); }
.filter-pill--cat::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); margin-right: 6px; vertical-align: middle; }
.filter-pill--cat.is-sel { color: var(--tc); border-color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.filter-chips__sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }

/* ============================================================
   v8 — HISTORIQUE "CETTE SEMAINE"
   ============================================================ */
.week-bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; margin: 8px 0 14px; }
.week-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; }
.week-bar__fill { width: 100%; max-width: 30px; min-height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--accent), var(--accent-2)); transition: height .6s var(--ease); }
.week-bar__lbl { font-size: 10.5px; color: var(--text-faint); }
.week-bar.is-today .week-bar__fill { background: linear-gradient(180deg, #22c55e, #4ade80); }
.week-bar.is-today .week-bar__lbl { color: var(--ok); font-weight: 700; }
.week-stats { display: flex; flex-wrap: wrap; gap: 16px; }
.wstat { display: flex; flex-direction: column; }
.wstat b { font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.wstat span { font-size: 11px; color: var(--text-faint); }

/* ============================================================
   v9 — MON MONDE (couche RPG low-fi, douce & cozy)
   ============================================================ */
.world-view { display: flex; flex-direction: column; gap: 18px; max-width: 1000px; }
.world-note { font-size: 12.5px; color: var(--text-faint); background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: 9px 13px; }
.world-section-title { font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-faint); font-weight: 650; margin: 8px 2px -4px; }

/* Barre de progression du monde */
.world-progress-bar { height: 8px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.world-progress-bar__fill { height: 100%; border-radius: inherit; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .7s var(--ease); }

/* 1. Fiche personnage */
.character-card { display: flex; gap: 18px; align-items: center; }
.character-card__avatar {
  width: 74px; height: 74px; flex: none; display: grid; place-items: center; font-size: 38px;
  border-radius: 20px; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm);
}
.character-card__main { flex: 1; min-width: 0; }
.character-card__name { font-size: 21px; font-weight: 750; letter-spacing: -.01em; }
.character-card__arch { font-size: 13px; color: var(--accent); font-weight: 600; }
.character-card__title { font-size: 12.5px; color: var(--text-dim); margin: 5px 0 2px; }
.character-card__lvl { font-size: 12.5px; color: var(--text-faint); margin-bottom: 7px; }
.character-card__ambiance { font-size: 13px; color: var(--text-dim); font-style: italic; margin: 9px 0 0; }

/* 2. Compétences */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.skill-card { display: flex; flex-direction: column; gap: 9px; }
.skill-card__head { display: flex; align-items: center; gap: 11px; }
.skill-card__icon { font-size: 24px; line-height: 1; }
.skill-card__name { font-size: 15px; font-weight: 650; }
.skill-card__lvl { font-size: 12px; color: var(--text-faint); }
.skill-card__xp { font-size: 11.5px; color: var(--text-faint); }
.skill-card__desc { font-size: 12.5px; color: var(--text-dim); margin: 0; line-height: 1.45; }

/* 3. Village */
.village-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.building-card { display: flex; flex-direction: column; gap: 9px; }
.building-card__head { display: flex; align-items: center; gap: 11px; }
.building-card__icon { font-size: 24px; line-height: 1; }
.building-card__name { font-size: 14.5px; font-weight: 650; }
.building-card__lvl { font-size: 12px; color: var(--text-faint); }
.building-card__desc { font-size: 12.5px; color: var(--text-dim); margin: 0; line-height: 1.45; }
.building-card.locked { opacity: .62; border-style: dashed; }
.building-card.locked .building-card__icon { filter: grayscale(1); opacity: .8; }

/* 4. Événements */
.world-events { display: flex; flex-direction: column; gap: 1px; }
.world-event { font-size: 13.5px; color: var(--text-dim); padding: 9px 8px; border-radius: var(--r-sm); transition: background var(--t-fast); }
.world-event:hover { background: var(--surface-2); }

/* Apparition douce + hover léger (sans librairie) */
.skill-card, .building-card { transition: transform var(--t-fast), border-color var(--t-fast); }
.skill-card:hover, .building-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.building-card.locked:hover { transform: none; }

@media (max-width: 720px) {
  .character-card__avatar { width: 60px; height: 60px; font-size: 30px; border-radius: 16px; }
  .character-card__name { font-size: 19px; }
}

/* ============================================================
   v10 — CRÉATION DE PERSONNAGE (Mon Monde)
   ============================================================ */
.char-create { display: flex; flex-direction: column; }
.char-create__title { font-size: 18px; }
.char-create__sub { font-size: 13px; color: var(--text-faint); margin: 3px 0 14px; }
.char-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.char-pill { padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); transition: all var(--t-fast); }
.char-pill:hover { border-color: var(--border-strong); color: var(--text); }
.char-pill.is-sel { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.char-choices--avatars { gap: 10px; }
.char-avatar { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; padding: 11px 6px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.char-avatar:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.char-avatar.is-sel { background: var(--accent-soft); border-color: var(--accent); transform: translateY(-2px); }
.char-avatar__emoji { font-size: 28px; line-height: 1; }
.char-avatar__lbl { font-size: 11px; color: var(--text-dim); }
.char-create__actions { display: flex; gap: 10px; margin-top: 16px; }
.char-create__actions .btn--block { flex: 1; }
.character-card { position: relative; }
.character-card__edit { position: absolute; top: 12px; right: 12px; }

/* ============================================================
   v11 — TITRES & SUCCÈS (Mon Monde)
   ============================================================ */
.titles-card { display: flex; flex-direction: column; gap: 12px; }
.titles-row { display: flex; flex-wrap: wrap; gap: 8px; }
.title-chip { padding: 7px 13px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); transition: all var(--t-fast); }
.title-chip:hover { border-color: var(--border-strong); color: var(--text); }
.title-chip.is-current { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; }
.title-chip--locked { opacity: .65; cursor: help; background: var(--surface); border-style: dashed; }
.title-chip--locked:hover { opacity: .85; }
.titles-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.titles-locked__lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: 650; }

/* ============================================================
   v12 — RPG DANS LA REVUE DE JOURNÉE
   ============================================================ */
.review-rpg { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 14px 16px; }
.review-rpg h4 { color: var(--accent); }
.rpg-gain { font-size: 13.5px; color: var(--text-dim); padding: 3px 0; }
.rpg-levelup { font-size: 13.5px; color: var(--ok); font-weight: 600; padding: 3px 0; }
.rpg-title { font-size: 13.5px; color: var(--accent-2); font-weight: 650; padding: 3px 0; }

/* ============================================================
   v13 — MON MONDE VISUEL : fiche compacte + village isométrique
   (HTML/CSS/SVG only, aucune dépendance, aucun Canvas, aucune 3D)
   ============================================================ */

/* --- Fiche personnage COMPACTE (en haut) --- */
.character-summary { display: flex; align-items: center; gap: 14px; position: relative; padding: 14px 16px; }
.character-summary__avatar {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center; font-size: 27px;
  border-radius: 15px; background: linear-gradient(135deg, var(--accent-soft), var(--surface-3));
  border: 1px solid var(--border-strong);
}
.character-summary__main { flex: 1; min-width: 0; }
.character-summary__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.character-summary__name { font-size: 17px; font-weight: 750; }
.character-summary__title { font-size: 12px; color: var(--accent); font-weight: 650; }
.character-summary__sub { font-size: 12px; color: var(--text-faint); margin: 2px 0 8px; }
.character-summary__edit { position: absolute; top: 10px; right: 10px; }
.character-summary .world-progress-bar { margin: 0; }

/* --- Conteneur du village (scroll horizontal sur mobile) --- */
.world-map {
  overflow-x: auto; overflow-y: hidden; border-radius: var(--r-lg); border: 1px solid var(--border);
  background:
    radial-gradient(130% 90% at 50% 4%, color-mix(in srgb, var(--accent) 9%, var(--surface)) 0%, var(--surface) 62%),
    var(--surface);
  padding: 16px 0 20px; margin-bottom: 6px; -webkit-overflow-scrolling: touch;
}
.world-map-inner {
  position: relative; width: 416px; height: 276px; margin: 0 auto;
  animation: worldMapIn .55s var(--ease) both;
}
@keyframes worldMapIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* --- Tuiles de sol (losanges herbe pastel) --- */
.iso-tile {
  position: absolute; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(158deg, #d4ead0, #c2e2c0);
  box-shadow: inset 0 0 0 1px rgba(120,160,120,.16);
}
.iso-tile:nth-child(2n) { background: linear-gradient(158deg, #cfe7cb, #bcdeba); }
[data-theme="dark"] .iso-tile { background: linear-gradient(158deg, #38483f, #31423a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }
[data-theme="dark"] .iso-tile:nth-child(2n) { background: linear-gradient(158deg, #34443c, #2d3e37); }

/* --- Bâtiments isométriques --- */
.iso-building {
  position: absolute; width: 84px; transform: translate(-50%, -42%);
  transition: transform var(--t-fast), filter var(--t-fast); will-change: transform;
}
.iso-building .iso-svg { width: 84px; height: 126px; display: block; overflow: visible; }
.iso-building:not(.locked):hover { transform: translate(-50%, -46%); z-index: 999 !important; }
.iso-building.locked { opacity: .8; }

/* Lueur douce et discrète sur un bâtiment amélioré récemment */
.iso-building.upgraded .iso-svg { animation: isoGlow 2.8s var(--ease) infinite; }
@keyframes isoGlow {
  0%, 100% { filter: drop-shadow(0 4px 5px rgba(0,0,0,.14)) drop-shadow(0 0 3px rgba(245,200,90,.45)); }
  50%      { filter: drop-shadow(0 4px 5px rgba(0,0,0,.14)) drop-shadow(0 0 10px rgba(245,200,90,.9)); }
}

/* Étiquette : masquée par défaut (scène épurée), révélée au survol/focus du bâtiment.
   Sur mobile, le nom + niveau reste accessible via la bulle d'aide (data-tip, appui long). */
.building-label {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%) translateY(4px); white-space: nowrap;
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border-strong);
  pointer-events: none; backdrop-filter: blur(3px); box-shadow: 0 4px 12px -4px rgba(0,0,0,.4);
  opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast); z-index: 3;
}
.iso-building:hover .building-label,
.iso-building:focus-within .building-label { opacity: 1; transform: translateX(-50%) translateY(0); }
.building-level { color: var(--accent); font-weight: 750; margin-left: 2px; }
.iso-building.locked .building-label { color: var(--text-faint); font-weight: 550; }

/* Mobile : on garde le village lisible, scroll horizontal si besoin */
@media (max-width: 560px) {
  .world-map { border-radius: var(--r-md); }
  .world-map-inner { margin: 0 8px; }
}

/* ============================================================
   v14 — AGENT DE JOURNÉE : routines, formulaires, rappels, Pomodoro
   ============================================================ */
.agent-help { font-size: 13px; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin: 0 0 12px; line-height: 1.5; }
.muted { color: var(--text-faint); font-weight: 500; }
.linklike { background: none; border: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); margin: 8px 0; cursor: pointer; }
.check-line input { width: 16px; height: 16px; accent-color: var(--accent); }

/* Routines du jour (Aujourd'hui) */
.routines-list { display: flex; flex-direction: column; gap: 8px; }
/* « Qui s'en occupe » (assignation indicative, 2026-07-18) : chips prénoms sur tâches d'espace,
   listes et projets partagés. Vert = moi, accent = les autres. */
.asg-chips { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.asg-chip { display: inline-flex; padding: 1px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 650; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.asg-chip--me { background: color-mix(in srgb, #22c55e 16%, transparent); color: #4ade80; border-color: color-mix(in srgb, #22c55e 30%, transparent); }

/* Sous-sections « ◈ [espace] » DANS le bloc Routines du jour (un seul bloc visuel, retour Jason). */
.routines-subhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 2px 8px; }
.routines-subhead__name { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.routine-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); transition: background var(--t-fast); }
.routine-row:hover { background: var(--surface-3); }
.routine-row__main { flex: 1; min-width: 0; }
.routine-row__main--link { cursor: pointer; border-radius: 8px; margin: -4px -6px; padding: 4px 6px; transition: background var(--t-fast); }
.routine-row__main--link:hover { background: var(--surface-3, var(--surface)); }
.routine-row__title { font-size: 14px; font-weight: 600; }
.routine-row__sub { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }
.routine-row.is-done .routine-row__title { text-decoration: line-through; color: var(--text-faint); }

/* Gestion des récurrences (modale) */
.rt-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.chip-btn { padding: 7px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); cursor: pointer; transition: all var(--t-fast); }
.chip-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.rt-list { display: flex; flex-direction: column; gap: 8px; }
.rt-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.rt-row.is-off { opacity: .58; }
.rt-row__main { flex: 1; min-width: 0; }
.rt-row__title { font-size: 14px; font-weight: 650; }
.rt-row__sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.rt-next { color: var(--text-dim); }
.rt-row__actions { display: flex; align-items: center; gap: 6px; flex: none; }
@media (max-width: 560px) { .rt-row { flex-wrap: wrap; } .rt-row__actions { width: 100%; justify-content: flex-end; } }

/* Formulaire récurrence : jours de semaine + aperçu */
.dow-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dow-pill { padding: 6px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-dim); cursor: pointer; transition: all var(--t-fast); }
.dow-pill.is-sel { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; }
.rt-preview { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--border); font-size: 13px; color: var(--text); }

/* Plan de journée (agent) */
.agent-plan { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); border-color: var(--border-strong); }
.agent-plan__head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 8px; }
/* Plan de journée : la priorité est cliquable → ouvre la tâche */
.agent-plan__primary {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 11px 13px; cursor: pointer; color: var(--text);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.agent-plan__primary:hover { border-color: var(--accent); background: var(--surface-3); }
.agent-plan__primary:active { transform: translateY(1px); }
.agent-plan__lead { font-size: 15.5px; }
.agent-plan__sub { font-size: 13px; color: var(--text-dim); }
.agent-plan__open { font-size: 11.5px; font-weight: 700; color: var(--accent); margin-top: 4px; }
.agent-alerts { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.agent-alert { font-size: 13px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--warn, #e0a458) 18%, var(--surface)); border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 10px; }
.agent-method { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 11px; }
.agent-method b { color: var(--text); }
.agent-steps { margin-top: 10px; }
.agent-steps__lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 650; margin-bottom: 4px; }
.agent-steps ol { margin: 0; padding-left: 20px; }
.agent-steps li { font-size: 13.5px; color: var(--text); padding: 2px 0; }

/* Rappels à venir (Aujourd'hui) */
.head-actions { display: flex; gap: 8px; align-items: center; }
.reminders-list { display: flex; flex-direction: column; gap: 7px; }
.reminder-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.reminder-row__title { font-size: 13.5px; font-weight: 600; }
.reminder-row__when { font-size: 12px; color: var(--accent); font-weight: 650; white-space: nowrap; }

/* Outils de la modale Rappels */
.rem-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.rem-note { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.rem-note--ok { color: var(--ok, #6cc070); }
.rem-edu { font-size: 12px; color: var(--text-faint); line-height: 1.5; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; margin: 0 0 12px; }
.rem-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin: 14px 0 8px; }

/* Pop-up de rappel (non bloquante, en bas au centre, empilable) */
.reminder-pop {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 24px);
  z-index: 4000; width: min(380px, calc(100vw - 28px));
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.55); padding: 16px 18px;
  opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.reminder-pop.is-in { opacity: 1; transform: translate(-50%, 0); }
.reminder-pop__close { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--text-faint); font-size: 15px; cursor: pointer; }
.reminder-pop__head { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--accent); }
.reminder-pop__title { font-size: 16px; font-weight: 700; margin-top: 3px; }
.reminder-pop__msg { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.reminder-pop__actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
@media (max-width: 560px) { .reminder-pop { bottom: 80px; } }

/* Pomodoro — widget flottant */
.pomo-widget {
  position: fixed; right: 20px; bottom: 84px; z-index: 3500; width: 232px;   /* 84px = AU-DESSUS du bouton « Retour » (qui est à 20px) */
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.55); padding: 13px 15px; text-align: center;
  animation: worldMapIn .3s var(--ease) both;
}
.pomo-widget--work { border-top: 3px solid var(--accent); }
.pomo-widget--break { border-top: 3px solid var(--ok, #6cc070); }
.pomo-widget--paused { border-top: 3px solid var(--text-faint); }
.pomo-widget__phase { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--text-dim); }
.pomo-widget__task { font-size: 12.5px; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pomo-widget__time { font-size: 34px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.pomo-widget__cycles { font-size: 11px; color: var(--text-faint); margin-bottom: 9px; }
.pomo-widget__actions { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.pomo-widget__actions .btn { padding: 5px 8px; font-size: 11.5px; white-space: nowrap; }
@media (max-width: 560px) { .pomo-widget { right: 12px; bottom: 138px; width: 184px; } }
/* Quand le minuteur flottant est affiché, on remonte les toasts AU-DESSUS de lui (sinon il les cache).
   248px ne suffisait pas (retour Jason 2026-07-11) : le widget culmine à ~84+180 px → 280px, et on
   passe aussi DEVANT lui (z-index) pour les toasts à 2 lignes qui déborderaient encore. */
body.has-pomo-widget .toasts { bottom: 280px; z-index: 3600; }
@media (max-width: 560px) { body.has-pomo-widget .toasts { bottom: 330px; } }

/* Pomodoro — carte Aujourd'hui + modale */
.pomo-card--active { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), var(--surface)); }
.pomo-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 12px; }
.pomo-mode { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 11px 13px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface-2); cursor: pointer; transition: all var(--t-fast); color: var(--text); }
.pomo-mode b { font-size: 14px; }
.pomo-mode span { font-size: 11.5px; color: var(--text-faint); }
.pomo-mode:hover { border-color: var(--accent); }
.pomo-mode.is-sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pomo-edu { margin-top: 8px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px 12px; background: var(--surface-2); }
.pomo-edu summary { cursor: pointer; font-weight: 600; padding: 6px 0; color: var(--text); }
.pomo-edu p { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin: 0 0 8px; }

/* Page "en développement" (modules hors V1) */
.blocked-view { display: grid; place-items: center; min-height: 58vh; padding: 18px; }
.blocked-card { max-width: 540px; text-align: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: 0 18px 44px -22px rgba(0,0,0,.5); }
.blocked-card__title { font-size: 20px; margin: 0 0 16px; }
.blocked-card p { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin: 0 0 12px; text-align: left; }
.blocked-card .btn { margin-top: 10px; }

/* V1 mobile : pas de débordement horizontal — la jauge XP du bandeau (touche RPG,
   secondaire en V1) est masquée sur petit écran ; les contrôles annuler/refaire/son restent. */
@media (max-width: 640px) {
  .topbar__xp { display: none; }
}

/* Bloc "Bloqué, pas oublié" (Aujourd'hui) */
.bw-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 2px; }
.bw-row + .bw-row { border-top: 1px solid var(--border); }
.bw-tag { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); margin-top: 1px; }
.bw-tag--blocked { background: color-mix(in srgb, var(--late, #e06666) 22%, var(--surface)); color: var(--late, #e06666); }
.bw-tag--waiting { background: color-mix(in srgb, var(--warn, #e0a458) 22%, var(--surface)); color: var(--warn, #e0a458); }
.bw-row__main { flex: 1; min-width: 0; }
.bw-row__title { font-size: 14px; font-weight: 600; }
.bw-row__sub { font-size: 12px; color: var(--text-faint); margin-top: 1px; }

/* Modale "Sécurité des données" */
.backup-stats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.backup-stat { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.backup-stat span { color: var(--text-faint); }
.backup-stat b { color: var(--text); }
.backup-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 8px; }
.backup-hint { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin: 0 0 18px; }
.backup-hint b { color: var(--text-dim); }

/* Sauvegardes automatiques (liste datée) */
.bk-h { font-size: 13px; font-weight: 700; margin: 4px 0 4px; }
.bk-sub { font-size: 12px; color: var(--text-faint); margin: 0 0 10px; line-height: 1.5; }
.bk-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.bk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.bk-row__date { font-size: 13px; color: var(--text); text-transform: capitalize; }
.bk-row__act { display: flex; align-items: center; gap: 6px; flex: none; }
/* Message de saisie RESET (mal tapé / ok) */
.bk-reset-msg { font-size: 12px; margin: -2px 0 9px; min-height: 15px; line-height: 1.3; }
.bk-reset-msg--warn { color: var(--late, #e06666); font-weight: 600; }
.bk-reset-msg--ok { color: var(--ok, #6cc070); font-weight: 600; }

/* Navigation : une COULEUR d'icône par outil (demande Jason 2026-07-11 — repérage visuel sans
   lire). Teintes alignées sur les couleurs de types de l'agenda quand elles existent (tâche bleue,
   projet violet, événement cyan, partagé rose). Gardées même actives, desktop ET barre basse. */
.nav__item[data-nav="dashboard"] .nav__icon, .nav__item[data-nav="dashboard"].is-active .nav__icon,
.bottomnav__item[data-nav="dashboard"] span { color: #22c55e; }
.nav__item[data-nav="projects"] .nav__icon, .nav__item[data-nav="projects"].is-active .nav__icon,
.bottomnav__item[data-nav="projects"] span { color: #a855f7; }
.nav__item[data-nav="simple"] .nav__icon, .nav__item[data-nav="simple"].is-active .nav__icon,
.bottomnav__item[data-nav="simple"] span { color: #3b82f6; }
.nav__item[data-nav="lists"] .nav__icon, .nav__item[data-nav="lists"].is-active .nav__icon,
.bottomnav__item[data-nav="lists"] span { color: #f97316; }
.nav__item[data-nav="calendar"] .nav__icon, .nav__item[data-nav="calendar"].is-active .nav__icon,
.bottomnav__item[data-nav="calendar"] span { color: #06b6d4; }
.nav__item[data-nav="ideas"] .nav__icon, .nav__item[data-nav="ideas"].is-active .nav__icon,
.bottomnav__item[data-nav="ideas"] span { color: #eab308; }
.nav__item[data-nav="spaces"] .nav__icon, .nav__item[data-nav="spaces"].is-active .nav__icon,
.bottomnav__item[data-nav="spaces"] span { color: #ec4899; }
.nav__item .nav__icon { opacity: .95; }
.backup-danger { border: 1px solid color-mix(in srgb, var(--late, #e06666) 35%, var(--border)); border-radius: var(--r-md); padding: 12px 14px; background: color-mix(in srgb, var(--late, #e06666) 7%, var(--surface)); }
.backup-danger h4 { margin: 0 0 6px; font-size: 14px; }
.backup-danger p { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 0 0 10px; }
.backup-danger input { width: 100%; margin-bottom: 9px; padding: 11px 13px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 14px; }
.backup-danger input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Courbe de progression (Dashboard) */
.pc-toolbar { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 6px; align-items: flex-end; justify-content: space-between; }
.pc-ctrl { display: flex; flex-direction: column; gap: 5px; }
.pc-ctrl__lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.pc-ctrl--period { align-items: flex-end; }
.pc-seg { display: inline-flex; }
.pc-legend { display: flex; flex-wrap: wrap; gap: 13px; margin: 6px 0 2px; }
.pc-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.pc-leg i { width: 13px; height: 3px; border-radius: 2px; display: inline-block; }
.pc-chart { margin-top: 8px; width: 100%; overflow: hidden; }
.pc-svg { width: 100%; height: auto; display: block; }
.pc-grid { stroke: var(--border); stroke-width: 1; }
.pc-ylabel, .pc-xlabel { fill: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.pc-dot { cursor: help; }
.pc-dot:hover { r: 5; }
.pc-bar { transition: opacity var(--t-fast); }
.pc-bar:hover { opacity: .8; }
.pc-hover { cursor: help; }

/* Dashboard : espacement vertical cohérent entre les cartes (comme la vue Aujourd'hui) */
.dash { display: flex; flex-direction: column; gap: 16px; }
.dash > .dash-grid { margin-top: 0; }

/* Courbe de progression : en-tête repliable + analyse */
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.pc-head__main h3 { margin: 0; }
.pc-head__main p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-faint); }
.pc-head--open { margin-bottom: 10px; }
.pc-card--collapsed { transition: border-color var(--t-fast); }
.pc-card--collapsed:hover { border-color: var(--border-strong); }
.pc-chevron { font-size: 14px; color: var(--text-faint); transition: transform var(--t-fast); }
.pc-chevron--open { transform: rotate(180deg); }
.pc-insight { font-size: 13px; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px; margin: 8px 0; }
.pc-insight b { color: var(--text); }

/* Menu "Plus" (barre basse mobile) */
.more-list { display: flex; flex-direction: column; gap: 8px; }
.more-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.more-item:hover { border-color: var(--accent); background: var(--surface-3); }
.more-item__ic { font-size: 19px; width: 26px; text-align: center; flex: none; }
.more-item__main { flex: 1; min-width: 0; }
.more-item__label { font-size: 14.5px; font-weight: 650; }
.more-item__sub { font-size: 12px; color: var(--text-faint); margin-top: 1px; }
.more-item__chev { color: var(--text-faint); font-size: 18px; flex: none; }

/* ===== Onboarding (accueil + visite guidée) — v16 ===== */
.ob-sub { font-size: 13px; font-weight: 600; color: var(--accent); margin: -4px 0 10px; }
.ob-text { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-bottom: 16px; }

/* Visite guidée — effet projecteur : voile (1000) SOUS le menu (1001) SOUS la carte (1002).
   Le menu reste net et visible pendant que le reste de l'écran est flouté. */
.ob-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 14, 30, .72); backdrop-filter: blur(3px); animation: ob-fade .2s ease; }
@keyframes ob-fade { from { opacity: 0; } to { opacity: 1; } }
.ob-tour { position: fixed; inset: 0; z-index: 1002; display: flex; align-items: center; justify-content: center; padding: 20px; }
/* Pendant la visite : la barre latérale et la barre basse passent au-dessus du voile */
body.ob-touring .sidebar { z-index: 1001; }
body.ob-touring .bottomnav { z-index: 1001; }
/* Les onglets non concernés s'estompent pour guider l'œil vers le bon */
body.ob-touring .nav__item:not(.ob-hl),
body.ob-touring .bottomnav__item:not(.ob-hl) { opacity: .38; transition: opacity var(--t-fast); }
.ob-card { position: relative; z-index: 1; width: min(440px, 94vw); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg, 16px); box-shadow: 0 30px 80px -24px rgba(0,0,0,.7); padding: 22px 22px 18px; animation: ob-pop .22s ease; }
@keyframes ob-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.ob-card__step { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.ob-card h3 { font-size: 19px; margin: 0 0 8px; }
.ob-card p { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin: 0; }
.ob-dots { display: flex; gap: 6px; margin: 16px 0 4px; }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: background var(--t-fast), transform var(--t-fast); }
.ob-dot.is-on { background: var(--accent); transform: scale(1.25); }
.ob-card__actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ob-card__nav { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.ob-demo { margin-top: 14px; padding: 13px 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); }
.ob-demo p { font-size: 13px; margin-bottom: 10px; }
/* Mise en avant de l'onglet concerné pendant la visite */
.nav__item.ob-hl, .bottomnav__item.ob-hl { position: relative; background: var(--accent-soft); border-radius: var(--r-md); box-shadow: inset 0 0 0 1.6px var(--accent), 0 0 0 3px var(--accent-soft); animation: ob-pulse 1.5s ease-in-out infinite; }
.nav__item.ob-hl { color: var(--text); }
.nav__item.ob-hl .nav__icon { color: var(--accent); opacity: 1; }
@keyframes ob-pulse { 0%, 100% { box-shadow: inset 0 0 0 1.6px var(--accent), 0 0 0 0 var(--accent-soft); } 50% { box-shadow: inset 0 0 0 1.6px var(--accent), 0 0 0 6px var(--accent-soft); } }

/* Citation d'accueil (discrète) */
.ob-quote { font-style: italic; color: var(--text-dim); border-left: 2px solid var(--accent); padding: 2px 0 2px 12px; margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; }

/* Cible de contenu sortie du flou (bulle ancrée) + fil courbe vers elle */
.ob-spot { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px var(--accent-soft) !important; border-radius: var(--r-md); }
.ob-wire-svg { position: fixed; inset: 0; z-index: 1001; pointer-events: none; overflow: visible; display: none; }
.ob-wire { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; opacity: .92; filter: drop-shadow(0 0 5px var(--accent-soft)); animation: ob-fade .3s ease; }
.ob-wire-dot { fill: var(--accent); animation: ob-dot-pulse 1.4s ease-in-out infinite; }
@keyframes ob-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* Pendant la visite : pas d'animation de contenu (sinon contexte d'empilement qui ré-emprisonne la cible) ;
   entrée de bulle en fondu simple (sans transform, pour que le fil parte du bon point). */
body.ob-touring .content > * { animation: none !important; }
#ob-tour .ob-card { animation: ob-fade .18s ease; }

/* Projet exemple (démo) */
.demo-badge { display: inline-block; vertical-align: middle; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, #f0b323, #f08a23); color: #2a1c00; margin-left: 7px; }
.demo-encart { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border-strong); border-left: 3px solid #f0b323; border-radius: var(--r-md); background: var(--surface-2); }
.demo-encart__head { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.demo-encart p { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0 0 12px; }
.demo-encart__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Centre d'aide & découverte */
.help-sec { padding: 15px 0; border-top: 1px solid var(--border); }
.help-sec:first-child { padding-top: 0; border-top: none; }
.help-sec h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); margin: 0 0 10px; }
.help-p { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin: 0 0 10px; }
.help-list { margin: 0 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.help-list li { font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.help-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; }
.help-row + .help-row { border-top: 1px dashed var(--border); }
.help-row__txt { display: flex; flex-direction: column; min-width: 0; }
.help-row__txt b { font-size: 14px; }
.help-row__txt span { font-size: 12.5px; color: var(--text-faint); margin-top: 1px; }

/* Journal des nouveautés (patch notes) */
.changelog { display: flex; flex-direction: column; gap: 16px; }
.cl-entry { border-left: 3px solid var(--border); padding: 2px 0 2px 14px; }
.cl-entry--latest { border-left-color: var(--accent); }
.cl-entry__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.cl-ver { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.cl-badge { font-size: 10.5px; font-weight: 700; color: var(--accent-ink, #fff); background: var(--accent); border-radius: 999px; padding: 2px 9px; letter-spacing: .02em; }
.cl-date { font-size: 12px; color: var(--text-faint); margin-left: auto; }
.cl-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.cl-notes li { font-size: 13.5px; color: var(--text-dim); line-height: 1.45; }
.help-soon { display: flex; flex-wrap: wrap; gap: 8px; }
.soon-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-dim); padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.soon-chip:hover { border-color: var(--accent); background: var(--surface-3); }
.soon-chip span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #f0b323; }

/* Bouton flottant « Retour » (toujours visible) */
.feedback-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  border: none; font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 26px -8px var(--accent), 0 2px 6px rgba(0,0,0,.3);
  transition: transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.feedback-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px var(--accent), 0 2px 6px rgba(0,0,0,.3); }
.feedback-fab:active { transform: translateY(0) scale(.98); }
.feedback-fab__ic { font-size: 16px; line-height: 1; }
/* Bouton flottant « Pomodoro » : juste AU-DESSUS de « Retour », pour lancer un minuteur de n'importe quelle page. */
.pomo-fab {
  position: fixed; right: 20px; bottom: 80px; z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
  font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.pomo-fab__ic { color: var(--accent); display: inline-flex; line-height: 1; }
.pomo-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.25); border-color: var(--accent); }
.pomo-fab:active { transform: translateY(0) scale(.98); }
body.has-pomo-widget .pomo-fab { display: none; }   /* minuteur en cours → le widget flottant prend le relais */
/* Dès que la barre basse existe (≤ 720 px) : les bulles se placent AU-DESSUS d'elle, en comptant
   la « safe area » iPhone (encoche/barre home) — sinon elles recouvraient le bouton « Plus ». */
@media (max-width: 720px) {
  .feedback-fab { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); }
  .pomo-fab { right: 14px; bottom: calc(142px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .pomo-fab { padding: 10px; }
  .pomo-fab__label { display: none; }
  .pomo-fab__ic svg { width: 19px; height: 19px; }
  .feedback-fab { padding: 10px 14px; }
  .feedback-fab__label { display: none; }
  .feedback-fab__ic { font-size: 19px; }
}

/* Formulaire de retour / bug */
.fb-types { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-type { position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; white-space: nowrap; padding: 9px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-dim); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.fb-type:hover { border-color: var(--accent); color: var(--text); }
.fb-type input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* puce radio masquée : le chip sélectionné suffit */
.fb-type:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.fb-hint { font-size: 12.5px; color: var(--accent); min-height: 16px; margin: 2px 0 0; }
/* Bouton copier (icône deux carrés) */
.icon-btn svg { display: block; }
.copy-btn.is-ok { color: var(--ok, #6cc070); border-color: var(--ok, #6cc070); }
.td-copy-row { display: flex; justify-content: flex-end; margin-top: 6px; }
/* Sélecteur de statut rapide dans le détail d'une tâche */
.td-status-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tstatus-pick { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.tstatus-pick:hover { border-color: var(--accent); color: var(--text); }
.tstatus-pick.is-sel { color: #fff; border-color: transparent; }
.tstatus-pick--todo.is-sel { background: var(--text-faint); }
.tstatus-pick--inprogress.is-sel { background: #5b8bd0; }
.tstatus-pick--done.is-sel { background: #4fa564; }
.tstatus-pick--blocked.is-sel { background: #d05a5a; }
.tstatus-pick--waiting.is-sel { background: #cc8a3a; }
.tstatus-pick--dropped.is-sel { background: var(--text-dim); }

/* Menu déroulant de choix du thème */
.theme-menu { position: fixed; z-index: 1200; min-width: 180px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; animation: ob-fade .12s ease; }
.theme-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border-radius: var(--r-sm); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.theme-menu__item:hover { background: var(--surface-2); }
.theme-menu__item.is-sel { color: var(--accent); }
.theme-menu__check { margin-left: auto; color: var(--accent); }
.theme-menu__dot { width: 13px; height: 13px; border-radius: 50%; flex: none; border: 1px solid var(--border-strong); }
.theme-dot--dark { background: #121622; }
.theme-dot--light { background: #f4f6fb; }
.theme-dot--emma { background: linear-gradient(135deg, #CD9A55 50%, #6E9A4F 50%); }
/* Sélecteur de thème en modale (mobile) */
.theme-picker { display: flex; flex-direction: column; gap: 8px; }
.theme-pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.theme-pick:hover { background: var(--surface-3); }
.theme-pick.is-sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.theme-pick__name { flex: 1; }
.sub-tabs { margin-bottom: 14px; }   /* onglet Ponctuelles / Routines en haut de la page Tâches */
/* Menu déroulant « Déjà fait » (page Tâches) */
.done-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin: 22px 0 6px; padding: 8px 4px; background: none; border: none; color: var(--text-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; text-align: left; }
.done-toggle:hover { color: var(--text); }
.done-toggle__chev { font-size: 12px; width: 14px; text-align: center; }
.done-toggle .count { text-transform: none; }
.done-list { opacity: .9; }
.all-done-note { text-align: center; color: var(--text-dim); font-size: 14px; padding: 26px 0; }
.done-toggle--cat { margin: 4px 0 2px; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
/* Rappel « En cours » en haut du détail d'un projet */
.inprogress-card { margin-bottom: 10px; border-left: 3px solid var(--warn, #f59e0b); }
.inprogress-list { display: flex; flex-direction: column; gap: 6px; }
.inprogress-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 13.5px; font-weight: 550; cursor: pointer; transition: background var(--t-fast); }
.inprogress-row:hover { background: var(--surface-3); }
.inprogress-row__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ jamais `flex: none` ici : un nom d'étape long élargissait TOUTE la page sur téléphone
   (la carte poussait le document à ~570 px → bulles qui débordent partout, retour Jason 2026-08-16). */
.inprogress-row__cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); flex: 0 1 auto; min-width: 0; max-width: 55%; }
.inprogress-row__catname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inprogress-row__cat .dot { width: 7px; height: 7px; border-radius: 50%; }
/* Mobile : dans un projet, les actions de tâche (En cours / ✎ / 🗑) passent SOUS le titre
   pour ne plus l'écraser (le titre récupère toute la largeur). */
@media (max-width: 560px) {
  .category .task { flex-wrap: wrap; }
  .category .task__actions { flex: 1 1 100%; justify-content: flex-end; margin-top: 2px; }
}

/* Bandeau haut : recherche + nouvelle tâche */
.topbar-search { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); }
.topbar-search:hover { color: var(--text); }
@media (max-width: 760px) { .topbar-search__label { display: none; } }

/* Résultats de recherche */
/* Recherche : la fenêtre est ancrée EN HAUT (pas centrée) et les résultats ont une hauteur FIXE
   qui défile à l'intérieur → la barre de recherche reste parfaitement immobile pendant la frappe. */
.modal-overlay--top { place-items: start center; padding-top: max(48px, 8vh); }
.modal--search .search-results { height: min(52vh, 460px); max-height: none; }
.search-results { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.search-row { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.search-row:hover { border-color: var(--accent); background: var(--surface-3); }
.search-row__title { font-size: 14px; font-weight: 550; }
.search-row__sub { font-size: 11.5px; color: var(--text-faint); }
.search-row.is-done .search-row__title { text-decoration: line-through; opacity: .7; }

/* Cartes du bas (Aujourd'hui) : Série / XP du jour / Prochain */
.today-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 18px; }
.stat-card--next { transition: border-color var(--t-fast); }
.stat-card--next[role="button"] { cursor: pointer; }
.stat-card--next[role="button"]:hover { border-color: var(--accent); }
.stat-card__label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 700; }
.stat-card__val { font-size: 24px; font-weight: 750; margin-top: 6px; color: var(--accent); line-height: 1.1; }
.stat-card__val span { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.stat-card__val--sm { font-size: 14.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .today-stats { grid-template-columns: 1fr; } }

/* Carte « Focus du jour » : scène nocturne + anneau du minuteur (Pomodoro) + bouton clair */
.focus-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #f2f5e8; border: none; padding: 22px 26px; min-height: 152px; background: var(--scene, linear-gradient(155deg,#1B2A16,#3A5A2E 52%,#BCC46A)); }
.focus-card__bokeh { position: absolute; inset: 0; pointer-events: none; filter: blur(7px); opacity: .85;
  background: radial-gradient(70px 70px at 80% 30%, var(--bokeh, rgba(255,228,160,.55)), transparent 70%),
              radial-gradient(46px 46px at 90% 66%, var(--bokeh, rgba(255,228,160,.42)), transparent 70%),
              radial-gradient(34px 34px at 67% 16%, var(--bokeh, rgba(255,228,160,.34)), transparent 70%); }
.focus-card__main { position: relative; z-index: 1; min-width: 0; }
.focus-card__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.72); }
.focus-card__title { font-size: 23px; font-weight: 650; margin: 6px 0 4px; font-family: Georgia, "Times New Roman", serif; color: #f7f9ef; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.focus-card__title[role="button"] { cursor: pointer; }
.focus-card__title[role="button"]:hover { text-decoration: underline; text-underline-offset: 3px; }
.focus-card__sub { font-size: 13px; color: rgba(255,255,255,.72); }
.focus-card__chips { display: flex; gap: 8px; margin: 13px 0 0; }
.focus-chip { font-size: 12px; font-weight: 600; color: #f2f5e8; background: var(--glass, rgba(20,15,12,.5)); border: 1px solid rgba(255,255,255,.18); padding: 5px 11px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.focus-card__actions { margin-top: 14px; display: flex; gap: 7px; flex-wrap: wrap; }
.focus-btn { background: var(--btn-light, #fff); color: var(--btn-light-ink, #241c16); font-weight: 700; padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.45); transition: transform var(--t-fast); }
.focus-btn:hover { transform: translateY(-1px); }
.focus-btn--ghost { background: var(--glass, rgba(20,15,12,.5)); color: #f2f5e8; border: 1px solid rgba(255,255,255,.22); box-shadow: none; padding: 9px 13px; font-weight: 600; }
.focus-card__timer { position: relative; z-index: 1; flex: none; width: 124px; height: 124px; display: grid; place-items: center; }
.focus-ring { width: 124px; height: 124px; }
.focus-ring__track { stroke: rgba(255,255,255,.14); stroke-width: 8; }
.focus-ring__bar { stroke: #E6B45A; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .9s linear; }
.focus-ring__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.focus-ring__time { font-size: 23px; font-weight: 800; color: #f7f9ef; font-variant-numeric: tabular-nums; line-height: 1; }
.focus-ring__label { font-size: 10.5px; color: rgba(255,255,255,.62); margin-top: 3px; }
@media (max-width: 560px) { .focus-card { flex-direction: column; align-items: stretch; } .focus-card__timer { align-self: center; } }
.fb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* piège anti-robot, invisible */

/* ============================================================
   Parcours de méthode « Construire mon premier chemin » (v1.21)
   ============================================================ */
.ob-method__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ob-method__step { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.ob-method__q { margin: 0 0 6px; font-size: 19px; line-height: 1.3; }
.ob-method__hint { margin: 0 0 16px; color: var(--text-dim); font-size: 14px; }
.ob-method__hint.is-error { color: var(--accent); font-weight: 600; }
.ob-method__final { margin: 16px 0 0; font-weight: 600; font-size: 15.5px; }
.is-error { outline: 2px solid var(--accent); }

.mj-choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.mj-choice { text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s; }
.mj-choice:hover { border-color: var(--border-strong); }
.mj-choice.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

.mj-cat { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
/* Champs étape/tâche = mêmes jetons visuels que .field input (fond, bordure, rayon, focus violet). */
.mj-cat__in, .mj-task__in {
  flex: 1; min-width: 0; width: 100%; padding: 11px 13px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-size: 14px; font-family: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mj-cat__in:focus, .mj-task__in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mj-cat__del { flex: none; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); cursor: pointer; }
.mj-cat__del:hover { color: var(--accent); border-color: var(--accent); }

/* Exemple repliable de l'étape 4 (déménagement) — scrollable, lisible sur mobile. */
.mj-example { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.mj-example > summary { cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: 14px; color: var(--accent-ink); list-style: none; }
.mj-example > summary::-webkit-details-marker { display: none; }
.mj-example > summary::before { content: "＋ "; color: var(--accent); }
.mj-example[open] > summary::before { content: "－ "; }
.mj-example__body { padding: 0 14px 14px; max-height: 320px; overflow-y: auto; }
.mj-example__body h4 { margin: 4px 0 8px; }
.mj-example__body > p { font-size: 13.5px; color: var(--text-dim); }
.mj-example__step { margin: 10px 0; }
.mj-example__step > b { display: block; margin-bottom: 4px; }
.mj-example__step ol { margin: 0; padding-left: 20px; font-size: 13.5px; }

/* Étape 6 — accordéon des étapes + éditeur de tâches. */
.mj-step-acc { display: grid; gap: 8px; }
.mj-step { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.mj-step.is-open { border-color: var(--accent); }
.mj-step__head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: transparent; border: 0; color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.mj-step__title { flex: 1; font-weight: 600; }
.mj-step__count { font-size: 12px; color: var(--text-dim); }
.mj-step__chev { color: var(--text-dim); }
.mj-step__body { padding: 4px 14px 14px; }
.mj-tasks { display: grid; gap: 8px; margin-bottom: 10px; }
.mj-task { display: flex; align-items: center; gap: 6px; }
.mj-task__moves { flex: none; display: flex; gap: 4px; }
.mj-task__mv, .mj-task__del { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; }
.mj-task__mv:disabled { opacity: .35; cursor: default; }
.mj-task__del:hover { color: var(--accent); border-color: var(--accent); }

/* Étape 4/5 : textes pédagogiques + prochaine action (étape 7). */
.ob-method__lead { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; }
.ob-method__next { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-size: 14.5px; }
.ob-method__final--soft { color: var(--text-dim); font-weight: 500; font-size: 13.5px; }

/* Étape 7 — plan d'action imbriqué (tâches SOUS leurs étapes). */
.mj-recap__steps { display: grid; gap: 12px; }
.mj-recap__step { border-left: 3px solid var(--accent); padding-left: 12px; }
.mj-recap__stephead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mj-recap__tasks { margin: 4px 0 0; padding-left: 22px; font-size: 14px; display: grid; gap: 2px; }
.mj-recap__later { margin: 2px 0 0; font-size: 13px; color: var(--text-dim); font-style: italic; }
.mj-sugg { margin-top: 12px; font-size: 13px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mj-sugg__b { padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--border-strong); background: transparent; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.mj-sugg__b:hover { border-style: solid; border-color: var(--accent); color: var(--accent-ink); }

.mj-rank { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); margin-bottom: 8px; }
.mj-rank__badge { flex: none; min-width: 30px; text-align: center; padding: 3px 8px; border-radius: 8px; font-weight: 800; font-size: 13px; background: var(--accent-soft); color: var(--accent-ink); }
.mj-rank__prio { flex: none; font-weight: 700; font-size: 12.5px; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .02em; }
.mj-rank__title { flex: 1 1 130px; min-width: 120px; font-weight: 600; }
.mj-rank__moves { display: flex; gap: 4px; margin-left: auto; }
/* Encart « pour choisir ta priorité » (étape 5). */
.mj-tip { margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13.5px; line-height: 1.55; border: 1px solid var(--border-strong); }
.mj-rank__mv { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.mj-rank__mv:disabled { opacity: .35; cursor: default; }

.mj-recap { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--surface-2); display: grid; gap: 12px; }
.mj-recap__row > span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 700; margin-bottom: 3px; }
.mj-recap__row > b, .mj-recap__row > p { margin: 0; }
.mj-recap__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mj-recap__cats li { display: flex; align-items: center; gap: 8px; }

.ob-done { text-align: center; padding: 8px 0; }
.ob-done__ic { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 26px; font-weight: 800; }

/* ---- Pédagogie continue (v1.21) : conseils fermables, état vide CTA, méthode dans l'aide ---- */
.ped-hint { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 14px 0; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--accent-soft); }
.ped-hint__ic { flex: none; }
.ped-hint__txt { margin: 0; flex: 1; font-size: 14px; color: var(--accent-ink); }
.ped-hint__x { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 14px; }
.ped-hint__x:hover { color: var(--text); background: var(--surface-2); }

.empty--cta { text-align: center; }
.empty--cta h3 { margin: 6px 0 8px; }
.empty--cta p { max-width: 460px; margin: 0 auto 18px; color: var(--text-dim); }

.help-sec--method { border: 1px solid var(--accent); border-radius: 14px; padding: 14px 16px; background: var(--accent-soft); }
.help-method__cards { margin-top: 12px; display: grid; gap: 6px; }
.help-method__card { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 0 12px; }
.help-method__card > summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 14px; }
.help-method__card > p { margin: 0 0 12px; font-size: 13.5px; color: var(--text-dim); }

/* ---- Projet prioritaire ★ + sélecteur Top 3 (v1.21) ---- */
.proj-fav.is-fav { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.pick-favbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 12px; margin-bottom: 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; }
.pick-favbar span { font-weight: 600; }
.nav__icon svg { display: block; }

/* ---- Espaces partagés : membres (rôles/actions) + invitations reçues (v1.21) ---- */
.sp-mem-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sp-mem-row:last-child { border-bottom: 0; }
.sp-mem-row__email { flex: 1 1 160px; min-width: 0; word-break: break-word; }
.sp-mem-row__act { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.link-btn--danger { color: #e5484d; }
.sp-inv-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; flex-wrap: wrap; background: var(--surface-2); }
.sp-inv-row__main { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.sp-inv-row__main span { color: var(--text-dim); font-size: 13px; }
.sp-inv-row__act { display: flex; gap: 8px; margin-left: auto; }

/* ---- Espaces : confirmation inline (retirer/bannir) + section bannis (v1.21.1) ---- */
.sp-mem-confirm { font-size: 13px; color: var(--text-dim); margin-right: 4px; }
.sp-bans { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 8px; }
.sp-bans__lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 700; margin-bottom: 4px; }
.chip--ban { background: rgba(229,72,77,.15); color: #e5484d; }