/* ============================================================
   Serapid — TopBar + Header + Menu principal
   Toutes les valeurs de couleur passent par les variables CSS
   CSS plat uniquement — pas de syntaxe imbriquée &__/&--
   ============================================================ */

/* -------------------------------------------------------
   1. TopBar (bande supérieure desktop)
   ------------------------------------------------------- */
.topbar {
    width: 100%;
    background: var(--color-navy);
    color: var(--white);
    font-family: var(--main-font);
    font-size: 13px;
    line-height: 1.2;
    z-index: 1001;
    position: relative;
    padding: 10px 0;
    overflow: visible;
    transition: max-height 0.25s ease, overflow 0.25s ease;
}

.topbar__inner {
    max-width: var(--container-xxl);
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
}

.topbar__list {
    display: flex;
    align-items: center;
    height: fit-content;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topbar__item {
    position: relative;
    display: flex;
    align-items: center;
    height: 14px;
}
.topbar__item:not(:last-child) {
    border-right: 1px solid var(--color-navy-deep);
}


.topbar__btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
    background: none;
    border: none;
    color: var(--white);
    font-family: var(--main-font);
    font-size: 13px;
    cursor: pointer;
    opacity: 0.95;
    transition: var(--transition);
    white-space: nowrap;
    font-weight: var(--regular-main);
}

.topbar__btn:hover {
    color: var(--color-gold);
    opacity: 1;
}

.login_top > .topbar__btn::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url('../../img/utilisateur.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.topbar__chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Rotation chevron au survol */
.topbar__item--has-children:hover .topbar__chevron {
    transform: rotate(-180deg);
}

/* Ouverture dropdown au survol */
.topbar__item--has-children:hover .topbar__dropdown {
    opacity: 1;
    visibility: visible;
}

.topbar__dropdown {
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);
    transform: translateX(-50%);
    background: var(--white);
    border-radius: 6px;
    padding: 8px 0;
    box-shadow: 0 12px 24px -12px rgba(15, 26, 37, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 50;
}

.topbar__dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.topbar__dropdown ul li {
    font-weight: var(--regular-main);
}

.topbar__dropdown ul li::before {
    display: none;
}

.topbar__dropdown a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--color-navy);
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
    font-weight: var(--regular-main);
}

.topbar__dropdown a:hover {
    color: var(--color-gold);
}


/* -------------------------------------------------------
   2. Header principal
   ------------------------------------------------------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(235, 224, 202, 0.3);

    @media (max-width: 991px) {
        padding: 15px 0;
    }
}

/* Correctif : le header ci-dessus est en position fixed en permanence.
   Les blocs .hdp (hero du builder) et .post-header (articles) compensent
   deja cette hauteur (padding-top / margin-top). Les pages "plates" sans
   contenu flexible (ex: Imprint, Mentions legales, generees via
   the_content() dans page.php) n'avaient aucune compensation : le header
   recouvrait le debut du texte. On rajoute ici le meme offset que .hdp
   (71px mobile / 113px desktop) sur ce cas precis. */
.content--fallback-offset {
    padding-top: 71px;
}

@media (min-width: 992px) {
    .content--fallback-offset {
        padding-top: 113px;
    }
}

.header.scrolling {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.95);
}

.header__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    /* Ancre pour les panneaux méga : top:100% des li.mega s'ancre ici,
       pas sur le .header total (topbar incluse), évitant le gap hover. */
    position: relative;
}

@media (min-width: 992px) {
    .header__main {
        display: grid;
        grid-template-columns: 200px 1fr auto;
        gap: 32px;
    }
}

/* -------------------------------------------------------
   3. Logo
   ------------------------------------------------------- */
.header__logo {
    display: block;
    align-self: center;
    min-width: 140px;
    z-index: 9999;
    position: relative;
    transition: var(--transition);
    text-decoration: none;
}

.header__logo img {
    height: 24px;
    width: auto;
    transition: var(--transition);
    display: block;
}

.header__logo:hover img {
    opacity: 0.75;
}

/* -------------------------------------------------------
   4. Menu principal (desktop)
   ------------------------------------------------------- */
.menu {
    display: none;
}

@media (min-width: 992px) {
    .menu {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }
}

