/**
 * WSI — feuille de style principale.
 *
 * Direction : bulletin marin. Fond papier de carte, encre pétrole, accent
 * turquoise profond, signal orange bouée. Grotesque technique pour les titres,
 * serif éditoriale pour le texte courant, monospace pour les données.
 *
 * Les thèmes clair et sombre passent tous les deux par les mêmes jetons :
 * aucune couleur n'est déclarée uniquement dans un bloc de media query.
 */

/* ------------------------------------------------------------------ jetons */

:root {
	/* Hauteur de l'entête collant, dont dépendent le sommaire et les ancres */
	--header-h: 68px;

	/* Couleur — palette claire complète */
	--ground: #ffffff;
	--surface: #f3f6f6;
	--surface-2: #e7eded;
	--ink: #0d2934;
	--ink-2: #3d5a66;
	--ink-3: #6f8792;
	--rule: #d6e0e2;
	--rule-soft: #e6ecec;
	--accent: #0e6b88;
	--accent-hover: #0a5468;
	--accent-soft: #dbeaee;
	--on-accent: #ffffff;
	--signal: #c0561f;
	--signal-soft: #f6e3d8;

	/* Typographie */
	--font-display: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
	--font-body: "Newsreader", Georgia, "Times New Roman", serif;
	--font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

	--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
	--step-0: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
	--step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem);
	--step-2: clamp(1.5rem, 1.3rem + 1vw, 1.95rem);
	--step-3: clamp(1.9rem, 1.5rem + 2vw, 2.8rem);
	--step-4: clamp(2.3rem, 1.7rem + 3vw, 3.6rem);

	/* Espace et forme */
	--gap: clamp(1rem, 0.8rem + 1vw, 1.6rem);
	--section: clamp(2.75rem, 2rem + 3vw, 4.5rem);
	--wrap: 1160px;
	--wrap-narrow: 720px;
	--radius: 3px;
	--shadow: 0 1px 2px rgb(13 41 52 / 6%), 0 8px 24px rgb(13 41 52 / 5%);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ground: #0a1d26;
		--surface: #102d3a;
		--surface-2: #16394a;
		--ink: #dce9ed;
		--ink-2: #a0b8c1;
		--ink-3: #7593a0;
		--rule: #234756;
		--rule-soft: #1a3947;
		--accent: #46aac8;
		--accent-hover: #6cc0d9;
		--accent-soft: #123a4b;
		--on-accent: #06171f;
		--signal: #ef8b53;
		--signal-soft: #34210f;
		--shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
	}
}

:root[data-theme="dark"] {
	--ground: #0a1d26;
	--surface: #102d3a;
	--surface-2: #16394a;
	--ink: #dce9ed;
	--ink-2: #a0b8c1;
	--ink-3: #7593a0;
	--rule: #234756;
	--rule-soft: #1a3947;
	--accent: #46aac8;
	--accent-hover: #6cc0d9;
	--accent-soft: #123a4b;
	--on-accent: #06171f;
	--signal: #ef8b53;
	--signal-soft: #34210f;
	--shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
}

/* ------------------------------------------------------------------- socle */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	line-height: 1.15;
	letter-spacing: -0.018em;
	text-wrap: balance;
	margin: 0;
}

p, ul, ol, blockquote, figure, table, pre { margin: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--accent);
	color: var(--on-accent);
	padding: 0.7rem 1.1rem;
	font-family: var(--font-display);
	font-weight: 600;
}
.skip-link:focus { left: 0; }

.wrap {
	width: min(100% - 2.5rem, var(--wrap));
	margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); }

.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* ---------------------------------------------------------------- en-tête */

.site-header {
	border-bottom: 1px solid var(--rule);
	background: var(--ground);
	position: sticky;
	top: 0;
	z-index: 40;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	min-height: 68px;
}

.site-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.12rem;
	letter-spacing: -0.02em;
	margin: 0;
}
.site-title a { color: var(--ink); text-decoration: none; }
.site-title a:hover { color: var(--accent); }

.custom-logo { max-height: 44px; width: auto; }

.nav-primary__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-primary__list a {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 0.94rem;
	color: var(--ink-2);
	text-decoration: none;
}
.nav-primary__list a:hover,
.nav-primary .current-menu-item > a { color: var(--accent); }

