/* Articles : une feuille de journal en parchemin posée sur la mer bleu nuit du jeu. Même monde que « Le Monde à l’Envers » :
   encre, papier, filets en pixels. Le pixel reste dans les titres (Jersey 10), les illustrations et l’appel à jouer ; le texte
   courant est en Spectral, un caractère de lecture (demande de Romain, 1er octobre 2026). Aucun rayon, flou ni dégradé lisse. */
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/spectral-400italic-latin-ext.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: "Spectral"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/spectral-400italic-latin.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: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/spectral-400-latin-ext.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: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/spectral-400-latin.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; }
:root { --font-reading: "Spectral", Georgia, "Times New Roman", serif; --font-ui: "Barlow", ui-sans-serif, system-ui, sans-serif; }
:root { --paper: #eadfbd; --paper-2: #ddd0a8; --paper-edge: #c9b98a; --print: #1b1408; --print-soft: #4a3a1c; }
* { box-sizing: border-box; }
html { background: var(--night); scrollbar-color: var(--gold-lo) var(--night); }
body.reading { margin: 0; min-height: 100vh; background: var(--night); color: var(--ivory); font: 400 20px/1.65 var(--font-reading); }
.px-art { image-rendering: pixelated; }
a { color: inherit; }

.site-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1080px; margin: 0 auto; padding: 14px clamp(16px, 4vw, 32px); }
.site-logo img { display: block; width: clamp(140px, 18vw, 180px); height: auto; }
.site-bar nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); font: 400 24px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.site-bar nav > a:not(.px-button) { color: var(--parchment); text-decoration: none; }
.site-bar nav > a:not(.px-button):hover, .site-bar nav > a:not(.px-button):focus-visible { color: var(--gold-hi); }
.site-bar .px-button { min-height: 44px; font-size: 22px; padding-inline: calc(var(--px) * 5); }

/* La feuille : papier, double filet d’encre, ombre portée en pixels comme les cadres du jeu. */
.sheet { max-width: 880px; margin: 8px auto 40px; padding: clamp(24px, 5vw, 56px) clamp(18px, 6vw, 72px) clamp(28px, 5vw, 56px); background: var(--paper); color: var(--print); box-shadow: 0 calc(var(--px) * 3) 0 #02060e, inset 0 0 0 calc(var(--px) * 2) var(--paper-edge); }
.sheet ::selection { background: var(--print); color: var(--paper); }
.sheet a { color: var(--print); text-decoration: underline; text-decoration-color: var(--gold-lo); text-decoration-thickness: var(--px); text-underline-offset: 4px; }
.sheet a:hover { text-decoration-color: var(--print); }
.sheet a:focus-visible, .sheet .px-button:focus-visible { outline: var(--px) solid var(--print); outline-offset: var(--px); }

.crumbs { font: 600 15px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.crumbs a { text-decoration: none; }
.crumbs a::before { content: "‹ "; }

.article-head { display: grid; grid-template-columns: minmax(0, 1fr); margin: 18px 0 28px; padding-bottom: 20px; border-bottom: calc(var(--px) * 3) double var(--print); }
.article-sprite { grid-row: 1; width: clamp(64px, 10vw, 96px); height: auto; }
.article-head h1 { grid-row: 1; margin: 0; font: 400 clamp(40px, 6.4vw, 68px)/.92 var(--font-display); letter-spacing: .01em; text-wrap: balance; }
.article-head .lede { grid-column: 1 / -1; margin: 18px 0 0; max-width: 60ch; font: italic 400 22px/1.5 var(--font-reading); color: var(--print-soft); text-wrap: pretty; }
.article-head .byline { grid-column: 1 / -1; margin: 14px 0 0; font: 600 14px/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--print-soft); }
.index-head { grid-template-columns: minmax(0, 1fr); }

/* Le texte : mesure de lecture, respiration plus grande au-dessus des intertitres qu’en dessous. */
.prose { max-width: 66ch; }
.prose > * { margin: 0 0 1em; }
.prose h2 { margin: 1.6em 0 .45em; font: 400 clamp(32px, 4vw, 42px)/1 var(--font-display); letter-spacing: .01em; text-wrap: balance; }
.prose h3 { margin: 1.5em 0 .35em; font: 400 30px/1 var(--font-display); }
.prose p, .prose li { text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .35em; }
.prose li::marker { color: var(--gold-lo); }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }
.prose code { font: 500 .9em/1 var(--font-ui); background: var(--paper-2); padding: 0 .25em; }
.prose .note { margin: 1.4em 0; padding: 14px 18px; background: var(--paper-2); box-shadow: inset 0 0 0 var(--px) var(--print-soft); }
.prose .note p { margin: 0; }

