/* Widget « Sélecteur d'ambiance » (Perles de France). Réglages Elementor = variables CSS sur .eap-bgs. */

.eap-bgs {
	--eap-bgs-gap: 2rem;
	--eap-bgs-align: center;
	--eap-bgs-items: center;
	--eap-bgs-dim: 0.5;
	--eap-bgs-delay: 6000ms;
	--eap-bgs-icon-size: 2rem;
	--eap-bgs-icon-color: currentColor;
	--eap-bgs-icon-gap: 0.75em;
	--eap-bgs-title-gap: 0.5em;
	--eap-bgs-bar: currentColor;
	--eap-bgs-bar-track: rgba(255, 255, 255, 0.2);
	--eap-bgs-bar-h: 1px;
	--eap-bgs-bar-w: 40%;
	--eap-bgs-bar-gap: 1.25rem;
	width: 100%;
}

/* Défilement horizontal dès que les blocs dépassent la largeur (--eap-bgs-item-w, 80 % sur mobile).
   Sans largeur réglée, les blocs se partagent la ligne. */
.eap-bgs__list {
	position: relative;
	display: flex;
	gap: var(--eap-bgs-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.eap-bgs__list::-webkit-scrollbar {
	display: none;
}

/* Spécificité renforcée : les thèmes (Hello) stylent button, :hover et :focus. */
.eap-bgs .eap-bgs__item,
.eap-bgs .eap-bgs__item:hover,
.eap-bgs .eap-bgs__item:focus {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
}

.eap-bgs .eap-bgs__item {
	position: relative;
	display: flex;
	flex: 1 0 var(--eap-bgs-item-w, 0%);
	flex-direction: column;
	align-items: var(--eap-bgs-items);
	min-width: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	text-align: var(--eap-bgs-align);
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	cursor: pointer;
	opacity: var(--eap-bgs-dim);
	scroll-snap-align: center;
	transition: opacity 0.6s ease;
}

/* Premier et dernier blocs centrables : marge de bout = (largeur de la liste - largeur d'un bloc) / 2.
   Sans largeur réglée (blocs côte à côte), la marge vaut 0. */
.eap-bgs .eap-bgs__item:first-child {
	margin-inline-start: calc((100% - var(--eap-bgs-item-w, 100%)) / 2);
}

.eap-bgs .eap-bgs__item:last-child {
	margin-inline-end: calc((100% - var(--eap-bgs-item-w, 100%)) / 2);
}

.eap-bgs .eap-bgs__item:hover {
	opacity: calc((1 + var(--eap-bgs-dim)) / 2);
}

.eap-bgs .eap-bgs__item.is-active {
	opacity: 1;
}

.eap-bgs .eap-bgs__item:focus {
	outline: none;
}

.eap-bgs .eap-bgs__item:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 6px;
}

/* Icône au-dessus du titre (--icon-top) ou sous la description (--icon-bottom, par défaut). */
.eap-bgs__icon {
	display: inline-flex;
	margin-bottom: var(--eap-bgs-icon-gap);
	color: var(--eap-bgs-icon-color);
	font-size: var(--eap-bgs-icon-size);
	line-height: 1;
}

/* En bas : poussée au pied du bloc, les icônes restent alignées d'un bloc à l'autre
   quelle que soit la longueur des textes (l'écart minimal passe en padding). */
.eap-bgs--icon-bottom .eap-bgs__icon {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: var(--eap-bgs-icon-gap);
}

/* Le filet suit alors l'icône (sinon il est lui-même poussé en bas). */
.eap-bgs--progress .eap-bgs__icon + .eap-bgs__progress {
	margin-top: 0;
}

.eap-bgs__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.eap-bgs__title {
	display: block;
	margin-bottom: var(--eap-bgs-title-gap);
}

.eap-bgs__desc {
	display: block;
}

.eap-bgs--progress .eap-bgs__item > :nth-last-child(2) {
	margin-bottom: var(--eap-bgs-bar-gap);
}

/* Indicateur de progression : filet sous le bloc actif, rempli pendant la durée du bloc.
   Poussé en bas du bloc (les filets restent alignés si les textes ont des hauteurs différentes),
   aligné comme le texte. */
.eap-bgs__progress {
	display: none;
}

.eap-bgs--progress .eap-bgs__progress {
	position: relative;
	display: block;
	flex: none;
	margin-top: auto;
	width: var(--eap-bgs-bar-w);
	height: var(--eap-bgs-bar-h);
	overflow: hidden;
	background: var(--eap-bgs-bar-track);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.eap-bgs--progress .eap-bgs__progress::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--eap-bgs-bar);
	transform: scaleX(0);
	transform-origin: left center;
}

.eap-bgs--progress.is-playing .eap-bgs__item.is-active .eap-bgs__progress {
	opacity: 1;
}

.eap-bgs--progress.is-playing .eap-bgs__item.is-running .eap-bgs__progress::after {
	animation: eap-bgs-progress var(--eap-bgs-delay) linear forwards;
}

.eap-bgs.is-paused .eap-bgs__progress::after {
	animation-play-state: paused !important;
}

@keyframes eap-bgs-progress {
	to {
		transform: scaleX(1);
	}
}

/* Calques d'images ajoutés par le script dans le conteneur visé : sous le contenu
   et sous l'overlay Elementor (::before), au-dessus du fond propre du conteneur. */
.eap-bgs-target {
	position: relative;
	isolation: isolate;
}

.eap-bgs-layers {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.eap-bgs-layer {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: ease;
}

.eap-bgs-layer.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.eap-bgs .eap-bgs__item,
	.eap-bgs-layer {
		transition: none !important;
	}
}