/* =============================================================
   WUTBF — Menu mobile
   Actif sous 1170px
   ============================================================= */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --mm-breakpoint:   1170px;
  --mm-bg:           #ffffff;
  --mm-text:         #1a1a1a;
  --mm-text-light:   #555555;
  --mm-border:       #000000;
  --mm-accent:       #2e7d32;      /* vert foncé — même charte que les filtres */
  --mm-accent-light: #a8d5a2;
  --mm-bar-size:     24px;
  --mm-bar-thick:    2px;
  --mm-bar-gap:      6px;
  --mm-transition:   0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --mm-radius:       6px;
  --mm-z:            99990;
}

/* ── Masquer le hamburger sur desktop ─────────────────────── */
.mobile-menu__toggle,
.mobile-menu__overlay,
.mobile-menu__backdrop {
  display: none;
}

@media (max-width: 1170px) {

  /* ── Masquer le menu desktop ────────────────────────────── */
  #lanav {
    display: none !important;
  }

  /* ============================================================
     Hamburger
     ============================================================ */
  .mobile-menu__toggle {
    display:          flex;
    flex-direction:   column;
    justify-content:  center;
    align-items:      center;
    gap:              var(--mm-bar-gap);
    width:            44px;
    height:           44px;
    padding:          0;
    background:       #FFF;
    border:           none;
    cursor:           pointer;
    position:         fixed;
    top:              7px;
    right:            20px;
    z-index:          calc(var(--mm-z) + 10);
    border-radius:    var(--mm-radius);
    transition:       background var(--mm-transition);
  }

  .mobile-menu__toggle:hover {
    background: rgba(0,0,0,0.05);
  }

  .mobile-menu__bar {
    display:          block;
    width:            var(--mm-bar-size);
    height:           var(--mm-bar-thick);
    background:       var(--mm-text);
    border-radius:    2px;
    transition:       transform var(--mm-transition),
                      opacity   var(--mm-transition),
                      width     var(--mm-transition);
    transform-origin: center;
  }

  /* Hamburger → masqué quand l'overlay est ouvert
     (la croix de fermeture est dans l'overlay lui-même) */
  .mobile-menu__toggle[aria-expanded="true"] {
    opacity:        0;
    pointer-events: none;
  }

  /* ============================================================
     Backdrop (fond semi-transparent)
     ============================================================ */
  .mobile-menu__backdrop {
    display:    block;
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 0, 0.4);
    z-index:    calc(var(--mm-z) - 1);
    opacity:    0;
    pointer-events: none;
    transition: opacity var(--mm-transition);
  }

  .mobile-menu__backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* ============================================================
     Overlay plein écran
     ============================================================ */
  .mobile-menu__overlay {
    display:        flex;
    flex-direction: column;
    position:       fixed;
    inset:          0;
    z-index:        var(--mm-z);
    background:     var(--mm-bg);
    overflow-y:     auto;
    overscroll-behavior: contain;

    /* État fermé */
    opacity:    0;
    visibility: hidden;
    transform:  translateY(-12px);
    transition: opacity   var(--mm-transition),
                visibility var(--mm-transition),
                transform  var(--mm-transition);
  }

  .mobile-menu__overlay.is-open {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
  }

  /* ============================================================
     En-tête de l'overlay (logo + croix)
     ============================================================ */
  .mobile-menu__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 20px;
    border-bottom:   1px solid var(--mm-border);
    flex-shrink:     0;
  }

  .mobile-menu__logo {
    display:     block;
    line-height: 1;
  }

    .mobile-menu__logo-img {
        max-width: 200px;
        height: auto;
    }

  .mobile-menu__site-name {
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--mm-text);
  }

  .mobile-menu__close {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    background:      transparent;
    border:          1px solid var(--mm-border);
    border-radius:   50%;
    font-size:       1.5rem;
    line-height:     1;
    color:           var(--mm-text);
    cursor:          pointer;
    transition:      background var(--mm-transition),
                     color      var(--mm-transition);
    flex-shrink:     0;
  }

  .mobile-menu__close:hover {
    background: var(--mm-text);
    color:      var(--mm-bg);
  }

  /* ============================================================
     Corps : liste des items
     ============================================================ */
 .mobile-menu__body {
        flex: 1;
        padding: 0 0 8px;
        overflow-y: auto;
    }

  /* Reset liste */
  .mobile-menu__nav-list,
  .mobile-menu__sub {
    list-style:  none;
    margin:      0;
    padding:     0;
  }

  /* Item */
  .mobile-menu__item {
    border-bottom: 1px solid var(--mm-border);
  }

  /* Wrapper flex pour les parents (lien + bouton flèche) */
  .mobile-menu__item-wrap {
    display:     flex;
    align-items: stretch;
  }

  /* Lien */
  .mobile-menu__link {
    display:     block;
    flex:        1;
    padding:     14px 20px;
    color:       var(--mm-text);
    text-decoration: none;
    font-size:   1rem;
    font-weight: 500;
    transition:  color var(--mm-transition),
                 background var(--mm-transition);
  }

  .mobile-menu__link:hover,
  .mobile-menu__item.is-active > .mobile-menu__link,
  .mobile-menu__item.is-active > .mobile-menu__item-wrap .mobile-menu__link {
    color:      #000000;
    background: #aeb0e4;
  }

  /* Profondeur 1 : légèrement plus petit */
  .mobile-menu__item.depth-1 .mobile-menu__link {
    font-size:   0.95rem;
    font-weight: 400;
    padding-left: 32px;
  }

  /* Profondeur 2 */
  .mobile-menu__item.depth-2 .mobile-menu__link {
    font-size:    0.9rem;
    font-weight:  400;
    padding-left: 48px;
    color:        var(--mm-text-light);
  }

  /* Bouton flèche accordéon */
  .mobile-menu__toggle-sub {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    flex-shrink:     0;
    background:      transparent;
    border:          none;
    border-left:     1px solid var(--mm-border);
    cursor:          pointer;
    padding:         0;
    transition:      background var(--mm-transition);
  }

  .mobile-menu__toggle-sub:hover {
    background: rgba(0,0,0,0.04);
  }

  /* Flèche SVG inline via clip-path */
  .mobile-menu__arrow {
    display:    block;
    width:      10px;
    height:     10px;
    border-right:  2px solid var(--mm-text);
    border-bottom: 2px solid var(--mm-text);
    transform:  rotate(45deg);
    transition: transform var(--mm-transition);
    margin-top: -4px;
  }

  .mobile-menu__toggle-sub[aria-expanded="true"] .mobile-menu__arrow {
    transform:  rotate(-135deg);
    margin-top: 4px;
  }

  /* Sous-liste accordéon */
  .mobile-menu__sub {
    display:    none;
    background: rgba(0,0,0,0.02);
  }

  .mobile-menu__sub.is-open {
    display: block;
  }

  .mobile-menu__sub .mobile-menu__item {
    border-bottom: 1px solid var(--mm-border);
  }

  .mobile-menu__sub .mobile-menu__item:last-child {
    border-bottom: none;
  }

  /* ============================================================
     Pied de l'overlay : liens complémentaires
     ============================================================ */
  .mobile-menu__footer {
    flex-shrink:  0;
    padding:      20px;
    border-top:   1px solid var(--mm-border);
  }

  .mobile-menu__extra {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        12px;
    justify-content: center;
  }

  .mobile-menu__extra a {
    display:         inline-block;
    padding:         8px 18px;
    border-radius:   20px;
    font-size:       0.9rem;
    font-weight:     500;
    text-decoration: none;
    transition:      background var(--mm-transition),
                     color      var(--mm-transition);
  }

  /* Newsletter */
  .mobile-menu__extra .lknewsl {
    background: var(--mm-accent-light);
    color:      #FFF;
  }
  .mobile-menu__extra .lknewsl:hover {
    background: var(--mm-accent);
    color:      #fff;
  }

  /* Adhésion */
  .mobile-menu__extra .lkadhesion {
    background: var(--mm-accent);
    color:      #ffffff;
  }
  .mobile-menu__extra .lkadhesion:hover {
    background: #1b5e20;
  }

  /* Mon espace / Déconnexion */
  .mobile-menu__extra .lknespaco {
    background: transparent;
    color:      var(--mm-text);
    border:     1px solid var(--mm-border);
  }
  .mobile-menu__extra .lknespaco:hover {
    background: var(--mm-text);
    color:      var(--mm-bg);
  }

  /* ============================================================
     Espace membre (utilisateurs connectés) — couleurs inversées
     ============================================================ */
  .mobile-menu__member {
    --mm-member-bg:     #000;             /* fond sombre */
    --mm-member-text:   var(--mm-bg);               /* texte clair */
    --mm-member-border: rgba(255, 255, 255, 0.25);

    margin-top:  16px;
    background:  var(--mm-member-bg);
    color:       var(--mm-member-text);
    border-top:  1px solid var(--mm-border);
    border-bottom: 1px solid var(--mm-border);
  }

  /* Titre de section */
  .mobile-menu__member-title {
    margin:         0;
    padding:        12px 20px 10px;
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--mm-member-text);
    opacity:        0.7;
    border-bottom:  1px solid var(--mm-member-border);
  }

  /* Séparateurs entre items */
  .mobile-menu__member .mobile-menu__item,
  .mobile-menu__member .mobile-menu__sub .mobile-menu__item {
    border-bottom-color: var(--mm-member-border);
  }

  /* Liens (tous niveaux) */
  .mobile-menu__member .mobile-menu__link,
  .mobile-menu__member .mobile-menu__item.depth-2 .mobile-menu__link {
    color: var(--mm-member-text);
  }

  /* Survol / page active : même lavande que le menu principal */
  .mobile-menu__member .mobile-menu__link:hover,
  .mobile-menu__member .mobile-menu__item.is-active > .mobile-menu__link,
  .mobile-menu__member .mobile-menu__item.is-active > .mobile-menu__item-wrap .mobile-menu__link {
    color:      #000000;
    background: #aeb0e4;
  }

  /* Bouton flèche accordéon */
  .mobile-menu__member .mobile-menu__toggle-sub {
    border-left-color: var(--mm-member-border);
  }
  .mobile-menu__member .mobile-menu__toggle-sub:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  .mobile-menu__member .mobile-menu__arrow {
    border-right-color:  var(--mm-member-text);
    border-bottom-color: var(--mm-member-text);
  }

  /* Sous-listes : léger éclaircissement au lieu d'assombrissement */
  .mobile-menu__member .mobile-menu__sub {
    background: rgba(255, 255, 255, 0.05);
  }

  /* Focus clavier visible sur fond sombre */
  .mobile-menu__member a:focus-visible,
  .mobile-menu__member button:focus-visible {
    outline:        2px solid #aeb0e4;
    outline-offset: -2px;
  }
   .mobile-menu__overlay .mobile-menu__member {
    display: block;
    width:   100%;
  }

  .mobile-menu__overlay .mobile-menu__nav-list--member {
    display:  block;
    width:    100%;
    margin:   0;
    padding:  0;
  }

  .mobile-menu__overlay .mobile-menu__nav-list--member .mobile-menu__item {
    display: block;
    width:   100%;
    float:   none;
  }

  .mobile-menu__overlay .mobile-menu__nav-list--member .mobile-menu__link {
    text-transform: none;
    letter-spacing: normal;
  }


} /* fin @media max-width: 1170px */