/* ==========================================================================
   ClimaSud — 02. COMPOSANTS
   Boutons, cartes, pastilles, formulaires, accordéons, fil d'Ariane.
   Chaque composant est autonome : il ne dépend d'aucune section particulière.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOUTONS

   La base (bleu, plein) vient de theme.json → styles.elements.button.
   Ici : les variantes, les états, et l'alignement des icônes.
   -------------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--cs-transition), color var(--cs-transition),
		border-color var(--cs-transition), transform 120ms ease-out;
}

/* L'appui se sent, à la souris comme au doigt. */
.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: none;
	}
}

/* Les icônes des boutons suivent la couleur du texte et ne s'étirent pas. */
.wp-block-button__link svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Variante « Action » : le rouge du logo. Réservée au devis et à l'appel.
   Règle d'identité : si c'est rouge, c'est l'étape suivante du parcours.
   Il n'y a jamais deux boutons rouges concurrents dans une même section.
   La teinte est celle relevée sur le logo de l'entreprise (#C9261F), pas une
   couleur choisie : elle est floquée sur les camionnettes. */
.wp-block-button.is-style-action > .wp-block-button__link {
	background-color: var(--cs-action);
	color: var(--cs-blanc);
	border: 1px solid var(--cs-action);
}

.wp-block-button.is-style-action > .wp-block-button__link:hover,
.wp-block-button.is-style-action > .wp-block-button__link:focus {
	background-color: var(--cs-action-fonce);
	border-color: var(--cs-action-fonce);
	color: var(--cs-blanc);
}

/* --- Variante « Contour » : action secondaire sur fond clair. ------------- */
.wp-block-button.is-style-contour > .wp-block-button__link {
	background-color: transparent;
	color: var(--cs-bleu-nuit);
	border: 1px solid var(--cs-bord-champ);
}

.wp-block-button.is-style-contour > .wp-block-button__link:hover,
.wp-block-button.is-style-contour > .wp-block-button__link:focus {
	background-color: var(--cs-bleu-nuit);
	border-color: var(--cs-bleu-nuit);
	color: var(--cs-blanc);
}

/* --- Variante « Clair » : action secondaire posée sur fond sombre ou photo. */
.wp-block-button.is-style-clair > .wp-block-button__link {
	background-color: transparent;
	color: var(--cs-blanc);
	border: 1px solid rgba(255, 255, 255, 0.55);
}

.wp-block-button.is-style-clair > .wp-block-button__link:hover,
.wp-block-button.is-style-clair > .wp-block-button__link:focus {
	background-color: var(--cs-blanc);
	border-color: var(--cs-blanc);
	color: var(--cs-bleu-nuit);
}

/* --------------------------------------------------------------------------
   PASTILLE D'ICÔNE
   Médaillon carré arrondi qui porte une icône de trait.
   -------------------------------------------------------------------------- */
.cs-pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Dans une carte en colonne flexible, un enfant s'étire sur toute la
	   largeur par défaut : la pastille deviendrait un bandeau. */
	align-self: flex-start;
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	border-radius: 8px;
	background: var(--cs-bleu-clair);
	color: var(--cs-bleu);
	margin-bottom: 18px;
}

.cs-pastille svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Sur fond sombre, la pastille s'inverse. */
.cs-sur-sombre .cs-pastille {
	background: rgba(255, 255, 255, 0.12);
	color: var(--cs-blanc);
}

/* --------------------------------------------------------------------------
   CARTES
   -------------------------------------------------------------------------- */
.cs-carte {
	position: relative;
	/* Colonne : le lien « en savoir plus » peut ainsi être poussé en bas de
	   carte, sur la même ligne d'une carte à l'autre, quelle que soit la
	   longueur des titres et des textes. Sans cela, une rangée de cartes se
	   termine en escalier. */
	display: flex;
	flex-direction: column;
	background: var(--cs-blanc);
	border: 1px solid var(--cs-filet);
	border-radius: var(--cs-rayon-carte);
	padding: 30px 28px;
	transition: box-shadow var(--cs-transition), transform var(--cs-transition),
		border-color var(--cs-transition);
}

