/* assets/css/custom-sticky.css */

/* ════════════════════════════════════════════════════════════════════
   GLOBAL — DaisyUI v3 → v5 legacy HSL alias polyfill
   ────────────────────────────────────────────────────────────────────
   Le thème + tous les layouts du projet utilisent encore la syntaxe
   `hsl(var(--b1))`, `hsl(var(--bc) / 0.08)`, etc. — héritée de
   DaisyUI v3. DaisyUI v5 n'expose plus ces variables (il utilise
   `--color-base-100` en oklch). Sans polyfill, tous ces appels
   résolvent à invalide → fallback transparent → cards "fantômes"
   sans contraste visible (problème reporté par l'utilisateur).

   On définit ici les composants HSL par thème pour que toute la
   CSS legacy redevienne fonctionnelle, puis on décale légèrement
   le fond de page (--root-bg) pour que les surfaces sur --b1
   ressortent visuellement.
   ════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="emerald"],
[data-theme="light"],
:where(:root, [data-theme]):not([data-theme="forest"]):not([data-theme="dark"]) {
    /* Bases — emerald / light */
    --b1: 0 0% 100%;
    --b2: 220 14% 96%;
    --b3: 220 13% 91%;
    --bc: 220 13% 27%;

    /* Statuses — alignés avec les color-* DaisyUI v5 */
    --n: 220 13% 27%;
    --nc: 0 0% 98%;
    --in: 198 80% 51%;
    --inc: 0 0% 0%;
    --su: 158 65% 45%;
    --suc: 0 0% 0%;
    --wa: 38 92% 51%;
    --wac: 0 0% 0%;
    --er: 0 84% 60%;
    --erc: 0 0% 100%;
}

[data-theme="forest"],
[data-theme="dark"] {
    /* Bases — forest / dark */
    --b1: 0 0% 13%;
    --b2: 0 0% 9%;
    --b3: 0 0% 6%;
    --bc: 0 0% 84%;

    /* Statuses — variantes dark */
    --n: 0 0% 9%;
    --nc: 0 0% 84%;
    --in: 198 80% 60%;
    --inc: 0 0% 0%;
    --su: 158 65% 50%;
    --suc: 0 0% 0%;
    --wa: 38 92% 55%;
    --wac: 0 0% 0%;
    --er: 0 84% 65%;
    --erc: 0 0% 100%;
}

/* ── Page background : décale le fond global vers --b2 pour que les
      blocs sur --b1 (cards, header, dropdowns, mega-menu, FAQ,
      sections produit…) ressortent visuellement. ──────────────── */
:root,
[data-theme] {
    --root-bg: hsl(var(--b1));
}

body {
    background-color: hsl(var(--b1));
}

/* Le wrapper de fond du thème dreams suit aussi le nouveau ton. */
#dream-global-bg {
    background-color: hsl(var(--b1));
}

/* ── Renforcement subtil des bordures sur les surfaces qui restent
      blanches après le décalage de fond, pour ancrer visuellement
      les cards. Ne touche pas aux composants déjà bien définis. ── */
.card,
.card.bg-base-100 {
    border: 1px solid hsl(var(--bc) / 0.08);
    box-shadow: 0 1px 2px hsl(var(--bc) / 0.04);
}

.sticky-nav-group {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.sticky-devis-wrapper {
    position: relative;
}

.sticky-devis-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--p)); /* Primary color to match other buttons */
    color: hsl(var(--pc));
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    box-shadow: 0 10px 25px -5px hsl(var(--p) / 0.4);
    border: 2px solid hsl(var(--pc)) !important;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}

.sticky-devis-btn ion-icon {
    font-size: 1.8rem;
}

.sticky-devis-btn:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 20px 35px -10px hsl(var(--p) / 0.5);
    background: hsl(var(--pf, var(--p)));
}

.sticky-cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: hsl(var(--er, 0 100% 50%)); /* Red for visibility */
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    min-width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 2.5px solid hsl(var(--b1));
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: all 0.3s ease;
    z-index: 10;
}

