/* ============================================================
   Cbdconnection — Page d'accueil
   Réutilise toutes les variables (couleurs, typo, espaces) de main.css.
   Chaque section est isolée et commentée — désactivable côté PHP via le
   filtre `cbdco_hp_sections`.
   ============================================================ */

/* ============================================================
   GLOBAL — wrapper homepage et alignements
   ============================================================ */
.hp { background: var(--bg-0); }

/* Titres de bloc de la home : anthracite plein, comme le thème d'origine.
   Un titre coloré à chaque section met la page en concurrence avec elle-même ;
   la couleur d'accent est portée par l'eyebrow au-dessus et par les CTA. */
.hp :is(
	.hp-shead__title,
	.hp-prodrow__title,
	.hp-advice__title,
	.hp-video__title,
	.hp-blog-card__title,
	.hp-pillar__title
) {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--text);
}
/* Le mot mis en emphase dans un titre prend l'accent vert. */
.hp :is(
	.hp-shead__title em,
	.hp-prodrow__title em
) {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--gold);
}
.hp__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}
/* Spacing vertical uniforme pour TOUTES les sections de la home — le top et le
   bottom sont identiques sur chaque section, et égaux entre toutes les sections,
   pour une cadence visuelle régulière de bloc en bloc. */
.hp section {
	padding: 28px 0;
}
@media (max-width: 768px) {
	.hp section { padding: 20px 0; }
	.hp__inner { padding: 0 var(--container-px, 12px); }
}

/* En-têtes de section (eyebrow + h2 + lien à droite) */
.hp-shead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.hp-shead__title {
	font-family: var(--font-display);
	font-weight: 600;
	/* Titres de section volontairement plus sobres : le pavé de 30px écrasait
	   le contenu des sections sur la page d'accueil. */
	font-size: clamp(19px, 1.7vw, 24px);
	letter-spacing: -0.005em;
	margin: 0;
	color: var(--text);
}
.hp-shead__title em {
	font-style: normal;
	color: var(--gold);
}
.hp-shead__eyebrow {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.25em;
	color: var(--gold);
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
/* Même filet vert que les sections « Meilleures ventes » / « CBD+ ». */
.hp-shead__eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--gold);
	border-radius: 2px;
	flex: 0 0 auto;
}
/* Lien d'en-tête de section rendu comme un vrai bouton, pour coller aux
   sections « Meilleures ventes » et « CBD+ » qui ont un bouton plein. */
.hp-shead__link {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 9px 16px;
	border-radius: 6px;
	background: var(--green, #2d4a2d);
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	text-decoration: none !important;
	transition: background .18s ease;
}
.hp-shead__link:hover {
	background: #3a5c3a;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
}

/* ============================================================
   SECTION 1 — HERO (une seule bannière, pleine largeur du contenu)
   ============================================================ */
/* La bannière reste dans la largeur du contenu (comme le reste de la home) :
   même gouttière que les sections produits, pas de débord plein écran. */
.hp-hero {
	display: block;
}
.hp-hero__main {
	position: relative;
	display: block;
	width: 100%;
	background: transparent;
	border: 0;
	color: var(--text);
}
/* Image en taille réelle (ratio respecté) : aucun recadrage, hauteur libre.
   Coins arrondis au même rayon que les pastilles du header (8px). */
.hp-hero__main { border-radius: 8px; overflow: hidden; }
.hp-hero__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: high-quality;
}

/* ============================================================
   SECTION 2 — BARRE TRUSTPILOT (top et rappel)
   ============================================================ */
.hp-trust {
	padding: 14px 0 !important;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--bg-1);
	position: relative;
	overflow: hidden;
}
@media (max-width: 768px) {
	.hp-trust { padding: 10px 0 !important; }
}
.hp-trust::before {
	content: '';
	position: absolute;
	top: 0; left: -40%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(201,230,201, 0.12) 45%, rgba(201,230,201, 0.22) 50%, rgba(201,230,201, 0.12) 55%, transparent 100%);
	pointer-events: none;
	transform: skewX(-18deg);
	animation: cbdco-trust-sheen 6s ease-in-out infinite;
	z-index: 0;
}
@keyframes cbdco-trust-sheen {
	0%   { left: -40%; }
	60%  { left: 110%; }
	100% { left: 110%; }
}
.hp-trust__row {
	display: flex; align-items: center; justify-content: center;
	gap: 12px; flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--text-dim);
	font-family: var(--font-mono);
	letter-spacing: 0.04em;
	position: relative;
	z-index: 1;
}
.hp-trust__dot { color: var(--text-mute); opacity: 0.7; }
.hp-trust__stars {
	position: relative;
	display: inline-block;
	font-family: ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
	letter-spacing: 2.4px;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
}
.hp-trust__stars-empty,
.hp-trust__stars-full {
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	white-space: nowrap;
}
.hp-trust__stars-empty {
	display: inline-block;
	color: var(--text-dim);
}
.hp-trust__stars-full {
	position: absolute;
	left: 0; top: 0;
	overflow: hidden;
	color: var(--star);
	text-shadow: 0 0 10px rgba(122,184,122, 0.45);
	pointer-events: none;
}
.hp-trust__rating {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.005em;
	font-variant-numeric: tabular-nums;
	color: var(--text);
}
.hp-trust__rating-out {
	font-size: 11.5px;
	font-weight: 500;
	margin-left: 2px;
	color: var(--text-mute);
	-webkit-text-fill-color: var(--text-mute);
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
}
.hp-trust__count { color: var(--text); font-size: 12.5px; }
.hp-trust__count strong {
	color: var(--text);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}
