/*
 * Composants éditoriaux de Let's Couleur et Sol.
 *
 * Direction artistique du CDC section 3.5 : photographie de chantier en grand
 * format, grille asymétrique de revue, filets fins plutôt qu'ombres, le blanc
 * comme matériau. Aucun dégradé décoratif, aucun verre dépoli, aucune carte
 * flottante à ombre diffuse. Le magenta ne sert que de surface, jamais de texte.
 *
 * Toutes les valeurs viennent des jetons de theme.json : aucune couleur en dur.
 */

/* ------------------------------------------------- Air autour des boutons */

/*
 * REGLE DE FOND, demandee deux fois par le client : de l air SYSTEMATIQUEMENT
 * des qu il y a un bouton. Le CDC 3.6 chiffre l exigence : JAMAIS MOINS DE
 * 48 PX entre un texte et l appel a l action qu il justifie. Le jeton xl vaut
 * exactement 48 px.
 *
 * Cette regle vaut pour tout appel a l action du CONTENU. L en-tete en est
 * exclue : son bouton vit sur une barre horizontale, ou la contrainte est
 * laterale et non verticale.
 *
 * Elle est posee AVANT les composants pour rester surchargeable, mais avec
 * assez de specificite pour battre les remises a zero de marge que chaque
 * composant applique a ses enfants.
 */
:root {
	--lcs-air-bouton: var(--wp--preset--spacing--xl);
}

main .entry-content .wp-block-buttons {
	margin-block-start: var(--lcs-air-bouton);
}

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

/*
 * Pied a quatre colonnes sur le modele fourni par le client le 9 aout : la
 * marque et sa presentation occupent la moitie gauche, trois colonnes de liens
 * la moitie droite, puis un filet et une barre basse.
 *
 * Le telephone, le courriel et l adresse ne sont PAS ecrits ici : ils sont
 * rendus par trois blocs lcs/coordonnees qui lisent l option lcs_coordonnees,
 * point unique de verite.
 *
 * Sur le fond contraste, seuls le blanc et le bleu pale tiennent le seuil AA :
 * aucune autre couleur de texte n est employee, et le magenta reste en surface.
 */
.lcs-pied__grille {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--xl);
	margin-block: 0;
}

@media (max-width: 1079.98px) {
	.lcs-pied__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 719.98px) {
	.lcs-pied__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--l);
	}
}

.lcs-pied__marque,
.lcs-pied__colonne {
	min-inline-size: 0;
	margin-block: 0;
	align-content: start;
	display: grid;
}

.lcs-pied__marque > *,
.lcs-pied__colonne > * {
	margin-block: 0;
}

.lcs-pied__marque {
	gap: var(--wp--preset--spacing--l);
}

.lcs-pied__colonne {
	gap: var(--wp--preset--spacing--s);
}

/*
 * Le losange seul porte la marque, le nom est ecrit en toutes lettres : le
 * logo complet contient une esperluette, proscrite a l ecran.
 */
.lcs-pied__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	inline-size: fit-content;
	text-decoration: none;
}

.lcs-pied__logo img {
	display: block;
	inline-size: 56px;
	block-size: 56px;
}

.lcs-pied__logo span {
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--grand);
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--base);
}

.lcs-pied h2 {
	margin-block: 0;
	color: var(--wp--preset--color--base);
}

.lcs-pied__note {
	font-style: italic;
	color: var(--wp--preset--color--primaire-clair);
}

/* La cible de 44 px fait aussi l espacement : aucune gouttiere en plus. */
.lcs-liste-pied,
.lcs-pied__reseaux,
.lcs-pied__legales {
	list-style: none;
	padding-inline: 0;
	margin: 0;
}

.lcs-liste-pied a,
.lcs-pied__legales a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--primaire-clair);
	text-decoration: none;
}

.lcs-liste-pied a:hover,
.lcs-liste-pied a:focus-visible,
.lcs-pied__legales a:hover,
.lcs-pied__legales a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lcs-pied__reseaux {
	display: flex;
	gap: var(--wp--preset--spacing--xs);
}

/*
 * Reseaux sociaux : glyphes PLEINS et non au trait. Un logo de marque en
 * contour est illisible a 22 px, et c est un logo, pas un pictogramme
 * fonctionnel : la regle du trait du CDC 3.6 ne s y applique pas.
 * La pastille reprend le motif deja valide au lot 1 : blanc sur accent-sombre,
 * mesure a 6,12:1, ce qui donne aux reseaux une couleur propre sans employer
 * le magenta en texte.
 */
.lcs-pied__reseaux a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	transition: background-color 160ms ease, color 160ms ease;
}

/*
 * Le magenta vif plutot que le magenta sombre : mesure, la pastille sombre ne
 * se detachait du fond ardoise qu a 2,39:1, sous le seuil de 3 exige pour un
 * element non textuel. Le magenta vif tient 3,63:1 sur le fond et le glyphe
 * blanc 3,66:1 sur la pastille, soit les deux seuils satisfaits.
 */
.lcs-pied__reseaux a:hover,
.lcs-pied__reseaux a:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contraste);
}

.lcs-pied__reseaux svg {
	display: block;
}

/*
 * Contact resserre : les trois lignes se suivent sans gouttiere, la cible de
 * 44 px des liens faisant tout l espacement. L adresse n est pas cliquable et
 * n a donc pas a tenir 44 px.
 */
.lcs-pied__contact,
.lcs-pied .lcs-coordonnees {
	display: grid;
	gap: 0;
	margin-block: 0;
}

.lcs-pied__contact > * {
	margin-block: 0;
}

/*
 * Le courriel n offre aucune occasion de cesure naturelle : sa largeur
 * minimale valait 206 px pour une colonne de 178 au palier 1080, et le pied
 * debordait de 13 px sur TOUTES les pages entre 1080 et 1205 px de large.
 * Defaut trouve a la mesure le 11 aout, anterieur au travail du jour. Meme
 * parade que la variante panneau, ou elle etait deja posee.
 */
.lcs-pied .lcs-coordonnees a,
.lcs-pied .lcs-coordonnees__adresse {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-block-size: 44px;
	inline-size: fit-content;
	max-inline-size: 100%;
	overflow-wrap: anywhere;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--primaire-clair);
	text-decoration: none;
}

.lcs-pied .lcs-coordonnees__adresse {
	align-items: start;
	min-block-size: 0;
	padding-block: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--base);
}

.lcs-pied .lcs-coordonnees a:hover,
.lcs-pied .lcs-coordonnees a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Pictogrammes au trait en masque : la couleur suit celle du texte. */
.lcs-pied .lcs-coordonnees a::before,
.lcs-pied .lcs-coordonnees__adresse::before {
	content: "";
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.lcs-pied .lcs-coordonnees__adresse::before {
	margin-block-start: 3px;
}

.lcs-pied .lcs-coordonnees__courriel::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m3.6 7.2 8.4 5.9 8.4-5.9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m3.6 7.2 8.4 5.9 8.4-5.9'/%3E%3C/svg%3E");
}

.lcs-pied .lcs-coordonnees__telephone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5L17 13l4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4 5.2 2 2 0 0 1 6 3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5L17 13l4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4 5.2 2 2 0 0 1 6 3z'/%3E%3C/svg%3E");
}

.lcs-pied .lcs-coordonnees__adresse::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}

.lcs-pied__filet {
	margin-block: var(--wp--preset--spacing--xl);
	border: 0;
	block-size: 1px;
	opacity: 0.5;
}

.lcs-pied__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--m);
	margin-block: 0;
}

.lcs-pied__bas > * {
	margin-block: 0;
}

.lcs-pied__legales {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--l);
}

@media (prefers-reduced-motion: reduce) {
	.lcs-pied__reseaux a {
		transition: none;
	}
}

/* ------------------------------------------------------------------ Filet */

.lcs-filet > :is(h2, h3):first-child::before {
	content: "";
	display: block;
	inline-size: 56px;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	margin-block-end: var(--wp--preset--spacing--m);
}

.lcs-surtitre {
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--primaire-sombre);
	font-weight: 600;
}

/* -------------------------------------------- Rythme vertical entre sections */

/*
 * Le coeur pose margin-block: 1.5rem 0 sur chaque enfant d une disposition
 * contrainte, soit une bande blanche de 24 px AJOUTEE au padding de chaque
 * section : mesuree 11 fois sur la page pilote, entre le hero et la barre de
 * preuves comme entre deux fonds successifs. Le rythme vertical est porte par
 * le seul padding des sections. La regle du coeur vaut (0,1,0) : un selecteur
 * de descendance suffit a la battre, sans important.
 */
main .entry-content > .lcs-section,
main .entry-content > .lcs-hero-photo,
main .entry-content > .wp-block-cover {
	margin-block-start: 0;
}

/* -------------------------------------------------------- Axe de lecture unique */

/*
 * Deux axes cohabitaient dans une meme section : les titres et les chapos sur
 * la colonne de lecture centree (332 px du bord a 1440), les grilles sur le
 * rail large (112 px). Mesure faite : le coeur centre tout enfant d une
 * disposition contrainte avec margin-left et margin-right en auto !important.
 * Aucune specificite ne bat un important, et la regle 5 du projet l interdit.
 *
 * On passe donc par la variable que le coeur consulte : la section adopte la
 * largeur du rail large comme largeur de contenu, si bien que son centrage
 * automatique cale TOUS ses enfants sur le meme bord gauche. La mesure de
 * lecture est ensuite rendue au texte par un retrait a droite calcule sur la
 * largeur reelle de la boite : 440 px au-dela du rail, degressif en dessous,
 * nul sous la colonne de lecture. Aucune requete de media n est necessaire.
 */
:root {
	--lcs-lecture: var(--wp--style--global--content-size);
}

.lcs-section.lcs-section {
	--wp--style--global--content-size: var(--wp--style--global--wide-size);
}

/*
 * Les blocs explicitement alignes sont EXCLUS : sans cette exclusion, le
 * retrait s appliquait aussi a la barre de preuves et a la liste des etapes,
 * qui sont des listes alignwide. Leur grille tombait de 1200 a 760 px et les
 * quatre preuves passaient de quatre colonnes a trois plus une. Mesure du
 * 9 aout, signalee par le client.
 */
.lcs-section.lcs-section > :is(h2, h3, p, ul, ol, details, blockquote):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	box-sizing: border-box;
	padding-inline-end: max(0px, calc(min(100%, var(--wp--style--global--wide-size)) - var(--lcs-lecture)));
}

/* ------------------------------------------------------------ En-tete collant */

/*
 * Le parent de l en-tete est .wp-site-blocks, qui a de la course : le sticky
 * tient. Le fond doit etre opaque, sinon le contenu defile en transparence.
 * Aucun filter ni transform sur les ancetres, verifie a la mesure.
 */
/* Hauteur reelle de l en-tete, mesuree au rendu : elle borne la hauteur du hero. */
:root {
	--lcs-entete: 81px;
}

@media (min-width: 768px) {
	:root {
		--lcs-entete: 87px;
	}
}

@media (min-width: 1080px) {
	:root {
		--lcs-entete: 90px;
	}
}

header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	background: var(--wp--preset--color--base);
}

.admin-bar header.wp-block-template-part {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part {
		inset-block-start: 46px;
	}
}

/*
 * ⛔ REGLE PERMANENTE, posee par le client le 10 aout 2026 :
 * LE FIL D ARIANE N EST JAMAIS AFFICHE, SUR AUCUNE PAGE.
 *
 * Le balisage RESTE dans les gabarits, a la demande expresse du client : il
 * n est que masque. Ne jamais le retirer des gabarits, ne jamais le reafficher
 * sur un nouveau gabarit. Tout gabarit cree ensuite herite de cette regle
 * puisqu elle vise la classe, pas une page.
 *
 * Le balisage conserve ne sert plus l affichage, mais Yoast continue par
 * ailleurs d emettre le balisage structure BreadcrumbList, qui lui reste utile
 * au referencement et n a rien a voir avec ce bloc.
 */
.lcs-fil-ariane {
	display: none;
}

/*
 * Un element en display:none RESTE un frere pour le selecteur * + * de la
 * disposition en flux : sans cette regle, le bloc suivant garderait les 24 px
 * de blockGap et une bande blanche subsisterait sous le menu. Piege 10.
 */
main > .lcs-fil-ariane + * {
	margin-block-start: 0;
}

/* -------------------------------------------------- Hero photographique */

.lcs-hero-photo {
	min-block-size: calc(100svh - var(--lcs-entete, 84px) - var(--lcs-barre-admin, 0px));
	/* Le coeur pose padding: 1em sur la couverture, soit 16,11 px avec le corps
	   fluide : on rend la gouttiere exacte de la racine pour ne pas decaler l axe. */
	padding-inline: var(--wp--style--root-padding-left, var(--wp--preset--spacing--s));
}

/*
 * Le conteneur interne du bloc couverture est ecrit a la main : il ne porte
 * pas les classes de disposition du coeur. On lui rend le rail large et la
 * gouttiere de la racine, sinon la grille prend toute la largeur et le titre
 * sort de l axe.
 */
.lcs-hero-photo .wp-block-cover__inner-container {
	inline-size: 100%;
}

/*
 * Arbitrage client du 9 aout : le hero rejoint le rail des sections. La grille
 * adopte la largeur large du theme au lieu de 1520 px, si bien que le H1 tombe
 * exactement sur le bord gauche des titres de section : 112 px a 1440,
 * 352 px a 1920, la gouttiere de la racine en dessous du rail.
 */
.lcs-hero-photo .lcs-hero-grille {
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/*
 * La grille du hero vit dans le rail large, mais son bloc de texte est
 * repoussé jusqu'à l'axe de lecture : le H1 tombe exactement sur la même
 * verticale que la prose du reste de la page, à tous les paliers.
 */
.lcs-hero-grille {
	display: grid;
	gap: var(--wp--preset--spacing--xl);
	align-items: center;
}

/*
 * Deux colonnes au-dela de 1080 : le texte puis la carte. La gouttiere
 * calculee qui ramenait le texte sur l ancien axe a ete retiree le 9 aout :
 * c est desormais la largeur du rail qui place le bloc, comme pour les
 * sections, et les deux axes n en font plus qu un.
 */
@media (min-width: 1080px) {
	.lcs-hero-grille {
		grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
		column-gap: var(--wp--preset--spacing--xxl);
	}
}

.lcs-hero-texte {
	display: grid;
	gap: var(--wp--preset--spacing--m);
	margin-block: 0;
}

.lcs-hero-texte > * {
	margin-block: 0;
}

.lcs-hero-texte .lcs-surtitre {
	color: var(--wp--preset--color--primaire-clair);
}

/* Filet magenta en surface, jamais en texte : il ouvre le message. */
.lcs-hero-texte .lcs-surtitre::before {
	content: "";
	display: block;
	inline-size: 56px;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	margin-block-end: var(--wp--preset--spacing--s);
}

/*
 * Rythme du titre : blanc pour le metier et la ville, bleu pale pour le
 * territoire. Le bleu primaire a ete essaye le 9 aout puis abandonne : il
 * tombait a 1,09:1 sur la photographie voilee, pour 3:1 exiges a 52 px.
 * Le bleu pale tient 4,81:1 au pire cas.
 */
.lcs-h1-lieu {
	color: var(--wp--preset--color--primaire-clair);
}

/* ------------------------------------------- Hero des pages filles de silo */

/*
 * Modele apporte par le client le 11 aout : le voile ne couvre plus toute la
 * photographie, il est DENSE A GAUCHE et s efface vers la droite, qui reste
 * lisible. La colonne de gauche ne porte que le titre, le chapo, le telephone,
 * le bouton de devis et les pastilles de reassurance. Pas de carte a droite.
 *
 * Le voile est peint par le span du coeur. Sa couleur de fond porte un
 * important (classe de preset), donc on ne la touche pas : on DECOUPE le span
 * par un masque horizontal, ce qui donne le degrade sans jamais lutter contre
 * la cascade du coeur.
 *
 * Regle de securite : la zone pleinement dense va jusqu a 60 pour cent de la
 * largeur, et la colonne de texte est capee a 52 vw. Aucun glyphe ne peut donc
 * sortir de la zone ou le voile vaut 70 pour cent, la seule ou le contraste a
 * ete mesure. Cf. le piege du degrade releve sur un autre chantier.
 */
@media (min-width: 1080px) {
	.wp-block-cover.lcs-hero-silo.lcs-hero-silo > .wp-block-cover__background {
		-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 60%, rgba(0, 0, 0, 0.45) 74%, rgba(0, 0, 0, 0.08) 88%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 0%, #000 60%, rgba(0, 0, 0, 0.45) 74%, rgba(0, 0, 0, 0.08) 88%, transparent 100%);
	}

	/*
	 * Une seule colonne, calee a gauche : la piste de 400 px de la carte n a
	 * plus lieu d etre. La largeur suit la zone dense du voile.
	 */
	.lcs-hero-silo .lcs-hero-grille {
		grid-template-columns: minmax(0, min(700px, 52vw));
		column-gap: 0;
	}
}

/*
 * La gouttiere de la grille du bloc de texte vaut deja 24 px : la regle
 * generale des 48 px devant un bouton s AJOUTERAIT a elle et donnerait 72.
 * On ne pose donc que le complement. Piege 38, cas 2.
 */
.lcs-hero-silo .lcs-hero-texte .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--m);
}

/*
 * Telephone et bouton sur une meme ligne, demande du client le 11 aout.
 * Mesure : 333 + 201 + 24 de gouttiere font 558 px pour une colonne de 700,
 * ils tiennent avec 142 px de reserve. Le conteneur .lcs-actions existe deja
 * et neutralise la marge haute du bloc de boutons, sans quoi le bouton
 * decrocherait de 24 px sous le telephone (piege 38, cas 3).
 *
 * Les trois reperes de reassurance, eux, ne tiennent PAS sur une ligne : ils
 * mesurent 693 px a eux seuls, 725 avec la plus petite gouttiere lisible,
 * pour 700 disponibles. Ils passent donc en colonne, un par ligne, pastilles
 * alignees sur le meme bord gauche que le reste du hero, plutot que cassees
 * en deux plus un.
 */
.lcs-hero-silo .lcs-hero-reassurance {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--s);
}

/*
 * Les deux commandes ont EXACTEMENT la meme taille, demande du client le
 * 11 aout. Mesure avant correction : la plaque du telephone faisait 63,6 px
 * de haut pour 223 de large, le bouton 56,8 pour 201, soit 6,8 px d ecart en
 * hauteur. La hauteur est desormais posee en dur sur les deux, et une largeur
 * minimale commune les fait lire comme une paire. 56 px restent au-dessus de
 * la cible tactile de 44.
 */
.lcs-hero-silo .lcs-actions .lcs-hero-tel,
.lcs-hero-silo .lcs-actions .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	block-size: 56px;
	min-inline-size: 224px;
	padding-block: 0;
}

/*
 * Les trois reperes sur UNE SEULE ligne, demande du client. Ils ne tenaient
 * pas avec les libelles longs : 693 px a eux seuls, 725 avec la plus petite
 * gouttiere lisible, pour 700 disponibles. Les libelles ont ete resserres et
 * tombent a 531 px, soit 579 avec la gouttiere : ils tiennent des que la
 * colonne atteint 624 px, ce qui arrive a 1200 px de large. En dessous ils
 * restent empiles, un par ligne.
 */
@media (min-width: 1200px) {
	.lcs-hero-silo .lcs-hero-reassurance {
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		column-gap: var(--wp--preset--spacing--m);
	}

	/*
	 * Pas de white-space nowrap ici : la rangee ne dispose que de 13 px de
	 * reserve a 1200 px, mesure du 11 aout. Sans cesure possible, le moindre
	 * libelle rallonge deborderait ; avec elle, il se plie sur deux lignes et
	 * les trois reperes restent cote a cote. La rangee, elle, est garantie par
	 * flex-wrap nowrap sur le conteneur.
	 */
}

/*
 * Quand la place manque, le bouton repasse SOUS le telephone : la contrainte
 * redevient verticale et les 48 px du CDC 3.6 reprennent leurs droits. On
 * n ecarte que l axe des rangees, la gouttiere laterale restant a 24 px quand
 * les deux tiennent cote a cote. Mesure du 11 aout a 375 px : 24 px avant
 * correction, 48 apres.
 */
.lcs-hero-silo .lcs-actions {
	row-gap: var(--wp--preset--spacing--xl);
}

/* ------------------------------------------------ Engagements de chantier */

/*
 * Bande d engagements, demandee par le client le 11 aout en remplacement des
 * quatre chiffres. Quatre themes, deux preuves chacun.
 *
 * Le nombre de colonnes est DECLARE, une puis deux puis quatre, jamais laisse
 * a auto-fit : piege 77, applique d emblee cette fois.
 *
 * Aucune ombre, et pas une pastille ronde de plus : une carte blanche posee
 * sur le sable, un filet magenta de 3 px en tete, un pictogramme au trait en
 * bleu. Le magenta reste une surface, jamais un texte.
 */
.lcs-engagements {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--l);
	margin-block-start: var(--wp--preset--spacing--xl);
}

/*
 * Le blockGap du coeur s ajouterait a la gouttiere de la grille pour les
 * cartes, et il ECRASE la marge haute de la grille elle-meme : sa regle vaut
 * (0,2,0), la mienne valait (0,1,0) et rendait 24 px au lieu des 48 voulus.
 * La classe est doublee pour reprendre la main sans important. Piege 41.
 */
.lcs-engagements.lcs-engagements {
	margin-block-start: var(--wp--preset--spacing--xl);
}

.lcs-engagements.lcs-engagements > * {
	margin-block: 0;
}

@media (min-width: 720px) {
	.lcs-engagements {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.lcs-engagements {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.lcs-engagement {
	box-sizing: border-box;
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--l);
	background: var(--wp--preset--color--base);
	/*
	 * Le blanc ne se detache du sable qu a 1,11 sur 1 : l ecart de clarte ne
	 * suffit pas a detourer la carte. Un filet fin s en charge, comme sur
	 * l encart de la bande d appel a l action. La DA proscrit les ombres.
	 */
	border: 1px solid var(--wp--preset--color--bordure);
	border-block-start: 3px solid var(--wp--preset--color--accent);
	border-radius: 5px;
	min-inline-size: 0;
}

.lcs-engagement > * {
	margin-block: 0;
}

.lcs-engagement svg {
	color: var(--wp--preset--color--primaire);
}

.lcs-engagement__titre.lcs-engagement__titre {
	font-size: var(--wp--preset--font-size--moyen);
	line-height: 1.25;
}

/*
 * Chaque preuve est tenue par un filet bleu de 2 px plutot que par une puce :
 * la DA demande des filets fins, et une puce de liste ne s aligne jamais avec
 * le reste de la carte.
 */
.lcs-engagement__liste.lcs-engagement__liste {
	list-style: none;
	margin: 0;
	padding-inline: 0;
	display: grid;
	gap: var(--wp--preset--spacing--s);
}

.lcs-engagement__liste > li {
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--s);
	border-inline-start: 2px solid var(--wp--preset--color--primaire);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
	color: var(--wp--preset--color--contraste-doux);
}

/* --------------------------------------------- Engagements en damier plein */

/*
 * Parti B, retenu par le client le 11 aout apres trois maquettes. La carte
 * blanche a coin arrondi, filet magenta et petit pictogramme etait exactement
 * le cliche qu il avait deja nomme le 9 aout : elle disparait.
 *
 * A la place, quatre blocs JOINTIFS, sans gouttiere, sans rayon, sans ombre.
 * On lit une mosaique, pas quatre cartes qui flottent. Le magenta devient une
 * arete de 6 px, donc une surface, jamais un texte.
 *
 * L alternance est portee par nth-child et non par une classe : en UNE colonne
 * elle doit etre stricte, sinon les blocs 2 et 3, tous deux clairs, se
 * confondent en un seul pave ; en DEUX colonnes elle doit etre en damier.
 * Les teintes voyagent par variables, si bien que les enfants n ont qu une
 * seule regle chacun.
 */
.lcs-damier {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

/*
 * Mesure du 11 aout : la marge du coeur ne s ajoute pas ici, elle fusionne.
 * On pose donc les 48 px du rythme en entier, et la classe est doublee pour
 * battre la regle du coeur qui vaut (0,2,0). Piege 41.
 */
.lcs-damier.lcs-damier {
	margin-block-start: var(--wp--preset--spacing--xl);
}

/* Sans quoi le blockGap ecarterait les blocs, qui doivent se toucher. */
.lcs-damier.lcs-damier > * {
	margin-block: 0;
}

.lcs-damier__bloc {
	box-sizing: border-box;
	min-inline-size: 0;
	padding: var(--wp--preset--spacing--l);
	padding-inline-start: var(--wp--preset--spacing--m);
	border-inline-start: 6px solid var(--wp--preset--color--accent);
	background: var(--lcs-damier-fond);
}

.lcs-damier__bloc > * {
	margin-block: 0;
}

.lcs-damier__titre.lcs-damier__titre {
	margin-block-end: var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--moyen);
	line-height: 1.25;
	color: var(--lcs-damier-titre);
}

.lcs-damier__liste.lcs-damier__liste {
	list-style: none;
	margin: 0;
	padding-inline: 0;
	display: grid;
	gap: var(--wp--preset--spacing--s);
}

.lcs-damier__liste > li {
	margin: 0;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.6;
	color: var(--lcs-damier-texte);
}

/* Une seule colonne : alternance stricte, un bloc sur deux. */

.lcs-damier__liste a {
	color: var(--lcs-damier-texte);
}
.lcs-damier__bloc:nth-child(odd) {
	--lcs-damier-fond: var(--wp--preset--color--contraste);
	--lcs-damier-titre: var(--wp--preset--color--base);
	--lcs-damier-texte: var(--wp--preset--color--primaire-clair);
}

.lcs-damier__bloc:nth-child(even) {
	--lcs-damier-fond: var(--wp--preset--color--base);
	--lcs-damier-titre: var(--wp--preset--color--contraste);
	--lcs-damier-texte: var(--wp--preset--color--contraste-doux);
}

/* Deux colonnes : damier, donc premier et quatrieme en ardoise. */
@media (min-width: 720px) {
	.lcs-damier {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lcs-damier__bloc:nth-child(1),
	.lcs-damier__bloc:nth-child(4) {
		--lcs-damier-fond: var(--wp--preset--color--contraste);
		--lcs-damier-titre: var(--wp--preset--color--base);
		--lcs-damier-texte: var(--wp--preset--color--primaire-clair);
	}

	.lcs-damier__bloc:nth-child(2),
	.lcs-damier__bloc:nth-child(3) {
		--lcs-damier-fond: var(--wp--preset--color--base);
		--lcs-damier-titre: var(--wp--preset--color--contraste);
		--lcs-damier-texte: var(--wp--preset--color--contraste-doux);
	}
}

/* ------------------------------------- Engagements en volets qui se deploient */

/*
 * Modele apporte par le client le 11 aout : des volets etroits qui s ouvrent
 * l un apres l autre. SANS LA MOINDRE LIGNE DE JAVASCRIPT, par le meme
 * mecanisme que le diaporama du pilier : des ancres VIDES en tete, toutes a la
 * meme ordonnee pour que le saut du navigateur soit identique, puis le
 * combinateur de freres. Piege 51.
 *
 * Trois temps, dans cet ordre :
 *   1. le premier volet est ouvert par defaut ;
 *   2. des qu une ancre est visee, ce defaut tombe ;
 *   3. le volet vise s ouvre.
 * Les specificites vont croissant, (0,3,0) puis (0,4,0) puis (1,3,0), donc
 * aucune ne depend de l ordre du fichier.
 *
 * Le corps replie est CLIPPE, jamais mis en display none : les quatre
 * engagements restent dans le document, lisibles par un lecteur d ecran et par
 * un moteur. C est la difference avec le diaporama, dont trois volets sur
 * quatre pesaient moins en referencement.
 */
.lcs-deploy__ancre {
	display: block;
	block-size: 0;
	scroll-margin-block-start: calc(var(--lcs-entete, 90px) + var(--wp--preset--spacing--l));
}

/*
 * Le conteneur .lcs-deploy est un enfant direct de la section : le coeur lui
 * pose deja 24 px de marge haute. On n ajoute donc que le complement pour
 * atteindre les 48 px du rythme, jamais les 48 entiers. Piege 38, cas 2.
 */
.lcs-deploy__piste {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--l);
	margin-block-start: var(--wp--preset--spacing--xl);
}

@media (min-width: 720px) and (max-width: 1079.98px) {
	.lcs-deploy__piste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.lcs-deploy__volet {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
	min-inline-size: 0;
	padding: var(--wp--preset--spacing--l);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--bordure);
	border-block-start: 3px solid var(--wp--preset--color--accent);
	border-radius: 5px;
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-deploy__onglet {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--s);
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.lcs-deploy__picto {
	display: inline-flex;
	color: var(--wp--preset--color--primaire);
}

.lcs-deploy__titre {
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 600;
	line-height: 1.25;
}

.lcs-deploy__liste {
	list-style: none;
	margin: 0;
	padding-inline: 0;
	display: grid;
	gap: var(--wp--preset--spacing--s);
}

.lcs-deploy__liste > li {
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--s);
	border-inline-start: 2px solid var(--wp--preset--color--primaire);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
	color: inherit;
}

/*
 * Au-dela de 1080 px seulement : la piste devient une rangee de volets, trois
 * etroits et un ouvert. En dessous, tout reste deplie, chaque engagement
 * lisible d un coup d oeil.
 */
@media (min-width: 1080px) {
	.lcs-deploy__piste {
		display: flex;
		align-items: stretch;
		gap: var(--wp--preset--spacing--m);
		min-block-size: 340px;
	}

	.lcs-deploy__volet {
		flex: 0 0 96px;
		overflow: hidden;
		justify-content: flex-end;
		background: var(--wp--preset--color--contraste);
		border-color: var(--wp--preset--color--contraste);
		color: var(--wp--preset--color--base);
		transition: flex-basis 350ms ease, background-color 350ms ease;
	}

	.lcs-deploy__volet .lcs-deploy__onglet {
		flex-direction: column-reverse;
		justify-content: flex-end;
		align-items: center;
		block-size: 100%;
		color: var(--wp--preset--color--base);
	}

	.lcs-deploy__volet .lcs-deploy__picto {
		color: var(--wp--preset--color--primaire-clair);
	}

	.lcs-deploy__volet .lcs-deploy__titre {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		white-space: nowrap;
	}

	/*
	 * Hauteur NULLE, pas seulement largeur nulle : a inline-size 0 le texte se
	 * plie a un caractere par ligne et la piste montait a 929 px. Mesure du
	 * 11 aout. Le contenu reste dans le document, simplement clippe.
	 */
	.lcs-deploy__volet .lcs-deploy__corps {
		opacity: 0;
		inline-size: 0;
		block-size: 0;
		overflow: hidden;
		transition: opacity 200ms ease;
	}

	/*
	 * La cible couvre TOUT le volet replie : le lien ne mesurait que 30 px de
	 * large, la largeur de son texte tourne, pour une bande de 96. Un seul lien
	 * par volet, donc aucun recouvrement (piege 82).
	 */
	.lcs-deploy__volet .lcs-deploy__onglet::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.lcs-deploy__piste > .lcs-deploy__volet:first-child {
		flex: 1 1 auto;
		justify-content: flex-start;
		background: var(--wp--preset--color--base);
		border-color: var(--wp--preset--color--bordure);
		border-block-start-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--contraste-doux);
	}

	.lcs-deploy__piste > .lcs-deploy__volet:first-child .lcs-deploy__onglet {
		flex-direction: column;
		align-items: flex-start;
		block-size: auto;
		color: var(--wp--preset--color--contraste);
	}

	.lcs-deploy__piste > .lcs-deploy__volet:first-child .lcs-deploy__picto {
		color: var(--wp--preset--color--primaire);
	}

	.lcs-deploy__piste > .lcs-deploy__volet:first-child .lcs-deploy__titre {
		writing-mode: horizontal-tb;
		transform: none;
		white-space: normal;
	}

	.lcs-deploy__piste > .lcs-deploy__volet:first-child .lcs-deploy__corps {
		opacity: 1;
		inline-size: auto;
		block-size: auto;
		overflow: visible;
	}

	.lcs-deploy__piste > .lcs-deploy__volet:first-child .lcs-deploy__onglet::after {
		content: none;
	}

	.lcs-deploy__ancre:target ~ .lcs-deploy__piste > .lcs-deploy__volet {
		flex: 0 0 96px;
		justify-content: flex-end;
		background: var(--wp--preset--color--contraste);
		border-color: var(--wp--preset--color--contraste);
		color: var(--wp--preset--color--base);
	}

	.lcs-deploy__ancre:target ~ .lcs-deploy__piste > .lcs-deploy__volet .lcs-deploy__onglet {
		flex-direction: column-reverse;
		align-items: center;
		block-size: 100%;
		color: var(--wp--preset--color--base);
	}

	.lcs-deploy__ancre:target ~ .lcs-deploy__piste > .lcs-deploy__volet .lcs-deploy__picto {
		color: var(--wp--preset--color--primaire-clair);
	}

	.lcs-deploy__ancre:target ~ .lcs-deploy__piste > .lcs-deploy__volet .lcs-deploy__titre {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		white-space: nowrap;
	}

	.lcs-deploy__ancre:target ~ .lcs-deploy__piste > .lcs-deploy__volet .lcs-deploy__corps {
		opacity: 0;
		inline-size: 0;
		block-size: 0;
		overflow: hidden;
	}

	.lcs-deploy__ancre:target ~ .lcs-deploy__piste > .lcs-deploy__volet .lcs-deploy__onglet::after {
		content: "";
	}

	#lcs-eng-1:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(1),
	#lcs-eng-2:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(2),
	#lcs-eng-3:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(3),
	#lcs-eng-4:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(4) {
		flex: 1 1 auto;
		justify-content: flex-start;
		background: var(--wp--preset--color--base);
		border-color: var(--wp--preset--color--bordure);
		border-block-start-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--contraste-doux);
	}

	#lcs-eng-1:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(1) .lcs-deploy__onglet,
	#lcs-eng-2:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(2) .lcs-deploy__onglet,
	#lcs-eng-3:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(3) .lcs-deploy__onglet,
	#lcs-eng-4:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(4) .lcs-deploy__onglet {
		flex-direction: column;
		align-items: flex-start;
		block-size: auto;
		color: var(--wp--preset--color--contraste);
	}

	#lcs-eng-1:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(1) .lcs-deploy__picto,
	#lcs-eng-2:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(2) .lcs-deploy__picto,
	#lcs-eng-3:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(3) .lcs-deploy__picto,
	#lcs-eng-4:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(4) .lcs-deploy__picto {
		color: var(--wp--preset--color--primaire);
	}

	#lcs-eng-1:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(1) .lcs-deploy__titre,
	#lcs-eng-2:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(2) .lcs-deploy__titre,
	#lcs-eng-3:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(3) .lcs-deploy__titre,
	#lcs-eng-4:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(4) .lcs-deploy__titre {
		writing-mode: horizontal-tb;
		transform: none;
		white-space: normal;
	}

	#lcs-eng-1:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(1) .lcs-deploy__corps,
	#lcs-eng-2:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(2) .lcs-deploy__corps,
	#lcs-eng-3:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(3) .lcs-deploy__corps,
	#lcs-eng-4:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(4) .lcs-deploy__corps {
		opacity: 1;
		inline-size: auto;
		block-size: auto;
		overflow: visible;
	}

	#lcs-eng-1:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(1) .lcs-deploy__onglet::after,
	#lcs-eng-2:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(2) .lcs-deploy__onglet::after,
	#lcs-eng-3:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(3) .lcs-deploy__onglet::after,
	#lcs-eng-4:target ~ .lcs-deploy__piste > .lcs-deploy__volet:nth-child(4) .lcs-deploy__onglet::after {
		content: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lcs-deploy__volet,
	.lcs-deploy__corps {
		transition: none;
	}
}