/* Animations for the badge */
@keyframes badge-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.sticky-cart-badge:not(.hidden) {
    animation: badge-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sticky-cart-badge.hidden {
    display: none;
}

/* Sticky Menu & Call Buttons Styles */
.sticky-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--p));
    color: hsl(var(--pc));
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    box-shadow: 0 10px 25px -5px hsl(var(--p) / 0.4);
    border: 2px solid hsl(var(--pc)) !important;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 3100 !important; /* Higher than menu content */
}

.sticky-nav-btn:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 20px 35px -10px hsl(var(--p) / 0.5);
    background: hsl(var(--pf, var(--p)));
}

.sticky-nav-btn--active {
    background: hsl(var(--p));
}

.sticky-call-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: hsl(var(--p));
    color: hsl(var(--pc));
    padding: 0.8rem 1.2rem;
    border-radius: 999px;
    box-shadow: 0 10px 25px -5px hsl(var(--p) / 0.4);
    border: 2px solid hsl(var(--pc)) !important;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
}

.sticky-call-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 35px -10px hsl(var(--p) / 0.5);
    background: hsl(var(--pf, var(--p)));
}

/* Fix for sticky menu content overflow */
.sticky-menu-content {
    position: fixed !important;
    bottom: 110px !important; /* Above the sticky buttons */
    right: 1.5rem !important;
    left: 1.5rem !important;
    width: auto !important;
    max-width: 400px !important;
    margin-left: auto !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    background-color: hsl(var(--b1)) !important;
    border-radius: 2rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    z-index: 3050 !important; /* Below button but high enough for site */
    padding: 1.5rem !important;
    border: 1px solid hsl(var(--bc) / 0.1) !important;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--p) / 0.3) transparent;
    pointer-events: auto !important; /* Restore clicks */
}

[data-theme="forest"] .sticky-menu-content,
[data-theme="dark"] .sticky-menu-content {
    background-color: #1a1a1a !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
}

.sticky-call-btn ion-icon {
    font-size: 1.5rem;
    color: hsl(var(--pc)) !important;
}

@keyframes sticky-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Burger Icon Animation */
.burger-icon {
    width: 24px;
    height: 18px;
    position: relative;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
}

.burger-icon span {
    display: block;
    position: absolute;
    height: 2.5px;
    width: 100%;
    background: currentColor;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.burger-icon span:nth-child(1) { top: 0px; }
.burger-icon span:nth-child(2) { top: 8px; }
.burger-icon span:nth-child(3) { top: 16px; }

.burger-icon.open span:nth-child(1) {
    top: 8px;
    transform: rotate(135deg);
}

.burger-icon.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.burger-icon.open span:nth-child(3) {
    top: 8px;
    transform: rotate(-135deg);
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .sticky-nav-group {
        bottom: 1.5rem;
        right: 1.5rem;
    }
    .sticky-devis-btn {
        width: 3.2rem;
        height: 3.2rem;
    }
    .sticky-devis-btn ion-icon {
        font-size: 1.6rem;
    }

    /* Épuration Header Mobile */
    .mobile-toggle, 
    .nav-row-bottom {
        display: none !important;
    }
}

/* ============================================================
   NAVIGATION REDESIGN
   - Header nav links + active state (currentColor reusing brand HSL vars)
   - Catalogue mega-menu grid
   - Blog submenu
   - Mobile/sticky menu category tree
   Added to fix the broken category links and unify hover/active styles.
   ============================================================ */

[x-cloak] { display: none !important; }

.site-cat-icon {
    color: hsl(var(--p));
    transition: transform 0.2s ease;
}

/* --- Top-row nav links (Accueil, Catalogue, Blog, …) --- */
.site-header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.7rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    color: hsl(var(--bc) / 0.84);
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
    transition: color 0.15s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}
