/* Elevora CRM — css/pipeline.css
   La page Pipeline, 28/09/2026 : la barre d'outils commune à ses deux onglets (js/39b), comme celle
   de Tâches. Demande de Célian : « la pipeline prospection et la pipeline client restent telles
   quelles, juste visuellement elles changent, elles s'améliorent […] améliorer les filtres, le visuel,
   un peu comme tu as fait avec la partie Tâches ».

   La barre, les pastilles, les panneaux, le compteur et le tableau sont ceux de Tâches (.tk-*,
   css/taches.css, chargée avant) : la même main d'une page à l'autre. Cette feuille ne pose que ce
   qui est propre au Pipeline : la ligne des onglets et son action, l'espacement de la page, la
   période de la Prospection dans la barre, les points de couleur des étapes, et ce que le tableau
   montre en plus (étape modifiable, montants, avancement, tri par en-tête).

   Aucune couleur écrite en dur : les couleurs d'étape reprennent les jetons déjà vérifiés à 4,5:1
   dans les deux thèmes, et ne font que doubler un nom écrit en toutes lettres. Aucune bordure
   épaisse sur un côté, aucune ombre, aucune transition (règle du 28/09/2026 et du CLAUDE.md). */

/* ── La ligne des onglets, et l'action de l'onglet ouvert à son bout ── */
.pl-entete{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s2) var(--s3);flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:var(--s5)}
/* Deux onglets tiennent toujours sur la ligne : pas de défilement (overflow-x:auto faisait naître une
   barre verticale, le trait de l'onglet choisi dépassant d'un pixel vers le bas). */
.pl-entete .pl-onglets{border-bottom:0;margin-bottom:0;overflow:visible}
.pl-entete-actions{display:flex;align-items:center;gap:var(--s2);margin-left:auto;padding-bottom:8px}
.pl-entete-actions:empty{display:none}

/* ── La page : bandeau, barre, pastilles, compteur, fiches — le rythme de Tâches ── */
.pr-page.pl-page,.pc-page.pl-page{gap:0}
.pl-page > #pl-bd-prospection,.pl-page > .pc-bd{margin-bottom:var(--espace-bloc)}   /* [V24] §7 : l'espace standard, pas 16 px en dur */
.pl-page > #pl-bd-prospection:empty{display:none;margin:0}
.pl-corps > .pb-board{margin-top:var(--s1)}
.pl-corps [hidden]{display:none !important}

/* La période dans la barre : la Prospection (1 mois, 3 mois…) et le Pipeline client (Semaine,
   Mois…) à la hauteur des bascules, 38 px. */
.pl-outils .per-filtre{flex-wrap:nowrap}
.pl-periode .pr-periodes{padding:3px}
.pl-periode .pf-btn,.pl-outils .per-seg .pf-btn{min-height:30px}

/* Les fiches archivées : ni présentation, ni ordre, ni pastilles (elles parlent du flux). */
.pl-page--archives #pl-bascules-prospection,.pl-page--archives #pl-ordre-prospection,.pl-page--archives #pl-pastilles-prospection{display:none}

/* Les pastilles : l'icône de filtre en tête de la rangée, puis les pastilles de Tâches. */
.pl-pastilles-t{display:inline-flex;align-items:center;justify-content:center;width:22px;min-height:30px;color:var(--text3)}

