@import url("https://use.typekit.net/hwt1gmq.css");

:root {
    --basicColor1: #1E365C;
    --basicColor2: #EC5553;
    --basicColor3: #539FEC;
    --basicColor4: #8252E9;
    --basicColor5: #FFB300;
    --basicColor7: #40A842;
    --basicColor8: #CEFEC2;
    --basicColor9: #FEF6C2;
    --basicColor10: #FEE2E2;
    --basicColor11: #CCCCCC;
    --basicColor12: #EBD7FF;
    --basicColor13: #E2F1FE;
    --basicColor14: #9e9e9e;
    --basicColor15: rgba(158, 158, 158, 0.2);
    --basicWhite: #ffff;
    --basicBlack: #000000;
    --basicColorLight: #cccccc;
    --smallRadius: 10px;
    --basicRadius: 20px;
    --bigRadius: 30px;
    --defaultSpacing: 2rem;
    font-size: 20px;
}

.colorWhite {
    color: var(--basicWhite);
}

.bgWhite {
    background-color: var(--basicWhite);
}

.fillWhite path {
    fill: var(--basicWhite);
}

.colorBlack {
    color: var(--basicBlack);
}

.bgBlack {
    background-color: var(--basicBlack);
}

.colorBlue {
    color: var(--basicColor1);
}

.bgBlue {
    background-color: var(--basicColor1);
}

.colorLightBlue {
    color: var(--basicColor3);
}

.bgLightBlue {
    background-color: var(--basicColor3);
}

.fillLightBlue path {
    fill: var(--basicColor3);
}

.colorOrange {
    color: var(--basicColor2);
}

.bgOrange {
    background-color: var(--basicColor2);
}

.fillOrange path {
    fill: var(--basicColor2);
}

.colorPurple {
    color: var(--basicColor4);
}

.bgPurple {
    background-color: var(--basicColor4);
}

.colorYellow {
    color: var(--basicColor5);
}

.bgYellow {
    background-color: var(--basicColor5);
}

.colorGreen {
    color: var(--basicColor7);
}


.fillWhite path {
    fill: var(--basicWhite);
}

.valid {
    background-color: var(--basicColor7);
    color: var(--basicWhite);
    border-radius: var(--bigRadius);
    padding: .5em 1em;
}

.complete {
    background-color: var(--basicColor2);
    color: var(--basicWhite);
    border-radius: var(--bigRadius);
    padding: .5em 1em;
}

.status, .type {
    border-radius: var(--bigRadius);
    padding: .5em 1em;
}

.qualifie, .valide {
    color: var(--basicColor7);
    background-color: var(--basicColor8);
    border-radius: var(--bigRadius);
    padding: .5em 1em;
}


.color_valide {
    color: var(--basicColor7);
}

.en_cours {
    color: var(--basicColor5);
    background-color: var(--basicColor9);
    border-radius: var(--bigRadius);
    padding: .5em 1em;
}

.color_en_cours {
    color: var(--basicColor5);
}

.suspendu, .refuse, .annule {
    color: var(--basicColor2);
    background-color: var(--basicColor10);
    border-radius: var(--bigRadius);
    padding: .5em 1em;
}

.color_refuse {
    color: var(--basicColor2);
}

.color_annule {
    color: var(--basicColor2);
}

.disqualifie {
    color: var(--basicBlack);
    background-color: var(--basicColor11);
    border-radius: var(--bigRadius);
    padding: .5em 1em;
}

.interne, .gestionnaire {
    color: var(--basicColor4);
    background-color: var(--basicColor12);
    border-radius: var(--bigRadius);
    padding: .5em 1em;
}

.externe, .admin {
    color: var(--basicColor3);
    background-color: var(--basicColor13);
    border-radius: var(--bigRadius);
    padding: .5em 1em;
}


body *, body {
    font-family: "Poppins", sans-serif;
    margin: 0;
    box-sizing: border-box;
    color: var(--basicColor1);
}

