*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing:  border-box;
    color: #000;
    border: none;
    font-family: Montserrat, sans-serif;
}
/* ------ partie header ------ */
header, footer{
   padding: 1rem 0;
   background: #112846;
}
h1, footer p{
    color: #fff;
    text-align: center;
}
h1 span{
    text-transform: capitalize;
    color: #fff;
}
h2{
    font-weight: 600;
    text-decoration: underline;
    font-size: 1.2rem;
}
h3{
    font-weight: normal;
}
.bout-deco{
    display: block;
    width: 15%;
    margin: 1rem auto;
    padding: 10px 0;
    text-align: center;
    color: #112846;
    border: 1px solid #112846;
    border-radius: 10px;
    background: #fff;
}
.bout-deco:hover{
    background: #112846;
    border-color: #fff;
    color:#fff;
}
/* ------ partie main ------ */
 main{
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 90%;
    margin: 1rem auto;
}
/* --------------- page administration ----------------- */
.formulaires, .formulaire{
    width:80%;
    margin-bottom: 2rem;
}
.formulaires{
    display: flex;
    gap: 1rem;
}
.formulaires article{
    width: 50%;
    border: 1px solid lightgray;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.formulaires form{
    margin-top: 1rem;
}
.client, .client-supprimer, .intervenant, .supprimer-intervenant{
    margin-bottom: 2rem;

}
.client div, .client-supprimer div, .intervenant div, .supprimer-intervenant div{
    margin-bottom: 1rem;
    padding-left : 3rem;
    text-align: center;
}
select{
    border: 1px solid #112846;
    height: 32px;
    padding-left: 10px;
}
select option{
    font-size: 1.1rem;
    line-height: 1.5;
}
.client-supprimer select, .supprimer-intervenant select{
    width: 60%;
    font-size: 1rem;
}
input, textarea{
    border-bottom: 1px solid gray;
    height: 2rem;
    font-size: 1.1rem;
}
label{
    vertical-align: bottom;
}
input:focus, textarea:focus{
    outline: none;
    background: #ECF0F1 ;
}
.client .btn-soumettre{
    margin-top: 2rem;
}
.btn-soumettre input{
    display: block;
    width: 60%;
    margin: 1rem auto;
}
.btn-modifenreg{
    text-align:center;
}
.btn-modifenreg input, .btn-soumettre input{
    font-size: 1.2rem;
    border: 1px solid #112846;
    background-color: #112846;
    color: #fff;
}
.btn-modifenreg input{
    display: inline-block;
    width: 30%;
    margin: 1rem;
}
.btn-modifenreg input:hover, .btn-soumettre input:hover{
    background-color: #ededed;
    box-shadow: inset 0 0 5px gray;
    color: #112846;
}
/* partie tableaux  */
.tableau{
 width: 100%;
}
.tableau h2{
text-align: center;
}
.tableau form{
width: 50%;
margin: 1rem auto;
display: flex;
justify-content: center;
align-items: center;
}
.tableau form select{
margin-right: 2rem;
font-size: 1rem;
}
.soumettre-tab{
font-size: 1.2rem;
width: 20%;
border: 1px solid #1ABC9C;
background-color: #1ABC9C;
color: #fff;
}
.soumettre-tab:hover{
background-color: #fff;
color: #1ABC9C;
}
.tab-presta{
margin: 1rem;
}
.tableau p{
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 2rem;
}
#button-excel, #button-excel2{
    border: 1px solid #1A5276;
    background-color: #1A5276;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    padding: 10px 20px;
    margin-left: 1rem;
    border-radius: 10px;
}
#button-excel:hover, #button-excel2:hover{
    background-color: #fff;
    color: #1A5276;
}
table{  
    font-family: arial, sans-serif;  
    border-collapse: collapse; 
    table-layout: fixed;
    margin-bottom: 1rem;
}
#simpleTable1{
    width:100%; 
}
#simpleTable2{
    width: 75%;
}  
table caption{
    margin: 1rem auto;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: left;
}
table thead{
    background-color: #112846;
}
table td, table th{  
    border: 1px solid gray;
    text-align: left;
    font-size: 0.8rem;
    padding: 8px 4px;
} 
table th{
    color:white;
    text-align: center;
    font-weight: 400;
}
table form{
    display: flex;
    justify-content: center;
    align-items: center;
}
table form input[type="submit"]{
    border: none;
    background: red;
    color: white;
    padding: 3px 5px;
    font-size: 0.8rem;
    border: 1px solid red;
}
table form input[type="submit"]:hover{
    background:#fff;
    color: #000;
    border: 1px solid #000;
}
#simpleTable1 th:nth-child(1), #simpleTable1 td:nth-child(1), #simpleTable1 th:nth-child(7), #simpleTable1 td:nth-child(7), #simpleTable2 th:nth-child(2), #simpleTable2 td:nth-child(2), #simpleTable2 th:nth-child(4), #simpleTable2 td:nth-child(4){
    width: 10%;
}
#simpleTable1 th:nth-child(5), #simpleTable1 td:nth-child(5){
    width: 30%;
} 
#simpleTable2 th:nth-child(1), #simpleTable2 td:nth-child(1){
    width: 20%;
}
#simpleTable1 tr:nth-child(even), #simpleTable2 tr:nth-child(even) {  
    background-color: #dddddd;  
}
.total{
    background-color: #dddddd;
    text-align: right;
    padding-right: 10px;
    font-size: 1.3rem;
}
.avantTotal{
    border-bottom: none;
    border-left: none;
}
/* ----------------- page intervenant ------------------ */
 /* différences par rapport à la page administration */
 .formulaire form{
    display: flex;
    flex-wrap: wrap;
}
.cent, .cinquante{
    padding: 1rem;
    display: flex;
    border-bottom: 2px solid lightgray;
}
.cent{
    width: 100%;
}
.cinquante{
    width: 50%;
}
textarea{
    height: 5rem;
}
.date-presta{
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.choix-client, .taux-horaire, .detail-presta, .horaire, .frais-cont, .check-convention{
    flex-direction: column;
    gap: 1rem;
    align-items: start;
}
.choix-client, .detail-presta, .frais-cont{
    border-right: 2px solid lightgray;
}
.hora{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.hora h2{
    width: 100%;
}
.sect-horaire{
    margin: 1rem 0;
}
.sect-horaire h3, .sect-horaire p{
    margin-bottom: 10px;
    text-align: center;
}
.heures{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.heures input, .montant-frais input, .btn-valider input[type="submit"]{
    border: 1px solid #122846;
    border-radius: 10px;
}
.heures input{
    width: 40%;
}
#heures{
    padding-left: 10px;
}
.montant-frais input, .btn-valider input[type="submit"]{
    width: 25%;
}
.montant-frais h3{
    display: inline;
    margin-right: 1rem;
}
.detail-frais h3{
     margin-bottom: 1rem;
}
.check-convention{
    justify-content: end;
    border-bottom: none;
}
.check-convention label{
    vertical-align: bottom;
    line-height: 2.5rem;
    margin-left: 1rem;
}
.btn-valider{
    width: 100%;
}
.btn-valider input[type="submit"]{
    font-size: 1.2rem;
    background-color: #112846;
    color: #fff;
}
.btn-valider input[type="submit"]:hover{
    background-color: #ededed;
    box-shadow: inset 0 0 5px gray;
    color: #112846;
}
/*  ---------------- page login ------------------------ */
.relatif{
    position: relative;
    width: 40%;
}
.form-login{
    padding: 5rem;
    border: 1px solid #112846;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}
.p-login{
    font-size: 2rem;
    width: 100%;
    margin-bottom: 1rem;
    text-align: center;
}
.form-login input{
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
    width: 100%;
    height: 2rem;
    text-align: center;
    font-size: 1.2rem;
}
.form-login input[type="text"]:focus, .form-login input[type="password"]:focus{
    outline: none;
    background: #ECF0F1 ;
    text-align: center;
}
.form-login input[type="submit"]{
    border: 1px solid #112846;
    color: #fff;
    background-color: #112846;
    width: 25%;
}
.form-login input[type="submit"]:hover{
    border: 1px solid #112846;
    color: #112846;
    background-color: #fff;
    width: 25%;
}
.show{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -10%);
    border: 1px solid #112846;
    background-color: #ededed;
    box-shadow: 2px 2px 5px gray;
    padding: 10px 20px;
}
.show:hover{
    box-shadow: none;
}
/* ------------------ page process ---------------------  */
.process-p{
    text-align: center;
    font-size: 2.5vw;
    font-weight: 600;
    margin: 2rem;
}
.process-p:first-of-type{
    color: green;
}
.process-p a{
     display: inline-block;
     text-decoration: none;
     color: #fff;
     background-color: #1A5276;
     border: 1px solid #1A5276;
     padding: 10px 20px;
}
.process-p a:hover{
    color: #1A5276;
     background-color: #fff;
}
@media screen and (max-width:1023px){
    .tableau p{
        line-height: 3rem;
        text-align: left;
    }
    main{
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    overflow: hidden;
    overflow-x: scroll;
    }
    #simpleTable1{
        width:1400px;
    }
    #simpleTable2{
        width:1000px
    }
    
}
@media screen and (max-width:767px){
    .tableau form{
        flex-direction: column;
        gap: 1rem;
    }
    .soumettre-tab{
        width: 50%;
    }
    .tableau form select{
        margin-right: 0;
    }
    .form-login input[type="submit"]{
        width: 50%;
    }
    .form-login{
        padding: 5rem 2rem;
    }
    .formulaires{
        flex-wrap: wrap;
        width: 100%;
    }
    .formulaires article, .tableau form, .cinquante, .relatif, .btn-valider input[type="submit"]{
        width: 100%;
    }
    .choix-client, .detail-presta, .frais-cont{
        border-right: none;
    }
    .bout-deco{
        width: 35%;
    }
    .btn-modifenreg input{
        width: 40%;
    }
    .client div, .client-supprimer div, .intervenant div, .supprimer-intervenant div{
        padding-left: 1rem;
    }
    .hora{
        flex-direction: column;
    }
}