/* === Charte dispositif documentaire Francophonia ===
   Couleurs officielles · Charte Francophonia v2.0 · 31 mai 2026
   FOND BLANC PARTOUT — aucun beige, aucun ivoire (cf. Note d'alignement).
   Navy #1A2E5E (Marine) · Red #C8102E (Vermillon — ponctue, ne sature pas)
   Paper #FFFFFF (Blanc) · Band #EEF2F8 (gris-bleu, banding 1 ligne/2) · Ink #0F1A3D (Encre)
   Feux : vert #2F6B45 / ambre #B68A2C / vermillon #C8102E — vraies pastilles, jamais d'emoji. */
:root {
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', -apple-system, sans-serif;
  --hand: 'Caveat', cursive;
  --mono: 'IBM Plex Mono', monospace;
  /* Couleurs officielles charte */
  --navy: #1A2E5E;
  --navy-dark: #12204A;
  --red: #C8102E;
  --red-dark: #A00C24;
  --ink: #0F1A3D;
  --paper: #FFFFFF;
  /* Banding des lignes (une sur deux) — gris-bleu très clair, seul fond toléré */
  --band: #EEF2F8;
  --paper-ivoire: #FFFFFF;   /* legacy alias — désormais blanc */
  --cream: #EEF2F8;          /* legacy alias — désormais le band gris-bleu */
  --muted: #6B6B78;
  --rule: #D7DEEA;           /* filets — dérivé du gris-bleu (plus de beige) */
  /* Accents secondaires (feux + catégories) */
  --gold: #B68A2C;
  --green: #2F6B45;
  --blue: #2A4A7E;
  --violet: #6E4180;
  /* Surfaces dérivées — toutes en blanc / gris-bleu, aucune chaleur */
  --paper-warm: #EEF2F8;     /* legacy alias — désormais le band */
  --postit: #EEF2F8;         /* encadrés repère — band gris-bleu, plus de jaune */
  --postit-edge: #D7DEEA;
  --voix: var(--band);
}

* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }
html, body { margin: 0; padding: 0; }
body {
  background: #F4F6FA;
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.doc { max-width: 210mm; margin: 0 auto; padding: 24px 0 80px; }
.doc.landscape { max-width: 297mm; }
.page { width: 210mm; height: 297mm; background: var(--paper); margin: 0 auto 24px; box-shadow: 0 2px 14px rgba(0,0,0,0.08); position: relative; overflow: hidden; page-break-after: always; }
.page.landscape { width: 297mm; height: 210mm; }
.doc.a3-landscape { max-width: 420mm; }
.page.a3-landscape { width: 420mm; height: 297mm; }
.page-inner { position: absolute; inset: 0; padding: 16mm 18mm 12mm; display: flex; flex-direction: column; }

.runhead { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 7.5pt; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); padding-bottom: 4mm; border-bottom: 0.5pt solid var(--rule); flex-shrink: 0; }
.runhead .red { color: var(--red); font-weight: 600; }
.runfoot { display: flex; justify-content: space-between; align-items: center; padding-top: 3mm; border-top: 0.5pt solid var(--rule); font-family: var(--serif); font-style: italic; font-size: 8.5pt; color: var(--muted); margin-top: auto; flex-shrink: 0; gap: 4mm; }
.runfoot .left { display: flex; align-items: baseline; gap: 4mm; }
.runfoot .pn { font-family: var(--mono); font-style: normal; font-size: 7.5pt; letter-spacing: 0.2em; color: var(--navy); font-weight: 600; }
.runfoot .dot { color: var(--red); font-style: normal; }
.runfoot .right { font-family: var(--mono); font-style: normal; font-size: 7pt; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

.body { flex: 1 1 auto; min-height: 0; padding-top: 3mm; overflow: hidden; }

.eye { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.28em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 5mm; }
h1.title { font-family: var(--serif); font-weight: 500; font-size: 40pt; line-height: 1.02; letter-spacing: -0.015em; color: var(--navy); margin: 0; }
h1.title em { font-style: italic; color: var(--red); font-weight: 400; }
h2.section { font-family: var(--serif); font-weight: 500; font-size: 26pt; line-height: 1.05; letter-spacing: -0.012em; color: var(--navy); margin: 0 0 2.5mm; }
h2.section em { font-style: italic; color: var(--red); font-weight: 400; }
h3.sub { font-family: var(--mono); font-size: 8pt; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); font-weight: 600; margin: 0 0 3mm; }
h4.kicker { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 13pt; color: var(--navy); margin: 0 0 3mm; }
h5.subhead { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 12pt; color: var(--navy); margin: 2.5mm 0 1.2mm; }
.rule { height: 1.2pt; background: var(--red); width: 14mm; margin: 2mm 0 3mm; }
.rule.thin { height: 0.5pt; background: var(--rule); width: 100%; }
.rule.wide { width: 100%; height: 1pt; background: var(--navy); margin: 3mm 0; }

