/**
 * Pages éditoriales et légales (Notre Histoire, Le Livre de Baba, Le Baba
 * Club, Contact, CGV, mentions légales…).
 *
 * Gabarit natif d'Astra (article > .entry-header > h1.entry-title, puis
 * .entry-content) : rien n'est reconstruit, tout est stylisé. La classe
 * .baba-page vient d'astra_child_baba_page_body_class() — « .page » seule
 * toucherait aussi le panier et la commande, qui ont déjà leur gabarit.
 *
 * Mesures relevées sur la référence (chez-baba.fr/pages/*, gabarit
 * « page-width--narrow ») : colonne de texte de 699,3px dans un conteneur
 * de 762,3px, et aucun blanc entre le bas du header et le titre.
 */

/* Astra plafonne son conteneur à 1240px avec 20px de marge intérieure ;
   la référence utilise ici une colonne étroite et centrée. On double
   .ast-container pour passer devant la règle d'Astra, qui est plus
   spécifique (même procédé que dans collection.css et header.css). */
body.baba-page .ast-container.ast-container {
	max-width: 762.3px;
	padding-left: 31.5px;
	padding-right: 31.5px;
}

/* Astra pose 60px au-dessus et au-dessous du contenu ; sur la référence le
   titre suit immédiatement le header, et le pied de page suit immédiatement
   le texte (c'est le padding du footer qui fait l'espace).
   L'ID est doublé parce que la règle d'Astra est
   « .ast-plain-container.ast-no-sidebar #primary » dans un @media
   (min-width: 1200px), soit deux classes contre une : un simple
   « body.baba-page #primary » perd. Même procédé que dans cart.css. */
body.baba-page #primary#primary {
	margin-top: 0;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Titre de la page                                                    */
/* ------------------------------------------------------------------ */

body.baba-page .entry-header {
	margin-bottom: 0;
}

body.baba-page .entry-title.entry-title {
	margin: 0 0 42px;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: 52px;
	line-height: 67.6px;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
	text-align: left;
}

/* ------------------------------------------------------------------ */
/* Corps de texte                                                      */
/* ------------------------------------------------------------------ */

body.baba-page .entry-content {
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	line-height: 29.6px;
	letter-spacing: 0.63px;
	color: var(--baba-color-text);
}

/* Astra colore ses titres en #1e293b et les met en 600 : la référence les
   laisse en noir plein et en graisse normale, comme le reste du site. */
body.baba-page .entry-content h1,
body.baba-page .entry-content h2,
body.baba-page .entry-content h3,
body.baba-page .entry-content h4 {
	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);
}

body.baba-page .entry-content h1 {
	margin: 0 0 42px;
	font-size: 52px;
	line-height: 67.6px;
}

body.baba-page .entry-content h2 {
	margin: 0 0 19.92px;
	font-size: var(--baba-text-h2);
	line-height: 31.2px;
}

body.baba-page .entry-content h3 {
	margin: 18px 0;
	font-size: var(--baba-text-lg);
	line-height: 23.4px;
}

body.baba-page .entry-content h4 {
	margin: 18px 0;
	font-size: var(--baba-text-base);
	line-height: 23.4px;
}

/* Marges haute ET basse, comme sur la référence : entre deux paragraphes
   elles fusionnent et ne donnent qu'un seul écart de 16,8px, mais dans une
   puce (<li><p>…) elles ne fusionnent pas, et c'est là que la référence
   aère ses lignes. */
body.baba-page .entry-content p {
	margin: var(--baba-text-base) 0;
}

/* Le premier bloc colle au titre : la référence annule sa marge haute. */
body.baba-page .entry-content > *:first-child {
	margin-top: 0;
}

body.baba-page .entry-content strong,
body.baba-page .entry-content b {
	/* La graisse seule : la couleur reste celle du texte porteur (noir dans
	   un titre, gris à 75 % dans un paragraphe), comme sur la référence. */
	font-weight: 700;
}

/* Puces à l'intérieur du bloc (list-style-position: inside) : c'est ce que
   fait la référence, le texte des lignes longues revient donc à l'aplomb
   de la puce et non du texte. */
body.baba-page .entry-content ul,
body.baba-page .entry-content ol {
	margin: var(--baba-text-base) 0;
	padding-left: 21px;
	list-style-position: inside;
}

body.baba-page .entry-content li {
	margin: 0;
}

body.baba-page .entry-content a {
	color: var(--baba-color-link);
}

body.baba-page .entry-content a:hover,
body.baba-page .entry-content a:focus {
	color: var(--baba-color-accent);
}

/* Filet de séparation : pas une bordure sur la référence mais un bloc
   d'un peu plus d'un pixel, d'où le fond plutôt que border-top. */
body.baba-page .entry-content hr {
	height: 1.05px;
	margin: 73.5px 0;
	background-color: rgba(0, 0, 0, 0.2);
	border: 0;
}

body.baba-page .entry-content img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

/* Sous 750px, la référence ne se contente pas de rétrécir le conteneur :
   elle descend toute l'échelle typographique (le titre passe de 52px à
   20px, le corps de 16,8px à 15,75px). Valeurs relevées une à une. */
@media screen and (max-width: 749px) {
	body.baba-page .ast-container.ast-container {
		padding-left: 21px;
		padding-right: 21px;
	}

	body.baba-page .entry-title.entry-title,
	body.baba-page .entry-content h1 {
		margin-bottom: 31.5px;
		font-size: 20px;
		line-height: 26px;
	}

	body.baba-page .entry-content h2 {
		margin-bottom: 16.6px;
		font-size: 20px;
		line-height: 26px;
	}

	body.baba-page .entry-content h3 {
		margin: 17px 0;
		font-size: 17px;
		line-height: 22.1px;
	}

	body.baba-page .entry-content h4 {
		margin: 17px 0;
		font-size: 15.75px;
		line-height: 22.1px;
	}

	body.baba-page .entry-content {
		font-size: 15.75px;
		line-height: 27.75px;
	}

	body.baba-page .entry-content p {
		margin: 15.75px 0;
	}

	body.baba-page .entry-content ul,
	body.baba-page .entry-content ol {
		margin: 15.75px 0;
	}

	body.baba-page .entry-content hr {
		margin: 52.5px 0;
	}
}