/**
 * Versoo – styles complémentaires à theme.json.
 * Toutes les valeurs viennent de l'échelle de theme.json (multiples de 4) :
 * --wp--preset--font-size--*, --wp--preset--spacing--*, --wp--preset--border-radius--*.
 */

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

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Les décors inclinés ne doivent jamais créer de défilement horizontal. */
main {
	overflow-x: clip;
}

/* Réglage de Fraunces utilisé dans la maquette (lettres « wonky », sans arrondi). */
h1, h2, h3, h4, h5, h6,
.has-fraunces-font-family {
	font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* Interligne associé à chaque taille : texte confortable (1,5).
 * Les titres gardent de l'air pour que les pastilles surlignées ne touchent pas les lignes voisines. */
.has-16-font-size { line-height: 1.5; }
.has-20-font-size { line-height: 1.4; }
.has-24-font-size { line-height: 1.3334; }
.has-32-font-size { line-height: 1.25; }
:is(h1, h2, h3, h4, h5, h6).has-32-font-size { line-height: 1.375; }
.has-48-font-size { line-height: 1.1667; }
:is(h1, h2, h3, h4, h5, h6).has-48-font-size { line-height: 1.3334; }
.has-56-font-size { line-height: 1.3572; }
.has-80-font-size { line-height: 1.1; }

/* Mot surligné dans un titre (outil natif « Surligner » de l'éditeur).
 * Texte clair sur la pastille, comme dans la maquette (choix validé, contraste inférieur à 3:1). */
:is(h1, h2, h3, h4, h5, h6) mark {
	padding: 0 0.45em;
	border-radius: var(--wp--preset--border-radius--pastille);
	color: var(--wp--preset--color--blanc-vert);
	background-color: var(--wp--preset--color--vert);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.wp-block-separator {
	border-top-width: 1px;
}

/* Focus clavier visible partout. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--noir);
	outline-offset: 2px;
}

/* ----------------------------------------------------------------
 * Boutons (hauteur 44 px : 12 + 20 + 12)
 * Vert = style par défaut (theme.json). « Contour » natif = contour taupe.
 * Texte clair sur les boutons pleins, comme dans la maquette (choix validé, contraste inférieur à 4,5:1).
 * Teintes « texte » foncées pour le contour taupe ; « Contour vert » et « Contour orange » gardent les couleurs de la maquette (choix validé, contraste plus faible).
 * ------------------------------------------------------------- */

.wp-block-button__link {
	min-height: var(--wp--custom--cible-tactile);
	transition:
		background-color var(--wp--custom--transition),
		border-color var(--wp--custom--transition),
		box-shadow var(--wp--custom--transition),
		color var(--wp--custom--transition);
}

.wp-block-button:is(.is-style-orange, .is-style-taupe) > .wp-block-button__link {
	color: var(--wp--preset--color--blanc-vert);
}
.wp-block-button.is-style-orange > .wp-block-button__link {
	background-color: var(--wp--preset--color--orange);
	box-shadow: var(--wp--preset--shadow--bouton-orange);
}
.wp-block-button.is-style-orange > .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--orange-survol);
	box-shadow: var(--wp--custom--shadow--bouton-orange-survol);
}

.wp-block-button.is-style-taupe > .wp-block-button__link {
	background-color: var(--wp--preset--color--taupe);
	box-shadow: var(--wp--preset--shadow--bouton-taupe);
}
.wp-block-button.is-style-taupe > .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--taupe-survol);
	box-shadow: var(--wp--custom--shadow--bouton-taupe-survol);
}

/* Contours : la bordure de 1 px est comprise dans les 44 px. */
.wp-block-button:is(.is-style-outline, .is-style-contour-vert, .is-style-contour-orange) > .wp-block-button__link {
	--versoo-contour: var(--wp--preset--color--taupe-texte);
	padding: 11px 19px;
	border: 1px solid var(--versoo-contour);
	color: var(--versoo-contour);
	background-color: var(--wp--preset--color--blanc);
	box-shadow: var(--wp--preset--shadow--bouton-contour);
}
.wp-block-button:is(.is-style-outline, .is-style-contour-vert, .is-style-contour-orange) > .wp-block-button__link:hover {
	--versoo-contour: var(--wp--custom--color--taupe-texte-survol);
	background-color: var(--wp--preset--color--blanc-taupe);
	box-shadow: var(--wp--custom--shadow--bouton-contour-survol);
}
.wp-block-button.is-style-contour-vert > .wp-block-button__link {
	--versoo-contour: var(--wp--preset--color--vert);
}
.wp-block-button.is-style-contour-vert > .wp-block-button__link:hover {
	--versoo-contour: var(--wp--custom--color--vert-survol);
	background-color: var(--wp--preset--color--blanc-vert);
}
.wp-block-button.is-style-contour-orange > .wp-block-button__link {
	--versoo-contour: var(--wp--preset--color--orange);
}
.wp-block-button.is-style-contour-orange > .wp-block-button__link:hover {
	--versoo-contour: var(--wp--custom--color--orange-survol);
	background-color: var(--wp--preset--color--blanc-orange);
}

/* ----------------------------------------------------------------
 * Liens de menu (en-tête et pied de page) : zone cliquable de 44 px de haut
 * ------------------------------------------------------------- */

:is(.site-header, .site-footer) .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--cible-tactile);
	color: inherit;
	text-decoration: none;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	justify-content: center;
	align-items: center;
	min-width: var(--wp--custom--cible-tactile);
	min-height: var(--wp--custom--cible-tactile);
}

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

/* En-tête fixe : il reste en haut de l'écran pendant le défilement. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
/* Sur petit écran, la barre d'administration n'est pas fixe : l'en-tête se colle tout en haut. */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}
/* Une ombre légère apparaît dès que la page défile (navigateurs récents). */
@supports (animation-timeline: scroll()) {
	.site-header {
		animation: versoo-ombre-entete linear both;
		animation-timeline: scroll();
		animation-range: 0 64px;
	}
	@keyframes versoo-ombre-entete {
		to {
			box-shadow: 0 4px 24px rgba(26, 26, 25, 0.08);
		}
	}
}
/* Les ancres de page ne passent pas sous l'en-tête. */
html {
	scroll-padding-top: 112px;
}

.site-header .wp-block-site-logo {
	flex-shrink: 0;
}
.site-header .wp-block-site-logo a {
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--cible-tactile);
}
.site-header .wp-block-site-logo img {
	display: block;
	max-width: 100%;
	height: auto;
}
.site-header__menu .wp-block-navigation-item__label,
.site-header__cta .wp-block-button__link {
	white-space: nowrap;
}