/* Reassurance sous le numero : pictos au trait, jamais d emoji. */
.lcs-hero-reassurance {
	list-style: none;
	padding-inline: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--l);
}

.lcs-hero-reassurance > li {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--wp--preset--color--primaire-clair);
}

/* Pastille magenta foncee : le picto blanc y tient 6,12:1. */
.lcs-pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 30px;
	block-size: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-sombre);
}

.lcs-hero-reassurance svg {
	flex: none;
	color: var(--wp--preset--color--base);
}

/*
 * Telephone : un simple filet bleu pale. Le picto et les chiffres sont centres
 * l un sur l autre par une hauteur de ligne a 1 ; la cible tactile de 44 px est
 * portee par un ::after qui couvre toute la plaque.
 */
.lcs-hero-tel {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-self: start;
	inline-size: fit-content;
	max-inline-size: 100%;
	gap: 0.6rem;
	padding: 0.55rem var(--wp--preset--spacing--m);
	border: 1px solid var(--wp--preset--color--primaire-clair);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primaire-clair) 55%, transparent);
	border-radius: 5px;
	transition: border-color 160ms ease;
}

.lcs-hero-tel:hover,
.lcs-hero-tel:focus-within {
	border-color: var(--wp--preset--color--primaire-clair);
}

/*
 * Le blockGap du groupe pose 24 px de marge haute sur le bloc coordonnees :
 * la plaque grossit et le picto se decale de 12 px. Deux fois la classe pour
 * battre la regle du coeur a specificite egale, sans important.
 */
.lcs-hero-tel.lcs-hero-tel > * {
	margin-block: 0;
}

.lcs-hero-tel .lcs-coordonnees__telephone::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lcs-hero-tel svg {
	flex: none;
	color: var(--wp--preset--color--primaire-clair);
}

.lcs-hero-tel .lcs-coordonnees__telephone {
	display: inline-flex;
	align-items: center;
	min-block-size: 0;
	line-height: 1;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--tres-grand);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.lcs-hero-tel .lcs-coordonnees__telephone:hover,
.lcs-hero-tel .lcs-coordonnees__telephone:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*
 * Verre depoli demande par le client. Le fond translucide est exprime par
 * color-mix a partir du jeton, jamais en dur ; les navigateurs qui ignorent
 * color-mix retombent sur le blanc opaque declare juste avant.
 * Contraste calcule au pire cas (photographie noire sous le voile) : 6,16:1.
 */
.lcs-hero-carte.lcs-hero-carte {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--base);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 62%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	backdrop-filter: blur(16px) saturate(1.15);
	display: grid;
	gap: var(--wp--preset--spacing--m);
	align-content: start;
	padding: var(--wp--preset--spacing--l);
	border: 1px solid var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
	border-radius: 5px;
	margin-block: 0;
}

.lcs-hero-carte > * {
	margin-block: 0;
}

.lcs-hero-liste {
	list-style: none;
	padding-inline: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--s);
}

.lcs-hero-liste > li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: var(--wp--preset--spacing--s);
	align-items: start;
	font-size: var(--wp--preset--font-size--petit);
}

.lcs-hero-liste svg {
	color: var(--wp--preset--color--primaire);
	margin-block-start: 2px;
}

/*
 * La carte du hero est une grille a gouttiere de 24 px : la marge du bouton
 * s AJOUTE a cette gouttiere, on ne pose donc que le complement pour atteindre
 * les 48 px exiges. Deux fois la classe pour battre la regle generale.
 */
.lcs-hero-carte .wp-block-buttons.wp-block-buttons {
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
	margin-block-start: calc(var(--lcs-air-bouton) - var(--wp--preset--spacing--m));
}

.lcs-hero-carte .wp-block-button {
	flex: 0 0 auto;
	inline-size: 100%;
}

.lcs-hero-carte .wp-block-button__link {
	display: block;
	text-align: center;
	white-space: nowrap;
}

/*
 * Apparition du hero : opacite et translation de faible amplitude, en cascade,
 * conformement a la section 3.7 du CDC. Rien au defilement. Declaree dans une
 * requete no-preference : sans prise en charge, tout reste simplement visible.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes lcs-apparition {
		from {
			opacity: 0;
			transform: translateY(18px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	.lcs-hero-texte > *,
	.lcs-hero-carte.lcs-hero-carte {
		animation: lcs-apparition 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.lcs-hero-texte > *:nth-child(1) {
		animation-delay: 60ms;
	}

	.lcs-hero-texte > *:nth-child(2) {
		animation-delay: 170ms;
	}

	.lcs-hero-texte > *:nth-child(3) {
		animation-delay: 280ms;
	}

	.lcs-hero-texte > *:nth-child(4) {
		animation-delay: 390ms;
	}

	.lcs-hero-texte > *:nth-child(5) {
		animation-delay: 500ms;
	}

	.lcs-hero-carte.lcs-hero-carte {
		animation-delay: 610ms;
	}

	@keyframes lcs-trait {
		from {
			transform: scaleX(0);
		}

		to {
			transform: scaleX(1);
		}
	}

	.lcs-preuves__liste > li {
		animation: lcs-apparition 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.lcs-preuves__liste > li:nth-child(1) {
		animation-delay: 720ms;
	}

	.lcs-preuves__liste > li:nth-child(2) {
		animation-delay: 830ms;
	}

	.lcs-preuves__liste > li:nth-child(3) {
		animation-delay: 940ms;
	}

	.lcs-preuves__liste > li:nth-child(4) {
		animation-delay: 1050ms;
	}

	.lcs-preuves__cle::after {
		animation: lcs-trait 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.lcs-preuves__liste > li:nth-child(1) .lcs-preuves__cle::after {
		animation-delay: 900ms;
	}

	.lcs-preuves__liste > li:nth-child(2) .lcs-preuves__cle::after {
		animation-delay: 1010ms;
	}

	.lcs-preuves__liste > li:nth-child(3) .lcs-preuves__cle::after {
		animation-delay: 1120ms;
	}

	.lcs-preuves__liste > li:nth-child(4) .lcs-preuves__cle::after {
		animation-delay: 1230ms;
	}
}

/* ------------------------------------------------------------- Barre de preuves */

.lcs-preuves__liste {
	list-style: none;
	padding-inline: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: var(--wp--preset--spacing--l);
}

/* Filets verticaux entre les chiffres : une bande de donnees, pas des cartes. */
.lcs-preuves__liste > li {
	padding-inline-start: var(--wp--preset--spacing--l);
	border-inline-start: 1px solid var(--wp--preset--color--bordure);
}

.lcs-preuves__liste > li:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

/* Deux par deux en tablette : sinon la quatrieme preuve tombe seule. */
@media (min-width: 720px) and (max-width: 1079.98px) {
	.lcs-preuves__liste {
		grid-template-columns: repeat(2, 1fr);
	}

	.lcs-preuves__liste > li:nth-child(odd) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}

/*
 * Les quatre preuves sur UNE seule ligne sur ordinateur, exige par le client
 * le 9 aout : la piste est declaree en dur plutot que laissee a auto-fit, qui
 * depend de la largeur disponible et avait deja rendu trois colonnes.
 */
@media (min-width: 1080px) {
	.lcs-preuves__liste {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 719.98px) {
	.lcs-preuves__liste > li {
		padding-inline-start: 0;
		border-inline-start: 0;
		padding-block-start: var(--wp--preset--spacing--s);
		border-block-start: 1px solid var(--wp--preset--color--bordure);
	}

	.lcs-preuves__liste > li:first-child {
		padding-block-start: 0;
		border-block-start: 0;
	}
}

.lcs-preuves__cle {
	display: block;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--geant);
	line-height: 1;
	color: var(--wp--preset--color--primaire-sombre);
	font-variant-numeric: tabular-nums;
}

.lcs-preuves__cle::after {
	content: "";
	display: block;
	inline-size: 40px;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	transform-origin: left center;
	margin-block: var(--wp--preset--spacing--xs);
}

.lcs-preuves__valeur {
	display: block;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
	max-inline-size: 26ch;
}

/* ------------------------------------------------------------------ En bref */

.lcs-en-bref.lcs-en-bref {
	box-sizing: border-box;
	border-block-start: 4px solid var(--wp--preset--color--accent);
	border-block-end: 1px solid var(--wp--preset--color--bordure);
}

.lcs-en-bref h2 {
	font-size: var(--wp--preset--font-size--grand);
	margin-block-start: 0;
}

.lcs-en-bref ul {
	margin-block-end: 0;
}

/* -------------------------------------------------------------- Cartes liées */

.lcs-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--wp--preset--spacing--l);
}

.lcs-cartes .lcs-carte {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	margin-block: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 5px;
	overflow: hidden;
	transition: border-color 200ms ease;
}

.lcs-carte__image {
	margin: 0;
	overflow: hidden;
}

.lcs-carte__image img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	block-size: auto;
	transition: transform 320ms ease;
}

.lcs-carte__numero {
	margin: var(--wp--preset--spacing--m) var(--wp--preset--spacing--m) 0;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--primaire);
	font-variant-numeric: tabular-nums;
}

.lcs-carte h3 {
	margin: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m) 0;
	font-size: var(--wp--preset--font-size--grand);
	color: var(--wp--preset--color--contraste);
}

/*
 * La marge basse ouvre l air avant le filet du lien : 24 px avant le filet et
 * 24 px apres font les 48 px exiges entre le texte et l appel a l action, avec
 * un filet qui respire des deux cotes au lieu de coller au texte.
 */
.lcs-carte > p:not(.lcs-carte__numero):not(.lcs-carte__lien) {
	margin: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m) var(--wp--preset--spacing--m);
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-carte__action {
	margin: auto var(--wp--preset--spacing--m) var(--wp--preset--spacing--m);
	padding-block-start: var(--wp--preset--spacing--m);
}

/*
 * Le coeur remet a zero la marge basse du dernier enfant d une disposition en
 * flux : :root :where(.is-layout-flow) > :last-child vaut (0,2,0) parce que
 * :root et :last-child comptent chacun pour une classe. Le bouton touchait donc
 * le bord bas de la carte, mesure a 0 px quand les cotes valaient 24 px. Trois
 * classes reprennent la main : le bouton respecte la meme marge de tous cotes.
 */
.lcs-cartes .lcs-carte .lcs-carte__action {
	margin-block-end: var(--wp--preset--spacing--m);
}

.lcs-carte__action .wp-block-button {
	inline-size: 100%;
}

.lcs-carte__action .wp-block-button__link {
	display: block;
	text-align: center;
	white-space: nowrap;
}

/* Un seul lien reel par carte : le bouton, etendu a toute la carte. */
.lcs-carte__action .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lcs-carte:hover,
.lcs-carte:focus-within {
	border-color: var(--wp--preset--color--primaire);
}

.lcs-carte:hover .lcs-carte__image img {
	transform: scale(1.04);
}

@media (hover: none) {
	.lcs-carte:hover .lcs-carte__image img {
		transform: none;
	}
}

/* ------------------------------------------------------ Rangees de silo */

/*
 * Mise en avant des prestations retenue par le client le 9 aout, en
 * remplacement des quatre cartes a colonnes egales : quatre rangees pleine
 * largeur, numero et filet magenta en tete, vignette carree en fin de rangee.
 * Le lien porte toute la surface de la rangee par un pseudo-element, ce qui
 * donne une cible tres au-dela des 44 px exiges sans multiplier les liens.
 */
.lcs-rangees {
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

.lcs-rangees .lcs-rangee {
	box-sizing: border-box;
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 96px;
	column-gap: var(--wp--preset--spacing--l);
	align-items: center;
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--m);
	padding-inline: var(--wp--preset--spacing--s);
	border-block-end: 1px solid var(--wp--preset--color--bordure);
	transition: background-color 200ms ease;
}

.lcs-rangee > * {
	margin-block: 0;
}

.lcs-rangee__numero {
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1;
	color: var(--wp--preset--color--primaire);
	font-variant-numeric: tabular-nums;
	align-self: start;
}

.lcs-rangee__numero::after {
	content: "";
	display: block;
	inline-size: 32px;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	margin-block-start: var(--wp--preset--spacing--xs);
}

.lcs-rangee__texte {
	display: grid;
	gap: var(--wp--preset--spacing--xs);
	min-inline-size: 0;
}

.lcs-rangee__texte > * {
	margin-block: 0;
}

.lcs-rangee h3 {
	font-size: var(--wp--preset--font-size--grand);
	color: var(--wp--preset--color--contraste);
}

.lcs-rangee__texte > p:not(.lcs-rangee__lien) {
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
	max-inline-size: 62ch;
}

.lcs-rangee__lien a,
.lcs-carte__lien a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 44px;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--wp--preset--color--primaire-sombre);
	text-decoration: none;
}

/* Toute la rangee devient cliquable, sans ajouter un second lien reel. */
.lcs-rangee__lien a::before,
.lcs-carte__lien a::before {
	content: "";
	position: absolute;
	inset: 0;
}

/* Fleche au trait en masque : aucun emoji, la couleur suit le texte. */
.lcs-rangee__lien a::after,
.lcs-carte__lien a::after {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 200ms ease;
}

.lcs-rangee__lien a:hover,
.lcs-rangee__lien a:focus-visible,
.lcs-carte__lien a:hover,
.lcs-carte__lien a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ------------------------------------------- Vitrines deux par deux */

/*
 * Mise en avant du silo finalement retenue par le client le 9 aout, apres
 * essai des rangees : deux cartes par rangee, photographie large. Sur le rail
 * de 1200 px la carte fait 584 px et l image 584 x 328 au lieu de 276 x 207.
 * Le bouton contour cede la place a un lien fleche pose sur un filet, dans la
 * marge interieure de la carte.
 */
.lcs-cartes.lcs-cartes--duo {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 719.98px) {
	.lcs-cartes.lcs-cartes--duo {
		grid-template-columns: minmax(0, 1fr);
	}
}

.lcs-cartes--duo .lcs-carte__image img {
	aspect-ratio: 16 / 9;
}

/*
 * Marge basse rendue au lien : le coeur remet a zero le dernier enfant d une
 * disposition en flux avec un selecteur a (0,2,0), trois classes le battent.
 */
/* Le lien fleche est un appel a l action : 24 px ici plus 24 px de marge basse
   du paragraphe font les 48 px exiges de part et d autre du filet. */
.lcs-cartes .lcs-carte .lcs-carte__lien {
	margin: auto var(--wp--preset--spacing--m) var(--wp--preset--spacing--m);
	padding-block-start: var(--wp--preset--spacing--m);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

.lcs-carte:hover .lcs-carte__lien a::after {
	transform: translateX(4px);
}

.lcs-rangee__image {
	margin: 0;
	overflow: hidden;
	border-radius: 5px;
}

.lcs-rangee__image img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	block-size: auto;
}

.lcs-rangee:hover,
.lcs-rangee:focus-within {
	background-color: var(--wp--preset--color--primaire-clair);
}

.lcs-rangee:hover .lcs-rangee__lien a::after {
	transform: translateX(4px);
}

/*
 * Entre 560 et 720 px la rangee ne tient plus sur trois colonnes : la vignette
 * passe a gauche sur deux rangs, le numero et le texte occupent la seconde.
 */
@media (min-width: 560px) and (max-width: 719.98px) {
	.lcs-rangees .lcs-rangee {
		grid-template-columns: 88px minmax(0, 1fr);
		grid-template-areas:
			"image numero"
			"image texte";
		column-gap: var(--wp--preset--spacing--m);
		align-items: start;
	}

	.lcs-rangee__image {
		grid-area: image;
	}

	.lcs-rangee__numero {
		grid-area: numero;
		font-size: var(--wp--preset--font-size--corps);
	}

	.lcs-rangee__texte {
		grid-area: texte;
		margin-block-start: var(--wp--preset--spacing--xs);
	}
}

/*
 * Sous 560 px, la vignette de 88 px ramenait la colonne de texte a 199 px sur
 * un ecran de 375 : mesure, et bien trop etroit pour un titre de trois mots.
 * Elle repasse en bandeau pleine largeur, le texte reprend les 343 px utiles.
 */
@media (max-width: 559.98px) {
	.lcs-rangees .lcs-rangee {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"image"
			"numero"
			"texte";
		row-gap: var(--wp--preset--spacing--s);
		align-items: start;
	}

	.lcs-rangee__image {
		grid-area: image;
	}

	.lcs-rangee__image img {
		aspect-ratio: 21 / 9;
	}

	.lcs-rangee__numero {
		grid-area: numero;
		font-size: var(--wp--preset--font-size--corps);
	}

	.lcs-rangee__texte {
		grid-area: texte;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lcs-rangees .lcs-rangee,
	.lcs-rangee__lien a::after {
		transition: none;
	}

	.lcs-rangee:hover .lcs-rangee__lien a::after {
		transform: none;
	}
}

/* Sections sombres : les jetons bleus foncés y tomberaient sous le seuil. */
.lcs-section--sombre ol.lcs-etapes > li {
	border-block-start-color: var(--wp--preset--color--primaire-clair);
}

.lcs-section--sombre ol.lcs-etapes > li::before {
	color: var(--wp--preset--color--primaire-clair);
}

@media (min-width: 1080px) {
	.lcs-cartes {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lcs-cartes .lcs-carte,
	.lcs-carte__image img {
		transition: none;
	}
}

/*
 * Le bloc media-text du coeur pose un retrait de 8 pour cent sur sa colonne
 * de texte : le titre sortirait de l axe de lecture. On le neutralise du cote
 * de l axe et on reporte la respiration de l autre cote.
 */
.wp-block-media-text.lcs-filet > .wp-block-media-text__content {
	padding-inline-start: 0;
	padding-inline-end: var(--wp--preset--spacing--l);
}

/* ------------------------------------------------------ Diaporama de cibles */

/*
 * Mise en scene retenue par le client le 9 aout, en remplacement des quatre
 * cartes : une seule scene photographique, quatre volets, quatre onglets.
 *
 * AUCUN script, conformement a la regle 7 du CDC qui exige qu un carrousel
 * fonctionne sans JavaScript : la bascule tient a :target et :has(). Sans
 * ancre active, c est le premier volet qui s affiche. Le contenu des quatre
 * volets est dans le HTML servi, donc lisible par les moteurs.
 *
 * Les ancres sont des reperes VIDES places en tete du diaporama, tous a la
 * meme ordonnee : le saut du navigateur est donc identique quel que soit
 * l onglet, et amene le haut du diaporama sous l en-tete collant.
 */
.lcs-diapo {
	position: relative;
}

.lcs-diapo__ancre {
	display: block;
	block-size: 0;
	scroll-margin-block-start: calc(var(--lcs-entete, 90px) + var(--wp--preset--spacing--l));
}

.lcs-diapo__onglets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--l);
	border-block-end: 1px solid var(--wp--preset--color--bordure);
}

.lcs-diapo__onglets a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--wp--preset--color--contraste-doux);
	text-decoration: none;
}

/*
 * Le filet de l onglet actif est un ::after, PAS une bordure. Mesure du
 * 9 aout : sur ces liens, aucune declaration de bordure ni de couleur posee
 * APRES la regle de base n aboutit, meme avec !important et une specificite
 * de (1,3,1) verifiee par element.matches, alors qu une simple outline-color
 * passe. Un fond de pseudo-element passe lui aussi : c est le motif deja
 * employe par tous les autres filets du theme. La graisse double le signal,
 * pour ne pas dependre de la seule couleur.
 */
.lcs-diapo__onglets a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	block-size: 0;
	background: var(--wp--preset--color--accent);
	transition: block-size 160ms ease;
}

.lcs-diapo__onglets a:hover::after,
.lcs-diapo__onglets a:focus-visible::after {
	block-size: 2px;
}

/*
 * Onglet actif : filet magenta en surface, jamais en texte, double par la
 * graisse pour ne pas dependre de la seule couleur.
 *
 * Les ancres sont des freres PRECEDENTS des onglets et de la scene : le
 * combinateur ~ suffit, sans :has() ni script. Trois temps : etat par defaut,
 * retrait du defaut des qu une autre ancre est visee, activation de la bonne.
 */
.lcs-diapo__onglets a:first-child {
	font-weight: 700;
}

.lcs-diapo__onglets a:first-child::after {
	block-size: 3px;
}

#cible-2:target ~ .lcs-diapo__onglets a:first-child,
#cible-3:target ~ .lcs-diapo__onglets a:first-child,
#cible-4:target ~ .lcs-diapo__onglets a:first-child {
	font-weight: 600;
}

#cible-2:target ~ .lcs-diapo__onglets a:first-child::after,
#cible-3:target ~ .lcs-diapo__onglets a:first-child::after,
#cible-4:target ~ .lcs-diapo__onglets a:first-child::after {
	block-size: 0;
}

#cible-1:target ~ .lcs-diapo__onglets a:nth-child(1),
#cible-2:target ~ .lcs-diapo__onglets a:nth-child(2),
#cible-3:target ~ .lcs-diapo__onglets a:nth-child(3),
#cible-4:target ~ .lcs-diapo__onglets a:nth-child(4) {
	font-weight: 700;
}

#cible-1:target ~ .lcs-diapo__onglets a:nth-child(1)::after,
#cible-2:target ~ .lcs-diapo__onglets a:nth-child(2)::after,
#cible-3:target ~ .lcs-diapo__onglets a:nth-child(3)::after,
#cible-4:target ~ .lcs-diapo__onglets a:nth-child(4)::after {
	block-size: 3px;
}

.lcs-diapo__scene {
	position: relative;
	margin-block: 0;
}

.lcs-diapo__volet {
	position: relative;
	display: none;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	min-block-size: 380px;
	margin-block: 0;
	padding: var(--wp--preset--spacing--xl);
	border-radius: 0 0 5px 5px;
	overflow: hidden;
}

/* Meme mecanisme de freres que pour les onglets, pour la meme raison. */
.lcs-diapo__scene > .lcs-diapo__volet:first-child {
	display: flex;
}

#cible-2:target ~ .lcs-diapo__scene > .lcs-diapo__volet:first-child,
#cible-3:target ~ .lcs-diapo__scene > .lcs-diapo__volet:first-child,
#cible-4:target ~ .lcs-diapo__scene > .lcs-diapo__volet:first-child {
	display: none;
}

#cible-1:target ~ .lcs-diapo__scene > .lcs-diapo__volet:nth-child(1),
#cible-2:target ~ .lcs-diapo__scene > .lcs-diapo__volet:nth-child(2),
#cible-3:target ~ .lcs-diapo__scene > .lcs-diapo__volet:nth-child(3),
#cible-4:target ~ .lcs-diapo__scene > .lcs-diapo__volet:nth-child(4) {
	display: flex;
}

/*
 * La photographie est un enfant ABSOLU : sans plan d empilement explicite,
 * un element positionne se peint au-dessus des elements en flux et couvrirait
 * le texte. Le fond est donc a 0, le voile et le numero a 1, le texte a 2.
 */
.lcs-diapo__fond {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.lcs-diapo__fond img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/*
 * Voile de 70 pour cent sur le jeton contraste, exactement le dispositif du
 * hero : au pire cas, sous une photographie blanche, le blanc y tient 5,52:1
 * et le bleu pale 4,82:1. Aucune autre couleur de texte n est admise ici.
 */
.lcs-diapo__volet::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--contraste);
	opacity: 0.7;
	z-index: 1;
}

/*
 * Numero en filigrane. Il est ecrit par le CSS et non par le contenu : un
 * compteur ne conviendrait pas, les volets masques ne s incrementent pas.
 */
.lcs-diapo__volet::after {
	position: absolute;
	inset-block-start: -0.16em;
	inset-inline-end: 0.08em;
	font-family: var(--wp--preset--font-family--titres);
	font-size: clamp(110px, 15vw, 210px);
	line-height: 1;
	color: var(--wp--preset--color--base);
	opacity: 0.12;
	z-index: 1;
	pointer-events: none;
}

.lcs-diapo__scene > .lcs-diapo__volet:nth-child(1)::after {
	content: "01";
}

.lcs-diapo__scene > .lcs-diapo__volet:nth-child(2)::after {
	content: "02";
}

.lcs-diapo__scene > .lcs-diapo__volet:nth-child(3)::after {
	content: "03";
}

.lcs-diapo__scene > .lcs-diapo__volet:nth-child(4)::after {
	content: "04";
}

.lcs-diapo__volet > :not(.lcs-diapo__fond) {
	position: relative;
	z-index: 2;
	margin-block: 0;
}

.lcs-diapo__volet h3 {
	font-size: var(--wp--preset--font-size--tres-grand);
	color: var(--wp--preset--color--base);
	max-inline-size: 24ch;
}

