/**
 * Styles globaux : applique les design tokens (variables.css) aux éléments
 * HTML de base. Ne contient aucune règle spécifique à une section : ça,
 * c'est le rôle des fichiers dans /assets/css/sections et /components.
 */

/* Astra pose "overflow-x: hidden" sur body, mais pas sur html — dans
   certains navigateurs, c'est html (pas body) qui fait office de zone de
   défilement racine, ce qui laissait la page se décaler horizontalement
   malgré la règle sur body (carrousels : items au-delà de la piste
   visible). */
html {
	overflow-x: hidden;
}

body {
	background-color: var(--baba-color-bg);
	color: var(--baba-color-text);
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	line-height: var(--baba-line-height-body);
}

/* Astra applique sa propre couleur de fond (--ast-global-color-5, un gris
   bleuté) via ".ast-separate-container", plus spécifique qu'un simple
   sélecteur "body" : elle prenait le dessus sur la ligne précédente et
   teintait toutes les sections qui n'ont pas leur propre fond (avis, FAQ,
   histoire). La référence est en blanc pur partout. On double la classe
   plutôt que de s'appuyer sur une classe de body particulière (qui ne pose
   pas toujours sur toutes les pages) : ça garantit qu'on l'emporte, quelle
   que soit la page. */
.ast-separate-container.ast-separate-container {
	background-color: var(--baba-color-bg);
}

/* Astra pose une ombre portée sur toute image du contenu, via
   ".ast-article-single img:not(figure img)" (0,2,3) — un halo gris qui
   entoure aussi bien les photos produit que les pictogrammes détourés. La
   référence n'en a nulle part. On préfixe par "body" pour repasser devant. */
body .ast-article-single img:not(figure img) {
	box-shadow: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
}

h1 {
	font-size: var(--baba-text-h1);
}

h2 {
	font-size: var(--baba-text-h2);
	line-height: var(--baba-line-height-h2);
}

a {
	color: var(--baba-color-accent);
	text-decoration: none;
}

/* Astra injecte sa propre couleur d'étoiles (orange, --ast-global-color-3)
   en CSS dynamique avec une spécificité ".woocommerce .star-rating". On
   affiche des avis en dehors des pages WooCommerce classiques (ex. sur
   l'accueil), où la classe de body "woocommerce-page" n'est pas présente :
   on double donc la classe ".star-rating" elle-même (spécificité plus
   élevée, sans dépendre d'un ancêtre précis ni de l'ordre de chargement)
   pour aligner les étoiles sur la couleur de marque partout où elles
   apparaissent (fiche produit, boucles produits, avis, accueil). */
.star-rating.star-rating,
.star-rating.star-rating::before {
	color: var(--baba-color-accent);
	/* Les étoiles sont des glyphes : tout interlettrage hérité les écarte. */
	letter-spacing: normal;
}

/* Astra ajoute "width: calc(5.4em + 10px)" en CSS dynamique sur les pages
   portant la classe .woocommerce (fiche produit, collections) mais pas sur
   l'accueil : les mêmes étoiles y étaient 10px plus larges qu'ailleurs. On
   revient à la largeur naturelle de 5.4em, partout. Triple classe : la règle
   d'Astra est injectée en ligne, donc après nos feuilles, et l'emporterait à
   spécificité égale. */
.star-rating.star-rating.star-rating {
	width: 5.4em;
}

/* Astra habille tout <button> nu : coins arrondis 4px et une ombre portée
   discrète (rgba(0,0,0,.05) 0 1px 2px). Sur nos composants cette ombre se
   lisait comme un faux trait de séparation — c'est ce qui "dessinait" des
   lignes entre les questions de la FAQ, alors que la référence n'en a
   aucune — et les coins arrondis contredisent les boutons carrés de la
   référence. On remet nos boutons à plat une fois pour toutes ; chaque
   composant applique ensuite son propre style par-dessus. */
button[class^='baba-'],
button[class*=' baba-'] {
	box-shadow: none;
	border-radius: var(--baba-radius-none);
}

/* La référence n'affiche de fil d'Ariane sur aucune page. */
.woocommerce-breadcrumb {
	display: none;
}

.baba-container {
	max-width: var(--baba-container-max-width);
	margin: 0 auto;
	padding: 0 var(--baba-container-padding);
}

@media screen and (max-width: 749px) {
	.baba-container {
		padding: 0 var(--baba-container-padding-mobile);
	}
}