/*
Theme Name: Les Simpson .fr
Theme URI: https://www.lessimpson.fr
Author: Thierry LEROY
Author URI: https://www.thierryleroy.com
Description: Thème éditorial pour lessimpson.fr — navigation accessible au clavier et au tactile, mise en page en grille, emplacements publicitaires manuels. Sans dépendance : une feuille de style, un fichier JavaScript. Successeur du thème Cherry.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lessimpsonfr
Tags: blog, custom-menu, custom-logo, featured-images, translation-ready, accessibility-ready
*/

/* =========================================================================
   1. Jetons de conception
   ====================================================================== */

:root {
	--primary: #1e6c93;
	--primary-dark: #14495f;
	--primary-light: #e8f1f6;
	--on-primary: #ffffff;
	--accent: #c2571a;

	--text: #22303a;
	--text-muted: #5c6b75;
	--surface: #ffffff;
	--surface-alt: #f4f7f9;
	--border: #d6e0e6;

	--focus: #c2571a;
	--shadow-sm: 0 1px 2px rgb(20 73 95 / 8%), 0 2px 8px rgb(20 73 95 / 6%);
	--shadow-md: 0 2px 4px rgb(20 73 95 / 10%), 0 8px 24px rgb(20 73 95 / 10%);

	/* Échelle typographique fluide */
	--step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.875rem);
	--step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--step-1: clamp(1.15rem, 1.09rem + 0.3vw, 1.3rem);
	--step-2: clamp(1.35rem, 1.24rem + 0.55vw, 1.65rem);
	--step-3: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
	--step-4: clamp(1.9rem, 1.55rem + 1.75vw, 2.85rem);

	/* Échelle d'espacement */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-s: 0.75rem;
	--space-m: 1.25rem;
	--space-l: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4.5rem;

	--radius: 0.625rem;
	--radius-sm: 0.375rem;
	--radius-pill: 999px;

	--wide-width: 68rem;
	/* Une seule largeur pour toute la page : texte, image, bannière, grille et
	   filets partagent le même bord et la même largeur. Plus aucun décalage.
	   La ligne est longue (~118 caractères) — choix assumé de remplissage. */
	--content-width: var(--wide-width);
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--nav-height: 3.5rem;

	--duration: 180ms;
	--easing: cubic-bezier(0.4, 0, 0.2, 1);
	--transition: var(--duration) var(--easing);
}

@media (prefers-color-scheme: dark) {
	:root {
		--primary: #6fb4d8;
		--primary-dark: #a5d3ea;
		--primary-light: #16323f;
		--on-primary: #0c1c24;
		--accent: #f0955a;

		--text: #e4edf2;
		--text-muted: #9fb2bd;
		--surface: #0f1e26;
		--surface-alt: #16303c;
		--border: #2a4b5b;

		--focus: #f0955a;
		--shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 30%);
		--shadow-md: 0 2px 4px rgb(0 0 0 / 45%), 0 8px 24px rgb(0 0 0 / 35%);
	}
}

/* =========================================================================
   2. Reset
   ====================================================================== */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Les ancres ne doivent pas atterrir sous la barre de navigation. */
	scroll-padding-top: calc(var(--nav-height) + var(--space-m));
}

body {
	min-height: 100vh;
	margin: 0;
	background-color: var(--surface);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: var(--step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--primary);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
	overflow-wrap: break-word;
}

h1 {
	font-size: var(--step-4);
}
h2 {
	font-size: var(--step-3);
}
h3 {
	font-size: var(--step-2);
}
h4 {
	font-size: var(--step-1);
}
h5,
h6 {
	font-size: var(--step-0);
}

p,
li,
dd,
figcaption {
	overflow-wrap: break-word;
	text-wrap: pretty;
}

/* L'ancien reset mettait strong à 400 : plus aucun gras sur le site. */
strong,
b {
	font-weight: 700;
}

em,
i {
	font-style: italic;
}

a {
	color: var(--primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--primary-dark);
}

