*{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding:0;
}
.scroll tbody{
    max-height: 40vh;
    display:block;
    overflow: auto;
    width:100%;
}
.scroll thead, .scroll tfoot{
    display:table;
    width:100%;
}
#container_error{
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    min-height: 100%;
    
}
.obligatoire:after{
    content:'  *';
    color:red;
    font-size: 1.25em;
}
.zoom:hover{
    transform:scale(10);
    transition: 2000ms;

}
.flex{
    display:flex;
}
.space-between{justify-content:space-between;}
.align-items-center{align-items: center;}

.mh-2{margin: 0 0.50em;}
.mh-4{margin: 0 0.75em;}

.mv-2{margin: 0.50em 0;}
.mv-4{margin: 0.75em 0;}
.mv-8{margin: 1.25em 0;}

.ph-2{padding:0 0.50em;}
.ph-4{padding:0 0.75em;}

.pv-2{padding: 0.50em 0;}
.pv-4{padding: 0.75em 0;}

.hide{
    display:none;
}
.m-auto{margin: 10px auto}
.flex-space-between{display:flex; justify-content: space-between;}
/*-------------SAISIE ARTICLE-----*/
#saisie-article{
    width:80%;
    min-height: 40vh;
    margin: 20px auto;
    border: 1px solid white;
    border-radius: 5px;
    padding: 20px;
}
textarea{
    resize: none;
}
/*------modal---------------------------------*/
.option{
    height: 40px;
    border-radius: 5px;
}
.modal{
    display:flex;
    justify-content: center;
    align-items: center;
    min-width:100%;
    min-height: 100vh;
    position:absolute;
    top:0;
    backdrop-filter: blur(30px);
    /* visibility:hidden; */
    left: -200vw;
}
.modal-content{
    width: 60vw;
    min-height:50vh;
    background-color: aqua;
    border-radius: 5px;
    box-shadow: 10px 10px white;
    padding:20px;
    position:relative;
}
#form-article:target {
    /* visibility:visible; */
    left:0;
    transition:1000ms;
    transform: rotate(360deg);

}
#modal-close{
    position:absolute;
    top:30px;
    right:30px;
    font-size:1.25em;
    color:black;
    display:flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 50%; 
    height: 40px;
    width:40px; 

}
/*-------------------------------------------*/
.titre{
    line-height: 60px;
    text-align: center;
    background-color: navy;
    color:white;
    border-bottom:4px solid white;
}
.line-input{
    margin: 10px;
}
.lab20{float:left;width:20%;font-weight: bolder;}
.lab30{float:left;width:30%;font-weight: bolder;}
.line-input input{
    height:40px;
    border-radius: 5px;
}

a{text-decoration: none;}
li{list-style: none;}
#titre{
    min-height:8vh;
    display:flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid white;
}
header{
    min-height: 10vh;
    background-color: navy;
    color:white;
}
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
#banner{
    max-height:70px;
    overflow: hidden;
}
.niveau-h1{
    display:flex;
}
.niveau-h1 li{
    margin-right: 10px;
}
.niveau-h1 a {
    display:block;
    color:white;
    font-size:1.25em;
}
nav{
    height: 8vh;
    display:flex;
    justify-content:space-between;
    align-items: center;
    padding:0 4px;
    border-top: 2px solid white;
}
.white{color:white;}
.red{color:red;}
.navy{color:navy;}
.green{color:green;}
.niveau-h2{
    position:absolute;
    background:green;
    color:white;
    width: 10%;
    padding:10px;
}

.niveau-h2 li:hover a{
    background:white;
    color:black;
    width:100%;
    display: block;
    /* transform: rotate(360deg); */
    transition:2000ms;
    margin:0;
    padding:0 5px;
    border-radius:5px;
}
/* .niveau-h1 li:hover .niveau-h2{
    display:block;
} */

#commande::after{
   content: "\25bc";
   margin-left: 10px;
}

