/* ===================================================================== */
/* PASSION AUTO 85 — Feuille de style : responsive.css                   */
/* --------------------------------------------------------------------- */
/* Description :                                                         */
/*   Media queries et styles CSS pour l’adaptation responsive du site    */
/*   BMW Passion Auto 85. Gère l’affichage sur mobile, tablette, desktop,*/
/*   orientation paysage/portrait, etc.                                  */
/*   À utiliser pour garantir une expérience optimale sur tous supports. */
/* --------------------------------------------------------------------- */
/* Structure :                                                           */
/*   1. Media queries mobiles                                            */
/*   2. Media queries tablettes                                          */
/*   3. Media queries desktop                                            */
/*   4. Ajustements spécifiques et helpers                               */
/* --------------------------------------------------------------------- */
/* Auteur : 0xcyberlitech                                                */
/* Date de création : 24/12/2025                                         */
/* Dernière modification : 29/12/2025                                    */
/* ===================================================================== */

/* ===================================================================== */
/* 1. MEDIA QUERIES MOBILES                                              */
/*    Styles et adaptations pour mobiles                                 */
/* ===================================================================== */

/* =====================================================================
   PASSION AUTO 85 — Styles responsives du site
   Ce fichier regroupe tous les styles CSS responsives :
   adaptation mobile, tablette, desktop, grilles, menus, popups, etc.
   Pour toute question, référez-vous à la documentation du projet.
   Dernière mise à jour : 27/12/2025 | Auteur : 0xcyberlitech
   ===================================================================== */

/* Masquage explicite des menus lors du resize :
  Évite le flash des menus sur iOS lors du redimensionnement de la fenêtre. */
@media (max-width: 700px) {
  .menu-horizontal .menu-container {
    display: none !important;
  }
}
@media (min-width: 701px) {
  .menu-horizontal .menu-mobile-bmw {
    display: none !important;
  }
}
/* Popups scrollables sur mobile/tablette :
  Limite la hauteur et active le scroll pour une meilleure expérience utilisateur. */
