/*
 * Composants STAiiRS
 * -----------------------------------------------------------------------------
 * Règle 4 du CLAUDE.md : le design vient de theme.json. Ce fichier ne porte que
 * ce que theme.json ne sait pas exprimer — une forme, une pseudo-classe, une
 * règle d'impression. AUCUNE VALEUR EN DUR : chaque couleur, taille, espace ou
 * rayon est une variable produite par theme.json. Une valeur littérale ici est
 * un token manquant : l'ajouter à theme.json plutôt qu'ici.
 *
 * Les classes se posent dans l'éditeur, champ « Classe(s) CSS additionnelle(s) ».
 */

/* --------------------------------------------------------------------------
 * Surtitre de section — « LE DÉROULÉ », « NOS SERVICES »
 * Un paragraphe, jamais un titre : ce n'est pas un niveau de la hiérarchie.
 * -------------------------------------------------------------------------- */
.est-surtitre {
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--surtitre);
	font-weight: 600;
	letter-spacing: var(--wp--custom--surtitre--interlettrage);
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
}

/* --------------------------------------------------------------------------
 * Bloc posé sur le dégradé de marque ou sur l'encre.
 * theme.json met les paragraphes en gris : sur fond sombre il faut les reprendre.
 * -------------------------------------------------------------------------- */
.est-sombre,
.est-sombre :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--blanc);
}

.est-sombre :where(p, li) {
	color: var(--wp--preset--color--texte-clair);
}

.est-sombre .est-surtitre {
	color: var(--wp--preset--color--texte-clair);
}

/* Une carte posée sur une bande sombre redevient claire, et reprend l'encre. */
.est-sombre .est-carte,
.est-sombre .est-carte :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--encre);
}

.est-sombre .est-carte :where(p, li) {
	color: var(--wp--preset--color--gris);
}

/* --------------------------------------------------------------------------
 * Carte — fond, rayon, ombre et padding sont réglables dans l'éditeur ;
 * cette classe ne fait qu'étirer le contenu pour aligner les bas de carte
 * d'une même rangée, ce que l'éditeur ne propose pas.
 * -------------------------------------------------------------------------- */
.est-carte {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.est-carte > :last-child {
	margin-block-end: 0;
}

/* Colle un élément au bas de la carte — un chiffre clé, un lien. */
.est-pied-de-carte {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
 * Bouton à carré fléché — la signature STAiiRS.
 * Le carré est un ::after : un bouton du cœur de WordPress ne peut pas
 * contenir un enfant, et un bloc sur mesure ne se justifie pas pour une forme.
 * -------------------------------------------------------------------------- */
.est-bouton-fleche .wp-block-button__link,
a.est-bouton-fleche {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding-inline-end: var(--wp--preset--spacing--10);
}

.est-bouton-fleche .wp-block-button__link::after,
a.est-bouton-fleche::after {
	content: "";
	flex: 0 0 auto;
	inline-size: var(--wp--custom--carre--bouton);
	block-size: var(--wp--custom--carre--bouton);
	border-radius: calc(var(--wp--custom--rayon--bouton) - 2px);
	background-color: var(--wp--preset--color--encre);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: var(--wp--custom--carre--fleche);
}

/* Sur un bouton déjà encre, le carré s'inverse. */
.est-bouton-fleche.est-inverse .wp-block-button__link::after,
a.est-bouton-fleche.est-inverse::after {
	background-color: var(--wp--preset--color--blanc);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231E2745" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>');
}

/* --------------------------------------------------------------------------
 * Bandeau de logos clients — hauteurs optiques différentes d'un logo à l'autre,
 * c'est volontaire : elles sont relevées sur la maquette d'accueil.
 * -------------------------------------------------------------------------- */
.est-bandeau-logos img {
	inline-size: auto;
	opacity: 0.92;
	border-radius: 0;
}

/* --------------------------------------------------------------------------
 * Le coureur de la marque, au-dessus d'un surtitre centré.
 * -------------------------------------------------------------------------- */
.est-marque img {
	block-size: var(--wp--custom--marque--hauteur);
	inline-size: auto;
	border-radius: 0;
}

/* --------------------------------------------------------------------------
 * FAQ — le bloc Détails du cœur, habillé en carte.
 * -------------------------------------------------------------------------- */
.est-faq summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--titre-4);
	font-weight: 500;
	line-height: 1.35;
}

