/**
 * nimo — 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 — REDÉFINIES par bebe-nova-laste.css (tokens Laste).
	   Gardées ici en repli backward-compat pour tout sélecteur qui les lit
	   encore directement (--bn-*). Les nouveaux composants utilisent --cd-*. */
	--bn-teal: #14122B;
	--bn-teal-dark: #14122B;
	--bn-teal-darker: #0D0D0D;
	--bn-teal-tint: var(--cd-accent-soft, #F3E3D6);
	--bn-gold: #14122B;
	--bn-gold-dark: #14122B;
	--bn-gold-tint: #F3E3D6;
	--bn-cream: #F5F7FA;
	--bn-white: #ffffff;
	--bn-ink: var(--cd-ink, #1E3050);
	--bn-ink-soft: var(--cd-muted, #64748B);
	--bn-line: var(--cd-line, #D1D9E6);

	--bn-radius-lg: var(--cd-r-lg, 16px);
	--bn-radius-md: var(--cd-r-md, 12px);
	--bn-radius-pill: var(--cd-r-pill, 999px);
	--bn-shadow: var(--cd-shadow-rest, 0 1px 3px rgba(30,48,80,.06));
	--bn-shadow-hover: var(--cd-shadow-hover, 0 8px 24px rgba(30,48,80,.12));

	--bn-font-display: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bn-font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	/* Serif éditorial — titres uniquement (refonte esthétique boutique). Le
	   corps, la nav et les boutons restent en Barlow : c'est le contraste
	   serif-titres / sans-corps qui fait la "voix" éditoriale, pas un
	   remplacement total. */
	--bn-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
}

/* Arabe : Barlow n'a pas de glyphes arabe — le repli système s'en charge
   (comme dans /gestion). On garde la même famille pour la cohérence. */

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

html {
	overflow-x: hidden;
}

body {
	position: relative;
	overflow-x: hidden;
	color: var(--cd-ink);
	font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: var(--cd-fs-md);
	-webkit-font-smoothing: antialiased;

	/* Fond plat, crème uni — façon Mohawk General Store : plus de semis de
	   points ni de dégradé mesh (retirés avec les halos, bebe-nova-laste.css). */
	background-color: var(--cd-bg);
}

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

a { color: var(--cd-accent-strong); }
a:hover { color: var(--cd-accent); }

::selection { background: var(--cd-accent-soft); color: var(--cd-ink); }

/* ── Boutons (thème + composants aod-*) : pilule Laste unifiée. ── */

/* 2026-09-09 — demande owner : boutons plats noirs jugés trop sobres à côté
   du reste du site (header, héro, catégories) déjà passé au dégradé
   bleu/violet/rose. Pilule dégradée + reflet au survol, même famille que les
   pilules de nav du header et la flèche des tuiles catégorie. Les deux
   contextes "sur photo sombre" (héro, bannière de clôture) gardent leur
   propre bouton blanc — leurs règles, plus spécifiques et déclarées après
   celle-ci, continuent de gagner (cf. `.aod-home__hero .aod-home__btn`,
   `.bn-closing__btn`). */
.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 {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(135deg, #14122B, #3B3FA8) !important;
	color: var(--cd-white) !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-height: var(--cd-ctl-h);
	box-shadow: 0 10px 24px -12px rgba(var(--cd-accent-rgb), .55);
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
	            box-shadow .3s var(--cd-ease-out);
}
/* Reflet qui balaie le bouton au survol — même geste que le reflet du héro. */
.button::before,
.wp-block-button__link::before,
.aod-home__btn::before,
.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce ul.products li.product .button::before,
.aod-cod .aod-cod__submit::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 50%, transparent 65%);
	transform: translateX(-130%);
	transition: transform .6s ease;
	pointer-events: none;
}

.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 {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -12px rgba(var(--cd-accent-rgb), .65);
}
.button:hover::before,
.wp-block-button__link:hover::before,
.aod-home__btn:hover::before,
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before,
.woocommerce ul.products li.product .button:hover::before,
.aod-cod .aod-cod__submit:hover::before {
	transform: translateX(130%);
}

/* Le formulaire COD/Contact partage ses propres variables (.aod-cod) : on les
   rebranche sur les tokens Laste plutôt que de surcharger chaque règle.
   `!important` sur CHAQUE variable : `aod-cod-form.css` est enqueue sans
   priorité explicite (défaut 10, comme nous) et se retrouve pourtant chargé
   APRÈS nous dans le <head> rendu (vérifié : bn-child-style → bn-laste →
   aod-cod-form, alors que le commentaire plus haut affirmait l'inverse) — à
   spécificité égale (`.aod-cod` des deux côtés), la régle la PLUS TARDIVE
   gagne, donc sans `!important` c'est le vert Shopify (#008060) du plugin qui
   écrasait notre bleu de marque sur le prix/bouton sélectionné du formulaire
   COD, invisible tant qu'on ne compare pas au rendu réel. */
.aod-cod {
	--sh-accent: var(--cd-accent) !important;
	--sh-accent-dark: var(--cd-accent-strong) !important;
	--sh-line-strong: var(--cd-accent) !important;
	--sh-radius: var(--cd-r-md) !important;
	--sh-radius-sm: var(--cd-r-sm) !important;
}

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

/* Aucun lien/bouton du header ne garde le halo de tap gris par défaut du
   navigateur (mobile) — cf. le commentaire détaillé sur les liens du menu
   plus bas pour la raison. */
.site-header a,
.site-header button {
	-webkit-tap-highlight-color: transparent;
}

/* Le liseré n'est plus statique : transparent au repos (tout en haut de
   l'Accueil, il se pose directement sur le diptyque du héro — un trait
   crème dessus aurait tranché sur la photo), il se révèle en fondu dès que
   `.is-scrolled` apparaît (bn-header.js, ~12px de défilement). C'est ce
   fondu — pas une ombre, la charte s'y refuse toujours — qui donne au header
   sa « prise de profondeur » une fois qu'il a quelque chose à séparer. */
.site-header,
.inside-header {
	background-color: var(--cd-header-bg) !important;
	border-block-end: 1px solid transparent !important;
	transition: border-color var(--cd-t-base) var(--cd-ease-out),
	            box-shadow var(--cd-t-base) var(--cd-ease-out);
}
.site-header.is-scrolled,
.site-header.is-scrolled .inside-header {
	border-block-end-color: var(--cd-line) !important;
}
/* Légère profondeur une fois qu'on a défilé — le header quitte la photo du
   héro et gagne le droit à une ombre, discrète (pas de halo appuyé). */
.site-header.is-scrolled {
	box-shadow: 0 2px 14px rgba(20, 18, 43, .08);
}

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 500;
	isolation: isolate;
}

/* État « scrolled » (bn-header.js ajoute la classe dès ~12px de défilement) :
   logo légèrement réduit, sans ombre supplémentaire (le liseré suffit). */
.site-header.is-scrolled {
	--bn-logo-h: 34px;
}

/* 2026-09-10 — retour owner : « les animations et le design du header ne me
   plaisent pas ». L'entrée au chargement (logo + nav qui apparaissent un par
   un) est retirée — header statique, immédiatement dans son état final,
   comme `exemple.jpeg`. */

/* 2026-09-21 — rebrand Ayyur : le logo déposé (`ayyur-logo-tight.jpg`) est de
   nouveau un LOCKUP COMPLET (le mot « Ayyur » stylisé + la lune + la légende
   « COSMÉTIQUE »), comme l'ancien « BÉBÉ NOVA » — pas l'icône seule (sac +
   point) du logo nimo qui justifiait d'afficher le nom À CÔTÉ, en commentaire
   ci-dessous jusqu'ici. Résultat non revu depuis le changement de logo : le
   nom de la marque s'affichait deux fois côte à côte (l'image ET `.main-title`).
   `.main-title` repasse donc masqué visuellement — même recette que
   `.site-description` juste en dessous — plutôt que supprimé : le texte reste
   dans le DOM pour le SEO et les lecteurs d'écran (l'image porte déjà le même
   texte en `alt`, donc rien n'est perdu à l'audition). */
.site-branding-container {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}
.site-branding {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.main-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	margin: 0;
}
.main-title a {
	position: relative;
	font-family: var(--bn-font-serif);
	font-weight: 600;
	font-size: clamp(1.25rem, 3.2vw, 1.55rem);
	color: var(--cd-ink) !important;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color var(--cd-t-base) var(--cd-ease-out),
	            letter-spacing var(--cd-t-base) var(--cd-ease-out);
}
.main-title a:hover {
	color: var(--cd-muted) !important;
	/* Le nom « s'ouvre » très légèrement au survol — même geste que le trait
	   qui se déploie juste en dessous, décliné en typo plutôt qu'en trait. */
	letter-spacing: 0.005em;
}
/* Trait sobre qui se déploie sous le nom du site au survol — même geste que
   les entrées de menu juste à côté. */
.main-title a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: -3px;
	inline-size: 100%;
	block-size: 1px;
	background: var(--cd-ink);
	border-radius: 0;
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform var(--cd-t-base) var(--cd-ease-out);
}
.main-title a:hover::after {
	transform: scaleX(1);
}
.site-description {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* 2026-09-10 — retour owner : logo repassé sobre, sans bascule/rotation au
   survol ni au clic (jugé trop "animé") — juste l'icône, à taille fixe. */
.site-logo a {
	position: relative;
	isolation: isolate;
	display: inline-flex;
}

.site-logo img {
	position: relative;
	max-height: var(--bn-logo-h, 42px);
	width: auto;
	transition: max-height var(--cd-t-base) var(--cd-ease-out);
}

@media (max-width: 544px) {
	.site-logo img { max-height: 34px; }
	.main-title a { font-size: 1.05rem; }
}

/* Nav — fond noir GeneratePress (#222, réglage du Personnalisateur "Primary
   Navigation") RETIRÉ : la ligne juste en dessous force les liens en encre
   FONCÉE (`--cd-ink`, pensée pour le fond crème du header), donc le texte
   se lisait à peine sur le noir (26,24,21 sur 34,34,34 — quasi la même
   couleur). Plutôt que de repasser le texte en blanc pour matcher le noir
   de GP, on retire le noir : la nav se fond dans le header (comme le logo
   juste à côté), sans boîte flottante — c'est ce panneau noir qui donnait
   l'air « pas fini, thème par défaut ». `!important` : la règle de GP est
   injectée en `<style>` inline par le Personnalisateur, donc tard et avec
   sa propre spécificité — on ne peut pas compter sur l'ordre de cascade. */
.main-navigation,
.main-navigation .main-nav ul ul {
	background: transparent !important;
}
.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items a {
	color: var(--cd-ink) !important;
}
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus,
.main-navigation .mobile-bar-items a:hover {
	color: var(--cd-accent-strong) !important;
}

#site-navigation .menu-item > a,
#site-navigation a.menu-link {
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-size: var(--cd-fs-md);
	color: var(--cd-ink) !important;
	letter-spacing: 0.02em;
}

