/**
 * 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: #141414;
	--bn-teal-dark: #141414;
	--bn-teal-darker: #0D0D0D;
	--bn-teal-tint: var(--cd-accent-soft, #F3E3D6);
	--bn-gold: #141414;
	--bn-gold-dark: #141414;
	--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, #141414, #C1662F) !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(193, 102, 47, .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(193, 102, 47, .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-page) !important;
	border-block-end: 1px solid transparent !important;
	transition: border-color 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;
}

.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`. */

/* Le logo est désormais une icône seule (sac + point du logo nimo) — plus un
   lockup complet comme l'ancien « BÉBÉ NOVA » en toutes lettres sur l'étoile.
   Le nom du site redevient donc visible À CÔTÉ, en vraie typographie (nette à
   toute taille, contrairement à du texte écrasé dans un raster de 40px). Le
   sous-titre (`.site-description`) reste masqué : le slogan a déjà sa place,
   grand et lisible, dans le héro de l'Accueil. */
.site-branding-container {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}
.site-branding {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.main-title {
	margin: 0;
	line-height: 1;
}
.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(420px, 54vw, 640px);
	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;
	}
}

/* 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;
}

/* Diptyque plein cadre du héro — assets/img/hero-shop-1.jpg + -2.jpg
   (functions.php), CÔTE À CÔTE. EN COULEUR (retour demandé par l'owner sur la
   version désaturée « façon Mohawk ») : juste un léger boost de
   contraste/saturation pour que les photos restent nettes et « riches » sous
   le voile de lisibilité du titre, sans les dénaturer.

   2026-09-08 : demande owner — présentation « très attirante et animée ».
   Chaque moitié s'ouvre en rideau à l'entrée (rideau gauche pour la photo de
   gauche, rideau droit pour celle de droite — un mouvement en miroir plutôt
   qu'identique), puis un zoom Ken Burns continu et décalé entre les deux
   (jamais synchronisé : ça les ferait respirer comme un seul bloc au lieu de
   deux photos vivantes) prend le relais. Un reflet lumineux traverse chaque
   moitié juste après l'ouverture — dernière touche « premium ». */
.bn-hero-photos {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	isolation: isolate;
	pointer-events: none;
	display: flex;
}

.bn-hero-photo-img {
	position: relative;
	overflow: hidden;
	flex: 1 1 50%;
	min-inline-size: 0;
	background-size: cover;
	background-position: center;
}
.bn-hero-photo-img--a {
	transform-origin: 32% 38%;
	animation-name: bn-hero-reveal-l, bn-hero-kenburns;
	animation-duration: 1.1s, 15s;
	animation-timing-function: cubic-bezier(.22, 1, .36, 1), ease-in-out;
	animation-delay: 0s, .4s;
	animation-iteration-count: 1, infinite;
	animation-direction: normal, alternate;
	animation-fill-mode: both, both;
}
.bn-hero-photo-img--b {
	transform-origin: 68% 62%;
	animation-name: bn-hero-reveal-r, bn-hero-kenburns;
	animation-duration: 1.1s, 15s;
	animation-timing-function: cubic-bezier(.22, 1, .36, 1), ease-in-out;
	animation-delay: .14s, .4s;
	animation-iteration-count: 1, infinite;
	animation-direction: normal, alternate;
	animation-fill-mode: both, both;
}
@keyframes bn-hero-reveal-l {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}
@keyframes bn-hero-reveal-r {
	from { clip-path: inset(0 0 0 100%); }
	to   { clip-path: inset(0 0 0 0); }
}
@keyframes bn-hero-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

/* Reflet lumineux qui balaie chaque moitié une fois, juste après l'ouverture
   en rideau (délai calé sur sa durée). `overflow:hidden` du parent
   (`.bn-hero-photo-img`, ajouté ci-dessus) le garde dans SA moitié — sans ça
   il déborderait sur l'autre photo. */
.bn-hero-photo-img::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
	transform: translateX(-130%);
	animation: bn-hero-shine 1.4s ease-out 1.1s 1 both;
	pointer-events: none;
}

/* Liseré séparant les deux moitiés — devenu un filet dégradé qui défile en
   continu (mêmes teintes que le filet du header, `bn-grad-flow` défini dans
   bebe-nova-laste.css — mais scopé ici en littéral : le héro n'est pas un
   descendant de `.site-header`, donc n'hérite pas de sa custom property). */
.bn-hero-photos::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: 3px;
	transform: translateX(-50%);
	z-index: 2;
	background: linear-gradient(180deg, #141414, #C1662F, #141414, #141414);
	background-size: 100% 300%;
	animation: bn-hero-divider-flow 6s linear infinite;
	box-shadow: 0 0 16px rgba(193, 102, 47, .55);
}
@keyframes bn-hero-shine {
	to { transform: translateX(130%); }
}
@keyframes bn-hero-divider-flow {
	to { background-position: 0 300%; }
}

