/*****************************************************
**                                                  **
**  class Css utilitaire                            **
**                                                  **
*****************************************************/
.rotate-90 {
    rotate: 90deg;
}

.rotate-180 {
    rotate: 180deg;
}

.rotate-270 {
    rotate: 270deg;
}


/*****************************************************
**                                                  **
**  Custom icons                                    **
**                                                  **
*****************************************************/
/* Icônes des onglets — technique mask : hérite de currentColor du parent */
.svg-icon {
    display: inline-block;
    width: calc(var(--bs-body-font-size) + 0.4rem);
    height: calc(var(--bs-body-font-size) + 0.4rem);
    vertical-align: middle;
    margin-right: .3rem;
    /* La couleur du SVG suit celle du texte parent */
    background-color: currentColor;
    /* Masque : le SVG définit la forme, background-color définit la couleur */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
/* Une classe par icône — pointe vers le fichier SVG */
.ico-Menu_Projets {
    -webkit-mask-image: url("/images/menu_projets.svg");
    mask-image: url("/images/menu_projets.svg");
}

.ico-Menu_Gestion-donnees {
    -webkit-mask-image: url("/images/menu_gestion_donnees.svg");
    mask-image: url("/images/menu_gestion_donnees.svg");
}

.ico-Menu_Suivi_Urba {
    -webkit-mask-image: url("/images/menu_suivi_urba.svg");
    mask-image: url("/images/menu_suivi_urba.svg");
}

.ico-Menu_Analytics {
    -webkit-mask-image: url("/images/menu_analytics.svg");
    mask-image: url("/images/menu_analytics.svg");
}

.ico-Tab_Pilotage {
    -webkit-mask-image: url("/images/pilotage.svg");
    mask-image: url("/images/pilotage.svg");
}

.ico-Tab_Foncier_Juridique {
    -webkit-mask-image: url("/images/foncierJuridique.svg");
    mask-image: url("/images/foncierJuridique.svg");
}

.ico-Tab_Caracteristiques {
    -webkit-mask-image: url("/images/caracteristiques.svg");
    mask-image: url("/images/caracteristiques.svg");
}

.ico-Tab_Autorisations_Admin {
    -webkit-mask-image: url("/images/autorisationAdmin.svg");
    mask-image: url("/images/autorisationAdmin.svg");
}

.ico-Tab_Raccordement {
    -webkit-mask-image: url("/images/Raccordement.svg");
    mask-image: url("/images/Raccordement.svg");
}

.ico-Tab_Construction_Exploitation {
    -webkit-mask-image: url("/images/ConstructionExploit.svg");
    mask-image: url("/images/ConstructionExploit.svg");
}

.ico-Tab_Modele_Economique {
    -webkit-mask-image: url("/images/modeleEco.svg");
    mask-image: url("/images/modeleEco.svg");
}

.ico-Tab_Contacts {
    -webkit-mask-image: url("/images/annuaire.svg");
    mask-image: url("/images/annuaire.svg");
}

/*****************************************************
**                                                  **
**  Textes, Titres, sous titre, body, legende       **
**                                                  **
*****************************************************/
body, .body {
    font-family: var(--enp-font-family-baseline);
    font-weight: var(--enp-font-weight-normal);
    font-size: 1rem;
    letter-spacing: 0;
}

.body-2 {
    font-weight: var(--enp-font-weight-light);
}

.body-small {
    font-weight: var(--enp-font-weight-light);
    font-size: 0.875rem; /*14px*/
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn, button {
    font-family: var(--enp-font-family-title);
    letter-spacing: 0;
}
/* 
Dans la maquette on utilise pas les titre 1 à 3, 
Pour garder la cohérence des niveaux de titre :
    - le h1 (titre de la page) prend le design de Heading 4 
    - le h2 (catégorie) prend le desing de subtitle 3
    - le h3 (sous catégorie) prend le desing de subtitle 3
*/

h1, .h1 {
    font-weight: var(--enp-font-weight-medium);
    font-size: calc(var(--bs-body-font-size) + .5rem); /*25px*/
    color: var(--enp-color-primary);
}

h2, .h2 {
    font-weight: var(--enp-font-weight-normal);
    font-size: calc(var(--bs-body-font-size) + .25rem); /*20px*/
    color: var(--ts-color-text3);
}

h3, .h3 {
    font-weight: var(--enp-font-weight-normal);
    font-size: calc(var(--bs-body-font-size) + .25rem); /*20px*/
    color: var(--enp-color-primary);
}
/* Tous les style de typo de la maquette */
.heading-1 {
    font-weight: var(--enp-font-weight-medium);
    font-size: 5rem; /*80px;*/
    letter-spacing: -1.5%;
}

.heading-2 {
    font-weight: var(--enp-font-weight-medium);
    font-size: 2.75rem; /*44px; */
    letter-spacing: -0.5%;
}

.heading-3 {
    font-weight: var(--enp-font-weight-normal);
    font-size: 2rem; /*32px*/
}

.heading-4 {
    font-weight: var(--enp-font-weight-medium);
    font-size: calc(var(--bs-body-font-size) + .5rem); /*25px*/
}

.subtitle-1 {
    font-weight: var(--enp-font-weight-normal);
    font-size: calc(var(--bs-body-font-size) + .5rem);
    letter-spacing: 0.25%;
}

.subtitle-2 {
    font-weight: var(--enp-font-weight-medium);
    font-size: calc(var(--bs-body-font-size) + .4rem);
}

.subtitle-3 {
    font-weight: var(--enp-font-weight-normal);
    font-size: calc(var(--bs-body-font-size) + .25rem); /* 20px;*/
}

button {
    font-weight: var(--enp-font-weight-normal);
    font-size: var(--bs-body-font-size); /* 1rem = 16px;*/
    letter-spacing: 1.25%;
}

caption, .caption {
    font-weight: var(--enp-font-weight-light);
    font-size: calc(var(--bs-body-font-size) - .15rem); /*14px;*/
    letter-spacing: 0.4%;
}

.overline {
    font-weight: var(--enp-font-weight-light);
    font-size: calc(var(--bs-body-font-size) - .25rem); /*12px;*/
    letter-spacing: 1.5%;
    text-transform: uppercase;
}

.overline-2 {
    font-weight: var(--enp-font-weight-normal);
    font-size: calc(var(--bs-body-font-size) - .15rem); /*14px;*/
    letter-spacing: 1.5%;
    text-transform: uppercase;
}

.text-1 {
    --bs-text-opacity: 1;
    color: rgba(var(--ts-color-text1-rgb), var(--bs-text-opacity)) !important;
}

.text-2 {
    --bs-text-opacity: 1;
    color: rgba(var(--ts-color-text2-rgb), var(--bs-text-opacity)) !important;
}

.text-3 {
    --bs-text-opacity: 1;
    color: rgba(var(--ts-color-text3-rgb), var(--bs-text-opacity)) !important;
}

.text-4 {
    --bs-text-opacity: 1;
    color: rgba(var(--ts-color-text4-rgb), var(--bs-text-opacity)) !important;
}

.text-5 {
    --bs-text-opacity: 1;
    color: rgba(var(--ts-color-text5-rgb), var(--bs-text-opacity)) !important;
}
/* END tous les style de typo de la maquette */
/* alert-status : à utiliser avec .alert-xxxx (bootstrap) et .body-smal pour faire les badges d'état de projet */
.alert-status {
    --bs-alert-padding-x: .7rem;
    --bs-alert-padding-y: 0.25rem;
    --bs-alert-margin-bottom: 0;
    --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
    --bs-alert-border-radius: var(--bs-border-radius-lg);
    --bs-alert-link-color: inherit;
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
}

/*********************************************
**                                          **    
**  App.cs par default pour projet Blazor   **
**                                          **
**********************************************/
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: var(--bs-danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* Disposition avec le menu de gauche */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        height: 100dvh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row {
        padding-left: 0rem !important;
        padding-right: 1.5rem !important;
    }
}
/*********************************************
**          Layout principal                **
**********************************************/
/*---- Header global ----*/
.top-row {
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--enp-color-separator);
    justify-content: flex-end;
    height: var(--enp-header-and-footer-heigth);
    display: flex;
    align-items: center;
}

.top-search {
    border-color: var(--enp-color-form-control-border);
    color: var(--ts-color-text3);
    width: calc(150px + 30vw);
}

.top-row .dropdown-icon .dropdown-toggle::after {
    display: none;
}

.top-row .dropdown-icon .dropdown-toggle {
    /*background: var(--enp-gradient-primary-180);*/
    background: var(--enp-color-primary);
    color: var(--bs-body-bg);
    border-radius: 70px;
    padding: 6px;
    margin: 0px;
    width: 38px;
}
/*---- END header global ----*/
/*---- Contenu principal ----*/
main {
    flex: 1;
    overflow-x: hidden;
    overflow-y: hidden; /* le scroll n'est pas géré par le layout principal */
}

    main > article {
        height: calc(100vh - var(--enp-header-and-footer-heigth)); /* hauteur fix pour que les enfant puissent gérer le scroll */
        height: calc(100dvh - var(--enp-header-and-footer-heigth)); /* hauteur fix pour que les enfant puissent gérer le scroll */
        padding: var(--enp-padding-main) !important;
    }

    main > article,
    .modal-content {
        background-color: var(--enp-main-color-bg);
    }

        .modal-content > .modal-header,
        .modal-content > .modal-footer {
            background-color: var(--bs-modal-bg);
        }

        .modal-content > .modal-header {
            border-radius: var(--bs-modal-border-radius) var(--bs-modal-border-radius) 0 0;
        }

        .modal-content > .modal-footer {
            border-radius: 0 0 var(--bs-modal-border-radius) var(--bs-modal-border-radius);
        }
/*---- END Contenu principal ----*/
/*************************************************
**                                              **    
**  Customisation Eléments unitaires globaux    **
**                                              **
**************************************************/
/*---- boutons ----*/
.btn {
    margin-right: 0.5em;
}

.btn {
    transition: none;
}

@media (prefers-reduced-motion: no-preference) {
    .btn {
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }
}
/* btn secondaire */
.btn-secondary {
    --bs-btn-color: var(--enp-color-primary);
    --bs-btn-bg: white;
    --bs-btn-border-color: var(--enp-color-primary);
    --bs-btn-hover-color: var(--enp-color-primary);
    --bs-btn-hover-bg: var(--enp-color-btn-bg-hover);
    --bs-btn-hover-border-color: var(--enp-color-primary);
    --bs-btn-active-color: var(--enp-color-primary);
    --bs-btn-active-bg: var(--enp-color-btn-bg-active);
    --bs-btn-active-border-color: var(--enp-color-primary);
    --bs-btn-disabled-color: var(--ts-color-text3);
    --bs-btn-disabled-bg: var(--ts-color-text5);
    --bs-btn-disabled-border-color: var(--ts-color-text4);
}

/*---- 
primaire
(on défini le primaire après le secondaire 
pour que le style primaire soit pris en compte même si il a les deux classes
car dans datatable tous les boutons on la class secondaire) 
----*/
.btn-primary {
    --bs-btn-color: var(--ts-color-text5);
    /*--bs-btn-bg: var(--me-gradient-primary-90);*/
    --bs-btn-border-color: var(--me-gradient-primary-90);
    --bs-btn-hover-color: var(--ts-color-text5);
    --bs-btn-hover-bg: var(--enp-color-primary);
    --bs-btn-hover-border-color: var(--enp-color-primary);
    --bs-btn-active-color: var(--ts-color-text5);
    --bs-btn-active-bg: var(--enp-color-primary);
    --bs-btn-active-border-color: var(--enp-color-primary);
    --bs-btn-disabled-color: var(--ts-color-text5);
    --bs-btn-disabled-bg: var(--ts-color-primary-bleu-50);
    --bs-btn-disabled-border-color: var(--ts-color-primary-bleu-50);
    background: var(--enp-gradient-primary-90);
}

    .btn-primary.btn-plain {
        background: var(--enp-color-primary);
    }

    .btn-primary:hover, .btn-primary:focus {
        background: var(--enp-color-primary);
    }

.btn-outline-primary {
    --bs-btn-color: var(--enp-color-primary);
    --bs-btn-border-color: var(--enp-color-primary);
    --bs-btn-hover-color: var(--ts-color-text5);
    --bs-btn-hover-bg: var(--enp-color-btn-bg-hover);
    --bs-btn-hover-border-color: var(--enp-color-primary);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: var(--ts-color-text5);
    --bs-btn-active-bg: var(--enp-color-primary);
    --bs-btn-active-border-color: var(--enp-color-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--enp-color-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--enp-color-primary);
    --bs-gradient: none;
}
/* btn tertiaire */
.btn-tertiaire {
    --bs-btn-color: var(--enp-color-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: none;
    --bs-btn-hover-color: var(--enp-color-primary);
    --bs-btn-hover-bg: var(--enp-color-btn-bg-hover);
    --bs-btn-hover-border-color: none;
    --bs-btn-active-color: var(--enp-color-primary);
    --bs-btn-active-bg: var(--enp-color-btn-bg-active);
    --bs-btn-active-border-color: var(--enp-color-primary);
    --bs-btn-disabled-color: var(--ts-color-text3);
    --bs-btn-disabled-bg: var(--ts-color-text5);
    --bs-btn-disabled-border-color: none;
}
/* icon du bouton */
.btn-icon {
    margin-right: 5px;
}

.icon-bold {
    -webkit-text-stroke: 1px; /* épaici l'icone */
}

.icon-semi-bold {
    -webkit-text-stroke: 0.5px; /* épaici l'icone */
}

.btn-no-border {
    border: none;
}
/* bouton CTA poiur la création de projet par exemple */
.btn-big-big {
    --bs-btn-bg: var(--enp-main-color-bg);
    --bs-btn-hover-bg: var(--enp-color-btn-bg-hover);
    --bs-btn-active-bg: var(--enp-color-btn-bg-active);
    --bs-btn-disabled-bg: var(--ts-color-text5);
    box-shadow: 0px 2px 4px 1px #00000033;
    border-radius: var(--bs-border-radius-lg);
    border-width: 0;
    width: 250px;
    height: 5rem; /*80px*/
    margin: var(--enp-margin-main);
}
/*---- FIN boutons ----*/
/*---- dropdown ----*/
.dropdown-item {
    font-weight: var(--enp-font-weight-light);
    color: var(--ts-color-text1);
    width: auto;
    margin: 0.25rem;
    border-radius: var(--bs-border-radius-sm);
}

    .dropdown-item:focus, .dropdown-item:hover,
    .dropdown-item.active, .dropdown-item:active {
        font-weight: var(--enp-font-weight-normal);
    }

    .dropdown-item.active, .dropdown-item:active {
        border-left: 4px solid var(--enp-color-primary);
    }
/*---- FIN dropdown ----*/

/*---- form-control ----*/
.form-control {
    font-size: 1rem;
    font-weight: var(--enp-font-weight-normal);
    border-color: var(--enp-color-form-control-border);
    box-shadow: 0px 4px 6.3px 0px rgba(var(--enp-color-primary-rgb), 0.26) inset;
}

    .form-control:focus {
        border-color: var(--enp-color-primary);
    }
    /* form-control sans validation */
    .form-control.no-validate:valid,
    .form-control.no-validate.valid {
        border-color: var(--enp-color-form-control-border);
    }

.form-select {
    font-size: 1rem;
    font-weight: var(--enp-font-weight-normal);
    border-color: var(--enp-color-form-control-border);
    box-shadow: 0px 4px 6.3px 0px #2F80AB26 inset;
}
/*---- FIN form-control ----*/
/*---- input type checkbox global ----*/
input[type=checkbox] {
    background-image: var(--bs-form-check-bg-image);
    border-color: var(--enp-color-form-control-border);
    box-shadow: 0px 1px 3px 0px #00000040 inset;
    background-color: var(--enp-main-color-bg);
    height: 1.2rem;
    width: 1.2rem;
}

.form-check-input:checked {
    background-color: var(--enp-color-primary);
    border-color: var(--enp-color-primary);
}
/*---- END input type checkbox global ----*/
/*---- barre verticale ----*/
.vr {
    color: var(--enp-color-separator);
    opacity: 1;
}
/*---- FIN barre verticale ----*/
/*---- barre horizontale ----*/
hr {
    color: var(--enp-color-separator);
    opacity: 1;
    margin: 0.5rem;
}
/*---- FIN barre verticale ----*/
/*---- div de contenu ----*/
.content {
    background: var(--bs-body-bg);
    border-radius: var(--bs-border-radius-lg);
    border-color: var(--enp-color-content-border);
    box-shadow: 0px 1px 3px 0px #0000001A, 0px 1px 2px -1px #0000001A;
    padding: var(--enp-padding-main);
    margin: 0.5rem 0;
}
/*---- FIN div de contenu ----*/
/*---- Header de content qui compense le pading principal pour prendre toute la largeur ----*/
.content-top-full-width {
    margin: calc( -1 * var(--enp-padding-main));
    width: calc(100% + 2 * var(--enp-padding-main));
    border-bottom: 1px solid var(--enp-color-separator);
}
/*---- FIN ----*/
/*---- bottom row ----*/
.bottom-content {
    box-shadow: 0px -4px 13.7px 0px #0000001A;
    border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
}
/*---- END bottom row ----*/
/*************************************************
**                                              **    
**  Customisation Composant complexes           **
**                                              **
**************************************************/
/*---- Menu de gauche ----*/
.app-sidebar.DEBUG {
    --enp-sidebar-badge-prefix: "_";
    --enp-sidebar-badge-color: var(--ts-color-text1);
    --enp-sidebar-badge-background-color: lightcoral;
    --enp-sidebar-badge-border_color: var(--enp-color-primary);
}

.app-sidebar.DEV {
    --enp-sidebar-badge-prefix: "DEV_";
    --enp-sidebar-badge-color: white;
    --enp-sidebar-badge-background-color: brown;
}

.app-sidebar.UAT {
    --enp-sidebar-badge-prefix: "UAT_";
    --enp-sidebar-badge-color: var(--enp-color-primary);
    --enp-sidebar-badge-background-color: yellow;
}
/*---- FIN menu de gauche ----*/
/*---- Program search bar ----*/
.psd-menu {
    max-height: 40vh;
    max-height: 40dvh;
    overflow: auto;
}
/*---- END Program search bar ----*/
/*---- icon loupe sur tous les champs de recherche ----*/
input[type="search"] {
    color: var(--ts-color-text3);
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'> <path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/> </svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}
/*---- FIN icon loupe sur tous les champs de recherche ----*/
/*************************************
**          Datatable               **
**************************************/
/* zone de recherche */
div.dt-container div.dt-search {
    margin-left: 0px !important;
}

    div.dt-container div.dt-search input {
        width: calc(50px + 15vw);
    }
/* spacer */
.dt-button-spacer.bar {
    color: var(--enp-color-dt-separator);
}
/* datatable barre de boutons -> bontons séparés  */
.btn-group > .btn-group:not(:first-child) > .btn, .btn-group > .btn:nth-child(n+3), .btn-group > :not(.btn-check) + .btn {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

.btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}
/* pas de retour à la ligne par default */
table.dataTable tbody th, table.dataTable tbody td {
    white-space: nowrap;
}
/* header - arrondi, couleur bordure, ombres et font */
table.dataTable thead {
    border-color: var(--enp-color-separator);
}

    table.dataTable thead th {
        /*overline-2*/
        font-weight: var(--enp-font-weight-normal);
        font-size: calc(var(--bs-body-font-size) - .15rem); /*14px;*/
        letter-spacing: 1.5%;
        text-transform: uppercase;
        color: var(--ts-color-text1);
        box-shadow: inset 0px -3px 0px 0px var(--enp-color-separator);
    }

        table.dataTable thead th:first-child {
            border-top-left-radius: 16px;
        }

        table.dataTable thead th:last-child {
            border-top-right-radius: 16px;
        }
/* barre de scroll invisible au niveau du header */
div.dt-scroll div.dtfc-top-blocker {
    background-color: transparent;
}
/* ombre sur tout le tableau */
div.dt-scroll {
    box-shadow: 0px 1px 3px 0px #0000001A;
}
/* Style pour les différentes colonnes */
/* -> Centre verticalement tout le contenu des cellules DataTables */
table.dataTable td,
table.dataTable th {
    vertical-align: middle !important;
}
    /* Si certaines cellules contiennent des éléments affichés en flex,
aligne verticalement leurs enfants sans modifier la mise en page globale */
    table.dataTable td > * {
        display: inline-flex;
        align-items: center;
        /*height: 100%;*/ /* casse le rendu des checkbox dans les tableaux */
    }
/* -> font par default dans la grille body-2 */
table.dataTable td {
    /*body-2*/
    font-family: var(--enp-font-family-baseline);
    font-weight: var(--enp-font-weight-light);
    font-size: 1rem;
    letter-spacing: 0%;
}
/* -> lien vers la page program */
td.openForm a {
    font-weight: var(--enp-font-weight-normal);
    color: var(--enp-color-primary);
}
/* style de l'editeur bubble utilisé pour les longtext */
/* élargir l'éditeur bulle pour tous */
.DTE_Bubble .DTE_Bubble_Liner {
    width: 400px;
}
/* hauteur du textarea (~5 lignes) */
.DTE_Bubble.longText textarea {
    height: 8em;
}
/*************************************
**          FICHE Detaillée         **
**************************************/
/*---- Champ de recherche ----*/
.Program-form .form-control[type="search"] {
    width: calc(50px + 15vw);
}

.search-form-dropdown {
    position: absolute;
    z-index: 1000;
    min-width: 420px;
    max-height: 420px;
    overflow-y: auto;
    right: 0px;
    /*    top: 100%;
    right: 0;
    background-color: var(--bs-white);
    border-radius: var(--bs-border-radius);*/
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    box-shadow: 0px 25px 50px -12px #00000040;
}

.search-result-item {
    cursor: pointer;
    margin: 0;
    padding: 1rem;
    border-radius: 0;
    border-bottom: 1px solid var(--enp-color-primary);
}

    .search-result-item:focus, .search-result-item:hover,
    .search-result-item.active, .search-result-item:active {
        border-left: 4px solid var(--enp-color-primary);
    }

    .search-result-item .layout-tabs {
        background-color: var(--ts-color-primary-bleu-10);
        border-radius: var(--bs-border-radius-sm);
        padding: 0.125rem 0.5rem;
    }

    .search-result-item:focus .layout-tabs, .search-result-item:hover .layout-tabs,
    .search-result-item.active .layout-tabs, .search-result-item:active .layout-tabs {
        background-color: var(--enp-color-btn-bg-hover);
    }

    .search-result-item .bi-chevron-right {
        font-size: 0.6rem;
    }
/*---- Time Line ----*/
/* separateur zone pliable */
.timeline-toggle {
    cursor: pointer;
    user-select: none;
}

    .timeline-toggle:hover .bb-icon {
        color: var(--enp-color-primary);
    }
/*
TimeLine Phase
*/
.ts-timeline-item {
    height: var(--enp-timeline-height);
    border-radius: var(--enp-timeline-height) 0px;
}

.timeline-gradient {
    background: linear-gradient(90deg, var(--enp-color-primary) 0%, var(--enp-color-secondary) 100%);
}
/* 
TimeLine : jalons 
*/
.progress-container {
    position: relative;
}

.milestone {
    position: absolute;
    top: 1px;
    transform: translateX(-150%); /* ajuste la position horizontale */
    font-size: calc(var(--enp-timeline-height) - 0.25rem);
    -webkit-text-stroke: 1px; /* épaici l'icone */
}

.milestone-dark {
    color: var(--ts-color-text4);
}

.milestone-light {
    color: var(--ts-color-text5);
    /*box-shadow: 0px 4px 4px 0px #0000001A;*/
}

.milestone-icon-Stopped {
    color: var(--bs-danger);
}


.milestone-icon-None::before,
.milestone-icon-Estimated::before {
    content: "\f28a"; /*Circle*/
}

.milestone-icon-Waiting::before {
    content: "\f567"; /*Circle slash*/
    rotate: 90deg;
    color: var(--bs-info);
    /*content: "\F288";*/ /*Circle half fill*/
}

.milestone-icon-Stopped::before {
    /*content: "\F2E5";*/ /*Dash circle fill*/
    content: "\F2E6"; /*Dash circle*/
    color: var(--bs-danger);
}

.milestone-icon-Check::before {
    content: "\F26B"; /*Check circle*/
    /*color: var(--bs-success);*/
}
/*
timeline tooltip 
*/
.milestone-tooltip.show {
    opacity: 1;
}

.milestone-tooltip .tooltip-inner {
    min-width: var(--bs-tooltip-max-width);
    max-width: calc(var(--bs-tooltip-max-width)*2);
    box-shadow: 0px 4px 12.2px 0px #0000001A;
    background: var(--ts-timeline-tooltip-bg);
    font-size: var(--bs-body-font-size);
    color: var(--ts-color-text1);
    padding: var(--enp-padding-main) calc(var(--enp-padding-main) * 1.5);
}

.milestone-tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.milestone-tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--ts-timeline-tooltip-bg);
}

.milestone-name {
    font-weight: lighter;
}

.milestone-state {
    /*font-weight:bolder;*/
    border-radius: var(--bs-border-radius-sm);
    opacity: 1;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    gap: 10px;
}

    .milestone-state.milestone-None {
        display: none
    }

    .milestone-state.milestone-Estimated {
        background: var(--bs-info-bg-subtle);
        color: var(--bs-info);
    }

    .milestone-state.milestone-Waiting {
        background: var(--bs-info-bg-subtle);
        color: var(--bs-info);
    }

    .milestone-state.milestone-Stopped {
        background: var(--bs-danger-bg-subtle);
        color: var(--bs-danger);
    }

    .milestone-state.milestone-Check {
        background: var(--bs-success-bg-subtle);
        color: var(--bs-success);
    }
/*---- FIN Time Line ----*/
/*---- Onglets (section) ----*/
.nav.nav-underline {
    border-bottom: 3px solid var(--ts-color-primary-bleu-10);
}

.nav-underline .nav-link.active > *,
.nav-underline .show > .nav-link > *,
.nav-underline .nav-link:hover > * {
    color: var(--bs-nav-underline-link-active-color);
    border-bottom-color: currentcolor;
}
/*---- FIN Onglets (section) ----*/
/*---- Accordeons (sous sections)----*/
.accordion > .accordion-item {
    margin: var(--enp-margin-main) 0px;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--enp-color-separator);
    box-shadow: 0px 4px 6.4px 0px #00000014;
}

