/*
Theme Name: ALNEST Socle
Description: Thème parent des sites vitrines ALNEST. Mise en page commune ; l'identité visuelle est portée par un thème enfant.
Author: ALNEST
Version: 0.12.1
Requires at least: 6.8
Requires PHP: 8.3
Text Domain: alnest
*/

/*
 * Ce fichier ne contient aucune valeur propre à un site. Toutes les valeurs viennent de theme.json :
 * - couleurs par rôle (settings.color.palette) : foncee (en-tête, pied), fond (page), surface (pavés),
 *   principale (boutons), lien, accent (erreurs seulement), texte, secondaire, titres, bordure ;
 * - polices et tailles (settings.typography) ;
 * - réglages fins (settings.custom → variables --wp--custom--…) : rayon, transitions, en-tête, menu,
 *   intertitres, espacements, pavés, bandeau. Le thème enfant d'un site ne change que ces valeurs.
 * Animations : transform et opacity seulement (aucun décalage de mise en page), coupées si l'utilisateur
 * demande moins de mouvement ; sans JavaScript ou sans prise en charge du navigateur, tout reste visible.
 */

@property --alnest-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

:root {
	--alnest-transition: var(--wp--custom--transition);
	--alnest-rayon: var(--wp--custom--rayon);
	--alnest-ombre: var(--wp--custom--ombre);
	--alnest-halo: color-mix(in srgb, var(--wp--preset--color--principale) var(--wp--custom--halo), transparent);
	/* En-tête : hauteur au repos, et ce qu'il perd au défilement (transform, pas de décalage). */
	--alnest-entete-marge: var(--wp--custom--entete--marge);
	--alnest-reduction-entete: var(--wp--custom--entete--reduction);
	--alnest-logo: var(--wp--custom--entete--logo);
	/* Échelle de superposition : tous les z-index du socle passent par ces variables, aucun chiffre en
	   dur. Ordre croissant : contenu (galeries comprises) < flèche et bouton d'action < en-tête < menu
	   ouvert < photo agrandie. Les trois premières valeurs ne servent qu'à l'intérieur du contenu ; les
	   niveaux suivants restent au-dessus de tout z-index du cœur de WordPress posé dans le contenu (100
	   au plus, bouton d'agrandissement des images). */
	--alnest-z-fond: -1;       /* décor sous le contenu d'un bloc isolé : contour des pavés, image et voile du bandeau, fond du pied */
	--alnest-z-contenu: 1;     /* couche du contenu au-dessus de son décor : diapositive active, voile d'une diapositive, pastille d'étape, bouton d'agrandissement des galeries */
	--alnest-z-dessus: 2;      /* au-dessus du contenu voisin : texte et commandes du diaporama, pastilles et repère collants */
	--alnest-z-flottants: 200; /* flèche « retour en haut », bouton et barre d'action, bouton d'appel fixe */
	--alnest-z-entete: 300;
	--alnest-z-menu: 400;      /* en-tête dont le menu est ouvert : il couvre la flèche et le bouton d'action */
	--alnest-z-photo: 500;     /* photo agrandie (lightbox de WordPress), au-dessus de l'en-tête */
}

@media (min-width: 1024px) {
	:root {
		--alnest-entete-marge: var(--wp--custom--entete--marge-large);
		--alnest-reduction-entete: var(--wp--custom--entete--reduction-large);
		--alnest-logo: var(--wp--custom--entete--logo-large);
	}
}

body {
	background:
		radial-gradient(1100px 620px at 8% -8%, color-mix(in srgb, var(--wp--preset--color--principale) var(--wp--custom--fond--lueur), transparent), transparent 62%),
		var(--wp--preset--color--fond);
	-webkit-font-smoothing: antialiased;
}

/* Pas d'espace entre en-tête, contenu et pied de page (WordPress y met l'écart entre blocs). */
.wp-site-blocks > * {
	margin-block-start: 0;
}

::selection {
	background: var(--wp--preset--color--principale);
	color: var(--wp--custom--bouton--texte);
}

/* ---------- En-tête ---------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: var(--alnest-z-entete);
	transition: transform var(--alnest-transition);
}

/* Menu ouvert : l'en-tête est un contexte d'empilement, son menu ne pèse que ce qu'il pèse. */
.wp-site-blocks > header.wp-block-template-part:has(.is-menu-open) {
	z-index: var(--alnest-z-menu);
}

/* Bouton « Agrandir » des images (lightbox de WordPress) : dans le contenu, sous l'en-tête et son menu. */
.wp-lightbox-container button {
	z-index: var(--alnest-z-contenu);
}

/* Photo agrandie : au-dessus de tout, en-tête compris. */
.wp-lightbox-overlay {
	z-index: var(--alnest-z-photo);
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	/* La barre d'administration n'est plus fixe sur petit écran. */
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* Fond opaque par défaut ; translucide seulement si le navigateur sait mélanger les couleurs et flouter
   ce qui passe dessous (sinon le texte de l'en-tête deviendrait illisible sur une photo). */
.alnest-entete {
	background-color: var(--wp--preset--color--foncee);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--wp--preset--color--blanc);
	padding-block: var(--alnest-entete-marge);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--bordure) 60%, transparent);
	transition: box-shadow var(--alnest-transition), background-color var(--alnest-transition);
}

.alnest-defile .alnest-entete {
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

@supports (background-color: color-mix(in srgb, red 50%, transparent)) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.alnest-entete {
		background-color: color-mix(in srgb, var(--wp--preset--color--foncee) var(--wp--custom--entete--opacite, 92%), transparent);
	}

	.alnest-defile .alnest-entete {
		background-color: color-mix(in srgb, var(--wp--preset--color--foncee) var(--wp--custom--entete--opacite-defile), transparent);
	}
}

/* Menu mobile ouvert : le flou ferait de l'en-tête le cadre du menu plein écran (position fixe),
   qui serait coupé à la hauteur de l'en-tête. */
