/* ======== CORRECTION DE CENTRAGE + POSITION ======== */
/* Met la pilule AU CENTRE de l'écran et un peu plus bas */
#mon-menu{
  position: fixed !important;            /* fixé au viewport (pas au conteneur Elementor) */
  top: 90px !important;                  /* ajuste la hauteur ici */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;
  min-width: 900px !important;         /* largeur minimale de la barre */
  padding-left: 40px !important;       /* plus d'air à gauche */
  padding-right: 40px !important;      /* plus d'air à droite */
  justify-content: space-between !important; /* espace bien réparti */

  /* La pilule ne doit PAS prendre toute la largeur */
  display: inline-flex !important;
  width: max-content !important;         /* rétrécit à son contenu */
  max-width: calc(100vw - 60px) !important; /* marge sécurité bords */
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

/* Elementor a tendance à étirer en 100% : on neutralise */
#mon-menu .elementor-container,
#mon-menu .e-con,
#mon-menu .e-con-inner,
#mon-menu .elementor-column,
#mon-menu .elementor-widget{
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;             /* pas d’étirement */
  padding: 0 !important;
  margin: 0 !important;
}

/* Le bloc NAV occupe l’espace central mais peut se compresser */
#mon-menu .elementor-nav-menu{
  flex: 1 1 auto !important;
  min-width: 0 !important;               /* évite les retours à la ligne */
}

/* UL horizontal sans retour */
#mon-menu .elementor-nav-menu--main .elementor-nav-menu{
  display: flex !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Liens compacts (réduit la largeur globale) */
#mon-menu .elementor-nav-menu--main .elementor-item{
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Désactive le burger sur desktop si un thème l’affiche trop tôt */
@media (min-width:1024px){
  #mon-menu .elementor-nav-menu__toggle{ display:none !important; }
  #mon-menu .elementor-nav-menu--dropdown{ display:none !important; }
}

/* ======== MOBILE/TABLETTE ======== */
@media (max-width:1023px){
  #mon-menu{
    top: 56px !important;                /* un peu plus haut sur mobile */
    max-width: calc(100vw - 24px) !important;
    gap: 10px !important;
  }
  /* liens repliés dans le dropdown, on garde le toggle */
  #mon-menu .elementor-nav-menu--main .elementor-nav-menu{ display:none !important; }
  #mon-menu .elementor-nav-menu__toggle{ display:inline-flex !important; }
}

/* ======== ESTHÉTIQUE (optionnel) ======== */
#mon-menu i,
#mon-menu svg {
  font-size: 30px !important;     /* taille des icônes */
  width: 30px !important;         /* largeur homogène */
  height: 30px !important;        /* hauteur homogène */
  flex-shrink: 0 !important;      /* empêche le rétrécissement */
  line-height: 1 !important;
}
#mon-menu img {
  max-height: 75px !important;
  width: auto !important;
}
/* ----- MENU NON-STICKY (défile avec la page) ----- */
#mon-menu{
  position: absolute !important;     /* ≠ fixed : ne reste pas collé au scroll */
  top: 90px !important;              /* ajuste la hauteur comme tu veux */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;

  /* largeur “pilule” centrée */
  display: inline-flex !important;
  width: max-content !important;
  max-width: calc(100vw - 40px) !important; /* marge de sécurité */
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

/* Neutralise le mode sticky d'Elementor si activé sur la section */
#mon-menu.elementor-sticky--active,
.elementor-sticky--active #mon-menu,
.elementor-sticky--effects #mon-menu{
  position: absolute !important;     /* force hors sticky */
  top: 90px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Empêche Elementor d’étirer à 100% */
