/* ----- VARIABLES ----- */

:root{
    --color-promo-primary: #5AAF38;
    --color-bg-promo: #111111;
    --color-bg-crit: #fff;
    --color-text-promo: #fff;
    --color-text-crit: #111111;
    --color-title-promo: #6FE042;
    --color-title-primary-crit: #001478;
    --color-title-secondary-crit: #0028BE;
    --color-span-promo: #6FE042;
}

/* ----- ASSETS ----- */

html{
    scroll-behavior: smooth;
}

/* ----- PROMO PAGE ----- */

/* -- MOBILE FIRST -- */

.promo{
    margin: 0;
    padding: 0;
    font-family: "Outfit", sans-serif;
    color: var(--color-text-promo);
    background-color: var(--color-bg-promo);
    overflow-x: hidden;
}

.promo .main{
    margin: 0;
    padding: 0;
}

/* NAV PAGE */

.promo .nav--section{
    display: none;
}

.promo .menu--btn{
    width: 25px;
    height: 20px;
    position: fixed;
    top: 30px;
    right: 20px;
    z-index: 10;
    background: transparent;
    color: transparent;
    border: 0;
    cursor: pointer;
}

.promo .menu--btn i{
    display: grid;
    width: 100%;
    height: 10%;
    background: var(--color-text-promo);
    position: absolute;
    right: 0%;
    transition: all .3s;
}

.promo .menu--btn i:nth-child(1){
    top: 0%;

}

.promo .menu--btn i:nth-child(2){
    top: 50%;
    transform: translateY(-50%);
}

.promo .menu--btn i:nth-child(3){
    bottom: 0%;
}

.promo .nav__mb{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: fixed;
    padding: 0;
    margin: 0;
    background: var(--color-bg-promo);
    top: 0;
    left: 100%;
    width: 100%;
    height: calc(100% - 180px);
    transition: .3s ease-out;
    z-index: 1;
    padding: 120px 60px 60px;
}

.promo .nav__mb ul{
    margin: 0;
    padding: 0;
}

.promo .nav__list{
    list-style: none;
}

.promo .nav__list .nav__link{
    color: var(--color-text-promo);
    font-size: 51px;
    line-height: 1.4;
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
}

.promo .nav__list .nav__link--active{
    color: var(--color-title-promo);
}

.promo .nav__icon{
    list-style: none;
    position: relative;
    bottom: 30px;
}

.promo .nav__icon li{
    margin-top: 22px;
}

.promo .nav__link{
    text-decoration: none;
}

.promo .nav__item{
    margin-bottom: 71px;
}

/* open state */

.promo .nav__mb.open{
    left: 0;
}

.promo .menu--btn.open i:nth-child(1){
    top: 50%;
    transform: rotate(45deg) translateY(-50%);
    transform-origin: right center;
    width: 50%;
}

.promo .menu--btn.open i:nth-child(3){
    bottom: 50%;
    transform: rotate(-45deg) translateY(50%);
    transform-origin: right center;
    width: 50%;
}

.promo .nav--promo{
    display: flex;
    position: fixed;
    background: var(--color-bg-promo);
    height: 80px;
    width: 100%;
    z-index: 9;
}

.promo .img__logo{
    padding-top: 25px;
    padding-left: 20px;
    height: 33px;
    width: 30px;
    z-index: 2;
}

.promo .nav__item a:hover{
    color: var(--color-title-promo);
    transition: 0.3s;
}

.promo .nav--section a:hover{
    color: var(--color-title-promo);
    transition: 0.3s;
}

/* SECTION */

.promo .section--nav{
    background-image: url(../assets/images/promBg@2x.jpg);
    background-size: cover;
}

.promo .section--header{
    padding-bottom: 46px;
    padding-top: 80px;
}

.promo .section--zevent{
    background-image: url(../assets/images/promBg@2x.jpg);
    background-size: cover;
}

.promo .section--footer{
    background-image: url(../assets/images/promBg@2x.jpg);
    background-size: cover;
    padding-top: 34px;
}

/* TITLES */

.promo .title--section{
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
    padding-bottom: 34px;
    font-weight: 700;
}

.promo .title--big{
    font-size: 51px;
    line-height: 1.2;
    margin: 0;
    font-weight: 800;
}

.promo .title--second{
    line-height: 1.2;
    font-size: 38px;
    margin: 0;
    padding-bottom: 46px;
    font-weight: 700;
}

.promo .title--footer{
    font-size: 21px;
    margin: 0 0 23px 0;
    font-weight: 500;
}

.promo .section--zevent .title--second{
    padding-top: 46px;
}

/* TEXTS */

.promo p{
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
    padding: 0 0 22px 0;
}

.promo .content--esport p:nth-child(3){
    padding-bottom: 66px;
}

.promo p:last-child{
    padding-bottom: 66px;
}

.promo .section--about p:nth-child(5){
    padding-bottom: 66px;
}

.promo .section--esport p:nth-child(4){
    padding-bottom: 66px;
}

.promo .span__highlight{
    color: var(--color-span-promo);
}

.promo .a__underline{
    color: var(--color-span-promo);
    text-decoration: none;
    cursor: pointer;
}

.promo .a__underline:hover{
    text-decoration: underline;
}

.promo .figure__legende{
    font-size: 12px;
    padding-left: 20px;
    font-weight: 500;
    color: var(--color-text-crit);
}

.promo .figure--right .figure__legende{
    padding-left: 40px;
}


/* IMAGES */

.promo img{
    max-width: 100%;
}

.promo .figure{
    margin: 0 0 68px 0;
    position: relative;
    z-index: 1;
}

.promo .figure img{
    position: relative;
    left: 20px;
}

.promo .figure:before{
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 12px);
    background-color: var(--color-promo-primary);
    position: absolute;
    z-index: -1;
    left: -20px;
    bottom: -8px;
}

.promo .figure--right:before{
    left: 20px;
}

.promo .figure--right img{
    left: -20px;
}

/* FOOTER */

