:root {
	/*declaration des variables de couleur*/
	--blanc : White;
	--noir : black;
	--rouge-maj : #850606;
    --rouge-clair : #e70000;
    --rouge-fonce : #310f0f;
    --maj-A : #220013;
    --clair-A : #6f003f;
    --fonce-A : #11010a;
    --maj-B : #58012c;
    --clair-B : #ae0056;
    --fonce-B : #200914;
    --maj-C : #a42801;
    --clair-C : #ff3d00;
    --fonce-C : #451e11;
    --maj-D : #d66007;
    --clair-D : #ff6f00;
    --fonce-D : #6b4324;
    --vert : #57d53b;
}

html{
    font-family: "LT Remark", Manuale, Calibri, serif/*Open Sans, Tahoma, Verdana, sans-serif*/;
    scroll-behavior: smooth;
    font-size: 1.2rem;
}
h1,h2,h3,h4,h5,h6 {
    font-family: "FoglihtenNo07","LT Remark",Manuale, serif;
}

body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	display: flex;
    overflow: hidden;
  	background-color: var(--maj-A) ;
}

h1::-moz-selection, h1::selection, h2::-moz-selection, h2::selection, h3::-moz-selection, h3::selection, a::-moz-selection, a::selection, p::-moz-selection, p::selection, li::-moz-selection, li::selection {
    color: var(--noir);
    background-color: var(--vert);
}

#screen {
    width: 100vw;
	min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    position: relative;
}

.page {
    display: block;
    scroll-snap-align: start none;
    scroll-margin-block: 0px;
    width: 100vw;
    min-height: 100vh;
}

#first_page {
    background-image: radial-gradient(var(--rouge-clair), var(--rouge-maj)) ;
    text-align: center;
    overflow: hidden;
}

#foot {
    background-color: var(--violet);
    color: var(--blanc);
}


#second_page {
    display: flex;
    flex-wrap: nowrap;
    overflow-y: hidden;
    flex-direction: row;
}

@media screen and (orientation: landscape) {
    #second_page {
        overflow-x: hidden;
    }
}

@media screen and not (orientation: landscape) {
    #second_page {
        overflow-x: scroll;
    }
}

article {
    flex: 0 0 auto;
    width: 100vw;
    height: 100vh;
    overflow: clip;
    cursor: pointer;
    transition: width 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#logo {
    position: absolute; /* parce que le contenant est "relative" sinon ca marche pas !*/
    z-index: 2;
    height: 70vh;
    top: 15vh;
    left: 20vw;
}

#los01 {
    position: absolute; /* parce que le contenant est "relative" sinon ca marche pas !*/
    z-index: 2;
    width:  10vw;
    top: 20vh;
    left: 75vw;
    opacity: 20%;
    animation: mirro01 10s infinite alternate;
}

@keyframes mirro01 {
    0% {opacity: 20%;}
    30% {opacity: 40%;}
    70% {opacity: 60%;}
    100% {opacity: 20%;}
}

#los02 {
    position: absolute; /* parce que le contenant est "relative" sinon ca marche pas !*/
    z-index: 2;
    width:  5vw;
    top: 8vh;
    left: 80vw;
    opacity: 30%;
    animation: mirror02 4s infinite;
}

@keyframes mirror02 {
    0% {opacity: 30%;}
    50% {opacity: 10%;}
    100% {opacity: 30%;}
}

#los03 {
    position: absolute; /* parce que le contenant est "relative" sinon ca marche pas !*/
    z-index: 2;
    width:  3vw;
    top: calc(20vw + 15vh);
    left: 77vw;
    opacity: 40%;
    animation: mirror03 6s infinite;
}

@keyframes mirror03 {
    0% {opacity: 40%;}
    50% {opacity: 20%;}
    100% {opacity: 40%;}
}

#los04 {
    position: absolute; /* parce que le contenant est "relative" sinon ca marche pas !*/
    z-index: 2;
    width:  4vw;
    top: 19vh;
    left: 84vw;
    opacity: 30%;
    animation: mirror04 18s infinite alternate;
}

@keyframes mirror04 {
    0% {opacity: 30%;}
    25% {opacity: 5%;}
    50% {opacity: 30%;}
    75% {opacity: 55%;}
    100% {opacity: 30%;}
}

#los05 {
    position: absolute; /* parce que le contenant est "relative" sinon ca marche pas !*/
    z-index: 2;
    width:  8vw;
    top: 60vh;
    left: 90vw;
    opacity: 60%;
    animation: mirror05 7s infinite;
}

