/* =====================================================================
   VISION PME — Le tableau des appels

   Six colonnes de hauteur égale qui défilent chacune de leur côté.
   Sur un écran étroit, le tableau défile horizontalement plutôt que
   d'empiler les colonnes : un Kanban empilé n'est plus un Kanban, c'est
   six listes l'une sous l'autre.

   ── LES DEUX DERNIÈRES NE SONT PAS DES ÉTAPES ────────────────────────
   « Pas intéressé » et « Disqualifié » sont des SORTIES : on n'y avance
   pas, on en sort. L'écran doit le dire sans qu'on lise les titres, d'où
   une séparation franche avant elles et un fond différent. Sans ce
   marquage, la lecture de gauche à droite en fait la suite naturelle
   d'« Appel 3 » — c'est-à-dire l'inverse de ce qu'elles sont.
   ===================================================================== */

/* ⚠️ LE CORRECTIF A DEUX MOITIÉS, ET UNE SEULE NE SUFFIT PAS. `#kb-zone`
   est l'enfant DIRECT de `#page-content`, qui est une grille CSS — et un
   enfant de grille a `min-width: auto`, c'est-à-dire la largeur de son
   contenu. Tant qu'il refuse de rétrécir, l'`overflow-x` posé sur
   `.kb-tableau` en dessous ne retient rien.

   Mesuré : à quatre colonnes ça passait de justesse, à six la PAGE
   entière repartait de côté — en-tête et menu compris. Le même défaut
   s'est présenté à l'agenda le même jour, un cran plus haut dans
   l'arbre. */
#kb-zone { min-width: 0; }

.kb-tableau {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: var(--s-3);
  /* Le défilement appartient au tableau, jamais à la page : le corps du
     document ne doit pas partir de côté. */
  overflow-x: auto;
  padding-bottom: var(--s-2);
  /* ⚠️ `min-width: 0` N'EST PAS COSMÉTIQUE, ET LE DÉFAUT A ÉTÉ MESURÉ.
     `#page-content` est une GRILLE (app.css), et un enfant de grille a
     `min-width: auto` : sa largeur minimale devient celle de son contenu.
     Quatre colonnes de 260 px poussaient alors `#page-content` à 1 076 px
     dans un espace de 1 001 px, et c'est la PAGE ENTIÈRE qui partait de
     côté — en-tête compris — au lieu du seul tableau. Vérifié au
     navigateur avant et après. */
  min-width: 0;

  /* ⚠️ LA BARRE DE DEFILEMENT DOIT SE VOIR, ET C'ETAIT LE VRAI DEFAUT.
     Mesure au navigateur, fenetre de 1 280 : le tableau montre 952 px
     pour 1 440 px de contenu — 488 px cachees, soit deux colonnes.
     `overflow-x: auto` produisait bien une barre, mais la barre par
     defaut est grise, fine, et posee tout en bas d'un tableau qui fait
     la hauteur de l'ecran. Personne ne la voyait. On la dessine donc :
     epaisse, dans le vert du produit, toujours peinte. */
  scrollbar-width: auto;                     /* et surtout pas « thin » */
  scrollbar-color: var(--green) var(--surface-3);
  scroll-padding-inline: var(--s-3);
  overscroll-behavior-x: contain;
}

/* Firefox se contente des deux proprietes ci-dessus ; les navigateurs
   WebKit/Blink ont besoin des pseudo-elements. Les deux disent la meme
   chose. */
.kb-tableau::-webkit-scrollbar { height: 14px; }
.kb-tableau::-webkit-scrollbar-track {
  background: var(--surface-3);
  border-radius: var(--r-pill, 999px);
}
.kb-tableau::-webkit-scrollbar-thumb {
  background: var(--green);
  border-radius: var(--r-pill, 999px);
  /* La bordure de la couleur du rail donne au curseur son aspect de
     pilule flottante, sans avoir a superposer deux elements. */
  border: 3px solid var(--surface-3);
}
.kb-tableau::-webkit-scrollbar-thumb:hover { background: var(--green-text); }

.kb-colonne {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
}

/* La frontière entre le chemin et les sorties. Le trait est porté par la
   PREMIÈRE colonne de sortie, et non par un élément à part : un
   séparateur inséré dans la grille prendrait une colonne de large et
   décalerait tout le reste. */
