), largeurs px fixes
(572px+ → débordait). Même principe data-label : chaque ligne .rsp-cardify-grid → carte, cellules empilées
« LABEL : valeur ». Le montant garde sa couleur crédit/débit (inline). ZÉRO défilement horizontal en 375px. */
.bq-tx-header { display: none !important; }
.rsp-cardify-grid { display: block !important; grid-template-columns: none !important; border: 1px solid #E2E8F0 !important; border-radius: 12px; margin: 0 12px 10px !important; padding: 8px 12px !important; }
.rsp-cardify-grid > div { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0 !important; text-align: left !important; min-width: 0 !important; white-space: normal !important; }
.rsp-cardify-grid > div::before { content: attr(data-label); font-weight: 600; color: #64748B; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; flex-shrink: 0; }
.rsp-cardify-grid > div[data-label=""]::before { content: none; }
.rsp-cardify-grid > div.rsp-grid-actions { justify-content: flex-end; }
/* ch.264 FIX 2 — libellé bancaire tronqué à 2 LIGNES (intégral dans le modal de détail) : à lui seul ~4 lignes
gagnées par carte (le brut « VIR INST RE … DE: … DATE: … REF: … » s'étalait sur 6 lignes). */
.rsp-cardify-grid > div[data-label="Libellé"] > div { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; }
/* ch.263 FIX 2 — tuiles KPI Banque en 1 colonne ≤767px (2 colonnes 768–1024 dans le bloc ≤1024). */
#bq-kpis { grid-template-columns: 1fr !important; }
/* ch.264 FIX 2 — DENSIFICATION des cartes (patron partagé rsp-cardify + rsp-cardify-grid) : padding/police
réduits + labels REDONDANTS masqués (Date, Montant/Total TTC = valeur auto-explicite). ⛔ aucune DONNÉE
retirée (seuls des labels). Objectif : ≥2 documents visibles en 375px. Bordure gauche par statut (ch.261)
pourra s'ajouter sans refonte (padding/marge laissés compatibles). */
.rsp-cardify tr, .rsp-cardify-grid { padding: 6px 10px !important; margin-bottom: 8px !important; }
.rsp-cardify td, .rsp-cardify-grid > div { padding: 3px 0 !important; font-size: 12px !important; }
.rsp-cardify td::before, .rsp-cardify-grid > div::before { font-size: 10px !important; }
.rsp-cardify td[data-label="Date"]::before, .rsp-cardify td[data-label="Total TTC"]::before,
.rsp-cardify-grid > div[data-label="Date"]::before, .rsp-cardify-grid > div[data-label="Montant"]::before { content: none !important; }
/* montant proéminent (garde sa couleur crédit/débit ou statut, source inline existante) */
.rsp-cardify td[data-label="Total TTC"], .rsp-cardify-grid > div[data-label="Montant"] { font-weight: 700; font-size: 14px !important; }
/* ═══ ch.261 — BORDURE GAUCHE colorée par STATUT. La couleur vient de la SOURCE UNIQUE (STATUS_MAP devis/factures,
STATUS_COLORS dépenses, crédit/débit banque) via la variable inline `--rsp-sc` posée par le renderer.
⛔ responsive.css ne redéclare AUCUNE couleur de statut en dur (grep --rsp-sc / #hex à l'appui). Repli NEUTRE
#E2E8F0 si `--rsp-sc` absente → un statut inconnu n'emprunte jamais une couleur trompeuse. Deux statuts
différents = deux bordures distinctes, reconnaissables sans lire le badge. Densité ch.264 intacte. ═══ */
.rsp-cardify tr, .rsp-cardify-grid { border-left: 4px solid var(--rsp-sc, #E2E8F0) !important; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
/* ═══ ch.257 LOT 3 — Barres de filtres / boutons : wrap propre (fin des pastilles empilées en colonne +
bouton « ＋ Facture d'acompte » qui recouvre « Payées part. »). Le wrap est sûr (n'empêche jamais l'affichage). ═══ */
#pageContent [style*="display:flex"][style*="gap"] { flex-wrap: wrap; }
/* ═══ ch.257 LOT 4 — Modals de détail (body-mount) : grilles internes en 1 colonne, jamais de scroll H.
Scopé aux modals ouverts (position:fixed au niveau body) → n'affecte aucune grille de page. ═══ */
body > div[style*="position:fixed"] [style*="display:grid"] { grid-template-columns: 1fr !important; }
body > div[style*="position:fixed"] { overflow-x: hidden; }
/* ch.254 PWA/LOT 4 — en standalone il n'y a plus de « retour » navigateur : la croix ✕ de la visionneuse
PDF interne doit être une cible tactile ≥44px (le bouton existe déjà, header top-right). */
#crm-file-viewer-modal button { min-width: 44px !important; min-height: 44px !important; }
}
/* ── ch.416 B.4 — MARCHÉ & TARIFS : 11 → 14 pastilles de filtre ──────────────────────────
⚠️ MESURÉ : le conteneur porte DÉJÀ `flex-wrap: wrap` (tarifs.js:243) ⇒ ⛔ aucun
débordement horizontal n'est possible, même à 14 pastilles. Ce bloc ne corrige donc pas
un défaut : il COMPACTE, pour que 14 pastilles n'occupent pas la moitié de l'écran sur
un téléphone. ⛔ Pas de variable CSS (règle du projet), @media uniquement. */
@media (max-width: 480px) {
.tar-filtre-btn { padding: 4px 9px; font-size: 10px; }
}
@media (max-width: 375px) {
.tar-filtre-btn { padding: 3px 8px; font-size: 9.5px; letter-spacing: -0.1px; }
}
/* ── ch.429 — MODAL « ✨ Améliorations proposées » (Alex Réviseur) ────────────────────────
⛔ LA CAUSE DU DÉFAUT N'EST PAS ICI : elle était `min-height:auto` sur la colonne de droite
(un item de grille ne peut pas rétrécir sous son contenu), corrigée EN LIGNE dans
`devis.js` — MESURÉ AVANT : colonne 1227 px dans un panneau de 810 px, corps qui ne
scrollait jamais, pied 349 px SOUS le panneau, bouton « Appliquer » HORS ÉCRAN.
Ce bloc ne fait que COMPACTER sur petit écran, pour qu'une SEULE proposition ⛔ ne
déclenche PAS de barre de scroll inutile (mesuré à 375 px : 11 px de débordement dus au
`min-height:200px` du corps et au pied de 172 px une fois les boutons empilés).
⚠️ `responsive.css` est une feuille STATIQUE chargée par `index.html:76` : ⛔ aucun risque
du motif ch.384 (classe injectée au runtime qui ne style rien). @media UNIQUEMENT ⇒ le
rendu desktop des autres écrans ⛔ ne bouge pas. ⛔ Aucune variable CSS. */
@media (max-width: 480px) {
#dv-review-modal #dv-rev-body { min-height: 120px !important; padding: 14px 16px !important; }
#dv-review-modal #dv-rev-foot { padding: 10px 16px !important; gap: 8px !important; }
#dv-review-modal .dv-rev-grid > div:first-child { padding: 10px 16px !important; gap: 10px !important; }
#dv-review-modal #dv-rev-photo { width: 44px !important; height: 44px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════════════════
ch.455 C — CARNET D'ADRESSES PARTAGÉ (#crmContactPickerOverlay)
⛔ MEDIA QUERIES UNIQUEMENT : le rendu DESKTOP est défini EN LIGNE dans ContactPicker.js
et ⛔ n'est PAS touché ici — commenter ce bloc rend le desktop strictement identique.
⛔ Les zones tactiles sont déjà ≥44px en ligne (cases, boutons, croix) ⇒ ⛔ rien à corriger
ici pour le tactile : on ne fait que la MISE EN PAGE.
═══════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Plein écran utile : une boîte centrée de 900px n'a aucun sens sous 768px. */
#crmContactPickerOverlay { padding: 8px !important; align-items: stretch !important; }
#crmContactPickerOverlay #cpkBoite {
width: 100% !important;
max-height: 100% !important;
border-radius: 12px !important;
}
/* ⛔ AUCUN débordement horizontal : l'adresse passe SOUS son libellé au lieu de pousser. */
#crmContactPickerOverlay #cpkListe label > span { display: block; }
#crmContactPickerOverlay #cpkListe label > span > span { display: block; word-break: break-all; }
/* Les deux boutons du pied occupent la largeur, côte à côte, sans jamais déborder. */
#crmContactPickerOverlay #cpkAnnuler,
#crmContactPickerOverlay #cpkAjouter { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 420px) {
/* Retrait de la ligne d'adresse réduit : sur 375px, 22px de marge coûtent trop cher. */
#crmContactPickerOverlay #cpkListe label { padding-left: 12px !important; }
#crmContactPickerOverlay #cpkBoite > div:first-child { padding: 12px 12px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════════════════
ch.456 — MailEditor : lignes CC / Cci (sélecteur d'ajout + bouton carnet)
⛔ MEDIA QUERIES UNIQUEMENT — le desktop est défini EN LIGNE dans MailEditor.js et ⛔ n'est
PAS touché ici. Commenter ce bloc rend le rendu desktop strictement identique.
⚠️ Sous 768px, un