/* =====================================================================
   ORNA GROUP — En-tête du site
   =====================================================================
   Cette feuille remplace les règles d'en-tête dispersées dans
   styles.css (blocs « Header », « Méga menu », « Menu mobile drawer »,
   « Search mobile » et leurs doublons). Elle est chargée APRÈS
   styles.css et tout est préfixé par `.site-header` ou `#mobileMenuDrawer`
   afin de l'emporter sans recourir à `!important`.

   Trois principes tenus d'un bout à l'autre :

   1. UNE SEULE FAMILLE DE BOUTONS. L'en-tête comptait cinq traitements
      différents (pilule bleue, plein vert, contour bleu, texte rouge,
      dégradé rose-or). Tout passe par `.sh-btn` et ses deux variantes.
   2. UNE SEULE ÉCHELLE. Un rayon, une ombre, une graduation d'espacement
      et de taille de texte, réutilisés partout.
   3. LE BLEU PORTE LA MARQUE, LE ROSE SIGNALE. Le bleu structure
      (barre utilitaire, boutons, états actifs) ; le rose est réservé aux
      éléments qui doivent attirer l'œil (pastille du panier, soulignement
      de l'onglet courant).
   ===================================================================== */

.site-header {
    --sh-radius: 10px;
    --sh-radius-sm: 8px;
    --sh-ring: 0 0 0 3px rgba(26, 26, 110, .12);
    --sh-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
    --sh-border: #e8e8ef;
    --sh-text: #2b2d42;
    --sh-muted: #6b7280;
    --sh-height: 76px;

    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--white);
    box-shadow: var(--sh-shadow);
}

/* ---------------------------------------------------------------------
   1. Barre utilitaire
   ------------------------------------------------------------------ */
.site-header .sh-utility {
    background: var(--primary-blue);
    color: rgba(255, 255, 255, .85);
    font-size: .82rem;
    line-height: 1;
}

.site-header .sh-utility .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    flex-wrap: wrap;
}

.site-header .sh-utility-group {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.site-header .sh-utility a,
.site-header .sh-utility span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
    transition: color .18s ease;
}

.site-header .sh-utility a:hover { color: #fff; }

.site-header .sh-utility svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: .8;
}

/* ---------------------------------------------------------------------
   2. Barre principale : logo, recherche, actions
   ------------------------------------------------------------------ */
.site-header .sh-main {
    border-bottom: 1px solid var(--sh-border);
}

/* Classe dédiée plutôt que `.sh-main .container` : la recherche mobile
   est elle aussi un `.container` placé dans `.sh-main`, et la règle
   descendante l'emportait sur son propre `display: none`, si bien
   qu'elle restait visible sur grand écran. */
.site-header .sh-main-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: var(--sh-height);
}

.site-header .sh-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header .sh-logo img {
    height: 46px;
    width: auto;
    display: block;
}

/* -- Recherche ------------------------------------------------------ */
.site-header .sh-search {
    flex: 1;
    max-width: 560px;
    position: relative;
    display: flex;
}

.site-header .sh-search input {
    width: 100%;
    height: 44px;
    padding: 0 52px 0 18px;
    font-size: .92rem;
    font-family: inherit;
    color: var(--sh-text);
    background: var(--light-gray);
    border: 1px solid transparent;
    border-radius: var(--sh-radius);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.site-header .sh-search input::placeholder { color: var(--sh-muted); }

.site-header .sh-search input:focus {
    outline: none;
    background: var(--white);
    border-color: var(--primary-blue);
    box-shadow: var(--sh-ring);
}

.site-header .sh-search button {
    position: absolute;
    right: 5px;
    top: 21px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--sh-radius-sm);
    background: var(--primary-blue);
    color: #fff;
    cursor: pointer;
    transition: background .18s ease;
}

.site-header .sh-search button:hover { background: var(--primary-blue-light); }
.site-header .sh-search button svg { width: 17px; height: 17px; }

/* -- Actions -------------------------------------------------------- */
.site-header .sh-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Élément d'action : icône au-dessus, libellé dessous. Une seule
   présentation pour compte, commandes, boutique et panier. */
