/* Réinitialisation */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Hauteur cumulée fixe */
:root {
    --header-smartsag-height: 60px;
    --header-height: 120px;
    --tools-bar-height: 60px;
    
    
	 /* Texte */
  --color-text-default: #333333;        /* couleur générale du texte (#333) */

  /* Arrière-plans */
  --color-bg-default: #F8FAFC;          /* fond de page/body */
  --color-bg-alt: #E9F3FB;              /* sections alternées */
  --color-bg-alt2: #E0ECF8;             /* nav flottante par défaut */

  /* Blanc */
  --color-white: #FFFFFF;               /* blanc pur */

  /* Pied de page */
  --color-footer-bg: #88C4FF;           /* fond footer */
  --color-footer-text: #1C2834;         /* texte footer */

  /* En-tête */
  --color-header-bg: #1C2834;           /* fond header */
  --color-header-text: #FFFFFF;         /* texte header */

  /* Menu horizontal */
  --color-menu-item-bg: #88A3BD;        /* fond icônes menu */
  --color-menu-item-hover: orange;      /* hover (nommé CSS) */
  --color-menu-shadow: rgba(0, 0, 0, 0.2);

  /* Boutons génériques */
  --color-btn-default-bg: #34495E;      /* .main_btn, état normal */
  --color-btn-default-hover: #88C4FF;   /* .main_btn:hover */
  --color-btn-disabled-opacity: 0.5;    /* état disabled (opacity) */

  /* Boutons d’appel (CTA) */
  --color-cta-bg: #007BFF;              /* .special-btn a, .cta-button */
  --color-cta-hover-bg: #0056B3;        /* hover */

  /* Nav flottante */
  --color-fixed-nav-bg: rgba(0, 0, 0, 0.05);
  --color-fixed-nav-hover-bg: rgba(0, 0, 0, 0.15);
  --color-fixed-nav-btn-bg: #E0ECF8;
  --color-fixed-nav-btn-icon: #003366;
  --color-fixed-nav-btn-hover-bg: #D0E4F7;
  --color-fixed-nav-shadow: rgba(0, 0, 0, 0.1);

  /* Ombres */
  --shadow-default: rgba(0, 0, 0, 0.2);
  --shadow-hover: rgba(0, 0, 0, 0.3);    /* pour hover intensif */
  
  
}

/* Layout général */
body, html {
    height: 100%;
    font-family: 'Arial', sans-serif;
    color: #333;
    background-color: #F8FAFC;

}

/* Main content : commence après header + menu + title + search */
.main-layout {
    margin-top: calc(var(--header-smartsag-height));
    padding-bottom: 40px;
    min-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}



.request-layout {
    margin-top: calc(var(--header-smartsag-height) + 30px); /* 60 + 60 = 120px */
    padding-bottom: 40px;
    min-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}
/* Footer */
footer.footer {
    height: 30px;
    background-color: #88c4ff;
    text-align: center;
    color: #1C2834;
    line-height: 30px;
    position: flex;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}

/* Header compact : nom + menu */
header.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: #1c2834;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1000;
}

/* Header compact : nom + menu */
header.top-bar-smartsag {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-smartsag-height);
    background-color: #1c2834;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1000;
}

/* Nom du site */
.site-name {
    font-size: 24px;
    font-weight: bold;
}

/* Menu horizontal */
nav.top-menu ul {
    list-style: none;
    display: flex;
    gap: 15px;
}

nav.top-menu ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #88a3bd;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

nav.top-menu ul li a img {
    max-width: 100%;
    height: auto;
}

nav.top-menu ul li a:hover {
    background-color: orange;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.main_btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #34495e;
    color: white;
    text-decoration: none;
    margin: 10px 0;
}
/* style pour indiquer visuellement le désactivé */
#goSAGA.disabled {
	display: inline-block;
    padding: 10px 20px;
    background-color: #34495e;
    color: white;
    text-decoration: none;
    margin: 10px 0;
  opacity: .5;
  pointer-events: none;
}
.main_btn:hover {
    background-color: #88c4ff;
}

/*page d'accueil*/
/* === SECTIONS === */
.section {
  min-height: 100vh;
  width: 100%;
  padding: 4rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  background-color: #F8FAFC;
}

