/**
 * Blog : index des articles (/blogs/infos) et gabarit d'article.
 *
 * Mesures relevées sur la référence. L'index alterne une carte pleine
 * largeur et deux cartes en demi-colonne ; les hauteurs d'image y sont
 * fixes (231px et 186px), pas proportionnelles — vérifié en comparant
 * deux largeurs de fenêtre. L'article reprend la colonne étroite de
 * 699,3px des pages éditoriales, précédée d'un bandeau image.
 */

/* ------------------------------------------------------------------ */
/* Conteneur commun                                                    */
/* ------------------------------------------------------------------ */

/* Astra plafonne son conteneur à 1240px ; le blog de la référence occupe
   presque toute la largeur, avec 31,5px de marge. L'ID est doublé pour
   passer devant le CSS dynamique d'Astra (voir page.css). */
body.blog .ast-container.ast-container,
body.single-post .ast-container.ast-container {
	max-width: none;
	padding-left: 31.5px;
	padding-right: 31.5px;
}

body.blog #primary#primary,
body.single-post #primary#primary {
	margin-top: 0;
	margin-bottom: 0;
}

/* Sur les articles, Astra dispose son conteneur en flex (héritage de sa
   mise en page à colonne latérale) : sans largeur explicite, l'article
   se réduit à la largeur de son contenu le plus large — soit la colonne
   de texte — et le bandeau image ne fait plus toute la largeur. */
.baba-article {
	width: 100%;
}

/* ------------------------------------------------------------------ */
/* Index des articles                                                  */
/* ------------------------------------------------------------------ */

.baba-blog__title.baba-blog__title {
	margin: 21px 0;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: 40px;
	line-height: 52px;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
	text-align: left;
}

.baba-blog__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.baba-article-card {
	display: flex;
	flex-direction: column;
	text-align: left;
}

/* Une carte sur trois occupe toute la largeur, texte centré : c'est le
   motif « collage » de la référence. */
.baba-article-card--large {
	grid-column: span 2;
	text-align: center;
}

.baba-article-card__media {
	display: block;
	height: 186px;
	overflow: hidden;
	background-color: rgba(18, 18, 18, 0.1);
}

.baba-article-card--large .baba-article-card__media {
	height: 231px;
}

.baba-article-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.baba-article-card__content {
	padding-top: 10.5px;
}

.baba-article-card__title.baba-article-card__title {
	margin: 0 0 6.3px;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: var(--baba-text-h2);
	line-height: 31.2px;
	letter-spacing: var(--baba-heading-letter-spacing);
}

.baba-article-card__title a {
	color: #121212;
	text-decoration: none;
}

.baba-article-card__title a:hover,
.baba-article-card__title a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.baba-article-card__date {
	margin: 0;
	padding-top: 4.2px;
	font-family: var(--baba-font-heading);
	font-size: 10.5px;
	line-height: 12.5px;
	letter-spacing: 1.365px;
	text-transform: uppercase;
	color: #121212;
}

.baba-article-card__excerpt {
	max-width: 861px;
	margin: 12.6px 0 21px;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	line-height: 29.6px;
	letter-spacing: 0.63px;
	color: rgba(18, 18, 18, 0.75);
}

.baba-article-card--large .baba-article-card__excerpt {
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */

/* La classe posée par le gabarit est "baba-blog__pagination", pas
   "pagination" : écrites pour cette dernière, ces marges ne s'appliquaient
   pas et la pagination venait coller le pied de page.

   52,5px au-dessus : c'est la marge de .pagination-wrapper sur la
   référence. En dessous elle n'en met aucune — mais son pied de page
   commence par une bande claire, là où le nôtre attaque sur le bandeau
   doré : sans écart, les chiffres se posaient dessus. */
.baba-blog .navigation.baba-blog__pagination {
	margin-top: 52.5px;
	margin-bottom: 42px;
}

.baba-blog .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 21px;
}

.baba-blog .page-numbers {
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-md);
	line-height: 1;
	color: var(--baba-color-text);
	text-decoration: none;
}

