*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
html{

    overflow-x: hidden;
    width: 100vw;
    background-color:var(--main-background-color);
}

@font-face {
    font-family: 'Rand';
    src: url('Rand-Medium.eot');
    src: url('Rand-Medium.eot?#iefix') format('embedded-opentype'),
    url('./fonts/Rand-Medium/Rand-Medium.woff2') format('woff2'),
    url('./fonts/Rand-Medium/Rand-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}


@font-face {
    font-family: 'Rand';
    font-weight: 600;
    src: url('./fonts/Rand-Bold/Rand-Bold.woff2') format(‘woff2’)
}
body {
    background:var(--body-background-color);
    font-family: 'Rand', sans-serif;
    font-weight: normal;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    margin-inline: auto;
    transition: color 500ms, background-color 500ms;
    color:var(--main-font-color);
    overflow-x: hidden;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}
.no-scroll {
    overflow: hidden;
    height: 100vh;
  }


a{
    font-size: 12px;
    color: var(--btn-noBackground-color) !important;
}
a:visited {
    color: var(--btn-noBackground-color);
}
a:hover {
    color: var(--secondary-punchy-color);
}
textarea{
    font-family: 'Rand', sans-serif;
}

.main_container {
    height:100%;
   width: 90%;
}

/* Header*/
.logo_eval{
    background-image: url("img/logoevaludi_bleu.png");
    height: 150px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: start;
    cursor: pointer;
}
.nav_en_tete_logo{
    height:150px;
    width: 100%;
    border-bottom: 1px solid #34495E;

}
.logo_eval_gauche{
    background-image: var(--logo-eval-udi);
    height: 80px;
    width: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    cursor: pointer;
}

#main_nav {
    height:80px;
    width: 100%;
    
}
.row_title{
   display: grid;
   grid-template-columns: 20% 60% 20%;
   align-items: center;
   background-color: var(--fond-bar-nav);
   color:var(--nav-font-color);
   font-size: 12px;
   border-radius: 12px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
}

.log_out{
    font-size: 12px;

   padding-right: 10px;
    height: 60px;

}

.log_out svg {
    vertical-align: bottom;
}

.btn_no_background{
    background-color: transparent;
    color: var(--btn-noBackground-color);
    border: none;
    font-size: 12px;
    cursor: pointer;
}
.btn_no_background svg{
    margin-right: 5px;
}
.btn_no_background:hover{
    color: var(--btn-noBackground-color_hover);
}
.connect{
    min-height: 300px
}
.form_connect{
    height: 300px;
    width: 300px;
}
.champ_login{
    height: 40px;
}
.svg_date_debut, .svg_date_fin {
   height: 18px;
   width: 18px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
    position: relative;
    z-index: 2;
}

.btn_barre_menu_haut{
    width: auto;
    min-width: auto;
    height: 60px;
    border: none;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding:5px;
    cursor: pointer;
    border-radius: 5px;
    /*background-color: var(--gris-niveau-5);*/
    font-size:11px;
    text-align: center;
}
.zone_icon_header{
    height: 30px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-end;
}
.zone_text_icon_header{
    height: 25px;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    line-height: 25px;
}
.btn_long{
    width: 130px !;
}



.btn_barre_menu_haut:hover{
    background-color: var(--color-btn-active);
}


.btn_barre_menu_haut a{
    text-decoration: none;
    font-size: 18px;
}

.btn_barre_menu_haut a:hover{
    color: #000;
}

/* Main container */
.main_content_login{
    min-height: 500px;

}

/* boutons action */
.bouton_action_sauvegarder{
    border: none;
    background-color:#0D7E28 ;
    color:#ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    line-height: 31px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    text-align: center;
}
/** MOdae droite*/
.h2_bold{
    font-size: 13px;
    font-weight: 600;
}

#fade {
    display: none;
    position: fixed; left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: rgba(80, 80, 80, 0.9);
    z-index: 15;
}
.en_tete_mon_profil{
    background-color: var(--gris-niveau-3);
    height:34px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width:100%;
    padding-left:10px
}
.fermer_modal_profil_desktop{
    width: 80px;
    height:100%;
    border:none;
    background-color: var(--gris-niveau-2);
    padding:0px 10px 0px 10px;
    color:var(--main-font-color);
    border-left: 1px solid var(--gris-niveau-3);
}
.fermer_modal_profil_desktop:hover{
    background-color: var(--gris-niveau-1);
    cursor: pointer;
}
/* Zone recherche */
.champ_recherche, .type_rapport {
    flex-grow: 1;

    font-size: 14px;
    color: var(--main-font-color) !important;
    font-weight: normal;
    height: 60px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding:5px;
    width: 20%;

}
.navbar_rapport_generaux{
  height: 50px;
}
.menu_rapport_generaux, .menu_rapport, .menu_questionnaire {
    display: flex;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    background-color: var(--btn-no-active);
    border: 1px solid var(--gris-niveau-4);
    overflow: hidden; /* évite le débordement des coins arrondis */
  }
 
  
  .type_rapport_generaux, .type_rapport, .type_questionnaire_formation, .type_questionnaire_generaux, .type_questionnaire_session {
    font-size: 14px;
    color: var(--main-font-color);
    font-weight: 500;
    padding: 6px 16px;
    background-color: var(--btn-action-color-hover);
    border-right: 1px solid var(--gris-niveau-4);
    
    cursor: pointer;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .type_rapport_generaux:hover, .type_rapport:hover, .type_questionnaire_formation:hover, .type_questionnaire_generaux:hover, .type_questionnaire_session:hover {
  
    background-color:var( --color-btn-active);
    color: var(--secondary-font-color);
  }
  
  /* Retire la bordure droite au dernier élément */
  .type_rapport_generaux:last-child {
    border-right: none;
  }
  

  
.champ_recherche_stat_global {
    flex-grow: 1;

    font-size: 14px;
    color: var(--main-font-color) !important;
    font-weight: normal;
    height: 60px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding:5px;
    width: 20%;
   background: none;

}
.type_rapport{
    border-right: 1px solid var(--gris-niveau-4);
}

.recherche_bar{
    height: auto;
}
.zone_filtre {
    flex-grow: 1;
    /*border-right: 1px solid var(--main-background-color);*/
    border-top: none;
    font-size: 11px;
    color: var(--main-font-color) !important;
    font-weight: normal;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding:5px;
    max-width: 20%;
    height: auto;
}
.titre_champ_recherche{
    height: 15px;
    color: var(--main-font-color) ;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    border: none;
    flex-grow: 1;
    font-size: 13px;


}

.champ_input{
    padding: 5px 5px 5px 10px;
    height: 25px;
    font-size: 12px !important;
    
    color: var(--main-font-color);
    border: none;
    min-width: 100px;
}
.champ_input_acteur{
    padding: 5px 5px 5px 10px;
    height: 30px;
    font-size: 12px !important;
   
    color: var(--main-font-color);
    border: 1px solid var(--gris-niveau-4);
    width: 100%;
    border-radius: 5px  ;
    -webkit-border-radius: 5px  ;
    -moz-border-radius: 5px  ;
    -ms-border-radius: 5px  ;
    -o-border-radius: 5px  ;
}
.champ_input::placeholder {
    color: var(--main-font-color) !important;
}
.champ_input:focus {
    outline: none;
    border: none;
}
.input_acteur{
    border : 1px solid var(--gris-niveau-4);
    width: 200px;
    
    height: 30px !important;
    border-radius: 5px;
  
}

.bloc_input{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100% !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    background-color: var(--main-background-color);
    border: 1px solid var(--gris-niveau-4) !important;
    overflow: hidden;
    height: 30px;

}
.bloc_input_nom_compte{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 250px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    background-color: var(--main-background-color);
    border: 1px solid var(--gris-niveau-4) !important;
    overflow: hidden;
    height: 30px;

}
.bloc_input_formation{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 350px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    background-color: var(--main-background-color);
    border: 1px solid var(--gris-niveau-4) !important;
    overflow: hidden;
    height: 30px;

}



input::placeholder {
    color: var(--font-color-input-placeholder);
    opacity: 1;
}
.flatpickr-wrapper{
    width: 90% !important;
}
.flatpickr-container {
    position: relative;
}
.input_picker{
   color: var(--main-font-color);
    border-radius: 5px;
    background-color: transparent;
}
.custom-icon {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    cursor: pointer;
    z-index: 9999;
}

.critere_filtre{
    
   
    display: flex;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #d1d5db;
    overflow: hidden;
    padding: 2px 6px    ;

}
.btn_supprime{
    height: 20px;
    cursor: pointer;

}
.btn_supprime:hover{
    background-color: var(--btn_supprime_hover);
}
.btn_supprime svg{
    height: 20px;
    width: 20px;
}
.btn_supprime svg:hover{
    fill: darkred;
}
.ui-autocomplete{
    max-height: 400px !important;
    max-width: 450px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 5px !important;
}
.ui-menu-item {
    width: 100%;
}

.ui-menu-item-wrapper {
    background-color: var(--gris-niveau-6);
    color: var(--main-font-color);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--gris-niveau-4);
    padding: 5px;
    height: 31px ;
    line-height: 25px;
}
.ui-menu-item-wrapper:hover{
    background-color: var(--btn-action-color-hover-hover);
    border: 1px solid var(--btn-action-color-hover-hover);
}
/*flat picker */