/* 2026-09-10 — retour owner : version mobile à améliorer. Le diptyque
   côte-à-côte (chaque photo à 50% de LARGEUR, pleine hauteur du héro) donne
   sur un téléphone deux bandes verticales de ~190px de large sur ~450px de
   haut : un recadrage 1:2.4, illisible — le t-shirt et le casque deviennent
   des textures abstraites, pas des photos produit reconnaissables. Empilées
   à la place (chaque photo pleine largeur, moitié de la hauteur), même
   contenu, recadrage bien plus proche du carré d'origine. Le liseré central
   passe de vertical à horizontal pour suivre. */
@media (max-width: 700px) {
	.bn-hero-photos {
		flex-direction: column;
	}
	.aod-home__hero {
		min-height: clamp(520px, 145vw, 720px);
	}
	.bn-hero-photos::after {
		inset-block-start: 50%;
		inset-inline: 0;
		inset-block-end: auto;
		inline-size: auto;
		block-size: 3px;
		transform: translateY(-50%);
		background-size: 300% 100%;
		animation-name: bn-hero-divider-flow-h;
	}
	@keyframes bn-hero-divider-flow-h {
		to { background-position: 300% 0; }
	}
}

/* 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%);
}

/* Titre et slogan — serif éditorial pour le titre, sans pour le slogan (même
   paire que le reste du site : le serif porte la "voix", le sans porte l'info). */
.aod-home__title,
.aod-home__tagline {
	position: relative;
	z-index: 3;
	color: #fff;
}
.aod-home__title {
	font-family: var(--bn-font-serif);
	font-weight: 600;
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin-block: 0 0.6rem;
}
.aod-home__tagline {
	font-family: "Barlow", sans-serif;
	display: block;
	font-weight: 400;
	font-size: clamp(1rem, 2.2vw, 1.15rem);
	color: rgba(255, 255, 255, 0.82);
	max-inline-size: 46ch;
	margin-block: 0 clamp(1.25rem, 4vw, 2rem);
}

.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-09 — demande owner : section jugée trop "à lire" à côté d'un héro
   déjà chargé en texte. La prose (3 paragraphes + phrase de clôture + légende
   sur la photo) est retirée (cf. functions.php, bn_story_markup()) : il ne
   reste que l'amorce (kicker + titre) et la photo boutique. Pour que la
   section garde une présence malgré ce vide, elle gagne un fond dégradé
   animé (même famille que le header/héro, `.bn-story::before`, plein-bord
   comme `.aod-home__hero`) et un filigrane décoratif derrière le titre
   (`--bn-icon-bag`, déjà utilisé ailleurs pour ce genre de motif — cf.
   bebe-nova-laste.css). */
.bn-story {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: 2rem;
	padding-block: clamp(3rem, 8vw, 5rem);
	padding-inline: 1rem;
	max-width: 1100px;
	margin-inline: auto;
}

/* 2026-09-09 — l'aplat uni tout seul faisait trop vide. Reprise de la même
   recette que le header (validée par l'owner) : encre unie + UNE seule
   lueur discrète et FIXE (pas d'animation, pas de second halo) — assez pour
   donner du relief, pas assez pour redevenir "sale".
   2026-09-10 — retour owner : palette recalée sur `exemple.jpeg` (section
   CLAIRE). Fond encre → crème (`--cd-page-2`, légèrement distinct du blanc
   pur pour se détacher du hero/produits juste au-dessus/en-dessous), lueur
   rouille conservée mais très légère sur fond clair. */
.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(193, 102, 47, .10), transparent 70%);
}

.bn-story__col--tale {
	position: relative;
	align-self: center;
}
/* 2026-09-09 — le filigrane (silhouette du logo derrière le titre) chevauchait
   la 2ᵉ ligne du titre une fois celui-ci passé sur deux lignes ("Nimo, une
   histoire de / confiance") : lu comme une forme parasite plutôt qu'une
   décoration. Retiré — le kicker + le trait dégradé en dessous suffisent à
   ancrer la colonne, sans risque de collision avec un titre de longueur
   variable. */

.bn-story__kicker {
	position: relative;
	display: inline-block;
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cd-muted);
	background: transparent;
	padding: 0;
	border-radius: 0;
	margin-block-end: 0.9rem;
}
/* Petit trait dégradé animé — écho du filet du header et de la ligne du
   diptyque du héro : signature visuelle reprise section après section. */