.site-header__menu .wp-block-navigation-item__content {
	--versoo-trait: transparent;
	position: relative;
	gap: var(--wp--preset--spacing--4);
}
/* Trait orange sous le lien : 2 px, à 4 px du bas de la zone cliquable. */
.site-header__menu .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: var(--wp--preset--spacing--4);
	left: 0;
	height: 2px;
	background-color: var(--versoo-trait);
	transition: background-color var(--wp--custom--transition);
}
.site-header__menu .wp-block-navigation-item__content:hover {
	--versoo-trait: rgba(234, 110, 19, 0.5);
}
.site-header__menu .current-menu-item > .wp-block-navigation-item__content {
	--versoo-trait: var(--wp--preset--color--orange);
}

/* Icônes du menu : ajoutez la classe « icone-xxx » à un lien (Avancé > Classe CSS). */
.site-header__menu [class*="icone-"] > .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--versoo-icone) center / auto no-repeat;
	mask: var(--versoo-icone) center / auto no-repeat;
}
.icone-accueil { --versoo-icone: url(../images/icons/accueil.svg); }
.icone-recyclage { --versoo-icone: url(../images/icons/recyclage.svg); }
.icone-collecteurs { --versoo-icone: url(../images/icons/collecteurs.svg); }
.icone-partenaires { --versoo-icone: url(../images/icons/partenaires.svg); }
.icone-qui-sommes-nous { --versoo-icone: url(../images/icons/qui-sommes-nous.svg); }
.icone-contact { --versoo-icone: url(../images/icons/contact.svg); }
.icone-nos-bons { --versoo-icone: url(../images/icons/nos-bons.svg); }

/* Lien « Demander un devis » du menu : visible seulement dans le menu mobile ouvert, en bouton orange. */
.site-header__menu .lien-devis {
	display: none;
}
.site-header__menu .is-menu-open .lien-devis {
	display: block;
	margin-top: var(--wp--preset--spacing--16);
}
.site-header__menu .is-menu-open .lien-devis > .wp-block-navigation-item__content {
	padding: 0 20px;
	border-radius: var(--wp--preset--border-radius--12);
	color: var(--wp--preset--color--blanc-vert);
	background-color: var(--wp--preset--color--orange);
	box-shadow: var(--wp--preset--shadow--bouton-orange);
	font-weight: 600;
}
.site-header__menu .is-menu-open .lien-devis > .wp-block-navigation-item__content::after {
	content: none;
}

/* Menu mobile ouvert : onglets alignés à gauche, larges marges sur les côtés. */
.site-header__menu .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--48);
	text-align: left;
}
.site-header__menu .is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	align-items: flex-start;
}
.site-header__menu .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: var(--wp--preset--spacing--64);
	row-gap: var(--wp--preset--spacing--8);
	font-size: var(--wp--preset--font-size--20);
}

/* Menu complet à partir de 1440 px ; en dessous, bouton « menu ». */
@media (min-width: 600px) and (max-width: 1439px) {
	.site-header__menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.site-header__menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 1439px) {
	.site-header__menu {
		order: 3;
	}
	.site-header .site-header__cta {
		margin-left: auto;
	}
}

/* Petits écrans : logo réduit, le bouton devis passe dans le menu. */
@media (max-width: 599px) {
	.site-header .wp-block-site-logo {
		max-width: 120px;
	}
}
@media (max-width: 479px) {
	.site-header .site-header__cta {
		display: none;
	}
}

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

.site-footer__menu {
	padding-block: var(--wp--preset--spacing--8);
}
.site-footer .wp-block-navigation-item__content {
	transition: color var(--wp--custom--transition);
}
.site-footer .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--orange-texte);
}

@media (max-width: 781px) {
	.site-footer .site-footer__menu {
		gap: 0 var(--wp--preset--spacing--24);
	}
	.site-footer__bas,
	.site-footer__signature {
		justify-content: center;
		text-align: center;
	}
	.site-footer .site-footer__legal {
		justify-content: center;
	}
}

/* ----------------------------------------------------------------
 * Décors des sections (styles de blocs « Versoo »)
 * ------------------------------------------------------------- */

/* Une image dans une rangée garde sa taille (icônes des cartes). */
.is-layout-flex > .wp-block-image {
	flex-shrink: 0;
}

/* Groupe « Fond avec halos » : deux halos flous, taupe à gauche et vert à droite.
 * Variante « halos orange » : deux halos orange (page Recyclage). */
.wp-block-group:is(.is-style-halos, .is-style-halos-orange, .is-style-halos-taupe, .is-style-halos-vert) {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
}
/* Halos de la maquette (ellipses floutées), placés et dimensionnés comme à 1920 px.
 * Ils s'estompent en bas de la section pour ne pas laisser de bord visible. */
.wp-block-group:is(.is-style-halos, .is-style-halos-orange, .is-style-halos-taupe, .is-style-halos-vert)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(#000 60%, transparent);
	mask-image: linear-gradient(#000 60%, transparent);
	background-image: url(../images/halo-taupe.webp), url(../images/halo-vert.webp);
	background-repeat: no-repeat;
	background-size: 77.66vw auto, 77.45vw auto;
	background-position: -19.27vw -23.44vw, 39.64vw -15.83vw;
}
.wp-block-group:is(.is-style-halos-orange, .is-style-halos-taupe, .is-style-halos-vert)::before {
	background-image: url(../images/halo-orange-gauche.webp), url(../images/halo-orange-droite.webp);
	background-position: -27.5vw -15.21vw, 47.92vw -18.75vw;
}
.wp-block-group.is-style-halos-taupe::before {
	background-image: url(../images/halo-taupe-gauche.webp), url(../images/halo-taupe-droite.webp);
}
.wp-block-group.is-style-halos-vert::before {
	background-image: url(../images/halo-vert-gauche.webp), url(../images/halo-vert-droite.webp);
}

/* Cartes photo inclinées, avec un rectangle de couleur derrière. */
.cartes-hero > .wp-block-column {
	--versoo-angle-carte: -5deg;
	--versoo-angle-fond: 4deg;
	display: flex;
	justify-content: center;
}
.cartes-hero > .wp-block-column:nth-child(1) {
	translate: 0 8px;
}
.cartes-hero > .wp-block-column:nth-child(2) {
	--versoo-angle-carte: 7deg;
	--versoo-angle-fond: -4deg;
	translate: 0 -16px;
}
.cartes-hero > .wp-block-column:nth-child(3) {
	--versoo-angle-carte: 8deg;
	--versoo-angle-fond: -5deg;
}

/* Cartes empilées (mobile, tablette) : inclinaison réduite, sans décalage vertical. */
@media (max-width: 781px) {
	.cartes-hero > .wp-block-column:nth-child(n) {
		--versoo-angle-carte: -3deg;
		--versoo-angle-fond: 3deg;
		translate: none;
	}
	.cartes-hero > .wp-block-column:nth-child(even) {
		--versoo-angle-carte: 3deg;
		--versoo-angle-fond: -3deg;
	}
	.cartes-hero .wp-block-group:is(.is-style-carte-fond-taupe, .is-style-carte-fond-vert) {
		max-width: 400px;
	}
}

.wp-block-group:is(.is-style-carte-fond-taupe, .is-style-carte-fond-vert) {
	--versoo-fond: var(--wp--preset--color--taupe);
	position: relative;
	width: 100%;
	/* La taille suit aussi la hauteur de l'écran, pour que le hero tienne sans défiler. */
	max-width: min(440px, 46vh);
}
.wp-block-group.is-style-carte-fond-vert {
	--versoo-fond: var(--wp--preset--color--vert);
}
.wp-block-group:is(.is-style-carte-fond-taupe, .is-style-carte-fond-vert)::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--preset--border-radius--32);
	background-color: var(--versoo-fond);
	transform: translate(16px, 16px) rotate(var(--versoo-angle-fond, 4deg));
	transition: transform var(--wp--custom--transition-lente);
}