/* L'ancien reset posait outline:none : aucun repère de focus au clavier. */
:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

hr {
	height: 1px;
	margin-block: var(--space-xl);
	background-color: var(--border);
	border: none;
}

code,
kbd,
samp,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

:not(pre) > code {
	padding: 0.15em 0.4em;
	background-color: var(--primary-light);
	border-radius: var(--radius-sm);
}

pre {
	padding: var(--space-m);
	overflow-x: auto;
	background-color: var(--primary-light);
	border-radius: var(--radius);
	line-height: 1.55;
}

blockquote {
	padding-inline-start: var(--space-m);
	border-inline-start: 4px solid var(--primary);
	font-style: italic;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: var(--space-xs) var(--space-s);
	border-bottom: 1px solid var(--border);
	text-align: start;
}

@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;
	}
}

/* =========================================================================
   2 bis. Image de fond de page
   ====================================================================== */

/* Fond de la page d'accueil.

   L'image occupe un rectangle centré : largeur celle du contenu, hauteur celle
   de la fenêtre, et « contain » pour qu'elle y tienne EN ENTIER — ni recadrée,
   ni déformée, ni tronquée par le bas.

   Elle est portée par un calque dédié et non par body : un background posé sur
   body ne peut pas être borné en largeur indépendamment de l'élément. Le calque
   est en position fixed, donc l'image reste entièrement visible pendant tout le
   défilement. */
.has-page-background::after {
	content: "";
	position: fixed;
	/* Décalé de la hauteur de la barre de navigation : sans ça, le haut de
	   l'image passait dessous et en restait caché. */
	top: var(--nav-height);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	background-image: var(--page-background);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

/* Voile de lisibilité, entre l'image et le contenu. Sans lui, le texte serait
   illisible sur un visuel coloré. */
.has-page-background::before {
	content: "";
	position: fixed;
	inset: var(--nav-height) 0 0 0;
	z-index: -1;
	background-color: rgb(255 255 255 / 88%);
	pointer-events: none;
}

/* Les zones de contenu ne posent aucune couleur opaque par-dessus. */
.has-page-background,
.has-page-background .site-main,
.has-page-background .page-header {
	background-color: transparent;
}

@media (prefers-color-scheme: dark) {
	.has-page-background::before {
		background-color: rgb(15 30 38 / 90%);
	}
}

/* =========================================================================
   3. Utilitaires
   ====================================================================== */

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

.skip-link {
	position: absolute;
	top: var(--space-xs);
	left: var(--space-xs);
	z-index: 100;
	padding: var(--space-xs) var(--space-m);
	background-color: var(--surface);
	color: var(--primary);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	transform: translateY(-200%);
	transition: transform var(--transition);
}

.skip-link:focus {
	transform: translateY(0);
}

/* =========================================================================
   4. Barre de navigation
   ====================================================================== */

.site-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--primary);
	color: var(--on-primary);
}

.site-nav a {
	color: inherit;
	text-decoration: none;
}

.site-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	/* Plus large que --wide-width : à 68rem, le menu du site (885px de liens)
	   débordait du conteneur et provoquait un défilement horizontal. */
	max-width: 78rem;
	min-width: 0;
	min-height: var(--nav-height);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-nav__brand {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-inline-end: auto;
	font-size: var(--step-1);
	font-weight: 700;
	white-space: nowrap;
}

.site-nav__brand img {
	width: auto;
	max-height: 2rem;
}

.site-nav__brand:hover {
	color: var(--on-primary);
	text-decoration: underline;
}

/* --- Bouton hamburger ---------------------------------------------------- */

.site-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	color: inherit;
	border-radius: var(--radius-sm);
}

.site-nav__toggle:hover {
	background-color: rgb(255 255 255 / 12%);
}

.site-nav__toggle-bars,
.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
	display: block;
	width: 1.35rem;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}

.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
	content: "";
	position: absolute;
}

.site-nav__toggle-bars {
	position: relative;
}

.site-nav__toggle-bars::before {
	transform: translateY(-0.4rem);
}

