/* ===================================================================== */
/* PASSION AUTO 85 — Feuille de style : menu-mobile.css                  */
/* --------------------------------------------------------------------- */
/* Description :                                                         */
/*   Styles CSS pour le menu de navigation mobile du site BMW Passion    */
/*   Auto 85. Gère la structure, les effets, le responsive, etc.         */
/*   À utiliser pour personnaliser l’apparence du menu sur mobile.       */
/* --------------------------------------------------------------------- */
/* Structure :                                                           */
/*   1. Structure générale et layout du menu mobile                      */
/*   2. Liens, boutons, interactions                                     */
/*   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 MOBILE                        */
/*    Structure globale, containers, marges, etc.                        */
/* ===================================================================== */

@media (max-width: 700px) {
  .menu-horizontal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 3000;
    background: rgba(24, 28, 34, 1);
    border-bottom: 2px solid #00aeef;
    box-shadow: 0 2px 12px 0px #1e90ff22;
    border-radius: 0 0 12px 12px;
  }
  .menu-mobile-bmw {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 100vw;
    background: transparent;
    position: relative;
    z-index: 3001;
  }
  .menu-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 6rem;
    position: relative;
    height: 60px;
    min-width: 0;
  }
  .carousel-center {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 60px;
    min-width: 0;
    width: auto;
  }
  .carousel-center .carousel-item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: none !important;
    box-shadow: none !important;
    color: #fff;
    border-radius: 0;
    border: none !important;
    padding: 0.55rem 1.7rem;
    min-width: 120px;
    max-width: 65vw;
    font-family: "Orbitron", "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: 1.2px;
    text-shadow: 0 1px 2px #1e90ff33;
    display: none;
    opacity: 1;
    transition: color 0.3s;
  }
  .carousel-center .carousel-item.active {
    display: block !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff;
    filter: none;
  }
  .carousel-btn {
    background: none !important;
    color: #1e90ff !important;
    border: none !important;
    border-radius: 6px !important;
    width: 40px;
    height: 40px;
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s;
    box-shadow: none !important;
    z-index: 2;
    outline: none;
  }
  .carousel-btn:hover,
  .carousel-btn:focus {
    background: none !important;
    color: #e60c2f !important;
    border: none !important;
    box-shadow: none !important;
  }
  .carousel-item {
    color: #00aeef;
    font-size: 1.15rem;
    text-decoration: none;
    font-weight: 700;
    padding: 0.5rem 1.2rem;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    transition: color 0.2s;
    text-align: center;
    letter-spacing: 1px;
    min-width: 120px;
    max-width: 60vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: none;
  }
  .carousel-center .carousel-item.active {
    display: block !important;
  }
  .carousel-item.active {
    display: block !important;
  }
}
@media (min-width: 701px) {
  .menu-horizontal .menu-mobile-bmw {
    display: none !important;
  }
}

/* ===================================================================== */
/* 2. LIENS, BOUTONS, INTERACTIONS                                       */
/*    Styles pour liens, boutons, interactions du menu mobile            */
/* ===================================================================== */

/* ================= Affichage du menu mobile (≤ 700px) ================ */
@media (max-width: 700px) {
    /* Barre horizontale du menu mobile en haut de l'écran :
      Fixe le menu en haut, ajoute un fond, une bordure et une ombre pour la lisibilité. */
  .menu-horizontal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 3000;
    background: #181c22;
    border-bottom: 2px solid #1e90ff;
    box-shadow: 0 2px 12px 0px #1e90ff22;
    border-radius: 0 0 12px 12px;
  }
    /* Styles typographiques pour le menu mobile et ses éléments :
      Uniformise la police, la taille et l'espacement pour tous les éléments du menu. */
  .menu-mobile,
  .menu-mobile ul,
  .menu-mobile li,
  .menu-mobile a,
  .menu-mobile span {
    font-family: "Roboto", Arial, sans-serif !important;
    font-size: 1.1em;
    font-weight: 500;
    letter-spacing: 0.5px;
  }
    /* Style du titre et du nom de marque dans le menu mobile :
      Met en avant le titre et la marque avec une police spécifique et des majuscules. */
  .menu-mobile .menu-title,
  .menu-mobile .brand-name {
    font-family: "Orbitron", "Roboto", Arial, sans-serif !important;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
     /* Focus visible pour accessibilité clavier sur mobile :
       Améliore la navigation au clavier pour les utilisateurs mobiles. */
    .carousel-item:focus, .carousel-btn:focus {
      outline: 3px solid #00aeef;
      outline-offset: 2px;
      background: #1e90ff33;
    }
}

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

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