* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    max-width: 100vw;
}
li{
    list-style-type: none;
}
.slide-down {
    padding-left: 1rem;
}

.slide-down::before {
    font-family: "Material Icons";
    color: inherit;
    font-size: 1.25rem;
    content: "\e7cd";
    display: inline-block;
    vertical-align: middle;
    margin-right: 1rem;

}


.slide::before {
    font-family: "Material Icons";
    color: inherit;
    font-size: 1.25rem;
    content: "\e7cd";
    display: inline-block;
    vertical-align: middle;
    margin-right: 1rem;

}
.slide + div{
    display: none;
}
.slide{
    z-index: 10;
}

/* .btn {
    width: fit-content;
    min-width: 10vw;

    margin: 0.25rem;
} */

.btn-invisible {
    border: none;
    background: transparent;
    width: fit-content;
}

pre {
    background-color: white;
}

div {
    box-sizing: border-box;
}

/* .btn{
    margin-bottom: 2vw;
} */
.btn-lien {
    background: transparent;
    margin: 0;
    border: none;
}

.material-icons-outlined {
    color: white;
    font-weight: lighter;
    font-size: 34px;


}

body {
    position: relative;
    display: block;
    width: fit-content;
    height: fit-content;
    width: 100%;
    min-height: 100vh;
    /* background: linear-gradient(rgb(174, 173, 173), rgb(126, 125, 125));
    background-repeat: no-repeat;
    background-size: cover; */
    background-image: radial-gradient(circle at top left, rgb(36, 82, 165) 0%, rgb(36, 82, 165) 5%, rgb(47, 100, 177) 5%, rgb(47, 100, 177) 10%, rgb(57, 117, 190) 10%, rgb(57, 117, 190) 15%, rgb(68, 135, 202) 15%, rgb(68, 135, 202) 20%, rgb(79, 152, 215) 20%, rgb(79, 152, 215) 25%, rgb(90, 170, 227) 25%, rgb(90, 170, 227) 30%, rgb(100, 187, 240) 30%, rgb(100, 187, 240) 35%, rgb(111, 205, 252) 35%, rgb(111, 205, 252) 100%);
    box-sizing: border-box;
    overflow-x: hidden;


}

.hidden {
    display: none;
}

.spinner {
    position: absolute;
    width: fit-content;
    height: fit-content;
    z-index: 10;
    padding: 10px 30px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: row;
    animation: spin 5s linear infinite;
}

.pointer{
    cursor: pointer;
}

.spin1 {
    display: flex;
    margin-right: 20px;
    border: 6px solid #9a9a9a;
    /* couleur de fond */
    border-top: 6px solid #3498db;
    /* couleur du spinner */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;

}

.spin2 {
    display: flex;
    margin-right: 20px;
    border: 6px solid #9a9a9a;
    /* couleur de fond */
    border-top: 6px solid #4cdc28;
    /* couleur du spinner */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1.1s linear infinite;
}