.section.alt {
  background-color: #E9F3FB;
}








.content {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  background: white;
  padding: 2rem 2.5rem;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.contentAdmin {
	max-width: 800px;
	min-height: 100vh;
  	width: 100%;
  	margin: 0 auto;
  	margin-top: calc(var(--header-height));
}
/* === Navigation flottante === */

.fixed-nav {
	position: fixed;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 1000;
}

.nav-btn {
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: background 0.3s ease;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Ajustement du contenu flèche */
.nav-icon {
  font-size: 1.8rem;
  line-height: 1;
  display: inline-block;
  transform: translateY(-5px); /* ← Ajuste ici pour centrer la flèche */
}

.nav-btn:hover {
	background: rgba(0, 0, 0, 0.15);
}

.fixed-nav .nav-btn {
  background: #E0ECF8;
  color: #003366;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nav-btn:hover {
  background: #d0e4f7;
}

.nav-icon {
  transform: translateY(-2px);
}

.nav-btn:hover {
	background: rgba(0, 0, 0, 0.15);
}

/* === Animation d'apparition === */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
	opacity: 1;
	transform: translateY(0);
}

/* === Boutons === */
.special-btn {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.special-btn a {
  display: inline-block;
  background: #007BFF;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.special-btn_log a, .special-btn_log button{
	all:unset;
  display: inline-block;
  background: #007BFF;
  color: white;
  text-decoration: none;
  padding: 4px 4px;
  border-radius: 5px;
  font-size: 1rem;
  transition: background 0.3s ease;
  cursor: pointer; 
}

.special-btn a:hover, .special-btn_log a:hover,.special-btn_log button:hover {
  background: #0056b3;
}
.cta-button, .special-btn a {
  background: #007BFF;
  color: white;
  text-decoration: none;
  padding: 0.9rem 2rem;
  border-radius: 30px;
  font-weight: 500;
  font-size: 1rem;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover, .special-btn a:hover {
  background: #0056b3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* === H1/H2 === */
/*.main-layout_silho h1 {
  font-size: 2.6rem;
  margin-bottom: 1.5rem;
  color: #1C2834;
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}

.main-layout_silho h1::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: #88C4FF;
  border-radius: 2px;
}*/
h1 {
  font-size: 2.6rem;
  margin-bottom: 1.5rem;
  color: #1C2834;
}

.subtitle {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 2rem;
  color: #333;
}

.subtitle-fr {
  display: block;
  margin-top: 1rem;
  font-size: 1.1rem;
  color: #555;
}


.benefits {
  list-style: none;
  padding-left: 0;
  margin-top: 1.5rem;
}

.benefits li {
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
}

.team-list {
  list-style: none;
  padding-left: 0;
  margin-top: 1.5rem;
  text-align: left;
  font-size: 1.05rem;
}

.team-list li {
  margin-bottom: 1rem;
  line-height: 1.6;
}




/* === SmartSAg Homepage === */
.main-layout_smartsag,.main-layout_silho {
  padding: 4rem 2rem;
  background-color: #F8FAFC;
  font-family: 'Inter', sans-serif;
  color: #2C3E50;
  max-width: 1000px;
  margin: 0 auto;
}
.main-layout_silho {
    margin-top: calc(var(--header-height));
    padding-bottom: 40px;
    min-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}
.main-layout_smartsag {
    margin-top: calc(var(--header-smartsag-height));
    padding-bottom: 40px;
    min-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}
.main-layout_smartsag_list {
    padding: 4rem 2rem;
    background-color: #F8FAFC;
    font-family: 'Inter', sans-serif;
    color: #2C3E50;
    margin: 0 auto;
    margin-top: calc(var(--header-smartsag-height));
    padding-bottom: 40px;
    min-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}
/* Section styling */
.main-layout_smartsag section ,.main-layout_silho section{
  background: #ffffff;
  border-left: 6px solid #88C4FF;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  padding: 2rem 2.5rem;
  margin-bottom: 2.5rem;
  transition: box-shadow 0.3s ease;
}

.main-layout_smartsag section:hover ,.main-layout_silho  section:hover{
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Titles */
.main-layout_smartsag h2 ,.main-layout_silho h2{
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #1C2834;
  position: relative;
  display: inline-block;
  padding-bottom: 0.4rem;
}

.main-layout_smartsag h2::after ,.main-layout_silho h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background-color: #88C4FF;
  border-radius: 2px;
}

/* Paragraphs */
.main-layout_smartsag p ,.main-layout_silho p{
  font-size: 1.05rem;
  line-height: 1.6;
  color: #2C3E50;
}

/* Lists */
.main-layout_smartsag ul,.main-layout_silho ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}

.main-layout_smartsag li ,.main-layout_silho li{
  margin-bottom: 1rem;
}

.main-layout_smartsag a,.main-layout_silho a {
  color: #007BFF;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.main-layout_smartsag a:hover ,.main-layout_silho a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .main-layout_smartsag,.main-layout_silho {
    padding: 2rem 1rem;
  }

  .main-layout_smartsag h2, .main-layout_silho h2 {
    font-size: 1.5rem;
  }
}

.video-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.video-thumbs {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 10px;
  flex-wrap: wrap;
}

.video-thumb {
  border: 2px solid transparent;
  padding: 2px;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.video-thumb img {
  display: block;
  width: 60px;
  height: auto;
  border-radius: 6px;
}

/* Miniature active : cadre vert (même logique que tes boutons verts déjà utilisés) */
.video-thumb.active {
  border-color: #28a745; /* vert */
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
}

.video-thumb:hover {
  transform: translateY(-2px);
}

.video-container {
  display: flex;
  transition: transform 0.5s ease;
}

.video-frame {
  flex: 0 0 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.video-dots {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 10px;
}

.video-dot {
  width: 12px;
  height: 12px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.video-dot.active {
  background-color: #007BFF;
}


/*///////////////////////////////////////////////////////formulaire de requetage*/

/* On neutralise la barre connect bleue d'origine */
.noUi-target,
.noUi-base,
.noUi-background,
.noUi-connects {
    background: transparent !important;
}

/* On évite qu’un élément interne prenne la place visuelle */
.noUi-connect {
    background: transparent !important;
}

/* segment avant (vert) */
.range-before {
    position: absolute;
    height: 100%;
    background: #4CAF50; /* vert */
    z-index: 1;
    pointer-events: none;
}

/* segment fenêtre (gris) */
.range-window {
    position: absolute;
    height: 100%;
    background: #9e9e9e; /* gris */
    z-index: 2;
    pointer-events: none;
}

/* segment après (rouge) */
.range-after {
    position: absolute;
    height: 100%;
    background: #e53935; /* rouge */
    z-index: 1;
    pointer-events: none;
}

/* poignée plus visible */
.noUi-handle {
    background: #1c2834 !important;
    border: 2px solid #88c4ff !important;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    z-index: 5;
}

/* On neutralise complètement le rail natif */
  #mfiRangeSlider.noUi-target,
  #mfiRangeSlider .noUi-base,
  #mfiRangeSlider .noUi-background,
  #mfiRangeSlider .noUi-connects,
  #mfiRangeSlider .noUi-connect {
      background: transparent !important;
      box-shadow: none !important;
      border: 0 !important;
  }

  /* On fixe la hauteur du rail du slider */
  #mfiRangeSlider.noUi-horizontal {
      height: 18px; /* hauteur globale du composant */
  }
  #mfiRangeSlider .noUi-base {
      position: relative;
      height: 100%;
  }

  /* Segments custom : on les centre verticalement et on réduit la hauteur */
  #mfiRangeSlider .range-before,
  #mfiRangeSlider .range-window,
  #mfiRangeSlider .range-after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 6px;            /* épaisseur de la barre couleur */
      border-radius: 3px;
      pointer-events: none;
  }

  /* segment avant (gris clair) */
  #mfiRangeSlider .range-before {
      background: #e9e9e9;
      z-index: 1;
  }

  /* segment fenêtre (gris) */
  #mfiRangeSlider .range-window {
      background: #9e9e9e;
      z-index: 2;
  }

  /* segment après (gris foncé) */
  #mfiRangeSlider .range-after {
      background: #474747;
      z-index: 1;
  }

  /* poignée plus visible, au-dessus de tout */
  #mfiRangeSlider .noUi-handle {
      background: #1c2834 !important;
      border: 2px solid #88c4ff !important;
      box-shadow: 0 0 4px rgba(0,0,0,0.4);
      z-index: 5;
  }
  
