/* Reset minimal */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-md);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: inherit; font-size: inherit; }
a { color: inherit; }

#app {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-bottom: calc(var(--nav-height) + var(--space-5));
}
/* Le tableau de pilotage (Kanban) prend toute la largeur en mode web (retour de
   Charles-Henri : éviter la scrollbar horizontale) — appliqué seulement à partir d'une
   largeur d'écran où ça a du sens ; en dessous, #app garde sa largeur habituelle et le
   Kanban garde son défilement horizontal par colonnes (comportement mobile inchangé). */
@media (min-width: 900px) {
  #app.app-wide { max-width: none; padding-left: var(--space-5); padding-right: var(--space-5); }
}

/* ---------- Layout / Header ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--color-bg);
}
.topbar h1 {
  font-size: var(--font-size-xl);
  margin: 0;
}
.topbar .subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-top: 2px;
}

.view { padding: 0 var(--space-4); }

/* ---------- Bottom nav ---------- */
/* BUG corrigé (retour de Charles-Henri, 06/09/2026 : "les 5 boutons du bas ne sont pas
   centrés sur iPhone — écrasé à gauche, espace libre à droite") — `justify-content` n'était
   jamais défini ici (valeur par défaut `flex-start`), sans conséquence visible tant qu'il y
   avait 8 icônes (elles remplissaient déjà presque toute la largeur d'un iPhone). Réduites à 5
   par la vague 24, leur largeur cumulée (5 × 64px mini) laisse un vide net à droite d'un écran
   qui les contenait avant sans déborder — `justify-content: space-evenly` les répartit
   uniformément quelle que soit la largeur, sans rien changer au repli en défilement horizontal
   (`overflow-x: auto`) qui reste le filet de sécurité si NAV_ITEMS grossit un jour au point de
   ne plus tenir sur un écran. */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-evenly;
  overflow-x: auto;
  z-index: 20;
}
.bottom-nav a {
  flex: 0 0 auto;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  transition: color var(--transition);
}
/* Sur les écrans assez larges pour tout faire tenir, revenir à une répartition égale plutôt
   que de laisser 8 entrées collées à gauche avec du vide à droite. */
@media (min-width: 560px) {
  .bottom-nav a { flex: 1; }
}
.bottom-nav a .icon { font-size: 20px; position: relative; }
.bottom-nav a.active { color: var(--color-primary); font-weight: 600; }

/* Pastille "🔴 3" sur l'onglet Inbox (retour de Charles-Henri, vague 23 : "le nombre
   d'éléments dedans") — voir js/components/inboxBadge.js. Rouge plutôt que la couleur primaire
   du reste de la nav : ce compte représente quelque chose qui ATTEND une action (à qualifier),
   pas une simple info neutre. */
.nav-badge {
  position: absolute;
  top: -4px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: var(--color-text-inverse);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
}
/* Un `display` fixé par une règle "auteur" (celle ci-dessus) l'emporte TOUJOURS sur la règle
   par défaut du navigateur pour l'attribut `hidden` (`[hidden]{display:none}`, une simple règle
   "agent utilisateur"), quelle que soit la spécificité comparée — sans cette ligne, poser
   `badge.hidden = true` en JS n'aurait donc silencieusement aucun effet visuel. */
.nav-badge[hidden] { display: none; }

/* ---------- Card ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: var(--color-surface-alt); color: var(--color-text); }
.btn-ghost { background: transparent; color: var(--color-text-muted); padding: 8px 12px; }
.btn-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 14px; font-size: var(--font-size-sm); }

/* ---------- FAB (capture express) ---------- */
.fab {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--nav-height) + var(--space-4));
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  font-size: 28px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 25;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition);
}
.fab:active { transform: scale(0.94); }

/* ---------- Aide (bouton discret, visite guidée + rappels) ---------- */
.help-fab {
  position: fixed;
  left: var(--space-4);
  bottom: calc(var(--nav-height) + var(--space-4));
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  font-size: 17px;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 25;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition);
}
.help-fab:active { transform: scale(0.94); }

/* ---------- Recherche globale (empilé au-dessus du bouton Aide) ---------- */
.search-fab {
  position: fixed;
  left: var(--space-4);
  bottom: calc(var(--nav-height) + var(--space-4) + 50px);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  font-size: 16px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 25;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition);
}
.search-fab:active { transform: scale(0.94); }

