/*
Theme Name: RJ45
Theme URI: https://cables-rj45.com/
Author: cables-rj45.com
Description: Thème sur mesure de cables-rj45.com. Matériel réseau : fiches techniques, comparatifs, guides pas à pas. Sans constructeur de pages, sans dépendance, polices hébergées.
Version: 1.2.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rj45
*/

/* ==========================================================================
   1. Repères : couleurs, polices, mesures
   Les quatre couleurs de paires sont celles du câblage T568 : orange, vert,
   bleu, marron. Chaque rubrique porte un des huit conducteurs.
   ========================================================================== */

:root {
	color-scheme: light dark;

	--fond: #f6f6f3;
	--surface: #ffffff;
	--encre: #15191d;
	--encre-2: #4d5761;
	--trait: #d5d7d1;
	--trait-fort: #15191d;
	--lien: #0b4f9c;
	--console: #14181c;
	--console-encre: #e4e7ea;
	--console-2: #98a3ad;
	--alerte: #a8420a;

	--orange: #e2711d;
	--vert: #1f8a4c;
	--bleu: #1c5fbd;
	--marron: #7b4a2c;
	--blanc-fil: #ffffff;

	--sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--titre: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--large: 70rem;
	--texte: 42rem;
	--marge: clamp(1rem, 4vw, 2rem);
	--rayon: 2px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fond: #111417;
		--surface: #181c20;
		--encre: #e6e8ea;
		--encre-2: #a0aab3;
		--trait: #2d3339;
		--trait-fort: #e6e8ea;
		--lien: #86b8ff;
		--console: #0b0d0f;
		--alerte: #f0a05a;
		--orange: #ee8a3c;
		--vert: #3aa868;
		--bleu: #4f8fe6;
		--marron: #a7714d;
		--blanc-fil: #eceeef;
	}
}

/* Conducteurs : couleur pleine, ou blanc rayé de la couleur de la paire. */
.f-o { --c: var(--orange); }
.f-v { --c: var(--vert); }
.f-b { --c: var(--bleu); }
.f-m { --c: var(--marron); }
[class*="f-"] { --fil: var(--c); }
.raye { --fil: repeating-linear-gradient(-45deg, var(--blanc-fil) 0 4px, var(--c) 4px 7px); }

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 1rem;
}

body {
	margin: 0;
	background: var(--fond);
	color: var(--encre);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.6;
}

img,
svg { max-width: 100%; height: auto; }

a { color: var(--lien); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
	outline: 2px solid var(--lien);
	outline-offset: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--titre);
	font-weight: 600;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0 0 1em; }

.cadre {
	max-width: var(--large);
	margin-inline: auto;
	padding-inline: var(--marge);
}

.sr,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.evitement {
	position: absolute;
	left: var(--marge);
	top: -4rem;
	z-index: 10;
	padding: 0.5rem 0.75rem;
	background: var(--encre);
	color: var(--fond);
}
.evitement:focus { top: 0.5rem; }

/* Unités et valeurs mesurées : toujours en chasse fixe. */
.u,
.mono {
	font-family: var(--mono);
	font-size: 0.92em;
	font-variant-numeric: tabular-nums;
}

/* Étiquette de section, façon repère de baie. */
.repere {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--trait-fort);
	font-family: var(--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.repere h2 { font: inherit; letter-spacing: inherit; }
.repere a { margin-left: auto; text-transform: none; letter-spacing: 0; }

/* ==========================================================================
   3. En-tête : bande des huit conducteurs, logo, panneau des rubriques
   ========================================================================== */

.bande {
	display: flex;
	height: 4px;
}
.bande i { flex: 1; background: var(--fil); }

.entete {
	background: var(--surface);
	border-bottom: 1px solid var(--trait);
}

.entete-haut {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 0.875rem;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--encre);
	text-decoration: none;
	font-family: var(--mono);
	font-weight: 500;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.logo small { color: var(--encre-2); font-size: 1em; font-weight: 400; }

/* Petit connecteur vu de face : huit contacts aux couleurs du T568B. */
.prise {
	display: grid;
	grid-template-columns: repeat(8, 3px);
	gap: 1px;
	padding: 3px 3px 0;
	border: 1.5px solid var(--encre);
	border-bottom-width: 5px;
	border-radius: var(--rayon);
}
.prise i { height: 13px; background: var(--fil); }

.formats {
	display: flex;
	gap: 1.25rem;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}
.formats a { color: var(--encre); text-decoration: none; }
.formats a:hover,
.formats a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }

.recherche {
	display: flex;
	align-items: stretch;
}
.recherche input {
	width: 11rem;
	min-width: 0;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--encre-2);
	border-right: 0;
	border-radius: var(--rayon) 0 0 var(--rayon);
	background: var(--fond);
	color: var(--encre);
	font: inherit;
	font-size: 0.9375rem;
}
.recherche button,
.bouton {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--encre);
	border-radius: var(--rayon);
	background: var(--encre);
	color: var(--fond);
	font: inherit;
	font-family: var(--mono);
	font-size: 0.8125rem;
	cursor: pointer;
}
.recherche button { border-radius: 0 var(--rayon) var(--rayon) 0; }

.bouton-menu { display: none; }

/* Panneau de brassage : une rubrique par port, numérotée de 1 à 8. */
.panneau {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--trait);
	background: none;
	color: inherit;
	list-style: none;
	position: static;
	inset: auto;
	width: auto;
}
.panneau a {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.7rem 0.75rem 0.6rem;
	border-right: 1px solid var(--trait);
	color: var(--encre);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
}
.panneau a::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--fil);
}
.panneau .port {
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--encre-2);
}
.panneau a:hover,
.panneau a[aria-current] { background: var(--fond); }
.panneau a[aria-current]::before { height: 7px; }

@media (max-width: 60em) {
	.formats { display: none; }
	.recherche { margin-left: auto; }
	.recherche input { width: 8rem; }
	.bouton-menu {
		display: inline-block;
		background: var(--surface);
		color: var(--encre);
	}
	.panneau {
		grid-template-columns: 1fr 1fr;
		border-top: 1px solid var(--trait);
	}
	.panneau a { border-bottom: 1px solid var(--trait); }
	/* Sur petit écran, le panneau est un popover natif ouvert par le bouton « Rubriques ». */
	.panneau[popover]:not(:popover-open) { display: none; }
	.panneau[popover]:popover-open {
		position: fixed;
		inset: 4.25rem var(--marge) auto;
		width: auto;
		max-height: calc(100dvh - 6rem);
		overflow: auto;
		background: var(--surface);
		border: 1px solid var(--trait-fort);
	}
	.panneau::backdrop { background: rgb(0 0 0 / 0.35); }
}
@media (min-width: 60.01em) {
	.panneau[popover] { display: grid; }
}
@media (max-width: 40em) {
	.entete-haut { flex-wrap: wrap; gap: 0.75rem; }
	.bouton-menu { margin-left: auto; padding-block: 0.55rem; }
	.recherche { order: 3; flex: 1 0 100%; margin-left: 0; }
	.recherche input { flex: 1; width: auto; }
	.panneau[popover]:popover-open { inset-block-start: 3.75rem; }
	ul.mesures { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
	ul.mesures li:nth-child(2n) { border-right: 0; }
	ul.mesures li:nth-child(n+3) { border-top: 1px solid var(--trait); }
	.tableau.comparatif tbody th { white-space: normal; min-width: 6.5rem; max-width: 9rem; }
}

/* ==========================================================================
   4. Accueil
   ========================================================================== */

.bloc { padding-block: 2.25rem; }
.bloc + .bloc { padding-top: 0.5rem; }

.une {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 2rem 2.5rem;
	padding-block: 2.25rem;
}
.une-principal h1,
.une-principal h2 {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
	margin: 0.5rem 0 0.75rem;
}
.une-principal h2 a,
.carte h3 a,
.ligne h3 a { color: inherit; text-decoration: none; }
.une-principal h2 a:hover,
.carte h3 a:hover,
.ligne h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.une-principal p:not(.marque) { color: var(--encre-2); max-width: 38rem; }
.une-principal .vignette { margin-bottom: 1rem; aspect-ratio: 16 / 7; }

/* Marque de rubrique : conducteur + nom, puis format de l'article. */
.marque {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--encre-2);
}
.marque a { color: inherit; text-decoration: none; }
.marque a:hover { color: var(--encre); text-decoration: underline; }
.fil {
	display: inline-block;
	width: 1.125rem;
	height: 0.5rem;
	background: var(--fil);
	border: 1px solid color-mix(in srgb, var(--c) 70%, var(--encre));
	flex: none;
}
.format {
	padding: 0.05rem 0.4rem;
	border: 1px solid var(--encre-2);
	border-radius: var(--rayon);
	color: var(--encre);
}