/* Wrapper pour alignement vertical */
.form-group.toggle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

/* Texte au-dessus du switch */
.toggle-label, .title_label {
  font-weight: bold;
  color: #555;
  margin-bottom: 0;
}

/* Le vrai switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider::before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Activation */
.toggle-switch input:checked + .slider {
  background-color: #007BFF;
}

.toggle-switch input:checked + .slider::before {
  transform: translateX(22px);
}

.label-text {
  font-size: 1rem;
  color: #2C3E50;
}



/* ============ Zone spécifique : #software_toggle ============ */

/* ============ Grid container ============ */
.software-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  /* remplacez 1rem par 120px */
  column-gap: 120px;
  row-gap: 10px;
  align-items: start;
}

/* Placements explicites */
.software-grid .primary-toggle {
  grid-column: 1;
  grid-row:1;
}
.software-grid #fusion_secondary_toggle,
.software-grid #matchit_secondary_toggle,
.software-grid #histomatch_secondary_toggle {
  grid-column: 1;
  grid-row:2;
}

.software-grid #form-group {
  grid-column: 2;
  grid-row:1;
}

#software_toggle {
display: grid;
  grid-template-columns: auto 1fr;
  /* remplacez 1rem par 120px */
  column-gap: 20px;
  row-gap: 50px;
  align-items: start;
}

