@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);
overflow-inline:hidden;
width: 100vw;
height: 100%;
-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;
}
#logoInsta{
width: 15vw;
}
.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: 100vw;
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;
}
.iframe-container {
position: relative;
top: 25vh;
margin-left: 5vw;
margin-top: 15vh;
padding-top:100%;
margin-bottom: 26vh;
width:100%;
height:inherit;
}
#selfie{
position: absolute;
top: 0;
left: 0;
transform-origin: center;
transform: rotate(90deg) scale(1.8);
width:100%;
height:177%;
max-height: 48vw;
max-width: 85vw;
}
.VideoPresentation {
margin-left: -2vw;
background-color: white;
margin-top: 0;
margin-bottom: 0;
width: 96vw;
border-radius: 5px;
}
.Principal {
font-family: 'Exo-Italic','Times New Roman', Times, serif;
font-size:2.5vh;
padding-top: 8vh;
margin: 10vh 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:18px;
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: 0;
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;
}
.soustitre {
text-align:center;
border-radius: 5px;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

section {
display: flex;
width: 100%;
flex-flow:row wrap;
}  

figure {
width: 100vw;
margin-left: 2.5vw;
}  

.Elements {
background-color: white;
width: 98%;
max-height: 90vh;
margin-inline: auto;
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;
font-size:2.4vh;
width: 90vw;
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;
}
.controles {
width: 96vw;
border-radius: 10px;
position: relative;
bottom: 50%;
left: 0;
margin-inline-start: -2vw;
padding-bottom: 10px;
transition: 0.5s all;
display: flex;
} 
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: 18px;
position: relative;
content: attr(data-icon);
color: #aaa;
text-shadow: 1px 1px 0px black;
} 
.precedent {
font-family: "HeydingsControlsRegular";
text-align: center;
padding-bottom: 8px;
opacity: 0.6;
width: auto;
border-radius: 10px;
margin-left: -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: 8px;
opacity: 0.6;
width: auto;
border-radius: 10px;
margin-left: 87%;
background-color: rgb(168, 4, 4);
box-shadow: 3px 3px 5px black;
cursor:pointer;
transition: 0.5s all;
}

@media screen and (min-aspect-ratio : 1.1) {
.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;
}
.Elements {
background-color: white;
margin-inline-start: 1.8vw;
height:80vh;
max-width: 84%;
object-fit: contain;
}
.iframe-container {
position: relative;
top: 10%;
left: -14%;
padding-top:55%;
margin-bottom: 32vh;
width:80%;
}
#selfie{
position: absolute;
top: 0;
left: 0;
transform-origin: center;
transform: rotate(90deg) scale(1.1);
width:100%;
height:83%;
}

#VideoPresentation1{
margin-left: 2vw;
}
.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: 3vh;
margin-left: -10vw;
text-align:justify;
font-size:2.8vh;
max-width: 50vw;
object-fit: contain;
}
figure {
max-width: 46vw;
margin-inline: auto;
}  
.controles {
width: 100%;
}
.precedent {
margin-left: -4%;
}
.suivant {
margin-left: 88%;
}
.texte {
text-align:center;
position: relative;
width:90%;
margin-top: 0;
margin-bottom: 0;
top: -5vh;
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;
}
.Titre {
margin-left: 10vw;
font-size:3.5vh;
font-family: "Exo-Bold";
}
.soustitre {
height:100%;
margin-top: -2vh;
margin-left: 0;
padding-right: 2%;
text-align:justify;
font-size:3.5vh;
max-width: 45vw;
object-fit: contain;
}
.Principal {
font-size:2.5vw;
}
.VideoPresentation {
float: left;
width: 45vh;
}
}

@media screen and (min-width: 1020px) and (min-height : 1090px) {
.iframe-container {
position: relative;
top: 25vh;
margin-left: 20vw;
margin-top: 15vh;
padding-top:100%;
margin-bottom: 26vh;
width:100%;
height:inherit;
}
#selfie{
position: absolute;
top: 0;
left: 0;
transform-origin: center;
transform: rotate(90deg) scale(1.8);
width:100%;
height:177%;
max-height: 38vw;
max-width: 60vw;
}
}