html {
  background-color: #C0D2DF;
}
html, body {
  margin: 0;
  padding: 0;
 }
/* commentaire */
body {
  font-family: "verdana", "Arial", sans-serif;
  width: 100%;
  max-width: 1024px;
  display:flex; 
  text-align: center;
  margin: 0px auto;
}
video {
  width: 100%;
  height: auto;
}
* {
  box-sizing: border-box;
}
h1 {
  color: #010D15;
  font-weight: bold;
}
h2 {
  color: #056AAE;
  font-family: Helvetica, Arial, sans-serif;
}
h3 {
  color: #433D58;
  font-family: Helvetica, Arial, sans-serif;
}
h4 {
  color: #433D58;
  font-family: Helvetica, Arial, sans-serif;
}
h5 {
  color: #433D58;
  font-family: Verdana, Arial, sans-serif;
}
p{
  color: #00070B;
  font-family: Verdana, Arial, sans-serif;
}
  @media screen and (max-width: 400px){h1 {font-size: 18px;}}
  @media screen and (min-width: 401px) and (max-width: 500px){h1 {font-size: 30px;}}
  @media screen and (min-width: 501px) and (max-width: 900px){h1 {font-size: 40px;}}
  @media screen and (min-width: 901px){h1 {font-size: 50px;}}
  
  @media screen and (max-width: 400px){h2 {font-size: 15px;}}
  @media screen and (min-width: 401px) and (max-width: 500px){h2 {font-size: 27px;}}
  @media screen and (min-width: 501px) and (max-width: 900px){h2 {font-size: 35px;}}
  @media screen and (min-width: 901px){h2 {font-size: 45px;}}
  
  @media screen and (max-width: 400px){h3 {font-size: 13px;}}
  @media screen and (min-width: 401px) and (max-width: 500px){h3 {font-size: 20px;}}
  @media screen and (min-width: 501px) and (max-width: 900px){h3 {font-size: 30px;}}
  @media screen and (min-width: 901px){h3 {font-size: 40px;}}
  
  @media screen and (max-width: 400px){h4 {font-size: 11px;}}
  @media screen and (min-width: 401px) and (max-width: 500px){h4 {font-size: 18px;}}
  @media screen and (min-width: 501px) and (max-width: 900px){h4 {font-size: 27px;}}
  @media screen and (min-width: 901px){h4 {font-size: 35px;}}
  
  @media screen and (max-width: 400px){h5 {font-size: 10px;}}
  @media screen and (min-width: 401px) and (max-width: 500px){h5 {font-size: 12px;}}
  @media screen and (min-width: 501px) and (max-width: 900px){h5 {font-size: 14px;}}
  @media screen and (min-width: 901px){h5 {font-size: 16px;}}

  @media screen and (max-width: 400px){figcaption {font-size: 8px;}}
  @media screen and (min-width: 401px) and (max-width: 500px){figcaption {font-size: 13px;}}
  @media screen and (min-width: 501px) and (max-width: 900px){figcaption {font-size: 16px;}}
  @media screen and (min-width: 901px){figcaption {font-size: 20px;}}
/*.box{
  border: 3px solid black;
}
/**/
.conteneur {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  grid-gap: 2px;
  background-color: #D9EAF5;
}
.titre {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}
.video {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}
.slide {
  grid-column: 1 / 3;
}
.cadrelien {
  grid-column: 3 / 4;
  grid-row: 2 / 6;
}
.annonce {
  grid-column: 1 / 3;
}
.telecharger {
  grid-column: 1 / 2;
  grid-row: 5 / 6;
}
.bas {
  grid-column: 1 / 4;
}
.respon{
  width: 100%;
  height: auto;
  opacity: 0.5;
} 
.respon:hover { 
 opacity: 1;
}
.responsive{
  width: 100%;
  height: auto;

}
.responsivefadeIn {
  width: 100%;
  height: auto;
  animation-name: fadeIn;
  animation-duration: 10s;
}
@keyframes fadeIn {
  0% {opacity: 0;} 
  100% {opacity: 1;}
}
.cadresvideo{
  width: 80%;
  position: relative; 
  left: 8%;
}
.charger{
  position: relative;
  left: 5%;
  background-color: #8FC3E4;
  width: 95%;

  text-align: center;  border-radius: 10px; 
}
.cadrelien{
  position: relative;
  width: 100%;
  height: 100%;
}
.lien{
  display: block ;
  border-radius: 10px; 
  position: sticky;
  top: 15%;}
}
.bas{
  display:inline;
  position: relative;
}
.textecircuit{
  width: 100%;
  background-color: #C4EAF2;
  position: relative;
  text-align: left;
  margin-top:3%;
  padding-left:3%;
  padding-right:3%;
  border-radius: 10px; 

}
.animation {
  position: absolute;
  top: 0px; 
  animation: Asso 6s; 
  animation-iteration-count: 1;
}
@keyframes Asso {
  from {top: -300px;}
  50% {top: 130px;} 
  to {top: 0px;}
}