/* labels gris par défaut */
#software_toggle .toggle-label {
  font-weight: bold;
  color: #AAA;
  user-select: none;
}

/* — SWITCH STANDARD (identique pour tous) — */
#software_toggle .toggle-switch {
  position: relative;
  width: 50px; height: 28px;
}
#software_toggle .toggle-switch input {
  opacity: 0; width: 0; height: 0;
}
#software_toggle .slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: background-color 0.4s;
}
#software_toggle .slider::before {
  content: "";
  position: absolute;
  height: 22px; width: 22px;
  left: 3px; bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.4s;
}
/* knob se déplace */
#software_toggle .toggle-switch input:checked + .slider::before {
  transform: translateX(22px);
}

/* ===== Switch principal : états Fusion / MatchIt ===== */
#software_toggle.fusion-mode .slider {
  background-color: #007BFF;
}
#software_toggle.fusion-mode .fusion-label {
  color: #007BFF;
}
#software_toggle.fusion-mode .matchit-label {
  color: #AAA;
}

#software_toggle.matchit-mode .slider {
  background-color: #FFA500;
}
#software_toggle.matchit-mode .matchit-label {
  color: #FFA500;
}
#software_toggle.matchit-mode .fusion-label {
  color: #AAA;
}

/* ===== Switchs secondaires cachés par défaut ===== */
#software_toggle .secondary-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

/* On n’affiche que celui du mode actif */
#software_toggle.fusion-mode #fusion_secondary_toggle {
  display: block;
}
#software_toggle.matchit-mode #matchit_secondary_toggle {
  display: block;
}
/* Labels gris par défaut dans les secondaires */
#software_toggle .secondary-toggle .toggle-label {
  color: #AAA;
}

/* Label actif : couleur selon le mode et le toggle secondaire */
#software_toggle.fusion-mode #fusion_secondary_toggle .toggle-label.active,
#software_toggle.fusion-mode #fusion_secondary_toggle .slider {
  /* active label + slider (si vous voulez colorer le slider secondaire) */
  color: #007BFF;
  
}

#software_toggle.matchit-mode #matchit_secondary_toggle .toggle-label.active,
#software_toggle.matchit-mode #matchit_secondary_toggle .slider {
  color: #FFA500;
  
}


#software_selector.three-toggle {
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
}

#software_selector.three-toggle input {
  display: none;
}

/* ===== GRID LAYOUT ===== */
.software-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 1rem;
  row-gap: 1rem;
  align-items: start;
}
/* placements */
#software_selector                          { grid-column:1; grid-row:1; }
#fusion_secondary_toggle, 
#matchit_secondary_toggle, 
#histomatch_secondary_toggle                 { grid-column:1; grid-row:2; }
.input-group                                 { grid-column:2; grid-row:1 / span 3; }

