/* resolution écran : 1920 x 1080 */

  .cl_body_index {
    margin: 0;
  }
  .cl_header_index {
    text-align: center;
    background: linear-gradient(#000000, #2efec8);
    padding: 30px;
    margin: auto;
  }

  #id_VLG {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #9e9e9e;
    padding: 20px;
    margin: 0;
    height: auto;
  }

  #id_section1 {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    height: auto;
    justify-content: center;
  }

  #id_section2 {
    display: flex;
    flex-direction: row;
  }
  #cl_boutonVLG {
    font-weight: bold;
    background: #ffff00;
    width: 200px;
    height: 80px;
    border: white solid;
    box-shadow: 6px 6px 4px #000;
    border-radius: 50%;
    margin: 0 10px 0 200px;
    float: left;
  }

  #id_Pvolog0 {
    display: flex;
    flex-direction: column;
    font-family: Arial;
    font-size: 15px;
    width: 60%;
    padding: 10px;
  }
  #id_Pvolog1 {
    padding: 20px;
  }

  #id_Ivolog0 {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 15px;
    width: 50%;
    height: 260px;
  }
  #id_Ivolog1 {
    display: flex;
    z-index: 10;
    box-shadow: 6px 6px 4px #000;
  }
  #id_Ivolog2 {
    position: absolute;
    z-index: 20;
    width: 100%;
    height: 100%;
  } 

  @media screen and(min-width: 1441px) { 
  #id_Pvolog0{
    width: 60%;
    height: min-content; 
  }
  #id_Pvolog1{
    padding: 20px;
  }
#id_Ivolog0{
  width: 724px;
  height: 270px;
}
#id_Ivolog1{
  width: 714px;
  height: 260px;
}
#id_Ivolog2{
  width: 714px;
  height: 260px;
}
#cl_boutonVLG{
  width: 200px;
  height: 80px;
}
  }
@media screen and(max-width: 1440px) {
  button {
    width: 162px;
    height: 64px;
  }
  #id_Pvolog0 {
    width: 50%;
    height: max-content;
  }
  #id_pvolog1 {
    padding: 10px;
  }
  #id_Ivolog0 {
    width: 592px;
    height: 222px;
  }
  #id_Ivolog1 {
    width: 582px;
    height: 212px;
  }
  #id_Ivolog2 {
    width: 582px;
    height: 212px;
  }
}
@media screen and(min-width: 1171px){
  button{
    width: 162px;
    height: 64px;
    border-radius: 50%;
    margin-right: 10px;
    margin-left: 200px;
    float: left;
  }
  #id_Pvolog0 {
    width: 50%;
  }
}
@media screen and(max-width: 1170px){
button{
  width: 315px;
  height: 40px;
  border-radius: 0%;
  margin: 0;
  float: right;
}
#id_Pvolog0 {
  width: 40%;
}
}
@media screen and(min-width: 1121px) {
 #id_section2{
  flex-direction: row;
  align-items: none;
 }
 #id_Ivolog0{
  width: 592px;
  height: 222px;
 } 
 #id_Ivolog1{
  width: 582px;
  height: 212px;
 }
 #id_Ivolog2{
  width: 582px;
  height: 212px;
 }
}
@media screen and(max-width: 1120px) {
  #id_section2{
    flex-direction: column;
    align-items: center;
   }
   #id_Pvolog0{
    width: 100%;
   }
   #id_Ivolog0{
    width: 724px;
    height: 270px;
   } 
   #id_Ivolog1{
    width: 714px;
    height: 260px;
   }
   #id_Ivolog2{
    width: 714px;
    height: 260px;
   } 
  
}
@media screen and(min-width: 791px) {
  #id_Ivolog0{
    width: 724px;
    height: 270px;
   } 
   #id_Ivolog1{
    width: 714px;
    height: 260px;
   }
   #id_Ivolog2{
    width: 714px;
    height: 260px;
   }  
}
@media screen and(max-width: 790px) {
  #id_Ivolog0{
    width: 592px;
    height: 222px;
   } 
   #id_Ivolog1{
    width: 582px;
    height: 212px;
   }
   #id_Ivolog2{
    width: 582px;
    height: 212px;
   }  
}
@media screen and(min-width: 651px) {
  #id_Ivolog0{
    width: 589px;
    height: 222px;
   } 
   #id_Ivolog1{
    width: 582px;
    height: 212px;
   }
   #id_Ivolog2{
    width: 582px;
    height: 212px;
   }  
}
@media screen and(max-width: 650px) {
  #id_Ivolog0{
    width: 340px;
    height: 127px;
   } 
   #id_Ivolog1{
    width: 320px;
    height: 117px;
   }
   #id_Ivolog2{
    width: 320px;
    height: 117px;
   }
     
}