/* ========== Webapp UI kit · page-level styles ========== */
@import url("colors_and_type.css");
@import url("aurora.css");

/* ---------- Phase overrides · calmer "bleu clair" in calm phase ----------
   The base aurora is fine in trouble/burn but the calm halos read a touch
   too luminous against the very dark bg. We:
   (a) deepen --calm-bg one notch toward black-blue,
   (b) trim halo-3 and halo-4 opacity for calm only (the brighter ones).
   trouble + burn phases are untouched. */
[data-phase="calm"] { --calm-bg: #01040D; --phase-bg: #01040D; }
[data-phase="calm"] .aurora-bg .halo-3 { opacity: 0.42; }
[data-phase="calm"] .aurora-bg .halo-4 { opacity: 0.38; }


/* BUG-075 : sur mobile, Chrome Android « Auto-dark » recolore les pages qui ne
   déclarent pas leur schéma (les pastels du calendrier viraient différents).
   L'app EST sombre : on le déclare → Chrome ne retouche plus rien. */
:root { color-scheme: dark; }

html, body { margin: 0; padding: 0; min-height: 100vh; background: var(--abysse); overflow-x: hidden; }
body { font-family: var(--font-sans); color: var(--fg-1); }

#root { min-height: 100vh; }

.app-stage { min-height: 100vh; }
.app-shell { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 24px 24px 140px; }

/* · Tweak: aurora subtle · drops halo opacity + slows curtains so the focus
   stays on the UI. */
.aurora-subtle .aurora-bg .halo    { filter: blur(64px); opacity: 0.6; } /* perf : 200px→64px (cf. aurora.css) */
.aurora-subtle .aurora-bg .curtain { opacity: 0.3; }

/* · Tweak: density · scales padding/gap across the shell. */
.density-compact .panel  { padding: 18px 20px; }
.density-compact .content { gap: 12px; }
.density-comfy .panel    { padding: 32px 36px; }
.density-comfy .content  { gap: 22px; }

/* · Tweak: reduced motion · */
.reduced-motion .halo, .reduced-motion .curtain { animation: none !important; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after {
  animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
}

/* ---------- TopBar ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: nowrap;
  /* backdrop-filter (ci-dessous) crée un contexte d'empilement : sans z-index, le
     menu « Créer » (.create-menu-pop) restait piégé SOUS les blocs de contenu.
     On hisse la topbar (et donc son menu) au-dessus du contenu, sous les modales (z 100). */
  position: relative; z-index: 90;
  padding: 12px 16px; margin-bottom: 20px;
  background: rgba(13, 15, 18, 0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-4);
  border: 1px solid rgba(255,255,255,0.06);
  gap: 8px;
}
.topbar-left  { display: flex; align-items: center; gap: 24px; min-width: 0; flex: 1 1 0; overflow: hidden; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.wordmark { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.18em; color: var(--halo-cyan); font-weight: 500; }
.tabs { display: flex; gap: 2px; flex-shrink: 1; min-width: 0; }
.tab {
  font-family: var(--font-sans); font-size: 13px;
  color: rgba(245,242,235,0.7);
  background: transparent; border: 0;
  padding: 8px 12px; border-radius: var(--r-2); cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-hover), background var(--dur-hover);
}
.tab:hover  { color: var(--papier); background: rgba(255,255,255,0.05); }
.tab.active { color: var(--papier); background: rgba(255,255,255,0.10); }

/* Tabs slim down progressively so the topbar never wraps */
@media (max-width: 1100px) {
  .tab { padding: 8px 9px; font-size: 12.5px; }
  .topbar-left { gap: 18px; }
}
@media (max-width: 960px) {
  .tab { padding: 7px 7px; font-size: 12px; }
  .topbar-left { gap: 12px; }
}

.topbar-link {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(245,242,235,0.55);
  padding: 6px 8px; border-radius: var(--r-2);
  transition: color var(--dur-hover);
}
.topbar-link:hover { color: var(--papier); }

.topbar-add {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--papier); color: var(--encre);
  border: 0; padding: 7px 14px 7px 11px; border-radius: var(--r-3); cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  transition: filter var(--dur-hover);
}
.topbar-add:hover { filter: brightness(0.95); }
.topbar-add.open { filter: brightness(0.92); }
.topbar-add-plus { font-family: var(--font-mono); font-size: 16px; line-height: 1; opacity: 0.7; }
.topbar-add-chev { font-size: 10px; line-height: 1; opacity: 0.55; margin-left: 1px; }

/* ---------- Create menu · "+ Créer" → Tâche / Projet ---------- */
.create-menu-wrap { position: relative; display: inline-flex; }
.create-menu-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 224px; padding: 6px;
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--surface-border); border-radius: var(--r-4);
  box-shadow: var(--shadow-deep);
  display: flex; flex-direction: column; gap: 2px;
  animation: createMenuIn var(--dur-panel) var(--ease-emerge);
  transform-origin: top right;
}
@keyframes createMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.create-menu-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: 9px 10px; border-radius: var(--r-2);
  color: var(--encre); font-family: var(--font-sans);
  transition: background var(--dur-hover);
}
.create-menu-item:hover { background: var(--brume); }
.create-menu-ico { display: inline-flex; flex-shrink: 0; color: var(--granit); }
.create-menu-ico svg { display: block; width: 17px; height: 17px; }
.create-menu-text { display: flex; flex-direction: column; line-height: 1.25; }
.create-menu-lbl { font-size: 13px; font-weight: 500; }
.create-menu-sub { font-size: 11px; color: var(--granit); }

.meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(245,242,235,0.65); text-transform: uppercase; }

/* ---------- Replan button · action globale du topbar ---------- */
.replan-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 11px; border-radius: var(--r-3);
  border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: color var(--dur-hover), background var(--dur-hover),
              border-color var(--dur-hover), box-shadow var(--dur-panel),
              opacity var(--dur-hover), filter var(--dur-hover);
}
.replan-ico { display: inline-flex; line-height: 0; }
.replan-ico svg { display: block; }

/* — Dirty · des tâches/projets ont bougé, il y a de quoi replanifier — */
.replan-dirty {
  color: var(--abysse); background: var(--halo-cyan); border-color: var(--halo-cyan);
  box-shadow: 0 4px 18px rgba(77, 217, 217, 0.26);
  animation: replanPulse 2.6s var(--ease-calm) infinite;
}
.replan-dirty:hover { filter: brightness(1.06); }
@keyframes replanPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(77, 217, 217, 0.16); }
  50%      { box-shadow: 0 4px 28px rgba(77, 217, 217, 0.44); }
}

/* — Busy · régénération en cours — */
.replan-busy {
  color: var(--abysse); background: var(--halo-cyan); border-color: var(--halo-cyan);
  opacity: 0.82; cursor: progress;
}
.replan-ico.spin { animation: replanSpin 0.9s linear infinite; }
@keyframes replanSpin { to { transform: rotate(360deg); } }

/* — Synced · inerte, rien à replanifier (icône seule) — */
.replan-synced {
  color: var(--granit-soft); background: transparent;
  border-color: rgba(255, 255, 255, 0.10); cursor: default;
}
.replan-synced .replan-ico { color: var(--vert-aurore); opacity: 0.72; }
.replan-compact { padding: 7px; }

@media (prefers-reduced-motion: reduce) { .replan-dirty { animation: none; } }
.reduced-motion .replan-dirty { animation: none; }

/* \u00c9cran moyen : on masque la date (la moins critique) pour laisser respirer
   la barre avant que le cluster ne passe \u00e0 la ligne. */
@media (max-width: 1024px) { .topbar .meta { display: none; } }

/* ---------- Content scaffold ---------- */
.content { display: flex; flex-direction: column; gap: 16px; }
.panel {
  background: var(--papier-translucent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-4);
  padding: 24px 28px;
  box-shadow: var(--shadow-deep);
}
.panel-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--brume);
}
.panel-title    { font-size: 22px; font-weight: 600; line-height: 1.25; margin: 4px 0 0; max-width: 700px; }
.panel-subtitle { font-size: 17px; font-weight: 600; margin: 0; }
.mono-label     { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--granit); text-transform: uppercase; }

.ghost-btn {
  background: transparent; border: 1px solid var(--encre); color: var(--encre);
  font-family: var(--font-sans); font-size: 13px;
  padding: 6px 14px; border-radius: var(--r-2); cursor: pointer;
  transition: filter var(--dur-hover), background var(--dur-hover);
}
.ghost-btn:hover { background: var(--encre); color: var(--papier); }

.btn-primary {
  background: var(--encre); color: var(--papier);
  border: 0; padding: 10px 18px; border-radius: var(--r-2); cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  transition: filter var(--dur-hover);
}
.btn-primary:hover:not(:disabled)   { filter: brightness(1.15); }
.btn-primary:disabled               { opacity: 0.4; cursor: not-allowed; }
.btn-primary-lg                     { padding: 14px 28px; font-size: 14px; }

.btn-ghost {
  background: transparent; color: var(--granit);
  border: 1px solid var(--brume); padding: 9px 16px; border-radius: var(--r-2); cursor: pointer;
  font-family: var(--font-sans); font-size: 13px;
  transition: color var(--dur-hover), border-color var(--dur-hover);
}
.btn-ghost:hover:not(:disabled) { color: var(--encre); border-color: var(--encre); }
.btn-ghost:disabled             { opacity: 0.4; cursor: not-allowed; }

/* ---------- Dashboard hero (calm: 1 panel · burn: 2 panels side-by-side) ---------- */
.dash-hero { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.dash-hero:has(.critical-card) { grid-template-columns: 1.6fr 1fr; }

/* ---------- Stat grid ---------- */
/* BUG-020 : la valeur longue « 1 / 12 pts » passait sur 2 lignes et déséquilibrait
   l'en-tête. minmax(0, 1fr) = colonnes STRICTEMENT égales (1fr seul laisse le
   min-content élargir une colonne) ; nowrap = jamais de retour à la ligne ; la
   taille de police suit la largeur de la carte (container query, 16cqi) → les
   4 valeurs partagent la même taille, aucune carte ne déborde ni ne grandit. */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
/* BUG-020/027-sheet (lot visuel 25/07) : contenu des cartes CENTRÉ — fini le
   « Tâches aujourd'hui collé au bord gauche » et le grand vide après « Projets
   actifs » ; l'unité de l'énergie passe en petit sous le chiffre. */
.stat-cell { text-align: center; }
.stat-value-unit { font-size: 14px; font-weight: 400; color: var(--granit); letter-spacing: 0; }
.stat-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; container-type: inline-size; }
.stat-cell .stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--granit); text-transform: uppercase; }
.stat-cell .stat-value { font-family: var(--font-mono); font-size: clamp(20px, 16cqi, 36px); line-height: 1; color: var(--encre); letter-spacing: -0.01em; font-weight: 400; white-space: nowrap; }
.stat-cell .stat-value.warn { color: var(--lave); }
.stat-cell .stat-value.calm { color: var(--petrole); }
.stat-cell .stat-delta { font-family: var(--font-mono); font-size: 11px; color: var(--granit); letter-spacing: 0.02em; }

/* ---------- Alert banner (refined for Gaienju aigu) ---------- */
.alert-banner {
  background: linear-gradient(94deg, var(--encre) 0%, #1a1d22 100%);
  color: var(--papier);
  padding: 16px 22px;
  border-radius: var(--r-3);
  display: grid;
  grid-template-columns: minmax(250px, 1.25fr) 1fr 1fr;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(245, 166, 99, 0.25);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
/* Colonne 1 · le problème */
.alert-info {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-right: 24px;
}
.alert-pict { margin-top: 1px; }
.alert-pbar-slot { margin-top: 10px; }

/* Colonnes 2 & 3 · les deux voies (remplissent la largeur → pas de vide) */
.alert-choice {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 11px;
  padding-left: 24px;
  border-left: 1px solid rgba(255,255,255,0.15);
  min-width: 0;
}
.alert-choice-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.alert-choice-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em;
  color: var(--cendre);
}
.alert-choice-desc {
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4;
  color: rgba(245,242,235,0.74); text-wrap: pretty;
}
.alert-choice-desc b { color: rgba(245,242,235,0.95); font-weight: 600; }

/* Confirmation après choix · occupe les colonnes 2-3 */
.alert-confirm {
  grid-column: 2 / 4;
  display: flex; align-items: center;
  padding-left: 24px;
  border-left: 1px solid rgba(255,255,255,0.15);
}
.alert-suggestion {
  font-family: var(--font-sans); font-size: 13px; line-height: 1.45;
  color: rgba(245,242,235,0.82); min-width: 0;
}
.alert-suggestion b { color: var(--papier); font-weight: 600; }
.alert-suggestion-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--cendre); margin-right: 7px;
}

