/**
 * Habachiya — Blog et articles (Flatsome)
 *
 * Parti pris : une revue savante, pas un blog. Le contenu cite une thèse de
 * pharmacie, des savants nommés, des fiches botaniques de l'INRAE. Pour un
 * acheteur qui hésite, le sérieux est le produit — la page doit le dire avant
 * d'être lue.
 *
 * Trois gestes portent le dessin :
 *   1. une manchette typographique, très grande, en serif ;
 *   2. une hiérarchie réelle entre l'article de une et les suivants ;
 *   3. dans l'article, des planches qui débordent la colonne.
 *
 * CONTRAINTE : le texte des articles appartient au client. Ce fichier ne
 * suppose aucune classe ajoutée dans leur contenu — uniquement le balisage
 * de Flatsome et les balises HTML d'origine.
 *
 * Chargé par hab_enqueue_styles() sur les articles, les archives et /blog/.
 */

:root {
	--hb-paper:    #F6F2FA;  /* papier teinté violet, jamais crème */
	--hb-ink:      #1B1620;
	--hb-ink-soft: #5B5265;
	--hb-plum:     #4A2D5E;
	--hb-plum-dim: #6B4D80;
	--hb-rule:     #DED5E8;
	--hb-amber:    #B8842B;

	/* Pile serif système : aucun appel réseau, aucune dépendance externe. */
	--hb-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
	            Georgia, "Times New Roman", serif;

	--hb-measure: 41rem;     /* ~68 caractères en serif */
}

body.single-post,
body.page-id-525,
body.blog,
body.archive {
	background-color: var(--hb-paper);
}

/* ===================================================================
   1. Nettoyage des automatismes du thème
   Flatsome met la catégorie et la date en capitales et centre le titre.
   Un titre français long avec une parenthèse en arabe, centré et capitalisé,
   devient illisible.
   =================================================================== */
body.single-post .entry-header-text,
body.single-post .entry-meta,
body.single-post .entry-content {
	text-align: left;
}

body.single-post .entry-category,
body.single-post .entry-meta,
body.page-id-525 .cat-label,
body.page-id-525 .post-meta {
	text-transform: none;
	letter-spacing: 0;
}

body.single-post .entry-divider,
body.page-id-525 .box-blog-post .is-divider {
	display: none;
}

/* ===================================================================
   2. L'article — en-tête
   =================================================================== */
/* L'article occupe toute la largeur du cadre blanc (#content > div > div,
   ombré par le CSS additionnel du Customizer). */
body.single-post .article-inner {
	max-width: none;
	margin: 0 auto;
	padding: 0 20px;
	background: transparent;
	box-shadow: none;
}

body.single-post .entry-header {
	padding: 56px 0 0;
	margin-bottom: 44px;
	border-bottom: 2px solid var(--hb-ink);
}

body.single-post .entry-category {
	margin: 0 0 16px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--hb-plum);
}

body.single-post .entry-category a {
	color: inherit;
	border-bottom: 1px solid transparent;
}

body.single-post .entry-category a:hover {
	border-bottom-color: currentColor;
}

body.single-post h1.entry-title {
	margin: 0 0 20px;
	font-family: var(--hb-serif);
	font-size: clamp(2.1rem, 1.1rem + 3.1vw, 3.3rem);
	font-weight: 400;
	line-height: 1.07;
	letter-spacing: -0.02em;
	color: var(--hb-ink);
	text-wrap: balance;
}

body.single-post .entry-meta {
	margin: 0 0 34px;
	font-family: var(--hb-serif);
	font-size: 0.92rem;
	font-style: italic;
	color: var(--hb-ink-soft);
}

body.single-post .entry-meta a {
	color: inherit;
}

body.single-post .entry-image {
	margin: 0 0 8px;
}

body.single-post .entry-image img {
	display: block;
	width: 100%;
	border-radius: 2px;
}

/* La pastille de date posée sur l'image fait doublon avec la ligne de méta. */
body.single-post .entry-image .badge {
	display: none;
}

/* ===================================================================
   3. Le corps de texte
   =================================================================== */
body.single-post .entry-content {
	font-family: var(--hb-serif);
	font-size: 1.11rem;
	line-height: 1.8;
	color: var(--hb-ink);
}

body.single-post .entry-content p {
	margin: 0 0 1.5em;
}

body.single-post .entry-content strong,
body.single-post .entry-content b {
	font-weight: 700;
	color: #120E16;
}

body.single-post .entry-content a {
	color: var(--hb-plum);
	text-decoration: underline;
	text-decoration-color: rgba(74, 45, 94, 0.35);
	text-underline-offset: 0.18em;
	overflow-wrap: anywhere; /* les URL des sources sont très longues */
}

body.single-post .entry-content a:hover {
	text-decoration-color: currentColor;
}