/* Séparateur discret entre les 3 liens et le switcher FR/AR — sans lui, le
   passage « lien texte → pilule colorée » n'avait aucune respiration
   visuelle propre, les deux blocs se lisaient comme un seul groupe confus. */
#site-navigation .menu-item-aod-lang {
	margin-inline-start: 0.5rem;
	padding-inline-start: 0.9rem;
	border-inline-start: 1px solid var(--cd-line);
}
@media (max-width: 921px) {
	#site-navigation .menu-item-aod-lang {
		margin-inline-start: 0;
		padding-inline-start: 0;
		border-inline-start: none;
		margin-block-start: 0.5rem;
	}
}

/* Le rond gênant au clic/tap sur Accueil/Boutique/Contact : le lien est une
   pilule (`border-radius` ci-dessous), donc le halo de focus ET le
   « tap highlight » gris par défaut du navigateur — tous deux calés sur la
   forme de la boîte — se dessinent en cercle/ovale plutôt qu'en rectangle.
   On retire les deux, et on ne réintroduit un anneau que pour la navigation
   clavier (`:focus-visible`, jamais au clic souris/tap). */
#site-navigation .menu-item:not(.menu-item-aod-lang) > a {
	position: relative;
	border-radius: var(--cd-r-pill);
	padding-block: 0.35rem !important;
	padding-inline: 0.9rem !important;
	transition: background-color var(--cd-t-base) var(--cd-ease-out),
	            color var(--cd-t-base) var(--cd-ease-out);
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
#site-navigation .menu-item:not(.menu-item-aod-lang) > a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--cd-accent-soft), 0 0 0 4px var(--cd-accent);
}

/* 2026-09-10 — `background` retiré une 1ʳᵉ fois (reliquat d'une pilule pleine
   du thème). Vérifié dans Chrome SANS cache (`?nocache=1`) : un rectangle
   gris foncé (#3f3f3f) restait quand même — c'est le réglage PAR DÉFAUT de
   GeneratePress pour `.current-menu-*` (customizer "Primary Navigation"),
   injecté en `<style>` inline, jamais annulé nulle part dans ce thème. Repli
   explicite sur `transparent !important` pour le neutraliser. */
#site-navigation .menu-item:not(.menu-item-aod-lang) > a:hover,
#site-navigation .current-menu-item:not(.menu-item-aod-lang) > a,
#site-navigation .current_page_item:not(.menu-item-aod-lang) > a {
	color: var(--cd-accent-strong) !important;
	background: transparent !important;
}

/* Petit trait accent sous l'entrée active/survolée */
#site-navigation .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(--cd-accent);
	border-radius: var(--cd-r-pill);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--cd-t-base) var(--cd-ease-out);
}
#site-navigation .menu-item:not(.menu-item-aod-lang):hover > a::after,
#site-navigation .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) {
	#site-navigation .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. */
.aod-lang {
	background: var(--cd-accent-soft) !important;
}
.aod-lang__btn {
	color: var(--cd-accent-strong) !important;
}
.aod-lang__btn:hover {
	background: var(--cd-accent-soft) !important;
	color: var(--cd-accent) !important;
}
.aod-lang__btn.is-active {
	background: var(--cd-accent) !important;
	color: var(--cd-accent-ink) !important;
}

/* Bouton du menu mobile : suit la même pilule accent au survol/à l'appui. */
.menu-toggle {
	border-radius: var(--cd-r-pill);
	transition: background-color var(--cd-t-base) var(--cd-ease-out),
	            color var(--cd-t-base) var(--cd-ease-out),
	            transform var(--cd-t-fast) var(--cd-ease-out);
}
/* Petit tassement au tap/clic — le seul retour, sur mobile, qu'on soit bien
   en train d'appuyer SUR le bouton (pas de ripple, pas de halo : juste ça). */
.menu-toggle:active {
	transform: scale(0.9);
}
.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
	background: var(--cd-accent-soft) !important;
	color: var(--cd-accent-strong) !important;
}

/* ─────────────────────────────────────────────────────────────── Héro ───── */

/* Plein écran RÉEL : `.inside-article` (GeneratePress) pose 40px de padding
   de chaque côté sur tout le contenu de page — sans casser cet inset, le
   diptyque de photos (position:absolute; inset:0 DANS la section) reste
   cadré par la section, donc lui aussi rétréci de 40px, et le crème de la
   page passait en bandes verticales de part et d'autre des deux photos.
   `width:100vw` + `margin-inline: calc(50% - 50vw)` fait sortir la section
   de ce conteneur pour toucher les deux bords du viewport, quel que soit
   l'ancêtre qui la contraint — `html{overflow-x:hidden}` (plus haut dans ce
   fichier) absorbe le débordement horizontal que la technique provoque. */
.aod-home__hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--cd-ink);
	border-radius: 0;

	width: 100vw;
	margin-inline: calc(50% - 50vw);

	/* `.inside-article` a 40px de padding-top (30px ≤768px, cf. le CSS de
	   GeneratePress `main.min.css`, sélecteur `.separate-containers
	   .inside-article`) : une bande crème restait visible entre le header et
	   le haut des photos. On l'annule ICI (marge négative), jamais sur
	   `.inside-article` lui-même — ce padding sert de respiration à TOUTE
	   page (Boutique, Contact, bas de l'Accueil), seul le héro doit y
	   échapper. ⚠️ Ces deux valeurs sont copiées du CSS de GeneratePress, pas
	   dérivées d'une variable : à revérifier si le réglage « Content Padding »
	   du thème parent change dans le Personnalisateur.

	   🚨 2026-09-08 : la bande restait visible (20px) MALGRÉ ce calcul — un
	   second écart de `.inside-article`, `.separate-containers .site-main{
	   margin:20px}` (ancêtre, `main.min.css`), pose 20px de marge en HAUT
	   ET en bas ; `.separate-containers.no-sidebar .site-main` (body a bien
	   `no-sidebar`) ne remet à zéro QUE `margin-left`/`margin-right`, jamais
	   `margin-top`. Ce commentaire ne comptait que le premier écart — d'où
	   -40px/-30px, alors qu'il fallait annuler 20px (site-main) + 40px/30px
	   (inside-article) = -60px/-50px. */
	margin-block-start: -60px;

	min-height: clamp(640px, 86vw, 100vh);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block-end: clamp(2rem, 7vw, 3.5rem);
	box-sizing: border-box;
}
@media (max-width: 768px) {
	.aod-home__hero {
		margin-block-start: -50px;
		min-height: clamp(640px, 170vw, 92vh);
	}
}

/* Le semis de points et le mesh de dégradés d'origine sont retirés — Mohawk
   n'habille jamais sa photo de héro d'un décor, juste un voile de lisibilité
   (plus bas). Les deux `<span>` injectés par bn_hero_photo_markup()
   (functions.php) restent dans le DOM (aucune classe renommée) mais ne
   reçoivent plus de style : `.bn-hero-grid` est neutralisé ici. */
.aod-home__hero .bn-hero-grid {
	display: none;
}

/* 2026-09-16 — retour owner : diaporama plein cadre (assets/img/hero-slide-1
   à -6.jpg, cf. bn_hero_photo_markup()) qui défile automatiquement, une photo
   après l'autre — remplace le diptyque figé (2 photos côte à côte) et
   l'image unique statique des itérations précédentes. Chaque `<span>` est
   empilée en plein cadre (`inset:0`) ; seule celle portant `.is-active`
   (déplacée par `bn-hero-slideshow.js`, cf. functions.php) est visible —
   le fondu vient du `transition: opacity`, jamais d'une animation JS. */
.bn-hero-photos {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	isolation: isolate;
	pointer-events: none;
}

.bn-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 30%;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.bn-hero-slide.is-active {
	opacity: 1;
	animation: bn-hero-kenburns 8s ease-in-out infinite alternate;
}
@keyframes bn-hero-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}

/* Pas d'animation pour qui la refuse : la photo active reste simplement
   visible, sans zoom ni fondu répété. */
@media (prefers-reduced-motion: reduce) {
	.bn-hero-slide { transition: none; }
	.bn-hero-slide.is-active { animation: none; }
}

/* 2026-09-09 — demande owner : photos produit SOMBRES en lien direct avec le
   catalogue nimo (t-shirts empilés, écouteurs) plutôt qu'un décor générique
   — pas de lavis de couleur artificiel dessus.
   2026-09-10 — retour owner : « trop noir ». Les deux photos (hero-shop-1.jpg,
   hero-shop-2.jpg) sont REMPLACÉES par des visuels clairs (fond neutre
   crème/gris pâle, même esprit que la référence `exemple.jpeg` de l'owner) —
   les anciennes sont gardées en `.bak7`/`.bak8`. Ce commentaire décrit donc un
   choix désormais renversé ; gardé pour l'historique. */
.bn-hero-photo-tint {
	display: none;
}

/* Même logique de voile que `.bn-closing::after` : assure la lisibilité du
   titre blanc en bas, quelle que soit la photo.
   2026-09-10 — le voile allait jusqu'à 70% de noir en bas (quasi opaque),
   pensé pour les anciennes photos SOMBRES. D'abord allégé à 40% — mais les
   photos sont maintenant CLAIRES (fond crème/gris pâle) : un voile trop léger
   ne garantit plus assez de contraste pour le titre blanc. Remonté à 55%,
   qui donne ~7:1 de contraste blanc/fond sur ces nouvelles photos (mesuré sur
   la zone la plus claire) — au-dessus du seuil AA (4.5:1). */
.aod-home__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(11, 10, 8, .10) 0%, rgba(11, 10, 8, .55) 100%);
}

/* 2026-09-16 — retour owner : plus de texte dans le héro, le diaporama porte
   déjà la marque (logo/texte incrusté sur les visuels). Titre et slogan du
   shortcode générique [aod_home] restent dans le DOM (le H1 garde son rôle
   SEO/accessibilité — cf. commentaire de bn_hero_photo_markup()) mais sont
   masqués visuellement ici, jamais dans le plugin partagé. */