.lcs-diapo__volet h3::before {
	content: "";
	display: block;
	inline-size: 56px;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	margin-block-end: var(--wp--preset--spacing--m);
}

.lcs-diapo__volet > p {
	margin-block-start: var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--primaire-clair);
	max-inline-size: 62ch;
}

/*
 * Trois classes : la remise a zero des marges du volet vaut (0,2,0) et
 * ramenait l air a 0 px, mesure au rendu et signale par le client.
 */
.lcs-diapo__volet > .lcs-diapo__action.lcs-diapo__action {
	margin-block-start: var(--lcs-air-bouton);
}

/* Blanc plein sur la photographie voilee : le contraste le plus eleve. */
.lcs-diapo__action .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contraste);
}

@media (max-width: 719.98px) {
	.lcs-diapo__onglets {
		gap: var(--wp--preset--spacing--m);
	}

	.lcs-diapo__volet {
		padding: var(--wp--preset--spacing--l);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lcs-diapo__onglets a::after {
		transition: none;
	}
}

/* -------------------------------------------------------------------- Cibles */

/*
 * Quatre familles de batiments, quatre appels a l action. La carte porte un
 * seul lien reel, le bouton, etendu a toute sa surface par un pseudo-element :
 * la cible tactile vaut donc la carte entiere. Le survol est legitime ici,
 * contrairement aux supports, puisque la carte EST cliquable.
 */
.lcs-cibles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--l);
}

@media (max-width: 719.98px) {
	.lcs-cibles {
		grid-template-columns: minmax(0, 1fr);
	}
}

.lcs-cibles .lcs-cible {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	margin-block: 0;
	padding: var(--wp--preset--spacing--l);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 5px;
	transition: border-color 200ms ease;
}

.lcs-cible > * {
	margin-block: 0;
}

.lcs-cible__picto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	flex: none;
	inline-size: 52px;
	block-size: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--primaire-clair);
	color: var(--wp--preset--color--primaire-sombre);
}

.lcs-cible h3 {
	margin-block-start: var(--wp--preset--spacing--m);
	font-size: var(--wp--preset--font-size--grand);
	color: var(--wp--preset--color--contraste);
}

.lcs-cible > p {
	margin-block-start: var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

/* Le bouton est colle en bas de carte, quelle que soit la longueur du texte. */
.lcs-cible__action {
	margin-block: auto 0;
	padding-block-start: var(--wp--preset--spacing--l);
}

.lcs-cible__action .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lcs-cible:hover,
.lcs-cible:focus-within {
	border-color: var(--wp--preset--color--primaire);
}

@media (prefers-reduced-motion: reduce) {
	.lcs-cibles .lcs-cible {
		transition: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lcs-cibles .lcs-cible {
			animation: lcs-apparition linear both;
			animation-timeline: view();
			animation-range: entry 12% cover 34%;
		}
	}
}

/* ------------------------------------------------------------------ Supports */

/*
 * Cinq supports en rangees alternees : la photographie change de cote d une
 * rangee a l autre. La colonne d image est capee a 374 px, largeur NATIVE de
 * la plus petite des cinq photographies - toile de verre et bois ne mesurent
 * que 374 x 240 - pour n en agrandir aucune. La colonne de texte tombe alors
 * a 762 px, soit la mesure de lecture du reste de la page.
 */
.lcs-supports {
	display: grid;
	gap: var(--wp--preset--spacing--xl);
}

.lcs-supports .lcs-support {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 374px) minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--xxl);
	align-items: start;
	min-inline-size: 0;
	margin-block: 0;
	padding-block-end: var(--wp--preset--spacing--xl);
	border-block-end: 1px solid var(--wp--preset--color--bordure);
}

.lcs-supports .lcs-support:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

/*
 * Une rangee sur deux presente sa photographie a droite. Il faut inverser les
 * PISTES en meme temps que l ordre : mesure, un simple order deplace l element
 * sans deplacer la colonne, si bien que l image occupait les 762 px du texte
 * et le texte les 374 px de l image.
 */
.lcs-supports .lcs-support:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 374px);
}

.lcs-supports .lcs-support:nth-child(even) > .lcs-support__image {
	order: 2;
}

.lcs-support__image {
	margin: 0;
	overflow: hidden;
	border-radius: 5px;
}

.lcs-support__image img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	block-size: auto;
}

.lcs-support__texte {
	display: grid;
	gap: var(--wp--preset--spacing--xs);
	min-inline-size: 0;
}

.lcs-support__texte > * {
	margin-block: 0;
}

.lcs-support__numero {
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1;
	color: var(--wp--preset--color--primaire);
	font-variant-numeric: tabular-nums;
}

.lcs-support__numero::after {
	content: "";
	display: block;
	inline-size: 32px;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	transform-origin: left center;
	margin-block-start: var(--wp--preset--spacing--xs);
}

.lcs-support h3 {
	font-size: var(--wp--preset--font-size--grand);
	color: var(--wp--preset--color--contraste);
	margin-block: 0;
}

.lcs-support__texte > p:not(.lcs-support__numero) {
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
	max-inline-size: 68ch;
}

/*
 * Le seuil d empilement est a 1024 px, pas a 720 : mesure a 768, la colonne
 * d image de 374 px ne laissait que 283 px au texte, aussi etroit que le
 * defaut deja corrige sur les rangees. A 1024 le texte retrouve 554 px.
 *
 * Une fois empilee, la photographie reste capee a sa largeur native de 374 px :
 * pleine largeur, elle serait agrandie jusqu a 1,9 fois sur deux des cinq.
 */
@media (max-width: 1023.98px) {
	.lcs-supports .lcs-support,
	.lcs-supports .lcs-support:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--m);
	}

	.lcs-supports .lcs-support:nth-child(even) > .lcs-support__image {
		order: 0;
	}

	.lcs-support__image {
		max-inline-size: 374px;
	}
}

/*
 * Apparition des rangees, conforme au CDC 3.7 : une transition d opacite et
 * une translation de faible amplitude a l apparition, rien de plus. AUCUN
 * script : la chronologie de vue du CSS suffit, donc aucune commande morte et
 * aucun etat cache pour les navigateurs qui ne la prennent pas en charge - ils
 * affichent tout, immediatement. prefers-reduced-motion neutralise l ensemble.
 *
 * L amplitude est de 18 px en translation et de 5 pour cent en echelle sur la
 * photographie, qui n est donc jamais invisible.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes lcs-echelle {
		from {
			transform: scale(1.05);
		}

		to {
			transform: none;
		}
	}

	@supports (animation-timeline: view()) {
		.lcs-supports .lcs-support {
			animation: lcs-apparition linear both;
			animation-timeline: view();
			animation-range: entry 12% cover 32%;
		}

		.lcs-support__numero::after {
			animation: lcs-trait linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 42%;
		}

		.lcs-support__image img {
			animation: lcs-echelle linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 45%;
		}
	}
}

/* -------------------------------------------------------------------- Étapes */

ol.lcs-etapes {
	list-style: none;
	padding-inline: 0;
	counter-reset: lcs-etape;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--wp--preset--spacing--l);
}

ol.lcs-etapes > li {
	counter-increment: lcs-etape;
	border-block-start: 2px solid var(--wp--preset--color--contraste);
	padding-block-start: var(--wp--preset--spacing--s);
	margin-block: 0;
}

/*
 * Le nombre de colonnes est DECLARE par une classe modificatrice, jamais
 * laisse a auto-fit : mesure du 11 aout au palier 768, une liste de trois
 * etapes tombait en 2 + 1 et laissait 344 px de blanc a droite du dernier
 * element. Piege 77, quatrieme occurrence. Ces regles ont la meme specificite
 * que la regle de base, elles doivent donc rester APRES elle.
 */
ol.lcs-etapes--3,
ol.lcs-etapes--4 {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
	ol.lcs-etapes--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	ol.lcs-etapes--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	ol.lcs-etapes--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

ol.lcs-etapes > li::before {
	content: counter(lcs-etape, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1;
	color: var(--wp--preset--color--primaire);
	font-variant-numeric: tabular-nums;
	margin-block-end: var(--wp--preset--spacing--xs);
}

/* ------------------------------------------------------------------- Frise */

/*
 * Frise du deroulement d un chantier, en remplacement des quatre etapes du
 * 9 aout : six etapes, chacune ouverte par une pastille numerotee posee sur un
 * filet vertical continu. Le numero est ecrit par un compteur CSS, il se
 * renumerote donc tout seul si le client ajoute ou retire une etape.
 *
 * Au-dela de 1080 px le titre passe a gauche et les points a droite, ce qui
 * divise la hauteur de la section par deux.
 */
/*
 * L air au-dessus de la frise est pose ICI et non par un attribut de bloc : la
 * marge declaree dans les attributs du groupe n avait pas ete reportee sur le
 * div, le chapo collait donc a la premiere etape. Mesure signalee par le
 * client. 64 px, soit le pas le plus large des jetons.
 */
.lcs-frise {
	display: grid;
	gap: 0;
	counter-reset: lcs-etape-frise;
	margin-block: var(--wp--preset--spacing--xxl) 0;
}

.lcs-frise .lcs-frise__etape {
	position: relative;
	box-sizing: border-box;
	counter-increment: lcs-etape-frise;
	margin-block: 0;
	padding-inline-start: 76px;
	padding-block-end: var(--wp--preset--spacing--xl);
}

.lcs-frise .lcs-frise__etape:last-child {
	padding-block-end: 0;
}

/*
 * Le filet relie une pastille a la suivante. Il part sous la pastille et
 * s arrete au bas de l etape ; la derniere n en porte pas.
 */
.lcs-frise__etape::before {
	content: "";
	position: absolute;
	inset-block: 44px 0;
	inset-inline-start: 21px;
	inline-size: 2px;
	background: var(--wp--preset--color--bordure);
}

.lcs-frise .lcs-frise__etape:last-child::before {
	display: none;
}

/* Pastille numerotee, en bleu pale : sur l ardoise elle tient 12,66:1. */
.lcs-frise__etape::after {
	content: counter(lcs-etape-frise, decimal-leading-zero);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--primaire-clair);
	color: var(--wp--preset--color--contraste);
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--petit);
	font-variant-numeric: tabular-nums;
}

.lcs-frise__etape > * {
	margin-block: 0;
}

.lcs-frise h3 {
	display: flex;
	align-items: center;
	min-block-size: 44px;
	font-size: var(--wp--preset--font-size--grand);
	color: var(--wp--preset--color--base);
}

.lcs-frise__points {
	list-style: none;
	padding-inline: 0;
	margin: var(--wp--preset--spacing--s) 0 0;
	display: grid;
	gap: var(--wp--preset--spacing--s);
}

.lcs-frise__points > li {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--primaire-clair);
	max-inline-size: 68ch;
}

.lcs-frise__points strong {
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

@media (min-width: 1080px) {
	.lcs-frise .lcs-frise__etape {
		display: grid;
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--xl);
		align-items: start;
	}

	.lcs-frise__points {
		margin-block-start: 0;
	}
}

/* Le bouton reprend le traitement des surfaces sombres : blanc sur ardoise. */
.lcs-frise__action .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contraste);
}

/*
 * Apparition de la frise, meme dispositif que la section des supports :
 * chronologie de vue du CSS, aucun script, double garde. L etape monte de
 * 18 px en apparaissant, le filet se DESSINE du haut vers le bas et la
 * pastille prend sa taille. Rien n est jamais invisible en repli.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes lcs-filet-descend {
		from {
			transform: scaleY(0);
		}

		to {
			transform: scaleY(1);
		}
	}

	@keyframes lcs-pastille-parait {
		from {
			transform: scale(0.72);
			opacity: 0.35;
		}

		to {
			transform: none;
			opacity: 1;
		}
	}

	@supports (animation-timeline: view()) {
		.lcs-frise .lcs-frise__etape {
			animation: lcs-apparition linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 28%;
		}

		.lcs-frise__etape::before {
			transform-origin: top center;
			animation: lcs-filet-descend linear both;
			animation-timeline: view();
			animation-range: entry 18% cover 55%;
		}

		.lcs-frise__etape::after {
			animation: lcs-pastille-parait linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 30%;
		}
	}
}

/* --------------------------------------------------------------- Bande sombre */

.lcs-bande-sombre.lcs-bande-sombre {
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--base);
}

.lcs-bande-sombre h2 {
	color: var(--wp--preset--color--base);
}

.lcs-bande-sombre .lcs-filet > h2::before,
.lcs-bande-sombre > h2::before {
	background: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------- Actions du hero et CTA */

.lcs-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--m);
}

/*
 * Ici l air des 48 px est deja porte par la marge haute du groupe .lcs-actions
 * lui-meme : la rendre au bloc de boutons decalerait le bouton par rapport au
 * telephone, qui est aligne sur le meme axe.
 */
.lcs-actions .wp-block-buttons.wp-block-buttons {
	margin-block-start: 0;
}

.lcs-actions .lcs-coordonnees {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s);
}

.lcs-actions .lcs-coordonnees__telephone {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 600;
}

/* ------------------------------------------- Bande d appel a l action, deux colonnes */

/*
 * Parti retenu par le client le 10 aout : le discours a gauche, un encart
 * clair a droite qui isole le telephone et le bouton. Meme motif que la page
 * de contact, deja validee.
 */
.lcs-cta__duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--xl);
	align-items: center;
}

@media (min-width: 1080px) {
	.lcs-cta__duo {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

.lcs-cta__duo.lcs-cta__duo > * {
	margin-block: 0;
	min-inline-size: 0;
}

.lcs-cta__texte > * {
	margin-block: 0;
}

.lcs-cta__texte > * + * {
	margin-block-start: var(--wp--preset--spacing--m);
}

/*
 * La bande porte desormais le bleu pale : le fond du pied etant l ardoise, une
 * bande ardoise faisait deux fonds identiques a la suite, defaut signale par
 * le client le 11 aout. L encart reste blanc, mais sur bleu pale l ecart de
 * clarte ne suffit plus a le detourer : un filet fin s en charge, conforme a
 * la DA qui proscrit les ombres.
 */
.lcs-cta__encart {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--l);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 5px;
}

.lcs-cta__encart > * {
	margin-block: 0;
}

.lcs-cta__intitule {
	color: var(--wp--preset--color--contraste-doux);
}

/*
 * L encart est BLANC mais vit dans la section sombre : la regle du theme
 * peindrait ses liens en bleu pale, soit 1,15 sur 1 sur du blanc. La classe
 * est doublee pour reprendre la main sans important, et le lien du bouton est
 * exclu, sa couleur venant de sa propre surface.
 */
.lcs-cta__encart.lcs-cta__encart a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--primaire-sombre);
}

.lcs-cta__encart .lcs-coordonnees {
	margin-block-start: 2px;
}

.lcs-cta__encart .lcs-coordonnees__telephone {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-size: var(--wp--preset--font-size--grand);
	font-weight: 600;
	text-decoration: none;
}

/*
 * Conteneur d actions : la regle generale des 48 px est ramenee a 24 px ICI,
 * le texte qui justifie le bouton vivant dans la colonne d a cote et non
 * au-dessus. L air de 48 px est porte par la gouttiere du duo, qui devient
 * verticale des que les deux colonnes s empilent. Piege 38, cas 3.
 */
main .entry-content .lcs-cta__encart .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--m);
}

.lcs-cta__encart .wp-block-button,
.lcs-cta__encart .wp-block-button__link {
	inline-size: 100%;
	text-align: center;
}

/* --------------------------------------------------------- Liste des communes */

/*
 * Etiquettes de communes. Elles EPOUSENT leur texte : une grille a colonnes
 * fixes de 180 px coupait « Saint-Pierre-en-Auge » sur deux lignes et etirait
 * toute sa rangee avec lui, 76 px contre 47 px pour la rangee du dessus.
 * Mesure du 10 aout, signalee par le client.
 *
 * Deux feuilles dessinaient ce composant et se battaient : celle du bloc et
 * celle-ci. Une seule commande desormais, blocs/carte-zone/style.css ne porte
 * plus que le renvoi.
 *
 * Rayon de 5 px, le seul rayon de boite du projet.
 */
.lcs-carte-zone__liste {
	list-style: none;
	padding-inline: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
}

.lcs-carte-zone__liste > li {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	margin: 0;
	padding: 0.4rem 1rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 5px;
	color: var(--wp--preset--color--contraste);
}

/* ------------------------------------------------------------------ Mouvement */

.lcs-carte h3 a,
.wp-element-button {
	transition: color 160ms ease, background-color 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.lcs-carte h3 a,
	.wp-element-button {
		transition: none;
	}
}

/* ------------------------------------------- Page de contact, deux colonnes */

/*
 * Demande du client du 9 aout : le formulaire d un cote, la colonne « Nous
 * joindre directement » de l autre. L ordre du DOM est celui du rendu a tous
 * les paliers : sous 1080 px les deux blocs s empilent dans le meme ordre, si
 * bien que le parcours au clavier suit toujours l ordre visuel.
 */
.lcs-contact-duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--xl);
	align-items: start;
}

@media (min-width: 1080px) {
	.lcs-contact-duo {
		grid-template-columns: minmax(0, 1fr) 380px;
	}
}

/*
 * Le coeur pose 24 px de blockGap entre les enfants d une disposition en flux :
 * dans une grille, cette marge s AJOUTE a la gouttiere. La classe est doublee
 * pour battre la regle du coeur a specificite egale, sans important.
 */
.lcs-contact-duo.lcs-contact-duo > * {
	margin-block: 0;
	min-inline-size: 0;
}

main .entry-content .lcs-contact-duo {
	margin-block-start: var(--wp--preset--spacing--xl);
}

/* ------------------------------------------- Panneau « Nous joindre » */

.lcs-joindre {
	box-sizing: border-box;
	display: grid;
	gap: var(--wp--preset--spacing--m);
	align-content: start;
	padding: var(--wp--preset--spacing--l);
	background: var(--wp--preset--color--primaire-clair);
	border-radius: 5px;
}

.lcs-joindre.lcs-joindre > * {
	margin-block: 0;
}

.lcs-joindre h2 {
	font-size: var(--wp--preset--font-size--grand);
	color: var(--wp--preset--color--contraste);
}

.lcs-joindre p {
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

/* --------------------------------- Coordonnees en panneau a pictogrammes */

/*
 * Presentation « panneau » du bloc lcs/coordonnees : une ligne par coordonnee,
 * pastille a gauche, intitule au-dessus de la valeur. Employee par la colonne
 * « Nous joindre directement » de la page de contact.
 *
 * Les regles vivent ici et non dans blocs/coordonnees/style.css : la feuille du
 * bloc est INLINE dans chaque page (le pied rend trois blocs coordonnees sur
 * les 43 pages), quand composants.css est un fichier externe mis en cache.
 * La classe est doublee pour rester independante de l ordre des feuilles.
 *
 * Le pictogramme est un span reel et non un pseudo-element du <li> : la
 * pastille et l icone demandent deux boites, et un seul ::before ne peut pas
 * porter a la fois un fond de couleur et un masque, qui decouperait le fond.
 */
.lcs-coordonnees.lcs-coordonnees--panneau {
	display: block;
}

.lcs-coordonnees--panneau .lcs-coordonnees__liste {
	list-style: none;
	/* Une liste garde le padding-inline du navigateur : 40 px avales en silence. */
	margin: 0;
	padding-inline: 0;
	display: grid;
	gap: var(--wp--preset--spacing--m);
}

.lcs-coordonnees__item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 0.9rem;
	align-items: center;
	margin: 0;
}

.lcs-coordonnees__picto {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 999px;
	background: var(--wp--preset--color--primaire);
}

.lcs-coordonnees__picto::before {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	background: var(--wp--preset--color--base);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.lcs-coordonnees__item--telephone .lcs-coordonnees__picto::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5L17 13l4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4 5.2 2 2 0 0 1 6 3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5L17 13l4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4 5.2 2 2 0 0 1 6 3z'/%3E%3C/svg%3E");
}

.lcs-coordonnees__item--adresse .lcs-coordonnees__picto::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}

.lcs-coordonnees__item--courriel .lcs-coordonnees__picto::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m3.6 7.2 8.4 5.9 8.4-5.9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m3.6 7.2 8.4 5.9 8.4-5.9'/%3E%3C/svg%3E");
}

.lcs-coordonnees__corps {
	display: grid;
	min-inline-size: 0;
}

.lcs-coordonnees__intitule {
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--wp--preset--color--contraste-doux);
}

/*
 * La cible des liens est portee a 44 px : mesure de recette du projet. Elle est
 * limitee au contenu pour que la zone cliquable ne coure pas sur toute la
 * largeur du panneau.
 */
.lcs-coordonnees--panneau .lcs-coordonnees__telephone,
.lcs-coordonnees--panneau .lcs-coordonnees__courriel {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	inline-size: fit-content;
	max-inline-size: 100%;
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--primaire-sombre);
	text-decoration: none;
}

.lcs-coordonnees--panneau .lcs-coordonnees__telephone {
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 600;
}

.lcs-coordonnees--panneau .lcs-coordonnees__telephone:hover,
.lcs-coordonnees--panneau .lcs-coordonnees__telephone:focus-visible,
.lcs-coordonnees--panneau .lcs-coordonnees__courriel:hover,
.lcs-coordonnees--panneau .lcs-coordonnees__courriel:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lcs-coordonnees--panneau .lcs-coordonnees__adresse {
	display: block;
	padding-block-start: 2px;
	color: var(--wp--preset--color--contraste);
}

/* ----------------------------------------- Formulaire de demande de devis */

/*
 * Trois groupes visibles d un seul tenant, pas un assistant a etapes : aucun
 * etat n est memorise, rien ne depend d un script. Le fieldset du navigateur
 * porte une bordure et un padding qu on remet a zero, sinon la grille interne
 * ne tombe pas sur l axe des autres blocs.
 */
.lcs-devis__groupe {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.lcs-devis__groupe + .lcs-devis__groupe {
	margin-block-start: var(--wp--preset--spacing--xl);
	padding-block-start: var(--wp--preset--spacing--l);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

/*
 * Le rang du groupe est une pastille numerotee, ecrite dans le balisage et
 * non par un compteur : le formulaire est aussi rendu dans une fenetre, ou
 * un compteur global se remettrait a zero.
 */
.lcs-devis__legende {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0;
	margin-block-end: var(--wp--preset--spacing--m);
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--grand);
	color: var(--wp--preset--color--contraste);
}

.lcs-devis__rang {
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	flex: none;
	border-radius: 999px;
	background: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
}

.lcs-devis__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--m);
}

@media (max-width: 719.98px) {
	.lcs-devis__grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

.lcs-devis__champ {
	display: grid;
	gap: 6px;
	margin-block: 0;
	min-inline-size: 0;
	box-sizing: border-box;
	padding: 0;
	border: 0;
}

.lcs-devis__champ--large {
	grid-column: 1 / -1;
}

.lcs-devis__champ > label,
.lcs-devis__cases > legend {
	padding: 0;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--wp--preset--color--contraste);
}

.lcs-devis__requis {
	color: var(--wp--preset--color--accent-sombre);
}

.lcs-devis__aide {
	display: block;
	margin-block-start: 4px;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-devis__champ input,
.lcs-devis__champ select,
.lcs-devis__champ textarea {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 44px;
	padding: 0.6rem 0.8rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--corps);
	color: var(--wp--preset--color--contraste);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 5px;
}

.lcs-devis__champ textarea {
	min-block-size: 140px;
	resize: vertical;
}

.lcs-devis__champ input:focus-visible,
.lcs-devis__champ select:focus-visible,
.lcs-devis__champ textarea:focus-visible,
.lcs-devis__case input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primaire);
	outline-offset: 2px;
}

/*
 * Groupes de cases. La case native fait 24 px et ne se redimensionne pas : la
 * cible de 44 px est portee par l etiquette associee, verifiee au rendu.
 */
.lcs-devis__cases-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 2px var(--wp--preset--spacing--m);
	margin-block-start: 6px;
}

/*
 * Bascule des variantes de cases a cocher, SANS script. La selection d une
 * option se lit en CSS par :checked sur l OPTION, et :has() la remonte au
 * conteneur de la grille des champs.
 *
 * La valeur qui declenche est celle de la table des champs de
 * inc/formulaire-devis.php, cle declencheurs. CSS et PHP ne peuvent pas
 * partager la meme source : un controle de recette compare les deux.
 *
 * Le serveur reste l autorite. Une case masquee reste soumise si elle avait
 * ete cochee avant la bascule : la validation ne retient que les valeurs de la
 * variante correspondant au type de bien reellement soumis.
 */
.lcs-devis__variante--pro.lcs-devis__variante--pro {
	display: none;
}

.lcs-devis__grille:has(select[name="lcs_devis_bien"] option[value="Local professionnel"]:checked) .lcs-devis__variante--defaut {
	display: none;
}

.lcs-devis__grille:has(select[name="lcs_devis_bien"] option[value="Local professionnel"]:checked) .lcs-devis__variante--pro {
	display: grid;
}

.lcs-devis__case {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 0.6rem;
	align-items: center;
	min-inline-size: 0;
}

.lcs-devis__case input {
	inline-size: 24px;
	block-size: 24px;
	margin: 0;
	accent-color: var(--wp--preset--color--primaire);
}

.lcs-devis__case label {
	display: flex;
	align-items: center;
	min-block-size: 44px;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste);
	cursor: pointer;
}

/* Le champ appat est retire de l affichage sans l etre de la soumission. */
.lcs-devis__appat {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.lcs-devis__appat input {
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	border: 0;
}

.lcs-devis__optin {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 0.7rem;
	align-items: start;
	margin-block: var(--wp--preset--spacing--l) 0;
}

.lcs-devis__optin input {
	inline-size: 24px;
	block-size: 24px;
	margin: 10px 0 0;
	accent-color: var(--wp--preset--color--primaire);
}

.lcs-devis__optin label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem;
	min-block-size: 44px;
	max-inline-size: 72ch;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

/* Un lien place dans le label n herite pas de sa hauteur : cible a 24 px. */
.lcs-devis__optin label a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--wp--preset--color--primaire-sombre);
}

.lcs-devis__mention {
	margin-block: var(--wp--preset--spacing--s) 0;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

/* Les 48 px d air avant l appel a l action, exiges par le CDC 3.6. */
.lcs-devis__envoi {
	margin-block: var(--lcs-air-bouton) 0;
}

.lcs-devis__envoi button {
	min-block-size: 44px;
	cursor: pointer;
}

.lcs-devis__etat {
	box-sizing: border-box;
	margin-block: 0 var(--wp--preset--spacing--l);
	padding: var(--wp--preset--spacing--m);
	border-inline-start: 4px solid var(--wp--preset--color--primaire);
	background: var(--wp--preset--color--primaire-clair);
	color: var(--wp--preset--color--contraste);
	font-size: var(--wp--preset--font-size--petit);
}

.lcs-devis__etat--erreur {
	border-inline-start-color: var(--wp--preset--color--accent-sombre);
	background: var(--wp--preset--color--base-alt);
}

/* ------------------------------------------- Fenetre de demande de devis */

/*
 * Element dialog natif : il apporte le piege de focus, la fermeture par Echap
 * et le fond assombri, sans une ligne de script de plus.
 *
 * La disposition n est declaree QUE sur [open] : un display pose sans garde
 * battrait le display:none que le navigateur applique a une fenetre fermee,
 * et le formulaire s afficherait en permanence au bas de chaque page.
 */
.lcs-fenetre {
	box-sizing: border-box;
	inline-size: min(760px, 100% - 32px);
	max-inline-size: none;
	max-block-size: 85svh;
	/*
	 * La feuille du navigateur pose overflow: auto sur TOUT dialog : sans cette
	 * declaration la fenetre est elle-meme un conteneur de defilement, et le
	 * visiteur voit DEUX ascenseurs cote a cote, celui de la fenetre et celui
	 * de son corps. Mesure du 9 aout, signalee par le client : barre de 17 px
	 * sur la fenetre, ramenee a 2 px, ses seules bordures.
	 */
	overflow: hidden;
	padding: 0;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 5px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contraste);
}

.lcs-fenetre[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
}

/*
 * Le pseudo-element backdrop n herite pas des variables du document : la
 * valeur du jeton voile y est ecrite en clair, faute de pouvoir la lire.
 */
.lcs-fenetre::backdrop {
	background: rgba(31, 42, 51, 0.55);
}

/*
 * La page derriere ne defile pas tant que la fenetre est ouverte. La regle est
 * DECLARATIVE et non posee par le script : mesure du 9 aout, l evenement close
 * n est pas toujours dispatche, et un nettoyage confie a un evenement peut
 * rester en plan, laissant la page impossible a faire defiler. Ici, des que
 * l attribut open tombe, la regle cesse d elle-meme de s appliquer.
 *
 * A ne pas confondre avec la regle 5 du projet, qui proscrit un overflow-x
 * hidden PERMANENT sur le corps : celui-la annulerait les elements collants.
 */
html:has(dialog.lcs-fenetre[open]) {
	overflow: hidden;
}

.lcs-fenetre__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--m);
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l);
	border-block-end: 1px solid var(--wp--preset--color--bordure);
}

.lcs-fenetre__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--grand);
	font-weight: 600;
	color: var(--wp--preset--color--contraste);
}

.lcs-fenetre__fermer {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contraste-doux);
	cursor: pointer;
}

.lcs-fenetre__fermer:hover,
.lcs-fenetre__fermer:focus-visible {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--contraste);
}

.lcs-fenetre__fermer:focus-visible {
	outline: 2px solid var(--wp--preset--color--primaire);
	outline-offset: 2px;
}

.lcs-fenetre__corps {
	/*
	 * min-block-size: 0 est indispensable : en grille, un element garde une
	 * hauteur minimale automatique et deborde sa piste. Le minmax(0, 1fr) de
	 * la grille contraint la PISTE, pas l element qui s y trouve.
	 */
	min-block-size: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--wp--preset--spacing--l);
}

@media (max-width: 719.98px) {
	.lcs-fenetre__barre,
	.lcs-fenetre__corps {
		padding-inline: var(--wp--preset--spacing--m);
	}
}

/* -------------------------------------------------------- Page introuvable */

