/*
Theme Name: Continu
Theme URI: https://www.newsletteraccess.com/
Author: Newsletter Access
Description: Le papier continu — état imprimé en bandes vertes, marges perforées et
  barème en escalier pour le comparatif des outils d'email marketing.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: nla-continu
*/

/* =========================================================================
   0. POLICES — self-hosted (P-086). Fichiers attendus dans assets/fonts/.
   ⛔ Aucun appel fonts.googleapis.com / fonts.gstatic.com.
   ⚠️ Binaires non fournis à ce tour (pas d'outil réseau côté designer) :
      voir NOTES-DESIGNER.md « Ce que je n'ai pas pu faire ».
   ========================================================================= */
@font-face {
	font-family: 'Besley';
	src: url('assets/fonts/besley-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Besley';
	src: url('assets/fonts/besley-800.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Fira Sans';
	src: url('assets/fonts/fira-sans-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Fira Sans';
	src: url('assets/fonts/fira-sans-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Fira Sans';
	src: url('assets/fonts/fira-sans-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Courier Prime';
	src: url('assets/fonts/courier-prime-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Courier Prime';
	src: url('assets/fonts/courier-prime-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--nla-f-display: 'Besley', Georgia, 'Times New Roman', serif;
	--nla-f-corps: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--nla-f-mono: 'Courier Prime', 'Courier New', monospace;
}

/* =========================================================================
   1. JETONS DE COULEUR — une seule teinte (H 94-101), clair ET sombre.
   Voir NOTES-DESIGNER.md pour les contrastes calculés paire par paire.
   ⛔ Aucun gris pur, aucun blanc pur, aucun noir pur.
   ========================================================================= */
:root,
html[data-theme="light"] {
	--nla-bande: #CFE0C2;
	--nla-papier: #F0F5EC;
	--nla-encre: #141A11;
	--nla-accent: #356618;
	--nla-machine: #1A2113;
	--nla-machine-encre: #E4EDE0;
	--nla-accent-inv: #7CB854;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--nla-bande: #12160F;
		--nla-papier: #1E2418;
		--nla-encre: #E4EDE0;
		--nla-accent: #7CB854;
		--nla-machine: #CFE0C2;
		--nla-machine-encre: #141A11;
		--nla-accent-inv: #356618;
		color-scheme: dark;
	}
}

/* Bascule manuelle (assets/js/app.js) — surclasse la préférence système,
   pour que Mathias puisse vérifier le sombre sans changer son OS (P-351). */
html[data-theme="dark"] {
	--nla-bande: #12160F;
	--nla-papier: #1E2418;
	--nla-encre: #E4EDE0;
	--nla-accent: #7CB854;
	--nla-machine: #CFE0C2;
	--nla-machine-encre: #141A11;
	--nla-accent-inv: #356618;
	color-scheme: dark;
}

/* =========================================================================
   2. RESET — border-radius: 0 PARTOUT (§4.5). Seule exception : les trous
   de la marge perforée, ronds parce qu'ils sont des trous.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
* { border-radius: 0 !important; }
.nla-trou, .nla-nav-toggle span, input[type="checkbox"] { border-radius: inherit; }

body {
	background: var(--nla-bande);
	color: var(--nla-encre);
	font-family: var(--nla-f-corps);
	font-weight: 400;
	font-size: 1.125rem; /* 18px */
	line-height: 1.62;
	font-variant-numeric: tabular-nums;
}

h1, h2, h3 { font-family: var(--nla-f-display); font-weight: 800; line-height: 1.12; }
h1 { font-size: 3.4rem; font-weight: 800; }
h2 { font-size: 2.4rem; font-weight: 700; }
h3 { font-size: 1.5rem; font-weight: 700; }
.nla-eyebrow {
	font-family: var(--nla-f-corps);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .8rem;
}

a.nla-lien { color: var(--nla-accent); text-underline-offset: .18em; text-decoration: underline; }
a.nla-lien:hover, a.nla-lien:focus-visible { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--nla-accent); outline-offset: 2px; }

.nla-conteneur { max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
.nla-lecture { max-width: 600px; margin-inline: auto; } /* §4.3 — la mesure du métier */

@media (max-width: 640px) {
	h1 { font-size: 2.1rem; }
	h2 { font-size: 1.55rem; }
	body { font-size: 17px; }
	.nla-conteneur { padding-inline: 12px; }
}

/* =========================================================================
   3. LA RÈGLE DES QUATRE PLANS (§4.1) — bande / papier / machine / photo.
   ========================================================================= */
.nla-plan-bande { background: var(--nla-bande); color: var(--nla-encre); }
.nla-plan-papier { background: var(--nla-papier); color: var(--nla-encre); }
.nla-plan-machine { background: var(--nla-machine); color: var(--nla-machine-encre); }
.nla-plan-machine a.nla-lien { color: var(--nla-accent-inv); }
.nla-plan-photo { background: var(--nla-encre); color: var(--nla-machine-encre); }

.nla-bande-verticale { padding-block: clamp(40px, 7vw, 88px); }
.nla-bande-verticale + .nla-bande-verticale { border-top: none; } /* la déchirure sert de séparateur, jamais un filet plein */

/* =========================================================================
   4. LE FEUILLET POSÉ — décalage dur, seule ombre du site.
   ========================================================================= */
.nla-feuillet {
	background: var(--nla-papier);
	box-shadow: 3px 3px 0 var(--nla-encre);
	padding: 20px;
}

/* =========================================================================
   5. LA MARGE PERFORÉE + LA LIGNE DE DÉCHIRURE (§5.2)
   Unique séparateur du site. Aucun <hr>, aucun filet plein.
   ========================================================================= */
.nla-marge-perforee {
	position: relative;
	padding-inline: 22px;
	border-inline: 1px solid color-mix(in srgb, var(--nla-encre) 30%, transparent);
}
.nla-marge-perforee::before,
.nla-marge-perforee::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 22px;
	background-image: radial-gradient(circle, color-mix(in srgb, var(--nla-encre) 22%, transparent) 3.5px, transparent 3.6px);
	background-size: 100% 12.7mm;
	background-repeat: repeat-y;
	background-position: center top;
}
.nla-marge-perforee::before { left: 0; }
.nla-marge-perforee::after { right: 0; }

@media (max-width: 640px) {
	.nla-marge-perforee { padding-inline: 12px; }
	.nla-marge-perforee::before, .nla-marge-perforee::after {
		width: 12px;
		background-image: radial-gradient(circle, color-mix(in srgb, var(--nla-encre) 22%, transparent) 2.5px, transparent 2.6px);
	}
}

.nla-dechirure {
	border: none;
	height: 1px;
	margin-block: clamp(28px, 5vw, 56px);
	background-image: repeating-linear-gradient(to right,
		color-mix(in srgb, var(--nla-encre) 35%, transparent) 0 3px,
		transparent 3px 6px);
}
.nla-dechirure-h {
	width: 1px;
	align-self: stretch;
	background-image: repeating-linear-gradient(to bottom,
		color-mix(in srgb, var(--nla-encre) 35%, transparent) 0 3px,
		transparent 3px 6px);
}

/* =========================================================================
   6. LA LIGNE D'ÉDITION (§5.3) — au-dessus de CHAQUE h1.
   ========================================================================= */
.nla-ligne-edition {
	font-family: var(--nla-f-mono);
	font-size: 15px;
	font-weight: 700;
	color: var(--nla-accent);
	text-transform: uppercase;
	letter-spacing: .03em;
	padding-bottom: 8px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--nla-accent);
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}
.nla-plan-machine .nla-ligne-edition { color: var(--nla-accent-inv); border-bottom-color: var(--nla-accent-inv); }

.nla-ligne-edition-pied {
	font-family: var(--nla-f-mono);
	font-size: 13px;
	color: color-mix(in srgb, var(--nla-encre) 70%, transparent);
	margin-top: 10px;
}

/* =========================================================================
   7. NAVIGATION — flex, sans puces (P-004).
   ========================================================================= */
.nla-entete {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--nla-bande);
	border-bottom: 1px solid color-mix(in srgb, var(--nla-encre) 18%, transparent);
}
.nla-entete-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 14px;
}
.nla-logo { display: flex; align-items: center; gap: 10px; }
.nla-logo svg { height: 34px; width: auto; }

.nla-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	align-items: center;
}
.nla-menu a {
	font-family: var(--nla-f-corps);
	font-weight: 500;
	font-size: .95rem;
	padding-bottom: 4px;
	border-bottom: 3px solid transparent;
}
.nla-menu li.current-menu-item > a,
.nla-menu a:hover, .nla-menu a:focus-visible {
	border-bottom-color: var(--nla-accent);
}

