/* . => class # => id */

/* Font used for the pages */
@font-face {
  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
  font-family:'AmstelvarAlpha';
  font-style: normal;
}

/* if the page is less than 790px */
@media screen and (max-width: 790px) {
  ul.collapsable {
   position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #faecfabf;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    list-style: none;
  }

  a.head span.text   { display: block; }
  a.ddown span.text  { display: block; }
  span.flagdb-margin { margin-right: 12px; }
  .hamburger-icn     { display: block; }
}


/* if the page is over than 790px */
@media screen and (min-width: 790px) {
  ul.collapsable {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
  }
  .hamburger-icn  { display: none;  }
}


/* if the page is under 1300px */
@media screen and (max-width: 1300px) {
  /* show foot icons and disable foot text */
  a.foot span.text   { display: none; }
  a.foot span.icon   { display: block; }
  a.head span.text   { display: none;  }
  a.ddown span.text  { display: none; }
  span.flagdb-margin { margin-right: 12px; }
  /* font for this page */
  a,button,label     { font-size: 8pt ; }
  .mi_container { width: calc( 100% -  var(--div-margin)); }
}


/* if the page is over 1300px */
@media screen and (min-width: 1300px) {
  .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }
  /* show foot text and disable foot icons */
  a.foot span.text { display: block; }
  a.foot span.icon { display: none;  }
  a.head span.text { margin-right: 12px; }
  span.flagdb-margin { margin-right: 5px; }
  /* font for this page */
  a,button,label { font-size: 9pt ;  }
  .mi_container  { width: calc( 49% -  var(--div-margin)); }
}


/* if the page is over 1280px
   the media order is very important
*/
@media screen and (min-width: 1500px) {
  a,button,label { font-size: 10pt ; }
}

/* Define global variables
*/
:root { 
  --footer-height:  32px;
  --header-height:  44px;
  --div-padding:    10px;
  --div-margin:     10px;
  --info-height:    42px;
  --title-height:   22px;

  /* Design tokens modernes */
  --radius-sm:  4px;
  --radius-md:  7px;
  --radius-lg: 10px;
}

/* header variables */
:root,
:root.pink {
  --body-bg-color:        #fff8fa;
  --header-bg-color:      #FAECFA;
  --header-text-color:    #7c487b;

  --container-title-bg:   #D27893;
  --container-title-fg:   #FFF4F4;

  --mi-title-bg:          #FFF4F4;
  --mi-title-fg:          #215968;

  --mi-container-border:  #DBA1E6;
  --mi-main-container-bg: white;
  --mi-content-fg:        #FEFF27;

  --tooltip-bg:           #fcf2fc;

  --a-color:              #BC2778;
  --icn-filter:           invert(17%) sepia(89%) saturate(2827%) hue-rotate(287deg) brightness(94%) contrast(83%);

  --accordion-title-bg:   #BC2778;
  --accordion-title-fg:   white;

  --content-bg:           #ffffff;
  --axis-background:      #fff8fe;
  --footer-bg-color:      #FAECFA;
  --domain-background:    #fceff5;

  --btn-bg:               #3d2a3e;
  --btn-fg:               #e8d0e8;
  --btn-border:           #5a3a5a;
  --btn-hover-bg:         #77d06a;
  --btn-hover-fg:         #ffffff;
  --btn-cancel-hover:     #fcacb1;
  
  --menu-bg:              #fff6ff;
  --menu-border:          #4a2a4a;
  --menu-item-hover:      #3d2040;
  --menu-item-fg:         #c06ebe;
  
  --input-bg:             #fdf8fc;
  --input-border:         #c8a0c0;
  --input-focus:          #a0507a;
  
  --modal-overlay:        rgba(10,5,15,0.65);
  --modal-bg:             #ffffff;
  --modal-footer-bg:      #faf0f5;
}