p, .p { font-family: var(--sans); font-size: 9.4pt; line-height: 1.45; color: var(--ink); margin: 0 0 2.2mm; }
p.lede { font-family: var(--serif); font-size: 12.5pt; line-height: 1.4; color: var(--ink); }
p.lede em { color: var(--red); font-style: italic; }
.small { font-size: 8.7pt; line-height: 1.45; }
.tiny { font-size: 7.8pt; line-height: 1.4; }
b, strong { color: var(--navy); font-weight: 600; }
em.red { color: var(--red); font-style: italic; }
em.hand { font-family: var(--hand); font-size: 14pt; color: var(--navy); font-style: normal; }

.cover { padding: 26mm 22mm 18mm; }
.cover .top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 7.5pt; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.cover .top .red { color: var(--red); font-weight: 700; }
.cover .preamble-eye { font-family: var(--serif); font-style: italic; font-size: 13pt; color: var(--muted); margin-bottom: 5mm; }
.cover h1.bighero { font-family: var(--serif); font-weight: 500; font-size: 80pt; line-height: 0.92; letter-spacing: -0.025em; color: var(--navy); margin: 0; }
.cover h1.bighero em { font-style: italic; color: var(--red); font-weight: 400; }
.cover .tag { font-family: var(--serif); font-style: italic; font-size: 14.5pt; color: var(--navy); line-height: 1.38; max-width: 145mm; margin-top: 10mm; text-transform: none; letter-spacing: normal; }
.cover .bottom { display: flex; justify-content: space-between; align-items: flex-end; font-family: var(--serif); font-style: italic; font-size: 10.5pt; color: var(--muted); margin-top: auto; }
.cover .bottom .strong { display: block; font-style: normal; font-family: var(--serif); color: var(--navy); font-weight: 500; font-size: 12pt; margin-top: 2mm; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1pt solid var(--red); border-bottom: 0.5pt solid var(--rule); margin: 12mm 0 0; }
.stats.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stats.cols-2 { grid-template-columns: repeat(2, 1fr); }
.stats .st { padding: 5mm 5mm 5mm 0; border-right: 0.5pt solid var(--rule); }
.stats .st:last-child { border-right: 0; padding-right: 0; }
.stats .lab { font-family: var(--mono); font-size: 6.8pt; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 3mm; display: block; }
.stats .big { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 36pt; line-height: 0.95; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 3mm; }
.stats .big small { font-size: 22pt; }
.stats .desc { font-family: var(--sans); font-size: 8pt; color: var(--ink); line-height: 1.35; }

table.dt { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 8.7pt; margin: 2mm 0 3mm; }
table.dt thead th { font-family: var(--mono); font-size: 7pt; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); font-weight: 600; text-align: left; padding: 2.5mm 2mm; border-bottom: 0.8pt solid var(--navy); vertical-align: bottom; }
table.dt tbody td { padding: 1.6mm 2mm; border-bottom: 0.4pt solid var(--rule); vertical-align: top; color: var(--ink); line-height: 1.35; }
table.dt tbody tr:last-child td { border-bottom: 0.6pt solid var(--navy); }
table.dt tbody td.num, table.dt thead th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dt tbody td.mono { font-family: var(--mono); font-size: 7.8pt; }
table.dt tbody td b { color: var(--navy); }
table.dt tbody tr.total td { background: var(--paper-warm); font-weight: 600; }
table.dt tbody tr.total td b { color: var(--red); }

