/* =========================================================
   ml_megamenu — styles front
   Tout est préfixé .mlmm- et aucune classe Bootstrap/Anvanto
   n'est réutilisée : le thème ne peut pas interférer.
   ========================================================= */

:root {
    /* Les 3 valeurs à ajuster en premier si la charte évolue */
    --mlmm-bar-bg: #009d96;          /* fond du bandeau de navigation */
    --mlmm-bar-color: #ffffff;       /* texte des entrées */
    --mlmm-accent: #f0a30a;          /* liseré sous le bandeau */

    --mlmm-panel-bg: #ffffff;
    --mlmm-card-border: #cccccc;     /* encadrement des rubriques */
    --mlmm-card-border-size: 1px;    /* epaisseur de cet encadrement */
    --mlmm-text: #4a4a4a;
    --mlmm-text-hover: #009d96;
    --mlmm-rule: #cccccc;            /* filet sous chaque lien */
    --mlmm-divider: #cccccc;         /* filet vertical entre les 2 colonnes */
    --mlmm-rule-size: 1px;           /* epaisseur des filets du panneau */
    --mlmm-col-gap: 26px;            /* air de part et d'autre du filet vertical */
    --mlmm-hover-bg: rgba(0, 157, 150, .07);  /* fond au survol d'un lien */
    --mlmm-max-width: 1900px;        /* largeur du contenu dans le panneau */
    --mlmm-card-width: 440px;        /* largeur d'une rubrique, identique partout */
    --mlmm-logo-height: 80px;        /* hauteur commune des cadres de logo */
    --mlmm-logo-min: 110px;          /* largeur plancher d'un cadre */
    --mlmm-logo-max: 260px;          /* largeur plafond d'un cadre */

    /* Bandeau de texte personnalisé affiché au survol d'un lien */
    --mlmm-hover-title-bg: #009d96;
    --mlmm-hover-title-color: #ffffff;
}

/* ---------- Bandeau ---------- */

.mlmm-bar {
    position: relative;              /* ancre du panneau plein largeur */
    background: var(--mlmm-bar-bg);
    border-bottom: 2px solid var(--mlmm-accent);
    z-index: 500;
}

.mlmm-nav-wrap {
    /* La classe .container du theme est ajoutee dans le template : c'est
       elle qui fixe la largeur, donc le menu s'aligne sur le logo a tous
       les points de rupture sans valeur codee en dur ici.
       Si le theme n'avait pas de .container, definir --mlmm-nav-width. */
    max-width: var(--mlmm-nav-width, none);
    margin: 0 auto;
    padding: 0 15px;
}

.mlmm-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;     /* aligne sur le bord gauche du logo */
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mlmm-item {
    /* Volontairement en static : l'ancêtre positionné le plus proche du
       panneau doit rester .mlmm-bar, sinon le panneau se calerait sur la
       largeur de l'entrée de menu au lieu de la barre entière. */
    position: static;
    display: flex;
    align-items: center;
}

/* Le séparateur "|" de la maquette, en CSS pour ne pas polluer le HTML */
.mlmm-item + .mlmm-item::before {
    content: "";
    width: 1px;
    height: 14px;
    align-self: center;
    background: rgba(255, 255, 255, .45);
}