.bn-story__kicker::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: -0.5rem;
	inline-size: 40px;
	block-size: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, #141414, #C1662F, #141414, #141414);
	background-size: 300% 100%;
	animation: bn-story-kicker-flow 6s linear infinite;
}
@keyframes bn-story-kicker-flow {
	to { background-position: 300% 0; }
}

.bn-story__title {
	position: relative;
	font-family: var(--bn-font-serif);
	color: var(--cd-ink);
	font-weight: 600;
	font-size: clamp(2rem, 5.4vw, 3.1rem);
	line-height: 1.1;
	margin-block: 0;
}

/* 2026-09-10 — carte "mission" repassée claire (carte blanche + liseré,
   comme les cartes produit) : le fond encre + texte blanc datait du
   2026-09-09, incohérent avec une section désormais crème. */
.bn-story__mission {
	position: relative;
	overflow: hidden;
	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: var(--cd-shadow-rest, 0 1px 3px rgba(20,20,20,.06));
	height: 100%;
	box-sizing: border-box;
}
.bn-story__mission > * {
	position: relative;
	z-index: 1;
}

.bn-story__star {
	display: inline-block;
	font-size: 1.6rem;
	color: var(--cd-accent);
	margin-block-end: 0.5rem;
}

.bn-story__mission h3 {
	font-family: var(--bn-font-serif);
	font-weight: 600;
	color: var(--cd-ink);
	margin-block: 0 0.85rem;
	font-size: 1.5rem;
}

.bn-story__mission p {
	line-height: 1.7;
	color: var(--cd-muted);
	margin-block: 0 1rem;
}

/* Variante « vitrine » de la carte mission — une vraie photo boutique, plein
   cadre, sans légende (2026-09-09 : la légende faisait aussi partie du texte
   à retirer). EN COULEUR — même choix que le diptyque du héro (l'owner avait
   déjà demandé le retour de la couleur sur la version désaturée « façon
   Mohawk », cf. plus haut) — avec un Ken Burns continu, discret, pour que la
   photo ne reste pas figée alors que le héro juste au-dessus, lui, bouge. */
.bn-story__shop {
	padding: 0;
	background: none;
	min-height: clamp(360px, 42vw, 480px);
	border-radius: 0;
	box-shadow: 0 24px 48px -24px rgba(var(--cd-accent-rgb), .35);
}
/* 2026-09-10 — photo remplacée par un visuel boutique clair (voir .bak3 pour
   l'ancienne texture tissu, qui nécessitait le fort boost de luminosité
   ci-dessous). La nouvelle photo est déjà bien exposée : plus besoin de
   correction agressive, juste une touche de contraste. */
.bn-story__shop-img {
	position: absolute;
	inset: -6%;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: contrast(1.02);
	animation: bn-story-kenburns 18s ease-in-out infinite alternate;
	transform-origin: 55% 45%;
}
@keyframes bn-story-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.1); }
}

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

/* ───────────────────────────────────────────────────────── 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(193, 102, 47, .15), transparent 60%),
		radial-gradient(480px circle at 50% 50%, rgba(193, 102, 47, .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, #141414, #C1662F, #141414, #141414);
	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, #141414, #C1662F);
	color: var(--cd-white);
	font-family: "Barlow", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	box-shadow: 0 4px 10px -4px rgba(193, 102, 47, .55);
}

/* 2026-09-09 — demande owner : les icônes Phosphor ne parlaient pas assez,
   remplacées par de VRAIES photos. Le plugin partagé (`aod-cod-form`) reste
   intact — TEMPLATE.md §1 interdit d'y coder du contenu propre à CE client —
   donc le SVG qu'il génère (déjà `aria-hidden="true"` dans son markup) est
   simplement masqué ici, et le rond devient une photo posée en fond. Ciblé
   par POSITION (`:nth-child`) plutôt que par contenu : l'ordre des 3
   promesses (paiement → livraison → rapidité) est fixe dans
   class-aod-cod-pages.php, jamais réordonné dynamiquement. */
.aod-home__ico svg {
	display: none;
}
.aod-home__ico {
	position: relative;
	z-index: 1;
	display: block;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: var(--cd-page-2);
	box-shadow: 0 0 0 4px var(--cd-card),
	            0 0 0 7px rgba(193, 102, 47, .35),
	            0 10px 24px -12px rgba(193, 102, 47, .5);
	transition: transform var(--cd-t-base) var(--cd-ease-out),
	            box-shadow var(--cd-t-base) var(--cd-ease-out);
}
.aod-home__promise:nth-child(1) .aod-home__ico {
	background-image: url('../img/reassure-cash.jpg?v=2');
}
.aod-home__promise:nth-child(2) .aod-home__ico {
	background-image: url('../img/reassure-delivery.jpg?v=2');
}
.aod-home__promise:nth-child(3) .aod-home__ico {
	background-image: url('../img/reassure-speed.jpg?v=2');
}
.aod-home__promise:hover .aod-home__ico {
	transform: scale(1.08) rotate(-3deg);
	box-shadow: 0 0 0 4px var(--cd-card),
	            0 0 0 7px rgba(193, 102, 47, .55),
	            0 14px 30px -12px rgba(193, 102, 47, .6);
}

