/**
 * Bébé Nova — feuille de marque.
 *
 * Chargée APRÈS Astra et APRÈS les CSS des plugins aod-* (enqueue à la
 * priorité 20) : on rebranche leurs variables CSS plutôt que de les combattre
 * à coups de `!important`. Propriétés LOGIQUES uniquement (inline-start/end,
 * margin-inline…) — jamais left/right : le site bascule en RTL en arabe.
 */

/* ─────────────────────────────────────────────────────── Palette & typo ─── */

:root {
	/* Couleurs de marque, extraites du logo (étoile pétrole + empreintes or). */
	--bn-teal: #2E7D8B;
	--bn-teal-dark: #17505C;
	--bn-teal-darker: #0E3940;
	--bn-teal-tint: #EAF3F4;
	--bn-gold: #C9A038;
	--bn-gold-dark: #A67F26;
	--bn-gold-tint: #F6ECD3;
	--bn-cream: #FDFBF6;
	--bn-white: #FFFFFF;
	--bn-ink: #2B3438;
	--bn-ink-soft: #5B6A6E;
	--bn-line: #E7E1D3;

	--bn-radius-lg: 20px;
	--bn-radius-md: 14px;
	--bn-radius-pill: 999px;
	--bn-shadow: 0 10px 30px rgba(23, 80, 92, 0.10);
	--bn-shadow-hover: 0 16px 34px rgba(23, 80, 92, 0.16);

	--bn-font-display: "Playfair Display", "Georgia", serif;
	--bn-font-body: "Quicksand", "Segoe UI", sans-serif;

	/* Rebranche la palette globale d'Astra (utilisée par ses boutons/titres). */
	--ast-global-color-0: var(--bn-ink);
	--ast-global-color-1: var(--bn-teal);
	--ast-global-color-2: var(--bn-ink-soft);
	--ast-global-color-3: var(--bn-teal-dark);
	--ast-global-color-4: var(--bn-cream);
	--ast-global-color-5: var(--bn-teal);
}

/* Arabe : Playfair/Quicksand ne couvrent pas l'arabe — un web font dédié plutôt
   que le repli système, pour garder le même niveau de finition dans les deux
   langues. */
html[lang="ar"] body,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button {
	font-family: "Tajawal", "Segoe UI", sans-serif;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .bn-story__title,
html[lang="ar"] .aod-home__title {
	font-family: "Tajawal", "Segoe UI", sans-serif;
	font-weight: 700;
}

/* ───────────────────────────────────────────────────────────── Base ──────── */

body {
	position: relative;
	color: var(--bn-ink);
	font-family: var(--bn-font-body);

	/* Semis d'étoiles très discret — écho du pictogramme du logo (l'étoile qui
	   encadre les empreintes). Statique (pas d'animation) : c'est la texture de
	   fond, pas le mouvement — voir les halos ci-dessous pour ça. */
	background-color: var(--bn-cream);
	background-image:
		radial-gradient(circle, var(--bn-gold) 1.4px, transparent 1.6px),
		radial-gradient(circle, var(--bn-teal) 1.4px, transparent 1.6px);
	background-size: 240px 240px, 320px 320px;
	background-position: 20px 30px, 140px 180px;
	background-attachment: fixed;
}

/* ────────────────────────────────────────── Halos de marque, en dérive lente ── */
/* Deux halos radiaux (teal + or, mêmes teintes que le héro de l'accueil) qui
   dérivent très doucement derrière tout le site. Purement décoratif : hors du
   flux (`position:fixed`, jamais de scroll ajouté), toujours SOUS le contenu
   (`z-index:-1`), et sans texte porté — rien à traduire, rien à lire au
   lecteur d'écran. `transform` + `filter` sur un calque fixe : pas de
   `background-position` animée, pour rester léger sur mobile. */
body::before,
body::after {
	content: "";
	position: fixed;
	z-index: -1;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.35;
}

body::before {
	inline-size: 46vmax;
	block-size: 46vmax;
	inset-inline-start: -14vmax;
	inset-block-start: -16vmax;
	background: radial-gradient(circle, var(--bn-teal) 0%, transparent 70%);
	animation: bn-drift-a 24s ease-in-out infinite alternate;
}

body::after {
	inline-size: 40vmax;
	block-size: 40vmax;
	inset-inline-end: -12vmax;
	inset-block-end: -14vmax;
	background: radial-gradient(circle, var(--bn-gold) 0%, transparent 70%);
	animation: bn-drift-b 28s ease-in-out infinite alternate;
}

@keyframes bn-drift-a {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(4vw, 5vh) scale(1.06); }
}
@keyframes bn-drift-b {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(-4vw, -4vh) scale(1.08); }
}

/* Mobile : calques plus légers (moins de flou = moins coûteux à repeindre) —
   objectif §TEMPLATE.md « rapide (< 3 s mobile) ». */
@media (max-width: 781px) {
	body::before,
	body::after {
		filter: blur(42px);
		opacity: 0.26;
	}
	body::before { inline-size: 62vmax; block-size: 62vmax; }
	body::after  { inline-size: 54vmax; block-size: 54vmax; }
}

h1, h2, h3, h4,
.entry-title,
.page-title {
	font-family: var(--bn-font-display);
	font-weight: 600;
	letter-spacing: 0.01em;
}

a { color: var(--bn-teal); }
a:hover { color: var(--bn-gold-dark); }

::selection { background: var(--bn-gold-tint); color: var(--bn-teal-darker); }

/* ── Boutons (thème + composants aod-*) : un seul style, pilule douce. ── */

.button,
.wp-block-button__link,
.aod-home__btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce ul.products li.product .button,
.aod-cod .aod-cod__submit {
	background: var(--bn-teal) !important;
	color: var(--bn-white) !important;
	border: none !important;
	border-radius: var(--bn-radius-pill) !important;
	font-family: var(--bn-font-body);
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease;
	box-shadow: 0 6px 16px rgba(23, 80, 92, 0.20);
}

.button:hover,
.wp-block-button__link:hover,
.aod-home__btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce ul.products li.product .button:hover,
.aod-cod .aod-cod__submit:hover {
	background: var(--bn-teal-dark) !important;
	color: var(--bn-white) !important;
	transform: translateY(-2px);
	box-shadow: var(--bn-shadow-hover);
}

/* Le formulaire COD/Contact partage ses propres variables (.aod-cod) : on les
   rebranche plutôt que de surcharger chaque règle — champs, focus ring et
   bouton suivent la marque partout où le formulaire apparaît. */
.aod-cod {
	--sh-accent: var(--bn-teal);
	--sh-accent-dark: var(--bn-teal-dark);
	--sh-line-strong: var(--bn-teal);
	--sh-radius: 12px;
	--sh-radius-sm: 10px;
}

/* ───────────────────────────────────────────────────────────── En-tête ───── */

.site-header,
.main-header-bar {
	background-color: var(--bn-cream) !important;
	border-block-end: none;
}

/* En-tête collant : reste visible en descendant la page (utile sur les fiches
   produit longues et la boutique), avec un fond légèrement translucide + flou
   — effet « verre » discret plutôt qu'un aplat plat. `@supports` protège les
   navigateurs sans `backdrop-filter` : ils gardent le fond crème plein. */
.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 500;
	box-shadow: 0 1px 0 var(--bn-line), 0 12px 24px -18px rgba(14, 57, 64, 0.35);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.site-header {
		background-color: rgba(253, 251, 246, 0.88) !important;
		backdrop-filter: blur(10px) saturate(1.15);
		-webkit-backdrop-filter: blur(10px) saturate(1.15);
	}
}

/* Le logo PORTE déjà le nom « Bébé Nova » (étoile + typographie) : le doubler
   avec le texte de titre d'Astra, juste à côté, en faisait une redite visuelle
   et écrasait le logo à 58px — illisible pour un fichier qui contient du texte
   fin (« Accessoires originaux »). Le titre reste dans le DOM (lien vers
   l'accueil, utile aux lecteurs d'écran et aux moteurs) mais n'occupe plus
   d'espace visuel : `.custom-logo-link` porte déjà le même lien + un `alt`
   descriptif, donc rien n'est perdu en accessibilité. */
