/* ==========================================================================
   Puff Division - main stylesheet (mobile-first)
   Breakpoints: 768px (tablet), 1200px (desktop)
   ========================================================================== */

/* ----- Fonts (local, GDPR-friendly) ----- */
/* Baloo 2 (variable, 400-800): rounded display face matching the candy logo.
   Replaces Playfair Display - one brand voice instead of luxury-serif vs
   bubble-logo dissonance. */
@font-face {
	font-family: "Baloo 2";
	src: url("../fonts/Baloo2-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Baloo 2";
	src: url("../fonts/Baloo2-latin-ext.woff2") format("woff2");
	font-weight: 400 800;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Nunito";
	src: url("../fonts/Nunito-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Nunito";
	src: url("../fonts/Nunito-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Nunito";
	src: url("../fonts/Nunito-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "Nunito";
	src: url("../fonts/Nunito-800.woff2") format("woff2");
	font-weight: 800;
	font-display: swap;
}

/* ----- Design tokens (sampled from the mockups) ----- */
:root {
	/* Safe-area basse ATTENUEE : avec viewport-fit=cover, l'indicateur
	   home ajoute 34px d'un coup en plein ecran et les barres deviennent
	   tres hautes (retour Baptiste 26/08). On ne garde que l'excedent
	   au-dela de 14px : 0 quand la barre d'outils du navigateur est
	   visible, ~20px en plein ecran. Toute barre ancree en bas DOIT
	   utiliser cette variable, jamais env() directement. */
	--pd-safe-b: max(0px, calc(env(safe-area-inset-bottom, 0px) - 14px));
	--bg: #FEF9F2;
	--bg-cream: #FDF4EA;
	--bg-cream-deep: #FBEDDD;
	--surface: #FFFFFF;
	--pink: #F3507B;
	--pink-dark: #DE3663;
	--pink-soft: #FCE3EB;
	--pink-pale: #FDF1F1;
	--pink-hot: #FF2E8C;
	--pink-hot-dark: #E5117A;
	/* Gamme rose harmonisée (07/2026) : plus vive que l'ancien dusty rose jugé
	   pâlot, plus douce que le néon #FF2E8C jugé agressif. Le hero et les
	   bandeaux (promo, chips fidélité) puisent dans la MÊME famille. */
	--rose-1: #EC6FA6;
	--rose-2: #DE5292;
	--rose-3: #BE3D7C;
	--grad-band: linear-gradient(115deg, #E9509A 0%, #CE3D82 55%, #AF336C 100%);
	--grad-pink: linear-gradient(135deg, #FF6FAE 0%, #F3507B 45%, #E5117A 100%);
	--grad-hot: linear-gradient(90deg, #FF2E8C 0%, #E5117A 100%);
	--yellow: #FCC23F;
	--yellow-dark: #E5A821;
	--star: #FDD14C;
	--star-off: #EFE4D2;
	--green: #2FA46A;
	--green-soft: #E2F5EA;
	--ink: #343135;
	--muted: #6A6370;
	--line: rgba(52, 49, 53, 0.08);
	--radius-lg: 24px;
	--radius-md: 16px;
	--radius-sm: 12px;
	--shadow-soft: 0 12px 32px rgba(222, 54, 99, 0.07), 0 2px 8px rgba(52, 49, 53, 0.05);
	--shadow-pop: 0 16px 40px rgba(222, 54, 99, 0.14);
	--font-serif: "Baloo 2", "Nunito", "Segoe UI", system-ui, sans-serif;
	--font-sans: "Nunito", "Segoe UI", system-ui, sans-serif;
	--container: 1240px;
	--sect-pad: 44px;
}
@media (min-width: 768px) {
	:root { --sect-pad: 64px; }
}
@media (min-width: 1200px) {
	:root { --sect-pad: 90px; }
}

/* ----- Base ----- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
html, body { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0 0 0.7em; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; }
/* color: inherit obligatoire : sans lui, Safari iOS peint le texte des
   boutons nus en BLEU systeme (vu par Baptiste dans le volet saveurs).
   font: inherit remplace aussi la police systeme 11px des boutons iOS. */
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-radius: 4px; }

.pd-container { max-width: var(--container); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) {
	.pd-container { padding-inline: 24px; }
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.pd-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--pink);
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 12px 0;
}
.pd-skip-link:focus { left: 0; }

/* ----- Buttons ----- */
.pd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.pd-btn:hover { transform: translateY(-1px); }
.pd-btn-pink { background: var(--grad-pink); color: #fff; box-shadow: 0 8px 22px rgba(229, 17, 122, 0.38); }
.pd-btn-pink:hover { background: linear-gradient(135deg, #F45C9E 0%, #E4436F 45%, #CC0F6D 100%); box-shadow: 0 10px 26px rgba(229, 17, 122, 0.45); }
.pd-btn-yellow { background: var(--yellow); color: #5C430E; box-shadow: 0 8px 20px rgba(252, 194, 63, 0.35); }
.pd-btn-yellow:hover { background: var(--yellow-dark); color: #fff; }
.pd-btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: 0 4px 14px rgba(52, 49, 53, 0.06); }
.pd-btn-outline:hover { border-color: var(--pink); color: var(--pink); }
.pd-btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.pd-btn-ghost:hover { border-color: var(--pink); color: var(--pink); }
.pd-btn-sm { padding: 9px 20px; font-size: 14px; }
.pd-btn-block { display: flex; width: 100%; }

/* ----- Icon chips / badges ----- */
.pd-ic { flex: none; }
.pd-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink);
	transition: color 0.15s, border-color 0.15s;
}
.pd-iconbtn:hover { color: var(--pink); border-color: var(--pink); }
.pd-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px; height: 48px;
	border-radius: 14px;
}
.pd-chip-pink { background: var(--pink-soft); color: var(--pink); }
.pd-chip-yellow { background: #FDEEC8; color: #C8901A; }
.pd-chip-flag { background: #FDEEE2; }
.pd-chip-pink-soft { background: var(--pink-soft); color: var(--pink); width: 34px; height: 34px; border-radius: 50%; }
.pd-chip-green-soft { background: var(--green-soft); color: var(--green); width: 34px; height: 34px; border-radius: 50%; }
.pd-badge-18 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	flex: none;
	border-radius: 50%;
	background: var(--pink);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
}
.pd-flag {
	display: inline-block;
	width: 26px; height: 19px;
	border-radius: 4px;
	background: linear-gradient(90deg, #2E4A9E 33.3%, #fff 33.3% 66.6%, #E63946 66.6%);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.pd-stars { display: inline-flex; gap: 2px; vertical-align: middle; }

/* ==========================================================================
   Topbar
   ========================================================================== */
.pd-topbar {
	background: var(--bg-cream);
	border-bottom: 1px solid var(--line);
	font-size: 11px;
	font-weight: 700;
}
.pd-topbar-in {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 8px;
	padding-block: 7px;
}
.pd-topbar-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pd-topbar-item .pd-ic { width: 14px; height: 14px; }
.pd-topbar-item .pd-badge-18 { width: 18px; height: 18px; font-size: 8px; }
.pd-topbar-long { display: none; }
@media (min-width: 768px) {
	.pd-topbar-in { justify-content: center; gap: 56px; }
	.pd-topbar-long { display: inline; }
	.pd-topbar-short { display: none; }
	.pd-topbar { font-size: 14px; }
	.pd-topbar-item { gap: 7px; }
	.pd-topbar-item .pd-ic { width: 18px; height: 18px; }
	.pd-topbar-item .pd-badge-18 { width: 22px; height: 22px; font-size: 9px; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.pd-header {
	position: sticky;
	top: 0;
	z-index: 90;
	/* viewport-fit=cover : en plein ecran iOS le header colle sous la
	   barre d'etat systeme, ce padding l'en ecarte (0 sinon). */
	padding-top: env(safe-area-inset-top, 0px);
	background: var(--bg);
	transition: box-shadow 0.2s ease;
}
.pd-header.is-scrolled { box-shadow: 0 6px 24px rgba(52, 49, 53, 0.08); }
.pd-header-in {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 10px;
	transition: padding 0.2s ease;
}
.pd-logo { margin-inline: auto; }
.pd-logo img { width: 96px; height: auto; transition: width 0.2s ease; }
/* Compact sticky header once scrolling: on mobile every vertical pixel of
   chrome is product space lost. */
@media (max-width: 767px) {
	.pd-header.is-scrolled .pd-header-in { padding-block: 4px; }
	.pd-header.is-scrolled .pd-logo img { width: 64px; }
}
.pd-nav { display: none; }
.pd-header-actions { display: flex; align-items: center; gap: 10px; }
/* Accès compte : visible sur desktop (le menu mobile a déjà son bloc compte) */
.pd-account { display: none; }
.pd-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
}
.pd-cart-label { display: none; }
.pd-cart-bubble {
	position: absolute;
	top: -4px; right: -6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px; height: 19px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--pink);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}
@media (max-width: 1199px) {
	.pd-cart {
		width: 44px; height: 44px;
		border: 1px solid var(--line);
		border-radius: 50%;
		background: var(--surface);
	}
}
@media (min-width: 1200px) {
	.pd-burger { display: none; }
	.pd-logo { margin-inline: 0 8px; }
	.pd-logo img { width: 118px; }
	.pd-nav { display: block; margin-inline: auto; }
	.pd-nav ul { display: flex; gap: 30px; }
	.pd-nav a {
		position: relative;
		font-weight: 700;
		font-size: 15.5px;
		padding-block: 8px;
	}
	.pd-nav a:hover { color: var(--pink); }
	.pd-nav a.is-current { color: var(--pink); }
	.pd-nav a.is-current::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: -2px;
		height: 3px;
		border-radius: 2px;
		background: var(--pink);
	}
	.pd-cart {
		height: 46px;
		padding-inline: 20px;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: var(--surface);
	}
	.pd-cart:hover { border-color: var(--pink); color: var(--pink); }
	.pd-cart-label { display: inline; }
	.pd-cart-bubble { display: none; }
	.pd-account {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 46px;
		padding-inline: 16px;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: var(--surface);
		font-weight: 700;
	}
	.pd-account:hover { border-color: var(--pink); color: var(--pink); }
	.pd-account-label {
		max-width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/* Point vert : signale d'un coup d'œil qu'on est connecté·e */
	.pd-account-dot {
		flex: none;
		width: 9px; height: 9px;
		border-radius: 50%;
		background: var(--green);
		box-shadow: 0 0 0 2px #fff;
	}
}

/* Search bar */
.pd-search { border-top: 1px solid var(--line); background: var(--bg); }
.pd-search-form { display: flex; gap: 10px; padding-block: 12px; }
.pd-search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 11px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	font: inherit;
	color: var(--ink);
}
.pd-search-form input[type="search"]:focus { outline: 2px solid var(--pink); }

/* ==========================================================================
   Mobile menu panel
   ========================================================================== */
.pd-overlay {
	position: fixed;
	inset: 0;
	/* Suit le bas reellement visible (barre d'outils Chrome iOS repliee). */
	bottom: var(--pd-vv-gap, 0px);
	z-index: 110;
	background: rgba(40, 25, 35, 0.4);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.pd-overlay.is-open { opacity: 1; }
.pd-menu-mobile {
	position: fixed;
	top: 0; left: 0;
	bottom: var(--pd-vv-gap, 0px);
	z-index: 120;
	width: min(400px, 88vw);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 16px calc(28px + var(--pd-safe-b, 0px));
	background: #FFFBF5;
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	box-shadow: 12px 0 40px rgba(0, 0, 0, 0.18);
	transform: translateX(-105%);
	transition: transform 0.28s ease;
}
.pd-menu-mobile.is-open { transform: translateX(0); }
.pd-menu-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}
.pd-menu-top img { width: 88px; height: auto; }
.pd-menu-top-actions { display: flex; gap: 8px; }
.pd-cart-mini { position: relative; }
.pd-menu-login {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 18px;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, #FCE7EE, #FDF2F0);
	margin-bottom: 14px;
}
.pd-menu-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 62px; height: 62px;
	border-radius: 50%;
	background: #FBD5E1;
	color: var(--pink);
}
.pd-menu-hello { font-size: 19px; font-weight: 800; margin-bottom: 2px; }
.pd-menu-hello-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.pd-menu-login-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-menu-login-btns .pd-btn { padding: 9px 10px; font-size: 12.5px; }
.pd-menu-list { margin-bottom: 16px; }
.pd-menu-list a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 4px;
	border-bottom: 1px solid var(--line);
	font-size: 16px;
	font-weight: 700;
}
.pd-menu-list a:hover { color: var(--pink); }
.pd-menu-ic { color: var(--pink); display: inline-flex; }
.pd-menu-chev { margin-left: auto; color: var(--muted); display: inline-flex; }
.pd-menu-trust {
	margin-top: 16px;
	padding: 16px 18px;
	border-radius: var(--radius-md);
	background: var(--pink-pale);
}
.pd-trustpilot { font-weight: 800; margin-bottom: 4px; }
.pd-tp-star { color: #00B67A; }
.pd-menu-trust-score { font-size: 22px; display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.pd-menu-trust-score strong { font-weight: 800; }
.pd-menu-trust-count { color: var(--muted); font-size: 13.5px; margin: 0; }
.pd-menu-reassurance {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 12px;
}
.pd-menu-reassurance li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border-radius: var(--radius-sm);
	background: var(--surface);
	border: 1px solid var(--line);
	font-size: 12px;
	line-height: 1.35;
	color: var(--muted);
}
.pd-menu-reassurance li strong { color: var(--ink); font-size: 12.5px; }
.pd-menu-reassurance li > .pd-ic, .pd-menu-reassurance li > .pd-flag { color: var(--pink); flex: none; }
.pd-menu-reassurance-wide { grid-column: 1 / -1; }
.pd-menu-why {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 14px;
	padding: 16px;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, #FDF1E3, #FCE9E9);
}
.pd-mascot-chip {
	width: 96px; height: 96px;
	flex: none;
	object-fit: cover;
	border-radius: 50%;
}
.pd-menu-why-title { font-weight: 800; font-size: 15.5px; margin-bottom: 6px; }
.pd-menu-why ul { display: grid; gap: 4px; }
.pd-menu-why li { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.pd-menu-why .pd-ic { color: var(--green); }
.pd-menu-socials {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}
.pd-menu-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
}
.pd-menu-socials a:hover { color: var(--pink); border-color: var(--pink); }
.pd-menu-news {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	background: var(--pink-soft);
	font-size: 13px;
	line-height: 1.4;
}
.pd-menu-news p { margin: 0; }
.pd-menu-news strong { font-size: 16px; }
.pd-menu-news-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px; height: 46px;
	border-radius: var(--radius-sm);
	background: var(--pink);
	color: #fff;
}
.pd-menu-news-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px; height: 40px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--pink);
	color: #fff;
}
@media (min-width: 1200px) {
	.pd-menu-mobile, .pd-overlay { display: none; }
}

/* ==========================================================================
   Sections - shared headings
   ========================================================================== */
section { padding-block: calc(var(--sect-pad) / 2); }
.pd-h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-size: clamp(26px, 4vw, 34px);
	text-align: center;
	margin-bottom: 28px;
}
/* Section-title strokes: one identical rounded bar on each side (shared
   component for every homepage section title - keep them symmetric) */
.pd-h2-deco, .pd-h2-deco-end {
	display: inline-block;
	flex: none;
	width: 36px; height: 4px;
	border-radius: 2px;
	background: var(--pink-hot);
}
.pd-h2-left { font-size: clamp(24px, 3vw, 30px); margin-bottom: 10px; }
.pd-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 4px;
}
.pd-section-head .pd-h2 { margin-bottom: 24px; }
@media (min-width: 768px) {
	/* Title exactly on the page axis (same axis as the other section titles),
	   "Voir tous les produits" pinned to the right without shifting it */
	.pd-section-head { position: relative; justify-content: center; }
	.pd-section-head .pd-best-all {
		position: absolute;
		right: 0;
		top: calc(50% - 12px);
		transform: translateY(-50%);
	}
}

/* ==========================================================================
   Hero - full-bleed candy band (the boxed card read as an empty landing page)
   ========================================================================== */
.pd-hero { padding-top: 18px; }

.pd-hero--bleed {
	position: relative;
	padding: 0;
	overflow: hidden;
	color: #fff;
	/* Dusty rose ramp: calmer than the old neon pink, still on-brand */
	background:
		radial-gradient(90% 130% at 88% -10%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 55%),
		radial-gradient(70% 100% at 8% 108%, rgba(122, 6, 70, 0.32) 0%, rgba(122, 6, 70, 0) 60%),
		linear-gradient(128deg, var(--rose-1) 0%, var(--rose-2) 50%, var(--rose-3) 100%);
}
.pd-hero--bleed .pd-hero-in {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 10px;
	/* padding-block only: the shorthand would wipe the container's side padding */
	padding-block: 36px 74px;
}
.pd-hero--bleed .pd-hero-text h1 { color: #fff; text-shadow: 0 2px 14px rgba(122, 6, 70, 0.25); }
.pd-hero--bleed .pd-accent { color: var(--yellow); }
.pd-hero--bleed .pd-hero-text > p { color: #fff; }
.pd-hero--bleed .pd-hero-badges { color: #fff; }
.pd-hero--bleed .pd-hero-badges .pd-ic-check { color: #B9FFD9; }
.pd-hero--bleed .pd-hero-trust:hover { text-decoration: underline; }
.pd-hero--bleed .pd-hero-mascot { filter: drop-shadow(0 18px 30px rgba(122, 6, 70, 0.35)); }
.pd-hero--bleed .pd-hero-products { filter: drop-shadow(0 18px 30px rgba(122, 6, 70, 0.3)); }

/* Inverted CTAs on the pink band */
.pd-btn-hero {
	background: #fff;
	color: var(--rose-3);
	box-shadow: 0 12px 28px rgba(122, 6, 70, 0.3);
}
.pd-btn-hero:hover { background: var(--bg); transform: translateY(-1px); }
.pd-btn-hero-ghost {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.65);
}
.pd-btn-hero-ghost:hover { background: rgba(255, 255, 255, 0.24); }

/* Cloud wave into the cream body */
.pd-hero-wave {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	z-index: 1;
	color: var(--bg);
	line-height: 0;
}
.pd-hero-wave svg { width: 100%; height: clamp(28px, 5vw, 70px); display: block; }

@media (min-width: 768px) {
	.pd-hero--bleed .pd-hero-in {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: center;
		min-height: 520px;
		padding: 30px 0 86px;
	}
}
@media (min-width: 1200px) {
	.pd-hero--bleed .pd-hero-in { min-height: 560px; }
	/* Titre court → il peut être gros */
	.pd-hero--bleed .pd-hero-text h1 { font-size: clamp(44px, 4.2vw, 62px); }
}

/* Étoile Trustpilot pleine (remplie, pas juste le contour) */
.pd-hero-badges .pd-ic-star,
.pd-hero-trust .pd-ic-star { fill: currentColor; }

/* Hero : carrousel produits JNR (crossfade doux, autoplay desktop via main.js).
   Sélecteur composé : il doit gagner contre le display:flex de .pd-hero-visual. */
.pd-hero-visual.pd-hero-carousel { display: grid; place-items: center; }
.pd-hero-carousel img {
	grid-area: 1 / 1;
	width: min(88%, 505px);
	height: auto;
	opacity: 0;
	transform: translateY(12px) scale(0.985);
	transition: opacity 0.9s ease, transform 0.9s ease;
	filter: drop-shadow(0 18px 30px rgba(122, 6, 70, 0.3));
}
.pd-hero-carousel img.is-active { opacity: 1; transform: none; }
@media (max-width: 767px) {
	.pd-hero-carousel img { width: min(64%, 320px); }
}

.pd-hero-card {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: 10px;
	padding: 30px 24px 24px;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(90% 120% at 100% 0%, #FCE9E4 0%, rgba(252, 233, 228, 0) 55%),
		var(--bg-cream);
	box-shadow: var(--shadow-soft);
}
.pd-hero-text h1 {
	font-size: clamp(30px, 5.4vw, 52px);
	font-weight: 700;
	letter-spacing: -0.5px;
	margin-bottom: 16px;
}
.pd-accent { color: var(--pink); }
.pd-hero-text > p {
	max-width: 42ch;
	color: var(--muted);
	font-size: clamp(15px, 1.6vw, 17px);
	margin-bottom: 24px;
}
.pd-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.pd-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	font-size: 13px;
	font-weight: 700;
}
.pd-hero-badges span { display: inline-flex; align-items: center; gap: 7px; }
.pd-hero-badges .pd-ic-star { color: var(--yellow); }
.pd-hero-badges .pd-ic-check { color: var(--green); }
.pd-hero-visual {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.pd-hero-mascot {
	width: 48%;
	max-width: 470px;
	min-width: 0;
	margin-right: -7%;
	/* mask removed: mascotte-dragon.webp is properly cut out now */
	z-index: 1;
}
.pd-hero-products { width: 66%; max-width: 590px; min-width: 0; }
@media (min-width: 768px) {
	.pd-hero-visual { min-height: 300px; }
}
@media (min-width: 768px) {
	.pd-hero-card {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: center;
		padding: 48px 44px;
	}
	.pd-hero-badges {
		display: flex;
		flex-wrap: wrap;
		gap: 26px;
		font-size: 14.5px;
		font-weight: 700;
	}
	.pd-hero-badges span { display: inline-flex; align-items: center; gap: 8px; }
	.pd-hero-badges .pd-ic-star { color: var(--yellow); }
	.pd-hero-badges .pd-ic-check { color: var(--green); }
}
.pd-hero-trust {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}
.pd-hero-trust:hover { text-decoration: underline; }
@media (min-width: 1200px) {
	.pd-hero-card { padding: 64px 64px 56px; }
}

/* ==========================================================================
   Reassurance
   ========================================================================== */
.pd-reassurance-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.pd-reassurance-grid li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border-radius: var(--radius-md);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-soft);
}
.pd-reassurance-grid h3 {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 800;
	margin: 0 0 3px;
}
.pd-reassurance-grid p { font-size: 13px; color: var(--muted); margin: 0; }
@media (min-width: 1024px) {
	.pd-reassurance-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
	.pd-reassurance-grid li { flex-direction: row; align-items: center; padding: 20px; }
	.pd-reassurance-grid h3 { font-size: 15.5px; }
}

/* ==========================================================================
   Nos univers
   ========================================================================== */
.pd-univers-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pd-univers-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 24px;
	border-radius: var(--radius-lg);
	background: var(--bg-cream);
	box-shadow: var(--shadow-soft);
}
/* Column layout with the CTA pinned to the bottom so the "Découvrir"
   buttons of the three cards sit on the same horizontal line */
.pd-univers-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.pd-univers-text .pd-btn { margin-top: auto; }
.pd-univers-card h3 { font-size: clamp(20px, 2vw, 24px); margin-bottom: 8px; }
.pd-univers-card p { color: var(--muted); font-size: 14.5px; margin-bottom: 16px; }
/* Toutes les images des cartes univers partagent la MÊME hauteur visuelle
   (carton, fioles, dragon) : l'harmonie prime sur la largeur native. */
.pd-univers-card img,
.pd-asset-ph-square {
	height: clamp(150px, 26vw, 215px);
	width: auto;
	max-width: 46%;
	object-fit: contain;
	flex: none;
	filter: drop-shadow(0 12px 18px rgba(52, 49, 53, 0.18));
}
.pd-asset-ph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #CDB9A4;
	background: radial-gradient(closest-side, #FBEBD9, rgba(251, 235, 217, 0));
	border-radius: var(--radius-md);
	filter: none !important;
}
.pd-asset-ph-square { aspect-ratio: 1; height: auto; }
.pd-univers-photo { border-radius: 14px; object-fit: cover; }
@media (min-width: 768px) {
	.pd-univers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	.pd-univers-card { flex-direction: column-reverse; text-align: left; align-items: stretch; }
	.pd-univers-card img, .pd-asset-ph-square { align-self: center; max-width: 82%; }
}
@media (min-width: 1200px) {
	.pd-univers-card { flex-direction: row; padding: 32px; }
	.pd-univers-card img, .pd-asset-ph-square { align-self: center; max-width: 46%; }
}

/* ==========================================================================
   Meilleures ventes
   ========================================================================== */
.pd-products {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max(170px, calc(50% - 7px));
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 10px 4px 18px;
	scrollbar-width: thin;
}
.pd-product-card {
	position: relative;
	display: grid;
	grid-template-columns: 44% 1fr;
	gap: 4px 10px;
	align-items: center;
	scroll-snap-align: start;
	padding: 12px;
	border-radius: var(--radius-md);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-soft);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pd-product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
/* Product badge (Best-seller / Nouveau / TOP): single component -
   DA yellow background, white text, whatever the label */
.pd-top-badge {
	position: absolute;
	top: 8px; left: 8px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-dark) 100%);
	color: #fff;
	text-shadow: 0 1px 2px rgba(52, 49, 53, 0.3);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.4px;
	box-shadow: 0 4px 10px rgba(229, 168, 33, 0.4);
}
.pd-product-media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
}
.pd-product-info { display: flex; flex-direction: column; gap: 4px; }
.pd-product-info h3 {
	font-family: var(--font-sans);
	font-size: 13.5px;
	font-weight: 800;
	margin: 0;
}
.pd-product-info h3 a:hover { color: var(--pink); }
.pd-product-price del { color: var(--muted); font-size: 0.72em; font-weight: 700; text-decoration: line-through; margin-right: 5px; }
.pd-product-price ins { text-decoration: none; color: var(--pink); }
/* .pd-top-badge-alt intentionally styled like the base badge: one shared
   badge component for every label (Best-seller, Nouveau, TOP…) */