.nla-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--nla-encre);
	padding: 8px 10px;
}
.nla-theme-toggle {
	background: none;
	border: 1px solid var(--nla-encre);
	font-family: var(--nla-f-mono);
	font-size: 12px;
	padding: 6px 10px;
	color: var(--nla-encre);
}

@media (max-width: 860px) {
	.nla-nav-toggle { display: inline-block; }
	.nla-menu {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--nla-bande);
		padding: 16px 24px 24px;
		border-bottom: 1px solid color-mix(in srgb, var(--nla-encre) 18%, transparent);
	}
	.nla-menu.nla-menu-ouvert { display: flex; }
}

/* =========================================================================
   8. HERO — bande #1 de la home.
   ========================================================================= */
.nla-hero {
	position: relative;
	min-height: 56vh;
	display: flex;
	align-items: flex-end;
	background-color: var(--nla-encre);
}
.nla-hero-photo { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; filter: saturate(.9); }
.nla-hero-photo::after { content: ""; }
.nla-hero-voile { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--nla-encre) 35%, transparent), color-mix(in srgb, var(--nla-encre) 75%, transparent)); }
.nla-hero-panneau {
	position: relative;
	z-index: 2;
	background: var(--nla-papier);
	color: var(--nla-encre);
	box-shadow: 3px 3px 0 var(--nla-encre);
	max-width: 620px;
	margin: 40px 0 -64px 24px;
	padding: 28px;
}
@media (max-width: 640px) {
	.nla-hero-panneau { margin: 24px 0 -40px 12px; padding: 18px; }
	.nla-hero { min-height: 62vh; }
}
.nla-hero-etat {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-family: var(--nla-f-mono);
	font-size: 14px;
	margin-top: 14px;
}