aside{
    width:10vw;
    height:80vh;
    background-color: blue;
    color:white;
}
section{
    width:80vw;
    min-height:80vh;
    margin: 0 5px;
    background:yellow;
    color:navy;

}
main{
    display:flex;
    justify-content: space-between;
    margin: 4px 0;
}

header{
    position:sticky;
    top:0;
}
#logo{
    margin: 5px auto;
    width:90%;
}
.image{
    width:90%;
    height:150px;
    margin:20px auto;
    background-size: cover;
    background-repeat: no-repeat;

}
#image1{
    background-image: url("../img/fleur2.jpg");
}
#image2{
    background-image: url("../img/fleur3.jpg");
}
#image3{
    background-image: url("../img/fleur4.jpg");
}
/* #image:hover{
    transform:scale(5);
    transition: 3000ms;
} */

.niveau-v1 > li{   /*premier enfant de niveau-v1*/
    line-height: 70px;
    border-bottom: 4px solid white;
    margin:0 5px;
}
.niveau-v1 li a{
    color:white;
    font-size: 1.25em;
}
#menu{
    padding: 5px 0;
    border-bottom: 6px solid white;
}
.niveau-v2{
    margin-left:25%;
    margin-top:2px;
    display:none;
}

.niveau-v2 li{
    line-height:25px;
}
.niveau-v1 li:hover > a {
    display:block;
    background-color: white;
    color: navy;
    width: 100%;
    border-radius: 5px;
}
.niveau-v1 li:hover .niveau-v2{
    display: block;
}
.niveau-v1 li:hover .fleche-bas{
    display: none;
}
.fleche-bas{
    position:absolute;
    right:0;
}
.niveau-v1 > li{
    position: relative;
}
footer{
    min-height: 7vh;
    background-color: navy;
    color:white;
    display: flex;
    justify-content: center; 
    align-items: center;
    position:sticky;
    bottom:0;
    border-top: 2px solid white;
}

@media screen and (max-width:750px){
    main{
        flex-wrap:wrap;
    }
    aside,section{
        width:100% !important;
        margin:0;
        padding:0;
    }
}

.w05{width: 5%;}
.w10{width:10%;}
.w20{width:20%;}
.w30{width:30%;}
.w40{width:40%;}
.w50{width:50%;}
.w55{width:55%;}
.w60{width:60%;}
.w70{width:70%;}
.w80{width:80%;}
.w90{width:90%;}
.w100{width:100%;}
.bg-red{background-color: red;color:white;}
.bg-navy{background-color: navy;color:white;}
.bg-green{background-color: green;color:white;}
.bg-blue{background-color: blue;color:white;}
.bg-white{background-color: white;color:black;}
#pied-list{
    height:50px;
}
.img-article:hover{
    transform:scale(10);
    transition: 1000ms;
}
table,th,tr{
    border:1px solid gray;
}
table{
    border-collapse:collapse;
}
.line-button{
    display:flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
}

.bouton-action{
    display:flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    border-radius:5px;
    width:100px;
    box-shadow: 5px 5px 5px white;
    cursor:pointer;
    
}
.bouton-large{
    display:flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    border-radius:5px;
    width:100%;
    box-shadow: 5px 5px 5px white;
    cursor:pointer;
    
}
#list_article{
    width:75vw;
    margin:10px auto;
    min-height:50vh;
    border:1px solid gray;
    border-radius: 10px;
    box-shadow: 10px 10px 5px white;
    padding:20px;
}

@media print{
    header,footer,aside,.line-button{
        display: none;
    }
    section{
        background-color: transparent;
    }
    #list_article{
        width: 100vw !important;
        border: none;
    }
    .scroll tbody{
        overflow:unset;
    }
    .scroll tfoot{
        display:none;
    }
    table{
        width:90vw !important;
    }
}

#table_art tbody{
    width:100%;
    max-height: 40vh;
    overflow-y: auto;
    display:block;
}
#table_art thead{
    display:table;
    width:100%;
}

#search{
    height: 30px;
    border-radius: 4px;
    margin-right:20px;
}