*{
    padding : 0; 
    margin : 0; 
    /* outline : 1px solid grey; */
    outline : 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "bree_regular", Arial, sans-serif;
}

a{
    text-decoration:none;
    color:var(--body-font-color);
    text-shadow: 1px solid var(--body-font-color);
    font-style:italic;
    text-shadow:rgb(206, 204, 204) 1px 1px;
    /* display:block; */
}
a:visited{
    text-decoration:none;
    color:var(--body-font-color);
}

@font-face{
    font-family: "bree_regular";
    src: url('police/Bree_Regular.otf');
}

html{
    font-family: DINNextLTPro-Regular,sans-serif;
    font-size:var(--font-size);
    /* height:100vh; */
    height:auto;
}

body{
    min-height:100vh;
    min-height: -webkit-fill-available;
    min-width:320px;
}

.main-container{
    min-height:100vh;
    /* height:auto; */
    width:100%;
    position:relative;  /* pour que main-container devienne le referent de footer*/
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:var(--top-menu-height) 1fr var(--footer-height);
    grid-template-areas: "logo entete"
                        "nav main-content"
                        "nav pied";
}
.main-container-index{
    min-height:100vh;
    width:100%;
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:var(--top-menu-height) 1fr var(--footer-height);
    grid-template-areas: "logo entete"
                        "main-content main-content"
                        "pied pied";
}

.entete{
    grid-area:entete;
    min-height:var(--top-menu-height);
    border-bottom: 1px solid var(--menu-border-color);
    /* background: var(--menu-bg-color); */

    font-size: var(--top-menu-font-size);
    display:flex;
    justify-content: space-around;
    align-items: center;
    z-index:1000;
}

.entete > *{
    flex:1;
    max-width:fit-content;
}

.entete,.entete a{
    color:var(--menu-font-color);
}

.main-logo img{
    height: calc(var(--top-menu-height) - 8px);
    vertical-align: middle;
    text-align: center;
}
.logo{
    grid-area:logo;
    background: var(--menu-bg-color);
    max-height:var(--top-menu-height);
    display:flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid var(--menu-border-color);   /*  */
    color:var(--menu-font-color);
}

.nav{
    grid-area:nav;
    color: var(--menu-font-color);
    background: var(--menu-bg-color);
    background: var(--left-menu-gradient);
}
.nav a{
    color: var(--menu-font-color);
}
.main-content{
    grid-area:main-content;
}
.pied{
    grid-area:pied;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding:3px;
    font-size:14px;
    color:var(--footer-font-color);
    background-color: var(--footer-bg-color);
    column-gap: 10px;
    z-index:1000;
}
.pied a{
    color:var(--footer-font-color);
}


.liste-sidenav{
    list-style-type:none;
    max-width:200px;
    display:flex;
    flex-direction: column;
    justify-content: center;

}
.liste-sidenav li{
    height: 30px;
    margin:5px 15px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.grid-index{
    display:grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: 60px auto 1fr 1fr 1fr 1fr;
}

.menu-index{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 1/6;
    grid-row:1;
    height:60px;
    font-weight: bold;
    font-size:21px;
}
.msg-index{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: span 5;
    grid-row:2;
    color:var(--msg-error-font-color);
    font-weight: bold;
    height:30px
}
.index-box{
    box-shadow: 6px 6px 8px rgba(200, 200, 200, 1);
    box-shadow: 6px 6px 8px var(--main-color-normal);
    border : 1px solid var(--main-color-light);
    margin:20px;
    border-radius:var(--input-border-radius);
    background-color:var(--index-box-bg-color);
    min-height:50px;
    display:flex;
    justify-content:center;
    align-items:center;
    min-width:100px;
}
.index-box a{
    display:block;
    width:100%;
    /* height:100%; */
    text-align:center;
    align-self: center;
}

main{
    /* background-color:var(--body-bg-color); */
    color:var(--body-font-color);
    line-height:var(--section-line-height);
}


/********************************************/
/********************************************/
/**************  mobile  ********************/
/********************************************/
/********************************************/

@media screen and (max-width:800px){
    :root{
        --input-height:var(--input-height-mobile);
    }
    .main-container{
        height:100vh;
        width:100%;
        display:flex;
        flex-direction: column;
        overflow:hidden; 


     /* position: absolute;   */  /* */
      top: 0;                 /* */
      right: 0;               /* */
      left: 0;                /* */
      bottom: 0;              /* */
    }

    
    .main-container-index{
        height:100vh;
        width:100%;
        display:flex;
        flex-direction: column;
        overflow:hidden;    /*  */
    }

	.main-container-index .logo{
		display: none;
	}

    .logo{                                  
        flex-grow: 0;                       
        height: calc(var(--top-menu-height)- 8px);
        min-height:calc(var(--top-menu-height) - 8px); 
    }

	.nav{
		display:none!important; /* Pr éviter que display initial = block de la balise nav sur navigateur prenne le dessus */
	} 
	
    .main-content{
        padding:0;

        flex-grow: 1;
        overflow: auto;

    }

    .label-input{  /* Sert à ce que le label passe au dessus qd trop petit*/ 
        flex-wrap: wrap;
        width:min-content; /* Pour que box soit de la taille de l'input pour réussir à centrer lorsque le label est passé au dessus */
    }
    .flex-nowrap{
        flex-wrap: nowrap;
    }

    .grid-index{
        display:flex;
        flex-direction:column;
    }

    .liste-sidenav{
        list-style-type:none;
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        
    
    }
    .liste-sidenav li{
        height: 30px;
        margin:5px 15px;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .main-content{
        /* flex-grow: 1; */
    }

    .flex-wrap-evenly{
        flex-wrap: wrap;
    }

    input:focus{  /* Pour eviter zoom sur mobiles */
        font-size: var(--font-size);
    }


}

/**************************************/
/*************************************/

@media screen and (max-width:359px){
    div.flex-wrap-evenly{
        display:flex;
        justify-content:flex-start; /* Pour annuler le justify content:space-evenly qui centre cette div.Sur les ecrans trop petit
                                    cela empeche de voir la partie gauche de la div malgré l'overflow cette valeur de 359 (et pas 360) n'est pas 
                                    choisie au hasard elle est inf. à 90% du parc mobile. mais n'oublions pas les 10% ;-)  */
    }
    div.flex-col-align-center{
        display:flex;
        justify-content:flex-start; /* Pour annuler le justify content:space-evenly qui centre cette div.Sur les ecrans trop petit
                                    cela empeche de voir la partie gauche de la div malgré l'overflow cette valeur de 359 (et pas 360) n'est pas 
                                    choisie au hasard elle est inf. à 90% du parc mobile. mais n'oublions pas les 10% ;-)  */
    }
}