.accordion-item h3 {
    border-left: 3px solid var(--enp-color-accordion-emphasis-border);
}

.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: var(--bs-accordion-active-bg);
    box-shadow: none;
}
/*---- FIN Accordeons (sous sections)----*/
/*---- inputs de formulaire (TsInput) ----*/
/* bordure gauche au survol — pseudo-élément pour éviter le layout shift */
.ts-form-item {
    position: relative;
}

    .ts-form-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--enp-gradient-primary-180);
        border-radius: 3px 0 0 3px;
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .ts-form-item:hover::before,
    .ts-form-item:focus-within::before {
        opacity: 1;
    }
    /* Niveau imbriqué : couleurs atténuées */
    .ts-form-item > .ts-form-item::before {
        background: linear-gradient(180deg, var(--enp-color-primary-50) 0%, var(--enp-color-secondary-50) 100%);
    }
/* label */
.col-form-label {
    /* Body-2 Text-1*/
    font-family: var(--enp-font-family-baseline);
    font-weight: var(--enp-font-weight-light);
    font-size: 1rem;
    letter-spacing: 0;
    color: var(--ts-color-text1);
}
/* champs requis */
.label-required {
    font-weight: bold;
}

    .label-required::after {
        content: "*";
        color: var(--enp-color-cta);
        font-weight: bolder;
    }
