/* =========================================================================
   Bijou Éclatant Custom — feuille de style principale
   Reconstruction fidèle du design "Bijou Éclatant - Éditorial".
   Palette, typographie, espacements et animations conservés à l'identique.
   ========================================================================= */

:root {
	--bg:          #fbf9f5; /* fond général */
	--ink:         #2b2622; /* brun foncé : texte, fonds sombres */
	--ink-90:      rgba(43, 38, 34, 0.9);
	--ink-55:      rgba(43, 38, 34, 0.55);
	--ink-16:      rgba(43, 38, 34, 0.16);
	--ink-08:      rgba(43, 38, 34, 0.08);
	--cream:       #fbf6f2; /* texte clair sur fond sombre */
	--rose:        #b76e79; /* accent principal (CTA) */
	--rose-dark:   #9c5563; /* hover CTA */
	--rose-light:  #e7b7be; /* accent secondaire */
	--gold:        #c9a86a; /* étoiles, accents */
	--surf-or:     #e4d2ac; /* fond carte collection or */
	--surf-argent: #d8dce0; /* fond carte collection argent */
	--surf-plaque: #e8d3be; /* fond carte collection plaqué */
	--surf-prod:   #f2ece4; /* fond carte produit */

	--maxw: 1280px;
	--font-serif: "Marcellus", Georgia, "Times New Roman", serif;
	--font-sans:  "Jost", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ----- Reset léger ----- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 300;
	color: var(--ink);
	background: var(--bg);
	overflow-x: hidden;
	line-height: 1.6;
}

img, image-slot, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--rose);
	outline-offset: 3px;
}

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 400;
	margin: 0;
}

button { font-family: inherit; }

.be-container { max-width: var(--maxw); margin: 0 auto; padding-left: 30px; padding-right: 30px; }

/* Image de remplacement neutre (tant qu'aucun visuel réel n'est défini) */
.be-imgph {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-serif);
	font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink-55);
	background:
		repeating-linear-gradient(45deg, rgba(43,38,34,0.03) 0 10px, transparent 10px 20px),
		var(--surf-prod);
	text-align: center; padding: 12px;
}
.be-cover { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   Bandeau d'annonce + en-tête
   ========================================================================= */
.be-topbar {
	background: var(--ink);
	color: var(--rose-light);
	text-align: center;
	font-size: 11.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	padding: 10px 16px;
}

.be-header {
	position: sticky; top: 0; z-index: 30;
	background: rgba(251, 249, 245, 0.86);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--ink-08);
}
.be-header__inner {
	max-width: var(--maxw); margin: 0 auto;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 26px;
	padding: 18px 30px;
}
.be-nav-wrap { display: flex; align-items: center; }
.be-nav-wrap--right { justify-content: flex-end; gap: 18px; }
.be-nav {
	display: flex; gap: 26px; align-items: center;
	font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
	flex: 1; margin: 0; padding: 0; list-style: none;
}
.be-nav--right { justify-content: flex-end; gap: 22px; }
.be-nav a { transition: color 0.2s; cursor: pointer; }
.be-nav a:hover { color: var(--rose); }

.be-brand {
	flex: 0 0 auto; text-align: center;
	font-family: var(--font-serif);
	font-size: 27px; letter-spacing: 0.16em; text-transform: uppercase;
	line-height: 1; color: var(--ink);
}
.be-brand a { color: inherit; }

.be-icons { display: flex; gap: 18px; align-items: center; }
.be-iconbtn { display: flex; align-items: center; gap: 6px; color: var(--ink); cursor: pointer; background: none; border: 0; padding: 0; }
.be-cartcount {
	min-width: 18px; height: 18px; padding: 0 5px;
	background: var(--rose); color: #fff; font-size: 11px;
	display: flex; align-items: center; justify-content: center;
}

