body {
    font-family: 'Roboto', sans-serif; 
    /*background-color: #f4f6f9;  Couleur de fond claire */
    color: #333; /* Couleur de texte par défaut */
}


a {
    color: #00509E; /* Couleur personnalisée pour les liens */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
    color: #00509E; 
}

.ti{
    font-size: 1rem;
}
.badge {
    color: #fff;
}

/* style de input de type text*/
input[type="text"], input[type="email"], input[type="password"] {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 10px;
    width: 100%;
    box-sizing: border-box; /* Assure que le padding est inclus dans la largeur totale */
    height: 40px; /* Hauteur uniforme pour les champs de saisie */
    font-size: 16px; /* Taille de police uniforme */
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
    border-color: #00509E; /* Couleur de bordure au focus */
    box-shadow: 0 0 5px rgba(0, 80, 158, 0.5); /* Ombre légère au focus */
}

/* style de input de type search*/
input[type="search"] {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 10px;
    width: 100%;
    box-sizing: border-box; /* Assure que le padding est inclus dans la largeur totale */
    height: 40px; /* Hauteur uniforme pour les champs de saisie */
    font-size: 16px; /* Taille de police uniforme */
}
input[type="search"]:focus {
    border-color: #00509E; /* Couleur de bordure au focus */
    box-shadow: 0 0 5px rgba(0, 80, 158, 0.5); /* Ombre légère au focus */
}

/* style de input de type select*/
select {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 10px;
    width: 100%;
    box-sizing: border-box; /* Assure que le padding est inclus dans la largeur totale */
    height: 40px; /* Hauteur uniforme pour les champs de saisie */
    font-size: 16px; /* Taille de police uniforme */
}
select:focus {
    border-color: #00509E; /* Couleur de bordure au focus */
    box-shadow: 0 0 5px rgba(0, 80, 158, 0.5); /* Ombre légère au focus */
}

/* style de input de type select quand  on utilise select2*/
.select2-container--default .select2-selection--single {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 10px;
    width: 100%;
    box-sizing: border-box; /* Assure que le padding est inclus dans la largeur totale */
    height: 40px; /* Hauteur uniforme pour les champs de saisie */
    font-size: 16px; /* Taille de police uniforme */
}
.select2-container--default .select2-selection--single:focus {
    border-color: #00509E; /* Couleur de bordure au focus */
    box-shadow: 0 0 5px rgba(0, 80, 158, 0.5); /* Ombre légère au focus */
}

/* style de input de type textarea*/
textarea {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 10px;
    width: 100%;
    box-sizing: border-box; /* Assure que le padding est inclus dans la largeur totale */
    height: 100px; /* Hauteur uniforme pour les champs de saisie */ 
    font-size: 16px; /* Taille de police uniforme */
}
textarea:focus {
    border-color: #00509E; /* Couleur de bordure au focus */
    box-shadow: 0 0 5px rgba(0, 80, 158, 0.5); /* Ombre légère au focus */
}
/* style de input de type file*/
input[type="file"] {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 10px;
    width: 100%;
    box-sizing: border-box; /* Assure que le padding est inclus dans la largeur totale */
    height: 40px; /* Hauteur uniforme pour les champs de saisie */
    font-size: 16px; /* Taille de police uniforme */
}
input[type="file"]:focus {
    border-color: #00509E; /* Couleur de bordure au focus */
    box-shadow: 0 0 5px rgba(0, 80, 158, 0.5); /* Ombre légère au focus */
}

/* style de input de type date*/
input[type="date"] {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 10px;
    width: 100%;
    box-sizing: border-box; /* Assure que le padding est inclus dans la largeur totale */
    height: 40px; /* Hauteur uniforme pour les champs de saisie */
    font-size: 16px; /* Taille de police uniforme */
}
input[type="date"]:focus {
    border-color: #00509E; /* Couleur de bordure au focus */
    box-shadow: 0 0 5px rgba(0, 80, 158, 0.5); /* Ombre légère au focus */
}