/* ===== SEGMENTED CONTROL ===== */
.three-toggle, .two-toggle {
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
}
.two-toggle  label + input + label,
.three-toggle label + label { border-left: 1px solid #ccc; }

.two-toggle  input,
.three-toggle input { display: none; }

.two-toggle  label,
.three-toggle label {
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  background-color: #f5f5f5;
  color: #555;
  transition: background-color 0.2s, color 0.2s;
}

/* état sélectionné par défaut bleu */
#opt_fusion:checked    ~ label[for="opt_fusion"],


#fusion_raw:checked    ~ label[for="fusion_raw"],
#fusion_adj:checked    ~ label[for="fusion_adj"],
#matchit_raw:checked   ~ label[for="matchit_raw"],
#matchit_admfi:checked ~ label[for="matchit_admfi"] {
  background-color: #007BFF;
  color: #fff;
}

/* orange pour MatchIt secondaire */
#matchit_raw:checked   ~ label[for="matchit_raw"],
#matchit_admfi:checked ~ label[for="matchit_admfi"],
#opt_matchit:checked   ~ label[for="opt_matchit"] {
  background-color: #FFA500;
}

/* vert pour Histomatch */
#histo_signal:checked  ~ label[for="histo_signal"],
#histo_mci:checked     ~ label[for="histo_mci"],
#histo_emfi:checked    ~ label[for="histo_emfi"],#opt_histomatch:checked~ label[for="opt_histomatch"]
 {
  background-color: #f87e10;
  color: #fff;
}


.dropdown {
  position: relative;
  display: inline-block;
  margin-top: 50px;
}

.dropdown-button {
  padding: 10px 20px;
  background-color: #1c2834;
  color: white;
  border: none;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  z-index: 1000;
  display: none;
  margin-top: 5px;
  width: 200px;
}

.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  position: relative;
}

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

.tooltip {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 10px;
  padding: 6px 10px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  display: none;
}

.attribute-info, .threshold-info, .autoAntibody-info, .alphabetaInfo-info {
    
  margin-top: 6px;
  padding: 6px 8px;
  background: #f0f0f0;
  border-left: 3px solid #007BFF;
  font-size: 0.9em;
  color: #333;
}               
          


.dropdown-item:hover .tooltip {
  display: block;
}    .dropdown {
  position: relative;
  display: inline-block;
  margin-top: 50px;
}

.dropdown-button {
  padding: 10px 20px;
  background-color: #1c2834;
  color: white;
  border: none;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  z-index: 1000;
  display: none;
  margin-top: 5px;
  width: 200px;
}

.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  position: relative;
}

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

.tooltip {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 10px;
  padding: 6px 10px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  display: none;
}

.dropdown-item:hover .tooltip {
  display: block;
}
.mode-buttons {
    margin-bottom: 10px;
}
.levelbtn {
    padding: 8px 12px;
    margin-right: 10px;
    border: none;
    cursor: pointer;
    background-color: #007BFF;
    color: white;
    border-radius: 4px;
}

.levelbtn-active {
    background-color: #28a745; /* Vert */
    color: white;
}
.levelbtn-inactive {
    background-color: #6c757d; /* Gris */
    color: white;
}
.request_table {
    width: 100%;
    border-collapse: collapse; /* Enlève les espaces entre les bordures */
    margin-bottom: 20px; /* Espacement avec les éléments voisins */
    background-color: #fff; /* Fond blanc pour contraste */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    overflow: hidden; /* Nécessaire pour arrondir les bords */
}
.request_table thead th {
    position: sticky; /* Le header reste visible lors du défilement */
    top: 0;
    /*background-color: #f9f9f9;*/ /* Couleur de fond du header */
    z-index: 1; /* Assure que le header reste au-dessus des autres éléments */
}
/* En-tête du tableau */
.request_table th {
    background-color: #88c4ff; /* Couleur de l'en-tête */
    color: white; /* Texte blanc */
    text-transform: uppercase; /* Texte en majuscules */
    font-size: 14px; /* Taille de texte */
    font-weight: bold; /* Texte en gras */
    padding: 12px 15px; /* Espacement */
}
/* style pour indiquer visuellement le désactivé */
#goSAGA.disabled {
  opacity: .5;
  pointer-events: none;
}

