/* STG Brochure PDF — Print-friendly A4 layout */ @page { size: A4; margin: 20mm 14mm 20mm 14mm; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; color: #403935; /* Raleway via Google Fonts (chargé dans le par class-renderer.php) */ font-family: "Raleway", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; background: #d9d4d2; } /* À l'écran : preview style "feuille" centrée avec ombre */ .stg-bpdf-page { max-width: 210mm; margin: 0 auto; padding: 18mm 14mm; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.08); } /* === Header === */ .stg-bpdf-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--primary, #2271b1); padding-bottom: 10mm; margin-bottom: 8mm; } .stg-bpdf-logo-fallback { font-size: 18pt; font-weight: 700; color: var(--accent, #403935); } .stg-bpdf-head-meta { text-align: right; font-size: 10pt; color: #5D514B; } .stg-bpdf-status { display: inline-block; margin-top: 4px; background: var(--primary, #2271b1); color: #fff; padding: 3px 10px; border-radius: 3px; font-weight: 600; font-size: 9pt; text-transform: uppercase; letter-spacing: .5px; } /* === Hero (titre + adresse + prix) === */ .stg-bpdf-hero { margin-bottom: 6mm; } .stg-bpdf-title { margin: 0 0 4mm; font-size: 22pt; line-height: 1.2; color: var(--accent, #403935); font-weight: 700; } .stg-bpdf-address { margin: 0 0 4mm; font-size: 11pt; color: #5D514B; } .stg-bpdf-icon { margin-right: 4px; } .stg-bpdf-price { margin: 0 0 4mm; font-size: 24pt; font-weight: 700; color: var(--primary, #2271b1); } .stg-bpdf-tags { display: flex; gap: 6px; flex-wrap: wrap; } .stg-bpdf-tag { display: inline-block; padding: 4px 10px; background: #d9d4d2; color: #5D514B; border-radius: 3px; font-size: 9pt; font-weight: 600; } .stg-bpdf-tag-type { background: var(--accent, #403935); color: #fff; } /* === Photos === */ /* Pas de `page-break-inside: avoid` ici : le bloc photos (photo principale + * 6 vignettes) ≈ 180mm ne tient PAS en page 1 avec le header + hero * (~100mm). Forcer le no-break le pousse en entier sur la page 2, laissant * la page 1 vide. Sans la contrainte, la page 1 se remplit avec ce qui * tient et la grille des vignettes peut spiller naturellement. */ .stg-bpdf-photos { margin-bottom: 6mm; } .stg-bpdf-photo-main { margin-bottom: 3mm; } .stg-bpdf-photo-main img { width: 100%; height: auto; max-height: 95mm; object-fit: cover; border-radius: 4px; } .stg-bpdf-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; } .stg-bpdf-photo-thumb img { width: 100%; height: 35mm; object-fit: cover; border-radius: 3px; display: block; } /* === Sections === */ .stg-bpdf-h2 { font-size: 14pt; color: var(--accent, #403935); margin: 6mm 0 3mm; padding-bottom: 2mm; border-bottom: 1px solid #d9d4d2; } /* === Informations Clés (2 sous-tables côte à côte, style Houzez) === */ .stg-bpdf-info-cles { background: #fff; border: 1px solid #d9d4d2; border-radius: 6px; padding: 6mm 7mm; margin-bottom: 5mm; } .stg-bpdf-info-cles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12mm; } .stg-bpdf-info-cles-table { width: 100%; border-collapse: collapse; } .stg-bpdf-info-cles-table tr { border-bottom: 1px solid #d9d4d2; } .stg-bpdf-info-cles-table tr:last-child { border-bottom: none; } .stg-bpdf-info-cles-table th, .stg-bpdf-info-cles-table td { padding: 7px 0; font-size: 10.5pt; line-height: 1.3; } .stg-bpdf-info-cles-table th { font-weight: 700; color: #403935; text-align: left; } .stg-bpdf-info-cles-table td { text-align: right; color: #5D514B; font-weight: 500; } .stg-bpdf-info-cles-h3 { margin: 5mm 0 2mm; font-size: 11pt; color: #403935; font-weight: 700; } /* Caractéristiques additionnelles (table simple sous Informations Clés) */ .stg-bpdf-extra { width: 100%; border-collapse: collapse; } .stg-bpdf-extra th, .stg-bpdf-extra td { padding: 5px 10px; text-align: left; font-size: 10pt; border-bottom: 1px solid #d9d4d2; } .stg-bpdf-extra th { color: #403935; font-weight: 600; width: 50%; } .stg-bpdf-extra td { color: #5D514B; text-align: right; } /* Description */ .stg-bpdf-description-body { font-size: 11pt; line-height: 1.6; color: #5D514B; text-align: justify; } .stg-bpdf-description-body p { margin: 0 0 3mm; } /* DPE / GES */ .stg-bpdf-energy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm; } .stg-bpdf-energy-card { background: #d9d4d2; padding: 4mm; border-radius: 4px; border: 1px solid #d9d4d2; text-align: center; } .stg-bpdf-energy-label { display: block; font-size: 9pt; color: #5D514B; text-transform: uppercase; margin-bottom: 4px; } .stg-bpdf-energy-class { display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 4px; color: #fff; font-size: 18pt; font-weight: 800; margin: 4px 0; } .stg-bpdf-energy-a { background: #00a651; } .stg-bpdf-energy-b { background: #50b748; } .stg-bpdf-energy-c { background: #aed136; } .stg-bpdf-energy-d { background: #fff200; color: #333; } .stg-bpdf-energy-e { background: #fdb913; } .stg-bpdf-energy-f { background: #f37021; } .stg-bpdf-energy-g { background: #ed1c24; } .stg-bpdf-energy-value { display: block; font-size: 9pt; color: #5D514B; } /* === Page de garde === */ .stg-bpdf-cover { page-break-after: always; break-after: page; /* Pas de min-height : la zone imprimable A4 (≈ 269mm) ne pourrait pas * accueillir 270mm + padding et la cover déborderait sur 2 pages. La * page-break-after suffit à pousser le contenu suivant à la page 2. */ } /* === Diagnostics : table récapitulative avant les bar charts === */ .stg-bpdf-energy-summary { width: 100%; border-collapse: collapse; margin-bottom: 5mm; background: #fff; border: 1px solid #d9d4d2; border-radius: 6px; overflow: hidden; } .stg-bpdf-energy-summary tr { border-bottom: 1px solid #d9d4d2; } .stg-bpdf-energy-summary tr:last-child { border-bottom: none; } .stg-bpdf-energy-summary th, .stg-bpdf-energy-summary td { padding: 7px 14px; font-size: 10.5pt; line-height: 1.3; } .stg-bpdf-energy-summary th { text-align: left; color: #403935; font-weight: 700; width: 75%; } .stg-bpdf-energy-summary td { text-align: right; color: #5D514B; font-weight: 600; } /* === DPE/GES bar chart (style Houzez) === */ .stg-bpdf-energy-h3 { font-size: 11pt; color: #403935; margin: 4mm 0 1mm; font-weight: 700; } .stg-bpdf-energy-caption { font-size: 8pt; color: #5D514B; margin-bottom: 2mm; font-style: italic; } .stg-bpdf-dpe-chart { background: #d9d4d2; border: 1px solid #d9d4d2; border-radius: 4px; padding: 3mm 4mm; margin-bottom: 5mm; } .stg-bpdf-dpe-row { display: flex; align-items: center; gap: 6px; margin: 1.5mm 0; } .stg-bpdf-dpe-label { flex-shrink: 0; width: 24px; } .stg-bpdf-dpe-letter { display: inline-block; width: 22px; height: 22px; line-height: 22px; border-radius: 3px; color: #fff; font-weight: 700; font-size: 11pt; text-align: center; } .stg-bpdf-dpe-bar-wrap { flex: 1; position: relative; height: 22px; } .stg-bpdf-dpe-bar { height: 22px; border-radius: 0 4px 4px 0; } .stg-bpdf-dpe-row.is-active .stg-bpdf-dpe-bar { box-shadow: 0 0 0 1.5px #403935; } .stg-bpdf-dpe-active-tag { position: absolute; top: 50%; transform: translateY(-50%); right: 6px; color: #403935; font-size: 9pt; font-weight: 600; background: rgba(255,255,255,.85); padding: 1px 6px; border-radius: 2px; white-space: nowrap; } /* === Équipement (taxonomie property_feature) === */ .stg-bpdf-equipment-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2mm 4mm; } .stg-bpdf-equipment-list li { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #d9d4d2; border-radius: 3px; border-left: 2px solid var(--primary, #2271b1); font-size: 10.5pt; color: #403935; font-weight: 600; } .stg-bpdf-equipment-check { color: var(--primary, #2271b1); font-weight: 700; font-size: 12pt; } /* === Informations Financières & Légales === */ .stg-bpdf-financial-table { width: 100%; border-collapse: collapse; } .stg-bpdf-financial-table th, .stg-bpdf-financial-table td { padding: 6px 10px; text-align: left; font-size: 10.5pt; border-bottom: 1px solid #d9d4d2; } .stg-bpdf-financial-table th { color: #5D514B; font-weight: 600; width: 55%; } .stg-bpdf-financial-table td { color: #403935; font-weight: 600; text-align: right; } /* === Localisation === */ .stg-bpdf-location-address { margin: 0 0 3mm; font-size: 11pt; color: #403935; font-weight: 600; } .stg-bpdf-location-map img { width: 100%; max-width: 186mm; height: auto; border-radius: 4px; border: 1px solid #d9d4d2; display: block; margin: 0 auto; } .stg-bpdf-location-coords { margin: 2mm 0 0; font-size: 9pt; color: #5D514B; text-align: center; } .stg-bpdf-location-coords code { background: #d9d4d2; padding: 1px 6px; border-radius: 2px; font-size: 9pt; } /* Agent */ .stg-bpdf-agent-card { display: flex; gap: 5mm; align-items: center; background: #d9d4d2; padding: 5mm; border-radius: 4px; border-left: 4px solid var(--primary, #2271b1); } .stg-bpdf-agent-photo { width: 25mm; height: 25mm; border-radius: 50%; object-fit: cover; border: 2px solid #d9d4d2; } .stg-bpdf-agent-info { flex: 1; } .stg-bpdf-agent-name { font-size: 13pt; font-weight: 700; color: var(--accent, #403935); margin-bottom: 4px; } .stg-bpdf-agent-line { font-size: 10pt; color: #5D514B; margin: 2px 0; } /* QR code */ .stg-bpdf-qr { text-align: center; flex-shrink: 0; min-width: 30mm; } .stg-bpdf-qr img { width: 28mm; height: 28mm; display: block; margin: 0 auto 2mm; border: 1px solid #d9d4d2; padding: 2mm; background: #fff; border-radius: 3px; } .stg-bpdf-qr-caption { font-size: 8pt; color: #5D514B; line-height: 1.3; text-align: center; font-style: italic; } .stg-bpdf-qr-block { margin-top: 5mm; padding-top: 4mm; border-top: 1px solid #d9d4d2; text-align: center; } /* Footer */ .stg-bpdf-foot { margin-top: 10mm; padding-top: 4mm; border-top: 2px solid #d9d4d2; font-size: 9pt; color: #5D514B; text-align: center; } .stg-bpdf-foot-line { margin-bottom: 3px; } .stg-bpdf-foot-mentions { font-style: italic; margin: 3px 0; color: #5D514B; font-size: 8pt; } .stg-bpdf-foot-url { color: var(--primary, #2271b1); font-weight: 600; } /* Toolbar (visible à l'écran, masquée à l'impression) */ .stg-bpdf-toolbar { position: fixed; bottom: 20px; right: 20px; background: #fff; padding: 12px 18px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.18); display: flex; gap: 12px; align-items: center; z-index: 9999; } .stg-bpdf-toolbar button { padding: 8px 14px; background: var(--primary, #2271b1); color: #fff; border: 0; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; } .stg-bpdf-toolbar a { color: #5D514B; text-decoration: none; font-size: 12px; } .stg-bpdf-toolbar a:hover { text-decoration: underline; } /* === Print overrides === */ @media print { body { background: #fff !important; font-size: 10.5pt; } /* Filet de sécurité : padding interne même en print, pour qu'il y ait * toujours une marge même si l'utilisateur a choisi "Marges : Aucune" * dans la fenêtre d'impression du navigateur (qui ignore alors @page). * En conditions normales, le @page margin (18mm/14mm) s'ajoute. */ .stg-bpdf-page { max-width: none; margin: 0; padding: 10mm 8mm; box-shadow: none; } .stg-bpdf-noprint { display: none !important; } a { color: inherit !important; text-decoration: none !important; } /* Forcer les images à s'imprimer (Chrome désactive parfois background * images mais pas ) — couleurs DPE/GES également. */ img, .stg-bpdf-energy-class, .stg-bpdf-tag, .stg-bpdf-status, .stg-bpdf-fact, .stg-bpdf-dpe-bar, .stg-bpdf-dpe-letter, .stg-bpdf-equipment-list li { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* === Pagination === */ /* Les sections doivent rester d'un bloc si possible. * EXCEPTIONS volontaires : .stg-bpdf-photos et .stg-bpdf-features * (trop hauts pour tenir avec hero sur page 1) sont laissés * breakable au niveau SECTION, mais leurs TABLES et LIGNES internes * restent atomiques (cf. règles ci-dessous) — ainsi rien n'est jamais * coupé en plein milieu, le split tombe entre 2 tables / 2 sections. */ .stg-bpdf-energy, .stg-bpdf-agent, .stg-bpdf-equipment, .stg-bpdf-financial, .stg-bpdf-location, .stg-bpdf-description { page-break-inside: avoid; break-inside: avoid; } /* Tables atomiques : aucune ne doit être coupée en plein milieu. * Garantit qu'un nouveau breakdown commence toujours en haut d'une * page propre avec ses entêtes/titres, jamais avec un fragment de * ligne coupée venant d'avant. */ .stg-bpdf-info-cles-table, .stg-bpdf-extra, .stg-bpdf-energy-summary, .stg-bpdf-financial-table { page-break-inside: avoid; break-inside: avoid; } /* Lignes : jamais cut au milieu d'une row */ tr, .stg-bpdf-info-cles-table tr, .stg-bpdf-extra tr, .stg-bpdf-financial-table tr, .stg-bpdf-energy-summary tr { page-break-inside: avoid; break-inside: avoid; } /* Titre H3 reste collé à sa table (jamais de H3 orphelin en bas de page) */ .stg-bpdf-info-cles-h3 { page-break-after: avoid; break-after: avoid; } /* Filet de sécurité : padding-top sur chaque section pour garantir un * espacement même si la section bascule en haut d'une nouvelle page * (cas où @page margin est ignoré par certains navigateurs/réglages * d'impression). Le H2 first-child voit sa marge top réduite pour * éviter un double-espacement quand sections consécutives. * Photos exclues : on veut qu'elles enchaînent directement après le * hero sans gap, pour maximiser le contenu de la page 1. */ .stg-bpdf-features, .stg-bpdf-energy, .stg-bpdf-agent, .stg-bpdf-equipment, .stg-bpdf-financial, .stg-bpdf-location, .stg-bpdf-description { padding-top: 8mm; } .stg-bpdf-features > .stg-bpdf-h2:first-child, .stg-bpdf-energy > .stg-bpdf-h2:first-child, .stg-bpdf-agent > .stg-bpdf-h2:first-child, .stg-bpdf-equipment > .stg-bpdf-h2:first-child, .stg-bpdf-financial > .stg-bpdf-h2:first-child, .stg-bpdf-location > .stg-bpdf-h2:first-child, .stg-bpdf-description > .stg-bpdf-h2:first-child { margin-top: 0; } /* Items dans les grilles : ne jamais couper un fact/photo en deux */ .stg-bpdf-fact, .stg-bpdf-photo-thumb, .stg-bpdf-energy-card, .stg-bpdf-dpe-row, .stg-bpdf-equipment-list li { page-break-inside: avoid; break-inside: avoid; } /* Garder les titres collés à leur contenu */ .stg-bpdf-h2 { page-break-after: avoid; break-after: avoid; } /* Lignes de description : pas de veuves/orphelines isolées */ .stg-bpdf-description-body p { orphans: 3; widows: 3; } } /* Responsive (preview écran) */ @media (max-width: 600px) { .stg-bpdf-features-grid { grid-template-columns: repeat(2, 1fr); } .stg-bpdf-photo-grid { grid-template-columns: repeat(2, 1fr); } .stg-bpdf-energy-grid { grid-template-columns: 1fr; } }