.promo .section--footer .footerNav{
    grid-column: 2 / span 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.promo .footerNav{
    list-style: none;
    margin: 0;
    padding: 0;
}

.promo .footerNav__el{
    margin-bottom: 34px;
}

.promo .footerNav__el a{
    text-decoration: none;
    color: var(--color-text-promo);
    font-size: 16px;
    line-height: 1.1;
}

.promo .section--footer li{
    flex-basis: 50%;
}

.promo .section--footer li:nth-child(2){
    flex-basis: calc(50% - 5px);
}

.promo .section--footer li:nth-child(4){
    flex-basis: calc(50% - 5px);
}

.promo .section--footer li:nth-child(6){
    flex-basis: calc(50% - 5px);
}

.promo .section--footer p{
    padding-bottom: 44px;
}

.promo .section--footer a{
    text-decoration: none;
    color: var(--color-text-promo);
}

.promo .section--footer a:hover{
    color: var(--color-title-promo);
    transition: 0.3s;
}

/* GRID */

.promo .gridHeader{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}

.promo .gridAbout{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}
.promo .gridZevent{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}
.promo .gridEsport{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}

.promo .gridFooter{
    display: grid;
    grid-template-columns: 30px 1fr 1fr 25px;
    column-gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.promo .gridFooter > *{
    grid-column: 1 / -1;
}

.promo .mgridFooter-start2{
    grid-column-start: 2;
}

/* -- TABLETTE -- */

@media (min-width : 768px){

    /* NAV PAGE */

    .promo .menu--btn{
        display: none;
    }
    
    .promo .nav__mb{
        display: flex;
        align-items: center;
        position: relative;
        padding: 0;
        left: 0;
        top: 28px;
        background: var(--color-bg-promo);
        z-index: 1;
    }
    
    .promo .nav__list{
        display: flex;
        list-style: none;
    }
    
    .promo .nav__list .nav__link{
        color: var(--color-text-promo);
        font-size: 16px;
        line-height: 1.4;
        margin: 0;
        font-weight: 700;
        text-transform: uppercase;
    }
    
    .promo .nav__list .nav__link--active{
        color: var(--color-title-promo);
    }

    .promo .nav__item{
        padding-left: 50px;
        padding-right: 50px;
        margin: 0;
    }
    
    .promo .nav--promo{
        display: flex;
        position: fixed;
        background: var(--color-bg-promo);
        height: 80px;
        width: 100%;
        z-index: 9;
    }

    .promo .nav__icon{
        position: fixed;
        width: 28px;
        height: 200px;
        bottom: 50px;
        left: 40px;
        z-index: 9;
    }
    
    .promo .nav__icon li{
        margin-top: 22px;
    }
    
    .promo .img__logo{
        padding-left: 40px;
    }

    .promo .nav--section{
        display: flex;
        grid-column-end: -1;
        position: fixed;
        margin: 0;
        padding: 0;
        bottom: 50px;
        right: 40px;
        z-index: 9;
    }

    .promo .nav__anchor{
        padding: 0;
        margin: 0;
    }

    .promo .nav__anchor li{
        list-style: none;
        text-transform: uppercase;
        margin-top: 10px;
    }

    .promo .nav__anchor a{
        text-decoration: none;
        color: var(--color-text-promo);
    }

    /* SECTIONS */

    .promo .section--header{
        display: flex;
        align-items: center;
        gap: 30px;
        padding: 160px 40px 40px 98px;
    }

    .promo .section--header .content--header{
        order: -1;
    }

    .promo .section--header .figure{
        max-width: 50%;
        position: relative;
        top: -50px;
    }

    .promo .figure img{
        left: 0;
        right: 0;
    }
    
    .promo .figure:before{
        content: "";
        display: block;
        width: calc(100% + 40px);
        height: 100%;
        background-color: var(--color-promo-primary);
        position: absolute;
        z-index: -1;
        top: 20px;
    }
    
    .promo .figure--right:before{
        right: 0;
    }
    
    .promo .figure--right img{
        right: 0;
    }

    .promo .section--esport{
        display: flex;
        align-items: center;
        gap: 30px;
        padding: 160px 40px 40px 98px;
    }

    .promo .section--esport .content--esport{
        order: -1;
    }

    .promo .section--esport .figure{
        max-width: 50%;
        position: relative;
        top: -50px;
    }

    /* CSS GRID */

    .promo .gridAbout{
        display: grid;
        grid-template-columns: 30px 100px repeat(4, 1fr) 76px;
        grid-template-rows: 2fr 68px 1fr;
        column-gap: 30px;
        padding: 80px 40px 50px 40px;
    }

    .promo .tgridAbout-start4{
        grid-area: 1 / 4 / 2 / -2;
    }

    .promo .tgridAbout-start3{
        grid-area: 2 / 3 / 3 / -1;
    }

    .promo .tgridAbout-start3-bot{
        grid-area: 3 / 3 / 3 / -4;
    }

    .promo .tgridAbout-start5{
        grid-area: 3 / 5 / 3 / -2;
    }

    .promo .section--about .figure{
        grid-column: 1 / -5;
        width: calc(100% + 40px);
        margin: 0;
        padding: 0;
    }
    
    .promo .section--about .figure img{
        padding-top: 100px;
        position: relative;
        left: -40px;
    }
    
    .promo .section--about .figure:before{
        content: "";
        display: block;
        width: 200px;
        height: 200%;
        background-color: var(--color-promo-primary);
        position: absolute;
        z-index: -1;
        left: -40px;
        top: -100px;
    }

    .promo .gridZevent{
        display: grid;
        grid-template-columns: 30px 2fr 1fr 1fr 76px;
        grid-template-rows: 150px 200px 1fr;
        column-gap: 30px;
        padding: 80px 40px 25px 40px;
    }

    .promo .tgridZevent-start3{
        grid-area: 1 / 3 / 3 / -1;
    }

    .promo .tgridZevent-start2-top{
        grid-area: 1 / 2 / 2 / 3;
    }

    .promo .section--zevent .title--second{
        padding-top: 0;
    }

    .promo .tgridZevent-start2-bot{
        grid-area: 3 / 2 / 4 / -3;
    }

    .promo .section--zevent .figure{
        width: calc(100% + 40px);
        margin: 0;
        padding: 0;
    }
    
    .promo .section--zevent .figure img{
        position: relative;
        left: 0px;
    }
    
    .promo .section--zevent .figure:before{
        content: "";
        display: block;
        width: 100%;
        height: calc(100% + 10px);
        background-color: var(--color-promo-primary);
        position: absolute;
        z-index: -1;
        left: 20px;
    }

    .promo .section--zevent .figure__legende{
        padding-left: 60px;
    }

    .promo .gridFooter{
        display: grid;
        grid-template-columns: 30px 1fr 1fr 1fr 76px;
        grid-template-rows: 100px 1fr;
        column-gap: 30px;
        padding: 80px 40px 25px 40px;
    }

    .promo .tgridFooter-start2-top{
        grid-area: 1 / 2 / 2 / -1;
    }

    .promo .tgridFooter-start2-bot{
        grid-area: 1 / 2 / 2 / -1;
    }

    .promo .tgridFooter-start3{
        grid-area: 1 / 3 / 2 / -1;
    }

    .promo .tgridFooter-start4{
        grid-area: 2 / 4 / 3 / -2;
    }

    .promo .section--footer .footerNav{
        display: flex;
    }

}

/* -- DESKTOP -- */

@media (min-width : 1025px) {
    .promo .title--section{
        font-size: 32px;
        line-height: 1.4;
        padding-bottom: 45px;
    }
    
    .promo .title--big{
        font-size: 76px;
    }
    
    .promo .title--second{
        font-size: 57px;
        padding-bottom: 68px;
    }
    
    .promo .title--footer{
        font-size: 24px;
        margin: 0 0 29px 0;
    }

    .promo p{
        font-size: 18px;
        padding: 0 0 25px 0;
    }

    .promo p:last-child{
        padding-bottom: 75px;
    }

    .promo .figure__legende{
        font-size: 14px;
    }
    
    .promo .footerNav__el a{
        font-size: 18px;
    }

    .promo .gridAbout{
        grid-template-columns: 30px 100px repeat(6, 1fr) 76px;
        column-gap: 60px;
    }

    .promo .dgridAbout-start1{
        grid-area: 1 / 1 / 2 / -7;
    }

    .promo .dgridAbout-start6{
        grid-area: 1 / 6 / 2 / -2;
    }

    .promo .dgridAbout-start3-bot{
        grid-area: 3 / 3 / 4 / -5;
    }

    .promo .dgridAbout-start6-bot{
        grid-area: 3 / 6 / 4 / -2;
    }
    
    .promo .section--about .figure img{
        padding-top: 0;
    }
    
    .promo .section--about .figure:before{
        width: 240px;
        height: 180%;
    }

    .promo .gridZevent{
        grid-template-rows: 150px 300px 1fr;
        column-gap: 60px;
    }

    .promo .dgridZevent-start2-bot{
        grid-area: 3 / 2 / 4 / -4;
    }

    .promo .section--zevent .figure{
        margin-top: auto;
        margin-bottom: auto;
    }
    
    .promo .section--zevent .figure img{
        width: calc(100% - 40px);
    }

    .promo .gridFooter{
        grid-template-columns: 30px 150px repeat(3, 1fr) 76px;
        padding-left: 150px;
    }
    

}

/* -- EXCEPTIONS DESKTOP -- */

@media (min-width : 1300px){
    .promo .section--header{
        gap: 200px;
    }

    .promo .section--esport{
        gap: 200px;
    }
}

@media (min-width : 1550px){
    .promo .section--header{
        gap: 300px;
    }

    .promo .section--esport{
        gap: 300px;
    }

    .promo .content--header{
        padding-left: 100px;
    }

    .promo .content--esport{
        padding-left: 100px;
    }

    .promo .dgridAbout-start3-bot{
        grid-area: 3 / 3 / 4 / -6;
    }

    .promo .dgridAbout-start6-bot{
        grid-area: 3 / 5 / 4 / -4;
    }

    .promo .gridZevent{
        grid-template-columns: 30px 1fr 150px 1fr 1fr 76px;
        padding: 80px 40px 25px 40px;
    }

    .promo .dgridZevent-start2-bot{
        grid-area: 3 / 2 / 4 / -4;
    }

    .promo .dgridZevent-start4{
        grid-area: 1 / 4 / 3 / -1;
    }
}

/* ----- CRIT PAGE ----- */

/* -- MOBILE -- */

.crit{
    margin: 0;
    padding: 0;
    font-family: "Asap Condensed", sans-serif;
    color: var(--color-text-crit);
    background-color: var(--color-bg-crit);
    overflow-x: hidden;
}

/* NAV PAGE */

.crit .menu--btn{
    width: 25px;
    height: 20px;
    position: fixed;
    top: 30px;
    right: 20px;
    z-index: 10;
    background: transparent;
    color: transparent;
    border: 0;
    cursor: pointer;
}

.crit .menu--btn i{
    display: grid;
    width: 100%;
    height: 10%;
    background: var(--color-title-secondary-crit);
    position: absolute;
    right: 0%;
    transition: all .3s;
}

.crit .menu--btn i:nth-child(1){
    top: 0%;

}

.crit .menu--btn i:nth-child(2){
    top: 50%;
    transform: translateY(-50%);
}

.crit .menu--btn i:nth-child(3){
    bottom: 0%;
}

.crit .nav__mb{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: fixed;
    padding: 0;
    margin: 0;
    background: var(--color-bg-crit);
    top: 0;
    left: 100%;
    width: 100%;
    height: calc(100% - 180px);
    transition: .3s ease-out;
    z-index: 3;
    padding: 120px 60px 60px;
}

.crit .nav__mb ul{
    margin: 0;
    padding: 0;
}

.crit .nav__list{
    list-style: none;
}

.crit .nav__list .nav__link{
    color: var(--color-title-secondary-crit);
    font-size: 51px;
    line-height: 1.4;
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
}

.crit .nav__list .nav__link--active{
    text-decoration: underline;
}

.crit .nav__icon{
    list-style: none;
    position: relative;
    bottom: 30px;
}

.crit .nav__icon li{
    margin-top: 22px;
}

.crit .nav__link{
    text-decoration: none;
}

.crit .nav__item{
    margin-bottom: 71px;
}

/* open state */

.crit .nav__mb.open{
    left: 0;
}

.crit .menu--btn.open i:nth-child(1){
    top: 50%;
    transform: rotate(45deg) translateY(-50%);
    transform-origin: right center;
    width: 50%;
}

.crit .menu--btn.open i:nth-child(3){
    bottom: 50%;
    transform: rotate(-45deg) translateY(50%);
    transform-origin: right center;
    width: 50%;
}

.crit .nav--promo{
    display: flex;
    position: fixed;
    background: var(--color-bg-crit);
    height: 80px;
    width: 100%;
    z-index: 4;
}

.crit .img__logoCrit{
    padding-top: 25px;
    padding-left: 20px;
    height: 33px;
    width: 30px;
    z-index: 9;
}

.crit .nav__item a:hover{
    text-decoration: underline;
}

/* SECTION */

.crit .section__cover{
    background-color: var(--color-bg-crit);
}

.crit .section--nav{
    background-image: url(../assets/images/critHeader@2x.jpg);
    background-size: cover;
    background-position: center;
    color: var(--color-text-promo);
}

/* TITLES */

.crit .title--big{
    display: flex;
    justify-content: flex-end;
    font-size: 51px;
    line-height: 1.2;
    margin: 0;
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    padding-bottom: 80px;
    color: var(--color-title-secondary-crit);
}

.crit .section--header .title--section{
    color: var(--color-text-promo);
    z-index: 3;
}

.crit .section--header .content--header{
    position: relative;
    z-index: 2;
}

.crit .section--problem .title--section{
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

.crit .title--section{
    font-size: 38px;
    line-height: 1.2;
    margin: 0;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-title-primary-crit);
    padding-bottom: 46px;
}

.crit .title--special{
    margin: 0;
    padding-top: 172px;
    z-index: 3;
    font-size: 67px;
    font-style: italic;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.2;
}

.crit .title--header{
    font-size: 28px;
    line-height: 1.4;
    margin: 0;
    padding-bottom: 34px;
    font-weight: 400;
    z-index: 3;
}

/* TEXTS */

.crit p{
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    padding-bottom: 22px;
}

.crit p:last-child{
    padding-bottom: 66px;
}

.crit .section--header p{
    padding-bottom: 160px;
    z-index: 3;
}

.crit .a__underline{
    color: var(--color-title-secondary-crit);
    text-decoration: none;
    cursor: pointer;
}

.crit .a__underline:hover{
    text-decoration: underline;
}


.crit .section--header .a__underline{
    color: var(--color-text-promo);
}

.crit .figure__legende{
    font-size: 12px;
    padding-left: 20px;
    font-weight: 500;
    color: var(--color-text-crit);
    z-index: 10;
    margin: 0;
}

.crit .section--extinction .figure__legende{
    color: var(--color-text-promo);
    position: relative;
    z-index: -1;
    left: 20px;
}

.crit .section--again .figure__legende{
    color: var(--color-text-promo);
    position: relative;
    z-index: -1;
    right: -20px;
}

.crit .span__highlight{
    color: var(--color-title-secondary-crit);
}

.crit .span--big{
    text-transform: uppercase;
    color: var(--color-title-secondary-crit);
    font-size: 21px;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    font-weight: 400;
}

/* IMAGES */

.crit .section--nav{
    position: relative;
    overflow: hidden;
}

.crit .section--nav:before{
    content: "";
    display: block;
    width: 80%;
    height: 100%;
    background-color: var(--color-title-secondary-crit);
    transform: skew(-12deg);
    position: absolute;
    left: -45%;
    opacity: 40%;
}

.crit .section--delusional .section__blueForm{
    position: relative;
    overflow: hidden;
}

.crit .section--problem .section__blueForm{
    position: relative;
    overflow: hidden;
}

.crit .section--delusional .section__blueForm:before{
    content: "";
    display: block;
    width: 80%;
    height: calc(100% - 3.2px);
    background-color: var(--color-title-secondary-crit);
    transform: skew(-12deg);
    position: absolute;
    right: -60%;
    top: 0;
    z-index: +1;
    opacity: 40%;
}

.crit .section--problem .section__blueForm:before{
    content: "";
    display: block;
    width: 80%;
    height: calc(100% - 17px);
    background-color: var(--color-title-secondary-crit);
    transform: skew(-12deg);
    position: absolute;
    left: -65%;
    top: 0;
    z-index: +1;
    opacity: 40%;
}

.crit .section__blueForm img{
    max-width: 100%;
    filter: grayscale(100%);
}

.crit figure{
    position: relative;
    width: calc(100% + 40px);
    left: -20px;
    margin: 0;
    padding: 0;
    margin-bottom: 46px;
}

.crit .section--problem figure{
    margin-bottom: 92px;
}

.crit .icon__guillemet{
    width: 40px;
    margin: 0;
    padding-right: 20px;
}

.crit .icon__guillemet--right{
    width: 40px;
    margin: 0;
    padding-right: 20px;
    transform: rotate(180deg);
}

.crit .section--extinction img{
    max-width: 100%;
    filter: grayscale(100%);
    position: relative;
    right: 20px;
}

.crit .section--extinction figure:before{
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 12px);
    background-color: var(--color-title-primary-crit);
    position: absolute;
    z-index: -1;
    right: -20px;
    bottom: -8px;
}

.crit .section--again img{
    max-width: 100%;
    filter: grayscale(100%);
    position: relative;
    left: 20px;
}

.crit .section--again figure:before{
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 12px);
    background-color: var(--color-title-primary-crit);
    position: absolute;
    z-index: -1;
    left: -20px;
    bottom: -8px;
}

