application_neo4j/static/css/style.css

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

/* Explicit sizing and minimum widths avoid engine-specific flexbox
 * expansion differences (notably between Blink and Gecko). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
}

.legacy-browser-warning {
  display: none;
  margin: 0;
  padding: 0.75rem 1rem;
  color: #664d03;
  background: #fff3cd;
  border-bottom: 1px solid #ffecb5;
  font-weight: 600;
  text-align: center;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

.row > *,
.card,
.card-body,
.flex-grow-1 {
  min-width: 0;
}

.navbar .container {
  column-gap: 1rem;
  row-gap: 0.75rem;
}

.navbar-brand {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

.navbar-brand small,
#suggestions-list li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.navbar-actions {
  min-width: 0;
  margin-left: auto;
}

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

#floating-legend {
  max-width: calc(100% - 1rem);
}

/* ===================================================================
 *  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)
 * =================================================================== */
/* A single, deterministic wrapping policy replaces the previous contradictory
 * normal/nowrap declarations. */
#descendance-table th, #descendance-table td,
#ascendance-table th, #ascendance-table td,
#train-table th, #train-table td,
#graph-models-table th, #graph-models-table td {
    white-space: nowrap;
    vertical-align: middle;
}

#descendance-table th,
#ascendance-table th,
#train-table th {
    min-width: 120px;
}

#descendance-table th:first-child, #descendance-table td:first-child,
#ascendance-table th:first-child, #ascendance-table td:first-child,
#train-table th:first-child, #train-table td:first-child,
#graph-models-table th:first-child, #graph-models-table td:first-child {
    min-width: 200px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.table-responsive,
div.dataTables_wrapper,
div.dataTables_wrapper div.dataTables_scroll {
  width: 100%;
  max-width: 100%;
}

.table-responsive,
div.dataTables_wrapper div.dataTables_scrollBody {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

div.dataTables_wrapper div.dataTables_scrollHeadInner {
  min-width: 100%;
}

div.dataTables_wrapper table.dataTable {
  margin-left: 0 !important;
  margin-right: 0 !important;
  table-layout: auto;
}

/* Personnalisation de l'input de recherche de DataTables pour qu'il ressemble à un champ Bootstrap */
div.dataTables_wrapper div.dataTables_filter input {
  max-width: 100%;
  border: 1px solid #dee2e6;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  border-radius: var(--bs-border-radius, 0.375rem);
  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);
  max-width: 100%;
  overflow-x: hidden;
  border-radius: 0.375rem;
  border-radius: var(--bs-border-radius, 0.375rem);
  background-color: #f8f9fa;
  background-color: var(--bs-light, #f8f9fa);
}
#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-primary {
  background-color: #6a11cb; 
  border-color:#6a11cb;    
}

.btn-outline-primary {
  color: #6a11cb;
  border-color: #6a11cb;
}

.btn-outline-primary:hover {
  color: #fff;
  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);
}

@media (max-width: 575.98px) {
  .navbar-brand,
  .navbar-actions {
    flex: 1 1 100%;
    margin-right: 0;
  }

  .navbar-actions {
    justify-content: flex-start !important;
  }

  #sigma-container {
    height: 70vh;
    min-height: 420px;
  }

  div.dataTables_wrapper div.dataTables_filter label {
    display: block;
    width: 100%;
  }

  div.dataTables_wrapper div.dataTables_filter input {
    width: 100%;
    margin: 0.375rem 0 0;
  }
}