@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    margin-top: 50px;
    margin-bottom: 0px;
    margin-right: 50px;
    margin-left: 50px;
    padding: 0;
    font-family: 'Montserrat', 'Sans-serif';
    top: 50%;
    left: 50%;
    transform: translante(-50%, -50%);
    overflow-x: hidden;
    background-color: #c4f1d7;
    
}

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 5px solid #6f6f6f;
    border-color: #0a0a0a;
}

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

    nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        border-bottom: 5px solid #6f6f6f;
        border-color: #0a0a0a;
    }


}

nav h1 {
    color: #717171;
    font-family: 'playfair Display', 'Sans-serif';
    font-size: 30px;

}

nav .onglets {
    margin-top: 5px;
    margin-left: 300px;

}

nav .onglets a {

    text-decoration: none;
    display: inline-block;
    margin: 0 10px;
    padding: 5px 20px;
    color: black;
    border: 1px solid black;
    border-radius: 20%;
    position: relative;
    z-index: 1;
    transition: color 0.5s;

}




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

    nav .onglets a {

        text-decoration: none;
        margin: 0 2px;
        color: black;
        border-bottom: 1px solid black;
        border-radius: 20%;
        padding: 5px 5px;

    }

}



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

    nav .onglets a span {

        width: 0;
        height: 100%;
        background: #fff;

    }

}


nav .onglets a span {

    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #008000;
    z-index: -1;
    transition: 0.5s;
}


nav .onglets a:hover span {
    width: 100%;
    border-radius: 10px;

}

nav .onglets a:hover {
    color: white;
    font-weight: bold;
}




header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: url('images/background-header.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    background-color: #FFAC1C;
    border-radius: 3%;
    color: black;
    padding: 10px;
}




.header_index {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url('images/background-header.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    background-color: #FFAC1C;
    border-radius: 3%;
    color: #0a0a0a;
    padding: 30px;
}


/* .impression {

    background: url('images/header.jpg');
    background-size: cover;
    height: 200px;
    background-color: #FFAC1C;
    color: #0a0a0a;
    padding: 0%;
    margin: auto;

} */


div .imgheader {
    max-width: 100%;
    height: auto;
}


@media print {

    #header,
    #footer,
    nav,
    header,
    footer,
    #nav,
    .impression {
        display: none !important;
        /* position: fixed;
        top: 0; */
    }

    @page {
        margin: 2;

    }

    picture img {
        display: block;
        margin: auto;
    }



    table thead tr th {
        font-size: 20pt;
        /* Set font size for table header cells */
        font-weight: bold;
        /* Optionally make header text bold */
    }


    table {
        font-size: 10px;
        font-weight: bolder;
        color: #000;
        font-family: 'Times New Roman', Times, serif;
        border-collapse: collapse;
        /* Ensure cells are flush with one another */
        width: 100%;
    
        /*  counter-reset: case;*/
        border-collapse: collapse;
    }

    table tr td {
        font-size: 15pt;
        /* Set font size for table data cells */
        text-align: center;
        /* Optionally center-align text in data cells */
        padding: 8px;
        /* Add padding for better readability */
        border: 1px solid #ccc;
        /* Add borders to cells */
    }

    /* body {} */

    /* footer {
        /* position: fixed;
        bottom: 0; */
}


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

    header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: url('images/background-header.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
        background-color: #FFAC1C;
        border-radius: 3%;
        color: #fff;
        padding: 5px;
    }


}



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

    .header_index {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: url('images/background-header.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
        background-color: #FFAC1C;
        border-radius: 3%;
        color: #fff;
        padding: 10px;
    }


}



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

    header h1 {
        font-family: 'playfair Display', 'Sans-serif';
        font-size: 50px;
    }


}

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

    header h4 {
        text-align: center;
        align-items: center;
    }


}



.main .title-container h3 {
    color: #fff;
}

body h2 {
    text-align: center;
}

header h1 {
    font-family: 'playfair Display', 'Sans-serif';
    font-size: 50px;
    text-align: center;
}

header .entete_impression {
    text-align: center;
}

header h4 {
    margin-top: -20px;
    font-size: 20px;
    text-align: center;
    border-bottom: 1px solid #fff;
}

/* .entete_impression {
    text-align: center;
} */

header button {
    padding: 10px 20px;
    background-color: #fff;
    color: black;
    border: none;
    font-size: 20px;
    font-family: 'playfair Display', 'Sans-serif';
    outline: none;
    cursor: pointer;
    border-radius: 20%;
}

header button a {
    text-decoration: none;
    border: none;
    font-size: 20px;
    font-family: 'playfair Display', 'Sans-serif';
}

header button a:hover {
    color: black;
    font-weight: bold;

}

.button-container {
    position: relative;
    left: 42%;


}


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

    .button-container {
        position: relative;
        left: 23%;
    }

}

