/* Issue theme (Eric, 2026-10-01): each issue may set issue.theme { accent, plaque, plaqueInk, tint } to recolour the printed sheet
   and its print page only (never the website); the town sign and its yellow arrow stay fixed. build.mjs checks the contrast. */
/* Printable A4 sheet, generated from the same issue file as the web page. Events only, no notices. */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; src: url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; src: url("/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; src: url("/fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 700; src: url("/fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: italic; src: url("/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@page { size: A4; margin: 0; }
:root { --accent: #F2C230; --plaque: #1D3A8A; --plaque-ink: #fff; --tint: transparent; --ink: #15181C; --soft: #4E5660; --rule: #C9CFC6; --red: #C4122F; --blue: #1D3A8A; --yellow: #F2C230; --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; --body: "Source Sans 3", "Segoe UI", Verdana, sans-serif; --serif: "Source Serif 4", Georgia, serif; --fs: 10.4pt; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #DDE1DA; color: var(--ink); font-family: var(--body); font-size: 10.4pt; line-height: 1.32; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.toolbar { max-width: 210mm; margin: 0 auto; padding: 10px 12px; font-size: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.toolbar button { font: 700 15px var(--display); letter-spacing: .05em; text-transform: uppercase; background: var(--ink); color: #fff; border: 0; border-radius: 4px; padding: 8px 14px; cursor: pointer; }
.toolbar .telecharger { font: 700 15px var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 4px; padding: 6px 12px; text-decoration: none; }
.sheet { font-size: var(--fs); width: 210mm; height: 297mm; margin: 0 auto 10mm; background: #fff; padding: 8mm 11mm 7mm; display: flex; flex-direction: column; gap: 3mm; overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,.2); }
/* Newspaper masthead (Eric, 2026-10-21): dates on the left, the town sign in the middle, the issue's drawing framed on
   the right, between a heavy rule above and a double rule below. */
header.tete { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 5mm; border-top: 1.4mm solid var(--ink); border-bottom: 1.1mm double var(--ink); padding: 2mm 0 2.2mm; }
.panneau { position: relative; font-size: 2.9em; font-family: var(--display); line-height: .98; text-transform: uppercase; border: .125em solid var(--red); border-radius: .25em; padding: .18em .46em .25em; box-shadow: 0 0 0 .055em #fff; white-space: nowrap; }
.panneau .autour { display: flex; align-items: center; gap: .12em; font-weight: 600; font-size: .32em; letter-spacing: .14em; color: var(--soft); margin-bottom: .15em; }
.panneau .autour .de { width: 2.1em; height: .92em; transform: rotate(-4deg); flex: none; }
.panneau .ville { display: block; font-weight: 700; font-size: 1em; }
.edition { font: 600 1.2em/1.15 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--soft); }
.edition strong { display: block; color: var(--ink); font-size: 1.45em; font-weight: 700; }
.edition span { display: block; margin-top: 1mm; font-size: .82em; }
/* The special sheet keeps its earlier masthead. */
header:not(.tete) { display: flex; align-items: flex-end; justify-content: space-between; gap: 6mm; border-bottom: 1.2mm solid var(--ink); padding-bottom: 3.5mm; }
header:not(.tete) .panneau { font-size: 3.1em; }
header:not(.tete) .edition { text-align: right; font-size: 1.25em; }
header:not(.tete) .edition strong { font-size: 1.35em; }
.clipart { height: 24mm; width: auto; align-self: center; margin: 0 auto; }
/* The drawing of the issue (issue.clipart), framed like a newspaper vignette. */
.vignette { justify-self: end; margin: 0; border: .45mm solid var(--ink); padding: 1.4mm 2mm 1mm; text-align: center; background: #fff; }
.vignette img { display: block; height: 17mm; width: auto; max-width: 42mm; margin: 0 auto; object-fit: contain; }
.vignette figcaption { font: 700 .78em/1 var(--display); letter-spacing: .05em; text-transform: uppercase; margin-top: 1mm; }
/* Theme band: the special in the issue's own colour, under the masthead. */
.bande { margin: 0; background: var(--plaque); color: var(--plaque-ink); padding: 1.6mm 3mm; font-size: .92em; line-height: 1.25; }
.bande b { font: 700 1.2em var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-right: 1.5mm; }
.bande .url { font: 700 1.1em var(--display); letter-spacing: .03em; white-space: nowrap; }
/* À la une: the free highlight (chosen by Autour, never sold) and any paid one, which keeps its label. */
.une-titre { border-bottom: 0; display: flex; align-items: center; gap: 3mm; margin-bottom: 1.2mm; font-size: 1.55em; letter-spacing: .06em; }
.une-titre::after { content: ""; flex: 1; border-top: .7mm solid var(--ink); }
.une-grille { display: grid; grid-template-columns: 1fr; gap: 4mm; }
.une.avec-payee .une-grille { grid-template-columns: 1.5fr 1fr; }
.une-libre { background: var(--tint); border-top: 1.6mm solid var(--plaque); padding: 2.2mm 3.2mm 2.6mm; }
.puce { display: inline-block; background: var(--plaque); color: var(--plaque-ink); font: 700 .82em/1 var(--display); letter-spacing: .1em; text-transform: uppercase; padding: .9mm 1.8mm .7mm; }
.une-corps { display: grid; grid-template-columns: 1.6fr 1fr; gap: 5mm; align-items: end; margin-top: 1.8mm; }
.une.avec-payee .une-corps { grid-template-columns: 1fr; gap: 2mm; }
.une-libre h3 { font: 700 2em/1.02 var(--serif); letter-spacing: -.005em; margin: 0 0 1.2mm; }
.chapo { font: italic 400 1.12em/1.32 var(--serif); }
.quand { font: 600 1.02em/1.3 var(--display); text-transform: uppercase; letter-spacing: .02em; border-top: .3mm solid var(--ink); border-bottom: .3mm solid var(--ink); padding: 1.4mm 0; }
.quand b { margin-right: 1mm; }
.une-payee { border: .7mm solid var(--ink); background: #FDF3CF; box-shadow: 1.2mm 1.2mm 0 var(--yellow); }
.une-payee .bandeau { display: flex; justify-content: space-between; background: var(--ink); color: var(--yellow); font: 700 .82em var(--display); letter-spacing: .1em; text-transform: uppercase; padding: .8mm 2mm; }
.une-payee > div { padding: 2mm 2.5mm; }
.une-payee .qui { font: 700 .9em var(--display); text-transform: uppercase; color: var(--soft); }
.une-payee h3 { font: 700 1.35em/1.12 var(--serif); margin: .6mm 0 1.2mm; }
.une-payee .date { display: inline-block; background: var(--red); color: #fff; font: 700 .95em var(--display); text-transform: uppercase; padding: .3mm 1.5mm; }
.une-payee .tel { font-weight: 700; margin-top: 1mm; }
h3 .une-mark { display: inline-block; vertical-align: .12em; margin-left: 1mm; font: 700 .62em/1 var(--display); letter-spacing: .08em; text-transform: uppercase; background: var(--plaque); color: var(--plaque-ink); padding: .6mm .9mm .4mm; }
.cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 6mm; }
.left, .right { display: flex; flex-direction: column; gap: 3.2mm; min-height: 0; }
h2 { margin: 0; font: 700 1.55em/1 var(--display); text-transform: uppercase; letter-spacing: .03em; border-bottom: .6mm solid var(--ink); padding-bottom: 1mm; display: flex; gap: 2.5mm; align-items: baseline; }
h2 span { font-weight: 600; font-size: .72em; color: var(--soft); letter-spacing: .06em; }
.right h2 { border-bottom-color: var(--accent); }
ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
li { display: grid; grid-template-columns: 13.5mm 1fr; gap: 0 3mm; padding: 1.7mm 0; border-bottom: .2mm solid var(--rule); break-inside: avoid; }
li:last-child { border-bottom: 0; }
.t { font: 700 1.25em/1.1 var(--display); font-variant-numeric: tabular-nums; }
.t small { display: block; font-weight: 600; font-size: .74em; color: var(--soft); }
h3 { margin: 0; font-size: 1.06em; line-height: 1.18; font-weight: 700; }
.w { color: var(--soft); font-size: .93em; }
.w b { font: 700 .95em var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); border: .35mm solid var(--ink); border-radius: .7mm; padding: 0 1.2mm; margin-right: 1.5mm; white-space: nowrap; }
.w b.ici { background: var(--accent); }
p { margin: 0; }
.d { font-size: .95em; }
.right li { grid-template-columns: 12mm 1fr; padding: 1.4mm 0; }
.right .d { font-size: .9em; }
.sans-suite .right .d, .sans-textes .d { display: none; }
/* Appels aux habitants (2026-10-01): small framed box at the foot of the weekend column, at most two. */
.appels { background: var(--tint); margin: 3mm 0 2.5mm; padding: 2mm 2.5mm; border: .5mm solid var(--ink); border-radius: 1mm; font-size: .86em; line-height: 1.32; }
.appels b { display: block; font: 700 1.15em var(--display); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .8mm; }
.appels p { margin: 0 0 1.2mm; }
.appels p:last-child { margin-bottom: 0; }
.appels .contact { display: block; font-weight: 600; }
.plaque { margin-top: auto; background: var(--plaque); color: var(--plaque-ink); border-radius: 2mm; padding: 1.2mm; }
.plaque-in { border: .45mm solid rgba(255,255,255,.85); border-radius: 1.2mm; padding: 3mm; display: grid; grid-template-columns: 1fr 27mm; gap: 3mm; align-items: center; }
.plaque h4 { margin: 0 0 1mm; font: 700 1.5em/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.plaque p { font-size: .9em; line-height: 1.28; }
.plaque .url { font: 700 1.3em var(--display); letter-spacing: .04em; margin-top: 1.2mm; }
.qr { background: #fff; border-radius: 1mm; padding: 1mm; width: 27mm; height: 27mm; }
.qr svg { display: block; width: 100%; height: 100%; }
footer { font-size: .78em; color: var(--soft); border-top: .2mm solid var(--rule); padding-top: 1.6mm; position: relative; }
/* Side label (2026-10-08): runs down the right margin, top to bottom, so it reads at the top left once the page is turned left. */
.sheet { position: relative; }
.soutien { position: absolute; top: 12mm; right: 4.6mm; writing-mode: vertical-rl; font: 600 12.5pt/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.soutien b { font-weight: 700; color: var(--ink); }
.depot { display: block; text-align: right; font-size: .85em; color: #8a929a; margin-top: .8mm; }
.sheet { page-break-after: always; break-after: page; }
.route { display: block; font-size: 9.5pt; }
.route h1 { font: 700 2.2em/1 var(--display); text-transform: uppercase; margin: 0 0 3mm; }
.route table { border-collapse: collapse; width: 100%; margin: 3mm 0; }
.route .check { font-size: .8em; color: var(--soft); }
.route th, .route td { text-align: left; padding: 1mm 2mm; border-bottom: .2mm solid var(--rule); font-size: 1em; vertical-align: top; }
.route th { font: 700 .85em var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.route td:first-child { font-size: 1.3em; }
@media print { html, body { background: #fff; } .toolbar { display: none; } .sheet { margin: 0; box-shadow: none; } }
@media screen and (max-width: 215mm) { .sheet { transform-origin: top left; } }
h3 .annonce { display: inline-block; vertical-align: .12em; margin-right: 1.2mm; font: 700 .62em/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); border: .3mm solid var(--soft); border-radius: .6mm; padding: .5mm .8mm .3mm; }
.semaine { background: var(--tint); margin: 2.5mm 0 1mm; padding: 1.8mm 2.5mm; border: .5mm solid var(--ink); border-radius: 1mm; font-size: .88em; line-height: 1.35; display: flex; flex-wrap: wrap; gap: .6mm 3.5mm; align-items: baseline; }
.semaine b { font: 700 1.15em var(--display); text-transform: uppercase; letter-spacing: .04em; margin-right: 1mm; }
.semaine .jour i { font: 700 1em var(--display); font-style: normal; text-transform: uppercase; }
.semaine em.annonce { font: 700 .72em var(--display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); border: .3mm solid var(--soft); border-radius: .5mm; padding: 0 .6mm; margin-right: .8mm; }
/* Paid annonces (Eric, 2026-10-08): a light box in the colour of the bottom-right plaque, still tagged "Annonce".
   "À réserver" holds paid Monday-to-Thursday events in the two issues before them (lib/annonces.mjs). */
li.paye { background: color-mix(in srgb, var(--plaque) 9%, #fff); border: .3mm solid color-mix(in srgb, var(--plaque) 40%, #fff); border-radius: 1mm; padding-left: 1.5mm; padding-right: 1.5mm; margin: .8mm 0; }
li.paye + li, li:has(+ li.paye) { border-bottom: 0; }
/* A paid entry keeps its one line (the booking contact lives there) even when the sheet drops the other texts to fit. */
.sheet li.paye .d { display: block; }
/* Special editions (2026-10-12, Halloween): the evening guide box in the right column, and the door sign. */
.nuit { background: var(--tint); border: .5mm solid var(--ink); border-radius: 1mm; padding: 2mm 2.5mm; font-size: .9em; line-height: 1.3; display: flex; flex-direction: column; gap: 1.2mm; }
.nuit h2 { border-bottom-color: var(--accent); }
.nuit-quand { font: 700 1.2em var(--display); text-transform: uppercase; letter-spacing: .03em; }
.nuit-lieu b { font: 700 .95em var(--display); letter-spacing: .04em; text-transform: uppercase; border: .35mm solid var(--ink); border-radius: .7mm; padding: 0 1.2mm; margin-right: 1mm; background: var(--accent); }
.nuit-regles { list-style: disc; padding-left: 4mm; gap: .6mm; }
.nuit-regles li { display: list-item; border: 0; padding: 0; }
.nuit-signe { font-weight: 700; }
.affichette { align-items: center; justify-content: center; text-align: center; gap: 10mm; padding: 25mm 20mm; background: var(--tint); }
.affichette img { width: 120mm; height: auto; }
.affichette .aff-grand { font: 700 44pt/1.02 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.affichette .aff-texte { font-size: 18pt; line-height: 1.35; max-width: 150mm; }
.affichette .aff-pied { font: 600 14pt var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--soft); display: flex; align-items: center; gap: 2mm; }
.affichette .aff-pied .de { width: 14mm; height: 6mm; }

/* Special edition note on the weekly sheet (Eric, 2026-10-15): a small band in the special's colours with its drawing, above the plaque. */
.special-note { display: grid; grid-template-columns: 13mm 1fr; gap: 2.5mm; align-items: center; margin: 3mm 0 0; padding: 2mm 2.5mm; border-radius: 2mm; background: var(--special, #3B1F4E); color: #fff; }
.special-note img { width: 13mm; height: 13mm; }
.special-note p { margin: 0; font-size: .88em; line-height: 1.25; }
.special-note b { display: block; font: 700 1.25em/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--special-accent, #fff); }
.special-note .url { font: 700 1.1em var(--display); letter-spacing: .03em; white-space: nowrap; }