// Importation des icônes Bootstrap
@import url("/node_modules/bootstrap-icons/font/bootstrap-icons.css");

// Importation des variables personnalisées
@import "custom";

// Corps et structure de base
html,
body {
  height: 100%; // Assure que le contenu remplit la fenêtre
  margin: 0; // Supprime les marges par défaut
  font-family: $font-family-sans-serif; // Police secondaire par défaut
  font-size: 16px; // Taille de police par défaut
  background-color: $body-bg; // Couleur de fond
}

body::before {
  display: block;
  content: "";
  height: 60px; // Espace réservé pour le header fixe
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; // Permet de remplir toute la hauteur de la fenêtre
}

header {
  position: fixed; // Fixe le menu en haut
  top: 0;
  width: 100%;
  z-index: 1000; // Assure qu'il reste au-dessus du contenu
}

.content {
  flex: 1; // Permet au contenu principal de prendre tout l'espace disponible
  padding-top: 60px; // Évite que le contenu soit masqué sous le menu
}

footer {
  padding: 15px;
  background-color: #f8f9fa; /* Couleur de fond pour le footer */
  text-align: center; /* Centrer le texte */
  margin-top: auto; /* Place le footer en bas */
  position: relative;

  p {
    font-size: 0.9rem; /* Réduit la taille des textes à 14.4px */
    line-height: 1.5; /* Améliore la lisibilité */
    font-family: $font-family-sans-serif; /* Police secondaire */
  }

  a {
    font-size: 0.85rem; /* Réduit la taille des liens */
  }
}

// Responsive: petits écrans
@media (max-width: 768px) {
  footer {
    p {
      font-size: 0.8rem; /* Réduit encore plus pour les écrans mobiles */
    }
    a {
      font-size: 0.75rem; /* Taille plus petite pour les liens */
    }
  }
}



// Styles pour les paragraphes
p {
  font-family: $font-family-sans-serif; // Police secondaire
  font-size: 1rem; // Taille de base (16px)
  text-align: justify; // Alignement justifié
}

// Google Map
.google-map {
  padding-bottom: 50%; // Maintient le ratio
  position: relative;
}

.google-map iframe {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute; // Fixe l'iframe à l'intérieur de son conteneur
  border-radius: 10px; // Coins arrondis pour une meilleure esthétique
}

// Responsive (petits écrans)
@media (max-width: 768px) {
  .news-input {
    width: 100%; // Pleine largeur pour les petits écrans
  }
}

// Images des instructeurs
.instructor-img {
  width: 220px; // Largeur fixe
  height: 330px; // Hauteur fixe
  object-fit: cover; // Ajuste l'image pour remplir l'espace
  border-radius: 10px !important; // Coins arrondis
}

// Effets pour les étoiles
.stars {
  font-size: 1rem; // Taille standard des étoiles
  i {
    margin: 0 2px; // Espacement entre les icônes d'étoiles
  }
}

// Section des questions fréquentes
.questions-section {
  margin-bottom: 10px; // Espacement inférieur
  font-family: $font-family-sans-serif; // Police secondaire
  font-size: 1rem; // Taille standard
  text-align: justify; // Alignement justifié
}

.image-card img {
  cursor: pointer;
}


// Effets pour les images de la galerie
.image-card {
  position: relative;

  &:hover {
    .titre-image {
      opacity: 1;
    }
    img {
      filter: brightness(0.3); // Assombrit l'image au survol

    }
  }

  img {
    transition: all 0.3s; // Animation fluide
  }

  .titre-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; // Caché par défaut
    transition: all 0.3s; // Animation fluide
  }
  
}






/* Styles pour le modal */
.modal-content {
  background-color: #eeddcc86; /* Fond sombre */
  border: none; /* Supprime les bordures */
}

.modal-body img {
  max-height: 80vh; /* Limite la hauteur de l'image */
  object-fit: contain; /* Ajuste l'image sans la déformer */
}

/* Effets des boutons de navigation */
.btn-outline-light {
  opacity: 0.8; /* Rendre les boutons légèrement transparents */
  transition: opacity 0.3s; /* Animation fluide */
}

.btn-outline-light:hover {
  opacity: 1; /* Rendre les boutons entièrement visibles */
}




/* Réduction de la taille du carrousel */
#carouselExampleSlidesOnly {
  max-width: 80%; /* Réduit la largeur à 50% */
  margin: 0 auto; /* Centre le carrousel */
  overflow: hidden;
}

#carouselExampleSlidesOnly .carousel-inner img {
  max-height: 600px; /* Limite la hauteur des images */
  object-fit: cover; /* Assure que les images ne sont pas déformées */
  display: block;
}

/* Responsive pour les petits écrans */
@media (max-width: 768px) {
  #carouselExampleSlidesOnly {
    max-width: 80%; /* Ajuste la largeur sur les petits écrans */
  }
  #carouselExampleSlidesOnly .carousel-inner img {
    max-height: 400px; /* Réduit davantage la hauteur des images */
  }
}

.carousel-link {
  display: block; /* Rend le lien cliquable pour toute la zone du carrousel */
  text-decoration: none; /* Supprime le soulignement du lien */
}

.carousel-link:hover {
  cursor: pointer; /* Change le curseur lorsque l'utilisateur survole le carrousel */
}

/* Style pour l'option placeholder du select */
select.form-select:invalid {
  color: #7a7b7c; // Gris Bootstrap (placeholder)
}

/* Force le style pour la première option qui agit comme un placeholder */
select.form-select option[disabled][selected] {
  color: #7b7b7b;
}