/* === Sticky Compact Header Fusion === */
.sticky-compact-header {
    --sch-height: 70px;
    --sch-green: #16623f;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500; /* au-dessus du header classique */
    background: #ffffff; /* fond blanc */
    /* backdrop-filter: blur(6px) saturate(140%); */
    /* -webkit-backdrop-filter: blur(6px) saturate(140%); */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.25s ease, background 0.4s ease;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid var(--primary-light);
    color: var(--sch-green);
}

.sticky-compact-header.visible {
    transform: translateY(0);
    opacity: 1;
}

body.has-sticky-compact {
    /* éviter saut de contenu */
    scroll-padding-top: 80px;
}

.sticky-compact-header .sch-inner {
    height: var(--sch-height);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
}

.sticky-compact-header .sch-logo img {
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}
/* Alignement horizontal du lien logo */
.sticky-compact-header .sch-logo {
    display: flex;
    align-items: center;
    line-height: 0;
}
.sticky-compact-header .sch-logo a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    line-height: 0;
}
.sticky-compact-header .sch-logo a img {
    display: block;
    margin: 0;
}
.sticky-compact-header .sch-logo a img {
    display: block;
}

/* (scale retiré sur le logo sticky pour lisibilité) */

.sticky-compact-header .sch-left {
    flex: 0 0 auto;
}
.sticky-compact-header .sch-right {
    flex: 0 0 auto;
    margin-left: auto;
}
.sticky-compact-header .sch-center {
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: auto;
    pointer-events: auto; /* interactions normales */
}
.sticky-compact-header .sch-center > * {
    pointer-events: auto;
}

.sticky-compact-header #_sticky_search form,
.sticky-compact-header #_sticky_search .search-widget {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}

.sticky-compact-header #_sticky_search input[type="text"],
.sticky-compact-header #_sticky_search input[type="search"] {
    background: var(--sch-green); /* fond vert */
    border: 1px solid var(--sch-green);
    color: #ffffff; /* texte blanc */
    border-radius: 40px;
    padding: 0.55rem 1.1rem;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 6px -2px rgba(0, 0, 0, 0.35);
}

/* Bouton clear recherche */
.sticky-search-clear {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.25);
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease;
}
.sticky-search-clear:hover {
    background: rgba(255, 255, 255, 0.4);
}
.sticky-search-clear:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

.sticky-compact-header #_sticky_search input[type="text"]::placeholder,
.sticky-compact-header #_sticky_search input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.85);
}
.sticky-compact-header #_sticky_search input[type="text"]:focus,
.sticky-compact-header #_sticky_search input[type="search"]:focus {
    background: var(--sch-green);
    border-color: var(--primary-light);
    outline: none;
    box-shadow: 0 0 0 2px rgba(22, 98, 63, 0.55), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
}

.sticky-compact-header .sch-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 0.75rem;
}
.sticky-compact-header .sch-right .blockcart {
    order: 1;
}
.sticky-compact-header .sch-right .sticky-user-wrapper {
    order: 2;
    position: relative;
}

