:root{
    --white:#f0f0f0;
    --white-transparent: rgb(255,255,255,25%);
    --white-more-transparent: rgb(255,255,255,5%);
    --black:#121212;
    --facts-gradient: linear-gradient(#080808,#001d44);
    --grey-border-promo: #ACACAC;
    --border-ytb-btn: #d80000;
    --ytb-btn-bg: rgb(255,0,0,40%);
    --link-blue:#0500ae;
    --btn-blue-transparent: rgba(47,0,255,80%);
    --btn-blue-more-transparent: rgba(47,0,255,20%);
    --btn-blue-border: #0084ff;
    --instagram-pink: #ee2a7b;
    --instagram-pink-transparent: rgba(238,42,123,40%);
    --x-black: #000;
    --x-black-transparent: rgba(0,0,0,40%);
    --tiktok-blue: #00f2ea;
    --tiktok-blue-transparent: rgba(0, 242, 234,40%);

}

html{
    scroll-behavior: smooth;
}
body{
    margin: 0;
    padding: 0;
    background-color: var(--white);
}
i{
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    margin: 0px 0px 8px 10px;

}
i.activeDropdown{
    transform: rotate(225deg);
    margin: 3px 0px 0px 10px;
}
.body--color i{
    margin: 3px 0px 0px 10px;
}

h1,h2,h3{
    margin-block-start: 0;
    margin-block-end: 0;
}
button{
    border: none;
    background-color: transparent;
    padding: 0;
    padding-block: 0;
    padding-inline: 0;
    margin: 0;
    box-sizing: content-box;
    width: 100px;
    font-size: 16px;
    color: var(--white);
    cursor: pointer;
}
button:hover, .section__btn button:hover, .div__btn--youtube:hover, .div__btn--instagram:hover, .div__btn--x:hover, .div__btn--tiktok:hover, .div--reseaux .div__btn--container button:hover, .section--redirect button:hover{
    background-color: #0084ff;
}
.nav__btn:hover{
    background-color:transparent;
}
img{
    width: 100%;
}
.index .div__img--container{
    width: 90%;
}
.index .div__img--container .div__img{
    background-image: url("../img/photo--intro-mobile.jpg");
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 200px;
    border-radius: 20px;

}
ul{
    list-style: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}
p{
    margin-block-start: 0;
    margin-block-end: 0;
}
a{
    display: inline-block;
    text-underline-offset: 3px;
}
section.radius{
    background-color: var(--white-transparent);
    border: .5px solid var(--grey-border-promo);
    width: 100%;
    margin-bottom: 5px;
    border-radius: 30px;
    box-sizing: border-box;
}
section h2{
    font-size: 32px;
    font-family: Loos-wide,sans-serif;
    font-weight: 700;
    margin: 36px 18px;
}
section p{
    font-size: 18px;
    font-family: loos-wide, sans-serif;
    font-weight: 200;
    line-height: 180%;
    margin: 0px 18px 36px 18px;
}
section p:last-of-type{
    margin: 0px 18px 72px 18px;
}
.section__div--animation{
    width: 100%;
    height: 100%;
    background-color: var(--white);
    position: absolute;
    top: 0;
    opacity: 0;
    z-index: -1;
}
.index .section--landing{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../img/landing-mobile.jpg");
    background-size: cover;
    background-position: center;
    position: sticky;
    z-index: -1;
    top: 0;
}
.index .section--landing h1{
    font-size: 18px;
    font-family: loos-extended, sans-serif;
    font-weight: 800;
    color: var(--white);
}

.index .section--intro{
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
}
.index .section--intro a{
    align-self: baseline;
    margin: 10px 0px 36px 0px;
    font-family: loos-wide,sans-serif;
    font-size: 14px;
    text-decoration: underline dotted;
    text-decoration-thickness: 10%;
    color: var(--link-blue);
}

.section--presentation, .section--univers{
    display: flex;
    flex-direction: column;
}
.section--collaborations{
    display: flex;
    flex-direction: column;
}
.section--collaborations div:last-of-type{
    width: fit-content;
    display: flex;
    justify-content: center;
    align-self: center;
}
.section--collaborations ul{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0px 0px 72px 0px;
    justify-content: center;
}
.section--collaborations li{
    width: 40%;
    margin: 18px 9px;
}
.section--collaborations li img{
    height: 50px;
}
.em--SpecialLink a{
    font-weight: 500;
    color: var(--link-blue);
    text-decoration: underline dotted;
    text-decoration-thickness: 10%;
    font-style: normal;
}
.em--SpecialBold{
    font-weight: 500;
    font-style: normal;
}


.section--social{
    display: flex;
    flex-direction: column;
}
.div__video{
    display: flex;
    flex-direction: column;
}
.div__video h3{
    order: 99;
    margin: 10px 18px 72px 18px;
    font-family: loos-normal,sans-serif;
    font-weight: 400;
    font-size: 18px;
}
.div__video:last-of-type h3{
    margin: 10px 0px 36px 18px;
}
.div__video img{
    order: 1;
    width: 90%;
    align-self: center;
    border-radius: 20px;
}
.section__div--Youtube{
    display: flex;
    flex-direction: column;
}
.section__btn--Youtube {
    border: 2px solid var(--btn-blue-border);
    background-color: var(--btn-blue-transparent);
    padding: 10px 20px;
    border-radius: 20px;
    font-family: loos-normal,sans-serif;
    font-weight: 500;
    align-self: center;
    margin-bottom: 72px;
    width: 130px;
    cursor: pointer;
}
/*.Youtube button:hover{

}*/
.div--reseaux{
    display: flex;
    flex-direction: column;
}
.div--reseaux h2{
    align-self: flex-start;
}
.div--reseaux div{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.div--reseaux button, .section__btn{
    border-radius: 20px;
    font-family: loos-normal,sans-serif;
    font-weight: 500;
    margin: 0px 9px 18px 9px;
    border: 2px solid var(--btn-blue-border);
    background-color: var(--btn-blue-transparent);
    width: fit-content;
    color: var(--white);
    text-decoration: none;
    width: fit-content;
    padding: 10px 20px;
}
.index .div--reseaux button{
    width: 110px;
}

.div--reseaux button:nth-child(4), .div--reseaux button:nth-child(3){
    margin-bottom: 72px;
}
.div--reseaux .div__btn--container:last-of-type{
    margin-bottom: 72px;
}




.section--redirect p:last-of-type{
    margin-bottom:0px ;
}
.index .section--redirect a{
    margin-left: 18px;
    font-size: 18px;
    font-family: loos-wide, sans-serif;
    font-weight: 200;
    line-height: 180%;
    text-decoration:underline dotted;
    text-decoration-thickness: 10%;
    margin-bottom: 72px;
    color: var(--link-blue);
}

#Intro, #Naissance, #Univers, #Collabs, #Reseaux, #problem1, #problem2{
    scroll-margin-top: 55px;
}

nav{
    display: flex;
    justify-content: space-between;
    background-color: var(--white-transparent);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: .5px solid var(--grey-border-promo);
    height: 50px;
    align-items: center;
    width: 100%;
    border-radius: 0px 0px 20px 20px;
    box-sizing: border-box;
    visibility: hidden;
    position: fixed;
    top: 0px;
    z-index: 99;
    transition: 100ms ease;
}

@keyframes navDrop{
    0%{
        top: -100px;
        visibility: hidden;
    }
    100%{
        top: 0px;
        visibility: visible;
    }
}
@keyframes navUp{
    0%{
        top: 0px;
        visibility: visible;
    }
    100%{
        top: -100px;
        visibility: hidden;
        
    }
}



nav ul{
    display: none;
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}
nav h2{
    margin-left: 18px;
    font-family: loos-extrawide, sans-serif;
    font-size: 12px;
    font-weight: 400;
    align-self: center;
}

nav button{
    display: inline-block;
    margin-right: 18px;
    width: fit-content;
    font-size: 22px;
    color: var(--black);
    cursor: pointer;
}
nav button::before{
    content: "\2630";
}
nav ul{
    justify-content: space-evenly;
    font-family: loos-extrawide,sans-serif;
    font-weight: 700;
    font-size: 18px;
}
nav ul li:nth-of-type(2) a{
    color: var(--black);
}
nav.active{
    height: 100vh;
    transition: 300ms ease;
}
nav.active button::before{
    content: "\2715";
}
nav.active{
    flex-direction: column;
    justify-content: space-evenly;
}
nav.active ul{
    display: flex;
    flex-direction: column;
    height: 90vh;
}
nav ul li a{
    text-decoration: underline dotted;
    text-decoration-thickness: 10%;
    text-underline-offset: 5px;
    color: var(--link-blue);
}
nav.active .span{
    text-decoration: underline dotted;
    text-decoration-thickness: 10%;
    text-underline-offset: 5px;
}
nav ul li{
    cursor: pointer;
}
nav.active ul li:nth-of-type(1) a{
    display: none;
    font-size: 16px;
    color: var(--black);
    margin-left: 18px;
    cursor: pointer;
}
.index nav.active ul li.activeDropdown{
    margin-top: 54px;
}
.critique nav.active ul li.activeDropdown{
    margin-top: 54px;
}
.facts nav.active ul li.activeDropdown{
    margin-top: 72px;
}
.index nav.active ul li.activeDropdown,.critique nav.active ul li.activeDropdown, .facts nav.active ul li.activeDropdown{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
nav.active ul li.activeDropdown a{
    display: inline;
}
.index nav.active ul li:nth-of-type(2) a{
    color: var(--black);
}
nav div{
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}
nav div:first-of-type{
    height: 50px;
}
nav div.div--container{
    align-items: baseline;
}
nav ul li .div--span{
    justify-content: flex-start;

}nav ul li.activeDropdown .div--container{
    display: flex;
    flex-direction: column;
    border-radius: 0px 0px 20px 20px;
}
nav ul li .div--container a{
    margin-bottom: 36px;
}
nav ul li .div--container a:first-of-type{
    margin-top: 36px;
}
.stop-scrolling{
    height: 100%;
    overflow: hidden;
}





footer{
    border: .5px solid var(--grey-border-promo);
    background-color: var(--white-transparent);
    width: 100%;
    border-radius: 20px 20px 0px 0px;
    padding: 36px 0px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
footer a{
    color: var(--black);
    font-size: 14px;
    text-decoration: underline dotted;
    text-decoration-thickness: 10%;
    font-family: loos-wide,sans-serif;
    font-weight: 500;
    display: block;
}
.div--credits{
    display: flex;
    font-size: 11px;
    font-family: loos-wide,sans-serif;
    font-weight: 500;
    align-self: center;
    margin-top: 36px;
    justify-content: space-evenly;
    width: 95%;
}
.div--credits img{
    width: 30px;
}
.footer__a{
    width: 95%;
    display: flex;
    justify-content: space-around;
}
.footer__a div:nth-of-type(1),.footer__a div:nth-of-type(2){
    display: flex;
    flex-direction: column;
}
.footer__a div:nth-of-type(1) a:first-of-type, .footer__a div:nth-of-type(2) a:first-of-type{
    margin-bottom: 18px;
}



.critique .section__div--animation{
    z-index: auto;
}
.critique nav.active ul li:last-of-type{
    margin-bottom: 144px;
}
.critique nav.active ul li.activeDropdown .div--container{
    margin-top: 36px;
}
.critique nav.active ul li:nth-of-type(1) a{
    display: inline-block;
    margin-left: 0px;
}
.critique nav.active ul li a{
    color: var(--link-blue);
}
.critique .section--landing{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.critique .section__h1{
    margin: 0px 0px 0px 18px;
    font-family: articulat-cf, sans-serif;
    font-weight: 900;
    font-size: 32px;
    line-height: 150%;
    align-self: baseline;
}
.critique .section__h1--underline{
    display: block;
    width: fit-content;
    font-style: normal;
}
.critique .section__h1--underline::after{
    position: relative;
    top: 20px;
    left: -135px;
    content: url("../img/Wavy__4.svg");
    width: fit-content;
    z-index: -1;
}
@media (max-width: 370px){
    .critique .section__h1--underline::after{
        top: 20px;
        left: -135px;
    }
}
.critique .section__btn--scrolldown{
    border: 1px solid var(--black);
    height: 80px;
    width: 50px;
    border-radius: 21px;
    margin-top: 80px;
    color: #000;
    font-size: 40px;
    cursor: pointer;
}
.critique .section__h3{
    font-family: articulat-cf,sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0px 0px 36px 18px;
    line-height: 70%;
}
.critique .section__h3::after{
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    content: url("../img/Wavy__3.svg");
    
}
.critique .section--problem{
    position: relative;
}
.critique section.section--problem:nth-of-type(2){
    margin-top: 36px;
}
.critique .section--problem:nth-of-type(3) .section__h3::after{
    content: url("../img/Wavy__3-2.svg");
}
.critique .section__p:nth-of-type(1){
    background-color: #ffe4e4;
    padding: 18px 18px 0px 40px;
    border-radius: 70px 0px 0px 0px;
}
.critique section p.section__p:nth-of-type(2){
    background-color: #ffe4e4;
    padding: 18px 18px 18px 40px;
    border-radius: 0px 0px 0px 25px;
    margin: 0px 0px 0px 18px;
}
.critique .section__p:nth-of-type(1)#text,.section__p:nth-of-type(2)#text{
    width: 336px;
}
.critique .section__p, .critique .section__p--solution{
    font-family: articulat-cf,sans-serif;
    font-weight: 400;
    font-size: 18px;
    margin: 0px 0px 0px 18px;
}
.critique section p.section__p--solution{
    font-weight: 700;
    background-color: #ffd1d1;
    padding: 18px;
    margin: 0px 0px 72px 0px;
    border-radius: 25px 25px 70px 0px;
}
.critique .section__div{
    height: 100%;
    position: relative;
}
.critique .section__div--line{
    content: "";
    width: 6px;
    height: 100%;
    position: absolute;
    border-right: 1px var(--black) solid;
    left: 36px;
}
.critique .section__div--line::after{
    display: block;
    position: absolute;
    bottom: -3px;
    left: 4px;
    content: "";
    width: 5px;
    height: 5px;
    background-color: var(--black);
    transform: rotate(45deg);
}
.critique .section--redirect{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.critique .section--redirect .section__h3{
    display: block;
    margin: 0;
    text-align: center;
    margin-bottom: 24px;
    padding-top: 30px;
}
.critique .section--redirect .section__h3::after{
    filter: invert(13%) sepia(87%) saturate(7461%) hue-rotate(256deg) brightness(93%) contrast(144%);
}
.critique .section--redirect .section__h3:last-of-type{
    margin-top: 18px;
}


.critique .section__btn a, .facts .section__btn a{
    text-decoration: none;
    color: var(--white);
    padding: 10px 20px;
}
.critique .section__btn{
    margin-bottom: 72px;
}
nav.nav--bg{
    visibility: hidden;
    border-radius: 0px;
    border: none;
    background-color: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 99;
}
nav.nav--bg h2{
    font-family: articulat-cf,sans-serif;
    font-weight: 800;
}
nav.nav--bg ul {
    font-family: articulat-cf,sans-serif;
    font-weight: 700;
}
.critique nav.active ul{
    width: 50%;
    margin-top: 18px;
}
.section__grid, .div__grid{
    display: grid;
    position: absolute;
    height: 100vh;
    width: 100%;
    grid-template-columns:minmax(18px, 18px) repeat(10,10%);
    grid-template-rows: minmax(0px,0px) repeat(5,20%);
    z-index: -1;
}
.section__grid div, .div__grid div{
    background-color: #d80000;
    width: 100%;
    height: 100%;
    opacity: 5%;
}
.section__grid div:nth-of-type(1), .div__grid div:nth-of-type(1){
    grid-row: 2/3;
    grid-column: 2/3;
}
.section__grid div:nth-of-type(2), .div__grid div:nth-of-type(2){
    grid-row: 2/3;
    grid-column: 10/11;
}
.section__grid div:nth-of-type(3), .div__grid div:nth-of-type(3){
    grid-row: 6/7;
    grid-column: 10/11;
    border-radius: 0px 0px 15px 0px;
}
.section__grid div:nth-of-type(4), .div__grid div:nth-of-type(4){
    grid-row: 6/7;
    grid-column: 2/3;
    border-radius: 0px 0px 0px 15px;
}
.section__grid div:nth-of-type(5), .div__grid div:nth-of-type(5){
    grid-row: 3/5;
    grid-column: 3/5;
    border-radius: 0px 0px 15px 0px;
}
.section__grid div:nth-of-type(6), .div__grid div:nth-of-type(6){
    grid-row: 3/5;
    grid-column: 8/10;
    border-radius: 20px 0px 0px 0px ;
}
.section__grid div:nth-of-type(7), .div__grid div:nth-of-type(7){
    grid-row: 5/6;
    grid-column: 6/8;
    border-radius: 0px 0px 20px 0px;
}
.section__grid div:nth-of-type(8), .section__grid div:nth-of-type(9), .div__grid div:nth-of-type(8), .div__grid div:nth-of-type(9){
    display: none;
}
.div--bgfixed .div__grid div{
    background-color: #0900ff;
    filter: blur(25px);
    -webkit-filter: blur(25px);
}

.critique .section--redirect .section__grid{
    height: 100%;
    overflow-x: hidden;
}
.critique .section--redirect .section__grid div{
    background-color: #2f00ff;
}
.critique .section--redirect .section__grid div:nth-of-type(1){
    grid-row: 2/4;
    grid-column: 1/12;
}

.footer--bg{
    background-color: var(--white);
    border: none;
    border-radius: 0;
}
footer.footer--bg .footer__a a{
    font-family: articulat-cf,sans-serif;
    font-weight: 600;
    text-decoration: none;
}
.footer--bg .footer__a div:first-of-type a:nth-of-type(1):after{
    display: block;
    content: "";
    background-image: url("../img/Underline__wavy--ytb.svg");
    background-repeat: no-repeat;
    height: 4px;
    width: 110%;
    position: relative;
    left: -2px;
}
.footer--bg .footer__a div:first-of-type a:nth-of-type(2):after{
    display: block;
    content: "";
    background-image: url("../img/Underline__wavy--tiktok.svg");
    background-repeat: no-repeat;
    height: 4px;
    width: 110%;
    position: relative;
    left: -2px;
}
.footer--bg .footer__a div:last-of-type a:nth-of-type(1):after{
    display: block;
    content: "";
    background-image: url("../img/Underline__wavy--instagram.svg");
    background-repeat: no-repeat;
    height: 4px;
    width: 110%;
    position: relative;
    left: -2px;
}
.footer--bg .footer__a div:last-of-type a:nth-of-type(2):after{
    display: block;
    content: "";
    background-image: url("../img/Underline__wavy--x.svg");
    background-repeat: no-repeat;
    height: 4px;
    width: 110%;
    position: relative;
    left: -2px;
}
.footer--bg .footer__a a:after{
    display: block;
    content: "";
    background-image: url("../img/Underline__wavy--mail.svg");
    background-repeat: no-repeat;
    height: 4px;
    width: 115%;
    position: relative;
    left: -2px;
}




body.body--color{
    color: var(--white);
    background-color: #001d44;
}
.body--color i {
    border-color: var(--white);
    position: relative;
    bottom: 3px;
}
.body--color i.activeDropdown{
    top: 1px;
} 
.body--color nav{
    background-color: var(--white-more-transparent);
    border-color: #383C54;
}
.body--color nav h2{
    font-family: normalidad-wide,sans-serif;
    font-weight: 400;
}
.body--color nav .nav__btn{
    color: var(--white);
}
.body--color nav ul{
    font-family: normalidad-wide,sans-serif;
    font-weight: 700;
}
.body--color nav ul li a{
    color: var(--tiktok-blue);
    text-decoration: underline dotted;
    text-decoration-thickness: 10%;
}
.body--color nav ul li:nth-of-type(1) a, .body--color span{
    color: var(--white);
    text-decoration: underline dotted;
    text-decoration-thickness: 10%;
    text-underline-offset: 5px;
}

.facts .section__div--animation{
    background-image:none;
    background-color: transparent;
}
.facts .div--bgfixed{
    width: 100%;
    height: 100vh;
    background-image:linear-gradient(#080808 3%,#001D44);
    position: fixed;
    z-index: -99;
}
.facts .section--landing{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: sticky;
    z-index: -1;
    top: 0;
}
.facts .section--landing .section__h1{
    align-self: center;
    margin: 0;
    font-family: normalidad-text,sans-serif;
    font-weight: 700;
    font-size: 43px;
    color: var(--white);

}
.div--articleContainer{
    display: flex;
    flex-direction: column;
}
.article__article--container, .facts .section--redirect{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--white-more-transparent);
    border-radius: 20px;
    margin-bottom: 5px;
    border: .5px solid #383C54;
    padding-bottom: 72px;
    box-sizing: border-box;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}
.article__article{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.article__div{
    margin:0px 18px;
}
.article__article .article__div{
    margin:0px 18px 24px 18px;
}
.article--container .article__article--container:first-of-type > .article__div{
    margin-top: 72px;
}
.article__h3, .facts .section__h3{
    font-family: normalidad-wide,sans-serif;
    font-size: 32px;
    font-weight: 300;
    margin: 36px 18px;
}
.article__h4--average{
    width: 100%;
    text-align: center;
    font-family: normalidad-wide,sans-serif;
    font-size: 18px;
    font-weight: 300;
}
.article__h4, .article__h5{
    font-family: normalidad-wide,sans-serif;
    font-size: 14px;
    font-weight: 300;
}
.article__p{
    font-family: normalidad-wide,sans-serif;
    font-size: 24px;
    font-weight: 300;
}

.facts .section--redirect{
    border: .5px solid;
}
.facts .section--redirect, footer.footer--color{
    background-color: var(--white-more-transparent);
    border-color: #383c54;
}
.facts .section__btn{
    border-color: var(--btn-blue-transparent);
    background-color: var(--btn-blue-more-transparent);
}
.facts .section__btn a{
    color: var(--white);
}
.facts .section__h3{
    font-size: 24px;
    text-align: center;
}
.facts .section__h3:last-of-type::after{
    background-repeat: repeat-x;
}

.footer--color .footer__a a{
    color: var(--white);
}
.footer--color .div--credits img{
    filter: invert(100%) sepia(95%) saturate(22%) hue-rotate(187deg) brightness(117%) contrast(88%);

}



@media (min-width: 768px){
    button{
        font-size: 18px;
    }

    section.radius{
        background-color: var(--white-transparent);
        border: 1px solid var(--grey-border-promo);
        width: 100%;
        margin-bottom: 10px;
        border-radius: 50px;
        box-sizing: border-box;
    }
    section h2{
        font-size: 46px;
        font-family: Loos-wide,sans-serif;
        font-weight: 700;
        margin: 54px 72px;
        align-self: baseline;
    }
    section p{
        font-size: 26px;
        font-family: loos-wide, sans-serif;
        font-weight: 200;
        line-height: 180%;
        margin: 0px 72px 36px 72px;
    }
    section p:last-of-type{
        margin: 0px 72px 72px 72px;
    }

    .index .section--landing h1{
        font-size: 26px;
    }
    .index .section--landing{
        background-image: url("../img/landing-tablet.jpg");
    }

    .index .section--intro a{
        margin: 10px 0px 36px 72px;
        font-size: 18px;
    }
    .index .div__img--container{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .index .div__img--container .div__img{
        background-image: url("../img/photo--intro-tablet.jpg");
        background-position: center;
        background-size: cover;
        width: 80%;
        height: 400px;
        border-radius: 20px;
    
    }

    .section__div--Youtube{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .section__div--Youtube button{
        padding: 15px 20px;
        width: 150px;
        border-radius: 30px;
    }
    .div__video--container{
        display: flex;
        justify-content: space-between;
    }
    .div__video{
        width: 38%;
        margin: 0px 0px 0px 72px;
    }
    .div__video:last-of-type{
        margin: 0px 72px 0px 0px;
    }
    .div__video img{
        width: 100%;
    }
    .div__video h3{
        margin: 10px 0px 72px 0px;
        font-family: loos-normal,sans-serif;
        font-weight: 400;
        display: inline-block;
    }
    .div__video:last-of-type h3{
        margin: 10px 0px 36px 0px;
    }

    .div--reseaux button{
        height: fit-content;
        width: 150px;
        margin: 0px 36px 36px 36px;
        border-radius: 30px;
        cursor: pointer;
        padding: 15px 20px;
    }
    .div--reseaux button a{
        padding: 15px 20px;
    }
    .div--reseaux button:last-of-type{
        margin: 0px 36px 72px 36px;
    }
    .div--reseaux h2{
        align-self: center;
    }
    .div__btn--container{
        width: 100%;
    }

    .index .section--redirect a{
        margin-left: 72px;
        font-size: 26px;
    }
    nav{
        height: 70px;
        border-radius: 0px 0px 25px 25px;
    }
    nav h2{
        font-size: 18px;
        margin-left: 36px;
    }
    nav button{
        margin-right: 36px;
        font-size: 26px;
    }
    nav.active ul{
        font-size: 26px;
    }
    nav.active ul li:nth-of-type(1) a{
        font-size: 18px;
        margin-left: 36px;
    }
    footer a{
        font-size: 18px;
    }
    .div--credits{
        font-size: 14px;
    }
    .div--credits img{
        width: 45px;
    }
    .index footer, .facts footer{
        border-radius: 25px 25px 0px 0px;
    }


    .critique nav.active ul{
        width: 55%;
    }
    .critique nav.active ul li:nth-of-type(1) a{
        font-size: 26px;
    }
    .section__grid{
        grid-template-columns: minmax(36px, 36px) repeat(10, 10%);
    }
    .critique .section__h1{
        font-size: 65px;
        margin: 0px 0px 0px 72px;
    }
    .critique .section__btn, .facts .section__btn{
        padding: 15px 20px;
    }
    .critique .section__btn--scrolldown{
        height: 120px;
        width: 80px;
        border-radius: 31px;
        margin-top: 130px;
        font-size: 60px;
    }
    .critique .section__h3{
        font-size: 49px;
        margin: 0px 0px 36px 72px;
    }
    .critique .section--redirect .section__h3{
        padding-top: 60px;
        margin-bottom: 36px;
    }
    .critique .section__p, .critique .section__p--solution{
        font-size: 28px;
    }
    .critique .section__p:nth-of-type(1){
        padding: 36px 36px 0px 110px;
        border-radius: 100px 0px 0px 0px;
    }
    .critique section p.section__p:nth-of-type(2){
        padding: 36px 36px 36px 110px;
    }
    .critique .section--problem .section__p:nth-of-type(1), .critique section p.section__p:nth-of-type(2){
        margin-left: 144px;
    }
    .critique section p.section__p--solution{
        margin: 0px 0px 144px 0px;
        padding: 36px;
    }
    .critique .section__div--line{
        left: 184px;
    }
    .critique .section__btn{
        border-radius: 40px;
    }
    .critique .section__btn a{
        padding: 20px 40px;
        font-size: 24px;
    }
    .critique .section__h1--underline::after{
        top: 40px;
        left: -280px;
        content: url("../img/Wavy__4-2.svg");
    }
    .critique .section__h3::after{
        content: url("../img/Wavy__3-2-2.svg");
    }
    .critique .section--problem:nth-of-type(3) .section__h3::after{
        content: url("../img/Wavy__3-1-1.svg");
    }
    .footer--bg .footer__a div:first-of-type a:nth-of-type(1):after{
        background-image: url("../img/Underline__wavy--ytb-2.svg");
    }
    .footer--bg .footer__a div:first-of-type a:nth-of-type(2):after{
        background-image: url("../img/Underline__wavy--tiktok-2.svg");
    }
    .footer--bg .footer__a div:last-of-type a:nth-of-type(1):after{
        background-image: url("../img/Underline__wavy--instagram-2.svg");
    }
    .footer--bg .footer__a div:last-of-type a:nth-of-type(2):after{
        background-image: url("../img/Underline__wavy--x-2.svg");
    }
    .footer--bg .footer__a a:after{
        background-image: url("../img/Underline__wavy--mail-2.svg");
    }




    .facts .section--landing{
        margin-bottom: 10px;
        
    }
    .facts .section--landing .section__h1{
        font-size: 57px;
    }
    .article__article--container, .facts .section--redirect{
        margin-bottom: 10px;
        border-radius: 40px;
    }
    .article__article{
        width: 70%;
    }
    .article__h3{
        font-size: 43px;
        margin: 72px 0px;
    }
    .article__h4--average{
        font-size: 32px;
    }
    .article__h4, .article__h5{
        font-size: 18px;
    }
    .article__div .article__p{
        font-size: 32px;
    }
    .article__div, .article__article .article__div{
        margin: 0px 0px 72px 0px;
    }
    .facts .section__btn{
        border-radius: 40px;
    }
    .facts .section__btn a {
        font-size: 24px;
        padding: 20px 40px;
    }
    .facts .section__h3{
        font-size: 32px;
        margin: 72px 0px 36px 0px;
    }
    .div--credits{
        width: 45%;
    }
}
@media (min-width: 1440px){
    nav{
        backdrop-filter: none;
        border: none;
        border-radius: 0px 0px 50px 50px;
    }
    nav::before{
        backdrop-filter: blur(25px);
        content: "";
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        border-radius: 0px 0px 50px 50px;
        box-sizing: border-box;
    }
    .index nav::before{
        border: .5px solid var(--grey-border-promo);
    }
    .facts nav::before{
        border: .5px solid #383C54;
    }
    nav div{
        width: fit-content;
    }
    nav div:first-of-type{
        height: auto;
    }
    nav div button{
        display: none;
    }
    nav ul{
        display: flex;
        width: 70%;
        justify-content: space-between;
    }
    nav ul li:last-of-type{
        margin-right: 36px;
    }
    nav ul li:first-of-type a{
        display: none;
    }
    nav ul li:first-of-type a.active{
        display: block;
        margin-top: 20px;
    }
    nav ul li .div--container{
        display: none;
    }
    nav ul li.activeDropdown{
        margin-top: 0px;
    }
    nav ul li.activeDropdown .div--container{
        display: flex;
        flex-direction: column;
        position: absolute;
        background-color: var(--white-transparent);
        border: 0.5px solid #383C54;
        padding: 18px;
        width: fit-content;
        top: 69px;
        margin-right: 18px;
    }
    nav ul li.activeDropdown .div--container::before{
        content: "";
        width: 100%;
        height: 100%;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        /*background-color: var(--white-more-transparent);*/
        position: absolute;
        top: 0px;
        left: 0px;
        display: block;
        z-index: -1;
    }
    .index nav ul li.activeDropdown .div--container{
        border-color: var(--grey-border-promo);
        margin: 0;
    }



    section h2{
        font-size: 46px;
        margin: 72px 144px;
    }
    section p{
        font-size: 22px;
        width: 35%;
        margin: 0px 0px 144px 144px;
    }
    section p:last-of-type{
        margin: 0px 144px 144px 0px;
    }
    .index .section--landing{
        background-image: url("../img/landing--fsx1.jpg");
        background-size: cover;
        background-position: center;
    }
    .index .section--landing h1{
        font-size: 38px;
    }
    .index .section--intro{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .index .section--intro p{
        width: 35%;
        align-self: center;
    }
    .index section.section--intro p{
        margin: 0px 0px 144px 144px;
    }
    .index .section--intro a{
        margin: 10px 0px 144px 0px;
    }
    .index .div__img--container .div__img{
        width: 100%;
        align-self: baseline;
        background-image: url("../img/photo--intro.jpg");
    }
    .index .div__img,.index  .section--intro a{
        align-self: flex-start;
    }
    .index .div__img--container{
        width: 40%;
        margin-right: 144px;
        order: 2;
    }
    .section--presentation, .section--univers{
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .section--presentation h2{
        width: 100%;
    }
    .section--presentation div{
        width: 35%;
    }
    .section--presentation div p{
        width: 100%;
        max-width: 100%;
        margin: 0px 144px 72px 0px;
    }
    .section--presentation div p:last-of-type{
        margin: 0px 144px 144px 0px;
    }
    .section--presentation div p:first-of-type{
        margin-left: 0;
    }
    .section--presentation p:first-of-type{
        align-self: baseline;
        margin-left: 144px;
    }
    .section--univers div:first-of-type{
        display: flex;
        width: 100%;
    }
    .section--univers div:first-of-type p{
        margin-left: 144px;
        width: fit-content;
    }
    .section--univers div div{
        display: flex;
        flex-direction: column;
    }
    .section--univers div:first-of-type div p{
        margin: 0px 144px 72px 0px;
        width: fit-content;
    }

    .section--collaborations div:first-of-type{
        display: flex;
    }
    .section--collaborations p:first-of-type{
        margin-right: 144px;
    }
    .section--collaborations ul{
        margin: 0px 144px 0px 144px;
    }
    .section--collaborations ul li{
        width: 15%;
    }
    .section--collaborations__img li:nth-of-type(2) img{
        height: 45px;
    }
    .section--collaborations li:first-of-type img{
        height: 60px;
    }
    .section--collaborations .section__img{
        margin-bottom: 144px;
    }
    .div__video{
        width: 35%;
    }
    .div__video--container{
        justify-content: space-around;
    }

    .div__video h3{
        font-size: 26px;
    }
    .section--redirect p:first-of-type{
        margin-bottom: 72px;
        width: 35%;
    }
    .index .section--redirect p:last-of-type, .index .section--redirect a {
        margin-left: 144px;
    }
    .index .section--redirect a{
        margin-left: 144px;
    }
    .index footer, .facts footer{
        border-radius: 50px 50px 0px 0px;
    }
    .div--credits{
        width: 20%;
    }

    .critique nav ul{
        width: 25%;
    }
    .critique nav ul li:first-of-type a{
        display: inline-block;
    }
    .critique nav ul li:nth-of-type(2) a{
        color: var(--link-blue);
    }
    .critique nav ul li.activeDropdown .div--container{
        background-color: var(--white);
        border: none;
        border-radius: 0px;
    }
    .critique .section__h1, .section__h3{
       margin: 0px 0px 72px 144px; 
    }
    .critique .section--problem{
        display: flex;
        flex-direction: column;
    }
    .critique .section--problem:nth-of-type(3){
        align-items: center;
    }
    .critique .section--problem .section__div{
        display: flex;
        flex-direction: column;
    }
    .critique .section--problem:nth-of-type(3) .section__div{
        align-items: center;
    }
    .critique .section--problem:nth-of-type(3) .section__div .section__div--line{
        left: 474px;
    }
    .critique section p.section__p--solution{
        margin: 0px 0px 144px 72px;
        width: 50%;
    }
    .critique .section__p,.critique  .section__p--solution{
        width: 40%;
        font-size: 24px;
    }
    .section__grid{
        grid-template-columns: minmax(72px, 72px) repeat(10, 10%);
    }
    .critique .section--problem:nth-of-type(3) .section__div .section__div--line{
        left: 32%;
    }



    .facts nav ul{
        width: 50%;
        z-index: 99;
    }
    .facts nav ul li.activeDropdown .div--container{
        background-color: var(--white-more-transparent);
    }
    .facts .section--landing{
        margin-bottom: 10px;
    }
    .facts .section--landing .section__h1{
        font-size: 76px;
    }
    .article__article--container, .facts .section--redirect{
        margin-bottom: 20px;
        border-radius: 80px;
    }
    .article__article{
        justify-content: space-between;
        width: 60%;
    }
    .div--articleContainer .article__article--container:first-of-type > .article__div{
        align-self: center;
    }
    .article__article--container:first-of-type .article__article:nth-of-type(2) .article__div{
        margin-right: 72px;
    }
    .article__h3{
        font-size: 57px;
        margin: 72px 90px;
    }
    .article__h4--average{
        font-size: 43px;
    }
    .article__h4, .article__h5{
        font-size: 24px;
    }
    .article__div .article__p{
        font-size: 43px;
    }
    .article__div, .article__article .article__div{
        margin: 0px 90px 72px 90px;
    }
    .facts .section__h3{
        font-size: 43px;
        margin: 144px 72px 72px 72px;
    }
}
@media (min-width:1600px){
    .article__article{
        width: 55%;
    }
}
@media (min-width:1920px){
    .index .section--redirect p:first-of-type{
        width: 30%;
    }
    
    .article__article{
        width: 75%;
    }
}