body {
    -webkit-box-shadow: 0 0 42px 44px rgba(0, 0, 0, 0.09);
    box-shadow: 0 0 42px 44px rgba(0, 0, 0, 0.09);
    background-color: #BEC8D6;
    position: relative;
    min-height: 100vh;
}

nav {
    padding-bottom: 1.5em;
}

main {
    max-width: calc(1700px + 4em);
    margin: 0 auto;
    padding: 0 2em 2em 2em;
}

a {
    text-decoration: none;
    font-size: 1em;
    font-weight: 400;
}

p {
    line-height: 1.2em;
    font-weight: 400;
}

.bigSpacing {
    padding: calc(var(--defaultSpacing) * 2)
}

.bigSpacingSide {
    padding: 0 calc(var(--defaultSpacing) * 2)
}

.smallUniformSpacing {
    max-width: 1500px;
    margin: 0 auto;
}

.uniformSpacing {
    max-width: 1500px;
    margin: 0 auto;
}

.bigUniformSpacing {
    max-width: 1920px;
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    font-weight: 400;
}

.bold {
    font-weight: 700;
}

.semiBold, .semiBold * {
    font-weight: 600;
}

.regular {
    font-weight: 400;
}

.medium {
    font-weight: 500;
}

.light {
    font-weight: 300;
}

.extraLight {
    font-weight: 200;
}

.size40 {
    font-size: 2em;
}

.size30 {
    font-size: 1.5em;
}

.size20 {
    font-size: 1em;
}

.size15 {
    font-size: 0.75em;
}

.size10 {
    font-size: 0.5em;
}

.upper {
    text-transform: uppercase;
}

.taj {
    text-align: justify;
}

.tas {
    text-align: start;
}

.tac {
    text-align: center;
}

.hidden {
    display: none !important;
}

.relative {
    position: relative
}

input {
    background-color: #F5F6FA;
    border: 1px solid #DFDFDF;
    border-radius: var(--smallRadius);
    padding: .5em 1em;
}

.mainbutton {
    display: flex;
    width: 100%;
}

.mainbutton.center {
    justify-content: center;
}

.mainbutton.left {
    justify-content: left;
}

.mainbutton.right {
    justify-content: right;
}

.mainbutton > * {
    border-radius: var(--bigRadius);
    border: none;
    text-align: center;
    width: fit-content;
    padding: .5em 1.5em;
}

.add {
    display: flex;
    align-items: center;
    gap: .5em;
    border-radius: var(--bigRadius);
    padding: .5em 1.5em;
    cursor: pointer;
    width: fit-content;
}

.add svg {
    width: 1em;
    height: 1em;
}

.add p {
    line-height: 1;
}

.pointer {
    cursor: pointer;
}

/* START MODAL */