.aod-home__title,
.aod-home__tagline {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.aod-home__cta {
	position: relative;
	z-index: 3;
}

/* Le bouton du héro reste blanc plein sur la photo sombre — sans glow animé. */
.aod-home__hero .aod-home__btn {
	background: #fff !important;
	color: var(--cd-ink) !important;
	border-color: #fff !important;
	box-shadow: none;
}
.aod-home__hero .aod-home__btn:hover {
	background: transparent !important;
	color: #fff !important;
}

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

.aod-home__h2 {
	font-family: var(--bn-font-serif);
	color: var(--cd-ink);
	font-weight: 600;
	font-size: clamp(1.5rem, 3.6vw, 2rem);
	position: relative;
	padding-block-end: 0.6rem;
}
.aod-home__h2::after {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	margin-block-start: 0.6rem;
	margin-inline: auto;
	background: var(--cd-ink);
	border-radius: 0;
}
.aod-contact__details .aod-home__h2::after {
	margin-inline: 0;
}

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

/* 2026-09-16 — retour owner : « pro et très animé », sans texte à écrire.
   La colonne titre+photo est remplacée par une rangée de 4 « piliers » —
   icône SVG maison, animée en continu, + micro-libellé (2-3 mots, jamais une
   phrase). Fond dégradé plein-bord conservé (même recette que le héro). */
.bn-story {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3.5rem, 9vw, 6rem);
	padding-inline: 1rem;
	max-width: 1200px;
	margin-inline: auto;
}
.bn-story::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 100vw;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: -1;
	background-color: var(--cd-page-2);
	background-image: radial-gradient(560px circle at 90% 15%, rgba(var(--cd-accent-rgb), .12), transparent 70%);
}

/* Visuel produit — carte flottante, cadre blanc + ombre, même halo pulsé que
   les orbes des piliers juste en dessous (signature reprise). Centrée et DANS
   le flux (pas en `position:absolute`) : évite tout chevauchement avec les
   piliers, à n'importe quelle largeur d'écran, sans media query dédiée. */
.bn-feature {
	position: relative;
	/* 2026-09-16 — retour owner : agrandie (était clamp(160px,22vw,230px)),
	   toujours centrée au-dessus des piliers — plus de présence. */
	inline-size: clamp(230px, 32vw, 360px);
	margin-inline: auto;
	margin-block-end: clamp(2.25rem, 6vw, 3.5rem);
	animation: bn-pillar-float 5s ease-in-out infinite;
}
.bn-feature__glow {
	position: absolute;
	inset: -18%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--cd-accent-rgb), .35), transparent 70%);
	animation: bn-pillar-pulse 3.6s ease-in-out infinite;
}
.bn-feature__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--cd-r-lg);
	border: 8px solid var(--cd-card);
	box-shadow: 0 26px 52px -18px rgba(var(--cd-accent-rgb), .5);
	transform: rotate(-3deg);
	transition: transform var(--cd-t-base) var(--cd-ease-out);
}
.bn-feature:hover .bn-feature__img {
	transform: rotate(0deg) scale(1.03);
}

.bn-pillars {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.75rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem);
}
@media (min-width: 700px) {
	.bn-pillars {
		grid-template-columns: repeat(4, 1fr);
	}
}

.bn-pillar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
	/* Flotte doucement, en continu — chaque pilier décalé (`--bn-pillar-i`,
	   posé inline par functions.php) pour ne pas respirer comme un seul bloc. */
	animation: bn-pillar-float 4.5s ease-in-out infinite;
	animation-delay: calc(var(--bn-pillar-i, 0) * .28s);
}
@keyframes bn-pillar-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

.bn-pillar__orb {
	position: relative;
	inline-size: clamp(84px, 11vw, 112px);
	block-size: clamp(84px, 11vw, 112px);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cd-accent-strong);
	/* Dégradé plus saturé (accent atteint dès 78%, pas seulement au bord) —
	   la version d'origine restait presque blanche : trop pâle pour un effet
	   "bille de verre" premium. */
	background: radial-gradient(circle at 32% 28%, #fff 0%, var(--cd-accent-soft) 22%, var(--cd-accent) 78%, var(--cd-accent-strong) 100%);
	box-shadow: 0 16px 32px -14px rgba(var(--cd-accent-rgb), .55), inset 0 2px 5px rgba(255, 255, 255, .7);
	transition: transform var(--cd-t-base) var(--cd-ease-out);
}
.bn-pillar__orb svg {
	inline-size: 46%;
	block-size: 46%;
	overflow: visible;
}
/* Halo qui respire derrière l'orbe — même décalage que le flottement, pour
   que lueur et mouvement restent synchronisés sur un même pilier. */
.bn-pillar__orb::before {
	content: "";
	position: absolute;
	inset: -16%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--cd-accent-rgb), .38), transparent 70%);
	animation: bn-pillar-pulse 3.2s ease-in-out infinite;
	animation-delay: calc(var(--bn-pillar-i, 0) * .28s);
}
@keyframes bn-pillar-pulse {
	0%, 100% { transform: scale(.88); opacity: .45; }
	50%      { transform: scale(1.18); opacity: 1; }
}
.bn-pillar:hover .bn-pillar__orb {
	transform: scale(1.07);
}

.bn-pillar__label {
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-size: clamp(.8rem, 1.6vw, .92rem);
	letter-spacing: .02em;
	color: var(--cd-ink);
}

/* ── Icônes — chacune anime SA propre partie du SVG (currentColor, donc
   toujours à l'accent — jamais de couleur littérale dans les icônes). ── */
.bn-ic-moon {
	transform-box: fill-box;
	transform-origin: center;
	animation: bn-ic-glow 4s ease-in-out infinite;
}
@keyframes bn-ic-glow {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
	50%      { filter: drop-shadow(0 0 7px rgba(255, 255, 255, .8)); }
}
.bn-ic-stars path,
.bn-ic-star-sm,
.bn-ic-star-sm2 {
	transform-box: fill-box;
	transform-origin: center;
	animation: bn-ic-twinkle 2.4s ease-in-out infinite;
}
.bn-ic-star-sm  { animation-delay: .4s; }
.bn-ic-star-sm2 { animation-delay: .8s; }
@keyframes bn-ic-twinkle {
	0%, 100% { opacity: .35; transform: scale(.7); }
	50%      { opacity: 1;   transform: scale(1.2); }
}

.bn-ic-sparkle {
	transform-box: fill-box;
	transform-origin: center;
	animation: bn-ic-spin 7s linear infinite;
}
@keyframes bn-ic-spin {
	to { transform: rotate(360deg); }
}
.bn-ic-sparkle-dot {
	transform-box: fill-box;
	transform-origin: center;
	animation: bn-ic-twinkle 1.8s ease-in-out infinite .3s;
}

.bn-ic-leaf {
	transform-box: fill-box;
	transform-origin: 30% 85%;
	animation: bn-ic-sway 3.6s ease-in-out infinite;
}
@keyframes bn-ic-sway {
	0%, 100% { transform: rotate(-7deg); }
	50%      { transform: rotate(7deg); }
}

.bn-ic-drop {
	transform-box: fill-box;
	transform-origin: center;
	animation: bn-ic-bob 3s ease-in-out infinite;
}
@keyframes bn-ic-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}
.bn-ic-drop-shine {
	transform-box: fill-box;
	transform-origin: center;
	animation: bn-ic-twinkle 2.6s ease-in-out infinite .5s;
}

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

/* 2026-09-09 — demande owner : section jugée "moche" à côté des voisines déjà
   passées au dégradé. Les deux pseudo-éléments ci-dessous (`::before` fond,
   `::after` filet) étaient déjà prévus pour être animés — cf. le garde
   `prefers-reduced-motion` de cette section, qui parlait d'un "filet du
   haut" animé et d'un mesh de fond alors qu'aucun des deux n'existait plus
   dans le CSS actif (même schéma que header/héro/histoire/catégories). */
/* 2026-09-09 — retour owner : section coincée dans la largeur de contenu
   normale (~1020px) au milieu d'un fond blanc qui, lui, va bord à bord —
   deux bandes blanches disgracieuses de chaque côté alors que TOUTES les
   sections voisines (héro, histoire, catégories, clôture) sont plein-bord.
   Le fond passe donc en 100vw (même technique que `.bn-story::before`),
   même si le contenu (les 3 cartes) reste, lui, dans la colonne normale. */
.aod-home__reassure {
	position: relative;
	isolation: isolate;
	overflow: visible;
	background: var(--cd-page-2) !important;
	border-radius: 0;
	counter-reset: bn-promise;
}
.aod-home__reassure::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 100vw;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: -1;
	background:
		radial-gradient(560px circle at 88% 8%, rgba(232, 143, 179, .16), transparent 60%),
		radial-gradient(520px circle at 10% 92%, rgba(var(--cd-accent-rgb), .15), transparent 60%),
		radial-gradient(480px circle at 50% 50%, rgba(var(--cd-accent-rgb), .10), transparent 65%),
		var(--cd-page-2);
	background-size: 200% 200%, 200% 200%, 200% 200%, auto;
	animation: bn-reassure-bg-flow 24s ease-in-out infinite alternate;
}
@keyframes bn-reassure-bg-flow {
	0%   { background-position: 0% 0%, 100% 100%, 40% 60%, 0 0; }
	100% { background-position: 30% 30%, 70% 70%, 60% 40%, 0 0; }
}
/* Filet dégradé en tête de section — même signature que header/héro/histoire/
   catégories, reprise une dernière fois avant la bannière de clôture. */
.aod-home__reassure::after {
	content: "";
	position: absolute;
	inline-size: 100vw;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inset-block-start: 0;
	block-size: 3px;
	background: linear-gradient(90deg, #14122B, #3B3FA8, #14122B, #14122B);
	background-size: 300% 100%;
	animation: bn-reassure-line-flow 6s linear infinite;
}
@keyframes bn-reassure-line-flow {
	to { background-position: 300% 0; }
}

.aod-home__promise {
	position: relative;
	background: var(--cd-card);
	border-radius: 18px;
	padding: 1.9rem 1.35rem 1.6rem;
	box-shadow: 0 1px 3px rgba(30, 48, 80, .07);
	border: 1px solid var(--cd-line);
	transition: transform .4s cubic-bezier(.22, 1, .36, 1),
	            box-shadow .4s var(--cd-ease-out),
	            border-color .4s var(--cd-ease-out);
}
.aod-home__promise:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px -18px rgba(var(--cd-accent-rgb), .3);
	border-color: transparent;
}

