@font-face {
  font-family: "regular";
  src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
  font-family: "bold";
  src: url(../fonts/Poppins-Bold.ttf);
}
@keyframes fadeInElements {
  from {
    opacity: 0; /* Début invisible */
  }
  to {
    opacity: 1; /* Fin visible */
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "regular";
  --principale: #c9612d;
  --complémentaire: #2d96c9;
  --contour: #a04c22;
  --survol: rgba(0, 0, 0, 0.584);
  --fond: #c9612d2e;
  --banner: rgba(229, 209, 233, 0.568);
  --box_shadow: 0 4px 8px rgb(0 0 0 / 62%);

  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: black;
}

h3 {
  color: var(--principale);
  text-align: center;
  font-size: 1, 5rem;
}
h4 {
  color: var(--principale);
  text-align: center;
  font-size: 1, 3rem;
}
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.middle {
  flex: 1;
  /* Prend l'espace restant */
  padding: 20px;
}

.bottom {
  background-color: var(--fond);
  text-align: center;
  padding: 10px;
  position: relative;
  bottom: 0;
  width: 100%;
}

.navigation {
  display: flex;
  justify-content: space-around;
  background-color: var(--fond);
  padding-top: 35px;
  margin-bottom: 30px;
  /* border-top-left-radius: 100px;
  border-top-right-radius: 100px; */
}

.navigation_logo {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navigation_menu {
}

.navigation ul {
  border-radius: 20px;
  border: 2px solid var(--contour);
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

.navigation ul a {
  color: var(--principale);
  font-size: 1.1rem;
  text-decoration: none;
  padding-left: 25px;
  padding-right: 25px;
}

.navigation ul a:hover {
  color: var(--survol);
}

.navigation ul.active {
  color: var(--principale);
}

.titre_page {
  color: var(--principale);
  font-size: 3rem;
  text-align: center;
  padding-bottom: 20px;
}
.welcome_container_box {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.welcome_container_box_left p {
  opacity: 0;
  animation: fadeInElements 2s ease-in-out forwards;
  font-size: 2.5rem;

  color: var(--principale);
}

.welcome_container_box_right {
  border-radius: 35px;
  opacity: 0; /* Au début, l'élément est invisible */
  animation: fadeInElements 3s ease-in-out forwards; /* L'animation dure 2 secondes */
}
.welcome_container_box_right img {
  border-radius: 35px;
}

.mc_container {
  display: flex;
  width: 80%;
  margin: 0 auto;
  justify-content: space-around;
  align-items: center;
}
.mc_img {
  width: 200px;
  height: 300px;
  flex-shrink: 0;
  overflow: hidden; /* Pour éviter que l'image dépasse du conteneur */
}

.mc_img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Remplit le conteneur tout en gardant le ratio */
  border-radius: 15px;
}

.mc_texte {
  padding-left: 10px;
  padding: 20px;
}

.mc_txt {
  padding-left: 10px;
  padding: 20px;
}

.capillaire {
  display: flex;

  justify-content: center;
}

.capillaire_texte {
  text-align: center;
  width: 85%;
}

.spacer {
  width: 350px;
}
.prestations {
  display: flex; /* Rend la div un conteneur flex */
  flex-direction: column; /* Aligne les enfants verticalement */
  align-items: center; /* Centre les enfants horizontalement */
  justify-content: center; /* Centre les enfants verticalement */
  width: 100%;
}
.prestations_container {
  display: flex;
  width: 90%;
}

.prestations_container_box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85%;
  border: 2px solid var(--principale);
  border-radius: 25px;
  margin: 15px;
  box-shadow: var(--box_shadow);
}

.prestations_container_box_txt {
  margin: 10px;
}
.prestations_container_box_txt h3 {
  text-decoration: underline;
  text-align: center;
}

.mc_presa p {
  text-align: center;
}

.prestations_container_box_img {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  overflow: hidden; /* Pour éviter que l'image dépasse du conteneur */
  padding: 15px;
  border-radius: 20px;
  margin: 10px;
}

.prestations_container_box_img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Remplit le conteneur tout en gardant le ratio */
  border-radius: 15px;
}

.tarif {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tarifaire-grid {
  display: flex;
  flex-direction: column;
  width: 75%;
}

.tarifaire-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "title price"
    "description description";
  gap: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 5px;
  margin-top: 5px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.5s ease-in-out, box-shadow 0.1s ease-in-out;
}
.tarifaire-card:hover {
  /*transform: scale(1.05); /* Agrandit légèrement la box */
  border: 2px solid var(--principale);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Accentue l'ombre pour un effet de relief */
}

.tarifaire-title {
  display: flex;
  align-items: center;
  /* Centre verticalement le texte */
  height: 100%;
  font-size: 1.5em;
  grid-area: title;
  /* Place title dans la zone définie par "title" */
  text-align: left;
  padding-left: 10px;
}

.tarifaire-price {
  font-size: 1.2em;
  color: var(--principale);

  grid-area: price;
  /* Place price dans la zone définie par "price" */
}

.tarifaire-description {
  font-size: 1em;
  color: #666;
  grid-area: description;
  /* Place description dans la zone définie par "description" */
  text-align: left;
  padding-left: 10px;
}

.contact_container_up {
  display: flex;
  justify-content: center;
}

.contact_container_txt {
  width: 75%;
  justify-content: center;
}

.contact_container_infos {
  display: flex;
  padding-top: 20px;
  justify-content: space-around;
  align-items: center;
}

.me_contacter {
  /* font-size: 2.5rem;
  color: var(--principale); */
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.me_contacter img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Remplit le conteneur tout en gardant le ratio */
  border-radius: 15px;
}

.mc_img {
  width: 200px;
  height: 300px;
  flex-shrink: 0;
  overflow: hidden; /* Pour éviter que l'image dépasse du conteneur */
}

.avis_grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
  width: 100%;
  max-width: 900px; /* Limite la largeur totale de la grille */
  margin-left: auto;
  margin-right: auto; /* Centre la grille d'avis */
  padding: 0 20px; /* Ajoute des marges latérales */
}

