@font-face {
    font-family: 'apfel';
    src: url(../fonts/ApfelGrotezk-Regular.otf);
}

/*******************INDEX******************/

#AW {
    font-family: 'apfel';
    font-size: 30px;
    height: 100%;
    line-height: 50px;
    padding-left: 15px;
    margin: 0;
}

#photo {
    font-family: 'apfel';
    font-size: 30px;
    text-decoration: underline red;
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
    line-height: 50px;
    text-align: right;
    top: 0;
    right: 15px;
}

#IDV {
    font-family: 'apfel';
    font-size: 30px;
    text-decoration: underline rgb(0, 191, 255);
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
    line-height: 50px;
    text-align: right;
    top: 0;
    right: 15px;
}

#affiche {
    font-family: 'apfel';
    font-size: 30px;
    text-decoration: underline blueviolet;
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
    line-height: 50px;
    text-align: right;
    top: 0;
    right: 15px;
}

#edition {
    font-family: 'apfel';
    font-size: 30px;
    text-decoration: underline blue;
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
    line-height: 50px;
    text-align: right;
    top: 0;
    right: 15px;
}

#typo {
    font-family: 'apfel';
    font-size: 30px;
    text-decoration: underline green;
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
    line-height: 50px;
    text-align: right;
    top: 0;
    right: 15px;
}

#entete{
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    border-bottom: 2px solid black;
    background-color: white;
    z-index: 100;
}

#entete1{
    position: fixed;
    top: 52px;
    left: 0px;
    height: 52px;
    width: 100%;
    border-bottom: 2px solid black;
    background-color: white;
    z-index: 2;
}

#grille{
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0;
    right: 0;
    transition: all 0.5s;
    border-top: 2px solid black;
}

#boutons {
    font-family: 'apfel';
    font-size: 30px;
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% / 3);
    height: 100%;
}

#btn-index, #btn-about {
    position: relative;
    width: calc(50% - 2px);
    height: 100%;
    border-left: 2px solid black;
    display: inline-block;
    line-height: 50px;
    text-align: center;
}

#btn-index:hover, #btn-about:hover {
    text-decoration: underline;
    opacity: 65%;
}

#box-index, #box-about {
    position: absolute;
    top: 52px;
    left: 0;
    width: 100%;
    height: 300px;
}


/*************************VIGNETTES*************************/

.lien-texte-icone, .lien-texte-icone1, .lien-texte-icone2, .lien-texte-icone3, .lien-texte-icone4 {
    font-family: 'apfel';
    font-size: 30px;
    display: inline-flex; /* Place l'image et le texte côte à côte */
    align-items: center; /* Centre verticalement l'image et le texte */
    text-decoration: none; /* Supprime le soulignement du lien */
    color: black;
}

.icone {
    width: 45px; /* Réduit la taille de l'image */
    height: auto; /* Conserve les proportions de l'image */
    margin: 8px; /* Ajoute de l'espace entre l'image et le texte */
}

.lien-texte-icone:hover {
    color: rgb(0, 191, 255);
    transition: all 0.5s;
}

.lien-texte-icone1:hover {
    color: blue;
    transition: all 0.5s;
}

.lien-texte-icone2:hover {
    color: blueviolet;
    transition: all 0.5s;
}

.lien-texte-icone3:hover {
    color: green;
    transition: all 0.5s;
}

.lien-texte-icone4:hover {
    color: red;
    transition: all 0.5s;
}

#hover-text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-family: 'apfel';
    font-size: 30px;
    opacity: 0; /* Par défaut, le texte est invisible */
    transition: opacity 0.5s ease-in-out; /* Animation d'apparition */
}


.vignette {
    position: relative;
    background-color: rgb(255, 231, 203);
    height: 500px;
    width: calc(100% / 3);
    display: inline-block;
    float: left;
}

