/**
 * Styles de la section Avis clients (widget « arvy-avis »).
 *
 * Un carrousel centré, écrit à la main : la référence utilise Swiper, mais
 * 150 ko de bibliothèque pour faire glisser quelques cartes ne se justifient
 * pas, et Elementor embarque sa propre copie de Swiper dans une version qui
 * change d'une mise à jour à l'autre.
 *
 * Le placement est calculé en JS (il dépend de la largeur des cartes), les
 * états sont en CSS. Tant que le script n'a pas pris la main — ou s'il ne
 * s'exécute pas —, la piste défile nativement au doigt et à la molette : les
 * avis restent tous lisibles.
 *
 * Tout ce qui est réglable passe par une variable posée par un contrôle
 * Elementor, lue ici. C'est indispensable pour les états (carte active,
 * bulle active, survol) : une règle directe générée par un contrôle
 * l'emporterait sur eux, ou perdrait contre le style global des boutons du
 * site. Les valeurs de repli ci-dessous ne servent qu'en l'absence de CSS
 * généré.
 */

/* ─── Panneau ─────────────────────────────────────────────────────────────── */

.arvy-avis {
	--arvy-avis-fond: #1A1A1B;
	position: relative;
	background-color: var(--arvy-avis-fond);
	border-radius: 28px;
	padding-top: 80px;
	padding-bottom: 80px;
	overflow: hidden;
}

/* ─── En-tête ─────────────────────────────────────────────────────────────── */

.arvy-avis__entete {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 0 var(--arvy-avis-retrait, 24px) 40px;
	text-align: center;
}

.arvy-avis__etoiles {
	display: inline-flex;
	gap: 0.22em;
	color: #FFFFFF;
	font-size: 18px;
	line-height: 1;
}

.arvy-avis__etoiles svg {
	display: block;
	width: 1em;
	height: 1em;
}

.arvy-avis__titre {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 16px;
	color: #FFFFFF;
	line-height: 1;
}

/* La vignette suit la taille du titre : 1em de côté. */
.arvy-avis__vignette-titre {
	display: block;
	flex: none;
	width: 1em;
	height: 1em;
	border-radius: 0.16em;
	overflow: hidden;
}

.arvy-avis .arvy-avis__vignette-titre img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* ─── Le carrousel ────────────────────────────────────────────────────────── */