/* Numéro « 1, 2, 3 » — pastille dégradée, assortie au reste du site. */
.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: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, #14122B, #3B3FA8);
	color: var(--cd-white);
	font-family: "Barlow", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	box-shadow: 0 4px 10px -4px rgba(var(--cd-accent-rgb), .55);
}

/* 2026-09-16 — rebrand Ayyur : les photos stock (billets/camion/chrono)
   tranchaient avec l'esthétique "bille de verre" lunaire du reste du site
   (cf. `.bn-pillar__orb`). Le rond reprend le MÊME dégradé glossy que les
   piliers — cohérence visuelle entre les deux sections — et l'illustration
   SVG déjà injectée par bn-home-anim.js (billet+pièces / épingle+trajet /
   chrono+onde, teintée via les tokens d'accent) redevient visible et animée
   au lieu d'une photo figée. Le SVG Phosphor du plugin (`aria-hidden`) reste
   masqué : c'est notre art qui tient le rôle d'icône ici. */
.aod-home__ico svg:not(.bn-art-svg) {
	display: none;
}
.aod-home__ico {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	color: var(--cd-accent-strong);
	background: radial-gradient(circle at 32% 28%, #fff 0%, var(--cd-accent-soft) 22%, var(--cd-accent) 78%, var(--cd-accent-strong) 100%);
	box-shadow: 0 0 0 4px var(--cd-card),
	            0 10px 24px -12px rgba(var(--cd-accent-rgb), .55),
	            inset 0 2px 5px rgba(255, 255, 255, .55);
	transition: transform var(--cd-t-base) var(--cd-ease-out),
	            box-shadow var(--cd-t-base) var(--cd-ease-out);
}
/* Halo qui respire derrière chaque rond — même recette que `.bn-pillar__orb::before`,
   décalé par carte pour ne pas respirer comme un seul bloc. */
.aod-home__ico::before {
	content: "";
	position: absolute;
	inset: -16%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--cd-accent-rgb), .38), transparent 70%);
	animation: bn-pillar-pulse 3.2s ease-in-out infinite;
}
.aod-home__promise:nth-child(2) .aod-home__ico::before { animation-delay: .28s; }
.aod-home__promise:nth-child(3) .aod-home__ico::before { animation-delay: .56s; }
.aod-home__promise:hover .aod-home__ico {
	transform: scale(1.08) rotate(-3deg);
	box-shadow: 0 0 0 4px var(--cd-card),
	            0 14px 30px -12px rgba(var(--cd-accent-rgb), .6),
	            inset 0 2px 5px rgba(255, 255, 255, .55);
}

/* Illustration bn-home-anim.js (billet+pièces / épingle+trajet / chrono+onde)
   — remplace la photo dans le rond d'icône. `overflow:hidden` sur
   `.aod-home__ico` recadre le SVG en cercle ; le viewBox (0 0 64 64) est
   centré et légèrement zoomé pour remplir le rond sans marge morte. */
.aod-home__art {
	position: absolute;
	inset: -6%;
	display: block;
}
.bn-art-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}
.bn-art-float {
	animation: bn-art-float 3.6s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}
@keyframes bn-art-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}
.bn-art-coin {
	animation: bn-art-coin-bounce 2.4s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}
.bn-art-coin--b { animation-delay: .35s; }
@keyframes bn-art-coin-bounce {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-2.5px) scale(1.05); }
}
.bn-art-route {
	stroke-dasharray: 1 7;
	animation: bn-art-route-flow 1.6s linear infinite;
}
@keyframes bn-art-route-flow {
	to { stroke-dashoffset: -16; }
}
.bn-art-ping {
	transform-box: fill-box;
	transform-origin: center;
	animation: bn-art-ping 2.4s ease-out infinite;
}
.bn-art-ping--b { animation-delay: 1.2s; }
@keyframes bn-art-ping {
	0%   { transform: scale(.7); opacity: .6; }
	100% { transform: scale(1.25); opacity: 0; }
}
.bn-art-hand {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: bn-art-hand-tick 2s steps(12) infinite;
}
@keyframes bn-art-hand-tick {
	to { transform: rotate(360deg); }
}

.aod-home__promise h3 {
	position: relative;
	display: inline-block;
	font-family: var(--bn-font-serif);
	font-weight: 600;
	color: var(--cd-ink);
}

/* Trait accent qui se déploie sous le titre au survol */
.aod-home__promise h3::after {
	content: "";
	position: absolute;
	inset-block-end: -4px;
	inset-inline-start: 50%;
	inline-size: 0;
	block-size: 1px;
	background: var(--cd-ink);
	transition: inline-size var(--cd-t-base) var(--cd-ease-out),
	            inset-inline-start var(--cd-t-base) var(--cd-ease-out);
}
.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). 2026-09-09 — demande owner : l'ancienne image (rendu 3D
   isométrique générique, cf. historique git) désaturée à 85% ET recouverte
   d'un voileà 55% ne se lisait plus comme une photo — juste un aplat sombre.
   Remplacée par une vraie photo (sac kraft, même famille que le héro), EN
   COULEUR (le désaturé est un choix qu'on a déjà défait ailleurs sur ce
   site — cf. héro, "Notre histoire"), sous un voile en DÉGRADÉ plutôt qu'un
   aplat uniforme : la photo reste visible en haut, le texte reste lisible en
   bas. Le petit visuel isométrique décoratif (`.bn-closing__art`) est retiré
   avec l'ancienne image — il jurait déjà avec le reste du site et n'apporte
   aucune information que le texte ne porte déjà. */
/* 2026-09-09 — demande owner : "pas de marge, pas des espaces". La section
   restait piégée dans `.inside-article` (padding 40px/30px, cf. le même
   correctif déjà posé sur `.aod-home__hero` plus haut dans ce fichier) ET
   dans la marge de fermeture de `.site-main` (`.separate-containers
   .site-main{margin:20px}`, GeneratePress) : une bande crème visible sur les
   4 côtés. Même technique que le héro — plein-bord horizontal (100vw) ET
   marge négative en pied pour annuler les DEUX écarts cumulés (-60px/-50px),
   puisque `.bn-closing` est le DERNIER élément de la page, comme le héro est
   le premier. */
.bn-closing {
	position: relative;
	overflow: hidden;
	background-color: var(--cd-ink);
	padding-block: clamp(3rem, 9vw, 5.5rem);
	padding-inline: 1rem;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-block-end: -60px;
}
@media (max-width: 768px) {
	.bn-closing {
		margin-block-end: -50px;
	}
}
/* `background-image: inherit` récupère le style inline posé sur
   `.bn-closing` (functions.php) — posée en `::before` plutôt qu'en filter
   direct sur la section, qui affecterait aussi le texte/bouton enfants. */
.bn-closing::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	pointer-events: none;
	animation: bn-closing-kenburns 20s ease-in-out infinite alternate;
}
/* Léger Ken Burns continu — même geste que le héro et "Notre histoire" : un
   fond figé se remarque davantage sur une page qui bouge déjà partout
   ailleurs. */
@keyframes bn-closing-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

.bn-closing__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}

/* Voile en DÉGRADÉ (pas un aplat uniforme) : transparent en haut — la photo
   respire — assombri progressivement vers le bas, là où vit le texte. Même
   logique que le voile des tuiles catégorie plus haut dans ce fichier.
   2026-09-10 — retour owner : « trop noir ». Le bas montait à 82% de noir
   (quasi plein), allégé à 50% max — le texte blanc reste lisible, la photo
   se voit davantage. */
.bn-closing::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(11, 10, 8, .15) 0%, rgba(11, 10, 8, .30) 45%, rgba(11, 10, 8, .50) 100%);
	pointer-events: none;
}

.bn-closing__star {
	display: inline-block;
	font-size: 1.8rem;
	color: #fff;
	margin-block-end: 0.5rem;
}

.bn-closing__title {
	font-family: var(--bn-font-serif);
	font-weight: 600;
	color: #fff;
	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: #fff !important;
	color: var(--cd-ink) !important;
	border-color: #fff !important;
	box-shadow: none;
}
.bn-closing__btn:hover {
	background: transparent !important;
	color: #fff !important;
}

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

/* Signature de section « Nos catégories » (Accueil) : un mesh de dégradés
   radiaux qui dérive lentement — même famille que le halo global du site
   (bebe-nova-laste.css) et le mesh du héro, mais confiné à cette section,
   en version « jour » (fonds clairs, les tuiles catégories restent
   parfaitement lisibles dessus). Posé EN FOND (`::before`/`::after`,
   z-index négatif, plus large que la section) — la boîte réelle du contenu
   (slider, flèches) reste un rectangle normal, jamais recadrée. Contraste
   voulu avec le canevas quadrillé de « Nos produits » juste en dessous :
   ici une couleur vivante qui bouge, là un motif technique fixe — deux
   sections voisines qui ne se ressemblent pas.
   `:has(li.product-category)` cible la bonne des deux `.aod-home__section`
   génériques sans dépendre d'un ordre DOM fragile (la section catégories
   n'existe même pas si le gérant n'a coché aucune catégorie, TEMPLATE.md §5). */
.aod-home__section:has(li.product-category) {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3rem, 7vw, 4.5rem);
}

/* 2026-09-09 — retour d'expérience répété sur header/histoire : un mesh à
   plusieurs calques de dégradés animés (bleu+violet+rose qui dérivent chacun
   dans leur coin) rend un fond brouillon, jamais "moderne". Repli sur la
   MÊME recette validée par l'owner sur le header et "Notre histoire" : encre
   unie + UNE seule lueur discrète et fixe.
   2026-09-10 — retour owner : palette recalée sur `exemple.jpeg`, TOUTES les
   sections repassent claires (header, "Notre histoire" et maintenant celle-
   ci) — plus de "identité sombre du site". Fond encre → crème, lueur violet
   → rouille très légère. */
.aod-home__section:has(li.product-category)::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 100vw;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: -1;
	background-color: var(--cd-page);
	background-image: radial-gradient(620px circle at 88% -10%, rgba(var(--cd-accent-rgb), .10), transparent 65%);
}

