/* 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(--s4)}
.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:11px}
.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:11.5px;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 11px 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 11px/18px var(--mono);text-align:center}
.pl-pop-note{font-size:11.5px;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 11.5px 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))}