/* ═══════════════════════════════════════════════════════════════════════════ print.css — Styles dédiés à l'impression des fiches ═══════════════════════════════════════════════════════════════════════════ Sections gérées : 1. Fiche vente → Bulletin de livraison (A4 portrait) 2. Fiche contact → Fiche d'identité 3. Recette → Fiche de fabrication Toutes les sections s'activent via la classe .printing sur le .modal-card ═══════════════════════════════════════════════════════════════════════════ */ @page { size: A4 portrait; margin: 10mm 25mm 15mm 25mm; } /* Reset radical html + body pour garantir que rien n'empêche @page d'être honoré : pas de largeur/hauteur fixe, pas d'overflow caché, pas de marge négative qui ferait fuiter le contenu hors de la zone @page. */ html, body { margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; background: #fff !important; } /* ── Masquer toute l'interface ───────────────────────────────────────────── */ body { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11pt; color: #000; line-height: 1.35; } /* Cache tous les enfants directs du qui ne contiennent pas la modale en mode printing. Les modales sont des enfants directs du body, donc :has() permet de ne garder visible que celle qui imprime. Cette approche (display:none) évite l'espace blanc réservé que laissait visibility:hidden (qui poussait la modale en page 2 avec une page 1 vide). GUARD : scope à body:not(.printing-app-mp) pour que le mode App MP print (qui n'utilise pas de modale) ne soit pas affecté par cette règle, sinon tout le tableau App MP serait masqué (cf. bug print 25 mai). */ body:not(.printing-app-mp) > *:not(:has(.modal-card.printing)) { display: none !important; } /* Reset du parent .modal : par défaut position:fixed; inset:0 couvre toute la page physique en print → empêche le navigateur d'appliquer @page { margin }. On le repasse en flow normal pour que les marges @page soient respectées. */ .modal:has(> .modal-card.printing) { position: static !important; display: block !important; background: transparent !important; padding: 0 !important; overflow: visible !important; inset: auto !important; } .modal-card.printing { position: static !important; background: #fff !important; box-shadow: none !important; border: 0 !important; max-width: 100% !important; width: 100% !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; } /* Masquer tous les éléments d'interaction */ .modal-card.printing .modal-actions, .modal-card.printing .modal-close-btn, .modal-card.printing #btn-print-sale, .modal-card.printing #btn-print-contact, .modal-card.printing #btn-save-sale, .modal-card.printing #btn-close-modal, .modal-card.printing #btn-duplicate-sale, .modal-card.printing #btn-delete-contact, .modal-card.printing #btn-save-contact-modal, .modal-card.printing #btn-close-contact, .modal-card.printing .sale-delete-btn, .modal-card.printing .linked-contact-actions, .modal-card.printing .search-block, .modal-card.printing .search-results, .modal-card.printing .create-block, .modal-card.printing .shipping-options, .modal-card.printing .sale-stock-hint, .modal-card.printing .sale-dlc-overrides, .modal-card.printing .toggle-btn, .modal-card.printing #btn-add-sale-row, .modal-card.printing .section-divider, .modal-card.printing [data-role="contact-statut"], .modal-card.printing [data-role="contact-map"] { display: none !important; } /* Récap envoi injecté en print-only (pochette glace, emballage) : aligné à droite, au-dessus de la ligne Poids total, pas en majuscules. */ .print-shipping-summary { margin: 4pt 0 0 0; padding: 0; font-size: 10pt; color: #333; text-align: right; display: block; } .print-shipping-summary > div { line-height: 1.4; } /* Bulletin de livraison : masquer entête modale + sections superflues (info reportée dans les blocs .print-only injectés par sales.js) */ #sale-modal .modal-card.printing .modal-header, #sale-modal .modal-card.printing #sale-client-section, #sale-modal .modal-card.printing .section:has(.sale-context), #sale-modal .modal-card.printing #sale-shipping-section .section-title { display: none !important; } /* ── Modal body & sections ───────────────────────────────────────────────── */ .modal-card.printing .modal-body { padding: 0; overflow: visible; max-height: none; } .modal-card.printing .modal-body--scroll { max-height: none !important; overflow: visible !important; overflow-y: visible !important; } .modal-card.printing .section { margin: 0 0 10pt 0; padding: 0; page-break-inside: avoid; break-inside: avoid; } .modal-card.printing .section-title { font-size: 10pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #000; border-bottom: 1px solid #999; padding: 0 0 2pt 0; margin: 0 0 5pt 0; background: transparent !important; } .modal-card.printing .section-title::before, .modal-card.printing .section-title[data-step]::before { content: none !important; } /* ── Swaps JS (selects/dates/checkboxes remplacés par spans) ───────────── */ .modal-card.printing .print-hidden { display: none !important; } .modal-card.printing .print-value { display: inline-block; font-size: 11pt; color: #000; min-height: 1em; } .modal-card.printing .print-check { display: inline-block; width: 12pt; height: 12pt; text-align: center; border: 1px solid #000; border-radius: 2pt; line-height: 11pt; margin-right: 4pt; font-weight: 700; } /* ── Champs de formulaire → texte ───────────────────────────────────────── */ .modal-card.printing .field-grid, .modal-card.printing .field-grid--2col, .modal-card.printing .field-grid--3col, .modal-card.printing .field-grid--4col { display: grid; grid-template-columns: repeat(auto-fit, minmax(140pt, 1fr)); gap: 4pt 12pt; } .modal-card.printing .field-grid label, .modal-card.printing .field { display: flex; flex-direction: column; gap: 1pt; margin: 0; } .modal-card.printing .label { font-size: 8pt; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #666; margin: 0 0 1pt 0; } /* Inputs/selects : aplatir et afficher leur valeur */ .modal-card.printing .input, .modal-card.printing input, .modal-card.printing select, .modal-card.printing textarea { border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; font-size: 11pt !important; font-family: inherit !important; color: #000 !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; appearance: none; -webkit-appearance: none; } /* Cacher la flèche des selects */ .modal-card.printing select { background-image: none !important; } /* Cacher l'icône calendrier WebKit des inputs date */ .modal-card.printing input[type="date"]::-webkit-calendar-picker-indicator, .modal-card.printing input[type="date"]::-webkit-inner-spin-button, .modal-card.printing input[type="date"]::-webkit-clear-button { display: none !important; -webkit-appearance: none; } /* Cacher le placeholder format des inputs date vides */ .modal-card.printing input[type="date"]:not([value])::-webkit-datetime-edit, .modal-card.printing input[type="date"][value=""]::-webkit-datetime-edit { color: transparent; } /* Textarea multi-ligne (remarques) */ .modal-card.printing textarea { white-space: pre-wrap; resize: none !important; min-height: auto; } /* ── Contact lié (adresse destinataire) ──────────────────────────────────── */ .modal-card.printing .linked-contact-bar { display: flex !important; flex-direction: column; background: #f4f1ea; border: 1px solid #999; border-radius: 3pt; padding: 8pt 10pt; margin: 0 0 10pt 0; page-break-inside: avoid; } .modal-card.printing .linked-contact-info { gap: 2pt; } .modal-card.printing .linked-contact-line1 { font-size: 12pt; gap: 8pt; } .modal-card.printing .linked-contact-line1 strong { font-size: 13pt; font-weight: 700; } .modal-card.printing .linked-contact-line2 { font-size: 10pt; color: #333; } .modal-card.printing .linked-sep { color: #aaa; } /* ── Tableau articles (ÉTAPE 3) ──────────────────────────────────────────── */ .modal-card.printing .sale-table { display: table; width: 100%; border-collapse: collapse; margin: 0 0 10pt 0; font-size: 10pt; } .modal-card.printing .sale-table .row { display: table-row; } .modal-card.printing .sale-table .row > div { display: table-cell; padding: 4pt 6pt; border-bottom: 1px solid #ccc; vertical-align: middle; text-align: left; } .modal-card.printing .sale-table .row.head > div { font-weight: 700; font-size: 9pt; text-transform: uppercase; letter-spacing: 0.04em; color: #000; border-bottom: 1.5px solid #000; background: transparent !important; padding-bottom: 3pt; } /* Ligne produits : alignements numériques à droite */ .modal-card.printing .sale-table .row > div:nth-child(1) { width: 6%; text-align: center; color: #666; font-size: 9pt; } .modal-card.printing .sale-table .row > div:nth-child(5) { width: 7%; text-align: right; } /* Qté */ .modal-card.printing .sale-table .row > div:nth-child(7) { width: 9%; text-align: right; } /* Rabais */ .modal-card.printing .sale-table .row > div:nth-child(8) { width: 14%; text-align: right; font-weight: 600; } /* Total ligne */ .modal-card.printing .sale-table .row > div:last-child { display: none; } /* Action (poubelle) */ /* Respect du flag [hidden] (sinon écrasé par display:table-cell) — masque la colonne Poids quand aucune ligne n'est en mode vente au poids. */ .modal-card.printing .sale-table .row > div[hidden] { display: none !important; } /* Masque la colonne Variante (3e col) quand aucune ligne n'a de valeur. La classe est ajoutée par preparePrintSnapshots() après évaluation des spans. */ .modal-card.printing .sale-table.print-hide-variant .row > div:nth-child(3) { display: none !important; } /* ── Shipping detail (poids) ─────────────────────────────────────────────── */ .modal-card.printing .shipping-detail { font-size: 10pt; color: #333; text-align: right; margin: 4pt 0 0 0; padding: 3pt 0; border-top: 1px dashed #ccc; } /* ── Bloc totaux ─────────────────────────────────────────────────────────── */ .modal-card.printing .sale-totals-block { margin-top: 8pt; padding-top: 6pt; border-top: 1px solid #000; display: flex; flex-direction: column; gap: 2pt; max-width: 360pt; margin-left: auto; } .modal-card.printing .sale-total-row { display: flex; justify-content: space-between; gap: 40pt; font-size: 10pt; color: #333; } .modal-card.printing .sale-total-row--final { border-top: 1px solid #000; padding-top: 4pt; margin-top: 2pt; font-size: 12pt; font-weight: 700; color: #000; } /* ── Remarques ───────────────────────────────────────────────────────────── */ .modal-card.printing .remarques-section textarea, .modal-card.printing textarea[data-role="sale-remarques"] { border: 1px solid #ccc !important; padding: 4pt 6pt !important; border-radius: 2pt; min-height: 40pt; width: 100%; font-size: 10pt; } /* ── Nettoyage : éléments à cacher aussi ─────────────────────────────────── */ .modal-card.printing .badge, .modal-card.printing .hint, .modal-card.printing .eyebrow-hint, .modal-card.printing .filter-hint, .modal-card.printing [data-role="shipping-cost"]:empty, .modal-card.printing input[readonly][data-role="line-total"] { /* garder visible mais épuré */ } /* Inputs qty, total, rabais sont des → afficher leur valeur via CSS */ /* Note : CSS ne peut pas afficher la valeur d'un