/*
 * Les gabarits sans post-content n ont pas de .entry-content : la regle qui
 * annule le blockGap entre sections ne les atteint pas et une bande blanche de
 * 24 px reapparait entre chaque fond. Meme parade, un cran plus haut.
 */
main > .lcs-section {
	margin-block-start: 0;
}

/*
 * Nuancier dont une teinte manque. Le motif appartient au metier : c est une
 * carte de teintes, pas une illustration. Aucune ombre, aucun degrade, un
 * filet fin, et les huit bandes viennent toutes des jetons.
 */
.lcs-nuancier {
	/* Sans border-box, le filet de 1 px s ajoute au rail : mesure 1202 px pour
	   1200, soit un axe casse de 1 px de chaque cote. Piege 2 du projet. */
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	block-size: clamp(120px, 16vw, 200px);
	margin-block-start: var(--wp--preset--spacing--xl);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 5px;
	overflow: hidden;
}

.lcs-nuancier__teinte {
	background: var(--lcs-teinte);
}

.lcs-nuancier__trou {
	position: relative;
	background: var(--wp--preset--color--base);
}

.lcs-nuancier__trou::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px dashed var(--wp--preset--color--bordure);
	border-radius: 5px;
}

.lcs-404__legende {
	margin-block-start: var(--wp--preset--spacing--m);
	color: var(--wp--preset--color--contraste-doux);
}

/* Les 48 px d air avant l appel a l action, exiges par le CDC 3.6. */
main .lcs-404__actions {
	margin-block-start: var(--lcs-air-bouton);
}

/* ------------------------------------------------ Liste des destinations */

/*
 * Neuf destinations : trois colonnes de trois au-dela du rail, une seule
 * colonne en dessous. Un repeat(auto-fit) donnait quatre colonnes et laissait
 * un lien orphelin sur la derniere ligne, mesure du 10 aout. Quand un nombre
 * de colonnes est une EXIGENCE, on le declare en dur.
 */
.lcs-404__liens {
	list-style: none;
	padding-inline: 0;
	margin-block: var(--wp--preset--spacing--l) 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--wp--preset--spacing--xl);
}

@media (min-width: 1080px) {
	.lcs-404__liens {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lcs-404__liens li {
	margin: 0;
}

.lcs-404__liens a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s);
	min-block-size: 44px;
	padding-block: 0.6rem;
	border-block-start: 1px solid var(--wp--preset--color--bordure);
	color: var(--wp--preset--color--primaire-sombre);
	text-decoration: none;
	font-weight: 600;
}

/* La fleche est un masque : sa couleur suit celle du texte. */
.lcs-404__liens a::after {
	content: "";
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 160ms ease;
}

.lcs-404__liens a:hover::after,
.lcs-404__liens a:focus-visible::after {
	transform: translateX(4px);
}

.lcs-404__liens a:hover,
.lcs-404__liens a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ------------------------------------------------------------- Recherche */

.lcs-404__ou {
	margin-block-start: var(--wp--preset--spacing--xl);
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-404__recherche {
	margin-block-start: var(--wp--preset--spacing--s);
	max-inline-size: 520px;
}

.lcs-404__recherche .wp-block-search__input {
	box-sizing: border-box;
	min-block-size: 44px;
	padding: 0.6rem 0.8rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--corps);
	color: var(--wp--preset--color--contraste);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 5px;
}

.lcs-404__recherche .wp-block-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primaire);
	outline-offset: 2px;
}

.lcs-404__recherche .wp-block-search__button {
	min-block-size: 44px;
	cursor: pointer;
}

/* --------------------------------------------------------- Bande sombre */

.lcs-404__bas .lcs-coordonnees {
	margin-block-start: var(--wp--preset--spacing--l);
}

.lcs-404__bas .lcs-coordonnees__telephone {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-size: var(--wp--preset--font-size--grand);
	font-weight: 600;
	text-decoration: none;
}

.lcs-404__bas .lcs-coordonnees__telephone:hover,
.lcs-404__bas .lcs-coordonnees__telephone:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.lcs-404__liens a::after {
		transition: none;
	}
}

/* ------------------------------------------ Realisation, page de detail */

/*
 * Le gabarit de detail est rendu par un seul bloc, lcs/realisation-detail.
 * Ses sections sont des <section> ecrites a la main : elles ne passent pas par
 * la disposition contrainte du coeur, le rail est donc rendu ici.
 *
 * La formule min(100% - 32px, rail) redonne exactement la geometrie d une
 * disposition contrainte : 112,5 px de bord a 1440, 16 px a 375.
 */
.lcs-rea__rail {
	box-sizing: border-box;
	inline-size: min(100% - 32px, var(--wp--style--global--wide-size));
	margin-inline: auto;
}

.lcs-rea__section {
	padding-block: var(--wp--preset--spacing--xxl);
}

.lcs-rea__h2 {
	margin-block: 0 var(--wp--preset--spacing--m);
	max-inline-size: var(--lcs-lecture);
	font-size: var(--wp--preset--font-size--tres-grand);
	color: var(--wp--preset--color--contraste);
}

.lcs-rea__section.lcs-bande-sombre .lcs-rea__h2 {
	color: var(--wp--preset--color--base);
}

.lcs-rea__h2::before {
	content: "";
	display: block;
	inline-size: 56px;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	margin-block-end: var(--wp--preset--spacing--m);
}

.lcs-rea__chapo {
	margin-block: 0 var(--wp--preset--spacing--l);
	max-inline-size: var(--lcs-lecture);
	color: var(--wp--preset--color--contraste-doux);
}

/* ------------------------------------------------------------ Couverture */

.lcs-rea__couverture {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-block-size: clamp(320px, 52vh, 520px);
	padding-block: var(--wp--preset--spacing--xxl);
	background: var(--wp--preset--color--contraste);
	overflow: hidden;
}

.lcs-rea__image,
.lcs-rea__voile {
	position: absolute;
	inset: 0;
}

.lcs-rea__image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Voile mesure au lot 5 : a 70 pour cent sur l ardoise, seuls le blanc et le
 * bleu pale tiennent le seuil AA sur une photographie quelconque.
 */
.lcs-rea__voile {
	background: var(--wp--preset--color--contraste);
	opacity: 0.7;
}

.lcs-rea__couverture .lcs-rea__rail {
	position: relative;
}

.lcs-rea__surtitre {
	margin-block: 0 var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--wp--preset--color--primaire-clair);
}

.lcs-rea__titre {
	margin-block: 0;
	max-inline-size: var(--lcs-lecture);
	color: var(--wp--preset--color--base);
}

.lcs-rea__reperes {
	list-style: none;
	padding-inline: 0;
	margin-block: var(--wp--preset--spacing--l) 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s) 0;
}

.lcs-rea__reperes li {
	display: grid;
	gap: 2px;
	padding-inline: var(--wp--preset--spacing--l);
	border-inline-start: 1px solid var(--wp--preset--color--bordure);
}

.lcs-rea__reperes li:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.lcs-rea__intitule {
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--primaire-clair);
}

.lcs-rea__couverture .lcs-rea__valeur {
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 600;
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------ Fiche du chantier */

.lcs-rea__duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--xl);
}

@media (min-width: 1080px) {
	.lcs-rea__duo {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.lcs-rea__donnees {
	margin: 0;
}

.lcs-rea__ligne {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--m);
	padding-block: var(--wp--preset--spacing--s);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

.lcs-rea__ligne dt {
	margin: 0;
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-rea__ligne dd {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--contraste);
}

.lcs-rea__materiaux h3 {
	margin-block: 0 var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--moyen);
}

.lcs-rea__materiaux ul {
	list-style: none;
	padding-inline: 0;
	margin: 0;
}

.lcs-rea__materiaux li {
	padding-block: var(--wp--preset--spacing--s);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

/* ------------------------------------------------------------- Le recit */

.lcs-rea__recit {
	max-inline-size: var(--lcs-lecture);
}

.lcs-rea__recit > * {
	margin-block: 0;
}

.lcs-rea__recit > * + * {
	margin-block-start: var(--wp--preset--spacing--m);
}

/* ------------------------------------------------------------ La galerie */

.lcs-rea__galerie {
	list-style: none;
	padding-inline: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--wp--preset--spacing--m);
}

.lcs-rea__galerie img {
	inline-size: 100%;
	block-size: auto;
	display: block;
	border-radius: 5px;
}

/* ------------------------------------------------------- Le mot du client */

.lcs-rea__verbatim {
	margin: 0;
	max-inline-size: var(--lcs-lecture);
	padding-inline-start: var(--wp--preset--spacing--l);
	border-inline-start: 3px solid var(--wp--preset--color--accent);
}

.lcs-rea__verbatim p {
	margin: 0;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--grand);
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------- Les autres chantiers */

.lcs-rea__voisins {
	list-style: none;
	padding-inline: 0;
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--l);
}

@media (min-width: 1080px) {
	.lcs-rea__voisins {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lcs-rea__voisin-image img {
	inline-size: 100%;
	block-size: auto;
	display: block;
	border-radius: 5px;
}

.lcs-rea__voisin h3 {
	margin-block: var(--wp--preset--spacing--s) 0;
	font-size: var(--wp--preset--font-size--moyen);
}

/* La cible du lien couvre toute la carte, filet du bas compris. */
.lcs-rea__voisin {
	position: relative;
}

.lcs-rea__voisin h3 a {
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.lcs-rea__voisin h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lcs-rea__voisin h3 a:hover,
.lcs-rea__voisin h3 a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lcs-rea__voisin-lieu {
	margin-block: 4px 0;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

/* --------------------------------------------- Rail horizontal des supports */

/*
 * Refonte du 10 aout, sur un modele apporte par le client : une frise
 * horizontale, un repere par etape sur un filet continu, et des cartes qui
 * defilent.
 *
 * Le rail defile NATIVEMENT : au doigt, au pave tactile, et au clavier des
 * qu il a le focus. Aucun script n est necessaire pour s en servir. Les deux
 * fleches sont un confort, rendues masquees par le serveur et revelees par
 * assets/frise.js : il n y a donc jamais de commande morte a l ecran.
 */
.lcs-rail {
	position: relative;
}

.lcs-rail__commandes {
	position: absolute;
	inset-block-start: calc(-1 * var(--wp--preset--spacing--xxl));
	inset-inline-end: 0;
	display: flex;
	gap: var(--wp--preset--spacing--s);
}

.lcs-rail__commandes[hidden] {
	display: none;
}

.lcs-rail__fleche {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 5px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primaire-sombre);
	cursor: pointer;
}

.lcs-rail__fleche:hover:not(:disabled),
.lcs-rail__fleche:focus-visible {
	border-color: var(--wp--preset--color--primaire-sombre);
}

.lcs-rail__fleche:focus-visible {
	outline: 2px solid var(--wp--preset--color--primaire);
	outline-offset: 2px;
}

.lcs-rail__fleche:disabled {
	color: var(--wp--preset--color--bordure);
	cursor: default;
}

/* ------------------------------------------------------------- La piste */

.lcs-rail__piste {
	list-style: none;
	margin: 0;
	padding-inline: 0;
	padding-block: var(--wp--preset--spacing--l) var(--wp--preset--spacing--s);
	display: flex;
	gap: var(--wp--preset--spacing--m);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.lcs-rail__piste:focus-visible {
	outline: 2px solid var(--wp--preset--color--primaire);
	outline-offset: 4px;
}

.lcs-rail__etape {
	position: relative;
	flex: none;
	inline-size: clamp(260px, 74vw, 320px);
	scroll-snap-align: start;
	margin: 0;
	padding-block-start: var(--wp--preset--spacing--l);
}

/*
 * Le filet de la frise est trace par chaque etape et court jusqu a la
 * suivante, gouttiere comprise. La derniere s arrete net.
 */
.lcs-rail__etape::before {
	content: "";
	position: absolute;
	inset-block-start: 6px;
	inset-inline-start: 0;
	inline-size: calc(100% + var(--wp--preset--spacing--m));
	block-size: 1px;
	background: var(--wp--preset--color--bordure);
}

.lcs-rail__etape:last-child::before {
	inline-size: 100%;
}

/*
 * Repere CARRE a rayon 5, et non pastille ronde : le client a demande le
 * 10 aout de n employer que le rayon de 5 px. L arbitrage sur les sept
 * pastilles rondes qui subsistent ailleurs reste ouvert.
 */
.lcs-rail__point {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 13px;
	block-size: 13px;
	border-radius: 5px;
	background: var(--wp--preset--color--primaire);
}

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

.lcs-rail__carte {
	box-sizing: border-box;
	block-size: 100%;
	padding: var(--wp--preset--spacing--m);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 5px;
	background: var(--wp--preset--color--base);
}

.lcs-rail__image {
	margin: 0 0 var(--wp--preset--spacing--m);
}

.lcs-rail__image img {
	inline-size: 100%;
	block-size: 168px;
	object-fit: cover;
	display: block;
	border-radius: 5px;
}

.lcs-rail__numero {
	margin: 0;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 600;
	color: var(--wp--preset--color--primaire-sombre);
}

.lcs-rail__titre {
	margin-block: 4px 0;
	font-size: var(--wp--preset--font-size--moyen);
	color: var(--wp--preset--color--contraste);
}

.lcs-rail__texte {
	margin-block: var(--wp--preset--spacing--s) 0;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

@media (prefers-reduced-motion: reduce) {
	.lcs-rail__piste {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------ Journal, archive */

/*
 * Grille d articles sur le modele apporte par le client : image, ligne de
 * metadonnees, titre, chapo, lien fleche. Aucune ombre, aucune bordure de
 * carte : le filet et le blanc font le travail, comme partout ailleurs.
 */
.lcs-journal__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--xl);
	list-style: none;
	padding-inline: 0;
	margin: 0;
}

@media (min-width: 720px) {
	.lcs-journal__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.lcs-journal__grille {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lcs-journal__grille > li {
	margin: 0;
	min-inline-size: 0;
}

/*
 * La carte est une colonne : le lien fleche se cale en bas quel que soit le
 * nombre de lignes du titre, les trois cartes d un rang restent alignees.
 */
.lcs-journal__carte {
	display: grid;
	grid-template-rows: auto auto auto 1fr auto;
	block-size: 100%;
	gap: var(--wp--preset--spacing--s);
}

.lcs-journal__carte > * {
	margin-block: 0;
}

.lcs-journal__image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;
}

.lcs-journal__meta {
	gap: var(--wp--preset--spacing--s);
	align-items: center;
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-journal__meta .wp-block-post-terms,
.lcs-journal__meta .wp-block-post-date {
	margin-block: 0;
}

/* Les liens de categorie sont des cibles a part entiere : 44 px de haut. */
.lcs-journal__meta a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--wp--preset--color--primaire-sombre);
	text-decoration: none;
}

.lcs-journal__meta a:hover,
.lcs-journal__meta a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lcs-journal__titre {
	margin-block: 0;
}

/* Un titre sur deux lignes mesurait 43,5 px : le plancher est pose a 44. */
.lcs-journal__titre a {
	display: inline-block;
	min-block-size: 44px;
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.lcs-journal__titre a:hover,
.lcs-journal__titre a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lcs-journal__chapo {
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-journal__chapo p {
	margin-block: 0;
}

/*
 * Le lien de lecture est un appel a l action : il porte le filet et la fleche
 * du silo, et sa cible fait 44 px de haut.
 */
.lcs-journal__lien {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-block-size: 44px;
	padding-block-start: var(--wp--preset--spacing--s);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
	inline-size: 100%;
	color: var(--wp--preset--color--primaire-sombre);
	font-weight: 600;
	text-decoration: none;
}

.lcs-journal__lien::after {
	content: "";
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 160ms ease;
}

.lcs-journal__lien:hover::after,
.lcs-journal__lien:focus-visible::after {
	transform: translateX(4px);
}

.lcs-journal__lien:hover,
.lcs-journal__lien:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ------------------------------------------------------------- Pagination */

.lcs-journal__pages {
	margin-block-start: var(--wp--preset--spacing--xxl);
	gap: var(--wp--preset--spacing--xs);
}

.lcs-journal__pages a,
.lcs-journal__pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: var(--wp--preset--spacing--s);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 5px;
	color: var(--wp--preset--color--primaire-sombre);
	text-decoration: none;
}

.lcs-journal__pages .page-numbers.current {
	background: var(--wp--preset--color--primaire);
	border-color: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.lcs-journal__lien::after {
		transition: none;
	}
}

/* ------------------------------------------------------ Article, detail */

/*
 * Couverture d article, sur le modele apporte par le client : la photographie
 * mise en avant sous un voile de 70 pour cent, les metadonnees, le titre et le
 * chapo. Mesure du lot 5 : sous ce voile, seuls le blanc et le bleu pale
 * tiennent le seuil AA sur une photographie quelconque.
 */
/*
 * La couverture adopte le rail LARGE comme largeur de contenu : sans cela son
 * conteneur interne se centre sur la mesure de lecture et le titre tombe a
 * 332 px quand tout le site est a 112. Meme parade que le piege 39, la
 * variable que le coeur consulte. La mesure de lecture est rendue ensuite au
 * titre et au chapo par leur max-inline-size.
 */
.lcs-couverture.lcs-couverture {
	--wp--style--global--content-size: var(--wp--style--global--wide-size);
}

.lcs-couverture {
	min-block-size: clamp(320px, 46vh, 460px);
	align-items: flex-end;
	/*
	 * Le coeur pose padding: 1em sur toute couverture, qui S AJOUTE a la
	 * gouttiere racine du conteneur interne : le titre tombait a 32 px au lieu
	 * de 16 en mobile. Piege 8, deja rencontre sur le hero.
	 */
	padding-inline: 0;
}

.lcs-couverture .wp-block-cover__inner-container > * {
	margin-block: 0;
}

.lcs-couverture__meta {
	gap: var(--wp--preset--spacing--s);
	align-items: center;
	color: var(--wp--preset--color--primaire-clair);
}

.lcs-couverture__meta a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--wp--preset--color--primaire-clair);
	text-decoration: none;
}

.lcs-couverture__meta a:hover,
.lcs-couverture__meta a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*
 * La mesure de lecture se rend par un RETRAIT A DROITE, jamais par une largeur
 * maximale : le coeur centre tout enfant d une disposition contrainte avec des
 * marges automatiques en !important, verifiees a la mesure le 10 aout. Une
 * largeur capee recentrerait le texte a 332 px au lieu de 112. Piege 39.
 */
.lcs-couverture__titre.lcs-couverture__titre,
.lcs-couverture__chapo.lcs-couverture__chapo {
	box-sizing: border-box;
	padding-inline-end: max(0px, calc(min(100%, var(--wp--style--global--wide-size)) - var(--lcs-lecture)));
}

.lcs-couverture__titre {
	margin-block: var(--wp--preset--spacing--xs) 0;
	color: var(--wp--preset--color--base);
}

.lcs-couverture__chapo {
	margin-block: var(--wp--preset--spacing--m) 0;
	color: var(--wp--preset--color--primaire-clair);
}

/* ------------------------------------------------------------- Sommaire */

/*
 * Le sommaire et les ancres des titres passent par la MEME fonction PHP :
 * inc/article.php, lcs_article_ancre. Ils ne peuvent pas diverger.
 *
 * Le decalage de defilement tient compte de l en-tete collante, sinon un titre
 * vise par une ancre se cale SOUS le menu.
 */
.lcs-article__corps h2 {
	scroll-margin-block-start: calc(var(--lcs-entete, 90px) + var(--wp--preset--spacing--l));
}

/*
 * Le corps de l article herite du rail large de la section : ses paragraphes
 * couraient sur 1200 px, bien au-dela de la mesure de lecture. Mesure du
 * 10 aout. On garde le bord gauche sur l axe et on cape la largeur, plutot que
 * de recentrer, ce qui casserait l axe.
 *
 * Les blocs explicitement alignes sont exclus, comme partout : piege 42.
 */
.lcs-article__corps > :is(p, h2, h3, h4, ul, ol, blockquote, figure, table, dl):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	box-sizing: border-box;
	padding-inline-end: max(0px, calc(min(100%, var(--wp--style--global--wide-size)) - var(--lcs-lecture)));
}

/*
 * Le nav garde le rail que le coeur lui impose ; la TEINTE vit dans une boite
 * interne, qui n est pas enfant d une disposition contrainte et se cale donc a
 * gauche sans etre recentree.
 */
.lcs-sommaire {
	margin-block-end: var(--wp--preset--spacing--xl);
}

.lcs-sommaire__boite {
	box-sizing: border-box;
	max-inline-size: var(--lcs-lecture);
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l);
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--primaire-clair);
	border-start-end-radius: 5px;
	border-end-end-radius: 5px;
}

.lcs-sommaire__titre {
	margin-block: 0 var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-sommaire__liste {
	margin: 0;
	padding-inline-start: 1.4rem;
	display: grid;
	gap: 2px;
}

.lcs-sommaire__liste li {
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-sommaire__liste a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--wp--preset--color--primaire-sombre);
	text-decoration: none;
}

.lcs-sommaire__liste a:hover,
.lcs-sommaire__liste a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ------------------------------------------------------- A lire ensuite */

.lcs-lies__h2 {
	box-sizing: border-box;
	margin-block: 0 var(--wp--preset--spacing--l);
	padding-inline-end: max(0px, calc(min(100%, var(--wp--style--global--wide-size)) - var(--lcs-lecture)));
}

.lcs-lies__grille {
	list-style: none;
	padding-inline: 0;
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--xl);
}

/*
 * Le nombre de colonnes vient du NOMBRE DE CARTES, pose par le rendu : trois
 * pistes fixes laissaient 784 px de blanc le jour ou la categorie ne fournit
 * qu un voisin. Mesure du 11 aout, signalee par le client. Piege 77.
 */
@media (min-width: 720px) {
	.lcs-lies__grille--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lcs-lies__grille--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lcs-lies__carte {
	position: relative;
	margin: 0;
	min-inline-size: 0;
}

.lcs-lies__image img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	border-radius: 5px;
}

.lcs-lies__cat {
	margin-block: var(--wp--preset--spacing--s) 0;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-lies__cat a {
	color: var(--wp--preset--color--primaire-sombre);
	text-decoration: none;
}

.lcs-lies__titre {
	margin-block: 4px 0;
	font-size: var(--wp--preset--font-size--moyen);
}

.lcs-lies__titre a {
	display: inline-block;
	min-block-size: 44px;
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

/* La cible du lien de titre couvre toute la carte, image comprise. */
.lcs-lies__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lcs-lies__titre a:hover,
.lcs-lies__titre a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* -------------------------------------------- Colonne d appui de l article */

/*
 * Defaut signale par le client le 11 aout : le corps de l article tient sa
 * mesure de lecture de 760 px dans un rail de 1200, ce qui laissait 490 px de
 * blanc a sa droite. La parade consignee en memoire est d OCCUPER la marge,
 * jamais de recentrer : le bord gauche du texte reste sur l axe du site et la
 * marge accueille le sommaire, puis les boutons de partage.
 *
 * L ordre du DOM est sommaire, corps, partage. Il vaut ordre de parcours au
 * clavier, et ordre d empilement en mobile, ou le partage se lit APRES
 * l article. Aucun order : seulement des places de grille explicites.
 */
.lcs-article__duo {
	--lcs-appui: 320px;
}

.lcs-article__duo.lcs-article__duo > * {
	margin-block: 0;
	min-inline-size: 0;
}

.lcs-article__duo.lcs-article__duo > .lcs-sommaire {
	margin-block-end: var(--wp--preset--spacing--xl);
}

.lcs-article__duo.lcs-article__duo > .lcs-partage {
	margin-block-start: var(--wp--preset--spacing--xl);
}

@media (min-width: 1080px) {
	.lcs-article__duo {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--lcs-appui);
		grid-template-rows: auto 1fr;
		column-gap: var(--wp--preset--spacing--xxl);
	}

	.lcs-article__duo.lcs-article__duo > .lcs-sommaire {
		grid-column: 2;
		grid-row: 1;
		margin-block-end: var(--wp--preset--spacing--l);
	}

	.lcs-article__duo.lcs-article__duo > .lcs-article__corps {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	/*
	 * Le rail de partage suit la lecture. La colle se pose sur l element
	 * lui-meme, cale en haut de sa piste : une piste en 1fr l etirerait sur
	 * toute la hauteur restante et plus rien ne collerait.
	 */
	.lcs-article__duo.lcs-article__duo > .lcs-partage {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		margin-block-start: 0;
		position: sticky;
		inset-block-start: calc(var(--lcs-entete, 90px) + var(--wp--preset--spacing--m));
	}
}

/* ---------------------------------------------------- Boutons de partage */

.lcs-partage__titre {
	margin-block: 0 var(--wp--preset--spacing--m);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-partage__liste {
	list-style: none;
	margin: 0;
	padding-inline: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s);
}

.lcs-partage__liste li {
	margin: 0;
}

/*
 * Cible de 48 px, au-dela des 44 exiges. box-sizing obligatoire : le composant
 * porte une bordure, et content-box ajouterait 2 px a chaque bouton, piege 76.
 */
.lcs-partage__lien {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 5px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contraste-doux);
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.lcs-partage__lien:hover,
.lcs-partage__lien:focus-visible,
.lcs-partage__lien--fait {
	border-color: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--primaire-sombre);
}

/*
 * La place du message de confirmation est reservee des le chargement : sans
 * cela, la copie du lien pousserait le bas de la colonne de 24 px.
 */
.lcs-partage__etat {
	margin-block: var(--wp--preset--spacing--xs) 0;
	min-block-size: 1.5em;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--primaire-sombre);
}

@media (prefers-reduced-motion: reduce) {
	.lcs-partage__lien {
		transition: none;
	}
}

/* ------------------------------------------------- Couches, empilement par support */

/*
 * Chaque support montre son empilement reel, du fond vers la finition. La pile
 * est en column-reverse : l ordre du DOM va du support a la finition, l ordre
 * visuel monte du bas vers le haut, comme la matiere se pose sur un mur. Le
 * lecteur d ecran suit donc la narration du metier, l oeil suit la coupe.
 *
 * Les teintes encodent la POSITION dans la pile, jamais la nature de la couche :
 * premier = le support (ardoise), dernier = la finition (blanc a filet), les
 * intermediaires alternent sable et bleu pale. Une pile de trois ou de cinq
 * elements reste donc juste sans toucher au CSS, et le client peut ajouter une
 * couche dans Gutenberg sans rien casser.
 *
 * Geometrie au dela de 1080 px : arete magenta 6 + retrait 32 + pile 338 +
 * gouttiere 64 + texte 760 = 1200, soit exactement le rail large. La mesure de
 * lecture est rendue au texte et il ne reste aucun vide a droite.
 */
.lcs-couches.lcs-couches {
	box-sizing: border-box;
	margin-block-start: var(--wp--preset--spacing--xl);
	border-inline-start: 6px solid var(--wp--preset--color--accent);
	padding-inline-start: var(--wp--preset--spacing--l);
}

.lcs-couches.lcs-couches > * {
	margin-block: 0;
}

.lcs-couches__legende {
	padding-block-end: var(--wp--preset--spacing--l);
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-couches__rangee {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--m);
	padding-block: var(--wp--preset--spacing--l);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

.lcs-couches__rangee:first-of-type {
	border-block-start: 0;
	padding-block-start: 0;
}

.lcs-couches__rangee:last-of-type {
	padding-block-end: 0;
}

/* Piege 108 : la classe doublee, (0,2,1), pour battre le blockGap du coeur. */
.lcs-couches__rangee.lcs-couches__rangee > * {
	margin-block: 0;
}

/*
 * Le texte se centre sur la pile : mesure a 1920, un paragraphe de 57,6 px face
 * a une pile de 181 laissait 84,2 px de blanc sous lui, cales en haut. Le creux
 * se repartit desormais de part et d autre.
 */
@media (min-width: 1080px) {
	.lcs-couches__rangee {
		grid-template-columns: 338px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xxl);
		align-items: center;
	}
}

/*
 * Le cap de 420 px ne mord jamais au dela de 1080 px, ou la colonne vaut 338.
 * Il ne sert qu en dessous : mesure a 768, une pile pleine largeur donnait des
 * bandes de 683 px pour un libelle de 210, soit des rubans de 15 pour 1 qui ne
 * lisaient plus comme une coupe de mur.
 */
ul.lcs-couches__pile {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding-inline: 0;
	max-inline-size: 420px;
	display: flex;
	flex-direction: column-reverse;
	gap: 4px;
}

ul.lcs-couches__pile > li {
	box-sizing: border-box;
	margin-block: 0;
	padding: 10px 14px;
	border: 1px solid transparent;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.35;
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--contraste-doux);
}

ul.lcs-couches__pile > li:nth-child(3) {
	background: var(--wp--preset--color--primaire-clair);
	color: var(--wp--preset--color--primaire-sombre);
}

/*
 * Ces deux regles viennent APRES nth-child : sur une pile de trois elements, le
 * troisieme est aussi le dernier, et c est la finition qui doit l emporter.
 */
ul.lcs-couches__pile > li:first-child {
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--base);
}

ul.lcs-couches__pile > li:last-child {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contraste-doux);
	border-color: var(--wp--preset--color--bordure);
}

.lcs-couches__texte.lcs-couches__texte > * {
	margin-block: 0;
}

.lcs-couches__texte.lcs-couches__texte > * + * {
	margin-block-start: var(--wp--preset--spacing--xs);
}

.lcs-couches__titre.lcs-couches__titre {
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1.2;
}

/*
 * Apparition au defilement, sans une ligne de JavaScript. La minuterie est
 * portee par la RANGEE et non par chaque couche : sans cela, la pile etant en
 * column-reverse, la finition entrerait dans l ecran avant le support et la
 * matiere se poserait a l envers. Les quatre plages decalees rejouent l ordre
 * du chantier, du fond vers la finition.
 *
 * Zero etat masque en repli : sans animation-timeline, tout s affiche.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes lcs-couche {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@supports (animation-timeline: view()) {
		.lcs-couches__rangee {
			view-timeline-name: --lcs-rangee;
			view-timeline-axis: block;
		}

		ul.lcs-couches__pile > li {
			animation: lcs-couche linear both;
			animation-timeline: --lcs-rangee;
			animation-range: entry 15% entry 60%;
		}

		ul.lcs-couches__pile > li:nth-child(2) {
			animation-range: entry 25% entry 70%;
		}

		ul.lcs-couches__pile > li:nth-child(3) {
			animation-range: entry 35% entry 80%;
		}

		ul.lcs-couches__pile > li:nth-child(4) {
			animation-range: entry 45% entry 90%;
		}
	}
}

/* --------------------------------------------------- Teintes, nuancier de chantier */

