/*555555555555555555555555555555555555------------------------realisation------------------55555555555555555555555555555555555555------------------------------------------5555555555555555555555555555555----------------------realisation de A a Z---------------*/

/*------------------------------------------------------------------------------Partie 1--------------------------------------------------------------*/
.video1realisation{
    position: absolute;
    min-width: 100%;
    top: 50%;
    left: 50%;
    z-index: -100;
    transform: translate(-50%, -50%);
  }
  /*-----------------------------------------------------------------premiere section nav voir 1 et acceuil-----------------------------------------------------*/
  .topsecgnlrealisation{
    position: relative;
    height: 57.5vh;
    width: 100%;
    overflow: hidden;
    background-color: rgba(102, 100, 100, 0.5)
  }
  
  .titrerealisations{
    padding-top: 10%;
    text-align: center;
    color: #fff;
    font-size: 4vw;
    margin: 0%;
  }
  
  /*------------------------------------------------------------------------cadre photo -----------------------------------------------------------------------------*/
  /*-----------realisation_cadre_photo_gnl-----*/
  .realisation_cadre_photo_gnl{
    width: 100%;
    display: flex;
    margin-top: 5%;
  }
  
  @media screen and (max-width: 500px){
    .realisation_cadre_photo_gnl{
      flex-direction: column;
    }
    
  }
  
  @media screen and (min-width: 500px) and (max-width: 768px){
    .realisation_cadre_photo_gnl{
      flex-direction: column;
    }
    
  }
  /*-----------realisation_cote_gauche_gnl---ok--*/
  @media screen and (max-width: 500px){
    .realisation_cote_gauche_gnl{
      flex-direction: column;
      width: 100%;
    }
    
  }
  
  @media screen and (min-width: 500px) and (max-width: 768px){
    .realisation_cote_gauche_gnl{
      width: 100%;
      margin-top: 5%;
      display: flex;
      height: 40vh;
    }
  }
  
  @media screen and (max-width: 1350px) and (min-width: 768px) {
    .realisation_cote_gauche_gnl{
      width: 50%;
      height: 40vh;
      display: flex;
    }
  }
  
  @media screen and (min-width: 1350px) {
    .realisation_cote_gauche_gnl{
      width: 30%;
      margin-left: 20%;
      height: 40vh;
      display: flex;
    }
  }
  
  /*-----------realisation_cote_droite_gnl---ok--*/
  @media screen and (max-width: 500px){
    .realisation_cote_droite_gnl{
      width: 100%;
    }
  }
  
  @media screen and (max-width: 768px){
    .realisation_cote_droite_gnl{
      width: 100%;
      margin-top: 5%;
    }
  }
  
  @media screen and (max-width: 1350px) and (min-width: 768px) {
    .realisation_cote_droite_gnl{
      width: 48%;
      height: 40vh;
      padding-left: 2%;
    }
  }
  
  @media screen and (min-width: 1350px){
    .realisation_cote_droite_gnl{
      width: 28%;
      padding-left: 2%;
      margin-right: 20%;
      height: 40vh;
    }
  }
  
  /*--------------------------------------------gauche photo----------------------------*/
  @media screen and (max-width: 500px){
    .realisation_cote_gauche_cadre_gauche_gnl{
      width: 90%;
      height: 60vh;
      padding-left: 5%;
      padding-right: 5%;
    }
  }
  @media screen and (min-width: 500px){
    .realisation_cote_gauche_cadre_gauche_gnl{
      width: 48.5%;
      height: 100%;
      padding-right: 1.5%;
    }
  }
  
  .realisation_cote_gauche_cadre_gauche_haut{
    height: 25%;
    padding: 0%;
  }
  
  .img_realisation_cote_gauche_cadre_gauche_haut{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  .realisation_cote_gauche_cadre_gauche_bas{
    height: 70%;
    padding-top: 5%;
  }
  
  .img_realisation_cote_gauche_cadre_gauche_bas{
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
  
  @media screen and (width: 500px){
    
  }
  
  /*------------------------------------------droite photo-----------------------*/
  @media screen and (max-width: 500px){
    .realisation_cote_droite_cadre_droite_gnl{
      width: 90%;
      height: 60vh;
      padding-left: 5%;
      padding-right: 5%;
    }
  }
  
  @media screen and (min-width: 500px){
    .realisation_cote_droite_cadre_droite_gnl{
      width: 48.5%;
      height: 100%;
      padding-left: 1.5%;
    }
  }
  
  @media screen and (max-width: 500px){
  .realisation_cote_droite_cadre_droite_bas{
    height: 25%;
    padding: 0%;
    }
  }
  
  @media screen and (min-width: 500px){
  .realisation_cote_droite_cadre_droite_bas{
    height: 25%;
    padding: 0%;
    }
  }
  
  .img_realisation_cote_droite_cadre_droite_bas{
   object-fit: cover;
   width: 100%;
   height: 100%;
  }
  
  
  @media screen and (max-width: 500px){
    .realisation_cote_droite_cadre_droite_haut{
      height: 70%;
      padding-bottom: 5%;
    }
  }
  
  @media screen and (min-width: 500px){
    .realisation_cote_droite_cadre_droite_haut{
      height: 70%;
      padding-bottom: 5%;
    }
  }
  
  
  .img_realisation_cote_droite_cadre_droite_haut{
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
  
  /*----------------------------------------------droite---------------------------*/
  
  .realisation_cote_droite_title{
    text-align: left;
    font-size: 25px;
    margin: 0%;
    padding-bottom: 2vh;
  }
  
  .realisation_cote_droite_bar{
    margin: 0%;
    padding-top: 2%;
    padding-bottom: 2%;
  }
  
  @media screen and (max-width: 500px){
    .realisation_cote_droite_bar::after{
      content: '';
      width: 8%;
      height: 2px;
      position: absolute;
      background-color: #f00;
    }
  }
  
  @media screen and (min-width: 500px){
    .realisation_cote_droite_bar::after{
      content: '';
      width: 3%;
      height: 2px;
      position: absolute;
      background-color: #f00;
    }
  }
  
  .realisation_cote_droite_text1{
    text-align: left;
    padding-bottom: 4%;
    font-size: 18px;
    padding-bottom: 2vh;
  }
  
  .realisation_cote_droite_text2{
    text-align: left;
    font-size: 18px;
  }
  
  /*-----------------------------------------------------------------------------------realisation video-------------------------*/
  
  .realisationvideo{
    flex-direction: column;
  }
  
  .realisationvideo1{
    position: relative;
    width: 50%;
    height: 50%;
    padding-bottom: 28.125%;
    overflow: hidden;
    margin-left: 25%;
  }
  
  .realisationvideo1 iframe,
  .realisationvideo1 object,
  .realisationvideo1 embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .realisationvideo2{
    position: relative;
    width: 50%;
    height: 50%;
    padding-bottom: 28.125%;
    overflow: hidden;
    margin-left: 25%;
  }
  
  .realisationvideo2 iframe,
  .realisationvideo2 object,
  .realisationvideo2 embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .realisationvideo3{
    position: relative;
    width: 50%;
    height: 50%;
    padding-bottom: 28.125%;
    overflow: hidden;
    margin-left: 25%;
  }
  
  .realisationvideo3 iframe,
  .realisationvideo3 object,
  .realisationvideo3 embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .realisationvideo4{
    position: relative;
    width: 50%;
    height: 50%;
    padding-bottom: 28.125%;
    overflow: hidden;
    margin-left: 25%;
  }
  
  .realisationvideo4 iframe,
  .realisationvideo4 object,
  .realisationvideo4 embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }