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

/* ================= Affichage du slider mobile (≤ 700px) =================
  Affiche le slider mobile uniquement sur les petits écrans. */
@media (max-width: 700px) {
  .slider-mobile {
    margin-top: 60px;
  }
}

/* PASSION AUTO 85 - Slider BMW Mobile : styles principaux */

@media (max-width: 700px) {
    /* Zone principale du slider mobile :
      Définit la taille, l'alignement et le fond du slider sur mobile. */
  .slider-zone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 180px !important;
    min-height: 120px !important;
    max-height: 220px !important;
    background: #181c22 !important;
    position: relative !important;
  }
    /* Bloc titre et description du slider mobile :
      Contient le titre, la description et applique un style centré. */
  .slider-title-mobile {
    width: 100vw;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5em;
    height: 100%;
    background: #181c22;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0px #1e90ff22;
    position: relative;
    z-index: 1;
    text-align: center;
  }
    /* Description sous le titre du slider mobile :
      Style du texte descriptif sous le titre principal. */
  .slider-mobile-desc {
    text-align: center;
    width: 100%;
  }
    /* Cache les éléments du slider desktop sur mobile :
      Masque les composants inutiles pour la version mobile. */
  .slider-container,
  .slider-ray,
  .slider-wrapper,
  .slider-indicators {
    display: none !important;
  }
    /* Overlay du titre sur le slider mobile :
      Superpose le titre au centre du slider mobile. */
  .slider-title-overlay {
    position: static !important;
    width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
    /* Titre principal du slider mobile :
      Style du titre principal affiché sur le slider mobile. */
  .slider-main-title {
    font-size: clamp(1.2rem, 7vw, 2rem) !important;
    margin-bottom: 0 !important;
    color: #00aeef !important;
    text-shadow: 0 2px 8px #000a, 0 0 2px #1e90ff22 !important;
    word-break: break-word !important;
    white-space: normal !important;
    text-align: center !important;
  }
    /* Sous-titre du slider mobile (masqué) :
      Le sous-titre est masqué sur mobile pour alléger l'affichage. */
  .slider-main-subtitle {
    display: none !important;
  }
    /* Affiche le slider mobile uniquement sur mobile :
      Force l'affichage du slider mobile sur les petits écrans. */
  .slider-mobile {
    display: block !important;
  }
}

/* ===================================================================== */
/* 2. SLIDES, TITRES, TEXTES                                             */
/*    Styles pour slides, titres, textes du slider mobile                */
/* ===================================================================== */

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

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