/* ============================================================
   34 boulevard de Clichy — feuille de style
   Minimal éditorial, blanc, typographie : Fraunces + IBM Plex Sans
   ============================================================ */

/* ---- Polices hébergées sur le site (Fontsource, SIL OFL 1.1) — voir assets/polices/LISEZMOI.txt ---- */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/polices/fraunces-latin-opsz-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/polices/fraunces-latin-ext-opsz-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(assets/polices/fraunces-latin-opsz-italic.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(assets/polices/fraunces-latin-ext-opsz-italic.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;font-display:swap;src:url(assets/polices/ibm-plex-sans-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;font-display:swap;src:url(assets/polices/ibm-plex-sans-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(assets/polices/ibm-plex-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(assets/polices/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(assets/polices/ibm-plex-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(assets/polices/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(assets/polices/ibm-plex-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(assets/polices/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url(assets/polices/ibm-plex-sans-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url(assets/polices/ibm-plex-sans-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(assets/polices/ibm-plex-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(assets/polices/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(assets/polices/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(assets/polices/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root {
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --ink-mute: #6b6862;
  --line: #e8e6e1;
  --paper: #fbfaf7;
  --paper-pure: #ffffff;
  --accent: #8b1a1a;
  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --max: 1180px;
  --read: 680px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html { overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }

/* ---- Header ---- */
header.site {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.92);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
}
.brand {
  font-family: var(--serif);
  font-weight: 500; font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
.brand .num { font-style: italic; font-weight: 300; }
nav ul { list-style: none; display: flex; gap: 24px; font-size: 14px; flex-wrap: wrap; }
nav a { color: var(--ink-soft); text-decoration: none; transition: color .15s; }
nav a:hover, nav a[aria-current="page"] { color: var(--accent); }

/* ---- Hero ---- */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 90px 32px 70px;
  border-bottom: 1px solid var(--line);
}
.hero .eyebrow {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-mute); margin-bottom: 32px;
}
.hero h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 6vw, 78px); line-height: 1.02;
  letter-spacing: -0.025em; margin-bottom: 28px; max-width: 14ch;
}
.hero h1 em { font-style: italic; font-weight: 300; color: var(--accent); }
.hero .lede {
  font-family: var(--serif); font-size: 22px; line-height: 1.45;
  color: var(--ink-soft); max-width: 56ch; font-weight: 300;
}

main { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
section.block { padding: 70px 0; border-bottom: 1px solid var(--line); }
section.block:last-child { border-bottom: none; }

.block-head {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 60px; margin-bottom: 50px; align-items: start;
}
.block-head .label {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-mute); padding-top: 12px;
}
.block-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px); line-height: 1.1;
  letter-spacing: -0.02em; max-width: 18ch;
}
.block-head .block-subtitle {
  grid-column: 2;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-top: 14px;
  max-width: 60ch;
  border-left: 2px solid var(--accent-warm, #d4a574);
  padding-left: 14px;
}
.block-head .block-subtitle em { font-style: italic; }
.block-head .block-subtitle strong { color: var(--ink); font-weight: 500; }
@media (max-width: 720px) { .block-head .block-subtitle { grid-column: 1; max-width: 100%; } }
@media (max-width: 720px) { .block-head { grid-template-columns: 1fr; gap: 16px; } }

/* ---- Prose ---- */
.prose { max-width: var(--read); font-size: 17px; }
.prose p { margin-bottom: 1.2em; text-align: justify; hyphens: auto; }
.summary { text-align: justify; hyphens: auto; }

/* Pas de justification pour l'arabe (RTL) — alignement à droite naturel */
html[lang="ar"] .prose p,
html[lang="ar"] .summary,
html[dir="rtl"] .prose p,
html[dir="rtl"] .summary {
  text-align: right;
  hyphens: none;
}

.prose h3 {
  font-family: var(--serif); font-weight: 400; font-size: 24px;
  margin: 2em 0 0.6em; letter-spacing: -0.01em;
}
.prose h4 {
  font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-mute); margin: 2em 0 0.5em;
}
.prose a, .summary a, .article-head a, aside dd a, .contemp-row a, .contemp-row p a, .footer a, footer a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 3px;
}
.prose a:hover, .summary a:hover, .article-head a:hover, aside dd a:hover, .contemp-row a:hover, .contemp-row p a:hover, footer a:hover { text-decoration-color: var(--accent); }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }
.prose blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: 20px; line-height: 1.5; color: var(--ink-soft);
  border-left: 1px solid var(--accent);
  padding: 8px 0 8px 28px; margin: 1.6em 0;
}

/* ---- Hero quote (passage emblématique répété sur le site) ---- */
.prose blockquote.hero-quote {
  font-family: var(--serif);
  font-style: normal;
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
  background: linear-gradient(to right, rgba(160, 122, 74, 0.06), rgba(160, 122, 74, 0.02));
  border-left: 3px solid var(--accent);
  padding: 28px 32px;
  margin: 2.2em 0;
}
.prose blockquote.hero-quote p { margin: 0 0 12px; }
.prose blockquote.hero-quote p:last-child { margin: 0; }
.prose blockquote.hero-quote .hero-quote-tagline {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 18px;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 14px;
}
.prose blockquote.hero-quote strong { font-weight: 500; color: var(--accent); }

@media (max-width: 720px) {
  .prose blockquote.hero-quote { font-size: 18px; padding: 22px 20px; }
  .prose blockquote.hero-quote .hero-quote-tagline { font-size: 16px; }
}

.prose ul, .prose ol { padding-left: 1.4em; margin: 1em 0 1.4em; }
.prose li { margin-bottom: 0.4em; }

/* ---- Figures ---- */
figure { margin: 2.4em 0; break-inside: avoid; }
figure img {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper-pure);
}
figure.wide {
  margin-left: calc(-1 * (100% - var(--read)) / 2);
  margin-right: calc(-1 * (100% - var(--read)) / 2);
  width: auto; max-width: 920px;
}
@media (max-width: 800px) { figure.wide { margin-left: 0; margin-right: 0; } }
figcaption {
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-mute); line-height: 1.55;
  padding: 12px 0 0; font-style: italic;
}
figcaption strong { color: var(--ink); font-style: normal; font-weight: 500; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin: 2em 0;
}
.gallery figure { margin: 0; }
.gallery img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ---- Timeline ---- */
.timeline { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 900px; }
.timeline-row {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 40px; padding: 24px 0;
  border-top: 1px solid var(--line);
}
.timeline-row:last-child { border-bottom: 1px solid var(--line); }
.timeline-row .when {
  font-family: var(--mono); font-size: 13px;
  color: var(--accent); font-weight: 500; padding-top: 4px;
}
.timeline-row .what h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: 19px; margin-bottom: 6px; letter-spacing: -0.005em;
}
.timeline-row .what p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
@media (max-width: 640px) { .timeline-row { grid-template-columns: 1fr; gap: 6px; } }

/* ---- Cartes ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.card {
  background: var(--paper-pure); padding: 28px 26px;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--ink);
  transition: background .15s; min-height: 220px;
}
.card:hover { background: var(--paper); }
.card .years {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--ink-mute); text-transform: uppercase;
}
.card h3 {
  font-family: var(--serif); font-weight: 400; font-size: 22px;
  letter-spacing: -0.01em; line-height: 1.15;
}
.card p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-top: auto; }
.card .arrow {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--accent); margin-top: 14px;
}

/* ---- Faits ---- */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px; padding: 50px 0 30px; border-top: 1px solid var(--line);
}
.fact .num {
  font-family: var(--serif); font-weight: 300;
  font-size: 56px; line-height: 1;
  letter-spacing: -0.03em; color: var(--accent);
  display: block; margin-bottom: 8px;
}
.fact .lab { font-size: 13px; color: var(--ink-soft); line-height: 1.4; max-width: 22ch; }

/* ---- Téléchargement PDF ---- */
.pdf-download {
  display: flex; align-items: center; gap: 24px;
  margin: 30px 0 0;
  padding: 26px 32px;
  border: 1px solid var(--line);
  background: var(--paper-pure);
  border-radius: 2px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pdf-download:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.pdf-download .pdf-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: var(--paper-pure);
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 2px;
}
.pdf-download .pdf-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.pdf-download .pdf-title {
  display: block;
  font-family: var(--serif);
  font-size: 20px; font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 4px;
}
.pdf-download .pdf-meta {
  display: block;
  font-size: 13px; color: var(--ink-mute);
  line-height: 1.4;
}
.pdf-download .pdf-arrow {
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--accent);
  transition: transform 0.15s ease;
}
.pdf-download:hover .pdf-arrow { transform: translateX(4px); }
a.pdf-download { text-decoration: none; }
@media (max-width: 720px) {
  .pdf-download { padding: 18px 20px; gap: 16px; }
  .pdf-download .pdf-icon { width: 44px; height: 44px; font-size: 10px; }
  .pdf-download .pdf-title { font-size: 16px; }
  .pdf-download .pdf-meta { font-size: 12px; }
}

/* ---- Footer ---- */
footer.site {
  border-top: 1px solid var(--line); background: var(--paper-pure);
  padding: 60px 0 40px; margin-top: 80px;
}
footer .inner {
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px;
}
footer h4 {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-mute); margin-bottom: 14px;
}
footer p, footer a { font-size: 14px; color: var(--ink-soft); line-height: 1.6; text-decoration: none; }
footer a:hover { color: var(--accent); }
footer ul { list-style: none; }
footer li { margin-bottom: 6px; }
.foot-note {
  max-width: var(--max); margin: 40px auto 0; padding: 24px 32px 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute); letter-spacing: 0.05em;
}
@media (max-width: 720px) { footer .inner { grid-template-columns: 1fr; } }

/* ---- Article ---- */
.article-head {
  padding: 80px 0 50px;
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 200px 1fr; gap: 60px;
}
.article-head .meta {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-mute); text-transform: uppercase;
  letter-spacing: 0.1em; line-height: 1.8;
}
.article-head h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.05;
  letter-spacing: -0.025em; margin-bottom: 22px;
}
.article-head .dates {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--ink-soft); font-weight: 300;
}
.article-head .summary {
  font-family: var(--serif); font-size: 21px; line-height: 1.5;
  color: var(--ink-soft); font-weight: 300; margin-top: 22px; max-width: 50ch;
}
@media (max-width: 720px) { .article-head { grid-template-columns: 1fr; gap: 20px; } }