/* champs en lecture seule */
.label-readOnly {
    color: var(--ts-color-text4);
    font-style: italic;
}
/*---- FIN inputs de formulaire (TsInput) ----*/
/*---- Program Notes (Fiche et popup table) ----*/
.note-add-cta {
    cursor: pointer;
    background: var(--enp-color-btn-cta-bg);
    border: 1px dashed var(--enp-color-btn-cta-border);
    border-radius: var(--bs-border-radius);
    padding: 0.9rem 1rem;
    min-height: 48px;
    color: var(--ts-color-text3);
}

    .note-add-cta:hover {
        background: var(--enp-color-btn-cta-bg-hover);
    }
/*---- FIN Program Notes ----*/
/*---- Liste de selction contact ----*/
.selector-list {
    height: 50vh;
    overflow-y: auto;
}
/*---- FIN Liste de selction contact ----*/
/*************************************
**    Gestion des Vues              **
**************************************/
/* CSS VUES */
.vs-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.vs-modal {
    width: min(1100px, 92vw);
    height: min(720px, 88vh);
    height: min(720px, 88dvh);
    background: var(--bs-body-bg);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--enp-color-content-border);
}

.vs-header {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--enp-color-separator);
    background: var(--bs-body-bg);
}

.vs-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--enp-color-primary);
}

