/* ============================================================
   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); }

/* Tous les titres de bloc de la home en dégradé doré (uniforme avec
   .filter-group__title, .sp-eta-modal__head h3, etc.). */
.hp :is(
	.hp-shead__title,
	.hp-prodrow__title,
	.hp-advice__title,
	.hp-video__title,
	.hp-blog-card__title,
	.hp-cta-final__title,
	.hp-pillar__title
) {
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--gold);
}
.hp :is(
	.hp-shead__title em,
	.hp-prodrow__title em,
	.hp-cta-final__title em
) {
	-webkit-text-fill-color: transparent;
	background: var(--gold-gradient);
	background-clip: text;
	-webkit-background-clip: text;
}
.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;
	font-size: clamp(22px, 2.4vw, 30px);
	letter-spacing: -0.005em;
	margin: 0;
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--gold);
}
.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: #fff;
	text-transform: uppercase;
	display: block;
	margin-bottom: 8px;
}
.hp-shead__link {
	font-family: var(--font-mono);
	font-size: 13px;
	color: #fff;
	letter-spacing: 0.05em;
	transition: filter .2s ease;
}
.hp-shead__link:hover {
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ============================================================
   SECTION 1 — HERO (1 grande + 2 petites)
   ============================================================ */
.hp-hero {
	display: grid;
	grid-template-columns: 60% 1fr;
	gap: 16px;
	min-height: 500px;
}
.hp-hero__main,
.hp-hero__small {
	position: relative;
	overflow: hidden;
	background: var(--bg-2);
	border: 1px solid var(--line);
	transition: border-color .25s ease;
	display: flex;
	align-items: flex-end;
	color: var(--text);
}
.hp-hero__main { min-height: 500px; }
.hp-hero__side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
	min-height: 500px;
}
.hp-hero__small { min-height: 0; }

.hp-hero__main:hover,
.hp-hero__small:hover {
	border-color: transparent;
	background:
		linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
		var(--btn-bg) border-box;
}

/* Slot hero = juste l'image cliquable. Pas d'overlay foncé, pas de contenu textuel
   — on respecte le visuel uploadé tel quel (var --hero-d).
   Anti-aliasing : on force un layer GPU (translateZ 0) + image-rendering high
   pour que Chrome/Firefox utilisent l'algo de scaling le plus propre quand
   l'image est upscalée sur grand écran. */
.hp-hero__bg {
	position: absolute; inset: 0;
	background-image: var(--hero-d);
	background-size: cover;
	background-position: center;
	z-index: 0;
	transform: translateZ(0);
	backface-visibility: hidden;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: high-quality;
}
.hp-hero__main:not(.hp-hero__main--has-image) .hp-hero__bg,
.hp-hero__small:not(.hp-hero__small--has-image) .hp-hero__bg {
	background-image:
		var(--hero-d),
		repeating-linear-gradient(45deg, rgba(212, 166, 72, 0.06) 0 8px, transparent 8px 16px);
}

/* Petites bannières en <img> réelle : sur desktop, cover dans la grille ;
   sur mobile (override plus bas), taille d'origine + scroll horizontal. */
.hp-hero__small .hp-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: translateZ(0);
	backface-visibility: hidden;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: high-quality;
}