.carte-hero {
	position: relative;
	overflow: hidden;
	transform: rotate(var(--versoo-angle-carte, -5deg));
	transition: transform var(--wp--custom--transition-lente);
}

/* Survol (ou focus clavier) : la carte se redresse et se soulève, le rectangle derrière s'incline davantage. */
.wp-block-group:is(.is-style-carte-fond-taupe, .is-style-carte-fond-vert):is(:hover, :focus-within) .carte-hero {
	transform: translateY(-8px) rotate(0deg);
}
.wp-block-group:is(.is-style-carte-fond-taupe, .is-style-carte-fond-vert):is(:hover, :focus-within)::before {
	transform: translate(24px, 24px) rotate(calc(var(--versoo-angle-fond, 4deg) * 2));
}
.carte-hero__barre::after {
	content: "";
	flex: none;
	width: 40px;
	height: 40px;
	background-color: var(--wp--preset--color--blanc-vert);
	-webkit-mask: url(../images/fleche-carte.svg) center / contain no-repeat;
	mask: url(../images/fleche-carte.svg) center / contain no-repeat;
	transition: translate var(--wp--custom--transition-lente);
}
.carte-hero:hover .carte-hero__barre::after {
	translate: 4px 0;
}
/* Toute la carte est cliquable ; le contour de focus entoure la carte. */
.carte-hero a {
	color: inherit;
	text-decoration: none;
}
.carte-hero a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.carte-hero a:focus-visible {
	outline: none;
}
.carte-hero:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--noir);
	outline-offset: 4px;
}

/* Image « Fond taupe incliné ». */
.wp-block-image:is(.is-style-fond-incline, .is-style-fond-incline-orange) {
	position: relative;
	isolation: isolate;
}
.wp-block-image:is(.is-style-fond-incline, .is-style-fond-incline-orange)::before {
	content: "";
	position: absolute;
	inset: -2.3%;
	z-index: -1;
	border-radius: var(--wp--preset--border-radius--32);
	background-color: var(--wp--preset--color--taupe);
	transform: rotate(10deg);
}
.wp-block-image.is-style-fond-incline-orange::before {
	inset: 0;
	border-radius: var(--wp--preset--border-radius--24);
	background-color: var(--wp--preset--color--orange);
	transform: rotate(4deg);
}

/* Colonnes « Photo centrée sur les cartes » (2 colonnes : titre + cartes, puis photo).
 * Sur ordinateur, la photo est centrée sur les cartes seules ; le titre reste collé au-dessus des cartes.
 * La colonne photo a une hauteur nulle : elle ne compte pas dans la hauteur de la section
 * et la photo déborde à parts égales au-dessus et au-dessous du centre des cartes. */
@media (min-width: 782px) {
	.wp-block-columns.is-style-photo-centree {
		display: grid;
		grid-template-columns: 54% minmax(0, 1fr);
		grid-template-rows: auto auto;
		row-gap: 0;
	}
	.wp-block-columns.is-style-photo-centree > .wp-block-column:first-child {
		display: contents;
	}
	.wp-block-columns.is-style-photo-centree > .wp-block-column:first-child > :first-child {
		grid-column: 1;
		grid-row: 1;
		margin-block-end: var(--wp--preset--spacing--24);
	}
	.wp-block-columns.is-style-photo-centree > .wp-block-column:first-child > :not(:first-child) {
		grid-column: 1;
		grid-row: 2;
		margin-block-start: 0;
	}
	.wp-block-columns.is-style-photo-centree > .wp-block-column:last-child {
		grid-column: 2;
		grid-row: 2;
		align-self: center;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 0;
		padding-block: 0;
	}
}
/* Grands écrans : la photo est plus haute que les cartes, on garde de la place sous la section. */
@media (min-width: 1600px) {
	.wp-block-columns.is-style-photo-centree {
		padding-block-end: var(--wp--preset--spacing--48);
	}
}

/* Titres « sans-retour-mobile » : le retour à la ligne forcé est ignoré sur téléphone (titre plus court). */
@media (max-width: 599px) {
	.sans-retour-mobile br {
		display: none;
	}
}

/* Classe « photo-portrait » : quand les colonnes s'empilent, la photo verticale garde une taille raisonnable. */
@media (max-width: 781px) {
	.wp-block-image.photo-portrait {
		max-width: 292px;
	}
}

/* Très petits écrans : les mots trop longs des titres sont coupés avec un trait d'union plutôt que de dépasser. */
@media (max-width: 399px) {
	:is(h1, h2) {
		-webkit-hyphens: auto;
		hyphens: auto;
		overflow-wrap: break-word;
	}
}

/* Mobile : les textes centrés passent à gauche pour une lecture plus facile. */
@media (max-width: 781px) {
	:root main .has-text-align-center {
		text-align: left;
	}
	main .wp-block-buttons.is-content-justification-center {
		justify-content: flex-start;
	}
	main .wp-block-columns.is-style-separateurs .wp-block-image.aligncenter,
	main .wp-block-columns.is-style-separateurs .is-layout-constrained > * {
		margin-left: 0 !important;
	}
	main .wp-block-columns.is-style-separateurs .wp-block-image.aligncenter {
		text-align: left;
	}
	main .wp-block-columns.is-style-separateurs > .wp-block-column {
		padding-inline: 0 !important;
	}
}