/* Titre "Nos catégories" — 2026-09-10 : la section redevient claire, le h2
   générique (`.aod-home__h2`, `color:var(--cd-ink)`) convient de nouveau —
   plus besoin de le repasser en blanc ici. */
.aod-home__section:has(li.product-category) .aod-home__h2 {
	color: var(--cd-ink);
}
.aod-home__section:has(li.product-category) .aod-home__h2::after {
	background: linear-gradient(90deg, #14122B, #3B3FA8);
	height: 3px;
	border-radius: 999px;
}

/* 2026-09-09 — demande owner : cette section aussi jugée trop plate. Le
   commentaire ci-dessus annonçait déjà l'intention d'un "canevas quadrillé"
   avant la passe Mohawk qui l'avait retiré — restitué ici en semis de points
   STATIQUE (pas de dégradé animé comme "Nos catégories" juste au-dessus :
   le contraste entre une couleur vivante qui bouge et un motif technique fixe
   reste voulu, cf. TEMPLATE.md, seule l'intensité change). Estompé aux bords
   via `mask-image` pour ne pas finir en tuile coupée net. */
.aod-home__section:has(li.product):not(:has(li.product-category)) {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.5rem, 6vw, 4rem);
}
.aod-home__section:has(li.product):not(:has(li.product-category))::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 100vw;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: -1;
	background-color: var(--cd-bg);
	background-image: radial-gradient(rgba(var(--cd-accent-rgb), .18) 1.5px, transparent 1.5px);
	background-size: 26px 26px;
	mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, black 40%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, black 40%, transparent 100%);
}

/* 2026-09-10 — retour owner : « le fond de la page Boutique est moche ». Le
   gabarit d'archive WooCommerce/GeneratePress ne pose aucun habillage propre
   (juste le crème uni de `body`) — plat comparé au reste du site. Même semis
   de points que "Nos produits" en accueil (juste au-dessus), posé cette fois
   sur tout le conteneur de la page pour couvrir l'en-tête ET la grille.
   ⚠️ Vérifié dans Chrome : le motif ne se voyait qu'en fine bordure — GP pose
   un fond BLANC OPAQUE sur `.inside-article`, l'enfant direct qui porte tout
   le contenu, et qui masquait donc le motif posé ici en dessous. Neutralisé
   ci-dessous, scopé à ce gabarit (`.woocommerce-archive-wrapper` n'existe
   que sur l'archive Boutique — n'affecte ni les articles ni les pages). */
.woocommerce-archive-wrapper {
	position: relative;
	isolation: isolate;
	padding-block: clamp(1rem, 3vw, 1.5rem) clamp(2.5rem, 6vw, 4rem);
}
.woocommerce-archive-wrapper .inside-article {
	background-color: transparent !important;
}
.woocommerce-archive-wrapper::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 100vw;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: -1;
	background-image: radial-gradient(rgba(var(--cd-accent-rgb), .18) 1.5px, transparent 1.5px);
	background-size: 26px 26px;
	mask-image: radial-gradient(ellipse 85% 80% at 50% 20%, black 40%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 20%, black 40%, transparent 100%);
}

/* En-tête de la page Boutique — sobre, sans halo. */
.woocommerce-products-header {
	position: relative;
	isolation: isolate;
	text-align: center;
	padding-block: clamp(1.5rem, 5vw, 2.5rem) 0.25rem;
}
.woocommerce-products-header__title.page-title {
	position: relative;
	display: inline-block;
	color: var(--cd-ink);
	font-family: var(--bn-font-serif);
	font-weight: 600;
	font-size: clamp(2rem, 5.2vw, 2.6rem);
	margin: 0;
	padding-block-end: 0.65rem;
}
.woocommerce-products-header__title.page-title::after {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	margin-block-start: 0.65rem;
	margin-inline: auto;
	background: var(--cd-ink);
	border-radius: 0;
}

/* 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(--cd-muted);
	font-size: 0.85rem;
	margin-block: 0 1.25rem;
}

/* 2026-09-10 — le style réel du menu "Tri par défaut" vit maintenant dans
   bebe-nova-laste.css (chargé APRÈS ce fichier, donc c'est lui qui gagne la
   cascade — cf. son en-tête). Garder une version ici en double n'aurait fait
   que répéter le piège déjà vu ailleurs : une règle éditée d'un côté et pas
   de l'autre, invisible tant qu'on ne relit pas les deux fichiers. */

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

/* 2026-09-10 — grille produits (Boutique + "Nos produits") passée en CSS
   Grid : WooCommerce/GeneratePress posent par défaut un système de flottants
   à largeurs en % (`columns-4`), pensé avant `grid` — colonnes figées,
   dernière rangée mal répartie si le compte de produits n'est pas un
   multiple de 4. `auto-fill`/`minmax` remplit la largeur disponible avec
   autant de cartes de ~210px que possible, sans jamais les étirer au-delà du
   raisonnable ni les casser sur mobile (1 seule cible needed : le `:not`
   exclut la piste de catégories juste au-dessus, qui reste un flex-scroll). */
.woocommerce ul.products:not(:has(> li.product-category)) {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 1.75rem 1.25rem;
	margin: 0 !important;
	padding: 0;
}
/* 2026-09-24 — le clearfix de woocommerce-layout.css
   (`ul.products::before/::after { content:" "; display:table }`), inutile
   en grille, y devient une VRAIE cellule : mesuré, 1ʳᵉ case vide sur
   « Nos produits » ET « Nos catégories » (cartes décalées d'un cran, une
   carte orpheline à la ligne suivante). Vaut pour les deux grilles. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
	display: none !important;
}
.woocommerce ul.products:not(:has(> li.product-category)) > li.product {
	float: none !important;
	inline-size: auto !important;
	margin: 0 !important;
}

/* Carte produit — élevée au survol (2026-09-09), même geste que les tuiles
   catégorie juste au-dessus : la carte se soulève avec une ombre teintée de
   l'accent, en plus du zoom d'image déjà en place. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	background: var(--cd-card);
	border-radius: 18px;
	padding: 0.75rem 0.75rem 1rem;
	box-shadow: 0 1px 3px rgba(30, 48, 80, .07);
	border: 1px solid var(--cd-line);
	transition: transform .4s cubic-bezier(.22, 1, .36, 1),
	            box-shadow .4s var(--cd-ease-out),
	            border-color .4s var(--cd-ease-out);
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px -18px rgba(var(--cd-accent-rgb), .32);
	border-color: transparent;
}

/* GeneratePress + WooCommerce par défaut : pas de wrapper séparé pour le
   résumé (titre+prix) — le bouton « Commander » est déjà un enfant flex
   DIRECT de `.product` (cf. plus bas `.product .button { margin-block-start:
   auto }`), donc aucun bloc summary n'est nécessaire pour le pousser en bas
   de carte. */

/* 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). `.bn-shop-thumb` est injecté autour de la vignette
   par functions.php (hook `woocommerce_before_shop_loop_item_title`) —
   GeneratePress, contrairement à Astra, ne fournit pas ce wrapper nativement. */
.woocommerce ul.products li.product .bn-shop-thumb {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: var(--cd-page-2);
	display: block;
	margin-block-end: 0.6rem;
}
.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.woocommerce ul.products li.product:hover img {
	transform: scale(1.05);
}

/* Catégorie sur la carte produit — pastille accent, injectée par
   functions.php (hook `woocommerce_before_shop_loop_item_title`) : GP ne
   l'affiche pas nativement, contrairement à Astra. */
.woocommerce ul.products li.product .bn-product-category {
	display: inline-block;
	font-family: "Barlow", sans-serif;
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cd-accent-strong);
	background: var(--cd-accent-soft);
	padding: 0.2rem 0.6rem;
	border-radius: var(--cd-r-pill);
	margin-block: 0.7rem 0.35rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: "Barlow", sans-serif;
	font-weight: 700;
	color: var(--cd-ink);
	font-size: 1.05rem;
	margin-block-end: 0.3rem;
}

.woocommerce ul.products li.product .price {
	color: var(--cd-accent-strong);
	font-family: "Barlow", sans-serif;
	font-weight: 700;
	margin-block-end: 0.6rem;
}

.woocommerce ul.products li.product .price ins {
	color: var(--cd-accent);
	text-decoration: none;
}

/* 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: linear-gradient(135deg, #14122B, #3B3FA8) !important;
	color: var(--cd-white) !important;
	font-family: "Barlow", sans-serif;
	font-weight: 700;
	border-radius: 999px;
}

/* ─────────────────────────────────────────── Catégories : grille de cartes ─── */
/* 2026-09-21 — retour owner : « la section catégories ne me plaît pas »,
   après le diaporama plein écran (nimo, 2026-09-16) puis son correctif de
   contraste (même jour). Plutôt qu'un 3ᵉ correctif sur le même principe,
   remplacé par une grille de cartes claires, inspirée de cosmekarn.dz (photo
   carrée contenue, nom en dessous, bouton texte centré) — la lisibilité
   n'est plus un problème à corriger : le texte n'est plus jamais posé SUR la
   photo. `li.product-category` porte AUSSI la classe `.product` (WooCommerce)
   — elle hérite donc déjà, sans rien écrire ici, du fond blanc/rayon 18px/
   ombre/soulèvement au survol de `.woocommerce ul.products li.product` (plus
   haut dans ce fichier) : même carte que « Nos produits » juste en dessous,
   pour que les deux grilles se lisent comme UN seul système, pas deux. */
.woocommerce ul.products:has(> li.product-category) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1rem, 3vw, 1.75rem);
}
/* WooCommerce pose par défaut `float:left` + une largeur en % sur `li.product`
   (`.columns-3 li.product{width:30.75%}`, woocommerce-layout.css) — calculée
   pour SA grille à lui, en colonnes flottantes. Dans une grille CSS, ce %
   se résout contre la CELLULE, pas le conteneur : mesuré, 72px au lieu de
   remplir sa cellule de 234px. `!important` requis : `.columns-3 li.product`
   compte UNE classe de plus que `li.product-category` (4 contre 3) — à
   spécificité égale nominale, elle nous bat malgré tout, quel que soit
   l'ordre de chargement des feuilles. */
.woocommerce ul.products li.product-category {
	float: none !important;
	inline-size: auto !important;
	margin: 0 !important;
}
.woocommerce ul.products li.product-category > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: inherit;
}
.woocommerce ul.products li.product-category a img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 0.9rem;
	border-radius: 12px;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
