/* ============================================================
   Bonferrage — styles thème enfant
   ============================================================ */

:root {
	/* Couleurs */
	--bf-primary:        #0a5f4a;
	--bf-primary-dark:   #083d30;
	--bf-primary-tint:   #e6f2ec;
	--bf-accent:         #f5a623;
	--bf-accent-dark:    #d88b0f;
	--bf-dark:           #1a1a1a;
	--bf-muted:          #6b7280;
	--bf-sand:           #f5f0e6;
	--bf-cream:          #faf7f0;
	--bf-bg-soft:        #f5f0e6;
	--bf-border:         #e5ded0;
	--bf-border-strong:  #cfc7b5;
	--bf-danger:         #b91c1c;
	/* Espacements — échelle 4pt */
	--bf-sp-1: 4px;
	--bf-sp-2: 8px;
	--bf-sp-3: 12px;
	--bf-sp-4: 16px;
	--bf-sp-5: 24px;
	--bf-sp-6: 32px;
	--bf-sp-8: 48px;
	--bf-sp-10: 64px;
	--bf-sp-12: 96px;
	/* Rayons */
	--bf-radius:    10px;
	--bf-radius-sm:  6px;
	--bf-radius-lg: 16px;
	--bf-radius-pill: 999px;
	/* Ombres */
	--bf-shadow-sm: 0 1px 2px rgba(10, 20, 15, 0.05);
	--bf-shadow-md: 0 4px 12px rgba(10, 20, 15, 0.08);
	--bf-shadow-lg: 0 12px 32px rgba(10, 20, 15, 0.12);
	/* Container */
	--bf-container: 1180px;
	/* Nav */
	--bf-header-h: 68px;
	--bf-topbar-h: 34px;
	/* Transitions */
	--bf-t-fast:  0.12s ease;
	--bf-t:       0.2s ease;
	--bf-t-slow:  0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------ Base ------------------ */
body {
	background: #fff;
	color: var(--bf-dark);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-feature-settings: 'ss01';
}
h1, h2, h3, h4 {
	font-family: inherit;
	letter-spacing: -0.015em;
	color: var(--bf-dark);
}
h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

/* Bouton générique réutilisable partout */
.bf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bf-sp-2);
	padding: 12px 22px;
	border-radius: var(--bf-radius);
	border: 1px solid transparent;
	background: var(--bf-primary);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--bf-t), transform var(--bf-t-fast), box-shadow var(--bf-t);
	line-height: 1;
	font-family: inherit;
}
.bf-btn:hover { background: var(--bf-primary-dark); color: #fff; }
.bf-btn:active { transform: translateY(1px); }
.bf-btn-accent { background: var(--bf-accent); color: var(--bf-dark); }
.bf-btn-accent:hover { background: var(--bf-accent-dark); color: var(--bf-dark); }
.bf-btn-ghost {
	background: transparent;
	color: var(--bf-primary);
	border-color: var(--bf-border-strong);
}
.bf-btn-ghost:hover { background: var(--bf-sand); color: var(--bf-primary-dark); }
.bf-btn-lg { padding: 16px 28px; font-size: 1rem; }

/* ============================================================
   HEADER — Topbar + main nav
   ============================================================ */
.bf-topbar {
	background: var(--bf-primary-dark);
	color: #fff;
	font-size: 0.85rem;
	height: var(--bf-topbar-h);
	display: flex;
	align-items: center;
}
.bf-topbar-inner {
	max-width: var(--bf-container);
	margin: 0 auto;
	padding: 0 var(--bf-sp-4);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--bf-sp-4);
	width: 100%;
}
.bf-topbar-items {
	display: flex;
	gap: var(--bf-sp-5);
	align-items: center;
	flex-wrap: wrap;
}
.bf-topbar-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	white-space: nowrap;
}
.bf-topbar-item:hover { color: #fff; text-decoration: none; }
.bf-topbar-item svg { width: 14px; height: 14px; opacity: 0.75; }
.bf-topbar strong { color: var(--bf-accent); font-weight: 600; }

.bf-header {
	background: #fff;
	border-bottom: 1px solid var(--bf-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
.bf-header-inner {
	max-width: var(--bf-container);
	margin: 0 auto;
	padding: 10px var(--bf-sp-4);
	min-height: var(--bf-header-h);
	display: flex;
	align-items: center;
	gap: var(--bf-sp-3);
	flex-wrap: nowrap;
}
.bf-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--bf-primary);
	text-decoration: none;
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: -0.02em;
	white-space: nowrap;
	flex-shrink: 0;
}
.bf-logo:hover { color: var(--bf-primary-dark); text-decoration: none; }
.bf-logo-mark {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bf-logo-mark img,
.bf-logo-mark svg { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Nav principale */
.bf-nav {
	display: flex;
	gap: var(--bf-sp-2);
	align-items: center;
	flex-shrink: 0;
}
.bf-nav-link {
	color: var(--bf-dark);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 10px 14px;
	border-radius: var(--bf-radius-sm);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	transition: background var(--bf-t-fast), color var(--bf-t-fast);
}
.bf-nav-link:hover { background: var(--bf-sand); color: var(--bf-primary); text-decoration: none; }
.bf-nav-link.bf-nav-cta { color: var(--bf-accent-dark); }
.bf-nav-caret {
	transition: transform var(--bf-t);
}
.bf-nav-item[aria-expanded="true"] .bf-nav-caret { transform: rotate(180deg); }

/* Recherche header */
.bf-search {
	position: relative;
	flex: 1 1 240px;
	min-width: 0;
	max-width: 420px;
	display: flex;
	align-items: center;
}
.bf-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bf-muted);
	pointer-events: none;
	display: flex;
}
.bf-search input[type="search"] {
	width: 100%;
	height: 42px;
	padding: 0 40px 0 40px;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	background: #fff;
	font-size: 0.95rem;
	color: var(--bf-dark);
	font-family: inherit;
	transition: border-color var(--bf-t-fast), background var(--bf-t-fast), box-shadow var(--bf-t-fast);
	appearance: none;
	-webkit-appearance: none;
}
.bf-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.bf-search input[type="search"]::placeholder { color: var(--bf-muted); }
.bf-search input[type="search"]:focus {
	outline: none;
	background: #fff;
	border-color: var(--bf-primary);
	box-shadow: 0 0 0 3px rgba(10, 95, 74, 0.12);
}
/* Par défaut caché ; la classe .is-visible ajoutée par le JS le montre uniquement quand
   l'input contient du texte. On ne compte pas sur l'attribut [hidden] car des styles parent
   peuvent l'écraser via specificity. */
.bf-search-clear {
	display: none;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: var(--bf-muted);
	width: 28px;
	height: 28px;
	border-radius: var(--bf-radius-sm);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	padding: 0;
	font-family: inherit;
}
.bf-search-clear.is-visible { display: inline-flex; }
.bf-search-clear:hover { background: rgba(0,0,0,0.06); color: var(--bf-dark); }

.bf-search-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	box-shadow: var(--bf-shadow-lg);
	max-height: min(70vh, 500px);
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 110;
	padding: 0;
	box-sizing: border-box;
}
.bf-search-item, .bf-search-more, .bf-search-empty { box-sizing: border-box; max-width: 100%; }
.bf-search-item {
	display: flex;
	align-items: center;
	gap: var(--bf-sp-3);
	padding: 10px 14px;
	text-decoration: none;
	color: var(--bf-dark);
	transition: background var(--bf-t-fast);
	cursor: pointer;
}
.bf-search-item:hover,
.bf-search-item.is-active {
	background: var(--bf-cream);
	text-decoration: none;
}
.bf-search-item img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: var(--bf-radius-sm);
	background: var(--bf-cream);
	flex-shrink: 0;
}
.bf-search-item-body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
}
.bf-search-item-cat {
	font-size: 0.7rem;
	color: var(--bf-primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bf-search-item-title {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--bf-dark);
	line-height: 1.3;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bf-search-item-title mark { background: rgba(245, 166, 35, 0.35); color: inherit; padding: 0 1px; border-radius: 2px; }
.bf-search-item-price {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--bf-primary);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.bf-search-more {
	display: block;
	padding: 12px 14px;
	border-top: 1px solid var(--bf-border);
	background: var(--bf-sand);
	color: var(--bf-primary);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.88rem;
	text-align: center;
}
.bf-search-more:hover,
.bf-search-more.is-active {
	background: var(--bf-primary-tint);
	text-decoration: none;
}
.bf-search-empty {
	padding: 20px 16px;
	text-align: center;
	color: var(--bf-muted);
	font-size: 0.92rem;
}

/* La search reste TOUJOURS sur la première ligne : elle rétrécit avec la largeur d'écran.
   Sous ~1024px on lui donne plus de flexibilité de shrink. Sous 600px on cache le texte
   "Bonferrage" à côté du logo pour gagner la place nécessaire. */
@media (max-width: 1024px) {
	.bf-search { max-width: 320px; }
}
@media (max-width: 600px) {
	.bf-logo > span:not(.bf-logo-mark) { display: none; }
	.bf-search { max-width: none; }
}

/* Utilitaires header (compte / panier / recherche) */
.bf-header-utils {
	display: flex;
	align-items: center;
	gap: var(--bf-sp-2);
	margin-left: auto;
}
.bf-icon-btn {
	width: 42px;
	height: 42px;
	border-radius: var(--bf-radius-sm);
	background: transparent;
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bf-dark);
	cursor: pointer;
	position: relative;
	text-decoration: none;
	transition: background var(--bf-t-fast), color var(--bf-t-fast);
}
.bf-icon-btn:hover { background: var(--bf-sand); color: var(--bf-primary); text-decoration: none; }
.bf-icon-btn svg { width: 22px; height: 22px; }
.bf-cart-count {
	position: absolute;
	top: 4px;
	right: 4px;
	background: var(--bf-accent);
	color: var(--bf-dark);
	font-size: 10px;
	font-weight: 800;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.bf-cart-count[data-empty="true"] { display: none; }

/* Hérite de .bf-icon-btn (background/hover/size). On force juste display:none par défaut,
   la media query mobile le remet en flex. Le glyph ☰ (☰) est visible partout sans SVG. */
.bf-burger { display: none; font-size: 26px; line-height: 1; padding: 0; }
.bf-burger svg { width: 24px; height: 24px; }

/* ============================================================
   MÉGA-MENU — panneau flottant sous le header
   ============================================================ */
.bf-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	width: calc(100vw - 32px);
	max-width: var(--bf-container);
	margin-top: 8px;
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	box-shadow: var(--bf-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-8px);
	transition: opacity var(--bf-t), transform var(--bf-t), visibility 0s linear var(--bf-t);
	z-index: 99;
	max-height: calc(100vh - var(--bf-header-h) - 40px);
	overflow-y: auto;
}
.bf-nav-item.is-open > .bf-mega,
.bf-nav-item:focus-within > .bf-mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition-delay: 0s;
}
.bf-mega-inner {
	max-width: var(--bf-container);
	margin: 0 auto;
	padding: var(--bf-sp-6) var(--bf-sp-4);
	display: grid;
	grid-template-columns: 1fr minmax(220px, 260px);
	gap: var(--bf-sp-6);
}
.bf-mega-cats {
	columns: 4;
	column-gap: var(--bf-sp-6);
}
.bf-mega-col {
	break-inside: avoid;
	margin-bottom: var(--bf-sp-5);
	display: block;
}
@media (max-width: 1100px) {
	.bf-mega-cats { columns: 3; }
}
@media (max-width: 900px) {
	.bf-mega-cats { columns: 2; }
	.bf-mega-inner { grid-template-columns: 1fr; }
}
.bf-mega-col h4 {
	margin: 0 0 var(--bf-sp-3);
	font-size: 0.78rem;
	color: var(--bf-primary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}
.bf-mega-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bf-mega-col li { margin: 0 0 6px; }
.bf-mega-col a {
	color: var(--bf-dark);
	text-decoration: none;
	font-size: 0.92rem;
	display: block;
	padding: 4px 0;
	transition: color var(--bf-t-fast);
}
.bf-mega-col a:hover { color: var(--bf-primary); text-decoration: none; }
.bf-mega-col .bf-mega-parent-link {
	color: var(--bf-primary);
	font-weight: 700;
	font-size: 0.85rem;
	margin-top: var(--bf-sp-2);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.bf-mega-col .bf-mega-parent-link::after { content: '→'; transition: transform var(--bf-t-fast); }
.bf-mega-col .bf-mega-parent-link:hover::after { transform: translateX(3px); }
.bf-mega-promo {
	background: linear-gradient(135deg, var(--bf-sand) 0%, var(--bf-cream) 100%);
	border-radius: var(--bf-radius);
	padding: var(--bf-sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--bf-sp-3);
	align-self: start;
}
.bf-mega-promo h5 { margin: 0; font-size: 1rem; color: var(--bf-dark); }
.bf-mega-promo p { margin: 0; color: var(--bf-muted); font-size: 0.88rem; line-height: 1.5; }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.bf-mobile-drawer {
	position: fixed;
	inset: 0;
	background: rgba(10, 20, 15, 0.4);
	z-index: 200;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--bf-t), visibility 0s linear var(--bf-t);
}
.bf-mobile-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
.bf-mobile-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(92vw, 380px);
	background: #fff;
	box-shadow: var(--bf-shadow-lg);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--bf-t);
	display: flex;
	flex-direction: column;
}
.bf-mobile-drawer.is-open .bf-mobile-drawer-panel {
	transform: translateX(0);
}
.bf-mobile-drawer-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--bf-sp-3) var(--bf-sp-4);
	background: var(--bf-sand);
	border-bottom: 1px solid var(--bf-border);
	min-height: 58px;
}
.bf-logo--drawer { font-size: 1.15rem; }
.bf-logo--drawer .bf-logo-mark { width: 32px; height: 32px; }
.bf-mobile-drawer-close {
	background: #fff;
	border: 1px solid var(--bf-border);
	color: var(--bf-dark);
	width: 40px;
	height: 40px;
	border-radius: var(--bf-radius-sm);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background var(--bf-t-fast), color var(--bf-t-fast), border-color var(--bf-t-fast);
}
.bf-mobile-drawer-close svg { display: block; }
.bf-mobile-drawer-close:hover {
	background: var(--bf-cream);
	color: var(--bf-primary);
	border-color: var(--bf-primary);
}
.bf-mobile-drawer nav { padding: var(--bf-sp-2) 0; }
.bf-mobile-drawer nav > a,
.bf-mobile-drawer nav > details > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px var(--bf-sp-4);
	color: var(--bf-dark);
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	list-style: none;
	border-bottom: 1px solid var(--bf-border);
}
.bf-mobile-drawer nav > details > summary::-webkit-details-marker { display: none; }
.bf-mobile-drawer nav > details > summary::after {
	content: '';
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--bf-muted);
	border-bottom: 2px solid var(--bf-muted);
	transform: rotate(45deg);
	transition: transform var(--bf-t);
}
.bf-mobile-drawer nav > details[open] > summary::after { transform: rotate(-135deg); }
.bf-mobile-drawer .bf-mobile-submenu { padding: var(--bf-sp-2) 0; background: #fff; }
.bf-mobile-drawer .bf-mobile-submenu-group { padding: var(--bf-sp-3) var(--bf-sp-4); }
.bf-mobile-drawer .bf-mobile-submenu-group h5 {
	margin: 0 0 6px;
	color: var(--bf-primary);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.bf-mobile-drawer .bf-mobile-submenu-group a {
	display: block;
	padding: 8px 0;
	color: var(--bf-dark);
	text-decoration: none;
	font-size: 0.95rem;
}

/* ============================================================
   HOMEPAGE — Hero, sections, cards, steps
   ============================================================ */
.bf-hero {
	position: relative;
	background: var(--bf-primary-dark);
	color: #fff;
	padding: var(--bf-sp-12) var(--bf-sp-4);
	overflow: hidden;
	isolation: isolate;
}
.bf-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 50% at 80% 20%, rgba(245, 166, 35, 0.15), transparent 60%),
		radial-gradient(ellipse 40% 40% at 20% 80%, rgba(10, 95, 74, 0.4), transparent 70%),
		linear-gradient(135deg, var(--bf-primary-dark) 0%, var(--bf-primary) 60%, #0d7a5f 100%);
	z-index: -1;
}
.bf-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd' fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
	z-index: -1;
	opacity: 0.6;
}
.bf-hero-inner {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
.bf-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(245, 166, 35, 0.15);
	color: var(--bf-accent);
	padding: 6px 14px;
	border-radius: var(--bf-radius-pill);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: var(--bf-sp-5);
	border: 1px solid rgba(245, 166, 35, 0.35);
}
.bf-hero h1 {
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.1;
	margin: 0 0 var(--bf-sp-4);
	color: #fff;
	font-weight: 800;
}
.bf-hero p.bf-lead {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.55;
	opacity: 0.9;
	max-width: 720px;
	margin: 0 auto var(--bf-sp-6);
	color: rgba(255,255,255,0.92);
}
.bf-hero-ctas {
	display: inline-flex;
	gap: var(--bf-sp-3);
	flex-wrap: wrap;
	justify-content: center;
}
.bf-hero .bf-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--bf-sp-2);
	background: var(--bf-accent);
	color: var(--bf-dark);
	padding: 16px 30px;
	border-radius: var(--bf-radius);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.05rem;
	box-shadow: 0 6px 20px rgba(245, 166, 35, 0.35);
	transition: transform var(--bf-t-fast), box-shadow var(--bf-t), background var(--bf-t);
}
.bf-hero .bf-cta:hover { background: var(--bf-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(245, 166, 35, 0.45); }
.bf-hero .bf-cta-ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.3);
	box-shadow: none;
	padding: 16px 26px;
}
.bf-hero .bf-cta-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); box-shadow: none; }

