application_neo4j/static/css/style.css

/* ===================================================================
 *  STYLE GLOBAL & GRAPHIQUE SIGMA
 * =================================================================== */

 #sigma-container {
  width: 100%;
  height: 600px; /* Un peu plus de hauteur pour un meilleur confort */
  border: 1px solid var(--bs-border-color); /* Variable Bootstrap */
  margin-top: 1rem;
  border-radius: var(--bs-border-radius); /* Variable Bootstrap */
  background-color: var(--bs-light-bg-subtle); /* Fond légèrement teinté */
}

/* ===================================================================
 *  STYLE DES CARTES "HIGHLIGHTS"
 * =================================================================== */

/* Applique une hauteur de 100% aux cartes dans les colonnes pour un alignement parfait */
.genealogy-column .card {
  height: 100%;
}

/* Style spécifique pour la carte centrale du modèle recherché */
.card-searched {
  border: 2px solid var(--bs-primary); /* Bordure primaire de Bootstrap */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Ombre plus prononcée */
  background-color: var(--bs-light); /* Fond clair Bootstrap */
}



/* ===================================================================
 *  STYLE DES TABLES (DATATABLES)
 * =================================================================== */
/* Permet au texte de revenir à la ligne naturellement */
#descendance-table th, #descendance-table td,
#ascendance-table th, #ascendance-table td {
    white-space: normal; /* <-- La correction clé ! */
    word-wrap: break-word; /* Force le retour à la ligne des mots longs */
    vertical-align: middle; /* Garde le centrage vertical */
}

/* On peut donner une largeur minimale aux colonnes pour garder une bonne structure */
#descendance-table th, #ascendance-table th {
    min-width: 120px; /* Ajustez cette valeur selon vos besoins */
}

/* Cas spécifique pour les colonnes potentiellement longues comme le nom du modèle */
#descendance-table th:first-child, #ascendance-table th:first-child {
    min-width: 200px;
}

/* Empêche le texte de se couper dans les cellules, force le défilement horizontal */
#descendance-table th, #descendance-table td,
#ascendance-table th, #ascendance-table td {
    white-space: nowrap;
    vertical-align: middle; /* Centrage vertical pour un look plus propre */
}

/* Personnalisation de l'input de recherche de DataTables pour qu'il ressemble à un champ Bootstrap */
div.dataTables_wrapper div.dataTables_filter input {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.375rem 0.75rem;
  margin-left: 0.5em;
}

/* Amélioration de la visibilité des flèches de tri de DataTables */
div.dataTables_wrapper .table thead th.sorting::before,
div.dataTables_wrapper .table thead th.sorting::after {
    opacity: 0.4;
    color: var(--bs-body-color);
}

div.dataTables_wrapper .table thead th.sorting_asc::after,
div.dataTables_wrapper .table thead th.sorting_desc::before {
    opacity: 1;
    color: var(--bs-primary); /* Couleur primaire de Bootstrap */
}

div.dataTables_wrapper .table thead th.sorting_asc::before,
div.dataTables_wrapper .table thead th.sorting_desc::after {
    opacity: 0.2;
}


/* ===================================================================
 *  STYLE DES COMPOSANTS D'INTERFACE
 * =================================================================== */

/* NOTE: La plupart des classes de layout comme .search-controls-container, .depth-controls
 * ont été supprimées car la mise en page est maintenant gérée par la grille et
 * les utilitaires Flexbox de Bootstrap directement dans le HTML (row, col, d-flex, gap-3).
 */

/* Style pour la liste de suggestions de l'autocomplétion */
/* Le HTML utilise maintenant <ul class="list-group">, ce CSS est donc obsolète. */
/* Si vous n'utilisez pas list-group, ce style peut être adapté. */
#suggestions-list {
  /* Ce style est pour si vous utilisez une <ul> simple.
     Si vous avez bien une <ul class="list-group">, vous pouvez supprimer ce bloc. */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-light);
}
#suggestions-list li:hover {
  background-color:  #94bfeb; ;
}


/* Légendes du graphe */