.hp-trust__link {
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, color .2s ease;
}
.hp-trust__link:hover {
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	border-bottom-color: var(--gold);
}
.hp-trust__logo {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.03em;
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.hp-trust__logo svg { stroke: var(--gold); }
.hp-trust__logo > span { color: inherit; -webkit-text-fill-color: inherit; }

/* === Variante mise en avant — carte 3 colonnes (note · brand · count) === */
.hp-trust--featured { background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hp-trust__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	max-width: 920px;
	margin: 0 auto;
	padding: 22px 32px;
	border-radius: 18px;
	background:
		linear-gradient(rgba(245,240,232,0.78), rgba(245,240,232,0.78)) padding-box,
		linear-gradient(135deg, rgba(201,230,201, 0.55), rgba(78,125,78, 0.32) 60%, rgba(201,230,201, 0.5)) border-box;
	border: 1px solid transparent;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(245,240,232,0.032);
	overflow: hidden;
}
.hp-trust__sheen {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(120% 80% at 50% -10%, rgba(201,230,201, 0.18), transparent 55%);
	opacity: 0.85;
}
.hp-trust__sep {
	width: 1px;
	height: 56px;
	background: linear-gradient(180deg, transparent, rgba(201,230,201, 0.35) 50%, transparent);
	flex-shrink: 0;
}
.hp-trust__cell {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	position: relative;
	z-index: 1;
}
.hp-trust__cell--badge { justify-content: flex-start; }
.hp-trust__cell--rating { flex-direction: column; gap: 6px; align-items: center; justify-content: center; text-align: center; }
.hp-trust__cell--count { flex-direction: column; gap: 2px; align-items: flex-end; text-align: right; }

.hp-trust__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 50%, var(--gold-dark) 100%);
	color: var(--btn-fg);
	flex-shrink: 0;
	box-shadow: 0 4px 14px rgba(122,184,122, 0.35), inset 0 1px 0 rgba(245,240,232,0.32);
}
.hp-trust__badge-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.hp-trust__eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-mute);
	margin-bottom: 2px;
}
.hp-trust__brand {
	font-family: var(--font-display);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hp-trust__num { display: flex; align-items: baseline; gap: 3px; font-family: var(--font-display); font-variant-numeric: tabular-nums; line-height: 1; }
.hp-trust__num-big {
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -0.02em;
	background: linear-gradient(180deg, #e8f0e8 0%, var(--gold-soft) 60%, var(--gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.hp-trust__num-out {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-mute);
	letter-spacing: 0.02em;
}
.hp-trust__stars-xl {
	position: relative;
	font-size: 17px;
	letter-spacing: 3px;
	line-height: 1;
}
.hp-trust__stars-bg { color: var(--text-dim); display: inline-block; }
.hp-trust__stars-fill {
	position: absolute;
	left: 0; top: 0;
	overflow: hidden;
	white-space: nowrap;
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--star);
}

.hp-trust__count-num {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--text);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1;
}
.hp-trust__count-lbl {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.hp-trust__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(201,230,201, 0.08);
	border: 1px solid rgba(201,230,201, 0.30);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--gold-soft);
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, transform .15s ease;
}
.hp-trust__cta:hover {
	background: rgba(201,230,201, 0.16);
	border-color: rgba(201,230,201, 0.55);
	transform: translateX(2px);
	color: var(--gold);
}
.hp-trust__cta svg { transition: transform .15s ease; }
.hp-trust__cta:hover svg { transform: translateX(2px); }

@media (max-width: 780px) {
	.hp-trust__card {
		grid-template-columns: 1fr;
		padding: 20px 18px;
		gap: 16px;
	}
	.hp-trust__sep { width: 90%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,230,201, 0.3) 50%, transparent); margin: 0 auto; }
	.hp-trust__cell--badge,
	.hp-trust__cell--count { justify-content: center; align-items: center; text-align: center; }
	.hp-trust__cell--count { gap: 4px; }
	.hp-trust__num-big { font-size: 32px; }
	.hp-trust__count-num { font-size: 18px; }
}
@media (max-width: 420px) {
	.hp-trust__card { padding: 18px 14px; gap: 14px; }
	.hp-trust__brand { font-size: 12.5px; white-space: normal; }
	.hp-trust__num-big { font-size: 28px; }
}

/* ============================================================
   SECTIONS PRODUITS (best-sellers / cbd+) — éditorial + carrousel
   ============================================================ */
/* Disposition : bandeau de titre en pleine largeur AU-DESSUS du carrousel
   (l'ancien encart latéral mangeait un quart de la ligne et ressemblait à
   d'autres boutiques). Les produits occupent maintenant toute la largeur. */
.hp-prodrow {
	display: block;
}
.hp-prodrow__editorial {
	background: transparent;
	border: 0;
	padding: 0 0 8px;
	margin-bottom: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 20px;
}
/* L'eyebrow occupe sa propre ligne, puis titre à gauche / CTA à droite. */
.hp-prodrow__editorial > .hp-prodrow__eyebrow { flex: 0 0 100%; }
.hp-prodrow__editorial > .hp-prodrow__text { flex: 0 0 100%; order: 3; margin: 10px 0 0; }
.hp-prodrow__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--gold);
	text-transform: uppercase;
	margin: 0 0 4px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
/* Petit filet vert devant l'eyebrow, comme repère de section. */
.hp-prodrow__eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--gold);
	border-radius: 2px;
}
.hp-prodrow__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(20px, 1.9vw, 25px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--text);
}
.hp-prodrow__title em { font-style: normal; color: var(--gold); }
.hp-prodrow__text {
	color: var(--text-dim);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 22px;
}
.hp-prodrow__cta { margin-left: auto; align-self: center; }