.sig { display: inline-block; min-width: 12pt; font-family: var(--mono); font-weight: 700; text-align: center; }
.sig.green { color: var(--green); }
.sig.orange { color: #c66a13; }
.sig.red { color: var(--red); }
.sig.gray { color: var(--muted); }

.box { padding: 3.5mm 5mm; margin: 2.5mm 0; border-left: 2pt solid var(--red); background: #F7F9FC; }
.box h5 { margin: 0 0 2mm; font-family: var(--mono); font-size: 7.5pt; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.box p { margin: 0 0 1.5mm; font-size: 9pt; }
.box p:last-child { margin-bottom: 0; }
.box.navy { border-left-color: var(--navy); background: #F6F7FB; }
.box.green { border-left-color: var(--green); background: #F5F9F4; }
.box.gold { border-left-color: var(--gold); background: #F7F9FC; }
.box.subtle { border-left-color: var(--rule); background: transparent; padding: 3mm 0 3mm 6mm; }

.callout { padding: 4mm 5.5mm; margin: 3mm 0; background: var(--postit); border: 0.5pt solid var(--postit-edge); }
.callout h5 { margin: 0 0 2mm; font-family: var(--mono); font-size: 7.5pt; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); font-weight: 600; }
.callout p { margin: 0 0 1.5mm; font-size: 9pt; }
.callout p:last-child { margin-bottom: 0; }
.callout em.hand { color: var(--navy); }

.pull { font-family: var(--serif); font-style: italic; font-size: 14pt; line-height: 1.35; color: var(--navy); padding: 3mm 0 3mm 8mm; border-left: 1.5pt solid var(--red); margin: 4mm 0; }
.pull cite { display: block; font-size: 9pt; font-style: normal; font-family: var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 3mm; }

ul.dt, ol.dt { margin: 1mm 0 3mm; padding-left: 5mm; }
ul.dt li, ol.dt li { font-size: 9.2pt; line-height: 1.5; margin-bottom: 1.5mm; }
ul.dt li::marker { color: var(--red); }
ul.checks { list-style: none; padding-left: 0; margin: 1mm 0 3mm; }
ul.checks li { padding-left: 7mm; position: relative; font-size: 9.2pt; line-height: 1.5; margin-bottom: 1.5mm; }
ul.checks li::before { content: "\2610"; position: absolute; left: 0; top: 0; color: var(--red); font-size: 11pt; line-height: 1; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5mm; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4mm; }

.tag { display: inline-block; font-family: var(--mono); font-size: 6.8pt; letter-spacing: 0.16em; text-transform: uppercase; padding: 1pt 5pt; border-radius: 2pt; font-weight: 600; vertical-align: middle; }
.tag.red { background: var(--red); color: #fff; }
.tag.navy { background: var(--navy); color: #fff; }
.tag.gold { background: var(--gold); color: #fff; }
.tag.green { background: var(--green); color: #fff; }
.tag.gray { background: var(--muted); color: #fff; }
.tag.outline { background: transparent; color: var(--navy); border: 0.6pt solid var(--navy); }

.toc-head { font-family: var(--mono); font-size: 8pt; letter-spacing: 0.28em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 5mm; }
ol.toc { list-style: none; padding: 0; margin: 0; counter-reset: t; }
ol.toc li { counter-increment: t; display: flex; align-items: baseline; gap: 4mm; padding: 3mm 0; border-bottom: 0.4pt solid var(--rule); font-family: var(--serif); font-size: 12pt; color: var(--navy); }
ol.toc li::before { content: counter(t, decimal-leading-zero); font-family: var(--mono); font-size: 8pt; color: var(--red); font-weight: 600; min-width: 12mm; }
ol.toc li .ttl { flex: 1; }
ol.toc li .pn { font-family: var(--mono); font-size: 8pt; color: var(--muted); }

.frise-grid { display: grid; gap: 1pt; background: var(--rule); border: 0.5pt solid var(--rule); }
.frise-grid .cell { background: var(--paper); padding: 2.5mm 2mm; font-size: 7.4pt; line-height: 1.35; min-height: 14mm; }
.frise-grid .head { background: var(--navy); color: #fff; font-family: var(--mono); font-size: 7pt; letter-spacing: 0.18em; text-transform: uppercase; padding: 2mm; text-align: center; font-weight: 600; }
.frise-grid .rowhead { background: var(--paper-warm); font-family: var(--mono); font-size: 6.8pt; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); font-weight: 600; padding: 2.5mm 2mm; line-height: 1.3; }
.frise-grid .c1a { background: #e6edf7; }
.frise-grid .c1b { background: #edf4ed; }
.frise-grid .c2  { background: #fde8df; }
.frise-grid .c3  { background: #fff9e2; }
.frise-grid .c4  { background: #fbe9ee; }
.frise-grid .c5  { background: #f1e8f7; }

@media print {
  body { background: #fff; }
  .page { margin: 0; box-shadow: none; }
  @page { size: A4 portrait; margin: 0; }
  .page.landscape { page: landscape; }
  @page landscape { size: A4 landscape; margin: 0; }
  .doc.a3-landscape { max-width: none; }
  .page.a3-landscape { page: a3landscape; }
  @page a3landscape { size: A3 landscape; margin: 0; }
}