@media (min-width: 992px) {
    .menu__main {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        list-style: none;
        margin: 0;
        padding: 0;
        position: static;
        overflow: visible;
    }

    .menu__main li {
        list-style: none;
    }

    .menu__main li::before,
    .menu__main li::marker {
        display: none;
    }

    /* Niveau 0 — item de menu principal
       overflow:visible est indispensable pour que le panneau déborde.
       Le padding vertical crée la zone hover confortable (34px haut et bas).
       position:relative par défaut ; les items .mega sont remis en static
       ci-dessous pour ancrer leur panneau sur le header (voir section 5). */
    .menu__main > .menu-item {
        position: relative;
        height: fit-content;
        padding: 30px 0;
        overflow: visible;
    }

    /* Items méga : position static pour que le .sub-menu-grid absolu
       se positionne relativement au .header__main (premier ancêtre positionné,
       voir .header__main { position: relative } ci-dessous), et non au li.
       Les items sans méga conservent position:relative (dropdowns simples). */
    .menu__main > .menu-item.mega {
        position: static;
    }

    /* Lien / span de l'item niveau 0 */
    .menu__main > .menu-item > a,
    .menu__main > .menu-item > span {
        display: flex;
        align-items: center;
        gap: 4px;
        font-family: var(--main-font);
        font-size: 15px;
        font-weight: var(--regular-main);
        line-height: 1.2;
        color: var(--color-navy);
        text-decoration: none;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        transition: var(--transition);
        white-space: nowrap;
    }

    /* Chevron via pseudo-élément */
    .menu__main > .menu-item > a::after,
    .menu__main > .menu-item > span::after {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url(../../img/chevron_down.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 0.2s ease;
    }

    /* Items sans sous-menu : pas de chevron */
    .menu__main > .menu-item:not(.menu-item-has-children) > a::after,
    .menu__main > .menu-item:not(.menu-item-has-children) > span::after {
        display: none;
    }

    /* État survol item niveau 0 : couleur + rotation chevron */
    .menu__main > .menu-item:hover > a,
    .menu__main > .menu-item:hover > span {
        color: var(--color-gold);
    }

    .menu__main > .menu-item:hover > a::after,
    .menu__main > .menu-item:hover > span::after {
        transform: rotate(-180deg);
    }
}

/* -------------------------------------------------------
   5. Mega-menu : panneau + grille de colonnes
   -------------------------------------------------------
   Structure HTML réelle générée par class-custom-menu-walker.php :

     li.mega.menu-item.menu-item-has-children   ← position:static (section 4)
       span                                      ← label item niveau 0
       div.sub-menu-grid                         ← panneau méga, enfant DIRECT du li
         div.sub-menu-image                      ← image promo (background-image inline)
         div.sub-menu-col.sub-menu-col--{white|light|dark}
           div.sub-menu-group
             a.sub-menu-col__title | span.sub-menu-col__title
             ul
               li > a

   NOTE : il n'y a PAS de .sub-menu wrapper entre le li et le .sub-menu-grid.
   Tout le positionnement et la visibilité sont appliqués directement sur .sub-menu-grid.

   Centrage sur le header (comportement Lovable) :
   Les li.mega sont en position:static. Le .sub-menu-grid est absolute, son ancre
   est le .header__main (position:relative — premier ancêtre positionné, PAS le
   .header/fixed qui inclut aussi la topbar). Cela garantit que top:100% = sous
   le bas de header__main = début immédiat du panneau, sans gap dû à la topbar.
   left:50% + translateX(-50%) = centré sur le .header__main (pleine largeur via
   width:100%). Identique à Lovable (left-0 right-0 top-full + width:1000px centré).
   Pas de width:100vw — aucun débordement horizontal.
   ------------------------------------------------------- */
@media (min-width: 992px) {

    /* Panneau méga : caché par défaut, affiché au survol du li.mega parent.
       Ancré sur .header__main (position:relative) grâce à position:static du li.mega.
       top:100% = juste sous le bas de header__main — pas de gap dû à la topbar.
       left:50% + translateX(-50%) centre le panneau sur la pleine largeur du header. */
    .menu__main > .menu-item.mega > .sub-menu-grid {
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translateX(-50%) translateY(-8px);
        width: 1000px;
        max-width: calc(100vw - 32px); /* évite tout débordement si viewport < 1032px */
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
        margin: 0;
    }

    /* Ouverture au survol */
    .menu__main > .menu-item.mega:hover > .sub-menu-grid {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    /* Grille interne : image + 3 colonnes
       Reproduit SubMenu.tsx : gridTemplateColumns="260px 1fr 1fr 1fr"
       rounded-[24px] border-[8px] border-white shadow-[0_24px_48px_-24px_rgba(15,26,37,0.25)]
       Le conteneur fait 1000px de large.
       padding-bottom:24px (pb-6 Lovable) est appliqué via margin-top sur le wrapper
       plutôt que padding pour ne pas interférer avec overflow:hidden de la grille. */
    .sub-menu-grid {
        display: grid;
        grid-template-columns: 260px 1fr 1fr 1fr;
        overflow: hidden;
        border-radius: var(--border-radius-card);
        border: 8px solid var(--white);
        box-shadow: 0 24px 48px -24px rgba(15, 26, 37, 0.25);
        width: 100%;
        box-sizing: border-box;
    }

    /* Variante 3 colonnes (image + 2 colonnes de contenu au lieu de 3) :
       ajouter la classe CSS "only_three_cols" sur le li parent (niveau 0,
       à côté de "mega") depuis Apparence > Menus. */
    .menu__main > .menu-item.mega.only_three_cols > .sub-menu-grid {
        grid-template-columns: 260px 1fr 1fr;
    }

    /* Image de gauche
       bg-cover bg-center minHeight:280 — identique Lovable */
    .sub-menu-image {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        min-height: 280px;
    }

    /* Colonnes de contenu
       px-8 py-7 → padding: 28px 32px */
    .sub-menu-col {
        padding: 28px 32px;
    }

    .sub-menu-col--white {
        background: var(--white);
    }

    .sub-menu-col--light {
        background: var(--color-light-grey);
    }

    .sub-menu-col--dark {
        background: var(--color-navy);
    }

    /* Espacement entre groupes
       Premier groupe : pas de marge. Suivants : mt-6 → margin-top:24px */
    .sub-menu-col .sub-menu-group {
        margin-top: 0;
    }

    .sub-menu-col .sub-menu-group + .sub-menu-group {
        margin-top: 24px;
    }

    /* Titre de groupe (a.sub-menu-col__title ou span.sub-menu-col__title)
       text-[13px] font-normal uppercase tracking-[0.08em]
       Couleurs selon variant : white/light → navy, dark → white */
    .sub-menu-col__title {
        display: block;
        font-family: var(--main-font);
        font-size: 13px;
        font-weight: var(--regular-main);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-decoration: none;
        transition: var(--transition);
        line-height: 1.4;
    }

    .sub-menu-col--white .sub-menu-col__title,
    .sub-menu-col--light .sub-menu-col__title {
        color: var(--color-navy);
    }

    .sub-menu-col--white .sub-menu-col__title:hover,
    .sub-menu-col--light .sub-menu-col__title:hover {
        color: var(--color-gold);
    }

    .sub-menu-col--dark .sub-menu-col__title {
        color: var(--white);
    }

    .sub-menu-col--dark .sub-menu-col__title:hover {
        color: var(--color-gold);
    }

    /* Liste de liens dans chaque groupe
       mt-3 space-y-2 → margin-top:12px, gap:8px entre li */
    .sub-menu-col ul {
        list-style: none;
        margin: 12px 0 0 0;
        padding: 0;
    }

    .sub-menu-col ul li {
        list-style: none;
    }

    /* Supprime le li::before injecté par builder.css ul:not([class]) li::before
       (la ul interne du méga menu est sans classe → la règle globale s'applique) */
    .sub-menu-col ul li::before {
        display: none;
    }

    .sub-menu-col ul li + li {
        margin-top: 8px;
    }

    /* Liens individuels
       text-[15px] font-normal */
    .sub-menu-col ul li a {
        font-family: var(--main-font);
        font-size: 15px;
        font-weight: var(--regular-main);
        text-decoration: none;
        transition: var(--transition);
        display: block;
    }

    /* Fond clair (white + light) : text-gold hover:text-dark-gold */
    .sub-menu-col--white ul li a,
    .sub-menu-col--light ul li a {
        color: var(--color-gold);
    }

    .sub-menu-col--white ul li a:hover,
    .sub-menu-col--light ul li a:hover {
        color: var(--color-dark-gold);
    }

    /* Fond sombre (dark) : text-gold hover:text-light-gold */
    .sub-menu-col--dark ul li a {
        color: var(--color-gold);
    }

    .sub-menu-col--dark ul li a:hover {
        color: var(--color-light-gold);
    }

}

/* Méga menu dans le panneau mobile (accordéon façon Lovable).
   Le walker PHP réutilise les classes du méga menu desktop (.sub-menu-grid).
   Sur mobile on aplatit la grille en pile verticale : titres de groupe +
   listes de liens, image promo masquée, variantes de colonne neutralisées.
   Replié par défaut, déplié quand le parent porte .sub-menu-open (toggle JS). */
.menu-mobile-panel .sub-menu-image {
    display: none;
}

.menu-mobile-panel .sub-menu-grid {
    display: none;
    padding: 0 16px 16px;
}

.menu-mobile-panel__list > li.sub-menu-open .sub-menu-grid {
    display: block;
}

.menu-mobile-panel .sub-menu-col {
    display: block;
    background: none;
    padding: 0;
    margin: 0;
}

.menu-mobile-panel .sub-menu-group {
    margin-bottom: 16px;
}

.menu-mobile-panel .sub-menu-group:last-child {
    margin-bottom: 0;
}

.menu-mobile-panel .sub-menu-col__title {
    display: block;
    font-family: var(--main-font);
    font-size: 12px;
    font-weight: var(--regular-main);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-navy);
    text-decoration: none;
    margin-bottom: 8px;
    transition: var(--transition);
}

.menu-mobile-panel .sub-menu-col__title:hover {
    color: var(--color-gold);
}

.menu-mobile-panel .sub-menu-col ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 8px;
}