.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: 0.55rem 0.7rem;
	cursor: pointer;
	color: var(--ink);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 18px; height: 2px;
	background: currentcolor;
	position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* Bascule clair / sombre. Masquée tant que le script ne l'a pas activée :
   un bouton inopérant vaut moins que pas de bouton. */
.theme-switch {
	order: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: 0.5rem;
	cursor: pointer;
	color: var(--ink-2);
	line-height: 0;
}
.theme-switch:hover { color: var(--accent); border-color: var(--accent); }
.theme-switch[hidden] { display: none; }
.nav-primary { order: 2; margin-inline-start: auto; }
.nav-toggle { order: 4; }

/* L'icône affichée est celle du mode vers lequel on bascule. Mêmes conditions
   que la palette, pour que les trois états restent cohérents. */
.theme-switch__soleil { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-switch__lune { display: none; }
	:root:not([data-theme="light"]) .theme-switch__soleil { display: block; }
}
:root[data-theme="dark"] .theme-switch__lune { display: none; }
:root[data-theme="dark"] .theme-switch__soleil { display: block; }

@media (max-width: 1000px) {
	.nav-toggle { display: block; }
	.theme-switch { margin-inline-start: auto; }
	.nav-primary { margin-inline-start: 0; }
	.nav-primary {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--ground);
		border-bottom: 1px solid var(--rule);
		padding: 1rem 1.25rem 1.4rem;
	}
	.nav-primary.is-open { display: block; }
	.nav-primary__list { flex-direction: column; gap: 0.9rem; }
	.site-header__inner { position: relative; }
}

/* --------------------------------------------------------------- structure */

.site-main { padding-block: var(--section); min-height: 50vh; }

.breadcrumb { margin-bottom: 1.6rem; }
.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.6rem;
	list-style: none;
	margin: 0; padding: 0;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--ink-3);
}
.breadcrumb__item + .breadcrumb__item::before {
	content: "/";
	margin-right: 0.6rem;
	color: var(--rule);
}
.breadcrumb__item a { color: var(--ink-3); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--accent); text-decoration: underline; }

.page-head {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding-bottom: var(--gap);
	margin-bottom: var(--section);
	border-bottom: 2px solid var(--ink);
}
.page-head__title { font-size: var(--step-3); font-weight: 800; }
.page-head__lede {
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 58ch;
}
.page-head__count {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ badge */

.badge {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.64rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--accent-soft);
	padding: 0.28rem 0.55rem;
	border-radius: 2px;
	text-decoration: none;
}
.badge:hover,
.badge.is-obfuscated:hover { color: var(--on-accent); background: var(--accent); }

/* Liens offusqués : pas de <a>, donc l'affordance doit être posée à la main. */
.badge.is-obfuscated { cursor: pointer; user-select: none; }
.badge.is-obfuscated:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.badge--cluster { color: var(--ink-2); background: var(--surface-2); }
.badge--cluster:hover { color: var(--on-accent); background: var(--ink-2); }



/* ------------------------------------------------------------- clusters */

.cluster-nav { margin-bottom: var(--section); }
.cluster-nav__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0; padding: 0;
}
.cluster-card {
	display: grid;
	gap: 0.35rem;
	height: 100%;
	padding: 1rem 1.1rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
	text-decoration: none;
	color: var(--ink);
	transition: border-color 0.15s, background 0.15s;
}
.cluster-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.cluster-card__name { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
.cluster-card__desc { font-size: 0.86rem; color: var(--ink-2); line-height: 1.45; }
.cluster-card__count {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ cartes */

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
	gap: var(--gap);
}
.card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	border-bottom: 1px solid var(--rule-soft);
	padding-bottom: var(--gap);
}

/*
 * Un seul lien par carte, posé sur le titre, mais étendu à toute la surface :
 * la carte entière est cliquable sans multiplier les <a> vers la même URL.
 */
.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.card:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.card__link:focus-visible { outline: none; }

/* Les étiquettes passent au-dessus de la zone cliquable pour rester actives. */
.card__cats,
.article__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	position: relative;
	z-index: 2;
}
.article__cats { gap: 0.4rem; }
.card__media {
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface-2);
	aspect-ratio: 3 / 2;
}
.card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.card:hover .card__media img { transform: scale(1.03); }

.card__body { display: flex; flex-direction: column; gap: 0.55rem; }
.card__title { font-size: var(--step-1); font-weight: 600; line-height: 1.25; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--accent); }
.card__excerpt { font-size: 0.94rem; color: var(--ink-2); line-height: 1.55; }
.card__meta {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--ink-3);
	display: flex; gap: 0.45rem; align-items: center;
}