.flatpickr-calendar,.flatpickr-months,.flatpickr-monthDropdown-months,.numInputWrapper,.arrowUp,.arrowDown,.flatpickr-weekday,.flatpickr-day{
    background-color: var(--main-background-color);
    color: var(--main-font-color) !important;
    opacity: 1 !important;

}
.flatpickr-day.selected,
.flatpickr-day.selectedRange {
    background-color: var(--font-color-input-placeholder);
    color: var(--secondary-font-color) !important;
    border: 1px solid var(--font-color-input-placeholder);
}
.flatpickr-day:hover{
    background-color: var(--gris-niveau-2);
}
.arrowUp:hover,.arrowDown:hover{
   color: var(--gris-niveau-3) !important;
}
.flatpickr-prev-month svg, .flatpickr-next-month svg{
    fill: var(--main-font-color) !important;
}
.flatpickr-prev-month  :hover, .flatpickr-next-month  :hover{
     fill: var(--gris-niveau-2) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after{
    border-bottom-color: var(--main-font-color) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: var(--main-font-color) !important;
}
/* CSS à ajouter à votre feuille de style */
#date_fin, #date_debut{
    position: relative;
}
.flatpickr-calendar.open.fin {
    position: absolute !important;

    right: 100px !important; /* Augmenter cette valeur pour le déplacer plus à gauche */
}
.flatpickr-calendar.open .debut {
    position: absolute !important;
    left: 20px !important;
    right: auto !important; /* Augmenter cette valeur pour le déplacer plus à gauche */
}


/* Modales  */
#fade {
    display: none;
    position: fixed; left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: rgba(80, 80, 80, 0.7);
    z-index: 15;
}
.modal_droite, .modal_droite_afficher_reponses, .modal_100, .modal_100_export{
    display: none;
    background: var(--gris-niveau-4);
    padding: 0px;
    float: left;
    position: fixed;
    width:  70%;
    max-height: 100%;
    min-height: 100%;
    top: 0;
    right: 0;
    z-index: 30;

}
.modal_100, .modal_100_export{
    width: 100%;
    z-index: 20;
}


section {
    position: relative;
    display: flex;
    flex-direction: column;
    /* flex-grow: 1; */

}
.section_infos_session{
    font-size: 13px;
    height: auto;
}
.section_infos_session_rapport{
    font-size: 13px;
    height: auto;
    min-height: 100px;;
    border-bottom: 1px solid var(--gris-niveau-5);
    width: calc(100% - 10px);
    background-color: var(--fond-bar-nav);
    color: var(--nav-font-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.section_infos_session_rapport_export{
    font-size: 13px;
    
    max-height: 150px;
    border-bottom: 1px solid var(--gris-niveau-5);
    width: calc(100% - 10px);
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.bandeau_menu_rapports_questionnaires{
    width: calc(100% - 10px);
    height: 40px;
}


.bandeau_en_tete_modal{
    background-color: var(--fond-bar-nav);
    
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100% ;
    height: 34px;
}
.bandeau_bouton_action{
    background-color: var(--gris-niveau-2);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100% ;
    height: 34px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.titre_en_tete_modal{
    font-size: 13px;
    color:var(--titre-modal-font-color);
    font-weight: bold;
    width: 100% ;
    height: 34px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-left: 10px;
}
.btn_fermer_modal{
    height: 34px;

    cursor: pointer;
    background-color: var(--btn-action-color);
    border: none;
    font-size: 16px;
    color: var(--secondary-font-color);
}
.btn_fermer_modal:hover{
    height: 34px;
    cursor: pointer;
    background-color: var(--color-btn-active);
    border: none;
}
.titre_input_textearea{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    line-height: 21px;
    font-size: 13px;
    line-height: 21px;

}
.textearea_input{
    overflow: hidden;
    resize: none;
    min-height: 28px;
    width: 100%;
    line-height: 1;
    padding-top: 5px;
    padding-left: 10px;
    font-size:16px;
    border : none;
    font-family: 'Rand', sans-serif;
    width: calc(100% - 32px);
    color: var(--main-font-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    background-color: var(--gris-niveau-6);
    border: 1px solid var(--gris-niveau-4) !important;
}
.textearea_input_reponse_question{
    border: none !important;
    background: none !important;
}
.section_container_modal{
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 68px);
}
.container_question{

    overflow-y: auto;
}

.section_reponses_stagiaires, .section_liste_stagiaires{
    height:calc(100vh - 120px);
    position: relative;
    overflow-y: auto;
    padding: 10px;
}
.section_liste_stagiaires_tableau{
    height:calc(100vh - 70px);
    position: relative;
    overflow-y: auto;
    padding: 10px;
}

.lib_session{
    font-size: 16px;
    height: 25px;
}
.lib_session_modal{
    font-size: 16px;
    height: 20px;
}
.lib_session_title{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start ;
    align-items: flex-end;
    vertical-align: bottom !important;
}
.switch-container {
    display: inline-flex;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--fond-bar-nav);
    /* width: 60px; */
    /* font-size: 10px; */
    height: 22px;
}

.radio-input {
    display: none;
}

.radio-label {
    display: block;
    width: 80px;
    height: 20px;
    text-align: center;
    padding: 1px;
    color: var(--main-font-color);
    border-radius: 20px;
    border-color: var(--fond-bar-nav);
    transition: background-color 0.3s, color 0.3s;
}
.radio-input:checked + .radio-label {
    color: var(--color-icon-bar-nav);
    background-color: var(--fond-bar-nav);
}

/* tableau */
#tabvisu2 thead>tr , #tabvisu2 tbody>tr{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 25% 25% 30% 20% !important;
    align-items: center;
    font-size: 12px !important;
    border-top: 0;
    border-right: 1px solid var(--gris-niveau-4);
    border-bottom: 1px solid var(--gris-niveau-4);
    border-left: 1px solid var(--gris-niveau-4);
    height: 54px;

}
 #tabvisu tbody>tr{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 15% 10% 35% 15% 10% 10% 15% !important;
    align-items: center;
    font-size: 12px !important;
    border-top: 0;
    border-right: 1px solid var(--gris-niveau-4);
    border-bottom: 1px solid var(--gris-niveau-4);
    border-left: 1px solid var(--gris-niveau-4);
    height: 54px;
}
#tabvisu thead>tr {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 15% 10% 35% 15% 10% 10% 15% !important;
    align-items: center;
    font-size: 12px !important;
    border-top: 0;
   
}
.odd{
    background-color: var(--fond_card_no_shadow_gris) !important;
}
.even{
    background-color: var(--main-background-color) !important;
}
.btn_afficher_rapports_session, .btn_none_afficher_rapports_session,.btn_afficher_rapports_session_formateur{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.btn_afficher_rapports_session svg, .btn_none_afficher_rapports_session svg, .btn_afficher_rapports_session_formateur svg{
   height: 22px;
    width: 22px;
}
.btn_none_afficher_rapports_session svg{
    height: 16px;
    width: 16px;
}


#tabrapport thead>tr {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 12% 10% 35% 12% 12% 10% 8%!important;
    align-items: center;
    border-top: 0;
    border-bottom: 1px solid var(--gris-niveau-4);
    height: 54px;
}
#tabrapport tbody>tr{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 12% 10% 35% 12% 12% 10% 8%!important;
    align-items: center;
    border-top: 0;
    border-right: 1px solid var(--gris-niveau-4);
    border-bottom: 1px solid var(--gris-niveau-4);
    border-left: 1px solid var(--gris-niveau-4);
    height: 54px;
}
.entete_tableau_rapport_session_global{
    background-color: transparent !important;
}
.entete_tableau_rapport_session{
    border: none;   
}

