/* Conteneur global pour la ligne */
.row.equal-height {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Pour occuper toute la ligne */
    align-items: flex-start; /* Aligne les items en haut */
}

/* Chaque colonne avec une image et un texte */
.col-md-6 {
    display: flex;
    justify-content: center;
}

/* Slot de la voiture : structure pour l'image et le texte */
.slot {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alignement du contenu en haut */
    align-items: center;
    height: 100%; /* Prendre toute la hauteur disponible */
}

/* Pour les images : même taille pour toutes */
.slot img {
    width: 100%;
    max-width: 400px;
    height: 250px; /* Fixe la hauteur de l'image */
    object-fit: contain; /* Ajuste l'image sans la couper */
    border-radius: 10px;
    margin-bottom: 10px; /* Réduit l'espace entre l'image et le texte */
}

/* Image de la Rolls-Royce - Abaisser l'image pour l'aligner avec la Pagani */
.slot img:nth-of-type(2) {
    margin-top: 5px; /* Abaisse l'image de la Rolls-Royce pour l'aligner avec la Pagani */
}

/* Style pour le titre de la voiture */
.slot h5 {
    margin: 0;
    padding: 5px 0;
    font-size: 1.2rem; /* Taille de la police pour les titres */
    text-align: center;
}

/* Style pour la description de la voiture */
.slot p {
    margin: 0;
    padding: 5px 0;
    text-align: center;
    font-size: 1rem; /* Taille de la police pour la description */
}
/* Style global pour les liens */
a {
    color: black; /* Change la couleur des liens à noir */
    text-decoration: none; /* Enlève la décoration du lien */
}

/* Ajouter un effet au survol des liens */
a:hover {
    color: #555; /* Assombrir la couleur des liens quand on survole */
}

#btnRetour {
  position: fixed;
  top: 70px; /* <- avant c'était 20px */
  left: 20px;
  background-color: #ffffff;
  color: #000000;
  padding: 10px 15px;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid #000;
  z-index: 1001;
  transition: background-color 0.3s, color 0.3s;
}


#btnRetour:hover {
  background-color: white;
  color: black;
  border: 2px solid black;
}


/* Style pour la barre de navigation fixe */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Assure que la navbar soit toujours au-dessus du contenu */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre légère sous la navbar */
}

/* Espace pour que le contenu ne soit pas masqué par la navbar */
body {
    padding-top: 70px; /* Ajuste cette valeur en fonction de la hauteur de ta navbar */
}

/* Lorsque la navbar est collée en haut, ajouter une ombre et un fond transparent */
.navbar-light {
    background-color: transparent;
    box-shadow: none;
}
.commande-banner {
    background-color: #112a45; /* un bleu un peu plus clair */
    color: #f0f0f0;
    padding: 40px 20px;
    text-align: center;
  }
  
  .commande-banner p {
    font-size: 1.3rem;
    margin-bottom: 15px;
  }
  
  .commande-banner .btn {
    background-color: transparent;
    border: 2px solid #f0f0f0;
    color: #f0f0f0;
    padding: 10px 25px;
    font-size: 1rem;
    transition: all 0.3s ease;
  }
  
  .commande-banner .btn:hover {
    background-color: #ffffff;
    color: #112a45;
  }
  body {
    font-family: 'Playfair Display', serif;
  }
  .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
    z-index: 10;
  }
  
  .close-btn:hover {
    color: #000;
  }
  #panier-count {
    font-size: 0.7rem;
    padding: 4px 6px;
  }
/* Définir des styles généraux qui s'appliquent sur tous les appareils */
body {
  font-family: 'Playfair Display', serif;
  padding-top: 70px; /* Pour compenser la navbar fixe sur toutes les tailles d'écran */
}

/* Pour les petits écrans, ajuster le padding de #btnRetour */
#btnRetour {
  position: fixed;
  top: 70px; /* Maintien une marge sous la navbar */
  left: 20px;
  background-color: #ffffff;
  color: #000000;
  padding: 10px 15px;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid #000;
  z-index: 1001;
  transition: background-color 0.3s, color 0.3s;
}

/* Ajustements des images dans les slots */
.slot img {
  width: 100%;
  max-width: 100%;
  height: auto; /* Adapter la taille des images en fonction du container */
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* Ajuster les titres et descriptions dans .slot pour qu'ils soient plus lisibles sur mobile */
.slot h5 {
  font-size: 1.1rem; /* Taille du titre un peu plus petite sur mobile */
}

.slot p {
  font-size: 0.9rem; /* Réduire la taille du texte pour mieux l'adapter aux écrans plus petits */
}

/* Cacher la barre de navigation fixe si l'écran est très petit */
@media (max-width: 768px) {
  /* Ajuster le padding de la navbar */
  .navbar {
      padding: 10px 20px; /* Réduire un peu l'espace de la navbar */
  }

  /* Réduire la taille du texte du bouton Retour pour s'adapter au mobile */
  #btnRetour {
      padding: 8px 12px;
      font-size: 0.9rem; /* Réduire légèrement la taille de la police sur mobile */
      top: 60px; /* Ajuster légèrement la position pour les petits écrans */
  }

  /* Modifier l'apparence des colonnes */
  .row.equal-height {
      flex-direction: column; /* Disposer les éléments en colonne sur les petits écrans */
      align-items: center; /* Centrer les éléments */
  }

  /* Adapter les éléments .col-md-6 à une largeur de 100% sur mobile */
  .col-md-6 {
      width: 100%;
      padding: 10px; /* Ajouter un peu d'espace autour des colonnes sur mobile */
  }

  /* Ajuster les images des slots */
  .slot img {
      max-width: 100%; /* Permet aux images de s'adapter à la largeur */
      height: auto; /* Maintient le ratio de l'image */
  }

  /* Réduire la taille des titres et descriptions sur mobile */
  .slot h5 {
      font-size: 1rem;
  }

  .slot p {
      font-size: 0.9rem;
  }

  /* Adaptation de la commande-banner */
  .commande-banner {
      padding: 20px 10px; /* Réduire un peu le padding sur mobile */
  }

  .commande-banner p {
      font-size: 1rem; /* Taille plus petite pour le texte */
  }

  .commande-banner .btn {
      padding: 8px 15px; /* Réduire les boutons pour qu'ils soient plus adaptés à l'écran mobile */
      font-size: 0.9rem;
  }
}

/* Pour les très petits écrans (ex : smartphones avec des écrans de moins de 400px) */
@media (max-width: 400px) {
  .slot h5 {
      font-size: 1rem; /* Plus petit pour les très petits écrans */
  }

  .slot p {
      font-size: 0.8rem; /* Réduire encore plus la taille du texte */
  }

  /* Réduire encore la taille des boutons pour les petits écrans */
  #btnRetour {
      padding: 6px 10px;
      font-size: 0.8rem;
      top: 50px; /* Placer un peu plus bas */
  }

  /* Adapter la barre de navigation pour les très petits écrans */
  .navbar {
      padding: 5px 10px;
  }

  /* Ajuster les images pour les très petits écrans */
  .slot img {
      max-width: 100%;
      height: auto; /* Assurer que l'image s'adapte bien à l'écran */
  }
}