/* Bandeau de trust indicators sous le hero */
.bf-trust-strip {
	background: var(--bf-cream);
	border-bottom: 1px solid var(--bf-border);
}
.bf-trust-strip-inner {
	max-width: var(--bf-container);
	margin: 0 auto;
	padding: var(--bf-sp-4) var(--bf-sp-4);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--bf-sp-4);
}
.bf-trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--bf-dark);
	font-size: 0.92rem;
}
.bf-trust-item svg { width: 26px; height: 26px; color: var(--bf-primary); flex-shrink: 0; }
.bf-trust-item strong { display: block; font-size: 0.92rem; }
.bf-trust-item span { color: var(--bf-muted); font-size: 0.82rem; }

.bf-section {
	padding: var(--bf-sp-12) var(--bf-sp-4);
	max-width: var(--bf-container);
	margin: 0 auto;
}
/* Deux sections consécutives = 96 + 96 = 192px de vide, trop. On réduit le padding-top de
   la seconde quand elle en suit une autre — desktop et mobile. */
.bf-section + .bf-section,
.bf-section-alt + .bf-section { padding-top: var(--bf-sp-5); }
.bf-section-alt + .bf-section-alt > .bf-section-inner,
.bf-section + .bf-section-alt > .bf-section-inner { padding-top: var(--bf-sp-5); }
.bf-section-alt { background: var(--bf-sand); max-width: none; margin: 0; }
.bf-section-alt > .bf-section-inner { max-width: var(--bf-container); margin: 0 auto; }
.bf-section h2 {
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	margin: 0 0 var(--bf-sp-3);
	text-align: center;
	line-height: 1.15;
}
.bf-section .bf-eyebrow {
	display: block;
	text-align: center;
	color: var(--bf-primary);
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 var(--bf-sp-3);
}
.bf-section .bf-intro {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--bf-sp-8);
	color: var(--bf-muted);
	font-size: 1.05rem;
	line-height: 1.6;
}

.bf-grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--bf-sp-5);
}
.bf-card {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-6);
	transition: transform var(--bf-t), box-shadow var(--bf-t), border-color var(--bf-t);
}
.bf-card:hover { transform: translateY(-2px); box-shadow: var(--bf-shadow-md); border-color: var(--bf-border-strong); }
.bf-card .bf-icon {
	width: 52px;
	height: 52px;
	background: var(--bf-primary-tint);
	color: var(--bf-primary);
	border-radius: var(--bf-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--bf-sp-4);
	font-size: 24px;
}
.bf-card .bf-icon svg { width: 26px; height: 26px; }
.bf-card h3 { margin: 0 0 var(--bf-sp-3); font-size: 1.15rem; }
.bf-card p { margin: 0; color: var(--bf-muted); font-size: 0.95rem; line-height: 1.55; }

.bf-steps {
	counter-reset: step;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--bf-sp-5);
	margin-top: var(--bf-sp-6);
}
.bf-step {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-6) var(--bf-sp-5) var(--bf-sp-5);
	position: relative;
}
.bf-step::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	top: -20px;
	left: 24px;
	background: var(--bf-primary);
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: var(--bf-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.05rem;
	box-shadow: 0 4px 12px rgba(10, 95, 74, 0.25);
}
.bf-step h4 { margin: var(--bf-sp-3) 0 var(--bf-sp-2); font-size: 1.05rem; }
.bf-step p { color: var(--bf-muted); font-size: 0.93rem; line-height: 1.55; margin: 0; }

.bf-not-for {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-left: 4px solid var(--bf-accent);
	padding: var(--bf-sp-5) var(--bf-sp-6);
	border-radius: var(--bf-radius);
	margin: var(--bf-sp-6) 0;
}
.bf-not-for h3 { margin-top: 0; color: var(--bf-dark); }

/* Comparaison prix (2 colonnes : Ali vs Bonferrage) */
.bf-vs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--bf-sp-4);
	margin-top: var(--bf-sp-6);
}
.bf-vs-card {
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-6);
	position: relative;
}
.bf-vs-card--them {
	background: #f7f7f7;
	border: 1px solid #e8e8e8;
}
.bf-vs-card--us {
	background: var(--bf-primary);
	color: #fff;
	box-shadow: var(--bf-shadow-lg);
}
.bf-vs-card h4 {
	margin: 0 0 var(--bf-sp-4);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.85;
}
.bf-vs-card--us h4 { color: rgba(255,255,255,0.8); }
.bf-vs-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.bf-vs-card li {
	display: flex;
	gap: 10px;
	padding: 8px 0;
	font-size: 0.95rem;
	line-height: 1.5;
}
.bf-vs-card li::before {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
}
.bf-vs-card--them li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='6' y1='18' x2='18' y2='6'/%3E%3C/svg%3E"); }
.bf-vs-card--us li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

/* Grille de catégories phares (homepage) */
.bf-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--bf-sp-4);
	margin-top: var(--bf-sp-6);
}
.bf-cat-tile {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	padding: var(--bf-sp-5);
	text-align: center;
	text-decoration: none;
	color: var(--bf-dark);
	transition: transform var(--bf-t), box-shadow var(--bf-t), border-color var(--bf-t);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bf-sp-3);
}
.bf-cat-tile:hover {
	transform: translateY(-3px);
	box-shadow: var(--bf-shadow-md);
	border-color: var(--bf-primary);
	color: var(--bf-primary);
	text-decoration: none;
}
.bf-cat-tile-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--bf-radius);
	background: var(--bf-primary-tint);
	color: var(--bf-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
}
.bf-cat-tile strong { font-size: 0.95rem; font-weight: 700; }
.bf-cat-tile-count { color: var(--bf-muted); font-size: 0.8rem; }

