/*
 * single-article.css — style du CORPS d'un article du journal (contenu natif).
 *
 * Chargé UNIQUEMENT sur is_singular('post') (cf. functions.php,
 * mein_enqueue_single_article_assets). Deux responsabilités, toutes deux SCOPÉES
 * pour ne pas affecter le reste du site :
 *
 *   1. .mein-article__cover  — cadre stylé de l'image à la une (arrondie, ombrée).
 *   2. .mein-article-body    — typographie du corps (wp:post-content), fidèle à la
 *      section CORPS de la maquette « Article ».
 *
 * Réutilise les tokens de theme.json (couleurs / polices) plutôt que des hex en
 * dur quand un token équivalent existe.
 */

/* =========================================================================
 * 1. Image à la une (cadre)
 * ====================================================================== */

.mein-article__cover {
	margin-top: clamp(8px, 2vw, 20px);
	margin-bottom: clamp(20px, 3vw, 36px);
}

.mein-article__cover .wp-block-post-featured-image {
	margin: 0;
}

.mein-article__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
	box-shadow: 0 30px 70px -38px rgba(74, 63, 53, 0.4);
}

/* Aucun visuel : le cadre disparaît proprement (pas de bloc vide ombré). */
.mein-article__cover:not(:has(img)) {
	display: none;
}

/* =========================================================================
 * 2. Corps de l'article (contenu natif wp:post-content)
 * ====================================================================== */

/* Paragraphes courants (Mulish). */
.mein-article-body p {
	margin: 0 0 22px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.8;
	color: var(--wp--preset--color--texte);
	text-wrap: pretty;
}

/* Premier paragraphe = accroche (lead) en Cormorant. */
.mein-article-body p:first-of-type {
	margin-bottom: 36px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(20px, 2.4vw, 27px);
	line-height: 1.5;
	color: var(--wp--preset--color--texte-sombre);
}

/*
 * Garde du chapô : le lead ne vaut QUE si l'article commence VRAIMENT par un
 * paragraphe.
 *
 * « p:first-of-type » désigne le premier <p> parmi ses frères, pas le premier
 * élément du corps. Un article ouvert par un titre, une image, une liste ou un
 * séparateur verrait donc son premier paragraphe promu chapô à tort (gros
 * Cormorant au milieu du texte). On rétablit alors le paragraphe courant.
 *
 * Le sélecteur est volontairement limité aux enfants DIRECTS du conteneur de
 * contenu : un paragraphe de citation reste hors d'atteinte de cette règle et
 * garde son style propre (sinon la spécificité, plus élevée ici, l'écraserait).
 */
.mein-article-body .wp-block-post-content > p:first-of-type:not(:first-child) {
	margin-bottom: 22px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.8;
	color: var(--wp--preset--color--texte);
}

/* Sous-titres H2 (Cormorant). */
.mein-article-body h2 {
	margin: 44px 0 18px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: clamp(25px, 3vw, 36px);
	line-height: 1.15;
	color: var(--wp--preset--color--titres);
	text-wrap: balance;
}

/*
 * Sous-titres H3 (Cormorant) — même famille et même graisse que le H2, un cran
 * plus bas en taille et en rythme vertical, pour que la descente H2 > H3 se lise
 * sans ambiguïté (WCAG 1.3.1 : la hiérarchie visuelle doit refléter la
 * hiérarchie sémantique).
 */
.mein-article-body h3 {
	margin: 34px 0 14px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: clamp(21px, 2.2vw, 27px);
	line-height: 1.25;
	color: var(--wp--preset--color--titres);
	text-wrap: balance;
}

/*
 * Sous-titres H4 — bascule volontaire en Mulish gras.
 *
 * Au quatrième niveau, continuer à réduire le Cormorant l'amènerait à la taille
 * du corps de texte : le titre ne se distinguerait plus. Le changement de famille
 * (serif -> sans) et la graisse 700 rendent le niveau lisible sans ajouter une
 * taille supplémentaire à l'échelle.
 */
.mein-article-body h4 {
	margin: 28px 0 10px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--titres);
	text-wrap: balance;
}

/* Listes à puces : pastille sauge en ::before (puce native retirée). */
.mein-article-body ul {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

/*
 * Corps des puces, commun aux listes à puces et aux listes numérotées : même
 * taille, même interligne, même gouttière, pour que les deux listes paraissent
 * dessinées d'un seul tenant.
 *
 * Note : la couleur était écrite en dur (#5e544a). Elle passe au token
 * équivalent le plus proche, --texte (#6B6157), pour respecter la règle « pas de
 * hex en dur » sans dupliquer la valeur sur la liste numérotée. L'écart visuel
 * est de l'ordre de 3 % de luminosité ; le contraste sur le fond sable reste
 * largement conforme (mesuré 5,3:1, AA exige 4,5:1).
 */
.mein-article-body ul li,
.mein-article-body ol li {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	font-size: clamp(15.5px, 1.5vw, 17.5px);
	line-height: 1.6;
	color: var(--wp--preset--color--texte);
}

.mein-article-body ul li::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-top: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--sauge-clair);
}

/*
 * Listes numérotées : même construction que la liste à puces, le numéro
 * remplaçant la pastille. Le compteur CSS (et non la puce native) permet de
 * poser le chiffre en Cormorant, comme les titres, tout en gardant l'alignement
 * et la gouttière de la liste à puces.
 *
 * Couleur du chiffre : --sauge-fonce et non --sauge. Le sauge primaire ne donne
 * que 4,1:1 sur le fond sable, sous le seuil AA de 4,5:1 pour du texte de cette
 * taille ; le sauge foncé mesure 5,3:1.
 */
.mein-article-body ol {
	counter-reset: mein-article-puce;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.mein-article-body ol li {
	counter-increment: mein-article-puce;
}

.mein-article-body ol li::before {
	content: counter(mein-article-puce) ".";
	flex: 0 0 auto;
	min-width: 1.35em;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 1.15em;
	line-height: 1.35;
	color: var(--wp--preset--color--sauge-fonce);
	font-variant-numeric: tabular-nums;
}

/*
 * Listes imbriquées : le <li> étant une boîte flex (puce + texte), une
 * sous-liste s'y placerait en troisième colonne, à côté du texte. On l'oblige à
 * passer à la ligne et on la décale, sans toucher aux listes simples.
 */
.mein-article-body li:has(> ul),
.mein-article-body li:has(> ol) {
	flex-wrap: wrap;
}

.mein-article-body li > ul,
.mein-article-body li > ol {
	flex: 0 0 100%;
	margin: 13px 0 0;
	padding-left: 20px;
}

/* Citation : filet gauche sauge, Cormorant italique. */
.mein-article-body blockquote {
	margin: 36px 0;
	padding: 6px 0 6px 26px;
	border-left: 3px solid var(--wp--preset--color--sauge-brumeux);
}

.mein-article-body blockquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: clamp(21px, 2.4vw, 28px);
	line-height: 1.45;
	color: var(--wp--preset--color--sauge);
	text-wrap: pretty;
}

/* Le paragraphe interne d'une citation est first-of-type de son blockquote : on
 * neutralise le style « lead » pour qu'il garde bien l'aspect citation. */
.mein-article-body blockquote p:first-of-type {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: clamp(21px, 2.4vw, 28px);
	line-height: 1.45;
	color: var(--wp--preset--color--sauge);
}

/*
 * Image insérée dans le corps du texte.
 *
 * Rappel du cadre : l'image À LA UNE est traitée plus haut (.mein-article__cover,
 * 980px, arrondi 24px, ombre). Ici, il s'agit des images posées PAR la rédactrice
 * au fil du texte : elles vivent dans la colonne de lecture (720px) et adoptent
 * un arrondi plus discret, sans ombre, pour ne pas concurrencer la une.
 *
 * « margin: 36px auto » et non « 36px 0 » : le conteneur est en layout
 * « constrained », qui centre ses enfants par marges automatiques. Mettre 0 sur
 * l'axe horizontal décentrerait la figure.
 */
.mein-article-body .wp-block-image {
	margin: 36px auto;
}

/* Idem sur l'image elle-même : plus étroite que la colonne, elle se cale au
   centre, comme sa légende, au lieu de rester collée à gauche. */
.mein-article-body .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: 18px;
}

/*
 * Légende. Couleur --texte et non --texte-discret : ce gris sable ne mesure que
 * 2,8:1 sur le fond, très en dessous du seuil AA. La légende se distingue donc
 * par la taille et l'italique, pas par un gris trop clair (WCAG 1.4.3).
 */
.mein-article-body .wp-block-image figcaption {
	margin: 12px 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-style: italic;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--texte);
	text-align: center;
	text-wrap: pretty;
}

/*
 * Garde-fou de largeur : une image ne sort jamais de la colonne de texte.
 *
 * Les alignements « large » et « pleine largeur » restent proposés par l'éditeur.
 * Dans le corps d'un article ils casseraient la colonne de lecture (le pleine
 * largeur applique même des marges négatives pour déborder du padding global).
 * On les ramène à la largeur du texte. Sélecteur en enfant direct du contenu :
 * il passe ainsi devant les règles de layout générées par le cœur, quel que soit
 * l'ordre d'impression des feuilles.
 */
.mein-article-body .wp-block-post-content > .wp-block-image.alignwide,
.mein-article-body .wp-block-post-content > .wp-block-image.alignfull {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Sur mobile, une image flottante à côté du texte ne laisse plus de place
   lisible : elle repasse dans le flux. */
@media (max-width: 599px) {
	.mein-article-body .wp-block-image.alignleft,
	.mein-article-body .wp-block-image.alignright {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
}

/*
 * Séparateur : filet court centré, respiration franche avant et après.
 *
 * Reprend le sauge clair de la pastille des listes pour rester dans la même
 * famille de signes. Élément purement décoratif (<hr> sans contenu) : il n'est
 * porteur d'aucune information et ne relève donc pas du seuil de contraste 1.4.11,
 * d'où un ton volontairement doux (mesuré 2,8:1 sur le fond sable).
 *
 * La règle porte sur « > hr.wp-block-separator » : le cœur cible la largeur avec
 * trois classes (.wp-block-separator:not(.is-style-wide):not(.is-style-dots)),
 * il faut donc passer devant sans recourir à !important.
 */
.mein-article-body .wp-block-post-content > hr.wp-block-separator {
	width: 88px;
	height: 2px;
	margin: 44px auto;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--sauge-clair);
	opacity: 1;
}

/* Variante « large » : le filet occupe la colonne de lecture. */
.mein-article-body .wp-block-post-content > hr.wp-block-separator.is-style-wide {
	width: 100%;
}

/* Variante « points » : on rend la main au rendu du cœur (::before typographique),
   en lui donnant simplement la couleur du thème. */
.mein-article-body .wp-block-post-content > hr.wp-block-separator.is-style-dots {
	width: auto;
	height: auto;
	background: none;
	color: var(--wp--preset--color--sauge-clair);
}