article.body {
  padding: 60px 0;
  display: grid; grid-template-columns: 200px minmax(0, var(--read)); gap: 60px;
}
article.body aside {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-mute); line-height: 1.7;
  text-transform: uppercase; letter-spacing: 0.08em;
}
article.body aside dt { margin-top: 14px; color: var(--ink-mute); }
article.body aside dd {
  color: var(--ink); margin-bottom: 4px;
  font-family: var(--sans); text-transform: none;
  letter-spacing: 0; font-size: 14px;
}
@media (max-width: 720px) { article.body { grid-template-columns: 1fr; gap: 30px; } }

/* ---- Sources ---- */
.sources {
  background: var(--paper-pure); border: 1px solid var(--line);
  padding: 30px 32px; margin: 40px 0; font-size: 14px;
}
.sources h4 {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-mute); margin-bottom: 14px;
}
.sources ul { list-style: none; padding: 0; }
.sources li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.sources li:last-child { border-bottom: none; }
.sources cite { font-style: italic; }

/* ---- Address hero ---- */
.address-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding: 60px 0;
  border-top: 1px solid var(--line);
  align-items: end;
}
.address-block .coord {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-mute); letter-spacing: 0.05em; line-height: 1.8;
}
.address-block address {
  font-family: var(--serif); font-style: normal;
  font-size: 28px; line-height: 1.3; font-weight: 300; letter-spacing: -0.01em;
}
@media (max-width: 640px) { .address-block { grid-template-columns: 1fr; gap: 20px; } }

