@font-face {
    font-family: 'trajan-reg';
    src: url('goudytrajan-regular-trial-webfont.woff2') format('woff2'),
         url('goudytrajan-regular-trial-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
    --colBG : #151313;
    --baseCol : #ffffff;
    --altCol : #686868;
    --revCol : #000;
    --titleColor : #F48123;
    --altTitleColor : #FF9900;
    --buttonColor : #F9B703;
    --altBG : #1F1F1F;
    --size_p : 1.6vw;
    --size_title : 2.6vw;
    --size_bigTitle : 3vw;
    --size_HL : 1.6vw;
    --borderRadius : 1.2vw;
    --padding_col : 2vw;

    color: var(--baseCol);
    font-size: var(--size_p);
    background-color: var(--colBG);
}

body {
    font-family: 'trajan-reg';
    margin: 0;
}

header {
    position: relative;
    margin: 0 10vw;
    width: 80vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.5vw 0;
    z-index: 3;
}

#phone_header {
    display: none;
}

#phone_menu {
    position: absolute;
    left: 3vw;
    width: 10vw;
    height: 10vw;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z'/%3E%3C/svg%3E");
    background-size: cover;
}

#header_logo {
    height: 10vw;
    width: 10vw;
    background-color: #fff;
}

#button_cand {
    border-radius: var(--borderRadius);
    border: 0.1vw solid #fff;
    padding: 1vw 3vw;
    text-align: center;
    width: 10vw;
    background-color: rgba(150, 150, 150, 0);
    transform: scale(1);
    transition: all 0.4s ease-out;
}

#button_cand:hover {
    background-color: rgba(150, 150, 150, .50);
    transition: all 0.4s ease-out;
    transform: scale(1.1);
}

.header_button {
    padding: 1vw 3vw;
    text-align: center;
    width: 10vw;
    transform: scale(1.0);
    transition: all 0.4s ease-out;
}

.header_button:hover {
    transform: scale(1.2);
    transition: all 0.4s ease-out;
}

#landing_bg_wrap {
    position: absolute;
    top: 0;
    background-color: #000;
    height: 40vw;
    width: 100vw;
    opacity: .75;
    z-index: 2;
}

#landing_bg_img {
    position: absolute;
    top: 0;
    background-image: url('immeubles.webp');
    background-size: cover;
    height: 40vw;
    width: 100vw;
    opacity: 1;
    z-index: 1;
}

.header_main_text {
    width: 70vw;
    position: relative;
    z-index: 3;
    margin: auto;
    text-align: center;
    font-size: var(--size_HL);
    font-weight: bolder;
    letter-spacing: 0.25vw;
    height: 20.7vw;
}

.header_main_text p:first-child {
    font-size: var(--size_bigTitle);
}

#preuves {
    background-color: var(--colBG);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80vw;
    margin: 0 10vw;
    padding: 2vw 0;
}

.preuves_text {
    font-size: var(--size_HL);
    text-align: center;
    width: 23vw;
}

.preuves_text span {
    font-size: var(--size_title);
}

#groupes {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100vw;
    background-color: var(--altBG);
    padding: 5vw 0;
}

.sect_title {
    font-size:var(--size_bigTitle);
    padding-bottom: 5vw;
}

#groupes_desc {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 80vw;
}

.groupe_single {
 width: 20vw;
 text-align: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.groupe_single img {
    width: 15vw;
    padding-bottom: 3vw;
}

.groupes_txt {
    font-size: var(--size_p);
}

#valeurs {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100vw;
    background-color: var(--colBG);
    padding: 5vw 0;
}

#col_cont {
    width: 80.75vw;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.col {
 background-color: rgba(0, 0, 0, 0.5);
 border-radius: var(--borderRadius);
 height: 20vw;
 margin: 0.75vw;
 padding: var(--padding_col);
}

.col_4 {
    width: calc(17vw + 2*0.75vw - 2*var(--padding_col));
}

.col_5 {
    width: calc(21.25vw + 3*0.75vw - 2*var(--padding_col));
}

.col_6 {
    width: calc(25.5vw + 4*0.75vw - 2*var(--padding_col));
}

.col_7 {
    width: calc(29.75vw + 5*0.75vw - 2*var(--padding_col));
}
.col span {
    font-size: var(--size_title);
}

#timeline {
    padding: 5vw;
    background-color: var(--altBG);
    height: 90vw;
    width: 40vw;
    overflow-x: hidden;
    overflow-y: scroll;
    transform: rotate(-90deg) translateY(-50vw);
    transform-origin: right top;
}

#timeline img {
    height: 40vw;
    mix-blend-mode: screen;
    transform: rotate(90deg) translateY(108vw) translateX(150vw);
    transform-origin: right top;
}

span {
    color: var(--titleColor);
}

@media screen and (min-width : 1200px) {
    
    :root {
        --size_p : 1.4vw;
        --size_title : 2.3vw;
        --size_bigTitle : 2.7vw;
        --size_HL : 1.6vw;
        --borderRadius : 3vw;

        color: var(--baseCol);
    }
}

@media screen and (orientation : portrait) {

    :root {
        --size_p : 3.5vw;
        --size_title : 5vw;
        --size_bigTitle : 6vw;
        --size_HL : 4.2vw;
        --borderRadius : 6vw;
        --padding_col : 5vw;

        color: var(--baseCol);
    }

    #base_header {
        display: none;
    }

    #phone_header {
        position: absolute;
        top: 0;
        left: -50vw;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: flex-start;
        margin: 0;
        padding: 11vw 0 0 0;
        text-align: left;
        font-size: var(--size_HL);
        background-color: rgba(0, 0, 0, 0);
        width: 50vw;
        height: 74vw;
        z-index: 4;
        transition: all 0.4s ease-in-out;
    }

    #phone_menu {
        position: relative;
        top: 2vw;
        z-index: 5;
    }

    .toggle_phone {
        background-color: rgba(0,0,0,1) !important;
        transition: all 0.4s ease-in-out;
        left: 0 !important;
    }

    #header_logo_phone {
        position: absolute;
        left: 42.5vw;
        top: 5vw;
        width: 15vw;
        height: 15vw;
        height: 15vw;
        width: 15vw;
        background-color: #fff;
        z-index: 3;
    }

    .header_button {
        width: 40vw;
        text-align: left;
        padding: 4vw;
    }

    .header_button:hover {
        transform: scale(1);
    }

    #button_cand {
        width: 35vw;
        margin-left: 3vw;
    }

    #button_cand:hover {
        transform: scale(1);
    }

    #landing_bg_wrap {
        height: 85vw;
    }

    #landing_bg_img {
        height: 85vw;
    }

    .header_main_text {
        position: relative;
        top: 10vw;
        height: 69vw;
    }

    #preuves {
        flex-direction: column;
        padding: 5vw 0;
    }

    .preuves_text {
        width: 80vw;
        padding-top: 3.5vw;
    }

    .preuves_text:first-child {
        padding-top: 0;
    }

    #groupes_desc {
        flex-direction: column;
        align-items: center;
    }

    .groupe_single {
        width: 60vw;
        padding-bottom: 5vw;
    }

    .col {
        height: min-content;
        width: 80vw;
        padding: var(--padding_col);
    }

    #timeline {
        height: 90vw;
        transform: none;
        width: 90vw;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    #timeline img {
        height: 90vw;
        transform: none;
    }
}