/* améliorer style de .form-label de css boostrap5*/
.form-label {
    font-size: 16px; /* Taille de police uniforme */
    color: #333; /* Couleur de texte par défaut */
}

/* améliorer style de .nav-tabs de css boostrap5*/
.nav-tabs {
    border-bottom: 2px solid #00509E; /* Couleur de la bordure inférieure */
}
.nav-tabs .nav-link {
    border: 1px solid #e9ecef; /* Bordure des onglets */
    border-radius: 8px 8px 0 0; /* Coins arrondis en haut */
    margin-bottom: -1px; /* Pour que la bordure inférieure soit visible */
    color: #00509E; /* Couleur des liens */
}
.nav-tabs .nav-link.active {
    background-color: #00509E; /* Couleur de fond de l'onglet actif */
    color: #fff; /* Couleur du texte de l'onglet actif */
}
.nav-tabs .nav-link:hover {
    background-color: #e8f3ff; /* Couleur de fond au survol */
    color: #00509E; /* Couleur du texte au survol */
}

/* style les composant label*/
label {
    font-size: 16px; /* Taille de police uniforme */
    color: #333; /* Couleur de texte par défaut */
}
/* style les composant button*/
button, .btn {
    border-radius: 8px; /* Coins arrondis */
    padding: 10px 20px; /* Espacement interne */
    font-size: 16px; /* Taille de police uniforme */
    color: #fff; /* Couleur du texte */

    border: none; /* Pas de bordure par défaut */
    cursor: pointer; /* Curseur pointeur au survol */
}

/* style les composants span*/
span {
    font-size: 16px; /* Taille de police uniforme */
    /*color: #333;  Couleur de texte par défaut */
}

/* style les composants <a> qui sont dans le <td>, on ajoute un espace en bas pour eviter le collage*/
td a {
    margin-bottom: 10px; /* Espace en bas pour éviter le collage */
}

/* style de thead */
thead {
    background-color: #00509E; /* Couleur de fond de l'en-tête */
    color: #fff; /* Couleur du texte de l'en-tête */
    height: 50px; /* Hauteur de l'en-tête */
    font-size: 16px; /* Taille de police uniforme */
}

/* Style pour hover sur nav-link avec icône et titre */
.nav-link:hover {
    background-color: #e8f3ff; /* Couleur de fond au survol */
    color: #00509E; /* Couleur du texte au survol */
    transition: background-color 0.3s ease, color 0.3s ease; /* Animation pour une transition fluide */
}

.nav-link-icon:hover {
    color: #00509E; /* Couleur de l'icône au survol */
    transition: color 0.3s ease; /* Animation pour une transition fluide */
}

.nav-link-title:hover {
    color: #00509E; /* Couleur du titre au survol */
    transition: color 0.3s ease; /* Animation pour une transition fluide */
}



/* =========================
   Styles spécifiques au login
   ========================= */

/* Centrer verticalement et horizontalement le contenu de la page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Assure que le contenu occupe toute la hauteur de la fenêtre */
}

.login-container {
    width: 100%;
    padding: 2rem 0; /* Espacement vertical (à ajuster) */
}

.login-page .card-body {
    font-size: 16px; 
}


/* Optionnel : quelques ajustements pour les petits écrans */
@media (max-width: 576px) {
    .card.card-md {
        margin: 20px;
    }
}


/* =========================
   Styles spécifiques au structure de l'arbre
   ========================= */

    .tree {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .tree>li {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 8px;
        padding: 10px;
        background-color: #fff;
    }

    .tree li .d-flex {
        align-items: center;
    }

    .tree li .toggle-icon {
        margin-right: 8px;
        color: #0d6efd;
        font-size: 1.2rem;
    }

    .tree .tree-branch {
        margin-top: 8px;
        padding-left: 20px;
        border-left: 2px solid #e9ecef;
        display: none;
    }

    .tree .tree-branch.show {
        display: block;
    }

    /* Dropdowns de Tabler/Bootstrap (ajustement minimal) */
    .dropdown-menu {
        min-width: 150px;
        border-radius: 8px;
    }

    .dropdown-item:hover {
        background-color: #e8f3ff;
    }