@font-face {
    font-family: "hauora";
    src: url(../font/hauora/Hauora-ExtraLight.woff2);
}

@font-face {
    font-family: "genakoburi";
    src: url(../font/genakoburi/GenAKoburiMinchoH-Regular.ttf);
}

@font-face {
    font-family: "genakoburioblique";
    src: url(../font/genakoburi/GenAKoburiMinchoH-Oblique.ttf);
}


:root{
    --titre: clamp(1.7rem, 2vw, 5rem);
    --sous-titre: clamp(1.3rem, 1.3vw, 10rem);
    --note: clamp(1rem, 1vw, 2rem);

    --colorAnn: rgb(255, 177, 177);
    --colorRef: rgb(175, 244, 160);
    --colorGloss: rgb(182, 220, 254);
    --colorBackground: rgb(255, 255, 255);
}

body{
    margin: 2%;
    font-family: sans-serif;
    background-color: var(--colorBackground);
}

.contener_general{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    position: relative;
    z-index: 102;
}



/* HEADER --------------------------------------------------------------------------------------------------*/
.contener_categories{
    position: sticky;
    top: 4%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    height: auto;
    width: auto;
    box-sizing: border-box;
    flex-wrap: wrap;
    margin-bottom: clamp(20px, 1%, 30px);
    width: fit-content;
    z-index: 10000;
}

.categorie{
    font-size: var(--titre);
    font-family: "hauora";
    margin-right: 12px;
    margin-bottom: 0px;
    color: black;
    text-decoration: none;
    padding: 7px 15px;
    background-color: white;
    border-radius: 0px;
    transition: 150ms all;
}

#annexe{
    border: 3px solid var(--colorAnn);
}

#reference{
    border: 3px solid var(--colorRef);
}

#glossaire{
    border: 3px solid var(--colorGloss);
}

.element_glossaire{
    border: 3px solid var(--colorGloss) !important;
}

.element_ref, .titre_colone{
    border: 3px solid var(--colorRef) !important;
}

.element_annexe figcaption{
    border: 3px solid var(--colorAnn) !important;
    box-sizing: border-box;
}



/* CONTENU --------------------------------------------------------------------------------------------------*/
.contener_contenu{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: clamp(10px, 0%, 30px);
    grid-auto-rows: fit-content(5px);
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

.colone_glossaire_ref{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
    width: auto;
    flex-wrap: wrap;
}

.colone_glossaire_ref a:hover{
    text-decoration: underline solid;
}

.element_annexe, .element_glossaire, .element_ref{
    width: auto;
    margin-bottom: clamp(10px, 2%, 30px);
    text-decoration: none;
    color: unset;
    font-family: "genakoburi";
    font-weight: normal;
    transition: 150ms all !important;
    border-radius: 0px;
    background-color: white;
    box-sizing: border-box;
}

.element_glossaire, .element_ref{
    height: auto;
    font-size: var(--note);
    padding: 3%;
    width: 100%;
    object-fit: cover;
}

.element_ref a{
    word-break: break-all;
}

.element_annexe:hover figcaption, #annexe:hover{
    background-color: var(--colorAnn);
}

.element_ref:hover, #reference:hover{
    background-color: var(--colorRef);
}

.element_glossaire:hover, #glossaire:hover{
    background-color: var(--colorGloss);
}

em{
    font-family: "genakoburioblique";
    font-style: normal;
}



/* ANNEXE --------------------------------------------------------------------------------------------------*/
.element_annexe{
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: unset;
    margin-bottom: clamp(10px, 2%, 30px);
}   

.element_annexe img{
    background-color: gray;
    width: 100%;
    height: 100%;
    border: unset;
    border-bottom: 2px solid black;
    filter: saturate(1);
    transition: 150ms all;
}

.element_annexe figcaption{
    font-size: var(--note);
    width: 100%;
    height: auto;
    padding: 2% 2% 2% 3%;
    transition: 150ms all;
}

/* REFERENCE --------------------------------------------------------------------------------------------------*/
.element_ref strong{
    font-style: italic;
}

.titre_colone{
    font-weight: 900;
    font-size: calc(var(--sous-titre) + 0%);
    color: black;
    background-color: white;
    border: solid 2px var(--colorBackground);
}

.titre_colone:hover{
    color: black !important;
    transform: none;
}

.lien_ref{
    font-weight: normal;
    text-decoration: none;
    color: unset;
}

.survol:hover a{
    text-decoration: underline solid;
}

.contener_bouton_sommaire{
    z-index: 102;
}

.contener_bouton_sommaire{
    z-index: 103;
}

@media screen and (max-width:700px) {
    body{
        margin: 0% clamp(10px, 2%, 30px) clamp(10px, 2%, 30px) clamp(10px, 2%, 30px);
    }
    .contener_categories{
        top: clamp(10px, 2%, 30px) !important;
        margin-bottom: clamp(25px, 2%, 30px);
    }

    .contener_contenu{
        grid-template-columns: 100%;
    }

    .categorie{
        margin-top: 1%;
        margin-right: 1%;
    }
}