/* Illustration bn-home-anim.js (billet+pièces / épingle+trajet / chrono+onde)
   — pensée pour habiller un rond d'ICÔNE vide ; une vraie photo n'en a plus
   besoin, et la superposition brouillait le cliché. Le JS continue de
   l'injecter (générique, partagé avec les autres animations de la page) :
   on la masque juste ici, dans CE contexte précis. */
.aod-home__promise .aod-home__art {
	display: none;
}

/* Icônes statiques — plus de flottement/rebond/ping/tic en continu. */
.bn-art-ping { display: none; }

.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(193, 102, 47, .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, #141414, #C1662F);
	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;
}
.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, #141414, #C1662F) !important;
	color: var(--cd-white) !important;
	font-family: "Barlow", sans-serif;
	font-weight: 700;
	border-radius: 999px;
}

/* Tuiles « catégorie » : photo plein cadre, nom + compteur en plaque dorée
   posée sur l'image (plutôt que du texte à part, sous une vignette) — la
   photo devient l'objet principal de la carte, pas un simple pictogramme.
   Étoile devant le nom : écho discret du bio Instagram de la marque
   (« L'éclat d'une nouvelle étoile ✨ »), même motif que le pied de page
   (`.bn-copyright-icon`) et la bannière de clôture. */
/* 2026-09-09 — demande owner : tuiles "à plat", pas assez "3D". Ombre au
   repos passée d'un simple liseré (1px, quasi invisible) à un vrai
   empilement de calques (contact + portée + lueur de marque) — la carte se
   détache franchement du fond sombre au lieu d'y flotter à peine. */
/* `padding`/`border` : jamais définis ici avant — la puce catégorie porte
   AUSSI la classe `.product` (cf. `<li class="product-category product">`),
   donc héritait en silence du padding/bordure de la CARTE PRODUIT générique
   (`.woocommerce ul.products li.product`, plus bas dans ce fichier) : un
   cadre crème (`--cd-page-2`, le fond de CETTE règle) tout autour de chaque
   tuile catégorie, jamais voulu ici — visible uniquement parce que cette
   règle ne redéfinissait ni l'un ni l'autre. */
.woocommerce ul.products li.product-category {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: 20px;
	padding: 0;
	border: none;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, .3),
		0 14px 28px -10px rgba(0, 0, 0, .45),
		0 18px 36px -14px rgba(193, 102, 47, .3);
	background: var(--cd-page-2);
	transition: transform .4s cubic-bezier(.22, 1, .36, 1),
	            box-shadow .4s var(--cd-ease-out);
	/* 2026-09-10 — retour owner : au premier chargement, la 1ère tuile (celle
	   sur laquelle le carrousel scroll-snap s'aligne dès le layout initial)
	   restait blanche une fraction de seconde — photo et voile invisibles —
	   jusqu'au moindre scroll/survol, qui la faisait apparaître d'un coup.
	   Signature connue des tuiles `overflow:hidden` + `border-radius` +
	   `isolation:isolate` combinées à un point d'ancrage `scroll-snap` :
	   Chromium peint la couche mais ne la synchronise pas toujours avec le
	   compositeur au tout premier layout. `translateZ(0)` force une couche
	   composée dès le départ (no-op visuel, aucun décalage) — le correctif
	   standard pour ce symptôme précis. */
	transform: translateZ(0);
}
/* Coins arrondis sur la carte ET sur l'image (`overflow:hidden` ci-dessus la
   recadre, mais le radius doit aussi être posé sur l'`<a>` — sinon ses coins
   à lui restent droits et débordent visuellement de la carte arrondie). */
.woocommerce ul.products li.product-category > a {
	border-radius: inherit;
}
.woocommerce ul.products li.product-category:hover {
	transform: translateY(-6px) translateZ(0);
	box-shadow: 0 20px 40px -16px rgba(var(--cd-accent-rgb), .38);
}