.hp-prodrow__carousel { min-width: 0; }

@media (max-width: 900px) {
	.hp-prodrow__editorial { padding: 0 0 12px; margin-bottom: 16px; }
}
/* Mobile : bandeau de titre compact — le titre, le bouton et le filet de
   séparation mangeaient trop de hauteur avant les produits. */
@media (max-width: 768px) {
	.hp-prodrow__editorial {
		padding: 0 0 10px;
		margin-bottom: 12px;
		gap: 2px 12px;
		align-items: center;
	}
	.hp-prodrow__eyebrow { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 2px; }
	.hp-prodrow__eyebrow::before { width: 16px; }
	.hp-prodrow__title { font-size: 21px; }
	.hp-prodrow__cta {
		padding: 7px 13px !important;
		font-size: 11.5px !important;
		white-space: nowrap;
	}
}

/* ============================================================
   CARROUSEL PRODUITS — scroll-snap natif + flèches
   Réutilise ul.products / li.product → cards identiques aux pages catégorie.
   ============================================================ */
.hp-carousel {
	position: relative;
}
.hp-carousel__track.products {
	display: flex !important;
	grid-template-columns: none !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: 16px !important;
	padding: 4px 4px 16px;
	margin: 0 !important;
	scrollbar-width: thin;
	scrollbar-color: var(--gold) var(--bg-1);
}
.hp-carousel__track.products::-webkit-scrollbar { height: 6px; }
.hp-carousel__track.products::-webkit-scrollbar-thumb { background: var(--gold-gradient); border-radius: 3px; }
.hp-carousel__track.products::-webkit-scrollbar-track { background: var(--bg-1); }

/* Cards : largeur calculée selon nombre de cards visibles */
/* Le carrousel occupe désormais toute la largeur : 5 produits par ligne en
   grand écran (sinon les cartes deviennent énormes), puis 4, 3 et 2. */
.hp-carousel--3col .hp-carousel__track > li.product,
.hp-carousel--4col .hp-carousel__track > li.product { flex: 0 0 calc((100% - 64px) / 5); scroll-snap-align: start; }

@media (max-width: 1279px) {
	.hp-carousel--3col .hp-carousel__track > li.product,
	.hp-carousel--4col .hp-carousel__track > li.product { flex: 0 0 calc((100% - 48px) / 4); }
}
@media (max-width: 1100px) {
	.hp-carousel--3col .hp-carousel__track > li.product,
	.hp-carousel--4col .hp-carousel__track > li.product { flex: 0 0 calc((100% - 32px) / 3); }
}
@media (max-width: 768px) {
	/* Aligné sur la grille catégorie : 2 colonnes, gap 10px, pas de padding latéral.
	   + Fade à droite. */
	.hp-carousel__track.products {
		gap: 10px !important;
		padding: 4px 0 12px;
		mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
	}
	.hp-carousel--3col .hp-carousel__track > li.product,
	.hp-carousel--4col .hp-carousel__track > li.product { flex: 0 0 calc((100% - 10px) / 2); }
}
@media (max-width: 599px) {
	/* Identique aux catégories ≤599px : 2 colonnes, gap 10px */
	.hp-carousel__track.products { gap: 10px !important; }
	.hp-carousel--3col .hp-carousel__track > li.product,
	.hp-carousel--4col .hp-carousel__track > li.product { flex: 0 0 calc((100% - 10px) / 2); }
}

/* Flèches navigation */
.hp-carousel__nav {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--bg-2);
	border: 1px solid var(--line);
	color: var(--gold);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	z-index: 5;
	transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.hp-carousel__nav:hover {
	background: var(--btn-bg);
	border-color: transparent;
	color: var(--btn-fg);
	transform: translateY(-50%) scale(1.05);
}
/* Chevron noir au hover : on neutralise le gradient SVG inline (stroke="url(#…)")
   en repassant sur currentColor qui prend la valeur de --btn-fg ci-dessus. */
.hp-carousel__nav:hover svg { stroke: currentColor !important; }
.hp-carousel__nav--prev { left: -10px; }
.hp-carousel__nav--next { right: -10px; }
.hp-carousel__nav[disabled] { opacity: 0.3; cursor: default; }
.hp-carousel__nav[disabled]:hover { background: var(--bg-2); color: var(--gold); border-color: var(--line); transform: translateY(-50%); }

@media (max-width: 768px) {
	.hp-carousel__nav { display: none; }
}

/* Avatars silhouette (fallback) — équipe + témoignages */
.hp-advice__avatar--silhouette,
.hp-testi__avatar--silhouette {
	background: var(--bg-3);
	color: var(--gold);
	display: flex; align-items: center; justify-content: center;
}
.hp-advice__avatar--silhouette svg { width: 60%; height: 60%; opacity: 0.85; }
.hp-testi__avatar--silhouette svg  { width: 60%; height: 60%; opacity: 0.85; }

/* ============================================================
   SECTION 5 — BANDEAU CONSEIL
   ============================================================ */
section.hp-advice-section {
	padding-bottom: 15px;
}
.hp-advice {
	background:
		linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
		var(--btn-bg) border-box;
	border: 1px solid transparent;
	padding: 32px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 28px;
	align-items: center;
}
.hp-advice__team {
	display: flex;
}
.hp-advice__team img,
.hp-advice__team .hp-advice__avatar {
	width: 56px; height: 56px;
	border-radius: 50%;
	border: 2px solid var(--bg-2);
	background: var(--bg-3);
	margin-left: -14px;
	display: flex; align-items: center; justify-content: center;
	color: var(--gold);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	object-fit: cover;
}
.hp-advice__team img:first-child,
.hp-advice__team .hp-advice__avatar:first-child { margin-left: 0; }

