/**
 * Configuration générale du corps de la page
 *
 * @format
 */
 .font-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200; /* ajustez selon la disponibilité */
}

.font-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
}

.font-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

.font-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
}

.font-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

.font-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 900; /* ou le poids maximum disponible */
}
main {
  
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 6em;
  overflow: hidden;
  width: 100%;
}
span {
  color: var(--couleur-primary);
}

p{
  margin: 0;
  padding: 0;
}
h3{
  padding: 20px 0;
}


/* Configuration du formulaire */
form {
  /* width: 70%; */
  max-width: 600px;
  margin: 10% auto;
  padding-top: 5%;
  padding-bottom: 10%;
  align-items: center;
}

/* Configuration des champs de saisie et des zones de texte du formulaire */
form input,
form textarea {
  width: 100%;
  padding: 20px;
  margin-bottom: 7%;
  border: 1px solid #0a3cdd;
  border-radius: 4px;
  box-sizing: border-box;
}
.remplis {
  border: 1px solid black;
}
/* Configuration du bouton du formulaire */
form .button {
  background-color: #0a3cdd;
  color: white;
  padding: 18px;
  margin: 50px auto 10px;
  border: none;
  cursor: pointer;
  width: 50%;
  display: block;
  text-align: center;
  border-radius: 4px;
}
button#contact_enregistrer {
  background-color: #0a3cdd;
  color: white;
  padding: 18px;
  margin: 50px auto 10px;
  border: none;
  cursor: pointer;
  width: 50%;
  display: block;
  text-align: center;
  border-radius: 4px;
}

/* Configuration du bouton du formulaire lors du survol et du focus*/
form .button:hover,
button:focus {
  /* opacity: 0.8; */
  background-color: #8c7ce8;
}

/* Configuration de la case à cocher */
form #form_agreement {
  width: auto;
  margin-bottom: 5px; /* Ajoutez une marge de 20 pixels en dessous de la case à cocher */
}
input#contact_rgpd {
  width: auto;
  margin-bottom: 0;
}

/* Configuration du texte de la case à cocher */
form label[for="form_agreement"] {
  display: inline-block;
  margin-left: 5px;
}

/* Configuration du lien dans le texte de la case à cocher */
form a {
  color: #0a3cdd;
  font-size: 24px;
}

/* Configuration de la section de la carte */
.map-section {
  position: relative;
}

/* Configuration de la rose des vents */
.compass {
  position: absolute;
  top: 47%;
  left: 59%;
}

/* Configuration de l'aiguille de la rose des vents */
.needle {
  width: 50px;
  height: auto;
  animation: spin 2s linear infinite;
}
article.heure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  align-content: center;
}
article.heure > * {
  font-family: "Poppins";
  font-weight: 400;
}

/* SECTION CONTACTS TELEPHONIQUES */

section.contact-spe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  width: 90%;
}
article.un,
article.deux,
article.trois {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  text-align: center;
}

/* J'applique un margin-bottom aux images des contacts */
article.un > img,
article.deux > img,
article.trois > img {
  margin-bottom: 2em;  
}
/* Espacement et graisse des postes des contacts */
article.un > p:nth-child(3),
article.deux > p:nth-child(3),
article.trois > p:nth-child(3) 
{
  font-family: "Poppins";
  font-weight: 300;
  margin: 0.5em;
  word-wrap: break-word;
}

/* Décalage des numéros de tél par rapport aux contacts */
/* article.deux > p:nth-child(3),
article.trois > p:nth-child(3) {
  margin-bottom: 3em;
} */

/* Pour ne pas séparer les chiffres des téléphones */
p.numero {
  white-space: nowrap;
}

/* Configuration de l'animation de rotation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Configuration de l'adresse et du téléphone */
.adresse,
.address,
.horaire {
  text-align: center;
  
  color: red;
}
a{
  text-decoration: none;
}

.phone{
  display: flex;
  align-items: baseline;
}


/* Je mets des margin aux icones address et telephone afin de les décaler du texte */
.address img, .phone img {
  margin: 25px 25px 32px 25px;
}

/* configuration animation h1 */
.bold {
  font-weight: bold;
  animation: blink 2.5s infinite;
}

/* animation h1 CONTACT */
.light {
  font-weight: 300;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Configuration du formulaire pour les écrans de petite taille */
@media screen and (max-width: 866px) {
  article.deux > p:nth-child(3),
  article.trois > p:nth-child(3) {
    margin-bottom: 7em;
  }
}
@media screen and (max-width: 600px) {
  h1:after {
    content: "";
    display: block;
    border: 1px solid black;
    margin-left: 5%;
    margin-top: 20px;
    width: 90%;
  }

  @media screen and (max-width: 390px) {
    h2 {
      text-align: center;
    }
    .needle {
      display: none;
    }

    form #form_agreement {
      margin-left: 0;
    }
    .accord-coordonnees {
      margin: 0 15px 0 15px;
    }

    /* Je modifie le textarea du champ message */
    form > #form_message {
      border: 1px solid #0a3cdd;
      resize: none;
      overflow: auto;
    }
    section.contact-spe {
      display: flex;
      justify-content: space-around;
      width: 90%;
      flex-direction: column;
      align-items: center;
    }
    article.un,
    article.deux,
    article.trois {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 100%;
    }
    .map-section > img {
      display: none;
    }
  }
}