/* =========================================================================
   9. TUILES DE TRÈS GROS CHIFFRES.
   ========================================================================= */
.nla-tuiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: color-mix(in srgb, var(--nla-encre) 18%, transparent);
}
.nla-tuile {
	background: var(--nla-papier);
	padding: 28px 20px;
}
.nla-tuile-chiffre {
	font-family: var(--nla-f-display);
	font-weight: 800;
	font-size: 5.5rem;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
}
.nla-tuile-unite {
	display: block;
	font-family: var(--nla-f-mono);
	font-size: .8rem;
	color: var(--nla-accent);
	margin-top: 4px;
}
.nla-tuile-libelle { font-size: .95rem; margin-top: 8px; }

@media (max-width: 860px) {
	.nla-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nla-tuile-chiffre { font-size: 3.4rem; }
}

/* =========================================================================
   10. LE BARÈME EN ESCALIER (§5.4) — jamais trois cartes de tarifs.
   ========================================================================= */
.nla-escalier-conteneur { overflow-x: visible; }
.nla-escalier {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 340px;
	padding-top: 40px;
}
.nla-marche {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 64px;
}
.nla-marche-barre {
	background: var(--nla-encre);
	width: 100%;
	position: relative;
}
.nla-marche-rupture .nla-marche-barre {
	background-color: color-mix(in srgb, var(--nla-encre) 55%, transparent);
	background-image: repeating-linear-gradient(45deg,
		var(--nla-accent) 0 1px, transparent 1px 6px);
}
.nla-marche-prix {
	font-family: var(--nla-f-display);
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 4px;
}
.nla-marche-palier {
	font-family: var(--nla-f-mono);
	font-size: 12px;
	margin-top: 6px;
	text-align: center;
}
.nla-marche-rupture .nla-marche-palier { color: var(--nla-accent); font-weight: 700; }
.nla-marche-nom { font-family: var(--nla-f-corps); font-size: .8rem; text-align: center; margin-top: 4px; }

@media (max-width: 640px) {
	.nla-escalier { flex-direction: column-reverse; align-items: stretch; height: auto; gap: 0; }
	.nla-marche { flex-direction: row; align-items: center; gap: 12px; padding-block: 10px; border-bottom: 1px dashed color-mix(in srgb, var(--nla-encre) 35%, transparent); }
	.nla-marche-barre { width: 12px; height: 34px; flex: none; }
	.nla-marche-corps { display: flex; justify-content: space-between; flex: 1; align-items: center; }
	.nla-escalier-scroll-mention { font-family: var(--nla-f-mono); font-size: 12px; margin-top: 8px; }
}
/* Seul objet autorisé à défiler horizontalement hors du barème : aucun autre. */
.nla-escalier-defilable {
	overflow-x: auto;
	box-shadow: inset -6px 0 0 -3px var(--nla-encre);
	padding-bottom: 6px;
}

