/* ============================================================
   CaptainContext — thème "carte marine"
   Papier froid, encre marine, accent sarcelle, mono = journal de bord
   ============================================================ */

:root {
  --paper: #eef1ee;
  --card: #ffffff;
  --ink: #182b3a;
  --ink-2: #53636f;
  --ink-3: #8795a0;
  --line: #d4dcd9;
  --line-soft: #e4e9e7;
  --accent: #0f7583;
  --accent-fonce: #0b5a65;
  --accent-pale: #e2eff0;
  --danger: #a03d2c;
  --danger-pale: #f6e8e4;
  --ok: #3d7a46;

  --st-ouvert: #8a6a16;
  --st-actif: #0f7583;
  --st-resolu: #3d7a46;
  --st-abandonne: #8a4b3b;
  --st-remplace: #6b6f76;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --r: 6px;
  --sidebar-w: 292px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  /* lignes de sonde très discrètes, façon carte marine */
  background-image: linear-gradient(transparent 31px, rgba(24, 43, 58, 0.025) 32px);
  background-size: 100% 32px;
}
a { color: var(--accent-fonce); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Coquille ---------- */
#app { display: flex; height: 100vh; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 40;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: var(--ink); color: #e9eef0;
  border-bottom: 3px solid var(--accent);
}
.marque {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  color: #fff; letter-spacing: 0.02em; white-space: nowrap;
}
/* V7.1 (RELI-430) — le nom du site est SAISI par les gens, il peut être long :
   on borne l'AFFICHAGE (ellipse) plutôt que la saisie — le bandeau ne doit
   jamais céder sous un nom, quel qu'il soit. ~18 caractères visibles ici,
   moins encore à l'écran étroit (media query plus bas). */
