/*
 * Habillage des motifs.
 *
 * Seul CSS du thème, et volontairement court : tout ce que theme.json sait
 * exprimer (couleurs, tailles de texte, largeurs) n'est PAS ici. Ne reste que
 * ce qu'il ne sait pas dire : un picto rond, une grille resserree.
 *
 * Comparer avec cc-2026 : 11 feuilles, 1 030 lignes.
 *
 * Chargee aussi dans l'editeur (add_editor_style) : le rendu y est identique
 * au rendu public.
 */

/* --- Trois parcours -------------------------------------------------- */

.motif-parcours {
	margin-block: var(--wp--preset--spacing--50, 3rem);
}

/* Les pictos du site sont ronds : on impose la forme plutot que de compter
   sur le fichier televerse par le metier. */
.motif-parcours__picto img {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 50%;
}

/* --- Quatre arguments ------------------------------------------------ */

.motif-arguments {
	margin-block: var(--wp--preset--spacing--50, 3rem);
	padding: 2rem 1rem;
}

.motif-arguments__icone img {
	max-height: 72px;
	width: auto;
}

/* --- Encart d'appel -------------------------------------------------- */

.motif-appel {
	margin-block: var(--wp--preset--spacing--50, 3rem);
	padding: 2rem 1rem;
}

/* =====================================================================
 * Page « Pros » — maquette Figma « ONE PAGE — PROS »
 *
 * Une classe par motif (patterns/*.php). Toutes les couleurs viennent de la
 * palette ; les fonds de section viennent des styles de section
 * (styles/sections/), que le metier choisit dans Styles.
 * ===================================================================== */

/* --- Socle commun ---------------------------------------------------- */

/* Les sections s'enchainent bord a bord, sans l'ecart que l'editeur pose
   entre deux blocs : sinon une bande blanche coupe chaque fond. */
body :is(
	.motif-heros, .motif-en-tete, .motif-moments, .motif-etapes,
	.motif-appel-final, .motif-formules, .motif-cartes, .motif-logos,
	.motif-chiffres, .motif-temoignage
) {
	margin-block: 0;
}

.cc-titre {
	font-size: clamp(42px, 31.4366px + 2.8169vw, 72px);
	line-height: clamp(40px, 28.7324px + 3.0047vw, 72px);
	letter-spacing: -0.01em;
}

.cc-sous-titre {
	font-family: var(--wp--preset--font-family--garamond-condensed);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: clamp(28px, 24.4789px + 0.939vw, 38px);
	letter-spacing: 0.01em;
}

.cc-chapo {
	max-width: 636px;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--large);
	line-height: clamp(22px, 19.8873px + 0.5634vw, 28px);
}

/* La marge haute remplace les « spacers » de la maquette. */
.motif-en-tete {
	padding-block: var(--wp--preset--spacing--90) 1.5rem;
}

/* --- Héros photo ----------------------------------------------------- */

.motif-heros {
	position: relative;
	padding-block: 0 clamp(3rem, 8vw, 7.5rem);
}

/* Le retrait de la photo vient du remplissage racine du theme, et non de la
   largeur « large ». Avec align:wide, elle se figeait a wideSize (1776px) :
   en dessous de 1920 ca ne se voyait pas, au-dela les marges gonflaient -
   392px de chaque cote sur un 2560 - pendant que le fond vert, lui, continuait
   de suivre la fenetre. */
.wp-block-image.motif-heros__photo {
	max-width: none;
	margin-block: 0;
	margin-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.motif-heros__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.motif-heros__titre {
	font-size: var(--wp--preset--font-size--hero);
	line-height: clamp(56px, 45.4366px + 2.8169vw, 86px);
	letter-spacing: -0.01em;
}

.motif-heros__texte {
	text-align: center;
}

/* Le rond « faire defiler » se loge dans le coin bas-droit de la photo.
   Une marge haute negative l y remonte : pas de positionnement absolu,
   donc rien a recalculer si la photo change de hauteur. */
.motif-heros__defiler {
	position: relative;
	justify-content: flex-end;
	margin-block-start: -36px;
	margin-inline-end: clamp(0px, -21.1268px + 5.6338vw, 60px);
}

.motif-heros__fleche .wp-block-button__link {
	position: relative;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--base);
	/* Le libelle reste dans le DOM pour les lecteurs d ecran. La hauteur
	   de ligne doit tomber a zero avec la taille : sinon le texte, bien
	   qu invisible, occupe une rangee de la grille et pousse la fleche
	   vers le bas du rond. */
	font-size: 0;
	line-height: 0;
}

/* La fleche officielle, telle qu exportee du Figma par le client
   (Sections/Call-To-Action/icons/16.svg). Elle pointe deja vers le bas :
   aucune rotation.

   Posee en masque plutot qu en image de fond : la couleur vient alors de
   currentColor, et suit donc celle du bouton. */
.motif-heros__fleche .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("pictos/fleche.svg") center / contain no-repeat;
	mask: url("pictos/fleche.svg") center / contain no-repeat;
}

/* Sur grand ecran, le texte se loge dans l'encoche transparente de la photo :
   moitie droite, en bas. En dessous, il passe simplement sous la photo. */
@media (min-width: 1024px) {
	.motif-heros__texte {
		text-align: left;
	}

	.motif-heros__texte .cc-chapo {
		margin-inline: 0;
	}

	.motif-heros > .motif-heros__texte {
		position: absolute;
		left: 50%;
		right: max(var(--wp--style--root--padding-right, 1.5rem), calc((100% - var(--wp--style--global--wide-size, 1400px)) / 2));
		bottom: clamp(3rem, 8vw, 7.5rem);
		max-width: none;
		margin: 0;
		padding: 3rem 3rem 0 3.75rem;
	}
}

/* --- Trois moments du séjour ----------------------------------------- */

/* La gouttiere de la grille : 12px a 375, 24px a 1440, comme la
   maquette. Le blockGap de WordPress ne convient pas : il gouverne
   aussi l espacement vertical. */
/* --- Enchainement des sections ---------------------------------------
   WordPress glisse un blockGap entre les blocs de premier niveau. Entre
   deux bandes pleine largeur, cet espace laisse voir le fond blanc de la
   page : une raie claire a chaque jointure. Nos sections portent leur
   propre respiration en padding, la marge n a donc rien a faire la. */

.wp-block-post-content > .alignfull {
	margin-block: 0;
}

:root {
	--cc-gouttiere: clamp(12px, 7.7746px + 1.1268vw, 24px);
	--cc-picto: clamp(96px, 87.5493px + 2.2535vw, 120px);

	/* Garamond Condensed n existe chez nous qu en Light (300). La maquette
	   demande Regular (400) pour h4 et h5 ; le fichier est introuvable et
	   Figma n exporte pas les polices. On epaissit donc tres legerement le
	   trace pour s en approcher. Mettre a 0 pour revenir au Light pur, et
	   supprimer le bloc le jour ou la Regular arrive. */
	--cc-graisse-simulee: 0.22px;
}

/* Les seuls endroits ou la charte demande du Garamond en 400. */
h4,
h5,
.cc-sous-titre,
.motif-chiffre__libelle,
.motif-faq__question summary {
	-webkit-text-stroke: var(--cc-graisse-simulee) currentColor;
}

.motif-moments {
	padding-block: 3.75rem 3rem;
}

.motif-moments .wp-block-columns {
	gap: var(--cc-gouttiere);
}

/* Le halo est un fond, pas une image : le metier remplace le picto sans
   perdre la lumiere. 216px = le cercle de 120px et son flou. */