/* Colonnes « Avec traits de séparation ». */
.wp-block-columns.is-style-separateurs > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--wp--preset--color--gris);
}
@media (max-width: 781px) {
	.wp-block-columns.is-style-separateurs > .wp-block-column + .wp-block-column {
		padding-top: var(--wp--preset--spacing--24);
		border-top: 1px solid var(--wp--preset--color--gris);
		border-left: 0;
	}
}

/* Carrousel de logos : défilement continu (voir assets/js/carrousel-logos.js). */
.carrousel-logos {
	overflow: hidden;
}
.carrousel-logos__piste {
	justify-content: center;
}
.carrousel-logos__piste .wp-block-image {
	flex: none;
}
.carrousel-logos.is-anime {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 128px, #000 calc(100% - 128px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 128px, #000 calc(100% - 128px), transparent);
}
.carrousel-logos.is-anime .carrousel-logos__piste {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	animation: versoo-defilement 48s linear infinite;
}
.carrousel-logos.is-anime:hover .carrousel-logos__piste {
	animation-play-state: paused;
}
@keyframes versoo-defilement {
	to {
		transform: translateX(-50%);
	}
}

/* ----------------------------------------------------------------
 * Blocs inclinés, frises, étapes et FAQ (page Recyclage, réutilisables)
 * ------------------------------------------------------------- */

/* Groupe « Bloc sur fond taupe / vert incliné » : un rectangle de couleur penché derrière le bloc. */
.wp-block-group:is(.is-style-bloc-incline-taupe, .is-style-bloc-incline-vert, .is-style-bloc-incline-orange) {
	--versoo-fond: var(--wp--preset--color--taupe);
	--versoo-angle-fond: -4deg;
	--versoo-decalage: 16px 8px;
	position: relative;
}
/* Le rectangle passe derrière le fond du bloc : la pile d'affichage est créée par le parent. */
:has(> .wp-block-group:is(.is-style-bloc-incline-taupe, .is-style-bloc-incline-vert, .is-style-bloc-incline-orange)) {
	isolation: isolate;
}
.wp-block-group.is-style-bloc-incline-vert {
	--versoo-fond: var(--wp--preset--color--vert);
	--versoo-angle-fond: -7deg;
	--versoo-decalage: 0 0;
}
.wp-block-group.is-style-bloc-incline-orange {
	--versoo-fond: var(--wp--preset--color--orange);
	--versoo-angle-fond: 4deg;
	--versoo-decalage: 0 0;
}
.wp-block-group:is(.is-style-bloc-incline-taupe, .is-style-bloc-incline-vert, .is-style-bloc-incline-orange)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: var(--wp--preset--border-radius--48);
	background-color: var(--versoo-fond);
	translate: var(--versoo-decalage);
	rotate: var(--versoo-angle-fond);
}
.wp-block-group.is-style-bloc-incline-vert::before {
	inset: 3% 1.5%;
}
@media (max-width: 781px) {
	.wp-block-group:is(.is-style-bloc-incline-taupe, .is-style-bloc-incline-vert, .is-style-bloc-incline-orange) {
		--versoo-angle-fond: -3deg;
		--versoo-decalage: 0 0;
	}
}

/* Colonnes « Photos inclinées sur fond orange » : chaque photo penche, un rectangle orange derrière. */
/* Mêmes inclinaisons que les cartes du hero de l'accueil. */
.wp-block-columns:is(.is-style-photos-inclinees, .is-style-photos-inclinees-taupe, .is-style-photos-inclinees-vert) > .wp-block-column {
	--versoo-angle-photo: -5deg;
	--versoo-angle-fond: 4deg;
}
.wp-block-columns:is(.is-style-photos-inclinees, .is-style-photos-inclinees-taupe, .is-style-photos-inclinees-vert) > .wp-block-column:nth-child(3n + 2) {
	--versoo-angle-photo: 7deg;
	--versoo-angle-fond: -4deg;
}
.wp-block-columns:is(.is-style-photos-inclinees, .is-style-photos-inclinees-taupe, .is-style-photos-inclinees-vert) > .wp-block-column:nth-child(3n) {
	--versoo-angle-photo: 8deg;
	--versoo-angle-fond: -5deg;
}
.wp-block-columns:is(.is-style-photos-inclinees, .is-style-photos-inclinees-taupe, .is-style-photos-inclinees-vert) .wp-block-image {
	position: relative;
	isolation: isolate;
	margin: 0;
	rotate: var(--versoo-angle-photo);
}
.wp-block-columns:is(.is-style-photos-inclinees, .is-style-photos-inclinees-taupe, .is-style-photos-inclinees-vert) .wp-block-image::before {
	content: "";
	position: absolute;
	inset: -2.5%;
	z-index: -1;
	border-radius: var(--wp--preset--border-radius--32);
	background-color: var(--versoo-fond-photos, var(--wp--preset--color--orange));
	rotate: calc(var(--versoo-angle-fond) - var(--versoo-angle-photo));
}
.wp-block-columns:is(.is-style-photos-inclinees, .is-style-photos-inclinees-taupe, .is-style-photos-inclinees-vert) .wp-block-image img {
	width: 100%;
	box-shadow: var(--versoo-ombre-photos, var(--wp--preset--shadow--bouton-orange));
}
.wp-block-columns.is-style-photos-inclinees-taupe {
	--versoo-fond-photos: var(--wp--preset--color--taupe);
	--versoo-ombre-photos: var(--wp--preset--shadow--bouton-taupe);
}
.wp-block-columns.is-style-photos-inclinees-vert {
	--versoo-fond-photos: var(--wp--preset--color--vert);
	--versoo-ombre-photos: var(--wp--preset--shadow--bouton-vert);
}
@media (max-width: 781px) {
	.wp-block-columns:is(.is-style-photos-inclinees, .is-style-photos-inclinees-taupe, .is-style-photos-inclinees-vert) > .wp-block-column:nth-child(n) {
		--versoo-angle-photo: -3deg;
		--versoo-angle-fond: 3deg;
	}
	.wp-block-columns:is(.is-style-photos-inclinees, .is-style-photos-inclinees-taupe, .is-style-photos-inclinees-vert) > .wp-block-column:nth-child(even) {
		--versoo-angle-photo: 3deg;
		--versoo-angle-fond: -3deg;
	}
	.wp-block-columns:is(.is-style-photos-inclinees, .is-style-photos-inclinees-taupe, .is-style-photos-inclinees-vert) .wp-block-image {
		max-width: 480px;
		margin-inline: auto;
	}
}