@media (max-width: 700px) {
  #privacy-popup > div,
  #cookies-popup > div {
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ========== Responsive Mobile & Tablette ==========
  Styles pour adapter la disposition des principaux blocs, galeries, FAQ et footer sur mobile et tablette. */
@media (max-width: 900px) {
    /* Disposition colonne et centrage universel pour les principaux blocs :
      Permet un affichage vertical et centré des contenus sur petits écrans. */
  main,
  .container,
  .presentation-grid,
  .histoire-grid,
  .faq-expertise-carousel {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .galerie-item,
  .welcome-text,
  .faq-expertise-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .section-title,
  .subtitle-bmw {
    text-align: center !important;
  }

     /* Correction FAQ expertise :
       Ajuste la taille de police pour une meilleure lisibilité sur mobile. */
    .faq-expertise-slide {
      font-size: 1.35rem !important;
    }
    .faq-expertise-slide > div:first-child {
      font-size: 2.2rem !important;
    }
    .faq-expertise-slide > div:last-child {
      font-size: 1.2rem !important;
    }
    /* Footer : centrage et harmonisation sur mobile/tablette :
      Garantit un affichage cohérent et centré du pied de page sur tous les appareils. */
  footer,
  .footer,
  #footer-placeholder,
  .footer-bottom-content,
  .copyright p,
  .footer-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  .footer * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .footer-links {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .footer-links a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    font-size: 1em !important;
    padding: 0.5em 0 !important;
  }
  .copyright p {
    font-size: 1em !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
    /* Harmonisation couleur liens et copyright :
      Uniformise la couleur et le style des liens et mentions légales dans le footer. */
  .footer a,
  #footer-placeholder a,
  #privacy-link,
  #cookies-link {
    color: inherit !important;
    text-decoration: underline !important;
  }
}


/* ========== Responsive Mobile Paysage (2 colonnes) ==========
  Affichage en deux colonnes pour les grilles principales en mode paysage sur mobile/tablette. */
@media (max-width: 900px) and (orientation: landscape) {
  .presentation-grid,
  .histoire-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .galerie-item,
  .welcome-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* ===================================================================== */
/* 2. MEDIA QUERIES TABLETTES                                            */
/*    Styles et adaptations pour tablettes                               */
/* ===================================================================== */

/* ========== Responsive Mobile & Tablette ==========
  Styles pour adapter la disposition des principaux blocs, galeries, FAQ et footer sur mobile et tablette. */
@media (max-width: 900px) {
    /* Disposition colonne et centrage universel pour les principaux blocs :
      Permet un affichage vertical et centré des contenus sur petits écrans. */
  main,
  .container,
  .presentation-grid,
  .histoire-grid,
  .faq-expertise-carousel {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .galerie-item,
  .welcome-text,
  .faq-expertise-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .section-title,
  .subtitle-bmw {
    text-align: center !important;
  }

     /* Correction FAQ expertise :
       Ajuste la taille de police pour une meilleure lisibilité sur mobile. */
    .faq-expertise-slide {
      font-size: 1.35rem !important;
    }
    .faq-expertise-slide > div:first-child {
      font-size: 2.2rem !important;
    }
    .faq-expertise-slide > div:last-child {
      font-size: 1.2rem !important;
    }
    /* Footer : centrage et harmonisation sur mobile/tablette :
      Garantit un affichage cohérent et centré du pied de page sur tous les appareils. */
  footer,
  .footer,
  #footer-placeholder,
  .footer-bottom-content,
  .copyright p,
  .footer-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  .footer * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .footer-links {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .footer-links a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    font-size: 1em !important;
    padding: 0.5em 0 !important;
  }
  .copyright p {
    font-size: 1em !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
    /* Harmonisation couleur liens et copyright :
      Uniformise la couleur et le style des liens et mentions légales dans le footer. */
  .footer a,
  #footer-placeholder a,
  #privacy-link,
  #cookies-link {
    color: inherit !important;
    text-decoration: underline !important;
  }
}


/* ========== Responsive Mobile Paysage (2 colonnes) ==========
  Affichage en deux colonnes pour les grilles principales en mode paysage sur mobile/tablette. */
@media (max-width: 900px) and (orientation: landscape) {
  .presentation-grid,
  .histoire-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .galerie-item,
  .welcome-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* ===================================================================== */
/* 3. MEDIA QUERIES DESKTOP                                              */
/*    Styles et adaptations pour desktop                                 */
/* ===================================================================== */

/* ========== Responsive Desktop ==========
  Grille en 4 colonnes pour la présentation sur les grands écrans (desktop). */
@media (min-width: 901px) {
  .presentation-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
    align-items: stretch !important;
  }
}

/* ===================================================================== */
/* 4. AJUSTEMENTS SPÉCIFIQUES ET HELPERS                                 */
/*    Ajustements spécifiques, helpers, utilitaires                      */
/* ===================================================================== */

/* =====================================================================
   PASSION AUTO 85 — Styles responsives du site
   Ce fichier regroupe tous les styles CSS responsives :
   adaptation mobile, tablette, desktop, grilles, menus, popups, etc.
   Pour toute question, référez-vous à la documentation du projet.
   Dernière mise à jour : 27/12/2025 | Auteur : 0xcyberlitech
   ===================================================================== */

/* Masquage explicite des menus lors du resize :
  Évite le flash des menus sur iOS lors du redimensionnement de la fenêtre. */
@media (max-width: 700px) {
  .menu-horizontal .menu-container {
    display: none !important;
  }
}
@media (min-width: 701px) {
  .menu-horizontal .menu-mobile-bmw {
    display: none !important;
  }
}
/* Popups scrollables sur mobile/tablette :
  Limite la hauteur et active le scroll pour une meilleure expérience utilisateur. */
@media (max-width: 700px) {
  #privacy-popup > div,
  #cookies-popup > div {
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ========== Responsive Mobile & Tablette ==========
  Styles pour adapter la disposition des principaux blocs, galeries, FAQ et footer sur mobile et tablette. */
@media (max-width: 900px) {
    /* Disposition colonne et centrage universel pour les principaux blocs :
      Permet un affichage vertical et centré des contenus sur petits écrans. */
  main,
  .container,
  .presentation-grid,
  .histoire-grid,
  .faq-expertise-carousel {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .galerie-item,
  .welcome-text,
  .faq-expertise-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .section-title,
  .subtitle-bmw {
    text-align: center !important;
  }

     /* Correction FAQ expertise :
       Ajuste la taille de police pour une meilleure lisibilité sur mobile. */
    .faq-expertise-slide {
      font-size: 1.35rem !important;
    }
    .faq-expertise-slide > div:first-child {
      font-size: 2.2rem !important;
    }
    .faq-expertise-slide > div:last-child {
      font-size: 1.2rem !important;
    }
    /* Footer : centrage et harmonisation sur mobile/tablette :
      Garantit un affichage cohérent et centré du pied de page sur tous les appareils. */
  footer,
  .footer,
  #footer-placeholder,
  .footer-bottom-content,
  .copyright p,
  .footer-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  .footer * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .footer-links {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .footer-links a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    font-size: 1em !important;
    padding: 0.5em 0 !important;
  }
  .copyright p {
    font-size: 1em !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
    /* Harmonisation couleur liens et copyright :
      Uniformise la couleur et le style des liens et mentions légales dans le footer. */
  .footer a,
  #footer-placeholder a,
  #privacy-link,
  #cookies-link {
    color: inherit !important;
    text-decoration: underline !important;
  }
}


/* ========== Responsive Mobile Paysage (2 colonnes) ==========
  Affichage en deux colonnes pour les grilles principales en mode paysage sur mobile/tablette. */
@media (max-width: 900px) and (orientation: landscape) {
  .presentation-grid,
  .histoire-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .galerie-item,
  .welcome-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* ========== Responsive Desktop ==========
  Grille en 4 colonnes pour la présentation sur les grands écrans (desktop). */
@media (min-width: 901px) {
  .presentation-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
    align-items: stretch !important;
  }
}