/*
@font-face {
    font-family: "MaziusDisplay";
    src: url("font/MaziusDisplay-ExtraItalicBold.woff2") format("woff2");
    font-style: italic;
    font-weight: 700; 
}

@font-face {
    font-family: "MaziusDisplay";
    src: url("font/MaziusDisplay-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700; 
}
*/

:root {
    --kvviolet: #310732; /* violet principal */
    --kvbeige: #F7EEE2; /* beige principal */
    --kvviolet_rgb: 49,7,50; /* violet principal */
    --kvbeige_rgb: 247,238,226; /* beige principal */
}

/* FONT DEFINITION - regular300 - medium500 - bold800 - italic400*/
@font-face {
    font-family: "MaziusDisplay";
    src: url("font/MaziusDisplay-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 300; 
}
@font-face {
    font-family: "ApfelGrotezk";
    src: url(font/ApfelGrotezk-Mittel.woff2);
    font-style: normal;
    font-weight: 500;
}
@font-face {
    font-family: "ApfelGrotezk";
    src: url(font/ApfelGrotezk-Fett.woff2);
    font-style: normal;
    font-weight: 800;
}
@font-face {
    font-family: "MaziusDisplay";
    src: url("font/MaziusDisplay-Extraitalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400; /* Regular italic weight */
}

/* SUPPRESSION DES CARACTERISTIQUES HTML PAR DEFAUT */
a{
    text-decoration:none;
    color: var(--kvviolet);
}
html{
    scroll-behavior: smooth;
    overflow-x: hidden;
    margin :0;
    padding: 0;
    background-color: var(--kvbeige);
    /*default text*/
    font-family: "ApfelGrotezk", sans-serif;
    font-size: 1.45vw;
    font-weight:400;
    color:var(--kvbeige);
}
body{
    margin:0;
    width:100vw;
    padding: 0;
}

/* ----DEFAULT SPECS----*/
/*--TEXT STYLES - default text in "html" tag--*/
/* Title */
.title{
    font-family: "Kanit", sans-serif;
    font-size:6vw;
    font-weight:800;
    color:var(--kvbeige);
    line-height: 0.8em;
}
/* subTitle*/
.subTitle{
    font-family: "MaziusDisplay", serif;
    font-weight:400;
    font-size:1.8vw;
    font-style:italic;
    color:var(--kvbeige);
}
/*italic*/
.italic{
    font-family: "MaziusDisplay", serif;
    font-style:italic;
    font-weight:400;
    font-size:1.45vw;
}
/*--PAGE SPECS--*/
section{
    background:var(--kvviolet);
    padding:0 10%;
}
p{
    margin:0;
}
.text a{
    color:var(--kvbeige);
    font-family: "MaziusDisplay", serif;
    font-style:italic;
}
.text a:hover{
    text-decoration:underline;

}

/* Mise en avant des premiers mots des bullets */
.bullet-title {
    font-size: 1.5em;
    color:var(--kvbeige);
    text-decoration: underline;
}


/* HEADER BAR */
#logo{
    height : 5.6vh;
    }
header{
    height : 8vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
header a{
    height:5.6vh;
}


/*BUTTON COMPONENT*/
.button{
    cursor : pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color:var(--kvviolet);
    font-family: "ApfelGrotezk", sans-serif;
    font-size: 1.2vw;
    font-weight:800;
    padding: 0.5vw 1.5vw;
    border-radius:1000px;
    backdrop-filter: blur(10px);
    background-color: rgba(var(--kvbeige_rgb), 0.6);

}
.button:hover{
    background-color: rgba(var(--kvbeige_rgb), 1);
}
.homeButton{
    margin:5vw 0 0 0;
}

/* FOOTER - MENTIONS LEGALES*/
footer{
    position: absolute;
    top:100%;
    left:100%;
    transform: translate(-100%,-100%);
    color:rgba(var(--kvbeige_rgb), 0.5);
    font-family: "ApfelGrotezk", sans-serif;
    font-size: 0.5vw;
    font-weight:500;
    z-index:4;
    width:5vw;
    padding:0.5vw;
}
footer a{
    color:var(--kvbeige);
}

/*--MOBILE--*/
/*SCROLL BUTTON*/
#scroll{
    display:none;
    cursor:pointer;
}
.mobile{
    display:none;
}

/* HOME PAGE SPECIFIC */
#gradient{
    z-index:1;
    position:absolute;
    height : 92vh;
    width : 100vw;
    background: linear-gradient(270deg, rgba(var(--kvviolet_rgb),1) 20%, rgba(var(--kvviolet_rgb),0) 75%);
}
#background{
    width:100vw;
    height:92vh;
    object-fit: cover;
    object-position: 30% 0;
    z-index:0;
    position:absolute;
}
.home #homeSection{
    padding:0;
    display: flex;
    flex-direction: column;
    align-content:flex-end;
    align-items:flex-end;
    justify-content:space-between;
    height : 92vh;
    width : 100vw;
}
.home aside{
    padding : 0 4vw 0 0;
    max-width: 40%;
    height:85vh;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
}
.home section div{
    z-index:2;
}
.home .title{
    margin:0;
    padding:15% 2% 2% 2%;
}
.home .subTitle{
    padding:0 2% 0 2%;
    margin:0 0 5% 0;
}
.home .vision{
    padding:0 2% 10% 2%;
    font-size: 1.2vw;
}
.home .links{
    padding: 2vh 0;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}

