/* =========================================================================
   style-v4.css — MODULES, LOGIN, CHAT KIRK, RESPONSIVE MOBILE
   Gouverné par DESIGN.md (tokens style-base.css). Charge APRÈS les 3 autres.
   Pas de glassmorphism, pas de gradient-text, pas de side-stripe déco,
   un seul bouton primaire par carte, l'urgent est GRAND, l'archivé discret.
   ========================================================================= */

/* ---------- BOUTONS (système unifié) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.btn-primary { background: var(--comvia-blue); color: #fff; border-color: var(--comvia-blue); }
.btn-primary:hover { background: var(--comvia-blue-deep); border-color: var(--comvia-blue-deep); text-decoration: none; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); text-decoration: none; }

/* ---------- PANELS (conteneur de section) ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-raised);
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.panel-title { font-size: var(--text-lg); font-weight: var(--weight-bold); display: inline-flex; align-items: center; gap: var(--space-3); }
.panel-count {
  font-size: var(--text-sm); font-weight: var(--weight-extra); color: #fff;
  background: var(--signal-urgent); border-radius: var(--r-pill); padding: 1px 10px; line-height: 1.5;
}
.panel-count--calm { background: var(--surface-3); color: var(--text-muted); }
.panel-hint { font-size: var(--text-sm); color: var(--text-muted); }
.panel-link { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--comvia-blue); }
.panel-empty { color: var(--text-muted); font-style: italic; padding: var(--space-3) 0; }
.panel--calm { background: var(--surface-2); box-shadow: var(--shadow-flat); }

/* ---------- PILLS (priorité / statut) ---------- */
.pill {
  display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: var(--weight-bold);
  padding: 2px 9px; border-radius: var(--r-pill); letter-spacing: 0.02em; white-space: nowrap; line-height: 1.6;
}
.pr-p0 { background: var(--signal-urgent); color: #fff; }
.pr-p1 { background: var(--signal-info-soft); color: var(--comvia-blue); }
.pr-p2 { background: var(--surface-3); color: var(--text-muted); }
.pj-actif { background: var(--signal-success-soft); color: oklch(0.42 0.12 155); }
.pj-attente { background: var(--signal-urgent-soft); color: oklch(0.45 0.12 65); }
.pj-fait { background: var(--surface-3); color: var(--text-muted); }
.pj-parke { background: var(--surface-3); color: var(--text-faint); }

/* ---------- AGENT CHIP ---------- */
.agent-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text); }
.agent-chip-dot {
  width: 20px; height: 20px; border-radius: 50%; background: var(--who, var(--comvia-blue));
  color: #fff; font-size: 0.65rem; font-weight: var(--weight-bold);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.agent-chip--human .agent-chip-name { font-weight: var(--weight-bold); }

/* =========================================================================
   SIDEBAR : marque + pied utilisateur (compléments V4)
   ========================================================================= */
.sidebar-brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.sidebar-brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--comvia-blue); box-shadow: 0 0 0 4px var(--signal-info-soft); flex-shrink: 0; }
.sidebar-brand-name { font-weight: var(--weight-extra); letter-spacing: 0.04em; font-size: var(--text-md); }
.sidebar-brand-os { color: var(--comvia-gold); margin-left: 4px; }
.sidebar-user { display: flex; align-items: center; gap: var(--space-3); }
.sidebar-user-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--who, var(--comvia-blue)); color: #fff;
  font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-user-name { flex: 1; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.sidebar-logout {
  width: 32px; height: 32px; border-radius: var(--r-md); color: var(--text-muted); font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-logout:hover { background: var(--signal-error-soft); color: var(--signal-error); }

/* ---------- TOPBAR V4 (titre module + actions) ---------- */
.comvia-topbar { grid-template-columns: 1fr auto; }
.topbar-title { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-bold); font-size: var(--text-md); }
.topbar-title-icon { color: var(--comvia-blue); font-size: 1.1rem; }
.topbar-btn-plus { font-weight: var(--weight-extra); font-size: 1rem; line-height: 1; }
.topbar-btn--ghost { background: var(--surface); }
.topbar-health-label { }

/* =========================================================================
   COCKPIT
   ========================================================================= */
.contrainte {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--space-3) var(--space-5); margin-bottom: var(--space-6);
}
.contrainte-tag {
  font-size: var(--text-xs); font-weight: var(--weight-extra); text-transform: uppercase; letter-spacing: 0.08em;
  color: oklch(0.45 0.12 65); background: var(--signal-urgent-soft); padding: 2px 9px; border-radius: var(--r-sm); flex-shrink: 0;
}
.contrainte-titre { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-sm); }
.contrainte-detail { font-size: var(--text-sm); color: var(--text-muted); }

