/**
 * Reskin visuel — clone Lamset Darek. Thème « maison premium » : corps de
 * page CLAIR (crème chaud, écho du cuivre du logo), en-tête ET pied de page
 * en marine profond — les deux « bookends » sombres qui encadrent un corps
 * clair, façon mymart-dz.com (bandeau marine, recherche blanche, corps
 * blanc/crème, rouge/orange pour les promos). Les cartes produit/catégorie et
 * le formulaire de contact restent CLAIRS, comme le reste du corps de page —
 * plus l'effet "vitrine dans un écrin sombre" de la version précédente, qui a
 * été abandonnée sur demande owner (le corps entier était sombre). Aucun
 * panier Woo / compte / wishlist ajouté (règle 3 du template) — contrairement
 * à mymart-dz.com, dont on ne reprend que la STRUCTURE et la palette, jamais
 * le tunnel panier/compte.
 *
 * Couleurs : jamais de littéral pour l'accent Personnalisateur — toujours
 * var(--global-palette-*) là où ce dernier s'applique. Le cuivre/marine/
 * crème ci-dessous est la palette de marque de CE clone (littéral assumé),
 * choisie par échantillonnage du logo, pas l'accent générique du thème.
 *
 * Contraste vérifié (WCAG AA) pour chaque paire texte/fond de cette palette :
 * --ldk-text sur --ldk-bg ≈ 14:1, --ldk-text-muted sur --ldk-bg ≈ 5.5:1,
 * --ldk-copper-btn sur --ldk-bg ≈ 5:1 (bouton + lien), --ldk-header-muted et
 * --ldk-copper-light restent réservés au CHROME sombre (en-tête/pied), où ils
 * sont déjà vérifiés (≥8:1) — jamais utilisés comme texte sur le corps clair
 * (cf. notes ligne par ligne plus bas : c'est l'erreur qui cassait la
 * lisibilité, corrigée dans cette passe).
 *
 * Propriétés logiques uniquement (inline-start/end) : le site bascule en
 * RTL en arabe.
 */

:root {
	--ldk-radius: 14px;

	/* Ombres RETAILLÉES pour du clair-sur-clair (l'ancien jeu, `rgba(0,0,0,.55)`,
	 * était calibré pour un halo visible sur fond quasi-noir — beaucoup trop
	 * lourd ici, et son anneau intérieur `rgba(255,255,255,.06)` était
	 * invisible sur crème). */
	--ldk-shadow: 0 1px 2px rgba(22, 32, 58, 0.06), 0 10px 24px rgba(22, 32, 58, 0.10);
	--ldk-shadow-hover: 0 0 0 1px rgba(184, 118, 63, 0.35), 0 14px 28px rgba(22, 32, 58, 0.16);

	/* ── Chrome (en-tête, bandeau, recherche, pied) : marine profond du logo —
	 * les deux bookends sombres qui encadrent le corps clair. ── */
	--ldk-header: #0d1526;
	--ldk-header-soft: #141d3a;
	/* Texte secondaire DANS le chrome sombre uniquement (jamais sur le corps
	 * clair — cf. --ldk-text-muted pour ça). */
	--ldk-header-muted: rgba(255, 255, 255, 0.72);

	/* ── Corps de page : clair et chaud, pas blanc pur (évite l'effet
	 * "hôpital" juste sous un en-tête marine). ── */
	--ldk-bg: #faf7f2;
	/* 🚨 Retouche 2026-09-16 (retour owner : bande "Nos produits" moche) —
	 * l'ancien #f1ebe1 était un beige terne, plat, presque "carton", surtout
	 * visible en grand bloc derrière la grille produits. Éclairci et
	 * dé-jauni (moins de jaune/brun, plus proche d'un ivoire) : reste dans
	 * la même famille chaude que --ldk-bg (le body ne bascule jamais gris),
	 * mais ne lit plus comme un aplat terne à côté des cartes blanches. */
	--ldk-bg-soft: #f4efe4;

	/* Texte sur le corps clair. */
	--ldk-text: #16203a;
	--ldk-text-muted: #5c6577;

	/* Cuivre décoratif (bordures, soulignés, glow) — pas garanti lisible en
	 * petit texte, jamais utilisé seul pour du texte sur fond clair sans
	 * vérif dédiée (cf. --ldk-copper-btn pour du texte/lien). */
	--ldk-copper: #b8763f;
	--ldk-copper-light: #d9a86c;

	/* Cuivre « plein » (fonds de bouton/pilule + texte blanc dessus, ET texte/
	 * lien directement sur le corps clair) — volontairement plus sombre que
	 * --ldk-copper : 5.3:1 sur blanc contre 3.7:1 pour --ldk-copper, qui
	 * échoue l'AA texte normal. */
	--ldk-copper-btn: #9c5c2a;
	--ldk-copper-btn-dark: #7a4620;
}

body,
.site {
	background: var(--ldk-bg);
}

/* ═══════════════ Accent d'action (boutons, panier, radios, focus) ═══════════
 * Retouche 2026-09-16 (retour owner : « améliore les boutons »). Le plugin
 * fixe cet accent en vert Shopify (`#008060`) PARTOUT — CTA principal, boutons
 * "Voir tous les produits"/"Voir la boutique", panier COD, radios "Mode de
 * livraison", anneaux de focus — et ce n'est PAS un oubli : trois commentaires
 * dans `aod-cod-pages.css`/`aod-cod-form.css` documentent un choix EXPLICITE
 * de l'owner (2026-09-08, 2026-09-10), délibérément PAS la couleur d'accent du
 * thème, vérifié AA (4,93:1 sur blanc). Confirmé avec l'owner avant d'y
 * toucher : sur CE clone, le vert jure avec l'identité noir + cuivre établie
 * partout ailleurs (héro, logo, boutons Personnalisateur) — remplacé par
 * --ldk-copper-btn (5,3:1 sur blanc, déjà vérifié AA pour du texte/bouton,
 * cf. sa propre définition plus haut). Le vert du plugin reste le défaut sur
 * tous les AUTRES clones : ces trois blocs redéclarent seulement les
 * PROPRIÉTÉS PERSONNALISÉES que les feuilles du plugin posent sur ces mêmes
 * sélecteurs (`:root` / `.aod-cod` / `.aod-home__btn`) — jamais leur fichier
 * source. Le cascade fonctionne ici par ORDRE DE CHARGEMENT (vérifié dans le
 * HTML rendu : `kadence-child-reskin-css` est le DERNIER `<link>` des quatre,
 * après les trois feuilles du plugin) plutôt que par spécificité renforcée —
 * seule exception : `.aod-loop-cta` (panier COD éteint) pose la couleur en
 * dur, pas en variable, donc sans var() à redéclarer ; scopée plus bas avec le
 * même triplet de spécificité que le plugin. */
:root {
	--ac-accent: var(--ldk-copper-btn);
	--ac-accent-dark: var(--ldk-copper-btn-dark);
	--ac-accent-wash: #faf3ea;
}
.aod-cod {
	--sh-accent: var(--ldk-copper-btn);
	--sh-accent-dark: var(--ldk-copper-btn-dark);
	--sh-accent-wash: #faf3ea;
	--sh-green: var(--ldk-copper-btn);
}
.aod-home__btn {
	--aod-home-btn-fg: var(--ldk-copper-btn);
	--aod-home-btn-fg-dark: var(--ldk-copper-btn-dark);
}

/* `.aod-loop-cta` (bouton "Commander" des grilles, panier COD éteint) : deux
 * littéraux `#008060`, pas des var() — rien à redéclarer, override direct au
 * même triplet de spécificité (0,2,2) que le plugin (cf. son propre
 * commentaire) pour être sûr de l'emporter. Actuellement invisible sur ce
 * clone (panier COD allumé, cf. `body a.aod-loop-cta.aod-loop-cta{display:
 * none}` dans le plugin) mais corrigé quand même : un gérant peut rallumer/
 * éteindre le panier depuis /gestion à tout moment (Phase 35). */