.alert-btn-primary {
  background: rgba(255,255,255,0.10); color: var(--papier);
  border: 1px solid rgba(255,255,255,0.28); padding: 9px 16px; border-radius: var(--r-2); cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  white-space: nowrap; align-self: flex-start;
  transition: background var(--dur-hover), border-color var(--dur-hover);
}
.alert-btn-primary:hover:not(:disabled) { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
.alert-btn-primary:disabled { opacity: 0.65; cursor: default; }
.alert-btn-ghost {
  background: rgba(255,255,255,0.10); color: var(--papier);
  border: 1px solid rgba(255,255,255,0.28); padding: 9px 16px; border-radius: var(--r-2); cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  white-space: nowrap; align-self: flex-start;
  transition: background var(--dur-hover), border-color var(--dur-hover);
}
.alert-btn-ghost:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }

/* R1 · bandeau scindé : PROBLÈME (header, haut) + DÉCISION (après les tâches) */
.alert-banner.alert-header { grid-template-columns: 1fr; }
.alert-banner.alert-decision { display: flex; flex-direction: column; gap: 16px; }
.alert-decision-head { display: flex; flex-direction: column; gap: 3px; }
.alert-decision-head .alert-tag { color: var(--cendre); }
.alert-decision-sub {
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.4;
  color: rgba(245,242,235,0.82); text-wrap: pretty;
}
.alert-decision-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.alert-decision-choices .alert-choice:first-child { padding-left: 0; border-left: 0; }
.alert-confirm--block { grid-column: auto; padding-left: 0; border-left: 0; }
/* Petit "annuler le choix" · bas-droite de la bannière, discret */
.alert-undo {
  position: absolute; right: 16px; bottom: 10px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(245,242,235,0.5);
  text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--dur-hover);
}
.alert-undo:hover { color: var(--papier); }

/* Empilement vertical sous 900px */
@media (max-width: 900px) {
  .alert-banner { grid-template-columns: 1fr; gap: 0; }
  .alert-decision-choices { grid-template-columns: 1fr; }
  .alert-info { padding-right: 0; padding-bottom: 14px; }
  .alert-choice {
    padding-left: 0; border-left: 0;
    padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.15);
  }
  .alert-confirm {
    grid-column: auto; padding-left: 0; border-left: 0;
    padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.15);
  }
}

/* Titre du projet cliquable (= lien d'accès au projet, motif titre-lien) */
.alert-project-link {
  display: inline-flex; align-items: baseline; align-self: flex-start;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
  margin: 1px 0 2px;
}
.alert-project-link .alert-project { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur-hover); }
.alert-project-link:hover .alert-project { text-decoration-color: rgba(255,255,255,0.55); }
.alert-banner::before {
  /* Glow désactivé → bannière noir-encre sobre (même look que l'expired). */
  display: none;
}
.alert-pict { font-size: 22px; line-height: 1; color: var(--cendre); font-weight: 500; }
@keyframes alert-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.12); }
}
.alert-pict-pulse { animation: alert-pulse 1.8s ease-in-out infinite; }

.alert-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.alert-line-1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.alert-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--cendre); text-transform: uppercase; font-weight: 500;
}
.alert-sep { color: rgba(245,242,235,0.5); }
.alert-project {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--papier);
}
.alert-line-2 { display: flex; align-items: center; gap: 8px; }
.alert-directive {
  font-family: var(--font-sans); font-size: 13px;
  color: rgba(245,242,235,0.78);
}

/* ---------- PressionBar · barre trizone dans l'AlertBanner ---------- */
.pbar-wrap {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 220px; align-self: center;
}
.pbar-heading {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: rgba(245,242,235,0.7); text-transform: uppercase;
}
.pbar-track {
  position: relative;
  height: 14px; border-radius: 7px;
  background: rgba(255,255,255,0.10);
  overflow: visible;
}
.pbar-zones {
  position: absolute; inset: 0; border-radius: 7px;
  /* Chaque zone a son propre dégradé interne (clair → riche).
     Transition de ~6 pp entre les zones pour les délimiter sans brutalité.
     Pas un seul grand dégradé : 3 bandes distinctes + 2 zones de jonction. */
  background: linear-gradient(to right,
    #7BB8FF  0%,  /* bleu clair */
    #1E58CC 32%,  /* bleu profond — fin zone bleue */
    #7352DE 35%,  /* jonction bleu → violet */
    #B28BF8 38%,  /* violet clair — entrée zone violette */
    #7C3AED 63%,  /* violet profond — fin zone violette */
    #C0327A 66%,  /* jonction violet → rouge */
    #F06060 69%,  /* rouge vif — entrée zone rouge */
    #991B1B 100%  /* rouge profond */
  );
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.2);
}
.pbar-thumb {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.pbar-thumb::after {
  content: "";
  display: block;
  width: 3px; height: 24px; border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.4);
}
.pbar-thumb-val {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: #fff; line-height: 1;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  order: -1;
  margin-bottom: 3px;
}
.pbar-scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em;
  color: rgba(245,242,235,0.4);
  margin-top: -2px;
}

/* Expired = front dépassé. Bannière noir-encre, pas rouge. */
.alert-expired {
  background: linear-gradient(94deg, var(--encre) 0%, #1a1d22 100%);
  border-color: rgba(245, 166, 99, 0.25);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.alert-expired::before { display: none; }
.alert-expired .alert-tag       { color: var(--cendre); }
.alert-expired .alert-pict      { color: var(--cendre); }
.alert-expired .alert-score-val { color: var(--cendre); }
.alert-deadline {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: rgba(245, 242, 235, 0.7);
  padding: 2px 6px; background: rgba(255,255,255,0.06); border-radius: 2px;
}

/* ============================================================================
   Live source · section custom dans le Tweaks panel
   ============================================================================ */
.live-source {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 6px;
}
.live-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.live-label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 11.5px;
}
.live-pill {
  font-family: ui-monospace, "SF Mono", monospace; font-size: 9px;
  letter-spacing: 0.08em; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(0,0,0,0.06); color: rgba(41, 38, 27, 0.55);
}
.live-pill-loading { background: rgba(79, 136, 242, 0.15); color: #2a5fc8; }
.live-pill-ok      { background: rgba(46, 165, 110, 0.15); color: #1a8d6a; }
.live-pill-error   { background: rgba(232, 85, 31, 0.18);  color: #b54a1a; }

.live-field { display: flex; flex-direction: column; gap: 3px; }
.live-field label {
  font-size: 10px; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(41, 38, 27, 0.55);
}
.live-field input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 11.5px; padding: 6px 8px;
  border: 0.5px solid rgba(0,0,0,0.1); border-radius: 6px;
  background: rgba(255,255,255,0.6); outline: none;
  color: rgba(41, 38, 27, 0.95);
  font-family: ui-monospace, "SF Mono", monospace;
}
.live-field input:focus { border-color: rgba(0,0,0,0.25); background: rgba(255,255,255,0.85); }

.live-link {
  background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: 11px; color: rgba(41, 38, 27, 0.55);
  padding: 2px 0; text-align: left; text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.15);
  align-self: flex-start;
}
.live-link:hover { color: rgba(41, 38, 27, 0.85); }

.live-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 2px;
}
.live-fetch {
  background: rgba(0,0,0,0.78); color: #fff;
  border: 0; font: inherit; font-weight: 500;
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
}
.live-fetch:hover:not(:disabled) { background: rgba(0,0,0,0.88); }
.live-fetch:disabled { opacity: 0.4; cursor: not-allowed; }
.live-stamp { font-size: 9px; color: rgba(41, 38, 27, 0.5); letter-spacing: 0.08em; }

/* ---------- Critical card (in dashboard burn mode) ---------- */
.critical-card {
  background: rgba(245, 242, 235, 0.94);
  border: 1px solid var(--surface-border);
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.critical-card::before {
  /* left accent bar in lave */
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 3px; background: var(--lave); border-radius: 0 2px 2px 0;
}
.critical-tag { color: var(--lave); font-weight: 500; letter-spacing: 0.12em; }
.critical-name {
  font-family: var(--font-sans); font-size: 24px; font-weight: 600;
  color: var(--encre); margin-top: 6px; letter-spacing: -0.01em;
}
.critical-meta { font-size: 14px; color: var(--granit); }
.critical-score {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--brume);
}
.critical-score-label { letter-spacing: 0.14em; }
.critical-score-val {
  font-family: var(--font-mono); font-size: 40px; line-height: 1;
  color: var(--pic-critique); letter-spacing: -0.02em; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.critical-score-pct { font-size: 28px; color: var(--lave); margin-left: 2px; }
/* Projet dépassé : pas de score de pression (null), on affiche le retard.
   Convention design : "expired = encre noire, pas rouge". */
.critical-score-val--expired {
  font-family: var(--font-sans); font-size: 22px; line-height: 1.1;
  color: var(--encre); font-weight: 600; letter-spacing: -0.01em;
}
.critical-dir {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--brume);
  font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  color: var(--encre); letter-spacing: -0.01em; text-transform: none;
  text-wrap: pretty;
}

/* ---------- Project list ---------- */
.project-list { display: flex; flex-direction: column; }
/* Sélection multiple des projets (demande Maitre 29/07) : la case vit À CÔTÉ
   de la carte — la carte reste le bouton qui ouvre le détail. */
.project-row { display: flex; align-items: center; gap: 4px; }
.project-row .project { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; }
.project-check { display: flex; align-items: center; padding: 0 4px; cursor: pointer; }
.project-check input { cursor: pointer; }
.project {
  display: grid; grid-template-columns: 4px 1fr auto;
  gap: 16px; align-items: center;
  padding: 16px 8px; margin: 0 -8px;
  border-bottom: 1px solid var(--brume);
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  width: calc(100% + 16px); text-align: left;
  cursor: pointer;
  transition: background var(--dur-hover);
  border-radius: var(--r-2);
  font-family: inherit;
}
.project:last-child { border-bottom: none; }
.project:hover     { background: rgba(228, 223, 211, 0.35); }
.project.selected  { background: rgba(228, 223, 211, 0.55); }

.project-bar { width: 3px; height: 36px; background: var(--brume); border-radius: 2px; }
.project-bar.calm  { background: var(--petrole); }
.project-bar.alert { background: var(--lave); }

.project-body { min-width: 0; }
.project-name  { font-weight: 500; color: var(--encre); font-size: 15px; }
.project-tasks { font-size: 13px; color: var(--granit); margin-top: 2px; }

.gaienju-tag { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em; color: var(--granit); }
.gaienju-tag.gaienju-calm     { color: var(--petrole); }
.gaienju-tag.gaienju-warm     { color: var(--lueur-ambree); }
.gaienju-tag.gaienju-alert    { color: var(--lave);        font-weight: 500; }
.gaienju-tag.gaienju-critical { color: var(--pic-critique); font-weight: 500; }

/* ---------- Project tag (level + pression) ---------- */
.project-tag {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  min-width: 84px;
}
.project-tag-level {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  color: var(--granit); text-transform: uppercase;
}
.project-tag-pression {
  font-family: var(--font-mono); font-size: 18px; line-height: 1; font-weight: 500;
  color: var(--encre); letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.project-tag-calm     .project-tag-level    { color: var(--petrole); }
.project-tag-calm     .project-tag-pression { color: var(--petrole); }
.project-tag-warm     .project-tag-level    { color: var(--lueur-ambree); }
.project-tag-warm     .project-tag-pression { color: var(--lueur-ambree); }
.project-tag-alert    .project-tag-level    { color: var(--lave); font-weight: 500; }
.project-tag-alert    .project-tag-pression { color: var(--lave); font-weight: 500; }
.project-tag-critical .project-tag-level    { color: var(--pic-critique); font-weight: 500; }
.project-tag-critical .project-tag-pression { color: var(--pic-critique); font-weight: 500; }
.project-tag-expired  .project-tag-level    { color: var(--encre); font-weight: 600; }
.project-tag-expired  .project-tag-pression { color: var(--encre); font-weight: 500; }

.project-bar.bar-warm     { background: var(--lueur-ambree); }
.project-bar.bar-alert    { background: var(--lave); }
.project-bar.bar-critical { background: var(--pic-critique); }
.project-bar.bar-expired  { background: var(--encre); }

.project-deadline.soon { color: var(--lave); }

/* ---------- Project detail ---------- */
.project-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.project-detail-meta { font-size: 14px; color: var(--granit); margin-top: 6px; }
.project-detail-due  { margin-top: 10px; }
.project-detail-tasks { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--brume); }
.gaienju-big        { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gaienju-big-val    { font-family: var(--font-mono); font-size: 56px; line-height: 1; letter-spacing: -0.02em; font-weight: 500; font-variant-numeric: tabular-nums; }
.gaienju-big.gaienju-calm     .gaienju-big-val { color: var(--petrole); }
.gaienju-big.gaienju-warm     .gaienju-big-val { color: var(--lueur-ambree); }
.gaienju-big.gaienju-alert    .gaienju-big-val { color: var(--lave); }
.gaienju-big.gaienju-critical .gaienju-big-val { color: var(--pic-critique); }
.gaienju-big.gaienju-expired  .gaienju-big-val { color: var(--encre); }
.gaienju-big.gaienju-muted    .gaienju-big-val { color: var(--granit); }

/* ---------- Dashboard middle row: tasks + habits side-by-side ---------- */
.dash-mid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; }
@media (max-width: 960px) {
  .dash-mid { grid-template-columns: 1fr; }
}

/* ---------- Habits ---------- */
.habit-list { display: flex; flex-direction: column; }
.habit {
  display: grid; grid-template-columns: 32px 1fr;
  gap: 16px; align-items: flex-start;
  padding: 12px 4px;
  border-bottom: 1px solid var(--brume);
}
.habit:last-child { border-bottom: none; }
.habit.done .habit-name { color: var(--granit); text-decoration: line-through; text-decoration-color: var(--granit-soft); }
.habit.done .task-check-box { background: var(--petrole); border-color: var(--petrole); }

.habit-body { min-width: 0; }
.habit-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.habit-name { font-size: 14px; font-weight: 500; color: var(--encre); line-height: 1.3; }
.habit-why { font-size: 12px; color: var(--granit); line-height: 1.4; }

.habit-cat {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  padding: 2px 7px; border-radius: 2px; text-transform: uppercase;
  color: var(--granit);
  background: var(--brume-soft);
}
.habit-cat-mental  { background: rgba(79, 136, 242, 0.12); color: var(--bleu-electrique); }
.habit-cat-corps   { background: rgba(46, 232, 159, 0.12); color: #1a8d6a; }
.habit-cat-esprit  { background: rgba(143, 229, 229, 0.18); color: var(--petrole); }
.habit-cat-social  { background: rgba(201, 133, 77, 0.15); color: var(--lueur-ambree); }
.habit-cat-pro     { background: rgba(13, 15, 18, 0.08); color: var(--encre); }

/* R7 · fenêtre conseillée (matin / midi / soir / journée) */
.habit-window {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--granit);
  border: 1px solid var(--brume); border-radius: 3px; padding: 2px 7px;
}

/* ---------- Task list ---------- */
.task-list { display: flex; flex-direction: column; }
.task-empty {
  padding: 32px 16px; text-align: center; color: var(--granit-soft);
  border: 1px dashed var(--brume); border-radius: var(--r-2);
  font-size: 11px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.empty-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--encre); color: var(--papier);
  border: 0; border-radius: var(--r-2); cursor: pointer;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  padding: 8px 14px; letter-spacing: 0.01em; text-transform: none;
  transition: filter var(--dur-hover);
}
.empty-cta:hover { filter: brightness(1.18); }
.task {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 16px; align-items: flex-start;
  padding: 14px 4px;
  border-bottom: 1px solid var(--brume);
}
.task:last-child { border-bottom: none; }
.task-critical {
  /* burn mode: anchored emphasis on critical tasks. */
  margin: 0 -16px; padding-left: 16px; padding-right: 16px;
  background: rgba(232, 85, 31, 0.06);
  border-left: 2px solid var(--lave);
  border-radius: 0 var(--r-2) var(--r-2) 0;
}
.task-check {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  height: 24px;
}
.task-check-box {
  width: 20px; height: 20px; border: 1.5px solid var(--granit-soft); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--papier); background: transparent;
  transition: all var(--dur-hover);
}
.task.done .task-check-box { background: var(--petrole); border-color: var(--petrole); }
.task.done .task-title     { color: var(--granit); text-decoration: line-through; text-decoration-color: var(--granit-soft); }

