/* ==========================================================================
   Saisons LMDB · Halloween « La nuit des petits monstres » — habillage du thème at_movic
   (La Maison du Bébé : thème Leo/Apollo, accueil appagebuilder « lmb26 », méga-menu leobootstrapmenu)
   --------------------------------------------------------------------------
   Principe : la nuit tombe sur le haut et le bas du site (barres, header, menu, pied de page) ;
   le contenu reste sur fond clair, lisible, avec la palette citrouille et violet de nuit.
   Les blocs de la boutique (bannières, liste de naissance, menus déroulants, fiches) gardent
   leur mise en page : seules les couleurs et les décors changent.
   Chargé par le module seulement pendant Halloween, avec hw-core.css (décors animés).
   ========================================================================== */

/* 0 · Jetons ------------------------------------------------------------- */
body.aesthetic-halloween {
  --hwm-night: #1B1340;
  --hwm-night-2: #251A55;
  --hwm-night-3: #140E31;
  --hwm-violet: #6A4FC4;
  --hwm-violet-ink: #4B3596;      /* 7,4:1 sur blanc */
  --hwm-pumpkin: #FF7A1A;
  --hwm-pumpkin-ink: #B8470A;     /* 5,1:1 sur blanc : petit texte orange */
  --hwm-moon: #FFE7A3;
  --hwm-ghost: #F6F2FF;
  --hwm-mist: #C9BEF0;
  --hwm-lilac: #F4EFFF;
  --hwm-sky:
    radial-gradient(1.4px 1.4px at 22px 18px, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1px 1px at 130px 40px, rgba(255, 231, 163, 0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 210px 12px, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(700px 260px at 85% -40%, rgba(106, 79, 196, 0.45), transparent 70%);
}

/* 1 · Barres du haut : langues, informations, WhatsApp ------------------- */
/* !important : la barre de langues et le bandeau WhatsApp ont leur couleur en style en ligne ou en !important dans le thème */
body.aesthetic-halloween #lmdb-langbar { background: var(--hwm-night-3) !important; }
body.aesthetic-halloween #lmdb-langbar a { color: var(--hwm-mist); }
body.aesthetic-halloween #lmdb-langbar a.is-on { background: var(--hwm-pumpkin); color: var(--hwm-night); }

body.aesthetic-halloween #header {
  background-color: var(--hwm-night);
  background-image: var(--hwm-sky);
  background-size: 240px 60px, 260px 60px, 300px 60px, auto;
  color: var(--hwm-mist);
}
body.aesthetic-halloween #header .header-nav .topnav,
body.aesthetic-halloween #header .header-nav .topnav * { color: var(--hwm-mist); }
body.aesthetic-halloween #header .header-nav .topnav strong,
body.aesthetic-halloween #header .header-nav .topnav b,
body.aesthetic-halloween #header .header-nav .topnav a { color: var(--hwm-moon); }

/* Bandeau « Nous sommes désormais sur WhatsApp » : ruban citrouille */
body.aesthetic-halloween #header .bottomnav .wrapper {
  background: linear-gradient(90deg, #E8650C, var(--hwm-pumpkin) 30%, #FF9A4D 70%, #E8650C) !important;
}
body.aesthetic-halloween #header .bottomnav .wrapper,
body.aesthetic-halloween #header .bottomnav .wrapper * { color: var(--hwm-night); }

/* 2 · Header : logo dans une lune, icônes, menu ------------------------- */
body.aesthetic-halloween #header .header-top { border-bottom: 1px solid rgba(201, 190, 240, 0.18); }
body.aesthetic-halloween #header .header-top,
body.aesthetic-halloween #header .header-top .cus-vogacall,
body.aesthetic-halloween #header .header-top .cus-vogacall * { color: var(--hwm-mist); }
body.aesthetic-halloween #header .header-top .cus-vogacall strong { color: var(--hwm-ghost); }
/* « TELEPHONE » : couleur écrite en style en ligne dans le bloc du thème */
body.aesthetic-halloween #header .header-top .cus-vogacall span { color: var(--hwm-ghost) !important; }
body.aesthetic-halloween #header .header-top .cus-vogacall a { color: var(--hwm-moon); }

body.aesthetic-halloween #header .h-logo { position: relative; }
body.aesthetic-halloween #header .h-logo > a {
  display: inline-flex;
  padding: 10px 26px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #FFFDF5, #FFF1CC 70%, #FFE7A3);
  box-shadow: 0 0 0 4px rgba(255, 231, 163, 0.18), 0 0 34px rgba(255, 231, 163, 0.45);
}