.site-nav__toggle-bars::after {
	transform: translateY(0.4rem);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars {
	background-color: transparent;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::before {
	transform: rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::after {
	transform: rotate(-45deg);
}

/* --- Liste des liens ---------------------------------------------------- */

.nav-menu,
.sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-menu .menu-item {
	position: relative;
}

.nav-menu a {
	display: block;
	padding: var(--space-xs);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
	background-color: rgb(255 255 255 / 12%);
}

/* Page courante : un simple filet sous le libellé. Un box-shadow inset suivait
   l'arrondi du lien et dessinait un cadre au lieu d'un trait. */
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a,
.nav-menu .current-menu-ancestor > a {
	position: relative;
	font-weight: 700;
}

.nav-menu .current-menu-item > a::before,
.nav-menu .current_page_item > a::before,
.nav-menu .current-menu-ancestor > a::before {
	content: "";
	position: absolute;
	right: var(--space-xs);
	bottom: 0.15rem;
	left: var(--space-xs);
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
}

/* --- Bouton de dépliage des sous-menus ---------------------------------- */

.submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	flex: none;
	color: inherit;
	border-radius: var(--radius-sm);
}

.submenu-toggle:hover {
	background-color: rgb(255 255 255 / 12%);
}

.submenu-toggle__icon {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform var(--transition);
}

.submenu-toggle[aria-expanded="true"] .submenu-toggle__icon {
	transform: translateY(0.1em) rotate(-135deg);
}

/* =========================================================================
   5. Navigation — mobile (tiroir)
   ====================================================================== */

@media (max-width: 67.999rem) {
	.site-nav__panel {
		position: fixed;
		inset: var(--nav-height) 0 0 auto;
		z-index: 49;
		width: min(22rem, 85vw);
		padding: var(--space-m) var(--space-m) var(--space-2xl);
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--primary);
		box-shadow: var(--shadow-md);
		transform: translateX(101%);
		visibility: hidden;
		/* visibility s'interpole de façon discrète : incluse dans une transition
		   ordinaire, elle ne basculerait qu'à mi-parcours, et focus() resterait
		   sans effet pendant ce temps. À la fermeture on la retarde jusqu'à la
		   fin du glissement ; à l'ouverture (règle suivante) elle est immédiate. */
		transition: transform var(--transition), visibility 0s linear var(--duration);
	}

	.site-nav__toggle[aria-expanded="true"] ~ .site-nav__panel {
		transform: translateX(0);
		visibility: visible;
		transition: transform var(--transition), visibility 0s;
	}

	/* Voile sur le contenu. Élément distinct et non pseudo-élément du tiroir :
	   position:fixed dans un ancêtre transformé se positionne par rapport à
	   cet ancêtre, le voile suivrait donc le tiroir hors de l'écran. */
	.site-nav__scrim {
		position: fixed;
		inset: var(--nav-height) 0 0 0;
		z-index: 48;
		background-color: rgb(12 28 36 / 55%);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition), visibility 0s linear var(--duration);
	}

	.site-nav__toggle[aria-expanded="true"] ~ .site-nav__scrim {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--transition), visibility 0s;
	}

	html.has-nav-open,
	html.has-nav-open body {
		overflow: hidden;
	}

	.site-nav__panel .menu-item {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		border-bottom: 1px solid rgb(255 255 255 / 15%);
	}

	.site-nav__panel .nav-menu > .menu-item:last-child {
		border-bottom: none;
	}

	.site-nav__panel .nav-menu a {
		padding: var(--space-s) var(--space-xs);
	}

	/* Accordéon : replié par défaut, déplié par le bouton. */
	.site-nav__panel .sub-menu {
		grid-column: 1 / -1;
		display: none;
		padding-inline-start: var(--space-m);
		border-top: 1px solid rgb(255 255 255 / 15%);
	}

	.site-nav__panel .menu-item.is-open > .sub-menu {
		display: block;
	}

	/* Repli sans JS : le sous-menu s'ouvre au survol du parent. */
	.site-nav:not(.site-nav--enhanced) .menu-item:hover > .sub-menu,
	.site-nav:not(.site-nav--enhanced) .menu-item:focus-within > .sub-menu {
		display: block;
	}

	.site-nav__search {
		margin-top: var(--space-m);
	}
}