body a.aod-loop-cta.aod-loop-cta {
	background: var(--ldk-copper-btn);
}
body a.aod-loop-cta.aod-loop-cta:hover,
body a.aod-loop-cta.aod-loop-cta:focus {
	background: var(--ldk-copper-btn-dark);
	border-color: var(--ldk-copper-btn-dark);
}
.aod-loop-qwrap a.aod-loop-cta.aod-loop-cta:hover,
.aod-loop-qwrap a.aod-loop-cta.aod-loop-cta:focus-visible {
	background: var(--ldk-copper-btn);
}
.aod-loop-qwrap a.aod-loop-cta.aod-loop-cta:focus-visible {
	outline: 2px solid var(--ldk-copper-btn);
}

/* 🚨 Kadence enveloppe le contenu de CHAQUE page dans <article
 * class="entry content-bg …">, avec un fond blanc forcé
 * (`.content-bg{background:#fff}`, global.min.css) tant que le style de
 * contenu du thème reste "Boxed" (par défaut) — la variante transparente
 * n'existe que sous `.content-style-unboxed`, jamais actif ici. Sans ce
 * correctif, un blanc pur perce à travers notre crème (--ldk-bg), visible en
 * bande/coin selon les gabarits. Les cartes produit/catégorie/formulaire
 * posent leur propre fond blanc explicite (règles dédiées plus bas), pas
 * `.content-bg`. */
.content-bg {
	background: transparent;
}

/* 🚨 Filet de sécurité : `.aod-home__hero` déborde volontairement du
 * conteneur "boxed" via `width:100vw` + marge négative (cf. plus bas) pour
 * occuper toute la largeur d'écran. Sans ce filet, tout écart entre 100vw et
 * la largeur réellement visible (par ex. l'ascenseur système sur certains
 * navigateurs) pousse `html` plus large que l'écran — et CE n'est pas confiné
 * au héro : chaque élément centré/pleine-largeur de la page (bandeau, "Nos
 * catégories", grilles produit…) se retrouve alors décalé et rogné à droite.
 * Mesuré sur mobile (390px) avant ce correctif : tout le contenu débordait
 * hors écran dans un navigateur qui réserve l'espace de sa barre de
 * défilement (desktop, ou fenêtre réduite sans émulation mobile). `clip`
 * plutôt que `hidden` : pas de barre de défilement fantôme ni de recalcul de
 * mise en page. */
html {
	overflow-x: clip;
}

body,
.site {
	overflow-x: clip;
}

/* 🚨 Kadence réserve en PERMANENCE, sur `#primary`, la hauteur de la ligne
 * sticky (`margin-top: 80px`, = header_main_height) — pour que le contenu ne
 * saute pas au moment où la ligne passe en `position:fixed`. Mesuré : en
 * haut de page, la ligne est encore `position:relative` (pas fixée), cette
 * réserve ne sert donc à RIEN à ce moment-là — c'est exactement le "blanc
 * moche" entre l'en-tête et le héro que ce correctif retire. Une fois
 * réellement figée (`.child-is-fixed` sur le conteneur parent), Kadence
 * réserve la place autrement, localement — vérifié : aucun saut de contenu
 * au moment où le défilement déclenche le figé. */
#primary.content-area {
	margin-block-start: 0;
}

/* 🚨 32px à 80px de plus (selon le point de rupture), cette fois le réglage
 * global "Content Vertical Padding" de Kadence (classe
 * `content-vertical-padding-show` sur <body>) — et il empile en fait DEUX
 * règles distinctes du thème, pas une seule (vérifié dans le CSS généré,
 * pas deviné) :
 *   - `.content-area{margin-top:5rem;margin-bottom:5rem}` (3rem ≤1024px,
 *     2rem ≤767px) — sur `#primary.content-area`, dont le `margin-top`
 *     était déjà neutralisé plus haut dans ce fichier pour la même famille
 *     de raison (réserve de l'en-tête sticky) ; le `margin-bottom`, lui,
 *     ne l'était pas encore.
 *   - `.entry-content-wrap{padding:2rem}` (1.5rem ≤767px) — un second
 *     espacement, indépendant du premier, sur l'enfant direct.
 * Retirés seulement sur l'Accueil (`body.home`) : sur Boutique/Contact, qui
 * n'ont pas de héro plein cadre collé à l'en-tête, cette respiration reste
 * utile avant le titre/la grille.
 * 🚨 Retouche 2026-09-16 (retour owner d'abord : « je veut pas des vide …
 * entre footer », puis, le `padding-block-end` seul n'ayant réduit
 * l'espace qu'à moitié : « l'espace blanc est moche ») — les DEUX côtés
 * (`-start`/`-end`) des DEUX règles rejoignent le `margin-top` déjà à zéro,
 * pour la même raison mais à l'autre bout de la page : l'Accueil se termine
 * maintenant par `.aod-home__cta-band`, un bandeau plein cadre collé au
 * pied de page (cf. plus bas), donc la respiration qui avait du sens avant
 * (texte qui touchait le pied) n'en a plus ici. Ce n'était PAS un oubli du
 * premier passage : à cette date-là, l'Accueil se terminait par la vitrine
 * gamme, une carte classique qui avait encore besoin de cette respiration —
 * seul l'ajout du bandeau plein cadre change la réponse. */
body.home #primary.content-area {
	margin-block-end: 0;
}

body.home .entry-content-wrap {
	padding-block: 0;
}

/* 🚨 Une TROISIÈME source de « vide avant le pied de page », distincte des
 * deux ci-dessus (celles-là sont du padding/margin ; celle-ci est le
 * mécanisme "pied de page collé en bas" de Kadence lui-même) : sur une page
 * dont le contenu est plus court que l'écran, `body.footer-on-bottom
 * #wrapper{min-height:100vh; display:flex; flex-direction:column}` étire le
 * conteneur pour pousser le pied de page en bas de la fenêtre — utile sur
 * une page vraiment courte, mais ça laisse un bandeau de fond crème entre
 * la dernière section et le pied dès que le contenu est plus court que la
 * fenêtre (grand écran, page réduite…). Retour owner 2026-09-16 : « la
 * derniere image ne fais pas d'espace entre footer … l'espace blanc est
 * moche » — neutralisé seulement sur l'Accueil : le bandeau photo
 * (`.aod-home__cta-band`) doit coller au pied de page QUELLE QUE SOIT la
 * hauteur de fenêtre, quitte à ce que le pied ne reste pas plaqué au bas de
 * l'écran sur un contenu très court — c'est justement ce que l'owner
 * demande ici. */
body.home #wrapper {
	min-height: 0;
}

/* ── En-tête : bandeau bleu marine, façon mymart-dz.com ──
 * Choix de CE clone (pas du template) : littéral assumé. Reste distinct de
 * l'accent Personnalisateur : deux couleurs de marque, chrome + CTA,
 * cohabitent sans se marcher dessus — même patron que la référence (nav
 * bleu marine, badges/CTA rouges, prix verts sur ce clone). */
#masthead {
	background-color: var(--ldk-header);
	border-color: transparent;
	border-block-end: 2px solid var(--ldk-copper);
}

#masthead .site-title,
#masthead .site-title a {
	color: #fff;
}