/* Paragraphe « Étiquette verte / taupe » : pastille à bord coloré, alignée à droite. */
p:is(.is-style-etiquette-verte, .is-style-etiquette-taupe) {
	box-sizing: border-box;
	width: fit-content;
	min-width: min(100%, 16.5em);
	margin-left: auto;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	border: 2px solid var(--wp--preset--color--vert);
	border-radius: var(--wp--preset--border-radius--pastille);
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--vert-profond);
	font-weight: 700;
	text-align: center;
}
p.is-style-etiquette-taupe {
	border-color: var(--wp--preset--color--taupe);
	color: var(--wp--preset--color--taupe-texte);
}

/* Titre « Pastille » : nom en pastille de couleur (couleurs choisies dans le bloc). */
:is(h1, h2, h3, h4, h5, h6).is-style-pastille {
	flex: none;
	min-width: 8em;
	padding: 12px 0.5em;
	border-radius: var(--wp--preset--border-radius--pastille);
	text-align: center;
}

/* Une filière : étiquette, puis pastille et frise côte à côte (empilées si la carte est étroite). */
.filiere {
	container-type: inline-size;
}
.filiere + .filiere {
	border-top: 2px solid var(--wp--preset--color--blanc-taupe);
}
@container (max-width: 600px) {
	.filiere__ligne.is-layout-flex {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Listes « Frise verte » et « Frise taupe » : une étape par élément, reliées par un trait. */
.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) {
	--versoo-frise: var(--wp--preset--color--vert);
	display: flex;
	flex: 1 1 auto;
	margin: 0;
	/* Le trait de la frise s'aligne sur le milieu de la pastille voisine. */
	padding: calc((var(--wp--preset--font-size--32) * 1.375 + 24px) / 2 - 22px) 0 0;
	list-style: none;
}
.wp-block-list.is-style-frise-refus {
	--versoo-frise: var(--wp--preset--color--taupe);
}
.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) > li {
	position: relative;
	flex: 0 1 169px;
	min-width: 0;
	margin: 0;
	padding-top: 60px;
	font-weight: 700;
	line-height: 1.3125;
	text-align: center;
	overflow-wrap: break-word;
}
.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) > li::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 8px;
	left: 50%;
	width: 28px;
	height: 28px;
	margin-left: -14px;
	border-radius: 50%;
	background-color: var(--versoo-frise);
}
.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) > li::after {
	content: "";
	position: absolute;
	top: 20px;
	right: 0;
	left: 0;
	height: 4px;
	background-color: var(--versoo-frise);
}
.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) > li:first-child::after {
	left: 50%;
}
.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) > li:last-child::after {
	right: 50%;
}
.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) > li:last-child::before {
	top: 0;
	width: 44px;
	height: 44px;
	margin-left: -22px;
}
/* Frise refusée : la dernière étape porte une croix. */
.wp-block-list.is-style-frise-refus > li:last-child::before {
	background: var(--versoo-frise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 1l12 12M13 1L1 13' stroke='%23FAF8F5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
/* Carte très étroite (mobile) : la frise devient verticale. */
@container (max-width: 480px) {
	.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) {
		flex-direction: column;
		padding-top: 0;
	}
	.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) > li {
		flex: none;
		display: flex;
		align-items: center;
		min-height: 56px;
		padding: 0 0 0 60px;
		text-align: left;
	}
	.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) > li::before {
		top: 50%;
		left: 22px;
		margin-top: -14px;
	}
	.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) > li:last-child::before {
		top: 50%;
		margin-top: -22px;
	}
	.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) > li::after {
		top: 0;
		bottom: 0;
		left: 20px;
		width: 4px;
		height: auto;
	}
	.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) > li:first-child::after {
		top: 50%;
		left: 20px;
	}
	.wp-block-list:is(.is-style-frise-verte, .is-style-frise-refus) > li:last-child::after {
		right: auto;
		bottom: 50%;
	}
}

/* Liste numérotée « Étapes numérotées » : grand numéro vert clair, étape surlignée, traits entre les étapes. */
.wp-block-list.is-style-etapes-numerotees {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: versoo-etape;
}
.wp-block-list.is-style-etapes-numerotees > li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--24);
	margin: 0;
	padding-block: var(--wp--preset--spacing--8);
	counter-increment: versoo-etape;
	font-size: var(--wp--preset--font-size--24);
	font-weight: 700;
	line-height: 1.25;
}
.wp-block-list.is-style-etapes-numerotees > li + li {
	border-top: 1px solid var(--wp--preset--color--gris);
}
.wp-block-list.is-style-etapes-numerotees > li::before {
	content: counter(versoo-etape);
	flex: 0 0 1.125em;
	color: var(--wp--preset--color--vert-clair);
	font-size: var(--wp--preset--font-size--80);
	line-height: 1.2;
	text-align: center;
}
.wp-block-list.is-style-etapes-numerotees mark {
	padding: 0.5em 1em;
	border-radius: var(--wp--preset--border-radius--pastille);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
@media (max-width: 599px) {
	.wp-block-list.is-style-etapes-numerotees > li {
		gap: var(--wp--preset--spacing--16);
		font-size: var(--wp--preset--font-size--20);
		overflow-wrap: normal;
	}
	.wp-block-list.is-style-etapes-numerotees mark {
		padding: 0.4em 0.75em;
	}
}

/* Colonnes « empiler-tablette » : sur tablette, les colonnes passent l'une sous l'autre. */
@media (min-width: 782px) and (max-width: 1023px) {
	.wp-block-columns.empiler-tablette {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.empiler-tablette > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1;
	}
}

/* FAQ (bloc Détails) : question en bandeau, bouton + / × rond, réponse sur fond blanc. */
.wp-block-details {
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16) var(--wp--preset--spacing--8) var(--wp--preset--spacing--32);
	border-radius: var(--wp--preset--border-radius--24);
	background-color: var(--wp--preset--color--blanc-taupe);
	transition: background-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}
