@font-face {
    font-family: "happy_time";
    src: url(../font/happy_time/happy-times-NG_regular_master_web.woff2);
}

@font-face {
    font-family: "happy_time_italic";
    src: url(../font/happy_time/happy-times-NG_italic_master_web.woff2);
}

@font-face {
    font-family: "zen_kaku";
    src: url(../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.ttf);
}

@font-face {
    font-family: "zen_kaku_bold";
    src: url(../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Bold.ttf);
}

@font-face {
    font-family: "ft88";
    src: url(../font/ft88/FT88-Regular.otf);
}

@keyframes gradient {
    0%{
        background-position: 0% 0%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    25%{
        background-position: 100% 100%;
        transform: translate(-50%, -50%) rotate(360deg);
    }
    50%{
        background-position:  0% 0%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    75%{
        background-position:  100% 100%;
        transform: translate(-50%, -50%) rotate(100deg);
    }
    100%{
        background-position:  0% 0%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

@keyframes gradient_barre_titre {
    0%{
        background-position: 0% 0%;
    }
    100%{
        background-position: 100% 0%;
    }
}

@keyframes gradient_icone {
    0%{
        background-position: 0% 0%;
    }
    100%{
        background-position: 0% 100%;
    }
}

@keyframes gradient_logo {
    0%{
        background-position: center, 0% 0%;
    }
    100%{
        background-position: center, 100% 0%;
    }
}

@keyframes gradient_num_image {
    0%{
        color: coral;
    }
    33%{
        color: violet;
    }
    66%{
        color: cornflowerblue;
    }
    100%{
        color: coral;
    }
}

@keyframes rebondis {
    0%{
        transform: translate(0%, 0%);
    }

    50%{
        transform: translate(0%, -10%);
    }

    100%{
        transform: translate(0%, 0%);
    }
}

@keyframes defile {
    0%{
        transform: translate(0%, -4.5%);
        opacity: 1;
    }



    24%{
        transform: translate(-105%, -4.5%);
        opacity: 1;
    }

    25%{
        transform: translate(-105%, -4.5%);
        opacity: 0;
    }

    26%{
        transform: translate(105%, -4.5%);
        opacity: 0;
    }

    27%{
        transform: translate(105%, -4.5%);
        opacity: 1;
    }



    50%{
        transform: translate(0%, -4.5%);
    }



    74%{
        transform: translate(-105%, -4.5%);
        opacity: 1;
    }

    75%{
        transform: translate(-105%, -4.5%);
        opacity: 0;
    }

    76%{
        transform: translate(105%, -4.5%);
        opacity: 0;
    }

    77%{
        transform: translate(105%, -4.5%);
        opacity: 1;
    }



    100%{
        transform: translate(0%, -4.5%);
        opacity: 1;
    }
}

:root{
    --border-color: rgb(169, 169, 169);

    --titre: clamp(1.4rem, 1.4vw, 2rem);
    --barre-haut: clamp(1rem, 0.9vw, 2rem);
    --sous-titre: clamp(1.3rem, 1.5vw, 3rem);
    --text: clamp(1rem, 1.2vw, 2rem);
    --icone-bureau: clamp(1rem, 1.1vw, 2rem);
    --barre-bas: clamp(0.7rem, 0.8vw, 2rem);
    --note: clamp(0.8rem, 0.9vw, 2rem);

    --happy-time: "happy_time";
    --zen-kaku: "zen_kaku";
    --zen-kaku-bold: "zen_kaku_bold";
    --ft88: "ft88";
}

body{
    width: 100vw;
    height: 100vh;
    font-family: monospace;
    overflow: hidden;
}

a, button{
    cursor: pointer;
}

.draggable { 
    cursor: move; 
    cursor: grab; 
    cursor: -moz-grab; 
    cursor: -webkit-grab; 
}

.draggable.active { 
    cursor: grabbing; 
    cursor: -moz-grabbing; 
    cursor: -webkit-grabbing; 
}

.bureau, .fenetre_web{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.contener_bouton_sommaire{
    z-index: 102;
}

/* BUREAU --------------------------------------------------------------------------------------------------*/
.bureau{
    z-index: 100;
    filter: saturate(.6);
}

.bureau::before{
    content: "";
    position: absolute;
    left: 0%;
    top: 0%;
    background-size: 800% 800%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    z-index: 0;
    transition: 500ms all;
    width: 250%;
    height: 250%;
    transform-origin: center;
}

#fond{
    background-color: white;
    background-image: url(../img/web_fait_main/fond_sans_ciel.png);
    background-size: cover, auto;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    z-index: 100;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
}

.contener_icones_bureau{
    position: absolute;
    left: 3%;
    width: auto;
    height: auto;
    cursor: pointer;
    transition: 300ms all;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translate(0%, 0%);
    z-index: 101;
}

.icone_bureau{
    width: 3vw;
    height: 3vw;
    min-width: 60px;
    min-height: 60px;
    border-radius: 100%;
    background-color: rgb(255, 255, 255);
    margin-bottom: 15%;
    background-image: url(../img/web_fait_main/logo4.png);
    background-size: 102% 102%;
    background-position: center;
    animation: rebondis 1.5s 0s infinite ease-in-out;
    box-shadow: 0px 0px 40px black;
}

.titre_icone_bureau{
    font-family: var(--ft88);
    font-size: var(--icone-bureau);
    white-space: nowrap;
    text-align: center;
    padding: 2% 10%;
    color: white;
    font-weight: normal;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.1);
}

.contener_icones_bureau:hover{
    transform: scale(1.15, 1.15);
}

#contener_icone_bureau1{
    bottom: 8vh;
    left: 40px;
}

.barre_affichage{
    position: fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 4vh;
    min-height: 35px;
    background-color: lightgray;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-top: solid rgb(255, 255, 255) 1.8px;
    z-index: 105;
    box-sizing: border-box;
}

.barre_affichage span{
    border-top: 1.8px solid black;
    border-right: 1.8px solid white;
    border-bottom: 1.8px solid white;
    border-left: 1.8px solid black;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0% 1%;
    background-color: white;
    color: black;
    white-space: nowrap;
    font-size: var(--barre-bas);
}

#heure{
    font-weight: normal;
}

.contener_empty_titre_heure{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 99%;
    height: 65%;
    margin-bottom: 0.1%;
}

#icone_titre{
    font-family: var(--ft88);
    margin-right: 0%;
    width: auto;
}