.has-modal-open .alnest-entete {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.alnest-entete__barre {
	align-items: center;
	gap: 1rem;
	transition: transform var(--alnest-transition);
}

/* Logo à gauche, nom et téléphone à droite du logo. */
.alnest-entete__marque {
	display: grid !important;
	grid-template-columns: auto auto;
	align-items: center;
	column-gap: 0.85rem;
	row-gap: 0.15rem;
}

.alnest-entete .wp-block-site-logo {
	grid-row: span 2;
	transform-origin: left center;
	transition: transform var(--alnest-transition);
}

.alnest-entete .wp-block-site-logo img {
	width: var(--alnest-logo) !important;
	height: auto;
}

.alnest-entete .wp-block-site-title {
	margin: 0;
	align-self: end;
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: var(--wp--custom--entete--nom-espacement);
	text-transform: uppercase;
	line-height: 1.2;
}

.alnest-entete .alnest-coordonnees--telephone {
	align-self: start;
}

.alnest-entete a {
	color: var(--wp--preset--color--blanc);
	text-decoration: none;
}

/* Réduction au défilement : l'en-tête remonte, le logo rapetisse (taille d'origine du bandeau). */
@media (prefers-reduced-motion: no-preference) {
	.alnest-defile .wp-site-blocks > header.wp-block-template-part {
		transform: translateY(calc(-1 * var(--alnest-reduction-entete)));
	}

	.alnest-defile .alnest-entete__barre {
		transform: translateY(calc(var(--alnest-reduction-entete) / 2));
	}

	.alnest-defile .alnest-entete .wp-block-site-logo {
		transform: scale(0.84);
	}

	/* Menu mobile ouvert : pas de transform sur ses ancêtres, qui deviendraient le cadre du menu plein
	   écran (position fixe) et le couperaient à la hauteur de l'en-tête. */
	.has-modal-open .wp-site-blocks > header.wp-block-template-part,
	.has-modal-open .alnest-entete__barre {
		transform: none;
	}
}

/* Ligne de progression de lecture (settings.custom.progression, assets/js/progression.js) : pseudo-élément
   de l'en-tête, posé juste sous son bord bas. L'en-tête (position sticky) est déjà son cadre : aucun cadre de
   positionnement ni transform n'est ajouté à un ancêtre du menu (le menu mobile plein écran, en position fixe,
   resterait sinon coupé à la hauteur de l'en-tête). Couche « fond » de l'en-tête : sous les sous-menus et le
   menu ouvert. Depuis la gauche, de progression.depart en haut de page à 100 % en bas ; transform seulement.
   progression.haut : 100 % (défaut) la pose sous le bord bas, sur le contenu ; « calc(100% - épaisseur) »
   la pose dans le bas de l'en-tête, où elle ne touche que la couleur de l'en-tête (contraste 3:1 garanti
   contre une seule couleur, quelle que soit la page) ; il faut alors progression.couche à 1 (sinon le fond de
   l'en-tête la couvre), et elle disparaît quand le menu replié est ouvert. */
.alnest-progression .wp-site-blocks > header.wp-block-template-part::after {
	content: "";
	position: absolute;
	inset: var(--wp--custom--progression--haut, 100%) 0 auto;
	z-index: var(--wp--custom--progression--couche, var(--alnest-z-fond));
	height: var(--wp--custom--progression--epaisseur);
	background: var(--wp--custom--progression--couleur);
	transform-origin: 0 50%;
	transform: scaleX(var(--alnest-progression, var(--alnest-progression-depart)));
	pointer-events: none;
}

.alnest-progression .wp-site-blocks > header.wp-block-template-part:has(.is-menu-open)::after {
	visibility: hidden;
}

@keyframes alnest-progression {
	from {
		transform: scaleX(var(--alnest-progression-depart));
	}

	to {
		transform: scaleX(1);
	}
}

@supports (animation-timeline: scroll()) {
	.alnest-progression-css.alnest-progression .wp-site-blocks > header.wp-block-template-part::after {
		animation: alnest-progression linear both;
		animation-timeline: scroll(root block);
	}
}

/* ---------- Sélecteur de langue (site multilingue, rendu après le menu) ---------- */

/* Le menu reste collé au sélecteur, à droite de la barre. */
.alnest-entete__barre:has(.alnest-langues) > .alnest-navigation {
	margin-inline-start: auto;
}

.alnest-langues ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alnest-langues a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 0.35rem;
	color: var(--wp--preset--color--blanc);
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-underline-offset: 0.35em;
}

.alnest-langues a:hover,
.alnest-langues a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--wp--custom--lien-fonce);
}

.alnest-langues a[aria-current] {
	color: var(--wp--custom--lien-fonce);
}

/* ---------- Menu ---------- */

.alnest-navigation {
	gap: var(--wp--custom--menu--ecart);
	font-size: var(--wp--custom--menu--taille);
	letter-spacing: var(--wp--custom--menu--espacement);
	text-transform: var(--wp--custom--menu--casse);
}

.alnest-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.4rem;
}

/* Soulignement qui se déploie au survol, et sur la page en cours. */
.alnest-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--wp--custom--lien-fonce);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--alnest-transition);
}

.alnest-navigation .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.alnest-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.alnest-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.alnest-navigation .current-menu-ancestor > .wp-block-navigation-item__content::after,
.alnest-navigation .alnest-section-en-cours > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Style « Bouton » d'un lien du menu (par exemple « Devis gratuit ») : aplat de la couleur principale,
   sans soulignement ni repère de page. */
.alnest-navigation .is-style-bouton > .wp-block-navigation-item__content {
	padding: 0.55em 1.25em;
	border-radius: 999px;
	background: var(--wp--preset--color--principale);
	color: var(--wp--custom--bouton--texte) !important;
	font-weight: 600;
	box-shadow: 0 10px 24px -12px var(--alnest-halo);
	transition: transform var(--alnest-transition), box-shadow var(--alnest-transition);
}

.alnest-navigation .is-style-bouton > .wp-block-navigation-item__content::after {
	display: none;
}

.alnest-navigation .is-style-bouton > .wp-block-navigation-item__content:hover,
.alnest-navigation .is-style-bouton > .wp-block-navigation-item__content:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 18px 32px -14px var(--alnest-halo);
}

/* Sous-menu « Services » : ouvert au survol, fond sombre, texte clair, une ligne par lien. */
.alnest-navigation .wp-block-navigation__submenu-container {
	min-width: 18rem !important;
	padding: 0.6rem 0 !important;
	border: 1px solid var(--wp--preset--color--bordure) !important;
	border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--foncee) 96%, transparent) !important;
	color: var(--wp--preset--color--blanc) !important;
	box-shadow: 0 24px 48px rgb(0 0 0 / 0.45);
	top: calc(100% + 0.85rem) !important;
}

/* Pont invisible entre le lien et le sous-menu : la souris ne le referme pas en chemin. */
.alnest-navigation .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1rem;
	height: 1rem;
}

.alnest-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.7rem 1.35rem !important;
	white-space: nowrap;
	transition: background-color var(--alnest-transition), transform var(--alnest-transition), color var(--alnest-transition);
}

.alnest-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.alnest-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--principale) 22%, transparent);
	color: var(--wp--custom--lien-fonce);
	transform: translateX(4px);
}

.alnest-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	box-shadow: inset 2px 0 0 var(--wp--custom--lien-fonce);
}

@media (prefers-reduced-motion: no-preference) {
	.alnest-navigation .wp-block-navigation__submenu-container {
		transform: translateY(8px);
		transition: opacity 0.25s, transform var(--alnest-transition) !important;
	}

	.alnest-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	.alnest-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
	.alnest-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		transform: none;
	}
}