/* Méga-menu (déroulant des collections) */
.be-mega { position: relative; }
.be-mega__item { position: relative; }
.be-mega__top { display: inline-flex; align-items: center; gap: 5px; }
.be-mega__top::after {
	content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-1px); opacity: 0.55; transition: transform 0.2s;
}
.be-mega__panel {
	position: absolute; top: calc(100% + 14px); left: 0; z-index: 40;
	min-width: 230px; background: var(--bg);
	border: 1px solid var(--ink-08); box-shadow: 0 18px 50px rgba(43,38,34,0.12);
	padding: 14px 18px; opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.be-mega__panel ul { list-style: none; margin: 0; padding: 0; }
.be-mega__panel li { margin: 0; }
.be-mega__panel a {
	display: block; padding: 9px 0; font-size: 12.5px; letter-spacing: 0.08em;
	text-transform: none; color: var(--ink-90); border-bottom: 1px solid var(--ink-08);
}
.be-mega__panel li:last-child a { border-bottom: 0; }
.be-mega__panel a:hover { color: var(--rose); padding-left: 6px; }
.be-mega__item:hover .be-mega__panel,
.be-mega__item:focus-within .be-mega__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.be-mega__item:hover .be-mega__top::after,
.be-mega__item:focus-within .be-mega__top::after { transform: rotate(-135deg) translateY(-1px); }

/* Sous-éléments en version mobile */
.be-submenu-item a { opacity: 0.7; font-size: 13px !important; padding-left: 14px !important; }

/* Menu mobile (burger) */
.be-burger { display: none; background: none; border: 0; cursor: pointer; color: var(--ink); padding: 6px; }
.be-mobile-nav { display: none; }

/* =========================================================================
   Hero
   ========================================================================= */
.be-hero {
	position: relative;
	height: min(90vh, 860px);
	min-height: 600px;
	overflow: hidden;
	background: var(--ink);
}
.be-herostage { position: absolute; inset: 0; overflow: hidden; }
.be-hero__media { position: absolute; inset: 0; animation: kenburns 26s ease-in-out infinite alternate; }
.be-hero__overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(95deg, rgba(20,15,13,0.66) 0%, rgba(20,15,13,0.34) 42%, rgba(20,15,13,0.05) 70%),
		linear-gradient(0deg, rgba(20,15,13,0.6), transparent 46%);
}
.be-hero__inner {
	position: relative; z-index: 2;
	max-width: var(--maxw); height: 100%; margin: 0 auto;
	padding: 0 30px 8px;
	display: flex; flex-direction: column; justify-content: flex-end;
}
.be-hero__content {
	max-width: 660px; padding-bottom: 74px; color: var(--cream);
	animation: revealUp 1s cubic-bezier(0.2,0.7,0.2,1) both;
}
.be-eyebrow {
	display: flex; align-items: center; gap: 16px;
	font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
	color: var(--rose-light); margin-bottom: 24px;
}
.be-eyebrow::before { content: ""; width: 42px; height: 1px; background: var(--rose-light); flex: 0 0 auto; }
.be-h1 {
	font-family: var(--font-serif); font-weight: 400;
	font-size: clamp(52px, 7.4vw, 104px); line-height: 0.97;
	letter-spacing: -0.005em; margin: 0;
}
.be-h1 em {
	font-style: italic;
	background: linear-gradient(90deg, var(--rose-light), #fff, #c58b96);
	background-size: 200% auto;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	animation: shimmer 6s linear infinite;
}
.be-hero__sub { font-size: 17.5px; line-height: 1.7; max-width: 470px; margin: 26px 0 0; opacity: 0.9; }
.be-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.be-scrollcue {
	position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	color: rgba(251,246,242,0.8);
}
.be-scrollcue span:first-child { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; }
.be-scrollcue__track { position: relative; width: 1px; height: 34px; background: rgba(251,246,242,0.3); overflow: hidden; }
.be-scrollcue__dot { position: absolute; top: 0; left: 0; width: 1px; height: 14px; background: var(--rose-light); animation: scrollcue 1.8s ease-in-out infinite; }

/* =========================================================================
   Boutons
   ========================================================================= */
.be-btn {
	display: inline-block; cursor: pointer; border: 0;
	font-size: 12.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
	padding: 17px 38px; transition: background 0.3s, transform 0.25s, color 0.3s, border-color 0.3s;
}
.be-btn--primary { color: #fff; background: var(--rose); }
.be-btn--primary:hover { background: var(--rose-dark); transform: translateY(-2px); }
.be-btn--ghost { color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.55); padding: 17px 32px; }
.be-btn--ghost:hover { background: rgba(255,255,255,0.18); border-color: #fff; }
.be-btn--dark { color: var(--ink); background: transparent; border: 1px solid var(--ink); }
.be-btn--dark:hover { background: var(--ink); color: #fff; }
.be-link-underline {
	cursor: pointer; font-size: 12.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
	background: transparent; border: 0; border-bottom: 1px solid var(--ink); padding: 0 0 5px;
	transition: color 0.25s, border-color 0.25s;
}
.be-link-underline:hover { color: var(--rose); border-color: var(--rose); }

/* =========================================================================
   Marquee (bandeau défilant)
   ========================================================================= */
.be-marquee { background: var(--ink); color: var(--rose-light); overflow: hidden; padding: 13px 0; }
.be-marquee__track {
	display: flex; gap: 50px; width: max-content;
	font-family: var(--font-serif); font-size: 19px; letter-spacing: 0.06em; white-space: nowrap; opacity: 0.92;
	animation: marquee 34s linear infinite;
}
.be-marquee__item { display: flex; align-items: center; gap: 50px; }
.be-marquee__sep { opacity: 0.55; }

/* =========================================================================
   En-têtes de section
   ========================================================================= */
.be-section { max-width: var(--maxw); margin: 0 auto; padding: 64px 30px 30px; }
.be-section--narrow { max-width: 1100px; }
.be-sec-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 20px; margin-bottom: 40px; flex-wrap: wrap;
	animation: revealUp 0.9s cubic-bezier(0.2,0.7,0.2,1) both;
}
.be-kicker { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rose); margin-bottom: 14px; }
.be-h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(38px, 5vw, 58px); line-height: 1; }
.be-sec-head p { font-size: 15.5px; line-height: 1.7; opacity: 0.7; max-width: 340px; margin: 0; }

