*{
    box-sizing: border-box;
}

html{
}

body{
    margin: 0;
    overflow-x: hidden;
}

div {
    user-select: none;
}



@font-face{
    font-family: "Hershey Noailles OldFrench Bold";
    src: url("Hershey-Noailles-OldFrench-Bold.ttf") format("truetype");
}

@font-face{
    font-family: "Hershey Noailles OldFrench Light";
    src: url("Hershey-Noailles-OldFrench-Light.ttf") format("truetype");
}

/*Pour les gros textes*/
@font-face{
    font-family: "BBB Herthey Futural 15";
    src: url("BBB-Herthey-Futural--15.otf") format("opentype");
}

@font-face{
    font-family: "BBB Herthey Futural 40";
    src: url("BBB-Herthey-Futural-40.otf") format("opentype");
}

@font-face{
    font-family: "BBB Herthey Futural 95";
    src: url("BBB-Herthey-Futural-95.otf") format("opentype");
}

/*les rigolotes*/
@font-face{
    font-family: "BBB Readme Italic";
    src: url("BBBReadMe-Italic.otf") format("opentype");
}

@font-face{
    font-family: "BBB Readme Regular";
    src: url("BBBReadMe-Regular.otf") format("opentype");
}




button{

    background: none;
    border: none;

    appearance: none;
    -webkit-appearance: none;

}

.lienProjets{
    text-decoration: black wavy underline;
    font-family: "BBB Herthey Futural 15";
    font-size: 1rem;
}

.lienProjets:hover{cursor: pointer;}




