@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
@import "reset.css";

:root{
    /*Charte graphique*/
    --black-32: rgb(from var(--black) r g b / 0.318);
    --black: #463f3a;
    --middlegrey: #bcb8b1;
    --metalgrey-10: rgb(from var(--metalgrey) r g b / 0.106); /* #d3d0cb1b */
    --metalgrey-50: rgb(from var(--metalgrey) r g b / 0.498); /* #d3d0cb7f */
    --metalgrey-80: rgb(from var(--metalgrey) r g b / 0.804); /* #d3d0cbcd */
    --metalgrey: #d3d0cb;
    --lightgrey: #f3f3f3;
    --white: #f4f3ee;
    --blue: #95C3D9;
    --bluelight-75: rgb(from var(--bluelight) r g b / 0.741); /* #c4e2d9bd */
    --bluelight: #c4e2d9;
    --green: #64735F;
    --red-66: rgb(from var(--red) r g b / 0.667); /* #b65d69aa */
    --red: #b75d69;
    --taupe: #827973;
    --seafoam-20: rgb(from var(--seafoam) r g b / 0.196); /* #95d9c332 */
    --seafoam-30: rgb(from var(--seafoam) r g b / 0.294); /* #96d9c44b */
    --seafoam: #95D9C3;

    /* Table des couleurs */
    --bleuOccilease: #104b5f;
    --vertOccilease: #33bb94;
    --blancOccilease: #f0f0f0;
    --rougeOccilease: var(--red);
    --grisTable: #d8d8d8;

    /* Table des fonts */
    --font: 'Rubik', sans-serif;
    --fontSize: 14px;
    --smallFontSize: 13px;
}

body {
    background-color: var(--white);
    font-family: 'Rubik', 'sans-serif';
    font-weight: 300;
    color: var(--black);
    height: 100%;
    width: 100%;
}

::-webkit-scrollbar-track{
	background-color: var(--white);
	border-radius: 20px;
}

::-webkit-scrollbar{
	width: 8px;
	background-color: var(--white);
    cursor: pointer;
}

::-webkit-scrollbar-thumb{
	border-radius: 20px;
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.68, var(--blue)), color-stop(1, var(--middlegrey)));
    transition: all ease-out 0.3s;
}

::-webkit-scrollbar-thumb:hover{
	border-radius: 20px;
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.22, var(--blue)), color-stop(0.45, var(--middlegrey)));
    transition: all ease-out 0.3s;
}

::selection {
    color: var(--green);
    background: var(--blue);
  }

.nav_top{
    position: sticky;
    z-index: 5;
    overflow: hidden;
    top: 0;
    width: 100%;
    height: 7.5vh;
    min-height: 75px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--black);
    border-radius: 0px 0px 25px 25px;
    filter: drop-shadow(1px 2px 7px rgba(70, 63, 58, 0.40));
    color: var(--blue);
}

#titlelink{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 50%;
    height: 100%;
    padding-left: 25px;
    align-items: center;
}

#profilelink{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    padding-right: 25px;
    width: 50%;
    height: 100%;
}

.img-logo{
    max-width: 75%;
    height: auto;
    margin: 5px;
    justify-self: start;
    align-self: center;
}

.titlehub{
    padding-left: 25px;
}

.img-profile{
    max-width: 12%;
    height: auto;
    margin: 5px;
    align-self: center;
}

#content_container{
    align-self: center;
    z-index: 3;
    justify-self: center;
    padding: 1.5% 10% 1.5% 10%;
    width: 100%;
    min-height: 83vh;
    padding: 1rem;
}

.nav_bottom{
    position: sticky;
    overflow: hidden;
    z-index: 4;
    bottom: 0;
    width: 100%;
    height: 6.5vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: var(--black);
    border-radius: 25px 25px 0px 0px;
    box-shadow: 1px -2px 7px 0px rgba(70, 63, 58, 0.40);
    text-transform: uppercase;
}

.active{
    color: var(--blue);
}

.active > p{
    color: var(--blue);
}

.unactive{
    color:var(--middlegrey);
}

.imgnav{
    max-width: 40%;
    height: auto;
    margin: 5px;
    align-self: center;
    margin-right: 25px;
}

.navlink{
    width: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.navtext{
    color: var(--middlegrey);
}


#econtent{
    position: relative;
    width: 80%;
    left: 10%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

#econtent > h1{
    font-size: 54px;
    color: var(--red);
    margin-bottom: 2vh;
}

#econtent > p{
    font-size: 24px;
}

.menulink{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 50%;
    height: 100%;
    padding-left: 25px;
    align-items: center;
}

.menulink > a:not(:last-child){
    padding: 0.6rem 1rem;
    backdrop-filter: blur(20px);
    box-shadow: 10px 10px 20px -5px var(--black-32);
    border: 2px solid var(--black);
    transition: background 0.5s ease-in-out, border 0.5s ease-in-out, color 0.5s ease-in-out;
}

.menulink > a:hover{
    padding: 0.6rem 1rem;
    border-bottom: 2px solid var(--blue);
    cursor: pointer;
    transition: background 0.5s ease-in-out, border 0.5s ease-in-out, color 0.5s ease-in-out;
}

.form_choice a{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: var(--metalgrey-50);
    backdrop-filter: blur(20px);
    box-shadow: 10px 10px 20px -5px var(--black-32);
    border: 4px solid var(--blue);
    cursor: pointer;
    transition: background 0.5s ease-in-out, border 0.5s ease-in-out, color 0.5s ease-in-out;
}

.form_choice a:hover{
    background: var(--bluelight);
    border: 4px solid var(--blue);
    cursor: pointer;
    color: var(--black);
    transition: background 0.5s ease-in-out, border 0.5s ease-in-out, color 0.5s ease-in-out;
}

.footer_container{
    align-self: center;
    z-index: 4;
    justify-self: center;
    width: 100%;
    min-height: 4vh;
    max-height: 10vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    justify-items: center;
    border-top: 1px solid var(--middlegrey);
}

.footer_presentation{
    width: 100%;
    flex-basis: 50%;
}

#footer_link{
    position: relative;
    width: 60%;
    left: 20%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    align-self: center;
    justify-self: center;
}

.footer_utils{
    width: 100%;
    flex-basis: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    text-align: center;
    align-items: center;
}

#footer_util{
    color: var(--black);
    transition: all ease-out 0.3s;
}

#footer_util:hover{
    color: var(--middlegrey);
    transition: all ease-out 0.3s;
}

/* -----------RESPONSIVENESS----------- */
@media only screen and (min-device-width : 1px) and (max-device-width : 529px) {
    .navtext, #titlehub{
        display: none;
    }

    .img-logo{
        min-width: 75px;
        height: auto;
    }

    #footer_info, #footer_util{
        font-size: 25px;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 530px) and (max-device-width : 768px) {

    .img-profile{
        max-width: 70px;
        max-height: 70px;
        margin: 2.5px;
    }

    .imgnav{
        width: 3.5vw;
        min-width: 30px;
        min-height: 30px;
    }

    .navtext, #titlehub{
        display: none;
    }

    #footer_info, #footer_util{
        font-size: 20px;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1224px) {

    .nav_top{
        font-size: 1.5vw;
    }

    .img-logo{
        max-width: 70px;
        max-height: 70px;
        margin: 2.5px;
    }

    .img-profile{
        max-width: 70px;
        max-height: 70px;
        margin: 2.5px;
    }

    .imgnav{
        width: 3.5vw;
        min-width: 30px;
        min-height: 30px;
    }

    .navtext{
        display: none;
    }
}