.pd-heart {
	position: absolute;
	top: 10px; right: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--muted);
	cursor: pointer;
	transition: color 0.15s ease, transform 0.15s ease;
}
.pd-heart:hover { transform: scale(1.08); color: var(--pink); }
.pd-heart[aria-pressed="true"] { color: var(--pink); }
.pd-heart[aria-pressed="true"] svg { fill: var(--pink); }
.pd-product-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; }
.pd-product-card .pd-stars svg { width: 12px; height: 12px; }
.pd-rating-count { font-size: 11px; color: var(--muted); }
.pd-product-price { font-size: 16px; font-weight: 800; margin: 1px 0 6px; }
.pd-btn-add { padding: 8px 12px; font-size: 12.5px; }
.pd-btn-add.loading { opacity: 0.6; pointer-events: none; }
.pd-btn-add.added::after { content: " ✓"; }
.pd-products + .added_to_cart { display: none; }
@media (min-width: 768px) {
	.pd-products {
		grid-auto-flow: row;
		grid-auto-columns: unset;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
		overflow: visible;
		padding-inline: 0;
	}
	.pd-product-card { grid-template-columns: 1fr; gap: 6px 14px; padding: 18px; }
	.pd-product-media img { border-radius: var(--radius-sm); }
	.pd-product-info { gap: 5px; }
	.pd-top-badge { top: 10px; left: 10px; padding: 5px 12px; font-size: 11.5px; }
	.pd-product-info h3 { font-size: 16px; }
	.pd-product-card .pd-stars svg { width: 16px; height: 16px; }
	.pd-product-rating { gap: 6px; }
	.pd-rating-count { font-size: 12.5px; }
	.pd-product-price { font-size: 19px; margin: 2px 0 8px; }
	.pd-btn-add { width: 100%; padding: 10px 18px; font-size: 14px; }
}
@media (min-width: 1200px) {
	.pd-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
}

/* ==========================================================================
   Le conseil du dragon
   ========================================================================== */
.pd-conseil-card {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 26px 22px;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(80% 130% at 0% 100%, #FCE5DE 0%, rgba(252, 229, 222, 0) 60%),
		var(--bg-cream);
	box-shadow: var(--shadow-soft);
}
.pd-conseil-mascot {
	width: 92px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	justify-self: center;
	align-self: start;
}
.pd-conseil-carousel { grid-column: 1 / -1; }
@media (min-width: 768px) {
	.pd-conseil-mascot { width: clamp(150px, 20vw, 230px); align-self: center; }
}
.pd-conseil-text h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--pink);
	font-size: clamp(22px, 2.6vw, 28px);
}
.pd-conseil-text h2 .pd-ic { color: #F08A3C; }
.pd-conseil-text > p { color: var(--ink); font-size: 15px; max-width: 48ch; }
.pd-conseil-chips { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.pd-conseil-chips li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; }
/* Une seule taille de pastille dans ces listes, quelle que soit sa couleur
   (le .pd-chip jaune de base fait 48px : trop grand ici) */
.pd-conseil-chips .pd-chip { width: 34px; height: 34px; border-radius: 50%; }
.pd-conseil-chips .pd-ic { width: 16px; height: 16px; }
.pd-conseil-carousel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pd-flavors {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: 6px;
	scrollbar-width: none;
}
.pd-flavors::-webkit-scrollbar { display: none; }
.pd-flavors li {
	flex: none;
	scroll-snap-align: center;
	display: grid;
	justify-items: center;
	gap: 8px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}
/* Pastille cliquable : l'ancre reproduit la grille du li (image au-dessus,
   libelle dessous) et herite de son gap responsive. */
.pd-flavors li a {
	display: grid;
	justify-items: center;
	gap: inherit;
	color: inherit;
	text-align: inherit;
	border-radius: var(--radius-md);
}
.pd-flavors img {
	width: 84px; height: 84px;
	object-fit: contain;
	border-radius: 50%;
	background: var(--surface);
	padding: 10px;
	box-shadow: var(--shadow-soft);
	transition: transform 0.15s ease;
}
.pd-flavors li a:hover img,
.pd-flavors li a:focus-visible img { transform: scale(1.06); }
.pd-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px; height: 42px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink);
	box-shadow: 0 4px 12px rgba(52, 49, 53, 0.1);
	transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.pd-arrow:hover { color: var(--pink); border-color: var(--pink); transform: scale(1.05); }
.pd-conseil .pd-arrow { display: none; }
@media (min-width: 768px) {
	.pd-conseil-card { grid-template-columns: auto minmax(0, 1fr); padding: 30px; }
	.pd-conseil .pd-arrow { display: inline-flex; }
	.pd-flavors img { width: 96px; height: 96px; }
}
@media (min-width: 1200px) {
	.pd-conseil-card { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.3fr); padding: 34px 38px; }
	.pd-conseil-carousel { grid-column: auto; justify-self: stretch; }
	.pd-flavors { gap: 16px; margin-inline: auto; }
	.pd-flavors img { width: 86px; height: 86px; }
}

/* ==========================================================================
   Avis clients
   ========================================================================== */
.pd-reviews-in {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	align-items: stretch;
}
.pd-reviews-score {
	padding: 22px;
	border-radius: var(--radius-md);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-soft);
	text-align: center;
	align-self: center;
}
.pd-reviews-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 20px;
	margin-bottom: 4px;
}
.pd-reviews-note strong { font-size: 26px; font-weight: 800; }
.pd-reviews-base { color: var(--muted); font-size: 14px; margin: 0; }
.pd-reviews-list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(86%, 330px);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 6px 4px 14px;
	/* No scrollbar: the arrows (and touch/wheel) drive the carousel */
	scrollbar-width: none;
}
.pd-reviews-list::-webkit-scrollbar { display: none; }
.pd-review-card {
	position: relative;
	scroll-snap-align: start;
	padding: 22px 22px 18px;
	border-radius: var(--radius-md);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-soft);
	font-size: 14.5px;
}
.pd-quote { color: var(--pink); display: inline-flex; margin-bottom: 6px; }
.pd-review-stars { margin: 0 0 6px; }
.pd-review-meta { display: flex; align-items: center; gap: 12px; font-size: 13.5px; margin: 0; }
.pd-verified { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-weight: 700; }
.pd-reviews-prev, .pd-reviews-next { display: none; }
/* Les flèches vivent DANS le wrapper du carrousel : elles encadrent les avis
   eux-mêmes, pas le conteneur global (la carte de score reste à gauche). */
.pd-reviews-carousel { position: relative; min-width: 0; display: grid; }
@media (min-width: 1200px) {
	.pd-reviews-in { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; }
	.pd-reviews-list {
		/* Horizontal carousel showing 3 of the 8 Trustpilot reviews at a time. */
		grid-auto-columns: calc((100% - 28px) / 3);
		padding: 6px 4px 14px;
	}
	.pd-reviews-prev, .pd-reviews-next {
		display: inline-flex;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}
	.pd-reviews-prev { left: -21px; }
	.pd-reviews-next { right: -21px; }
	/* Statiques au survol : les hovers génériques de .pd-arrow (scale() puis
	   translateY(-1px) du bloc « v2 » plus bas) écrasaient le translateY(-50%)
	   de centrage et faisaient glisser la flèche vers le bas. Le sélecteur
	   double-classe garde la priorité quel que soit l'ordre dans le fichier. */
	.pd-arrow.pd-reviews-prev:hover, .pd-arrow.pd-reviews-next:hover { transform: translateY(-50%); }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.pd-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pd-faq-item { min-width: 0; }
.pd-faq-item {
	border-radius: var(--radius-md);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}
.pd-faq-item summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	list-style: none;
}
.pd-faq-item summary::-webkit-details-marker { display: none; }
.pd-faq-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px; height: 40px;
	border-radius: var(--radius-sm);
	background: var(--pink-pale);
	color: var(--pink);
}
/* FAQ 18+ pictogram: light outline version (white disc, pink ring and text)
   so it sits at the same visual weight as the other FAQ icons */
.pd-faq-ic .pd-badge-18 {
	width: 26px; height: 26px;
	background: #fff;
	border: 2px solid var(--pink);
	color: var(--pink);
	font-size: 9px;
}
.pd-faq-chev { margin-left: auto; color: var(--muted); display: inline-flex; transition: transform 0.2s ease; }
.pd-faq-item[open] .pd-faq-chev { transform: rotate(180deg); }
.pd-faq-item > p { padding: 0 18px 18px 72px; margin: 0; color: var(--muted); font-size: 14.5px; }
@media (min-width: 768px) {
	.pd-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.pd-footer {
	margin-top: calc(var(--sect-pad) / 2);
	padding: 44px 0 26px;
	background: #FEF4E8;
	border-top: 1px solid var(--line);
}
.pd-footer-grid { display: grid; gap: 30px; }
.pd-footer-brand img { width: 110px; margin-bottom: 12px; }
.pd-footer-brand p { color: var(--muted); font-size: 14px; max-width: 30ch; }
.pd-socials { display: flex; gap: 10px; margin-top: 12px; }
.pd-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--surface);
}
.pd-socials a:hover { color: var(--pink); border-color: var(--pink); }
.pd-footer-title { font-weight: 800; font-size: 15px; margin-bottom: 12px; }
.pd-footer-col ul { display: grid; gap: 8px; }
.pd-footer-col a { color: var(--muted); font-size: 14px; }
.pd-footer-col a:hover { color: var(--pink); }
.pd-footer-news > p:not(.pd-footer-title) { color: var(--muted); font-size: 14px; }
.pd-news-form { display: flex; gap: 8px; margin-top: 10px; }
.pd-news-form input {
	flex: 1;
	min-width: 0;
	padding: 10px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	font: inherit;
	font-size: 14px;
}
.pd-news-form input:focus { outline: 2px solid var(--pink); }
.pd-news-ok { color: var(--green); font-weight: 700; font-size: 14px; margin-top: 8px; }
.pd-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--muted);
}
.pd-footer-bottom p { margin: 0; }
.pd-footer-legal { display: flex; flex-wrap: wrap; gap: 16px; }
.pd-footer-legal a:hover { color: var(--pink); }
.pd-payments { display: flex; align-items: center; gap: 8px; }
.pd-pay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px; height: 28px;
	padding-inline: 8px;
	border-radius: 6px;
	border: 1px solid var(--line);
	background: var(--surface);
	font-size: 11px;
	font-weight: 800;
	color: var(--ink);
}
.pd-pay-visa { color: #1A1F71; font-style: italic; }
.pd-pay-pp { color: #003087; }
.pd-pay-mc { gap: 0; }
.pd-pay-mc i {
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #EB001B;
}
.pd-pay-mc i + i { background: #F79E1B; margin-left: -6px; mix-blend-mode: multiply; }
@media (min-width: 768px) and (max-width: 1023px) {
	.pd-footer-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	.pd-footer-brand, .pd-footer-news { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.pd-footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.4fr; gap: 24px; }
}
@media (max-width: 767px) {
	.pd-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pd-footer-brand, .pd-footer-news { grid-column: 1 / -1; }
}

/* ==========================================================================
   Mobile bottom nav
   ========================================================================== */
.pd-bottomnav {
	position: fixed;
	left: 0; right: 0;
	/* --pd-vv-gap : ecart layout/visuel pose par main.js (barre d'outils
	   Chrome iOS repliee ou depliee). 0px au repos. */
	bottom: var(--pd-vv-gap, 0px);
	z-index: 100;
	display: flex;
	justify-content: space-around;
	padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + var(--pd-safe-b, 0px)) max(4px, env(safe-area-inset-left));
	background: var(--surface);
	border-top: 1px solid var(--line);
	box-shadow: 0 -6px 24px rgba(52, 49, 53, 0.08);
}
/* Rideau anti-trou : pendant l'animation de la barre d'outils du navigateur,
   la zone revelee sous la barre montrait le contenu de la page. Ce voile
   prolonge le fond de la barre vers le bas et couvre la bande le temps que
   le recalage JS retombe. */
.pd-bottomnav::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 200px;
	background: var(--surface);
	pointer-events: none;
}
.pd-bottomnav a {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 4px 10px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--muted);
	border-radius: 10px;
}
.pd-bottomnav a.is-current, .pd-bottomnav a:hover { color: var(--pink); }
.pd-bottomnav .pd-cart-bubble { top: -2px; right: 2px; }
body { padding-bottom: 64px; }
/* Tunnel de commande : pas de navigation du bas, le client valide sa
   commande (decision Baptiste 26/08). La page de confirmation
   (order-received) recupere la nav pour repartir dans le site. */
body.woocommerce-checkout:not(.woocommerce-order-received) .pd-bottomnav { display: none; }
body.woocommerce-checkout:not(.woocommerce-order-received) { padding-bottom: 0; }
/* While the PDP buy bar is on screen, it replaces the bottom nav (one fixed
   bar at a time - screen estate is the scarcest resource on mobile). */
/* padding-bottom anime : la safe-area (~20px) apparait au repli de la
   barre d'outils du navigateur, sans transition la barre sautait. */
.pd-bottomnav { transition: transform 0.25s ease, bottom 0.18s ease, padding-bottom 0.25s ease; }
body.pd-buybar-active .pd-bottomnav { transform: translateY(110%); }
@media (min-width: 768px) {
	.pd-bottomnav { display: none; }
	body { padding-bottom: 0; }
}

/* ==========================================================================
   Fallback pages (archives, Woo defaults - restyled lightly)
   ========================================================================== */
.pd-fallback { padding-block: 30px; }
.pd-breadcrumb { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.pd-breadcrumb a { color: var(--pink); }
.pd-fallback .woocommerce ul.products li.product,
.pd-fallback article { background: var(--surface); border-radius: var(--radius-md); padding: 18px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Category pages (Puffs / Recharges mockups)
   ========================================================================== */

.pd-cat-breadcrumb {
	margin: 14px 0 0;
	padding: 10px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
}
.pd-cat-breadcrumb a { color: var(--ink); }
.pd-cat-breadcrumb a:hover { color: var(--pink); }
.pd-cat-breadcrumb .breadcrumb_last { color: var(--pink); }

/* ----- Hero ----- */
.pd-cat-hero { padding-block: 14px 8px; }
.pd-cat-hero-card {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 8px 12px;
	align-items: center;
	padding: 20px 16px 14px;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(120% 150% at 100% 0%, rgba(243, 80, 123, 0.14) 0%, rgba(243, 80, 123, 0) 55%),
		linear-gradient(135deg, #FDF1EC 0%, #FDEDE8 45%, #FCE7E6 100%);
	border: 1px solid rgba(243, 80, 123, 0.08);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}
.pd-cat-hero-text h1 {
	font-family: var(--font-serif);
	font-size: clamp(24px, 5.4vw, 46px);
	font-weight: 600;
	line-height: 1.12;
	margin: 0 0 10px;
}
.pd-cat-hero-text p { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; max-width: 46ch; }
.pd-cat-hero-text .pd-hero-ctas { flex-direction: column; align-items: stretch; gap: 9px; margin-bottom: 4px; }
.pd-cat-hero-text .pd-btn { padding: 11px 14px; font-size: 13px; white-space: nowrap; }
.pd-cat-hero-visual { align-self: stretch; display: grid; place-items: center; }
.pd-cat-hero-visual img { width: 100%; height: 100%; max-height: 340px; object-fit: contain; }
.pd-cat-hero-chips {
	grid-column: 1 / -1;
	display: flex;
	gap: 10px;
	margin: 6px -16px -14px;
	padding: 4px 16px 14px;
	overflow-x: auto;
	scrollbar-width: none;
	list-style: none;
}
.pd-cat-hero-chips::-webkit-scrollbar { display: none; }
.pd-cat-hero-chips li {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: 0 4px 12px rgba(52, 49, 53, 0.05);
}
.pd-cat-hero-chips .pd-chip { width: 34px; height: 34px; flex: 0 0 auto; }
.pd-cat-hero-chips strong { display: block; font-size: 12.5px; }
.pd-cat-hero-chips span:not(.pd-chip):not(.pd-flag) { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ----- Quick chips + toolbar ----- */
.pd-catalogue { padding-block: 18px var(--sect-pad); }
.pd-cat-chips {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 4px 2px 10px;
}
.pd-cat-chips::-webkit-scrollbar { display: none; }
.pd-cat-chip {
	flex: 0 0 auto;
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line);
	font-size: 13px;
	font-weight: 800;
	color: var(--ink);
	box-shadow: 0 3px 10px rgba(52, 49, 53, 0.05);
	transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.pd-cat-chip:hover { color: var(--pink); transform: translateY(-1px); }
.pd-cat-chip.is-active { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 6px 16px rgba(243, 80, 123, 0.35); }

.pd-cat-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
/* Tiroir filtres mobile désactivé pour l'instant - filtres = desktop uniquement
   (corrections client 07/07/2026). Retirer ce display:none pour le réactiver. */
.pd-filters-toggle { gap: 7px; display: none; }
.pd-cat-sort {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	padding: 9px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	box-shadow: 0 3px 10px rgba(52, 49, 53, 0.05);
}
.pd-cat-sort select {
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--ink);
	padding-right: 2px;
	cursor: pointer;
}
.pd-cat-sort select:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 6px; }

/* ----- Layout: sidebar + grid ----- */
.pd-cat-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }

.pd-cat-aside {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 130;
	width: min(320px, 86vw);
	padding: 18px;
	background: var(--bg);
	overflow-y: auto;
	transform: translateX(-102%);
	transition: transform 0.28s ease;
	box-shadow: 24px 0 60px rgba(52, 49, 53, 0.18);
}
.pd-cat-aside.is-open { transform: translateX(0); }
.pd-cat-aside-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	font-size: 17px;
}
.pd-cat-overlay {
	position: fixed;
	inset: 0;
	z-index: 125;
	background: rgba(52, 49, 53, 0.4);
	backdrop-filter: blur(2px);
}
.pd-filter-group {
	margin-bottom: 10px;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}
.pd-filter-group summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	list-style: none;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--pink);
}
.pd-filter-group summary::-webkit-details-marker { display: none; }
.pd-filter-group summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
.pd-filter-group .pd-faq-chev { color: var(--pink); transition: transform 0.2s ease; }
.pd-filter-group[open] .pd-faq-chev { transform: rotate(180deg); }
.pd-filter-list { margin: 12px 0 2px; display: grid; gap: 10px; list-style: none; padding: 0; }
.pd-check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
}
.pd-check input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.pd-check-box {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border-radius: 6px;
	border: 1.5px solid rgba(52, 49, 53, 0.22);
	background: var(--surface);
	color: transparent;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pd-check input:checked + .pd-check-box { background: var(--pink); border-color: var(--pink); color: #fff; }
.pd-check input:focus-visible + .pd-check-box { outline: 2px solid var(--pink); outline-offset: 2px; }
.pd-filter-count { color: var(--muted); font-weight: 600; font-size: 12.5px; }

/* Price slider (two native thumbs on one track) */
.pd-price-slider { position: relative; margin: 18px 4px 4px; padding-top: 6px; }
.pd-price-track {
	position: relative;
	height: 5px;
	border-radius: 999px;
	background: var(--pink-soft);
}
.pd-price-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--pink); }
.pd-price-slider input[type="range"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 18px;
	margin: 0;
	appearance: none;
	background: transparent;
	pointer-events: none;
}
.pd-price-slider input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--surface);
	border: 3px solid var(--pink);
	box-shadow: 0 2px 8px rgba(222, 54, 99, 0.35);
	pointer-events: auto;
	cursor: grab;
}
.pd-price-slider input[type="range"]::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--surface);
	border: 3px solid var(--pink);
	box-shadow: 0 2px 8px rgba(222, 54, 99, 0.35);
	pointer-events: auto;
	cursor: grab;
}
.pd-price-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--pink); outline-offset: 2px; }
.pd-price-labels {
	display: flex;
	justify-content: space-between;
	margin: 12px 0 0;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--muted);
}
.pd-cat-aside-actions { display: flex; gap: 10px; margin-top: 14px; }