/* Cellules du tableau */
.request_table tr {
    color: #555; /* Couleur du texte */
}
.request_table td {
    padding: 12px 15px; /* Espacement */
    text-align: left; /* Alignement du texte */
    font-size: 14px; /* Taille de texte */
    
}

/* Lignes impaires (zebra striping) */
.request_table tr:nth-child(odd) {

    background-color: #f9f9f9; /* Couleur de fond pour contraste */
}

/* Lignes paires */
.request_table tr:nth-child(even) {
    background-color: #f2f2f2; /* Légère différence pour l'alternance */
}

/* Lignes survolées */
/*.request_table tr:hover {
    background-color: #e0f7fa; 
    cursor: pointer; 
}*/

/* Actions spécifiques dans le tableau */
.request_table td:last-child a {
    color: #1abc9c; /* Couleur pour les liens */
    text-decoration: none; /* Supprimer le soulignement */
    font-weight: bold; /* Mettre en valeur */
    margin-right: 10px; /* Espacement entre les actions */
    transition: color 0.3s ease;
}

.request_table td:last-child a:hover {
    color: #16a085; /* Couleur lors du survol */
}
/* Label */
.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}

/* Input, select, textarea */
.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    background-color: #fff;
}

.table-container {
    max-height: 200px; /* Hauteur maximale de la zone */
    overflow-y: auto;  /* Barre de défilement verticale si le contenu dépasse */
    border: 1px solid #ddd; /* Bordure optionnelle pour délimiter la zone */
}
.mfis_table {
    width: 100%;
    max-width:400px;
    border-collapse: collapse; /* Enlève les espaces entre les bordures */
    margin-bottom: 20px; /* Espacement avec les éléments voisins */
    background-color: #fff; /* Fond blanc pour contraste */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    overflow: hidden; /* Nécessaire pour arrondir les bords */
}
.mfis_table thead th {
    position: sticky; /* Le header reste visible lors du défilement */
    top: 0;
    /*background-color: #f9f9f9;*/ /* Couleur de fond du header */
    z-index: 1; /* Assure que le header reste au-dessus des autres éléments */
}
/* En-tête du tableau */
.mfis_table th {
    background-color: #88c4ff; /* Couleur de l'en-tête */
    color: white; /* Texte blanc */
    text-transform: uppercase; /* Texte en majuscules */
    font-size: 12px; /* Taille de texte */
    font-weight: bold; /* Texte en gras */
    padding: 5px 5px; /* Espacement */
    text-align:center;
}

/* Cellules du tableau */
.mfis_table tr {
    color: #555; /* Couleur du texte */
}
.mfis_table td {
    padding: 5px 5px; /* Espacement */
    text-align: left; /* Alignement du texte */
    font-size: 12px; /* Taille de texte */
    
}

/* Lignes impaires (zebra striping) */
.mfis_table tr:nth-child(odd) {
    background-color: #f9f9f9; /* Couleur de fond pour contraste */
}

/* Lignes paires */
.mfis_table tr:nth-child(even) {
    background-color: #f2f2f2; /* Légère différence pour l'alternance */
}

/* Lignes survolées */
.mfis_table tr:hover {
    background-color: #e0f7fa; /* Couleur de survol */
    cursor: pointer; /* Curseur pointeur */
}

/* Actions spécifiques dans le tableau */
.mfis_table td:last-child a {
    color: #1abc9c; /* Couleur pour les liens */
    text-decoration: none; /* Supprimer le soulignement */
    font-weight: bold; /* Mettre en valeur */
    margin-right: 10px; /* Espacement entre les actions */
    transition: color 0.3s ease;
}

.mfis_table td:last-child a:hover {
    color: #16a085; /* Couleur lors du survol */
}

/*///////////////////////////////////////////////////////affichage de la liste de résultats saga*/
/*menu déroulant en entete de smartsag*/
#resultSelector {
    padding: 5px 10px;
    font-size: 14px;
}
#prevResult, #nextResult {
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
}
#prevResult:disabled, #nextResult:disabled {
    opacity: 0.4;
    cursor: default;
}

/*liste d'export*/

#results_export_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    table-layout: fixed;
    font-family: Arial, sans-serif;
    overflow: hidden;

}