.wp-block-image.motif-moments__picto {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	width: var(--cc-picto);
	height: var(--cc-picto);
	margin-inline: auto;
}

/* Un fond serait coupe au bord de la boite : le halo deborde donc dans un
   pseudo-element, sous le picto. */
.wp-block-image.motif-moments__picto::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: calc(var(--cc-picto) * -0.4);
	background: url("pictos/halo.svg") center / calc(var(--cc-picto) * 1.8) calc(var(--cc-picto) * 1.8) no-repeat;
}

.motif-moments__picto img {
	width: clamp(48px, 43.7746px + 1.1268vw, 60px);
	height: clamp(48px, 43.7746px + 1.1268vw, 60px);
	mix-blend-mode: overlay;
}

.motif-moments .cc-sous-titre {
	margin-block: 2.25rem 0.75rem;
}

.motif-moments p {
	padding-inline: clamp(0px, 2.5vw, 2.25rem);
}

/* --- Trois étapes reliées -------------------------------------------- */

.motif-etapes {
	padding-block: 4.5rem 1.5rem;
}

.motif-etapes__etape {
	justify-content: space-between;
}

@media (min-width: 782px) {
	.motif-etapes__etape--inverse {
		flex-direction: row-reverse;
	}
}

.motif-etapes__numero {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-block-end: 0.75rem;
	border: 3px solid var(--wp--preset--color--vert-recif);
	border-radius: 50%;
	font-size: clamp(16px, 15.2958px + 0.1878vw, 18px);
	font-weight: 500;
	line-height: 1;
}

.motif-etapes__texte .cc-sous-titre {
	margin-block: 0 1.5rem;
}

/* Cadre du visuel : visible meme vide, comme dans la maquette. */
.wp-block-image.motif-etapes__visuel {
	aspect-ratio: 557 / 461;
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
	background: color-mix(in srgb, var(--wp--preset--color--base) 5%, transparent);
}

.motif-etapes__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.motif-etapes__visuel img:not([src]),
.motif-etapes__visuel img[src=""] {
	visibility: hidden;
}

/* La courbe qui relie deux etapes. */
.motif-etapes__liaison {
	width: min(636px, 50%);
	margin-inline: auto;
	background: url("pictos/liaison-1.svg") center / 100% 100% no-repeat;
}

.motif-etapes__liaison--retour {
	background-image: url("pictos/liaison-2.svg");
	transform: scaleX(-1);
}

@media (max-width: 781px) {
	/* La maquette centre tout en mobile : numero, titre et texte. Le
	   numero est en inline-grid, il se centre donc comme du texte. */
	.motif-etapes__etape {
		text-align: center;
	}

	/* La courbe qui serpente entre deux colonnes n a plus de sens une
	   fois tout empile : la maquette la remplace par un trait vertical
	   qui descend jusqu au numero suivant. */
	.motif-etapes__liaison {
		width: 1px;
		height: 4rem !important;
		margin-inline: auto;
		background: var(--wp--preset--color--vert-recif);
		transform: none;
	}
}

/* --- Appel final ----------------------------------------------------- */

.motif-appel-final {
	padding-block: 3.75rem;
}

.motif-appel-final .cc-chapo {
	margin-block-end: 2.25rem;
}

/* --- Trois formules -------------------------------------------------- */

.motif-formules {
	padding-block: 2.25rem 4.5rem;
}

/* Une formule au centre, les voisines qui depassent : on glisse de l'une a
   l'autre (doigt, souris via carrousels.js). Le rembourrage lateral permet
   de centrer aussi la premiere et la derniere. */
.motif-formules__rangee {
	--cc-formule: min(856px, 86vw);
	display: flex;
	gap: 1.5rem;
	padding: 0 calc((100% - var(--cc-formule)) / 2) 2rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.motif-formules__rangee::-webkit-scrollbar {
	display: none;
}

.motif-formules__rangee > .motif-formule {
	display: flex;
	flex: 0 0 var(--cc-formule);
	flex-direction: column;
	margin: 0;
	scroll-snap-align: center;
	transition: opacity 0.3s ease;
}

/* Avec carrousels.js : la presentation de la maquette. Un bandeau degrade ou
   glissent les noms, deux fleches, et la seule carte de la formule active.
   Ce qui precede reste le repli sans script. */
/* « .motif-formules > » : passe devant la largeur « alignwide » que la mise en
   page de WordPress impose a l'enveloppe. */
.motif-formules > .cc-formules {
	--cc-tete-h: max(300px, (100cqi - 9rem) * 458 / 856);
	position: relative;
	box-sizing: border-box;
	max-width: calc(856px + 2 * 4.5rem);
	margin-inline: auto;
	padding-inline: 4.5rem;
	container-type: inline-size;
}

/* width: 100% EST INDISPENSABLE. Sans lui, la largeur reste « auto » :
   en mobile le ratio donne une hauteur de 183px, min-height la releve a
   300, et le ratio RECALCULE ALORS LA LARGEUR a partir de cette hauteur
   — 300 x 856/458 = 561px. Le bandeau sortait de l ecran et faisait
   glisser toute la page lateralement. */
.cc-formules__tete {
	--cc-ecart: clamp(190px, 30vw, 360px);
	position: relative;
	width: 100%;
	aspect-ratio: 856 / 458;
	min-height: 300px;
	overflow: hidden;
	border-radius: 36px;
	color: var(--wp--preset--color--base);
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

/* Pas de cadre au clic sur le bandeau, les noms, les points ou les fleches :
   seul le clavier (Tab) l'affiche. */
.cc-formules__tete:focus,
.cc-formules__nom:focus,
.cc-carrousel__points button:focus,
.cc-carrousel__fleche:focus {
	outline: none;
}

.cc-formules__nom:focus-visible,
.cc-carrousel__points button:focus-visible,
.cc-carrousel__fleche:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 4px;
}

.cc-formules__tete:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 4px;
}