.est-faq summary::-webkit-details-marker {
	display: none;
}

.est-faq summary::after {
	content: "";
	float: inline-end;
	inline-size: var(--wp--custom--chevron--taille);
	block-size: var(--wp--custom--chevron--taille);
	margin-inline-start: var(--wp--preset--spacing--30);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233D6FA8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s;
}

.est-faq[open] summary::after {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
 * Colonne qui accompagne une longue liste (la FAQ, un sommaire).
 * -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
 * Barre de navigation — le lien de contact du menu prend l'habit du bouton.
 * La classe se pose sur l'élément de menu, dans Apparence › Menus.
 * -------------------------------------------------------------------------- */
.wp-block-navigation .est-menu-contact a {
	background-color: var(--wp--preset--color--vert);
	color: var(--wp--preset--color--encre);
	border-radius: var(--wp--custom--rayon--bouton);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-weight: 600;
}

.wp-block-navigation .est-menu-contact a:hover {
	background-color: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--blanc);
}

/* ===========================================================================
   MOBILE D'ABORD
   ---------------------------------------------------------------------------
   theme.json porte déjà l'échelle typographique et les espaces en `clamp()` :
   ils descendent seuls du bureau au téléphone. Ce qui suit couvre ce qu'une
   valeur fluide ne règle pas — une cible tactile, un élément qui n'existe
   qu'au téléphone, une colonne qui doit cesser de coller.
   =========================================================================== */

/* --- cibles tactiles : 44 px partout où l'on touche --- */
.wp-block-navigation a,
.wp-block-page-list a,
.est-faq summary {
	min-height: var(--wp--custom--tactile--minimum);
	display: flex;
	align-items: center;
}

.wp-block-post-content :where(.wp-block-list) a,
footer :where(.wp-block-navigation, .wp-block-page-list) a {
	padding-block: var(--wp--preset--spacing--10);
}

/* --- barre d'action fixe du téléphone ---
   La page WeChat fait une quinzaine d'écrans sur un 390 : l'appel à l'action
   du hero est hors de vue dès le deuxième. La barre le garde à portée. */
.est-barre-action {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	background-color: var(--wp--preset--color--blanc);
	border-top: 1px solid var(--wp--preset--color--filet);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	padding-bottom: calc(var(--wp--preset--spacing--20) + env(safe-area-inset-bottom));
	box-shadow: var(--wp--preset--shadow--barre);
}

.est-barre-action .wp-block-button {
	flex-grow: 1;
}

.est-barre-action .wp-block-button__link {
	display: flex;
	justify-content: center;
	width: 100%;
}

body:has(.est-barre-action) {
	padding-bottom: var(--wp--custom--action--hauteur);
}

/* --- la colonne collante ne colle qu'à partir de la tablette --- */
@media (min-width: 782px) {
	.est-collante {
		position: sticky;
		top: var(--wp--preset--spacing--50);
	}
}

/* --- au-dessus de 900 px, la barre d'action disparaît --- */
@media (min-width: 900px) {
	.est-barre-action {
		display: none;
	}

	body:has(.est-barre-action) {
		padding-bottom: 0;
	}

	footer :where(.wp-block-navigation, .wp-block-page-list) a {
		padding-block: 0;
	}
}

/* --- le burger du cœur de WordPress ne fait que 24 px : on le ramène à 44 --- */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-inline-size: var(--wp--custom--tactile--minimum);
	min-block-size: var(--wp--custom--tactile--minimum);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- écrans tactiles, quelle que soit la largeur ---
   Une tablette de 1024 px est un écran tactile. `pointer: coarse` vise le doigt
   et non la largeur : la souris garde le rendu dessiné. */
@media (pointer: coarse) {
	footer :where(.wp-block-navigation, .wp-block-page-list) a {
		padding-block: var(--wp--preset--spacing--10);
	}

	.est-faq summary,
	.wp-block-navigation a {
		min-height: var(--wp--custom--tactile--minimum);
	}
}