@media (max-width: 900px) {
	/* Le bloc hero déborde du padding du .hp__inner pour aller bord-à-bord
	   d'écran : le fade en bord est alors visible (mêmes mécaniques que le
	   rail des avis qui fait `margin: -24px`). */
	.hp-hero {
		grid-template-columns: 1fr;
		gap: 10px;
		min-height: 0;
		margin-inline: calc(-1 * var(--container-px, 12px));
	}
	.hp-hero__main,
	.hp-hero__side {
		mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
	}
	/* Aspect-ratio plutôt que min-height : l'image desktop tient sans crop excessif */
	.hp-hero__main {
		min-height: 0;
		aspect-ratio: 16/9;
	}
	/* Les 2 petites : scroll horizontal sur la même ligne, taille d'origine */
	.hp-hero__side {
		display: flex !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		gap: 10px;
		min-height: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
		scrollbar-width: none;
		align-items: flex-start;
	}
	.hp-hero__side::-webkit-scrollbar { display: none; }
	.hp-hero__small {
		flex: 0 0 80%;
		aspect-ratio: auto;
		min-height: 0;
		height: auto;
		scroll-snap-align: start;
	}
	/* Image en taille d'origine (ratio respecté), pas de cover/crop */
	.hp-hero__small .hp-hero__img {
		position: static;
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}
@media (max-width: 600px) {
	.hp-hero { gap: 8px; }
	.hp-hero__main { aspect-ratio: 16/9; }
	.hp-hero__side { gap: 8px; }
	.hp-hero__small { flex: 0 0 85%; }
}

/* ============================================================
   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(226, 203, 151, 0.12) 45%, rgba(226, 203, 151, 0.22) 50%, rgba(226, 203, 151, 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: rgba(212, 168, 75, 0.28);
}
.hp-trust__stars-full {
	position: absolute;
	left: 0; top: 0;
	overflow: hidden;
	color: var(--gold);
	text-shadow: 0 0 10px rgba(212, 168, 75, 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: #ffffff;
}
.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: #ffffff; font-size: 12.5px; }
.hp-trust__count strong {
	color: #fff;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}
.hp-trust__link {
	color: #fff;
	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(20, 16, 8, 0.78), rgba(20, 16, 8, 0.78)) padding-box,
		linear-gradient(135deg, rgba(226, 203, 151, 0.55), rgba(168, 134, 89, 0.32) 60%, rgba(226, 203, 151, 0.5)) border-box;
	border: 1px solid transparent;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	overflow: hidden;
}
.hp-trust__sheen {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(120% 80% at 50% -10%, rgba(226, 203, 151, 0.18), transparent 55%);
	opacity: 0.85;
}
.hp-trust__sep {
	width: 1px;
	height: 56px;
	background: linear-gradient(180deg, transparent, rgba(226, 203, 151, 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: #1a1208;
	flex-shrink: 0;
	box-shadow: 0 4px 14px rgba(212, 168, 75, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.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, #faf3df 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: rgba(226, 203, 151, 0.18); display: inline-block; }
.hp-trust__stars-fill {
	position: absolute;
	left: 0; top: 0;
	overflow: hidden;
	white-space: nowrap;
	background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 50%, var(--gold-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.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(226, 203, 151, 0.08);
	border: 1px solid rgba(226, 203, 151, 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(226, 203, 151, 0.16);
	border-color: rgba(226, 203, 151, 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(226, 203, 151, 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
   ============================================================ */
.hp-prodrow {
	display: grid;
	grid-template-columns: minmax(240px, 1fr) 3fr;
	gap: 16px;
	align-items: stretch;
}
.hp-prodrow__editorial {
	background: var(--bg-2);
	border: 1px solid var(--line);
	padding: 32px 26px;
	display: flex; flex-direction: column; justify-content: center;
}
.hp-prodrow__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: #fff;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.hp-prodrow__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
	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 { align-self: flex-start; }

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

@media (max-width: 900px) {
	.hp-prodrow { grid-template-columns: 1fr; }
	.hp-prodrow__editorial { padding: 24px 20px; }
}

/* ============================================================
   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 */
.hp-carousel--3col .hp-carousel__track > li.product { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }
.hp-carousel--4col .hp-carousel__track > li.product { flex: 0 0 calc((100% - 48px) / 4); scroll-snap-align: start; }

@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 (même style que "Nos univers" / .hp-catgrid). */
	.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(28px, 3.4vw, 42px); }

.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;
}
/* Ambiance "doux" : vert profond + halo sage */
.hp-mood__side--soft {
	background:
		radial-gradient(circle at 78% 12%, rgba(160, 200, 140, 0.18), transparent 55%),
		radial-gradient(circle at 18% 88%, rgba(212, 168, 75, 0.10), transparent 60%),
		linear-gradient(150deg, #11231a 0%, #0a1410 100%);
}
.hp-mood__side--soft .hp-mood__kicker { color: #a3c89a; }

/* Ambiance "intense" : noir profond + halo or */
.hp-mood__side--intense {
	background:
		radial-gradient(circle at 22% 18%, rgba(212, 168, 75, 0.22), transparent 55%),
		radial-gradient(circle at 88% 80%, rgba(232, 196, 118, 0.08), transparent 50%),
		linear-gradient(150deg, #1a1208 0%, #060403 100%);
}
.hp-mood__side--intense .hp-mood__kicker { color: var(--gold); }
.hp-mood__side:hover { border-color: rgba(212, 168, 75, 0.5); }

.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: rgba(255, 255, 255, 0.55);
	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(--gold); }
.hp-mood__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0;
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--gold);
}
.hp-mood__intro {
	color: rgba(255, 255, 255, 0.65);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
	max-width: 380px;
}
.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;
	color: #fff;
	padding: 12px 18px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	transition: all .25s ease;
	margin-top: 10px;
}
.hp-mood__cta:hover {
	background: var(--btn-bg);
	color: var(--btn-fg);
	border-color: transparent;
	transform: translateX(4px);
}