.legend-item {
  /* Cette classe est maintenant principalement utilisée pour le JS (clic) */
  cursor: pointer;
  transition: background-color 0.2s;
}
.legend-item:hover {
  background-color: var(--bs-light-bg-subtle);
}
.legend-item.active {
  font-weight: bold;
  background-color: var(--bs-primary-bg-subtle);
}

/* Le style de la puce colorée reste le même */
.legend-color {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 0.75rem;
  flex-shrink: 0;
}
.legend-color.edge {
  height: 4px;
  width: 20px;
  border-radius: 2px;
}


/* ===================================================================
 *  CONNECTEURS VISUELS POUR LA VUE GÉNÉALOGIQUE
 *  (Cette logique est indépendante du framework et n'a besoin que de la mise à jour des couleurs)
 * =================================================================== */

.genealogy-row {
  position: relative;
}

/* On utilise la classe de la colonne centrale pour attacher les connecteurs */
#center-column {
  position: static; /* Important pour que les connecteurs ne soient pas piégés dedans */
}

/* Média query pour n'afficher les connecteurs que sur les grands écrans (lg et plus) */
@media (min-width: 992px) {
  /* Connecteur vers l'ascendance (gauche) */
  #center-column::before {
      content: '';
      position: absolute;
      z-index: -1;
      top: 100px; /* Ajustez cette hauteur pour aligner avec vos cartes */
      
      left: 20%;  /* Commence à 20% de la largeur */
      right: 60%; /* S'arrête à 40% de la largeur */

      height: 3px;
      background-color: var(--bs-secondary-border-subtle); /* Couleur Bootstrap subtile */
      border-radius: 3px;
  }

  /* Connecteur vers la descendance (droite) */
  #center-column::after {
      content: '';
      position: absolute;
      z-index: -1;
      top: 100px; /* Même hauteur */
      
      left: 60%;
      right: 20%;
      
      height: 3px;
      background-color: var(--bs-secondary-border-subtle);
      border-radius: 3px;
  }
}

/* Style de base pour la carte interactive */
.card-interactive {
  /* Ajoute une transition douce pour tous les changements de style (couleur, ombre...) */
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}


.form-check-input:checked {
  background-color: #6a11cb; /* Bleu primaire par défaut */
  border-color:#6a11cb;     /* Bleu primaire par défaut */
}

/* Change la couleur de fond des cases à cocher lorsqu'elles sont cochées */
.btn {
  background-color: #6a11cb; 
  border-color:#6a11cb;    
}

.stretched-link{
color: #6a11cb; 
}
/* Style appliqué LORSQUE LA SOURIS SURVOLE la carte */
.card-interactive:hover {
  cursor: pointer; /* Le curseur change en main, indiquant un clic possible */
  background-color: #94bfeb; /* Une couleur de fond légèrement grise (standard Bootstrap) */
  
  /* Optionnel : ajoute une ombre subtile pour faire "ressortir" la carte */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.card-recherche p:not(.text-muted) {
  color: #212529 !important; /* Couleur noire standard de Bootstrap */

}

.card-recherche{
  border-color:#6a11cb;
}

.card-recherche-header{
  border-color:#6a11cb;
  background-color: #6a11cb; 

}
.on-top {
  position: relative;
  z-index: 2; /* Doit être supérieur à 1 (le z-index du stretched-link) */
}

.beta {
  background-color: #6a11cb;
}

.alpha {
  background-color: #b476f7;
  color : #000000;
}

main {
  margin-bottom: 5rem; /* ajuste la valeur selon tes besoins */
}

#floating-legend .legend-color { width: 1em; height: 1em; display: inline-block; border-radius: 2px; }
#floating-legend .legend-color.edge { border-radius: 0; height: 0.25em; transform: translateY(-0.35em); }

.btn-modern {
  min-width: 200px;
  padding: 14px 24px;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, #6a11cb, #f8a5f8);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  text-align: center;
  text-decoration: none;
}

.btn-modern:hover {
  background: linear-gradient(135deg, #5a0fbf, #1d63e1);
  transform: translateY(-3px);
}