/* Pas de règle ici pour recentrer le contenu d'une carte : la mise en page
   « contenu contraint » de WordPress pose `margin-left/right: auto !important`
   sur chaque enfant, et aucune feuille de thème ne peut l'emporter. Une carte
   doit donc être déclarée en mise en page « flux » dans son motif
   (`"layout":{"type":"default"}`), pas en « contenu contraint ». */

/* --- le lien du logo fait 41 px de haut par défaut : 3 px sous la cible --- */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tactile--minimum);
}

/* --- coordonnées d'un bureau : un lien à toucher, pas un lien dans une phrase ---
   Les liens en pleine ligne de texte sont dispensés de la taille minimale
   (WCAG 2.5.8, exception « inline ») ; un numéro de téléphone sur une page
   contact, non : on le touche. */
.est-contact-direct {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
}

.est-contact-direct a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tactile--minimum);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--vert);
	text-decoration: none;
}

/* ===========================================================================
   MÉGA-MENU
   ---------------------------------------------------------------------------
   Le bloc Navigation du cœur sait empiler des sous-menus ; il ne sait pas en
   faire un panneau pleine largeur. Ce bloc le transforme sans toucher au
   balisage : le menu reste modifiable dans l'éditeur de site, et chaque
   libellé reste traduisible par Polylang.

   Trois niveaux : « Services » → les groupes (en colonnes) → les liens (en
   pastilles). Sous 900 px rien ne s'applique : le menu plein écran du cœur
   prend le relais.

   Les `!important` ne sont pas un raccourci. Le cœur de WordPress pose
   `position`, `width`, `opacity` et `visibility` sur ces mêmes éléments avec
   une spécificité qu'une feuille de thème ne peut pas dépasser proprement ;
   les surcharger est le seul moyen de reprendre la main sans dupliquer son
   balisage. Chaque `!important` ci-dessous correspond à une propriété que le
   cœur impose, aucune autre.
   =========================================================================== */
@media (min-width: 900px) {

	/* Le panneau s'ancre sur la barre, pas sur le mot « Services ».
	   Le <header> rendu porte .wp-block-template-part, pas .wp-block-group ;
	   et le cœur positionne aussi la liste du menu, qui servirait sinon de
	   repère. Les deux doivent être remis à plat. */
	header {
		position: relative;
	}

	header .wp-block-navigation__responsive-container,
	header .wp-block-navigation__responsive-close,
	header .wp-block-navigation__responsive-dialog,
	header .wp-block-navigation__responsive-container-content,
	header .est-mega,
	header .est-mega > .wp-block-navigation-item.has-child {
		position: static !important;
	}

	header .est-mega > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		position: absolute !important;
		inset-inline: 0 !important;
		top: 100% !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		transform: none !important;
		border: 0;
		border-radius: 0;
		background-color: var(--wp--preset--color--encre);
		box-shadow: 0 30px 60px rgba(10, 18, 38, 0.35);
		padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
		padding-inline: max(36px, calc((100% - 1290px) / 2));
		/* le cœur met le panneau en flex, ce qui annule la mise en colonnes */
		display: block !important;
		columns: 3;
		column-gap: var(--wp--preset--spacing--60);
	}

	/* chaque groupe reste d'un seul tenant dans sa colonne ; en flex, le
	   cœur alignerait le titre et sa liste sur une même ligne et la liste
	   se retrouverait à zéro de haut */
	header .est-mega > .wp-block-navigation-item.has-child
	> .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		display: block !important;
		break-inside: avoid;
		margin-block-end: var(--wp--preset--spacing--40);
	}

	/* les liens du troisième niveau se serrent, eux */
	header .est-mega .wp-block-navigation__submenu-container
	.wp-block-navigation__submenu-container > .wp-block-navigation-item {
		display: block !important;
		margin-block-end: 0;
	}

	/* le titre de groupe devient un intertitre, pas un lien de menu */
	header .est-mega .wp-block-navigation__submenu-container > .wp-block-navigation-item.has-child
	> .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--titres);
		font-size: var(--wp--preset--font-size--titre-4);
		font-weight: 500;
		color: var(--wp--preset--color--blanc);
		padding: 0 0 var(--wp--preset--spacing--20);
	}

	/* le troisième niveau s'affiche sous son titre au lieu de voler à côté */
	header .est-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		width: auto !important;
		min-width: 0 !important;
		inset: auto !important;
		/* le cœur le replie à zéro de haut et masque le débordement */
		block-size: auto !important;
		overflow: visible !important;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0;
		columns: 1;
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--10);
	}

	/* les liens, en pastilles */
	header .est-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: var(--wp--custom--tactile--minimum);
		padding: 0 var(--wp--preset--spacing--30);
		border-radius: var(--wp--custom--rayon--bouton);
		background-color: rgba(255, 255, 255, 0.12);
		color: var(--wp--preset--color--blanc);
		font-family: Inter, system-ui, sans-serif;
		font-size: 1rem;
		font-weight: 400;
	}

	header .est-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:hover {
		background-color: rgba(255, 255, 255, 0.22);
	}

	/* les chevrons internes n'ont plus de sens une fois le panneau ouvert */
	header .est-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		display: none;
	}

	/* l'onglet ouvert prend le vert pâle de la maquette */
	header .est-mega > .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content,
	header .est-mega > .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-item__content {
		background-color: #E8F7EF;
		color: var(--wp--preset--color--encre);
		border-radius: var(--wp--custom--rayon--bouton);
		padding-inline: var(--wp--preset--spacing--20);
	}
}