/* ------------------ Progress bar batch ------------------ */
.bf-batch-progress {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-5) var(--bf-sp-6);
	margin: var(--bf-sp-4) 0;
}
.bf-batch-progress h4 { margin: 0 0 var(--bf-sp-3); font-size: 1rem; }
.bf-batch-progress-header {
	display: flex;
	align-items: center;
	gap: var(--bf-sp-3);
	margin-bottom: var(--bf-sp-3);
}
.bf-batch-progress-header h4 { margin: 0; }
.bf-batch-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--bf-radius-pill);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.bf-batch-badge--open { background: #d1fae5; color: #065f46; }
.bf-batch-badge--last-call { background: #fed7aa; color: #7c2d12; }

/* Variante "dernier appel" — panneau orange chaleureux */
.bf-batch-progress--last-call {
	background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
	border: 1px solid #fdba74;
	position: relative;
	overflow: hidden;
}
.bf-batch-progress--last-call::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--bf-accent), #ea580c);
}
.bf-batch-progress--last-call .bf-batch-progress-header h4 { color: #7c2d12; }
.bf-batch-progress--last-call .bf-progress-fill { background: linear-gradient(90deg, #ea580c, var(--bf-accent)); }
.bf-batch-countdown {
	font-family: 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 800;
	color: #c2410c;
	line-height: 1;
	margin: var(--bf-sp-3) 0;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.bf-batch-help {
	color: var(--bf-muted);
	font-size: 0.9rem;
	line-height: 1.55;
	margin: var(--bf-sp-3) 0 0;
}
.bf-batch-progress--last-call .bf-batch-help { color: #7c2d12; }

/* Topbar variante urgente */
.bf-topbar-item--urgent {
	background: rgba(245, 166, 35, 0.15);
	padding: 4px 10px;
	border-radius: var(--bf-radius-sm);
	color: var(--bf-accent) !important;
	font-weight: 600;
	animation: bfTopbarPulse 2s ease-in-out infinite;
}
.bf-topbar-item--urgent strong { color: #fff; }
@keyframes bfTopbarPulse {
	0%, 100% { background: rgba(245, 166, 35, 0.15); }
	50%      { background: rgba(245, 166, 35, 0.28); }
}

/* Timeline batch dans "Voir la commande" */
.bf-batch-timeline {
	list-style: none;
	padding: 0;
	margin: var(--bf-sp-4) 0 0;
}
.bf-batch-timeline-item {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	gap: var(--bf-sp-3);
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #f3f4f6;
	color: var(--bf-muted);
}
.bf-batch-timeline-item:last-child { border-bottom: 0; }
.bf-batch-timeline-mark {
	width: 24px;
	text-align: center;
	font-weight: 700;
}
.bf-batch-timeline-item.is-done { color: var(--bf-dark); }
.bf-batch-timeline-item.is-done .bf-batch-timeline-mark { color: var(--bf-primary); }
.bf-batch-timeline-item.is-current { color: var(--bf-dark); font-weight: 600; }
.bf-batch-timeline-item.is-current .bf-batch-timeline-mark { color: var(--bf-accent); }
.bf-batch-timeline-ts { font-size: 0.85rem; color: var(--bf-muted); font-variant-numeric: tabular-nums; }
.bf-progress-bar {
	background: var(--bf-bg-soft);
	border-radius: 999px;
	overflow: hidden;
	height: 22px;
	position: relative;
}
.bf-progress-fill {
	background: linear-gradient(90deg, var(--bf-primary), var(--bf-accent));
	height: 100%;
	transition: width 0.6s ease;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 10px;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	white-space: nowrap;
}
.bf-batch-progress .bf-meta {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 0.9rem;
	color: var(--bf-muted);
}

/* ------------------ Note du fondateur (homepage) ------------------ */
.bf-founder-note {
	max-width: 760px;
	margin: 0 auto;
	background: linear-gradient(135deg, #fff 0%, var(--bf-cream) 100%);
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-8) var(--bf-sp-8) var(--bf-sp-6);
	position: relative;
	overflow: hidden;
}
.bf-founder-note::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--bf-primary), var(--bf-accent));
}
.bf-founder-note::after {
	content: '\201C';
	position: absolute;
	top: 10px;
	right: 26px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 110px;
	line-height: 1;
	color: var(--bf-primary);
	opacity: 0.08;
	pointer-events: none;
}
.bf-founder-eyebrow {
	display: inline-block;
	color: var(--bf-primary);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: var(--bf-sp-3);
}
.bf-founder-note h2 {
	text-align: left;
	margin: 0 0 var(--bf-sp-5);
	font-size: clamp(1.4rem, 2.4vw, 1.75rem);
	line-height: 1.25;
	color: var(--bf-dark);
}
.bf-founder-note p {
	color: var(--bf-dark);
	line-height: 1.7;
	font-size: 1.02rem;
	margin: 0 0 var(--bf-sp-4);
}
.bf-founder-note p strong { color: var(--bf-primary-dark); font-weight: 700; }
.bf-founder-sign {
	display: flex;
	align-items: center;
	gap: var(--bf-sp-3);
	margin-top: var(--bf-sp-6);
	padding-top: var(--bf-sp-5);
	border-top: 1px solid var(--bf-border);
}
.bf-founder-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--bf-primary);
	color: var(--bf-cream);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
.bf-founder-avatar svg { width: 24px; height: 24px; }
.bf-founder-avatar--photo {
	background: transparent;
	object-fit: cover;
	border: 2px solid var(--bf-primary);
	display: block;
}
.bf-founder-sign strong { display: block; color: var(--bf-dark); font-weight: 700; font-size: 0.98rem; }
.bf-founder-sign span { display: block; color: var(--bf-muted); font-size: 0.85rem; }

@media (max-width: 640px) {
	.bf-founder-note { padding: var(--bf-sp-6) var(--bf-sp-5) var(--bf-sp-5); }
	.bf-founder-note::after { font-size: 80px; right: 16px; }
}

/* ============================================================
   Pages contenu (Comment ça marche, Délais, CGV, mentions, faq, etc.)
   ============================================================ */

.bf-legal-page {
	max-width: 860px;
	margin: 0 auto;
	padding: var(--bf-sp-6) var(--bf-sp-4);
}
.bf-legal-page .bf-breadcrumbs {
	margin-bottom: var(--bf-sp-4);
	font-size: 0.85rem;
}
.bf-legal-page-header {
	padding-bottom: var(--bf-sp-5);
	border-bottom: 1px solid var(--bf-border);
	margin-bottom: var(--bf-sp-6);
}
.bf-legal-page-header h1 {
	margin: 0;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	line-height: 1.15;
}
.bf-legal-page-body {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--bf-dark);
}
.bf-legal-page-body h2 {
	margin: var(--bf-sp-8) 0 var(--bf-sp-4);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	color: var(--bf-dark);
}
.bf-legal-page-body h3 {
	margin: var(--bf-sp-6) 0 var(--bf-sp-3);
	font-size: 1.1rem;
	color: var(--bf-dark);
}
.bf-legal-page-body p { margin: 0 0 var(--bf-sp-4); }
.bf-legal-page-body ul,
.bf-legal-page-body ol { margin: 0 0 var(--bf-sp-4) 1.4em; padding: 0; }
.bf-legal-page-body li { margin-bottom: 6px; }
.bf-legal-page-body a { color: var(--bf-primary); text-decoration: underline; }
.bf-legal-page-body a:hover { color: var(--bf-primary-dark); }

.bf-lead-note {
	background: var(--bf-sand);
	border-left: 3px solid var(--bf-primary);
	border-radius: 0 var(--bf-radius) var(--bf-radius) 0;
	padding: var(--bf-sp-4) var(--bf-sp-5);
	margin: 0 0 var(--bf-sp-6);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--bf-dark);
}
.bf-lead-note em { font-style: normal; }
.bf-lead-note strong { color: var(--bf-primary); }

/* --- Composant "How it works" (Comment ça marche) --- */

.bf-hiw-steps {
	list-style: none;
	margin: var(--bf-sp-6) 0;
	padding: 0;
	position: relative;
}
.bf-hiw-steps::before {
	content: '';
	position: absolute;
	left: 27px;
	top: 20px;
	bottom: 20px;
	width: 2px;
	background: linear-gradient(180deg, var(--bf-primary), var(--bf-primary-tint));
	border-radius: 1px;
	z-index: 0;
}
.bf-hiw-step {
	display: flex;
	gap: var(--bf-sp-4);
	margin: 0 0 var(--bf-sp-5);
	position: relative;
	z-index: 1;
}
.bf-hiw-step:last-child { margin-bottom: 0; }
.bf-hiw-step-num {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--bf-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.4rem;
	box-shadow: 0 4px 12px rgba(10, 95, 74, 0.25);
	border: 3px solid #fff;
}
.bf-hiw-step-body {
	flex: 1;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	padding: var(--bf-sp-4) var(--bf-sp-5);
	margin-top: 4px;
	transition: border-color var(--bf-t-fast), box-shadow var(--bf-t-fast);
}
.bf-hiw-step-body:hover { border-color: var(--bf-primary); box-shadow: var(--bf-shadow-sm); }
.bf-hiw-step-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--bf-sp-3);
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.bf-hiw-step-head h3 {
	margin: 0;
	font-size: 1.1rem;
	color: var(--bf-primary);
}
.bf-hiw-step-time {
	font-size: 0.8rem;
	color: var(--bf-muted);
	background: var(--bf-cream);
	padding: 4px 10px;
	border-radius: var(--bf-radius-pill);
	font-weight: 600;
	white-space: nowrap;
}
.bf-hiw-step-body p { margin: 0; color: var(--bf-dark); }

/* Encart total */
.bf-hiw-total {
	display: flex;
	align-items: center;
	gap: var(--bf-sp-5);
	background: linear-gradient(135deg, var(--bf-primary) 0%, #0d7a5f 100%);
	color: #fff;
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-5) var(--bf-sp-6);
	margin: var(--bf-sp-8) 0;
	box-shadow: var(--bf-shadow-md);
}
.bf-hiw-total-num {
	font-size: clamp(2.4rem, 6vw, 3.6rem);
	font-weight: 800;
	line-height: 1;
	color: var(--bf-accent);
	flex-shrink: 0;
}
.bf-hiw-total-body strong { display: block; font-size: 1.1rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; }
.bf-hiw-total-body p { margin: 0; opacity: 0.95; line-height: 1.6; }

@media (max-width: 640px) {
	.bf-hiw-total { flex-direction: column; text-align: center; }
	.bf-hiw-steps::before { left: 22px; }
	.bf-hiw-step-num { width: 46px; height: 46px; font-size: 1.15rem; }
	.bf-hiw-step-body { padding: var(--bf-sp-3) var(--bf-sp-4); }
}

/* CTA final */
.bf-hiw-cta {
	background: linear-gradient(135deg, var(--bf-sand) 0%, var(--bf-cream) 100%);
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-6);
	margin: var(--bf-sp-8) 0 0;
	text-align: center;
}
.bf-hiw-cta h3 { margin: 0 0 var(--bf-sp-3); color: var(--bf-primary); font-size: 1.25rem; }
.bf-hiw-cta p { margin: 0 auto var(--bf-sp-5); max-width: 560px; color: var(--bf-dark); }
.bf-hiw-cta-actions {
	display: flex;
	justify-content: center;
	gap: var(--bf-sp-3);
	flex-wrap: wrap;
}