.baba-blog .page-numbers.current {
	color: var(--baba-color-text-solid);
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* ------------------------------------------------------------------ */
/* Article                                                             */
/* ------------------------------------------------------------------ */

/* Le bandeau sort des marges de la page pour aller d'un bord à l'autre de
   l'écran. Marges négatives calées sur le retrait du conteneur plutôt que
   100vw : vw compte la barre de défilement et ferait déborder la page.

   La référence, elle, plafonne son bandeau à 1365px et le centre au-delà
   (donc pleine largeur jusqu'à 1365px de fenêtre, puis des marges qui
   s'élargissent) — ici on va jusqu'au bord quelle que soit la largeur. */
.baba-article__hero {
	height: 288.8px;
	margin-left: -31.5px;
	margin-right: -31.5px;
	overflow: hidden;
}

.baba-article__hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le titre, la date et le corps partagent la colonne étroite des pages
   éditoriales : même gabarit de lecture sur tout le site. */
.baba-article__header,
.baba-article__content,
.baba-article__back {
	max-width: 699.3px;
	margin-left: auto;
	margin-right: auto;
}

.baba-article__header {
	margin-top: 53.2px;
}

.baba-article__title.baba-article__title {
	margin: 0 0 10.5px;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: 40px;
	line-height: 52px;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
	text-align: left;
}

.baba-article__date {
	margin: 0 0 21px;
	font-family: var(--baba-font-body);
	font-size: 10.5px;
	line-height: 12.5px;
	letter-spacing: 1.365px;
	text-transform: uppercase;
	color: var(--baba-color-text-solid);
}

.baba-article__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);
}

.baba-article__content h1,
.baba-article__content h2,
.baba-article__content h3,
.baba-article__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);
}

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

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

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

.baba-article__content p {
	margin: 0 0 var(--baba-text-base);
}

.baba-article__content ul,
.baba-article__content ol {
	margin: var(--baba-text-base) 0;
	padding-left: 21px;
	list-style-position: inside;
}

.baba-article__content li {
	margin: 0;
}

.baba-article__content a {
	color: var(--baba-color-link);
}

.baba-article__content img {
	max-width: 100%;
	height: auto;
}

/* Les tableaux de comparaison des articles sont plus larges que la
   colonne de texte en mobile. La référence les enferme dans une zone qui
   défile horizontalement : « display: block » suffit à obtenir le même
   comportement sans ajouter d'enveloppe au contenu. */
.baba-article__content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.baba-article__content th,
.baba-article__content td {
	padding: 8px 12px;
	border: 1px solid var(--baba-color-border);
	text-align: left;
}

.baba-article__back {
	margin-top: 52.5px;
	margin-bottom: 0;
	text-align: center;
}

.baba-article__back a {
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-md);
	color: var(--baba-color-link);
}

/* ------------------------------------------------------------------ */
/* Commentaires                                                        */
/* ------------------------------------------------------------------ */

/* Bande grise pleine largeur : elle sort des 31,5px de marge du
   conteneur, d'où les marges négatives. */
.baba-article__comments {
	margin: 63px -31.5px 0;
	padding: 37.8px 31.5px;
	background-color: rgba(0, 0, 0, 0.04);
}

.baba-article__comments-inner {
	max-width: 699.3px;
	margin: 0 auto;
}

.baba-article__comments .comment-reply-title,
.baba-article__comments .comments-title {
	margin: 0 0 19.92px;
	padding: 0;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: var(--baba-text-h2);
	line-height: 31.2px;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
	text-align: left;
}

/* Nom et e-mail côte à côte, message en dessous, bouton en bas — la
   disposition de la référence. Les champs reprennent l'habillage du
   formulaire de contact (voir components/contact-form.css).
   Astra range ses champs dans ses propres rangées (.ast-row,
   .ast-comment-formwrap) et les répartit sur trois colonnes : on efface
   ces rangées avec display:contents pour que les champs deviennent
   directement les cases de la grille, puis « order » rétablit l'ordre de
   la référence (Astra place le message en premier). */
.baba-article__comments .comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 42px;
}

.baba-article__comments .ast-row,
.baba-article__comments .ast-comment-formwrap {
	display: contents;
}

.baba-article__comments .comment-notes {
	grid-column: 1 / -1;
	order: 1;
	margin: 0 0 21px;
}

.baba-article__comments .comment-form-author {
	order: 2;
}

.baba-article__comments .comment-form-email {
	order: 3;
}

.baba-article__comments .comment-form-comment {
	grid-column: 1 / -1;
	order: 4;
	margin: 0;
	padding: 0;
	border: 0;
}