.kb-colonne.est-sortie {
  background: var(--surface-3, var(--surface-2));
  border-style: dashed;
}
/* Un trait plein et une marge, plutôt qu'une ombre : dans un conteneur
   qui défile, une ombre portée déborde sur la colonne voisine au moment
   du défilement. */
.kb-colonne[data-colonne="refuse"] {
  margin-left: var(--s-4);
  border-left: 3px solid var(--border);
}
/* ⚠️ LE TITRE GRIS A ETE RETIRE ICI (1er septembre 2026). Il portait la
   distinction « ceci est une sortie » ; c'est desormais la couleur qui la
   porte, et un titre gris par-dessus une teinte rouge annulait
   exactement ce qu'on venait d'ajouter. */

.kb-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.kb-tete h2 {
  margin: 0;
  font: 700 var(--fs-sm)/1.2 var(--font-body);
}

.kb-compte {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  font: 700 var(--fs-xs)/1.5 var(--font-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text-muted);
}

.kb-pile {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-2);
  /* Une colonne haute ne doit pas allonger la page : chacune défile chez
     elle, et les quatre en-têtes restent alignés. */
  max-height: 64vh;
  overflow-y: auto;
}
.kb-pile.est-cible {
  background: var(--ok-soft, rgba(0, 206, 134, .08));
  outline: 2px dashed var(--green);
  outline-offset: -4px;
  border-radius: 8px;
}

.kb-vide {
  margin: 0; padding: 10px 4px;
  font: 400 var(--fs-xs)/1.5 var(--font-body);
  color: var(--text-subtle);
}

/* ── La carte ─────────────────────────────────────────────────────── */
.kb-carte {
  padding: 11px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: grab;
}
.kb-carte:active { cursor: grabbing; }
.kb-carte.est-portee { opacity: .45; }

/* Un rendez-vous manqué ne se signale pas par une couleur seule :
   l'icône change aussi, pour qui ne distingue pas le rouge. */
.kb-carte.est-en-retard { border-color: var(--danger); }

/* Le nom est devenu un bouton — il ouvre la fiche. Il doit rester un
   NOM à l'œil : pas de fond, pas de bordure, aligné comme avant. Le
   soulignement au survol est ce qui dit qu'il est cliquable, et le focus
   garde son contour pour qui navigue au clavier. */
