/* Styles LavXel complémentaires à Elementor. Les styles globaux (couleurs, typos) se règlent dans le Kit Elementor. */

/*
 * Paragraphe ou titre entièrement lié (réglage « Lien » du widget V4) :
 * le lien prend la couleur du texte au lieu du bleu des liens par défaut.
 * Les liens placés dans un texte (rich text) gardent le bleu du kit.
 */
/* Sélecteur renforcé : le style par défaut des liens du kit (.elementor .e-default-a)
 * est chargé après ce fichier, à spécificité égale il l'emporterait. */
.elementor .e-paragraph-base > a.e-paragraph-link-base,
.elementor .e-heading-base > a.e-heading-link-base,
.elementor .e-paragraph-base > a.e-paragraph-link-base:hover,
.elementor .e-heading-base > a.e-heading-link-base:hover,
.elementor .e-paragraph-base > a.e-paragraph-link-base:focus,
.elementor .e-heading-base > a.e-heading-link-base:focus {
	color: inherit;
	text-decoration: none;
}

/* Accent de titre : un <span> dans un h1/h2 passe en cyan (« La buanderie pro, <span>repensée</span>… »). */
.e-heading-base span {
	color: var(--lx-cyan, #10bce9);
}

/* ------------------------------------------------------------------
 * En-tête collant, compacté au défilement (gabarit Theme Builder 656).
 * main.js ajoute .lx-scrolled sur <html> dès que la page défile.
 * Classes globales posées dans Elementor : lx-header-util (barre bleue
 * du haut), lx-header-main (barre logo + menu).
 * ------------------------------------------------------------------ */
.elementor-location-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

.elementor-location-header .lx-header-util {
	max-height: 38px;
}

.lx-scrolled .elementor-location-header {
	box-shadow: 0 2px 14px color-mix(in srgb, var(--lx-navy, #092942) 12%, transparent);
}

.lx-scrolled .elementor-location-header .lx-header-util {
	max-height: 0;
}

.lx-scrolled .elementor-location-header .lx-header-main > .e-flexbox-base {
	min-height: 64px;
}

.lx-scrolled .elementor-location-header .lx-header-main img {
	width: 100px;
}

@media (prefers-reduced-motion: no-preference) {
	.elementor-location-header,
	.elementor-location-header .lx-header-util,
	.elementor-location-header .lx-header-main > .e-flexbox-base,
	.elementor-location-header .lx-header-main img {
		transition: max-height 0.25s ease, min-height 0.25s ease, width 0.25s ease, box-shadow 0.25s ease;
	}
}

/* L'admin bar WordPress n'est plus fixe sous 600 px : l'en-tête colle alors en haut. */
@media (max-width: 600px) {
	.elementor-location-header {
		top: 0;
	}
}

/* ------------------------------------------------------------------
 * Pied de page : menus en accordéon sur mobile, en colonnes ailleurs.
 * main.js ouvre tous les <details> au-dessus de 767 px ; ici on retire
 * l'apparence d'accordéon (chevron, curseur) sur ces largeurs.
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
	.lx-footer-acc summary {
		cursor: default;
		pointer-events: none;
	}

	.lx-footer-acc summary [aria-hidden="true"] {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Menu principal (widget Menu d'Elementor Pro dans l'en-tête 656,
 * menu WordPress « Menu principal »). Le widget V3 n'accepte pas de
 * classe globale : il est ciblé par sa position dans .lx-header-main.
 * ------------------------------------------------------------------ */
.lx-header-main .elementor-widget-nav-menu {
	flex: 1 1 0px;
	min-width: 0;
}

.lx-header-main .elementor-nav-menu--main > .elementor-nav-menu {
	flex-wrap: nowrap;
}

/* Préfixe .elementor-location-header : Elementor élargit la marge de l'entrée survolée ou ouverte (.highlighted). */
.elementor-location-header .lx-header-main .elementor-nav-menu--main .elementor-item {
	padding: 10px 7px;
	white-space: nowrap;
	font-family: var(--lx-font-body, "Lato"), sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--lx-navy, #092942);
}

.lx-header-main .elementor-nav-menu--main .elementor-item:hover,
.lx-header-main .elementor-nav-menu--main .elementor-item:focus,
.lx-header-main .elementor-nav-menu--main .elementor-item.highlighted,
.lx-header-main .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--lx-blue, #087fc2);
}

.lx-header-main .elementor-nav-menu--main .sub-arrow {
	display: inline-flex;
	align-items: center;
	padding-inline-start: 5px;
	font-size: 10px;
	line-height: 1;
}

.lx-header-main .elementor-nav-menu--main .sub-arrow svg {
	fill: currentColor;
	transform-origin: 50% 50%;
	transition: transform 0.2s ease;
}

/* Sous-menu déroulant (ordinateur). */
.lx-header-main .elementor-nav-menu--main .sub-menu {
	min-width: 260px !important; /* Elementor fixe la largeur en ligne. */
	padding: 8px 0;
	border: 1px solid var(--lx-line, #d8e1e8);
	border-top: 3px solid var(--lx-blue, #087fc2);
	background-color: var(--lx-white, #fff);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--lx-navy, #092942) 12%, transparent);
}

.lx-header-main .elementor-nav-menu--main .elementor-sub-item {
	padding: 10px 18px;
	font-family: var(--lx-font-body, "Lato"), sans-serif;
	font-size: 14px;
	color: var(--lx-ink, #10202d);
	background-color: transparent;
}

.lx-header-main .elementor-nav-menu--main .elementor-sub-item:hover,
.lx-header-main .elementor-nav-menu--main .elementor-sub-item:focus {
	color: var(--lx-blue, #087fc2);
	background-color: var(--lx-wash, #f4f7f9);
}

/* Tablette et mobile : bouton menu à droite, liste déployée sous l'en-tête. */
@media (max-width: 1024px) {
	.lx-header-main .elementor-widget-nav-menu {
		flex: 0 0 auto;
		order: 3;
		position: static;
	}

	.lx-header-main .e-flexbox-base > :first-child {
		margin-inline-end: auto;
	}

	.lx-header-main .elementor-menu-toggle {
		width: 39px;
		height: 39px;
		padding: 0;
		border: 1px solid var(--lx-line, #d8e1e8);
		border-radius: 0;
		color: var(--lx-navy, #092942);
		background-color: var(--lx-white, #fff);
		font-size: 18px;
	}

	/* Elementor fixe la couleur du symbole (fill) : il suit maintenant celle du bouton (marine, blanc une fois ouvert). */
	.elementor-location-header .lx-header-main .elementor-menu-toggle svg {
		fill: currentColor;
	}

	.lx-header-main .elementor-menu-toggle.elementor-active {
		color: var(--lx-white, #fff);
		background-color: var(--lx-navy, #092942);
		border-color: var(--lx-navy, #092942);
	}

	/* La liste se positionne par rapport à l'en-tête entier (collant), pas au conteneur interne. */
	.elementor-location-header .lx-header-main .e-con {
		position: static;
	}

	/* Elementor positionne la liste en ligne (left, width) : on l'aligne sur toute la largeur de l'en-tête.
	 * nav. obligatoire : les sous-menus (ul) portent aussi la classe elementor-nav-menu--dropdown. */
	.lx-header-main nav.elementor-nav-menu--dropdown {
		position: absolute;
		top: 100% !important;
		left: 0 !important;
		right: 0;
		width: 100% !important;
		margin-top: 0 !important;
		z-index: 99;
		border-top: 1px solid var(--lx-line, #d8e1e8);
		background-color: var(--lx-white, #fff);
		box-shadow: 0 12px 24px color-mix(in srgb, var(--lx-navy, #092942) 14%, transparent);
	}

	/* Elementor fige la hauteur de la liste à l'ouverture (--menu-height) : un sous-menu déplié serait rogné. */
	.elementor-location-header .lx-header-main .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
		max-height: calc(100vh - 110px);
		overflow-y: auto;
	}

	.lx-header-main .elementor-nav-menu--dropdown .elementor-item,
	.lx-header-main .elementor-nav-menu--dropdown .elementor-sub-item {
		padding: 14px 32px !important;
		border-bottom: 1px solid var(--lx-line, #d8e1e8);
		font-family: var(--lx-font-body, "Lato"), sans-serif;
		font-size: 15px;
		font-weight: 700;
		color: var(--lx-navy, #092942);
		background-color: var(--lx-white, #fff);
	}

	.lx-header-main .elementor-nav-menu--dropdown .elementor-sub-item {
		padding-inline-start: 48px !important;
		font-weight: 400;
		color: var(--lx-ink, #10202d);
		background-color: var(--lx-wash, #f4f7f9);
	}

	.lx-header-main .elementor-nav-menu--dropdown .elementor-item:hover,
	.lx-header-main .elementor-nav-menu--dropdown .elementor-sub-item:hover,
	.lx-header-main .elementor-nav-menu--dropdown .highlighted {
		color: var(--lx-blue, #087fc2);
		background-color: var(--lx-wash, #f4f7f9);
	}
}

@media (max-width: 767px) {
	.lx-header-main .elementor-nav-menu--dropdown .elementor-item,
	.lx-header-main .elementor-nav-menu--dropdown .elementor-sub-item {
		padding-inline: 16px !important;
	}

	.lx-header-main .elementor-nav-menu--dropdown .elementor-sub-item {
		padding-inline-start: 32px !important;
	}
}

/* ------------------------------------------------------------------
 * Méga-menu (ordinateur, > 1024 px).
 * Les 6 panneaux sont des conteneurs V4 du gabarit En-tête 656
 * (classe lx-mega-wrap, chaque panneau : lx-mega + lx-mega-<clé>).
 * L'entrée de menu WordPress porte la même classe lx-mega-<clé> :
 * main.js ouvre le panneau correspondant au survol, au clic et au clavier.
 * Sur tablette et mobile, le menu déroulant affiche les sous-entrées WordPress.
 * ------------------------------------------------------------------ */
.elementor-location-header .lx-mega-wrap,
.elementor-location-header .lx-mega-wrap .lx-mega {
	display: none;
}

.elementor-location-header .lx-mega-wrap.is-open,
.elementor-location-header .lx-mega-wrap .lx-mega.is-open {
	display: flex;
}

@media (max-width: 1024px) {
	.elementor-location-header .lx-mega-wrap.is-open {
		display: none;
	}
}

/* Ordinateur : les sous-menus WordPress cèdent la place aux panneaux. */
@media (min-width: 1025px) {
	.lx-header-main nav.elementor-nav-menu--main .sub-menu {
		display: none !important; /* SmartMenus les affiche en style en ligne. */
	}

	.elementor-location-header .lx-header-main .elementor-nav-menu--main .lx-mega-active > .elementor-item {
		color: var(--lx-blue, #087fc2);
		background-color: var(--lx-wash, #f4f7f9);
	}

	/* On fait tourner le symbole, pas son conteneur : la marge de .sub-arrow décalerait le chevron. */
	.lx-header-main .elementor-nav-menu--main .lx-mega-active > .elementor-item .sub-arrow svg {
		transform: rotate(180deg);
	}
}

/* Dans l'éditeur Elementor : tous les panneaux visibles, les uns sous les autres, pour pouvoir les modifier. */
.elementor-editor-active .elementor .lx-mega-wrap {
	position: relative;
	display: flex;
}

.elementor-editor-active .elementor .lx-mega-wrap .lx-mega {
	display: flex;
	padding-block: 24px;
	border-bottom: 1px dashed var(--lx-line, #d8e1e8);
}

/* ------------------------------------------------------------------
 * Barre de recherche dépliante (gabarit En-tête 656).
 * La loupe (classe globale lx-search-toggle) ouvre le conteneur
 * lx-search-panel, qui contient le widget Recherche d'Elementor Pro
 * (résultats en direct, gabarit de boucle « Résultat de recherche »).
 * ------------------------------------------------------------------ */
.elementor-location-header .lx-search-panel {
	display: none;
}

.elementor-location-header .lx-search-panel.is-open {
	display: flex;
}

.elementor-editor-active .elementor .lx-search-panel {
	position: relative;
	display: flex;
}

.lx-search-toggle.is-active {
	color: var(--lx-white, #fff);
	background-color: var(--lx-navy, #092942);
	border-color: var(--lx-navy, #092942);
}

/* Champ — barre de l'en-tête et champs posés dans les pages (conteneur lx-search-field, ex. accueil) */
:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .elementor-widget-search {
	width: 100%;
}

:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .e-search-form {
	display: flex;
	width: 100%;
}

:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .e-search-input-wrapper {
	position: relative;
	flex: 1 1 auto;
}

:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .e-search-input {
	width: 100%;
	height: 54px;
	padding: 0 44px 0 18px;
	border: 1px solid var(--lx-line, #d8e1e8);
	border-right: 0;
	border-radius: 0;
	font-family: var(--lx-font-body, "Lato"), sans-serif;
	font-size: 16px;
	color: var(--lx-ink, #10202d);
	background-color: var(--lx-white, #fff);
}

:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .e-search-input:focus {
	/* Pas d'outline (dessinée en retrait, elle laissait une bande blanche avant le bouton) :
	 * bordure bleue + ombre interne, qui vont jusqu'au bord droit, contre le bouton. */
	outline: none;
	border-color: var(--lx-blue, #087fc2);
	box-shadow: inset 0 0 0 1px var(--lx-blue, #087fc2);
}

:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .e-search-submit {
	width: auto;
	height: 54px;
	border: 0;
	border-radius: 0;
	color: var(--lx-white, #fff);
	background-color: var(--lx-navy, #092942);
}

:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .e-search-submit:hover {
	background-color: var(--lx-blue, #087fc2);
}

:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .e-search-submit svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Suggestions (gabarit de boucle « Résultat de recherche », classes lx-search-result*) */
/* Sur la liste elle-même (masquée quand vide), pas sur son conteneur : sinon un trait gris reste sous le champ. */
:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .e-search-results-container > .e-search-results {
	border: 1px solid var(--lx-line, #d8e1e8);
	border-top: 0;
	background-color: var(--lx-white, #fff);
	box-shadow: 0 12px 24px color-mix(in srgb, var(--lx-navy, #092942) 10%, transparent);
}

.lx-search-result {
	border-bottom: 1px solid var(--lx-line, #d8e1e8);
	text-decoration: none;
}

/* Sur mobile, le conteneur Elementor passe en colonne : on garde vignette + titre sur une ligne. */
.lx-search-result.e-con {
	--flex-direction: row;
	--flex-wrap: nowrap;
	--align-items: center;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

.lx-search-result.e-con > .elementor-widget {
	width: auto;
	margin: 0;
}

.lx-search-result.e-con > .lx-search-result__title {
	flex: 1 1 0;
	min-width: 0;
}

.lx-search-result:hover,
.lx-search-result:focus {
	background-color: var(--lx-wash, #f4f7f9);
}

.lx-search-result__image img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	background-color: var(--lx-wash, #f4f7f9);
}

.lx-search-result .lx-search-result__title .elementor-heading-title {
	margin: 0;
	font-family: var(--lx-font-body, "Lato"), sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lx-navy, #092942);
}

.lx-search-result:hover .lx-search-result__title .elementor-heading-title {
	color: var(--lx-blue, #087fc2);
}

/* Le widget Titre de la publication porte la classe .elementor-page-title : sur une page dont le titre est masqué
 * (réglage « Masquer le titre », ex. l'accueil), Elementor masque aussi les titres des suggestions. */
.lx-search-result .lx-search-result__title.elementor-page-title {
	display: block !important;
}

/* Taille de l'icône du bouton : variable du widget + sélecteur plus fort que celui d'Elementor. */
:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .elementor-widget-search {
	--e-search-icon-submit-size: 18px;
	--e-search-icon-submit-color: var(--lx-white, #fff);
}

:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .elementor-widget-search .e-search .e-search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	height: auto;
	/* Le widget écarte le bouton de 8 px (réglage d'espacement) : le champ n'a pas de bord droit, il doit toucher le bouton. */
	margin: 0;
	padding: 0 26px;
}

/* Champs larges : bouton en texte « Rechercher » plutôt qu'en loupe (l'icône du widget est masquée). */
:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .elementor-widget-search .e-search .e-search-submit::before {
	content: "Rechercher";
	font-family: var(--lx-font-body, "Lato"), sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

:lang(en) :is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .elementor-widget-search .e-search .e-search-submit::before {
	content: "Search";
}

:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .elementor-widget-search .e-search .e-search-submit > svg {
	display: none;
}

/* Mobile : le texte prendrait la moitié de la largeur → retour à la loupe. */
@media (max-width: 767px) {
	:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .elementor-widget-search .e-search .e-search-submit {
		width: 56px;
		padding: 0;
	}

	:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .elementor-widget-search .e-search .e-search-submit::before {
		content: none;
	}

	:is(.elementor-location-header .lx-search-panel, .elementor .lx-search-field) .elementor-widget-search .e-search .e-search-submit > svg {
		display: block;
		width: 18px;
		height: 18px;
		margin: 0;
	}
}

/* ------------------------------------------------------------------
 * Slider du hero (accueil). Conteneur lx-hero-slider, diapos lx-hero-slide
 * (une par conteneur V4) superposées dans la même cellule de grille ; main.js
 * ajoute .is-ready, .is-active sur la diapo visible et les contrôles.
 * ------------------------------------------------------------------ */
.elementor .lx-hero-slider {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
}

.elementor .lx-hero-slider > .lx-hero-slide {
	grid-area: 1 / 1;
}

.elementor .lx-hero-slider.is-ready > .lx-hero-slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.elementor .lx-hero-slider.is-ready > .lx-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease;
}

/* Sans script : seule la première diapo (évite la superposition illisible). */
.elementor .lx-hero-slider:not(.is-ready) > .lx-hero-slide:not(:first-child) {
	display: none;
}

/* Éditeur : toutes les diapos les unes sous les autres, pour les modifier. */
.elementor-editor-active .elementor .lx-hero-slider {
	display: flex !important;
	flex-direction: column;
}

.elementor-editor-active .elementor .lx-hero-slider > .lx-hero-slide {
	display: flex !important;
}

/* Place pour les contrôles sous les boutons (empilés sur mobile). */
.elementor .lx-hero-slider > .lx-hero-slide {
	padding-block-end: 100px !important;
}

@media (max-width: 767px) {
	.elementor .lx-hero-slider > .lx-hero-slide {
		padding-block-end: 96px !important;
	}
}

.lx-hero-controls {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 24px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	pointer-events: none;
}

.lx-hero-controls button {
	pointer-events: auto;
	cursor: pointer;
}

.lx-hero-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--lx-white, #fff);
	border-radius: 50%;
	background-color: transparent;
}

.lx-hero-dot.is-active {
	border-color: var(--lx-yellow, #fdd31d);
	background-color: var(--lx-yellow, #fdd31d);
}

.lx-hero-controls button:focus-visible {
	outline: 2px solid var(--lx-yellow, #fdd31d);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.elementor .lx-hero-slider.is-ready > .lx-hero-slide,
	.elementor .lx-hero-slider.is-ready > .lx-hero-slide.is-active {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Carrousel horizontal (classe lx-carousel-track sur le conteneur des cartes).
 * Défilement natif avec aimantation ; main.js ajoute flèches et points.
 * ------------------------------------------------------------------ */
.elementor .lx-carousel-track {
	--lx-carousel-par-vue: 4;
	--lx-carousel-gap: 2px;
	display: flex !important;
	gap: var(--lx-carousel-gap) !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.elementor .lx-carousel-track::-webkit-scrollbar {
	display: none;
}

.elementor .lx-carousel-track > * {
	flex: 0 0 calc((100% - (var(--lx-carousel-par-vue) - 1) * var(--lx-carousel-gap)) / var(--lx-carousel-par-vue));
	min-width: 0;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.elementor .lx-carousel-track {
		--lx-carousel-par-vue: 2;
	}
}

@media (max-width: 767px) {
	.elementor .lx-carousel-track {
		--lx-carousel-par-vue: 1;
	}
}

.lx-carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}

.lx-carousel-controls[hidden] {
	display: none;
}

.lx-carousel-dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lx-carousel-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid var(--lx-muted, #5e7180);
	border-radius: 50%;
	background-color: var(--lx-white, #fff);
	cursor: pointer;
}

.lx-carousel-dot[hidden] {
	display: none;
}

.lx-carousel-dot.is-active {
	border-color: var(--lx-blue, #087fc2);
	background-color: var(--lx-blue, #087fc2);
}

.lx-carousel-controls button:focus-visible {
	outline: 2px solid var(--lx-blue, #087fc2);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.elementor .lx-carousel-track {
		scroll-behavior: smooth;
	}
}

/* ------------------------------------------------------------------
 * Bandeau défilant (classe lx-marquee sur la boucle ; ex. Marques de l'accueil).
 * main.js duplique les éléments et ajoute .is-ready ; sans script ou en mouvement
 * réduit, la liste reste statique.
 * ------------------------------------------------------------------ */
.elementor .lx-marquee.is-ready {
	--lx-marquee-gap: clamp(54px, 7vw, 120px);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.elementor .lx-marquee.is-ready > :first-child {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	gap: var(--lx-marquee-gap) !important;
	width: max-content;
	/* Même espace après le dernier élément : les deux moitiés sont identiques, la boucle est sans à-coup. */
	padding-inline-end: var(--lx-marquee-gap) !important;
	animation: lx-marquee var(--lx-marquee-duree, 30s) linear infinite;
	will-change: transform;
}

.elementor .lx-marquee.is-ready > :first-child > * {
	flex: 0 0 auto;
	white-space: nowrap;
}

.elementor .lx-marquee.is-ready:hover > :first-child,
.elementor .lx-marquee.is-ready:focus-within > :first-child {
	animation-play-state: paused;
}

@keyframes lx-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* ------------------------------------------------------------------
 * Hello Elementor (thème parent) colore en rose (#c36) tout <button> au survol
 * et au focus : après un clic, nos contrôles gardaient le focus et restaient roses.
 * États explicites pour les contrôles du carrousel (ceux du hero sont stylés plus haut).
 * ------------------------------------------------------------------ */
.lx-carousel-controls .lx-carousel-dot:is(:hover, :focus, :active) {
	border-color: var(--lx-blue, #087fc2);
	background-color: var(--lx-white, #fff);
}

.lx-carousel-controls .lx-carousel-dot.is-active,
.lx-carousel-controls .lx-carousel-dot.is-active:is(:hover, :focus, :active) {
	border-color: var(--lx-blue, #087fc2);
	background-color: var(--lx-blue, #087fc2);
}

/* ------------------------------------------------------------------
 * Flèches précédent / suivant (slider du hero et carrousel) : boutons ronds
 * à trait fin, chevron SVG ; remplis au survol. États explicites car Hello
 * Elementor colore en rose (#c36) tout <button> au survol et au focus.
 * ------------------------------------------------------------------ */
.lx-hero-controls .lx-hero-arrow,
.lx-carousel-controls .lx-carousel-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.lx-hero-arrow svg,
.lx-carousel-arrow svg {
	width: 18px;
	height: 18px;
}

/* Hero (sur photo sombre) */
.lx-hero-controls .lx-hero-arrow,
.lx-hero-controls .lx-hero-arrow:is(:focus, :active) {
	border-color: var(--lx-line-dark, rgba(255, 255, 255, 0.45));
	color: var(--lx-white, #fff);
	background-color: color-mix(in srgb, var(--lx-navy-deep, #081c2f) 25%, transparent);
}

.lx-hero-controls .lx-hero-arrow:is(:hover, :focus-visible) {
	border-color: var(--lx-white, #fff);
	color: var(--lx-navy, #092942);
	background-color: var(--lx-white, #fff);
}

.lx-hero-controls .lx-hero-dot:is(:hover, :focus, :active) {
	background-color: color-mix(in srgb, var(--lx-white, #fff) 45%, transparent);
}

.lx-hero-controls .lx-hero-dot.is-active,
.lx-hero-controls .lx-hero-dot.is-active:is(:hover, :focus, :active) {
	border-color: var(--lx-yellow, #fdd31d);
	background-color: var(--lx-yellow, #fdd31d);
}

/* Carrousel (sur fond clair) */
.lx-carousel-controls .lx-carousel-arrow,
.lx-carousel-controls .lx-carousel-arrow:is(:focus, :active) {
	border-color: var(--lx-navy, #092942);
	color: var(--lx-navy, #092942);
	background-color: transparent;
}

.lx-carousel-controls .lx-carousel-arrow:is(:hover, :focus-visible):not(:disabled) {
	border-color: var(--lx-navy, #092942);
	color: var(--lx-white, #fff);
	background-color: var(--lx-navy, #092942);
}

.lx-carousel-controls .lx-carousel-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

/* ------------------------------------------------------------------
 * Colonne de lecture (.lx-prose) : contenu WordPress classique affiché par
 * le gabarit « Page de texte LavXel » (politique de confidentialité, pages
 * légales). Les classes V4 ne ciblent pas les éléments imbriqués : les
 * intertitres, listes et liens du contenu sont stylés ici.
 * ------------------------------------------------------------------ */
.elementor .lx-prose > :first-child,
.elementor .lx-prose .elementor-widget-container > :first-child {
	margin-top: 0;
}

.elementor .lx-prose p,
.elementor .lx-prose ul,
.elementor .lx-prose ol {
	margin: 0 0 1.1em;
}

.elementor .lx-prose :is(h2, h3, h4) {
	margin: 2em 0 0.6em;
	font-family: var(--lx-font-heading, "Titillium Web"), sans-serif;
	font-weight: 700;
	line-height: 1.25;
	color: var(--lx-navy, #092942);
}

.elementor .lx-prose h2 {
	font-size: 28px;
}

.elementor .lx-prose h3 {
	padding-top: 1.2em;
	border-top: 1px solid var(--lx-line, #d8e1e8);
	font-size: 22px;
}

.elementor .lx-prose h4 {
	font-size: 18px;
}

.elementor .lx-prose :is(ul, ol) {
	padding-left: 1.3em;
}

.elementor .lx-prose li {
	margin-bottom: 0.45em;
}

.elementor .lx-prose li::marker {
	color: var(--lx-blue, #087fc2);
}

.elementor .lx-prose strong {
	font-weight: 700;
	color: var(--lx-navy, #092942);
}

.elementor .lx-prose a {
	color: var(--lx-blue, #087fc2);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.elementor .lx-prose a:is(:hover, :focus-visible) {
	color: var(--lx-navy, #092942);
}

@media (max-width: 767px) {
	.elementor .lx-prose h2 {
		font-size: 24px;
	}

	.elementor .lx-prose h3 {
		font-size: 20px;
	}
}