.vs-body {
    flex: 1;
    display: flex;
    gap: 18px;
    padding: 16px 18px;
    background: var(--bs-body-bg);
    min-height: 0;
}

.vs-left {
    flex: 1.25;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.vs-right {
    flex: .9;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--enp-color-separator);
    padding-left: 18px;
    min-height: 0;
}

.vs-tabs {
    background: var(--enp-main-color-bg);
    border-radius: var(--bs-border-radius-lg);
    padding: 6px;
    display: flex;
    gap: 6px;
    width: fit-content;
}

.vs-tab {
    border: 0;
    background: transparent;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--ts-color-text3);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

    .vs-tab.active {
        background: var(--bs-body-bg);
        color: var(--enp-color-primary);
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }

.vs-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 10px;
    font-weight: 700;
    color: var(--enp-color-primary);
}

.vs-pill {
    font-size: 12px;
    font-weight: 700;
    color: var(--bs-info);
    background: var(--bs-info-bg-subtle);
    border: 1px solid var(--bs-info);
    padding: 3px 10px;
    border-radius: var(--bs-border-radius-pill);
}

.vs-input {
    width: 100%;
    border: 1px solid var(--enp-color-content-border);
    border-radius: 8px;
    padding: 10px 12px;
    outline: none;
    font-size: 13px;
}

    .vs-input:focus {
        border-color: var(--enp-color-form-control-border);
        box-shadow: 0 0 0 3px rgba(66,153,225,.15);
    }