/* Un calque de degrade par formule : on passe de l'un a l'autre en fondu. */
.cc-formules__fond {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.cc-formules__fond.is-active {
	opacity: 1;
}

.cc-formules__nom {
	position: absolute;
	top: 46%;
	left: 50%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: var(--wp--preset--font-family--garamond-condensed);
	font-size: clamp(42px, 31.4366px + 2.8169vw, 72px);
	font-weight: 300;
	line-height: clamp(40px, 28.7324px + 3.0047vw, 72px);
	letter-spacing: -0.01em;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0.5;
	transform: translate(-50%, -50%) translateX(calc(var(--pos, 0) * var(--cc-ecart))) scale(0.83);
	transition: transform 0.5s ease, opacity 0.5s ease;
}

.cc-formules__nom.is-active {
	cursor: inherit;
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.cc-formules__tete .cc-carrousel__points {
	position: absolute;
	right: 0;
	bottom: calc(96px + 1.5rem);
	left: 0;
	margin: 0;
}

/* Les fleches, hors du bandeau, a hauteur des noms. */
.cc-formules > .cc-formules__fleche {
	top: calc(var(--cc-tete-h) * 0.46);
}

.motif-formules__rangee.est-onglets {
	display: grid;
	gap: 0;
	padding: 0;
	overflow: visible;
	scroll-snap-type: none;
}

.motif-formules__rangee.est-onglets > .motif-formule {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s;
}

.motif-formules__rangee.est-onglets > .motif-formule.is-active {
	opacity: 1;
	visibility: visible;
}

/* Le nom est deja dans le bandeau ; la carte remonte le chevaucher. */
.motif-formules__rangee.est-onglets .motif-formule__nom {
	display: none;
}

.motif-formules__rangee.est-onglets .motif-formule > .motif-formule__carte {
	z-index: 1;
}

@media (max-width: 781px) {
	.motif-formules > .cc-formules {
		--cc-tete-h: 300px;
		padding-inline: 0;
	}

	.cc-formules__tete {
		--cc-ecart: 46vw;
	}

	/* Au doigt, on glisse ; les points suffisent. */
	.cc-formules > .cc-formules__fleche {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-formules__fond,
	.cc-formules__nom,
	.motif-formules__rangee.est-onglets > .motif-formule {
		transition: none;
	}
}

.motif-formule__nom {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(220px, 26vw, 362px);
	margin: 0;
	padding: 1.5rem 1.5rem 6rem;
	border-radius: 36px;
	background: linear-gradient(0deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-3));
	font-size: clamp(42px, 31.4366px + 2.8169vw, 72px);
	font-weight: 300;
	line-height: clamp(40px, 28.7324px + 3.0047vw, 72px);
}

.motif-formule--classique .motif-formule__nom {
	background: linear-gradient(180deg, var(--wp--preset--color--oeuf-bleu), var(--wp--preset--color--vert-citron));
}

.motif-formule--serenite .motif-formule__nom {
	background: linear-gradient(180deg, var(--wp--preset--color--accent-4), var(--wp--preset--color--accent-3));
}

/* La carte blanche chevauche le bandeau, comme dans la maquette. */
.motif-formule > .motif-formule__carte {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	width: min(626px, 100% - 2.5rem);
	margin: -6rem auto 0;
	padding: 2.25rem;
	border-radius: 36px;
	box-shadow: 0 5px 25px color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}

.motif-formule__carte .wp-block-buttons {
	margin-top: auto;
	padding-top: 2.25rem;
}

.motif-formule__garanties {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.motif-formule__garanties li {
	position: relative;
	padding-left: 2.25rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: clamp(18px, 15.8873px + 0.5634vw, 24px);
}

.motif-formule__garanties li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1) url("pictos/coche.svg") center / 16px no-repeat;
}

.motif-formule__note {
	margin-block: 1.5rem 0;
	font-size: 12px;
	line-height: 14px;
	white-space: pre-wrap;
}

.motif-formule__note + .motif-formule__note {
	margin-block-start: 0.25rem;
}

/* --- Cartes arguments ------------------------------------------------ */

/* La section porte le fond ; la piste, elle, defile. Les separer evite
   que les points du carrousel, poses par le script a cote de la piste,
   ne tombent hors du degrade. */
.motif-cartes {
	padding-block: 2.25rem;
}

.motif-cartes__piste {
	display: flex;
	gap: var(--cc-gouttiere);
	padding-inline: clamp(1rem, 5vw, 7.5rem);
	overflow-x: auto;
	scroll-padding-inline: clamp(1rem, 5vw, 7.5rem);
	scroll-snap-type: x mandatory;
}

.motif-cartes__piste > .motif-carte {
	display: flex;
	flex: 0 0 min(80vw, 416px);
	flex-direction: column;
	min-height: clamp(520px, 60vw, 700px);
	margin: 0;
	padding: 2.25rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	border-radius: 48px;
	scroll-snap-align: start;
}

.wp-block-image.motif-carte__visuel {
	height: 249px;
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
}

.motif-carte__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
}

.motif-carte .cc-sous-titre {
	margin-block: 2.25rem;
}

/* Le texte suit le titre, comme dans la maquette. C est le BOUTON qui
   se colle en bas : les cartes s alignent alors quelle que soit la
   longueur du texte. */
.motif-carte__texte {
	margin-block: 0;
}

.motif-carte__action {
	margin-top: auto;
	padding-top: 2.25rem;
}

.motif-carte__action .wp-block-button__link {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}

/* --- Ce que la maquette reorganise en mobile -------------------------
   En desktop ces trois motifs sont des grilles ; en mobile la maquette
   les replie. 781px est le seuil ou WordPress empile deja ses colonnes :
   on s'y aligne pour ne pas creer un second point de rupture. */

@media (max-width: 781px) {

	/* Trois moments : le picto passe A GAUCHE du titre, le texte dessous
	   et aligne sur lui. En desktop tout est centre, picto au-dessus. */
	.motif-moments .wp-block-column {
		display: grid;
		grid-template-columns: var(--cc-picto) 1fr;
		align-items: start;
	}

	/* Le picto couvre les DEUX rangees, titre et paragraphe. Sur une
	   seule, ses 96px de haut repoussaient le paragraphe bien plus bas
	   que les 12px de la maquette. */
	.wp-block-image.motif-moments__picto {
		grid-row: 1 / span 2;
		margin: 0;
	}

	/* Le chapo tient sur dix colonnes sur douze, comme la maquette. */
	.cc-chapo {
		max-width: 83%;
	}

	/* LA SPECIFICITE MONTE VOLONTAIREMENT. WordPress pose
	   has-text-align-center sur le paragraphe et une marge de flux sur
	   chaque enfant de colonne — a specificite egale, mais plus tard
	   dans la cascade, donc il gagnait. */
	.motif-moments .wp-block-column > .cc-sous-titre,
	.motif-moments .wp-block-column > p {
		grid-column: 2;
		text-align: left;
	}

	/* La maquette mobile prend h5 (32) la ou le desktop prend h4 (36) :
	   le composant partage « THUMBS » n'a pas suivi le token. A faire
	   confirmer par le graphiste. */
	.motif-moments .wp-block-column > .cc-sous-titre {
		margin-block: 1.5rem 0;
		font-size: clamp(32px, 30.5915px + 0.3756vw, 36px);
		line-height: clamp(34px, 32.5915px + 0.3756vw, 38px);
	}

	.motif-moments .wp-block-column > p {
		margin-block: 0.75rem 0;
		padding-inline: 0;
	}

	/* Cartes arguments : une carte pleine largeur a la fois. */
	.motif-cartes__piste {
		padding-inline: 16px;
		scroll-padding-inline: 16px;
	}

	.motif-cartes__piste > .motif-carte {
		flex: 0 0 100%;
	}

	/* Chiffres : une carte centree, les voisines debordent de chaque
	   cote. Le retrait laisse la premiere et la derniere se centrer. */
	.motif-chiffres__eventail {
		padding-inline: calc(50% - 81.5px);
	}

	.motif-chiffres__eventail > .motif-chiffre {
		flex: 0 0 163px;
		min-height: 260px;
		padding: 1.5rem 1.25rem 2rem;
	}
}

/* --- Logos partenaires ----------------------------------------------- */

.motif-logos {
	padding-block: 0 3rem;
}

.motif-logos__rangee {
	gap: 1rem clamp(1.5rem, 3.3vw, 3rem);
}

.wp-block-image.motif-logos__logo {
	margin: 0;
}

/* Monochrome vert : le logo garde sa luminosite et prend la teinte du fond,
   comme dans la maquette. Les dimensions en ligne viennent de l'editeur. */
.motif-logos__logo img {
	width: clamp(88px, 8.5vw, 132px) !important;
	height: clamp(88px, 8.5vw, 132px) !important;
	object-fit: contain;
	mix-blend-mode: luminosity;
}

/* Defilement continu, pose par carrousels.js : la rangee devient une
   fenetre, et deux bandes identiques y glissent a la suite l'une de
   l'autre. Sans script, ou si le visiteur limite les animations, la grille
   fixe ci-dessus reste en place. */
