/* css pou tout paj */
    :root{
        --red: #db1702;
        --blue: #0249AE;
        --darkblue: #00173D;
        --green: green;
        --yellow: #FDBD56;

        --greenbg : #75ebb3;
        --greentxt : #0c5532;

        --yellowbg : #f8d796;
        --yellowtxt : #b1790b;

        --redbg : #f8a6a0;
        --redtxt : #550c06;

        --bluebg : #a5cffd;
        --bluetxt : #035dbe;

        --graybg : #b0b0b0;
        --graytxt : #242424;

        --white: #ffffff;
        --light-white: #ffffff25;

        --black: #000000;
        --light-black: #00000050;

        --gray: rgb(102, 101, 101);
        --light-gray: #00000025;
        --light-gray2: #00000010;
        
        --box-shadow: 0 8px 16px rgba(0,0,0,.1);
    }

    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        text-decoration: none;
        transition: all .2s linear;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 16px;
        color: var(--black);
    }

    body{
        overflow-x: hidden;
        background: var(--white);
    }

    ::-webkit-scrollbar{
        width: 5px;
        height: 5px;
    }

    body::-webkit-scrollbar{
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track{
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb{
        background-color: var(--light-gray);
        border-radius: 16px;
    }

    body::-webkit-scrollbar-thumb{
        background-color: var(--blue)
    }
/* css pou tout paj */

/* section */
    section{
        width: 95%;
        padding: 8px 32px;
        margin: 32px auto;
    }

    .first_section{
        margin-top: 120px;
    }
/* section */

/* base skeletons */
    @keyframes skeletonShine {
        0%   { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }
    
    .skeleton_base {
        background: linear-gradient(
            90deg,
            #e8e8e8 0%,
            #f5f5f5 50%,
            #e8e8e8 100%
        );
        background-size: 200% 100%;
        animation: skeletonShine 1.4s ease-in-out infinite;
        border-radius: 8px;
    }
/* base skeletons */

/* loader img */
    .btn-loader {
        width: 15px !important;
        height: 15px !important;
        border: 2px solid #ffffff90;
        border-top: 2px solid var(--gray);
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* Spinner posé PAR-DESSUS l'image, sans changer la mise en page du cadre */
    .img-loading {
        position: relative;
    }
    .img-loading > .btn-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 22px;
        height: 22px;
        margin: -11px 0 0 -11px;
        border-color: var(--blue, #0249AE);
        border-top-color: transparent;
        z-index: 1;
        pointer-events: none;
    }
/* loader img */

/* responsive */
    /* section */
        @media screen and (max-width: 650px) {
            section{
                padding: 8px 16px;
            }
        }

        @media screen and (max-width: 450px) {
            section{
                width: 95%;
                padding: 8px 10px;
            }
        }
    /* section */
/* responsive */