.ast-site-title-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.site-branding .custom-logo-link img {
	max-height: 72px;
	width: auto;
	transition: transform .2s ease, filter .2s ease;
	filter: drop-shadow(0 2px 6px rgba(14, 57, 64, 0.12));
}
.site-branding .custom-logo-link:hover img {
	transform: translateY(-1px) scale(1.03);
	filter: drop-shadow(0 4px 10px rgba(14, 57, 64, 0.18));
}

@media (max-width: 544px) {
	.site-branding .custom-logo-link img { max-height: 54px; }
}

.main-header-menu .menu-item > a,
.main-header-menu a.menu-link {
	font-family: var(--bn-font-body);
	font-weight: 600;
	color: var(--bn-ink) !important;
	letter-spacing: 0.02em;
}

/* Chaque entrée devient une pilule douce au survol/à l'état actif — plus
   franc qu'un simple soulignement, sans devenir un vrai bouton (on reste sur
   de la navigation). */
.main-header-menu .menu-item:not(.menu-item-aod-lang) > a {
	position: relative;
	border-radius: var(--bn-radius-pill);
	padding-block: 0.35rem !important;
	padding-inline: 0.9rem !important;
	transition: background-color .18s ease, color .18s ease;
}

.main-header-menu .menu-item:not(.menu-item-aod-lang) > a:hover,
.main-header-menu .current-menu-item:not(.menu-item-aod-lang) > a,
.main-header-menu .current_page_item:not(.menu-item-aod-lang) > a {
	color: var(--bn-teal-dark) !important;
	background: var(--bn-teal-tint);
}

/* Petit trait or sous l'entrée active/survolée, en complément de la pilule —
   cosmétique, ne gêne pas le switcher FR/AR injecté dans le même menu. */
.main-header-menu .menu-item:not(.menu-item-aod-lang) > a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0.9rem;
	inset-inline-end: 0.9rem;
	inset-block-end: 0.1rem;
	height: 2px;
	background: var(--bn-gold);
	border-radius: var(--bn-radius-pill);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .18s ease;
}
.main-header-menu .menu-item:not(.menu-item-aod-lang):hover > a::after,
.main-header-menu .current-menu-item:not(.menu-item-aod-lang) > a::after {
	transform: scaleX(1);
}

/* Cibles tactiles ≥ 44px (TEMPLATE.md) : sous le point de rupture d'Astra, le
   menu passe en panneau plein écran — les liens et le switcher FR/AR y sont
   les toutes premières cibles du doigt. */
@media (max-width: 921px) {
	.main-header-menu .menu-item:not(.menu-item-aod-lang) > a {
		padding-block: 0.7rem !important;
	}
	.aod-lang__btn {
		padding-block: 0.65rem !important;
		min-height: 44px;
		box-sizing: border-box;
		display: inline-flex !important;
		align-items: center;
	}
}

/* Switcher FR/AR (plugin aod-cod-form) : rebranché sur la charte plutôt que
   son gris/vert par défaut — même logique que `.aod-cod` plus haut. */
.aod-lang {
	background: var(--bn-teal-tint) !important;
}
.aod-lang__btn {
	color: var(--bn-teal-dark) !important;
}
.aod-lang__btn:hover {
	background: var(--bn-gold-tint) !important;
	color: var(--bn-gold-dark) !important;
}
.aod-lang__btn.is-active {
	background: var(--bn-teal) !important;
	color: var(--bn-white) !important;
}

/* Bouton du menu mobile : suit la même pilule teal-tint au survol/à l'appui,
   au lieu du gris par défaut d'Astra. */
.menu-toggle.main-header-menu-toggle {
	border-radius: var(--bn-radius-pill);
	transition: background-color .18s ease, color .18s ease;
}
.menu-toggle.main-header-menu-toggle:hover,
.menu-toggle.main-header-menu-toggle[aria-expanded="true"] {
	background: var(--bn-teal-tint) !important;
	color: var(--bn-teal-dark) !important;
}

/* ─────────────────────────────────────────────────────────────── Héro ───── */
/* La devanture (couverture.png, exportée en `assets/img/hero-boutique*.jpg`)
   en fond du héro, plein cadre, en mouvement (Ken Burns pan + zoom). Le titre
   et le slogan sont déjà ÉCRITS dans la photo (l'enseigne « Bébé Nova —
   Accessoires originaux ») : les redoubler en overlay était une redite, donc
   ils sont retirés VISUELLEMENT (masqués en accessible-only, cf. la même
   technique que `.ast-site-title-wrap` dans l'en-tête) — le H1 reste dans le
   DOM pour le SEO/les lecteurs d'écran, sans rien copier sur l'écran. Seul le
   bouton (une action, pas une redite) reste affiché, sur la photo. */

.aod-home__hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--bn-teal-darker);
	border-radius: 0 0 var(--bn-radius-lg) var(--bn-radius-lg);

	/* La photo est CARRÉE ; sans cette hauteur mini, le héro (large et court)
	   forçait `cover` à en recadrer l'essentiel — l'enseigne (haut de l'image)
	   disparaissait. Plus de hauteur = moins de recadrage nécessaire. */
	min-height: clamp(360px, 50vw, 620px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block-end: clamp(1.75rem, 6vw, 3.25rem);
	box-sizing: border-box;
}

/* Fond d'ambiance : la MÊME photo, plein cadre et floutée — peu importe
   qu'elle soit recadrée, elle n'a plus vocation à être « lue », juste à
   habiller les bords que le calque net (`.bn-hero-photo`, en `contain`)
   laisse respirer. `scale(1.15)` en base (repris dans les keyframes) évite
   que le flou révèle un bord net de l'image. */
.aod-home__hero::before {
	content: "";
	position: absolute;
	inset: -4%;
	z-index: 0;
	background-image: url("../img/hero-boutique-mobile.jpg");
	background-size: cover;
	background-position: center top;
	filter: blur(28px) saturate(1.15) brightness(0.72);
	animation: bn-kenburns 26s ease-in-out infinite alternate;
	will-change: transform;
}
@media (min-width: 700px) {
	.aod-home__hero::before {
		background-image: url("../img/hero-boutique.jpg");
	}
}

/* Calque NET : la photo ENTIÈRE, sans le moindre recadrage (`contain`),
   quelle que soit la largeur de l'écran — c'était le défaut à corriger
   (`cover` sur une bannière large et courte mangeait la vitrine et les
   plantes d'une photo carrée). Ombre portée pour la détacher du fond flouté,
   plutôt qu'un cadre plat. */
.bn-hero-photo {
	position: absolute;
	inset: 4%;
	z-index: 1;
	background-image: url("../img/hero-boutique-mobile.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	filter: drop-shadow(0 18px 34px rgba(14, 57, 64, 0.4));
	animation: bn-hero-photo-in .8s ease-out backwards .1s;
}
@media (min-width: 700px) {
	.bn-hero-photo {
		background-image: url("../img/hero-boutique.jpg");
	}
}

@keyframes bn-hero-photo-in {
	from { opacity: 0; transform: scale(.96); }
	to   { opacity: 1; transform: scale(1); }
}

/* Voile léger : juste de quoi garantir le contraste du bouton (vignette
   centrée dessus) — le fond flouté/assombri fait déjà l'essentiel du travail. */
.aod-home__hero::after {
	content: "";
	position: absolute;
	inset: -4%;
	z-index: 2;
	background:
		radial-gradient(ellipse 60% 45% at 50% 88%, rgba(14, 57, 64, 0.5), transparent 70%),
		linear-gradient(180deg, rgba(14, 57, 64, 0.1) 0%, transparent 35%, rgba(14, 57, 64, 0.28) 100%);
}

/* Pan + zoom lents et continus SUR LE FOND FLOUTÉ uniquement : l'échelle de
   base (1.15) reste toujours ≥ à celle du `blur(28px)` en marge, pour ne
   jamais révéler un bord net de l'image derrière le flou. */
@keyframes bn-kenburns {
	0%   { transform: scale(1.15) translate(0, 0); }
	50%  { transform: scale(1.26) translate(-1.5%, -1%); }
	100% { transform: scale(1.2) translate(1%, 1%); }
}

/* Titre et slogan : déjà écrits sur la photo (l'enseigne) — masqués à l'écran,
   conservés pour le SEO/l'accessibilité (même technique que l'en-tête). */
.aod-home__title,
.aod-home__tagline {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.aod-home__cta {
	position: relative;
	z-index: 3;
	animation-name: bn-hero-in;
	animation-duration: .7s;
	animation-timing-function: ease-out;
	animation-delay: .15s;
	animation-fill-mode: backwards;
}

/* Le bouton du héro passe en or plein (plutôt que le teal du reste du site) :
   sur la photo, c'est lui qui a besoin du contraste le plus fort — et une
   légère respiration lumineuse le fait vivre pendant que l'œil regarde la
   devanture bouger derrière lui. */
.aod-home__hero .aod-home__btn {
	background: var(--bn-gold) !important;
	color: var(--bn-teal-darker) !important;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(201, 160, 56, 0.55);
	animation: bn-btn-glow 3.2s ease-in-out infinite;
}
.aod-home__hero .aod-home__btn:hover {
	background: var(--bn-white) !important;
	color: var(--bn-teal-darker) !important;
	animation-play-state: paused;
}

@keyframes bn-btn-glow {
	0%, 100% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(201, 160, 56, 0.45); }
	50%      { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3), 0 0 16px 6px rgba(201, 160, 56, 0.45); }
}