.site-header__nav-link ion-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
}
.site-header__nav-link:hover {
    background: hsl(var(--p) / 0.08);
    color: hsl(var(--p));
    border-color: hsl(var(--p) / 0.18);
    transform: translateY(-1px);
}
.site-header__nav-link:focus-visible {
    outline: 2px solid hsl(var(--p));
    outline-offset: 2px;
}
.site-header__nav-link.is-active {
    background: hsl(var(--p) / 0.12);
    color: hsl(var(--p));
    border-color: hsl(var(--p) / 0.22);
    box-shadow: inset 0 -2px 0 0 hsl(var(--p) / 0.6);
}
.site-header__chevron {
    font-size: 0.75rem;
    opacity: 0.6;
    transition: transform 0.2s ease;
}
.site-header__dropdown:hover .site-header__chevron,
.site-header__dropdown:focus-within .site-header__chevron {
    transform: rotate(180deg);
    opacity: 1;
}

.site-header__nav--accent {
    margin-left: 0.35rem;
    color: hsl(var(--ac)) !important;
    background: hsl(var(--a));
    border-color: hsl(var(--a)) !important;
}
.site-header__nav--accent:hover {
    background: hsl(var(--af, var(--a)));
    color: hsl(var(--ac)) !important;
}

/* --- Catalogue mega-menu (desktop) --- */
.site-header__dropdown { position: relative; }
.site-header__mega {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 60;
    width: min(720px, 90vw);
    padding: 1.1rem;
    background: hsl(var(--b1));
    border: 1px solid hsl(var(--bc) / 0.1);
    border-radius: 1.25rem;
    box-shadow: 0 24px 48px hsl(var(--bc) / 0.12);
}
.cat-mega__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 1.25rem;
}
.cat-mega__col {
    min-width: 0;
}
.cat-mega__heading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    margin: -0.4rem -0.55rem 0.4rem;
    border-radius: 0.6rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(var(--bc));
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.cat-mega__heading:hover,
.cat-mega__heading.is-active {
    color: hsl(var(--p));
    background: hsl(var(--p) / 0.08);
}
.cat-mega__list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.cat-mega__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.55rem;
    color: hsl(var(--bc) / 0.82);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.cat-mega__link:hover {
    background: hsl(var(--p) / 0.08);
    color: hsl(var(--p));
}
.cat-mega__link.is-active {
    background: hsl(var(--p) / 0.14);
    color: hsl(var(--p));
    font-weight: 700;
}
.cat-mega__all {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid hsl(var(--bc) / 0.08);
    border-radius: 0.65rem;
    color: hsl(var(--p));
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.15s ease;
}
.cat-mega__all:hover {
    background: hsl(var(--p) / 0.08);
}
.cat-mega__all ion-icon { font-size: 1rem; }

/* --- Blog submenu (desktop) --- */
.site-header__submenu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 60;
    width: 18rem;
    padding: 0.5rem;
    background: hsl(var(--b1));
    border: 1px solid hsl(var(--bc) / 0.1);
    border-radius: 1rem;
    box-shadow: 0 20px 44px hsl(var(--bc) / 0.12);
    list-style: none;
    margin: 0;
}
.site-header__submenu-title {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.5;
}
.site-header__submenu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.6rem;
    color: hsl(var(--bc) / 0.85);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-header__submenu-link:hover,
.site-header__submenu-link.is-active {
    background: hsl(var(--p) / 0.08);
    color: hsl(var(--p));
}
.site-header__submenu-divider {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid hsl(var(--bc) / 0.08);
}
.site-header__submenu-all {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.6rem;
    color: hsl(var(--p));
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.15s ease;
}
.site-header__submenu-all:hover { background: hsl(var(--p) / 0.08); }