/* Ligne de mesures : les chiffres clés d'un matériel. */
.mesures {
	display: flex;
	flex-wrap: wrap;
	margin: 1rem 0 0;
	padding: 0;
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	background: var(--surface);
	list-style: none;
	width: fit-content;
	max-width: 100%;
}
.mesures li {
	padding: 0.45rem 0.9rem;
	border-right: 1px solid var(--trait);
	line-height: 1.25;
}
.mesures li:last-child { border-right: 0; }
.mesures b {
	display: block;
	font-family: var(--mono);
	font-weight: 500;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}
.mesures span {
	font-size: 0.75rem;
	color: var(--encre-2);
}

.vignette {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--trait);
	border-radius: var(--rayon);
}
/* Maquette seulement : emplacement d'une photo. */
.vignette.vide {
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(45deg, transparent 0 9px, color-mix(in srgb, var(--trait) 60%, transparent) 9px 10px),
		var(--surface);
	border: 1px solid var(--trait);
	color: var(--encre-2);
	font-family: var(--mono);
	font-size: 0.6875rem;
}

.une-suite { display: grid; gap: 0; align-content: start; }

.ligne {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 5.5rem;
	gap: 1rem;
	padding-block: 1rem;
	border-top: 1px solid var(--trait);
}
.ligne:first-of-type { border-top: 0; padding-top: 0; }
.ligne h3 { font-size: 1.1875rem; margin: 0.35rem 0 0.25rem; }
.ligne .date,
.carte .date {
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--encre-2);
}
.ligne .vignette { aspect-ratio: 1; }

.grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 2rem 1.5rem;
}
.carte h3 { font-size: 1.25rem; margin: 0.4rem 0 0.35rem; }
.carte p:not(.marque) { margin: 0 0 0.4rem; font-size: 0.9375rem; color: var(--encre-2); }
.carte .vignette { margin-bottom: 0.75rem; }

/* Les huit rubriques, comme les huit broches d'une prise. */
.broches {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--trait);
	border-left: 1px solid var(--trait);
	background: var(--surface);
}
.broches a {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.75rem;
	height: 100%;
	padding: 0.9rem 1rem 1rem;
	border-right: 1px solid var(--trait);
	border-bottom: 1px solid var(--trait);
	color: var(--encre);
	text-decoration: none;
}
.broches a:hover { background: var(--fond); }
.broches .port {
	grid-row: span 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--mono);
	font-size: 0.8125rem;
	color: var(--encre-2);
}
.broches .port::after {
	content: "";
	width: 0.5rem;
	flex: 1;
	min-height: 1.75rem;
	background: var(--fil);
	border: 1px solid color-mix(in srgb, var(--c) 70%, var(--encre));
}
.broches b { font-family: var(--titre); font-size: 1.1875rem; line-height: 1.2; }
.broches small { font-size: 0.875rem; color: var(--encre-2); line-height: 1.35; }

@media (max-width: 52em) {
	.une { grid-template-columns: 1fr; }
	.broches { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 26em) {
	.broches small { display: none; }
}

/* ==========================================================================
   5. Tableaux : fiche technique et comparatif
   ========================================================================== */

.tableau {
	overflow: auto;
	max-width: 100%;
	margin: 1.5rem 0;
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	background: var(--surface);
}
.tableau:focus-visible { outline-offset: 0; }

table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.9375rem;
	line-height: 1.35;
}
caption {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--trait-fort);
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-align: left;
	text-transform: uppercase;
}
th,
td {
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid var(--trait);
	text-align: left;
	vertical-align: top;
}
tbody tr:last-child > * { border-bottom: 0; }
thead th {
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--encre-2);
	white-space: nowrap;
	background: var(--surface);
	border-bottom-color: var(--trait-fort);
}
tbody th { font-weight: 600; background: var(--surface); }
td { font-family: var(--mono); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
td.texte { font-family: var(--sans); font-size: 0.9375rem; }

/* Comparatif : la première colonne reste visible pendant le défilement horizontal. */
.comparatif tbody th,
.comparatif thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	border-right: 1px solid var(--trait);
	white-space: nowrap;
}
.comparatif td { white-space: nowrap; }
.comparatif .mieux { font-weight: 500; box-shadow: inset 0 -2px 0 var(--vert); }