.table { margin: 1.4em 0; overflow-x: auto; }
.prose table { width: 100%; min-width: 560px; border-collapse: collapse; font: 500 16px/1.35 var(--font-ui); font-variant-numeric: tabular-nums; }
.prose th, .prose td { padding: 8px 12px 8px 0; text-align: left; vertical-align: top; border-top: var(--px) solid #1b140840; font-weight: 400; }
.prose thead th { font: 600 13px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--print-soft); border-top: 0; border-bottom: calc(var(--px) * 2) solid var(--print); }
.prose tbody th { font-weight: 600; }

/* Illustration d'ouverture (pixel art agrandi sans lissage) et captures du jeu (lissées), chacune dans un filet d'encre. */
.hero { margin: 0 0 30px; }
.hero img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 var(--px) var(--print); }
.shot { margin: 1.6em 0; }
.shot img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 var(--px) var(--print), 0 calc(var(--px) * 2) 0 calc(var(--px)) #1b140833; }
.shot figcaption { margin-top: 10px; font: 500 15px/1.45 var(--font-ui); color: var(--print-soft); }

/* Appel à jouer : la seule fenêtre de nuit sur la feuille, comme une boîte de dialogue de jeu 16 bits. Un personnage, sa bulle,
   une phrase liée à l'article, le bouton or et son curseur clignotant. */