/* =========================================================================
   6. Navigation — desktop
   ====================================================================== */

@media (min-width: 68rem) {
	.site-nav__toggle,
	.site-nav__scrim {
		display: none;
	}

	.site-nav__panel {
		display: flex;
		align-items: center;
		gap: var(--space-s);
	}

	/* Jamais deux lignes : un menu qui se replie casse la hauteur de la barre
	   collante. Pas d'overflow ici non plus, cela créerait un conteneur de
	   défilement qui rognerait les panneaux de sous-menu ; c'est le nom du site
	   qui cède de la place (voir .site-nav__brand plus bas). */
	.site-nav__panel > .nav-menu {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.nav-menu > .menu-item {
		display: flex;
		align-items: center;
		flex: none;
	}

	.site-nav__panel > .nav-menu > .menu-item > a {
		white-space: nowrap;
	}

	/* Panneau flottant */
	.nav-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 60;
		min-width: 13rem;
		max-width: min(22rem, 90vw);
		padding: var(--space-xs);
		background-color: var(--primary);
		border-radius: 0 0 var(--radius) var(--radius);
		box-shadow: var(--shadow-md);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.35rem);
		/* Même raison que pour le tiroir : visibility est discrète, on ne la
		   retarde qu'à la fermeture pour que le panneau soit focalisable dès
		   son ouverture. */
		transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--duration);
	}

	.nav-menu .sub-menu .sub-menu {
		top: 0;
		left: 100%;
		border-radius: var(--radius);
	}

	/* Panneau en colonnes pour les longues listes : les 37 saisons formeraient
	   sinon une colonne de plus de 1400 pixels de haut.

	   Il s'étend sur toute la largeur de la fenêtre au lieu d'être ancré sur son
	   entrée de menu : ancré, un panneau de 600 pixels ouvert depuis une entrée
	   située à droite dépassait le bord de l'écran et provoquait un défilement
	   horizontal entre 1088 et 1366 pixels. En position fixed bornée par
	   left/right, le débordement devient structurellement impossible. */
	.nav-menu .sub-menu--wide {
		position: fixed;
		top: var(--nav-height);
		left: 0;
		right: 0;
		width: auto;
		min-width: 0;
		max-width: none;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
		gap: 0 var(--space-xs);
		/* Contenu aligné sur celui de la barre de navigation. */
		padding: var(--space-s) max(var(--gutter), calc((100% - 78rem) / 2 + var(--gutter)));
		max-height: min(70vh, 26rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 0 0 var(--radius) var(--radius);
	}

	.nav-menu .sub-menu--wide a {
		white-space: nowrap;
	}

	/* Le lien « Voir les N » reste sur sa propre ligne, en bas du panneau. */
	.nav-menu .sub-menu .menu-item--all {
		grid-column: 1 / -1;
		margin-top: var(--space-2xs);
		border-top: 1px solid rgb(255 255 255 / 20%);
	}

	.nav-menu .sub-menu .menu-item--all a {
		font-weight: 700;
	}



	.nav-menu .menu-item.is-open > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		transition: opacity var(--transition), transform var(--transition), visibility 0s;
	}

	/* Repli sans JS uniquement : le survol ouvre le panneau. */
	.site-nav:not(.site-nav--enhanced) .menu-item:hover > .sub-menu,
	.site-nav:not(.site-nav--enhanced) .menu-item:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		transition: opacity var(--transition), transform var(--transition), visibility 0s;
	}

	.nav-menu .sub-menu .menu-item {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.nav-menu .sub-menu a {
		padding-inline: var(--space-s);
		white-space: nowrap;
	}

	/* Le dernier onglet ne doit pas ouvrir son panneau hors de l'écran. */
	.nav-menu > .menu-item:last-child .sub-menu {
		left: auto;
		right: 0;
	}

	.nav-menu > .menu-item:last-child .sub-menu .sub-menu {
		left: auto;
		right: 100%;
	}
}