.task-body { min-width: 0; }
.task-title-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.task-title { font-size: 15px; color: var(--encre); font-weight: 500; line-height: 1.35; }
.task-link {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--granit); text-decoration: none;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-2);
  transition: color var(--dur-hover), background var(--dur-hover);
}
.task-link:hover { color: var(--encre); background: var(--brume); }

.task-meta  { font-size: 12px; color: var(--granit); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.task-meta .task-sep { opacity: 0.5; }
.task-project { font-weight: 500; color: var(--encre); }
.task-hours   { color: var(--encre); font-size: 12px; }
.task-effort  { font-family: var(--font-mono); font-size: 11px; }
.task-points  { display: inline-flex; align-items: baseline; gap: 2px; color: var(--petrole); }
.task-points-val  { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.task-points-unit { font-size: 10px; opacity: 0.7; }
.task-critical .task-points { color: var(--lave); }

/* R5 · marqueur de rattachement au projet en retard */
.task-project-late { color: var(--lave); font-weight: 600; }
.task-project-late-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lave); margin-right: 5px; vertical-align: middle;
}
/* R4 · créneau horaire déjà passé */
.task-hours-past { text-decoration: line-through; color: var(--granit-soft); }

.task-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.task-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--granit);
  padding: 2px 6px;
  background: var(--brume-soft); border-radius: 2px;
}

.task-action {
  background: transparent; border: 0; color: var(--granit); cursor: pointer;
  font-family: var(--font-sans); font-size: 12px;
  padding: 4px 10px; border-radius: var(--r-2);
  transition: color var(--dur-hover);
  margin-top: 2px;
}
.task-action:hover { color: var(--encre); }

/* ---------- Priority chip ---------- */
.prio {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  padding: 2px 7px 2px 6px;
  border: 1px solid var(--brume); border-radius: 2px;
  color: var(--granit);
  white-space: nowrap;
}
.prio-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--granit-soft); display: inline-block; }
.prio-critical          { color: var(--pic-critique); border-color: rgba(255, 61, 15, 0.4); }
.prio-critical .prio-dot{ background: var(--pic-critique); box-shadow: 0 0 6px var(--pic-critique); }
.prio-alert             { color: var(--lave); border-color: rgba(232, 85, 31, 0.4); }
.prio-alert .prio-dot   { background: var(--lave); }
.prio-warm              { color: var(--lueur-ambree); border-color: rgba(201, 133, 77, 0.4); }
.prio-warm .prio-dot    { background: var(--lueur-ambree); }
.prio-calm              { color: var(--petrole); border-color: rgba(14, 77, 92, 0.3); }
.prio-calm .prio-dot    { background: var(--petrole); }
.prio-muted             { color: var(--granit-soft); }
.prio-muted .prio-dot   { background: var(--granit-soft); }

/* ---------- Calendar ---------- */
.calendar { display: flex; flex-direction: column; }

/* Agenda non connecté (état vierge) */
.cal-connect {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px;
  max-width: 460px;
  margin: 0 auto;
  padding: 56px 24px 48px;
}
.cal-connect-mark {
  font-family: var(--font-sans);
  font-size: 30px; font-weight: 500; letter-spacing: -0.01em;
  user-select: none;
}
.cal-connect-title {
  font-size: 20px; font-weight: 500; color: var(--encre);
  line-height: 1.35; margin: 0; text-wrap: balance;
}
.cal-connect-desc {
  font-size: 14px; color: var(--granit); line-height: 1.6;
  margin: 0; max-width: 400px; text-wrap: pretty;
}
.cal-connect-btn {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 6px;
  background: var(--encre); color: var(--papier);
  border: 0; padding: 13px 22px; border-radius: var(--r-3);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: filter var(--dur-hover);
}
.cal-connect-btn:hover { filter: brightness(1.18); }
.cal-connect-btn-g {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--papier); color: #4285F4;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700;
}
.cal-connect-note {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--granit-soft); line-height: 1.6;
  margin: 8px 0 0; max-width: 380px;
}

/* BUG-052 (captures Maitre 29/07) : minmax(0, 1fr) PARTOUT — même leçon que
   BUG-020 (.stat-grid) : avec `1fr` seul, un bloc court à titre long
   (white-space nowrap, .cal-task-s) impose sa largeur incompressible à la
   colonne du jour → colonnes inégales, grille plus large que la carte, blocs
   peints par-dessus le fond de page. Intermittent car dépendant du contenu de
   la semaine (il suffit d'UN titre long non repliable pour tout gonfler). */
.calendar-head { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--brume); }
.cal-corner    { }
.cal-day       { padding: 8px 6px 10px; text-align: left; }
.cal-day-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--granit); }
.cal-day-num   { font-family: var(--font-mono); font-size: 20px; color: var(--encre); margin-top: 2px; }

.calendar-grid { display: grid; grid-template-columns: 52px 1fr; }
/* BUG-048 + BUG-053/054 (27/07) : quart d'heure sur la JOURNÉE ENTIÈRE —
   96 lignes de 16px (64px/heure, ~1536px au total : long et ASSUMÉ, la
   lisibilité prime sur la compacité). */
.cal-hours { display: grid; grid-template-rows: repeat(96, 16px); }
/* BUG-041 (ré-ouvert 26/07) : la graduation se pose SUR sa ligne de séparation
   (le padding-top 4px la faisait flotter en dessous) — texte remonté d'une
   demi-hauteur pour chevaucher exactement le trait. */
.cal-hour  { font-family: var(--font-mono); font-size: 11px; line-height: 14px; color: var(--granit); padding: 0 8px; border-top: 1px solid var(--brume-soft); transform: translateY(-7px); }

.cal-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } /* BUG-052 : colonnes STRICTEMENT égales */
.cal-col   { display: grid; grid-template-rows: repeat(96, 16px); border-left: 1px solid var(--brume-soft); min-width: 0; } /* BUG-048/053 : 15 min/ligne, 0h→24h */
.cal-cell  { border-top: 1px solid var(--brume); padding: 3px; } /* lignes d'heures VISIBLES (remontée 18/07) */
/* BUG-054 : typo des blocs agrandie (les bulles étaient illisibles). */
/* Capture 29/07 : plus jamais de ligne coupée en deux — le titre est un
   -webkit-box clampé à N lignes ENTIÈRES (N posé inline par CalendarWeek
   selon la hauteur du bloc), le surplus devient « … ». */