@keyframes bn-hero-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ───────────────────────────────────────────────── Titres de section ─────── */

.aod-home__h2 {
	font-family: var(--bn-font-display);
	color: var(--bn-teal-darker);
	position: relative;
	padding-block-end: 0.6rem;
}
.aod-home__h2::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-block-start: 0.6rem;
	margin-inline: auto;
	background: var(--bn-gold);
	border-radius: var(--bn-radius-pill);
}
.aod-contact__details .aod-home__h2::after {
	margin-inline: 0;
}

/* ─────────────────────────────────────────────── Notre histoire (bn-story) ── */

.bn-story {
	position: relative;
	display: grid;
	gap: 2rem;
	padding-block: clamp(2rem, 6vw, 3.5rem);
	padding-inline: 1rem;
	max-width: 1100px;
	margin-inline: auto;
}

/* Étoile filigrane — écho du pictogramme du logo, en fond de section. Réservée
   au desktop : sur mobile, la marge autour de la colonne centrée (max-width)
   disparaît, et l'étoile déborderait de l'écran. */
@media (min-width: 860px) {
	.bn-story::before {
		content: "";
		position: absolute;
		inset-block-start: -2rem;
		inset-inline-end: -1rem;
		inline-size: 300px;
		block-size: 300px;
		z-index: -1;
		background: var(--bn-gold);
		opacity: 0.07;
		clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
		animation: bn-watermark-spin 90s linear infinite;
		pointer-events: none;
	}
}
@keyframes bn-watermark-spin {
	to { transform: rotate(360deg); }
}

.bn-story__col--tale,
.bn-story__col--mission {
	animation: bn-story-in .8s ease-out backwards;
}
.bn-story__col--mission { animation-delay: .15s; }

@keyframes bn-story-in {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bn-story__kicker {
	position: relative;
	overflow: hidden;
	display: inline-block;
	font-family: var(--bn-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bn-gold-dark);
	background: var(--bn-gold-tint);
	padding: 0.3rem 0.9rem;
	border-radius: var(--bn-radius-pill);
	margin-block-end: 0.75rem;
}

/* Reflet discret qui balaie le badge de temps en temps — un clin d'œil, pas
   un gadget permanent (longue pause entre deux passages). */
.bn-story__kicker::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
	background-size: 220% 100%;
	background-position: 150% 0;
	animation: bn-shimmer 6s ease-in-out infinite;
}
@keyframes bn-shimmer {
	0%, 55%, 100% { background-position: 150% 0; }
	75% { background-position: -50% 0; }
}

.bn-story__title {
	position: relative;
	font-family: var(--bn-font-display);
	color: var(--bn-teal-darker);
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	margin-block: 0 1.25rem;
	padding-block-end: 0.55rem;
}
.bn-story__title::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	inline-size: 46px;
	block-size: 3px;
	background: var(--bn-gold);
	border-radius: var(--bn-radius-pill);
}

.bn-story__col--tale p {
	line-height: 1.75;
	color: var(--bn-ink-soft);
	margin-block: 0 1rem;
}

/* Lettrine sur le premier paragraphe — une touche éditoriale, feutrée. */
.bn-story__col--tale p:first-of-type::first-letter {
	font-family: var(--bn-font-display);
	font-size: 2.6em;
	font-weight: 700;
	line-height: 0.75;
	color: var(--bn-gold-dark);
	float: inline-start;
	padding-inline-end: 0.1em;
	padding-block-start: 0.06em;
}

.bn-story__closing {
	font-weight: 600;
	color: var(--bn-ink) !important;
}

.bn-story__mission {
	position: relative;
	overflow: hidden;
	background: linear-gradient(155deg, var(--bn-teal) 0%, var(--bn-teal-darker) 100%);
	color: var(--bn-white);
	border-radius: var(--bn-radius-lg);
	padding: clamp(1.75rem, 5vw, 2.5rem);
	box-shadow: var(--bn-shadow);
	height: 100%;
	box-sizing: border-box;
	transition: transform .25s ease, box-shadow .25s ease;
}
.bn-story__mission:hover {
	transform: translateY(-4px);
	box-shadow: var(--bn-shadow-hover);
}

/* Lueur dorée qui dérive très lentement dans la carte — même logique que les
   halos de fond du site, à l'échelle de la carte. */
.bn-story__mission::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: 0;
	background:
		radial-gradient(circle at 22% 18%, rgba(201, 160, 56, 0.28), transparent 45%),
		radial-gradient(circle at 85% 82%, rgba(201, 160, 56, 0.16), transparent 50%);
	animation: bn-aurora 20s ease-in-out infinite alternate;
	pointer-events: none;
}
.bn-story__mission > * {
	position: relative;
	z-index: 1;
}
@keyframes bn-aurora {
	from { transform: translate(0, 0) rotate(0deg); }
	to   { transform: translate(4%, -3%) rotate(6deg); }
}

.bn-story__star {
	display: inline-block;
	font-size: 1.6rem;
	color: var(--bn-gold);
	margin-block-end: 0.5rem;
	animation: bn-star-twinkle 3.4s ease-in-out infinite;
}
@keyframes bn-star-twinkle {
	0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 transparent); }
	50%      { transform: scale(1.18) rotate(8deg); filter: drop-shadow(0 0 7px rgba(201, 160, 56, 0.65)); }
}

.bn-story__mission h3 {
	font-family: var(--bn-font-display);
	color: var(--bn-white);
	margin-block: 0 0.85rem;
	font-size: 1.4rem;
}

.bn-story__mission p {
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
	margin-block: 0 1rem;
}

.bn-story__tagline {
	font-family: var(--bn-font-display);
	font-style: italic;
	color: var(--bn-gold) !important;
	font-weight: 600;
	margin-block-start: 1.25rem !important;
	padding-block-start: 1rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.25);
}

@media (min-width: 860px) {
	.bn-story {
		grid-template-columns: 1.35fr 1fr;
		align-items: stretch;
		gap: 3rem;
	}
}

/* ───────────────────────────────────────────────────────── Réassurance ───── */

.aod-home__reassure {
	position: relative;
	overflow: hidden;
	background: var(--bn-teal-tint) !important;
	border-radius: var(--bn-radius-lg);
}

/* Semis d'étoiles très discret, même motif que le fond du site — la section
   respire un peu plus qu'un simple aplat teinté. */
.aod-home__reassure::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		radial-gradient(circle, var(--bn-gold) 1.4px, transparent 1.6px),
		radial-gradient(circle, var(--bn-teal) 1.4px, transparent 1.6px);
	background-size: 200px 200px, 260px 260px;
	background-position: 15px 25px, 120px 150px;
	opacity: 0.5;
	pointer-events: none;
}

/* Filet doré qui glisse en continu tout en haut du panneau — signature
   discrète, en écho au filet du héro. */
.aod-home__reassure::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--bn-teal), var(--bn-gold), var(--bn-teal));
	background-size: 200% 100%;
	animation: bn-reassure-shimmer 5s linear infinite;
	pointer-events: none;
}

@keyframes bn-reassure-shimmer {
	to { background-position: -200% 0; }
}

.aod-home__promise {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--bn-white) 0%, var(--bn-cream) 100%);
	border-radius: var(--bn-radius-md);
	padding: 1.9rem 1.35rem 1.6rem;
	box-shadow: var(--bn-shadow);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
	animation: bn-promise-in .7s cubic-bezier(.22, 1, .36, 1) backwards;
}
.aod-home__promise:nth-child(2) { animation-delay: .12s; }
.aod-home__promise:nth-child(3) { animation-delay: .24s; }