/* ── En-tête fixe au défilement (option native Kadence, activée via
 * `wp theme mod set header_sticky main` — uniquement la ligne logo+nav,
 * le bandeau promesses et la recherche défilent normalement). Kadence
 * détache cette ligne dans son propre conteneur `.kadence-sticky-header`,
 * qui passe en `position:fixed` SANS hériter du fond marine de `#masthead`
 * (mesuré : texte nav blanc devenu invisible sur fond blanc une fois figé,
 * le conteneur fixe n'a pas de fond à lui). On le pose explicitement, plus
 * une ombre uniquement quand la classe `item-is-stuck` (posée par
 * navigation.min.js) confirme que la ligne est réellement figée — pas
 * avant, sinon l'ombre existe même en haut de page sans raison. ── */
#masthead .site-main-header-wrap.kadence-sticky-header {
	background-color: var(--ldk-header);
}

/* 🚨 Kadence pose SON PROPRE fond blanc sur le DIV enfant direct
 * (`.site-header-row-container-inner`) dès que la ligne est fixée — pas en
 * CSS statique de ce fichier, en CSS dynamique généré et imprimé dans
 * <head> (réglage "Sticky → Design", par défaut blanc), via le sélecteur
 * `#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) >
 * .site-header-row-container-inner` — 1 id + 4 classes, qui l'emporte sur
 * un simple `#masthead .kadence-sticky-header … { }` (1 id + 2/3 classes).
 * Mesuré : notre marine était bien appliqué sur l'élément PARENT, mais
 * entièrement recouvert par ce blanc généré après coup. `!important`
 * assumé ici : on contre une règle que Kadence régénère lui-même à chaque
 * chargement (pas une règle de ce fichier qu'on pourrait juste réordonner). */
#masthead .kadence-sticky-header > .site-header-row-container-inner {
	background: transparent !important;
}

#masthead .site-main-header-wrap.kadence-sticky-header.item-is-stuck {
	box-shadow: 0 8px 20px rgba(13, 21, 38, 0.25);
	border-block-end: 2px solid var(--ldk-copper);
}

/* Logo importé (Personnalisateur → Identité du site) : agrandi (44 → 64px)
 * et détaché du bandeau par un léger halo, façon mymart-dz.com où le logo
 * est le point focal du bloc marque plutôt qu'une icône discrète. Le titre
 * texte est masqué (Kadence l'affiche en plus du logo, pas à la place) : le
 * logo porte déjà "Lamset Darek", un doublon lisible juste à côté serait
 * redondant (le nom reste accessible via l'alt du logo). */
#masthead .custom-logo {
	block-size: 70px;
	inline-size: auto;
	max-inline-size: none;
	border-radius: 10px;
	/* Halo assoupli (0.45 → 0.28) : l'original, pensé pour se détacher d'un
	 * corps de page sombre, devenait trop dur une fois le bandeau seul à
	 * porter du sombre sur le reste du site en clair. */
	box-shadow: 0 0 0 1px rgba(184, 118, 63, 0.4), 0 6px 16px rgba(0, 0, 0, 0.28);
	transition: block-size 0.2s ease;
}

/* Logo légèrement réduit une fois l'en-tête figé — lisible qu'on shrink ou
 * non la ligne (cf. `header_sticky_main_shrink`, désactivé par défaut) :
 * une touche de mouvement gratuite sur un élément déjà transitionné. */
#masthead .kadence-sticky-header.item-is-stuck .custom-logo {
	block-size: 52px;
}

/* 🚨 Mobile (retour owner : « améliore en mode mobile ») — le logo (900×220,
 * ratio ~4.1:1) à 70px de haut fait ~286px de large, ne laissant presque
 * plus de place aux icônes recherche/menu juste à côté sur un écran de
 * 390px (`main_right: ['search','popup-toggle']`, functions.php) : testé à
 * l'écran, confirmé invisibles/hors-cadre — le menu mobile était
 * inaccessible. `!important` : la simple redéclaration (essayée d'abord)
 * ne suffisait pas à rétrécir la boîte dans cette ligne flex. Descendu à
 * 32px (~131px de large) : large marge laissée aux icônes plutôt qu'un
 * calcul au plus juste. */
@media (max-width: 480px) {
	#masthead .custom-logo {
		block-size: 32px !important;
	}
}

/* 🚨 Même testé avec un logo réduit à 20px (donc largement assez de place
 * libre), les icônes restaient invisibles : le manque de place n'était pas
 * la seule cause. Filet supplémentaire, indépendant de la taille du logo :
 * les sort du flux normal et les plaque en haut à droite de la ligne
 * d'en-tête en `position:absolute` — garanti visible quelle que soit la
 * cause exacte (largeur, ordre du flex, classe JS non déclenchée…). */
@media (max-width: 480px) {
	#masthead .site-main-header-inner-wrap {
		position: relative !important;
	}

	#masthead .site-header-main-section-right {
		position: absolute !important;
		inset-inline-end: 0.5rem !important;
		inset-block-start: 50% !important;
		transform: translateY(-50%) !important;
		z-index: 20 !important;
		display: flex !important;
		gap: 0.25rem !important;
	}
}

/* 🚨 CRITIQUE (retour owner : « améliore en mode mobile ») — testé à
 * l'écran sur mobile (390px) : les icônes recherche/menu (`main_right:
 * ['search','popup-toggle']`, functions.php) sont totalement invisibles —
 * scan pixel par pixel de la ligne d'en-tête, aucune trace, alors que le
 * DOM les contient bien (vérifié) et qu'elles ont largement la place
 * (vérifié aussi). Le menu était donc INACCESSIBLE au clavier/à la souris
 * sur mobile : rien à cliquer pour l'ouvrir. Cause exacte non identifiée
 * malgré une recherche large dans le CSS généré par Kadence (aucune règle
 * `display:none`/`width:0` trouvée sur ces classes) — plutôt qu'attendre de
 * la comprendre, on force l'affichage avec les propriétés qui couvrent
 * TOUTES les façons courantes de masquer un élément, sur les deux boutons
 * ET leurs icônes SVG. */
#masthead .search-toggle-open,
#masthead .menu-toggle-open,
#masthead .search-toggle-open .kadence-svg-iconset,
#masthead .menu-toggle-open .kadence-svg-iconset,
#masthead .search-toggle-open svg,
#masthead .menu-toggle-open svg {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	inline-size: auto !important;
	block-size: auto !important;
	min-inline-size: 24px !important;
	min-block-size: 24px !important;
	overflow: visible !important;
}

#masthead .site-title-wrap {
	display: none;
}

#masthead .main-navigation ul li a,
#masthead #site-navigation.main-navigation > div > ul > li > a {
	color: rgba(255, 255, 255, 0.92);
	position: relative;
	/* Un peu plus de respiration et de tenue typographique qu'un menu par
	 * défaut — cohérent avec le titre serif du héro sans en dépendre
	 * (aucune police externe). */
	font-weight: 600;
	letter-spacing: 0.01em;
}

#masthead #site-navigation.main-navigation > div > ul {
	gap: 0.35rem;
}

#masthead .main-navigation ul li a:hover,
#masthead .main-navigation ul li.current-menu-item > a {
	color: var(--ldk-copper-light);
}

/* Trait cuivre sous l'entrée active/survolée — jamais sur menu-item-aod-lang,
 * qui porte son propre chrome (pilule) plus bas. */
#masthead .main-navigation ul li:not(.menu-item-aod-lang) > a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-end: 4px;
	block-size: 2px;
	background: var(--ldk-copper);
	transform: scaleX(0);
	transition: transform 0.15s ease;
}

#masthead .main-navigation ul li:not(.menu-item-aod-lang):hover > a::after,
#masthead .main-navigation ul li.current-menu-item:not(.menu-item-aod-lang) > a::after {
	transform: scaleX(1);
}

/* 🚨 Le bouton hamburger (`.menu-toggle-open`) hérite de
 * `var(--global-palette5)` (gris ardoise par défaut) — sur ce bandeau
 * marine, contraste insuffisant. On force le blanc. */
#masthead .menu-toggle-open,
#masthead .menu-toggle-close {
	color: #fff;
}

