/* Menu mobile drill-down. Actif <= 900px. N'altère pas le desktop.
   Éléments injectés par js_v2/menu.js : .cata-mnav-bar, .cata-mnav-overlay. */

.cata-mnav-bar { display: none; }
.cata-mnav-overlay { display: none; }

@media (max-width: 900px) {
  /* On masque le nav desktop entier (hover, inutilisable au doigt) : il reste dans le DOM
     pour que menu.js lise/clone son contenu, mais n'intercepte plus les clics du burger. */
  nav#cata-menu { display: none !important; }

  /* Barre haute sticky + burger */
  .cata-mnav-bar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1000;
    height: 56px; padding: 0 16px;
    background: var(--blue-900, #0b1f3a); color: #fff;
  }
  .cata-mnav-bar .cata-mnav-title { font-weight: 700; letter-spacing: .04em; }
  .cata-mnav-burger {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; color: inherit;
  }
  .cata-mnav-burger span,
  .cata-mnav-burger span::before,
  .cata-mnav-burger span::after {
    content: ''; display: block; width: 24px; height: 2px; background: currentColor; position: relative;
  }
  .cata-mnav-burger span::before { position: absolute; top: -7px; }
  .cata-mnav-burger span::after  { position: absolute; top:  7px; }

  /* Overlay plein écran */
  .cata-mnav-overlay {
    display: block; position: fixed; inset: 0; z-index: 1001;
    background: var(--blue-900, #0b1f3a); color: #fff;
    transform: translateX(100%); transition: transform .25s ease;
    overflow: hidden;
  }
  .cata-mnav-overlay.is-open { transform: translateX(0); }

  .cata-mnav-overlay .cata-mnav-head {
    display: flex; align-items: center; gap: 8px;
    height: 56px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.15);
  }
  .cata-mnav-close, .cata-mnav-back {
    width: 44px; height: 44px; background: none; border: 0; color: inherit; cursor: pointer; font-size: 20px;
  }
  .cata-mnav-back { display: none; }

  /* Pile de panneaux : niveau 1 + niveau 2 glissé */
  .cata-mnav-panels { position: relative; height: calc(100% - 56px); }
  .cata-mnav-panel {
    position: absolute; inset: 0; overflow-y: auto;
    background: var(--blue-900, #0b1f3a);
    transform: translateX(0); transition: transform .25s ease;
  }
  .cata-mnav-panel.is-l2 { transform: translateX(100%); }
  .cata-mnav-overlay.at-l2 .cata-mnav-panel.is-l1 { transform: translateX(-30%); }
  .cata-mnav-overlay.at-l2 .cata-mnav-panel.is-l2 { transform: translateX(0); }
  .cata-mnav-overlay.at-l2 .cata-mnav-back { display: inline-block; }

  /* Items niveau 1 */
  .cata-mnav-item {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 52px; padding: 0 16px;
    background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.08);
    color: inherit; font-size: 17px; text-align: left; cursor: pointer; text-decoration: none;
  }
  .cata-mnav-item .chevron { opacity: .6; }

  /* Panneau tuiles (Races, Classes, ...) */
  .cata-mnav-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
  .cata-mnav-tiles a {
    display: block; min-height: 88px; border-radius: 8px; color: #fff; text-decoration: none;
    background-size: cover; background-position: center; position: relative; overflow: hidden;
  }
  .cata-mnav-tiles a span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,.65)); font-size: 14px;
  }

  /* Niveau 1 : hub de grosses tuiles */
  .cata-mnav-kicker {
    font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
    color: rgba(255,255,255,.5); padding: 14px 16px 10px;
  }
  .cata-mnav-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px 16px; }
  .cata-mnav-tile {
    position: relative; min-height: 82px; border-radius: 12px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.07); color: #fff; text-decoration: none;
    background: linear-gradient(150deg, #16365f, #0d2340);
    display: flex; align-items: flex-end; padding: 10px;
  }
  .cata-mnav-tile-lbl { font-size: 15px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
  .cata-mnav-tile.is-account {
    grid-column: 1 / -1; min-height: 56px; align-items: center; justify-content: space-between;
    background: linear-gradient(150deg, #3a2f12, #241a06); border-color: rgba(201,162,75,.35);
  }

  /* Cartes de section : Magie (mini-hub) + Mon compte */
  .cata-mnav-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 12px 14px; }
  .cata-mnav-card {
    min-height: 52px; border-radius: 10px; display: flex; align-items: center; padding: 0 12px;
    background: #123057; border: 1px solid rgba(255,255,255,.06); color: inherit; text-decoration: none;
    font-size: 14px; font-weight: 500;
  }
  .cata-mnav-card .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--gold, #c9a24b);
    margin-right: 9px; flex: 0 0 7px;
  }
  .cata-mnav-card.is-logout {
    grid-column: 1 / -1; justify-content: center; color: #e79191;
    background: transparent; border-color: rgba(214,90,90,.4); font-weight: 600;
  }
  .chevron { opacity: .55; margin-left: auto; }

  /* Panneau texte (Magie, Mon compte) */
  .cata-mnav-section { padding: 12px 16px 4px; font-size: 12px; text-transform: uppercase; opacity: .6; }
  .cata-mnav-list a {
    display: block; min-height: 48px; line-height: 48px; padding: 0 16px;
    color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .cata-mnav-note { padding: 12px 16px; opacity: .7; font-size: 14px; }

  body.cata-mnav-lock { overflow: hidden; }
}

@media (min-width: 901px) {
  .cata-mnav-bar, .cata-mnav-overlay { display: none !important; }
}