/* Elevora CRM — css/periodes-pipeline.css
   Trois retours de Célian du 25/09/2026 au soir, qui touchent les mêmes pages :

   1. La période quitte la barre du haut. « Quand on va dans l'onglet Pipeline Prospection, il
      disparaît, ce qui est très bien, parce qu'on peut influer directement uniquement sur ça. »
      Chaque page qui dépendait du filtre Tout / Semaine / Mois… porte maintenant le sien, dans la
      page, au-dessus de ce qu'il règle : Vue d'ensemble (catégorie Activité), Clients, Pipeline
      client. Un seul composant (.per-seg, rendu par periodeFiltreHtml en js/03), dessiné comme la
      période de la Prospection, que Célian aime : un contrôle segmenté sur fond --bg3.
   2. « La Pipeline Prospection est vachement mieux que la Pipeline Clients. » Le Pipeline client
      reprend son langage (.pc-*, renderPipeline en js/09) : barre, bandeau de chiffres, colonnes
      en voies teintées, cartes aérées qui disent la suite. Classes à part plutôt que celles de la
      Prospection (.pr-*) : elles évoluent de leur côté, et le Pipeline client ne doit pas changer
      d'aspect sans qu'on l'ait décidé. Les valeurs sont les mêmes au pixel près.
   3. « Sur mon écran ultra-large, la moitié de l'écran est vide. » Les pages bornées à 1 100 ou
      1 400 px de large prennent toute la place (dernière section).

   Chargée après css/tableaux-de-bord.css. Aucune couleur en dur : chaque paire texte / fond
   reprend une paire déjà vérifiée à 4,5:1 dans les deux thèmes (textes sur --bg2, --bg3, --bg4). */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   1. LA PÉRIODE D'UNE PAGE
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* La barre d'une page : la période à gauche, les actions à droite (comme .pr-barre). */
.pg-barre{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.pg-actions{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
/* L'emplacement du filtre et ses dates exactes, sur une ligne ; les dates passent dessous quand la
   place manque, jamais le contrôle lui-même. */
.per-filtre{display:flex;align-items:center;gap:6px var(--s3);flex-wrap:wrap;min-width:0}
.per-filtre:empty{display:none}
/* Le contrôle segmenté : le fond --bg3 et son filet, 3 px d'air, le bouton pressé en --bg2 —
   exactement .pr-periodes. L'état pressé est dit trois fois : fond, graisse, aria-pressed. */
/* 02/10/2026 (point 14) : les boutons de période, la bascule Liste/Tableau et la recherche de la même
   barre font tous --cmd-h (40, 38 et 36 px avant). */
.per-seg .pf-btn,.pr-periodes .pf-btn{height:calc(var(--cmd-h,36px) - 8px)}
.pr-periodes{min-height:var(--cmd-h,36px);box-sizing:border-box}
.per-seg{display:flex;gap:2px;max-width:100%;padding:3px;min-height:var(--cmd-h,36px);box-sizing:border-box;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r)}
.per-seg .pf-btn{flex:0 0 auto}
.per-seg .pf-btn.active{background:var(--bg2);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.per-seg .pf-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
body.light .per-seg{background:var(--bg4)}
body.light .per-seg .pf-btn{color:var(--text2)}
/* Les dates de la période, en lecture seule. */
.per-bornes{font-size:12.5px;color:var(--text3);white-space:nowrap;font-variant-numeric:tabular-nums}
.per-bornes[hidden]{display:none}
/* Vue d'ensemble : le filtre est dans la tête de la catégorie Activité, entre son titre et ses liens.
   Il se range à droite, les dates avant lui ; sur deux lignes, il repasse à gauche sous le titre. */
.vd-sec-tete .per-filtre{margin-left:auto;flex-direction:row-reverse}
.vd-sec-tete .per-filtre + .vd-sec-liens{flex-basis:auto}
/* Tablette et téléphone : le filtre prend sa ligne, les dates passent dessous. Sous 560 px, les six
   périodes vont par trois sur deux rangs, à parts égales : mobile.css fait défiler tout groupe de
   .pf-btn dans sa ligne, et « Tout », la période par défaut, tombait hors de l'écran à 390 px — le
   bouton pressé n'était pas visible. (.per-filtre .per-seg l'emporte sur div:has(> .pf-btn).) */
@media (max-width: 900px){
  .per-filtre{width:100%}
  .vd-sec-tete .per-filtre{margin-left:0;flex-direction:row}
}
@media (max-width: 560px){
  .per-filtre .per-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;overflow:visible}
  .per-filtre .per-seg .pf-btn{justify-content:center;padding-left:4px;padding-right:4px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   2. LE PIPELINE CLIENT (js/09, renderPipeline)
   Rythme de la Prospection : serré dans une carte (4 à 8 px), aéré entre la barre, le bandeau
   et le tableau (16 à 24 px). Aucune ombre, aucun dégradé.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.pc-page{display:flex;flex-direction:column;gap:var(--s4)}
.pc-page > .pg-barre{margin-bottom:0}
.pc-page > .pb-board{margin-top:var(--s2)}

/* Le bandeau : le style partagé des chiffres, des cases espacées dans un ensemble (.chiffres dans
   css/elevora.css, [P1] 02/10/2026 point 3). */
.pc-bd:empty{display:none}
/* Un retard de livraison : le chiffre passe en --red (5,6:1 au moins sur --bg et --bg2, deux
   thèmes) ; le libellé dit déjà ce qu'il compte. */
.pc-bd-retard .pc-bd-v{color:var(--red)}

/* Le tableau : les colonnes fluides du Pipeline (.pb-board.pb-fluide, css/elevora.css), cinq
   colonnes qui se partagent toute la largeur. */
.pb-board.pb-fluide.pc-board{grid-auto-columns:minmax(184px,1fr)}
@media (max-width: 900px){ .pb-board.pb-fluide > .pc-col{min-height:0} }

/* Chaque colonne a la couleur de son état (celle de sa pastille partout ailleurs, .b-c … .b-p) ;
   elle ne marque qu'un point devant le titre, qui dit l'état en toutes lettres. */
.pc-col[data-etat="Confirmé"]{--pc-c:var(--amber)}
.pc-col[data-etat="En cours"]{--pc-c:var(--accent)}
.pc-col[data-etat="En attente"]{--pc-c:var(--pink)}
.pc-col[data-etat="Livré"]{--pc-c:var(--green)}
.pc-col[data-etat="Perdu"]{--pc-c:var(--red)}

/* Les colonnes : une voie teintée, des cartes claires. En sombre, la voie reste au fond des
   cartes et les cartes s'éclaircissent. */
.pc-col{display:flex;flex-direction:column;padding:var(--s3);min-height:320px}
body.light .pc-col{background:var(--bg3)}
.pc-col-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.pc-col-t{display:flex;align-items:center;gap:7px;min-width:0;margin:0;font:600 13px/1.3 var(--font);color:var(--text)}
.pc-point{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--pc-c,var(--text3))}
.pc-cnt{flex-shrink:0;padding:1px 8px;border-radius:20px;background:var(--bg4);color:var(--text2);font:600 11.5px var(--mono)}
.pc-col-resume{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:6px 0 0}
.pc-col-total{font-size:12px;color:var(--text3)}
.pc-col-total b{font:600 12.5px var(--mono);color:var(--text)}
.pc-col-retard{padding:1px 8px;border-radius:var(--rs);font-size:11.5px;font-weight:600;line-height:1.5;background:var(--red-bg);color:var(--red)}
.pc-col-corps{display:flex;flex-direction:column;flex:1;margin-top:var(--s3)}

/* Une colonne vide explique ce qui l'amène. */
.pc-vide{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;margin:0;padding:var(--s3);border:1px dashed var(--border2);border-radius:var(--r);text-align:center}
.pc-vide-t{margin:0;font-size:12px;line-height:1.45;color:var(--text2)}
.pc-vide-s{margin:0;font-size:11.5px;line-height:1.45;color:var(--text3)}
.pc-col-ajout{min-height:32px;padding:0 10px;border:1px dashed var(--border2);border-radius:var(--r);background:transparent;color:var(--text2);font:500 12.5px var(--font);text-align:left;cursor:pointer}
.pc-col-ajout:hover{background:var(--bg3);color:var(--text)}
body.light .pc-col-ajout:hover{background:var(--bg2)}
.pc-col-ajout:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pc-vide + .pc-col-ajout,.pc-carte + .pb-move + .pc-col-ajout{margin-top:var(--s2)}

/* Les cartes : aérées, sans ombre ; le survol ne fait que préciser le bord. */
.pc-col .pb-card.pc-carte{padding:var(--s3);margin-bottom:var(--s2);border-radius:var(--r);background:var(--bg3)}
body.light .pc-col .pb-card.pc-carte{background:var(--bg2)}
.pc-col .pb-card.pc-carte:hover{transform:none;box-shadow:none;border-color:var(--border2)}
.pc-carte:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Le nom garde sa place : l'ancienneté passe à la ligne plutôt que de couper le nom. */
.pc-carte-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px var(--s2)}
.pc-carte-nom{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--text);overflow-wrap:break-word}
.pc-col .pc-age{margin:0 0 0 auto;font-size:11px;color:var(--text3);white-space:nowrap}
.pc-col .pc-age:empty{display:none}
.pc-col .pc-age.old{color:var(--amber);font-weight:600}
.pc-carte-contact{margin-top:2px;font-size:12.5px;color:var(--text2);overflow-wrap:break-word}
.pc-carte-montant{margin-top:4px;font:600 12.5px var(--mono);color:var(--text)}
.pc-puces{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:var(--s2)}
.pc-puce{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:var(--rs);background:var(--bg4);color:var(--text2);font-size:11px;line-height:1.5;overflow-wrap:break-word}
body.light .pc-puce{background:var(--bg3)}
.pc-puce svg{flex-shrink:0}
.pc-puces .tag{margin:0}
/* L'avancement : la barre, et son pourcentage écrit (il ne l'était nulle part sur la carte). */
.pc-avance{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.pc-avance .pb{flex:1;margin:0}
.pc-avance .pf{background:var(--pc-c,var(--accent))}
.pc-avance-v{flex-shrink:0;font:600 11px var(--mono);color:var(--text2)}
/* La suite : ce qui fait avancer la carte, comme sur une carte de la Prospection. */
.pc-carte-pied{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--border)}
.pc-suite{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.4;color:var(--text2)}
.pc-suite svg{flex-shrink:0;color:var(--text3)}
.pc-suite-retard{color:var(--red);font-weight:600}
.pc-suite-retard svg{color:var(--red)}
.pc-suite-fait svg{color:var(--green)}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   3. PLEINE LARGEUR — écran ultra-large (capture 55 du 25/09/2026, 2 560 px)
   Mesuré dans le harnais à 2 560 px : Tâches s'arrêtait à 1 400 px (892 px vides à droite) ;
   Catalogue de modules, Agents commerciaux, Constitution et Réglages IA à 1 100 px (1 192 px
   vides). Toutes les autres pages prenaient déjà la largeur. La page Tâches se règle dans
   css/taches.css ; les pages d'administration ici, sans toucher à la règle d'origine
   (.adm-zone, css/elevora.css) que d'autres chantiers partagent.
   Constitution et Réglages IA gardent une largeur de lecture pour leurs paragraphes : c'est le
   texte qui est borné, plus la page.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
#modules-zone.adm-zone,#agents-zone.adm-zone,#releves-zone.adm-zone,
#constitution-zone.adm-zone,#reglages-ia-zone.adm-zone{max-width:none}
#constitution-zone p,#constitution-zone li,#reglages-ia-zone p{max-width:120ch}