/* =========================================================================
   11. LA CASE VIDE, JAMAIS LA CROIX ROUGE (§5.5) + LE TABLEAU (§6)
   ========================================================================= */
.nla-tableau-scope { background: var(--nla-papier); padding-top: 8px; }
table.nla-tableau {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}
.nla-tableau caption { text-align: left; margin-bottom: 8px; }
.nla-tableau thead th {
	position: sticky;
	top: 0;
	background: var(--nla-machine);
	color: var(--nla-machine-encre);
	font-family: var(--nla-f-corps);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .78rem;
	text-align: right;
	padding: 12px 14px;
	border-bottom: 3px solid var(--nla-accent-inv);
}
.nla-tableau thead th:first-child { text-align: left; position: sticky; left: 0; z-index: 2; }
.nla-tableau tbody th { text-align: left; position: sticky; left: 0; background: inherit; }
.nla-tableau td, .nla-tableau tbody th {
	padding: 0 14px;
	height: 56px;
	border-top: 1px solid color-mix(in srgb, var(--nla-encre) 18%, transparent);
	text-align: right;
	vertical-align: middle;
	max-height: 56px;
	overflow: hidden;
}
.nla-tableau tbody th { text-align: left; font-weight: 700; font-family: var(--nla-f-display); }
.nla-tableau tbody tr:nth-child(even) td,
.nla-tableau tbody tr:nth-child(even) th {
	background: color-mix(in srgb, var(--nla-bande) 40%, var(--nla-papier));
}
.nla-tableau tbody tr:hover td, .nla-tableau tbody tr:focus-within td,
.nla-tableau tbody tr:hover th, .nla-tableau tbody tr:focus-within th {
	box-shadow: inset 3px 0 0 var(--nla-accent);
	background: color-mix(in srgb, var(--nla-encre) 6%, var(--nla-papier));
}
.nla-tableau .nla-prix { font-family: var(--nla-f-display); font-weight: 700; }
.nla-tableau .nla-unite { display: block; font-family: var(--nla-f-mono); font-size: .7rem; font-weight: 400; }
.nla-case-vide { color: color-mix(in srgb, var(--nla-encre) 45%, transparent); }
.nla-case-vide::after { content: "–"; }
.nla-tableau-extremum {
	font-family: var(--nla-f-mono);
	font-size: 13px;
	padding: 10px 14px;
	border-top: 1px solid var(--nla-encre);
}

/* Transposition mobile — jamais de scroll horizontal libre sur le tableau. */
@media (max-width: 1023px) {
	table.nla-tableau, table.nla-tableau thead, table.nla-tableau tbody,
	table.nla-tableau th, table.nla-tableau td, table.nla-tableau tr { display: block; }
	table.nla-tableau thead { position: static; clip: unset; height: auto; width: auto; overflow: visible; }
	.nla-tableau thead tr { display: none; }
	.nla-tableau tbody tr {
		box-shadow: 3px 3px 0 var(--nla-encre);
		background: var(--nla-papier);
		margin-bottom: 22px;
		padding: 14px;
	}
	.nla-tableau tbody th {
		font-size: 1.15rem;
		padding-bottom: 10px;
		border: none;
		position: static;
	}
	.nla-tableau tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: auto;
		min-height: 40px;
		border-top: none;
		border-bottom: 1px dashed color-mix(in srgb, var(--nla-encre) 35%, transparent);
		padding: 8px 0;
	}
	.nla-tableau tbody td:last-child { border-bottom: none; }
	.nla-tableau td::before {
		content: attr(data-libelle);
		font-family: var(--nla-f-corps);
		font-weight: 500;
		text-transform: uppercase;
		font-size: 12px;
		letter-spacing: .03em;
	}
	.nla-tableau tbody tr:nth-child(even) td { background: none; }
}

/* Barre de comparaison collante — bas d'écran, 2 outils épinglés (§6 mobile). */
.nla-comparaison-barre {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: var(--nla-machine);
	color: var(--nla-machine-encre);
	padding: 10px 14px;
	display: none;
	align-items: center;
	justify-content: space-between;
	z-index: 50;
	border-top: 3px solid var(--nla-accent-inv);
}
.nla-comparaison-barre.nla-active { display: flex; }
.nla-comparaison-barre button { background: var(--nla-accent-inv); color: var(--nla-machine); border: none; padding: 8px 12px; font-family: var(--nla-f-corps); font-weight: 700; }