/* ── Les points de couleur des étapes (colonnes et liste) ── */
.pr-col[data-etape="contact"],.pl-etape[data-etape="contact"]{--pl-c:var(--text3)}
.pr-col[data-etape="rencontre"],.pl-etape[data-etape="rencontre"]{--pl-c:var(--blue)}
.pr-col[data-etape="proposition"],.pl-etape[data-etape="proposition"]{--pl-c:var(--violet)}
.pr-col[data-etape="devis"],.pl-etape[data-etape="devis"]{--pl-c:var(--amber)}
.pr-col[data-etape="gagne"],.pl-etape[data-etape="gagne"]{--pl-c:var(--green)}
.pr-col[data-etape="perdu"],.pl-etape[data-etape="perdu"]{--pl-c:var(--red)}
.pl-etape[data-etat="Confirmé"]{--pl-c:var(--amber)}
.pl-etape[data-etat="En cours"]{--pl-c:var(--accent)}
.pl-etape[data-etat="En attente"]{--pl-c:var(--pink)}
.pl-etape[data-etat="Livré"]{--pl-c:var(--green)}
.pl-etape[data-etat="Perdu"]{--pl-c:var(--red)}
/* Un titre sur deux lignes (« Rencontre programmée ») garde son point sur la première. */
.pr-col-t{display:flex;align-items:flex-start;gap:7px;min-width:0}
.pr-col-t .pr-point{margin-top:4.5px}
.pr-point,.pl-point{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--pl-c,var(--text3))}

/* La carte : le nom sur sa ligne, l'ancienneté dessous, à gauche. Elle flottait au milieu de la
   carte quand un nom long passait à la ligne (« il y a 9 j » sous « Leila AMMAR »). */
.pl-page .pr-carte-nom,.pl-page .pc-carte-nom{flex-basis:100%}
.pl-page .pr-carte .pr-age,.pl-page .pc-col .pc-age{margin-left:0}

/* Une colonne que la recherche ou les pastilles vident : une ligne, sans l'explication. */
.pl-col-vide{min-height:64px}
.pl-col-vide p{margin:0}

/* ── La présentation « Liste » (le tableau de Tâches) ── */
.pl-table .tk-c-titre{min-width:220px}
.pl-table th{vertical-align:middle}
.pl-montant{font:600 12.5px var(--mono);color:var(--text);white-space:nowrap}
.pl-date{color:var(--text2);white-space:nowrap}
.pl-date--retard{color:var(--red);font-weight:600}
.pl-mot{font-size:var(--fs-min)}
.pl-suite{font-size:12.5px;color:var(--text2)}
.pl-suite .pr-motif{margin:0;font-size:12.5px;font-weight:600;color:var(--text)}
.pl-relance{display:block;margin-top:2px;font-size:var(--fs-min);font-weight:600;color:var(--amber)}
.pl-ligne .pr-age{margin-left:4px}

/* L'étape d'une ligne : une liste, qui se lit comme un texte tant qu'on ne la survole pas. Même
   comportement clavier que « Déplacer vers » (rien ne part avant Entrée ou la sortie du champ). */
.pl-etape{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--text);font-size:12.5px}
.pl-etape-sel{min-height:30px;max-width:190px;padding:2px 4px;border:1px solid transparent;border-radius:var(--rs);background:transparent;color:var(--text);font:500 12.5px var(--font);cursor:pointer}
.pl-etape-sel:hover{border-color:var(--border2);background:var(--bg3)}
.pl-etape-sel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pl-etape-sel option{background:var(--bg2);color:var(--text)}