/* --- le chevron de sous-menu du cœur fait 20 px de haut --- */
.wp-block-navigation__submenu-icon {
	min-block-size: var(--wp--custom--tactile--minimum);
	min-inline-size: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- le pied de page ne déroule pas le méga-menu ---
   Il lui faut son propre menu, à plat. En attendant, on n'y montre que le
   premier niveau : un pied de page qui réaffiche les trois niveaux du menu
   principal n'a pas de sens, et chaque chevron y serait une cible de plus. */
footer .wp-block-navigation__submenu-container,
footer .wp-block-navigation__submenu-icon {
	display: none !important;
}

/* --- un titre de groupe reste cliquable : 43 px sans cette ligne --- */
@media (min-width: 900px) {
	header .est-mega .wp-block-navigation__submenu-container > .wp-block-navigation-item.has-child
	> .wp-block-navigation-item__content {
		min-block-size: var(--wp--custom--tactile--minimum);
		align-items: flex-start;
	}
}

/* ===========================================================================
   COMPOSANTS DES PAGES — portés depuis charte/maquettes/charte.css
   ---------------------------------------------------------------------------
   Mêmes formes, mêmes noms de classe au préfixe près, et toute valeur passée
   en token. Si une règle d'ici diverge de la maquette, c'est la maquette qui
   a raison : elle a été validée.
   =========================================================================== */

/* --- surtitre sur filigrane : le coureur en grand, très pâle --- */
.est-filigrane {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-block-size: var(--wp--preset--spacing--60);
	margin-block-end: var(--wp--preset--spacing--20);
}

.est-filigrane img {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -52%);
	block-size: var(--wp--custom--filigrane--hauteur);
	inline-size: auto;
	opacity: var(--wp--custom--filigrane--opacite);
	pointer-events: none;
	border-radius: 0;
}

.est-filigrane > p {
	position: relative;
	margin: 0;
}

/* --- grande carte d'objectif : l'illustration déborde, c'est voulu --- */
.est-objectif {
	position: relative;
	overflow: hidden;
	min-block-size: var(--wp--custom--hauteur--objectif);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.est-objectif .est-illu {
	position: absolute;
	inset-inline-end: -6%;
	inset-block-start: 6%;
	block-size: 58%;
	inline-size: auto;
	max-inline-size: none;
	border-radius: 0;
	margin: 0;
	pointer-events: none;
}

/* la hauteur se pose sur la figure ; sans cette règle l'image garde la sienne */
.est-objectif .est-illu img {
	block-size: 100%;
	inline-size: auto;
	max-inline-size: none;
	border-radius: 0;
}

.est-objectif .est-fleche {
	position: absolute;
	inset-inline-start: var(--wp--preset--spacing--40);
	inset-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--vert);
}

