@font-face {
    font-family: "Kotta";
    src: url(css/fonts/KottaOne-Regular.woff) format(woff),
        url(css/fonts/KottaOne-Regular.woff2) format(woff2);
}


@font-face {
    font-family: "jgs7";
    src: url(css/fonts/jgs7.woff) format(woff),
        url(css/fonts/jgs7.woff2) format(woff2);
}

@font-face {
    font-family: "Old_efface";
    src: url(css/fonts/OldStandardTT-Regular.woff) format(woff),
        url(css/fonts/OldStandardTT-Regular.woff2) format(woff2);
}

@font-face {
    font-family: "Old";
    src: url(fonts/OldRound-30-1-1.woff) format(woff),
        url(fonts/OldRound-30-1-1.woff2) format(woff2);
}

@font-face {
    font-family: "avara";
    src: url(css/fonts/Avara-Bold.woff) format(woff),
        url(css/fonts/Avara-Bold.woff2) format(woff2);
}

@font-face {
    font-family: "handjet_medium";
    src: url(fonts/handjet-medium.woff) format("woff"),
        url(fonts/handjet-medium.woff2) format("woff2");
}

@font-face {
    font-family: "handjet_bold";
    src: url(fonts/Handjet-Bold.woff) format("woff"),
        url(fonts/Handjet-Bold.woff2) format("woff2");
}

@font-face {
    font-family: "handjet_light";
    src: url(fonts/Handjet-Light.woff) format("woff"),
        url(fonts/Handjet-Light.woff2) format("woff2");
}

@font-face {
    font-family: "jgs9";
    src: url(fonts/jgs9.woff) format(woff),
        url(fonts/jgs9.woff2) format(woff2);
}

@font-face {
    font-family: "handjet_light";
    src: url(fonts/Handjet-Light.woff) format("woff"),
        url(fonts/Handjet-Light.woff2) format("woff2");
}



/* ---------------------------------------------------------------------------- pages */

@page {
    size: 95mm 195mm;
    /*marks: crop;*/
    @top-center {
        font-size: 12px;
        font-family: "handjet_light";
    }

}



@page :left {
    margin: 15mm 15mm 25mm 8mm;

    @bottom-left {
        content: counter(page);
        font-family: 'handjet_light';
        font-size: 14px;
    }

    @top-center {
        /* injecte l’élément définit dans running() dans une margin-box */
        content: "Espaces et avatars dans les jeux-vidéo"
    }
}

@page :right {
    margin: 15mm 8mm 25mm 15mm;

    @bottom-right {
        content: counter(page);
        font-family: 'handjet_light';
        font-size: 14px;
    }

    @top-center {
        /* injecte l’élément définit dans running() dans une margin-box */
        content: element(monTitreCourant);
    }

}

@page macouverture {
    background: rgb(255, 255, 255);
    margin-top: 40mm;

    @bottom-right {
        content: none;
    }

    @top-center {
        content: none;
    }
}

@page photo {
    margin: 25mm 10mm 25mm 10mm;

    @top-center {
        content: none;
    }
}

@page :blank {
    @bottom-right {
        content: none;
    }

    @top-center {
        content: none;
    }
}

@page intertitre {

    @top-center {
        content: none;
    }
}

@page colophon {
    @bottom-right {
        content: none;
    }
    @bottom-left {
        content: none;
    }

    @top-center {
        content: none;
    }   
}


.text_colophon {
    page: colophon;
    margin-top: 132mm;
    text-align: center;
}

.text_colophon p{
    font-size: 10pt;
    line-height: 7.5pt;
    margin-bottom: 5pt;
    
}

.text_colophon figure p {
    font-family: "Handjet_bold"  ;
}


@page page_1 {
    @bottom-right {
        content: none;
    }
    @bottom-left {
        content: none;
    }

    @top-center {
        content: none;
    }

}

@page go {
    @bottom-right {
        content: none;
    }
    @bottom-left {
        content: none;
    }

    @top-center {
        content: none;
    }

}

.page_1  {
    page: page_1;
        display: flex;
        position: relative;
        top: 150mm;
        left: 20mm;

}

#loading {
  height: 0%;
    width: 50%;
    
}

.go  {
    page: go;
        display: flex;
        position: relative;
        top: 143mm;
        left: 20mm;


}

.go img {
    width: 50%;
}


.titre {
    margin: 0;
}
.soustitre {
    margin: 0 0 2em;
}

/* ---------------------------------------------------------------------------- styles */


body {
    background-color: rgb(255, 255, 255);
}

h1 {
    font-family: "handjet_bold";
    font-size: 35px;
    /*line-height: 2.5vw;*/
    text-align: left;
    /*text-shadow: 0 2px 5px rgba(0,255,0,0.9);*/
    color: rgb(0, 0, 0);


}

#sommaire,
h2 {
    font-family: "jgs7";
    font-size: 24px;
    line-height: .8;
    color: green;
    text-align: center;
    
    margin: 0;
    break-before: right;
    display: flex;
    height: 100%;
    align-items: center;
}
h2 {
    page: intertitre;
}

h3 {
    font-family: "jgs7";
    font-size: 18px;
    line-height: 75%;
    color: green;
    text-align: center;
    page-break-before: always;
    margin: 0.1em 0 1.1em;
}

p {
    color: rgb(52, 52, 52);
    font-family: "handjet_medium";
    font-size: 12pt;
    margin-top: 0;
    /* background: #eee; */
}

ul {
    font-family: "handjet_medium";
    font-size: 100%;
    list-style: none;
    text-align: center;
}

li {
    text-align: left;

}

img {
    /* height: 100%;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0px; */
    /*filter: grayscale(100%);
    
    /*break-before: right;*/
}

em {
    font-family: 'handjet_medium';
    /*color: rgb(70, 255, 49);*/
    outline: black;
    font-style: normal;
    /*font-size: 14px;*/
}

a {
    color: black;
    text-decoration: none;
}

br {
    break-after: page;
}

/* ---------------------------------------------------------------------------- styles */



#sous_titre {
    font-family: "handjet_medium";
    font-size: 20px;
    line-height: 1.25vw;
    text-align: left;
    /*text-shadow: 0 2px 5px rgba(0,255,0,0.9);*/
    color: rgb(142, 255, 67);
    transform: rotate(30deg);
    margin-top: 100px;
}

.couverture {
    page: macouverture;
    color: white;
}

/* supprime l’élément .title de l’affichage grâce à la déclaration position: running() */
.title {
    position: running(monTitreCourant);

}

#sommaire {
    break-after: unset;
    font-family: font-family: "jgs7";
}
#som {
    margin-top: 2em;
}
#som .titres {
    break-before: unset;
    margin-top: 0;
}



#som li {
    margin: .75em 0;
}

#table-of-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 40mm;

}



.photo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    page: photo;
}

.image-container {
    width: 100%;
    aspect-ratio: 9/16;
    margin: 0;
    position: relative;
}

.image-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

.legendes { 
    bottom: 0;
    position: absolute;
    margin: 0;
    transform: translateY(100%);
    padding-top: .5em;
    font-size: 8pt;
}

.legendes em {
    font-size: 8pt;
}

.rotated {
    transform: rotate(180deg);
}


.lien{
    color: rgb(0, 103, 192);
    font-size: 8pt;
}

.specifique {
    color: rgb(0, 171, 132);
}

.console {
    color: rgb(230, 0, 18);
}

/* ------------------------------------------------------------------------ Spacing */
[style^="--ls"] {
    letter-spacing: calc(var(--ls, 0) * -0.001em);
}