/* Le texte d'origine souligne les titres d'ouvrages. En typographie, un titre
   se compose en italique — le soulignement est un héritage de la machine à
   écrire. On corrige le rendu sans toucher au texte. */
body.single-post .entry-content u,
body.single-post .entry-content [style*="underline"] {
	text-decoration: none;
	font-style: italic;
}

/* ===================================================================
   4. Les planches botaniques
   Les <h3> du contenu sont des légendes de spécimen (« Nigella sativa »,
   « Graines de Cassia absus »). Composés comme tels : filet ambre, nom en
   italique. Les images débordent la colonne de texte pour créer le rythme.
   =================================================================== */
body.single-post .entry-content h3 {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 3em 0 1.1em;
	font-family: var(--hb-serif);
	font-size: 1.12rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
	color: var(--hb-ink);
}

body.single-post .entry-content h3::before {
	content: "";
	flex: 0 0 34px;
	height: 1px;
	background: var(--hb-amber);
	transform: translateY(-0.35em);
}

body.single-post .entry-content img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto 0.8em;
	background: #fff;
	border-radius: 2px;
}

body.single-post .entry-content figure {
	margin: 2em 0;
}

body.single-post .entry-content figcaption {
	margin-top: 0.8em;
	font-size: 0.92rem;
	font-style: italic;
	color: var(--hb-ink-soft);
}

/* Débord : au-delà de 1000px, les planches dépassent la mesure de lecture.
   C'est ce décalage qui donne au texte son rythme de revue. */
@media (min-width: 1000px) {
	/* Marge intérieure = débord des planches : les images touchent
	   exactement les bords du cadre, sans le dépasser. */
	body.single-post .article-inner,
	body.single-post footer.entry-meta,
	body.single-post .entry-author {
		padding-left: 3.5rem;
		padding-right: 3.5rem;
	}

	body.single-post .entry-content img,
	body.single-post .entry-content figure {
		width: calc(100% + 7rem);
		max-width: none;
		margin-left: -3.5rem;
	}

	body.single-post .entry-content figure img {
		width: 100%;
		margin-left: 0;
	}
}

/* ===================================================================
   5. Pied d'article
   =================================================================== */
body.single-post .blog-share {
	margin-top: 3em;
	padding-top: 1.4em;
	border-top: 1px solid var(--hb-rule);
	text-align: left;
}

body.single-post .blog-share .is-divider {
	display: none;
}

body.single-post footer.entry-meta {
	max-width: none;
	margin: 1.6em auto 0;
	padding: 0 20px;
	font-size: 0.88rem;
	color: var(--hb-ink-soft);
	text-align: left;
}

body.single-post .entry-author {
	max-width: none;
	margin: 2.6em auto;
	padding: 26px 20px 0;
	background: transparent;
	border-top: 1px solid var(--hb-rule);
}

body.single-post .next-prev-nav {
	border-top: 1px solid var(--hb-rule);
}

/* ===================================================================
   6. /blog/ — la manchette
   =================================================================== */
