/**
 * Bloc avis — moyenne + étoiles + répartition + bouton "écrire un avis" sur
 * une ligne à 3 colonnes, puis liste des avis. Basé sur le système d'avis
 * natif WooCommerce. Typographie/couleurs/proportions mesurées sur le
 * widget d'avis de la référence (même s'il utilise un plugin tiers
 * différent : on reproduit l'apparence, pas son marquage).
 */

.baba-reviews {
	max-width: 1168px;
	margin: 0 auto;
}

.baba-reviews__header {
	margin-bottom: var(--baba-space-lg);
	text-align: center;
}

/* Classe doublée : Astra (compatibilité WooCommerce) impose
   "margin-bottom: 0.7em" à tout <h2> via ".woocommerce-js h2", une
   spécificité (0,1,1) qui écrasait la marge ci-dessous (0,1,0). */
.baba-reviews__title.baba-reviews__title {
	margin: 0 0 var(--baba-space-md);
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: 25.2px;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
}

.baba-reviews__row {
	display: flex;
	align-items: center;
	justify-content: center;
}

.baba-reviews__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0 var(--baba-space-md);
}

.baba-reviews__col--summary,
.baba-reviews__col--action {
	flex: 0 1 30%;
}

.baba-reviews__col--breakdown {
	flex: 0 1 40%;
	border-left: 1px solid rgba(214, 179, 121, 0.1);
	border-right: 1px solid rgba(214, 179, 121, 0.1);
}

/* Étoiles et moyenne côte à côte, la ligne du nombre d'avis en dessous —
   disposition de la référence. */
.baba-reviews__summary-line {
	display: flex;
	align-items: center;
	gap: var(--baba-space-xs);
}

/* Étoiles avant la moyenne : la règle globale .review-rating{order:2}
   (WooCommerce/Astra) les renvoyait après dès que ce bloc est devenu flex. */
.baba-reviews__summary-line .review-rating {
	order: 0;
}

/* Taille calée sur l'étendue réelle des cinq étoiles de la référence
   (103px), et non sur la largeur de leur conteneur : celui-ci fait 189px
   parce qu'il s'étire, ce qui donnait des étoiles démesurées. */
.baba-reviews__col--summary .star-rating {
	font-size: 19px;
}

.baba-reviews__average,
.baba-reviews__count {
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	letter-spacing: var(--baba-nav-letter-spacing);
	color: var(--baba-color-text);
}

.baba-reviews__empty {
	margin: 0;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	color: var(--baba-color-text);
}

.baba-reviews__breakdown {
	width: 100%;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* 83px : largeur des cinq étoiles (celle de la référence). Cette colonne
   était figée à 68px, valeur juste tant que les étoiles étaient plus
   petites ; depuis leur mise à la taille de la référence, elles débordaient
   sur la barre. */
.baba-reviews__breakdown-row {
	display: grid;
	grid-template-columns: 83px 1fr 20px;
	align-items: center;
	gap: var(--baba-space-xs);
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-sm);
	color: var(--baba-color-text);
}

/* 83px sur la référence (étoiles de l'histogramme). flex-shrink:0 est
   indispensable : sans lui, la rangée comprime les étoiles à 58px quelle que
   soit la taille de police, et l'agrandissement reste sans effet. */
.baba-reviews__breakdown-stars .star-rating {
	flex-shrink: 0;
	font-size: 15.4px;
}

.baba-reviews__breakdown-bar {
	display: block;
	height: 6px;
	background-color: var(--baba-color-bg-alt);
}

.baba-reviews__breakdown-bar span {
	display: block;
	height: 100%;
	background-color: var(--baba-color-accent);
}

.baba-reviews__write-btn {
	white-space: nowrap;
}

.baba-reviews__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.baba-reviews__item {
	padding-top: var(--baba-space-sm);
	padding-bottom: var(--baba-space-sm);
	border-top: 1px solid rgba(214, 179, 121, 0.1);
}

.baba-reviews__item-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--baba-space-sm);
}

/* 103px sur la référence. */
.baba-reviews__item-rating .star-rating {
	font-size: 19px;
}

.baba-reviews__item-date {
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-sm);
	color: #7b7b7b;
}

.baba-reviews__item-meta {
	display: flex;
	align-items: center;
	gap: var(--baba-space-xs);
	margin: var(--baba-space-xs) 0;
}

.baba-reviews__item-avatar {
	border-radius: 50%;
}

.baba-reviews__item-author {
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	color: var(--baba-color-accent);
}

.baba-reviews__item-verified {
	display: inline-block;
	padding: 2px 6px;
	background-color: var(--baba-color-accent);
	color: var(--baba-color-text-inverse);
	font-family: var(--baba-font-body);
	font-size: 12px;
	line-height: 1.3;
}

.baba-reviews__item-content {
	margin: 0;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	color: var(--baba-color-text-solid);
	line-height: 1.5;
}

@media screen and (max-width: 749px) {
	.baba-reviews__row {
		flex-direction: column;
		gap: var(--baba-space-lg);
	}

	.baba-reviews__col--summary,
	.baba-reviews__col--action {
		flex: 0 1 auto;
	}

	.baba-reviews__col--breakdown {
		flex: 0 1 auto;
		width: 100%;
		border-left: 0;
		border-right: 0;
		border-top: 1px solid rgba(214, 179, 121, 0.1);
		border-bottom: 1px solid rgba(214, 179, 121, 0.1);
		padding-top: var(--baba-space-md);
		padding-bottom: var(--baba-space-md);
	}
}