/* ----- Product grid ----- */
.pd-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pd-cat-grid .pd-product-card {
	grid-template-columns: 1fr;
	gap: 4px;
	padding: 10px;
	text-align: center;
}
.pd-cat-grid .pd-product-media { margin-top: 20px; }
.pd-cat-grid .pd-product-info { align-items: center; }
.pd-cat-grid .pd-product-info h3 { font-size: 12.5px; }
.pd-cat-grid .pd-product-rating { justify-content: center; }
.pd-cat-grid .pd-product-card .pd-stars svg { width: 11px; height: 11px; }
.pd-cat-grid .pd-rating-count { font-size: 10.5px; }
.pd-cat-grid .pd-product-price { font-size: 14px; margin: 0 0 6px; }
.pd-cat-grid .pd-product-price del { display: block; margin-right: 0; }
.pd-cat-grid .pd-btn-add { width: 100%; padding: 7px 8px; font-size: 11.5px; }
.pd-cat-grid .pd-top-badge { top: 8px; left: 8px; }
.pd-cat-grid .pd-heart { width: 40px; height: 40px; top: 6px; right: 6px; }
.pd-cat-grid .pd-heart svg { width: 18px; height: 18px; }

.pd-cat-empty {
	padding: 40px 20px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}
.pd-cat-empty p:first-child { font-size: 17px; }
.pd-cat-empty .pd-btn { margin-top: 8px; }

/* Pagination */
.pd-cat-main .navigation.pagination { margin-top: 22px; }
.pd-cat-main .nav-links { display: flex; justify-content: center; gap: 8px; }
.pd-cat-main .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding-inline: 8px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line);
	font-weight: 800;
	font-size: 13.5px;
	color: var(--ink);
}
.pd-cat-main .page-numbers.current { background: var(--pink); border-color: var(--pink); color: #fff; }
.pd-cat-main .page-numbers:hover:not(.current) { color: var(--pink); }

/* ----- ≥560px: roomier cards ----- */
@media (min-width: 560px) {
	.pd-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.pd-cat-grid .pd-product-card { padding: 14px; }
	.pd-cat-grid .pd-product-info h3 { font-size: 14px; }
	.pd-cat-grid .pd-product-price { font-size: 16px; }
	.pd-cat-grid .pd-btn-add { font-size: 13px; padding: 9px 12px; }
}

/* ----- ≥768px ----- */
@media (min-width: 768px) {
	.pd-cat-breadcrumb {
		margin-top: 18px;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
	}
	.pd-cat-hero-card { padding: 34px 34px 20px; gap: 10px 26px; }
	.pd-cat-hero-text p { font-size: 15px; }
	.pd-cat-hero-text .pd-hero-ctas { flex-direction: row; align-items: center; gap: 12px; }
	.pd-cat-hero-text .pd-btn { padding: 13px 26px; font-size: 15px; }
	.pd-cat-hero-chips { margin: 10px 0 0; padding: 4px 0 6px; overflow: visible; flex-wrap: wrap; }
	.pd-cat-hero-chips li:nth-child(4) { display: none; }
	.pd-cat-grid .pd-product-media { margin-top: 26px; }
	.pd-cat-grid .pd-top-badge { top: 12px; left: 12px; }
	.pd-cat-grid .pd-heart { width: 40px; height: 40px; top: 10px; right: 10px; }
	.pd-cat-grid .pd-heart svg { width: 20px; height: 20px; }
	.pd-cat-grid .pd-product-info h3 { font-size: 15.5px; }
	.pd-cat-grid .pd-product-card .pd-stars svg { width: 14px; height: 14px; }
	.pd-cat-grid .pd-rating-count { font-size: 12px; }
	.pd-cat-grid .pd-product-price { font-size: 18px; }
	.pd-cat-grid .pd-product-price del { display: inline; margin-right: 5px; }
}

/* ----- ≥1100px: sticky sidebar ----- */
@media (min-width: 1100px) {
	.pd-cat-layout { grid-template-columns: 258px minmax(0, 1fr); gap: 24px; }
	.pd-cat-layout--nofilters { grid-template-columns: minmax(0, 1fr); }
	.pd-cat-aside {
		position: sticky;
		top: 96px;
		inset: auto;
		width: auto;
		padding: 0;
		background: transparent;
		transform: none;
		box-shadow: none;
		overflow: visible;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		transition: none;
	}
	.pd-cat-aside-head, .pd-filters-toggle, .pd-cat-overlay { display: none; }
	.pd-cat-grid { gap: 20px; }
	.pd-cat-hero-text h1 { font-size: 46px; }

	/* Corrections client 07/07/2026 (desktop uniquement) - hero catégorie
	   compact : le visuel occupe toute la hauteur de la carte à droite, les
	   garanties passent sous le texte (fini la bande vide sous le titre).
	   Scopé .pd-cat-hero pour ne pas toucher le hero Fidélité qui partage
	   ces classes. */
	.pd-cat-hero .pd-cat-hero-card { grid-template-columns: 1.1fr 0.9fr; padding: 26px 34px 18px; }
	.pd-cat-hero .pd-cat-hero-text h1 { font-size: 40px; }
	.pd-cat-hero .pd-cat-hero-visual {
		position: relative;
		grid-column: 2;
		grid-row: 1 / 3;
		min-height: 0;
		margin: -26px -34px -18px 0;
	}
	.pd-cat-hero .pd-cat-hero-visual img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: contain;
	}
	/* Variante photo produit (fond opaque, ex. Recharges tant que l'asset
	   hero n'existe pas) : encadrée au lieu de déborder. */
	.pd-cat-hero .pd-cat-hero-visual--photo { margin: -12px 0; }
	.pd-cat-hero .pd-cat-hero-visual--photo img {
		position: static;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 280px;
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-soft);
	}
	.pd-cat-hero .pd-cat-hero-chips { grid-column: 1; grid-row: 2; margin: 12px 0 0; }
	.pd-cat-hero .pd-cat-hero-chips li { padding: 8px 12px; gap: 8px; }
	.pd-cat-hero .pd-cat-hero-chips span:not(.pd-chip):not(.pd-flag) { white-space: normal; max-width: 22ch; }

	/* Chips de filtres rapides : la lueur rose du chip actif était coupée par
	   l'overflow du conteneur - on laisse déborder sur desktop. */
	.pd-cat-chips { overflow: visible; flex-wrap: wrap; }
}

/* ==========================================================================
   Single product page (VIP bundle - mirrors puffdivision.com in our DA)
   ========================================================================== */

.pd-pdp-hero {
	padding-block: 12px 34px;
	background: linear-gradient(135deg, #FFF4FB 0%, #FFFBE8 100%);
}
.pd-pdp-hero .woocommerce-message,
.pd-pdp-hero .woocommerce-error,
.pd-pdp-hero .woocommerce-info {
	list-style: none;
	margin: 0 0 14px;
	padding: 12px 18px;
	border-radius: var(--radius-md);
	background: var(--surface);
	border: 1px solid var(--green);
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	box-shadow: var(--shadow-soft);
}
.pd-pdp-hero .woocommerce-error { border-color: var(--pink); }
.pd-pdp-hero .woocommerce-message a.button,
.pd-pdp-hero .woocommerce-error a.button {
	display: inline-block;
	margin-left: 10px;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--grad-pink);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	box-shadow: 0 4px 12px rgba(229, 17, 122, 0.3);
}

.pd-pdp-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }

/* ----- Gallery ----- */
.image-wrap {
	border-radius: 20px;
	overflow: hidden;
	background: var(--surface);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.image-wrap:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); }
.pd-pdp-main img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.pd-pdp-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 4px;
}
.pd-pdp-thumb {
	display: block;
	padding: 0;
	width: 62px;
	height: 62px;
	flex: 0 0 auto;
	border-radius: 12px;
	overflow: hidden;
	border: 2px solid transparent;
	background: var(--surface);
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.pd-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-pdp-thumb.is-active { border-color: var(--ink); transform: scale(0.94); }

/* ----- Info card ----- */
.pd-pdp-info {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(243, 80, 123, 0.08);
	border-radius: 20px;
	padding: 20px 16px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.pd-pdp-title { font-size: clamp(24px, 5vw, 34px); line-height: 1.08; margin-bottom: 8px; }
.pd-pdp-rating {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	padding: 7px 12px;
	border: 1px solid rgba(243, 80, 123, 0.32);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.86);
	box-shadow: 0 3px 10px rgba(243, 80, 123, 0.08);
	font-size: 12.5px;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}
a.pd-pdp-rating:hover span { text-decoration: underline; }
.pd-pdp-price-detail {
	display: inline-block;
	margin-left: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
}
.pd-pdp-signals { display: grid; gap: 6px; margin-bottom: 10px; }
.pd-pdp-signal { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 700; }
.pd-pdp-dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 7px; }
.pd-pdp-signal-stock { color: #147F42; }
.pd-pdp-signal-stock .pd-pdp-dot { background: #27C46B; }
.pd-pdp-signal-urgency { color: #4A2338; }
.pd-pdp-signal-urgency .pd-pdp-dot { background: var(--pink); }
.pd-pdp-price { font-size: 24px; font-weight: 800; margin: 0 0 8px; }
.pd-pdp-price del { color: var(--muted); font-size: 0.62em; font-weight: 700; margin-right: 7px; }
.pd-pdp-price ins { text-decoration: none; color: var(--pink); }
.pd-pdp-short { font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.pd-pdp-short p { margin-bottom: 0.4em; }

/* ----- Bundle ----- */
.pd-bundle { margin-top: 10px; }
.pd-bundle-title {
	position: relative;
	margin: 0 0 14px;
	text-align: center;
	font-size: 14.5px;
	font-weight: 800;
}
.pd-bundle-title::before,
.pd-bundle-title::after {
	content: "";
	position: absolute;
	top: 50%;
	width: calc(50% - 92px);
	height: 1px;
	background: rgba(243, 80, 123, 0.22);
}
.pd-bundle-title::before { left: 0; }
.pd-bundle-title::after { right: 0; }
.pd-bundle-boxes { display: grid; gap: 12px; margin-bottom: 14px; }
.pd-bundle-box {
	position: relative;
	display: block;
	padding: 12px 14px;
	border: 1px solid rgba(243, 80, 123, 0.2);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(8px);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.pd-bundle-box.is-active {
	border: 2px solid var(--pink);
	background: #FFFAFA;
	padding: 11px 13px;
	box-shadow: 0 4px 15px rgba(243, 80, 123, 0.12);
}
.pd-bundle-popular {
	position: absolute;
	top: -10px;
	right: 14px;
	z-index: 2;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--pink);
	color: #fff;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.5px;
	box-shadow: 0 4px 10px rgba(243, 80, 123, 0.3);
}
.pd-bundle-row {
	display: grid;
	grid-template-columns: 20px 52px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
}
.pd-bundle-circle {
	width: 19px;
	height: 19px;
	border-radius: 50%;
	border: 2px solid #55505A;
	transition: border 0.2s ease;
}
.pd-bundle-box.is-active .pd-bundle-circle { border: 6px solid var(--pink); }
.pd-bundle-img { position: relative; width: 52px; height: 52px; }
.pd-bundle-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.pd-bundle-qty {
	position: absolute;
	top: -8px;
	right: -8px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--pink);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.pd-bundle-details { display: grid; gap: 1px; min-width: 0; }
.pd-bundle-name { font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.6px; }
.pd-bundle-meta { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.pd-bundle-unitprice { font-size: 11px; font-weight: 800; color: rgba(52, 49, 53, 0.78); }
.pd-bundle-unitprice .woocommerce-Price-amount { font-size: inherit; }
.pd-bundle-saving { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; color: var(--pink-dark); }
.pd-bundle-pricing { text-align: right; display: grid; gap: 2px; }
.pd-bundle-price { font-size: 16px; font-weight: 900; }
.pd-bundle-compare { font-size: 11px; color: var(--muted); font-weight: 600; }
.pd-bundle-selectors { display: none; margin-top: 11px; padding-left: 30px; }
.pd-bundle-box.is-active .pd-bundle-selectors { display: grid; gap: 8px; }
.pd-bundle-selector-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: center; }
.pd-bundle-selector-label { font-size: 11px; font-weight: 800; }
.pd-bundle-select {
	width: 100%;
	min-width: 0;
	height: 36px;
	padding: 0 30px 0 12px;
	border: 1px solid rgba(243, 80, 123, 0.24);
	border-radius: 12px;
	background: var(--surface) url('data:image/svg+xml;utf8,<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="%237C7580" stroke-linecap="round" stroke-linejoin="round"/></svg>') right 12px center no-repeat;
	appearance: none;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.pd-bundle-select:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.pd-bundle-submit {
	font-size: 15.5px;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 15px 26px;
	box-shadow: 0 4px 15px rgba(243, 80, 123, 0.35);
}
.pd-bundle-submit:hover { transform: scale(1.02); box-shadow: 0 8px 25px rgba(222, 54, 99, 0.4); }

/* ----- Trust + payments ----- */
.pd-pdp-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin: 16px 0 6px;
}
.pd-pdp-trust li { text-align: center; font-size: 9.5px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.pd-pdp-trust-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0 auto 5px;
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.pd-pdp-payment { margin-top: 10px; text-align: center; }
.pd-pdp-payment-label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--muted);
}
.pd-pdp-payment .pd-payments { justify-content: center; }

/* ----- Description accordions ----- */
.pd-pdp-content { padding-block: 26px 6px; }
.pd-pdp-tab { margin-bottom: 12px; }
/* Description et caractéristiques : même gouttière que les paragraphes
   d'accordéon (72px = icône 40 + gap 14 + padding 18) - sans elle, ces
   blocs collent aux bords de la carte. */
.pd-pdp-desc { font-size: 14.5px; line-height: 1.6; padding: 0 18px 18px 72px; }
.pd-pdp-desc p { margin-bottom: 0.9em; }
.pd-pdp-desc li { margin-bottom: 4px; }
.pd-pdp-desc > :last-child { margin-bottom: 0; }
.pd-pdp-desc h2, .pd-pdp-desc h3 { font-family: var(--font-sans); font-size: 16.5px; font-weight: 800; margin: 1em 0 0.4em; }
.pd-pdp-desc ul { list-style: disc; padding-left: 20px; margin-bottom: 0.8em; }
.pd-pdp-attrs {
	box-sizing: border-box;
	width: calc(100% - 90px);
	margin: 0 18px 18px 72px;
	border-collapse: collapse;
	font-size: 13.5px;
}
.pd-pdp-attrs th { text-align: left; padding: 8px 12px 8px 0; color: var(--muted); font-weight: 700; width: 42%; }
.pd-pdp-attrs td { padding: 8px 0; font-weight: 700; }
.pd-pdp-attrs tr + tr { border-top: 1px solid var(--line); }

/* ----- ≥768px ----- */
@media (min-width: 768px) {
	.pd-pdp-hero { padding-block: 16px 48px; }
	.pd-pdp-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; }
	.pd-pdp-info { padding: 30px; }
	.pd-pdp-thumb { width: 72px; height: 72px; }
	.pd-pdp-trust { gap: 10px; }
	.pd-pdp-trust li { font-size: 10.5px; }
	.pd-pdp-trust-ic { width: 34px; height: 34px; }
	.pd-pdp-content { padding-block: 34px 10px; }
}

/* ----- ≥1200px ----- */
@media (min-width: 1200px) {
	.pd-pdp-layout { gap: 40px; }
	.pd-bundle-name { font-size: 16px; }
}

/* ==========================================================================
   Fidélité - landing page
   ========================================================================== */

.pd-fid-hero { padding-block: 14px 8px; }
.pd-fid-hero-card {
	background:
		radial-gradient(120% 150% at 100% 0%, rgba(252, 194, 63, 0.16) 0%, rgba(252, 194, 63, 0) 55%),
		linear-gradient(135deg, #FDF1EC 0%, #FDEDE8 45%, #FCE7E6 100%);
}
.pd-fid-hero-card h1 { font-family: var(--font-serif); font-size: clamp(26px, 5.6vw, 46px); line-height: 1.1; margin: 0 0 10px; }
.pd-fid-hero-card .pd-cat-hero-visual img { max-height: 320px; object-fit: contain; }

.pd-fid-steps { padding-block: var(--sect-pad) 10px; }
.pd-fid-steps-grid { display: grid; gap: 12px; counter-reset: step; margin: 0; padding: 0; list-style: none; }
.pd-fid-steps-grid li {
	position: relative;
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 4px 14px;
	align-items: center;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}
.pd-fid-step-num {
	position: absolute;
	top: -8px; left: -6px;
	display: grid;
	place-items: center;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--pink);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 4px 10px rgba(243, 80, 123, 0.35);
}
.pd-fid-step-ic {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: var(--pink-pale);
	color: var(--pink);
}
.pd-fid-steps-grid h3 { font-family: var(--font-sans); font-size: 14.5px; font-weight: 800; margin: 0; align-self: end; }
.pd-fid-steps-grid p { font-size: 12.5px; color: var(--muted); margin: 0; align-self: start; }

.pd-fid-tiers { padding-block: var(--sect-pad) 10px; }
.pd-fid-tiers-grid { display: grid; gap: 14px; }
.pd-fid-tier {
	position: relative;
	padding: 20px 18px 18px;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow: var(--shadow-soft);
}
.pd-fid-tier-bronze { background: linear-gradient(160deg, #FBF0E4 0%, #FFFFFF 60%); }
.pd-fid-tier-argent { background: linear-gradient(160deg, #F1F2F5 0%, #FFFFFF 60%); }
.pd-fid-tier-or { background: linear-gradient(160deg, #FDF3D8 0%, #FFFFFF 60%); border-color: rgba(252, 194, 63, 0.5); }
.pd-fid-medal {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	margin-bottom: 8px;
	border-radius: 50%;
	color: #fff;
}
.pd-fid-tier-bronze .pd-fid-medal { background: linear-gradient(145deg, #C98F5B, #8C5A2E); }
.pd-fid-tier-argent .pd-fid-medal { background: linear-gradient(145deg, #C4C9D4, #8E96A5); }
.pd-fid-tier-or .pd-fid-medal { background: linear-gradient(145deg, #FCD565, #D99B18); }
/* Médailles dragon (assets medaille-bronze/argent/or.png) : mêmes dimensions
   pour les trois niveaux. */
.pd-fid-medal-img {
	width: 64px;
	height: 64px;
	margin-bottom: 8px;
	object-fit: contain;
	filter: drop-shadow(0 6px 10px rgba(52, 49, 53, 0.22));
}
.pd-fid-tier h3 { font-size: 22px; margin: 0 0 2px; }
.pd-fid-tier-range { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 0 0 10px; }
.pd-fid-tier ul { display: grid; gap: 7px; margin: 0 0 14px; }
.pd-fid-tier li { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; }
.pd-fid-tier li .pd-ic { color: var(--green); }
.pd-fid-tier-chip {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 800;
	color: #fff;
}
.pd-fid-tier-bronze .pd-fid-tier-chip { background: #A9713D; }
.pd-fid-tier-argent .pd-fid-tier-chip { background: #9AA1AF; }
.pd-fid-tier-or .pd-fid-tier-chip { background: var(--yellow-dark); }

.pd-fid-rewards { padding-block: var(--sect-pad) 10px; }
.pd-fid-rewards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* 3 cartes sur une grille paire : la derniere prend toute la largeur
   (annule en desktop ou la grille est centree). */
.pd-fid-rewards-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pd-fid-rewards-grid li {
	display: grid;
	gap: 6px;
	justify-items: center;
	text-align: center;
	padding: 18px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}
.pd-fid-reward-ic {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	border-radius: 16px;
	background: var(--pink-soft);
	color: var(--pink);
}
.pd-fid-rewards-grid h3 { font-family: var(--font-sans); font-size: 14.5px; font-weight: 800; margin: 0; }
.pd-fid-rewards-grid p { font-size: 12.5px; color: var(--muted); margin: 0; }
/* Pastilles "Disponible dès X points" : toutes identiques (même largeur,
   même hauteur), texte parfaitement centré, alignées en bas de carte. */
.pd-fid-reward-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 215px;
	min-height: 36px;
	margin-top: auto;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--pink);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	text-align: center;
	line-height: 1.25;
}

.pd-fid-ref { padding-block: var(--sect-pad) 10px; }
.pd-fid-ref-card {
	display: grid;
	gap: 16px;
	padding: 22px 18px;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, #FDF1EC 0%, #FCE7E6 100%);
	border: 1px solid rgba(243, 80, 123, 0.1);
	box-shadow: var(--shadow-soft);
	align-items: center;
}
.pd-fid-ref-mascot { width: 130px; margin-inline: auto; }
.pd-fid-ref-text h2 { font-size: clamp(24px, 4vw, 32px); margin: 0 0 6px; }
.pd-fid-ref-text p { font-size: 13.5px; color: var(--muted); }
.pd-fid-ref-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-fid-ref-chips li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font-size: 12.5px;
}
.pd-fid-ref-chips .pd-chip { width: 30px; height: 30px; border-radius: 50%; }
.pd-fid-ref-codebox {
	padding: 16px;
	background: var(--surface);
	border: 1px dashed rgba(243, 80, 123, 0.45);
	border-radius: var(--radius-md);
	text-align: center;
}
.pd-fid-ref-label {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--muted);
}
.pd-ref-code {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 10px;
}
.pd-ref-code code {
	padding: 10px 16px;
	border-radius: 12px;
	background: var(--bg-cream);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 2px;
}
.pd-ref-code-locked code { filter: blur(0px); color: var(--muted); letter-spacing: 4px; }
.pd-ref-code .pd-iconbtn { width: 40px; height: 40px; }
[data-copy].is-copied { border-color: var(--green) !important; color: var(--green) !important; }

/* ----- ≥768px ----- */
@media (min-width: 768px) {
	.pd-fid-steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.pd-fid-steps-grid li { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 22px 16px 18px; }
	.pd-fid-step-ic { grid-row: auto; margin-bottom: 4px; }
	.pd-fid-step-num { top: -10px; left: 14px; }
	.pd-fid-tiers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
	/* Grille centree quel que soit le nombre de recompenses : l'ancien
	   repeat(4) laissait un trou a droite depuis le passage a 3 cartes. */
	.pd-fid-rewards-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; gap: 16px; }
	.pd-fid-rewards-grid li:last-child:nth-child(odd) { grid-column: auto; }
	.pd-fid-ref-card { grid-template-columns: 170px minmax(0, 1fr) 300px; padding: 26px 30px; }
	.pd-fid-ref-mascot { width: 170px; }
}

/* ==========================================================================
   Mon compte : forms + "Mes points"
   ========================================================================== */

/* --- Layout du compte : pleine largeur, DA du site (fini la petite carte
   blanche étriquée autour de tout + le layout flottant WooCommerce) --- */
.woocommerce-account .pd-fallback article {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	max-width: none;
	box-shadow: none;
	outline: none;
}
.woocommerce-account .pd-fallback article > h1 {
	font-size: clamp(28px, 3.4vw, 40px);
	margin: 6px 0 22px;
}
.woocommerce-account .pd-fallback .woocommerce {
	display: grid;
	gap: 20px;
	align-items: start;
	max-width: none;
}
.woocommerce-account .pd-fallback .woocommerce-MyAccount-navigation,
.woocommerce-account .pd-fallback .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}
.woocommerce-account .pd-fallback .woocommerce-MyAccount-navigation {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 12px;
	box-shadow: var(--shadow-soft);
}
.woocommerce-account .pd-fallback .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 4px;
	margin: 0;
}
.woocommerce-account .pd-fallback .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 11px 16px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}
.woocommerce-account .pd-fallback .woocommerce-MyAccount-navigation a:hover {
	background: var(--pink-pale);
	color: var(--pink);
}
.woocommerce-account .pd-fallback .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--grad-pink);
	color: #fff;
	box-shadow: 0 6px 16px rgba(229, 17, 122, 0.25);
}
.woocommerce-account .pd-fallback .woocommerce-MyAccount-content {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 22px 18px;
	box-shadow: var(--shadow-soft);
	font-size: 14.5px;
}
@media (min-width: 1024px) {
	.woocommerce-account .pd-fallback .woocommerce {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 20px 24px;
	}
	/* Placement explicite : Woo glisse d'autres enfants (notices…) dans le
	   conteneur, l'auto-placement enverrait le contenu dans la colonne de 260px */
	.woocommerce-account .pd-fallback .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; }
	.woocommerce-account .pd-fallback .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
	.woocommerce-account .pd-fallback .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; padding: 30px 34px; }
	.woocommerce-account .pd-fallback .woocommerce-MyAccount-navigation {
		position: sticky;
		top: 96px;
	}
}

/* Fallback générique (autres pages Woo passant par index.php) */
.pd-fallback .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pd-fallback .woocommerce-MyAccount-navigation a {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line);
	font-size: 13px;
	font-weight: 800;
}
.pd-fallback .woocommerce-MyAccount-navigation li.is-active a,
.pd-fallback .woocommerce-MyAccount-navigation a:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.pd-fallback .woocommerce-form-login,
.pd-fallback .woocommerce-form-register {
	max-width: 460px;
	padding: 24px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}
.pd-fallback .u-columns { display: grid; gap: 24px; }
@media (min-width: 900px) { .pd-fallback .u-columns { grid-template-columns: 1fr 1fr; } }
.pd-fallback .woocommerce-form input.input-text,
.pd-fallback .woocommerce-form input[type="email"],
.pd-fallback .woocommerce-form input[type="password"],
.pd-fallback .woocommerce-form input[type="text"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid rgba(52, 49, 53, 0.16);
	border-radius: 12px;
	font: inherit;
	background: var(--bg);
}
.pd-fallback .woocommerce-form label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 5px; }
.pd-fallback .woocommerce-form .pd-optional { font-weight: 600; color: var(--muted); }
.pd-fallback .woocommerce-form .woocommerce-form-row { margin-bottom: 14px; }
.pd-fallback .woocommerce-form button[type="submit"],
.pd-fallback .woocommerce-button,
.pd-fallback button.button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--pink);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(243, 80, 123, 0.32);
	transition: background 0.15s ease, transform 0.15s ease;
}
.pd-fallback .woocommerce-form button[type="submit"]:hover,
.pd-fallback button.button:hover { background: var(--pink-dark); transform: translateY(-1px); }