/* ---- Tableau ---- */
table.census {
  width: 100%; border-collapse: collapse;
  font-size: 14px; margin: 1.6em 0;
}
table.census th {
  text-align: left;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-mute); font-weight: 400;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--ink);
}
table.census td {
  padding: 8px 14px 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
table.census td:first-child { color: var(--ink); font-weight: 500; }

/* ---- Pull-quote ---- */
.pull-quote {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.3; color: var(--ink);
  letter-spacing: -0.01em;
  padding: 50px 0; max-width: 900px;
}
.pull-quote em { font-style: italic; color: var(--accent); }
.pull-quote cite {
  display: block; font-family: var(--mono);
  font-size: 12px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.12em;
  font-style: normal; margin-top: 20px;
}

/* ---- Index des chapitres ---- */
.toc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0; border: 1px solid var(--line); margin: 30px 0;
}
.toc a {
  padding: 22px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-pure);
  color: var(--ink); text-decoration: none;
  display: flex; flex-direction: column; gap: 4px;
  transition: background .15s;
}
.toc a:hover { background: var(--paper); }
.toc a .ch {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute); letter-spacing: 0.1em;
  text-transform: uppercase;
}
.toc a strong {
  font-family: var(--serif); font-weight: 400; font-size: 17px;
  color: var(--ink); letter-spacing: -0.005em;
}