.cal-task .cal-task-title { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.cal-task .cal-task-project { font-size: 11px; }
/* Bloc court (≤30 min) : typo compacte, une seule ligne — le titre complet vit
   dans l'infobulle (title). */
/* Capture 29/07 : le texte des bandeaux courts flottait en haut (bloc de 2
   quarts d'heure) ou frôlait la coupe — CENTRÉ verticalement via flex, ligne
   ramenée à 14px pour tenir sereinement dans une rangée de 16px. */
.cal-task-s { padding: 0 5px; font-size: 11px; line-height: 14px; display: flex; align-items: center; }
.cal-task-s .cal-task-title { display: block; flex: 1 1 auto; min-width: 0; font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-off   { background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(228,223,211,0.35) 4px 8px); }
.cal-task {
  /* BUG-052 : le bloc se CLIPPE à sa colonne au lieu de lui imposer la largeur
     de son titre (min-width:0 annule le minimum automatique de grid, overflow
     hidden empêche de peindre par-dessus les jours voisins). */
  min-width: 0; max-width: 100%; overflow: hidden;
  background: rgba(143, 229, 229, 0.30);
  border-left: 2px solid var(--petrole);
  border-radius: 0 3px 3px 0;
  /* Couture nette entre blocs adjacents (remontée 18/07) : un liseré papier
     autour de chaque bloc — deux événements qui se touchent restent lisibles. */
  box-shadow: 0 0 0 1.5px var(--papier);
  padding: 6px 8px;
  cursor: pointer;
  transition: filter var(--dur-hover);
}
.cal-task.calm  { background: rgba(143, 229, 229, 0.30); border-left-color: var(--petrole); }
.cal-task.warm  { background: rgba(201, 133, 77, 0.30);   border-left-color: var(--lueur-ambree); }
.cal-task.alert { background: rgba(232, 85, 31, 0.30);    border-left-color: var(--lave); }
/* COULEUR PAR TYPE D'ACTIVITÉ (BUG-031, taxonomie Maitre) — placé APRÈS les
   tonalités, même spécificité (.cal-task.X) → le TYPE prime : une tâche est
   toujours violette, un rdv toujours vert, etc. Palette : tâche=violet ·
   rdv=vert · trajet=orange · boulot=rouge · loisir=jaune · agenda=bleu neutre. */
.cal-task.cal-type-tache  { background: rgba(126, 111, 168, 0.32); border-left-color: #7E6FA8; }
.cal-task.cal-type-rdv    { background: rgba(126, 154, 86, 0.30);  border-left-color: #7E9A56; }
.cal-task.cal-type-trajet { background: rgba(216, 119, 87, 0.30);  border-left-color: #D97757; }
.cal-task.cal-type-boulot { background: rgba(184, 92, 92, 0.30);   border-left-color: #B85C5C; }
.cal-task.cal-type-loisir { background: rgba(199, 167, 90, 0.34);  border-left-color: #C7A75A; }
.cal-task.cal-type-agenda { background: rgba(110, 143, 179, 0.26); border-left-color: #6E8FB3; }
.cal-task:hover { filter: brightness(0.96); }

/* ── BUG-074 : bulle de détails du calendrier (tap/clic sur un bloc) ── */
.cal-pop-scrim {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(2, 8, 23, 0.25);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cal-popover {
  background: var(--papier);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-4);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  width: 100%; max-width: 420px;
  max-height: 80vh; max-height: 80dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 18px 20px;
}
.cal-pop-title { font-size: 15px; font-weight: 600; color: var(--encre); margin: 0 0 8px; }
.cal-pop-row { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--brume); font-size: 13px; color: var(--encre); }
.cal-pop-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--granit); text-transform: uppercase; flex: 0 0 84px; padding-top: 2px; }
.cal-pop-v { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.45; }
/* Indice de balayage mobile sous la grille (3 jours visibles). */
.cal-swipe-hint { text-align: center; padding: 8px 0 2px; opacity: 0.6; }
/* Sur mobile, la bulle devient une feuille ancrée en bas (pouce + safe-area). */
@media (max-width: 760px) {
  .cal-pop-scrim { align-items: flex-end; padding: 0; }
  .cal-popover {
    max-width: none; max-height: 70vh; max-height: 70dvh;
    border-radius: var(--r-4) var(--r-4) 0 0; border-bottom: none;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}
.cal-task-title    { font-size: 12px; font-weight: 500; color: var(--encre); line-height: 1.3; }
.cal-task-project  { font-family: var(--font-mono); font-size: 10px; color: var(--granit); margin-top: 2px; letter-spacing: 0.04em; }

/* ============================================================================
   Phase Control · continuous slider démonstrateur (bottom-right floating)
   ============================================================================ */
.phase-control {
  position: fixed; bottom: 20px; right: 20px; z-index: 50; width: 320px;
  background: rgba(13, 15, 18, 0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-4);
  padding: 14px 16px 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.phase-control-head {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  margin-bottom: 12px;
}
.phase-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.phase-mode-seg {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  color: rgba(245,242,235,0.6); cursor: pointer;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 6px 4px; border-radius: 3px;
  transition: color var(--dur-hover), background var(--dur-hover), border-color var(--dur-hover);
}
.phase-mode-seg.active { color: var(--encre); background: var(--papier); border-color: var(--papier); font-weight: 600; }
.phase-mode-seg:hover:not(.active) { color: var(--papier); }
.phase-control-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  color: rgba(245,242,235,0.55); text-transform: uppercase;
}
.phase-mode {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  color: rgba(245,242,235,0.7); cursor: pointer;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;
  padding: 3px 9px; border-radius: 10px;
  transition: color var(--dur-hover), background var(--dur-hover);
}
.phase-mode.manual { color: var(--halo-cyan); border-color: rgba(143,229,229,0.4); }
.phase-mode:hover { color: var(--papier); }

.phase-control-readout {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  margin-bottom: 10px;
}
.phase-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 14px currentColor; }
.phase-dot-calm    { background: var(--lueur-turquoise); color: var(--lueur-turquoise); }
.phase-dot-trouble { background: var(--lueur-ambree);    color: var(--lueur-ambree); }
.phase-dot-burn    { background: var(--lave);            color: var(--lave); }
.phase-dot-vierge  { background: var(--granit-soft);     color: var(--granit-soft); }
.phase-readout-text { min-width: 0; }
.phase-readout-label { font-size: 13px; color: var(--papier); font-weight: 500; }
.phase-readout-hint  { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: rgba(245,242,235,0.5); margin-top: 1px; }
.phase-readout-score { display: flex; align-items: baseline; gap: 1px; }
.phase-readout-val { font-family: var(--font-mono); font-size: 24px; line-height: 1; color: var(--papier); font-variant-numeric: tabular-nums; }
.phase-readout-pct { font-family: var(--font-mono); font-size: 13px; color: rgba(245,242,235,0.6); }

.phase-slider {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: linear-gradient(to right,
    var(--lueur-turquoise) 0%, var(--lueur-turquoise) 40%,
    var(--lueur-ambree)   40%, var(--lueur-ambree)   70%,
    var(--lave)           70%, var(--pic-critique)  100%);
  outline: none; cursor: pointer; margin: 4px 0;
}
.phase-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--encre);
  box-shadow: 0 0 12px rgba(255,255,255,0.4);
  cursor: pointer; transition: transform var(--dur-hover);
}
.phase-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.phase-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--encre);
  box-shadow: 0 0 12px rgba(255,255,255,0.4); cursor: pointer;
}
.phase-slider:disabled { opacity: 0.55; cursor: not-allowed; }
.phase-slider:disabled::-webkit-slider-thumb { cursor: not-allowed; }

.phase-slider-ticks {
  display: grid; grid-template-columns: 0fr 40fr 30fr 30fr;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em;
  color: rgba(245,242,235,0.4);
  margin-top: 4px; position: relative; height: 12px;
}
.phase-slider-ticks span:nth-child(1) { text-align: left; }
.phase-slider-ticks span:nth-child(2) { text-align: right;  border-right: 1px dashed rgba(245,242,235,0.15); padding-right: 4px; }
.phase-slider-ticks span:nth-child(3) { text-align: right;  border-right: 1px dashed rgba(245,242,235,0.15); padding-right: 4px; }
.phase-slider-ticks span:nth-child(4) { text-align: right; }

/* ============================================================================
   Stats view · 4 cards 2×2 screenshot-friendly
   ============================================================================ */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stats-card { display: flex; flex-direction: column; gap: 12px; }
.stats-card-sub { font-size: 12px; color: var(--granit); margin-top: -6px; }

/* ── Heatmap de productivité ── */
.heatmap-card {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 0;
}
.heatmap-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.heatmap-total { font-size: 13px; color: var(--granit-soft); margin-top: 3px; }
.heatmap-legend {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.heatmap-legend-cell {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
}
.heatmap-wrap {
  display: flex; gap: 8px; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: var(--brume) transparent;
  padding-bottom: 4px;
}
.heatmap-day-labels {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 20px; flex-shrink: 0;
}
.heatmap-day-lbl {
  font-size: 9px; line-height: 1;
  height: 13px; display: flex; align-items: center;
  color: var(--granit);
}
.heatmap-grid-wrap { display: flex; flex-direction: column; gap: 3px; }
.heatmap-month-row {
  display: flex; gap: 3px; height: 17px;
}
.heatmap-month-cell {
  width: 13px; font-size: 8.5px; color: var(--granit);
  overflow: visible; white-space: nowrap;
}
.heatmap-grid { display: flex; gap: 3px; }
.heatmap-col  { display: flex; flex-direction: column; gap: 3px; }
.heatmap-cell {
  display: block; width: 13px; height: 13px; border-radius: 3px;
  transition: opacity var(--dur-hover), transform var(--dur-hover);
  cursor: default;
}
.heatmap-cell:hover { opacity: 0.8; transform: scale(1.25); }
.heatmap-cell-empty { background: transparent !important; pointer-events: none; }
.heatmap-tooltip {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--papier); opacity: 0.8;
  height: 18px;
}
.heatmap-tooltip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Taux Brief / Debrief ── */
.bd-rate-card { grid-column: 1 / -1; }
.bd-rate-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.bd-rate-row  { display: flex; flex-direction: column; gap: 6px; }
.bd-rate-label-row {
  display: flex; align-items: baseline; gap: 8px;
}
.bd-rate-name { font-size: 13px; font-weight: 500; color: var(--papier); flex: 1; }
.bd-rate-val  { font-size: 13px; color: var(--granit-soft); }
.bd-rate-unit { font-size: 11px; opacity: 0.7; }
.bd-rate-pct  { font-size: 15px; font-weight: 600; font-family: var(--font-mono); min-width: 40px; text-align: right; }
.bd-rate-bar-track {
  height: 5px; background: rgba(255,255,255,0.08); border-radius: 999px;
  overflow: hidden;
}
.bd-rate-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width 600ms var(--ease-emerge);
}
.bd-rate-foot {
  color: var(--granit-soft); font-size: 11px;
  border-top: 1px solid var(--surface-border); padding-top: 10px; margin-top: 4px;
}
.stats-big-num {
  font-family: var(--font-mono); font-size: 68px; line-height: 1;
  color: var(--encre); letter-spacing: -0.025em; font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.stats-delta { font-family: var(--font-mono); font-size: 12px; color: var(--petrole); letter-spacing: 0.02em; }

.sparkline { width: 100%; height: 56px; margin-top: 8px; }

.donut-row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; }
.donut { width: 180px; height: 180px; }
.donut text.donut-num { font-family: var(--font-mono); font-size: 32px; fill: var(--encre); font-weight: 500; }
.donut text.donut-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; fill: var(--granit); }
.legend { display: flex; flex-direction: column; gap: 8px; }
.legend-row {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 10px;
  align-items: center; font-size: 13px;
}
.legend-dot { width: 10px; height: 10px; border-radius: 2px; }
.legend-label { color: var(--encre); }
.legend-pct { color: var(--granit); font-size: 13px; }

.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; padding-top: 18px; }
.bar-col { display: flex; flex-direction: column; align-items: center; height: 100%; gap: 6px; }
.bar-val { font-size: 11px; color: var(--granit); }
.bar-track {
  width: 100%; flex: 1; min-height: 60px;
  background: var(--brume-soft); border-radius: 2px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.bar-fill { width: 100%; background: var(--mer-profonde); border-radius: 2px 2px 0 0; transition: height 600ms var(--ease-emerge); }
.bar-day { font-size: 10px; }

.reasons { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.reason-row {
  display: grid; grid-template-columns: 180px 1fr 40px; gap: 12px; align-items: center;
}
.reason-label { font-size: 13px; color: var(--encre); }
.reason-bar { height: 6px; background: var(--brume-soft); border-radius: 3px; overflow: hidden; }
.reason-fill { height: 100%; background: var(--petrole); transition: width 600ms var(--ease-emerge); }
.reason-pct { font-size: 13px; color: var(--granit); text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================================
   Task modal
   ============================================================================ */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2, 8, 23, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: scrim-in 200ms var(--ease-emerge);
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 560px;
  /* BUG-073 : la modale ne dépasse jamais l'écran — le corps défile, le pied
     reste visible (dvh = hauteur RÉELLE une fois les barres du navigateur posées). */
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
  background: var(--papier);
  border-radius: var(--r-4);
  border: 1px solid var(--surface-border);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  animation: modal-in 240ms var(--ease-emerge);
  display: flex; flex-direction: column;
}
@keyframes modal-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head {
  padding: 22px 24px 16px;
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--brume);
}
.modal-title { font-size: 20px; }
.modal-close {
  background: transparent; border: 0; cursor: pointer;
  width: 32px; height: 32px; border-radius: var(--r-2);
  color: var(--granit); font-size: 22px; line-height: 1;
  transition: background var(--dur-hover);
}
.modal-close:hover { background: var(--brume); color: var(--encre); }

/* ─── Attente : les silhouettes de contenu (03/08) ────────────────────────
   Des blocs gris à la place et à la taille du contenu qui arrive, pour que la
   page ne saute pas au moment où les données se posent.

   Le reflet balaie la barre en 1,4 s : MÊME TEMPO que la pulsation et que les
   pages Brief et Débrief. Tout ce qui attend, dans Gaïenju, bat au même rythme.

   Aucun texte n'entre jamais dans une silhouette : une silhouette qui contient
   des mots redevient une maquette, donc le défaut qu'on vient de corriger. */
.skel {
  display: block;
  background: var(--brume);
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: skel-sweep 1.4s ease-in-out infinite;
}
@keyframes skel-sweep { to { transform: translateX(100%); } }

/* Les barres secondaires (métadonnées) sont plus effacées que les titres :
   la silhouette garde la hiérarchie visuelle du vrai contenu. */
.skel-dim { opacity: 0.55; }

.skel-list { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.skel-row { display: flex; align-items: flex-start; gap: 12px; }
.skel-row-mark { margin-top: 1px; }
.skel-row-body { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.skel-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.skel-card {
  border: 1px solid var(--brume); border-radius: var(--r-2);
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}

.skel-dash { display: flex; flex-direction: column; gap: 18px; }
.skel-dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.skel-panel {
  border: 1px solid var(--brume); border-radius: var(--r-2);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}

/* Mobile : une colonne, et deux cartes de front plutôt que quatre écrasées. */
@media (max-width: 760px) {
  .skel-cards { grid-template-columns: repeat(2, 1fr); }
  .skel-dash-cols { grid-template-columns: 1fr; }
}

/* Mouvement réduit : les silhouettes RESTENT (elles évitent le saut de mise en
   page, c'est leur premier rôle), seul le reflet s'arrête. */
@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; opacity: 0; }
}

/* ─── Attente : le point qui respire (03/08) ──────────────────────────────
   Un texte immobile se lit comme une page figée, pas comme une page qui
   travaille (retour Maitre). Un point pulse devant le libellé.

   MÊME MOTIF QUE LES PAGES BRIEF ET DÉBRIEF, qui l'avaient déjà
   (shared.css, .bd-loading::before) : l'utilisateur passe de l'une à l'autre,
   l'attente doit se reconnaître partout.

   `currentColor` : le point prend la couleur du texte qu'il précède, donc il
   suit la charte sans avoir à être décliné par écran.

   RÉSERVÉ AU CHARGEMENT. Un message d'échec ne pulse jamais : ce qui respire
   annonce que ça arrive, et un échec n'arrive plus. */
.gj-loading::before {
  content: ""; display: inline-block; width: 7px; height: 7px;
  background: currentColor; border-radius: 50%;
  margin-right: 9px; vertical-align: middle; opacity: 0.85;
  animation: gj-loading-pulse 1.4s ease-in-out infinite;
}
@keyframes gj-loading-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.2; } }