/*
 * Un nuancier en tete de section, puis les engagements en liste, chacun rappele
 * par la pastille de sa teinte. Le nuancier est un ORNEMENT D EN TETE : il ne
 * porte pas le texte, si bien que la mesure de lecture reste rendue a la liste,
 * 760 px, par la formule maison en padding-inline-end.
 *
 * Il joue HORIZONTALEMENT la ou les couches de la section precedente jouent
 * verticalement : deux sections de la meme page ne repetent pas le meme geste.
 * Les quatre pastilles n ont pas la meme largeur, pour la meme raison.
 *
 * Teintes du plus clair au plus sombre, dans l ordre du chantier : blanc,
 * primaire, primaire sombre, ardoise. Le blanc ne se detourerait pas sur le
 * bleu pale, c est le filet de 1 px de la bande entiere qui l enferme.
 */
.lcs-teintes.lcs-teintes {
	margin-block-start: var(--wp--preset--spacing--xl);
}

.lcs-teintes.lcs-teintes > * {
	margin-block: 0;
}

ul.lcs-teintes__bande {
	box-sizing: border-box;
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--l);
	padding-inline: 0;
	border: 1px solid var(--wp--preset--color--bordure);
	border-inline-start: 6px solid var(--wp--preset--color--accent);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Le nombre de colonnes est DECLARE, jamais laisse a auto-fit. Piege 77. */
@media (min-width: 1080px) {
	ul.lcs-teintes__bande {
		grid-template-columns: 30% 22% 24% 24%;
	}
}

ul.lcs-teintes__bande > li {
	box-sizing: border-box;
	margin-block: 0;
	padding: var(--wp--preset--spacing--m) 18px;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.4;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contraste-doux);
}

ul.lcs-teintes__bande > li strong {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
}

ul.lcs-teintes__bande > li:nth-child(2) {
	background: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--base);
}

ul.lcs-teintes__bande > li:nth-child(3) {
	background: var(--wp--preset--color--primaire-sombre);
	color: var(--wp--preset--color--base);
}

ul.lcs-teintes__bande > li:nth-child(4) {
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--base);
}

/*
 * La mesure de lecture se rend TOUJOURS par un retrait, jamais par une largeur :
 * une largeur recentrerait le bloc, les marges automatiques du coeur etant en
 * important. Pieges 39 et 80.
 */
ul.lcs-teintes__liste {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding-inline: 0;
	padding-inline-end: max(0px, calc(min(100%, var(--wp--style--global--wide-size)) - var(--lcs-lecture)));
}

ul.lcs-teintes__liste > li {
	box-sizing: border-box;
	margin-block: 0;
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--s);
	align-items: start;
	padding-block: var(--wp--preset--spacing--s);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

ul.lcs-teintes__liste > li::before {
	content: "";
	display: block;
	inline-size: 14px;
	block-size: 14px;
	margin-block-start: 7px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--bordure);
}

ul.lcs-teintes__liste > li:nth-child(2)::before {
	background: var(--wp--preset--color--primaire);
	border-color: var(--wp--preset--color--primaire);
}

ul.lcs-teintes__liste > li:nth-child(3)::before {
	background: var(--wp--preset--color--primaire-sombre);
	border-color: var(--wp--preset--color--primaire-sombre);
}

ul.lcs-teintes__liste > li:nth-child(4)::before {
	background: var(--wp--preset--color--contraste);
	border-color: var(--wp--preset--color--contraste);
}

/*
 * Le nuancier se peint de gauche a droite, une teinte apres l autre, puis les
 * engagements glissent. Minuterie unique portee par le bloc, plages decalees.
 * Le clip-path decouvre la pastille ET son intitule : c est la teinte qui pose
 * le mot, pas un texte qui apparait sur une teinte deja la.
 *
 * Zero etat masque en repli : sans animation-timeline, tout s affiche.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes lcs-teinte {
		from {
			clip-path: inset(0 100% 0 0);
		}

		to {
			clip-path: inset(0 0 0 0);
		}
	}

	@keyframes lcs-engagement {
		from {
			opacity: 0;
			transform: translateX(10px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@supports (animation-timeline: view()) {
		.lcs-teintes {
			view-timeline-name: --lcs-teintes;
			view-timeline-axis: block;
		}

		ul.lcs-teintes__bande > li {
			animation: lcs-teinte linear both;
			animation-timeline: --lcs-teintes;
			animation-range: entry 10% entry 45%;
		}

		ul.lcs-teintes__bande > li:nth-child(2) {
			animation-range: entry 18% entry 53%;
		}

		ul.lcs-teintes__bande > li:nth-child(3) {
			animation-range: entry 26% entry 61%;
		}

		ul.lcs-teintes__bande > li:nth-child(4) {
			animation-range: entry 34% entry 69%;
		}

		ul.lcs-teintes__liste > li {
			animation: lcs-engagement linear both;
			animation-timeline: --lcs-teintes;
			animation-range: entry 40% entry 75%;
		}

		ul.lcs-teintes__liste > li:nth-child(2) {
			animation-range: entry 46% entry 81%;
		}

		ul.lcs-teintes__liste > li:nth-child(3) {
			animation-range: entry 52% entry 87%;
		}

		ul.lcs-teintes__liste > li:nth-child(4) {
			animation-range: entry 58% entry 93%;
		}
	}
}

/* ------------------------------------------------------- Bandeau photographique */

/*
 * La photographie est recadree en bandeau et derive lentement DANS son cadre au
 * defilement. Aucun background-attachment: fixed : il est ignore par Safari iOS
 * et instable sur Chrome Android, et la regle 5 le condamne des qu un transform
 * ou un filter vit chez un ancetre, ce qui est le cas sur une page qui anime.
 * Ici rien n est fixe, c est object-position qui bouge, sur la minuterie de la
 * vue, sans une ligne de JavaScript.
 *
 * Amplitude a 1440 : le cadre fait 1200 x 380, l image couvrante 1200 x 800,
 * soit 420 px de course. La derive de 42 a 60 pour cent en consomme 18, soit
 * 75,6 px. Au dela on voit le procede.
 *
 * Le min-block-size ne mord qu en dessous de 474 px de rail : sans lui, le
 * rapport de 3,16 donnerait un bandeau de 108 px a 375, qui ne lirait plus
 * comme une photographie mais comme un filet decoratif.
 *
 * ATTENTION, l inline-size explicite n est PAS decoratif : aspect-ratio joue dans les
 * DEUX sens. Sans largeur definie, le min-block-size de 150 px fixait la
 * hauteur et la largeur suivait le rapport, 150 x 3,158 = 473,7 px sur un rail
 * de 343 : mesure a 375, le bandeau sortait de 130,5 px et le document
 * debordait de 115. Une largeur definie rend le rapport inoperant sur l axe
 * horizontal, et c est la hauteur seule qui cede au minimum.
 */
.lcs-bandeau.lcs-bandeau {
	box-sizing: border-box;
	margin-block-start: var(--wp--preset--spacing--xl);
	overflow: hidden;
	inline-size: 100%;
	aspect-ratio: 1200 / 380;
	min-block-size: 150px;
}

.lcs-bandeau.lcs-bandeau img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes lcs-derive {
		from {
			object-position: 50% 42%;
		}

		to {
			object-position: 50% 60%;
		}
	}

	@supports (animation-timeline: view()) {
		.lcs-bandeau.lcs-bandeau img {
			animation: lcs-derive linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

/* ----------------------------------------------- Scene, echelle des etats de finition */

/*
 * Une grande photographie a gauche, l echelle des trois etats sur une plaque
 * ardoise a droite, les deux jointifs, arete magenta au flanc gauche.
 *
 * La photographie 206 est un RECADRAGE de la 145 : l originale porte une
 * esperluette et deux mots anglais dans des cadres, verticalement au milieu.
 * Aucune fenetre de cadrage animee ne pouvait a la fois les eviter et garder
 * de la course, le recadrage a donc ete fait une fois pour toutes cote serveur,
 * comme le losange du logo qui contenait lui aussi une esperluette.
 *
 * La hauteur de la rangee est commandee par la PLAQUE, pas par l image : la
 * photographie est absolue dans son cadre et se contente de le remplir. Un
 * min-block-size la garde lisible quand la plaque est courte, et il n y a pas
 * d aspect-ratio ici, donc rien qui puisse recalculer la largeur (piege 116).
 */
.lcs-scene.lcs-scene {
	box-sizing: border-box;
	margin-block-start: var(--wp--preset--spacing--xl);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-inline-start: 6px solid var(--wp--preset--color--accent);
}

.lcs-scene.lcs-scene > * {
	margin-block: 0;
}

@media (min-width: 1080px) {
	.lcs-scene.lcs-scene {
		grid-template-columns: 58% minmax(0, 1fr);
	}
}

.lcs-scene__photo.lcs-scene__photo {
	position: relative;
	overflow: hidden;
	min-block-size: 260px;
}

.lcs-scene__photo.lcs-scene__photo img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 60%;
}

ul.lcs-scene__niveaux {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--l);
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--primaire-clair);
}

ul.lcs-scene__niveaux > li {
	box-sizing: border-box;
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--m);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
	line-height: 1.5;
}

ul.lcs-scene__niveaux > li:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

ul.lcs-scene__niveaux > li:last-child {
	padding-block-end: 0;
}

ul.lcs-scene__niveaux > li strong {
	display: block;
	margin-block-end: var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1.2;
	color: var(--wp--preset--color--base);
}

/*
 * La scene derive comme le bandeau, mais son amplitude ne peut PAS s exprimer
 * en pourcentage unique de la course. Mesure : la hauteur du cadre est commandee
 * par la plaque au dela de 1080 px et par le min-block-size en dessous, si bien
 * que la course passe de 164,9 px a 1440 a 589,2 px a 768. Un meme pourcentage
 * y donnait 36 px d un cote et 129,6 px de l autre, largement au dela des 80 px
 * ou le procede se voit. Deux plages, donc, une par palier, calees pour rendre
 * environ 70 px de part et d autre.
 *
 * Les trois niveaux glissent ensuite, un par un. Zero etat masque en repli.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes lcs-scene-derive {
		from {
			object-position: 50% 56%;
		}

		to {
			object-position: 50% 68%;
		}
	}

	@keyframes lcs-scene-derive-large {
		from {
			object-position: 50% 40%;
		}

		to {
			object-position: 50% 82%;
		}
	}

	@supports (animation-timeline: view()) {
		.lcs-scene {
			view-timeline-name: --lcs-scene;
			view-timeline-axis: block;
		}

		.lcs-scene__photo.lcs-scene__photo img {
			animation: lcs-scene-derive linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}

		@media (min-width: 1080px) {
			.lcs-scene__photo.lcs-scene__photo img {
				animation-name: lcs-scene-derive-large;
			}
		}

		ul.lcs-scene__niveaux > li {
			animation: lcs-engagement linear both;
			animation-timeline: --lcs-scene;
			animation-range: entry 20% entry 60%;
		}

		ul.lcs-scene__niveaux > li:nth-child(2) {
			animation-range: entry 30% entry 70%;
		}

		ul.lcs-scene__niveaux > li:nth-child(3) {
			animation-range: entry 40% entry 80%;
		}
	}
}

/* ------------------------------------------- Preparation, texte et capture en duo */

/*
 * Le texte a GAUCHE et la capture a droite, jamais l inverse : une colonne
 * d appui posee a gauche decalerait le corps de l axe unique du site, defaut
 * signale deux fois par le client (piege 91).
 *
 * Geometrie au dela de 1080 : texte 58 pour cent, soit 696 px, gouttiere 64,
 * capture 440. Le texte reste donc sous la mesure de lecture de 760 px.
 *
 * Aucune arete magenta ici : la scene qui precede en porte deja une dans la
 * meme section, et le motif ne se repete pas a deux blocs d intervalle.
 *
 * Meme mecanique que la scene : la hauteur de la rangee est commandee par le
 * TEXTE, la capture est absolue dans son cadre et se contente de le remplir.
 */
.lcs-preparation.lcs-preparation {
	box-sizing: border-box;
	margin-block-start: var(--wp--preset--spacing--xl);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--l);
}

.lcs-preparation.lcs-preparation > * {
	margin-block: 0;
}

@media (min-width: 1080px) {
	.lcs-preparation.lcs-preparation {
		grid-template-columns: 58% minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xxl);
	}
}

.lcs-preparation__texte.lcs-preparation__texte > * {
	margin-block: 0;
}

.lcs-preparation__texte.lcs-preparation__texte > * + * {
	margin-block-start: var(--wp--preset--spacing--m);
}

.lcs-preparation__photo.lcs-preparation__photo {
	position: relative;
	overflow: hidden;
	min-block-size: 260px;
}

/*
 * Cadrage a 62 pour cent : la porte coulissante et le jardin occupent la gauche
 * de la capture, le mur enduit et l escabeau, qui sont le sujet, sont au centre
 * et a droite.
 */
.lcs-preparation__photo.lcs-preparation__photo img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 62% 50%;
}

/*
 * La capture se decouvre du bas vers le haut, sans derive : la section porte
 * deja une parallaxe sur la scene, deux dans la meme section se verraient.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes lcs-devoile {
		from {
			clip-path: inset(100% 0 0 0);
		}

		to {
			clip-path: inset(0 0 0 0);
		}
	}

	@supports (animation-timeline: view()) {
		.lcs-preparation__photo.lcs-preparation__photo img {
			animation: lcs-devoile linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 30%;
		}
	}
}

/*
 * Trois vitrines : deux cote a cote, la troisieme en panoramique sur toute la
 * largeur. Une grille a deux pistes avec trois cartes laisserait un trou de
 * 584 px a 1440 (piege 77, enieme occurrence). Etendre la troisieme plutot que
 * passer a trois colonnes preserve la taille de vitrine choisie par le client
 * le 9 aout, 584 px de large contre 378 en trois colonnes.
 *
 * Sous 720 px la grille est deja a une colonne : l image y reprend son 16/9.
 */
@media (min-width: 720px) {
	.lcs-cartes--trois > .lcs-carte:nth-child(3) {
		grid-column: 1 / -1;
	}

	.lcs-cartes--trois > .lcs-carte:nth-child(3) .lcs-carte__image img {
		aspect-ratio: 32 / 9;
	}
}

/* ------------------------------------------------- P1 a P4, audit du 12 aout */

/*
 * P4. La bande d appel a l action passe en couverture photographique. Le
 * conteneur interne d une couverture ecrite a la main ne porte PAS les classes
 * de disposition du coeur : le rail se refait a la main (piege 84). Et le coeur
 * pose un padding de 1em sur la couverture, qui s ajouterait a la gouttiere
 * racine (piege 8) : il est remis a zero.
 *
 * L image 75 est PROVISOIRE, autorisee par le client le 12 aout : elle sera
 * remplacee par une photographie de chantier reelle avant la mise en
 * production. Sous voile a 70 pour cent, seuls le blanc et le bleu pale
 * tiennent le contraste, ce qui est deja le traitement de cette bande.
 */
.lcs-cta-photo.lcs-cta-photo {
	padding-inline: 0;
}

.lcs-cta-photo > .wp-block-cover__inner-container {
	box-sizing: border-box;
	inline-size: min(100% - 32px, var(--wp--style--global--wide-size));
	margin-inline: auto;
}

@media (prefers-reduced-motion: no-preference) {
	/*
	 * P1. Le filet magenta se trace a l entree de chaque section. Une seule
	 * regle donne sa signature a toute la page, et au site entier : le filet
	 * est le motif commun de toutes les sections. C est exactement ce que le
	 * CDC 3.7 autorise, une apparition de faible amplitude sur les sections
	 * principales, et non une animation par element.
	 */
	@keyframes lcs-filet-trace {
		from {
			inline-size: 0;
		}

		to {
			inline-size: 56px;
		}
	}

	@supports (animation-timeline: view()) {
		.lcs-filet > :is(h2, h3):first-child::before {
			animation: lcs-filet-trace linear both;
			animation-timeline: view();
			animation-range: entry 25% entry 75%;
		}

		/*
		 * P2. Les trois vitrines s ouvrent, decalees. On anime la CARTE en
		 * opacite et translation, jamais le transform de son image : celle-ci
		 * porte deja un survol en scale(1.04), et une animation en fill both
		 * gelerait ce transform et tuerait le survol. L image se decouvre donc
		 * par clip-path, qui coexiste avec le transform.
		 */
		.lcs-cartes--trois > .lcs-carte {
			animation: lcs-couche linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 55%;
		}

		.lcs-cartes--trois > .lcs-carte:nth-child(2) {
			animation-range: entry 18% entry 63%;
		}

		.lcs-cartes--trois > .lcs-carte:nth-child(3) {
			animation-range: entry 26% entry 71%;
		}

		.lcs-cartes--trois > .lcs-carte .lcs-carte__image img {
			animation: lcs-devoile linear both;
			animation-timeline: view();
			animation-range: entry 15% cover 30%;
		}
	}

	/*
	 * P3. La question fréquente s ouvre en fondu de hauteur, sans une ligne de
	 * JavaScript. interpolate-size rend le mot-cle auto interpolable, et
	 * ::details-content donne prise au corps du bloc. Sans le support, la garde
	 * @supports laisse le comportement actuel, une ouverture seche : zero etat
	 * casse en repli. La garde reduced-motion englobe le tout, si bien qu un
	 * visiteur qui refuse le mouvement retrouve l ouverture instantanee.
	 */
	@supports (interpolate-size: allow-keywords) {
		:root {
			interpolate-size: allow-keywords;
		}

		.lcs-faq__item::details-content {
			block-size: 0;
			overflow: hidden;
			transition: block-size 320ms ease, content-visibility 320ms allow-discrete;
		}

		.lcs-faq__item[open]::details-content {
			block-size: auto;
		}
	}
}

/* --------------------------------------------------------- Motif de nuancier */

/*
 * ESSAI du 12 aout, deuxieme etat : un motif en pointille remplace la
 * photographie voilee. Quatre pointilles qui rejouent la sequence du nuancier,
 * ardoise, primaire, accent et bordure, sur une trame de 128 par 32 px. De loin
 * c est un grain de papier, de pres c est un nuancier.
 *
 * Ce que le motif regle et que la photographie ne reglait pas : zero requete
 * d image, zero media provisoire a remplacer, et surtout zero agrandissement en
 * mobile - la photographie etait tiree 2,3 fois sur une section de 375 par
 * 1978 px et n en montrait qu une bande verticale.
 *
 * Le magenta n est ici qu une SURFACE de 5 px de diametre a 12 pour cent,
 * jamais du texte : l arbitrage du 9 aout est respecte.
 *
 * Contraste calcule a la main, la sonde ne lisant que backgroundColor et non
 * background-image : le pointille le plus sombre, l ardoise a 18 pour cent sur
 * blanc, donne rgb(215,217,218), ou le texte en contraste-doux tient 8,11:1.
 * Les bandes de la pile sont opaques, elles couvrent le motif.
 *
 * QUATRIEME ETAT, 12 aout : trame encore resserree, de 24 a 16 px de pas, et
 * pointille reduit de 3 a 2,5 px de diametre pour que la densite ne vire pas au
 * lavis gris. Mesure : 89 pointilles par ligne a 1440 contre 59 au troisieme
 * etat et 11 au premier. L opacite ne bouge pas, donc le pire cas de contraste
 * non plus : un glyphe ne voit jamais qu UN pointille a la fois.
 *
 * TROISIEME ETAT, 12 aout : trame resserree a 24 px et estompe vers l exterieur.
 * L estompe est un voile radial blanc pose EN PREMIERE COUCHE, donc AU-DESSUS
 * des pointilles : transparent au centre, blanc franc aux bords. Elle se fait
 * ainsi dans la meme declaration, sans pseudo-element ni z-index, donc sans
 * rien a empiler avec le contenu. Elle suppose que le fond effectif de la
 * section est le blanc, ce qui est le cas : la section n a pas de couleur de
 * fond et la page est blanche.
 *
 * Les rayons de l ellipse sont en POUR CENT, donc proportionnels a la boite :
 * l estompe reste juste sur une section de 1239 px au bureau comme de 1978 px
 * en mobile, sans requete de media.
 */
.lcs-texture.lcs-texture {
	background-image:
		radial-gradient(ellipse 75% 65% at 50% 50%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 100%),
		radial-gradient(circle at 4px 8px, rgba(31, 42, 51, 0.18) 1.25px, transparent 1.75px),
		radial-gradient(circle at 20px 8px, rgba(9, 104, 162, 0.18) 1.25px, transparent 1.75px),
		radial-gradient(circle at 36px 8px, rgba(233, 54, 121, 0.14) 1.25px, transparent 1.75px),
		radial-gradient(circle at 52px 8px, rgba(110, 122, 133, 0.18) 1.25px, transparent 1.75px);
	background-size: 100% 100%, 64px 16px, 64px 16px, 64px 16px, 64px 16px;
	background-repeat: no-repeat, repeat, repeat, repeat, repeat;
}

/* ------------------------------------------------------ Mosaique de l accueil */

/*
 * Hero de la page d accueil, parti retenu par le client le 12 aout. Il est
 * volontairement different des deux autres heros du site : ni couverture voilee
 * a carte de verre depoli comme le pilier, ni voile en degrade comme les pages
 * filles. Ici le hero EST le choix du metier : un pave de titre et six tuiles
 * photographiques jointives, chacune menant a une page mere de silo.
 *
 * Au dela de 1080 px, la grille fait cinq colonnes sur deux rangees et le pave
 * occupe deux colonnes sur les deux rangees, ce qui laisse exactement six
 * cellules pour les six metiers. En dessous, le pave prend toute la largeur et
 * les tuiles passent a trois puis a deux colonnes.
 *
 * La hauteur d ecran n est imposee qu au dela de 1080 px : en mobile, une
 * grille de six tuiles dans 100svh les ecraserait a moins de 90 px chacune.
 */
.lcs-mosaique.lcs-mosaique {
	box-sizing: border-box;
	margin-block-start: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lcs-mosaique.lcs-mosaique > * {
	margin-block: 0;
}

@media (min-width: 720px) {
	.lcs-mosaique.lcs-mosaique {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.lcs-mosaique.lcs-mosaique {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
		min-block-size: calc(100svh - var(--lcs-entete));
	}
}

/* Le pave porte le motif de pointillés du nuancier, en clair sur l ardoise. */
.lcs-mosaique__pave.lcs-mosaique__pave {
	box-sizing: border-box;
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--xl);
	background-color: var(--wp--preset--color--contraste);
	background-image:
		radial-gradient(circle at 4px 8px, rgba(255, 255, 255, 0.14) 1.25px, transparent 1.75px),
		radial-gradient(circle at 20px 8px, rgba(231, 241, 248, 0.16) 1.25px, transparent 1.75px),
		radial-gradient(circle at 36px 8px, rgba(233, 54, 121, 0.22) 1.25px, transparent 1.75px),
		radial-gradient(circle at 52px 8px, rgba(255, 255, 255, 0.1) 1.25px, transparent 1.75px);
	background-size: 64px 16px;
	color: var(--wp--preset--color--base);
}

@media (min-width: 1080px) {
	.lcs-mosaique__pave.lcs-mosaique__pave {
		grid-column: span 2;
		grid-row: span 2;
		padding: var(--wp--preset--spacing--xxl);
	}
}

.lcs-mosaique__pave .lcs-surtitre {
	color: var(--wp--preset--color--primaire-clair);
}

/*
 * Le titre ne prend PAS la classe de taille du coeur : les classes de preset
 * portent un !important et le geant, cale pour un hero pleine largeur, deborde
 * d un pave de deux colonnes sur cinq. Le clamp le rend au rail disponible.
 */
.lcs-mosaique__titre.lcs-mosaique__titre {
	margin-block: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
	line-height: 1.08;
	color: var(--wp--preset--color--base);
}

.lcs-mosaique__chapo.lcs-mosaique__chapo {
	margin-block: 0 var(--wp--preset--spacing--xl);
	color: var(--wp--preset--color--primaire-clair);
}

/*
 * La tuile : l image en position absolue remplit le cadre, son voile est pose
 * par le ::after de la FIGURE, qui peint donc au-dessus d elle. Le nom est un
 * paragraphe absolu qui couvre toute la tuile et s aligne en bas : c est ce qui
 * permet a son unique lien de rendre la tuile entiere cliquable par un ::after
 * en inset 0, sans jamais recouvrir un second lien (piege 82).
 */
.lcs-mosaique__tuile {
	position: relative;
	overflow: hidden;
	min-block-size: 170px;
}

@media (min-width: 720px) {
	.lcs-mosaique__tuile {
		min-block-size: 220px;
	}
}

.lcs-mosaique__image.lcs-mosaique__image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.lcs-mosaique__image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 420ms ease;
}

.lcs-mosaique__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(31, 42, 51, 0.92) 0%, rgba(31, 42, 51, 0.72) 38%, rgba(31, 42, 51, 0.3) 100%);
}

.lcs-mosaique__nom.lcs-mosaique__nom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	margin: 0;
	padding: var(--wp--preset--spacing--m);
}

.lcs-mosaique__nom a {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1.15;
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.lcs-mosaique__nom a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Arete magenta au survol, sans pointer-events pour ne pas voler le clic. */
.lcs-mosaique__tuile::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 6px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 320ms ease;
	pointer-events: none;
}

.lcs-mosaique__tuile:hover::after,
.lcs-mosaique__tuile:focus-within::after {
	transform: scaleX(1);
}

.lcs-mosaique__tuile:hover .lcs-mosaique__image img,
.lcs-mosaique__tuile:focus-within .lcs-mosaique__image img {
	transform: scale(1.05);
}

@media (hover: none) {
	.lcs-mosaique__tuile:hover .lcs-mosaique__image img {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lcs-mosaique__image img,
	.lcs-mosaique__tuile::after {
		transition: none;
	}
}

/*
 * Entree du hero : le pave se pose ligne a ligne, puis les six tuiles se
 * decouvrent du bas vers le haut, une par une. Minuterie de TEMPS et non de
 * defilement, le hero etant deja a l ecran au chargement. Meme parti que le
 * hero du pilier, qui anime deja ses enfants.
 */
@media (prefers-reduced-motion: no-preference) {
	.lcs-mosaique__pave > * {
		animation: lcs-apparition 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.lcs-mosaique__pave > :nth-child(2) {
		animation-delay: 90ms;
	}

	.lcs-mosaique__pave > :nth-child(3) {
		animation-delay: 180ms;
	}

	.lcs-mosaique__pave > :nth-child(4) {
		animation-delay: 270ms;
	}

	.lcs-mosaique__tuile .lcs-mosaique__image {
		animation: lcs-devoile 620ms cubic-bezier(0.4, 0, 0.2, 1) both;
	}

	.lcs-mosaique__tuile:nth-of-type(2) .lcs-mosaique__image {
		animation-delay: 90ms;
	}

	.lcs-mosaique__tuile:nth-of-type(3) .lcs-mosaique__image {
		animation-delay: 180ms;
	}

	.lcs-mosaique__tuile:nth-of-type(4) .lcs-mosaique__image {
		animation-delay: 270ms;
	}

	.lcs-mosaique__tuile:nth-of-type(5) .lcs-mosaique__image {
		animation-delay: 360ms;
	}

	.lcs-mosaique__tuile:nth-of-type(6) .lcs-mosaique__image {
		animation-delay: 450ms;
	}
}

/*
 * ⛔ Defaut mesure le 12 aout : le pave porte son ardoise en CSS et non par la
 * classe de preset du coeur. La regle de rattrapage du theme, qui vise
 * `.has-contraste-background-color a`, ne s y applique donc pas, et le
 * telephone y tombait a 2,44:1 en bleu primaire. Il passe en bleu pale,
 * 12,76:1, et prend l allure d un bouton fantome pour faire paire avec le
 * bouton de devis.
 *
 * Lecon : toute surface sombre posee A LA MAIN doit rejouer les rattrapages que
 * le coeur reserve a ses classes de preset.
 */
.lcs-mosaique__pave .lcs-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--s);
}

.lcs-mosaique__pave .lcs-coordonnees__telephone {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 56px;
	padding-inline: var(--wp--preset--spacing--l);
	border: 1px solid var(--wp--preset--color--primaire-clair);
	border-radius: 5px;
	color: var(--wp--preset--color--primaire-clair);
	text-decoration: none;
}

/* --------------------------------------------------------- Bande de reassurance */

/*
 * Refonte de la bande de preuves chiffrees de l accueil, demandee le 12 aout.
 * Elle prolonge le hero par la famille de titres et par l arete magenta, mais
 * elle s en DISTINGUE sur deux plans, a la demande du client :
 *
 * - la teinte : contraste-doux #2C3B47 contre contraste #1F2A33 pour le pave
 *   du hero, soit un degre de clarte au-dessus, pose par la classe de preset du
 *   coeur dans le balisage et non ici, ces classes portant un !important ;
 * - la texture : le motif de pointilles du nuancier reste au hero seul, la
 *   bande est un aplat franc.
 *
 * Sans cette distinction, le pave et la bande se touchaient en portant la meme
 * ardoise : deux fonds identiques a la suite, ce que la regle de fond du 9 aout
 * interdit.
 *
 * Quatre blocs JOINTIFS separes par un filet clair, sans rayon ni ombre : le
 * cliche de la carte qui flotte reste proscrit. Chaque bloc porte un
 * pictogramme dessine au trait, son intitule et sa preuve.
 */