.kb-nom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; color: var(--text); cursor: pointer;
  font: 600 var(--fs-sm)/1.3 var(--font-body); overflow-wrap: anywhere;
}
.kb-nom:hover { text-decoration: underline; }
.kb-entreprise {
  font: 400 var(--fs-xs)/1.4 var(--font-body);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.kb-meta, .kb-rappel {
  display: flex; align-items: center; gap: 5px;
  margin-top: 5px;
  font: 500 var(--fs-xs)/1.4 var(--font-body);
  color: var(--text-muted);
}
.kb-meta .icon, .kb-rappel .icon { width: 13px; height: 13px; flex: none; }

.kb-rappel { color: var(--green); font-weight: 600; }
.kb-rappel.est-en-retard { color: var(--danger); }

/* Le motif de sortie. Deux lignes au plus : c'est une étiquette, pas une
   note d'appel — le détail se lit sur la fiche. */
.kb-motif {
  display: flex; align-items: flex-start; gap: 5px;
  margin-top: 6px;
  font: 500 var(--fs-xs)/1.35 var(--font-body);
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}
.kb-motif .icon { width: 13px; height: 13px; flex: none; margin-top: 2px; }

.kb-carte.est-sortie { background: transparent; border-style: dashed; }

.kb-actions {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 9px;
}
/* Les boutons d'une carte ne se glissent pas : sans ça, commencer un
   clic sur « Appeler » démarre un déplacement. */
.kb-actions button { cursor: pointer; }

@media (max-width: 720px) {
  .kb-tableau { grid-auto-columns: minmax(240px, 85vw); }
  .kb-pile { max-height: 56vh; }
  /* L'ombre qui creuse la frontière suppose des colonnes côte à côte ;
     au doigt, on défile d'une colonne à l'autre et elle ne dit plus rien. */
  .kb-colonne[data-colonne="refuse"] { margin-left: 0; border-left-width: 1px; }
}

/* Un numéro marqué « mauvais numéro » revient au tableau depuis 0181 —
   avant, la fiche disparaissait purement et simplement, et personne ne la
   rappelait jamais. Elle est de retour, mais la carte le dit : recomposer
   ce numéro est du temps perdu, alors que son courriel marche peut-être
   encore. */
.kb-meta.est-mauvais { color: var(--danger); }

/* =====================================================================
   CHERCHER DANS LE TABLEAU
   =====================================================================
   Le champ vit dans l'en-tête de page, pas dans `#kb-zone` : la zone est
   réécrite à chaque chargement, et un champ qui s'y trouverait perdrait
   le curseur à chaque frappe.

   ⚠️ La recherche est faite PAR LA BASE (0183). Ce qui suit n'habille
   qu'un champ ; ce n'est pas ici que se décide ce qui est trouvé. */
.kb-chercher { flex: 1 1 260px; min-width: 200px; max-width: 380px; }
.kb-chercher .input { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }

/* Le compte rendu de la recherche, au-dessus des colonnes. Il porte deux
   choses : combien on a trouvé ICI, et combien correspondent AILLEURS —
   la seconde étant celle qui empêche de conclure qu'une fiche n'existe
   pas parce que le tableau ne la montre pas. */
.kb-resultat {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-3); padding: 10px 14px;
  background: var(--info-soft, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  font-size: var(--fs-sm);
}
.kb-resultat > span { min-width: 0; }
.kb-resultat b { font-variant-numeric: tabular-nums; }
/* Zéro résultat n'est pas une erreur — c'est une réponse. Un ton d'alerte
   ferait croire à une panne à chaque nom mal orthographié. */
.kb-resultat.est-vide { background: var(--surface-2); color: var(--text-muted); }
.kb-ailleurs {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: var(--fs-xs);
}
.kb-ailleurs .icon { width: 14px; height: 14px; flex: none; }

/* ── La poignée du bas de pile ───────────────────────────────────────
   « + 116 autres non affichés » disait la vérité mais ne menait nulle
   part. C'est devenu un bouton : il prend toute la largeur de la pile,
   parce qu'il en est le prolongement et non un contrôle posé à côté. */
.kb-plus {
  width: 100%; margin-top: 2px; padding: 9px 8px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: 1px dashed var(--border); border-radius: 8px;
  cursor: pointer;
  font: 600 var(--fs-xs)/1.4 var(--font-body); color: var(--text-muted);
}
.kb-plus:hover { border-color: var(--green); color: var(--green-text); background: var(--ok-soft, rgba(0, 206, 134, .06)); }
.kb-plus:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.kb-plus .icon { width: 14px; height: 14px; flex: none; }

/* ─────────────────────────────────────────────────────────────────────
   « JAMAIS REJOINT » — UNE COLONNE QUI NE DEMANDE RIEN (31 août 2026)
   ─────────────────────────────────────────────────────────────────────
   Ni une étape du chemin, ni une sortie qu'on choisit : un constat. Trois
   tentatives ou plus sans une seule conversation. Elle doit donc se lire
   comme une mise de côté — présente, consultable, mais qui ne réclame pas
   l'œil comme les colonnes où il reste quelque chose à faire. D'où le gris
   plutôt qu'une couleur, et le trait pointillé plutôt que plein : rien
   n'en part tout seul. */
.kb-colonne.est-calculee { border-style: dashed; }
/* Le titre et la pastille de « Jamais rejoint » suivent la teinte jaune
   comme les autres colonnes — voir le bloc des couleurs plus bas. Le
   pointille du cadre suffit a dire qu'on n'y depose rien. */

/* La règle, énoncée une fois en tête de colonne. Une colonne dont on ne
   comprend pas le critère se lit comme un bogue. */
.kb-regle {
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-2);
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
}

/* Les cartes y sont posées, pas actives : on retire l'appel à l'action
   visuel sans les rendre inaccessibles — un agent peut toujours ouvrir la
   fiche et retenter sa chance. */