/* Menu mobile : plein écran, sombre, aligné à gauche, grandes cibles tactiles. */
.alnest-navigation .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	padding: 1.25rem 1.5rem 2rem;
	background: var(--wp--preset--color--foncee) !important;
	color: var(--wp--preset--color--blanc) !important;
	text-transform: none;
	letter-spacing: normal;
}

/* Menu plus haut que l'écran : la feuille ne défile pas, la barre du haut (croix) reste à l'écran ; seul le
   panneau des liens défile, jusqu'au dernier lien, sans entraîner la page. */
.alnest-navigation .wp-block-navigation__responsive-container.is-menu-open {
	overflow: hidden;
	padding-bottom: 0;
}

.alnest-navigation .is-menu-open .wp-block-navigation__responsive-close,
.alnest-navigation .is-menu-open .wp-block-navigation__responsive-dialog {
	height: 100%;
}

.alnest-navigation .is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
}

.alnest-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1 1 auto;
	min-height: 0;
	margin-top: 3.5rem;
	padding-top: 0 !important;
	/* Marge basse dans le panneau (pas dans la feuille) : un lien à l'écran n'est jamais rogné par elle. */
	padding-bottom: 2rem !important;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	gap: 0.25rem !important;
}

.alnest-navigation .is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
}

.alnest-navigation .is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.alnest-navigation .is-menu-open .wp-block-navigation-item,
.alnest-navigation .is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	text-align: left;
}

.alnest-navigation .is-menu-open .wp-block-navigation-item__content {
	text-transform: none;
	letter-spacing: normal;
}

.alnest-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.9rem 0 !important;
	border-bottom: 1px solid rgb(255 255 255 / 0.1);
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--moyen);
}

.alnest-navigation .is-menu-open .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.alnest-navigation .is-menu-open .wp-block-navigation__container > .alnest-section-en-cours > .wp-block-navigation-item__content {
	padding-left: 0.85rem !important;
	box-shadow: inset 2px 0 0 var(--wp--custom--lien-fonce);
}

/* Lien « bouton » dans le menu mobile : pleine largeur, centré, détaché des autres liens. */
.alnest-navigation .is-menu-open .wp-block-navigation__container > .is-style-bouton > .wp-block-navigation-item__content {
	box-sizing: border-box;
	margin-top: 1rem;
	padding: 0.9rem 1.25rem !important;
	border-bottom: 0;
	text-align: center;
	box-shadow: none;
}

.alnest-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	display: none;
}

.alnest-navigation .is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0 !important;
	width: 100%;
	padding: 0.25rem 0 0.75rem 1rem !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	transform: none;
}

.alnest-navigation .is-menu-open .wp-block-navigation__submenu-container::before {
	display: none;
}

.alnest-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.65rem 0 !important;
	white-space: normal;
	font-size: var(--wp--preset--font-size--normal);
	opacity: 0.9;
}

.alnest-navigation .is-menu-open .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	padding-left: 0.75rem !important;
	opacity: 1;
}

.alnest-navigation .wp-block-navigation__responsive-container-close,
.alnest-navigation .wp-block-navigation__responsive-container-open {
	padding: 0.5rem;
	margin: -0.5rem;
}

.alnest-navigation .wp-block-navigation__responsive-container-close svg,
.alnest-navigation .wp-block-navigation__responsive-container-open svg {
	width: 30px;
	height: 30px;
}

/* ---------- Contenu : de l'air ---------- */

.alnest-principal {
	padding-block: 0 var(--wp--custom--espacement--fin-de-page);
}

/* Une image pleine largeur en fin de page (plan d'accès) touche le pied de page. */
.alnest-principal:has(.wp-block-post-content > .alignfull:last-child) {
	padding-bottom: 0;
}

.alnest-principal > .alnest-fil-ariane {
	margin-top: 2.5rem;
}

.alnest-principal > .wp-block-post-title {
	margin-block: 1.5rem var(--wp--custom--espacement--titre-page);
}

.wp-block-post-content > * + * {
	margin-block-start: var(--wp--custom--espacement--bloc);
}

/* Cible d'une ancre (menu à ancres) : arrêtée sous l'en-tête réduit, pas cachée derrière. */
.wp-block-post-content [id] {
	scroll-margin-top: calc(2 * var(--alnest-entete-marge) + var(--alnest-logo) - var(--alnest-reduction-entete));
}

.wp-block-post-content > * + h2,
.wp-block-post-content > * + .alignwide,
.wp-block-post-content > .alignwide + *,
.wp-block-post-content > * + .alignfull,
.wp-block-post-content > .alignfull + * {
	margin-block-start: var(--wp--custom--espacement--section);
}

/* Intertitres : filet fin facultatif dessous (épaisseur 0 par défaut). */
.wp-block-post-content > h2 {
	padding-bottom: var(--wp--custom--intertitre--marge);
	border-bottom: var(--wp--custom--intertitre--filet) solid var(--wp--preset--color--bordure);
	color: var(--wp--preset--color--titres);
	font-size: var(--wp--custom--intertitre--taille);
	letter-spacing: -0.01em;
}

/* Titre d'une section (groupe placé dans la page) : même taille que les intertitres. */
.wp-block-post-content > .wp-block-group > h2 {
	font-size: var(--wp--custom--intertitre--taille);
}

.wp-block-post-content > h2 a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-content h3 {
	color: var(--wp--preset--color--titres);
}

.wp-block-post-content a:not(.alnest-bouton) {
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color var(--alnest-transition);
}

/* Listes : un court trait fin, de la couleur des liens, à la place de la puce. */
.wp-block-post-content ul.wp-block-list {
	padding-left: 0;
	list-style: none;
}

.wp-block-post-content ul.wp-block-list > li {
	position: relative;
	padding-left: 1.6rem;
}

.wp-block-post-content ul.wp-block-list > li + li {
	margin-top: 0.55rem;
}

.wp-block-post-content ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8em;
	width: 0.7rem;
	height: 1px;
	background: var(--wp--preset--color--lien);
}

/* ---------- Pavés : fond de la page, délimités seulement par le contour animé ---------- */

.alnest-encart,
.alnest-carte,
.alnest-tarifs:not(.is-style-compact) .alnest-tarif,
.alnest-formulaire {
	position: relative;
	isolation: isolate;
	border: 0 !important;
	border-radius: var(--alnest-rayon) !important;
	background: color-mix(in srgb, var(--wp--preset--color--fond) var(--wp--custom--paves--fond), var(--wp--preset--color--surface)) !important;
	transition: transform var(--alnest-transition), box-shadow var(--alnest-transition);
}