:root.green {
  --body-bg-color:        #fff8fa;
  --header-bg-color:      #eefad5;
  --header-text-color:    #718a3c;

  --container-title-bg:   #b5d470;
  --container-title-fg:   #e5f4c6;

  --mi_title-bg:          #fff4f4;
  --mi-title-fg:          #195969;

  --mi-container-border:  #629500;
  --mi-main-container-bg: white;
  --mi-content-fg:        #ffff00;

  --tooltip-bg:           #dcf5c6;
  --a-color:              #629500;
  --icn-filter:           invert(50%) sepia(30%) saturate(6104%) hue-rotate(52deg) brightness(85%) contrast(103%);

  --accordion-title-bg:   #629500;
  --accordion-title-fg:   #f0f7e0;

  --content-bg:           #ffffff;
  --axis-background:      #f8fffc;
  --footer-bg-color:      #eefad5;
  --domain-background:    #f3fdea;

  --btn-bg:               #243018;
  --btn-fg:               #c8e8a8;
  --btn-border:           #3d6020;
  --btn-hover-bg:         #77d06a;
  --btn-hover-fg:         #ffffff;
  --btn-cancel-hover:     #fcacb1;

  --menu-bg:              #f1f9f2;
  --menu-border:          #385020;
  --menu-item-hover:      #2a4018;
  --menu-item-fg:         #b8d898;

  --input-bg:             #f8fdf4;
  --input-border:         #8ab870;
  --input-focus:          #4a7a10;

  --modal-overlay:        rgba(5,12,3,0.65);
  --modal-bg:             #ffffff;
  --modal-footer-bg:      #f4fbee;
}

:root.orange {
  --body-bg-color:        #fffcf8;
  --header-bg-color:      #ffe7da;
  --header-text-color:    #875f47;

  --container-title-bg:   #e4a27b;
  --container-title-fg:   #e5f4c6;

  --mi_title-bg:          #fff4f4;
  --mi-title-fg:          #195969;

  --mi-container-border:  #efc7af;
  --mi-main-container-bg: white;
  --mi-content-fg:        #ffff00;

  --tooltip-bg:           #fff4f4;
  --a-color:              #eb711b;
  --icn-filter:           invert(42%) sepia(87%) saturate(594%) hue-rotate(346deg) brightness(90%) contrast(96%);

  --accordion-title-bg:   #eb711b;
  --accordion-title-fg:   #f0f7e0;

  --content-bg:           #ffffff;
  --axis-background:      #fffcf8;
  --footer-bg-color:      #ffe7da;
  --domain-background:    #fdf5ea;

  --btn-bg:                #321808;
  --btn-fg:                #f0c898;
  --btn-border:            #6a3010;
  --btn-hover-bg:          #77d06a;
  --btn-hover-fg:          #ffffff;
  --btn-cancel-hover:      #fcacb1;

  --menu-bg:               #f9f7f1;
  --menu-border:           #5a2808;
  --menu-item-hover:       #3d2010;
  --menu-item-fg:          #b99972;

  --input-bg:              #fffaf5;
  --input-border:          #c89870;
  --input-focus:           #c05818;

  --modal-overlay:         rgba(12,6,2,0.65);
  --modal-bg:              #ffffff;
  --modal-footer-bg:       #fff5ec;
}

:root.blue {
  --body-bg-color:        #f8f8ff;
  --header-bg-color:      #d5d8fa;
  --header-text-color:    #474988;

  --container-title-bg:   #7073d4;
  --container-title-fg:   white;

  --mi-title-bg:          #f4f4ff;
  --mi-title-fg:          #221969;

  --mi-container-border:  #1e0095;
  --mi-main-container-bg: white;
  --mi-content-fg:        white;

  --tooltip-bg:           #d5d8fa;
  --a-color:              #2c31db;
  --icn-filter:           invert(18%) sepia(87%) saturate(7326%) hue-rotate(244deg) brightness(88%) contrast(95%);

  --accordion-title-bg:   #090095;
  --accordion-title-fg:   #f0f7e0;

  --content-bg:           #ffffff;
  --axis-background:      #f8ffff;
  --footer-bg-color:      #d5d8fa;
  --domain-background:    #eceafd;

  --btn-bg:               #4c5fdc;
  --btn-fg:               #ffffff;
  --btn-border:           #303888;
  --btn-hover-bg:         #77d06a;
  --btn-hover-fg:         #ffffff;
  --btn-cancel-hover:     #fcacb1;
  
  --menu-bg:              #f1f2f9;
  --menu-border:          #282e70;
  --menu-item-hover:      #202860;
  --menu-item-fg:         #6f82b4;
  
  --input-bg:             #f5f7ff;
  --input-border:         #8090d8;
  --input-focus:          #2030c8;
  
  --modal-overlay:        rgba(3,4,15,0.65);
  --modal-bg:             #ffffff;
  --modal-footer-bg:      #f0f3ff;
}

/* =============================================
   AXES D3
   ============================================= */
path.domain { fill: var(--domain-background); }
g#statsaxis path.domain { fill: none;}

/* =============================================
   ICÔNES
   ============================================= */

.flagdb-icons {
  width:  18px;
  height: 18px;
  vertical-align: middle;
  filter: var(--icn-filter) ;
}
.flagdb-icons:hover  { transform: rotate(12deg); }

