/*
Theme Name: Notre-Dame
Description: Thème de l'école Notre-Dame, Saint-Valery-sur-Somme.
Author: Arthur Laheyne
Version: 0.3.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: notre-dame
*/

/*
 * Design system « École Notre-Dame » (copie de référence : docs/design/design-system/).
 * Les jetons ci-dessous reprennent tokens.json ; les classes nd- reprennent components/bundle.css.
 * Polices : déclarées dans theme.json (fichiers dans assets/fonts/, rien chez Google).
 */

:root {
	/* Couleurs */
	--cream: #fdfaf3;
	--surface: #fff;
	--sand: #fcf6eb;
	--sand-deep: #f5ede0;
	--sky: #e3f2fe;
	--ink: #012d61;
	--ink-muted: #47557a;
	--on-ink: #fff;
	--on-ink-muted: #c9d3ea;
	--yellow: #fed04f;
	--logo-sky: #7ecafb;
	--logo-green: #a7e1ab;
	--logo-sand: #f3c16c;
	--tile-yellow: #fedc78;
	--tile-green: #c4ebc6;
	--tile-blue: #a5dcfd;
	--tile-pink: #fdcde2;
	--pink: #d73670;
	--blue: #1c74bd;
	--green: #2c914f;
	--pink-soft: #fce9f1;
	--blue-soft: #e3f2fe;
	--green-soft: #e6f6ed;
	--on-brand: #fff;
	--on-yellow: var(--ink);
	--link: var(--ink);
	--focus: var(--ink);

	/* Polices */
	--font-body: var(--wp--preset--font-family--body);
	--font-rounded: var(--wp--preset--font-family--rounded);
	--font-hand: var(--wp--preset--font-family--hand);
	--font-brush: var(--wp--preset--font-family--brush);

	/* Espaces */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-20: 80px;

	/* Arrondis */
	--radius-sm: 12px;
	--radius-md: 16px;
	--radius-lg: 22px;
	--radius-pill: 999px;
	--wave: 48px;

	/* Ombres, teintées du navy */
	--shadow-card: 0 6px 18px color-mix(in srgb, var(--ink) 12%, transparent);
	--shadow-soft: 0 2px 6px color-mix(in srgb, var(--ink) 10%, transparent);

	/* Tailles */
	--container: 1120px;
	--hero-min: 520px;
	--hero-plain-min: 400px;
	/* Fond du hero pendant l'arrivée de la photo : ton moyen de la photo actuelle, pour un fondu sans éclair. */
	--hero-fade-from: #736964;
	--tile-height: 74px;
	--icon-badge: 58px;
	--icon-square: 54px;

	/* Mouvement */
	--motion: 0.35s;
	--motion-fast: 0.2s;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 1024px) {
	:root {
		--wave: 64px;
	}
}

/* ---------- Base ---------- */

/* Les ancres (#contact…) s'arrêtent sous l'en-tête, qui reste affiché.
   Pas de surbrillance bleue au toucher (Chrome mobile) : liens et boutons ont leur propre retour visuel ;
   le contour de focus clavier, lui, reste. */
html {
	scroll-padding-top: 110px;
	-webkit-tap-highlight-color: transparent;
}

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

body {
	margin: 0;
	font: 400 16px/26px var(--font-body);
	color: var(--ink);
	background: var(--cream);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--link);
	text-underline-offset: 3px;
}

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

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

.skip-link:focus {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 100;
	width: auto;
	height: auto;
	padding: var(--space-2) var(--space-4);
	clip-path: none;
	background: var(--yellow);
	color: var(--ink);
	font: 700 16px/20px var(--font-rounded);
	border-radius: var(--radius-pill);
}

.nd-icon {
	display: inline-block;
	flex: none;
	vertical-align: middle;
}

.nd-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--space-6);
}

/* ---------- Vague entre deux sections ----------
   .nd-wave sur une section : son bord haut devient une vague de sa couleur de fond,
   bordée d'un liseré blanc comme les séparations du blason. */

.nd-wave {
	position: relative;
}

.nd-wave::before,
.nd-wave::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% - 1px);
	height: var(--wave);
	pointer-events: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 52C220 8 470 0 720 34S1220 78 1440 26V80H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 52C220 8 470 0 720 34S1220 78 1440 26V80H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.nd-wave::before {
	bottom: calc(100% + 7px);
	background: var(--surface);
}

.nd-wave::after {
	background-color: inherit;
}

.nd-wave--flip::before,
.nd-wave--flip::after {
	transform: scaleX(-1);
}

/* ---------- Logotype ---------- */

.nd-wordmark {
	display: inline-flex;
	flex-direction: column;
	text-decoration: none;
}

.nd-wordmark__name {
	font: 700 27px/30px var(--font-rounded);
	color: var(--ink);
	white-space: nowrap;
}

.nd-wordmark__name b {
	font-weight: 700;
	color: var(--blue);
}

.nd-wordmark__sub {
	font: 400 14px/18px var(--font-body);
	color: var(--ink);
}

.nd-wordmark--light .nd-wordmark__name,
.nd-wordmark--light .nd-wordmark__sub {
	color: var(--on-ink);
}

.nd-wordmark--light .nd-wordmark__name b {
	color: var(--logo-sky);
}

.nd-wordmark--center {
	align-items: center;
	text-align: center;
}

/* ---------- Boutons et liens ---------- */

.nd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	height: 52px;
	padding: 0 32px;
	border: 0;
	border-radius: var(--radius-pill);
	font: 700 18px/22px var(--font-rounded);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--shadow-soft);
	transition: transform 0.15s ease;
}