.cta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 24px; align-items: center; margin: 48px 0 0; padding: 22px clamp(16px, 3vw, 28px); background: var(--night); color: var(--ivory); border: calc(var(--px) * 3) solid transparent; border-image: var(--frame-gold) 3 / calc(var(--px) * 3) stretch; box-shadow: 0 calc(var(--px) * 3) 0 #02060e; }
.cta-portrait { display: block; width: clamp(96px, 16vw, 150px); height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 0 0 var(--px) var(--gold), 0 0 0 calc(var(--px) * 2) #02060e; image-rendering: auto; }
.cta-body { display: grid; gap: 12px; justify-items: start; }
.cta-name { margin: 0; font: 400 26px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.cta-quote { position: relative; margin: 0; padding: 12px 16px; background: var(--ivory); color: var(--ink); box-shadow: 0 0 0 var(--px) var(--ink), 0 calc(var(--px) * 2) 0 var(--px) #02060e; }
.cta-quote::before { content: ""; position: absolute; left: calc(var(--px) * -4); top: 18px; width: calc(var(--px) * 4); height: calc(var(--px) * 4); background: var(--ivory); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.cta-quote p { margin: 0; font: 400 clamp(22px, 2.4vw, 28px)/1.15 var(--font-display); letter-spacing: .01em; text-wrap: balance; }
.cta-line { margin: 0; max-width: 52ch; font: 400 18px/1.5 var(--font-reading); color: var(--parchment); }
.sheet .cta .px-button { color: var(--ink); text-decoration: none; }
.cta .px-cursor { color: var(--ink); }

.more { margin-top: 40px; padding-top: 18px; border-top: calc(var(--px) * 3) double var(--print); }
.more h2 { margin: 0 0 10px; font: 400 30px/1 var(--font-display); }
.more ul { margin: 0; padding-left: 1.2em; }
.more li { margin: 6px 0; }

/* Index : une rangée par article, pas de cartes. */
.article-list { margin: 0; padding: 0; list-style: none; }
.article-list li + li { border-top: var(--px) solid #1b140840; }
.article-list a { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 22px; align-items: start; padding: 24px 0; text-decoration: none; }
.article-list img { width: 216px; height: 144px; box-shadow: 0 0 0 var(--px) var(--print); }
.article-list strong { display: block; font: 400 clamp(30px, 3.6vw, 38px)/1 var(--font-display); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--px); text-underline-offset: 5px; }
.article-list a:hover strong, .article-list a:focus-visible strong { text-decoration-color: var(--gold-lo); }
.article-list small { display: block; margin-top: 8px; max-width: 62ch; font: 400 18px/1.5 var(--font-reading); color: var(--print-soft); }
.article-list time { display: block; margin-top: 10px; font: 600 13px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--print-soft); }

.site-foot { max-width: 880px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px) 40px; font: 500 15px/1.5 var(--font-ui); color: var(--muted); }
.site-foot a { color: var(--parchment); text-decoration-thickness: var(--px); text-underline-offset: 3px; }

@media (max-width: 700px) {
  body.reading { font-size: 18px; }
  .sheet { margin: 4px 0 28px; box-shadow: none; }
  .article-head { grid-template-columns: minmax(0, 1fr); }
  .article-sprite { width: 56px; margin-bottom: 10px; }
  .article-head h1 { grid-row: auto; }
  .article-head .lede { font-size: 19px; }
  .article-list a { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .article-list img { width: 100%; height: auto; }
  .cta { grid-template-columns: minmax(0, 1fr); }
  .cta-portrait { width: 96px; }
  .site-bar nav { font-size: 20px; }
  .site-bar .px-button { font-size: 19px; min-height: 40px; }
}

/* « Données et méthode », page du site : la méthode du jeu posée sur la même feuille que les articles. */
.data-page .data-provenance, .data-page .data-method, .data-page .data-observations { margin: 0 0 36px; }
.data-page .data-provenance p { margin: 0; padding: 14px 18px; background: var(--paper-2); box-shadow: inset 0 0 0 var(--px) var(--print-soft); font-size: 18px; }
.data-page h2 { margin: 0 0 .5em; font: 400 clamp(30px, 3.6vw, 38px)/1 var(--font-display); text-wrap: balance; }
.data-page .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.data-page .section-head span { font: 600 13px/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--print-soft); }
.data-page p, .data-page .data-note { max-width: 66ch; margin: 0 0 1em; font-size: 18px; line-height: 1.6; }
.data-page .assumption-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0 0 1em; }
.data-page .assumption-list div { padding: 10px 14px; background: var(--paper-2); }
.data-page .assumption-list dt { font: 600 13px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--print-soft); }
.data-page .assumption-list dd { margin: 4px 0 0; font: 400 24px/1 var(--font-display); }
.data-page .observation-table { overflow-x: auto; margin: 0 0 1em; }
.data-page table { width: 100%; min-width: 560px; border-collapse: collapse; font: 500 15px/1.35 var(--font-ui); font-variant-numeric: tabular-nums; }
.data-page caption { text-align: left; margin-bottom: 6px; font: 500 14px/1.4 var(--font-ui); color: var(--print-soft); }
.data-page th, .data-page td { padding: 8px 12px 8px 0; text-align: left; vertical-align: top; font-weight: 500; border-top: var(--px) solid #1b140840; }
.data-page thead th { font: 600 12px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--print-soft); border-top: 0; border-bottom: calc(var(--px) * 2) solid var(--print); }
.data-page tbody th { font-weight: 600; }
.data-page td small, .data-page th small { display: block; margin-top: 2px; font-weight: 400; color: var(--print-soft); }
.data-page td a { display: block; }
.data-page details { margin: 10px 0; }
.data-page summary { cursor: pointer; font: 600 15px/1.4 var(--font-ui); letter-spacing: .04em; }
.data-page summary:focus-visible { outline: var(--px) solid var(--print); outline-offset: var(--px); }
.data-page .source-list, .data-page .region-list { margin: 8px 0 0; padding-left: 1.2em; font: 500 15px/1.5 var(--font-ui); }
.data-page .source-list li { margin: 4px 0; }
.data-page .source-list small { margin-left: 8px; color: var(--print-soft); }
.data-play { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 40px; padding: 18px 22px; background: var(--night); color: var(--ivory); border: calc(var(--px) * 3) solid transparent; border-image: var(--frame-gold) 3 / calc(var(--px) * 3) stretch; }
.data-play p { margin: 0 !important; color: var(--parchment); }
.data-play .px-button { color: var(--ink); text-decoration: none; }
.data-page td small { white-space: nowrap; }