.mlmm-link {
    display: block;
    padding: 14px 22px;
    /* voir .mlmm-item:first-child plus bas pour le rattrapage a gauche */
    color: var(--mlmm-bar-color);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

/* Le theme applique son propre survol aux liens du header (couleur claire
   et opacite reduite), ce qui rendait l'intitule presque illisible sur le
   fond turquoise. On reprend la main avec une specificite superieure. */
.mlmm-bar .mlmm-nav .mlmm-link:hover,
.mlmm-bar .mlmm-nav .mlmm-link:focus,
.mlmm-bar .mlmm-nav .mlmm-item.mlmm-open > .mlmm-link {
    color: var(--mlmm-bar-color) !important;
    opacity: 1;
    background: rgba(0, 0, 0, .10);
    text-decoration: none;
}

.mlmm-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* Le padding gauche de la premiere entree la decalerait de 22px par rapport
   au logo. On le supprime pour que les deux commencent exactement au meme x.
   Limite a .mlmm-bar : dans le clone mobile, ce rattrapage collerait au
   contraire le premier intitule au bord du tiroir. */
.mlmm-bar .mlmm-nav > .mlmm-item:first-child > .mlmm-link {
    /* Le padding est conserve pour que le fond du survol ne colle pas au
       texte, et annule par une marge negative de meme valeur : l'intitule
       reste donc exactement aligne sur le bord gauche du logo. */
    padding-left: 22px;
    margin-left: -22px;
}

/* ---------- Panneau plein largeur ---------- */

.mlmm-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;                        /* => largeur totale de .mlmm-bar */
    background: var(--mlmm-panel-bg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
    padding: 26px 15px 34px;

    /* Masqué sans display:none pour garder une transition fluide */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.mlmm-item.mlmm-open > .mlmm-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.mlmm-panel-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 22px;
    max-width: var(--mlmm-max-width);
    margin: 0 auto;
}

/* ---------- Rubrique (le carré encadré) ---------- */

.mlmm-card {
    /* Largeur fixe, et non une part de l'espace disponible : sinon une
       entrée comptant deux rubriques les afficherait bien plus larges
       qu'une entrée qui en compte quatre.
       flex-grow à 0 fige la largeur, flex-shrink à 1 autorise malgré tout
       le rétrécissement sur les petits écrans. */
    flex: 0 1 var(--mlmm-card-width);
    max-width: 100%;
    border: var(--mlmm-card-border-size) solid var(--mlmm-card-border);
    border-radius: 3px;
    padding: 18px 20px 22px;
    background: #fff;
    /* Ombre tres diffuse et sans decalage lateral : elle detache la carte
       du fond blanc du panneau sans donner d'effet de relief marque. */
    box-shadow: 0 1px 5px rgba(0, 0, 0, .07);
}

/* Enveloppe du titre : sert d'ancrage au bandeau de survol, qui vient se
   superposer exactement par-dessus le titre normal. */
.mlmm-card-head {
    position: relative;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: var(--mlmm-rule-size) solid var(--mlmm-divider);
}

.mlmm-card-title {
    color: #2c2c2c;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
    transition: opacity .12s ease;
}

/* Bandeau de texte personnalisé, masqué tant qu'aucun lien n'est survolé.
   Positionné en absolu pour ne pas modifier la hauteur de la rubrique :
   sans cela, l'apparition du bandeau ferait sauter toute la mise en page. */
.mlmm-card-hover {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 12px 14px;
    border-radius: 6px;
    background: var(--mlmm-hover-title-bg);
    color: var(--mlmm-hover-title-color);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease, visibility 0s linear .14s;
    pointer-events: none;            /* ne doit jamais intercepter la souris */
}

.mlmm-card-head.mlmm-hover-on .mlmm-card-hover {
    opacity: 1;
    visibility: visible;
    transition: opacity .14s ease, visibility 0s;
}

/* Le titre s'efface pendant que le bandeau est affiché : il reste en place
   pour continuer à réserver la hauteur, mais devient invisible. */
.mlmm-card-head.mlmm-hover-on .mlmm-card-title {
    opacity: 0;
}

.mlmm-card-cols {
    display: flex;
    /* Cet ecart separe la colonne de gauche du filet vertical, puisque le
       filet est porte par le bord gauche de la seconde colonne. */
    gap: var(--mlmm-col-gap);
}

.mlmm-col {
    flex: 1 1 0;
    min-width: 0;                    /* autorise le texte long à se couper */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Filet séparateur entre les deux colonnes.
   Porté par la 2e colonne plutôt que par un élément dédié : la ligne
   suit ainsi automatiquement la hauteur de la plus haute des deux. */
.mlmm-col + .mlmm-col {
    /* Meme valeur que le gap : l'air est identique de chaque cote du filet. */
    padding-left: var(--mlmm-col-gap);
    border-left: var(--mlmm-rule-size) solid var(--mlmm-divider);
}

.mlmm-col li + li {
    margin-top: 0;
}

.mlmm-col a {
    display: block;
    padding: 6px 0;
    border-bottom: var(--mlmm-rule-size) solid var(--mlmm-rule);
    color: var(--mlmm-text);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: uppercase;
    overflow-wrap: break-word;
    transition: color .12s ease, background-color .12s ease;
}

/* Le lien etant en display:block, le fond couvre toute la largeur de la
   colonne : la zone survolee correspond exactement a la zone cliquable. */
.mlmm-col a:hover,
.mlmm-col a:focus {
    color: var(--mlmm-text-hover);
    background: var(--mlmm-hover-bg);
    font-weight: bold;
    text-decoration: none;
}

/* ---------- Bandeau de logos sous les rubriques ----------
   Propre a chaque entree de menu. Masque sur mobile et lorsque la hauteur
   d'ecran manque : le bandeau est un complement, jamais l'essentiel. */

.mlmm-logos {
    position: relative;
    /* Largeur calée sur celle occupée par les rubriques, mesurée par le JS :
       le bandeau commence et finit exactement au même endroit qu'elles. */
    width: var(--mlmm-logos-width, 100%);
    max-width: var(--mlmm-max-width);
    margin: 22px auto 0;
}

.mlmm-logos-track {
    display: flex;
    align-items: center;
    /* Centré comme .mlmm-panel-inner, pour que le bandeau démarre au même
       endroit que la première rubrique. Le mot-clé "safe" évite que le début
       du bandeau devienne inatteignable quand le contenu déborde. */
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Barre de defilement masquee : la navigation se fait aux fleches,
       et une barre visible alourdirait le bandeau. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mlmm-logos-track::-webkit-scrollbar {
    display: none;
}

.mlmm-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hauteur commune, largeur libre : le cadre épouse les proportions de
       chaque logo. Les bornes évitent qu'un logo très allongé ou très carré
       ne déséquilibre la ligne. */
    width: auto;
    min-width: var(--mlmm-logo-min);
    max-width: var(--mlmm-logo-max);
    height: var(--mlmm-logo-height);
    padding: 8px 14px;
    border: var(--mlmm-card-border-size) solid var(--mlmm-card-border);
    border-radius: 3px;
    background: #fff;
    text-decoration: none;
}

.mlmm-logo img {
    /* L'image remplit le cadre au lieu de garder sa taille d'origine :
       des fichiers de définitions très différentes rendent ainsi de façon
       homogène. object-fit préserve les proportions, sans déformation. */
    /* Hauteur imposée, largeur calculée : c'est l'image qui détermine la
       largeur du cadre, d'où des logos tous à la même échelle visuelle. */
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: opacity .15s ease;
}

a.mlmm-logo:hover {
    border-color: var(--mlmm-bar-bg);
}

a.mlmm-logo:hover img {
    opacity: .75;
}

/* Fleches : ajoutees par le JS, revelees seulement si le contenu deborde */
.mlmm-logos-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: var(--mlmm-card-border-size) solid var(--mlmm-card-border);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .12);
    color: var(--mlmm-text);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity .15s ease;
}