.site-header .sh-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 12px;
    min-width: 68px;
    border-radius: var(--sh-radius-sm);
    color: var(--sh-text);
    font-size: .72rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: background .18s ease, color .18s ease;
}

.site-header .sh-action:hover {
    background: var(--light-gray);
    color: var(--primary-blue);
}

.site-header .sh-action svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.7;
}

.site-header .sh-action-cart .sh-badge {
    position: absolute;
    top: 4px;
    right: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--primary-pink);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--white);
}

/* Sépare le panier du reste des actions. */
.site-header .sh-actions-divider {
    width: 1px;
    height: 26px;
    background: var(--sh-border);
    margin: 0 6px;
}

/* ---------------------------------------------------------------------
   3. Boutons — une seule famille
   ------------------------------------------------------------------ */
.site-header .sh-btn,
#mobileMenuDrawer .sh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-sm, 8px);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.site-header .sh-btn svg,
#mobileMenuDrawer .sh-btn svg { width: 16px; height: 16px; }

.site-header .sh-btn--solid,
#mobileMenuDrawer .sh-btn--solid {
    background: var(--primary-blue);
    color: #fff;
}

.site-header .sh-btn--solid:hover,
#mobileMenuDrawer .sh-btn--solid:hover { background: var(--primary-blue-light); }

.site-header .sh-btn--outline,
#mobileMenuDrawer .sh-btn--outline {
    background: transparent;
    border-color: var(--sh-border, #e8e8ef);
    color: var(--sh-text, #2b2d42);
}

.site-header .sh-btn--outline:hover,
#mobileMenuDrawer .sh-btn--outline:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

/* ---------------------------------------------------------------------
   4. Navigation principale
   ------------------------------------------------------------------ */
.site-header .nav-main {
    background: var(--white);
    border-top: none;
    padding: 0;
}

.site-header .nav-main .container {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    justify-content: flex-start;
}

.site-header .nav-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.site-header .nav-menu > li { display: flex; }

.site-header .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--sh-radius-sm);
    color: var(--sh-text);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    transition: background .18s ease, color .18s ease;
}

.site-header .nav-link:hover {
    background: var(--light-gray);
    color: var(--primary-blue);
}

/* Onglet courant : soulignement rose, sans fond, plus sobre que
   l'ancien aplat pâle. */
.site-header .nav-link.active {
    color: var(--primary-blue);
    font-weight: 600;
    background: none;
}

.site-header .nav-link.active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-pink);
}

/* Bouton « Catégories » : point d'entrée du méga menu. */
.site-header .nav-categories-btn {
    background: var(--primary-blue);
    color: #fff;
    font-weight: 600;
    padding: 0 16px;
}

.site-header .nav-categories-btn:hover {
    background: var(--primary-blue-light);
    color: #fff;
}

.site-header .nav-categories-btn .arrow-down {
    font-size: .6rem;
    transition: transform .22s ease;
}

.site-header .nav-item-megamenu.active .nav-categories-btn .arrow-down {
    transform: rotate(180deg);
}

/* Bloc poussé à droite : appels à l'action secondaires. */
.site-header .nav-tail {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ---------------------------------------------------------------------
   5. Méga menu
   ------------------------------------------------------------------ */
.site-header .nav-item-megamenu { position: relative; }

.site-header .megamenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: min(880px, calc(100vw - 40px));
    background: var(--white);
    border: 1px solid var(--sh-border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    /* `visibility` ne doit pas être interpolée : mise en transition comme
       les autres propriétés, elle reste sur « hidden » pendant toute la
       durée et le menu ne s'ouvre jamais. On la bascule donc d'un coup —
       immédiatement à l'ouverture, après le fondu à la fermeture. */
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    z-index: 1200;
    overflow: hidden;
}

.site-header .megamenu::before { display: none; }

.site-header .nav-item-megamenu.active .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}

.site-header .megamenu-container {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 340px;
}

.site-header .megamenu-sidebar {
    background: #fafafc;
    border-right: 1px solid var(--sh-border);
    display: flex;
    flex-direction: column;
    padding: 14px 0;
}

.site-header .megamenu-sidebar-header {
    padding: 4px 20px 12px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--sh-muted);
}

.site-header .megamenu-categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    max-height: 300px;
    overflow-y: auto;
}