/* User dropdown logout */
.sticky-user-wrapper {
    position: relative;
}
.sticky-user-wrapper .sticky-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff; /* fond blanc */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.55rem;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.18);
    min-width: 180px;
    display: none !important;
    z-index: 50;
    animation: dropdownFade 0.25s ease;
    color: #16623f;
}
.sticky-user-wrapper.open .sticky-user-dropdown {
    display: block !important;
}
.sticky-user-caret {
    position: relative;
    display: inline-block;
    margin-left: 0.5rem;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #16623f; /* caret vert */
    transform-origin: 50% 50%;
    transition: transform 0.28s ease, border-top-color 0.28s ease, margin-top 0.28s ease;
    margin-top: -1px; /* correction optique verticale */
    vertical-align: middle;
}
.sticky-user-wrapper.open .sticky-user-caret {
    transform: rotate(180deg);
    border-top-color: #16623f;
}
@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Ancien style spécifique logout supprimé pour uniformisation */
/* Style commun pour tous liens dans dropdown (Mon compte + logout) */
.sticky-user-wrapper .sticky-user-dropdown a.sticky-account-link,
.sticky-user-wrapper .sticky-user-dropdown a.logout {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #16623f !important;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.5rem 0.6rem 0.5rem 0.55rem;
    line-height: 1.15;
    border-radius: 0.42rem;
    position: relative;
    background: rgba(0,0,0,0.02);
    transition: background 0.2s ease, color 0.2s ease;
}
.sticky-user-wrapper .sticky-user-dropdown a.sticky-account-link:hover,
.sticky-user-wrapper .sticky-user-dropdown a.logout:hover {
    background: rgba(22, 98, 63, 0.09);
    color: var(--primary-light) !important;
}
.sticky-user-wrapper .sticky-user-dropdown a.sticky-account-link:focus,
.sticky-user-wrapper .sticky-user-dropdown a.logout:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}
/* Icônes inline SVG (taille harmonisée) */
.sticky-user-dropdown .icon-svg {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex: 0 0 18px;
    color: currentColor;
}

/* Retirer logout original de la ligne principale */
.sticky-user-wrapper .user-info > .logout {
    display: none !important;
}

.sticky-compact-header .sch-right .blockcart,
.sticky-compact-header .sch-right .user-info {
    --icon-size: 38px;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #16623f !important;
    position: relative;
    text-decoration: none;
    border-radius: 32px;
    padding: 0.35rem 0.85rem;
    line-height: 1.1;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* Hover unifié : uniquement sur blockcart + user-info (évite double sur ancre interne) */
.sticky-compact-header .sch-right .blockcart:hover,
.sticky-compact-header .sch-right .user-info:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--primary-light) !important;
}

.sticky-compact-header .sch-right .blockcart:focus-visible,
.sticky-compact-header .sch-right .user-info:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

.sticky-compact-header .sch-right .blockcart:active {
    background: rgba(255, 255, 255, 0.18);
}

/* Etat panier vide */
.sticky-compact-header .sch-right .blockcart.sticky-cart-empty {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(30%);
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}
.sticky-compact-header .sch-right .blockcart.sticky-cart-empty .cart-products-count {
    opacity: 0.7;
}

/* Supprimer outline navigateur sur clic */
.sticky-compact-header .sch-right .blockcart:focus,
.sticky-compact-header .sch-right .user-info:focus {
    outline: none;
}

.sticky-compact-header .sch-right a {
    color: #16623f !important;
}

.sticky-compact-header .sch-right a:hover {
    color: var(--primary-bg) !important;
}

/* styles menu supprimés (sch-menu) car menu retiré du sticky */

/* Réduction sur écrans moyens */
@media (max-width: 1199.98px) {
    .sticky-compact-header {
        --sch-height: 62px;
    }
    .sticky-compact-header .sch-logo img {
        max-height: 46px;
    }
}