.pd-points-hero {
	display: grid;
	gap: 16px;
	padding: 22px 18px;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, #FFF4FB 0%, #FFFBE8 100%);
	border: 1px solid rgba(243, 80, 123, 0.12);
	box-shadow: var(--shadow-soft);
	margin-bottom: 22px;
}
.pd-points-balance { text-align: center; }
.pd-points-num { display: block; font-family: var(--font-serif); font-size: 52px; font-weight: 700; line-height: 1; color: var(--pink); }
.pd-points-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); }
.pd-tier-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 800;
	color: #fff;
	margin-right: 6px;
	margin-bottom: 10px;
}
.pd-tier-bronze { background: #A9713D; }
.pd-tier-argent { background: #9AA1AF; }
.pd-tier-or { background: var(--yellow-dark); }
.pd-tier-vip { background: var(--pink); }
.pd-tier-progress {
	height: 10px;
	border-radius: 999px;
	background: var(--pink-soft);
	overflow: hidden;
}
.pd-tier-progress span { display: block; height: 100%; border-radius: 999px; background: var(--pink); transition: width 0.4s ease; }
.pd-tier-progress-text { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }

.pd-points-h { font-family: var(--font-sans); font-size: 17px; font-weight: 800; margin: 22px 0 12px; }
.pd-rewards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pd-reward-card {
	display: grid;
	gap: 6px;
	justify-items: center;
	text-align: center;
	padding: 16px 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}
.pd-reward-card.is-locked { opacity: 0.75; }
.pd-reward-ic {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: 14px;
	background: var(--pink-soft);
	color: var(--pink);
}
.pd-reward-card strong { font-size: 13.5px; }
.pd-reward-card p { font-size: 12.5px; color: var(--muted); margin: 0; }
.pd-reward-cost { font-size: 12px; font-weight: 800; color: var(--pink); }
.pd-reward-card button:disabled { cursor: not-allowed; opacity: 0.8; transform: none !important; }

.pd-coupons { display: grid; gap: 10px; }
.pd-coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding: 12px 16px;
	background: var(--surface);
	border: 1px dashed rgba(243, 80, 123, 0.45);
	border-radius: var(--radius-md);
	font-size: 13px;
}
.pd-coupon.is-done { opacity: 0.55; border-style: solid; }
.pd-coupon code { font-size: 14px; font-weight: 800; letter-spacing: 1px; background: var(--bg-cream); padding: 5px 10px; border-radius: 8px; }
.pd-coupon-desc { font-weight: 800; }
.pd-coupon-state { color: var(--muted); font-size: 12px; margin-right: auto; }

.pd-ref-card {
	padding: 18px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}
.pd-ref-card p { font-size: 14px; }

.pd-points-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--surface); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); }
.pd-points-table th { text-align: left; padding: 11px 14px; background: var(--bg-cream); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.pd-points-table td { padding: 11px 14px; border-top: 1px solid var(--line); }
.pd-points-table .is-plus { color: var(--green); font-weight: 800; }
.pd-points-table .is-minus { color: var(--pink-dark); font-weight: 800; }
.pd-points-empty { padding: 18px; background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }

@media (min-width: 768px) {
	.pd-points-hero { grid-template-columns: 220px minmax(0, 1fr); align-items: center; padding: 28px 30px; }
	.pd-rewards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Auth (login / register) - tabbed card
   ========================================================================== */

.pd-fallback:has(.pd-auth) > .pd-container > article > h1 { text-align: center; }
.pd-auth { max-width: 520px; margin: 6px auto 10px; }
.pd-auth-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: 22px 18px;
}
.pd-auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 5px;
	margin-bottom: 18px;
	background: var(--bg-cream);
	border-radius: 999px;
}
.pd-auth-tab {
	padding: 11px 10px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	color: var(--muted);
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.pd-auth-tab.is-active {
	background: var(--pink);
	color: #fff;
	box-shadow: 0 6px 16px rgba(243, 80, 123, 0.35);
}
/* Nextend Social Login (bouton « Se connecter avec Google ») : intégré sous
   le bouton principal, même largeur que la carte */
.pd-auth .nsl-container { margin-top: 14px; }
.pd-auth-intro { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }
.pd-auth .woocommerce-form,
.pd-auth .woocommerce-form-login,
.pd-auth .woocommerce-form-register {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.pd-auth .woocommerce-form-row { margin-bottom: 14px; }
.pd-auth label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 5px; }
.pd-auth input.input-text {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(52, 49, 53, 0.16);
	border-radius: 12px;
	font: inherit;
	background: var(--bg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pd-auth input.input-text:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(243, 80, 123, 0.15); }
.pd-auth-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	font-size: 13px;
}
.pd-auth-remember { display: inline-flex !important; align-items: center; gap: 7px; font-weight: 700 !important; margin: 0 !important; cursor: pointer; }
.pd-auth-remember input { accent-color: var(--pink); width: 16px; height: 16px; }
.pd-auth-lost { font-weight: 700; color: var(--pink); }
.pd-auth-lost:hover { text-decoration: underline; }
.pd-auth .pd-btn-block { justify-content: center; }
.pd-auth-switch { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.pd-auth-link {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: 800;
	color: var(--pink);
	cursor: pointer;
}
.pd-auth-link:hover { text-decoration: underline; }
.pd-auth-note { font-size: 12.5px; color: var(--muted); }
.pd-auth-perks { display: grid; gap: 8px; margin: 4px 0 16px; }
.pd-auth-perks li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pd-auth-perks .pd-ic { color: var(--pink); }
.pd-auth .pd-optional { font-weight: 600; color: var(--muted); }
.pd-auth-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
	margin-top: 16px;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
}
.pd-auth-trust li { display: inline-flex; align-items: center; gap: 6px; }
.pd-auth-trust .pd-badge-18 { width: 20px; height: 20px; font-size: 8px; }
@media (min-width: 768px) {
	.pd-auth-card { padding: 30px 34px; }
}

/* ==========================================================================
   Cart & checkout blocks - brand skin
   ========================================================================== */

.pd-fallback .wp-block-woocommerce-cart,
.pd-fallback .wp-block-woocommerce-checkout { font-family: var(--font-sans); }

/* Panels / cards */
.pd-fallback .wc-block-components-sidebar .wc-block-components-totals-wrapper,
.pd-fallback .wc-block-cart__sidebar,
.pd-fallback .wc-block-checkout__sidebar {
	background: var(--surface);
}
.pd-fallback .wc-block-cart__sidebar,
.pd-fallback .wc-block-checkout__sidebar {
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	padding: 6px 16px 10px;
}
.pd-fallback .wc-block-components-checkout-step {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	padding: 18px 16px;
	margin-bottom: 14px;
}
.pd-fallback .wc-block-components-checkout-step__heading { margin: 0 0 4px; }
.pd-fallback .wc-block-components-title.wc-block-components-title { font-family: var(--font-sans); font-weight: 800; font-size: 17px; }

/* Fields */
.pd-fallback .wc-block-components-text-input input,
.pd-fallback .wc-block-components-combobox .wc-block-components-combobox-control input,
.pd-fallback .wc-block-components-select .components-custom-select-control__button {
	border-radius: 12px;
	border-color: rgba(52, 49, 53, 0.16);
}
.pd-fallback .wc-block-components-text-input input:focus,
.pd-fallback .wc-block-components-combobox input:focus {
	border-color: var(--pink);
	box-shadow: 0 0 0 3px rgba(243, 80, 123, 0.15);
}
.pd-fallback .wc-block-components-checkbox__input[type="checkbox"] { border-radius: 5px; }
.pd-fallback .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--pink); border-color: var(--pink); }
.pd-fallback .wc-block-components-radio-control__option { border-radius: 12px; }
.pd-fallback .wc-block-components-radio-control__input:checked { border-color: var(--pink); background: radial-gradient(var(--pink) 0 40%, transparent 45%); }

/* Paiement CB SogeCommerce : formulaire embarqué (Smart Form) aux couleurs boutique.
   Attention : le bloc « Cartes » (kr-card-header) vit dans .kr-smart-form, PAS dans
   .kr-embedded (qui ne contient que les champs) : scoper sur .kr-smart-form. */
.pd-fallback .kr-smart-form .kr-field-wrapper {
	border-radius: 12px;
	border: 1px solid rgba(52, 49, 53, 0.16);
	box-shadow: none;
}
.pd-fallback .kr-smart-form .kr-field-wrapper:focus-within,
.pd-fallback .kr-smart-form .kr-field-wrapper.kr-focus {
	border-color: var(--pink);
	box-shadow: 0 0 0 3px rgba(243, 80, 123, 0.15);
}
.pd-fallback .kr-smart-form .kr-card-header { border-radius: 12px !important; }
.pd-fallback .kr-smart-form .kr-card-header.kr-card-header--selected {
	background: var(--pink-soft) !important;
	border-color: var(--rose-1) !important;
}
/* Le rond de coche est le span SANS classe dans .kr-smart-form-radio-button :
   ne pas peindre le conteneur (il déborde sur le logo CB), et ne peindre que
   l'option COCHÉE (--checked), sinon Wero et les autres moyens paraissent
   sélectionnés en permanence. */
.pd-fallback .kr-smart-form .kr-smart-form-radio-button--checked > span {
	background: var(--pink-hot) !important;
}
.pd-fallback .kr-smart-form .kr-payment-button,
.kr-popin-modal .kr-payment-button {
	background: var(--grad-hot);
	border-color: transparent;
	border-radius: 999px;
	font-weight: 800;
}

/* Buttons */
.pd-fallback .wc-block-components-button:not(.is-link),
.pd-fallback .wc-block-cart__submit-button,
.pd-fallback .wc-block-components-checkout-place-order-button {
	border-radius: 999px;
	background: var(--pink);
	color: #fff;
	font-weight: 800;
	border: 0;
	box-shadow: 0 8px 20px rgba(243, 80, 123, 0.32);
	transition: background 0.15s ease, transform 0.15s ease;
}
/* Le clone collant du bouton panier est en position:fixed (CSS Woo,
   z-index 9999) : il doit suivre le bas reellement visible comme nos
   autres barres (voir --pd-vv-gap dans main.js). Triple classe : battre
   la specificite (0,2,0) de la regle Woo quel que soit l'ordre. */
.pd-fallback .wc-block-cart .wc-block-cart__submit-container--sticky {
	bottom: var(--pd-vv-gap, 0px);
	padding-bottom: calc(16px + var(--pd-safe-b, 0px));
	transition: padding-bottom 0.25s ease;
}
.pd-fallback .wc-block-components-button:not(.is-link):hover,
.pd-fallback .wc-block-components-checkout-place-order-button:hover { background: var(--pink-dark); transform: translateY(-1px); }
.pd-fallback .wc-block-components-totals-coupon__button { box-shadow: none; }

/* Quantity selector + product names */
.pd-fallback .wc-block-components-quantity-selector { border-radius: 999px; }
.pd-fallback .wc-block-components-product-name { font-weight: 800; color: var(--ink); }
.pd-fallback .wc-block-components-product-details { font-size: 12px; }
.pd-fallback .wc-block-components-sale-badge { background: var(--pink); color: #fff; border: 0; border-radius: 999px; }

/* Trust strip below cart / checkout */
.pd-checkout-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 26px 0 6px;
	padding: 0;
	list-style: none;
}
.pd-checkout-trust li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	font-size: 12.5px;
	font-weight: 700;
}
.pd-checkout-trust .pd-chip { width: 36px; height: 36px; border-radius: 10px; }
@media (min-width: 768px) {
	.pd-checkout-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Mondial Relay widget modal - brand skin
   ========================================================================== */

.wc-backbone-modal .wc-backbone-modal-content {
	border-radius: 20px;
	overflow: hidden;
}
.wms_pickup_selection_button,
button[class*="wms_pickup_open_modal"] {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 10px 20px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--pink) !important;
	color: #fff !important;
	font-family: var(--font-sans) !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(243, 80, 123, 0.32);
	transition: background 0.15s ease, transform 0.15s ease;
}
.wms_pickup_selection_button:hover,
button[class*="wms_pickup_open_modal"]:hover { background: var(--pink-dark) !important; transform: translateY(-1px); }
#wms_selected_pickup_desc, .wms_selected_pickup_desc {
	margin-top: 10px;
	padding: 12px 14px;
	background: var(--surface);
	border: 1px dashed rgba(243, 80, 123, 0.45);
	border-radius: var(--radius-sm);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.45;
}
/* Widget internals (list + confirm button) */
.MRW-Results .PR-Name { color: var(--pink) !important; font-weight: 800 !important; }
.MRW-BtGeoCo, .MRW-Widget button[id*="btn"], .MRW-fPanel button {
	border-radius: 999px !important;
}

/* ==========================================================================
   Hot pink accent pass (logo-vivid contrast) + announcement bar
   ========================================================================== */