.vs-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--enp-color-separator);
    border-radius: 10px;
    padding: 10px;
}

.vs-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
}

.vs-group-title {
    font-weight: 700;
    color: var(--ts-color-text1);
    font-size: 13px;
}

.vs-expander {
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

    .vs-expander:hover {
        background: var(--enp-color-btn-bg-hover);
    }

.vs-chevron {
    font-size: 14px;
    color: var(--ts-color-text3);
}

.vs-children {
    margin-left: 40px;
    border-left: 1px dashed var(--enp-color-separator);
    padding-left: 12px;
}

.vs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ts-color-text1);
}

.vs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px;
    border: 1px solid var(--enp-color-separator);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--bs-body-bg);
}

.vs-row-fixed {
    border-color: var(--enp-color-primary-20);
    background: var(--enp-color-primary-10);
}

.vs-row-text {
    flex: 1;
    color: var(--ts-color-text1);
    font-weight: 600;
    font-size: 13px;
}

.vs-drag {
    opacity: .6;
}

.vs-row-actions {
    display: flex;
    gap: 6px;
}

.vs-mini-btn {
    border: 1px solid #d8e2ee;
    background: var(--bs-body-bg);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-weight: 800;
}

    .vs-mini-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

.vs-filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.vs-right-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--enp-color-primary);
    margin-bottom: 6px;
}