.nd-btn:hover {
	transform: translateY(-2px);
}

/* Appui : le bouton redescend d'un coup à sa place, puis se resoulève au relâchement. */
.nd-btn:active {
	transform: translateY(0);
	transition-duration: 0.08s;
}

.nd-btn--primary {
	background: var(--yellow);
	color: var(--on-yellow);
}

.nd-btn--navy {
	height: 48px;
	padding: 0 28px;
	background: var(--ink);
	color: var(--on-ink);
	font-size: 16px;
}

.nd-btn--sm {
	gap: var(--space-2);
	height: 44px;
	padding: 0 var(--space-6);
	font-size: 16px;
}

.nd-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 700 16px/20px var(--font-rounded);
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Flèches des boutons et liens : avancent au survol, filent à l'appui et reviennent en ressort au relâchement. */
a .nd-icon--arrow-right {
	transition: transform var(--motion) var(--ease-out);
}

a:hover .nd-icon--arrow-right {
	transform: translateX(3px);
}

a:active .nd-icon--arrow-right {
	transform: translateX(8px);
	transition-duration: 0.08s;
}

/* ---------- En-tête : bande de sable au bord ondulé ---------- */

.nd-header {
	--logo-height: 64px;
	/* Toujours visible : collé en haut au défilement. */
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	padding: var(--space-3) var(--space-6) 0;
	background: linear-gradient(90deg, var(--sand-deep), var(--sand) 45%);
	/* Le sable mouillé déborde sur les côtés pour glisser sans laisser de vide ; rien ne défile en largeur. */
	overflow-x: clip;
	/* Ombre qui épouse la vague (un box-shadow resterait rectangulaire) : l'en-tête se détache du fond sable. */
	filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--ink) 42%, transparent));
	transition: padding var(--motion) var(--ease-out);
}

/* Sur la photo d'accueil, l'en-tête se pose par-dessus et y reste au défilement. */
.nd-header--overlay {
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 auto 0;
}

.nd-header::before,
.nd-header::after {
	content: "";
	position: absolute;
	top: calc(100% - 12px);
	left: 0;
	right: 0;
	height: 40px;
	pointer-events: none;
	background: linear-gradient(90deg, var(--sand-deep), var(--sand) 45%);
}

/* Sable sec : un rivage irrégulier, longues pentes douces. */
.nd-header::after {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V30C1300 40 1180 44 1040 38C900 32 820 22 680 24C540 26 420 40 280 44C170 47 80 42 0 36Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V30C1300 40 1180 44 1040 38C900 32 820 22 680 24C540 26 420 40 280 44C170 47 80 42 0 36Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* Sable mouillé : le même rivage un peu plus bas, à demi transparent ; il avance et recule comme la marée
   et glisse doucement de gauche à droite (deux rythmes différents, le mouvement ne se répète pas à l'identique). */
.nd-header::before {
	left: -16px;
	right: -16px;
	opacity: 0.7;
	transform-origin: top;
	animation: nd-tide 6s ease-in-out infinite, nd-drift 11s ease-in-out infinite;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V42C1300 52 1180 56 1040 50C900 44 820 34 680 36C540 38 420 52 280 56C170 59 80 54 0 48Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V42C1300 52 1180 56 1040 50C900 44 820 34 680 36C540 38 420 52 280 56C170 59 80 54 0 48Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.nd-header > * {
	position: relative;
	z-index: 1;
}

.nd-brand {
	display: inline-flex;
	flex: 1;
	align-items: center;
	gap: var(--space-3);
}

.nd-brand__link {
	display: block;
	flex: none;
}

/* Le titre se centre entre le blason et le menu (ou le burger). */
.nd-header .nd-wordmark {
	align-items: center;
	margin-inline: auto;
	text-align: center;
}

.nd-brand__logo {
	display: block;
	width: auto;
	height: var(--logo-height);
	transition: height var(--motion) var(--ease-out), transform 0.15s ease;
}

/* Le blason réagit comme un bouton. */
.nd-brand__link:hover .nd-brand__logo {
	transform: translateY(-2px);
}

.nd-brand__link:active .nd-brand__logo {
	transform: translateY(0);
	transition-duration: var(--motion), 0.08s;
}

.nd-header .nd-wordmark__sub {
	max-height: 18px;
	overflow: hidden;
	transition: max-height var(--motion) var(--ease-out), opacity var(--motion-fast) ease;
}

/* Après un peu de défilement, l'en-tête se fait plus discret. */
.nd-header.is-scrolled {
	--logo-height: 40px;
	padding-top: 6px;
}

.nd-header.is-scrolled .nd-wordmark__sub {
	max-height: 0;
	opacity: 0;
}

.nd-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--yellow);
	color: var(--on-yellow);
	cursor: pointer;
	box-shadow: var(--shadow-soft);
}

/* Trois traits qui se croisent en ✕ à l'ouverture. */
.nd-burger__bars {
	position: relative;
	width: 20px;
	height: 14px;
}

.nd-burger__bars > span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--motion) var(--ease-out), opacity var(--motion-fast) ease;
}

.nd-burger__bars > span:nth-child(1) {
	top: 0;
}

.nd-burger__bars > span:nth-child(2) {
	top: calc(50% - 1.25px);
}

.nd-burger__bars > span:nth-child(3) {
	bottom: 0;
}

.nd-header.is-open .nd-burger__bars > span:nth-child(1) {
	transform: translateY(5.75px) rotate(45deg);
}