/* =========================================================================
   12. LE BANDEAU D'EN-TÊTES BRUTS + LE CADRE 600 (§5.6)
   ========================================================================= */
.nla-entetes-brutes {
	font-family: var(--nla-f-mono);
	font-size: 14px;
	line-height: 1.7;
	background: color-mix(in srgb, var(--nla-machine) 92%, var(--nla-bande) 8%);
	padding: 20px;
	max-width: 640px;
}
.nla-entetes-brutes .nla-verdict { color: var(--nla-accent-inv); font-weight: 700; }
.nla-entetes-brutes .nla-domaine-test { opacity: .85; }

.nla-cadre-600 {
	max-width: 600px;
	border: 1px solid var(--nla-accent-inv);
	background: var(--nla-papier);
	color: var(--nla-encre);
}
.nla-cadre-600-filet {
	display: flex;
	justify-content: space-between;
	font-family: var(--nla-f-mono);
	font-size: 12px;
	border-bottom: 1px solid color-mix(in srgb, var(--nla-encre) 30%, transparent);
	padding: 4px 10px;
}
.nla-cadre-600-corps { padding: 16px; }
.nla-cadre-600-expediteur { font-family: var(--nla-f-corps); font-weight: 700; }
.nla-cadre-600-objet { font-family: var(--nla-f-corps); font-weight: 500; margin-top: 2px; }
.nla-cadre-600-preheader { font-size: .85rem; opacity: .75; margin-top: 2px; }

/* =========================================================================
   13. LA LEVÉE (§5.7) — tableau de départs, aucune carte.
   ========================================================================= */
.nla-levee-entete {
	font-family: var(--nla-f-mono);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 14px;
}
.nla-levee { display: flex; flex-direction: column; }
.nla-depart {
	display: grid;
	grid-template-columns: 84px 3px minmax(0, 1fr);
	gap: 16px;
	align-items: baseline;
	padding-block: 14px;
}
.nla-depart + .nla-depart { border-top: none; }
.nla-depart:not(:last-child) { position: relative; }
.nla-depart:not(:last-child)::after {
	content: "";
	grid-column: 1 / -1;
	height: 1px;
	margin-top: 14px;
	background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--nla-encre) 35%, transparent) 0 3px, transparent 3px 6px);
}
.nla-depart-heure { font-family: var(--nla-f-mono); font-size: 14px; }
.nla-depart-filet { background: var(--nla-accent); align-self: stretch; }
.nla-depart-titre { font-family: var(--nla-f-display); font-weight: 600; font-size: 1.05rem; }

/* =========================================================================
   14. CARTES DE DOSSIER — photo obligatoire, ligne d'édition en pied.
   ========================================================================= */