.wp-block-details[open] {
	padding-block: var(--wp--preset--spacing--16);
}
/* Pendant une fermeture animée (classe posée par assets/js/accordeon.js), l'aspect « fermé » revient tout de suite. */
.wp-block-details[open]:not(.is-fermeture) {
	background-color: var(--wp--preset--color--blanc);
	box-shadow: var(--wp--preset--shadow--carte);
}
.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--24);
	min-height: var(--wp--custom--cible-tactile);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--20);
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
}
.wp-block-details summary::-webkit-details-marker {
	display: none;
}
.wp-block-details summary::after {
	content: "+";
	content: "+" / "";
	display: grid;
	flex: none;
	place-items: center;
	width: var(--wp--custom--cible-tactile);
	height: var(--wp--custom--cible-tactile);
	border-radius: 50%;
	background-color: var(--wp--preset--color--blanc);
	box-shadow: var(--wp--preset--shadow--carte);
	font-size: 28px;
	line-height: 1;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), rotate var(--wp--custom--transition-lente);
}
/* Ouvert : le « + » tourne d'un huitième de tour et devient une croix. */
.wp-block-details[open]:not(.is-fermeture) summary::after {
	rotate: 45deg;
	background-color: var(--wp--preset--color--taupe);
	box-shadow: none;
	color: var(--wp--preset--color--blanc-vert);
}
.wp-block-details summary:hover::after {
	background-color: var(--wp--preset--color--blanc-taupe);
}
.wp-block-details[open]:not(.is-fermeture) summary:hover::after {
	background-color: var(--wp--custom--color--taupe-survol);
}
.wp-block-details > :not(summary) {
	margin-block-start: var(--wp--preset--spacing--16);
}
/* La réponse apparaît en fondu, avec un léger glissement. */
.wp-block-details[open] > :not(summary) {
	animation: versoo-apparition var(--wp--custom--transition-lente) both;
}
@keyframes versoo-apparition {
	from {
		opacity: 0;
		translate: 0 -8px;
	}
}

/* ----------------------------------------------------------------
 * Page Collecteurs (styles réutilisables)
 * ------------------------------------------------------------- */

/* Colonnes « Cartes légèrement inclinées » : le fond coloré de chaque carte penche un peu, alternativement.
 * La carte du milieu descend d'un cran sur ordinateur. */
.wp-block-columns.is-style-cartes-inclinees > .wp-block-column > .wp-block-group:is(.is-style-bloc-incline-taupe, .is-style-bloc-incline-vert, .is-style-bloc-incline-orange) {
	--versoo-angle-fond: -2deg;
	--versoo-decalage: 8px 8px;
	height: 100%;
}
.wp-block-columns.is-style-cartes-inclinees > .wp-block-column:nth-child(even) > .wp-block-group:is(.is-style-bloc-incline-taupe, .is-style-bloc-incline-vert, .is-style-bloc-incline-orange) {
	--versoo-angle-fond: 2deg;
}
.wp-block-columns.is-style-cartes-inclinees .wp-block-group.is-style-bloc-incline-vert::before {
	inset: 0;
}
@media (min-width: 782px) {
	.wp-block-columns.is-style-cartes-inclinees.decaler-milieu > .wp-block-column:nth-child(2) {
		padding-top: var(--wp--preset--spacing--64);
	}
	.wp-block-columns.is-style-cartes-inclinees.decaler-milieu > .wp-block-column > .wp-block-group {
		height: auto;
	}
}

/* Classe « fond-penche-faible » : fond à peine incliné (-1°), pour les grandes cartes. */
.wp-block-group.fond-penche-faible:is(.is-style-bloc-incline-taupe, .is-style-bloc-incline-vert, .is-style-bloc-incline-orange) {
	--versoo-angle-fond: -1deg;
	--versoo-decalage: 12px 16px;
}
.wp-block-group.fond-penche-faible:is(.is-style-bloc-incline-taupe, .is-style-bloc-incline-vert, .is-style-bloc-incline-orange)::before {
	inset: 0;
}

/* Classe « carte-inclinee-legere » : fond incliné de 4° seulement, à la taille de la carte. */
.wp-block-group.carte-inclinee-legere:is(.is-style-bloc-incline-taupe, .is-style-bloc-incline-vert, .is-style-bloc-incline-orange) {
	--versoo-angle-fond: 4deg;
	--versoo-decalage: 0 0;
}
.wp-block-group.carte-inclinee-legere:is(.is-style-bloc-incline-taupe, .is-style-bloc-incline-vert, .is-style-bloc-incline-orange)::before {
	inset: 0;
}