/* Contour lumineux qui tourne (dégradé conique d'une seule couleur, masqué en anneau). */
.alnest-encart::before,
.alnest-carte::before,
.alnest-tarifs:not(.is-style-compact) .alnest-tarif::before,
.alnest-formulaire::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--alnest-z-fond);
	padding: var(--wp--custom--paves--contour);
	border-radius: inherit;
	background: conic-gradient(from var(--alnest-angle), transparent 0 60%, var(--wp--custom--paves--couleur) 80%, transparent 96%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Option du bloc Cartes : sans contour. */
.alnest-cartes--contour-aucun .alnest-carte::before {
	display: none;
}

.alnest-carte:hover,
.alnest-carte:focus-within,
.alnest-tarifs:not(.is-style-compact) .alnest-tarif:hover,
.alnest-encart:hover {
	transform: translateY(-6px);
	box-shadow: var(--alnest-ombre), 0 0 40px -10px var(--alnest-halo);
}

/* Les pavés dans une carte ou un encart restent sobres (tarifs en lignes). */
.alnest-carte .alnest-tarif,
.alnest-encart .alnest-tarif {
	background: none !important;
	box-shadow: none !important;
}

.alnest-carte .alnest-tarif::before,
.alnest-encart .alnest-tarif::before {
	display: none;
}

.alnest-carte__image {
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.alnest-carte:hover .alnest-carte__image {
	transform: scale(1.06);
}

.alnest-carte__icone {
	display: inline-grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--bordure);
}

.alnest-carte__icone svg {
	width: 1.75rem !important;
	height: 1.75rem !important;
	color: var(--wp--preset--color--lien) !important;
	transition: transform var(--alnest-transition);
}

.alnest-carte:hover .alnest-carte__icone svg {
	transform: rotate(-8deg) scale(1.1);
}

/* ---------- Boutons (texte : settings.custom.bouton.texte, blanc par défaut) ---------- */

.alnest-bouton,
.wpcf7-submit {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0.85em 1.7em;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--principale);
	color: var(--wp--custom--bouton--texte);
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 24px -12px var(--alnest-halo);
	transition: transform var(--alnest-transition), box-shadow var(--alnest-transition);
}

/* Reflet qui traverse le bouton au survol. */
.alnest-bouton::after,
.wpcf7-submit::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.7s ease;
}

.alnest-bouton:hover,
.alnest-bouton:focus-visible,
.wpcf7-submit:hover,
.wpcf7-submit:focus-visible {
	color: var(--wp--custom--bouton--texte);
	transform: translateY(-2px);
	box-shadow: 0 18px 32px -14px var(--alnest-halo);
}

.alnest-bouton:hover::after,
.alnest-bouton:focus-visible::after {
	transform: translateX(120%);
}

/* Bouton en contour, posé sur une photo ou un fond foncé : texte blanc, quel que soit bouton.texte. */
.alnest-bouton--secondaire {
	background: transparent;
	color: var(--wp--preset--color--blanc);
	box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.75);
}

.alnest-bouton--secondaire:hover,
.alnest-bouton--secondaire:focus-visible {
	background: rgb(255 255 255 / 0.12);
	color: var(--wp--preset--color--blanc);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--blanc);
}

/* ---------- Galeries ---------- */

.wp-block-gallery .wp-block-image {
	overflow: hidden;
	border-radius: 12px;
}

/* Toutes les vignettes à la même taille : la dernière ne s'étire pas seule sur la ligne. */
.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0 !important;
}

.wp-block-gallery .wp-block-image img {
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.7s;
}

.wp-block-gallery .wp-block-image:hover img {
	transform: scale(1.07);
	filter: saturate(1.15);
}

/* ---------- Style « Voile » (bandeau, diaporama) : image légèrement transparente ---------- */

/* L'image laisse voir le fond foncé du bloc ; l'effet de profondeur (translate) reste inchangé. */
.is-style-voile .alnest-parallaxe,
.is-style-voile .alnest-diapo__video.est-lue {
	opacity: var(--wp--custom--voile--opacite);
}

/* ---------- Style « Clair » (diaporama) : photos sans voile, ombre portée du texte seulement ---------- */

/* Aucun voile sur la photo (ni dégradé ni ombre de fond) : la lisibilité vient de la seule ombre portée du
   texte, une par rôle (diaporama.ombreSurtitre, ombreTitre pour le titre et ses mots tapés, ombreChapo),
   réglée par site au minimum qui donne 4,5:1 sur chaque photo (mesurée sur un anneau de 2 px autour des
   lettres). Le bouton garde son aplat, sans ombre. */
.alnest-diaporama.is-style-clair .alnest-diapo::after {
	content: none;
}

.alnest-diaporama.is-style-clair .alnest-diaporama__surtitre,
.alnest-diaporama.is-style-clair .alnest-diaporama__surtitre * {
	text-shadow: var(--wp--custom--diaporama--ombre-surtitre);
}

.alnest-diaporama.is-style-clair .alnest-diaporama__entete h1,
.alnest-diaporama.is-style-clair .alnest-diaporama__entete h1 * {
	text-shadow: var(--wp--custom--diaporama--ombre-titre);
}

.alnest-diaporama.is-style-clair .alnest-diaporama__chapo {
	text-shadow: var(--wp--custom--diaporama--ombre-chapo);
}

/* Texte servi caché pendant la frappe (mots tapés, surtitre tapé) : aucune ombre, seuls les caractères
   affichés de la surcouche en ont une (le bloc le cache aussi par visibility). */
.alnest-diaporama.is-style-clair .alnest-diaporama__entete .est-tapee {
	text-shadow: none;
}

.alnest-diaporama.is-style-clair .alnest-bouton {
	text-shadow: none;
}

/* Commandes (flèches, points, pause) : même principe, une ombre portée et pas de fondu sous elles. */
.alnest-diaporama.is-style-clair .alnest-diaporama__commandes {
	filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.9)) drop-shadow(0 0 4px rgb(0 0 0 / 0.7));
}

/* ---------- Style « Exergue » (citation) : une phrase mise en avant ---------- */

/* Grande phrase en police des titres, trait vertical de la couleur lien qui se dessine à l'apparition. */
.wp-block-quote.is-style-exergue {
	position: relative;
	margin-inline: 0;
	padding: 0.25rem 0 0.25rem clamp(1.25rem, 3vw, 2rem);
	border: 0;
	color: var(--wp--preset--color--titres);
	font-family: var(--wp--preset--font-family--titres);
	font-size: clamp(1.45rem, 3.1vw, 2.15rem);
	font-style: normal;
	font-weight: var(--wp--custom--titres--graisse);
	line-height: 1.3;
}

.wp-block-quote.is-style-exergue::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--wp--preset--color--lien);
	transform-origin: 50% 0;
}

.wp-block-quote.is-style-exergue p {
	margin: 0;
}

.wp-block-quote.is-style-exergue cite {
	display: block;
	margin-block-start: 1rem;
	color: var(--wp--preset--color--secondaire);
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--petit);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.is-style-fond-fonce .wp-block-quote.is-style-exergue {
	color: var(--wp--preset--color--blanc);
}

