/* 
####################################  
############ GENERAL ###############
#################################### 
*/

/* HEADER */
/* Style appliqué à l'élément <header>. */
header {
    background-color: #8c6081; /* Applique une couleur de fond violette pour le header. */
    position: sticky; /* Rend le header collant pour qu'il reste visible en haut lors du défilement. */
    top: 0px; /* Pas d'espacement en haut */
    z-index: 10; /* Assure que le header reste au-dessus des autres éléments. */
}


/* BANNIERE */

.banniere-repetee {
    height: 200px; /* ou moins si tu veux une bannière plus fine */
    background-image: url('/static/editef/img/bandeau.jpg');
    background-repeat: repeat-x; /* Répète horizontalement */
    background-position: top center;
    background-size: auto; /* Garde la hauteur, répète en largeur */
    position: relative;
}

.bg-body-tertiary {
    border-bottom: 3px solid #edeeef;  /* Ajoute une bordure inférieure de 3px avec une couleur gris clair. */
    margin-bottom: 5px; /* Ajoute un espacement en dessous pour que le header soit visible à travers une fine ligne de couleur. */
    background-color: transparent !important; 
}

/* NAVIGATION */
.nav-item {
    margin-right: 50px; /* Ajoute un espacement horizontal entre les items de navigation */
}
.navbar .navbar-nav > li {
    display: inline-block;
    position: relative;
}

.navbar .navbar-nav > li a {
    color: white;
    border-radius: 4px;
    transition: all 0.3s ease;
    margin: 0 6px;
    
}

/* Effet au survol */
.navbar-nav > li:hover > a {
    background: rgba(255, 255, 255, 0.15); /* cadre translucide */
    backdrop-filter: blur(4px); /* optionnel : effet glass élégant */
    color: #fff;
    border-radius: 6px;
}

.navbar .navbar-nav > li .dropdown-menu li > a {
    color: black;
}

 
/* Force tous les UL de la navbar à être des flex et centrer verticalement */
.nav-align, 
#navbar .navbar-nav {
    display: flex !important;
    align-items: center !important;
}

/* Force tous les liens à avoir le même padding vertical et alignement interne */
.navbar-nav .nav-link {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
}

.custom-navbar {
    margin-top: -40px;  /* monte la navbar sur la bannière */
    box-shadow: none !important;  /* supprime l’ombre si Bootstrap en ajoute */
}

.custom-navbar, .custom-navbar>div {
    height: 30px;
    display: flex;              /* Active flexbox */
    align-items: center;        /* Centre verticalement */
    padding-top: 0;             /* Supprime les éventuels paddings de Bootstrap */
    padding-bottom: 0;
}

/* NAVIGATION PORTABLE */

.navbar-toggler {
    padding: 4px 8px;
    height: auto;
    border: 2px solid white;      /* contour blanc optionnel */
    background-color: transparent;
    transform: translateY(-20px); /* ton positionnement actuel */
}

/* icône blanche Bootstrap */
.navbar-toggler-icon {
    filter: invert(100%) brightness(100%) contrast(100%);
}

@media (max-width: 992px) {  /* ou 768px selon ton thème */
      /* Conteneur du menu burger */
    .navbar-collapse {
        position: absolute;
        top: 100%;     /* juste sous le hamburger */
        left: 0;       /* aligné à gauche de la navbar */
        width: auto;   /* largeur automatique selon contenu */
        max-width: 300px;
        background: rgba(0,0,0,0.8);
        backdrop-filter: blur(6px);
        border-radius: 8px;
        padding: 10px 0;
    }

    /* UL du menu mobile */
    .navbar-collapse .navbar-nav {
        display: block !important;    /* bloque la largeur totale du parent */
        width: 100%;                  /* prend toute la largeur du conteneur */
        text-align: left !important;  /* texte à gauche */
    }

    /* Liens */
    .navbar-collapse .navbar-nav > li > a {
        display: block !important;
        width: 100% !important;       /* lien prend toute la largeur */
        text-align: left !important;
        padding: 12px 20px !important;
        color: white !important;
    }

    /* Dropdowns mobile */
    .navbar-collapse .dropdown-menu {
        position: static;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(6px);
        border: none;
        min-width: 200px;
        text-align: left !important;
    }

    .navbar-collapse .dropdown-menu a {
        color: white !important;
        text-align: left !important;
    }

    .icon-small {
        font-size: 1.7rem;
        color: white !important;
        padding: 0px;
        margin: 0px;
    }

    .nav-link {
        color: white !important;
    }

    .lang-button, .lang-buttons {
        color: white !important;
        padding: 0px; 
        margin: 0px;
    }
}