.modal {
    display: flex;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(-100%); /* Départ en dehors de l'écran, vers le haut */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal-content {
    background-color: #fff;
    border-radius: var(--basicRadius);
    width: fit-content;
    position: relative;
    display: flex;
    height: auto;
    max-height: 90vh;
    overflow: auto;
    padding: 2em 0;
    min-width: 25em;
    max-width: 75%;

}

.modal.show {
    opacity: 1;
    transform: translateY(0);
}

.modal iframe {
    width: 100%;
    height: 100%;
}

.modal h2 {
    padding-bottom: .5em;
    padding-top: 1em;
}

.modal .close {
    position: absolute;
    top: .5em;
    right: 1em;
    font-size: 1em;
    cursor: pointer;
}

.modal .back {
    position: absolute;
    top: 1em;
    left: 1em;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: .25em
}

.modal .back svg{
    width: .5em;
    height: .5em;
}

.modal .back p{
    font-size: .5em;
}

.inputSeach {
    position: relative;
    width: 100%;
}


.inputSeach input {
    width: 100%;
}


.inputSeach .inputSeachValue {
    display: flex;
    flex-direction: column;
    gap: .25em;
    background-color: var(--basicWhite);
    position: absolute;
    width: 100%;
    padding: 0 .5em;
    border-bottom-right-radius: var(--smallRadius);
    border-bottom-left-radius: var(--smallRadius);
    height: 0;
    overflow-y: auto;
    transition: ease all .3s;
}

.inputSeach.active .inputSeachValue {
    height: auto;
    max-height: 5em;
    padding: .5em;
}


/* END MODAL */

/* START FORM */
.formContainer {
    padding: 0 2em;
    width: 30em;
    border-right: 1px solid #CCCCCC;
    height: 100%;
}

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

.formContainer form.crudForm {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
}

.formContainer form.crudForm .formGroup {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.formContainer form.crudForm .formGroup input, select, textarea {
    background-color: initial;
    border: 1px solid #DFDFDF;
    border-radius: var(--smallRadius);
    padding: .5em 1em;
}

.formContainer form.crudForm .formGroup input,
.formContainer form.crudForm .formGroup select,
.formContainer form.crudForm .formGroup textarea {
    background-color: initial;
    border: 1px solid #DFDFDF;
    border-radius: var(--smallRadius);
    padding: .5em 1em;
    width: 100%;
}

.formContainer form.crudForm .formGroup.fileInput .containerFileInput {
    position: relative;
}

.formContainer form.crudForm .formGroup.fileInput input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    opacity: 0;
}

.formContainer form.crudForm .formGroup.fileInput p {
    width: fit-content;
    height: calc(100% - 10px);
    background-color: var(--basicColor1);
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: var(--smallRadius);
    padding: .5em 1em;
    color: var(--basicWhite);
}

.formContainer form.crudForm .formGroup:has(.halfInput) {
    width: calc((100% - 1em) / 2);
}

.formContainer form.crudForm .formGroup input[type='color'] {
    appearance: none; /* enlève le style par défaut */
    -webkit-appearance: none; /* pour Chrome/Safari */
    border: none;
    width: 2em;
    height: 2em;
    cursor: pointer;
    padding: 0;
    border-radius: 100%;
    background: none;
}

.formContainer form.crudForm .formGroup input[type='color']::-webkit-color-swatch-wrapper {
    padding: 0;
}

.formContainer form.crudForm .formGroup input[type='color']::-webkit-color-swatch {
    border: none;
    border-radius: 100%;
}

.formContainer form.crudForm .formGroup input[type='color']::-moz-color-swatch {
    border: none;
    border-radius: 100%;
}


.formContainer form.crudForm .formGroup .multiSelect {
    display: flex;
    flex-wrap: wrap;
    gap: .25em;
}

.formContainer form.crudForm .submitContainer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-bottom: 2em;
}


.formContainer form.crudForm .submitContainer button[type="submit"] {
    padding: .5em 1.5em;
    border-radius: var(--bigRadius);
    border: none;
    cursor: pointer;
}