/* Icônes du header (recherche, compte, liste de naissance, panier) */
body.aesthetic-halloween #header .header-top .popup-title,
body.aesthetic-halloween #header .header-top .popup-title i,
body.aesthetic-halloween #header .header-top .ApHtml a,
body.aesthetic-halloween #header .header-top .ApHtml i,
body.aesthetic-halloween #header #_desktop_cart a,
body.aesthetic-halloween #header #_desktop_cart i { color: var(--hwm-ghost); }
body.aesthetic-halloween #header .header-top .popup-title:hover i,
body.aesthetic-halloween #header #_desktop_cart a:hover i { color: var(--hwm-pumpkin); }
body.aesthetic-halloween #header #_desktop_cart .cart-products-count,
body.aesthetic-halloween #header #_desktop_cart [class*="count"] { background: var(--hwm-pumpkin); color: var(--hwm-night); }
body.aesthetic-halloween #header #_desktop_cart.hw-wiggle { animation: hw-wiggle 0.6s ease 2; }

/* Menus déroulants des icônes (recherche, compte) : plaques claires lisibles */
body.aesthetic-halloween #header .popup-content,
body.aesthetic-halloween #header .popup-content * { color: #241B4D; }
body.aesthetic-halloween #header .popup-content { border-top: 3px solid var(--hwm-pumpkin); }

/* Méga-menu (ordinateur) : premier niveau en lettres de lune, survol citrouille.
   Sur mobile, le menu s'ouvre dans un panneau clair du thème : on n'y touche pas. */
@media (min-width: 992px) {
  body.aesthetic-halloween #header .leo-megamenu .megamenu > li > a,
  body.aesthetic-halloween #header .leo-megamenu .megamenu > li > a .menu-title,
  body.aesthetic-halloween #header .leo-megamenu .megamenu > li > a .caret,
  body.aesthetic-halloween #header .leo-megamenu .megamenu > li > a i { color: var(--hwm-ghost); }
  body.aesthetic-halloween #header .leo-megamenu .megamenu > li > a { position: relative; }
  body.aesthetic-halloween #header .leo-megamenu .megamenu > li:hover > a .menu-title,
  body.aesthetic-halloween #header .leo-megamenu .megamenu > li.open > a .menu-title { color: var(--hwm-pumpkin); text-shadow: 0 0 14px rgba(255, 122, 26, 0.55); }
  /* Les panneaux du méga-menu restent tels quels (marques, produits, visuels), cadrés d'un liseré citrouille */
  body.aesthetic-halloween #header .leo-megamenu .dropdown-menu {
    border-top: 3px solid var(--hwm-pumpkin);
    box-shadow: 0 24px 50px -18px rgba(27, 19, 64, 0.55);
  }
  /* « Soldes » en citrouille : l'entrée promo du menu */
  body.aesthetic-halloween #header .leo-megamenu .megamenu > li.lmdb-i-soldes > a .menu-title { color: var(--hwm-pumpkin); }
}
body.aesthetic-halloween #header .navbar-toggler,
body.aesthetic-halloween #header .navbar-toggler i,
body.aesthetic-halloween #header .navbar-toggler span { color: var(--hwm-ghost); }

/* Barre fixe au défilement (keep-header) : même nuit */
body.aesthetic-halloween #header .header-top.navbar-fixed-top,
body.aesthetic-halloween #header .header-top.fixed,
body.aesthetic-halloween #header .header-top[class*="sticky"] { background: var(--hwm-night); }

/* 3 · Contenu : fond clair, accents de nuit ------------------------------ */
body.aesthetic-halloween .breadcrumb,
body.aesthetic-halloween #wrapper > .breadcrumb { background-color: var(--hwm-lilac); }
body.aesthetic-halloween .breadcrumb a:hover { color: var(--hwm-pumpkin-ink); }