.motif-logos > .motif-logos__rangee.est-defilant {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	max-width: none;
	overflow: hidden;
	background: inherit;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* La bande animee isole son rendu : sans fond herite, le monochrome des
   logos (mix-blend-mode) n'aurait plus la teinte de la section a lire. */
.cc-defilement__bande {
	display: flex;
	flex: none;
	gap: clamp(1.5rem, 3.3vw, 3rem);
	padding-inline-end: clamp(1.5rem, 3.3vw, 3rem);
	background: inherit;
	animation: cc-defile var(--cc-duree, 40s) linear infinite;
}

.est-defilant--retour .cc-defilement__bande {
	animation-direction: reverse;
}

.est-defilant:hover .cc-defilement__bande {
	animation-play-state: paused;
}

@keyframes cc-defile {
	to {
		transform: translateX(-100%);
	}
}

/* --- Chiffres clés --------------------------------------------------- */

.motif-chiffres {
	position: relative;
	padding-block: 3.75rem 6rem;
	overflow: hidden;
}

.motif-chiffres__eventail {
	display: flex;
	gap: var(--cc-gouttiere);
	padding-block-end: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.motif-chiffres__eventail > .motif-chiffre {
	display: flex;
	flex: 0 0 216px;
	flex-direction: column;
	align-items: center;
	min-height: 342px;
	margin: 0;
	padding: 2.25rem 2.25rem 3rem;
	border-radius: 24px;
	background: radial-gradient(ellipse 100% 75% at 50% 81%, var(--wp--preset--color--base), var(--wp--preset--color--accent-2));
	box-shadow: 0 10px 10px color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	color: var(--wp--preset--color--contrast);
	scroll-snap-align: center;
}

.motif-chiffre > * {
	margin: 0;
}

.motif-chiffre__nombre {
	font-size: clamp(32px, 26.3662px + 1.5023vw, 48px);
	font-weight: 700;
	line-height: clamp(32px, 26.3662px + 1.5023vw, 48px);
	letter-spacing: -0.01em;
}

.motif-chiffre p.motif-chiffre__libelle {
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--garamond-condensed);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: clamp(21px, 16.4225px + 1.2207vw, 34px);
}

.motif-chiffre .motif-chiffre__etoile {
	margin-top: auto;
	padding-top: 2.25rem;
}

.motif-chiffres__eventail > .motif-chiffre--vedette {
	background: radial-gradient(ellipse 100% 75% at 50% 81%, var(--wp--preset--color--vert-citron), var(--wp--preset--color--contrast));
	color: var(--wp--preset--color--base);
}

.motif-chiffre--vedette .motif-chiffre__nombre {
	color: var(--wp--preset--color--accent-1);
}

/* L'eventail : chaque carte est placee par rapport au centre, selon sa
   position. Le metier change les chiffres, pas la mise en scene. */
@media (min-width: 1200px) {
	.motif-chiffres__eventail {
		position: relative;
		display: block;
		height: 520px;
		overflow: visible;
	}

	.motif-chiffres__eventail > .motif-chiffre {
		--dx: 0px;
		--dy: 0px;
		--r: 0deg;
		--s: 1;
		position: absolute;
		top: 0;
		left: 50%;
		width: 216px;
		opacity: 0.3;
		transform: translateX(-50%) translate(var(--dx), var(--dy)) rotate(var(--r)) scale(var(--s));
	}

	.motif-chiffres__eventail > .motif-chiffre:nth-child(1) { --dx: -538px; --dy: 131px; --r: -18deg; --s: 0.9; }
	.motif-chiffres__eventail > .motif-chiffre:nth-child(2) { --dx: -285px; --dy: 46px;  --r: -9deg; }
	.motif-chiffres__eventail > .motif-chiffre:nth-child(4) { --dx: 283px;  --dy: 46px;  --r: 9deg; }
	.motif-chiffres__eventail > .motif-chiffre:nth-child(5) { --dx: 538px;  --dy: 131px; --r: 18deg;  --s: 0.9; }

	/* Meme garde-fou sans JavaScript : au-dela de la cinquieme, on efface
	   plutot que d'empiler au centre.

	   :not(.est-eventail) n'est pas un detail. Sans lui, la regle s'applique
	   AUSSI quand le carrousel tourne : la sixieme carte reste effacee pour
	   toujours, puisque son rang dans le balisage ne change jamais - seule
	   sa place dans l'eventail change. */
	.motif-chiffres__eventail:not(.est-eventail) > .motif-chiffre:nth-child(n+6) { opacity: 0; }

	/* Avec carrousels.js, la place vient de data-pos (−2 a 2 autour de la
	   vedette) et non plus de l'ordre : l'eventail tourne. */
	.motif-chiffres__eventail.est-eventail {
		cursor: grab;
	}

	.motif-chiffres__eventail.est-eventail > .motif-chiffre {
		cursor: pointer;
		transition: transform 0.5s ease, opacity 0.5s ease, width 0.5s ease, min-height 0.5s ease;
	}

	.motif-chiffres__eventail.est-eventail > .motif-chiffre[data-pos="-2"] { --dx: -538px; --dy: 131px; --r: -18deg; --s: 0.9; }
	.motif-chiffres__eventail.est-eventail > .motif-chiffre[data-pos="-1"] { --dx: -285px; --dy: 46px;  --r: -9deg;  --s: 1; }
	.motif-chiffres__eventail.est-eventail > .motif-chiffre[data-pos="0"]  { --dx: 0px;    --dy: 0px;   --r: 0deg;   --s: 1; cursor: default; }
	.motif-chiffres__eventail.est-eventail > .motif-chiffre[data-pos="1"]  { --dx: 283px;  --dy: 46px;  --r: 9deg;   --s: 1; }
	.motif-chiffres__eventail.est-eventail > .motif-chiffre[data-pos="2"]  { --dx: 538px;  --dy: 131px; --r: 18deg;  --s: 0.9; }

	/* L'eventail n'a que cinq places, de −2 a 2. Au-dela de cinq chiffres,
	   les cartes en trop n'avaient aucune regle : elles heritaient d'un
	   decalage nul et se posaient SUR la carte centrale, invisibles.

	   Elles attendent desormais derriere elle, effacees, et la rotation du
	   carrousel les amene a leur tour. Le selecteur vise tout ce qui n'est
	   pas une des cinq places, quel que soit le nombre de chiffres. */
	.motif-chiffres__eventail.est-eventail > .motif-chiffre:not([data-pos="-2"]):not([data-pos="-1"]):not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) {
		--dx: 0px;
		--dy: 0px;
		--r: 0deg;
		--s: 0.85;
		opacity: 0;
		pointer-events: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.motif-chiffres__eventail.est-eventail > .motif-chiffre {
			transition: none;
		}
	}

	.motif-chiffres__eventail > .motif-chiffre--vedette {
		z-index: 2;
		width: 240px;
		min-height: 380px;
		opacity: 1;
	}

	/* Fondu sur les bords, dans la couleur du fond de section.

	   La teinte etait ecrite en dur (accent-5). Des que le metier changeait
	   le style de section, le voile peignait la mauvaise couleur par-dessus :
	   invisible sur un fond blanc, une bande claire bien nette sur un fond
	   colore.

	   « background-color: inherit » reprend le fond du bloc parent quel qu'il
	   soit, et c'est un masque - non plus un degrade peint - qui le fait
	   disparaitre vers le centre. Le voile suit donc la section, sans qu'on
	   ait a le tenir a jour.

	   Sur une section en degrade, background-color vaut transparent : le
	   voile s'efface de lui-meme plutot que de mentir sur la couleur. */
	.motif-chiffres::before,
	.motif-chiffres::after {
		content: "";
		position: absolute;
		z-index: 3;
		top: 0;
		bottom: 0;
		width: 26%;
		pointer-events: none;
		background-color: inherit;
		-webkit-mask-image: linear-gradient(90deg, #000 27%, transparent);
		mask-image: linear-gradient(90deg, #000 27%, transparent);
	}

	.motif-chiffres::before { left: 0; }
	.motif-chiffres::after  { right: 0; transform: scaleX(-1); }
}

/* --- Témoignage client ----------------------------------------------- */

.motif-temoignage {
	padding-block: 3rem 6rem;
	color: var(--wp--preset--color--contrast);
}

.motif-temoignage__note {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin: 0;
	font-family: var(--wp--preset--font-family--garamond-condensed);
	font-size: 36px;
	font-weight: 300;
	line-height: 32px;
}

/* Cinq etoiles de 24px espacees de 3px, dessinees par le fond. */
.motif-temoignage__note::after {
	content: "";
	width: 132px;
	height: 24px;
	background: url("pictos/etoile-note.svg") left center / 24px 24px space no-repeat;
}

.motif-temoignage p.motif-temoignage__nombre {
	margin-block-start: 0.75rem;
	font-size: 12px;
	line-height: 14px;
}

/* Sans script, les avis s'empilent ; avec, ils passent dans une piste qui
   defile (voir plus bas). */
.motif-temoignage .motif-temoignage__carte {
	max-width: 648px;
	margin-block-start: 2.25rem;
	padding: 3rem clamp(1.5rem, 5vw, 4.5rem);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	border-radius: 48px;
	box-shadow: 0 1px 3px color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}

/* border-box : la largeur inclut le rembourrage, sinon la carte suivante
   depasse dans la fenetre. */
.motif-temoignage > .cc-carrousel {
	box-sizing: border-box;
	max-width: calc(648px + 2 * 4.5rem);
	margin-block-start: 2.25rem;
	padding-inline: 4.5rem;
}

.motif-temoignage__piste {
	display: flex;
	gap: 1.5rem;
	padding: 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.motif-temoignage__piste > .motif-temoignage__carte {
	box-sizing: border-box;
	flex: 0 0 100%;
	max-width: none;
	margin: 0;
	scroll-snap-align: center;
}

@media (max-width: 781px) {
	.motif-temoignage > .cc-carrousel {
		padding-inline: 0;
	}
}

/* --- Questions fréquentes -------------------------------------------- */

body .motif-faq {
	margin-block: 0;
	padding-block: 3rem 6rem;
}

/* Vert pastel, la couleur de la maquette. J avais essaye « Voile », une
   teinte calculee a partir du texte, pour que le style de section se
   voie : elle s adaptait bien mais virait au gris-vert et perdait la
   couleur de marque. Le pastel tient sur fond clair comme sur fond
   sombre — l adaptation n etait pas necessaire. */
.motif-faq > .motif-faq__question {
	margin-block-start: 0.75rem;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
}

.motif-faq__question summary {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	font-family: var(--wp--preset--font-family--garamond-condensed);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: clamp(21px, 16.4225px + 1.2207vw, 34px);
	list-style: none;
	cursor: pointer;
}

.motif-faq__question summary::-webkit-details-marker {
	display: none;
}

/* Chevron decoupe dans un carre, qui se retourne a l'ouverture. */
.motif-faq__question summary::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s ease;
}

.motif-faq__question[open] summary::after {
	transform: translateY(25%) rotate(-135deg);
}

.motif-faq__question > :not(summary) {
	margin: 0;
	padding: 0 1.5rem 1.25rem;
}

/* --- Page Contact : les trois cartes ----------------------------------
   Cartes blanches sur fond vert profond. Le style de section passe le
   texte en blanc : il faut donc le ramener au vert dans la carte. */

.motif-contact-cartes {
	padding-block: 1.5rem 3rem;
}

.motif-contact-cartes__rangee {
	gap: var(--cc-gouttiere);
	align-items: stretch;
}

.motif-contact-carte {
	display: flex;
	flex-direction: column;
	padding: 36px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	border-radius: 48px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.motif-contact-carte :is(h2, h3, h4, h5, p, a) {
	color: var(--wp--preset--color--contrast);
}

/* Le picto est un bloc Image : le metier le remplace sans developpeur. */
.wp-block-image.motif-contact-carte__picto {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 8px;
	border: 3px solid var(--wp--preset--color--accent-1);
	border-radius: 50%;
	box-sizing: border-box;
}

.motif-contact-carte__picto img {
	width: 16px;
	height: 16px;
}

.motif-contact-carte .cc-sous-titre {
	margin-block: 0.75rem 0;
}

.motif-contact-carte__texte {
	margin-block: 0.75rem 3rem;
}

/* Les coordonnees se collent en bas, pour que les trois cartes
   s'alignent quelle que soit la longueur du texte. */
.motif-contact-carte__tel {
	margin-block: auto 0;
	font-weight: 700;
	font-size: clamp(18px, 17.2958px + 0.1878vw, 20px);
	line-height: clamp(24px, 23.2958px + 0.1878vw, 28px);
}

.motif-contact-carte__tel a {
	text-decoration: none;
}

.motif-contact-carte__mail {
	margin-block-start: 0.75rem;
}

.motif-contact-carte__mail .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 12px 0 16px;
	border-radius: 48px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* --- Page Contact : les interlocuteurs --------------------------------
   Deux cartes decalees, le portrait debordant d'un cote puis de l'autre.
   La premiere est legerement pivotee, comme la maquette. */

.motif-experts {
	padding-block: 2.25rem 3rem;
}

.motif-expert {
	position: relative;
	display: flex;
	max-width: 542px;
	margin-inline: auto;
	padding: 18px 36px 24px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 24px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	filter: drop-shadow(0 1px 1.5px color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent));
}

.motif-expert + .motif-expert {
	margin-block-start: 28px;
}

.motif-expert :is(h2, h3, h4, h5, p, a) {
	color: var(--wp--preset--color--contrast);
}

.motif-expert--gauche {
	padding-left: 96px;
	background: var(--wp--preset--color--accent-2);
	rotate: -2deg;
}

.motif-expert--droite {
	padding-right: 96px;
}

/* Le portrait deborde du cadre, cercle en degrade comme la maquette. */
.wp-block-image.motif-expert__portrait {
	position: absolute;
	top: -37px;
	width: 104px;
	height: 104px;
	margin: 0;
	overflow: hidden;
	border-radius: 50%;
	background: linear-gradient(0deg, var(--wp--preset--color--accent-3) 0%, var(--wp--preset--color--accent-1) 100%);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}

.motif-expert--gauche .motif-expert__portrait {
	left: -37px;
}

.motif-expert--droite .motif-expert__portrait {
	right: -35px;
}

.motif-expert__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le nom est un h3, et theme.json met les h3 en Inter Bold — c est le
   seul titre de la charte qui ne soit pas en Garamond. La maquette
   demande ici du Garamond Light : il faut donc le redire. */
.motif-expert__nom {
	margin: 0;
	font-family: var(--wp--preset--font-family--garamond-condensed);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: clamp(21px, 16.4225px + 1.2207vw, 34px);
	font-weight: 300;
}

.motif-expert__fonction {
	margin-block: 0 0.75rem;
	opacity: 0.6;
}

.motif-expert__tel,
.motif-expert__mail {
	margin: 0;
	font-weight: 500;
}

.motif-expert__tel a,
.motif-expert__mail a {
	text-decoration: none;
}

/* --- Page Contact : le formulaire -------------------------------------
   L'extension ne pose que la grille ; couleurs et formes appartiennent
   au thème. Chaque champ est une boite blanche qui contient son
   intitule et sa saisie. */

.motif-formulaire {
	padding-block: 1.5rem 3rem;
}

.motif-formulaire .cpc-formulaire {
	max-width: 636px;
	margin-inline: auto;
}

.motif-formulaire .cpc-formulaire__grille {
	gap: var(--cc-gouttiere);
}

/* Chaque champ est une boite blanche : l intitule en haut, la saisie
   dessous. 72px de haut, comme la maquette. */
.motif-formulaire .cpc-champ {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 72px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-sizing: border-box;
}

.motif-formulaire .cpc-champ label {
	font-size: 11px;
	font-weight: 500;
	line-height: 14px;
}

.motif-formulaire .cpc-champ :is(input, textarea) {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
}

/* Le message est plus haut : la maquette lui donne 120px de saisie. */
.motif-formulaire .cpc-champ--large textarea {
	min-height: 120px;
	resize: vertical;
}

.motif-formulaire .cpc-champ :is(input, textarea)::placeholder {
	color: var(--wp--preset--color--contrast);
	opacity: 0.24;
}

/* Repere de focus : un trait a l interieur de la boite blanche, en vert
   adouci plutot que le contour noir du navigateur.
   NE PAS LE PALIR DAVANTAGE : le RGAA (critere 10.7, niveau AA) demande
   au moins 3:1 de contraste avec ce qui l entoure. A 60 % du vert foret
   sur blanc on est a 3,3:1 ; en dessous, le repere ne compte plus. */
.motif-formulaire .cpc-champ:focus-within {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
}

.motif-formulaire .cpc-champ :is(input, textarea):focus-visible {
	outline: none;
}

.motif-formulaire .cpc-formulaire__bouton {
	width: 100%;
	height: 60px;
	margin-block-start: 1.5rem;
	border: 0;
	border-radius: 48px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: clamp(16px, 15.2958px + 0.1878vw, 18px);
	font-weight: 500;
	line-height: 18px;
	cursor: pointer;
}

.motif-formulaire :is(.cpc-formulaire__mention, .cpc-mention-rgpd) {
	max-width: 636px;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--micro);
	text-align: center;
	opacity: 0.7;
}

@media (max-width: 781px) {
	.motif-contact-carte {
		padding: 24px;
		border-radius: 36px;
	}

	.motif-expert {
		padding-inline: 24px;
	}

	/* Le portrait repasse dans le flux : il n'y a plus la place pour
	   qu'il deborde. */
	.motif-expert {
		flex-direction: column;
		padding-top: 60px;
	}

	.motif-expert--gauche,
	.motif-expert--droite {
		padding-inline: 24px;
		rotate: none;
	}

	.wp-block-image.motif-expert__portrait {
		top: -37px;
		left: 24px;
		right: auto;
	}

	.motif-expert--droite .motif-expert__portrait {
		left: auto;
		right: 24px;
	}
}

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

body .motif-pied {
	margin-block: 0;
	padding-block: 1.5rem 3.75rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: clamp(18px, 15.8873px + 0.5634vw, 24px);
}

.motif-pied__haut {
	gap: 2rem;
}

.wp-block-image.motif-pied__etoile {
	margin: 0;
}

/* Colonnes : chaque entree de premier niveau du « Menu pied de page » est un
   titre de colonne, ses sous-entrees en sont les liens, toujours visibles. */
.motif-pied .cc-menu--footer .cc-menu__liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3rem 1.5rem;
}