#mon-menu .elementor-container,
#mon-menu .e-con,
#mon-menu .e-con-inner,
#mon-menu .elementor-column,
#mon-menu .elementor-widget{
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============ TABLETTE (768–1023px) — SANS BURGER ============ */
@media (min-width:768px) and (max-width:1023px){

  /* Pilule centrée, non-sticky, compacte */
  #mon-menu{
    position: absolute !important;
    top: 80px !important;                /* ajuste si besoin */
    left: 50% !important;
    transform: translateX(-50%) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    width: max-content !important;
    max-width: calc(100vw - 32px) !important; /* garde des marges latérales */
    padding: 8px 14px !important;
    border-radius: 40px !important;

    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  /* Conteneurs Elementor : pas de 100% forcé */
  #mon-menu .elementor-container,
  #mon-menu .e-con,
  #mon-menu .e-con-inner,
  #mon-menu .elementor-column,
  #mon-menu .elementor-widget{
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Structure : logo (gauche) / liens (centre qui peut se tasser) / icône (droite) */
  #mon-menu .elementor-widget-image{ flex:0 0 auto !important; }
  #mon-menu .elementor-nav-menu{ flex:1 1 auto !important; min-width:0 !important; }
  #mon-menu .elementor-widget-icon,
  #mon-menu .elementor-widget-button,
  #mon-menu .elementor-widget-shortcode{ flex:0 0 auto !important; }

  /* Affiche la ligne de liens, cache le burger */
  #mon-menu .elementor-nav-menu--main .elementor-nav-menu{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap: 12px !important;                /* écart serré pour tout faire tenir */
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    min-width:0 !important;
  }
  #mon-menu .elementor-nav-menu__toggle{ display:none !important; }
  #mon-menu .elementor-nav-menu--dropdown{ display:none !important; }

  /* Liens compacts et lisibles */
  #mon-menu .elementor-item{
    display:inline-flex !important;
    align-items:center !important;
    padding: 6px 8px !important;         /* réduit la largeur consommée */
    font-size: clamp(12.5px, 1.35vw, 14px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* Logo et icônes un poil réduits vs desktop pour gagner de la place */
  #mon-menu img{ max-height: 56px !important; width:auto !important; }
  #mon-menu i, #mon-menu svg{
    font-size: 24px !important; width:24px !important; height:24px !important;
    flex-shrink: 0 !important; line-height:1 !important;
  }
}

/* Filets de sécurité utiles partout */
#mon-menu .elementor-nav-menu{ min-width:0 !important; }
#mon-menu a, #mon-menu .elementor-widget{ white-space:nowrap !important; }