/* Accueil (bloc « lmb26 ») : la palette de la boutique passe en citrouille et violet de nuit */
body.aesthetic-halloween .lmb26 {
  --ink: #241B4D;
  --ink2: #5D5486;
  --teal: #6A4FC4;
  --teal-d: #4B3596;
  --aqua: #F1ECFF;
  --blush: #FFE9D6;
  --rose: #C2410C;
  --peach: #FFE3CC;
  --sun: #FFB066;
  --lilac: #E9E1FF;
  --cream: #FFF7EE;
  --line: #ECE6FA;
  --sh: 0 18px 40px -18px rgba(27, 19, 64, 0.35);
}

/* Catégories, recherche, promotions, fiche produit : la boutique y utilise ses propres variables --lm-* */
body#category.aesthetic-halloween,
body#manufacturer.aesthetic-halloween,
body#search.aesthetic-halloween,
body#prices-drop.aesthetic-halloween,
body#new-products.aesthetic-halloween,
body#best-sales.aesthetic-halloween,
body#product.aesthetic-halloween {
  --lm-ink: #241B4D;
  --lm-pink: #E8650C;
  --lm-teal: #4B3596;
  --lm-teal2: #6A4FC4;
  --lm-aqua: #F1ECFF;
  --lm-rose: #FFE9D6;
  --lm-peach: #FFE3CC;
  --lm-sun: #FFE0BF;
  --lm-lilac: #E9E1FF;
  --lm-cream: #FFF7EE;
  --lm-line: #ECE6FA;
  --lm-mute: #5D5486;
  --lm-hl: #FFB066;
}

/* Miniatures produits */
body.aesthetic-halloween .product-miniature .thumbnail-container { transition: box-shadow 0.25s ease, transform 0.25s ease; }
body.aesthetic-halloween .product-miniature .thumbnail-container:hover {
  box-shadow: 0 0 0 2px rgba(255, 122, 26, 0.55), 0 18px 34px -14px rgba(255, 122, 26, 0.45);
}
body.aesthetic-halloween .product-miniature .product-image { position: relative; }
body.aesthetic-halloween .product-miniature .discount-amount,
body.aesthetic-halloween .product-miniature .discount-percentage,
body.aesthetic-halloween .product-miniature .product-flag.discount,
body.aesthetic-halloween .product-miniature .product-flag.on-sale {
  background: radial-gradient(circle at 35% 30%, #FFB347, var(--hwm-pumpkin) 60%, #D9520A);
  color: var(--hwm-night);
  font-weight: 700;
}
body.aesthetic-halloween .product-miniature .category-default a { color: var(--hwm-violet-ink); }
body.aesthetic-halloween .product-miniature .product-title a:hover { color: var(--hwm-pumpkin-ink); }

/* Bouton panier des miniatures */
body.aesthetic-halloween .product-miniature .btn-product.add-to-cart { background: var(--hwm-night); color: var(--hwm-ghost); border-color: var(--hwm-night); }
body.aesthetic-halloween .product-miniature .btn-product.add-to-cart:hover { background: var(--hwm-pumpkin); color: var(--hwm-night); border-color: var(--hwm-pumpkin); }

/* Catégories : filtres et puces */
body.aesthetic-halloween #search_filters .facet-title { color: #241B4D; }
body.aesthetic-halloween #search_filters .custom-checkbox input:checked + span { background: var(--hwm-pumpkin); border-color: var(--hwm-pumpkin); }

/* 4 · Fiche produit ------------------------------------------------------ */
body.aesthetic-halloween #product .images-container { position: relative; }
body.aesthetic-halloween #product .images-container::before,
body.aesthetic-halloween #product .images-container::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 96px;
  height: 96px;
  pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%236A4FC4' stroke-opacity='.55' stroke-width='1.6'%3E%3Cpath d='M0 0L100 100M0 0L50 100M0 0L100 50M0 0L0 100M0 0L100 0'/%3E%3Cpath d='M0 22Q11 11 22 0M0 44Q22 22 44 0M0 66Q33 33 66 0M0 88Q44 44 88 0'/%3E%3C/svg%3E");
}
body.aesthetic-halloween #product .images-container::before { top: 0; left: 0; }
body.aesthetic-halloween #product .images-container::after { right: 0; bottom: 0; transform: rotate(180deg); }
/* Le bouton garde la couleur du thème (variable --lm-ink, passée en violet de nuit) avec un halo citrouille */
body.aesthetic-halloween #product .product-actions .add-to-cart { box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.35), 0 10px 24px -10px rgba(255, 122, 26, 0.8); }
body.aesthetic-halloween #product .current-price .discount,
body.aesthetic-halloween #product .discount-percentage,
body.aesthetic-halloween #product .discount-amount {
  background: radial-gradient(circle at 35% 30%, #FFB347, var(--hwm-pumpkin) 60%, #D9520A);
  color: var(--hwm-night);
}
body.aesthetic-halloween #product .product-actions { position: relative; }