.hp-advice__text {
	color: var(--text);
}
.hp-advice__title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 4px;
	letter-spacing: -0.01em;
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--gold);
}
.hp-advice__sub {
	color: var(--text-mute);
	font-size: 13px;
	margin: 0;
	font-family: var(--font-mono);
	letter-spacing: 0.05em;
}
.hp-advice__phone {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--gold);
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
}
.hp-advice__phone:hover { color: var(--gold-soft); }
.hp-advice__phone svg { width: 22px; height: 22px; }

@media (max-width: 768px) {
	.hp-advice {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 18px;
		padding: 24px;
	}
	.hp-advice__team { justify-content: center; }
	.hp-advice__phone { justify-content: center; font-size: 20px; }
}

/* ============================================================
   SECTION 6 — MOOD SPLIT (Détente vs Puissance, deux ambiances côte à côte)
   ============================================================ */
.hp-shead--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	margin-bottom: 32px;
}
.hp-shead--center .hp-shead__title { font-size: clamp(22px, 2.4vw, 30px); }

.hp-mood {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.hp-mood__side {
	position: relative;
	overflow: hidden;
	min-height: 460px;
	padding: 44px 44px 38px;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	border: 1px solid var(--line);
	isolation: isolate;
	transition: border-color .25s ease;
}
/* Les deux blocs partagent la MÊME surface vert profond (accent-deep du thème
   d'origine) : seul le halo change de position, pour les différencier sans
   sortir de la palette. Avant, "intense" partait d'un dégradé crème → noir qui
   donnait un gris métallique appartenant à aucune palette du site. */
/* Les deux bandes partagent la MÊME surface claire (crème du site) : les
   pavés vert profond d'origine écrasaient la page d'accueil. */
.hp-mood__side--soft,
.hp-mood__side--intense {
	background: var(--bg-2);
	border-color: var(--line);
}
.hp-mood__side--soft .hp-mood__kicker,
.hp-mood__side--intense .hp-mood__kicker { color: var(--green); }
.hp-mood__side:hover { border-color: var(--line-2); }

.hp-mood__bg { display: none; }

.hp-mood__content {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 480px;
	flex: 1;
}
.hp-mood__kicker {
	font-family: var(--font-mono);
	font-size: 14px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--text-dim);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
/* Mobile : on garde la taille compacte d'origine. */
@media (max-width: 768px) {
	.hp-mood__kicker { font-size: 10.5px; }
}
.hp-mood__kicker::before {
	content: '';
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}
.hp-mood__side--intense .hp-mood__kicker { color: var(--green); }
.hp-mood__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(22px, 2.2vw, 29px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	margin: 0;
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--text);
}
.hp-mood__intro {
	color: var(--text-dim);
	font-size: 13.5px;
	line-height: 1.55;
	margin: 0;
	max-width: 380px;
	/* Coupé à 3 lignes : les descriptions de catégorie débordaient de la bande
	   et poussaient le bouton hors du cadre. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hp-mood__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	/* Bouton crème du site, texte vert : l'ancien fond translucide blanc à 4 %
	   avec texte blanc était invisible sur la surface claire. */
	color: #ffffff;
	padding: 10px 18px;
	background: var(--green, #2d4a2d);
	border: 1px solid var(--green, #2d4a2d);
	/* Même arrondi que les boutons du site (6px), pas une gélule. */
	border-radius: 6px;
	transition: background .2s ease, border-color .2s ease;
	margin-top: 2px;
}
.hp-mood__cta:hover {
	background: #3a5c3a;
	border-color: #3a5c3a;
	color: #ffffff;
}

/* Rail produits : marquee infini auto-scroll. Le contenu est dupliqué côté
   PHP, on translate de -50% pour que la 2e moitié reprenne pile au début.
   Vitesse via --mood-speed (= durée d'1 boucle complète). */
.hp-mood__rail-wrap {
	position: relative;
	margin: 28px -44px 0;
	padding: 4px 0;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hp-mood__rail.products {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 10px !important;
	grid-template-columns: none !important;
	width: max-content !important;
	max-width: none !important;
	animation: hp-mood-marquee var(--mood-speed, 30s) linear infinite !important;
	will-change: transform;
}
.hp-mood__side:hover .hp-mood__rail.products { animation-play-state: paused; }
.hp-mood__rail--static.products {
	animation: none !important;
	will-change: auto;
	width: 100% !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--gold) transparent;
	padding-bottom: 6px !important;
}
.hp-mood__rail--static.products > li.product { scroll-snap-align: start; }
.hp-mood__rail--static.products::-webkit-scrollbar { height: 4px; }
.hp-mood__rail--static.products::-webkit-scrollbar-thumb { background: var(--gold-gradient); border-radius: 2px; }
@keyframes hp-mood-marquee {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-50%, 0, 0); }
}
.hp-mood__rail > li.product {
	flex: 0 0 200px;
	background: transparent;
	border: 1px solid rgba(245,240,232,0.144) !important;
	border-radius: 10px;
	padding: 0 !important;
	margin: 0 !important;
	width: 200px !important;
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;
	aspect-ratio: 1 / 1;
	display: block !important;
}
.hp-mood__rail > li.product:hover {
	border-color: rgba(122,184,122, 0.55) !important;
	transform: translateY(-2px);
}
.hp-mood__rail > li.product .product__media-wrap,
.hp-mood__rail > li.product .product__media,
.hp-mood__rail > li.product .product__image,
.hp-mood__rail > li.product img { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1; object-fit: cover; }
/* Tout sauf l'image est masqué dans le rail */
.hp-mood__rail > li.product .product__body,
.hp-mood__rail > li.product .product__badges,
.hp-mood__rail > li.product .product__title,
.hp-mood__rail > li.product .woocommerce-loop-product__title,
.hp-mood__rail > li.product .product__pills,
.hp-mood__rail > li.product .product__rating,
.hp-mood__rail > li.product .product__rating--cbdco,
.hp-mood__rail > li.product .product__cat,
.hp-mood__rail > li.product .product__price,
.hp-mood__rail > li.product .price,
.hp-mood__rail > li.product .product__cta,
.hp-mood__rail > li.product .card-cta,
.hp-mood__rail > li.product .card-variation-form,
.hp-mood__rail > li.product .product__short-desc,
.hp-mood__rail > li.product .add_to_cart_button,
.hp-mood__rail > li.product .button { display: none !important; }