.mlmm-logos-scrollable .mlmm-logos-nav {
    display: block;
}

.mlmm-logos-nav:disabled {
    opacity: .3;
    cursor: default;
}

.mlmm-logos-nav:hover:not(:disabled) {
    border-color: var(--mlmm-bar-bg);
    color: var(--mlmm-bar-bg);
}

/* Chevrons dessines en CSS : pas d'icone ni de police supplementaire */
.mlmm-logos-nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.mlmm-logos-prev {
    left: -12px;
}

.mlmm-logos-prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}

.mlmm-logos-next {
    right: -12px;
}

.mlmm-logos-next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

/* Ecran peu haut : le bandeau disparait pour que le panneau tienne
   entierement dans la fenetre, rubriques comprises. */
@media (max-height: 800px) {
    .mlmm-logos {
        display: none;
    }
}

@media (max-width: 991px) {
    .mlmm-logos {
        display: none;
    }
}

/* ---------- Liens affiches en logo ----------
   Le choix se fait ligne par ligne : seuls les liens portant une image
   recoivent ce traitement, les autres restent en texte dans la meme colonne. */

.mlmm-col a.mlmm-link-img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    min-height: 46px;
}

.mlmm-col a.mlmm-link-img img {
    max-width: 100%;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Logos en gris au repos, couleur au survol : uniformise des logos
       de qualités très différentes sans avoir à les retoucher. */
    filter: grayscale(100%);
    opacity: .8;
    transition: filter .15s ease, opacity .15s ease;
}