.lcs-reassurance__grille.lcs-reassurance__grille {
	box-sizing: border-box;
	margin-block-start: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.lcs-reassurance__grille.lcs-reassurance__grille > * {
	margin-block: 0;
}

@media (min-width: 720px) {
	.lcs-reassurance__grille.lcs-reassurance__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.lcs-reassurance__grille.lcs-reassurance__grille {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * ⛔ Defaut mesure le 12 aout : avec un retrait uniforme, le premier bloc
 * rendait son intitule a 144,4 px alors que l axe du site vaut 112,5 a 1440.
 * Le retrait interieur ne doit JAMAIS s appliquer du cote du rail. Le bloc de
 * tete perd donc son retrait a gauche, celui de queue a droite, et les
 * gouttieres interieures restent doublees, 32 plus 32.
 */
.lcs-reassurance__bloc {
	position: relative;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--l) 0;
	border-block-start: 1px solid rgba(231, 241, 248, 0.24);
}

/* Arete magenta qui se trace sous chaque bloc, sans voler le pointeur. */
.lcs-reassurance__bloc::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: var(--wp--preset--spacing--m);
	block-size: 6px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

@media (min-width: 720px) {
	.lcs-reassurance__bloc {
		padding-inline: var(--wp--preset--spacing--l);
		border-block-start: 0;
		border-inline-start: 1px solid rgba(231, 241, 248, 0.24);
	}

	.lcs-reassurance__bloc::after {
		inset-inline: var(--wp--preset--spacing--l);
	}

	.lcs-reassurance__bloc:nth-child(odd) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.lcs-reassurance__bloc:nth-child(odd)::after {
		inset-inline-start: 0;
	}

	.lcs-reassurance__bloc:nth-child(even) {
		padding-inline-end: 0;
	}

	.lcs-reassurance__bloc:nth-child(even)::after {
		inset-inline-end: 0;
	}
}

@media (min-width: 1080px) {
	.lcs-reassurance__bloc,
	.lcs-reassurance__bloc:nth-child(odd),
	.lcs-reassurance__bloc:nth-child(even) {
		padding-inline: var(--wp--preset--spacing--l);
		border-inline-start: 1px solid rgba(231, 241, 248, 0.24);
	}

	.lcs-reassurance__bloc::after,
	.lcs-reassurance__bloc:nth-child(odd)::after,
	.lcs-reassurance__bloc:nth-child(even)::after {
		inset-inline: var(--wp--preset--spacing--l);
	}

	.lcs-reassurance__bloc:first-child {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.lcs-reassurance__bloc:first-child::after {
		inset-inline-start: 0;
	}

	.lcs-reassurance__bloc:last-child {
		padding-inline-end: 0;
	}

	.lcs-reassurance__bloc:last-child::after {
		inset-inline-end: 0;
	}
}

.lcs-reassurance__picto.lcs-reassurance__picto {
	margin-block: 0 var(--wp--preset--spacing--m);
	line-height: 0;
	color: var(--wp--preset--color--primaire-clair);
}

.lcs-reassurance__titre.lcs-reassurance__titre {
	margin-block: 0 var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1.15;
	color: var(--wp--preset--color--base);
}

.lcs-reassurance__preuve.lcs-reassurance__preuve {
	margin-block: 0 var(--wp--preset--spacing--xl);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
	color: var(--wp--preset--color--primaire-clair);
}

.lcs-reassurance__note.lcs-reassurance__note {
	margin-block-start: var(--wp--preset--spacing--l);
	color: var(--wp--preset--color--primaire-clair);
}

/*
 * Les pictogrammes se TRACENT a l entree de la bande. L astuce qui rend cela
 * possible sans connaitre la longueur reelle de chaque trace : l attribut
 * pathLength="1" normalise chaque chemin, si bien qu un stroke-dasharray de 1
 * et un stroke-dashoffset de 1 vers 0 dessinent n importe quelle forme.
 *
 * Le stroke-dasharray ne vit QUE sous la double garde : sans le support des
 * minuteries de defilement, aucun tiret n est pose et le pictogramme est plein
 * des le chargement. Zero etat casse en repli.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes lcs-trace-picto {
		from {
			stroke-dashoffset: 1;
		}

		to {
			stroke-dashoffset: 0;
		}
	}

	@keyframes lcs-arete-trace {
		from {
			transform: scaleX(0);
		}

		to {
			transform: scaleX(1);
		}
	}

	@supports (animation-timeline: view()) {
		.lcs-reassurance__grille {
			view-timeline-name: --lcs-reassurance;
			view-timeline-axis: block;
		}

		.lcs-reassurance__picto :is(path, rect, circle) {
			stroke-dasharray: 1;
			animation: lcs-trace-picto linear both;
			animation-timeline: --lcs-reassurance;
			animation-range: entry 15% entry 65%;
		}

		.lcs-reassurance__bloc::after {
			animation: lcs-arete-trace linear both;
			animation-timeline: --lcs-reassurance;
			animation-range: entry 30% entry 75%;
		}

		.lcs-reassurance__bloc:nth-child(2) .lcs-reassurance__picto :is(path, rect, circle),
		.lcs-reassurance__bloc:nth-child(2)::after {
			animation-delay: 0s;
			animation-range: entry 22% entry 72%;
		}

		.lcs-reassurance__bloc:nth-child(3) .lcs-reassurance__picto :is(path, rect, circle),
		.lcs-reassurance__bloc:nth-child(3)::after {
			animation-range: entry 29% entry 79%;
		}

		.lcs-reassurance__bloc:nth-child(4) .lcs-reassurance__picto :is(path, rect, circle),
		.lcs-reassurance__bloc:nth-child(4)::after {
			animation-range: entry 36% entry 86%;
		}
	}
}

/* ------------------------------------------------------------- Prestations */

/*
 * Section des six prestations de l accueil. Elle vient APRES deux bandes
 * sombres, le pave du hero et la reassurance : elle est donc claire, sinon la
 * page ouvrirait sur trois aplats sombres a la suite.
 *
 * Elle ne rejoue PAS la mosaique du hero, qui presente deja les six metiers en
 * tuiles : ici une seule grande photographie tient la colonne de gauche et les
 * six prestations se lisent en liste editoriale a droite, separees par des
 * filets. Deux fois six portes sur la meme page, mais jamais le meme geste.
 */
.lcs-prestations.lcs-prestations {
	box-sizing: border-box;
	margin-block-start: var(--wp--preset--spacing--xl);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--l);
}

.lcs-prestations.lcs-prestations > * {
	margin-block: 0;
}

@media (min-width: 1080px) {
	.lcs-prestations.lcs-prestations {
		grid-template-columns: 42% minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xxl);
	}
}

/*
 * La hauteur de la rangee est commandee par la LISTE : la photographie est
 * absolue dans son cadre et se contente de le remplir. Aucun aspect-ratio,
 * donc rien qui puisse recalculer la largeur (piege 116).
 */
.lcs-prestations__image.lcs-prestations__image {
	position: relative;
	overflow: hidden;
	min-block-size: 280px;
	margin: 0;
}

.lcs-prestations__image img {
	display: block;
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 52%;
}

ul.lcs-prestations__liste {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding-inline: 0;
}

ul.lcs-prestations__liste > li {
	position: relative;
	box-sizing: border-box;
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
	line-height: 1.55;
	color: var(--wp--preset--color--contraste-doux);
}

ul.lcs-prestations__liste > li:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

ul.lcs-prestations__liste > li strong {
	display: block;
	margin-block-end: var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1.2;
	color: var(--wp--preset--color--contraste);
}

/* Arete magenta qui se trace sous chaque prestation. */
ul.lcs-prestations__liste > li::after {
	content: "";
	position: absolute;
	inset-inline: 0 auto;
	inset-block-end: var(--wp--preset--spacing--s);
	inline-size: 56px;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/*
 * L appel a l action unique de la section. Les 48 px d air du CDC 3.6 sont
 * portes ici, la marge du coeur etant remise a zero par la grille au-dessus.
 */
.lcs-prestations-action.lcs-prestations-action {
	margin-block-start: var(--wp--preset--spacing--xl);
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lcs-prestations {
			view-timeline-name: --lcs-prestations;
			view-timeline-axis: block;
		}

		.lcs-prestations__image img {
			animation: lcs-scene-derive linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}

		ul.lcs-prestations__liste > li {
			animation: lcs-couche linear both;
			animation-timeline: --lcs-prestations;
			animation-range: entry 10% entry 50%;
		}

		ul.lcs-prestations__liste > li::after {
			animation: lcs-arete-trace linear both;
			animation-timeline: --lcs-prestations;
			animation-range: entry 20% entry 60%;
		}

		ul.lcs-prestations__liste > li:nth-child(2),
		ul.lcs-prestations__liste > li:nth-child(2)::after {
			animation-range: entry 16% entry 56%;
		}

		ul.lcs-prestations__liste > li:nth-child(3),
		ul.lcs-prestations__liste > li:nth-child(3)::after {
			animation-range: entry 22% entry 62%;
		}

		ul.lcs-prestations__liste > li:nth-child(4),
		ul.lcs-prestations__liste > li:nth-child(4)::after {
			animation-range: entry 28% entry 68%;
		}

		ul.lcs-prestations__liste > li:nth-child(5),
		ul.lcs-prestations__liste > li:nth-child(5)::after {
			animation-range: entry 34% entry 74%;
		}

		ul.lcs-prestations__liste > li:nth-child(6),
		ul.lcs-prestations__liste > li:nth-child(6)::after {
			animation-range: entry 40% entry 80%;
		}
	}
}

/* --------------------------------- Deroulement d un chantier, quatre volets */

/*
 * Refonte du 12 aout, parti A retenu par le client : la section des quatre
 * etapes quitte le bleu pale pour un mur d ardoise et chaque etape recoit sa
 * photographie. Le langage est celui du hero en mosaique, valide le meme jour :
 * blocs JOINTIFS sans gouttiere ni rayon ni ombre, motif de nuancier en
 * pointilles sur l ardoise, arete magenta, titres en Source Serif 4 600.
 *
 * L alternance ardoise / contraste-doux ne joue qu HORIZONTALEMENT : deux
 * volets superposes sont toujours separes par une photographie, si bien
 * qu aucune paire de surfaces identiques ne se touche, quel que soit le nombre
 * de colonnes. Piege 104, ou une alternance juste sur deux colonnes fondait
 * deux blocs clairs en un seul pave sur une colonne.
 */
.lcs-deroulement.lcs-deroulement {
	background-image:
		radial-gradient(circle at 4px 8px, rgba(255, 255, 255, 0.14) 1.25px, transparent 1.75px),
		radial-gradient(circle at 20px 8px, rgba(231, 241, 248, 0.16) 1.25px, transparent 1.75px),
		radial-gradient(circle at 36px 8px, rgba(233, 54, 121, 0.22) 1.25px, transparent 1.75px),
		radial-gradient(circle at 52px 8px, rgba(255, 255, 255, 0.1) 1.25px, transparent 1.75px);
	background-size: 64px 16px;
}

/*
 * Le nombre de colonnes est DECLARE par palier, jamais laisse a auto-fit :
 * piege 77, qui a rendu 2 + 1 puis 4 + 1 sur trois composants de ce projet.
 * La marge haute s ecrit avec la classe DOUBLEE, sans quoi la regle du coeur
 * :root :where(.is-layout-constrained) > *, qui vaut (0,2,0), la ramene a
 * 24 px sans le moindre signe (piege 41, rencontre trois fois).
 */
.lcs-deroulement__grille.lcs-deroulement__grille {
	counter-reset: lcs-volet;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin-block-start: var(--wp--preset--spacing--xl);
}

.lcs-deroulement__grille.lcs-deroulement__grille > * {
	margin-block: 0;
}

@media (min-width: 720px) {
	.lcs-deroulement__grille.lcs-deroulement__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.lcs-deroulement__grille.lcs-deroulement__grille {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.lcs-deroulement__volet {
	counter-increment: lcs-volet;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	background-color: var(--wp--preset--color--contraste-doux);
}

.lcs-deroulement__volet:nth-child(even) {
	background-color: var(--wp--preset--color--contraste);
}

/*
 * inline-size: 100% explicite sur toute boite a aspect-ratio : le rapport joue
 * dans les DEUX sens et une contrainte de hauteur ferait suivre la largeur,
 * jusqu a sortir du rail (piege 116, 130 px de debordement mesures).
 */
.lcs-deroulement__image.lcs-deroulement__image {
	position: relative;
	overflow: hidden;
	margin: 0;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
}

@media (min-width: 720px) {
	.lcs-deroulement__image.lcs-deroulement__image {
		aspect-ratio: 4 / 3;
	}
}

.lcs-deroulement__image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 420ms ease;
}

/*
 * Arete magenta a la jonction de la photographie et du texte. Elle se TRACE au
 * defilement, donc elle existe aussi sur un ecran tactile ou il n y a pas de
 * survol, et elle s epaissit de 3 a 6 px sous le curseur.
 *
 * Le partage des proprietes n est pas un detail : le defilement commande
 * transform sur l arete et clip-path sur l image, le survol commande
 * block-size sur l arete et transform sur l image. Jamais la meme propriete
 * pour les deux, sinon l animation en fill: both gele le survol (piege 123).
 */
.lcs-deroulement__image::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	transform-origin: left;
	transition: block-size 320ms ease;
}

.lcs-deroulement__volet:hover .lcs-deroulement__image::after {
	block-size: 6px;
}

.lcs-deroulement__volet:hover .lcs-deroulement__image img {
	transform: scale(1.05);
}

@media (hover: none) {
	.lcs-deroulement__volet:hover .lcs-deroulement__image img {
		transform: none;
	}

	.lcs-deroulement__volet:hover .lcs-deroulement__image::after {
		block-size: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lcs-deroulement__image img,
	.lcs-deroulement__image::after {
		transition: none;
	}
}

/*
 * Retrait interieur UNIFORME sur les quatre volets, demande du client le
 * 12 aout au soir : le pave etant une surface pleine et visible, un texte colle
 * a son bord gauche se lit comme un defaut et non comme un axe.
 *
 * Ecart assume au piege 129 : l axe unique n est plus porte par le TEXTE du
 * volet de tete mais par le BORD de son pave et par sa photographie, qui
 * restent l un et l autre sur le rail. Le numero du premier volet vit donc a
 * 144,4 px a 1440 quand le H2 est a 112,4.
 */
.lcs-deroulement__texte.lcs-deroulement__texte {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l);
	padding-inline: var(--wp--preset--spacing--m);
}

.lcs-deroulement__texte.lcs-deroulement__texte > * {
	margin-block: 0;
}

@media (min-width: 720px) {
	.lcs-deroulement__texte.lcs-deroulement__texte {
		padding-inline: var(--wp--preset--spacing--l);
	}
}

/*
 * Le numero passe au bleu clair a la demande du client : le bleu pale du
 * nuancier se lisait blanc a cote du titre. La teinte est un MELANGE de deux
 * jetons de la palette, 60 pour cent de primaire-clair et 40 de primaire, soit
 * #8EBAD6. Le primaire pur, lui, tombe a 2,4:1 sur l ardoise (piege 23).
 * color-mix se serialise en color(srgb ...) : toute sonde de contraste doit le
 * lire sur l echelle 0 a 1 puis multiplier par 255 (piege 21).
 */
.lcs-deroulement__texte::before {
	content: counter(lcs-volet, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1;
	color: color-mix(in srgb, var(--wp--preset--color--primaire-clair) 60%, var(--wp--preset--color--primaire));
	font-variant-numeric: tabular-nums;
	margin-block-end: var(--wp--preset--spacing--xs);
}

.lcs-deroulement__titre.lcs-deroulement__titre {
	margin-block: 0 var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--moyen);
	line-height: 1.25;
	color: var(--wp--preset--color--base);
}

.lcs-deroulement__texte p {
	color: var(--wp--preset--color--primaire-clair);
}

/*
 * Entree au defilement, decalee d un volet a l autre. La photographie se
 * decouvre du bas vers le haut par clip-path, l arete se trace par scaleX. Les
 * deux images-cles existent deja dans cette feuille, elles servent au duo de la
 * preparation et a la bande de reassurance. Double garde no-preference puis
 * @supports : sans prise en charge, tout reste visible et l arete est pleine
 * des le chargement, zero etat masque en repli.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lcs-deroulement__grille {
			view-timeline-name: --lcs-deroulement;
			view-timeline-axis: block;
		}

		.lcs-deroulement__image img {
			animation: lcs-devoile linear both;
			animation-timeline: --lcs-deroulement;
			animation-range: entry 12% entry 62%;
		}

		.lcs-deroulement__image::after {
			animation: lcs-arete-trace linear both;
			animation-timeline: --lcs-deroulement;
			animation-range: entry 30% entry 80%;
		}

		.lcs-deroulement__volet:nth-child(2) .lcs-deroulement__image img {
			animation-range: entry 19% entry 69%;
		}

		.lcs-deroulement__volet:nth-child(2) .lcs-deroulement__image::after {
			animation-range: entry 37% entry 87%;
		}

		.lcs-deroulement__volet:nth-child(3) .lcs-deroulement__image img {
			animation-range: entry 26% entry 76%;
		}

		.lcs-deroulement__volet:nth-child(3) .lcs-deroulement__image::after {
			animation-range: entry 44% entry 94%;
		}

		.lcs-deroulement__volet:nth-child(4) .lcs-deroulement__image img {
			animation-range: entry 33% entry 83%;
		}

		.lcs-deroulement__volet:nth-child(4) .lcs-deroulement__image::after {
			animation-range: entry 51% cover 1%;
		}
	}
}

/* ------------------------------------------------- Avis clients, trois volets */

/*
 * Section des avis, 12 aout au soir, parti A retenu par le client. Elle vit
 * entre le mur d ardoise du deroulement et la bande bleu pale de l appel a
 * l action : son fond ne pouvait donc etre ni l un ni l autre. Sable pour la
 * section, plaque blanche pour les avis, filet de bordure entre eux.
 *
 * TROIS avis, donc jamais DEUX colonnes : trois elements sur deux colonnes
 * laissent un orphelin et un trou (piege 77, cinquieme occurrence sur ce
 * projet). Une colonne sous 1080 px, trois au-dela, rien entre les deux. Le
 * nombre de colonnes est declare par une classe posee par le rendu, qui compte
 * les avis reellement publies.
 */
.lcs-temoignages.lcs-temoignages {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin-block-start: var(--wp--preset--spacing--xl);
}

@media (min-width: 1080px) {
	.lcs-temoignages--2.lcs-temoignages--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lcs-temoignages--3.lcs-temoignages--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * box-sizing obligatoire : le composant porte un padding ET une bordure, et
 * une plaque de 400 px sortirait du rail de 1 px par colonne sans lui
 * (piege 76). Retrait UNIFORME sur les trois volets, y compris celui de tete :
 * la plaque est une surface pleine et visible, un texte colle a son bord se lit
 * comme un defaut, le client l a signale sur le deroulement une heure plus tot.
 */
.lcs-temoignage {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--wp--preset--spacing--l);
	background-color: var(--wp--preset--color--base);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

.lcs-temoignage:first-child {
	border-block-start: 0;
}

/*
 * En mobile le retrait descend a 24 px, comme celui des volets du deroulement
 * juste au-dessus : deux sections voisines qui n ont pas le meme retrait
 * interieur, cela se voit sur un rail de 343 px.
 */
@media (max-width: 719.98px) {
	.lcs-temoignage {
		padding: var(--wp--preset--spacing--m);
	}
}

@media (min-width: 1080px) {
	.lcs-temoignage {
		border-block-start: 0;
		border-inline-start: 1px solid var(--wp--preset--color--bordure);
	}

	.lcs-temoignage:first-child {
		border-inline-start: 0;
	}
}

/*
 * Arete magenta a gauche de chaque avis. Elle DESCEND au defilement et
 * s epaissit sous le curseur : le defilement commande transform, le survol
 * commande inline-size, jamais la meme propriete pour les deux, sinon
 * l animation en fill: both gele le survol (piege 123).
 *
 * Aucun transform dans la regle de base : sans prise en charge des minuteries
 * de defilement, l arete est pleine des le chargement. Zero etat masque en
 * repli.
 */
.lcs-temoignage::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 4px;
	background: var(--wp--preset--color--accent);
	transform-origin: top;
	transition: inline-size 320ms ease;
}

.lcs-temoignage:hover::before {
	inline-size: 6px;
}

.lcs-temoignage__note {
	display: flex;
	gap: 4px;
	margin: 0 0 var(--wp--preset--spacing--m);
}

.lcs-temoignage__etoile {
	display: block;
	color: var(--wp--preset--color--bordure);
}

.lcs-temoignage__etoile--pleine {
	color: var(--wp--preset--color--primaire);
}

/*
 * Le verbatim occupe la place restante pour que les noms s alignent d une
 * colonne a l autre, quelle que soit la longueur des avis.
 */
.lcs-temoignage__verbatim {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-temoignage__verbatim p {
	margin-block: 0;
}

.lcs-temoignage__verbatim p + p {
	margin-block-start: var(--wp--preset--spacing--m);
}

/*
 * Le guillemet ouvrant est un ornement, pas un signe de ponctuation : il est
 * pose par le CSS et non dans le texte, si bien qu il ne se retrouve ni dans le
 * flux de lecture d un lecteur d ecran, ni dans le texte copie. Il s allume au
 * survol, second signal du meme geste que l arete.
 */
.lcs-temoignage__verbatim::before {
	content: "\00AB";
	display: block;
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: 44px;
	line-height: 0.8;
	color: color-mix(in srgb, var(--wp--preset--color--primaire) 30%, transparent);
	transition: color 320ms ease;
	margin-block-end: var(--wp--preset--spacing--xs);
}

.lcs-temoignage:hover .lcs-temoignage__verbatim::before {
	color: color-mix(in srgb, var(--wp--preset--color--primaire) 60%, transparent);
}

.lcs-temoignage__auteur {
	margin-block-start: var(--wp--preset--spacing--m);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--moyen);
	line-height: 1.3;
	color: var(--wp--preset--color--contraste);
}

.lcs-temoignage__commune {
	display: block;
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-temoignage__source {
	margin-block: var(--wp--preset--spacing--xs) 0;
	font-size: var(--wp--preset--font-size--petit);
}

.lcs-temoignage__source a {
	color: var(--wp--preset--color--primaire-sombre);
}

@media (hover: none) {
	.lcs-temoignage:hover::before {
		inline-size: 4px;
	}

	.lcs-temoignage:hover .lcs-temoignage__verbatim::before {
		color: color-mix(in srgb, var(--wp--preset--color--primaire) 30%, transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lcs-temoignage::before,
	.lcs-temoignage__verbatim::before {
		transition: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes lcs-arete-descend {
		from {
			transform: scaleY(0);
		}

		to {
			transform: scaleY(1);
		}
	}

	@supports (animation-timeline: view()) {
		.lcs-temoignages {
			view-timeline-name: --lcs-temoignages;
			view-timeline-axis: block;
		}

		.lcs-temoignage::before {
			animation: lcs-arete-descend linear both;
			animation-timeline: --lcs-temoignages;
			animation-range: entry 25% entry 75%;
		}

		.lcs-temoignage:nth-child(2)::before {
			animation-range: entry 32% entry 82%;
		}

		.lcs-temoignage:nth-child(3)::before {
			animation-range: entry 39% entry 89%;
		}
	}
}

/* ------------------------------- Bande d appel a l action, variante territoire */

/*
 * Le discours territorial fait trois fois la longueur de celui de la bande
 * courte, et la colonne de gauche du duo vaut 832 px a 1440 : une ligne y
 * porterait une centaine de signes, bien au-dela de la mesure de lecture du
 * projet. Les paragraphes sont donc capes a cette mesure, le titre non.
 *
 * Un cap par max-inline-size ne recentre rien ici : le piege 80 ne vaut que
 * pour les enfants d une disposition CONTRAINTE, qui portent des marges auto en
 * important. Les enfants d un groupe en disposition par defaut n en ont pas.
 */
.lcs-cta--territoire .lcs-cta__texte p {
	max-inline-size: var(--lcs-lecture);
}

/* --------------------------------------------- Questions frequentes, en groupes */

/*
 * Parti C retenu par le client le 12 aout : les questions sont rangees dans
 * l ordre du chantier, avant, pendant, apres. TROIS groupes, donc jamais deux
 * colonnes : une sous 1080 px, trois au-dela, rien entre les deux.
 *
 * La section passe en bleu pale : elle suit le sable des zones et precede
 * l ardoise du pied, elle ne pouvait etre ni l un ni l autre. Le bleu pale
 * n avait plus d emploi sur l accueil depuis que la bande d appel a l action
 * est redevenue photographique.
 *
 * Les plaques ne sont pas alignees en start : elles s etirent, si bien que les
 * trois groupes forment UNE bande blanche coupee en trois, et non trois cartes
 * qui flottent. Quand une question s ouvre, la bande grandit d un bloc.
 */
.lcs-faq__groupes.lcs-faq__groupes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin-block-start: var(--wp--preset--spacing--xl);
}

.lcs-faq__groupes.lcs-faq__groupes > * {
	margin-block: 0;
}

@media (min-width: 1080px) {
	.lcs-faq__groupes.lcs-faq__groupes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lcs-faq__groupe {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--l);
	background-color: var(--wp--preset--color--base);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

.lcs-faq__groupe:first-child {
	border-block-start: 0;
}

@media (min-width: 1080px) {
	.lcs-faq__groupe {
		border-block-start: 0;
		border-inline-start: 1px solid var(--wp--preset--color--bordure);
	}

	.lcs-faq__groupe:first-child {
		border-inline-start: 0;
	}
}

.lcs-faq__groupe > * {
	margin-block: 0;
}

/*
 * L intitule de groupe n est PAS un niveau de document, c est une etiquette :
 * le passer en h3 ferait sauter l ordre des titres de h2 a h3 puis revenir
 * (piege 130). Il n est pas non plus en capitales : le theme a explicitement
 * retire le text-transform des surtitres au lot 1.
 */
.lcs-faq__intitule.lcs-faq__intitule {
	margin-block-end: var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--wp--preset--color--primaire);
}

.lcs-faq__item.lcs-faq__item {
	margin-block: 0;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--bordure) 45%, transparent);
}

.lcs-faq__item.lcs-faq__item:first-of-type {
	border-block-start: 0;
}

/*
 * La cible tactile est portee par le summary lui-meme : 24 px de retrait haut
 * et bas plus la hauteur du texte, soit 71 px mesures, bien au-dela des 44 px
 * exiges. Le triangle natif est retire des deux facons qui comptent, list-style
 * pour les moteurs modernes et le pseudo-element pour les anciens WebKit.
 */
.lcs-faq__item > summary {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s);
	padding-block: var(--wp--preset--spacing--m);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--corps);
	line-height: 1.35;
	color: var(--wp--preset--color--contraste);
	cursor: pointer;
	list-style: none;
}

.lcs-faq__item > summary::-webkit-details-marker {
	display: none;
}

/*
 * Le signe pivote d un quart de tour a l ouverture : le plus et la croix sont
 * le meme glyphe tourne. Rien d autre ne bouge, la question restant lisible
 * pendant toute la transition.
 */
.lcs-faq__item > summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1;
	color: var(--wp--preset--color--primaire);
	transition: transform 260ms ease;
}

.lcs-faq__item[open] > summary::after {
	transform: rotate(45deg);
}

/*
 * Arete magenta au bord de la plaque, pas au bord du texte : le retrait
 * interieur du groupe est repris en negatif, si bien que l arete tombe sur le
 * rail pour le groupe de tete. Elle parait au survol et RESTE tant que la
 * question est ouverte, ce qui donne au visiteur un repere de sa position.
 */
.lcs-faq__item > summary::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 4px;
	background: var(--wp--preset--color--accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 260ms ease;
}

.lcs-faq__item > summary:hover::before,
.lcs-faq__item > summary:focus-visible::before,
.lcs-faq__item[open] > summary::before {
	transform: scaleY(1);
}

/*
 * Dans un groupe, l arete remonte au bord de la PLAQUE en reprenant le retrait
 * interieur en negatif. Hors groupe, sur les foires aux questions des pages 42
 * et 50 ou les blocs sont enfants directs de la section, elle reste a zero :
 * un retrait negatif l aurait poussee de 32 px hors du rail. Meme composant,
 * deux contextes, une seule exception.
 */
.lcs-faq__groupe .lcs-faq__item > summary::before {
	inset-inline-start: calc(var(--wp--preset--spacing--l) * -1);
}

.lcs-faq__item p {
	margin-block: 0 var(--wp--preset--spacing--m);
	color: var(--wp--preset--color--contraste-doux);
}

@media (prefers-reduced-motion: reduce) {
	.lcs-faq__item > summary::after,
	.lcs-faq__item > summary::before {
		transition: none;
	}
}

/* -------------------------------------- Vitrine des derniers conseils */

/*
 * Les trois derniers articles en page d accueil, rendus par une BOUCLE DE
 * REQUETE du coeur et non par un bloc sur mesure : le contenu suit tout seul
 * quand un article parait, et le client peut changer le nombre depuis
 * l editeur. Dixieme bloc evite.
 *
 * TROIS articles, donc jamais deux colonnes : une sous 1080 px, trois au-dela.
 * La grille d une boucle de requete est gouvernee par les classes du coeur :
 * la classe est DOUBLEE pour reprendre la main sans important.
 *
 * Une seule ancre par carte : la vignette n est pas un lien, la categorie non
 * plus, et le titre porte un ::after en inset 0 qui rend la tuile entiere
 * cliquable. Deux liens dans une carte ainsi rendue seraient inatteignables
 * a la souris (piege 82).
 */
.lcs-vitrine__grille.lcs-vitrine__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	list-style: none;
	padding-inline: 0;
	margin: 0;
}