/* --- Grilles de cartes ----------------------------------------------------
   Le nombre de colonnes vient de la mise en page « grid » de WordPress, qui
   pose un grid-template-columns en repeat(auto-fill, minmax(...)). Aucune
   média-query n'est donc nécessaire : la grille se réorganise d'elle-même.

   Les deux règles ci-dessous n'ajustent que ce que WordPress ne sait pas
   faire : forcer une grille paire quand le nombre d'éléments s'y prête, et
   étirer les cartes à la même hauteur. Le sélecteur double
   (.wp-block-group.cs-grille-services) l'emporte sur celui de WordPress
   quel que soit l'ordre de chargement des feuilles — sans !important. */
.cs-grille > .cs-carte {
	height: 100%;
}

/* Services, équipements et étapes comptent un nombre pair d'éléments : sur les
   largeurs intermédiaires, une rangée de trois suivie d'un élément seul
   déséquilibrerait la section. On force donc deux colonnes. */
@media (max-width: 1140px) and (min-width: 700px) {
	.wp-block-group.cs-grille-services,
	.wp-block-group.cs-grille-equipements,
	.wp-block-group.cs-grille-etapes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Les réalisations plafonnent à trois colonnes : au-delà, la photo devient
   trop petite pour qu'on distingue quoi que ce soit du chantier. */
@media (min-width: 1180px) {
	.wp-block-group.cs-grille-realisations {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Liste des communes desservies : plusieurs colonnes plutôt qu'une longue
   colonne unique, sans jamais couper une commune entre deux colonnes. */
.cs-liste-communes {
	columns: 3 190px;
	column-gap: 34px;
}

.cs-liste-communes li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.cs-carte h3,
.cs-carte h4 {
	margin-top: 0;
	margin-bottom: 10px;
}

.cs-carte p {
	margin-bottom: 0;
	color: var(--cs-ardoise);
}

/* Sur fond « nuage », la carte blanche se détache déjà : pas de bordure. */
.cs-fond-nuage .cs-carte {
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--carte);
}

/* --- Carte entièrement cliquable ------------------------------------------
   Le lien du titre est étendu à toute la carte par un calque invisible.
   Avantage sur un <a> qui envelopperait la carte : le texte reste
   sélectionnable et un second lien interne resterait accessible. */
.cs-carte--lien {
	cursor: pointer;
}

.cs-carte--lien .cs-carte-lien::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.cs-carte--lien:hover {
	transform: translateY(-3px);
	border-color: var(--cs-bleu-clair);
	box-shadow: var(--wp--preset--shadow--carte-active);
}

.cs-carte--lien:has(.cs-carte-lien:focus-visible) {
	outline: 3px solid var(--cs-action);
	outline-offset: 2px;
}

/* Le contour est porté par la carte : celui du lien ferait doublon. */
.cs-carte--lien .cs-carte-lien:focus-visible {
	outline: none;
}

/* Sur un appareil tactile, il n'y a pas de survol : l'effet de levée
   resterait figé après le doigt. */
@media (hover: none) {
	.cs-carte--lien:hover {
		transform: none;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cs-carte--lien:hover {
		transform: none;
	}
}

/* --- Marqueur « en savoir plus » ------------------------------------------ */
/* --------------------------------------------------------------------------
   LIEN DE PROLONGEMENT

   Un lien seul dans son paragraphe — « Voir toutes les questions » — n'est pas
   un lien en ligne : l'exception du critère 2.5.8 des WCAG, qui dispense les
   liens pris dans une phrase, ne s'applique donc pas à lui. Mesuré à 20 px de
   haut, il était sous le minimum de 24. Le rembourrage vertical l'y ramène
   sans changer son apparence.
   -------------------------------------------------------------------------- */
.cs-lien-suite {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	padding: 4px 0;
	font-weight: 600;
}

.cs-lien-suite::after {
	content: "";
	width: 16px;
	height: 9px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10"><path d="M0 5h17M13 1l4 4-4 4" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10"><path d="M0 5h17M13 1l4 4-4 4" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	transition: transform var(--cs-transition);
}

.cs-lien-suite:hover::after {
	transform: translateX(3px);
}

.cs-carte-suite {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 7px;
	/* Poussé en bas de la carte : toutes les invitations à cliquer s'alignent
	   sur la même ligne d'une carte à l'autre. */
	margin-top: auto;
	padding-top: 16px;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--cs-bleu);
	text-decoration: none;
}

.cs-carte-suite::after {
	content: "";
	width: 16px;
	height: 9px;
	background: currentColor;
	/* Flèche dessinée en masque : aucune image, aucune police d'icônes. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h13M9.5 1 13 4.5 9.5 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h13M9.5 1 13 4.5 9.5 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform var(--cs-transition);
}

.cs-carte--lien:hover .cs-carte-suite::after {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   CARTE D'ÉQUIPEMENT — photo en haut, texte en bas
   -------------------------------------------------------------------------- */
.cs-equipement {
	overflow: hidden;
	padding: 0;
}

.cs-equipement .wp-block-image,
.cs-equipement figure {
	margin: 0;
}

.cs-equipement img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* La mise en page « flux » de WordPress ajoute une marge haute à chaque bloc
   frère. Ici, elle creuserait un vide entre la photo et le texte de la carte. */
.cs-equipement-corps {
	margin-top: 0;
	padding: 24px 26px 28px;
}

.cs-equipement-corps h3 {
	margin: 12px 0 8px;
}

.cs-equipement-corps p {
	margin: 0;
}

/* Dans une carte à photo, l'emplacement d'image occupe toute la largeur et
   perd ses angles arrondis du bas : c'est la carte qui les porte. */
.cs-equipement .cs-photo-attente {
	border-radius: var(--cs-rayon-carte) var(--cs-rayon-carte) 0 0;
	border-width: 0 0 1px;
	border-style: dashed;
}

/* --------------------------------------------------------------------------
   ÉTIQUETTES
   -------------------------------------------------------------------------- */
.cs-etiquette {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 100px;
	background: var(--cs-bleu-clair);
	color: var(--cs-bleu-nuit);
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cs-sur-sombre .cs-etiquette {
	background: rgba(255, 255, 255, 0.14);
	color: var(--cs-blanc);
}

/* --------------------------------------------------------------------------
   CHIFFRES CLÉS
   -------------------------------------------------------------------------- */
.cs-preuve {
	text-align: center;
}

.cs-preuve-nombre {
	display: block;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--chiffre);
	font-weight: 700;
	line-height: 1.05;
	color: var(--cs-encre);
	margin: 0 0 6px;
	/* Les chiffres gardent la même largeur : la rangée ne tressaute pas. */
	font-variant-numeric: tabular-nums;
}

.cs-sur-sombre .cs-preuve-nombre {
	color: var(--cs-blanc);
}

.cs-preuve-libelle {
	display: block;
	margin: 0;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--cs-brume);
}

.cs-sur-sombre .cs-preuve-libelle {
	color: var(--cs-clair-doux);
}

/* --------------------------------------------------------------------------
   CARROUSEL DE RÉALISATIONS

   Une bande de photographies qui défile seule, lentement, en boucle continue.

   COMMENT LA BOUCLE EST FERMÉE
   La piste contient deux fois la même série. L'animation la fait glisser de
   -50 % exactement, c'est-à-dire de la largeur d'une série : au terme du
   cycle, la seconde série occupe précisément la place où était la première,
   et le retour à zéro ne se voit pas. Il n'y a ni saut, ni rattrapage, ni
   calcul de position en JavaScript.

   POURQUOI LA DURÉE EST SI LONGUE
   72 secondes pour un cycle complet, soit environ 30 pixels par seconde. Une
   bande d'images qui défile vite attire l'œil en permanence et empêche de lire
   le texte autour : elle prend toute la place au lieu d'accompagner. À cette
   vitesse, le mouvement se remarque sans jamais réclamer l'attention.
   -------------------------------------------------------------------------- */
.cs-carrousel {
	position: relative;
}

/* La case à cocher qui commande l'arrêt. Masquée à l'œil, mais jamais
   display:none : elle doit rester atteignable au clavier et annonçable. */
.cs-carrousel-bascule {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cs-carrousel-cadre {
	overflow: hidden;
	/* Les images ne se coupent pas net sur les bords : elles s'effacent. Le
	   dégradé dit « ça continue » sans avoir à l'écrire. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 68px, #000 calc(100% - 68px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 68px, #000 calc(100% - 68px), transparent 100%);
}

.cs-carrousel-piste {
	display: flex;
	width: max-content;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: cs-defilement 72s linear infinite;
}

@keyframes cs-defilement {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Trois façons d'arrêter le mouvement : la commande, le survol, et le clavier
   qui entre dans la bande. Les deux dernières évitent qu'une image glisse
   sous le curseur au moment où on cherche à la regarder. */
.cs-carrousel-bascule:checked ~ .cs-carrousel-cadre .cs-carrousel-piste,
.cs-carrousel-cadre:hover .cs-carrousel-piste,
.cs-carrousel-cadre:focus-within .cs-carrousel-piste {
	animation-play-state: paused;
}

/* --- Une réalisation ------------------------------------------------------ */
.cs-realisation {
	flex: 0 0 clamp(228px, 24vw, 330px);
	background: var(--cs-blanc);
	border: 1px solid var(--cs-filet);
	border-radius: var(--cs-rayon-carte);
	overflow: hidden;
}

.cs-realisation-figure {
	margin: 0;
}

.cs-realisation img {
	display: block;
	width: 100%;
	height: auto;
	/* Les fichiers fournis sont carrés ; le rapport est imposé ici pour qu'une
	   photographie remplacée plus tard ne déforme pas la bande. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--cs-nuage);
}

.cs-realisation-legende {
	padding: 14px 16px;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--cs-bleu-nuit);
	border-top: 3px solid var(--cs-bleu-marque);
}

/* --- La commande d'arrêt -------------------------------------------------- */
.cs-carrousel-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	/* 44 px de haut : la cible reste confortable au doigt (WCAG 2.5.8). */
	min-height: 44px;
	margin-top: 18px;
	padding: 10px 18px;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--cs-bleu-nuit);
	background: var(--cs-blanc);
	border: 1px solid var(--cs-bord-champ);
	border-radius: 999px;
	cursor: pointer;
	transition: background var(--cs-transition), border-color var(--cs-transition);
}

.cs-carrousel-bouton:hover {
	background: var(--cs-bleu-clair);
	border-color: var(--cs-bleu);
}

.cs-carrousel-bouton svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* L'anneau de focus est porté par l'étiquette : la case, elle, est invisible.
   Sans cette règle, la commande serait inatteignable à l'œil au clavier. */
.cs-carrousel-bascule:focus-visible ~ .cs-carrousel-bouton {
	outline: 3px solid var(--cs-bleu);
	outline-offset: 2px;
}

/* Un seul des deux libellés à la fois, selon l'état de la case. */
.cs-carrousel-bascule:not(:checked) ~ .cs-carrousel-bouton .cs-quand-arrete,
.cs-carrousel-bascule:checked ~ .cs-carrousel-bouton .cs-quand-anime {
	display: none;
}

.cs-carrousel-bouton > span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

/* --- Mouvement refusé -----------------------------------------------------
   Quand le système demande à réduire les animations, la bande ne bouge plus du
   tout. Elle devient une simple rangée que l'on fait défiler à la main, avec
   un point d'accroche par image. La copie décorative disparaît : elle n'a plus
   de raison d'être, et elle doublerait inutilement la longueur de la course. */
@media (prefers-reduced-motion: reduce) {
	.cs-carrousel-piste {
		animation: none;
		width: auto;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 6px;
	}

	.cs-realisation[aria-hidden="true"] {
		display: none;
	}

	.cs-realisation {
		scroll-snap-align: start;
	}

	.cs-carrousel-cadre {
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* La commande n'a plus d'objet : il n'y a plus rien à arrêter. La case est
	   retirée en même temps que son étiquette. Masquer l'étiquette seule
	   laisserait une case invisible mais toujours atteignable au clavier : le
	   focus disparaîtrait de l'écran le temps d'une tabulation. */
	.cs-carrousel-bouton,
	.cs-carrousel-bascule {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   ÉTAPES NUMÉROTÉES
   -------------------------------------------------------------------------- */
.cs-etape {
	position: relative;
	padding-left: 62px;
}

.cs-etape-num {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cs-bleu-nuit);
	color: var(--cs-blanc);
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.125rem;
	font-weight: 700;
}

.cs-etape h3 {
	margin-top: 8px;
	margin-bottom: 8px;
}

.cs-etape p {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   ENCADRÉ « INFORMATION À FOURNIR »

   Visible à dessein. Il matérialise dans la maquette chaque donnée que
   l'entreprise doit nous transmettre, plutôt que de la remplacer par une
   valeur inventée. À supprimer une fois l'information reçue.
   -------------------------------------------------------------------------- */
.cs-a-fournir {
	position: relative;
	/* Marges verticales seulement : voir la note sur .cs-surtitre. */
	margin-top: 26px;
	margin-bottom: 26px;
	padding: 18px 22px 18px 54px;
	background: var(--cs-alerte-fond);
	border: 1px dashed var(--cs-alerte-bord);
	border-radius: 8px;
	color: var(--cs-alerte);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.6;
}

.cs-a-fournir::before {
	content: "!";
	position: absolute;
	left: 18px;
	top: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cs-alerte);
	color: var(--cs-alerte-fond);
	font-weight: 700;
	font-size: 0.8125rem;
	line-height: 1;
}

.cs-a-fournir strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--wp--preset--font-family--titres);
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cs-a-fournir p:last-child {
	margin-bottom: 0;
}

@media print {
	.cs-a-fournir {
		display: none; /* note de chantier : sans objet sur un document imprimé */
	}
}

/* --------------------------------------------------------------------------
   FIL D'ARIANE
   -------------------------------------------------------------------------- */
.cs-ariane {
	padding: 16px 0 0;
	font-size: var(--wp--preset--font-size--mini);
	color: var(--cs-brume);
}

.cs-ariane ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-ariane li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cs-ariane li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-right: 1px solid var(--cs-bord-champ);
	border-bottom: 1px solid var(--cs-bord-champ);
	transform: rotate(-45deg);
	flex: 0 0 auto;
}

.cs-ariane a {
	color: var(--cs-brume);
	text-decoration: none;
	display: inline-block;
	padding-top: 3px;
	padding-bottom: 3px;
}

.cs-ariane a:hover {
	color: var(--cs-bleu);
	text-decoration: underline;
}

.cs-ariane [aria-current="page"] {
	color: var(--cs-encre);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   ACCORDÉON FAQ

   Construit sur <details>/<summary> natifs : il s'ouvre et se ferme même
   si le JavaScript ne se charge pas, et le contenu reste trouvable par la
   recherche du navigateur.
   -------------------------------------------------------------------------- */
.cs-faq {
	border-top: 1px solid var(--cs-filet);
}

.cs-faq details {
	border-bottom: 1px solid var(--cs-filet);
}

.cs-faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 4px;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--cs-encre);
	transition: color var(--cs-transition);
}

/* Le triangle par défaut de Safari et Chrome. */
.cs-faq summary::-webkit-details-marker {
	display: none;
}

.cs-faq summary:hover {
	color: var(--cs-bleu);
}

.cs-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform var(--cs-transition);
}

.cs-faq details[open] summary::after {
	transform: rotate(135deg);
}

.cs-faq details > *:not(summary) {
	margin-top: 0;
	padding: 0 4px 22px;
	color: var(--cs-ardoise);
	max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
	.cs-faq summary::after {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   FORMULAIRE

   Les libellés sont VISIBLES et le restent pendant la saisie. C'est le
   principal défaut relevé sur le site actuel, où l'intitulé disparaît dès
   le premier caractère tapé.
   -------------------------------------------------------------------------- */
.cs-form {
	max-width: 720px;
}

.cs-form-grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 22px;
}

.cs-champ--large {
	grid-column: 1 / -1;
}

.cs-champ {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.cs-champ label {
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--cs-encre);
}

.cs-champ .cs-requis {
	color: var(--cs-erreur);
	margin-left: 2px;
}

.cs-champ .cs-aide {
	font-size: var(--wp--preset--font-size--mini);
	color: var(--cs-brume);
	font-weight: 400;
}

.cs-form input[type="text"],
.cs-form input[type="email"],
.cs-form input[type="tel"],
.cs-form input[type="search"],
.cs-form select,
.cs-form textarea {
	width: 100%;
	padding: 13px 15px;
	font-family: inherit;
	/* 16 px minimum : en dessous, iOS zoome automatiquement sur le champ et
	   désaligne toute la page. */
	font-size: 1rem;
	line-height: 1.45;
	color: var(--cs-encre);
	background: var(--cs-blanc);
	border: 1px solid var(--cs-bord-champ);
	border-radius: var(--cs-rayon-bouton);
	transition: border-color var(--cs-transition), box-shadow var(--cs-transition);
	-webkit-appearance: none;
	appearance: none;
}

.cs-form textarea {
	min-height: 150px;
	resize: vertical;
}

/* La flèche du menu déroulant, dessinée plutôt qu'importée. */
.cs-form select {
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%230C1C2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 13px 8px;
}

.cs-form input:focus,
.cs-form select:focus,
.cs-form textarea:focus {
	border-color: var(--cs-bleu);
	box-shadow: 0 0 0 3px rgba(11, 111, 164, 0.18);
	outline: none;
}

.cs-form input:focus-visible,
.cs-form select:focus-visible,
.cs-form textarea:focus-visible {
	outline: 3px solid var(--cs-action);
	outline-offset: 1px;
}

.cs-form ::placeholder {
	color: var(--cs-brume);
	opacity: 1;
}

/* --- État d'erreur -------------------------------------------------------- */
.cs-champ--erreur input,
.cs-champ--erreur select,
.cs-champ--erreur textarea {
	border-color: var(--cs-erreur);
	background: var(--cs-erreur-fond);
}

.cs-champ-erreur {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 500;
	color: var(--cs-erreur);
}

/* --- Consentement RGPD ---------------------------------------------------- */
.cs-consentement {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	background: var(--cs-nuage);
	border: 1px solid var(--cs-filet);
	border-radius: var(--cs-rayon-bouton);
}

.cs-consentement input[type="checkbox"] {
	flex: 0 0 auto;
	/* 24 px minimum : c'est la case la plus importante du site, celle sans
	   laquelle la demande de devis ne part pas. */
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--cs-bleu);
	cursor: pointer;
}

.cs-consentement label {
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 400;
	line-height: 1.55;
	color: var(--cs-ardoise);
	cursor: pointer;
}

.cs-consentement.cs-champ--erreur {
	border-color: var(--cs-erreur);
	background: var(--cs-erreur-fond);
}

/* --- Piège à robots : invisible pour l'humain, rempli par les automates.
   « display:none » ne suffit pas, certains robots l'évitent : le champ
   reste dans le flux mais hors écran, et échappe à la tabulation. ------- */
.cs-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Bouton d'envoi et état d'attente ------------------------------------- */
.cs-form-envoi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 4px;
}