/* Mouvement réduit : le point reste, il cesse de battre. */
@media (prefers-reduced-motion: reduce) {
  .gj-loading::before { animation: none; }
}

/* Écran d'attente du tableau de bord (03/08). Volontairement nu : il remplace
   des données inventées, il ne doit pas leur ressembler. Centré verticalement
   pour ne pas donner l'illusion d'une page déjà remplie. */
.app-boot {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh;
}
.app-boot-card {
  max-width: 420px; padding: 32px 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.app-boot-text {
  color: var(--granit); font-size: 14px; line-height: 1.55; margin: 0;
}
.app-boot-card .btn-primary { margin-top: 4px; text-decoration: none; }

/* Bandeau de reprise de brouillon (02/08) : la saisie interrompue par une
   fermeture accidentelle est restaurée — on le DIT, sinon des champs déjà
   remplis passent pour un bug. Discret : c'est une information, pas une alerte. */
.modal-draft-notice {
  padding: 10px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--brume);
  color: var(--granit);
  font-size: 13px;
  border-bottom: 1px solid var(--brume);
}
.modal-draft-reset {
  background: transparent; border: 0; cursor: pointer;
  color: var(--encre); font-size: 13px; text-decoration: underline;
  padding: 4px 0; flex-shrink: 0;
}

.modal-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.modal-foot {
  padding: 16px 24px; display: flex; justify-content: flex-end; gap: 10px;
  border-top: 1px solid var(--brume);
  flex-shrink: 0;
}

/* BUG-073 (mobile) : la modale devient une feuille ancrée en bas — les boutons
   de confirmation restent au-dessus de la barre du navigateur (safe-area). */
@media (max-width: 760px) {
  .modal-scrim { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none;
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    border-radius: var(--r-4) var(--r-4) 0 0;
    border-bottom: none;
  }
  .modal-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

.modal-input {
  width: 100%; padding: 10px 0; font-family: var(--font-sans); font-size: 16px;
  color: var(--encre); background: transparent;
  border: 0; border-bottom: 1px solid var(--brume); outline: none;
  transition: border-color var(--dur-hover);
}
.modal-input:focus { border-bottom-color: var(--encre); }
.modal-input-lg   { font-size: 20px; font-weight: 500; padding: 12px 0; }
.modal-input::placeholder { color: var(--granit-soft); }

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-row { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }

/* Info-bulle d'aide "?" à côté des labels du modal */
.field-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--granit-soft); color: var(--granit);
  font-family: var(--font-sans); font-size: 9px; font-weight: 700;
  line-height: 1; letter-spacing: 0; text-transform: none;
  cursor: help; position: relative; margin-left: 5px; vertical-align: middle;
  transition: color var(--dur-hover), border-color var(--dur-hover);
}
.field-help:hover, .field-help:focus { border-color: var(--encre); color: var(--encre); outline: none; }
.field-help-pop {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: 220px; background: var(--encre); color: var(--papier);
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 400; line-height: 1.45;
  letter-spacing: 0; text-transform: none; text-align: left;
  padding: 9px 11px; border-radius: var(--r-2); box-shadow: var(--shadow-deep);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-hover); z-index: 20;
  pointer-events: none;
}
.field-help:hover .field-help-pop, .field-help:focus .field-help-pop { opacity: 1; visibility: visible; }
.field-help-pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--encre);
}

.modal-select {
  width: 100%; padding: 8px 10px;
  font-family: var(--font-sans); font-size: 14px; color: var(--encre);
  background: var(--papier); border: 1px solid var(--brume); border-radius: var(--r-2);
  outline: none;
}
.modal-select:focus { border-color: var(--encre); }

.segmented { display: flex; gap: 0; border: 1px solid var(--brume); border-radius: var(--r-2); overflow: hidden; }
.seg {
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 12px; flex: 1;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--granit);
  border-right: 1px solid var(--brume);
  transition: background var(--dur-hover), color var(--dur-hover);
}
.seg:last-child { border-right: 0; }
.seg:hover { color: var(--encre); }
.seg.active { background: var(--encre); color: var(--papier); }

.duration-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Variante "tient sur une rangée" : chips de largeur égale, pas de retour ligne. */
.duration-chips-fit { flex-wrap: nowrap; }
.duration-chips-fit .chip {
  flex: 1; text-align: center; white-space: nowrap;
  padding: 6px 4px;
}
.chip {
  background: transparent; border: 1px solid var(--brume);
  padding: 6px 10px; border-radius: var(--r-2); cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; color: var(--granit);
  transition: all var(--dur-hover);
}
.chip:hover { color: var(--encre); }
.chip.active { background: var(--encre); color: var(--papier); border-color: var(--encre); }

.energy-readout { color: var(--encre); font-family: var(--font-mono); }
.energy-slider {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--petrole), var(--lueur-ambree), var(--lave));
  outline: none; cursor: pointer; margin: 8px 0 4px;
}
.energy-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--encre); cursor: pointer;
}
.energy-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--encre); cursor: pointer;
}
.energy-ticks {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; color: var(--granit); letter-spacing: 0.04em;
}

/* ============================================================================
   Onboarding
   ============================================================================ */
.onboarding-stage { min-height: 100vh; }
.onb-shell {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
  padding: 28px 24px 80px;
  min-height: 100vh; display: flex; flex-direction: column;
}
.onb-exit {
  align-self: flex-start;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(245,242,235,0.55);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  padding: 8px 0;
  transition: color var(--dur-hover);
}
.onb-exit:hover { color: var(--papier); }

.onb-progress { display: flex; gap: 8px; margin: 32px 0 24px; }
.onb-dot {
  width: 32px; height: 3px; border-radius: 2px;
  background: rgba(245,242,235,0.18);
  transition: background var(--dur-panel);
}
.onb-dot.active { background: var(--halo-cyan); }

.onb-panel {
  background: var(--papier-translucent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-4);
  padding: 32px 36px;
  box-shadow: var(--shadow-deep);
  display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 600px) {
  .onb-shell { padding: 20px 16px 64px; }
  .onb-panel { padding: 22px 18px; border-radius: var(--r-3); }
  .onb-title { font-size: 23px; }
  .onb-title-final { font-size: 32px; }
}
.onb-title {
  font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
  margin: 4px 0 0; color: var(--encre);
}
.onb-title-final { font-size: 42px; text-align: center; margin-top: 16px; }
.onb-sub { color: var(--granit); font-size: 15px; margin: -4px 0 8px; }

.slot-grid { display: flex; flex-direction: column; gap: 6px; }
.slot-row {
  display: grid; grid-template-columns: 56px auto auto auto 1fr;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-2);
  transition: background var(--dur-hover);
}
.slot-row:hover { background: rgba(228, 223, 211, 0.35); }
/* BUG-071 : la grille .slot-row (1re colonne 56 px, taillée pour « LUN ») était
   réutilisée par le budget d'énergie → « 5 · Énergique » passait SOUS les
   sélecteurs. Variante à libellé large pour ces lignes-là. */
.slot-row-budget { grid-template-columns: 130px auto auto auto 1fr; }
.slot-day {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--encre); padding: 4px 6px; border-radius: var(--r-2);
  text-align: left;
  transition: color var(--dur-hover);
}
.slot-day:hover { color: var(--petrole); }
.slot-off .slot-day { color: var(--granit-soft); }
.slot-time {
  font-family: var(--font-mono); font-size: 14px; color: var(--encre);
  background: transparent; border: 1px solid var(--brume);
  padding: 6px 8px; border-radius: var(--r-2); outline: none;
  transition: border-color var(--dur-hover);
}
.slot-time:focus { border-color: var(--encre); }
.slot-arrow { color: var(--granit); font-family: var(--font-mono); }
.slot-off-label {
  font-family: var(--font-mono); font-size: 13px; color: var(--granit); letter-spacing: 0.04em;
  font-style: italic;
}

.onb-task-input {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
}
.onb-task-input input {
  width: 100%; padding: 12px 14px;
  font-family: var(--font-sans); font-size: 15px; color: var(--encre);
  background: rgba(255,255,255,0.5); border: 1px solid var(--brume); border-radius: var(--r-2);
  outline: none;
  transition: border-color var(--dur-hover), background var(--dur-hover);
}
.onb-task-input input:focus { border-color: var(--encre); background: var(--papier); }

.onb-task-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 280px; overflow-y: auto;
  padding-right: 4px;
}
.onb-task {
  display: grid; grid-template-columns: 32px 1fr 28px;
  align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-2);
  transition: background var(--dur-hover);
}
.onb-task:hover { background: rgba(228, 223, 211, 0.35); }
.onb-task-num   { font-family: var(--font-mono); font-size: 11px; color: var(--granit); letter-spacing: 0.06em; }
.onb-task-title { font-size: 15px; color: var(--encre); }
.onb-task-x {
  background: transparent; border: 0; cursor: pointer;
  color: var(--granit-soft); font-size: 18px;
  width: 24px; height: 24px; border-radius: var(--r-2);
  transition: color var(--dur-hover), background var(--dur-hover);
}
.onb-task-x:hover { color: var(--encre); background: var(--brume); }
.onb-task-empty { color: var(--granit-soft); padding: 24px 12px; text-align: center; font-size: 11px; }

.onb-email {
  width: 100%; padding: 14px 16px;
  font-family: var(--font-mono); font-size: 18px; color: var(--encre);
  background: var(--papier); border: 1px solid var(--brume); border-radius: var(--r-2);
  outline: none; text-align: center; letter-spacing: 0.02em;
  transition: border-color var(--dur-hover);
}
.onb-email:focus { border-color: var(--encre); }
.onb-final-meta { text-align: center; color: var(--granit); margin-top: 4px; }

.onb-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px;
}
.onb-actions-final { justify-content: center; }
.onb-hint { font-family: var(--font-mono); font-size: 11px; color: var(--granit); letter-spacing: 0.04em; }

.onb-panel-final { align-items: center; text-align: center; padding: 56px 36px; }

/* ============================================================================
   Bilan view · onglet Synthèse de la webapp
   ============================================================================ */
.content-bilan { display: flex; flex-direction: column; gap: 16px; }