/* --- carte de service sur la bande : dégradé blanc vers papier --- */
.est-service {
	position: relative;
	overflow: hidden;
	min-block-size: var(--wp--custom--hauteur--service);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.est-service .est-illu {
	position: absolute;
	inset-inline-end: -4%;
	inset-block-start: 12%;
	block-size: 38%;
	inline-size: auto;
	max-inline-size: none;
	border-radius: 0;
	margin: 0;
	pointer-events: none;
}

/* la hauteur se pose sur la figure ; sans cette règle l'image garde la sienne */
.est-service .est-illu img {
	block-size: 100%;
	inline-size: auto;
	max-inline-size: none;
	border-radius: 0;
}

.est-service .est-fleche {
	position: absolute;
	inset-inline-start: var(--wp--preset--spacing--40);
	inset-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--vert);
}

/* --- carte de certification : icône d'application et sceau --- */
.est-certif .est-tete {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.est-certif .est-tete figure {
	margin: 0;
	flex: 0 0 auto;
}

/* --- tuiles de logos clients, en couleurs de marque --- */
.est-tuiles img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--wp--custom--rayon--photo);
}

/* --- paroles de partenaires --- */
.est-parole {
	display: flex;
	flex-direction: column;
	block-size: 100%;
}

.est-parole .est-qui {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
}

/* --- listes de contraintes, à filets --- */
.est-contraintes li {
	padding-block: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--wp--preset--color--filet);
}

.est-contraintes li::marker {
	color: var(--wp--preset--color--vert);
}

/* --- photo avec étiquette flottante --- */
.est-photo-etiquette {
	position: relative;
}

.est-photo-etiquette > .wp-block-group {
	margin-block-start: calc(var(--wp--preset--spacing--60) * -1);
	margin-inline: var(--wp--preset--spacing--20);
	position: relative;
}

/* --- portrait d'équipe --- */
.est-portrait .est-photo {
	min-block-size: var(--wp--custom--hauteur--portrait);
	display: grid;
	place-items: center;
}

/* --- rail horizontal : une série d'éléments pairs se glisse au téléphone --- */
.est-rail {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin-inline: calc(var(--wp--style--root--padding-left) * -1);
	padding-inline: var(--wp--style--root--padding-left);
	scroll-padding-inline: var(--wp--style--root--padding-left);
}

.est-rail::-webkit-scrollbar {
	display: none;
}

.est-rail > * {
	flex: 0 0 86%;
	scroll-snap-align: start;
	margin-block: 0;
}

.est-indice-rail {
	text-align: center;
}

@media (min-width: 900px) {
	.est-rail {
		display: grid;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}

	.est-rail > * {
		flex: none;
	}

	/* En grille, l'écart vertical remplace la marge que le rail annule. */
	.est-rail {
		row-gap: var(--wp--preset--spacing--70);
	}

	.est-indice-rail {
		display: none;
	}
}


/* --------------------------------------------------------------------------
 * Listes à coche verte — la puce est un masque, pas une image colorée : la
 * couleur reste donc le token `vert` et suit le thème.
 * -------------------------------------------------------------------------- */
.est-puces {
	list-style: none;
	padding-inline-start: 0;
}

.est-puces li {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--gris);
}

.est-puces li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--wp--preset--spacing--10);
	inline-size: var(--wp--custom--carre--fleche);
	block-size: var(--wp--custom--carre--fleche);
	background-color: var(--wp--preset--color--vert);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') no-repeat center / contain;
}

.est-sombre .est-puces li {
	color: var(--wp--preset--color--texte-clair);
}

/* --------------------------------------------------------------------------
 * Carte numérotée — le numéro reprend la graisse du surtitre, en bleu.
 * -------------------------------------------------------------------------- */
.est-numero .est-rang {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	letter-spacing: var(--wp--custom--surtitre--interlettrage);
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu);
}

/* --------------------------------------------------------------------------
 * Carte d'étape — la vignette est à fleur du bord haut, d'où le rognage.
 * -------------------------------------------------------------------------- */
.est-etape {
	overflow: hidden;
	padding: 0;
}

.est-etape > figure {
	margin: 0;
}

.est-etape > figure img {
	display: block;
	inline-size: 100%;
	block-size: var(--wp--custom--hauteur--ecran);
	object-fit: cover;
}