/* =========================================================================
   7. Recherche
   ====================================================================== */

.search-form {
	display: flex;
	gap: var(--space-xs);
	max-width: 30rem;
}

.search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--space-xs) var(--space-s);
	background-color: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
}

.search-form__submit {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-xs) var(--space-m);
	background-color: var(--primary);
	color: var(--on-primary);
	border-radius: var(--radius-pill);
	font-weight: 600;
	white-space: nowrap;
}

.search-form__submit:hover {
	background-color: var(--primary-dark);
}

.search-form__icon {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
}

/* Dans le tiroir, le libellé du bouton mangeait toute la largeur du champ.
   L'icône suffit visuellement, le libellé reste lu par les lecteurs d'écran. */
.site-nav__search .search-form__submit {
	padding-inline: var(--space-s);
}

.site-nav__search .search-form__submit-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Icône de recherche de la barre de navigation. Le formulaire complet n'y tient
   pas : il reste dans le tiroir mobile et sur la page de recherche. */
.site-nav__search-link {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
	border-radius: var(--radius-sm);
}

.site-nav__search-link:hover {
	background-color: rgb(255 255 255 / 12%);
}

.site-nav__search-link svg {
	width: 1.35rem;
	height: 1.35rem;
}

/* Ces bascules doivent rester ici, après les déclarations de base ci-dessus :
   à spécificité égale, c'est la dernière règle du fichier qui gagne. */
@media (min-width: 68rem) {
	.site-nav__search-link {
		display: flex;
	}

	/* Le formulaire complet n'apparaît que dans le tiroir mobile. */
	.site-nav__search {
		display: none;
	}
}

/* =========================================================================
   8. Mise en page générale
   ====================================================================== */

.page-header,
.site-main,
.breadcrumb {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-main {
	padding-block: var(--space-l) var(--space-2xl);
}

/* Fil d'ariane */
.breadcrumb {
	padding-block: var(--space-m) 0;
	color: var(--text-muted);
	font-size: var(--step--1);
}

.breadcrumb a {
	color: var(--text-muted);
}

.breadcrumb a:hover {
	color: var(--primary);
}

.breadcrumb .breadcrumb_last {
	color: var(--text);
}

.breadcrumb__sep {
	padding-inline: 0.15em;
}

/* --- En-tête de page compact ------------------------------------------- */

.page-header {
	padding-block: var(--space-m) 0;
}

.page-header__title {
	margin-bottom: var(--space-xs);
}

.page-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-m);
	color: var(--text-muted);
	font-size: var(--step--1);
}

.page-header__intro {
	max-width: var(--content-width);
	margin-top: var(--space-s);
	color: var(--text-muted);
	font-size: var(--step-1);
}

.page-header__intro p {
	margin: 0;
}

/* La figure est devenue un élément de premier niveau, hors du <header> : elle
   porte donc elle-même le conteneur, sinon elle se colle au bord gauche de la
   fenêtre au lieu de s'aligner sur le texte. */
.page-header__figure {
	max-width: var(--wide-width);
	margin-inline: auto;
	margin-top: var(--space-m);
	padding-inline: var(--gutter);
}

.page-header__figure img {
	width: auto;
	max-width: 100%;
	/* Plafonnée en hauteur : une affiche en portrait ne doit pas occuper tout
	   l'écran avant le premier paragraphe. */
	max-height: min(55vh, 24rem);
	border-radius: var(--radius);
}

/* --- Contenu ----------------------------------------------------------- */

/* Colonne de lecture calée à gauche, comme le titre, le fil d'ariane et la
   grille de cartes. Centrée, elle donnait un décalage visible. */
.entry-content > * {
	max-width: var(--content-width);
}

.entry-content > * + * {
	margin-top: var(--space-m);
}

