@font-face {
    font-family: 'Bodoni Moda';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/BodoniModa-Regular.woff2") format("woff2"), url("../fonts/BodoniModa-Regular.woff") format("woff");
}
@font-face {
    font-family: 'Bodoni Moda';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/BodoniModa-Italic.woff2") format("woff2"), url("../fonts/BodoniModa-Italic.woff") format("woff");
}
@font-face {
    font-family: 'Montserrat Light';
    font-style: normal;
    font-weight: 200;
    src: url("../fonts/montserrat-200.woff2") format("woff2"), url("../fonts/montserrat-200.woff") format("woff");
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/montserrat-400.woff2") format("woff2"), url("../fonts/montserrat-400.woff") format("woff");
}
@font-face {
    font-family: 'Montserrat Medium';
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/montserrat-500.woff2") format("woff2"), url("../fonts/montserrat-500.woff") format("woff");
}
@font-face {
    font-family: 'Montserrat Semi-Bold';
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/montserrat-600.woff2") format("woff2"), url("../fonts/montserrat-600.woff") format("woff");
}

body{
    padding:0;
    margin: 0;
    background:linear-gradient(180deg, #1451B0 0%, #4E8FD4 100%);
    position: relative;
    color:#fff;
   
    width: 100vw;
    min-height: 100vh;
}

.bgd-attente{
    position: fixed;
    bottom:0;
    left:0;
    background-image: url('../imgs/bgd-facade.png');
    background-position: bottom center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 100vw;
    height:100vh;
    z-index: 1;
}
a{color:#fff;}

.attente{
    position: relative;
    display: block;   
    width: 100vw;
    text-align: center;
    padding-top:32px;
    z-index: 2;
    padding-bottom:120px;
}

.attente h1{
    font-family: 'Montserrat Light';
    font-size:42px;
    font-weight: 200;
    text-transform: uppercase;
    margin:0;
}

.attente h2 {
    font-family: 'Bodoni Moda';
    font-size: 26px;
    font-style: italic;
    font-weight: normal;
    line-height: 100%;
    margin: 0;
}

.attente .content{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap:42px;
    padding-top:42px;
}

.attente .content h3{
    font-size: 23px;
    font-family: 'Montserrat';
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    margin:0;
    padding-bottom:24px;
}
.attente .content span{
    font-family: 'Montserrat Medium';
    font-size: 23px;
    line-height: 116%;
}

.attente .content .content-adresse{
    font-family: 'Montserrat Medium';
    font-size: 20px;
    text-transform: uppercase;
    line-height: normal;
    letter-spacing: 3.8px;
    order:1;
}
.attente .content .content-adresse span{display: none;}

.attente .content .content-commercialisation {order:2}
.attente .content .content-gestion {order:2}


@media screen and (min-width: 1000px) {
    .bgd-attente {
        display: none;
    }
    .attente {
        background:url('../imgs/bgd-attente.jpg'), linear-gradient(to right, #1a52af, #013082);
        background-color:#0e46a3;
        background-position: bottom center, center;
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 100vw;
        height: 100vh;
        padding:0;
    }

    .attente h1 {
        font-size: 90px;
        padding-top:10vh;
    }

    .attente h2 {
        font-size: 66px;
    }

    .attente .content {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        padding-top:150px;
    }

    .attente .content .content-adresse {
        order:2
    }
    .attente .content .content-adresse br{display: none;}
    .attente .content .content-adresse span {display: inline;}

    .attente .content .content-commercialisation {
        order: 1
    }

    .attente .content .content-gestion {
        order: 3
    }
}