/**
 * Bloc avis clients ([l4_avis_clients], div grc-product-reviews et
 * grc-site-iframe reprises du plugin).
 *
 * Refonte « épurée » : la première version était calquée sur le carrousel de
 * la Société des Avis Garantis, qui met tout en italique (texte, nom, date,
 * note, badge) et empile cinq libellés dans la colonne de gauche. Rendu jugé
 * daté par le client. On garde la structure — colonne « marque » à gauche,
 * carrousel de cartes à droite — mais en romain, avec Poppins pour les
 * chiffres et les noms, Lato pour le corps, et un seul repère « vérifié »
 * discret par carte au lieu du badge sur deux lignes.
 *
 * Les polices sont déclarées explicitement : sans elles le bloc héritait du
 * contexte (Elementor impose la sienne) et changeait d'aspect d'une page à
 * l'autre. var(--l4-font) vient de header-footer.css, avec un repli en dur si
 * ce module est désactivé ; Poppins et Lato sont chargées pour tout le site
 * par theme_enfant_licence_4_com_style().
 *
 * Tailles en px : le bloc est souvent rendu dans un contexte Elementor qui
 * impose sa propre base de police.
 */

.l4-avis-bloc {
	margin: 32px 0;
	font-family: "Lato", system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #2c3f49;
}

.l4-avis-titre {
	font-family: var(--l4-font, "Poppins", "Lato", system-ui, sans-serif);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.25;
	color: #183546;
	margin: 0 0 20px;
}

/* align-items: flex-start — la colonne marque se cale en haut des cartes.
   Centrée, elle flottait au milieu d'un bloc de 3 cartes hautes. */
.l4-avis-corps {
	display: flex;
	align-items: flex-start;
	gap: 36px;
}

/* ---- Colonne marque ---- */

.l4-avis-marque {
	flex: 0 0 196px;
	max-width: 196px;
}

.l4-avis-logo {
	display: block;
	width: 100%;
	max-width: 168px;
	height: auto;
	margin: 0 0 16px;
}

/* Note sur 10 : le chiffre est l'argument du bloc, il porte donc la plus
   grosse graisse. baseline pour que « /10 » s'aligne sur le pied du nombre. */
.l4-avis-score {
	display: flex;
	align-items: baseline;
	gap: 2px;
	margin: 0;
	font-family: var(--l4-font, "Poppins", "Lato", system-ui, sans-serif);
	color: #183546;
}
.l4-avis-score strong {
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
}
.l4-avis-score span {
	font-size: 17px;
	font-weight: 500;
	color: #5c7381;
}

.l4-avis-note-globale { margin: 10px 0 12px; }
.l4-avis-note-globale .l4-avis-stars { font-size: 20px; letter-spacing: 2px; }

.l4-avis-total {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.4;
	color: #5c7381;
}
.l4-avis-total strong { color: #183546; font-weight: 700; }

/* Souligné porté par une bordure plutôt que text-decoration : le trait reste
   à distance des jambages et ne saute pas au survol. */
.l4-avis-lien {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--l4-font, "Poppins", "Lato", system-ui, sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #30698C;
	text-decoration: none;
	border-bottom: 1px solid #cfdde7;
	padding-bottom: 3px;
}
.l4-avis-lien:hover,
.l4-avis-lien:focus { color: #183546; border-bottom-color: #183546; text-decoration: none; }

/* ---- Carrousel ---- */

.l4-avis-carrousel {
	flex: 1 1 auto;
	min-width: 0;
}

.l4-avis-piste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 20px) / 3);
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Marge intérieure : sans elle, l'ombre des cartes serait rognée. */
	padding: 8px 4px 14px;
	margin: -8px -4px -14px;
}
.l4-avis-piste::-webkit-scrollbar { display: none; }

.l4-avis-carte {
	position: relative;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	background: #fff;
	/* Contour net plutôt qu'une grosse ombre portée : le halo gris se voyait
	   trop sur fond blanc. */
	border: 1px solid #e4ebf0;
	box-shadow: 0 1px 2px rgba(24, 53, 70, .04);
	padding: 22px 22px 18px;
	overflow: hidden;
}

/* Étoiles alignées à gauche comme le reste de la carte : centrées, elles
   cassaient l'axe de lecture du texte et du pied. */
.l4-avis-note { margin: 0 0 12px; }