.topbar .marque { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.marque a { color: inherit; }
.marque .cap { color: #7fc6ce; }
.topbar .recherche-globale { flex: 1; max-width: 460px; position: relative; }
.topbar .recherche-globale input {
  width: 100%; padding: 6px 10px 6px 30px; border-radius: var(--r);
  /* V6.2 — `#223càd` (valeur corrompue, ignoree par le parseur) supprimee. */
  border: 1px solid #3b5062; background: #22394a;
  color: #e9eef0; font-size: 13px;
}
.topbar .recherche-globale input::placeholder { color: #90a3b0; }
.topbar .recherche-globale::before {
  content: "◎"; position: absolute; left: 9px; top: 5px; color: #90a3b0; font-size: 13px;
}
.topbar .espace { flex: 1; }
.topbar .btn-quitter { background: none; border: 1px solid #3b5062; color: #c4d0d7; border-radius: var(--r); padding: 5px 10px; font-size: 12.5px; }
.topbar .btn-quitter:hover { border-color: #7fc6ce; color: #fff; }
/* V7.1 (RELI-430) — boutons réservés à l'écran étroit : 🔍 (recherche en
   surcouche) et ⋮ (menu qui recueille Équipe, Admin, compte, Quitter).
   Invisibles au grand écran — le bandeau y est exactement celui d'avant. */
.btn-rech-mobile, .btn-menu-mobile {
  display: none; background: none; border: 1px solid #3b5062; color: #c4d0d7;
  border-radius: var(--r); padding: 4px 9px; font-size: 15px; line-height: 1.3;
  align-items: center; justify-content: center; /* V7.1b — centre la loupe SVG */
}
.btn-rech-mobile:hover, .btn-menu-mobile:hover,
.topbar.rech-ouverte .btn-rech-mobile { border-color: #7fc6ce; color: #fff; }

/* ---------- Barre latérale : l'arbre ---------- */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  margin-top: 52px; height: calc(100vh - 52px);
  background: var(--card); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.sidebar-tete {
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar-tete .eyebrow { margin: 0; }
.eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.arbre { flex: 1; overflow: auto; padding: 6px 6px 40px; }

.noeud-ligne {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 2px; border-radius: 5px;
  cursor: pointer; user-select: none; position: relative;
  border: 1px solid transparent;
}
.noeud-ligne:hover { background: var(--line-soft); }
.noeud-ligne.actif { background: var(--accent-pale); border-color: #bcd9dc; }
.noeud-ligne.actif .noeud-nom { color: var(--accent-fonce); font-weight: 600; }
/* V2.4 — flèches déplier/replier agrandies (retour d'usage : cible de clic
   trop petite) : zone 26×26 px, glyphe 14 px, survol plus visible. */
.noeud-ligne .pli {
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  color: var(--ink-3); font-size: 14px; border: none; background: none; padding: 0;
  flex: none; border-radius: 5px; cursor: pointer;
}
.noeud-ligne .pli:hover { background: var(--line); color: var(--ink); }
.noeud-ligne .pli.vide { visibility: hidden; }
.noeud-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.noeud-badge {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  background: var(--line-soft); border-radius: 8px; padding: 0 6px; flex: none;
}
.arbre ul { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--line-soft); }
.arbre > ul { border-left: none; padding-left: 0; }

/* zones de drop */
.noeud-ligne.drop-into { background: var(--accent-pale); border: 1px dashed var(--accent); }
.noeud-ligne.drop-avant::before, .noeud-ligne.drop-apres::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--accent);
}
.noeud-ligne.drop-avant::before { top: -1px; }
.noeud-ligne.drop-apres::after { bottom: -1px; }
.noeud-ligne.en-deplacement { opacity: 0.4; }
.drop-racine {
  margin: 10px 8px; padding: 8px; border: 1px dashed var(--line);
  border-radius: var(--r); text-align: center; color: var(--ink-3); font-size: 12px;
  display: none;
}
.drop-racine.visible { display: block; }
.drop-racine.drop-into { border-color: var(--accent); color: var(--accent-fonce); background: var(--accent-pale); }

.sidebar-pied { padding: 10px 12px; border-top: 1px solid var(--line-soft); }

/* ---------- Contenu principal ---------- */
.contenu {
  flex: 1; margin-top: 52px; height: calc(100vh - 52px);
  overflow: auto; padding: 22px 28px 80px;
}
.cap-chemin {
  font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin-bottom: 6px;
}
.cap-chemin a { color: var(--ink-2); }
.cap-chemin a:hover { color: var(--accent-fonce); }
.cap-chemin .sep { color: var(--ink-3); padding: 0 4px; }

h1.titre-page {
  margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
  /* V6.2 (RELI-322) — le titre porte desormais des actions a sa droite
     (« Suivre »). Sans flex, le champ en width:100% les repoussait a la ligne.
     .titre-avec-icone posait deja exactement cette regle de son cote.
     PAS de `gap` ici : il ecraserait celui de .titre-avec-icone (h1.titre-page
     est plus specifique), et les libelles portent deja leur espace litteral. */
  display: flex; align-items: center;
}
h1.titre-page input {
  font: inherit; border: none; background: transparent; width: 100%;
  border-bottom: 1px dashed transparent; padding: 0; min-width: 0;
}
/* Les actions de titre restent a droite et ne se laissent pas comprimer. */
.titre-actions { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
/* V6.2 — jeton d'une valeur selectionnee que l'editeur ne sait pas nommer
   (compte proprietaire, collection privee d'un collegue). Volontairement terne
   et en chiffres : il dit « il y a quelque chose ici que je ne peux pas
   afficher », pas « voici une valeur normale ». */
.type-pill.inconnu { background: var(--line-soft); color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.titre-actions .btn-mini { font-size: 12px; font-weight: 500; letter-spacing: 0; }
@media (max-width: 700px) { .btn-suivre-tete .btn-suivre-txt { display: none; } }
h1.titre-page input:hover { border-bottom-color: var(--line); }
h1.titre-page input:focus { border-bottom-color: var(--accent); outline: none; }
.type-pill {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-fonce);
  background: var(--accent-pale); padding: 2px 8px; border-radius: 9px; vertical-align: middle;
}

.carte {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 16px;
}
.carte h3 { margin: 0 0 8px; font-size: 13px; }
.carte h3 .eyebrow { display: block; }

.grille-contexte { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 1100px) { .grille-contexte { grid-template-columns: 1fr; } }
.zone-editable textarea {
  width: 100%; min-height: 84px; resize: vertical; border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 8px; font-size: 13px; background: #fcfdfc;
}
.zone-editable textarea:focus { border-color: var(--accent); outline: none; background: #fff; }

/* ---------- Onglets ---------- */
.onglets { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin: 18px 0 14px; }
.onglet {
  border: none; background: none; padding: 7px 14px; font-size: 13.5px;
  color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.onglet:hover { color: var(--ink); }
.onglet.actif { color: var(--accent-fonce); font-weight: 600; border-bottom-color: var(--accent); }

/* ---------- Boutons ---------- */
.btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: var(--r); padding: 6px 12px; font-size: 13px;
}
.btn:hover { border-color: var(--ink-3); }
.btn-primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primaire:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.btn-danger { color: var(--danger); border-color: #ddc0b8; }
.btn-danger:hover { background: var(--danger-pale); }
.btn-mini { padding: 2px 8px; font-size: 12px; border-radius: 4px; }
.btn-lien { border: none; background: none; color: var(--accent-fonce); padding: 0; font-size: 12.5px; }
.btn-lien:hover { text-decoration: underline; }
/* V4.7 — boutons d'action icône : zone de clic confortable + retour au survol
   (les icônes seules restent, mais on ne « chasse » plus un glyphe de 12 px) */
.btn-lien.btn-mini { font-size: 14px; padding: 3px 6px; border-radius: 5px; line-height: 1.2; }
.btn-lien.btn-mini:hover { background: var(--accent-pale); text-decoration: none; }
/* V4.7 — icônes SVG (Lucide) : alignées sur le texte, couleur héritée */
.cc-icone { vertical-align: -2px; }
button .cc-icone, a .cc-icone { pointer-events: none; }

/* V4.9 — type checklist : jauge X/Y (orange < 50 %, jaune 50-99 %, vert 100 %) */
.jauge-checklist {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.jauge-checklist .barre {
  width: 46px; height: 6px; border-radius: 3px; background: var(--line-soft, rgba(0,0,0,.12)); overflow: hidden;
}
.jauge-checklist .barre i { display: block; height: 100%; border-radius: 3px; }
.jauge-checklist .mention-attente { font-size: 13px; cursor: help; }

/* V4.12 — tableur : sélection de plage + couleurs de cellules */
.bloc-tableur td.sel { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-pale); }
.bloc-tableur td input { background: transparent; font-weight: inherit; }
.bloc-tableur th { cursor: pointer; user-select: none; position: relative; }
/* V4.12b — glisser-sélectionner, redimensionner les colonnes */
.bloc-tableur { table-layout: fixed; }
.bloc-tableur td { overflow: hidden; }
.bloc-tableur.drag-sel, .bloc-tableur.drag-sel input { user-select: none; cursor: cell; }
.bloc-tableur th .redim {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; z-index: 2;
}
.bloc-tableur th .redim:hover { background: var(--accent); opacity: .5; }
/* V4.13 — présence : pastilles flottantes + bloc/cellule occupés */
#cc-presence { position: fixed; top: 62px; right: 14px; z-index: 850; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; pointer-events: none; }
.presence-pill {
  display: inline-flex; align-items: center; gap: 6px; pointer-events: auto;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px;
  padding: 3px 10px; font-size: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.presence-point { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.presence-detail { color: var(--ink-3); font-size: 11px; }
.bloc-ligne.bloc-occupe { position: relative; outline: 2px dashed rgba(245, 158, 11, .55); outline-offset: 2px; border-radius: 4px; }
.bloc-ligne.bloc-occupe::after {
  content: '✏ ' attr(data-occupant); position: absolute; top: -9px; right: 4px;
  font-size: 10px; line-height: 1.5; background: #f59e0b; color: #fff;
  border-radius: 8px; padding: 0 6px; pointer-events: none; z-index: 5;
}
td.cellule-occupee { position: relative; outline: 2px dashed #f59e0b; outline-offset: -2px; }
td.cellule-occupee::after {
  content: '✏ ' attr(data-occupant); position: absolute; top: -9px; right: 2px;
  font-size: 10px; line-height: 1.5; background: #f59e0b; color: #fff;
  border-radius: 8px; padding: 0 6px; pointer-events: none; z-index: 5;
}

/* V4.12h — cellules référencées par la formule en cours d'édition */
.bloc-tableur td.ref-0 { box-shadow: inset 0 0 0 2px #3b82f6; }
.bloc-tableur td.ref-1 { box-shadow: inset 0 0 0 2px #ef4444; }
.bloc-tableur td.ref-2 { box-shadow: inset 0 0 0 2px #22c55e; }
.bloc-tableur td.ref-3 { box-shadow: inset 0 0 0 2px #a855f7; }
.bloc-tableur td.ref-4 { box-shadow: inset 0 0 0 2px #f59e0b; }

/* V4.10 — bloc « cases à cocher » */
.bloc-cases-ligne { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.bloc-cases-ligne input[type="checkbox"] { flex: none; }
.bloc-cases-texte { flex: 1; border: none; background: none; font: inherit; padding: 2px 0; outline: none; }
.bloc-cases-ligne.fait .bloc-cases-texte { text-decoration: line-through; color: var(--ink-3); }

/* V4.10 — planning « semaine type » (champ horaires) */
.semaine-type { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.semaine-entete { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding: 4px 2px; text-align: center; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.semaine-col { min-height: 60px; }
.semaine-chip {
  display: block; width: 100%; text-align: left; margin: 3px 0; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card);
  font-size: 11.5px; cursor: pointer; line-height: 1.35;
}
.semaine-chip:hover { border-color: var(--accent); background: var(--accent-pale); }
.semaine-chip strong { color: var(--accent-fonce); }

/* V4.9 — type horaires : chips de jours dans l'éditeur */
.jour-chip {
  border: 1px solid var(--line); background: var(--card); border-radius: 10px;
  padding: 2px 7px; font-size: 11px; cursor: pointer; text-transform: capitalize;
}
.jour-chip.actif { background: var(--accent-pale); border-color: var(--accent); color: var(--accent-fonce); font-weight: 600; }

/* ---------- Tableau (vue base) ---------- */
.barre-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chip-filtre {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-pale); color: var(--accent-fonce);
  border: 1px solid #bcd9dc; border-radius: 12px; padding: 2px 8px; font-size: 12px;
}
.chip-filtre button { border: none; background: none; color: inherit; padding: 0; font-size: 13px; line-height: 1; }

.enveloppe-tableau { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
table.base { border-collapse: collapse; width: 100%; min-width: 640px; }
table.base th, table.base td {
  border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  padding: 6px 10px; text-align: left; font-size: 13px; vertical-align: top;
}
table.base th {
  background: #f6f8f6; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
  cursor: pointer; user-select: none; white-space: nowrap; position: sticky; top: 0;
}
table.base th .fleche-tri { color: var(--accent-fonce); }
table.base th.th-plus { cursor: default; width: 40px; text-align: center; }
table.base td.cellule-editable { cursor: text; }
/* V7.0 (RELI-390) — « des fois je vois mal la souris, surtout sur le tableau ».
   Le seul retour visuel sous le curseur était CE survol de cellule — un
   #f4f9f9 sur fond blanc, quasi indiscernable — et rien au niveau de la
   ligne : perdre le curseur des yeux, c'était le perdre tout court. Deux
   renforts : la LIGNE survolée se teinte (on retrouve la souris d'un coup
   d'œil, même entre deux cellules), et la CELLULE éditable passe à l'accent
   pâle, franchement visible. Les fonds spéciaux (ligne-nouvelle, formules)
   sont recouverts PENDANT le survol seulement : c'est le but — dire où l'on
   est — et tout revient en repartant. */
table.base tbody tr:hover td { background: #f1f6f5; }
table.base td.cellule-editable:hover,
table.base tbody tr:hover td.cellule-editable:hover { background: var(--accent-pale); }
table.base td input, table.base td select {
  width: 100%; border: 1px solid var(--accent); border-radius: 3px; padding: 2px 5px; font-size: 13px; background: #fff;
}
table.base td .valeur-multi { display: inline-block; background: var(--line-soft); border-radius: 8px; padding: 0 7px; margin: 0 3px 2px 0; font-size: 12px; }
table.base td .booleen { font-family: var(--mono); }
td.cellule-titre a { font-weight: 600; }
tr.ligne-nouvelle td { background: #fbfcfb; }
tr.ligne-nouvelle input { border: 1px solid var(--line); }
tr.ligne-nouvelle input:focus { border-color: var(--accent); }
.desc-courte-cellule { color: var(--ink-2); }

/* popover ajout colonne / multiselect */
.popover {
  position: fixed; z-index: 90; background: var(--card); border: 1px solid var(--line); /* V3.1 : au-dessus des modales (palette couleurs dans « Gérer les options ») */
  border-radius: var(--r); box-shadow: 0 8px 24px rgba(24, 43, 58, 0.16); padding: 12px; min-width: 230px;
  max-height: calc(100vh - 24px); overflow-y: auto; /* V3.2 : jamais coupé — défilement interne en dernier recours */
}
.popover label { display: block; font-size: 12px; color: var(--ink-2); margin: 8px 0 3px; }
.popover input[type="text"], .popover select, .popover textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 5px 7px; font-size: 13px;
}
.popover .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.popover .case { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 3px 0; }

/* ---------- Kanban ---------- */
.kanban { display: flex; gap: 12px; overflow-x: auto; align-items: flex-start; padding-bottom: 10px; }
.kanban-col {
  min-width: 230px; width: 230px; background: #f2f5f3; border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px; flex: none;
}
.kanban-col.drop-into { border-color: var(--accent); background: var(--accent-pale); }
.kanban-col h4 {
  margin: 0 0 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2); display: flex; justify-content: space-between;
}
.kanban-carte {
  background: var(--card); border: 1px solid var(--line); border-radius: 5px;
  padding: 8px 10px; margin-bottom: 8px; cursor: grab;
}
.kanban-carte:active { cursor: grabbing; }
.kanban-carte .t { font-weight: 600; font-size: 13px; }
.kanban-carte .d { color: var(--ink-2); font-size: 12px; margin-top: 2px; }
.kanban-carte.en-deplacement { opacity: 0.4; }

/* ---------- Notes ---------- */
.note-item {
  display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.note-item:last-child { border-bottom: none; }
.badge-type {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 8px; flex: none;
}
.badge-type.decision { background: #e2eff0; color: var(--st-actif); }
.badge-type.question { background: #f4ecd8; color: var(--st-ouvert); }
.badge-type.assumption { background: #ece8f2; color: #5d4d85; }
.badge-type.todo { background: #e6efe7; color: var(--st-resolu); }
.badge-statut { font-family: var(--mono); font-size: 10.5px; flex: none; }
.badge-statut::before { content: "● "; font-size: 8px; vertical-align: 1px; }
.badge-statut.ouvert { color: var(--st-ouvert); }
.badge-statut.actif { color: var(--st-actif); }
.badge-statut.resolu { color: var(--st-resolu); }
.badge-statut.abandonne { color: var(--st-abandonne); }
.badge-statut.remplace { color: var(--st-remplace); }
.note-contenu { flex: 1; }
.note-contenu .remplacement { color: var(--ink-2); font-size: 12px; margin-top: 2px; }
.note-contenu .origine { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.note-actions { display: flex; gap: 6px; flex: none; }
.note-actions select { font-size: 11.5px; border: 1px solid var(--line); border-radius: 4px; padding: 1px 3px; }
.note-date { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: none; }

.form-note { display: flex; gap: 8px; margin-top: 10px; }
.form-note select { border: 1px solid var(--line); border-radius: var(--r); padding: 5px; font-size: 13px; }
.form-note input { flex: 1; border: 1px solid var(--line); border-radius: var(--r); padding: 5px 9px; font-size: 13px; }

/* V7.2 (RELI-440) — carte Notes : onglets par type, recherche, réponse,
   et les notes multi-lignes (ADR) qui se lisent en lignes. */
.notes-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.notes-onglets { display: flex; flex-wrap: wrap; gap: 4px; }
.note-onglet {
  border: 1px solid var(--line); background: var(--card); border-radius: 12px;
  padding: 2px 10px; font-size: 12px; color: var(--ink-2); cursor: pointer;
}
.note-onglet:hover { border-color: var(--accent); }
.note-onglet.actif { background: var(--accent-pale); border-color: var(--accent); color: var(--accent-fonce); font-weight: 600; }
.note-onglet-nb { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.note-onglet.actif .note-onglet-nb { color: var(--accent-fonce); }
.note-recherche { flex: 1; min-width: 160px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 13px; }
.note-item .cc-texte-lecture { white-space: pre-line; }
.note-reponse { font-size: 13px; color: var(--st-resolu); margin-top: 2px; white-space: pre-line; }

/* ---------- Fiche détail ---------- */
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
@media (max-width: 1050px) { .fiche-grille { grid-template-columns: 1fr; } }
.detail-long textarea { min-height: 220px; font-size: 13.5px; line-height: 1.55; }
.rattachement-bloc { border: 1px solid var(--line-soft); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; }
.rattachement-bloc .chemin { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.champ-ligne { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.champ-ligne label { width: 110px; flex: none; font-size: 12.5px; color: var(--ink-2); }
.champ-ligne input, .champ-ligne select {
  flex: 1; border: 1px solid var(--line); border-radius: 4px; padding: 4px 7px; font-size: 13px; min-width: 0;
}
.lien-item { display: flex; gap: 8px; padding: 5px 0; font-size: 13px; align-items: baseline; }
.lien-item .rel { font-family: var(--mono); font-size: 11.5px; color: var(--accent-fonce); background: var(--accent-pale); border-radius: 8px; padding: 1px 7px; flex: none; }
.fichier-item { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 13px; }
.fichier-item .taille { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ---------- Export : le manifeste ---------- */
.export-grille { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .export-grille { grid-template-columns: 1fr; } }
.export-form label.bloc { display: block; font-size: 12.5px; color: var(--ink-2); margin: 12px 0 4px; }
.export-form .cases { display: flex; flex-direction: column; gap: 4px; }
.export-form .case { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.export-form select, .export-form input[type="text"], .export-form input[type="number"] {
  width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; font-size: 13px;
}
.filtre-ligne { display: flex; gap: 6px; margin-bottom: 6px; }
.filtre-ligne select, .filtre-ligne input { flex: 1; min-width: 0; }

.manifeste {
  background: #10222f; color: #d7e4e6; border-radius: var(--r);
  border-left: 4px solid var(--accent);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  padding: 0; overflow: hidden;
}
.manifeste-tete {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 14px; background: #0b1922; border-bottom: 1px solid #24404d;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #7fa6ad;
}
.manifeste-tete .stats span { margin-left: 12px; color: #a9c6ca; }
.manifeste pre {
  margin: 0; padding: 14px 16px; overflow: auto; max-height: 62vh;
  white-space: pre-wrap; word-break: break-word;
}
.manifeste .vide { padding: 30px; text-align: center; color: #6d8a91; }

/* ---------- Recherche ---------- */
.resultat-groupe h3 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 6px; }
.resultat-item { padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.resultat-item .extrait { color: var(--ink-2); font-size: 12.5px; }

/* ---------- Connexion ---------- */
.page-connexion {
  /* #app est en display:flex — sans flex:1 la page se réduit à la largeur
     de la boîte et laisse le fond blanc à droite. */
  flex: 1 1 100%; width: 100%;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  background-image: radial-gradient(circle at 20% 20%, #22394a 0, transparent 45%),
                    linear-gradient(transparent 31px, rgba(255,255,255,0.03) 32px);
  background-size: auto, 100% 32px;
}
.boite-connexion {
  background: var(--card); border-radius: 8px; padding: 30px 32px; width: 360px;
  border-top: 4px solid var(--accent);
}
.boite-connexion .marque { color: var(--ink); font-size: 19px; }
.boite-connexion .marque .cap { color: var(--accent-fonce); }
.boite-connexion .sous-titre { color: var(--ink-2); font-size: 12.5px; margin: 4px 0 20px; }
.boite-connexion label { display: block; font-size: 12.5px; color: var(--ink-2); margin: 12px 0 4px; }
.boite-connexion input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; font-size: 14px;
}
.boite-connexion .btn-primaire { width: 100%; margin-top: 18px; padding: 9px; }
.erreur-connexion { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ---------- Toast ---------- */
#toasts { position: fixed; bottom: 18px; right: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--ink); color: #e9eef0; border-left: 3px solid var(--accent);
  border-radius: 5px; padding: 9px 14px; font-size: 13px; max-width: 340px;
  box-shadow: 0 6px 18px rgba(24,43,58,0.3);
}
.toast.erreur { border-left-color: var(--danger); }

/* ---------- Divers ---------- */
.vide-etat { color: var(--ink-3); font-size: 13px; padding: 14px 0; }
.ligne-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mt { margin-top: 14px; }
.confirm-suppr { color: var(--danger); font-size: 12.5px; }

@media (max-width: 800px) {
  .sidebar { position: fixed; left: 0; z-index: 30; transform: translateX(-100%); transition: transform 0.18s; }
  .sidebar.ouverte { transform: none; box-shadow: 4px 0 20px rgba(0,0,0,0.15); }
  .btn-burger { display: inline-block !important; }
  .contenu { padding: 16px 14px 80px; }
}
.btn-burger { display: none; background: none; border: none; color: #e9eef0; font-size: 18px; padding: 4px; }


/* ---------- V2 : Vue Graphe ---------- */
.graphe-outils { align-items: center; gap: 10px; flex-wrap: wrap; }
.graphe-outils .case { gap: 5px; font-size: 12.5px; }
.graphe-conteneur {
  height: 64vh; min-height: 380px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.graphe-legende { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* ---------- V2.6 : Vue Carte (Leaflet + OpenStreetMap) ---------- */
.carte-outils { align-items: center; gap: 10px; flex-wrap: wrap; }
.carte-statut { font-size: 12.5px; color: var(--ink-2); }
.carte-conteneur {
  height: 64vh; min-height: 380px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  z-index: 0; /* garde la carte sous les popovers / la barre latérale de l'app */
}
.carte-echecs { margin-top: 8px; }

/* Épingle personnalisée (divIcon) — pas d'image marqueur à charger */
.cc-pin-wrap { background: none; border: none; }
.cc-pin {
  display: block; position: relative; width: 22px; height: 22px;
  margin: 0 auto;
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.cc-pin::after {
  content: ''; position: absolute;
  top: 7px; left: 7px; width: 8px; height: 8px;
  background: #fff; border-radius: 50%;
}
.cc-pin-multi { background: var(--accent-fonce); }
.cc-pin-multi::after {
  content: attr(data-n);
  top: 0; left: 0; width: 22px; height: 22px;
  background: none; color: #fff;
  transform: rotate(45deg);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--sans);
}

/* Popup au thème « carte marine » */
.cc-popup { font-family: var(--sans); }
.cc-popup-tete { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 6px; }
.cc-popup-item + .cc-popup-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.cc-popup-titre { font-weight: 700; color: var(--ink); font-size: 14px; }
.cc-popup-lieu { font-size: 12.5px; color: var(--ink-2); margin: 3px 0; }
.cc-popup-col { color: var(--ink-3); }
.cc-popup-desc { font-size: 12px; color: var(--ink-2); margin: 3px 0 6px; }
.cc-popup-lien { display: inline-block; margin-top: 4px; }
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-popup-content-wrapper { border-radius: var(--r); }

/* ---------- V2.6 : Vue Calendrier ---------- */
.cal-outils { align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-titre { font-weight: 600; color: var(--ink); margin-left: 8px; font-size: 14px; }
.cal-bascule { display: inline-flex; gap: 4px; }
.cal-bascule .btn.actif { background: var(--accent); color: #fff; border-color: var(--accent); }
.cal-champ-lbl { font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.cal-champ { border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; font-size: 12.5px; }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cal-entete { background: var(--accent-pale); color: var(--ink-2); font-size: 11.5px; font-weight: 600;
  text-align: center; padding: 5px 2px; text-transform: uppercase; letter-spacing: .03em; }
.cal-cell { background: var(--card); min-height: 94px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.cal-cell-sem { min-height: 320px; }
.cal-hors { background: #f6f8f7; }
.cal-hors .cal-num { color: var(--ink-3); }
.cal-auj { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-num { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.cal-entete-sem { background: none; text-align: left; padding: 2px 0 4px; }
.cal-cell-evts { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-evt { display: block; background: var(--accent); color: #fff; font-size: 11.5px; border-radius: 4px;
  padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.cal-evt:hover { background: var(--accent-fonce); }
.cal-plus { font-size: 11px; color: var(--ink-3); padding-left: 4px; }

/* ---------- V2.6 : Vue Planning / Gantt ---------- */
.plan-outils { align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-champ-lbl { font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.plan-champ-lbl select { border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; font-size: 12.5px; }
.plan-periode { border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.plan-conteneur { --plan-label: 190px; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--card); }
.plan-entete { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--accent-pale); }
.plan-label { width: var(--plan-label); flex: 0 0 var(--plan-label); box-sizing: border-box;
  padding: 6px 10px; font-size: 12.5px; color: var(--ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--line); }
a.plan-label:hover { color: var(--accent); }
.plan-label-tete { font-weight: 600; color: var(--ink-2); }
.plan-axe { position: relative; flex: 1; height: 26px; }
.plan-tick-lbl { position: absolute; top: 5px; transform: translateX(-50%); font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.plan-corps { position: relative; }
.plan-grille { position: absolute; top: 0; bottom: 0; left: var(--plan-label); right: 0; pointer-events: none; }
.plan-grille-l { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); }
.plan-row { display: flex; align-items: center; min-height: 30px; border-bottom: 1px solid var(--line-soft); }
.plan-row:last-child { border-bottom: none; }
.plan-track { position: relative; flex: 1; height: 30px; }
.plan-bar { position: absolute; top: 5px; height: 20px; min-width: 8px; background: var(--accent);
  border-radius: 4px; display: flex; align-items: center; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.plan-bar:hover { background: var(--accent-fonce); }
.plan-bar-txt { color: #fff; font-size: 11px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- V2.8 : autocomplétion des formules ---------- */
.formule-ac {
  position: absolute; z-index: 3000; max-height: 240px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14); font-size: 12.5px; min-width: 220px;
}
.formule-ac-item { display: flex; align-items: baseline; gap: 7px; padding: 4px 9px; cursor: pointer; }
.formule-ac-item.actif, .formule-ac-item:hover { background: var(--accent-pale); }
.formule-ac-nom { font-family: var(--mono); font-weight: 600; color: var(--accent-fonce); white-space: nowrap; }
.formule-ac-sig { color: var(--ink-3); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.formule-ac-aide { color: var(--ink-2); font-size: 11px; margin-left: auto; text-align: right; padding-left: 10px; }

/* ---------- V2 : Équipe ---------- */
.btn-lien-topbar {
  /* V6.2 (RELI-322) — `background: none` MANQUAIT, et c'etait tres visible.
     Equipe et Admin sont des <a> (transparents par defaut) ; la brique
     Messages est le seul <button> a porter cette classe, et un <button> garde
     le `buttonface` gris clair du navigateur. Resultat : un pave gris avec du
     texte #c4d0d7 dans une topbar bleu nuit — la brique avait l'air desactivee.
     Toutes les autres classes de bouton du fichier posent ce reset
     (.btn-quitter, .btn-burger, .btn-compte, .btn-lien) ; celle-ci l'a rate. */
  background: none; -webkit-appearance: none; appearance: none;
  color: #c4d0d7; font-size: 12.5px; margin-right: 12px;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r);
  /* Pas de `gap` : les libelles sont ecrits ' Equipe', ' Admin', ' Messages',
     espace compris — un gap s'y ajouterait au lieu de le remplacer. */
  padding: 3px 9px; display: inline-flex; align-items: center;
}
.btn-lien-topbar:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.equipe-table td { vertical-align: middle; }
.equipe-table select { max-width: 240px; }
.compte-inactif td { opacity: .5; }
.form-equipe {
  display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px;
  align-items: center; max-width: 560px; margin-bottom: 10px;
}
.form-equipe label { font-size: 12.5px; color: var(--ink-2); }

/* ---------- V2 : lecture seule ---------- */
input:disabled, textarea:disabled, select:disabled {
  background: transparent; color: var(--ink); opacity: 1; cursor: default;
}
.titre-page input:disabled { border-color: transparent; }

/* ============================================================
   V2.1 — retours d'usage : enregistrement auto, colonnes
   redimensionnables/masquables, gestion des options, duplication
   ============================================================ */

/* -- Indicateur d'enregistrement (carteTexteAutosave) -- */
.carte h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.entete-sauve { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; text-transform: none; letter-spacing: normal; }
.statut-sauve {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 4px;
}
.statut-sauve::before { content: "\25CF"; font-size: 8px; }
.statut-sauve.enregistre { color: var(--ok); }
.statut-sauve.enregistrement { color: var(--st-ouvert); }
.statut-sauve.non-enregistre { color: var(--danger); }
.bouton-disquette {
  border: 1px solid var(--line); background: var(--card); border-radius: 4px;
  font-size: 12px; line-height: 1; padding: 3px 6px; cursor: pointer;
}
.bouton-disquette:hover { border-color: var(--accent); background: var(--accent-pale); }

/* -- Colonnes redimensionnables + retour à la ligne / troncature -- */
table.base { table-layout: fixed; }
table.base th { overflow: hidden; padding-right: 14px; }
table.base th .poignee-resize {
  position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize;
  user-select: none; touch-action: none;
}
table.base th .poignee-resize:hover, table.base th .poignee-resize:active { background: var(--accent); opacity: .35; }
table.base td.cellule-souple { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
table.base td.cellule-tronque { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* V2.4 — boutons d'action du tableau espacés et grossis (anti-misclic) */
table.base td.cellule-actions { white-space: nowrap; text-align: center; }
table.base td.cellule-actions .btn-lien {
  font-size: 15px; padding: 4px 6px; margin: 0 1px; border-radius: 5px; color: var(--accent-fonce);
  vertical-align: middle;
}
table.base td.cellule-actions .btn-lien:hover { background: var(--accent-pale); text-decoration: none; }
table.base th.th-plus .btn { padding: 4px 10px; }

/* ---------- V2.4 : formules ---------- */
table.base td.cellule-formule {
  color: var(--accent-fonce); background: #fafcfc;
  font-variant-numeric: tabular-nums; cursor: default;
}
.formule-erreur { color: var(--danger); cursor: help; }
.valeur-formule { color: var(--accent-fonce); font-variant-numeric: tabular-nums; }

.formules-noeud { margin: 0 0 12px; }
.formules-entete { display: flex; align-items: center; gap: 10px; }
.formules-toggle { font-size: 13px; font-weight: 600; text-decoration: none; }
.formules-toggle:hover { text-decoration: none; opacity: .8; }
.formules-cartes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.formule-carte {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; min-width: 130px; max-width: 320px;
}
.formule-titre {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-2); display: flex; align-items: center; gap: 6px;
}
.formule-carte .formule-editer { opacity: 0; transition: opacity .1s; }
.formule-carte:hover .formule-editer { opacity: 1; }
.formule-resultat {
  font-size: 19px; font-weight: 600; color: var(--accent-fonce);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.formule-resultat .mini-graphe { font-weight: 400; }

/* ---------- V8.0 (RELI-451) : bandeau des scénarios ---------- */
/* Le bandeau se lit comme une SUITE du panneau ∑ : mêmes cartes, même en-tête,
   même repli. Ce sont deux moitiés d'une seule idée — les leviers et ce qu'ils
   font bouger — et un langage visuel distinct les aurait fait passer pour deux
   fonctionnalités sans rapport. D'où la réutilisation de .formules-entete et de
   .formule-titre plutôt qu'une famille de classes parallèle. */
.scenarios-noeud { margin: -4px 0 12px; }
.scenarios-cartes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.scenario-carte {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; min-width: 150px; max-width: 320px;
  display: flex; flex-direction: column; gap: 4px;
}
/* Une valeur surchargée localement DOIT se distinguer d'une valeur partagée :
   sans cela on croit avoir changé le tableau pour l'équipe — ou l'inverse, et
   c'est pire. Un liseré, comme .bandeau-partage, plutôt qu'une couleur de fond :
   la carte reste lisible et la différence se voit du coin de l'œil. */
.scenario-carte.surcharge { border-left: 3px solid var(--accent); background: var(--accent-pale); }
.scen-ctrl {
  width: 100%; font: inherit; font-variant-numeric: tabular-nums;
  padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; color: var(--ink);
}
.scen-bornes { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.scen-orphelin {
  font-size: 10px; text-transform: none; letter-spacing: 0;
  color: var(--ink-3); border: 1px dashed var(--line); border-radius: var(--r);
  padding: 0 4px; font-weight: 400;
}
.scen-a-parametrer { font-size: 12px; color: var(--danger); font-style: italic; }
.scenario-carte .scen-partager { align-self: flex-start; }
.scenario-carte .formule-editer { opacity: 0; transition: opacity .1s; }
.scenario-carte:hover .formule-editer { opacity: 1; }
/* Sur une fiche, le scénario se LIT et ne se règle pas : la mention est
   volontairement discrète — elle explique un nombre, elle n'invite pas à agir. */
.scen-mention { font-size: 11px; color: var(--ink-3); margin-left: 6px; }
/* Éditeur : le libellé et son expression sur une ligne, l'expression prenant la
   place restante — c'est elle qu'on relit. */
.scen-options { margin-top: 6px; display: grid; gap: 4px; }
.scen-option-ligne { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.scen-option-ligne input:last-of-type { flex: 1; min-width: 0; }

.mini-graphe { display: grid; gap: 3px; min-width: 190px; margin-top: 4px; }
.mini-graphe-ligne { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.mini-graphe-label {
  flex: none; width: 84px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--ink-2); text-transform: none; letter-spacing: 0;
}
.mini-graphe-barre-zone { flex: 1; background: var(--line-soft); border-radius: 3px; height: 10px; overflow: hidden; }
.mini-graphe-barre { display: block; height: 100%; background: var(--accent); border-radius: 3px; min-width: 2px; }
.mini-graphe-nb { flex: none; font-family: var(--mono); font-size: 11px; color: var(--ink-2); min-width: 22px; text-align: right; }

/* -- Titre : icône crayon au survol (découvrabilité de l'édition inline) -- */
.icone-edit { opacity: 0; color: var(--ink-3); font-size: 11px; transition: opacity .1s; }
td.cellule-titre:hover .icone-edit { opacity: 1; }

/* -- Popover : aide -- */
.popover .aide-modal { font-size: 12px; color: var(--ink-2); margin: 0 0 10px; }

/* -- Modal centrée (ex. gestion des options d'un champ) -- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(16, 28, 38, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 80; padding: 20px;
}
.modal {
  background: var(--card); border-radius: 8px; width: 100%; max-width: 440px;
  max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 50px rgba(16, 28, 38, 0.35);
}
.modal-tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
}
.modal-tete h3 { margin: 0; font-size: 14px; }
.modal-fermer { font-size: 18px; line-height: 1; color: var(--ink-2); }
.modal-corps { padding: 14px 16px; overflow-y: auto; }
.aide-modal { font-size: 12px; color: var(--ink-2); margin: 0 0 12px; }
.options-liste { display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow-y: auto; }
.option-ligne { display: flex; gap: 6px; align-items: center; }
.option-ligne input[type="text"] { flex: 1; border: 1px solid var(--line); border-radius: 4px; padding: 4px 7px; font-size: 13px; }

/* -- Métadonnées (créé/modifié le & par) -- */
.carte-meta { font-size: 12.5px; color: var(--ink-2); }
.carte-meta .meta-ligne { display: flex; gap: 8px; padding: 3px 0; }
.carte-meta .meta-libelle { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); width: 70px; flex: none; }

/* ============================================================
   V2.3 — Éditeur à blocs (« Détail long », façon Notion)
   ============================================================ */
.carte-blocs { padding-bottom: 6px; }
.blocs-editeur { position: relative; font-size: 13.5px; line-height: 1.55; }
.blocs-zone { min-height: 120px; }
.blocs-pied { height: 48px; cursor: text; }

.bloc-ligne { display: flex; align-items: flex-start; position: relative; border-radius: 4px; }
.bloc-ligne.bloc-cache { display: none; }
.bloc-marge { width: 24px; flex: none; display: flex; justify-content: center; padding-top: 4px; }
.bloc-corps { flex: 1; min-width: 0; padding: 2px 0; }

.bloc-poignee {
  opacity: 0; border: 0; background: none; cursor: grab; color: var(--ink-3);
  font-size: 13px; padding: 1px 3px; border-radius: 4px; line-height: 1;
}
.bloc-ligne:hover .bloc-poignee { opacity: 1; }
.bloc-poignee:hover { background: var(--line-soft); color: var(--ink-2); }
.bloc-en-deplacement { opacity: .4; }
.bloc-drop-avant { box-shadow: 0 -2px 0 var(--accent); }
.bloc-drop-apres { box-shadow: 0 2px 0 var(--accent); }

/* -- texte riche -- */
.bloc-texte { outline: none; min-height: 1.5em; word-break: break-word; }
.bloc-texte:empty::before, .bloc-legende:empty::before {
  content: attr(data-placeholder); color: var(--ink-3); pointer-events: none;
}
.lecture-seule .bloc-texte:empty::before { content: ''; }
.bloc-texte a { color: var(--accent); }
.bloc-titre1 { font-size: 21px; font-weight: 700; margin-top: 10px; }
.bloc-titre2 { font-size: 17px; font-weight: 700; margin-top: 8px; }
.bloc-titre3 { font-size: 14.5px; font-weight: 700; margin-top: 6px; }
.bloc-avec-repli { display: flex; align-items: baseline; gap: 2px; }
.bloc-avec-repli .bloc-texte { flex: 1; min-width: 0; }
/* V2.4 — flèche agrandie (cible de clic confortable dans les documents) */
.bloc-repli {
  border: 0; background: none; cursor: pointer; color: var(--ink-3); flex: none;
  font-size: 15px; padding: 2px 6px; border-radius: 4px;
  transition: transform .12s; opacity: 0;
}
.bloc-repli:hover { background: var(--line-soft); color: var(--ink); }
.bloc-ligne:hover .bloc-repli, .bloc-repli.replie { opacity: 1; }
.bloc-repli.replie { transform: rotate(-90deg); color: var(--accent); }

.bloc-liste-ligne { display: flex; gap: 8px; }
.bloc-puce { flex: none; color: var(--ink-2); min-width: 14px; text-align: right; user-select: none; }
.bloc-liste-ligne .bloc-texte { flex: 1; min-width: 0; }

.bloc-citation { border-left: 3px solid var(--ink-2); padding-left: 12px; font-style: italic; color: var(--ink-2); }

.bloc-callout { display: flex; gap: 8px; border-radius: var(--r); padding: 10px 12px; align-items: flex-start; }
.bloc-callout .bloc-texte { flex: 1; min-width: 0; }
.bloc-callout-emoji { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1.3; padding: 0; }
.bloc-palette-emoji { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.bloc-palette-emoji button { font-size: 16px; padding: 3px; }

.bloc-code-enveloppe { position: relative; }
.bloc-code {
  font-family: var(--mono); font-size: 12.5px; background: #1d2b36; color: #dfe8ee;
  border-radius: var(--r); padding: 8px 34px 8px 12px; white-space: pre-wrap; outline: none;
  min-height: 1.5em; word-break: break-word; /* V3.1 : compact, grandit avec le contenu */
}
.bloc-code-copier {
  position: absolute; top: 6px; right: 6px; border: 0; border-radius: 4px;
  background: rgba(255, 255, 255, 0.12); color: #dfe8ee; cursor: pointer;
  font-size: 12px; padding: 3px 6px; opacity: 0; transition: opacity .1s;
}
.bloc-code-enveloppe:hover .bloc-code-copier { opacity: 1; }
.bloc-code-copier:hover { background: rgba(255, 255, 255, 0.24); }

.bloc-separateur { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }

/* -- tableau -- */
.bloc-tableau-enveloppe { position: relative; padding-right: 22px; padding-bottom: 22px; overflow-x: auto; }
/* V4.2 — bloc formule */
.bloc-formule { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--line-soft); border-radius: 8px; }
.bloc-formule-sig { font-style: italic; font-weight: 700; color: var(--accent, #0e6570); }
.bloc-formule-eq { color: var(--ink-3); }
.bloc-formule-expr { flex: 1; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-family: ui-monospace, monospace; font-size: 13px; }
.bloc-formule-res { font-weight: 600; }
.bloc-formule-res.err { color: #a03d2c; font-weight: 400; font-size: 13px; }

/* V4.2 — bloc tableur (mini-Excel) */
.bloc-tableur { border-collapse: collapse; margin: 2px 0; }
.bloc-tableur th { background: var(--line-soft); border: 1px solid var(--line); padding: 2px 6px; font-size: 12px; color: var(--ink-3); font-weight: 600; text-align: center; min-width: 34px; }
.bloc-tableur th.coin, .bloc-tableur th.num { position: sticky; left: 0; }
.bloc-tableur td { border: 1px solid var(--line); padding: 0; }
.bloc-tableur td input { border: 0; outline: none; padding: 4px 6px; width: 100%; box-sizing: border-box; font-size: 13px; background: transparent; } /* V4.12h — suit la largeur de la colonne */
.bloc-tableur td input.f { color: var(--accent, #0e6570); font-weight: 600; }
.bloc-tableur td.f { color: var(--accent, #0e6570); font-weight: 600; padding: 4px 6px; }
.bloc-tableur td input:focus { box-shadow: inset 0 0 0 2px var(--accent, #0e6570); }
.bloc-tableur-barre { display: flex; gap: 6px; margin-top: 4px; }

/* V5.1a — DÉPLACER une colonne / une ligne : poignée ⠿ dans le repère, révélée
   au survol, et trait d'insertion pendant le glisser. Le repère garde ses autres
   rôles (clic = sélection, bord droit = redimensionnement). */
.bloc-tableur th { position: relative; }
.bloc-tableur th .deplacer {
  position: absolute; left: 1px; top: 50%; transform: translateY(-50%);
  font-size: 9px; line-height: 1; color: var(--ink-3); cursor: grab;
  opacity: 0; transition: opacity .12s ease; padding: 2px 1px;
}
.bloc-tableur th.num .deplacer { left: 50%; top: 1px; transform: translateX(-50%); }
.bloc-tableur th:hover .deplacer { opacity: .75; }
.bloc-tableur th .deplacer:hover { opacity: 1; color: var(--accent); }
.bloc-tableur th .deplacer:active { cursor: grabbing; }
.bloc-tableur th.en-deplacement { opacity: .5; }
.bloc-tableur th.depot-avant { box-shadow: inset 2px 0 0 var(--accent); }
.bloc-tableur th.depot-apres { box-shadow: inset -2px 0 0 var(--accent); }
.bloc-tableur th.num.depot-avant { box-shadow: inset 0 2px 0 var(--accent); }
.bloc-tableur th.num.depot-apres { box-shadow: inset 0 -2px 0 var(--accent); }

/* V5.1 (RELI-449) — barre d'ONGLETS du tableur, posée au-dessus de la grille.
   Le « ＋ » reste une pastille discrète (même parti pris que le bloc colonnes)
   et le chevron ⌄ n'apparaît que sur l'onglet actif. */
.tableur-onglets { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 0 0 -1px; }
.tableur-onglet {
  border: 1px solid var(--line); background: var(--fond-2, #f7f9f9); color: var(--ink-2);
  border-bottom-color: var(--line); border-radius: 6px 6px 0 0;
  padding: 3px 10px; font-size: 12.5px; max-width: 200px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.tableur-onglet:hover { border-color: var(--accent); color: var(--ink); }
.tableur-onglet.actif { background: var(--card, #fff); color: var(--ink); font-weight: 600; border-bottom-color: var(--card, #fff); }
.tableur-onglet-nom { border: 1px solid var(--accent); border-radius: 4px; padding: 1px 4px; font-size: 12.5px; width: 130px; }
.tableur-onglet-menu {
  border: none; background: none; color: var(--ink-3); cursor: pointer;
  padding: 0 4px; font-size: 13px; line-height: 1; border-radius: 4px; margin-left: -2px;
}
.tableur-onglet-menu:hover { background: var(--accent-pale); color: var(--accent); }
.tableur-onglet-plus {
  border: none; background: none; color: var(--ink-3); cursor: pointer;
  padding: 1px 6px; font-size: 13px; line-height: 1.2; border-radius: 5px; opacity: .3; transition: opacity .12s ease;
}
.bloc-ligne:hover .tableur-onglet-plus, .tableur-onglet-plus:hover, .tableur-onglet-plus:focus-visible { opacity: 1; color: var(--accent); }
.tableur-onglet-plus:hover { background: var(--accent-pale); }

/* V5.1 (RELI-448) — palette à deux étages : teintes, puis nuances de la teinte. */
.tableur-teintes { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; max-width: 252px; }
.tableur-nuances { display: none; gap: 5px; flex-wrap: wrap; align-items: center; max-width: 252px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.tableur-nuances.ouvert { display: flex; }
.tableur-nuances .bloc-pastille { width: 22px; height: 22px; }
.tableur-nuances .bloc-pastille.actif { outline: 2px solid var(--accent); outline-offset: 1px; }
.tableur-pipette { width: 26px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: none; cursor: pointer; }

.bloc-tableau { border-collapse: collapse; width: calc(100% - 2px); }
.bloc-tableau td {
  border: 1px solid var(--line); padding: 5px 8px; min-width: 70px;
  outline: none; vertical-align: top;
}
.bloc-tableau.entete-ligne tr:first-child td { background: var(--line-soft); font-weight: 600; }
.bloc-tableau.entete-colonne td:first-child { background: var(--line-soft); font-weight: 600; }
.bloc-tab-plus {
  position: absolute; border: 1px dashed var(--line); background: var(--card);
  color: var(--ink-3); cursor: pointer; border-radius: 4px; opacity: 0; font-size: 12px;
}
.bloc-tableau-enveloppe:hover .bloc-tab-plus { opacity: 1; }
.bloc-tab-plus:hover { color: var(--accent); border-color: var(--accent); }
.bloc-tab-plus.col { top: 0; right: 0; bottom: 22px; width: 18px; }
.bloc-tab-plus.ligne { left: 0; right: 22px; bottom: 0; height: 18px; }

/* V5.0m — « ＋ » discret du bloc « Colonnes / cartes » : avant, le bouton
   d'ajout occupait une case entière de la grille (grosse boîte en pointillés
   large comme une colonne). Il vit désormais sous la grille, effacé tant qu'on
   ne survole pas le bloc. */
.bloc-cartes-barre { margin-top: 3px; line-height: 1; }
.bloc-cartes-plus {
  opacity: .22; transition: opacity .12s ease;
  padding: 1px 6px; font-size: 13px; color: var(--ink-3);
}
.bloc-ligne:hover .bloc-cartes-plus,
.bloc-cartes-plus:hover,
.bloc-cartes-plus:focus-visible { opacity: 1; color: var(--accent); }

/* -- médias -- */
.bloc-placeholder-media {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--line-soft); border-radius: var(--r); padding: 10px 12px; color: var(--ink-2);
}
.bloc-placeholder-media input { flex: 1; min-width: 160px; border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; }
.bloc-placeholder-media .ou { font-size: 12px; color: var(--ink-3); }
/* V3.2 — taille par défaut raisonnable (420 px max) + poignée de redimensionnement */
.bloc-image { margin: 4px 0; max-width: 420px; position: relative; }
.bloc-image img { max-width: 100%; width: 100%; border-radius: var(--r); display: block; }
.bloc-img-poignee {
  position: absolute; right: -4px; bottom: 18px; width: 14px; height: 14px;
  border-radius: 4px; background: var(--accent); border: 2px solid #fff;
  cursor: ew-resize; opacity: 0; transition: opacity .1s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.bloc-image:hover .bloc-img-poignee { opacity: 1; }
.bloc-legende { font-size: 12px; color: var(--ink-3); margin-top: 4px; outline: none; }
.bloc-video { position: relative; padding-top: 56.25%; border-radius: var(--r); overflow: hidden; background: #000; }
.bloc-video iframe, .bloc-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -- menu « / » -- */
.bloc-menu-slash {
  position: fixed; z-index: 300; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: 0 8px 24px rgba(24,43,58,.14);
  width: 290px; max-height: 320px; overflow-y: auto; padding: 4px;
}
.bloc-menu-titre { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 5px 8px 3px; }
.bloc-menu-item {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer; padding: 6px 8px; border-radius: 4px;
}
.bloc-menu-item.sel, .bloc-menu-item:hover { background: var(--accent-pale); }
.bloc-menu-item .ic {
  flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px; background: var(--card); font-size: 12px; font-weight: 600;
}
.bloc-menu-item strong { display: block; font-size: 13px; }
.bloc-menu-item small { color: var(--ink-3); font-size: 11px; }

/* -- V4.7 : sélecteur de type de colonne (même langage visuel que le menu « / ») -- */
.champ-type { position: relative; }
.champ-type-bouton {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 8px;
}
.champ-type-bouton:hover { border-color: var(--accent); }
.champ-type-bouton .ic {
  flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px; background: var(--card); font-size: 12px; font-weight: 600;
}
.champ-type-bouton strong { display: block; font-size: 13px; }
.champ-type-bouton small { display: block; color: var(--ink-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champ-type-bouton .chevron { margin-left: auto; color: var(--ink-3); }

/* -- barre de mise en forme -- */
.bloc-barre-fmt {
  position: absolute; z-index: 250; display: none; align-items: center; gap: 2px;
  background: var(--ink); border-radius: 6px; padding: 3px 4px; box-shadow: 0 6px 18px rgba(24,43,58,.3);
}
.bloc-barre-fmt.visible { display: flex; }
.fmt-btn {
  border: 0; background: none; color: #eef1ee; cursor: pointer; min-width: 26px;
  padding: 3px 6px; border-radius: 4px; font-size: 13px;
}
.fmt-btn:hover { background: rgba(255,255,255,.14); }
.fmt-couleur { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.fmt-palette {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 251;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 6px; gap: 4px;
}
.fmt-palette.ouverte { display: flex; }
.bloc-pastille {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; padding: 0;
}
.bloc-pastille.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.bloc-palette { display: flex; gap: 6px; margin: 4px 0 8px; }

/* -- menus poignée / lien -- */
.bloc-menu-poignee { min-width: 230px; }
.bloc-menu-transfo { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 4px 0 8px; max-width: 340px; } /* V5.1 — le tableur y pose 7 boutons : on force le retour à la ligne plutôt qu'un popover démesuré */
.bloc-lien-resultats { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-height: 160px; overflow-y: auto; margin-top: 4px; }

/* la carte détail n'a plus de textarea : neutralise l'ancienne règle */
.detail-long .blocs-zone { min-height: 220px; }

/* ---------- V2.5 : liens, lieux, drag & drop colonnes, formules per() ---------- */
td .cellule-lien { color: var(--accent-fonce); text-decoration: underline; text-underline-offset: 2px; }
td .cellule-lieu-pin { text-decoration: none; font-size: 13px; }
.champ-lien-ctrl { display: inline-flex; gap: 6px; align-items: center; }
.champ-lien-ctrl input { flex: 1; }

/* colonnes du tableau : indicateur de dépôt pendant le glisser-déposer */
table.base th[draggable="true"] { cursor: grab; }
/* V7.0 (RELI-390) — pendant le glisser, la main se FERME, comme sur toutes les
   autres poignées du produit (.kanban-carte, .tache-poignee) : l'en-tête de
   colonne était la seule à garder la main ouverte. */
table.base th[draggable="true"]:active, th .col-grip:active { cursor: grabbing; }
table.base th.col-drop-avant { box-shadow: inset 3px 0 0 var(--accent); }
table.base th.col-drop-apres { box-shadow: inset -3px 0 0 var(--accent); }

/* bloc tableau (éditeur de documents) : poignées lignes / colonnes
   V3.1 — les poignées vivent dans l'enveloppe (superposition), plus dans les
   cellules éditables : le caret peut à nouveau se poser partout. */
.bloc-tab-drag {
  position: absolute; z-index: 6; border: 0; background: var(--card); color: var(--ink-3);
  font-size: 11px; line-height: 1; padding: 2px 3px; border-radius: 4px;
  cursor: grab; opacity: 0; transition: opacity .1s; user-select: none;
  box-shadow: 0 0 0 1px var(--line);
}
.bloc-tab-drag.colonne { transform: rotate(90deg); }
.bloc-tableau-enveloppe:hover .bloc-tab-drag { opacity: 1; }
.bloc-tableau td.tab-drop-haut { box-shadow: inset 0 3px 0 var(--accent); }
.bloc-tableau td.tab-drop-bas { box-shadow: inset 0 -3px 0 var(--accent); }
.bloc-tableau td.tab-drop-gauche { box-shadow: inset 3px 0 0 var(--accent); }
.bloc-tableau td.tab-drop-droite { box-shadow: inset -3px 0 0 var(--accent); }
.bloc-tableau-enveloppe { padding-left: 22px; padding-top: 20px; }

/* ---------- V2.9 : éditeur de cellule flottant (texte long visible) ---------- */
td.cellule-en-edition { position: relative; overflow: visible; }
textarea.editeur-cellule {
  position: absolute; top: 1px; left: 1px; z-index: 25;
  min-height: 32px; max-height: 220px; padding: 6px 8px; box-sizing: border-box;
  font: inherit; font-size: 13px; line-height: 1.45;
  border: 1.5px solid var(--accent); border-radius: 5px;
  background: var(--card); color: var(--ink);
  box-shadow: 0 8px 22px rgba(24, 43, 58, 0.18);
  resize: none; overflow-y: auto; white-space: pre-wrap;
}

/* ---------- V2.9 : formules de nœud — bloc large + vues de répartition ---------- */
.formule-carte.large { flex: 1 1 100%; max-width: none; }
.mini-graphe-reste { font-size: 11px; color: var(--ink-3); margin-top: 2px; font-weight: 400; }
.rep-zone { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.rep-camembert { width: 92px; height: 92px; flex: none; }
.rep-legende { display: grid; gap: 3px; font-size: 12px; font-weight: 400; min-width: 160px; flex: 1; }
.rep-legende-ligne { display: flex; align-items: center; gap: 6px; }
.rep-pastille { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.rep-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; color: var(--ink); }
.rep-nb { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.rep-barre { display: flex; height: 14px; border-radius: 4px; overflow: hidden; margin: 8px 0 6px; min-width: 190px; }
.rep-barre-seg { display: block; min-width: 2px; }

/* réglages d'affichage dans le popover de formule */
.popover .ligne-affichage { display: flex; align-items: center; gap: 6px; font-size: 12.5px; flex-wrap: wrap; margin-top: 6px; color: var(--ink-2); }
.popover .ligne-affichage select, .popover .ligne-affichage input[type="number"] { width: auto; }

/* ---------- V3 : recherche du tableau + actions de ligne ---------- */
.recherche-tableau {
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px;
  font-size: 13px; width: 220px; background: var(--card);
}
.recherche-tableau:focus { border-color: var(--accent); outline: none; }
.nb-resultats { font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
.cellule-actions { white-space: nowrap; }
.cellule-actions .action-suppr:hover { color: var(--danger); }

/* ---------- V3 : kanban enrichi ---------- */
.kanban-col h4.reordonnable { cursor: grab; }
.kanban-col h4.reordonnable:active { cursor: grabbing; }
.kanban-col.kcol-drop-avant { box-shadow: inset 3px 0 0 var(--accent); }
.kanban-col.kcol-drop-apres { box-shadow: inset -3px 0 0 var(--accent); }
.kanban-ajout {
  width: 100%; box-sizing: border-box; border: 1px dashed var(--line);
  border-radius: 5px; padding: 5px 8px; font-size: 12.5px;
  background: transparent; color: var(--ink); margin-top: 6px;
}
.kanban-ajout::placeholder { color: var(--ink-3); }
.kanban-ajout:focus { border-style: solid; border-color: var(--accent); outline: none; background: var(--card); }
.kanban-champ { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.kanban-champ-nom { color: var(--ink-3); font-size: 11px; }

/* ---------- V3.1 : sauts de ligne visibles (description courte, cellules texte) ---------- */
.desc-courte-cellule, td.cellule-souple, .kanban-carte .d { white-space: pre-line; }

/* ---------- V3.1 : sélecteur d'emojis ---------- */
.emoji-selecteur { min-width: 292px; }
.emoji-selecteur input[type="search"] { width: 100%; margin-bottom: 6px; }
.emoji-groupes { display: flex; gap: 2px; margin-bottom: 6px; flex-wrap: wrap; }
.emoji-groupe-btn {
  border: 1px solid transparent; background: none; font-size: 15px; padding: 2px 5px;
  border-radius: 5px; cursor: pointer;
}
.emoji-groupe-btn:hover { background: var(--line-soft); }
.emoji-groupe-btn.actif { border-color: var(--accent); background: var(--accent-pale); }
.emoji-grille {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  max-height: 240px; overflow-y: auto;
}
.emoji-btn {
  border: 0; background: none; font-size: 19px; padding: 3px; border-radius: 5px;
  cursor: pointer; line-height: 1.2;
}
.emoji-btn:hover { background: var(--accent-pale); }

/* ---------- V3.1 : couleurs (fiche + options de select) ---------- */
.palette-couleurs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pastille-couleur {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer; padding: 0;
}
.pastille-couleur.sel { outline: 2px solid var(--accent-fonce); outline-offset: 1px; }
.pastille-couleur.mini { width: 16px; height: 16px; border-radius: 5px; flex: none; }
.pastille-couleur.mini.vide { background: repeating-linear-gradient(45deg, #fff, #fff 3px, var(--line-soft) 3px, var(--line-soft) 6px); }
.option-ligne { display: flex; align-items: center; gap: 6px; }
.titre-avec-icone { display: flex; align-items: center; gap: 8px; }
.fiche-icone-btn {
  border: 1px solid transparent; background: none; font-size: 24px; line-height: 1;
  padding: 3px 5px; border-radius: 7px; cursor: pointer; flex: none;
}
.fiche-icone-btn:hover { border-color: var(--line); background: var(--line-soft); }
.fiche-icone-btn.vide { opacity: 0.35; }
.fiche-icone-btn:disabled { cursor: default; }
.fiche-couleur-btn {
  width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, #fff, #fff 3px, var(--line-soft) 3px, var(--line-soft) 6px);
  cursor: pointer; flex: none; padding: 0;
}
.fiche-couleur-btn:disabled { cursor: default; }
td .valeur-multi[style] { color: #182b3a; } /* pill colorée : texte sombre lisible */
.cellule-id { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

/* ---------- V3.1 : bloc Mermaid ---------- */
.bloc-mermaid { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.bloc-mermaid-onglets { display: flex; gap: 0; border-bottom: 1px solid var(--line-soft); background: var(--line-soft); }
.bloc-mermaid-onglet {
  border: 0; background: none; padding: 5px 12px; font-size: 12px; cursor: pointer;
  color: var(--ink-2); border-right: 1px solid var(--line-soft);
}
.bloc-mermaid-onglet.actif { background: var(--card); color: var(--ink); font-weight: 600; }
.bloc-mermaid-diag { padding: 12px; overflow-x: auto; background: var(--card); text-align: center; }
.bloc-mermaid-diag svg { max-width: 100%; height: auto; }
.bloc-mermaid-err { color: var(--danger); font-size: 12.5px; text-align: left; }
.bloc-mermaid .bloc-code { border-radius: 0; }
.bloc-mermaid-aide { margin: 0; padding: 5px 10px; font-size: 11.5px; color: var(--ink-3); background: var(--card); }
/* V8.6 — cadre redimensionnable du diagramme. Sans largeur réglée, on garde le
   comportement V3.1 (taille naturelle, débordement en défilement horizontal) ;
   avec une largeur, le SVG s'étire pour la remplir — c'est ce qui permet
   d'AGRANDIR un petit schéma et pas seulement de contenir un grand. */
.bloc-mermaid-cadre { position: relative; }
.bloc-mermaid-cadre.dimensionne .bloc-mermaid-diag { overflow: visible; }
.bloc-mermaid-poignee { right: 2px; bottom: 6px; }
.bloc-mermaid-cadre:hover .bloc-mermaid-poignee { opacity: 1; }

/* ---------- V3.1 : code inline dans les textes ---------- */
.blocs-editeur code, .bloc-texte code {
  font-family: var(--mono); font-size: 0.88em; background: #eef1f0; color: #a03d2c;
  padding: 1px 5px; border-radius: 4px;
}

/* ---------- V3.2 : affordance colonnes du tableau + pagination ---------- */
th .col-grip {
  opacity: 0; cursor: grab; color: var(--ink-3); font-size: 10px;
  margin-right: 5px; transition: opacity .1s; user-select: none;
}
th:hover .col-grip { opacity: 1; }
th .col-menu-btn {
  opacity: 0; border: 0; background: none; cursor: pointer; color: var(--ink-3);
  font-size: 11px; padding: 0 3px; margin-left: 4px; border-radius: 4px; transition: opacity .1s;
}
th:hover .col-menu-btn { opacity: 1; }
th .col-menu-btn:hover { background: var(--line-soft); color: var(--ink); }
.sel-pagination { border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; font-size: 12px; background: var(--card); }
.pagination { display: inline-flex; align-items: center; gap: 6px; }
.pagination-info { font-size: 12px; font-family: var(--mono); color: var(--ink-2); }

/* menu « / » : liste plus haute et défilable sans se fermer */
/* V8.2 — …mais jamais plus haute que la fenêtre : sur un portable en 720 px de
   haut, un menu ouvert au deux tiers de la page débordait sous le bord. */
.bloc-menu-slash { max-height: min(420px, calc(100vh - 24px)); }
/* Variante large : la palette de modèles montre une liste ET un aperçu. */
.bloc-menu-large { width: auto; max-width: min(620px, calc(100vw - 24px)); }

/* ---------- V3.2 : notes — Tâche (échéance/assigné), Fact (source), Idée ---------- */
.badge-type.fact { background: #dcebf5; color: #2d5f86; }
.badge-type.idee { background: #fdf3d7; color: #8a6d1a; }
.note-extras { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; color: var(--ink-2); }
.note-echeance.retard { color: var(--danger); font-weight: 600; }
.note-assigne { color: var(--ink-2); }
.note-source { color: var(--accent-fonce); text-decoration: none; }
.note-source:hover { text-decoration: underline; }
.form-note-extras { display: inline-flex; gap: 6px; align-items: center; }
.form-note-extras input[type="date"], .form-note-extras select, .form-note-extras input[type="url"] {
  border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; font-size: 12px;
}

/* ---------- V3.3 : bloc tableau lié ---------- */
.bloc-tablie-barre { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bloc-tablie-titre { font-size: 12.5px; font-weight: 600; color: var(--accent-fonce); text-decoration: none; }
.bloc-tablie-titre:hover { text-decoration: underline; }
.bloc-tablie-info { font-size: 11.5px; color: var(--ink-3); }
.bloc-tablie-env { padding-left: 0; padding-top: 0; }
.bloc-tableau.tablie td { font-size: 12.5px; }

/* ---------- V3.3b : indicateur de section repliée ---------- */
.bloc-replie-info {
  margin-left: 30px; padding: 2px 8px; font-size: 11.5px; color: var(--ink-3);
  cursor: pointer; border-radius: 4px; user-select: none;
}
.bloc-replie-info:hover { background: var(--line-soft); color: var(--ink-2); }

/* ---------- V3.4 : gestion des formulaires ---------- */
.form-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.form-item-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.form-item-lien { display: flex; gap: 6px; margin-bottom: 6px; }
.form-item-lien input { flex: 1; border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; font-size: 12px; font-family: var(--mono); color: var(--ink-2); }

/* ---------- V3.4b : mise en forme des formulaires de saisie en modale ---------- */
.form-edition > label:not(.case) {
  display: block; font-size: 12px; font-weight: 600; color: var(--ink-2);
  margin: 14px 0 4px; text-transform: uppercase; letter-spacing: 0.04em;
}
.form-edition > label:first-child { margin-top: 0; }
.form-edition > input[type="text"], .form-edition > textarea, .form-edition > select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font-size: 13.5px; font-family: inherit;
}
.form-edition .form-section {
  border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 10px 12px; margin-top: 14px; background: #fbfcfc;
}
.form-edition .form-section > label:not(.case) {
  display: block; font-size: 12px; font-weight: 600; color: var(--ink-2);
  margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.form-edition .case { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; margin: 6px 0; }
.form-edition .case input[type="checkbox"], .form-edition .case input[type="radio"] { margin-top: 2px; flex: none; }
.form-mode-aide { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.form-sous-bloc { margin: 8px 0 2px 24px; }
.form-sous-bloc label:not(.case) { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.form-sous-bloc textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 9px; font-size: 13px; font-family: inherit;
}
.form-liste-champs {
  max-height: 180px; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px;
}
.form-edition .actions .btn { padding: 8px 18px; font-size: 14px; }

/* la modale des formulaires est un peu plus large */
.modal { max-width: 560px; }

/* ===== V3.5 — configuration des vues d'un nœud (popover ⚙) ===== */
.cfg-vue-ligne { display: flex; align-items: center; gap: 4px; padding: 2px 0; }
.cfg-vue-ligne .btn-mini { padding: 0 5px; font-size: 12px; line-height: 1.4; }
.cfg-vue-ligne .btn-mini:disabled { opacity: 0.3; cursor: default; }
.cfg-vue-ligne .case { font-size: 13px; }

/* V3.5 — valeurs relationnelles cliquables (navigation vers la fiche liée) */
.valeur-rel { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(0,0,0,0.25); text-underline-offset: 2px; }
.valeur-rel:hover { filter: brightness(0.95); text-decoration-color: currentColor; }
.champ-rel-ctrl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.rel-liens { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* V3.5 — réordonner les formules de nœud (‹ › sur les cartes) */
.formule-bouger { display: inline-flex; gap: 0; opacity: 0; transition: opacity 0.12s; }
.formule-carte:hover .formule-bouger { opacity: 1; }
.formule-bouger .btn-mini { padding: 0 3px; }
.formule-bouger .btn-mini:disabled { opacity: 0.3; cursor: default; }

/* V3.5 — smart text : jetons $valeur et @mention dans l'éditeur à blocs */
.cc-valeur, .cc-mention {
  display: inline-block; padding: 0 5px; border-radius: 4px;
  font-size: 0.92em; line-height: 1.5; white-space: nowrap;
  user-select: all;
}
.cc-valeur { background: #e2eff0; color: #0f5560; border: 1px solid #c4dfe2; }
.cc-mention { background: #ece7f3; color: #55407e; border: 1px solid #d8cfe8; font-weight: 600; }
.bloc-menu-smart .ic { font-weight: 700; }

/* V3.6 — sélecteur d'organisation (topbar) */
.sel-organisation {
  background: rgba(255,255,255,0.08); color: #dce6ec;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 6px;
  padding: 4px 8px; font-size: 12.5px; max-width: 180px;
  cursor: pointer;
}
.sel-organisation option { color: #182b3a; background: #fff; }

/* V3.7 — mini logo de la marque (emoji ou image) */
.marque-logo { margin-right: 6px; font-size: 1.05em; vertical-align: -2px; }
img.marque-logo { height: 20px; width: auto; border-radius: 4px; }

/* V3.7 — champ mot de passe avec œil */
.champ-mdp { position: relative; display: block; }
.champ-mdp input { width: 100%; box-sizing: border-box; padding-right: 34px; }
.btn-oeil {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 14px; padding: 4px;
  opacity: 0.65;
}
.btn-oeil:hover { opacity: 1; }
.lien-mdp-oublie { margin-top: 10px; font-size: 12.5px; }
.erreur-connexion.info { color: var(--ok, #3d7a46); }
.btn-compte {
  background: none; border: none; cursor: pointer;
  font-size: 12.5px; color: #c4d0d7; padding: 4px 6px; border-radius: 6px;
}
.btn-compte:hover { background: rgba(255,255,255,0.08); }

/* V3.7 — onglet Rôles (Équipe) */
.role-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.role-grille > div > label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.role-liste { max-height: 180px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 6px; padding: 6px 8px; }
.role-liste .case { margin: 3px 0; font-size: 13px; }
@media (max-width: 700px) { .role-grille { grid-template-columns: 1fr; } }

/* V3.7 — bandeau licence (sous-sites) */
.bandeau-licence { padding: 7px 14px; font-size: 13px; text-align: center; }
.bandeau-licence.grace { background: #f6f0d8; color: #7a5c12; }
.bandeau-licence.suspendu, .bandeau-licence.resilie { background: #f6e8e4; color: #a03d2c; font-weight: 600; }

/* V5.5 — bandeau « mise à jour en cours » (mode lecture seule de l'instance).
   Rayures discrètes : on reconnaît un chantier au premier coup d'œil, sans
   crier à la panne — le site fonctionne, il ne s'écrit simplement plus. */
.bandeau-maintenance {
  padding: 7px 14px; font-size: 13px; text-align: center; font-weight: 600;
  color: #7a5c12; background: #fbf3d9;
  background-image: repeating-linear-gradient(135deg, rgba(122, 92, 18, .07) 0 10px, transparent 10px 20px);
  border-bottom: 1px solid #e8d9a6;
}
.page-connexion .bandeau-maintenance { border-radius: 8px; margin-bottom: 12px; border: 1px solid #e8d9a6; }

/* V5.5 — état des interrupteurs d'instance (panneau super admin) */
.etiquette {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; margin-right: 6px;
}
.etiquette-ok { background: #e6f2ec; color: #1f6b4a; }
.etiquette-alerte { background: #f6e8e4; color: #a03d2c; }
.carte-interrupteurs { border-left: 3px solid #d8a13a; }

/* V7.1 (RELI-430) — BANDEAU MOBILE, REFAIT. L'ancien essai (V3.7) posait
   `flex-wrap` sur un bandeau à HAUTEUR FIXE de 52 px : dès que la deuxième
   rangée naissait, tout ce qu'elle contenait débordait du bandeau et
   s'éparpillait PAR-DESSUS le contenu de la page — les captures d'écran du
   ticket montrent exactement ça. La règle inverse est la bonne : UNE SEULE
   rangée de 52 px, toujours, et ce qui n'y tient pas change de forme au lieu
   de déborder — la recherche devient une surcouche à la demande (bouton 🔍),
   les briques Tâches/Messages gardent icône et bulle mais perdent leur
   libellé, et Équipe / Admin / compte / Quitter déménagent dans le menu ⋮.
   Même seuil (800 px) que le tiroir latéral : un seul « mode étroit ». */
@media (max-width: 800px) {
  .topbar { gap: 8px; padding: 0 10px; }
  .topbar .marque { max-width: 30vw; }
  .sel-organisation { max-width: 26vw; }
  .btn-rech-mobile, .btn-menu-mobile { display: inline-flex; }
  .btn-topbar-nav, .topbar .btn-compte, .topbar .btn-quitter { display: none; }
  .btn-lien-topbar { margin-right: 0; padding: 4px 7px; }
  .btn-lien-topbar .brique-txt { display: none; }
  /* la recherche quitte la rangée : surcouche sous le bandeau, à la demande */
  .topbar .recherche-globale { display: none; }
  .topbar.rech-ouverte .recherche-globale {
    display: block; position: fixed; top: 52px; left: 0; right: 0;
    max-width: none; padding: 8px 10px; background: var(--ink);
    border-bottom: 1px solid #3b5062; z-index: 39;
  }
  .topbar.rech-ouverte .recherche-globale input { padding-left: 32px; }
  .topbar.rech-ouverte .recherche-globale::before { left: 20px; top: 14px; }
}

/* V3.8 — landing / onboarding */
.landing-points { list-style: none; margin: 0 0 16px; padding: 0; }
.landing-points li { font-size: 13.5px; color: var(--ink-2); margin: 6px 0; }
.onboarding h3 { margin: 0 0 8px; font-size: 19px; }
.onboarding-points { display: flex; gap: 6px; justify-content: center; margin: 12px 0; }
.onboarding-point { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.onboarding-point.actif { background: var(--accent); }

/* V3.8 — impression de l'app : contenu seul (Ctrl+P décent partout) */
@media print {
  .topbar, .sidebar, .bandeau-licence, .onglets, .btn, .btn-lien, .btn-mini, .drop-racine { display: none !important; }
  .contenu { margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
  /* V8.0 (RELI-451) — LE BANDEAU DES SCÉNARIOS RESTE À L'IMPRESSION, à plat.
     Un tableau imprimé sous une hypothèse doit dire laquelle : sans cela, deux
     tirages du même tableau donnent deux jeux de chiffres et rien ne les
     distingue. On neutralise seulement l'apparence de formulaire — un <select>
     imprime son option choisie, un <input> sa valeur, donc le texte suffit. */
  .scen-ctrl { border: none !important; background: none !important; padding: 0 !important;
               -webkit-appearance: none; appearance: none; font-weight: 600; }
  .scenario-carte.surcharge { background: none !important; }
}

/* V3.8b — cartes de paramètres empilées (labels au-dessus, champs pleine largeur) */
.form-empile > label:not(.case) { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 12px 0 4px; }
.form-empile > input[type="text"], .form-empile > textarea {
  width: 100%; max-width: 560px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 13.5px; font-family: inherit;
}
.form-empile .case { margin: 8px 0; }

/* V3.8b — onboarding : Passer / Suivant bien séparés */
.onboarding .actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

/* V3.8b — bouton 🌐 quand la page est déjà publiée */
.onglet-config.publie, .btn.publie { color: var(--accent-fonce, #0e6570); font-weight: 700; }

/* V4.4 — panneau « variables disponibles » des blocs formule et tableur */
.bloc-vars { margin: 6px 0 2px; border: 1px solid var(--ligne, #dbe4e6); border-radius: 8px; background: var(--fond-2, #f6f9f9); }
.bloc-vars summary { cursor: pointer; padding: 5px 9px; font-size: 12px; color: var(--ink-2, #33474d); user-select: none; }
.bloc-vars-liste { display: grid; grid-template-columns: 1fr; gap: 2px; max-height: 180px; overflow: auto; padding: 4px 6px 7px; }
.bloc-vars-liste .btn-lien { text-align: left; white-space: normal; }
.bloc-vars-liste code { font-weight: 600; }
.bloc-vars-type { color: var(--ink-3, #6b7d83); margin-left: 6px; font-size: 12px; }

/* V4.5 — formulaire d'informations de facturation (Abonnement) */
.fact-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin: 8px 0; align-items: end; }
.fact-champ label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2, #33474d); margin: 0 0 4px; }
.fact-champ input, .fact-champ select { width: 100%; box-sizing: border-box; }
.fact-large { grid-column: span 2; }
.fact-petit { max-width: 140px; }
@media (max-width: 640px) { .fact-large { grid-column: span 1; } }

/* ============================================================
   V5.2 (RELI-208) — NŒUDS COMMUNS ENTRE ORGANISATIONS
   Un vocabulaire visuel unique : le même pictogramme dans l'arbre, le même
   liseré dans le bandeau. Turquoise = « chez nous » (nous sommes propriétaires),
   ambre = « chez quelqu'un d'autre » (nous sommes invités) — la nuance qui
   évite de modifier des données hébergées ailleurs sans s'en rendre compte.
   ============================================================ */
/* Pastille générique : le projet utilisait `.chip` sans jamais la définir
   (seule `.chip-filtre` existait). On pose enfin la règle de base — les
   variantes ci-dessous ne font plus que la colorer. */
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  border: 1px solid var(--line, #d4dcd9); border-radius: 999px;
  font-size: 12.5px; color: var(--ink-2, #33474d); background: #fff; white-space: nowrap;
}
.pastille-partage { display: inline-flex; align-items: center; margin-left: 5px; color: #b07b16; flex: 0 0 auto; }
.pastille-partage.proprio { color: var(--accent-fonce, #0e6570); }
.pastille-partage .cc-icone { vertical-align: -2px; }

.bandeau-partage {
  border: 1px solid #e4d0a4; border-left: 4px solid #c9a227; background: #fffbef;
  border-radius: 9px; padding: 10px 14px; margin: 2px 0 12px; font-size: 13.5px;
}
.bandeau-partage.proprio { border-color: #bcd9dd; border-left-color: var(--accent, #16929f); background: #f2fafb; }
.bandeau-partage .partage-titre { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.bandeau-partage .partage-titre .cc-icone { vertical-align: -3px; }
.partage-corps { display: block; }
.partage-orgs { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; }
.chip-proprio { background: var(--accent-fonce, #0e6570); color: #fff; border-color: transparent; }
.partage-sous { color: var(--ink-3, #6b7d83); font-size: 12.5px; }
.partage-note { color: var(--ink-2, #33474d); font-size: 12.8px; line-height: 1.55; margin: 8px 0 0; }

/* Listes de la modale de partage et de l'onglet Équipe → Partages */
.partage-liste { border: 1px solid var(--line, #d4dcd9); border-radius: 8px; overflow: hidden; }
.partage-ligne {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 6px 10px; border-top: 1px solid var(--line, #d4dcd9); font-size: 13.5px; flex-wrap: wrap;
}
.partage-liste .partage-ligne:first-child, .carte > .partage-ligne:first-of-type { border-top: none; }
.partage-ligne.inactif { opacity: 0.55; }
.partage-ligne code { background: #f1f4f4; border-radius: 4px; padding: 1px 6px; font-weight: 600; letter-spacing: 0.04em; }
.partage-role { font-size: 12.5px; padding: 2px 6px; }
.partage-regles { margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.7; color: var(--ink-2, #33474d); }

/* Avertissements : partage ouvert à des tiers / hébergement chez le propriétaire.
   Volontairement voyants — ce sont des consentements, pas de la décoration. */
.partage-alerte {
  border: 1px solid #e4d0a4; background: #fffbef; border-radius: 8px;
  padding: 9px 12px; margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: #6b5312;
}
.partage-erreur { color: var(--danger, #a03d2c); font-size: 13px; min-height: 18px; margin-top: 6px; }

/* V5.3 (RELI-208) — présence FÉDÉRÉE : l'organisation d'origine s'affiche à
   côté du prénom. Sur un nœud commun, « Camille » ne suffit plus à identifier
   quelqu'un — deux organisations peuvent avoir la leur. */
.presence-pill .presence-org {
  margin-left: 5px; padding: 0 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); font-size: 11px; font-weight: 600; white-space: nowrap;
}

/* V5.3 (RELI-208) — nœud FÉDÉRÉ : la ligne d'état de la copie locale, dans le
   bandeau du nœud partagé (adresse de l'hôte, dernière synchronisation). */
.partage-fed {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 7px; font-size: 12.8px; color: var(--ink-2, #33474d);
}
.partage-fed a { color: var(--accent-fonce, #0e6570); word-break: break-all; }
.partage-fed .btn-lien { margin: 0; }
/* V5.3 — copie locale d'un nœud fédéré non rafraîchie : la pastille vire au rouge. */
.pastille-partage.desync { color: var(--danger, #a03d2c); }

/* V5.4 — premier démarrage d'une instance (créer / importer) et rapport d'import. */
.boite-install { max-width: 460px; }
.boite-install .onglets { margin-bottom: 12px; }
.install-journal { margin-top: 10px; }
.install-tables {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px 12px; margin: 8px 0; font-size: 12.5px; color: var(--ink-2, #33474d);
}
.install-tables > div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--line, #d4dcd9); }

/* ============================================================
   V5.6 (RELI-307) — ÉLÉMENTS PRIVÉS DANS UNE ORGANISATION
   Le code couleur prolonge celui du partage V5.2 sans le brouiller :
     · turquoise (--accent-fonce) = chez nous / autorisé  → partage propriétaire
     · ambre (#b07b16)            = chez quelqu'un d'autre → partage invité
     · VIOLET (#6b4f9e)           = restreint aux personnes → PRIVÉ
   Une troisième teinte plutôt qu'une nuance des deux premières : « partagé
   avec une autre organisation » et « caché à mes collègues » sont deux
   affirmations opposées, elles ne doivent jamais se confondre au coin de l'œil.
   ============================================================ */

.pastille-prive { display:inline-flex; align-items:center; margin-left:5px; color:#6b4f9e; }
.pastille-prive.proprio { color:#6b4f9e; }
.pastille-prive:not(.proprio) { color:#8a7bb0; }   /* invité : je ne suis pas chez moi */
.pastille-prive .cc-icone { vertical-align:-2px; }

.bandeau-prive {
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
  border:1px solid #d9d0ea; border-left:4px solid #6b4f9e; background:#f8f6fc;
  border-radius:8px; padding:10px 14px; margin:0 0 14px;
}
.bandeau-prive.proprio { border-color:#d9d0ea; border-left-color:#6b4f9e; }
.prive-corps { flex:1 1 320px; min-width:0; }
.prive-titre { display:flex; align-items:center; gap:6px; font-weight:600; color:#4b376f; }
.prive-titre .cc-icone { vertical-align:-2px; }
.prive-orgs { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.prive-note { font-size:12px; color:var(--ink-3,#5c6b70); margin-top:5px; }
.prive-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.prive-intro { margin-top:0; font-size:13px; color:var(--ink-3,#5c6b70); }
.prive-alerte { font-size:12px; color:#a03d2c; margin:6px 0 0; }

.prive-liste { display:flex; flex-direction:column; gap:2px; margin:8px 0; }
.prive-ligne {
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:6px 8px; border-radius:6px;
}
.prive-ligne:nth-child(odd) { background:var(--line-soft,#f2f5f6); }
.prive-ligne-fin { display:flex; align-items:center; gap:6px; }
.prive-ajout { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.prive-bloc { margin-bottom:18px; }
.prive-bloc h4 { margin:0 0 2px; }

.chip-prive { background:#efe9f8; color:#4b376f; border:1px solid #d9d0ea; }
.prive-note-corbeille { border-left:3px solid #6b4f9e; padding-left:8px; }

/* La case « Garder privé » de la modale de création. Volontairement discrète :
   elle ne doit pas se lire comme un réglage à trancher, mais comme une option
   qu'on ignore neuf fois sur dix. */
.prive-case {
  display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:center;
  margin:10px 0 4px; padding:8px 10px; border:1px solid #e4dcf2; border-radius:8px;
  background:#faf8fd; cursor:pointer; font-size:13px;
}
.prive-case input { margin:0; }
.prive-case > span:nth-of-type(1) { font-weight:600; color:#4b376f; display:flex; align-items:center; gap:5px; }
.prive-case-aide { grid-column:2; font-size:12px; line-height:1.35; }

/* L'interrupteur « créer en privé » de la ligne de nouvelle fiche : éteint il
   se fond dans les actions, allumé il est franchement visible — on ne doit
   jamais créer trois brouillons privés sans s'en rendre compte. */
.bascule-prive { color:var(--ink-3,#5c6b70); padding:0 5px; white-space:nowrap; }
.bascule-prive.actif { color:#fff; background:#6b4f9e; border-radius:5px; }
/* V6.1 (RELI-321) — le bouton porte son nom : une icone de cadenas seule
   passait pour de la decoration, et c'etait le seul moyen de creer une fiche
   privee. Le libelle s'efface sur les ecrans etroits, ou la place manque. */
.bascule-prive-txt { font-size:11px; letter-spacing:.02em; }
.kanban-prive { display:block; margin:2px 0 0 2px; text-align:left; }
/* Pas de `display:none` sous 700px : masquer le libelle ramenerait exactement
   l'icone muette que la V6.1 corrige. On reduit, on ne supprime pas. */
@media (max-width: 700px) { .bascule-prive-txt { font-size:10px; } }

.prive-regles h4 { display:flex; align-items:center; gap:6px; margin:0 0 4px; }

@media (prefers-color-scheme: dark) {
  .bandeau-prive { background:#241f2e; border-color:#3d3450; }
  .prive-case { background:#241f2e; border-color:#3d3450; }
  .prive-titre, .chip-prive { color:#c8b6e8; }
  .chip-prive { background:#2e2740; border-color:#3d3450; }
  .pastille-prive, .pastille-prive.proprio { color:#b39ddb; }
}

/* ============================================================
   V5.7 (RELI-312) — COMMENTAIRES, MENTIONS ET SUIVIS
   Couleur dédiée : ambre profond. Le turquoise est l'accent du produit, le
   violet appartient au privé (V5.6), l'ambre clair au partage — restait une
   teinte chaude et lisible sur le papier, qui dit « quelqu'un a écrit ici »
   sans crier. Le surlignage reprend le jaune universel du surligneur : ce
   n'est pas l'endroit où être original.
   ============================================================ */
:root {
  --com: #9a6a12;
  --com-pale: #fdf3dc;
  --com-surlignage: #ffe9a8;
}

/* --- Surlignage d'un passage commenté ---------------------------------
   Posé par la CSS Custom Highlight API, DONC HORS DU DOM : aucune balise
   n'est injectée dans le contenu éditable (sanitiserHtml la supprimerait, et
   contenteditable la réécrirait dans le bloc). */
::highlight(commentaire) { background: var(--com-surlignage); color: inherit; }
::highlight(commentaire-actif) { background: #ffd45e; color: inherit; }

/* Repli pour les navigateurs sans CSS Custom Highlight API : le bloc entier
   porte un liseré. Moins précis, jamais destructeur. */
@supports not (selector(::highlight(x))) {
  .bloc-ligne.a-commentaire .bloc-texte { box-shadow: inset 3px 0 0 var(--com-surlignage); }
}
.bloc-ligne.a-commentaire { cursor: pointer; }
tr.tr-commentee > td:first-child { box-shadow: inset 3px 0 0 var(--com); }
tr.tr-commentee { cursor: pointer; }

/* Bloc visé par un lien profond (?b=…) : mis en évidence à l'arrivée. */
.bloc-cible { animation: cc-bloc-cible 2.2s ease-out; border-radius: var(--r); }
@keyframes cc-bloc-cible {
  0%, 60% { background: var(--com-pale); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .bloc-cible { animation: none; background: var(--com-pale); } }

/* --- Brique « Messages » du bandeau et sa bulle ------------------------ */
.btn-messages { position: relative; }
.btn-messages.actif { background: rgba(255, 255, 255, .14); border-radius: var(--r); }
.topbar-bulle {
  position: absolute; top: 2px; right: -2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--r); background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
.topbar-bulle[hidden] { display: none; }

/* --- Barre latérale en mode conversations ------------------------------ */
/* V6.2 (RELI-322) — FIN DU BLANC SUR BLANC. La sidebar est `var(--card)`
   (#ffffff) ; on y posait des cartes `var(--card)` separees par un liseré
   `--line-soft` (#e4e9e7). Nulle part ailleurs l'app ne fait cela : une carte
   est toujours du blanc SUR `--paper`. On donne donc son fond de page au
   panneau, et les lignes redeviennent des cartes. Meme geste pour la bordure :
   `--line`, celle de `.carte`, `.popover` et `.sidebar` — le langage
   « panneau » de l'app — au lieu du `--line-soft` deux crans plus clair. */
.conversations { flex: 1; overflow: auto; padding: 8px; background: var(--paper); }
.conversations[hidden] { display: none; }
.conv-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.conv-ligne {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
}
.conv-ligne:hover { border-color: var(--com); }
.conv-ligne.non-lu { border-left: 3px solid var(--com); }
.conv-nom { font-weight: 700; }
.conv-sous { grid-column: 1; font-size: 11px; color: var(--ink-3); }
.conv-bulle {
  grid-row: 1 / span 2; align-self: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r);
  background: var(--com); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
.conv-separateur { height: 1px; background: var(--line); margin: 10px 0 6px; }
.conv-liste { display: flex; flex-direction: column; gap: 4px; }
.conv-entree {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: inherit;
}
.conv-entree:hover { border-color: var(--com); }
.conv-entree.non-lu { border-left: 3px solid var(--com); }
.conv-entree-objet { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.conv-entree-passage { font-size: 11px; color: var(--com); font-style: italic; }
.conv-entree-texte { font-size: 12px; }
.conv-entree time { font-size: 10px; color: var(--ink-3); }

/* --- Fil de discussion (popover) et panneau ---------------------------- */
.com-fil { min-width: 320px; max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.com-passage {
  margin: 0; padding: 6px 10px; border-left: 3px solid var(--com-surlignage);
  background: var(--com-pale); border-radius: 0 var(--r) var(--r) 0;
  font-style: italic; font-size: 12px; color: var(--ink-2);
}
.com-passage.orphelin { border-left-color: var(--ink-3); background: var(--line-soft); }
.com-passage.orphelin em { font-style: normal; color: var(--ink-3); font-size: 11px; }
.com-message { padding: 6px 0; border-top: 1px solid var(--line-soft); }
.com-message:first-of-type { border-top: 0; }
.com-message.supprime { color: var(--ink-3); font-size: 12px; }
.com-tete { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.com-tete time { color: var(--ink-3); font-size: 11px; margin-left: auto; }
.com-tete em { color: var(--ink-3); font-size: 10px; font-style: normal; }
.com-externe { color: var(--com); font-size: 11px; font-weight: 700; }
.com-corps { white-space: pre-wrap; font-size: 13px; margin-top: 2px; }
.com-actions { display: flex; gap: 6px; margin-top: 2px; }

.com-saisie { position: relative; }
.com-champ { width: 100%; resize: vertical; font: inherit; font-size: 13px; }
.com-jetons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.com-jeton {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px;
  border-radius: var(--r); background: var(--line-soft); color: var(--ink-2);
  font-size: 11px; font-weight: 600;
}
/* V6.2 — un seul accent dans cet ecran : l'ambre de la V5.7. Une mention
   ordinaire etait en sarcelle (`--accent-pale`), ce qui faisait cohabiter les
   deux accents de l'app sans que rien ne distingue leurs roles. Elle passe au
   NEUTRE, et l'ambre reste ce qu'il a toujours ete ici : le signal.
   ⚠ NE PAS teindre la base en `--com-pale` : le premier jet l'a fait, et
   `.externe` devenait alors indiscernable d'une mention interne — or c'est
   precisement l'information que la V5.8 s'est engagee a toujours donner. */
.com-jeton.externe { background: var(--com-pale); color: var(--com); border: 1px solid var(--com-surlignage); }
.com-jeton em { font-style: normal; opacity: .75; }
.com-mentions-menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 320;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  /* V6.2 — ombre TEINTEE ENCRE, celle de .popover, au lieu d'un noir pur. */
  box-shadow: 0 8px 24px rgba(24, 43, 58, 0.16); max-height: 200px; overflow: auto;
}
.com-mentions-menu button { display: block; width: 100%; text-align: left; padding: 5px 10px; }
.com-mentions-menu em { color: var(--com); font-style: normal; font-size: 11px; }

.com-modale { display: flex; flex-direction: column; gap: 10px; min-width: 380px; }
.com-ia { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; flex-wrap: wrap; }
.com-ia em { flex-basis: 100%; color: var(--ink-3); font-size: 11px; font-style: normal; padding-left: 20px; }
.com-ia-mini { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-2); }

.com-panneau-corps { display: flex; flex-direction: column; gap: 6px; }
.com-resume {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 8px 10px; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--com-surlignage);
  border-radius: var(--r); cursor: pointer;
}
.com-resume:hover { border-color: var(--com); }
.com-resume.non-lu { border-left-color: var(--com); }
.com-resume.orphelin { border-left-color: var(--ink-3); }
.com-resume-passage { font-size: 12px; font-style: italic; color: var(--com); }
.com-resume-extrait { font-size: 13px; }
.com-resume-pied { font-size: 11px; color: var(--ink-3); }
.com-resume-pied em { font-style: normal; }
.com-resolu { border-top: 1px solid var(--line); padding: 8px 0; }

/* En lecture seule, la barre flottante se réduit au seul bouton
   « Commenter » : commenter n'est pas modifier. */
.bloc-barre-fmt-lecture { padding: 2px; }

/* ============================================================
   V5.8 (RELI-313) — MESSAGERIE : CONVERSATIONS ENTRE PERSONNES
   Aucune couleur nouvelle : la messagerie reprend l'ambre de la V5.7. Les
   deux fonctionnalités forment une seule brique dans le bandeau, une seule
   pastille, une seule liste — leur donner deux teintes suggérerait deux
   endroits, alors qu'il n'y en a qu'un.
   ============================================================ */

.conv-entree.actif { border-color: var(--com); background: var(--com-pale); }
.conv-externe { font-style: normal; color: var(--com); font-size: 10px; font-weight: 700; }
.conv-entree-objet .conv-bulle { margin-left: auto; }
.conv-entree-objet { display: flex; align-items: center; gap: 4px; }

/* --- Écran d'une conversation ------------------------------------------ */
.msg-carte { display: flex; flex-direction: column; max-height: calc(100vh - 110px); }
.msg-entete { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.msg-participants { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.msg-jeton {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px;
  border-radius: var(--r); background: var(--line-soft); font-size: 12px;
}
.msg-jeton.externe { background: var(--com-pale); color: var(--com); font-weight: 600; }
/* Un rôle ne ressemble pas à une personne : trait plein, pour qu'on voie du
   premier coup d'œil que la conversation suivra l'équipe. */
.msg-jeton.role { background: var(--card); border: 1px solid var(--com); color: var(--com); font-weight: 700; }
/* Présent VIA un rôle : le contour pointillé dit « pas ajouté nommément ». */
.msg-jeton.via-role { background: transparent; border: 1px dashed var(--line); }
.msg-jeton em { font-style: normal; opacity: .8; }
.msg-jeton button { margin-left: 2px; opacity: .5; }
.msg-jeton:hover button { opacity: 1; }

.msg-fil { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.msg-jour {
  align-self: center; font-size: 11px; color: var(--ink-3);
  background: var(--line-soft); padding: 1px 10px; border-radius: var(--r); margin: 6px 0 2px;
}
.msg-bulle {
  max-width: 78%; align-self: flex-start; padding: 6px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r) var(--r) var(--r) 2px;
}
/* V6.2 — « mes » messages passent de la sarcelle a l'ambre. L'en-tete du bloc
   V5.8 annonce « aucune couleur nouvelle, la messagerie reprend l'ambre de la
   V5.7 » : ces deux lignes disaient le contraire, et l'ecran melangeait les
   deux accents de l'app sans que rien ne distingue leurs roles. */
.msg-bulle.moi {
  align-self: flex-end; background: var(--com-pale); border-color: var(--com-surlignage);
  border-radius: var(--r) var(--r) 2px var(--r);
}
.msg-bulle.supprime { color: var(--ink-3); font-size: 12px; }
.msg-tete { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.msg-tete time { color: var(--ink-3); font-size: 11px; margin-left: auto; }
.msg-tete em { color: var(--ink-3); font-size: 10px; font-style: normal; }
.msg-corps { white-space: pre-wrap; font-size: 13px; margin-top: 2px; }

.msg-composeur { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.msg-composeur .com-saisie { flex: 1; }
.msg-composeur .btn { flex: none; }

@media (max-width: 900px) {
  .msg-carte { max-height: none; }
  .msg-bulle { max-width: 92%; }
}

/* ---------- V6.1 (RELI-321) : pilotage des instances dédiées ---------- */
/* Dépassement de sièges dans le tableau de flotte. Rouge, mais pas alarmiste :
   rien n'est cassé, rien n'est suspendu — c'est une info commerciale, pas une
   panne. D'où une teinte, sans fond ni bordure. */
.alerte-quota { color:#a03d2c; font-weight:600; }

/* Mention « ouvert parce que vous êtes super admin ». Volontairement discrète
   et non cliquable : elle s'adresse à une seule personne sur toute l'instance,
   et elle ne doit surtout pas ressembler à une alerte destinée au client. */
.cc-exempt {
  display:inline-block; margin-top:6px; padding:2px 7px; border-radius:999px;
  font-size:11px; line-height:1.6; color:#7a5b12; background:#fdf3d6; border:1px solid #f0dfae;
}

/* ============================================================
   V6.3 (RELI-323) : annuaire d'équipe, profil, vignettes
   ============================================================ */

/* ---------- Vignettes ----------
   L'INITIALE EST LE CAS NORMAL, pas un état dégradé : la plupart des équipes
   ne mettront jamais de photo. Elle est donc dessinée avec le même soin —
   fond de couleur stable par personne, texte blanc, cercle net. La photo,
   quand elle existe, se pose PAR-DESSUS en position absolue : pas de saut de
   mise en page pendant le chargement, et si l'image échoue (droit refusé,
   fichier perdu) il suffit de la retirer du DOM pour retrouver l'initiale.
   `flex:none` + `align-self:center` : les en-têtes de message alignent leurs
   enfants sur la ligne de base, ce qui ferait flotter un cercle. */
.cc-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: none; align-self: center; overflow: hidden;
  width: 24px; height: 24px; border-radius: 50%;
  color: #fff; font-weight: 700; line-height: 1; letter-spacing: .2px;
  user-select: none; vertical-align: middle;
}
.cc-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Actions d'un message : le ⋯ ----------
   Deux boutons-texte sous chaque message prenaient, dans un panneau latéral,
   plus de place que les messages. Le ⋯ s'efface au repos et n'apparaît qu'au
   survol — mais il reste TOUJOURS dans le DOM et focalisable : au toucher et
   au clavier, le survol n'existe pas, et un bouton qu'on ne peut pas atteindre
   vaut un bouton absent. */
.com-menu-btn {
  margin-left: 6px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  color: var(--ink-3); font-size: 15px; line-height: 1; border-radius: 4px;
  opacity: 0; transition: opacity .12s;
}
.com-message:hover .com-menu-btn,
.msg-bulle:hover .com-menu-btn,
.com-menu-btn:focus-visible { opacity: 1; }
.com-menu-btn:hover { background: var(--fond-2, #eef1f3); color: var(--ink-1); }
@media (hover: none) { .com-menu-btn { opacity: .55; } }

/* Contenu d'un message supprimé, révélé par un owner : lisible mais
   visiblement à part — ce n'est pas du fil, c'est de la modération. */
.com-supprime-corps {
  margin-top: 4px; padding: 4px 8px; border-left: 2px solid var(--line);
  color: var(--ink-2); font-style: normal; white-space: pre-wrap;
}

.msg-mention-ajout { color: var(--com, #9a6a12); font-style: normal; }

/* ---------- Bandeau de l'annuaire ---------- */
.bandeau-equipe {
  margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r, 10px);
  background: var(--fond-2, #f4f6f7); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.5;
}
.bandeau-equipe .aide-modal { font-size: 12px; }

/* ---------- Page « Mon profil » ---------- */
.profil-tete { display: flex; align-items: center; gap: 14px; }
.profil-vignette .cc-avatar { box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.profil-nom strong { font-size: 17px; display: block; }
.profil-nom .extrait { margin: 2px 0 0; }
.profil-identite { padding-bottom: 14px; }
.profil-cases { display: flex; flex-wrap: wrap; gap: 4px 14px; }
/* Un champ verrouillé reste AFFICHÉ, en lecture, avec sa raison : le masquer
   ferait croire à un bug, le griser sans un mot ferait croire à une panne. */
.profil-verrouille label { color: var(--ink-3); }
.profil-verrouille .aide-modal { display: block; margin: 2px 0 0; font-size: 11px; }

/* ============================================================
   V6.4 (RELI-324) : mentions @, références #, et « Mes tâches »
   ============================================================ */

/* ---------- Pastilles de mention et de référence ----------
   Trois couleurs pour trois natures, et c'est délibéré : une personne, une
   fiche et une collection ne s'ouvrent pas sur la même chose. La personne
   reprend le violet des mentions de commentaires (V5.7) — c'est déjà le code
   couleur du « quelqu'un » dans le produit ; la fiche prend la sarcelle des
   jetons $valeur, celle du « contenu » ; la collection s'en distingue par un
   fond plus soutenu, parce qu'elle est un contenant. */
.cc-ref {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0 6px; border-radius: 4px; text-decoration: none;
  font-size: 0.92em; line-height: 1.55; white-space: nowrap; font-weight: 600;
}
.cc-ref:hover { text-decoration: none; filter: brightness(0.96); }
.cc-ref-personne   { background: #ece7f3; color: #55407e; border: 1px solid #d8cfe8; }
.cc-ref-fiche      { background: #e2eff0; color: #0f5560; border: 1px solid #c4dfe2; }
.cc-ref-collection { background: #d9e8ea; color: #0b4550; border: 1px solid #b3d3d8; }
/* Une transclusion (#fiche.attribut) affiche une VALEUR, pas un nom : elle se
   fond dans la phrase, avec un simple soulignement pointillé pour dire qu'elle
   vient d'ailleurs et qu'elle suivra sa source. */
.cc-ref-valeur {
  background: none; border: 0; padding: 0; font-weight: 600; color: var(--ink-1);
  border-bottom: 1px dotted var(--ink-3); border-radius: 0;
}
.cc-ref .cc-avatar { margin-right: 1px; }

/* V7.9 (RELI-450) — la pastille d'un BLOC (span[data-ref], par opposition au
   <a> des champs de texte simple) est cliquable, partout et sans modificateur :
   la main du curseur suffit à le dire, et c'est ce que tout lien promet. On
   avait d'abord distingué édition et lecture par un curseur `alias` (« il faut
   Ctrl ») — un raccourci que rien à l'écran ne peut enseigner, donc un lien
   perçu comme cassé. L'indice est en CSS et non en JavaScript : le HTML d'un
   bloc est enregistré tel quel, un attribut posé à chaud partirait en base et
   jusque dans les exports. */
span.cc-ref[data-ref] { cursor: pointer; }

/* Menu d'autocomplétion — même grammaire visuelle que le menu « / » des blocs. */
.cc-mentions-menu {
  position: fixed; z-index: 700; min-width: 240px; max-width: 320px; max-height: 240px;
  overflow: auto; background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: var(--r, 10px); box-shadow: 0 6px 22px rgba(0, 0, 0, .16); padding: 4px;
}
.cc-mentions-item {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 5px 7px;
  border: 0; background: none; border-radius: 6px; cursor: pointer; text-align: left;
}
.cc-mentions-item:hover, .cc-mentions-item.sel { background: var(--fond-2, #eef1f3); }
.cc-mentions-item .ic { width: 18px; text-align: center; color: var(--ink-3); font-weight: 700; }
.cc-mentions-item small { display: block; color: var(--ink-3); font-size: 11px; }

/* ---------- Champ texte à deux modes ----------
   `pre-wrap` : le contenu reste du texte, retours à la ligne compris — on ne
   le convertit pas en HTML pour l'afficher. Le pointeur en « texte » et le
   liseré au survol disent qu'on peut cliquer pour écrire, sans en faire un
   bouton : ce n'en est pas un. */
.cc-texte-lecture {
  white-space: pre-wrap; word-break: break-word; min-height: 2.4em;
  padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r, 8px);
  line-height: 1.6; box-sizing: border-box;
}
/* V6.5 — la hauteur minimale de la CARTE (contexte, vocabulaire, ontologie,
   description courte) est celle du textarea de `.zone-editable` : passer de la
   lecture à l'écriture ne doit pas faire sauter la carte sous le curseur.
   ⚠ Portée à la carte, et à elle seule : `.cc-texte-lecture` sert AUSSI au
   contenu de chaque note (js/vues.js), une ligne compacte de deux lignes. Une
   règle générale à 84px faisait tenir vingt notes sur cinq écrans. */
.carte-texte > .cc-texte-lecture { min-height: 84px; padding: 8px; }
.cc-texte-lecture.editable { cursor: text; }
.cc-texte-lecture.editable:hover { border-color: var(--line); background: var(--fond-2, #f7f9fa); }
.cc-aide-mentions { margin-top: 6px; }

/* ---------- Mes tâches ---------- */
.taches-liste { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.tache-ligne {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 6px;
  border-top: 1px solid var(--line-soft); border-radius: 6px;
}
.tache-ligne:first-child { border-top: 0; }
.tache-ligne:hover { background: var(--fond-2, #f7f9fa); }
.tache-ligne.porte { opacity: .45; }
/* Une tâche faite reste LISIBLE et reste en place : la faire disparaître au
   clic prive du seul retour qui compte, et empêche de se corriger. */
.tache-ligne.faite .tache-texte { text-decoration: line-through; color: var(--ink-3); }
.tache-poignee { cursor: grab; color: var(--ink-3); user-select: none; padding-top: 2px; }
.tache-poignee:active { cursor: grabbing; }
.tache-corps { flex: 1; min-width: 0; }
.tache-texte { line-height: 1.5; word-break: break-word; }
.tache-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; font-size: 11px; }
.tache-origine { color: var(--ink-3); }
.tache-ou { color: var(--ink-2); text-decoration: none; }
.tache-ou:hover { text-decoration: underline; }

/* ---------- V6.6 (RELI-331) : Mes tâches — vues, échéances, activité ---------- */

/* Échéance qui approche : orange à J-seuil (2 par défaut, réglable ⚙).
   Le rouge (.retard) existe depuis la V3.2 et couvre « atteinte ou dépassée ». */
.note-echeance.bientot { color: #8a5a00; font-weight: 600; }

/* Brique « Tâches » du bandeau : la bulle compte ce qui reste, pas une alerte —
   elle n'a donc pas le rouge des messages non lus. */
.btn-taches { position: relative; }
.btn-taches .topbar-bulle { background: rgba(255, 255, 255, .28); }

/* Onglets À faire / Fait / Kanban, avec le ⚙ calé à droite sur la même ligne. */
.taches-onglets { margin: 12px 0 10px; align-items: center; }
.taches-onglets-espace { flex: 1; }

/* La grille d'activité : une colonne par semaine, un carré par jour, la teinte
   monte avec le nombre de tâches accomplies. Volontairement sous l'en-tête et
   au-dessus des onglets : c'est un encouragement, pas un tableau de bord. */
.hm-zone { margin: 8px 0 2px; }
.hm-grille {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(7, 10px); grid-auto-columns: 10px;
  gap: 3px; margin-bottom: 5px; max-width: 100%; overflow-x: auto;
}
.hm-case {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--fond-2, #eef1f0); display: inline-block; flex: none;
}
.hm-case.n1 { background: #cfe3e5; }
.hm-case.n2 { background: #93c2c8; }
.hm-case.n3 { background: #3f909c; }
.hm-case.n4 { background: var(--accent-fonce); }
.hm-legende { display: inline-flex; gap: 3px; align-items: center; font-size: 11px; color: var(--ink-3); }

/* Le kanban : trois colonnes, des cartes qui se prennent à la main.
   « En cours » est un tri personnel ; déposer dans « Fait » coche pour de vrai. */
.taches-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.kanban-col { background: var(--fond-2, #f7f9fa); border-radius: 8px; padding: 8px; min-height: 140px; }
.kanban-col h4 {
  margin: 2px 4px 8px; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-2);
}
.kanban-col.drop-into { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-pale); }
.kanban-vide { margin: 4px; font-size: 12px; color: var(--ink-3); }
.kanban-carte {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 7px 8px; margin-bottom: 6px; cursor: grab;
}
.kanban-carte:active { cursor: grabbing; }
.kanban-carte.porte { opacity: .45; }
.kanban-carte.faite .tache-texte { text-decoration: line-through; color: var(--ink-3); }
.kanban-carte-tete { display: flex; gap: 7px; align-items: flex-start; }
.kanban-carte .tache-meta { margin-top: 4px; margin-left: 22px; }
@media (max-width: 700px) { .taches-kanban { grid-template-columns: 1fr; } }

/* ============================================================
   V7.5 (RELI-444) — MISE EN FORME LÉGÈRE ET RÉACTIONS
   ============================================================ */

/* -- barre de sélection des messages --
   Elle vit sur <body> et se place en coordonnées ÉCRAN (le miroir de
   texte_riche.js les calcule) : d'où `fixed`, là où la barre des blocs est
   `absolute` dans la racine de son éditeur. Tout le reste — fond, boutons,
   ombre — est hérité de .bloc-barre-fmt : deux barres qui se ressemblent
   doivent se ressembler vraiment. */
.md-barre { position: fixed; z-index: 260; }

/* -- rendu des marques, dans un message comme dans un commentaire -- */
.msg-corps code, .com-corps code {
  background: var(--fond-2, #f7f9fa); border: 1px solid var(--line-soft);
  border-radius: 4px; padding: 0 4px; font-size: 12px;
}
.msg-corps s, .com-corps s { color: var(--ink-3); }
.md-lien { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }

/* -- réactions --
   La rangée ne prend AUCUNE place quand elle est vide : pas de marge, pas de
   hauteur. Un fil sans réaction doit être exactement l'écran de la V7.4. */
.react-rangee { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.react-rangee:not(:empty) { margin-top: 5px; }
.react-pastille {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  padding: 1px 7px; font-size: 12px; line-height: 18px;
}
.react-pastille:hover:not(:disabled) { border-color: var(--accent); }
.react-pastille:disabled { cursor: default; opacity: .75; }
/* Celles où je suis : c'est l'information qui décide du sens du prochain clic. */
.react-pastille.moi { background: var(--accent-pale); border-color: var(--accent); }
.react-nb { color: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.react-pastille.moi .react-nb { color: var(--accent); font-weight: 600; }

/* Le bouton d'ajout ne se montre qu'au survol du message — ou dès qu'il y a
   déjà des réactions, sinon la rangée « saute » de largeur sous le curseur.
   Il reste visible en permanence au doigt : sans survol, un bouton caché est
   un bouton absent. */
.react-ajouter {
  border: 1px dashed var(--line); background: none; color: var(--ink-3);
  border-radius: 11px; padding: 1px 7px; font-size: 11px; line-height: 18px;
  cursor: pointer; opacity: 0; transition: opacity .12s;
}
.msg-bulle:hover .react-ajouter, .com-message:hover .react-ajouter,
.react-ajouter:focus-visible, .react-rangee .react-pastille ~ .react-ajouter { opacity: 1; }
.react-ajouter:hover { color: var(--accent); border-color: var(--accent); }
@media (hover: none) { .react-ajouter { opacity: 1; } }

.react-choix { display: flex; flex-wrap: wrap; gap: 3px; max-width: 220px; }
.react-rapide {
  border: 1px solid transparent; background: none; cursor: pointer;
  border-radius: 6px; padding: 3px 5px; font-size: 17px; line-height: 1.1;
}
.react-rapide:hover { background: var(--accent-pale); }
.react-rapide.moi { border-color: var(--accent); background: var(--accent-pale); }
.react-plus { font-size: 14px; color: var(--ink-3); }

/* -- V7.7 (RELI-447) : recherche dans la barre des conversations -- */
.conv-recherche {
  width: 100%; margin-bottom: 6px; padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card);
}
.conv-recherche:focus { outline: none; border-color: var(--com); }
/* L'extrait d'un message trouvé : distinct du dernier message, qu'il remplace,
   sinon on croit lire l'aperçu habituel et on ne comprend pas le classement. */
.conv-trouve { color: var(--ink-2); font-style: italic; }
.conv-trouve em { font-style: normal; color: var(--ink-3); font-size: 11px; }

/* -- V7.8 (RELI-448) : pagination du fil et message ciblé -- */
.msg-plus {
  align-self: center; margin: 2px 0 6px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.msg-plus:hover { border-color: var(--com); }
/* Le message atteint depuis une recherche : signalé assez pour qu'on le
   repère d'un coup d'œil, et la marque s'efface d'elle-même — elle dit « c'est
   ici », pas « ce message est spécial ». */
.msg-cible {
  outline: 2px solid var(--com); outline-offset: 2px; border-radius: 8px;
  background: var(--com-pale);
  animation: msg-cible-pulse 1s ease-out 2;
}
/* La marque NE S'EFFACE PLUS toute seule : dans une conversation courte, rien
   ne défile, et un éclair de deux secondes était le SEUL retour visible —
   raté, on ne comprenait pas où l'on avait atterri. Elle reste jusqu'à ce
   qu'on touche le fil (retirée par le script). */
@keyframes msg-cible-pulse {
  0% { outline-color: transparent; }
  50% { outline-color: var(--com); }
  100% { outline-color: var(--com); }
}
.msg-cible::after {
  content: 'résultat de la recherche';
  display: block; margin-top: 3px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--com);
}


/* ============================================================
   V8.2 — APERÇU D'UN MODÈLE (lecture seule)
   Volontairement sobre et compact : c'est une CHARPENTE qu'on lit avant de
   poser un modèle — quels titres, quelles sections, quelles cases — pas une
   reproduction fidèle de la fiche qui en sortira.
   ============================================================ */
.modele-apercu { font-size: 13px; line-height: 1.45; color: var(--ink-2, #3c5058); }
.modele-apercu-titre { font-weight: 700; color: var(--ink, #16323c); margin: 8px 0 2px; }
.modele-apercu-t1 { font-size: 16px; }
.modele-apercu-t2 { font-size: 14.5px; }
.modele-apercu-t3 { font-size: 13.5px; }
.modele-apercu-p { margin: 2px 0; }
.modele-apercu-cit { border-left: 3px solid var(--line, #dbe4e6); padding-left: 8px; font-style: italic; }
.modele-apercu-callout { background: #eef1f0; border-radius: 8px; padding: 6px 9px; margin: 6px 0; }
.modele-apercu-code {
  background: #f4f6f6; border-radius: 6px; padding: 6px 8px; margin: 6px 0;
  font-size: 12px; white-space: pre-wrap; overflow-x: auto;
}
.modele-apercu-hr { border: 0; border-top: 1px solid var(--line, #dbe4e6); margin: 8px 0; }
.modele-apercu-bloc { margin: 4px 0; }
.modele-liste .bloc-menu-item { width: 100%; }


/* ============================================================
   V8.3 — REDIMENSIONNEMENT DES COLONNES (blocs « tableau » et « tableau lié »)
   Le bloc « tableur » le savait depuis la V4.2 ; ces deux-là non — alors que
   c'est là qu'on met une colonne « Décision » de trois mots à côté d'une
   colonne « Contexte » de trois lignes.
   ============================================================ */

/* `table-layout: fixed` UNIQUEMENT quand une largeur a été posée. Sans cette
   condition, tous les tableaux déjà écrits changeraient d'aspect au simple
   rechargement : en mode automatique les colonnes suivent leur contenu, en
   mode fixe elles se partagent la largeur à parts égales. Un tableau intact
   doit rester intact. */
.bloc-tableau.largeurs { table-layout: fixed; }
/* La table cesse d'être contrainte à 100 % : sinon, quand la somme des
   largeurs demandées dépasse la place disponible, le navigateur les réduit
   TOUTES proportionnellement — on tire une colonne à 280 px, on en obtient
   230, et les voisines rétrécissent sans qu'on ait rien demandé. En largeur
   `max-content` avec un plancher à 100 %, les colonnes valent exactement ce
   qu'on a réglé et l'enveloppe (déjà en `overflow-x: auto`) défile.
   `width: auto` ne suffit PAS : en disposition fixe, Chromium prend alors la
   largeur disponible et rétrécit les colonnes pour l'occuper — mesuré. */
.bloc-tableau.largeurs { width: max-content; min-width: calc(100% - 2px); max-width: none; }
/* Le plancher de 70 px de `.bloc-tableau td` empêcherait de rétrécir une
   colonne en deçà — on le lève seulement là où l'utilisateur a pris la main. */
/* `overflow-wrap` et NON `overflow: hidden` : couper une URL en plein milieu
   sans le dire est pire que la laisser passer à la ligne, et `hidden` rognait
   au passage les 3 px de la poignée du tableau lié, qui vit DANS la cellule. */
.bloc-tableau.largeurs td { min-width: 0; overflow-wrap: anywhere; }

/* Barre de saisie du bloc « tableau » : en SUPERPOSITION dans l'enveloppe,
   parce que les cellules de la première ligne sont éditables et que leur
   contenu est relu tel quel (même raison que les poignées ⠿ depuis la V3.1). */
.bloc-tab-redim {
  position: absolute; width: 7px; z-index: 3; cursor: col-resize;
  border-radius: 3px; background: transparent; transition: background .12s;
}
.bloc-tab-redim:hover, body.cc-redim-en-cours .bloc-tab-redim:hover { background: var(--accent); opacity: .55; }

/* Bloc « tableau lié » : cellules non éditables, la poignée vit dedans. */
.bloc-tableau.tablie td { position: relative; }
.tablie-redim {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  z-index: 3; cursor: col-resize; border-radius: 3px; background: transparent; transition: background .12s;
}
.tablie-redim:hover { background: var(--accent); opacity: .55; }

/* Pendant le glissement, tout le curseur de la page passe en col-resize et la
   sélection de texte est neutralisée : sans cela, tirer une colonne
   sélectionne le texte des cellules qu'on survole. */
body.cc-redim-en-cours { cursor: col-resize; user-select: none; }
body.cc-redim-en-cours * { cursor: col-resize !important; }

/* La bande verticale « + colonne » est ancrée au bord droit de l'enveloppe
   (`right: 0`). Tant que la table faisait 100 % de large, elle vivait dans la
   gouttière ; en mode fixe la table déborde et défile, et la bande se
   retrouvait POSÉE SUR les cellules — invisible mais cliquable : viser une
   cellule ajoutait une colonne. Elle est désormais recalée par le script,
   contre le bord droit DU TABLEAU, où qu'il soit ; d'où le `right: auto`
   qu'il pose en même temps que le `left`. */
.bloc-tab-plus.col[style*="left"] { right: auto; }


/* V8.4 — « des modifications ont eu lieu ». Discret et en bas : un bandeau en
   haut aurait poussé toute la page vers le bas, ce qui est exactement le
   déplacement qu'on cherche à éviter pendant une saisie. */
/* Deux bandeaux peuvent coexister — « la collection a changé » et « une
   nouvelle version est en ligne » — et c'est même le moment le plus probable :
   un déploiement. Superposés au même pixel, le second cachait entièrement le
   premier, bouton compris. On les empile. */
.bandeau-maj {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 900;
  display: flex; align-items: center; gap: 10px;
  background: var(--card, #fff); border: 1px solid var(--line, #dbe4e6);
  border-radius: 999px; padding: 7px 10px 7px 16px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(24, 43, 58, .16);
}

/* ============================================================
   V8.4 — VUE GALERIE et ORGANIGRAMME
   Des cartes, pas des colonnes : contrairement au kanban, la position d'une
   carte ne porte aucune donnée — on ne déplace personne d'un service à
   l'autre en la faisant glisser. D'où l'absence totale d'affordance de
   glissement ici.
   ============================================================ */
.galerie {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.galerie-carte {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--line, #dbe4e6); border-radius: 10px; overflow: hidden;
  background: var(--card, #fff); transition: box-shadow .12s, transform .12s;
}
.galerie-carte:hover { box-shadow: 0 6px 18px rgba(24, 43, 58, .12); transform: translateY(-1px); }
.galerie-photo { aspect-ratio: 4 / 3; background: var(--line-soft, #eef1f0); overflow: hidden; }
.galerie-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-photo-vide {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 34px; font-weight: 700;
}
.galerie-corps { padding: 8px 10px 10px; }
.galerie-titre { font-weight: 600; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; } /* V8.8 */
/* V8.8 — un email interminable pliait la grille au lieu de se plier lui-même */
.galerie-champ { font-size: 12.5px; color: var(--ink-2, #3c5058); margin-top: 3px; overflow-wrap: anywhere; }
.galerie-etiquette { color: var(--ink-3, #6b7f88); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }

/* ============================================================
   V8.8 — L'ORGANIGRAMME EST UN ARBRE, PAS UNE GRILLE.
   La V8.4 indentait les rattachés de 14 px sous une carte-photo de 180 px :
   l'œil ne voyait qu'une grille (retour de test : « les fiches sont restées
   côte à côte »). Le responsable est maintenant CENTRÉ au-dessus de ses
   rattachés, et des TRAITS les relient : une tige descend de la carte
   (.orga-tige), une barre court au-dessus du rang (::before/::after des
   enfants — moitié gauche, moitié droite, supprimées aux extrémités), et la
   verticale de chaque enfant est le border-left du ::after, posé au centre.
   Défilement horizontal assumé : un arbre large se parcourt, il ne
   s'écrase pas. */
.orga { overflow-x: auto; padding: 8px 0 12px; }
.orga-racines { display: flex; gap: 34px; align-items: flex-start; width: max-content; margin: 0 auto; }
.orga-noeud { display: flex; flex-direction: column; align-items: center; position: relative; }
.orga-tige { width: 2px; height: 18px; background: var(--line, #dbe4e6); }
.orga-fils { display: flex; align-items: flex-start; }
.orga-fils > .orga-noeud { padding: 18px 7px 0; }
.orga-fils > .orga-noeud::before,
.orga-fils > .orga-noeud::after { content: ''; position: absolute; top: 0; width: 50%; height: 18px; border-top: 2px solid var(--line, #dbe4e6); }
.orga-fils > .orga-noeud::before { right: 50%; }
.orga-fils > .orga-noeud::after { left: 50%; border-left: 2px solid var(--line, #dbe4e6); margin-left: -1px; }
.orga-fils > .orga-noeud:first-child::before { border-top: 0; }
.orga-fils > .orga-noeud:last-child::after { border-top: 0; }

/* La carte compacte : avatar rond + nom + champs — dense, lisible à 40 personnes. */
.orga-carte { display: flex; gap: 8px; align-items: center; text-decoration: none; color: inherit;
  border: 1px solid var(--line, #dbe4e6); border-radius: 10px; background: var(--card, #fff);
  padding: 7px 10px; width: 190px; box-sizing: border-box; transition: box-shadow .12s, transform .12s; }
.orga-carte:hover { box-shadow: 0 4px 14px rgba(24, 43, 58, .12); transform: translateY(-1px); }
.orga-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center; }
.orga-avatar img { width: 100%; height: 100%; object-fit: cover; }
.orga-avatar-vide { color: #fff; font-size: 17px; font-weight: 700; }
.orga-corps { display: flex; flex-direction: column; min-width: 0; }
.orga-nom { font-weight: 600; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.orga-champ { font-size: 11.5px; color: var(--ink-3, #6b7f88); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }

.bandeau-maj-haut { bottom: 70px; }
.bandeau-maj-bas { bottom: 18px; }

/* ============================================================
   V8.6 — VUE GRAPHIQUE
   Le tracé lui-même est en SVG (js/graphique_svg.js) et n'a besoin d'aucun
   style : tout y est dessiné. Ce qui suit n'habille que ce qu'il y a AUTOUR —
   les onglets de graphes, la carte qui les contient, et la ligne de réglage
   d'une série.
   ============================================================ */
.onglets-graphes { margin-bottom: 6px; }
.onglets-graphes .onglet { font-size: 12.5px; padding: 4px 12px; }
.carte-graphique { padding: 14px 16px 12px; color: var(--ink); }
.cc-graphe { max-width: 100%; }
.graph-series { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 6px; }
.graph-serie-ligne { display: flex; align-items: center; gap: 5px; }
.graph-serie-ligne select { max-width: 130px; }
.popover-graphe label { display: block; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.popover-graphe label.case { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; color: var(--ink); }

/* ============================================================
   V8.6 — VERROU DE COLONNE
   Le cadenas doit se voir sans être criard : c'est une information d'état, pas
   une alerte. Assez présent pour qu'on le remarque AVANT de cliquer dans une
   cellule, assez discret pour qu'une colonne gelée reste lisible.
   ============================================================ */
.pastille-verrou {
  border: 0; background: none; padding: 0 0 0 4px; cursor: pointer;
  color: var(--ink-3); vertical-align: middle; line-height: 1;
}
.pastille-verrou:hover { color: var(--ink); }
.pastille-verrou svg { display: inline-block; vertical-align: -1px; }
/* La cellule d'une colonne gelée ne doit pas donner l'impression qu'on peut y
   écrire : ni curseur texte, ni surbrillance au survol. */
th:has(.pastille-verrou) { background: var(--line-soft); }
td.cellule-verrouillee { cursor: default; background: var(--line-soft); }
td.cellule-verrouillee:hover { background: var(--line-soft); }
.champ-ligne.champ-verrouille label { color: var(--ink-3); }
.champ-ligne.champ-verrouille label .pastille-verrou { padding-left: 3px; }
.bloc-verrou { border-left: 3px solid var(--line); }