@media (min-width: 1080px) {
	.lcs-vitrine__grille.lcs-vitrine__grille {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lcs-vitrine__grille > li {
	margin: 0;
	min-inline-size: 0;
}

.lcs-vitrine__carte.lcs-vitrine__carte {
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	block-size: 100%;
	background-color: var(--wp--preset--color--base-alt);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

.lcs-vitrine__grille > li:first-child .lcs-vitrine__carte.lcs-vitrine__carte {
	border-block-start: 0;
}

@media (min-width: 1080px) {
	.lcs-vitrine__carte.lcs-vitrine__carte {
		border-block-start: 0;
		border-inline-start: 1px solid var(--wp--preset--color--bordure);
	}

	.lcs-vitrine__grille > li:first-child .lcs-vitrine__carte.lcs-vitrine__carte {
		border-inline-start: 0;
	}
}

.lcs-vitrine__image.lcs-vitrine__image {
	position: relative;
	overflow: hidden;
	margin: 0;
}

.lcs-vitrine__image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 420ms ease;
}

/*
 * Arete magenta a la jonction de la vignette et du texte, tracee au survol.
 * Sur un ecran tactile, ou il n y a pas de survol, elle est pleine d emblee.
 */
.lcs-vitrine__image::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 4px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 320ms ease;
}

.lcs-vitrine__carte:hover .lcs-vitrine__image::after,
.lcs-vitrine__carte:focus-within .lcs-vitrine__image::after {
	transform: scaleX(1);
}

.lcs-vitrine__carte:hover .lcs-vitrine__image img,
.lcs-vitrine__carte:focus-within .lcs-vitrine__image img {
	transform: scale(1.05);
}

@media (hover: none) {
	.lcs-vitrine__image::after {
		transform: scaleX(1);
	}

	.lcs-vitrine__carte:hover .lcs-vitrine__image img {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lcs-vitrine__image img,
	.lcs-vitrine__image::after {
		transition: none;
	}
}

.lcs-vitrine__texte.lcs-vitrine__texte {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--l);
}

.lcs-vitrine__texte > * {
	margin-block: 0;
}

.lcs-vitrine__date.lcs-vitrine__date {
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-vitrine__titre.lcs-vitrine__titre {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	line-height: 1.25;
}

.lcs-vitrine__titre a {
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.lcs-vitrine__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lcs-vitrine__carte:hover .lcs-vitrine__titre a,
.lcs-vitrine__titre a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*
 * Le chapo occupe la place restante pour que le renvoi de lecture se cale en
 * bas des trois cartes, quelle que soit la longueur des titres.
 */
.lcs-vitrine__chapo.lcs-vitrine__chapo {
	flex: 1;
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-vitrine__chapo p {
	margin-block: 0;
}

/*
 * Le renvoi de lecture n est PAS un lien : la carte entiere en est un, et un
 * second lien au meme endroit serait recouvert par le ::after du titre. C est
 * une etiquette, elle n est donc pas atteignable au clavier et ne compte pas
 * comme une cible.
 */
.lcs-vitrine__renvoi.lcs-vitrine__renvoi {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--primaire-sombre);
	font-weight: 600;
}

.lcs-vitrine__renvoi::after {
	content: "";
	inline-size: 18px;
	block-size: 10px;
	background-color: currentColor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15M11 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
	transition: transform 260ms ease;
}

.lcs-vitrine__carte:hover .lcs-vitrine__renvoi::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.lcs-vitrine__renvoi::after {
		transition: none;
	}
}

/*
 * Hauteur de vignette par palier. Mesure du 12 aout : entre 720 et 1080 px, une
 * seule colonne de 721 px avec une image en 3/2 donnait une carte de 940 px et
 * une section de 2 822 px, la plus haute de la page. La carte passe donc en
 * RANGEE a ce palier, vignette a gauche sur 40 pour cent, texte a droite.
 *
 * Le rapport n est plus pose par l attribut du bloc mais par le CSS : un
 * aspect-ratio ecrit en style en ligne par le coeur ne se reprend qu avec un
 * important, que la regle 5 du projet interdit.
 *
 * inline-size: 100% explicite sur toute boite a aspect-ratio (piege 116).
 */
.lcs-vitrine__image.lcs-vitrine__image {
	aspect-ratio: 16 / 9;
	inline-size: 100%;
}

@media (min-width: 720px) and (max-width: 1079.98px) {
	.lcs-vitrine__carte.lcs-vitrine__carte {
		grid-template-columns: 40% minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
	}

	.lcs-vitrine__image.lcs-vitrine__image {
		aspect-ratio: auto;
		block-size: 100%;
	}
}

@media (min-width: 1080px) {
	.lcs-vitrine__image.lcs-vitrine__image {
		aspect-ratio: 3 / 2;
	}
}

/* ------------------------- Couches et motif de nuancier sur mur d ardoise */

/*
 * Demande du client le 12 aout au soir : la section des empilements prend le
 * fond du hero de l accueil, ardoise et pointilles clairs. Le motif est repris
 * a l identique, SANS le voile radial blanc, qui n a de sens que sur un fond
 * clair : il y estompait les pointilles vers les bords, il les effacerait ici.
 */
.lcs-texture--ardoise.lcs-texture--ardoise {
	background-image:
		radial-gradient(circle at 4px 8px, rgba(255, 255, 255, 0.14) 1.25px, transparent 1.75px),
		radial-gradient(circle at 20px 8px, rgba(231, 241, 248, 0.16) 1.25px, transparent 1.75px),
		radial-gradient(circle at 36px 8px, rgba(233, 54, 121, 0.22) 1.25px, transparent 1.75px),
		radial-gradient(circle at 52px 8px, rgba(255, 255, 255, 0.1) 1.25px, transparent 1.75px);
	background-size: 64px 16px;
	background-repeat: repeat;
}

.lcs-texture--ardoise > p {
	color: var(--wp--preset--color--primaire-clair);
}

/*
 * La pile encode la POSITION dans l empilement, jamais la nature de la couche :
 * sur fond clair, le support etait l ardoise elle-meme. Sur un mur d ardoise il
 * y disparaitrait. Il passe donc en contraste-doux souligne d un filet clair,
 * ce qui le laisse LE PLUS SOMBRE de la pile : la narration du metier tient,
 * du support en bas a la finition en haut.
 */
.lcs-section--sombre ul.lcs-couches__pile > li:first-child {
	background: var(--wp--preset--color--contraste-doux);
	color: var(--wp--preset--color--primaire-clair);
	border-color: color-mix(in srgb, var(--wp--preset--color--primaire-clair) 30%, transparent);
}

.lcs-section--sombre .lcs-couches__legende {
	color: var(--wp--preset--color--primaire-clair);
}

/*
 * Le filet entre deux supports : la bordure pleine tombait comme une barre sur
 * l ardoise. Un melange a 22 pour cent de bleu pale la rend au meme role qu un
 * filet sur fond clair, celui de separer sans decouper.
 */
.lcs-section--sombre .lcs-couches__rangee {
	border-block-start-color: color-mix(in srgb, var(--wp--preset--color--primaire-clair) 22%, transparent);
}

.lcs-section--sombre .lcs-couches__texte p {
	color: var(--wp--preset--color--primaire-clair);
}

.lcs-section--sombre .lcs-couches__titre {
	color: var(--wp--preset--color--base);
}

/* ------------------------------- Foire aux questions en duo, pages de silo */

/*
 * Parti B retenu par le client le 12 aout pour la page 50 : le titre tient la
 * colonne de gauche, l accordeon occupe la droite. Deux raisons mesurees.
 *
 * Le signe revenait a 935 px de sa question : le bloc occupait le rail de
 * 1 200 pendant que la reponse restait bridee a 760 par la mesure de lecture.
 * Dans une colonne de 836, il tombe a portee du titre.
 *
 * Et la colonne de gauche OCCUPE le vide que la mesure de lecture laissait a
 * droite, defaut signale deux fois par le client sur ce projet.
 */
.lcs-faq__duo.lcs-faq__duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--xl);
	margin-block-start: 0;
}

@media (min-width: 1080px) {
	.lcs-faq__duo.lcs-faq__duo {
		grid-template-columns: 300px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xxl);
		align-items: start;
	}
}

.lcs-faq__duo.lcs-faq__duo > * {
	margin-block: 0;
}

.lcs-faq__intro > * {
	margin-block: 0;
}

.lcs-faq__intro > * + * {
	margin-block-start: var(--wp--preset--spacing--m);
}

.lcs-faq__intro p {
	color: var(--wp--preset--color--contraste-doux);
}

/* Dans le duo, la plaque n a pas de voisine : aucun filet a poser. */
.lcs-faq__duo .lcs-faq__groupe {
	border: 0;
}

/* ------------------------------------------ Plaque de verre, parti A du 13 aout */

/*
 * Le client a demande du liquid glass le 13 aout et retenu le parti A : le
 * verre n arrive que la ou l oeil s arrete, trois surfaces par page. Le CDC 3.5
 * proscrit le backdrop-filter ; c est la SECONDE derogation, apres la carte du
 * hero du 9 aout, et elle est bornee par construction.
 *
 * Deux gardes de fond, tenues par ce fichier :
 *
 * 1. La plaque est toujours une FEUILLE de l arbre, jamais une section. Un
 *    filter chez un ancetre ferait de lui le bloc conteneur de tout descendant
 *    fixed (regle 5 du CLAUDE.md) : la fenetre de devis et la barre mobile
 *    survivent parce que rien de fixe ne vit sous une plaque.
 * 2. Le fond opaque est declare AVANT le fond translucide : sans color-mix la
 *    plaque reste lisible, et sans backdrop-filter elle reste une plaque.
 *
 * Contraste calcule a la main, la sonde ne composant ni la photographie ni le
 * voile (pieges 119 et 146). Chaine : photographie, voile ardoise a 70 pour
 * cent, plaque a 42 pour cent d ardoise, texte. Sur photographie BLANCHE pure,
 * le pire cas, le fond effectif vaut rgb(70, 79, 86) : blanc 8,35:1 et
 * primaire-clair 7,29:1. Sur photographie noire pure, rgb(26, 35, 42) :
 * blanc 15,99:1. Les deux bouts passent AA a toutes les tailles.
 */
.lcs-verre.lcs-verre {
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	max-inline-size: 100%;
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l);
	border-radius: 5px;
	background-color: var(--wp--preset--color--contraste);
	background-color: color-mix(in srgb, var(--wp--preset--color--contraste) 42%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	backdrop-filter: blur(16px) saturate(1.15);
	margin-block: 0;
}

/*
 * Piege 38 cas 1 : la remise a zero des marges d un composant ecrase l air de
 * 48 px du bouton. Les boutons sont exclus, la regle generale reprend la main.
 */
.lcs-verre.lcs-verre > * {
	margin-block: 0;
}

.lcs-verre.lcs-verre > * + *:not(.wp-block-buttons) {
	margin-block-start: var(--wp--preset--spacing--s);
}

/*
 * Piege 128 : une surface sombre posee A LA MAIN ne recoit pas les rattrapages
 * que le coeur reserve a ses classes de preset. Le lien du telephone y rendrait
 * 2,44:1. Le bouton, lui, garde son fond primaire et son texte blanc.
 */
.lcs-verre.lcs-verre a:not(.wp-element-button) {
	color: var(--wp--preset--color--primaire-clair);
}

.lcs-verre p {
	color: var(--wp--preset--color--base);
}

.lcs-verre .lcs-verre__intitule {
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primaire-clair);
}

/* L arete magenta, en large et non en lisere : le vocabulaire du 11 aout. */
.lcs-verre.lcs-verre::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 56px;
	block-size: 4px;
	background-color: var(--wp--preset--color--accent);
}

/*
 * Le reflet. Il est peint par un degrade et non par un filtre : une bande
 * claire de 10 pour cent de large qui traverse la plaque. Sans animation il
 * reste hors cadre, donc invisible : zero etat casse en repli.
 */
.lcs-verre.lcs-verre::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(115deg, transparent 38%, var(--wp--preset--color--base) 48%, transparent 58%);
	background-image: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent) 48%, transparent 58%);
	background-size: 260% 100%;
	background-position: 130% 0;
	background-repeat: no-repeat;
}

.lcs-verre__liste {
	list-style: none;
	padding-inline: 0;
	margin-block: 0;
	display: grid;
	gap: var(--wp--preset--spacing--s);
}

.lcs-verre__liste > li {
	position: relative;
	margin-block: 0;
	padding-inline-start: 22px;
	line-height: 1.5;
	color: var(--wp--preset--color--base);
}

.lcs-verre__liste > li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.6em;
	inset-inline-start: 0;
	inline-size: 10px;
	block-size: 2px;
	background-color: var(--wp--preset--color--accent);
}

/*
 * Dans le hero, la plaque prend la place des pastilles de reassurance du modele
 * du 11 aout : meme role, meme rang dans la colonne, mais elle porte la norme
 * de la page au lieu de trois etiquettes. Elle reste le cinquieme enfant de
 * .lcs-hero-texte, donc les delais d apparition deja poses la couvrent.
 *
 * Piege 141 : la plaque est une surface pleine et visible, son retrait est donc
 * UNIFORME et c est le bord du bloc qui porte l axe unique, pas son texte.
 */
.lcs-verre--hero.lcs-verre--hero {
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l) var(--wp--preset--spacing--l);
}

/*
 * Piege 38 cas 2 et piege 100 : dans le hero, chaque enfant tient 48 px de son
 * voisin, soit la gouttiere de 24 px de la grille PLUS 24 px de marge posee par
 * le coeur. La remise a zero de .lcs-verre, a specificite egale et chargee
 * ensuite, avait ramene ce seul ecart a 24. On ne pose que le complement.
 */
.lcs-hero-texte > .lcs-verre.lcs-verre {
	margin-block-start: var(--wp--preset--spacing--m);
}

/*
 * Rancon mesuree du parti A : la plaque du hero fait 445 px au palier 375 et
 * porte le hero de 731 a 1 116 px, la ou la page 50 tient en 764. En mobile,
 * elle se resserre : retrait reduit, liste en petit corps, interligne tenu.
 * Aucun contenu n est masque, le SEO et le lecteur d ecran voient tout.
 */
@media (max-width: 719.98px) {
	.lcs-verre--hero.lcs-verre--hero {
		padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--m);
	}

	.lcs-verre--hero .lcs-verre__liste {
		gap: var(--wp--preset--spacing--xs);
	}

	.lcs-verre--hero .lcs-verre__liste > li {
		font-size: var(--wp--preset--font-size--petit);
	}
}

/*
 * Variante reglementaire : elle occupe la colonne de droite d une bande
 * photographique, a la place de l encart blanc. Le telephone et le bouton y
 * vivent, d ou la largeur pleine du bouton, reprise de .lcs-cta__encart.
 */
.lcs-verre--reglement.lcs-verre--reglement {
	padding: var(--wp--preset--spacing--l);
}

.lcs-verre--reglement .lcs-coordonnees__telephone {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-size: var(--wp--preset--font-size--grand);
	font-weight: 600;
	text-decoration: none;
}

.lcs-verre--reglement .wp-block-button,
.lcs-verre--reglement .wp-block-button__link {
	inline-size: 100%;
	text-align: center;
}

/*
 * Mouvement. Double garde obligatoire, et rien d autre que ce que le CDC 3.7
 * autorise : une arete qui se trace, un reflet qui traverse une fois.
 * Le reflet est anime sur background-position, jamais sur un filter.
 * Piege 123 verifie : .lcs-verre ne porte aucun survol, aucune propriete
 * animee ici n est disputee.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lcs-verre.lcs-verre::before {
			animation: lcs-filet-trace linear both;
			animation-timeline: view();
			animation-range: entry 25% entry 70%;
		}

		.lcs-verre.lcs-verre::after {
			animation: lcs-verre-reflet linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 40%;
		}
	}
}

@keyframes lcs-verre-reflet {
	from {
		background-position: 130% 0;
	}

	to {
		background-position: -40% 0;
	}
}

/*
 * L echelle de la scene comptait trois niveaux sur la page 50 ; les classes
 * d impermeabilite et les niveaux de finition en comptent QUATRE. Sans cette
 * plage, le quatrieme heritait de celle du premier et se levait trop tot.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lcs-scene__niveaux > li:nth-child(4) {
			animation-range: entry 50% entry 90%;
		}
	}
}

/* ================================================ Page salle de bain, 13 aout */

/*
 * Cahier des charges client du 13 aout : glassmorphism, halos de lumiere,
 * sections qui se chevauchent, parallaxe, voile qui se leve au survol.
 *
 * Trois ecarts assumes au cahier des charges, tous dans le sens de la regle 7 :
 *
 * 1. GSAP et AOS sont remplaces par animation-timeline: view(). Le CDC client
 *    demandait pourtant LCP sous 2,5 s : zero kilo-octet de script tient mieux
 *    cette promesse qu une bibliotheque chargee en asynchrone.
 * 2. Le lien de chaque carte reste VISIBLE au lieu de paraitre au survol. Un
 *    bouton qui n existe qu au survol n existe ni au doigt ni au clavier.
 *    Le survol leve le voile et agrandit la photographie, rien de plus.
 * 3. Aucune bordure claire sur les plaques de verre : le client a fait retirer
 *    le filet blanc de 1 px le matin meme.
 */

/* ------------------------------------------------- Le bloc qui chevauche */

/*
 * La plaque remonte sur le hero. Elle est posee sur le groupe INTERNE et non
 * sur la section : le fond de la section reste a sa place, seule la plaque
 * monte, et l alternance des fonds est intacte.
 *
 * Classe DOUBLEE : main .entry-content > .lcs-section porte deja une remise a
 * zero de margin-block-start a (0,1,2), une classe simple ne passerait pas.
 */
/*
 * Retour client du 13 aout : la plaque de verre du hero etait COUPEE par la
 * section suivante. Le chevauchement recouvre 110 px du bas du hero, il faut
 * donc les reserver sous son contenu, sinon la fin du bloc vit sous la plaque.
 */
main .entry-content > .lcs-hero-photo.lcs-hero-derive {
	padding-block-end: 130px;
}

/*
 * Piege 172 : le coeur pose :root :where(.is-layout-constrained) > :first-child
 * { margin-block-start: 0 } a (0,2,0) et la plaque est le PREMIER enfant de sa
 * section. A specificite egale il gagne par l ordre de chargement, et le
 * chevauchement rendait 0 px au lieu de -110. Trois classes reprennent la main.
 */
.lcs-section > .lcs-chevauche.lcs-chevauche {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	margin-block-start: -80px;
	padding: var(--wp--preset--spacing--xl);
	background-color: var(--wp--preset--color--base);
	border-radius: 5px;
}

.lcs-chevauche.lcs-chevauche > * {
	margin-block: 0;
}

.lcs-chevauche.lcs-chevauche > * + *:not(.wp-block-buttons) {
	margin-block-start: var(--wp--preset--spacing--m);
}

.lcs-chevauche__reperes {
	list-style: none;
	padding-inline: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

/*
 * Retour client : les trois reperes deviennent des volets JOINTIFS, sans
 * gouttiere, arete magenta EN TETE et fonds alternes. C est le vocabulaire
 * du mur d ardoise et du damier, et non trois filets dans du blanc.
 * Piege 141 : ce sont des surfaces pleines, le retrait est donc UNIFORME.
 */
.lcs-chevauche__reperes > li {
	box-sizing: border-box;
	margin-block: 0;
	padding: var(--wp--preset--spacing--l);
	border-block-start: 4px solid var(--wp--preset--color--accent);
	line-height: 1.5;
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-chevauche__reperes > li:nth-child(odd) {
	background-color: var(--wp--preset--color--primaire-clair);
}

.lcs-chevauche__reperes > li:nth-child(even) {
	background-color: var(--wp--preset--color--base-alt);
}

.lcs-chevauche__reperes > li strong {
	display: block;
	margin-block-end: var(--wp--preset--spacing--s);
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--grand);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--contraste);
}

@media (min-width: 720px) {
	.lcs-section > .lcs-chevauche.lcs-chevauche {
		margin-block-start: -110px;
		padding: var(--wp--preset--spacing--xxl);
	}

	.lcs-chevauche__reperes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
	}
}

/* --------------------------------------------- Les cinq cartes en verre du silo salle de bain */

/*
 * Grille 3 + 2 declaree EN DUR, jamais en auto-fit : six colonnes au-dela de
 * 1 080 px, les trois premieres cartes sur deux colonnes, les deux dernieres
 * sur trois. Entre 720 et 1 080, deux colonnes et la cinquieme en panoramique.
 * En dessous, une seule colonne. Piege 95, cinquieme occurrence evitee.
 */
.lcs-offres.lcs-offres {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--m);
	margin-block-start: var(--wp--preset--spacing--xl);
}

.lcs-offres.lcs-offres > * {
	margin-block: 0;
}

@media (min-width: 720px) {
	.lcs-offres.lcs-offres {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lcs-offres.lcs-offres > .lcs-offre:nth-child(5) {
		grid-column: span 2;
	}
}

@media (min-width: 1080px) {
	.lcs-offres.lcs-offres {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.lcs-offres.lcs-offres > .lcs-offre:nth-child(-n+3) {
		grid-column: span 2;
	}

	.lcs-offres.lcs-offres > .lcs-offre:nth-child(n+4) {
		grid-column: span 3;
	}
}

.lcs-offre {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-block-size: 340px;
	padding: var(--wp--preset--spacing--m);
	border-radius: 5px;
	background-color: var(--wp--preset--color--contraste);
}

.lcs-offre__image.lcs-offre__image {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: -2;
}

.lcs-offre__image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/*
 * Le voile. Dense en bas ou vit le texte, allege en haut ou vit la matiere.
 * Au survol il se leve d un cran : la photographie remonte, le texte reste
 * lisible parce que le bas ne descend jamais sous 0,80.
 */
.lcs-offre::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(to top, rgba(31, 42, 51, 0.88) 0%, rgba(31, 42, 51, 0.74) 42%, rgba(31, 42, 51, 0.45) 100%);
}

.lcs-offre__corps {
	position: relative;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--m);
	border-radius: 5px;
	background-color: var(--wp--preset--color--contraste);
	background-color: color-mix(in srgb, var(--wp--preset--color--contraste) 22%, transparent);
	-webkit-backdrop-filter: blur(10px) saturate(1.08);
	backdrop-filter: blur(10px) saturate(1.08);
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.lcs-offre__corps > * {
	margin-block: 0;
}

.lcs-offre__corps > * + * {
	margin-block-start: var(--wp--preset--spacing--s);
}

.lcs-offre__numero {
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--petit);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--primaire-clair);
	color: color-mix(in srgb, var(--wp--preset--color--primaire-clair) 60%, var(--wp--preset--color--primaire));
}

.lcs-offre__corps h3 {
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1.2;
	color: var(--wp--preset--color--base);
}

.lcs-offre__corps p {
	color: var(--wp--preset--color--base);
}

.lcs-offre__corps .lcs-offre__numero {
	color: var(--wp--preset--color--primaire-clair);
	color: color-mix(in srgb, var(--wp--preset--color--primaire-clair) 60%, var(--wp--preset--color--primaire));
}

/*
 * Un seul lien reel par carte, etendu a toute la carte par un ::after.
 * Il est TOUJOURS visible : au doigt et au clavier, le survol n existe pas.
 */
.lcs-offre__lien a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s);
	min-block-size: 44px;
	color: var(--wp--preset--color--primaire-clair);
	font-weight: 600;
	text-decoration: none;
}

.lcs-offre__lien a::before {
	content: "";
	display: block;
	inline-size: 28px;
	block-size: 3px;
	background-color: var(--wp--preset--color--accent);
	transition: inline-size 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lcs-offre__lien a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.lcs-offre__lien a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primaire-clair);
	outline-offset: 3px;
}

@media (hover: hover) {
	.lcs-offre__image img {
		transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.lcs-offre::before {
		transition: opacity 420ms ease;
	}

	.lcs-offre:hover .lcs-offre__image img,
	.lcs-offre:focus-within .lcs-offre__image img {
		transform: scale(1.05);
	}

	.lcs-offre:hover::before,
	.lcs-offre:focus-within::before {
		opacity: 0.78;
	}

	.lcs-offre:hover .lcs-offre__lien a::before,
	.lcs-offre:focus-within .lcs-offre__lien a::before {
		inline-size: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lcs-offre__image img,
	.lcs-offre::before,
	.lcs-offre__lien a::before {
		transition: none;
	}

	.lcs-offre:hover .lcs-offre__image img {
		transform: none;
	}
}

/* --------------------------------------------------- Le halo de lumiere */

/*
 * Le CDC demandait un halo qui suive la souris. Sans JavaScript on ne suit pas
 * un pointeur : le halo respire tout seul, tres lentement, et s intensifie au
 * survol de la plaque. C est ce que le CDC 3.7 autorise, et cela vaut aussi
 * pour le doigt, qui n a pas de position de survol.
 *
 * Le halo est peint sur un ::before de la SECTION, sous le contenu. Aucun
 * filtre n est employe : rien de fixe ne vit sous cette section, mais la regle
 * du projet reste de ne poser de filtre que sur des feuilles.
 */
.lcs-lumiere {
	position: relative;
	isolation: isolate;
}

.lcs-lumiere::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(42% 58% at 28% 34%, rgba(9, 104, 162, 0.42) 0%, rgba(9, 104, 162, 0) 68%), radial-gradient(38% 52% at 76% 68%, rgba(233, 54, 121, 0.24) 0%, rgba(233, 54, 121, 0) 70%);
}

.lcs-lumiere > * {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lcs-lumiere::before {
			animation: lcs-halo 18s ease-in-out infinite alternate;
		}
	}
}

@keyframes lcs-halo {
	from {
		transform: translate3d(-2%, -1.5%, 0) scale(1);
	}

	to {
		transform: translate3d(2%, 1.5%, 0) scale(1.08);
	}
}

/* ------------------------------------ Frise sur fond clair, variante 46 */

/*
 * lcs-frise codait ses couleurs pour une section sombre. La page salle de bain
 * la place entre deux fonds clairs : trois declarations suffisent, la
 * geometrie, les pastilles et le filet ne changent pas.
 */
/*
 * Retour client : le chiffre et le titre ne doivent plus porter la meme
 * couleur. Pastille primaire (blanc dessus, 5,98:1), titre primaire-sombre
 * (8,82:1 sur blanc). Les deux restent dans la palette du lot 1.
 */
.lcs-frise--clair h3 {
	color: var(--wp--preset--color--primaire-sombre);
}

.lcs-frise--clair .lcs-frise__points > li {
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-frise--clair .lcs-frise__points strong {
	color: var(--wp--preset--color--contraste);
}

.lcs-frise--clair .lcs-frise__etape::after {
	background: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--base);
}

/* --------------------------------------- Parallaxe du hero de la page 46 */

/*
 * Jamais background-attachment: fixed, condamne par la regle 5 et ignore par
 * Safari iOS. La photographie derive sur object-position, amplitude calee pour
 * rendre environ 70 px a chaque palier. Piege 120 : deux jeux d images-cles,
 * un pourcentage unique ne serait pas portable d une hauteur a l autre.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lcs-hero-derive img.wp-block-cover__image-background {
			animation: lcs-hero-derive-petit linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}

	@supports (animation-timeline: view()) {
		@media (min-width: 1080px) {
			.lcs-hero-derive img.wp-block-cover__image-background {
				animation-name: lcs-hero-derive-large;
			}
		}
	}
}

@keyframes lcs-hero-derive-petit {
	from {
		object-position: 50% 38%;
	}

	to {
		object-position: 50% 56%;
	}
}

@keyframes lcs-hero-derive-large {
	from {
		object-position: 50% 42%;
	}

	to {
		object-position: 50% 55%;
	}
}

/* ------------------------------------- Hero en diptyque, parti A du 13 aout */

/*
 * Le client a retenu le parti A : le hero cesse d etre une photographie voilee
 * a 70 pour cent et devient DEUX blocs jointifs. A gauche un pave d ardoise au
 * motif de nuancier qui porte tout le texte, a droite la photographie a sa
 * vraie couleur, sans aucun voile. Une arete magenta de 6 px tient la couture.
 *
 * Trois consequences mesurables :
 *
 * 1. Le contraste redevient un CALCUL EXACT sur aplat au lieu d une estimation
 *    au pire cas sous photographie. Blanc sur ardoise : 14,61:1.
 * 2. La photographie garde ses couleurs : plus rien ne la ternit.
 * 3. Le hero raccourcit, puisqu il n a plus a tenir 100svh pour etre credible.
 *
 * Employe sur la page 46 seulement. Le hero du 11 aout reste le modele des
 * pages FILLES de silo ; celle-ci est une page mere.
 */

/*
 * L axe unique. Le pave ne fait que 54 pour cent de la largeur : son retrait
 * gauche ne peut donc pas se calculer en pourcentage de lui-meme. Il se
 * calcule sur la largeur du CONTENEUR par 100cqw, ce qui donne exactement le
 * rail sans jamais compter la barre de defilement, la ou 100vw la compte.
 * Un retrait de repli est declare AVANT : sans requetes de conteneur, le pave
 * garde un retrait franc et rien ne casse.
 *
 * Rancon assumee de container-type : il pose contain sur l element, qui
 * devient donc bloc conteneur de ses descendants absolus. Rien de fixe ne vit
 * dans ce hero, la fenetre de devis etant creee au niveau du corps.
 */
.lcs-hero-diptyque.lcs-hero-diptyque {
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-block: 0;
	background-color: var(--wp--preset--color--contraste);
}

.lcs-hero-diptyque.lcs-hero-diptyque > * {
	margin-block: 0;
}

.lcs-hero-diptyque__photo.lcs-hero-diptyque__photo {
	position: relative;
	overflow: hidden;
	margin: 0;
	min-block-size: 220px;
}

.lcs-hero-diptyque__photo img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 46%;
}

/*
 * Le pave. Retrait UNIFORME : c est une surface pleine et visible, donc c est
 * son bord qui porte l axe, pas son texte (piege 141). Le retrait bas reserve
 * les 110 px que la section suivante vient recouvrir.
 *
 * MAIS sous 1080 px le pave occupe TOUTE la largeur : son bord tombe a 0, donc
 * c est son texte qui doit tenir le rail de 16 px. Un retrait de 32 mesure a
 * l ecran mettait le hero a 32 quand le reste de la page etait a 16, et lui
 * coutait 110 px de hauteur par des lignes plus courtes.
 */
.lcs-hero-diptyque__pave {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--s) 100px;
	border-block-start: 6px solid var(--wp--preset--color--accent);
}

/*
 * Piege 128 : cette ardoise est posee A LA MAIN, elle ne recoit donc aucun des
 * rattrapages que le coeur reserve a ses classes de preset. Sans ces trois
 * declarations, le telephone y rendrait 2,44:1.
 */
.lcs-hero-diptyque__pave .lcs-hero-texte a:not(.wp-element-button) {
	color: var(--wp--preset--color--primaire-clair);
}

.lcs-hero-diptyque__pave .lcs-hero-texte h1 {
	color: var(--wp--preset--color--base);
}

.lcs-hero-diptyque__pave .lcs-hero-texte > p {
	color: var(--wp--preset--color--base);
}