/* Responsive */
/* ============================================================
   Disposition desktop des blocs d'ambiance : deux BANDES pleine largeur
   empilées et miroir l'une de l'autre (texte à gauche + rail à droite, puis
   l'inverse), au lieu de deux gros pavés côte à côte. La deuxième bande passe
   en crème pour alterner clair / foncé.
   ============================================================ */
@media (min-width: 901px) {
	.hp-mood {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.hp-mood__side {
		min-height: 0;
		padding: 26px 32px;
		display: grid;
		grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
		align-items: center;
		gap: 34px;
	}
	.hp-mood__content { max-width: none; gap: 10px; }
	.hp-mood__rail-wrap { margin: 0; }

	/* Les deux bandes : même surface claire et mêmes jetons de couleur. */
	.hp-mood__side--soft,
	.hp-mood__side--intense {
		background: var(--bg-2);
		border-color: var(--line);
		--gold: #2d4a2d;
		--gold-2: #0f2a1e;
		--gold-soft: #3a5c3a;
		--text: #1a1a1a;
		--text-dim: #5a5a5a;
		--text-mute: #8a8a8a;
		--line: #d8d0c4;
	}
	/* Bande 2 : miroir (rail à gauche, texte à droite). */
	.hp-mood__side--intense {
		/* Colonnes inversées : le rail prend la colonne large à gauche et le
		   texte la colonne étroite à droite (miroir exact de la bande "doux").
		   Sans ça, le texte tombait au début de la colonne large. */
		grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
		background: var(--bg-2);
		border-color: var(--line);
		/* on rebascule les jetons en version "fond clair" (le bloc était dans
		   la portée des surfaces sombres de main.css) */
		--gold: #2d4a2d;
		--gold-2: #0f2a1e;
		--gold-soft: #3a5c3a;
		--text: #1a1a1a;
		--text-dim: #5a5a5a;
		--text-mute: #8a8a8a;
		--line: #d8d0c4;
	}
	.hp-mood__side--intense .hp-mood__content { order: 2; }
	.hp-mood__side--intense .hp-mood__rail-wrap { order: 1; }
	/* Texte calé sur le bord droit, exactement comme "Signature" l'est sur le
	   bord gauche (sinon il flotte au milieu de sa colonne). */
	.hp-mood__side--intense .hp-mood__content { align-items: flex-end; text-align: right; }
	.hp-mood__side--intense .hp-mood__kicker { flex-direction: row-reverse; }
	.hp-mood__side--intense .hp-mood__intro { margin-left: auto; }
	.hp-mood__side--intense .hp-mood__cta { align-self: flex-end; }
	.hp-mood__side--intense .hp-mood__title { color: var(--text); }
	.hp-mood__side--intense .hp-mood__kicker { color: var(--gold); }
	.hp-mood__side--intense .hp-mood__intro { color: var(--text-dim); }
	.hp-mood__side--intense .hp-mood__cta {
		background: var(--gold);
		border-color: var(--gold);
		color: #ffffff;
	}
	.hp-mood__side--intense .hp-mood__cta:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
}

@media (max-width: 900px) {
	.hp-mood { grid-template-columns: 1fr; gap: 14px; }
	.hp-mood__side { min-height: 0; padding: 32px 24px 28px; }
	.hp-mood__title { font-size: clamp(20px, 4.6vw, 26px); }
	.hp-mood__intro { font-size: 14px; }
	.hp-mood__rail-wrap { margin: 22px -24px 0; }
	.hp-mood__rail > li.product { flex-basis: 160px; width: 160px !important; }
}
@media (max-width: 600px) {
	/* Slider horizontal des 2 panels (soft / intense) + fade aux bords */
	.hp-mood {
		display: flex !important;
		grid-template-columns: none !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 12px !important;
		padding-bottom: 4px;
		mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
	}
	.hp-mood::-webkit-scrollbar { display: none; }
	.hp-mood > .hp-mood__side {
		flex: 0 0 88% !important;
		width: 88% !important;
		max-width: 88% !important;
		scroll-snap-align: start;
	}
}
@media (max-width: 540px) {
	.hp-mood__side { padding: 26px 18px 24px; }
	.hp-mood__title { font-size: 24px; }
	.hp-mood__intro { font-size: 13.5px; }
	.hp-mood__rail-wrap { margin: 18px -18px 0; }
	.hp-mood__rail > li.product { flex-basis: 140px; width: 140px !important; }
}

/* ============================================================
   SECTION 8 — TÉMOIGNAGES (4 cards)
   ============================================================ */
.hp-testi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.hp-testi {
	/* Cartes d'avis en blanc : elles se détachent du fond crème de la section. */
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 24px;
	display: flex; flex-direction: column;
	gap: 14px;
	transition: border-color .2s ease;
	position: relative;
}
.hp-testi__badge {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--btn-bg);
	color: var(--btn-fg);
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	margin-left: auto;
}
.hp-testi__meta { display: flex; flex-direction: column; gap: 2px; }
.hp-testi__date {
	color: var(--text-mute);
	font-size: 11px;
	font-family: var(--font-mono);
	letter-spacing: 0.04em;
	margin-top: 2px;
}
.hp-testi:hover { border-color: var(--line-2); }
.hp-testi__head {
	display: flex; align-items: center; gap: 12px;
}
.hp-testi__avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--bg-3);
	border: 1px solid var(--line);
	display: flex; align-items: center; justify-content: center;
	color: var(--gold);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	object-fit: cover;
}
.hp-testi__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	color: var(--text);
	margin: 0;
}
.hp-testi__stars {
	background: var(--btn-bg);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	letter-spacing: 2px;
	font-size: 15px;
	display: inline-block;
	margin-top: 2px;
}
.hp-testi__quote {
	color: var(--text-dim);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
	font-style: italic;
}