/* ---------- Administration (empilé au-dessus d'Aide/Recherche, visible uniquement pour le
   compte ch-houdayer@hotmail.fr — voir js/components/adminPanel.js) ---------- */
.admin-fab {
  bottom: calc(var(--nav-height) + var(--space-4) + 100px);
  font-size: 16px;
}
.admin-fab:active { transform: scale(0.94); }

/* ---------- Mini-minuteur Pomodoro persistant (🍅, js/components/pomodoroWidget.js) ----------
   Empilé au-dessus du FAB de capture, même logique d'empilement que le bouton Aide/Recherche
   à gauche — invisible tant qu'aucune session n'est active (demande explicite du 02/09/2026 :
   le minuteur doit continuer d'exister même quand Charles-Henri change d'écran pour aller
   travailler, sinon l'outil ne sert à rien pour son usage réel). */
.pomodoro-widget {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--nav-height) + var(--space-4) + 68px);
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 6px 8px 6px 14px;
  box-shadow: var(--shadow-md);
  z-index: 25;
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pomodoro-widget.visible { display: flex; }
.pomodoro-widget-time { color: var(--color-text); white-space: nowrap; text-decoration: none; }
.pomodoro-widget-toggle {
  border: none;
  background: var(--color-surface-alt);
  border-radius: 50%;
  width: 28px; height: 28px;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.badge-todo { background: var(--color-info-bg); color: var(--color-info); }
.badge-in_progress { background: var(--color-primary-light); color: var(--color-primary); }
.badge-waiting { background: var(--color-waiting-bg); color: var(--color-waiting); }
.badge-follow_up { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-done { background: var(--color-success-bg); color: var(--color-success); }
/* Statut Suivi "🔁 Relancé" (vague 19, simplification à 3 états) — même teinte que
   l'ancien badge-follow_up qu'il remplace pour ce type d'entité, aucune nouvelle couleur. */
.badge-relaunched { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-late { background: var(--color-danger-bg); color: var(--color-danger); }
/* Projet fermé (retour de Charles-Henri, 02/09/2026) — neutre, volontairement distinct des
   badges de statut ci-dessus : une fermeture n'est ni un succès ni un retard. */
.badge-archived { background: var(--color-surface-alt); color: var(--color-text-muted); }
/* "⭐ Projet prioritaire" (vague 33, matrice de priorisation) — teinte waiting (violet),
   distincte du warning déjà pris par "🔁 Relancé"/"👀 À suivre", pour ne pas laisser croire à un
   retard : marquer un projet prioritaire est une décision positive, pas un signal d'alerte. */
.badge-critical { background: var(--color-waiting-bg); color: var(--color-waiting); }

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-6) var(--space-4);
}
.empty-state .emoji { font-size: 32px; display: block; margin-bottom: var(--space-2); }

/* ---------- Dashboard stat tiles ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.stat-tile .stat-value { font-size: 26px; font-weight: 700; }
.stat-tile .stat-label { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-top: 2px; }
.stat-tile.stat-danger .stat-value { color: var(--color-danger); }
.stat-tile.stat-warning .stat-value { color: var(--color-warning); }

.section-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: var(--space-5) 0 var(--space-2);
}

/* ---------- List rows (Inbox, task list) ---------- */
.item-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.item-row:last-child { border-bottom: none; }
.item-row .item-main { flex: 1; min-width: 0; }
.item-row .item-title { font-weight: 600; }
.item-row .item-meta { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-top: 2px; }
.item-row .item-raw {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
}

/* ---------- Fil rouge par projet ("🎯 À aborder" de la préparation de point) ---------- */
.prep-group + .prep-group {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.prep-group-label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

/* ---------- Case "vu" pendant une préparation de point (retour de Charles-Henri, vague 21) —
   voir js/views/people.js#openPrepModal/appendFollowUpRows. Un sujet coché s'estompe pour
   distinguer d'un coup d'œil ce qu'il reste encore à passer. ---------- */
.covered-check { flex: none; display: flex; align-items: center; padding-top: 2px; }
.covered-check input { width: auto; margin: 0; }
.item-row-covered { opacity: 0.5; }
.item-row-covered .item-title { text-decoration: line-through; }

/* ---------- Kanban ---------- */
.kanban-board {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  margin: 0 calc(-1 * var(--space-4));
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  /* Sur mobile, une seule colonne (ou une colonne et demie) tient à l'écran : le scroll-snap
     transforme le défilement libre en un vrai geste "colonne suivante", plutôt qu'un scroll
     flou où on ne sait jamais si une colonne est pleinement visible ou coupée en deux. */
  scroll-snap-type: x proximity;
}
.kanban-column {
  flex: 0 0 250px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-height: 120px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
/* En mode web plein écran (#app.app-wide, >= 900px), les colonnes se répartissent la
   largeur disponible plutôt que de défiler horizontalement (retour de Charles-Henri). Le
   mode mobile n'est jamais concerné : il garde le flex + scroll-snap ci-dessus. */
@media (min-width: 900px) {
  #app.app-wide .kanban-board {
    overflow-x: visible;
    scroll-snap-type: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    align-items: flex-start;
  }
  #app.app-wide .kanban-column { flex: 1 1 0; min-width: 0; }
}
/* Chaque colonne défile ses propres cartes indépendamment (retour de Charles-Henri : les
   titres de colonne ne doivent pas disparaître au scroll) — l'en-tête reste donc hors de
   cette zone, jamais besoin de position:sticky ni de calcul de décalage. */
.kanban-column-cards {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100dvh - 260px);
}
.kanban-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-1);
}
.kanban-column-header .count {
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.kanban-column.drag-over { outline: 2px dashed var(--color-primary); outline-offset: -2px; }
/* Réutilisée par le glisser-déposer des cartes Projet (onglet Projets, tri manuel) et des
   lignes Équipe (vague 20, retour de Charles-Henri : "je veux aussi pouvoir réordonner les
   personnes au sein de mon équipe") — même langage visuel que les colonnes Kanban ci-dessus. */
.card.drag-over,
.item-row.drag-over { outline: 2px dashed var(--color-primary); outline-offset: -2px; }

/* Vue Projets "🗂️ Par catégorie" (retour de Charles-Henri, 07/09/2026) : un bloc par
   catégorie, réparti en 3 colonnes en mode web, empilé en une seule colonne sur mobile —
   même seuil (900px) et même langage visuel (.kanban-column-header réutilisé tel quel)
   que le reste de Pilotage plutôt que d'inventer un nouveau système de colonnes. */
.projects-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 900px) {
  .projects-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.projects-category-column {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-width: 0;
}
/* Cible de dépose sur le fond de colonne (sous la dernière carte) — voir le
   `dragover`/`drop` posé sur `.projects-category-cards` dans js/views/projects.js. Les cartes
   elles-mêmes utilisent déjà .card.drag-over ci-dessus. */
.projects-category-cards.drag-over {
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
.kanban-card {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  cursor: grab;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card .kanban-card-title { font-weight: 600; font-size: var(--font-size-sm); }
.kanban-card .kanban-card-meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.kanban-card-move {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.kanban-move-btn {
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-primary);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.kanban-move-btn:disabled { opacity: 0.25; cursor: default; }
.kanban-move-btn:active:not(:disabled) { transform: scale(0.9); }
.kanban-move-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sous-étapes repliables sur la carte (retour de Charles-Henri, 02/09/2026 : "afficher les
   sous-étapes en dessous, en décalé, mode réduit/déplier et pouvoir cocher"). Le bouton vit
   dans .kanban-card-meta, au milieu des autres pastilles d'info — même famille visuelle,
   juste cliquable. */
.kanban-checklist-toggle {
  border: none;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.kanban-checklist-toggle:hover { color: var(--color-primary); }
.kanban-card-checklist {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kanban-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.kanban-checklist-item input[type="checkbox"] { width: auto; margin-top: 2px; }
.kanban-checklist-item span.done {
  text-decoration: line-through;
  color: var(--color-text-muted);
}
/* "⏳ En attente de..." (retour de Charles-Henri, 02/09/2026) — en évidence sur la carte tant
   que la tâche est En attente/À suivre (voir showWaiting dans kanban.js), jamais un simple
   champ de plus perdu parmi les autres : fond distinct, avant le bloc de statut. */
.kanban-card-waiting {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--color-waiting-bg);
  border-radius: var(--radius-sm);
}
.kanban-card-waiting label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-waiting);
  margin-bottom: 4px;
}
.kanban-waiting-input {
  width: 100%;
  border: 1px solid transparent;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.kanban-waiting-input:hover,
.kanban-waiting-input:focus {
  border-color: var(--color-border);
}

/* ---------- Pilotage : vue Tableau (façon Monday) ----------
   Retour de Charles-Henri, 02/09/2026 : pouvoir basculer Pilotage entre la vue Trello
   existante et une vue tableau groupable/triable/éditable en ligne. Premier <table> de
   l'appli — repris des mêmes tokens que les cartes Kanban voisines plutôt qu'un nouveau
   langage visuel (surface/surface-alt pour les groupes, mêmes rayons/ombres que .card). */
.pilotage-table-group + .pilotage-table-group {
  margin-top: var(--space-4);
}
.pilotage-table-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  padding: 0 var(--space-1);
  margin-bottom: var(--space-2);
}
.pilotage-table-group-header .count {
  font-weight: 600;
  color: var(--color-text-muted);
}
.pilotage-table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.pilotage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.pilotage-table th,
.pilotage-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.pilotage-table thead th {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
}
.pilotage-table tbody tr:last-child td {
  border-bottom: none;
}
.pilotage-table-th-pinned,
.pilotage-table-td-pinned {
  position: sticky;
  left: 0;
  background: var(--color-surface);
  z-index: 1;
  white-space: normal;
  min-width: 180px;
}
thead .pilotage-table-th-pinned {
  background: var(--color-surface-alt);
}
.pilotage-table-td-pinned {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pilotage-table-title-input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.pilotage-table-title-input:hover,
.pilotage-table-title-input:focus {
  border-color: var(--color-border);
  background: var(--color-surface-alt);
}
.pilotage-table-open-btn {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-primary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-sm);
}
.pilotage-table td select,
.pilotage-table td input[type="date"] {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.pilotage-table-td-type {
  text-align: center;
  font-size: var(--font-size-md);
}
.pilotage-table-quickadd-row .pilotage-table-td-pinned {
  background: var(--color-surface-alt);
}
.pilotage-table-quickadd-input {
  flex: 1;
  min-width: 0;
  border: 1px dashed var(--color-border);
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.pilotage-table-quickadd-input:focus {
  color: var(--color-text);
  border-style: solid;
  background: var(--color-surface);
}
/* Glisser une ligne vers un autre groupe (retour de Charles-Henri, 02/09/2026 : "basculer par
   glisser une tâche ailleurs", façon Monday) — poignée dédiée plutôt que toute la ligne, pour
   ne jamais gêner la sélection/l'édition des champs de la ligne elle-même. */
.pilotage-table-drag-handle {
  flex: none;
  cursor: grab;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  line-height: 1;
  padding: 0 2px;
}
.pilotage-table-drag-handle:active { cursor: grabbing; }
/* Surbrillance du groupe cible pendant le survol (tbody entier, pas la ligne survolée — le
   dépôt change l'appartenance au groupe, pas la position dans la liste). */
tbody.drag-over-group {
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
}
.pilotage-table-td-description {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-muted);
  cursor: pointer;
}
.pilotage-table-td-description:hover { color: var(--color-text); }
.pilotage-table-td-notes {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
}
.pilotage-table-notes-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.pilotage-table-notes-add-btn {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-primary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-sm);
  line-height: 1;
}
.pilotage-table-notes-input {
  flex: 1;
  min-width: 120px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(21, 23, 42, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  animation: fadeIn var(--transition);
}
@media (min-width: 640px) {
  .modal-overlay { align-items: center; }
}
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-5);
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 48px);
  /* Colonne flex plutôt qu'un simple overflow-y sur toute la modale : les boutons
     d'action doivent rester visibles sans avoir à descendre tout en bas du contenu
     (titre + boutons hors du scroll, seul le corps défile). */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 640px) {
  /* Modales plus larges sur PC (retour de Charles-Henri, vague 21 : "que ça prenne plus
     d'espace") — uniquement à partir de ce palier desktop/tablette : en dessous (mobile),
     `.modal` garde son `max-width: 520px` d'origine, inchangé. */
  .modal { border-radius: var(--radius-lg); max-width: 760px; }
}
@media (min-width: 1100px) {
  .modal { max-width: 900px; }
}
.modal h2 { margin: 0 0 var(--space-4); font-size: var(--font-size-lg); flex: none; }
.modal .modal-body {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.modal .modal-actions {
  display: flex;
  /* BUG corrigé (retour de Charles-Henri, 06/09/2026 : "je ne vois pas le bouton sauvegarder
     [...] la modale est légèrement trop large") — sans `flex-wrap`, une rangée de 5 boutons
     (Fermer/Copier le lien/Exporter/Supprimer/Enregistrer sur la fiche Tâche/Projet/Personne/
     Suivi) déborde largement un écran d'iPhone ; `.modal` ayant `overflow: hidden`, ce
     débordement était purement et simplement DÉCOUPÉ plutôt que scrollable — le dernier bouton
     de la rangée ("Enregistrer") disparaissait hors champ, invisible plutôt qu'accessible en
     scrollant. `flex-wrap: wrap` fait passer les boutons en trop sur une seconde ligne plutôt
     que de les faire disparaître — filet de sécurité valable pour toute modale de l'app, en
     plus du passage en icônes ci-dessous (`.btn-compact`) qui évite le plus souvent d'en avoir
     besoin sur les 4 fiches concernées. */
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  flex: none;
}
/* Boutons d'action compacts (retour de Charles-Henri, 06/09/2026 : "les boutons en bas trop
   gros, il faudrait sans doute les remplacer par des icônes") — icône + libellé tant qu'il y a
   la place, icône seule en dessous de 480px (téléphone) ; `title`/`aria-label` (voir modal.js)
   gardent le libellé complet accessible même icône seule. */
.btn-compact { padding: 8px 12px; }
.btn-compact .btn-icon { font-size: 16px; line-height: 1; }
@media (max-width: 480px) {
  .btn-compact { padding: 8px; min-width: 40px; }
  .btn-compact .btn-label { display: none; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalNudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.modal-nudge { animation: modalNudge 0.25s ease-in-out; }

/* ---------- Form fields ---------- */
.field { margin-bottom: var(--space-3); }
.field label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
}
.field textarea { resize: vertical; min-height: 70px; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

/* ---------- "Autre" repliable de la qualification Inbox (audit du 02/09/2026) ---------- */
.qualify-other {
  margin-top: var(--space-3);
}
.qualify-other > .choice-grid {
  margin-top: var(--space-2);
}
.choice-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), background var(--transition);
}
.choice-btn:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.choice-btn .emoji { font-size: 20px; }

/* ---------- Chips (filtres) ---------- */
.chip-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-4);
}
.chip {
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.chip.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* ---------- Onglets de fiche (Tâche vague 24, Projet/Personne vague 25) : "segmented control"
   façon iOS ----------
   Retour de Charles-Henri, 06/09/2026 : "les onglets Détails/Sous-étapes/Activité se
   confondent avec le reste, il faudrait qu'on voie bien que ce sont des onglets." Ce bloc
   partage volontairement `.chip-row`/`.chip` (voir kanban.js#openTaskDetail — pas de nouvelle
   classe HTML) mais les habille très différemment ici : un rail à fond gris qui contient les
   onglets, l'actif porté par une pastille à fond plein qui se déplace d'un onglet à l'autre —
   look "Réglages iPhone". Chaque onglet occupe une part égale du rail (`flex:1`) plutôt que sa
   largeur naturelle comme un chip de filtre normal.
   BUG corrigé (retour de Charles-Henri, capture d'écran, fiche Personne : le 4e onglet
   "Activité" coupé à mi-mot) : `.chip` (règle de base ci-dessus) porte `white-space: nowrap` et
   un flex item garde par défaut `min-width: auto` — un onglet ne pouvait donc jamais rétrécir
   sous la largeur de son texte non coupé. Invisible sur la fiche Tâche (3 onglets courts,
   largeur cumulée < largeur d'un iPhone), mais avec 4 onglets et un libellé plus long ("Notes &
   repères", "Sous-parties (3)"...) la somme dépassait la largeur du rail ; `.fiche-tabs` a
   `overflow-x: visible` (volontaire, pour ne jamais reproduire le bug de couplage overflow-x/y
   déjà rencontré sur `#kanban-filters`), donc rien n'y coupait le débordement — c'est le
   `overflow: hidden` du `.modal` parent qui tranchait finalement le dernier onglet en plein
   milieu. Corrigé par `min-width: 0` (autorise un onglet à rétrécir sous la rangée) et
   `white-space: normal` (le texte passe sur 2 lignes plutôt que déborder) — le rail ne défile
   toujours jamais horizontalement, il s'adapte à la place disponible. */
.fiche-tabs {
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 2px;
  overflow-x: visible;
  margin-bottom: var(--space-4);
}
.fiche-tabs .chip {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  line-height: 1.25;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  text-align: center;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.fiche-tabs .chip.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* ---------- Menu "🔧 Filtrer" (Pilotage — audit de simplification du 02/09/2026) ----------
   Regroupe casquette + projet, deux filtres secondaires qui n'ont pas besoin d'occuper deux
   rangées de chips en permanence, dans un menu replié par défaut — même mécanique <details>
   que js/components/infoTip.js, avec un panneau flottant plutôt qu'une simple expansion
   inline puisqu'il s'agit ici d'une barre d'outils, pas d'une fiche. */
/* BUG corrigé (retour de Charles-Henri, 03/09/2026 : "l'outil filtrer ouvre qqch qui n'est pas
   perceptible en dessous") — `#kanban-filters` hérite de `.chip-row` (`overflow-x: auto`), ce
   qui force le navigateur à calculer `overflow-y: auto` également (une règle CSS ne peut pas
   laisser un seul axe à `visible` si l'autre ne l'est pas). Le panneau flottant
   `.filter-popover-panel`, en position absolue à l'intérieur de cette rangée, se retrouvait donc
   DÉCOUPÉ par la hauteur de la rangée elle-même (~70px) au lieu de flotter par-dessus le reste de
   l'écran — seuls quelques pixels du haut du panneau restaient visibles, le reste nécessitant un
   scroll interne invisible pour l'œil. Cette rangée n'a par ailleurs jamais besoin de défilement
   horizontal (elle ne contient que le bouton "🔧 Filtrer", et passe déjà en `flex-wrap:wrap`) :
   corrigé en repassant `#kanban-filters` en overflow visible, pour que le panneau flotte
   normalement au-dessus du reste de la page, comme prévu dès sa conception.
   `#projects-controls` (audit du 07/09/2026, même menu "🔧 Filtrer & trier" ajouté côté Projets)
   a besoin du même correctif, pour la même raison exacte. */
#kanban-filters, #projects-controls { overflow: visible; }
.filter-popover {
  position: relative;
  flex: 0 0 auto;
}
.filter-popover > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filter-popover > summary::-webkit-details-marker,
.filter-popover > summary::marker { display: none; content: ""; }
.filter-popover[open] > summary { border-color: var(--color-primary); color: var(--color-primary); }
.filter-popover-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 11px;
  line-height: 16px;
}
.filter-popover-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.filter-popover-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.filter-popover-panel select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.filter-popover-panel .chip-row {
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* Variante "radio" du chip — même look, mais wrap un <input type="radio"/checkbox"> plutôt
   qu'un <button>, pour les choix à sélection unique dans un formulaire (ex. sens d'un Suivi). */
.chip-radio {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.chip-radio input { width: auto; margin: 0; }
.chip-radio:has(input:checked) {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* Titre de section + action associée (ex. "+ Ajouter" par bloc sur la fiche projet) */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
.section-header-row .section-title { margin-bottom: 0; }

/* ---------- Calendrier (§26) ---------- */
.cal-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cal-weekday {
  background: var(--color-surface-alt);
  text-align: center;
  padding: var(--space-2) 0;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cal-cell {
  background: var(--color-surface);
  min-height: 84px;
  padding: 4px;
  cursor: pointer;
  transition: background var(--transition);
}
.cal-cell-outside { background: var(--color-bg); color: var(--color-text-muted); }
.cal-cell-outside .cal-cell-num { opacity: 0.4; }
.cal-cell-today .cal-cell-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.cal-cell-num { font-size: var(--font-size-sm); font-weight: 600; margin-bottom: 2px; }
.cal-drop-target { background: var(--color-primary-light); }
.cal-pills { display: flex; flex-direction: column; gap: 2px; }
.cal-pill {
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--color-surface-alt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: grab;
}
.cal-more { font-size: 11px; color: var(--color-text-muted); padding-left: 4px; }
.cal-week-day-label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-3) 0 var(--space-2);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + var(--space-4));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  z-index: 60;
  box-shadow: var(--shadow-md);
  animation: toastIn var(--transition);
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast-action {
  flex: none;
  background: none;
  border: none;
  color: var(--color-text-inverse);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: var(--font-size-sm);
}

/* ---------- Retour positif à la clôture d'une tâche (piste TDAH du 01/09/2026, retour de
   Charles-Henri : un signal immédiat et visible plutôt qu'un chiffre qui change en silence
   quelque part) — toast (voir showToast ci-dessus) + petite animation, js/views/kanban.js. */
.completion-burst {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  font-size: 64px;
  z-index: 70;
  pointer-events: none;
  animation: completionBurst 0.85s ease-out forwards;
}
@keyframes completionBurst {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  70% { transform: translate(-50%, -60%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(0.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .completion-burst { animation: none; opacity: 0; }
}

/* ---------- Rubrique "🧠 Mémoire & TDAH" (demande explicite de Charles-Henri, 01/09/2026) —
   js/views/memory.js. Le cercle grandit/rétrécit avec la phase de respiration ; en cas de
   prefers-reduced-motion, seule l'opacité change (le texte du compte à rebours reste la
   source d'information principale, l'animation n'est qu'un renfort visuel). ---------- */
.breathing-circle {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color-primary-light);
  border: 2px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 600;
  transform: scale(0.85);
  transition: transform 4s ease-in-out, opacity 4s ease-in-out;
}
.breathing-circle.breathing-in { transform: scale(1.15); }
.breathing-circle.breathing-out { transform: scale(0.7); }
@media (prefers-reduced-motion: reduce) {
  .breathing-circle { transition: opacity 4s ease-in-out; transform: none; }
  .breathing-circle.breathing-in, .breathing-circle.breathing-out { transform: none; opacity: 0.7; }
}

/* ---------- Sous-étapes courtes (checklist libre par Tâche, piste TDAH du 01/09/2026, retour
   de Charles-Henri) — js/components/checklist.js. ---------- */
.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item input[type="checkbox"] { width: auto; flex: none; }
.checklist-item-text { flex: 1; min-width: 0; }
.checklist-item-text.done { text-decoration: line-through; color: var(--color-text-muted); }
.checklist-item-date { flex: none; color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; }

/* ---------- Aide contextuelle (js/components/hint.js) ---------- */
.hint-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--color-info-bg);
  color: var(--color-info);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.hint-banner-icon { flex: none; }
.hint-banner-text { flex: 1; }
.hint-banner-close {
  flex: none;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: 0 0 0 var(--space-2);
}
.hint-banner-close:hover { opacity: 1; }

/* ---------- Rappel de rythme — Revue hebdomadaire (js/views/dashboard.js) ---------- */
.review-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.review-banner button { flex: none; }

/* ---------- Aide à la demande (js/components/infoTip.js) ---------- */
.info-tip {
  display: inline-block;
  margin-left: var(--space-2);
  vertical-align: middle;
}
.info-tip > summary {
  cursor: pointer;
  list-style: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-info);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}
.info-tip > summary::-webkit-details-marker,
.info-tip > summary::marker { display: none; content: ""; }
.info-tip > summary:hover { border-color: var(--color-info); }
.info-tip-body {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-info-bg);
  color: var(--color-info);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* ---------- Santé des projets (§49, js/components/projectHealth.js) ----------
   Jauge en demi-cercle + puces de signaux par ligne de projet, du moins bon au meilleur. Repris
   de la maquette OAD publiée (concept "Détecteur de signaux faibles") — mêmes classes, mêmes
   proportions. */
.health-list { display: flex; flex-direction: column; gap: var(--space-3); }
.health-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  align-items: center;
  transition: border-color var(--transition), background var(--transition);
}
.health-row:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
@media (max-width: 560px) { .health-row { grid-template-columns: 60px 1fr; gap: var(--space-3); } }
.gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gauge-wrap svg { display: block; }
.gauge-score { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: -22px; }
.health-project-name { font-weight: 700; font-size: 14.5px; }
.health-signals { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.health-signal-chip {
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  white-space: nowrap;
}
/* Signal cliquable (retour de Charles-Henri, 07/09/2026 : ouvrir l'élément ciblé par le signal,
   pas le projet) — un léger contour au survol suffit à signaler que CE chip précis est
   cliquable, distinct du survol de toute la ligne (.health-row:hover) qui, lui, ouvre le projet. */
.health-signal-chip-clickable:hover {
  box-shadow: 0 0 0 1px currentColor inset;
}

/* ---------- Journal de notes horodaté (js/components/notesBlock.js) ---------- */
.notes-entry {
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.notes-entry-text { white-space: pre-wrap; margin-top: 2px; }