.nd-header.is-open .nd-burger__bars > span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.nd-header.is-open .nd-burger__bars > span:nth-child(3) {
	transform: translateY(-5.75px) rotate(-45deg);
}

/* Navigation : menu principal, « Autres » (autres pages et recherche). */

.nd-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.nd-menu,
.nd-more__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nd-menu {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.nd-menu a,
.nd-more__toggle {
	font: 700 16px/20px var(--font-rounded);
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

/* Rubriques de l'accueil : pastille de la couleur de leur tuile (classe posée par functions.php). */
.nd-menu__item--yellow {
	--item-color: var(--tile-yellow);
}

.nd-menu__item--green {
	--item-color: var(--tile-green);
}

.nd-menu__item--blue {
	--item-color: var(--tile-blue);
}

.nd-menu__item--pink {
	--item-color: var(--tile-pink);
}

.nd-menu [class*="nd-menu__item--"] > a {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: var(--item-color);
	transition: transform 0.15s ease, background-color var(--motion-fast) ease;
}

.nd-menu [class*="nd-menu__item--"] > a:hover {
	transform: translateY(-2px);
}

.nd-menu [class*="nd-menu__item--"] > a:active {
	transform: translateY(0);
	transition-duration: 0.08s;
}

/* Survol : le bloc fonce un peu. Page en cours : barre navy en bas du bloc, comme un onglet actif. */
.nd-menu [class*="nd-menu__item--"] > a:hover,
.nd-more__toggle:hover {
	background-color: color-mix(in srgb, var(--item-color), var(--ink) 8%);
}

.nd-menu [class*="nd-menu__item--"] > a[aria-current="page"] {
	box-shadow: inset 0 -4px 0 var(--ink);
}

.nd-more {
	position: relative;
}

.nd-more__toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 0;
	border: 0;
	background: var(--item-color, none);
	cursor: pointer;
	transition: background-color var(--motion-fast) ease;
}

.nd-more__toggle .nd-icon {
	transition: transform 0.15s ease;
}

.nd-more:not(.is-open) .nd-more__toggle:hover .nd-icon {
	transform: translateY(2px);
}

.nd-more.is-open .nd-more__toggle .nd-icon {
	transform: rotate(180deg);
}

.nd-more__panel {
	position: absolute;
	top: calc(100% + var(--space-6));
	right: 0;
	width: max-content;
	max-width: min(40rem, calc(100vw - 2 * var(--space-6)));
	max-height: 70vh;
	overflow-y: auto;
	padding: var(--space-6);
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.js .nd-more__panel {
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease, visibility 0s linear var(--motion-fast);
}

.js .nd-more.is-open .nd-more__panel {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

.nd-more__title {
	margin: var(--space-6) 0 var(--space-2);
	font: 700 14px/20px var(--font-rounded);
	color: var(--ink-muted);
}

.nd-more__list {
	columns: 2;
	column-gap: var(--space-8);
}

.nd-more__list li {
	break-inside: avoid;
}

.nd-more__list a {
	display: block;
	padding: var(--space-1) 0;
	font-size: 16px;
	line-height: 22px;
	text-decoration: none;
}

.nd-more__list a {
	transition: color var(--motion-fast) ease;
}

.nd-more__list a:hover {
	color: var(--blue);
}

.nd-more__list a[aria-current="page"] {
	font-weight: 700;
}

.nd-more__list .children {
	padding-left: var(--space-4);
	list-style: none;
}

/* Recherche */

.nd-search {
	display: flex;
	align-items: center;
	min-width: 16rem;
	background: var(--cream);
	border: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
	border-radius: var(--radius-pill);
}

.nd-search:focus-within {
	border-color: var(--ink);
}

.nd-search__field {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 0 0 var(--space-4);
	border: 0;
	background: none;
	color: var(--ink);
	font: 400 16px/20px var(--font-body);
}

.nd-search__field:focus-visible {
	outline: none;
}

.nd-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--radius-pill);
	background: none;
	color: var(--ink);
	cursor: pointer;
}

/* Mobile et tablette : burger jaune, panneau au-dessus du blason.
   Seuil plus haut que les 720 px du design system : les blocs du menu et « Autres »
   ne tiennent pas à côté du logotype en dessous de 1280 px. */

@media (max-width: 1279px) {
	.nd-header {
		--header-x: var(--space-4);
		row-gap: 0;
		padding: 0 var(--header-x);
	}

	/* La marge haute appartient au logotype : le panneau ouvert la pousse avec lui. */
	.nd-brand {
		padding-top: 10px;
		transition: padding-top var(--motion) var(--ease-out);
	}

	.nd-header.is-scrolled {
		padding-top: 0;
	}

	.nd-header.is-scrolled .nd-brand {
		padding-top: 6px;
	}

	/* Le burger reste en haut à droite, centré sur le blason fermé, quand le panneau s'ouvre. */
	.nd-burger {
		position: absolute;
		z-index: 2;
		top: calc(10px + var(--logo-height) / 2);
		right: var(--header-x);
		transform: translateY(-50%);
		transition: top var(--motion) var(--ease-out);
	}

	/* Place du burger (44 px) + 12 px : le même écart qu'entre le blason et le titre, qui reste centré. */
	.nd-brand {
		margin-right: calc(44px + var(--space-3));
	}

	.nd-header.is-scrolled .nd-burger {
		top: calc(6px + var(--logo-height) / 2);
	}

	.js .nd-burger {
		display: inline-flex;
	}

	/* Le panneau descend du haut de l'écran et pousse le blason et le burger devant lui.
	   Il déborde sur la marge de l'en-tête pour que les bandes de couleur aillent bord à bord. */
	.nd-nav {
		width: 100%;
	}

	.js .nd-nav {
		width: calc(100% + 2 * var(--header-x));
		margin: 0 calc(-1 * var(--header-x));
	}

	.js .nd-nav {
		order: -1;
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows var(--motion) var(--ease-out);
	}

	.js .nd-header.is-open .nd-nav {
		grid-template-rows: 1fr;
	}

	.nd-nav__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-4);
		padding-bottom: var(--space-4);
	}

	.js .nd-nav__inner {
		min-height: 0;
		gap: 0;
		/* Le blason, le burger et le bord ondulé restent visibles sous le panneau. */
		max-height: calc(100svh - 120px - var(--wp-admin--admin-bar--height, 0px));
		padding-bottom: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		transition: visibility 0s linear var(--motion);
	}

	.js .nd-header.is-open .nd-nav__inner {
		visibility: visible;
		transition-delay: 0s;
	}

	/* Marge basse du panneau, sans gêner sa fermeture à hauteur nulle ; en haut, les bandes collent au bord. */
	.js .nd-nav__inner::after {
		content: "";
		flex: none;
	}

	/* Page figée derrière le menu ouvert. */
	html:has(.nd-header.is-open) {
		overflow: hidden;
	}

	/* Les liens arrivent l'un après l'autre pendant la descente. */
	.js .nd-menu > li,
	.js .nd-more {
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
	}

	.js .nd-header.is-open .nd-menu > li,
	.js .nd-header.is-open .nd-more {
		opacity: 1;
		transform: none;
		transition-delay: calc(100ms + var(--i, 0) * 40ms);
	}

	.nd-menu > li:nth-child(2) { --i: 1; }
	.nd-menu > li:nth-child(3) { --i: 2; }
	.nd-menu > li:nth-child(4) { --i: 3; }
	.nd-menu > li:nth-child(5) { --i: 4; }
	.nd-menu > li:nth-child(n + 6) { --i: 5; }

	.nd-more {
		--i: 4;
	}

	/* Bandes de couleur bord à bord, sans écart ; la première passe sous le burger. */
	.nd-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nd-menu a {
		display: block;
		padding: var(--space-2) 0;
		font-size: 18px;
		line-height: 24px;
	}

	.js .nd-menu a {
		padding-inline: var(--header-x);
	}

	.nd-menu [class*="nd-menu__item--"] > a {
		display: block;
		padding-block: var(--space-4);
		border-radius: 0;
	}

	.nd-menu [class*="nd-menu__item--"] > a:hover {
		transform: none;
	}

	.nd-menu [class*="nd-menu__item--"] > a[aria-current="page"] {
		box-shadow: inset 4px 0 0 var(--ink);
	}

	/* « Autres » : une bande de plus, qui se déplie sous elle-même. */
	.nd-more__toggle {
		width: 100%;
		padding: var(--space-4) var(--header-x);
		font-size: 18px;
		line-height: 24px;
	}

	.nd-more__panel {
		position: static;
		width: auto;
		max-width: none;
		max-height: none;
		overflow: visible;
		padding: var(--space-4) var(--header-x);
		background: none;
		border-radius: 0;
		box-shadow: none;
	}

	/* Fermé, il ne prend pas de place ; allow-discrete garde le fondu à l'ouverture et à la fermeture. */
	.js .nd-more__panel {
		transition-property: opacity, transform, visibility, display;
		transition-behavior: allow-discrete;
	}

	.js .nd-more:not(.is-open) .nd-more__panel {
		display: none;
	}

	@starting-style {
		.js .nd-more.is-open .nd-more__panel {
			opacity: 0;
			transform: translateY(-8px);
		}
	}

	.nd-more__list {
		columns: 1;
	}

	.nd-search {
		min-width: 0;
	}

}