/* =========================================================================
   Collections
   ========================================================================= */
.be-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; animation: revealUp 0.9s cubic-bezier(0.2,0.7,0.2,1) both; }
.be-cat { cursor: pointer; display: block; }
.be-cat__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.be-cat--or .be-cat__media { background: var(--surf-or); }
.be-cat--argent .be-cat__media { background: var(--surf-argent); }
.be-cat--plaque .be-cat__media { background: var(--surf-plaque); }
.be-cat__num { position: absolute; top: 16px; left: 16px; font-family: var(--font-serif); font-size: 15px; color: #fff; letter-spacing: 0.1em; mix-blend-mode: difference; }
.be-cat__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 2px 0; border-top: 1px solid var(--ink-16); margin-top: 16px; }
.be-cat__title { font-family: var(--font-serif); font-size: 25px; line-height: 1.05; }
.be-cat__sub { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.5; margin-top: 6px; }
.be-round {
	flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid rgba(43,38,34,0.25); border-radius: 50%;
	display: flex; align-items: center; justify-content: center; color: var(--ink);
	transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.be-cat:hover .be-round { background: var(--rose); border-color: var(--rose); color: #fff; }
.be-cat image-slot, .be-cat .be-cover { transition: transform 1.2s cubic-bezier(0.2,0.7,0.2,1); display: block; width: 100%; height: 100%; }
.be-cat:hover image-slot, .be-cat:hover .be-cover { transform: scale(1.07); }

/* =========================================================================
   Produits
   ========================================================================= */
.be-prodgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 18px; animation: revealUp 0.9s cubic-bezier(0.2,0.7,0.2,1) both; }
.be-prod { cursor: pointer; display: block; }
.be-prod__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surf-prod); }
.be-prod__media image-slot, .be-prod__media .be-cover { transition: transform 1.2s cubic-bezier(0.2,0.7,0.2,1); display: block; width: 100%; height: 100%; }
.be-prod:hover .be-prod__media image-slot, .be-prod:hover .be-prod__media .be-cover { transform: scale(1.07); }
.be-badge { position: absolute; top: 12px; left: 12px; background: var(--ink); color: #fff; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 9px; }
.be-fav {
	position: absolute; top: 11px; right: 11px; width: 32px; height: 32px;
	background: rgba(251,249,245,0.9); display: flex; align-items: center; justify-content: center;
	cursor: pointer; border: 0; transition: transform 0.25s;
}
.be-fav:hover { transform: scale(1.12); }
.be-qa {
	position: absolute; left: 12px; right: 12px; bottom: 12px; cursor: pointer;
	font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
	color: #fff; background: rgba(43,38,34,0.92); backdrop-filter: blur(4px); border: 0; padding: 13px 0;
	opacity: 0; transform: translateY(12px); transition: opacity 0.4s, transform 0.4s, background 0.25s;
}
.be-qa:hover { background: var(--rose); }
.be-prod:hover .be-qa, .be-prod:focus-within .be-qa { opacity: 1; transform: none; }
.be-prod__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 15px 0 0; }
.be-prod__cat { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; }
.be-prod__title { font-family: var(--font-serif); font-size: 19px; margin-top: 5px; line-height: 1.1; }
.be-prod__price { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; font-size: 15px; }
.be-prod__price del { font-size: 12.5px; opacity: 0.4; }
.be-stars { display: flex; gap: 2px; padding-top: 3px; color: var(--gold); }

