/* ═══════════════════════════════════════════════════════════════ MODÈLES D'IMPRESSION — feuille commune au catalogue et aux grilles achetées. Voir shared/js/print-templates.mjs pour le rendu. Tout est en points et millimètres : le pixel n'a pas de sens sur papier, et une grille dimensionnée en pixels change de taille d'une imprimante à l'autre. ═══════════════════════════════════════════════════════════════ */ /* L'hôte est l'enfant direct de qui contient #print-root. On le cible par une classe et non par l'identifiant : depuis l'ajout de l'aperçu, la zone imprimable est nichée dans un panneau, et « body > #print-root » ne correspondait plus à rien — la page entière serait partie à l'imprimante. */ .pp-print-host { display: none; } @media print { /* Rien d'autre que le document imprimable. */ body > *:not(.pp-print-host) { display: none !important; } .pp-print-host { display: block !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important; background: none !important; padding: 0 !important; overflow: visible !important; } /* La barre d'outils de l'aperçu n'a rien à faire sur le papier. */ .pp-preview-bar { display: none !important; } .pp-preview-scroll { overflow: visible !important; padding: 0 !important; } #print-root { display: block !important; } /* L'aperçu réduit le document pour le faire tenir à l'écran (jusqu'à 44 % sur téléphone) et lui impose la largeur d'une feuille. Sans cette remise à zéro, la grille partait à l'imprimante à l'échelle de l'écran. */ .pp-print-host .pp-doc { transform: none !important; width: auto !important; margin: 0 !important; } /* À l'écran les pages imitent une feuille ; à l'impression c'est la feuille. */ .pp-print-host .pp-page { width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; } @page { size: A4 portrait; margin: 12mm; } html, body { background: #fff !important; } } /* ─── Ossature commune ─── */ .pp-doc { color: #000; font-family: 'Hanken Grotesk', system-ui, sans-serif; } .pp-page { page-break-after: always; } .pp-page:last-child { page-break-after: auto; } .pp-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 14px; } .pp-head h2 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 18pt; } .pp-head .pp-brand { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 11pt; } .pp-sol-label { font-size: 10pt; color: #555; } .pp-dedicace { margin: 0 0 12px; text-align: center; font-size: 12pt; font-style: italic; color: #333; } .pp-grid { display: grid; gap: 0; width: 100%; max-width: 170mm; margin: 0 auto; } .pp-cell { aspect-ratio: 1; border: 0.75px solid #000; position: relative; overflow: hidden; /* Les fonds des cases (case-définition #333, badge mot mystère) DOIVENT s'imprimer, sinon la case-définition ressort blanche et on la confond avec une case-lettre. */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } .pp-cell.b { border: none; } .pp-cell.c { background: #333; color: #fff; } .pp-cell.l { background: #fff; } .pp-cell.c .pp-num { position: absolute; top: .5px; left: 1px; font-size: 6.5pt; font-weight: 800; line-height: 1; font-family: 'Bricolage Grotesque', system-ui, sans-serif; } .pp-cell.c .pp-cdir { position: absolute; bottom: .5px; right: 1px; font-size: 6pt; line-height: 1; } .pp-cell .pp-sol { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: 8.5pt; } .pp-clues { columns: 2; column-gap: 10mm; margin-top: 10px; font-size: 8.4pt; line-height: 1.35; } .pp-cl { break-inside: avoid; margin-bottom: 2px; } .pp-cl b { font-family: 'Bricolage Grotesque', system-ui, sans-serif; } /* Police neutre forcée sur la flèche : Playfair (police « Élégant ») dessine son « ↓ » avec deux barres, qui se lit « ¥ » une fois imprimé. Règle posée sur l'élément lui-même : elle l'emporte sur la police héritée de la liste. */ .pp-cl-dir { font-weight: 700; font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; } .pp-foot { margin-top: 12px; font-size: 8pt; color: #666; text-align: center; } /* ─── Cadre imagé (aquarelle) ─── */ /* L'image occupe toute la page ; le contenu vit dans la zone claire du centre. Les fonds DOIVENT s'imprimer (print-color-adjust). Les marges internes sont posées EN LIGNE par le rendu (valeurs par cadre, voir CADRES). */ .pp-cadre-image { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Proportions A4 imposées : sans dimensions fixes, la page prenait la hauteur du contenu (carré) et l'image se recadrait de travers. */ .pp-cadre-image.o-portrait { width: 210mm; min-height: 297mm; } .pp-cadre-image.o-paysage { width: 297mm; min-height: 210mm; } /* Titre posé DANS la banderole : hors flux, centré horizontalement, à la hauteur du cadre. La largeur est posée en ligne (largeur de la banderole) ; le SVG textLength cale le texte pile à cette largeur. */ .pp-cadre-image .pp-head-cadre { position: absolute; left: 50%; transform: translateX(-50%); border: none; margin: 0; padding: 0; } .pp-titre-txt { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 90px; fill: #24201a; } /* Éditeur de mise en page : titre, grille et définitions déplaçables (glisser) et redimensionnables (poignée). Tout ça ne se voit QU'À L'ÉCRAN. */ @media screen { .pp-cadre-image .pp-edit { cursor: move; } .pp-cadre-image .pp-edit:hover { outline: 1.5px dashed rgba(40, 32, 20, .5); outline-offset: 3px; } .pp-edit-poignee { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: #ff5da2; border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; opacity: 0; transition: opacity .15s; z-index: 5; } .pp-cadre-image .pp-edit:hover .pp-edit-poignee { opacity: 1; } } @media print { .pp-edit-poignee { display: none !important; } .pp-cadre-image .pp-edit { outline: none !important; } } /* Bandeau d'aide de l'éditeur — écran seulement, jamais imprimé. */ @media screen { .pp-edit-aide { background: #fff4d6; border: 1px solid #e6c15a; color: #6b5410; border-radius: 10px; padding: 14px 18px; margin: 0 0 16px; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 13pt; line-height: 1.5; } .pp-edit-aide span { color: #e0357a; font-weight: 700; } .pp-edit-aide b { color: #241c12; } } @media print { .pp-edit-aide { display: none !important; } } /* Grille plus petite : la zone claire est plus étroite qu'une pleine page. */ .pp-cadre-image .pp-grid { max-width: 132mm; } .pp-cadre-image.o-paysage .pp-grid { max-width: 122mm; } /* Définitions compactes ET posées sur un fond blanc léger arrondi : sans lui, le texte se mêle à l'aquarelle et devient illisible. Le fond doit s'imprimer (print-color-adjust hérité de .pp-cadre-image). */ .pp-cadre-image .pp-clues { font-size: 7.6pt; line-height: 1.28; color: #241c12; background: rgba(255, 255, 255, .84); border-radius: 3.5mm; padding: 5mm 6mm; margin-top: 6mm; } /* Phrase de pied et griffe : NON éditables, ancrées en bas, centrées — quelle que soit l'orientation. La page étant position:relative, `bottom` colle au bord bas de la feuille A4. */ .pp-cadre-image .pp-foot { position: absolute; left: 0; right: 0; bottom: 12mm; text-align: center; margin: 0; color: #6b5b43; } .pp-griffe { text-align: center; margin-top: 5px; } .pp-cadre-image .pp-griffe { position: absolute; left: 0; right: 0; bottom: 5mm; margin: 0; } .pp-griffe img { height: 6.5mm; width: auto; opacity: .9; } /* Aperçu écran en paysage (l'impression est pilotée par l'@page injecté). */ .pp-doc.o-paysage .pp-page { width: 297mm; } /* ─── Mot caché ─── */ /* Sur papier le trait ne suffit pas à distinguer une case marquée : on la double d'un liseré épais, qui survit à une photocopie. */ .pp-cell.l.cache { box-shadow: inset 0 0 0 1.6px #000; } /* Numéro du mot mystère, DANS la grille : petit badge noir lisible plutôt qu'un chiffre minuscule qu'on confond avec le reste. */ .pp-cache-num { position: absolute; top: .4px; right: .4px; min-width: 3.4mm; height: 3.4mm; padding: 0 .3mm; display: flex; align-items: center; justify-content: center; background: #111; color: #fff; border-radius: 50%; font-size: 7.5pt; font-weight: 800; line-height: 1; font-family: 'Bricolage Grotesque', system-ui, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .m-grands-caracteres .pp-cache-num { min-width: 4.4mm; height: 4.4mm; font-size: 10pt; } .pp-cache { margin-top: 8mm; text-align: center; break-inside: avoid; } .pp-cache-titre { font-size: 9pt; font-weight: 700; margin-bottom: 3mm; } .pp-cache-cases { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1.5mm; } .pp-cache-groupe { display: flex; gap: 1mm; } .pp-cache-espace { width: 4mm; } .pp-cache-case { position: relative; display: inline-block; width: 7mm; height: 8mm; border: 0.75px solid #000; border-bottom-width: 1.6px; } .pp-cache-case i { position: absolute; top: .2mm; left: .4mm; font-size: 5pt; font-style: normal; color: #666; line-height: 1; } .pp-cache-case b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: 9pt; } /* ═══ Modèle : Fléché ═══ Les définitions vivent dans les cases. Le texte est réduit au maximum lisible à l'impression ; au-delà d'une soixantaine de caractères il est coupé, et le compositeur prévient avant. */ .m-fleche .pp-grid { max-width: 180mm; } .m-fleche .pp-cell.c { background: #fff; color: #000; border: 0.75px solid #000; } .m-fleche .pp-inline { display: block; padding: .4mm .5mm; font-size: 6pt; line-height: 1.12; hyphens: auto; overflow: hidden; } .m-fleche .pp-inline i { font-style: normal; font-weight: 700; } .m-fleche .pp-cell.c.deux .pp-inline { border-bottom: .4px solid #999; } .m-fleche .pp-cell.c.deux .pp-inline:last-child { border-bottom: none; } /* ═══ Modèle : Affiche ═══ La grille prend la page ; les définitions passent en pied, en petit. À encadrer, donc pas de solution imprimée par-dessus. */ .m-affiche .pp-head { border-bottom-width: 3px; padding-bottom: 10px; margin-bottom: 8px; } .m-affiche .pp-head h2 { font-size: 30pt; line-height: 1.05; } .m-affiche .pp-grid { max-width: 185mm; } .m-affiche .pp-clues { columns: 3; column-gap: 7mm; font-size: 6.6pt; line-height: 1.25; margin-top: 8mm; } .m-affiche .pp-cell.c .pp-num { font-size: 7.5pt; } .m-affiche .pp-dedicace { font-size: 13pt; margin-bottom: 6mm; } /* ═══ Modèle : Grands caractères ═══ Pour offrir à quelqu'un qui ne lit plus les petits caractères. On assume le débordement sur une seconde page : mieux vaut deux pages lisibles qu'une illisible. */ .m-grands-caracteres .pp-grid { max-width: 150mm; } .m-grands-caracteres .pp-cell { border-width: 1.1px; } .m-grands-caracteres .pp-cell.c .pp-num { font-size: 10pt; } .m-grands-caracteres .pp-cell.c .pp-cdir { font-size: 9pt; } .m-grands-caracteres .pp-cell .pp-sol { font-size: 13pt; } .m-grands-caracteres .pp-clues { columns: 1; font-size: 12pt; line-height: 1.5; margin-top: 8mm; } .m-grands-caracteres .pp-cl { margin-bottom: 1.5mm; } .m-grands-caracteres .pp-cache-case { width: 10mm; height: 12mm; } .m-grands-caracteres .pp-cache-case b { font-size: 13pt; } .m-grands-caracteres .pp-cache-titre { font-size: 12pt; } /* ═══ Couleur ═══ Par défaut tout est en noir : une grille imprimée chez soi coûte cher en encre, et le gris des cases-définitions passe mal en photocopie. */ .pp-doc.couleur .pp-cell.c { background: #2b2bff; color: #fff; } .pp-doc.couleur .pp-head { border-bottom-color: #2b2bff; } .pp-doc.couleur .pp-cell.l.cache { box-shadow: inset 0 0 0 1.6px #d39a00; } .pp-doc.couleur.m-fleche .pp-cell.c { background: #eef0ff; color: #000; } /* ═══════════════════════════════════════════════════════════════ DÉCORS — l'habillage de l'occasion (voir shared/js/print-decors.mjs) Axe indépendant des modèles. Tout est au trait, sans aplat : une cartouche coûte plus cher que la grille qu'elle imprime, et un fond coloré rend les cases-définitions illisibles en photocopie. ═══════════════════════════════════════════════════════════════ */ .pp-page.avec-decor { position: relative; padding: 7mm 6mm 5mm; } .pp-decor { position: absolute; inset: 0; pointer-events: none; /* ne doit jamais intercepter un clic */ z-index: 0; color: #000; /* noir par défaut : voir .couleur */ } /* Le contenu passe au-dessus de l'ornement, jamais l'inverse. */ .pp-page.avec-decor > *:not(.pp-decor) { position: relative; z-index: 1; } .pp-decor-cadre { position: absolute; inset: 0; width: 100%; height: 100%; } .pp-decor-cadre rect { fill: none; stroke: currentColor; stroke-width: .18; /* viewBox 0-100 étiré : trait très fin */ vector-effect: non-scaling-stroke; } .pp-decor-coin { position: absolute; width: 16mm; height: 16mm; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pp-decor-coin.hg { top: 3mm; left: 3mm; } .pp-decor-coin.hd { top: 3mm; right: 3mm; } .pp-decor-coin.bg { bottom: 3mm; left: 3mm; } .pp-decor-coin.bd { bottom: 3mm; right: 3mm; } /* En couleur, l'ornement prend la teinte de son occasion. La grille, elle, ne change pas : sa lisibilité ne se négocie pas contre une ambiance. */ .pp-doc.couleur .pp-decor { color: var(--decor, #000); } /* Sur l'affiche, l'ornement est le sujet autant que la grille. */ .m-affiche .pp-decor-coin { width: 22mm; height: 22mm; } .m-affiche.avec-decor { padding: 9mm 8mm 6mm; } /* En grands caractères, on réduit l'ornement : la place va au texte. */ .m-grands-caracteres .pp-decor-coin { width: 12mm; height: 12mm; } /* Le fléché occupe déjà toute la largeur ; les coins seraient à cheval sur la grille. On garde le cadre seul. */ .m-fleche .pp-decor-coin { display: none; }