.flagdb-green  { width:18px; height:18px; vertical-align:middle; filter: invert(42%) sepia(60%) saturate(500%) hue-rotate(55deg) brightness(90%) contrast(110%); }
.flagdb-pink   { width:18px; height:18px; vertical-align:middle; filter: invert(38%) sepia(40%) saturate(800%) hue-rotate(290deg) brightness(110%) contrast(90%); }
.flagdb-blue   { width:18px; height:18px; vertical-align:middle; filter: invert(20%) sepia(80%) saturate(600%) hue-rotate(210deg) brightness(110%) contrast(90%); }
.flagdb-orange { width:18px; height:18px; vertical-align:middle; filter: invert(40%) sepia(80%) saturate(500%) hue-rotate(5deg) brightness(95%) contrast(100%); }

.check-icons {
  position: absolute;
  width: 18px;
  height: 18px;
  filter: invert(15%) sepia(90%) saturate(400%) hue-rotate(0deg) brightness(120%) contrast(130%);
}
.check-unsel  { display: none; }
.check-sel    { display: block; }

.flagdb-margin { margin-right: 10px; }

.footer-icn {
  width:    128px;
  position: fixed;
  bottom:   4px;
}
.app-icn  {
  width: 90px;
  margin-right: 10px;
  margin-left: 16px;
  filter: drop-shadow(0px 0px 12px #808088); 
}
.middle-copyright-icn {
  width:  32px;
  filter: none;
}

/* =============================================
   HTML / BODY
   ============================================= */
html{
  height:   100%;
  margin:   0px;
  overflow: hidden;
}
body {
  height: calc(100% - var(--header-height) - var(--div-margin));   
  margin: 0px;
  background-color: var(--body-bg-color);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
}
body.zoom { padding: 10px; }

/* =============================================
   HEADER
   ============================================= */
header {
  position: fixed;
  width: 100%;
  height: var(--header-height);
  min-height: var(--header-height);
  top: 0;
  left: 0;
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
  vertical-align: middle;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  z-index: 900;
}
.header-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  box-sizing: border-box;
}

/* =============================================
   NAVBAR
   ============================================= */
ul.navbar {
  list-style: none;
  padding: 0 4px;
  margin: 0;
  display: flex;
  align-items: center;
}
ul.navbar li {
  display: flex;
  position: relative
  align-items: center;
}

/* liens dans la navbar */
a.head, a.ddown {
  display: flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  color: var(--header-text-color);
  text-decoration: none;
  opacity: 0.82;
  white-space: nowrap;
  gap: 5px;
}
a.head:hover, a.ddown:hover {
  opacity: 1;
  color:var(--menu-border);
}
a.ddown:hover .flagdb-icons {
  filter: invert(15%) sepia(80%) saturate(1200%) hue-rotate(330deg) brightness(85%) contrast(110%);
}
a.head:hover .flagdb-icons {
  filter: invert(15%) sepia(80%) saturate(1200%) hue-rotate(330deg) brightness(85%) contrast(110%);
}

/* petite flèche dropdown */
.ddown::after {
  display: inline-block;
  vertical-align: middle;
  content: "";
  margin-left: 4px;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-bottom: 0;
  border-left: 4px solid transparent;
  opacity: 0.6;
}


/* =============================================
   MENUS DÉROULANTS
   ============================================= */
ul.ddown-menu {
  position: absolute;
  top: 100%;
  z-index: 1000;
  display: none;
  padding: 5px 0;
  list-style: none;
  background-color: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.40);
  min-width: 170px;
}
ul.show { display: block; }
   
a.ddown-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 14px;
  white-space: nowrap;
  color: var(--menu-item-fg);
  border: 0;
  text-decoration: none;
  font-size: 12.5px;
  box-sizing: border-box;
}
a.ddown-item:hover {
  background-color: var(--menu-item-hover);
  color: #ffffff;
}

a.ddown-item:hover .flagdb-icons {
  filter: invert(100%) brightness(200%);
}
   
/* le li et le a déclencheur sont le point de référence du sous-menu */
.ddown-menu li {
  position: relative;
}
a.ddown-submenu {
  position: relative;
}
   
/* sous-menu aligné verticalement sur le a qui le déclenche */
.ddown-menu .ddown-menu {
  top: 0;
  left: 100%;
  margin-top: 0;
  margin-left: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
}
   
/* flèche sous-menu */
.ddown-submenu::after {
  display: block;
  float: right;
  content: "";
  border: 4px solid transparent;
  border-left-color: var(--menu-item-fg);
  margin-top: 4px;
  margin-left: auto;
  opacity: 0.7;
  box-shadow: none;
}
.context-submenu::after {
  display: block;
  float: right;
  content: "";
  border: 4px solid transparent;
  border-left-color: #888;
  margin-top: 4px;
}
   
