/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}


/*Commu styles*/
body {
  font-family: Arial, sans-serif; /* Définit la police de caractères du corps du document */
  margin: 0; /* Supprime la marge extérieure par défaut */
  padding: 0; /* Supprime la marge intérieure par défaut */
  box-sizing: border-box; /* Inclut les bordures et les marges dans le calcul de la largeur */
  width: 100%; /* Remplit la largeur de l'écran */
  background-color: #fff;
}

/* Styles pour l'en-tête (header) */
header {
  background-color: #046A38; /* Couleur de fond de l'en-tête */
  color: #fff; /* Couleur du texte de l'en-tête */
  display: flex; /* Utilise une disposition en ligne pour les éléments de l'en-tête */
  justify-content: space-between; /* Espacement entre les éléments en tant qu'espace disponible */
  align-items: center; /* Centre verticalement les éléments */
  padding: 10px 20px; /* Marge intérieure de l'en-tête */
}

/* Styles pour la navigation (navbar) */
nav ul {
  list-style: none; /* Supprime les puces de liste des éléments de navigation */
  display: flex; /* Utilise une disposition en ligne pour les éléments de navigation */
}

nav ul li {
  margin-right: 20px; /* Marge à droite entre les éléments de navigation */
}


nav a {
  text-decoration: none; /* Supprime la décoration de lien par défaut */
  color: #fff; /* Couleur du texte des liens de navigation */
  transition: color 0.3s; /* Animation de changement de couleur au survol des liens */
}

nav a:hover {
  color: rgba(177, 204, 86, 0.7); /* Couleur des liens au survol */
}

/* Footer styles */
.footer {
  background-color: #333;
  color: #fff;
  padding: 20px 0;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.footer .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}

.footer .col-md-4 {
  flex: 0 0 32%;
  max-width: 32%;
  margin-bottom: 20px;
}

.footer h5 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #b1cc56;
}

.footer p, .footer ul, .footer li {
  font-size: 14px;
  line-height: 1.6;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer ul li {
  margin-bottom: 10px;
}

.footer ul li i {
  margin-right: 10px;
}

.footer hr {
  border: 0;
  border-top: 1px solid #555;
  margin: 20px 0;
}

.footer .social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.footer .social-icons a {
  color: #fff;
  text-decoration: none;
  margin: 0;
  font-size: 18px;
  transition: color 0.3s;
}

.footer .social-icons a:hover {
  color: #b1cc56;
}

/* Responsive styles */
@media (max-width: 768px) and (max-width: 1024px){
  header {
    flex-direction: column; /* Utilise une disposition en colonne pour l'en-tête */
    align-items: flex-start; /* Aligne les éléments à gauche */
  }
  nav ul {
    flex-direction: row; /* Utilise une disposition en colonne pour les éléments de navigation en version mobile */
    justify-content: center;
    width: 100%;
    padding: 0;

  }
  nav ul li {
    margin: 0 0px; /* Réduit la marge entre les éléments de navigation pour s'assurer qu'ils tiennent sur une seule ligne */
    white-space: nowrap; /* Empêche les éléments de navigation de se casser sur plusieurs lignes */
  }

  nav a {
      font-size: 10px; /* Réduit la taille de la police des liens de navigation pour qu'ils tiennent mieux en ligne */
      padding: 5px 5px; /* Ajuste le padding pour réduire l'espace utilisé par chaque lien */
  }

  .footer .col-md-4 {
      flex: 0 0 100%;
      max-width: 100%;
  }

  .footer .row .col {
      text-align: center;
  }
}
/*Responsive Ipad Air*/
@media (min-width: 810px) and (max-width: 1080px){
  header {
    flex-direction: column; /* Utilise une disposition en colonne pour l'en-tête */
    align-items: flex-start; /* Aligne les éléments à gauche */
  }
  nav ul {
    flex-direction: row; /* Utilise une disposition en colonne pour les éléments de navigation en version mobile */
    justify-content: center;
    width: 100%;
    padding: 0;
    margin-top: 20px;
  }
  nav ul li {
    margin: 0 0px; /* Réduit la marge entre les éléments de navigation pour s'assurer qu'ils tiennent sur une seule ligne */
    white-space: nowrap; /* Empêche les éléments de navigation de se casser sur plusieurs lignes */
  }

  nav a {
      font-size: 20px; /* Réduit la taille de la police des liens de navigation pour qu'ils tiennent mieux en ligne */
      padding: 15px 15px; /* Ajuste le padding pour réduire l'espace utilisé par chaque lien */
  }
}

/*Galaxy Z Fold 5*/
@media (min-width: 334px) and (max-width: 800px) {
  header {
    flex-direction: column; /* Utilise une disposition en colonne pour l'en-tête */
    align-items: flex-start; /* Aligne les éléments à gauche */
  }
  nav ul {
    flex-direction: row; /* Utilise une disposition en colonne pour les éléments de navigation en version mobile */
    justify-content: center;
    width: 100%;
    padding: 0;
    margin-top: 20px;
  }
  nav ul li {
    margin: 0 0px; /* Réduit la marge entre les éléments de navigation pour s'assurer qu'ils tiennent sur une seule ligne */
    white-space: nowrap; /* Empêche les éléments de navigation de se casser sur plusieurs lignes */
  }

  nav a {
      font-size: 10px; /* Réduit la taille de la police des liens de navigation pour qu'ils tiennent mieux en ligne */
      padding: 4px 4px; /* Ajuste le padding pour réduire l'espace utilisé par chaque lien */
  } 
}