/* ----------------------------------------------------------------- article */

.article__head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: var(--gap); }

/*
 * Sur un article, la signature et son filet séparent déjà le titre du corps.
 * Sur une page, rien ne s'intercale : le titre collait au texte. On reprend
 * le traitement des en-têtes d'archive pour rester cohérent.
 */
.article--page .article__head {
	padding-bottom: var(--gap);
	margin-bottom: var(--section);
	border-bottom: 2px solid var(--ink);
}
.article__title { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.028em; }
.article__lede {
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 60ch;
}

.article__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem 1.5rem;
	padding-top: 1.1rem;
	margin-top: 0.4rem;
	border-top: 1px solid var(--rule);
}

.byline { display: flex; align-items: center; gap: 0.7rem; }
.byline__avatar {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	align-self: center;
	object-fit: cover;
	border-radius: 50%;
	background: var(--surface-2);
}
.byline__text { font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }
.byline__label { color: var(--ink-3); }
.byline__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); text-decoration: none; }
.byline__name:hover { color: var(--accent); }
.byline__role { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); }

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--ink-3);
}
.post-meta__item--updated { color: var(--accent); }

.article__hero {
	margin: var(--gap) 0 var(--section);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.article__hero img {
	width: 100%;
	border-radius: var(--radius);
	background: var(--surface-2);
}
.article__hero figcaption {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--ink-3);
}
.article__hero--page { margin-top: var(--gap); }

/* Bloc et non flex : un float est sans effet sur un élément flex, et le
   sommaire a besoin de flotter dans la marge pour suivre le défilement. */
.article__body { display: block; }
.article__body > * + * { margin-top: 1.35rem; }
.article__body h2 { font-size: var(--step-2); font-weight: 800; margin-top: 1.4rem; }
.article__body h3 { font-size: var(--step-1); font-weight: 600; margin-top: 1rem; }
.article__body ul,
.article__body ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; }
.article__body blockquote {
	border-left: 3px solid var(--accent);
	padding: 0.4rem 0 0.4rem 1.2rem;
	color: var(--ink-2);
	font-size: var(--step-1);
	line-height: 1.5;
}
.article__body figure { display: flex; flex-direction: column; gap: 0.5rem; }

/* Les images du corps suivent la même règle que l'image à la une : pleine
   largeur de la colonne de texte, coins arrondis, fond d'attente. Les styles
   en ligne hérités de l'ancien éditeur, qui imposaient 70 % de largeur, ont
   été retirés du contenu. */
.article__body :is(figure, p) > img,
.article__body > img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	background: var(--surface-2);
}
.article__body .wp-block-gallery img { border-radius: var(--radius); }
.article__body figcaption { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); }
.article__body table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.article__body :is(th, td) { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--rule-soft); text-align: left; }
.article__body th { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.article__body pre {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: 1rem;
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 0.85rem;
}
.article__body .wp-block-embed { overflow-x: auto; }

/* Tableaux : le contenu peut en porter de très larges, huit colonnes et plus.
   inc/tableaux.php les enveloppe pour qu'ils défilent au lieu de déborder. */
.article__body .wsi-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: var(--gap) 0;
	border: 1px solid var(--rule-soft);
	border-radius: var(--radius);
}
.article__body .wsi-table:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.article__body .wsi-table > table { margin: 0; min-width: 40rem; }

/* Un tableau large deborde non pas a cause de sa largeur declaree, mais parce
   que la somme des largeurs minimales de ses colonnes depasse la colonne de
   texte : chaque mot long impose son gabarit. On l'autorise a se compresser,
   en coupant aux syllabes d'abord, n'importe ou en dernier recours. */
.article__body .wsi-table--cartes > table { font-size: 0.82rem; }
.article__body .wsi-table--cartes :is(th, td) {
	padding: 0.5rem 0.55rem;
	hyphens: auto;
	overflow-wrap: anywhere;
}
.article__body .wsi-table--cartes th { font-size: 0.64rem; letter-spacing: 0.05em; }
/* La colonne de degre reste etroite et lisible d'un coup d'oeil. */
.article__body .wsi-table--cartes :is(th, td):first-child {
	width: 1%;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.article__body .wsi-table :is(th, td):first-child { padding-left: 0.9rem; }
.article__body .wsi-table :is(th, td):last-child { padding-right: 0.9rem; }
.article__body .wsi-table tr:last-child :is(th, td) { border-bottom: 0; }
.article__body .wsi-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }

/* Sous 640 px, un tableau de cinq colonnes ou plus ne se lit pas en defilant.
   Chaque ligne devient une carte, et chaque cellule porte le libelle de sa
   colonne, pose en data-libelle par inc/tableaux.php. */
@media (max-width: 640px) {
	.article__body .wsi-table--cartes {
		overflow-x: visible;
		border: 0;
		border-radius: 0;
	}
	.article__body .wsi-table--cartes > table { min-width: 0; width: 100%; display: block; }
	.article__body .wsi-table--cartes thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.article__body .wsi-table--cartes tbody { display: block; }
	.article__body .wsi-table--cartes tbody tr {
		display: block;
		margin-bottom: 0.85rem;
		border: 1px solid var(--rule-soft);
		border-radius: var(--radius);
		background: var(--surface);
		padding: 0.2rem 0.9rem;
	}
	.article__body .wsi-table--cartes tbody :is(th, td) {
		display: flex;
		gap: 0.9rem;
		justify-content: space-between;
		align-items: baseline;
		padding: 0.5rem 0;
		border-bottom: 1px solid var(--rule-soft);
		text-align: right;
	}
	.article__body .wsi-table--cartes tbody tr :is(th, td):last-child { border-bottom: 0; }
	.article__body .wsi-table--cartes tbody td[data-libelle]::before {
		content: attr(data-libelle);
		flex: 0 0 40%;
		text-align: left;
		font-family: var(--font-mono);
		font-size: 0.68rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--ink-3);
	}
	/* La premiere cellule sert de titre de carte. */
	.article__body .wsi-table--cartes tbody tr > :is(th, td):first-child {
		display: block;
		width: auto;
		white-space: normal;
		text-align: left;
		font-weight: 700;
		font-size: var(--step-0);
		padding-top: 0.7rem;
	}
	.article__body .wsi-table--cartes tbody tr > :is(th, td):first-child::before {
		display: block;
		flex: none;
		margin-bottom: 0.1rem;
	}
}

/* -------------------------------------------------------------------- EEAT */

.reviewed {
	margin-top: var(--gap);
	padding: 0.85rem 1.1rem;
	background: var(--accent-soft);
	border-radius: var(--radius);
	font-size: 0.9rem;
}
.reviewed__text { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; color: var(--ink-2); }
.reviewed__mark { color: var(--accent); font-weight: 700; }
.reviewed time { font-family: var(--font-mono); font-size: 0.78rem; }

.sources {
	margin-top: var(--section);
	padding-top: 1.4rem;
	border-top: 1px solid var(--rule);
}
.sources__title {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 0.8rem;
}
.sources__list {
	display: flex; flex-direction: column; gap: 0.45rem;
	padding-left: 1.2rem;
	font-size: 0.9rem;
	color: var(--ink-2);
}

.author-box {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	margin-top: var(--section);
	padding: 1.4rem;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
}
.author-box--archive { margin-top: 0; margin-bottom: var(--section); }
.author-box__avatar {
	width: 72px;
	height: 72px;
	flex: 0 0 72px;
	align-self: flex-start;
	object-fit: cover;
	border-radius: 50%;
	background: var(--surface-2);
}
.author-box__body { display: flex; flex-direction: column; gap: 0.55rem; }
.author-box__name { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
.author-box__name a { color: var(--ink); text-decoration: none; }
.author-box__name a:hover { color: var(--accent); }
.author-box__role {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: var(--ink-3);
	margin-left: 0.5rem;
}
.author-box__credentials { font-size: 0.95rem; color: var(--ink); }
.author-box__bio { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; }
.author-box__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.7rem 1.2rem;
	margin-top: 0.3rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--rule-soft);
}
.author-box__fact dt {
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.author-box__fact dd { margin: 0.2rem 0 0; font-size: 0.9rem; }
.author-box__link { font-family: var(--font-mono); font-size: 0.78rem; }

@media (max-width: 560px) {
	.author-box { flex-direction: column; }
}

/* ------------------------------------------------------------- connexes */

.related {
	margin-top: var(--section);
	padding-top: var(--gap);
	border-top: 2px solid var(--ink);
}
.related__head { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--gap); }
.related__title { font-size: var(--step-2); font-weight: 800; }
.related__title a { color: var(--ink); text-decoration: none; }
.related__title a:hover { color: var(--accent); }