/* Header sticky */
#results_export_table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* En-tête du tableau */
#results_export_table th {
    background-color: #88c4ff;
    color: white;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    padding: 12px 15px;
    text-align: center;
}

/* Cellules générales */
#results_export_table td {
    padding: 12px 15px;
    font-size: 14px;
    color: #555;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Lignes impaires et paires (alternance) */
#results_export_table tr:nth-child(odd) {
    background-color: #f9f9f9;
}
#results_export_table tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Spécificités par colonne */
#results_export_table col.col-batch {
    min-width: 350px;
    text-align: left;
}

#results_export_table col.col-id {
    min-width: 350px;
    text-align: left;
}
#results_export_table col.col-rowid {
    width: 70px;
    text-align: center;
}
#results_export_table col.col-date {
    width: 180px;
    text-align: center;
}

#results_export_table col.col-version {
    width: 120px;
    text-align: center;
}

#results_export_table col.col-status,
#results_export_table col.col-time
 {
    width: 120px;
    text-align: center;
}


#results_export_table col.col-select {
    width: 120px;
    text-align: center;
}

/* Empêche les headers de rétrécir */
#results_export_table col.col-batch,
#results_export_table col.col-id {
    min-width: 300px;
}
#results_export_table col.col-rowid {
    width: 70px;
}
#results_export_table col.col-date {
    width: 180px;
}
.selectable-row {
    cursor: pointer;
}

.selectable-row:hover {
    background-color: #e0f0ff; /* ou une légère teinte */
}
/*/////////////////////////////////////////////////////// affichage des résultats saga*/

/* //////////////////////////////////////////////////////////Ligne fixe contenant le titre + outils */
.top-tools-bar {
    position: fixed;
    top: var(--header-smartsag-height); /* Juste sous le header */
    width: 100%;
    height:auto;
    flex-wrap:wrap;
    min-height: var(--tools-bar-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 0 20px;
    z-index: 999;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    gap: 20px;
}

.request-title {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.request-title h4 {
    margin: 0;
    font-size: 14px;
}

#toggleAnalysisInfo {
    cursor: pointer;
    font-size: 1.2em;
}
#analysisInfoPanel,#popup-receiver,#popup-donor {
  position: absolute;              /* Le fait flotter */
  top: 0px;                      /* Ajuste selon la hauteur de ta top bar + barre outils */
                        /* Aligné à gauche (peut être adapté) */
  z-index: 1000;                   /* S'assure qu'il soit au-dessus du reste */
  
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;                  /* Par défaut masqué, à toggler en JS */
}

#analysisInfoPanel{
	background: #e1e1e1;
	left: 55px;
}
#popup-receiver{
	background: #e1ffe1;

}
#popup-donor{
	background: #ffe6d9;

}

#analysisInfoPanel.show, #popup-receiver.show, #popup-donor.show {
  display: block;
  animation: fadeIn 0.2s ease-out;
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.hidden {
  display: none;
}


/* Partie droite : icône, input et boutons */
.analysis-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* Si manque de place */
    flex-grow: 1;
	justify-content: flex-end;
	min-width: 0;
}

/* Input */
#searchInput {
    padding: 6px 10px;
    font-size: 1em;
    max-width: 200px;
	flex-shrink: 0;
}

/* Conteneur des boutons */
/*#locusButtonsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}*/

/* Locus buttons*/
/*.locus-button {
    padding: 6px 10px;
    font-weight: bold;
    border: none;
    
    cursor: pointer;
}*/

/* Style des boutons de filtre */
#locusButtonsContainer {
    margin-top: 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.locus-button {
    padding: 8px 12px;
    margin: 5px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.locus-button.active {
    background-color: #4CAF50;
    color: white;
}

.locus-button.inactive {
    background-color: #f44336;
    color: white;
}
/* 💡 Bouton désactivé visuellement */
.locus-button.disabled {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed;
    opacity: 0.7;
}



/*DSA button*/
.dsa-toggle-button {
    padding: 8px 12px;
    margin: 5px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.dsa-toggle-button.active {
    background-color: #ff0000;
    color: white;
}

.dsa-toggle-button.inactive {
    background-color: #f44336;
    color: white;
}


/*vues button*/
.view-toggle-button {
    padding: 8px 12px;
    margin: 5px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s;
}


/*charts*/
/* 🎯 Canvas du graphique */
canvas {
    width: 100% !important;
    height: 100% !important;
}
.no-data-message {
	font-family: 'Segoe UI', sans-serif;
	opacity: 0.8;
	pointer-events: none;
}
/*//////////////////////////////////////////////////////////table des billes*/
#fusionView {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--header-smartsag-height) - var(--tools-bar-height) - 40px);
}

/* Barre de redimensionnement */
#resize-bar_beads {
	min-height: 6px;
	background: #ccc;
	cursor: row-resize;
}