.menu-mobile-panel .sub-menu-col ul li {
    list-style: none;
    margin: 0;
}

.menu-mobile-panel .sub-menu-col ul li::before,
.menu-mobile-panel .sub-menu-col ul li::marker {
    display: none;
}

.menu-mobile-panel .sub-menu-col ul li a {
    display: block;
    padding: 6px 0;
    font-family: var(--main-font);
    font-size: 14px;
    color: var(--color-gold);
    text-decoration: none;
    transition: var(--transition);
}

.menu-mobile-panel .sub-menu-col ul li a:hover {
    color: var(--color-dark-gold);
}

/* -------------------------------------------------------
   6. Actions header (CTA + burger)
   ------------------------------------------------------- */
.header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header__cta {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--border-radius-full);
    background: var(--color-gold);
    color: var(--white);
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: var(--regular-main);
    text-decoration: none;
    transition: var(--transition);
    line-height: 1;
    /* Neutralise le margin-top:32px de reset.css/.cta:not(.menu-cta,.surtitre) */
    margin-top: 0;
}

.header__cta:hover {
    background: var(--color-dark-gold);
    color: var(--white);
}

@media (min-width: 992px) {
    .header__cta {
        display: flex;
    }
}

.header__cta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.menu_mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-full);
    background: none;
    border: none;
    color: var(--color-navy);
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
}

