* {
  padding: 0px;
  margin: 0px;
}

body {
  background-image: url("/acceuille/wallpaper.webp");
  background-size: cover;
  background-repeat: repeat-y;
  background-position:center;
  background-attachment: fixed;
  font-family: arial;
  display: flex;
  flex-direction: column;
  align-items:center;
  font-size:16px;
  width:80%;
  height:auto;
  margin:0 auto;
}
body header {
  width:100%;
  
}
header {
  align-items:center;
  margin: 30px 20px 10px 20px;
  box-sizing:border-box;
}
header img { /*image de l'entete*/
  display:flex;
  border-radius: 15px;
  width: 100%;
  height: 100%;
}





.introduction {
  box-sizing:border-box;
  border-radius: 15px;
  padding: 8px;
  text-align: center;
  background-color: rgba(138, 43, 226, 0.7);
  width: 100%;
  height: auto;
  color: white;
  margin-top: 10px;
  overflow: hidden;
}





#video {
  position: relative;
  padding-bottom: 56.25%; /* Ratio 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%; /* S'assure que la div ne dépasse pas la largeur du parent */
}
#video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-youtube {
  height: 315px;
  width:560px;
  max-width: 100%;
}

@media (max-width: 600px) {
  #video {
    max-width: 100%;
    margin: 0 auto;
  }
  .introduction img {
    max-width: 100%;
  }
}









main {
  width: 100%;
  height: auto;
  box-sizing:border-box;
}
body main {
  align-content: center;
  display:flex;
  justify-content: center;
  margin: 0px 20px 0px 20px;
  box-sizing:border-box;
}






img {
  border-radius: 15px;
}

a {
  text-decoration: none;
  color: white;
}













/*Responsive ! _________________________________________________________ */
.petit-ecran { /*supprime le petit header en big screen*/
  display: none;
}
@media (max-width: 768px) {
  .grand-ecran {
    display: none; /* cache le grand */
  }
  .petit-ecran {
    display: block; /*afficher le petit */
  }
  body {
    width: 100%;
  }
  header {
    margin: 0 auto;
  }
}
  













}