.is-style-fond-fonce .wp-block-quote.is-style-exergue::before {
	background: var(--wp--custom--lien-fonce);
}

.is-style-fond-fonce .wp-block-quote.is-style-exergue cite {
	color: var(--alnest-texte-sur-fonce);
}

/* ---------- Style « Texte et photo » (groupe) : photo à côté du texte, côtés alternés ---------- */

/* La première image du groupe à côté du reste ; un groupe sur deux de ce style a la photo à droite. Sur
   téléphone : la photo au-dessus du texte. La photo se pose doucement (scale) à l'apparition. */
.is-style-texte-photo > .wp-block-image {
	overflow: hidden;
	border-radius: var(--wp--custom--rayon);
}

/* Proportions de la photo gardées (une couverture en portrait n'est pas rognée). */
.is-style-texte-photo > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.is-style-texte-photo > .wp-block-image figcaption {
	margin-block-start: 0.5rem;
}

@media (min-width: 820px) {
	.wp-block-group.is-style-texte-photo {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		grid-auto-flow: dense;
		column-gap: clamp(2rem, 5vw, 4rem);
		align-items: center;
	}

	.wp-block-group.is-style-texte-photo > * {
		grid-column: 2;
		max-width: none;
		margin-inline: 0;
	}

	.wp-block-group.is-style-texte-photo > .wp-block-image:first-child {
		grid-column: 1;
		grid-row: 1 / span 20;
		align-self: center;
		margin: 0;
	}

	.wp-block-group.is-style-texte-photo:nth-child(even of .is-style-texte-photo) {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}

	.wp-block-group.is-style-texte-photo:nth-child(even of .is-style-texte-photo) > * {
		grid-column: 1;
	}

	.wp-block-group.is-style-texte-photo:nth-child(even of .is-style-texte-photo) > .wp-block-image:first-child {
		grid-column: 2;
	}

	.wp-block-group.is-style-texte-photo > :nth-child(2) {
		margin-block-start: 0;
	}
}

/* ---------- Style « Frise » (groupe) : une frise verticale, un repère par élément ---------- */

/* Un trait vertical à gauche ; chaque enfant direct du groupe (citation, paragraphe, titre) porte un rond
   sur le trait. Dans une citation, la source (« Page 37 », une date) passe au-dessus du texte, comme une
   étiquette (ordre visuel seulement : la source reste après le texte dans le HTML). */
.wp-block-group.is-style-frise {
	--alnest-frise-retrait: 2.25rem;
	position: relative;
	padding-inline-start: var(--alnest-frise-retrait);
}

.wp-block-group.is-style-frise::before {
	content: "";
	position: absolute;
	inset-block: 0.6rem 0.6rem;
	inset-inline-start: 0.55rem;
	width: 2px;
	background: color-mix(in srgb, var(--wp--preset--color--lien) 35%, transparent);
}

.wp-block-group.is-style-frise > * {
	position: relative;
}

.wp-block-group.is-style-frise > *::after {
	content: "";
	position: absolute;
	inset-block-start: 0.3rem;
	inset-inline-start: calc(-1 * var(--alnest-frise-retrait) + 0.55rem + 1px - 0.5rem);
	width: 1rem;
	height: 1rem;
	box-sizing: border-box;
	border: 3px solid var(--wp--preset--color--lien);
	border-radius: 50%;
	background: var(--wp--preset--color--fond);
}

/* Paragraphe de frise qui commence par du gras (« **1901** … ») : le gras devient l'étiquette. */
.wp-block-group.is-style-frise > p > strong:first-child {
	display: block;
	margin-block-end: 0.35rem;
	color: var(--wp--preset--color--lien);
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
}

.is-style-fond-fonce .wp-block-group.is-style-frise > p > strong:first-child {
	color: var(--wp--custom--lien-fonce);
}

.wp-block-group.is-style-frise > .wp-block-quote {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.6rem;
	margin-inline: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

.wp-block-group.is-style-frise > .wp-block-quote p {
	margin: 0;
}

.wp-block-group.is-style-frise > .wp-block-quote cite {
	color: var(--wp--preset--color--lien);
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--petit);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
}

.is-style-fond-fonce .wp-block-group.is-style-frise > *::after {
	border-color: var(--wp--custom--lien-fonce);
	background: var(--wp--preset--color--foncee);
}

.is-style-fond-fonce .wp-block-group.is-style-frise > .wp-block-quote cite {
	color: var(--wp--custom--lien-fonce);
}

/* À l'apparition (animations.js) : le trait de l'exergue se dessine, le rond de la frise grossit, la photo
   se pose. Transform seulement, rien en mouvement réduit. */
@keyframes alnest-trait {
	from {
		transform: scaleY(0);
	}
}

@keyframes alnest-repere {
	from {
		transform: scale(0);
	}
}

@keyframes alnest-pose {
	from {
		transform: scale(1.08);
	}
}

@media screen and (prefers-reduced-motion: no-preference) {
	.alnest-apparition .wp-block-quote.is-style-exergue.est-apparu::before {
		animation: alnest-trait 700ms ease-out calc(var(--alnest-retard, 0ms) + 200ms) both;
	}

	.alnest-apparition .wp-block-group.is-style-frise > .est-apparu::after {
		animation: alnest-repere 450ms cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--alnest-retard, 0ms) + 150ms) both;
	}

	.alnest-apparition .is-style-texte-photo > .wp-block-image.est-apparu img {
		animation: alnest-pose 1.2s ease-out var(--alnest-retard, 0ms) both;
	}
}

/* ---------- Style « Surtitre » (paragraphe) : petit texte en capitales au-dessus d'un titre ---------- */