.aod-home__promise:hover {
	transform: translateY(-9px) scale(1.02);
	box-shadow: var(--bn-shadow-hover), 0 0 0 1px rgba(201, 160, 56, .3);
}

@keyframes bn-promise-in {
	from { opacity: 0; transform: translateY(26px) scale(.94); filter: blur(3px); }
	to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Reflet qui balaie la carte au survol — clin d'œil « vitrine », sans rien
   ajouter au balisage. */
.aod-home__promise::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: -35%;
	width: 30%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .8), transparent);
	transform: skewX(-18deg);
	transition: inset-inline-start .75s ease;
	pointer-events: none;
}
.aod-home__promise:hover::before {
	inset-inline-start: 135%;
}

/* Numéro « 1, 2, 3 » : pastille dorée qui claque à l'arrivée plutôt qu'un
   chiffre en filigrane — donne un vrai rythme de lecture. */
.aod-home__promise::after {
	counter-increment: bn-promise;
	content: counter(bn-promise, decimal-leading-zero);
	position: absolute;
	inset-block-start: 0.85rem;
	inset-inline-end: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bn-gold), var(--bn-gold-dark));
	color: var(--bn-white);
	font-family: var(--bn-font-display);
	font-size: 0.72rem;
	font-weight: 700;
	box-shadow: 0 4px 10px rgba(166, 127, 38, .35);
	animation: bn-badge-pop .5s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.aod-home__promise:nth-child(1)::after { animation-delay: .4s; }
.aod-home__promise:nth-child(2)::after { animation-delay: .5s; }
.aod-home__promise:nth-child(3)::after { animation-delay: .6s; }

@keyframes bn-badge-pop {
	from { opacity: 0; transform: scale(.4) rotate(-20deg); }
	to   { opacity: 1; transform: scale(1) rotate(0); }
}

.aod-home__reassure {
	counter-reset: bn-promise;
}

/* L'icône est un SVG Phosphor (`AOD_COD_Icon`), pas un emoji : sa couleur suit
   `currentColor`, donc `color` ici la pilote — un emoji ne l'aurait jamais permis. */
.aod-home__ico {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--bn-gold-tint);
	color: var(--bn-gold-dark);
	transition: transform .3s ease, box-shadow .3s ease, color .3s ease, background-color .3s ease;
	animation: bn-ico-float 3.4s ease-in-out infinite;
}
.aod-home__ico svg {
	display: block;
	filter: drop-shadow(0 2px 3px rgba(166, 127, 38, .3));
}
.aod-home__promise:nth-child(2) .aod-home__ico { animation-delay: .3s; }
.aod-home__promise:nth-child(3) .aod-home__ico { animation-delay: .6s; }

@keyframes bn-ico-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

/* Anneau conique qui tourne très lentement derrière l'icône — sparkle discret,
   jamais au premier plan. */
.aod-home__ico::before {
	content: "";
	position: absolute;
	inset: -6px;
	z-index: -1;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--bn-gold-tint), var(--bn-gold) 18%, var(--bn-gold-tint) 38%, transparent 60%, var(--bn-gold-tint) 100%);
	opacity: .55;
	animation: bn-ico-ring 7s linear infinite;
}

/* Halo qui respire doucement, sous l'anneau. */
.aod-home__ico::after {
	content: "";
	position: absolute;
	inset: -15px;
	z-index: -2;
	border-radius: 50%;
	background: radial-gradient(circle, var(--bn-gold-tint) 0%, transparent 72%);
	animation: bn-ico-halo 2.8s ease-in-out infinite;
}

@keyframes bn-ico-ring {
	to { transform: rotate(360deg); }
}

@keyframes bn-ico-halo {
	0%, 100% { transform: scale(1); opacity: .55; }
	50%      { transform: scale(1.18); opacity: .95; }
}

.aod-home__promise:hover .aod-home__ico {
	transform: scale(1.12) rotate(-6deg);
	box-shadow: 0 0 0 7px var(--bn-gold-tint);
	color: var(--bn-teal-dark);
	background: var(--bn-white);
}

.aod-home__promise h3 {
	position: relative;
	display: inline-block;
	font-family: var(--bn-font-display);
	color: var(--bn-teal-darker);
}

/* Trait doré qui se déploie sous le titre au survol — écho du soulignement
   des liens du site. */
.aod-home__promise h3::after {
	content: "";
	position: absolute;
	inset-block-end: -4px;
	inset-inline-start: 50%;
	inline-size: 0;
	block-size: 2px;
	background: var(--bn-gold);
	transition: inline-size .35s ease, inset-inline-start .35s ease;
}
.aod-home__promise:hover h3::after {
	inline-size: 60%;
	inset-inline-start: 20%;
}

/* ────────────────────────────────────────────────────── Bannière de clôture ── */
/* Dernier élément de l'Accueil (injecté par functions.php après la
   réassurance) : même carte « mission » que Notre histoire, pour boucler la
   page sur la même signature visuelle — halo doré qui dérive, étoile qui
   scintille, bouton or. */

.bn-closing {
	padding-block: clamp(2rem, 6vw, 3.5rem);
	padding-inline: 1rem;
	max-width: 780px;
	margin-inline: auto;
}

.bn-closing__panel {
	position: relative;
	overflow: hidden;
	text-align: center;
	background: linear-gradient(155deg, var(--bn-teal) 0%, var(--bn-teal-darker) 100%);
	border-radius: var(--bn-radius-lg);
	padding: clamp(2rem, 6vw, 3rem) clamp(1.5rem, 5vw, 2.5rem);
	box-shadow: var(--bn-shadow);
	animation: bn-closing-in .7s ease-out backwards;
}

.bn-closing__panel::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: 0;
	background:
		radial-gradient(circle at 18% 20%, rgba(201, 160, 56, 0.3), transparent 45%),
		radial-gradient(circle at 85% 85%, rgba(201, 160, 56, 0.18), transparent 50%);
	animation: bn-aurora 22s ease-in-out infinite alternate;
	pointer-events: none;
}

.bn-closing__panel > * {
	position: relative;
	z-index: 1;
}

@keyframes bn-closing-in {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bn-closing__star {
	display: inline-block;
	font-size: 1.8rem;
	color: var(--bn-gold);
	margin-block-end: 0.5rem;
	animation: bn-star-twinkle 3.4s ease-in-out infinite;
}

.bn-closing__title {
	font-family: var(--bn-font-display);
	color: var(--bn-white);
	font-size: clamp(1.4rem, 3.5vw, 1.9rem);
	margin-block: 0 0.75rem;
}

.bn-closing__text {
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.7;
	max-width: 46ch;
	margin-inline: auto;
	margin-block-end: 1.5rem;
}

.bn-closing__btn {
	background: var(--bn-gold) !important;
	color: var(--bn-teal-darker) !important;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}
.bn-closing__btn:hover {
	background: var(--bn-white) !important;
	color: var(--bn-teal-darker) !important;
}

/* ──────────────────────────────────────────────── Catégories & produits ──── */

/* En-tête de la page Boutique : un simple <h1> texte noir par défaut (Astra),
   au milieu d'un site par ailleurs entièrement mis en marque — même
   traitement « titre de section + trait doré » que `.aod-home__h2`, à une
   échelle de page. */
.woocommerce-products-header {
	text-align: center;
	padding-block: clamp(1.5rem, 5vw, 2.5rem) 0.25rem;
	animation: bn-summary-in .6s ease-out backwards;
}
.woocommerce-products-header__title.page-title {
	position: relative;
	display: inline-block;
	color: var(--bn-teal-darker);
	font-size: clamp(1.9rem, 5vw, 2.5rem);
	margin: 0;
	padding-block-end: 0.65rem;
}
.woocommerce-products-header__title.page-title::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	margin-block-start: 0.65rem;
	margin-inline: auto;
	background: var(--bn-gold);
	border-radius: var(--bn-radius-pill);
}

/* Barre résultats/tri : `.woocommerce-result-count` et `.woocommerce-ordering`
   sont déjà mises côte à côte par Astra (float gauche/droite) — seule
   l'apparence manquait (texte brut + `<select>` navigateur par défaut). */