.spin3 {
    display: flex;

    border: 6px solid #9a9a9a;
    /* couleur de fond */
    border-top: 6px solid #f02f22;
    /* couleur du spinner */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1.2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

.nav {
    width: 100%;
    background: linear-gradient(to top right, rgba(255, 0, 0, 0) 20%, rgb(21, 71, 151));
    position: relative;
    display: flex;
    height: 8vw;
    min-height: 60px;
    padding: 3px;
    top: 0;
    justify-content: space-between;
    margin-bottom: 2vw;
    box-sizing: border-box;
    padding: 1vw;

}

.nav a {
    height: 100%;
    justify-self: center;
}

.nav>img {
    height: 100%;
}



.bars {
    position: absolute;
    display: none;
    top: 20px;
    right: 30px;
    z-index: 1000;



}

.bars>nav {
    left: 100;
}

.contNav {
    display: flex;
    width: 80vw;
    justify-content: space-between;
    text-align: center;
    margin-right: 2vw;



}

.contNav ul {
    height: 100%;
    align-items: center;

}

.menu {
    display: flex;
    width: auto;
    list-style-type: none;
    margin: auto;
    justify-content: space-between;
    align-items: center;

}


.menu li {
    display: flex;
    width: fit-content;
    align-items: center;
    border-right: 1px solid lightgray;

    height: 100%;
    justify-content: center;
    padding: 0 10px 0 10px;


}

.menu li:nth-last-child(1) {
    border: none;
}



.menu>li>a {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 600;
    font-size: calc(8px + 0.5vw);
    color: white;
    justify-content: center;
    height: fit-content;





}



textarea {
    width: 100%;
    height: fit-content;
    min-height: 5vw;
    border-radius: 4px;
}


.select {
    display: flex;
    align-self: center;
}

.page {

    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

h1 {
    color: #282866;
    /* font-size: 3vw; */
    margin-top: 3vw;
    margin-top: calc(10px+1vw);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3vw;
}

h2 {
    color: #282866;
    /* font-size: calc(10px + 1vw); */
    margin-top: 3vw;
    margin-top: calc(10px+1vw);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3vw;
    width: fit-content;
    max-width: 50%;
    text-align: center;
}

#pagePresences {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.titre {
    display: flex;
    height: fit-content;
    width: 100vw;
    justify-content: center;
    font-size: 3vw;
    ;
}






#mesDonnees,
.tbEval {
    position: relative;
}
.CB{
    background-color: grey!important;
}
input[type='radio']{
    background-color: lightgrey;
    cursor: pointer;
}
input[type='radio']:checked{
    background-color: greenyellow;
}



.confirmation {
    color: rgb(6, 141, 182);
    font-size: calc(10px + 2vw);
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    background-color: blanchedalmond;
    border-radius: 6px;
    padding: 0 10px 0 10px;
}

#btPres {
    font-size: calc(10px + 0.8vw);
    width: fit-content;
    border-radius: 6px;
}

#groupePres,
#datePres {
    font-size: calc(6px + 0.6vw);
    width: fit-content;
    border-radius: 6px;
}

#mesDonnees>thead>tr {
    background-color: rgb(0, 195, 255);
    font-size: calc(8px + 0.8vw);


}

#mesDonnees>thead>tr>th,
#mesDonnees>thead>tr>td {
    padding-left: calc(5px + 1vw);
    padding-right: calc(5px + 1vw);
    align-self: center;
    padding: 1vw;
    margin: auto;


}

.tbPresences>thead {
    padding-left: calc(5px + 1vw);
    padding-right: calc(5px + 1vw);
    align-self: center;
}

.donneesTableau {
    padding-right: calc(6px + 0.6vw);
    padding-left: calc(6px + 0.6vw);
    padding-right: calc(6px + 0.6vw);
    padding-top: 5px;
    padding-bottom: 5px;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: calc(6px + 0.6vw);
}

input[type=radio] {

    border: 0px;
    width: 100%;
    height: calc(6px + 1vw);
}

#mesDonnees thead {
    align-items: center;
    justify-content: center;
}

.masque {
    display: none;

}

.presStag {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 5px;
}

.selectionPres {
    display: flex;
    flex-direction: row;
    justify-content: center;

}

.mesDonnees {
    display: block;
    position: relative;


}

.entetePresence {
    font-size: calc(6px + 0.5vw);
    justify-content: center;
    padding: 0px 5px 0px 5px;
}



.divPres {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;

}

.datePres {
    position: relative;
    height: fit-content;
    border-radius: 6px;

}

#btPres {
    display: block;
    width: auto;
    text-align: center;
    margin-top: 1vh;
    margin-bottom: 5vh;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}


select {
    margin-bottom: 25px;
    margin-right: calc(6px + 0.6vw);
}



/* ---------------EVALUATION DES MODULES------------------------------------------- */

.tbEval {
    border: 2px solid green;
    width: fit-content;
    display: block;
    position: relative;
    margin: auto;
    font-size: calc(6px +0.8vw);
    justify-content: left;
    color: white;
    font-weight: 900;
    padding: 5px;
    border-spacing: 1vw;

}





input.cbMatin,
input.cbAprem,
input#masterCbMatin,
input#masterCbAprem {
    width: calc(10px + 0.4vw);
    height: calc(10px + 0.4vw);
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

#mesDonnees {
    padding: 1vw;
    margin-left: auto;
    margin-right: auto;

}

.savePresences {
    display: flex;
    margin-left: auto;
    margin-right: auto;

}

#groupe {
    display: flex;

}