.est-etape > .wp-block-group {
	padding: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------------------------
 * Liste d'attente numérotée — la pastille verte de la section contact.
 * -------------------------------------------------------------------------- */
.est-etapes li {
	list-style: none;
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
	padding-block: var(--wp--preset--spacing--10);
}

.est-etapes {
	padding-inline-start: 0;
	counter-reset: etape;
}

.est-etapes li::before {
	counter-increment: etape;
	content: counter(etape);
	flex: 0 0 auto;
	inline-size: var(--wp--custom--carre--bouton);
	block-size: var(--wp--custom--carre--bouton);
	border-radius: var(--wp--custom--rayon--pastille);
	background-color: var(--wp--preset--color--vert);
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	display: grid;
	place-items: center;
}

/* --------------------------------------------------------------------------
 * Contacts directs — le téléphone et l'e-mail, soulignés de vert.
 * -------------------------------------------------------------------------- */
.est-direct {
	border-block-start: 1px solid var(--wp--preset--color--filet);
	padding-block-start: var(--wp--preset--spacing--40);
}

.est-direct a {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 500;
	text-decoration: none;
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--vert);
	display: inline-block;
	padding-block: var(--wp--preset--spacing--20);
}

.est-sombre .est-direct {
	border-block-start-color: rgb(255 255 255 / 18%);
}

/* --------------------------------------------------------------------------
 * Formulaire — l'habillage du rendu WPForms. Le thème ne fabrique pas de
 * formulaire : il met en forme celui du plugin, qui porte l'anti-spam,
 * l'envoi du mail et l'enregistrement des entrées (règle 9).
 * -------------------------------------------------------------------------- */
.est-formulaire {
	background-color: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--rayon--photo);
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--flottante);
}

.est-formulaire .wpforms-field {
	margin-block-end: var(--wp--preset--spacing--30);
	padding: 0;
}

.est-formulaire .wpforms-field-label {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--surtitre);
	color: var(--wp--preset--color--encre);
	display: block;
	margin-block-end: var(--wp--preset--spacing--10);
}

/*
 * Les champs sont dimensionnés par les variables WPForms plus bas. Y poser
 * en plus une hauteur et un rembourrage faisait rogner le texte des listes
 * déroulantes : le plugin applique déjà sa propre interligne.
 */
.est-formulaire .wpforms-container select {
	line-height: normal;
}

.est-formulaire textarea {
	resize: vertical;
}

/*
 * La couleur et le rayon du bouton viennent des variables WPForms plus bas ;
 * ne restent ici que la largeur pleine et la police de la charte, que le
 * plugin n'expose pas.
 */
.est-formulaire .wpforms-container .wpforms-submit {
	inline-size: 100%;
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--corps);
	cursor: pointer;
}

/* --- icône de carte : le trait suit la couleur d'accent --- */
.est-icone {
	color: var(--wp--preset--color--vert);
}

.est-icone svg {
	display: block;
}

/* --------------------------------------------------------------------------
 * Blocs alternés — un rang sur deux pose le visuel à droite. On inverse la
 * rangée plutôt que l'ordre des colonnes : l'ordre de lecture reste celui du
 * document, et au téléphone (où les colonnes s'empilent) rien ne s'inverse.
 * 782 px est le seuil du cœur pour l'empilement des colonnes — une media
 * query ne sait pas lire une variable CSS, c'est l'exception assumée.
 * -------------------------------------------------------------------------- */
@media (min-width: 782px) {
	.est-alterne > .wp-block-columns:nth-child(even) {
		flex-direction: row-reverse;
	}
}

/* --- photo d'un bloc alterné : cadrage fixe, comme sur la maquette --- */
.est-photo-bloc img {
	inline-size: 100%;
	block-size: var(--wp--custom--hauteur--bloc);
	object-fit: cover;
	border-radius: var(--wp--custom--rayon--photo);
}

/* --- sur fond sombre, le surtitre et ses liens passent en clair : le bleu
       de marque n'y est plus lisible --- */
.est-sombre .est-surtitre,
.est-sombre .est-surtitre a {
	color: var(--wp--preset--color--texte-clair);
}

/* --- colonne de contact du pied : le téléphone et l'e-mail restent des
       cibles de 44 px, même à la souris — ce sont les deux liens qu'on
       cherche en bas de page --- */
.est-pied-contact a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--tactile--minimum);
}