/* 2026-09-21 — retour « rends les catégories plus animées » : le zoom seul
   (1.04, à peine perceptible) était le SEUL mouvement de la carte au survol
   avec le soulèvement générique de `.product` — repris plus ample (1.09) et
   accompagné d'une légère rotation, même geste "photo qu'on incline du bout
   des doigts" que nulle part ailleurs sur ce site pour l'instant : de quoi
   distinguer le survol d'une catégorie de celui d'un simple produit. */
.woocommerce ul.products li.product-category:hover a img {
	transform: scale(1.09) rotate(-1.5deg);
}

/* Nom de catégorie — même geste de survol que `.main-title` (le nom du site
   dans l'en-tête) : un trait qui se déploie sous le texte, plutôt qu'un
   nouvel effet inédit sur cette seule carte. Pas d'`order` : le pseudo
   `::after` est déjà généré APRÈS le texte dans le flux — avec `order:0`
   (la valeur par défaut, comme le nom), il vient juste après le nom et
   AVANT `mark.count` (`order:1`) sans qu'on ait à le préciser. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title::after {
	content: "";
	inline-size: 28px;
	block-size: 2px;
	margin-block-start: 0.15rem;
	background: linear-gradient(90deg, #14122B, #3B3FA8);
	border-radius: 999px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .35s var(--cd-ease-out);
}
.woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title::after {
	transform: scaleX(1);
}

/* Filet de secours : une catégorie sans photo perso rend l'icône WooCommerce
   par défaut, minuscule — on l'estompe et on la centre plutôt que de la
   laisser flotter, seule, dans un grand carré crème. */
.woocommerce ul.products li.product-category a img[src*="woocommerce-placeholder"],
.woocommerce ul.products li.product-category a img[src*="placeholder-category"] {
	opacity: .16;
	background: var(--cd-page-2);
	padding: 24%;
	box-sizing: border-box;
	object-fit: contain;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	position: static !important;
	inset: auto !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--bn-font-serif);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0;
	text-align: center !important;
	color: var(--cd-ink);
	text-shadow: none;
	white-space: normal;
}

/* Compteur d'articles — légende discrète, plus une pastille : c'est la
   moins importante des informations de la carte, elle ne doit pas rivaliser
   avec le nom ni avec le bouton juste en dessous. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark.count {
	order: 1;
	background: transparent;
	border: none;
	box-shadow: none;
	color: var(--cd-muted);
	font-family: "Barlow", sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-shadow: none;
	padding: 0;
}

/* Bouton texte « Voir les produits » — injecté par bn-cat-slider.js (le
   shortcode générique du plugin partagé ne rend pas de CTA, cf. le
   commentaire en tête de ce fichier JS). Même recette que les boutons
   `.button` du reste du site (dégradé de marque), en plus petit : c'est un
   CTA secondaire par carte, pas LE bouton principal de la page.
   2026-09-21 — retour « rends les catégories plus animées » : `overflow:hidden`
   + `isolation:isolate` pour porter le même reflet balayant que `.button`
   ailleurs sur le site (`::before`, plus bas) sans le dupliquer sur un
   sélecteur qui ne le portait pas jusqu'ici. Respire doucement au repos
   (SEUL `box-shadow` anime, jamais `transform` — sinon il gagnerait en
   permanence sur le `translateY` du survol juste en dessous). */
.woocommerce ul.products li.product-category .bn-cat-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-block-start: 1rem;
	padding: 0.6rem 1.5rem;
	border-radius: 999px;
	background: linear-gradient(135deg, #14122B, #3B3FA8);
	color: #fff;
	font-family: "Barlow", sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 8px 18px -10px rgba(var(--cd-accent-rgb), .55);
	animation: bn-cat-cta-breathe 2.8s ease-in-out infinite;
	transition: transform var(--cd-t-base) var(--cd-ease-out);
}
@keyframes bn-cat-cta-breathe {
	0%, 100% { box-shadow: 0 8px 18px -10px rgba(var(--cd-accent-rgb), .55); }
	50%      { box-shadow: 0 10px 22px -8px rgba(var(--cd-accent-rgb), .8); }
}
/* Reflet qui balaie le bouton au survol — même geste que `.button` (plus
   haut dans ce fichier), reproduit ici car `.bn-cat-cta` ne porte pas cette
   classe (c'est un texte injecté en JS, pas un `<a class="button">`). */
.woocommerce ul.products li.product-category .bn-cat-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 50%, transparent 65%);
	transform: translateX(-130%);
	transition: transform .6s ease;
	pointer-events: none;
}
/* Petite flèche qui glisse depuis la droite au survol — annonce le clic
   plutôt que de rester un simple label statique. `::after` : un 2ᵉ pseudo,
   le `::before` étant déjà pris par le reflet ci-dessus. */
.woocommerce ul.products li.product-category .bn-cat-cta::after {
	content: "→";
	display: inline-block;
	max-inline-size: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-inline-size .3s var(--cd-ease-out), opacity .3s var(--cd-ease-out);
}
html[dir="rtl"] .woocommerce ul.products li.product-category .bn-cat-cta::after {
	content: "←";
}
.woocommerce ul.products li.product-category:hover .bn-cat-cta {
	transform: translateY(-2px);
}
.woocommerce ul.products li.product-category:hover .bn-cat-cta::before {
	transform: translateX(130%);
}
.woocommerce ul.products li.product-category:hover .bn-cat-cta::after {
	max-inline-size: 1.2em;
	opacity: 1;
}

/* Entrée en fondu au chargement — même famille que la grille produits juste
   en dessous (translateY + opacity), avec un léger `scale` en plus : au
   retour « plus animées », une entrée qui grossit légèrement en apparaissant
   se remarque plus qu'un simple fondu vertical, sans devenir tape-à-l'œil. */
@keyframes bn-cat-tile-in {
	from { opacity: 0; transform: translateY(22px) scale(.94); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.woocommerce ul.products:has(> li.product-category) > li.product-category {
	animation: bn-cat-tile-in .6s var(--cd-ease-out) backwards;
}
.woocommerce ul.products:has(> li.product-category) > li.product-category:nth-child(2) { animation-delay: .1s; }
.woocommerce ul.products:has(> li.product-category) > li.product-category:nth-child(3) { animation-delay: .2s; }
.woocommerce ul.products:has(> li.product-category) > li.product-category:nth-child(4) { animation-delay: .3s; }
.woocommerce ul.products:has(> li.product-category) > li.product-category:nth-child(5) { animation-delay: .4s; }
.woocommerce ul.products:has(> li.product-category) > li.product-category:nth-child(6) { animation-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products:has(> li.product-category) > li.product-category {
		animation: none;
		opacity: 1;
	}
	.woocommerce ul.products li.product-category .bn-cat-cta {
		animation: none;
	}
}

/* ───────────────────────────────────────────────────────── 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: 0;
	overflow: hidden;
	box-shadow: none;
	background: var(--cd-card);
	border: 1px solid var(--cd-line);
}

.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(--cd-card);
}
.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(--cd-r-md);
	cursor: pointer;
	opacity: 0.65;
	border: 2px solid transparent;
	transition: opacity var(--cd-t-base) var(--cd-ease-out),
	            border-color var(--cd-t-base) var(--cd-ease-out),
	            transform var(--cd-t-base) var(--cd-ease-out);
}
.flex-control-thumbs li img:hover {
	opacity: 1;
	transform: translateY(-2px);
}
.flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--cd-accent);
}

/* 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(245, 248, 247, 0.92) !important;
	color: var(--cd-ink) !important;
	box-shadow: var(--cd-shadow-rest);
	transition: transform var(--cd-t-base) var(--cd-ease-out),
	            background-color var(--cd-t-base) var(--cd-ease-out);
}
.woocommerce-product-gallery [data-controls="prev"]:hover,
.woocommerce-product-gallery [data-controls="next"]:hover {
	background: var(--cd-accent) !important;
	color: #fff !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(--cd-muted);
	font-family: "Barlow", sans-serif;
	margin-block-end: 0.9rem;
}
.woocommerce-breadcrumb a { color: var(--cd-muted); }
.woocommerce-breadcrumb a:hover { color: var(--cd-accent); }

.single-product-category {
	display: inline-block;
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cd-muted);
	background: transparent;
	padding: 0;
	border-radius: 0;
	margin-block-end: 0.75rem;
}
.single-product-category a { color: inherit; }

.product_title.entry-title {
	font-family: var(--bn-font-serif);
	color: var(--cd-ink);
	font-weight: 600;
	font-size: clamp(1.7rem, 4.2vw, 2.4rem);
	margin-block: 0 0.5rem;
}

/* `!important` : WooCommerce core (woocommerce.css) cible
   `div.product p.price`/`div.product span.price` — un type+classe de plus
   que nous, donc plus spécifique — et impose son doré `#958e09` par-dessus
   notre encre de marque, quel que soit l'ordre de chargement des feuilles. */
.summary.entry-summary .price {
	font-family: "Barlow", sans-serif;
	color: var(--cd-ink) !important;
	font-weight: 600;
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	margin-block-end: 1rem;
}
.summary.entry-summary .price ins {
	color: var(--cd-ink) !important;
	text-decoration: none;
}
.summary.entry-summary .price del {
	color: var(--cd-muted) !important;
	opacity: 0.7;
	font-size: 0.8em;
}

.woocommerce-product-details__short-description {
	color: var(--cd-muted);
	line-height: 1.75;
	margin-block-end: 1.25rem;
}

.product_meta {
	font-size: 0.85rem;
	color: var(--cd-muted);
	margin-block-end: 1.25rem;
}
.product_meta a { color: var(--cd-accent-strong); }

.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);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 -1px;
	padding: 0;
	border-block-end: 1px solid var(--cd-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: "Barlow", sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--cd-muted);
	border-radius: var(--cd-r-md) var(--cd-r-md) 0 0;
	transition: color var(--cd-t-base) var(--cd-ease-out),
	            background-color var(--cd-t-base) var(--cd-ease-out);
	white-space: nowrap;
}
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--cd-ink);
	background: transparent;
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--cd-ink);
	background: transparent;
	box-shadow: none;
	border-block-end: 2px solid var(--cd-ink);
}