.lien-vignette {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.bg-image1, .bg-image2, .bg-image3, .bg-image4, .bg-image5, .bg-image6, .bg-image7  {
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-position: center;
    transition: all 0.5s;
}

.bg-image1 {
    background-size: auto 80%;
}
.bg-image1:hover {
    background-size: auto 90%;
}


.bg-image2 {
    background-size: auto 65%;
}
.bg-image2:hover {
    background-size: auto 75%;
}


.bg-image3 {
    background-size: auto 85%;
}
.bg-image3:hover {
    background-size: auto 95%;
}


.bg-image4 {
    background-size: auto 100%;
}
.bg-image4:hover {
    background-size: auto 110%;
}


.bg-image5 {
    background-size: auto 75%;
}
.bg-image5:hover {
    background-size: auto 85%;
}


.bg-image6 {
    background-size: auto 63%;
}
.bg-image6:hover {
    background-size: auto 73%;
}


.bg-image7 {
    background-size: auto 90%;
}
.bg-image7:hover {
    background-size: auto 100%;
}




/********************PROJETS*******************/



#nom-projet {
    font-family: 'apfel';
    font-size: 30px;
    position: absolute;
    height: 100%;
    width: 100%;
    line-height: 50px;
    margin: 0;
    left: 0;
    text-align: center;
}

#grille-projet {
    background-color: black;
    position: absolute;
    top: 106px;
    left: calc(100% / 3);
    bottom: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.vignette-projet {
    position: relative;
    background-color: black;
    height: 800px;
    width: 100%;
    overflow: hidden;
}

.vignette-projet-paysage {
    flex: 1 1 100%;
    box-sizing: border-box;
    /*width: 100%;
    white-space: nowrap;
    display: inline-block;*/
}

.vignette-projet-portrait {
    flex: 1 1 50%;
    box-sizing: border-box;
    /*width: 50%;
    white-space: nowrap;
    float: left;*/
}

.vignette-projet-paysage img {
    width: 100%;
    height: auto;
}

.vignette-projet-portrait img {
    width: 100%;
    height: auto;
}

.bg-image-portrait {
    background-size: cover;
    background-repeat: no-repeat;
    width: 50%;
    height: 100%;
    background-position: center;
}

#boutons2 {
    font-family: 'apfel';
    font-size: 37px;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

#btn-back, #btn-next {
    font-family: 'apfel';
    font-size: 32px;
    position: relative;
    width: 30px;
    height: 100%;
    display: inline-block;
    padding-left: 15px;
    line-height: 54px;
    text-decoration: none;
    color: black;
}

#btn-croix {
    font-family: 'apfel';
    font-size: 35px;
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    top: 0;
    right: 0;
}

#croix {
    text-decoration: none;
    color: black;
    line-height: 50px;
}

#infos {
    font-family: 'apfel';
    font-size: 18px;
    line-height: 24px;
    position: fixed;
    width: calc(100% / 3);
    top: 106px;
    left: 0;
    height: 100vh;
    border-right: 2px solid black;
    background-color: rgb(255, 231, 203);
    z-index: 1000;
}

#texte-infos {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid black;
    line-height: 1.3em;
}

#intro-info {
    border-bottom: 2px solid black;
}

#infos1, #infos2 {
    position: relative;
    display: inline-block;
    line-height: 1.5em;
    padding-top: 20px;
    padding-bottom: 20px;
    vertical-align: top;
}

#infos1 {
    width: 120px;
    padding-left: 20px;
}

#infos2 {
    width: calc(100% - 150px);
    /*border-left: 2px solid black;*/
}


/**** CSS MOBILE ****/

@media (orientation: portrait) {

    body {
        margin: 0;
    }

    #infos {
        position: relative;
        font-size: 15px;
        width: 100%;
        height: fit-content;
        border:0;
        z-index: -1;
    }

    #grille-projet {
        position: relative;
        left: 0;
        width: 100%;
        height: fit-content;
        z-index: -1;
    }
    
    #texte-infos {
        padding-bottom: 20px;
    }

    #nom-projet { 
        font-size: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 50%;
        left: 25%;
        white-space: nowrap;
    }

    .vignette {
        width: 100%;
    }

    #AW {
        font-size: 20px;
    }

    #photo, #IDV, #edition, #affiche, #typo {
        font-size: 20px;
    }

    #boutons {
        font-size: 20px;
        width: 200px;
    }

    #btn-back, #btn-next {
        font-size: 25px;
        width: 15px;
    }
    
    #btn-croix {
        font-size: 23px;
    }

    #btn-index, #btn-about {
        border-left: none;
    }

    .lien-texte-icone, .lien-texte-icone1, .lien-texte-icone2, .lien-texte-icone3, .lien-texte-icone4 {
        font-size: 20px;
    }
    
    .icone {
        width: 25px; /* Réduit la taille de l'image */
        height: auto; /* Conserve les proportions de l'image */
        margin: 4px; /* Ajoute de l'espace entre l'image et le texte */
    }

    #hover-text {
        font-size: 20px;
    }
    
}