.crit .exposed__streamer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 44px 0 22px;
}

.crit .pfpStreamer{
    overflow: hidden;
    display: flex;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;

}

.crit .pfpStreamer img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

.crit .link--top{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 22px auto 34px;
    padding: auto;
    width: 120px;
    height: 44px;
    background-color: var(--color-title-primary-crit);
    border-radius: 5px;
}

.crit .link--top a{
    text-decoration: none;
    color: var(--color-text-promo);
    text-transform: uppercase;
}



/* FOOTER */

.crit .block__footer{
    display: block;
    position: relative;
    margin-bottom: 44px;
    left: -20px;
    width: calc(100% + 40px);
    background-color: var(--color-title-primary-crit);
}

.crit .block__footer img{
    display: flex;
    margin: 22px auto 22px;
    padding: auto;
    width: 53px;
    height: 59px;
}

.crit .footerNav{
    list-style: none;
    margin: 0;
    padding: 0;
}

.crit .section--footer .footerNav{
    grid-column: 2 / span 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.crit .footerNav__el{
    margin-bottom: 34px;
}

.crit .footerNav__el a{
    text-decoration: none;
    color: var(--color-title-secondary-crit);
    font-weight: 16px;
    line-height: 1.1;
}

.crit .section--footer li{
    flex-basis: 50%;
}

.crit .section--footer li:nth-child(2){
    flex-basis: calc(50% - 5px);
}
.crit .section--footer li:nth-child(4){
    flex-basis: calc(50% - 5px);
}
.crit .section--footer li:nth-child(6){
    flex-basis: calc(50% - 5px);
}

.crit .section--footer p{
    padding-bottom: 44px;
}

.crit .nav__icon--footer{
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
}

.crit .section--footer .copyright{
    display: flex;
    justify-content: center;
    padding: auto;
    font-size: 16px;
    color: var(--color-text-promo);
    font-weight: 300;
    font-weight: 1.2;
}

.crit .section--footer a:hover{
    text-decoration: underline;
}

/* GRID */

.crit .gridHeader{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}

.crit .gridDelusional{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}

.crit .gridProblem{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}

.crit .gridExtinction{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}

.crit .gridAgain{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}

.crit .gridDrama{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}

.crit .gridFooter{
    display: grid;
    grid-template-columns: 30px 1fr 1fr 25px;
    column-gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.crit .gridFooter > *{
    grid-column: 1 / -1;
}

/* -- TABLETTE -- */

@media (min-width : 768px){

    /* NAV PAGE */

    .crit .menu--btn{
        display: none;
    }
    
    .crit .nav__mb{
        display: flex;
        align-items: center;
        position: relative;
        padding: 0;
        left: 0;
        top: 28px;
        background: var(--color-bg-crit);
        z-index: 1;
    }
    
    .crit .nav__list{
        display: flex;
        list-style: none;
    }
    
    .crit .nav__list .nav__link{
        color: var(--color-title-secondary-crit);
        font-size: 16px;
        line-height: 1.4;
        margin: 0;
        font-weight: 700;
        text-transform: uppercase;
    }
    
    .crit .nav__list .nav__link--active{
        color: var(--color-title-secondary-crit);
    }

    .crit .nav__item{
        padding-left: 50px;
        padding-right: 50px;
        margin: 0;
    }
    
    .crit .nav--promo{
        display: flex;
        position: fixed;
        background: var(--color-bg-crit);
        height: 80px;
        width: 100%;
        z-index: 9;
    }

    .crit .nav__icon{
        position: fixed;
        width: 28px;
        height: 200px;
        bottom: 50px;
        left: 40px;
        z-index: 9;
    }
    
    .crit .nav__icon li{
        margin-top: 22px;
    }
    
    .crit .img__logoCrit{
        padding-left: 40px;
    }

    .crit .section--header .title--special{
        padding-top: 0;
    }

    /* CSS GRID */

    .crit .gridHeader{
        display: grid;
        grid-template-columns: 30px 50px 1fr 50px 1fr 1fr 30px;
        grid-template-rows: 80px 1fr 80px;
        column-gap: 20px;
        padding: 80px 40px 0 40px;
    }

    .crit .tgridHeader-start3{
        grid-area: 2 / 3 / 3 / -3;
    }

    .crit .gridDelusional{
        display: grid;
        grid-template-columns: 30px 50px 1fr 50px 1fr 1fr 30px;
        grid-template-rows: 80px 1fr 80px;
        column-gap: 20px;
        padding: 0 40px 0 40px;
    }
    
    .crit .section--delusional .section__blueForm{
        position: relative;
        overflow: hidden;
    }

    .crit .section--delusional .figure__legende{
        padding-left: 40px;
    }
    
    .crit .section--delusional figure{
        width: calc(100% + 40px);
        left: -40px;
        margin: auto 0 auto 0;
    }

    .crit .section--delusional .section__blueForm:before{
        transform: skew(0deg);
        width: 80%;
    }

    .crit .tgridDelusional-start-1{
        grid-area: 2 / 1 / 3 / -5;
    }

    .crit .tgridDelusional-start-5{
        grid-area: 2 / 5 / 3 / -2;
    }

    .crit .gridProblem{
        display: grid;
        grid-template-columns: 30px 50px 1fr 50px 1fr 1fr 30px;
        grid-template-rows: 80px 1fr 80px;
        column-gap: 20px;
        padding: 0 40px 0 40px;
    }

    .crit .section--problem .section__blueForm{
        position: relative;
        overflow: hidden;
    }

    .crit .tgridProblem-start2{
        grid-area: 2 / 2 / 3 / -5;
    }

    .crit .tgridProblem-start5{
        grid-area: 2 / 5 / 3 / -1;
    }

    .crit .section--problem .title--section{
        justify-content: flex-start;
    }
    
    .crit .section--problem .title--big{
        justify-content: flex-start;
    }
    
    .crit .section--problem figure{
        width: calc(100% + 40px);
        margin: auto 0 auto 0;
        left: 0;
    }

    .crit .section--problem .section__blueForm:before{
        transform: skew(0deg);
        width: 80%;
        height: calc(100% - 4px);
    }

    .crit .gridExtinction{
        display: grid;
        grid-template-columns: 30px 50px 1fr 50px 1fr 1fr 30px;
        grid-template-rows: 80px 1fr 80px;
        column-gap: 20px;
        padding: 0 40px 0 40px;
    }

    .crit .tgridExtinction-start1{
        grid-area: 2 / 1 / 3 / -5;
    }

    .crit .tgridExtinction-start5{
        grid-area: 2 / 5 / 3 / -2;
    }

    .crit .section--extinction .figure{
        margin: auto 0 auto 0;
    }

    .crit .section--extinction img{
        right: 20px;
    }
    
    .crit .section--extinction figure:before{
        width: calc(100% - 20px);
        height: 220px;
        left: 20px;
        top: 20px;
    }
    
    .crit .gridAgain{
        display: grid;
        grid-template-columns: 30px 50px 1fr 50px 1fr 1fr 30px;
        grid-template-rows: 80px 1fr 80px;
        column-gap: 20px;
        padding: 0 40px 0 40px;
    }

    .crit .tgridAgain-start2{
        grid-area: 2 / 2 / 3 / -5;
    }

    .crit .tgridAgain-start5{
        grid-area: 2 / 5 / 3 / -1;
    }

    .crit .section--again .figure{
        margin: auto 0 auto 0;
    }

    .crit .section--again img{
        left: 20px;
    }
    
    .crit .section--again figure:before{
        width: calc(100% - 20px);
        height: 100%;
        left: 0;
        top: 20px;
    }

    .crit .gridDrama{
        display: grid;
        grid-template-columns: 30px 50px 1fr 50px 1fr 1fr 30px;
        grid-template-rows: 80px 1fr 120px 1fr 120px 1fr 120px 1fr;
        column-gap: 20px;
        padding: 0 40px 0 40px;
    }

    .crit .link--top{
        display: none;
    }

    .crit .exposed__streamer{
        padding: 0;
    }

    .crit .tgridDrama-start3{
        grid-area: 2 / 3 / 3 / -3;
    }

    .crit .tgridDrama-end5-top{
        grid-area: 3 / 3 / 4 / -3;
    }

    .crit .tgridDrama-start3-top{
        grid-area: 4 / 3 / 5 / -3;
        padding-top: 44px;
    }

    .crit .tgridDrama-end5-mid{
        grid-area: 5 / 3 / 6 / -3;
    }

    .crit .tgridDrama-start3-mid{
        grid-area: 6 / 3 / 7 / -3;
        padding-top: 44px;
    }

    .crit .tgridDrama-end5-bot{
        grid-area: 7 / 3 / 8 / -3;
    }

    .crit .tgridDrama-start3-bot{
        grid-area: 8 / 3 / 9 / -3;
        padding-top: 44px;
    }

    .crit .section--footer{
        display: flex;
        justify-content: space-around;
    }

    .crit .section--footer .copyright{
        margin-left: auto;
        margin-right: auto;
        padding: auto;
        transform: skew(12deg);
        padding-left: 80px;
        font-size: 16px;
        color: var(--color-text-promo);
        font-weight: 300;
        font-weight: 1.2;
    }
    
    .crit .block__footer{
        display: flex;
        flex-direction: column;
        margin: 0;
        left: -80px;
        width: 50%;
        transform: skew(-12deg);
        background-color: var(--color-title-primary-crit);
    }

    .crit .nav__icon--footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    .crit .block__footer img{
        padding-top: 60px;
        padding-left: 40px;
        width: 53px;
        height: 59px;
        transform: skew(12deg);
    }
    
    .crit .footerNav__el{
        margin-top: 34px;
        margin-bottom: 34px;
    }

}

/* -- DESKTOP -- */

@media (min-width : 1025px){

    .crit .title--big{
        font-size: 57px;
        line-height: 1.2;
        padding-bottom: 68px;
    }

    .crit .title--section{
        font-size: 43px;
        padding-bottom: 52px;
    }
    
    .crit .title--special{
        font-size: 76px;
    }
    
    .crit .title--header{
        font-size: 32px;
        padding-bottom: 45px;
    }

    .crit p{
        font-size: 18px;
        padding: 0 0 25px 0;
    }

    .crit p:last-child{
        padding-bottom: 75px;
    }

    .crit .exposed__streamer{
        padding: 50px 0 25px;
    }
    
    .crit .gridHeader{
        grid-template-columns: 30px 50px 1fr 50px 1fr 1fr 30px;
        column-gap: 40px;
    }

    .crit .dgridHeader-start3{
        grid-area: 2 / 3 / 3 / -4;
    }

    .crit .gridDelusional{
        grid-template-columns: 30px 50px 1fr 50px 2fr 1fr 30px;
    }

    .crit .dgridDelusional-start5{
        grid-area: 2 / 5 / 3 / -3;
    }

    .crit .gridProblem{
        column-gap: 60px;
    }

    .crit .gridExtinction{
        grid-template-columns: 30px 50px 1fr 50px 1fr 30px;
        column-gap: 60px;
    }

    .crit .dgridExtinction-start1{
        grid-area: 2 / 1 / 3 / -4;
    }

    .crit .dgridExtinction-start5{
        grid-area: 2 / 5 / 3 / -3;
    }

    .crit .section--extinction .figure:before{
        height: 100%;
        width: calc(100% - 60px);
        left: 60px;
    }

    .crit .section--extinction .figure__legende{
        padding-left: 60px;
    }

    .crit .gridAgain{
        column-gap: 60px;
    }

    .crit .gridDrama{
        grid-template-columns: 30px 50px 2fr 1fr 1fr 50px 1fr 1fr 30px;
        column-gap: 40px;
    }

    .crit .dgridDrama-start4{
        grid-area: 2 / 4 / 3 / -3;
    }

    .crit .dgridDrama-end5-top{
        grid-area: 3 / 3 / 4 / -5;
    }

    .crit .dgridDrama-end5-mid{
        grid-area: 5 / 3 / 6 / -5;
    }

    .crit .dgridDrama-end5-bot{
        grid-area: 7 / 3 / 8 / -5;
    }

    .crit .section--footer{
        display: flex;
        justify-content: space-around;
    }

    .crit .section--footer .copyright{
        margin-left: auto;
        margin-right: auto;
        padding: auto;
        transform: skew(12deg);
        padding-left: 160px;
        font-size: 16px;
        color: var(--color-text-promo);
        font-weight: 300;
        font-weight: 1.2;
    }
    
    .crit .block__footer{
        display: flex;
        flex-direction: column;
        margin: 0;
        left: -200px;
        width: 50%;
        transform: skew(-12deg);
        background-color: var(--color-title-primary-crit);
    }

    .crit .nav__icon--footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 40px;
        padding: 0;
    }

    .crit .block__footer img{
        padding-top: 60px;
        padding-left: 120px;
        width: 53px;
        height: 59px;
        transform: skew(12deg);
    }
    
    .crit .footerNav__el{
        margin-top: 34px;
        margin-bottom: 34px;
    }
}

/* -- EXCEPTION DESKTOP -- */

@media (min-width : 1300px){
    .crit .dgridDrama-start4{
        grid-area: 2 / 4 / 3 / -4;
    }

    .crit .dgridDrama-end5-top{
        grid-area: 3 / 3 / 4 / -6;
    }

    .crit .dgridDrama-start3-top{
        grid-area: 4 / 3 / 5 / -5;
        padding-top: 50px;
    }

    .crit .dgridDrama-end5-mid{
        grid-area: 5 / 3 / 6 / -6;
    }

    .crit .dgridDrama-start3-mid{
        grid-area: 6 / 3 / 7 / -5;
        padding-top: 50px;
    }

    .crit .dgridDrama-end5-bot{
        grid-area: 7 / 3 / 8 / -6;
    }

    .crit .dgridDrama-start3-bot{
        grid-area: 8 / 3 / 9 / -5;
        padding-top: 50px;
    }
}


@media (min-width : 1550px){
    .crit .gridDelusional{
        column-gap: 60px;
    }

    .crit .gridDrama{
        grid-template-columns: 30px 150px 2fr 1fr 1fr 50px 1fr 1fr 30px;
    }

    .crit .dgridDrama-start4{
        grid-area: 2 / 4 / 3 / -4;
    }

    .crit .dgridDrama-end5-top{
        grid-area: 3 / 3 / 4 / -7;
    }

    .crit .dgridDrama-start3-top{
        grid-area: 4 / 3 / 5 / -6;
        padding-top: 50px;
    }

    .crit .dgridDrama-end5-mid{
        grid-area: 5 / 3 / 6 / -7;
    }

    .crit .dgridDrama-start3-mid{
        grid-area: 6 / 3 / 7 / -6;
        padding-top: 50px;
    }

    .crit .dgridDrama-end5-bot{
        grid-area: 7 / 3 / 8 / -7;
    }

    .crit .dgridDrama-start3-bot{
        grid-area: 8 / 3 / 9 / -6;
        padding-top: 50px;
    }
}

/* ----- FACT PAGE ----- */

/* -- MOBILE -- */

.fact{
    margin: 0;
    padding: 0;
    font-family: "Outfit", sans-serif;
    color: var(--color-text-promo);
    background-color: var(--color-bg-promo);
    overflow-x: hidden;
}

.fact .main{
    margin: 0;
    padding: 0;
}

/* NAV PAGE */

.fact .nav--section{
    display: none;
}

.fact .menu--btn{
    width: 25px;
    height: 20px;
    position: fixed;
    top: 30px;
    right: 20px;
    z-index: 10;
    background: transparent;
    color: transparent;
    border: 0;
    cursor: pointer;
}

.fact .menu--btn i{
    display: grid;
    width: 100%;
    height: 10%;
    background: var(--color-text-promo);
    position: absolute;
    right: 0%;
    transition: all .3s;
}

.fact .menu--btn i:nth-child(1){
    top: 0%;

}

.fact .menu--btn i:nth-child(2){
    top: 50%;
    transform: translateY(-50%);
}

.fact .menu--btn i:nth-child(3){
    bottom: 0%;
}

.fact .nav__mb{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: fixed;
    padding: 0;
    margin: 0;
    background: var(--color-bg-promo);
    top: 0;
    left: 100%;
    width: 100%;
    height: calc(100% - 180px);
    transition: .3s ease-out;
    z-index: 1;
    padding: 120px 60px 60px;
}

.fact .nav__mb ul{
    margin: 0;
    padding: 0;
}

.fact .nav__list{
    list-style: none;
}

.fact .nav__list .nav__link{
    color: var(--color-text-promo);
    font-size: 51px;
    line-height: 1.4;
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
}

.fact .nav__list .nav__link--active{
    color: var(--color-title-promo);
}

.fact .nav__icon{
    list-style: none;
    position: relative;
    bottom: 30px;
}

.fact .nav__icon li{
    margin-top: 22px;
}

.fact .nav__link{
    text-decoration: none;
}

.fact .nav__item{
    margin-bottom: 71px;
}

/* open state */

.fact .nav__mb.open{
    left: 0;
}

.fact .menu--btn.open i:nth-child(1){
    top: 50%;
    transform: rotate(45deg) translateY(-50%);
    transform-origin: right center;
    width: 50%;
}

.fact .menu--btn.open i:nth-child(3){
    bottom: 50%;
    transform: rotate(-45deg) translateY(50%);
    transform-origin: right center;
    width: 50%;
}

.fact .nav--promo{
    display: flex;
    position: fixed;
    background: var(--color-bg-promo);
    height: 80px;
    width: 100%;
    z-index: 9;
}

.fact .img__logo{
    padding-top: 25px;
    padding-left: 20px;
    height: 33px;
    width: 30px;
    z-index: 2;
}

.fact .nav__item a:hover{
    color: var(--color-title-promo);
    transition: 0.3s;
}

.fact .nav--section a:hover{
    color: var(--color-title-promo);
    transition: 0.3s;
}


/* SECTIONS */

.fact .section--nav{
    background-image: url(../assets/images/promBg@2x.jpg);
    background-size: cover;
}

.fact .section--header{
    padding-top: 80px;
}

.fact .section--stats{
    padding-top: 34px;
}

.fact .section--agency{
    background-image: url(../assets/images/promBg@2x.jpg);
    background-size: cover;
    padding-top: 34px;
}

.fact .section--footer{
    background-image: url(../assets/images/promBg@2x.jpg);
    background-size: cover;
    padding-top: 34px;
}

/* TITLES */

.fact .title--section{
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
    padding-bottom: 34px;
    font-weight: 700;
}

.fact .title--big{
    font-size: 51px;
    line-height: 1.2;
    margin: 0;
    padding-bottom: 61px;
    font-weight: 800;
    color: var(--color-title-promo);
}

.fact .title--header{
    line-height: 1.1;
    font-size: 38px;
    margin: 0;
    padding: 0;
    font-weight: 700;
}

.fact .section--stats .title--section{
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
}

.fact .section--stats .span__highlight{
    padding-left: 5px;
}

.fact .div__stats .span__highlight{
    padding: 0;
}

.fact .title--stats{
    line-height: 1.2;
    font-size: 21px;
    margin: 0;
    padding: 25px 0 25px 20px;
    font-weight: 700;
    position: relative;
    cursor: pointer;
}

.fact .title--stats::before,
.title--stats::after{
    content: "";
    display: block;
    background-color: var(--color-promo-primary);
    width: 12px;
    height: 2px;
    position: absolute;
    left: 0;
    top: 50%;
}

.fact .title--stats::after{
    transform: rotate(90deg);
    transition: transform .3s;
}

/* .fact .title--stats.open::before {
    transform: rotate(0);
} */

.fact .section--friends .title--section{
    padding-top: 68px;
}

.fact .title--footer{
    font-size: 21px;
    margin: 0 0 23px 0;
    font-weight: 500;
}

/* TEXTS */

.fact p{
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
    padding: 0 0 22px 0;
}

.fact p:last-child{
    padding-bottom: 66px;
}

.fact .span__highlight{
    color: var(--color-span-promo);
}

.fact .a__underline{
    color: var(--color-span-promo);
    text-decoration: none;
    cursor: pointer;
}

.fact .a__underline:hover{
    text-decoration: underline;
}

.fact .figure__legende{
    font-size: 12px;
    padding-left: 20px;
    font-weight: 500;
    color: var(--color-text-crit);
}

.fact .figure--left .figure__legende{
    padding-left: 40px;
}

.fact .open__text{
    height: 0;
    overflow: hidden;
    transition: all .3s;
    opacity: 0;
    transform: translateY(10px);
}

.fact .title--stats.open + .open__text{
    height: 150px;
    opacity: 1;
    transform: translateY(0);
    transition: height .3s, opacity .3s .2s, transform .3s .2s;
}

/* IMAGES */

.fact .figure{
    margin: 0 0 68px 0;
    position: relative;
    z-index: 1;
}

.fact .figure img{
    position: relative;
    left: 20px;
    max-width: 100%;
}

.fact .section--header img{
    transform: rotateY(180deg);
}

.fact .section--agency figure{
    margin-top: 44px;
    margin-bottom: 42px;
}

.fact .figure:before{
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 12px);
    background-color: var(--color-promo-primary);
    position: absolute;
    z-index: -1;
    left: -20px;
    bottom: -8px;
}

 .fact .figure--left:before{
    left: 20px;
}

