@font-face {
  src: url(Open_Sans/static/OpenSans-Regular.ttf);
  font-family: Open_Sans-regular;
  }
/*.page-container
{
  position: absolute;o
  }*/

.entete {background-color: #F8F4E3; align-content: center; text-align: center;}
.entete img{height: 5rem;}
.entete h1 {color: #8812B3; font-family: Open_Sans-regular; font-size: 2rem; }
.entete p {color: #8812B3; font-family: Open_Sans-regular; font-size: 1.5rem;}

/* Style the top navigation bar */

/* Styles de la barre de navigation principale (Sticky) */
.topnav {
    /* float: none; <--- Inutile si vous utilisez flex */
    overflow: hidden;
    background-color: #8812B3;
    position: sticky; /* Reste fixe en haut */
    top: 0;
    padding: 0.4rem;
    width: 100%; /* Utiliser 100% pour un sticky full-width */
    display: flex; /* Alignement horizontal */
    align-items: center;
    justify-content: center;
    font-family: Open_Sans-regular; /* Assurez-vous que cette police est chargée */
    font-size: 1.2rem;
    z-index: 1000;
}

/* Style des liens principaux */
.topnav a {
    /* float: left; <--- Inutile avec flexbox */
    display: block;
    color: #F8F4E3;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Effets de survol */
.topnav a:hover {
    background-color: #F8F4E3;
    color: #8812B3; /* Couleur de texte plus claire au survol */
}



.bloc-2 {
  background-image: url("images/I1.jpg");
  align-content: center;
  background-size: cover;
  text-align: center;
  margin: 0 auto 0;}
.txtzone {font-family: Open_Sans-regular; 
  color: #8812b3; 
  background-color: #f8f4e3e0;
  padding-left:5rem; 
  padding-right: 5rem;
  width: 30%; 
  margin: 40px auto;
  display: block;
  align-content: center; }
.bloc-2 .txtzone h2 {font-size: 1.5rem; }
.bloc-2 .txtzone p {font-size: 1rem;}
.bloc-2 .img{ margin: 20px auto 40px; border-radius: 48%; display: block; width: 30%;}
.gold{color: #ffd500; font-weight: bold; background-color: #8812B3;}

.bloc-3 {
  background-color: #8812B3; 
  align-content: center;
  text-align: center;
  margin: 0 auto 0;
}
.txtzone2 {font-family: Open_Sans-regular; 
  color: #F8F4E3;
  padding-left:5rem; 
  padding-right: 5rem;
  width: 50%; 
  margin: 40px auto;
  display: block;
  align-content: center; }
.bloc-3 .txtzone2 p {font-weight:bold ;font-size: 1rem; text-align: justify;}
.txtcadre {font-family: Open_Sans-regular; 
 color: #8812B3; 
  background-color: #F8F4E3;
   border: 4px solid #28194D;
  padding-left:1rem; 
  padding-right: 1rem;
  width: 50%; 
  margin: 40px auto;
  display: block;
  align-content: center;
text-align: center ;}
 .bloc-3 .txtcadre a{background-color: #8812B3;
  color: #ffd500;
   border: 4px solid #28194D;
  padding: 10px;
  border-radius: 3%;
  margin-bottom: 2rem;
  text-decoration: none;
}

.bloc-4 {
  background-image: url("images/I1.jpg");
  align-content: center;
  background-size: cover;
  text-align: center;
  margin: 0 auto 0;}
.txtzone {font-family: Open_Sans-regular; 
  color: #8812B3; 
  background-color: #F8F4E3;
  padding-left:5rem; 
  padding-right: 5rem;
  width: 50%; 
  margin: 40px auto;
  display: block;
  align-content: center; }
.bloc-4 .txtzone h2 {font-size: 1.5rem; }
.bloc-4 .txtzone p {font-size: 1rem;}
.gras{font-weight: bold;}
.bloc-4 .img{ margin: 20px auto 40px; border-radius: 41%; display: block; width: 35%;}
.bloc-4 .txtzone a{background-color: #8812B3;
  color: #ffd500;
   border: 4px solid #28194D;
  padding: 10px;
  border-radius: 3%;
  margin-bottom: 2rem;
text-decoration: none;}

.bloc-5 {
  background-color: #8812B3; 
  align-content: center;
  text-align: center;
  margin: 0 auto 0;
}
.txtzone2 {font-family: Open_Sans-regular; 
  color: #F8F4E3;
  padding-left:5rem; 
  padding-right: 5rem;
  width: 50%; 
  margin: 40px auto;
  display: block;
  align-content: center; }
.bloc-5 .txtzone2 p {font-weight:bold ;font-size: 1rem; text-align: justify;}
.txtcadre {font-family: Open_Sans-regular;
  font-style: italic; 
 color: #8812B3; 
  background-color: #F8F4E3;
   border: 4px solid #28194D;
  padding-left:1rem; 
  padding-right: 1rem;
  width: 50%; 
  margin: 40px auto;
  display: block;
  align-content: center;
  text-align: center ;}
  .bloc-5 .txtcadre .img-s{ margin: 20px auto 40px; border-radius: 41%; display: block; width: 25%;}

 .bloc-5 .txtcadre a{background-color: #8812B3;
  color: #ffd500;
   border: 4px solid #28194D;
  padding: 10px;
  border-radius: 3%;
  margin-bottom: 2rem;
  text-decoration: none;
}
.bloc-5 .txtzone a{background-color: #8812B3;
  color: #ffd500;
  border: 4px solid #28194D;
  padding: 10px;
  border-radius: 3%;
  margin-bottom: 2rem;
  text-decoration: none;
}


/*début bloc 7: contact et prise de rendez-vous*/
.bloc-7 {
  background-image: url("images/I1.jpg");
  align-content: center;
  background-size: cover;
  text-align: center;
  margin: 0 auto 0;
}
.cadre-v{background-color: #8812B3;
  padding-left:5rem; 
  padding-right: 5rem;
  width: 50%; 
  margin: 40px auto;
  display: block;
  align-content: center;
}
.spe{text-align: justify;font-weight: bold;}

.bloc-7 .txtzone a{background-color: #8812B3;
  color: #ffd500;
  border: 4px solid #28194D;
  padding: 10px;
  border-radius: 3%;
  margin-bottom: 2rem;
  text-decoration: none;
}
 /*pied de page*/
 .footer {
  background-color: #8812b3;
  color: #f8f4e3;
 }
 .footer p{font-family: Open_Sans-regular;
  background-color: #8812b3;
  color: #f8f4e3;
  min-height: 1rem;
  text-align: right;
  padding-top: 1rem;
  margin-top: 0;
 }





/* Responsive layout - makes the three columns stack on top of 
each other instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a {padding: 5px 5px;font-size: 12px;}
  .txtzone{ padding-right:8px;padding-left: 8px;width: 88%;margin: 10px auto; }
  .entete h1 {font-size: 1.25rem; }
  .entete p {font-size: 1rem;}
  .txtzone2 {width: 80%; margin: 15px auto;padding-left: 0;padding-right: 0;}
  .txtcadre {width: 80%; margin: 40px auto;}
  .cadre-v{padding-left:0; padding-right: 0; width: 85%; margin: 15px auto;}
  .footer{padding-top: 0;font-size: 11px;margin-top: -2px;}
  .footer p{min-height: 0; text-align: right; padding-top: 0;margin-top: 0;}
}