/* ── Switcher FR/AR : pilule neutre plaquée sur le marine → on la fond
 * dans le chrome (fond translucide blanc) et l'état actif reprend le
 * cuivre de marque au lieu du vert par défaut de aod-cod-lang.php, qui
 * jurait sur ce fond. Scopé à #masthead : le switcher ailleurs (s'il est
 * repris dans un autre gabarit) garde son style d'origine. */
#masthead .aod-lang {
	background: rgba(255, 255, 255, 0.14);
}

#masthead .aod-lang__btn {
	color: rgba(255, 255, 255, 0.85) !important;
}

#masthead .aod-lang__btn:hover {
	background: rgba(255, 255, 255, 0.22);
	color: #fff !important;
}

#masthead .aod-lang__btn.is-active {
	/* Pilule pleine + texte blanc : cuivre-bouton (5.3:1), pas le cuivre
	 * décoratif (3.7:1, échoue l'AA sur ce texte de 13px). */
	background: var(--ldk-copper-btn);
}

/* ── Bandeau d'annonce (au-dessus du logo/nav) et barre de recherche
 * (sous la nav) — inspirés de mymart-dz.com, injectés par functions.php
 * via les hooks kadence_before_header / kadence_after_header. Toujours dans
 * le CHROME sombre (texte --ldk-header-muted, jamais --ldk-text-muted qui
 * est calibré pour le corps clair). Aucun lien panier/compte : recherche
 * produits WooCommerce native uniquement. ── */
.ldk-topbar {
	background: #070c1c;
	border-block-end: 1px solid rgba(184, 118, 63, 0.25);
}

.ldk-topbar__inner {
	max-inline-size: 1290px;
	margin-inline: auto;
	padding: 0.45rem 1.5rem;
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	font-size: 0.78rem;
	color: var(--ldk-header-muted);
}

/* 🚨 Mobile : les 3 promesses sur une seule ligne dépassaient 390px et se
 * faisaient couper net à droite (pas de retour à la ligne malgré
 * `flex-wrap`, chaque `<span>` étant lui-même trop large). Police réduite +
 * séparateurs masqués sous 480px : 3 lignes centrées, rien de coupé. */
@media (max-width: 480px) {
	.ldk-topbar__inner {
		font-size: 0.68rem;
		gap: 0.15rem 0.5rem;
		padding-inline: 0.75rem;
	}

	.ldk-topbar__inner span[aria-hidden="true"] {
		display: none;
	}
}

/* ── Recherche intégrée à la ligne logo/nav (élément Kadence `ldk-search`,
 * main_center — cf. functions.php) — plus de bande séparée sous le menu,
 * façon mymart-dz.com. Occupe l'espace restant entre logo et nav, plafonné
 * pour ne jamais écraser le menu sur les largeurs moyennes. ── */
.ldk-header-search {
	flex: 1 1 auto;
	min-inline-size: 0;
	max-inline-size: 420px;
	margin-inline: 1.5rem;
}

.ldk-header-search .woocommerce-product-search {
	display: flex;
	gap: 0;
}

.ldk-header-search .woocommerce-product-search .search-field {
	flex: 1 1 auto;
	min-inline-size: 0;
	min-height: 40px;
	padding-inline: 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-start-end-radius: 0;
	border-end-end-radius: 0;
	border-start-start-radius: 999px;
	border-end-start-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 0.88rem;
}

.ldk-header-search .woocommerce-product-search .search-field::placeholder {
	color: var(--ldk-header-muted);
}

.ldk-header-search .woocommerce-product-search button {
	min-height: 40px;
	padding-inline: 1rem;
	border: none;
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-start-end-radius: 999px;
	border-end-end-radius: 999px;
	background: var(--ldk-copper-btn);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	flex: 0 0 auto;
}

.ldk-header-search .woocommerce-product-search button:hover {
	background: var(--ldk-copper-btn-dark);
}

/* Sous 960px, le trio logo/recherche/nav est trop serré pour un champ toujours
 * ouvert — on la retire de la ligne (repli propre : la recherche mobile,
 * l'icône `search` native Kadence à côté du hamburger, prend le relais dès
 * la largeur "mobile" de Kadence). */
@media (max-width: 960px) {
	.ldk-header-search {
		display: none;
	}
}

/* ── Icône recherche mobile (élément natif Kadence, à côté du hamburger) :
 * hérite d'un gris neutre par défaut, invisible sur le bandeau marine. ── */
#masthead .search-toggle-open,
#masthead .search-toggle-open svg {
	color: #fff;
}

/* Bouton d'action du formulaire dans la modale plein écran (native Kadence) :
 * cuivre de marque plutôt que le bleu par défaut du thème. */
#search-drawer .woocommerce-product-search button {
	background: var(--ldk-copper-btn);
	border-color: var(--ldk-copper-btn);
}

#search-drawer .woocommerce-product-search button:hover {
	background: var(--ldk-copper-btn-dark);
	border-color: var(--ldk-copper-btn-dark);
}

/* ── Héro : photo électroménager (CC0, cf. assets/img/LICENSE.txt) + voile
 * marine assombri — même teinte que l'en-tête, pour que le bandeau lise
 * comme une seule pièce avec le chrome du site plutôt que deux blocs
 * disjoints. Texte forcé en clair : la photo est sombre. Le héro GARDE un
 * fond/voile sombre quel que soit le thème du corps de page : c'est la
 * lisibilité du texte sur une photo qui commande ici, pas la palette
 * générale. ── */
/* Héro en carrousel plein écran (images horizontales en fondu enchaîné) —
 * inspiré du bandeau multi-visuels de mymart-dz.com. Le carrousel
 * (`.ldk-hero-track` + `.ldk-hero-slide`) est injecté par
 * assets/js/hero-carousel.js, PAS dans le markup du plugin partagé : ce
 * dernier ne connaît que `.aod-home__hero` (section vide au départ), on
 * n'a donc rien touché de commun aux autres clones. Photos 100% CC0
 * StockSnap, sans marque tierce (cf. assets/img/LICENSE.txt — un
 * micro-ondes et un aspirateur candidats ont été écartés pour cette
 * raison). --ldk-header en fond : ce que voit un visiteur sans JS/images
 * (dégradation propre, jamais un carré vide). */
/* 🚨 Le héro vivait dans le conteneur "boxed" du thème (padding + largeur
 * limitée, cf. correctif `.content-bg` plus haut) : les coins arrondis +
 * la largeur contrainte laissaient l'encre de la page visible sur les
 * côtés, comme un cadre — signalé, corrigé. Il déborde maintenant en
 * pleine largeur d'écran (technique classique `100vw` + marge négative),
 * sans coin arrondi : une bannière plein cadre, pas une carte flottante. */
/* Hauteur minimale progressive (retour owner : le héro manquait de présence) —
 * paliers plutôt qu'un seul `vh` : sur un écran bas (portable en paysage), un
 * `min-height` en `vh` peut dépasser toute la fenêtre et pousser le CTA hors
 * champ ; les paliers gardent un plancher raisonnable à chaque famille de
 * largeur. Le padding-block existant (aod-cod-pages.css, 80px) continue de
 * régir le contenu texte ; `min-height` ne fait qu'imposer un plancher que la
 * photo (en position absolute, cf. `.ldk-hero-track` plus bas) remplit. */
.aod-home__hero {
	position: relative;
	overflow: hidden;
	background: var(--ldk-header);
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-block-end: 0.5rem;
	min-height: 460px;
}

@media (min-width: 700px) {
	.aod-home__hero {
		min-height: 560px;
	}
}

@media (min-width: 1200px) {
	.aod-home__hero {
		min-height: 640px;
	}
}