@media (min-width: 782px) {
	.motif-pied .cc-menu--footer .cc-menu__liste {
		grid-template-columns: repeat(3, minmax(10rem, auto));
		gap: 3rem clamp(3rem, 8vw, 7.5rem);
	}
}

.motif-pied .cc-menu--footer .cc-menu__liste > li > a {
	color: var(--wp--preset--color--base);
}

/* Plus precis que « li:hover > .sub-menu » de l'en-tete : le survol ne doit
   pas changer la mise en page. */
.motif-pied .cc-menu--footer .cc-menu__liste .sub-menu {
	position: static;
	display: grid;
	gap: 1rem;
	min-width: 0;
	margin-top: 1rem;
	padding: 0;
	background: none;
	box-shadow: none;
}

.motif-pied .cc-menu--footer .sub-menu a {
	color: var(--wp--preset--color--base);
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.motif-pied .cc-menu--footer .sub-menu a:hover,
.motif-pied .cc-menu--footer .sub-menu a:focus-visible {
	opacity: 1;
}

/* Le logotype occupe toute la largeur, comme dans la maquette. */
.wp-block-image.motif-pied__logotype {
	margin-block: clamp(3rem, 6vw, 6rem) 1rem;
}

.motif-pied__logotype img {
	display: block;
	width: 100%;
	height: auto;
}

.motif-pied__mentions {
	max-width: 70rem;
	font-size: var(--wp--preset--font-size--micro);
	line-height: clamp(12px, 11.2958px + 0.1878vw, 14px);
	opacity: 0.5;
}

/* --- Commandes des carrousels (assets/carrousels.js) ----------------- */

.est-anime {
	cursor: grab;
}

/* Pendant un glisser a la souris : pas d'aimantation, pas de selection. */
.est-anime.est-tire {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

/* Pas de cadre au clic : seul le clavier (Tab) l'affiche, pour savoir ou
   l'on est. Le parent pose un contour sur tout element focalise. */
.est-anime:focus,
.est-eventail:focus {
	outline: none;
}

.est-anime:focus-visible,
.est-eventail:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 4px;
}

/* Les pistes defilent sans barre visible : on glisse, on suit les points. */
.motif-formules__rangee,
.motif-cartes,
.motif-chiffres__eventail,
.motif-temoignage__piste {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.motif-formules__rangee::-webkit-scrollbar,
.motif-cartes::-webkit-scrollbar,
.motif-chiffres__eventail::-webkit-scrollbar,
.motif-temoignage__piste::-webkit-scrollbar {
	display: none;
}

.cc-carrousel {
	position: relative;
}

.cc-carrousel__points {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: center;
	margin-top: 0.5rem;
}

/* Le bouton fait 24px pour le doigt ; le point visible, 6px (12px actif). */
.cc-carrousel__points button {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit; /* un bouton ne prend pas la couleur du texte de lui-meme */
	cursor: pointer;
}

.cc-carrousel__points button::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
	transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

.cc-carrousel__points button[aria-current="true"]::before {
	width: 12px;
	height: 12px;
	opacity: 1;
}

.cc-carrousel__fleche {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	transform: translateY(-50%);
}

.cc-carrousel__fleche:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

/* Chevron decoupe dans un carre : aucune image a fournir. */
.cc-carrousel__fleche::before {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1.5px solid currentColor;
	border-left: 1.5px solid currentColor;
	transform: rotate(-45deg);
}

.cc-carrousel__fleche--precedent {
	left: 0;
}

.cc-carrousel__fleche--suivant {
	right: 0;
}

.cc-carrousel__fleche--suivant::before {
	transform: rotate(135deg);
}

@media (max-width: 781px) {
	.cc-carrousel__fleche {
		top: auto;
		bottom: -3rem;
		transform: none;
	}

	.cc-carrousel__fleche--precedent {
		left: calc(50% - 44px);
	}

	.cc-carrousel__fleche--suivant {
		right: calc(50% - 44px);
	}
}

.motif-temoignage__auteur {
	gap: 10px;
	align-items: center;
	margin-block-end: 2.25rem;
}

.motif-temoignage__auteur p {
	margin: 0;
}

.motif-temoignage__auteur p.motif-temoignage__initiales {
	display: grid;
	flex: 0 0 72px;
	place-items: center;
	height: 72px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-2);
	font-size: 24px;
	font-weight: 600;
}

.motif-temoignage__nom {
	font-size: 21px;
	font-weight: 600;
	line-height: 28px;
}

.motif-temoignage__auteur p.motif-temoignage__date {
	margin-top: 3px;
	font-size: 16px;
	line-height: 24px;
	opacity: 0.6;
}

.motif-temoignage__texte {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}

.motif-temoignage__reponse {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-block-start: 2.25rem;
	font-size: 16px;
	opacity: 0.6;
}

.motif-temoignage__reponse::before {
	content: "";
	width: 14px;
	height: 24px;
	background: url("pictos/reponse.svg") center / contain no-repeat;
}

/* --- Menu classique, pose par [cc_menu] ------------------------------ */

.cc-menu__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-menu__liste a {
	text-decoration: none;
}

/* Second niveau : replie, ouvert au survol et au clavier. */
.cc-menu__liste .sub-menu {
	display: none;
	position: absolute;
	z-index: 10;
	min-width: 14rem;
	margin: 0;
	padding: 0.75rem 1rem;
	list-style: none;
	background: var(--wp--preset--color--base);
	box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

.cc-menu__liste > li {
	position: relative;
}

.cc-menu__liste > li:hover > .sub-menu,
.cc-menu__liste > li:focus-within > .sub-menu {
	display: block;
}


/* --- Entrées de menu affichées en bouton ----------------------------- */

/*
 * La classe se pose sur l'entrée depuis Apparence > Menus, champ « Classes
 * CSS » — a activer dans Options de l'ecran. Le metier decide donc seul
 * quelles entrees sont des boutons, sans toucher au code.
 *
 * Les couleurs viennent de la palette : changer « Marque » dans
 * Apparence > Styles repeint les boutons.
 */

.cc-menu__liste .cc-bouton > a {
	display: inline-flex;
	align-items: center;
	padding: 0.6em 1.4em;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}

.cc-menu__liste .cc-bouton > a:hover,
.cc-menu__liste .cc-bouton > a:focus-visible {
	opacity: 0.85;
}

/* Variante claire, pour l'appel a l'action principal. */
.cc-menu__liste .cc-bouton--marque > a {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}

/* Les boutons sont pousses a droite : `auto` sur le premier repousse tout
   ce qui suit. */
.cc-menu__liste .cc-bouton:first-of-type {
	margin-inline-start: auto;
}

@media (max-width: 48rem) {
	.cc-menu__liste .cc-bouton:first-of-type {
		margin-inline-start: 0;
	}
}

/* --- Page courante --------------------------------------------------- */

/* WordPress pose `current-menu-item` tout seul sur l'entree active. */
.cc-menu__liste .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.4em;
	text-decoration-thickness: 2px;
}

/* Un bouton ne se souligne pas : il est deja mis en avant. */
.cc-menu__liste .cc-bouton.current-menu-item > a {
	text-decoration: none;
}

/* --- En-tete du site -------------------------------------------------
   Fond vert profond, logo blanc, menu en blanc et boutons en pilule de
   contour : le style de la maquette, mais le menu principal et le
   selecteur de langues sont conserves. */

.motif-entete {
	padding-block: 18px 17px;
}

/* Trois colonnes : le logo a gauche, la bascule au centre, les boutons a
   droite. Les deux colonnes laterales partagent a egalite ce qui reste,
   donc la bascule tombe au centre vrai, quelles que soient leurs largeurs.

   Le selecteur porte .motif-entete en plus pour passer devant la classe
   de mise en page que WordPress genere pour le bloc Groupe. */
.motif-entete .motif-entete__barre {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--cc-gouttiere);
}

