/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   Formulaire Gravity Forms — habillage repris de la maquette HTML
   (maquette/styles.css, section « Formulaire » : .form-devis, .champ,
   .champ-label, .champ-requis, .champ-saisie, .champ-aide, .champ-choix).
   Tout passe par les variables --k-* du kit Elementor : si la charte bouge
   dans le kit, le formulaire suit.

   Gravity Forms suffixe la classe du formulaire par « _wrapper » sur le
   conteneur, d'où le sélecteur en [class*="kz-formulaire"], qui couvre
   aussi le conteneur de confirmation, lui non suffixé.
   ========================================================================== */

/* La maquette pose le formulaire à même le bloc : ni panneau gris, ni filet.
   L'emplacement réservé par l'intégration est donc neutralisé. */
.elementor .emplacement-formulaire,
.emplacement-formulaire {
	background-color: transparent;
	border: 0;
	min-height: 0;
	padding: 0;
}

.gform_wrapper[class*="kz-formulaire"] {
	/* Couleurs */
	--gf-color-primary: var(--k-cta-fond, #282828);
	--gf-color-primary-rgb: 40, 40, 40;
	--gf-color-primary-contrast: var(--k-cta-label, #ffffff);
	--gf-color-primary-contrast-rgb: 255, 255, 255;
	--gf-color-primary-darker: var(--k-cta-fond-hover, #000000);
	--gf-color-primary-lighter: var(--k-gris-moyen, #414042);
	--gf-color-secondary: var(--k-surface-1, #ffffff);
	--gf-color-secondary-contrast: var(--k-text-fort, #282828);
	--gf-color-out-ctrl-light: var(--k-border-color-moyen, #414042);
	--gf-color-out-ctrl-light-darker: var(--k-graphite, #282828);
	--gf-color-out-ctrl-dark: var(--k-text-courant, #414042);
	--gf-color-in-ctrl: var(--k-blanc, #ffffff);
	--gf-color-in-ctrl-contrast: var(--k-text-fort, #282828);
	--gf-color-in-ctrl-dark: var(--k-text-fort, #282828);
	--gf-color-in-ctrl-light: var(--k-border-color-moyen, #414042);
	--gf-color-in-ctrl-primary: var(--k-graphite, #282828);
	--gf-color-in-ctrl-primary-contrast: var(--k-jaune, #ffd400);
	--gf-color-danger: var(--k-rouge, #ff0b2e);
	--gf-color-success: var(--k-vert, #1d9970);

	/* Formes et typographie */
	--gf-radius: var(--k-radius, 0px);
	--gf-ctrl-radius: var(--k-radius, 0px);
	--gf-font-family-base: var(--k-font-family, "Mona Sans"), system-ui, sans-serif;
	--gf-font-family-primary: var(--k-font-family, "Mona Sans"), system-ui, sans-serif;
	--gf-font-family-secondary: var(--k-font-family, "Mona Sans"), system-ui, sans-serif;
	--gf-font-family-tertiary: var(--k-font-family, "Mona Sans"), system-ui, sans-serif;
	--gf-font-size-primary: var(--k-p-size, 18px);
	--gf-font-size-secondary: var(--k-label-size, 13px);

	/* Boutons : le framework Gravity Forms les stylise avec une spécificité
	   très élevée, on passe donc par ses propres variables. */
	--gf-ctrl-btn-font-family: var(--k-font-family, "Mona Sans"), system-ui, sans-serif;
	--gf-ctrl-btn-font-size: var(--k-btn-size, 16px);
	--gf-ctrl-btn-font-size-md: var(--k-btn-size, 16px);
	--gf-ctrl-btn-font-weight: var(--k-btn-weight, 600);
	--gf-ctrl-btn-letter-spacing: var(--k-btn-ls, 0px);
	--gf-ctrl-btn-radius: var(--k-radius, 0px);
	--gf-ctrl-btn-size: var(--k-cta-h, 56px);
	--gf-ctrl-btn-size-md: var(--k-cta-h, 56px);
	--gf-ctrl-btn-size-lg: var(--k-cta-h, 56px);
	--gf-ctrl-btn-padding-x: var(--k-cta-px, 32px);
	--gf-ctrl-btn-padding-x-md: var(--k-cta-px, 32px);
	--gf-ctrl-btn-shadow: none;
	--gf-ctrl-btn-shadow-hover: none;
	--gf-ctrl-btn-shadow-focus: none;
	--gf-ctrl-btn-bg-color-primary: var(--k-cta-fond, #282828);
	--gf-ctrl-btn-bg-color-hover-primary: var(--k-cta-fond-hover, #000000);
	--gf-ctrl-btn-bg-color-focus-primary: var(--k-cta-fond-hover, #000000);
	--gf-ctrl-btn-border-color-primary: var(--k-cta-fond, #282828);
	--gf-ctrl-btn-border-color-hover-primary: var(--k-cta-fond-hover, #000000);
	--gf-ctrl-btn-border-color-focus-primary: var(--k-cta-fond-hover, #000000);
	--gf-ctrl-btn-color-primary: var(--k-cta-label, #ffffff);
	--gf-ctrl-btn-color-hover-primary: var(--k-cta-label, #ffffff);
	--gf-ctrl-btn-color-focus-primary: var(--k-cta-label, #ffffff);

	max-width: 100%;
}

/* Gouttières de la maquette : 24 px entre les champs, en ligne comme en colonne. */
.gform_wrapper[class*="kz-formulaire"] .gform_fields {
	grid-row-gap: var(--k-space-24, 24px);
	grid-column-gap: var(--k-space-24, 24px);
}

/* Libellés : capitales espacées, comme .champ-label */
.gform_wrapper[class*="kz-formulaire"] .gfield_label {
	display: flex;
	align-items: center;
	gap: var(--k-space-8, 8px);
	margin-bottom: var(--k-space-8, 8px);
	font-family: var(--k-font-family, "Mona Sans"), system-ui, sans-serif;
	font-size: var(--k-label-size, 13px);
	line-height: var(--k-label-lh, 1.2);
	letter-spacing: var(--k-label-ls, 1px);
	font-weight: var(--k-label-weight, 600);
	text-transform: uppercase;
	color: var(--k-text-fort, #282828);
}

/* Champ obligatoire : un carré rouge de 6 px, jamais un libellé, comme .champ-requis.
   Le texte reste dans le DOM pour les lecteurs d'écran. */
.gform_wrapper[class*="kz-formulaire"] .gfield_required {
	font-size: 0;
	line-height: 0;
	color: transparent;
	display: inline-flex;
	align-items: center;
}

.gform_wrapper[class*="kz-formulaire"] .gfield_label > .gfield_required::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	background-color: var(--k-rouge, #ff0b2e);
}

/* Champs de saisie : hauteur du CTA, filet gris moyen, angles vifs, texte courant. */
.gform_wrapper[class*="kz-formulaire"] input[type="text"],
.gform_wrapper[class*="kz-formulaire"] input[type="email"],
.gform_wrapper[class*="kz-formulaire"] input[type="tel"],
.gform_wrapper[class*="kz-formulaire"] input[type="number"],
.gform_wrapper[class*="kz-formulaire"] input[type="url"],
.gform_wrapper[class*="kz-formulaire"] select,
.gform_wrapper[class*="kz-formulaire"] textarea {
	min-height: var(--k-cta-h, 56px);
	max-width: 100%;
	padding: 0 var(--k-space-16, 16px);
	background-color: var(--k-blanc, #ffffff);
	border: var(--k-border-fin, 1px) solid var(--k-border-color-moyen, #414042);
	border-radius: var(--k-radius, 0px);
	font-family: var(--k-font-family, "Mona Sans"), system-ui, sans-serif;
	font-size: var(--k-p-size, 18px);
	color: var(--k-text-fort, #282828);
}

.gform_wrapper[class*="kz-formulaire"] textarea {
	padding: var(--k-space-16, 16px);
	min-height: calc(3 * var(--k-cta-h, 56px));
	line-height: var(--k-p-lh, 1.6);
	resize: vertical;
}

/* Le framework Gravity Forms retire l'habillage natif des listes et dessine sa
   propre flèche : on réserve la place à droite et on coupe proprement les
   libellés longs, qui sinon passent à la ligne dans un champ à hauteur fixe. */
.gform_wrapper[class*="kz-formulaire"] select {
	padding-inline-end: 44px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gform_wrapper[class*="kz-formulaire"] input:hover,
.gform_wrapper[class*="kz-formulaire"] select:hover,
.gform_wrapper[class*="kz-formulaire"] textarea:hover {
	border-color: var(--k-graphite, #282828);
}

.gform_wrapper[class*="kz-formulaire"] ::placeholder {
	color: var(--k-text-secondaire, #696969);
	opacity: 1;
}

/* Boutons radio et cases : rangée de 24 px, hauteur de champ, comme .champ-choix. */
.gform_wrapper[class*="kz-formulaire"] .gfield_radio,
.gform_wrapper[class*="kz-formulaire"] .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--k-space-8, 8px) var(--k-space-24, 24px);
	min-height: var(--k-cta-h, 56px);
}

.gform_wrapper[class*="kz-formulaire"] .gchoice {
	display: flex;
	align-items: center;
}

.gform_wrapper[class*="kz-formulaire"] .gchoice label {
	display: flex;
	align-items: center;
	gap: var(--k-space-8, 8px);
	margin: 0;
	font-size: var(--k-p-size, 18px);
	line-height: 1.3;
	color: var(--k-text-courant, #414042);
	text-transform: none;
	letter-spacing: 0;
	font-weight: var(--k-weight-regular, 400);
}

/* Aides de saisie et mentions : petit texte secondaire, comme .champ-aide. */
.gform_wrapper[class*="kz-formulaire"] .gfield_description,
.gform_wrapper[class*="kz-formulaire"] .gform_kz_mention {
	font-family: var(--k-font-family, "Mona Sans"), system-ui, sans-serif;
	font-size: var(--k-small-size, 15px);
	line-height: var(--k-small-lh, 1.5);
	color: var(--k-text-secondaire, #696969);
	margin: var(--k-space-8, 8px) 0 0;
	padding: 0;
}

.gform_wrapper[class*="kz-formulaire"] .gfield_description a,
.gform_wrapper[class*="kz-formulaire"] .gform_kz_mention a {
	color: var(--k-text-fort, #282828);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Focus visible : filet rouge de la charte, décalé. */
.gform_wrapper[class*="kz-formulaire"] :is(input, textarea, select, button, a, [tabindex]):focus-visible {
	outline: var(--k-focus-w, 3px) solid var(--k-focus-sur-clair, #ff0b2e);
	outline-offset: var(--k-focus-offset, 2px);
	box-shadow: none;
}

/* Pied de formulaire */
.gform_wrapper[class*="kz-formulaire"] .gform_footer {
	margin-top: var(--k-space-24, 24px);
	padding: 0;
}

@media (max-width: 767px) {
	.gform_wrapper[class*="kz-formulaire"] .gform_footer input,
	.gform_wrapper[class*="kz-formulaire"] .gform_footer button {
		width: 100%;
		min-height: var(--k-cta-h-mobile, 52px);
	}
}

/* Erreurs */
.gform_wrapper[class*="kz-formulaire"] .gform_validation_errors {
	border: var(--k-border-epais, 2px) solid var(--k-erreur-border, #ff0b2e);
	border-radius: var(--k-radius, 0px);
	background-color: var(--k-surface-1, #ffffff);
	box-shadow: none;
}

.gform_wrapper[class*="kz-formulaire"] .gform_validation_errors > h2 {
	font-family: var(--k-font-family, "Mona Sans"), system-ui, sans-serif;
	color: var(--k-erreur-border, #ff0b2e);
}

.gform_wrapper[class*="kz-formulaire"] .gfield_error input,
.gform_wrapper[class*="kz-formulaire"] .gfield_error select,
.gform_wrapper[class*="kz-formulaire"] .gfield_error textarea {
	border-color: var(--k-erreur-border, #ff0b2e);
	border-width: var(--k-border-epais, 2px);
}

.gform_wrapper[class*="kz-formulaire"] .gfield_validation_message {
	background-color: transparent;
	border: 0;
	border-inline-start: var(--k-border-epais, 2px) solid var(--k-erreur-border, #ff0b2e);
	color: var(--k-erreur-border, #ff0b2e);
	font-size: var(--k-small-size, 15px);
	padding: 4px 0 4px var(--k-space-12, 12px);
}

/* Message de confirmation : filet vert de 4 px, comme les encadrés de la maquette. */
.gform_confirmation_wrapper[class*="kz-formulaire"] {
	border-inline-start: var(--k-border-bloc, 4px) solid var(--k-vert, #1d9970);
	background-color: var(--k-surface-1, #ffffff);
	padding: var(--k-space-24, 24px);
}

.gform_confirmation_wrapper[class*="kz-formulaire"] p {
	font-family: var(--k-font-family, "Mona Sans"), system-ui, sans-serif;
	font-size: var(--k-p-size, 18px);
	line-height: var(--k-p-lh, 1.6);
	color: var(--k-text-courant, #414042);
	margin: 0 0 var(--k-space-12, 12px);
}

.gform_confirmation_wrapper[class*="kz-formulaire"] p:last-child { margin-bottom: 0; }
.gform_confirmation_wrapper[class*="kz-formulaire"] strong { color: var(--k-text-fort, #282828); }

/* --------------------------------------------------------------------------
   Formulaire posé sur un bloc jaune (pages PF et KCB) : le CTA de la charte
   devient graphite à label jaune, et le focus passe au graphite.
   -------------------------------------------------------------------------- */
.bloc-jaune .gform_wrapper[class*="kz-formulaire"] {
	--gf-ctrl-btn-bg-color-primary: var(--k-cta-sur-jaune-fond, #282828);
	--gf-ctrl-btn-bg-color-hover-primary: var(--k-noir, #000000);
	--gf-ctrl-btn-bg-color-focus-primary: var(--k-noir, #000000);
	--gf-ctrl-btn-border-color-primary: var(--k-cta-sur-jaune-fond, #282828);
	--gf-ctrl-btn-border-color-hover-primary: var(--k-noir, #000000);
	--gf-ctrl-btn-color-primary: var(--k-cta-sur-jaune-label, #ffd400);
	--gf-ctrl-btn-color-hover-primary: var(--k-cta-sur-jaune-label, #ffd400);
	--gf-ctrl-btn-color-focus-primary: var(--k-cta-sur-jaune-label, #ffd400);
}

.bloc-jaune .gform_wrapper[class*="kz-formulaire"] .gfield_description,
.bloc-jaune .gform_wrapper[class*="kz-formulaire"] .gform_kz_mention,
.bloc-jaune .gform_wrapper[class*="kz-formulaire"] .gchoice label {
	color: var(--k-k-sur-jaune, #282828);
}

.bloc-jaune .gform_wrapper[class*="kz-formulaire"] :is(input, textarea, select, button, a, [tabindex]):focus-visible {
	outline-color: var(--k-focus-sur-jaune, #282828);
}

/* Sur fond graphite, si un formulaire y est posé un jour. */
.bloc-graphite .gform_wrapper[class*="kz-formulaire"] .gfield_label,
.bloc-graphite .gform_wrapper[class*="kz-formulaire"] .gchoice label {
	color: var(--k-text-inverse, #ffffff);
}

.bloc-graphite .gform_wrapper[class*="kz-formulaire"] .gfield_description,
.bloc-graphite .gform_wrapper[class*="kz-formulaire"] .gform_kz_mention {
	color: var(--k-text-inverse-2, #d1d3d4);
}

.bloc-graphite .gform_wrapper[class*="kz-formulaire"] {
	--gf-ctrl-btn-bg-color-primary: var(--k-cta-sur-sombre-fond, #ffd400);
	--gf-ctrl-btn-color-primary: var(--k-cta-sur-sombre-label, #282828);
	--gf-ctrl-btn-bg-color-hover-primary: var(--k-cta-sur-sombre-hover, #ffe14d);
	--gf-ctrl-btn-border-color-primary: var(--k-cta-sur-sombre-fond, #ffd400);
}


/* ===============================================================================================
   Carrousel de produits liés (fiche Produit, section « Les autres modèles
   de la gamme ») — widget Loop Carousel d'Elementor Pro posé dans
   .carrousel-produits (classe globale g-kz-carrousel-produits, rendue sans préfixe). Le widget classique n'accepte pas les classes
   globales v4 : flèches et puces sont habillées ici avec les variables
   --k-* du kit, comme le formulaire Gravity Forms.
   ============================================================================================== */
.carrousel-produits .elementor-widget-loop-carousel {
	width: 100%;
	min-width: 0;
	/* Variables lues par le widget pour la couleur du chevron. */
	--arrow-normal-color: var(--k-jaune, #ffd400);
	--arrow-hover-color: var(--k-jaune, #ffd400);
	--arrow-size: 20px;
}

/* Les cartes gardent la même hauteur et remplissent leur diapositive. */
.carrousel-produits .swiper-slide {
	display: flex;
	height: auto;
}

.carrousel-produits .swiper-slide > * {
	width: 100%;
}

/* Flèches : carré graphite à chevron jaune, angles vifs, posées aux bords
   du bloc (le bloc a 48 px de marge interne, les flèches s'y logent). */
.carrousel-produits .elementor-swiper-button {
	width: var(--k-cta-h, 56px);
	height: var(--k-cta-h, 56px);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--k-cta-fond, #282828);
	color: var(--k-jaune, #ffd400);
	border-radius: var(--k-radius, 0px);
	font-size: 20px;
	opacity: 1;
	transition: background-color .2s ease;
}

.carrousel-produits .elementor-swiper-button:hover {
	background-color: var(--k-cta-fond-hover, #000000);
	color: var(--k-jaune, #ffd400);
}

.carrousel-produits .elementor-swiper-button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.carrousel-produits .elementor-swiper-button-prev { left: 0; }
.carrousel-produits .elementor-swiper-button-next { right: 0; }

.carrousel-produits .elementor-swiper-button.swiper-button-disabled {
	opacity: .25;
}

/* Puces : carrés de 8 px, gris moyen, graphite pour la diapositive active. */
.carrousel-produits .swiper-pagination {
	position: static;
	margin-top: var(--k-space-24, 24px);
	display: flex;
	justify-content: center;
	gap: var(--k-space-8, 8px);
}

.carrousel-produits .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 !important;
	border-radius: 0;
	background-color: var(--k-border-color-moyen, #414042);
	opacity: .4;
	transition: opacity .2s ease;
}

.carrousel-produits .swiper-pagination-bullet-active {
	background-color: var(--k-graphite, #282828);
	opacity: 1;
}

.carrousel-produits :is(.elementor-swiper-button, .swiper-pagination-bullet):focus-visible {
	outline: var(--k-focus-w, 3px) solid var(--k-focus-sur-clair, #ff0b2e);
	outline-offset: var(--k-focus-offset, 2px);
}

@media (max-width: 767px) {
	.carrousel-produits .elementor-swiper-button {
		width: 44px;
		height: 44px;
	}
}


/* ==========================================================================
   Filtre FacetWP « Catégories » — page Actualités (gabarit 483)
   Reprend l'habillage de la liste carrée du bloc graphite : puce carrée
   jaune, texte sur fond sombre. Tout passe par les variables --k-* du kit.
   ========================================================================== */

.kz-facet-categories .facetwp-facet {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--k-space-12);
}

.kz-facet-categories .facetwp-checkbox {
	position: relative;
	margin: 0;
	padding: 0 0 0 calc(var(--k-puce-carre) + var(--k-space-16));
	background: none;
	font-family: var(--k-font-family);
	font-size: var(--k-p-size);
	line-height: var(--k-p-lh);
	color: var(--k-text-inverse-2);
	cursor: pointer;
}

.kz-facet-categories .facetwp-checkbox::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.55em;
	width: var(--k-puce-carre);
	height: var(--k-puce-carre);
	box-shadow: inset 0 0 0 1px var(--k-jaune);
	transition: background-color .15s ease;
}

.kz-facet-categories .facetwp-checkbox:hover::before {
	background-color: color-mix(in srgb, var(--k-jaune) 45%, transparent);
}

.kz-facet-categories .facetwp-checkbox.checked::before {
	background-color: var(--k-jaune);
}

.kz-facet-categories .facetwp-counter {
	opacity: .55;
}

.kz-facet-categories .facetwp-checkbox:focus-visible {
	outline: 2px solid var(--k-jaune);
	outline-offset: 4px;
}

/* Actualites : la liste est une suite de lignes pleine largeur. Une ligne sur
   deux inverse ses blocs, la photo passe a gauche et le texte a droite.
   La grille commence par un element <style> : on compte donc les blocs de
   contenu avec nth-of-type, pour que la premiere ligne garde sa photo a droite.
   Sous 768px le damier repasse en colonne, l'inversion ne doit pas s'appliquer. */
@media (min-width: 768px) {
	#liste-articles .e-loop-item:nth-of-type(even) .damier {
		flex-direction: row-reverse;
	}
}


/* ==========================================================================
   Article : sommaire (widget Table of Contents) et section « à lire aussi »
   Le sommaire reprend l'habillage des listes carrées du site : puce carrée
   jaune, texte clair sur le bloc graphite. Le cadre par défaut du widget est
   neutralisé, le titre du widget aussi : le bloc porte déjà son intitulé.
   ========================================================================== */

.kz-toc,
.kz-toc .elementor-widget-container,
.kz-toc .elementor-toc__body {
	background: none;
	border: 0;
	padding: 0;
	max-height: none;
	min-height: 0;
	overflow: visible;
}

.kz-toc .elementor-toc__header,
.kz-toc .elementor-toc__spinner-container,
.kz-toc .elementor-toc__list-item-text-wrapper > svg,
.kz-toc .elementor-toc__list-item-text-wrapper > i {
	display: none;
}

.kz-toc .elementor-toc__list-wrapper {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--k-space-12);
}

.kz-toc .elementor-toc__list-item {
	position: relative;
	margin: 0;
	padding-inline-start: calc(var(--k-puce-carre) + var(--k-space-16));
	list-style: none;
}

.kz-toc .elementor-toc__list-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.55em;
	width: var(--k-puce-carre);
	height: var(--k-puce-carre);
	background-color: var(--k-jaune);
}

.kz-toc .elementor-toc__list-item-text-wrapper {
	display: block;
}

.kz-toc .elementor-toc__list-item-text,
.kz-toc a {
	font-family: var(--k-font-family);
	font-size: var(--k-p-size);
	line-height: var(--k-p-lh);
	color: var(--k-text-inverse-2);
	text-decoration: none;
}

.kz-toc a:hover,
.kz-toc .elementor-item-active {
	color: var(--k-jaune);
}

.kz-toc .elementor-toc__list-item .elementor-toc__list-wrapper {
	margin-block-start: var(--k-space-12);
}

/* Aucun article lié : la section ne s'affiche pas du tout. */
#lies:not(:has(.e-loop-item)) {
	display: none;
}

/* ==========================================================================
   Avatar du fondateur (portrait vectorisé de la charte, noir sur jaune).
   Une seule occurrence par page : en tête du bloc consacré au fondateur sur
   l'accueil et sur la page Histoire, en pleine largeur du bloc jaune sur
   la page Le Groupe. Le filtre noir et blanc des photos est neutralisé.
   ========================================================================== */

#avatar-fondateur {
	display: block;
	filter: none;
	object-fit: contain;
}

.bloc-jaune #avatar-fondateur {
	width: 100%;
	height: auto;
}

.bloc-graphite #avatar-fondateur {
	width: 160px;
	max-width: 100%;
	height: auto;
	align-self: flex-start;
}

/* ==========================================================================
   Bandeau de consentement (SEOPress) aligné sur la charte : angles droits,
   pas d'ombre ni de mouvement au survol, typographie du site. Il occupe la
   moitié gauche de l'écran ; sous 782 px SEOPress le repasse en pleine
   largeur avec ses boutons empilés, ce qui convient au mobile.
   Les sélecteurs doublent la classe pour passer devant le style injecté
   par le plugin dans le pied de page.
   ========================================================================== */

.seopress-user-consent.seopress-user-message {
	border-radius: 0;
	box-shadow: none;
	font-family: var(--k-font-family);
}

.seopress-user-consent.seopress-user-message button {
	border-radius: 0;
	font-family: inherit;
	transition: background-color .15s ease, color .15s ease;
}

.seopress-user-consent.seopress-user-message button:hover {
	transform: none;
	box-shadow: none;
}

.seopress-user-consent #seopress-user-consent-close {
	border: 1px solid var(--k-border-color-inverse) !important;
}

/* Reseaux sociaux du footer : la cible tactile passe a 24 px sans changer
   la taille visible de l'icone. */
.kz-reseaux .elementor-social-icon {
	padding: 4px;
	margin: -4px;
}

/* ==========================================================================
   Gravity Forms : l'astérisque des champs obligatoires est calé à droite du
   label. Le second bloc redonne un positionnement relatif au conteneur du
   framework Gravity, sans quoi l'astérisque se positionnerait par rapport à
   un ancetre plus lointain.
   ========================================================================== */

.gform_wrapper[class*="kz-formulaire"] .gfield_label > .gfield_required::before {
	position: absolute;
	right: 0;
}

.gform-theme--framework .gform-field-label > .gfield_required:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)),
.gform-theme--framework.gform_editor legend.gform-field-label > span > .gfield_required:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
	position: relative;
}

/* ==========================================================================
   Fiche produit : le schéma coté et le carrousel de gamme.
   Quand le schéma existe, le texte d'emplacement disparaît et le bloc reprend
   l'allure d'un bloc photo. Quand la gamme n'a pas d'autre modèle, le bloc
   entier disparaît plutôt que d'afficher un carrousel vide.
   ========================================================================== */

/* Elementor rend une balise img sans src quand le champ image est vide :
   on ne considère donc comme illustré qu'un bloc dont l'image porte un src. */
#schema-cote img:not([src]) {
	display: none;
}

#schema-cote:has(img[src]) {
	background: none;
	padding: 0;
}

#schema-cote:has(img[src]) .emplacement-label {
	display: none;
}

#gamme-autres-modeles:not(:has(.e-loop-item)) {
	display: none;
}


/* ==========================================================================
   Filtres FacetWP — archive Réalisations (gabarit 469)
   Les trois filtres Elementor de la page ont été remplacés par des facettes
   FacetWP : type d'ouvrage, région et marque, plus le nombre de résultats,
   les choix retenus et la pagination autour de la grille. L'habillage
   reprend celui du filtre « Catégories » des actualités, transposé sur le
   fond clair du bloc blanc. Tout passe par les variables --k-* du kit.
   ========================================================================== */

/* La barre passe en trois colonnes : chaque libellé coiffe sa facette.
   Le DOM alterne libellé, facette, libellé, facette… d'où le remplissage en
   colonnes sur deux rangées. */
#filtres {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	align-items: start;
	column-gap: var(--k-space-24, 24px);
	row-gap: var(--k-space-8, 8px);
}

@media (max-width: 767px) {
	#filtres {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
	}

	#filtres > .elementor-widget-facetwp-facet:not(:last-child) {
		margin-block-end: var(--k-space-16, 16px);
	}
}

#filtres .facet-wrap {
	margin: 0;
}

#filtres .facetwp-facet {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--k-space-8, 8px);
}

#filtres .facetwp-checkbox {
	position: relative;
	margin: 0;
	padding: 0 0 0 calc(var(--k-puce-carre, 12px) + var(--k-space-12, 12px));
	background: none;
	font-family: var(--k-font-family);
	font-size: var(--k-small-size, 15px);
	line-height: var(--k-small-lh, 1.5);
	color: var(--k-text-courant, #414042);
	cursor: pointer;
}

#filtres .facetwp-checkbox::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.4em;
	width: var(--k-puce-carre, 12px);
	height: var(--k-puce-carre, 12px);
	box-shadow: inset 0 0 0 1px var(--k-graphite, #282828);
	transition: background-color .15s ease;
}

#filtres .facetwp-checkbox:hover::before {
	background-color: color-mix(in srgb, var(--k-jaune, #ffd400) 45%, transparent);
}

#filtres .facetwp-checkbox.checked {
	color: var(--k-text-fort, #282828);
}

#filtres .facetwp-checkbox.checked::before {
	background-color: var(--k-jaune, #ffd400);
}

/* Choix sans résultat dans la sélection courante : gardé en place, inerte. */
#filtres .facetwp-checkbox.disabled {
	opacity: .4;
	cursor: default;
}

#filtres .facetwp-counter {
	opacity: .55;
}

#filtres .facetwp-checkbox:focus-visible {
	outline: var(--k-focus-w, 3px) solid var(--k-focus-sur-clair, #ff0b2e);
	outline-offset: var(--k-focus-offset, 2px);
}

/* --------------------------------------------------------------------------
   Bandeau posé juste au-dessus de la grille : nombre de résultats, choix
   retenus, remise à zéro. Le damier étant un conteneur flex, le bandeau et
   la pagination occupent chacun une rangée entière.
   -------------------------------------------------------------------------- */
#resultats-realisations {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--k-space-24, 24px);
	row-gap: var(--k-space-8, 8px);
	padding-block-end: var(--k-space-16, 16px);
	margin-block-end: var(--k-space-24, 24px);
	border-block-end: var(--k-border-fin, 1px) solid var(--k-border-color-moyen, #414042);
}

#resultats-realisations .facet-wrap {
	margin: 0;
}

.kz-facet-compteur {
	font-family: var(--k-font-family);
	font-size: var(--k-small-size, 15px);
	line-height: var(--k-small-lh, 1.5);
	color: var(--k-text-secondaire, #414042);
}

.kz-facet-compteur strong {
	color: var(--k-text-fort, #282828);
}

/* Les choix retenus prennent la place libre, la remise à zéro reste à droite. */
.kz-facet-selections {
	flex: 1 1 12rem;
}

.kz-facet-reset {
	margin-inline-start: auto;
}

#resultats-realisations .facetwp-selections ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--k-space-8, 8px);
}

#resultats-realisations .facetwp-selections li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--k-space-8, 8px);
	line-height: 1;
}

#resultats-realisations .facetwp-selections .facetwp-selection-label {
	font-size: var(--k-label-size, 13px);
	letter-spacing: var(--k-label-ls, .04em);
	text-transform: uppercase;
	color: var(--k-text-secondaire, #414042);
}

/* Le plugin pose une croix en image de fond et charge sa feuille APRÈS celle du
   thème : les règles ci-dessous sont donc portées par l'identifiant du bandeau
   pour passer devant. On lui substitue un « × » typographique, sur la pastille
   jaune de la charte. */
#resultats-realisations .facetwp-selections .facetwp-selection-value {
	display: inline-flex;
	align-items: center;
	gap: var(--k-space-8, 8px);
	margin: 0;
	padding: 6px 10px;
	background-color: var(--k-jaune, #ffd400);
	background-image: none;
	font-size: var(--k-small-size, 15px);
	line-height: 1.2;
	color: var(--k-text-fort, #282828);
	cursor: pointer;
}

#resultats-realisations .facetwp-selections .facetwp-selection-value::after {
	content: "\00d7";
	font-size: 1.15em;
	line-height: 1;
}

#resultats-realisations .facetwp-selections .facetwp-selection-value:hover {
	background: var(--k-graphite, #282828);
	color: var(--k-blanc, #ffffff);
}

.kz-facet-reset .facetwp-reset {
	font-family: var(--k-font-family);
	font-size: var(--k-small-size, 15px);
	color: var(--k-text-courant, #414042);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.kz-facet-reset .facetwp-reset:hover {
	color: var(--k-text-fort, #282828);
}

/* --------------------------------------------------------------------------
   Pagination sous la grille.
   -------------------------------------------------------------------------- */
#pagination-realisations {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-block-start: var(--k-space-24, 24px);
}

#pagination-realisations .facetwp-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--k-space-8, 8px);
}

#pagination-realisations .facetwp-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 var(--k-space-12, 12px);
	box-shadow: inset 0 0 0 1px var(--k-border-color-moyen, #414042);
	font-family: var(--k-font-family);
	font-size: var(--k-small-size, 15px);
	color: var(--k-text-courant, #414042);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

#pagination-realisations .facetwp-page:hover {
	background-color: var(--k-jaune, #ffd400);
	color: var(--k-text-fort, #282828);
}

#pagination-realisations .facetwp-page.active {
	background-color: var(--k-graphite, #282828);
	box-shadow: none;
	font-weight: var(--k-btn-weight, 600);
	color: var(--k-blanc, #ffffff);
}

#pagination-realisations .facetwp-page.dots {
	min-width: 0;
	box-shadow: none;
	cursor: default;
}

#pagination-realisations .facetwp-page:focus-visible {
	outline: var(--k-focus-w, 3px) solid var(--k-focus-sur-clair, #ff0b2e);
	outline-offset: var(--k-focus-offset, 2px);
}

/* --------------------------------------------------------------------------
   Raccourcis de marque : les deux boutons pilotent la facette « Marque ».
   Quand une marque est seule retenue, son bouton est marqué comme enfoncé.
   -------------------------------------------------------------------------- */
#bouton-marque-pf[aria-pressed="true"],
#bouton-marque-kcb[aria-pressed="true"] {
	box-shadow: inset 0 -4px 0 0 var(--k-rouge, #ff0b2e);
}