.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
	margin-top: var(--space-xl);
}

.entry-content > :first-child {
	margin-top: 0;
}

/* Justification réservée aux écrans assez larges. En dessous de 48rem la ligne
   descend sous ~70 caractères et la justification creuse des « rivières » de
   blanc entre les mots, très visibles sur mobile. La césure automatique ne les
   corrige pas : Chromium n'embarque pas toujours le dictionnaire français. */
@media (min-width: 48rem) {
	.entry-content > p,
	.entry-content > ul li,
	.entry-content > ol li {
		text-align: justify;
		text-justify: inter-word;
	}
}

.entry-content > .alignwide {
	max-width: var(--wide-width);
}

.entry-content > .aligncenter {
	margin-inline: auto;
}

.entry-content > .alignfull {
	max-width: none;
	margin-inline: calc(var(--gutter) * -1);
}

.entry-content ul:not(.nav-menu):not(.sub-menu),
.entry-content ol {
	padding-inline-start: 1.5rem;
}

.entry-content li + li {
	margin-top: var(--space-2xs);
}

.entry-content figure {
	margin-inline: auto;
}

.entry-content figcaption {
	margin-top: var(--space-2xs);
	color: var(--text-muted);
	font-size: var(--step--1);
	text-align: center;
}

.entry-content iframe,
.entry-content video {
	width: 100%;
	max-width: 100%;
	border-radius: var(--radius);
}

/* Titre de section (« L'actualité de la série », « Épisodes »…).
   Aligné sur la grille de cartes qui le suit, et non sur la colonne de texte :
   sinon il apparaît décalé vers le centre. */
.section-title {
	margin-block: var(--space-xl) var(--space-m);
}

/* =========================================================================
   9. Grille de cartes
   ====================================================================== */

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr));
	gap: var(--space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card:hover {
	transform: translateY(-2px);
	border-color: var(--primary);
	box-shadow: var(--shadow-md);
}

/* La carte entière est cliquable, mais un seul lien est dans l'ordre de
   tabulation : le titre. */
.card:focus-within {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

.card__media {
	margin: 0;
	background-color: var(--surface-alt);
}

.card__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.card__media--empty {
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--primary-light), var(--surface-alt));
}

.card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-m);
}

.card__title {
	font-size: var(--step-1);
}

.card__title a {
	text-decoration: none;
}

.card__title a:hover {
	text-decoration: underline;
}

/* Zone cliquable étendue à toute la carte. */
.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.card__excerpt {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--step--1);
}

.card__excerpt p {
	margin: 0;
}

.card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-m);
	align-items: baseline;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--space-xs);
	color: var(--text-muted);
	font-size: var(--step--1);
}

/* Purement décoratif : la carte entière est déjà cliquable via le titre, et un
   second lien vers la même cible serait recouvert par sa zone étendue. */
.card__more {
	color: var(--primary);
	font-weight: 600;
}

.card__more::after {
	content: "»";
	padding-inline-start: 0.35em;
}

/* =========================================================================
   10. Liens de partage
   ====================================================================== */

/* Étaient en position:fixed avec z-index:-5 : les boutons passaient sous le
   contenu et sous la barre de navigation. */
.share-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
	margin-block: var(--space-l);
}

.share-links__label {
	color: var(--text-muted);
	font-size: var(--step--1);
}

.share-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--primary);
	background-color: var(--primary-light);
	border-radius: var(--radius-pill);
	transition: background-color var(--transition), color var(--transition);
}

.share-links a:hover {
	background-color: var(--primary);
	color: var(--on-primary);
}

.share-links svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

/* =========================================================================
   11. Navigation entre contenus frères
   ====================================================================== */

.siblings {
	margin-top: var(--space-2xl);
	padding-top: var(--space-l);
	border-top: 1px solid var(--border);
}

.siblings__title {
	margin-bottom: var(--space-s);
	font-size: var(--step-1);
}

.siblings__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.siblings__list a {
	display: block;
	padding: var(--space-2xs) var(--space-s);
	background-color: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	font-size: var(--step--1);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.siblings__list a:hover {
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--on-primary);
}