.formContainer .deleteContainer {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.formContainer .deleteContainer .submitContainer {
    padding-bottom: 0 !important;
    width: fit-content !important;
}

.formContainer .deleteContainer p {
    cursor: pointer;
}

.actionBtnContainer {
    display: flex;
    height: fit-content;
}

.actionBtnContainer svg {
    width: .5em;
    height: fit-content;
    cursor: pointer;
    position: relative;
}

.actionBtnContainer .actionBtn {
    position: absolute;
    top: -100%;
    background-color: white;
    padding: .75em;
    border-radius: 10px;
    box-shadow: 0px 3px 6px #00000029;
    right: 0;
    opacity: 0;
    display: none;
    transition: ease all .3s;
    flex-direction: column;
    gap: .5em;
    z-index: 10;
}

.actionBtnContainer.active .actionBtn {
    top: 100%;
    opacity: 1;
    display: flex;
    width: max-content;
}

.actionBtnContainer .actionBtn p, .actionBtnContainer .actionBtn input[type='submit'] {
    cursor: pointer;
    transition: ease all .3s;
    text-align: left;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    display: flex;
}

.actionBtnContainer .actionBtn p.delete {
    color: var(--basicColor2);
}

.actionBtnContainer .actionBtn .svgContainer {
    display: flex;
    align-items: center;
    gap: .5em;
}

.actionBtnContainer .actionBtn .svgContainer {
    display: flex;
    align-items: center;
    gap: .5em;
}

.actionBtnContainer .actionBtn .svgContainer svg {
    display: flex;
    width: 2em !important;
    height: 2em !important;
}

/* END FORM */

/* START NOTIFICATION */
.notification-container {

    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1001;

}

.notification-container .notification {
    color: white;
    padding: 1.5em 2em;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    column-gap: 1em;
    border-radius: 0.25rem;
}

.notification-container .notification.error {
    background-color: var(--basicColor2);
}

.notification-container .notification.success {
    background-color: var(--basicColor7);
}

/* END NOTIFICATION */

/* START MODAL DOCUMENT */

.modal-content .documentModal {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    padding: 0 1.5em;
    width: 100%;
}

.modal-content .documentModal .form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5em;
    align-items: end;
}

.modal-content .documentModal .form div {
    display: flex;
    flex-direction: column;
    gap: .5em;
    z-index: 1;
    border: 1px dashed #DFDFDF;
    border-radius: var(--basicRadius);
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 1em 2em;
}

.modal-content .documentModal .form div .btnFile {
    width: fit-content;
    padding: .75em 1.25em;
    border-radius: var(--bigRadius);
}

.modal-content .documentModal .form div svg {
    width: 2.5em;
    height: 2.5em;
}

.modal-content .documentModal .form div input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.modal-content .documentModal .form .submitBtnModal {
    padding: .5em 1.5em;
    border-radius: var(--bigRadius);
    border: none;
    cursor: pointer;
}

.modal-content .documentModal .documentsListe h2 {
    padding: 1em;
}


.modal-content .documentModal .documentsListe .document {
    display: flex;
    justify-content: space-between;
    gap: 2.5em;
    padding: .5em 0;
    border-bottom: 1px solid #D1D5DB;
    align-items: center;

}

.modal-content .documentModal .documentsListe .documentContainerText {
    display: flex;
    gap: .5em;
    align-items: center;
}

.modal-content .documentModal .documentsListe .documentContainerText .iconeContainer {
    width: 2em;
    height: 2em;
    padding: .5em;
    border-radius: var(--bigRadius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content .documentModal .documentsListe .documentContainerText .iconeContainer svg {
    width: 100%;
    height: 100%;
}

.modal-content .documentModal .documentsListe .documentContainerText .infoDocument {
    display: flex;
    flex-direction: column;
    gap: .25em;
}

.modal-content .documentModal .documentsListe .btnContainer {
    display: flex;
    gap: 1em;
}

.modal-content .documentModal .documentsListe .btnContainer a {
    display: flex;
}

.modal-content .documentModal .documentsListe .btnContainer svg {
    width: .75em;
    height: .75em;
    cursor: pointer;
}

/* END MODAL DOCUMENT */

/* START TAG LISTE */
.tagListe {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    padding-top: .75em;
}

.tagListe p {
    border-radius: var(--bigRadius);
    padding: .5em 1.5em;
}

/* END TAG LISTE */

/* START FILTERS */
section .titleContainer .filters {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5em;
}

section .titleContainer .filters .search {
    position: relative;
}

section .titleContainer .filters .search input {
    width: 30ch;
}

section .titleContainer .filters .search button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
}

/* END FILTERS */

@media screen and (max-width: 700px) {
    .modal-content {
        width: 90vw;
        min-width: initial;
    }

    .formContainer {
        width: 100%;
    }

    section > .titleContainer {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}


@media screen and (max-width: 600px) {
    main {
        padding: 0 .5em 2em .5em;
    }

}