/**
 * NOVFR LP Kit - carrousel de témoignages.
 * Chemin : assets/css/testimonials.css
 *
 * Même logique de couleurs que le slider des dates : valeurs de repli ici,
 * marque du site sur :root (--novfr-lp-*), onglet Style du widget sur le
 * widget lui-même. Le nombre de cartes visibles et l'écart entre elles sont
 * des variables (--nq-per, --nq-gap) posées par les réglages du widget,
 * lues aussi par le script : une seule source de vérité.
 */

.novfr-quotes {
	--nq-per: 3;
	--nq-gap: 24px;
	--nq-card: #fff;
	--nq-text: #2e2e2e;
	--nq-muted: #4f6b75;
	--nq-line: #e1edf2;
	--nq-accent: var(--novfr-lp-accent, #c72c41);
	--nq-radius: var(--novfr-lp-radius, 16px);
	--nq-pad: 24px 26px 22px;
	--nq-stars: #f2a100;
	--nq-shadow: 0 1px 2px rgba(14, 34, 44, 0.06), 0 14px 34px rgba(14, 34, 44, 0.1);

	/* Commandes claires : le réglage par défaut, pour une section sombre. */
	--nq-nav: #fff;
	--nq-nav-dim: rgba(255, 255, 255, 0.35);
	--nq-nav-border: rgba(255, 255, 255, 0.6);
	--nq-nav-bg: transparent;
	--nq-nav-hover: var(--nq-accent);
	--nq-nav-hover-bg: #fff;
	--nq-nav-hover-border: #fff;
	--nq-dot-active: #fff;
	--nq-dot-on: #0e222c;
	--nq-tag-bg: transparent;
	--nq-tag-text: var(--nq-nav);
	--nq-tag-border: var(--nq-nav-border);

	min-width: 0;
	position: relative;
}

/* Commandes sombres, pour une section claire. */
.novfr-quotes--nav-dark {
	--nq-nav: #2e2e2e;
	--nq-nav-dim: rgba(14, 34, 44, 0.2);
	--nq-nav-border: #d4e0e6;
	--nq-nav-bg: #fff;
	--nq-nav-hover: #234653;
	--nq-nav-hover-border: #234653;
	--nq-dot-active: var(--nq-accent);
	--nq-dot-on: #fff;
	--nq-tag-bg: #fff;
}

/* Piste : défilement horizontal natif, calé carte par carte. */
.novfr-quotes .novfr-quotes-track {
	display: flex;
	gap: var(--nq-gap);
	margin: -8px -2px -16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 8px 2px 16px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.novfr-quotes .novfr-quotes-track::-webkit-scrollbar {
	display: none;
}

/* Carte : colonne, l'auteur poussé en bas quelle que soit la longueur du texte. */
.novfr-quotes .novfr-quote {
	background: var(--nq-card);
	border-radius: var(--nq-radius);
	box-sizing: border-box;
	color: var(--nq-text);
	display: flex;
	flex: 0 0 calc((100% - (var(--nq-per) - 1) * var(--nq-gap)) / var(--nq-per));
	flex-direction: column;
	gap: 14px;
	margin: 0;
	min-width: 0;
	padding: var(--nq-pad);
	scroll-snap-align: start;
}

.novfr-quotes--shadow .novfr-quote {
	box-shadow: var(--nq-shadow);
}

/* Ligne du haut : source et note. */
.novfr-quotes .novfr-quote-top {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	justify-content: space-between;
}

/* Hauteur fixe : avec ou sans logo, la citation démarre au même niveau. */
.novfr-quotes .novfr-quote-source {
	align-items: center;
	border-radius: 999px;
	box-sizing: border-box;
	min-height: 28px;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 7px;
	letter-spacing: 0.09em;
	line-height: 1;
	padding: 5px 11px;
	text-transform: uppercase;
	white-space: nowrap;
}

.novfr-quotes .novfr-quote-source::before {
	background: currentColor;
	border-radius: 50%;
	content: "";
	height: 8px;
	opacity: 0.85;
	width: 8px;
}

/* Logo de la source (Style › Sources) à la place du point. */
.novfr-quotes .novfr-quote-source.has-logo {
	padding-left: 5px;
}

.novfr-quotes .novfr-quote-source.has-logo::before {
	content: none;
}

.novfr-quotes .novfr-quote-logo {
	display: block;
	flex: 0 0 auto;
	height: 18px;
	object-fit: contain;
	width: 18px;
}

/*
 * Couleurs par source : valeurs par défaut ici, remplacées par les réglages
 * Style › Sources (--nq-src-bg, --nq-src-text, --nq-src-stars posés sur la
 * carte). Autre : teinte de l'accent de la page.
 */
.novfr-quotes .novfr-quote-source[data-source="dynabuy"] {
	background: var(--nq-src-bg, #ebf6fa);
	color: var(--nq-src-text, #234653);
}

.novfr-quotes .novfr-quote-source[data-source="trustpilot"] {
	background: var(--nq-src-bg, #e4f6ee);
	color: var(--nq-src-text, #0b7a57);
}

.novfr-quotes .novfr-quote-source[data-source="google"] {
	background: var(--nq-src-bg, #e8f0fe);
	color: var(--nq-src-text, #1553b3);
}

.novfr-quotes .novfr-quote-source[data-source="linkedin"] {
	background: var(--nq-src-bg, #e6f0fa);
	color: var(--nq-src-text, #0a66c2);
}

.novfr-quotes .novfr-quote-source[data-source="plusquepro"] {
	background: var(--nq-src-bg, #fff1e4);
	color: var(--nq-src-text, #b34f00);
}

.novfr-quotes .novfr-quote-source[data-source="autre"] {
	background: var(--nq-src-bg, color-mix(in srgb, var(--nq-accent) 11%, #fff));
	color: var(--nq-src-text, color-mix(in srgb, var(--nq-accent) 85%, #000));
}

/* Navigateurs sans color-mix : l'ancien gris. */
@supports not (color: color-mix(in srgb, red, red)) {
	.novfr-quotes .novfr-quote-source[data-source="autre"] {
		background: var(--nq-src-bg, #eef2f4);
		color: var(--nq-src-text, var(--nq-muted));
	}
}

.novfr-quotes .novfr-quote-stars {
	color: var(--nq-src-stars, var(--nq-stars));
	display: inline-flex;
	font-size: 15px;
	gap: 1px;
	line-height: 1;
	white-space: nowrap;
}

.novfr-quotes .novfr-quote-stars i {
	font-style: normal;
}

.novfr-quotes .novfr-quote-stars .is-off {
	opacity: 0.28;
}

.novfr-quotes .novfr-quote[data-source="plusquepro"] .novfr-quote-stars {
	color: var(--nq-src-stars, #f07c00);
}

/* Trustpilot : une case verte par étoile, étoile blanche. */
.novfr-quotes .novfr-quote[data-source="trustpilot"] .novfr-quote-stars {
	gap: 2px;
}

.novfr-quotes .novfr-quote[data-source="trustpilot"] .novfr-quote-stars i {
	align-items: center;
	background: var(--nq-src-stars, #00b67a);
	color: #fff;
	display: inline-flex;
	font-size: 12px;
	height: 18px;
	justify-content: center;
	width: 18px;
}

.novfr-quotes .novfr-quote[data-source="trustpilot"] .novfr-quote-stars .is-off {
	background: #dcdce6;
	opacity: 1;
}

/* Citation. */
.novfr-quotes .novfr-quote-text {
	color: var(--nq-text);
	flex: 1 1 auto;
	font-size: 17px;
	line-height: 1.62;
	margin: 0;
}

/*
 * Auteur : nom, fonction, source en texte simple, en bloc serré ; la source
 * en italique, plus discrète. Jamais de lien : on garde le visiteur sur la page.
 */
.novfr-quotes .novfr-quote-foot {
	border-top: 1px solid var(--nq-line);
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: auto;
	padding-top: 10px;
}

.novfr-quotes .novfr-quote-name {
	color: var(--nq-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.novfr-quotes .novfr-quote-role {
	color: var(--nq-muted);
	font-size: 13.5px;
	line-height: 1.3;
}

.novfr-quotes .novfr-quote-where {
	color: var(--nq-muted);
	font-size: 12.5px;
	font-style: italic;
	line-height: 1.3;
	margin-top: 2px;
	opacity: 0.85;
}

/* Barre de navigation : points à gauche, flèches à droite. */
.novfr-quotes .novfr-quotes-bar {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-top: 22px;
}

.novfr-quotes .novfr-quotes-bar[hidden] {
	display: none;
}

.novfr-quotes .novfr-quotes-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.novfr-quotes .novfr-quotes-dots li[hidden] {
	display: none;
}

.novfr-quotes .novfr-quotes-dots button {
	background: var(--nq-nav-dim);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	height: 10px;
	padding: 0;
	transition: width 0.25s ease, background 0.25s ease;
	width: 10px;
}

.novfr-quotes .novfr-quotes-dots button[aria-current="true"] {
	background: var(--nq-dot-active);
	width: 26px;
}

.novfr-quotes .novfr-quotes-dots button:focus-visible {
	outline: 2px solid var(--nq-nav);
	outline-offset: 3px;
}

.novfr-quotes .novfr-quotes-arrows {
	display: flex;
	gap: 10px;
	margin-left: auto;
}

.novfr-quotes .novfr-quotes-arrows button {
	align-items: center;
	background: var(--nq-nav-bg);
	border: 2px solid var(--nq-nav-border);
	border-radius: 50%;
	color: var(--nq-nav);
	cursor: pointer;
	display: inline-flex;
	height: 46px;
	justify-content: center;
	padding: 0;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	width: 46px;
}

.novfr-quotes .novfr-quotes-arrows button:hover,
.novfr-quotes .novfr-quotes-arrows button:focus-visible {
	background: var(--nq-nav-hover-bg);
	border-color: var(--nq-nav-hover-border);
	color: var(--nq-nav-hover);
	outline: none;
}

.novfr-quotes .novfr-quotes-arrows svg {
	fill: none;
	height: 18px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.4;
	width: 18px;
}

/*
 * Repères en prénoms (réglage par défaut depuis 1.0.20) : une étiquette par
 * témoin, flèches en chevrons nus. Sur mobile, points ronds centrés à la
 * place (voir plus bas). Fond clair sur section claire (1.0.21) ; couleurs
 * réglables dans Style › Repères (--nq-tag-*, --nq-dot-active, --nq-dot-on).
 */
.novfr-quotes--nav-labels .novfr-quotes-dots {
	gap: 6px;
}

.novfr-quotes--nav-labels .novfr-quotes-dots button {
	background: var(--nq-tag-bg);
	border: 1px solid var(--nq-tag-border);
	border-radius: 999px;
	color: var(--nq-tag-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	height: auto;
	letter-spacing: 0.01em;
	line-height: 1;
	padding: 8px 11px;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
	white-space: nowrap;
	width: auto;
}

.novfr-quotes--nav-labels .novfr-quotes-dots button:hover {
	border-color: var(--nq-nav-hover-border);
}

.novfr-quotes--nav-labels .novfr-quotes-dots button[aria-current="true"] {
	background: var(--nq-dot-active);
	border-color: var(--nq-dot-active);
	color: var(--nq-dot-on);
	width: auto;
}

.novfr-quotes--nav-labels .novfr-quotes-arrows {
	gap: 2px;
}

.novfr-quotes--nav-labels .novfr-quotes-arrows button {
	background: none;
	border: 0;
	border-radius: 8px;
	color: var(--nq-nav);
	height: 40px;
	opacity: 0.8;
	transition: opacity 0.2s, transform 0.2s;
	width: 40px;
}

.novfr-quotes--nav-labels .novfr-quotes-arrows button:hover,
.novfr-quotes--nav-labels .novfr-quotes-arrows button:focus-visible {
	background: none;
	color: var(--nq-nav);
	opacity: 1;
}

.novfr-quotes--nav-labels .novfr-quotes-arrows button:focus-visible {
	outline: 2px solid var(--nq-nav);
	outline-offset: 2px;
}

.novfr-quotes--nav-labels .novfr-quotes-arrows [data-novfr-prev]:hover {
	transform: translateX(-2px);
}

.novfr-quotes--nav-labels .novfr-quotes-arrows [data-novfr-next]:hover {
	transform: translateX(2px);
}

.novfr-quotes--nav-labels .novfr-quotes-arrows svg {
	height: 20px;
	stroke-width: 2.2;
	width: 20px;
}

/* Sans réglage responsive posé par Elementor, on retombe sur 2 puis 1 carte. */
@media (max-width: 1024px) {
	.novfr-quotes {
		--nq-per: 2;
	}
}

@media (max-width: 767px) {
	.novfr-quotes {
		--nq-per: 1;
		--nq-gap: 16px;
		--nq-pad: 20px 20px 18px;
	}

	/*
	 * Mobile : les étiquettes deviennent des points ronds centrés, un par
	 * avis, de taille fixe ; seule la couleur marque l'avis affiché. Le texte
	 * reste dans le bouton pour les lecteurs d'écran. Zone tactile de
	 * 16 × 24 px pour un point de 8 px, points espacés de 8 px. Pas de
	 * flèches : on fait glisser les cartes. (Le slider des dates garde, lui,
	 * ses étiquettes sur mobile.)
	 */
	.novfr-quotes--nav-labels .novfr-quotes-bar {
		justify-content: center;
		margin-top: 12px;
	}

	.novfr-quotes--nav-labels .novfr-quotes-arrows {
		display: none;
	}

	.novfr-quotes--nav-labels .novfr-quotes-dots {
		gap: 0;
		justify-content: center;
	}

	.novfr-quotes--nav-labels .novfr-quotes-dots button,
	.novfr-quotes--nav-labels .novfr-quotes-dots button[aria-current="true"] {
		background: transparent;
		border: 0;
		color: transparent;
		font-size: 0;
		height: 24px;
		padding: 0;
		position: relative;
		width: 16px;
	}

	.novfr-quotes--nav-labels .novfr-quotes-dots button::before {
		background: var(--nq-nav-dim);
		border-radius: 50%;
		content: "";
		inset: 8px 4px;
		position: absolute;
		transition: background-color 0.2s;
	}

	.novfr-quotes--nav-labels .novfr-quotes-dots button[aria-current="true"]::before {
		background: var(--nq-dot-active);
	}
}

@media (prefers-reduced-motion: reduce) {
	.novfr-quotes .novfr-quotes-dots button,
	.novfr-quotes .novfr-quotes-dots button::before,
	.novfr-quotes .novfr-quotes-arrows button {
		transition: none;
	}

	.novfr-quotes--nav-labels .novfr-quotes-arrows button:hover {
		transform: none;
	}
}