/** * Feuille d'impression des fiches recette. * * La page écran ne s'imprime pas bien : en-tête collant, hero pleine hauteur, fonds * colorés, barre latérale, recettes liées, appel à l'action. Plutôt que de tenter de * la corriger — chaque élément porte ses styles en attribut, qui gagnent sur toute * feuille externe —, le template produit une fiche dédiée, invisible à l'écran, qui * est la seule chose envoyée à l'imprimante. */ .tmp-print { display: none; } @media print { /* Tout le site disparaît : en-tête, contenu écran, pied, barre d'admin. La fiche est remontée en enfant direct de par home.js — sans quoi masquer ses ancêtres la masquerait avec eux. */ body > *:not(.tmp-print) { display: none !important; } #wpadminbar { display: none !important; } body > .tmp-print { display: block !important; } @page { size: letter portrait; margin: 14mm 15mm 16mm; } html, body { background: #fff !important; color: #000; font: 11pt/1.45 Georgia, 'Times New Roman', serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ── En-tête de la fiche ─────────────────────────────────────────────── */ .tmp-print-head { display: flex; gap: 10mm; align-items: flex-start; border-bottom: 1.5pt solid #000; padding-bottom: 4mm; margin-bottom: 5mm; } .tmp-print-head > div:first-child { flex: 1 1 auto; } .tmp-print-cat { font: 700 8.5pt/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #C25200; margin: 0 0 2mm; } .tmp-print h1 { font: 700 22pt/1.1 Georgia, serif; margin: 0 0 1.5mm; color: #000; } .tmp-print-credit { font: italic 10pt/1.3 Georgia, serif; color: #444; margin: 0; } .tmp-print-intro { font: 10.5pt/1.45 Georgia, serif; color: #222; margin: 2.5mm 0 0; max-width: 115mm; } /* La photo reste petite : c'est un repère visuel, pas une affiche — et l'encre couleur coûte cher à qui imprime sa recette chez lui. */ .tmp-print-photo { flex: 0 0 auto; width: 42mm; height: 42mm; object-fit: cover; border-radius: 2mm; border: .5pt solid #ccc; } /* ── Bandeau des temps ───────────────────────────────────────────────── */ .tmp-print-meta { display: flex; flex-wrap: wrap; gap: 0 8mm; border-bottom: .75pt solid #999; padding-bottom: 3.5mm; margin-bottom: 5mm; } .tmp-print-meta div { font: 10pt/1.3 Georgia, serif; } .tmp-print-meta b { display: block; font: 700 8pt/1.2 'Helvetica Neue', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #666; } /* ── Ingrédients : deux colonnes, on gagne une page sur les longues listes ── */ .tmp-print h2 { font: 700 13pt/1.2 Georgia, serif; margin: 0 0 3mm; padding-bottom: 1.5mm; border-bottom: .75pt solid #000; break-after: avoid; } .tmp-print-ing { margin-bottom: 6mm; } .tmp-print-ing ul { columns: 2; column-gap: 9mm; list-style: none; margin: 0; padding: 0; } .tmp-print-ing li { break-inside: avoid; padding: 0 0 1.6mm 6mm; position: relative; font-size: 10pt; line-height: 1.35; } /* une case à cocher : la fiche sert à cuisiner, pas à décorer */ .tmp-print-ing li::before { content: ''; position: absolute; left: 0; top: 1.1mm; width: 3mm; height: 3mm; border: .75pt solid #666; border-radius: .5mm; } .tmp-print-ing .tmp-print-groupe { break-inside: avoid; break-after: avoid; padding-left: 0; margin: 2mm 0 1.5mm; font: 700 8.5pt/1.2 'Helvetica Neue', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #C25200; } .tmp-print-ing .tmp-print-groupe::before { display: none; } /* ── Étapes ──────────────────────────────────────────────────────────── */ .tmp-print-etapes { counter-reset: etape; } .tmp-print-etapes li { break-inside: avoid; /* une étape ne se coupe jamais entre deux pages */ counter-increment: etape; list-style: none; position: relative; padding: 0 0 3mm 9mm; font-size: 10.5pt; line-height: 1.45; } .tmp-print-etapes li::before { content: counter(etape); position: absolute; left: 0; top: -0.4mm; font: 700 italic 14pt/1 Georgia, serif; color: #C25200; } .tmp-print-etapes ol { margin: 0; padding: 0; } .tmp-print-etapes strong { display: block; font: 700 10.5pt/1.3 Georgia, serif; margin-bottom: .5mm; } /* ── L'astuce ────────────────────────────────────────────────────────── */ .tmp-print-astuce { break-inside: avoid; margin-top: 5mm; border: .75pt solid #C25200; border-radius: 2mm; padding: 3mm 4mm; background: #FFF6EE; } .tmp-print-astuce b { display: block; font: 700 8.5pt/1.2 'Helvetica Neue', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #C25200; margin-bottom: 1mm; } .tmp-print-astuce p { margin: 0; font-size: 10pt; line-height: 1.4; } /* ── Pied : où retrouver la recette ─────────────────────────────────── */ .tmp-print-pied { margin-top: 6mm; padding-top: 2.5mm; border-top: .5pt solid #999; font: 8.5pt/1.3 'Helvetica Neue', Arial, sans-serif; color: #666; display: flex; justify-content: space-between; gap: 6mm; } .tmp-print-pied a { color: #666; text-decoration: none; } a[href]::after { content: none !important; } /* pas d'URL entre parenthèses partout */ }