/* ==========================================================================
   Missebo — refonte du menu et du pied de page
   Style pur (aucun balisage modifie). Charge apres missebo-refonte.css.
   ========================================================================== */
:root {
    --mm-or: #c9971b;
    --mm-or-fonce: #b4870f;
    --mm-n: #14130f;
    --mm-gris: #6f6a62;
    --mm-trait: #e8e4dc;
}

/* ================= BANDEAU HAUT ================= */
body .top-header {
    background: var(--mm-n) !important;
    color: #f2ede2 !important;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    border: 0;
}
body .top-header a,
body .top-header .header-note { color: #f2ede2 !important; }

/* ================= EN-TETE ================= */
body .header.header-1 {
    border-bottom: 1px solid var(--mm-trait);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Menu principal (desktop) : liens espaces, souligne dore anime. */
body .site-nav .lvl1 > a,
body .navigation .lvl1 > a {
    position: relative;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    color: var(--mm-n) !important;
    padding-bottom: 4px;
}
body .site-nav .lvl1 > a::after,
body .navigation .lvl1 > a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--mm-or);
    transition: right 0.28s ease;
}
body .site-nav .lvl1:hover > a::after,
body .site-nav .lvl1.active > a::after,
body .navigation .lvl1:hover > a::after {
    right: 0;
}
body .site-nav .lvl1:hover > a,
body .navigation .lvl1:hover > a { color: var(--mm-or-fonce) !important; }

/* Icones d'en-tete (recherche, compte, panier) : survol dore. */
body .header .iconset:hover,
body .header .header-icons a:hover,
body .header .search:hover { color: var(--mm-or-fonce) !important; }

/* ================= BARRE DE NAVIGATION MOBILE ================= */
body .menubar-mobile {
    background: #fff !important;
    border-top: 1px solid var(--mm-trait);
    box-shadow: 0 -4px 18px rgba(20,19,15,0.08);
    padding: 0.35rem 0;
}
body .menubar-item {
    color: var(--mm-gris) !important;
    transition: color 0.15s ease;
}
body .menubar-item .menubar-icon { font-size: 1.25rem; }
body .menubar-label {
    font-size: 0.625rem !important;
    letter-spacing: 0.02em;
    font-weight: 600;
}
/* Element central (accueil) mis en avant. */
body .menubar-item.active,
body .menubar-shop.active,
body .menubar-item:active { color: var(--mm-n) !important; }
body .menubar-cart .menubar-icon,
body .menubar-wish .menubar-icon { position: relative; }
body .menubar-mobile .cart-count,
body .menubar-mobile .wishlist-count {
    background: var(--mm-or) !important;
    color: var(--mm-n) !important;
    font-weight: 700;
}

/* ================= PIED DE PAGE ================= */
body .footer {
    background: var(--mm-n) !important;
    color: #c9c3b8;
    padding-top: 3rem;
}

/* Titres de colonne : dore, petites capitales. */
body .footer h4,
body .footer .h4,
body .footer .footer-title {
    color: var(--mm-or) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    position: relative;
    padding-bottom: 0.6rem;
}
body .footer h4::after,
body .footer .h4::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 32px; height: 2px;
    background: var(--mm-or);
}

/* Liens : espaces, chevron dore au survol. */
body .footer-links ul li,
body .footer ul li { margin-bottom: 0.55rem; list-style: none; }
body .footer-links a,
body .footer a {
    color: #c9c3b8 !important;
    font-size: 0.875rem;
    transition: color 0.15s ease, padding-left 0.15s ease;
}
body .footer-links a:hover {
    color: #fff !important;
    padding-left: 5px;
}

/* Colonne contact : icones dorees. */
body .footer-contact a,
body .footer-contact li { color: #c9c3b8 !important; }
body .footer-contact ion-icon,
body .footer-contact i,
body .footer-contact svg { color: var(--mm-or) !important; }

/* Reseaux sociaux : pastilles rondes bordees. */
body .footer .social-icons { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
body .footer .social-icons li { margin: 0 !important; }
body .footer .social-icons a {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    transition: all 0.15s ease;
}
body .footer .social-icons a:hover {
    background: var(--mm-or) !important;
    border-color: var(--mm-or) !important;
    color: var(--mm-n) !important;
    padding-left: 0 !important;
}

/* Badges application : alignes, hauteur constante. */
body .footer .app-badges,
body .footer .footer-app { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
body .footer .app-badges img,
body .footer .footer-app img { height: 42px; width: auto; }

/* Barre inferieure : copyright separe. */
body .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 2.5rem;
    padding-top: 1.4rem;
    color: #8f897e;
    font-size: 0.8125rem;
}
body .footer-bottom a { color: var(--mm-or) !important; }

@media (prefers-reduced-motion: reduce) {
    body .site-nav .lvl1 > a::after,
    body .footer a { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Correctif footer mobile : le chevron d'accordeon se superposait au titre.
   On le repositionne a droite, aligne avec le filet dore.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body .footer h4,
    body .footer .h4 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }
    body .footer h4 .toggle-icon,
    body .footer h4 i,
    body .footer h4 ion-icon,
    body .footer h4 .anm {
        order: 2;
        margin-left: auto;
        color: var(--mm-or);
        font-size: 0.9rem;
    }
    /* Le filet dore reste sous le texte, pas sous le chevron. */
    body .footer h4::after { width: 28px; }
}