@media (max-width: 1024px) { .hp-testi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .hp-testi-grid { grid-template-columns: 1fr; } }

/* Rail témoignages — marquee infini, vitesse via --testi-speed.
   La section a overflow-x:clip pour éviter que les marges négatives ne
   provoquent un débordement horizontal du viewport sur petites largeurs
   (sur les écrans étroits, le -44px sortait du cadre). */
.hp-testi-section { overflow-x: clip; }
.hp-testi-rail-wrap {
	position: relative;
	margin: 28px -44px 0;
	padding: 4px 0;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hp-testi-rail {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 16px !important;
	width: max-content !important;
	max-width: none !important;
	grid-template-columns: none !important;
	animation: hp-testi-marquee var(--testi-speed, 40s) linear infinite !important;
	will-change: transform;
}
.hp-testi-rail-wrap:hover .hp-testi-rail { animation-play-state: paused; }
.hp-testi-rail--static {
	animation: none;
	will-change: auto;
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--gold) transparent;
	padding-bottom: 6px;
}
.hp-testi-rail--static > .hp-testi-rail__item { scroll-snap-align: start; }
.hp-testi-rail--static::-webkit-scrollbar { height: 4px; }
.hp-testi-rail--static::-webkit-scrollbar-thumb { background: var(--gold-gradient); border-radius: 2px; }
.hp-testi-rail__item {
	flex: 0 0 320px !important;
	width: 320px !important;
	max-width: 320px !important;
	display: flex !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.hp-testi-rail__item > .hp-testi {
	width: 100%;
	min-height: 100%;
}
@keyframes hp-testi-marquee {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 1024px) {
	.hp-testi-rail-wrap { margin: 22px -24px 0; }
	.hp-testi-rail__item { flex-basis: 240px !important; width: 240px !important; max-width: 240px !important; }
}
@media (max-width: 600px) {
	.hp-testi-rail-wrap { margin: 14px -12px 0; }
	.hp-testi-rail__item { flex-basis: 210px !important; width: 210px !important; max-width: 210px !important; }
	.hp-testi { padding: 14px !important; }
	.hp-testi__avatar { width: 38px !important; height: 38px !important; }
	.hp-testi__name { font-size: 13px !important; }
	.hp-testi__date { font-size: 11px !important; }
	.hp-testi__quote { font-size: 13px !important; line-height: 1.5 !important; }
	.hp-testi__stars { font-size: 12px !important; }
}

/* ============================================================
   SECTION 9 — VIDÉOS ENGAGEMENTS
   3 layouts : landscape2 / landscape3 / portrait4
   ============================================================ */
.hp-videos {
	display: grid;
	gap: 16px;
}
/* 2 vidéos paysage premium (par défaut le plus marquant) */
.hp-videos--landscape2 { grid-template-columns: repeat(2, 1fr); }
.hp-videos--landscape2 .hp-video { aspect-ratio: 16 / 10; }

/* 3 vidéos paysage équilibré (notre démarcation) */
.hp-videos--landscape3 { grid-template-columns: repeat(3, 1fr); }
.hp-videos--landscape3 .hp-video { aspect-ratio: 4 / 3; }

/* 4 vidéos portrait (compact) */
.hp-videos--portrait4 { grid-template-columns: repeat(4, 1fr); }
.hp-videos--portrait4 .hp-video { aspect-ratio: 9 / 14; }

.hp-video {
	position: relative;
	background: var(--bg-2);
	border: 1px solid var(--line);
	overflow: hidden;
	display: block;
	color: var(--text);
	transition: border-color .25s ease, transform .25s ease;
}
.hp-video:hover {
	border-color: transparent;
	background:
		linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
		var(--btn-bg) border-box;
}
.hp-video__bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	transition: transform .5s ease;
	overflow: hidden;
}
.hp-video:hover .hp-video__bg { transform: scale(1.04); }
.hp-video__bg::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(245,240,232,0.15) 0%, rgba(245,240,232,0.75) 100%);
	z-index: 1;
	pointer-events: none;
}
/* Vidéo inline (autoplay muted loop) — couvre tout le slot, sous le gradient. */
.hp-video__media {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	z-index: 0;
	pointer-events: none;
}