.vs-right-sub {
    font-size: 12px;
    color: var(--ts-color-text2);
    margin-bottom: 12px;
    line-height: 1.35;
}

.vs-link-btn {
    border: 0;
    background: transparent;
    color: #2b6cb0;
    font-weight: 800;
    cursor: pointer;
}

.vs-saved-list {
    flex: 1;
    overflow: auto;
    padding-right: 4px;
    min-height: 0;
    overflow-y: auto;
}

.vs-saved-item {
    border: 1px solid var(--enp-color-separator);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    background: #fff;
}

    .vs-saved-item.selected {
        border-color: var(--enp-color-form-control-border);
        background: var(--enp-color-primary-20);
    }

.vs-saved-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vs-saved-name {
    font-weight: 800;
    color: var(--enp-color-primary);
    font-size: 13px;
}

.vs-saved-meta {
    margin-top: 6px;
    color: var(--ts-color-text3);
    font-size: 12px;
    font-weight: 700;
}

.vs-editor {
    margin-top: 12px;
    border: 1px solid var(--enp-color-form-control-border);
    background: var(--enp-color-primary-20);
    border-radius: 12px;
    padding: 12px;
}

.vs-editor-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vs-editor-icons {
    display: flex;
    gap: 6px;
}

.vs-editor-meta {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ts-color-text3);
}

