/*
 Theme Name:   Wellrootly Child
 Template:     twentytwentyfive
 Version:      1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&display=swap');

/* ============================================================
   Portée : tout le CSS custom est scopé sous .wp-site-blocks
   pour primer proprement sur les styles du thème parent,
   sans avoir recours à !important.
   ============================================================ */

.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks .wp-block-post-title,
.wp-site-blocks .wp-block-heading {
	font-family: 'Merriweather', serif;
	letter-spacing: -0.4px;
	font-weight: 900;
}

.wp-site-blocks .wp-block-post-terms {
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 0.5px;
	font-size: 12px;
}

.wp-site-blocks .wp-element-button {
	border-radius: 30px;
	font-weight: 800;
	padding: 14px 26px;
}

.wp-site-blocks .wr-section {
	padding-top: 50px;
	padding-bottom: 0;
}

.wp-site-blocks .wellrootly-scroll-row {
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	flex-wrap: nowrap;
	width: 100%;
	gap: 24px;
}
.wp-site-blocks .wellrootly-scroll-row > * {
	scroll-snap-align: start;
	flex-shrink: 0;
	margin-right: 24px;
}
.wp-site-blocks .wellrootly-scroll-row > *:last-child {
	margin-right: 0;
}

.wp-site-blocks .wr-hero-img-wrap {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 2/1;
}
.wp-site-blocks .wr-hero-img-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wp-site-blocks .wr-hero-badge {
	position: absolute;
	top: 24px;
	left: 24px;
	background: #111;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	padding: 6px 14px;
	border-radius: 22px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	z-index: 2;
	margin: 0;
}
.wp-site-blocks .wr-hero-title { font-size: 30px; line-height: 1.25; }
.wp-site-blocks .wr-hero-cat, .wp-site-blocks .wr-hero-cat a { font-size: 12px; font-weight: 800; color: #007060; text-transform: uppercase; letter-spacing: 0.8px; text-decoration: none; }
.wp-site-blocks .wr-hero-title a { text-decoration: none; color: inherit; }
.wp-site-blocks .wr-hero-text { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.wp-site-blocks .wr-hero-text > * { margin: 0; }
.wp-site-blocks .wr-hero-text .wp-block-buttons { margin-top: 8px; }
.wp-site-blocks .wr-hero-excerpt {
	font-size: 16px;
	color: #555;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wp-site-blocks .wr-hero-excerpt p { margin: 0; }

.wp-site-blocks .wr-nav-cats { gap: 28px; overflow-x: auto; margin-block-end: 0; }
.wp-site-blocks .wr-nav-cats-wrap {
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}
@media (min-width: 782px) {
	.wp-site-blocks .wr-nav-cats-wrap {
		padding-left: 60px;
		padding-right: 60px;
		max-width: 1240px;
		margin-left: auto;
		margin-right: auto;
	}
}
.wp-site-blocks .wr-nav-cats-wrap li { margin: 0; white-space: nowrap; }
.wp-site-blocks .wr-nav-cats-wrap a { color: #aaa; font-weight: 600; text-decoration: none; font-size: 14px; }
.wp-site-blocks .wr-nav-cats-wrap a:hover { color: #111; }
.wp-site-blocks .wr-nav-cats-wrap .wp-block-categories { margin: 0; }

/* Padding réduit spécifique à la section hero (pas les 50px par défaut de wr-section) */
.wp-site-blocks .wr-section-hero {
	padding-top: 20px;
}

/* Pills de filtre — Nos recommandations */
.wp-site-blocks .wr-reco-pills ul { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 24px; padding: 0; }
.wp-site-blocks .wr-reco-pills li { margin: 0; }
.wp-site-blocks .wr-reco-pills a {
	display: inline-block;
	padding: 9px 22px;
	border: 1.5px solid #222;
	border-radius: 32px;
	color: #222;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.wp-site-blocks .wr-reco-pills a:hover {
	background: #111;
	color: #fff;
	border-color: #111;
}

/* Coins arrondis sur les 4 angles, garantis même si figure/img ont un display par défaut différent */
.wp-site-blocks .wr-hero-img-wrap,
.wp-site-blocks .wr-hero-img-wrap figure,
.wp-site-blocks .wr-hero-img-wrap .wp-block-post-featured-image {
	border-radius: 18px;
	overflow: hidden;
}
.wp-site-blocks .wr-hero-img-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 18px;
	margin: 0;
}

/* Cartes "Explorer par besoin" — vraies images (block core/image), éditables */
.wp-site-blocks .wr-needs-img {
	width: 240px;
	height: 300px;
	margin: 0 0 10px 0;
}
.wp-site-blocks .wr-needs-img img {
	width: 100%;
	height: 100%;
	border-radius: 18px;
	object-fit: cover;
	display: block;
}
.wp-site-blocks .wr-needs-img a {
	display: block;
}


.wp-site-blocks .wr-cta-card.wp-block-columns { gap: 0; margin-top: 60px; }
.wp-site-blocks .wr-cta-body { display: flex; flex-direction: column; gap: 18px; }
.wp-site-blocks .wr-cta-body > * { margin: 0; }

.wp-site-blocks .wr-tend-side-title { font-size: 20px; padding-bottom: 12px; border-bottom: 2.5px solid #eaeae8; margin-bottom: 14px; }
.wp-site-blocks .wr-tend-thumb { width: 92px; height: 76px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.wp-site-blocks .wr-tend-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-site-blocks .wr-tend-row { padding: 14px 0; border-bottom: 1px solid #f0f0ee; }
.wp-site-blocks .wr-tend-row .wp-block-column > * { margin: 0 0 6px 0; }
.wp-site-blocks .wr-tend-row .wp-block-column > *:last-child { margin-bottom: 0; }
.wp-site-blocks .wr-tend-cat-small, .wp-site-blocks .wr-tend-cat-small a { font-size: 11px; font-weight: 800; color: #007060; text-transform: uppercase; text-decoration: none; }
.wp-site-blocks .wr-tend-title-small a { text-decoration: none; color: inherit; }
.wp-site-blocks .wr-tend-title-small { font-size: 14px; font-weight: 700; line-height: 1.38; }

.wp-site-blocks .wr-needs-card { width: 240px; }
.wp-site-blocks .wr-needs-label { font-size: 16px; font-weight: 700; margin-top: 10px; }

.wp-site-blocks .wr-cta-card {
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid #e4eef5;
	box-shadow: 0 8px 40px rgba(0,0,0,.09);
}
.wp-site-blocks .wr-cta-img { min-height: 340px; background-size: cover; background-position: center; background-color: #ddd; }
.wp-site-blocks .wr-cta-body {
	padding: 48px;
	background: linear-gradient(135deg, #007060 0%, #00594a 100%) !important;
	justify-content: space-between;
}
.wp-site-blocks .wr-cta-title { line-height: 1.3; color: #fff; }
.wp-site-blocks .wr-cta-ey { font-size: 11px; font-weight: 800; color: #dae8dd; text-transform: uppercase; letter-spacing: 1.2px; }
.wp-site-blocks .wr-cta-title { font-size: 30px; }
.wp-site-blocks .wr-cta-btn-outline {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
	font-weight: 700;
	border-radius: 9999px;
	display: inline-block;
}
.wp-site-blocks .wr-cta-btn-outline:hover {
	background: #fff;
	color: #007060;
}

.wp-site-blocks .wr-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 4px 11px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.2px; }
.wp-site-blocks .wr-badge-blue { background: #e8f4fc; color: #1a6ba0; }
.wp-site-blocks .wr-badge-green { background: #dcfce7; color: #166534; }
.wp-site-blocks .wr-reco-thumb { width: 120px; height: 96px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.wp-site-blocks .wr-reco-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-site-blocks .wr-reco-row { padding: 22px 0; border-bottom: 1px solid #f4f4f4; gap: 16px; }
.wp-site-blocks .wr-reco-row h3 { margin: 8px 0; }
.wp-site-blocks .wr-reco-voir-tout-wrap { margin-top: 32px; }
.wp-site-blocks .wr-reco-voir-tout {
	background: transparent;
	color: #111;
	border: 2px solid #111;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 22px;
	border-radius: 9999px;
	display: inline-block;
}
.wp-site-blocks .wr-reco-voir-tout:hover {
	background: #111;
	color: #fff;
}

.wp-site-blocks .wr-outil-card {
	background-color: #efefef;
	border-radius: 18px;
	padding: 32px 36px;
	display: flex;
	flex-direction: column;
}
.wp-site-blocks .wr-outil-card > * { margin: 0 0 10px 0; }
.wp-site-blocks .wr-outil-card .wp-block-buttons {
	margin-top: auto;
	padding-top: 24px;
	margin-bottom: 0;
}
.wp-site-blocks .wr-outil-ey { font-size: 11px; font-weight: 800; color: #007060; text-transform: uppercase; letter-spacing: 1px; }
.wp-site-blocks .wr-outil-card p:not(.wr-outil-ey) { color: #555; }
.wp-site-blocks .wr-outil-title { font-size: 24px; }

.wp-site-blocks .wr-newsletter { padding-top: 48px; padding-bottom: 48px; margin-top: 40px; }

/* Note : la contrainte de largeur "wide" (1340px) est gérée nativement par
   WordPress via .is-layout-constrained > .alignwide — aucune règle custom
   n'est nécessaire ici. Le vrai problème (contenu recompressé à 645px à
   l'intérieur des sections) a été corrigé en amont via layout:"flow". */

@media (max-width: 820px) {
	.wp-site-blocks .wr-hero-img-wrap { aspect-ratio: 4/3; }
	.wp-site-blocks .wr-hero-title { font-size: 22px; }
	.wp-site-blocks .wr-needs-img { width: 175px; height: 220px; }
	.wp-site-blocks .wr-needs-card { width: 175px; }
	.wp-site-blocks .wellrootly-scroll-row { gap: 14px; }
	.wp-site-blocks .wellrootly-scroll-row > * { margin-right: 14px; }
	.wp-site-blocks .wr-cta-body { padding: 28px 26px; }
	.wp-site-blocks .wr-cta-title { font-size: 22px; }
	.wp-site-blocks .wr-cta-btn-outline { padding: 10px 20px; font-size: 14px; }
	.wp-site-blocks .wr-outil-card { padding: 24px 22px; }
}

/* La pleine largeur est gérée nativement par WordPress via la classe
   "alignfull" — aucune règle custom nécessaire ici. */

/* ============ TICKER — défilement horizontal automatique et infini ============ */
.wr-ticker-viewport {
	overflow: hidden;
	width: 100%;
}
.wr-ticker-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 40px;
	width: max-content;
	animation: wr-ticker-scroll 25s linear infinite;
}
.wr-ticker-track p {
	white-space: nowrap;
	margin: 0;
	font-size: 13px;
}
@keyframes wr-ticker-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.wr-ticker-track { animation: none; }
}

/* ============ SUPPRESSION DES ESPACES — bandeau collé au header/footer ============ */
/* ============ SUPPRESSION DES ESPACES — entre header/main/footer (vrais frères) ============ */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main {
	margin-block-start: 0;
}
.wr-no-gap {
	margin-block-start: 0;
}
.wr-no-gap-bottom {
	margin-block-end: 0;
}

/* ============ PILLS — Nos recommandations (vrais liens statiques) ============ */
.wp-site-blocks .wr-reco-pills {
	gap: 10px;
	margin: 16px 0 24px;
}
.wp-site-blocks .wr-reco-pills p {
	margin: 0;
}
.wp-site-blocks .wr-reco-pills a {
	display: inline-block;
	padding: 9px 22px;
	border: 1.5px solid #222;
	border-radius: 32px;
	color: #222;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.wp-site-blocks .wr-reco-pills a:hover {
	background: #111;
	color: #fff;
	border-color: #111;
}

/* Liens des cartes Explorer par besoin */
.wp-site-blocks .wr-needs-label a {
	color: inherit;
	text-decoration: none;
}

header.wp-block-group.alignfull {
	padding-left: 14px;
	padding-right: 14px;
}
@media (min-width: 782px) {
	header.wp-block-group.alignfull {
		padding-left: clamp(30px, 5vw, 50px);
		padding-right: clamp(30px, 5vw, 50px);
	}
}
/* ============================================================
   RÈGLE GLOBALE — pas de soulignement par défaut sur les liens
   (le navigateur en ajoute un par défaut, WordPress ne le retire
   pas automatiquement hors de l'éditeur de blocs)
   ============================================================ */
.wp-site-blocks a {
	text-decoration: none;
}

/* ============================================================
   REMPLACEMENT DES STYLES AUTOMATIQUES DE WORDPRESS
   (normalement générés par l'éditeur de blocs, absents en PHP pur)
   ============================================================ */

/* Colonnes — comportement flex de base, identique à ce que fait WordPress nativement */
.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}
.wp-block-column {
	flex: 1;
	min-width: 0;
}
/* Colonnes à largeur explicite (flex-basis en %) : ne doivent jamais passer à la ligne
   sur desktop, sinon leurs pourcentages + le gap dépassent 100% */
@media (min-width: 782px) {
	.wp-block-columns {
		flex-wrap: nowrap;
	}
	.wp-block-column[style*="flex-basis"] {
		flex-grow: 0;
	}
}
@media (max-width: 781px) {
	.wp-block-columns { flex-wrap: wrap; }
	.wp-block-column { flex-basis: 100% !important; }
}

/* Boutons — alignement de base */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

/* display:flex déjà géré dans la règle consolidée plus haut */
.wp-site-blocks .wr-reco-pills {
	display: flex;
	flex-wrap: wrap;
}

/* Barre de catégories — affichage flex explicite (manquait) */
.wp-site-blocks .wr-nav-cats-wrap {
	display: flex;
	flex-wrap: nowrap;
	gap: 28px;
	overflow-x: auto;
}
.wp-site-blocks .wr-nav-cats-wrap p {
	margin: 0;
	white-space: nowrap;
}
.wp-site-blocks .wr-nav-cats-wrap a {
	color: #aaa;
	font-weight: 600;
	text-decoration: none;
	font-size: 14px;
}

/* (ancien résidu supprimé — la vraie règle .wr-needs-img est définie plus haut,
   avec sa variante mobile correctement appliquée) */

/* ============================================================
   MARGES LATÉRALES GLOBALES — garanties, indépendantes du système
   de padding automatique de WordPress (absent hors éditeur de blocs)
   ============================================================ */
.wp-site-blocks main.wp-block-group {
	padding-left: 12px;
	padding-right: 12px;
}
@media (min-width: 782px) {
	.wp-site-blocks main.wp-block-group {
		padding-left: clamp(30px, 5vw, 50px);
		padding-right: clamp(30px, 5vw, 50px);
	}
}

/* Espacement vertical entre sections sur mobile */
@media (max-width: 781px) {
	.wp-site-blocks .wr-section {
		padding-top: 28px;
		margin-bottom: 0;
	}
	.wp-site-blocks .wr-section-hero {
		padding-top: 16px;
	}
}

/* Le header/footer/bandeaux pleine largeur ne doivent PAS hériter
   de ce padding latéral (ils doivent rester bord à bord) */
.wp-site-blocks main.wp-block-group > .alignfull {
	margin-left: -12px;
	margin-right: -12px;
}
@media (min-width: 782px) {
	.wp-site-blocks main.wp-block-group > .alignfull {
		margin-left: clamp(-50px, -5vw, -30px);
		margin-right: clamp(-50px, -5vw, -30px);
	}
}

/* ============================================================
   FILET DE SÉCURITÉ — marges garanties sur Outils santé, Newsletter,
   Footer (indépendant du système de classes automatique de WordPress
   qui ne s'applique pas hors de l'éditeur de blocs)
   ============================================================ */
.wp-site-blocks .wr-outil-card,
.wp-site-blocks .wr-newsletter > .wp-block-columns,
.wp-site-blocks footer > div {
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}
@media (min-width: 782px) {
	.wp-site-blocks .wr-newsletter > .wp-block-columns,
	.wp-site-blocks footer > div {
		padding-left: clamp(30px, 5vw, 50px);
		padding-right: clamp(30px, 5vw, 50px);
		max-width: 1340px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Taille de texte normale (pas la taille "large" du corps par défaut du thème) */
.wp-site-blocks .wr-outil-card p,
.wp-site-blocks .wr-newsletter p,
.wp-site-blocks footer p,
.wp-site-blocks footer a {
	font-size: 15px;
}
.wp-site-blocks .wr-newsletter h3 {
	font-size: 22px;
}

/* ============================================================
   CONTENEUR UNIQUE — max-width 1240px partout, comme HerbForge
   (remplace la dépendance à "alignwide" de WordPress, peu fiable
   en PHP pur, par une règle explicite et garantie)
   ============================================================ */
.wp-site-blocks .wr-section {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}
@media (min-width: 782px) {
	.wp-site-blocks .wr-section {
		padding-left: 60px;
		padding-right: 60px;
	}
}

/* Le reset "> *" plus haut gère déjà l'espacement des cartes outils */

/* ============================================================
   TEMPLATE ARTICLE (single.php) — valeurs exactes du vrai CSS
   HerbForge (.hfa-*), extraites de leur code source réel
   ============================================================ */
.hfa-page{
	--p:#007060;--pl:#e6f4f1;--pm:#b2d8d0;
	--warm:#fbf5ed;--warmb:#e0c9a0;
	--txt:#1a1a1a;--muted:#6b7280;--br:#e5e7eb;
}
.hfa-hero-outer{max-width:800px;margin:32px auto 0;padding:0 24px;}
.hfa-hero-inner{border-radius:18px;overflow:hidden;aspect-ratio:16/9;}
.hfa-hero-inner img{width:100%;height:100%;object-fit:cover;display:block;}

.hfa-crumb{max-width:740px;margin:0 auto;padding:14px 24px;font-size:13px;color:#9ca3af;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.hfa-crumb a{color:var(--p);font-weight:600;text-decoration:none;}
.hfa-crumb a:hover{text-decoration:underline;}
.hfa-crumb-cur{color:#374151;font-weight:500;}

.hfa-container{max-width:740px;margin:0 auto;padding:0 24px 64px;}

.hfa-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;margin-top:20px;}
.hfa-bdg{font-size:11px;font-weight:800;padding:5px 12px;border-radius:6px;text-decoration:none;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;}
.hfa-bdg-dark{background:#111;color:#fff;}
.hfa-bdg-green{background:#dcfce7;color:#166534;}

.hfa-h1{font-family:'Merriweather',serif;font-size:32px;font-weight:900;color:var(--txt);line-height:1.25;letter-spacing:-.4px;margin:0 0 16px;}

.hfa-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding-bottom:24px;border-bottom:1px solid var(--br);}
.hfa-sep{color:#d1d5db;}

.hfa-body{padding:4px 0 28px;}
.hfa-body p{font-size:18px;line-height:1.8;color:#1f2937;margin:0 0 28px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;text-align:justify;}
.hfa-body h2{font-family:'Merriweather',serif;font-size:26px;font-weight:900;color:var(--txt);line-height:1.3;letter-spacing:-.3px;margin:48px 0 18px;padding:0;border:none;}
.hfa-body h3{font-family:'Merriweather',serif;font-size:21px;font-weight:700;color:var(--txt);line-height:1.35;letter-spacing:-.2px;margin:36px 0 14px;padding:0;border:none;}
.hfa-body h4{font-size:18px;font-weight:700;color:var(--txt);margin:28px 0 10px;}
.hfa-body ul,.hfa-body ol{font-size:17px;line-height:1.8;color:#1f2937;margin:0 0 28px 0;padding:16px 20px 16px 42px;background:#f0f8f6;border-radius:12px;border-left:4px solid var(--pm);}
.hfa-body ul ul,.hfa-body ol ol,.hfa-body ul ol,.hfa-body ol ul{background:none;border:none;border-radius:0;padding:6px 0 0 20px;margin:6px 0 0 0;}
.hfa-body li{margin-bottom:10px;}
.hfa-body li:last-child{margin-bottom:0;}
.hfa-body ul>li::marker{color:var(--p);}
.hfa-body a{color:var(--p);text-decoration:underline;text-underline-offset:3px;}
.hfa-body a:hover{text-decoration:none;}
.hfa-body strong{font-weight:700;color:#111;}
.hfa-body blockquote{border-left:4px solid var(--p);background:var(--pl);padding:20px 24px;border-radius:0 14px 14px 0;margin:28px 0;font-size:17px;line-height:1.75;color:#134e3a;font-style:italic;}
.hfa-body img{border-radius:12px;margin:28px 0;max-width:100%;height:auto;}
.hfa-body figure{margin:32px 0;}
.hfa-body figure img{margin:0;}
.hfa-body figcaption{font-size:13px;color:#9ca3af;text-align:center;margin-top:10px;font-style:italic;line-height:1.5;}
.hfa-body table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.07);}
.hfa-body table th{background:var(--p);color:#fff;padding:13px 16px;text-align:left;font-weight:700;font-size:14px;}
.hfa-body table td{padding:12px 16px;border-bottom:1px solid #f3f4f6;color:#374151;vertical-align:top;}
.hfa-body table tr:nth-child(even) td{background:#f0fdf8;}

.hfa-disclaimer{display:flex;gap:14px;align-items:flex-start;background:var(--warm);border:1.5px solid var(--warmb);border-radius:14px;padding:18px 20px;margin:28px 0;}
.hfa-disclaimer span{font-size:18px;flex-shrink:0;margin-top:1px;}
.hfa-disclaimer p{font-size:14px;color:#78350f;line-height:1.7;margin:0;}

.hfa-related{background:#f9fafb;padding:56px 0;border-top:1px solid var(--br);margin-top:48px;}
.hfa-related-in{max-width:740px;margin:0 auto;padding:0 24px;}
.hfa-related-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:16px;}
.hfa-related-title{font-family:'Merriweather',serif;font-size:22px;font-weight:900;color:var(--txt);margin:0;border-left:4px solid var(--p);padding-left:16px;line-height:1.3;}
.hfa-related-all{color:var(--p);font-weight:600;text-decoration:none;font-size:1rem;white-space:nowrap;}
.hfa-related-all:hover{text-decoration:underline;}
.hfa-related-list{display:flex;flex-direction:column;}
.hfa-rel-row{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid #e0e3e1;align-items:center;}
.hfa-rel-row:last-child{border-bottom:none;}
.hfa-rel-row-img{display:block;width:120px;height:120px;overflow:hidden;border-radius:4px;}
.hfa-rel-row-img img{width:100%;height:100%;object-fit:cover;display:block;}
.hfa-rel-row-bd{display:flex;flex-direction:column;gap:6px;}
.hfa-rel-row-cat{color:var(--p);font-weight:600;font-size:.95rem;text-decoration:none;}
.hfa-rel-row-cat:hover{text-decoration:underline;}
.hfa-rel-row-title{font-family:'Merriweather',serif;font-size:1.15rem;font-weight:700;line-height:1.35;margin:0;color:#111;}
.hfa-rel-row-title a{color:inherit;text-decoration:none;}
.hfa-rel-row-title a:hover{color:var(--p);}

@media(max-width:767px){
	.hfa-hero-outer{padding:0 16px;margin-top:20px;}
	.hfa-hero-inner{border-radius:14px;aspect-ratio:4/3;}
	.hfa-crumb{padding:10px 20px;font-size:12px;}
	.hfa-container{padding:0 20px 48px;}
	.hfa-h1{font-size:24px;line-height:1.25;margin-bottom:14px;}
	.hfa-meta{font-size:12px;gap:6px;}
	.hfa-body p{font-size:17px;line-height:1.75;margin-bottom:22px;}
	.hfa-body h2{font-size:21px;margin:36px 0 14px;}
	.hfa-body h3{font-size:18px;margin:28px 0 12px;}
	.hfa-body ul,.hfa-body ol{font-size:16px;line-height:1.75;margin-bottom:22px;padding:14px 16px 14px 36px;}
	.hfa-body li{margin-bottom:8px;}
	.hfa-body table{display:block;overflow-x:auto;font-size:13px;}
	.hfa-rel-row{grid-template-columns:100px 1fr;gap:16px;padding:16px 0;}
	.hfa-rel-row-img{width:100px;height:100px;}
	.hfa-rel-row-title{font-size:1rem;}
	.hfa-related-title{font-size:1.4rem;}
}
@media(min-width:768px)and(max-width:1100px){
	.hfa-hero-outer,.hfa-crumb,.hfa-container,.hfa-related-in{padding-left:40px;padding-right:40px;}
	.hfa-h1{font-size:28px;}
}

/* ============================================================
   TEXTE JUSTIFIÉ PARTOUT (paragraphes uniquement, jamais les titres)
   — exactement comme le vrai CSS HerbForge
   ============================================================ */
.wp-site-blocks p {
	text-align: justify;
}

/* ============================================================
   TEMPLATE PAGE CATÉGORIE — grille façon Healthline
   ============================================================ */
.wp-site-blocks .wr-cat-header {
	padding-top: 40px;
	padding-bottom: 24px;
	border-bottom: 1px solid #eee;
}
.wp-site-blocks .wr-cat-title {
	font-size: 34px;
	margin: 0 0 8px;
}
.wp-site-blocks .wr-cat-desc {
	color: #555;
	font-size: 16px;
	max-width: 700px;
}
.wp-site-blocks .wr-cat-desc p {
	margin: 0;
}

.wp-site-blocks .wr-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	padding-top: 32px;
}
@media (max-width: 900px) {
	.wp-site-blocks .wr-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.wp-site-blocks .wr-cat-grid { grid-template-columns: 1fr; }
}

.wp-site-blocks .wr-cat-card {
	display: flex;
	flex-direction: column;
}
.wp-site-blocks .wr-cat-card-img {
	display: block;
	aspect-ratio: 4/3;
	border-radius: 14px;
	overflow: hidden;
	background: #eee;
	margin-bottom: 14px;
}
.wp-site-blocks .wr-cat-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wp-site-blocks .wr-cat-card-img-placeholder {
	width: 100%;
	height: 100%;
	background: #eee;
}
.wp-site-blocks .wr-cat-card-cat {
	font-size: 11px;
	font-weight: 800;
	color: #007060;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	text-decoration: none;
}
.wp-site-blocks .wr-cat-card-title {
	font-size: 19px;
	margin: 8px 0 8px;
	line-height: 1.35;
}
.wp-site-blocks .wr-cat-card-title a {
	color: inherit;
	text-decoration: none;
}
.wp-site-blocks .wr-cat-card-excerpt {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
}
.wp-site-blocks .wr-cat-card-excerpt p {
	margin: 0;
}

.wp-site-blocks .wr-cat-pagination {
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 48px 0;
}
.wp-site-blocks .wr-cat-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 8px;
	color: #111;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}
.wp-site-blocks .wr-cat-pagination .page-numbers.current {
	background: #111;
	color: #fff;
}