ul.context-linkmenu {
  position: absolute;
  display: none;
  margin-left: 66px;
  margin-top: -8px;
  text-align: center;
  padding: 4px;
  font: 13px system-ui, sans-serif;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: var(--radius-md);
  z-index: 9200;
}
   
/* séparateur de menu */
span.menu-margin { margin-right: 4px; }
   
/* =============================================
   FORMULAIRES DANS LE HEADER
   ============================================= */

input.form-control, select.form-select, textarea.form-control {
  padding: 5px 9px;
  line-height: 1.5;
  border: 1px solid var(--input-border);
  background-color: var(--input-bg);
  color: #1a1a1a;
  border-radius: var(--radius-sm);
  margin: 3px;
 /* font-family: inherit;
  font-size: 12px;
 */ appearance: none;
  outline: none;
}
input.form-control:focus, select.form-select:focus, textarea.form-control:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px rgba(128,128,200,0.18);
}
textarea.form-control { font-size: 11px; }

/* =============================================
   BOUTONS
   ============================================= */
button.header-btn {
  border: 1px solid var(--btn-border);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: none;
  margin: 3px;
  padding: 5px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
button.header-btn:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-bg);
}
button.cancel:hover {
  background-color: var(--btn-cancel-hover);
  color: #ffd0d8;
  border-color: var(--btn-cancel-hover);
}
/* bouton discord dans le header */
#discordB {
  padding: 5px 10px;
}
#mapItB, #discordB {
  background-color: var(--menu-bg);
  border-color: var(--menu-border);
}
button.header-btn:not(#mapItB):not(#discordB) .flagdb-icons {
  filter: invert(100%) brightness(200%);
} 
button.cancel:hover {
  background-color: var(--btn-cancel-hover);
  color: #cc2233;
  border-color: var(--btn-cancel-hover);
}
button.cancel:hover .flagdb-icons {
  filter: invert(15%) sepia(80%) saturate(1200%) hue-rotate(330deg) brightness(85%) contrast(110%);
}
#mapItB:hover, #discordB:hover {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
}
#mapItB:hover .flagdb-icons, #discordB:hover .flagdb-icons {
  filter: invert(100%) brightness(200%);
}
   

/* =============================================
    MAIN CONTAINER
    ============================================= */
.main_container {
  background-color: #c8c8c6;
  margin-top: var(--header-height);
  padding: 5px;
  min-height: calc(100% - var(--footer-height) - var(--div-margin) );
  height:     calc(100% - var(--footer-height) - var(--div-margin) );
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 5px;
} 