/* Fiche technique : deux colonnes, intitulé à gauche, valeur à droite. */
.fiche { max-width: 30rem; }
.fiche tbody th {
	width: 45%;
	font-weight: 400;
	color: var(--encre-2);
}

.legende {
	margin: -0.75rem 0 1.5rem;
	font-size: 0.8125rem;
	color: var(--encre-2);
}

/* ==========================================================================
   6. Article
   ========================================================================== */

.fil-ariane {
	padding-block: 1rem 0;
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--encre-2);
}
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0; padding: 0; list-style: none; }
.fil-ariane li + li::before { content: "/"; margin-right: 0.5rem; }
.fil-ariane a { color: inherit; }

.article-tete { padding-block: 1.5rem 2rem; border-bottom: 1px solid var(--trait); }
.article-tete h1 {
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3rem);
	margin: 0.75rem 0;
	max-width: 22em;
}
.chapo { max-width: var(--texte); font-size: 1.1875rem; color: var(--encre-2); margin: 0; }
.meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--encre-2);
}

.article-corps {
	display: grid;
	grid-template-columns: minmax(0, var(--texte)) minmax(0, 1fr);
	gap: 3rem;
	padding-block: 2rem 3rem;
}
.article-cote { order: 2; }
.article-cote > * { position: sticky; top: 1rem; }

.sommaire {
	padding: 0.25rem 0 0.25rem 1rem;
	border-left: 1px solid var(--trait);
	font-size: 0.9375rem;
}
.sommaire h2 {
	margin-bottom: 0.5rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.sommaire li { counter-increment: s; padding: 0.2rem 0; line-height: 1.35; }
.sommaire li::before {
	content: counter(s, decimal-leading-zero);
	margin-right: 0.6rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--encre-2);
}
.sommaire a { color: var(--encre); text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }

@media (max-width: 60em) {
	.article-corps { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.article-cote { order: 0; }
	.article-cote > * { position: static; }
}

.contenu > * { max-width: var(--texte); }
.contenu > .tableau,
.contenu > table,
.contenu > .wp-block-table,
.contenu > .brochage,
.contenu > .verdict,
.contenu > pre { max-width: none; }
.contenu h2 {
	margin: 2.5rem 0 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--trait-fort);
	font-size: 1.625rem;
}
.contenu h3 { margin: 1.75rem 0 0.5rem; font-size: 1.25rem; }
.contenu ul,
.contenu ol { margin: 0 0 1em; padding-left: 1.25rem; }
.contenu li { margin-bottom: 0.3em; }
.contenu figure { margin: 1.5rem 0; }
.contenu figcaption { margin-top: 0.4rem; font-size: 0.8125rem; color: var(--encre-2); }
.contenu figure .vignette { max-width: 26rem; }