/* --- le logo du pied est un PNG à fond blanc : on le fond dans le papier,
       comme sur la maquette --- */
footer .wp-block-site-logo img {
	mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
 * WPForms « modern markup » se pilote par variables CSS. Les poser ici vaut
 * mieux que de lutter sur la spécificité : c'est l'interface prévue par le
 * plugin, et elle résiste à ses mises à jour.
 * -------------------------------------------------------------------------- */
.est-formulaire .wpforms-container {
	--wpforms-button-background-color: var(--wp--preset--color--vert);
	--wpforms-button-text-color: var(--wp--preset--color--encre);
	--wpforms-button-border-radius: var(--wp--custom--rayon--bouton);
	--wpforms-button-size-height: var(--wp--custom--tactile--minimum);
	--wpforms-field-border-radius: var(--wp--custom--rayon--bouton);
	--wpforms-field-border-color: var(--wp--preset--color--filet);
	--wpforms-field-text-color: var(--wp--preset--color--encre);
	--wpforms-field-size-input-height: var(--wp--custom--tactile--minimum);
	--wpforms-label-color: var(--wp--preset--color--encre);
	--wpforms-label-sublabel-color: var(--wp--preset--color--gris);
	--wpforms-page-break-color: var(--wp--preset--color--vert);
}

/* --- sur fond sombre, les liens de contact passent en blanc : le bleu de
       marque n'y est pas lisible --- */
.est-sombre .est-direct a,
.est-sombre .est-pied-contact a {
	color: var(--wp--preset--color--blanc);
}

/* --------------------------------------------------------------------------
 * Fil d'Ariane — rendu par Yoast, habillé ici. Le séparateur et la structure
 * viennent du plugin ; on ne touche qu'à la typographie et aux couleurs.
 * -------------------------------------------------------------------------- */
.est-fil-ariane {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--mention);
	color: var(--wp--preset--color--gris);
	border-block-end: 1px solid var(--wp--preset--color--filet);
}

/*
 * Les liens du fil sont petits par nature. Plutôt que de grossir le texte,
 * on étire la zone cliquable à 44 px de haut : la barre reste discrète et la
 * cible devient atteignable au doigt.
 */
.est-fil-ariane a {
	color: var(--wp--preset--color--gris);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--tactile--minimum);
}

.est-fil-ariane a:hover,
.est-fil-ariane a:focus {
	color: var(--wp--preset--color--bleu);
	text-decoration: underline;
}

.est-fil-ariane .breadcrumb_last {
	color: var(--wp--preset--color--encre);
}

/* --- listes de définitions des pages légales --- */
.est-definition {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--10);
	border-block-end: 1px solid var(--wp--preset--color--filet);
}

.est-definition strong {
	color: var(--wp--preset--color--encre);
	margin-inline-end: var(--wp--preset--spacing--20);
}

/* --- liens de taxonomie : petits par nature, cible étirée à 44 px --- */
.wp-block-post-terms a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--tactile--minimum);
}

/* --------------------------------------------------------------------------
 * Formulaire de commentaire — il sort des blocs du cœur, sans habillage.
 * Il s'affiche sur les 788 articles : il mérite la charte.
 * -------------------------------------------------------------------------- */
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
	inline-size: 100%;
	min-block-size: var(--wp--custom--tactile--minimum);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--wp--custom--rayon--bouton);
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--encre);
	font-size: var(--wp--preset--font-size--petit);
}

.wp-block-post-comments-form label {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--surtitre);
	color: var(--wp--preset--color--encre);
}

/* La case de consentement : la cible, c'est la ligne entière, pas le carré. */
.wp-block-post-comments-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--tactile--minimum);
}

.wp-block-post-comments-form .comment-form-cookies-consent label {
	display: flex;
	align-items: center;
	min-block-size: var(--wp--custom--tactile--minimum);
	font-weight: 400;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--mention);
	color: var(--wp--preset--color--gris);
}

.wp-block-post-comments-form .form-submit input[type="submit"] {
	min-block-size: var(--wp--custom--tactile--minimum);
	border: 0;
	border-radius: var(--wp--custom--rayon--bouton);
	padding-inline: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--vert);
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--petit);
	cursor: pointer;
}