/* =========================================================================== ÉCRAN — PROSPECTS & PIPELINE (.psp-*) CLI-04 FEUILLE D'ÉCRAN : le kanban à six colonnes ne sert qu'ici. Il partage sa forme générale avec l'agenda de CLI-05 (ecran-actions-commerciales.css) — une bande de colonnes égales, un en-tête par colonne, des cartes dedans — mais pas ses mesures ni son contenu, et surtout pas sa RÈGLE : l'agenda a sept jours fixes, le kanban a six étapes qui sont un référentiel. Les fondre dans une famille commune ferait dépendre chacun des besoins de l'autre ; on les fondra le jour où un troisième écran en demandera une, ce qui est précisément ce que la règle du dépôt prévoit. CE QU'ELLE REMPLACE Six `md-card` en flex, chacune portant `style="min-width:16rem;max-width: 16rem"` dans le balisage, un compteur en `badge bg-secondary`, et des cartes d'opportunité en `border rounded bg-white` — un rayon que la charte a retiré le 2026-09-02, et un blanc littéral. Le sélecteur « Déplacer… » portait `style="font-size:.7rem"`, soit 11,2 px : sous le plancher de 12 px de l'échelle typographique révisée. AUCUNE COULEUR LITTÉRALE : jetons --et-* uniquement. =========================================================================== */ /* --------------------------------------------------------------------------- 1. LE TABLEAU DES ÉTAPES Colonnes de largeur ÉGALE, avec un minimum : une étape n'est pas plus large qu'une autre parce qu'elle est pleine. Les filets viennent de la gouttière sur fond de filet — même mécanique que la bande de faits saillants du gabarit, et pour la même raison : pas de filet double entre deux voisines. --------------------------------------------------------------------------- */ .psp-tableau { display: grid; grid-template-columns: repeat(6, minmax(16rem, 1fr)); gap: 1px; background: var(--et-hairline); border: 1px solid var(--et-hairline); overflow-x: auto; } .psp-colonne { display: flex; flex-direction: column; min-width: 0; background: var(--et-surface); } .psp-colonne-tete { padding: 8px 10px; background: var(--et-surface-2); border-bottom: 1px solid var(--et-hairline); } .psp-colonne-rang { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .psp-colonne-titre { font-size: 13px; font-weight: 600; color: var(--et-ink); } /* Le compteur d'une colonne est un FAIT, pas un état : il prend le gris neutre du gabarit et jamais une teinte d'état — sinon « 0 » en gris et « 7 » en vert raconteraient une santé que le nombre ne dit pas. */ .psp-colonne-n { min-width: 20px; padding: 0 6px; border-radius: var(--et-r-pill); background: var(--et-neutre-bg); color: var(--et-neutre); font-family: var(--et-font-mono); font-size: 12px; font-weight: 500; text-align: center; line-height: 18px; } .psp-colonne-total { margin-top: 2px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); } .psp-colonne-corps { padding: 8px; max-height: 60vh; overflow-y: auto; } .psp-colonne-vide { padding: 14px 0; text-align: center; color: var(--et-inerte); font-size: 13px; } /* --------------------------------------------------------------------------- 2. LA CARTE D'UNE OPPORTUNITÉ Surface plate à filet, sans rayon ni ombre : « la structure tient par les filets ». --------------------------------------------------------------------------- */ .psp-carte { padding: 8px 9px; background: var(--et-surface); border: 1px solid var(--et-hairline); } .psp-carte + .psp-carte { margin-top: 6px; } .psp-carte-titre { font-size: 13px; font-weight: 600; color: var(--et-ink); } .psp-carte-sous { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--et-muted); } .psp-carte-sous .bi { margin-right: 4px; } /* Montant et probabilité : les deux chiffres de la carte, posés aux deux bouts d'une même ligne. En mono, parce qu'on les compare d'une carte à l'autre en descendant la colonne — c'est tout l'intérêt d'un kanban. */ .psp-carte-chiffres { margin-top: 5px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--et-font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--et-ink); } .psp-carte-actions { margin-top: 7px; display: flex; align-items: center; gap: 4px; } .psp-carte-actions + .psp-carte-actions { margin-top: 4px; } /* Le sélecteur « Déplacer… » tient dans la carte : il prend la place restante, et sa hauteur descend à 28 px — un contrôle de carte, pas de formulaire. Sa TAILLE DE TEXTE RESTE À 12 px, plancher de l'échelle typographique : il portait .7rem, soit 11,2 px, ce qui était sous le plancher. */ .psp-deplacer { flex: 1 1 auto; min-width: 0; height: 28px; font-size: 12px; padding: 0 24px 0 8px; } /* --------------------------------------------------------------------------- 3. BARRE DE FILTRES DE LA VUE LISTE --------------------------------------------------------------------------- */ .psp-filtres { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .psp-filtre-select { width: auto; min-width: 12rem; } /* --------------------------------------------------------------------------- 4. PALIERS — geometry only (docs/conventions-responsive.md) Règle tactile (docs/cibles-tactiles.md) : sous 1024 px, aucune cible sous 44 px, et une cible ne rétrécit jamais — y compris le sélecteur « Déplacer… », qui repasse donc au-dessus de sa hauteur de carte. --------------------------------------------------------------------------- */ @media (max-width: 1024px) { .psp-filtre-select { min-height: 44px; } .psp-deplacer { min-height: 44px; } .psp-carte-actions .mx-btn { min-width: 44px; min-height: 44px; } } /* Sous 720 px, six colonnes ne tiennent plus même en défilant. Le kanban s'empile, une étape par rangée : il perd sa lecture transversale, mais une colonne de 60 px n'en avait aucune. */ @media (max-width: 720px) { .psp-tableau { grid-template-columns: minmax(0, 1fr); overflow-x: visible; } .psp-colonne-corps { max-height: none; } .psp-filtre-select { min-width: 0; width: 100%; } }