@font-face {
font-family: "HeydingsControlsRegular";
src: url("./fonts/heydings_controls.ttf") format("truetype");
font-weight: normal;
font-style: normal;
} 
@font-face {
font-family: "Exo-Light";
src: url("./fonts/Exo-Light.otf") format("truetype");
font-weight: normal;
font-style: normal;
} 
@font-face {
font-family: "Exo-Italic";
src: url("./fonts/Exo-Italic.otf") format("truetype");
font-weight: normal;
font-style: normal;
} 
@font-face {
font-family: "Exo-ExtraLight";
src: url("./fonts/Exo-ExtraLight.otf") format("truetype");
font-weight: normal;
font-style: normal;
} 
@font-face {
font-family: "Exo-Bold";
src: url("./fonts/Exo-Bold.otf") format("truetype");
font-weight: normal;
font-style: normal;
} 
@font-face {
font-family: "Exo-BoldItalic";
src: url("./fonts/Exo-BoldItalic.otf") format("truetype");
font-weight: normal;
font-style: normal;
} 
html, body {
background: rgb(255, 255, 255);
width: 100%;
height: 100%;
/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
h1{
font-family:"Exo-BoldItalic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size:4vw;
margin-top: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.header {
font-family: "Exo-Bold";
background: rgb(255, 255, 255);
position:fixed;
left: 0;
padding-inline: 1vw;
z-index:3;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
width: 100%;
height: auto;
max-height: 28vh;
top: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.header ul {
line-height: 1.8;
margin-right: 0;
padding-inline: 3vw;
list-style: none;
overflow: hidden;
font-size:3.4vw;
}

.header li a {
display: block;
padding: 0px 0px;
text-decoration: none;
text-align: right;
}

.header li a:hover,
.header .menu-btn:hover {
color: #e06919;
/* color: #0e0b0b; */
}

.header .Nom {
display: block;
float: left;
color: #0e0b0b;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
margin-right: 2.5vh;
margin-top: 0;
font-weight: 500;
/* color: #0e0b0b; */
/* font-size:3vw; */
transition: max-height .2s ease-out;
}

.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 20px 20px;
position: relative;
user-select: none;
}

.header .menu-icon .navicon {
background: #333;
display: block;
height: 3px;
position: relative;
transition: background .2s ease-out;
width: 20px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}

.header .menu-icon .navicon:before {
top: 5px;
}

.header .menu-icon .navicon:after {
top: -5px;
}

.header .menu-btn {
display: none;
}

.header .menu-btn:checked ~ .menu {
max-height: 20vh;
margin-right: 1vw;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
.TitrePrincipal{
font-family: 'Exo-BoldItalic','Times New Roman', Times, serif;
font-size:2.5vh;
padding-top: 10vh;
margin-inline:auto;
text-align:justify;
font-weight: 500;
max-width: 90vw;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.Principal {
font-family: 'Exo-Italic','Times New Roman', Times, serif;
font-size:2.2vh;
padding-top: 8vh;
margin: 0vh auto;
text-align:justify;
font-weight: 500;
max-width: 90vw;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.Final {
font-family: 'Exo-Italic','Times New Roman', Times, serif;
font-size:2.2vh;
padding-top: 8vh;
margin: 0vh auto;
text-align:justify;
font-weight: 500;
max-width: 90vw;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.articleSecondaire {
font-family:"Exo-Italic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin-inline: auto ;
text-align:justify;
font-size:2vh;
font-weight: 400;
max-width: 90vw;
clear:left;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.texte {
text-align:center;
position: relative;
width:90%;
margin-top: 3vh;
margin-bottom: 0;
top: -3vh;
margin-inline: auto;
font-size:2vh;
font-family: "Exo-Bold";
color: rgb(25, 24, 24);
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.VideoPresentation {
background-color: white;
float: left;
margin-inline: auto;
width: 100vw;
max-height:90vh;
border-radius: 5px;
}
#VideoPresentation1 {
margin-top: 0;
margin-left: -4vw;
}
#VideoPresentation2 {
width: 98vw;
margin-top: 0;
margin-left:-6vw;
}

section {
display: flex;
max-width: 100vw;
flex-flow:row wrap;
}  
figure {
max-width: 100vw;
margin-inline: auto;
margin-top: 0;
margin-bottom: 0;
}  

.Elements {
background-color: white;
margin-left: -4vw;
width:98vw;
max-height:90vh;
/* border: inset; */
/* border-radius: 3%; */
/* border-color: grey; */
object-fit: contain;
cursor: pointer;
}
.Titre {
margin-left: 10vw;
font-size:2vh;
font-family: "Exo-Bold";
}

.Commentaires {
background-color: white;
font-family:"Exo-Italic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin-inline: auto;
margin-top: 0vh;
text-align:justify;
height:90%;
max-width: 95%;
cursor: pointer;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.soustitre {
background-color: white;
margin-inline: auto;
margin-top: 0vh;
text-align:justify;
height:90%;
max-width: 95%;
cursor: pointer;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

button:hover {
opacity: 1;
}

.figure:hover .controles,
figure:focus .controles {
filter:saturate(1) hue-rotate(360deg) contrast(5);
opacity: 1;
}
.figure:not(:hover) .controles,
figure:focus .controles {
opacity: 0.6;
}

button:before {
font-size: 2.8vh;
position: relative;
content: attr(data-icon);
color: #aaa;
text-shadow: 1px 1px 0px black;
} 
/* .controles {
width: 100%;
position: relative;
transition: 1s all;
}
.precedent {
font-family: "HeydingsControlsRegular";
text-align: center;
padding-bottom: 1.2vh;
clear: both;
opacity: 0.6;
width: auto;
border-radius: 10px;
margin-inline-start: -3%;
background-color: rgb(168, 4, 4);
box-shadow: 3px 3px 5px black;
cursor:pointer;
transition: 0.5s all;
}
.suivant {
font-family: "HeydingsControlsRegular";
text-align: center;
padding-bottom: 1.2vh;
clear: both;
opacity: 0.6;
width: auto;
border-radius: 10px;
margin-left: 75%;
background-color: rgb(168, 4, 4);
box-shadow: 3px 3px 5px black;
cursor:pointer;
transition: 0.5s all;
} */
.controles {
  position: relative;
  /* bottom: 50%; */
  width: 100%;
  left: 0;
  padding-bottom: 10px;
  transition: 0.5s all;
  }
  .precedent {
  font-family: "HeydingsControlsRegular";
  padding-bottom: 8px;
  opacity: 0.6;
  width: auto;
  border-radius: 10px;
  background-color: rgb(168, 4, 4);
  box-shadow: 3px 3px 5px black;
  cursor:pointer;
  transition: 0.5s all;
  float:left;
  }
  .suivant {
  font-family: "HeydingsControlsRegular";
  padding-bottom: 8px;
  opacity: 0.6;
  width: auto;
  border-radius: 10px;
  background-color: rgb(168, 4, 4);
  box-shadow: 3px 3px 5px black;
  cursor:pointer;
  transition: 0.5s all;
  float:right;
  }
@media screen and (min-aspect-ratio : 1.1) {
/* @media screen and (min-width: 450px) and (max-width: 1899px) { */
.header {
height: auto;
max-height: 15vh;
}
.header ul {
font-size:3vw;
}
.header li {
float:right;
}
.header li a {
padding: 10px 10px;
}
.header .menu {
clear:none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
h1{
font-size:2.6vw;
}
.articleSecondaire {
font-size: 3.5vh;
}
section {
display: flex;
max-width: 100vw;
flex-flow:row;

}  
.Elements {
background-color: white;
max-height:90vh;
width: auto;
max-width:20vw;
margin-inline: auto;
/* object-fit:scale-down; */
}
.texte {
text-align:center;
position: relative;
width:90%;
margin-top: 3vh;
margin-bottom: 0;
top: -3vh;
margin-inline-start: 0vw;
font-size:3.5vh;
font-family: "Exo-Bold";
color: rgb(25, 24, 24);
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.Commentaires {
height:100%;
font-family:"Exo-Italic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin-top: 0vh;
margin-inline: auto;
text-align:justify;
font-size:2.8vw;
max-width: 50vw;
object-fit: contain;
}
.Titre {
margin-left: 10vw;
font-size:3.5vh;
font-family: "Exo-Bold";
}
.soustitre {
height:100%;
margin-inline-start:0vw;
text-align:justify;
font-size:3vh;
object-fit: contain;
}
.TitrePrincipal{
font-family: 'Exo-BoldItalic','Times New Roman', Times, serif;
font-size:2.5vw;
padding-top: 15vh;
margin-bottom: 0;
padding-bottom: 0;
margin-inline-end:4vw;
text-align:left;
font-weight: 500;
max-width: 55vw;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.Principal {
font-size:2vw;
}
.Final {
font-size:2vw;
}
.VideoPresentation {
margin-top: 16vh;
padding-inline: 5vw;
}
#VideoPresentation1 {
width: 45vh;
margin-top: 16vh;
margin-right:1vw;
}
#VideoPresentation2 {
width: 65vw;
margin-top: 0;
margin-left:-6vw;
}
button:before {
font-size: 1.5vw;
}
.controles {
  left: -4%;
  }
/* .controles {
max-width: 100%;
margin-inline: auto;
}
.precedent {
margin-left: 0%;
padding-top: 0.6vh;
}
.suivant {
margin-left:40%;
padding-top: 0.6vh;
} */
}
/* @media (min-width: 1900px) {

.header {
height: auto;
max-height: 15vh;
}
.header ul {
font-size:3vw;
}
.header li {
float:right;
}
.header li a {
padding: 10px 10px;
}
.header .menu {
clear:none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
h1{
font-size:2.6vw;
}
.articleSecondaire {
font-size: 3.5vh;
}
.Elements {
margin-inline-start:-1vw ;
background-color: white;
max-height:75vh;
width: 45vh;
object-fit: contain;
}
.texte {
text-align:center;
position: relative;
width:90%;
margin-top: 3vh;
margin-bottom: 0;
top: -3vh;
margin-inline: auto;
font-size:3.5vh;
font-family: "Exo-Bold";
color: rgb(25, 24, 24);
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.Commentaires {
height:100%;
font-family:"Exo-Italic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin-top: 10vh;
margin-inline: auto;
text-align:justify;
font-size:3vh;
max-width: 50vw;
object-fit: contain;
}
.Titre {
margin-left: 10vw;
font-size:3.5vh;
font-family: "Exo-Bold";
}
.soustitre {
height:100%;
margin-inline-start:0vw;
text-align:justify;
font-size:3vh;
object-fit: contain;
}
.TitrePrincipal{
font-family: 'Exo-BoldItalic','Times New Roman', Times, serif;
font-size:4.5vh;
padding-top: 10vh;
margin-bottom: 0;
padding-bottom: 0;
margin-inline-end:6vw;
text-align:left;
font-weight: 500;
max-width: 70vw;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.Principal {
font-size:2vw;
}
.Final {
font-size:2vw;
}
.VideoPresentation {
margin-top: 16vh;
width: 45vh;
}
#VideoPresentation1 {
margin-top: 16vh;
margin-right:1vw;
}
#VideoPresentation2 {
margin-top: 16vh;
margin-right:1vw;
}
button:before {
font-size: 2vw;
} 
.controles {
max-width: 100%;
}
.precedent {
margin-inline-start: -2%;
}
.suivant {
margin-left: 60%;
}
} */
#bt15{
visibility:hidden;
}
#bt15bis{
visibility:hidden;
}