/* =========================================================================
   Réassurance (4 blocs — informations vérifiées)
   ========================================================================= */
.be-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; animation: revealUp 0.9s cubic-bezier(0.2,0.7,0.2,1) both; }
.be-why__item { padding: 28px 0; border-top: 1px solid var(--ink-16); }
.be-why__icon { font-size: 22px; line-height: 1; }
.be-why__title { font-family: var(--font-serif); font-size: 20px; margin: 14px 0 8px; }
.be-why__text { font-size: 14px; line-height: 1.6; opacity: 0.7; margin: 0; }

/* =========================================================================
   La maison (split image + texte)
   ========================================================================= */
.be-split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.be-split__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surf-prod); }
.be-split__body { max-width: 440px; }
.be-split__body p { font-size: 15.5px; line-height: 1.8; opacity: 0.78; }

/* =========================================================================
   Journal (articles)
   ========================================================================= */
.be-journal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; animation: revealUp 0.9s cubic-bezier(0.2,0.7,0.2,1) both; }
.be-article { display: block; }
.be-article__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--surf-prod); }
.be-article__media image-slot, .be-article__media .be-cover { transition: transform 1.2s cubic-bezier(0.2,0.7,0.2,1); width: 100%; height: 100%; }
.be-article:hover .be-article__media .be-cover { transform: scale(1.05); }
.be-article__meta { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); margin: 16px 0 8px; }
.be-article__title { font-family: var(--font-serif); font-size: 22px; line-height: 1.2; }
.be-article__excerpt { font-size: 14.5px; line-height: 1.6; opacity: 0.7; margin: 10px 0 0; }

/* =========================================================================
   Newsletter
   ========================================================================= */
.be-newsletter { background: var(--ink); color: var(--cream); margin-top: 64px; }
.be-newsletter__inner { max-width: 720px; margin: 0 auto; padding: 72px 30px; text-align: center; }
.be-newsletter .be-h2 { color: var(--cream); }
.be-newsletter p { opacity: 0.78; margin: 16px 0 28px; }
.be-newsletter form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.be-newsletter input[type="email"] {
	flex: 1 1 280px; max-width: 360px; padding: 15px 18px; border: 1px solid rgba(251,246,242,0.4);
	background: transparent; color: var(--cream); font-family: inherit; font-size: 14px;
}
.be-newsletter input::placeholder { color: rgba(251,246,242,0.6); }

/* =========================================================================
   Footer
   ========================================================================= */
.be-footer { background: var(--ink); color: var(--cream); padding: 64px 30px 30px; }
.be-footer__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.be-footer__brand { font-family: var(--font-serif); font-size: 24px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; }
.be-footer p { font-size: 14px; line-height: 1.7; opacity: 0.7; margin: 0; }
.be-footer h3 { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin: 0 0 16px; font-family: var(--font-sans); font-weight: 400; }
.be-footer ul { list-style: none; margin: 0; padding: 0; }
.be-footer li { margin-bottom: 10px; }
.be-footer a { font-size: 14px; opacity: 0.8; transition: opacity 0.2s; }
.be-footer a:hover { opacity: 1; color: var(--rose-light); }
.be-footer__bottom {
	max-width: var(--maxw); margin: 48px auto 0; padding-top: 22px;
	border-top: 1px solid rgba(251,246,242,0.14);
	display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
	font-size: 12.5px; opacity: 0.7;
}
.be-pay { display: flex; gap: 10px; align-items: center; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; }