/* ARTICLE SPECIFIC */
#article p{
    font-size:1em;
}
#article .title{
    padding: 4vh 0 1vh 0;
}
#article .subTitle{
    font-size: 3vw;
    padding: 1vh 0;
}
#article #content{
    min-height:92vh;
}

#article .image{
    display:flex;
    align-items: center;
    justify-content: center;
}
#article .image img{
    object-fit: cover;
    padding:2vh 0;
}
/* Images d'article : responsive, pas de crop  ChatGPT ST*/
#article .img_full img{
    width: 96vw;
    height: auto;
    object-fit: contain;
}
#article .img_seventy img{
    width: 68vw;
    height: auto;
    object-fit: contain;
}
#article .img_half img{
    width: 46vw;
    height: auto;
    object-fit: contain;
}
#article .img_third img{
    width: 29vw;
    height: auto;
    object-fit: contain;
}
#article section{
    padding:0 15vw 10vh 15vw;
}
#article .articleHead{
    padding: 0 0 4vh 0;
}

/* TEAM SPECIFIC */
#team{
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    align-content: space-between;
    gap:1.5vw;
    padding: 5vw 12vw;
}
#team .title{
    width:44%;
}
.rs a:hover{
    background-color:rgba(0,0,0,0.1);
    border-radius:50px;
}
.rs a img{
    width:1vw;
    height:1vw;
}
.vcard,.desc{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vcard{
    margin:0 0 0.8vw;
    padding:0.2vw 0.8vw;
    border-radius:0vw;
    background:var(--kvbeige);
    color:var(--kvviolet) !important;
}
.vcard p{
    font-size:1.6vw;
}
.rs a{
    padding:0 0.5vw ;
}
.rs{
    margin:0;
}
.desc img{
    height: 6.5vw;
    border-radius:50vw;
    margin:0 1.5vw 0 0;
}

.desc {
    height:9.8vw;
    font-size:0.95vw;
}
.teammate{
    width:44%;
}

/* Medium devices : 768 -> 1200 */
@media only screen and (max-width: 1200px) {
    #article .title{
        font-size: 8vw;
    }
    #article .subTitle{
        font-size: 5vw;
    }
    #article .text{
        font-size: 2vw;
    }
    #article .image{
        display:flex;
        align-items: center;
        justify-content: center;
    }
    #article .image img{
        object-fit: cover;
        padding:2vh 0;
    }

    #article .img_full img{
        width: 96vw;
        height: auto;
        object-fit: contain;
    }
    #article .img_seventy img{
        width: 68vw;
        height: auto;
        object-fit: contain;
    }
    #article .img_half img{
        width: 96vw;
        height: auto;
        object-fit: contain;
    }
    #article .img_third img{
        width: 46vw;
        height: auto;
        object-fit: contain;
    }

    #article section{
        padding:0 7vw 5vh 7vw;
    }
    .home aside{
        max-width: 48%;
    }
    .title{
        font-size:6.8vw;
    }
    .subtitle{
        font-size:3vw;
    }
    .home .desc{
        font-size: 1.7vw;
    }
    .home .vision{
        font-size: 1.7vw;
    }
    .button{
        font-size: 1.5vw;
    }

    footer{
        font-size: 0.8vw;
        width:8vw;
    }

    .teammate{
        width:100%;
    }
    .vcard p{
        font-size:3vw;
    }
    .desc img{
        height: 11vw;
    }
    .desc {
        height:13vw;
        font-size:1.5vw;
    }
    .rs a img{
        width:2vw;
        height:2vw;
    }
} 