.mlmm-col a.mlmm-link-img:hover img {
    filter: none;
    opacity: 1;
}

/* ---------- Tablette / mobile ----------
   Sous 992px la barre est masquee : le JS recopie le menu dans le tiroir
   du theme (#_mobile_top_menu), ouvert par le burger existant.
   Si ce tiroir est absent de la page, le JS pose la classe de secours
   .mlmm-no-mobile-drawer et la barre reste visible en accordeon. */

@media (max-width: 991px) {
    .mlmm-bar {
        display: none;
    }

    .mlmm-no-mobile-drawer .mlmm-bar {
        display: block;
    }

    .mlmm-no-mobile-drawer .mlmm-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .mlmm-no-mobile-drawer .mlmm-item {
        display: block;
    }

    .mlmm-no-mobile-drawer .mlmm-item + .mlmm-item::before {
        display: none;
    }

    .mlmm-no-mobile-drawer .mlmm-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        box-shadow: none;
        display: none;
        padding: 0;
    }

    .mlmm-no-mobile-drawer .mlmm-item.mlmm-open > .mlmm-panel {
        display: block;
        padding: 14px 12px 18px;
    }

    .mlmm-no-mobile-drawer .mlmm-panel-inner {
        flex-direction: column;
        gap: 14px;
    }
}

/* ---------- Menu recopie dans le tiroir mobile ----------
   Le tiroir du theme a un fond clair : ces regles reprennent donc des
   couleurs de texte foncees, sans reprendre le bandeau turquoise. */

/* Le tiroir est bien plus etroit que le panneau desktop : a densite egale,
   les memes filets y paraissent deux fois plus lourds. On redefinit donc la
   variable sur le conteneur, et toutes les regles qui l'utilisent suivent
   par heritage, sans toucher au desktop. */
.mlmm-mobile {
    --mlmm-rule-size: 0.5px;
    --mlmm-card-border-size: 0.5px;
    /* Le vert plein sature un affichage aussi dense : les filets sous les
       liens passent en gris clair, seuls les separateurs restent colores. */
    --mlmm-rule: #e3e6e8;
}

.mlmm-mobile .mlmm-nav {
    flex-direction: column;
    align-items: stretch;
}

.mlmm-mobile .mlmm-item {
    position: relative;
    display: block;
    border-bottom: 1px solid #ececec;
}

.mlmm-mobile .mlmm-item + .mlmm-item::before {
    display: none;
}

.mlmm-mobile .mlmm-nav > .mlmm-item > .mlmm-link {
    padding: 14px 40px 14px 15px;
    color: #2c2c2c;
    font-size: 14px;
}

.mlmm-mobile .mlmm-link:hover,
.mlmm-mobile .mlmm-link:focus,
.mlmm-mobile .mlmm-item.mlmm-open > .mlmm-link {
    color: var(--mlmm-bar-bg);
    background: transparent;
}

/* Le bandeau de survol n'a pas de sens au doigt : sur mobile, le titre
   de rubrique reste affiché en permanence. */