/* 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(255, 255, 255, 0.18) !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(212, 168, 75, 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 */
@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(24px, 5.5vw, 32px); }
	.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 7 — GRILLE 4 CATÉGORIES VISUELLES
   ============================================================ */
.hp-catgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.hp-catcard {
	position: relative;
	display: block;
	min-height: 280px;
	background: var(--bg-2);
	border: 1px solid var(--line);
	overflow: hidden;
	color: var(--text);
	transition: border-color .25s ease;
}
.hp-catcard:hover {
	border-color: transparent;
	background:
		linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
		var(--btn-bg) border-box;
}
.hp-catcard__bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	transition: transform .5s ease;
	z-index: 0;
}
.hp-catcard:hover .hp-catcard__bg { transform: scale(1.05); }
.hp-catcard__bg::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(15,15,15,0.05) 0%, rgba(15,15,15,0.85) 100%);
}
.hp-catcard:not(.hp-catcard--has-image) .hp-catcard__bg {
	background-image: repeating-linear-gradient(45deg, rgba(212, 166, 72, 0.06) 0 8px, transparent 8px 16px);
}
.hp-catcard__body {
	position: absolute; bottom: 0; left: 0; right: 0;
	padding: 22px;
	z-index: 1;
}
.hp-catcard__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 20px;
	margin: 0 0 8px;
	background: transparent;
	-webkit-text-fill-color: #fff;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: -webkit-text-fill-color .25s ease, color .25s ease;
}
.hp-catcard:hover .hp-catcard__title {
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--gold);
}
.hp-catcard__cta {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--gold);
	text-transform: uppercase;
	transition: gap .2s ease;
}
.hp-catcard:hover .hp-catcard__cta { gap: 10px; }

