body{
    font-family: 'Inter', serif;
    color: #111827;
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    max-width: 300px;
    word-wrap: break-word;
}

.notification-success { background-color: #10b981; }
.notification-error { background-color: #ef4444; }
.notification-warning { background-color: #f59e0b; }
.notification-info { background-color: #3b82f6; }


.sm-link{
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.3s ease;
    color: #1c75ff;
}


.xs-link{
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.3s ease;
    color: #1c75ff;
}
input[readonly],input[disabled],textarea[readonly],textarea[disabled],select[disabled],select[readonly] {
    background-color: #bebebe !important;
    color: #000000 !important;
}

.rejeter_field_span{
    cursor: pointer;
}

.required:before, .data-linked-required:before {
    content:" *  ";
    color: red;
}

.living-label{
    transition: transform 0.3s ease;
    cursor: pointer;
}
.living-label:hover{
    transition: transform 0.3s ease;
    font-weight: bolder;
    color: #0010b9;
}



.form-header-info-texte{
    font-size: 20px;
}

.sm-link:hover{
    color:#0046b4 ;
    font-weight: 600;
}

.gfa-card{
    background: white;
    padding: 17px 11px;
    box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
}
.flash_message_container{
    position: absolute;
    top: 17px;
    right: 19px;
    width: 35%;
}

.a_no_decoration{
    text-decoration: none;
    color: initial;
}

/* Pour un bouton avec icône de FontAwesome */
.btn-plane-icon::before {
    font-family: 'Font Awesome 5 Free', serif; /* ajustez selon votre version/fonte */
    content: '\f1d8'; /* Unicode de l'icône "paper-plane" */
    font-weight: 900; /* Poids nécessaire pour les icônes solid */
    margin-right: 5px;
}
.btn-doc-icon::before {
    font-family: 'Font Awesome 5 Free', serif; /* ajustez selon votre version/fonte */
    content: '\f15c'; /* Unicode de l'icône "paper-plane" */
    font-weight: 900; /* Poids nécessaire pour les icônes solid */
    margin-right: 5px;
}

.swal-button--confirm {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 17px;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none !important;
    background: #F4961B;
    color: white !important;
    border: none;
}
.swal-button--confirm:not([disabled]):hover {
    background-color: #ff9600;
}
.swal-button--confirm:hover {
    background: #ff9600;
}


.swal-button--danger {
    background-color: #e64942;
}
.swal-button--danger:not([disabled]):hover {
    background-color: #df4740;
}

.gfa-button{
    align-items: center;
    padding: 8px 16px;
    min-width: 211px;
    height: 55px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none !important;
    background: #F4961B;
    color: white !important;
}
.gfa-button-primary{
    background: #1b70f4 !important;
}
.gfa-button-secondary{
    background: #858585!important;
}

.gfa-button-danger{
    background: #cf0000 !important;
}

.orange-info-text{
    color: #ffab4d;
}

.grow { transition: all .3s ease-in-out; }
.grow:hover { transform: scale(1.1); }

.background-orange {
    background: linear-gradient(67.8deg, #FD7A01 -80.53%, #FFE6B9 95.35%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.yav-container{
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: #f4f6f9;
    padding: 20px 40px;
    margin-top: 5px;
}
.yav-container-lg{
    padding: 39px 25px;
}
.yav-container-lg{
    padding: 32px 20px;
}

.header-div{
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 23px 31px;
    gap: 10px;
    /* Default/white */
    background: #FFFFFF;
    /* /shadow/base */
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);

}
.header-div h1{
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    /* Default/gray/900 */
    color: #111827;
}


/*--------------------------------
==================================
            HAVBAR
==================================
*--------------------------------*/

.yav-navbar{
    background-color: white !important;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}


.yav-navbar .container-fluid .navbar-brand img{
    margin-left: 36px;
    width: 250px;
    margin-right: 33px;
}

.yav-nav-link{
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 20px !important;
    color: #000000 !important;
    margin-right: 20px
}
.yav-nav-link i{
    margin-right: 10px;
}

.user_round_initials{
    font-size: 17px;
    background: #3c3c3c;
    border-radius: 50%;
    padding: 7px 6px;
    color: white;
}


/*--------------------------------
==================================
           CUSTOM SCROLL BAR
==================================
*--------------------------------*/
/* custom scrollbar */
::-webkit-scrollbar {
    width: 20px;
    padding: 0;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    padding: 0;
}

::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}

/*--------------------------------
==================================
            SIDE BAR
==================================
*--------------------------------*/
.sidebar {
    height: calc(100% - 9px); /* Ajustez la hauteur en tenant compte de la marge supérieure de la barre de navigation */
    width: 250px;
    position: absolute;
    z-index: 1;
    top: 78px; /* Marge supérieure fixe */
    left: 0;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    overflow-y: auto; /* Ajout de la barre de défilement verticale */
    padding-top: 9px;
    background-color: #f7f7f7;
}

.fixed-top {
    top: 0; /* Position fixe en haut lorsque la barre latérale est fixée */
    position: fixed;
    height: 100vh

}


.sidebar .title{
    padding: 25px 8px 2px 16px;
    text-decoration: none;
    font-size: 18px;
    color: #080707;
    display: block;
    font-weight: 600;
    position: relative;
}

.sidebar .informative-title{
    font-size: 21px;
    color: #8f8f8f;
    font-weight: 600;
}


.sidebar a {
    padding: 5px 6px 0px 45px;
    text-decoration: none;
    font-size: 19px;
    color: #343e42c7;
    display: block;
    font-weight: 500;
    display: block;
}
.sidebar a:hover {
    color: #eca53d;
}



.sidebar .title button{
    text-decoration: none;
    font-size: 22px;
    display: contents;
}

.sidebar .title button:hover{
    color: #109cf9;
}

.main {
    margin-left: 255px; /* Same as the width of the sidebar */
    padding: 0;
}


.sidebar .commentaire-section{
    padding: 0px 7px 0px 7px;
    font-weight: 400;
}

.sidebar .commentaire-section p {
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 29px;
    padding: 26px 8px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
    position: relative;
}
.sidebar .commentaire_public  {
    background: #fef3c7;
}
.sidebar .commentaire_interne  {
    background: #ecc6ff;
}
.sidebar .commentaire-section p .bottom_right_span{
    display: block;
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    color: gray;
    text-align: left;
    position: absolute;
    right: 9px;
    bottom: 2px;
}

.sidebar .commentaire-section p .top_right_span{
    display: block;
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    color: #B45309;
    text-align: right;
    position: absolute;
    right: 9px;
    top: 2px;
}


.sidebar .button-container{
    padding: 4px 14px;
}
.sidebar .button-container button{
    font-size: 18px;
    width: 100%;
    font-weight: 600;
}


/*--------------------------------
==================================
            YAV FORM
==================================
*--------------------------------*/

.yav-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 320px;
    /* min-height: 148px; */
}
.yav-form-group {
    margin-bottom: 20px;
}

.yav-form-group {
    margin-bottom: 20px;
}

.yav-form-fake-readonly-input{
    padding: 8px 12px;
    width: 100%;
    height: 47px;
    background: #bebebe;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    font-size: 21px;
    margin-top: 10px;
}

.yav-form label {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 17px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #374151;
}

.yav-form-extra-label{
    margin: 6px 0 0 7px;
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
}

.yav-form input, select {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    width: 320px;
    height: 47px;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    font-size: 21px;
    margin-top: 10px;
}

.yav-form  select {
    margin-top: 10px;
}

.yav-form-group-with-icon {
    position: relative;
    margin: 10px 0;
}

.yav-form-group-with-icon .start-icon {
    position: absolute;
    left: 10px;
    top: 70%;
    transform: translateY(-50%);
    color: #888;
    font-size: 20px;
}

.yav-form-group-with-icon input {
    padding: 10px 10px 10px 40px;
}

.yav-form-group-with-icon .end-icon {
    position: absolute;
    right: 10px;
    top: 70%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    font-size: 20px;
}

.login-page{
    margin: 0 auto;
    height: 100vh;
    width: 82%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error_login_text p{
    width: 100%;
    background: yellow;
    font-size: 17px;
    color: red;
    font-weight: 700;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 4px 18px;
}
.error_login_text  li{
    background: yellow;
    font-size: 17px;
    color: red;
    font-weight: 700;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    margin: 0;
    list-style-type: none;
    margin-left: -30px;
    margin-top: 13px;
    padding: 6px 10px;
}
.error_login_text  li:before{
    content: '!! ';
}

.forgot-password {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 320px;
    height: 27px;
}

.forgot-password a {
    font-family: 'Inter', serif;
    font-style: normal;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-decoration: none;
    color: #3d74ed;
    font-weight: 700;
    font-size: 17px;
}

.keep-signed-in {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 320px;
}


.keep-signed-in input {
    margin-right: 13px;
    width: 16px;
    margin: 0 17px 0px 0px;
}


.keep-signed-in label {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #374151;
}

.yav-login-button button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    min-width: 211px;
    height: 55px;
    background: #F4961B;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
    color: white !important;
    text-decoration: none !important;
    margin-top: 18px;
    border: none;
}


.yav-login-button a{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    min-width: 211px;
    height: 55px;
    background: #F4961B;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
    color: white !important;
    text-decoration: none !important;
    position: relative;
}



.yav-login-button a > i{
    position: absolute;
    left: 10px;
}
.yav-login-button button:hover {
    transform: scale(1.1);
    color: white;
}

.yav-link-button a{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    min-width: 211px;
    height: 55px;
    background: #F4961B;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
    color: white !important;
    text-decoration: none !important;
}
.yav-link-button a:hover {
    transform: scale(1.1);
    color: white;
}

.yav-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background: #F4961B;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 20px;
    color: white;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
}

.yav-button-xs{
    padding: 2px 9px;
    font-size: 17px;
}
.yav-button-sm {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background: #F4961B;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 20px;
    color: white;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
}
.yav-button  > i{
    margin-right: 12px;
}
.yav-button:hover {
    transform: scale(1.1);
    color:white;
}
.yav-button-secondary {
    background: #a4a4a4;
    color: #ffffff;
    border: 1px solid #6a6a6a;
}

.yav-button-danger {
    background: #d42424;
    color: #ffffff;
}

.yav-button-light{
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: initial;
    font-weight: 400;
    border-radius: 5px;
}
.yav-button-light:hover {
    transform: scale(1.1);
    font-weight: bold;
    color: black;
}

.disabled-yav-login-button {
    background: #919191 !important;
    text-decoration: line-through !important;
}
.disabled-yav-login-button:hover {
    transform: none !important;
    color: white !important;
}
.nouvelle-demande-button{
    text-decoration: none;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.nouvelle-demande-button:hover {
    transform: scale(1.1);
    color: white;
}


.dropzone-container{
    width: 195%;
}
.dropzone-container label{
    margin-bottom: 12px;
}
.dropzone{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 24px 24px;
    width: 100%;
    min-height: 177px;
    border: 2px dashed #D1D5DB !important;
    border-radius: 5px;
    transition: transform 0.3s ease;
    /* B45309 */
}
.dropzone:hover{
    background: #FFEFBA;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #FFFFFF, #FFEFBA);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #FFFFFF, #FFEFBA); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}




.dropzone .dropzone-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 4px;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    margin-bottom: 10px;
    /* Default/gray/500 */
    color: #6B7280;
    cursor: text !important;
}
.dropzone .dropzone-content i{
    color: #a7a7a7;
    font-size: 33px;
}
.dropzone .dropzone-content span{
    color: #B45309;
    cursor: text !important;
}

.yav-form-group textarea{
    border: 2px solid #d1d5db;
    border-radius: 5px;
    width: 100%;
    margin-top: 11px;
    font-size: 20px;
    padding: 6px 11px;
}


.yav-checkbox{}

.yav-simple-checkbox {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #888;
}

.yav-simple-checkbox input[type="checkbox"] {
    display: none;
}

.yav-simple-checkbox .checkmark {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    transition: all 0.3s;
}

.yav-simple-checkbox input[type="checkbox"]:checked + .checkmark {
    background-color: #007bff;
    border-color: #007bff;
}

.yav-simple-checkbox .checkmark::after {
    content: '';
    display: none;
    width: 10px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.yav-simple-checkbox input[type="checkbox"]:checked + .checkmark::after {
    display: block;
}


/* Style du bouton "Choisir un fichier" */
.yav-form-group input[type="file"]::-webkit-file-upload-button {
    /* Propriétés CSS pour le bouton */
    background: #3f98e4;
}

/* Style du texte "Aucun fichier choisi" */
.yav-form-group input[type="file"]::placeholder {
    /* Propriétés CSS pour le texte */
    color:blue;
}


/* Style du texte "Aucun fichier" dans certains navigateurs */
.yav-form-group input[type="file"]::before {
    /* Propriétés CSS pour le texte */
}

/* Style de l'élément input[type="file"] lui-même */
.yav-form-group input[type="file"] {
    /* Propriétés CSS pour l'élément input */
}


.uploaded_file_container {
    margin-bottom: 40px;
    display: flex;
}
.uploaded_file_container a{
        text-decoration: none;
        font-size: 21px;
        font-weight: 600;
}
.uploaded_file_container a i{
   margin-left: 10px;
}

.inline-form-group {
    display: flex;
    align-items: center;
}
.mini-input{
    width: 70px ;
}

.extra-info-label{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 17px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #374151;
    margin-right: 12px;
    margin-top: 12px;
    margin-left: 8px
}


.selection_hidden_child{
    margin-top:20px
}

/*--------------------------------
==================================
           NOUVELLE FRNS FORM
==================================
*--------------------------------*/

.new-frns-form-row{
    display: flex;
}

.new-frns-form-row .yav-form-group{
    min-width: 370px;
    width: 44%;
}
.new-frns-form-row .yav-form-group:first-child{
    margin-right: 10%
}
.new-frns-form-row .yav-form-group input, select{
    width: 100%;
}




.new-frns-form-row .yav-form-group input[type="checkbox"] {
    width: 100%;
    box-shadow: none;
}




.new-frns-form .form-subtitle h2{
    font-size: 20px;
}
.new-frns-form-group{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.new-frns-form label{
    position: relative;
}
.new-frns-form .unvisible_label{
    color: transparent;
}
.label-right-badge{
    position: absolute;
    right: 0;
    font-size: 11px;
    bottom: -7px;
    padding: 0 10px;
    border-radius: 6px;
    background-color: #b2b5b8;
    color: white;
}
.label-right-labo .active{
    background: #3f98e4;
    color: white;

}
.label-right-distributeur .active{
    background: #ee8d07;
    color: white;
}




.new-frns-form-row .yav-form-group .mini-input{
    width: 70px;
}
.new-frns-form-row .yav-form-group label{

}

.new-frns-form-row ul li{
    font-size: 21px;
    font-weight: 500;
}


.multi-choice-checkbox-group{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.multi-choice-checkbox-group  input[type="checkbox"] {
    width: 25px !important;
    margin-right: 10px;
    margin-top: 5px;
}
.multi-choice-checkbox-group  label {
    margin-right: 10px;
}

.child-extra-info-input-div{
    display: none;
}
.child-extra-info-input-div label{
    text-align: left;
    margin-top: 19px;
}

.required-star{
    color: red;
    margin-right: 2px;
    font-weight: bold;
    font-size: 19px;
}
/*--------------------------------
==================================
            YAV CARD
==================================
*--------------------------------*/

.yav-card {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 68px;
    gap: 59px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
}

.yav-card-title h1 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #000000;
    display: flex;
    align-items: center;
    text-align: center;
}

.yav-card-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 44px;
    gap: 69px;
    width: 469px;
    height: 678px;
    background: #FFFFFF;
    border-radius: 12px;
}

.yav-card-section div .hanff-logo{
    width: 353px;
}

.datatable_badge_link{
    text-decoration: none;
    background: #f4961b;
    padding: 1px 13px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.datatable_badge_link-secondary{
    background: #d1cfcc;
    color: #454141;
}
.datatable_badge_link-primary{
    background: #1894d1;
    color: #ffffff
}


.datatable_badge_link:hover{
    text-decoration: none;
    transform: scale(1.1);
    color: white;
}



.datatable_search{
    padding: 8px 12px;

    width: 320px;
    height: 42px;

    /* Default/white */
    background: #FFFFFF;
    /* Default/gray/300 */
    border: 1px solid #D1D5DB;
    /* shadow/sm */
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
}

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

.custom-search-input {
    padding: 8px 12px;
    width: 320px !important;
    height: 42px;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
}

.dt-search{
    display: none;
}

.title_datatable{
    width: 100%;
}
.title_datatable h1, .dashboard-datatable-title{
    font-weight: 700;
    font-size: 25px;
    line-height: 36px;
}
.title_datatable h1 button, .dashboard-datatable-title button{
    width: 59px;margin-right: 12px;
}

.yellow-bg-big-info{
   background: yellow; padding: 16px 18px; font-size: 20px; font-weight: 600; text-align: center
}


/*--------------------------------
==================================
           DATA TABLE
==================================
*--------------------------------*/


.datatable-custom td{
    padding: 16px 24px !important;
    border-bottom: 1px solid #979797 !important;
    color: #333333;
    font-weight: 300 !important;
    font-size: 17px;
}

.datatable-custom th{
    padding: 16px 24px !important;
    border-bottom: 1px solid #979797 !important;
    font-size: 19px;
    font-weight: 400 !important;
    color: #656262;
}
.datatable-custom-sm td, .datatable-custom-sm th{
    padding: 1% 1% !important;;
    font-size: 17px;
}

.datatable-custom-sm th{

}

.datatable-custom-striped tr:nth-child(even) {
    background: #f2f2f2;
}

.datatable-state {
    padding: 4px 19px; /* Cette déclaration est dupliquée avec des valeurs différentes, gardez celle-ci */
    border-radius: 130px;
    font-weight: 500;
}


.datatable-state-draft {
    background: #d5d5d5;
    color: #000000;
}
.datatable-state-pending {
    background: #FEF3C7;
    color: #B45309;
}
.datatable-state-approved {
    background: #a0f2a2;
    color: #054110;
}
.datatable-state-approved_niv2 {
    background: #a0f2a2;
    color: #054110;
}
.datatable-state-rejected {
    background: #EB3349;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F45C43, #EB3349);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F45C43, #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: white;
}






.datatable-editer-button{
    padding: 8px 16px;
    width: 170px;
    min-height: 43px;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    text-decoration: none;
    color: initial;
    font-weight: 400;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-align: left;
}
.datatable-editer-button i{
    margin-right: 10px;
}
.datatable-editer-button:hover {
    transform: scale(1.1);
}


.datatable-action-button{
    padding: 6px 3px 8px 14px;
    min-height: 43px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    text-decoration: none;
    color: initial;
    font-weight: 400;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-align: center;
    margin-right: 8px;
}
.datatable-action-button-show{
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
}
.datatable-action-button-edit{
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
}
.datatable-action-button-delete{
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
}

.datatable-action-button i{
    margin-right: 10px;
}
.datatable-action-button:hover {
    transform: scale(1.1);
}
.td_warning{
    background: red !important;
    color: yellow !important;
    font-weight: 500 !important;
}



/*************************************************
*                                                        *
*               NOUVELLE FRNS FORM                       *
*                                                        *
*************************************************/
.nouvele_fnrs_form_container {
    margin-top: 50px;
    padding: 0 21%;
}
.nouvele_fnrs_form_container .form-header {
    width: 100%;
    display: flex;
    justify-content: space-around;
    background: #f0f0f0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    color: #636267;
}
.nouvele_fnrs_form_container .form-header .logo_container {
    border-right: 3px solid #e7e7e7;
    height: auto;
    width: 25%;
    object-fit: contain;
    display: flex; /* Ajout de cette ligne */
    align-items: center; /* Ajout de cette ligne */
    justify-content: center; /* Pour le centrage horizontal */
    padding: 0 15px;
}
.nouvele_fnrs_form_container .form-header .logo_container img {
    max-width: 100%;
    max-height: 100%;
}
.nouvele_fnrs_form_container .form-header .center-text {
    width: 45%;
    border-right: 3px solid #e7e7e7;
    text-align: left;
    padding: 20px 13px;
}
.nouvele_fnrs_form_container .form-header .center-text span {
    display: block;
    font-size: 23px;
    font-weight: 500;
    margin-bottom: 15px;
}
.nouvele_fnrs_form_container .form-header .right-text {
    width: 30%;
    padding: 20px 13px;
}
.nouvele_fnrs_form_container .form-header .right-text span {
    display: block;
    font-size: 23px;
    font-weight: 500;
}
.nouvele_fnrs_form_container .form-sub-header {
    width: 100%;
    display: flex;
    justify-content: space-around;
    background: #f0f0f0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    color: #636267;
    font-size: 24px;
    padding: 50px 0;
}
.nouvele_fnrs_form_container form {
    background: #f0f0f0;
    padding: 8px 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.nouvele_fnrs_form_container form .btn-submit {
    background-color: #09830f;
    font-size: 36px;
    margin: 36px 0 88px 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: none;
    color: white;
    padding: 10px 40px 10px 40px;
    border-radius: 8px;
}
.nouvele_fnrs_form_container form .sub-section {
    background-color: #f7a30f;
    padding: 24px 19px;
    font-size: 30px;
    color: white;
    font-weight: 400;
    border-radius: 13px;
}
.nouvele_fnrs_form_container form .yav-form-group {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-bottom: 3%;
    border-bottom: 1px solid #b1b1b1;
    padding: 0 0 44px 0;
}
.nouvele_fnrs_form_container form .yav-form-group.sub-section-form-group .form_label_container {
    width: 40%;
}
.nouvele_fnrs_form_container form .yav-form-group.sub-section-form-group .input_container {
    width: 45%;
}
.nouvele_fnrs_form_container form .yav-form-group.sub-section-form-group .input_container.oui_non_container {
    border-right: 1px solid #c8c3c3;
    padding: 0 10px;
    border-left: 1px solid #c8c3c3;
    width: 10%;
}
.nouvele_fnrs_form_container form .yav-form-group.sub-section-form-group-header {
    padding: 25px 0 20px 0px;
}
.nouvele_fnrs_form_container form .yav-form-group.sub-section-form-group-header h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 500;
    color: #353535;
}
.nouvele_fnrs_form_container form .yav-form-group.sub-section-form-group-header .form_label_container, .nouvele_fnrs_form_container form .yav-form-group.sub-section-form-group-header .input_container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.nouvele_fnrs_form_container form .yav-form-group .entete_form {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 45px;
}
.nouvele_fnrs_form_container form .yav-form-group .entete_form h2 {
    font-size: 35px;
    font-weight: 300;
    margin: 0;
}
.nouvele_fnrs_form_container form .yav-form-group .form_label_container {
    width: 28%;
}
.nouvele_fnrs_form_container form .yav-form-group .form_label_container .form_label {
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 600;
}
.nouvele_fnrs_form_container form .yav-form-group .form_label_container .label_info {
    font-size: 19px;
    font-weight: 300;
    text-align: left;
    display: block;
    margin-top: 10px;
    color: #4d4b4b;
}
.nouvele_fnrs_form_container form .yav-form-group .form_label_container .form_label::after {
    content: " : ";
}
.nouvele_fnrs_form_container form .yav-form-group .form_label_container .form_label::before {
    content: " * ";
}
.nouvele_fnrs_form_container form .yav-form-group .input_container {
    width: 30%;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container.small_container {
    width: 13%;
    padding: 0 5% 0 0;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container.big_container {
    width: 40%;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container select {
    text-align: center;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container select option {
    padding: 5px 10px;
    background-color: #f5f5f5;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container input, .nouvele_fnrs_form_container form .yav-form-group .input_container textarea, .nouvele_fnrs_form_container form .yav-form-group .input_container select {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: none;
    min-height: 35px;
    width: 100%;
    border-radius: 3px;
    min-height: 42px;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container input:hover, .nouvele_fnrs_form_container form .yav-form-group .input_container textarea:hover, .nouvele_fnrs_form_container form .yav-form-group .input_container select:hover {
    box-shadow: rgba(68, 237, 255, 0.38) 0px 2px 8px 0px;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container input:focus-visible, .nouvele_fnrs_form_container form .yav-form-group .input_container textarea:focus-visible, .nouvele_fnrs_form_container form .yav-form-group .input_container select:focus-visible {
    outline: 1px solid rgba(0, 222, 255, 0.4392156863);
}
.nouvele_fnrs_form_container form .yav-form-group .input_container input::placeholder {
    font-size: 1.4rem;
    font-weight: 100;
    color: #bcbbbb;
    padding: 0 10px;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container input[type=checkbox] {
    cursor: pointer;
    box-shadow: none;
    border: none;
    min-height: 35px;
    border-radius: 3px;
    min-height: 52px;
    border-radius: 51px;
    border: 1px solid gray;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .vertical_ck {
    display: flex;
    margin-bottom: 14px;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .vertical_ck.d-row {
    flex-direction: column;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .vertical_ck.d-row textarea {
    margin-bottom: 20px;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .vertical_ck input[type=checkbox] {
    width: 23px;
    margin: -9px 20px 0 0;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .vertical_ck strong {
    margin-right: 30px;
    margin-top: 3px;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .vertical_ck span {
    margin-top: 3px;
    font-weight: 400;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .vertical_ck label {
    font-size: 20px;
    font-weight: 400;
    margin-right: 30px;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .sub_label {
    margin-bottom: 5px;
    display: block;
    font-weight: 500;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .sub_label::after {
    content: "  :";
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .multiple_row input {
    margin-bottom: 20px;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .multiple_row:last-child input {
    margin-bottom: 0;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .custom-drop-zone {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    flex-direction: column;
    background-image: repeating-linear-gradient(21deg, #bfbfbf, #bfbfbf 15.39px, transparent 19px, transparent 36.01px, #bfbfbf 40px), repeating-linear-gradient(111deg, #bfbfbf, #bfbfbf 15.39px, transparent 19px, transparent 36.01px, #bfbfbf 40px), repeating-linear-gradient(201deg, #bfbfbf, #bfbfbf 15.39px, transparent 19px, transparent 36.01px, #bfbfbf 40px), repeating-linear-gradient(291deg, #bfbfbf, #bfbfbf 15.39px, transparent 19px, transparent 36.01px, #bfbfbf 40px);
    background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .custom-drop-zone .click_here_to_upload {
    background: #8f8f8f;
    color: white;
    font-weight: 500;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 17px;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .custom-drop-zone span {
    display: block;
    margin-top: 20px;
    color: gray;
    font-weight: 400;
    letter-spacing: 1px;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .oui_non_ck {
    display: flex;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .oui_non_ck label {
    margin: 0 -51px 0 0;
    font-size: 21px;
    font-weight: 500;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .oui_non_ck input {
    cursor: pointer;
    box-shadow: none;
    min-height: 30px;
    border-radius: 53px;
    border: 1px solid gray;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .input_with_question {
    display: block;
    margin-top: 28px;
    font-size: 20px;
    font-weight: 400;
    border-top: 1px solid #ada6a6;
    padding: 23px 0 0 0;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .input_with_question input {
    width: 52px;
    margin: 0 10px;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .ck_list ul li {
    display: flex;
    font-size: 19px;
    font-weight: 500;
    line-height: 40px;
}
.nouvele_fnrs_form_container form .yav-form-group .input_container .ck_list ul li input {
    min-height: 27px;
    width: 21px;
    margin-right: 16px;
}

.erreur_formulaire_texte{
    background: white;
    font-weight: 600;
    font-size: 18px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    color: red;
    border: 5px dashed red;
    position:relative;
    padding: 17px 11px 11px 11px;
    margin-top: -27px;
}
.encrypted-file-form-group .erreur_formulaire_texte{
    margin-top: 16px;
}
.erreur_formulaire_texte-correction_fait{
    color: #0667c8;
    border: 5px dashed #1471d5;
}
.erreur_formulaire_texte i{
    position: absolute;
    left: -45px;
    font-size: 18px;
    padding: 9px 8px;
    background: white;
    border-radius: 50%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    top: -1px;
}
.erreur_formulaire_texte .valeur_de_base_title{
    display: block; font-weight: 400;color: gray; margin-top: 10px
}
.erreur_formulaire_texte .valeur_de_base_texte{}
.erreur_formulaire_texte .rejection_date_span{
    position: absolute;
    right: 11px;
    top: 5px;
    font-size: 14px;
    font-style: italic;
}
.erreur_formulaire_texte .soumission_date_span{
    font-weight: 500; font-size: 15px;font-style: italic
}

.bloody-shadow{
    box-shadow: rgb(255 0 0) 0px 0px 6px, rgb(255 0 0) 0px 5px 6px !important;
}

.form-list-erreur {
    list-style: none;
    margin-left: -14px;
}
.form-list-erreur  li {
    font-weight: 500;
    color: #e50000;
    font-size: 15px;
    margin-top: 7px;
}
.form-list-erreur  li i{
    margin-right: 4px;
}
.form-list-erreur  .subtitle{
    color: #474444;
    font-weight: 500;
    font-size: 14px;
}
.form-list-erreur  li a{
    font-size: 11px;
    display: inline;
    padding: 0;
    color: #127aff;
    font-weight: 400;
    border-bottom: 1px solid;
}

.contester_input_button{
    border: none;
    background: none;
    margin-right: 3px;
}




/*--------------------------------
==================================
 FILE CARD -- FILE DISPLAY ON FORM
==================================
*--------------------------------*/

.multiple-file-card .file-card{
    margin-top: 20px;
    position: relative;
}
.file-card{
    background-color: rgb(255, 255, 255);
    display: table;
    box-shadow: rgba(0, 0, 0, 0.07) 0 1px 1px, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 8px 8px, rgba(0, 0, 0, 0.07) 0 16px 16px;
    border-radius: 8px;
    width: 100%;
    margin-bottom: 70px;
}
.file-card-container{
    display: flex;
    padding: 4px 6px;
    font-weight: 600;
    align-items: center;
    justify-content: space-between;
}
.file-card .content{
    display: flex;
    align-items: center;
}
.file-card .actions{
    display: flex;
}
.file-card-container span{
    font-size: 17px;
    margin-left: 16px;
    margin-right: 6px;
}
.file-card-container a, .file-card-container button{
    border: none;
    font-size: 17px;
    border-radius: 8px;
    padding: 19px 13px;
    margin-left: 15px;
    cursor: pointer;
    text-decoration: none;
}
.file-card-container a:hover, .file-card-container button:hover{
    color: white;
}

.file-card-container a i, .file-card-container button i{
    margin-left: 6px;
    font-size: 22px;
}
.file-card-download-button{
    background-color: #3bafda;
    color: white;
}

.file-card-delete-button{
    background-color: #ff3737;
    color: white;
}





.file-card .image-holder {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: #f3f4f6;
}

/* Icône “type de fichier” */
.file-type-icon {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #ffffff;
}

.file-card {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 10px 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    margin-bottom: 8px;
}

/* Container global, comme ta share-card : responsive */
.file-card-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Bloc gauche : icône + textes */
.file-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.file-card-text {
    min-width: 0;
}

.file-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-card-title i {
    margin-right: 6px;
    color: #4b5563;
}

.file-card-title-truncate {
    margin-left: -3px;
    color: #9ca3af;
    font-weight: 400;
}

.file-card-subtitle {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* Bloc droit : actions */
.file-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Boutons : style pill comme sur ta page partage */
.file-card-download-button,
.file-card-delete-button {
    border: none;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.file-card-download-button i,
.file-card-delete-button i {
    font-size: 13px;
}

/* couleurs */
.file-card-download-button {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.file-card-download-button:hover {
    background-color: #dbeafe;
    box-shadow: 0 0 0 1px rgba(59,130,246,0.35);
    transform: translateY(-1px);
}

.file-card-delete-button {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.file-card-delete-button:hover {
    background-color: #fee2e2;
    box-shadow: 0 0 0 1px rgba(248,113,113,0.45);
    transform: translateY(-1px);
}

/* état "à supprimer" (utilisé par toggleDelete) */
.file-card-delete-is-clicked {
    background-color: #fef2f2;
    border-color: #fecaca;
}

.file-card-delete-is-clicked .file-card-title {
    color: #9ca3af;
    text-decoration: line-through;
}

/* Ton image-holder & icône type restent identiques mais intégrés au layout moderne */
.file-card .image-holder {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: #f3f4f6;
}

.file-card .image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Icône “type de fichier” */
.file-type-icon {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;



}


/* Couleurs suivant le type (tu les avais déjà) */
.file-type-icon-pdf   { background: #ef4444; }
.file-type-icon-word  { background: #2563eb; }
.file-type-icon-excel { background: #16a34a; }
.file-type-icon-other { background: #6b7280; }

/* Responsive : sur petits écrans, actions passent en dessous proprement */
@media (max-width: 576px) {
    .file-card-container {
        align-items: flex-start;
    }
    .file-card-actions {
        width: 100%;
        justify-content: flex-start;
    }
}


/* Couleurs suivant le type */
.file-type-icon-pdf   { background: #ef4444; }   /* rouge */
.file-type-icon-word  { background: #2563eb; }   /* bleu */
.file-type-icon-excel { background: #16a34a; }   /* vert */
.file-type-icon-other { background: #6b7280; }   /* gris */

/* L’image, si c’est vraiment une image */
.file-card .image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-card-delete-is-clicked{
    background-color: #f7bebe;
}
.file-card-delete-is-clicked .file-card-container span{
    color: gray;
    text-decoration: line-through;
}

.file-card-delete-is-clicked .image-holder img, .file-card-delete-is-clicked .file-card-download-button{
    opacity: 0.6;
    color: #ffb7b7;
    cursor: not-allowed;
}
.file-card-delete-is-clicked::after{
    content: '⚠️ Fichier sera supprimé quand vous cliquez sur "Sauvegarder les modifications"';
    background: black;
    color: yellow;
    padding: 5px 10px;
    font-size: 19px;
    font-weight: 500;
    position: absolute;
    width: 100%;
    bottom: -30px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.07) 0 1px 1px, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 8px 8px, rgba(0, 0, 0, 0.07) 0 16px 16px;
}
.file-card-delete-is-clicked .file-card-delete-button{
    background: #000000;
    color: white;
    font-weight: 600;
}

/*--------------------------------
==================================
           BUTTONS
==================================
*--------------------------------*/

/*--------------------------------
           light-link-btn
*--------------------------------*/

.light-link-btn{
    box-sizing: border-box;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: initial;
    font-weight: 400;
    border-radius: 5px;
}
.light-link-btn i {
    font-size: 18px;
    margin-right: 8px;
}

.light-link-btn-yellow{
    background: #e2ff00;
    color: #000000;
}
.light-link-btn-yellow:hover{
    background: #bace0f;
    color: #000000;
}

.light-link-btn-red{
    background: #ff233a;
    color: #ffffff;
}
.light-link-btn-red:hover{
    background: #a10011;
    color: #ffffff;
}
/*--------------------------------
           statut-formulaire
*--------------------------------*/

.statut-formulaire{
    display: flex;
    flex-direction: column;
}

.statut-formulaire label{
    font-weight: 500;
    font-size: 17px;
    line-height: 20px;
    color: #8b8b8b;
}

.statut-formulaire select{
    margin-top: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #D1D5DB;
    font-size: 16px;
    font-weight: 600;
    /* Pour Firefox */
    -moz-appearance: none;
    /* Pour Chrome, Safari et Edge */
    -webkit-appearance: none;
    /* Pour les autres navigateurs */
    appearance: none;
    background-color: #ffffff !important;

}




/*--------------------------------
==================================
           HEADER DIV NAVIGATION BUTTONS
==================================
*--------------------------------*/

.header-div-new-frns-form{
    display: flex;
    flex-direction: column;
}
.header-div-new-frns-form .statut-formulaire{
    min-width: 300px
}
.header-div-new-frns-form .title-container{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-around;
    justify-content: space-between;
    padding: 20px 12px;
}
.header-div-new-frns-form .infomation{
    text-align: end;
}
.header-div-new-frns-form .infomation span{
    font-weight: bold;
}
.header-div-new-frns-form .statut-container{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: space-around;
    justify-content: space-between;
    padding: 20px 12px;
}
.header-div-new-frns-form .title-container .title{
    font-size: 28px;
    font-weight: 600;
}

.header-navigation-buttons{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.header-navigation-buttons a:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.header-navigation-buttons a:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.header-navigation-buttons button,  .header-navigation-buttons a {
    margin-top: 10px;
    padding: 5px 8px;
    border: 1px solid #D1D5DB;
    font-size: 13px;
    font-weight: 600;
    min-width: 100px;
    background-color: white;
    margin-bottom: 25px;
    transition: 0.3s ease-in-out;
    text-decoration: none;
    color: #111827;
}
.header-navigation-buttons button,  .header-navigation-buttons i {
    margin: 0 0 0 4px;
    font-size: 16px;
}
.header-navigation-buttons a.selected {
    background-color: #19193A ;
    color: white;
}

.header-navigation-buttons button:hover, .header-navigation-buttons a:hover{
    background-color: #6666f8;
    color: white;
}



.bg-blue-dark{
    background-color: #19193A  !important;
    color: white;
}
.header-navigation-buttons button:first-child{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.header-navigation-buttons button:last-child{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}



/*--------------------------------
     User circle on dossier header
*--------------------------------*/
/*--------------------------------
     User circle on dossier header
*--------------------------------*/
.users-of-dossier h2{
    font-size: 1rem;
    font-weight: 500;
}

.user-circle-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border-radius: 999px;
}

/* Base: slightly overlapped */
.user-circle{
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 -12px; /* overlap */
    cursor: pointer;

    color: #fff;
    font-size: 20px;
    font-weight: 800;

    /* separation ring even when overlapped */
    box-shadow: 0 0 0 2px #fff;

    /* smooth animation */
    transition:
            transform .22s cubic-bezier(.2,.9,.2,1),
            margin .22s cubic-bezier(.2,.9,.2,1),
            box-shadow .22s ease,
            filter .22s ease;
    will-change: transform;
    z-index: 1;
}

/* Spread on hover (and also when JS toggles .expanded on click) */
.user-circle-container:hover .user-circle,
.user-circle-container.expanded .user-circle{
    margin: 0 6px;
}

/* Small lift when hovering the whole group */
.user-circle-container:hover .user-circle{
    transform: translateY(-1px);
}

/* Strong focus on the hovered circle */
.user-circle:hover{
    transform: translateY(-4px) scale(1.08);
    filter: brightness(1.03);
    z-index: 5;
    box-shadow:
            0 0 0 3px #fff,
            0 10px 18px rgba(0,0,0,.18);
}

/* Tooltip */
.user-circle:hover .user-full-name{
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -14px);
}

.user-full-name{
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translate(-50%, -6px);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
    .user-circle,
    .user-full-name{
        transition: none !important;
    }
}

/*--------------------------------
==================================
            DASHBAORD HEADER DIV
==================================
*--------------------------------*/
.header-div-dashboard{
    display: flex;
    justify-content: space-between;
    box-shadow: rgb(33 35 38 / 16%) 0px 10px 10px -10px;
}
.header-div-dashboard .rechercher-container{
    width: 70%;
    display: flex;
    align-items: center;
}
.header-div-dashboard .rechercher-container i{
    color: lightgrey;
    font-size: 16px;
    margin: 2px 0 0 59px;
}
.header-div-dashboard .rechercher-container input{
    width: 100%;
    border: none;
    padding: 16px 16px;
}
.header-div-dashboard .rechercher-container input:active,.header-div-dashboard .rechercher-container input:focus{
    border: none;
    outline: none;
}

.header-div-dashboard .userinfo-container{
    display: flex;
    align-items: center;
    margin-right: 20px;
    color: #a3a3a3;
    font-weight: 400;
}
.header-div-dashboard .userinfo-container i{
    background-color: #e9e9e9;
    padding: 9px 11px;
    border-radius: 4px;
    font-size: 14px;
    margin-right: 15px;
}
/*--------------------------------
==================================
            DASHBAORD CARD
==================================
*--------------------------------*/

.dashboard-card{
    background: white;
    padding: 6px 25px;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    box-shadow: rgb(0 0 0 / 0%) 0px 3px 6px, rgb(0 0 0 / 5%) 0px 3px 6px;
    width: 100%;
    margin-top: 26px;
    cursor: pointer;
}
.dashboard-card .dashboard-icon{
    background: linear-gradient(60deg, #26c6da, #00acc1);
    border-radius: 3px;
    padding: 15px;
    margin-top: -20px;
    margin-right: 15px;
    float: left;
}
.dashboard-card .dashboard-icon-warning{
    background: linear-gradient(60deg, #ffa726, #fb8c00);
}
.dashboard-card .dashboard-icon-success{
    background:linear-gradient(60deg, #66bb6a, #43a047);
}
.dashboard-card .dashboard-icon-danger{
    background: linear-gradient(60deg, #ef5350, #e53935);
}
.dashboard-card .dashboard-icon-info{
    background: linear-gradient(60deg, #26c6da, #00acc1);
}

.dashboard-card .dashboard-icon i{
    font-size: 36px;
    line-height: 56px;
    width: 56px;
    height: 56px;
    text-align: center;
    color: #fff;
}
.dashboard-card .dashboard-icon i{
    font-size: 36px;
    line-height: 56px;
    width: 56px;
    height: 56px;
    text-align: center;
    color: #fff;
}

.dashboard-card .card-title {
    color: #999;
    font-size: 17px;
    padding-top: 3px;
    margin-bottom: 0;
    margin-top: 0;
    text-align: right;
}
.card-title-value{
    color: #131e2bba;
    font-size: 45px;
    text-align: right;
    margin-top: -11px;
    margin-bottom: 0;
    font-weight: 400;
}

.dashboard-cards-general-title{
    font-size: 27px;
    font-weight: 500;
    margin-bottom: 60px;
}
.dashboard-cards-general-title-mt-100{
    margin-top: 106px;
}


.dashboard-header-btn{
    margin: 20px 0 -34px -28px;
    color: white;
    background: linear-gradient(60deg, #ffa726, #fb8c00);
    box-shadow: rgb(0 0 0 / 0%) 0px 3px 6px, rgb(0 0 0 / 5%) 0px 3px 6px;
    border-radius: 3px;
    border:none;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s ease-in-out;

}
.dashboard-header-btn:hover{
    transform: scale(1.1);
    color: white;
}




/*--------------------------------
==================================
          HELPERS
==================================
*--------------------------------*/

.yav-button-primary{
    background: #1b70f4 !important;
    color: white !important;
}


.sm-fa-button{
    border: none;
    padding: 4px 14px;
    color: #000000;
    background: #f3f3f3;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}


.sm-fa-button-success{
    background: #3795af;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0dc537, #3795af);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0dc537, #3795af); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color:white;
}


/*--------------------------------
==================================
      MINI DONOUT CHART
==================================
*--------------------------------*/

/* Style du donut */
.donut-chart {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    width: 50px;
    height: 50px;
    background: #e1e1e1;
}
.donut-chart .slice {
    background: #26d82a;
    width: 74%;
    height: 100%;
}

.donut-chart .chart-center span {
    display: block;
    text-align: center;
    font-size: 40px;
}
.donut-chart .chart-center {
    position: absolute;
    border-radius: 50%;
    top: 5px;
    left: 5px;
    width: 40px;
    height: 40px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.donut-chart .chart-center span {
    font-size: 14px;
    font-weight: 700;
}




/*--------------------------------
==================================
      GESTION RAPPEL
==================================
*--------------------------------*/

.gestion_rappel{
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
    padding: 17px 85px 20px 40px;
    margin-top: -31px;
    overflow-y: auto;
    max-height: 162px;
    width: 43%;
}
.gestion_rappel .container{
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: row;
    margin-top: 9px;
}
.gestion_rappel .sub-title{
    text-decoration: underline;
}
.gestion_rappel .envoyer_rappel_btn{
    text-wrap: nowrap;
    background: #F4961B;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
    color: white;
    text-align: center;
}
.gestion_rappel button{
    border: none;
    background: #50d5ff;
    color: white;
    font-weight: 500;
    border-radius: 5px;
    font-size: 14px;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    width: 85%;
}


.email-content-textarea{
    width: 100%;
    height: 600px;
    padding: 10px 12px;
}

.email-propositions-container span{
    color: #5d61a6;
    font-weight: 400;
    margin-right: 5px;
    margin-top: 11px;
    line-height: 26px;
    font-style: italic;
}



/*--------------------------------
==================================
     ETAT FORMULAIRE COMPTE RENDU
==================================
*--------------------------------*/
.etat_form{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 30px 30px;
}
.etat_form h1{
    font-size: 35px;
}
.etat_form .section-title{
    margin-top: 5px;
}
.etat_form h2{
    font-size: 26px;
}
.separate{
    width: 50%;
    height: 3px;
    background-color: #ffa726;
    margin: 10px 0;
    border-radius: 9px;
}
.separate-gray{
    background-color: #c8c1b6;
}
.etat_form .title-group {
    display: flex;
    align-items: center;
}

.etat_form .title-group .donut-container{
    margin-left: 13%;
}
.etat-form-table{
    width: 100%;
}
.etat-form-table tr{
    width: 100%;
}
.etat-form-table td:first-child{
    width: 40%;
}
.etat-form-table td{
    text-align: left;
    font-weight: 700;
    border-bottom: 1px solid #d2d2d2;
    padding: 8px 0 9px 0px;
}
.etat-form-table .fa-times-circle{
    color:red;
}
.etat-form-table .fa-check-circle{
    color:green
}

.etat-form-table .fa-exclamation-circle{
    color:orange;
    cursor: pointer;
}
.etat-form-table .nomination{
    font-size: 13px;
    background: black;
    border-radius: 4px;
    color: white;
    padding: 1px 6px;
    margin-right: 7px;
}


/*--------------------------------
==================================
            MINIM TABLE
==================================
*--------------------------------*/

.minim-table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.minim-table th{
    border-bottom: 1px solid #cecaca;
    padding: 0 0 15px 0px;
}
.minim-table td{
    border-bottom: 1px solid #cecaca;
    padding: 18px 0px 11px 0;
    font-weight: 500;
    font-size: 15px;
}
.minim-modal-button{
    background: #F4961B;
    color: white;
    font-weight: 500;
    border-radius: 6px;
    padding: 5px 9px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    cursor: pointer;
    border: none;
}

.minim-modal-button i{
    margin-right: 10px;
}

.minim-modal-button-primary{
    background: #3072ff;
    color: white;
}

.minim-doc-button{

    padding: 3px 7px;
    border-radius: 3px;
    font-weight: 500;
    color: white;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    margin-right: 10px;
    border: none;
    margin-top: 10px;
    margin-bottom: 10px;
}
.minim-doc-button i{
    color: white;
    margin-right: 10px;
}
.minim-doc-button-pdf{
    background: #c44b4b;
}
.minim-doc-button-img{
    background: #3176c5;
}
.minim-doc-button-mail{
    background: #06903c;
}

.gfa-date-input{
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    font-size: 21px;
    margin-top: 10px;
}

/*--------------------------------
==================================
            ETAT FORM PAGE
==================================
*--------------------------------*/

.transition-impossible-button {
    text-decoration: line-through !important;
}
.transition_button_reject, .transition_button_reject_approve_niv_1 {
    background: #cf0000 !important;
}
.transition_button_reject::before {
    font-family: 'Font Awesome 5 Free', serif; /* ajustez selon votre version/fonte */
    content: '\f164'; /* Unicode de l'icône "paper-plane" */
    font-weight: 900; /* Poids nécessaire pour les icônes solid */
    margin-right: 5px;
}
.transition_button_approve::before {
    font-family: 'Font Awesome 5 Free', serif; /* ajustez selon votre version/fonte */
    content: '\f5b8'; /* Unicode de l'icône "paper-plane" */
    font-weight: 900; /* Poids nécessaire pour les icônes solid */
    margin-right: 5px;
}
.transition_button_reject::before {
    font-family: 'Font Awesome 5 Free', serif; /* ajustez selon votre version/fonte */
    content: '\f119'; /* Unicode de l'icône "paper-plane" */
    font-weight: 900; /* Poids nécessaire pour les icônes solid */
    margin-right: 5px;
}



/*--------------------------------
==================================
    FORM ERROR SHAKE
==================================
*--------------------------------*/

.form-error-shake ul {
    margin: 10px 0 0 0;
    padding: 0;
    list-style-type: none;
}

.form-error-shake ul li {
    list-style: none;
    position: relative;
    padding-left: 29px;
    font-weight: 600;
    color: red;
    font-size: 17px;
    /* Ajoute l'animation shake au chargement de la page */
    animation: shake 0.5s ease-in-out 1; /* L'animation dure 0.5s et se répète 6 fois */
}

.form-error-shake ul li::before {
    content: "❌";
    position: absolute;
    left: 0;
    top: 2px;
}

/* Définition de l'animation shake */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.table-card-container{
    padding: 74px 18px;
    background: white;
    box-shadow: rgb(33 35 38 / 16%) 0px 10px 10px -10px;
    margin-top: 26px;
}



/*--------------------------------
==================================
    LOG TABLE
==================================
*--------------------------------*/

.log-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.log-table th, .log-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}
.log-table th {
    background-color: #f4f4f9;
}
.log-table tbody tr:hover {
    background-color: #f9f9f9;
}
.log-table .status {
    display: flex;
    align-items: center;
}
.log-table .status .icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
}
.log-table .status.ok .icon {
    background-color: #34A853;
}



/*--------------------------------
==================================
   YAV POPUP
==================================
*--------------------------------*/


.yav-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    animation: yav-fadeIn 0.3s ease-out;
    z-index: 999;
}

.yav-popup-content {
    background: #fff;
    padding: 35px;
    border-radius: 5px;
    width: 770px;
    max-width: 80%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: yav-slideIn 0.3s ease-out;
}

@keyframes yav-fadeIn {
    from {
        background: rgba(0, 0, 0, 0);
    }
    to {
        background: rgba(0, 0, 0, 0.5);
    }
}

@keyframes yav-slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.yav-popup-content h2 {
    margin-top: 0;
    text-align: center;
}

.yav-popup-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.yav-popup-thead {
    background-color: #f1f1f1;
}

.yav-popup-th, .yav-popup-td {
    padding: 20px 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.yav-popup-th {
    text-transform: uppercase;
    font-size: 16px;
    color: #666;
}

.yav-popup-td {
    font-size: 19px;
    color: #333;
}
.yav-popup-historique-dossier-checkbox  {
    width: 100%;
    height: 19px;
    cursor: pointer;
}

.yav-date-cell {
    background-color: #fff7e6;
    border-radius: 12px;
    padding: 5px 11px;
    text-align: center;
    color: #c25d06;
    font-weight: 500;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.yav-status-active {
    color: #fff;
    background-color: #4caf50;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 12px;
}

.yav-status-inactive {
    color: #fff;
    background-color: #f44336;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 12px;
}

.yav-popup-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.yav-btn-gray {
    background-color: #e0e0e0;
    color: #000;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

.yav-btn-orange {
    background-color: #ff9800;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 5px;
}

.yav-btn-gray:hover {
    background-color: #d5d5d5;
    color: #0a0a0a;
    font-weight: bold;
}

.yav-btn-orange:hover {
    background-color: #e68900;
}


.swal-button-sauvegarder-modifications{
    box-sizing: border-box !important;
    padding: 8px 16px !important;
    background: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
    color: initial !important;
    font-weight: 400 !important;
    border-radius: 5px !important;
}
.swal-button-simple-annuler{
    display: inline-block !important;
    box-sizing: border-box !important;
    padding: 8px 16px !important;
    background: #6f6f6f !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    border-radius: 5px !important;
    color: white !important;
}




/*--------------------------------
==================================
  TVA VERIFICATION
==================================
*--------------------------------*/



.spinnerEmoji {
    margin-left: 10px;
    font-size: 18px;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.vat-result-card {
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 16px;
    margin-top: 12px;
    margin-bottom: 20px;
}

.vat-result-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #202124;
}

.vat-result-address {
    font-size: 16px;
    margin-bottom: 8px;
    color: #5f6368;
}

.vat-result-number {
    font-size: 16px;
    margin-bottom: 8px;
    color: #202124;
}

.vat-result-valid {
    font-size: 16px;
    color: #202124;
}

.vat-result-valid .valid {
    color: #34a853; /* Google Green */
    font-weight: 500;
}

.vat-result-valid .invalid {
    color: #ea4335; /* Google Red */
    font-weight: 500;
}

/* Style pour les messages d'erreur */
.vat-error {
    background-color: #ffe8e8;
    border-left: 5px solid #ea4335; /* Google Red */
    border-radius: 4px;
    padding: 12px;
    margin-top: 12px;
    font-family: 'Roboto', sans-serif;
    color: #d32f2f;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.vat-error p {
    margin: 0;
    padding-left: 8px;
    font-size: 14px;
}

.vat-error .emoji {
    font-size: 20px;
    margin-right: 8px;
}

/* Ajouter un peu de réactivité */
@media (max-width: 600px) {
    .vat-result-card {
        padding: 12px;
    }
    .vat-result-title {
        font-size: 16px;
    }
    .vat-result-address, .vat-result-number, .vat-result-valid {
        font-size: 14px;
    }

    .vat-error {
        padding: 10px;
    }

    .vat-error p {
        font-size: 12px;
    }
}


.minimal-error-p{
"font-family: Arial, sans-serif; font-size: 14px; color: #333; background-color: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 4px; padding: 8px 12px; display: flex; align-items: center; gap: 8px;"
}
.minimal-error-p i {
    color: #d73a49; font-size: 16px;
}



/*--------------------------------
==================================
   ALERT DOSSIER TEMRMINE
==================================
*--------------------------------*/

.dossier_terminer_alert_submit_btn{
    display: flex; flex-direction: row;
    justify-content: center;
    align-items: center; padding: 10px 20px;
    background: #F4961B; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1); color: white;
    border-radius: 6px; font-size: 20px;  cursor: pointer;
    border: none !important;
    width: 100%;
    margin-bottom: 36px;
}



.dossier_terminer_alert_continuer_modifier{
    box-sizing: border-box; background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
    text-decoration: none; color: initial;
    font-weight: 400; border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

.dossier_terminer_alert_fermer_ne_plus_afficher{
    background-color: #6c757d; border: none; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer;
}



/*--------------------------------
==================================
   SIDE BAR SUBMIT BTN EFFECT
==================================
*--------------------------------*/

@keyframes side_bar_animation_grow_and_shake {
    0% {
        transform: scale(1) translate(1px, 1px) rotate(0deg);
        color: inherit; /* Use inherit to go back to the original color */
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
        color: yellow; /* change to red */
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
        color: inherit; /* back to the original color */
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg);
        color: yellow; /* change to red again */
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
        color: inherit; /* back to original */
    }
    50% {
        transform: scale(1.2) translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: scale(1) translate(1px, -2px) rotate(-1deg);
    }
}

.resubmit_btn_animation{
    animation: side_bar_animation_grow_and_shake 2s ease-in-out;
}

.impersonated_link_btn{
    background: #e30000;
    border-radius: 16px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    margin-right: 24px;
    color: #ffffff !important;
    padding: 7px 22px !important;
    font-size: 17px;
    font-weight: 500;
    font-family: monospace;
}
.impersonated_link_btn i{
    margin-right: 10px;
    font-size: 20px;
    color: black;
}

.dossier_etat_formulaire_btn{
    width: 80%;
    padding: 10% 2%;
    margin-left: 14px;
}


.terminer_dossier_form{
    width: 100%;margin: 0;display: inline;
}
.terminer_dossier_form .yav-button{
    width: 531px;
    margin-left: 844px;
    margin-top: -73px;
    height: 52px;
}

.td_date_rappelle_active {
    background-color: yellow;
    font-weight: 900 !important;
}

.td_date_rappelle_depasse {
    background-color: red;
    font-weight: 900 !important;
    color: white !important;
}

.no-file{
    margin: 19px 0 16px 5px;
    color: red;
    font-size: 22px;
    font-weight: bolder;
}
.encrypted-file-info{
    font-size: 21px;
    margin: 19px 0 17px 10px;
}

.upload-status{
    font-size: 23px;
    color: #033303;
    font-weight: 500;
    margin-top: 29px;
    display: block;
    background: #98f18d;
    padding: 13px 20px;
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}


.link_pharma_vet{
    text-decoration: none;
    color: #ec4899;
    font-weight: 600;
    cursor: pointer;
}
.link_pharma_vet:hover{
    text-decoration: none;
    color: #ec4899;
}
.link_pharma_vet span{
    color: #3b82f6; /* Neo Blue */
    text-decoration: none;
    font-size: 19px;
    font-weight: 700;
    transition: color 0.2s ease-in-out;
}
.link_pharma_vet span:hover{
    color: #1d4ed8; /* Darker Blue on hover */
    text-decoration: underline;
}

.checkbox-niv2 {
    transform: scale(1.2);
    cursor: pointer;
}

/*
 * =================================
 *  Modern Success Card (N26/Dribbble inspired )
 * =================================
 */

/* -- Variables de couleur pour une maintenance facile -- */
:root {
    --card-bg: #F9FAFB; /* Fond très clair, presque blanc */
    --card-border-color: #E5E7EB; /* Bordure subtile */
    --success-color: #10B981; /* Vert émeraude pour la validation */
    --success-icon-bg: #E0F2F1; /* Fond très léger pour l'icône */
    --text-primary: #1F2937; /* Couleur de texte principale (foncé) */
    --text-secondary: #6B7280; /* Couleur de texte secondaire (plus clair) */
    --code-bg: #FFFFFF; /* Fond du bloc de code */
    --code-border-color: #D1D5DB; /* Bordure du bloc de code */
}

.success-card {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: 16px; /* Coins plus arrondis */
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Ombre douce */
    transition: all 0.2s ease-in-out;
}

.success-card-header {
    display: flex;
    align-items: flex-start; /* Aligner en haut pour le texte multiligne */
    gap: 16px;
}

.success-card-icon-wrapper {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--success-icon-bg);
    border-radius: 50%; /* Icône dans un cercle */
}

.success-card-icon-wrapper svg {
    width: 28px;
    height: 28px;
    color: var(--success-color);
}

.success-card-content {
    flex-grow: 1;
}

.success-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.success-card-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 4px 0 0 0;
}

.success-card-filename {
    display: block; /* Le nom du fichier passe à la ligne */
    font-weight: 500;
    color: var(--text-primary);
    margin-top: 4px;
    word-break: break-all; /* Pour les noms de fichiers très longs */
}

.success-card-details {
    margin-top: 16px;
    border-top: 1px solid var(--card-border-color);
    padding-top: 16px;
}

.success-card-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 14px;
    outline: none;
    user-select: none;
}

.success-card-details summary:hover {
    color: var(--text-primary);
}

.success-card-pre {
    margin: 12px 0 0 0;
    padding: 12px;
    border-radius: 8px;
    background-color: var(--code-bg);
    border: 1px solid var(--code-border-color);
    max-height: 240px;
    overflow: auto;
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
}

.success-card-pre code {
    font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
}

/*
 * =================================
 *  Modern Action Buttons
 * =================================
 */

.action-buttons-container {
    display: flex;
    gap: 12px; /* Espace entre les boutons */
    margin-top: 16px; /* Espace au-dessus des boutons */
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espace entre l'icône et le texte */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

.btn-action:focus-visible {
    outline: 2px solid #1F2937; /* texte primaire */
    outline-offset: 2px;
}

.btn-action svg {
    width: 20px;
    height: 20px;
}

/* Style spécifique pour le bouton TÉLÉCHARGER */
.btn-action.btn-download {
    background-color: #EFF6FF;      /* Fond bleu très clair */
    color: #2563EB;                 /* Texte bleu */
    border-color: #BFDBFE;          /* Bordure bleue subtile */
}

.btn-action.btn-download:hover {
    background-color: #DBEAFE;      /* Fond bleu plus soutenu au survol */
    transform: translateY(-1px);    /* Léger effet de soulèvement */
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

/* Style spécifique pour le bouton SUPPRIMER */
.btn-action.btn-delete {
    background-color: #FEF2F2;      /* Fond rouge très clair */
    color: #DC2626;                 /* Texte rouge */
    border-color: #FECACA;          /* Bordure rouge subtile */
}

.btn-action.btn-delete:hover {
    background-color: #FEE2E2;      /* Fond rouge plus soutenu au survol */
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
}

/* =========================================================
   MENU CONTEXTUEL — stable (viewport-based)
   ========================================================= */
.menu-contextuelle{
    position: fixed;  /* essentiel */
    z-index: 1040;    /* sous backdrop bootstrap (1050) */
    display: none;
}
/* =========================================================
   FIX MODAL BACKDROP — couvre TOUT l’écran (et passe au-dessus)
   À mettre APRÈS Bootstrap (dans ton style.css global)
   ========================================================= */

/* Backdrop (fond gris) */
.modal-backdrop{
    position: fixed !important;
    inset: 0 !important;          /* top/right/bottom/left = 0 */
    width: 100vw !important;
    height: 100vh !important;
    z-index: 20000 !important;    /* au-dessus de ton layout */
}

/* Modal */
.modal{
    z-index: 20010 !important;
}

/* Si tu utilises SweetAlert2 pendant qu’un modal est ouvert */
.swal2-container{
    z-index: 20020 !important;
}