.vs-editor-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vs-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--enp-color-separator);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bs-body-bg);
}

.vs-empty {
    padding: 18px;
    color: #718096;
    font-weight: 700;
    text-align: center;
}
/* drag & drop UI */
.vs-row[draggable="true"] {
    cursor: grab;
    user-select: none;
}

.vs-row.dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.vs-row.drag-over {
    border-color: var(--enp-color-primary-50);
    box-shadow: 0 0 0 3px rgba(var(--enp-color-primary-rgb),.15);
    background: var(--enp-color-primary-20);
}

.vs-drag {
    cursor: grab;
}

.vs-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
/* Un filtre = bloc */
.vs-filter-item {
    margin-bottom: 10px;
}
/* Ligne principale */
.vs-filter-main {
    display: grid;
    grid-template-columns: 280px 180px 1fr auto; /* champ | opérateur | valeur | delete */
    gap: 10px;
    align-items: center;
}
    /* Si la ligne n’a pas de valeur (cas adresse), on garde quand même la place, mais elle sera vide */
    .vs-filter-main > .vs-icon-btn {
        justify-self: end;
    }
/* Zone dessous (adresse) */
.vs-filter-details {
    margin-top: 8px;
    padding-left: 0px; /* tu peux mettre 10px si tu veux un léger décalage */
}
/* Grille des champs adresse */
.vs-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
/* Inputs d’adresse un peu plus confortables */
.vs-address-input {
    min-height: 40px;
    padding: 8px 10px;
}
/* Responsive */
@media (max-width: 900px) {
    .vs-filter-main {
        grid-template-columns: 1fr; /* tout en colonne */
    }

    .vs-filter-details {
        margin-top: 6px;
    }
}
/*************************************
**              FIN                 **
**************************************/
/*************************************
**          A trier                 **
**************************************/
/* Modal pour formulaire */
.modalForInput .modal-header {
    border: none;
    padding: 0.5em;
}

    .modalForInput .modal-header .h5, .modalForInput .modal-header h5 {
        font-size: 0.90em;
    }

.modalForInput .list-group-item {
    padding: 0.35rem 0.25rem 0.35rem 0.25rem;
    border: none;
}

.modal-xxl {
    --bs-modal-width: 90vw;
}

    .modal-xxl .modal-content {
        height: 100%;
    }

.info {
    color: #27348B;
}

.container {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}


.text-primary-emphasis {
    color: #0d6efd;
}

.bg-primary-subtle {
    background-color: #e7f1ff;
}

.result {
    margin-top: 1.5em;
}

.result-success {
    background-color: lightgreen;
}

.result-fail {
    background-color: lightcoral;
}

.row {
    margin-bottom: 0.3em;
    padding: 3px;
}
/*************************/
/* grid */
.grid-row td {
    height: 2rem;
    vertical-align: text-bottom;
}

.grid-row-inactive td {
    height: 2rem;
    vertical-align: text-bottom;
    color: grey;
    /*text-decoration: line-through;*/
}

.btn-link-row {
    padding-top: 0;
    padding-bottom: 0;
}
/* Dialog*/
.ok-button {
    padding: .5rem;
    width: 5rem;
    color: white;
    background-color: #3A61FF;
    font-weight: bold;
    border: 2px solid #2A4CD2;
    border-radius: var(--bs-border-radius-sm);
    transition: 0.1s ease;
    cursor: pointer;
}

    .ok-button:hover {
        background-color: #2B4CD2;
    }

.dialog-body {
    padding: 1rem;
}

.dialog-footer {
    padding: 1rem;
}

.bi-pencil-square::before {
    display: inline-block;
    margin-right: 0.5rem;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pencil-square' viewBox='0 0 16 16'> <path d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z'/> <path fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z'/> </svg>");
    background-repeat: no-repeat;
}

.bi-x-square::before {
    display: inline-block;
    margin-right: 0.5rem;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-square' viewBox='0 0 16 16'> <path d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/> <path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/> </svg>");
    background-repeat: no-repeat;
}