.motif-entete__barre > .motif-entete__actions {
	justify-content: flex-end;
}

/* En dessous, les trois ne tiennent plus : la bascule passe sur une
   deuxieme ligne, pleine largeur. */
@media (max-width: 781px) {
	.motif-entete .motif-entete__barre {
		grid-template-columns: 1fr auto;
	}

	.motif-entete__barre > .cc-bascule {
		grid-column: 1 / -1;
		justify-self: center;
		margin-block-start: 12px;
	}
}

.wp-block-image.motif-entete__logo {
	margin: 0;
}

.motif-entete__logo img {
	display: block;
	width: clamp(131px, 111.282px + 5.2582vw, 187px);
	height: auto;
}

/* Les deux boutons de la maquette : pilules en contour, 36px de haut. */
.motif-entete__actions {
	gap: 12px;
}

/* Teintes exprimees en currentColor, et non en « base » : l'en-tete existe en
   deux habillages - sombre cote professionnel, clair cote particulier - et ces
   boutons doivent se retourner avec le texte sans qu'on redeclare chaque
   nuance. */
.motif-entete__action .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	background: none;
	color: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
}

.motif-entete__action .wp-block-button__link:hover,
.motif-entete__action .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

/* --- En-tete du cote particulier ------------------------------------- */

/* La maquette donne un fond blanc a tout le cote particulier, en-tete
   comprise. Le reste suit par heritage, grace aux currentColor ci-dessus. */