/* BODY */
/* Définit un layout Flexbox pour le body, permettant une structure flexible. */
body {
    display: flex; /* Applique Flexbox pour organiser les enfants (<header>, <main>, <footer>). */
    flex-direction: column; /* Dispose les éléments verticalement (en colonne). */
    min-height: 100vh; /* Assure que le body occupe au moins toute la hauteur de la fenêtre. */
    margin: 0; /* Supprime les marges par défaut du body pour une meilleure gestion des dimensions. */
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Ancienne valeur editef */
	font-size: 14px; /* Ancienne valeur editef */
	color:#000000; /* Ancienne valeur editef */
}

 

/* MAIN */
/* Indique que l'élément <main> doit occuper tout l'espace disponible restant. */
main {
    flex: 1; /* L'élément grandit pour remplir tout l'espace disponible entre le header et le footer. */
}

/* FOOTER */
/* Style appliqué à l'élément <footer>. */
footer {
    background-color: white; /* Applique une couleur de fond blanche. */
    color: black; /* Définit la couleur du texte en noir. */
    text-align: center; /* Centre le contenu horizontalement. */
    padding: 10px; /* Ajoute un espace intérieur de 10px autour du contenu. */
    height: 70px; /* Définit la hauteur du footer à 80px. */
}

/* Mentions légales dans le footer. */
#mentions-footer {
    font-size: 15px; /* Définit la taille de la police pour les mentions légales. */
    margin-top: 20px; 
}
   
/* Barre de navigation dans le footer. */
#footer-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(5px, 2vw, 35px);
}

/* Écrans larges */
@media (min-width: 1600px) {
    #footer-logos {
        gap: 70px;
    }
}

/* Écrans petits */
@media (max-width: 1300px) {
    #footer-logos {
        gap: 20px;
    }
}

#footer-logos img {
    height: clamp(20px, 3vw, 35px);
    width: auto;
}

/* Écrans larges */
@media (min-width: 1600px) {
    #footer-logos img {
        height: clamp(20px, 3vw, 45px);
        width: auto;
    }
}

/* Écrans petits */
@media (max-width: 1300px) {
    #footer-logos img {
        height: clamp(20px, 3vw, 25px);
        width: auto;
    }
}

#navbar_footer {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 2px solid #edeeef;
    background: white;
}


/* LANGUAGE */

ul .langue {
    list-style: none; /* Supprime les puces pour toute la liste */
    padding: 0;       /* Supprime le padding par défaut */
    margin: 0;        /* Supprime le margin par défaut */
}

.lang-buttons {
    display: flex;
    gap: 10px; /* Espace entre les boutons */
    align-items: center;
    font-size: 18px !important; 
    margin-right: 10px !important;
    color: white;
}

.lang-button {
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.6; /* Opacité réduite pour les langues non sélectionnées */
    color: white;
}

.button_en {
    color: black;
}

.lang-button:hover {
    background: rgba(255, 255, 255, 0.15); /* cadre translucide */
    backdrop-filter: blur(4px); /* optionnel : effet glass élégant */
    color: #fff;
    border-radius: 6px;
}

.button_en:hover {
    color: black;
}

.button_en:hover {
    color: black;
}

.lang-button.active {
    opacity: 1; /* Pleine opacité pour la langue active */
    font-weight: bold; /* Texte en gras pour mettre en évidence */
    transform: scale(1.1); /* Agrandissement léger */
    color: white;
}

.button_en.active {
    color: black;
}

.icon-small {
    font-size: 1.7rem;
    color: white;
}

/*===========================================================================================================================*/
/*===========================================================================================================================*/


/* LIENS HYPERTEXTE */

a {
    color: #8c6081; 
    text-decoration: none; 
    font:bold;
}
a:visited {
    color: #8c6081; 
    text-decoration: none;
}
    
a:hover {
    color: #000000;	
    text-decoration: none;
}

/*===========================================================================================================================*/
/*===========================================================================================================================*/

/* BOUTON DE NAVIGATION ALPHABETIQUE */

 /* Personnalisation des boutons alphabétiques */
 .btn-group .btn {
    margin: 5px;  /* Espacement entre les boutons */
    font-size: 1rem;  /* Taille de police uniforme pour les boutons */
    border-radius: 10px; /* Coins arrondis pour un effet plus doux */
    border: 2px solid transparent; /* Bordure par défaut transparente */
}