.site-header .megamenu-categories-list::-webkit-scrollbar { width: 5px; }
.site-header .megamenu-categories-list::-webkit-scrollbar-thumb {
    background: #d5d5e0;
    border-radius: 3px;
}

.site-header .megamenu-category-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: .88rem;
    color: var(--sh-text);
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.site-header .megamenu-category-item:hover,
.site-header .megamenu-category-item.active {
    background: var(--white);
    color: var(--primary-blue);
    border-left-color: var(--primary-pink);
    font-weight: 600;
}

.site-header .megamenu-category-item .cat-name { flex: 1; }

.site-header .megamenu-category-item .cat-arrow {
    color: var(--sh-muted);
    font-size: 1.1rem;
    line-height: 1;
}

.site-header .megamenu-all-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 0;
    padding: 10px 14px;
    border-radius: var(--sh-radius-sm);
    background: var(--primary-blue);
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    justify-content: center;
    transition: background .18s ease;
}

.site-header .megamenu-all-link:hover { background: var(--primary-blue-light); }

.site-header .megamenu-content { padding: 24px 28px; }

.site-header .megamenu-panel { display: none; }
.site-header .megamenu-panel.active { display: block; animation: shFade .22s ease; }

@keyframes shFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.site-header .megamenu-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--sh-border);
}

.site-header .megamenu-panel-header h3 {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sh-text);
}

.site-header .see-all-link {
    color: var(--primary-blue);
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.site-header .see-all-link:hover { text-decoration: underline; }

.site-header .megamenu-subcategories {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px 18px;
}

.site-header .megamenu-subcategories a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--sh-text);
    font-size: .87rem;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}

.site-header .megamenu-subcategories a:hover {
    background: var(--light-gray);
    color: var(--primary-blue);
}

.site-header .megamenu-subcategories .sub-name { flex: 1; }

.site-header .megamenu-subcategories .sub-count {
    color: var(--sh-muted);
    font-size: .78rem;
}

.site-header .megamenu-empty,
.site-header .megamenu-panel-desc {
    color: var(--sh-muted);
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

.site-header .megamenu-panel-desc {
    padding-top: 12px;
    border-top: 1px solid var(--sh-border);
}

/* ---------------------------------------------------------------------
   6. Bouton burger
   ------------------------------------------------------------------ */
.site-header .menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--sh-radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.site-header .menu-toggle:hover { background: var(--light-gray); }

.site-header .menu-toggle span {
    display: block;
    width: 21px;
    height: 2px;
    margin: 0 auto;
    background: var(--sh-text);
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
}

.site-header .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header .menu-toggle.active span:nth-child(2) { opacity: 0; }
.site-header .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Recherche affichée sous la barre principale sur mobile. */
.site-header .sh-search-mobile { display: none; padding: 0 0 12px; }

/* ---------------------------------------------------------------------
   7. Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1100px) {
    .site-header .sh-action span:last-child { display: none; }
    .site-header .sh-action { min-width: 44px; padding: 8px; }
}

@media (max-width: 992px) {
    .site-header { --sh-height: 64px; }

    .site-header .sh-utility { display: none; }
    .site-header .nav-main { display: none; }
    .site-header .menu-toggle { display: flex; }

    .site-header .sh-main-inner { gap: 12px; }
    .site-header .sh-logo img { height: 38px; }

    /* La recherche passe sur sa propre ligne : à cette largeur, la
       comprimer entre le logo et les actions la rendait inutilisable. */
    .site-header .sh-main-inner .sh-search { display: none; }
    .site-header .sh-search-mobile { display: block; }
    .site-header .sh-search-mobile .sh-search { max-width: none; }
}

@media (max-width: 480px) {
    .site-header .sh-actions-divider { display: none; }
    .site-header .sh-action { min-width: 40px; padding: 8px 6px; }
    .site-header .sh-logo img { height: 34px; }
}

/* =====================================================================
   8. Tiroir mobile
   ===================================================================== */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .5);
    opacity: 0;
    visibility: hidden;
    /* Même précaution que pour le méga menu : bascule instantanée. */
    transition: opacity .28s ease, visibility 0s linear .28s;
    z-index: 1400;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease, visibility 0s linear 0s;
}