@media (orientation: landscape){
    body{
        margin-bottom: 15vh;
        overflow-x: hidden; 
    }


    /*Noms projets qui apparaissent au survol sur les pages accueil*/
    h1{
        font-family: "BBB Herthey Futural 15";
        font-size: clamp(0.9rem, 1.1vw, 1.2rem);
        margin: 0;
        color: black;
    }

    /*NOMS PROJETS sur les pages individuelles des projets*/
    h2{
        font-family: "BBB Readme Italic";
        font-size: 1rem;
        line-height: 1.2;
        margin-bottom: 0.4rem;
        margin-top: 0;
    }

    /*h2{
    font-family: "Syne Italic";
    font-size: 1.2rem;
    line-height: 1.1;
    margin: 0;
}*/

    /*Techniques de réalisation des projets + Date*/
    h3{
        display: inline;
        font-family: "BBB Herthey Futural 15";
        line-height: normal;
        font-size: 1rem;
        margin-top: 0.8vh;
    }

    /*TEXTES PROJETS*/
    p{
        font-family: "BBB Herthey Futural 15";
        font-size: 1rem;
        margin: 0;
    }

    /*Titre rubriques CV*/
    h4{
        font-family: "BBB Readme Regular";
        line-height: 2.5;
        font-size: 1rem;
        margin: 0;
    }

    #escargot{
        display: block;
        z-index: 0;
        position: fixed;
        top: 2vh;
        left: 24vw;
        width: 20vh;
        height: 20vh;

        background-image: url(escargot2.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;

        animation: avance 4s linear infinite;

        border: solid black 0px;
    }

    @keyframes avance {
        from { left: 24px; }
        to   { left: 82vw; }
    }

    #escargotDescend{
        display: none;
        z-index: 0;
        position: fixed;
        top: 2vh;
        right: 1vw;
        width: 10vh;
        height: 10vh;

        background-image: url(escargot2.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;

        border: solid black 1px;
    }


    #fleche{
        z-index: 1;
        position: fixed;
        top: 90vh;
        right: 2vw;
        left: 94vw;
        height: 7vh;
        text-align: center; 
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url(fleche_2.png);
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
    }
    #fleche:hover{cursor: pointer;}

    #croix{
        display: none;
        z-index: 1;
        position: fixed;
        top: 7vh;
        right: 2vw;
        left: 94vw;
        height: 7vh;
        text-align: center; 
        align-items: center;
        justify-content: center;
        background-image: url(fleche_2.png);
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
        transform: rotate(-90deg);
    }

    #croix:hover{cursor: pointer;}

    #colonne{
        position: fixed;

        width: clamp(180px, 20vw, 320px);

        top: 20vh;
        left: 2.5vw;

        display: flex;
        flex-direction: column;
    }

    .rubrique {
        font-family: "Hershey Noailles OldFrench Light";
        font-size: 1.5rem;
        line-height: 1.3;
        margin: 0;
        text-align: left;

        color: black;

        padding: 0;
        margin: 0;
    }

    .rubrique:hover{
        cursor: pointer;
        font-family: "BBB Readme Italic";
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .rubrique.auClick{
        font-family: "BBB Readme Italic";
        font-size: 1.1rem;
        line-height: 1.6;
    }

    #Louise{
        position: fixed;
        top: 4vh;
        left: 2.5vw;
        width: clamp(180px, 20vw, 320px);

        font-family: "Hershey Noailles OldFrench Light";
        font-size: 1.5rem;
        margin: 0;
        text-align: left;

        color: black;

        padding: 0;
        margin: 0;

        background: none;
        border: none;

        appearance: none;
        -webkit-appearance: none;
    }
    #Louise:hover{
        cursor: pointer;
        font-family: "BBB Readme Italic";
        font-size: 1.1rem;
        line-height: 1.6;
    }

    #projets{
        z-index: 1;
        margin-bottom: 2vw;
    }

    #apropos{
        z-index: 1;
        margin : 5vh 0 0 0;
    }
    #apropos:hover{cursor: pointer;}





    /*LE BLOC CENTRAL AVEC LES COLONNES D'IMAGES*/

    #grosbloc{
        display: flex;
        visibility: hidden;
        opacity: 0;

        column-gap: 2rem;

        margin-left: 19vw;
        margin-bottom: 15vh; 
        padding: 20vh 5vw 10vh;

        width: calc(100% - 22vw);

        align-items: flex-start;
    }

    .petitbloc{
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .petitbloc:hover{cursor: pointer;}


    /* La taille des div dans le petitbloc */
    .grand{
        height: clamp(300px, 30vw, 700px);
    }

    .petit{
        height: clamp(180px, 15vw, 400px);
    }

    .images{
        position: relative;
        width: 100%;
        margin: 0 2vw 5vh 0;
        break-inside: avoid;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .images img{
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        opacity: 1;
        max-width: 100%;
    } 

    .images:hover img {
        opacity: 0.3;
        transition: opacity 0.3s ease;
        filter: grayscale(100%);
    }

    /* Texte caché par défaut */
    .images .txt {
        position: absolute;
        top: 0;
        left: 0;

        opacity: 0;
        transition: opacity 0.3s ease;
        display: flex;

        text-align: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0 1vw 0 1vw;

        background-color: rgba(164, 233, 255, 0.4);

    }

    /* Apparition au survol */
    .images:hover .txt {
        opacity: 1;
    }

    .bd{display: block;}
    .com{display: block;}
    .illu{display: block;}
    .ed{display: block;}
    .col{display: block;}
    .brod{display: block;}
    .dip{display: block;}

    #memoire{
        border: solid #7300ff 0;
    }
    #blocMem{display: none;}

    #herissons{
        border: solid #7300ff 0;
    }
    #blocHerissons{display: none;}

    #bdvelo{
        display: block;
        border: solid #7300ff 0;
    }
    #blocBdvelo{display: none;}

    #cartenoel{
        border: solid #7300ff 0;
    }    
    #cartenoel img{transform: scale(1.1);}
    #blocCartenoel{display: none;}

    #angouleme{
        display: block;
        border: solid #7300ff 0;
    }    
    #angouleme img{
        width: 120%;
        transform: translateY(0vh);
    }
    #blocAngouleme{display: none;}

    #colomiers{
        display: block;
        border: solid #7300ff 0;
    }
    #blocColomiers{display: none;}

    #lvpb{
        border: solid #7300ff 0;
    }
    #blocLvpb{display: none;}

    #epoque{
        border: solid #7300ff 0;
    }
    #epoque img{object-position: right 0vw top -5vh;}
    #blocEpoque{display: none;}

    #fresque{
        display: block;
        border: solid #7300ff 0;
    }
    #blocFresque{display: none;}

    #lutins{
        border: solid #7300ff 0;
    }
    #lutins img{transform: scale(1.12);}
    #blocLutins{display: none;}

    #lutinfleur{
        border: solid #7300ff 0;
    }
    #lutinfleur img{}
    #blocLutinfleur{display: none;}

    #vrac24{
        border: solid #7300ff 0;
    }
    #vrac24 img{
        transform: scale(1.2);
        object-position: right -1vw top -1vh;
    }
    #blocVrac24{display: none;}

    #vrac25{
        border: solid #7300ff 0;
    }
    #vrac25 img{
        transform: scale(1.2);
        object-position: right 0.5vw top -1vh;
    }
    #blocVrac25{display: none;}

    #ptitVelo{
        border: solid #7300ff 0;
    }
    #blocPtitVelo{display: none;}

    #jardiniere{
        border: solid #7300ff 0;
    }
    #blocJardiniere{display: none;}

    #boule{
        border: solid #7300ff 0;
    }
    #blocBoule{display: none;}

    #fleurFusain{
        border: solid #7300ff 0;
    }
    #blocFleurFusain{display: none;}

    #velobrod{
        border: solid #7300ff 0;
    }
    #velobrod img{object-position: right 0vw bottom -4vh;}
    #blocVelobrod{display: none;}

    #elean{
        border: solid #7300ff 0;
    }    
    #elean img{transform: scale(1.08);}
    #blocElean{display: none;}

    #ambroise{
        border: solid #7300ff 0;
    }
    #ambroise img{object-position: right 0vw bottom -3vh;}
    #blocAmbroise{display: none;}

    #carteenfants{
        border: solid #7300ff 0;
    }
    #blocCarteenfants{display: none;}

    #wip{
        border: solid #7300ff 0;
    }
    #blocWip{display: none;}

    #dna{
        border: solid #7300ff 0;
    }
    #blocDna{display: none;}

    #dnsep{
        border: solid #7300ff 0;
    }
    #blocDnsep{display: none;}

    #alexia{
        border: solid #7300ff 0;
    }
    #blocAlexia{display: none;}

    #krac{
        border: solid #7300ff 0;
    }
    #krac img{transform: scale(1.12);}
    #blocKrac{display: none;}

    #milleclub{
        border: solid #7300ff 0;
    }
    #blocMilleclub{display: none;}

    #etc{
        border: solid #7300ff 0;
    }
    #blocEtc{display: none;}

    #noletnico{
        border: solid #7300ff 0;
    }
    #blocNoletnico{display: none;}

    #portrait{
        border: solid #7300ff 0;
    }
    #blocPortrait{display: none;}

    #arpentage{
        border: solid #7300ff 0;
    }
    #blocArpentage{display: none;}



    /*LES BLOCS IMAGES QUAND ON CLIQUE SUR LES PROJETS*/

    .blocprojet{
        display: grid;

        grid-template-columns: 60% 40%;

        column-gap: 2.8rem;

        margin-left: 15vw;

        padding: 20vh 8vw 10vh 5vw;

        width: calc(100% - 22vw);
        box-sizing:border-box;
        border: solid red 0;
    }

    .imgBloc{
        border: solid red 0px;
        z-index: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        bottom: 6vh;
        border: solid #7300ff 0;
        overflow: hidden;
    }

    .imgBloc img{
        margin-bottom: 5vh;
        width: 100%;
        display: block;
    }

    .imgBloc video{
        width: 100%;
        display: block;
    }

    .imgimg{
        width: 100%;
        overflow: hidden;
    }

    .txtBloc{
        position: relative;

        width: 100%;
        border: solid #7300ff 0;
    }

    .imgLutinfleur img{
        width: 100%;
        height: 100%;
        position: relative;
        transform: scale(1.2);
        object-fit: contain;
        background-repeat: no-repeat;
        display: block;
    }

    .imgLutinfleur{
        margin-bottom: 5vh;
        overflow: hidden;
    }

    .imgPortrait img{
        position: relative;
        top: -10vh;
        transform: scale(1.2);
        background-repeat: no-repeat;
        display: block;
    }

    .imgPortrait{
        height: clamp(500px, 130vw, 1200px);
        overflow: hidden;
    }

    .imgLvpb img{
        transform-origin: top;
        transform: scale(1.7);
        background-repeat: no-repeat;
        display: block;
    }

    .imgLvpb{
        height: 105vh;
        overflow: hidden;
    }

    .imgLutins img{
        position: relative;
        top: -4vh;
        transform: scale(1.18);
        background-repeat: no-repeat;
        display: block;
    }

    .imgLutins{
        height: clamp(500px, 95vw, 1200px);
        overflow: hidden;
    }

    .imgLutins2 img{
        position: relative;
        top: -5vh;
        transform: scale(1.07);
        background-repeat: no-repeat;
        display: block;
    }

    .imgLutins2{
        height: clamp(500px, 95vw, 1200px);
        overflow: hidden;
    }




    /*BLOC A PROPOS*/

    .blocApropos{display: none;}

    .blocBio{

        grid-template-columns: 60% 40%;

        column-gap: 2.8rem;

        margin-left: 15vw;

        padding: 20vh 8vw 10vh 5vw;

        width: calc(100% - 22vw);
        box-sizing:border-box;
        border: solid red 0px;
    }


    #blocCV{
        grid-column: 1 / 3;

        grid-template-columns: 50% 50%;

        display: none;
        flex-direction: row;

        column-gap: 2.8rem;
        margin-left: 15vw;
        margin-bottom: 15vh;

        padding: 0vh 8vw 0vh 5vw;

        width: calc(100% - 22vw);

        box-sizing: border-box;

        border: solid red 0;
    }

    .catCV{
        flex:1 1 0;

        min-height:0;

        box-sizing:border-box;

        border:solid black 0;
    }

    .catCV h3,
    .catCV p{display: inline;}



    /*#blocCV{
    display: flex;
    column-gap: 2rem;


    margin: 5vh 24vw 10vh ;

    width: 67.5vw;

    box-sizing: border-box;

    border: solid red 1px;
}*/



    #credit{
        padding-left: 25vw;
        padding-right: 25vw;

        font-family: "Hershey Noailles OldFrench Light";
        font-size: 1.2rem;
        text-align: center;

        border: solid black 0;

    } 

    .lienCredit{
        color: black;
        text-decoration: black wavy underline;
    }

    .lienCredit:hover{cursor: pointer;}

    .lienContact{
        color: black;
        text-decoration: black wavy underline;
    }

    .lienContactMail{
        line-height: 1.8;
        color: black;
        text-decoration: black wavy underline;
    }

    .lienContact:hover{cursor: pointer;}








    /*FORMAT PORTABLE

    @media screen and (max-width: 900px){

    #colonne{
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    padding: 2rem;
}

    #Louise{
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    padding: 2rem;
}

    #grosbloc{
    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(250px,1fr));

    gap:2rem;
}

    .petitbloc{
    width: 100%;
}

    .blocprojet{
    display: flex;
    flex-direction: column;

    position: relative;

    left: 0;
    right: 0;
    top: 0;

    width: 100%;

    padding: 2rem;
}

    .txtBloc{
    position: relative;
    left: 0;
    width: 100%;
    margin-top: 2rem;
}

    #fleche,
    #croix{
    right: 1rem;
    left: auto;
}
}*/