html {
  background-color: #C0D2DF;
  scroll-behavior: smooth;

}
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;
  font-family: Verdana, Arial, sans-serif;
}
h2 {
  color: #056AAE;
  font-family: Verdana, Arial, sans-serif;
}
h3 {
  color: #433D58;
  font-family: Verdana, Arial, sans-serif;
}
h4 {
  color: #433D58;
  font-family: Verdana, Arial, sans-serif;
}
h5 {
  color: #433D58;
  font-family: Verdana, Arial, sans-serif;
}
p{
  color: #00070B;
  font-family: Verdana, Arial, sans-serif;
    margin:2%;
}

  @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: 16px;}}
  @media screen and (min-width: 401px) and (max-width: 500px){h4 {font-size: 19px;}}
  @media screen and (min-width: 501px) and (max-width: 900px){h4 {font-size: 24px;}}
  @media screen and (min-width: 901px){h4 {font-size: 30px;}}
  
  @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){ul,p {font-size: 10px;}}
  @media screen and (min-width: 401px) and (max-width: 500px){ul,p {font-size: 11px;}}
  @media screen and (min-width: 501px) and (max-width: 900px){ul,p {font-size:12px;}}
  @media screen and (min-width: 901px){ul,p {font-size: 14px;}}
  
  @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;
}
.entete {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}
.Virieu,.Cessieu,.tourdisparu,.tour,.rives,.Dommassin,.Gaz,.Beron,.Hilaire,.Aoste,.Fitilieu,.Pressins {
  grid-column: 1 / 3;
}
.cadrelien {
  grid-column: 3 / 4;
  grid-row: 2 / 15;
}

.bas {
  grid-column: 1 / 4;
}
.respon{
  width: 100%;
  height: auto;
  opacity: 0.5;
} 
.respon:hover { 
 opacity: 1;
}
.responsive{
  width: 100%;
  height: auto;
}
.youtube {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.responsiveiframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 80%;
  height: 80%;
  border: none;
}
.responsivefadeIn {
  width: 100%;
  height: auto;
  animation-name: fadeIn;
  animation-duration: 10s;
}
@keyframes fadeIn {
  0% {opacity: 0;} 
  100% {opacity: 1;}
}
.cadresvideo{
  width: 70%;
  position: relative; 
  left: 30%;
}
.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;}
}
.entete{
  text-align: left;
  padding:1%;  
}
.Virieu,.Cessieu,.tourdisparu,.tour,.rives,.Dommassin,.Gaz,.Beron,.Hilaire,.Aoste,.Fitilieu,.Pressins{
  text-align: left;
  padding:1%;
}
#menu a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
  } 
#menu a:hover { 
  border-bottom: 1px solid;
  background: #94D0F3;
  } 
#menu a:link {
  color: #08161E;
}