.bilan-hero-panel {
  padding: 36px 40px;
  display: flex; flex-direction: column; gap: 16px;
}
.bilan-hero-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--vert-aurore); text-transform: uppercase;
}
.bilan-hero-text {
  font-size: 26px; line-height: 1.35; font-weight: 500; color: var(--encre);
  letter-spacing: -0.015em; margin: 0;
  text-wrap: pretty; max-width: 680px;
}
.bilan-ai-loading {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  background: rgba(78, 175, 200, 0.08);
  border: 1px solid rgba(78, 175, 200, 0.18);
  border-radius: var(--r-3);
  align-self: flex-start;
}
.bilan-ai-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lueur-turquoise);
  box-shadow: 0 0 10px var(--lueur-turquoise);
  animation: bilan-pulse 1.4s ease-in-out infinite;
}
@keyframes bilan-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.bilan-ai-loading-text {
  font-family: var(--font-mono); font-size: 12px; color: var(--granit);
  letter-spacing: 0.06em;
}

/* ─── KPI grid ─── */
.bilan-kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.bilan-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bilan-kpi-val {
  font-family: var(--font-mono); font-size: 36px; line-height: 1;
  color: var(--encre); letter-spacing: -0.015em; font-weight: 400;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.bilan-kpi-unit { font-size: 18px; color: var(--granit); margin-left: 1px; }
.bilan-kpi-val-text {
  font-size: 18px; line-height: 1.25; color: var(--encre);
  font-weight: 500; margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── Journal echo ─── */
.bilan-journal-panel {
  border-left: 3px solid var(--petrole);
  display: flex; flex-direction: column; gap: 10px;
}
.bilan-journal-quote {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  color: var(--encre); margin: 0;
  font-style: italic;
  text-wrap: pretty;
}

/* ─── Signature echo ─── */
.bilan-sig-panel { display: flex; flex-direction: column; gap: 10px; }
.bilan-sig-image {
  max-width: 320px; max-height: 120px;
  align-self: flex-start;
  filter: invert(0); /* signature was drawn in encre on transparent */
}

/* ─── 7-day timeline ─── */
.bilan-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.bilan-day {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px;
  border: 1px solid var(--brume);
  border-radius: var(--r-3);
  background: rgba(245, 242, 235, 0.5);
  transition: background var(--dur-hover);
}
.bilan-day.today {
  border-color: var(--petrole);
  background: var(--papier);
  box-shadow: 0 4px 16px rgba(14, 77, 92, 0.18);
}
.bilan-day.empty { background: transparent; opacity: 0.5; }
.bilan-day-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--granit); text-transform: uppercase;
}
.bilan-day-date {
  font-family: var(--font-mono); font-size: 16px; font-weight: 500;
  color: var(--encre); line-height: 1;
}
.bilan-day-ratio {
  font-family: var(--font-mono); font-size: 14px;
  color: var(--encre); margin-top: 4px;
  display: flex; align-items: baseline; justify-content: center;
}
.bilan-day-ratio.bilan-day-empty { color: var(--granit-soft); }
.bilan-day-done  { font-weight: 500; font-variant-numeric: tabular-nums; }
.bilan-day-total { font-size: 11px; color: var(--granit); margin-left: 1px; }
.bilan-day-energy {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--papier);
  margin-top: 2px;
}
.bilan-day-energy-empty {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px dashed var(--brume);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--granit-soft);
  margin-top: 2px;
}

/* ─── Empty state ─── */
.bilan-empty-panel { display: flex; flex-direction: column; gap: 14px; }
.bilan-empty-meta { font-size: 14px; color: var(--granit); line-height: 1.5; max-width: 540px; margin: 0; }
.bilan-empty-cta {
  align-self: flex-start;
  display: inline-block;
  background: var(--encre); color: var(--papier);
  text-decoration: none;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 12px 22px; border-radius: var(--r-2);
  margin-top: 4px; margin-bottom: 20px;
  transition: filter var(--dur-hover);
}
.bilan-empty-cta:hover { filter: brightness(1.15); }

/* ─── Closing line ─── */
.bilan-closing-block {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 28px 24px 8px;
}
.bilan-closing-text {
  font-family: var(--font-sans); font-size: 18px; font-weight: 500;
  color: rgba(245, 242, 235, 0.88);
  letter-spacing: -0.005em;
  max-width: 480px;
  line-height: 1.4;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .bilan-hero-panel { padding: 24px 22px; }
  .bilan-hero-text { font-size: 20px; }
  .bilan-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 960px) {
  .stat-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid   { grid-template-columns: 1fr; }
  .dash-hero:has(.critical-card) { grid-template-columns: 1fr; }
  .reason-row   { grid-template-columns: 160px 1fr 36px; }
}
@media (max-width: 760px) {
  .app-shell { padding: 16px 12px 100px; }
  .topbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .topbar-left { gap: 14px; flex-wrap: wrap; align-items: center; }
  .tabs { display: none; }
  .topbar-right { justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
  .panel { padding: 18px 16px; border-radius: var(--r-3); }
  .panel-head { margin-bottom: 14px; padding-bottom: 12px; flex-wrap: wrap; gap: 8px; }
  .panel-title { font-size: 19px; }
  .panel-subtitle { font-size: 15px; }
  .content { gap: 12px; }
  .dash-hero, .dash-mid { gap: 12px; }
  .stat-grid { gap: 14px 16px; }
  .calendar-head { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
  .calendar-grid { grid-template-columns: 44px 1fr; }
  .donut-row    { grid-template-columns: 140px 1fr; gap: 16px; }
  .donut, .donut-row .donut { width: 140px; height: 140px; }
  .field-row    { grid-template-columns: 1fr; gap: 16px; }
  .phase-control { width: calc(100% - 24px); right: 12px; bottom: 92px; }
}

@media (max-width: 440px) {
  .app-shell { padding: 14px 10px 100px; }
  .panel { padding: 16px 13px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================
   Habits view · onglet Habitudes
   ============================================================================ */
.content-habits { display: flex; flex-direction: column; gap: 16px; }
.habits-meta { margin-top: 6px; }

.habits-empty {
  padding: 64px 24px;
  text-align: center;
  border: 1px dashed var(--brume);
  border-radius: var(--r-3);
  margin-top: 12px;
}
.habits-empty-text { font-size: 16px; color: var(--encre); margin: 0 0 6px; }

.habits-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.habit-card {
  background: rgba(245, 242, 235, 0.4);
  border: 1px solid var(--brume);
  border-radius: var(--r-3);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 8px;
  transition: background var(--dur-hover);
}
.habit-card:hover { background: rgba(245, 242, 235, 0.7); }
.habit-card.paused { opacity: 0.55; }

.habit-card-head {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.habit-card-code {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--granit); letter-spacing: 0.08em;
  background: var(--brume-soft); padding: 3px 8px; border-radius: 3px;
  flex-shrink: 0;
}
.habit-card-name {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  color: var(--encre);
  flex: 1; min-width: 0;
}
.habit-card-why {
  font-size: 13px; color: var(--granit); line-height: 1.5;
  text-wrap: pretty;
}
.habit-card-foot {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--brume);
  margin-top: 4px;
}
.habit-card-paused-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  color: var(--lueur-ambree); text-transform: uppercase;
  background: rgba(201, 133, 77, 0.15);
  padding: 2px 7px; border-radius: 2px;
}
.habit-card-rate {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--granit);
  margin-left: auto;
}
.habit-card-rate b {
  font-weight: 500; color: var(--encre);
}
.habit-card-edit {
  background: transparent; border: 0; cursor: pointer;
  color: var(--granit); font-size: 18px;
  width: 28px; height: 28px;
  border-radius: var(--r-2);
  transition: color var(--dur-hover), background var(--dur-hover);
}
.habit-card-edit:hover { color: var(--encre); background: var(--brume); }

.habits-sync-note {
  text-align: center;
  padding: 12px;
  color: rgba(245, 242, 235, 0.45) !important;
  font-size: 10px !important;
}

/* ─── Habit modal · étend les styles de TaskModal ─── */
.habit-modal { max-width: 600px; }
.habit-modal-row {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 16px;
}
.habit-field-code .modal-input {
  font-family: var(--font-mono);
  text-align: center;
  letter-spacing: 0.08em;
}
.modal-textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}
.habit-weekly-target {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
}
.habit-active-row {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.habit-active-row input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer;
  accent-color: var(--petrole);
}
.habit-active-label {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--encre);
}
.habit-active-help {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--granit-soft);
  letter-spacing: 0.02em;
  margin-left: 4px;
}
.habit-modal-foot { display: flex; align-items: center; gap: 10px; }
.habit-modal-spacer { flex: 1; }
.btn-danger {
  color: var(--lave) !important;
  border-color: rgba(232, 85, 31, 0.4) !important;
}
.btn-danger:hover {
  color: var(--papier) !important;
  background: var(--lave) !important;
  border-color: var(--lave) !important;
}

@media (max-width: 760px) {
  .habit-modal-row { grid-template-columns: 1fr; }
  .habit-card-foot { gap: 8px; }
  .habit-card-rate { margin-left: 0; }
}


/* ============================================================================
   Habits · category description + day picker
   ============================================================================ */
.habit-cat-segmented .seg { flex: 1; padding: 8px 10px; font-size: 10px; }
.habit-cat-desc {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--brume-soft);
  border-radius: var(--r-2);
  font-size: 13px; color: var(--encre); line-height: 1.45;
}
.habit-cat-desc strong {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--petrole);
  margin-right: 4px;
}

.habit-day-picker {
  display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.habit-day-btn {
  flex: 1; min-width: 44px;
  background: transparent;
  border: 1px solid var(--brume);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--granit);
  padding: 8px 4px; border-radius: var(--r-2);
  cursor: pointer;
  transition: all var(--dur-hover);
}
.habit-day-btn:hover { color: var(--encre); border-color: var(--encre); }
.habit-day-btn.active {
  background: var(--encre); color: var(--papier); border-color: var(--encre);
}

/* Project detail empty-tree placeholder */
.project-empty-tree {
  padding: 24px 18px;
  text-align: center;
  background: var(--brume-soft);
  border-radius: var(--r-2);
  color: var(--granit);
  font-size: 14px; line-height: 1.6;
}

/* TaskModal date input + hint */
.modal-date {
  font-family: var(--font-mono); font-size: 14px;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--brume);
  padding: 9px 12px;
  border-radius: var(--r-2);
}
.modal-date:focus { border-color: var(--encre); outline: none; }
.field-hint {
  font-family: var(--font-sans); font-size: 10px; color: var(--granit-soft);
  font-weight: 400; text-transform: none; letter-spacing: 0;
  margin-left: 4px;
}


/* ============================================================================
   Tasks view · onglet Tâches (tableur triable)
   ============================================================================ */
.content-tasks { display: flex; flex-direction: column; gap: 16px; }

.tasks-sheet-wrap {
  margin-top: 12px;
  overflow-x: auto;
  border: 1px solid var(--brume);
  border-radius: var(--r-3);
  background: rgba(245, 242, 235, 0.5);
}
.tasks-sheet {
  width: 100%; min-width: 880px; border-collapse: collapse;
  font-family: var(--font-sans); font-size: 13px;
}
.tasks-sheet thead th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--granit); text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
  background: rgba(228, 223, 211, 0.6);
  border-bottom: 1px solid var(--brume);
  white-space: nowrap;
  user-select: none;
}
.tasks-sheet thead th.right { text-align: right; }
.tasks-sheet thead th.sortable { cursor: pointer; transition: color var(--dur-hover); }
.tasks-sheet thead th.sortable:hover { color: var(--encre); }
.tasks-sheet thead th.active { color: var(--encre); }
.tasks-sort-arrow { margin-left: 4px; opacity: 0.7; }

/* En-tête : libellé + flèche de tri + (?) d'aide poussé à droite */
.tasks-col-head { display: flex; align-items: center; gap: 5px; }
.tasks-sheet thead th.right .tasks-col-head { justify-content: flex-end; }
.tasks-col-help {
  position: relative;
  margin-left: auto;
  width: 14px; height: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--granit-soft); border-radius: 50%;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  color: var(--granit); cursor: help;
  text-transform: none; letter-spacing: 0;
  transition: color var(--dur-hover), border-color var(--dur-hover), background var(--dur-hover);
}
.tasks-sheet thead th.right .tasks-col-help { margin-left: 5px; }
.tasks-col-help.active,
.tasks-col-help:hover, .tasks-col-help:focus-visible {
  color: var(--papier); background: var(--encre); border-color: var(--encre); outline: none;
}

/* Infobulle d'aide · rendue en portail (position: fixed) → jamais rognée */
.col-help-tip {
  position: fixed; z-index: 200;
  transform: translateX(-50%);
  width: max-content; max-width: 240px;
  background: var(--encre); color: var(--papier);
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; line-height: 1.45; text-align: left;
  padding: 9px 11px; border-radius: var(--r-2);
  box-shadow: var(--shadow-deep);
  pointer-events: none;
  animation: colHelpIn 120ms var(--ease-emerge);
}
.col-help-tip::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--encre);
}
@keyframes colHelpIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-3px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.tasks-sheet tbody tr {
  border-bottom: 1px solid var(--brume);
  transition: background var(--dur-hover);
}
.tasks-sheet tbody tr:last-child { border-bottom: none; }
.tasks-sheet tbody tr:hover { background: rgba(255, 255, 255, 0.5); }