/* Commandes et extraits de configuration. */
code,
kbd {
	font-family: var(--mono);
	font-size: 0.9em;
}
:not(pre) > code {
	padding: 0.1em 0.3em;
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	background: var(--surface);
}
pre {
	margin: 1.5rem 0;
	padding: 0.9rem 1rem;
	overflow: auto;
	border-radius: var(--rayon);
	background: var(--console);
	color: var(--console-encre);
	font-family: var(--mono);
	font-size: 0.875rem;
	line-height: 1.55;
	tab-size: 4;
}
pre[data-titre]::before {
	content: attr(data-titre);
	display: block;
	margin: -0.9rem -1rem 0.9rem;
	padding: 0.35rem 1rem;
	border-bottom: 1px solid #2d3339;
	color: var(--console-2);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	position: sticky;
	left: -1rem;
}
pre .invite { color: var(--console-2); user-select: none; }
pre .sortie { color: var(--console-2); }
pre mark { background: none; color: #f2b56b; }

/* Guide pas à pas. */
:is(.etapes, .is-style-etapes) {
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
	counter-reset: etape;
}
.contenu :is(.etapes, .is-style-etapes) { padding-left: 0; }
:is(.etapes, .is-style-etapes) > li {
	position: relative;
	counter-increment: etape;
	margin: 0;
	padding: 0 0 1.5rem 3.25rem;
}
:is(.etapes, .is-style-etapes) > li::before {
	content: counter(etape, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	padding: 0.2rem 0;
	border: 1px solid var(--trait-fort);
	border-radius: var(--rayon);
	background: var(--surface);
	font-family: var(--mono);
	font-size: 0.875rem;
	font-weight: 500;
	text-align: center;
}
:is(.etapes, .is-style-etapes) > li::after {
	content: "";
	position: absolute;
	left: 1.125rem;
	top: 2.25rem;
	bottom: 0.25rem;
	border-left: 1px solid var(--trait);
}
:is(.etapes, .is-style-etapes) > li:last-child { padding-bottom: 0; }
:is(.etapes, .is-style-etapes) > li:last-child::after { display: none; }
:is(.etapes, .is-style-etapes) h3 { margin: 0 0 0.35rem; padding-top: 0.15rem; font-size: 1.1875rem; }
:is(.etapes, .is-style-etapes) p:last-child { margin-bottom: 0; }

:is(.etapes, .is-style-etapes) > li > strong:first-child {
	display: block;
	margin-bottom: 0.25rem;
	padding-top: 0.15rem;
	font-family: var(--titre);
	font-size: 1.1875rem;
	line-height: 1.2;
}

/* Schéma de brochage T568A / T568B. */
.brochage {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}
.brochage section {
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	background: var(--surface);
}
.brochage h3,
.contenu .brochage h3 {
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--trait-fort);
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.brochage ol,
.contenu .brochage ol { margin: 0; padding: 0; list-style: none; }
.brochage li {
	display: grid;
	grid-template-columns: 1.25rem 2.75rem 1fr auto;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.3rem 0.75rem;
	border-bottom: 1px solid var(--trait);
	font-family: var(--mono);
	font-size: 0.8125rem;
}
.brochage li:last-child { border-bottom: 0; }
.brochage li > i {
	height: 0.625rem;
	background: var(--fil);
	border: 1px solid color-mix(in srgb, var(--c) 70%, var(--encre));
}
.brochage li > span:last-child { color: var(--encre-2); }

/* Encadrés. */
.note {
	margin: 1.5rem 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--trait);
	border-left: 4px solid var(--bleu);
	border-radius: var(--rayon);
	background: var(--surface);
}
.note > :last-child { margin-bottom: 0; }
.note strong:first-child {
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.note.attention { border-left-color: var(--orange); }
.note.attention strong:first-child { color: var(--alerte); }

/* Verdict d'un test. */
.verdict {
	display: grid;
	grid-template-columns: auto 1fr 1fr;
	margin: 1.5rem 0;
	border: 1px solid var(--trait-fort);
	border-radius: var(--rayon);
	background: var(--surface);
}
.verdict > * { padding: 0.9rem 1rem; }
.verdict > * + * { border-left: 1px solid var(--trait); }
.verdict .note-sur {
	display: grid;
	align-content: center;
	text-align: center;
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--encre-2);
}
.verdict .note-sur b { font-size: 2rem; font-weight: 500; color: var(--encre); line-height: 1; }
.verdict h3,
.contenu .verdict h3 {
	margin: 0 0 0.4rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.verdict ul,
.contenu .verdict ul { margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.verdict li { padding-left: 1.1rem; position: relative; }
.verdict li::before { position: absolute; left: 0; font-family: var(--mono); }
.verdict .plus li::before { content: "+"; color: var(--vert); }
.verdict .moins li::before { content: "-"; color: var(--alerte); }
@media (max-width: 36em) {
	.verdict { grid-template-columns: 1fr; }
	.verdict > * + * { border-left: 0; border-top: 1px solid var(--trait); }
}

/* ==========================================================================
   7. Pied de page
   ========================================================================== */

.pied {
	margin-top: 2rem;
	border-top: 1px solid var(--trait-fort);
	background: var(--surface);
	font-size: 0.9375rem;
}
.pied-grille {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	gap: 2rem;
	padding-block: 2rem;
}
.pied h2 {
	margin-bottom: 0.6rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.pied ul { margin: 0; padding: 0; list-style: none; columns: 2; }
.pied li { padding: 0.15rem 0; }
.pied a { color: var(--encre); }
.pied p { color: var(--encre-2); max-width: 26rem; }
.pied-bas {
	padding-block: 0.9rem;
	border-top: 1px solid var(--trait);
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--encre-2);
}
@media (max-width: 46em) {
	.pied-grille { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ==========================================================================
   8. Listes, recherche, pagination
   ========================================================================== */

.marque a.format { color: var(--encre); }

.une-seule { grid-template-columns: minmax(0, 46rem); }
.ligne.sans-image { grid-template-columns: minmax(0, 1fr); }

.liste-tete {
	margin-bottom: 2rem;
	padding-block: 2rem 1.5rem;
	border-bottom: 1px solid var(--trait);
}
.liste-tete h1 {
	margin: 0.5rem 0;
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3rem);
}
.liste-tete h1 .mono { font-size: 0.45em; font-weight: 400; color: var(--encre-2); }

.vide-message { max-width: var(--texte); margin: 0 0 2rem; }
.vide-message .recherche { margin: 0; }
.vide-message .recherche input { flex: 1; width: auto; }

.pagination { margin: 2.5rem 0 1rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.page-numbers {
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	background: var(--surface);
	color: var(--encre);
	font-family: var(--mono);
	font-size: 0.8125rem;
	text-decoration: none;
}
a.page-numbers:hover { border-color: var(--trait-fort); }
.page-numbers.current { border-color: var(--encre); background: var(--encre); color: var(--fond); }
.page-numbers.dots { border-color: transparent; background: none; }

.pied ul.une-colonne { columns: 1; }

/* ==========================================================================
   9. Contenu saisi dans l'éditeur WordPress
   ========================================================================== */

.article-corps.sans-cote { grid-template-columns: minmax(0, var(--texte)); }
.article-corps.sans-cote .contenu > :is(.tableau, .wp-block-table, pre, .brochage) { max-width: none; }

.contenu .image-une { margin-top: 0; }
.contenu .image-une .vignette { max-width: none; aspect-ratio: 16 / 7; }
.contenu img { border-radius: var(--rayon); }
.contenu .wp-block-image img,
.contenu .wp-caption img { max-width: min(100%, 30rem); }
.contenu .wp-caption { max-width: 100%; }
.contenu .aligncenter { margin-inline: auto; text-align: center; }
.contenu .alignright { float: right; margin: 0.25rem 0 1rem 1.5rem; max-width: 45%; }
.contenu .alignleft { float: left; margin: 0.25rem 1.5rem 1rem 0; max-width: 45%; }
.contenu h2,
.contenu .tableau,
.contenu .wp-block-table { clear: both; }

.contenu blockquote {
	margin: 1.5rem 0;
	padding: 0.1rem 0 0.1rem 1rem;
	border-left: 4px solid var(--trait-fort);
	color: var(--encre-2);
}
.contenu blockquote > :last-child { margin-bottom: 0; }
.contenu hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--trait); }
.contenu kbd {
	padding: 0.05em 0.35em;
	border: 1px solid var(--encre-2);
	border-bottom-width: 2px;
	border-radius: var(--rayon);
	background: var(--surface);
}
.pages-article { margin-top: 2rem; font-family: var(--mono); font-size: 0.875rem; }

/* Bloc Tableau : zone qui défile, cellules en chasse fixe. */
figure.wp-block-table {
	overflow: auto;
	max-width: 100%;
	margin: 1.5rem 0;
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	background: var(--surface);
}
figure.wp-block-table table {
	width: 100%;
	table-layout: auto;
	border-collapse: separate;
	border-spacing: 0;
}
figure.wp-block-table table.has-fixed-layout { table-layout: auto; }
figure.wp-block-table table.has-fixed-layout :is(td, th) { word-break: normal; }
figure.wp-block-table :is(td, th),
figure.wp-block-table thead,
figure.wp-block-table tfoot {
	border: 0;
	border-bottom: 1px solid var(--trait);
	padding: 0.55rem 0.75rem;
}
figure.wp-block-table thead,
figure.wp-block-table tfoot { padding: 0; border: 0; }
figure.wp-block-table thead th { border-bottom-color: var(--trait-fort); }
figure.wp-block-table tbody tr:last-child > * { border-bottom: 0; }
figure.wp-block-table tfoot td { border-top: 1px solid var(--trait); border-bottom: 0; }
figure.wp-block-table figcaption,
.contenu figure.wp-block-table figcaption {
	position: sticky;
	left: 0;
	margin: 0;
	padding: 0.45rem 0.75rem;
	border-top: 1px solid var(--trait);
	font-size: 0.8125rem;
	color: var(--encre-2);
	text-align: left;
}

figure.wp-block-table.is-style-comparatif td { white-space: nowrap; }
figure.wp-block-table.is-style-comparatif :is(td, th):first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	border-right: 1px solid var(--trait);
	background: var(--surface);
}
figure.wp-block-table.is-style-comparatif td:first-child {
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 600;
}
figure.wp-block-table.is-style-comparatif :is(strong, mark) {
	background: none;
	color: inherit;
	font-weight: 500;
	box-shadow: inset 0 -2px 0 var(--vert);
}

figure.wp-block-table.is-style-fiche { max-width: 30rem; }
figure.wp-block-table.is-style-fiche td:first-child {
	width: 45%;
	font-family: var(--sans);
	font-size: 0.9375rem;
	color: var(--encre-2);
}
figure.wp-block-table.is-style-fiche figcaption {
	border-top-color: var(--trait-fort);
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--encre);
}

@media (max-width: 40em) {
	figure.wp-block-table.is-style-comparatif td:first-child { white-space: normal; min-width: 6.5rem; max-width: 9rem; }
}

/* Bloc Code : les longues lignes défilent, elles ne se replient pas. */
pre.wp-block-code,
.contenu pre { position: relative; }
pre.wp-block-code code,
pre code {
	display: block;
	font-family: inherit;
	font-size: inherit;
	white-space: pre;
	overflow-wrap: normal;
}
.copier {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	padding: 0.15rem 0.5rem;
	border: 1px solid #3a424a;
	border-radius: var(--rayon);
	background: var(--console);
	color: var(--console-2);
	font-family: var(--mono);
	font-size: 0.6875rem;
	cursor: pointer;
}
.contenu pre:has(.copier) { padding-top: 2.2rem; }
.copier:hover,
.copier:focus-visible { color: var(--console-encre); border-color: var(--console-2); }
.copier:focus-visible { outline-color: var(--console-encre); }

/* Styles de bloc « À retenir » et « Attention ». */
:is(.is-style-note, .is-style-attention) {
	margin: 1.5rem 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--trait);
	border-left: 4px solid var(--bleu);
	border-radius: var(--rayon);
	background: var(--surface);
}
:is(.is-style-note, .is-style-attention)::before {
	content: "À retenir";
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.is-style-attention { border-left-color: var(--orange); }
.is-style-attention::before { content: "Attention"; color: var(--alerte); }
:is(.is-style-note, .is-style-attention) > :last-child { margin-bottom: 0; }

.verdict.sans-note { grid-template-columns: 1fr 1fr; }
@media (max-width: 36em) {
	.verdict.sans-note { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. Accord pour la mesure d'audience : une ligne, deux boutons de même poids
   ========================================================================== */

.accord {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	max-width: min(34rem, calc(100vw - 2rem));
	padding: 0.6rem 0.75rem 0.6rem 1rem;
	border: 1px solid var(--trait-fort);
	border-radius: var(--rayon);
	background: var(--surface);
	font-size: 0.875rem;
}
.accord[hidden] { display: none; }
.accord p { margin: 0; flex: 1 1 14rem; }
.accord div { display: flex; gap: 0.5rem; }
.accord button {
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--encre);
	border-radius: var(--rayon);
	background: var(--surface);
	color: var(--encre);
	font: inherit;
	font-family: var(--mono);
	font-size: 0.8125rem;
	cursor: pointer;
}
.accord button:hover { background: var(--encre); color: var(--fond); }
.accord-ouvrir {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

@media print {
	.entete, .pied, .article-cote, .bande { display: none; }
	body { background: #fff; }
}