/* 🚨 Spécificité renforcée (.aod-home__hero .ldk-hero-track, deux classes)
 * à dessein : `.aod-home__hero > *` plus bas a la MÊME spécificité qu'un
 * simple `.ldk-hero-track` (0,1,0) et le suit dans la feuille — à égalité,
 * il l'emportait et repassait le track en `position: relative`, sans
 * hauteur (aucun contenu en flux), donc les diapositives à `inset:0`
 * s'effondraient à 0px. Mesuré : hauteur de diapositive 0px avant ce
 * correctif, 456px après. */
.aod-home__hero .ldk-hero-track {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* 🚨 `contain` (retiré) montrait la photo entière mais laissait de larges
 * bandes marine (`--ldk-header`) sur les côtés dès que le ratio de l'image
 * ne collait pas au cadre très large du héro — flagrant sur
 * `hero-produits-lamset.jpg` (784×870, portrait) dans un bandeau ~2:1 :
 * l'essentiel de la largeur devenait deux bandes marine, lues par l'owner
 * comme des « bordures bleues ». `cover` remplit tout le cadre, sans bande,
 * au prix d'un recadrage (déjà tenté avant `contain` — régression assumée
 * ici sur demande explicite : plus de bordure plutôt que la photo entière). */
.aod-home__hero .ldk-hero-slide {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--ldk-header);
	opacity: 0;
	transition: opacity 1.4s ease;
}

.aod-home__hero .ldk-hero-slide.is-active {
	opacity: 1;
}

/* Voile marine + glow cuivre : au-dessus des diapositives, sous le texte. */
.aod-home__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(120% 100% at 50% 100%,
			rgba(184, 118, 63, 0.16) 0%,
			transparent 60%),
		linear-gradient(180deg,
			rgba(13, 21, 38, 0.14) 0%,
			rgba(13, 21, 38, 0.3) 100%);
	pointer-events: none;
}

/* ── Titres de section — sur le corps clair : texte marine, pas cuivre
 * décoratif (échouerait l'AA à cette taille). ── */
.aod-home__h2 {
	position: relative;
	font-weight: 800;
	color: var(--ldk-text);
}

/* Bandes alternées — retouche 2026-09-16 (retour owner : l'aplat
 * --ldk-bg-soft en grand bloc lisait comme une dalle terne à côté des
 * cartes blanches). Remplacé par du blanc — même couleur que les cartes,
 * qui ne se détachent donc plus que par leur ombre propre — + un halo
 * cuivre très doux en haut-gauche et un souffle marine en bas-droite
 * (::before, cf. plus bas) pour éviter le blanc plat. Trois variantes
 * comparées avec l'owner (crème affiné, gris-bleu marine, celle-ci) —
 * celle-ci retenue. `--ldk-bg-soft` reste utilisée telle quelle ailleurs
 * (réassurance, vitrine gamme, tableau comparatif landing, bandeau
 * urgence) : cf. sa propre définition, éclaircie au passage. */
.aod-home__section:nth-of-type(even) {
	position: relative;
	background: #fff;
	border: 1px solid rgba(22, 32, 58, 0.08);
	box-shadow: 0 1px 3px rgba(22, 32, 58, 0.05);
	border-radius: 20px;
	overflow: hidden;
}
.aod-home__section:nth-of-type(even)::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 50% at 12% 0%, color-mix(in srgb, var(--ldk-copper) 12%, transparent) 0%, transparent 100%),
		radial-gradient(50% 45% at 100% 100%, color-mix(in srgb, var(--ldk-header) 6%, transparent) 0%, transparent 100%);
	pointer-events: none;
}
.aod-home__section:nth-of-type(even) > * {
	position: relative;
}

/* ── Grille catégories — cartes « affiche » façon mymart-dz.com : titre en
 * surimpression sur l'image (scrim dégradé), pas un pavé de texte sous une
 * photo. Chaque catégorie garde son unique clic vers son archive, rien
 * n'est ajouté à l'interaction. Le scrim reste sombre quel que soit le
 * thème du corps (c'est un dégradé posé SUR la photo, pas sur la page). ── */