/* Barre d'admin WordPress sur téléphone : elle défile avec la page, l'en-tête se colle tout en haut. */
@media (max-width: 600px) {
	.nd-header {
		top: 0;
	}
}

@media (max-width: 720px) {
	.nd-brand {
		gap: var(--space-2);
		margin-right: calc(44px + var(--space-2));
	}

	/* Blason à la hauteur du burger (44 px). */
	.nd-header {
		--logo-height: 44px;
	}

	.nd-header .nd-wordmark__name {
		font-size: 22px;
		line-height: 24px;
	}

	.nd-header .nd-wordmark__sub {
		font-size: 12px;
		line-height: 16px;
	}
}

/* Très petits téléphones : le logotype rétrécit pour garder 16 px avant le burger. */
@media (max-width: 374px) {
	.nd-header .nd-wordmark__name {
		font-size: 18px;
		line-height: 21px;
	}

	.nd-header .nd-wordmark__sub {
		font-size: 11px;
	}
}

@media (min-width: 1024px) {
	.nd-container {
		padding: 0 var(--space-12);
	}

	.nd-header {
		--header-x: var(--space-12);
		padding-right: var(--space-12);
		padding-left: var(--space-12);
	}
}

/* Menu en ligne : les rubriques et « Autres » deviennent des pastilles de couleur dans la bande de sable. */
@media (min-width: 1280px) {
	.nd-header {
		padding-top: var(--space-3);
	}

	.nd-header.is-scrolled {
		--logo-height: 48px;
		padding-top: 6px;
	}

	/* Le menu occupe toute la hauteur de la barre (le panneau d'« Autres » part de son bas), pastilles centrées. */
	.nd-nav {
		align-self: stretch;
	}

	.nd-nav__inner {
		height: 100%;
		gap: var(--space-3);
	}

	/* « Autres » ouvert : la bande de sable se déroule vers le bas et le bord ondulé descend avec elle.
	   navigation.js mesure le panneau (--more-height) et la place du menu dans l'en-tête (--more-offset). */
	.nd-header:has(.nd-more.is-open) {
		padding-bottom: var(--more-height, 0px);
	}

	.nd-more {
		position: static;
	}

	/* Le panneau occupe la place dégagée sous la barre, sur toute la largeur, sur le sable de l'en-tête. */
	.nd-more__panel {
		top: 100%;
		left: calc(-1 * var(--more-offset, 0px));
		right: 0;
		display: grid;
		grid-template-columns: 20rem 1fr;
		column-gap: var(--space-12);
		align-items: start;
		width: auto;
		max-width: none;
		max-height: calc(100vh - 200px);
		padding: var(--space-6) var(--space-12) var(--space-8);
		background: none;
		border-radius: 0;
		box-shadow: none;
	}

	/* Recherche à gauche, autres pages à droite. */
	.nd-more__panel > :first-child {
		grid-row: span 2;
	}

	.nd-more__title,
	.nd-more__list {
		grid-column: 2;
	}

	.nd-more__title {
		margin-top: 0;
	}

	.nd-more__list {
		columns: 3;
	}

	/* Le contenu apparaît une fois la bande en partie déroulée. */
	.js .nd-more.is-open .nd-more__panel {
		transition-delay: calc(var(--motion) / 3);
	}

	/* Pastilles de même hauteur ; un intitulé long passe sur deux lignes équilibrées. */
	.nd-menu {
		gap: var(--space-3);
	}

	.nd-menu [class*="nd-menu__item--"] > a,
	.nd-more__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		height: 52px;
		max-width: 160px;
		padding: 0 18px;
		border-radius: var(--radius-pill);
		box-shadow: var(--shadow-soft);
		font-size: 15px;
		text-align: center;
		text-wrap: balance;
		white-space: normal;
		transition: transform 0.15s ease, background-color var(--motion-fast) ease;
	}

	.nd-more__toggle:hover {
		transform: translateY(-2px);
	}

	.nd-more__toggle:active {
		transform: translateY(0);
		transition-duration: 0.08s;
	}

	/* Page en cours : contour navy autour de la pastille. */
	.nd-menu [class*="nd-menu__item--"] > a[aria-current="page"] {
		box-shadow: inset 0 0 0 2px var(--ink), var(--shadow-soft);
	}
}