/* Listes « Coches orange / taupe / vertes » : chaque ligne commence par une coche dans un carré coloré. */
.wp-block-list:is(.is-style-coches-orange, .is-style-coches-taupe, .is-style-coches-vert) {
	--versoo-coche: var(--wp--preset--color--orange);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	margin: 0;
	padding: 0;
	list-style: none;
}
.wp-block-list.is-style-coches-taupe {
	--versoo-coche: var(--wp--preset--color--taupe);
}
.wp-block-list.is-style-coches-vert {
	--versoo-coche: var(--wp--preset--color--vert);
}
.wp-block-list:is(.is-style-coches-orange, .is-style-coches-taupe, .is-style-coches-vert) > li {
	position: relative;
	min-height: var(--wp--custom--cible-tactile);
	margin: 0;
	padding: 8px 0 8px calc(var(--wp--custom--cible-tactile) + var(--wp--preset--spacing--16));
}
.wp-block-list:is(.is-style-coches-orange, .is-style-coches-taupe, .is-style-coches-vert) > li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--wp--custom--cible-tactile);
	height: var(--wp--custom--cible-tactile);
	border-radius: var(--wp--preset--border-radius--12);
	background: var(--versoo-coche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 11l4 4 8-9' fill='none' stroke='%23F9FAF4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
	translate: 0 -50%;
}
/* Variante en ligne (plusieurs points côte à côte), ajoutée avec la classe « coches-en-ligne ». */
@media (min-width: 782px) {
	.wp-block-list.coches-en-ligne {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--24) var(--wp--preset--spacing--32);
	}
}
@media (min-width: 1024px) {
	.wp-block-list.coches-en-ligne {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

/* Paragraphe « Encadré » : petit bloc arrondi sur fond clair (couleur de fond choisie dans le bloc). */
p.is-style-encadre {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	border-radius: var(--wp--preset--border-radius--12);
	font-weight: 600;
}
p.is-style-encadre:not(.has-background) {
	background-color: var(--wp--preset--color--blanc-taupe);
}

/* Visuel de la Box : les deux chiffres clés chevauchent le bas de la photo. */
.visuel-chiffres {
	position: relative;
	z-index: 1;
	margin-top: calc(var(--wp--preset--spacing--96) * -1) !important;
	padding-inline: var(--wp--preset--spacing--24);
}
@media (max-width: 599px) {
	.visuel-chiffres {
		margin-top: calc(var(--wp--preset--spacing--32) * -1) !important;
		padding-inline: var(--wp--preset--spacing--8);
	}
}

/* Colonnes « empiler-moyen » : empilées jusqu'à 1280 px (contenu dense, comme le tableau des formules). */
@media (min-width: 782px) and (max-width: 1279px) {
	.wp-block-columns.empiler-moyen {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.empiler-moyen > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1;
	}
}

/* Classe « sans-retour-tablette » : retours à la ligne forcés ignorés sous 1280 px. */
@media (max-width: 1279px) {
	.sans-retour-tablette br {
		display: none;
	}
}

/* Tableau des formules : en-têtes visibles seulement quand les colonnes sont côte à côte (lignes empilées sous 1280 px). */
@media (max-width: 1279px) {
	.formules-entete {
		display: none !important;
	}
}

/* FAQ, style « Bouton orange » : le bouton ouvert est orange. */
.wp-block-details.is-style-orange[open]:not(.is-fermeture) summary::after {
	background-color: var(--wp--preset--color--orange);
}
.wp-block-details.is-style-orange[open]:not(.is-fermeture) summary:hover::after {
	background-color: var(--wp--custom--color--orange-survol);
}

/* ----------------------------------------------------------------
 * Page Partenaires (styles réutilisables)
 * ------------------------------------------------------------- */

/* Image « Photo penchée, fond taupe / vert » : la photo penche d'un côté, le rectangle coloré derrière de l'autre. */
.wp-block-image:is(.is-style-photo-inclinee-taupe, .is-style-photo-inclinee-vert, .is-style-photo-inclinee-orange) {
	--versoo-angle-photo: 4deg;
	--versoo-angle-fond: -4deg;
	--versoo-fond: var(--wp--preset--color--taupe);
	position: relative;
	isolation: isolate;
	rotate: var(--versoo-angle-photo);
}
.wp-block-image.is-style-photo-inclinee-vert {
	--versoo-angle-photo: -4deg;
	--versoo-angle-fond: -12deg;
	--versoo-fond: var(--wp--preset--color--vert);
}
.wp-block-image:is(.is-style-photo-inclinee-taupe, .is-style-photo-inclinee-vert, .is-style-photo-inclinee-orange)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: var(--wp--preset--border-radius--32);
	background-color: var(--versoo-fond);
	rotate: calc(var(--versoo-angle-fond) - var(--versoo-angle-photo));
}
.wp-block-image.is-style-photo-inclinee-orange {
	--versoo-angle-photo: 0deg;
	--versoo-angle-fond: 2deg;
	--versoo-fond: var(--wp--preset--color--orange);
}
/* Classe « photo-droite » : la photo reste droite, seul le fond penche (-3°). */
.wp-block-image.photo-droite:is(.is-style-photo-inclinee-taupe, .is-style-photo-inclinee-vert, .is-style-photo-inclinee-orange) {
	--versoo-angle-photo: 0deg;
	--versoo-angle-fond: -3deg;
}
/* La photo occupe toute la largeur de son cadre, même si le fichier est plus petit. */
.wp-block-image:is(.is-style-photo-inclinee-taupe, .is-style-photo-inclinee-vert, .is-style-photo-inclinee-orange) img {
	width: 100%;
}
/* Photo panoramique : cadrage moins allongé sur téléphone, pour rester lisible. */
@media (max-width: 781px) {
	.wp-block-image.photo-droite img {
		aspect-ratio: 3 / 2 !important;
	}
}
/* Classe « penche-leger » : inclinaison plus douce (photo 2°, fond -4°). */
.wp-block-image.penche-leger:is(.is-style-photo-inclinee-taupe, .is-style-photo-inclinee-vert, .is-style-photo-inclinee-orange) {
	--versoo-angle-photo: 2deg;
	--versoo-angle-fond: -4deg;
}
@media (max-width: 781px) {
	.wp-block-image:is(.is-style-photo-inclinee-taupe, .is-style-photo-inclinee-vert, .is-style-photo-inclinee-orange) {
		--versoo-angle-photo: 2deg;
		--versoo-angle-fond: -3deg;
		max-width: 420px;
		margin-inline: auto;
	}
}

/* Classe « decaler-droite » : la carte est décalée vers la droite sur ordinateur (effet escalier). */
@media (min-width: 782px) {
	.decaler-droite {
		margin-left: var(--wp--preset--spacing--64) !important;
	}
}

/* Cartes de documents (page « Nos bons ») : largeur de la maquette, centrées, même quand il n'y en a qu'une. */
.wp-block-columns.cartes-bons {
	justify-content: center;
}
@media (min-width: 782px) {
	.wp-block-columns.cartes-bons > .wp-block-column {
		flex: 0 1 546px;
	}
}
/* L'aperçu suit la largeur de l'écran (300 px à 1920 px) pour que la section tienne dans l'écran. */
.cartes-bons .wp-block-image img {
	width: clamp(200px, 15.625vw, 300px) !important;
	max-width: 100%;
	height: auto;
}

/* Paragraphe « lien-discret » : le lien a l'aspect du texte (téléphone, e-mail), souligné seulement au survol. */
.lien-discret a {
	color: inherit;
	text-decoration: none;
}
.lien-discret a:hover {
	text-decoration: underline;
}

/* Plan d'accès (page Contact) : fond vert à peine incliné derrière la carte. */
.plan-acces {
	position: relative;
}
.plan-acces .wp-block-image.photo-droite {
	--versoo-angle-fond: -1deg;
}
.plan-acces .wp-block-image img {
	object-position: 50% 43%;
}

/* Carte interactive (assets/js/carte-interactive.js) : la carte Google Maps remplace l'image du plan. */
.carte-interactive__iframe {
	display: block;
	width: 100%;
	aspect-ratio: 85 / 26;
	min-height: 360px;
	border: 0;
	border-radius: var(--wp--preset--border-radius--32);
}
/* Focus clavier : contour autour de la carte, comme pour les autres éléments. */
/* Le focus passe à l'intérieur de la carte Google : la classe est posée par carte-interactive.js. */
.carte-interactive__iframe.is-focus-clavier {
	outline: 2px solid var(--wp--preset--color--noir);
	outline-offset: 2px;
}
@media (max-width: 781px) {
	.carte-interactive__iframe {
		aspect-ratio: 1 / 1;
	}
}

/* ----------------------------------------------------------------
 * Page Petite Box (styles réutilisables)
 * ------------------------------------------------------------- */

/* Numéro d'étape décoratif : couleur de l'étape, adoucie. */
p.numero-etape {
	margin: 0;
	line-height: 1;
	opacity: 0.4;
}

/* Colonnes « etapes-fleches » : une flèche taupe entre chaque étape, sur ordinateur. */
@media (min-width: 782px) {
	.wp-block-columns.etapes-fleches > .wp-block-column {
		position: relative;
	}
	.wp-block-columns.etapes-fleches > .wp-block-column:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 50%;
		right: calc(var(--wp--preset--spacing--64) * -1);
		width: var(--wp--preset--spacing--64);
		height: 48px;
		background-color: var(--wp--preset--color--taupe);
		-webkit-mask: url(../images/fleche-etape.svg) center / 48px no-repeat;
		mask: url(../images/fleche-etape.svg) center / 48px no-repeat;
		translate: 0 -50%;
	}
}