.fact .figure--left img{
    left: -20px;
}

.fact .div__stats{
    padding-left: 20px;
    padding-right: 20px;
}

.fact .box__icon{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 75px;
    width: 75px;
    top: 20px;
    left: 20px;
    background-color: var(--color-bg-crit);
    border-radius: 50%;
    z-index: +1;
}

.fact .banner__icon{
    max-width: 100%;
    position: relative;
    left: 0;
    bottom: 28px;
    height: 68px;
    background-color: var(--color-promo-primary);
    margin-top: 34px;
}

/* SLIDER */

.fact .slider__container{
    width: 100%;
    height: 280px;
    overflow: hidden;
    position: relative;
}

.fact .slider{
    display: flex;
    width: calc(225px * 20); /* On double le nombre de slides pour simuler un scroll infini */
    animation: scroll-continuous 30s linear infinite;
}

.fact .slider__item{
    position: relative;
    width: 225px;
    height: 280px;
    flex-shrink: 0;
    filter: grayscale(100%);
    overflow: hidden;
}

.fact .slider img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    background-color: var(--color-bg-promo);
    opacity: 70%;
}

.fact .slider img:hover{
    transform: scale(1.1);
}

.fact .slider__text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1.2;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

.fact .slider__text a{
    text-decoration: none;
    color: var(--color-text-promo);
}