/* Mouvements réduits : mêmes états, sans animation ; les vagues restent immobiles, les flèches aussi. */
@media (prefers-reduced-motion: reduce) {
	a:hover .nd-icon--arrow-right,
	a:active .nd-icon--arrow-right {
		transform: none;
	}

	.nd-header::before,
	.nd-hero__edge > span,
	.nd-hero__media {
		animation: none;
	}

	.nd-header,
	.nd-header *,
	.nd-header *::before,
	.nd-header *::after {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
}

/* ---------- Hero : photo plein cadre de l'accueil ---------- */

.nd-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Plein écran ; svh évite de passer sous la barre d'adresse mobile. */
	min-height: max(var(--hero-min), calc(100vh - var(--wp-admin--admin-bar--height, 0px)));
	min-height: max(var(--hero-min), calc(100svh - var(--wp-admin--admin-bar--height, 0px)));
	/* Coupe la réserve de la photo (arrivée, parallaxe) sur les côtés et en bas. */
	overflow: clip;
	background: var(--ink) center 30% / cover no-repeat;
}

/* La photo est une vraie image (tailles adaptées à l'écran), le fondu navy passe dessus. */
.nd-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 80% 60%;
	/* Arrivée par la gauche : la photo, grossie de 14 % pour avoir de la réserve sur les côtés, glisse vite
	   puis ralentit jusqu'à se poser au centre ; ses bords ne sont jamais visibles. Ancrée en bas pour ne pas
	   déborder sur le contenu. */
	transform-origin: center bottom;
	scale: 1.14;
	/* easeOutExpo : départ vif, freinage marqué ; fondu depuis un fond de même ton pour ne pas flasher. */
	animation: nd-slide-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) both, nd-fade-in 0.8s ease-out both;
}

@keyframes nd-slide-in {
	from {
		translate: -6.5% 0;
	}
}

@keyframes nd-fade-in {
	from {
		opacity: 0;
	}
}

/* Parallaxe : au défilement, la photo monte 25 % moins vite que la page. Navigateurs qui gèrent les animations
   liées au défilement seulement ; ailleurs (Firefox), elle défile normalement. */
@supports (animation-timeline: scroll()) {
	.nd-hero__media {
		animation: nd-slide-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) both, nd-fade-in 0.8s ease-out both, nd-parallax linear both;
		animation-timeline: auto, auto, scroll(root);
		animation-range: normal, normal, 0 100vh;
	}
}

@keyframes nd-parallax {
	to {
		transform: translateY(25vh);
	}
}

/* Avec photo ou vidéo : fond de même luminosité qu'elle le temps qu'elle arrive en fondu
   (le bleu marine comme le sable faisaient un éclair). */
.nd-hero:not(.nd-hero--plain) {
	background-color: var(--hero-fade-from);
}

/* Sans photo ni vidéo : aplat navy, moins haut, l'en-tête posé dessus en plus. */
.nd-hero--plain {
	min-height: var(--hero-plain-min);
}

