/* Version mobile */
*{
    font-family:Arial, Helvetica, sans-serif;
    --color1:  #3f3F74;
    --color2: #5fcde4;
    scroll-behavior: smooth;
    letter-spacing: 0.5px;
}

footer{
    background-color: white;
    height: 300px;
    text-align: center;
}

@media screen and (max-width: 575px){

    body{
        display: flex;
        position: relative;
        flex-direction: column;
        margin:0;
    }

    .open_menu , .close_menu{
        position: absolute;
        cursor: pointer;
        display:none;
    }

    #background{ margin-bottom: 20%; }
    #check{display: none;}
    .menu img{ display: none; }
    label img{ width: 60px; }
    .open_menu{ top: 20px; left: 20px; }
    .close_menu{ top: 20px; left: 20px; }

    .menu{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 100px;
        width: 80%;
        text-align: center;
        height: 27vh;
        z-index: 100;
        position: fixed;
        border: solid var(--color1);
        border-radius: 15%;
        top: 10%;
        left: -100%;
        background-color: var(--color1);
    }

    #icone{ 
        position: absolute;
        width: 60px;
        top: 20px;
        left: 42%;
        display: block; }

    .menu a{ 
        text-transform: uppercase;
        font-weight: bold;
        text-decoration: none;
        font-size: 1.2em;
        color: white;
    }

    .menu a:active{ color: var(--color2); }
    .open_menu{ display: block; }
    #check:checked ~ .menu{ left: 0; }
    #check:checked ~ .open_menu{ display: none; }
    #check:checked ~ .close_menu{ display: block; }

    #haut_page{
        position: fixed;
        right: 20px;
        bottom: 200px;
    }
    #haut_page img{ width: 70px; }
    #bas_page{
        position: fixed;
        right: 20px;
        bottom: 100px;
    }
    #bas_page img{ width: 70px; }


    /* ---------------- PAGE ACCUEIL ------------------------ */
    h1{ margin-top: 20%; text-align: center; color: var(--color1); text-transform: uppercase; }
    .bio img{ width: 300px; margin: 10%; }
    .bio{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 15%;
    }

    /* ---------------- PAGE CATALOGUE ------------------------ */

    .section1{
        display: flex;
        flex-direction: column;

        margin: auto;

        list-style: none;
        margin-bottom: 100px;
    }

    .section1 div{
        text-align: center;
        width: auto;
        height: auto;

        background-color: var(--color1);
        color: white;
        margin-bottom: 30%;
    }

    .section1 div img, .section1 img{
        width: 100%;
        object-fit:cover;
    }

    /* ---------------- PAGE ADMIN/PRIVE ------------------------ */
    .p_admin{ margin-bottom: 300px; text-align: center; }
    #ajout{ text-align: center; padding: 2%; margin: 3%;}
    .p_admin{ text-align: center; margin-bottom: 10%; }
    form{ text-align: center;}
    .p_admin a, a{
        color: var(--color1);
        text-decoration: none;
        letter-spacing: 2px;
    }
    table{
        text-align: center;
        line-height: 40px;
        margin: auto;
    }
    table thead{ color: white; background-color: var(--color1); }
    table thead, td{ padding: 10px;}
    table a{ text-decoration: none; color: var(--color2); }

    /* ---------------- PAGE RECHERCHE ------------------------ */
    #form_rech{
        width: 400px;
        font-size: 20px;
        margin-top: 5%;
    }

    #form_rech input[type=text]{
        border: none;
        text-align: center;
        color: white;
        background-color: var(--color2);
        height: 50px;
    }

    #form_rech input[type=submit]{
        border-radius: 20%;
        border: solid var(--color1);
        background-color: white;
        height: 50px;
    }

    #form_rech input[type=submit]:hover{
        border-radius: 20%;
        background-color: var(--color1);
        cursor: pointer;
        color: white;
        height: 50px;
    }

    #miku{
        position: absolute;
        z-index: -1;
        left: 15%;
        top: 10%;
        opacity: 20%;
    }

    #tips{
        color: var(--color1);
        font-size: 15px;
        text-align: center;
        padding: 10%;
    }

    .section1{
        color: white;
        background-color: var(--color1);
    }

    .section1 h3, .section1 img{
        margin: auto;
        margin-top: 10%;
        font-size: 25px;
        text-transform: uppercase;
    }
}