.woocommerce-result-count {
	color: var(--bn-ink-soft);
	font-size: 0.85rem;
	margin-block: 0 1.25rem;
}

.woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--bn-white);
	border: 1px solid var(--bn-line) !important;
	border-radius: var(--bn-radius-pill);
	padding: 0.5rem 2.2rem 0.5rem 1rem;
	font-family: var(--bn-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--bn-ink);
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease;
}
html[dir="rtl"] .woocommerce-ordering select.orderby {
	padding: 0.5rem 1rem 0.5rem 2.2rem;
}
.woocommerce-ordering select.orderby:hover {
	border-color: var(--bn-teal) !important;
}
.woocommerce-ordering select.orderby:focus {
	outline: none;
	border-color: var(--bn-teal) !important;
	box-shadow: 0 0 0 3px var(--bn-teal-tint);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-products-header {
		animation: none !important;
		opacity: 1 !important;
	}
}

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	background: var(--bn-white);
	border-radius: var(--bn-radius-md);
	padding: 0.85rem 0.85rem 1.25rem;
	box-shadow: var(--bn-shadow);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	box-shadow: var(--bn-shadow-hover);
}

/* La carte est en colonne flex (ci-dessus) : le bloc résumé doit l'être aussi
   pour que `margin-block-start: auto` pousse le bouton en bas de carte (cf.
   plus bas), alignant les boutons d'une même rangée même si un titre passe
   sur deux lignes et pas l'autre. */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Cadre carré systématique : garantit une grille alignée quel que soit le
   ratio de la photo source (un futur produit non carré ne dépareillera pas
   les cartes voisines). */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	overflow: hidden;
	border-radius: calc(var(--bn-radius-md) - 6px);
}
.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: calc(var(--bn-radius-md) - 6px);
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.woocommerce ul.products li.product:hover img {
	transform: scale(1.05);
}

/* Le bouton « aperçu rapide » d'Astra (icône sac flottante sur la photo) fait
   double emploi avec le bouton « Commander » déjà présent sous la carte — sur
   un catalogue en COD (un clic = une commande, pas un panier), deux appels à
   l'action pour le même geste ajoutent du bruit plutôt qu'un vrai choix. */
.woocommerce ul.products li.product .ast-on-card-button {
	display: none !important;
}

/* Catégorie en éveil au-dessus du titre — même traitement (pilule dorée,
   petites capitales) que `.single-product-category` sur la fiche produit :
   la carte annonce déjà de quoi il s'agit avant même le titre. */
.woocommerce ul.products li.product .ast-woo-product-category {
	display: inline-block;
	font-family: var(--bn-font-body);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bn-gold-dark);
	background: var(--bn-gold-tint);
	padding: 0.2rem 0.6rem;
	border-radius: var(--bn-radius-pill);
	margin-block: 0.7rem 0.35rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bn-font-display);
	color: var(--bn-teal-darker);
	font-size: 1.05rem;
	margin-block-end: 0.3rem;
}

.woocommerce ul.products li.product .price {
	color: var(--bn-teal-dark);
	font-weight: 700;
	margin-block-end: 0.6rem;
}

.woocommerce ul.products li.product .price ins {
	color: var(--bn-gold-dark);
}

/* Pousse le bouton « Commander » en bas de carte, alignées sur toute une
   rangée même quand un titre passe sur deux lignes et pas l'autre. */
.woocommerce ul.products li.product .button {
	margin-block-start: auto;
	align-self: flex-start;
}

.woocommerce span.onsale {
	background: var(--bn-gold) !important;
	color: var(--bn-white) !important;
	font-family: var(--bn-font-body);
	font-weight: 700;
}

/* Tuiles « catégorie » : photo plein cadre, nom + compteur en plaque dorée
   posée sur l'image (plutôt que du texte à part, sous une vignette) — la
   photo devient l'objet principal de la carte, pas un simple pictogramme.
   Étoile devant le nom : écho discret du bio Instagram de la marque
   (« L'éclat d'une nouvelle étoile ✨ »), même motif que le pied de page
   (`.ast-footer-copyright p::before`) et la bannière de clôture. */
.woocommerce ul.products li.product-category {
	position: relative;
	overflow: hidden;
	border-radius: var(--bn-radius-lg);
	box-shadow: var(--bn-shadow);
	background: var(--bn-teal-tint);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.woocommerce ul.products li.product-category:hover {
	transform: translateY(-6px);
	box-shadow: var(--bn-shadow-hover), 0 0 0 1px rgba(201, 160, 56, .25);
}

.woocommerce ul.products li.product-category > a {
	display: block;
	position: relative;
}

.woocommerce ul.products li.product-category img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.woocommerce ul.products li.product-category:hover img {
	transform: scale(1.08);
}

/* Filet de secours : une catégorie sans photo perso rend l'icône WooCommerce
   par défaut, minuscule et perdue dans un cadre 4/5 — ça ressemble à une
   image cassée. On la masque entièrement (elle garde son rôle : fixer la
   hauteur 4/5 de la tuile) et on habille la carte elle-même d'une vraie
   composition de marque — étoile qui respire, semis de points, dégradé —
   plutôt qu'un simple aplat. */
.woocommerce ul.products li.product-category img[src*="woocommerce-placeholder"],
.woocommerce ul.products li.product-category img[src*="placeholder-category"] {
	opacity: 0;
}

.woocommerce ul.products li.product-category:has(img[src*="woocommerce-placeholder"]),
.woocommerce ul.products li.product-category:has(img[src*="placeholder-category"]) {
	background: linear-gradient(155deg, var(--bn-teal-tint) 0%, var(--bn-gold-tint) 100%);
}
/* Alterne l'accent dominant sur 3 variantes (pas 2) : sur une grille de 8-9
   catégories sans photo, deux tons qui reviennent tous les deux médaillons
   restaient trop répétitifs — trois tons cassent mieux le motif. */
.woocommerce ul.products li.product-category:nth-of-type(3n+2):has(img[src*="woocommerce-placeholder"]),
.woocommerce ul.products li.product-category:nth-of-type(3n+2):has(img[src*="placeholder-category"]) {
	background: linear-gradient(155deg, var(--bn-gold-tint) 0%, var(--bn-teal-tint) 100%);
}
.woocommerce ul.products li.product-category:nth-of-type(3n):has(img[src*="woocommerce-placeholder"]),
.woocommerce ul.products li.product-category:nth-of-type(3n):has(img[src*="placeholder-category"]) {
	background: linear-gradient(155deg, var(--bn-cream) 0%, var(--bn-teal-tint) 55%, var(--bn-gold-tint) 100%);
}

/* Semis de points — même motif que la réassurance — pour donner de la
   texture à l'aplat plutôt qu'un dégradé nu. */
.woocommerce ul.products li.product-category:has(img[src*="woocommerce-placeholder"])::before,
.woocommerce ul.products li.product-category:has(img[src*="placeholder-category"])::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle, var(--bn-gold) 1.4px, transparent 1.6px),
		radial-gradient(circle, var(--bn-teal) 1.4px, transparent 1.6px);
	background-size: 130px 130px, 170px 170px;
	background-position: 10px 15px, 80px 100px;
	opacity: .35;
	pointer-events: none;
}

/* Étoile décorative : un badge rond (verre dépoli), pas un gros glyphe seul
   au milieu d'un aplat — ça se lisait comme neuf médaillons vides identiques
   plutôt que neuf vignettes. Le rond + son ombre lui donne un vrai poids
   d'objet, à l'échelle des icônes de la réassurance (`.aod-home__ico`). */