/* #mesDonnees>td {
    border-spacing: 1vw;
    background-color: rgb(95, 89, 89);
    margin-top: auto;
    margin-bottom: auto;


} */

.eval {
    display: flex;
    flex-direction: column;
    position: relative;
    height: auto;
    margin: auto;

}

.formEval {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;



}

.tbEval {
    border-spacing: 1vw;
    color: white;
    font-size: calc(6px + 0.8vw);
    min-width: fit-content;
    border: 2px solid green;
    border-radius: 5px;
    margin-bottom: calc(5px + 1vw);
    padding: 1vw;
}

input,
button {
    padding-left: calc(5px + 0.5vw);
    padding-right: calc(5px + 0.5vw);
}

input#submitEval {
    position: relative;
    display: block;
    margin-top: calc(5px + 1vw);
}

.listeModules {
    width: 100%;
}

#submitPres {
    width: fit-content;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}


/*---------------------------ECRAN SMARTPHONE------------------------------------------------*/
@media screen and (max-width: 1000px) {
    body {
        overflow: auto;
    }

    .contNav {

        width: 100%;
        background-color: rgba(255, 255, 255, 85%);
        width: 100vw;
        height: 100vh;
        top: 0%;
        position: absolute;
        left: 0%;
        justify-content: center;
        align-items: center;
        left: -100vw;
        transition: 0.5s;




    }

    .nav {
        width: 100%;
        background: linear-gradient(to top right, rgba(255, 0, 0, 0) 20%, rgb(21, 71, 151));
        position: relative;
        display: flex;
        height: 10vh;
        min-height: 60px;
        padding: 3px;
        top: 0;
        justify-content: space-between;



    }

    .mobile-menu {
        left: 0%;
        transition: 0.5s;
        display: flex;
        z-index: 100;




    }

    .contNav ul {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        align-items: center;
        height: 100vh;

    }

    .contNav li {
        border: none;
    }

    .contNav>ul>li>a {
        display: flex;
        font-size: calc(12px + 1vw);
        color: rgb(10, 45, 160);
        border: none;



    }


    Nav {
        padding: 0px;
    }

    .bars {
        display: flex;
    }

    h1 {

        /* font-size: 20px */
        /* font-size: 3vw; */
        margin-top: calc(10px+1vw);
        margin-left: auto;
        margin-right: auto;
    }

    h2.bienvenue {


        /* font-size:3vw; */
        margin-top: calc(10px+1vw);
        margin-left: auto;
        margin-right: auto;
    }




}




.TbEvenements td {
    padding: 0.25rem;
}

.TbEvenements select {


    margin-top: auto;
    margin-bottom: auto;
}

/*------------------ECRAN >1000PX-------------------------------------------------------------*/
@media screen and (min-width: 1000px) {

    .Tbpresences,
    .tbEval,
    select,
    input,
    #mesDonnees,
    button,
    .TbEvenements {
        /* font-size: calc(6px + 0.5vw); */
        padding: 5px;

    }



    h1 {

        font-size: 2vw;
        margin-top: calc(10px+1vw);
        margin-left: auto;
        margin-right: auto;



    }

    h2 {

        font-size: 1vw;
        margin-top: calc(10px+1vw);
        margin-left: auto;
        margin-right: auto;



    }

}

.material-symbols-outlined {
    color: rgb(0, 0, 0);
}

/* -----------------------EVENEMENTS---------------------- */

.visible {
    display: flex;
}

.invisible {
    display: none;
}


.TbEvenements {
    border-spacing: 1vw;
    /* scolor: rgb(5, 5, 5); */
    /* font-size: calc(6px + 0.8vw); */
    min-width: 300px;
    border: 2px solid rgb(0, 195, 255);
    border-radius: 5px;
    margin-bottom: calc(5px + 1vw);
    padding: 1vw;




}

.TbEvenements td {
    margin-top: auto;
    margin-bottom: auto;
    padding: 5px;
    width: fit-content;
  

}







.textPrecis {
    width: 100%;
}

#pageEvenements {
    display: flex;
    flex-direction: column;
    grid-area: formulaire;
}

#submitEvent {
    width: fit-content;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vw;
}