/* ------------------ Notices ------------------ */
.bf-notice {
	padding: 14px 18px;
	border-radius: var(--bf-radius);
	margin: 16px 0;
	font-size: 0.95rem;
}
.bf-notice-info { background: #e6f2ff; border-left: 4px solid #1e6bd6; color: #0b3a7a; }
.bf-notice-warn { background: #fff4e0; border-left: 4px solid var(--bf-accent); color: #8a5a00; }
.bf-notice-error { background: #fde8e8; border-left: 4px solid var(--bf-danger); color: #7a1717; }

/* ------------------ Formulaire demandes ------------------ */
.bf-request-form {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	padding: 28px;
	max-width: 720px;
}
.bf-request-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	margin-top: 16px;
}
.bf-request-form input[type=text],
.bf-request-form input[type=url],
.bf-request-form textarea,
.bf-request-form input[type=file] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--bf-border);
	border-radius: 8px;
	font-size: 1rem;
	box-sizing: border-box;
}
.bf-request-form textarea { min-height: 120px; }
.bf-request-form small {
	display: block;
	margin-top: 4px;
	margin-bottom: 12px;
}
.bf-request-form .bf-submit {
	background: var(--bf-primary);
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	margin-top: 20px;
}
.bf-request-form .bf-submit:hover { background: #0d7a5f; }

/* ------------------ Demande produit : gate connexion ------------------ */
.bf-request-gate {
	max-width: 560px;
	margin: 0 auto;
	background: linear-gradient(135deg, var(--bf-sand) 0%, var(--bf-cream) 100%);
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-8) var(--bf-sp-6);
	text-align: center;
}
.bf-request-gate-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--bf-sp-4);
	border-radius: 50%;
	background: var(--bf-primary-tint);
	color: var(--bf-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bf-request-gate-icon svg { width: 32px; height: 32px; }
.bf-request-gate h3 {
	margin: 0 0 var(--bf-sp-3);
	color: var(--bf-primary);
	font-size: 1.25rem;
}
.bf-request-gate p {
	color: var(--bf-dark);
	line-height: 1.6;
	margin: 0 auto var(--bf-sp-5);
	max-width: 460px;
}
.bf-request-gate-actions {
	display: flex;
	justify-content: center;
	gap: var(--bf-sp-3);
	flex-wrap: wrap;
	margin-bottom: var(--bf-sp-3);
}
.bf-request-gate-hint {
	color: var(--bf-muted);
	font-size: 0.85rem;
	font-style: italic;
	margin: 0;
}

/* ------------------ Votes produit (pouce vert / pouce rouge) ------------------ */
.bf-product-votes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0;
	font-size: 0.9rem;
}
.bf-product-votes .bf-votes-label {
	color: var(--bf-muted);
	margin-right: 4px;
}
.bf-vote-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--bf-border);
	background: #fff;
	border-radius: 999px;
	cursor: pointer;
	color: var(--bf-dark);
	font-weight: 500;
	font-size: 0.9rem;
	line-height: 1;
	transition: background var(--bf-t-fast), border-color var(--bf-t-fast), color var(--bf-t-fast);
}
.bf-vote-btn svg { display: block; }
.bf-vote-btn:hover { border-color: var(--bf-primary); }
.bf-vote-btn[disabled] { opacity: 0.6; cursor: wait; }
.bf-vote-btn.bf-vote-up.is-active {
	background: #e6f7e9;
	border-color: #1e6b2b;
	color: #1e6b2b;
}
.bf-vote-btn.bf-vote-down.is-active {
	background: #fdecec;
	border-color: #a01818;
	color: #a01818;
}
.bf-votes-count { min-width: 12px; text-align: center; }

/* ------------------ Listing demandes utilisateur ------------------ */
.bf-request-list { margin-top: 30px; }
.bf-request-list > h3 { margin-bottom: 18px; }
.bf-request-item {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	padding: 16px 20px;
	margin-bottom: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.bf-request-item .bf-request-thumb {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--bf-radius);
	flex-shrink: 0;
	border: 1px solid var(--bf-border);
}
.bf-request-item .bf-request-body { flex: 1; min-width: 0; }
.bf-request-item .bf-request-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
	color: var(--bf-muted);
	font-size: 0.85rem;
}
.bf-request-item .bf-request-ref {
	color: var(--bf-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bf-request-item .bf-status {
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
}
.bf-status-pending  { background: #fff4e0; color: #8a5a00; }
.bf-status-resolved { background: #e6f7e9; color: #1e6b2b; }
.bf-status-dropped  { background: #f0f0f0; color: #666; }

/* ============================================================
   CART — Layout 2 col, cards items, sidebar sticky totals
   ============================================================ */

.bf-cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--bf-sp-6);
	align-items: start;
	max-width: var(--bf-container);
	margin: 0 auto;
	padding: var(--bf-sp-6) var(--bf-sp-4);
	box-sizing: border-box;
}
.bf-cart-layout > .bf-cart-main { grid-column: 1; width: 100%; float: none; min-width: 0; }
.bf-cart-layout > .bf-cart-sidebar { grid-column: 2; width: 100%; float: none; }
/* Neutralise les rules WC natives sur cart_totals/cross-sells qui appliquent float:right;width:48% */
.bf-cart-sidebar .cart_totals,
.bf-cart-sidebar .cross-sells,
.bf-cart-sidebar .cart-collaterals { width: 100% !important; float: none !important; margin: 0 !important; }
@media (max-width: 900px) {
	.bf-cart-layout { grid-template-columns: 1fr; }
	.bf-cart-layout > .bf-cart-main,
	.bf-cart-layout > .bf-cart-sidebar { grid-column: 1; }
}

.bf-cart-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--bf-sp-3);
	margin-bottom: var(--bf-sp-5);
	flex-wrap: wrap;
}
.bf-cart-head h1 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.bf-cart-count {
	background: var(--bf-primary-tint);
	color: var(--bf-primary);
	padding: 4px 12px;
	border-radius: var(--bf-radius-pill);
	font-size: 0.85rem;
	font-weight: 700;
}

/* Liste des items — sans card individuelle : titre, items et actions alignés flush left */
.bf-cart-items { list-style: none; padding: 0; margin: 0 0 var(--bf-sp-4); display: flex; flex-direction: column; }
.bf-cart-item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--bf-border);
	border-radius: 0;
	padding: var(--bf-sp-4) 0;
	display: grid;
	grid-template-columns: 80px 1fr 100px 130px 100px 32px;
	align-items: center;
	gap: var(--bf-sp-4);
	transition: background var(--bf-t-fast);
}
.bf-cart-item:first-child { padding-top: 0; }
.bf-cart-item:last-child { border-bottom: 0; padding-bottom: 0; }
.bf-cart-item:hover { background: transparent; }
.bf-cart-item-img img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--bf-radius-sm);
	background: var(--bf-cream);
	display: block;
}
.bf-cart-item-body { min-width: 0; }
.bf-cart-item-title { font-weight: 600; font-size: 0.98rem; line-height: 1.3; margin-bottom: 4px; }
.bf-cart-item-title a { color: var(--bf-dark); text-decoration: none; }
.bf-cart-item-title a:hover { color: var(--bf-primary); }
.bf-cart-item-meta { font-size: 0.82rem; color: var(--bf-muted); line-height: 1.4; }
.bf-cart-item-meta dl { margin: 4px 0 0; padding: 0; }
.bf-cart-item-meta dt,
.bf-cart-item-meta dd,
.bf-cart-item-meta dd p { display: inline; margin: 0; padding: 0; }
.bf-cart-item-meta dt { font-weight: 600; color: var(--bf-dark); }
.bf-cart-item-meta dd { margin-right: 12px; }
.bf-cart-item-meta dd:last-of-type { margin-right: 0; }
.bf-cart-item-price { color: var(--bf-muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.bf-cart-item-price-mobile { display: none; }
.bf-cart-item-qty .quantity { display: block; }
.bf-cart-item-qty input.qty {
	width: 100%;
	max-width: 110px;
	padding: 8px 10px;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-sm);
	text-align: center;
	font-size: 0.95rem;
	font-weight: 600;
	background: #fff;
}
.bf-cart-item-qty input.qty:focus {
	outline: none;
	border-color: var(--bf-primary);
	box-shadow: 0 0 0 3px rgba(10, 95, 74, 0.12);
}
.bf-cart-item-subtotal { text-align: right; font-weight: 800; color: var(--bf-primary); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.bf-cart-item-remove { text-align: center; }
.bf-cart-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--bf-muted);
	background: transparent;
	transition: background var(--bf-t-fast), color var(--bf-t-fast);
}
.bf-cart-remove:hover { background: #fde8e8; color: var(--bf-danger); }

/* Mobile : items en mode empilé */
@media (max-width: 720px) {
	.bf-cart-item {
		grid-template-columns: 72px 1fr 32px;
		grid-template-areas:
			'img body remove'
			'img body remove'
			'qty subtotal subtotal';
		gap: 10px 12px;
	}
	.bf-cart-item-img { grid-area: img; }
	.bf-cart-item-body { grid-area: body; }
	.bf-cart-item-remove { grid-area: remove; align-self: start; }
	.bf-cart-item-qty { grid-area: qty; }
	.bf-cart-item-subtotal { grid-area: subtotal; align-self: center; }
	.bf-cart-item-price { display: none; }
	.bf-cart-item-price-mobile { display: block; color: var(--bf-muted); font-size: 0.85rem; margin-top: 4px; }
	.bf-cart-item-img img { width: 72px; height: 72px; }
	.bf-cart-item-qty input.qty { max-width: 90px; }
}

/* Actions coupon + update — alignées flush left comme les items */
.bf-cart-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--bf-sp-3);
	flex-wrap: wrap;
	padding: var(--bf-sp-4) 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--bf-border);
	border-radius: 0;
	margin-top: 0;
}
.bf-cart-coupon {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	flex: 1;
	min-width: 240px;
}
.bf-cart-coupon input[type="text"] {
	flex: 1;
	min-width: 140px;
	padding: 10px 14px;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-sm);
	font-size: 0.9rem;
	background: #fff;
	font-family: inherit;
}
.bf-cart-coupon input[type="text"]:focus {
	outline: none;
	border-color: var(--bf-primary);
	box-shadow: 0 0 0 3px rgba(10, 95, 74, 0.12);
}

/* Sidebar totaux */
.bf-cart-sidebar {
	position: sticky;
	top: calc(var(--bf-topbar-h) + var(--bf-header-h) + var(--bf-sp-4));
	display: flex;
	flex-direction: column;
	gap: var(--bf-sp-3);
}
@media (max-width: 900px) {
	.bf-cart-sidebar { position: static; }
}
.bf-cart-sidebar .cart-collaterals { display: flex; flex-direction: column; gap: var(--bf-sp-3); }
.bf-cart-sidebar .bf-notice { margin: 0; }