thead>tr{
    opacity:1;
    font-weight: bold;
}

tbody>tr{
    opacity:1;
}
tr{
    width: 100% !important;
    color: var(--main-font-color);
    font-size: 13px !important;

}
.table{
    width: 100% !important;
    display: flex !important;
    flex-flow: column nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;

}
thead{
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    border: none;
    border: 1px solid var(--gris-niveau-4);
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    background-color: var(--gris-niveau-5);
    height: 45px;

}
thead.entete_tableau_rapport_session_question{
    border-bottom: none;
}

tr>th{
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: auto !important;
    padding-left: 10px !important;
    font-weight: normal !important;
    font-size: 14px !important;
}
.infos_session_rapport{
    height: 100%;
    width: 100% !important;
    flex-grow: 1 !important;
}
.espace_btn_export{
    height: 100%;
    width: 100% !important;
    min-width:200px;
    flex-grow: 1 !important;
    justify-content: flex-end !important;
}
.badge_nb_commentaires {
    background-color: var(--btn-action-color-hover);
    border: 1px solid var(--color-border-badge);
    color: var(--main-font-color);
    border-radius: 9999px; /* arrondi complet */
    padding: 2px 8px; /* plus équilibré */
    font-size: 12px;
    font-weight: 600;
}
tbody{
    width: 100% !important;
    height: auto !important;
}


.tableau_liste_formateur, .tableau_liste_stagiaire{
    border-spacing: 0px;
}

thead.entete_tableau_liste_formateur>tr{
    display: grid !important;
    grid-template-columns:40% 20% 20% 20% !important;
    margin-bottom:0px;
    padding-bottom:0px;
}
thead.entete_tableau_rapport_session>tr{
    display: grid !important;
    grid-template-columns:80% 20% ;
    margin-bottom:0px;
    padding-bottom:0px;
  
}

tbody.body_tableau_liste_formateur>tr{
    display: grid !important;
    grid-template-columns: 40% 20% 20% 20% !important;
    border-top: 0;
    border-right: 1px solid var(--gris-niveau-4);
    border-bottom: 1px solid var(--gris-niveau-4);
    border-left: 1px solid var(--gris-niveau-4);

}
thead.entete_tableau_liste_stagiaire>tr{
    display: grid !important;
    grid-template-columns: 40% 20% 20% 20% !important;
   
}
.entete_tableau_rapport>tr{
    height: 40px;
}
tbody.body_tableau_liste_stagiaire>tr{
    display: grid !important;
    grid-template-columns: 40% 20% 20% 20% !important;
    border-top: 0;
    border-right: 1px solid var(--gris-niveau-4);
    border-bottom: 1px solid var(--gris-niveau-4);
    border-left: 1px solid var(--gris-niveau-4);
}
.ligne_tableau_rapport_generaux{
    height: 140px;
}
.ligne_tableau_rapport_generaux td{
    height: 100%;
    font-size: 12px;
}
.ligne_tableau_rapport_generaux_acteur_formation {
    display: grid;
    grid-template-columns:  10% 50% 10% 10% 10% 10%;
    align-items: center;
    height: 40px;
}
.jc_center_important {
   justify-content: center !important;
}

