.container {
  height: 100vh;

  display: flex;
  flex-direction: column;
}

.item {
  font-size: 2em;
  margin: 5px;
  padding: 5px;
  border: solid 2px black;
  text-align: center;
}

.header {
  background-color: #9900ff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly; /*réparti équitablement le contenu*/
  background-size: cover;
  flex-direction: row;
}
.logo {
  display: flex;
  align-items: center;

  justify-content: center;

  flex-direction: row;
}
.yt {
  display: flex;
  align-items: center;

  justify-content: center;

  flex-direction: row;
}
.titre {
  display: flex;
  align-items: center;

  justify-content: center;

  flex-direction: row;
}
.content1 {
  display: flex;
  align-items: center;
  border: none;
  justify-content: center;
  flex-direction: row;
  font-family: verdana;
  font-size: 1em;
}
.content2 {
   display: flex;
  align-items: center;
   border: none;
  flex-wrap: wrap;
  justify-content: space-evenly; /*réparti équitablement le contenu*/
  background-size: cover;
  flex-direction: row;
}
h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  color: #0c08f7;
  font-family: verdana;
  font-size: 1, 5em;
}
h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  color: #dff708;
  font-family: verdana;
  font-size: 1, 5em;
}
.img {
  display: flex;
  align-items: center;

  justify-content: center;

  flex-direction: row;
  color: #dff708;

  font-family: verdana;
  font-size: 1, 5em;
}
.flexbody {
  flex: 1; /*cet élément va occuper toute la place disponible sur l'axe vertial*/
  display: flex; /*les éléments contenus dans celui-ci s'afficheront en ligne*/
  flex-direction: row; /*valeur par défaut*/
}

.menuLeft {
  background-color: #00ffff;
}

.content {
  background-color: #dddddd;
  flex: 1; /*cet élément va occuper tout l'espace disponible sur l'axe horizontal*/
  /*background vagues (https://projects.verou.me/css3patterns/)*/
  background: linear-gradient(#ffffff 50%, rgba(255, 255, 255, 0) 0) 0 0,
    radial-gradient(circle closest-side, #ffffff 53%, rgba(255, 255, 255, 0) 0)
      0 0,
    radial-gradient(circle closest-side, #ffffff 50%, rgba(255, 255, 255, 0) 0)
      55px 0 rgb(68, 204, 245);
  background-size: 110px 200px;
  background-repeat: repeat-x;
}
.footer {
  background-color: #ff00ff;
  font-family: verdana;
  font-size: 1, 5em;
}

/*menu accordeon vertical ("https://www.frogweb.fr/menu-deroulant-vertical/)*/

#menu-accordeon {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  width: 180px;
}
#menu-accordeon ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
#menu-accordeon li {
  background-color: #729ebf;
  background-image: -webkit-linear-gradient(top, #729ebf 0%, #333a40 100%);
  background-image: linear-gradient(to bottom, #729ebf 0%, #333a40 100%);
  border-radius: 6px;
  margin-bottom: 2px;
  box-shadow: 3px 3px 3px #999;
  border: solid 1px #333a40;
}
#menu-accordeon li li {
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s;
  border-radius: 0;
  background: #444;
  box-shadow: none;
  border: none;
  margin: 0;
}
#menu-accordeon a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
  font-family: verdana;
  font-size: 1.2em;
}
#menu-accordeon ul li a,
#menu-accordeon li:hover li a {
  font-size: 1em;
}
#menu-accordeon li:hover {
  background: #729ebf;
}
#menu-accordeon li li:hover {
  background: #999;
}
#menu-accordeon ul li:last-child {
  border-radius: 0 0 6px 6px;
  border: none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}