/* BlueBoard - feuille de style unique, sans dependance ni etape de build. */

/* Polices servies depuis ce serveur, jamais depuis Google : un lien vers
   fonts.googleapis.com enverrait l'adresse IP de chaque poste à Google à
   l'ouverture de l'application, sans base légale. */
@font-face { font-family: Figtree; font-style: normal; font-weight: 400;
  src: url("fonts/figtree-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 500;
  src: url("fonts/figtree-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 600;
  src: url("fonts/figtree-600.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 700;
  src: url("fonts/figtree-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400;
  src: url("fonts/poppins-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500;
  src: url("fonts/poppins-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600;
  src: url("fonts/poppins-600.woff2") format("woff2"); font-display: swap; }

/* Valeurs relevées sur le thème clair de monday.com (variables de leur
   feuille de style et mesures prises sur le board Prospects). */
:root {
  --font: Figtree, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-title: Poppins, Figtree, "Segoe UI", sans-serif;

  --primary: #0073ea;
  --primary-dark: #0060b9;
  --text: #323338;
  --text-soft: #676879;
  --text-faint: #b8bcc9;
  --border: #d0d4e4;      /* --layout-border-color */
  --border-strong: #c3c6d4; /* --ui-border-color */
  --bg: #f6f7fb;          /* --grey-background-color */
  --surface: #ffffff;     /* --primary-background-color */
  --surface-2: #fbfcfe;   /* fonds en creux (kanban, sous-éléments) */
  --hover: rgba(103, 104, 121, .1);  /* --primary-background-hover-color */
  --row-hover: rgba(103, 104, 121, .06);
  --accent-soft: #cce5ff; /* --primary-selected-color du thème bleu */
  --accent-line: #cbe6ff;
  --track: #eceef4;       /* rails de jauge */
  --danger: #d83a52;      /* --negative-color */
  --danger-soft: #fdeaec;
  --danger-text: #a32c3d;
  --link: #1f76c2;
  --tooltip: #323338;     /* infobulles et messages : sombres sur fond clair */

  --radius: 4px;          /* --border-radius-small : le rayon par défaut */
  --radius-md: 8px;       /* --border-radius-medium : cartes et panneaux */
  --shadow: 0 6px 20px rgba(0, 0, 0, .2);   /* --box-shadow-medium */
  --shadow-sm: 0 4px 8px rgba(0, 0, 0, .2); /* --box-shadow-small */

  --row-h: 36px;          /* hauteur d'une ligne de tableau */
  --sidebar-w: 242px;
  --rail-w: 58px;
  --topbar-h: 48px;
  --name-col-w: 260px;
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit toujours l'emporter. Sans cette règle, une simple
   déclaration d'auteur comme `.drawer { display: flex }` prend le dessus sur
   la feuille de style du navigateur, et l'élément reste affiché malgré
   `hidden` — c'est ainsi que le panneau latéral restait plaqué à droite. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font: 400 14px/20px var(--font);  /* --font-text2-normal */
}

button { font: inherit; color: inherit; cursor: pointer; }

/* ------------------------------------------------------------- barre haute */

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar-brand { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-center { flex: 1; display: flex; justify-content: center; padding: 0 16px; }

.global-search {
  width: min(420px, 100%);
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--bg);
  font: inherit;
}
.global-search:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}
@media (max-width: 720px) {
  .topbar-center { display: none; }
}

.logo {
  width: 26px; height: 26px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

.brand-name { font-weight: 700; letter-spacing: -.2px; }
.brand-sub {
  color: var(--text-soft);
  font-size: 12px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.brand-sub-block { color: var(--text-soft); font-size: 12px; }

.avatar {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: #0086c0;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}

.avatar.sm { width: 23px; height: 23px; font-size: 10px; }
.avatar.empty {
  background: #fff;
  color: var(--text-soft);
  border: 1px dashed var(--border-strong);
  font-weight: 400;
}

.bell { position: relative; font-size: 15px; }
.bell .badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 15px; height: 15px;
  display: grid; place-items: center;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

/* ------------------------------------------------------------------ layout */

.layout { display: flex; height: calc(100% - var(--topbar-h)); }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.sidebar-section { padding: 5px 0; }
.sidebar-section.grow { flex: 1; }

.sidebar-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 10px 8px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.workspace {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius);
  font-weight: 600;
}

.workspace-icon {
  width: 22px; height: 22px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 5px;
  background: linear-gradient(135deg, #a25ddc, #0073ea);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.icon-btn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }

/* --------------------------------------------- rail d'icônes (1er niveau) */

.rail {
  width: var(--rail-w);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

/* Icône puis libellé dessous, comme le rail de Monday */
.rail-btn {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
}
.rail-btn svg { width: 20px; height: 20px; fill: currentColor; }
.rail-label { font-size: 10px; line-height: 1.1; text-align: center; }
.rail-btn:hover { background: var(--hover); color: var(--text); }
.rail-btn.active { background: var(--accent-soft); color: var(--primary); }
.rail-bottom { margin-top: auto; }

.rail-badge {
  position: absolute; top: 4px; right: 16px;
  min-width: 14px; height: 14px;
  display: grid; place-items: center;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

/* ---------------------------------- en-tête et outils de la barre latérale */

.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 8px;
}
.sidebar-head-title { font-weight: 700; font-size: 15px; }

.ws-row { display: flex; gap: 6px; margin-bottom: 10px; }
.ws-add {
  width: 36px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 18px;
  line-height: 1;
}
.ws-add:hover { background: var(--hover); color: var(--primary); }

.ws-picker {
  display: flex; align-items: center; gap: 9px;
  flex: 1;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  font-weight: 600;
}
.ws-picker:hover { background: var(--hover); }
.ws-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-chevron { color: var(--text-soft); font-size: 11px; }

.sidebar-tools { display: flex; gap: 6px; margin-bottom: 10px; }

.sidebar-search-wrap { position: relative; flex: 1; min-width: 0; }
.sidebar-search-icon {
  position: absolute; left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  fill: var(--text-soft);
  pointer-events: none;
}
.sidebar-search {
  width: 100%;
  margin-bottom: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
}
.sidebar-search:focus { outline: none; border-color: var(--primary); }
.sidebar-add { flex: none; padding: 7px 10px; font-size: 13px; white-space: nowrap; }

/* Un bloc par espace de travail, cliquable pour sa vue d'ensemble */
.space { margin-bottom: 8px; }
.space-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  text-align: left;
  font-weight: 600;
}
.space-head:hover { background: var(--hover); }
.space-head.active { background: var(--accent-soft); color: var(--primary-dark); }
.space-head .label {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.space-head .count { color: var(--text-soft); font-size: 12px; font-weight: 400; }
.space-boards {
  display: flex; flex-direction: column; gap: 1px;
  margin-left: 11px;
  padding-left: 9px;
  border-left: 1px solid var(--border);
}

/* Chevron de dépliage, commun aux espaces et aux boards */
.twist {
  width: 16px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-soft);
  font-size: 9px;
  cursor: pointer;
  border-radius: 3px;
  transition: transform .12s ease;
}
.twist:hover { background: var(--border); color: var(--text); }
.twist.open { transform: rotate(90deg); }

.tree-board { display: flex; flex-direction: column; }

/* Les vues d'un board, dépliées sous lui */
.tree-views {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 1px 0 3px 24px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

.view-link {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  color: var(--text-soft);
  font-size: 13px;
}
.view-link:hover { background: var(--hover); color: var(--text); }
.view-link.active { background: var(--accent-soft); color: var(--primary-dark); font-weight: 600; }
.view-link .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-ico { font-size: 11px; opacity: .8; }

.board-list { display: flex; flex-direction: column; gap: 1px; }

/* Pages Accueil et espace : deux colonnes qui se replient */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
  align-items: start;
  padding-bottom: 20px;
}

.link-btn {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--primary-dark);
  font: inherit;
  text-align: left;
}
.link-btn:hover { text-decoration: underline; }

.board-card-title {
  border: 0; background: transparent; padding: 0;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.board-card-title:hover { color: var(--primary); text-decoration: underline; }

.card-numbers { display: flex; gap: 22px; flex-wrap: wrap; margin: 12px 0 6px; }
.card-number { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.card-bars { margin-top: 10px; }

.board-link {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  /* 32 px de haut et 4 px d'écart : pas de 36 px, comme la barre de monday. */
  height: 32px;
  margin-bottom: 4px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  text-align: left;
  color: var(--text);
}
.b-ico { width: 17px; height: 17px; flex: none; fill: var(--text-soft); }
.board-link.active .b-ico { fill: var(--primary); }
.board-link { cursor: pointer; }
.board-link:hover { background: var(--hover); }
.space-head { cursor: pointer; }
.board-link.active { background: var(--accent-soft); color: var(--primary-dark); font-weight: 600; }
.board-link .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--primary); }
.board-link .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-link .count { color: var(--text-soft); font-size: 12px; font-weight: 400; }

/* ----------------------------------------------------- dossiers latéraux */

.folder-caret {
  flex: none;
  width: 12px;
  font-size: 10px;
  color: var(--text-soft);
  transform: rotate(-90deg);
  transition: transform .12s;
}
.folder.open .folder-caret { transform: none; }
.folder-row .b-ico { fill: currentColor; }
/* Le décalage relie visuellement un board à son dossier. */
.board-link.in-folder { padding-left: 32px; }
.folder-empty { padding: 4px 10px 6px 34px; font-style: italic; }
/* Cible de dépôt : on souligne le dossier survolé pendant le glissement. */
.folder.drop-into > .folder-row {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.board-link.dragging { opacity: .45; }
#board-list.drop-root { box-shadow: inset 0 0 0 1px var(--primary); border-radius: var(--radius); }

/* Les lignes de la barre latérale se rangent au glissé : le curseur le dit,
   sinon personne ne pense à essayer. Un trait bleu montre où la ligne se
   posera — au-dessus ou en dessous de celle qu'on survole. */
.board-link[draggable="true"], .folder-row[draggable="true"] { cursor: grab; }
.board-link[draggable="true"]:active { cursor: grabbing; }
.board-link.drop-above, .folder.drop-above > .folder-row {
  box-shadow: inset 0 2px 0 var(--primary);
}
.board-link.drop-below, .folder.drop-below > .folder-row {
  box-shadow: inset 0 -2px 0 var(--primary);
}
.folder.dragging { opacity: .45; }

/* ------------------------------------------------------------ zone board */

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.board-header {
  flex: none;
  padding: 14px 16px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.board-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-chevron {
  color: var(--text-soft);
  font-size: 13px;
  padding: 2px 5px;
  border-radius: 5px;
  cursor: pointer;
}
.board-chevron:hover { background: var(--hover); color: var(--text); }

/* Actions à droite du titre : Exporter, Séquences, Automatiser, Équipe */
.board-actions { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.act-ico { font-size: 13px; }

/* Bouton principal scindé, avec sa flèche */
.split { display: inline-flex; }
.split .btn-primary:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.split-arrow {
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 8px 9px;
  border-left: 1px solid rgba(255, 255, 255, .28);
}

.board-title {
  margin: 0;
  font: 500 24px/30px var(--font-title);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 1px 5px;
}
.board-title:hover { border-color: var(--border-strong); }
.board-title:focus { border-color: var(--primary); outline: none; }

.board-desc { color: var(--text-soft); font-size: 13px; }

.board-tabs { display: flex; gap: 2px; margin-top: 12px; overflow-x: auto; }

.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 9px;
  flex: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-soft);
  font-weight: 500;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
/* Les onglets de vues sont des conteneurs (voir renderHeader) : ils doivent
   donc porter eux-mêmes l'apparence cliquable d'un bouton. */
div.tab { cursor: pointer; user-select: none; font: inherit; }
div.tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
div.tab .tab-name { user-select: text; }

/* Les onglets se réordonnent au glissé : le curseur le dit, sinon personne ne
   pense à essayer. L'onglet actif garde le curseur texte sur son nom, qui se
   renomme au clic. */
div.tab[draggable="true"] { cursor: grab; }
div.tab[draggable="true"]:active { cursor: grabbing; }
div.tab.active .tab-name { cursor: text; }

.tab-icon { font-size: 13px; opacity: .85; }
.tab-name {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 2px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-name:focus { outline: none; border-color: var(--primary); background: var(--surface); }

.tab-menu {
  color: var(--text-soft);
  font-size: 13px;
  padding: 0 2px;
  border-radius: 4px;
  line-height: 1;
}
.tab-menu:hover { background: var(--hover); color: var(--text); }

.tab-add { font-size: 17px; color: var(--text-soft); padding: 5px 11px 7px; }
.tab-add:hover { background: var(--hover); border-radius: 6px 6px 0 0; }

.toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0;
  flex-wrap: wrap;
}

.btn-primary {
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { background: var(--border-strong); cursor: not-allowed; }

.btn-ghost {
  padding: 7px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-soft);
  white-space: nowrap;
}
.btn-ghost:hover { background: var(--hover); color: var(--text); }
.btn-ghost.on { border-color: var(--primary); color: var(--primary-dark); background: var(--accent-soft); }

/* Barre d'outils : boutons discrets à icône, comme la rangée Monday */
.btn-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-soft);
  white-space: nowrap;
}
.btn-tool:hover { background: var(--hover); color: var(--text); }

/* « Archiver » porte une couleur, parce qu'il ne fait pas ce que font ses
   voisins : filtrer, trier ou masquer ne changent que l'affichage, archiver
   écrit. Le violet le distingue sans crier — il n'est ni le bleu qui ajoute,
   ni le rouge qui supprime, et archiver n'est ni l'un ni l'autre. */
.btn-archiver {
  background: #f3ecfb;
  border-color: #e0cdf5;
  color: #6b3fa0;
  font-weight: 600;
}
.btn-archiver:hover { background: #e9ddf8; color: #55317f; }
.btn-tool.on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--primary-dark);
  font-weight: 600;
}
.btn-icon { fill: currentColor; flex: none; }

.btn-split { padding-right: 14px; }

.tool-search { position: relative; display: flex; align-items: center; }
.tool-search .btn-icon {
  position: absolute; left: 9px;
  fill: var(--text-soft);
  pointer-events: none;
}

.search {
  padding: 7px 11px 7px 30px;
  width: 210px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--hover);
  font: inherit;
}
.search:focus {
  border-color: var(--primary);
  background: var(--surface);
  outline: none;
}

/* Le corps du board est LE conteneur de defilement, horizontal et vertical. */
.board-body {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 0 16px 60px;
}

/* ------------------------------------------------------- vue Tableau */

.group { margin-bottom: 22px; }

.group-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }

.group-caret {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 10px;
}
.group-caret:hover { background: var(--hover); }

.group-name {
  font: 500 18px/27px var(--font-title);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 4px;
}
.group-name:focus { outline: none; border-color: currentColor; }

.group-count { color: var(--text-soft); font-size: 12px; }
.group-sum { color: var(--text-soft); font-size: 12px; margin-left: 4px; }

.grid { width: max-content; min-width: 100%; }

.grid-row {
  display: flex;
  align-items: stretch;
  min-height: var(--row-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Un seul tableau, un seul en-tête. Il se répétait à chaque groupe : sur un
   pipeline de cinq étapes, cinq fois la même ligne. Il colle maintenant au
   haut de la zone qui défile, au-dessus de la colonne des noms qui, elle,
   colle à gauche — d'où le z-index plus élevé. */
.grid-row.head {
  color: var(--text-soft);
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 4;
}

.grid-row.item:hover { background: var(--row-hover); }
.grid-row.item.dragging { opacity: .4; }
.grid-row.item.drop-above { box-shadow: inset 0 2px 0 var(--primary); }
.grid-row.item.drop-below { box-shadow: inset 0 -2px 0 var(--primary); }

.cell {
  display: flex; align-items: center;
  padding: 0 7px;
  border-right: 1px solid var(--border);
  min-width: 0;
  overflow: hidden;
}

/* La colonne « Element » reste visible pendant le defilement horizontal. */
.cell.name {
  width: var(--name-col-w);
  flex: none;
  gap: 6px;
  padding-left: 0;
  font-weight: 500;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
}
.grid-row.item:hover .cell.name { background: var(--row-hover); }

/* Cellule de fin : absorbe la largeur restante pour que la ligne remplisse
   toute la page, quel que soit le nombre de colonnes. */
.cell.filler { flex: 1 1 auto; min-width: 30px; border-right: 0; padding: 0; }

/* Case de sélection de ligne, révélée au survol comme dans Monday */
.row-check {
  width: 18px;
  flex: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.row-check .box {
  width: 15px; height: 15px;
  display: grid; place-items: center;
  border: 2px solid var(--border-strong);
  border-radius: 3px;
  color: transparent;
  font-size: 10px;
  line-height: 1;
}
.row-check .box.on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Ligne de synthèse en bas de chaque groupe */
.grid-row.foot-row {
  min-height: 30px;
  background: transparent;
  border-bottom: 0;
  border-top: 1px solid var(--border);
}
.cell.foot { border-right-color: transparent; }
.foot-value {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.foot-label {
  display: block;
  color: var(--text-soft);
  font-size: 10px;
  text-align: right;
}
.cell.foot.numeric { flex-direction: column; align-items: flex-end; justify-content: center; }

.foot-bar {
  width: 100%;
  height: 7px;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  background: var(--track);
}
.foot-bar span { display: block; height: 100%; }

/* Barre d'actions sur sélection */
.select-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
}
/* Barre de sélection : pastille comptant les lignes cochées, puis une action
   par bouton avec son icône au-dessus du libellé, comme dans monday. */
.sel-count {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 0 12px;
  align-self: stretch;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.sel-badge {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.sel-label { font-size: 13px; line-height: 1.2; max-width: 92px; }

.sel-actions { display: flex; align-items: stretch; gap: 2px; }
.sel-act {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 62px;
  padding: 6px 8px;
  border: 0; border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 11px; line-height: 1.15; text-align: center;
}
.sel-act svg { width: 18px; height: 18px; fill: var(--text-soft); }
.sel-act:hover:not(:disabled) { background: var(--hover); }
.sel-act:hover:not(:disabled) svg { fill: var(--primary); }
.sel-act:disabled { opacity: .4; cursor: not-allowed; }
.sel-act.danger:hover { background: var(--danger-soft); color: var(--danger-text); }
.sel-act.danger:hover svg { fill: var(--danger); }

.stripe { width: 5px; align-self: stretch; flex: none; }
.grid-row.head .stripe { background: transparent; }

.cell-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: center;      /* centré, comme dans Monday */
}
/* La colonne du nom reste alignée à gauche */
/* E-mail et téléphone : un élément par ligne, et la ligne grandit pour les
   contenir. Une même personne a parfois trois boîtes — les couper après la
   première revenait à cacher les deux autres derrière des points de
   suspension. `pre-line` garde les retours à la ligne sans figer les
   espaces, ce qui laisse le texte se replier si la colonne est étroite. */
.cell-text.multiligne {
  white-space: pre-line;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.45;
}

.cell.name .cell-text { text-align: left; }
.grid-row.head .cell { justify-content: center; }
.grid-row.head .cell.name { justify-content: flex-start; }
.grid-row.head .col-title { flex: 0 1 auto; text-align: center; }
.grid-row.head .cell.name .col-title { flex: 1; text-align: left; }
/* Au survol, une cellule éditable se signale : bordure légère et curseur
   texte. Sans cela, rien ne distingue une case qu'on peut remplir d'une case
   en lecture seule. */
.grid-row.item .cell-text[contenteditable] { cursor: text; }
.grid-row.item .cell-text[contenteditable]:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}
.cell-text:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
  background: #fff;
}

.cell.numeric { justify-content: flex-end; }
.cell.numeric .cell-text { text-align: right; }
.cell .unit { flex: none; padding-left: 3px; color: var(--text-soft); font-size: 12px; }

.drag-handle {
  width: 12px;
  flex: none;
  align-self: stretch;
  display: grid; place-items: center;
  color: var(--text-faint);
  font-size: 10px;
  cursor: grab;
  opacity: 0;
}
.grid-row.item:hover .drag-handle { opacity: 1; }

/* Statut : la couleur remplit la cellule bord à bord, sans arrondi ni marge.
   C'est la signature visuelle de la grille monday, relevée sur leur board. */
.status-pill {
  width: 100%;
  height: 100%;
  min-height: var(--row-h);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-pill.blank { background: #c4c4c4; }

/* ------------------------------------------- habillages d'étiquette

   Le fond plein reste la règle, et toutes les étiquettes existantes le
   gardent. Les quatre autres servent là où une colonne mélange des étapes et
   des issues : tout mettre en fond coloré donne un mur où plus rien ne se
   détache.

   Ces classes valent partout où une étiquette s'affiche — la grille, la
   fiche, le menu de choix — parce qu'elles viennent toutes de la même
   fonction `habillage()`. */

/* Sans couleur : l'étape de départ, celle qui n'appelle aucune attention. */
.et-neutre {
  background: var(--bg, #f6f7fb);
  color: var(--text, #323338);
  box-shadow: inset 0 0 0 1px var(--border, #e6e9ef);
}

/* Cadre coloré, texte noir : quelque chose est parti, on attend la suite. */
.et-contour {
  background: #fff;
  color: #323338;
  box-shadow: inset 0 0 0 2px var(--et, #c4c4c4);
}

/* Fond blanc, texte coloré : plus léger encore qu'un cadre. */
.et-texte {
  background: #fff;
  color: var(--et, #323338);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--border, #e6e9ef);
}

/* Barré : l'affaire ne se fera pas, la ligne reste lisible sans peser. */
.et-raye {
  background: #fff;
  color: var(--text-muted, #676879);
  text-decoration: line-through;
  box-shadow: inset 0 0 0 1px var(--border, #e6e9ef);
}

/* Dans un menu ou une fiche, l'étiquette est un morceau de texte et non une
   cellule pleine largeur : elle a besoin de ses propres marges. */
.popover-item .et-neutre, .popover-item .et-contour,
.popover-item .et-texte, .popover-item .et-raye, .popover-item .et-plein {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.popover-item .et-plein { color: #fff; }

/* Une puce qui porte une étiquette prend ses couleurs, et abandonne celles de
   la puce : sans ça, le cadre gris et le texte bleu de « .chip » se
   superposaient au fond coloré, et une étiquette foncée devenait illisible.

   Les habillages posent leur propre contour en « box-shadow », donc la
   bordure de la puce n'a plus lieu d'être. */
.chip.et-plein, .chip.et-neutre, .chip.et-contour,
.chip.et-texte, .chip.et-raye {
  border-color: transparent;
  background: transparent;
}
.chip.et-plein { color: #fff; }
.chip.et-neutre { background: var(--bg, #f6f7fb); color: var(--text); }
.chip.et-contour { background: #fff; color: #323338; }
.chip.et-texte { background: #fff; color: var(--et, #323338); }
.chip.et-raye { background: #fff; color: var(--text-muted, #676879); }
/* La cellule ne garde aucune marge : sinon la couleur s'arrête avant le bord. */
.cell.status-cell { padding: 0; }

.person-btn { border: 0; background: transparent; padding: 2px; border-radius: 50%; }
.person-btn:hover { background: var(--hover); }

/* Colonne « personnes » : avatars accolés, comme dans Monday. */
.people-stack { display: flex; align-items: center; border-radius: 12px; }
.people-stack .avatar.sm { margin-right: -6px; border: 2px solid var(--surface); }
.people-stack .avatar.sm:last-child { margin-right: 0; }

/* Mini-grille des sous-éléments, encadrée comme dans Monday */
.sub-grid {
  margin: 2px 0 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
}
.sub-grid .grid-row { background: var(--surface-2); }
.sub-grid .grid-row.head { background: var(--surface-2); }
.sub-grid .cell.name { background: var(--surface-2); }
.sub-grid .grid-row.item:hover,
.sub-grid .grid-row.item:hover .cell.name { background: var(--row-hover); }
.sub-grid .grid-row:last-child { border-bottom: 0; }

/* Sous-éléments */
.grid-row.item.sub { background: var(--surface-2); }
.grid-row.item.sub:hover { background: var(--row-hover); }
.grid-row.item.sub .cell.name { background: var(--surface-2); font-weight: 400; }
.grid-row.item.sub:hover .cell.name { background: var(--row-hover); }
.sub-indent { width: 20px; flex: none; }
.caret-space { width: 20px; flex: none; }
.add-row .sub-indent { width: 20px; }

.sub-badge {
  flex: none;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--track);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
}

/* Fil d'activité */
.act { display: flex; gap: 9px; padding: 9px 0; border-top: 1px solid var(--border); }
.act .grow { flex: 1; }
.act .from { color: var(--text-soft); text-decoration: line-through; }
.act .to { font-weight: 600; }

.date-cell, .timeline-cell {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.date-cell:hover, .timeline-cell:hover { border-color: var(--border-strong); }
.date-cell.empty, .timeline-cell.empty { color: var(--text-faint); }
.date-cell.late { color: var(--danger); font-weight: 600; }

.tags-cell {
  flex: 1;
  display: flex; align-items: center; gap: 3px;
  /* Centrées comme les pastilles de statut, qui l'étaient déjà : une colonne
     d'étiquettes alignée à gauche à côté d'une colonne centrée donne une
     grille qui louche.

     « safe center » et non « center » : quand les puces débordent de la
     cellule, centrer rognerait les deux bouts et on ne lirait plus le début.
     Le mot-clé fait retomber sur un alignement à gauche dans ce cas. Les
     navigateurs qui ne le connaissent pas gardent la ligne du dessus. */
  justify-content: center;
  justify-content: safe center;
  flex-wrap: nowrap;
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 4px 2px;
  min-height: var(--row-h);
}
.tag {
  padding: 2px 7px;
  border-radius: 11px;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex: none;
}
.tags-cell.empty { color: var(--text-faint); }

.check-cell {
  flex: 1;
  display: grid; place-items: center;
  border: 0; background: transparent;
  min-height: var(--row-h);
  font-size: 15px;
}
.check-cell .box {
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border: 2px solid var(--border-strong);
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
}
.check-cell .box.on { background: var(--primary); border-color: var(--primary); }

/* Note en étoiles */
.rating-cell { flex: 1; display: flex; justify-content: center; gap: 1px; }
.star {
  border: 0; background: transparent; padding: 0 1px;
  color: var(--border-strong); font-size: 15px; line-height: 1;
}
.star.on { color: #fdab3d; }
.star:hover:not(:disabled) { color: #ffc46b; }

/* Vote */
.vote-cell {
  flex: 1;
  min-height: var(--row-h);
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
}
.vote-cell.on { color: var(--primary-dark); font-weight: 600; background: var(--accent-soft); }
.vote-cell:hover:not(:disabled) { background: var(--hover); }

/* Colonne bouton : un bouton plein, coloré, sur toute la cellule */
.cell.btn-cell { padding: 0 6px; }
.cell-action {
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-action:hover:not(:disabled) { filter: brightness(1.08); }
.cell-action:disabled { opacity: .5; }

/* Calendrier des activités : des marques, puis un + */
.act-strip { flex: 1; display: flex; align-items: center; gap: 2px; }
.act-mark {
  width: 5px; height: 15px;
  border-radius: 2px;
  background: var(--border-strong);
}
.act-add {
  width: 18px; height: 18px;
  margin-left: 3px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
}
.act-add:hover { background: var(--hover); color: var(--primary); }

.progress-cell {
  flex: 1;
  display: flex; align-items: center; gap: 6px;
  border: 0; background: transparent;
  padding: 0 2px;
  min-height: var(--row-h);
}
.progress-track {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--track);
  overflow: hidden;
}
.progress-fill { height: 100%; background: var(--primary); border-radius: 4px; }
.progress-value { color: var(--text-soft); font-size: 11px; width: 30px; text-align: right; }

.formula-cell {
  flex: 1;
  text-align: right;
  padding: 6px 4px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.formula-cell.neg { color: var(--danger); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--primary-dark);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip:hover { background: var(--accent-soft); }

/* Les profils rattachés à une ligne : des noms, donc plus longs qu'une
   étiquette. On leur laisse la largeur de la cellule et on coupe proprement
   plutôt que de déborder — l'infobulle porte la liste entière. */
.chip-lies {
  max-width: 100%;
  display: inline-block;
  text-align: left;
  font-size: 12px;
}

.connect-cell, .files-cell {
  flex: 1;
  display: flex; align-items: center; gap: 4px;
  overflow: hidden;
  border: 0; background: transparent;
  padding: 4px 2px;
  min-height: var(--row-h);
  color: var(--text-faint);
}

.add-row {
  display: flex; align-items: center;
  min-height: var(--row-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.add-row .stripe { background: transparent; }
.add-input {
  width: var(--name-col-w);
  border: 0;
  background: transparent;
  padding: 8px 4px;
  font: inherit;
  color: var(--text);
}
.add-input::placeholder { color: var(--text-faint); }
.add-input:focus { outline: none; }

.add-col-btn {
  width: 34px;
  flex: none;
  display: grid; place-items: center;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-soft);
  font-size: 15px;
}
.add-col-btn:hover { background: var(--hover); color: var(--primary); }

.col-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-weight: 500;
}
.col-title:focus { outline: none; border-color: var(--primary); }

.col-menu {
  border: 0; background: transparent; color: var(--text-soft);
  padding: 0 2px; border-radius: 4px; opacity: 0;
  flex: none;
}
.cell:hover .col-menu { opacity: 1; }
.col-menu:hover { background: var(--hover); }

.col-resize {
  width: 5px;
  flex: none;
  align-self: stretch;
  cursor: col-resize;
  margin-right: -7px;
}
.col-resize:hover { background: var(--primary); }

/* Pendant un glissement, le curseur ne doit pas changer selon ce qui passe
   sous la souris, et rien ne doit se sélectionner : sans ça, tirer une colonne
   surligne la moitié du tableau. */
body.resizing { cursor: col-resize; user-select: none; }
body.resizing * { cursor: col-resize !important; }

/* La poignée de la colonne des noms est collée au bord droit de la cellule.
   Elle est sticky et se superpose aux colonnes suivantes : sans ce décalage,
   la poignée passerait sous elles et resterait inattrapable. */
.grid-row.head .cell.name .col-resize { margin-right: -2px; }

/* ---------------------------------------------------------- vue Kanban */

.kanban { display: flex; gap: 12px; align-items: flex-start; padding-top: 4px; }

.kanban-col {
  width: 250px;
  flex: none;
  background: var(--track);
  border-radius: 10px;
  padding: 9px;
}
.kanban-col.drop-target { outline: 2px dashed var(--primary); outline-offset: 2px; }

.kanban-head {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 4px 9px;
  font-weight: 600;
}
.kanban-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.kanban-head .count { margin-left: auto; color: var(--text-soft); font-size: 12px; }

.kanban-card {
  background: var(--surface);
  border-radius: 8px;
  border-left: 4px solid var(--border-strong);
  padding: 9px 10px;
  margin-bottom: 7px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  cursor: grab;
}
.kanban-card:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, .12); }
.kanban-card.dragging { opacity: .45; }
.kanban-card .card-title { font-weight: 600; margin-bottom: 6px; }
.kanban-card .card-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  color: var(--text-soft); font-size: 12px;
}
.kanban-card .card-group { display: flex; align-items: center; gap: 5px; }
.kanban-empty { color: var(--text-soft); font-size: 12px; padding: 5px 4px 9px; }

/* -------------------------------------------------------- vue Calendrier */

.calendar { padding-top: 4px; width: 100%; }

.cal-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.cal-month { font-size: 16px; font-weight: 700; text-transform: capitalize; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cal-dow {
  background: var(--surface);
  padding: 7px 8px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.cal-day {
  background: var(--surface);
  min-height: 92px;
  padding: 5px 6px;
}
.cal-day.other { background: var(--surface-2); color: var(--text-faint); }
.cal-day.today .cal-daynum {
  background: var(--primary); color: #fff;
  border-radius: 50%; width: 20px; height: 20px;
  display: grid; place-items: center;
}
.cal-daynum { font-size: 12px; font-weight: 600; margin-bottom: 4px; }

.cal-event {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-left: 3px solid var(--primary);
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--text);
  padding: 2px 5px;
  margin-bottom: 3px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-event:hover { filter: brightness(.96); }

/* ------------------------------------------------------- vue Chronologie */

.timeline-view { padding-top: 4px; }

.tl-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.tl-inner { min-width: max-content; background: var(--surface); }

.tl-months { display: flex; border-bottom: 1px solid var(--border); }
.tl-corner {
  width: 230px; flex: none;
  padding: 7px 10px;
  border-right: 1px solid var(--border);
  color: var(--text-soft); font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  position: sticky; left: 0; background: var(--surface); z-index: 2;
}
.tl-month {
  flex: none;
  padding: 7px 8px;
  border-right: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.tl-row { display: flex; border-bottom: 1px solid var(--border); min-height: 32px; }
.tl-row:hover { background: var(--row-hover); }
.tl-label {
  width: 230px; flex: none;
  padding: 7px 10px;
  border-right: 1px solid var(--border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  position: sticky; left: 0; background: var(--surface); z-index: 2;
}
.tl-row:hover .tl-label { background: var(--row-hover); }
.tl-track { flex: 1; position: relative; min-height: 32px; }
.tl-bar {
  position: absolute; top: 7px; height: 17px;
  border-radius: 9px;
  border: 0;
  color: #fff;
  font-size: 10px;
  padding: 0 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}
.tl-grid-line {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border);
}

/* ------------------------------------------------ vue Tableau de bord */

.dash { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; align-items: flex-start; }

.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 230px;
}
.widget.wide { flex: 1 1 380px; }
.widget-title {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 10px;
}
.kpi { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.kpi-sub { color: var(--text-soft); font-size: 12px; margin-top: 2px; }

.bar-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.bar-label {
  width: 120px; flex: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px;
}
.bar-track { flex: 1; height: 16px; background: var(--track); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; }
.bar-value { width: 34px; flex: none; text-align: right; font-size: 12px; color: var(--text-soft); }

.donut-wrap { display: flex; align-items: center; gap: 16px; }
.donut-legend { font-size: 12px; }
.donut-legend div { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }

/* ------------------------------------------- graphique et charge de travail */

/* Les filtres du graphique tiennent sur une seule ligne, au-dessus du tracé. */
.viz-controls {
  display: flex; align-items: flex-end; gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0 16px;
}
.viz-ctl {
  display: flex; flex-direction: column; gap: 4px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
}
.viz-ctl .field-input { width: 210px; font-weight: 400; color: var(--text); }

/* Le graphique occupe la largeur disponible. */
.viz { width: 100%; padding-bottom: 2px; }

.viz-row {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 0;
}
.viz-label {
  width: 165px; flex: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px;
}
.viz-track { flex: 1; min-width: 0; display: flex; }
/* Marque fine, extrémité arrondie côté données, ancrée à la ligne de base. */
.viz-bar {
  height: 14px;
  border-radius: 0 4px 4px 0;
  transition: width .18s ease;
}
.viz-value {
  width: 110px; flex: none;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
/* Ligne de base en filet, jamais en pointillés. */
.viz-baseline { height: 1px; background: var(--border-strong); margin-left: 175px; }

.viz-note {
  max-width: 620px;
  margin-top: 12px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.5;
}

.viz-table { border-collapse: collapse; font-size: 13px; background: var(--surface); }
.viz-table th, .viz-table td {
  padding: 7px 14px 7px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.viz-table th { color: var(--text-soft); font-size: 11px; text-transform: uppercase; }
.viz-table td.num, .viz-table th:not(:first-child) { text-align: right; }
.viz-swatch {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; margin-right: 7px;
}

.heat-legend { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.heat-swatch { width: 17px; height: 12px; border-radius: 2px; }

.heat-cell {
  flex: none;
  display: grid; place-items: center;
  border-right: 1px solid var(--border);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-height: 32px;
}
.heat-cell .on-dark { color: #fff; font-weight: 600; }
.heat-cell.total { color: var(--text-soft); font-weight: 600; }

/* Infobulle commune aux deux vues. */
.viz-tip {
  position: fixed;
  z-index: 70;
  max-width: 320px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--tooltip);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: var(--shadow);
}

/* -------------------------------------------------------------- panneau */

.drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .28); z-index: 40; }

/* Ouvert depuis la fiche d'un élément (44/45), le panneau doit passer
   au-dessus d'elle. On reste sous les bulles et les messages (55 et plus),
   qui peuvent eux-mêmes s'ouvrir depuis le panneau. */
.drawer-overlay.au-dessus { z-index: 47; }
.drawer.au-dessus { z-index: 48; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(540px, 100vw);
  background: var(--surface);
  box-shadow: -4px 0 24px rgba(0, 0, 0, .16);
  z-index: 41;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* L'en-tête reste en place : le bouton de fermeture ne défile jamais hors vue. */
.drawer-head {
  flex: none;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 16px 11px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.drawer-head .row { display: flex; align-items: flex-start; gap: 10px; }

.drawer-title {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 2px 5px;
}
.drawer-title:focus { outline: none; border-color: var(--primary); }

/* Cible large et toujours atteignable : c'est le seul moyen de fermer un
   panneau plein écran, où il n'y a plus de fond à cliquer. */
.close-btn {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  font-size: 24px;
  line-height: 1;
}
.close-btn:hover { background: var(--hover); color: var(--text); }
.close-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Sous-onglets de la fiche : Champs / Commentaires / Fichiers / Activité */
.drawer-tabs {
  display: flex;
  gap: 2px;
  margin: 10px -16px -11px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.drawer-tab {
  padding: 8px 11px 9px;
  flex: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-soft);
  font-weight: 500;
  white-space: nowrap;
}
.drawer-tab:hover { color: var(--text); }
.drawer-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px 30px; }

.field { margin-bottom: 12px; }
.field-label {
  display: block;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.field-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
}
.field-input:focus { outline: none; border-color: var(--primary); }
textarea.field-input { min-height: 72px; resize: vertical; }

.field-row { display: flex; gap: 8px; }
.field-row > * { flex: 1; min-width: 0; }

.drawer-section-title {
  margin: 20px 0 9px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-soft);
}

.update { display: flex; gap: 9px; padding: 9px 0; border-top: 1px solid var(--border); }
.update .body { flex: 1; min-width: 0; }
.update .meta { color: var(--text-soft); font-size: 12px; margin-top: 2px; }

/* Corriger ou retirer un commentaire. Les deux boutons n'apparaissent qu'au
   survol du sien : un fil de discussion n'a pas à être bordé de croix. */
.update-gestes { flex: none; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.update:hover .update-gestes,
.update-gestes:focus-within { opacity: 1; }

.update-edition { display: flex; gap: 6px; align-items: center; }
.update-edition .field-input { flex: 1; min-width: 0; }

.danger-link { border: 0; background: transparent; color: var(--danger); padding: 4px 0; font-weight: 500; }
.danger-link:hover { text-decoration: underline; }

.list-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.list-row .grow { flex: 1; min-width: 0; }
.list-row .sub { color: var(--text-soft); font-size: 12px; }

.rule {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.rule.off { opacity: .55; }
.rule-text { line-height: 1.5; }
.rule-text b { color: var(--primary-dark); }
.rule-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 12px;
}

.notif {
  display: flex; gap: 9px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.notif.unread { font-weight: 600; }
.notif .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); margin-top: 6px; flex: none; }
.notif.read .dot { background: transparent; }

/* ------------------------------- fiche d'un élément : modale centrée */

.item-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 44;
}

.item-modal {
  position: fixed;
  inset: 32px;              /* marge relevée sur la fiche monday */
  z-index: 45;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
  overflow: hidden;
}

.im-head { flex: none; padding: 16px 20px 0; }
.im-title-row { display: flex; align-items: center; gap: 12px; }
.im-title {
  flex: 1;
  min-width: 0;
  font: 500 24px/36px var(--font-title);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 6px;
}
.im-title:focus { outline: none; border-color: var(--primary); }
.im-actions { display: flex; align-items: center; gap: 4px; }
.im-nav {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 11px;
}
.im-nav:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.im-nav:disabled { opacity: .4; cursor: not-allowed; }

.im-tabs {
  display: flex; gap: 2px;
  margin-top: 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

/* Bandeau de résumé : ce qu'on vient lire, avant d'avoir cherché.
   Il se range en colonnes égales et passe à la ligne plutôt que de
   rétrécir ses libellés, qui deviendraient illisibles. */
.im-resume {
  display: flex; flex-wrap: wrap; gap: 0 28px;
  margin-top: 12px;
  padding-left: 6px;
}
.im-resume-case { min-width: 0; padding: 6px 0; }
.im-resume-cle {
  font-size: 11px;
  color: var(--text-soft);
  margin-bottom: 3px;
}
.im-resume-val {
  font-size: 14px;
  line-height: 20px;
  max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-resume-val .tag { font-size: 12px; }

/* Les champs vides, repliés. Le triangle natif de <summary> suffit :
   une flèche dessinée à la main serait un composant de plus à maintenir. */
.im-vides { margin-top: 18px; border-top: 1px solid var(--border); }
.im-vides > summary {
  padding: 12px 0 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
}
.im-vides > summary:hover { color: var(--text); }

/* Deux colonnes : activités à gauche, champs à droite */
.im-body { flex: 1; display: flex; min-height: 0; }
.im-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}
.im-toolbar {
  flex: none;
  display: flex; align-items: center; gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.im-feed { flex: 1; overflow-y: auto; padding: 14px 16px 24px; }
.im-side {
  width: 444px;             /* largeur relevée sur la fiche monday */
  flex: none;
  overflow-y: auto;
  padding: 14px 16px 24px;
  background: var(--surface-2);
}
.im-side .field-label { font-size: 11px; text-transform: none; }

@media (max-width: 980px) {
  .item-modal { width: 100vw; height: 100vh; border-radius: 0; }
  .im-body { flex-direction: column; }
  .im-main { border-right: 0; border-bottom: 1px solid var(--border); }
  .im-side { width: 100%; }
}

/* -------------------------------------------------------------- popover */

.popover {
  position: fixed;
  z-index: 60;
  min-width: 210px;
  max-height: 330px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.popover-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
}
.popover-item:hover { background: var(--hover); }
.popover-item.on { background: var(--accent-soft); color: var(--primary-dark); font-weight: 600; }
.popover-item .swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.popover-sep { height: 1px; background: var(--border); margin: 5px 2px; }
.popover-label {
  padding: 6px 10px 4px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.empty-state { padding: 50px 20px; text-align: center; color: var(--text-soft); }

.toast {
  position: fixed; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex; align-items: center; gap: 10px;
  max-width: min(560px, calc(100vw - 24px));
  padding: 10px 8px 10px 16px;
  border-radius: 8px;
  background: var(--tooltip);
  color: #fff;
  box-shadow: var(--shadow);
  font-size: 13px;
}
.toast-close {
  width: 26px; height: 26px;
  flex: none;
  display: grid; place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: 17px;
  line-height: 1;
}
.toast-close:hover { background: rgba(255, 255, 255, .16); }

/* Tableau de bord : grands compteurs et entonnoir */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  padding-bottom: 20px;
}
.dash-grid .widget.full { grid-column: 1 / -1; }
.kpi-huge {
  padding: 18px 0 10px;
  font-size: 52px;
  font-weight: 300;
  letter-spacing: -1.5px;
  text-align: center;
}

.funnel { padding: 6px 0 4px; }
.funnel-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.funnel-label {
  width: 130px; flex: none;
  font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.funnel-bar-wrap { flex: 1; min-width: 0; }
.funnel-bar {
  display: block;
  min-width: 26px;
  height: 26px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
}
.funnel-total {
  width: 120px; flex: none; text-align: right;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-soft);
}

/* Éditeur de formulaire */
.form-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
  align-items: start;
  padding-bottom: 20px;
}
.form-field-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.form-field-row:last-child { border-bottom: 0; }

/* Formulaire public */
.form-card { width: 480px; }
.form-card .req { color: var(--danger); }
.form-privacy {
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--hover);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.5;
}
.form-done {
  width: 46px; height: 46px;
  margin: 10px auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #00c875;
  color: #fff;
  font-size: 24px;
}

/* Icône de conversation après le nom d'un élément */
.note-btn {
  width: 22px; height: 20px;
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-soft);
}
.note-btn svg { width: 13px; height: 13px; fill: currentColor; }
.note-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Ouvrir la fiche. Jusqu'ici la bulle des mises à jour était le seul moyen
   d'ouvrir un élément depuis la grille, et elle tombait toujours sur cet
   onglet-là — le plus souvent vide. Le bouton n'apparaît qu'au survol de sa
   ligne : visible quand on le cherche, absent le reste du temps. */
.ouvrir-btn { opacity: 0; transition: opacity .12s; }
.grid-row:hover .ouvrir-btn,
.ouvrir-btn:focus-visible { opacity: 1; }

/* Compteurs des actions d'en-tête : « Automatiser / 5 » */
.count-pill { color: var(--text-faint); font-weight: 400; }
.btn-tool.invite { border: 1px solid var(--border-strong); }

/* Menu ··· d'un board dans la barre latérale */
.board-dots {
  flex: none;
  padding: 0 4px;
  border-radius: 4px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1;
  opacity: 0;
}
.board-link:hover .board-dots { opacity: 1; }
.board-dots:hover { background: var(--border); color: var(--text); }

/* Légende des teintes d'échéance : sans elle, le lecteur devine ce que
   veulent dire les couleurs, et devine parfois de travers. */
/* La bande d'un groupe, quand la vue demande de les séparer : son titre, son
   compte, sa case de sélection. Elle tient sur une ligne du tableau au lieu
   d'ouvrir un bloc a part, et reste collée à gauche pendant le défilement. */
.grid-row.bande {
  min-height: 34px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.grid-row.bande + .grid-row.bande { border-top: 0; }
.grid-row.head + .grid-row.bande { border-top: 0; }
.grid-row.foot-row + .grid-row.bande,
.add-row + .grid-row.bande { border-top: 10px solid var(--bg); }

.bande-contenu {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 7px 0 4px;
  background: var(--surface);
}
.grid-row.bande .group-name { font: 500 15px/22px var(--font-title); }

/* -------------------------------------------------- point de fin de mois */

.fdm-bandeau {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid #e0cdf5;
  border-radius: var(--radius);
  background: #f7f2fd;
  color: #4a2d72;
}
.fdm-ico { font-size: 16px; }

.fdm-bloc { margin-bottom: 22px; }
.fdm-titre { font: 500 16px/1.3 var(--font-title); }
.fdm-titre .sub { font-size: 12px; margin-left: 6px; }
.fdm-aide { display: block; margin: 3px 0 9px; max-width: 70ch; }

.fdm-ligne {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 6px;
  cursor: pointer;
}
.fdm-ligne:hover { background: var(--hover); }
.fdm-ligne.on { border-color: var(--accent-line); background: var(--accent-soft); }
.fdm-ligne input { margin-top: 3px; }
.fdm-ligne .sub { margin-top: 2px; }

/* Une ligne à trancher ne se coche pas : elle pose une question et offre
   deux réponses. Le curseur reste une flèche — rien ne se déclenche en
   cliquant à côté des boutons. */
.fdm-ligne.fdm-question { cursor: default; align-items: center; gap: 8px; }
.fdm-ligne.fdm-question:hover { background: var(--surface); }

.lien-sobre {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--primary-dark);
  font-size: inherit;
  text-decoration: underline;
}

/* ------------------------------------------------------ page Archives */

.archives-page { padding: 4px 0 40px; }

/* Le calendrier : une année par ligne, douze mois. Les mois vides restent
   affichés et gris — un creux est une information autant qu'un plein. */
.arch-annee { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.arch-annee-nom {
  width: 52px;
  flex: none;
  padding-top: 7px;
  font: 600 13px/1 var(--font-title);
  color: var(--text-soft);
}
.arch-mois-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(56px, 1fr));
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.arch-mois {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  font-size: 11px;
  color: var(--text);
}
.arch-mois b { font-size: 13px; color: var(--primary-dark); }
.arch-mois:hover { background: var(--hover); }
.arch-mois.on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  font-weight: 600;
}
/* Un mois sans rien reste cliquable — c'est ainsi qu'on vérifie qu'il est
   vide au lieu de le supposer — mais il s'efface. */
.arch-mois.creux {
  border-color: transparent;
  background: transparent;
  color: var(--text-faint);
}
.arch-mois.creux b { color: var(--text-faint); font-weight: 400; }
.arch-mois.creux:hover { background: var(--hover); color: var(--text-soft); }

.arch-titre-mois {
  margin: 18px 0 8px;
  font: 500 16px/1.3 var(--font-title);
}
.arch-titre-mois .sub { font-size: 12px; margin-left: 6px; }

.arch-liste {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.arch-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.arch-ligne:last-child { border-bottom: 0; }
.arch-nom {
  flex: 1; min-width: 0;
  font-weight: 500;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
}
.arch-nom:hover { color: var(--primary-dark); text-decoration: underline; }

/* Une fiche rangée, quand le tableau accepte de les montrer : elle reste
   lisible et modifiable, mais on voit qu'elle n'est plus en jeu. */
.grid-row.item.rangee { background: var(--bg); }
.grid-row.item.rangee .cell.name { background: var(--bg); }
.grid-row.item.rangee .cell-text,
.grid-row.item.rangee .cell-txt { opacity: .72; }
.arch-tableau { width: 180px; flex: none; color: var(--text-soft); font-size: 12px; }
.arch-date {
  width: 84px; flex: none;
  color: var(--text-soft); font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Les profils positionnés, sous leur appel d'offres. Le décalage et le filet
   disent l'appartenance sans qu'on ait à l'écrire sur chaque ligne. */
.arch-enfants {
  padding-left: 22px;
  border-left: 3px solid var(--accent-line);
  margin-left: 12px;
  background: var(--bg);
}
.arch-enfants-titre { padding: 6px 12px 2px; font-size: 11px; }
.arch-ligne.dessous { padding-left: 4px; }
.arch-ligne.dessous .arch-nom { font-weight: 400; }

/* La légende des étapes, au-dessus du tableau. Depuis que les fiches se
   suivent sans bande de titre, c'est elle qui nomme les couleurs portées par
   le trait de gauche — et c'est aussi par elle qu'on saute d'une étape à
   l'autre. */
.legende-groupes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
}
.legende-etape {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  color: var(--text);
}
.legende-etape:hover { background: var(--hover); }
.legende-etape .pastille {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
}
.legende-etape .sub { font-size: 11px; }

.legende-echeance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-soft);
}
.legende-echeance span {
  padding: 2px 8px;
  border-radius: 4px;
}

/* Les colonnes se déplacent au glissé, comme les onglets et la barre
   latérale. Le curseur l'annonce, un trait bleu montre où la colonne se
   posera. Le titre garde le curseur texte : il se renomme au clic. */
.grid-row.head .cell[draggable="true"] { cursor: grab; }
.grid-row.head .cell[draggable="true"]:active { cursor: grabbing; }
.grid-row.head .cell .col-title[contenteditable] { cursor: text; }
.grid-row.head .cell.dragging { opacity: .45; }
.grid-row.head .cell.drop-before { box-shadow: inset 2px 0 0 var(--primary); }
.grid-row.head .cell.drop-after { box-shadow: inset -2px 0 0 var(--primary); }

/* Onglet en cours de déplacement */
.tab.dragging { opacity: .45; }
.tab.drop-before { box-shadow: inset 2px 0 0 var(--primary); }
.tab.drop-after { box-shadow: inset -2px 0 0 var(--primary); }

/* Page « Mon travail » */
.work-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.work-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.work-row:last-child { border-bottom: 0; }
.work-row:hover { background: var(--row-hover); }
.work-row .row-check { opacity: 1; }
.work-row.done .link-btn { color: var(--text-soft); text-decoration: line-through; }
.work-board { width: 160px; flex: none; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.work-date {
  width: 92px; flex: none; text-align: right;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-soft);
}
.work-date.late { color: var(--danger); font-weight: 600; }

/* Connecteurs */
.conn-ico { font-size: 19px; }
.conn-state {
  flex: none;
  padding: 3px 9px;
  border-radius: 11px;
  background: var(--track);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
}
.conn-state.on { background: #e6f8ef; color: #0a7c4a; }
.conn-state.ko { background: var(--danger-soft); color: var(--danger-text); }

/* Bandeaux d'information des séquences */
.seq-notice {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--primary-dark);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 6px;
}
.seq-blocked {
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger-text);
  font-size: 12px;
  line-height: 1.5;
}
.seq-steps { margin: 7px 0; padding-left: 20px; font-size: 13px; line-height: 1.7; }
.seq-steps .sub { margin-right: 6px; }
textarea.seq-body { min-height: 140px; font-size: 13px; line-height: 1.5; }

/* --------------------------------------------------------------- login */

/* ------------------------------------------------------------ adaptatif */

/* Écran étroit : la barre latérale devient un bandeau de boards défilant
   horizontalement, et la zone de travail récupère toute la largeur. */
@media (max-width: 980px) {
  .layout { flex-direction: column; }

  /* Le rail se couche en bandeau : sinon il resterait une colonne haute
     à côté d'une zone de travail vide. */
  .rail {
    flex-direction: row;
    width: 100%;
    padding: 5px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .rail-bottom { margin-top: 0; margin-left: auto; }

  .sidebar-tools { margin-bottom: 0; }
  .ws-picker { width: auto; margin-bottom: 0; flex: none; }

  .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .sidebar-section { padding: 0; flex: none; }
  .sidebar-section.grow { flex: 1; min-width: 0; }
  /* Les intitulés de section prennent trop de place sur un bandeau. */
  .sidebar-title { display: none; }
  .workspace { padding: 5px 8px; white-space: nowrap; }
  .workspace span:not(.workspace-icon) { display: none; }

  .board-list { flex-direction: row; gap: 4px; }
  .board-link { width: auto; white-space: nowrap; }

  /* Les espaces se déroulent aussi horizontalement dans le bandeau. */
  .space { display: flex; align-items: center; gap: 6px; margin: 0; }
  .space-head { width: auto; flex: none; }
  .space-head .label { display: none; }
  .space-boards {
    flex-direction: row;
    margin: 0;
    padding: 0;
    border-left: 0;
  }
  .sidebar-search-wrap { display: none; }

  /* Dans le bandeau, l'arborescence n'a pas de place : on garde une simple
     rangée de boards, sans chevrons ni vues dépliées. */
  .twist { display: none; }
  .tree-views { display: none; }
  .tree-board { flex-direction: row; }

  .main { min-height: 0; }
  .board-header { padding: 10px 12px 0; }
  .board-body { padding: 0 12px 60px; }
}

/* Très étroit : le panneau latéral passe en plein écran. Sans fond à
   cliquer, la croix de l'en-tête devient le seul moyen de fermer : elle est
   donc grande, fixe, et doublée d'un bouton en bas de panneau. */
@media (max-width: 720px) {
  :root { --name-col-w: 190px; --sidebar-w: 100%; }

  .drawer { width: 100vw; box-shadow: none; }
  .drawer-overlay { display: none; }
  .drawer-head { padding: 10px 12px; }
  .drawer-body { padding: 12px 14px 30px; }
  .drawer-title { font-size: 16px; }

  .brand-sub { display: none; }
  .search { width: 100%; }
  .toolbar { gap: 6px; }
  .viz-label { width: 110px; }
  .viz-value { width: 84px; }
  .viz-baseline { margin-left: 120px; }
  .viz-ctl .field-input { width: 100%; }
  .viz-ctl { flex: 1 1 160px; }
}

.drawer-close-foot { display: none; }
@media (max-width: 720px) {
  /* Second moyen de fermer, au bout d'un panneau long. */
  .drawer-close-foot {
    display: block;
    width: 100%;
    margin-top: 22px;
    padding: 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
  }
}

.login-page { display: grid; place-items: center; background: var(--bg); }

.login-card {
  width: 380px;
  max-width: 92vw;
  padding: 26px 28px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.login-title { margin: 0 0 6px; font-size: 19px; }
.login-help { color: var(--text-soft); font-size: 12px; line-height: 1.5; margin: 8px 0 16px; }
.login-card .field-label { margin-top: 12px; }
.login-submit { width: 100%; margin-top: 18px; padding: 10px; }

/* Connexion par le compte Blue Soft. Le bouton passe avant le formulaire :
   c'est le chemin normal, le mot de passe n'est plus que le recours. */
.login-microsoft {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
}
.login-microsoft:hover { background: var(--hover); }

.login-ou {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 6px;
  color: var(--text-soft); font-size: 12px;
}
.login-ou::before, .login-ou::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.login-error {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--danger-soft);
  color: var(--danger-text);
  font-size: 13px;
}

/* ---------------------------------------------- barre du haut : icônes */

.top-icon {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 0; border-radius: var(--radius);
  background: transparent; color: var(--text-soft);
}
.top-icon svg { width: 19px; height: 19px; fill: currentColor; }
.top-icon:hover { background: var(--hover); color: var(--text); }
.top-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
}
.topbar-right { display: flex; align-items: center; gap: 4px; }

/* ------------------------------------------------------- écrans IA */

.ai-page { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px; }

/* L'avertissement reste visible en permanence : il conditionne ce que
   l'utilisateur a le droit de recopier dans la zone de saisie. */
.ai-avis {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 13px; line-height: 1.5;
}

.ai-fil { display: flex; flex-direction: column; gap: 10px; min-height: 220px; }
.ai-msg {
  max-width: 760px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
}
.ai-msg.moi { align-self: flex-end; background: var(--accent-soft); border-color: var(--accent-line); }
.ai-role { font-size: 11px; font-weight: 600; color: var(--text-soft); margin-bottom: 3px; }
.ai-texte { white-space: pre-wrap; }

.ai-vide { padding: 40px 0; text-align: center; }
.ai-vide h2 { margin: 0 0 4px; font: 500 24px/30px var(--font-title); }
.ai-exemple {
  display: block; margin: 8px auto 0; max-width: 520px;
  padding: 9px 14px;
  border: 1px solid var(--border); border-radius: 100px;
  background: var(--surface); color: var(--text);
  text-align: left;
}
.ai-exemple:hover { border-color: var(--primary); color: var(--primary); }

.ai-saisie { display: flex; gap: 8px; align-items: flex-end; max-width: 900px; }
.ai-saisie textarea {
  flex: 1; resize: vertical;
  padding: 9px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font: inherit; color: inherit;
}
.ai-saisie textarea:focus { outline: none; border-color: var(--primary); }

/* -------------------------------------------------------------- favoris */

.fav-card { text-align: left; cursor: pointer; }
.fav-card:hover { border-color: var(--primary); }
.fav-nom { font: 500 17px/24px var(--font-title); margin: 2px 0 4px; }

/* Étoile de l'en-tête de board */
.fav-star { color: var(--text-faint); }
.fav-star.on { color: #fdab3d; }

/* Statut dans la fiche : même pastille pleine largeur que dans la grille. */
.status-field {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: var(--radius);
  color: #fff;
  font: inherit;
  text-align: center;
  padding: 0 10px;
}
.status-field.blank { color: #fff; }
.status-field:hover { filter: brightness(1.06); }

/* « Nouvel e-mail » est l'action principale de la fiche : bleu plein. */
.im-toolbar .btn-tool.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.im-toolbar .btn-tool.primary:hover:not(:disabled) { background: var(--primary-dark); }
.im-toolbar .btn-tool.primary:disabled { opacity: .5; }

/* ------------------------------------------- navigation repliable */

/* La barre latérale se rétracte comme le « de monday ; le rail et la zone
   de travail restent en place, la place gagnée revient au board. */
/* La deuxième barre se replie ; le rail, lui, ne bouge pas. La zone de
   travail se décale de la largeur de la poignée, sinon celle-ci passerait
   par-dessus le titre du board. */
body.barre-repliee .sidebar { display: none; }
body.barre-repliee .main { padding-left: 34px; }
.sidebar-reopen {
  position: fixed;
  left: calc(var(--rail-w) + 6px);
  top: calc(var(--topbar-h) + 10px);
  z-index: 30;
  display: none;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-soft);
}
body.barre-repliee .sidebar-reopen { display: flex; }
.sidebar-reopen svg { fill: currentColor; }
.sidebar-reopen:hover { color: var(--primary); border-color: var(--primary); }

/* Choix de l'icône d'un board */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 30px);
  gap: 4px;
  padding: 4px 8px 8px;
}
.icon-choice {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
}
.icon-choice:hover { background: var(--hover); border-color: var(--border); }
.icon-choice .b-ico { width: 17px; height: 17px; fill: var(--text-soft); }
.icon-choice:hover .b-ico { fill: var(--primary); }

/* Panneaux du rail : intertitres et séparateurs de la barre latérale. */
.side-heading {
  padding: 10px 10px 4px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
}
.side-sep { height: 1px; margin: 6px 4px; background: var(--border); }

/* ------------------------------------------------- agents et notes */

.agent-fiche {
  display: grid; gap: 10px;
  max-width: 760px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.field-input.lecture { background: var(--bg); border-style: dashed; }
.field-input.consignes { white-space: pre-wrap; min-height: 54px; }

.note-editeur { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.note-titre {
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font: 500 24px/30px var(--font-title);
  color: var(--text);
}
.note-titre:hover { border-color: var(--border); }
.note-titre:focus { outline: none; border-color: var(--primary); }
.note-corps {
  min-height: 320px;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit; color: inherit;
  resize: vertical;
}
.note-corps:focus { outline: none; border-color: var(--primary); }
.note-barre { display: flex; align-items: center; gap: 10px; }
.note-barre .sub { margin-right: auto; }

/* Changement de section du rail : les entrées se déplient de haut en bas,
   pour qu'on voie que la barre a changé et non qu'elle a juste sauté. */
@keyframes bb-deplie {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
#board-list.deplie > * {
  animation: bb-deplie .2s ease-out both;
}
/* Chaque ligne part un cran après la précédente : c'est ce décalage qui donne
   la sensation d'un dépliement plutôt que d'un remplacement. */
#board-list.deplie > *:nth-child(1)  { animation-delay: 0ms; }
#board-list.deplie > *:nth-child(2)  { animation-delay: 20ms; }
#board-list.deplie > *:nth-child(3)  { animation-delay: 40ms; }
#board-list.deplie > *:nth-child(4)  { animation-delay: 60ms; }
#board-list.deplie > *:nth-child(5)  { animation-delay: 80ms; }
#board-list.deplie > *:nth-child(6)  { animation-delay: 100ms; }
#board-list.deplie > *:nth-child(n+7) { animation-delay: 120ms; }

/* Un poste réglé sur « moins d'animations » ne subit pas le décalage. */
@media (prefers-reduced-motion: reduce) {
  #board-list.deplie > * { animation: none; }
}

/* Le titre de la barre change avec la section : on le souligne discrètement. */
.sidebar-head-title { font-weight: 600; }

/* --------------------------- deuxième barre : contenu selon le rail */

/* Intertitres et séparateurs des sections autres que le CRM. */
.nav-enfants { display: contents; }

/* La barre occupe toute la hauteur, sa liste défile seule. */
.sidebar { display: flex; flex-direction: column; }
.board-list { flex: 1; overflow-y: auto; }

/* --------------------------------------------- paramètres du CRM */

.settings-modal {
  position: fixed;
  inset: 32px;
  z-index: 46;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
  overflow: hidden;
}
.set-head {
  flex: none;
  display: flex; align-items: center;
  padding: 16px 20px;
}
.set-titre-modale { flex: 1; margin: 0; font: 500 24px/30px var(--font-title); }

.set-corps { flex: 1; display: flex; min-height: 0; }

/* Navigation de gauche : le groupe, son parent, puis les rubriques. */
.set-nav-col {
  width: 260px; flex: none;
  padding: 8px 12px 20px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
.set-groupe {
  padding: 10px 8px 4px;
  color: var(--text-soft);
  font-size: 12px; font-weight: 600;
}
.set-parent { padding: 6px 8px; font-size: 13px; color: var(--text-soft); }
.set-nav {
  display: block; width: 100%;
  padding: 7px 10px; margin-bottom: 2px;
  border: 0; border-radius: var(--radius);
  background: transparent; color: var(--text);
  font-size: 13px; text-align: left;
}
.set-nav.enfant { padding-left: 22px; }
.set-nav:hover { background: var(--hover); }
.set-nav.active { background: var(--accent-soft); color: var(--primary-dark); font-weight: 600; }

.set-contenu { flex: 1; padding: 18px 24px 40px; overflow-y: auto; }
.set-contenu h2 { margin: 0 0 14px; font: 500 18px/26px var(--font-title); }

.set-radio {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 720px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer;
}
.set-radio:hover { border-color: var(--border-strong); }
.set-radio.inline { display: inline-flex; align-items: center; border: 0; padding: 4px 14px 4px 0; }
.set-radios-ligne { margin-bottom: 10px; }

.set-adresse { display: flex; gap: 8px; max-width: 720px; margin: 4px 0 16px; }
.set-adresse .field-input { flex: 1; background: var(--bg); }

.set-zone {
  display: block; width: 100%; max-width: 720px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font: inherit; color: inherit; resize: vertical;
}
.set-zone:focus { outline: none; border-color: var(--primary); }
.set-actions { display: flex; gap: 8px; justify-content: flex-end; max-width: 720px; margin-top: 10px; }

.set-ligne {
  display: flex; align-items: center; gap: 10px;
  max-width: 720px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.set-texte { flex: 1; }
.set-titre { font-weight: 500; }

/* Interrupteur : la pastille glisse vers la droite quand c'est activé. */
.switch {
  flex: none;
  width: 38px; height: 20px;
  padding: 0; border: 0; border-radius: 10px;
  background: var(--border-strong);
  position: relative;
  transition: background .15s;
}
.switch span {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  transition: transform .15s;
}
.switch.on { background: var(--primary); }
.switch.on span { transform: translateX(18px); }

/* Les avertissements de traitement de données restent lisibles, pas criards. */
.set-avis {
  max-width: 720px;
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-soft);
  font-size: 13px; line-height: 1.55;
}
.set-avis.bloquant { border-left-color: var(--danger); }

/* ------------------------------------- accueil : compteurs cliquables */

/* Un compteur mène à l'écran qui le détaille : il doit se voir comme un
   bouton, sans pour autant changer d'aspect au repos. */
/* Pas de width:100% ici : la grille .dash place déjà les cartes côte à côte,
   et forcer la largeur les empilait sur toute la ligne. */
.widget-clic {
  text-align: left;
  cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.widget-clic:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.widget-clic:hover .widget-title { color: var(--primary); }

.act-clic {
  display: flex; width: 100%;
  border: 0; background: transparent;
  text-align: left; cursor: pointer;
  border-radius: var(--radius);
}
.act-clic:hover { background: var(--hover); }
.act-clic:hover .link-btn { text-decoration: underline; }

/* Accès rapides : une tuile par board. */
.raccourcis { display: flex; flex-wrap: wrap; gap: 8px; }
.raccourci {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
}
.raccourci:hover { border-color: var(--primary); color: var(--primary); }
.raccourci .b-ico { width: 16px; height: 16px; fill: currentColor; }

/* Panneau « Personnaliser » */
.perso-ligne {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}
.perso-check {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--surface); color: #fff;
  font-size: 12px; line-height: 1;
}
.perso-check.on { background: var(--primary); border-color: var(--primary); }

/* ------------------------------- cellules vides : un « + » pour remplir */

/* Une case vide ne dit pas qu'on peut la remplir. monday y met un « + » au
   survol de la ligne : on fait pareil, sur tous les types saisissables. */
.grid-row.item .cell-text:empty::before,
.grid-row.item .date-cell.empty::before,
.grid-row.item .timeline-cell.empty::before,
.grid-row.item .tags-cell.empty::before {
  content: "+";
  color: var(--text-faint);
  font-size: 14px;
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;   /* ne gêne pas le clic ni la saisie */
}
.grid-row.item:hover .cell-text:empty::before,
.grid-row.item:hover .date-cell.empty::before,
.grid-row.item:hover .timeline-cell.empty::before,
.grid-row.item:hover .tags-cell.empty::before { opacity: 1; }

/* Pendant la frappe, le « + » disparaît : sinon il resterait sous le curseur
   dans une cellule que l'on est justement en train de remplir. */
.grid-row.item .cell-text:focus:empty::before { content: none; }

/* Le « + » suit l'alignement de sa colonne. */
.grid-row.item .date-cell.empty,
.grid-row.item .timeline-cell.empty,
.grid-row.item .tags-cell.empty { justify-content: center; }

/* Avertissement porté par un connecteur : visible avant de saisir la clé,
   pas après. Le rouge est réservé aux obligations légales. */
.conn-avis {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger-text);
  font-size: 12px; line-height: 1.5;
}

/* ------------------------------- accueil : blocs déplaçables */

/* ------------------------------- accueil : une grille qu'on dispose soi-même

   Douze colonnes, des lignes de 24 px : chaque case dit où elle commence et
   combien de colonnes et de lignes elle occupe. C'est la seule mise en page de
   l'accueil — rien n'y est rangé automatiquement. */
.home-libre {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 24px;
  gap: 12px;
  padding: 12px 16px 32px;
  align-items: stretch;
}

.home-case {
  grid-column: var(--x) / span var(--w);
  grid-row: var(--y) / span var(--h);
  position: relative;
  min-width: 0;
  min-height: 0;
}

/* Le contenu remplit la case et défile à l'intérieur : c'est la case qui donne
   la hauteur, pas la longueur de la liste. */
.home-case > .widget {
  width: 100%; height: 100%;
  min-width: 0;
  margin: 0;
  overflow: auto;
  scrollbar-width: thin;
  display: block;
  text-align: left;
}
/* Un compteur tient en trois lignes : une barre de défilement pour deux
   pixels de dépassement ne ferait que salir la case. */
.home-case > .widget.widget-clic { display: block; overflow: hidden; }

/* Les deux poignées n'apparaissent qu'au survol : elles disent que la case se
   déplace et se redimensionne, sans encombrer la page en permanence. */
.case-deplacer, .case-taille {
  position: absolute;
  opacity: 0;
  transition: opacity .12s;
  z-index: 2;
}
.case-deplacer {
  top: 6px; right: 20px;
  color: var(--text-faint);
  font-size: 12px; line-height: 1;
  padding: 2px 4px;
  cursor: grab;
}
/* Sur un widget, le coin droit est déjà pris par le menu « ··· ». */
.home-case:has(> .widget [data-action="hw-menu"]) .case-deplacer { right: 46px; }

/* La poignée couvre le coin, barre de défilement comprise : sinon c'est la
   barre qui reçoit le clic et la case ne se redimensionne pas. */
.case-taille {
  right: 0; bottom: 0;
  width: 20px; height: 20px;
  z-index: 3;
  cursor: nwse-resize;
  background: var(--surface);
  border-bottom-right-radius: 10px;
}
.case-taille::after {
  content: "";
  position: absolute; right: 4px; bottom: 4px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  border-bottom-right-radius: 4px;
}
.home-case:hover .case-deplacer, .home-case:hover .case-taille { opacity: .9; }

/* Pendant le déplacement : la case suit la souris, le fantôme montre la place
   qu'elle prendra. */
.home-case.case-prise {
  z-index: 5;
  opacity: .85;
  cursor: grabbing;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, .16));
}
.home-case.case-prise .case-deplacer, .home-case.case-prise .case-taille {
  opacity: 0;
}
.home-fantome {
  grid-column: var(--x) / span var(--w);
  grid-row: var(--y) / span var(--h);
  border: 2px dashed var(--primary);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  pointer-events: none;
}
/* Pendant qu'on déplace, rien ne se sélectionne sous la souris. */
body.home-en-cours { user-select: none; cursor: grabbing; }

/* Sous 900 px la grille n'a plus de sens : les cases s'empilent dans l'ordre
   de lecture, chacune à sa hauteur naturelle. */
@media (max-width: 900px) {
  .home-libre { display: flex; flex-direction: column; grid-auto-rows: auto; }
  .home-case { min-height: 120px; }
  .case-deplacer, .case-taille { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .case-deplacer, .case-taille { transition: none; }
}

/* -------------------------------------- éditeur d'étiquettes */

.lab-ligne {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0;
}
.lab-couleur {
  flex: none;
  width: 22px; height: 22px;
  border: 0; border-radius: 4px;
  cursor: pointer;
}
.lab-couleur:hover { box-shadow: 0 0 0 2px var(--border-strong); }
.lab-nom { flex: 1; min-width: 90px; }

/* Le choix d'habillage et son aperçu, côte à côte : on voit tout de suite ce
   que la liste vient de changer, sans fermer le panneau. */
.lab-style { flex: none; width: 150px; font-size: 12px; padding: 4px 6px; }
.lab-apercu {
  flex: none;
  display: inline-block;
  max-width: 120px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lab-apercu.et-plein { color: #fff; }

/* Un choix entre deux écritures possibles : la ligne entière est cliquable,
   et celle qui est retenue se voit sans avoir à chercher le point du bouton
   radio. */
.set-choix { cursor: pointer; gap: 12px; }
.set-choix.on { background: var(--accent-soft); border-radius: 6px; }
.set-choix input { margin: 0 2px; }
/* Le décompte dit combien d'éléments portent l'étiquette : c'est ce qui
   permet de décider si on peut la supprimer sans casse. */
.lab-usage { flex: none; min-width: 22px; text-align: right; }
.lab-ajout { display: flex; gap: 8px; margin-top: 14px; }
.lab-ajout .field-input { flex: 1; }

/* ------------------------------------------------- widgets configurables */

.w-barre { padding: 12px 16px 0; }
.w-grille { padding: 12px 16px 24px; align-items: stretch; }
.w-grille .widget { flex: 1 1 300px; max-width: 460px; }

.w-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.w-head .widget-title { flex: 1; margin: 0; }
.w-menu {
  flex: none;
  border: 0; background: transparent;
  color: var(--text-soft);
  padding: 0 4px; border-radius: 4px;
  opacity: 0;
}
.widget:hover .w-menu { opacity: 1; }
.w-menu:hover { background: var(--hover); color: var(--text); }

/* Le menu d'ajout montre à quoi sert chaque widget : le nom seul ne suffit
   pas à choisir entre une jauge et un diagramme. */
.w-choix { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.w-ico {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 15px;
}

/* Jauge : demi-cercle rempli à la part atteinte. */
.jauge { width: 100%; max-width: 220px; display: block; margin: 0 auto; }
.jauge-pieds {
  display: flex; justify-content: space-around;
  margin-top: 2px; text-align: center;
}
.jauge-pieds b { font-size: 17px; }

/* Batterie : une barre, puis la légende chiffrée — deux couleurs proches ne
   se distinguent pas sans les nombres. */
.batterie {
  display: flex; height: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--track);
}
.batterie-part { display: block; height: 100%; }
.batterie-legende {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 8px;
  font-size: 12px; color: var(--text-soft);
}
.batterie-legende .dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 5px;
}
.batterie-legende b { color: var(--text); }

/* Évolution : un bâton par mois, la valeur au-dessus. */
.evolution {
  display: flex; align-items: flex-end; gap: 6px;
  height: 130px; padding-top: 6px;
}
.evo-col {
  flex: 1; min-width: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%;
}
.evo-n { font-size: 11px; color: var(--text-soft); }
.evo-barre {
  width: 100%; min-height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary);
}
.evo-mois { margin-top: 4px; font-size: 10px; color: var(--text-soft); }

.bar-track {
  flex: 1;
  height: 10px; border-radius: 5px;
  background: var(--track);
  overflow: hidden;
}
.bar-fill { display: block; height: 100%; border-radius: 5px; }

/* La barre d'ajout de widget porte une phrase d'explication : le bouton seul
   ne dit pas ce qu'on peut y mettre. */
.w-barre { display: flex; align-items: center; gap: 12px; padding: 12px 16px 0; }
.w-barre .sub { font-size: 12px; }

/* ------------------------------- colonnes Équipe, Document et sous-éléments */

.tag.equipe { font-size: 11px; }

/* Le prénom du responsable, à la place des initiales.

   Le bouton qui l'entoure est taillé pour une pastille ronde — 50 % de rayon,
   2px de marge. Une étiquette dedans en ressortait ovale et rognée : le rayon
   redevient donc celui des autres étiquettes quand le bouton porte un nom. */
.tag.personne { font-size: 11px; white-space: nowrap; }
.person-btn:has(.tag.personne) { border-radius: var(--radius, 6px); padding: 0; }
.mono-id { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-soft); }

.doc-cell {
  background: none; border: 0; cursor: pointer;
  color: var(--text); font: inherit; font-size: 12px;
  text-align: left; width: 100%; padding: 2px 4px; border-radius: 4px;
}
.doc-cell:hover { background: var(--hover); }
/* La fiche de mission.

   Le sélecteur porte le nom de l'élément, et c'est nécessaire :
   « textarea.field-input » plus haut impose 72px de hauteur minimale, et il
   est plus spécifique que « .doc-zone » seul. La règle d'origine ne
   s'appliquait donc jamais — la zone restait à 72px alors qu'elle annonçait
   340px, et briac devait l'agrandir à chaque fois.

   L'interligne descend de 1,6 à 1,4 : à 1,6, une mission collée depuis Word,
   qui porte déjà une ligne vide entre chaque point, se lisait deux fois plus
   aérée qu'elle ne l'est vraiment. */
textarea.doc-zone {
  min-height: 220px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.4;
  padding: 12px 14px;
}

/* Avancement des sous-éléments : la barre seule ne se lit pas, le compte suit. */
.sous-avance { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.sous-barre {
  flex: 1; height: 6px; border-radius: 3px;
  background: var(--track); overflow: hidden; min-width: 40px;
}
.sous-barre span { display: block; height: 100%; background: var(--success, #00c875); }

.popover-vide { padding: 10px 12px; font-size: 12px; color: var(--text-soft); }

/* ------------------------------------- fil d'activités commerciales */

.act-barre { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 12px; }

.act-fil { display: flex; flex-direction: column; }
.act-mois {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 14px 0 6px;
}
.act-ligne {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 4px; border-bottom: 1px solid var(--border-soft, var(--border));
}
.act-ligne:last-child { border-bottom: 0; }
.act-ligne.a-venir { opacity: .8; }
.act-icone {
  flex: none; width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--hover); font-size: 13px;
}
.act-titre { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.act-corps { font-size: 13px; color: var(--text-soft); white-space: pre-wrap; margin-top: 2px; }
.tag.a-faire { background: var(--warning, #fdab3d); font-size: 10px; }

/* ------------------------------------- fil de progression en chevrons */

.chevrons { display: flex; gap: 3px; padding: 10px 6px 2px; overflow-x: auto; }
.chevron {
  flex: 1 1 0; min-width: 92px;
  border: 0; cursor: pointer;
  background: var(--track); color: var(--text-soft);
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 7px 14px;
  /* La pointe à droite dit le sens de lecture, comme sur monday. */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.chevron:first-child { border-radius: 4px 0 0 4px; }
.chevron.atteint { background: var(--hover); color: var(--text); }
.chevron.courant { color: #fff; font-weight: 600; }
.chevron:disabled { cursor: default; }
.chevron:not(:disabled):hover { filter: brightness(1.06); }

/* ------------------------------------- réglages d'affichage de la vue */

/* Hauteur des lignes : posée sur le corps de la grille, pas ligne par ligne. */
.grid.h-moyen .grid-row.item { min-height: 48px; }
.grid.h-grand .grid-row.item { min-height: 68px; }
.grid.h-moyen .cell-text, .grid.h-grand .cell-text { white-space: normal; }

/* Colonnes épinglées : elles restent visibles au défilement horizontal. */
.grid-row .cell.epingle {
  position: sticky;
  background: var(--surface);
  z-index: 2;
}
.grid-row.head .cell.epingle { z-index: 3; }
.cell.epingle-bord { box-shadow: 1px 0 0 var(--border); }

.col-regle {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft, var(--border));
  flex-wrap: wrap;
}
.col-regle:last-child { border-bottom: 0; }

/* ---------------------------------------- widgets ajoutés : camembert, liste,
   calendrier, Gantt et barres empilées */

.camembert-rangee { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.camembert { width: 140px; height: 140px; flex: none; }
.camembert-total { fill: var(--text); font-size: 22px; font-weight: 700; }
.batterie-legende.colonne {
  flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; min-width: 120px;
}
.batterie-legende.colonne .sub { margin-left: 4px; }

/* Une barre empilée : la piste porte les segments, plus une seule teinte. */
.bar-track { display: flex; }

.w-liste { display: flex; flex-direction: column; gap: 2px; }

.w-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.w-cal-tete {
  font-size: 10px; font-weight: 600; color: var(--text-faint);
  text-align: center; padding-bottom: 2px;
}
.w-cal-jour, .w-cal-vide {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: 11px; border-radius: 4px; color: var(--text-soft);
  position: relative;
}
.w-cal-jour.plein { background: var(--primary); color: #fff; font-weight: 600; }
.w-cal-jour b { position: absolute; bottom: 1px; right: 3px; font-size: 9px; }

.w-gantt { position: relative; }
/* Ligne d'aujourd'hui : c'est ce qui manque à une chronologie sans repère. */
.w-gantt-jour {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--danger); opacity: .7; pointer-events: none; z-index: 1;
}

/* ------------------------------------------------ galerie de fichiers */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  padding: 16px;
}
.galerie-carte {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; overflow: hidden;
}
.galerie-carte:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.galerie-vue {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; border-radius: 6px;
  background: var(--hover); overflow: hidden;
}
.galerie-vue img { width: 100%; height: 100%; object-fit: cover; }
.galerie-ext { font-size: 15px; font-weight: 700; color: var(--text-faint); letter-spacing: .05em; }
.galerie-nom {
  font-size: 12.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------ catalogue d'agents prêts */

.agents-cat { padding: 8px 4px 24px; display: flex; flex-direction: column; gap: 8px; }
.agents-cat h2 { margin: 0; font-size: 20px; }
.agents-cat > .sub { max-width: 62ch; margin-bottom: 8px; }

.agents-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.agent-carte {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
}
.agent-carte:hover { border-color: var(--primary); }
.agent-ico { font-size: 20px; line-height: 1; }
.agent-nom { font-weight: 600; font-size: 14.5px; }
.agent-carte .btn-tool { align-self: flex-start; margin-top: auto; }
.agent-pose {
  align-self: flex-start; margin-top: auto;
  font-size: 11px; color: var(--text-faint);
}
/* L'avertissement se lit avant d'ajouter l'agent, pas après. */
.agent-avis {
  font-size: 11.5px; line-height: 1.5;
  background: var(--warn-soft, rgba(253, 171, 61, .12));
  border-left: 2px solid var(--warning, #fdab3d);
  padding: 7px 9px; border-radius: 0 4px 4px 0;
  color: var(--text-soft);
}
.agents-perso {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
}

/* ---------------------------------- assistant de création d'un agent */

.depart-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}
.depart-carte {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; cursor: pointer;
  font: inherit; color: inherit;
}
.depart-carte:hover { border-color: var(--primary); }
.depart-carte.on { border-color: var(--primary); background: var(--hover); }
.depart-ico { font-size: 16px; line-height: 1; }
.depart-nom { font-weight: 600; font-size: 13px; }
.depart-carte .sub { font-size: 11px; line-height: 1.45; }

/* Les puces remplissent un champ d'un clic : c'est plus rapide que taper,
   et ça montre ce qu'on attend. */
.puces-suggestion { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.puce {
  background: var(--hover); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--text-soft);
}
.puce:hover { border-color: var(--primary); color: var(--text); }

/* ------------------------------------------- imminence d'une échéance

   La case entière se teinte : on repère les fins de mission en balayant la
   colonne, sans s'arrêter sur chaque ligne. Fond léger et texte inchangé,
   pour que la date reste lisible. */

.date-cell.ech-passe, .date-cell.ech-rouge, .date-cell.ech-orange,
.date-cell.ech-jaune, .date-cell.ech-vert {
  border-radius: 4px;
  /* Le fond couvre la case, pas seulement le texte. */
  width: 100%; padding: 4px 8px;
}
.date-cell.ech-passe { background: color-mix(in srgb, var(--text-faint) 20%, transparent); }
.date-cell.ech-rouge { background: color-mix(in srgb, var(--danger) 26%, transparent); }
.date-cell.ech-orange { background: color-mix(in srgb, #fdab3d 30%, transparent); }
.date-cell.ech-jaune { background: color-mix(in srgb, #ffcb00 28%, transparent); }
.date-cell.ech-vert { background: color-mix(in srgb, #00c875 18%, transparent); }

/* La même teinte sur une carte kanban : c'est la date qui dit l'urgence d'un
   inter-contrat, et on la lit en balayant la colonne. */
.kanban-card .card-date {
  display: inline-block;
  margin: 2px 0 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.card-date.ech-passe, .badge-date.ech-passe, .legende-echeance .ech-passe {
  background: color-mix(in srgb, var(--text-faint) 20%, transparent);
}
.card-date.ech-rouge, .badge-date.ech-rouge, .legende-echeance .ech-rouge {
  background: color-mix(in srgb, var(--danger) 26%, transparent);
}
.card-date.ech-orange, .badge-date.ech-orange, .legende-echeance .ech-orange {
  background: color-mix(in srgb, #fdab3d 30%, transparent);
}
.card-date.ech-jaune, .badge-date.ech-jaune, .legende-echeance .ech-jaune {
  background: color-mix(in srgb, #ffcb00 28%, transparent);
}
.card-date.ech-vert, .badge-date.ech-vert, .legende-echeance .ech-vert {
  background: color-mix(in srgb, #00c875 18%, transparent);
}

/* Le bouton « Mes fiches / Toute l'équipe ». Allumé quand il filtre : c'est
   l'état filtré qui doit se remarquer, pas l'état complet — on ne cherche pas
   pourquoi on voit tout, on cherche pourquoi on ne voit pas tout. */
.btn-tool.vue-perso.on {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.btn-tool.vue-perso.on .count-pill {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}

/* --------------------------------------------- ancienneté d'un contact

   L'inverse de ce qui précède, et c'est tout le piège : ici le vert est du
   côté des dates récentes. Pour qu'on ne lise pas une échelle pour l'autre,
   l'ancienneté ne teinte pas la case — elle pose une pastille devant la
   date, et la case reste blanche. */

.pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 7px;
  flex: none;
  vertical-align: middle;
  background: var(--border-strong);
}
.frais-vert .pastille { background: #00c875; }
.frais-jaune .pastille { background: #ffcb00; }
.frais-orange .pastille { background: #fdab3d; }
.frais-rouge .pastille { background: #e2445c; }
.frais-inconnu .pastille { background: #c4c4c4; }

/* Sur une carte kanban et dans une liste, la pastille seule ne suffit pas :
   le fond reprend la couleur, comme pour les échéances. */
.card-date.frais-vert, .badge-date.frais-vert, .legende-fraicheur .frais-vert {
  background: color-mix(in srgb, #00c875 18%, transparent);
}
.card-date.frais-jaune, .badge-date.frais-jaune, .legende-fraicheur .frais-jaune {
  background: color-mix(in srgb, #ffcb00 28%, transparent);
}
.card-date.frais-orange, .badge-date.frais-orange, .legende-fraicheur .frais-orange {
  background: color-mix(in srgb, #fdab3d 30%, transparent);
}
.card-date.frais-rouge, .badge-date.frais-rouge, .legende-fraicheur .frais-rouge {
  background: color-mix(in srgb, var(--danger) 26%, transparent);
}
.card-date.frais-inconnu, .badge-date.frais-inconnu,
.legende-fraicheur .frais-inconnu {
  background: color-mix(in srgb, var(--text-faint) 18%, transparent);
}

.legende-fraicheur {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-soft);
}
.legende-fraicheur span { padding: 2px 8px; border-radius: 4px; }

/* Une colonne d'ancienneté s'aligne à gauche, là où les autres dates se
   centrent : c'est la file des pastilles que l'œil balaye, et une pastille
   qui se déplace d'une ligne à l'autre — parce que la case est vide et que
   son contenu est plus étroit — casse la colonne qu'on suit du regard. */
.date-cell.frais-vert, .date-cell.frais-jaune, .date-cell.frais-orange,
.date-cell.frais-rouge, .date-cell.frais-inconnu { text-align: left; }

/* Et pas de « + » au survol sur une case vide de cette colonne : il se
   glisserait devant la pastille et la décalerait de sa file. La pastille
   grise dit déjà qu'il n'y a rien de noté, et le cadre au survol dit que la
   case se remplit. */
.grid-row.item .date-cell.empty.frais-inconnu::before { content: none; }

/* La date dans une liste : un badge qui se lit au bout de la ligne, pas une
   case pleine largeur comme dans la grille. */
.badge-date {
  flex: none;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Destinataire dont le message a déjà été ouvert. */
.list-row.mail-fait { opacity: .55; }

/* --------------------------------- outils du panneau de rédaction */

.mail-outils { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }

.prop-carte {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px;
}
.prop-texte { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; }
.prop-carte .btn-tool { align-self: flex-start; }

.puce.on { background: var(--accent-soft, #e5f4ff); border-color: var(--primary); color: var(--text); }

/* ------------------------------------------------ pense-bête de l'accueil */

.pb-saisie {
  width: 100%; margin: 2px 0 10px;
  background: var(--hover); border: 1px solid transparent;
  border-radius: 6px; padding: 8px 10px;
  font: inherit; font-size: 13px; color: var(--text);
}
.pb-saisie:focus { border-color: var(--primary); background: var(--surface); outline: none; }

.pb-liste { display: flex; flex-direction: column; }
.pb-ligne {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 2px; font-size: 13.5px;
  border-bottom: 1px solid var(--border-soft, var(--border));
}
.pb-ligne:last-child { border-bottom: 0; }
.pb-ligne.fait .grow { text-decoration: line-through; color: var(--text-faint); }
.pb-case {
  flex: none; width: 17px; height: 17px;
  border: 1.5px solid var(--border); border-radius: 4px;
  background: none; cursor: pointer; color: #fff;
  font-size: 11px; line-height: 1; padding: 0;
}
.pb-case.on { background: var(--success, #00c875); border-color: var(--success, #00c875); }
.pb-ligne .icon-btn { opacity: 0; }
.pb-ligne:hover .icon-btn { opacity: 1; }
.pb-nettoyer { margin-top: 8px; font-size: 12px; }

/* ------------------------------------------ assistant : bouton flottant */

/* Le bouton rond porte la meme teinte que la pastille du panneau : on doit
   reconnaitre l'assistant avant meme de l'avoir ouvert. */
.fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, #a25ddc, #0073ea);
  color: #fff;
  font-size: 23px; line-height: 1;
  box-shadow: 0 6px 18px rgba(92, 61, 178, .34);
  transition: transform .12s, box-shadow .12s;
}
.fab:hover { box-shadow: 0 8px 24px rgba(92, 61, 178, .45); }
.fab:hover { filter: brightness(1.08); transform: translateY(-2px); }
.fab:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

.as-form { display: flex; flex-direction: column; gap: 2px; }

@media (prefers-reduced-motion: reduce) {
  .fab { transition: none; }
}

/* Cellule Fichiers survolée par un fichier venu du bureau. */
.files-cell.depot-actif {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  background: var(--accent-soft, #e5f4ff);
  border-radius: 4px;
}

/* ------------------------------- tableau des éléments rattachés */

.tableau-lie { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; }
.tableau-lie table { border-collapse: collapse; width: 100%; font-size: 13px; }
.tableau-lie th, .tableau-lie td {
  text-align: left; padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft, var(--border));
}
.tableau-lie th {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint);
  background: var(--hover); white-space: nowrap;
}
.tableau-lie tr:last-child td { border-bottom: 0; }
.tableau-lie td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Éléments d'un widget qui mènent au tableau filtré. */
.cliquable { cursor: pointer; }
.batterie-part.cliquable:hover { filter: brightness(1.15); }
.bar-row.cliquable:hover { background: var(--hover); border-radius: 4px; }
.batterie-legende .cliquable:hover { text-decoration: underline; }

/* Chiffre d'un tableau de bord qui mène à son tableau d'origine. */
.kpi-huge.cliquable:hover { color: var(--primary); }
.funnel-row.cliquable:hover { background: var(--hover); border-radius: 4px; }

/* ------------------------------------------------ point hebdomadaire

   La page se lit de haut en bas avant une réunion : un fil unique, pas une
   grille où l'œil doit choisir par où commencer. */

.hebdo { display: flex; flex-direction: column; gap: 18px; padding: 24px 28px 64px; }

.hebdo-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.hebdo-tete h1 { margin: 0 0 4px; font-size: 24px; }

.hebdo-compteurs {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.hebdo-section { display: flex; flex-direction: column; gap: 6px; }

/* Chaque catégorie porte son liseré : la couleur dit de quoi il s'agit
   avant même qu'on lise le titre. */
.hebdo-cat {
  margin-top: 12px; padding-left: 12px;
  border-left: 3px solid var(--border);
}
.hebdo-cat.cat-vert { border-left-color: #00c875; }
.hebdo-cat.cat-rouge { border-left-color: var(--danger); }
.hebdo-cat.cat-orange { border-left-color: #fdab3d; }
.hebdo-cat.cat-bleu { border-left-color: #0086c0; }

.hebdo-cat-titre {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 4px;
}

.hebdo-ligne {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px; cursor: pointer;
  font-size: 14px;
}
.hebdo-ligne:hover { background: var(--hover); }
.hebdo-ligne em { color: var(--text-soft); font-style: normal; }

.hebdo-suppr {
  flex: none; border: 0; background: none; cursor: pointer;
  color: var(--text-faint); font-size: 16px; line-height: 1;
  padding: 2px 6px; border-radius: 4px; opacity: 0;
}
.hebdo-ligne:hover .hebdo-suppr { opacity: 1; }
.hebdo-suppr:hover { background: var(--danger); color: #fff; }

.hebdo-ajout {
  border: 0; background: none; cursor: pointer; padding: 4px 8px;
  color: var(--text-faint); font-size: 13px; border-radius: 4px;
}
.hebdo-ajout:hover { background: var(--hover); color: var(--primary); }

.hebdo-jour { margin-top: 10px; }
.hebdo-jour-titre {
  font-size: 12px; font-weight: 600; color: var(--text-soft);
  padding: 4px 0; border-bottom: 1px solid var(--border-soft);
}
.hebdo-heure {
  flex: none; width: 48px; font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--text-soft);
}

@media (max-width: 720px) {
  .hebdo { padding: 16px; }
}

/* ------------------------------------------------------- page Boîte mail */

.mail-bloc { margin-bottom: 26px; }

.mail-ligne {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.mail-ligne .grow { min-width: 0; }

/* Le sens de l'échange se lit d'un coup d'œil : reçu ou envoyé change la
   lecture d'une relance bien plus que l'objet du message. */
.mail-sens { flex: none; font-size: 13px; line-height: 20px; width: 16px; }
.mail-sens.in { color: var(--primary); }
.mail-sens.out { color: var(--text-soft); }

.mail-classer {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.mail-classer .grow { min-width: 0; }
.mail-ou { flex: none; width: 190px; }

.page-vide {
  max-width: 520px;
  margin: 48px auto;
  text-align: center;
  color: var(--text-soft);
}
.page-vide h2 { color: var(--text); font-size: 17px; margin: 0 0 8px; }
.page-vide p { line-height: 1.6; font-size: 13px; }

/* Le classement proposé par l'analyse. Une pastille discrète : c'est une
   suggestion, pas un statut, et elle ne doit pas peser autant qu'une
   étiquette de fiche. */
.mail-propose {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-soft);
  text-transform: capitalize;
}

/* ------------------------------------------------- chaîne de relance */

/* Les étapes d'une séquence, vues depuis la grille : un point plein par
   relance partie, un point creux par relance à venir. Lire « ●●○ » est plus
   rapide que lire « 2/3 », et c'est toute la raison d'être de la colonne. */
.relance-points {
  letter-spacing: 1px;
  font-size: 11px;
  color: var(--primary);
}

/* Une relance en retard est la seule chose qui doit attirer l'œil ici. */
.relance-retard {
  color: var(--danger, #d83a52);
  font-weight: 600;
  font-size: 11px;
}

/* --------------------------------------------- relance depuis la fiche */

/* Une phrase d'explication dans un popover, au-dessus des boutons. Elle dit
   où on en est avant de proposer d'agir : « relance 2 sur 3, prévue le
   5 novembre » vaut mieux qu'un bouton nu qu'on clique pour voir. */
.popover-note {
  padding: 4px 10px 8px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.45;
  max-width: 280px;
}

.popover-item.danger { color: var(--danger); }
.popover-item.danger:hover { background: var(--danger-soft); }

/* Le tri d'un fil : on choisit des lignes, puis on les retire.

   Aucune case à cocher. briac clique les lignes partout ailleurs, et des
   cases qui apparaîtraient à gauche de chaque ligne changeraient l'allure du
   fil pour un geste qu'on fait trois fois par mois. Le curseur et un liseré
   suffisent à dire qu'une ligne se clique ; le fond coloré dit qu'elle est
   prise. */
.act-barre.triage { display: flex; align-items: center; gap: 8px; }
.act-barre.triage .grow { flex: 1; }
.btn-tool.danger { color: var(--danger); }
.btn-tool.danger:hover:not(:disabled) { background: var(--danger-soft); }
.btn-tool:disabled { opacity: .45; cursor: default; }

.act.triable, .act-ligne.triable, .update.triable,
.act.choisie, .act-ligne.choisie, .update.choisie {
  cursor: pointer;
  border-radius: 8px;
}
.act.triable:hover, .act-ligne.triable:hover, .update.triable:hover {
  background: var(--hover);
}
.act.choisie, .act-ligne.choisie, .update.choisie {
  background: var(--danger-soft);
  box-shadow: inset 2px 0 0 var(--danger);
}

/* Le calendrier du menu de relance. Les délais tout faits couvrent la
   prospection ordinaire ; « rappelez-moi après le comité du 14 » n'entre dans
   aucun, et briac clique une case plutôt que d'ouvrir le sélecteur du
   système. */
.relance-cal { padding: 2px 8px 8px; }

.cal-tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 6px;
}
.cal-mois { font-size: 12px; font-weight: 600; text-transform: capitalize; }
.cal-fleche {
  border: 0; background: transparent; cursor: pointer;
  width: 24px; height: 24px; border-radius: 6px;
  font-size: 16px; line-height: 1; color: var(--text-soft);
}
.cal-fleche:hover { background: var(--hover); color: var(--text); }

.cal-grille {
  display: grid;
  grid-template-columns: repeat(7, 28px);
  gap: 2px;
}
.cal-nom {
  text-align: center; font-size: 10px; font-weight: 600;
  color: var(--text-soft); padding-bottom: 2px;
}
.cal-vide { height: 26px; }
.cal-jour {
  height: 26px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; font-size: 12px;
  /* Les chiffres s'alignent en colonnes : un calendrier dont les jours
     dansent d'une ligne à l'autre se lit mal. */
  font-variant-numeric: tabular-nums;
}
.cal-jour:hover:not(:disabled) { background: var(--hover); }
.cal-jour.passe { color: var(--text-soft); opacity: .35; cursor: default; }
.cal-jour.aujourdhui { font-weight: 700; color: var(--primary-dark); }
.cal-jour.pose { background: var(--accent-soft); color: var(--primary-dark); font-weight: 700; }

/* Le bouton de relance quand elle est en retard. Discret ailleurs, visible
   ici : c'est la seule chose de la barre d'outils qui demande une action. */
.btn-tool.en-retard { color: var(--danger); border-color: var(--danger); }


/* ------------------------------------------- saisie d'étiquette au clavier */

/* Le champ prend la place de la case, sans la faire sauter : mêmes bords,
   même hauteur. Une cellule qui change de taille au clic donne l'impression
   d'avoir cassé quelque chose. */
.combo-input {
  width: 100%;
  border: 0;
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  border-radius: 4px;
  padding: 3px 7px;
  font: inherit;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}

/* Les suggestions, collées sous la case. Volontairement sobres : ce n'est
   pas une fenêtre, c'est un prolongement du champ. */
.combo-liste {
  position: fixed;
  z-index: 60;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
}

.combo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.combo-item:hover,
.combo-item.on { background: var(--hover); }
.combo-item .sub { margin-left: auto; }

/* Créer une étiquette se distingue de la choisir : c'est la seule ligne qui
   ajoute quelque chose à la colonne, pour tout le monde. */
.combo-item.creer { color: var(--primary); font-weight: 500; }

.combo-vide {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-soft);
}


/* Le trait qui sépare le choix d'une étiquette de la gestion de la liste :
   au-dessus on remplit une fiche, en dessous on change la colonne pour tout
   le monde. */
.combo-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}
.combo-item.gerer { color: var(--text-soft); font-size: 12px; }

/* Un mail rattaché mène au message dans Outlook. Souligné au survol
   seulement : le fil compte des centaines de lignes, et les souligner toutes
   le rendrait illisible. */
.act-lien { color: inherit; text-decoration: none; }
.act-lien:hover { color: var(--primary); text-decoration: underline; }


/* La pastille d'un espace dans le rail : ses initiales sur sa couleur, à la
   place d'une icône. Deux espaces se distinguent mieux par leur couleur que
   par deux dessins qui se ressemblent. */
.rail-pastille {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ------------------------------------------------ couleurs du rail gauche */

/* Une teinte par entrée, sur le DESSIN seulement.

   briac : « mets de la couleur en gardant les mêmes logos ». Les icônes
   étaient toutes grises, et seuls les espaces avaient la leur — ce qui
   soulignait l'écart au lieu de l'effacer. Le libellé reste neutre : dix
   étiquettes colorées feraient un sapin, l'icône suffit à repérer une entrée
   sans lire.

   Les teintes sont choisies pour se distinguer entre VOISINES : deux bleus
   séparés par trois entrées ne se confondent pas, deux bleus côte à côte si.
   Les espaces, eux, portent la leur en style direct depuis la base. */
.rail-btn[data-nav="home"]      { --rail-teinte: #0073ea; }
.rail-btn[data-nav="sidekick"]  { --rail-teinte: #579bfc; }
.rail-btn[data-nav="agents"]    { --rail-teinte: #00c875; }
.rail-btn[data-nav="tools"]     { --rail-teinte: #676879; }
.rail-btn[data-nav="notetaker"] { --rail-teinte: #e2445c; }
.rail-btn[data-nav="favoris"]   { --rail-teinte: #fdab3d; }
.rail-btn[data-nav="plus"]      { --rail-teinte: #9699a6; }

.rail-btn svg { color: var(--rail-teinte, currentColor); }

/* Survolée ou active, l'entrée garde sa teinte : c'est elle qui l'identifie,
   et la changer au moment précis où l'on s'y intéresse n'aurait aucun sens.
   Le fond et le libellé suffisent à dire où l'on est. */
.rail-btn:hover svg,
.rail-btn.active svg { color: var(--rail-teinte, currentColor); }

/* ------------------------------------ propositions de l'assistant */

/* Ce que le modèle propose, avant qu'on l'enregistre. Encadré pour qu'on voie
   d'un coup d'œil où finit la conversation et où commence ce qui va s'écrire
   dans le CRM. */
.prop-carte {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
  background: var(--surface);
}
.prop-tete {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.prop-etiquette { font-weight: 600; font-size: 13px; }
.prop-reponse {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 10px;
  white-space: pre-wrap;
}
.prop-liste { margin: 4px 0 10px; }
.prop-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ------------------------------------------------------ assistant en bulles */

.as-corps { padding-bottom: 4px; }

.as-fil {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 2px 12px;
}

/* Un tour de parole : la pastille et la bulle, alignées en haut. */
.as-tour { display: flex; gap: 8px; align-items: flex-start; }
.as-tour.moi { justify-content: flex-end; }

/* La pastille de l'assistant. Elle lui donne un visage : sans elle, deux
   blocs gris se suivaient sans qu'on sache lequel venait de repondre. */
.as-pastille {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  background: linear-gradient(135deg, #a25ddc, #0073ea);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
}
.as-pastille.grande { width: 44px; height: 44px; font-size: 20px; margin: 0 auto 12px; }

/* Les bulles. Celles de briac pleines et a droite, celles de l'assistant
   claires et a gauche : la convention de toutes les messageries, qui
   s'apprend sans qu'on l'explique. */
.as-bulle {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.as-bulle.moi {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 115, 234, .28);
}
.as-bulle.ia {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
}

.as-source {
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* L'attente : trois points qui respirent a tour de role. Un ecran fige fait
   recliquer, et la question part deux fois. */
.as-bulle.as-attente { display: flex; gap: 4px; padding: 14px; }
.as-attente span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faint);
  animation: as-respire 1.3s ease-in-out infinite;
}
.as-attente span:nth-child(2) { animation-delay: .18s; }
.as-attente span:nth-child(3) { animation-delay: .36s; }
@keyframes as-respire {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .as-attente span { animation: none; opacity: .5; }
}

/* La conversation vide. Des exemples ranges par famille plutot qu'une aide a
   lire : la meilleure aide est un exemple qu'on peut essayer d'un clic. */
.as-vide { padding: 22px 8px 8px; text-align: center; }
.as-vide-titre { font-weight: 600; font-size: 15px; margin-bottom: 5px; }
.as-vide > .sub { max-width: 320px; margin: 0 auto; line-height: 1.5; }

.as-famille { margin-top: 18px; text-align: left; }
.as-famille-titre {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-faint);
  margin-bottom: 6px;
  padding-left: 2px;
}
.as-exemple {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 5px;
  font-size: 12.5px;
  color: var(--text-soft);
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, color .12s, transform .12s;
}
.as-exemple:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) { .as-exemple { transition: none; } }

/* La saisie, collee au bas du tiroir. */
.as-saisie {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.as-saisie textarea {
  resize: none;
  flex: 1;
  border-radius: 12px;
  padding: 9px 12px;
  line-height: 1.45;
}

/* ------------------------------------ propositions de l'assistant */

/* Ce que le modèle propose, avant qu'on l'enregistre. Encadré pour qu'on voie
   d'un coup d'œil où finit la conversation et où commence ce qui va s'écrire
   dans le CRM. */
.prop-carte {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
  background: var(--surface);
}
.prop-tete {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.prop-etiquette { font-weight: 600; font-size: 13px; }
.prop-reponse {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 10px;
  white-space: pre-wrap;
}
.prop-liste { margin: 4px 0 10px; }
.prop-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ------------------------------------------------------- assistant en bulles */

/* Le corps se déroule, la saisie reste en bas. Sans ça, taper une longue
   question pousserait le fil hors de l'écran au moment précis où l'on veut
   relire ce qui précède. */
.as-corps { padding-bottom: 4px; }

.as-fil {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px 10px;
}

/* Une bulle par tour de parole. Les siennes à droite et pleines, celles de
   l'assistant à gauche et claires : c'est la convention de toutes les
   messageries, et elle s'apprend sans qu'on l'explique. */
.as-bulle {
  max-width: 85%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.as-bulle.moi {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.as-bulle.ia {
  align-self: flex-start;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

/* D'où vient la réponse : petit, en bas de bulle. On veut pouvoir le savoir
   sans que ça pèse sur la lecture. */
.as-source {
  margin-top: 5px;
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* L'attente. Trois points qui respirent valent mieux qu'un écran figé : sans
   eux on reclique, et la question part deux fois. */
.as-attente { color: var(--text-faint); letter-spacing: 3px; }
@keyframes as-respire { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.as-attente { animation: as-respire 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .as-attente { animation: none; } }

/* La conversation vide : des exemples cliquables plutôt qu'une aide à lire.
   C'est le seul moment où l'aide sert, et la meilleure aide est un exemple
   qu'on peut essayer d'un clic. */
.as-vide { padding: 18px 6px; text-align: center; }
.as-vide-titre { font-weight: 600; margin-bottom: 6px; }
.as-exemples {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.as-exemple {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
  text-align: left;
}
.as-exemple:hover { border-color: var(--primary); color: var(--primary); }

/* La saisie, collée au bas du tiroir. */
.as-saisie {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.as-saisie textarea { resize: none; flex: 1; }


/* ==========================================================================
   LA PAGE STATISTIQUES

   briac : « j'aime pas du tout ce que tu as fait sur les statistiques […]
   c'est moche ».

   Il avait raison, et le défaut était structurel : tout avait le même poids.
   Sept rectangles blancs identiques, puis six autres identiques, des titres
   de section en gris minuscule, des barres qui traversaient toute la page.
   Rien ne ressortait, donc rien ne se lisait.

   Trois décisions pour y remédier.

   UNE SECTION EST UNE CARTE. Avant, les blocs flottaient sur le fond et
   c'était aux titres de faire la séparation — ils n'y arrivaient pas. La
   carte donne la limite, le titre n'a plus qu'à nommer.

   PAS DE BOÎTE DANS UNE BOÎTE. Les tuiles à l'intérieur d'une carte n'ont
   plus de bordure : un fond légèrement teinté suffit à les détacher. Deux
   bordures imbriquées, c'est ce qui donnait l'air « filaire ».

   LA COULEUR PORTE UNE INFORMATION, jamais une décoration. Rouge = à faire
   aujourd'hui, ambre = à surveiller, vert = acquis. Le reste est gris. Quand
   tout est coloré, plus rien n'alerte.
   ========================================================================== */

.stats-page {
  padding: 4px 2px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --------------------------------------------------- une section = une carte */

.stats-bloc {
  background: var(--surface);
  border-radius: 14px;
  padding: 20px 22px 22px;
  /* Une ombre douce plutôt qu'un trait gris : elle pose la carte sur le fond
     sans ajouter une ligne de plus à l'écran. */
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
}

.stats-titre {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 600 15px/1.3 var(--font-title);
  color: var(--text);
  margin: 0 0 16px;
  /* Ni majuscules ni gris clair : un titre de section doit se lire avant le
     contenu, pas après. */
  text-transform: none;
  letter-spacing: 0;
}

/* ------------------------------------------------ le bandeau « à faire » */

/* Il ouvre la page. Ses cartes sont plus grandes que tout le reste et
   portent la seule couleur vive de l'écran : c'est là qu'on doit regarder
   en premier, et c'est cliquable — chaque carte descend à son bloc. */
.stat-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.stat-action {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 16px 18px;
  border: 0;
  border-left: 4px solid var(--tonalite, var(--primary));
  border-radius: 12px;
  background: var(--fond-ton, var(--bg));
  font: inherit;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.stat-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 24, 40, .10);
}

.stat-action.urgent    { --tonalite: #d83a52; --fond-ton: #fdeef0; }
.stat-action.attention { --tonalite: #e8930c; --fond-ton: #fdf3e3; }
.stat-action.calme     { --tonalite: #0073ea; --fond-ton: #eaf3fe; }
.stat-action.bon       { --tonalite: #00a862; --fond-ton: #e6f7ef; }

.stat-action-nb {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--tonalite);
  font-variant-numeric: tabular-nums;
}
.stat-action-titre { font-size: 13px; font-weight: 600; color: var(--text); }
.stat-action-dit { font-size: 12px; color: var(--text-soft); line-height: 1.35; }

.stat-calme {
  font-size: 13px;
  color: var(--text-soft);
  padding: 14px 16px;
  background: #e6f7ef;
  border-left: 4px solid #00a862;
  border-radius: 12px;
}

/* --------------------------------------------------------------- tuiles */

.stat-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* Sans bordure : la carte qui les contient fait déjà la limite. */
.stat-tuile {
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--bg);
}
.stat-tuile.alerte { background: #fdeef0; }
.stat-tuile.alerte .stat-valeur { color: #c02b41; }

.stat-valeur {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat-valeur.grande { font-size: 34px; }

.stat-libelle { font-size: 12px; color: var(--text-soft); margin-top: 3px; }
.stats-page .sub { font-size: 12px; color: var(--text-soft); line-height: 1.4; }

/* ----------------------------------------------- camemberts et anneaux */

.stat-donut { width: 100%; max-width: 156px; height: auto; display: block; margin: 0 auto 12px; }
.stat-donut text { text-anchor: middle; fill: var(--text); }
.stat-donut-nb { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-donut-sous { font-size: 10px; fill: var(--text-soft); font-weight: 500; }

.stat-camemberts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
  gap: 12px;
  align-items: start;
}
.stat-camembert { border-radius: 12px; padding: 16px; background: var(--bg); }
.stat-camembert .stat-ligne-tete { margin-bottom: 12px; }

.stat-ligne-tete { display: flex; flex-direction: column; gap: 2px; }
.stat-ligne-tete b { font-size: 13px; }

.stat-mixte {
  display: grid;
  grid-template-columns: 178px 1fr;
  gap: 20px;
  align-items: center;
}
@media (max-width: 760px) { .stat-mixte { grid-template-columns: 1fr; } }
.stat-mixte .stat-donut { margin-bottom: 0; }

/* La légende : des pastilles alignées, pas un paragraphe de texte gris. */
.stat-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.stat-cle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); }
.stat-cle b { color: var(--text); font-variant-numeric: tabular-nums; }
.stat-cle .swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.stat-pc { font-variant-numeric: tabular-nums; color: var(--text-faint); font-size: 11px; }

/* La barre découpée, pour les répartitions posées à plat. */
.stat-barre { display: flex; height: 10px; border-radius: 20px; overflow: hidden; background: var(--track); margin-bottom: 10px; }
.stat-part { display: block; height: 100%; }

/* ------------------------------------------------- barres horizontales */

/* Trois colonnes fixes : le nom, la piste, les chiffres. Sans cette grille,
   les valeurs se baladaient au bout de barres de longueurs différentes et
   rien ne s'alignait. */
.stat-barresh { display: flex; flex-direction: column; gap: 7px; }
.stat-barh {
  display: grid;
  grid-template-columns: minmax(90px, 168px) 1fr 84px 42px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.stat-barh-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.stat-barh-piste { background: var(--track); border-radius: 20px; height: 10px; overflow: hidden; }
.stat-barh-part { display: block; height: 100%; border-radius: 20px; }
.stat-barh-nb { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.stat-barh .stat-pc { text-align: right; }

/* ------------------------------------------------------------ tableaux */

.stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  padding: 0 10px 8px;
}
.stat-table td { padding: 9px 10px; border-top: 1px solid var(--border); }
.stat-table .nb { text-align: right; font-variant-numeric: tabular-nums; }
.stat-table .swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; }

/* ------------------------------------------------- les états « rien » */

/* Dire qu'il n'y a rien, et pourquoi — sans occuper la place d'un vrai
   résultat. Discret, gris, une seule ligne quand c'est possible. */
.stat-rien {
  font-size: 12px;
  color: var(--text-soft);
  background: var(--bg);
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.45;
}
.stat-vides { padding: 14px 16px; border-radius: 12px; background: #fdf3e3; font-size: 13px; }
.stat-vides .sub { margin-top: 4px; }
.stat-vides-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stat-vides .chip {
  background: var(--surface);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}

.stat-widgets-vide {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg);
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.45;
}

/* ------------------------------------------------------- les widgets posés */

.stat-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  align-items: start;
}
.stat-widget {
  background: var(--surface);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
}
.stat-widget-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
}
.stat-widget-x {
  flex: none;
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.stat-widget-x:hover { color: var(--danger); }
.stat-widget .stat-donut { max-width: 132px; }
.stat-widget .stat-legende { justify-content: center; }

.stat-tuiles.serre { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.stat-tuiles.serre .stat-tuile { padding: 9px 11px; }
.stat-tuiles.serre .stat-valeur { font-size: 19px; }
.stat-tuiles.serre .stat-libelle { font-size: 11px; }

/* ------------------------------------------------------------- le P&L */

.pnl-titre {
  margin: 24px 0 12px;
  font: 600 13px/1.3 var(--font-title);
  color: var(--text-soft);
}
.pnl-manques { margin: 6px 0 0; padding-left: 18px; font-size: 12px; }
.pnl-manques li { margin-bottom: 4px; color: var(--text-soft); line-height: 1.45; }
.pnl-urgent { color: #c02b41; font-weight: 600; }

/* ---------------------------------------------- personnalisation, clôture */

.btn-tool.actif { background: var(--accent-soft); border-color: var(--accent-line); color: var(--primary-dark); }

.stat-perso-tout { display: flex; flex-direction: column; gap: 14px; }
.stat-perso {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 2fr);
  gap: 22px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .05);
}
@media (max-width: 880px) { .stat-perso { grid-template-columns: 1fr; } }
.bloc-croise { grid-template-columns: 1fr; }
.stat-perso h3 { margin: 0 0 4px; font: 600 14px/1.3 var(--font-title); }
.stat-perso .sub { margin-bottom: 12px; }

.stat-perso-blocs { list-style: none; margin: 0; padding: 0; }
.stat-perso-blocs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
}
.stat-perso-blocs li:hover { background: var(--row-hover); }
.stat-perso-blocs label { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; }
.stat-perso-fleches { display: flex; gap: 2px; }
.stat-perso-fleches button {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  width: 24px; height: 24px;
  cursor: pointer;
  color: var(--text-soft);
  line-height: 1;
}
.stat-perso-fleches button:hover:not(:disabled) { background: var(--hover); }
.stat-perso-fleches button:disabled { opacity: .35; cursor: default; }

.objectif-champs { display: flex; align-items: center; gap: 8px; }
.objectif-champs select, .objectif-champs input,
.stat-perso-filtre, .croise-champ select, .croise-titre,
[data-kind="cloture-mois"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  font-size: 13px;
}
.objectif-champs input { width: 110px; font-variant-numeric: tabular-nums; }
.stat-perso-filtre { width: 100%; margin-bottom: 10px; }

.stat-perso-liste { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; }
.stat-propo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
}
.stat-propo:hover { border-color: var(--primary); background: var(--row-hover); }
.stat-propo-nom { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stat-propo-nom b { font-size: 13px; }
.stat-propo-nb {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  background: var(--track);
  border-radius: 20px;
  padding: 2px 9px;
}
.stat-propo.vide { opacity: .55; }
.stat-propo.vide .stat-propo-nb { color: #c02b41; background: #fdeef0; }

.croise-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.croise-champ { display: flex; flex-direction: column; gap: 5px; }
.croise-champ > span {
  font-size: 11px; font-weight: 600; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .04em;
}
.croise-champ select:disabled { opacity: .5; }

.croise-apercu {
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--bg);
  min-height: 120px;
}
.croise-apercu-tete {
  font-size: 11px; font-weight: 600; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px;
}
.croise-pied { display: flex; gap: 8px; margin-top: 14px; }
.croise-titre { flex: 1; }

.btn-primary {
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  cursor: pointer;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-primary:disabled { opacity: .45; cursor: default; }

.cloture-etapes li { justify-content: space-between; }
.cloture-cascade {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; padding: 12px 14px;
  border-radius: 10px;
  background: #eaf3fe;
  font-size: 13px; cursor: pointer; line-height: 1.45;
}
.cloture-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cloture-bilan { font-size: 13px; }

/* Le drapeau « terminée » d'une étiquette, dans son éditeur. */
.lab-finale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.lab-finale .sub { font-size: 11px; }