.nd-hero::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--ink) 55%, transparent) 72%, color-mix(in srgb, var(--ink) 92%, transparent) 100%);
}

.nd-hero__body {
	position: relative;
	z-index: 2;
	padding: 0 var(--space-6) calc(var(--wave) + var(--space-12));
	text-align: center;
}

.nd-hero__body :focus-visible {
	outline-color: var(--yellow);
}

.nd-hero__lead {
	margin: 0 0 var(--space-4);
	font: 600 16px/22px var(--font-rounded);
	color: var(--on-ink);
	text-shadow: 0 1px 6px color-mix(in srgb, var(--ink) 50%, transparent);
}

.nd-hero__edge {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--wave);
	overflow-x: clip;
}

.nd-hero__edge > span {
	position: absolute;
	inset: 0;
	background: var(--cream);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 30C300 72 560 74 820 48S1250 10 1440 22V80H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 30C300 72 560 74 820 48S1250 10 1440 22V80H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* Trois couches : sable mouillé (sable translucide, comme sous l'en-tête), écume blanche, puis la vague crème du contenu. */
.nd-hero__edge > span:nth-child(1) {
	top: -24px;
	left: -16px;
	right: -16px;
	opacity: 0.7;
}

.nd-hero__edge > span:nth-child(2) {
	top: -10px;
	background: var(--surface);
}

/* La vague crème descend 2 px sous le hero (coupés) : son bord adouci ne laisse pas de trait en bas. */
.nd-hero__edge > span:nth-child(3) {
	bottom: -2px;
}

/* Ressac : le sable mouillé glisse et respire, l'écume monte et descend, la vague crème gonfle à contretemps. */
.nd-hero__edge > span {
	transform-origin: bottom;
	animation: nd-swell 7s ease-in-out -3.5s infinite;
}

.nd-hero__edge > span:nth-child(1) {
	animation: nd-swell 6s ease-in-out -1s infinite, nd-drift 11s ease-in-out -5s infinite;
}

.nd-hero__edge > span:nth-child(2) {
	animation: nd-surf 7s ease-in-out infinite;
}

/* scale et translate séparés : le va-et-vient et le glissement s'additionnent sans s'écraser. */
@keyframes nd-tide {
	50% {
		scale: 1 1.15;
	}
}

@keyframes nd-drift {
	0%,
	100% {
		translate: -12px 0;
	}

	50% {
		translate: 12px 0;
	}
}

@keyframes nd-surf {
	50% {
		translate: 0 -3px;
	}
}

@keyframes nd-swell {
	50% {
		scale: 1 1.06;
	}
}

@media (min-width: 721px) {
	.nd-hero__lead {
		font-size: 18px;
		line-height: 26px;
	}
}

@media (min-width: 1024px) {
	.nd-hero__media {
		object-position: center 55%;
	}

	.nd-hero::before {
		background:
			linear-gradient(90deg, color-mix(in srgb, var(--ink) 55%, transparent) 0%, transparent 55%),
			linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--ink) 75%, transparent) 100%);
	}

	.nd-hero__body {
		width: 100%;
		max-width: var(--container);
		margin: 0 auto;
		padding: 0 var(--space-12) calc(var(--wave) + var(--space-12));
		text-align: left;
	}

	.nd-hero__lead {
		max-width: 520px;
		margin-bottom: var(--space-6);
		font-size: 27px;
		font-weight: 700;
		line-height: 34px;
	}
}

/* ---------- Carrousel de test du hero (temporaire) ---------- */

.nd-hero-test {
	position: absolute;
	z-index: 3;
	top: var(--space-4);
	left: 50%;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	max-width: calc(100% - 2 * var(--space-4));
	padding: var(--space-1);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--ink) 80%, transparent);
	color: var(--on-ink);
	transform: translateX(-50%);
}

.nd-hero-test[hidden] {
	display: none;
}

.nd-hero-test button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
}

.nd-hero-test button:hover {
	background: color-mix(in srgb, var(--on-ink) 15%, transparent);
}

.nd-hero-test button:focus-visible {
	outline: 3px solid var(--yellow);
}

.nd-hero-test__label {
	overflow: hidden;
	margin: 0;
	font: 600 14px/20px var(--font-rounded);
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---------- Carrousel de page (galerie au style « Carrousel ») ----------
   Même cadre que le hero de l'accueil ; les photos défilent en largeur, aimantées. */

.site-main.site-main--carousel {
	padding-top: 0;
}

/* Rien sous le carrousel : sa dernière vague prend le navy du pied de page, qui suit sans marge. */
.site-main.site-main--alone {
	padding-bottom: 0;
}

.site-main--alone .nd-hero__edge > span:nth-child(3) {
	background: var(--ink);
}

.nd-carousel {
	margin-inline: calc(-1 * var(--space-6));
	background-color: var(--ink);
}

.nd-carousel::before,
.nd-carousel .nd-hero__edge {
	pointer-events: none;
}

.nd-carousel__track {
	position: absolute;
	inset: 0;
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.nd-carousel__track::-webkit-scrollbar {
	display: none;
}

.nd-carousel__slide {
	position: relative;
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.nd-carousel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le texte laisse passer le doigt jusqu'aux photos ; seuls les boutons le retiennent. */
.nd-carousel .nd-hero__body {
	pointer-events: none;
}

.nd-carousel__title {
	margin: 0 0 var(--space-2);
	font: 600 36px/40px var(--font-hand);
	color: var(--on-ink);
	text-shadow: 0 1px 6px color-mix(in srgb, var(--ink) 50%, transparent);
}

.nd-carousel__caption[hidden],
.nd-carousel__controls[hidden] {
	display: none;
}

.nd-carousel__controls {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--ink) 80%, transparent);
	color: var(--on-ink);
	pointer-events: auto;
}

.nd-carousel__controls button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: background-color var(--motion-fast) ease;
}

