/* ===========================================================================
   Méga-menus « Boutique » & « À propos » — Beautysané
   Déclenchés au survol de l'entrée (desktop) / accordéon (mobile).
   Markup : functions/functions.megamenu.php — comportement : assets/js/megamenu.js
   =========================================================================== */

/* Le <li> porteur passe en static pour que le panneau s'ancre sur le conteneur
   et s'étende sur toute la largeur. */
#main-menu-container .navbar-nav.main-nav > .nav-item.shop,
#main-menu-container .navbar-nav.main-nav > .nav-item.about-us {
    position: static;
}

.bs-megamenu {
    position: absolute;
    top: 100%;
    /* L'offset parent est nav.navbar (Bootstrap : position relative), dont la
       boîte est à l'intérieur du padding 50px de #main-menu-container. On déborde
       donc de 50px de chaque côté pour atteindre la pleine largeur (bord à bord),
       tout en gardant le padding du conteneur. */
    left: -50px;
    right: -50px;
    z-index: 9998;
    background-color: #FFF;
    border-top: 1px solid #ECECEC;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .08);

    /* Apparition au survol (desktop). */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

/* Pont invisible entre l'item Boutique et le panneau pour ne pas perdre le hover.
   La hauteur couvre la zone morte (lien centré dans une nav de 82px). */
.bs-megamenu::before {
    content: "";
    position: absolute;
    top: -34px;
    left: 0;
    right: 0;
    height: 34px;
}

#main-menu-container .navbar-nav.main-nav > .nav-item.shop:hover .bs-megamenu,
#main-menu-container .navbar-nav.main-nav > .nav-item.shop:focus-within .bs-megamenu,
#main-menu-container .navbar-nav.main-nav > .nav-item.about-us:hover .bs-megamenu,
#main-menu-container .navbar-nav.main-nav > .nav-item.about-us:focus-within .bs-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear;
}

.bs-megamenu__inner {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) auto;
    gap: 60px;
    padding: 48px 50px;
    align-items: start;
}

/* Variante « À propos » : 1 colonne de liens à gauche, 3 encarts à droite,
   centre laissé vide (space-between). */
.bs-megamenu--about .bs-megamenu__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

.bs-megamenu--about .bs-megamenu__promos {
    flex: 0 1 auto;
    min-width: 0;
}

.bs-megamenu--about .bs-megamenu__promo {
    width: auto;
    flex: 0 1 300px;
    min-width: 0;
}

/* Image carrée mais fluide (3 encarts doivent tenir sur les écrans moyens). */
.bs-megamenu--about .bs-megamenu__promo-img,
.bs-megamenu--about .bs-megamenu__promo-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* En colonne 1, le <ul> porte lui-même .bs-megamenu__col ; ailleurs le <ul> est
   un descendant du <div.bs-megamenu__col>. On cible les deux cas. */
.bs-megamenu__col ul,
ul.bs-megamenu__col {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bs-megamenu__col li {
    list-style: none;
}

.bs-megamenu__col a {
    text-decoration: none;
    color: var(--bs-ink);
    transition: color .2s ease;
}

.bs-megamenu__col a:hover {
    color: #37D894;
}

/* --- Colonne 1 : liens éditoriaux --- */
.bs-megamenu__links li + li {
    margin-top: 18px;
}

.bs-megamenu__links a {
    font: 600 20px/22px "Inter";
}

/* --- Colonnes 2 & 3 : titre + liste --- */
.bs-megamenu__title {
    margin: 0 0 20px 0;
    font: 600 17px/100% "Inter";
    color: var(--bs-ink);
}

.bs-megamenu__cats li + li,
.bs-megamenu__needs li + li {
    margin-top: 14px;
}

.bs-megamenu__cats a,
.bs-megamenu__needs a {
    font: 400 16px/20px "Inter";
}

/* --- Encarts (2 cartes) --- */
.bs-megamenu__promos {
    display: flex;
    gap: 24px;
}

.bs-megamenu__promo {
    display: block;
    width: 350px;
    max-width: 350px;
    text-decoration: none;
    color: var(--bs-ink);
}

.bs-megamenu__promo-img {
    display: block;
    width: 350px;
    height: 350px;
    overflow: hidden;
    margin-bottom: 14px;
}

.bs-megamenu__promo-img img {
    display: block;
    width: 350px;
    height: 350px;
    object-fit: cover;
    /* Zoom au survol (même effet que le triptych « Aller plus loin »). */
    transition: transform 0.5s ease;
}

.bs-megamenu__promo:hover .bs-megamenu__promo-img img {
    transform: scale(1.05);
}

.bs-megamenu__promo-title {
    display: block;
    margin-bottom: 6px;
    font: 600 20px/22px "Inter";
    color: var(--bs-ink);
}

.bs-megamenu__promo-text {
    display: block;
    font: 500 15px/100% "Inter";
    color: var(--bs-ink);
}

a.bs-megamenu__promo:hover .bs-megamenu__promo-title {
    color: #37D894;
}

/* ===========================================================================
   Mobile (≤767px) — accordéon autonome sous l'item porteur (Boutique / À propos).
   (Le header mobile « complet » fera l'objet d'une refonte ultérieure.)
   =========================================================================== */
@media (max-width: 767px) {

    .bs-megamenu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top: 0;
        transition: none;
    }

    .bs-megamenu::before {
        display: none;
    }

    /* L'ouverture est pilotée par le JS (classe is-open), pas par le hover. */
    #main-menu-container .navbar-nav.main-nav > .nav-item.shop:hover .bs-megamenu,
    #main-menu-container .navbar-nav.main-nav > .nav-item.about-us:hover .bs-megamenu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    #main-menu-container .navbar-nav.main-nav > .nav-item.shop.is-open .bs-megamenu,
    #main-menu-container .navbar-nav.main-nav > .nav-item.about-us.is-open .bs-megamenu {
        display: block;
    }

    /* En accordéon mobile, la variante À propos repasse en colonne unique. */
    .bs-megamenu__inner,
    .bs-megamenu--about .bs-megamenu__inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 24px 0;
    }

    .bs-megamenu__promos {
        flex-direction: column;
    }

    .bs-megamenu__promo,
    .bs-megamenu__promo-img,
    .bs-megamenu__promo-img img {
        width: 100%;
        max-width: 100%;
    }

    .bs-megamenu__promo-img,
    .bs-megamenu__promo-img img {
        height: auto;
        aspect-ratio: 1 / 1;
    }
}