/**
 * Accueil — bannière hero pleine largeur + espacement entre les carrousels
 * de collections.
 */

/* Astra met .ast-container en display:flex (pensé pour contenu + sidebar) :
   sur l'accueil on n'a pas de sidebar, juste des sections qui doivent
   s'empiler verticalement comme du contenu de bloc normal. Le padding est
   aussi retiré : nos sections gèrent déjà leur propre alignement via
   .baba-container (comme le header/footer), et la bannière hero doit
   être pleine largeur, bord à bord. */
.home .ast-container {
	display: block;
	max-width: none;
	padding: 0;
}

.baba-hero {
	line-height: 0;
}

.baba-hero__image {
	display: block;
	width: 100%;
	height: auto;
}

.baba-home__collections .baba-carousel:not(:last-child) {
	border-bottom: 1px solid var(--baba-color-border);
}

/**
 * Texte d'introduction, entre la bannière hero et les carrousels.
 */
.baba-intro {
	max-width: 900px;
	padding-top: var(--baba-space-2xl);
	padding-bottom: var(--baba-space-lg);
	text-align: center;
}

.baba-intro__kicker {
	margin: 0 0 var(--baba-space-xs);
	font-family: var(--baba-font-body);
	font-size: 15px;
	letter-spacing: var(--baba-nav-letter-spacing);
	color: var(--baba-color-text-solid);
}

/* Classe doublée : voir la note sur .baba-stats__heading (marge des <h2>
   imposée par Astra) — le même sélecteur ".woocommerce-js h2" ne vise pas
   les <h1>, mais on garde le doublage par cohérence/sécurité si le tag
   change un jour. */
.baba-intro__heading.baba-intro__heading {
	margin: 0 0 var(--baba-space-md);
	font-family: var(--baba-font-heading);
	font-weight: 700;
	font-size: 43px;
	line-height: 47.3px;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
}

.baba-intro__accent {
	color: var(--baba-color-accent);
}

/* Mesuré sur la référence : chaque ligne fait 21px de haut, sans marge
   propre — l'espacement entre les blocs de texte vient uniquement des
   lignes vides (&nbsp;) insérées dans le contenu, pas du CSS. */
.baba-intro__text p {
	margin: 0;
	font-family: var(--baba-font-body);
	font-size: 15px;
	line-height: 21px;
	letter-spacing: var(--baba-nav-letter-spacing);
	color: var(--baba-color-text-solid);
}

@media screen and (max-width: 749px) {
	.baba-intro__heading.baba-intro__heading {
		font-size: 32px;
		line-height: 1.1;
	}
}

.baba-home__reviews {
	padding: var(--baba-space-xl) var(--baba-container-padding);
	border-top: 1px solid var(--baba-color-border);
}

/**
 * Bandeau "résultats" — accroche + titre + 4 cartes statistiques blanches +
 * paragraphe de clôture, sur fond gris clair. Toutes les tailles et tous les
 * espacements ci-dessous sont les valeurs mesurées sur la référence (styles
 * calculés + rectangles), d'où les valeurs en pixels non arrondies.
 * Pas d'état au survol : les cartes sont statiques sur la référence.
 */
.baba-stats {
	background-color: var(--baba-color-bg-alt);
}

.baba-stats__inner {
	padding-top: 80px;
	padding-bottom: 80px;
	text-align: center;
}

.baba-stats__kicker {
	margin: 0;
	font-family: var(--baba-font-body);
	font-size: 18px;
	font-style: italic;
	font-weight: var(--baba-font-weight-semibold);
	line-height: 25.2px;
	letter-spacing: var(--baba-nav-letter-spacing);
	text-transform: uppercase;
	color: var(--baba-color-accent);
}

/* Classe doublée sur les titres : Astra (compatibilité WooCommerce) impose
   "margin-bottom: 0.7em" à tout <h2> via ".woocommerce-js h2", une
   spécificité (0,1,1) qui écrasait la marge mesurée ci-dessous (0,1,0) et
   déréglait l'espacement de la section. Doubler la classe nous rend
   prioritaires sans dépendre de l'ordre de chargement, et sans toucher aux
   <h2> des gabarits WooCommerce natifs. */