.nd-carousel__controls button:hover {
	background: color-mix(in srgb, var(--on-ink) 15%, transparent);
}

.nd-carousel__count {
	min-width: 4.5em;
	margin: 0;
	font: 700 16px/20px var(--font-rounded);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
	.nd-carousel__title {
		font-size: 52px;
		line-height: 56px;
	}
}

/* ---------- Tuiles de navigation (pastels) ---------- */

.nd-tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3) var(--space-4);
}

.nd-tile {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-height: var(--tile-height);
	padding: 8px var(--space-6) 8px var(--space-4);
	border-radius: var(--radius-lg);
	color: var(--on-yellow);
	text-decoration: none;
	box-shadow: var(--shadow-soft);
	transition: transform 0.15s ease;
}

.nd-tile:hover {
	transform: translateY(-2px);
}

.nd-tile__badge {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--icon-badge);
	height: var(--icon-badge);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow-soft);
}

.nd-tile__label {
	flex: 1;
	font: 600 18px/24px var(--font-hand);
	/* Titres de pages : un mot trop long pour la tuile se coupe plutôt que de déborder. */
	hyphens: auto;
	overflow-wrap: break-word;
}

.nd-tile--yellow {
	background: var(--tile-yellow);
}

.nd-tile--green {
	background: var(--tile-green);
}

.nd-tile--blue {
	background: var(--tile-blue);
}

.nd-tile--pink {
	background: var(--tile-pink);
}

@media (min-width: 721px) {
	.nd-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nd-tile__label {
		font-size: 25px;
		line-height: 30px;
		hyphens: manual;
	}
}

@media (min-width: 1024px) {
	.nd-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-4);
	}

	.nd-tile {
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--space-4);
		min-height: 188px;
		padding: var(--space-6);
	}

	.nd-tile__label {
		flex: none;
		margin-top: auto;
		padding-right: 40px;
		font-size: 21px;
		line-height: 26px;
	}

	.nd-tile > .nd-icon {
		position: absolute;
		right: var(--space-6);
		bottom: var(--space-6);
	}
}

/* Tuiles étroites : la flèche passe sous le libellé pour laisser toute la largeur au texte. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.nd-tile__label {
		padding: 0 0 38px;
	}
}

/* Très petits téléphones : tuile resserrée pour que « Inscriptions » tienne. */
@media (max-width: 374px) {
	.nd-tile {
		gap: var(--space-3);
		padding-right: var(--space-4);
	}

	.nd-tile__badge {
		width: 48px;
		height: 48px;
	}

}

/* ---------- Infos pratiques ---------- */

.nd-quicks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}

.nd-quick {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-2);
	border-radius: var(--radius-lg);
	color: var(--ink);
	font: 700 16px/20px var(--font-rounded);
	text-align: center;
	text-decoration: none;
}

.nd-quick__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-square);
	height: var(--icon-square);
	border-radius: var(--radius-sm);
	color: var(--on-brand);
	box-shadow: var(--shadow-soft);
}

.nd-quick--pink {
	background: var(--pink-soft);
}

.nd-quick--pink .nd-quick__icon {
	background: var(--pink);
}

.nd-quick--blue {
	background: var(--blue-soft);
}

.nd-quick--blue .nd-quick__icon {
	background: var(--blue);
}

.nd-quick--green {
	background: var(--green-soft);
}

.nd-quick--green .nd-quick__icon {
	background: var(--green);
}

@media (min-width: 1024px) {
	.nd-quicks {
		gap: var(--space-4);
	}

	.nd-quick {
		flex-direction: row;
		justify-content: flex-start;
		gap: var(--space-4);
		padding: var(--space-4) var(--space-6);
		font-size: 17px;
		text-align: left;
	}
}

/* ---------- Sections ---------- */

.nd-section {
	padding: var(--space-12) 0;
	background: var(--cream);
}

.nd-section--sky {
	background: var(--sky);
}

.nd-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.nd-section-head__title {
	margin: 0;
	font: 600 36px/40px var(--font-hand);
	color: var(--ink);
}

@media (min-width: 721px) {
	.nd-section {
		padding: var(--space-20) 0;
	}

	.nd-section-head__title {
		font-size: 42px;
		line-height: 46px;
	}
}

/* ---------- Carte d'actualité ---------- */

.nd-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: var(--space-6);
}

.nd-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
	box-shadow: var(--shadow-card);
	transition: transform 0.15s ease;
}

.nd-card:hover {
	transform: translateY(-2px);
}

.nd-card__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 615 / 210;
	object-fit: cover;
	background: var(--blue-soft);
}

.nd-card__strip {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-6);
}

.nd-card__text {
	flex: 1;
}

.nd-card__title {
	margin: 0;
	font: 700 18px/24px var(--font-rounded);
	color: var(--ink);
}

.nd-card__date {
	display: block;
	margin-top: 2px;
	font: 400 14px/20px var(--font-body);
	color: var(--ink-muted);
}

@media (min-width: 1024px) {
	.nd-cards {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-8);
	}

	.nd-card__media {
		aspect-ratio: 16 / 10;
	}
}

/* ---------- Bandeau d'invitation ---------- */