.is-style-surtitre {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	color: var(--wp--preset--color--lien);
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Court trait fin devant le texte, de la même couleur. */
.is-style-surtitre::before {
	content: "";
	flex: none;
	width: 2.5rem;
	height: 2px;
	background: currentColor;
}

/* Le titre qui suit reste collé à son surtitre. */
.wp-block-post-content .is-style-surtitre + :is(h1, h2, h3) {
	margin-block-start: 0.5rem;
}

/* ---------- Style « Fond foncé » (groupe) : section sur la couleur foncée ---------- */

/* Le fond est peint jusqu'aux bords de l'écran par border-image (débordement d'encre : ni largeur ni
   défilement horizontal changés), quel que soit l'alignement du groupe. Texte clair, liens et repères
   en lienFonce, comme dans l'en-tête et le pied. */
.is-style-fond-fonce {
	--alnest-texte-sur-fonce: color-mix(in srgb, var(--wp--preset--color--blanc) 88%, var(--wp--preset--color--foncee));
	padding-block: var(--wp--custom--espacement--section);
	border-image: linear-gradient(var(--wp--preset--color--foncee) 0 0) fill 0 / / 0 100vmax;
	color: var(--alnest-texte-sur-fonce);
}

/* Bandes pleine largeur qui se suivent (grande image, bandeau défilant, sections foncées) : collées,
   sans bande du fond de page entre elles. */
.wp-block-post-content > :is(.alnest-diaporama, .alnest-defilant, .is-style-fond-fonce) + :is(.alnest-defilant, .is-style-fond-fonce) {
	margin-block-start: 0;
}

/* Une section foncée en fin de page touche le pied de page. */
.alnest-principal:has(.wp-block-post-content > .is-style-fond-fonce:last-child) {
	padding-bottom: 0;
}

.wp-block-post-content .is-style-fond-fonce :is(h1, h2, h3, h4, h5, h6),
.is-style-fond-fonce .alnest-carte__titre,
.is-style-fond-fonce .alnest-formulaire__champ label {
	color: var(--wp--preset--color--blanc);
}

.is-style-fond-fonce a:not(.alnest-bouton),
.is-style-fond-fonce .is-style-surtitre {
	color: var(--wp--custom--lien-fonce);
}

.is-style-fond-fonce a:not(.alnest-bouton):hover {
	color: var(--wp--preset--color--blanc);
}

.is-style-fond-fonce :focus-visible {
	outline-color: var(--wp--custom--lien-fonce);
}

.wp-block-post-content .is-style-fond-fonce ul.wp-block-list > li::before {
	background: var(--wp--custom--lien-fonce);
}

/* Pavés sur fond foncé : un ton à peine plus clair que la section. */
.is-style-fond-fonce :is(.alnest-encart, .alnest-carte, .alnest-tarifs:not(.is-style-compact) .alnest-tarif, .alnest-formulaire) {
	background: color-mix(in srgb, var(--wp--preset--color--foncee) 94%, var(--wp--preset--color--blanc)) !important;
	color: var(--alnest-texte-sur-fonce);
}

.is-style-fond-fonce .alnest-carte__icone {
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}

.is-style-fond-fonce .alnest-carte__icone svg {
	color: var(--wp--custom--lien-fonce) !important;
}

/* ---------- Animations liées au défilement (amélioration progressive, CSS seul) ---------- */

@keyframes alnest-apparition {
	from {
		opacity: 0;
		translate: 0 24px;
	}
}

@keyframes alnest-tour {
	to {
		--alnest-angle: 360deg;
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* Contour qui tourne, seulement quand le pavé est à l'écran (classe posée par animations.js). */
	.alnest-encart::before,
	.alnest-carte::before,
	.alnest-tarifs:not(.is-style-compact) .alnest-tarif::before,
	.alnest-formulaire::before {
		animation: alnest-tour var(--wp--custom--paves--tour) linear infinite paused;
		/* Déphasage et sens posés par animations.js, d'après le rang du pavé dans la page : les contours
		   voisins ne tournent pas ensemble. */
		animation-delay: calc(var(--alnest-phase, 0) * var(--wp--custom--paves--tour) * -1);
		animation-direction: var(--alnest-sens, normal);
	}

	.est-visible::before {
		animation-play-state: running !important;
	}

	/* Option du bloc Cartes : contour figé (anneau immobile). */
	.alnest-cartes--contour-fige .alnest-carte::before {
		animation: none !important;
	}
}

/* Apparition au défilement, une fois (animations.js). La classe alnest-apparition est posée sur <html>
   par un script en ligne du <head> ; animations.js ne cache (alnest-a-venir) que ce qui est sous le
   premier écran, puis le révèle (est-apparu) à son entrée dans l'écran, avec un retard de 80 ms par
   élément d'un même groupe. Sans JavaScript, à l'impression ou avec moins d'animations : tout est visible. */
@media screen and (prefers-reduced-motion: no-preference) {
	.alnest-apparition .alnest-a-venir:not(.est-apparu) {
		opacity: 0;
	}

	.alnest-apparition .alnest-a-venir.est-apparu {
		animation: alnest-apparition 550ms ease-out var(--alnest-retard, 0ms) both;
	}
}

/* ---------- Formulaire de contact (Contact Form 7) ---------- */

.alnest-formulaire {
	display: grid;
	gap: 1.25rem 1.5rem;
	padding: 2rem;
}

@media (min-width: 640px) {
	.alnest-formulaire {
		grid-template-columns: 1fr 1fr;
		padding: 2.5rem;
	}

	.alnest-formulaire__champ--large,
	.alnest-formulaire__consentement,
	.alnest-formulaire__envoi {
		grid-column: 1 / -1;
	}
}

.alnest-formulaire p {
	margin: 0;
}

.alnest-formulaire__champ label {
	display: block;
	color: var(--wp--preset--color--titres);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
}

.alnest-formulaire .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.4rem;
}

.alnest-formulaire input:where([type="text"], [type="email"], [type="tel"], [type="date"]),
.alnest-formulaire textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 10px;
	background: var(--wp--preset--color--fond);
	color: var(--wp--preset--color--texte);
	font: inherit;
	transition: border-color var(--alnest-transition), box-shadow var(--alnest-transition);
}

.alnest-formulaire textarea {
	min-height: 9rem;
	resize: vertical;
}

.alnest-formulaire input:focus,
.alnest-formulaire textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--lien);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--lien) 25%, transparent);
}

.alnest-formulaire__consentement {
	font-size: var(--wp--preset--font-size--petit);
}

.alnest-formulaire__consentement .wpcf7-list-item {
	margin: 0;
}

.alnest-formulaire__consentement input {
	width: 1.15rem;
	height: 1.15rem;
	margin-right: 0.45rem;
	vertical-align: -0.18rem;
	accent-color: var(--wp--preset--color--principale);
}

.wpcf7-not-valid-tip {
	margin-top: 0.3rem;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--petit);
}

.wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.1rem;
	border-width: 2px;
	border-radius: 10px;
}

.wp-block-contact-form-7-contact-form-selector + .alnest-coordonnees {
	margin-top: 3rem;
}

/* ---------- Pied de page (fond animé : pied.js, motif settings.custom.pied.fond.motif) ---------- */

.alnest-pied {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(180deg, var(--wp--preset--color--fond), var(--wp--preset--color--foncee) var(--wp--custom--pied--fondu));
	color: var(--wp--preset--color--blanc);
	padding-block: 0 2.5rem;
	font-size: var(--wp--preset--font-size--petit);
}

.alnest-pied__fond {
	position: absolute;
	inset: 0;
	z-index: var(--alnest-z-fond);
	width: 100%;
	height: 100%;
	pointer-events: none;
	/* Voile (settings.custom.pied.fond.voile) : le motif s'efface d'autant sur le fond du pied, si
	   contraste.py le demande pour le texte posé dessus. */
	opacity: calc(100% - var(--wp--custom--pied--fond--voile, 0%));
}