body.page-id-525 .hb-masthead h1 {
	font-family: var(--hb-serif);
	font-weight: 400;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

body.page-id-525 .hb-masthead p {
	font-family: var(--hb-serif);
}

/* ===================================================================
   7. /blog/ — les cartes
   Surface blanche posée sur le papier violet. L'ombre est construite en deux
   couches — un contact net juste sous la carte, une diffusion large et
   teintée prune — plutôt qu'un seul flou gris, qui aplatit tout.
   =================================================================== */
body.page-id-525 .hb-cards .post-item .col-inner {
	height: 100%;
}

body.page-id-525 .hb-cards .box-blog-post {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #FFFFFF;
	border: 1px solid rgba(74, 45, 94, 0.08);
	border-radius: 20px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(27, 22, 32, 0.05),
		0 10px 26px -14px rgba(74, 45, 94, 0.30);
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
	            box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

body.page-id-525 .hb-cards .box-blog-post:hover {
	transform: translateY(-6px);
	box-shadow:
		0 2px 4px rgba(27, 22, 32, 0.06),
		0 28px 50px -22px rgba(74, 45, 94, 0.45);
}

/* --- l'image ---
   Les `!important` ne sont pas du confort. flatsome.css contient, DANS
   `@media (min-width: 850px)`, une liste de sélecteurs destinée aux grilles
   `.grid-col` mais qui commence par un `.box-image` NU, sans portée :

       .box-image, .grid-col .box-image img, .grid-col .image-cover, … {
           position: absolute !important; padding: 0 !important;
           height: 100%; top: 0; bottom: 0;
       }

   Au-delà de 850 px, tout bloc image de Flatsome passe donc en position
   absolue. Il sort du flux, la carte ne lui réserve aucune hauteur, et le
   texte remonte comme s'il n'y avait pas d'image. Une déclaration sans
   `!important` perd contre celle-là.
   Symptôme trompeur : l'aperçu d'UX Builder est rendu sous 850 px, donc les
   images y sont correctes alors que le site public ne les montre pas.

   `flex: 0 0 auto` reste nécessaire par ailleurs : la hauteur du bloc vient
   d'un `padding-top` en pourcentage, et un tel bloc, en tant qu'élément flex,
   serait écrasé à zéro par `flex-shrink: 1`. */
body.page-id-525 .hb-cards .box-image {
	flex: 0 0 auto;
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	width: 100% !important;
	height: auto !important;
	overflow: hidden;
	border-radius: 0;
	background: #EDE6F3;
}

body.page-id-525 .hb-cards .box-image .image-cover {
	position: relative !important;
	height: auto !important;
	padding-top: 66% !important;
}

body.page-id-525 .hb-cards .box-image .image-cover img {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

body.page-id-525 .hb-cards .box-image img {
	border-radius: 0;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

body.page-id-525 .hb-cards .box-blog-post:hover .box-image img {
	transform: scale(1.05);
}

/* Voile dégradé en bas de l'image : il assoit la carte et évite que les
   photos claires se fondent dans la surface blanche. */
body.page-id-525 .hb-cards .box-image::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	background: linear-gradient(to top, rgba(27, 22, 32, 0.22), transparent);
	pointer-events: none;
}

/* --- le texte --- */
body.page-id-525 .hb-cards .box-text {
	display: flex;
	flex: 1 1 auto;
	padding: 26px 26px 28px !important;
}

body.page-id-525 .hb-cards .box-text-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}

/* La catégorie devient une pastille : un repère, pas une étiquette criée. */
body.page-id-525 .hb-cards .cat-label {
	align-self: flex-start;
	margin: 0 0 14px;
	padding: 5px 12px;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hb-plum);
	background: #F1EAF7;
	border-radius: 99px;
	text-transform: none;
	letter-spacing: 0;
	opacity: 1;
}

body.page-id-525 .hb-cards .post-title {
	margin: 0 0 10px;
	font-family: var(--hb-serif);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.26;
	letter-spacing: -0.012em;
	text-transform: none;
}

body.page-id-525 .hb-cards .post-title a {
	color: var(--hb-ink);
	transition: color 0.25s ease;
}

body.page-id-525 .hb-cards .box-blog-post:hover .post-title a {
	color: var(--hb-plum);
}

body.page-id-525 .hb-cards .post-meta {
	margin: 0 0 12px;
	font-family: var(--hb-serif);
	font-size: 0.86rem;
	font-style: italic;
	color: var(--hb-ink-soft);
	opacity: 1;
}

body.page-id-525 .hb-cards .from_the_blog_excerpt {
	margin: 0 0 22px;
	font-family: var(--hb-serif);
	font-size: 0.98rem;
	line-height: 1.68;
	color: var(--hb-ink-soft);
}

/* `margin-top: auto` colle le bouton au bas de la carte : les trois cartes
   s'alignent quelle que soit la longueur du titre ou de l'extrait.
   `align-self: center` le centre horizontalement, en accord avec le titre et
   l'extrait, eux aussi centrés. */
body.page-id-525 .hb-cards .box-blog-post .button {
	align-self: center;
	margin: auto 0 0;
	padding: 10px 22px;
	min-height: 0;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--hb-plum);
	background: transparent;
	border: 1px solid rgba(74, 45, 94, 0.28);
	border-radius: 99px;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	transition: background-color 0.25s ease, border-color 0.25s ease,
	            color 0.25s ease;
}

body.page-id-525 .hb-cards .box-blog-post .button:hover,
body.page-id-525 .hb-cards .box-blog-post:hover .button {
	color: #FFFFFF;
	background: var(--hb-plum);
	border-color: var(--hb-plum);
	box-shadow: none;
	transform: none;
}

body.page-id-525 .hb-cards .box-blog-post .is-divider {
	display: none;
}

/* ===================================================================
   9. Mobile et accessibilité
   =================================================================== */
@media (max-width: 849px) {
	body.page-id-525 .hb-cards .box-text {
		padding: 22px 20px 24px !important;
	}
}

@media (max-width: 640px) {
	body.single-post .entry-header {
		padding-top: 30px;
		margin-bottom: 30px;
	}

	body.single-post .entry-content {
		font-size: 1.05rem;
		line-height: 1.74;
	}

	body.single-post .entry-content h3 {
		margin-top: 2.4em;
	}
}

body.single-post a:focus-visible,
body.page-id-525 a:focus-visible {
	outline: 2px solid var(--hb-plum);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	body.single-post *,
	body.page-id-525 * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}