.nd-cta {
	padding: var(--space-8) var(--space-6) calc(var(--wave) + var(--space-8));
	background: var(--yellow);
	text-align: center;
}

.nd-cta__title {
	margin: 0 0 var(--space-4);
	font: 700 34px/40px var(--font-brush);
	color: var(--ink);
}

@media (min-width: 721px) {
	.nd-cta__title {
		font-size: 40px;
		line-height: 46px;
	}
}

/* ---------- Pied de page ---------- */

.nd-footer {
	padding: var(--space-8) var(--space-6) var(--space-12);
	background: var(--ink);
	color: var(--on-ink-muted);
	font: 400 14px/22px var(--font-body);
	text-align: center;
}

.nd-footer :focus-visible {
	outline-color: var(--yellow);
}

.nd-footer__logo {
	display: block;
	width: auto;
	height: 96px;
	margin: 0 auto var(--space-4);
}

.nd-footer__lines {
	display: grid;
	gap: 2px;
	margin: var(--space-6) 0 0;
	font-style: normal;
}

.nd-footer a {
	color: var(--on-ink);
}

.nd-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-6);
	margin-top: var(--space-8);
	font-size: 13px;
}

/* ---------- Accueil ----------
   Chaque section à vague déborde de --wave sur la précédente : celle-ci garde la place. */

.nd-home-links {
	display: grid;
	gap: var(--space-3);
	padding-top: var(--space-2);
	padding-bottom: calc(var(--wave) + var(--space-8));
}

.nd-home-news {
	padding-bottom: calc(var(--wave) + var(--space-8));
}

/* Libellé court sur mobile, long sur ordinateur. */
.nd-long {
	display: none;
}

@media (min-width: 1024px) {
	.nd-home-links {
		gap: var(--space-4);
		padding-bottom: calc(var(--wave) + var(--space-12));
	}

	.nd-short {
		display: none;
	}

	.nd-long {
		display: inline;
	}
}

/* ---------- Contenu : pages et articles ----------
   Largeurs tirées de theme.json (contentSize / wideSize). */

.site-main {
	padding: var(--space-12) var(--space-6) calc(var(--wave) + var(--space-12));
}

/* Les longues URL collées dans les articles ne doivent pas élargir la page. */
.entry-content {
	overflow-wrap: break-word;
}

.entry-header,
.entry-footer,
.entry-content > *,
.post-navigation,
.comments-area {
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: var(--wp--style--global--wide-size, 1120px);
}

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

.entry-content > .alignleft {
	float: left;
	margin-right: var(--space-6);
}

.entry-content > .alignright {
	float: right;
	margin-left: var(--space-6);
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

/* Page d'une rubrique : bande à la couleur de sa pastille du menu, sous le sable ;
   le contenu remonte dessus par une vague crème bordée de blanc. */
.nd-page-band {
	max-width: none;
	margin: calc(-1 * var(--space-12)) calc(-1 * var(--space-6)) 0;
	padding: var(--space-12) var(--space-6) calc(var(--wave) + var(--space-6));
}

.nd-page-band > * {
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
}

.nd-page-band--green {
	background: var(--tile-green);
}

.nd-page-band--blue {
	background: var(--tile-blue);
}

.nd-page-band--pink {
	background: var(--tile-pink);
}

.nd-page-band--yellow {
	background: var(--tile-yellow);
}

.nd-page-band + .entry-content {
	/* La vague prend le ::after du clearfix : flow-root contient les images flottantes à sa place. */
	display: flow-root;
	margin-inline: calc(-1 * var(--space-6));
	padding: var(--space-4) var(--space-6) 0;
	background: var(--cream);
}

.nd-page-band + .entry-content::after {
	display: block;
}

.nd-page-band .entry-title {
	margin: 0 auto;
}

.entry-title,
.page-title {
	margin: 0 0 var(--space-4);
	font: 600 36px/40px var(--font-hand);
}

.entry-content h3,
.entry-content h4,
.comments-title {
	font-family: var(--font-rounded);
	font-weight: 700;
	line-height: 1.25;
}

.entry-meta {
	font-size: 14px;
	color: var(--ink-muted);
}

.entry-meta > * + *::before {
	content: " · ";
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-12);
}

.post-navigation a {
	font: 700 16px/22px var(--font-rounded);
	text-decoration: none;
}

.post-navigation .nav-label {
	display: block;
	font: 400 14px/20px var(--font-body);
	color: var(--ink-muted);
}

.post-navigation .nav-next {
	margin-left: auto;
	text-align: right;
}

/* Commentaires */

.comment-form input:not([type="checkbox"], [type="submit"]),
.comment-form textarea {
	width: 100%;
	max-width: 100%;
}

/* Listes d'articles : grille d'aperçus. */

.page-header,
.post-grid,
.pagination,
.no-results {
	max-width: var(--wp--style--global--wide-size, 1120px);
	margin-inline: auto;
}

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--space-8) var(--space-6);
}

.post-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.post-card-image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius-sm);
	background: var(--blue-soft);
}

.post-card-date {
	display: block;
	margin-top: var(--space-3);
	font-size: 14px;
	color: var(--ink-muted);
}

.post-card-title {
	margin: var(--space-1) 0 0;
	font: 700 18px/24px var(--font-rounded);
	transition: color var(--motion-fast) ease;
}

.post-card-link:hover .post-card-title,
.post-card-link:focus-visible .post-card-title {
	color: var(--blue);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-4);
	margin-top: var(--space-12);
	font: 700 16px/20px var(--font-rounded);
}