/* --------------------IDENTIFICATION--------------------------------------------------- */
.connexion {
    background-color: white;
    display: flex;
    flex-direction: column;
    width: calc(300px + 5vw);
    border-radius: 7px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(to top, rgba(255, 0, 0, 0) 20%, rgb(21, 71, 151));


}

.connexion>label {
    color: #ffffff;
    font-size: calc(12px + 1vw);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 5px;
}

.connexion>input {

    margin-bottom: calc(10px + 1vw);
    width: 70%;
    font-size: calc(6px + 0.5vw);


}

tr {
    vertical-align: middle;
}

input.btId {
    background-color: rgb(21, 71, 151);
    width: 70%;
    padding: 3px;
    color: white;
    border-radius: 5px;
    font-size: calc(10px+1vw);
}

p.resultId {
    position: relative;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    font-size: calc(8px + 0.8vw);
    color: rgb(255, 4, 4);
    justify-content: center;
}

/* --------------------MODULES---------------------------------- */
.gridModule {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.formModules {
    display: flex;
    flex-direction: column;
    width: fit-content;
    min-width: 300px;
}

.btTabMod {
    align-self: flex-start;
}

.section {
    background-color: rgb(61, 86, 86);
    margin-bottom: 2vw;
    ;
    padding: 1vw;
    border-radius: 6px;
    box-shadow: #282866;

}

.sous-section {
 
    background-color: rgb(178, 208, 208);
    margin-bottom: 2vw;
    ;
    padding: 1vw;
    border-radius: 6px;
    box-shadow: #282866;
}

.formModules legend {
    font-weight: 800;
}

.formModule {
    display: flex;
    flex-direction: column;

    width: fit-content;
}

.formModule a {
    font-size: calc(5px + 0.6vw);
}

textarea {
    font-size: calc(5px + 0.6vw);
}



.tableauModule {
    display: flex;
    flex-direction: column;
    width: 100%;

    font-size: calc(8px + 0.5vw);
    text-align: left;
    margin-bottom: 2vw;




}

/* .tableauModule table{
    border-spacing: 5px;
    color: white;
    background-color: rgb(203, 235, 255);
    border-radius: 5px;
    
} */

.tbMod,
.tbSeq {
    border-radius: 6px;
    box-shadow: 10px 5px 5px #474748;
    width: 100%;
}

.tbMod th,
.tbSeq th {
    padding-left: 1vw;
    padding-right: 1vw;
    color: white;
    background-color: grey;
    border-radius: 2px;


}

.tbMod td {
    padding-left: 3px;
    padding-right: 3px;
    color: rgb(49, 48, 48);
    background-color: rgb(203, 235, 255);
    border-radius: 2px;

}

.tbMod fieldset {
    width: fit-content;
    padding: 1vw
}

.tableauModule form {
    height: fit-content;
}

.tableauModule select {
    width: fit-content;
}

.tbSeq td {
    padding-left: 3px;
    padding-right: 3px;
    color: rgb(0, 0, 0);

    border-radius: 2px;
}

.tbseq tr {
    padding-left: 3px;
    padding-right: 3px;


    border-radius: 2px;
}

.tbSeq tr:nth-child(even) {
    background-color: rgb(255, 255, 255);


}

.section {
    color: rgb(255, 255, 255);
    padding: 10px;
}

.page legend {
    color: rgb(21, 71, 151);
    padding: 20px;
    font-size: calc(10px + 1.5vw)
}

.ajoutModule {
    width: fit-content;
    min-width: 100px;
    margin-top: 10px;
    border-radius: 6px;

}

.enregistrerModule {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: rgb(21, 71, 151);
    color: white;
    font-size: calc(10x + 1vw);
    border-radius: 2px;
    border: 1px solid grey;
    width: fit-content;
}

.submitModule {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
}


.choixModule button {
    background: linear-gradient(to top, rgba(255, 0, 0, 0) 20%, rgb(21, 71, 151));
    height: calc(20px + 1vw);
    border: none;
    margin-right: 2px;
    margin-bottom: 10px;
}

.masque {
    display: none;
    justify-content: space-between;
}

.divRessources {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.divRessources button {
    width: fit-content;
    background-color: transparent;
    border: none;
}

.dRessource {
    cursor: pointer;
}

.divRessources a {
    margin-top: auto;
    margin-bottom: auto;
}



.material-symbols-outlined {
    align-self: flex-end;
}

.color-green {
    color: rgb(34 223 34);
    font-weight: 400;
    font-size: 50px
}
.color-blue {
    color: rgb(34, 81, 223);
    font-weight: 400;
    font-size: 50px
}
.color-red {
    color: rgb(240, 13, 13);
    font-weight: 400;
    font-size: 50px
}




/* ------------------------------SEQUENCES-------------------------- */
.gridSequence {
    width: 80%;
    justify-self: center;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: space-between;
}

.tabForm {
    width: 100%;
}

.tabForm td {
    width: fit-content;
}



/* ---------------------------------------ACCUEIL----------------------------------- */
.tbEvents td {
    color: white;
    border: 1px solid;
    padding: 3px;
    font-size: calc(5px + 0.8vw);
    width: 90%;
    width: fit-content;
    max-width: fit-content;

    gap: 5px;
}

.tbEvents {
    width: fit-content;
    color: white;
    border: 1px solid;
    padding: 3px;
    font-size: calc(5px + 0.6vw);
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
}

.tbEvents td,
.tbEvents a {

    padding: 3px;

    font-size: calc(5px + 0.4vw);

}

.tbEvents input {
    background-color: transparent;
    color: rgb(24, 24, 255);
    border: none;
    text-decoration: underline;
    font-size: calc(5px + 0.4vw);
    width: fit-content;
    max-width: fit-content;
    cursor: pointer;
    padding: 3px;



}


.tbEvents a {
    color: rgb(24, 24, 255);
}

.tbEvents th {
    background-color: rgb(0, 195, 255);
    color: black;
    width: fit-content;
    max-width: fit-content;


}

.tbEvents th:nth-child(6) {
    width: 40%;
}

.tbBord {
    box-shadow: 10px 5px 5px #474748;
    margin-bottom: 3vw;
    margin-right: 2vw;
    height: fit-content;
    border-radius: 6px;
    border: 1px solid #89898a;
    padding-bottom: 1vw;
}

/* ---------------------TRAITEMENT des EVENEMENTS */

.pageAction {
    height: fit-content;
    width: fit-content;
    max-width: 70vw;
    margin-left: 1vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
        "recap recap"
        "recapAction recapAction"
        "action note"
        "cloture cloture"
        "send send";
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
    align-items: center;
    justify-items: center;

}

.pageAction legend {
    color: rgb(21, 71, 151);

    font-size: calc(10px + 1.5vw)
}



.rappelEvent {
    grid-area: recap;
    background-color: beige;
    border-radius: 6px;
    width: fit-content;
    height: fit-content;


}



.note {
    grid-area: note;
    justify-self: center;
}

.cloture {
    grid-area: cloture;
}


.recapAction {
    grid-area: recapAction;
}


.rappelEvent td {
    padding: 2px 5px 2px 5px;

}

.actionEvent {
    grid-area: action;
    width: fit-content;
    display: flex;
    flex-direction: row;
}

.actionEvent fieldset {
    color: white;
    margin-bottom: 1.5vw;
    width: fit-content;
}

.actionEvent table {
    border-spacing: 1vw;
}

.actionEvent label {
    color: white;
    margin-left: 1vw;
}

.pageAction input[type="submit"] {
    grid-area: send;
    font-size: calc(5px + 0.5vw);
    margin: 3vw 0 3vw 0;
    border-radius: 6px;
    width: fit-content;
}

.pageEvent {
    width: 100vw;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "formulaire formulaire"
        "liste liste";
    grid-column-gap: 1vw;
    justify-content: space-around;

}

.TbEvenements {
    grid-area: formulaire;
    padding: 5px;
}

.tbEvenements h {
    /* color :rgb(239, 10, 10); */
    padding: 5px;
}

.listeEvenement {
    grid-area: liste;
    margin-bottom: 2vw;
}


.tbRecapAction,
.tbRecapAction th,
.tbRecapAction td {

    color: white;
    border: 1px solid black;
    padding: 2px 5px 2px 5px;
    font-size: calc(5px + 0.8vw);
    padding: 0.5vw;

    gap: 5px;

}

.tbRecapAction th {
    background-color: rgb(0, 195, 255);
    color: black;
}



/* ---------------------------SAISIE----------------------------------------------------------------------- */
.gridSaisie {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 2vw;
    grid-row-gap: 2vw;
    margin: 15px;
    box-sizing: border-box;
}

.saisie {
    display: flex;
    font-size: 1vw;


}

.saisie th {
    text-align: right;

}



.saisie fieldset {
    padding: 5px;
    margin-bottom: 10px;

}

.firstField {
    width: 100%;
    background-color: rgb(207, 237, 227);
    border-radius: 6px;
    box-shadow: 5px 5px 10px black;
}



.saisie select {
    margin-top: auto;
    margin-bottom: auto;
}

.saisie table {
    border-spacing: 5px;
}

.saisie legend {
    padding: 3px;
}

.infoSaisie {
    width: 100%;
    padding: 2vw;
}

/* ----------------------------BUDGET------------------------- */
.tbDepenses td {
    color: white;
    border: 1px solid;
    padding: 2px 5px 2px 5px;
    font-size: calc(5px + 0.8vw);
    width: 90%;
    width: fit-content;
    max-width: fit-content;

    gap: 5px;
}

.tbDepenses {
    width: 90%;
    color: white;
    border: 1px solid;
    padding: 2px 2px 2px 2px;
    font-size: calc(5px + 0.8vw);
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
}

.tbDepenses input {
    background-color: transparent;
    color: rgb(24, 24, 255);
    border: none;
    text-decoration: underline;
    font-size: calc(5px + 0.8vw);
    width: fit-content;
    max-width: fit-content;
    cursor: pointer;

}

.tbDepenses th {
    background-color: rgb(0, 195, 255);
    color: black;
    width: fit-content;
    max-width: fit-content;


}

.tbDepenses th:nth-child(9) {
    width: 25%;
}

.listeDepenses {
    width: 100%;
    grid-area: liste;
    margin-bottom: 2vw;
}


/* -------------------FORMATION ---------------------------- */



/* -------------------STAGIAIRES ---------------------------- */
.tableauModule form {
    display: flex;
    justify-content: center;
}

.table-stagiaires a {
    color: rgb(0, 0, 75);
}

/* ---------------------------FICHE STAGIAIRE----------------- */
.fiche {
    background-color: transparent;
    box-shadow: none;
    border: none
}

/* -------------------QUALITE---------------------------- */


.tableauQualite td {
    width: fit-content;
    max-width: 20vw;
    font-size: calc(5px + 0.6vw);

}

.standby {
    /* Styles pour votre élément */
    animation: spin 2s infinite linear; /* Animation pour faire tourner */
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .conteneur {
    overflow: hidden; 
    position: relative; 
  }
  
  .texte {
    position: absolute; 
    white-space: nowrap; 
    animation: defilement 10s linear infinite; 
  }
  

  @keyframes defilement {
    0% , 100%{
      left: 0%; 
    }
    50% {
      left: 25vw; 
  }
  }
  
  @keyframes tremble {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-2px, 2px); }
    20% { transform: translate(2px, -2px); }
    30% { transform: translate(-2px, 2px); }
    40% { transform: translate(2px, -2px); }
    50% { transform: translate(-2px, 2px); }
    60% { transform: translate(2px, -2px); }
    70% { transform: translate(-2px, 2px); }
    80% { transform: translate(2px, -2px); }
    90% { transform: translate(-2px, 2px); }
    100% { transform: translate(0, 0); }
}

.trembling {
    animation: tremble 0.5s ease-in-out infinite;
}

.trembling::before{
    content: "";
    background: radial-gradient( #4cdc28, transparent);
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.stick {
    position: sticky;
    flex-direction: column;
    display: flex;
    right: 0;
 
    top: 1rem; /* Ajout de top pour le positionnement vertical */
    width: fit-content;
}
.vertical-text {
    writing-mode: vertical-lr; /* Vertical text from right to left */
    white-space: nowrap; /* Prevent text wrapping */
  }

  .icon{
    font-size: 2rem;
    cursor: pointer;
  }

.rappelDossier{
    font-size: 1rem; 
    width: auto; 
    text-wrap:nowrap;

}

.pointer{cursor: pointer;}



#clear{
position: absolute;
top: 50px;
right: 20px;
}