/* =========================================================================
   Contenu éditorial générique (page.php / single.php)
   ========================================================================= */
.be-entry { max-width: 760px; margin: 0 auto; padding: 60px 30px; }
.be-entry__title { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin-bottom: 24px; }
.be-prose { font-size: 16.5px; line-height: 1.8; }
.be-prose h2 { font-size: 30px; margin: 40px 0 14px; }
.be-prose h3 { font-size: 23px; margin: 32px 0 12px; }
.be-prose p { margin: 0 0 18px; }
.be-prose a { color: var(--rose); border-bottom: 1px solid currentColor; }
.be-prose img { margin: 24px 0; }
.be-prose ul, .be-prose ol { padding-left: 22px; margin: 0 0 18px; }
.be-prose li { margin-bottom: 8px; }
.be-prose blockquote { border-left: 3px solid var(--rose); margin: 24px 0; padding: 4px 0 4px 22px; font-style: italic; opacity: 0.85; }

.be-archive-grid { max-width: var(--maxw); margin: 0 auto; padding: 50px 30px; }
.be-pagination { display: flex; gap: 10px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.be-pagination .page-numbers { padding: 9px 15px; border: 1px solid var(--ink-16); font-size: 13px; }
.be-pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }

.be-404 { max-width: 640px; margin: 0 auto; padding: 110px 30px; text-align: center; }
.be-404 h1 { font-size: clamp(48px, 9vw, 96px); margin-bottom: 16px; }

/* =========================================================================
   Animations
   ========================================================================= */
@keyframes revealUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.14); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scrollcue { 0% { transform: translateY(0); opacity: 0.9; } 70% { transform: translateY(13px); opacity: 0; } 100% { opacity: 0; } }
@keyframes shimmer { from { background-position: 0% 0; } to { background-position: -200% 0; } }

/* Barre de défilement teintée */
::-webkit-scrollbar { height: 9px; width: 9px; }
::-webkit-scrollbar-thumb { background: rgba(183,110,121,0.32); border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }

/* =========================================================================
   Responsive — breakpoint principal 880px (identique au design)
   ========================================================================= */
@media (max-width: 980px) {
	.be-footer__inner { grid-template-columns: 1fr 1fr; }
	.be-journal { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
	.be-nav { display: none !important; }
	.be-burger { display: inline-flex; }
	.be-header__inner { display: flex; gap: 14px; }
	.be-brand { flex: 1; text-align: left; font-size: 22px; }
	.be-cols3 { grid-template-columns: 1fr; }
	.be-prodgrid { grid-template-columns: repeat(2, 1fr); }
	.be-why { grid-template-columns: repeat(2, 1fr); }
	.be-split { grid-template-columns: 1fr; gap: 28px; }
	.be-journal { grid-template-columns: 1fr; }
	.be-h1 { font-size: 50px !important; }
	.be-hero { height: auto !important; min-height: 0 !important; }
	.be-herostage { position: relative; height: 64vh; }
	.be-hero__inner { padding-top: 40px; }
	.be-hero__content { padding-bottom: 40px; }

	/* Navigation mobile dépliable */
	.be-mobile-nav { display: block; background: var(--bg); border-bottom: 1px solid var(--ink-08); }
	.be-mobile-nav[hidden] { display: none; }
	.be-mobile-nav ul { list-style: none; margin: 0; padding: 8px 30px 20px; }
	.be-mobile-nav li { padding: 12px 0; border-bottom: 1px solid var(--ink-08); }
	.be-mobile-nav a { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; }
}

@media (max-width: 520px) {
	.be-container, .be-section, .be-header__inner, .be-hero__inner, .be-footer { padding-left: 18px; padding-right: 18px; }
	.be-prodgrid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
	.be-footer__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* Respect des préférences de réduction des animations */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}