.bf-cart-totals {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-5);
}
.bf-cart-totals h2 {
	margin: 0 0 var(--bf-sp-4);
	font-size: 1.15rem;
	color: var(--bf-dark);
	padding-bottom: var(--bf-sp-3);
	border-bottom: 1px solid var(--bf-border);
}
.bf-cart-totals-list { margin: 0; padding: 0; }
.bf-cart-totals-list .row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 10px 0;
	gap: var(--bf-sp-3);
	border-bottom: 1px solid #f3f4f6;
	font-size: 0.94rem;
}
.bf-cart-totals-list .row:last-child { border-bottom: 0; }
.bf-cart-totals-list dt {
	color: var(--bf-muted);
	font-weight: 500;
	margin: 0;
}
.bf-cart-totals-list dd {
	color: var(--bf-dark);
	font-weight: 600;
	margin: 0;
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.bf-cart-totals-list .order-total {
	padding-top: var(--bf-sp-4);
	margin-top: 0;
	border-top: 1px solid #e5e7eb;
	border-bottom: 0;
}
/* Évite le double-trait (border-bottom fine + border-top épaisse) entre la dernière ligne
   du récap et la ligne Total. On garde le padding-bottom natif pour que le montant du
   Sous-total ne colle pas contre la border. */
.bf-cart-totals-list .row:has(+ .order-total) { border-bottom: 0; }
.bf-cart-totals-list .order-total dt { font-size: 1rem; color: var(--bf-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.bf-cart-totals-list .order-total dd { color: var(--bf-primary); font-size: 1.5rem; font-weight: 800; }

/* Le bouton Proceed to checkout */
.bf-cart-totals .wc-proceed-to-checkout { margin-top: var(--bf-sp-4); }
.bf-cart-totals .wc-proceed-to-checkout .checkout-button,
.bf-cart-totals .wc-proceed-to-checkout .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bf-sp-2);
	width: 100%;
	padding: 14px 22px;
	background: var(--bf-primary);
	color: #fff;
	border: 0;
	border-radius: var(--bf-radius);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: background var(--bf-t), transform var(--bf-t-fast);
	box-shadow: 0 4px 12px rgba(10, 95, 74, 0.25);
}
.bf-cart-totals .wc-proceed-to-checkout .checkout-button:hover,
.bf-cart-totals .wc-proceed-to-checkout .button:hover { background: var(--bf-primary-dark); color: #fff; transform: translateY(-1px); }

/* Cart + Checkout : masque le titre WP "Cart / Panier / Checkout / Commande" (les infos utiles
   sont dans le contenu propre, le titre en haut fait doublon) */
body.woocommerce-cart .entry-title,
body.woocommerce-cart .page-title,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart .ast-page-title,
body.woocommerce-cart .ast-title-bar-wrap,
body.woocommerce-cart .ast-single-post .entry-header,
body.woocommerce-cart header.entry-header,
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout .page-title,
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .ast-page-title,
body.woocommerce-checkout .ast-title-bar-wrap,
body.woocommerce-checkout .ast-single-post .entry-header,
body.woocommerce-checkout header.entry-header,
body.woocommerce-account .entry-title,
body.woocommerce-account .page-title,
body.woocommerce-account .wp-block-post-title,
body.woocommerce-account h1.entry-title,
body.woocommerce-account .ast-page-title,
body.woocommerce-account .ast-title-bar-wrap,
body.woocommerce-account .ast-single-post .entry-header,
body.woocommerce-account header.entry-header { display: none !important; }
/* Cache aussi le h2 "Login" / "Register" dans le form car redondant avec le contexte de la page */
body.woocommerce-account:not(.logged-in) .woocommerce h2 { display: none !important; }


/* Bloc "En cas de rupture" — sidebar panier */
.bf-stock-pref {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	padding: var(--bf-sp-4) var(--bf-sp-5);
}
.bf-stock-pref h3 {
	margin: 0 0 var(--bf-sp-2);
	font-size: 0.95rem;
	color: var(--bf-dark);
}
.bf-stock-pref-desc {
	font-size: 0.82rem;
	color: var(--bf-muted);
	line-height: 1.5;
	margin: 0 0 var(--bf-sp-3);
}
.bf-stock-pref-option {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 10px;
	margin: 0 0 4px;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-sm);
	cursor: pointer;
	font-size: 0.88rem;
	color: var(--bf-dark);
	line-height: 1.4;
	transition: border-color var(--bf-t-fast), background var(--bf-t-fast);
}
.bf-stock-pref-option:hover { border-color: var(--bf-border-strong); background: var(--bf-cream); }
.bf-stock-pref-option:has(input:checked) { border-color: var(--bf-primary); background: var(--bf-primary-tint); }
.bf-stock-pref-option input[type="radio"] {
	margin-top: 3px;
	accent-color: var(--bf-primary);
	flex-shrink: 0;
}

/* Bouton commander désactivé quand minimum non atteint */
.bf-checkout-blocked { text-align: center; }
.bf-checkout-disabled-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 22px;
	background: #e5e7eb;
	color: #9ca3af;
	border: 0;
	border-radius: var(--bf-radius);
	font-weight: 700;
	font-size: 1rem;
	cursor: not-allowed;
	font-family: inherit;
}
.bf-checkout-block-msg {
	background: #fff4e0;
	border: 1px solid #f5a623;
	border-left: 3px solid #f5a623;
	color: #8a5a00;
	padding: 10px 14px;
	border-radius: var(--bf-radius-sm);
	margin: 12px 0 0;
	font-size: 0.88rem;
	line-height: 1.5;
	text-align: left;
}
.bf-checkout-block-msg strong { display: block; margin-bottom: 2px; }

/* Cart empty state */
.bf-empty--cart {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--bf-sp-10) var(--bf-sp-6);
}

/* ============================================================
   MY ACCOUNT — Layout, sidebar, cards, forms
   ============================================================ */

.bf-account-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--bf-sp-6);
	align-items: start;
	max-width: 100%;
}
.bf-account-layout > .woocommerce-MyAccount-navigation,
.bf-account-layout > .bf-account-nav { grid-column: 1; width: 100%; float: none; }
.bf-account-layout > .woocommerce-MyAccount-content,
.bf-account-layout > .bf-account-content { grid-column: 2; width: 100%; float: none; }
@media (max-width: 860px) {
	.bf-account-layout { grid-template-columns: 1fr; }
	.bf-account-layout > .bf-account-nav,
	.bf-account-layout > .bf-account-content { grid-column: 1; }
}

/* Sidebar */
.bf-account-nav {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	padding: 0;
	overflow: hidden;
	position: sticky;
	top: calc(var(--bf-topbar-h) + var(--bf-header-h) + var(--bf-sp-4));
}
@media (max-width: 860px) {
	.bf-account-nav { position: static; }
}
.bf-account-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var(--bf-sp-4);
	background: linear-gradient(135deg, var(--bf-primary) 0%, #0d7a5f 100%);
	color: #fff;
}
.bf-account-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.2);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.1rem;
	flex-shrink: 0;
	border: 2px solid rgba(255,255,255,0.35);
}
.bf-account-user-body { min-width: 0; flex: 1; }
.bf-account-user-body strong {
	display: block;
	font-size: 0.95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bf-account-user-body span {
	display: block;
	font-size: 0.8rem;
	opacity: 0.85;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bf-account-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bf-account-nav li { margin: 0; padding: 0; }
.bf-account-nav a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px var(--bf-sp-4);
	color: var(--bf-dark);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.94rem;
	line-height: 1.2;
	transition: background var(--bf-t-fast), color var(--bf-t-fast);
	border-left: 3px solid transparent;
}
.bf-account-nav a:hover { background: var(--bf-sand); color: var(--bf-primary); text-decoration: none; }
.bf-account-nav li.is-active > a,
.bf-account-nav li.woocommerce-MyAccount-navigation-link--is-active > a,
.bf-account-nav a[aria-current="page"] {
	background: var(--bf-primary-tint);
	color: var(--bf-primary);
	font-weight: 700;
	border-left-color: var(--bf-primary);
}
.bf-account-nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bf-muted);
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	line-height: 0;
	transform: translateY(3px);
}
.bf-account-nav-icon svg { display: block; width: 18px; height: 18px; }
.bf-account-nav a:hover .bf-account-nav-icon,
.bf-account-nav li.is-active > a .bf-account-nav-icon,
.bf-account-nav li.woocommerce-MyAccount-navigation-link--is-active > a .bf-account-nav-icon,
.bf-account-nav a[aria-current="page"] .bf-account-nav-icon { color: var(--bf-primary); }
.bf-account-nav-label { flex: 1; min-width: 0; margin-left: 6px; }

/* Content principal */
.bf-account-content {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-6) var(--bf-sp-6);
}
.bf-account-content > h2,
.bf-account-content > h3 {
	margin-top: 0;
	color: var(--bf-dark);
	font-size: 1.25rem;
	padding-bottom: var(--bf-sp-3);
	border-bottom: 1px solid var(--bf-border);
	margin-bottom: var(--bf-sp-5);
}

/* Formulaires WC — inputs, boutons */
.bf-account-content form .form-row,
.bf-account-content .woocommerce-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--bf-sp-4);
}
.bf-account-content label {
	font-weight: 600;
	color: var(--bf-dark);
	font-size: 0.9rem;
}
.bf-account-content input[type="text"],
.bf-account-content input[type="email"],
.bf-account-content input[type="password"],
.bf-account-content input[type="tel"],
.bf-account-content input[type="url"],
.bf-account-content input[type="number"],
.bf-account-content select,
.bf-account-content textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-sm);
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--bf-dark);
	background: #fff;
	transition: border-color var(--bf-t-fast), box-shadow var(--bf-t-fast);
	box-sizing: border-box;
}
.bf-account-content input:focus,
.bf-account-content select:focus,
.bf-account-content textarea:focus {
	outline: none;
	border-color: var(--bf-primary);
	box-shadow: 0 0 0 3px rgba(10, 95, 74, 0.12);
}
.bf-account-content button,
.bf-account-content .button,
.bf-account-content input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bf-sp-2);
	padding: 12px 22px;
	border-radius: var(--bf-radius);
	border: 1px solid transparent;
	background: var(--bf-primary);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	transition: background var(--bf-t);
	line-height: 1;
}
.bf-account-content button:hover,
.bf-account-content .button:hover,
.bf-account-content input[type="submit"]:hover { background: var(--bf-primary-dark); color: #fff; }

/* Tableau des commandes */
.bf-account-content .woocommerce-orders-table,
.bf-account-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--bf-sp-3);
}
.bf-account-content .woocommerce-orders-table th,
.bf-account-content table.shop_table th {
	background: var(--bf-cream);
	color: var(--bf-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 12px;
	text-align: left;
	border-bottom: 1px solid var(--bf-border);
	font-weight: 700;
}
.bf-account-content .woocommerce-orders-table td,
.bf-account-content table.shop_table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--bf-border);
	vertical-align: middle;
	font-size: 0.94rem;
}
.bf-account-content .woocommerce-orders-table tbody tr:hover,
.bf-account-content table.shop_table tbody tr:hover { background: var(--bf-cream); }
.bf-account-content .woocommerce-orders-table .button,
.bf-account-content table.shop_table .button {
	padding: 6px 12px;
	font-size: 0.85rem;
	border-radius: var(--bf-radius-sm);
}

/* Notice WC (login réussi, erreurs, etc.) */
.bf-account-content .woocommerce-message,
.bf-account-content .woocommerce-info,
.bf-account-content .woocommerce-error {
	border-radius: var(--bf-radius);
	padding: 14px 18px;
	margin-bottom: var(--bf-sp-4);
	list-style: none;
	font-size: 0.94rem;
}
.bf-account-content .woocommerce-message { background: #e6f7e9; border-left: 4px solid #1e6b2b; color: #1e6b2b; }
.bf-account-content .woocommerce-info    { background: var(--bf-primary-tint); border-left: 4px solid var(--bf-primary); color: var(--bf-primary-dark); }
.bf-account-content .woocommerce-error   { background: #fde8e8; border-left: 4px solid var(--bf-danger); color: var(--bf-danger); }

/* Login / register (page non connectée) — wrap centré.
   NB: quand user est déconnecté, WC saute my-account.php et rend directement form-login.php.
   Quand woocommerce_enable_myaccount_registration=no, même le div #customer_login est absent —
   il ne reste QUE le <form class="woocommerce-form-login"> au flow. On style les deux cas. */
.woocommerce-account:not(.logged-in) .bf-account-layout { grid-template-columns: 1fr; max-width: 920px; margin: 0 auto; }
.woocommerce-account:not(.logged-in) .bf-account-nav { display: none; }

/* Fallback si l'inscription est désactivée : le form login est au flow, on lui donne la card
   et le wrap centré directement. Le sélecteur cible le form UNIQUEMENT s'il n'est pas dans
   #customer_login (pour ne pas double-styler). */
body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-form-login,
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce-form-login {
	display: block;
	max-width: 460px;
	margin: 40px auto;
	padding: 28px 24px;
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	box-sizing: border-box;
}

/* Si register EST activé : par défaut layout 2 colonnes (fallback sans JS).
   Avec JS actif (classe .bf-account-tabs-ready ajoutée par site.js), les deux forms deviennent
   des onglets et un seul est visible à la fois, contrôlé par data-bf-account-view.
   !important nécessaire car WC applique .col2-set { width:100% } et Astra peut aussi override display. */
#customer_login {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 24px !important;
	margin: 40px auto !important;
	max-width: 920px !important;
	padding: 0 16px !important;
	box-sizing: border-box;
	float: none !important;
	width: auto !important;
}
#customer_login::before,
#customer_login::after { display: none !important; }
#customer_login > .col-1,
#customer_login > .col-2 {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	padding: 28px 24px;
	max-width: none !important;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
/* Neutralise le border WC natif (.woocommerce form.login/register) qui créait un cadre
   intermédiaire à l'intérieur de la carte .col-1/.col-2 (double border visible). */
#customer_login form.woocommerce-form-login,
#customer_login form.woocommerce-form-register,
body.woocommerce-account:not(.logged-in) .woocommerce form.woocommerce-form-login,
body.woocommerce-account:not(.logged-in) .woocommerce form.woocommerce-form-register {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
}
#customer_login h2 {
	display: block !important;
	visibility: visible !important;
	margin: 0 0 18px !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid var(--bf-border);
	font-size: 0.95rem !important;
	line-height: 1.2 !important;
	color: var(--bf-dark) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* Sur la page login stand-alone, cache aussi le h2 redondant */
body.woocommerce-account:not(.logged-in) .woocommerce > h2:first-child,
body.woocommerce-account:not(.logged-in) .entry-content > h2:first-of-type { display: none; }
@media (max-width: 720px) {
	#customer_login { grid-template-columns: 1fr; gap: 16px; }
	#customer_login > .col-1,
	#customer_login > .col-2 { padding: 22px 18px; }
}

/* Mode onglets (JS actif) : une seule colonne centrée, un seul form visible à la fois */
#customer_login.bf-account-tabs-ready {
	grid-template-columns: 1fr !important;
	max-width: 460px !important;
}
#customer_login.bf-account-tabs-ready[data-bf-account-view="login"] > .col-2,
#customer_login.bf-account-tabs-ready[data-bf-account-view="register"] > .col-1 {
	display: none !important;
}