/* ============ TABLETTE PORTRAIT (ultra-compacte)  ============ */
@media (min-width:768px) and (max-width:899px){

  #mon-menu{
    position: absolute !important;
    top: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 8px !important;

    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    padding: 6px 10px !important;
    border-radius: 36px !important;
  }

  /* Nettoyage Elementor */
  #mon-menu .elementor-container,
  #mon-menu .e-con,
  #mon-menu .e-con-inner,
  #mon-menu .elementor-column,
  #mon-menu .elementor-widget{
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Structure */
  #mon-menu .elementor-widget-image{ flex:0 0 auto !important; }
  #mon-menu .elementor-nav-menu{ flex:1 1 auto !important; min-width:0 !important; }
  #mon-menu .elementor-widget-icon,
  #mon-menu .elementor-widget-button,
  #mon-menu .elementor-widget-shortcode{ flex:0 0 auto !important; }

  /* Liens : ultra compacts */
  #mon-menu .elementor-nav-menu--main .elementor-nav-menu{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap: 8px !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    min-width:0 !important;
  }

  #mon-menu .elementor-item{
    display:inline-flex !important;
    align-items:center !important;
    padding: 4px 6px !important;
    font-size: clamp(11.5px, 1.2vw, 13px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Cache tout menu burger éventuel */
  #mon-menu .elementor-nav-menu__toggle{ display:none !important; }
  #mon-menu .elementor-nav-menu--dropdown{ display:none !important; }

  /* Logo et icônes réduits */
  #mon-menu img{
    max-height: 48px !important;
    width: auto !important;
  }

  #mon-menu i,
  #mon-menu svg{
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
  }
}
/* ===== MOBILE (≤ 767px) — logo seul, menu au clic ===== */
@media (max-width:767px){

  /* Pilule centrée, non-sticky, compacte */
  #mon-menu{
    position: absolute !important;
    top: 56px !important;                  /* ajuste la hauteur si besoin */
    left: 50% !important;
    transform: translateX(-50%) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    padding: 6px 10px !important;
    border-radius: 32px !important;

    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    z-index: 1000 !important;
  }

  /* Nettoyage Elementor (évite les 100% parasites) */
  #mon-menu .elementor-container,
  #mon-menu .e-con,
  #mon-menu .e-con-inner,
  #mon-menu .elementor-column,
  #mon-menu .elementor-widget{
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* --- PAR DÉFAUT : n'afficher que le logo --- */
  /* logo */
  #mon-menu .elementor-widget-image{ display:inline-flex !important; }

  /* cacher la ligne de liens et l’icône compte */
  #mon-menu .elementor-nav-menu,
  #mon-menu .elementor-nav-menu--main .elementor-nav-menu,
  #mon-menu .elementor-nav-menu__toggle,
  #mon-menu .elementor-nav-menu--dropdown,
  #mon-menu .elementor-widget-icon,
  #mon-menu .elementor-widget-button,
  #mon-menu .elementor-widget-shortcode{
    display: none !important;
  }

  /* --- ÉTAT OUVERT : quand on clique le logo --- */
  #mon-menu.is-open{
    /* on garde la pilule du haut compacte */
  }

  /* on affiche le menu déroulé sous la pilule */
  #mon-menu.is-open .elementor-nav-menu--dropdown,
  #mon-menu.is-open .elementor-nav-menu__container{
    display: block !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2000 !important;
  }

  /* si tu n’utilises pas le “dropdown” Elementor, on peut aussi montrer la ligne de liens inline */
  #mon-menu.is-open .elementor-nav-menu--main .elementor-nav-menu{
    display: flex !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    background: rgba(166,181,204,0.9); /* même style que ta pilule */
  }

  /* afficher l’icône Mon compte à l’ouverture */
  #mon-menu.is-open .elementor-widget-icon,
  #mon-menu.is-open .elementor-widget-button,
  #mon-menu.is-open .elementor-widget-shortcode{
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Styles compacts (texte/liens) */
  #mon-menu .elementor-item{
    padding: 8px 10px !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  /* Logo et icônes — tailles mobiles */
  #mon-menu img{ max-height: 44px !important; width:auto !important; }
  #mon-menu i, #mon-menu svg{
    font-size: 24px !important; width:24px !important; height:24px !important;
    line-height: 1 !important; flex-shrink: 0 !important;
  }

  /* Petite transition pour l’ouverture */
  #mon-menu .elementor-nav-menu--dropdown,
  #mon-menu .elementor-nav-menu--main .elementor-nav-menu{
    transition: opacity .18s ease, transform .18s ease;
  }
  #mon-menu:not(.is-open) .elementor-nav-menu--dropdown,
  #mon-menu:not(.is-open) .elementor-nav-menu--main .elementor-nav-menu{
    opacity: 0; transform: translateY(-4px);
    pointer-events: none;
  }
  #mon-menu.is-open .elementor-nav-menu--dropdown,
  #mon-menu.is-open .elementor-nav-menu--main .elementor-nav-menu{
    opacity: 1; transform: translateY(0);
    pointer-events: auto;
  }
}
/* ===== MOBILE (≤ 767px) — capsule logo gauche / burger droite ===== */
@media (max-width:767px){

  /* La capsule (centrée, non-sticky) */
  #mon-menu{
    position: absolute !important;
    top: 56px !important;                   /* ajuste la hauteur si besoin */
    left: 50% !important;
    transform: translateX(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    /* Capsule bien visible et respirante */
    width: calc(100vw - 24px) !important;   /* prend quasi toute la largeur */
    max-width: 400px !important;            /* limite sur mobiles larges */
    padding: 8px 12px !important;
    border-radius: 32px !important;
    background: rgba(166,181,204,0.61) !important;

    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    z-index: 1000 !important;
  }

  /* Nettoyage Elementor (évite width:100%) */
  #mon-menu .elementor-container,
  #mon-menu .e-con,
  #mon-menu .e-con-inner,
  #mon-menu .elementor-column,
  #mon-menu .elementor-widget{
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Logo à gauche */
  #mon-menu .elementor-widget-image{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }
  #mon-menu img{
    max-height: 44px !important;           /* ajuste si besoin */
    width: auto !important;
  }

  /* Le widget de menu sert uniquement au burger sur mobile */
  #mon-menu .elementor-nav-menu{ flex: 0 0 auto !important; }

  /* Cache la ligne de liens inline ; on utilise le dropdown */
  #mon-menu .elementor-nav-menu--main .elementor-nav-menu{
    display: none !important;
  }

  /* Affiche et stylise le bouton burger (à droite) */
  #mon-menu .elementor-nav-menu__toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;            /* taille de l’icône */
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  #mon-menu .elementor-nav-menu__toggle i,
  #mon-menu .elementor-nav-menu__toggle svg{
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 1 !important;
  }

  /* Icône / bouton "Mon compte" : caché par défaut */
  #mon-menu .elementor-widget-icon,
  #mon-menu .elementor-widget-button,
  #mon-menu .elementor-widget-shortcode{
    display: none !important;
  }

  /* Dropdown du menu : s’ouvre sous la capsule, pleine largeur de la capsule */
  #mon-menu .elementor-nav-menu__container,
  #mon-menu .elementor-nav-menu--dropdown{
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2000 !important;
  }
  /* Style du panneau dropdown (Option esthétique) */
  #mon-menu .elementor-nav-menu--dropdown{
    background: rgba(166,181,204,0.96) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  #mon-menu .elementor-nav-menu--dropdown .elementor-item{
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  /* Quand le menu est ouvert (classe ajoutée par notre JS) */
  #mon-menu.is-open .elementor-widget-icon,
  #mon-menu.is-open .elementor-widget-button,
  #mon-menu.is-open .elementor-widget-shortcode{
    display: inline-flex !important;       /* affiche "Mon compte" */
    align-items: center !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;      /* même niveau que le dropdown */
    right: 0 !important;                   /* aligné à droite */
    z-index: 2001 !important;
    padding: 10px 12px !important;
    background: rgba(166,181,204,0.96) !important;
    border-radius: 12px !important;
    gap: 8px !important;
  }
  #mon-menu.is-open .elementor-widget-icon i,
  #mon-menu.is-open .elementor-widget-icon svg{
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
  }

  /* Petites transitions douces */
  #mon-menu .elementor-nav-menu--dropdown{ transition: opacity .18s ease, transform .18s ease; }
  #mon-menu:not(.is-open) .elementor-nav-menu--dropdown{ opacity: 0; transform: translateY(-4px); pointer-events: none; }
  #mon-menu.is-open .elementor-nav-menu--dropdown{ opacity: 1; transform: translateY(0); pointer-events: auto; }
}
/* ===== MOBILE (≤767px) — Capsule logo gauche / burger droite ===== */
@media (max-width:767px){

  /* La capsule elle-même */
  #mon-menu{
    position: absolute !important;      /* non-sticky */
    top: 56px !important;               /* ajuste la hauteur si besoin */
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* capsule centrée et respirante */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 8px 12px !important;

    width: min(640px, calc(100vw - 24px)) !important;
    border-radius: 32px !important;
    background: rgba(166,181,204,0.62) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    z-index: 1000 !important;
    position: relative !important;      /* pour ancrer le dropdown dessous */
  }

  /* Nettoyage Elementor : pas de 100% forcé, pas de marges internes */
  #mon-menu .elementor-container,
  #mon-menu .e-con,
  #mon-menu .e-con-inner,
  #mon-menu .elementor-column,
  #mon-menu .elementor-widget{
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Logo à gauche */
  #mon-menu .elementor-widget-image{
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  #mon-menu img{
    max-height: 44px !important;
    width: auto !important;
  }

  /* Le widget nav ne sert qu'au burger sur mobile */
  #mon-menu .elementor-nav-menu{ order: 2 !important; flex: 0 0 auto !important; }

  /* Cache la ligne de liens (on utilise le dropdown) */
  #mon-menu .elementor-nav-menu--main .elementor-nav-menu{
    display: none !important;
  }

  /* Bouton burger visible À DROITE dans la capsule */
  #mon-menu .elementor-nav-menu__toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 28px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
  }
  #mon-menu .elementor-nav-menu__toggle i,
  #mon-menu .elementor-nav-menu__toggle svg{
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 1 !important;
  }

  /* Icône / bouton “Mon compte” : on la cache dans la capsule en mobile */
  #mon-menu .elementor-widget-icon,
  #mon-menu .elementor-widget-button,
  #mon-menu .elementor-widget-shortcode{
    display: none !important;
  }

  /* DROPDOWN : s'ouvre sous la capsule, même largeur que la capsule */
  #mon-menu .elementor-nav-menu__container,
  #mon-menu .elementor-nav-menu--dropdown{
    position: absolute !important;
    top: calc(100% + 8px) !important;  /* juste sous la capsule */
    left: 0 !important;
    right: 0 !important;
    z-index: 2000 !important;
  }

  /* Style du panneau déroulant */
  #mon-menu .elementor-nav-menu--dropdown{
    background: rgba(166,181,204,0.96) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  #mon-menu .elementor-nav-menu--dropdown .elementor-item{
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  /* Si tu veux “Mon compte” DANS le dropdown, ajoute-le comme item du menu.
     (Sinon, laisse l’icône cachée ci-dessus.) */
}

