@font-face {
    font-family: venus;
    src: url("../ressources/venus-acier.woff");
}

@font-face {
    font-family: venus-bold;
    src: url("../ressources/Garabosse-Perle_1.woff");
}

body{
    margin: 0px;
    font-family: venus;
}

.venus-bold{
    font-family: venus-bold;
}

#header-wrap{
    font-family: venus-bold;
}

h1{
    font-family: venus-bold !important;
}



@media (orientation:landscape) {  
    .displayNone{
        display: none;
    }

    .active{
        background: radial-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, .3) 65%);
        padding: 1.5vw;
        margin: -1.5vw;
    }

    :root{
        --fs-reading : 1.3vw;
        --fs-header : 1.1vw;
    }

    #header-wrap{
        z-index: 1000;
        background-color: white;
        position: fixed;
        width: 100%;
        border-bottom: 1px solid black;
        height: auto;
        margin: 0px;
        display: flex;
        align-items: center;

        font-size: 1.5vw;
        padding-top: .4vw;
        padding-bottom: .4vw;
    }
    #header{
        margin: 0px;
        position: relative;
        width: 90%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        left: 50%;
        transform: translateX(-50%);
    }

    #header section #rubs{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    #header section{
        width: 75%;
    }

    #header img{
        height: 75%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    #header-logo{
        display: block;
        align-items: center;
        height: 5vw;
        width: 5vw;
    }

    #header a:hover{
        cursor: pointer;
        color: gray;
        transition: .2s;
    }
    a{
        text-decoration: none;
        color: black;
    }
    #footer{
        position: fixed;
        bottom: 0px;
        width: 98vw;
        height: auto;
        background-color: black;
        color: white;
        text-align: center;
        padding-top: .3vw;
        padding-bottom: .3vw;
        font-size: var(--fs-header);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 1vw;
        padding-right: 1vw;
    }

    #footer a{
        filter: invert(1);
        height: 2vw;
        position: relative;
    }

    #footer a img{
        height: 2vw;
        position: relative;
    }

    #footer a:hover{
        cursor: pointer;
    }

    h1{
        margin-top: 2%;
        font-size: 3.5vw;
    }
    p{
        font-size: var(--fs-reading);
        line-height: 1.3;
    }

    .accueil-texte{
        width: 42%;
    }

    .accueil-images{
        width: 42%;
    }

    .accueil-images img{
        width: 100%;
    }

    #pre-footer{
        bottom: 0px;
        padding-left: 5vw;
        padding-right: 5vw;
        display: flex;
        justify-content: space-between;
        padding-bottom: 3vw;
        padding-top: 2vw;
        align-items: center;
        background-color: black;
        color: white;
    }

    *::-webkit-scrollbar {
        display: none;
    }
    
    /* Hide scrollbar for IE, Edge and Firefox */
    * {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    } 
}

@media (orientation: portrait) {
    :root{
        --fs-reading : 40px;
        --fs-header : 30px;
        --fs-big-header : 50px;
    }
.active{
    background: radial-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, .3) 65%);
    padding: 5vw;
    margin: -5vw;
    margin-top: -3.5vw !important;
    margin-bottom: -3.5vw !important;
}
    h3{
        font-size: 30px;
    }

    h1{
        font-size: var(--fs-big-header) !important;
        font-weight: 100 !important;
    }

    #sandwich{
        height: 17vw;
    }

    #header-wrap{

        z-index: 1000;
        background-color: white;
        position: fixed;
        width: 100%;
        border-bottom: 1px solid black;
        height: auto;
        margin: 0px;
        display: flex;
        align-items: center;

        font-size: calc(1.3 * var(--fs-big-header));
        padding-top: .4vw;
        padding-bottom: .4vw;
    }

    #header{
        margin: 0px;
        position: relative;
        width: 90%;
        height: fit-content;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        left: 50%;
        transform: translateX(-50%);
    }
    
    #rubs{
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: end;
        transition: .4s;
    }

    #rubs div{
        margin-bottom: 1.5vw;
         margin-top: 1.5vw;
    }

    .close{
        max-height: 0dvh;
        overflow: hidden;
    }

    .open{
        max-height: 100dvh;
        overflow: visible;
    }

    #header section{
        width: 90%;
        display: flex;
        align-items: end;
        flex-direction: column;
    }

    #header img{
        height: 75%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    #header-logo{
        display: block;
        align-items: center;
        height: 17vw;
        width: auto;
    }

    #header a:hover{
        cursor: pointer;
        color: gray;
        transition: .2s;
    }
    a{
        text-decoration: none;
        color: black;
    }
    #footer{
        position: fixed;
        bottom: 0px;
        transform: translateY(2px);
        width: 90vw;
        height: auto;
        background-color: black;
        color: white;
        text-align: center;
        padding-top: 2vw;
        padding-bottom: 2vw;
        font-size: var(--fs-header);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: start;
    }

    #footer a{
        filter: invert(1);
        height: 10vw;
        position: relative;
    }

    #footer a img{
        height: 10vw;
        position: relative;
    }

    #footer a:hover{
        cursor: pointer;
    }

    h1{
        margin-top: 2%;
        font-size: 4vw;
    }
    p{
        font-size: var(--fs-reading);
        line-height: 1.3;
    }

    .accueil-texte{
        width: 100%;
        margin-bottom: 2%;
    }

    .accueil-images{
        width: 100%;
    }

    .accueil-images img{
        width: 100%;
    }

    #pre-footer{
        bottom: 0px;
        padding-left: 5vw;
        padding-right: 5vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 3vw;
        padding-top: 2vw;
        align-items: center;
        background-color: black;
        color: white;
        padding-bottom: 16vw;
    }

    *::-webkit-scrollbar {
        display: none;
    }
    
    /* Hide scrollbar for IE, Edge and Firefox */
    * {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    } 
}

*{
    overscroll-behavior: none;
}