.tasks-sheet tbody td {
  padding: 11px 14px;
  color: var(--encre);
  vertical-align: middle;
}
.tasks-sheet tbody td.right { text-align: right; }

.tasks-row-overdue { background: rgba(255, 61, 15, 0.04); }
.tasks-row-warm    { background: rgba(201, 133, 77, 0.04); }
.tasks-row-calm    { background: rgba(14, 77, 92, 0.03); }

.tasks-cell-title { font-weight: 500; }
.tasks-cell-project { color: var(--granit); font-size: 12px; }
.tasks-cell-lieu { color: var(--granit); font-size: 12px; }
.tasks-cell-deadline { color: var(--granit); font-size: 12px; letter-spacing: 0.02em; }
.tasks-cell-points { color: var(--petrole); font-weight: 500; }

/* Largeurs minimales · laisse respirer les colonnes à pastilles. */
.tasks-col-title, .tasks-cell-title { min-width: 200px; }
.tasks-col-lieu, .tasks-col-impact, .tasks-col-deadline { white-space: nowrap; }
.tasks-cell-source {
  font-size: 9px; letter-spacing: 0.1em; color: var(--granit-soft);
}

.tasks-status {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: 2px;
  text-transform: uppercase;
}
.tasks-status-muted    { background: var(--brume-soft); color: var(--granit); }
.tasks-status-calm     { background: rgba(14, 77, 92, 0.12); color: var(--petrole); }
.tasks-status-warm     { background: rgba(201, 133, 77, 0.18); color: var(--lueur-ambree); }
.tasks-status-critical { background: rgba(255, 61, 15, 0.18); color: var(--pic-critique); font-weight: 500; }

.tasks-impact {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  padding: 3px 7px; border-radius: 2px;
  text-transform: uppercase;
}
.tasks-impact-faible { background: rgba(107, 111, 117, 0.15); color: var(--granit); }
.tasks-impact-moyen  { background: rgba(14, 77, 92, 0.15);   color: var(--petrole); }
.tasks-impact-fort   { background: rgba(232, 85, 31, 0.15);  color: var(--lave); font-weight: 500; }
.tasks-impact-muted  { background: var(--brume-soft); color: var(--granit-soft); }

.tasks-actions {
  display: flex; align-items: center; gap: 2px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity var(--dur-hover);
}
.tasks-row:hover .tasks-actions,
.tasks-row:focus-within .tasks-actions { opacity: 1; }

.tasks-row-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--granit-soft);
  width: 26px; height: 26px;
  border-radius: var(--r-2);
  transition: color var(--dur-hover), background var(--dur-hover);
}
.tasks-row-btn:hover { color: var(--encre); background: var(--brume); }
.tasks-row-btn:focus-visible { outline: 2px solid var(--halo-cyan); outline-offset: 1px; opacity: 1; }
.tasks-row-delete:hover { color: var(--lave); background: var(--brume); }
.tasks-row-reset:hover  { color: var(--petrole); background: var(--brume); }

.tasks-edited-flag {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px;
  background: rgba(14, 77, 92, 0.12); color: var(--petrole);
}

/* ─── Édition inline (clic dans une cellule) ─── */
.tasks-inline-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0; cursor: text;
  font: inherit; color: inherit; text-align: inherit;
  padding: 2px 4px; margin: -2px -4px;
  border-radius: var(--r-2);
  max-width: 100%;
  transition: background var(--dur-hover), box-shadow var(--dur-hover);
}
.tasks-cell-points .tasks-inline-trigger { text-align: right; }
.tasks-inline-trigger:hover {
  background: var(--brume-soft);
  box-shadow: inset 0 -1px 0 0 var(--granit-soft);
}
.tasks-inline-trigger:focus-visible {
  outline: 2px solid var(--halo-cyan); outline-offset: 1px;
}
.tasks-inline-input {
  font: inherit; color: var(--encre);
  width: 100%; min-width: 64px; box-sizing: border-box;
  padding: 3px 6px;
  background: var(--papier);
  border: 1px solid var(--petrole);
  border-radius: var(--r-2);
  outline: none;
}
.tasks-inline-input:focus { box-shadow: 0 0 0 2px rgba(14, 77, 92, 0.18); }
.tasks-inline-select { cursor: pointer; }
.tasks-cell-points .tasks-inline-input { text-align: right; }

/* Touch / coarse pointers : actions toujours visibles (pas de hover fiable). */
@media (hover: none) {
  .tasks-actions { opacity: 1; }
}

@media (max-width: 760px) {
  .tasks-sheet { font-size: 12px; }
  .tasks-sheet thead th, .tasks-sheet tbody td { padding: 9px 10px; }
  .tasks-cell-source { display: none; }
}

/* ============================================================================
   Onboarding · uniform sleep toggle + uniform row
   ============================================================================ */
.onb-uniform-row {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 4px;
  cursor: pointer;
  font-size: 14px; color: var(--encre);
}
.onb-uniform-row input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer;
  accent-color: var(--petrole);
}

.slot-row-uniform {
  background: rgba(14, 77, 92, 0.06);
  border: 1px solid rgba(14, 77, 92, 0.25);
  border-radius: var(--r-3);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto auto auto auto 1fr;
  gap: 14px;
  align-items: center;
}
.slot-day-uniform {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--petrole); text-transform: uppercase; font-weight: 500;
}
.slot-night-hint {
  color: var(--granit) !important;
  font-size: 11px !important;
}


/* ============================================================================
   Topbar · icon button + avatar
   ============================================================================ */
.topbar-icon {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(245, 242, 235, 0.65);
  cursor: pointer;
  width: 36px; height: 36px;
  border-radius: var(--r-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--dur-hover), background var(--dur-hover), border-color var(--dur-hover);
}
.topbar-icon:hover {
  color: var(--papier);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255,255,255,0.18);
}
.topbar-icon.active {
  color: var(--papier);
  background: rgba(143, 229, 229, 0.12);
  border-color: rgba(143, 229, 229, 0.35);
}

.topbar-avatar {
  background: var(--petrole);
  border: 0;
  color: var(--halo-cyan);
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter var(--dur-hover);
}
.topbar-avatar:hover { filter: brightness(1.15); }

/* ============================================================================
   Settings view
   ============================================================================ */
.content-settings { padding: 0; }

.settings-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  background: var(--papier-translucent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-deep);
  min-height: 560px;
  overflow: hidden;
}

.settings-sidebar {
  padding: 24px 0 24px 24px;
  border-right: 1px solid var(--brume);
  display: flex; flex-direction: column; gap: 14px;
}
.settings-sidebar-tag {
  padding: 0 16px 6px;
  letter-spacing: 0.18em !important;
}
.settings-nav {
  display: flex; flex-direction: column; gap: 2px;
}
.settings-nav-item {
  background: transparent; border: 0; cursor: pointer;
  text-align: left;
  font-family: var(--font-sans); font-size: 14px;
  color: var(--granit);
  padding: 10px 16px;
  border-radius: var(--r-2) 0 0 var(--r-2);
  margin-right: -1px;
  transition: color var(--dur-hover), background var(--dur-hover);
  position: relative;
}
.settings-nav-item:hover { color: var(--encre); background: rgba(228, 223, 211, 0.4); }
.settings-nav-item.active {
  color: var(--encre);
  background: var(--papier);
  font-weight: 500;
}
.settings-nav-item.active::before {
  content: "";
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: var(--petrole); border-radius: 1px;
}

.settings-main {
  padding: 28px 32px;
  overflow-y: auto;
}

.settings-section {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 600px;
}

.settings-section-head {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--brume);
}
.settings-section-head-mid {
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--brume);
  border-bottom: 0;
  padding-bottom: 0;
}
.settings-section-title {
  font-size: 18px; font-weight: 600;
  color: var(--encre);
  margin: 0;
  letter-spacing: -0.005em;
}
.settings-section-title.settings-danger { color: var(--lave); }
.settings-section-desc {
  font-size: 13px; color: var(--granit);
  margin: 0; line-height: 1.5;
}

.settings-field {
  display: flex; flex-direction: column; gap: 6px;
}
.settings-input {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--brume);
  padding: 9px 12px;
  border-radius: var(--r-2);
  outline: none;
  transition: border-color var(--dur-hover);
  width: 100%; box-sizing: border-box;
}
.settings-input:focus { border-color: var(--encre); }
.settings-time {
  font-family: var(--font-mono);
  max-width: 130px;
}

.settings-row-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.settings-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
}
.settings-row input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--petrole);
  cursor: pointer;
  flex-shrink: 0;
}
.settings-row-toggle { cursor: pointer; }
.settings-row-body {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.settings-row-label {
  font-size: 14px; font-weight: 500;
  color: var(--encre);
}
.settings-row-help {
  font-size: 12px; color: var(--granit); line-height: 1.5;
}
.settings-row-disabled { opacity: 0.5; cursor: not-allowed; }
.settings-row-disabled input { cursor: not-allowed; }

.settings-slots { display: flex; flex-direction: column; gap: 6px; }

.settings-range {
  width: 100%;
  accent-color: var(--petrole);
}

.settings-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}

.settings-integration {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--brume);
  border-radius: var(--r-3);
  background: rgba(245, 242, 235, 0.4);
}
.settings-integration-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.settings-integration-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.settings-integration-name { font-size: 14px; font-weight: 500; color: var(--encre); }
.settings-integration-status {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  padding: 2px 7px; border-radius: 2px;
  text-transform: uppercase;
}
.status-connected { background: rgba(46, 232, 159, 0.15); color: #1a8d6a; }
.status-pending   { background: rgba(201, 133, 77, 0.18); color: var(--lueur-ambree); }
.settings-integration-desc {
  font-size: 12px; color: var(--granit); line-height: 1.5; margin: 0;
}

.settings-mono-readout {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--encre);
  background: var(--brume-soft);
  padding: 8px 12px;
  border-radius: var(--r-2);
  display: block;
}

@media (max-width: 760px) {
  .settings-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .settings-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--brume);
    padding: 18px 16px;
  }
  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
  }
  .settings-nav-item {
    white-space: nowrap;
    border-radius: var(--r-2);
    margin-right: 0;
  }
  .settings-nav-item.active::before { display: none; }
  .settings-main { padding: 22px 18px; }
  .settings-row-pair { grid-template-columns: 1fr; }
}


/* ============================================================================
   Onboarding · welcome step
   ============================================================================ */
.onb-panel-welcome {
  text-align: center;
  align-items: center;
  padding: 56px 40px;
  gap: 20px;
}
.onb-title-welcome {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.015em;
  max-width: 580px;
  text-wrap: balance;
  margin: 4px 0 0;
}
.onb-sub-welcome {
  font-size: 16px;
  color: var(--granit);
  line-height: 1.55;
  max-width: 480px;
  text-wrap: pretty;
  margin: 0;
}
.onb-welcome-meta {
  color: var(--granit-soft) !important;
  margin-top: 8px;
  letter-spacing: 0.1em !important;
}
.onb-actions-welcome {
  justify-content: center;
  margin-top: 16px;
}

/* ============================================================================
   Notion-style tags (pastilles couleur) · États, Impact, Lieu, Échéance
   Palette douce dérivée des tokens Gaienju · sobre mais lisible sur papier.
   ============================================================================ */
