/**
 * Dahu Theme Annad 2026 — carte « Score de confiance » (bloc annad/avis-stats, valeurs saisies).
 * Cartes d avis, étoiles (.annad-stars) et textes de la composition « Page avis » : front-page.css.
 * Mobile-first, breakpoint 40em. Couleurs : custom properties de header.css uniquement.
 */

/* ---------- Statistiques ---------- */

.avis-stats__card {
	width: 100%;
	max-width: 42rem;
	margin-inline: auto;
	padding: 1.5rem;
	text-align: left;
	color: var(--color-on-surface);
	background-color: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-large);
}

@media (min-width: 40em) {
	.avis-stats__card {
		padding: 2rem;
	}
}

.avis-stats__label {
	margin-bottom: 1.5rem;
	font-size: 1.25rem;
	font-weight: 600;
}

.avis-stats__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: center;
}

@media (min-width: 40em) {
	.avis-stats__body {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 2.5rem;
	}
}

.avis-stats__score {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.avis-stats__average {
	font-family: var(--font-heading);
	font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
	font-weight: 800;
	line-height: 1;
}

/* Étoiles de la note moyenne. Forme et couleur répétées ici (mêmes valeurs que .annad-stars de
   front-page.css) : le bloc reste complet là où front-page.css n'est pas chargée. Deux classes :
   la taille doit passer devant .annad-stars, porté par le même élément et chargé après. */
.avis-stats__card .avis-stats__stars {
	font-size: 1.5rem;
	letter-spacing: 0.15em;
	line-height: 1;
	color: var(--color-stars);
}

.avis-stats__total {
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.avis-stats__bars {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.avis-stats__bar-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.avis-stats__bar {
	flex: 1 1 auto;
	height: 0.5rem;
	overflow: hidden;
	background-color: var(--color-border);
	border-radius: 999px;
}

.avis-stats__bar-fill {
	display: block;
	height: 100%;
	background-color: var(--color-stars);
	border-radius: inherit;
}

.avis-stats__percent {
	flex: 0 0 3rem;
	font-size: 0.8125rem;
	text-align: right;
	color: var(--color-text-muted);
}