.main {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main .content .card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

.main .content .card .left {
    flex: 0 0 30%;
    padding: 20px;
    background-color: black;
    color: #fff;
    border-radius: 20px;

}


.main .content .card .left {
    flex: 0 0 30%;
    padding: 20px;
    background-color: black;
    color: #fff;

}

.main .content .card .left p {
    text-align: justify;

}




.main .content .card.right {
    flex: 0 0 70%;
}

.main .content .card .right img {
    height: 300px;
    width: 400px;
    margin-top: 5px;
}



.main_login {

    display: block;
    float: right;
    align-items: center;
    background-color: rgba(212, 203, 203, 0.4);
    height: 60vh;
    width: 50%;
    margin-top: auto;
    border-radius: 10px;

}


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

    .main_login {

        align-items: center;
        background-color: rgba(212, 203, 203, 0.4);
        height: 40vh;
        width: 100%;
        margin: auto;
        border-radius: 10px;
    }
}



.main_login .title-container {
    text-align: center;
}

footer {
    margin-top: 40px;
    border-top: 5px solid #6f6f6f;
    background-color: black;
    color: #fff;
    padding: 5px 5px;
    text-align: center;
    justify-content:center;
    font-weight: bold;
    
}

footer h1 {
    font-family: 'playfair Display', 'Sans-serif';
    border-bottom: 1px solid #fff;
    width: 20%;
    padding-bottom: 5px;
}

footer .services {
    margin-top: -10px;
    display: flex;
    flex-wrap: wrap;
}

footer .services .service {
    margin-right: 30px;
}

footer .services .service p {
    max-width: 300px;
    
}

footer #contact {
    color: rgb(181, 181, 181);
    font-weight: bold;
    
}

@media screen and (max-width:680px) {
    nav .onglets {
        margin-left: 0px;
        margin-bottom: 20px;
    }


    nav .onglets {
        margin-left: 0px;
        margin-bottom: 20px;
    }


    .main .card {
        margin: 10px;
    }

    .main .content .card .right img {
        height: 200px;
        width: 100%;
        margin-top: 0px;
    }

    .main .content .card {
        display: block;
    }

    footer {
        padding: 30px;
    }

}


/* CSS DSIGNATURE */

#signatureCanvas {
    border: 2px solid rgb(245, 241, 241);
    width: 30%;
    height: 50px;
    touch-action: none;
    background-color: #fff;
    position: relative;
    left: 33%;
}




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

    #signatureCanvas {
        border: 2px solid rgb(245, 241, 241);
        width: 50%;
        height: 100px;
        touch-action: none;
        background-color: #fff;
        position: relative;
        left: 25%;

    }

    /* Désactive le comportement par défaut sur les écrans tactiles */
}

.button-container {
    margin-top: 10px;
}


.button_login_submit {
    margin-top: 10px;
}


/* .sign {
    .center {
        background-color: aqua;
        margin: auto;
        width: 100%;
        border: 3px solid rgb(12, 12, 12);
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

    } */


.form_presence {
    background-color: #008000;
    width: 80%;
    border-radius: 10px;
    margin: auto;
    padding: 10px;
    color: #fff;
}

.form_presence1 {
    background-color: #008000;
    width: 20%;
    border-radius: 10px;
    margin: auto;
    padding: 10px;
    color: #fff;
}



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

    .form_presence {
        background-color: #008000;
        justify-content: center;
        width: 100%;
        border-radius: 10px;
        margin: auto;
        padding: 10px;
        color: #fff;
    }
}



.form_presence h3 {
    position: relative;
    left: 43%;
}



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

    .form_presence {
        background-color: #008000;
        justify-content: center;
        width: 100%;

        color: #fff;
    }


}


.form_presence input {
    width: 100%;
    text-transform:uppercase;
}


.form_login {
    background-color: #008000;
    justify-content: center;
    width: 80%;
    border-radius: 10px;
    margin: auto;
    padding: 20px;
    color: #fff;

}



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

    .form_login {
        background-color: #008000;
        justify-content: center;
        width: 100%;
        border-radius: 10px;
        margin: auto;
        padding: 20px;
        color: #fff;

    }

}



.form_login input {
    width: 100%;
    margin-bottom: 10px;
}

legend {
    font-size: larger;
    font-weight: bold;
}

.checkbox {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    margin-bottom: 10px;
}


th,
td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

/*td:before {
    counter-increment:case;
    content:counter(case);
}*/

th {
    background-color: #f2f2f2;
}


/* appliquer bordure à l'IMAGE de signature généré dans le tableau à imprimer  */

.signature-img {
    border: 1px solid black;
}

/* IMAGE ENTETE */

.impression {
    overflow: hidden;


}

.impression img {
    width: 100%;
}





/* MASQUER IMAGE ENTETE PAGE IMPRESSION A L'ECRAN */

@media screen {
    picture img {
        display: none;
    }
}



th {
    /* font-size: 30px; */
    /* Set font size for table header cells */
    font-weight: bold;
    /* Optionally make header text bold */
}

td {
    /* font-size: 25px; */
    /* Set font size for table data cells */
    text-align: center;
    /* Optionally center-align text in data cells */
    padding: 8px;
    /* Add padding for better readability */
    border: 1px solid #ccc;
    /* Add borders to cells */
}




/* Media query for smaller screens (e.g., mobile devices) */
@media screen and (max-width: 768px) {
    td {
        font-size: 14px;
        /* Reduce font size for smaller screens */
    }
}