.woocommerce ul.products li.product-category:has(img[src*="woocommerce-placeholder"])::after,
.woocommerce ul.products li.product-category:has(img[src*="placeholder-category"])::after {
	content: "★";
	position: absolute;
	inset-block-start: 30%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: clamp(56px, 16vw, 72px);
	block-size: clamp(56px, 16vw, 72px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(253, 251, 246, 0.8);
	box-shadow: 0 8px 18px rgba(23, 80, 92, 0.16);
	font-size: clamp(1.4rem, 5vw, 1.8rem);
	color: var(--bn-gold-dark);
	text-shadow: none;
	pointer-events: none;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.woocommerce ul.products li.product-category:hover:has(img[src*="woocommerce-placeholder"])::after,
.woocommerce ul.products li.product-category:hover:has(img[src*="placeholder-category"])::after {
	transform: translate(-50%, -50%) scale(1.1) rotate(10deg);
}

/* Voile permanent en bas (lisibilité du nom), qui monte un peu au survol pour
   suivre le zoom de la photo sans jamais découvrir de bord vide. */
.woocommerce ul.products li.product-category > a::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 68%;
	background: linear-gradient(180deg, transparent 0%, rgba(14, 57, 64, 0.4) 40%, rgba(14, 57, 64, 0.9) 100%);
	pointer-events: none;
}

/* Sans photo, ce voile pensé pour une PHOTO assombrissait le bas d'un
   dégradé pastel — deux bandes de couleur qui juraient (haut clair / bas
   sombre). On l'allège dans le même camaïeu crème que la tuile, et le titre
   repasse en encre foncée : plus net qu'un blanc plaqué sur du pastel. */
.woocommerce ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) > a::before,
.woocommerce ul.products li.product-category:has(img[src*="placeholder-category"]) > a::before {
	background: linear-gradient(180deg, transparent 0%, rgba(253, 251, 246, 0.5) 45%, rgba(253, 251, 246, 0.92) 100%);
}
.woocommerce ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) .woocommerce-loop-category__title,
.woocommerce ul.products li.product-category:has(img[src*="placeholder-category"]) .woocommerce-loop-category__title {
	color: var(--bn-teal-darker);
	text-shadow: none;
}
.woocommerce ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) .woocommerce-loop-category__title mark.count,
.woocommerce ul.products li.product-category:has(img[src*="placeholder-category"]) .woocommerce-loop-category__title mark.count {
	background: rgba(23, 80, 92, 0.10);
	border: 1px solid rgba(23, 80, 92, 0.18);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	color: var(--bn-teal-dark);
	text-shadow: none;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	margin: 0;
	padding: 1.5rem 1.15rem 1.2rem;
	font-family: var(--bn-font-display);
	font-size: clamp(1.1rem, 2.6vw, 1.3rem);
	font-weight: 700;
	color: var(--bn-white);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title::before {
	content: "★";
	color: var(--bn-gold);
	font-size: 0.8em;
	margin-inline-end: 0.35em;
}

/* Badge « effet verre » : translucide + flou, plus proche des chips que l'on
   voit sur les Reels/Stories qu'une pastille pleine posée à plat. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark.count {
	flex: 0 0 auto;
	background: rgba(253, 251, 246, 0.22);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(253, 251, 246, 0.4);
	color: var(--bn-white);
	font-family: var(--bn-font-body);
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: var(--bn-radius-pill);
	padding: 0.2rem 0.65rem;
	text-shadow: none;
}

/* Petite flèche qui glisse dans le coin au survol — le même signal
   « cliquable » que le reste du site, appliqué à une carte-image. */
.woocommerce ul.products li.product-category > a::after {
	content: "→";
	position: absolute;
	inset-block-start: 0.9rem;
	inset-inline-end: 0.9rem;
	inline-size: 34px;
	block-size: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(253, 251, 246, 0.92);
	color: var(--bn-teal-darker);
	font-weight: 700;
	opacity: 0;
	transform: translate(-6px, 6px);
	transition: opacity .2s ease, transform .2s ease;
}
html[dir="rtl"] .woocommerce ul.products li.product-category > a::after {
	content: "←";
}
.woocommerce ul.products li.product-category:hover > a::after {
	opacity: 1;
	transform: translate(0, 0);
}

/* ────────────────────────────────────────────── Catégories en carrousel ──── */
/* Convertit UNIQUEMENT la liste des catégories (jamais celle des produits) en
   piste défilante horizontale — repérée par la présence de `li.product-
   category`, indépendant de la langue. `.bn-cat-slider` est le conteneur
   injecté par bn-cat-slider.js autour du <ul> ; sans JS, la liste reste une
   grille normale (dégradation propre). */

.bn-cat-slider {
	position: relative;
}

.woocommerce ul.products:has(> li.product-category) {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 1rem;
	gap: 1.1rem;
	padding-block: 0.35rem 1rem;
	margin: 0 !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.woocommerce ul.products:has(> li.product-category)::-webkit-scrollbar {
	display: none;
}

.woocommerce ul.products:has(> li.product-category) > li.product-category {
	float: none !important;
	inline-size: clamp(200px, 27vw, 270px) !important;
	flex: 0 0 auto !important;
	margin-inline-end: 0 !important;
	scroll-snap-align: start;
}
@media (max-width: 700px) {
	.woocommerce ul.products:has(> li.product-category) > li.product-category {
		inline-size: 76vw !important;
	}
}

/* Estompe douce en bord de piste — signale qu'il y a plus à découvrir, y
   compris sur mobile où les flèches sont masquées. */
.bn-cat-slider::before,
.bn-cat-slider::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 2.5rem;
	z-index: 1;
	pointer-events: none;
}
.bn-cat-slider::before {
	inset-inline-start: 0;
	background: linear-gradient(to right, var(--bn-cream), transparent);
}
.bn-cat-slider::after {
	inset-inline-end: 0;
	background: linear-gradient(to left, var(--bn-cream), transparent);
}
html[dir="rtl"] .bn-cat-slider::before {
	background: linear-gradient(to left, var(--bn-cream), transparent);
}
html[dir="rtl"] .bn-cat-slider::after {
	background: linear-gradient(to right, var(--bn-cream), transparent);
}

/* Flèches : desktop/tablette seulement (`bn-cat-slider.js`) — sur mobile, le
   balayage tactile est le geste attendu ; des flèches à 44px viendraient
   encombrer une piste déjà pensée pour le doigt. */
.bn-cat-slider__arrow {
	display: none;
}
@media (min-width: 782px) {
	.bn-cat-slider__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		inset-block-start: 50%;
		transform: translateY(-50%);
		inline-size: 42px;
		block-size: 42px;
		border-radius: 50%;
		border: none;
		background: var(--bn-white);
		color: var(--bn-teal-darker);
		box-shadow: 0 6px 16px rgba(14, 57, 64, 0.22);
		font-size: 1.1rem;
		cursor: pointer;
		z-index: 2;
		transition: background-color .18s ease, transform .18s ease, opacity .18s ease;
	}
	.bn-cat-slider__arrow:hover:not(:disabled) {
		background: var(--bn-gold);
		color: var(--bn-teal-darker);
	}
	.bn-cat-slider__arrow:disabled {
		opacity: 0.35;
		cursor: default;
	}
	.bn-cat-slider__arrow--prev {
		inset-inline-start: -0.75rem;
	}
	.bn-cat-slider__arrow--next {
		inset-inline-end: -0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products:has(> li.product-category) {
		scroll-behavior: auto;
	}
}

/* ───────────────────────────────────────────────────────── Fiche produit ──── */
/* Le mécanisme du slider (flèches, vignettes cliquables, zoom, lightbox) est
   DÉJÀ fourni par WooCommerce + Astra (`wc-product-gallery-slider/-zoom/
   -lightbox`, activés côté thème parent) — on n'écrit ici QUE l'habillage :
   cadre, vignettes, flèches, entrée en fondu, et la colonne de texte. */

.woocommerce-product-gallery {
	border-radius: var(--bn-radius-lg);
	overflow: hidden;
	box-shadow: var(--bn-shadow);
	background: var(--bn-white);
	animation: bn-gallery-in .6s ease-out backwards;
}

.woocommerce-product-gallery__image img {
	border-radius: 0;
}

/* Vignettes (générées par flexslider en JS — classes WooCommerce standard) :
   pilule discrète, anneau or sur celle du slide affiché. */
.flex-control-nav.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	padding: 0.85rem;
	margin: 0;
	list-style: none;
	background: var(--bn-white);
}
.flex-control-thumbs li {
	inline-size: 64px;
	block-size: 64px;
}
.flex-control-thumbs li img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: var(--bn-radius-md);
	cursor: pointer;
	opacity: 0.65;
	border: 2px solid transparent;
	transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}
.flex-control-thumbs li img:hover {
	opacity: 1;
	transform: translateY(-2px);
}
.flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--bn-gold);
}

/* Flèches précédent/suivant (WooCommerce 8+ : boutons `data-controls`) — rond
   crème sur la photo, jamais un carré générique. */