.cs-form button[type="submit"] {
	position: relative;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	padding: 16px 32px;
	border: 1px solid var(--cs-action);
	border-radius: var(--cs-rayon-bouton);
	background: var(--cs-action);
	color: var(--cs-blanc);
	cursor: pointer;
	transition: background-color var(--cs-transition), border-color var(--cs-transition);
}

.cs-form button[type="submit"]:hover,
.cs-form button[type="submit"]:focus {
	background: var(--cs-action-fonce);
	border-color: var(--cs-action-fonce);
}

.cs-form button[type="submit"][aria-busy="true"] {
	cursor: progress;
	padding-left: 52px;
}

.cs-form button[type="submit"][aria-busy="true"]::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--cs-blanc);
	border-radius: 50%;
	animation: cs-tourne 700ms linear infinite;
}

@keyframes cs-tourne {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cs-form button[type="submit"][aria-busy="true"]::before {
		animation-duration: 2.4s;
	}
}

.cs-form-mention {
	font-size: var(--wp--preset--font-size--mini);
	color: var(--cs-brume);
	margin: 0;
}

/* --- Messages de résultat ------------------------------------------------- */
.cs-message {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 22px;
	border-radius: 8px;
	border: 1px solid;
	margin-bottom: 28px;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.6;
}

.cs-message p {
	margin: 0;
}