/* 2026-09-09 — retour owner : bande claire visible tout autour de chaque
   tuile — DEUX bugs distincts, vérifiés en inspectant les règles calculées :
   1) le padding/bordure de la carte produit générique (corrigé ci-dessus) ;
   2) `.woocommerce ul.products li.product a img{margin:0 0 1em;width:100%;
      height:auto}` (woocommerce.css) — MÊME avec un `margin:0` posé plus bas
      dans CE fichier, ce sélecteur de cœur reste plus spécifique que
      `...li.product-category img` (il passe par le `a`, un élément de plus)
      et gagnait quand même sur margin/width/height, peu importe l'ordre de
      chargement. Corrigé en égalant sa spécificité : le `a` est réintroduit
      dans NOTRE sélecteur — à spécificité égale, notre règle, chargée après
      celle de WooCommerce, l'emporte enfin. */
.woocommerce ul.products li.product-category {
	aspect-ratio: 4 / 5;
}
.woocommerce ul.products li.product-category > a {
	display: block;
	position: relative;
	inline-size: 100%;
	block-size: 100%;
	/* Au-dessus du voile (z-index 1) : sans ça, le mélange de teinte
	   recouvrirait aussi le titre et la flèche, pas seulement la photo. */
	z-index: 2;
}

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

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

/* Repli sans photo — aplat crème neutre, pas de dégradé de marque. */
.woocommerce ul.products li.product-category:has(img[src*="woocommerce-placeholder"]),
.woocommerce ul.products li.product-category:has(img[src*="placeholder-category"]) {
	background: var(--cd-page-2);
}

/* Médaillon de secours — sobre, sans ombre ni rotation au survol. */
.woocommerce ul.products li.product-category:has(img[src*="woocommerce-placeholder"])::after,
.woocommerce ul.products li.product-category:has(img[src*="placeholder-category"])::after {
	content: "";
	position: absolute;
	inset-block-start: 30%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: clamp(56px, 16vw, 72px);
	block-size: clamp(56px, 16vw, 72px);
	border-radius: 50%;
	background-color: var(--cd-card);
	background-image: var(--bn-icon-bag-cc);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 46%;
	box-shadow: none;
	border: 1px solid var(--cd-line);
	color: var(--cd-ink);
	pointer-events: none;
	z-index: 3;
}

/* Voile permanent en bas (lisibilité du nom), ton neutre. */
.woocommerce ul.products li.product-category > a::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 80%;
	background: linear-gradient(180deg, transparent 0%, rgba(20, 18, 15, 0.12) 32%, rgba(20, 18, 15, 0.55) 66%, rgba(20, 18, 15, 0.88) 100%);
	pointer-events: none;
}

/* Sans photo, le voile pensé pour une PHOTO assombrissait le bas d'un aplat
   clair — deux bandes qui juraient. On l'allège dans le même camaïeu crème
   que la tuile, et le titre repasse en encre foncée. */
.woocommerce ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) > a::before,
.woocommerce ul.products li.product-category:has(img[src*="placeholder-category"]) > a::before {
	background: linear-gradient(180deg, transparent 0%, rgba(250, 248, 244, 0.5) 45%, rgba(250, 248, 244, 0.92) 100%);
}
.woocommerce ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) .woocommerce-loop-category__title,
.woocommerce ul.products li.product-category:has(img[src*="placeholder-category"]) .woocommerce-loop-category__title {
	color: var(--cd-ink);
	text-shadow: none;
}
.woocommerce ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) .woocommerce-loop-category__title mark.count,
.woocommerce ul.products li.product-category:has(img[src*="placeholder-category"]) .woocommerce-loop-category__title mark.count {
	background: transparent;
	border: 1px solid var(--cd-line);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	color: var(--cd-ink);
	text-shadow: none;
}

/* `display:flex` fait de l'icône ET du texte des « items » à part entière —
   `mark.count` est poussé au bord opposé via `margin-inline-start:auto`
   plutôt que `justify-content:space-between`, pour que l'icône reste collée
   au nom (pas éparpillée au bord) et que la disposition tienne quel que soit
   le nombre d'« items » générés. `flex-wrap:wrap` fait tomber le badge sur sa
   propre ligne si le nom est long, plutôt que de le faire chevaucher un nom
   coupé au milieu d'un mot (`white-space:nowrap` interdit cette coupure). */