.woocommerce-product-gallery [data-controls="prev"],
.woocommerce-product-gallery [data-controls="next"] {
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	background: rgba(253, 251, 246, 0.92) !important;
	color: var(--bn-teal-darker) !important;
	box-shadow: 0 4px 14px rgba(14, 57, 64, 0.22);
	transition: transform .18s ease, background-color .18s ease;
}
.woocommerce-product-gallery [data-controls="prev"]:hover,
.woocommerce-product-gallery [data-controls="next"]:hover {
	background: var(--bn-gold) !important;
	transform: scale(1.08);
}

@keyframes bn-gallery-in {
	from { opacity: 0; transform: translateY(16px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Colle la galerie au défilement (desktop) : elle reste en vue pendant que le
   client lit la description et remplit le formulaire de commande.
   ⚠️ `inset-block-start` est calé sur la hauteur approximative de l'en-tête
   collant (logo 72px + son padding) — à vérifier à l'œil si le logo change
   de taille, sous peine de chevauchement. */
@media (min-width: 782px) {
	.woocommerce-product-gallery {
		position: sticky;
		inset-block-start: 104px;
	}
}

/* ── Colonne de texte : fil d'Ariane, badge catégorie, titre, prix, résumé. ── */

.woocommerce-breadcrumb {
	font-size: 0.8rem;
	color: var(--bn-ink-soft);
	margin-block-end: 0.9rem;
	animation: bn-summary-in .6s ease-out backwards;
}
.woocommerce-breadcrumb a { color: var(--bn-ink-soft); }
.woocommerce-breadcrumb a:hover { color: var(--bn-teal); }

.single-product-category {
	display: inline-block;
	font-family: var(--bn-font-body);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bn-gold-dark);
	background: var(--bn-gold-tint);
	padding: 0.3rem 0.85rem;
	border-radius: var(--bn-radius-pill);
	margin-block-end: 0.75rem;
	animation: bn-summary-in .6s ease-out backwards .05s;
}
.single-product-category a { color: inherit; }

.product_title.entry-title {
	font-family: var(--bn-font-display);
	color: var(--bn-teal-darker);
	font-weight: 700;
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	margin-block: 0 0.5rem;
	animation: bn-summary-in .6s ease-out backwards .1s;
}

.summary.entry-summary .price {
	font-family: var(--bn-font-display);
	color: var(--bn-teal-dark);
	font-weight: 700;
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	margin-block-end: 1rem;
	animation: bn-summary-in .6s ease-out backwards .15s;
}
.summary.entry-summary .price ins {
	color: var(--bn-gold-dark);
	text-decoration: none;
}
.summary.entry-summary .price del {
	color: var(--bn-ink-soft);
	opacity: 0.7;
	font-size: 0.8em;
}

.woocommerce-product-details__short-description {
	color: var(--bn-ink-soft);
	line-height: 1.75;
	margin-block-end: 1.25rem;
	animation: bn-summary-in .6s ease-out backwards .2s;
}

.product_meta {
	font-size: 0.85rem;
	color: var(--bn-ink-soft);
	margin-block-end: 1.25rem;
}
.product_meta a { color: var(--bn-teal); }

.summary.entry-summary .aod-cod {
	animation: bn-summary-in .6s ease-out backwards .25s;
}

@keyframes bn-summary-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Onglets Description/Avis : nus par défaut (Astra), jamais habillés — la
   seule zone de la fiche produit qui restait « brute » au milieu d'une page
   par ailleurs entièrement mise en marque. ── */

.woocommerce-tabs.wc-tabs-wrapper {
	margin-block-start: clamp(2rem, 5vw, 3rem);
	animation: bn-summary-in .6s ease-out backwards .3s;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 -1px;
	padding: 0;
	border-block-end: 1px solid var(--bn-line);
	overflow-x: auto;
}
.woocommerce-tabs ul.tabs li {
	margin: 0;
}
.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.75rem 1.1rem;
	font-family: var(--bn-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--bn-ink-soft);
	border-radius: var(--bn-radius-md) var(--bn-radius-md) 0 0;
	transition: color .18s ease, background-color .18s ease;
	white-space: nowrap;
}
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--bn-teal-dark);
	background: var(--bn-teal-tint);
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--bn-teal-darker);
	background: var(--bn-white);
	box-shadow: 0 -1px 0 var(--bn-line) inset, 1px 0 0 var(--bn-line) inset, -1px 0 0 var(--bn-line) inset;
	border-block-end: 2px solid var(--bn-gold);
}

.woocommerce-tabs .woocommerce-Tabs-panel {
	background: var(--bn-white);
	border-radius: 0 0 var(--bn-radius-md) var(--bn-radius-md);
	box-shadow: var(--bn-shadow);
	padding: clamp(1.25rem, 4vw, 2rem);
	color: var(--bn-ink-soft);
	line-height: 1.75;
}
.woocommerce-tabs .woocommerce-Tabs-panel h2 {
	font-family: var(--bn-font-display);
	color: var(--bn-teal-darker);
	font-size: 1.3rem;
	margin-block-start: 0;
}

/* ── Avis clients : étoiles dorées, formulaire aligné sur la charte
   `.aod-cod` (mêmes champs flottants, même bouton pilule). ── */

.woocommerce-Reviews-title {
	font-family: var(--bn-font-display);
}

#reviews .star-rating {
	color: var(--bn-gold);
}
#reviews .star-rating::before {
	color: var(--bn-line);
}
#reviews .star-rating span::before {
	color: var(--bn-gold);
}

.commentlist {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}
.commentlist .comment {
	background: var(--bn-teal-tint);
	border-radius: var(--bn-radius-md);
	padding: 1.1rem 1.25rem;
	margin-block-end: 1rem;
}
.commentlist .comment_container .avatar {
	border-radius: 50%;
}

#review_form .comment-form-rating select,
#review_form .comment-form-comment textarea,
#review_form .comment-form-author input,
#review_form .comment-form-email input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-radius-sm, 10px);
	padding: 0.7rem 0.9rem;
	font-family: var(--bn-font-body);
	background: var(--bn-cream);
	transition: border-color .18s ease, box-shadow .18s ease;
}
#review_form .comment-form-rating select:focus,
#review_form .comment-form-comment textarea:focus,
#review_form .comment-form-author input:focus,
#review_form .comment-form-email input:focus {
	outline: none;
	border-color: var(--bn-teal);
	box-shadow: 0 0 0 3px var(--bn-teal-tint);
}
#review_form .form-submit input#submit {
	background: var(--bn-teal) !important;
	color: var(--bn-white) !important;
	border: none !important;
	border-radius: var(--bn-radius-pill) !important;
	padding: 0.7rem 1.6rem;
	font-family: var(--bn-font-body);
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(23, 80, 92, 0.20);
	transition: background-color .18s ease, transform .12s ease;
}
#review_form .form-submit input#submit:hover {
	background: var(--bn-teal-dark) !important;
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-tabs.wc-tabs-wrapper {
		animation: none !important;
		opacity: 1 !important;
	}
}

/* ──────────────────────────────────────────────────────────── Contact ─────── */
/* Deux cartes côte à côte (repli empilé mobile) : les coordonnées en carte
   « mission » (même dégradé teal/or que `.bn-story__mission` /
   `.bn-closing__panel`, pour boucler la page sur la même signature), le
   formulaire en carte blanche — le contraste des deux fait toute la mise en
   page, sans rien ajouter au balisage du plugin. */

.aod-contact {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: start;
	max-width: 1100px;
	margin-inline: auto;
}
@media (min-width: 860px) {
	.aod-contact {
		grid-template-columns: 1fr 1.15fr;
	}
}

.aod-contact__details {
	position: relative;
	overflow: hidden;
	background: linear-gradient(155deg, var(--bn-teal) 0%, var(--bn-teal-darker) 100%);
	color: var(--bn-white);
	border-radius: var(--bn-radius-lg);
	padding: clamp(1.75rem, 5vw, 2.5rem);
	box-shadow: var(--bn-shadow);
	animation: bn-summary-in .6s ease-out backwards .05s;
}

/* Lueur dorée qui dérive lentement — même motif que les autres cartes
   « mission » du site (bn-aurora est déjà défini plus haut dans ce fichier). */