.cs-message p + p {
	margin-top: 6px;
}

.cs-message--succes {
	background: var(--cs-succes-fond);
	border-color: var(--cs-succes);
	color: #14532D;
}

.cs-message--erreur {
	background: var(--cs-erreur-fond);
	border-color: var(--cs-erreur);
	color: #7F1D1D;
}

.cs-message-icone {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
}

.cs-message-icone svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cs-message strong {
	font-family: var(--wp--preset--font-family--titres);
}

/* --------------------------------------------------------------------------
   BLOC DE CONTACT DIRECT (téléphone, e-mail, adresse)
   -------------------------------------------------------------------------- */
.cs-coord {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--cs-filet);
}

.cs-coord:last-child {
	border-bottom: 0;
}

/* Un enfant de conteneur flexible refuse par défaut de descendre sous la
   largeur de son contenu. Sans cette ligne, une adresse e-mail un peu longue
   pousse le bloc hors de sa colonne dès que celle-ci se resserre — ce qui se
   produit exactement entre 782 et 960 px, la largeur d'une tablette posée à
   l'horizontale. */
.cs-coord > div {
	min-width: 0;
}

.cs-coord a {
	overflow-wrap: anywhere;
}

.cs-coord-icone {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: var(--cs-bleu-clair);
	color: var(--cs-bleu);
}