/* Champs de formulaire — style unifié Bonferrage */
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 14px;
	padding: 0;
}
.woocommerce-form-login label,
.woocommerce-form-register label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--bf-dark);
	margin: 0;
}
.woocommerce-form-login input.input-text,
.woocommerce-form-register input.input-text {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	font-size: 0.95rem;
	background: #fff;
	color: var(--bf-dark);
	transition: border-color var(--bf-t-fast), box-shadow var(--bf-t-fast);
	box-sizing: border-box;
}
.woocommerce-form-login input.input-text:focus,
.woocommerce-form-register input.input-text:focus {
	outline: 0;
	border-color: var(--bf-primary);
	box-shadow: 0 0 0 3px var(--bf-primary-tint);
}

/* Checkbox "Se souvenir de moi" */
.woocommerce-form-login__rememberme {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	color: var(--bf-dark);
	margin-bottom: 14px;
}
.woocommerce-form-login__rememberme input { margin: 0; }

/* Boutons — !important pour battre les styles par défaut de WC + du parent Astra */
.woocommerce-form-login button.woocommerce-form-login__submit,
.woocommerce-form-register button.woocommerce-form-register__submit {
	width: 100% !important;
	padding: 12px 20px !important;
	background: var(--bf-primary) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--bf-radius) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background var(--bf-t-fast), transform 0.1s;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.woocommerce-form-login button.woocommerce-form-login__submit:hover,
.woocommerce-form-register button.woocommerce-form-register__submit:hover {
	background: var(--bf-primary-dark) !important;
	transform: translateY(-1px);
}

/* Liens de bascule login ↔ register (hooks woocommerce_login_form_end / woocommerce_register_form_end).
   Overrides !important pour battre les styles .button d'Astra qui peuvent styliser tout <a>
   à l'intérieur d'un form WC comme un bouton (padding, background, border, uppercase). */
.bf-goto-register,
.bf-goto-login {
	margin: 12px 0 0 !important;
	text-align: center;
	font-size: 0.9rem;
	color: var(--bf-muted);
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}
.bf-goto-register a,
.bf-goto-login a {
	display: inline !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--bf-primary) !important;
	font-weight: 600 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	text-transform: none !important;
	letter-spacing: normal !important;
	border-radius: 0 !important;
	cursor: pointer;
	width: auto !important;
	min-width: 0 !important;
}
.bf-goto-register a:hover,
.bf-goto-login a:hover { color: var(--bf-primary-dark) !important; background: transparent !important; }

/* Lien mot de passe oublié */
.woocommerce-LostPassword {
	margin: 12px 0 0;
	text-align: center;
	font-size: 0.9rem;
}
.woocommerce-LostPassword a {
	color: var(--bf-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.woocommerce-LostPassword a:hover { color: var(--bf-primary-dark); }

/* Notice info dans le formulaire register (mot de passe par email).
   Exclut .bf-goto-login (lien texte de bascule vers login) qui est aussi un <p> sans .form-row. */
.woocommerce-form-register > p:not(.form-row):not(.woocommerce-form-row):not(.bf-goto-login) {
	background: var(--bf-primary-tint);
	color: var(--bf-primary);
	padding: 10px 12px;
	border-radius: var(--bf-radius);
	font-size: 0.85rem;
	margin: 0 0 14px;
}

/* Dashboard cards */
.bf-account-dashboard-hello {
	display: flex;
	align-items: center;
	gap: var(--bf-sp-4);
	background: linear-gradient(135deg, var(--bf-sand) 0%, var(--bf-cream) 100%);
	padding: var(--bf-sp-5);
	border-radius: var(--bf-radius);
	margin-bottom: var(--bf-sp-5);
	border: 1px solid var(--bf-border);
}
.bf-account-dashboard-hello h2 { margin: 0; border-bottom: 0; padding-bottom: 0; font-size: 1.4rem; }
.bf-account-dashboard-hello p { margin: 4px 0 0; color: var(--bf-muted); }

.bf-account-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--bf-sp-3);
	margin-bottom: var(--bf-sp-5);
}
.bf-account-stat {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	padding: var(--bf-sp-4);
}
.bf-account-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--bf-primary); line-height: 1.1; font-variant-numeric: tabular-nums; }
.bf-account-stat-label { font-size: 0.85rem; color: var(--bf-muted); margin-top: 4px; }