/* Version desktop ------------ */

@media screen and (min-width: 576px){

    #background{
        position: relative;
        z-index: -1;
        background: white;

        left: 50%;
        transform: translate(-50%);
        width: 85%;
        padding-bottom: 20%;
        height: fit-content;
    }

    header{
        position:fixed;
        width: 100%;
        text-align: center;
        background-color: white;
        height: 10%;
    }

    .menu div{
        display: inline-block;
        margin-right: 20px;
        height: 60px;
        width: 60px;
    }

    .menu div img{
        object-fit:contain;
        width: 100%;
        height: 100%;
        vertical-align: baseline;
    }

    .open_menu , .close_menu{ display: none; }
    .menu p{ display: none; }
    #icone-hover{ display: none; }
    #accueil:hover #icone{ display:none; }
    #accueil:hover #icone-hover{ display:block; }
    #check{ display : none; }

    body{
        display: flex;
        z-index: -1;
        position: relative;
        flex-direction: column;
        margin:0;
        background-image: url(/images/background-opacite.jpg);
    }

    /* ---------------- PAGE ACCUEIL ------------------------ */
    h1{ margin-top: 20%; text-align: center; color: var(--color1); text-transform: uppercase; }

    .bio{
        display: flex;
        align-items: center;
        width: 80%;
        margin: 10%;
    }
    .bio img{ width: 200px; margin: 10%; }


    /* ---------------- PAGE CATALOGUE ------------------------ */

    #haut_page{
        position: fixed;
        right: 150px;
        bottom: 200px;
    }
    #haut_page img{ width: 70px; }
    #bas_page{
        position: fixed;
        right: 150px;
        bottom: 100px;
    }
    #bas_page img{ width: 70px; }

    .section1{
        display: grid;
        grid-template-rows: repeat(auto-fill, 200px);
        grid-template-columns: repeat(auto-fill, minmax(200px, 3fr));
        gap: 10px;

        padding-top: 10%;
        margin: auto;

        width: 60%;
        height: auto;
        list-style: none;
    }

    .section1 div{
        text-align: center;
        font-size: 15px;
        width: 200px;
        height: 200px;

        background-color: paleturquoise;
        color: var(--color1);
    }

    .section1 div img{
        width: 100%;
        height: 100%;
        object-fit:contain;
        background-color: white;
    }

    /* ------------- PAGE ADMIN --------------------- */

    #ajout{ text-align: center; padding: 2%; margin: 3%;}
    #ajout:hover{ background-color: rgb(241, 241, 241); cursor: pointer;}
    .p_admin{ text-align: center; margin-bottom: 10%; }
    .p_admin a, a{
        color: var(--color1);
        text-decoration: none;
        letter-spacing: 2px;
    }
    .p_admin a:hover, a:hover{ color: var(--color2);}
    form{ text-align: center;}
    table{
        text-align: center;
        line-height: 40px;
        margin: auto;
    }
    table thead{ color: white; background-color: var(--color1); }
    table thead, td{ padding: 10px; }
    table tr:hover{ background-color: rgb(241, 241, 241); cursor: pointer; }
    table a{ text-decoration: none; color: var(--color2); }
    table a:hover{color: var(--color1);}

    /* ------------- FORM RECHERCHE --------------------- */
    #form_rech{
        width: 400px;
        font-size: 20px;
        margin: auto;
        margin-top: 5%;
    }

    #form_rech input[type=text]{
        border: none;
        text-align: center;
        color: white;
        background-color: var(--color2);
        height: 50px;
    }

    #form_rech input[type=submit]{
        border-radius: 20%;
        border: solid var(--color1);
        background-color: white;
        height: 50px;
    }

    #form_rech input[type=submit]:hover{
        border-radius: 20%;
        background-color: var(--color1);
        cursor: pointer;
        color: white;
        height: 50px;
    }

    #miku{
        position: absolute;
        z-index: -1;
        margin-left: 65%;
        top: 20%;
        opacity: 60%;
    }

    #tips{
        color: var(--color1);
        font-size: 15px;
        text-align: center;
    }
}