#mobileMenuDrawer {
    position: fixed;
    top: 0;
    left: 0;
    width: min(330px, 88vw);
    height: 100%;
    background: var(--white);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 1500;
    box-shadow: 4px 0 32px rgba(16, 24, 40, .16);
}

#mobileMenuDrawer.active { transform: translateX(0); }

#mobileMenuDrawer .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--sh-border, #e8e8ef);
    flex-shrink: 0;
}

#mobileMenuDrawer .mobile-menu-logo { height: 34px; width: auto; }

#mobileMenuDrawer .mobile-menu-close {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--light-gray);
    color: var(--sh-muted, #6b7280);
    font-size: 1rem;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

#mobileMenuDrawer .mobile-menu-close:hover {
    background: #ececf3;
    color: var(--sh-text, #2b2d42);
}

#mobileMenuDrawer .mobile-menu-actions {
    display: flex;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sh-border, #e8e8ef);
    flex-shrink: 0;
}

#mobileMenuDrawer .mobile-menu-actions .sh-btn { flex: 1; }

#mobileMenuDrawer .mobile-menu-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0 20px;
    -webkit-overflow-scrolling: touch;
}

#mobileMenuDrawer .mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    color: var(--sh-text, #2b2d42);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}

#mobileMenuDrawer .mobile-nav-link:hover {
    background: var(--light-gray);
    color: var(--primary-blue);
}

#mobileMenuDrawer .mobile-nav-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--sh-muted, #6b7280);
}

#mobileMenuDrawer .mobile-nav-link:hover svg { color: var(--primary-blue); }

#mobileMenuDrawer .mobile-menu-divider {
    height: 1px;
    background: var(--sh-border, #e8e8ef);
    margin: 10px 18px;
}

#mobileMenuDrawer .mobile-menu-title {
    padding: 6px 18px;
    margin: 0;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--sh-muted, #6b7280);
}

/* -- Accordéon des catégories --------------------------------------- */
#mobileMenuDrawer .mobile-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 18px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 500;
    color: var(--sh-text, #2b2d42);
    text-align: left;
    cursor: pointer;
    transition: background .16s ease;
}

#mobileMenuDrawer .mobile-category-header:hover { background: var(--light-gray); }

#mobileMenuDrawer .mobile-cat-name { flex: 1; }

#mobileMenuDrawer .mobile-cat-arrow {
    font-size: .62rem;
    color: var(--sh-muted, #6b7280);
    transition: transform .22s ease;
}

/* app.js bascule la classe `open` sur l'accordéon (initMobileMenu). */
#mobileMenuDrawer .mobile-category-accordion.open .mobile-cat-arrow {
    transform: rotate(180deg);
}

#mobileMenuDrawer .mobile-category-content {
    display: none;
    background: #fafafc;
    padding: 4px 0 8px;
}

#mobileMenuDrawer .mobile-category-accordion.open .mobile-category-content {
    display: block;
}

#mobileMenuDrawer .mobile-subcategory-link {
    display: block;
    padding: 9px 18px 9px 34px;
    color: var(--sh-muted, #6b7280);
    font-size: .86rem;
    text-decoration: none;
    transition: color .16s ease;
}

#mobileMenuDrawer .mobile-subcategory-link:hover { color: var(--primary-blue); }

#mobileMenuDrawer .mobile-subcategory-main {
    color: var(--primary-blue);
    font-weight: 600;
}

#mobileMenuDrawer .mobile-menu-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--sh-border, #e8e8ef);
    background: #fafafc;
    flex-shrink: 0;
}

#mobileMenuDrawer .mobile-menu-footer a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    color: var(--sh-muted, #6b7280);
    font-size: .82rem;
    text-decoration: none;
}

#mobileMenuDrawer .mobile-menu-footer a:hover { color: var(--primary-blue); }
#mobileMenuDrawer .mobile-menu-footer svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------
   9. Accessibilité
   ------------------------------------------------------------------ */
.site-header a:focus-visible,
.site-header button:focus-visible,
#mobileMenuDrawer a:focus-visible,
#mobileMenuDrawer button:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .site-header *,
    #mobileMenuDrawer * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}