/*
Theme Name: Pansémiotique
Theme URI: https://pansemiotique.com
Author: Seobooster LTD
Description: Magazine de décryptage des signes. Chaque photographie porte des repères
  numérotés carrés posés dans l'image ; sous l'image, une légende détachée explique
  chaque repère. Deux encres qui ne se mélangent jamais : cinabre (ce qu'on prête au
  signe) et bleu d'archive (ce qui est documenté). Papier de dictionnaire jauni.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: pansemiotique
*/

/* =======================================================================
   0. Polices — self-hosted, aucune police système (P-086).
   Fichiers attendus dans assets/fonts/ (variables, axes étendus Fraunces).
   ===================================================================== */
@font-face {
	font-family: 'Fraunces';
	src: url('assets/fonts/Fraunces-Roman-VF.woff2') format('woff2-variations'),
	     url('assets/fonts/Fraunces-Roman-VF.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Fraunces';
	src: url('assets/fonts/Fraunces-Italic-VF.woff2') format('woff2-variations'),
	     url('assets/fonts/Fraunces-Italic-VF.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Epilogue';
	src: url('assets/fonts/Epilogue-Roman-VF.woff2') format('woff2-variations'),
	     url('assets/fonts/Epilogue-Roman-VF.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Epilogue';
	src: url('assets/fonts/Epilogue-Italic-VF.woff2') format('woff2-variations'),
	     url('assets/fonts/Epilogue-Italic-VF.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* =======================================================================
   1. Jetons de couleur — clair par défaut, sombre en prefers-color-scheme.
   Trois valeurs de surface en sombre : exigence, pas détail (P-351).
   ===================================================================== */
:root {
	--kiosque: #E8DEC6;
	--feuillet: #FBF8F1;
	--encre: #16130D;
	--encre-douce: #5A5347;
	--cinabre: #B4301D;
	--attestation: #1D4F7C;
	--carre: #100E0B;
	--encre-fixe: #F2EDE2;
	--cinabre-fixe: #F0705A;
	--attestation-fixe: #8FB6DA;

	--conteneur: 1180px;
	--gouttiere: 28px;
}
@media (prefers-color-scheme: dark) {
	:root {
		--kiosque: #1B1813;
		--feuillet: #282219;
		--encre: #EDE7DA;
		--encre-douce: #A39A88;
		--cinabre: #F0705A;
		--attestation: #8FB6DA;
		/* --carre / --encre-fixe / --cinabre-fixe / --attestation-fixe : inchangés */
	}
}

/* =======================================================================
   2. Reset minimal + base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
	margin: 0;
	overflow-x: hidden;
	background: var(--kiosque);
	color: var(--encre);
	font-family: 'Epilogue', Arial, sans-serif;
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
* { border-radius: 0 !important; } /* ⛔ zéro arrondi, partout, sans exception */

a { color: var(--encre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { text-decoration-thickness: 2px; }
/* Correctif 07/09/2026 (VERDICT-DESIGN) : sur les bandes à fond --carre (quasi noir en clair
   comme en sombre), un lien hérite sinon de la règle globale `a{color:var(--encre)}` qui est
   FONCÉE dans les deux thèmes — invisible sur ce fond. Ces bandes utilisent --encre-fixe. */
.bande-accent a, .index-signes a, .bandeau-utilitaire a, .sur-planche a {
	color: var(--encre-fixe);
}

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 144, 'SOFT' 20, 'WONK' 1; margin: 0 0 .5em; color: var(--encre); }
p { margin: 0 0 1.1em; }

.mot-credo, .croyance { color: var(--cinabre); }
.verifie { color: var(--attestation); }
.sur-planche .mot-credo, .sur-planche .croyance,
.bande-accent .mot-credo, .bande-accent .croyance,
.index-signes .mot-credo, .index-signes .croyance,
.bandeau-utilitaire .mot-credo, .bandeau-utilitaire .croyance { color: var(--cinabre-fixe); }
.sur-planche .verifie, .bande-accent .verifie,
.index-signes .verifie, .bandeau-utilitaire .verifie { color: var(--attestation-fixe); }

.conteneur { max-width: var(--conteneur); margin: 0 auto; padding-inline: var(--gouttiere); }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gouttiere); }

/* Bug §6.1 (VERDICT) : l'article touchait les deux bords en 390px. Garde
   explicite, ceinture-et-bretelles au-delà de l'héritage de .conteneur —
   toute page qui pose .conteneur sur son enveloppe d'article est couverte. */
@media (max-width: 640px) {
	.conteneur { padding-inline: 20px; }
}

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Fond fixe (planche/accent) : tous les jetons y sont FIXES, jamais adaptatifs. */
.sur-planche { background: var(--carre); color: var(--encre-fixe); }
.sur-planche a { color: var(--encre-fixe); }
.sur-planche .attestation-fixe, .sur-planche .lien-source { color: var(--attestation-fixe); }

/* =======================================================================
   3. Échelle typographique
   ===================================================================== */
.h1-home { font-weight: 900; font-size: 52px; line-height: 1.08; }
.h1-article { font-weight: 700; font-size: 44px; line-height: 1.12; letter-spacing: -0.015em; }
.h2-bande { font-weight: 700; font-size: 30px; line-height: 1.2; text-transform: none; }
.h3-carte { font-weight: 700; font-size: 20px; line-height: 1.25; }
.chapo { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.5; color: var(--encre-douce); }
.corps-article { font-size: 18px; line-height: 1.65; max-width: 660px; }
.legende-repere { font-family: 'Epilogue'; font-weight: 500; font-size: 15px; line-height: 1.45; color: var(--encre-douce); }
.ligne-attestation { font-family: 'Epilogue'; font-weight: 500; font-size: 13px; letter-spacing: 0.02em; }
.numero-repere-inline { font-variant-numeric: tabular-nums lining-nums; }
.annee-attestation { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: 96px; line-height: 1; font-variant-numeric: tabular-nums; }
.libelle-apparat { font-size: 13px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--encre-douce); }
nav, .bouton, button, input, textarea { font-family: 'Epilogue', Arial, sans-serif; font-size: 15px; letter-spacing: 0.01em; }

@media (max-width: 640px) {
	.h1-home { font-size: 32px; }
	.h1-article { font-size: 30px; }
	.h2-bande { font-size: 22px; }
	.annee-attestation { font-size: 44px; }
	.corps-article { font-size: 17px; }
}

/* =======================================================================
   4. Le repère numéroté (§5.1) — carré cinabre, posé, jamais centré/rond.
   ===================================================================== */
.image-a-reperes { position: relative; }
.image-a-reperes img { width: 100%; }
.repere {
	position: absolute;
	width: 26px; height: 26px;
	background: var(--cinabre);
	color: #fff;
	font-family: 'Epilogue'; font-weight: 600; font-size: 15px;
	display: flex; align-items: center; justify-content: center;
	transform: translate(-50%, -50%);
	line-height: 1;
}
@media (max-width: 640px) {
	.repere:nth-of-type(n+2) { display: none; } /* mobile : 1 repère max par photo (§4 mobile) */
}

.legende-reperes { list-style: none; margin: 10px 0 0; padding: 0; font-family: 'Epilogue'; }
.legende-reperes li { display: flex; gap: 10px; margin-bottom: 6px; }
.legende-reperes .num {
	flex: 0 0 26px; height: 26px; background: var(--carre); color: var(--encre-fixe);
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 15px;
}
.legende-reperes .texte { font-size: 15px; color: var(--encre-douce); }
@media (max-width: 640px) {
	/* la légende passe sous l'image en une seule ligne (§4 mobile) */
	.legende-reperes li:nth-of-type(n+2) { display: none; }
}

/* =======================================================================
   5. La ligne d'attestation — obligatoire sous chaque H1.
   ===================================================================== */
.ligne-attestation {
	display: flex; flex-wrap: wrap; gap: 0;
	border-left: 2px solid var(--attestation);
	padding-left: 14px;
	margin: 18px 0 28px;
}
.ligne-attestation span { padding-right: 10px; margin-right: 10px; border-right: 1px solid var(--encre-douce); }
.ligne-attestation span:last-child { border-right: none; }
.ligne-attestation b { text-transform: uppercase; letter-spacing: 0.09em; font-weight: 500; color: var(--encre-douce); margin-right: 4px; }

/* VERDICT cycle 3 §D1 : en 390, liste verticale, jamais de séparateur orphelin. */
@media (max-width: 640px) {
	.ligne-attestation { flex-direction: column; gap: 6px; }
	.ligne-attestation span { border-right: none; padding-right: 0; margin-right: 0; }
}

/* =======================================================================
   6. En-tête — bandeau utilitaire, logo massif, nav
   ===================================================================== */
.bandeau-utilitaire { background: var(--carre); color: var(--encre-fixe); }
.bandeau-utilitaire .conteneur { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; padding-bottom: 8px; font-size: 13px; letter-spacing: 0.04em; gap: 14px; }
.bandeau-utilitaire form { display: flex; gap: 6px; }
.bandeau-utilitaire input[type=search] { background: transparent; border: 1px solid var(--encre-fixe); color: var(--encre-fixe); padding: 4px 8px; }
.bandeau-utilitaire button { background: transparent; border: 1px solid var(--encre-fixe); color: var(--encre-fixe); padding: 4px 10px; cursor: pointer; }

/* Bug §3.1 (VERDICT) : la date+chapô et le champ de recherche se marchaient
   dessus sous 640px. Empilement propre : texte au-dessus, champ pleine largeur. */
@media (max-width: 640px) {
	.bandeau-utilitaire .conteneur { flex-direction: column; align-items: stretch; gap: 8px; }
	.bandeau-utilitaire .conteneur > span { font-size: 12px; }
	.bandeau-utilitaire form { width: 100%; }
	.bandeau-utilitaire input[type=search] { flex: 1 1 auto; width: 100%; }
}

.logo-masthead { background: var(--kiosque); text-align: center; padding: 22px var(--gouttiere); }
.logo-masthead a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.logo-masthead .wordmark { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: 38px; color: var(--encre); }
.logo-masthead .marque-repere { width: 26px; height: 26px; display: inline-block; flex: 0 0 auto; }

/* Bug §3.2 (VERDICT) : le wordmark touchait les deux bords en 390px. */
@media (max-width: 640px) {
	.logo-masthead { padding: 18px 20px; }
	.logo-masthead .wordmark { font-size: 28px; }
}

.nav-principale { background: var(--kiosque); border-top: 1px solid var(--encre-douce); border-bottom: 1px solid var(--encre-douce); }
.nav-principale__liste { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; margin: 0; padding: 12px 0; }
.nav-principale a { text-decoration: none; padding-bottom: 4px; }
.nav-principale .current-cat a, .nav-principale a[aria-current="page"] { border-bottom: 2px solid var(--encre); }
.nav-mobile-bouton { display: none; }

@media (max-width: 900px) {
	.nav-principale__liste { display: none; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px var(--gouttiere) 16px; }
	.nav-principale__liste.est-ouverte { display: flex; }
	.nav-mobile-bouton {
		display: block; width: 100%; text-align: left; background: none; border: none;
		font-family: 'Epilogue'; font-weight: 500; font-size: 15px; letter-spacing: 0.08em;
		text-transform: uppercase; color: var(--encre); padding: 10px var(--gouttiere); cursor: pointer;
	}
}

/* =======================================================================
   7. LA UNE (bande 4)
   ===================================================================== */
.bande-une { background: var(--kiosque); padding: 40px 0 48px; }
.bande-une .grille { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.une-principale figure { margin: 0; }
.une-principale .h1-home { margin-top: 18px; }
.une-secondaires { display: flex; flex-direction: column; gap: 24px; }
.carte-secondaire figure { margin: 0 0 10px; }
.carte-secondaire img { aspect-ratio: 3/2; object-fit: cover; }
.une-principale img { aspect-ratio: 16/9; object-fit: cover; }

@media (max-width: 900px) {
	.bande-une .grille { grid-template-columns: 1fr; }
}

/* =======================================================================
   8. LES REPÈRES DE LA SEMAINE (bande 5) — carrés fond noir
   ===================================================================== */
.bande-carres { background: var(--carre); color: var(--encre-fixe); padding: 44px 0; }
.bande-carres .h2-bande { color: var(--encre-fixe); margin-bottom: 26px; }
.carres-liste { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.carre-signe figure { margin: 0; aspect-ratio: 1/1; overflow: hidden; }
.carre-signe img { width: 100%; height: 100%; object-fit: cover; }
.carre-signe figcaption { font-size: 14px; margin-top: 8px; color: var(--encre-fixe); opacity: .85; }

@media (max-width: 640px) {
	/* Bug D5 (VERDICT cycle 3) : les vignettes devenaient des portraits plein
	   écran et la légende sortait du cadre. Largeur EXPLICITE en vw plafonnée
	   (≈240px, comme demandé) plutôt qu'un pourcentage du flex qui pouvait mal
	   se résoudre ; aspect-ratio posé directement sur la figure ; légende en
	   `white-space:normal`, 2 lignes maximum, jamais tronquée en plein mot. */
	.carres-liste {
		display: flex; grid-template-columns: none; align-items: flex-start;
		gap: 14px; overflow-x: auto; padding: 0 20px 6px;
		scroll-snap-type: x mandatory; scroll-padding-left: 20px;
	}
	.carre-signe { flex: 0 0 auto; width: 62vw; max-width: 240px; scroll-snap-align: start; }
	.carre-signe figure { width: 100%; aspect-ratio: 1 / 1; }
	.carre-signe figcaption {
		white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
		-webkit-box-orient: vertical; overflow: hidden;
	}
}

/* =======================================================================
   9. ON DIT QUE… (bande 6) — feuillet, 3 colonnes
   ===================================================================== */
.bande-ondit { background: var(--feuillet); padding: 44px 0; }
.ondit-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ondit-item .credo { color: var(--cinabre); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--cinabre); }
.ondit-item .credo::before { content: "On dit que "; color: var(--encre); text-decoration: none; font-weight: 600; }
.ondit-item .documente { color: var(--attestation); margin-top: 10px; display: block; }
.ondit-item .documente::before { content: "Ce qui est documenté : "; color: var(--encre); font-weight: 600; }

@media (max-width: 900px) {
	.ondit-grille { grid-template-columns: 1fr; }
}

/* =======================================================================
   10. MOSAÏQUE DE RUBRIQUES (bande 7)
   ===================================================================== */
.bande-mosaique { background: var(--kiosque); padding: 48px 0; }
.rubrique-bloc { margin-bottom: 46px; }
.rubrique-bloc:last-child { margin-bottom: 0; }
.rubrique-entete { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 20px;}
.rubrique-entete .voir-tout { font-size: 14px; white-space: nowrap; }
/* VERDICT cycle 3 §D4 : une rubrique à 1 ou 2 fiches laissait la grille béer
   (3 colonnes fixes, des trous). `auto-fit` ne crée que le nombre de colonnes
   réellement nécessaire — 1 carte = 1 colonne pleine largeur, jamais un vide. */
.rubrique-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gouttiere); }
.rubrique-grille.avec-marge { grid-template-columns: 220px repeat(auto-fit, minmax(240px, 1fr)); }
.carte-article figure { margin: 0 0 12px; }
.carte-article img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.carte-article .h3-carte a { color: var(--encre); text-decoration: none; }
.carte-article .h3-carte a:hover { text-decoration: underline; }
.carte-article .meta { font-size: 13px; color: var(--encre-douce); margin-top: 6px; }
.marge-nombre { display: flex; flex-direction: column; justify-content: center; }
.marge-nombre .libelle { text-indent: -1.2em; margin-left: 1.2em; font-size: 15px; color: var(--encre-douce); }

@media (max-width: 900px) {
	.rubrique-grille, .rubrique-grille.avec-marge { grid-template-columns: 1fr; }
	.marge-nombre { order: -1; }
	.annee-attestation { text-align: left; }
}
@media (max-width: 640px) {
	/* Bug §3.4 (VERDICT) : le H2 de rubrique et son lien se marchaient dessus. */
	.rubrique-entete { flex-direction: column; align-items: flex-start; gap: 6px; }
	.rubrique-entete .voir-tout { white-space: normal; }
}

/* =======================================================================
   11. BANDE D'ACCENT (bande 8) — une seule, pleine largeur, planche.
   ===================================================================== */
.bande-accent { background: var(--carre); color: var(--encre-fixe); padding: 56px 0; }
.bande-accent .grille { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.bande-accent img { aspect-ratio: 16/9; object-fit: cover; }
.bande-accent .annee-attestation { color: var(--attestation-fixe); }
.bande-accent p { color: var(--encre-fixe); }

@media (max-width: 900px) {
	.bande-accent .grille { grid-template-columns: 1fr; }
}

/* =======================================================================
   12. Encart abonnement (bande 9)
   ===================================================================== */
/* VERDICT cycle 3 §D3 : la newsletter reposait sur --carre, comme la bande
   d'accent au-dessus et l'index en dessous — trois noirs empilés (~1000px)
   effondrent l'alternance de bandes. Elle passe sur --feuillet (la 3e
   surface), adaptative, entre les deux blocs fixes noirs : carré/feuillet/carré. */
.encart-abonnement { background: var(--feuillet); color: var(--encre); padding: 44px 0; text-align: center; }
.encart-abonnement .h2-bande { color: var(--encre); }
.encart-abonnement form { display: inline-flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.encart-abonnement input[type=email] { padding: 10px 12px; border: 1px solid var(--encre-douce); background: var(--kiosque); color: var(--encre); min-width: 260px; }
.encart-abonnement button { padding: 10px 18px; border: 1px solid var(--encre); background: transparent; color: var(--encre); cursor: pointer; }
.encart-abonnement button:hover { background: var(--encre); color: var(--kiosque); }

/* =======================================================================
   13. Index des signes, classé par forme (bande 10 / pied)
   ===================================================================== */
.index-signes { background: var(--carre); color: var(--encre-fixe); padding: 48px 0 20px; }
.index-signes .h2-bande { color: var(--encre-fixe); }
.index-grille { columns: 5; column-gap: var(--gouttiere); }
.index-forme { break-inside: avoid; margin-bottom: 28px; }
/* Bug §1.4/§9 (VERDICT) : le nom de la forme (summary) était masqué en
   permanence à partir de 641px (`display:none`) — le pied semblait n'être
   qu'un titre général suivi de rien. Le libellé de forme est désormais
   TOUJOURS visible, dans les deux gabarits mobile et desktop. */
.index-forme summary {
	cursor: pointer; list-style: none; padding: 0 0 10px;
	font-family: 'Epilogue'; text-transform: uppercase; letter-spacing: 0.09em;
	font-size: 13px; color: var(--attestation-fixe); margin-bottom: 4px;
}
.index-forme summary::-webkit-details-marker { display: none; }
.index-forme summary::marker { content: ''; }
.index-forme summary a { color: inherit; text-decoration: none; }
.index-forme summary a:hover { text-decoration: underline; }
.index-forme ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.index-forme li { margin-bottom: 6px; }
.index-forme li.demo { color: var(--encre-fixe); opacity: .8; }
.index-forme a { color: var(--encre-fixe); text-decoration: none; }
.index-forme a:hover { text-decoration: underline; }
.index-forme .annee { color: var(--attestation-fixe); font-variant-numeric: tabular-nums; }

.colophon { border-top: 1px solid #3a352c; margin-top: 30px; padding: 20px 0; font-size: 13px; color: var(--encre-fixe); opacity: .75; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

@media (max-width: 900px) {
	.index-grille { columns: 2; }
}
@media (max-width: 640px) {
	.index-grille { columns: 1; }
}

/* =======================================================================
   14. Article — bande « attribué à tort » (§5.6)
   ===================================================================== */
.attribue-a-tort { background: var(--feuillet); padding: 26px 28px; margin: 34px 0; }
.attribue-a-tort .titre { text-transform: uppercase; letter-spacing: 0.09em; font-size: 13px; color: var(--encre-douce); margin-bottom: 12px; }
.attribue-a-tort .credo { color: var(--cinabre); text-decoration: line-through; text-decoration-thickness: 2px; }
.attribue-a-tort .documente { color: var(--attestation); display: block; margin-top: 10px; }

/* =======================================================================
   15. Bloc auteur (fin d'article)
   ===================================================================== */
.bloc-auteur { display: flex; gap: 18px; align-items: flex-start; border-top: 1px solid var(--encre-douce); margin-top: 46px; padding-top: 28px; }
/* VERDICT cycle 3 §D2 : pas de portrait fiable => pas de cadre ; le nom et la
   bio prennent alors toute la largeur, jamais un cadre vide/cassé à la place. */
.bloc-auteur.sans-portrait > div { flex: 1 1 100%; }
.bloc-auteur .portrait { width: 84px; height: 84px; flex: 0 0 84px; background: var(--feuillet); }
.bloc-auteur .portrait img { width: 100%; height: 100%; object-fit: cover; }
.bloc-auteur .nom { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 19px; margin: 0 0 2px; }
/* §2.1.3 (direction) : le bleu ne sert JAMAIS d'interface, seulement le
   documenté — un intitulé de poste n'est pas une attestation (VERDICT cycle 2 §2.1). */
.bloc-auteur .role { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--encre-douce); margin: 0 0 8px; }
.bloc-auteur .bio { font-size: 15px; color: var(--encre-douce); max-width: 560px; }

/* =======================================================================
   15bis. Mise en page de l'article — comble la marge morte de §5.5 (VERDICT) :
   l'année d'attestation en 96px et les légendes détachées occupent la marge
   de droite au lieu de laisser ~500px de vide à côté d'une colonne de 640px.
   ===================================================================== */
.article-mise-en-page { display: grid; grid-template-columns: 1fr; gap: 32px; }
.marge-article { display: none; }
@media (min-width: 960px) {
	.article-mise-en-page { grid-template-columns: minmax(0, 700px) 220px; align-items: start; gap: 40px; }
	.marge-article { display: block; position: sticky; top: 28px; }
	.marge-article .annee-attestation { display: block; margin-bottom: 4px; }
	.marge-article .legende-reperes { margin-top: 18px; }
	/* la légende sous l'image ne se répète pas : en desktop, elle vit dans la marge */
	.legende-reperes--mobile { display: none; }
}

/* =======================================================================
   16. Contenu d'article — corps, tableaux, formulaires
   ===================================================================== */
.article-corps a { color: var(--encre); }
.article-corps strong { font-weight: 700; }
.article-corps blockquote { border-left: 2px solid var(--attestation); padding-left: 18px; margin-left: 0; color: var(--encre-douce); font-family: 'Fraunces'; font-style: italic; }

/* Bug §5.4 (VERDICT) : une puce ROUGE et RONDE — deux interdits en un point
   (§7.1 zéro arrondi ; §5.4 les puces de liste sont des CARRÉS, jamais des
   disques). Seules les listes À PUCES sont concernées ; une liste numérotée
   (ol) garde ses chiffres, ce n'est pas un rond. */
.article-corps ul { list-style: none; padding-left: 0; margin: 0 0 1.1em; }
.article-corps ul li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.article-corps ul li::before {
	content: ""; position: absolute; left: 0; top: 0.42em;
	width: 9px; height: 9px; background: var(--encre);
}
/* Seul un item qui énonce une croyance passe son carré en cinabre (§2.1.3 :
   le cinabre ne colore jamais une interface, seulement le discours rapporté). */
.article-corps ul li.croyance::before { background: var(--cinabre); }
.article-corps ol { padding-left: 1.3em; }
.article-corps ol li::marker { color: var(--attestation); font-weight: 600; }

.sbs_tableau { overflow-x: auto; margin: 24px 0; }
.sbs_tableau table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sbs_tableau th, .sbs_tableau td { border: 1px solid var(--encre-douce); padding: 8px 10px; text-align: left; }
.sbs_tableau th { background: var(--feuillet); }

.champ-formulaire { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; max-width: 480px; }
.champ-formulaire label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--encre-douce); }
.champ-formulaire input, .champ-formulaire textarea {
	background: var(--feuillet); border: 1px solid var(--encre-douce); color: var(--encre);
	padding: 10px 12px; font-family: 'Epilogue'; font-size: 16px;
}
.champ-piege { position: absolute; left: -9999px; }
.bouton-plein { display: inline-block; border: 1px solid var(--encre); background: none; color: var(--encre); padding: 10px 20px; font-weight: 500; text-decoration: none; cursor: pointer; }
.bouton-plein:hover { background: var(--encre); color: var(--kiosque); }
.message-envoye { border: 1px solid var(--attestation); color: var(--attestation); padding: 12px 16px; margin-bottom: 20px; }

/* =======================================================================
   17. Pages hub / archive
   ===================================================================== */
.entete-rubrique { padding: 40px 0 10px; background: var(--kiosque); }
.grille-rubrique { padding: 20px 0 46px; background: var(--kiosque); }
.grille-rubrique .rubrique-grille { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.intro-rubrique { max-width: 660px; margin: 30px 0 0; color: var(--encre-douce); }

@media (max-width: 900px) {
	.grille-rubrique .rubrique-grille { grid-template-columns: 1fr; }
}

/* =======================================================================
   18. Page auteur
   ===================================================================== */
.entete-auteur { display: flex; gap: 24px; align-items: center; padding: 46px 0; background: var(--kiosque); }
.entete-auteur .portrait { width: 120px; height: 120px; flex: 0 0 120px; background: var(--feuillet); }
.entete-auteur .portrait img { width: 100%; height: 100%; object-fit: cover; }

/* =======================================================================
   19. 404 & recherche
   ===================================================================== */
.page-404 { padding: 80px 0; text-align: center; background: var(--kiosque); }
.page-404 .annee-attestation { display: block; margin: 0 auto 20px; }