.kb-colonne.est-calculee .kb-carte { opacity: 0.86; }
.kb-colonne.est-calculee .kb-carte:hover { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   UNE COULEUR PAR COLONNE (1er septembre 2026)
   ─────────────────────────────────────────────────────────────────────
   Demandé par Matthieu, avec la retenue en prime : « pas obligatoirement
   hyper frappant et massif, mais au moins le titre de la colonne ».

   La couleur ENCODE quelque chose de vrai, elle ne décore pas :

     Rappel planifié ...... vert    — quelque chose est promis, ça vit
     Appel 1 → 2 → 3 ...... bleu → mauve, une progression continue :
                            plus la teinte glisse vers le mauve, plus on
                            a insisté sans conclure
     Jamais rejoint ....... jaune   — ni un échec ni un espoir : en attente
     Pas intéressé ........ rouge pâle  — un non qui se rappellera
     Disqualifié .......... rouge foncé — un non définitif

   ⚠️ LA TEINTE VIT SUR LA COLONNE, PAS SUR CHAQUE RÈGLE. Un seul
   `--kb-teinte` par colonne, et le titre, le liseré et la pastille s'en
   servent. Ajouter une colonne demain, c'est deux lignes ici — pas six.

   ⚠️ ET LES DEUX THÈMES SONT TRAITÉS. Le rouge foncé du thème clair
   (#B3282D) serait illisible sur le fond sombre : chaque teinte a sa
   contrepartie, et le bloc sombre ne redéfinit QUE les jetons. */
.kb-colonne[data-colonne="rappel"]         { --kb-teinte: #00A86C; --kb-voile: rgba(0, 168, 108, 0.13); }
.kb-colonne[data-colonne="appel1"]         { --kb-teinte: #4F7CFF; --kb-voile: rgba(79, 124, 255, 0.13); }
.kb-colonne[data-colonne="appel2"]         { --kb-teinte: #6E76FB; --kb-voile: rgba(110, 118, 251, 0.13); }
.kb-colonne[data-colonne="appel3"]         { --kb-teinte: #8E6FF7; --kb-voile: rgba(142, 111, 247, 0.13); }
.kb-colonne[data-colonne="jamais_rejoint"] { --kb-teinte: #C98600; --kb-voile: rgba(232, 155, 0, 0.15); }
.kb-colonne[data-colonne="refuse"]         { --kb-teinte: #EE7175; --kb-voile: rgba(238, 113, 117, 0.14); }
.kb-colonne[data-colonne="disqualifie"]    { --kb-teinte: #9E2126; --kb-voile: rgba(158, 33, 38, 0.13); }

[data-theme="dark"] .kb-colonne[data-colonne="rappel"]         { --kb-teinte: #2FE0A2; }
[data-theme="dark"] .kb-colonne[data-colonne="appel1"]         { --kb-teinte: #7C9DFF; }
[data-theme="dark"] .kb-colonne[data-colonne="appel2"]         { --kb-teinte: #96A0FF; }
[data-theme="dark"] .kb-colonne[data-colonne="appel3"]         { --kb-teinte: #B49BFF; }
[data-theme="dark"] .kb-colonne[data-colonne="jamais_rejoint"] { --kb-teinte: #F2B33D; }
[data-theme="dark"] .kb-colonne[data-colonne="refuse"]         { --kb-teinte: #F2949A; }
[data-theme="dark"] .kb-colonne[data-colonne="disqualifie"]    { --kb-teinte: #E0575F; }

/* Le liseré : trois pixels en tête de colonne. C'est ce qu'on voit en
   balayant le tableau des yeux, avant même de lire les titres. */
.kb-colonne { border-top: 3px solid var(--kb-teinte, transparent); }

.kb-tete h2 { color: var(--kb-teinte, var(--text)); }

/* La pastille du compte prend le voile de sa colonne. Elle reste lisible :
   le chiffre garde la teinte pleine, pas le voile. */
.kb-tete .kb-compte {
  background: var(--kb-voile, var(--surface-3));
  color: var(--kb-teinte, var(--text-muted));
}

/* ⚠️ ET C'EST LA SPECIFICITE QUI TRANCHE, PAS L'ORDRE. Trois colonnes
   avaient un titre force en gris par `.kb-colonne.est-sortie .kb-tete h2`
   et `.kb-colonne.est-calculee .kb-tete h2` — 0,3,1 contre 0,1,1 pour la
   regle ci-dessus. Etre ecrit apres n'y change RIEN : ces deux regles
   auraient gagne, et « Pas interesse », « Disqualifie » et « Jamais
   rejoint » — exactement les trois colonnes dont la couleur avait ete
   demandee — seraient restees grises. Les deux regles ont donc ete
   retirees plus haut, au lieu de surencherir en specificite ici. */