/* Fond vidéo (motif « video ») : la vidéo couvre le pied sans être déformée ; son image (poster) aussi. */
.alnest-pied__video {
	object-fit: cover;
	background: var(--wp--preset--color--foncee);
}

/* Bouton lecture / pause de la vidéo du pied (pied.js) : arrête la boucle, ou la lance si la lecture
   automatique est refusée ou si le visiteur demande moins d'animations. */
.alnest-pied__lecture {
	position: absolute;
	top: 0.75rem;
	right: max(0.75rem, env(safe-area-inset-right));
	z-index: var(--alnest-z-contenu);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--blanc) 55%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--foncee) 75%, transparent);
	color: var(--wp--preset--color--blanc);
	cursor: pointer;
}

.alnest-pied__lecture:hover {
	background: var(--wp--preset--color--foncee);
}

.alnest-pied__lecture:focus-visible {
	outline: 2px solid var(--wp--custom--lien-fonce);
	outline-offset: 2px;
}

.alnest-pied__lecture svg {
	width: 18px;
	height: 18px;
}

.alnest-pied__lecture[data-etat="lecture"] .alnest-pied__icone-lire,
.alnest-pied__lecture:not([data-etat="lecture"]) .alnest-pied__icone-pause {
	display: none;
}

/* Le pied est un groupe à largeur de contenu : sans cela, la mise en page de WordPress limiterait aussi
   le canvas à cette largeur (fond rogné sur les côtés et étiré en largeur). */
.alnest-pied > .alnest-pied__fond {
	max-width: none;
}

.alnest-pied a {
	color: var(--wp--preset--color--blanc);
	text-underline-offset: 0.2em;
}

/* Logo facultatif du pied (réglage « Logo du pied de page », version claire). */
.alnest-pied__logo {
	display: block;
	width: var(--wp--custom--pied--logo);
	height: auto;
	margin-bottom: 1.25rem;
}

/* Survol : settings.custom.pied.lienSurvol (lienFonce par défaut), lisible sur le fond animé du pied. */
.alnest-pied a:hover {
	color: var(--wp--custom--pied--lien-survol);
}

/* ---------- Bouton d'appel fixe (réglage « Bouton d'appel fixe ») ---------- */

/* Téléphone et tablette : barre pleine largeur collée en bas, texte court. La page garde une marge
   basse de la hauteur de la barre, pour que le pied ne soit jamais masqué. */
.alnest-reserver {
	position: fixed;
	z-index: var(--alnest-z-flottants);
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.95rem 1.25rem calc(0.95rem + env(safe-area-inset-bottom));
	background: var(--wp--preset--color--principale);
	color: var(--wp--custom--bouton--texte);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 -12px 30px -18px var(--wp--preset--color--foncee);
}

.alnest-reserver:hover,
.alnest-reserver:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--principale) 85%, var(--wp--preset--color--blanc));
	color: var(--wp--custom--bouton--texte);
}

.alnest-reserver svg {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

.alnest-reserver__long {
	display: none;
}

body:has(.alnest-reserver) {
	padding-bottom: calc(3.2rem + env(safe-area-inset-bottom));
}

/* Ordinateur : bouton arrondi en bas à droite, qui affiche le numéro. */
@media (min-width: 1024px) {
	.alnest-reserver {
		right: 1.5rem;
		bottom: 1.5rem;
		left: auto;
		padding: 0.85em 1.6em;
		border-radius: 999px;
		box-shadow: 0 18px 32px -14px var(--alnest-halo), 0 8px 24px -12px var(--wp--preset--color--foncee);
	}

	.alnest-reserver__court {
		display: none;
	}

	.alnest-reserver__long {
		display: inline;
	}

	body:has(.alnest-reserver) {
		padding-bottom: 0;
	}
}

/* ---------- Éléments flottants : flèche « retour en haut » (bas droite), bouton d'action (bas gauche) ---------- */

.alnest-haut {
	position: fixed;
	z-index: var(--alnest-z-flottants);
	right: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	/* Liseré clair : la flèche reste visible sur le pied foncé. */
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--blanc) 35%, transparent);
	background: var(--wp--preset--color--foncee);
	color: var(--wp--preset--color--blanc);
	box-shadow: var(--alnest-ombre);
	transition: opacity var(--alnest-transition), translate var(--alnest-transition), visibility 0s;
}

.alnest-haut svg {
	width: 22px;
	height: 22px;
}

.alnest-haut:focus-visible {
	outline-color: var(--wp--preset--color--lien);
}

/* Avec script : cachée en haut de page, apparaît après un écran (opacité et léger déplacement). */
.alnest-flottants:not(.alnest-haut-visible) .alnest-haut {
	visibility: hidden;
	opacity: 0;
	translate: 0 12px;
	transition: opacity var(--alnest-transition), translate var(--alnest-transition), visibility 0s var(--wp--custom--transition, 0.35s);
}

#haut {
	position: absolute;
	top: 0;
}

/* Au-dessus de la barre d'appel ou de la barre d'action (téléphone, tablette), du bouton d'appel (ordinateur). */
@media (max-width: 1023px) {
	body:has(.alnest-reserver, .alnest-action-barre) .alnest-haut {
		bottom: calc(4.6rem + env(safe-area-inset-bottom));
	}
}

@media (min-width: 1024px) {
	body:has(.alnest-reserver) .alnest-haut {
		bottom: 5.6rem;
	}
}

.alnest-action {
	position: fixed;
	z-index: var(--alnest-z-flottants);
	bottom: calc(1rem + env(safe-area-inset-bottom));
	left: 1rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.alnest-action__details {
	position: relative;
}

/* Le bouton d'action (bas gauche, 56 px) ne couvre pas les commandes du diaporama : elles commencent à sa droite. */
body:has(.alnest-action) .alnest-diaporama__commandes {
	margin-inline-start: max(var(--gouttiere, 1.25rem), calc(1rem + 56px + 0.75rem));
}

.alnest-action__bouton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--wp--preset--color--principale);
	color: var(--wp--custom--bouton--texte);
	box-shadow: 0 18px 32px -14px var(--alnest-halo), 0 8px 24px -12px var(--wp--preset--color--foncee);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

.alnest-action__bouton::-webkit-details-marker {
	display: none;
}

.alnest-action__bouton:hover,
.alnest-action__bouton:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--principale) 85%, var(--wp--preset--color--blanc));
	color: var(--wp--custom--bouton--texte);
}

.alnest-action svg {
	width: 26px;
	height: 26px;
	flex: none;
}

.alnest-action__emoji {
	font-size: 26px;
	line-height: 1;
}

.alnest-action__image {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	object-fit: contain;
}

.alnest-action__numero {
	display: none;
}