.cockpit { display: flex; flex-direction: column; }

/* Bertrand : un seul geste */
.cockpit-hero {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--signal-urgent);
  border-radius: var(--r-xl); padding: var(--space-8) var(--space-7); margin-bottom: var(--space-6);
  box-shadow: var(--shadow-raised);
}
.cockpit-hero--calm { border-color: var(--border); }
.hero-eyebrow {
  font-size: var(--text-xs); font-weight: var(--weight-extra); text-transform: uppercase; letter-spacing: 0.14em;
  color: oklch(0.45 0.12 65); margin-bottom: var(--space-3);
}
.cockpit-hero--calm .hero-eyebrow { color: var(--text-muted); }
.hero-title { font-size: var(--text-2xl); font-weight: var(--weight-extra); line-height: var(--line-tight); margin-bottom: var(--space-3); }
.hero-sub { color: var(--text-muted); font-size: var(--text-md); margin-bottom: var(--space-6); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Laura : décisions */
.panel--urgent { border-color: var(--signal-urgent); }
.decisions { display: flex; flex-direction: column; gap: var(--space-3); }
.decision {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--space-4) var(--space-5); transition: border-color var(--duration-fast) var(--ease-out);
}
.decision:hover { border-color: var(--border-strong); }
.decision--p0 { background: var(--signal-urgent-soft); border-color: var(--signal-urgent); }
.decision-main { min-width: 0; }
.decision-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 4px; }
.decision-src { font-size: var(--text-xs); color: var(--text-faint); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decision-titre { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.decision-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* Ça tourne */
.running { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.running-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.running-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.running-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.running-nom { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.running-resume { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; flex: 1; }
.running-foot { margin-top: var(--space-2); }
.running-progress { font-size: var(--text-xs); color: var(--text-faint); display: inline-flex; align-items: center; gap: 5px; }
.rp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rp-fait { background: var(--signal-success); }
.rp-encours { background: var(--signal-info); }

/* Pipeline (cockpit) */
.pipe { display: flex; flex-direction: column; gap: var(--space-2); }
.pipe-row {
  display: grid; grid-template-columns: 180px 1fr 2fr; gap: var(--space-4); align-items: center;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.pipe-cible { font-weight: var(--weight-semibold); }
.pipe-statut { font-size: var(--text-sm); color: var(--text-muted); }
.pipe-next { font-size: var(--text-sm); }
.pipe-next-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-right: 6px; }
.pipe-quand { font-weight: var(--weight-semibold); color: var(--comvia-blue); margin-left: 6px; }

/* =========================================================================
   PROJETS
   ========================================================================= */
.prj-summary { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.prj-stat {
  display: flex; flex-direction: column; align-items: center; min-width: 84px;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.prj-stat:hover { border-color: var(--border-strong); }
.prj-stat.is-active { border-color: var(--comvia-blue); box-shadow: inset 0 0 0 1px var(--comvia-blue); }
.prj-stat-num { font-size: var(--text-xl); font-weight: var(--weight-extra); line-height: 1; }
.prj-stat-lab { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; }
.prj-stat--afaire .prj-stat-num { color: var(--text-strong); }
.prj-stat--encours .prj-stat-num { color: var(--signal-info); }
.prj-stat--attente .prj-stat-num { color: oklch(0.55 0.14 65); }
.prj-stat--fait .prj-stat-num { color: var(--signal-success); }

.prj-list { display: flex; flex-direction: column; gap: var(--space-5); }
.prj-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-raised); }
.prj-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.prj-card-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.prj-card-nom { font-size: var(--text-md); font-weight: var(--weight-bold); }
.prj-card-meta { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.prj-card-resume { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-3) 0 var(--space-4); }

.taches { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.taches-empty { color: var(--text-faint); font-style: italic; font-size: var(--text-sm); }
.tache {
  display: grid; grid-template-columns: 96px 1fr auto auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
  transition: background var(--duration-base) var(--ease-out);
}
.tache-status { font-size: var(--text-xs); font-weight: var(--weight-bold); padding: 2px 8px; border-radius: var(--r-sm); text-align: center; }
.st-afaire { background: var(--surface-3); color: var(--text); }
.st-encours { background: var(--signal-info-soft); color: var(--comvia-blue); }
.st-attente { background: var(--signal-urgent-soft); color: oklch(0.45 0.12 65); }
.st-fait { background: var(--signal-success-soft); color: oklch(0.42 0.12 155); }
.tache--fait .tache-titre { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.tache-titre { font-size: var(--text-sm); font-weight: var(--weight-medium); min-width: 0; }
.tache-note { display: block; font-size: var(--text-xs); color: var(--text-faint); font-style: italic; }
.tache-assigne { }
.tache-move { display: inline-flex; gap: 4px; }
.tache-btn {
  width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.tache-btn:hover:not(:disabled) { background: var(--surface-3); }
.tache-btn:active:not(:disabled) { transform: scale(0.92); }
.tache-btn--fwd:hover:not(:disabled) { background: var(--comvia-blue); color: #fff; border-color: var(--comvia-blue); }
.tache-btn:disabled { opacity: 0.3; cursor: default; }
.tache--moving { opacity: 0.5; }
.tache--flash { animation: tacheFlash 1.2s var(--ease-out); }
@keyframes tacheFlash {
  0% { background: var(--signal-success-soft); box-shadow: inset 0 0 0 2px var(--signal-success); }
  100% { background: var(--surface-2); box-shadow: none; }
}

/* =========================================================================
   ÉQUIPE
   ========================================================================= */
.team-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
.team-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.team-chip:hover { border-color: var(--border-strong); }
.team-chip.is-active { border-color: var(--pole, var(--comvia-blue)); box-shadow: inset 0 0 0 1px var(--pole, var(--comvia-blue)); }
.team-chip-n { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-muted); background: var(--surface-3); border-radius: var(--r-pill); padding: 0 7px; }

.team-poles { display: flex; flex-direction: column; gap: var(--space-7); }
.team-pole-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.team-pole-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pole, var(--comvia-blue)); }
.team-pole-nom { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.team-pole-count { font-size: var(--text-sm); color: var(--text-muted); background: var(--surface-2); border-radius: var(--r-pill); padding: 0 10px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.agent-card {
  display: flex; align-items: center; gap: var(--space-3); text-align: left;
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.agent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); border-color: var(--pole, var(--border-strong)); }
.agent-card-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--pole, var(--comvia-blue)); color: #fff; font-weight: var(--weight-bold); font-size: var(--text-md);
  display: inline-flex; align-items: center; justify-content: center;
}
.agent-card-body { display: flex; flex-direction: column; min-width: 0; }
.agent-card-nom { font-weight: var(--weight-bold); }
.agent-card-role { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fiche latérale (drawer) */
.fiche-scrim { position: fixed; inset: 0; background: oklch(0.20 0.02 248 / 0.35); z-index: var(--z-modal); }
.fiche {
  position: fixed; top: 0; right: 0; height: 100vh; width: 380px; max-width: 92vw;
  background: var(--surface); border-left: 3px solid var(--pole, var(--comvia-blue)); box-shadow: var(--shadow-overlay);
  z-index: calc(var(--z-modal) + 1); padding: var(--space-7);
  transform: translateX(100%); transition: transform var(--duration-base) var(--ease-out);
  overflow-y: auto;
}
.fiche.is-open { transform: translateX(0); }
.fiche-close { position: absolute; top: var(--space-4); right: var(--space-4); width: 34px; height: 34px; border-radius: var(--r-md); font-size: 1.4rem; color: var(--text-muted); }
.fiche-close:hover { background: var(--surface-2); }
.fiche-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.fiche-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--pole, var(--comvia-blue)); color: #fff; font-size: var(--text-lg); font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; }
.fiche-nom { font-size: var(--text-lg); font-weight: var(--weight-extra); }
.fiche-role { color: var(--text-muted); font-size: var(--text-sm); }
.fiche-meta { margin: 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.fiche-meta > div { display: flex; flex-direction: column; gap: 2px; }
.fiche-meta dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.fiche-meta dd { margin: 0; font-size: var(--text-sm); }
.fiche-path { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); word-break: break-all; }
.fiche-cta { width: 100%; }
.fiche-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-3); text-align: center; }

/* =========================================================================
   BOÎTE
   ========================================================================= */
.inbox-decisions { display: flex; flex-direction: column; gap: var(--space-3); }
.inbox-decision { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.inbox-decision-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 4px; }
.inbox-decision-pour { font-size: var(--text-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.inbox-decision-titre { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.inbox-decision-src { font-size: var(--text-xs); color: var(--text-faint); font-family: var(--font-mono); margin-top: 2px; word-break: break-all; }
.inbox-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.inbox-file { display: flex; align-items: center; gap: var(--space-3); text-align: left; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.inbox-file:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.inbox-file-icon { font-size: 1.3rem; color: var(--comvia-blue); }
.inbox-file-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inbox-file-titre { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.inbox-file-meta { font-size: var(--text-xs); color: var(--text-faint); }
.inbox-file-go { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--comvia-blue); flex-shrink: 0; }

.viewer { border: 1px solid var(--border-strong); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-raised); }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.viewer-title { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.viewer-frame { width: 100%; height: 60vh; border: 0; background: #fff; display: block; }

/* =========================================================================
   COMMERCIAL
   ========================================================================= */
.com-cap { display: flex; align-items: center; gap: var(--space-3); background: var(--signal-urgent-soft); border-radius: var(--r-lg); padding: var(--space-3) var(--space-5); margin-bottom: var(--space-6); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-strong); }
.com-cap-tag { font-size: var(--text-xs); font-weight: var(--weight-extra); text-transform: uppercase; letter-spacing: 0.08em; color: oklch(0.45 0.12 65); }
.com-pipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.cible { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-5); box-shadow: var(--shadow-flat); }
.cible-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.cible-nom { font-size: var(--text-md); font-weight: var(--weight-bold); }
.cible-quand { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--comvia-blue); background: var(--signal-info-soft); padding: 2px 9px; border-radius: var(--r-pill); }
.cible-statut { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.cible-next { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.cible-next-label { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 2px; }
.cible-next-text { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.com-projets { display: flex; flex-direction: column; gap: var(--space-3); }
.com-projet { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.com-projet-nom { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.com-projet-resume { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }

/* =========================================================================
   IDÉES
   ========================================================================= */
.idees-capture { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); align-items: flex-start; }
.idees-input { flex: 1; padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--r-lg); font-family: inherit; font-size: var(--text-base); resize: vertical; outline: 2px solid transparent; transition: outline-color var(--duration-fast) var(--ease-out); background: var(--surface); }
.idees-input:focus { outline-color: var(--comvia-blue); }
.idees-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.idee { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-5); box-shadow: var(--shadow-flat); }
.idee-date { font-size: var(--text-xs); color: var(--text-faint); font-family: var(--font-mono); margin-bottom: var(--space-2); }
.idee-nom { font-size: var(--text-md); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.idee-extrait { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; }
.quick-idea-input { width: 100%; padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--r-md); font-family: inherit; font-size: var(--text-base); resize: vertical; }
.quick-idea-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); }
.quick-idea-hint { font-size: var(--text-xs); color: var(--text-faint); }

/* =========================================================================
   CONTENU
   ========================================================================= */
.contenu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.post { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-flat); }
.post-top { display: flex; align-items: center; justify-content: space-between; }
.post-plat { font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.post-statut { font-size: var(--text-xs); font-weight: var(--weight-bold); padding: 2px 8px; border-radius: var(--r-sm); }
.ct-prog { background: var(--signal-success-soft); color: oklch(0.42 0.12 155); }
.ct-draft { background: var(--surface-3); color: var(--text-muted); }
.ct-wait { background: var(--signal-urgent-soft); color: oklch(0.45 0.12 65); }
.ct-pub { background: var(--signal-info-soft); color: var(--comvia-blue); }
.post-titre { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.35; flex: 1; }
.post-foot { display: flex; align-items: center; justify-content: space-between; }
.post-quand { font-size: var(--text-xs); color: var(--text-faint); font-family: var(--font-mono); }
.contenu-links { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
.contenu-link { font-size: var(--text-sm); font-weight: var(--weight-semibold); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.contenu-link:hover { border-color: var(--border-strong); text-decoration: none; }

/* =========================================================================
   POULS
   ========================================================================= */
.pouls-sync { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.pouls-sync-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.pouls-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pouls-dot.is-ok { background: var(--signal-success); box-shadow: 0 0 0 3px var(--signal-success-soft); }
.pouls-dot.is-warn { background: var(--signal-urgent); box-shadow: 0 0 0 3px var(--signal-urgent-soft); }
.pouls-sync-label { font-weight: var(--weight-semibold); font-size: var(--text-sm); min-width: 130px; }
.pouls-sync-val { font-size: var(--text-sm); color: var(--text-muted); }
.pouls-git { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); background: var(--surface-2); border-radius: var(--r-md); }
.pouls-git-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.pouls-git-val { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text); word-break: break-word; }
.pouls-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); }
.pouls-counter { text-align: center; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.pouls-counter-num { display: block; font-size: var(--text-2xl); font-weight: var(--weight-extra); color: var(--comvia-blue); line-height: 1; }
.pouls-counter-lab { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }

/* =========================================================================
   LOGIN
   ========================================================================= */
body.is-login { background: linear-gradient(160deg, oklch(0.97 0.01 248), oklch(0.94 0.02 248)); }
.login-screen { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.login-card {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-overlay); padding: var(--space-8) var(--space-7);
}
.login-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.login-brand-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--comvia-blue); box-shadow: 0 0 0 5px var(--signal-info-soft); }
.login-brand-name { font-weight: var(--weight-extra); letter-spacing: 0.06em; }
.login-title { font-size: var(--text-xl); font-weight: var(--weight-extra); margin-bottom: var(--space-2); }
.login-sub { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.login-who { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-6); }
.login-who-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: var(--space-5) var(--space-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.login-who-card:hover { border-color: var(--border-strong); }
.login-who-card.is-active { border-color: var(--comvia-blue); box-shadow: inset 0 0 0 1px var(--comvia-blue); }
.login-who-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--who, var(--comvia-blue)); color: #fff; font-weight: var(--weight-bold); font-size: var(--text-lg); display: inline-flex; align-items: center; justify-content: center; }
.login-who-name { font-weight: var(--weight-bold); }
.login-who-role { font-size: var(--text-xs); color: var(--text-muted); }
.login-form { display: flex; flex-direction: column; gap: var(--space-3); }
.login-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.login-input { padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: var(--text-md); outline: 2px solid transparent; transition: outline-color var(--duration-fast) var(--ease-out); }
.login-input:focus { outline-color: var(--comvia-blue); }
.login-error { color: var(--signal-error); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.login-submit { padding: var(--space-4); background: var(--comvia-blue); color: #fff; border-radius: var(--r-md); font-weight: var(--weight-bold); font-size: var(--text-md); transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.login-submit:hover:not(:disabled) { background: var(--comvia-blue-deep); }
.login-submit:active:not(:disabled) { transform: scale(0.99); }
.login-submit:disabled { opacity: 0.6; cursor: wait; }
.login-foot { text-align: center; font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--space-6); }

/* =========================================================================
   CHAT KIRK (bouton flottant + panneau)
   ========================================================================= */
/* FAB compact (cercle) : reste dans la voie réservée à droite (voir
   .comvia-app-view padding-right desktop) → ne recouvre jamais de contenu. */
.kirk-fab {
  position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: var(--z-sticky);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 56px; height: 56px; padding: 0; border-radius: 50%;
  background: var(--comvia-blue); color: #fff; font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-overlay);
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.kirk-fab:hover { background: var(--comvia-blue-deep); transform: translateY(-2px); }
.kirk.is-open .kirk-fab { transform: scale(0); opacity: 0; pointer-events: none; }
.kirk-fab-avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.18); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: var(--text-md); }
.kirk-fab-label { display: none; }

.kirk-panel {
  position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: 400px; max-width: 100vw;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-overlay);
  z-index: var(--z-modal); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--duration-base) var(--ease-out);
}
.kirk.is-open .kirk-panel { transform: translateX(0); }
.kirk-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 2px solid var(--comvia-blue); background: linear-gradient(90deg, var(--signal-info-soft), var(--surface)); }
.kirk-head-id { display: flex; align-items: center; gap: var(--space-3); }
.kirk-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--comvia-blue); color: #fff; font-weight: var(--weight-bold); font-size: var(--text-md); display: inline-flex; align-items: center; justify-content: center; }
.kirk-name { font-weight: var(--weight-bold); }
.kirk-role { font-size: var(--text-xs); color: var(--text-muted); }
.kirk-close { width: 34px; height: 34px; border-radius: var(--r-md); font-size: 1.5rem; color: var(--text-muted); }
.kirk-close:hover { background: var(--surface-2); }
.kirk-messages { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-2); }
.kirk-empty { color: var(--text-muted); font-style: italic; text-align: center; padding: var(--space-7) var(--space-4); font-size: var(--text-sm); }
.kirk-msg { display: flex; gap: var(--space-2); align-items: flex-end; max-width: 90%; }
.kirk-msg--me { align-self: flex-end; flex-direction: row-reverse; }
.kirk-msg-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--comvia-blue); color: #fff; font-size: 0.7rem; font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kirk-bubble { padding: var(--space-3) var(--space-4); border-radius: var(--r-lg); }
.kirk-msg--kirk .kirk-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: var(--r-sm); }
.kirk-msg--me .kirk-bubble { background: var(--comvia-blue); color: #fff; border-bottom-right-radius: var(--r-sm); }
.kirk-msg--error .kirk-bubble { background: var(--signal-error-soft); border: 1px solid var(--signal-error); color: oklch(0.35 0.15 25); }
.kirk-bubble-text { font-size: var(--text-sm); line-height: 1.5; }
.kirk-bubble-text code { background: rgba(0,0,0,0.07); padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono); font-size: 0.85em; }
.kirk-msg--me .kirk-bubble-text code { background: rgba(255,255,255,0.2); }
.kirk-bubble-time { font-size: 0.62rem; opacity: 0.6; margin-top: 3px; }
.kirk-typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.kirk-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--comvia-blue); animation: kirkType 1.2s infinite; }
.kirk-typing span:nth-child(2) { animation-delay: 0.15s; }
.kirk-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes kirkType { 0%,100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.kirk-input-row { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--border); background: var(--surface); align-items: flex-end; }
.kirk-input { flex: 1; padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--r-md); font-family: inherit; font-size: var(--text-sm); resize: none; max-height: 140px; outline: 2px solid transparent; transition: outline-color var(--duration-fast) var(--ease-out); }
.kirk-input:focus { outline-color: var(--comvia-blue); }
.kirk-send { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--comvia-blue); color: #fff; font-size: 1.1rem; font-weight: var(--weight-bold); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: background var(--duration-fast) var(--ease-out); }
.kirk-send:hover:not(:disabled) { background: var(--comvia-blue-deep); }
.kirk-send:disabled { opacity: 0.5; cursor: wait; }

