/* ============================================================
   HOPLA SHOP NAV — CSS partagé (extrait de shop.html)
   Utilisé sur : accueil (shop.html), produit, contact, pages custom
   pour que le menu soit STRICTEMENT identique partout.
   ============================================================ */
  /* ============================================ */
  /* ===== NAVIGATION STYLE LOUIS VUITTON ===== */
  /* ============================================ */
  .lv-nav {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 32px !important;
    gap: 24px;
  }
  @media (max-width: 760px) {
    .lv-nav { padding: 14px 18px !important; gap: 12px; }
  }

  .lv-nav-left {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: flex-start;
  }
  .lv-nav-right {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: flex-end;
  }
  @media (max-width: 760px) {
    .lv-nav-right { gap: 12px; }
    .lv-nav-social-hide-mobile { display: none !important; }
  }
  /* Sur tablette et + : icônes sociales en opacité 1 (pleinement visibles) */
  .lv-nav-social-hide-mobile {
    opacity: 1;
    transition: transform 0.18s ease;
  }
  .lv-nav-social-hide-mobile:hover {
    opacity: 1;
  }

  /* Nav socials : juste un petit zoom au hover, pas de fond coloré */
  .lv-nav-social {
    width: 36px;
    height: 36px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lv-nav-social svg {
    transition: transform 0.18s ease;
  }
  .lv-nav-social:hover svg {
    transform: scale(1.08);
  }

  /* Liens de gauche desktop (Accueil, Catalogue, À propos) */
  .lv-nav-links-left {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-shrink: 0;  /* Évite que les liens se compriment puis wrap quand le nom est long */
  }
  .lv-nav-links-left a {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.18s ease;
    white-space: nowrap;  /* Empêche "À propos" de revenir à la ligne en 2 mots */
  }
  .lv-nav-links-left a:hover { opacity: 0.6; }

  /* Nom de la boutique au CENTRE (style LV) */
  .lv-shop-name {
    text-decoration: none;
    color: var(--ink);
    text-align: center;
    transition: opacity 0.18s ease;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Empêche le nom de pousser les icônes hors écran sur mobile */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .lv-shop-name:hover { opacity: 0.7; }
  .lv-name-text {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* Tronque avec "..." quand trop long sur grands écrans */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  @media (max-width: 760px) {
    .lv-name-text {
      font-size: 13px;
      letter-spacing: 0.08em;
      /* Limite stricte pour laisser place aux 3 icônes à droite */
      max-width: 38vw;
      /* Nom complet affiché : retour à la ligne au lieu de "..." */
      white-space: normal;
      word-break: break-word;
      overflow: visible;
      text-overflow: unset;
      line-height: 1.25;
      text-align: center;
    }
  }
  @media (max-width: 480px) {
    .lv-name-text {
      font-size: 12px;
      letter-spacing: 0.06em;
      max-width: 34vw;
    }
  }
  /* Mode "logo seul" : juste le logo image */
  .lv-shop-logo-only {
    max-height: 38px;
    max-width: 160px;
    display: block;
    object-fit: contain;
  }
  /* ═══ Tailles du logo configurables depuis le dashboard ═══ */
  body.logo-size-small .lv-shop-logo-only { max-height: 30px; max-width: 120px; }
  body.logo-size-small .lv-shop-logo-stacked { max-height: 24px; max-width: 110px; }
  body.logo-size-medium .lv-shop-logo-only { max-height: 44px; max-width: 180px; }
  body.logo-size-medium .lv-shop-logo-stacked { max-height: 34px; max-width: 160px; }
  body.logo-size-large .lv-shop-logo-only { max-height: 56px; max-width: 220px; }
  body.logo-size-large .lv-shop-logo-stacked { max-height: 46px; max-width: 200px; }
  @media (max-width: 760px) {
    .lv-shop-logo-only { max-height: 32px; max-width: 110px; }
    body.logo-size-small .lv-shop-logo-only { max-height: 26px; max-width: 90px; }
    body.logo-size-medium .lv-shop-logo-only { max-height: 36px; max-width: 130px; }
    body.logo-size-large .lv-shop-logo-only { max-height: 46px; max-width: 160px; }
  }
  /* Mode "logo + nom" : logo au-dessus, nom en-dessous */
  .lv-shop-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1;
  }
  .lv-shop-logo-stacked {
    max-height: 30px;
    max-width: 140px;
    object-fit: contain;
  }
  .lv-name-stacked {
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
  }
  @media (max-width: 760px) {
    .lv-shop-logo-stacked { max-height: 22px; max-width: 100px; }
    .lv-name-stacked { font-size: 9px !important; }
  }

  /* ===== BANDEROLLE PROMO (scrolling marquee) ===== */
  .promo-banner {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 9px 0;
    position: relative;
    z-index: 80;
  }
  .promo-banner-track {
    display: inline-flex;
    gap: 56px;
    padding-left: 56px;
    animation: promoMarquee 60s linear infinite;
    will-change: transform;
  }
  .promo-banner[data-speed="slow"] .promo-banner-track { animation-duration: 90s; }
  .promo-banner[data-speed="medium"] .promo-banner-track { animation-duration: 60s; }
  .promo-banner[data-speed="fast"] .promo-banner-track { animation-duration: 35s; }
  .promo-banner-item {
    display: inline-block;
    flex-shrink: 0;
  }
  .promo-banner-item::after {
    content: '✦';
    margin-left: 56px;
    opacity: 0.5;
  }
  @keyframes promoMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  /* Pause au hover (option) */
  .promo-banner:hover .promo-banner-track {
    animation-play-state: paused;
  }
  /* Accessibilité : si l'utilisateur préfère pas de mouvement */
  @media (prefers-reduced-motion: reduce) {
    .promo-banner-track {
      animation: none;
      justify-content: center;
      padding-left: 0;
    }
    .promo-banner-item:not(:first-child) {
      display: none;
    }
  }

  /* ===== MEGA MENU COLLECTIONS ===== */
  .mega-menu-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .mega-menu-trigger {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
  }
  .mega-arrow {
    font-size: 9px;
    transition: transform 0.18s ease;
    display: inline-block;
  }
  .mega-menu-wrap:hover .mega-arrow { transform: rotate(180deg); }

  .mega-menu-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 8px;
    transform: translateX(-50%);
    transform-origin: top center;
    width: max-content;
    min-width: 240px;
    max-width: 600px;
    max-height: 70vh;            /* Limite la hauteur du panneau */
    overflow-y: auto;             /* Scroll vertical si beaucoup de catégories */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    padding: 22px 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
    z-index: 200;
  }
  .mega-menu-wrap:hover .mega-menu-panel,
  .mega-menu-wrap:focus-within .mega-menu-panel {
    opacity: 1;
    visibility: visible;
  }
  .mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
    gap: 18px 32px;
  }
  .mega-menu-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
  }
  .mega-menu-title {
    font-family: 'Fraunces', serif;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
    margin-bottom: 4px;
  }
  .mega-menu-title:hover { opacity: 0.7; }
  .mega-menu-subs {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mega-menu-subs a {
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ink-3) !important;
    padding: 3px 0;
    cursor: pointer;
  }
  .mega-menu-subs a:hover { color: var(--ink) !important; opacity: 1; }
  .mega-menu-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    text-align: center;
  }
  .mega-menu-footer a {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--ink) !important;
    cursor: pointer;
  }
  body.shop-dark-mode .mega-menu-panel {
    background: #18181b;
    border-color: #27272a;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  }

  /* Liens visibles seulement sur mobile / desktop */
  .lv-mobile-only-link { display: none; }
  @media (max-width: 760px) {
    .lv-mobile-only-link { display: inline-block; }
    .lv-desktop-only { display: none !important; }
    /* Sur mobile, le mega menu devient un accordion centré */
    .mega-menu-wrap {
      display: block !important;
      width: 100% !important;
      text-align: center !important;
    }
    .mega-menu-trigger {
      display: flex !important;
      justify-content: center !important;
      width: 100% !important;
    }
    .mega-menu-panel {
      position: static;
      transform: none;
      opacity: 1;
      visibility: visible;
      box-shadow: none;
      border: none;
      padding: 14px 0 0 0;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      background: transparent;
      text-align: center;
    }
    .mega-menu-grid {
      grid-template-columns: 1fr;
      gap: 12px;
      justify-content: center;
      justify-items: center;
    }
    .mega-menu-col {
      align-items: center;
      text-align: center;
      width: 100%;
    }
    .mega-menu-subs {
      align-items: center;
      text-align: center;
    }
    .mega-menu-subs a {
      font-size: 14px !important;
      text-align: center;
    }
    .mega-menu-footer {
      text-align: center;
      justify-content: center;
    }
  }

  /* Icônes droite (favoris, panier, contact) */
  .lv-nav-link-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    background: transparent;
    border: none;
    text-decoration: none;
    padding: 8px;
    cursor: pointer;
    transition: opacity 0.18s ease;
  }
  .lv-nav-link-icon:hover { opacity: 0.6; }
  .lv-icon-text {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  @media (max-width: 760px) {
    .lv-icon-text { display: none; }
  }
  .lv-icon-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--ink);
    color: var(--bg);
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 100px;
    padding: 0 5px;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .lv-icon-badge:not(:empty) { display: inline-flex; }
  .lv-cart-btn { background: transparent; }

  /* Burger mobile : caché sur desktop, visible sur mobile.
     IMPORTANT : breakpoint à 860px pour s'aligner avec le menu standard (.shop-nav-links).
     Sinon entre 760-860, le menu mobile s'affiche sans le bouton burger pour le contrôler. */
  /* === Z-INDEX FIX : quand un drawer est ouvert, la nav passe au-dessus du backdrop === */
  /* GLOBAL (hors @media) pour s'appliquer partout. Sans ça, le backdrop (z-index 9998)
     est devant la nav (z-index 100) et capture tous les clics, fermant le drawer. */
  body.drawer-open .shop-nav,
  body.mega-open .shop-nav {
    z-index: 10001 !important;
  }

  .lv-nav-left .mobile-nav-toggle { display: none; }
  @media (max-width: 860px) {
    .lv-nav-left .mobile-nav-toggle { display: flex; }
    /* IMPORTANT : on ne met PAS display:none sur :not(.open) ici car ça casse
       les drawers latéraux des templates qui doivent être animés via transform.
       Chaque template gère son propre display dans shop-themes.css.
       SAUF pour theme-floating qui utilise une bulle absolute (pas un drawer
       fixed off-screen) — pour lui on cache la nav quand pas .open. */
    body.theme-floating .lv-nav-links-left:not(.open) {
      display: none !important;
    }
  }
  .lv-mobile-socials { display: none; }