/* Announcement bar */
.pd-annonce {
	background: var(--grad-hot);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.2px;
}
.pd-annonce-in {
	position: relative;
	height: 34px;
	overflow: hidden;
	text-align: center;
}
.pd-annonce-in p {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.pd-annonce-in p.is-active { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) {
	.pd-annonce { font-size: 13.5px; }
}

/* Vivid accents */
.pd-accent {
	background: var(--grad-hot);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.pd-cart-bubble { background: var(--grad-hot) !important; }
.pd-product-price ins,
.pd-pdp-price ins { color: var(--pink-hot-dark); }
.pd-bundle-popular { background: var(--grad-hot); }
.pd-bundle-saving { color: var(--pink-hot-dark); }
.pd-bundle-box.is-active { border-color: var(--pink-hot); box-shadow: 0 4px 18px rgba(255, 46, 140, 0.16); }
.pd-bundle-box.is-active .pd-bundle-circle { border-color: var(--pink-hot); }
.pd-bundle-qty { background: var(--grad-hot); }
.pd-cat-chip.is-active { background: var(--grad-hot); border-color: transparent; box-shadow: 0 6px 16px rgba(229, 17, 122, 0.35); }
.pd-heart[aria-pressed="true"] { color: var(--pink-hot); }
.pd-heart[aria-pressed="true"] svg { fill: var(--pink-hot); }
.pd-tier-progress span { background: var(--grad-hot); }
.pd-bottomnav a.is-current { color: var(--pink-hot-dark); }
.pd-nav .is-current { color: var(--pink-hot-dark); }
.pd-fid-reward-chip { background: var(--grad-band); }
.pd-fallback .wc-block-components-sale-badge { background: var(--grad-hot); }
.pd-footer { border-top: 3px solid transparent; border-image: var(--grad-hot) 1; }

/* ==========================================================================
   CRO: free-shipping nudge (PDP + cart) & sticky mobile buy bar
   ========================================================================== */

.pd-ship-nudge {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	background: var(--pink-pale);
	border: 1px dashed rgba(255, 46, 140, 0.4);
	font-size: 12.5px;
	font-weight: 800;
	color: var(--ink);
}
.pd-ship-nudge.is-ok {
	background: var(--green-soft);
	border-color: rgba(47, 164, 106, 0.5);
	color: #14603C;
}
.pd-bundle-error {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	background: #FDECEC;
	border: 1px solid rgba(214, 54, 56, 0.35);
	color: #A02226;
	font-size: 13px;
	font-weight: 700;
}

.pd-ship-progress {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}
.pd-ship-progress p { margin: 0 0 8px; font-size: 13.5px; font-weight: 800; }
.pd-ship-progress p strong { color: var(--pink-hot-dark); }
.pd-ship-progress.is-ok p { color: #14603C; }
.pd-ship-progress-track { height: 9px; border-radius: 999px; background: var(--pink-soft); overflow: hidden; }
.pd-ship-progress-track span { display: block; height: 100%; border-radius: 999px; background: var(--grad-hot); transition: width 0.4s ease; }
.pd-ship-progress.is-ok .pd-ship-progress-track span { background: var(--green); }

.pd-loyalty-teaser {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 12px 16px;
	background: var(--bg-cream);
	border: 1px solid rgba(252, 194, 63, 0.55);
	border-radius: var(--radius-md);
}
.pd-loyalty-teaser-icon { color: var(--yellow-dark); display: inline-flex; }
.pd-loyalty-teaser p { margin: 0; font-size: 13.5px; font-weight: 700; }
.pd-loyalty-teaser a { color: var(--pink-hot-dark); }

.pd-buybar {
	position: fixed;
	left: 0; right: 0;
	/* replaces the mobile bottom nav while visible */
	bottom: var(--pd-vv-gap, 0px);
	/* 101 : au-dessus de la bottomnav (100), sinon la nav sortie par
	   translateY reapparait dans la bande revelee sous le viewport. */
	z-index: 101;
	display: flex;
	align-items: center;
	gap: 12px;
	/* Avec viewport-fit=cover la safe-area basse devient reelle : le CTA
	   ne doit pas passer sous l'indicateur home (l'ancien « * 0 » qui
	   l'annulait date d'avant cover). */
	padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + var(--pd-safe-b, 0px)) max(14px, env(safe-area-inset-left));
	background: var(--surface);
	border-top: 1px solid var(--line);
	box-shadow: 0 -8px 24px rgba(52, 49, 53, 0.12);
	transform: translateY(130%);
	transition: transform 0.25s ease, bottom 0.18s ease, padding-bottom 0.25s ease;
}
/* Meme rideau anti-trou que .pd-bottomnav (barre d'outils Chrome iOS). */
.pd-buybar::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 200px;
	background: var(--surface);
	pointer-events: none;
}
.pd-buybar.is-visible { transform: translateY(0); }
.pd-buybar-info { display: grid; line-height: 1.15; }
.pd-buybar-info strong { font-size: 17px; color: var(--pink-hot-dark); }
.pd-buybar-info span { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.pd-buybar .pd-btn { flex: 1; padding: 12px 16px; font-size: 14px; }
@media (min-width: 768px) {
	.pd-buybar { display: none; }
}

/* ---------- Mini-cart drawer (after AJAX add-to-cart) ---------- */
/* display:flex below would defeat the [hidden] UA rule - restate it. */
.pd-minicart[hidden],
.pd-minicart-overlay[hidden] { display: none; }
.pd-minicart-overlay {
	position: fixed;
	inset: 0;
	/* Suit le bas reellement visible (barre d'outils Chrome iOS repliee). */
	bottom: var(--pd-vv-gap, 0px);
	z-index: 120;
	background: rgba(52, 49, 53, 0.45);
	backdrop-filter: blur(2px);
}
.pd-minicart {
	position: fixed;
	z-index: 121;
	top: 0;
	right: 0;
	bottom: var(--pd-vv-gap, 0px);
	width: min(420px, 100vw);
	padding-bottom: var(--pd-safe-b, 0px);
	display: flex;
	flex-direction: column;
	background: var(--bg);
	box-shadow: -18px 0 48px rgba(52, 49, 53, 0.25);
	animation: pd-minicart-in 0.28s ease;
}
@keyframes pd-minicart-in {
	from { transform: translateX(40px); opacity: 0; }
	to   { transform: translateX(0); opacity: 1; }
}
.pd-minicart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}
.pd-minicart-title { margin: 0; font-size: 15px; font-weight: 800; }
.pd-minicart-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.pd-minicart-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pd-minicart-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.pd-minicart-thumb img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; display: block; }
.pd-minicart-meta { flex: 1; display: grid; gap: 2px; font-size: 13px; }
.pd-minicart-meta strong { font-size: 13.5px; }
.pd-minicart-flavor { color: var(--muted); }
.pd-minicart-qty { color: var(--muted); font-weight: 700; }
.pd-minicart-price { font-weight: 800; color: var(--pink-hot-dark); }
.pd-minicart-ship {
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	background: var(--pink-pale);
	border: 1px dashed rgba(255, 46, 140, 0.4);
}
.pd-minicart-ship.is-ok { background: var(--green-soft); border-color: rgba(47, 164, 106, 0.5); }
.pd-minicart-ship p { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; }
.pd-minicart-ship.is-ok p { color: #14603C; }
.pd-minicart-subtotal {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding-top: 4px;
	font-size: 14.5px;
	font-weight: 700;
}
.pd-minicart-ctas { display: grid; gap: 10px; }
.pd-minicart-empty { margin: 0; color: var(--muted); }
.pd-minicart-open, .pd-minicart-open body { overflow: hidden; }
@media (max-width: 640px) {
	.pd-minicart {
		top: auto;
		max-height: 82dvh;
		width: 100vw;
		border-radius: 20px 20px 0 0;
		animation: pd-minicart-up 0.28s ease;
	}
	@keyframes pd-minicart-up {
		from { transform: translateY(40px); opacity: 0; }
		to   { transform: translateY(0); opacity: 1; }
	}
}

/* Mobile: full-width hero CTAs (homepage) */
@media (max-width: 479px) {
	.pd-hero-ctas { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   QA pass: containment fixes + empty-cart grid skin + desktop CRO
   ========================================================================== */

/* Grid blowout guards: children may never force their container wider */
.pd-pdp-layout > * { min-width: 0; }
.pd-pdp-thumbs { max-width: 100%; }
.pd-univers-text { min-width: 0; }

/* Empty-cart "Nouveau dans la boutique" grid → brand look */
.pd-fallback .wc-block-grid__products { gap: 18px 14px; }
.pd-fallback .wc-block-grid__product {
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-soft);
	padding: 12px 12px 16px;
}
.pd-fallback .wc-block-grid__product-image img { border-radius: var(--radius-sm); }
.pd-fallback .wc-block-grid__product-title { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.pd-fallback .wc-block-grid__product-price { font-weight: 800; }
.pd-fallback .wc-block-grid__product-price ins { color: var(--pink-hot-dark); text-decoration: none; }
.pd-fallback .wc-block-grid__product-onsale {
	background: var(--grad-hot);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-weight: 800;
	letter-spacing: 0.4px;
}
.pd-fallback .wc-block-grid__product .wp-block-button__link,
.pd-fallback .wc-block-grid__product .add_to_cart_button {
	border-radius: 999px;
	background: var(--grad-pink);
	color: #fff;
	font-weight: 800;
	box-shadow: 0 6px 16px rgba(229, 17, 122, 0.3);
}
.pd-fallback .star-rating { color: var(--star); }

/* Desktop CRO: the buy column follows the scroll - but ONLY when the whole
   card fits in the viewport (.can-stick set by main.js), otherwise a sticky
   card taller than the screen pins the add-to-cart button out of reach. */
@media (min-width: 1024px) {
	.pd-pdp-info.can-stick { position: sticky; top: 96px; }
}

/* Short pages must not leave a naked band under the footer: flex column
   layout keeps the footer glued to the bottom of the viewport. */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* 404 */
.pd-404-card {
	display: grid;
	justify-items: center;
	gap: 14px;
	max-width: 620px;
	margin: 10px auto 40px;
	padding: 36px 24px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}
.pd-404-card h1 { font-size: clamp(24px, 4vw, 32px); margin: 0; }
.pd-404-card p { margin: 0; color: var(--muted); max-width: 46ch; }
.pd-404-ctas { justify-content: center; margin: 4px 0 0; }
.pd-404 .pd-shop-fallback { margin-bottom: 40px; }

/* Cart quantity: a disabled "+" must read as disabled */
.wc-block-components-quantity-selector__button:disabled {
	opacity: 0.32;
	cursor: not-allowed;
}

/* ==========================================================================
   Full-bleed rhythm: alternating bands kill the flat cream monotony
   ========================================================================== */
/* Reassurance: same cream background as the hero wave above and the univers
   section below - no isolated band breaking the scroll (white cards carry
   the separation on their own) */
.pd-reassurance {
	background: var(--bg);
	padding-block: 30px 34px;
}
/* Reviews = soft cream band, in the palette of the rest of the body */
.pd-reviews {
	background: var(--bg-cream);
	padding-block: 50px 56px;
	margin-block: 30px 0;
}
/* FAQ breathing room after the pink band */
.pd-faq-section, #faq { scroll-margin-top: 110px; }

/* Duo/Trio promo band - grosse bulle arrondie (plus le bandeau brut pleine
   largeur), gradient de la famille rose harmonisée. */
.pd-promo-band {
	position: relative;
	overflow: hidden;
	margin-top: 44px;
	padding-block: 40px;
	color: #fff;
	background:
		radial-gradient(80% 140% at 0% -20%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%),
		var(--grad-band);
}
/* Bulles décoratives : le côté "puffy" sans surcharger */
.pd-promo-band::before,
.pd-promo-band::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.pd-promo-band::before {
	width: 230px; height: 230px;
	top: -80px; right: 6%;
	background: rgba(255, 255, 255, 0.10);
}
.pd-promo-band::after {
	width: 130px; height: 130px;
	bottom: -46px; left: 5%;
	border: 2px solid rgba(255, 255, 255, 0.22);
}
@media (min-width: 768px) {
	.pd-promo-band {
		width: min(calc(100% - 48px), calc(var(--container) - 48px));
		margin-inline: auto;
		border-radius: 56px;
		padding-block: 48px;
		box-shadow: 0 24px 60px rgba(175, 51, 108, 0.28);
	}
}
.pd-promo-band-in {
	display: grid;
	gap: 18px;
	align-items: center;
	justify-items: center;
	text-align: center;
}
.pd-promo-band-mascot { filter: drop-shadow(0 16px 28px rgba(122, 6, 70, 0.35)); max-width: 260px; height: auto; }
.pd-promo-kicker {
	display: inline-block;
	margin: 0 0 10px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.4);
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
.pd-promo-band h2 { color: #fff; font-size: clamp(24px, 3.2vw, 36px); margin-bottom: 10px; max-width: 22ch; }
.pd-promo-sub { color: rgba(255, 255, 255, 0.9); max-width: 52ch; margin: 0 0 18px; }
@media (min-width: 900px) {
	.pd-promo-band-in { grid-template-columns: 300px minmax(0, 1fr); text-align: left; justify-items: start; }
	.pd-promo-band h2 { max-width: none; }
	.pd-promo-band .pd-hero-ctas { justify-content: flex-start; }
}

/* Product cards: shelf energy (image zoom, hot price) */
.pd-product-media { overflow: hidden; }
.pd-product-media img { transition: transform 0.35s ease; }
.pd-product-card:hover .pd-product-media img { transform: scale(1.06); }
.pd-product-price { font-size: 18px; color: var(--pink-hot-dark); }

/* Order confirmation: branded hero + compact sections */
.pd-thankyou-hero {
	display: grid;
	justify-items: center;
	gap: 18px;
	margin: 0 0 22px;
	text-align: left;
}
@media (min-width: 768px) {
	.pd-thankyou-hero { grid-template-columns: 130px minmax(0, 1fr); align-items: center; }
}
.pd-thankyou-steps {
	list-style: none;
	counter-reset: pd-step;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.pd-thankyou-steps li {
	counter-increment: pd-step;
	position: relative;
	padding: 12px 14px 12px 52px;
	background: var(--bg-cream);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}
.pd-thankyou-steps li::before {
	content: counter(pd-step);
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--grad-hot);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
}
.pd-thankyou-steps strong { display: block; font-size: 14px; }
.pd-thankyou-steps span { font-size: 13px; color: var(--muted); }
.pd-thankyou-loyalty { margin-bottom: 22px; }
.pd-thankyou-loyalty a { color: var(--pink-hot-dark); }
/* Compact the default WooCommerce thankyou spacing (was ~150px of voids) */
.woocommerce-order p,
.woocommerce-order section { margin-top: 0; }
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details { margin: 22px 0 0; }
.woocommerce-order .woocommerce-customer-details address { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); font-style: normal; }
.woocommerce-order .woocommerce-column__title { margin-bottom: 8px; font-size: 19px; }

/* Content pages (CGV, mentions, livraison…) rendered through index.php:
   readable measure + card container instead of raw text on cream. */
.pd-fallback article {
	max-width: 860px;
	margin: 0 auto 30px;
	padding: 30px clamp(20px, 4vw, 44px) 38px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}
.pd-fallback article > h1 { margin-bottom: 14px; }
.pd-fallback article h2 { font-size: 21px; margin: 28px 0 10px; }
.pd-fallback article h3 { font-size: 16.5px; margin: 20px 0 8px; }
.pd-fallback article p { margin: 0 0 14px; line-height: 1.65; }
.pd-fallback article ul { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; }
.pd-fallback article li { line-height: 1.55; }
.pd-fallback article a { color: var(--pink-hot-dark); font-weight: 700; }

/* Contact page */
.pd-contact-head { max-width: 860px; margin: 0 auto 24px; }
.pd-contact-head h1 { margin-bottom: 6px; }
.pd-contact-head p { color: var(--muted); margin: 0; }
.pd-contact-layout {
	display: grid;
	gap: 20px;
	max-width: 980px;
	margin: 0 auto 40px;
}
@media (min-width: 900px) {
	.pd-contact-layout { grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
}
.pd-contact-aside {
	display: grid;
	justify-items: start;
	gap: 16px;
	padding: 24px;
	background: var(--bg-cream);
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
}
.pd-contact-aside > img { justify-self: center; }
.pd-contact-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pd-contact-info li { display: flex; gap: 12px; align-items: flex-start; }
.pd-contact-info strong { display: block; font-size: 13px; margin-bottom: 2px; }
.pd-contact-info a { color: var(--pink-hot-dark); font-weight: 700; word-break: break-all; }
.pd-contact-info span:not(.pd-chip):not(.pd-flag) { font-size: 13.5px; }
.pd-contact-faq { margin: 0; font-size: 13px; color: var(--muted); }
.pd-contact-faq a { color: var(--pink-hot-dark); font-weight: 700; }
.pd-contact-form-card {
	padding: 26px clamp(18px, 3vw, 30px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}
.pd-contact-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pd-contact-row { display: grid; gap: 0 16px; }
@media (min-width: 640px) {
	.pd-contact-row { grid-template-columns: 1fr 1fr; }
}
.pd-contact-field { margin: 0 0 16px; display: grid; gap: 6px; }
.pd-contact-field label { font-size: 13px; font-weight: 800; }
.pd-contact-opt { font-weight: 600; color: var(--muted); }
.pd-contact-field input,
.pd-contact-field select,
.pd-contact-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--bg);
	font: inherit;
	font-size: 14px;
}
/* Sans appearance none, iOS impose son select natif gris qui detonne
   avec les autres champs. Chevron redessine en fond SVG. */
.pd-contact-field select {
	-webkit-appearance: none;
	appearance: none;
	color: var(--ink);
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236A6370' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.pd-contact-field textarea { resize: vertical; min-height: 120px; }
.pd-contact-field input:focus,
.pd-contact-field select:focus,
.pd-contact-field textarea:focus { outline: none; border-color: var(--pink); }
.pd-contact-status {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	background: var(--green-soft);
	color: #14603C;
	font-size: 13.5px;
	font-weight: 700;
}
.pd-contact-status.is-error { background: #FDECEC; color: #A02226; }
.pd-contact-rgpd { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.pd-contact-rgpd a { color: inherit; }

/* Shop archive + product search results */
.pd-shop-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
}
.pd-shop-head h1 { margin-bottom: 2px; font-size: clamp(26px, 4.6vw, 40px); }
.pd-shop-count { margin: 0; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.pd-shop-toolbar { display: flex; align-items: center; }
.pd-shop .pd-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 900px) {
	.pd-shop .pd-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
.pd-shop-empty {
	display: grid;
	justify-items: center;
	gap: 12px;
	max-width: 560px;
	margin: 26px auto 40px;
	padding: 34px 22px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}
.pd-shop-empty h2 { font-size: 22px; margin: 0; }
.pd-shop-empty p { margin: 0; color: var(--muted); }
.pd-shop-search {
	display: flex;
	gap: 10px;
	width: 100%;
	max-width: 420px;
	/* min-width 0 : en item de grille, WebKit impose sinon la largeur
	   intrinseque du champ et le formulaire deborde de la carte 404. */
	min-width: 0;
}
.pd-shop-search input[type="search"] {
	flex: 1 1 0;
	width: 0;
	min-width: 0;
	padding: 12px 16px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
	font: inherit;
	font-size: 14px;
}
.pd-shop-search input[type="search"]:focus { outline: none; border-color: var(--pink); }
.pd-shop-empty-ctas { justify-content: center; margin: 4px 0 0; }
.pd-shop-fallback { margin-top: 10px; }
.pd-shop-fallback .pd-h2 { margin-bottom: 20px; }

/* Cart cross-sell strip */
.pd-cross {
	margin-top: 26px;
	padding: 20px 18px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}
.pd-cross > h2 {
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 800;
	margin: 0 0 14px;
}
.pd-cross .pd-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
	.pd-cross .pd-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pd-cross-hint {
	margin: -6px 0 14px;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	background: var(--green-soft);
	border: 1px dashed rgba(47, 164, 106, 0.5);
	color: #14603C;
	font-size: 13px;
	font-weight: 800;
}

/* Empty cart: selling empty state (heading + CTAs + best sellers) */
.wp-block-woocommerce-empty-cart-block .pd-empty-cart-title { margin-top: 8px; }
.wp-block-woocommerce-empty-cart-block .pd-empty-cart-sub {
	max-width: 52ch;
	margin: 10px auto 20px;
	color: var(--muted);
	font-size: 15px;
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
	border-radius: 999px;
	padding: 13px 26px;
	font-weight: 800;
	font-size: 14.5px;
	background: var(--grad-hot);
	background-origin: border-box;
	background-clip: border-box;
	color: #fff;
	border: 0;
}
.wp-block-woocommerce-empty-cart-block .is-style-outline .wp-block-button__link {
	background: var(--surface);
	color: var(--ink);
	border: 1.5px solid var(--line);
}
.wp-block-woocommerce-empty-cart-block .pd-empty-cart-h3 {
	margin: 34px 0 16px;
	font-size: 22px;
}
/* Le CSS des blocs Woo colore les liens du panier en rose : sur nos boutons
   pleins (rose sur rose, illisible) le blanc doit etre verrouille. */
.pd-fallback .pd-btn-pink,
.pd-fallback .pd-btn-pink:visited,
.pd-fallback .pd-btn-pink:hover,
.pd-fallback .pd-btn-pink:focus { color: #fff; }
.pd-bestsellers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
	.pd-bestsellers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Polish pass: unclipped shadows, arrows v2, aligned reviews, modals
   ========================================================================== */

/* Shadows must never be clipped by scrollers / the filter drawer */
.pd-products { padding: 14px 8px 22px; }
@media (min-width: 1100px) {
	.pd-cat-aside { padding: 4px 4px 24px; }
}
.pd-fallback .wc-block-grid__products { padding: 6px; }

/* Carousel arrows v2 (auto-hidden by JS when nothing scrolls) */
.pd-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border: 1px solid rgba(243, 80, 123, 0.35);
	border-radius: 50%;
	background: var(--surface);
	color: var(--pink-hot-dark);
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(229, 17, 122, 0.12);
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pd-arrow:hover {
	background: var(--grad-hot);
	border-color: transparent;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(229, 17, 122, 0.35);
}
.pd-arrow[hidden] { display: none; }

/* Review cards: stars + author pinned to the bottom, aligned across cards */
.pd-review-card { display: flex; flex-direction: column; }
.pd-review-card > p:first-of-type { flex: 1 1 auto; }
.pd-review-stars { margin-top: auto; }
.pd-reviews-link {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 800;
	color: var(--pink-hot-dark);
}
.pd-reviews-link:hover { text-decoration: underline; }

/* Mobile menu login card: nothing may poke out */
.pd-menu-login { overflow: hidden; }
.pd-menu-login > div { min-width: 0; flex: 1 1 auto; }
.pd-menu-login .pd-menu-avatar { flex: 0 0 auto; }
@media (max-width: 389px) {
	.pd-menu-login { padding: 14px; gap: 10px; }
	.pd-menu-login .pd-menu-avatar { width: 44px; height: 44px; }
}

/* ----- Modals (wishlist signup + age gate) ----- */
.pd-modal { position: fixed; inset: 0; bottom: var(--pd-vv-gap, 0px); z-index: 200; }
.pd-modal[hidden] { display: none; }
.pd-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(52, 49, 53, 0.55);
	backdrop-filter: blur(3px);
}
.pd-modal-card {
	position: relative;
	max-width: 420px;
	margin: 12vh auto 0;
	padding: 28px 24px 24px;
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
	text-align: center;
	width: calc(100% - 32px);
}
.pd-modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; }
.pd-modal-ic {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: var(--pink-soft);
	color: var(--pink-hot-dark);
}
.pd-modal-card h2 { font-size: 24px; margin: 0 0 8px; }
.pd-modal-card p { font-size: 14px; color: var(--muted); }
.pd-modal-card .pd-btn-block { justify-content: center; margin-top: 6px; }
.pd-modal-alt { margin: 12px 0 0; font-size: 13px; }
.pd-modal-alt a { color: var(--pink-hot-dark); font-weight: 800; }
.pd-modal-alt a:hover { text-decoration: underline; }

.pd-agegate .pd-modal-overlay { background: rgba(40, 20, 40, 0.75); backdrop-filter: blur(6px); }
.pd-agegate-logo { margin: 0 auto 6px; }
.pd-agegate-badge { width: 40px; height: 40px; font-size: 13px; margin: 0 auto 10px; }
.pd-agegate-actions { display: grid; gap: 10px; margin-top: 14px; }
.pd-agegate-refused {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	background: var(--pink-pale);
	border: 1px solid rgba(229, 17, 122, 0.3);
	color: var(--ink) !important;
	font-weight: 700;
	font-size: 13px !important;
}

/* ==========================================================================
   Hero slider (homepage)
   ========================================================================== */

.pd-hero-slider { position: relative; }
.pd-hero-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	border-radius: var(--radius-lg);
}
.pd-hero-track::-webkit-scrollbar { display: none; }
.pd-hero-track:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.pd-hero-slide { scroll-snap-align: start; min-width: 0; }
.pd-hero-slide .pd-hero-card { height: 100%; }

.pd-hero-text .pd-hero-kicker {
	display: inline-block;
	margin: 0 0 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--grad-hot);
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}
.pd-hero-text .pd-hero-title {
	font-family: var(--font-serif);
	font-weight: 700;
	line-height: 1.12;
	font-size: clamp(26px, 5vw, 44px);
	color: var(--ink);
	margin: 0 0 12px;
}
.pd-hero-card--bundle {
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(252, 194, 63, 0.28) 0%, rgba(252, 194, 63, 0) 55%),
		var(--bg-cream);
}
.pd-hero-card--fid {
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(255, 46, 140, 0.16) 0%, rgba(255, 46, 140, 0) 55%),
		linear-gradient(135deg, #FDF1EC 0%, #FCE7E6 100%);
}
.pd-hero-visual--solo { display: grid; place-items: center; }
.pd-hero-visual--solo .pd-hero-mascot { position: static; max-height: 340px; width: auto; }

.pd-hero-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 14px;
}
.pd-hero-dots { display: flex; gap: 8px; }
.pd-hero-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(243, 80, 123, 0.25);
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease;
}
.pd-hero-dot.is-active { width: 26px; background: var(--grad-hot); }
.pd-hero-dot:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

@media (min-width: 1200px) {
	.pd-hero-nav { position: static; }
	.pd-hero-slider [data-hero-prev],
	.pd-hero-slider [data-hero-next] {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
	}
	.pd-hero-slider [data-hero-prev] { left: 14px; }
	.pd-hero-slider [data-hero-next] { right: 14px; }
	.pd-hero-dots { margin-top: 0; }
}

/* ==========================================================================
   Gradient edge fix + mascot asset integration
   ========================================================================== */

/* THE glitch fix: gradients were painted under the 2px transparent border of
   .pd-btn, leaving a dark fringe at the rounded extremities. Paint the
   gradient across the border box instead. */
.pd-btn-pink,
.pd-cat-chip.is-active {
	background-origin: border-box;
	background-clip: border-box;
	border-color: transparent;
}
.pd-hero-text .pd-hero-kicker,
.pd-top-badge,
.pd-bundle-popular,
.pd-fid-reward-chip {
	background-origin: border-box;
	background-clip: border-box;
}

/* Badges sitting on busy product photos: neutral soft shadow + white ring */
.pd-top-badge {
	box-shadow: 0 2px 8px rgba(52, 49, 53, 0.22);
	border: 1.5px solid rgba(255, 255, 255, 0.75);
}

/* (les positions des flèches d'avis vivent dans le bloc Avis clients) */

/* Reassurance mascots (Ecigplanete-style vignettes) */
.pd-reassurance-mascot {
	width: 84px;
	height: 84px;
	flex: 0 0 auto;
	object-fit: contain;
	filter: drop-shadow(0 6px 10px rgba(229, 17, 122, 0.15));
}

/* Hero slide scenes (solo mascot compositions) */
.pd-hero-scene {
	max-width: min(100%, 480px);
	height: auto;
	filter: drop-shadow(0 14px 30px rgba(229, 17, 122, 0.18));
}

/* Modal mascots */
.pd-modal-mascot { display: block; margin: 0 auto 8px; width: 130px; height: auto; }
.pd-agegate-mascot { display: block; margin: 0 auto 8px; width: 150px; height: auto; }

/* Conseil flavor circles keep their original white-circle styling. */

/* ==========================================================================
   Tap-target pass: 19-31px links become comfortable thumb targets
   ========================================================================== */
.pd-footer-col a {
	display: inline-block;
	padding-block: 6px;
}
.pd-footer-legal a { display: inline-block; padding-block: 8px; }
.pd-product-info h3 a { display: inline-block; padding-block: 5px; }
.pd-hero-trust { padding-block: 8px; }
.pd-nav a { display: inline-block; padding-block: 10px; }
@media (max-width: 767px) {
	.pd-footer-col li + li { margin-top: 2px; }
}

/* ==========================================================================
   Desktop CRO pass - panier & checkout (07/2026)
   Cause racine corrigée : le max-width 860px de .pd-fallback article (pensé
   pour les pages CGV/mentions) écrasait les blocs Woo - résumé de commande
   réduit à ~270px, d'où le retour à la ligne caractère par caractère.
   Tout est scopé ≥1025px : le mobile ne change pas.
   ========================================================================== */

/* Upsell "Goût Mystère" : rendu caché par PHP, déplacé dans la sidebar par
   main.js, sur tous les écrans. [hidden] doit gagner sur tout (piège connu). */
.pd-cart-upsell { display: none; }
.pd-cart-upsell[hidden] { display: none !important; }