.aod-contact__details::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: 0;
	background:
		radial-gradient(circle at 20% 18%, rgba(201, 160, 56, 0.28), transparent 45%),
		radial-gradient(circle at 85% 85%, rgba(201, 160, 56, 0.16), transparent 50%);
	animation: bn-aurora 20s ease-in-out infinite alternate;
	pointer-events: none;
}
.aod-contact__details > * {
	position: relative;
	z-index: 1;
}

.aod-contact__details .aod-home__h2 {
	color: var(--bn-white);
	text-align: start;
}
.aod-contact__details .aod-home__h2::after {
	margin-inline: 0;
}

.aod-contact__intro {
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.7;
	margin-block: 0.75rem 1.5rem;
}

.aod-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.aod-contact__list li {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	animation: bn-summary-in .5s ease-out backwards;
}
.aod-contact__list li:nth-child(1) { animation-delay: .1s; }
.aod-contact__list li:nth-child(2) { animation-delay: .18s; }
.aod-contact__list li:nth-child(3) { animation-delay: .26s; }

.aod-contact__list a {
	color: var(--bn-white) !important;
	font-weight: 600;
	text-underline-offset: 3px;
}
.aod-contact__list a:hover {
	color: var(--bn-gold) !important;
}
.aod-contact__list span:not(.aod-contact__ico) {
	color: rgba(255, 255, 255, 0.92);
}

.aod-contact__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgba(253, 251, 246, 0.16);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-size: 1.05rem !important;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}
.aod-contact__list li:hover .aod-contact__ico {
	transform: scale(1.1) rotate(-6deg);
	background: rgba(253, 251, 246, 0.28);
}

.aod-contact__form {
	background: var(--bn-white);
	border-radius: var(--bn-radius-lg);
	padding: clamp(1.25rem, 4vw, 2rem);
	box-shadow: var(--bn-shadow);
	animation: bn-summary-in .6s ease-out backwards .15s;
	transition: box-shadow .3s ease;
}
.aod-contact__form:hover {
	box-shadow: var(--bn-shadow-hover);
}

@media (prefers-reduced-motion: reduce) {
	.aod-contact__details,
	.aod-contact__form,
	.aod-contact__list li {
		animation: none !important;
		opacity: 1 !important;
	}
	.aod-contact__details::before {
		animation: none !important;
	}
	.aod-contact__list li:hover .aod-contact__ico {
		transform: none !important;
	}
}

/* ──────────────────────────────────────────────────────────── Pied de page ── */

.site-footer {
	position: relative;
}

/* Liseré de marque en haut du pied de page — le même dégradé teal/or que le
   trait sous les titres de section, à l'échelle de toute la largeur. */
.site-footer::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	background: linear-gradient(90deg, var(--bn-teal) 0%, var(--bn-gold) 50%, var(--bn-teal) 100%);
}

.site-footer,
.ast-small-footer,
.footer-widget-area {
	background-color: var(--bn-teal-darker) !important;
	color: rgba(255, 255, 255, 0.85);
}

.site-footer a,
.ast-small-footer a,
.footer-widget-area a {
	color: var(--bn-gold) !important;
	transition: color .18s ease;
}
.site-footer a:hover,
.ast-small-footer a:hover,
.footer-widget-area a:hover {
	color: var(--bn-white) !important;
}

.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.ast-small-footer h1, .ast-small-footer h2, .ast-small-footer h3, .ast-small-footer h4 {
	color: var(--bn-white);
}

.ast-footer-copyright {
	padding-block: 0.5rem;
	font-family: var(--bn-font-body);
	font-size: 0.9rem;
}
/* Petite étoile devant la mention du créateur — écho discret du logo, sans
   toucher au texte lui-même (généré par le champ Copyright d'Astra). */
.ast-footer-copyright p::before {
	content: "★ ";
	color: var(--bn-gold);
	opacity: 0.8;
}

/* Bouton « retour en haut » (Astra) : pilule dorée plutôt que le rond gris
   par défaut, cohérent avec le reste des boutons du site. */
#ast-scroll-top {
	background: var(--bn-gold) !important;
	color: var(--bn-teal-darker) !important;
	box-shadow: 0 6px 16px rgba(14, 57, 64, 0.3);
	transition: transform .18s ease, background-color .18s ease;
}
#ast-scroll-top:hover {
	background: var(--bn-white) !important;
	transform: translateY(-3px);
}

/* Mouvement : on respecte la préférence système, comme le reste du socle. */
@media (prefers-reduced-motion: reduce) {
	.button, .aod-home__btn, .aod-home__promise,
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product-category,
	.woocommerce ul.products li.product-category img,
	.woocommerce ul.products li.product-category > a::after {
		transition: none !important;
	}
	.button:hover, .aod-home__btn:hover, .aod-home__promise:hover,
	.woocommerce ul.products li.product:hover,
	.woocommerce ul.products li.product-category:hover,
	.woocommerce ul.products li.product-category:hover img {
		transform: none !important;
	}
	/* Les halos de fond restent visibles (c'est de la couleur, pas du texte à
	   lire) mais cessent de dériver. */
	body::before,
	body::after {
		animation: none !important;
	}
	/* En-tête : le survol du logo, la pilule des entrées de menu et le trait or
	   changent toujours d'état — mais sans trajet animé. */
	.site-branding .custom-logo-link img,
	.main-header-menu .menu-item:not(.menu-item-aod-lang) > a,
	.main-header-menu .menu-item:not(.menu-item-aod-lang) > a::after,
	.menu-toggle.main-header-menu-toggle {
		transition: none !important;
	}
	.site-branding .custom-logo-link:hover img {
		transform: none !important;
	}
	/* Héro : le pan/zoom de la photo, l'entrée et la respiration du bouton
	   s'arrêtent — la photo et le bouton restent affichés, immobiles. */
	.aod-home__hero::before,
	.bn-hero-photo,
	.aod-home__hero .aod-home__btn {
		animation: none !important;
	}
	.bn-hero-photo {
		opacity: 1 !important;
		transform: none !important;
	}
	.aod-home__cta {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	/* Notre histoire : filigrane, reflet du badge, lueur de la carte et
	   étincelle de l'étoile s'arrêtent — l'entrée au chargement ne joue plus. */
	.bn-story::before,
	.bn-story__kicker::after,
	.bn-story__mission::before,
	.bn-story__star {
		animation: none !important;
	}
	.bn-story__mission {
		transition: none !important;
	}
	.bn-story__mission:hover {
		transform: none !important;
	}
	.bn-story__col--tale,
	.bn-story__col--mission {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	/* Fiche produit : les entrées en fondu de la galerie et du texte ne jouent
	   plus ; vignettes et flèches gardent leur réponse au survol, sans trajet. */
	.woocommerce-product-gallery,
	.woocommerce-breadcrumb,
	.single-product-category,
	.product_title.entry-title,
	.summary.entry-summary .price,
	.woocommerce-product-details__short-description,
	.summary.entry-summary .aod-cod {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.flex-control-thumbs li img,
	.woocommerce-product-gallery [data-controls="prev"],
	.woocommerce-product-gallery [data-controls="next"] {
		transition: none !important;
	}
	.flex-control-thumbs li img:hover,
	.woocommerce-product-gallery [data-controls="prev"]:hover,
	.woocommerce-product-gallery [data-controls="next"]:hover {
		transform: none !important;
	}
	/* Réassurance : entrée en cascade des 3 cartes coupée, filet du haut figé,
	   pastille numérotée affichée sans « pop », reflet au survol désactivé ;
	   l'icône garde sa réaction au survol mais perd flottement, anneau et
	   halo animés — plus de rotation/zoom animés non plus. */
	.aod-home__reassure::after {
		animation: none !important;
	}
	.aod-home__promise {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.aod-home__promise::before {
		display: none !important;
	}
	.aod-home__promise::after {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.aod-home__promise h3::after {
		transition: none !important;
	}
	.aod-home__ico {
		animation: none !important;
		transition: none !important;
	}
	.aod-home__ico::before,
	.aod-home__ico::after {
		animation: none !important;
	}
	.aod-home__promise:hover .aod-home__ico {
		transform: none !important;
	}
	/* Bannière de clôture : même traitement que la carte « Notre mission ». */
	.bn-closing__panel,
	.bn-closing__star {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	/* Pied de page : le bouton « retour en haut » garde sa réponse au survol,
	   sans le déplacement. */
	#ast-scroll-top,
	.site-footer a {
		transition: none !important;
	}
	#ast-scroll-top:hover {
		transform: none !important;
	}
}