body ul.products.product-category li.product-category,
body ul.products li.product-category {
	position: relative;
	overflow: hidden;
	background: var(--global-palette9, #fff);
	border-radius: var(--ldk-radius);
	box-shadow: var(--ldk-shadow);
	padding: 0;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body ul.products li.product-category:hover {
	transform: translateY(-3px);
	box-shadow: var(--ldk-shadow-hover);
}

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

body ul.products li.product-category img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.25s ease;
}

body ul.products li.product-category:hover img {
	transform: scale(1.04);
}

/* Scrim + texte : le wrapper `.product-details` (rendu par WooCommerce)
 * porte aussi `.content-bg` — sans ce bloc il resterait transparent (notre
 * correctif plus haut) au lieu du dégradé voulu ici. */
body ul.products li.product-category .product-details.content-bg {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
	padding: 2.5rem 1rem 0.9rem;
}

body ul.products li.product-category h2,
body ul.products li.product-category .woocommerce-loop-category__title {
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

body ul.products li.product-category mark {
	background: none;
	color: var(--ldk-copper-light);
	font-weight: 600;
}

/* ────────────────────────────────────────────── Grille produits ─────── */
/*
 * 🚨 Revirement assumé (retour owner, 2026-09-15) : la demande précédente
 * documentée ici — ZÉRO carte, catalogue éditorial sans contour — est
 * remplacée par l'inverse, une carte franche (fond, bordure, ombre, coins
 * arrondis), façon electroprodz.com : badge remise en pastille haut-DROITE
 * (electroprodz, pas haut-gauche comme avant), titre gras aligné à gauche,
 * prix barré + prix réduit en ROUGE (plus le vert partagé du template —
 * override scopé à CETTE grille, cf. note plus bas, le vert reste le défaut
 * pour tout autre clone qui n'a pas fait ce choix).
 */
/* 🚨 Sans `scroll-margin-top`, amener une carte tout en haut du viewport
 * (ancre, `scrollIntoView`) la range SOUS l'en-tête une fois collé
 * (`.item-is-stuck`, position fixe) : le survol/clic sur la surimpression
 * panier (36.1) échoue alors — pointeur intercepté par l'en-tête, pas par la
 * carte. Trouvé par `tools/recette/run.sh panier` (viewport mobile 390 px,
 * hover sur `.aod-cart__quickadd`), jamais par une capture d'écran statique
 * (le défaut n'existe qu'après un SCROLL, pas au chargement). Marge dimensionnée
 * large (110px) plutôt qu'au pixel près de l'en-tête collé : coûte 0 sur un
 * scroll normal, absorbe les variations FR/AR et desktop/mobile. */
body ul.products li.product {
	position: relative;
	scroll-margin-top: 110px;
	background: var(--global-palette9, #fff);
	border: 1px solid rgba(22, 32, 58, 0.1);
	border-radius: var(--ldk-radius);
	box-shadow: var(--ldk-shadow);
	padding: 1rem 1rem 1.25rem;
	overflow: hidden;
	text-align: start;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

body ul.products li.product:hover {
	box-shadow: var(--ldk-shadow-hover);
	transform: translateY(-3px);
}

/* `contain`, pas `cover` : les photos produit electroprodz sont des détourages
 * pleine vue (jamais recadrés) sur fond neutre — cf. la même décision pour le
 * carrousel du héro (une photo tronquée par un `cover` trop serré, même
 * défaut, mêmes causes). */
body ul.products li.product img {
	border-radius: calc(var(--ldk-radius) - 6px);
	box-shadow: none;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	transition: transform 0.3s ease;
}

body ul.products li.product:hover img {
	transform: scale(1.035);
}

/* Gouttière de grille — un cran plus resserrée que l'ancienne version
 * "sans carte" (qui comptait sur l'espace pour séparer les produits) :
 * la bordure fait déjà ce travail, l'espace n'a plus qu'à respirer. */
@media (min-width: 480px) {
	body ul.products:not(.product-category) {
		column-gap: 1.25rem;
		row-gap: 1.5rem;
	}
}

body ul.products li.product > a + * {
	margin-block-start: 0.75rem;
}

body li.product.product h2.woocommerce-loop-product__title.woocommerce-loop-product__title.woocommerce-loop-product__title {
	display: block;
	color: var(--ldk-text);
	font-weight: 800;
	font-size: 0.88rem;
	line-height: 1.3;
	transition: color 0.15s ease;
}

body ul.products li.product:hover h2.woocommerce-loop-product__title {
	color: var(--ldk-copper-btn);
}

/* Badge promo : pastille rouge arrondie, coin haut-DROIT de l'image (repère
   electroprodz — inset-inline-END, pas start) — rouge FIXE (signal de sens,
   comme .aod-cod__msg.is-error dans le plugin), jamais l'accent client.
   Double sélecteur : WooCommerce rend `.onsale` nativement ; certains thèmes
   (dont Astra) le remplacent par leur propre classe. On couvre les deux.
   🚨 Kadence colore `.onsale` en bleu via woocommerce.min.css avec un
   sélecteur plus spécifique que `body span.onsale` (mesuré : le badge
   restait bleu malgré cette règle) — spécificité renforcée pour l'emporter
   quel que soit le thème. */
body ul.products li.product span.onsale,
body ul.products li.product span.ast-onsale-card {
	position: absolute;
	inset-inline-end: 10px;
	inset-block-start: 10px;
	inset-inline-start: auto;
	margin: 0;
	min-width: auto;
	width: auto;
	height: auto;
	line-height: 1;
	padding: 0.35em 0.65em;
	border-radius: 999px;
	background: #dc2626;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}

/* 🚨 Le prix réduit a un vert FIXE par défaut, pensé pour un fond clair
 * (aod-cod-pages.css : `#008060` — décision produit partagée par tous les
 * clones, cf. commentaire dans ce fichier). CE clone le passe au rouge pour
 * coller à electroprodz.com (retour owner, 2026-09-15) — scopé à cette seule
 * grille, le défaut vert du plugin reste inchangé pour les autres clones.
 * Rouge `#dc2626` : même teinte que le badge remise juste au-dessus, déjà
 * vérifiée AA (contraste texte normal sur blanc). */
body ul.products li.product.product .price.price.price ins {
	color: #dc2626;
}

/* ── Réassurance : icônes en médaillon, sur le corps clair ──
 * Retouche 2026-09-16 (retour owner : section "moche" après les produits) —
 * même traitement "carte blanche + halo cuivre" que `.aod-home__section:nth-
 * of-type(even)` juste au-dessus (cf. ce bloc pour le détail du halo), pour
 * que les deux bandes lisent comme une seule famille visuelle au lieu d'un
 * blanc suivi d'un aplat beige plat. Cette section n'a jamais porté la classe
 * `.aod-home__section` (markup dans functions.php) donc l'alternance
 * nth-of-type ne l'atteint pas — stylée ici en dur plutôt que renommée, pour
 * ne pas risquer de décaler la parité des sections qui, elles, en dépendent. */
.aod-home__reassure {
	position: relative;
	background: #fff;
	border: 1px solid rgba(22, 32, 58, 0.08);
	box-shadow: 0 1px 3px rgba(22, 32, 58, 0.05);
	border-radius: 20px;
	overflow: hidden;
}
.aod-home__reassure::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(55% 60% at 88% 100%, color-mix(in srgb, var(--ldk-copper) 10%, transparent) 0%, transparent 100%),
		radial-gradient(45% 50% at 0% 0%, color-mix(in srgb, var(--ldk-header) 5%, transparent) 0%, transparent 100%);
	pointer-events: none;
}
.aod-home__promise {
	position: relative;
}

/* Cascade « une carte après l'autre » (retour owner 2026-09-16) : les 3
 * cartes portent chacune `data-ldk-reveal` (functions.php) et entrent dans
 * le viewport à peu près en même temps (rangée côte à côte) — c'est ce
 * `transition-delay` par rang qui étale leur apparition dans le temps,
 * plutôt qu'un réglage du script (générique, partagé avec la vitrine gamme
 * plus bas). Repli @media plus bas (reskin.css) neutralise aussi ces délais. */
.aod-home__promise:nth-child(1) { transition-delay: 0ms; }
.aod-home__promise:nth-child(2) { transition-delay: 140ms; }
.aod-home__promise:nth-child(3) { transition-delay: 280ms; }

.aod-home__reassure h3 {
	color: var(--ldk-text);
}

.aod-home__reassure p {
	color: var(--ldk-text-muted);
}

/* Emoji → SVG → photo (cf. functions.php, retour owner 2026-09-16 : "je veux
 * des images comme slide aussi" — de vraies photos, pas des traits). L'URL
 * vient en `background-image` inline depuis le PHP ; cette règle ne pose que
 * la FORME (médaillon rond, cadré en cover) et l'habillage (anneau cuivre +
 * ombre), inchangés depuis la version SVG — seul le contenu du médaillon a
 * changé de nature. */
.aod-home__ico {
	display: inline-block;
	inline-size: 3.75rem;
	block-size: 3.75rem;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--ldk-copper) 14%, #fff);
	background-size: cover;
	background-position: center;
	box-shadow:
		inset 0 0 0 1px rgba(184, 118, 63, 0.35),
		0 4px 10px rgba(156, 92, 42, 0.16);
}

/* ── Vitrine gamme complète — visuel fourni par l'owner, en fin d'accueil.
 * Deux colonnes dès 780px (photo à gauche, texte à droite), empilé avant.
 * Retouche 2026-09-16 (retour owner : « la section en bas aussi améliore
 * la, plus designée ») : même carte blanche + halo cuivre que la réassurance
 * juste au-dessus et `.aod-home__section:nth-of-type(even)` (au lieu du fond
 * `--ldk-bg-soft` plat précédent, qui lisait comme une famille visuelle à
 * part) — les trois bandes de bas de page lisent maintenant comme UNE seule
 * suite, pas trois traitements différents. ── */
.aod-home__showcase {
	position: relative;
	display: grid;
	gap: 2rem;
	align-items: center;
	background: #fff;
	border: 1px solid rgba(22, 32, 58, 0.08);
	box-shadow: 0 1px 3px rgba(22, 32, 58, 0.05);
	border-radius: 20px;
	overflow: hidden;
	padding: clamp(1.5rem, 5vw, 3rem);
}

.aod-home__showcase::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(50% 55% at 100% 0%, color-mix(in srgb, var(--ldk-copper) 11%, transparent) 0%, transparent 100%),
		radial-gradient(45% 50% at 0% 100%, color-mix(in srgb, var(--ldk-header) 5%, transparent) 0%, transparent 100%);
	pointer-events: none;
}

.aod-home__showcase-media,
.aod-home__showcase-copy {
	position: relative;
}

@media (min-width: 780px) {
	.aod-home__showcase {
		grid-template-columns: minmax(0, 380px) 1fr;
		gap: 2.5rem;
	}
}

.aod-home__showcase-media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--ldk-radius);
	box-shadow: var(--ldk-shadow);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Petit supplément « animé » demandé (retour owner) : la photo se soulève
 * légèrement au survol/focus, comme les cartes produit juste au-dessus dans
 * la page. Neutralisé sous `prefers-reduced-motion` avec le reste des
 * animations de cette section (media query plus bas). */
.aod-home__showcase-media:hover img,
.aod-home__showcase-media:focus-within img {
	transform: translateY(-4px);
	box-shadow: var(--ldk-shadow-hover);
}

.aod-home__showcase-copy p:not(.aod-home__cta) {
	color: var(--ldk-text-muted);
}

/* Cascade en deux temps (photo, puis texte) — retour owner 2026-09-16,
 * même logique de `transition-delay` que la réassurance juste au-dessus. */
.aod-home__showcase-media[data-ldk-reveal] { transition-delay: 0ms; }
.aod-home__showcase-copy[data-ldk-reveal] { transition-delay: 180ms; }

/* ── Bandeau final plein cadre (photo cuisine fournie par l'owner) — retour
 * owner 2026-09-16 : « ajoute la comme une derniere section comme
 * background trop attirant », puis deux retouches le même jour :
 * (1) « je veut pas des vide entre les bordures et entre footer » — plein
 *     cadre au lieu de la carte arrondie contenue dans la colonne :
 *     `width:100vw` + marges négatives (`margin-inline`) pour sortir du
 *     conteneur centré du thème jusqu'aux bords réels de l'écran (propriétés
 *     logiques, symétrique, fonctionne pareil en RTL). Pas de gouttière
 *     avant le pied de page à combler ICI : ce n'est pas un margin/padding
 *     sur CETTE section, c'est le `padding-block-end` de
 *     `.entry-content-wrap` (Kadence, réglage « Content Vertical Padding »)
 *     qui est neutralisé plus haut dans ce fichier (`body.home
 *     .entry-content-wrap`, cf. ce bloc pour le pourquoi) — un
 *     `margin-block-end` négatif posé ICI n'aurait rien changé : le padding
 *     d'un ANCÊTRE n'est pas annulable depuis un enfant.
 * (2) « supprime ecriture et buuton dans image et fait la annimé » — plus
 *     de texte/CTA superposés (donc plus besoin du voile sombre qui ne
 *     servait qu'à leur contraste : la photo reste pleine, non assombrie,
 *     plus « attirante ») ; l'entrée dans le viewport passe d'un simple
 *     glissement (comme le reste de la page) à un zoom-out dédié, cf. plus
 *     bas — un dernier effet plus marqué pour clore la page. ── */
.aod-home__cta-band {
	position: relative;
	overflow: hidden;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	background-image: url("assets/img/cta-cuisine-equipee.jpg");
	background-size: cover;
	background-position: center;
	block-size: clamp(360px, 52vw, 560px);
}

/* ── Fondu + glissement à l'entrée dans le viewport (assets/js/scroll-reveal.js).
 * 🚨 L'état masqué est posé sur `.ldk-reveal-armed`, une classe que SEUL ce
 * script ajoute — jamais sur `[data-ldk-reveal]` seul, présent dans le HTML
 * statique dès le départ : sans JS, l'élément doit rester visible par
 * défaut (dégradation propre), pas invisible en permanence. ── */
[data-ldk-reveal].ldk-reveal-armed {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-ldk-reveal].ldk-reveal-armed.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Effet dédié pour le bandeau final (retour owner : « fait la annimé
 * affiche avec un effet ») : zoom-out au lieu du glissement générique
 * ci-dessus — la photo entre légèrement agrandie puis se stabilise à sa
 * taille normale, plus marqué qu'un simple fondu pour clore la page.
 * Spécificité (élément + attribut + classe) volontairement plus forte que
 * la règle générique ci-dessus pour la remplacer sur CET élément seulement ;
 * `overflow:hidden` sur `.aod-home__cta-band` (règle plus haut) empêche le
 * zoom de déborder brièvement du cadre pendant la transition. */
.aod-home__cta-band[data-ldk-reveal].ldk-reveal-armed {
	transform: scale(1.08);
	transition: opacity 0.9s ease, transform 0.9s ease;
}

.aod-home__cta-band[data-ldk-reveal].ldk-reveal-armed.is-visible {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	[data-ldk-reveal].ldk-reveal-armed {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.aod-home__showcase-media img {
		transition: none;
	}

	.aod-home__showcase-media:hover img,
	.aod-home__showcase-media:focus-within img {
		transform: none;
	}
}

/* ── Contact : coordonnées et formulaire vivent tous les deux sur le corps
 * clair maintenant — le formulaire garde un fond blanc + une ombre légère
 * pour rester lisible comme carte de saisie, avec une bordure fine (le fond
 * page étant proche du blanc, l'ombre seule ne suffit plus à détacher la
 * carte comme sur l'ancien fond sombre). ── */

.aod-contact__intro {
	color: var(--ldk-text-muted);
}

.aod-contact__list,
.aod-contact__list li {
	color: var(--ldk-text-muted);
}

/* 🚨 --ldk-copper-light (3.7:1 sur blanc) était réservé au chrome sombre —
 * sur le corps clair, --ldk-copper-btn (5.3:1) le remplace pour les liens. */
.aod-contact__list a {
	color: var(--ldk-copper-btn);
}

.aod-contact__list a:hover {
	color: var(--ldk-copper-btn-dark);
}

.aod-contact__form {
	background: var(--global-palette9, #fff);
	border: 1px solid rgba(22, 32, 58, 0.08);
	border-radius: var(--ldk-radius);
	box-shadow: var(--ldk-shadow);
	padding: clamp(1.25rem, 4vw, 2rem);
}

/* ── Pied de page : reste dans le chrome sombre (second bookend marine,
 * symétrique de l'en-tête) — texte/liens du chrome, pas du corps clair.
 * Retouche 2026-09-16 (retour owner : « footer est moche, fais moi un
 * footer aussi moderne ») — le markup lui-même est remplacé dans
 * functions.php (`kadence_footer`, plus le constructeur natif d'une seule
 * ligne de copyright) ; ce qui suit habille CE nouveau markup à colonnes.
 * Fond passé de `--ldk-header-soft` à `--ldk-header` (retour owner : « la
 * méme couleur que le header ») — exactement le même marine que le bandeau
 * `.ldk-topbar`/`.ldk-header` en tête de page (`--ldk-header`, cf. plus
 * haut dans ce fichier), pas la variante plus claire réservée jusqu'ici aux
 * halos de survol. Propriétés logiques uniquement (inline-start/end,
 * padding-block/-inline) : le site bascule en RTL en arabe. ── */
#colophon.site-footer {
	background: var(--ldk-header);
	color: var(--ldk-header-muted);
	position: relative;
}

#colophon.site-footer a {
	color: var(--ldk-copper-light);
}

#colophon.site-footer a:hover,
#colophon.site-footer a:focus-visible {
	color: #fff;
}