.baba-stats__heading.baba-stats__heading {
	max-width: 942px;
	margin: 0 auto 40px;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-semibold);
	font-size: 43px;
	line-height: 47.3px;
	letter-spacing: var(--baba-heading-letter-spacing);
	text-transform: uppercase;
	color: var(--baba-color-text-solid);
}

.baba-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
	gap: 30px;
}

.baba-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px;
	background-color: var(--baba-color-bg);
	border-radius: 15px;
}

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

/* La référence remonte le texte sous le nombre avec une marge négative :
   la hauteur de ligne (98px) est bien plus grande que la police (70px), et
   c'est cette marge qui recentre l'icône "%" en exposant sur les chiffres. */
.baba-stats__percent {
	font-family: var(--baba-font-body);
	font-weight: var(--baba-font-weight-semibold);
	font-size: 70px;
	line-height: 98px;
	margin-bottom: -30px;
	color: var(--baba-color-accent);
}

.baba-stats__icon {
	width: 20px;
	height: auto;
	color: var(--baba-color-accent);
}

.baba-stats__text {
	margin: 20px 0 0;
	font-family: var(--baba-font-body);
	font-size: 16px;
	line-height: 22.4px;
	letter-spacing: var(--baba-nav-letter-spacing);
	color: var(--baba-color-text-solid);
}

.baba-stats__outro {
	margin: 25px 0 0;
	font-family: var(--baba-font-body);
	font-size: 16px;
	line-height: 22.4px;
	letter-spacing: var(--baba-nav-letter-spacing);
	color: var(--baba-color-text-solid);
}

@media screen and (max-width: 749px) {
	.baba-stats__inner {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.baba-stats__kicker {
		font-size: 16px;
	}

	/* Classe doublée comme la règle de base : une media query n'ajoute aucune
	   spécificité, il faut donc le même poids pour pouvoir la surcharger. */
	.baba-stats__heading.baba-stats__heading {
		margin-bottom: 25px;
		font-size: 20px;
		line-height: 22px;
	}

	.baba-stats__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.baba-stats__item {
		padding: 25px;
	}

	.baba-stats__percent {
		font-size: 60px;
		line-height: 84px;
		margin-bottom: -20px;
	}

	.baba-stats__outro {
		margin-top: 20px;
	}
}

/**
 * Section "L'histoire de Chez Baba" — texte à gauche, photo à droite.
 */
.baba-story {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--baba-space-2xl);
	padding-top: var(--baba-space-2xl);
	padding-bottom: var(--baba-space-2xl);
}

/* Classe doublée : voir la note sur .baba-stats__heading (marge des <h2>
   imposée par Astra). */
.baba-story__heading.baba-story__heading {
	margin: 0 0 var(--baba-space-md);
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-semibold);
	font-size: 43px;
	line-height: 1.1;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
}

.baba-story__text p {
	margin: 0 0 var(--baba-space-sm);
	font-family: var(--baba-font-body);
	font-style: italic;
	font-size: var(--baba-text-base);
	line-height: var(--baba-line-height-body);
	letter-spacing: var(--baba-nav-letter-spacing);
	color: var(--baba-color-text-solid);
}

.baba-story__button {
	margin-top: var(--baba-space-sm);
}

.baba-story__media {
	position: relative;
	aspect-ratio: 1 / 1;
}

.baba-story__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Même cadre doré que la photo de la FAQ (voir faq.css pour le détail des
   valeurs) : présent sur la référence à cet endroit aussi. */
.baba-story__media::after {
	content: '';
	position: absolute;
	inset: 0 0 -1px;
	background: url('../../images/faq/frame.svg') 0 0 / 100% 100% no-repeat;
	pointer-events: none;
	box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 2px #ffffff;
}

@media screen and (max-width: 989px) {
	.baba-story {
		grid-template-columns: 1fr;
		gap: var(--baba-space-lg);
	}

	.baba-story__media {
		order: -1;
	}

	/* Classe doublée comme la règle de base (voir la note plus haut). */
	.baba-story__heading.baba-story__heading {
		font-size: 32px;
	}
}