.review_box {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 500px; /* Augmente la largeur maximale des boîtes */
  width: 100%; /* Les boîtes s'adapteront à la largeur disponible */
  transition: transform 0.3s ease; /* Animation subtile pour l'effet hover */
}

.review_box.left {
  align-self: flex-start;
  margin-left: 5%; /* Décale la boîte à 5% du bord gauche, plus vers la gauche */
}

.review_box.right {
  align-self: flex-end;
  margin-right: 5%; /* Décale la boîte à 5% du bord droit, plus vers la droite */
}

.review_box:hover {
  transform: scale(1.05); /* Agrandir légèrement au survol */
}
.footer {
  display: flex;
  justify-content: space-around;
  background-color: var(--fond);
}
.footer_part {
  display: flex;
  flex-direction: column; /* Empile les enfants verticalement */
  justify-content: center;
  align-items: center; /* Centre les enfants horizontalement */
  text-align: center; /* Centre le texte */
}

.footer_logo {
  width: 100px;
}

.footer_part img {
  width: 50%;
}

.footer_part_link {
  text-decoration: underline;
}

/* De 480 à 720 px pour les téléphones mobiles.
De 768 à 900 px pour les tablettes en mode portrait.
De 900 à 1024 px pour les tablettes en mode paysage.
De 1024 à 1200 px pour un ordinateur fixe ou portable. */

@media only screen and (min-width: 780px) and (max-width: 1144px) {
  .navigation ul a {
    font-size: 1.5rem;

    padding-left: 15px;
    padding-right: 15px;
  }
  .welcome_container_box_left p {
    font-size: 2rem;
  }
  .welcome_container_box_right img {
    width: 85%;
  }
}

@media only screen and (min-width: 400px) and (max-width: 780px) {
  .welcome_container_box_left p {
    font-size: 1rem;
  }
  .welcome_container_box_right img {
    width: 50%;
  }
}