/* Liseré cuivre en tête du pied — écho du halo cuivre des sections
 * précédentes, seule touche de couleur sur ce bookend sombre. */
.ldk-footer::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	background: linear-gradient(90deg, transparent, var(--ldk-copper-light) 50%, transparent);
}

/* 🚨 CONSTAT 2026-09-16 (pas propre à ce pied de page) : en arabe, sous ~460px
 * de large (un vrai téléphone, pas juste un émulateur étroit), TOUTE la zone
 * publique coupe le bord droit du texte — vérifié aussi sur `/contact`
 * (jamais touchée aujourd'hui) : logo de l'en-tête, bandeau du haut,
 * libellés du formulaire (« البريد الإلكتروني » s'affiche sans son « ال »
 * initial). Donc PAS causé par ce pied de page ni par le CSS ci-dessous —
 * `display:block` sans grille du tout reproduit exactement le même
 * débordement que `display:grid`. Repro : `?aod_lang=ar` + fenêtre <460px.
 * Hors périmètre de cette retouche (visuel + animations) : à ouvrir comme
 * son propre chantier (probablement un breakpoint du thème Kadence ou de
 * son JS d'en-tête, pas ce fichier). Le CSS ci-dessous reste volontairement
 * simple — sans filet de sécurité qui prétendrait corriger ce qu'il ne
 * corrige pas. */
