/* ===================================================================== */
/* PASSION AUTO 85 — Feuille de style : menu-desktop.css                 */
/* --------------------------------------------------------------------- */
/* Description :                                                         */
/*   Styles CSS pour le menu de navigation principal (desktop) du site   */
/*   BMW Passion Auto 85. Gère la structure, les effets, le responsive,  */
/*   etc. À utiliser pour personnaliser l’apparence du menu sur desktop. */
/* --------------------------------------------------------------------- */
/* Structure :                                                           */
/*   1. Structure générale et layout du menu                             */
/*   2. Liens, hover, sous-menus                                         */
/*   3. Effets visuels et animations                                     */
/*   4. Media queries et responsive                                      */
/* --------------------------------------------------------------------- */
/* Auteur : 0xcyberlitech                                                */
/* Date de création : 24/12/2025                                         */
/* Dernière modification : 29/12/2025                                    */
/* ===================================================================== */

/* ===================================================================== */
/* 1. STRUCTURE GÉNÉRALE ET LAYOUT DU MENU                               */
/*    Structure globale, containers, marges, etc.                        */
/* ===================================================================== */

/* Affichage du menu desktop uniquement pour les écrans >= 701px */
@media (min-width: 701px) {
  /* Barre horizontale du menu desktop en haut de l'écran */
  .menu-horizontal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 3000;
      background: linear-gradient(135deg, rgba(10,10,20,0.92) 0%, rgba(30,33,44,0.96) 100%) !important;
      backdrop-filter: blur(6px);
      border-bottom: 2px solid #1e90ff;
      box-shadow: 0 2px 12px 0px #1e90ff66;
  }
  /* Conteneur principal du menu desktop */
  .menu-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    height: 80px;
  }
  /* Liste des liens de navigation (horizontal) */
  .menu-container ul {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* Boutons/links du menu desktop */
  .menu-btn {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.1em;
    padding: 0.5em 1.2em;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
  }
    /* Focus visible pour accessibilité clavier */
    .menu-btn:focus {
      outline: 3px solid #00aeef;
      outline-offset: 2px;
      background: #1e90ff33;
    }
  /* Effet hover sur les boutons du menu */
  .menu-btn:hover {
    background: #1e90ff;
    color: #fff;
  }
  /* Styles pour l'état actif/focus des boutons du menu */
  .menu-btn:focus,
  .menu-btn:active,
  .menu-btn.active {
    background: none !important;
    color: #fff;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* Espaceur pour compenser la hauteur du menu fixe */
  .menu-spacer {
    height: 80px;
    width: 100%;
    display: block;
  }
}

/* ===================================================================== */
/* 2. LIENS, HOVER, SOUS-MENUS                                           */
/*    Styles pour liens, hover, sous-menus du menu                       */
/* ===================================================================== */

/* ===================================================================== */
/* 3. EFFETS VISUELS ET ANIMATIONS                                       */
/*    Effets visuels et animations du menu                               */
/* ===================================================================== */

/* ===================================================================== */
/* 4. MEDIA QUERIES ET RESPONSIVE                                        */
/*    Adaptation du menu pour chaque écran                               */
/* ===================================================================== */