/* Sous-section : dernière commande */
.bf-account-latest {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	padding: var(--bf-sp-5);
	margin-bottom: var(--bf-sp-5);
}
.bf-account-latest-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--bf-sp-4);
	flex-wrap: wrap;
	gap: var(--bf-sp-3);
}
.bf-account-latest-head h3 { margin: 0; font-size: 1.05rem; }
.bf-account-latest-head a { color: var(--bf-primary); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.bf-account-latest-head a:hover { text-decoration: underline; }

/* Mini timeline horizontale — utilisée dans orders list ET dashboard */
.bf-batch-mini-timeline {
	display: flex;
	gap: 4px;
	margin-top: 8px;
}
.bf-batch-mini-timeline > .step {
	flex: 1;
	height: 6px;
	background: #e5e7eb;
	border-radius: 3px;
	position: relative;
	transition: background var(--bf-t);
}
.bf-batch-mini-timeline > .step.is-done  { background: var(--bf-primary); }
.bf-batch-mini-timeline > .step.is-current {
	background: var(--bf-accent);
	animation: bfPulseStep 1.6s ease-in-out infinite;
}
@keyframes bfPulseStep {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}
.bf-batch-mini-legend {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var(--bf-muted);
	margin-top: 6px;
	gap: 8px;
	flex-wrap: wrap;
}
.bf-batch-mini-legend .current { color: var(--bf-primary); font-weight: 700; }

/* Cards commande dans /my-account/orders */
.bf-account-orders-list { display: flex; flex-direction: column; gap: var(--bf-sp-4); }
.bf-order-card {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	padding: var(--bf-sp-4) var(--bf-sp-5);
	transition: border-color var(--bf-t-fast), box-shadow var(--bf-t-fast);
}
.bf-order-card:hover { border-color: var(--bf-border-strong); box-shadow: var(--bf-shadow-sm); }
.bf-order-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--bf-sp-3);
	flex-wrap: wrap;
	margin-bottom: var(--bf-sp-3);
}
.bf-order-card-num {
	font-weight: 700;
	color: var(--bf-dark);
	text-decoration: none;
	font-size: 1.05rem;
	margin-right: 10px;
}
.bf-order-card-num:hover { color: var(--bf-primary); text-decoration: underline; }
.bf-order-card-date { color: var(--bf-muted); font-size: 0.85rem; }
.bf-order-card-status {
	padding: 4px 12px;
	border-radius: var(--bf-radius-pill);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: #e5e7eb;
	color: #4b5563;
}
.bf-order-card-status--processing,
.bf-order-card-status--on-hold,
.bf-order-card-status--bf-in-batch { background: #dbeafe; color: #1e40af; }
.bf-order-card-status--bf-shipped-cn { background: #e0e7ff; color: #3730a3; }
.bf-order-card-status--bf-arrived-fr { background: #ede9fe; color: #5b21b6; }
.bf-order-card-status--completed { background: #d1fae5; color: #065f46; }
.bf-order-card-status--cancelled,
.bf-order-card-status--failed,
.bf-order-card-status--refunded { background: #fee2e2; color: #991b1b; }

.bf-order-card-batch { margin: var(--bf-sp-3) 0; padding: var(--bf-sp-3) 0; border-top: 1px dashed var(--bf-border); border-bottom: 1px dashed var(--bf-border); }
.bf-order-card-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--bf-sp-3);
	flex-wrap: wrap;
	margin-top: var(--bf-sp-3);
}
.bf-order-card-meta { display: flex; align-items: baseline; gap: var(--bf-sp-3); flex-wrap: wrap; }
.bf-order-card-total { font-weight: 800; color: var(--bf-primary); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.bf-order-card-items { color: var(--bf-muted); font-size: 0.88rem; }
.bf-order-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.bf-btn-sm { padding: 8px 14px; font-size: 0.85rem; }

/* ------------------ My Account : batch de ma commande ------------------ */
.bf-account-batch {
	background: var(--bf-bg-soft);
	border-radius: var(--bf-radius);
	padding: 20px 24px;
	margin: 20px 0;
}
.bf-account-batch h3 { margin-top: 0; }

/* ------------------ Cookie banner ------------------ */
.bf-cookie-banner {
	position: fixed;
	bottom: 20px;
	left: 20px;
	right: 20px;
	max-width: 720px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	padding: 20px 24px;
	z-index: 9999;
	display: none;
}
.bf-cookie-banner.active { display: block; }
.bf-cookie-banner p { margin: 0 0 12px; font-size: 0.95rem; }
.bf-cookie-banner .bf-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bf-cookie-banner button {
	border: none;
	padding: 8px 18px;
	border-radius: 6px;
	font-size: 0.9rem;
	cursor: pointer;
	font-weight: 600;
}
.bf-cookie-accept { background: var(--bf-primary); color: #fff; }
.bf-cookie-decline { background: #f0f0f0; color: #333; }

/* ============================================================
   Bulk add-to-cart grid
   Desktop = table classique
   Mobile  = cards + footer sticky
   ============================================================ */

.bf-bulk-add {
	margin: 24px 0;
}

/* -------- Table wrap -------- */
.bf-bulk-table-wrap {
	margin-bottom: 20px;
	border: 1px solid var(--bf-border);
	border-radius: 10px;
	background: #fff;
	overflow: hidden; /* clip les rows internes pour que les coins arrondis soient nets */
}
.bf-bulk-table-wrap.bf-bulk-scrollable {
	max-height: 520px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--bf-border) transparent;
}
.bf-bulk-table-wrap.bf-bulk-scrollable::-webkit-scrollbar { width: 8px; }
.bf-bulk-table-wrap.bf-bulk-scrollable::-webkit-scrollbar-track { background: transparent; }
.bf-bulk-table-wrap.bf-bulk-scrollable::-webkit-scrollbar-thumb {
	background: var(--bf-border);
	border-radius: 4px;
}
.bf-bulk-table-wrap.bf-bulk-scrollable::-webkit-scrollbar-thumb:hover { background: var(--bf-muted); }

/* -------- Cards en grille (desktop et mobile) -------- */
/* On casse la sémantique table (display:block partout) pour faire un CSS Grid de cards.
   Le HTML sous-jacent reste une table pour le fallback / accessibilité. */
.bf-bulk-table,
.bf-bulk-table thead,
.bf-bulk-table tbody,
.bf-bulk-table tr,
.bf-bulk-table td { display: block; }
.bf-bulk-table thead { display: none; } /* pas de header en mode cards */
/* Reset tables browser defaults qui peuvent fantômer une border sur les côtés du wrap */
.bf-bulk-table {
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	width: 100%;
}
.bf-bulk-table tbody { border: 0; background: transparent; }

.bf-bulk-table tbody {
	display: block;
	padding: 0;
}

.bf-bulk-table tbody tr {
	background: #fff;
	border: 0;
	border-bottom: 1px solid var(--bf-border);
	border-radius: 0;
	padding: 14px 16px;
	display: grid;
	grid-template-columns: 72px 1fr auto;
	grid-template-rows: auto auto auto;
	gap: 4px 14px;
	align-items: center;
	transition: background 0.12s;
}
.bf-bulk-table tbody tr:last-child { border-bottom: 0; }
.bf-bulk-table tbody tr:hover { background: #fafafa; }
.bf-bulk-table tbody tr.bf-bulk-row-active { background: #f0fdf4; }

.bf-bulk-table td {
	padding: 0;
	border: 0;
}

/* Image : occupe toutes les rows de la carte (colonne 1) */
.bf-bulk-col-img {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: start;
}
.bf-bulk-col-img img,
.bf-bulk-noimg {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.bf-bulk-noimg {
	background: #f0f0f0;
	color: #b0b0b0;
	text-align: center;
	line-height: 72px;
	font-size: 24px;
}
.bf-bulk-img-btn {
	background: none;
	border: 2px solid transparent;
	padding: 0;
	border-radius: 10px;
	cursor: zoom-in;
	transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.bf-bulk-img-btn:hover {
	border-color: var(--bf-primary);
	transform: scale(1.06);
	box-shadow: 0 4px 12px rgba(10, 95, 74, 0.15);
}
.bf-bulk-img-btn:focus-visible {
	outline: 2px solid var(--bf-accent);
	outline-offset: 2px;
}

/* Nom (row 1, cols 2-3) */
.bf-bulk-col-name {
	grid-column: 2 / -1;
	grid-row: 1;
	font-weight: 600;
	color: var(--bf-dark);
	font-size: 0.98rem;
	line-height: 1.3;
	word-break: break-word;
}
.bf-bulk-row-active .bf-bulk-col-name { color: var(--bf-primary); }

/* Prix (row 2, cols 2-3) */
.bf-bulk-col-price {
	grid-column: 2 / -1;
	grid-row: 2;
	color: var(--bf-muted);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.bf-bulk-col-price::before {
	content: 'Prix : ';
	color: #9ca3af;
}

/* Ligne inférieure : Qté (col 2) + sous-total (col 3), même row */
.bf-bulk-col-qty {
	grid-column: 2;
	grid-row: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}
.bf-bulk-col-qty::before {
	content: 'Qté';
	color: var(--bf-muted);
	font-size: 0.85rem;
	font-weight: 500;
}
.bf-bulk-col-qty input.bf-bulk-qty {
	width: 82px;
	padding: 8px 12px;
	border: 1px solid var(--bf-border);
	border-radius: 8px;
	text-align: center;
	font-size: 1rem;
	font-weight: 600;
	color: var(--bf-dark);
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.bf-bulk-col-qty input.bf-bulk-qty:focus {
	outline: none;
	border-color: var(--bf-primary);
	box-shadow: 0 0 0 3px rgba(10, 95, 74, 0.1);
}

.bf-bulk-col-subtotal {
	grid-column: 3;
	grid-row: 3;
	justify-self: end;
	align-self: center;
	margin-top: 6px;
	text-align: right;
	font-weight: 700;
	color: var(--bf-dark);
	font-variant-numeric: tabular-nums;
	font-size: 1rem;
	white-space: nowrap;
}
.bf-bulk-row-subtotal[data-empty="true"] { color: #d1d5db; }

/* -------- Summary bar -------- */
.bf-bulk-summary {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	background: var(--bf-bg-soft);
	padding: 18px 22px;
	border-radius: 10px;
}
.bf-bulk-progress-wrap { width: 100%; min-width: 0; }
.bf-bulk-progress-bar {
	background: #e5e7eb;
	border-radius: 999px;
	overflow: hidden;
	height: 12px;
	margin-bottom: 8px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.bf-bulk-progress-fill {
	background: linear-gradient(90deg, var(--bf-primary), var(--bf-accent));
	height: 100%;
	transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 999px;
}
.bf-bulk-progress-label {
	font-size: 0.95rem;
	color: var(--bf-muted);
	font-variant-numeric: tabular-nums;
}
.bf-bulk-total-label { font-weight: 800; color: var(--bf-primary); }

.bf-bulk-add-btn {
	width: 100%;
	background: var(--bf-primary);
	color: #fff;
	border: 0;
	padding: 14px 26px;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
	box-shadow: 0 2px 6px rgba(10, 95, 74, 0.25);
}
.bf-bulk-add-btn:hover:not(:disabled) {
	background: #0d7a5f;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(10, 95, 74, 0.35);
}
.bf-bulk-add-btn:active:not(:disabled) { transform: translateY(0); }
.bf-bulk-add-btn:disabled {
	background: #d1d5db;
	color: #6b7280;
	cursor: not-allowed;
	box-shadow: none;
}

.bf-bulk-status {
	margin-top: 14px;
	font-size: 0.95rem;
	min-height: 1.4em;
	text-align: center;
}
.bf-bulk-status a {
	color: var(--bf-primary);
	font-weight: 700;
	text-decoration: underline;
}

/* ============================================================
   Mobile (<= 720px) — 1 seule colonne + footer sticky
   ============================================================ */

@media (max-width: 900px) {
	.bf-bulk-add { margin: 16px 12px; }

	.bf-bulk-table-wrap {
		margin-bottom: 140px; /* espace pour le footer sticky */
	}
	.bf-bulk-table-wrap.bf-bulk-scrollable { max-height: none; overflow: hidden; }

	.bf-bulk-col-qty input.bf-bulk-qty {
		width: 90px;
		padding: 10px 12px;
		font-size: 1.05rem;
	}

	/* Footer sticky : progress + button en bas de l'écran, avec marge sur les côtés */
	.bf-bulk-summary {
		position: fixed;
		bottom: 12px;
		left: 12px;
		right: 12px;
		z-index: 500;
		background: #fff;
		border: 1px solid var(--bf-border);
		border-radius: 10px;
		padding: 12px 14px;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
	}
	.bf-bulk-progress-bar { height: 10px; margin-bottom: 4px; }
	.bf-bulk-progress-label { font-size: 0.85rem; text-align: center; }
	.bf-bulk-add-btn {
		padding: 14px 20px;
		font-size: 1rem;
		width: 100%;
	}
	.bf-bulk-status {
		position: fixed;
		bottom: 130px;
		left: 12px;
		right: 12px;
		background: #fff;
		border: 1px solid var(--bf-border);
		border-radius: 8px;
		padding: 10px 14px;
		margin: 0;
		box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		z-index: 499;
	}
	.bf-bulk-status:empty { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.bf-footer {
	background: var(--bf-primary-dark);
	color: rgba(255,255,255,0.75);
	padding: var(--bf-sp-10) var(--bf-sp-4) var(--bf-sp-5);
	margin-top: var(--bf-sp-10);
}
.bf-footer-inner {
	max-width: var(--bf-container);
	margin: 0 auto;
}
.bf-footer-cols {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: var(--bf-sp-8);
	padding-bottom: var(--bf-sp-8);
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.bf-footer-brand h5 {
	color: #fff;
	font-size: 1.2rem;
	margin: 0 0 var(--bf-sp-3);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
}
.bf-footer-brand h5 svg { width: 24px; height: 24px; color: var(--bf-accent); }
.bf-footer-brand p {
	font-size: 0.92rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.7);
	max-width: 340px;
	margin: 0 0 var(--bf-sp-4);
}
.bf-footer-socials { display: inline-flex; gap: var(--bf-sp-2); }
.bf-footer-socials a {
	width: 36px;
	height: 36px;
	border-radius: var(--bf-radius-sm);
	background: rgba(255,255,255,0.08);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--bf-t-fast);
	text-decoration: none;
}
.bf-footer-socials a:hover { background: var(--bf-accent); color: var(--bf-dark); text-decoration: none; }
.bf-footer-socials svg { width: 18px; height: 18px; }

.bf-footer-col h5 {
	color: #fff;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 var(--bf-sp-4);
	font-weight: 700;
}
.bf-footer-col ul { list-style: none; padding: 0; margin: 0; }
.bf-footer-col li { margin-bottom: 8px; }
.bf-footer-col a {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	font-size: 0.93rem;
	transition: color var(--bf-t-fast);
}
.bf-footer-col a:hover { color: var(--bf-accent); text-decoration: none; }

.bf-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bf-sp-3);
	padding-top: var(--bf-sp-5);
	font-size: 0.85rem;
	color: rgba(255,255,255,0.5);
}
.bf-footer-bottom-links { display: flex; gap: var(--bf-sp-4); flex-wrap: wrap; }
.bf-footer-bottom-links a { color: rgba(255,255,255,0.6); text-decoration: none; }
.bf-footer-bottom-links a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   ARCHIVE / SHOP
   ============================================================ */
.bf-shop {
	max-width: var(--bf-container);
	margin: 0 auto;
	padding: var(--bf-sp-6) var(--bf-sp-4);
}
.bf-shop-header {
	background: linear-gradient(135deg, var(--bf-sand) 0%, var(--bf-cream) 100%);
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-6) var(--bf-sp-6);
	margin-bottom: var(--bf-sp-6);
	border: 1px solid var(--bf-border);
}
/* Mobile : masque le fil d'Ariane (économie de place verticale, surtout sur produits à nom long) */
@media (max-width: 768px) {
	.bf-breadcrumbs,
	.woocommerce-breadcrumb {
		display: none !important;
	}
}
.bf-breadcrumbs {
	font-size: 0.85rem;
	color: var(--bf-muted);
	margin-bottom: var(--bf-sp-3);
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.bf-breadcrumbs a { color: var(--bf-muted); text-decoration: none; }
.bf-breadcrumbs a:hover { color: var(--bf-primary); text-decoration: underline; }
.bf-breadcrumbs .sep { opacity: 0.5; }
.bf-shop-header h1 {
	margin: 0 0 var(--bf-sp-2);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	color: var(--bf-dark);
}
.bf-shop-header p {
	margin: 0;
	color: var(--bf-muted);
	max-width: 720px;
	line-height: 1.6;
}

.bf-shop-layout {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: var(--bf-sp-6);
	align-items: start;
}
.bf-shop-main { min-width: 0; }

/* Row Expédition dans le récap commande : empile dt (label) au-dessus, dd (méthodes +
   adresse point relais + choix de PR) en full width dessous. Sinon la row.flex met tout
   sur une ligne et le contenu déborde en inline chaotique. */
.bf-cart-totals-list .shipping-row {
	flex-direction: column;
	align-items: stretch;
}
.bf-cart-totals-list .shipping-row dt {
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--bf-dark);
}
.bf-cart-totals-list .shipping-row dd {
	text-align: left;
	font-weight: 500;
}
.bf-cart-totals-list .shipping-row ul.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bf-cart-totals-list .shipping-row ul.woocommerce-shipping-methods li {
	margin: 4px 0;
}

/* Astra ajoute text-indent:-22px + padding:0.25em 0 0.25em 22px sur ul#shipping_method li
   (héritage de la mise en forme classique WC pour les radios). Ça casse le rendu Boxtal
   qui injecte son bloc point relais en flow, avec un décalage visuel. On neutralise. */
ul#shipping_method li {
	text-indent: 0 !important;
	padding: 0 !important;
}
.bf-cart-totals-list .shipping-row .woocommerce-shipping-destination {
	margin: 8px 0 0;
	font-size: 0.85rem;
	color: var(--bf-muted);
}

/* Padding conteneur pour les pages WC qui n'ont pas leur propre wrapper .bf-shop.
   Cart exclu ici : le .bf-cart-layout gère son propre padding/max-width en autonomie. */
body.single-product .site-main,
body.single-product #primary,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout #primary,
body.woocommerce-account .site-main,
body.woocommerce-account #primary {
	max-width: var(--bf-container);
	margin: 0 auto;
	padding: var(--bf-sp-6) var(--bf-sp-4);
	box-sizing: border-box;
}
/* Astra parent nest parfois main dans primary — évite le double-padding */
body.single-product #primary .site-main,
body.woocommerce-cart #primary .site-main,
body.woocommerce-checkout #primary .site-main,
body.woocommerce-account #primary .site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Mobile : force padding horizontal 16px sur #primary (wrapper principal Astra page.php).
   Cart exclu car .bf-cart-layout gère son propre padding. */
@media (max-width: 768px) {
	body.single-product #primary,
	body.woocommerce-checkout #primary,
	body.woocommerce-account #primary,
	body.archive.woocommerce #primary {
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box;
	}
}
/* Sidebar : collapsable via <details> sur mobile, toujours ouverte sur desktop */
.bf-sidebar-collapse > summary {
	display: none; /* caché sur desktop, la sidebar est toujours ouverte */
	list-style: none;
}
.bf-sidebar-collapse > summary::-webkit-details-marker { display: none; }
.bf-sidebar-collapse > .bf-sidebar-collapse-content {
	display: block; /* forcé sur desktop même si <details> pas ouvert */
}
@media (max-width: 980px) {
	.bf-sidebar-collapse > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		padding: 12px 14px;
		background: var(--bf-primary-tint);
		border-radius: var(--bf-radius);
		font-weight: 700;
		color: var(--bf-primary);
		user-select: none;
	}
	.bf-sidebar-collapse[open] > summary { margin-bottom: 14px; }
	.bf-sidebar-collapse[open] > summary .bf-sidebar-toggle-caret { transform: rotate(180deg); }
	.bf-sidebar-toggle-caret { transition: transform 0.2s; }
	/* Quand <details> n'est pas open, cache le contenu (comportement natif) */
	.bf-sidebar-collapse:not([open]) > .bf-sidebar-collapse-content {
		display: none;
	}
}

.bf-shop-sidebar {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-5);
	position: sticky;
	top: calc(var(--bf-topbar-h) + var(--bf-header-h) + var(--bf-sp-4));
}
.bf-shop-sidebar h4 {
	margin: 0 0 var(--bf-sp-3);
	font-size: 0.78rem;
	color: var(--bf-primary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}
.bf-shop-sidebar h4:not(:first-child) { margin-top: var(--bf-sp-5); padding-top: var(--bf-sp-4); border-top: 1px solid var(--bf-border); }
.bf-shop-sidebar ul { list-style: none; padding: 0; margin: 0; }
.bf-shop-sidebar li { margin-bottom: 2px; }
.bf-shop-sidebar details > ul { margin: 4px 0 8px var(--bf-sp-4); padding-left: var(--bf-sp-2); border-left: 1px solid var(--bf-border); }
.bf-shop-sidebar .bf-cat-row {
	color: var(--bf-dark);
	text-decoration: none;
	font-size: 0.92rem;
	padding: 6px 8px;
	border-radius: var(--bf-radius-sm);
	display: flex;
	align-items: center;
	gap: 12px;
	transition: background var(--bf-t-fast), color var(--bf-t-fast);
	cursor: pointer;
	list-style: none;
}
.bf-shop-sidebar .bf-cat-row .bf-cat-name,
.bf-shop-sidebar .bf-cat-row .bf-cat-name-link { flex: 1; min-width: 0; }
.bf-shop-sidebar .bf-cat-name-link {
	color: inherit;
	text-decoration: none;
}
.bf-shop-sidebar .bf-cat-name-link:hover {
	color: var(--bf-primary);
	text-decoration: underline;
}
.bf-shop-sidebar .bf-cat-row:hover { background: var(--bf-sand); color: var(--bf-primary); text-decoration: none; }
.bf-shop-sidebar .bf-cat-row.is-current { background: var(--bf-primary-tint); color: var(--bf-primary); font-weight: 700; }
.bf-shop-sidebar .bf-cat-count { color: var(--bf-muted); font-size: 0.78rem; flex-shrink: 0; }
.bf-shop-sidebar .bf-cat-viewall { font-style: italic; opacity: 0.85; font-size: 0.87rem; }

/* Chevron caret pour les <details> */
.bf-shop-sidebar summary { list-style: none; }
.bf-shop-sidebar summary::-webkit-details-marker { display: none; }
.bf-cat-caret {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	position: relative;
	transition: transform var(--bf-t-fast);
	color: var(--bf-muted);
}
.bf-cat-caret::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--bf-t-fast);
}
.bf-shop-sidebar details[open] > summary .bf-cat-caret::before { transform: rotate(45deg); top: 0; }

/* Recherche par tag */
.bf-tag-search { margin-top: var(--bf-sp-3); position: relative; }
.bf-tag-search-input-wrap { position: relative; }
.bf-tag-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bf-muted);
	display: flex;
	pointer-events: none;
}
.bf-tag-search-input {
	width: 100%;
	padding: 8px 12px 8px 40px !important;
	border: 1px solid var(--bf-border) !important;
	border-radius: var(--bf-radius-sm);
	background: #fff !important;
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--bf-dark);
	box-sizing: border-box;
	transition: border-color var(--bf-t-fast), box-shadow var(--bf-t-fast);
}
.bf-tag-search-input:focus {
	outline: none;
	border-color: var(--bf-primary);
	box-shadow: 0 0 0 3px rgba(10, 95, 74, 0.12);
}
.bf-tag-search-hint {
	margin: 6px 0 0;
	font-size: 0.75rem;
	color: var(--bf-muted);
	font-style: italic;
}
.bf-tag-search-results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius-sm);
	box-shadow: var(--bf-shadow-md);
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 50;
	padding: 4px 0;
}
.bf-tag-search-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	text-decoration: none;
	color: var(--bf-dark);
	font-size: 0.9rem;
	cursor: pointer;
	transition: background var(--bf-t-fast);
}
.bf-tag-search-item:hover,
.bf-tag-search-item.is-active {
	background: var(--bf-sand);
	color: var(--bf-primary);
	text-decoration: none;
}
.bf-tag-search-item mark { background: rgba(245, 166, 35, 0.35); color: inherit; padding: 0 1px; border-radius: 2px; }
.bf-tag-search-item-count { color: var(--bf-muted); font-size: 0.75rem; flex-shrink: 0; margin-left: 8px; }
.bf-tag-search-empty {
	padding: 12px;
	text-align: center;
	color: var(--bf-muted);
	font-size: 0.85rem;
}