/* ----- Upsell "Goût Mystère" dans la sidebar panier (tous écrans) ----- */
.woocommerce-cart .wc-block-cart__sidebar .pd-cart-upsell {
	display: block;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed rgba(243, 80, 123, 0.4);
}
.pd-cart-upsell-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pink-hot-dark);
}
.pd-cart-upsell-badge .pd-ic { width: 14px; height: 14px; }
.pd-cart-upsell-row { display: flex; align-items: center; gap: 10px; }
.pd-cart-upsell-img,
.pd-cart-upsell-row img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--line);
	flex: 0 0 52px;
}
.pd-cart-upsell-meta { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.pd-cart-upsell-meta strong { font-size: 13.5px; line-height: 1.25; }
.pd-cart-upsell-meta span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.pd-cart-upsell-meta .woocommerce-Price-amount { color: var(--pink-hot-dark); font-weight: 800; }
.pd-cart-upsell-meta .pd-cart-upsell-price {
	display: flex;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 1px;
}
.pd-cart-upsell-meta .pd-cart-upsell-price del { text-decoration: line-through; }
.pd-cart-upsell-price del .woocommerce-Price-amount {
	color: var(--muted);
	font-weight: 600;
	font-size: 12px;
}
.pd-cart-upsell-meta .pd-cart-upsell-price ins { text-decoration: none; background: none; }
.pd-cart-upsell-price ins .woocommerce-Price-amount { font-size: 15px; }
.pd-cart-upsell-meta .pd-cart-upsell-deal {
	font-size: 11px;
	font-weight: 700;
	color: var(--pink-hot-dark);
	line-height: 1.35;
}
.pd-cart-upsell-btn {
	border: 0;
	border-radius: 999px;
	padding: 10px 16px;
	background: var(--grad-hot);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 12.5px;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(229, 17, 122, 0.3);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pd-cart-upsell-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(229, 17, 122, 0.38); }
.pd-cart-upsell-btn:disabled { opacity: 0.65; cursor: default; transform: none; }
.pd-cart-upsell.is-added .pd-cart-upsell-btn { background: #2FA46A; box-shadow: none; }
/* Colonne étroite : le bouton prend toute la largeur sous la ligne produit
   (cible tactile confortable, et la méta ne se serre plus à ~170px). */
@media (max-width: 767px) {
	.pd-cart-upsell-row { flex-wrap: wrap; }
	.pd-cart-upsell-btn { flex: 1 0 100%; padding: 12px 16px; font-size: 13.5px; }
}


@media (min-width: 1025px) {
	/* ----- Déverrouiller la largeur : le panier/checkout occupe le container ----- */
	.woocommerce-cart .pd-fallback article,
	.woocommerce-checkout .pd-fallback article {
		max-width: none;
		padding: 26px 34px 32px;
	}
	.woocommerce-cart .pd-fallback article > h1,
	.woocommerce-checkout .pd-fallback article > h1 { font-size: 30px; margin-bottom: 12px; }

	/* ----- Colonnes : contenu fluide + sidebar fixe et sticky ----- */
	/* flex-basis 0 obligatoire : avec "auto", la table du panier impose sa
	   largeur de contenu et la sidebar passe à la ligne (colonnes empilées). */
	.woocommerce-cart .wc-block-cart.wc-block-cart,
	.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-components-sidebar-layout { flex-wrap: nowrap; }
	.woocommerce-cart .wc-block-cart__main.wc-block-components-main,
	.woocommerce-checkout .wc-block-checkout__main.wc-block-components-main {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		padding-right: 36px;
	}
	.woocommerce-cart .wc-block-cart__sidebar.wc-block-components-sidebar,
	.woocommerce-checkout .wc-block-checkout__sidebar.wc-block-components-sidebar {
		flex: 0 0 400px;
		width: 400px;
		position: sticky;
		top: 96px; /* sous le header sticky, même offset que la PDP */
		align-self: flex-start;
		padding: 16px 20px 18px;
	}
	.woocommerce-cart .wc-block-cart { margin-bottom: 8px; }
	.woocommerce-checkout .wp-block-woocommerce-checkout { padding-top: 4px; }

	/* ----- Panier : échelle typo unifiée (Nunito, tailles/graisses cohérentes) ----- */
	.woocommerce-cart .wc-block-cart-items th {
		font-size: 11.5px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--muted);
	}
	.woocommerce-cart .wc-block-cart-item__image img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
	.woocommerce-cart .wc-block-components-product-name { font-size: 15.5px; }
	.woocommerce-cart .wc-block-cart-item__prices { font-size: 13px; margin: 2px 0 4px; }
	.woocommerce-cart .wc-block-cart-item__prices del { color: var(--muted); font-weight: 600; }
	.woocommerce-cart .wc-block-cart-item__prices ins {
		color: var(--pink-hot-dark);
		font-weight: 800;
		text-decoration: none;
		margin-left: 4px;
	}
	.woocommerce-cart .wc-block-components-product-details.wc-block-components-product-details { font-size: 12.5px; margin-bottom: 6px; }
	.woocommerce-cart .wc-block-components-product-details__name { font-weight: 700; color: var(--muted); }
	.woocommerce-cart .wc-block-components-product-details__value { font-weight: 600; }
	.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price { font-size: 16px; font-weight: 800; }
	.woocommerce-cart .wc-block-cart-item__total .wc-block-components-sale-badge { font-size: 11px; margin-top: 4px; }

	/* ----- Sidebars (panier + checkout) : titres et totaux au même diapason ----- */
	.woocommerce-cart .wc-block-cart__totals-title,
	.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
		font-family: var(--font-serif);
		font-size: 19px;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: none;
		color: var(--ink);
		text-align: left;
	}
	.woocommerce-cart .wc-block-components-totals-item,
	.woocommerce-checkout .wc-block-components-totals-item { font-size: 14px; }
	.woocommerce-cart .wc-block-components-totals-item__label,
	.woocommerce-checkout .wc-block-components-totals-item__label { font-weight: 700; }
	.woocommerce-cart .wc-block-components-totals-item__value,
	.woocommerce-checkout .wc-block-components-totals-item__value { font-weight: 800; font-size: 14px; }
	.woocommerce-cart .wc-block-components-totals-item__description,
	.woocommerce-checkout .wc-block-components-totals-item__description,
	.woocommerce-cart .wc-block-components-totals-shipping__via,
	.woocommerce-checkout .wc-block-components-totals-shipping__via {
		font-size: 12px;
		color: var(--muted);
	}
	.woocommerce-cart .wc-block-components-totals-coupon-link,
	.woocommerce-checkout .wc-block-components-totals-coupon-link { font-size: 13.5px; font-weight: 700; }
	/* Ligne finale : le total doit dominer visuellement */
	.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
	.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
		font-size: 17px;
		font-weight: 800;
	}
	.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
	.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 22px;
		font-weight: 800;
		color: var(--pink-hot-dark);
	}
	.woocommerce-cart .wc-block-components-totals-footer-item-tax,
	.woocommerce-checkout .wc-block-components-totals-footer-item-tax { font-size: 12px; }
	.woocommerce-cart .wc-block-cart__submit-button { width: 100%; font-size: 16px; }

	/* ----- Checkout : résumé de commande - fini le mot cassé lettre à lettre ----- */
	.woocommerce-checkout .wc-block-components-order-summary-item {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 14px 0;
	}
	.woocommerce-checkout .wc-block-components-order-summary-item__image {
		display: block;
		flex: 0 0 56px;
		width: 56px;
		padding: 0;
	}
	.woocommerce-checkout .wc-block-components-order-summary-item__image img {
		max-width: 100%;
		border-radius: var(--radius-sm);
		border: 1px solid var(--line);
	}
	.woocommerce-checkout .wc-block-components-order-summary-item__description {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
		word-break: normal;
		overflow-wrap: normal;
	}
	.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
		font-size: 14px;
		font-weight: 800;
		display: block;
		margin: 0 0 2px;
	}
	.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-cart-item__prices { font-size: 12.5px; }
	.woocommerce-checkout .wc-block-components-order-summary-item__description del { color: var(--muted); font-weight: 600; }
	.woocommerce-checkout .wc-block-components-order-summary-item__description ins {
		color: var(--pink-hot-dark);
		font-weight: 800;
		text-decoration: none;
		margin-left: 4px;
	}
	.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata { font-size: 12px; }
	.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
		display: block;
		flex: 0 0 auto;
		padding: 0;
		text-align: right;
		font-size: 14.5px;
		font-weight: 800;
	}
	.woocommerce-checkout .wc-block-cart-item__total-price-and-sale-badge-wrapper { align-items: flex-end; }
	.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-sale-badge { font-size: 10.5px; margin-top: 4px; }
	.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
		background: var(--grad-hot);
		border: 2px solid #fff;
		color: #fff;
		font-weight: 800;
	}

	/* ----- Checkout : formulaire compact, moins de scroll avant le paiement ----- */
	.woocommerce-checkout .wc-block-components-checkout-step { padding: 18px 22px 20px; margin-bottom: 12px; }
	.woocommerce-checkout .wc-block-components-checkout-step__heading { margin: 0 0 2px; }
	.woocommerce-checkout .wc-block-components-checkout-place-order-button { font-size: 16px; }

}

/* ==========================================================================
   Corrections client 08/07/2026 - MOBILE UNIQUEMENT (le desktop ≥1200 ne
   change pas). Accueil : hero compact ~carré, réassurance en 1 conteneur,
   univers en slider 2:1, meilleures ventes lisibles/alignées, bulle Duo &
   Trio carrée en pictos, conseil du dragon compact, avis sans flèches,
   footer resserré.
   ========================================================================== */

/* Variantes de contenu mobile rendues dans le HTML : cachées par défaut,
   affichées (et leurs jumelles desktop masquées) dans le bloc ≤767 plus bas. */
.pd-promo-title-short,
.pd-promo-points,
.pd-conseil-p-short,
.pd-conseil-cta { display: none; }

@media (max-width: 1199px) {
	/* Logo réellement centré : en flex, le burger (44px) pèse moins lourd que
	   les deux actions à droite (~98px) et le logo dérivait vers la gauche.
	   Grille 1fr/auto/1fr = axe du logo = axe de l'écran. */
	.pd-header-in { display: grid; grid-template-columns: 1fr auto 1fr; }
	.pd-burger { justify-self: start; }
	.pd-header-actions { justify-self: end; }

	/* Avis clients : sur tactile on swipe. Les flèches (pensées desktop)
	   s'empilaient en haut/bas à gauche du carrousel - on les retire. */
	.pd-arrow.pd-reviews-prev,
	.pd-arrow.pd-reviews-next { display: none; }

	/* ----- Menu burger compact (corrections 09/07/2026) : moins de « 15
	   mètres de long » - bloc connexion réduit, liens resserrés, Trustpilot
	   sur une ligne, blocs redondants retirés. ----- */
	.pd-menu-mobile { padding: 14px 14px 22px; }
	.pd-menu-top { margin-bottom: 12px; }
	.pd-menu-top img { width: 74px; }
	.pd-menu-login { align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; }
	.pd-menu-avatar { width: 44px; height: 44px; }
	.pd-menu-avatar svg { width: 22px; height: 22px; }
	.pd-menu-hello { font-size: 15px; }
	.pd-menu-hello-sub { font-size: 12px; margin-bottom: 7px; }
	.pd-menu-login-btns { gap: 6px; }
	.pd-menu-login-btns .pd-btn { padding: 8px 12px; font-size: 12px; }
	.pd-menu-list { margin-bottom: 12px; }
	.pd-menu-list a { padding: 10px 4px; gap: 12px; font-size: 15px; }
	.pd-menu-mobile .pd-btn-block { padding: 12px 18px; font-size: 14px; }
	/* Trustpilot : les 3 paragraphes passent sur une seule ligne */
	.pd-menu-trust {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2px 12px;
		margin-top: 12px;
		padding: 11px 14px;
	}
	.pd-menu-trust p { margin: 0; }
	.pd-menu-trust-score { font-size: 16px; gap: 6px; }
	.pd-menu-trust-count { font-size: 12.5px; }
	.pd-menu-reassurance { gap: 6px; margin-top: 10px; }
	.pd-menu-reassurance li { padding: 8px 10px; gap: 8px; font-size: 11.5px; }
	/* « Pourquoi choisir Puff Division ? » : redondant avec les garanties et
	   le bloc Trustpilot juste au-dessus - retiré pour raccourcir le menu. */
	.pd-menu-why { display: none; }
	.pd-menu-socials { margin-top: 12px; gap: 10px; }
	.pd-menu-socials a { width: 40px; height: 40px; }
	.pd-menu-news { margin-top: 12px; padding: 12px 14px; font-size: 12.5px; }
	.pd-menu-news strong { font-size: 14.5px; }
	.pd-menu-news-ic { width: 40px; height: 40px; }
}

@media (max-width: 767px) {

	/* ----- Échelle typo commune : mêmes titres de section partout ----- */
	.pd-h2 { font-size: 22px; gap: 10px; margin-bottom: 16px; }
	.pd-h2-deco, .pd-h2-deco-end { width: 26px; height: 3px; }
	.pd-h2-left { font-size: 21px; }
	.pd-section-head .pd-h2 { margin-bottom: 10px; }

	/* ----- Hero compact ~carré : texte à gauche, produit à droite, CTA
	   pleine largeur dessous. display:contents fait des enfants du bloc
	   texte des items de la grille du hero. ----- */
	.pd-hero--bleed .pd-hero-in {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
		align-items: center;
		gap: 0 12px;
		padding-block: 18px 42px;
	}
	.pd-hero--bleed .pd-hero-text { display: contents; }
	.pd-hero--bleed .pd-hero-text h1 {
		grid-column: 1;
		align-self: end;
		font-size: clamp(23px, 6.2vw, 28px);
		margin-bottom: 8px;
	}
	.pd-hero--bleed .pd-hero-text > p {
		grid-column: 1;
		align-self: start;
		font-size: 13.5px;
		line-height: 1.5;
		margin-bottom: 0;
	}
	.pd-hero--bleed .pd-hero-visual { grid-column: 2; grid-row: 1 / 3; }
	.pd-hero-carousel img { width: 100%; max-width: 200px; }
	.pd-hero--bleed .pd-hero-ctas {
		grid-column: 1 / -1;
		grid-row: 3;
		gap: 8px;
		margin: 12px 0 0;
	}
	.pd-hero--bleed .pd-hero-ctas .pd-btn { padding: 12px 18px; font-size: 14px; }
	.pd-hero--bleed .pd-hero-badges {
		grid-column: 1 / -1;
		grid-row: 4;
		justify-content: center;
		gap: 2px 16px;
		margin-top: 8px;
		font-size: 12px;
	}
	.pd-hero--bleed .pd-hero-trust { padding-block: 2px; }

	/* ----- Réassurance : bandeau « mascottes » (réf. astronautes 09/07/2026) -
	   4 garanties côte à côte, dragon au-dessus, libellé court centré dessous,
	   sans cartes. Les descriptions longues sont masquées sur mobile. ----- */
	.pd-reassurance { padding-block: 18px 20px; }
	.pd-reassurance-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.pd-reassurance-grid li {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.pd-reassurance-mascot { width: 64px; height: 64px; }
	.pd-reassurance-grid h3 {
		font-size: 10.5px;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		line-height: 1.3;
		margin: 0;
	}
	.pd-reassurance-grid p { display: none; }

	/* ----- Nos univers : slider horizontal, cartes paysage ~2:1 (la carte
	   suivante dépasse du bord = invitation au swipe) ----- */
	.pd-univers-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(80%, 300px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 4px;
		gap: 12px;
		padding: 4px 4px 16px;
		scrollbar-width: none;
		/* Indispensable : sans transform, Blink (Chrome Android) élargit le
		   layout viewport à ~2 cartes (668px) et la bottom-nav fixed déborde
		   de l'écran. Le transform crée un containing block qui coupe cette
		   propagation de largeur. */
		transform: translateZ(0);
	}
	.pd-univers-grid::-webkit-scrollbar { display: none; }
	.pd-univers-card { scroll-snap-align: start; gap: 12px; padding: 16px; }
	.pd-univers-card h3 { font-size: 17px; margin-bottom: 4px; }
	.pd-univers-card p { font-size: 12.5px; margin-bottom: 10px; }
	.pd-univers-card .pd-btn { padding: 8px 16px; font-size: 13px; }
	.pd-univers-card img, .pd-asset-ph-square { height: 112px; max-width: 40%; }

	/* ----- Meilleures ventes : image pleine carte, bouton pleine largeur,
	   cartes alignées (2 lignes réservées au titre, bouton calé en bas).
	   Scopé .pd-products : les grilles catégories (.pd-cat-grid) ont leur
	   propre passe plus bas - les règles génériques les éclataient. ----- */
	.pd-products { grid-auto-columns: min(64%, 240px); gap: 12px; }
	.pd-products .pd-product-card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: 10px;
		padding: 12px 12px 14px;
		align-items: stretch;
	}
	.pd-products .pd-product-info { gap: 3px; }
	.pd-products .pd-product-info h3 { font-size: 14px; line-height: 1.3; }
	.pd-products .pd-product-info h3 a { display: block; padding-block: 0; min-height: 2.6em; }
	.pd-products .pd-product-price { font-size: 17px; margin: 2px 0 8px; }
	.pd-products .pd-btn-add {
		margin-top: auto;
		width: 100%;
		padding: 11px 10px;
		font-size: 13px;
		white-space: nowrap;
	}

	/* ----- Duo & Trio : bulle arrondie ~carrée, message en pictos ----- */
	.pd-promo-band {
		width: calc(100% - 24px);
		margin: 28px auto 0;
		border-radius: 26px;
		padding-block: 24px 26px;
		box-shadow: 0 18px 40px rgba(175, 51, 108, 0.25);
	}
	.pd-promo-band::before { width: 150px; height: 150px; top: -60px; right: -30px; }
	.pd-promo-band::after { width: 90px; height: 90px; bottom: -34px; left: -20px; }
	.pd-promo-band-in { gap: 8px; }
	.pd-promo-band-mascot { max-width: 148px; }
	.pd-promo-kicker { margin-bottom: 4px; }
	/* Le titre court doit tenir sur UNE ligne (demande client) : taille en vw
	   calée sur la largeur du texte (~34 caractères Baloo 700), et surtout on
	   annule le max-width:22ch du desktop qui forçait le retour à la ligne. */
	.pd-promo-band h2 { font-size: clamp(14px, 4.4vw, 18px); margin-bottom: 10px; max-width: none; }
	.pd-promo-title-long { display: none; }
	.pd-promo-title-short { display: inline; }
	.pd-promo-sub { display: none; }
	/* 3 mini-tuiles centrées (picto au-dessus, texte dessous) : tout reste sur
	   l'axe central de la carte - la liste alignée à gauche cassait l'équilibre. */
	.pd-promo-points {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		width: 100%;
		margin: 2px 0 6px;
	}
	.pd-promo-points li {
		display: grid;
		grid-template-rows: 30px 1fr;
		justify-items: center;
		align-items: center;
		gap: 7px;
		padding: 11px 6px 10px;
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.12);
		border: 1px solid rgba(255, 255, 255, 0.26);
		font-size: 11px;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
	}
	.pd-promo-point-ic {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 30px; height: 30px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.22);
	}
	.pd-promo-band .pd-hero-ctas { width: 100%; margin: 6px 0 0; }

	/* ----- Conseil du dragon : tout sur l'axe central (même langage que la
	   bulle Duo & Trio) - mascotte en vedette, texte centré, arguments en
	   pastilles, saveurs en grille fixe (le slider d'un seul fruit
	   n'apportait rien) + CTA vers les ventes ----- */
	.pd-conseil-card {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
		gap: 0;
		padding: 20px 16px 18px;
	}
	.pd-conseil-mascot { width: 92px; margin-bottom: 8px; }
	.pd-conseil-text { display: contents; }
	.pd-conseil-text h2 { justify-content: center; font-size: 20px; gap: 8px; margin-bottom: 6px; }
	.pd-conseil-text > p {
		font-size: 13.5px;
		max-width: 32ch;
		margin-inline: auto;
		margin-bottom: 0;
	}
	.pd-conseil-p-long { display: none; }
	.pd-conseil-p-short { display: inline; }
	.pd-conseil-chips { justify-content: center; gap: 6px; margin-top: 12px; }
	.pd-conseil-chips li {
		font-size: 11.5px;
		gap: 6px;
		padding: 5px 12px 5px 6px;
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: 999px;
		box-shadow: 0 3px 8px rgba(52, 49, 53, 0.05);
	}
	.pd-conseil-chips .pd-chip { width: 24px; height: 24px; }
	.pd-conseil-chips .pd-ic { width: 12px; height: 12px; }
	.pd-conseil-carousel { width: 100%; margin-top: 12px; }
	.pd-flavors {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		overflow: visible;
		padding-block: 2px;
		/* Item flex du carrousel : sans width il reste à sa largeur de contenu,
		   calé à gauche - pleine largeur = 4 colonnes égales, donc centrées. */
		width: 100%;
	}
	.pd-flavors li { font-size: 11px; line-height: 1.2; gap: 6px; }
	.pd-flavors img { width: 60px; height: 60px; padding: 7px; }
	.pd-conseil-cta { display: flex; grid-column: 1 / -1; justify-self: stretch; margin-top: 12px; }

	/* ----- Avis clients : section resserrée ----- */
	.pd-reviews { padding-block: 30px 34px; margin-block: 24px 0; }
	.pd-reviews-in { gap: 12px; }
	.pd-reviews-score { padding: 16px; }
	.pd-reviews-note { font-size: 17px; margin-bottom: 2px; }
	.pd-reviews-note strong { font-size: 22px; }
	.pd-review-card { font-size: 13.5px; padding: 16px 16px 14px; }

	/* ----- Footer compact ----- */
	.pd-footer { margin-top: 24px; padding: 26px 0 14px; }
	.pd-footer-grid { gap: 18px 14px; }
	.pd-footer-brand {
		display: grid;
		grid-template-columns: 86px minmax(0, 1fr);
		align-items: center;
		gap: 4px 14px;
	}
	.pd-footer-brand img { width: 86px; margin-bottom: 0; grid-row: 1 / 3; }
	.pd-footer-brand p { font-size: 12.5px; margin: 0; max-width: none; }
	.pd-socials { margin-top: 2px; gap: 8px; }
	.pd-socials a { width: 34px; height: 34px; }
	.pd-footer-title { font-size: 13.5px; margin-bottom: 4px; }
	.pd-footer-col ul { gap: 0; }
	.pd-footer-col a { font-size: 13px; padding-block: 4px; }
	.pd-footer-news > p:not(.pd-footer-title) { font-size: 13px; }
	.pd-news-form { margin-top: 8px; }
	.pd-footer-bottom {
		flex-direction: column;
		align-items: center;
		gap: 8px;
		margin-top: 20px;
		padding-top: 14px;
		font-size: 12px;
		text-align: center;
	}
	.pd-footer-legal { gap: 2px 14px; justify-content: center; }
	.pd-footer-legal a { padding-block: 4px; }
	.pd-pay { min-width: 40px; height: 24px; font-size: 10px; }

	/* ----- Pages catégories (Puffs / Recharges), corrections 09/07/2026 -----
	   Hero calqué sur celui de l'accueil : texte à gauche, visuel pleine
	   hauteur à droite (fini la vignette qui flottait), CTA pleine largeur.
	   Les chips de garanties sont retirées (info déjà dans la topbar). */
	.pd-cat-hero-card {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: 0 12px;
		align-items: center;
		padding: 18px 16px 16px;
	}
	.pd-cat-hero-text { display: contents; }
	.pd-cat-hero-text h1 {
		grid-column: 1;
		align-self: end;
		font-size: 23px;
		margin-bottom: 8px;
	}
	.pd-cat-hero-text > p {
		grid-column: 1;
		align-self: start;
		font-size: 12.5px;
		line-height: 1.5;
		margin-bottom: 0;
	}
	.pd-cat-hero-visual { grid-column: 2; grid-row: 1 / 3; align-self: stretch; }
	.pd-cat-hero-visual img { max-height: 200px; }
	.pd-cat-hero-text .pd-hero-ctas {
		grid-column: 1 / -1;
		grid-row: 3;
		margin: 12px 0 0;
		gap: 8px;
	}
	.pd-cat-hero-chips { display: none; }

	/* Grilles produits catégories : 2 colonnes nettes, cartes alignées entre
	   elles (2 lignes réservées au titre, bouton calé en bas de carte). */
	.pd-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.pd-cat-grid .pd-product-card { grid-template-rows: auto 1fr; padding: 10px 10px 12px; }
	.pd-cat-grid .pd-product-media { margin-top: 24px; }
	.pd-cat-grid .pd-product-info h3 { font-size: 12.5px; line-height: 1.3; }
	.pd-cat-grid .pd-product-info h3 a { display: block; padding-block: 0; min-height: 2.6em; }
	.pd-cat-grid .pd-product-price { font-size: 15px; margin: 2px 0 8px; }
	.pd-cat-grid .pd-btn-add { margin-top: auto; font-size: 11.5px; padding: 8px 6px; }
	.pd-cat-grid .pd-heart { width: 36px; height: 36px; }
}