.alnest-action__menu {
	position: absolute;
	bottom: calc(100% + 0.75rem);
	left: 0;
	display: grid;
	gap: 0.25rem;
	min-width: 15rem;
	margin: 0;
	padding: 0.5rem;
	border-radius: var(--alnest-rayon);
	background: var(--wp--preset--color--fond);
	box-shadow: var(--alnest-ombre);
	list-style: none;
}

.alnest-action__lien {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 48px;
	padding: 0.4rem 0.75rem;
	border-radius: calc(var(--alnest-rayon) / 2);
	color: var(--wp--preset--color--texte);
	text-decoration: none;
}

.alnest-action__lien:hover,
.alnest-action__lien:focus-visible {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--texte);
}

.alnest-action__lien svg {
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--lien);
}

.alnest-action__lien .alnest-action__image {
	width: 28px;
	height: 28px;
}

/* Bulle à droite du bouton, jamais jusqu'à la flèche ; masquée par le script si elle déborde, et menu ouvert. */
.alnest-action__bulle {
	max-width: calc(100vw - 56px - 48px - 4rem);
	overflow: hidden;
	padding: 0.45em 0.9em;
	border-radius: 999px;
	background: var(--wp--preset--color--fond);
	box-shadow: var(--alnest-ombre);
	color: var(--wp--preset--color--texte);
	font-size: var(--wp--preset--font-size--petit, 0.875rem);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alnest-action:has(details[open]) .alnest-action__bulle {
	display: none;
}

/* Salve : trois pulsations d'un anneau (scale et opacity seulement) ; coupées en mouvement réduit. */
.alnest-action__bouton::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--wp--preset--color--principale);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
}

.alnest-action.alnest-salve .alnest-action__bouton::after {
	animation: alnest-salve 1s ease-out 3;
}

@keyframes alnest-salve {
	from {
		opacity: 0.7;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(1.6);
	}
}

/* Barre d'action (téléphone, tablette) : une case par action, en bas de l'écran, à la place du bouton. */
.alnest-action-barre {
	position: fixed;
	z-index: var(--alnest-z-flottants);
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--wp--preset--color--principale);
}

.alnest-action-barre__lien {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	min-height: 56px;
	padding: 0.35rem 0.5rem;
	color: var(--wp--custom--bouton--texte);
	font-size: var(--wp--preset--font-size--petit, 0.875rem);
	font-weight: 600;
	text-decoration: none;
}

.alnest-action-barre__lien + .alnest-action-barre__lien {
	border-left: 1px solid color-mix(in srgb, var(--wp--custom--bouton--texte) 25%, transparent);
}

.alnest-action-barre__lien:hover,
.alnest-action-barre__lien:focus-visible {
	color: var(--wp--custom--bouton--texte);
}

.alnest-action-barre svg,
.alnest-action-barre .alnest-action__image {
	width: 22px;
	height: 22px;
}

@media (max-width: 1023px) {
	.alnest-action--barre {
		display: none;
	}

	body:has(.alnest-action-barre) {
		padding-bottom: calc(56px + env(safe-area-inset-bottom));
	}
}

/* Ordinateur : la barre devient le bouton ; l'action appel affiche le numéro. */
@media (min-width: 1024px) {
	.alnest-action-barre {
		display: none;
	}

	.alnest-action__bouton:has(.alnest-action__numero) {
		padding: 0 1.4em 0 1.1em;
	}

	.alnest-action__numero {
		display: inline;
	}

	.alnest-action__lien .alnest-action__numero {
		margin-left: auto;
		color: var(--wp--preset--color--secondaire);
	}
}

/* Page tout en bas : le pied finit au-dessus des éléments flottants (son dernier lien reste cliquable). */
body:has(.alnest-haut, .alnest-action) .alnest-pied {
	padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

/* ---------- Détails (« Lire la suite ») : texte replié, présent dans le HTML ---------- */

.wp-block-details > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--wp--preset--color--lien);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	cursor: pointer;
	list-style: none;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* Flèche qui pivote à l'ouverture (transform seulement ; aucune transition en mouvement réduit). */
.wp-block-details > summary::after {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform var(--alnest-transition);
}

.wp-block-details[open] > summary::after {
	transform: translateY(0.1em) rotate(225deg);
}

.wp-block-details[open] > summary {
	margin-bottom: var(--wp--custom--espacement--bloc);
}

.is-style-fond-fonce .wp-block-details > summary {
	color: var(--wp--custom--lien-fonce);
}

/* Imprimé : le texte replié est imprimé (navigateurs qui gèrent ::details-content). */
@media print {
	.wp-block-details::details-content {
		content-visibility: visible;
		display: block;
	}

	.wp-block-details > summary::after {
		display: none;
	}
}

/* ---------- Tableau (par exemple la flotte) : défile dans son cadre, jamais la page ---------- */

/* Le cadre (figure) ne dépasse jamais la colonne ; un tableau plus large (cellules sur une ligne) défile à
   l'intérieur, au doigt, à la souris ou au clavier (les navigateurs rendent un cadre qui défile focalisable). */
.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	margin-block: var(--wp--custom--espacement--bloc);
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.65em 1em;
	white-space: nowrap;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--bordure);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th,
.wp-block-table thead td {
	color: var(--wp--preset--color--titres);
	font-weight: var(--wp--custom--titres--graisse, 600);
	border-bottom-color: var(--wp--preset--color--lien);
}

.wp-block-table thead,
.wp-block-table tfoot {
	border: 0;
}

.wp-block-table figcaption {
	color: var(--wp--preset--color--secondaire);
	font-size: 0.875em;
}

.is-style-fond-fonce .wp-block-table thead th,
.is-style-fond-fonce .wp-block-table thead td {
	border-bottom-color: var(--wp--custom--lien-fonce);
}

/* ---------- Marque « à confirmer » (texte provisoire ; un paquet de production la refuse) ---------- */

/* Surlignée, soulignée en tirets, son libellé en petit après le texte : repérable d'un coup d'œil, à l'écran
   comme dans l'éditeur. Couleur accent : celle des messages d'erreur, rien d'autre ne la porte. */
mark.a-confirmer {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
	color: inherit;
	text-decoration: underline dashed var(--wp--preset--color--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	border-radius: 2px;
}

mark.a-confirmer[data-libelle]::after {
	content: " (" attr(data-libelle) ")";
	font-size: 0.75em;
	font-style: italic;
	text-decoration: none;
}

/* ---------- Accessibilité ---------- */

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

/* Sur fond foncé (en-tête, menus, pied) : couleur de lien lisible sur ce fond (settings.custom.lienFonce). */
.alnest-entete :focus-visible,
.alnest-pied :focus-visible,
.wp-block-navigation__responsive-container.is-menu-open :focus-visible,
.alnest-bandeau:not(.is-style-image) :focus-visible,
.alnest-diaporama :focus-visible {
	outline-color: var(--wp--custom--lien-fonce);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}