/* `!important` sur les propriétés qui recoupent celles d'Astra
   (`woocommerce.min.css`) : même spécificité des deux côtés, et l'ordre de
   chargement entre le style enfant et le CSS de compatibilité Woo d'Astra
   n'est pas garanti. Sans ça, `background-color:rgba(255,255,255,.88)`
   d'Astra plaquait un bandeau BLANC OPAQUE sous la photo — la coupure nette
   entre image et titre que le voile dégradé ci-dessus ne pouvait pas
   masquer, puisqu'il est peint SOUS ce bandeau et non au-dessus. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	position: absolute !important;
	inset-inline: 0 !important;
	left: 0 !important;
	right: 0 !important;
	inset-block-end: 0 !important;
	bottom: 0 !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 1.3rem 1.35rem 1.2rem !important;
	font-family: "Barlow", sans-serif;
	font-size: clamp(1rem, 2.3vw, 1.15rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-align: start !important;
	color: var(--cd-white);
	text-shadow: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	white-space: nowrap;
	gap: 0.3em 0.5rem;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title::before {
	content: "";
	flex: 0 0 auto;
	display: inline-block;
	inline-size: 0.8em;
	block-size: 0.8em;
	background-color: var(--cd-white);
	mask-image: var(--bn-icon-bag);
	-webkit-mask-image: var(--bn-icon-bag);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
}

/* 2026-09-09 — retour owner : le badge "effet verre" (bordure + fond blancs
   translucides) jugé daté — repris en pastille dégradée pleine, même famille
   que la flèche au survol juste en dessous : plus de bordure, plus de blanc
   en fond, juste la couleur de marque. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark.count {
	flex: 0 0 auto;
	margin-inline-start: auto;
	background: linear-gradient(135deg, #141414, #C1662F);
	border: none;
	box-shadow: 0 4px 12px -4px rgba(193, 102, 47, .55);
	color: var(--cd-ink);
	font-family: "Barlow", sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	white-space: nowrap;
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	text-shadow: none;
	transition: transform .35s var(--cd-ease-out);
}
/* 2026-09-10 — petit détail vivant en plus au survol de la tuile : le badge
   "respire" avec le reste de la carte plutôt que de rester figé pendant que
   tout le reste bouge (image qui zoome, carte qui se soulève, flèche qui
   apparaît). */
.woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title mark.count {
	transform: scale(1.1);
}

/* Petite flèche qui glisse dans le coin au survol — le même signal
   « cliquable » que le reste du site, appliqué à une carte-image. */