.bi-eyeglasses::before {
    display: inline-block;
    margin-right: 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-eyeglasses' viewBox='0 0 16 16'%3E%3Cpath d='M4 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4m2.625.547a3 3 0 0 0-5.584.953H.5a.5.5 0 0 0 0 1h.541A3 3 0 0 0 7 8a1 1 0 0 1 2 0 3 3 0 0 0 5.959.5h.541a.5.5 0 0 0 0-1h-.541a3 3 0 0 0-5.584-.953A2 2 0 0 0 8 6c-.532 0-1.016.208-1.375.547M14 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
/*
Sortable List
*/
.sortable-list-item-disabled {
    background-color: #ced4da;
}

    .sortable-list-item-disabled .bb-sortable-list-handle {
        visibility: hidden;
    }
/* Conteneur SearchBuilder en mode bulle */
.sb-bubble {
    min-width: 380px;
    max-width: 520px;
    width: auto;
}
/* Pour éviter que péter le layout du header */
.dtsb-searchBuilder {
    margin-bottom: 0;
}

.cell-warning {
    background-color: #ffe5cc !important;
}

.cell-danger {
    background-color: rgba(255, 0, 0, 0.20) !important;
    border-left: 4px solid var(--bs-danger);
    font-weight: var(--enp-font-weight-medium);
}

td.hasNotes, th.hasNotes {
    width: 32px;
    max-width: 32px;
    text-align: center;
}

th.no-reorder {
    pointer-events: none !important;
    background: #f4f4f4;
}

.notes-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.notes-popup {
    width: min(900px, 94vw);
    max-height: 85vh;
    max-height: 85dvh;
    background: #fff;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.notes-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e7e7e7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notes-close {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

.notes-body {
    padding: 12px 16px;
    overflow: auto;
}

.notes-footer {
    padding: 12px 16px;
    border-top: 1px solid #e7e7e7;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

td.no-edit {
    background: #f7f7f7;
    color: #555;
}

#admin-managefield-grid {
    overflow-x: auto;
}

    #admin-managefield-grid thead tr[data-amf-group="1"] th.amf-group-spacer {
        background: transparent !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #dee2e6 !important;
    }

    #admin-managefield-grid table {
        table-layout: fixed; /* stabilité des largeurs */
    }

    #admin-managefield-grid th,
    #admin-managefield-grid td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        #admin-managefield-grid th .col-resizer:hover {
            background: rgba(255,255,255,0.3);
        }
    /* Centre horizontalement et verticalement TOUTES les colonnes à checkbox du grid */
    #admin-managefield-grid th,
    #admin-managefield-grid td {
        vertical-align: middle;
    }

        #admin-managefield-grid th:has(input[type="checkbox"]),
        #admin-managefield-grid td:has(input[type="checkbox"]) {
            text-align: center;
        }
/* Fallback si :has() n'est pas supporté : on force le centrage via table */
@supports not (selector(:has(*))) {
    #admin-managefield-grid table {
        /* On s'assure que le centrage fonctionne même sans :has() */
    }

    #admin-managefield-grid th,
    #admin-managefield-grid td {
        /* si tu veux restreindre le centrage uniquement aux colonnes checkbox,
    passe à l'option 2 ci-dessous pour cibler via une classe utilitaire */
    }
}
/* Conteneur encadrant le tableau */
.table-frame {
    border: 1px solid #dee2e6; /* bordure légère bootstrap-like */
    border-radius: .5rem; /* angles arrondis */
    padding: .75rem; /* espace intérieur */
    background: #fff; /* fond blanc pour contraste */
    box-shadow: 0 1px 2px rgba(0,0,0,.03); /* ombre subtile */
    overflow: auto; /* si la table dépasse, scroll propre */
}
/* Applique une min-width cohérente à la colonne Champ (3 colonne) */
#admin-managefield-grid thead tr th:nth-child(3),
#admin-managefield-grid tbody tr td:nth-child(3) {
    min-width: 220px; /* ajuste à 240/260px si besoin */
}
/* Stable même si du texte long arrive : */
#admin-managefield-grid .col-champ {
    min-width: 220px;
    display: inline-block; /* évite les retours à la ligne forcés */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
/*************************************
**          FIN A trier             **
**************************************/

/*****************************************
**      Disposition Fiche detaillée     **
**      Doit rester en fin de fichier   **
******************************************/
/* Program form : force hauteur restante et corrige overflow dans enfants flex */
.Program-form {
    /* hauteur disponible : prend en compte header/footer */
    height: calc(100vh - var(--enp-header-and-footer-height)); /* fallback */
    height: calc(100dvh - var(--enp-header-and-footer-height));
    display: flex; /* redondant si on utilise déjà d-flex, mais garde la sécurité */
    flex-direction: column;
    min-height: 0;
}
    /* Permet aux .content enfants en flex de gérer correctement l'overflow */
    .Program-form .content {
        min-height: 0;
    }
/* Permet au composant blazor Tabs d'occuper toute la hauteur strictement afin d'activer le scroll */
.tabs-scroll > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
}
/* Activation du scoll dnas les contenu des tabs */
.tabs-scroll div.tab-content {
    overflow-x: hidden; /* s'arranger pour ne plus avoir d'overflow et retirer cette ligne */
    overflow-y: auto;
}


/*****************************************
**      Disposition Gestion des         **
**            utilisateurs              **
******************************************/
.grid-scroll > .table-responsive {
    height: 70vh !important; 
    height: 70dvh !important;
}


.grid-scroll .bb-table-sticky > thead > tr:nth-child(2) > th {
    top: 28px !important;
    background-color: var(--enp-color-primary-20);
}