/* Mobile : on peut masquer la search bar si trop serré */
@media (max-width: 767.98px) {
    .sticky-compact-header {
        --sch-height: 58px;
    }
    /* Afficher la zone centrale (recherche) en version compacte */
    .sticky-compact-header .sch-center { /* déjà en flex via bloc principal */ }
    .sticky-compact-header #_sticky_search form,
    .sticky-compact-header #_sticky_search .search-widget {
        max-width: 100%;
    }
    .sticky-compact-header #_sticky_search input[type="text"],
    .sticky-compact-header #_sticky_search input[type="search"] {
        padding: 0.5rem 2.4rem 0.5rem 0.85rem; /* espace pour le bouton clear */
        font-size: 0.85rem;
        min-width: 0; /* autoriser shrink */
    }
    .sticky-search-clear {
        right: 0.4rem;
        width: 22px;
        height: 22px;
        font-size: 14px;
    }
    /* Empêcher masquage des éléments .hidden-sm-down à l'intérieur du sticky header */
    .sticky-compact-header .hidden-sm-down {
        display: flex !important;
    }
    /* Regrouper zone droite et limiter taille icônes */
    .sticky-compact-header .sch-right .blockcart,
    .sticky-compact-header .sch-right .user-info {
        --icon-size: 32px;
        padding: 0.3rem 0.6rem;
        gap: 0.4rem;
        font-size: 0.8rem;
        white-space: nowrap;
        flex: 0 0 auto; /* ne pas s'étirer */
        max-width: 56px; /* limite pour éviter débordement extrême */
    }
    /* Cacher les textes (ex: "Panier", "Mon compte") pour gagner de la place, garder éventuellement le compteur */
    .sticky-compact-header .sch-right .blockcart span:not(.cart-products-count),
    .sticky-compact-header .sch-right .user-info span, 
    .sticky-compact-header .sch-right .user-info .user-name {
        display: none !important;
    }
    /* Si des icônes sont des <i> font-awesome, s'assurer qu'elles restent */
    .sticky-compact-header .sch-right .blockcart i,
    .sticky-compact-header .sch-right .user-info i {
        font-size: 1.15rem;
        line-height: 1;
    }
    .sticky-compact-header .sch-right {
        gap: 0.6rem;
    }
    .sticky-user-wrapper .sticky-user-dropdown {
        min-width: 160px; /* un peu plus étroit sur mobile */
    }
    /* Ajuster logo */
    .sticky-compact-header .sch-logo img {
        max-height: 42px;
    }
    body.has-sticky-compact {
        scroll-padding-top: 60px;
    }
}
/* Renfort anti-wrap et affichage user-info si d'autres CSS interfèrent */
.sticky-compact-header .sch-inner { flex-wrap: nowrap !important; }
.sticky-compact-header .sch-center { flex:1 1 auto !important; min-width:0 !important; }
.sticky-compact-header .sticky-user-wrapper .user-info { display:flex !important; align-items:center; }
/* (Bloc intermédiaire 600-767 supprimé: mode icône étendu jusqu'à 991.98px) */
/* Desktop (>=768px) : s'assurer que le bloc user reste affiché */
@media (min-width: 768px) {
    .sticky-compact-header .sticky-user-wrapper .user-info { display:flex !important; }
}

/* Micro écrans < 420px : réduire davantage la search et compacter icônes */
@media (max-width: 419.98px) {
    .sticky-compact-header .sch-inner { gap: 0.5rem; }
    .sticky-compact-header #_sticky_search input[type="text"],
    .sticky-compact-header #_sticky_search input[type="search"] {
        padding: 0.42rem 2.1rem 0.42rem 0.7rem;
        font-size: 0.78rem;
    }
    .sticky-search-clear { width: 20px; height: 20px; font-size: 12px; }
    .sticky-compact-header .sch-right .blockcart,
    .sticky-compact-header .sch-right .user-info { max-width: 50px; padding: 0.28rem 0.5rem; }
    .sticky-compact-header .sch-logo img { max-height: 36px; }
}
/* Très petit < 360px : mode ultra compact, icônes seules, search se transforme en icône loupe cliquable (si besoin futur JS) */
@media (max-width: 359.98px) {
    .sticky-compact-header #_sticky_search input[type="text"],
    .sticky-compact-header #_sticky_search input[type="search"] {
        font-size: 0.72rem;
        padding: 0.38rem 1.9rem 0.38rem 0.6rem;
    }
    .sticky-compact-header .sch-right .blockcart,
    .sticky-compact-header .sch-right .user-info { max-width: 46px; }
    .sticky-compact-header .sch-inner { padding: 0 0.45rem; }
}