/* ------------------------------------------------------- divers & footer */

.empty {
	display: flex; flex-direction: column; gap: 1.2rem;
	padding: var(--section) 0;
	max-width: 46ch;
}
.empty__text { color: var(--ink-2); }

.search-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.search-form__input {
	flex: 1 1 240px;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--ground);
	color: var(--ink);
	font-family: inherit;
	font-size: 0.95rem;
}
.search-form__submit {
	padding: 0.65rem 1.1rem;
	border: 0;
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
}
.search-form__submit:hover { background: var(--accent-hover); }


/* ------------------------------------------------------------ accueil hub */

.hero {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: var(--section);
}
.hero__title { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.03em; }
.hero__lede {
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 60ch;
}


/* --------------------------------------------------- accueil par catégorie */

.cat-section { margin-bottom: var(--section); }

.cat-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-bottom: var(--gap);
	padding-bottom: 0.7rem;
	border-bottom: 2px solid var(--ink);
}
.cat-section__title { font-size: var(--step-2); font-weight: 800; }
.cat-section__title a { color: var(--ink); text-decoration: none; }
.cat-section__title a:hover { color: var(--accent); }
.cat-section__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 1rem;
}
.cat-section__count {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cat-section__more {
	font-family: var(--font-display);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.cat-section__more::after { content: " \2192"; }
.cat-section__more:hover { text-decoration: underline; }

/* Quatre vignettes de front sur grand écran, puis dégradé jusqu'à une seule. */
.card-grid--four { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
@media (min-width: 1100px) {
	.card-grid--four { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------- page auteur */

.author-head {
	display: flex;
	gap: 1.2rem;
	align-items: flex-start;
	padding-bottom: var(--gap);
	margin-bottom: var(--gap);
	border-bottom: 2px solid var(--ink);
}
.author-head__avatar {
	width: 96px;
	height: 96px;
	flex: 0 0 96px;
	align-self: flex-start;
	object-fit: cover;
	border-radius: 50%;
	background: var(--surface-2);
}
.author-head__body { display: flex; flex-direction: column; gap: 0.4rem; }
.author-head__name { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.025em; }
.author-head__pen {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--accent);
	background: var(--accent-soft);
	padding: 0.35rem 0.6rem;
	border-radius: var(--radius);
	align-self: flex-start;
}
.author-bio { display: flex; flex-direction: column; gap: 1rem; color: var(--ink-2); }
.author-bio p { max-width: 64ch; }
.author-knows {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: var(--gap);
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
}
.author-knows__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.author-knows__list a,
.author-knows__list span {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--ink);
	text-decoration: none;
	background: var(--surface);
}
.author-knows__list a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.author-knows__count {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

.author-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem 1.5rem;
	margin: var(--gap) 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
}
.author-stats__item dt {
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.author-stats__item dd {
	margin: 0.3rem 0 0;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.author-method {
	margin-top: var(--section);
	padding-top: var(--gap);
	border-top: 2px solid var(--ink);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.author-method__title { font-size: var(--step-1); font-weight: 600; }
.author-method__list {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding-left: 1.2rem;
	color: var(--ink-2);
	font-size: 0.95rem;
	line-height: 1.5;
}
.author-method__more { font-size: 0.92rem; color: var(--ink-2); }

@media (max-width: 560px) { .author-head { flex-direction: column; } }

/* ------------------------------------------------ encadré protocole de test */

.protocole {
	margin: var(--section) 0;
	padding: 1.3rem 1.4rem;
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	background: var(--surface);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.protocole__title {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.protocole__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.9rem 1.4rem;
	margin: 0;
}
.protocole__item dt {
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.protocole__item dd {
	margin: 0.25rem 0 0;
	font-size: 0.92rem;
	line-height: 1.4;
}
.protocole__limite {
	padding-top: 0.9rem;
	border-top: 1px solid var(--rule-soft);
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--ink);
}
.protocole__limite-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--signal);
	margin-bottom: 0.3rem;
}
.protocole--erreur {
	border-left-color: var(--signal);
	background: var(--signal-soft);
	color: var(--signal);
	font-family: var(--font-mono);
	font-size: 0.82rem;
	padding: 0.9rem 1.1rem;
}

/* --------------------------------------------------- sommaire et partage */

/* Sommaire d'article. Pas d'encadré : un filet à gauche, la même règle
   typographique que le reste du thème, et rien qui ressemble à un widget. */
.wsi-toc {
	margin: 0.4rem 0 0.6rem;
	padding: 0.1rem 0 0.1rem 1.1rem;
	border-left: 2px solid var(--rule);
}
.wsi-toc__titre {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 0.55rem;
}
.wsi-toc__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: wsi-toc;
	display: grid;
	gap: 0.3rem;
}
.wsi-toc__item {
	counter-increment: wsi-toc;
	display: flex;
	gap: 0.55rem;
	align-items: baseline;
	line-height: 1.35;
}
.wsi-toc__item::before {
	content: counter(wsi-toc, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--ink-3);
	flex: none;
}
.wsi-toc__lien {
	font-family: var(--font-display);
	font-size: 0.94rem;
	color: var(--ink-2);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.wsi-toc__lien:hover,
.wsi-toc__lien:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* Le titre visé ne doit pas passer sous l'entête collant. */
.article__body :is(h2, h3)[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* La zone borne la colonne du sommaire : le flottant y est contenu et ne
   déborde donc pas sur le bloc des articles voisins, qui vit en dehors. */
.article__zone { display: flow-root; }

/* Deux rendus, un seul affiché. La colonne est fille de l'article pour rester
   collante sur toute sa hauteur ; le flux vit dans le corps de texte. */
.wsi-toc--colonne { display: none; }
.article__body > .wsi-toc--flux { margin-bottom: 1.35rem; }

@media (min-width: 1280px) {
	.wsi-toc--flux { display: none; }

	/* La colonne se pose dans la marge gauche, à hauteur du titre, et suit la
	   lecture. Le décalage part du centre de page : demi-largeur de la colonne
	   de texte, puis largeur du sommaire et sa gouttière. */
	.wsi-toc--colonne {
		display: block;
		position: sticky;
		top: calc(var(--header-h) + 1.5rem);
		float: left;
		width: 196px;
		margin-left: calc(50% - (var(--wrap-narrow) / 2) - 224px);
		/* Posé avant l'image à la une dans le gabarit : la marge reprend
		   simplement l'écart que cette image a au-dessus d'elle. */
		margin-top: var(--gap);
		margin-bottom: 1rem;
		padding: 0 1.1rem 0 0;
		border-left: 0;
		border-right: 2px solid var(--rule);
		text-align: right;
	}
	.wsi-toc--colonne .wsi-toc__item { flex-direction: row-reverse; }
}

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

.share {
	margin-top: var(--section);
	padding-top: var(--gap);
	border-top: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.2rem;
}
.share__label {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
/*
 * Le bouton « copier » et les liens doivent faire exactement la même hauteur.
 * Un <button> n'hérite ni de la police ni de la hauteur de ligne d'un <a> :
 * on aligne les deux sur inline-flex et une hauteur fixe plutôt que de
 * compter sur des paddings identiques.
 */
.share__link {
	display: inline-flex;
	align-items: center;
	height: 2.1rem;
	padding: 0 0.75rem;
	box-sizing: border-box;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
	font-family: var(--font-display);
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1;
	color: var(--ink-2);
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.share__link:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.share__copy.is-copied { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.share__list li { display: flex; }

/* ------------------------------------------------ texte de fond d'accueil */

.home-texte {
	margin-top: var(--section);
	padding-top: var(--gap);
	border-top: 2px solid var(--ink);
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}
.home-texte h2 { font-size: var(--step-2); font-weight: 800; margin-top: 1.2rem; }
.home-texte h2:first-child { margin-top: 0; }
.home-texte h3 { font-size: var(--step-1); font-weight: 600; margin-top: 0.6rem; }
.home-texte p { color: var(--ink-2); }
.home-texte ul {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-left: 1.3rem;
	color: var(--ink-2);
}
.home-texte strong { color: var(--ink); }

/* -------------------------------------------------------- formulaire contact */

/* Contact Form 7 sort son propre balisage ; on ne style que ce qu'il produit,
   sans dépendre de ses classes de présentation. */

.wsi-form { margin-top: var(--gap); }
.wsi-form form { display: flex; flex-direction: column; gap: 1.1rem; }
.wsi-form p { margin: 0; }

.wsi-form__duo { display: grid; gap: 1.1rem; }
@media (min-width: 560px) {
	.wsi-form__duo { grid-template-columns: 1fr 1fr; }
}

.wsi-form__champ { display: flex; flex-direction: column; gap: 0.4rem; }
.wsi-form__champ label {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.wsi-form__requis { color: var(--signal); }
.wsi-form__aide { font-size: 0.85rem; color: var(--ink-3); line-height: 1.45; }

.wsi-form :is(input[type="text"], input[type="email"], textarea, select) {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 0.95rem;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}
.wsi-form textarea { resize: vertical; min-height: 9rem; }
.wsi-form select {
	background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
		linear-gradient(135deg, currentcolor 50%, transparent 50%);
	background-position: right 1rem center, right 0.7rem center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.2rem;
	color: var(--ink-2);
}
.wsi-form :is(input, textarea, select):focus-visible {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.wsi-form ::placeholder { color: var(--ink-3); opacity: 1; }

.wsi-form__consent { font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; }
.wsi-form__consent .wpcf7-list-item { margin: 0; }
.wsi-form__consent label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.wsi-form__consent input[type="checkbox"] {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.18rem;
	accent-color: var(--accent);
}

.wsi-form__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.wsi-form__bouton {
	display: inline-flex;
	align-items: center;
	height: 2.6rem;
	padding: 0 1.4rem;
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--font-display);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.wsi-form__bouton:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.wsi-form__delai { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* Retours du plugin : une erreur doit se voir, une confirmation aussi. */
.wsi-form .wpcf7-not-valid-tip {
	font-family: var(--font-display);
	font-size: 0.82rem;
	color: var(--signal);
	margin-top: 0.3rem;
}
.wsi-form :is(input, textarea, select).wpcf7-not-valid { border-color: var(--signal); }
.wsi-form .wpcf7-response-output {
	margin: 0;
	padding: 0.8rem 1rem;
	border: 1px solid var(--rule);
	border-left: 3px solid var(--signal);
	border-radius: var(--radius);
	background: var(--surface);
	font-size: 0.92rem;
	color: var(--ink-2);
}
.wsi-form form.sent .wpcf7-response-output { border-left-color: var(--accent); }
.wsi-form .wpcf7-spinner { margin-left: 0.6rem; }


.site-footer {
	margin-top: var(--section);
	border-top: 2px solid var(--ink);
	background: var(--surface);
	padding-block: var(--section) 1.6rem;
}
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap) 3rem;
	justify-content: space-between;
	padding-bottom: var(--gap);
}
.site-footer__name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.site-footer__tagline { color: var(--ink-2); font-size: 0.92rem; max-width: 42ch; margin-top: 0.3rem; }
.site-footer__list,
.site-footer__legal-list {
	display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem;
	list-style: none; margin: 0; padding: 0;
	font-family: var(--font-display); font-size: 0.9rem;
}
.site-footer__list a,
.site-footer__legal-list a { color: var(--ink-2); text-decoration: none; }
.site-footer__list a:hover,
.site-footer__legal-list a:hover { color: var(--accent); }
.site-footer__legal {
	display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
	justify-content: space-between; align-items: center;
	padding-top: 1.2rem;
	border-top: 1px solid var(--rule);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--ink-3);
}
.site-footer__legal-list { font-family: var(--font-mono); font-size: 0.72rem; }

.widget__title {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 0.6rem;
}

/* ---------------------------------------------------------------------------
   Ancre différée
   Cible pas encore publiée : le visiteur lit du texte ordinaire, l'éditeur
   connecté voit un repère pour savoir ce qui reste à écrire.
   --------------------------------------------------------------------------- */
.lien-differe--attente {
	border-bottom: 1px dashed var(--signal);
	cursor: help;
}

/* ---------------------------------------------------------------------------
   Questions fréquentes
   Reprend la formulation des questions affichées par Google, et sert de source
   au nœud FAQPage. Réponses toujours visibles.
   --------------------------------------------------------------------------- */
.faq {
	margin: 3rem 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--rule);
}
.faq__titre {
	font-family: var(--font-display);
	font-size: var(--step-2);
	margin: 0 0 1.5rem;
}
.faq__item + .faq__item {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule-soft);
}
.faq__q {
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.3;
	margin: 0 0 0.5rem;
	color: var(--ink);
}
.faq__a > :first-child { margin-top: 0; }
.faq__a > :last-child { margin-bottom: 0; }