/** {
    border: 1px solid red;
}
*/

.rating {
    direction: rtl;
    unicode-bidi: bidi-override;
    display: flex;
   justify-content:left;
}
.rating > input {
    display: none;
}
.rating > label {
    font-size: 2em;
    color: #ddd;
    cursor: pointer;
    padding: 0 5px;
}
.rating > label:before {
    content: "\2605"; /* Code Unicode pour une étoile pleine */
}
.rating > input:checked ~ label,
.rating > input:hover ~ label,
.rating > input:hover ~ label ~ label {
    color: #f5b301;
}
h1{
    text-align: center;
    text-decoration:underline;
    
    letter-spacing: 3px;
}
p1{
    color: #086cbc;
}
p2{
  color:red;
}
img.infobulle-icone {
  cursor: help;
  }
.formText{
    color:#086cbc ;
}
.titre{
    text-align: center;
    align-items: center;
    text-decoration:underline;
    
    font-size:200%;
    justify-content: center;
}
        /* Style pour l'infobulle */
        .tooltip {
          position: relative;
          display: inline-block;
      }

      .tooltip .tooltiptext {
          visibility: hidden;
          width: 200px;
          background-color: #fff;
          color: #086cbc;
          text-align: center;
          border-radius: 5px;
          padding: 5px;
          position: absolute;
          z-index: 3;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          opacity: 0;
          transition: opacity 0.2s;
      }
     

      .tooltip:hover .tooltiptext {
          visibility: visible;
          opacity: 1;
      }
      @media(max-width:1024px){
    .infobulleImg{
    width:100%;

    }
  }
body
{
    /* text-align: center; */
    font-family: Roboto, sans-serif;
}
.p1 {
    text-align: left;
    font-size: 16px;
    color: black;

}
.p2 {
    text-align: left;
    font-size: 12px;
    color: black;
    text-decoration: none; /* Retirer le soulignement */
    font-weight: normal;   /* Texte normal, pas en gras */
}
.p3 {
    text-align: left;
    font-size: 12px;
    color: black;
    text-decoration: none; /* Retirer le soulignement */
    font-weight: normal;   /* Texte normal, pas en gras */
}
.p4 {
    text-align: left;
    font-size: 14px;
    color:#086cbc ;
    text-decoration: none; /* Retirer le soulignement */
    font-weight: normal;   /* Texte normal, pas en gras */
}


label {
    padding: 12px 12px 12px 0;
    display: inline-block;
  }
  .col-25 {
    float: left;
    width: 20%;
    margin-top: 6px;
  }
  .col-75 {
    float: left;
    width: 50%;
    margin-top: 10px;
  }
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  @media screen and (max-width: 768px) {
    .col-25, .col-75, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }
  }
  input[type=text],  input[type=email], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
  }
  th.input-cell {
    width: 80%; /* Ajuste la largeur de la cellule contenant l'input */
}
p{
    color: #5E6062;
    text-align: center;
    font-family: Roboto, sans-serif;
    text-decoration :underline;
    font-size: 1.2rem;
}
.bouton {
    margin-bottom: 2%;
    margin-left: 44%; 
    border-radius: 6px;
    font-size: 1.8rem;
    background-color: #fff;
    border-color: #086cbc;
    color: #086cbc;
    padding: 5px 20px;
    text-decoration: none;
    cursor: pointer;
    font-family:  Bradley Hand ITC;
    transition: all .1s ease-in-out;
    &:hover {
    color: #fff;
      background-color: #086cbc;
      border-color: #086cbc;
      transition: all .1s ease-in-out;
    }
}
@media (max-width: 768px){
  .bouton  {
    width: 100%; /* Utilisez 100% pour qu'il s'étire sur toute la largeur */
    margin: 0; /* Réinitialisez la marge */
    padding: 10px 15px; /* Réduisez la taille du bouton pour l'adapter à l'écran plus étroit */
    text-align: center; /* Centrez le texte */
    position: relative; /* Définissez la position sur relative */
    top: 100px;
  }
}
table{
    text-align: left;
    font-size: 12px;
    color: black;
    text-decoration: none; /* Retirer le soulignement */
    font-weight: normal;   /* Texte normal, pas en gras */

}
tr{
    text-align: left;
    font-size: 12px;
    color: black;
    text-decoration: none; /* Retirer le soulignement */
    font-weight: normal;   /* Texte normal, pas en gras */

}
th, td{
    padding: 5px;
    text-align: left; /* Aligne le texte à gauche */
    vertical-align: middle; /* Centre verticalement le texte */


}
.centrer-texte {
    text-align: center;
}
.h-captcha-container {
    position:relative;
    
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 20vh; /* Hauteur de la fenêtre visible pour centrer verticalement */
    z-index:2;

}
@media(max-width:768px){
.h-captcha-container{
  align-items:center;
  top:100px;
}

}
.bouton-container {
    
    font-family:  Shadows Into Light Two, Bradley Hand ITC,Roboto, sans-serif ;
    display: flex;
    justify-content: left; /* Centre horizontalement */

    margin-left: 25%;/* Décale le bouton vers la droite de 20% de la largeur du conteneur parent */

    align-items: center; /* Centre verticalement */
    height: 5vh; /* Hauteur de la fenêtre visible pour centrer verticalement */
    transition: all .1s ease-in-out;
    &:hover {
      background-color: transparent;
      border-color: #fff;
      transition: all .1s ease-in-out;
    }
}


/* .align-text{
    text-align: center;
} */
.flex-container {
    top:20%;
    position: relative;
    display: flex;
    background-color: #f1f0ff ;
    flex-direction: column;
    box-sizing:border-box;
    z-index:0;
    width: 50%;
    left:20%;
    box-shadow: 10px 5px 5px #086bbc98;
    border-radius: 6px;
    margin: 50px;
    padding: 2rem 2rem 1.5rem;
}
@media(max-width:768px){
  .flex-container{
    top:80px;
    position: relative;
    left:0;
    width: 100%; /* Le conteneur prendra la largeur de l'écran sur un téléphone */
    align-items:left;
    border-radius: 6px;
    padding: 2rem;
    margin:0px;
  }
}
  
div#bandeau {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  
  
   /* Pour centrer horizontalement */
  box-shadow: 10px 5px 5px #c4c4c4;
  height: 10%;
  background-color: #fff;
  z-index: 1;
}

div#bandeau .logo {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    margin-left: 1%;
  }

div#bandeau .texte {
    justify-content: center;
  text-align: center; /* Pour centrer horizontalement */
  font-size: 1.8rem;
  margin-left:20%;
  color:#086cbc;
  
}
@media (max-width: 768px) {
    /* Pour les écrans plus petits, comme les smartphones et les tablettes */
    div#bandeau {
      position: fixed;
      top: 0;
      width: 100%;
      display: flex;
      align-items: center;
      left: 0%;
       /* Pour centrer horizontalement */
      box-shadow: 10px 5px 5px #c4c4c4;
      height: 10%;
      background-color: #fff;
      z-index: 1;
      }
    div#bandeau .texte {
      font-size: 1rem; /* Taille de police pour les petits écrans */
      margin-left:10%;
      text-align: left;
    }
    div#bandeau .logo {
      max-width: 75%;
      max-height: 75%;
      height: auto;
      margin-left: 1%; 
    }
  }