.ldk-footer {
	padding-block: clamp(2.5rem, 6vw, 3.5rem) clamp(1.5rem, 4vw, 2rem);
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.ldk-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.25rem;
	padding-block-end: 2rem;
	border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 700px) {
	.ldk-footer__top {
		grid-template-columns: 1.3fr 1fr 1fr;
		gap: 2rem;
	}
}

.ldk-footer__name {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.01em;
}

/* Logo (retour owner : « y'a pas de logo, ajoute le ») — même image que
 * l'en-tête (Personnalisateur → Identité du site, `#masthead .custom-logo`
 * plus haut dans ce fichier), pas de halo ici : le pied est DÉJÀ marine, le
 * halo de l'en-tête n'existait que pour détacher le logo du corps clair. */
.ldk-footer__logo {
	line-height: 0;
}

.ldk-footer__logo img {
	display: block;
	block-size: 48px;
	inline-size: auto;
	border-radius: 8px;
}

.ldk-footer__brand p {
	margin-block-start: 0.6rem;
	max-inline-size: 32ch;
	color: var(--ldk-header-muted);
	overflow-wrap: break-word;
}

.ldk-footer__col h3 {
	margin-block-end: 1rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ldk-copper-light);
}

#ldk-footer-menu,
.ldk-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

#ldk-footer-menu a {
	text-decoration: none;
	transition: color 0.15s ease, translate 0.15s ease;
	display: inline-block;
}

#ldk-footer-menu a:hover,
#ldk-footer-menu a:focus-visible {
	translate: 4px 0;
}

html[dir="rtl"] #ldk-footer-menu a:hover,
html[dir="rtl"] #ldk-footer-menu a:focus-visible {
	translate: -4px 0;
}

.ldk-footer__contact li {
	color: var(--ldk-header-muted);
	overflow-wrap: break-word;
}

.ldk-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block-start: 1.5rem;
	font-size: 0.85rem;
	color: var(--ldk-header-muted);
}

.ldk-footer__bottom p {
	margin: 0;
}

.ldk-footer__credit a {
	font-weight: 600;
}

/* ── Boutique (archive Woo) : compteur de résultats + tri, posés
 * directement sur le corps clair. ── */
.woocommerce-result-count,
.woocommerce-ordering {
	color: var(--ldk-text-muted);
}

.woocommerce-ordering select.orderby {
	background-color: #fff;
	color: var(--ldk-text);
	border-color: rgba(22, 32, 58, 0.18);
}

@media (min-width: 700px) {
	.aod-home__section:nth-of-type(even) {
		padding-inline: 1.5rem;
	}
}

/* ═══════════════════════════════ Page de vente (landing produit) ═══════════
 * `aod-landing.css` (plugin) est VOLONTAIREMENT neutre — aucune couleur de
 * marque, `currentColor`/gris transparents partout, bouton en `.button` brut
 * (cf. son propre commentaire d'en-tête : « L'habillage appartient au thème
 * déposé par l'owner »). C'est exactement cette prise en charge : marine/
 * cuivre/crème du reste du site, cartes bordées cohérentes avec la grille
 * produits (electroprodz.com, plus haut dans ce fichier). Rien ici ne
 * modifie le contrat de données ni le catalogue de blocs (PHP du plugin,
 * partagé par tous les clones) — uniquement l'apparence. */

.aod-landing__title,
.aod-landing__hero-title {
	color: var(--ldk-text);
	font-weight: 800;
}

.aod-landing__hero-body p {
	color: var(--ldk-text-muted);
}

/* Bouton d'appel à l'action — hérite de `.button` (thème) à l'origine,
 * jamais stylé par le plugin : cuivre plein, même famille que `.aod-home__btn`
 * du héro/des rayons, pour que "commander" parle la même couleur partout. */
.aod-landing .button.aod-landing__cta,
.aod-landing__sticky .button.aod-landing__sticky-cta {
	background: var(--ldk-copper-btn);
	border-color: var(--ldk-copper-btn);
	color: #fff;
	font-weight: 700;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.aod-landing .button.aod-landing__cta:hover,
.aod-landing__sticky .button.aod-landing__sticky-cta:hover {
	background: var(--ldk-copper-btn-dark);
	border-color: var(--ldk-copper-btn-dark);
	color: #fff;
}

/* Bénéfices : carte blanche bordée, même famille que les cartes produit
 * (grille "Nos produits") plutôt que le simple filet neutre du plugin. */
.aod-landing__point {
	background: var(--global-palette9, #fff);
	border-color: rgba(22, 32, 58, 0.1);
	border-radius: var(--ldk-radius);
	box-shadow: var(--ldk-shadow);
}

.aod-landing__point-icon {
	color: var(--ldk-copper-btn);
}

.aod-landing__point-title {
	color: var(--ldk-text);
}

.aod-landing__point-text {
	color: var(--ldk-text-muted);
	opacity: 1; /* Le plugin baisse l'opacité pour un gris neutre — --ldk-text-muted est déjà la bonne teinte, l'opacité en plus ferait échouer l'AA. */
}

/* Galerie : même ombre que le reste du site plutôt que des vignettes nues. */
.aod-landing__gallery-item {
	box-shadow: var(--ldk-shadow);
}

/* Tableau comparatif : en-tête marine clair, colonne "avec le produit" teintée
 * cuivre — jamais le gris neutre générique du plugin. */
.aod-landing__compare th {
	background: var(--ldk-bg-soft);
	color: var(--ldk-text);
}

.aod-landing__compare td {
	color: var(--ldk-text-muted);
}

.aod-landing__compare-win {
	background: color-mix(in srgb, var(--ldk-copper) 12%, transparent) !important;
	color: var(--ldk-text);
}

/* Avis clients : même carte bordée que les bénéfices/produits ; étoiles en
 * cuivre plutôt qu'un jaune générique, cohérent avec la palette de marque. */
.aod-landing__review {
	background: var(--global-palette9, #fff);
	border-color: rgba(22, 32, 58, 0.1);
	border-radius: var(--ldk-radius);
	box-shadow: var(--ldk-shadow);
}

.aod-landing__review-name {
	color: var(--ldk-text);
}

.aod-landing__review-stars {
	color: var(--ldk-copper);
}

.aod-landing__review-text {
	color: var(--ldk-text-muted);
}

/* FAQ : question marine, survol/ouverture en cuivre — le triangle natif du
 * <details> reste (accessibilité, cf. commentaire du plugin), seule la
 * couleur du texte change. */
.aod-landing__faq-item {
	border-color: rgba(22, 32, 58, 0.12);
}

.aod-landing__faq-q {
	color: var(--ldk-text);
}

.aod-landing__faq-q:hover {
	color: var(--ldk-copper-btn);
}

.aod-landing__faq-a {
	color: var(--ldk-text-muted);
}

/* Urgence / compte à rebours : bandeau crème + liseré cuivre, chiffres en
 * cuivre plein — plus le gris neutre générique du plugin. */
.aod-landing__urgency {
	background: var(--ldk-bg-soft);
	border-color: rgba(184, 118, 63, 0.3);
	color: var(--ldk-text);
}

.aod-landing__cd-unit b {
	color: var(--ldk-copper-btn);
}

/* Réassurance (liste d'icônes) : mêmes tons que le reste du site. */
.aod-landing__trust {
	border-color: rgba(22, 32, 58, 0.1);
	color: var(--ldk-text-muted);
}

.aod-landing__trust-icon {
	color: var(--ldk-copper-btn);
}

/* Barre collante mobile : `Canvas` (mot-clé système, blanc/gris selon l'OS)
 * remplacé par notre crème, liseré cuivre plutôt qu'un gris générique. */
.aod-landing__sticky {
	background: var(--ldk-bg);
	border-block-start-color: rgba(184, 118, 63, 0.35);
}