/* Bouton play : ring doré + glow + triangle gradient */
.hp-video__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 72px; height: 72px;
	border-radius: 50%;
	background: rgba(245,240,232,0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 2px solid var(--gold);
	color: var(--gold);
	display: flex; align-items: center; justify-content: center;
	transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
	box-shadow: 0 0 0 6px rgba(122,184,122, 0.10), 0 8px 24px rgba(0, 0, 0, 0.5);
	z-index: 2;
	opacity: 1;
	pointer-events: none;
}
.hp-video__play::before {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 1px solid rgba(122,184,122, 0.35);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
}
/* Au survol : le bouton play s'efface, la vidéo prend le relais. */
.hp-video:hover .hp-video__play {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.9);
}
.hp-video__play svg { width: 26px; height: 26px; margin-left: 3px; }

.hp-video__title {
	position: absolute;
	bottom: 22px; left: 22px; right: 22px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--text);
	letter-spacing: 0.02em;
	margin: 0;
	z-index: 1;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1024px) {
	.hp-videos--landscape2,
	.hp-videos--landscape3,
	.hp-videos--portrait4 { grid-template-columns: repeat(2, 1fr); }
	.hp-videos--landscape2 .hp-video,
	.hp-videos--landscape3 .hp-video { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
	/* Slider horizontal + fade aux bords (cohérent avec le rail avis et "Nos univers") */
	.hp-videos,
	.hp-videos--landscape2,
	.hp-videos--landscape3,
	.hp-videos--portrait4 {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		grid-template-columns: none !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 12px !important;
		padding-bottom: 4px;
		mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
	}
	.hp-videos::-webkit-scrollbar,
	.hp-videos--landscape2::-webkit-scrollbar,
	.hp-videos--landscape3::-webkit-scrollbar,
	.hp-videos--portrait4::-webkit-scrollbar { display: none; }
	.hp-videos > .hp-video,
	.hp-videos--landscape2 > .hp-video,
	.hp-videos--landscape3 > .hp-video {
		flex: 0 0 80% !important;
		width: 80% !important;
		max-width: 80% !important;
		scroll-snap-align: start;
		min-width: 0;
	}
	/* Portrait : un peu plus étroites pour qu'on en voit deux qui peep */
	.hp-videos--portrait4 > .hp-video {
		flex: 0 0 55% !important;
		width: 55% !important;
		max-width: 55% !important;
	}
	.hp-video__play { width: 56px; height: 56px; }
}

/* ============================================================
   SECTION 10 — BLOG ACTUS (4 cards)
   On reprend exactement le style .blog-teasers de main.css mais avec 4 colonnes.
   ============================================================ */
.hp-blog-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.hp-blog-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hp-blog-card__media-fallback {
	display: block;
	width: 100%; height: 100%;
	background-size: cover;
	background-position: center;
}
.hp-blog-card {
	/* Cartes d'articles en blanc, comme les cartes produit et les avis. */
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: 12px;
	display: flex; flex-direction: column;
	overflow: hidden;
	transition: border-color .25s ease;
}
.hp-blog-card:hover {
	border-color: transparent;
	background:
		linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
		var(--btn-bg) border-box;
}
.hp-blog-card__media {
	aspect-ratio: 16 / 10;
	background-color: #ffffff;
	background-image: repeating-linear-gradient(45deg, rgba(122,184,122, 0.06) 0 8px, transparent 8px 16px);
	overflow: hidden;
	display: block;
}
.hp-blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.hp-blog-card__body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.hp-blog-card__cat {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
}
.hp-blog-card__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	margin: 0;
	color: var(--text);
}
.hp-blog-card__title a { color: inherit; }
.hp-blog-card__excerpt {
	color: var(--text-dim);
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
	flex: 1;
}
.hp-blog-card__cta {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--gold);
	margin-top: auto;
}
.hp-blog-card__cta:hover { color: var(--gold-soft); }

@media (max-width: 1024px) { .hp-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  {
	/* Mobile : scroll horizontal + fade aux bords (cohérent avec le rail avis) */
	.hp-blog-grid {
		display: flex !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 12px;
		padding-bottom: 4px;
		mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
	}
	.hp-blog-grid::-webkit-scrollbar { display: none; }
	.hp-blog-grid > .hp-blog-card {
		flex: 0 0 var(--hp-blog-card-w, 78%);
		scroll-snap-align: start;
		min-width: 0;
	}
	/* Card titre + excerpt légèrement réduits sur mobile pour être proportionnels */
	.hp-blog-card__title { font-size: 14.5px !important; }
	.hp-blog-card__excerpt { font-size: 12.5px !important; }
	.hp-blog-card__body { padding: 14px 14px 16px !important; gap: 8px !important; }
}

/* ============================================================
   SECTION 12 — FAQ 2 colonnes
   Reprend le style .faq-item de main.css + chevrons dorés au survol.
   ============================================================ */
.hp-faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}
.hp-faq-section .faq-item summary { transition: color .2s ease; }
.hp-faq-section .faq-item summary:hover { color: var(--gold); cursor: pointer; }
.hp-faq-section .faq-item summary:hover::after { color: var(--green); -webkit-text-fill-color: var(--green); }
.hp-faq-section .faq-item[open] summary::after { color: var(--gold); }

@media (max-width: 768px) {
	.hp-faq-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 600px) {
	.hp-faq-section .faq-item summary {
		padding: 14px 4px !important;
		font-size: 14px !important;
		line-height: 1.35 !important;
		gap: 10px !important;
	}
	.hp-faq-section .faq-item summary > span[style*="display:flex"],
	.hp-faq-section .faq-item summary > span:first-child {
		gap: 10px !important;
	}
	.hp-faq-section .faq-item summary span.faq-num {
		font-size: 11px !important;
		margin-right: 0 !important;
		flex-shrink: 0;
	}
	.hp-faq-section .faq-item summary::after {
		font-size: 20px !important;
	}
	.hp-faq-section .faq-item__answer {
		padding: 0 4px 16px 4px !important;
		font-size: 13px !important;
		line-height: 1.55 !important;
	}
}

