@media (max-width: 768px) {
    #main-nav {
      display: none;
    }
    .navbar-toggler,nav li{ 
      display: block;
    }

  article.visible {
    opacity: 1;
    transform: translateY(0%);
  } 
  #page .retour {
    display: none;
  }

  .barreau, article img {
    display: none;
  }

  #lien {
    display: none;
  }

  #page #contenu .video video {
    width: 100%;
  }

  #page #contenu #contenu1 img {
    display: none;
  }
  
#page #contenu {
  margin-top: 5%;
  width: 100%;
}
#page #contenu .tete .contenu {
  display: block;
}
#page #contenu .tete .contenu img {
  width: 100%;
  margin-left: 0%;
}

/* ##### */

#page #contenu .video {
  display: block;
  width: 100%;
  margin-left: 0%;
  padding: 1% 3%;
}
#page #contenu .video object{
  width: 100%;
}
#page #contenu .video .barreau_gauche,
#page #contenu .video .barreau_droite{
  width: 0%;
  margin-right: 0%;
}

/* ##### */


#page #contenu #contenu1 .texte .sous-titre {
  margin: 0% ;
  margin-bottom: 5%;
  padding: 0%;
  text-align: center;
}
#page #contenu #contenu1 .texte .contenu {
  margin-left: 10%;
  margin-right: 10%;
}
#page #contenu #contenu1 .texte .barreau {
  width: 120%;
}

/* ##### */


#page #contenu #contenu2 {
  display: block;
  margin-top: 10%;
}
#page #contenu #contenu2 .texte .sous-titre {
  margin: 0% ;
  padding: 0%;
  margin-bottom: 5%;
  text-align: center;
}
#page #contenu #contenu2 .texte .contenu {
  padding: 0% 4%;
}
#page #contenu #contenu2 .texte .barreau {
  width: 60%;
  margin-left: 20%;
}
/* ##### */

#page #contenu #contenu3 {
  margin-top: 5%;
}
#page #contenu #contenu3 .texte .sous-titre {
  margin: 0% ;
  margin-bottom: 5%;
  padding: 0%;
  text-align: center;
}
#page #contenu #contenu3 .texte .contenu {
  margin-left: 10%;
  margin-right: 10%;
}
#page #contenu #contenu3 .texte .barreau {
  margin-top: 30%;
  width: 120%;
  margin-left: 40%;
}


}