/**
 * 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;
}

/* ------------------------------------------------------------------ */
/* Pagination — cinq avis par page, comme la référence                 */
/* ------------------------------------------------------------------ */

/* Mesures relevées sur le widget de la référence : la barre centrée avec
   16px de respiration, la page courante en 25,2px gras gris, les autres en
   16,8px doré. Les flèches sont les glyphes d'origine, extraits de la
   police d'icônes du widget (scripts/extract-avis-pagination-icones.mjs). */
.baba-reviews__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 0;
}

.baba-reviews__page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	padding: 4px 8px;
	background: none;
	border: 0;
	font-family: var(--baba-font-body);
	font-weight: var(--baba-font-weight-normal);
	font-size: var(--baba-text-base);
	/* Interligne à 1 : la référence serre ses chiffres sur leur seule
	   hauteur de police, pas sur l'interligne de lecture du thème. */
	line-height: 1;
	color: var(--baba-color-accent);
	cursor: pointer;
}

/* Astra donne un fond bleu au survol de n'importe quel bouton. */
.baba-reviews__page:hover,
.baba-reviews__page:focus {
	background: none;
	color: var(--baba-color-accent);
}

.baba-reviews__page:focus-visible {
	outline: 2px solid var(--baba-color-accent);
	outline-offset: 2px;
}

.baba-reviews__page--courante {
	font-size: 25.2px;
	/* 700, la valeur de la référence : ni le « bold » du thème (800) ni son
	   « semibold » (600) ne tombent dessus. */
	font-weight: 700;
	color: #7b7b7b;
	cursor: default;
}

.baba-reviews__page--courante:hover,
.baba-reviews__page--courante:focus {
	color: #7b7b7b;
}

/* 27,13 × 26px : la boîte que la référence donne à ses flèches. */
.baba-reviews__page--fleche,
.baba-reviews__page--saut {
	min-width: 27.13px;
	height: 26px;
	padding: 4px;
}

/* 9,24px de haut : la taille à laquelle la référence rend ces glyphes
   (512 unités sur 1024, dans un texte de 18,48px). */
.baba-reviews__page--fleche svg,
.baba-reviews__page--saut svg {
	width: auto;
	height: 9.24px;
}

.baba-reviews__page[hidden] {
	display: none;
}

@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);
	}
}