/* print.css — Les Immortels, version imprimable (A3 à plier en deux).
   Une feuille A3 paysage (420 × 297 mm) pliée une fois donne un petit journal
   de quatre pages au format A4 portrait. On imprime deux feuilles :
     • feuille « extérieur » : page 4 (dos) | page 1 (couverture)
     • feuille « intérieur » : page 2 | page 3
   Imprimées en recto-verso et pliées au milieu, les pages se suivent 1-2-3-4. */

:root {
  --ink: #161310;
  --ink-soft: #4a443d;
  --rule: #c9bfae;
  --rule-strong: #161310;
  --accent: #8a1c1c;
  --serif-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --serif-body: "Spectral", Georgia, serif;
  --sans: "Libre Franklin", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #d9d4ca;
  color: var(--ink);
  font-family: var(--serif-body);
}

/* ---------- Barre d'outils (écran uniquement) ---------- */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #161310;
  color: #f4efe6;
}
.toolbar__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  flex-wrap: wrap;
}
.toolbar__home {
  color: #e6b3b3;
  font-family: var(--sans);
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}
.toolbar__home:hover { color: #fff; }
.toolbar__note {
  margin: 0;
  flex: 1 1 320px;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.45;
  color: #cfc6b6;
}
.toolbar__note strong { color: #fff; }
.toolbar__print {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #161310;
  background: #e6c89a;
  border: 1px solid #e6c89a;
  border-radius: 3px;
  padding: 11px 20px;
  cursor: pointer;
  white-space: nowrap;
}
.toolbar__print:hover { filter: brightness(1.06); }

.loading {
  font-family: var(--sans);
  text-align: center;
  color: #4a443d;
  padding: 80px 20px;
}

/* ---------- Mise à l'échelle à l'écran ---------- */
/* Les feuilles sont dessinées à leur taille réelle (mm). On les réduit à l'écran
   via « zoom » (pris en charge par les moteurs Chromium et WebKit, ceux d'où l'on
   imprime), ce qui conserve un flux propre, sans transform-origin capricieux. */
.sheets {
  zoom: var(--scale, 1);
  padding: 28px 0;
}

/* ---------- La feuille A3 paysage ---------- */
.sheet {
  width: 420mm;
  height: 297mm;
  margin: 0 auto 26px;
  background: #fbf8f1;
  display: flex;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
  position: relative;
}
.sheet:last-child { margin-bottom: 0; }

/* Le pli central, matérialisé par un repère discret avec son étiquette « à plier ». */
.sheet__fold {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}
/* À l'écran : un fil pointillé sur toute la hauteur, en aperçu du pli. */
.sheet__fold::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 1px dashed var(--rule);
}
/* Étiquette « À plier en deux », posée en tête de pli et masquant le fil derrière elle. */
.sheet__fold-tag {
  position: absolute;
  top: 5mm;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 6.5pt;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  background: #fbf8f1;
  padding: 0 2.5mm;
}

.panel {
  width: 210mm;
  height: 297mm;
  padding: 15mm 13mm;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- Couverture (page 1) ---------- */
.cover__masthead { text-align: center; border-bottom: 3px double var(--rule-strong); padding-bottom: 8mm; }
.cover__brand {
  font-family: var(--serif-display);
  font-weight: 900;
  font-size: 30pt;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1;
}
.cover__tagline {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 10pt;
  color: var(--ink-soft);
  margin: 3mm 0 0;
}
.cover__rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 8pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4mm;
}
.cover__no { color: var(--accent); font-weight: 700; }

.cover__lead { margin-top: 8mm; flex: 1; min-height: 0; }

/* ---------- Articles ---------- */
.art { margin-bottom: 7mm; }
.art:last-child { margin-bottom: 0; }
.art__kicker {
  font-family: var(--sans);
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 2mm;
}
.art__headline {
  font-family: var(--serif-display);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 2mm;
  color: var(--ink);
}
.art__byline {
  font-family: var(--sans);
  font-size: 8pt;
  color: var(--ink-soft);
  margin: 0 0 2.5mm;
}
.art__byline strong { color: var(--ink); }
.art__standfirst {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 10.5pt;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 3mm;
}
.art__body { font-family: var(--serif-body); font-size: 9.5pt; line-height: 1.42; text-align: justify; }
.art__body p { margin: 0 0 2.4mm; }
.art__body p:first-of-type::first-letter {
  font-family: var(--serif-display);
  font-weight: 800;
  font-size: 2.6em;
  line-height: 0.8;
  float: left;
  padding: 1mm 2mm 0 0;
  color: var(--accent);
}

/* L'éditorial en couverture : un cran plus grand. */
.cover__lead .art__headline { font-size: 21pt; }
.cover__lead .art__standfirst { font-size: 12pt; }
.cover__lead .art__body { font-size: 10.5pt; line-height: 1.5; }

/* Pages intérieures : un bandeau de rubrique en tête, puis les articles. */
.panel--inside .panel__head {
  font-family: var(--sans);
  font-size: 8pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2.5mm;
  margin-bottom: 5mm;
}
.panel--inside .art__headline { font-size: 15pt; }

/* ---------- Dos (page 4) ---------- */
.back__cartoon { text-align: center; border-bottom: 1px solid var(--rule); padding-bottom: 6mm; margin-bottom: 6mm; }
.back__cartoon img {
  max-width: 100%;
  max-height: 95mm;
  border: 1px solid var(--rule);
  background: #fff;
}
.back__caption {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 10pt;
  color: var(--ink-soft);
  margin: 3mm 0 1mm;
}
.back__sign { font-family: var(--sans); font-size: 8pt; color: var(--ink-soft); margin: 0; }

.back__promo {
  margin-top: auto;
  border: 1px solid var(--rule);
  border-top: 3px double var(--rule-strong);
  padding: 6mm 7mm;
  text-align: center;
}
.back__promo-title {
  font-family: var(--serif-display);
  font-weight: 800;
  font-size: 15pt;
  margin: 0 0 2mm;
}
.back__promo-text {
  font-family: var(--serif-body);
  font-size: 10pt;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 3mm;
}
.back__url {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11pt;
  color: var(--accent);
  word-break: break-all;
}
.back__qr {
  display: flex;
  justify-content: center;
  margin: 0 0 3mm;
}
.back__qr svg {
  width: 26mm;
  height: 26mm;
  display: block;
  /* Le QR doit rester noir pur à l'impression, quel que soit le réglage couleur. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.back__colophon {
  font-family: var(--sans);
  font-size: 7pt;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 6mm 0 0;
  text-align: center;
}

/* L'ours du numéro papier : le tampon corpen ferme la publication comme une
   signature. Cliquable à l'écran (mailto), simple marque à l'impression. */
.back__ours {
  display: block;
  margin: 4mm auto 0;
  text-align: center;
  text-decoration: none;
}
.back__stamp {
  display: block;
  width: 16mm;
  height: auto;
  margin: 0 auto;
  opacity: 0.85;
  mix-blend-mode: multiply;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---------- Impression ---------- */
@page {
  size: A3 landscape;
  margin: 0;
}

@media print {
  html, body { background: #fff; }
  .toolbar { display: none !important; }
  .sheets { zoom: 1; padding: 0; }
  .sheet {
    margin: 0;
    box-shadow: none;
    page-break-after: always;
    break-after: page;
  }
  .sheet:last-child { page-break-after: auto; break-after: auto; }
  /* À l'impression, on n'imprime pas un fil à travers les colonnes : seulement de
     courts repères de pliure dans les marges haute et basse, et l'étiquette du pli. */
  .sheet__fold::before { display: none; }
  .sheet__fold-tag { background: transparent; color: #777; }
  .sheet__fold-tag::before,
  .sheet__fold::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 5mm;
    border-left: 1px solid #999;
  }
  /* repère du haut (juste au-dessus de l'étiquette) */
  .sheet__fold-tag::before { bottom: 100%; margin-bottom: 1.5mm; }
  /* repère du bas */
  .sheet__fold::after { bottom: 0; }
}