.menu_mobile:hover {
    color: var(--color-gold);
}

.menu_mobile .menu__toggle {
    width: 24px;
    height: 24px;
    display: block;
}

@media (min-width: 992px) {
    .menu_mobile {
        display: none;
    }
}

/* -------------------------------------------------------
   7. Menu mobile — panneau latéral droit
   ------------------------------------------------------- */
.menu-mobile-panel__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
    transition: opacity 0.3s ease;
}

.menu-mobile-panel__overlay.active {
    display: block;
}

.menu-mobile-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: var(--white);
    z-index: 1060;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(15, 26, 37, 0.12);
}

.menu-mobile-panel.open {
    transform: translateX(0);
}

.menu-mobile-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-light-grey);
}

.menu-mobile-panel__title {
    font-family: var(--title-font);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-navy);
}

.menu-mobile-panel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--color-navy);
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
}

.menu-mobile-panel__close:hover {
    color: var(--color-gold);
}

.menu-mobile-panel__close svg {
    width: 24px;
    height: 24px;
}

.menu-mobile-panel__nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.menu-mobile-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-mobile-panel__list > li {
    border-bottom: 1px solid rgba(235, 240, 245, 0.7);
    list-style: none;
}

.menu-mobile-panel__list > li::before,
.menu-mobile-panel__list > li::marker {
    display: none;
}