/* ============== IMAGES ============== */
figure { margin: 2.5em 0; }
figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
}
figure figcaption {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-top: 14px;
  line-height: 1.6;
  max-width: 60ch;
}
figure figcaption em {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.hero-image {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: 60vh;
  min-height: 380px;
  max-height: 580px;
  overflow: hidden;
  position: relative;
  margin-top: 30px;
  margin-bottom: 0;
}
.hero-image img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; filter: contrast(1.02);
}
.hero-image .credit {
  position: absolute; bottom: 12px; right: 16px;
  font-family: var(--mono); font-size: 10px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.1em; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.img-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin: 2.5em 0;
}
.img-pair figure { margin: 0; }
@media (max-width: 640px) { .img-pair { grid-template-columns: 1fr; } }
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px; margin: 30px 0;
}
.gallery figure { margin: 0; }
.gallery figure img { aspect-ratio: 4/5; object-fit: cover; }

/* ============== NOTE / AVERTISSEMENT ============== */
.note {
  background: var(--paper-pure);
  border-left: 3px solid var(--accent);
  padding: 18px 24px; margin: 30px 0;
  font-size: 14px; color: var(--ink-soft);
  line-height: 1.6;
}
.note strong { color: var(--ink); }

/* ============== CONTEMPORAINS ============== */
.contemporains-list {
  margin: 30px 0;
  border-top: 1px solid var(--line);
}
.contemp-row {
  display: grid;
  grid-template-columns: 240px 1fr 140px;
  gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.contemp-row .name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.contemp-row .name span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-top: 6px;
  font-weight: 400;
}
.contemp-row .portrait {
  margin: 14px 0 0 0;
  max-width: 200px;
}
.contemp-row .portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  filter: grayscale(0);
}
.contemp-row .portrait figcaption {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-top: 8px;
  line-height: 1.4;
}
.contemp-row p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.contemp-row .where {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-align: right;
  padding-top: 6px;
}
@media (max-width: 720px) {
  .contemp-row { grid-template-columns: 1fr; gap: 8px; }
  .contemp-row .where { text-align: left; }
}

/* ============== Sous-section ============== */
.subsection-head {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 50px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* ============== LANGUAGE SWITCHER ============== */
.lang-switcher {
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-left: 24px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
  align-items: center;
}
.lang-switcher a {
  color: var(--ink-mute);
  text-decoration: none;
}
.lang-switcher a:hover { color: var(--accent); }
.lang-switcher a.active {
  color: var(--accent);
  font-weight: 500;
}
@media (max-width: 900px) {
  .lang-switcher {
    margin-left: 0; padding-left: 0; border-left: none;
    border-top: 1px solid var(--line);
    width: 100%; padding-top: 14px; margin-top: 4px;
    flex-wrap: wrap;
  }
}

/* ============== TRANSPORT SECTION ============== */
.transport-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 60px;
  margin-top: 16px;
}
.transport-col h4 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.transport-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px 14px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft, rgba(0,0,0,0.05));
}
.transport-row:last-child { border-bottom: none; }
.transport-name { font-size: 14px; color: var(--ink); }
.transport-lines {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}
.transport-dist {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* Icones de mode (M/B/N) */
.mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #112;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.02em;
  color: #112;
}
.mode.bus { 
  background: #6E1E78; color: #fff; border-color: #6E1E78;
  font-size: 9px;
}
.mode.noctilien {
  background: #1B0E69; color: #fff; border-color: #1B0E69;
  font-size: 9px;
}

/* Pastilles de ligne (chiffre dans rond coloré) */
.line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 4px;
  border-radius: 50%;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}