/* Classe « fond-vert-fonce » : le fond incliné derrière le bloc est vert foncé. */
.wp-block-group.fond-vert-fonce:is(.is-style-bloc-incline-taupe, .is-style-bloc-incline-vert, .is-style-bloc-incline-orange) {
	--versoo-fond: var(--wp--preset--color--vert-fonce);
	--versoo-angle-fond: 1deg;
}

/* ----------------------------------------------------------------
 * Formulaires (inc/formulaires.php)
 * ------------------------------------------------------------- */

.formulaire-versoo form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}
.formulaire-versoo__champ {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
}
.formulaire-versoo label {
	font-weight: 600;
}
.formulaire-versoo__requis {
	color: var(--wp--preset--color--orange-texte);
}
.formulaire-versoo__aide {
	color: var(--wp--preset--color--gris-fonce);
}
/* Bordure taupe : contraste suffisant (3:1) pour repérer les champs. */
.formulaire-versoo :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
	box-sizing: border-box;
	width: 100%;
	min-height: 56px;
	padding: 14px var(--wp--preset--spacing--16);
	border: 1px solid var(--wp--preset--color--taupe);
	border-radius: var(--wp--preset--border-radius--12);
	background-color: var(--wp--preset--color--blanc-fond);
	color: var(--wp--preset--color--noir);
	font: inherit;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}
.formulaire-versoo textarea {
	min-height: 150px;
	resize: vertical;
}
/* Liste déroulante : flèche dessinée par le thème, à droite (sélecteur renforcé pour garder la marge droite). */
.formulaire-versoo select[name] {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 8.25 11 13.75l5.5-5.5' fill='none' stroke='%231A1A19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 20px;
	cursor: pointer;
}
/* Formulaire en grille (contact) : trois colonnes, le message occupe deux colonnes sur deux lignes. */
.formulaire-versoo form.formulaire-versoo__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--24);
}
.formulaire-versoo__grille > .wp-block-buttons {
	grid-column: 1 / -1;
}
/* Ordre du code : … Téléphone, Effectif, Message (ordre de lecture et de tabulation) ;
 * sur trois colonnes, le message est placé à droite de ces deux champs. */
.formulaire-versoo__champ--grand {
	grid-column: 2 / span 2;
	grid-row: 3 / span 2;
}
.formulaire-versoo__champ--grand textarea {
	flex: 1;
}
/* Grille à six colonnes (devis) : champs au tiers, à la moitié ou sur toute la largeur. */
.formulaire-versoo form.formulaire-versoo__grille.formulaire-versoo__grille--six {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.formulaire-versoo__grille--six > .formulaire-versoo__champ--tiers {
	grid-column: span 2;
}
.formulaire-versoo__grille--six > .formulaire-versoo__champ--moitie {
	grid-column: span 3;
}
.formulaire-versoo__grille--six > .formulaire-versoo__champ--pleine {
	grid-column: 1 / -1;
}
@media (min-width: 782px) and (max-width: 1599px) {
	.formulaire-versoo form.formulaire-versoo__grille.formulaire-versoo__grille--six textarea {
		min-height: 88px;
		height: 88px;
	}
}
@media (max-width: 1199px) {
	.formulaire-versoo form.formulaire-versoo__grille.formulaire-versoo__grille--six {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.formulaire-versoo__grille--six > :is(.formulaire-versoo__champ--tiers, .formulaire-versoo__champ--moitie) {
		grid-column: span 1;
	}
	/* Sur deux colonnes, ces champs prennent toute la ligne pour garder Nom/Prénom et Ville/Code postal ensemble. */
	.formulaire-versoo__grille--six > .formulaire-versoo__champ--seul-tablette {
		grid-column: 1 / -1;
	}
}
@media (max-width: 781px) {
	.formulaire-versoo form.formulaire-versoo__grille.formulaire-versoo__grille--six {
		grid-template-columns: minmax(0, 1fr);
	}
	.formulaire-versoo__grille--six > .formulaire-versoo__champ {
		grid-column: 1 / -1;
	}
}

/* Écrans moyens : deux colonnes, le message passe en dernier sur toute la largeur. */
@media (min-width: 782px) and (max-width: 1599px) {
	.formulaire-versoo form.formulaire-versoo__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	}
	.formulaire-versoo form.formulaire-versoo__grille textarea {
		flex: none;
		min-height: 120px;
		height: 120px;
	}
	.carte-formulaire {
		padding-block: var(--wp--preset--spacing--32) !important;
	}
	.formulaire-versoo__champ--grand {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}
@media (max-width: 781px) {
	.formulaire-versoo form.formulaire-versoo__grille {
		grid-template-columns: minmax(0, 1fr);
	}
	.formulaire-versoo__champ--grand {
		grid-column: auto;
		grid-row: auto;
	}
}
.formulaire-versoo :is(input, textarea):hover {
	border-color: var(--wp--preset--color--taupe-texte);
}
.formulaire-versoo :is(input, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--noir);
	outline-offset: 2px;
	background-color: var(--wp--preset--color--blanc);
}
.formulaire-versoo [aria-invalid="true"] {
	border-color: var(--wp--preset--color--orange-texte);
	border-width: 2px;
}
.formulaire-versoo__erreur {
	color: var(--wp--preset--color--orange-texte);
	font-weight: 600;
}
.formulaire-versoo__message {
	margin: 0 0 var(--wp--preset--spacing--24);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	border-radius: var(--wp--preset--border-radius--12);
	font-weight: 600;
}
.formulaire-versoo__message--succes {
	background-color: var(--wp--preset--color--vert-tres-clair);
}
.formulaire-versoo__message--erreur {
	background-color: var(--wp--preset--color--blanc-orange);
	color: var(--wp--preset--color--orange-texte);
}
.formulaire-versoo button {
	cursor: pointer;
	border: 0;
	font: inherit;
	font-weight: 600;
}
/* Champ piège : hors de l'écran, jamais vu ni atteint au clavier. */
.formulaire-versoo__piege {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Texte lu uniquement par les lecteurs d'écran. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}