.woocommerce ul.products li.product-category > a::after {
	content: "→";
	position: absolute;
	inset-block-start: 0.9rem;
	inset-inline-end: 0.9rem;
	inline-size: 34px;
	block-size: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #141414, #C1662F);
	color: var(--cd-white);
	font-weight: 700;
	opacity: 0;
	transform: translate(-6px, 6px) scale(.7);
	box-shadow: 0 6px 16px -6px rgba(193, 102, 47, .6);
	transition: opacity var(--cd-t-base) var(--cd-ease-out),
	            transform var(--cd-t-base) var(--cd-ease-out);
}
html[dir="rtl"] .woocommerce ul.products li.product-category > a::after {
	content: "←";
}
.woocommerce ul.products li.product-category:hover > a::after {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

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

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

.woocommerce ul.products:has(> li.product-category) {
	display: flex !important;
	flex-wrap: nowrap !important;
	/* Centre la piste quand peu de catégories tiennent dans la largeur
	   (le vide à droite d'un catalogue qui démarre avec 3-4 catégories) —
	   `safe` retombe sur un alignement au départ dès que ça déborde, pour ne
	   jamais rendre le début de piste inatteignable au défilement une fois
	   le catalogue grandi. */
	justify-content: safe center;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	/* 2026-09-10 — même correctif que sur la tuile (cf. plus bas) : hint de
	   composition pour ce conteneur `scroll-snap`, complémentaire du
	   `translateZ(0)` posé sur chaque tuile. */
	will-change: scroll-position;
	scroll-padding-inline: 1rem;
	gap: 1.35rem;
	padding-block: 0.35rem 1rem;
	margin: 0 !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.woocommerce ul.products:has(> li.product-category)::-webkit-scrollbar {
	display: none;
}

.woocommerce ul.products:has(> li.product-category) > li.product-category {
	float: none !important;
	inline-size: clamp(240px, 26vw, 300px) !important;
	flex: 0 0 auto !important;
	margin-inline-end: 0 !important;
	scroll-snap-align: start;
}

/* 2026-09-10 — retour owner : section jugée trop statique. Les règles
   `.bn-reveal:nth-child` qui vivaient ici avant ne servaient plus à rien :
   `bn-home-anim.js` EXCLUT délibérément `li.product-category` de son
   IntersectionObserver depuis le correctif de la 1ʳᵉ tuile qui restait vide
   (cf. bn-cat-slider.js et le commentaire dans bn-home-anim.js) — la classe
   `.bn-reveal` n'était donc plus jamais posée sur ces tuiles, chrome mort.
   Remplacé par une entrée 100% CSS, déclenchée au CHARGEMENT de la page
   (`animation`, pas d'IntersectionObserver) — même recette que le fondu du
   héros (`.aod-home__hero`, plus bas) : SEUL `opacity` est animé, jamais
   `transform` — la tuile porte déjà `transform:translateZ(0)` en base (fix
   compositing) et `translateY(-6px)` au survol (plus haut) ; animer aussi
   `transform` ici aurait fait gagner l'animation sur le survol en
   permanence (les animations `fill:forwards/both` priment sur les règles
   `:hover` normales dans la cascade CSS) et cassé le soulèvement au survol. */
@keyframes bn-cat-tile-in {
	from { opacity: 0; }
	to   { opacity: 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: .08s; }
.woocommerce ul.products:has(> li.product-category) > li.product-category:nth-child(3) { animation-delay: .16s; }
.woocommerce ul.products:has(> li.product-category) > li.product-category:nth-child(4) { animation-delay: .24s; }
.woocommerce ul.products:has(> li.product-category) > li.product-category:nth-child(5) { animation-delay: .32s; }
.woocommerce ul.products:has(> li.product-category) > li.product-category:nth-child(6) { animation-delay: .4s; }
@media (max-width: 700px) {
	.woocommerce ul.products:has(> li.product-category) > li.product-category {
		inline-size: 76vw !important;
	}
}

/* Estompe douce en bord de piste — signale qu'il y a plus à découvrir, y
   compris sur mobile où les flèches sont masquées. */
.bn-cat-slider::before,
.bn-cat-slider::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 2.5rem;
	z-index: 1;
	pointer-events: none;
}
/* 2026-09-10 — retour owner : grosses bandes NOIRES sur les deux bords du
   carrousel, jugées moches. Cause : ce voile de fondu reprenait `var(--cd-
   ink)` (encre foncée) depuis le 2026-09-09, quand la section avait un fond
   sombre — mais la section est repassée claire (`var(--cd-page)`, crème) le
   2026-09-10 même (cf. plus haut, "la section redevient claire") sans que ce
   voile ne suive. Résultat : un fondu noir plaqué sur un fond crème. Il
   reprend maintenant la couleur RÉELLE du fond de section. */
.bn-cat-slider::before {
	inset-inline-start: 0;
	background: linear-gradient(to right, var(--cd-page), transparent);
}
.bn-cat-slider::after {
	inset-inline-end: 0;
	background: linear-gradient(to left, var(--cd-page), transparent);
}
html[dir="rtl"] .bn-cat-slider::before {
	background: linear-gradient(to left, var(--cd-page), transparent);
}
html[dir="rtl"] .bn-cat-slider::after {
	background: linear-gradient(to right, var(--cd-page), transparent);
}

/* Flèches : desktop/tablette seulement (`bn-cat-slider.js`) — sur mobile, le
   balayage tactile est le geste attendu ; des flèches à 44px viendraient
   encombrer une piste déjà pensée pour le doigt. */
.bn-cat-slider__arrow {
	display: none;
}
@media (min-width: 782px) {
	.bn-cat-slider__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		inset-block-start: 50%;
		transform: translateY(-50%);
		inline-size: 42px;
		block-size: 42px;
		border-radius: 50%;
		border: none;
		/* 2026-09-09 — retour owner : ce cercle blanc plein (`var(--cd-card)`)
		   posé EXACTEMENT sur les bords de la piste faisait deux ronds blancs
		   sur les côtés d'une section devenue sombre entre-temps (depuis
		   corrigé le 2026-09-10 : la section est repassée claire, cf. plus
		   haut — mais le dégradé de marque noir+rouille reste le bon choix
		   ICI : c'est le langage visuel des CTA de tout le site, pas une
		   erreur liée à l'ancien fond sombre). */
		background: linear-gradient(135deg, #141414, #C1662F);
		color: var(--cd-white);
		box-shadow: 0 8px 20px -8px rgba(193, 102, 47, .55);
		font-size: 1.1rem;
		cursor: pointer;
		z-index: 2;
		transition: background-color var(--cd-t-base) var(--cd-ease-out),
		            transform var(--cd-t-base) var(--cd-ease-out),
		            opacity var(--cd-t-base) var(--cd-ease-out);
		/* 2026-09-10 — retour owner : section jugée trop statique. Lueur qui
		   respire doucement au repos (n'anime QUE `box-shadow`, jamais
		   `transform` — sinon cette animation, infinie, gagnerait en
		   permanence sur le `scale()` du survol juste en dessous, même
		   logique que sur les tuiles ci-dessus). */
		animation: bn-arrow-breathe 2.6s ease-in-out infinite;
	}
	@keyframes bn-arrow-breathe {
		0%, 100% { box-shadow: 0 8px 20px -8px rgba(193, 102, 47, .55); }
		50%      { box-shadow: 0 10px 26px -6px rgba(193, 102, 47, .85); }
	}
	.bn-cat-slider__arrow:hover:not(:disabled) {
		background: linear-gradient(135deg, #C1662F, #141414);
		transform: translateY(-50%) scale(1.08);
	}
	/* Petit nudge directionnel au survol — la flèche "pointe" physiquement
	   dans son sens. Même spécificité que la règle générique ci-dessus :
	   placées après, elles l'emportent à égalité. */
	.bn-cat-slider__arrow--prev:hover:not(:disabled) {
		transform: translateY(-50%) scale(1.08) rotate(-12deg);
	}
	.bn-cat-slider__arrow--next:hover:not(:disabled) {
		transform: translateY(-50%) scale(1.08) rotate(12deg);
	}
	.bn-cat-slider__arrow:disabled {
		opacity: 0.35;
		cursor: default;
		animation: none;
	}
	.bn-cat-slider__arrow--prev {
		inset-inline-start: -0.75rem;
	}
	.bn-cat-slider__arrow--next {
		inset-inline-end: -0.75rem;
	}
}

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

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

.woocommerce-product-gallery {
	border-radius: 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;
}

.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 {
	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, #141414, #C1662F);
	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, #141414, #C1662F) !important;
	color: var(--cd-white) !important;
	box-shadow: 0 10px 24px -12px rgba(193, 102, 47, .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, #C1662F, #141414) !important;
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -12px rgba(193, 102, 47, .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;
	}
	.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 rideau d'ouverture,
	   le Ken Burns, le reflet et le filet dégradé du diptyque (2026-09-08)
	   s'arrêtent aussi — les deux photos restent affichées pleinement
	   révélées (`animation:none` retire le `clip-path` de l'ouverture, donc
	   la valeur initiale — non recadrée — s'applique). */
	.aod-home__hero::before,
	.bn-hero-photo-img,
	.bn-hero-photo-img::before,
	.bn-hero-photos::after,
	.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 : filigrane, reflet du badge, lueur de la carte et
	   étincelle de l'étoile s'arrêtent — l'entrée au chargement ne joue plus.
	   La photo de la carte vitrine reste affichée, immobile (ken burns coupé). */
	.bn-story::before,
	.bn-story__kicker::after,
	.bn-story__mission::before,
	.bn-story__star,
	.bn-story__shop-img {
		animation: none !important;
	}
	.bn-story__shop-img {
		opacity: 1 !important;
		transform: none !important;
	}
	.bn-story__mission {
		transition: none !important;
	}
	.bn-story__mission:hover {
		transform: none !important;
	}
	.bn-story__col--tale,
	.bn-story__col--mission {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	/* Fiche produit : les entrées en fondu de la galerie et du texte ne jouent
	   plus ; vignettes et flèches gardent leur réponse au survol, sans trajet. */
	.woocommerce-product-gallery,
	.woocommerce-breadcrumb,
	.single-product-category,
	.product_title.entry-title,
	.summary.entry-summary .price,
	.woocommerce-product-details__short-description,
	.summary.entry-summary .aod-cod {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.flex-control-thumbs li img,
	.woocommerce-product-gallery [data-controls="prev"],
	.woocommerce-product-gallery [data-controls="next"] {
		transition: none !important;
	}
	.flex-control-thumbs li img:hover,
	.woocommerce-product-gallery [data-controls="prev"]:hover,
	.woocommerce-product-gallery [data-controls="next"]:hover {
		transform: none !important;
	}
	/* Réassurance : entrée en cascade des 3 cartes coupée, filet du haut figé,
	   pastille numérotée affichée sans « pop », reflet au survol désactivé ;
	   l'icône garde sa réaction au survol mais perd flottement, anneau et
	   halo animés — plus de rotation/zoom animés non plus. */
	.aod-home__reassure::after {
		animation: none !important;
	}
	.aod-home__promise {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.aod-home__promise::before {
		display: none !important;
	}
	.aod-home__promise::after {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.aod-home__promise h3::after {
		transition: none !important;
	}
	.aod-home__ico {
		animation: none !important;
		transition: none !important;
	}
	.aod-home__ico::before,
	.aod-home__ico::after {
		animation: none !important;
	}
	.aod-home__promise:hover .aod-home__ico {
		transform: none !important;
	}
	/* 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;
	}
	.bn-story__kicker {
		transform: none !important;
		transition: none !important;
	}
	.aod-home__hero,
	.aod-home__hero::after,
	.aod-home__reassure::before,
	.bn-closing,
	.aod-contact__details,
	.bn-story__mission {
		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-story__mission {
		transition: none !important;
	}
	.aod-home__btn:hover,
	.bn-closing__btn:hover,
	.bn-story__mission:hover {
		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;
	}
}