.baba-article__comments .comment-form-cookies-consent {
	grid-column: 1 / -1;
	order: 5;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.baba-article__comments .form-submit {
	grid-column: 1 / -1;
	order: 6;
}

/* Les largeurs d'Astra (ast-width-lg-33 & co) sont calées sur ses trois
   colonnes : elles n'ont plus lieu d'être. */
.baba-article__comments .comment-form p,
.baba-article__comments .comment-form fieldset,
.baba-article__comments .comment-form-textarea {
	width: auto;
	max-width: none;
	float: none;
	padding: 0;
	margin: 0 0 21px;
}

.baba-article__comments .comment-form-legend {
	display: none;
}

.baba-article__comments .comment-notes,
.baba-article__comments .comment-form-cookies-consent label {
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-sm);
	line-height: 20px;
	color: var(--baba-color-text);
}

.baba-article__comments label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-sm);
	line-height: 20px;
	letter-spacing: var(--baba-button-letter-spacing);
	color: var(--baba-color-text);
}

/* Astra impose une hauteur de 40px à ses champs ; la référence est à
   47,25px, comme le formulaire de contact. Classe doublée pour passer
   devant sa règle. */
.baba-article__comments .comment-form input[type='text'],
.baba-article__comments .comment-form input[type='email'],
.baba-article__comments .comment-form input[type='url'] {
	height: 47.25px;
}

.baba-article__comments input[type='text'],
.baba-article__comments input[type='email'],
.baba-article__comments input[type='url'],
.baba-article__comments textarea {
	width: 100%;
	padding: 15.75px;
	background-color: var(--baba-color-bg);
	border: 1px solid rgba(0, 0, 0, 0.55);
	border-radius: var(--baba-radius-none);
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	line-height: 24.8px;
	letter-spacing: 0.42px;
	color: var(--baba-color-text-solid);
}

.baba-article__comments .form-submit {
	margin-bottom: 0;
}

.baba-article__comments .comment-list {
	margin: 0 0 var(--baba-space-lg);
	padding: 0;
	list-style: none;
}

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

@media screen and (max-width: 749px) {
	/* Sous 545px, Astra ramène la marge à 0,54em via
	   « .ast-separate-container #content .ast-container » : un sélecteur
	   d'ID, qu'aucune combinaison de classes ne peut battre. On reprend
	   donc le même ID. */
	body.blog #content .ast-container.ast-container,
	body.single-post #content .ast-container.ast-container {
		padding-left: 21px;
		padding-right: 21px;
	}

	.baba-blog__title.baba-blog__title {
		margin: 42px 0;
		font-size: 20px;
		line-height: 24px;
	}

	/* 42px au-dessus sur petit écran, comme la référence. */
	.baba-blog .navigation.baba-blog__pagination {
		margin-top: 42px;
	}

	/* Le retrait du conteneur passe à 21px : le bandeau doit s'en écarter
	   d'autant pour rester bord à bord. */
	.baba-article__hero {
		margin-left: -21px;
		margin-right: -21px;
	}

	/* Une seule colonne : la référence abandonne le collage, toutes les
	   cartes se ressemblent. */
	.baba-blog__grid {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.baba-article-card--large {
		grid-column: auto;
		text-align: left;
	}

	.baba-article-card__media,
	.baba-article-card--large .baba-article-card__media {
		height: 116px;
	}

	.baba-article-card__title.baba-article-card__title {
		font-size: 20px;
		line-height: 26px;
	}

	.baba-article-card__excerpt {
		font-size: 15.75px;
		line-height: 27.75px;
	}

	.baba-article-card--large .baba-article-card__excerpt {
		margin-left: 0;
		margin-right: 0;
	}

	.baba-article__title.baba-article__title {
		font-size: 20px;
		line-height: 26px;
	}

	.baba-article__content {
		font-size: 15.75px;
		line-height: 27.75px;
	}

	.baba-article__content h2 {
		font-size: 20px;
		line-height: 26px;
	}

	.baba-article__content h3 {
		font-size: 17px;
		line-height: 22.1px;
	}

	.baba-article__comments {
		margin-left: -21px;
		margin-right: -21px;
		padding-left: 21px;
		padding-right: 21px;
	}

	.baba-article__comments .comment-form {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
}