/* Les en-têtes qui rangent : un bouton, la flèche du sens, aria-sort sur la cellule. */
.pl-tri{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.pl-tri:hover{color:var(--text)}
.pl-tri--actif{color:var(--accent)}
.pl-tri-ic{display:inline-flex;opacity:.8}
.pl-tri:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* L'avancement : la barre et son pourcentage écrit, comme sur la carte. */
.pl-avance{display:inline-flex;align-items:center;gap:8px;min-width:120px}
.pl-avance .pb{display:block;flex:1;min-width:60px;margin:0}
.pl-avance .pf{display:block}
.pl-avance-v{flex-shrink:0;font:600 var(--fs-min) var(--mono);color:var(--text2)}

/* Rien à montrer : une phrase, et de quoi tout effacer quand ce sont la recherche ou les filtres. */
.pl-vide{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:40px var(--s4);border:1px dashed var(--border2);border-radius:var(--rl);text-align:center}
.pl-vide-t{margin:0;font-size:13.5px;color:var(--text2)}

/* Le panneau d'une pastille : la valeur, et son nombre de fiches à droite. */
.pl-pop-choix{align-items:center}
.pl-pop-choix-t{flex:1;min-width:0}
.pl-pop-n{flex-shrink:0;min-width:24px;padding:0 6px;border-radius:99px;background:var(--bg3);color:var(--text2);font:600 var(--fs-min)/18px var(--mono);text-align:center}
.pl-pop-note{font-size:var(--fs-min);color:var(--text3)}
/* [P3] 02/10/2026 — point 15 : « Apporté par » en deux groupes, Équipe et Agents commerciaux.
   Un intitulé discret au-dessus de chaque groupe, un filet léger entre deux groupes. */
.pl-pop-groupe{margin:0;padding:0}
.pl-pop-groupe + .pl-pop-groupe,.pl-pop-choix + .pl-pop-groupe{margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.pl-pop-groupe-t{margin:0;padding:4px 8px 2px;font:600 var(--fs-min) var(--font);color:var(--text2);text-transform:none}
.pl-ordre-props,.pl-ordre-sens{margin:0 0 10px;padding:0}
.pl-ordre-props .tk-pop-op,.pl-ordre-sens .tk-pop-op{padding:0}
.pl-ordre-note{margin:0}

/* ── Écrans étroits ── */
@media (max-width:900px){
  .pl-outils .per-filtre{flex-wrap:wrap}
}
@media (max-width:600px){
  .pl-entete-actions{width:100%;padding-bottom:10px}
  .pl-entete-actions .btn{flex:1;justify-content:center}
  .pl-periode,.pl-periode .pr-periodes{width:100%}
  .pl-periode .pr-periodes .pf-btn{flex:1;justify-content:center}
  .pl-etape-sel{max-width:100%}
}

/* [LD] 03/10/2026 (modification 12) : les points des deux étapes d'accord. Le libellé porte
   l'information, le point ne fait que la répéter (WCAG 1.4.1). Huit colonnes : le tableau défile
   dans son cadre (.pb-fluide), la page jamais. */
.pr-col[data-etape="proposition_validee"],.pl-etape[data-etape="proposition_validee"]{--pl-c:var(--pink)}
.pr-col[data-etape="devis_valide"],.pl-etape[data-etape="devis_valide"]{--pl-c:var(--accent)}
.pr-board:not(.pb-fluide){grid-template-columns:repeat(8,minmax(170px,1fr))}

/* ═══ [V27] 09/10/2026 — ISSUES FINALES : « Gagné » et « Perdu » (document 2, §5) ═══════════════════════════════
   « Perdu » est une SORTIE du pipeline, pas une étape de plus après « Gagné » : les deux issues finales vivent dans
   une zone à part, étiquetée « Clôturé » (js/00u-issues.js : ElvIssues.assembler), séparée des étapes en cours par un
   filet vertical de 1 px. Un seul style pour TOUS les tableaux à colonnes — Prospection (Gagné, Perdu), Clients
   (Livré, Perdu), Recrutement (Signé, Refusé) — et pour ceux de demain : une colonne marquée .pb-col--gagne /
   .pb-col--perdu l'hérite.
   · gagnée : vert doux, coche ; perdue : rouge doux, croix. Fond de colonne teinté de la couleur de l'issue, liseré
     d'un pixel TOUT AUTOUR (jamais un trait épais sur un côté : tests/bordures-laterales.js), en-tête teinté.
   · la couleur ne dit jamais seule : l'icône ET le mot (en-tête, repère de la carte, motif écrit) portent l'information.
   · les cartes perdues sont atténuées SANS baisser leur contraste (pas d'opacité : le texte reste à 4,5:1) : fond
     et nom plus calmes, repère « Perdu » et motif visibles.
   · au glisser, la zone de dépôt prend la couleur de l'issue (rouge doux pour une perte).
   Couleurs : jetons seulement (--green, --red et leurs fonds), déjà vérifiés dans les deux thèmes ;
   tests/v27-etape3.py recalcule les contrastes clair et sombre. */
.pb-col--gagne{--iss-c:var(--green);--iss-t:var(--green-bg)}
.pb-col--perdu{--iss-c:var(--red);--iss-t:var(--red-bg)}
.pb-col--issue{--iss-base:var(--bg)}
body.light .pb-col--issue{--iss-base:var(--bg4)}
.pb-col.pb-col--issue:is(.pr-col,.pc-col){background:color-mix(in srgb,var(--iss-c) 6%,var(--iss-base));border-color:color-mix(in srgb,var(--iss-c) 38%,var(--border2))}
/* L'en-tête : une bande teintée, l'icône dans un rond, le titre et le compteur à la couleur de l'issue. */
.pb-col--issue :is(.pr-col-tete,.pc-col-tete){padding:6px 8px;margin:-2px -4px 0;border-radius:var(--rs);background:var(--iss-t)}
.pb-col--issue :is(.pr-col-t,.pc-col-t){display:flex;align-items:center;gap:7px;color:var(--text)}
.pb-col-ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;border-radius:50%;color:var(--iss-c);background:color-mix(in srgb,var(--iss-c) 18%,transparent)}
.pb-col--issue :is(.pr-cnt,.pc-cnt){background:color-mix(in srgb,var(--iss-c) 16%,var(--iss-base));color:var(--text)}
.pb-col--issue :is(.pr-col-note,.pc-col-resume){color:var(--text2)}
/* La zone vide garde son texte, dans le ton de l'issue. */
.pb-col--issue :is(.pr-vide,.pc-vide){border-color:color-mix(in srgb,var(--iss-c) 35%,var(--border2))}
/* Le dépôt : la colonne d'arrivée prend la couleur de l'issue (rouge doux pour « Perdu », vert doux pour « Gagné »). */
.pb-col.pb-col--issue:is(.pr-col,.pc-col).drop-hover{border-style:dashed;border-color:var(--iss-c);background:color-mix(in srgb,var(--iss-c) 15%,var(--iss-base))}

/* Les cartes d'une issue : un repère (icône + mot) et, pour une perte, un ton plus calme. */
body :is(.pr-col,.pc-col).pb-col--perdu .pb-card:is(.pr-carte,.pc-carte){background:color-mix(in srgb,var(--red) 4%,var(--bg3));border-color:color-mix(in srgb,var(--red) 26%,var(--border2))}
body.light :is(.pr-col,.pc-col).pb-col--perdu .pb-card:is(.pr-carte,.pc-carte){background:color-mix(in srgb,var(--red) 4%,var(--bg2))}
.pb-col--perdu :is(.pr-carte-nom,.pc-carte-nom){color:var(--text2)}
/* Le mot du repère est écrit à la couleur du texte (contraste du texte courant) ; la couleur de l'issue est celle de l'icône et du fond. */
.pb-repere{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:20px;font:600 var(--fs-min)/1.5 var(--font);white-space:nowrap;color:var(--text)}
.pb-repere svg{color:var(--rep-c)}
.pb-repere--perdu{background:var(--red-bg);--rep-c:var(--red)}
.pb-repere--gagne{background:var(--green-bg);--rep-c:var(--green)}
.pr-motif-l{font-weight:400;color:var(--text2)}
.pc-suite-perte{flex-wrap:wrap;gap:4px 8px}

/* ═══ [V27] 09/10/2026 — PIPELINE CLIENT : lisible par quelqu'un qui découvre le CRM (document 2, §42) ═══════════════
   « Contraste visuel entre les colonnes et les fiches, pour que le statut soit identifiable immédiatement. »
   · chaque colonne a un en-tête teinté de la couleur de son statut (celle de sa pastille partout ailleurs : .b-c, .b-e, .b-a,
     .b-l, .b-p), avec son compteur ; le fond de la colonne est une voie à peine teintée ;
   · la fiche ressort sur la colonne : fond plus clair en sombre, blanc en clair, filet d'un pixel à la couleur du statut ;
   · la fiche dit son statut elle-même (pastille « En cours », « Confirmé », « En attente » : le mot ET la couleur).
   Les couleurs sont des jetons déjà vérifiés ; tests/v27-etape3.py recalcule les contrastes de l'en-tête dans les deux thèmes. */
.pc-col[data-etat="Confirmé"]{--pc-t:var(--amber-bg)}
.pc-col[data-etat="En cours"]{--pc-t:var(--glow)}
.pc-col[data-etat="En attente"]{--pc-t:var(--pink-bg)}
.pc-col[data-etat="Livré"]{--pc-t:var(--green-bg)}
.pc-col[data-etat="Perdu"]{--pc-t:var(--red-bg)}
/* La voie est plus FONCÉE que la page et que la fiche (sombre : le fond de la page ; clair : un gris plus marqué), à peine teintée du
   statut : la fiche se lit dessus. Même voie pour la Prospection et le Recrutement (une seule façon de poser une colonne). */
.pc-col:not(.pb-col--issue){background:color-mix(in srgb,var(--pc-c) 5%,var(--bg));border-color:var(--border2)}
body.light .pc-col:not(.pb-col--issue){background:color-mix(in srgb,var(--pc-c) 6%,var(--bg4))}
.pr-col:not(.pb-col--issue){background:var(--bg);border-color:var(--border2)}
body.light .pr-col:not(.pb-col--issue){background:var(--bg4)}
.pc-col:not(.pb-col--issue) .pc-col-tete{padding:6px 8px;margin:-2px -4px 0;border-radius:var(--rs);background:var(--pc-t)}
.pc-col:not(.pb-col--issue) .pc-col-t{color:var(--text)}
.pc-col:not(.pb-col--issue) .pc-cnt{background:color-mix(in srgb,var(--pc-c) 16%,var(--bg2));color:var(--text)}
body.light .pc-col:not(.pb-col--issue) .pc-cnt{background:color-mix(in srgb,var(--pc-c) 14%,var(--bg2))}
.pc-col .pb-card.pc-carte{background:var(--bg3);border-color:color-mix(in srgb,var(--pc-c) 30%,var(--border2))}
body.light .pc-col .pb-card.pc-carte{background:var(--bg2)}
.pc-col:not(.pb-col--issue) .pb-card.pc-carte:hover{border-color:var(--pc-c)}
.pc-statut{margin-bottom:var(--s2)}

/* Une pastille trop longue pour sa carte (« Apporteur professionnel (contrat de prestation) ») ne déborde plus : elle se coupe
   par une ellipse, et son texte entier est dans l'infobulle (§25 : ellipse + infobulle, jamais de texte coupé en deux lignes). */
.pr-carte :is(.pr-puce,.pr-puce-agent){max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* La zone « Clôturé » : une étiquette de groupe au-dessus des deux colonnes, un filet vertical d'un pixel avant elle. */
.pb-issues{display:flex;flex-direction:column;gap:var(--s2);min-width:0;margin-inline-start:var(--s2);padding-inline-start:var(--s4);border-inline-start:1px solid var(--border2)}
.pb-issues-t{display:inline-flex;align-items:center;gap:6px;margin:0;padding:2px;font:700 var(--fs-min) var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text2)}
.pb-issues-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1}
.pb-issues-cols > .pb-col{min-width:0}
/* Dans la grille du tableau, la zone occupe la place de deux colonnes (184 px chacune, plus l'écart et le filet). */
.pb-board.pb-fluide > .pb-issues{grid-column:span 2;min-width:calc(2 * 184px + 10px + var(--s2) + var(--s4));scroll-snap-align:start}
/* Téléphone et petite tablette : les colonnes s'empilent ; la zone garde son étiquette, et son filet passe au-dessus. */
@media (max-width:900px){
  .pb-board.pb-fluide > .pb-issues{grid-column:auto;min-width:0;margin-inline-start:0;padding-inline-start:0;border-inline-start:0;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border2)}
  .pb-issues-cols{grid-template-columns:minmax(0,1fr)}
}