.col_tableau_liste {
   
    font-size: 12px;
   
    width: 100%;
    border-radius: 12px;
    padding: 12px;
}
.col_tableau_liste_entete {
    padding: 10px;
    font-size: 12px;
    height: 100%;
    width: 100%;
 
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.derniere_ligne{
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}
.col_tableau_entete{
    height: 35px !important;
    font-weight: bold;
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding:0px !important;

}
.col_tableau_center{
    height: 100% !important;
    font-weight: bold;
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: center !important;
  
  padding-left: 0px !important;
}

.col_tableau_entete_rapport{

    font-weight: bold;
    display: flex !important;
    flex-flow: column nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    padding:0px !important;

}

.col_tableau_entete_column{
    height: 35px !important;
    display: flex !important;
    flex-flow: column nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0px   !important;

}
.dataTables_info{
    opacity: 0.7;
    font-size: 13px;
    color:var(--main-font-color) !important;
}
.table.dataTable.display tbody td{
    border:none !important;
}
table.dataTable thead th, table.dataTable thead td{
    border-bottom:none !important;
}
/* tableau question */
.tableau_rapport_session_question{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.ligne_tableau_entete_rapport_question{
    width: 100%;
    display: grid;
    grid-template-columns: 25% 75%;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-color: var(--gris-niveau-5);
    font-weight: bolder;

}
.ligne_tableau_entete_rapport_question_non_formateur{
    width: 100%;
    display: grid;
    grid-template-columns: 25% 75%;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-color: var(--gris-niveau-5);
    font-weight: bolder;

}

.ligne_tableau_rapport_question_non_formateur{
    width: 100%;
    display: flex;
   flex-flow: row nowrap ;
    justify-content: flex-start;
    align-items: center;

}
.ligne_tableau_entete_rapport_question_flex{
    width: 100%;
    display: flex;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: center !important;

}
.ligne_tableau_rapport_question{
    width: 100%;
    display: flex;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;

}

.ligne_tableau_rapport_question_flex{
    width: 100%;
    display: flex;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: center !important;

}

.colonne_titre_reponse_questionnaire{
    width: 100% !important;
    display: flex;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    flex-grow: 1;
}
.colonne_reponse_questionnaire_formateur{
    width: 100% !important;
    display: flex;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    flex-grow: 1;
    padding: 5px;
}
.colonne_reponse_questionnaire{

    display: flex;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 5px;

}
.colonne_gauche{
    border-right: 1px solid var(--gris-niveau-4);
}


.ligne_tableau_commentaire_entete_rapport_question{
    width: 100%;
    display: grid;
    grid-template-columns: 30% 70%;

}
.ligne_tableau_entete_rapport_question th,.ligne_tableau_commentaire_entete_rapport_question th,  .ligne_tableau_entete_rapport_question td, .ligne_tableau_commentaire_entete_rapport_question td{
    border : 1px solid var(--gris-niveau-3);
    margin-bottom: 0px;
    padding: 5px;
}
.ligne_tableau_entete_rapport_question td, .ligne_tableau_commentaire_entete_rapport_question td{
    border-top: none;
    padding-left: 10px
}
.tableau_rapport_session_par_famille{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    height: auto;
}
.tableau_rapport_session_par_famille .ligne_tableau_liste_question_par_famille{
   
    display: grid;
    grid-template-columns: 60%  40%;
    align-items: center;
    min-height: 150px !important;
    height: auto !important;
    font-size: 18px !important;
    padding-bottom: 30px;
}
.ligne2_tableau_liste_question_par_famille{
    width: 100%;
    display: grid;
    grid-template-columns: 40%  60%;
    align-items: center;
   
    height: auto !important;
    font-size: 18px !important;
}
.ligne3_tableau_liste_question_par_famille{
   
    width: 100%;
    height: auto !important;

    font-size: 18px !important;
}
.bloc_categorie_card {
    background-color: var(--main-background-color);
    
    border-radius: 8px;
    padding: 16px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    width: 250px;
}

.bloc_score {
    background: var(--fond-badge);
    color: var(--main-font-color);
    font-weight: bolder;
    font-size: 24px;
    border-radius: 16px;
    padding: 16px 2px;
    width: 100px;
    margin: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border: 1px solid var(--color-border-badge);
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}
.badge_score_entete_categorie{
    width: 80px;
    height: 80%;
}
.label_nombre_pourcentage{
    height: 30px;
   
}
.contenu_badge_score{
    height: 50px;
    width:  50px;
}
.label_pourcentage{
    height: 30px;
    display: flex;
    align-items: flex-end;
   
}

.bloc_infos_full {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}



.sous-titre_categorie_questionnaire {
   
    font-size: 14px;
    color: var(--main-font-color);
   
}
.taux_reponse_famille{
    width: 50px;
}

ligne_tableau_rapport_genraux

.ligne_tableau_liste_question_par_famille_entete_general, .ligne_tableau_liste_question_par_famille_general{
    width: 100%;
    display: grid;
    grid-template-columns: 70% 30%;
    align-items: center;

    font-size: 16px !important;
    font-weight: bold;
    /*background-color: var(--gris-niveau-3);*/

}
.col_tableau_liste_jauge{
    background-color: var(--main-background-color);
    padding: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.badge_score{
    background: var(--fond-badge);
    width: 140px;
    height: 120px;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center ;
    color:var(--main-font-color);
    font-weight: bolder;
    font-size:24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border: 1px solid var(--color-border-badge);
}
.fond-badge_score{
    /*background: var(--btn-action-color-hover);
    */background: var(--fond-badge);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center ;
    color:var(--main-font-color);
    font-weight: bolder;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border: 1px solid var(--color-border-badge);
    padding: 5px;
    -webkit-border-radius: 12px;
}
.fond-badge_score_acteur{
    /*background: var(--btn-action-color-hover);
    */background: var(--fond-badge);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center ;
    color:var(--main-font-color);
    font-weight: bolder;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border: 1px solid var(--color-border-badge);
    -webkit-border-radius: 12px;
    padding:3px;
}
.fond_carte{
    background-color: var(--main-background-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;    
    -moz-border-radius: 10px;    
    -ms-border-radius: 10px;    
    -o-border-radius: 10px;
}
.zone_taux_reponse{
    height: 100%;
    font-size: 12px;
    padding-bottom: 10px;
}

.ligne_commentaire_tableau_question{
    min-height: 40px !important;

}




.chart {
    width:100% !important;
   
    min-height:230px !important;

    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin : 0px;
    padding: 0px;
}

.chart_8 {
    width:100% !important;
   
    min-height:300px !important;

    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin : 0px;
    padding: 0px;
}

.chart > div,
.chart canvas {
    cursor: default !important;
}

.btn_export_rapport a{
    
    color:#FFFFFF !important;
  
}



.col_question_par_famille, .col_question_par_famille_entete {
   
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 18px;
    font-weight: bolder;

}

.col_question_par_famille_entete {
    padding: 10px;
}



.ligne_tableau_liste_question_jauge_par_famille{
    font-size: 20px !important;
    height: 200px !important;

}
.circle {
    width: 50px !important;
    margin: 0px 10px 0px 10px;
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 1.2;
    height: 40px;


}
.circle strong {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 9px;
    left:0;
    font-weight: bold;

}
ins{
    background-color: transparent;
}
/* Questionnaires */

.label_question{
    font-size: 24px;
    font-weight: bolder;
}
.intitule_question{
    font-size: 18px;
    font-weight: 900;
}

.contenu_question{
    
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    max-width: 100%;
}

.btn_supprime_question svg, .btn_edit_question svg{
  cursor: pointer;
    fill: var(--btn-noBackground-color);

}
.btn_supprime_question, .btn_edit_question{
    cursor: pointer;
    font-size: 16px;
}

.placeholder {
    background-color: var(--gris-niveau-2);
    border-radius: 5px;
    height: 45px;
list-style-type: none;
}
.ligne_reponse_question{
    border-radius: 8px;
    border: 1px solid var(--gris-niveau-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.015);
    background-color: var(--main-background-color);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    min-height: 40px;
    padding:10px;
}
.ligne_reponse_question_gris{
    border-radius: 8px;
    border: 1px solid var(--gris-niveau-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.015);
    background-color: var(--fond_card_no_shadow_gris);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    min-height: 40px;
    padding:10px;
}

.ligne_proposition_qcm, .ligne_label_proposition_qcm{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    height: 31px;
    margin-bottom: 10px;

}
.div_question{
    list-style-type: none;
}
.dropdown {
    position: relative;
    width: 350px;
    font-size: 12px;
}

.dropdown-header {
    height: 30px;
    font-size: 16px;
}



.dropdown-list {
    display: none;
    position: absolute;
    width: 100%;
   
    max-height: 220px;
    overflow-y: auto;
    z-index: 1;
    border: 1px solid var(--gris-niveau-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.015);
    background: var(--fond-badge);
}

.dropdown-item {
   
   
    cursor: pointer;
    min-height: 30px;
    font-size: 13px;
    border-bottom: 1px solid var(--gris-niveau-4);
    padding-left: 10px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
   
}

.dropdown-item:hover {
    background-color: var(--gris-niveau-5);
}
.ligne_titre_bloc{
    border-bottom: 1px solid var(--gris-niveau-4);
}
.separation_trait_blanc{
    border-bottom: 2px solid var(--gris-niveau-5);
}
.nom_bloc{
   height: 34px;
    font-size: 20px;
    font-weight: bolder;
}
.label_titre{
    font-size: 13px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px 0px 5px;
    text-overflow: ellipsis;

    max-height: 36px;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 5px;
}
.label_titre_question_globale{
  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
   
}
.zone_action_question{
    height: 21px;
}
.zone_action_question span svg{
    height: 14px;
    width: 14px;
}
.label_categorie_titre{
    font-size: 14px;
    opacity: 0.7;

}

.texte_reponse{
    font-size: 14px;
}
.div_question_modal_sort{
   height: 40px
}

.slider-readonly {
    opacity: 0.6;
}
.slider-readonly .rs-pointer {
    cursor: default !important;
}
.rs-container {
    margin-top: 10px !important;
}
/** fiche formation */
.nom_formation {
	font-size: 20px;
    /* background: #f5f5dc; */
    padding: 5px 10px;

}

.bloc_champ {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
	margin : 20px;

    padding: 10px;
}

.bloc_champ textarea {
	width: 100%;
	padding: 5px;
	resize: none;
    font-family: 'Rand', sans-serif;
    font-size: 16px;
    border: 1px solid #ccc;
    height: auto;
    padding: 10px;
   
}

.zone_texte_questionnaire{
    width: 100%;
    height: auto;
    padding: 10px;
    font-size: 13px;
    border-radius: 8px !important;
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    -ms-border-radius: 8px !important;
    -o-border-radius: 8px !important;
}

.zone_texte_questionnaire ul {
	margin-left: 20px;
}


.titre_champ {
	width: 400px;
    flex-shrink: 0;
    font-size: 20px;
    font-weight: bolder;
 
}

.ht_area-50 {
	height: 50px;
    color: var(--main-font-color);
    background-color: var(--gris-niveau-3);
    border: none !important;
    border-radius: 5px;
    padding: 10px !important;
}

.ht_area-80 {
	height: 80px;
}

.ht_area-100 {
	height: 150px;
}

.ht_area-300 {
	height: 350px;
}
/* page rapport */
.gauge {
    height: 100px;
    width: 125px;
}
.gauge.gauge_tot {
    height: 130px;
    width: 175px;
}
.gauge.gauge_tot text:first-of-type{
    font-size: 24px !important;
    color: var(--main-font-color) !important;
}
.gauge svg text{
   
    color: var(--main-font-color) !important;
}
.gauge_par_famille{
    height: 100px;
    width: 175px;
}
.chart{
    color: var(--main-font-color) !important;
}
.uk-accordion-title{
    color: var(--main-font-color) !important;
}
.uk-accordion-content {
    transition: all 0.3s ease;
  }
.gauge_spe_categorie svg{
    max-height: 90px !important;
}

.section_rapports_questionnaires_session{
    height: calc(100vh - 68px);
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
   
}
.section_rapport_questionnaire_seul_session{
    height:auto;
    width: calc(100% - 10px);
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.container_body_categorie{
    width: 100%;
}
.zone_gauge{
    background-color: var(--gris-niveau-6);
    height: 120px;
    width: 160px;
    border-radius: 12px;
   
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 16px;
}
.titre_categorie_questionnaire{
   
    color: var(--main-font-color) !important;
  
   
    width:auto;
    height: 30px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    
   
}
.titre_categorie_questionnaire h4{
    color: var(--main-font-color) !important;
}
.ligne_tableau_entete_rapport, .entete_tableau_rapport_session{
    font-weight: bold !important;
    font-size: 22px !important;
    width: auto;
    flex-grow: 1;
    height: 40px;
    background: none;
    width: calc(100% - 10px);
    color:var(--main-font-color);
}
.titre_famille{
    font-size: 22px !important;
    color:var(--main-font-color);


}
.ul_accordion li {
    border-radius: 5px !important;
}
.uk-accordion-title {
    display: flex !important;
    flex-flow: row-reverse nowrap;
    justify-content: space-between;
    align-items: center;      /* Centre le contenu verticalement */
    font-size: 1rem;

    color: #333;
    overflow: hidden;
    padding: 5px;
    width: 100% !important;
}
.uk-accordion>:nth-child(n+2){
    margin-top: 5px !important;
}

#radio-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.icon svg {
    vertical-align: middle;
}


/* taille element */
.flex-grow {
    flex-grow: 1;
    word-wrap: break-word;
}
/** Page login_back_off */
.container_login_back_off{
    width: 100%;
    height: 100vh;
   

    margin-left : 50px;
    margin-right : 50px;

}
.blog_illustration_non_connecte{
    height: 350px;
}

.menu_gauche, .menu_milieu{
    width: 250px;
    height: 100%;

}



.auteur_udi{
    padding: 8px;
    font-size: 13px;
    background-color: #0071DA;
    margin-top:10px;
    margin-bottom:10px;
    color: #FFFFFF;
    width: 100%;
    vertical-align: middle;
    line-height: 23px;
    display: table-cell;
    height: 3.5rem;

}
.btn_gris_simple a{
    text-decoration: none;
    color: var(--main-font-color);
   
}
.btn_gris_simple {
    padding: 10px;
    font-size: 12px;
   
    border: 1px solid var(--main-font-color);
    cursor: pointer;
    text-align: center;
    width: 120px;
    height: 34px;;
    border-radius: 8px;;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.container_login_pass{
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 15px;
}
.container_login_pass form{
    max-width: 600px;
}
.input_login {
  width: 80%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #d1d5db; /* gris clair */
  border-radius: 8px; /* coins arrondis modernes */
  background-color: #f9fafb; /* fond gris très clair */
  transition: all 0.2s ease-in-out;
  outline: none;
  color: #111827; /* gris très foncé pour bonne lisibilité */
}
/* Effet focus (quand on clique sur le champ) */
.input_login:focus {
  border-color: #2C5A7E; /* bleu branding */
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(44, 90, 126, 0.2); /* halo bleu clair */
}

/* Placeholder plus discret */
.input_login::placeholder {
  color: #9ca3af; /* gris neutre */
  font-size: 14px;
}
/* PAge Administration */
.menu_gauche{
    height: 34px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    width: 250px;
}
.menu_milieu{
    height: 30px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    width: 220px;
}



.options_container {
    display: none; /* Caché par défaut */
    position: absolute;
    z-index: 10;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    border-radius: 5px;
    background: var(--fond-badge);
}

.options_container li{
    padding: 5px 12px;
    cursor: pointer;
    height: 27px;
    color: var(--main-font-color);
    font-size: 13px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
   
}

.options_container li:hover {
    background-color: #f0f0f0;

}
.select_categorie_statut {
    position:relative;
    width: 100%;
    height: 30px;
    font-size: 11px;
    line-height: 30px;
    border: none;
    border-bottom: var(--color-separateur-border-segment) solid 1px;
    background: var(--fond-badge);
    color: var(--main-font-color);
    list-style:none;
    padding-left:0px !important;
}
.select_categorie_statut  li {

    width: 100% !important;
    height: 30px;
    border: none;
    cursor: pointer;
    border-bottom: 1px solid var(--gris-niveau-4);
    font-size: 13px;
    color: var(--main-font-color);
}
.select_categorie_statut  li:hover{
    background: var(--gris-niveau-5);
}
.select_categorie_statut .option_selected{
    border-radius: 5px;
    height:30px;
    padding: 5px;
    width: 100% !important;
    color: var(--main-font-color);
    font-weight: normal;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}
.option_selected[etat="0"]{
    padding-left: 10px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    background-color: var(--main-background-color);
    border: 1px solid var(--gris-niveau-4) !important;
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background-image: var(--btn_dropdown);
    background-repeat: no-repeat;
    background-position: 95%;
    border-radius: 5px;

}
.option_selected[etat="1"]{

    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background-image: url(./img/close_dropdown_up_blanc.png);
    background-repeat: no-repeat;
    background-position: 95%;
    padding-left: 10px;
    border-radius: 5px;

}


.input_recherche, .input_recherche_formation {
    height: 25px;
    border-radius: 8px;
    color: var(--main-font-color);
    width: 200px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background-color: transparent;
}
input_recherche::placeholder {
    color: var(--main-font-color) !important;
}
/* css jquery ui */
.ui-menu-item-wrapper {
    font-size: 12px;
}
.information_label{
    color:red;
    font-size: 11px;
    margin-top: 10px;
    padding-left: 16px;
}
.en_tete_espace_statut_utilisateur, .en_tete_carte_utilisateur{
    width: 100%;
    margin-top: 30px;
    padding-left: 15px;
    background-color: var(--gris-niveau-5);
    height:34px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.select_statut{
    width: 250px !important;
    height: 30px;
    border: none;
    border-radius:5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    background-color: var(--main-background-color);
    border: 1px solid var(--gris-niveau-4) !important;
    color:var(--main-font-color);

}
.select_statut_acteur{
    width: 200px !important;
    height: 30px;
    border: none;
    border-radius:5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    background-color: var(--main-background-color);
    border: 1px solid var(--gris-niveau-4) !important;
    color:var(--main-font-color);

}
.select_statut.ss-main{
    width: 250px !important;
    border: none;
    border-radius:5px;
    color: var(--main-font-color);
    font-size: 12px;
}
.select_statut_acteur.ss-main{
    width: 200px !important;
    border: none;
    border-radius:5px;
    color: var(--main-font-color);
    font-size: 12px;
}
.ss-main .ss-arrow path{
    stroke : var( --color-icon) !important;
    fill: none;
}
.ss-content .ss-list{
    font-size: 13px;
}
.ss-option{
    border-bottom: 1px solid var(--gris-niveau-4);
    height: 30px;
}
.ss-list .ss-option {
    color: var(--main-font-color) !important;
  }
.ss-optgroup{
    background: var(--fond-badge);
}
.ss-search {
    display: none !important;
}

.ss-content .ss-list .ss-option.ss-highlighted, .ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
    color : blue;
    background-color: var(--background-color-bouton-fleche) !important;
}
.ss-content .ss-list .ss-option.ss-highlighted, .ss-content .ss-list .ss-option:not(.ss-disabled):hover{
    background-color: var(--gris-niveau-5) !important;
}

.ss-content .ss-list .ss-option.ss-highlighted, .ss-content .ss-list .ss-option:not(.ss-disabled):hover{
    background-color: var(--gris-niveau-5) !important;
}
.bouton_action{
    height:34px;
    width: 100%;
    margin-top: auto;
    /*position: absolute;*/
    /* bottom: 0px;*/
}
.bouton_action_annuler{
    border: none;
    background-color:var(--gris-niveau-2);
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    color:var(--main-font-color);
    cursor: pointer;
}
.bouton_action_w-100{
    display: flex;
    flex-direction: row;
    height:34px;
    width: 100% !important;
    position: absolute;
    bottom: 0;
}
/** modale questionnaire session **/
.container_questionnaire_session{

    height: calc(100vh - 68px);
    overflow-y: auto;
}
.bloc_session{
    width : calc(100% - 40px) !important;
}
/**
* page rapports generaux
**/
.container_infos_statistiques_carte{
  
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}
.vignette_statistiques{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    height: 93px;
    width: 114px;
    margin: 10px;
    border-radius: 5px;;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.vignette_statistiques_details{
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  height: 120px !important;
  width: 180px;
 
 
  
}
.container_bloc_score{
    height: 80px;
}
.titre_vignette_statistiques_details{
    font-size: 20px;
    font-weight: 600;
    height: 25px;
}
.body_tableau_rapport_session{
   height: auto !important;
    padding-bottom: 20px;
    width: 70% !important;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}
.body_tableau_rapport_session_liste{
    height: auto !important;
     padding-bottom: 20px;
     width: 90% !important;
     display: flex;
     flex-direction: column;
     margin: 0 auto;
 }
.body_tableau_rapport_session_elements{
    height: auto !important;
     padding-bottom: 20px;
     width: 70% !important;
     display: flex;
     flex-direction: column;
    
 }
.ligne_tableau_stat, .ligne_tableau_stat td{
    height: 240px;
}

.chiffres_statistiques{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 45px;
   font-weight:600;
    color: var(--main-font-color);
    font-size: 34px;
}
.sous_titre_section_stat_carte {
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
    width: 100%;
    height: 34px;
    padding:5px;
    background-color: var(--gris-niveau-5);
}
.texte_statistiques{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    height: 20px;
    font-size: 15px;
   text-align: center;
    padding: 3px;
    color: var(--main-font-color);
    opacity: 0.8;
    margin-bottom: 5px;
    line-height: 13px;
}
.bar {
    margin: 20px;
    width: 200px;
    height: 8px;
  }

 .progressbar-text{
    font-size: 12px;
    margin: 20px;
 }
.tableau_rapport_session{
    min-height: 300px;
}
.bloc_categorie{
    height: 110px;
}


/* Styles pour l'autocomplete des acteurs */
.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--fond-badge);
    border: 1px solid var(--gris-niveau-4);
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    border-radius: 0 0 5px 5px;
}

.autocomplete-item {
    padding: 10px;
    border-bottom: 1px solid var(--gris-niveau-5);
    cursor: pointer;
    color: var(--main-font-color);
    font-size: 12px;
}

.autocomplete-item:hover {
    background: var(--gris-niveau-5);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item.selected {
    background: var(--gris-niveau-4);
}

/* Styles pour les boutons de périodes prédéfinies */
.btn_periode_predefinies {
    background-color: var(--btn-action-color);
    border: 1px solid var(--gris-niveau-4);
    color: var(--secondary-font-color);
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn_periode_predefinies:hover {
    background: var(--color-primary);
    color:var(--main-font-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn_periode_predefinies.active {
    background-color: var(--btn-action-color);
    color: var(--secondary-font-color);
    font-weight: 600;
    position: relative;
}

.btn_periode_predefinies.active::after {
    content: "✓";
    margin-left: 5px;
    font-weight: bold;
}

.periode-group {
    min-width: 150px;
}


/* Utilitaires pour les espacements */
.gap-5 > * + * { margin-left: 5px; }

.px-15 { padding-left: 15px; padding-right: 15px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.br-5 { border-radius: 5px; }

/*Bootstrap*/
.btn_radio{
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
color: var(--main-font-color);
margin-right: 20px;
cursor: pointer;
}
/* boostrap mon Cap */
/* boostrap display */
.d-none{
    display: none;
}
.df-row_nowrap{
    display: flex;
    flex-flow: row nowrap;
}
.df-column_nowrap{
    display: flex;
    flex-flow: column nowrap;
}
.df-row_wrap{
    display: flex;
    flex-flow: row wrap;
}
.df-column_wrap{
    display: flex;
    flex-flow: column wrap;
}
.fd-reverse {
    flex-direction: row-reverse;
}
.fd-row {
    flex-direction: row;
}
.jc-flex_start{
    justify-content: flex-start;
}
.jc-flex_end{
    justify-content: flex-end;
}
.jc-center{
    justify-content: center;
}
.jc-space_between{
    justify-content: space-between;
}
.jc-space_around{
    justify-content: space-around;
}
.ai-flex_start{
    align-items: flex-start;
}
.ai-flex_end{
    align-items: flex-end;
}
.ai-center{
    align-items: center;
}
.ai-stretch{
    align-items: stretch;
}
/* boostrap margin */
.ml-2{
    margin-left: 2px;
}
.m-5{
    margin :  5px 5px 5px 5px;
}
.m-10{
    margin: 10px 10px 10px 10px;
}
.m-15{
    margin : 15px 15px 15px 15px;
}
.m-20{
    margin: 20px 20px 20px 20px;
}
.m-30{
    margin: 30px 30px 30px 30px;
}
.m-40{
    margin: 40px 40px 40px 40px;
}
.m-20{
    margin: 20px 20px 20px 20px;
}
.ml-5{
    margin-left: 5px;
}
.ml-0{
    margin-left: 0px;
}
.ml-10{
    margin-left: 10px;
}
.ml-15{
    margin-left: 15px;
}
.ml-20{
    margin-left: 20px;
}
.ml-25{
    margin-left: 25px;
}
.ml-30{
    margin-left: 30px;
}
.ml-40{
    margin-left: 40px;
}
.ml-50{
    margin-left: 50px;
}
.mr-5{
    margin-right: 5px;
}
.mr-10{
    margin-right: 10px;
}
.mr-15{
    margin-right: 15px;
}
.mr-20{
    margin-right: 20px;
}
.mr-25{
    margin-right: 25px;
}
.mr-30{
    margin-right: 30px;
}
.mr-40{
    margin-right: 40px;
}
.mr-50{
    margin-right: 50px;
}
.mt-5{
    margin-top: 5px;
}
.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}
.mt-20{
    margin-top: 20px;
}
.mt-30{
    margin-top: 30px;
}
.mt-40{
    margin-top: 40px;
}

.mb-5{
    margin-bottom: 5px;
}
.mb-7{
    margin-bottom: 7px;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-15{
    margin-bottom: 15px;
}

.mb-20{
    margin-bottom: 20px;
}
.mb-30{
    margin-bottom: 30px;
}
.mb-40{
    margin-bottom: 40px;
}
.mb-50{
    margin-bottom: 50px;
}
.mb-60{
    margin-bottom: 60px;
}

/* boostrap padding*/
.p-0 {
    padding: 0
}
.p-5{
    padding :  5px 5px 5px 5px;
}
.p-7{
    padding :  7px 7px 7px 7px;
}
.p-10{
    padding: 10px 10px 10px 10px;
}
.p-15{
    padding : 15px 15px 15px 15px;
}
.p-20{
    padding: 20px 20px 20px 20px;
}
.pl-5{
    padding-left: 5px;
}
.pl-10{
    padding-left: 10px;
}
.pl-15{
    padding-left: 15px;
}
.pl-20{
    padding-left: 20px;
}
.pr-5{
    padding-right: 5px;
}
.pr-10{
    padding-right: 10px;
}
.pr-15{
    padding-right: 15px;
}
.pr-20{
    padding-right: 20px;
}
.pt-5{
    padding-top: 5px;
}
.pt-10{
    padding-top: 10px;
}
.pt-15{
    padding-top: 15px;
}

.pt-20{
    padding-top: 20px;
}
.pt-30{
    padding-top: 30px;
}

.pb-0{
    padding-bottom: 0px;
}
.pb-3{
    padding-bottom: 3px;
}

.pb-5{
    padding-bottom: 5px;
}
.pb-10{
    padding-bottom: 10px;
}
.pb-15{
    padding-bottom: 15px;
}

.pb-20{
    padding-bottom: 20px;
}
.pb-30{
    padding-bottom: 30px;
}
.pb-40{
    padding-bottom: 40px;
}



/* background Couleur */
.fondgris-N0 {
    background-color: var(--gris-niveau-0);
}
.fondgris-N1 {
    background-color: var(--gris-niveau-1);
}

.fondgris-N2 {
    background-color: var(--gris-niveau-2);
}

.fondgris-N3 {
    background-color: var(--gris-niveau-3);
}
.fondgris-N4 {
    background-color: var(--gris-niveau-4);
}
.fondgris-N5 {
    background-color: var(--gris-niveau-5);
}
.fondgris-N5-gradient {
    background-image: var(--gris-niveau-5-gradient);
}
.fondgris-N6 {
    background-color: var(--gris-niveau-6);
}

.fond-main-bg {
    background-color: var(--main-background-color);
}
.fond-bleu {
    background-color: var( --fond-bleu);
}
.fond-badge-bleu{
    background-color: var(--fond-badge);
}
.fond-bar-nav{
    background-color: var(--fond-bar-nav) !important;
}
.active{
    background-color: var(--color-btn-active);
    color:var(--secondary-font-color);
}

/* bordure */

.borderB-blanc {
    border-bottom: 1px solid #fff;
}

.borderB-gris {
    border-bottom: 1px solid var(--gris-niveau-1);
}
.borderR-gris {
    border-right: 1px solid var(--gris-niveau-4);
}
.b-none{
    border: none;
}
.b-main_background_color{
    border : 1px solid var(--main-background-color);
}
.br-none{
    border-right: none;
}
.b-top-left_radius{
    border-top-left-radius: 10px;
}
.b-top-right_radius{
    border-top-right-radius:10px;
}
.b-bottom-left_radius{
    border-bottom-left-radius: 10px;
}
.b-bottom-right_radius{
    border-bottom-right-radius:10px;
}
.b-radius-3{
    border-radius: 3px;
}
.b-radius-5{
    border-radius: 5px;
}
.b-background-color{
    border : 1px solid var(--main-background-color);
}
.b-gris-N1{
    border : 1px solid var(--gris-niveau-1);
}
.b-gris-N2{
    border : 1px solid var(--gris-niveau-2);
}
.b-gris-N3{
    border : 1px solid var(--gris-niveau-3);
}

.fixed-width {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
}
.h-100 {
    height: 100%;
}
.h-90{
    height: 90%;
}
/*display largeur */
.w-100 {
    width: 100%;
}

.w-95 {
    width: 95%;
}

.w-90 {
    width: 90%;
}

.w-85 {
    width: 85%;
}

.w-80 {
    width: 80%;
}

.w-75 {
    width: 75%;
}
.w-70 {
    width: 70%;
}

.w-60 {
    width: 60%;
}

.w-50 {
    width: 50%;
}
.w-50-5pourcent{
    width: calc(50% - 10px);
}
.w-45 {
    width: 45%;
}
.w-40 {
    width: 40%;
}
.w-30 {
    width: 33%;
}
.w-25 {
    width: 25%;
}
.w-20 {
    width: 20%;
}
.w-10 {
    width: 10%;
}

.h-auto {
    height: auto;
}
.w-auto {
   width: auto;
}
.h-30 {
    height: 30px;
}

.h-40 {
    height: 40px;
}

.h-50 {
    height: 50px;
}

.h-60 {
    height: 60px;
}

.mh-30 {
    min-height: 30px;
}

.mh-40 {
    min-height: 40px;
}

.mh-50 {
    min-height: 50px;
}

.mh-60 {
    min-height: 60px;
}

.br-5 {
    border-radius: 5px;
}

.br-10 {
    border-radius: 10px;
}
.br-15 {
    border-radius: 10px;
}

/* texte */
.text-9 {
    font-size: 9px;
}
.text-10 {
    font-size: 10px;
}

.text-11 {
    font-size: 11px;
}

.text-12 {
    font-size: 12px;
}

.text-13 {
    font-size: 13px;
}

.text-14 {
    font-size: 14px;
}

.text-15 {
    font-size: 15px;
}

.text-16 {
    font-size: 16px;
}
.text-18 {
    font-size: 18px;
}

.text-20 {
    font-size: 20px;
}
.text-22 {
    font-size: 22px;
}
.text-24 {
    font-size: 24px;
}
.text-26 {
    font-size: 26px;
}
.text-28 {
    font-size: 28px;
}
.text-30 {
    font-size: 30px;
}
.text-32 {
    font-size: 32px;
}
.text-bolder{
    font-weight: 900;
}
.text-bold{
    font-weight: 600;
}

/* couleur texte */
.noir {
    color: #000;
}
.text-red{
    color: rgb(198, 9, 9);
}
.blanc {
    color: #fff;
}
.text-main_color{
    color:var(--main-font-color);
}
.text-secondary_color{
    color:var(--secondary-font-color);
}
.texte-bold{
    font-weight: bold;
}
/* texte opacity*/
.op-7{
    opacity: 0.7;
}
.op-5{
    opacity: 0.5;
}
.op-6{
    opacity: 0.6;
}
.op-8{
    opacity: 0.8;
}
.op-9{
    opacity: 0.9;
}
/* gap*/
.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

.cursor-p{
    cursor: pointer;
}

/* ombres */


.btn_ajout, .btn_action_noBackground, .btn_action_noBackground_none{

    font-size: 14px;
    color:var(--btn-noBackground-color);
    padding:5px;
    cursor: pointer;
}
.btn_action_noBackground_none{

    font-size: 14px;
    color:var(--btn-noBackground-color);
    padding:5px;
   cursor: default;
}
.btn_ajout:hover, .btn_action_noBackground:hover{
    color:var(--btn-noBackground-color_hover);
}

.btn_ajout svg, .btn_ajout span, .btn_action_noBackground svg, .btn_action_noBackground span{
   height:24px;
    vertical-align: middle;
}

/* boutons action */
.btn_action_valider{
    background-color: var(--btn-action-color);
    width: auto;
    min-width: 120px;;
    height: 34px;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 14px;
    cursor: pointer;
    color:#FFFFFF;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    display: flex;
    flex-flow: row nowrap !important;
    justify-content: center;    
    align-items: center;
    border: none !important;
}

.btn_action_valider a{
    display: flex;
    flex-flow: row nowrap !important;
    justify-content: center;    
    align-items: center;
}
.btn_action_valider:hover{
    background-color: var(--color-btn-active) !important;
}

/* Bouton d'export PDF */
.btn_action_export{
    background-color: #3778b2; /* Gris neutre */
    width: auto;
    height: 34px;
    border-radius: 8px;
    padding: 6px 16px;
    border: none;
    cursor: pointer;
    color: white;
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 1px 2px rgba(59, 83, 128, 0.05);
    transition: all 0.2s ease;
    display: flex;
    flex-flow: row nowrap !important;
    justify-content: center;    
    align-items: center;
}

.btn_action_export:hover{
    background-color: #5A6268 !important; /* Gris légèrement plus foncé */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn_action_valider a:hover{
    background-color: var(--color-btn-active) !important;
    text-decoration: none   ;
}
.text_btn_action_valider{
    height: 16px;
    white-space: nowrap;
}
.btn_action_enregistrer{
    background-color: var(--btn-action_enregistrer);
    height: 34px;
    color:#FFFFFF;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    color:#FFFFFF;
}
.btn_action_enregistrer:hover{
    background-color: var(--btn-action_enregistrer-hover);
}
.btn_categorie_general, .btn_toggle_elements{
    height: 32px;
    width: 125px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.btn_categorie_general:hover, .btn_toggle_elements:hover{
 background-color: var(--gris-niveau-3);
}

.card {
    border-radius: 12px;
    background: var(--gris-niveau-5-gradient);
    border: 1px solid var(--gris-niveau-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.015);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
  .card_no_gradient {
    border-radius: 12px;
    border: 1px solid var(--gris-niveau-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.015);
    background-color: var(--main-background-color);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
  .card_no_gradient_badge_bg {
    border-radius: 12px;
    border: 1px solid var(--gris-niveau-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.015);
    background-color: var(--btn-action-color-hover);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.card_no_gradient_body_bg {
    border-radius: 12px;
    border: 1px solid var(--gris-niveau-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.015);
    background-color: var(--body-background-color);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

 

  .card_no_gradient_ombre {
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    background-color: var(--main-background-color);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

  .card_no_gradient_gris {
    border-radius: 12px;
    border: 1px solid var(--gris-niveau-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.015);
    background-color: var(--fond_card_no_shadow_gris);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
  .card_no_gradient_gris_box_shadox-4 {
    border-radius: 12px;
    border: 1px solid var(--gris-niveau-4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    background-color: var(--fond_card_no_shadow_gris);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
  .card_no_gradient_gris_b_8 {
    border-radius: 8px;
    border: 1px solid var(--gris-niveau-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.015);
    background-color: var(--fond_card_no_shadow_gris);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
  .fond-gris-border{
    border-radius: 8px;
    border: 1px solid var(--gris-niveau-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.015);
    background-color: var(--fond_card_no_shadow_gris);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.text_monospace {
    font-family: 'Courier New', Courier, monospace;
}

ins{
    color:var(--ins_font-color) !important;
}
/* color scheme */
@media (prefers-color-scheme: light) {
    :root {
        --body-background-color:#eff0f4;
        --main-font-color: #3d4e61;
        --secondary-font-color: #FFFFFF;
        --titre-modal-font-color:#FFFFFF;
        --nav-font-color:#FFFFFF;
        --main-background-color: #ffffff;
        --color2-gradient-background: #F2F4F8;
        --fond-bar-nav : #34495E;
        --gris-niveau-0: #a5a5a5;
        --gris-niveau-1: #b4b4b4;
        --gris-niveau-2: #c1c0c0;
        --gris-niveau-3: #cdcbcb;
        --gris-niveau-4: #e5e7eb;
        --gris-niveau-5: #efefef;
        --gris-border: #dbe0ea;
        --color-btn-active :#4f6f8f;
        --color-border-badge :#c1c8d3;
        --gris-niveau-5-gradient: linear-gradient(to bottom,#ffffff 0%,#fbfbfb 30%,#f7f7f7 100%);
        --fond_card_no_shadow_gris: #f8f8f8;
        --gris-niveau-6: #F7F7F7;
        --fond-bleu: rgba(171, 210, 245, 0.32);
        --btn_supprime_hover: #f59c9c;
        --secondary-punchy-color: #2b78c4;
        --btn-action-color: #2C5A7E;
        --fond-badge:linear-gradient(to bottom,#f1f7f7 0%,#edf1f6 30%,#edf1f6 100%);
        --btn-action-color-hover: #edf1f6;
        --btn-action-color-hover-hover: rgb(170, 201, 230);
        --btn-action_enregistrer:#0D7E28;
        --btn-action_enregistrer-hover: #4ccb6a;
        --btn-noBackground-color_hover:  #81b7ed;
        --btn-noBackground-color: #15416c;
        --font-color-input-placeholder: #15416c;
        --ins_font-color:#232222;
        --btn_dropdown : url('./img/chevron-down.svg');/*btn_dropdown*/
        --color-icon : #6D849B;
        --secondary-color-icon : #5DADE2;
        --color-icon-bar-nav:#ECF0F1;
        --logo-eval-udi: url('./img/logoevaludi_dark.png');
       
    
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --body-background-color:#323131;
        --main-font-color: #dfdede;
        --secondary-font-color:  #0e0707;
        --titre-modal-font-color:#FFFFFF;
        --nav-font-color: #dfdede;
        --main-background-color: #1c1b1b;
        --color2-gradient-background: #2a2929;
        --fond-bar-nav: #1c1b1b;
        --color-border-badge :#c1c8d3;
        --gris-niveau-0: #a8a7a7;
        --gris-niveau-1: #8c8b8b;
        --gris-niveau-2: #7c7b7b;
        --gris-niveau-3: #434343;
        --gris-niveau-4: #373636;
        --gris-niveau-5: #2a2a2a;
        --gris-niveau-6: #232323;
        --gris-btn_active:#3b3a3a;
        --color-btn-active :#f1f4f7;
        --fond_card_no_shadow_gris: #252424;
        --gris-niveau-5-gradient: linear-gradient(to bottom,#000000 0%,#1c1b1b 30%,#2a2a2a 100%);
        --fond-bleu: rgba(171, 210, 245, 0.32);
        --btn_supprime_hover: #f59c9c;
        --font-color-input-placeholder: #8eb2d5;
        --btn-action-color: var( --color-icon);
        --btn-action-color-hover: #5d88b7;
        --btn-action-color-hover-hover: rgb(120, 174, 223);
        --secondary-punchy-color: #FF5722;
        --btn-action_enregistrer:#0D7E28;
        --btn-action_enregistrer-hover: #4ccb6a;
        --btn-noBackground-color_hover:  #81b7ed;
        --btn-noBackground-color: #4b86c0;
        --ins_font-color:#FFFFFF;
        --color-icon : #94bce3;
        --logo-eval-udi: url('./img/logoevaludi_dark.png');
        --fond-badge:#81b7ed;
        --color-icon-bar-nav:#94bce3;
        --secondary-color-icon : #C8512A;
    }
}