.arvy-avis__scene {
	/* Sans script : défilement natif, calé sur chaque carte. */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.arvy-avis__scene::-webkit-scrollbar {
	display: none;
}

.arvy-avis__piste {
	display: flex;
	align-items: stretch;
}

.arvy-avis__slide {
	flex: none;
	/* Au doigt, la carte occupe presque tout le panneau : il ne reste des
	   voisines qu'un liseré, juste assez pour annoncer qu'on peut glisser.
	   L'écart réglé est la distance visible entre deux cartes : chaque carte
	   en porte la moitié de chaque côté. */
	width: var(--arvy-avis-largeur, 80%);
	padding: 0 calc(var(--arvy-avis-ecart, 32px) / 2);
	scroll-snap-align: center;
}

/* Grille de 12 colonnes : la carte blanche et le visuel se chevauchent d'une
   colonne, la carte passant par-dessus. C'est ce recouvrement qui donne sa
   profondeur au bloc — sans lui, on lit deux rectangles posés côte à côte. */
.arvy-avis__contenu {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	min-height: 100%;
}

/* C'est un <figure> : on neutralise sa marge par défaut et le style que le
   thème donne à <figcaption> et <blockquote> (italique, bordure). */
.arvy-avis .arvy-avis__carte {
	grid-column: 1 / span var(--arvy-avis-colonnes, 6);
	grid-row: 1;
	/* Un élément de grille en display:flex ne s'étire pas toujours dans sa
	   colonne : sans cette largeur, la carte se réduit à son contenu. */
	width: 100%;
	margin: 0;
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	background-color: #FFFFFF;
	border-radius: 24px;
	padding: 36px;
}

.arvy-avis .arvy-avis__citation {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	color: #1A1A1B;
}

.arvy-avis .arvy-avis__auteur {
	margin: 0;
	font-style: normal;
	color: #6B7477;
}

.arvy-avis__visuel {
	display: var(--arvy-avis-visuel, block);
	grid-column: var(--arvy-avis-colonnes-carte, 6) / -1;
	grid-row: 1;
	width: 100%;
	position: relative;
	z-index: 1;
	border-radius: 24px;
	overflow: hidden;
}

/* Plus spécifique que le garde-fou du socle (« img { height: auto } »). */
.arvy-avis .arvy-avis__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Un avis sans visuel : la carte prend toute la largeur. */
.arvy-avis .arvy-avis__slide--sans-visuel .arvy-avis__carte {
	grid-column: 1 / -1;
}

/* Au doigt : le visuel ne dépasse derrière la carte que d'une bande. Repli si
   le CSS généré manque. */
@media (max-width: 767px) {
	.arvy-avis {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.arvy-avis__slide {
		width: var(--arvy-avis-largeur, 88%);
		padding: 0 calc(var(--arvy-avis-ecart, 12px) / 2);
	}

	.arvy-avis .arvy-avis__carte {
		grid-column: 1 / span var(--arvy-avis-colonnes, 10);
		padding: 24px;
	}

	.arvy-avis__visuel {
		grid-column: var(--arvy-avis-colonnes-carte, 10) / -1;
	}
}

/* ─── Quand le script a pris la main ──────────────────────────────────────── */

.arvy-avis--pret .arvy-avis__scene {
	overflow: hidden;
	scroll-snap-type: none;
	/* Le geste de glissement vaut à la souris comme au doigt ; le défilement
	   vertical de la page, lui, reste au doigt. */
	touch-action: pan-y;
}

.arvy-avis--pret.arvy-avis--glisser .arvy-avis__scene {
	cursor: grab;
}

.arvy-avis--pret.est-attrape .arvy-avis__scene {
	cursor: grabbing;
}

/* Pendant le geste, on ne sélectionne pas le texte des citations, et on ne
   traîne pas les images. */
.arvy-avis.est-attrape .arvy-avis__piste {
	user-select: none;
	-webkit-user-select: none;
}

.arvy-avis--pret .arvy-avis__piste img {
	-webkit-user-drag: none;
}

/* La carte au centre est nette, les autres reculent. */
.arvy-avis--pret .arvy-avis__slide {
	transition: filter 1s ease, transform 1s ease, opacity 1s ease;
	filter: blur(var(--arvy-avis-flou, 4px));
	transform: scale(0.95);
	opacity: var(--arvy-avis-opacite, 0.3);
}

.arvy-avis--pret .arvy-avis__slide.est-actif {
	filter: none;
	transform: none;
	opacity: 1;
}

/* ─── La bande de bulles ──────────────────────────────────────────────────── */

.arvy-avis__logos {
	position: relative;
	margin-top: 40px;
	padding: 0 var(--arvy-avis-retrait, 24px);
	overflow: hidden;
}

/* Sans script, les bulles ne commandent rien : inutile de les montrer. Elles
   gardent pourtant leur place : le script démarre après l'affichage, et une
   rangée qui surgirait à ce moment-là pousserait toute la page vers le bas. */
.arvy-avis:not(.arvy-avis--pret) .arvy-avis__logos {
	visibility: hidden;
}

.arvy-avis__logos-piste {
	display: flex;
	justify-content: flex-start;
	width: max-content;
	gap: var(--arvy-avis-bulle-ecart, 12px);
}

/* Une bulle est un <button> : elle hérite du style global des boutons du site
   (Elementor → Réglages du site → Boutons) — fond d'accent, pastille, padding,
   typographie — y compris au survol et au focus. Le sélecteur est plus
   spécifique que celui du kit (« .elementor-kit-xxx button:hover ») et couvre
   tous les états ; tout ce qui s'y règle vient de variables, pour que les
   contrôles de la section restent maîtres. */
.arvy-avis .arvy-avis__logos button.arvy-avis__logo,
.arvy-avis .arvy-avis__logos button.arvy-avis__logo:hover,
.arvy-avis .arvy-avis__logos button.arvy-avis__logo:focus {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--arvy-avis-bulle-largeur, 120px);
	height: var(--arvy-avis-bulle-hauteur, 61px);
	margin: 0;
	padding: 0 var(--arvy-avis-bulle-retrait, 14px);
	background: var(--arvy-avis-bulle-fond, transparent);
	border: var(--arvy-avis-bulle-epaisseur, 1px) solid var(--arvy-avis-bulle-bordure, rgba(255, 255, 255, 0.2));
	border-radius: var(--arvy-avis-bulle-rayon, 16px);
	box-shadow: none;
	color: var(--arvy-avis-bulle-texte, #FFFFFF);
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
	.arvy-avis .arvy-avis__logos button.arvy-avis__logo:hover {
		border-color: var(--arvy-avis-bulle-bordure-survol, rgba(255, 255, 255, 0.5));
	}
}

/* Après le survol : la bulle active garde sa bordure, survolée ou non. */
.arvy-avis .arvy-avis__logos button.arvy-avis__logo.est-actif {
	border-color: var(--arvy-avis-bulle-bordure-active, #FFFFFF);
}

.arvy-avis .arvy-avis__logos button.arvy-avis__logo:focus-visible {
	outline: 2px solid var(--arvy-avis-bulle-bordure-active, #FFFFFF);
	outline-offset: 3px;
}

/* Le nom porte sa propre typographie : sans elle, il hériterait de celle des
   boutons du site. */
.arvy-avis__logo-nom {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1;
	letter-spacing: normal;
	color: inherit;
}

/* Une boîte aux dimensions connues avant le chargement — toute la largeur de
   la bulle, la hauteur réglée — dans laquelle le logo se loge sans être
   déformé ni décentré, quelles que soient ses proportions. */
.arvy-avis .arvy-avis__logo img {
	display: block;
	width: 100%;
	height: var(--arvy-avis-logo-hauteur, 28px);
	max-width: none;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
}

/* Des logos foncés disparaîtraient sur le panneau sombre : option pour les
   passer en blanc, quelle que soit leur couleur d'origine. */
.arvy-avis--logos-blancs .arvy-avis__logo img {
	filter: brightness(0) invert(1);
}

/* Les voiles qui estompent les bulles aux bords — seulement quand la bande
   boucle : une série qui tient dans son cadre n'a pas de bord à estomper. */
.arvy-avis__voile {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--arvy-avis-voile, 90px);
	z-index: 2;
	pointer-events: none;
}

.arvy-avis__logos--boucle .arvy-avis__voile {
	display: block;
}

.arvy-avis__voile--gauche {
	left: 0;
	background: linear-gradient(to right, var(--arvy-avis-fond), transparent);
}

.arvy-avis__voile--droite {
	right: 0;
	background: linear-gradient(to left, var(--arvy-avis-fond), transparent);
}

/* ─── Mouvement réduit ────────────────────────────────────────────────────── */

/* La navigation reste entière, mais sans aucune transition. La classe double
   la requête média : le script la pose lui aussi, ce qui couvre l'éditeur. */
.arvy-no-motion .arvy-avis__slide,
.arvy-no-motion .arvy-avis__piste,
.arvy-no-motion .arvy-avis__logos-piste,
.arvy-no-motion .arvy-avis__logos button.arvy-avis__logo {
	transition-duration: 0.001ms !important;
}

@media (prefers-reduced-motion: reduce) {
	.arvy-avis__slide,
	.arvy-avis__piste,
	.arvy-avis__logos-piste {
		transition-duration: 0.001ms !important;
	}
}