.btn-custom {
    background-color: #845f7e; /* Vert */
    color: white;  /* Texte en blanc */
    border: 2px solid black;  /* Bordure noire */
}

 
.btn-group .btn.active {
    background-color: #5f8461;  /* Couleur de fond bleue lorsque le bouton est actif */
    color: white;  /* Couleur du texte en blanc */
 
}

.btn-group .btn:hover {
    background-color:#5f8461;  /* Couleur de fond au survol des boutons */
    color: white;  /* Couleur du texte en blanc au survol */
}

/* Changer le style des bordures quand elles sont sélectionnées (par exemple en "dashed") */
.btn-custom.dashed {
    border: 2px dashed #5f8461; /* Bordure en pointillé verte */
}

/* Forcer les liens dans les boutons à être toujours blancs, même visités */
a.btn-custom,
a.btn-custom:visited,
a.btn,
a.btn:visited {
    color: white !important;
}



 
 

/* Pagination numérique */
.page-link {
    color: black

}

.page-link:hover {
    color: black

}
.active > .page-link {
    background-color: #af92ab; 
    border-color: black;

}


/* Bouton de filtre */
.btn_filter, .btn_filter:hover {
background-color: #845f7e;
border-color: black;
}

.form-check-input:checked {
    background-color: #845f7e;
    border-color: black;

}

/* Listes */
.custom-list {
    list-style-type: none; /* Supprime les puces */
    margin: 0;
    padding: 0;
}
 

/* Titres */
h1 {
    font-size: 2rem;
}

h3 {
     font-size: 1.5rem;
}





/* Le logo en haut à gauche */
.logo-top-left {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 60px; /* ajuste selon le visuel */
    width: auto;
}
/* 
################################### 
############ HOME BDD #############
################################### 
*/

.card-home {
    text-decoration: none; /* Supprime le soulignement du lien */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.img-home {
    max-width: 100%; /* S'assure que l'image est responsive */
    max-height: 150px;  
    margin-bottom: 15px; /* Ajoute un espace entre l'image et le texte */
}

.details-card {
    margin-top: 10px;
}

.card-title {
    font-size: 1.1rem; /* Taille du texte */
    color: #333; /* Couleur du texte */
}


/* 
#################################################
########## COLLAB/PARTENAIRES/LINKS #############
################################################# 
*/

.section  {
    cursor: pointer; /* Change le curseur au survol */
    margin-left: 20px; /* Ajustez la valeur si nécessaire */
    transition: transform 0.2s ease; /* Ajoute une animation au survol */
}

/* Effet au survol */
.section . {
    transform: scale(1.2); /* Agrandit légèrement l'icône au survol */
    color: #845f7e; /* Change la couleur de l'icône (Bootstrap blue) */
}


/* 
#######################################
####### CHAMPS AUTOCOMPLETION #########
####################################### 
*/

.autocomplete_input {
    border: 2px solid black; /* Bordure noire */
    box-shadow: none; /* Pas d'ombre initialement */
    transition: box-shadow 0.3s ease, border-color 0.3s ease; /* Animation douce */
}

.autocomplete_input:focus {
    border-color: black; /* Garder la bordure noire */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Ombre lors de la mise en évidence */
    outline: none; /* Retirer l'effet par défaut de mise en évidence */
}


.card-header {
    background-color: white;
    border-color: #8c6081; 
}



/* Treeview */
#tree-container {
    width: 100%;
    overflow-y: hidden; /* Permet de scroller si l'arbre est plus grand */
  }
  
  .jstree-default .jstree-clicked {
    background: white !important;
    border-radius: 3px !important;
    box-shadow: none !important;
  }


/* 
######################################
####### AFFICHAGES COMPLEXES #########
######################################
*/

/*
Institutions - Lieux 
Personnes - Statuts
*/


/* Supprime les marges du ul */
.object-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

/* Mode GRID quand plusieurs lieux */
.object-item-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: .75rem;
    padding: 4px 0;
}

/* Mode normal lorsqu'un seul lieu */
.object-item-normal {
    padding: 4px 0;
}

/* Gérer les cellules */
.object-item-grid .cell {
    white-space: nowrap;
}


/*
Personnes - Relations familiales 
*/


.relations-table {
    list-style: none;
    margin: 0;
    padding: 0;
    display: table;       /* simule une table */
    width: auto;          /* laisse la table s’adapter au contenu */
    table-layout: auto;   /* largeur des colonnes auto selon le contenu */
}

.relation-row {
    display: table-row;
}

.relation-name, .relation-persons {
    display: table-cell;
    padding-top: 2px;
    padding-right: 10px; 
    padding-bottom: 2px;
    vertical-align: top;
}

.relation-persons span {
    display: block; /* chaque nom sur sa ligne */
}