@keyframes mirror05 {
    0% {opacity: 60%;}
    50% {opacity: 40%;}
    100% {opacity: 60%;}
}

#los06 {
    position: absolute; /* parce que le contenant est "relative" sinon ca marche pas !*/
    z-index: 2;
    width:  6vw;
    top: 48vh;
    left: 84vw;
    opacity: 20%;
    animation: mirror06 5s infinite;
}

@keyframes mirror06 {
    0% {opacity: 20%;}
    50% {opacity: 30%;}
    100% {opacity: 20%;}
}

#los07 {
    position: absolute; /* parce que le contenant est "relative" sinon ca marche pas !*/
    z-index: 2;
    width:  6vw;
    top: 25vh;
    left: 65vw;
    opacity: 10%;
    animation: mirror07 20s infinite;
}

@keyframes mirror07 {
    0% {opacity: 10%;}
    50% {opacity: 25%;}
    100% {opacity: 10%;}
}

#titre {
    position: relative;
    width: 100vw;
    top: 50vh;
    left: 0;
    margin: 0;
    z-index: 4;
}

#first_page p {
    color: var(--blanc);
    font-style: italic;
    padding: 0;
    margin: 0;
    position: relative;
    top: calc(50vh + 1vw);
    z-index: 3;
}
/*
h1 {
    font-family: "mutlu";
    font-style: normal;
    padding: 0;
    margin: 0;
    font-size: 9vw;
    color: var(--blanc);
    text-shadow: 0 1vh 1vh var(--violet);
    position: relative;
    top: 45vh;
    z-index: 3;
}
*/

h1 {
    margin: 0;
    padding: 0;
}

h2 {
    color: var(--blanc);
    text-align: center;
    font-size: 3rem;
    margin: 1em;
    transition: 0.1s;
}

h3 {
    color: var(--blanc);
    text-align: center;
    font-size: larger;
    margin: 2em;
}

p, li, a, button {
    font-size:medium;
    color: var(--blanc);
}

article p {
    padding: 1em 5vw 1em 5vw;
    color: var(--blanc);
}

a {
    outline: none;
    color: var(--blanc);
    text-decoration: none;
    text-decoration-line: underline;
    text-decoration-color: var(--vert); 
    transition: 0.1s;
}

a:hover {
    color: var(--vert);
}

a:visited {
    text-decoration-color: var(--noir);
}

li {
    color: var(--blanc);
}
nav {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 0;
    justify-content: center;
    width: 100vw;
}

@media not (orientation: landscape) {
    nav {
        flex-direction: column;
    }
}

nav a {
    margin: 0.5em 5vw 0 5vw;
    text-decoration: none;
    color: var(--blanc);
}

article img {
    margin: auto;
    margin-top: 2vh;
    margin-bottom: 1vh;
    width: 20vw;
}


#lien_lfw {
    display: block;
    text-align: center;
    cursor: pointer;
    border: none;
    width: 20vw;
    min-width: 200px;
    min-height: 2vw;
    min-height: 20px;
    margin: 5vh auto;
    padding: 0;
    background-color: var(--clair-B);
    box-shadow: 0 0 0 var(--vert);
    transition: box-shadow 0.1s;
}

#lien_lfw p {
    text-decoration: none;
    color: var(--blanc);
}

#lien_lfw_a {
    text-decoration: none;
}

#lien_lfw:hover {
    box-shadow: 0 0.2em 0 var(--vert);
}

#propos {
    background-image: linear-gradient(var(--maj-A),var(--fonce-A));
}

#lfw {
    background-image: linear-gradient(var(--maj-B),var(--fonce-B));
}

#valeur {
    background-image: linear-gradient(var(--rouge-maj),var(--rouge-fonce));
}

.block_foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
}

aside {
    padding: 0 5vw 0 5vw;
    max-height: 50vw;
}

.aIcon {
    outline: none;
    text-decoration: none;
}

ul {
    list-style: square;
}

aside img {
    width: 10vw;
    box-shadow: 0 0 0vw var(--vert);
    background: none;
    transition: 0.2s;
}

aside img:hover {
    width: 10vw;
    box-shadow: 0 0 2vw var(--vert);
    background-color: var(--vert);
}


/*-- Adaptation verticale article --*/
@media screen and not (orientation: landscape) {
    #second_page {
        height: auto;
        min-height: 100vh;
    }
    .block_foot {
        flex-direction: column;
    }
    section {
        width: 100vw;
    }
    article img {
        width: 25vw;
    }
}