.menu-mobile-panel__list > li > a,
.menu-mobile-panel__list > li > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    font-family: var(--main-font);
    font-size: 15px;
    font-weight: var(--regular-main);
    color: var(--color-navy);
    text-decoration: none;
    transition: var(--transition);
}

.menu-mobile-panel__list > li > a:hover,
.menu-mobile-panel__list > li > span:hover {
    color: var(--color-gold);
}

/* Item actif/ouvert */
.menu-mobile-panel__list > li.sub-menu-open > a,
.menu-mobile-panel__list > li.sub-menu-open > span {
    color: var(--color-gold);
}

/* Chevron sur items avec sous-menu (parent en <a> réel OU en <span> sans URL) */
.menu-mobile-panel__list > li.menu-item-has-children > a::after,
.menu-mobile-panel__list > li.menu-item-has-children > span::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../../img/chevron_down.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(66%) sepia(15%) saturate(668%) hue-rotate(4deg) brightness(97%) contrast(90%);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.menu-mobile-panel__list > li.sub-menu-open.menu-item-has-children > a::after,
.menu-mobile-panel__list > li.sub-menu-open.menu-item-has-children > span::after {
    transform: rotate(-180deg);
}

/* Sous-menu mobile */
.menu-mobile-panel__list .sub-menu {
    list-style: none;
    padding: 8px 0 16px 16px;
    margin: 0;
    display: none;
}

.menu-mobile-panel__list .sub-menu li {
    list-style: none;
}

.menu-mobile-panel__list .sub-menu li::before {
    display: none;
}

.menu-mobile-panel__list .sub-menu li a {
    display: block;
    padding: 6px 0;
    font-family: var(--main-font);
    font-size: 14px;
    color: var(--color-gold);
    text-decoration: none;
    transition: var(--transition);
}

.menu-mobile-panel__list .sub-menu li a:hover {
    color: var(--color-dark-gold);
}

.menu-mobile-panel__list > li.sub-menu-open .sub-menu {
    display: block;
}

/* Zone liens utilitaires (topbar items + login + langue) */
.menu-mobile-panel__utility {
    padding: 16px 24px;
    border-top: 1px solid var(--color-light-grey);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.menu-mobile-panel__utility-link {
    display: block;
    font-family: var(--main-font);
    font-size: 14px;
    color: var(--color-navy);
    text-decoration: none;
    transition: var(--transition);
    padding: 4px 0;
}

.menu-mobile-panel__utility-link:hover {
    color: var(--color-gold);
}


.menu-mobile-panel__footer {
    padding: 16px 24px;
    border-top: 1px solid var(--color-light-grey);
}

.menu-mobile-panel__cta {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--border-radius-full);
    background: var(--color-gold);
    color: var(--white);
    font-family: var(--main-font);
    font-size: 14px;
    font-weight: var(--regular-main);
    text-decoration: none;
    transition: var(--transition);
}

.menu-mobile-panel__cta:hover {
    background: var(--color-dark-gold);
    color: var(--white);
}

/* -------------------------------------------------------
   8. Helpers
   ------------------------------------------------------- */
@media (max-width: 991px) {
    .hidden-mobile {
        display: none !important;
    }
}

/* Corps : décaler le contenu sous header (topbar cachée sur mobile) */
body {
    padding-top: 72px; /* header mobile seul (topbar masquée sur mobile) */
}

@media (min-width: 992px) {
    body {
        padding-top: calc(36px + 88px); /* topbar (36px) + header desktop (88px) */
    }
}

/* -------------------------------------------------------
   9. Animation d'apparition mega-menu
   L'animation est intégrée via transform dans la transition
   (section 5 : translateY(-8px) → translateY(0) au hover).
   Pas besoin d'une @keyframes séparée — la transition CSS
   sur opacity + visibility + transform couvre le même effet.
   ------------------------------------------------------- */