/* =========================================================================
   VOIE RÉSERVÉE AU FAB KIRK (desktop / tablette)
   Le bouton flottant vit dans le coin bas-droite. On réserve une bande à
   droite et en bas du conteneur scrollable = l'empreinte du FAB, pour qu'il
   ne recouvre JAMAIS de contenu interactif, quelle que soit la position de scroll.
   ========================================================================= */
@media (min-width: 769px) {
  .comvia-app-view { padding-right: 6rem; padding-bottom: 6rem; }
}

/* =========================================================================
   RESPONSIVE — MOBILE (barre d'onglets bas d'écran)
   ========================================================================= */
@media (max-width: 768px) {
  .comvia-app { grid-template-columns: 1fr; }
  .comvia-app-sidebar {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; width: 100%;
    border-right: 0; border-top: 1px solid var(--border); z-index: var(--z-topbar);
    box-shadow: 0 -2px 12px oklch(0.2 0.02 248 / 0.08);
  }
  .comvia-sidebar { flex-direction: column; height: auto; }
  .sidebar-brand { display: none; }
  .sidebar-nav {
    flex-direction: row; padding: var(--space-2) 4px; gap: 0;
    justify-content: space-around;
  }
  .sidebar-item { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 6px 2px; font-size: var(--text-xs); }
  .sidebar-item--active { background: transparent; color: var(--comvia-blue); }
  .sidebar-item--active .sidebar-icon { background: var(--signal-info-soft); }
  .sidebar-icon { font-size: 1.1rem; width: auto; padding: 3px 12px; border-radius: var(--r-pill); }
  .sidebar-label { display: block; font-size: 0.56rem; font-weight: var(--weight-semibold); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; text-align: center; }
  .sidebar-badge { position: absolute; top: -2px; right: 50%; margin-right: -22px; padding: 0 6px; font-size: 0.6rem; }
  .sidebar-footer { display: none; }

  .comvia-app-view { padding: var(--space-5) var(--space-4) 88px; }
  .comvia-topbar { grid-template-columns: 1fr auto; height: 52px; padding: 0 var(--space-4); }
  .topbar-btn-label { display: none; }
  .topbar-health-label { display: none; }

  .kirk-fab { bottom: 80px; right: var(--space-4); }
  .kirk-panel { width: 100vw; }
  .kirk.is-open .kirk-fab { display: none; }

  .pipe-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .tache { grid-template-columns: 82px 1fr auto; }
  .tache-assigne { display: none; }
  .decision { flex-direction: column; align-items: stretch; }
  .decision-actions { justify-content: flex-end; }
  .hero-title { font-size: var(--text-xl); }
  .fiche { width: 100vw; max-width: 100vw; }
}

/* Confort tablette : sidebar en rail d'icônes déjà géré par style-layout (≤1024) ;
   on garde les libellés lisibles au-dessus de 768px. */
@media (min-width: 769px) and (max-width: 1024px) {
  .comvia-app { grid-template-columns: 76px 1fr; }
  .sidebar-brand-name, .sidebar-user-name { display: none; }
  .sidebar-label { display: none; }
  .sidebar-item { justify-content: center; }
}