@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap');


body{font-family: 'Quicksand', sans-serif;}
p{margin: 0px;padding: 0px;}
.light{font-weight: 300;}
.regular{font-weight: 400;}
.medium{font-weight: 500;}
.semi-bold{font-weight: 600;}
.bold{font-weight: 700;}

a{color:inherit;}

/* C U R S O R */
    a[onclick], a[href], button, .cursor-grab{ cursor: grab; }
    .cursor-zoom-in{ cursor: zoom-in; }
    .cursor-not-allowed{ cursor: not-allowed; }
    .cursor-crosshair{ cursor: crosshair; }
    .cursor-wait{ cursor: wait; }
    .cursor-help{ cursor: help; }
    .disabled{ cursor: not-allowed; }

/* L O A D I N G */
    #loading{
        width: 100%;
        height: 1vh;
        cursor: wait;
    }
    #loading div{
        width: 80px;
        height: 80px;
        background-repeat: no-repeat;
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
    }

/* T E X T */
    .font-size-4{font-size: 4em;}
    .font-size-3{font-size: 3em;}
    .font-size-2-5{font-size: 2.5em;}
    .font-size-2{font-size: 2em;}
    .font-size-1-8{font-size: 1.8em;}
    .font-size-1-5{font-size: 1.5em;}
    .font-size-1-4{font-size: 1.4em;}
    .font-size-1-3{font-size: 1.3em;}
    .font-size-1-2{font-size: 1.2em;}
    .font-size-1{font-size: 1em;}
    .font-size-0-9{font-size: 0.9em;}
    .font-size-0-8{font-size: 0.8em;}
    .font-size-0-7{font-size: 0.7em;}
    .font-size-0-6{font-size: 0.6em;}

/* B O R D E R */
    .no-border{border-width: 0px;border-style: none;}
    .border-solid{border-style: solid;}
    .border-groove{border-style: groove;}

    .border-none{border-width: 0px;}
    .border-1{border-width: 1px;}
    .border-2{border-width: 2px;}
    .border-3{border-width: 3px;}
    .border-4{border-width: 4px;}
    .border-5{border-width: 5px;}
    .border-top-0{border-top-width: 0px;}
    .border-top-1{border-top-width: 1px;}
    .border-top-2{border-top-width: 2px;}
    .border-top-3{border-top-width: 3px;}
    .border-top-4{border-top-width: 4px;}
    .border-top-5{border-top-width: 5px;}
    .border-bottom-0{border-bottom-width: 0px;}
    .border-bottom-1{border-bottom-width: 1px;}
    .border-bottom-2{border-bottom-width: 2px;}
    .border-bottom-3{border-bottom-width: 3px;}
    .border-bottom-4{border-bottom-width: 4px;}
    .border-bottom-5{border-bottom-width: 5px;}
    .border-bottom-8{border-bottom-width: 8px;}
    .border-right-0{border-right-width: 0px;}
    .border-right-1{border-right-width: 1px;}
    .border-right-2{border-right-width: 2px;}
    .border-right-3{border-right-width: 3px;}
    .border-right-4{border-right-width: 4px;}
    .border-right-5{border-right-width: 5px;}
    .border-left-0{border-left-width: 0px;}
    .border-left-1{border-left-width: 1px;}
    .border-left-2{border-left-width: 2px;}
    .border-left-3{border-left-width: 3px;}
    .border-left-4{border-left-width: 4px;}
    .border-left-5{border-left-width: 5px;}

    .border-1-over:hover{border-width: 1px;}
    .border-2-over:hover{border-width: 2px;}
    .border-3-over:hover{border-width: 3px;}
    .border-4-over:hover{border-width: 4px;}
    .border-5-over:hover{border-width: 5px;}
    .border-top-0-over:hover{border-top-width: 0px;}
    .border-top-1-over:hover{border-top-width: 1px;}
    .border-top-2-over:hover{border-top-width: 2px;}
    .border-top-3-over:hover{border-top-width: 3px;}
    .border-top-4-over:hover{border-top-width: 4px;}
    .border-top-5-over:hover{border-top-width: 5px;}
    .border-bottom-0-over:hover{border-bottom-width: 0px;}
    .border-bottom-1-over:hover{border-bottom-width: 1px;}
    .border-bottom-2-over:hover{border-bottom-width: 2px;}
    .border-bottom-3-over:hover{border-bottom-width: 3px;}
    .border-bottom-4-over:hover{border-bottom-width: 4px;}
    .border-bottom-5-over:hover{border-bottom-width: 5px;}
    .border-bottom-8-over:hover{border-bottom-width: 8px;}
    .border-right-0-over:hover{border-right-width: 0px;}
    .border-right-1-over:hover{border-right-width: 1px;}
    .border-right-2-over:hover{border-right-width: 2px;}
    .border-right-3-over:hover{border-right-width: 3px;}
    .border-right-4-over:hover{border-right-width: 4px;}
    .border-right-5-over:hover{border-right-width: 5px;}
    .border-left-0-over:hover{border-left-width: 0px;}
    .border-left-1-over:hover{border-left-width: 1px;}
    .border-left-2-over:hover{border-left-width: 2px;}
    .border-left-3-over:hover{border-left-width: 3px;}
    .border-left-4-over:hover{border-left-width: 4px;}
    .border-left-5-over:hover{border-left-width: 5px;}

    .border-solid-over:hover{border-style: solid;}
    .border-groove-over:hover{border-style: groove;}


    .line-bottom-grey{
        border-bottom-width: 1px;
        border-color: linear-gradient(to right, rgba(112, 112, 112, 0),10%, rgba(112, 112, 112, 1));
    }