@keyframes scroll-continuous {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-225px * 10)); /* Après 10 slides, retour au début */
    }
}

/* FOOTER */

.fact .section--footer .footerNav{
    grid-column: 2 / span 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.fact .footerNav{
    list-style: none;
    margin: 0;
    padding: 0;
}

.fact .footerNav__el{
    margin-bottom: 34px;
}

.fact .footerNav__el a{
    text-decoration: none;
    color: var(--color-text-promo);
    font-weight: 16px;
    line-height: 1.1;
}

.fact .section--footer li{
    flex-basis: 50%;
}

.fact .section--footer li:nth-child(2){
    flex-basis: calc(50% - 5px);
}

.fact .section--footer li:nth-child(4){
    flex-basis: calc(50% - 5px);
}

.fact .section--footer li:nth-child(6){
    flex-basis: calc(50% - 5px);
}

.fact .section--footer p{
    padding-bottom: 44px;
}

.fact .section--footer a{
    text-decoration: none;
    color: var(--color-text-promo);
}

.fact .section--footer a:hover{
    color: var(--color-title-promo);
    transition: 0.3s;
}

/* GRID */

.fact .gridHeader{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}

.fact .gridAgency{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}

.fact .gridFriends{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
}

.fact .gridFooter{
    display: grid;
    grid-template-columns: 30px 1fr 1fr 25px;
    column-gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.fact .gridFooter > *{
    grid-column: 1 / -1;
}

.fact .mgridFooter-start2{
    grid-column-start: 2;
}

/* TABLETTE */

@media (min-width : 768px){

    /* NAV PAGE */

    .fact .menu--btn{
        display: none;
    }
    
    .fact .nav__mb{
        display: flex;
        align-items: center;
        position: relative;
        padding: 0;
        left: 0;
        top: 28px;
        background: var(--color-bg-promo);
        z-index: 1;
    }
    
    .fact .nav__list{
        display: flex;
        list-style: none;
    }
    
    .fact .nav__list .nav__link{
        color: var(--color-text-promo);
        font-size: 16px;
        line-height: 1.4;
        margin: 0;
        font-weight: 700;
        text-transform: uppercase;
    }
    
    .fact .nav__list .nav__link--active{
        color: var(--color-title-promo);
    }

    .fact .nav__item{
        padding-left: 50px;
        padding-right: 50px;
        margin: 0;
    }
    
    .fact .nav--promo{
        display: flex;
        position: fixed;
        background: var(--color-bg-promo);
        height: 80px;
        width: 100%;
        z-index: 9;
    }

    .fact .nav__icon{
        position: fixed;
        width: 28px;
        height: 200px;
        bottom: 50px;
        left: 40px;
        z-index: 9;
    }
    
    .fact .nav__icon li{
        margin-top: 22px;
    }
    
    .fact .img__logo{
        padding-left: 40px;
    }

    .fact .nav--section{
        display: flex;
        grid-column-end: -1;
        position: fixed;
        margin: 0;
        padding: 0;
        bottom: 50px;
        right: 40px;
        z-index: 9;
    }

    .fact .nav__anchor{
        padding: 0;
        margin: 0;
    }

    .fact .nav__anchor li{
        list-style: none;
        text-transform: uppercase;
        margin-top: 10px;
    }

    .fact .nav__anchor a{
        text-decoration: none;
        color: var(--color-text-promo);
    }

    /* SECTIONS */

    .fact .gridHeader{
        display: grid;
        grid-template-columns: 30px 1fr 1fr 76px;
        grid-template-rows: 80px 1fr 80px;
        column-gap: 30px;
        padding: 80px 40px 0 40px;
    }

    .fact .tgridHeader-start3{
        grid-area: 2 / 3 / 3 / -2;
    }

    .fact .tgridHeader-start1{
        grid-area: 2 / 1 / 3 / -3;
    }

    .fact .section--header .figure{
        width: 100%;
        margin-top: auto;
        margin-bottom: auto;
    }
    
    .fact .section--header .figure img{
        left: 0;
    }

    .fact .section--header .figure:before{
        width: calc(100% - 40px);
        left: -40px;
        top: 20px;
    }

    .fact .gridStats{
        display: grid;
        grid-template-columns: 30px 100px 75px 1fr 2fr 76px;
        grid-template-rows: 80px repeat(3, 250px);
        column-gap: 30px;
        padding: 80px 40px 80px  40px;
    }

    .fact .tgridStats-start4-title{
        grid-area: 1 / 4 / 2 / -2;
    }

    .fact .section--stats .title--section{
        padding-right: 0;
        justify-content: flex-start;
    }

    .fact .section--stats .span__highlight{
        padding: 0;
    }

    .fact .tgridStats-start1-top{
        grid-area: 1 / 1 / 4 / -4;
    }

    .fact .tgridStats-start4-top{
        grid-area: 2 / 4 / 3 / -2;
    }

    .fact .tgridStats-start1-mid{
        grid-area: 3 / 1 / 4 / -4;
    }

    .fact .tgridStats-start4-mid{
        grid-area: 3 / 4 / 4 / -2;
    }

    .fact .tgridStats-start1-bot{
        grid-area: 4 / 1 / 5 / -4;
    }

    .fact .tgridStats-start4-bot{
        grid-area: 4 / 4 / 5 / -2;
    }

    .fact .div__stats{
        padding: 0;
        margin: 0;
    }
    
    .fact .box__icon{
        top: 80px;
        left: 30px;
    }

    .fact .box__icon--first{
        position: relative;
        margin-top: 80px;
    }
    
    .fact .banner__icon{
        display: flex;
        justify-content: flex-end;
        width: 100%;
        height: calc(100% + 160px);
        left: -40px;
        top: -80px;
        bottom: 0;
        margin: 0;
    }

    .fact .gridAgency{
        grid-template-columns: 30px 2fr 1fr 1fr 76px;
        grid-template-rows: 246px 1fr 80px 1fr 80px 1fr;
        column-gap: 30px;
        padding: 80px 40px 80px 40px;
    }

    .fact .tgridAgency-start2{
        grid-area: 1 / 2 / 2 / -3;
    }
    
    .fact .tgridAgency-start2-top{
        grid-area: 2 / 2 / 3 / -4;
        margin-top: auto;
        margin-bottom: auto;
    }

    .fact .tgridAgency-start3-top{
        grid-area: 2 / 3 / 3 / -1;
    }

    .fact .tgridAgency-start2-mid{
        grid-area: 4 / 2 / 5 / -4;
        margin-top: auto;
        margin-bottom: auto;
    }

    .fact .tgridAgency-start3-mid{
        grid-area: 4 / 3 / 5 / -1;
    }

    .fact .tgridAgency-start2-bot{
        grid-area: 6 / 2 / 7 / -4;
        margin-top: auto;
        margin-bottom: auto;
    }

    .fact .tgridAgency-start3-bot{
        grid-area: 6 / 3 / 7 / -1;
    }

    .fact .section--agency .figure{
        margin-top: auto;
        margin-bottom: auto;
    }
    
    .fact .section--agency .figure img{
        left: 0;
    }
    
    .fact .section--agency .figure:before{
        width: calc(100% + 20px);
        height: 100%;
        left: 20px;
        bottom: 0;
        top: 40px;
    }

    .fact .section--agency .figure__legende{
        padding-left: 40px;
    }

    .fact .figure--left:before{
        left: 0;
    }
    
    .fact .figure--left img{
        left: 0;
    }

    .fact .gridFriends{
        grid-template-columns: 30px 1fr 1fr 76px;
        grid-template-rows: 65px 1fr;
        column-gap: 30px;
        padding: 80px 40px 0 40px;
    }

    .fact .section--friends .title--section{
        padding: 0 0 34px 0;
    }

    .fact .tgridFriends-start2-title{
        grid-area: 1 / 2 / 2 / -2;
    }

    .fact .tgridFriends-start2{
        grid-area: 2 / 2 / 3 / -3;
    }

    .fact .tgridFriends-start3{
        grid-area: 2 / 3 / 3 / -2;
    }

    .fact .gridFooter{
        display: grid;
        grid-template-columns: 30px 1fr 1fr 1fr 76px;
        grid-template-rows: 100px 1fr;
        column-gap: 30px;
        padding: 80px 40px 25px 40px;
    }

    .fact .tgridFooter-start2-top{
        grid-area: 1 / 2 / 2 / -1;
    }

    .fact .tgridFooter-start2-bot{
        grid-area: 1 / 2 / 2 / -1;
    }

    .fact .tgridFooter-start3{
        grid-area: 1 / 3 / 2 / -1;
    }

    .fact .tgridFooter-start4{
        grid-area: 2 / 4 / 3 / -2;
    }

    .fact .section--footer .footerNav{
        display: flex;
    }

}

/* -- DESKTOP -- */

@media (min-width : 1025px){
    .fact .title--section{
        font-size: 32px;
        padding-bottom: 45px;
    }
    
    .fact .title--big{
        font-size: 57px;
        padding-bottom: 68px;
    }
    
    .fact .title--header{
        font-size: 43px;
    }

    .fact .title--stats{
        font-size: 24px;
        padding: 29px 0 29px 20px;
    }

    .fact .title--footer{
        font-size: 24px;
        margin: 0 0 29px 0;
    }

    .fact p{
        font-size: 18px;
        padding: 0 0 25px 0;
    }

    .fact p:last-child{
        padding-bottom: 75px;
    }

    .fact .figure__legende{
        font-size: 14px;
    }
    
    .fact .footerNav__el a{
        font-size: 18px;
    }

    .fact .gridHeader{
        column-gap: 60px;
    }

    .fact .gridStats{
        grid-template-columns: 30px 100px 75px repeat(3, 1fr) 76px;
    }

    .fact .dgridStats-start1-top{
        grid-area: 1 / 1 / 4 / -5;
    }

    .fact .dgridStats-start4-top{
        grid-area: 2 / 4 / 3 / -3;
    }

    .fact .dgridStats-start1-mid{
        grid-area: 3 / 1 / 4 / -5;
    }

    .fact .dgridStats-start4-mid{
        grid-area: 3 / 4 / 4 / -3;
    }

    .fact .dgridStats-start1-bot{
        grid-area: 4 / 1 / 5 / -5;
    }

    .fact .dgridStats-start4-bot{
        grid-area: 4 / 4 / 5 / -3;
    }
    
    .fact .box__icon{
        width: 100px;
        height: 100px;
    }

    .fact .gridAgency{
        column-gap: 60px;
    }

    .fact .dgridAgency-start2{
        grid-area: 1 / 2 / 2 / -4;
    }

    .fact .gridFriends{
        grid-template-rows: 100px 1fr;
        column-gap: 60px;
    }

    .fact .gridFooter{
        grid-template-columns: 30px 150px repeat(3, 1fr) 76px;
        padding-left: 150px;
    }
}

/* -- EXCEPTIONS DESKTOP -- */

@media (min-width : 1400px){
    .fact .gridFriends{
        grid-template-columns: 30px 1fr 250px 1fr 76px;
        grid-template-rows: 100px 1fr;
        column-gap: 60px;
        padding: 80px 40px 0 40px;
    }

    .fact .section--friends .title--section{
        padding: 0 0 46px 0;
    }

    .fact .dgridFriends-start2-title{
        grid-area: 1 / 2 / 2 / -2;
    }

    .fact .dgridFriends-start2{
        grid-area: 2 / 2 / 3 / -4;
    }

    .fact .dgridFriends-start4{
        grid-area: 2 / 4 / 3 / -2;
    }
}

@media (min-width : 1550px){
    .fact .gridHeader{
        grid-template-columns: 30px 1fr 100px 1fr 50px 76px;
        column-gap: 60px;
    }

    .fact .dgridHeader-start4{
        grid-area: 2 / 4 / 3 / -3;
    }

    .fact .tgridHeader-start1{
        grid-area: 2 / 1 / 3 / -4;
    }

    .fact .gridStats{
        grid-template-columns: 30px 100px 75px repeat(4, 1fr) 76px;
    }

    .fact .dgridStats-start5-title{
        grid-area: 1 / 5 / 2 / -1;
    }

    .fact .dgridStats-start1-top{
        grid-area: 1 / 1 / 4 / -5;
    }

    .fact .dgridStats-start5-top{
        grid-area: 2 / 5 / 3 / -3;
    }

    .fact .dgridStats-start1-mid{
        grid-area: 3 / 1 / 4 / -5;
    }

    .fact .dgridStats-start5-mid{
        grid-area: 3 / 5 / 4 / -3;
    }

    .fact .dgridStats-start1-bot{
        grid-area: 4 / 1 / 5 / -5;
    }

    .fact .dgridStats-start5-bot{
        grid-area: 4 / 5 / 5 / -3;
    }

    .fact .gridAgency{
        grid-template-columns: 30px 1fr 150px repeat(2, 1fr) 76px;
    }

    .fact .dgridAgency-start3{
        grid-area: 1 / 3 / 2 / -3;
    }

    .fact .dgridAgency-start2-top{
        grid-area: 2 / 2 / 3 / -5;
        margin-top: auto;
        margin-bottom: auto;
    }

    .fact .dgridAgency-start4-top{
        grid-area: 2 / 4 / 3 / -1;
    }

    .fact .dgridAgency-start2-mid{
        grid-area: 4 / 2 / 5 / -5;
        margin-top: auto;
        margin-bottom: auto;
    }

    .fact .dgridAgency-start4-mid{
        grid-area: 4 / 4 / 5 / -1;
    }

    .fact .dgridAgency-start2-bot{
        grid-area: 6 / 2 / 7 / -5;
        margin-top: auto;
        margin-bottom: auto;
    }

    .fact .dgridAgency-start4-bot{
        grid-area: 6 / 4 / 7 / -1;
    }
}