body, html {
    margin: 0%;
    height: 100%;
    width: 100%;
    overflow-x: hidden; /* Pour empêcher le défilement horizontal */
    background: linear-gradient(to bottom right, #000714 ,#000714ab);
}



.bodyC{
    margin: 0%;
    height: 100%;
    width: 100%;
    overflow-x: hidden; /* Pour empêcher le défilement horizontal */
    background: linear-gradient(to bottom right, #ffffff 80%,#eaeaead6);

}

.containerGeneral{    
    width: 100%;
    height: 100%;
    margin-top: 0%;
    margin-top: 0%;
    color:white;
}

.containerDark{
    color: #fff;
    padding-left: 8%;
    padding-right: 8%;
}

.containerQuizz{
  margin-left: 30%;
}

a {
    color: #828dfd;
    background-color: transparent;
    text-decoration: none;
}
      
h1 {
    color: #ffffff;
     font-family: "Trebuchet MS", "Arial Narrow",
    Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    font-size: x-large;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
     text-align: center;
     margin: 0%;
     padding-top: 2%;
     
}
.h1C {
    color: #000714;
     font-family: "Trebuchet MS", "Arial Narrow",
    Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    font-size: x-large;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
     text-align: center;
     margin: 0%;
     padding-top: 2%;
     
}

.text{
    text-decoration: none;
    font-weight: lighter;
    font-family:  system-ui;
    font-size:large;
    
}

.textC{
    color:#ffffff;
    text-decoration: none;
    font-weight: lighter;
    font-family:  system-ui;
    font-size:large;
    
}

.titreForm{
    color: #828dfd;
    font-family: "Nunito sans", "Nunito sans", "Trebuchet MS", "Arial Narrow",Arial, sans-serif;
    font-weight: bold;
    font-size: large;
}

.indication{
    color: #ffffff;
    font-family: "Nunito sans", "Nunito sans", "Trebuchet MS", "Arial Narrow",Arial, sans-serif;
    font-weight: bold;
    font-size: large;
  }

.Prc050{
position:absolute;
width: 70%;
color:white;
padding: 2%;
float:left;

}


.Prc50100{
   
    width: 50%;
    margin-left: 50%;
    background-color: #1c1c1c1e;
    color:white;
    padding: 2%;
    padding: auto;
    margin-right: 0%;
    border-color: #1c1c1c;
   
    }

/* * {
    box-sizing: border-box;
  } */

.row {
    display: -ms-flexbox; /* IE 10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE 10 */
    flex-wrap: wrap;
    padding: 0 4px;
    
}
  
  /* Create two equal columns that sits next to each other */
.column {
    -ms-flex: 33%; /* IE 10 */
    flex: 33%;
    padding: 0 0px;
}
  
.column img {
    margin-top: 0px;
    vertical-align: middle;
}



.container {
    display: flex;
    height: 100vh;
    position: relative;
}

.left-div {
    font-family: "Trebuchet MS", "Arial Narrow";
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    width: 65%;
    /* background: linear-gradient(to right, #1c1c1c,98% ,#1c1c1cd0); */
    background: linear-gradient(to right, #000714,98% ,#000714e1);
    height: 100vh;
    position: relative;
    z-index: 1;
    color: white;
    float: left;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll;
    text-align: justify;

}

.transparent{
    position: fixed; 
    width: 35%;
    height: 100%;
    /* background: linear-gradient(to right,#1c1c1cd0,#0000000c); */
    background: linear-gradient(to right,#000714e1,#00071414);
    float:right;
    margin-left: 75%;
    z-index: 0;
}

.right-div {
    position: absolute;
    width: 50%;
    position: fixed; 
    right: 0;
    height: 100%;
     z-index: 0; 
    float: right;
    /*overflow-y: auto; Pour permettre le défilement des images à l'intérieur de la div */ 
}


.right-div img {
    display: block; 
}

hr{
    color: #828dfd;
    width: 50%;
    
}

.bandeau {
    font-family: "Nunito sans", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    text-align: justify;
    color: rgb(253, 253, 253);
   
    margin-bottom: 3%;
    text-align: center;
    font-size: small;
}

/* Style bouton  */

button {
    background-color: #828dfd;
    color: #000714;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin:auto;
    text-align: center;
    margin-top: 2%;
    display: flex;
}
.radiobuttonmargin{
  margin-left:6%;
}

/* Style des étiquettes */
label {
    font-weight: normal;
    padding-right: 2%;
    font-family: "Nunito sans", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;

    
}


.radio-group {
    text-align: center;
}
  
.radio-group input[type="radio"] {
  display:none;
}
  
.radio-group label {
  
    cursor: pointer;
}
  
  
  
.radio-group input[type="radio"]:checked + label {
    background-color: #828dfd;
    color: #fff;
}
.radio-group input[type="radio"] + label {
    padding: 5px 10px;
    border: 1px solid #828dfd;
    border-radius: 5px;
    background-color: #3f40417a;
  
}

.columnDay1 {
   
    width: 80%;
    height: 70vh;
    margin-bottom: 2%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    opacity: 0.9;
    background-image: url('../Image/lucidDream1.jpg');
}
.columnDay2 {
   
  width: 80%;
  height: 70vh;
  margin-bottom: 2%;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  opacity: 0.9;
  background-image: url('../Image/lucidDream2.jpg');
}
.columnDay3 {
   
  width: 80%;
  height: 70vh;
  margin-bottom: 2%;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  opacity: 0.9;
  background-image: url('../Image/lucidDream3.jpg');
}
.columnDay1:hover {
    width: 100%;
    height: 70vh;
    margin: auto 0.2%;
    margin-bottom: 2%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    opacity: 1;
    background-image: url('../Image/lucidDream1C.jpg');
}

.columnDay2:hover {
  width: 100%;
  height: 70vh;
  margin: auto 0.2%;
  margin-bottom: 2%;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  opacity: 1;
  background-image: url('../Image/lucidDream2C.jpg');
}

.columnDay3:hover {
  width: 100%;
  height: 70vh;
  margin: auto 0.2%;
  margin-bottom: 2%;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  opacity: 1;
  background-image: url('../Image/lucidDream3C.jpg');
}

.containerDay {
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif, fantasy;
    display: flex;
    height: 70vh;
    width: 100%;
    font-size: xx-large;
    margin-top: 3%;
    margin-bottom: 3%;
}

.textmenu {
    color: #ffffff;
    margin-left: 0px;
    font-size: 6vw;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif, fantasy;
    text-decoration: none;
    font-weight: bolder;
    text-shadow: 1px 1px  #000714;
  
  
  }
  .textmenu:hover {
    
    margin-left: 0px;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif, fantasy;
    text-decoration: none;
    font-weight: bolder;
  
  }
  
  /* Slider range */
.containerSlider {
    display: flex;
    align-items: center;
    margin: auto;
    font-family: "Nunito sans", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  }
  
  .slidecontainer {
    width: 100%;
    position: relative; /* Position relative pour positionner la valeur */
  }
  
  .slider {
    /* -webkit-appearance: none; */
    width: 100%;
    height: 12px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.9;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
    direction: ltr; /* Direction de droite à gauche */
  }
  
  .slider:hover {
    opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
    /* -webkit-appearance: none;
    appearance: none; */
    background: #828dfd;
    cursor: pointer;
    border-radius: 5%; /* Bordure arrondie pour créer un cercle */
    position: relative; /* Position relative pour positionner la valeur */
  }
  
  .slider::-moz-range-thumb {
    background: #828dfd;
    cursor: pointer;
    border-radius: 5%; /* Bordure arrondie pour créer un cercle */
    position: relative; /* Position relative pour positionner la valeur */
  }
  
  .slider::-moz-range-progress {
    background-color: #828dfd;
    height: 100%;
  }
  .slider::-webkit-slider-runnable-track {
  
    height: 100%;
  }
  
  .slider::-moz-range-track {
    color: #828dfd;
  }
  
  /* .slider::-ms-fill-lower {
    background-color: rgb(184, 76, 76);
  }
  
  .slider::-ms-fill-upper {
    background-color: #6eb84c;
  }
   */
  .slider::-ms-tooltip {
    display: none;
  }
  
  .slider-value {
    position: absolute;
    bottom: 100%; /* Ajuster la position de la valeur */
    left: 50%;
    transform: translateX(-50%);
    color: #828dfd;
    font-size: 13px;
  }
  span {
    padding: 2%;
  }

  .subtitle {
    margin-top: 0;
    font-size: 14px;
    color: #828dfd;
    font-family: "Nunito sans", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  }


  /* Style de la barre de progression */
.bar {
    background-color: #d3d3d32c;
    width: 90%;
    margin-left: 5%;
  }
  
  .progress-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000714;
    font-family: "Nunito sans", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    text-align: center;
  }
  
  @keyframes animateStripes {
    100% {
      background-position: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    }
  }
  
  .progress15 {
    width: 15%;
    height: 17px;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
      -52deg,
      transparent 1px,
      rgba(130, 141, 253, 0.85) 1px,
      rgb(130, 141, 253) 6px
    );
    background-size: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    animation: animateStripes 5s linear infinite;
  }
  .progress25 {
    width: 25%;
    height: 17px;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
      -52deg,
      transparent 1px,
      rgba(130, 141, 253, 0.85) 1px,
      rgb(130, 141, 253) 6px
    );
    background-size: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    animation: animateStripes 5s linear infinite;
  }
  
  .progress30 {
    width: 30%;
    height: 17px;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
      -52deg,
      transparent 1px,
      rgba(130, 141, 253, 0.85) 1px,
      rgb(130, 141, 253) 6px
    );
    background-size: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    animation: animateStripes 5s linear infinite;
  }
  
  .progress33 {
    width: 33%;
    height: 17px;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
      -52deg,
      transparent 1px,
      rgba(130, 141, 253, 0.85) 1px,
      rgb(130, 141, 253) 6px
    );
    background-size: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    animation: animateStripes 5s linear infinite;
  }
  .progress45 {
    width: 45%;
    height: 17px;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
      -52deg,
      transparent 1px,
      rgba(130, 141, 253, 0.85) 1px,
      rgb(130, 141, 253) 6px
    );
    background-size: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    animation: animateStripes 5s linear infinite;
  }
  
  .progress50 {
    width: 50%;
    height: 17px;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
      -52deg,
      transparent 1px,
      rgba(130, 141, 253, 0.85) 1px,
      rgb(130, 141, 253) 6px
    );
    background-size: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    animation: animateStripes 5s linear infinite;
  }
  .progress55 {
    width: 55%;
    height: 17px;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
      -52deg,
      transparent 1px,
      rgba(130, 141, 253, 0.85) 1px,
      rgb(130, 141, 253) 6px
    );
    background-size: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    animation: animateStripes 5s linear infinite;
  }
  .progress60 {
    width: 60%;
    height: 17px;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
      -52deg,
      transparent 1px,
      rgba(130, 141, 253, 0.85) 1px,
      rgb(130, 141, 253) 6px
    );
    background-size: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    animation: animateStripes 5s linear infinite;
  }
  .progress66 {
    width: 66%;
    height: 17px;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
      -52deg,
      transparent 1px,
      rgba(130, 141, 253, 0.85) 1px,
      rgb(130, 141, 253) 6px
    );
    background-size: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    animation: animateStripes 5s linear infinite;
  }
  
  .progress75 {
    width: 75%;
    height: 17px;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
      -52deg,
      transparent 1px,
      rgba(130, 141, 253, 0.85) 1px,
      rgb(130, 141, 253) 6px
    );
    background-size: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    animation: animateStripes 5s linear infinite;
  }
  .progress90 {
    width: 90%;
    height: 17px;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
      -52deg,
      transparent 1px,
      rgba(130, 141, 253, 0.85) 1px,
      rgb(130, 141, 253) 6px
    );
    background-size: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    animation: animateStripes 5s linear infinite;
  }
  
  .progress100 {
    width: 100%;
    height: 17px;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(
      -52deg,
      transparent 1px,
      rgba(130, 141, 253, 0.85) 1px,
      rgb(130, 141, 253) 6px
    );
    background-size: 30px 30px; /* Ajustez la taille des rayures selon vos besoins */
    animation: animateStripes 5s linear infinite;
  }
  
  .sliderlabel {
    font-size: medium;
    
  }
  .IndicLabel{
    font-size: large;
    font-style: italic;
    font-weight: bolder;
  }

  .containerradio {
    display: flex;
    align-items: center;
    margin-left: 5%;
    font-family: "Nunito sans", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  }

  .parallax {
    /* The image used */
    background-image: url('../Image/gracias.png');
  
    /* Full height */
    height: 70%; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bandViolet{
    width: 100%;
    height: 2vh;
    background-color: #828dfd;
    margin-top: 0%;
  }



  

  @media only screen and (max-width: 768px) {

    h1 {
      font-size: large;
    }
    .text {
      font-size: small;
    }
    .progress-bar {
      font-size: small;
    }
  
    .containerSlider {
      width: 100%;
    }
    /* span {
      font-size: small;
    } */
    .sliderlabel {
      font-size: small;
    }
    .subtitle {
      font-size: small;
    }
    .slider::-webkit-slider-thumb {
      width: 10px;
      height: 10px;
    }
  
    .slider::-moz-range-thumb {
      width: 10px;
      height: 10px;
    }
    span{
      width: 22%;
      font-size: xx-small;
      margin:4px;
    }
    .radio-group input[type="radio"] + label {
      padding: 3px 6px;
      border: 1px solid #ccc;
      
      border-radius: 5px;
      font-size: x-small;
    
    }
    .right-div{
      display: none;
    }

.container {
    display: block;
    height: 100vh;
    position: relative;
}

.left-div {
    font-family: "Trebuchet MS", "Arial Narrow";
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    width:90vw;
    /* background: linear-gradient(to right, #1c1c1c,98% ,#1c1c1cd0); */
    background: linear-gradient(to right, #000714,98% ,#000714e1);
    height: 100vh;
    position: relative;
    z-index: 1;
    color: white;
    float: left;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll;
    text-align: justify;

}
.containerQuizz{
  margin-left: 5%;
}

  }