/* 5 · Panier et commande : plaques claires, rien ne gêne la saisie ------ */
body.aesthetic-halloween #cart .cart-grid-body .card,
body.aesthetic-halloween #cart .cart-summary { position: relative; }
body.aesthetic-halloween #cart .cart-summary .btn-primary,
body.aesthetic-halloween #checkout .btn-primary {
  background: var(--hwm-pumpkin);
  border-color: var(--hwm-pumpkin);
  color: var(--hwm-night);
}
body.aesthetic-halloween #cart .cart-summary .btn-primary:hover,
body.aesthetic-halloween #checkout .btn-primary:hover { background: var(--hwm-night); border-color: var(--hwm-night); color: var(--hwm-ghost); }

/* 6 · Pied de page : la nuit revient ----------------------------------- */
body.aesthetic-halloween #footer .footer-center,
body.aesthetic-halloween #footer .footer-bottom {
  background-color: var(--hwm-night);
  background-image: var(--hwm-sky);
  background-size: 240px 60px, 260px 60px, 300px 60px, auto;
}
body.aesthetic-halloween #footer .footer-bottom { background-color: var(--hwm-night-3); }
body.aesthetic-halloween #footer .footer-center,
body.aesthetic-halloween #footer .footer-center p,
body.aesthetic-halloween #footer .footer-center li,
body.aesthetic-halloween #footer .footer-center a,
body.aesthetic-halloween #footer .footer-bottom,
body.aesthetic-halloween #footer .footer-bottom * { color: var(--hwm-mist); }
body.aesthetic-halloween #footer .footer-center :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .title_block, .block-title, .title) { color: var(--hwm-ghost); }
body.aesthetic-halloween #footer .footer-center a:hover,
body.aesthetic-halloween #footer .footer-bottom a { color: var(--hwm-moon); }
body.aesthetic-halloween #footer .footer-center a:hover { color: var(--hwm-pumpkin); }
body.aesthetic-halloween #footer .footer-center { position: relative; }
body.aesthetic-halloween #footer .footer-center .hw-footer-scene { margin-bottom: 18px; }

/* 7 · Boutons flottants : la chasse se range à gauche, au-dessus du panier volant */
body.aesthetic-halloween .hw-dock {
  inset-inline-start: max(14px, env(safe-area-inset-left, 0px));
  inset-inline-end: auto;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* 8 · Scène d'accueil : placée en tête de la page par le module (hook displayWrapperTop) */
body.aesthetic-halloween .hw-home--movic { margin-bottom: 28px; }
/* Le thème impose sa police aux <span> : on rend la sienne au titre et aux textes de la scène */
body.aesthetic-halloween .hw-home__title span { font-family: var(--hw-title); }
body.aesthetic-halloween .hw-home__lead,
body.aesthetic-halloween .hw-home__date { font-family: var(--hw-text); }
body.aesthetic-halloween .hw-home--movic .hw-home__grid {
  min-height: clamp(380px, 32vw, 480px);
  padding-block: clamp(28px, 4vw, 48px) clamp(80px, 8vw, 110px);
}

@media (max-width: 991px) {
  body.aesthetic-halloween #header .h-logo > a { padding: 6px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.aesthetic-halloween .product-miniature .thumbnail-container { transition: none; }
}