/* =========================================================================
   12. Pagination
   ====================================================================== */

.pagination {
	margin-top: var(--space-xl);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: var(--space-s);
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	text-decoration: none;
}

.pagination .page-numbers:hover {
	border-color: var(--primary);
	background-color: var(--primary-light);
}

.pagination .page-numbers.current {
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--on-primary);
	font-weight: 700;
}

.pagination .dots {
	border-color: transparent;
}

/* =========================================================================
   13. Messages et états vides
   ====================================================================== */

.notice {
	max-width: var(--content-width);
	margin-inline: auto;
	padding: var(--space-m);
	background-color: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.notice > * + * {
	margin-top: var(--space-s);
}

.error-404 {
	padding-block: var(--space-l);
}

/* =========================================================================
   14. Emplacements publicitaires
   ====================================================================== */

/* Bannières. La hauteur est réservée en ligne par PHP, pas ici : elle dépend du
   format (100 px en horizontal, la valeur exacte pour un bloc à taille fixe).
   Un simple min-height ne réservait rien — il n'empêche pas de grandir, et le
   contenu situé en dessous descendait à l'arrivée de l'annonce. */
/* Ni cadre ni libellé visible : l'emplacement se résume à son image de fond,
   qui n'est qu'un état d'attente. Le aria-label « Publicité » reste porté par
   l'élément pour les lecteurs d'écran. */
.ad-slot {
	display: block;
	margin-block: var(--space-m);
}

/* La réservation est portée par un PADDING, pas par une hauteur.
   Le script AdSense pose « height: auto !important » en ligne sur tous les
   ancêtres du <ins> — aucune feuille de style ne peut contrer un !important
   en ligne. Il ne touche en revanche pas au padding. Et comme le cadre est
   sorti du flux, il ne contribue pas à la hauteur de la boîte : celle-ci vaut
   donc exactement son padding, quoi que fasse AdSense. */
.ad-slot__box {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
}

/* Sorti du flux : sa hauteur ne peut pas influencer celle de la boîte.
   Pas de flex ici : un <ins> vide placé en élément flex se réduit à 0 de large,
   AdSense lit alors une largeur disponible nulle et ne sert aucune annonce.
   Le centrage passe donc par text-align, qui n'affecte pas le dimensionnement. */
.ad-slot__frame {
	position: absolute;
	inset: 0;
	z-index: 1;
	text-align: center;
}

/* Largeur réelle indispensable : c'est sur elle qu'AdSense calcule la taille
   d'annonce à servir. Un bloc à taille fixe l'emporte via son style en ligne,
   et se retrouve centré par le text-align du cadre. */
.ad-slot__frame .adsbygoogle {
	width: 100%;
	max-width: 100%;
}

/* Bannière automatique en haut de page : elle vit dans .page-header, dont elle
   hérite la largeur et les gouttières. */
/* La bannière est un élément de premier niveau, sorti de l'en-tête pour ne pas
   se superposer au fond : elle doit donc porter elle-même le conteneur, sinon
   elle se colle au bord gauche de la fenêtre au lieu d'être centrée avec le
   reste du contenu. */
.ad-slot--top {
	max-width: var(--wide-width);
	margin-inline: auto;
	margin-block: var(--space-m) 0;
	padding-inline: var(--gutter);
}

.ad-slot--inline {
	max-width: var(--content-width);
}



/* Annonce ancrée en bas d'écran, repliable par une poignée à chevron.

   La hauteur est réservée par un PADDING et non par « height » : le script
   AdSense pose « height: auto !important » en ligne sur tous les ancêtres du
   <ins>, y compris cet <aside>, et aucune feuille de style ne peut contrer un
   !important en ligne. Le padding, lui, n'est jamais touché. */
.ad-anchor {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 40;
	background-color: var(--surface);
	border-top: 1px solid var(--border);
	box-shadow: 0 -2px 12px rgb(20 73 95 / 12%);
	/* Hors écran par défaut : la barre ne monte qu'une fois révélée, après un
	   peu de défilement. Le repli utilisateur revient à ce même état. */
	transform: translateY(100%);
	transition: transform var(--transition);
}

html[data-ad-anchor="open"] .ad-anchor {
	transform: translateY(0);
}

.ad-anchor[hidden] {
	display: none;
}

.ad-anchor__box {
	position: relative;
	height: 0;
	max-width: var(--wide-width);
	margin-inline: auto;
	overflow: hidden;
}



/* Sorti du flux : ne contribue pas à la hauteur de la boîte. */
.ad-anchor__frame {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ad-anchor__frame .adsbygoogle {
	width: 100%;
	height: 100%;
}



/* --- Poignée -------------------------------------------------------------
   Frère de la barre et non enfant : un « transform » sur un ancêtre devient le
   bloc conteneur de ses descendants en position fixed, la poignée suivrait donc
   la barre hors de l'écran. */
.ad-anchor-toggle {
	position: fixed;
	bottom: 0;
	left: 50%;
	z-index: 41;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 5rem;
	height: 1.5rem;
	padding: 0;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-bottom: none;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	box-shadow: 0 -2px 8px rgb(20 73 95 / 10%);
	transform: translateX(-50%);
	transition: bottom var(--transition);
}

.ad-anchor-toggle[hidden] {
	display: none;
}

html[data-ad-anchor="open"] .ad-anchor-toggle {
	bottom: calc(100px + 1px);
}

.ad-anchor-toggle:hover {
	background-color: var(--surface-alt);
}

/* Chevron : pointe vers le bas quand la barre est ouverte (l'action est de
   replier), vers le haut quand elle est repliée (l'action est de l'ouvrir). */
.ad-anchor-toggle__chevron {
	width: 0.6rem;
	height: 0.6rem;
	margin-top: 0.35rem;
	border-right: 2px solid var(--text-muted);
	border-bottom: 2px solid var(--text-muted);
	transform: rotate(-135deg);
	transition: transform var(--transition);
}

html[data-ad-anchor="open"] .ad-anchor-toggle__chevron {
	transform: rotate(45deg);
	margin-top: 0.35rem;
}

/* L'ancre ne doit pas masquer la fin du contenu. La classe est posée par PHP
   avant le premier rendu, jamais par JavaScript après coup. */
html.has-ad-anchor body {
	padding-bottom: calc(100px + 2.5rem);
}

/* Repliée, seule la poignée reste : on rend la place au contenu. Ce décalage
   est déclenché par l'utilisateur, il n'est donc pas compté dans le CLS. */
html.has-ad-anchor[data-ad-anchor="collapsed"] body {
	padding-bottom: 2.5rem;
}

/* =========================================================================
   15. Pied de page
   ====================================================================== */

.site-footer {
	margin-top: var(--space-2xl);
	padding-block: var(--space-l);
	background-color: var(--primary);
	color: var(--on-primary);
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m) var(--space-l);
	align-items: center;
	justify-content: space-between;
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-footer a {
	color: inherit;
}

.site-footer .nav-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-m);
}

.site-footer .nav-menu a {
	padding: var(--space-2xs) 0;
}

.site-footer .nav-menu a:hover,
.site-footer .nav-menu a:focus-visible {
	background-color: transparent;
	text-decoration: underline;
}

.site-footer__credits {
	font-size: var(--step--1);
}

/* =========================================================================
   16. Compatibilité blocs Gutenberg
   ====================================================================== */

.wp-block-image img {
	border-radius: var(--radius-sm);
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: var(--radius-sm);
}

.wp-block-embed__wrapper iframe {
	aspect-ratio: 16 / 9;
	height: auto;
}

.wp-block-button__link {
	background-color: var(--primary);
	color: var(--on-primary);
	border-radius: var(--radius-sm);
	text-decoration: none;
}

.wp-block-button__link:hover {
	background-color: var(--primary-dark);
	color: var(--on-primary);
}