.zoom_main_container {
  background-color: #f4f4f4;
  margin-top: 10px;
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

/* =============================================
   CONTAINERS (panneaux)
   ============================================= */

.container {
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

.container_title {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 0 10px;
  background-color: var(--container-title-bg);
  color: var(--container-title-fg);
  text-align: center;
  height: var(--title-height);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
div.container_title > .flagdb-icons {
  float: right;
  margin-left: auto;
  width: 12px;
  height: 12px;
  filter: invert(100%) opacity(0.7);
  cursor: pointer;
}
div.container_title > .flagdb-icons:hover { opacity: 1; }

/* =============================================
   PANNEAUX LOCAL / GENOME / INFO
   ============================================= */
.physical {
  width: calc(100% * 3 / 4 - 10px);
  height: calc(100% - var(--info-height) ); 
}
.genome {
  width: calc(100% * 1 / 4 - 5px);
  height: calc(100% - var(--info-height) ); /* - var(--div-margin));*/
}
.zoom {
  width: calc(100% - 20px);
  height: calc(100% - var(--info-height) ); /* - var(--div-margin));*/
}
.info {
  width: 100%;
  height: calc(var(--info-height) - var(--div-margin));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.info .label {
  color: #666;
  font-size: 11px;
  font-weight: 500;
  margin-left: 6px;
  white-space: nowrap;
}
.info input[type="text"] {
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  padding: 3px 7px;
  font-size: 11.5px;
  color: #222;
}

.infocontainer {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.scallable {
  overflow-y: auto;
  overflow-x: auto;
}

 /* navigation flèches ?????????????????????*/
 #move {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
#move a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  cursor: pointer;
}
#move a:hover { background: rgba(255,255,255,0.18); }

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background-color: var(--footer-bg-color);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--footer-height);
  display: flex;
  align-items: center;
}
.footer a { font-size: 11px; }
.footer a:hover { color: rgba(255,255,255,0.90); }
.footer table { color: rgba(255,255,255,0.55); }
a.a-over:hover { color: rgba(255,255,255,0.95); }

/* =============================================
   LIENS
   ============================================= */
a:link { text-decoration: none; }
a { color: var(--a-color); }
a.disabled-link,
a.disabled-link:visited,
a.disabled-link:active,
a.disabled-link:hover {
  background-color: #f5f5f5;
  color: #c0c0c0;
}

/* =============================================
   MODALES
   ============================================= */
.modalWindow {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.modalWaitWindow { z-index: 99999; }

 /* Div interne de chaque modale */
 .modalWindow > div {
  position: relative;
  margin: 8% auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  background: var(--modal-bg);
  overflow: hidden;
}

/* Titres des modales */
.modalWindow .container_title {
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Corps */
.modalWindow .modal-body {
  background-color: var(--modal-bg);
  padding: 1px 1px;
  line-height: 1.6;
  font-size: 13px;
  color: #1a1a1a;
}

/* Pied */
.modal-footer {
  background-color: var(--modal-footer-bg);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1px 12px 1px 12px;
  gap: 6px;
  border-top: 1px solid rgba(0,0,0,0.07);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}


/* Largeurs des modales */
#sizeModal > div        { width: 200px; }
#speciesModal > div,
#genreModal > div       { width: 260px; }
#featureModal > div     { width: 300px; }
#findModal > div        { width: 290px; }
#getSequenceModal > div { width: 360px; }
#userModal > div        { width: 420px; }
#uploadModal > div      { width: 660px; }
#blastModal > div       { width: 700px; }
#geneListModal > div    { width: 360px; }
#alertModal > div       { width: 400px; }
#waitModal > div        { width: 210px; }
#logoModal > div        { width: 820px; }
#densityModal > div     { width: 700px; }
#PFAMKeywordModal > div { width: 310px; }
#patternModal > div     { width: 510px; }

#densityModal .modal-body   {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 800px;
}
#densityBody { width: 100%;  height: 100%; }
div#featurelist { height: 400px; overflow-y: auto; }

/* =============================================
   TOOLTIP / CONTEXT MENU
   ============================================= */

div.tooltip {
  position: absolute;
  text-align: center;
  font: 13px system-ui, sans-serif;
  background: var(--tooltip-bg);
  border-radius: var(--radius-md);
  pointer-events: none;
  z-index: 9200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.08);
}
ul.tooltip {
  position: absolute;
  text-align: center;
  padding: 4px;
  font: 13px system-ui, sans-serif;
  background: var(--tooltip-bg);
  color: rgba(255,255,255,0.88);
  border-radius: var(--radius-md);
  z-index: 9200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.08);
}
ul.show { display: block; }
  
div.tooltip .flagdb-icons {
  float: right;
  padding: 2px;
  width: 12px;
  height: 12px;
  filter: invert(100%) opacity(0.6);
  cursor: pointer;
}
  
#context-menu { opacity: 0; }

/* =============================================
   COOKIES & NEWS BANNERS
   ============================================= */
.wrapper, .wrappernews {
  position: fixed;
  right: -480px;
  max-width: 360px;
  width: 100%;
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 18px 24px 20px;
  transition: right 0.3s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.06);
}
.wrapper       { bottom: 48px; }
.wrappernews   { top: 56px; }
.wrapper.show, .wrappernews.show { right: 16px; }
  