/* ============================================================
   SECTION 13 — RÉASSURANCE 4 PILIERS
   ============================================================ */
.hp-pillars {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 36px;
	background: var(--bg-1);
	border: 1px solid var(--line);
	position: relative;
	overflow: hidden;
}
.hp-pillars::before {
	content: '';
	position: absolute;
	top: 0; left: -40%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(201,230,201, 0.10) 45%, rgba(201,230,201, 0.18) 50%, rgba(201,230,201, 0.10) 55%, transparent 100%);
	pointer-events: none;
	transform: skewX(-18deg);
	animation: cbdco-trust-sheen 8s 3s ease-in-out infinite;
	z-index: 0;
}
.hp-pillar { position: relative; z-index: 1; }
.hp-pillar {
	display: flex; align-items: center; gap: 14px;
	color: var(--text);
}
.hp-pillar__icon {
	flex-shrink: 0;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--bg-3);
	border: 1px solid var(--gold-2);
	display: flex; align-items: center; justify-content: center;
	color: var(--gold);
}
.hp-pillar__icon svg { width: 22px; height: 22px; }
.hp-pillar__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	color: var(--text);
	letter-spacing: 0.02em;
	margin: 0 0 2px;
	line-height: 1.2;
}
.hp-pillar__sub {
	color: var(--text-mute);
	font-size: 12px;
	margin: 0;
	font-family: var(--font-mono);
	letter-spacing: 0.04em;
}

@media (max-width: 1024px) {
	.hp-pillars { grid-template-columns: repeat(2, 1fr); padding: 24px; }
}
@media (max-width: 480px) {
	.hp-pillars { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   INDICATEURS DE SCROLL — sliders horizontaux mobile
   Tous les sliders horizontaux (hero side, blog, videos, mood)
   reçoivent une scrollbar fine dorée + un chevron "swipe" qui pulse à
   droite pendant ~6s puis disparaît, pour signaler le défilement aux
   visiteurs qui ne savent pas spontanément qu'ils peuvent scroller.
   ============================================================ */
@media (max-width: 600px) {
	/* Conteneur parent avec hint chevron */
	.hp-hero,
	.hp-videos,
	.hp-blog-grid,
	.hp-mood,
	.hp-hero__side {
		position: relative;
	}
	/* Réactive une scrollbar discrète dorée pour signaler le scroll */
	.hp-hero__side,
	.hp-videos,
	.hp-videos--landscape2,
	.hp-videos--landscape3,
	.hp-videos--portrait4,
	.hp-blog-grid,
	.hp-mood {
		scrollbar-width: thin !important;
		scrollbar-color: var(--gold, #7ab87a) transparent !important;
	}
	.hp-hero__side::-webkit-scrollbar,
	.hp-videos::-webkit-scrollbar,
	.hp-videos--landscape2::-webkit-scrollbar,
	.hp-videos--landscape3::-webkit-scrollbar,
	.hp-videos--portrait4::-webkit-scrollbar,
	.hp-blog-grid::-webkit-scrollbar,
	.hp-mood::-webkit-scrollbar {
		display: block !important;
		height: 4px !important;
		background: rgba(245,240,232,0.048) !important;
	}
	.hp-hero__side::-webkit-scrollbar-thumb,
	.hp-videos::-webkit-scrollbar-thumb,
	.hp-videos--landscape2::-webkit-scrollbar-thumb,
	.hp-videos--landscape3::-webkit-scrollbar-thumb,
	.hp-videos--portrait4::-webkit-scrollbar-thumb,
	.hp-blog-grid::-webkit-scrollbar-thumb,
	.hp-mood::-webkit-scrollbar-thumb {
		background: var(--gold-gradient, #2d4a2d) !important;
		border-radius: 2px !important;
	}
}

/* Hint visuel "swipe" — petit chevron animé qui pulse en haut à droite
   pendant 8s puis disparaît, signalant que le bloc est scrollable. */
@media (max-width: 600px) {
	/* Pas de pill texte sous les sliders : la barre dorée parle d'elle-même. */
}



/* ==================================================================
   Bandes « Mode doux » / « Mode intense » — MOBILE
   ------------------------------------------------------------------
   Hors de la media query desktop, ces deux blocs restaient sur les
   jetons du thème sombre : titre et intro en blanc sur la surface
   claire, donc illisibles. On rebascule les jetons ici aussi.
   ================================================================== */
@media (max-width: 900px) {
	.hp-mood__side--soft,
	.hp-mood__side--intense {
		background: var(--bg-2);
		border-color: var(--line);
		--gold: #2d4a2d;
		--gold-2: #0f2a1e;
		--gold-soft: #3a5c3a;
		--text: #1a1a1a;
		--text-dim: #5a5a5a;
		--text-mute: #8a8a8a;
		--line: #d8d0c4;
	}
	.hp-mood__side--soft .hp-mood__title,
	.hp-mood__side--intense .hp-mood__title {
		color: #1a1a1a;
		-webkit-text-fill-color: #1a1a1a;
	}
	.hp-mood__side--soft .hp-mood__intro,
	.hp-mood__side--intense .hp-mood__intro { color: #5a5a5a; }
	.hp-mood__side--soft .hp-mood__kicker,
	.hp-mood__side--intense .hp-mood__kicker { color: #2d4a2d; }
	.hp-mood__side--soft .hp-mood__cta,
	.hp-mood__side--intense .hp-mood__cta {
		background: #2d4a2d;
		border-color: #2d4a2d;
		color: #ffffff;
	}
}