.l4-avis-stars { display: block; letter-spacing: 1.5px; font-size: 16px; }
.l4-avis-star { color: #F2B01E; }
.l4-avis-star.est-vide { color: #dbe2e7; }

.l4-avis-texte {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	font-size: 15px;
	line-height: 1.65;
	color: #3b4f5a;
	flex: 1 1 auto;
	/* Les avis très longs sont coupés proprement à 6 lignes */
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Filet de séparation : il remplace le guillemet en filigrane, qui tombait
   dans la zone du pied de carte et passait pour un artefact d'affichage. */
.l4-avis-pied {
	display: flex;
	align-items: center;
	gap: 11px;
	padding-top: 15px;
	border-top: 1px solid #f0f4f7;
}

/* Initiale du prénom dans la palette du site. L'ancien avatar était un
   dégradé bleu → violet → rouge, hors charte. */
.l4-avis-avatar {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #EAF0F4;
	color: #30698C;
	font-family: var(--l4-font, "Poppins", "Lato", system-ui, sans-serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 36px;
	text-align: center;
}
.l4-avis-avatar svg { display: block; margin: 8px auto; }

.l4-avis-identite {
	flex: 1 1 auto;
	min-width: 0;
}
.l4-avis-auteur {
	display: block;
	font-family: var(--l4-font, "Poppins", "Lato", system-ui, sans-serif);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #183546;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 12,5 px et non 11 : sous cette taille, en #8a9aa5, la date n'était plus
   lisible. */
.l4-avis-date {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: #7d8f9b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Une pastille sur une ligne : l'ancien « ACHETEUR / AUTHENTIFIÉ » en gras
   italique majuscules sur deux lignes prenait le pas sur le nom du client. */
.l4-avis-authentifie {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--l4-font, "Poppins", "Lato", system-ui, sans-serif);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: #1d8a4c;
	background: #eaf7ef;
	border-radius: 999px;
	padding: 5px 9px;
	white-space: nowrap;
}
.l4-avis-authentifie svg { display: block; }

/* Grille 1fr / auto / 1fr : les puces sont centrées sous le carrousel et les
   flèches poussées à droite. En flex, « margin-left: auto » sur les puces les
   aurait centrées dans l'espace restant, donc décalées vers la gauche. */
.l4-avis-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-top: 16px;
}
.l4-avis-nav[hidden] { display: none; }

.l4-avis-points {
	grid-column: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}
.l4-avis-fleches {
	grid-column: 3;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

/* Puces : la page courante s'allonge en pastille au lieu de changer seulement
   de couleur — repère lisible même en vision des couleurs réduite.
   Préfixé par .l4-avis-bloc comme les flèches : sinon les styles de bouton du
   thème (padding, min-width, ombre) reprennent la main. */
.l4-avis-bloc .l4-avis-point {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	width: 9px;
	height: 9px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #cfdae1;
	box-shadow: none;
	line-height: 1;
	cursor: pointer;
	transition: width .25s, background .25s;
}
/* Zone de clic élargie sans toucher au visuel : 9 px de haut, c'est sous les
   24 px recommandés au doigt. */
.l4-avis-bloc .l4-avis-point::after {
	content: "";
	position: absolute;
	inset: -8px -4px;
}
.l4-avis-bloc .l4-avis-point:hover { background: #a9bcc9; }
.l4-avis-bloc .l4-avis-point:focus-visible { outline: 2px solid #30698C; outline-offset: 3px; }
.l4-avis-bloc .l4-avis-point.est-actif {
	width: 26px;
	background: #30698C;
	cursor: default;
}

/* Sélecteurs préfixés par .l4-avis-bloc : sans ça, les styles de bouton du
   thème (padding, line-height) reprennent la main et décentrent le chevron. */
.l4-avis-bloc .l4-avis-fleche {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #d7e2ea;
	border-radius: 50%;
	background: #fff;
	color: #30698C;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
}
.l4-avis-bloc .l4-avis-fleche svg { display: block; }
.l4-avis-bloc .l4-avis-fleche:hover:not(:disabled),
.l4-avis-bloc .l4-avis-fleche:focus:not(:disabled) { background: #30698C; border-color: #30698C; color: #fff; }
.l4-avis-bloc .l4-avis-fleche:disabled { border-color: #e7edf1; color: #c3cfd7; cursor: default; background: #fff; }

@media (max-width: 900px) {
	.l4-avis-corps { flex-direction: column; align-items: stretch; gap: 24px; }
	/* Logo et note passent côte à côte : empilés et centrés, ils mangeaient
	   un écran de haut sur mobile avant le premier avis. */
	.l4-avis-marque {
		flex-basis: auto;
		max-width: none;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 18px;
	}
	.l4-avis-logo { width: 150px; margin: 0; }
	.l4-avis-score strong { font-size: 38px; }
	.l4-avis-note-globale { margin: 6px 0 8px; }
	.l4-avis-piste { grid-auto-columns: calc((100% - 20px) / 2); }
}

@media (max-width: 560px) {
	.l4-avis-piste { grid-auto-columns: 88%; }
	.l4-avis-titre { font-size: 20px; }
	/* 12 avis à 1 carte par écran = 12 puces : gouttière réduite pour qu'elles
	   tiennent à côté des flèches. */
	.l4-avis-points { gap: 6px; }
}