div.header h2 { color: var(--a-color); font-size: 15px; font-weight: 600; margin: 0 0 6px; }
div.header h4 { color: var(--a-color); }
.wrapper .data { margin-top: 12px; font-size: 12px; color: #444; line-height: 1.5; }
.wrapper .buttons {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
    
/* =============================================
   ACCORDÉON MOREINFO
   ============================================= */
ul.accordion {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.accordion label {
  background-color: var(--accordion-title-bg);
  color: var(--accordion-title-fg);
  display: block;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
}
ul.accordion label:hover { filter: brightness(1.12); }
ul.accordion label + input[type='checkbox'] { display: none; }
ul.accordion label + input[type='checkbox']:checked + div.content { display: flex; }
ul.accordion li {
  background-color: #f0e8f0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
div.content {
  background-color: var(--content-bg);
  border-color: var(--mi-container-border);
  overflow: hidden;
  flex-direction: row;
  flex-wrap: wrap;
  display: none;
}
/* =============================================
   MOREINFO CONTAINERS
   ============================================= */
.mi_main_container {
  background-color: var(--mi-main-container-bg);
  border-color: var(--mi-container-border);
  margin-top: var(--header-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100% - var(--footer-height) - var(--header-height));
  height: calc(100% - var(--footer-height));
}
.mi_main_body_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.mi_main_title_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mi_title {
  font-size: 12pt;
  background-color: var(--mi-title-bg);
  color: var(--mi-title-fg);
  padding: 10px;
  margin-bottom: 10px;
}
.mi_body {
  font-size: 12pt;
  line-height: 1.5;
  background-color: #fffff4;
  color: #2390b4;
  padding: 10px;
  margin-bottom: 10px;
}
.mi_container {
  border: 1px solid var(--mi-container-border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin: var(--div-margin);
  background-color: #fffff4;
}
.mi_container .container-title { color: var(--mi-content-fg) !important; }
.mi_container td { vertical-align: top; }

/* =============================================
   TABLEAUX MOREINFO
   ============================================= */
.header-fixed { width: 100%; }
.header-fixed > thead, .header-fixed > tbody,
.header-fixed > thead > tr, .header-fixed > tbody > tr,
.header-fixed > thead > tr > th, .header-fixed > tbody > tr > td { display: block; }
.header-fixed > tbody > tr:after, .header-fixed > thead > tr:after {
  content: ' '; display: block; visibility: hidden; clear: both;
}
.header-fixed > tbody { overflow-y: auto; }
.header-fixed > tbody > tr > td, .header-fixed > thead > tr > th { float: left; }

.header-fixed tbody tr:nth-child(even) { background: #fafff3; }
.header-fixed tbody tr:nth-child(odd)  { background: #fdf8ff; }
.header-fixed tbody tr:hover           { background: #fde8c8; font-size: larger; }
    
#tableGroup tbody tr:nth-child(even) { background: #fafff3; }
#tableGroup tbody tr:nth-child(odd)  { background: #fdf8ff; }
#tableGroup tbody tr:hover           { background: #fde8c8; }
     
tr.highlight { color: #b00; background-color: #f5e0e0 !important; }
tr.clickable { cursor: pointer; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; background: #f8f8f8; }
    
td.trot     { border-left: 1px solid #ddd; height: 20px; }
th.rotate   { height: 140px; white-space: nowrap; }
th.rotate > div { transform: translate(20px, 51px) rotate(315deg); width: 30px; }
th.rotate > div > span { border-bottom: 1px solid #ccc; padding: 5px 10px; }
  
th.up:after, th.down:after {
  display: inline-block; vertical-align: 0.255em; content: "";
  margin-right: 8px;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
}
th.up:after   { border-top: 0.3em solid; border-bottom: 0; }
th.down:after { border-top: 0; border-bottom: 0.3em solid; }

/* =============================================
   SÉQUENCE
   ============================================= */
.sequence {
  font-family: "JetBrains Mono", "Fira Code", "Lucida Console", Courier, monospace !important;
  font-size: 12px !important;
  font-style: normal;
  text-align: left;
  word-break: keep-all;
  /*  font-family: "Lucida Console", Courier, monospace !important;
    font-style : normal;
    text-align: left;
    word-break: keep-all;*/
}
span.sequence { height: 400px; width: 100%; overflow-y: auto; }
#sequenceModal .modal-body {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
}

div#sequencebutton {
  display: flex; flex-direction: row; flex-grow: 1; align-items: center;
}
.sequenceButton { background-color: #b4e7b4; }

/* =============================================
   SPINNER ATTENTE
   ============================================= */
.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 50px; height: 50px;
  margin: 7px;
  border: 6px solid transparent;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-top-color: var(--a-color);
}
.lds-ring div:nth-child(1) { animation-delay: -0.65s; }
.lds-ring div:nth-child(2) { animation-delay: -0.40s; }
.lds-ring div:nth-child(3) { animation-delay: -0.30s; }
@keyframes lds-ring {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =============================================
   DIVERS
   ============================================= */
.fauxinput { display:none !important; }
.attention { color: red; stroke: red; }
a.edit     { color: #fc3d4a; stroke: #ff3f4c; }

div.SaveButton { float: right; }
button.save-title-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm);
}

.save-title-btn .flagdb-icons {
  width: 11px; height: 11px;
  filter: var(--icn-filter);
}

.label { margin-left: 8px; font-size: 12px; }
.nav_container { padding: 10px; }


/* panneaux JASPAR */
.jaspar_main_container { flex-direction: column; align-items: stretch; }
.jaspar_body { flex: 1; overflow: auto; background: white; padding: 10px; line-height: 1.4em; }
.jaspar-add-row   { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jaspar-color-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.jaspar-motif-display { display: flex; gap: 4px; margin: 8px 0; }
.jaspar-motif-letter {
  display: inline-block; min-width: 28px; padding: 4px 8px;
  text-align: center; font-weight: bold;
  border: 2px solid transparent; border-radius: var(--radius-sm);
}
.jaspar-motif-list {
  list-style: none; padding: 0; margin: 8px 0 0 0;
  max-height: 120px; overflow-y: auto;
}
.jaspar-motif-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.jaspar-motif-swatch {
  display: inline-block; width: 14px; height: 14px;
  border: 1px solid #888; border-radius: 2px;
}

/* =============================================
   PATTERN WINDOW — boutons lettres
   ============================================= */
button.aLetter     { background-color: #22c55e; color: white; border-color: #16a34a; }
button.cLetter     { background-color: #3b82f6; color: white; border-color: #2563eb; }
button.tLetter     { background-color: #ef4444; color: white; border-color: #dc2626; }
button.gLetter     { background-color: #f59e0b; color: #1a1a1a; border-color: #d97706; }
button.doubleLetter  { background-color: #e0e0ff; color: #2a2a80; border-color: #a0a0d0; }
button.trippleLetter { background-color: #dcfce7; color: #166534; border-color: #86efac; }
button.fullLetter    { background-color: #fef9c3; color: #713f12; border-color: #fde047; }

/* Lettres logo ADN SVG */
.logoDoubleLetter  { fill: none; stroke: #b0afdc; stroke-linecap: round; stroke-width: 4; }
.logoTrippleLetter { fill: none; stroke: #7ee582; stroke-linecap: round; stroke-width: 4; }
.logoFullLetter    { fill: none; stroke: #e5e5b2; stroke-linecap: round; stroke-width: 4; }

/* Brins */
.genomestrand { stroke: #534e67; }
.genomereverse { stroke: #ff8c02; }
.strand  { stroke-width: 3px; color: #534e67; fill: #d1cde4; fill-opacity: 0.2; stroke: #534e67; }
.reverse { stroke-width: 3px; color: #ff8c02; fill: #f6e5d0; fill-opacity: 0.2; stroke: #ff8c02; }

/* Zoom viewer */
div#ZoomViewer rect.cadre    { fill: rgb(255,255,220); stroke: lightblue; }
div#ZoomViewer rect.cadreRev { fill: rgb(220,220,255); stroke: lightblue; }
div#ZoomViewer { width: 100%; height: calc(100% - 30px - var(--title-height) - 10px); z-index: 3000; }
.zoom #zoom { height: 30px; width: 100%; display: flex; justify-content: center; }

/* Stats */
.statistical { width: calc(100% - 10px); height: calc(100% - var(--info-height)); }
div#StatViewer {
  width: 100%; height: 100%; z-index: 3000;
  border-radius: 0 0 5px 5px;
  display: flex; justify-content: center; align-items: center;
}
/* Séparateur */
.separator { display: flex; align-items: center; text-align: center; }
.separator::before, .separator::after { content: ''; flex: 1; border-bottom: 1px solid #ddd; }
.separator:not(:empty)::before { margin-right: .25em; }
.separator:not(:empty)::after  { margin-left: .25em; }

/* Blast texte */
g#Blast g text {
  font-family: Verdana, Arial, sans-serif;
  font-size: .6em; stroke-width: 0;
}
.spanright { position: absolute; right: 6px; }


/* Couleurs expression */
polyline.veryhigh, .CDS .veryhigh, td.veryhigh { stroke: #ff0000; fill: #ff0000; color: #ff0000; }
polyline.high, .CDS .high, td.high             { stroke: #ea00ff; fill: #ea00ff; color: #ea00ff; }
polyline.middle, .CDS .middle, td.middle       { stroke: #00ff48; fill: #00ff48; color: #00ff48; }
polyline.low, .CDS .low, td.low               { stroke: #2200ff; fill: #2200ff; color: #2200ff; }
polyline.verylow, .CDS .verylow, td.verylow   { stroke: #060101; fill: #060101; color: #060101; }
polyline.highlight { stroke: #ff0000; fill: #f3af4a; color: #f3af4a; stroke-width: 3; opacity: .8; }
polyline.veryhigh, polyline.verylow, polyline.low, polyline.middle, polyline.high { opacity: 0.2; }

/* Phylogénétique */
.none    { background-color: white; }
.eudi    { background-color: lightgreen; }
.plants  { background-color: darkgreen; }
.fungi   { background-color: yellow; }
.mamm    { background-color: magenta; }
.insect  { background-color: red; }
.euc     { background-color: orange; }
.eub     { background-color: maroon; }
.arc     { background-color: black; }

 /* Tableaux groupes */
 div#tableGroup { display: inline-block; overflow: scroll; height: calc(100% - 90px); width: 100%; }
 div#tableGroup > .maintable { width: 900px; }
 
 .updown { float: right; }
 .updown .flagdb-icons { filter: invert(100%) opacity(0.8) !important; }
 
 .find_window { height: 100%; margin: 0; background-color: var(--body-bg-color); }
 .find_main_container {
   background-color: #f8f9fa;
   border: 1px solid var(--mi-container-border);
   border-radius: var(--radius-lg);
   box-shadow: 0 2px 8px rgba(0,0,0,0.10);
   padding: 10px;
   height: 100%;
   display: flex; flex-wrap: wrap; justify-content: space-around;
 }
 .findPanel {
   width: calc(100% - 20px); height: 45px;
   display: flex; flex-direction: row; align-items: center; margin-bottom: 10px;
 }
 .find_body_container {
   width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;
   height: calc(100% - 90px);
 }
 
 div#groupModal > div { width: 100%; }
 div#CompareContainer { width: 100%; height: 100%; }
 .right-align  { text-align: right; }
 .center-align { text-align: center; }


/* DNA letters SVG */
.N  { fill: none; stroke: #333; stroke-linecap: round; stroke-width: 4; }
.A  { fill: #22c55e; stroke: #22c55e; stroke-linecap: round; stroke-width: 4; }
.G  { stroke: #f59e0b; stroke-linecap: round; stroke-width: 4; fill: white; }
.C  { stroke: #3b82f6; stroke-linecap: round; stroke-width: 4; fill: white; }
.T  { fill: #ef4444; stroke: #ef4444; stroke-linecap: round; stroke-width: 4; }
.Aa { fill: none; stroke: #22c55e; color: #22c55e; stroke-linecap: round; }
.Ga { stroke: #f59e0b; stroke-linecap: round; color: #f59e0b; fill: none; }
.Ca { stroke: #3b82f6; stroke-linecap: round; color: #3b82f6; fill: none; }
.Ta { fill: #ef4444; color: #ef4444; stroke: #ef4444; stroke-linecap: round; }
.Aatick { fill: #22c55e; stroke: #22c55e; }
.Gatick { stroke: #f59e0b; fill: #f59e0b; }
.Catick { stroke: #3b82f6; fill: #3b82f6; }
.Tatick { fill: #ef4444; stroke: #ef4444; }




/* =========================================
   MODERN UI OVERLAY (2026 CLEAN UPGRADE)
   ========================================= */

/* Global feel upgrade */
:root {
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.14);

  --glass-bg: rgba(255,255,255,0.7);
  --blur: blur(10px);

 /* --transition-fast: 160ms ease;
  --transition: 220ms ease;*/
}

/* smoother typography */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.2px;
}

/* soften all containers */
.container,
.mi_container,
.find_main_container,
.modalWindow > div {
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,0.06);
  /*transition: transform var(--transition), box-shadow var(--transition);*/
}

.container:hover,
.mi_container:hover {
  box-shadow: var(--shadow-md);
}

/* HEADER → glassmorphism modern look */
header {
  background-color: var(--glass-bg);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: none;
}

/* navbar links modern hover */
a.head, a.ddown {
 /* transition: all var(--transition-fast);*/
  border-radius: 8px;
}

a.head:hover, a.ddown:hover {
  background: rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

/* buttons → modern pill style */
button.header-btn {
  border-radius: 999px;
  /*transition: all var(--transition-fast);*/
  box-shadow: none;
}

button.header-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* inputs → cleaner */
input.form-control,
select.form-select,
textarea.form-control {
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
 /* transition: all var(--transition-fast);*/
}

input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus {
  box-shadow: 0 0 0 3px rgba(120,120,200,0.15);
}

/* dropdown menus → modern floating cards */
ul.ddown-menu {
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
}

/* containers → card style */
.container {
  border-radius: 14px;
  overflow: hidden;
}

/* titles → softer bar */
.container_title {
  letter-spacing: 0.3px;
  font-weight: 600;
}

/* main layout spacing upgrade */
.main_container {
  gap: 10px;
  padding: 10px;
}

/* modals → modern centered card */
.modalWindow > div {
  transform: translateY(0);
  animation: modalIn 180ms ease-out;
}

@keyframes modalIn {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* tooltip modern */
div.tooltip,
ul.tooltip {
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: var(--shadow-md);
}

/* scrollbars (modern touch) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.25) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.35);
}

/* footer → lighter */
.footer {
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.7);
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* subtle hover everywhere clickable */
a, button, .clickable {
  /*transition: all var(--transition-fast);*/
}

/* remove heavy shadows already present (override old header shadow) */
header {
  box-shadow: none !important;
}