/* ════════════════════════════════════════════════════════════════════════
   article.css — mise en page commune aux pages d'articles de l'annexe
   (pages « article-*.html »). N'altère pas le système graphique global
   (style.css) : ne fait que styler le chrome propre aux articles et la prose.
   Toutes les valeurs reprennent les variables :root de style.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Composants repris de l'annexe ─── */
.sect-label { display: inline-flex; align-items: center; gap: 14px; font-family: 'Ubuntu Mono', monospace; font-size: 11px; letter-spacing: .2em; color: var(--rouge); text-transform: uppercase; }
.sect-label .num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1.5px solid var(--rouge); border-radius: 50%; font-size: 10.5px; font-weight: 700; }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; font-family: 'Ubuntu Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; border: 1.5px solid var(--noir); background: var(--noir); color: var(--parchemin); transition: background .2s, border-color .2s, color .2s, transform .25s var(--ease); white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--rouge); border-color: var(--rouge); transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--noir); }
.btn.ghost:hover { background: var(--noir); color: var(--parchemin); border-color: var(--noir); }

/* ─── HERO (bandeau de l'article) ─── */
.ar-hero { padding: 120px 40px 48px; background: var(--parchemin); border-bottom: 2px solid var(--noir); }
.ar-hero-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; font-family: 'Ubuntu Mono', monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-moy); padding-bottom: 22px; border-bottom: 1px solid rgba(10,10,10,.15); }
.ar-hero-meta a { color: var(--rouge); }
.ar-hero-meta .ph { color: var(--rouge); }
.ar-kicker { font-family: 'Ubuntu Mono', monospace; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--rouge); margin: 56px 0 22px; }
.ar-hero h1 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(40px, 6vw, 96px); line-height: .94; letter-spacing: -.03em; color: var(--noir); margin-bottom: 28px; }
.ar-hero h1 em { color: var(--rouge); font-style: italic; }
.ar-sub { max-width: 760px; font-size: 17px; line-height: 1.6; color: var(--anthracite); }
.ar-sub em { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1.08em; }
.ar-ref { margin-top: 22px; font-family: 'Ubuntu Mono', monospace; font-size: 11px; letter-spacing: .06em; line-height: 1.8; color: var(--gris-moy); }
.ar-ref .ph { color: var(--rouge); }

/* ─── CORPS DE L'ARTICLE (prose) ─── */
.ar-body { padding: 64px 40px 80px; background: var(--parchemin); }
.ar-prose { max-width: 720px; margin: 0 auto; color: var(--anthracite); font-size: 17px; line-height: 1.75; }
.ar-prose > p { margin: 0 0 1.35em; }
/* Le premier paragraphe garde une couleur légèrement plus dense, mais la MÊME
   taille que le reste du corps (uniformité demandée par le propriétaire). */
.ar-prose > p:first-child { color: var(--noir); }
.ar-prose h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -.02em; color: var(--noir); margin: 2.2em 0 .7em; }
.ar-prose h3 { font-family: 'Ubuntu', sans-serif; font-weight: 500; font-size: 20px; color: var(--noir); margin: 1.8em 0 .6em; }
/* Titres de sections issus de la conversion (h4) et sous-titres en gras (h5) :
   harmonisés pour qu'aucun n'apparaisse plus petit que les autres. */
.ar-prose h4 { font-family: 'Ubuntu', sans-serif; font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--noir); margin: 2em 0 .6em; }
.ar-prose h5 { font-family: 'Ubuntu', sans-serif; font-weight: 700; font-size: 17px; color: var(--noir); margin: 1.7em 0 .5em; }
.ar-prose h2 em, .ar-prose h3 em { color: var(--rouge); font-style: italic; }
.ar-prose a { color: var(--rouge); border-bottom: 1px solid rgba(204,0,0,.4); transition: border-color .2s; word-break: break-word; }
.ar-prose a:hover { border-color: var(--rouge); }
.ar-prose strong { color: var(--noir); font-weight: 700; }
.ar-prose em { font-style: italic; }
.ar-prose ul, .ar-prose ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.ar-prose li { margin-bottom: .5em; }
.ar-prose blockquote { margin: 1.6em 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--rouge); font-family: 'Instrument Serif', serif; font-style: italic; font-size: 21px; line-height: 1.4; color: var(--noir); }
.ar-prose sup { font-size: .68em; }
.ar-prose sup a { border: none; color: var(--rouge); font-weight: 700; }
/* Paragraphes distingués alignés à droite (titres d'œuvre, citations, signatures). */
.ar-prose .align-right { text-align: right; }
/* Paragraphes centrés (séparateurs « * »). */
.ar-prose .align-center { text-align: center; }
/* Une citation à droite et son auteur (lui aussi à droite) sont rapprochés :
   on supprime l'essentiel de l'interligne entre deux paragraphes consécutifs alignés à droite. */
.ar-prose .align-right + .align-right { margin-top: -1em; }

/* Figures / images d'article */
.ar-prose figure { margin: 2.2em 0; }
/* Toute image de prose (mammoth enveloppe les images dans <p>) : pleine largeur. */
.ar-prose img { display: block; width: 100%; height: auto; margin: 2.2em auto; border: 1px solid rgba(10,10,10,.12); background: var(--parchemin-3); }
.ar-prose figure img { margin: 0; }
.ar-prose figcaption { margin-top: 10px; font-family: 'Ubuntu Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-moy); }

/* Bloc de notes de bas de page (généré par la conversion) */
.ar-prose ol[id$="footnotes"], .ar-prose .ar-notes { margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid rgba(10,10,10,.15); font-size: 13.5px; line-height: 1.6; color: var(--gris-moy); }
.ar-prose ol[id$="footnotes"] li { margin-bottom: .7em; }

/* ─── DOCUMENT (lecteur PDF intégré — cas Terra Forma) ─── */
.ar-doc { padding: 56px 40px 72px; background: var(--parchemin-2); }
.ar-doc-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.ar-doc-note { font-family: 'Ubuntu Mono', monospace; font-size: 10.5px; letter-spacing: .08em; color: var(--gris-moy); text-transform: uppercase; }
.ar-frame { width: 100%; height: 800px; border: 1.5px solid var(--noir); background: var(--parchemin-3); display: block; }

/* ─── PIED ─── */
.ar-foot { padding: 56px 40px 64px; background: var(--noir); color: var(--gris-cl); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; font-family: 'Ubuntu Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; border-top: 1px solid rgba(241,238,231,.12); }
.ar-foot a { transition: color .2s; }
.ar-foot a:hover { color: var(--rouge); }
.ar-foot .links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ─── RESPONSIVE ─── */
@media (max-width: 820px) { .menu-overlay { grid-template-columns: 1fr; } .menu-visual { display: none; } .menu-nav { padding: 96px 20px 40px; } }
@media (max-width: 760px) {
  .header { padding: 12px 18px; }
  .header-link:not(.keep) { display: none; }
  .ar-hero { padding: 92px 20px 40px; }
  .ar-kicker { margin-top: 36px; }
  .ar-body { padding: 48px 20px 64px; }
  .ar-prose { font-size: 16px; }
  .ar-doc { padding: 40px 20px 56px; }
  .ar-frame { height: 70vh; min-height: 460px; }
  .ar-foot { padding: 40px 20px; flex-direction: column; align-items: flex-start; }
}