/* ==========================================================================
   PDP mobile (<768px) - disposition validée client (ancienne fiche produit) :
   titre + avis + pastilles AU-DESSUS de la galerie, vignettes en colonne à
   droite de l'image, UNE seule carte d'offre détaillée + rangée de tuiles
   Unité/Duo/Trio qui sert de sélecteur. Desktop strictement inchangé.
   ========================================================================== */

/* Tuiles = sélecteur mobile uniquement */
.pd-bundle-tiles { display: none; }

@media (max-width: 767px) {

	/* La carte info éclate (display:contents) pour intercaler la galerie
	   entre l'en-tête (titre/avis/pastilles) et le bloc d'achat.
	   gap:0 + stretch : le gap 20px et le align-items:start de la grille
	   desktop écartaient tout et empêchaient les blocs (offre, tuiles, CTA)
	   d'occuper toute la largeur de l'écran. */
	.pd-pdp-layout { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
	.pd-pdp-info { display: contents; }
	.pd-pdp-info > * { min-width: 0; order: 30; }
	.pd-pdp-title { order: 1; font-size: 27px; line-height: 1.1; margin-bottom: 6px; }
	.pd-pdp-rating { order: 2; align-self: flex-start; }
	.pd-pdp-signals { order: 3; }
	.pd-pdp-gallery { order: 4; min-width: 0; margin-bottom: 18px; }
	.pd-bundle { order: 5; margin-top: 0; }
	.pd-pdp-trust { order: 32; }
	.pd-pdp-payment { order: 33; }
	/* Le prix vit déjà dans la carte d'offre, les tuiles et la buybar ;
	   la description courte ferait doublon avec l'accordéon Description. */
	.pd-pdp-price,
	.pd-pdp-short { display: none; }

	/* Avis : étoiles + texte nus (sans capsule), comme la maquette. */
	.pd-pdp-rating { padding: 0; border: 0; background: none; box-shadow: none; margin-bottom: 8px; }

	/* Pastilles signal : capsules blanches à puce colorée. */
	.pd-pdp-signals { justify-items: start; gap: 6px; margin-bottom: 14px; }
	.pd-pdp-signal {
		padding: 8px 14px;
		border: 1px solid rgba(243, 80, 123, 0.14);
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 3px 10px rgba(243, 80, 123, 0.08);
	}

	/* Galerie : grande image + colonne de vignettes à droite (scroll vertical,
	   hauteur bornée par l'image via height:0 + min-height:100%). */
	.pd-pdp-gallery {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 64px;
		gap: 8px;
		align-items: stretch;
	}
	.pd-pdp-main:only-child { grid-column: 1 / -1; }
	.pd-pdp-thumbs {
		flex-direction: column;
		margin-top: 0;
		padding-bottom: 0;
		overflow-x: hidden;
		overflow-y: auto;
		height: 0;
		min-height: 100%;
	}
	.pd-pdp-thumb { width: 64px; height: 64px; }

	/* Offre : titre plus présent, sans filets latéraux. */
	.pd-bundle-title { font-size: 18px; margin-bottom: 12px; }
	.pd-bundle-title::before,
	.pd-bundle-title::after { display: none; }

	/* Une seule carte détaillée : celle de l'offre sélectionnée. */
	.pd-bundle-box:not(.is-active) { display: none; }
	.pd-bundle-box.is-active { border-radius: 18px; }
	.pd-bundle-boxes { margin-bottom: 10px; }

	/* Rangée de tuiles Unité / Duo x2 / Trio x3. */
	.pd-bundle-tiles { display: flex; gap: 8px; margin-bottom: 14px; }
	.pd-bundle-tile {
		flex: 1 1 0;
		min-width: 0;
		display: grid;
		gap: 2px;
		justify-items: center;
		padding: 10px 4px;
		border: 1.5px solid rgba(243, 80, 123, 0.18);
		border-radius: 14px;
		background: #fff;
		font-family: inherit;
		cursor: pointer;
		transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	}
	.pd-bundle-tile.is-active {
		border-color: var(--pink-hot);
		background: #FFF0F7;
		box-shadow: 0 4px 14px rgba(255, 46, 140, 0.16);
	}
	.pd-bundle-tile-name {
		font-size: 10.5px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.4px;
		color: var(--muted);
	}
	.pd-bundle-tile.is-active .pd-bundle-tile-name { color: var(--pink-hot-dark); }
	.pd-bundle-tile-price { font-size: 14.5px; font-weight: 900; color: var(--ink); }
	.pd-bundle-tile-price .woocommerce-Price-amount { font-size: inherit; }
	.pd-bundle-tile-compare { font-size: 10.5px; font-weight: 600; color: var(--muted); }

	/* Message livraison : sous le CTA, discret et centré. */
	.pd-ship-nudge { justify-content: center; text-align: center; margin-top: 10px; }
}

/* ==========================================================================
   Panier & checkout mobile (<768px) - compactage, lisibilité, conversion
   (retour client 09/07/2026). Le pass desktop (≥1025px) ne bouge pas.
   ========================================================================== */
@media (max-width: 767px) {

	/* --- Structure commune : moins de vide autour du contenu --- */
	.pd-fallback { padding-block: 12px 26px; }
	.pd-fallback .pd-breadcrumb { margin-bottom: 10px; font-size: 12.5px; }
	.pd-fallback article { padding: 14px 12px; }
	.pd-fallback article h1 { font-size: 24px; line-height: 1.1; margin-bottom: 10px; }

	/* Bandeaux au-dessus (progression livraison, points fidélité) */
	.pd-ship-progress { padding: 10px 12px; margin-bottom: 10px; }
	.pd-ship-progress p { font-size: 12.5px; margin-bottom: 6px; }
	.pd-loyalty-teaser { padding: 10px 12px; margin-bottom: 10px; gap: 8px; }
	.pd-loyalty-teaser p { font-size: 12px; }

	/* --- Panier : lignes produits compactes et scannables ---
	   (préfixe table.wc-block-cart-items : le CSS des blocs Woo est plus
	   spécifique qu'une simple classe, il faut le battre à son propre jeu) */
	.pd-fallback table.wc-block-cart-items .wc-block-cart-items__row { padding-top: 10px; padding-bottom: 10px; }
	/* La grille Woo (80px 132px 28px auto) fait 340px au minimum : elle
	   deborde de la carte sur les ecrans sous 375px et decale la page.
	   Colonnes retrecissables + stepper et badge compactes ci-dessous. */
	.pd-fallback table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 64px minmax(0, 1fr) 28px minmax(0, auto);
	}
	.pd-fallback .wc-block-cart-item__image { width: 64px; padding-right: 10px; }
	.pd-fallback .wc-block-cart-item__image img { border-radius: 10px; }
	.pd-fallback .wc-block-components-product-name { font-size: 13.5px; line-height: 1.3; display: block; }
	.pd-fallback .wc-block-cart-item__prices { font-size: 12px; }
	.pd-fallback .wc-block-cart-item__prices del { font-size: 11px; }
	/* Offre + saveur : une seule ligne (les libellés « Offre: / Saveur: »
	   sont superflus, les valeurs parlent d'elles-mêmes). */
	.pd-fallback .wc-block-components-product-metadata { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 0; margin-top: 2px; }
	.pd-fallback .wc-block-components-product-metadata .wc-block-components-product-details { font-size: 11.5px; line-height: 1.25; margin: 0; padding: 0; }
	.pd-fallback .wc-block-components-product-details__name { display: none; }
	.pd-fallback table.wc-block-cart-items .wc-block-cart-item__quantity { margin-top: 6px; display: flex; align-items: center; gap: 8px; padding-right: 8px; }
	.pd-fallback .wc-block-components-quantity-selector { width: 98px; margin: 0; }
	.pd-fallback .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input { font-size: 13px; min-height: 36px; }
	.pd-fallback .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { font-size: 15px; min-height: 36px; }
	.pd-fallback .wc-block-cart-item__remove-link { margin: 0; }
	.pd-fallback .wc-block-cart-item__remove-link svg { width: 20px; height: 20px; }
	.pd-fallback .wc-block-cart-item__total .wc-block-components-product-price { font-size: 14px; font-weight: 800; }
	/* Le badge en nowrap imposait 100px a la colonne total : autoriser le
	   retour a la ligne pour que la colonne puisse retrecir. */
	.pd-fallback .wc-block-components-sale-badge { font-size: 10px; padding: 2px 8px; white-space: normal; text-align: right; line-height: 1.25; }

	/* Résumé panier : lignes resserrées, total bien visible */
	.pd-fallback .wc-block-cart__totals-title { font-size: 17px; }
	.pd-fallback .wc-block-components-totals-wrapper { padding-top: 10px; padding-bottom: 10px; }
	/* Les blocs remise/frais vides gardaient leur padding : gros trou dans le résumé */
	.pd-fallback .wc-block-components-totals-wrapper:empty { padding: 0; }
	.pd-fallback .wc-block-components-totals-item { font-size: 13px; }
	.pd-fallback .wc-block-components-totals-item__description { font-size: 11.5px; }
	.pd-fallback .wc-block-components-panel__button { font-size: 13px; }
	.pd-fallback .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 14px; }
	.pd-fallback .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 17px; font-weight: 900; }

	/* CTA panier collant : compact mais bien cliquable */
	.pd-fallback .wc-block-cart__submit-container { padding: 8px 0; }
	.pd-fallback .wc-block-cart__submit-button { padding: 13px 18px; font-size: 15px; }

	/* Cross-sell + bandeau confiance : utiles mais discrets */
	.pd-cross { padding: 14px 12px 16px; margin-top: 14px; }
	.pd-cross > h2 { font-size: 17px; margin-bottom: 10px; }
	.pd-cross-hint { font-size: 12px; }
	.pd-checkout-trust { gap: 8px; margin: 16px 0 4px; }
	.pd-checkout-trust li { padding: 9px 10px; font-size: 11.5px; gap: 8px; }
	.pd-checkout-trust .pd-chip { width: 30px; height: 30px; }

	/* --- Checkout : étapes compactes, champs resserrés --- */
	.pd-fallback .wc-block-checkout__sidebar { padding: 2px 12px 6px; margin-bottom: 10px; }
	.pd-fallback .wc-block-components-checkout-order-summary__title { padding: 12px 0; font-size: 15px; }
	.pd-fallback .wc-block-components-checkout-step { padding: 14px 12px; margin-bottom: 10px; }
	.pd-fallback .wc-block-components-title.wc-block-components-title { font-size: 15.5px; }
	.pd-fallback .wc-block-components-checkout-step__description { font-size: 12px; margin: 2px 0 8px; }
	.pd-fallback .wc-block-components-text-input,
	.pd-fallback .wc-block-components-combobox,
	.pd-fallback .wc-block-components-country-input,
	.pd-fallback .wc-block-components-state-input { margin-top: 10px; }
	.pd-fallback .wc-block-components-text-input input,
	.pd-fallback .wc-block-components-combobox .wc-block-components-combobox-control input { font-size: 14px; }
	.pd-fallback .wc-block-components-address-form__address_2-toggle { font-size: 12.5px; padding: 6px 0; }
	.pd-fallback .wc-block-components-checkbox { margin-top: 12px; }
	.pd-fallback .wc-block-components-checkbox__label { font-size: 13px; }
	.pd-fallback .wc-block-components-radio-control__option { padding: 12px 12px 12px 44px; font-size: 13.5px; }
	.pd-fallback .wc-block-components-radio-control__label,
	.pd-fallback .wc-block-components-radio-control__secondary-label { font-size: 13.5px; }
	.pd-fallback .wc-block-components-radio-control__description { font-size: 12px; }

	/* Bouton Commander : pleine largeur, bien visible */
	.pd-fallback .wc-block-checkout__actions_row { margin-top: 4px; }
	.pd-fallback .wc-block-components-checkout-place-order-button { width: 100%; padding: 14px 18px; font-size: 15.5px; }
	.pd-fallback .wc-block-checkout__terms { font-size: 11.5px; margin-top: 10px; }
}

/* ==========================================================================
   Add-on un clic (pod neutre) sur la fiche produit : rangée + interrupteur
   type iOS dans le form .pd-bundle, entre les tuiles et le CTA. L'etat coche
   est pose en JS via .is-on (syncTier), le switch suit :checked en pur CSS.
   ========================================================================== */
.pd-addon {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
/* Masquage dedie : pas .screen-reader-text seul, dont la variante :focus de
   certaines feuilles Woo/Gutenberg re-affiche l'input au focus (radio natif
   bleu apparu au clic sur une carte d'offre). Vaut pour la case du pod ET les
   radios du bundle. Le focus visible est delegue aux composants stylises. */
.pd-addon-input,
.pd-bundle .pd-bundle-radio {
	position: absolute !important;
	top: 50%; left: 0;
	width: 1px !important; height: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap;
	opacity: 0;
	margin: 0; padding: 0; border: 0;
}
.pd-addon:hover { border-color: var(--pink); }
.pd-addon.is-on {
	border-color: var(--pink);
	background: #FFFAFA;
	box-shadow: 0 4px 14px rgba(243, 80, 123, .12);
}
.pd-addon-img {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--pink-pale);
}
.pd-addon-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-addon-details { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-addon-name { font-weight: 800; font-size: 14px; color: var(--ink); line-height: 1.25; }
.pd-addon-meta { font-size: 12px; color: var(--muted); line-height: 1.35; }
.pd-addon-pricing { flex: 0 0 auto; font-weight: 800; font-size: 15px; color: var(--pink-hot-dark); white-space: nowrap; }
.pd-addon-pricing .woocommerce-Price-amount { font-weight: 800; }
.pd-addon-switch {
	flex: 0 0 auto;
	position: relative;
	width: 46px;
	height: 27px;
	border-radius: 999px;
	background: #D8D2DC;
	transition: background-color .18s ease;
}
.pd-addon-switch::after {
	content: "";
	position: absolute;
	top: 2.5px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .18s ease;
}
.pd-addon-input:checked ~ .pd-addon-switch { background: var(--pink-hot); background-image: var(--grad-hot); }
.pd-addon-input:checked ~ .pd-addon-switch::after { transform: translateX(18px); }
.pd-addon-input:focus-visible ~ .pd-addon-switch { outline: 2px solid var(--pink-hot); outline-offset: 2px; }
@media (max-width: 767.98px) {
	.pd-addon { padding: 10px 12px; gap: 10px; }
	.pd-addon-img { width: 42px; height: 42px; }
	.pd-addon-meta { font-size: 11px; }
}

/* ==========================================================================
   Palier quantite libre (carte Autre quantite) : stepper - / champ / +
   ========================================================================== */
.pd-free-stepper {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.pd-free-step {
	width: 34px;
	height: 34px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	color: var(--ink);
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.pd-free-step:hover { border-color: var(--pink); color: var(--pink-hot-dark); }
.pd-free-qty {
	width: 64px;
	height: 34px;
	padding: 0 6px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	text-align: center;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--ink);
	-moz-appearance: textfield;
	appearance: textfield;
}
.pd-free-qty::-webkit-outer-spin-button,
.pd-free-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-free-qty:focus-visible { outline: 2px solid var(--pink-hot); outline-offset: 1px; }
.pd-bundle-free-row { align-items: center; }

/* Bouton carte produit pendant l'ajout AJAX */
.pd-btn-add.is-loading { opacity: .6; pointer-events: none; }

/* Le visuel hero peut arriver dans un <picture> (variante mobile) : le rendre
   transparent pour la grille du carrousel, l'img reste l'element dimensionne. */
.pd-hero-carousel picture { display: contents; }

/* ==========================================================================
   Cross-sells natif du panier, deplace dans la sidebar sous Valider la
   commande (JS pd-cross-sells) : carte blanche compacte aux couleurs boutique
   ========================================================================== */
.pd-cross-sells {
	margin-top: 14px;
	padding: 16px 18px 18px;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}
.pd-cross-sells > h2 {
	margin: 0 0 4px !important;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--pink-hot-dark);
}
.pd-cross-sells .wc-block-product-template {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pd-cross-sells li.wc-block-product {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	column-gap: 12px;
	row-gap: 2px;
	align-items: center;
	margin: 0;
	padding: 10px 0 0;
}
.pd-cross-sells [data-block-name="woocommerce/product-image"] {
	grid-row: 1 / 3;
	grid-column: 1;
	width: 56px;
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--pink-pale);
}
.pd-cross-sells [data-block-name="woocommerce/product-image"] img { display: block; width: 100%; height: auto; }
.pd-cross-sells .wp-block-post-title {
	grid-column: 2;
	grid-row: 1;
	margin: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.3;
	text-align: left !important;
}
.pd-cross-sells .wp-block-post-title a { color: var(--ink); font-weight: 800; text-decoration: none; }
.pd-cross-sells .wp-block-post-title a:hover { color: var(--pink-hot-dark); }
.pd-cross-sells [data-block-name="woocommerce/product-price"] {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	text-align: left !important;
	font-size: 13px !important;
	font-weight: 800;
	color: var(--pink-hot-dark);
}
.pd-cross-sells [data-block-name="woocommerce/product-button"] {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: 8px 0 0;
}
.pd-cross-sells .wc-block-components-product-button__button {
	display: block;
	width: 100%;
	padding: 11px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--grad-pink);
	background-origin: border-box;
	background-clip: border-box;
	color: #fff;
	font-family: var(--font-sans);
	font-size: 13.5px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(243, 80, 123, 0.28);
	transition: transform .12s ease, box-shadow .12s ease;
}
.pd-cross-sells .wc-block-components-product-button__button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(243, 80, 123, 0.34);
}
/* Confirmation apres l'ajout via la pop-up saveur (main.js pdPickAdd). */
.pd-cross-sells .wc-block-components-product-button__button.is-added {
	background: #16A34A;
	box-shadow: 0 6px 16px rgba(22, 163, 74, 0.28);
}
/* Deja sur la page panier : le lien « Voir le panier » injecte apres l'ajout
   est un non-sens ici, et les notices du bloc doublonnent celles du panier. */
.pd-cross-sells .added_to_cart,
.pd-cross-sells .wc-block-components-notices { display: none !important; }


/* ==========================================================================
   Volet de choix de saveur (mobile) - remplace le menu natif iOS
   ========================================================================== */
@media (max-width: 767px) {
	.pd-bundle-selector-row { cursor: pointer; }
	/* Le tap atterrit sur la rangee (le JS ouvre le volet), jamais sur le select natif. */
	.pd-bundle-selector-row .pd-bundle-select { pointer-events: none; }
}
.pd-flavor-sheet { position: fixed; inset: 0; bottom: var(--pd-vv-gap, 0px); z-index: 1200; }
.pd-flavor-sheet[hidden] { display: none; }
.pd-flavor-sheet-backdrop { position: absolute; inset: 0; background: rgba(30, 20, 30, 0.55); }
.pd-flavor-sheet-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--surface);
	border-radius: 22px 22px 0 0;
	max-height: 76vh;
	display: flex;
	flex-direction: column;
	padding-bottom: var(--pd-safe-b, 0px);
	box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
	animation: pdSheetUp 0.22s ease;
}
@keyframes pdSheetUp {
	from { transform: translateY(24px); opacity: 0.6; }
	to { transform: none; opacity: 1; }
}
.pd-flavor-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px 10px;
}
.pd-flavor-sheet-head strong { font-family: var(--font-serif); font-size: 19px; }
.pd-flavor-sheet-close {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 0;
	background: var(--pink-pale);
	color: var(--ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.pd-flavor-sheet-list {
	list-style: none;
	margin: 0;
	padding: 2px 10px 14px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.pd-flavor-sheet-list li + li { border-top: 1px solid var(--line); }
.pd-flavor-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 10px;
	border: 0;
	background: none;
	border-radius: 14px;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.pd-flavor-row img {
	width: 46px;
	height: 46px;
	object-fit: contain;
	border-radius: 10px;
	background: var(--bg-cream);
	flex: none;
}
.pd-flavor-row-name { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; }
.pd-flavor-row-stock {
	flex: none;
	font-size: 11.5px;
	font-weight: 800;
	color: #8A5A00;
	background: #FFF1D6;
	border-radius: 999px;
	padding: 4px 9px;
}
/* Saveur epuisee : rangee estompee, non cliquable, pastille grise. */
.pd-flavor-row.is-out { opacity: 0.55; cursor: default; }
.pd-flavor-row-stock.is-out { color: var(--muted); background: var(--line); }
.pd-flavor-row-check {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--line);
	position: relative;
}
.pd-flavor-row.is-selected { background: var(--pink-pale); }
.pd-flavor-row.is-selected .pd-flavor-row-check { border-color: transparent; background: var(--grad-hot); }
.pd-flavor-row.is-selected .pd-flavor-row-check::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	/* -60% vertical : le centre optique d'une coche est sous son centre geometrique. */
	transform: translate(-50%, -60%) rotate(45deg);
}
html.pd-sheet-open,
html.pd-sheet-open body { overflow: hidden; }

/* Pop-up saveur du panier (cross-sells) : meme volet, mais centre en modale
   sur desktop. Sur mobile il garde le comportement bottom-sheet. */
.pd-pick-error {
	margin: 0 18px 6px;
	font-size: 13px;
	font-weight: 700;
	color: #B3261E;
}
@media (min-width: 768px) {
	.pd-flavor-sheet--center .pd-flavor-sheet-panel {
		left: 50%;
		right: auto;
		top: 50%;
		bottom: auto;
		transform: translate(-50%, -50%);
		width: min(430px, calc(100vw - 32px));
		border-radius: 22px;
		max-height: 72vh;
		box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
		animation: pdSheetPop 0.18s ease;
	}
	@keyframes pdSheetPop {
		from { transform: translate(-50%, -50%) scale(0.96); opacity: 0.5; }
		to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	}
}

/* ==========================================================================
   Favoris : coeur d'en-tete (desktop) + toast de confirmation
   ========================================================================== */
.pd-header-heart { position: relative; }
.pd-heart-bubble {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--grad-hot);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
}
.pd-heart-bubble[hidden] { display: none; }
/* Mobile : l'entree du menu et le toast prennent le relais, l'en-tete est deja dense. */
@media (max-width: 767px) { .pd-header-heart { display: none; } }
.pd-toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + var(--pd-vv-gap, 0px));
	transform: translate(-50%, 16px);
	background: var(--ink);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 18px;
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 1300;
	max-width: calc(100vw - 32px);
	text-align: center;
}
.pd-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pd-toast a { color: var(--rose-1); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 767px) { .pd-toast { bottom: calc(74px + var(--pd-safe-b, 0px) + var(--pd-vv-gap, 0px)); } }