/* S H A D O W */
    .shadow-box-1{box-shadow: 1px 1px 3px #0000001f, 0 1px 2px rgba(0,0,0,0.24);  transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
    .shadow-box-2{box-shadow: 1px 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);  transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
    .shadow-box-3{box-shadow: 1px 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);  transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
    .shadow-box-4{box-shadow: 1px 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
    .shadow-box-5{box-shadow: 1px 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);  transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
    .shadow-box-hover:hover{box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
    .shadow-box-2-hover:hover{box-shadow: 1px 3px 6px rgba(0,0,0,0.25), 1px 3px 6px rgba(0,0,0,0.22);}

    .shadow-text-1{text-shadow: 1px 1px 3px #0000001f, 0 1px 2px rgba(0,0,0,0.24);  transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
    .shadow-text-2{text-shadow: 1px 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);  transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
    .shadow-text-3{text-shadow: 1px 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);  transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
    .shadow-text-4{text-shadow: 1px 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
    .shadow-text-5{text-shadow: 1px 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);  transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
    .shadow-text-hover:hover{text-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
    .shadow-text-2-hover:hover{text-shadow: 1px 3px 6px rgba(0,0,0,0.25), 1px 3px 6px rgba(0,0,0,0.22);}

/* O V E R F L O W  --- h1, h4, p -> taille de la police ----- lX -> nombre de ligne*/ 
    .overflow-p-l2{
        height: 45px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .overflow-h4-l1{
        height: 1.1rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* F L O U */
    .blur-1
    {
        filter: blur(1px);
        -webkit-filter: blur(1px);
        -moz-filter: blur(1px);
        -o-filter: blur(1px);
        -ms-filter: blur(1px);
    }
    .blur-3
    {
        filter: blur(3px);
        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
    }
    .blur-5
    {
        filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    }
    .blur-10
    {
        filter: blur(10px);
        -webkit-filter: blur(10px);
        -moz-filter: blur(10px);
        -o-filter: blur(10px);
        -ms-filter: blur(10px);
    }

/* ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥ ALERT ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥ */
    div[id="MsgAlert"]
    {
        position: fixed;
        width: auto;
        bottom: 5%;
        z-index: 100000;
    }

/* C E R C L E */
.circle {
    border-radius:50%;
}

/* A R T I C L E */
#ArticleContent{
    padding: 10px;
}
#ArticleContent:hover{
    background-color: white;
    border: 1px solid rgb(73, 73, 73);
    border-radius: 10px;
}
#OptionBar{
    display:none;
}
#ArticleContent:hover #OptionBar{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: end;
}