/* Lignes de métro Paris - couleurs officielles RATP */
.line-1 { background: #FFCD00; color: #000; }
.line-2 { background: #003CA6; }
.line-3 { background: #837902; }
.line-4 { background: #CF009E; }
.line-5 { background: #FF7E2E; }
.line-6 { background: #6ECA97; color: #000; }
.line-7 { background: #FA9ABA; color: #000; }
.line-8 { background: #E19BDF; color: #000; }
.line-9 { background: #B6BD00; color: #000; }
.line-10 { background: #C9910D; }
.line-11 { background: #704B1C; }
.line-12 { background: #007852; }
.line-13 { background: #6EC4E8; color: #000; }
.line-14 { background: #62259D; }
/* Bus - couleurs jaunes/orange selon usage */
.line-bus { background: #FFCC00; color: #000; }
/* Noctilien - bleu foncé */
.line-n { background: #1B0E69; }

@media (max-width: 720px) {
  .transport-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============== GPS / OPEN MAP BUTTON ============== */
.gps-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: none;
  margin-top: 12px;
  transition: all 0.15s ease;
}
.gps-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.gps-btn::before {
  content: '◉';
  font-size: 14px;
}
.gps-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============== RESPONSIVE MOBILE COMPLET ============== */
/* Phones - portrait et landscape */
@media (max-width: 768px) {
  /* Header */
  .nav-inner {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .brand { font-size: 18px; text-align: center; }
  header.site nav { width: 100%; }
  header.site nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 12px;
  }

  /* Hero */
  .hero { padding: 30px 20px; }
  .hero h1 {
    font-size: 32px;
    line-height: 1.15;
  }
  .hero .lede { font-size: 15px; line-height: 1.55; }
  .hero .eyebrow { font-size: 10px; }
  .address-block { 
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }

  /* Hero image */
  .hero-image img { aspect-ratio: 4/3; }

  /* Bloc général */
  .block { padding: 36px 20px; }
  .block-head { margin-bottom: 24px; }
  .block-head h2 { font-size: 24px; line-height: 1.2; }
  .block-head .label { font-size: 10px; }

  /* Faits chiffrés - empiler */
  .facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .facts .num { font-size: 28px; }
  .facts .lab { font-size: 11px; }

  /* Cards artistes */
  .cards { 
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cards a { padding: 20px; }
  .cards .years { font-size: 10px; }
  .cards h3 { font-size: 18px; }
  .cards p { font-size: 14px; }

  /* Timeline */
  .timeline-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 0;
  }
  .timeline-row .when {
    text-align: left;
    font-size: 11px;
  }
  .timeline-row h3 { font-size: 16px; }
  .timeline-row p { font-size: 14px; }

  /* Article body : passer en colonne unique */
  article.body {
    grid-template-columns: 1fr;
    padding: 30px 20px;
    gap: 32px;
  }
  article.body aside {
    border: 1px solid var(--line);
    padding: 16px;
    border-radius: 8px;
  }
  article.body aside dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
  }
  article.body .prose { font-size: 15px; line-height: 1.65; }
  article.body .prose h3 { font-size: 19px; margin-top: 28px; }
  article.body .prose figure { margin: 22px 0; }
  article.body .prose figure img { width: 100%; }
  article.body .prose figcaption { font-size: 12px; }

  /* Article head */
  .article-head {
    grid-template-columns: 1fr;
    padding: 30px 20px 20px;
    gap: 16px;
  }
  .article-head .meta { font-size: 11px; }
  .article-head h1 { font-size: 32px; line-height: 1.1; }
  .article-head .summary { font-size: 15px; }

  /* Image-pair */
  .img-pair { 
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Sources */
  .sources ul { padding-left: 18px; }
  .sources li { font-size: 13px; line-height: 1.55; padding: 5px 0; }

  /* Footer */
  footer.site .inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 20px;
  }

  /* Contemp rows */
  .contemp-row { padding: 16px 0; }
  .contemp-row .name { font-size: 15px; }
  .contemp-row p { font-size: 14px; }

  /* Subsection head */
  .subsection-head {
    margin: 36px 0 8px;
    font-size: 10px;
  }
}

/* Très petits écrans (320-380px) */
@media (max-width: 380px) {
  .hero h1 { font-size: 26px; }
  .article-head h1 { font-size: 26px; }
  .block-head h2 { font-size: 20px; }
  .facts { grid-template-columns: 1fr; }
  .facts .num { font-size: 32px; }
  .lang-switcher {
    gap: 10px;
    font-size: 10px;
  }
}

/* Mode paysage sur téléphone (hauteur faible) */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 20px; }
  .hero h1 { font-size: 28px; }
  .block { padding: 24px 20px; }
  .article-head { padding: 24px 20px 16px; }
}

/* ========================================================================
   Archive figures — utilisé pour les documents primaires (Cwejbak, Manet, etc.)
   ======================================================================== */
.archive-fig {
  margin: 2rem 0 2.5rem;
  padding: 0;
}
.archive-fig img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #f7f5f0;
}
.archive-fig figcaption {
  margin-top: 0.75rem;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
  font-style: italic;
  padding-left: 0.5rem;
  border-left: 2px solid rgba(0, 0, 0, 0.15);
}
.archive-fig figcaption strong {
  font-style: normal;
  color: var(--ink);
}
.archive-fig figcaption em {
  font-style: italic;
}
.archive-fig figcaption .archive-source {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

/* ---- Tables : scroll horizontal sur mobile, jamais d'overflow page ---- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1em 0;
}
.table-wrap table {
  min-width: 100%;
}

/* === Infobox de la conclusion === */
.infobox-conclusion {
  background: #f4ede1;
  border-left: 4px solid #8b1a1a;
  padding: 20px 24px;
  margin: 24px 0;
}
.infobox-conclusion .label-conclusion {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 0.75em;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8b1a1a;
  margin: 0 0 12px 0;
}
.infobox-conclusion p:last-child {
  margin-bottom: 0;
}

/* h4 avec ▸ rouge pour la conclusion */
.prose h4 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.1em;
  margin: 24px 0 8px 0;
  color: #1a1a1a;
}

/* === Encart « rayonnement » en tête de la section § 03 === */
.encart-rayonnement {
  background: #f4ede1;
  border-left: 4px solid #8b1a1a;
  padding: 22px 28px;
  margin: 0 0 40px 0;
}
.encart-rayonnement p {
  margin: 0;
  font-size: 1.02em;
  line-height: 1.7;
  font-family: 'Fraunces', Georgia, serif;
}
.encart-rayonnement .lead {
  font-weight: 600;
  font-style: italic;
  font-size: 1.1em;
  display: block;
  margin-bottom: 6px;
  color: #1a1a1a;
}

/* ========================================================================
   REFONTE 2026 — retouches cosmétiques (menu, contraste, survols, mobile)
   Rien ne bouge au défilement ni au chargement : seules les réactions
   au survol, au clic et au focus.
   ======================================================================== */
:root {
  --paper-tint: #f4efe6;
  --line-strong: #d6d1c7;
  --m-in: 140ms; --m-out: 200ms; --m-image: 600ms;
  --m-ease: cubic-bezier(.2,.8,.2,1);
}

/* ---- Titres : lignes équilibrées, pas de mot orphelin ---- */
h1, h2, h3 { text-wrap: balance; }

/* ---- En-tête : même papier que la page ---- */
header.site { background: rgba(251,250,247,0.94); }
.nav-inner { align-items: center; }
nav ul { gap: 22px; }
.nav-toggle { display: none; }
@media (min-width: 901px) {
  header.site nav#site-nav { display: flex; align-items: center; flex-wrap: nowrap; }
  header.site nav#site-nav ul { flex-wrap: nowrap; white-space: nowrap; }
  .lang-switcher { margin-left: 20px; padding-left: 20px; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  header.site nav#site-nav ul { gap: 14px; font-size: 13px; }
  .lang-switcher { margin-left: 14px; padding-left: 14px; gap: 10px; }
  .nav-inner { gap: 20px; padding: 16px 24px; }
}

/* Liens du menu : un trait qui se dessine, une barre sous la page courante */
header.site nav ul a {
  display: inline-block; padding: 4px 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color var(--m-in) var(--m-ease), background-size var(--m-out) var(--m-ease);
}
header.site nav ul a:hover { color: var(--ink); background-size: 100% 1px; }
header.site nav ul a[aria-current="page"] {
  color: var(--accent);
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 2px no-repeat;
}
.lang-switcher a { transition: color var(--m-in) var(--m-ease); }

/* ---- Focus clavier ---- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1px;
  transition: outline-offset var(--m-out) var(--m-ease);
}

/* ---- Liens dans le texte : filet discret, trait d'encre qui se dessine ---- */
.prose a, .summary a, .article-head a, aside dd a, .contemp-row a, footer a {
  text-decoration: none;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size var(--m-out) var(--m-ease), color var(--m-in) var(--m-ease);
}
.prose a:hover, .summary a:hover, .article-head a:hover, aside dd a:hover, .contemp-row a:hover, footer a:hover {
  color: var(--accent);
  background-size: 100% 1px, 100% 1px;
}
.prose a.pdf-download, .prose a.card, .prose a.gallery-teaser { background: var(--paper-pure); padding-bottom: 0; }

/* ---- Cartes et encadrés cliquables : une seule famille ---- */
.card, .pdf-download, .gallery-teaser {
  position: relative;
  transition: transform 180ms var(--m-ease), box-shadow 180ms var(--m-ease),
              border-color var(--m-in) var(--m-ease), background var(--m-in) var(--m-ease);
}
.card:hover { background: var(--paper-pure); }
a.card:hover, .pdf-download:hover, .gallery-teaser:hover {
  transform: translateY(-2px); z-index: 1;
  box-shadow: 0 10px 24px rgba(26,26,26,0.08);
}
.pdf-download:hover { border-color: var(--line-strong); }
.card .arrow, .pdf-download .pdf-arrow { display: inline-block; transition: transform var(--m-in) var(--m-ease); }
a.card:hover .arrow, .pdf-download:hover .pdf-arrow { transform: translateX(3px); }
.card h3 { transition: color var(--m-in) var(--m-ease); }
a.card:hover h3 { color: var(--accent); }
.gallery-teaser { background: var(--paper-tint); }
.gallery-teaser:hover { background: var(--paper-tint); }
.gallery-teaser-grid img { transition: transform var(--m-image) var(--m-ease); }

/* Photos dans un lien : léger zoom dans leur cadre */
a > img, a > picture > img { transition: transform var(--m-image) var(--m-ease); }
figure > a { display: block; overflow: hidden; }
figure > a:hover > img, figure > a:hover > picture > img { transform: scale(1.03); }

/* ---- Citations : un seul style ---- */
.prose blockquote { border-left: 2px solid var(--accent); }
.prose blockquote.hero-quote { background: var(--paper-tint); border-left-width: 2px; }

/* ---- Accueil : rythme et chiffres clés ---- */
.hero { padding: 80px 32px 56px; }
.facts { gap: 28px 32px; padding: 44px 0 24px; }
.fact .lab { color: var(--ink-soft); }

/* ---- Tablette et mobile : menu plein écran ---- */
@media (max-width: 900px) {
  header.site { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  .nav-inner {
    flex-direction: row !important; flex-wrap: nowrap;
    justify-content: space-between; align-items: center;
    gap: 16px; padding: 14px 20px !important;
  }
  .brand { font-size: 18px; text-align: left; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink); background: transparent;
    border: 1px solid var(--line-strong); border-radius: 2px;
    padding: 10px 14px; min-height: 40px; cursor: pointer;
    transition: background var(--m-in) var(--m-ease), border-color var(--m-in) var(--m-ease), transform 90ms var(--m-ease);
  }
  .nav-toggle:hover { background: var(--paper-tint); border-color: var(--ink-mute); }
  .nav-toggle:active { transform: scale(.985); }
  header.site nav#site-nav {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--hdr-h, 69px);
    background: var(--paper); overflow-y: auto;
    padding: 12px 20px 32px; width: auto;
    border-top: 1px solid var(--line);
  }
  html.nav-open header.site nav#site-nav { display: flex; flex-direction: column; }
  html.nav-open body { overflow: hidden; }
  header.site nav#site-nav ul {
    flex-direction: column; flex-wrap: nowrap; gap: 0 !important;
    justify-content: flex-start; font-size: 22px;
  }
  header.site nav#site-nav ul li { border-bottom: 1px solid var(--line); }
  header.site nav#site-nav ul a {
    display: block; padding: 14px 0;
    font-family: var(--serif); font-weight: 400; color: var(--ink);
  }
  header.site nav#site-nav ul a[aria-current="page"] { color: var(--accent); background-size: 0 0; }
  .lang-switcher {
    border-top: none !important; margin: 20px 0 0 !important; padding: 0 !important;
    gap: 22px !important; font-size: 13px !important;
  }
}

/* ---- Lecture sur mobile ---- */
@media (max-width: 720px) {
  .prose, article.body .prose { font-size: 17px; line-height: 1.65; }
  .prose p, .summary { text-align: left; }
  article.body .prose figcaption, figcaption { font-size: 13px; }
  .hero .lede { font-size: 18px; line-height: 1.5; }
  .hero h1 { font-size: 36px; }
  .article-head .summary { font-size: 17px; }
  .timeline-row .what p, .timeline-row p { font-size: 15px; }
  .card p, .cards p { font-size: 15px; }
  .facts { grid-template-columns: 1fr 1fr !important; gap: 24px 20px; }
  .facts .num, .fact .num { font-size: 40px; }
  .facts .lab, .fact .lab { font-size: 13px; }
}

/* ---- Une seule marge latérale sur mobile : 20px partout ---- */
@media (max-width: 768px) {
  main { padding-left: 20px; padding-right: 20px; }
  .hero { padding-left: 20px !important; padding-right: 20px !important; }
  main section.block, main .block { padding-left: 0; padding-right: 0; }
  main .article-head, main article.body { padding-left: 0; padding-right: 0; }
  .article-head h1 { font-size: 34px !important; line-height: 1.1; }
  .hero h1 { font-size: 36px !important; }
  .block-head h2 { font-size: 26px !important; }
  .lang-switcher a { padding: 8px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* ---- Pied de page : ligne légale ---- */
.legal-line {
  max-width: var(--max); margin: 0 auto; padding: 18px 32px 28px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-mute);
}
@media (max-width: 768px) { .legal-line { padding: 16px 20px 24px; } }
mark.todo { background: #fbe9b7; color: var(--ink); padding: 0 4px; font-family: var(--mono); font-size: .85em; }
.prose h2 {
  font-family: var(--serif); font-weight: 400; font-size: 30px;
  letter-spacing: -0.015em; line-height: 1.15; margin: 1.8em 0 .5em;
}
.prose > h2:first-child { margin-top: 0; }

/* ---- Chinois : polices du système ---- */
html[lang="zh"] { --sans: 'IBM Plex Sans', "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; --serif: 'Fraunces', "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; }

/* ---- Questions fréquentes (visibles, identiques aux données FAQPage) ---- */
.faq-block { margin: 56px 0 8px; padding-top: 32px; border-top: 1px solid var(--line); }
.faq-block > h2 { margin-top: 0; }
.faq-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.3; margin: 0 0 8px; letter-spacing: -0.005em; }
.faq-item p { margin: 0; color: var(--ink-soft); }
section.faq-block.block { margin: 0; padding-top: 70px; border-top: none; }

/* ---- Formulaire de contact ---- */
.contact-form { display: grid; gap: 18px; max-width: 560px; }
.contact-form label { display: grid; gap: 6px; }
.contact-form label > span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.contact-form input, .contact-form select, .contact-form textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--paper-pure);
  border: 1px solid var(--line-strong); border-radius: 2px; padding: 12px 14px; width: 100%;
  transition: border-color var(--m-in) var(--m-ease), box-shadow var(--m-in) var(--m-ease);
}
.contact-form textarea { resize: vertical; min-height: 160px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,26,26,.12);
}
.contact-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-btn {
  justify-self: start; font: 500 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-pure); background: var(--accent); border: 1px solid var(--accent); border-radius: 2px;
  padding: 14px 22px; min-height: 44px; cursor: pointer;
  transition: background var(--m-in) var(--m-ease), transform 90ms var(--m-ease);
}
.contact-btn:hover { background: #6f1414; transform: translateY(-1px); }
.contact-btn:active { transform: translateY(1px) scale(.985); }
.contact-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.contact-etat { min-height: 1.4em; margin: 0; font-size: 15px; }
.contact-etat.ok { color: #2f6b3a; }
.contact-etat.erreur { color: var(--accent); }
.contact-note { font-size: 13px; color: var(--ink-mute); margin: 0; }
@media (max-width: 720px) { .contact-btn { justify-self: stretch; } }