/* ===== MOBILE "STYLE FUSION" ===== */
@media (max-width:767px){

  /* Capsule logo CENTRÉE, non-sticky */
  #mon-menu{
    position: absolute !important;
    top: 70px !important;                  /* ajuste la hauteur */
    left: 50% !important;
    transform: translateX(-50%) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 10px 18px !important;
    border-radius: 36px !important;
    background: rgba(216, 212, 200, 0.9) !important; /* beige doux */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 22px rgba(0,0,0,.15);

    width: auto !important;
    max-width: calc(100vw - 40px) !important;
    z-index: 1200 !important;
  }

  /* Nettoyage Elementor */
  #mon-menu .elementor-container,
  #mon-menu .e-con, #mon-menu .e-con-inner,
  #mon-menu .elementor-column, #mon-menu .elementor-widget{
    padding:0!important; margin:0!important;
    width:auto!important; max-width:none!important; min-width:0!important; flex:0 0 auto!important;
  }

  /* On n’affiche que le LOGO dans la capsule */
  #mon-menu .elementor-widget-image{ display:inline-flex!important; }
  #mon-menu img{ max-height: 40px !important; width:auto !important; }

  /* On cache tout le reste par défaut (liens + burger + icône compte) */
  #mon-menu .elementor-nav-menu,
  #mon-menu .elementor-nav-menu--main .elementor-nav-menu,
  #mon-menu .elementor-nav-menu__toggle,
  #mon-menu .elementor-widget-icon,
  #mon-menu .elementor-widget-button,
  #mon-menu .elementor-widget-shortcode{
    display:none!important;
  }

  /* ---------- PANNEAU CENTRAL (menu) ---------- */
  /* Conteneur panneau : centré et flottant sous la capsule */
  #mon-menu__panel{
    position: fixed; /* centre par rapport au viewport */
    left: 50%; top: 46vh; transform: translate(-50%, -50%);
    width: min(88vw, 520px);
    background: rgba(226, 223, 214, 0.96);   /* beige lumineux */
    border-radius: 22px;
    box-shadow: 0 22px 50px rgba(0,0,0,.22);
    padding: 18px 22px;
    z-index: 1199;                           /* sous la capsule */
    opacity: 0; pointer-events: none; transform-origin: 50% 0;
    transition: opacity .18s ease, transform .18s ease;
  }

  /* Liste verticale des liens depuis ton widget de menu */
  #mon-menu__panel .elementor-nav-menu--main .elementor-nav-menu{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  #mon-menu__panel .elementor-item{
    display: block !important;
    text-align: center !important;
    padding: 14px 10px !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    border-radius: 12px !important;
  }
  #mon-menu__panel .elementor-item:hover{
    background: rgba(255,255,255,0.35);
  }

  /* Bouton/ligne "Mon compte" si tu veux l’afficher dedans (widget icône/bouton) */
  #mon-menu__panel .elementor-widget-icon,
  #mon-menu__panel .elementor-widget-button,
  #mon-menu__panel .elementor-widget-shortcode{
    display: flex !important;
    justify-content: center !important;
    margin-top: 8px !important;
  }

  /* Overlay de fond pour assombrir légèrement la page */
  #mon-menu__overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.25);
    z-index: 1190;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
  }

  /* ÉTAT OUVERT : on montre overlay + panneau */
  #mon-menu.is-open + #mon-menu__overlay{ opacity: 1; pointer-events: auto; }
  #mon-menu.is-open ~ #mon-menu__panel{
    opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
  }

  /* Petite entrée zoom quand fermé */
  #mon-menu ~ #mon-menu__panel{ transform: translate(-50%, -50%) scale(.98); }
}

/* Masquer totalement le menu sur tablette + mobile (≤ 1023px) */
@media (max-width:1023px){
  #mon-menu{
    display: none !important;
  }
}