/* ==========================================================================
   Cadeaux fidélité : encart « Choisissez votre cadeau » (Mes points)
   ========================================================================== */
.pd-gifts-sub { color: var(--muted); font-size: 14px; margin: -6px 0 14px; }
.pd-gifts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
	margin-bottom: 26px;
}
.pd-gift-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: var(--surface);
	border: 1.5px solid var(--pink-soft);
	border-radius: var(--radius-md);
	padding: 30px 14px 14px;
	text-align: center;
	box-shadow: var(--shadow-soft);
}
.pd-gift-card.is-locked { opacity: 0.72; }
.pd-gift-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--grad-hot);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 4px 9px;
}
.pd-gift-img img {
	width: 96px;
	height: 96px;
	object-fit: contain;
	border-radius: 12px;
	background: var(--bg-cream);
}
.pd-gift-card strong { font-size: 14.5px; line-height: 1.25; }
.pd-gift-flavor {
	width: 100%;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	padding: 8px 10px;
	font: inherit;
	font-size: 13px;
	background: var(--surface);
}
.pd-gift-card .pd-btn { width: 100%; }

/* ==========================================================================
   Checkout premium : étapes en cartes numérotées + révélation progressive
   ========================================================================== */
.pd-fallback .wc-block-checkout__form {
	counter-reset: pd-step;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pd-fallback .wc-block-checkout__form > fieldset#contact-fields,
.pd-fallback .wc-block-checkout__form > fieldset#shipping-fields,
.pd-fallback .wc-block-checkout__form > fieldset#shipping-option,
.pd-fallback .wc-block-checkout__form > fieldset#payment-method {
	counter-increment: pd-step;
	background: var(--surface);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-md);
	padding: 20px 22px 22px;
	margin: 0;
	box-shadow: var(--shadow-soft);
	transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.pd-fallback .wc-block-components-checkout-step__title {
	position: relative;
	padding-left: 46px;
	font-family: var(--font-serif);
	font-size: 19px;
	line-height: 34px;
	min-height: 34px;
}
.pd-fallback .wc-block-components-checkout-step__title::before {
	content: counter(pd-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--grad-hot);
	color: #fff;
	font-family: var(--font-sans, inherit);
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(229, 17, 122, 0.28);
}
/* Étape complétée : le numéro devient une coche verte. */
.pd-fallback fieldset.pd-step-done .wc-block-components-checkout-step__title::before {
	content: "✓";
	background: var(--green);
	box-shadow: 0 4px 12px rgba(47, 164, 106, 0.3);
}
/* Étapes suivantes : repliées sur leur titre tant que la précédente n'est
   pas remplie (pastille « À suivre », pas de grisé façon désactivé).
   JAMAIS bloquant : un clic les déplie, et le JS déplie tout à la soumission. */
.pd-fallback fieldset.pd-step-waiting > :not(.wc-block-components-checkout-step__heading-container):not(legend) {
	display: none;
}
.pd-fallback fieldset.pd-step-waiting {
	cursor: pointer;
	padding-bottom: 18px;
}
/* Etape repliee : le titre seul, sans les marges du mode deplie qui
   laissaient un grand vide sous la ligne (vu a l'audit WebKit). */
.pd-fallback fieldset.pd-step-waiting .wc-block-components-checkout-step__heading-container,
.pd-fallback fieldset.pd-step-waiting .wc-block-components-checkout-step__heading { margin: 0; }
.pd-fallback fieldset.pd-step-waiting .wc-block-components-checkout-step__description { display: none; }
.pd-fallback fieldset.pd-step-waiting .wc-block-components-checkout-step__title {
	color: var(--muted);
	margin-bottom: 0;
}
.pd-fallback fieldset.pd-step-waiting .wc-block-components-checkout-step__title::before {
	background: var(--pink-soft);
	color: var(--pink-hot-dark);
	box-shadow: none;
}
.pd-fallback fieldset.pd-step-waiting .wc-block-components-checkout-step__heading::after {
	content: "À suivre";
	margin-left: auto;
	background: var(--bg-cream);
	color: var(--muted);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 5px 11px;
	white-space: nowrap;
}
.pd-fallback fieldset.pd-step-waiting .wc-block-components-checkout-step__heading {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* Notes de commande et CGV : discrets, hors cartes. */
.pd-fallback #order-notes { margin: 2px 0 0; }
.pd-fallback .wc-block-checkout__terms {
	font-size: 12.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 4px;
}
/* Badge de réassurance paiement sous le bouton Commander. */
.pd-checkout-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	flex-wrap: wrap;
	margin: 14px 0 2px;
	padding: 12px 16px;
	background: var(--green-soft);
	border: 1px solid rgba(47, 164, 106, 0.28);
	border-radius: 12px;
	color: #1E6B45;
	font-size: 13.5px;
	font-weight: 800;
	text-align: center;
}
.pd-checkout-secure svg { flex: none; }
.pd-checkout-secure .pd-sep { opacity: 0.45; font-weight: 400; }
/* Code promo : présent mais discret (l'accordéon natif du résumé). */
.pd-fallback .wc-block-components-totals-coupon,
.pd-fallback .wc-block-components-panel__button {
	font-size: 13.5px;
}
.pd-fallback .wc-block-components-panel__button { color: var(--muted); font-weight: 700; }
.pd-fallback .wc-block-components-panel__button:hover { color: var(--pink-hot-dark); }
/* Résumé : carte cohérente avec les étapes. */
.pd-fallback .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--surface);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	box-shadow: var(--shadow-soft);
}
@media (max-width: 767px) {
	.pd-fallback .wc-block-checkout__form > fieldset#contact-fields,
	.pd-fallback .wc-block-checkout__form > fieldset#shipping-fields,
	.pd-fallback .wc-block-checkout__form > fieldset#shipping-option,
	.pd-fallback .wc-block-checkout__form > fieldset#payment-method { padding: 16px 14px 18px; }
	.pd-fallback .wc-block-components-checkout-step__title { font-size: 17px; padding-left: 40px; line-height: 30px; min-height: 30px; }
	.pd-fallback .wc-block-components-checkout-step__title::before { width: 30px; height: 30px; font-size: 13.5px; }
	.pd-fallback .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { padding: 14px 14px; }
}
/* Woo duplique le resume de commande dans la zone du bouton Commander sur
   mobile : un seul resume suffit (l'accordeon en haut de page). */
.pd-fallback .wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block { display: none; }
/* ----- Lissage : une seule surface par bloc, pas de cartes dans la carte ----- */
/* La page checkout n'est plus une grande carte blanche : les etapes et le
   resume flottent directement sur le fond creme. */
/* Regle Baptiste 26/08 : JAMAIS plus de 2 conteneurs superposes. Le panier
   suit le checkout : l'article n'est plus une grande carte, chaque colonne
   porte sa propre carte et c'est tout. */
.pd-fallback article:has(.wc-block-checkout),
.pd-fallback article:has(.wc-block-cart) {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}
.pd-fallback article:has(.wc-block-checkout) > h1,
.pd-fallback article:has(.wc-block-cart) > h1 { margin: 4px 0 18px; }
/* La colonne des articles du panier devient sa propre carte (l'article
   transparent ne l'habille plus). */
.woocommerce-cart .wc-block-cart__main.wc-block-components-main {
	background: var(--surface);
	border-radius: var(--radius-md);
	padding: 16px 14px;
}
/* Le bloc « Vous serez peut-etre interesse par » (product-collection) ne
   vit que dans la colonne du resume, ou il est habille. Avant l'hydratation
   React il apparait brut dans la colonne des articles (gros visuel, bouton
   noir, vu sur iPhone) : masque partout ailleurs. */
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection { display: none; }
.wc-block-cart__sidebar .wp-block-woocommerce-product-collection { display: block; }
@media (min-width: 1025px) {
	/* La carte de la colonne articles remplace l'ancien padding de
	   l'article : gouttiere via margin, plus de padding-right herite.
	   align-self : la carte epouse son contenu au lieu de s'etirer sur
	   toute la hauteur de la colonne du resume. */
	.woocommerce-cart .wc-block-cart__main.wc-block-components-main { padding: 22px 24px; margin-right: 28px; align-self: flex-start; }
}
/* Resume mobile : NOTRE carte est le seul cadre, l'accordeon natif devient nu. */
@media (max-width: 767px) {
	.pd-fallback .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { padding: 6px 16px; }
	.pd-fallback .wc-block-components-checkout-order-summary__title {
		border: 0;
		padding: 12px 0;
	}
	.pd-fallback .wc-block-components-checkout-order-summary__content { border: 0; padding: 0 0 12px; }
}
/* Secours sans :has() (vieux navigateurs) : meme lissage via la classe body. */
.woocommerce-checkout .pd-fallback article,
.woocommerce-cart .pd-fallback article {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}
.woocommerce-checkout .pd-fallback article > h1,
.woocommerce-cart .pd-fallback article > h1 { margin: 4px 0 18px; }
/* Une seule carte pour le resume : la colonne laterale du checkout n'a plus
   son propre habillage (l'ancien skin de juillet + la carte du resume
   faisaient deux boites imbriquees). Sticky et largeur conserves. */
.pd-fallback .wc-block-checkout__sidebar.wc-block-checkout__sidebar {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* Les rideaux anti-trou de 80px qui vivaient ici ont fusionne avec les
   regles ::after de .pd-bottomnav et .pd-buybar (200px), plus haut dans le
   fichier : une seule source, sinon ce bloc tardif ecrasait la hauteur. */
/* ==========================================================================
   Sliders tactiles : pas de loupe de selection pendant le defilement
   (26/08/2026). Sur iOS, le doigt qui glisse sur un carrousel demarrait
   une selection de texte avec son effet de zoom au lieu de defiler.
   Ecrans tactiles uniquement : la selection reste possible a la souris.
   ========================================================================== */
@media (pointer: coarse) {
	.pd-products,
	.pd-univers-grid,
	.pd-reviews-list,
	.pd-flavors,
	.pd-cat-chips {
		-webkit-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;
	}
	.pd-products img,
	.pd-univers-grid img,
	.pd-flavors img {
		-webkit-user-drag: none;
	}
}

/* ===== Credit agence + lien badges paiement (footer) ===== */
.pd-footer-bottom .pd-credit {
  color: inherit;
  opacity: .5;
  font-size: .86em;
  text-decoration: none;
  transition: opacity .15s ease;
}
.pd-footer-bottom .pd-credit:hover,
.pd-footer-bottom .pd-credit:focus-visible {
  opacity: .95;
  text-decoration: underline;
}
.pd-payments-link {
  display: inline-flex;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
}
.pd-payments-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ==========================================================================
   Quiz « Le dragon trouve votre puff » (accueil)
   ========================================================================== */
.pd-quiz { padding: 34px 0 10px; }
.pd-quiz-card {
	background: var(--surface);
	border: 2px solid var(--pink-soft);
	border-radius: 24px;
	box-shadow: 0 14px 34px rgba(222, 54, 99, 0.10);
	padding: 26px 20px;
	position: relative;
	overflow: hidden;
}
.pd-quiz-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--grad-band);
}
.pd-quiz-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
/* Piège connu : les styles auteur display écrasent [hidden] (UA). */
.pd-quiz-intro[hidden], .pd-quiz-steps[hidden], .pd-quiz-result[hidden], .pd-cookies[hidden], .pd-cookies-modal[hidden], .pd-cookies-overlay[hidden] { display: none; }
.pd-quiz-mascot { width: 140px; height: 140px; object-fit: contain; }
.pd-quiz-intro-text h2 { margin: 0 0 8px; }
.pd-quiz-intro-text > p { margin: 0 0 16px; color: var(--muted); max-width: 46ch; margin-inline: auto; }
.pd-quiz-legal { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); }
.pd-quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pd-quiz-back {
	display: inline-flex; align-items: center; gap: 4px;
	background: none; border: 0; padding: 6px 8px; margin-left: -8px;
	font: inherit; font-weight: 700; color: var(--pink-hot-dark); cursor: pointer; border-radius: 10px;
}
.pd-quiz-back:hover { background: var(--pink-pale); }
.pd-quiz-stepnum { font-size: 13px; font-weight: 700; color: var(--muted); }
.pd-quiz-progress {
	height: 8px; border-radius: 999px; background: var(--pink-pale); overflow: hidden; margin-bottom: 18px;
}
.pd-quiz-progress span {
	display: block; height: 100%; width: 8%; border-radius: 999px;
	background: linear-gradient(90deg, var(--yellow) 0%, var(--yellow-dark) 100%);
	transition: width 0.35s ease;
}
.pd-quiz-question { margin: 0 0 16px; font-family: var(--font-serif, "Baloo 2", sans-serif); font-size: 21px; }
.pd-quiz-answers { display: grid; gap: 10px; }
.pd-quiz-answer {
	display: block; width: 100%; text-align: left; cursor: pointer;
	background: var(--bg); border: 2px solid var(--pink-soft); border-radius: 16px;
	padding: 14px 16px; font: inherit; font-size: 15.5px; font-weight: 700; color: inherit;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.pd-quiz-answer:hover, .pd-quiz-answer:focus-visible {
	border-color: var(--pink-hot); background: var(--pink-pale); transform: translateY(-1px);
}
.pd-quiz-result-title { margin: 0 0 18px; font-family: var(--font-serif, "Baloo 2", sans-serif); font-size: 22px; }
.pd-quiz-match { display: flex; flex-direction: column; gap: 16px; }
.pd-quiz-match-img {
	background: var(--bg-cream); border-radius: 18px; padding: 10px; align-self: center;
}
.pd-quiz-match-img img { display: block; width: 200px; max-width: 100%; height: auto; }
.pd-quiz-match-name { margin: 0; font-family: var(--font-serif, "Baloo 2", sans-serif); font-size: 20px; font-weight: 800; }
.pd-quiz-match-price { margin: 2px 0 8px; font-size: 18px; font-weight: 800; color: var(--pink-hot-dark); }
.pd-quiz-match-flavor { margin: 0 0 8px; }
.pd-quiz-match-reasons { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.pd-quiz-match-reasons li { position: relative; padding-left: 22px; font-size: 14.5px; }
.pd-quiz-match-reasons li::before {
	content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--yellow-dark);
}
.pd-quiz-match-box, .pd-quiz-match-note { margin: 0 0 8px; font-size: 13.5px; color: var(--muted); }
.pd-quiz-match-ship { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 13.5px; font-weight: 700; color: #1B7A43; }
.pd-quiz-dot { width: 8px; height: 8px; border-radius: 50%; background: #2FA96A; flex: none; }
.pd-quiz-cta { width: 100%; justify-content: center; }
.pd-quiz-alt {
	display: flex; align-items: center; gap: 12px; margin-top: 18px;
	background: var(--bg); border: 1.5px solid var(--pink-soft); border-radius: 14px; padding: 10px 14px;
}
.pd-quiz-alt img { border-radius: 10px; flex: none; }
.pd-quiz-alt p { margin: 0; font-size: 14px; }
.pd-quiz-alt a { font-weight: 800; color: var(--pink-hot-dark); }
.pd-quiz-restart { margin-top: 16px; }
@media (min-width: 768px) {
	.pd-quiz-card { padding: 34px 38px; }
	.pd-quiz-intro { flex-direction: row; text-align: left; }
	.pd-quiz-intro-text > p { margin-inline: 0; }
	.pd-quiz-mascot { width: 180px; height: 180px; }
	.pd-quiz-answers { grid-template-columns: 1fr 1fr; }
	.pd-quiz-match { flex-direction: row; align-items: flex-start; }
	.pd-quiz-match-img { flex: none; }
	.pd-quiz-match-img img { width: 240px; }
	.pd-quiz-cta { width: auto; }
}

/* ==========================================================================
   Bandeau cookies + panneau « Gérer mes cookies »
   ========================================================================== */
.pd-cookies {
	position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--pd-safe-b));
	z-index: 140;
	background: var(--surface); border: 2px solid var(--pink-soft); border-radius: 18px;
	box-shadow: 0 16px 40px rgba(43, 21, 33, 0.18);
	padding: 14px 16px;
}
/* Mobile : mascotte et texte sur une ligne, les trois boutons alignés juste
   en dessous sur trois colonnes égales, même largeur et même hauteur. Le
   bouton Personnaliser ne part plus seul à la ligne, et Refuser reste aussi
   accessible qu'Accepter (exigence CNIL). */
.pd-cookies-in {
	display: grid; grid-template-columns: auto 1fr;
	grid-template-areas: "mascotte texte" "boutons boutons";
	align-items: center; gap: 10px 12px; max-width: 1080px; margin: 0 auto;
}
.pd-cookies-mascot { grid-area: mascotte; width: 58px; height: 58px; object-fit: contain; }
.pd-cookies-text { grid-area: texte; margin: 0; font-size: 13.5px; line-height: 1.5; }
.pd-cookies-text a { color: var(--pink-hot-dark); }
.pd-cookies-btns { grid-area: boutons; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pd-cookies-btns .pd-btn { width: 100%; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 12.5px; }
.pd-cookies-overlay {
	position: fixed; inset: 0; z-index: 149; background: rgba(43, 21, 33, 0.45);
}
.pd-cookies-modal {
	position: fixed; z-index: 150; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: min(520px, calc(100vw - 24px));
	background: var(--surface); border-radius: 20px; padding: 20px;
	box-shadow: 0 24px 60px rgba(43, 21, 33, 0.3);
	max-height: min(86vh, 640px); overflow: auto;
}
.pd-cookies-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pd-cookies-modal-head p { margin: 0; font-family: var(--font-serif, "Baloo 2", sans-serif); font-size: 19px; font-weight: 800; }
.pd-cookies-cat {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
	border: 1.5px solid var(--pink-soft); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.pd-cookies-cat-text strong { display: block; margin-bottom: 4px; }
.pd-cookies-cat-text p { margin: 0; font-size: 13px; color: var(--muted); }
.pd-cookies-locked { flex: none; font-size: 12px; font-weight: 800; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 5px 10px; }
.pd-cookies-switch { position: relative; flex: none; display: inline-block; }
.pd-cookies-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pd-cookies-switch > span[aria-hidden] {
	display: block; width: 44px; height: 26px; border-radius: 999px;
	background: #D8CFD6; transition: background 0.15s ease; position: relative; pointer-events: none;
}
.pd-cookies-switch > span[aria-hidden]::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
	border-radius: 50%; background: #fff; transition: transform 0.15s ease;
}
.pd-cookies-switch input:checked + span[aria-hidden] { background: var(--pink-hot); }
.pd-cookies-switch input:checked + span[aria-hidden]::after { transform: translateX(18px); }
.pd-cookies-modal-btns { display: flex; justify-content: flex-end; margin-top: 6px; }
@media (min-width: 768px) {
	.pd-cookies-in {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "mascotte texte boutons";
		gap: 14px 18px;
	}
	.pd-cookies-mascot { width: 76px; height: 76px; }
	.pd-cookies-btns { grid-template-columns: repeat(3, auto); }
	.pd-cookies-btns .pd-btn { padding-left: 18px; padding-right: 18px; font-size: 14px; }
}

/* ==========================================================================
   Rétractation (page Retours) + guide de démarrage PDP + expiration points
   ========================================================================== */
.pd-retract {
	background: var(--surface); border: 2px solid var(--pink-soft); border-radius: 20px;
	padding: 22px 18px; margin: 26px 0;
}
.pd-retract-title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: var(--font-serif, "Baloo 2", sans-serif); font-size: 20px; }
.pd-retract-sub { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
@media (min-width: 768px) { .pd-retract { padding: 28px 30px; } }

.pd-pdp-start {
	margin-top: 16px; background: var(--bg-cream); border-radius: 16px; padding: 14px 16px;
}
.pd-pdp-start-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 800; font-size: 14.5px; }
.pd-pdp-start-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; }
.pd-pdp-start-steps li { line-height: 1.45; }

.pd-points-expiry { display: block; margin-top: 4px; font-size: 12px; opacity: 0.85; }
.pd-fid-expiry-note {
	margin: 18px auto 0; max-width: 70ch; text-align: center; font-size: 13.5px; color: var(--muted);
}

/* ==========================================================================
   Boutons sans halo coloré (demande Baptiste 01/09/2026) : les ombres roses
   diffuses lisaient comme une « aura » floue autour des CTA. Remplacées par
   une ombre neutre courte et discrète, le relief vient du dégradé lui-même.
   ========================================================================== */
.pd-btn-pink,
.pd-btn-yellow,
.pd-btn-hero,
.pd-bundle-submit,
.pd-pdp-hero .woocommerce-error a.button,
.pd-fallback button.button,
.pd-fallback .wc-block-components-checkout-place-order-button,
button[class*="wms_pickup_open_modal"],
.pd-fallback .wc-block-grid__product .add_to_cart_button,
.pd-cart-upsell-btn,
.pd-cross-sells .wc-block-components-product-button__button,
.pd-auth-tab.is-active,
.pd-cat-chip.is-active,
.woocommerce-account .pd-fallback .woocommerce-MyAccount-navigation li.is-active a,
.pd-arrow {
	box-shadow: 0 2px 6px rgba(52, 49, 53, 0.12);
}
.pd-btn-pink:hover,
.pd-btn-hero:hover,
.pd-bundle-submit:hover,
.pd-cart-upsell-btn:hover,
.pd-cross-sells .wc-block-components-product-button__button:hover,
.pd-arrow:hover {
	box-shadow: 0 3px 8px rgba(52, 49, 53, 0.16);
}
.pd-cross-sells .wc-block-components-product-button__button.is-added {
	box-shadow: 0 2px 6px rgba(52, 49, 53, 0.12);
}

/* Bandeau cookies mobile : au-dessus de la barre de navigation basse (z 100),
   jamais par-dessus. Consomme --pd-vv-gap comme tout élément fixed ancré en
   bas (invariant Chrome iOS). */
.pd-cookies {
	bottom: calc(var(--pd-vv-gap, 0px) + var(--pd-safe-b, 0px) + 72px);
}
@media (min-width: 768px) {
	.pd-cookies { bottom: calc(var(--pd-vv-gap, 0px) + 12px); }
}