.woocommerce-tabs .woocommerce-Tabs-panel {
	background: var(--cd-card);
	border-radius: 0;
	box-shadow: none;
	padding: clamp(1.25rem, 4vw, 2rem);
	color: var(--cd-muted);
	line-height: 1.75;
}
.woocommerce-tabs .woocommerce-Tabs-panel h2 {
	font-family: var(--bn-font-serif);
	color: var(--cd-ink);
	font-weight: 600;
	font-size: 1.4rem;
	margin-block-start: 0;
}

/* ── Avis clients : étoiles accent, formulaire aligné sur la charte ── */

.woocommerce-Reviews-title {
	font-family: var(--bn-font-serif);
	font-weight: 600;
	color: var(--cd-ink);
}

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

.commentlist {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}
.commentlist .comment {
	background: var(--cd-page-2);
	border-radius: 0;
	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(--cd-line);
	border-radius: var(--cd-r-md);
	padding: 0.7rem 0.9rem;
	font-family: "Barlow", sans-serif;
	background: var(--cd-bg);
	transition: border-color var(--cd-t-base) var(--cd-ease-out),
	            box-shadow var(--cd-t-base) var(--cd-ease-out);
}
#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(--cd-accent);
	box-shadow: 0 0 0 3px var(--cd-accent-soft);
}
#review_form .form-submit input#submit {
	background: var(--cd-ink) !important;
	color: var(--cd-white) !important;
	border: 1px solid var(--cd-ink) !important;
	border-radius: 0 !important;
	padding: 0.7rem 1.6rem;
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	box-shadow: none;
	transition: background-color var(--cd-t-base) var(--cd-ease-out);
}
#review_form .form-submit input#submit:hover {
	background: var(--cd-white) !important;
	color: var(--cd-ink) !important;
	transform: none;
}

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

/* ──────────────────────────────────────────────────────────── Contact ─────── */
/* 2026-09-10 — retour owner : titre "Contact" nu, sans le petit filet que
   portent déjà "Boutique" (`.woocommerce-products-header__title::after`
   ci-dessus) et chaque `<h2>` de section sur l'Accueil (`.aod-home__h2`) —
   seule la page Contact en manquait. `.entry-title` (générique, GeneratePress)
   n'a pas d'équivalent dédié comme la Boutique (page WooCommerce) : ciblé via
   `.bn-page-contact`, posée sur le `<body>` par `_aod_page_key`
   (functions.php) — jamais via `page-id-N`, propre à cette base, ni le slug,
   renommable par le gérant. Filet à GAUCHE (pas centré comme la Boutique) :
   ce titre-ci est aligné à gauche dans son gabarit de page classique, pas
   dans un en-tête centré dédié. */
.bn-page-contact .entry-title {
	position: relative;
	padding-block-end: 0.65rem;
}
.bn-page-contact .entry-title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	display: block;
	width: 32px;
	height: 1px;
	background: var(--cd-ink);
}

/* Deux cartes côte à côte (repli empilé mobile) : les coordonnées en carte
   « mission » (même dégradé accent 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. */

/* 2026-09-10 — retour owner : page Contact à retravailler sérieusement.
   `align-items: start` empêchait les deux cartes de s'aligner en hauteur —
   la carte coordonnées (peu de contenu) s'arrêtait ~170px avant la carte
   formulaire (plus de champs), laissant un grand vide sous elle. Passé en
   `stretch` (comportement par défaut de Grid) : les deux cartes font
   maintenant la même hauteur, quel que soit le nombre de champs du
   formulaire ou de lignes de coordonnées. */
.aod-contact {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: stretch;
	max-width: 1100px;
	margin-inline: auto;
}
@media (min-width: 860px) {
	.aod-contact {
		grid-template-columns: 1fr 1.15fr;
	}
}

/* 2026-09-10 — retour owner : dernière relecture site entier. Ce panneau
   était resté sur `--cd-ink` (fond noir plein), un reliquat d'avant la bascule
   claire du reste du site — jamais revu depuis, faute d'être passé par la
   page Contact. Repris en clair, même carte que `.bn-story__mission`.
   2026-09-10 (2ᵉ passe) — maintenant que `.aod-contact` étire les deux cartes
   à la même hauteur (ci-dessus), cette carte a moins de contenu que le
   formulaire en face : `display:flex` + `justify-content:center` répartit le
   titre/texte/liste au centre plutôt que de les laisser collés en haut avec
   du vide en dessous. Le halo discret en fond (même recette que les mesh de
   section — `.aod-home__reassure::before` etc. — réduit à l'échelle d'une
   carte) évite que ce vide résiduel ne paraisse nu. */
.aod-contact__details {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--cd-card);
	color: var(--cd-ink);
	border: 1px solid var(--cd-line);
	border-radius: 0;
	padding: clamp(1.75rem, 5vw, 2.5rem);
	box-shadow: none;
}
.aod-contact__details::before {
	content: "";
	position: absolute;
	inset-block-start: -20%;
	inset-inline-end: -15%;
	inline-size: 60%;
	block-size: 60%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle, rgba(var(--cd-accent-rgb), .12), transparent 70%);
}
.aod-contact__details > * {
	position: relative;
	z-index: 1;
}

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

.aod-contact__intro {
	color: var(--cd-muted);
	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(--cd-ink) !important;
	font-weight: 600;
	text-underline-offset: 3px;
}
.aod-contact__list a:hover {
	color: var(--cd-accent-strong) !important;
}
.aod-contact__list span:not(.aod-contact__ico) {
	color: var(--cd-ink);
}

.aod-contact__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--cd-accent-soft);
	color: var(--cd-accent-strong);
	font-size: 1.05rem !important;
}

/* 2026-09-24 — `.aod-cod` (aod-cod-form.css) pose `margin: 24px 0 auto` +
   `max-width: 640px` pour le formulaire de COMMANDE. Dans la grille Contact,
   une marge `auto` annule l'étirement : mesuré, un formulaire de 244px dans
   une cellule de 524px (tiers droit vide), décalé de 24px sous la carte d'en
   face. On rend la cellule au formulaire. */
.aod-contact > .aod-contact__form {
	margin: 0;
	max-width: none;
}
.aod-contact__form {
	background: var(--cd-card);
	border-radius: 0;
	padding: clamp(1.25rem, 4vw, 2rem);
	box-shadow: none;
	border: 1px solid var(--cd-line);
}

/* 2026-09-10 — retour owner : cause trouvée en comparant les deux formulaires
   COD du site. Le plugin (`aod-cod-form.css`) STYLE bien des champs, mais
   via `.aod-cod__form input[type="text"], …` — la classe du VRAI formulaire
   de commande (`class-aod-cod-form.php`, `<form class="aod-cod__form">`).
   Le formulaire Contact, lui, porte `<form class="aod-cod aod-contact__form">`
   (`class-aod-cod-contact.php`) — `aod-contact__form` ≠ `aod-cod__form`,
   la règle du plugin ne l'a donc JAMAIS touché. Pire : cette règle plugin ne
   couvre de toute façon ni `input[type="email"]` ni `textarea` — champs que
   la page Contact utilise. Résultat, depuis toujours : des champs au style
   par défaut du navigateur, jamais celui du site. Plutôt que de corriger le
   plugin partagé (TEMPLATE.md §1 — la classe `aod-contact__form` est propre à
   CE shortcode, pas un bug qui affecte le formulaire de commande), les champs
   sont stylés ICI, dans le thème, sur les tokens Laste comme le reste du site. */
.aod-contact__form .aod-cod__field {
	margin-block-end: 1.3rem;
}
.aod-contact__form label {
	display: block;
	margin-block-end: 0.5rem;
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cd-ink);
}
.aod-contact__form label span {
	color: var(--cd-accent-strong);
}
.aod-contact__form input[type="text"],
.aod-contact__form input[type="email"],
.aod-contact__form input[type="tel"],
.aod-contact__form textarea {
	display: block;
	inline-size: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.95rem;
	border: 1px solid var(--cd-line);
	border-radius: var(--cd-r-pill, 4px);
	background: var(--cd-field, var(--cd-bg));
	color: var(--cd-ink);
	font-family: "Barlow", sans-serif;
	font-size: var(--cd-fs-sm, 0.9rem);
	transition: border-color var(--cd-t-base) var(--cd-ease-out),
	            box-shadow var(--cd-t-base) var(--cd-ease-out);
}
.aod-contact__form textarea {
	/* Le rayon « pilule » des champs d'une ligne fait d'un bloc multiligne un
	   ovale qui rogne le texte dans ses coins (2026-09-24). */
	border-radius: var(--cd-r-lg, 16px);
	resize: vertical;
	min-block-size: 130px;
	line-height: 1.6;
}
.aod-contact__form input[type="text"]:hover,
.aod-contact__form input[type="email"]:hover,
.aod-contact__form input[type="tel"]:hover,
.aod-contact__form textarea:hover {
	border-color: var(--cd-accent);
}
/* La bague de focus (couleur + halo) vient déjà de la règle globale
   `input:focus, textarea:focus` (bebe-nova-laste.css) — pas de doublon ici. */

.aod-contact__form ::placeholder {
	color: var(--cd-muted);
	opacity: 0.8;
}

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

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

/* 2026-09-09 — demande owner : pied de page jugé trop simple. Repris dans la
   même identité que le reste du site — fond encre + filet dégradé animé.
   2026-09-10 — retours owner successifs : palette recalée sur `exemple.jpeg`
   puis fond repassé clair. Ce bloc ne pilote plus la couleur (cf.
   bebe-nova-laste.css, qui cible en plus `.site-info` — l'élément
   RÉELLEMENT peint, découvert lors du 3ᵉ retour) : gardé seulement pour le
   `position:relative` et le padding. */
.site-footer {
	position: relative;
}

.site-footer {
	padding-block: 2.25rem;
}

.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
	color: var(--cd-ink);
}

/* 2026-09-10 — pied de page reconstruit ("moche" avant : tout entassé sur
   une seule ligne, sans hiérarchie). Structure en 3 temps, généreusement
   espacés : marque + slogan, nav, puis une barre basse fine (copyright ·
   crédit) séparée par un liseré. `bn_bag_icon()` (functions.php) fournit
   le SVG inline. */
.inside-site-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-block: clamp(3rem, 7vw, 4.5rem) 2rem;
}

.bn-footer-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.bn-footer-brand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, #14122B, #3B3FA8);
	color: var(--cd-white);
	font-size: 16px;
}
.bn-footer-brand-name {
	font-family: var(--bn-font-serif);
	font-weight: 600;
	font-size: 1.35rem;
	color: var(--cd-ink);
	letter-spacing: -0.01em;
}