#empty{
    margin-right: 0%;
    padding: 0%;
    height: 100%;
    width: 100%;
}

#empty p{
    opacity: 0;
    display: none;
}

#date_heure{
    font-size: var(--barre-bas);
    font-family: var(--ft88);
    width: auto;
}



/* FENETRE-WEB --------------------------------------------------------------------------------------------------*/
.fenetre_web{
    z-index: 101;
    box-sizing: border-box; 
    background-color: lightgray;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border: 8px solid lightgray;
    transform-origin: center;
    width: 50vw;
    height: 75vh;
    transform: translate(-50%, -55%);
    left: 50%;
    top: 50%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
}

.contener_haut_bas{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}


/* CONTENER-HAUT ----------------------------------------------------------------------------------------------------*/
.contener_haut{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.contener_icone_partie, .titre_url{
    width: 100%;
}

.barre_titre{
    font-family: var(--ft88);
    width: 100%;
    box-sizing: border-box;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-image: linear-gradient(to left, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral);
    background-repeat: no-repeat;
    background-size: 1000% 100%;
    background-position: 0% 0%;
    animation: gradient_barre_titre 60s 0s linear infinite;
    font-size: var(--barre-haut);
    border-top: 1.8px solid black;
    border-right: 1.8px solid white;
    border-bottom: 1.8px solid white;
    border-left: 1.8px solid black;
    font-weight: normal;
    letter-spacing: 2px;
    cursor: move;
}

.barre_titre span{
    width: 80%;
    height: auto;
    margin-left: 0.5%;
    background-color: lightgray;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.barre_titre span p{
    color: black;
    font-weight: bold;
    height: auto;
}

.barre_titre p{
    margin-left: 1%;
    color: white;
    padding: 0.5% 0%;
    transform: translate(0%, 0%);
    white-space: nowrap;
}

.ferme_reduit{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-right: 0.5%;
    width: auto;
    position: absolute;
    right: 0%;
}

.ferme_reduit span{
    width: 1.4vw;
    height: 1vw;
    min-width: 15px;
    min-height: 15px;
    border-top: 1.8px solid white;
    border-right: 1.8px solid black;
    border-bottom: 1.8px solid black;
    border-left: 1.8px solid white;
    background-size: 150% auto;
    background-position: center;
    background-repeat: no-repeat;
    transition: 500ms all;
}

.ferme{
    margin-right: 2%;
    background-image: url(../img/web_fait_main/icone_ferme.png);
    background-size: cover;
}

.agrandi{
    background-image: url(../img/web_fait_main/icone_aggrandi.png);
}

.diminue{
    background-image: url(../img/web_fait_main/icone_diminus.png);
    margin-right: 0%;

}

.contener_icone_partie_url_logo{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    box-sizing: border-box;
    margin-top: 4px;
}

.contener_icone_partie_url{
    width: calc(100% - 83.6px);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

.contener_icone_partie{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.icones_fenetre_web{
    font-family: var(--zen-kaku);
    box-sizing: border-box;
    border-top: 1.8px solid white;
    border-right: 1.8px solid black;
    border-bottom: 1.8px solid black;
    border-left: 1.8px solid white;
    width: 24.5%;
    height: 100%;
    cursor: pointer;
    margin-right: 0%;
    background-color: white;
    padding: 0% 1%;
    overflow: hidden;
}

.icones_fenetre_web:last-child{
    border-right: none;
}

.icones_fenetre_web:hover{
    background-image: linear-gradient(to right, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue);
    background-size: 5000% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    animation: gradient_barre_titre 60s 0s linear infinite;
}

.icone_active{
    background-image: linear-gradient(to right, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral);
    background-repeat: no-repeat;
    background-size: 5000% 100%;
    background-position: 0% 0%;
    animation: gradient_barre_titre 60s 0s linear infinite;
    color: white;
}

.icones_fenetre_web p{
    position: relative;
    white-space: nowrap;
    font-size: var(--barre-haut);
    padding: 2% 0%;
    width: auto;
}

#suivant{
    margin-right: 4%;
}

.contener_url_titre{
    width: 100%;
    box-sizing: border-box;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    border-top: solid black 1.8px;
    border-right: solid white 1.8px;
    border-left: solid black 1.8px;
    border-bottom: solid white 1.8px;
    margin-top: 4px;
    overflow: hidden;
    cursor: default;
}

.titre_boite{
    font-family: var(--zen-kaku);
    font-size: var(--barre-haut);
    width: 40%;
    margin-left: 1%;
    margin-right: 1%;
    padding: 0.5% 1% 0.5% 0%;
    white-space: nowrap;
    height: auto;
    width: auto;
}

.boite{
    font-family: var(--zen-kaku);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: white;
    border-left: 1.8px solid black;
    overflow: hidden;
}

.boite P{
    margin-left: 1%;
    font-size: var(--barre-haut);
    height: auto;
    white-space: nowrap;
    cursor: text;
}

.defile{
    animation: defile 20s 0s infinite linear;
}

.boite a{
    text-decoration: none;
    color: unset;
}

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

.logo{
    width: auto;
    height: auto;
    border-top: 1.8px solid white;
    border-right: 1.8px solid black;
    border-bottom: 1.8px solid black;
    border-left: 1.8px solid white;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0% 15px;
    cursor: default;
}

.logo span{
    display: block;
    width: 50px;
    height: 50px;
    background-color: gray;
    border-radius: 100%;
    overflow: hidden;
    background-image: url(../img/web_fait_main/logo4.png), linear-gradient(to right, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral, violet, cornflowerblue, coral);
    background-repeat: no-repeat, no-repeat;
    background-size: 102% 102%, 5000% 100%;
    background-position: 50% 50%, 0% 0%;
    animation: gradient_logo 60s 0s linear infinite;
}

.remonte{
    transform: translate(0%, -4.5%);
}

em{
    font-family: 'happy_time_italic';
    font-style: normal;
}

a{
    color: unset;
    font-weight: 900;
}

/* CONTENER-BAS ----------------------------------------------------------------------------------------------------*/
.contener_bas{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.contener_text{
    position: relative;
    box-sizing: border-box;
    background-color: white;
    width: 100%;
    margin-top: 5px;
    padding: 3% 0% 3% 3%;
    padding-top: min(3%, 35px);
    padding-right: 0%;
    padding-bottom: min(3%, 35px);
    padding-left: min(3%, 35px);
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    border-top: 1.8px solid black;
    border-right: 1.8px solid white;
    border-bottom: 1.8px solid white;
    border-left: 1.8px solid black;
    display: none;
}

.contener_text_active{
    display: block;
}

.contener_text h1{
    font-size: var(--titre);
    margin-bottom: 2%;
}

.contener_text h2{
    font-family: var(--happy-time);
    font-size: var(--sous-titre);
    margin-bottom: min(3%, 30px);
    /* padding: 1% 0%; */
    padding-top: min(1%, 13px);
    padding-right: 0%;
    padding-bottom: min(1%, 13px);
    padding-left: 0%;
    transition: 500ms all;
    border-top: 1.5px solid black;
    border-bottom: 1.5px solid black;
    width: 97%;
    text-indent: 2%;
}

.text{
    font-family: var(--happy-time);
    font-size: var(--text);
    width: 80%;
    transition: 500ms all;
    margin-left: 5%;
    line-height: 135%;
    cursor: text;
}

.num_image{
    color: black;
    cursor: pointer;
    font-weight: 900 !important;
}

.num_image_active{
    animation: gradient_num_image 5s 0s infinite linear;
}

.images{
    width: 25%;
    max-width: 250px;
    min-width: 200px;
    height: auto;
    position: absolute;
    background-color: white;
    border: 5px solid lightgray;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    box-shadow: -4px 5px 6px rgb(0, 0, 0, 0.5);
    cursor: default;
    display: block;
}

.notes{
    resize: none;
}

.images:hover{
    z-index: 100;
}

.barre_images{
    position: relative;
    display: block;
    width: 100%;
    height: 12%;
    background-color: lightgray;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid lightgray;
    cursor: move;
}

.titre_image{
    height: 100%;
    width: 80%;
    white-space: nowrap;
    font-family: var(--zen-kaku-bold);
    font-size: var(--note);
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 500;
    margin-left: 2%;
    transition: 500ms all;
}

.barre_images span{
    width: 0.9vw;
    height: 0.9vw;
    min-width: 14px;
    min-height: 14px;
    background-color: lightgray;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-size: 120% auto;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/web_fait_main/icone_ferme.png);
    border-top: 1.5px solid white;
    border-right: 1.5px solid black;
    border-bottom: 1.5px solid black;
    border-left: 1.5px solid white;
}

.text_notes p{
    font-family: var(--happy-time);
    font-size: var(--note);
    padding: 5%;
    transition: 500ms all;
    cursor: text;
}

.text_notes a, .text_notes em {
    color: black;
    /* font-weight: bold; */
}


.images_iconographie{
    width: 100%;
    height: 100%;
}

.images_iconographie:hover{
    filter: saturate(1);
}

.gradient_blend_mode:hover{
    background-image: none;
}

.gradient_blend_mode:hover .images_iconographie{
    background-image: none;
    filter: saturate(1);
    mix-blend-mode: normal;
}


@media screen and (max-width: 700px) {
    .contener_icones_bureau:hover{
        transform: scale(1.1, 1.1);
    }

    #contener_icone_bureau1 {
        bottom: 10svh;
        left: 20px;
    }

    .fenetre_web{
        width: 100vw;
        height: 95.5%;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        z-index: 98;
        transition: 500ms all ease-in-out;
    }

    .ferme_reduit span{
        width: 20px;
        height: 15px;
    }

    .ferme{
        margin-right: 0%;
    }

    .agrandi{
        margin-right: 0%;
        display: none !important;
    }

    .diminue{
        display: none !important;
    }

    .contener_empty_titre_heure{
        width: 95%;
    }

    .images{
        width: 40%;
    }

    .draggable { 
        cursor: default; 
    }

    .contener_text{
        padding: 5% 0% 3% 3%;
    }

    .text{
        width: 87% !important;
    }

    #barre_titre, .barre_images{
        cursor: default !important;
    }
}