.mlmm-mobile .mlmm-card-hover {
    display: none;
}

.mlmm-mobile .mlmm-card-head.mlmm-hover-on .mlmm-card-title {
    opacity: 1;
}

/* Chevron cliquable : deplie sans suivre le lien, ce qui permet de garder
   l'acces direct a la categorie sur l'intitule lui-meme. */
.mlmm-mobile .mlmm-caret {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 47px;
    cursor: pointer;
}

.mlmm-mobile .mlmm-caret::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 17px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #8a9aa0;
    border-bottom: 2px solid #8a9aa0;
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.mlmm-mobile .mlmm-item.mlmm-open .mlmm-caret::before {
    transform: rotate(-135deg);
    border-color: var(--mlmm-bar-bg);
}

.mlmm-mobile .mlmm-panel {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    box-shadow: none;
    padding: 0 15px 14px;
}

.mlmm-mobile .mlmm-item.mlmm-open > .mlmm-panel {
    display: block;
}

.mlmm-mobile .mlmm-panel-inner {
    flex-direction: column;
    gap: 12px;
    max-width: none;
}

.mlmm-mobile .mlmm-card {
    max-width: none;
    padding: 12px 14px 14px;
}

.mlmm-mobile .mlmm-card-head {
    margin-bottom: 12px;
    padding-bottom: 8px;
}

.mlmm-mobile .mlmm-card-title {
    font-size: 13px;
}

.mlmm-mobile .mlmm-col a {
    font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .mlmm-panel,
    .mlmm-link,
    .mlmm-col a,
    .mlmm-card-hover,
    .mlmm-card-title,
    .mlmm-logo img,
    .mlmm-logos-track,
    .mlmm-col a.mlmm-link-img img {
        transition: none;
    }
}

/* ---------- Tiroir mobile du module ----------
   Le tiroir d'Anvanto est neutralise : son etat ferme par defaut venait de
   sa propre feuille de style, absente depuis la desactivation du module,
   et il restait donc ouvert au chargement. On le masque et on utilise
   notre propre tiroir, dont l'etat est entierement gere ici. */

@media (max-width: 991px) {
    .amegamenu_mobile-modal,
    .amegamenu_mobile-cover {
        display: none !important;
    }
}

.mlmm-drawer-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility 0s linear .22s;
}

.mlmm-drawer-overlay.mlmm-drawer-on {
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease, visibility 0s;
}

.mlmm-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    width: 86%;
    max-width: 380px;
    background: #fff;
    box-shadow: -4px 0 18px rgba(0, 0, 0, .18);
    /* Hors ecran au repos : translate est anime par le compositeur,
       donc plus fluide qu'une animation de "right". */
    transform: translateX(100%);
    transition: transform .26s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mlmm-drawer.mlmm-drawer-on {
    transform: translateX(0);
}

.mlmm-drawer-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 52px;
    padding: 0 10px;
    border-bottom: 1px solid #ececec;
}

.mlmm-drawer-close {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: #2c2c2c;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.mlmm-drawer-close:hover {
    color: var(--mlmm-bar-bg);
}

/* Empeche la page de defiler derriere le tiroir ouvert */
body.mlmm-drawer-lock {
    overflow: hidden;
}

@media (min-width: 992px) {
    .mlmm-drawer,
    .mlmm-drawer-overlay {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mlmm-drawer,
    .mlmm-drawer-overlay {
        transition: none;
    }
}


/* Le volet Service client vit à l'intérieur de #header, qui crée son propre
   contexte d'empilement : il ne se compare donc qu'à ses frères du header,
   dont la barre du méga-menu. Il suffit de le placer au-dessus d'eux. */
#header .clientservice_sg-modal {
    z-index: 1200;
}

#header .clientservice_sg-cover {
    z-index: 1199;
}

/* Le conteneur doit être positionné, sinon le z-index de ses enfants
   ne s'applique à rien. */
#header #_desktop_clientservice {
    position: relative;
    z-index: 1100;
}