.motif-entete--clair {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Tout le menu passe en blanc sur le fond sombre. */
.motif-entete .cc-menu__liste a {
	color: var(--wp--preset--color--base);
}

/* Les deux boutons deviennent des pilules en contour : la maquette ne
   les remplit pas sur ce fond. */
.motif-entete .cc-menu__liste .cc-bouton > a {
	height: 36px;
	padding: 0 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
	background: none;
	color: var(--wp--preset--color--base);
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
}

.motif-entete .cc-menu__liste .cc-bouton > a:hover,
.motif-entete .cc-menu__liste .cc-bouton > a:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--base) 10%, transparent);
	opacity: 1;
}

/* Le sous-menu des langues garde un fond lisible. */
.motif-entete .cc-menu__liste .sub-menu {
	background: var(--wp--preset--color--accent-3);
}

/* --- Menu deplie du mobile --------------------------------------------
   Le panneau ne contient que ce que montre la maquette : la bascule, le
   lien vers l espace partenaire et celui vers la page Contact. */

.motif-entete__question {
	display: none;
}

/* Le bouton, fabrique par menu.js : absent sans JavaScript. */
.motif-entete__bascule-menu {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

/* Trois traits : celui du milieu est l element, les deux autres ses
   pseudo-elements. A l ouverture, le milieu s efface et les deux autres
   se croisent. */
.motif-entete__traits {
	position: relative;
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition: background-color 0.15s ease;
}

.motif-entete__traits::before,
.motif-entete__traits::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.2s ease;
}

.motif-entete__traits::before {
	top: -6px;
}

.motif-entete__traits::after {
	top: 6px;
}

.est-ouvert .motif-entete__traits {
	background: transparent;
}

.est-ouvert .motif-entete__traits::before {
	transform: translateY(6px) rotate(45deg);
}

.est-ouvert .motif-entete__traits::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Le fond ne defile plus tant que le panneau est ouvert. */
.cc-sans-defilement {
	overflow: hidden;
}