.cs-coord-icone svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cs-coord-titre {
	display: block;
	margin: 0 0 3px;
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cs-brume);
}

.cs-coord-valeur {
	display: block;
	margin: 0;
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.1875rem;
	font-weight: 600;
	color: var(--cs-encre);
	line-height: 1.4;
}

.cs-coord-valeur a {
	color: inherit;
	text-decoration: none;
	/* Téléphone et e-mail sont les deux liens les plus souvent touchés du
	   site : ils doivent atteindre la taille de cible minimale (WCAG 2.2,
	   critère 2.5.8) sans dépendre du type de pointeur détecté. */
	display: inline-block;
	padding-top: 3px;
	padding-bottom: 3px;
}

.cs-coord-valeur a:hover {
	color: var(--cs-bleu);
	text-decoration: underline;
}

.cs-coord-note {
	display: block;
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--cs-brume);
}

/* --------------------------------------------------------------------------
   LISTE À PUCES COCHÉES
   -------------------------------------------------------------------------- */
.cs-liste-cochee {
	list-style: none;
	/* Marges verticales seulement : voir la note sur .cs-surtitre. */
	margin-top: 0;
	margin-bottom: 0;
	/* Le retrait de puce est supprimé, mais pas les marges latérales. */
	padding-left: 0;
}