/* Anti duplication visuelle: masquer originaux quand sticky visible (optionnel) */
body.has-sticky-compact .header-nav {
    /* on pourrait réduire hauteur ou masquer */
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}
body.has-sticky-compact .header-top {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* ==== Mode focus recherche sticky ==== */
body.sticky-search-active {
    overflow: hidden;
}
body.sticky-search-active #wrapper {
    filter: blur(4px) brightness(0.85);
    transition: filter 0.3s ease;
}
body.sticky-search-active .sticky-compact-header {
    box-shadow: 0 6px 28px -4px rgba(0, 0, 0, 0.6);
}
.sticky-search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 450; /* sous sticky (500) */
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}
.sticky-search-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Suggestions rapides */
#sticky-search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 680px;
    background: #ffffff; /* fond blanc */
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    padding: 0.5rem 0.35rem 0.6rem;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: none;
    z-index: 520; /* dessus sticky */
    animation: fadeSlide 0.25s ease;
    color: #16623f;
}
#sticky-search-suggestions.open {
    display: block;
}
#sticky-search-suggestions .suggest-group {
    padding: 0.35rem 0.65rem;
}
#sticky-search-suggestions h4 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-light);
    margin: 0.25rem 0.4rem 0.35rem;
}
#sticky-search-suggestions ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#sticky-search-suggestions li {
    margin: 0;
    padding: 0;
}
#sticky-search-suggestions a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.55rem;
    text-decoration: none;
    color: #16623f;
    font-size: 0.85rem;
    line-height: 1.2;
    transition: background 0.18s ease, color 0.18s ease;
}
#sticky-search-suggestions a:hover,
#sticky-search-suggestions a:focus {
    background: rgba(22, 98, 63, 0.08);
    color: #0e442c;
    outline: none;
}
#sticky-search-suggestions a:focus {
    box-shadow: 0 0 0 2px rgba(22, 98, 63, 0.35) inset;
}
#sticky-search-suggestions .thumb {
    flex: 0 0 46px;
    height: 46px;
    border-radius: 0.5rem;
    background: #f3f3f3 center/cover no-repeat;
    position: relative;
}
#sticky-search-suggestions .price {
    margin-left: auto;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--primary-light);
}
#sticky-search-suggestions .empty {
    padding: 0.9rem 0.9rem 1rem;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.75;
    color: #16623f;
}
@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translate(-50%, -6px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Accessibilité focus */
.sticky-compact-header a:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

/* ==== Overlay / Modal Recherche ==== */
.sticky-search-modal {
    position: fixed;
    top: 14vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(760px, 94vw);
    /* Fond opaque forcé (supprime toute transparence potentielle héritée) */
    background: #16623f !important;
    background-color: #16623f !important;
    background-image: none !important;
    border: 2px solid var(--sch-green);
    border-radius: 0.95rem;
    padding: 1.05rem 1.1rem 1.3rem;
    box-shadow: 0 24px 54px -14px rgba(0,0,0,0.45);
    z-index: 650;
    display: none;
    animation: searchModalFade 0.28s ease;
    color: #ffffff;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}
/* Spécificité accrue quand overlay actif (au cas d'un style tiers plus spécifique) */
body.sticky-search-overlay-active .sticky-search-modal {
    background: #16623f !important;
    background-color: #16623f !important;
    background-image: none !important;
    opacity: 1 !important;
    filter: none !important;
}
body.sticky-search-overlay-active .sticky-search-modal { display: block; }
@keyframes searchModalFade {
    from { opacity:0; transform: translate(-50%, -10px); }
    to { opacity:1; transform: translate(-50%, 0); }
}
.sticky-search-modal .modal-search-input {
    width: 100%;
    background: #ffffff;
    color:#16623f;
    border:1px solid #ffffff;
    border-radius: 46px;
    padding:0.75rem 3.1rem 0.75rem 1.1rem;
    font-size:1rem;
    line-height:1.2;
    box-shadow:0 0 0 1px rgba(255,255,255,0.35),0 4px 14px -8px rgba(0,0,0,0.5);
}
.sticky-search-modal .modal-search-input::placeholder { color: rgba(22,98,63,0.55); }
.sticky-search-modal .modal-search-input:focus { outline:none; box-shadow:0 0 0 2px rgba(255,255,255,0.9),0 6px 22px -8px rgba(0,0,0,0.55); }
.sticky-search-modal .modal-clear-btn {
    position: absolute;
    top: 1.05rem;
    right: 1.15rem;
    width: 34px;
    height: 34px;
    border-radius:50%;
    background: rgba(255,255,255,0.25);
    border:none;
    color:#fff;
    cursor:pointer;
    font-size:18px;
    display:flex;align-items:center;justify-content:center;
    transition: background .2s ease;
}
.sticky-search-modal .modal-clear-btn:hover { background: rgba(255,255,255,0.4); }
.sticky-search-modal .modal-clear-btn:focus { outline:2px solid var(--primary-light); outline-offset:2px; }
.sticky-search-modal .modal-head {
    display:flex;
    align-items:center;
    gap:.65rem;
    margin-bottom:.6rem;
}
.sticky-search-modal .modal-title {
    font-size:.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    color: var(--primary-light);
    margin:0;
}
.sticky-search-modal .modal-body { position:relative; }
/* Suggestions repositionnées sous l'input quand overlay actif */
body.sticky-search-overlay-active #sticky-search-suggestions {
    position: static;
    transform:none;
    width:100%;
    margin-top:0.65rem;
    box-shadow:0 14px 32px -10px rgba(0,0,0,0.2);
    border-radius:0.65rem;
    animation: fadeSlideOverlay .25s ease;
}
@keyframes fadeSlideOverlay {
    from { opacity:0; transform: translateY(-6px); }
    to { opacity:1; transform: translateY(0); }
}
/* Bouton trigger loupe dans header */
.sticky-search-trigger {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px; height:38px;
    border-radius:50%;
    background: rgba(0,0,0,0.05);
    color: #16623f;
    cursor:pointer;
    transition: background .25s ease, color .25s ease;
    position:relative;
}
.sticky-search-trigger:hover { background: rgba(22,98,63,0.12); color: var(--primary-light); }
.sticky-search-trigger:focus { outline:2px solid var(--primary-light); outline-offset:2px; }
.sticky-search-trigger svg { width:20px; height:20px; }
/* Mode icône recherche étendu: en dessous de 992px on masque la barre et on garde seulement la loupe (overlay) */
@media (max-width: 991.98px) {
    .sticky-compact-header #_sticky_search input[type="text"],
    .sticky-compact-header #_sticky_search input[type="search"],
    .sticky-compact-header #_sticky_search .sticky-search-clear {
        display: none !important;
    }
    /* Masquer les éléments natifs de soumission sauf notre trigger personnalisé */
    .sticky-compact-header #_sticky_search button:not(.sticky-search-trigger),
    .sticky-compact-header #_sticky_search .search-button,
    .sticky-compact-header #_sticky_search .icon,
    .sticky-compact-header #_sticky_search .search-icon { display:none !important; }
    .sticky-compact-header #_sticky_search form button[type="submit"],
    .sticky-compact-header #_sticky_search form .btn,
    .sticky-compact-header #_sticky_search form i.material-icons,
    .sticky-compact-header #_sticky_search form svg { display:none !important; }
}
/* Desktop: cacher l'input sticky quand overlay actif pour éviter double apparition */
/* Ne pas cacher la barre desktop quand overlay actif; seulement mobile masque déjà l'input */
body.sticky-search-overlay-active .sticky-search-trigger { background: var(--sch-green); color:#fff; }
/* Affichage icône loupe uniquement sous 992px */
@media (min-width: 992px) {
    .sticky-search-trigger { display:none !important; }
}
body.sticky-search-overlay-active .sticky-compact-header #_sticky_search input[type="text"],
body.sticky-search-overlay-active .sticky-compact-header #_sticky_search input[type="search"],
body.sticky-search-overlay-active .sticky-compact-header #_sticky_search .sticky-search-clear {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}