.bn-footer-tagline {
	margin: 0.6rem 0 0;
	max-width: 40ch;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--cd-muted);
}

.bn-footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	margin-block-start: 2rem;
}
.bn-footer-nav a {
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	color: var(--cd-ink);
	text-decoration: none;
	position: relative;
	padding-block-end: 0.25rem;
}
.bn-footer-nav a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	inline-size: 100%;
	block-size: 1px;
	background: var(--cd-accent);
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform var(--cd-t-base) var(--cd-ease-out);
}
.bn-footer-nav a:hover,
.bn-footer-nav a:focus-visible {
	color: var(--cd-accent);
}
.bn-footer-nav a:hover::after,
.bn-footer-nav a:focus-visible::after {
	transform: scaleX(1);
}

.bn-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: clamp(2rem, 5vw, 3rem);
	padding-block-start: 1.5rem;
	inline-size: 100%;
	border-block-start: 1px solid var(--cd-line);
	font-family: "Barlow", sans-serif;
	font-size: 0.78rem;
}
.bn-footer-bottom p {
	margin: 0;
}
.bn-copyright {
	color: var(--cd-muted);
}
.bn-footer-dot {
	color: var(--cd-line);
}
.bn-credit {
	color: var(--cd-muted);
}
.bn-credit a {
	color: var(--cd-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--cd-t-base) var(--cd-ease-out);
}
.bn-credit a:hover,
.bn-credit a:focus-visible {
	color: var(--cd-accent);
}

/* Bouton « retour en haut » (GeneratePress) — même pilule dégradée que les
   boutons du reste du site, avec le même soulèvement au survol. */
.generate-back-to-top {
	background: linear-gradient(135deg, #14122B, #3B3FA8) !important;
	color: var(--cd-white) !important;
	box-shadow: 0 10px 24px -12px rgba(var(--cd-accent-rgb), .55);
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
	            box-shadow .3s var(--cd-ease-out),
	            background .3s var(--cd-ease-out);
}
.generate-back-to-top:hover {
	background: linear-gradient(135deg, #3B3FA8, #14122B) !important;
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -12px rgba(var(--cd-accent-rgb), .65);
}

/* ═══════════════════════════════════════════════════════ Animations modernes ═ */

/* ── Scroll-reveal system ── */
.bn-reveal {
	opacity: 0;
	transform: translateY(32px) scale(0.97);
	filter: blur(6px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.bn-reveal.bn-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
}

/* Staggered children */
.aod-home__reassure .bn-reveal:nth-child(1) { transition-delay: 0s; }
.aod-home__reassure .bn-reveal:nth-child(2) { transition-delay: 0.1s; }
.aod-home__reassure .bn-reveal:nth-child(3) { transition-delay: 0.2s; }

/* ── Hero — simple fondu à l'entrée, sans zoom/flou/luminosité animés. ── */
.aod-home__hero {
	animation: bn-fade-in .6s ease-out backwards;
}
@keyframes bn-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Product cards — entrée échelonnée sur la page Boutique ── */
.woocommerce ul.products li.product.bn-reveal {
	transition-delay: calc(var(--bn-card-index, 0) * 0.06s);
}
/* `--bn-card-index` n'est posée nulle part (calc() retombe donc toujours sur
   0) : `:nth-child` la remplace par un vrai échelonnement, plus spécifique
   pour gagner sur la règle ci-dessus. `:not(.product-category)` exclut les
   tuiles catégorie (elles portent aussi `.product` en WooCommerce classique)
   — leur propre stagger vit avec le reste de "Nos catégories" plus haut. */
.woocommerce ul.products li.product.bn-reveal:not(.product-category):nth-child(2) { transition-delay: .06s; }
.woocommerce ul.products li.product.bn-reveal:not(.product-category):nth-child(3) { transition-delay: .12s; }
.woocommerce ul.products li.product.bn-reveal:not(.product-category):nth-child(4) { transition-delay: .18s; }
.woocommerce ul.products li.product.bn-reveal:not(.product-category):nth-child(5) { transition-delay: .24s; }
.woocommerce ul.products li.product.bn-reveal:not(.product-category):nth-child(6) { transition-delay: .3s; }
.woocommerce ul.products li.product.bn-reveal:not(.product-category):nth-child(7) { transition-delay: .36s; }
.woocommerce ul.products li.product.bn-reveal:not(.product-category):nth-child(8) { transition-delay: .42s; }

/* ── Titre de section — le filet se déploie avec le fondu du bloc ── */
.aod-home__h2::after {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.bn-visible.aod-home__h2::after {
	transform: scaleX(1);
}

/* Mouvement : on respecte la préférence système, comme le reste du socle. */
@media (prefers-reduced-motion: reduce) {
	/* Mesh de "Nos catégories" et filet dégradé de son titre (2026-09-09) —
	   mêmes deux animations continues que le header/héro/histoire, même
	   garde-fou. */
	.aod-home__section:has(li.product-category)::before,
	.aod-home__section:has(li.product-category) .aod-home__h2::after {
		animation: none !important;
	}
	/* Bouton « découvrir » (lueur qui respire) et badge-icône (flottement) des
	   tuiles catégorie plein écran (2026-09-16) — même garde que les flèches
	   du carrousel juste en dessous. */
	.woocommerce ul.products li.product-category > a::after,
	.woocommerce ul.products li.product-category .woocommerce-loop-category__title::before,
	.bn-cat-slider__arrow {
		animation: none !important;
	}
	.button, .aod-home__btn, .aod-home__promise,
	.button::before, .wp-block-button__link::before, .aod-home__btn::before,
	.woocommerce a.button::before, .woocommerce button.button::before,
	.woocommerce ul.products li.product .button::before,
	.aod-cod .aod-cod__submit::before,
	.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,
	.button:hover::before, .wp-block-button__link:hover::before,
	.aod-home__btn:hover::before, .woocommerce a.button:hover::before,
	.woocommerce button.button:hover::before,
	.woocommerce ul.products li.product .button:hover::before,
	.aod-cod .aod-cod__submit:hover::before,
	.woocommerce ul.products li.product:hover,
	.woocommerce ul.products li.product-category:hover,
	.woocommerce ul.products li.product-category:hover img {
		transform: none !important;
	}
	/* En-tête : le survol du logo, du nom et des entrées de menu change
	   toujours d'état — mais sans trajet animé (transition coupée). L'entrée
	   en cascade du logo et des liens au chargement ne joue plus (tout est
	   visible d'emblée), et le survol du logo (bascule + zoom à ressort) ne
	   bouge plus, juste un état hover/actif statique. */
	.site-logo img,
	.main-title a,
	.main-title a::after,
	#site-navigation .menu-item:not(.menu-item-aod-lang) > a,
	#site-navigation .menu-item:not(.menu-item-aod-lang) > a::after,
	.menu-toggle,
	.site-header,
	.inside-header {
		transition: none !important;
	}
	.site-branding-container,
	#site-navigation .menu-item {
		animation: none !important;
		opacity: 1 !important;
	}
	.site-logo a:hover img,
	.site-logo a:active img,
	.menu-toggle:active {
		transform: none !important;
	}
	/* Héro : le pan/zoom du fond, l'entrée et la respiration du bouton
	   s'arrêtent — le bouton reste affiché, immobile. Le Ken Burns du
	   diaporama (2026-09-16) s'arrête aussi — la photo active reste affichée,
	   immobile (le fondu entre photos est couvert par la règle scopée juste
	   après la définition de `.bn-hero-slide`, plus haut dans ce fichier). */
	.aod-home__hero::before,
	.bn-hero-slide,
	.aod-home__hero .aod-home__btn {
		animation: none !important;
	}
	.bn-hero-photos {
		transform: none !important;
	}
	.aod-home__cta {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	/* Notre histoire : le flottement des piliers, le halo qui pulse et toutes
	   les micro-animations d'icône (lune, étincelle, feuille, goutte)
	   s'arrêtent — les 4 icônes restent affichées, immobiles. */
	.bn-feature,
	.bn-feature__glow,
	.bn-pillar,
	.bn-pillar__orb::before,
	.bn-ic-moon,
	.bn-ic-stars path,
	.bn-ic-star-sm,
	.bn-ic-star-sm2,
	.bn-ic-sparkle,
	.bn-ic-sparkle-dot,
	.bn-ic-leaf,
	.bn-ic-drop,
	.bn-ic-drop-shine {
		animation: none !important;
	}
	.bn-feature,
	.bn-pillar {
		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;
	}
	/* Filet défensif : `bn-home-anim.js` n'injecte déjà PAS ces illustrations
	   sous ce média (son propre garde en tête de fichier), donc `.aod-home__art`
	   n'existe normalement pas dans le DOM ici — au cas où. */
	.bn-art-float,
	.bn-art-coin,
	.bn-art-route,
	.bn-art-ping,
	.bn-art-hand {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	/* Bannière de clôture : même traitement que la carte « Notre mission ».
	   Le Ken Burns (2026-09-09) vit sur `::before`, pas sur `.bn-closing`
	   lui-même — une règle sur l'élément ne s'applique jamais à son
	   pseudo-élément. */
	.bn-closing,
	.bn-closing::before,
	.bn-closing__star {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	/* Animations modernes : tous les effets scroll/reveal/float désactivés. */
	.bn-reveal {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
	.bn-char {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.bn-sparkles,
	.bn-ripple {
		display: none !important;
	}
	.aod-home__hero,
	.aod-home__hero::after,
	.aod-home__reassure::before,
	.bn-closing,
	.aod-contact__details {
		animation: none !important;
	}
	.aod-home__h2::after {
		transform: scaleX(1) !important;
		transition: none !important;
	}
	.aod-home__btn::after {
		display: none !important;
	}
	.aod-home__btn,
	.bn-closing__btn,
	.bn-pillar__orb {
		transition: none !important;
	}
	.aod-home__btn:hover,
	.bn-closing__btn:hover,
	.bn-pillar:hover .bn-pillar__orb {
		transform: none !important;
	}
	/* Pied de page : le filet dégradé du haut s'arrête, le bouton « retour en
	   haut » garde sa réponse au survol, sans le déplacement. */
	.site-footer::before {
		animation: none !important;
	}
	.generate-back-to-top,
	.site-footer a {
		transition: none !important;
	}
	.generate-back-to-top:hover {
		transform: none !important;
	}
}