/* --- Mobile / sticky menu helpers --- */
.mobile-nav__top {
    display: flex;
    align-items: center;
    padding: 1rem 0.25rem;
    font-size: 1.08rem;
    font-weight: 700;
    color: hsl(var(--p)) !important;
    border-bottom: 1px solid hsl(var(--bc) / 0.06);
    text-decoration: none;
}
.mobile-nav__top.is-active {
    background: hsl(var(--p) / 0.08);
    border-radius: 0.75rem;
    padding-inline: 0.6rem;
}
.mobile-nav__section {
    border-bottom: 1px solid hsl(var(--bc) / 0.06);
}
.mobile-nav__section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 0.25rem;
    font-size: 1.08rem;
    font-weight: 700;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: hsl(var(--bc));
    transition: color 0.15s ease;
}
.mobile-nav__section-toggle.is-open {
    color: hsl(var(--p));
}
.mobile-nav__panel {
    background: hsl(var(--b2) / 0.5);
    border-radius: 1rem;
    margin-bottom: 0.4rem;
    padding: 0.5rem;
}
.mobile-nav__panel--list {
    list-style: none;
}
.mobile-nav__post {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.6rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: hsl(var(--bc) / 0.85);
    text-decoration: none;
    border-radius: 0.6rem;
    transition: background 0.15s ease;
}
.mobile-nav__post:hover,
.mobile-nav__post.is-active {
    background: hsl(var(--p) / 0.08);
    color: hsl(var(--p));
}
.mobile-nav__panel-all {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid hsl(var(--bc) / 0.08);
}
.mobile-nav__panel-all-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.6rem;
    color: hsl(var(--p));
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.6rem;
}
.mobile-nav__panel-all-link:hover {
    background: hsl(var(--p) / 0.08);
}

/* --- Category tree (mobile variant) --- */
.cat-tree {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cat-tree__item + .cat-tree__item { margin-top: 0.15rem; }
.cat-tree__parent,
.cat-tree__parent--leaf {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.65rem;
    background: transparent;
    border: 0;
    border-radius: 0.7rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: hsl(var(--bc));
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.cat-tree__parent:hover,
.cat-tree__parent--leaf:hover,
.cat-tree__parent.is-open,
.cat-tree__parent--leaf.is-active {
    background: hsl(var(--p) / 0.08);
    color: hsl(var(--p));
}
.cat-tree__label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.cat-tree__chevron {
    flex-shrink: 0;
    font-size: 0.85rem;
    opacity: 0.6;
    transition: transform 0.25s ease;
}
.cat-tree__children {
    list-style: none;
    margin: 0.15rem 0 0.35rem 0.5rem;
    padding: 0.25rem 0 0.25rem 0.6rem;
    border-left: 2px solid hsl(var(--p) / 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.cat-tree__child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.55rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: hsl(var(--bc) / 0.82);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.cat-tree__child:hover,
.cat-tree__child.is-active {
    background: hsl(var(--p) / 0.08);
    color: hsl(var(--p));
}
.cat-tree__child--all {
    font-weight: 700;
    color: hsl(var(--p));
    justify-content: space-between;
}
.cat-tree__child--all ion-icon { font-size: 0.95rem; }
.cat-tree__item--all {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid hsl(var(--bc) / 0.08);
}
.cat-tree__parent--all {
    color: hsl(var(--p));
}
.cat-tree__parent--all .cat-tree__label ion-icon {
    font-size: 1.1rem;
    color: hsl(var(--p));
}

/* --- Mega menu / submenu mobile fallback (in case theme widens lg) --- */
@media (max-width: 1023px) {
    .site-header__mega,
    .site-header__submenu {
        display: none;
    }
}

/* ============================================================
   DARK MODE CONTRAST FIXES
   - Improves text contrast for grey text and buttons in dark mode
   ============================================================ */
[data-theme="dark"] .sf-label, 
[data-theme="dark"] .sf-hint, 
[data-theme="dark"] .stepper-panel-title { 
    color: oklch(90% 0 0) !important; 
}
[data-theme="dark"] .sf-input, 
[data-theme="dark"] .sf-textarea, 
[data-theme="dark"] .sf-toggle, 
[data-theme="dark"] .sf-delivery-card { 
    background: oklch(25% 0 0); 
    border-color: oklch(35% 0 0); 
    color: oklch(95% 0 0); 
}
[data-theme="dark"] .sf-input::placeholder, 
[data-theme="dark"] .sf-textarea::placeholder { 
    color: oklch(60% 0 0) !important; 
}
[data-theme="dark"] .sf-toggle.active { 
    background: oklch(80% 0 0); 
    color: oklch(10% 0 0); 
}
[data-theme="dark"] .sf-toggle:focus-visible { 
    outline: 2px solid oklch(80% 0 0); 
    outline-offset: 2px; 
}