/* Toolbar (tri + count + view toggle) */
.bf-shop-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--bf-sp-3);
	padding-bottom: var(--bf-sp-4);
	margin-bottom: var(--bf-sp-4);
	border-bottom: 1px solid var(--bf-border);
	flex-wrap: wrap;
}
.bf-result-count { color: var(--bf-muted); font-size: 0.9rem; }
/* Reset marges par défaut des <p> WC natifs qui cassent l'alignement vertical de la toolbar */
.bf-shop-toolbar p,
.bf-shop-toolbar .woocommerce-result-count,
.bf-shop-toolbar .woocommerce-ordering { margin: 0; }
.bf-shop-toolbar .bf-result-count > * { margin: 0; }
/* Ciblage renforcé : WC natif utilise .woocommerce .woocommerce-ordering select (spéc. 0,2,1)
   ce qui écrase un simple .bf-shop-toolbar select. On matche cette spécificité + le fallback. */
.bf-shop-toolbar select,
.bf-shop-toolbar .woocommerce-ordering select,
.bf-shop-sort select,
.woocommerce-ordering select {
	padding: 8px 34px 8px 14px !important;
	border: 1px solid var(--bf-border) !important;
	border-radius: var(--bf-radius-sm) !important;
	font-size: 0.9rem !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center / 14px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	cursor: pointer;
	color: var(--bf-dark) !important;
	font-family: inherit;
	height: auto;
	line-height: 1.4;
	box-shadow: none;
	max-width: 100%;
}

/* Grille produits */
.bf-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--bf-sp-4);
	margin: 0; /* neutralise Astra qui force ul { margin: 0 0 1.5em 3em } */
	padding: 0;
	list-style: none;
}
/* Mobile : force 2 colonnes (au lieu de laisser auto-fill retomber sur 1 sous 230px) */
@media (max-width: 600px) {
	.bf-product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}
.bf-product-grid > li {
	list-style: none;
	margin: 0 !important; /* neutralise Astra qui force margin: 0 0 1.5em 3em sur li.product */
	width: auto !important; /* neutralise Astra qui force li.product { width: calc(25% - 15px) } */
	float: none !important;
	clear: none !important;
}
.bf-product-card {
	background: #fff;
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-radius);
	overflow: hidden;
	transition: transform var(--bf-t), box-shadow var(--bf-t), border-color var(--bf-t);
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: var(--bf-dark);
}
.bf-product-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--bf-shadow-md);
	border-color: var(--bf-border-strong);
	text-decoration: none;
	color: var(--bf-dark);
}
.bf-product-card-img {
	aspect-ratio: 1 / 1;
	background: var(--bf-cream);
	position: relative;
	overflow: hidden;
}
.bf-product-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.bf-product-card:hover .bf-product-card-img img { transform: scale(1.05); }
.bf-product-card-body {
	padding: var(--bf-sp-3) var(--bf-sp-4) var(--bf-sp-4);
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.bf-product-card-cat {
	font-size: 0.72rem;
	color: var(--bf-primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}
.bf-product-card-title {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--bf-dark);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bf-product-card-price {
	margin-top: auto;
	padding-top: var(--bf-sp-2);
	color: var(--bf-primary);
	font-weight: 800;
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
}
.bf-product-card-price del { color: var(--bf-muted); font-weight: 500; font-size: 0.85rem; margin-right: 6px; }
.bf-product-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--bf-primary);
	color: #fff;
	padding: 4px 10px;
	border-radius: var(--bf-radius-pill);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.bf-product-card-badge--sale { background: var(--bf-accent); color: var(--bf-dark); }
.bf-product-card-badge--new { background: var(--bf-primary); }
.bf-product-card-oos {
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bf-muted);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
}

/* Pagination */
.bf-pagination {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: var(--bf-sp-8);
}
.bf-pagination a, .bf-pagination span {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--bf-radius-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bf-dark);
	text-decoration: none;
	font-weight: 600;
	background: #fff;
	border: 1px solid var(--bf-border);
	transition: background var(--bf-t-fast), border-color var(--bf-t-fast), color var(--bf-t-fast);
}
.bf-pagination a:hover { background: var(--bf-sand); border-color: var(--bf-border-strong); text-decoration: none; }
.bf-pagination .current { background: var(--bf-primary); color: #fff; border-color: var(--bf-primary); }
.bf-pagination .dots { border: 0; background: transparent; }

/* État vide */
.bf-empty {
	background: var(--bf-cream);
	border: 1px dashed var(--bf-border-strong);
	border-radius: var(--bf-radius-lg);
	padding: var(--bf-sp-10) var(--bf-sp-6);
	text-align: center;
	color: var(--bf-muted);
}
.bf-empty h3 { color: var(--bf-dark); margin: 0 0 var(--bf-sp-3); }
.bf-empty p { max-width: 460px; margin: 0 auto var(--bf-sp-5); line-height: 1.5; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
	.bf-shop-layout { grid-template-columns: 1fr; }
	.bf-shop-sidebar { position: static; }
	.bf-footer-cols { grid-template-columns: 1fr 1fr; gap: var(--bf-sp-6); }
}

@media (max-width: 860px) {
	.bf-nav { display: none; }
	.bf-header-utils .bf-icon-btn:not(.bf-cart-btn):not(.bf-burger) { display: none; }
	.bf-burger { display: inline-flex; }
	.bf-mega { display: none; }
}

@media (max-width: 640px) {
	.bf-hero { padding: var(--bf-sp-10) var(--bf-sp-4); }
	.bf-hero h1 { font-size: 1.9rem; }
	.bf-section { padding: var(--bf-sp-10) var(--bf-sp-4); }
	.bf-request-item { flex-direction: column; align-items: flex-start; }
	.bf-footer-cols { grid-template-columns: 1fr; }
	.bf-footer { padding-top: var(--bf-sp-8); }
	.bf-topbar-items { gap: var(--bf-sp-3); font-size: 0.8rem; }
	.bf-topbar-items .bf-topbar-item:not(:first-child) { display: none; }
}