.nla-grille-dossiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.nla-dossier {
	background: var(--nla-papier);
	box-shadow: 3px 3px 0 var(--nla-encre);
	display: flex;
	flex-direction: column;
}
.nla-dossier-photo { aspect-ratio: 3 / 2; overflow: hidden; }
.nla-dossier-photo img { width: 100%; height: 100%; object-fit: cover; }
.nla-dossier-corps { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.nla-dossier-titre { font-size: 1.15rem; margin-bottom: 8px; }
@media (max-width: 960px) { .nla-grille-dossiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nla-grille-dossiers { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   15. BANDE PHOTO PLEINE LARGEUR
   ========================================================================= */
.nla-bande-photo { position: relative; }
.nla-bande-photo img { width: 100%; max-height: 480px; object-fit: cover; }
.nla-bande-photo figcaption {
	font-family: var(--nla-f-mono);
	font-size: 13px;
	padding: 10px 24px;
	background: var(--nla-encre);
	color: var(--nla-machine-encre);
}

/* Registre 2 — la pièce à conviction (capture d'écran de l'outil). */
.nla-piece-a-conviction {
	border: 1px solid var(--nla-encre);
	max-width: 720px;
}
.nla-piece-a-conviction img { width: 100%; }
.nla-piece-a-conviction figcaption {
	font-family: var(--nla-f-mono);
	font-size: 12px;
	padding: 6px 10px;
	border-top: 1px solid var(--nla-encre);
}

/* =========================================================================
   16. PIED DE PAGE — dense, bande machine.
   ========================================================================= */
.nla-pied {
	padding-block: 48px 28px;
}
.nla-pied-grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}
.nla-pied-colonne h3 {
	font-family: var(--nla-f-corps);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 700;
	margin-bottom: 12px;
}
.nla-pied-colonne ul { display: flex; flex-direction: column; gap: 8px; }
.nla-pied-colonne a { color: var(--nla-machine-encre); }
.nla-pied-colonne a:hover, .nla-pied-colonne a:focus-visible { color: var(--nla-accent-inv); }
.nla-pied-bas {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid color-mix(in srgb, var(--nla-machine-encre) 25%, transparent);
	font-family: var(--nla-f-mono);
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
@media (max-width: 860px) { .nla-pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .nla-pied-grille { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   17. FORMULAIRE — capture e-mail courte, RGPD explicite.
   ========================================================================= */
.nla-form-capture {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
}
.nla-form-capture input[type="email"] {
	flex: 1 1 240px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--nla-encre);
	background: var(--nla-papier);
	color: var(--nla-encre);
	font-family: var(--nla-f-corps);
	font-size: 1rem;
}
.nla-form-capture button {
	background: var(--nla-accent);
	color: var(--nla-papier);
	border: none;
	padding: 12px 18px;
	font-family: var(--nla-f-corps);
	font-weight: 700;
}
.nla-plan-machine .nla-form-capture button { background: var(--nla-accent-inv); color: var(--nla-machine); }
.nla-form-capture button:hover, .nla-form-capture button:focus-visible { filter: brightness(1.08); }
.nla-form-consentement {
	flex-basis: 100%;
	display: flex;
	gap: 8px;
	font-size: .82rem;
	align-items: flex-start;
}
.nla-form-consentement input { margin-top: 4px; }
.nla-piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.nla-form-confirmation { font-family: var(--nla-f-mono); font-size: .85rem; color: var(--nla-accent); margin-top: 8px; }

/* =========================================================================
   18. GABARIT HORS-ÉDITION (§4.6) — même papier, même encre, rien d'autre.
   ========================================================================= */
.nla-hors-edition { padding-block: 64px; }
.nla-hors-edition .nla-lecture > * + * { margin-top: 1.2em; }
.nla-hors-edition h2 { margin-top: 1.6em; }
.nla-hors-edition table { width: 100%; border-collapse: collapse; margin-block: 1.2em; }
.nla-hors-edition table td, .nla-hors-edition table th { border: 1px solid color-mix(in srgb, var(--nla-encre) 25%, transparent); padding: 8px 10px; }

/* =========================================================================
   19. ARTICLE / PAGE STANDARD
   ========================================================================= */
.nla-article-entete { padding-block: 40px 8px; }
.nla-article-corps { padding-block: 8px 56px; }
.nla-article-corps > * + * { margin-top: 1.2em; }
.nla-article-corps h2 { margin-top: 1.8em; }
.nla-article-corps h3 { margin-top: 1.4em; }
.nla-article-corps a.nla-lien { text-decoration: underline; }
.nla-article-corps img { box-shadow: 3px 3px 0 var(--nla-encre); }
.nla-article-image-une { max-height: 460px; width: 100%; object-fit: cover; box-shadow: 3px 3px 0 var(--nla-encre); }

.nla-auteur-bloc {
	display: flex;
	gap: 14px;
	align-items: center;
	background: var(--nla-papier);
	box-shadow: 3px 3px 0 var(--nla-encre);
	padding: 14px 18px;
	margin-top: 40px;
}
.nla-auteur-ecusson {
	width: 48px; height: 48px;
	background: var(--nla-accent);
	color: var(--nla-papier);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--nla-f-display); font-weight: 800; font-size: 1.1rem;
	flex-shrink: 0;
}
.nla-auteur-nom { font-weight: 700; }
.nla-auteur-role { font-family: var(--nla-f-mono); font-size: 12px; opacity: .8; }

/* =========================================================================
   20. UTILITAIRES
   ========================================================================= */
.nla-saut {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--nla-accent); color: var(--nla-papier); padding: 10px 16px;
}
.nla-saut:focus { left: 12px; top: 12px; }
.nla-sr-only {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.nla-grille-2col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; }
@media (max-width: 960px) { .nla-grille-2col { grid-template-columns: minmax(0, 1fr); } }
.nla-erreur-404 { padding-block: 96px; text-align: left; }

/* ------------------------------------------------------------------
 * Le pied documentaire d'une fiche : les sources, puis la suite du barème.
 * Tout est sur le papier `--nla-papier` — sur ce site, seules les données
 * montent sur le papier, le texte courant reste sur la bande.
 * Aucun `border-radius`, aucun filet plein : la déchirure fait la coupure.
 * ------------------------------------------------------------------ */
.nla-sources {
	margin-block: clamp(28px, 5vw, 48px);
	background: var(--nla-papier);
	color: var(--nla-encre);
	padding: 18px 20px;
	box-shadow: 3px 3px 0 var(--nla-encre);
	border-radius: 0;
}
.nla-sources > summary {
	font-family: var(--nla-f-mono);
	font-size: 15px;
	line-height: 1.5;
	cursor: pointer;
	color: var(--nla-encre);
}
.nla-sources-liste {
	margin: 16px 0 0;
	padding-left: 1.4em;
	font-family: var(--nla-f-corps);
	font-size: 17px;
}
.nla-sources-liste li {
	margin-block: 10px;
}
.nla-sources-liste a {
	color: var(--nla-accent);
	font-weight: 500;
}
/* L'URL brute est la pièce versée au dossier : elle se lit, donc elle se casse
   plutôt que de déborder — un débordement latéral sur mobile est un défaut mesuré (P-366). */
.nla-sources-url {
	display: block;
	font-family: var(--nla-f-mono);
	font-size: 13px;
	line-height: 1.45;
	opacity: 0.72;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.nla-sources-note {
	margin: 16px 0 0;
	font-family: var(--nla-f-corps);
	font-size: 15px;
	opacity: 0.82;
}

.nla-suite {
	margin-block: clamp(28px, 5vw, 48px);
	background: var(--nla-machine);
	color: var(--nla-machine-encre);
	padding: 20px;
	border-radius: 0;
}
.nla-suite-titre {
	margin: 0 0 12px;
	font-family: var(--nla-f-mono);
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nla-machine-encre);
}
.nla-suite ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nla-suite li {
	border-top: 1px dotted color-mix(in srgb, var(--nla-machine-encre) 40%, transparent);
}
.nla-suite li a {
	display: block;
	padding: 12px 0;
	font-family: var(--nla-f-corps);
	font-size: 18px;
	line-height: 1.4;
	/* Sur la bande d'inversion, l'accent s'inverse aussi : sans ça, le vert
	   d'accent tombe à 2,4:1 sur la machine et le bloc devient illisible. */
	color: var(--nla-accent-inv);
	text-decoration: none;
}
.nla-suite li a:hover,
.nla-suite li a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* La carte d'identité du relevé : deux colonnes, jamais plus — c'est ce qui lui permet
   de tenir à 390 px sans déclencher un défilement latéral. */
.nla-fiche-releve {
	width: 100%;
	margin-block: clamp(28px, 5vw, 48px);
	border-collapse: collapse;
	background: var(--nla-papier);
	color: var(--nla-encre);
	box-shadow: 3px 3px 0 var(--nla-encre);
	font-family: var(--nla-f-corps);
	font-size: 16px;
	table-layout: fixed;
}
.nla-fiche-releve caption {
	caption-side: top;
	text-align: left;
	padding: 14px 16px 0;
	font-family: var(--nla-f-mono);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nla-encre);
}
.nla-fiche-releve th,
.nla-fiche-releve td {
	padding: 10px 16px;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}
.nla-fiche-releve th {
	width: 48%;
	font-weight: 500;
	opacity: 0.85;
}
.nla-fiche-releve td {
	font-family: var(--nla-f-mono);
	font-size: 15px;
}
/* La zébrure du papier listing — la seule du site, et elle est ici chez elle. */
.nla-fiche-releve tbody tr:nth-child(odd) {
	background: color-mix(in srgb, var(--nla-bande) 55%, var(--nla-papier));
}

.nla-methode {
	margin-block: clamp(28px, 5vw, 48px);
	padding: 18px 20px;
	background: var(--nla-papier);
	color: var(--nla-encre);
	box-shadow: 3px 3px 0 var(--nla-encre);
	border-radius: 0;
}
.nla-methode > summary {
	font-family: var(--nla-f-mono);
	font-size: 15px;
	cursor: pointer;
}
.nla-methode p {
	margin: 14px 0 0;
	font-family: var(--nla-f-corps);
	font-size: 16px;
	line-height: 1.6;
}

/* ------------------------------------------------------------------
 * L'enveloppe que pose le socle autour de chaque tableau du corps
 * (`sbs_enveloppe_tableaux`) n'a de sens que si le thème la style :
 * sans cette règle, elle est un simple <div> et le tableau pousse la
 * page entière — c'est ce qui faisait défiler /hubspot/ de 1 075 px
 * à 390 px de large. Le tableau défile DANS son cadre, jamais la page (P-366).
 * ------------------------------------------------------------------ */
.sbs_tableau {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* l'ombre interne dit qu'il reste de la matière à droite */
	box-shadow: inset -6px 0 0 -3px var(--nla-encre);
	padding-bottom: 6px;
	margin-block: clamp(24px, 4vw, 40px);
}
.sbs_tableau > table {
	margin-block: 0;
	/* Pas de `min-width: max-content` ici : un tableau de 12 colonnes rédigé
	   pour le bureau ferait alors 3 317 px et pousserait la page a 390 px.
	   Il se resserre, et ne défile que s'il ne peut vraiment pas. */
}
/* Une adresse d'en-tête SPF ou DKIM ne se coupe pas toute seule : sans ça,
   une seule ligne de code fait défiler /spf-dkim-dmarc/. */
.nla-article-corps pre,
.nla-lecture pre {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.nla-article-corps code,
.nla-lecture code {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Un enfant de grille ou de flex a `min-width:auto` par défaut : il refuse de
   se rétrécir sous la largeur de son contenu, et le cadre défilable ci-dessus
   devient inopérant. Ces deux lignes sont ce qui fait tenir un tableau de
   3 317 px dans 390 px d'écran. */
.sbs_tableau { min-width: 0; width: 100%; }
.nla-conteneur { min-width: 0; max-width: 100%; }

/* L'escalier du barème garde sa largeur de lecture au bureau, mais l'inline
   `min-width:520px` du gabarit le faisait déborder de 95 px sur un écran de
   390 px, où il passe pourtant en colonne. On la neutralise là où elle nuit. */
@media (max-width: 640px) {
	.nla-escalier { min-width: 0 !important; }
	.nla-escalier-defilable { overflow-x: visible; box-shadow: none; }
	.nla-escalier-scroll-mention { display: none; }
}

/* Un tableau du corps doit pouvoir se resserrer sous 390 px : sans coupure de
   mot, une seule cellule longue lui impose 541 px de large et fait défiler la page. */
.sbs_tableau th,
.sbs_tableau td {
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}
@media (max-width: 640px) {
	.sbs_tableau table { font-size: 14px; }
	.sbs_tableau th, .sbs_tableau td { padding: 8px 10px; }
}

/* 🪤 `1fr` ne rétrécit pas : son minimum implicite est `auto`, donc une grille
   à colonnes égales garde la largeur de son contenu et pousse la page (P-366).
   `minmax(0, 1fr)` ci-dessus l'autorise à rétrécir ; `min-width: 0` ici finit
   le travail sur les enfants, qui ont eux aussi `auto` par défaut. */
.nla-tuiles > *,
.nla-grille-dossiers > *,
.nla-pied-grille > *,
.nla-grille-2col > *,
.nla-depart > * {
	min-width: 0;
}

/* Une source citée en toutes lettres (une URL de Légifrance fait 56 caractères)
   est un mot que rien ne coupe : sans cette règle elle pousse la page à 483 px
   sur un écran de 390. Elle vaut pour tout le corps, jamais page par page (P-410). */
.nla-article-corps, .nla-lecture, .nla-conteneur p, .nla-conteneur li {
	overflow-wrap: anywhere;
}
.nla-ancien-nom { font-family: var(--nla-f-mono); font-size: 13px; font-weight: 400; opacity: .8; white-space: nowrap; }

/* Une figure de corps : elle ne dépasse jamais sa colonne (P-366), et sa légende
   parle la voix de la machine — c'est là que se lit la source de la photo. */
.nla-figure { margin-block: clamp(28px, 5vw, 44px); max-width: 100%; }
.nla-figure img {
	display: block; width: 100%; height: auto; max-width: 100%;
	border: 1px solid var(--nla-encre); box-shadow: 3px 3px 0 var(--nla-encre);
}
.nla-figure figcaption {
	font-family: var(--nla-f-mono); font-size: 13px; line-height: 1.5;
	margin-top: 10px; padding-left: 2px; opacity: .85; overflow-wrap: anywhere;
}