@media (max-width: 781px) {
	.motif-entete__bascule-menu {
		display: grid;
	}

	/* Replie, l en-tete ne montre que le logo et le bouton. */
	.motif-entete:not(.est-ouvert) .cc-bascule,
	.motif-entete:not(.est-ouvert) .motif-entete__actions {
		display: none;
	}

	/* Deplie, la barre devient le panneau. Une COLONNE FLEXIBLE, pas une
	   grille : chaque element se centre et se limite a la largeur
	   disponible. Le logo et le bouton sortent du flux pour rester en
	   haut. */
	.motif-entete.est-ouvert .motif-entete__barre {
		position: fixed;
		z-index: 100;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* La composition pose space-between pour le desktop, ou le logo et
		   les boutons doivent s ecarter. En colonne, cela repartirait les
		   trois elements sur toute la hauteur de l ecran. */
		justify-content: flex-start;
		gap: 0;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 88px 16px 48px;
		overflow: auto;
		box-sizing: border-box;
		background: linear-gradient(180deg, var(--wp--preset--color--contrast) 0%, color-mix(in srgb, var(--wp--preset--color--accent-4) 45%, var(--wp--preset--color--contrast)) 100%);
	}

	/* Garde-fou : aucun enfant ne depasse la largeur du panneau. */
	.motif-entete.est-ouvert .motif-entete__barre > * {
		max-width: 100%;
	}

	/* Le panneau garde son degrade sombre des DEUX cotes. Cote particulier,
	   l en-tete est clair : son texte au vert profond deviendrait illisible
	   une fois le panneau ouvert. On le repasse en blanc, et la bascule comme
	   les boutons suivent, puisqu ils heritent. */
	.motif-entete--clair.est-ouvert .motif-entete__barre {
		color: var(--wp--preset--color--base);
	}

	/* Le logo, lui, est une image : sa teinte est dans le fichier, hors de
	   portee du CSS. On repose donc la version blanche. L adresse est
	   relative a cette feuille, elle vaut donc sur tous les environnements -
	   c est la raison pour laquelle la composition, elle, la reconstruit en
	   PHP. */
	.motif-entete--clair.est-ouvert .motif-entete__logo img {
		content: url("images/logo-entete.svg");
	}

	.motif-entete.est-ouvert .motif-entete__logo {
		position: absolute;
		top: 20px;
		left: 16px;
		margin: 0;
	}

	.motif-entete.est-ouvert .motif-entete__bascule-menu {
		position: absolute;
		top: 20px;
		right: 16px;
	}

	.motif-entete.est-ouvert .motif-entete__question,
	.motif-entete.est-ouvert .cc-bascule,
	.motif-entete.est-ouvert .motif-entete__actions {
		display: flex;
	}

	/* Tailles propres au panneau : il n existe qu en dessous de 781px,
	   les bornes sont donc 375 et 781, pas 375 et 1440. */
	.motif-entete.est-ouvert .motif-entete__question {
		margin-block: 1.5rem 1rem;
		font-family: var(--wp--preset--font-family--garamond-condensed);
		font-size: clamp(20px, 16.3055px + 0.9852vw, 24px);
		color: var(--wp--preset--color--base);
	}

	.motif-entete.est-ouvert .motif-entete__actions {
		flex-direction: column;
		align-items: center;
		gap: 0;
		margin-block-start: 1.5rem;
	}

	/* Les deux liens reprennent l allure des entrees de la maquette :
	   grands, en Garamond, sans pilule. */
	.motif-entete.est-ouvert .motif-entete__action .wp-block-button__link {
		height: auto;
		padding: 0.3rem 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: var(--wp--preset--color--base);
		font-family: var(--wp--preset--font-family--garamond-condensed);
		font-size: clamp(26px, 20.4581px + 1.4778vw, 32px);
		font-weight: 400;
		line-height: 1.25;
	}

	/* La bascule aux cotes de la maquette : 125px pour l entree active,
	   PADDING COMPRIS. Sans border-box, le min-width s ajoutait aux deux
	   fois 24px de retrait et la pilule faisait 305px au lieu de 232. */
	.cc-bascule__item > a {
		box-sizing: border-box;
		padding-inline: 16px;
	}

	.cc-bascule__item--actif > a {
		min-width: 125px;
	}

	/* La barre d administration recouvre le haut du panneau. */
	.admin-bar .motif-entete.est-ouvert .motif-entete__barre {
		top: 46px;
	}
}

/* Le mouvement du bouton se fige pour qui le demande. */
@media (prefers-reduced-motion: reduce) {
	.motif-entete__traits,
	.motif-entete__traits::before,
	.motif-entete__traits::after {
		transition: none;
	}
}

/* --- Bascule Professionnels / Particuliers ---------------------------
   Deux entrees de menu dans une pilule. L etat actif n est pas ecrit
   dans le balisage : WordPress pose current-menu-item sur la page
   courante, donc la bascule se met a jour seule d une page a l autre. */

.motif-bascule {
	padding-block: 22px 0;
}

.cc-bascule__liste {
	display: flex;
	list-style: none;
	gap: 0;
	justify-content: center;
	width: fit-content;
	margin-inline: auto;
	padding: 2px;
	/* currentColor, et non « base » : la bascule parait sur les deux
	   en-tetes, la sombre du cote professionnel et la claire du cote
	   particulier. Elle se retourne donc avec le texte. */
	border: 2px solid color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 100px;
}

.cc-bascule__item > a {
	display: grid;
	place-items: center;
	height: clamp(48px, 43.7746px + 1.1268vw, 60px);
	padding-inline: 24px;
	border-radius: 48px;
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: clamp(14px, 11.8873px + 0.5634vw, 20px);
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.48;
}

/* Seule l entree active porte une largeur : l autre se cale sur son
   texte, comme dans la maquette. */
.cc-bascule__item--actif > a {
	min-width: clamp(125px, 112.676px + 3.2864vw, 160px);
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	opacity: 1;
}

/* --- Sélecteur de langues -------------------------------------------- */

/*
 * Fourni par POLYLANG comme entree de menu, pas par un bloc a nous.
 *
 * On avait ecrit un bloc cc/langues pour une seule raison : le selecteur
 * autonome de Polylang ne rend pas cote serveur, et son apercu dans
 * l'editeur etait une maquette React sans classes, impossible a mettre en
 * forme. Dans un MENU, le probleme disparait : c'est wp_nav_menu qui rend,
 * donc notre bloc cc/menu, donc le serveur. L'apercu est juste, et le bloc
 * maison n'avait plus de raison d'etre.
 *
 * Polylang produit une entree parente portant la langue courante, et les
 * autres langues en sous-menu — exactement la structure que les regles de
 * `.sub-menu` ci-dessus savent deja deplier.
 *
 * UNE LIMITE A CONNAITRE : dans un menu, Polylang masque les langues sans
 * contenu, et n'expose aucun reglage pour l'en empecher. Pendant la
 * construction, les langues apparaitront donc au fur et a mesure que le
 * metier les remplit.
 */

.cc-menu__liste .pll-parent-menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.5em 1em;
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 999px;

	/* Le lien parent pointe sur #pll_switcher et ne mene nulle part. */
	cursor: default;
}

/* Polylang pose une marge en style en ligne sur le nom de la langue : seul
   !important la surcharge. */
.cc-menu__liste .pll-parent-menu-item > a span {
	margin-inline-start: 0 !important;
}

/* Chevron decoupe dans un rectangle : aucune police, aucune image. */
.cc-menu__liste .pll-parent-menu-item > a::after {
	content: "";
	width: 0.5em;
	height: 0.35em;
	background: currentColor;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transition: transform 0.2s ease;
}

.cc-menu__liste .pll-parent-menu-item:hover > a::after,
.cc-menu__liste .pll-parent-menu-item:focus-within > a::after {
	transform: rotate(180deg);
}