/* small devices : 0 -> 768 */
@media only screen and (max-width: 768px) {
    #article .title{
        font-size: 10vw;
    }
    #article .subTitle{
        font-size: 6vw;
    }
    #article .text{
        font-size: 4vw;
    }

    #article .image{
        display:flex;
        align-items: center;
        justify-content: center;
    }

    #article section{
        padding:0 4vw 4vh 4vw;
    }

    .home section{
        align-content:flex-start;
        align-items:flex-start;
        height:92vh;
        width : 100vw;
        padding:0;
    }

    .home aside{
        padding : 0 0 0 4vw;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content:flex-end;
        height:100%;
    }
    .home #scroll{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        font-family: "ApfelGrotezk", sans-serif;
        font-size: 3vw;
        font-weight:500;
        color:var(--kvbeige);
        padding:3vw 0 15vw 0;
    }
    .home #gradient{
        position:absolute;
        height : 92vh;
        width : 100vw;
        background: linear-gradient(0deg, rgba(var(--kvviolet_rgb),1) 20%, rgba(var(--kvviolet_rgb),0) 75%);
    }
    .home #background{
        width:100vw;
        height:92vh;
        object-fit: cover;
        object-position: 35% 0;
        z-index:0;
        position:absolute;
    }

    .home .links{
        padding: 3vh 0;
        width:100%;
        display: block;
    }

    .home .title{
        font-size:15vw;
        padding:15% 2% 2% 2%;
    }
    .home .subTitle{
        font-size:10vw;
        padding:0 2% 8% 2%;
        margin:0;
    }
    .home .desc{
        font-size: 5vw;
        color:rgba(var(--kvviolet_rgb),1);
        padding:0 5vw;
        margin:0;
    }

    .desktop{
        display:none !important;
    }

    .mobile{
        display:block;
        margin: 5vw 0 0 0;
    }

    a{
        color: var(--kvbeige);
    }
    .button{
        cursor : pointer;
        width:auto;
        color:var(--kvbeige);
        margin:5vw 5vw;
        font-size: 4vw;
        padding: 2vw 5vw;
        border-radius:1000px;
        backdrop-filter: blur(10px);
        background-color: rgba(var(--kvviolet_rgb),1);
    }
    .button:hover{
        background-color: rgba(var(--kvviolet_rgb),0.5);
    }
    footer{
        position: relative;
        display:flex;
        top:0;
        left:0;
        transform:translate(0,0);
        align-items:center;
        justify-content:center;
        color:rgba(var(--kvviolet_rgb),0.5);
        font-family: "ApfelGrotezk", sans-serif;
        font-size: 4vw;
        font-weight:500;
        z-index:4;
        width:100vw;
        padding:1vw;
        margin:7vw 0 0 0;

    }
    .catchLine{
        color:var(--kvviolet);
        padding:0 10vw;
        font-size:5vw;
    }
    .moreInfo{
        height:fit-content;
        background-color:var(--kvbeige);
    }
    .teammate{
        width:100%;
        padding:0 0 8vw 0;
    }
    .vcard p{
        font-size:5vw;
    }
    .vcard{
        margin:0 0 3vw 0;
    }
    .desc img{
        height: 21vw;
        width: 21vw;
        object-fit: cover;
    }
    .desc {
        flex-direction:column;
        height:fit-content;
        font-size:4vw;
    }
    .rs a img{
        width:3vw;
        height:3vw;
    }
    #team{
        padding:0 4vw;
        gap:0;
    }
    #team .title{
        margin-top:7vw;
        padding:0 0 8vw 0;
        font-size:28vw;
    }
} 

}