/* Conteneur du tableau avec défilement */
.table-container_result {
    flex: 0 0 250px;       /* hauteur initiale */
    min-height: 100px;     /* hauteur minimale */
    overflow-y: auto;
    border: 1px solid #ccc;
}
/* Table principale */
.beads_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-size: 11px;
}

/* En-tête du tableau */
.beads_table thead {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.beads_table th {
    background-color: #88c4ff;
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid #ddd;
}

/* Cellules */
.beads_table td {
    padding: 5px 10px;
    text-align: left;
    color: #555;
    border: 1px solid #ddd;
    height: 11px;
  	font-size: 11px;
}

/* Alternance de lignes */
.beads_table tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.beads_table tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Survol */
.beads_table tr:hover {
    background-color: #e0f7fa;
    cursor: pointer;
}

/* Dernière colonne : liens d'action */
.beads_table td:last-child a {
    color: #1abc9c;
    text-decoration: none;
    font-weight: bold;
    margin-right: 10px;
    transition: color 0.3s ease;
}

.beads_table td:last-child a:hover {
    color: #16a085;
}

/*//////////////////////////////////////////////////////graphique des billes*/
/* 📊 Conteneur du graphique */
.chart_div {
    flex: 1 1 auto;
    min-height: 200px;     /* hauteur minimale pour le graphique */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

/* 📦 Sous-conteneur pour canvas */
.chart_div-content {
    width: 95%;
    max-width: 95%;
    height: 100%;          /* prend la hauteur de .chart_div */
    display: flex;
    justify-content: center;
    align-items: center;
}




/*//////////////////////////////////////////////////////////vue attributs*/
#attributesView {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--header-smartsag-height) - var(--tools-bar-height) - 40px);
}


/* Barre de redimensionnement */
#resize-bar_attributes {
	min-height: 6px;
	background: #ccc;
	cursor: row-resize;
}

/* Conteneur du tableau avec défilement */
.table-container_attributes {
    flex: 0 0 250px;       /* hauteur initiale */
    min-height: 100px;     /* hauteur minimale */
    overflow-y: auto;
    border: 1px solid #ccc;
}
/* Table principale */
.attributes_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-size: 11px;
}

/* En-tête du tableau */
.attributes_table thead {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.attributes_table th {
    background-color: #88c4ff;
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid #ddd;
}

/* Cellules */
.attributes_table td {
    padding: 5px 10px;
    text-align: left;
    color: #555;
    border: 1px solid #ddd;
    height: 11px;
  	font-size: 11px;
}

/* Alternance de lignes */
.attributes_table tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.attributes_table tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Survol */
.attributes_table tr:hover {
    background-color: #e0f7fa;
    cursor: pointer;
}

/* Dernière colonne : liens d'action */
.attributes_table td:last-child a {
    color: #1abc9c;
    text-decoration: none;
    font-weight: bold;
    margin-right: 10px;
    transition: color 0.3s ease;
}

.attributes_table td:last-child a:hover {
    color: #16a085;
}

/* 📊 Conteneur du graphique */
.attchart_div {
    flex: 1 1 auto;
    min-height: 200px;     /* hauteur minimale pour le graphique */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

/* 📦 Sous-conteneur pour canvas */
.attchart_div-content {
    width: 95%;
    max-width: 95%;
    height: 100%;          /* prend la hauteur de .chart_div */
    display: flex;
    justify-content: center;
    align-items: center;
}



/*formulaires admin*/
/* Conteneur du formulaire */
#addUserForm, #addForm, #modifyForm {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    margin-bottom:30px;
}