@media (max-width: 1024px) { .hp-catgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
	/* Slider horizontal + fade aux bords (même langage visuel que le rail avis) */
	.hp-catgrid {
		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-catgrid::-webkit-scrollbar { display: none; }
	.hp-catgrid > .hp-catcard {
		flex: 0 0 70%;
		min-height: 200px;
		scroll-snap-align: start;
	}
}

/* ============================================================
   SECTION 8 — TÉMOIGNAGES (4 cards)
   ============================================================ */
.hp-testi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.hp-testi {
	background: var(--bg-2);
	border: 1px solid var(--line);
	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(15,15,15,0.15) 0%, rgba(15,15,15,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(15, 15, 15, 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(212, 166, 72, 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(212, 166, 72, 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 {
	background: var(--bg-2);
	border: 1px solid var(--line);
	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: #1a1a1a;
	background-image: repeating-linear-gradient(45deg, rgba(212, 166, 72, 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 11 — CTA FINAL (Notre sélection signature)
   Fond sombre cohérent avec la charte (pas de fond doré uni).
   Bordure dégradé doré subtile + image produit à droite.
   ============================================================ */
.hp-cta-final {
	background:
		linear-gradient(135deg, var(--bg-2) 0%, #141414 100%) padding-box,
		var(--btn-bg) border-box;
	border: 1px solid transparent;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 0;
	overflow: hidden;
	align-items: stretch;
	position: relative;
}
/* Halo doré décoratif derrière le texte */
.hp-cta-final::before {
	content: "";
	position: absolute;
	top: -120px; left: -120px;
	width: 380px; height: 380px;
	background: radial-gradient(circle at center, rgba(212, 166, 72, 0.18) 0%, transparent 70%);
	pointer-events: none;
}
/* Sheen doré qui balaie le bloc — même animation que le bandeau Avis Garantis. */
.hp-cta-final::after {
	content: '';
	position: absolute;
	top: 0; left: -40%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(226, 203, 151, 0.10) 45%, rgba(226, 203, 151, 0.20) 50%, rgba(226, 203, 151, 0.10) 55%, transparent 100%);
	pointer-events: none;
	transform: skewX(-18deg);
	animation: cbdco-trust-sheen 7s 1.5s ease-in-out infinite;
	z-index: 0;
}
.hp-cta-final__text,
.hp-cta-final__visual { z-index: 1; }
.hp-cta-final__text {
	padding: 56px 48px;
	display: flex; flex-direction: column; justify-content: center;
	position: relative;
	z-index: 1;
}
.hp-cta-final__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: 14px;
}
.hp-cta-final__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	color: var(--text);
}
.hp-cta-final__title em { font-style: normal; color: var(--gold); }
.hp-cta-final__sub { color: var(--text-dim); font-size: 15px; margin: 0 0 26px; max-width: 460px; line-height: 1.55; }
.hp-cta-final__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hp-cta-final__visual {
	position: relative;
	min-height: 320px;
	background-size: cover;
	background-position: center;
	border-left: 1px solid rgba(212, 166, 72, 0.25);
}
.hp-cta-final__visual::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(270deg, transparent 50%, rgba(20, 20, 20, 0.5) 100%);
	pointer-events: none;
}

@media (max-width: 900px) {
	.hp-cta-final { grid-template-columns: 1fr; }
	.hp-cta-final__text { padding: 36px 24px; }
	.hp-cta-final__visual { min-height: 240px; border-left: 0; border-top: 1px solid rgba(212, 166, 72, 0.25); }
}
@media (max-width: 600px) {
	/* Bloc Signature mobile — visuel en haut, texte en bas, CTAs full-width */
	.hp-cta-final {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto auto;
		border-radius: 14px;
		mask-image: none !important;
		-webkit-mask-image: none !important;
		/* Bordure subtile (style des autres cards) au lieu du dégradé doré criard */
		background: linear-gradient(135deg, var(--bg-2) 0%, #141414 100%) !important;
		border: 1px solid var(--line) !important;
	}
	/* Visuel en premier (image en haut, comme une carte) */
	.hp-cta-final__visual {
		order: -1 !important;
		min-height: 140px !important;
		border-left: 0 !important;
		border-top: 0 !important;
		border-bottom: 1px solid var(--line) !important;
		aspect-ratio: 16/9;
	}
	.hp-cta-final__visual::after {
		background: linear-gradient(180deg, transparent 50%, rgba(20, 20, 20, 0.5) 100%) !important;
	}
	.hp-cta-final__text {
		padding: 20px 16px !important;
		gap: 10px;
	}
	.hp-cta-final__eyebrow {
		font-size: 10.5px !important;
		margin-bottom: 8px !important;
	}
	.hp-cta-final__title {
		font-size: 22px !important;
		line-height: 1.2 !important;
		margin: 0 0 8px !important;
	}
	.hp-cta-final__sub {
		font-size: 13px !important;
		line-height: 1.45 !important;
		margin: 0 0 16px !important;
	}
	/* CTAs : pleine largeur, empilés */
	.hp-cta-final__actions {
		flex-direction: column !important;
		gap: 8px !important;
		width: 100%;
	}
	.hp-cta-final__actions .btn {
		width: 100% !important;
		justify-content: center !important;
		text-align: center;
	}
	/* Halo et sheen plus discrets sur mobile */
	.hp-cta-final::before {
		width: 220px !important; height: 220px !important;
		top: -80px !important; left: -80px !important;
	}
	.hp-cta-final::after { animation-duration: 9s !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 48px;
}
.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(--gold-soft); transform: rotate(45deg) scale(1.1); }
.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(226, 203, 151, 0.10) 45%, rgba(226, 203, 151, 0.18) 50%, rgba(226, 203, 151, 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, catgrid, 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-catgrid,
	.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-catgrid,
	.hp-videos,
	.hp-videos--landscape2,
	.hp-videos--landscape3,
	.hp-videos--portrait4,
	.hp-blog-grid,
	.hp-mood {
		scrollbar-width: thin !important;
		scrollbar-color: var(--gold, #d4a648) transparent !important;
	}
	.hp-hero__side::-webkit-scrollbar,
	.hp-catgrid::-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(255,255,255,0.06) !important;
	}
	.hp-hero__side::-webkit-scrollbar-thumb,
	.hp-catgrid::-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, linear-gradient(90deg, #f0d28a, #d4a648, #b8862c)) !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. */
}