@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
body {
    margin: 0%;
    font-family: Arial, sans-serif;
  }

.profil {
  border-radius: 50%;
  margin: 1%;
  text-align: right;
}
.navbar {
  z-index: 10;
  overflow: hidden;
  /*background-color: #C4EDA0;*/
  /*box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5); */
  padding: 1%;
}

.navbox{
  /*float: center;*/
  display: inline-flex;
  background-color: #b25cc7;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.5);
  padding: 1% 2%;
  margin : 2% 2%;
}

.navbox a {
  /*float: center;*/

  /*background-color: #caacf0;*/
  color: rgb(5, 5, 5); /* Couleur du texte des liens */
  text-align: center;
  text-decoration: none;
  font-size: 1em;
  /*padding: 3% 3%;*/
  /*margin : 2%*/
}

.navbox:hover {
  background-color: #d091e0; /* Couleur de fond au survol */
  color: black;
}

.entete {
  margin : 2% ;
  background-color : #EFE3FF;
  text-align: center;
  position: fixed; /* Barre de navigation fixe en haut de la page */
  width: 95%;
  top: 0;
  z-index: 1000;
}

.top{
  padding : 0% 1%;
  margin: 0% 1% ;
  position: relative;
  height: 8%;
  z-index : 1000;
}

.top img {
  position: absolute;
  column-width: 10em;
  display: inline-block; /* Empêche le texte de s'étendre sur toute la largeur du conteneur */
  vertical-align: top;
}

.top img:nth-of-type(1) {
    left: 5%;
}

.top img:nth-of-type(2) {
    right: 5%;
}

#carousel{
  margin-top: 12%;
}

.carousel-container{
  margin : 5% 20%;
  position: relative;
  width : 60%;
}

#myCarousel{
  position:relative;

}

#mid-rectangle {
    position: absolute;       /* absolute inside container */
    top: 90%;                 /* vertical middle of carousel */
    right: -35%;                  /* start at left edge */
    width: 105vw;              /* full width of carousel container */
    height: 80%;              /* adjust as needed */
    background-color: #b25cc7; /* semi-transparent green */      
    transform: translateY(-50%); /* vertically center */
    z-index: -1;

}

/*#titre{
  
  position:absolute;
  font-size: clamp(22px, 5vw, 42px);;
  margin : -11% 15% 2% 15%;
  text-align: center;
  z-index: 100;
}*/

#titre {
  font-family: 'Parisienne', cursive;
  position: absolute;
  margin : -11% 0%;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  font-size: clamp(22px, 5vw, 42px);
  text-align: center;
}

#citation{
  font-family: 'Parisienne', cursive;
  position:absolute;
  font-size: clamp(10px, 5vw, 25px);
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  margin : -5% 0%;
  text-align: center;
  z-index: 100;
}

#rdvbox{
  position:absolute;
  margin : -2% 0%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  
}
.contenu{
  padding: 2% 10% 15%;
  margin : 0%
}

.contenu .container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap; /* permet le passage en colonne */
}

.contenu .container .box3 {
    flex: 1 1 calc(30% - 40px); 
    min-width: 250px;   /* empêche de devenir trop petit */
    background: #ffffff;    
    margin-top: 60px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
    font-size: 1.2em;
}

.box ul {
    list-style: disc;
    padding-left: 20px;  /* espace pour les puces */
    margin: 0;
}

.box li {
  text-align: center;
    margin-bottom: 8px;
}

.contenu .container2 {
    display: flex;
    flex-wrap: wrap;       /* permet le passage en colonne sur mobile */
    gap: 40px;             /* espace entre texte et image */
    align-items: center;
    padding: 2% 10%;
}

.contenu .container2 .box2 {
    flex: 1 1 40%;         /* 2 colonnes */
    min-width: 300px;      /* évite que ça devienne trop petit */
}

.contenu .container2 .box2 p {
    font-size: 1em;
    line-height: 1.6em;
    text-align: justify;
}

.contenu .container2 .box2 img {
    width: 100%;           /* image responsive */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Responsive mobile */
@media (max-width: 1300px) {
  #citation{
    margin: -5% -5% 0% 0%;
  }
  #contenu_principal{
    padding-top: 5%
  }
  #titre{
    margin : -11% -5% 0% 0%;
    left: 50%;
  }
  #rdvbox{
    margin : -2% 0% 0% 0%;
  }
}

/* Responsive mobile */
@media (max-width: 900px) {
  #carousel {
    margin-top: 20%;
  }
  .contenu .container2 {
      flex-direction: column;  /* texte et image empilés */
  }
  .contenu .container2 .box2 img {
      width: 100%;             /* s'adapte à la largeur */
  }
  #citation{
    margin: 4% -20% 0% 0%;
  }
  #contenu_principal{
    padding-top: 20%
  }
  #titre{
    margin : -11% -25% 0% 0%;
    left: 50%;
  }
  #rdvbox{
    margin : -1.5% 0% 0% 0%;
  }
}

/* Responsive mobile */
@media (max-width: 700px) {
    #carousel {
    margin-top: 20%;
  }
  .contenu .container2 {
      flex-direction: column;  /* texte et image empilés */
  }
  .contenu .container .box3 {
      flex: 1 1 100%;   /* une seule colonne */
      margin-top: 20px;
  }
  .contenu .container2 .box2 {
      flex: 1 1 100%;
  }

  .contenu .container2 .box2 img {
      width: 100%;             /* s'adapte à la largeur */
  }
  #citation{
    margin: 8% -50% 0% 0%;
  }
  #contenu_principal{
    padding-top: 35%
  }
  #titre{
    margin : -11% -50% 0% 0%;
    left: 50%;
  }
    #rdvbox{
    margin : -5% 0% 0% 0%;
  }
  /*.navbar{
    padding : 5%;

  }*/
}


p{
  text-align: justify;
}

.contenu:nth-child(odd of .contenu) {
  background-color: #EFE3FF;
}

.contenu:nth-child(even of .contenu) {
  background-color: #ffffff;
}

.contenu .h2{
  margin: -15% 2% 2%;
}

.contenu p {
    text-indent: 2em;
}


.bas_page{
  background-color : #EDEDED;
  padding : 5px 20%;


}

.colonne{
  column-count: 2; 
  column-gap: 25%; 
}

.bas_page h2{
  font-size: 75%;
}

.bas_page p{
  font-size: 75%;
}

.mention p{
  text-align: center;
  font-size: 60%;
}

#blablabox {
    position: absolute;  /* escape flexbox limits */
    right: +15%;        /* move right past the container */
    z-index: 100;
    max-width: 250px;
    text-align: justify;
    text-align: center;

}

.tarifs {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 1em;
  text-align: center;
}

.tarifs th,
.tarifs td {
  border: 1px solid #ccc;
  padding: 12px;
    border-color: #E2E0EB;

}

.tarifs thead {
  background-color: #b25cc7;
  color: #000000;
  font-weight: bold;
}

.tarifs tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

.tarifs tbody tr:nth-child(even) {
  background-color: #EFE3FF;
}

.tarifs small {
  font-size: 0.8em;
  color: #555;
}

.map-container {
            width: 100%;
            height: 400px; /* hauteur personnalisable */
        }