.lcs-hero-diptyque__pave .lcs-surtitre {
	color: var(--wp--preset--color--primaire-clair);
}

@media (min-width: 1080px) {
	.lcs-hero-diptyque.lcs-hero-diptyque {
		grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
		align-items: stretch;
	}

	.lcs-hero-diptyque__photo.lcs-hero-diptyque__photo {
		grid-column: 2;
		grid-row: 1;
		min-block-size: 0;
	}

	.lcs-hero-diptyque__pave {
		grid-column: 1;
		grid-row: 1;
		padding-block-start: var(--wp--preset--spacing--xxl);
		padding-block-end: 118px;
		padding-inline-start: var(--wp--preset--spacing--xxl);
		padding-inline-start: max(var(--wp--preset--spacing--l), calc((100cqw - var(--wp--style--global--wide-size)) / 2));
		padding-inline-end: var(--wp--preset--spacing--xxl);
		border-block-start: 0;
		border-inline-end: 6px solid var(--wp--preset--color--accent);
	}

	.lcs-hero-diptyque__pave .lcs-hero-texte {
		max-inline-size: 620px;
	}
}

/*
 * La photographie derive verticalement, sans jamais background-attachment.
 * Deux jeux d images-cles, un par palier : une amplitude en pourcentage n est
 * pas portable d une hauteur de cadre a l autre (piege 120).
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lcs-hero-diptyque__photo img {
			animation: lcs-diptyque-petit linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}

	@supports (animation-timeline: view()) {
		@media (min-width: 1080px) {
			.lcs-hero-diptyque__photo img {
				animation-name: lcs-diptyque-large;
			}
		}
	}
}

/*
 * Retour client du 13 aout : la plaque de norme quitte le pave et vient se
 * poser SUR la photographie, a droite. Deux effets d un seul geste.
 *
 * 1. Elle equilibre le diptyque : le verre revient dans la composition, et
 *    cette fois le flou a une raison d etre puisqu il y a une image dessous.
 * 2. Elle rend au pave les 311 px qu elle lui prenait, ce qui permet au hero
 *    de tenir dans la hauteur d ecran sur ordinateur.
 *
 * CONTRASTE : la photographie n est plus voilee, la plaque porte donc seule
 * toute la lisibilite. Calcul au pire cas sur photographie BLANCHE pure :
 * a 22 pour cent le fond effectif remonterait a rgb(206, 208, 210) et le
 * texte blanc deviendrait illisible. A 76 pour cent il vaut rgb(85, 93, 100) :
 * blanc 6,69:1 et primaire-clair 5,84:1. C est le plancher, pas un choix
 * esthetique - le meme calcul que le verre depoli du lot 1, refait sur une
 * image qui n a plus de voile pour l aider.
 *
 * SOUS 1080 px il n y a plus de photographie derriere elle : la plaque vit
 * sur l ardoise du hero, et 76 pour cent d ardoise SUR de l ardoise ne se
 * distingue de rien. Elle y prend donc un aplat contraste-doux, sans aucun
 * filtre puisqu il n y aurait rien a flouter. Blanc 11,51:1.
 */
.lcs-hero-diptyque > .lcs-verre.lcs-verre {
	background-color: var(--wp--preset--color--contraste-doux);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	margin-inline: var(--wp--preset--spacing--s);
	margin-block-end: var(--wp--preset--spacing--l);
}

@media (min-width: 1080px) {
	/*
	 * La plaque partage la cellule de la photographie et se cale en bas a
	 * gauche : elle mord sur l arete magenta, ce qui coud les deux blocs.
	 */
	.lcs-hero-diptyque > .lcs-verre.lcs-verre {
		background-color: var(--wp--preset--color--contraste);
		background-color: color-mix(in srgb, var(--wp--preset--color--contraste) 76%, transparent);
		-webkit-backdrop-filter: blur(16px) saturate(1.2);
		backdrop-filter: blur(16px) saturate(1.2);
		grid-column: 2;
		grid-row: 1;
		align-self: end;
		justify-self: start;
		max-inline-size: 420px;
		margin-inline: var(--wp--preset--spacing--l);
		margin-block-end: 150px;
	}

	/*
	 * Le hero tient desormais dans la hauteur d ecran. min-block-size et non
	 * block-size : sur un ecran tres court, le contenu reprend la main plutot
	 * que d etre rogne. La hauteur d en-tete est celle mesuree au lot 2.
	 */
	.lcs-hero-diptyque.lcs-hero-diptyque {
		min-block-size: calc(100svh - var(--lcs-entete));
	}

	/*
	 * Mesure a 1440 x 768 : le hero rendait 704 px pour 678 disponibles, soit
	 * 26 px de depassement. Le retrait haut tombe a 24 px et le retrait bas a
	 * 118, ce qui laisse encore 8 px de degagement sous le contenu par-dessus
	 * les 110 px que la plaque du chevauchement recouvre.
	 */
	.lcs-hero-diptyque__pave {
		padding-block-start: var(--wp--preset--spacing--m);
	}
}

@keyframes lcs-diptyque-petit {
	from {
		object-position: 50% 36%;
	}

	to {
		object-position: 50% 56%;
	}
}

@keyframes lcs-diptyque-large {
	from {
		object-position: 50% 40%;
	}

	to {
		object-position: 50% 54%;
	}
}

/* ------------------------------------------ Hero de silo : la plaque passe a droite */
/*
 * Retour client du 14 aout, capture annotee en rouge : a 1440x900 le hero faisait
 * 882 px pour 810 disponibles, et la plaque de norme tombait sous la ligne de
 * flottaison. Elle quitte la colonne de texte et occupe les 436 px libres a sa
 * droite, ce qui rend 359 px de hauteur et fait tenir le hero dans l ecran.
 *
 * Trois consequences mesurees, toutes traitees ici :
 *
 * (1) la grille du hero reprend toute la largeur du rail. Le cap de 700 px qui
 *     maintient le texte dans la zone dense du voile descend sur la seule
 *     colonne de texte, il n est pas perdu.
 *
 * (2) ATTENTION : la plaque atterrit entre 61,5 et 92,1 pour cent de la largeur du hero,
 *     c est a dire EN PLEIN DANS LA FONDUE du masque, ou le voile ne vaut plus
 *     que 0,05. A 42 pour cent d ardoise elle laisserait le texte a 2,2:1.
 *     Elle passe donc a 76 pour cent, valeur deja eprouvee sur le diptyque de la
 *     page 46 (piege 182). Calcul au pire cas, photographie blanche pure :
 *     fond effectif rgb(83, 91, 98), blanc 6,89:1 et primaire-clair 6,01:1.
 *
 * (3) la marge haute de 24 px qui la separait de son voisin n a plus d objet,
 *     puisqu elle ne suit plus personne : elle est remise a zero.
 *
 * Sous 1080 px rien ne change : le masque est eteint, le voile est plat, la
 * plaque reste sous le texte et garde ses 42 pour cent.
 *
 * Les quatre enfants de texte sont forces en colonne 1 : sans cela le placement
 * automatique les repartirait EN LIGNE sur les deux colonnes. Les quatre rangees
 * sont declarees explicitement pour que le 1 / -1 de la plaque ait une derniere
 * ligne a viser ; dans une grille implicite, -1 retombe sur la ligne 1.
 */
@media (min-width: 1080px) {

	.lcs-hero-silo .lcs-hero-grille.lcs-hero-grille {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.lcs-hero-silo .lcs-hero-texte.lcs-hero-texte {
		grid-template-columns: min(700px, 52vw) minmax(0, 1fr);
		grid-template-rows: repeat(4, auto);
		column-gap: var(--wp--preset--spacing--xxl);
		align-items: start;
	}

	.lcs-hero-silo .lcs-hero-texte.lcs-hero-texte > * {
		grid-column: 1;
	}

	.lcs-hero-silo .lcs-hero-texte.lcs-hero-texte > .lcs-verre--hero {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: center;
		margin-block-start: 0;
		background-color: var(--wp--preset--color--contraste);
		background-color: color-mix(in srgb, var(--wp--preset--color--contraste) 76%, transparent);
	}

}

/* ------------------------------------------ Volees de maillage de silo */
/*
 * Parti B du 14 aout. La section « Le reste de nos travaux » comptait TROIS
 * renvois pour QUATRE pages soeurs : j avais repris le gabarit du silo peinture,
 * qui en a trois, sans recompter. Le client a vu le manque avant moi, sur son
 * propre menu. Il a profite du correctif pour demander un autre dessin.
 *
 * Une grille de quatre cartes etait exclue d avance : « quatre cartes jumelles »
 * figure dans ce qu il a nomme comme cliche le 11 aout. Retenu : quatre volees
 * JOINTIVES sur un mur d ardoise, sans une seule image. Une section de fin de
 * page est un sommaire, son travail est d envoyer ailleurs ; et sans image elle
 * ne depend d aucune photographie, ce qui est le vrai goulot du projet.
 *
 * ECART ASSUME avec la maquette montree : elle ne portait l arete magenta que
 * sur la premiere volee, ce qui se lit comme un etat de survol. Une arete qui
 * n existe qu au survol n existe ni au doigt ni au clavier. Les quatre la
 * portent, et elle se trace au defilement comme partout ailleurs sur le site.
 *
 * UN SEUL LIEN REEL par volee (CDC 3.6), porte par le titre et etendu par un
 * ::after en inset 0 : la volee entiere est cliquable, le numero et la fleche
 * restent decoratifs et ne sont jamais des liens (piege 82).
 *
 * Le numero est le ::after du CONTENEUR, donc un VRAI element de grille - un
 * pseudo d enfant ne l aurait pas ete, et il aurait fallu un span de plus dans
 * le balisage que le client edite.
 */

.lcs-volees.lcs-volees {
	display: grid;
	gap: 0;
	margin-block-start: var(--wp--preset--spacing--xl);
}

.lcs-volees.lcs-volees > * {
	margin-block: 0;
}

.lcs-volees.lcs-volees > .lcs-volees__item {
	counter-increment: lcs-volee;
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--m);
	row-gap: var(--wp--preset--spacing--xs);
	align-items: start;
	padding: var(--wp--preset--spacing--l) 56px var(--wp--preset--spacing--l) var(--wp--preset--spacing--l);
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--primaire-clair) 22%, transparent);
}

.lcs-volees.lcs-volees {
	counter-reset: lcs-volee;
}

.lcs-volees.lcs-volees > .lcs-volees__item:last-child {
	border-block-end: 0;
}

.lcs-volees.lcs-volees > .lcs-volees__item > * {
	margin-block: 0;
	grid-column: 2;
}

/* Le numero : pseudo du conteneur, donc element de grille a part entiere. */
.lcs-volees > .lcs-volees__item::after {
	content: counter(lcs-volee, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--grand);
	font-weight: 600;
	line-height: 1;
	color: color-mix(in srgb, var(--wp--preset--color--primaire-clair) 60%, var(--wp--preset--color--primaire));
}

/*
 * L arete est visible d emblee : l animation ci-dessous ne fait que la tracer.
 * Sans support de animation-timeline, elle reste pleine. Zero etat masque.
 */
.lcs-volees > .lcs-volees__item::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 4px;
	background-color: var(--wp--preset--color--accent);
	transition: inline-size 200ms ease;
}

.lcs-volees > .lcs-volees__item:hover::before,
.lcs-volees > .lcs-volees__item:focus-within::before {
	inline-size: 6px;
}

.lcs-volees .lcs-volees__titre {
	font-size: var(--wp--preset--font-size--moyen);
}

.lcs-volees .lcs-volees__titre a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* Toute la volee est cliquable, sans second lien a l interieur. */
.lcs-volees .lcs-volees__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* La fleche est un masque : meme dessin que les renvois de la page introuvable. */
.lcs-volees .lcs-volees__titre::after {
	content: "";
	position: absolute;
	inset-inline-end: var(--wp--preset--spacing--l);
	inset-block-start: 50%;
	inline-size: 22px;
	block-size: 22px;
	transform: translateY(-50%);
	background-color: var(--wp--preset--color--primaire-clair);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: translate 200ms ease;
}

.lcs-volees > .lcs-volees__item:hover .lcs-volees__titre::after,
.lcs-volees > .lcs-volees__item:focus-within .lcs-volees__titre::after {
	translate: 6px 0;
}

.lcs-volees .lcs-volees__texte {
	color: var(--wp--preset--color--primaire-clair);
	font-size: var(--wp--preset--font-size--petit);
}

/*
 * Sous 720 px le numero passe au-dessus du titre : une colonne de 72 px prise
 * sur 343 px de rail laisserait 55 caracteres au texte.
 */
@media (max-width: 719.98px) {

	.lcs-volees.lcs-volees > .lcs-volees__item {
		grid-template-columns: minmax(0, 1fr);
		padding-inline-end: var(--wp--preset--spacing--l);
	}

	.lcs-volees.lcs-volees > .lcs-volees__item > * {
		grid-column: 1;
	}

	.lcs-volees > .lcs-volees__item::after {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		font-size: var(--wp--preset--font-size--moyen);
	}

	.lcs-volees .lcs-volees__titre::after {
		inset-block-start: auto;
		inset-block-end: var(--wp--preset--spacing--l);
		transform: none;
	}

}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {

		.lcs-volees > .lcs-volees__item::before {
			transform-origin: top;
			animation: lcs-volee-trace linear both;
			animation-timeline: view();
			animation-range: entry 12% cover 26%;
		}

		@keyframes lcs-volee-trace {
			from { transform: scaleY(0); }
			to   { transform: scaleY(1); }
		}

	}
}

/* ------------------------------------------------------- Pages legales */

/*
 * Meme parti que le duo de la FAQ : la colonne de gauche OCCUPE le vide que la
 * mesure de lecture laissait a droite, defaut signale deux fois par le client.
 * Bloc AUTONOME : aucun selecteur de la FAQ n est touche, pour qu une reprise
 * de la FAQ ne puisse pas casser les pages legales, et inversement.
 * Pas de position sticky : l apercu ne permet pas de la mesurer sur place, et
 * ce qui ne se mesure pas ne se pose pas.
 */
.lcs-legal__duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--xl);
	margin-block-start: 0;
}

@media (min-width: 1080px) {
	.lcs-legal__duo.lcs-legal__duo {
		grid-template-columns: 300px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xxl);
		align-items: start;
	}
}

.lcs-legal__duo.lcs-legal__duo > * {
	margin-block: 0;
}

.lcs-legal__corps > * {
	margin-block: 0;
}

.lcs-legal__bloc {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--l);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

.lcs-legal__bloc:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

.lcs-legal__bloc > * {
	margin-block: 0;
}

.lcs-legal__bloc > * + * {
	margin-block-start: var(--wp--preset--spacing--m);
}

/* L ancre ne doit pas se loger sous l en-tete collant. */
.lcs-legal__bloc h2 {
	scroll-margin-block-start: var(--wp--preset--spacing--xxl);
}

/* Table d identite : intitule et valeur, lisible sans mise en forme de tableau. */
.lcs-legal__fiche {
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--xs);
}

@media (min-width: 600px) {
	.lcs-legal__fiche {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
	}
}

.lcs-legal__fiche dt {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--contraste-doux);
}

.lcs-legal__fiche dd {
	margin: 0;
}

@media (max-width: 599.98px) {
	.lcs-legal__fiche dd {
		margin-block-end: var(--wp--preset--spacing--xs);
	}
}

/* ------------------------------------------- Page 42, parti editorial */

/*
 * Scope : .page-id-42 UNIQUEMENT, par arbitrage client du 16 aout 2026. Aucune
 * autre page n est touchee. Retirer ce bloc suffit a tout annuler.
 *
 * Mesures relevees AVANT reprise, a 1440 px :
 * hero 810 px, H1 a 358 px du haut, H1 52 px, H2 26 px, page 8922 px,
 * padding 64/64 sur six sections sur dix, trois ombres portees residuelles.
 */

/* 1. Echelle typographique : quatre paliers au lieu de trois, et un
 *    resserrement optique que 52 px sans letter-spacing ne pardonnait pas. */
.page-id-42 .lcs-hero-photo h1 {
	font-size: clamp(2.5rem, 5.2vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.022em;
}

.page-id-42 .lcs-section h2 {
	font-size: clamp(1.625rem, 2.7vw, 2.375rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
}

.page-id-42 .lcs-section h3 {
	font-size: clamp(1.125rem, 1.5vw, 1.5rem);
	line-height: 1.26;
	letter-spacing: -0.008em;
}

/* 2. Le hero cessait de demontrer quoi que ce soit : 810 px pour une photo et
 *    un titre pose a 358 px du haut. On le ramene et on remonte le titre. */
.page-id-42 .lcs-hero-photo {
	min-block-size: clamp(26rem, 46vw, 38.75rem);
}

/* 3. La bande de preuves chevauche le bas du hero : elle entre ainsi dans le
 *    premier ecran au lieu de se meriter au defilement. */
@media (min-width: 768px) {
	.page-id-42 .lcs-preuves {
		position: relative;
		z-index: 1;
		margin-block-start: clamp(-4rem, -5vw, -2.5rem);
	}
}

/* 4. Les trois dernieres ombres portees, dont une decalee vers la gauche.
 *    La regle du projet dit aucune ombre. */
.page-id-42 .lcs-section [style*="box-shadow"],
.page-id-42 .lcs-section .wp-block-image img,
.page-id-42 .lcs-preuves img {
	box-shadow: none;
}

/* 5. Le focus doit se voir. Deux couleurs pour tenir sur clair comme sur
 *    sombre, sans dependre du fond herite. */
.page-id-42 a:focus-visible,
.page-id-42 button:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 5px;
}

.page-id-42 .lcs-section--sombre a:focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* 6. Le H1 restait a 52 px : le coeur genere les classes de taille preset avec
 *    une priorite forcee, qu aucune regle de classe ne peut battre et que la
 *    regle 4 du projet interdit d employer. On redefinit donc la VARIABLE,
 *    portee au seul hero. */
.page-id-42 .lcs-hero-photo {
	--wp--preset--font-size--geant: clamp(2.5rem, 5.2vw, 4rem);
}

/* 7. Rythme vertical. Les paddings sont ecrits en style inline dans le contenu
 *    et pointent vers --wp--preset--spacing--xxl : on redefinit la variable sur
 *    la section, et on la retablit sur ses enfants pour que seul le padding de
 *    la section bouge. Aucune modification du contenu, aucune priorite forcee.
 *
 *    Avant : 64 px sur six sections dont les hauteurs vont de 215 a 1644 px.
 */

/* Sections majeures : le maillage du silo (1644 px) et la scene sombre (1527 px) */
.page-id-42 .lcs-maillage-silo,
.page-id-42 .lcs-section--sombre:not(.lcs-cta) {
	--wp--preset--spacing--xxl: clamp(4rem, 8vw, 10rem);
}

.page-id-42 .lcs-maillage-silo > *,
.page-id-42 .lcs-section--sombre:not(.lcs-cta) > * {
	--wp--preset--spacing--xxl: 4rem;
}

/* Palier intermediaire : les deux sections de 800 a 850 px */
.page-id-42 .lcs-cibles-section,
.page-id-42 .lcs-supports-section {
	--wp--preset--spacing--xxl: clamp(3rem, 5vw, 5.5rem);
}

.page-id-42 .lcs-cibles-section > *,
.page-id-42 .lcs-supports-section > * {
	--wp--preset--spacing--xxl: 4rem;
}

/* Sections de service : l appel a l action et la carte des zones, sous 400 px.
 *    Elles n ont pas a respirer comme une section de 1600 px. */
.page-id-42 .lcs-cta,
.page-id-42 .lcs-maillage-zones {
	--wp--preset--spacing--xxl: clamp(2.5rem, 3.5vw, 3.5rem);
}

.page-id-42 .lcs-cta > *,
.page-id-42 .lcs-maillage-zones > * {
	--wp--preset--spacing--xxl: 4rem;
}

/* 8. FAQ en duo, comme les pages filles.
 *
 *    Avant : le summary occupait tout le rail de 1200 px et le marqueur, pose en
 *    ::after, etait pousse a l extremite. Mesure : 54 px de vide entre la fin de
 *    la question et le plus a 375 px, et plus de 700 px a 1600 px. L oeil devait
 *    traverser l ecran pour relier une question a son bouton.
 *
 *    La section contient directement le H2 et les details, sans conteneur : la
 *    grille se monte donc sur la section elle-meme. Les marges automatiques de la
 *    disposition contrainte du coeur sont neutralisees, sans quoi elles
 *    recentreraient chaque enfant dans sa cellule (regle 4).
 */
@media (min-width: 1080px) {
	.page-id-42 .lcs-faq.lcs-faq {
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--xxl);
		align-items: start;
	}

	.page-id-42 .lcs-faq.lcs-faq > * {
		max-inline-size: none;
		margin-inline: 0;
	}

	.page-id-42 .lcs-faq.lcs-faq > h2 {
		grid-column: 1;
		grid-row: 1 / -1;
		margin-block: 0;
	}

	.page-id-42 .lcs-faq.lcs-faq > .lcs-faq__item {
		grid-column: 2;
	}
}

/* 9. Le marqueur cesse d etre orphelin : il suit la question au lieu d etre
 *    plaque contre le bord. Vaut a toutes les largeurs, y compris mobile ou le
 *    vide mesure valait deja 54 px. */
.page-id-42 .lcs-faq__item > summary {
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--m);
}

.page-id-42 .lcs-faq__item > summary::after {
	margin-inline-start: 0;
}

/* 10. Deux defauts mesures apres la pose de la grille, et leurs correctifs.
 *
 *     a) La grille s etalait sur toute la largeur : le titre tombait a 16 px du
 *        bord au lieu des 113 px du rail, desalignee du reste de la page. On ne
 *        peut pas contraindre la section elle-meme, son fond doit rester pleine
 *        largeur : c est donc le padding qui reconstitue la goutiere du rail.
 *
 *     b) Les items ne remplissaient que 690 px de leur colonne de 1028 px : une
 *        marge automatique de la disposition contrainte du coeur survivait et les
 *        recentrait dans leur cellule. Une largeur explicite tranche.
 */
@media (min-width: 1080px) {
	.page-id-42 .lcs-faq.lcs-faq {
		padding-inline: max(1rem, calc((100% - var(--wp--style--global--wide-size)) / 2));
	}

	.page-id-42 .lcs-faq.lcs-faq > .lcs-faq__item {
		inline-size: 100%;
		max-inline-size: 100%;
		margin-inline: 0;
	}

	.page-id-42 .lcs-faq.lcs-faq > h2 {
		inline-size: 100%;
	}
}

/* 11. Le rail reconstitue par calcul tombait a 97 px au lieu de 113 : le 100 %
 *     d un element en border-box se refere a la boite du parent, pas a l ecran,
 *     et la grille faisait 1232 px au lieu de 1200. On abandonne le calcul et on
 *     laisse le padding global du coeur faire son travail : deux colonnes
 *     fantomes en 1fr absorbent le surplus et centrent un rail exact de 1200 px,
 *     soit 364 (300 de titre plus 64 de goutiere) et 836 de contenu.
 */
@media (min-width: 1080px) {
	.page-id-42 .lcs-faq.lcs-faq {
		padding-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left);
		grid-template-columns: minmax(0, 1fr) 364px minmax(0, 836px) minmax(0, 1fr);
		column-gap: 0;
	}

	.page-id-42 .lcs-faq.lcs-faq > h2 {
		grid-column: 2;
		max-inline-size: 300px;
	}

	.page-id-42 .lcs-faq.lcs-faq > .lcs-faq__item {
		grid-column: 3;
	}
}

/* 12. Le titre se centrait encore dans sa cellule de 364 px, soit 32 px de
 *     decalage : une marge automatique residuelle de la disposition contrainte.
 *     On la tranche explicitement des deux cotes. */
@media (min-width: 1080px) {
	.page-id-42 .lcs-faq.lcs-faq > h2 {
		margin-inline-start: 0;
		margin-inline-end: auto;
	}
}

/* --------------------------------- Page 104, la coupe de matiere */

/*
 * Arbitrage client du 18 aout 2026 : axe A « coupe de matiere », scope a la
 * page 104 UNIQUEMENT. Retirer ce bloc annule tout.
 *
 * Mesures relevees AVANT : filet lateral de 6 px rose sur toute la hauteur du
 * composant (motif interdit par la revue), quatre plaques identiques de 42 px
 * dont une peinte de la couleur exacte du fond de section (246,243,239) donc
 * invisible, et une plaque blanche cerclee de gris qui se lit comme un champ
 * de formulaire.
 *
 * Le parti : la pile devient une coupe stratigraphique. Strates pleines aux
 * epaisseurs differenciees, escalier de retraits vers le haut comme une
 * fouille, grain de matiere propre a chaque couche, panneau de texte qui
 * chevauche la coupe, strate qui se tire au survol. Revelation au defilement
 * SANS variation d opacite : si la frise de defilement ne progresse pas
 * (apercu, vieux navigateurs), tout reste lisible et mesurable.
 */

/* Le filet lateral disparait, le composant revient sur le rail. */
.page-id-104 .lcs-couches.lcs-couches {
	border-inline-start: 0;
	padding-inline-start: 0;
}

.page-id-104 .lcs-couches__legende {
	color: var(--wp--preset--color--contraste-doux);
	max-inline-size: var(--lcs-lecture);
}

/* La coupe. Ordre du document : support en premier, revetement en dernier,
 * affiches du bas vers le haut par la colonne inversee existante. */
.page-id-104 .lcs-couches__pile {
	gap: 0;
}

.page-id-104 .lcs-couches__pile > li {
	border: 0;
	border-radius: 0;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* Strate 1, dans l ordre du document : le support. La plus epaisse, la plus
 * sombre, grain grossier de chape. */
.page-id-104 .lcs-couches__pile > li:nth-child(1) {
	background-color: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--base);
	padding-block: 22px;
	background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 8px);
}

/* Strate 2 : le ragreage. Ardoise soutenue, grain serre, mince. */
.page-id-104 .lcs-couches__pile > li:nth-child(2) {
	background-color: color-mix(in oklab, var(--wp--preset--color--contraste) 76%, var(--wp--preset--color--base-alt));
	color: var(--wp--preset--color--base);
	padding-block: 9px;
	margin-inline-start: 14px;
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px);
}

/* Strate 3 : le primaire. Le film le plus mince de la coupe, sans grain :
 * c est un liquide. */
.page-id-104 .lcs-couches__pile > li:nth-child(3) {
	background-color: var(--wp--preset--color--primaire-clair);
	padding-block: 7px;
	margin-inline-start: 28px;
}

/* Strate 4 : le revetement fini. Claire, reglee, lignes de pose. */
.page-id-104 .lcs-couches__pile > li:nth-child(4) {
	background-color: var(--wp--preset--color--base);
	padding-block: 14px;
	margin-inline-start: 42px;
	background-image: repeating-linear-gradient(0deg, rgba(31, 42, 51, 0.05) 0 1px, transparent 1px 7px);
}

/* La strate se tire comme un echantillon, vers l exterieur de la coupe. */
@media (hover: hover) {
	.page-id-104 .lcs-couches__pile > li:hover {
		transform: translateX(-10px);
	}
}

/* Le panneau de texte s ancre SUR la coupe : chevauchement maitrise. */
@media (min-width: 1080px) {
	.page-id-104 .lcs-couches__rangee {
		align-items: center;
	}

	.page-id-104 .lcs-couches__texte {
		position: relative;
		z-index: 1;
		margin-inline-start: -88px;
		background-color: var(--wp--preset--color--base);
		border-radius: 5px;
		padding: 28px 32px;
	}
}

@media (max-width: 1079.98px) {
	.page-id-104 .lcs-couches__pile > li:nth-child(2) {
		margin-inline-start: 10px;
	}

	.page-id-104 .lcs-couches__pile > li:nth-child(3) {
		margin-inline-start: 20px;
	}

	.page-id-104 .lcs-couches__pile > li:nth-child(4) {
		margin-inline-start: 30px;
	}
}

/* Revelation au defilement : translation seule, jamais d opacite, pour que la
 * coupe reste entiere si la frise ne progresse pas. Chaque strate part un peu
 * plus bas que la precedente : la coupe se monte du support au revetement. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.page-id-104 .lcs-couches__pile > li {
			animation: lcs-strate-pose linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}

		.page-id-104 .lcs-couches__pile > li:nth-child(2) {
			animation-range: entry 5% entry 62%;
		}

		.page-id-104 .lcs-couches__pile > li:nth-child(3) {
			animation-range: entry 10% entry 69%;
		}

		.page-id-104 .lcs-couches__pile > li:nth-child(4) {
			animation-range: entry 15% entry 76%;
		}
	}
}

@keyframes lcs-strate-pose {
	from {
		translate: 0 18px;
	}

	to {
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-id-104 .lcs-couches__pile > li {
		transition: none;
	}

	.page-id-104 .lcs-couches__pile > li:hover {
		transform: none;
	}
}


/* --------------------------- Erreurs de champ des deux formulaires */

/*
 * Ajout du 30 aout 2026 : le bandeau generique nommait aucun champ. La liste
 * cliquable vit sous le bandeau, chaque champ fautif porte son message et
 * aria-invalid. La couleur derive de l accent assombri vers le contraste pour
 * tenir le ratio de 4,5 sur les fonds clairs.
 */
.lcs-devis__etat-liste,
.lcs-contact__etat-liste {
	margin: 12px 0 0;
	padding-inline-start: 1.4rem;
	display: grid;
	gap: 6px;
}

.lcs-devis__etat-liste a,
.lcs-contact__etat-liste a {
	font-weight: 600;
	color: inherit;
	text-underline-offset: 3px;
}

.lcs-devis__erreur,
.lcs-contact__erreur {
	display: block;
	margin-block: 4px 6px;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: color-mix(in oklab, var(--wp--preset--color--accent) 62%, var(--wp--preset--color--contraste));
}

.lcs-devis__champ--erreur input:not([type="checkbox"]),
.lcs-devis__champ--erreur select,
.lcs-devis__champ--erreur textarea,
.lcs-contact__champ--erreur input,
.lcs-contact__champ--erreur select,
.lcs-contact__champ--erreur textarea {
	border: 2px solid color-mix(in oklab, var(--wp--preset--color--accent) 62%, var(--wp--preset--color--contraste));
}