.cs-liste-cochee li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 12px;
}

/* Un élément de liste qui ne contient qu'un lien est une entrée de navigation,
   et non un lien au fil du texte : la taille de cible minimale s'y applique
   (WCAG 2.2, critère 2.5.8). Deux pixels de remplissage suffisent à l'atteindre
   sans modifier le rythme de la liste. */
.cs-liste-cochee li > a:only-child {
	display: inline-block;
	padding-top: 2px;
	padding-bottom: 2px;
}

.cs-liste-cochee li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 18px;
	height: 18px;
	background: var(--cs-bleu);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5 7 13.5 15 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5 7 13.5 15 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cs-sur-sombre .cs-liste-cochee li::before {
	background: var(--cs-clair-doux);
}

/* --------------------------------------------------------------------------
   PAGINATION (blog, résultats de recherche)
   -------------------------------------------------------------------------- */
.wp-block-query-pagination {
	margin-top: 48px;
	gap: 10px;
}

.wp-block-query-pagination a,
.wp-block-query-pagination span {
	padding: 9px 15px;
	border: 1px solid var(--cs-filet);
	border-radius: var(--cs-rayon-bouton);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--petit);
}

.wp-block-query-pagination .current {
	background: var(--cs-bleu-nuit);
	border-color: var(--cs-bleu-nuit);
	color: var(--cs-blanc);
}