.ntag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  line-height: 1.5; white-space: nowrap;
}
.ntag-text { overflow: hidden; text-overflow: ellipsis; }
.ntag-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.ntag-gray   { background: rgba(107,111,117,0.12); color: #5c6066; }
.ntag-blue   { background: rgba(79,136,242,0.13);  color: #2f5fb0; }
.ntag-teal   { background: rgba(14,77,92,0.12);    color: #0e5563; }
.ntag-green  { background: rgba(46,150,110,0.15);  color: #1f6b4a; }
.ntag-amber  { background: rgba(201,133,77,0.17);  color: #8c5a2c; }
.ntag-purple { background: rgba(126,111,168,0.16); color: #564a82; }
.ntag-rose   { background: rgba(184,58,106,0.13);  color: #93375d; }
.ntag-red    { background: rgba(232,85,31,0.14);   color: #b3431a; }
.ntag-mute   { background: transparent; color: var(--granit-soft); padding-left: 2px; }
.ntag-empty  { background: transparent; color: var(--granit-soft); padding-left: 2px; font-weight: 400; }

.ntag-dot-gray   { background: #8a9099; }
.ntag-dot-blue   { background: #4f88f2; }
.ntag-dot-teal   { background: #2f8f9d; }
.ntag-dot-green  { background: #2ea36e; }
.ntag-dot-amber  { background: #c9854d; }
.ntag-dot-purple { background: #8579b3; }
.ntag-dot-rose   { background: #c45e84; }
.ntag-dot-red    { background: #e8551f; }
.ntag-dot-mute   { background: #b9bdc4; }

/* ── Cellule éditable (pastille → popover de choix) ── */
.tagcell { position: relative; display: inline-block; max-width: 100%; }
.tagcell-trigger {
  display: inline-flex; align-items: center; max-width: 100%;
  background: transparent; border: 0; padding: 2px; margin: -2px;
  border-radius: 999px; cursor: pointer;
  transition: background var(--dur-hover);
}
.tagcell-trigger:hover { background: var(--brume-soft); }
.tagcell-trigger:focus-visible { outline: 2px solid var(--halo-cyan); outline-offset: 1px; }

.tagcell-pop {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 60;
  min-width: 172px;
  background: var(--papier);
  border: 1px solid var(--brume);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-deep);
  padding: 5px;
  display: flex; flex-direction: column; gap: 1px;
  animation: tagpop-in 120ms var(--ease-emerge);
}
@keyframes tagpop-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.tagcell-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 7px; border-radius: var(--r-2); text-align: left;
  transition: background var(--dur-hover);
}
.tagcell-opt:hover { background: var(--brume-soft); }
.tagcell-opt.selected { background: rgba(14,77,92,0.06); }
.tagcell-check { color: var(--petrole); flex-shrink: 0; }
.tagcell-custom {
  display: flex; gap: 6px; align-items: center;
  margin-top: 4px; padding-top: 6px;
  border-top: 1px solid var(--brume);
}
.tagcell-custom-input {
  flex: 1; min-width: 0;
  font-family: var(--font-sans); font-size: 12px; color: var(--encre);
  background: var(--papier); border: 1px solid var(--brume);
  border-radius: var(--r-2); padding: 6px 8px; outline: none;
}
.tagcell-custom-input:focus { border-color: var(--petrole); }
.tagcell-custom-add {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  background: var(--encre); color: var(--papier); border: 0; border-radius: var(--r-2);
  padding: 6px 9px; cursor: pointer;
}
.tagcell-custom-add:disabled { opacity: 0.4; cursor: not-allowed; }

/* Bouton "Retirer" · vide la valeur (ex. lieu) */
.tagcell-clear {
  display: flex; align-items: center; gap: 7px;
  width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 7px; border-radius: var(--r-2);
  margin-top: 2px; padding-top: 8px;
  border-top: 1px solid var(--brume);
  font-family: var(--font-sans); font-size: 12px; color: var(--granit);
  transition: background var(--dur-hover), color var(--dur-hover);
}
.tagcell-clear:hover { background: var(--brume-soft); color: var(--encre); }
.tagcell-clear-x { color: var(--granit-soft); flex-shrink: 0; }
.tagcell-clear:hover .tagcell-clear-x { color: var(--lave); }

.tasks-row-done .tasks-cell-title .tasks-inline-trigger { color: var(--granit); text-decoration: line-through; text-decoration-color: var(--granit-soft); }

/* ── Barre filtres / tri (Tâches & Projets) ── */
.tasks-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; margin-bottom: 2px;
}
.tasks-search {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(245,242,235,0.6);
  border: 1px solid var(--brume); border-radius: var(--r-2);
  padding: 7px 10px; color: var(--granit); flex: 1 1 220px; min-width: 180px; max-width: 320px;
  transition: border-color var(--dur-hover);
}
.tasks-search:focus-within { border-color: var(--encre); color: var(--encre); }
.tasks-search input {
  border: 0; background: transparent; outline: none;
  font-family: var(--font-sans); font-size: 13px; color: var(--encre); width: 100%;
}
.tasks-search input::placeholder { color: var(--granit-soft); }
.tasks-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tasks-filter-select {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em;
  color: var(--granit); background: var(--papier);
  border: 1px solid var(--brume); border-radius: var(--r-2);
  padding: 7px 9px; cursor: pointer;
  transition: border-color var(--dur-hover), color var(--dur-hover);
}
.tasks-filter-select:hover { border-color: var(--granit); color: var(--encre); }
.tasks-filter-select:focus { outline: none; border-color: var(--encre); color: var(--encre); }
.tasks-sort-select { color: var(--encre); }
.tasks-filter-reset {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; border: 0; color: var(--petrole); cursor: pointer;
  padding: 6px 4px; text-decoration: underline; text-underline-offset: 2px;
}
.tasks-filter-reset:hover { color: var(--encre); }
.tasks-toolbar-count { margin-left: auto; flex-shrink: 0; }

@media (max-width: 760px) {
  .tasks-toolbar-count { display: none; }
  .tasks-search { max-width: none; }
}

/* ============================================================================
   Reports log · accès discret aux rapports archivés (vue Stats)
   ============================================================================ */
.reports-log {
  border: 1px solid var(--brume);
  border-radius: var(--r-4);
  background: var(--papier-veil);
  overflow: hidden;
}
.reports-log.open { background: var(--papier-translucent); box-shadow: var(--shadow-soft); }
.reports-log-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; background: transparent; border: 0; cursor: pointer;
  padding: 14px 18px; text-align: left;
  transition: background var(--dur-hover);
}
.reports-log-bar:hover { background: rgba(255,255,255,0.4); }
.reports-log-bar-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.reports-log-glyph { color: var(--petrole); flex-shrink: 0; }
.reports-log-title { font-size: 14px; font-weight: 600; color: var(--encre); }
.reports-log-count { color: var(--granit-soft); }
.reports-log-chev { color: var(--granit); flex-shrink: 0; transition: transform var(--dur-panel) var(--ease-calm); }
.reports-log.open .reports-log-chev { transform: rotate(180deg); }

.reports-log-body {
  padding: 4px 18px 18px;
  animation: tagpop-in 160ms var(--ease-emerge);
}
.reports-log-intro {
  font-size: 12.5px; color: var(--granit); line-height: 1.5;
  max-width: 60ch; margin: 2px 0 14px;
}
.reports-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.reports-tab {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  background: transparent; border: 1px solid var(--brume); color: var(--granit);
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  transition: all var(--dur-hover);
}
.reports-tab:hover { color: var(--encre); border-color: var(--granit); }
.reports-tab.active { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.reports-tab-n {
  font-family: var(--font-mono); font-size: 10px;
  background: rgba(0,0,0,0.08); border-radius: 999px; padding: 1px 6px;
}
.reports-tab.active .reports-tab-n { background: rgba(255,255,255,0.2); }

.reports-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.reports-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; background: transparent; border: 0; cursor: pointer;
  padding: 11px 12px; border-radius: var(--r-2); text-align: left;
  border-bottom: 1px solid var(--brume-soft);
  transition: background var(--dur-hover);
}
.reports-row:hover { background: rgba(255,255,255,0.6); }
.reports-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reports-row-label { font-size: 14px; font-weight: 500; color: var(--encre); }
.reports-row-range { color: var(--granit-soft); }
.reports-row-stats { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.reports-row-stat { font-size: 12.5px; color: var(--granit); }
.reports-row-stat b { color: var(--encre); font-weight: 600; }
.reports-row-unit { color: var(--granit-soft); font-size: 10px; }
.reports-row-open {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--petrole); opacity: 0; transition: opacity var(--dur-hover);
}
.reports-row:hover .reports-row-open { opacity: 1; }

@media (hover: none) { .reports-row-open { opacity: 1; } }
@media (max-width: 640px) {
  .reports-row-stat:first-child { display: none; }
  .reports-row-open { display: none; }
}

/* ── Modal de rapport ── */
.report-modal { max-width: 540px; }
.report-modal-range { margin-top: 4px; color: var(--granit-soft); }

/* ── Briefs & Debriefs quotidiens dans la modale de rapport ── */
.dd-list {
  display: flex; flex-direction: column;
  gap: 2px; margin-top: 10px;
  max-height: 340px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--brume) transparent;
}
.dd-day {
  border-radius: var(--r-2);
  border: 1px solid transparent;
  transition: border-color var(--dur-hover), background var(--dur-hover);
}
.dd-day-open {
  border-color: var(--surface-border);
  background: rgba(255,255,255,0.025);
}
.dd-day-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 7px 10px; border-radius: var(--r-2);
  color: var(--papier);
  transition: background var(--dur-hover);
}
.dd-day-head:hover { background: rgba(255,255,255,0.04); }
.dd-day-head[disabled] { cursor: default; }
.dd-day-head[disabled]:hover { background: transparent; }

.dd-date-col {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 46px; flex-shrink: 0;
}
.dd-day-name { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--papier); }
.dd-day-num  { font-size: 10px; color: var(--granit-soft); }

.dd-brief-col,
.dd-debrief-col {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
}
.dd-col-tag { font-size: 10px; color: var(--granit); min-width: 40px; flex-shrink: 0; }

.dd-brief-stats,
.dd-debrief-stats {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.dd-energy-dot {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-family: var(--font-mono); font-weight: 600;
  padding: 1px 5px; border-radius: 999px;
  color: var(--abysse); line-height: 1.4;
  flex-shrink: 0;
}
.dd-stat {
  font-size: 11px; font-family: var(--font-mono);
  padding: 1px 5px; border-radius: var(--r-1);
}
.dd-accept  { color: var(--vert-aurore); }
.dd-report  { color: var(--granit-soft); }
.dd-done    { color: var(--vert-aurore); }
.dd-partiel { color: var(--halo-cyan); opacity: 0.8; }
.dd-non     { color: var(--granit); }

.dd-absent  { font-size: 11px; color: var(--granit); font-family: var(--font-mono); }

.dd-chev {
  font-size: 9px; color: var(--granit); flex-shrink: 0;
  margin-left: auto;
}

.dd-day-body {
  padding: 0 10px 10px 56px;
  display: flex; flex-direction: column; gap: 6px;
}
.dd-ai-text {
  font-size: 12px; line-height: 1.55;
  color: var(--papier); opacity: 0.75;
  margin: 0;
}
.dd-fierte {
  font-size: 11px; font-style: italic;
  color: var(--granit-soft); margin: 0;
}
.dd-empty {
  font-size: 12px; color: var(--granit); margin: 10px 0 0;
  font-style: italic;
}
.dd-section { border-top: 1px solid var(--surface-border); padding-top: 14px; }
.dd-section:first-child { border-top: 0; padding-top: 0; }
.report-modal-body { display: flex; flex-direction: column; gap: 20px; }
.report-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.report-kpi {
  background: rgba(245,242,235,0.55); border: 1px solid var(--brume);
  border-radius: var(--r-3); padding: 12px 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.report-kpi-val { font-family: var(--font-mono); font-size: 24px; color: var(--encre); line-height: 1; }
.report-kpi-unit { font-size: 13px; color: var(--granit-soft); }
.report-block { display: flex; flex-direction: column; gap: 10px; }
.report-reasons { margin-top: 2px; }
.report-foot { padding-top: 4px; border-top: 1px solid var(--brume); padding-top: 12px; }

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

/* ============================================================================
   Mobile bottom navigation · onglets fixés en bas (< 760px uniquement)
   ============================================================================ */
.mobile-nav { display: none; }

@media (max-width: 760px) {
  .mobile-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 2px;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom, 0px));
    background: rgba(247, 244, 237, 0.86);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-top: 1px solid var(--brume);
    box-shadow: 0 -6px 24px rgba(10, 26, 47, 0.07);
  }

  .mobile-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 2px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--granit-soft);
    transition: color var(--dur-hover, 160ms) ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-ico {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
  }
  .mobile-nav-ico svg { width: 22px; height: 22px; }

  .mobile-nav-lbl {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .mobile-nav-item.active { color: var(--petrole, #0e4d5c); }
  .mobile-nav-item.active .mobile-nav-ico {
    position: relative;
  }
  .mobile-nav-item.active .mobile-nav-ico::after {
    content: "";
    position: absolute;
    top: -7px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 2.5px; border-radius: 2px;
    background: currentColor;
  }
}

/* Légende au-dessus de la silhouette du tableau de bord : le mot rassure,
   la silhouette montre. Discrète, alignée à gauche comme les intitulés. */
.app-boot-skel { display: flex; flex-direction: column; gap: 14px; }
.app-boot-legend { margin: 0 0 2px; }