/* bleu 2c4b8b */
/* beige pale eae2d4 */
/* brun foncé 9b5221 */
/* brun pale e5a045 */
/* vert fonce 31561d */
/* bleu pale 79b0c5 */
/* bleu moyen 31738d */
/* bleu fonce 063850 */ 

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@900&family=Poppins&display=swap');

/* MODEL #ORIGINAL */

/*
:root {
  --main-color-darker: #063850; 
  --main-color-medium: #31738d; 
  --main-color-light: #79b0c5; 
  --light-colored-bar : #eae2d4; 
  --ultra-light-colored-bg : #cccccc;
  --highlight-color : #e5a045; 
  --gray-bg-color: #cccccc; 
  --notif-red-color : #FF3B30; 
}
*/
 
/* MODEL #3 */

:root {
    --main-color-darker: #223654; /*#063850; */
    --main-color-medium: #19406C; /*#31738d; */
    --main-color-light: #4A98D9; /*#85b8e4; */
    --alt-color-darker: #16682f;
    --alt-color-medium: #0f8d35;
    --alt-color-light: #04a836;
    --light-colored-bar : #DAE6F0; 
    --ultra-light-colored-bg : #a4cd89; /*#D7F0BB; /*#cfe1a5; /*#c6de8f; /*#a3bf5c; /*#b5c284; */
    --highlight-color : #9ac8f0; /* #61a3e5; */
    --highlight-color-orange : #e5a045;
    --gray-bg-color: #FBFBFF; 
    --gray-dark-bg-color: #898989; 
    --notif-red-color : #063850;/*#FF3B30; */
	--row-alt-1 : #DAE6F0;/*#eae2d4 /*#DAE6F0;/*#DAE6F0 */ ;
	--row-alt-2 : #C1DEC0;/*#bfd1df /*#C1DEC0;/*#cfe3be */;
	--row-hover : #9ac8f0; /* #DE9966;/*#9ac8f0 */;
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --alert-succes-color : #04AA6D;

}


/* ////////////.  #IP  */


.indexPhotoClicker { 
  position: absolute;
  width: 120px;
  height: 120px;
}

.indexPhotoClicker,
.indexPhotoClicker button {
  font-weight: 600;
}

.new-text {
    color:white;
    font-weight: 600;
    background-color: var(--highlight-color-orange);
}

.old-text {
    color:white;
    font-weight: 600;
    background-color: red;
    text-decoration: line-through;
}

.indexPhotoClicker button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-size: cover;
  border-radius: 20%;
  border: 0;
  color: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  transition: all .1s;
}

.icon-mqcoll{
    height : 16px;
    background-color: white;
    border-radius: 3px;
}

.img-mqcoll {
    height: 160px;
    border : 3px solid var(--main-color-darker);
    border-radius: 6px;
    margin-right: 10px;
    margin-top: 0;
    margin-bottom: 8px;
    min-width: 60px;
    background-color : rgb(193, 193, 193);
}

.img-mqcoll:hover {
    border : 3px solid var(--highlight-color);
}

.numbersComp {
	display : none;
}

.indexPhotoClicker button:hover { outline: 4px solid var(--alert-succes-color) }

.indexPhotoClicker button:hover .text-overlay-index-photo2{ opacity:1.0; }
    
.indexPhotoClicker button:focus { outline: 4px solid var(--alert-succes-color) }

.indexPhotoClicker ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}

.tools {
    border: 1px solid #223654;
    background: #FFF;
    font-family: 'Roboto', serif;
    color: #000;
    padding: 3px;
    margin: 2px 0px;
    width:26px;
    height:26px;
    text-align:center;
    text-decoration: none;
    border-radius : 2px;
    display:none;
}

.indexPhotoClicker li {
  z-index: 2000;
  position: absolute;
  width: 0;
  height: 100%;
  margin: 0 50%;
  -webkit-transform: rotate(-360deg);
  transition: all 0.8s ease-in-out;
}

.autocompleteBuffer {
    height:250px;
    user-select: none;
}

.w3-right-align {
    font-size : 23px;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #4A98D9;;
  margin-left: 5px;
  font-size: 13px;
  margin-top: 6px
}

.icon svg {
  fill: #fff;
}

.bar-icon {
    height: 22px;
    width: 22px;
    margin-left:auto;
    margin-right: calc(5px);
    z-index:1000;
}

.bar-icon svg{
    fill: #fff;
}

.bar-icon-blue {
    height: 22px;
    width: 22px;
    margin-left:auto;
    margin-right:5px;
}

.bar-icon-blue svg{
    fill: var(--main-color-darker);
}

.icon-off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #BBB;;
  margin-left: 5px;
  font-size: 13px;
  margin-top: 6px
}

.icon-off svg {
  fill: #fff;
}


.login-name {
    text-decoration: none;
    color: #fff;
    margin: 0 8px;
    font-weight: 600;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-content: center;
	align-items: center;
}

.login-name:hover {
    text-decoration: none;
    color: var(--highlight-color);
    margin: 0 8px;
    font-weight: 600;
}

.login-icon {
    margin-left : 8px;
    height:16px;
    margin-top:4px;
}

.login-abrev {
    margin-left : 8px;
    font-size: 20px;
    margin-top: 4px;
}



.arrow-menu-mobile {
    height:16px;
    width:16px;
    margin: 0 0 2px 4px;
}

.overlay-ip {
    height:100%;
    width:100%;
    background-color: rgba(24,97,161,0.80);
    opacity:0;
    padding: 25% 0;
}

.indexPhotoClicker li input { display: none; }

.indexPhotoClicker li input + label {
  color : transparent;
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0;
  height: 0;
  line-height: 16px;
  margin-left: 0;
  border-radius: 20%;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
  background-size: cover;
  background-color: var(--alert-succes-color);
}

.indexPhotoClicker li input + label:hover .text-overlay-index-photo2{ opacity:1.0; }
    
.indexPhotoClicker li input + label:hover { color:white; }
    
.indexPhotoClicker li input + label:hover .overlay-ip { opacity:1; }

.indexPhotoClicker li input:checked + label:hover { color: #449d44;/*background: #449d44;*/ }

.indexPhotoClicker.open li input + label {
  width: 120px;
  height: 120px;
  line-height: 60px;
  margin-left: -60px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  outline: 4px solid var(--alert-succes-color);
}
    
.ip-container {
    width:120px;
    height:120px;
}

.text-overlay-index-photo2 {
  color: white;
  font-size: 13px;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  vertical-align: middle;
  user-select: none;
  font-weight: 500;
  opacity: 0;
  background-color: rgba(0,0,0,0.30);
  border-radius: 20%;
  height: 100%; 
  width: 100%;
  padding-top : calc(30%);
  hyphens: auto;
  -webkit-hyphens: auto;
  word-spacing: -0.05em;
  padding-left: 3px;
  padding-right: 3px;

}

.text-overlay-index-photo2 a {
  color: white!important;
  font-size: 13px;
  user-select: none;
  font-weight: 500;
}

/*  FIN INDEX-PHOTO*/



@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px); 
  @include order(2);
}

/* Make content area fill the entire browser window */
.fullscreen {
  display: block; 
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

.fullScreenImage {
    z-index:1000003;
    object-fit:contain;
    width:100%;
    height:100%;
}

.fullScreenImageTopBar{
    z-index:1000003;
    width:100%;
    min-height:60px;
    background-color : #555;
    color: white;
    text-align: center;
    padding:10px;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: flex-start;
    align-content:center;
    
}

.fullScreenImageTopFiller{
    z-index:1000003;
    width:100%;
    height:var(--sat);
    background-color : #555;
    color: white;
    text-align: center;
    padding:0px;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: flex-start;
    align-content:center;
    
}

.fullScreenImageConteneur{
    z-index:1000003;
    width:100%;
    height: calc(100% - 60px - var(--sat) - var(--sab));
}

.icon-menu-photo {
	height:22px;
	margin: 0 0 5px 5px;
	cursor: pointer;
}

@supports (-webkit-touch-callout: none) {
  .fullScreenImage {
    /* The hack for Safari */
    height: -webkit-fill-available;
  }
}


.top-buffer-index {
    height: 135px;
}

.conteneur-flex-row-center-around {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-around;
    align-items: center;
    align-content:center;
    width: 100%;
}


html {
  display: block;
  margin: 0;
  height: 100%;
  width : calc(100%);
  min-width: calc(100%);
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  min-height: calc(100% + var(--sat));
  padding: var(--sat) var(--sar) var(--sab) var(--sal);
  background-attachment: fixed;
  /* background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF calc(100% - env(safe-area-inset-bottom)), var(--light-colored-bar) calc(100% - env(safe-area-inset-bottom) + 1px), var(--light-colored-bar) 100%); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overscroll-behavior: none;
  overflow-y: hidden;
}

body {
    overscroll-behavior: none;
}

.top-buffer-over {
    
    position:fixed;
    top: 0;
    z-index:100001;
    width: 100%;
    background-color: var(--main-color-darker);
    height: var(--sat);
    
}

.bot-buffer-over {
    
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items: flex-start;
    align-content:flex-start;
     
    position:fixed;
    top: auto;
    z-index:100001;
    width: 100%;
    background-color: var(--light-colored-bar);
    height: calc(var(--sab));
    bottom : 0px;
    
}

.plus-section {
	cursor:pointer;
	width:35px;
	margin :5px auto;
}

.scores-table {
    border-collapse: collapse;
    width:100%;
    
}

.scores-container {
    border-radius: 6px;
    width:80%;
    height:250px;
    border:2px solid var(--main-color-darker);
    text-align:left;
    overflow-y:auto;
    overflox-x:hidden;
    padding : 10px;
    font-size : 16px;
    font-weight: 500;
    font-weight: 500;
}

textarea:focus, input:focus{
    outline: none;
}

/* STICKY ROWS PLUGIN  START */

table.table-with-sticky-rows {
    border: 1px solid #CCC;
    border-collapse: collapse;
    line-height: 32px;
    margin: auto;
}

table.table-with-sticky-rows td {
    padding: 6px 12px;
    border: 1px solid #CCC;
}

table.table-with-sticky-rows>thead,
table.table-with-sticky-rows>[class*="header-"] {
    font-weight: bold;
    background-color: #e6ffe5;
}

table.table-with-sticky-rows>.header-2 {
    background-color: #dad8ff;
}

table.table-with-sticky-rows>.header-3 {
    background-color: #ffdfe4;
}

table.table-with-sticky-rows>.header-4 {
    background-color: #fffcda;
}

table.table-with-sticky-rows>.header-5 {
    background-color: #dad8ff;
}

table.table-with-sticky-rows>.header-6 {
    background-color: #ffdfe4;
}

table.table-with-sticky-rows>.header-7 {
    background-color: #fffcda;
}

table.table-with-sticky-rows>.header-8 {
    background-color: #dad8ff;
}

table.table-with-sticky-rows>.header-9 {
    background-color: #ffdfe4;
}

table.table-with-sticky-rows>.header-10 {
    background-color: #fffcda;
}

table.table-with-sticky-rows>.header-11 {
    background-color: #dad8ff;
}

.sticky-header {
    position: fixed;
    overflow: hidden;
    z-index: 1;
}

.sticky-header table {
    background-color: #fff;
}

.sticky-table-for-shifting {
    position: absolute;
    left: 0;
    top: 0;
}

.hidden {
    display: none !important;
}

/* STICKY ROWS PLUGIN  START */


h1 {
    display: block;
    font-size: 1.8em;
    color : var(--main-color-darker);
    margin : 0 0 2px 0;
    font-weight: 600;
}
h2 {
    color : var(--main-color-darker);
    display: block;
    font-size: 1.6em;
    margin : 0 0 3px 0;
    font-weight: 600;
}

h3 {
    color : var(--main-color-darker);
    display: block;
    font-size: 1.3em;
    font-weight: 600;
    margin : 0 0 3px 0;
}

h4 {
    color : var(--main-color-medium);
    display: block;
    font-size: 1em;
    margin : 0 0 3px 0;
	font-weight: 500;
}

.top-result {
	text-align: center;
	margin : 2px 0 4PX 0;
}

.mot-accueil {
	font-size: 1.2em;
}

.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}

.contributeurs {
    margin-bottom:5px;
    font-weight: 500;
}


@keyframes fade {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



.score {
	display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
	width: 100%;
    color : var(--main-color-darker);
    font-size: 1.2em;
    margin : 0 0 3px 0;
    font-weight: 500;
	text-align: center;
	margin-left:auto;
	margin-right: auto;
	margin-top: 8px;
}

.aside-title {
    color : var(--main-color-light);
    display: block;
    font-size: 1.5em;
    margin : 0 0 3px 0;
    font-weight: 500;
}

.no-opacity {
    opacity: 0;
}

.phylo-1 {
    display: block;
    font-size: 1.7em;
    color : var(--main-color-darker);
    margin : 4px 0 2px 0;
    font-weight: 500;
}
.phylo-2 {
    color : var(--main-color-medium);
    display: block;
    font-size: 1.5em;
    margin : 0 0 3px 2%;
    font-weight: 500;
   
}

.phylo-3 {
    color : var(--main-color-light);
    display: block;
    font-size: 1.3em;
    margin : 0 0 3px 4%;
    font-weight: 500;
    
}

.phylo-4 {
    color : var(--main-color-darker);
    display: block;
    font-size: 1.2em;
    margin : 0 0 3px 6%;
    font-weight: 500;
    
}

.phylo-5 {
    color : var(--main-color-medium);
    display: block;
    font-size: 1.1em;
    margin : 0 0 3px 8%;
    font-weight: 500;
    
}

.phylo-6 {
    color : var(--main-color-light);
    display: block;
    font-size: 1.0em;
    margin : 4px 0 4px 10%;
    font-weight: 500;
    
}

.phylo-7 {
    color : var(--main-color-darker);
    display: block;
    font-size: 1.0em;
    margin : 4px 0 4px 12%;
    font-weight: 500;
    
}

.phylo-8 {
    color : var(--main-color-medium);
    display: block;
    font-size: 1.0em;
    margin : 4px 0 4px 14%;
    font-weight: 500;
    
}

.phylo-9 {
    color : var(--main-color-light);
    display: block;
    font-size: 1.0em;
    margin : 4px 0 4px 16%;
    font-weight: 500;
    
}

.phylo-10 {
    color : var(--main-color-darker);
    display: block;
    font-size: 1.0em;
    margin : 4px 0 4px 18%;
    font-weight: 500;
    
}

.phylo-11 {
    color : var(--alt-color-darker);
    display: block;
    font-size: 1.0em;
    margin : 4px 0 4px 20%;
    font-weight: 500;
    
}

.phylo-filter-1 {
    display: block;
    font-size: 1.2em;
    color : var(--main-color-darker);
    margin : 6px 0 6px 0;
    font-weight: 500;
}
.phylo-filter-2 {
    color : var(--alt-color-darker);
    display: block;
    font-size: 1.2em;
    margin : 6px 0 6px 2%;
    font-weight: 500;
   
}

.phylo-filter-3 {
    color : var(--main-color-medium);
    display: block;
    font-size: 1.2em;
    margin : 6px 0 6px 4%;
    font-weight: 500;
    
}

.phylo-filter-4 {
    color : var(--alt-color-medium);
    display: block;
    font-size: 1.2em;
    margin : 6px 0 6px 6%;
    font-weight: 500;
    
}

.phylo-filter-5 {
    color : var(--main-color-light);
    display: block;
    font-size: 1.2em;
    margin : 6px 0 6px 8%;
    font-weight: 500;
    
}

.phylo-filter-6 {
    color : var(--alt-color-light);
    display: block;
    font-size: 1.2em;
    margin : 6px 0 6px 10%;
    font-weight: 500;
    
}

.phylo-filter-7 {
    color : var(--main-color-darker);
    display: block;
    font-size: 1.2em;
    margin : 6px 0 6px 12%;
    font-weight: 500;
    
}

.phylo-filter-8 {
    color : var(--alt-color-darker);
    display: block;
    font-size: 1.2em;
    margin : 6px 0 6px 14%;
    font-weight: 500;
    
}

.phylo-filter-9 {
    color : var(--main-color-medium);
    display: block;
    font-size: 1.2em;
    margin : 6px 0 6px 16%;
    font-weight: 500;
    
}

.phylo-filter-10 {
    color : var(--alt-color-medium);
    display: block;
    font-size: 1.2em;
    margin : 6px 0 6px 18%;
    font-weight: 500;
    
}

.phylo-filter-11 {
    color : var(--main-color-light);
    display: block;
    font-size: 1.2em;
    margin : 6px 0 6px 20%;
    font-weight: 500;
    
}


.phylo-small-1 {
    display: block;
    font-size: 1.2em;
    color : var(--main-color-darker);
    margin : 0 0 1px 0;
    font-weight: 500;
}
.phylo-small-2 {
    color : var(--alt-color-darker);
    display: block;
    font-size: 1.2em;
    margin : 0 0 1px 1%;
    font-weight: 500;
    
}

.rubTitreAutoFill {
    display: block;
    font-size: 1.05em;
    color : var(--main-color-darker);
    margin : 0 0 1px 0;
    font-weight: 500;
}

.rubDescAutoFill {
    color : var(--alt-color-darker);
    display: block;
    font-size: 1em;
    margin : 0 0 1px 1%;
    font-weight: 500;
    
}

.phylo-small-3 {
    color : var(--main-color-medium);
    display: block;
    font-size: 1.1em;
    margin : 0 0 1px 2%;
    font-weight: 500;
    
}

.phylo-small-4 {
    color : var(--alt-color-medium);
    display: block;
    font-size: 1.1em;
    margin : 0 0 1px 3%;
    font-weight: 500;

}

.phylo-small-5 {
    color : var(--main-color-light);
    display: block;
    font-size: 1.0em;
    margin : 0 0 1px 4%;
    font-weight: 500;
   
}

.phylo-small-6 {
    color : var(--alt-color-light);
    display: block; 
    font-size: 1.0em;
    margin : 0px 0 1px 5%;
    font-weight: 500;

}

.phylo-small-7 {
    color : var(--main-color-darker);
    display: block; 
    font-size: 1.0em;
    margin : 0px 0 1px 6%;
    font-weight: 500;

}

.phylo-small-8 {
    color : var(--main-color-darker);
    display: block; 
    font-size: 1.0em;
    margin : 0px 0 1px 7%;
    font-weight: 500;

}

.phylo-small-9 {
    color : var(--main-color-medium);
    display: block;
    font-size: 1.0em;
    margin : 0 0 1px 8%;
    font-weight: 500;
    
}

.phylo-small-10 {
    color : var(--alt-color-medium);
    display: block;
    font-size: 1.0em;
    margin : 0 0 1px 9%;
    font-weight: 500;

}

.phylo-small-11 {
    color : var(--main-color-light);
    display: block;
    font-size: 1.0em;
    margin : 0 0 1px 10%;
    font-weight: 500;
   
}

.lien-hover-blanc:hover {
    color: #fff;
}

.texte-espece {
    color : #fff;
    display: block;
    font-size: 3.0vw;
    margin : 2px 20px 2px 18px;
    font-weight: bold;
    min-width : 90%;
    text-align : center;
    background-color:var(--main-color-darker);
    border-radius: 6px;
    padding: 6px;
}

/* TTT */



.titre-espece {
  background-color: var(--light-colored-bar); /* var(--gray-bg-color); /* #eae2d4; */
  color: var(--main-color-darker);
  padding: 3px 0 0 0;
  box-sizing: border-box;
  text-align: center;
  /*background-image : url("../images/banner-trans-2.png");*/
  width:100%;
  height:48px;
  font-size:min(1.8vh, 15px); 
}



.titre-nom-espece {
	margin-top : 2px;
}


.sous-titre {
	color : var(--main-color-darker);
    margin : 0 0 3px 0;
}

.sous-titre a:hover {
    color : var(--highlight-color-orange);
}

.sous-titre-top {
    font-size: 0.55em;
    text-align: center;
}

.sous-titre-top-2 {
    color : var(--main-color-darker);
    display: block;
    font-size: 0.7em;
    margin : 0 0 3px 0;
    font-weight: 600;
    text-align: center;
}

.bread-groups {
	color : var(--main-color-darker);
    font-size: min(1.8vh, 15px);
    margin : 0 0 3px 0;
    padding : 4px 0;
    background-color: var(--light-colored-bar);
    text-decoration: none;
}

.phylo-titre {
    font-size: min(1.8vh, 15px);
    color : var(--main-color-darker);
    font-weight: 500;
    /*text-decoration: none;*/
}

.phylo-titre:hover {
    color : var(--highlight-color-orange);
}

.phylo-titre-desc {
    font-size: 16px;
    color : var(--main-color-darker);
    font-weight: 500;
    /*text-decoration: none;*/
}

.phylo-titre-desc:hover {
    color : var(--highlight-color-orange);
}

.menu-section-superieur {
    background-color:var(--light-colored-bar);
    padding: 0;
    height:44px;
    text-align: center;
}

.icon-u {
      background-color: var(--gray-bg-color); 
      margin: 0;
      padding: 3px 2px 3px 2px;
      box-sizing: border-box;
      text-decoration: none;
      width:58px;
      border-top : 2px solid var(--main-color-darker);
      border-left : 2px solid var(--main-color-darker);
      border-right : 2px solid var(--main-color-darker);
      border-radius: 6px 6px 0 0;
      
}

.logo-titre-mq {
    height : 40px;
    margin-top : 0px;
}

.logo-titre-qc {
    height : 25px; 
}

.h2-link {
    color : var(--main-color-darker);
    display: block;
    font-size: 1 em;
    margin : 0 0 3px 0;
    font-weight: 600;
    text-decoration:none;
}

.h2-link:hover {
    color : var(--highlight-color);
    display: block;
    font-size: 1 em;
    margin : 0 0 3px 0;
    font-weight: 600;
    text-decoration:none;
}

.icon-u:hover  {
    color : var(--main-color-darker);
    
}

.icon-u-off {
      margin: 0;
      padding: 3px 2px 3px 2px;
      box-sizing: border-box;
      background-color:transparent;
      text-decoration: none;
      width:58px;
      border-top : 2px solid transparent;
      border-left : 2px solid transparent;
      border-right : 2px solid transparent;
      border-radius: 6px 6px 0 0;
      
}

.icon-u-inf {
      margin-top: 0px;
      background-color: white; 
      padding: 3px 2px 3px 2px;
      box-sizing: border-box;
      text-decoration: none;
      width:50px;
      border-bottom : 2px solid var(--main-color-darker);
      border-left : 2px solid var(--main-color-darker);
      border-right : 2px solid var(--main-color-darker);
      border-radius: 0px 0px 6px 6px;
	  border-top : 1px solid white;
      z-index: 60;
      
}

.icon-u-inf:hover {
    color : var(--main-color-darker);
}

.icon-u-inf-off {
      margin-top: 0px;
      padding: 3px 2px 3px 2px;
      box-sizing: border-box;
      background-color: var(--light-colored-bar);
      text-decoration: none;
      width:50px;
	  border-top : 2px transparent; /* var(--main-color-darker) */;
      border-bottom : 2px solid transparent; /* var(--main-color-darker) */;
      border-left : 2px solid transparent; /* var(--main-color-darker) */;
      border-right : 2px solid transparent; /* var(--main-color-darker) */;
      border-radius: 0px 0px 6px 6px;
      z-index: 1;
      opacity : 1;
}

.icon-u-off:hover, .icon-u-inf-off:hover {
    color : var(--main-color-darker);
}

.menu-section-inferieur {
    z-index: 10000;
    background-color: var(--light-colored-bar);
    height:46px;
    text-align: center;
    position: fixed;
    bottom:  calc(var(--sab));
    top : auto;
    width: 100%;
    /*border-top : 4px solid var(--main-color-darker);*/
    padding-bottom: 2px;
    overflow-x : auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
}


.phylo-text {
    user-select: none;
}

.phylo-hide {
    display:none;
}

.fungorum-popup {
    display:none;
    position : absolute;
    top : 160px;
    left : 30vw;;
    right : auto;
    background-color: white;
    border : 2px solid var(--main-color-darker);
    border-radius: 6px;
    width : 600px;
    height : 400px;
    overflow: auto;
}

a { 
    color: var(--main-color-darker);
    font-weight: 500;
} 

a:hover {
    color: var(--highlight-color);
    font-weight: 500;
}

img {
    padding : 0px;
    box-sizing: border-box;
    vertical-align:middle;
}

ico
{
  color: var(--main-color-darker); 
  font-size: 2.8em;
  text-align: center;
  margin : auto;
}

i2
{
  color: #FFF; 
  font-size: 2.8em;
  text-align: center;
  margin-left: 3px;
}

input[type=text] {
    width : 100%;
    box-sizing: border-box;
    border: 2px solid var(--main-color-darker);
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 6px 8px; 
    background-repeat: no-repeat;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  background-color: #DAF0FF;
  
}

select {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width : calc(96%-14px);
    color: #747474;
    box-sizing: border-box;
    border: 2px solid var(--main-color-darker);
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('../images/drop-down-icon.png');
    background-position: 6px 8px; 
    background-repeat: no-repeat;
    padding:8px 15px 8px 30px;
    transition: width 0.4s ease-in-out;
}

select:focus {
  background-color: #DAF0FF;
  outline: none;
}

.index-photo-espece-lien {
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    text-decoration: underline;
}

.index-photo-espece-lien:hover {
    color: #fff;
}

.index-photo-groupe {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0 0;
    overflow: hidden;
    width: 100%;
    height: auto;
    box-sizing : border-box;
}

.index-photo-photo {
    margin: 0;
    height: 30vw;
    width: 30vw;
    border: 2px solid var(--gray-bg-color);
    object-fit: cover;
    box-sizing: border-box;
    aspect-ratio: 1/1;
}



.index-photo-buffer {
    border: 2px solid transparent;
    
}

.photo-block-container {
    border : 2px solid var(--main-color-darker);
    border-radius: 6px;
    background-color: var(--main-color-darker);
    margin : 6px;
    padding: 6px;
    box-sizing:border-box;
    min-width:360px;
}

.menu-filler{
    height:  62px;
}



.photo-block-container2 {
    border : 2px solid var(--main-color-darker);
    border-radius: 6px;
    background-color: var(--main-color-darker);
    margin : 6px;
    padding: 6px;
    box-sizing:border-box;
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width:auto;
        
}

.reste-photo {
    display : none;
}

.collapse-icon {
    display:none;
}

.definition {
    position:absolute;
    top:100;
    left:100;
    display:none;
    background-color : #fff;
    color : var(--main-color-darker);
    font-size: 13px;
    z-index : 100003;
    max-width:300px;
    border : 2px solid var(--main-color-darker);
    text-align : left;
    padding : 4px;
    border-radius: 6px;
    box-sizing : border-box;
    /*overflow-y : auto;*/
}


.image-glossaire {
    max-height:160px;
    object-fit:contain;
    margin:7px;
    border: 2px solid var(--main-color-darker);
}

.glossaireImagePreview {
    max-height:160px;
    object-fit:contain;
    margin:7px;
    border: 2px solid var(--main-color-darker);
}

.image-glossaire:hover {
    border: 2px solid var(--highlight-color);
}

.glos-lat {
    font-style : italic;
    color : red;
}

.mini-preview {
    position:absolute;
    top:100;
    right:100;
    display:none;
    background-color : #fff;
    color : var(--main-color-darker);
    font-size: 13px;
    z-index : 10000;
    max-width:300px;
    border : 2px solid var(--main-color-darker);
    text-align : right;
    padding : 4px;
    border-radius: 6px;
    box-sizing : border-box;
}

.help {
    position:absolute;
    top:100;
    left:100;
    display:none;
    background-color : #fff;
    color : var(--main-color-darker);
    font-size: 13px;
    z-index : 10000;
    max-width:300px;
    border : 2px solid var(--main-color-darker);
    text-align : left;
    padding : 4px;
    border-radius: 6px;
    box-sizing : border-box;
    
}

.fungorum-popup{
    position:absolute;
    display:none;
    background-color : #fff;
    color : var(--main-color-darker);
    font-size: 13px;
    z-index : 10000;
    left:15%;
    top:25%;
    width:70%;
    border : 2px solid var(--main-color-darker);
    text-align : left;
    padding : 4px;
    border-radius: 6px;
    box-sizing : border-box;
    height:50%;
    overflow-y:auto;
    overflow-x: hidden;
    margin:auto;
}

.vocabulaire {
    cursor: pointer;
    font-weight : 500;
    transition-delay : 0s; 
   /* padding: 0 0.1em; */
}

.vocabulaire:hover {
    color : var(--highlight-color);
} 

.voc {
    cursor: pointer;
	font-weight : 500; 
    transition-delay : 0s;
    font-style: normal;
}

.voc:hover {
    color : var(--highlight-color); 
}

.strongCles {
    font-style:normal;
    font-weight:700!important;
}

.strongCles > .voc {
    font-weight:700!important;
 }

.checkbox-wrapper-35 {
	width : auto;
	display:inline-flex;
	flex-direction: column;
}

.checkbox-wrapper-35 .switch {
    display: none;
  }

.desc-ext-link{
	color : var(--main-color-darker);
	font-weight: 500;
}

.desc-ext-link:hover {
	color : var(--highlight-color);
	font-weight: 500;
}

.checkbox-wrapper-35 .switch + label {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--main-color-darker);
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    line-height: 15px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .checkbox-wrapper-35 .switch + label::before,
  .checkbox-wrapper-35 .switch + label::after {
    content: '';
    display: block;
  }

  .checkbox-wrapper-35 .switch + label::before {
    background-color: #aaa;
    border-radius: 500px;
    height: 15px;
    margin-right: 8px;
    -webkit-transition: background-color 0.125s ease-out;
    transition: background-color 0.125s ease-out;
    width: 25px;
  }

  .checkbox-wrapper-35 .switch + label::after {
    background-color: #fff;
    border-radius: 13px;
    box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
    height: 13px;
    left: 1px;
    position: absolute;
    top: 1px;
    -webkit-transition: -webkit-transform 0.125s ease-out;
    transition: -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out;
    transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
    width: 13px;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-text {
    display: block;
    margin-right: .3em;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-toggletext {
    display: block;
    font-weight: bold;
    height: 15px;
    overflow: visible;
    position: relative;
    width: 25px;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-unchecked,
  .checkbox-wrapper-35 .switch + label .switch-x-checked {
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
    transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out, opacity 0.125s ease-out;
    transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-unchecked {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-checked {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  .checkbox-wrapper-35 .switch + label .switch-x-hiddenlabel {
    position: absolute;
    visibility: hidden;
  }

  .checkbox-wrapper-35 .switch:checked + label::before {
    background-color: var(--highlight-color);
  }

  .checkbox-wrapper-35 .switch:checked + label::after {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  .checkbox-wrapper-35 .switch:checked + label .switch-x-unchecked {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  .checkbox-wrapper-35 .switch:checked + label .switch-x-checked {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  justify-content : flex-center;
  position: fixed;
  z-index:100004;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  vertical-align:middle;
}

.overlay-content {
  position: relative;
  width: 100%;
  height: 100%;
  z-index:100004;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: var(--highlight-color); /*#818181;*/
  display: block;
  transition: 0.3s;
  
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  z-index:100001;
}

.description-section-color {
  background-color: var(--gray-bg-color);
  color: var(--main-color-darker);
  text-align: left;
  box-sizing: border-box;
  border-radius:6px;
}

.textareaDescEdit {
    width:100%;
    height:100px;
    border-radius: 8px;
    
}


.index-section-color {
  background-color: var(--gray-bg-color);
  color: var(--main-color-darker);
  text-align: center;
  box-sizing: border-box;
  border-radius:6px;
}

.macro-section-color {
  background-color: var(--gray-bg-color);
  color: var(--main-color-darker);
  text-align: center;
  box-sizing: border-box;
  border-radius:6px;
}

.micro-section-color {
  background-color: var(--gray-bg-color);
  color: var(--main-color-darker);
  text-align: center;
  box-sizing: border-box;
  border-radius:6px;
}

.tableaux-section-color {
  background-color: var(--gray-bg-color);
  color: var(--gray-bg-color);
  text-align: center;
  box-sizing: border-box;
  border-radius:6px;
}

.table-publications {
    border:2px solid var(--main-color-darker);
    border-radius: 12px;
    padding:5px;
    margin:20px 0;
    width:100%;
    table-layout:fixed;
    word-wrap: break-word;
    
}

.comp-1 {
    display : none;
}

.comp-2 {
    display : none;
}

.comp-3 {
    display : none;
}

.comp-4 {
    display : none;
}

.table-photo-comp {
    border-collapse: collapse;
    width : 100%;
    border: 0;
    padding : 5;
    box-sizing: border-box;
    table-layout: fixed;
}

.table-photo-comp td {
    border: 0;
    padding : 2px;
    vertical-align: top;
    /*width:33%;*/
}

.table-photo-comp th {
    border: 0;
    padding : 2px;
    vertical-align: top;
    text-align: center;
    /*width:33%;*/
}

.table-desc-comp {
    border: 0;
    padding : 5px;
    box-sizing: border-box;
    width: 100%;
    border-spacing: 5px;
    table-layout: fixed;
}

.table-desc-comp td {
    border: 0;
    padding : 2px;
    vertical-align: top;
    width:33%;
}

.desc-td {
    vertical-align: top;
    min-height: 2.3em;
    box-sizing: border-box;
    padding: 1rem!important;
    text-align: left;
    background-color: #F5F7F8;
    border : 1px solid #BFD3E1!important;
    white-space: pre-wrap;
    word-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    max-height: 160px;
}

.table-desc-comp th {
    border: 0;
    vertical-align: top;
    text-align: center;
    width:33%;
}

.table-title-comp {
    border-collapse: collapse;
    width : 100%;
    border: 0;
    padding : 5;
    box-sizing: border-box;
    table-layout: fixed;
    
}

.table-title-comp td {
    border: 0;
    vertical-align: top;
    width:auto;
    padding: 10px;
    font-size : 1.4em;
    font-weight: 500;
}


.flickr_logo{
	position: absolute;
	z-index: 250;
	top : 4px;
	margin-left : auto;
	right : 4px;
	cursor: pointer;
	height : 20px;
	width : 20px;
	border-radius : 4px;
	opacity : 0.75;
	border: 2px solid var(--highlight-color);
}

.rubContaineur {
    position: relative;
    margin-right: 5px;
    width:100%!important;
    max-width:  325px!important;
    
}

.xdesearch {
	position: absolute;
	z-index: 250;
	top : 4px;
	margin-left : auto;
	right : 5px;
	cursor: pointer;
	height : 20px;
	width : 20px;
}

.rubContaineurVals {
    position: relative;
    width: calc(100% - 25px)!important;
    
}

.xdevals {
	position: absolute;
	z-index: 250;
	top : 14px;
	margin-left : auto;
	right : 10px;
	cursor: pointer;
	height : 20px;
	width : 20px;
}

.flickr_logo_canvas{
	cursor: pointer;
	height : 20px;
	width : 20px;
	border-radius : 4px;
	opacity : 1;
	border: 2px solid var(--highlight-color);
    display : inline;
}

.right-top-absolute {
	position: inline;

}


.flickr_logo:hover{
	opacity : 1.0;
}

.flickr_logo-inline{
	z-index: 250;
    margin: 0 0 0 5px;
	cursor: pointer;
	height : 22px;
	width : 22px;
	border-radius : 4px;
	border: 2px solid var(--highlight-color);
    display: inline;
    vertical-align : top;
    padding:0!important;
}

.quiz-photo-expand {
	position: absolute;
	z-index: 250;
	top : 0px;
	margin-left : auto;
	left : 0px;
	right: auto;
	cursor: pointer;
	height : 44px;
	width : 44px;
	border-radius : 4px;
	opacity : 0.40;
	border: 2px solid var(--highlight-color);
}

.link_icon{
	position: absolute;
	z-index: 20;
	top : 3px;
	margin-left : auto;
	right : 3px;
	cursor: pointer;
	height : 18px;
	width : 18px;
	opacity : 0.8;
}

.link_icon2{
	position: absolute;
	z-index: 20;
	top : 3px;
	margin-left : auto;
	right : 28px;
	cursor: pointer;
	height : 18px;
	width : 18px;
	opacity : 0.8;
}


.link_icon_title {
	cursor: pointer;
	height : 18px;
	width : 18px;
	margin-bottom : 4px;
}

.titre-sous-titre {
	display : inline;
}

.date_ajout{
    text-align: right;
	font-style : italic;
	font-size : 0.8em;
}

.form-quiz {
    margin-top:20px;
    width:90%;
    text-align:left;
}


[data-href] {
    cursor: pointer;
}



.letter-active {
    color : var(--highlight-color)!important;
    font-weight : bold;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.0em;  /* Preferred icon size */
  display: inline-flex;
  word-wrap: normal;
  white-space: nowrap;
  vertical-align : middle;
}



.search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  margin-left:auto;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.search-container button:hover {
  background: #ccc;
}

.num , .num-percent
{
  color: var(--main-color-darker);
  text-align: center;
  font-weight: 600;
  font-size: 24px;
  font-family: 'Montserrat', serif;
  margin-bottom : 0;
  user-select: none;
}

.text
{
  color: var(--main-color-darker);
  text-align: center;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  user-select: none;
  font-size: 14px;
}

.index-icon-containeur {
    background-color: var(--ultra-light-colored-bg); /*#778d45; /*#aec670;/*var(--alt-color-medium);*/
    padding:15px;
    border-bottom: 10px solid var(--main-color-darker);
    border-radius: 12px;
    cursor: pointer;
    margin : 6px 1px;
    width: 47%;
    height:140px;
    min-width: 115px;
}


.result-msg {
    text-align: center;
    color : var(--main-color-darker);
    display: block;
    font-size: 1.2em;
    margin : 0 0 6px 0;
    padding-top:40px;
}

.result-msg-macro {
    color : var(--main-color-darker);
    display: block;
    font-size: 1.4em;
    margin-left : auto;
    margin-right : auto;
}

.topnav-empty {
  background-color: var(--main-color-darker);
  width : 100%;
  height : 34px;
}

.opacityLow {
    opacity: 0.6;
}

.opacityHigh {
    opacity: 1.0;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: var(--main-color-darker);
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: var(--main-color-light);
  color: black;
}

.topnav:hover {
   opacity: 1.0; 
}

/* Style the active link (or home/logo) */
.active {
  background-color: var(--main-color-darker);
  color: white;
}


/* Center the content in the browser window */
.container {
  margin: auto; 
  text-align: center;
  box-sizing: border-box;
 
}

.flex-center {
    color: var(--main-color-light);
    flex-direction: row;
    justify-content: space-around;
    display: flex; 
    margin-left : auto;
    margin-right : auto;
    margin-top:0px;
    margin-bottom:0px;
    padding: 0 0 0px 0;
    align-items : center;
    width : 96%;
    
}

.flex-center-menu-inf {
    flex-direction: row;
    justify-content: space-between;
    display: flex; 
    margin-left : auto;
    margin-right : auto;
    margin-top:0px;
    margin-bottom:0px;
    padding: 0 0 0px 0;
    align-items : center;
    width : 96%;
    z-index: 10000;
}

.flex-center-menu {
    color: var(--main-color-light);
    flex-direction: row;
    justify-content: space-around;
    display: flex; 
    margin-left : auto;
    margin-right : auto;
    margin-top:0px;
    margin-bottom:-5px;
    padding: 0 0 0px 0;
    align-items : center;
    width : 96%;
    
}

.flex-center-menu-titre {
    flex-direction: row;
    justify-content: space-between;
    display: flex; 
    margin-left : auto;
    margin-right : auto;
    align-items : center;
    padding : 0 10px;
}


.text-label-small {
    font-size : 8px;
    text-align: center;
}

.flex-column {
    flex-direction: column;
    justify-content: space-between;
    display: flex; 
    align-items : center;
    text-align: center;
    margin:0;
    width:100%;
        
}

.flex-column-bottom {
    flex-direction: column;
    justify-content: space-evenly;
    display: flex; 
    align-items : center;
    margin: 6px 2px;
        
}

.container-espece {
    border-collapse: collapse;
    width : 100%;
    border: 0;
    padding : 5;
    box-sizing: border-box;
    /*table-layout:fixed; */
}

.liste-espece , .liste-cles {
    border-collapse: collapse;
    width : 98%;
    table-layout:fixed;
    display : inline-table;
}

.liste-espece td, .liste-espece th  , .liste-cles td , .liste-cles th{
    padding : 0;
	vertical-align: middle;
	
}

.liste-espece td , .liste-cles td{
	border: 2px solid var(--gray-bg-color);
	
}

.liste-espece tbody:nth-child(2n + 1), .liste-cles tbody:nth-child(2n + 1) {background-color: var(--row-alt-1); }
.liste-espece tbody:nth-child(2n + 2), .liste-cles tbody:nth-child(2n + 2) {background-color: var(--row-alt-2); /*var(--ultra-light-colored-bg); /*#bfd1df; */ }
.liste-espece tbody:hover , .liste-cles tbody:hover {background-color: var(--row-hover);}

.is-active {
    background-color : var(--row-hover)!important;
}

.tr-clicker-espece {
    cursor: pointer;
}

.taxo-desc {
    font-size : 1.2em;
}

.index-text-container{
	display:flex;
	align-content: center;
    flex-direction: column;
	margin:0;
    text-align: left;
	
}

.cle-text-container{
	display:flex;
	align-content: center;
    flex-direction: column;
	margin:0;
    text-align: left;
    padding : 10px;
	
}

.cleListe {
    margin: 6px 0;
    border: 1px solid var(--main-color-darker);
    border-radius: 6px;
    padding: 4px;
    background-color: var(--light-colored-bar);
}



div.container-cle {
    margin: 8px 8px;
    text-align:justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: -0.05em; 
}

/* Reset some properties to their defaults inside the examples */
div.container-cle li:before {
    overflow: visible;
    direction: ltr;
    content: "";
    content: none;
    width: auto
}

div.container-cle li {
    margin: 0
}

div.container-cle {
    line-height: auto
}

/* Use :after instead of :before if the part before the leaders risks
being wrapped over two or more lines. We also need to raise the second
span above the leaders with 'z-index' */

ul.longleaders , ul.longleaders-print {
    max-width: 98%;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden
}

ul.longleaders li.clef:after , ul.longleaders-print li.clef:after {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
	". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
	". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . ";
    margin: 0 0 15px 0;
}

ul.longleaders li , ul.longleaders-print li {
    clear: both;
    line-height: 1.5;
    margin: 4px 0;
}

ul.longleaders span:first-child {
    padding-right: 0;
    background-color: var(--gray-bg-color);
}

ul.longleaders span + span {
    float: right;
    padding-left: 0;
    background: white;
    position: relative;
    z-index: 1;
	background-color: var(--gray-bg-color);
}

ul.longleaders-print span:first-child {
    padding-right: 0;
    background-color: white;
}

ul.longleaders-print a {
	color: black;
}


ul.longleaders-print h3 {
	color: black;
}

ul.longleaders-print a:hover {
	color: black;
}

ul.longleaders-print span + span {
    float: right;
    padding-left: 0;
    background: white;
    position: relative;
    z-index: 1;
	background-color: white;
}


.td-photo-espece {
    width : 90px;
}


.photo-liste-espece {
    border: 0;
    width : 120px;
    height : 120px;
    object-fit:cover;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
}

.hidable {
    display : none;
}

.photoEdit{
    object-fit:cover;
    aspect-ratio: 1 / 1;
    border:2px solid var(--main-color-darker);
    border-radius:6px;
    height:50px;
    width:50px;
}

.texte-espece-main { 
    font-style: normal;
    font-weight: 700;
    margin : 0;
    padding: 1px;
    font-size: 0.9em;
}

.texte-description-recherche-titre {
	font-style: normal;
    font-weight: 600;
    margin : 0;
    padding: 1px;
    font-size: 0.9em;
}

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; cursor: pointer; position :fixed;}
.autocomplete-suggestion { padding: 3px 6px; white-space: nowrap; overflow: hidden; cursor: pointer; color:var(--main-color-darker)}
.autocomplete-selected { background: #EEEEEE; cursor: pointer;color:var(--main-color-darker)}
.autocomplete-suggestions strong {text-decoration:underline; cursor: pointer}
.autocomplete-group { padding: 3px 6px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

.autofillrubDesc {
    font-size:16px;
    font-weight:600;
}


.texte-espece-second {
    margin : 0;
    padding: 1px;
	font-size: 0.85em;
	font-weight : 600;
}

.texte-description-recherche-texte {
	margin : 0;
    padding: 1px;
	font-size: 0.85em;
}

.italic {
    font-style: italic;
}

.texte-espece-syno {
    font-style: italic;
    margin : 0;
    padding: 0px;
	font-size: 0.75em;
/*padding: 0px!important;
	font-size: 0.80em!important;
	margin:0!important;
	display:inline!important;*/
}

.td-nom-espece {
	align-content: center;
	width: 100%;
	position:relative;
	padding-left: 6px!important;
    padding-right : 18px!important;
	
	
}

.flex-item {
    margin: 0; 
    padding: 0;
        
}

.flex-item-menu {
    margin: 0; 
    padding: 0;
    width:100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
        
}


.index-photo-class {
    margin: 0;
    height:100px;
    width:100;
    border: 2px solid var(--main-color-darker);
    object-fit:cover;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
}

.main-photos-container {
    margin-bottom:12px;
    position: relative;
    width: 100%;
    border: 3px solid var(--main-color-medium);
    border-radius:6px;
    background-color: var(--main-color-darker);
    min-height:30px;
}

.photo-wrapper {
	flex-direction: row;
    align-items : stretch;
    align-content : flex-start;
    justify-content: space-between;
    display: block; 
    padding: 0;
    box-sizing: border-box;
    width : 100%;
	flex-wrap: wrap;
	gap:0px 10px;
	
}

.row::after {
  content: "";
  clear: both;
  display: table;
  box-sizing: border-box;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  box-sizing: border-box;
}


.container-fiches {
    flex-direction: row;
    align-items : flex-start;
    align-content : flex-start;
    justify-content: space-around;
    display: flex; 
    padding: 0;
    box-sizing: border-box;
    width : 100%;
    height:100%;
}


.pad-35-r {
    padding-right:35px;
}

/* horizontal menu styles */
.menu_haut { 
    color: var(--main-color-light);
    display: flex; 
    flex-direction: row; 
    list-style: none; 
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
} 

.menu_haut:hover {
    color: var(--main-color-medium);
    
}
  
.menu_haut-item { 
    flex: 1; 
    text-align: center; 
} 
  
  
.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}


.top-logo {
  box-sizing: content-box;
  width : auto;
  height : 85px;
  display: flex;
  align-items : flex-start;
  margin: auto;
    
}

.titre {
  background-color: var(--light-colored-bar); /* var(--gray-bg-color); /* #eae2d4; */
  color: var(--main-color-darker);
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
  width:100%;
  height: 48px;
}

.titre-h2 {
    color : var(--main-color-darker);
    display: block;
    font-size: 1.6em;
    margin : 4px 0 3px 0;
    font-weight: 600;
}

.header {
  background-color: var(--ultra-light-colored-bg); /* var(--gray-bg-color); /* #eae2d4; */
  color: var(--main-color-darker);
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
  background-size: cover;
  position:fixed;
  width:100%;
  top:  calc(34px + var(--sat));
  height:auto;
  z-index: 21;
  display:block;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.menu li {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1em 2em;
  /* position: relative; */
  font-size: 16px;
  border-radius: 0.5em;
  background-color: var(--main-color-light);
  border-bottom: 10px solid var(--main-color-darker);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  margin-bottom: 7px;
/*
  padding: 8px;
  margin-bottom: 7px;
  background-color: var(--main-color-light);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  box-sizing: border-box;
  border-radius:6px;
  text-align: center;
  */
  
}

.icon-img {
    height:20px;
    display: block;
    padding: 0;
    margin: 0px 0 2px 0;
    box-sizing : content-box;
}

.icon-img-small {
    height:14px;
    width:14px;
    padding: 0;
    margin: 0px 0 2px 0;
    box-sizing : content-box;
}

/* width */
::-webkit-scrollbar {
  width: 12px;
  height: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  border-left: 2px solid var(--main-color-darker);
  /* box-shadow: inset 0 0 2px #000000; */
  border-radius: 0px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background: var(--main-color-darker); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--highlight-color); 
}

.text-strong-recherche {
    font-weight: 700;
	color : #da0000;
	
}

strong {
    font-weight: 600!important;
}


.scroller-espece {
    padding: 3px 8px 8px 8px;
    width: 100%;
    position: relative;
    overflow: auto;
    z-index: 2;
    height: calc(100% -1);
    border: 2px solid var(--main-color-darker);
    border-radius: 6px;
    scroll-behavior: smooth;
    margin-left: 0;
	overflow-x: hidden;
    
}

.scroller-taxo-tree {
    overflow:auto;
    width: 100%;
    height:24vh;
    max-height: 180px;
    z-index: 1;
    border-radius:6px;
    background-color: var(--gray-bg-color);
    text-align:left;
    padding: 3px 8px 8px 8px;
    border: 2px solid var(--main-color-darker);
    scroll-behavior: smooth;
    margin-left: 0;
    margin-top: 8px;
}

.lien-phylo {
    color : inherit;
    cursor: pointer;
}

.scroller-espece-unique {
    padding: 3px 8px 8px 8px;
    width: 100%;
    position: relative;
    overflow: auto;
    z-index: 2;
    height: calc(100% -1);
    border: 2px solid var(--main-color-darker);
    border-radius: 6px;
    scroll-behavior: smooth;
    margin: 0;
    
}

.scroller-description {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    position: relative;
    overflow: auto;
    z-index: 2;
    height: 650px;
    border: 2px solid var(--main-color-darker);
}


.barre-recherche {
    width:calc(96% - 14px)!important;
    background-image: url('../images/searchicon.png');
    padding:8px 15px 8px 40px;
}

.select-groupe-pratique {
	width:calc(96% - 14px)!important;
    padding:8px 15px 8px 40px;
    color: var(--main-color-darker);
    font-weight: 500;
}

.input-quiz {
    width: 100%;
    padding: 8px 15px 8px 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.input-glossaire {
    width: 100%;
    background-image: url('../images/searchicon.png');
    padding:8px 15px 8px 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.select-quiz {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.nomContriPhotoMacro , .nomContriPhotoMicro , .nomContriPhotoTableaux {
	margin:0!important;
	color:#fff;
	display : block;
}

/* bleu 2c4b8b */
/* beige pale eae2d4 */
/* brun foncé 9b5221 */
/* brun pale e5a045 */
/* vert fonce 31561d */
/* bleu pale 79b0c5 */
/* bleu moyen 31738d */
/* bleu fonce 063850 */ 


.conteneur-flex-row-start {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:flex-start;
    align-items: flex-start;
    align-content:flex-start;
}

.cfrsc {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:flex-start;
    align-items: center;
    align-content:flex-start;
}

.cfrscsb {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-between;
    align-items: center;
    align-content:center;
}

.topEditTD {
    text-align:center;
    padding-top:5px;
    vertical-align:middle;
    cursor: pointer;
}

.li-confi {
    text-align: left;
}

.phylo-check {
	height:16px;
	width:16px;
	margin: 2px 0 0 6px;
	border-color: var(--main-color-darker);
}


.conteneur-flex-row-start-wrap {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;
    align-items: flex-start;
    align-content:flex-start;
}

.cfrsaw {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-around;
    align-items: flex-end;
    align-content:flex-end;
}

.cfrsawok {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-around;
    align-items: flex-start;
    align-content:flex-start;
    gap: 20px;
}

.conteneur-flex-row-start-baseline {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:flex-start;
    align-items: baseline;
    align-content:flex-start;
}

.select-ok {
    width : 96%;
    color: var(--main-color-darker);
    box-sizing: border-box;
    border: 2px solid var(--main-color-darker);
    border-radius: 6px;
    font-size: 12px;
    background-color: white;
    background-image: url('../images/drop-down-icon.png');
    background-position: 0px 0px; 
    background-repeat: no-repeat;
    padding:2px 2px 2px 22px;
    transition: width 0.4s ease-in-out;
    font-weight: 500;
    
    
}

.Varies {
    width : 96%;
    text-align: center;
}

.table-edit {
    width:100%;
    font-weight:600;
}

.table-edit td{
    padding: 2px;
}

.m0a {
    margin: 0 auto;
}

.td-edit {
    text-align: left;
    padding:5px;
    width:125px;
}

.table-top-edit {
    margin: 15px auto;
    width:96%;
    background-color: #EEE;
    border-radius: 6px;
    border:2px solid var(--main-color-darker);
}

.conteneur-flex-row-center {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items: center;
    align-content:center;
    width: 100%;
}


.fwd-btn-mobile {
	margin : 6px 34px auto auto;
	height: 25px;
    cursor: pointer;
}

.back-btn-mobile {
	margin : 6px auto auto 34px;
	height: 25px;
    cursor: pointer;
}

.cle-fwd-btn {
	margin : 0 0px 0px 15px;
	height: 16px;
    cursor: pointer;
}

.cle-back-btn {
	margin : 0 15px 0px 0px;
	height: 16px;
    cursor: pointer;
}

.tags {
    border-radius: 4px;
    font-weight: 500;
    font-size : 1em;
    padding: 4px;
    margin : 2px 6px;
    cursor : pointer;
    user-select: none;
    background-color: var(--highlight-color);
    color : var(--main-color-darker);
    border: 2px solid var(--main-color-darker);
}

.tags:hover {
    border: 2px solid var(--alt-color-darker);
    background-color: var(--alt-color-light);
    color : #FFFFFF;
}

.banderolle-photo-cles {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-around;
    align-items: center;
    align-content:center;
    overflow-x: auto;
    width: 100%;
}

.conteneur-question-reponse {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-around;
    align-items:flex-start;
    align-content:space-around;
    height: auto;}



.quiz-question {
    width: 100%;
    height: auto;
/*    border: 2px solid red;*/
}



.quiz-reponse {
    width: 100%;
    height: auto;
/*    border: 2px solid red;*/
}

.question-img-conteneur, .reponse-img-conteneur {
    position : relative;
    width: 45%;
    margin: 4px;
    aspect-ratio : 1 / 1;
    border: 6px solid var(--main-color-darker);
    box-sizing: border-box;
    border-radius: 6px;
    background-color: var(--gray-dark-bg-color);
}

.question-img, .reponse-img { 
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.quiz-img-micro {
    display: none;
}

.reponse-img-conteneur:hover {
    border: 6px solid var(--highlight-color);
    cursor: pointer;
}

.quiz-reponse-label {display: none;}

.quiz-reponse-button {
    border : 6px solid var(--main-color-light);
    background-color: var(--main-color-darker);
}

.quiz-reponse-button-selected {
    border : 6px solid var(--main-color-darker);
    background-color: var(--highlight-color);
}

.quiz-reponse-button-sizes {
    color : #fff;
    padding: 4px 8px;
    font-size : 1.2em;
    cursor: pointer;
    border-radius: 6px;
    margin : 2px 0px 2px 0px;
    font-weight: 500;
    text-decoration: none;
    width: 100%;
    text-align: center;
    height: 21.5%;
    box-sizing: border-box;
    display: grid;
	align-items: center;
    
}

.quiz-question-button {
    border : 6px solid var(--main-color-light);
    background-color: var(--main-color-darker);
    color : #fff;
    padding: 4px 8px;
    font-size : 1.3em;
    cursor: pointer;
    border-radius: 6px;
    margin : 2px 0px 2px 0px;
    font-weight: 500;
    text-decoration: none;
    width: 100%;
    text-align: center;
    height: 21.5%;
    box-sizing: border-box;
    display: grid;
	align-items: center;
    
}

.quiz-reponse-button:hover {
    border : 6px solid var(--main-color-darker);
    background-color: var(--highlight-color);
}


.quiz-reponse-button:active {
    border : 6px solid var(--main-color-darker);
    background-color: var(--highlight-color);
}

.recherche-selection-button , .recherche-selection-button-selected {
    border : 2px solid var(--main-color-darker);
	border-bottom: 2px solid var(--main-color-darker);
    padding: 2px 4px;
    font-size : 13px;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    margin : 0px 0px -2px 6px;
    font-weight: 500;
    text-decoration: none;
}

.recherche-selection-button {
	background-color: var(--light-colored-bar);
	color : var(--main-color-darker);
}

.recherche-selection-button:hover {
    background-color: var(--main-color-darker);
	color : white;
}

.recherche-selection-button:active {
    background-color: var(--main-color-light);
}

.recherche-selection-button-selected {
    background-color: var(--main-color-darker);
	color : white;
}

.tri {
	color : var(--main-color-darker);
    border : 1px solid var(--main-color-darker);
    padding: 2px 8px;
    font-size : 1em;
    cursor: pointer;
    border-radius: 6px;
    background-color: var(--light-colored-bar);
    margin : 2px 8px 4px 8px;
    font-weight: 500;
    text-decoration: none;
	display:inline-block;
	
}

.tri-icon {
	height:16px;
	margin: 0 5px 0 0 ;
}


.svg-icon
{
  color: var(--main-color-darker);
  height : 2.8em;
}


.aside {
  background-color: var(--main-color-darker);
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  box-sizing: border-box;
  border-radius:6px;
  height : 100%!important; 

}

.margin-bot-accueil {
	margin-bottom: 0px;
}

.margin-bot-accueil-fin {
	margin-bottom: 40px;
}

.vue_ensemble{
    display: none;
}

.aside-left-align {
  background-color: var(--main-color-medium);
  padding: 15px;
  color: #ffffff;
  text-align: left;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  box-sizing: border-box;
  border-radius:6px;
}

.section-style {
  background-color: transparent; /*var(--main-color-medium);*/
  height : 100%;
}

.footer {
  background-color: var(--light-colored-bar);
  text-align: center;
  font-size: 12px;
  padding: 0px;
  box-sizing: border-box;
  position: fixed;
  font-weight: 500;
  bottom: calc(var(--sab));
  width:100%
}

.copy-mobile {
  color : var(--main-color-darker);
  font-size: 16px;
  font-weight: 500;
  margin-top : 4px;
  text-decoration: none;
}

.copy-mobile:hover {
  color : var(--main-color-darker);
  font-size: 16px;
  font-weight: 500;
  margin-top : 4px;
  text-decoration: none;
}

.copy-mobile:active {
  color : var(--main-color-darker);
  font-size: 16px;
  font-weight: 500;
  margin-top : 4px;
  text-decoration: none;
}


.overlay-white {
    position:fixed;
    top:90px;
    left:0;
    width:100%;
    background-color:#fff;
    z-index:1000;
    height:100%;
    display:block;
}

.overlay-white {top:190px;}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
  box-sizing: border-box;
}

.hide-in-large-screen {display: block;}
.hide-in-small-screen {display: none;}

.max-width-adaptor {width:100%;}
.max-width-adaptor-index {width:100%;height:100%;}
.barrePositionnement {display:none;}

.flex-effect {display: block;}

.sections{
    display:table-cell;
    margin-left : auto;
    margin-right : auto;
    vertical-align:top;
    padding:8px;
	overflow: hidden;
}

.section-unique {
    display:table-cell;
    margin-left : auto;
    margin-right : auto;
    vertical-align: top;
    padding: 8px;
    box-sizing: border-box;
}

.help-icon {
    color:#fff;
    background-color: var(--highlight-color);
    width:14px;
    height:14px;
    display:inline-block;
    border-radius:100%;
    font-size:10px;
    text-align:center;
    text-decoration:none;
    -webkit-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    cursor : pointer;
    user-select: none;
    vertical-align : top;
    margin: 1px 0px 0px 2px;
}

.help-icon-ok {
    color:#fff;
    background-color: var(--highlight-color);
    width:14px;
    height:14px;
    display:inline;
    border-radius:100%;
    font-size:10px;
    text-align:center;
    text-decoration:none;
    -webkit-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    cursor : pointer;
    user-select: none;
    vertical-align : top;
    margin: 1px 0px 0px 2px;
}

.help-icon:hover {
    color: #fff;
}


.containeur-desc-main {
    width:100%;
    display:flex;
    justify-content:flex-start;
    align-items: flex-start;
}

.fongorum-link {
    cursor : pointer;
    user-select: none;
}

.notif-icon {
    font-size:12px;
    font-weight: 600;
    text-align:center;
    text-decoration:none;
    cursor : pointer;
    user-select: none;
    vertical-align : middle;
    margin: 0;
    color: var(--main-color-darker);
	
}
.notif-icon-vide {
    font-size:12px;
    font-weight: 600;
    text-align:center;
    text-decoration:none;
    cursor : pointer;
    user-select: none;
    vertical-align : middle;
    margin: 0;
    color: var(--main-color-darker);
}

.notif-icon-small {
    color:#fff;
    /* background-color:var(--notif-red-color); */
    display:inline-block;
    border-radius:50%;
    font-size:12px;
    font-weight: 500;
    text-align:center;
    text-decoration:none;
    cursor : pointer;
    user-select: none;
    vertical-align : middle;
    margin: 0 0 0 2px;
    position : absolute;
    color: #063850;
}
.notif-icon-vide-small {
    color:#fff;
    background-color:transparent;
    display:inline-block;
    border-radius:50%;
    font-size:12px;
    font-weight: 500;
    text-align:center;
    text-decoration:none;
    cursor : pointer;
    user-select: none;
    vertical-align : middle;
    margin: 0 0 0 2px;
    position : absolute;
    color: #063850;
}

.photo_espece ,  .photo_espece-macro , .photo_espece-micro {
    width : 100%;
    margin-bottom : 0px;
    margin-left : auto;
    margin-right : auto;
    display: flex;
    box-sizing: border-box;
    cursor: pointer;
    height:auto;
    cursor: pointer;
}


.vrai-photo-conteneur {
    width:95%;
    max-height:300px;
    overflow:auto;
}

.slider__btn-left , .slider__btn-right , .slider__btn-up , .slider__btn-down {
    background: transparent;
    border: none;
    outline: none;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
    background-color : rgba(0, 0, 0, 0.5);
    border-radius: 30%;
    padding: 0 0.8rem;
    cursor: pointer;
    z-index: 6000;
    position: absolute;
    top : auto;
    transform: translate(0, 0);
    bottom:calc(var(--sab) + 10px);
    touch-action: manipulation;
}

.slider__btn-left {
    right: auto;
    left: calc(10px + var(--sal));
}

.slider__btn-right {
    left : auto;
    right: calc(10px + var(--sar));
}

.slider__btn-up {
    right : auto;
    left: calc(24% + var(--sar));
}

.slider__btn-down {
    left : auto;
    right: calc(24% + var(--sar));
}

.slider__btn-left_top , .slider__btn-right_top , .slider__btn-up_top , .slider__btn-down_top {
    cursor: pointer;
    touch-action: manipulation;
    padding:0;
    margin:0;
    vertical-align : top;
    font-size:16px!important;
}
.arrow {
	z-index: 250;
	cursor: pointer;
	height : 24px;
    display:inline;
    padding:0!important;
    margin:0!important;
    vertical-align: top!important;
    font-size:16px!important;
    user-select: none;
}

.photocanvasclosebtn {
    cursor: pointer;
	font-size:16px!important;
    touch-action: manipulation;
}

.photocanvasclosebtnmobile {
    background: transparent;
    border: none;
    outline: none;
    font-size: 3rem;
    background-color : rgba(0, 0, 0, 0.3);
    border-radius: 30%;
    padding: 0 0.8rem;
    font-weight:900;
    text-align: right;
    position:  absolute;
    top : auto;
    left: 50%;
    transform: translate(-50%, 0);
    bottom : calc(15px + var(--sab));
    z-index: 6000;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
	user-select: none;
}

.photocanvashdbtn {
    cursor: pointer;
	user-select: none;
    touch-action: manipulation;
    margin-right :  5px;
}

.img-canvas-nom-espece {
    font-size: 16px;
    font-weight:600;
    z-index: 100006;
    user-select: none;
    display: inline;
}

.auteur_photo {
    border: 3px solid var(--main-color-medium);
    width : 100%;
    margin-top : 0;
    margin-bottom : 15px;
    margin-left : auto;
    margin-right : auto;
    display: flex;
    box-sizing: border-box;
    border-radius:6px;
    cursor: pointer;
    background-color: var(--main-color-darker);
}



.texte-titre2 {
    font-size: 1.05em;
    margin : 10px 0px 0px 0px;
    padding : 3px 15px 1px 15px;
	font-weight: 500;
    border-top : 1px solid var(--main-color-darker);
    border-right : 1px solid var(--main-color-darker);
    border-left : 1px solid var(--main-color-darker);
    background-color: #F0F4F8;
    border-radius: 6px 6px 0 0 ;
    /*max-width: max-content;*/
}

.desc-titre-v1 {
    font-size: 1.1em; /*1.05em */
    margin : 15px 0px 0px 0px;
    /*padding : 3px 15px 1px 15px;*/
	font-weight: 500;
    /*
    border-top : 1px solid #BFD3E1;
    border-right : 1px solid #BFD3E1;
    border-left : 1px solid #BFD3E1;
    
    background-color: #DFE9F2; /*#D2DFEA;*/
    border-radius: 6px 6px 0 0 ;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-around;
    gap: 5px;
    /*max-width: max-content;*/
    overflow-x : auto;
}

.fade-in {animation:fade-in 3s 1}

@keyframes fade-in{0%{opacity:0}30%{opacity:1}70%{opacity:1}100%{opacity:1}}

.fade-out{animation:fade-out 3s 1}

@keyframes fade-out{0%{opacity:1}30%{opacity:0.2}70%{opacity:0.1}100%{opacity:0}}

.desc-titre-v2 {
    font-size: 1.1em; /*1.05em */
    margin : 15px 0px 0px 0px;
    padding : 3px 15px 1px 15px;
	font-weight: 500;
    
    border-top : 1px solid #BFD3E1;
    border-right : 1px solid #BFD3E1;
    border-left : 1px solid #BFD3E1;
    
    background-color: #DFE9F2; /*#D2DFEA;*/
    border-radius: 6px 6px 0 0 ;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-around;
    gap: 5px;
    overflow-x : auto;
    /*max-width: max-content;*/
}

.desc-titre-onglet-v1 {
	font-weight: 500;
    padding : 3px 15px 1px 15px;
    border-top : 1px solid #BFD3E1;
    border-right : 1px solid #BFD3E1;
    border-left : 1px solid #BFD3E1;
    
    background-color: #DFE9F2; /*#D2DFEA;*/
    border-radius: 6px 6px 0 0 ;
}

.desc-titre-onglet-v2 {
}

.textarea-editable {
    width: 100%;
    min-height: 2.3em;
    box-sizing: border-box;
    padding: 1rem;
    text-align: left;
    background-color: #F5F7F8;
    
    border : 1px solid #BFD3E1;
    
    white-space: pre-wrap;
    word-wrap: break-word;
    border-radius: 0 0 0px 0px;
    
}

.textarea-editable a { 
    color: var(--main-color-darker);
    font-weight: 500;
    text-decoration: none;
} 

.textarea-editable  a:hover {
    color: var(--highlight-color);
    font-weight: 500;
    text-decoration: none;
}

.ck-editor {
    width: 100%;
    min-height: 2.3em;
    box-sizing: border-box;
    padding: 1rem;
    text-align: left;
    background-color: #F5F7F8!important;
    
    border : 1px solid #BFD3E1!important;
    
    white-space: pre-wrap;
    word-wrap: break-word;
    border-radius: 0 0 0px 0px;
}


.textarea-editable p {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

.toTextarea {  
    width: 100%;
    min-height: 2.3em;
    box-sizing: border-box;
    padding: 1rem;
    text-align: left;
    background-color: #F5F7F8;
    
    border : 3px solid var(--highlight-color-orange);
    
    white-space: pre-wrap;
    word-wrap: break-word;
    border-radius: 0 0 0px 0px;
}
.toTextarea:focus {
    outline: none;
}
.toTextarea-singleLine { white-space: pre; }
.toTextarea-disabled {
    width: 100%;
    min-height: 2.3em;
    box-sizing: border-box;
    padding: 1rem;
    text-align: left;
    background-color: #F5F7F8;
    
    border: 1px solid #BFD3E1;

    white-space: pre-wrap;
    word-wrap: break-word;
    border-radius: 0 0 0px 0px;
}
.toTextarea-placeholder:empty:after { color: #555; font-style: italic; cursor: text; content: attr(data-placeholder); }

.textarea-like {
    width: 100%;
    min-height: 2.3em;
    box-sizing: border-box;
    padding: 1rem;
    text-align: left;
    background-color: #F5F7F8;
    
    border : 1px solid #BFD3E1;
    
    white-space: pre-wrap;
    word-wrap: break-word;
    border-radius: 0 0 0px 0px;
}

/*
.texte-titre2 {
    font-size: 1.2em;
    margin : 25px 0px 0px 0px;
	font-weight: 500;
}

.textarea-editable {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}
*/
.texte-reference {
    font-size: 1.2em;
    margin : 0; 
    font-style : italic;
    padding:0;
    line-height:1.5em;

}

.texte-groupe {
    font-size: 1.2em;
    padding:0;
    margin :0; 
    line-height:1.5em;
    

}


.texte-titre3 {
    font-size: 1em;
    margin : 0 0 0 0;
    line-height: 1.4;
}





.index-lettres {
    font-size : 0.95em;
}

.icon-quiz {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}




@-moz-keyframes bounce {
    20% { -webkit-transform: rotateY(60deg); transform:rotateY(60deg); }
    40% { -webkit-transform: rotateY(0deg); transform:rotateY(0deg); }
}
@-webkit-keyframes bounce {
    20% { -webkit-transform: rotateY(60deg); transform:rotateY(60deg); }
    40% { -webkit-transform: rotateY(0deg); transform:rotateY(0deg); }
}
@keyframes bounce { 
    20% { -webkit-transform: rotateY(60deg); transform:rotateY(60deg); }
    40% { -webkit-transform: rotateY(0deg); transform:rotateY(0deg); }
}


.containeur-flex-row-index-photo {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    align-content:flex-start;
    gap: 0 0;
    text-align:center;
    box-sizing:border-box;
}

.containeur-flex-row-accueil {
    
      display: grid;
      gap: 0px;
      grid-auto-flow: column;
      grid-template-rows: 1fr;
      overflow-x: auto;
      overflow-y: visible;
}

.img-index-photo {
	width:100%;
	height:100%;
    margin: 0;
    border: 2px solid var(--main-color-darker);
    object-fit: cover;
    box-sizing: border-box;
    aspect-ratio: 1/1;
}

.container-img-strip {
    width: 100px;
    height: 100px;
    position: relative;
}



.container-img-strip:hover .overlay-img-accueil {
  opacity: 1.0;
}



.img-scroll-accueil {
	width:100px;
	height:100px;
    margin: 0;
    border: 2px solid var(--main-color-darker);
    object-fit: cover;
    box-sizing: border-box;
    aspect-ratio: 1/1;
}

.containeur-flex-row-index-photo-2 {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    align-content:flex-start;
    gap: 8px;
    text-align:center;
    box-sizing:border-box;
    background-color: #FFF;
}

.container-img-strip-index-photo {
    width : 100px;
    height : 100px;
    position: relative;
    border-radius : 20px;
    overflow:hidden;
}

.img-scroll-index-photo {
	min-width:100%;
    min-height:100%;
    /*border: 4px solid #C1C1C1;*/
    box-sizing: border-box;
    margin : 0 auto auto auto;
}

.container-img-strip-index-photo:hover .overlay-img-index-photo {
  opacity: 1.0;
}

.overlay-img-index-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(24,97,161,0.80);
}

.text-overlay-index-photo {
  color: white;
  font-size: 13px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  user-select: none;
  font-weight: 500;

}

.overlay-img-accueil {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(34, 54, 84, 0.7);
}

.text-overlay-accueil {
  color: white;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  user-select: none;

}



.famille-label {
    width:27vw;
    height:27vw;
    color:#fff;
    background-color:var(--main-color-darker);
    text-align:center;
    font-weight:bold;
    border: 2px solid var(--main-color-darker);
    padding:5px;
    line-height:1.1;
    font-size:0.6em;
}

.scroll {
    position: relative;
    width: 100%;
    background-color: transparent;
    overflow: hidden;
    z-index: 1;
    margin: 0 0px;
    padding: 0;
	border-bottom: 4px solid var(--main-color-darker);

}

.m-scroll {
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    font-size: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: fit-content;
}

span.insidescroller {
    display: inline-block;
    width: fit-content;
    margin: 0 0px;
    padding: 0;
    color: white;
}

@keyframes scrollText {
    0% {
        transform: translateX(0%);
    }
    3% {
        transform: translateX(0%);
    }
    3.3% {
        transform: translateX(-6%);
    }
    6% {
        transform: translateX(-6%);
    }
    6.3% {
        transform: translateX(-12%);
    }
    9% {
        transform: translateX(-12%);
    }
    9.3% {
        transform: translateX(-18%);
    }
    12% {
        transform: translateX(-18%);
    }
    12.3% {
        transform: translateX(-24%);
    }
    15% {
        transform: translateX(-24%);
    }
    15.3% {
        transform: translateX(-30%);
    }
    18% {
        transform: translateX(-30%);
    }
    18.3% {
        transform: translateX(-36%);
    }
    21% {
        transform: translateX(-36%);
    }
    21.3% {
        transform: translateX(-42%);
    }
    24% {
        transform: translateX(-42%);
    }
    24.3% {
        transform: translateX(-48%);
    }
    27% {
        transform: translateX(-48%);
    }
    27.3% {
        transform: translateX(-54%);
    }
    30% {
        transform: translateX(-54%);
    }
    30.3% {
        transform: translateX(-60%);
    }
    33% {
        transform: translateX(-60%);
    }
    33.3% {
        transform: translateX(-66%);
    }
    36% {
        transform: translateX(-66%);
    }
    36.3% {
        transform: translateX(-72%);
    }
    39% {
        transform: translateX(-72%);
    }
    39.3% {
        transform: translateX(-78%);
    }
    42% {
        transform: translateX(-78%);
    }
    42.3% {
        transform: translateX(-84%);
    }
    45% {
        transform: translateX(-84%);
    }
    45.3% {
        transform: translateX(-90%);
    }
    48% {
        transform: translateX(-90%);
    }
    100% {
        transform: translateX(-90%);
    }
}


.flip-card {
  width: 27vw;
  height: 27vw;
  background-color: transparent;
  perspective: 400px;
  display: block;
  flex-shrink:0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-spacing: -0.05em; 

}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: var(--main-color-darker);
  color: black;
}

.flip-card-back {
  padding:5px;
  background-color: var(--main-color-darker);
  color: white;
  transform: rotateY(180deg);
}


.icon-quiz {
    height:20px;
    width:20px;
    padding:0;
    margin:0;
    box-sizing : content-box;
    animation: bounce 3.5s infinite;
    -webkit-animation: bounce 3.5s infinite;
    -moz-animation: bounce 3.5s infinite;
    -o-animation: bounce 3.5s infinite;
}



@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

.containeur-index-photo-margin {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
    gap: 0 0;
    overflow:auto;
    width:100%;
    text-align:center;
    box-sizing:border-box;
    /*border: 3px solid red;*/
}

.containeur-flex-row {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    align-content:center;
    gap: 0 0;
    overflow:auto;
    width:100%;
    text-align:center;
    box-sizing:border-box;
    /*border: 3px solid red;*/
}

.containeur-flex-row-top-bar {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:flex-start;
    align-content:center;
    gap: 0 0px;
    overflow:none;
}

.containeur-flex-row-etiquette {
	display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    align-content:center;
    gap: 0 0;
    overflow:auto;
    width:calc(96% - 14px)!important;
    text-align:center;
    box-sizing:border-box;
	overflow-y: hidden;
    margin-right:calc(4% + 14px)!important;
	
	
	/*
    display:flex;
    flex-direction:row;
    flex-wrap: nowrap;
    justify-content:flex-start;
    align-items:flex-start;
    align-content:flex-start;
    gap: 0 0;
    overflow-x: auto;
	overflow-y: hidden;
    text-align:center;
    box-sizing:border-box;
	width: calc(94% - 8px);
    /*border: 3px solid red;*/
}

.margin-left-0 {
	padding-left : 0!important;
}


.login-top {
    position:fixed;
    top:var(--sat);
    z-index:100000;
    right:auto;
    left:calc(10px + var(--sal));
	user-select: none;
}

.logo-menu-top {
    position: fixed;
    top:var(--sat);
    z-index:100002;
    left:50vw;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    right: auto;
	user-select: none;
    background-color: white;
    border-radius : 0 0 50% 50%;
    border :6px solid var(--highlight-color);
    height:75px;
	margin-top:-6px;
	transition-duration: 1s;
    padding: 0 5px;
}

.logo-menu-top:active {
    border :6px solid var(--highlight-color);
}

.logo-menu-top:hover {
    border :6px solid var(--highlight-color);
}



.fixedBufferBottom{
    z-index: 1;
    height: calc( (var(--sab) * 0.5));
    width:100%;
}

.fixedBufferBottomAvecMenu{
    z-index:1;
    height:42px;
    width:100%;
}

.hide-in-large-screen-inline {display: inline;}
.hide-in-small-screen-inline {display: none;}
.hide-in-large-screen-flex {display: flex;}
.hide-in-small-screen-flex {display: none;}

.center-text-div {
	width:65%;
	margin: 0 auto;
}

.center-text-div-80 {
	width:80%;
	margin: 0 auto;
}


.select-rubrique {
    box-sizing: border-box;
    border: 2px solid var(--main-color-darker);
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('../images/loader-simple-22.gif');
    background-position : 2px 2px!important;
    background-repeat: no-repeat;
    transition: width 0.4s ease-in-out;
    color: var(main-color-darker)!important;
    width : 100%;
	margin : 5px 5px 5px 5;
    padding: 3px 8px 1px 25px;
    font-weight: 500;
}
.select-et-ou {
	width: 60px;
	margin : 5px auto;
    padding: 3px 2px 1px 25px;
    background-position: 2px 2px; 
    color: var(--main-color-darker);
    font-size: 16px;
    font-weight: 500;
}
.select-decrit {
	width:130px;
	margin : 5px 10px 5px 5px;
    padding: 3px 8px 1px 25px;
    background-position: 2px 2px; 
    color: var(--main-color-darker);
    font-size: 16px;
    font-weight: 500;
    
}
.select-inclut {
	width:85px;
	margin : 5px 10px 5px 5px;
    padding: 3px 8px 1px 25px;
    background-position: 2px 2px; 
    color: var(--main-color-darker);
    font-size: 16px;
    font-weight: 500;
}

.select-order {
	width:110px;
	margin : 5px 10px 5px 5px;
    padding: 2px 4px 2px 4px;
    background-position: 2px 2px; 
    color: var(--main-color-darker);
    font-size: 14px;
    font-weight: 500;
	background-image: none;
    border : 1px solid var(--main-color-darker)

}
.rubrique-bloc {
    color : var(--main-color-darker);
    font-size: 18px;
    font-weight: 500;
	border: 2px solid var(--main-color-darker);
    background-color: var(--light-colored-bar);
	border-radius: 6px;
	padding: 5px;
	margin : 5px 0;
	flex-wrap : wrap; 
	padding-top : 10px;
}

.close-rubrique {;
	color: var(main-color-darker);
	font-size:20px;
	position:absolute;
	right: 10px;
	left:auto;
	z-index: 600;
	font-weight:bold;
	text-decoration:none;
}

.recherche-description {
    width:100%!important;
    background-image: url('../images/searchicon.png');
    padding: 8px 15px 8px 40px;
	margin : 5px auto;
	box-sizing: border-box;
    color: var(main-color-darker)!important;
    

}


.alerte {
  padding: 20px;
  background-color: var(--alert-succes-color);
  color: white;
  display:none;
  position: fixed;
  bottom:  calc(var(--sab) + 20px);
  right: calc(var(--sar) + 20px);
  z-index: 9999999999;
  margin-left : calc((var(--sal)) + 20px);
  width : calc(100% - var(--sal) - var(--sar) - 40px);
  cursor :pointer;
  
}

.alerteImp {
  padding: 20px;
  background-color: var(--notif-red-color);
  color: white;
  display:none;
  position: fixed;
  bottom:  auto;
  right: auto;
  top: auto;
  bottom: auto;
  z-index: 9999999999;
  margin-left : calc((var(--sal)) + 20px);
  width : calc(100% - var(--sal) - var(--sar) - 40px);
  cursor :pointer;
  
}

.alerte-titre {
  font-weight: 800;
}


.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.nom-espece-bienvenue {
    font-size :21px;
}

.nouvCommTable {
    width:100%;
    font-size:1em;
    table-layout:fixed;
}

.nouvCommTable td, .nouCommTable th {
    word-wrap:break-word;
}

.h2-nouv-comm {
    text-align:center;
    font-size: 1.25em;
}

@media only screen and (min-width: 100px) {
    /* For cells: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
    .hide-in-large-screen {display: block;}
    .hide-in-small-screen {display: none;}
	.hide-in-large-screen-inline {display: inline;}
    .hide-in-small-screen-inline {display: none;}
	.hide-in-large-screen-td {display: table-cell;}
    .hide-in-small-screen-td {display: none;}  
	.hide-in-small-screen-tr {display: none;}
	.hide-in-large-screen-tr {display: table-row;}
    .sous-titre-top {font-size: 0.55em;}
    .sous-titre-top-2 {font-size: 0.7em;}
    .flex-center {width : 96%;}
    .vue_ensemble {display: none;}
    .flex-effect {display: block;}
    .max-width-adaptor {width:100%;}
    .max-width-adaptor-index {width:100%;}
    .overlay-white {top:55px;}
    .barrePositionnement {display:none;}
    .fixedTitleBar {display:none;}
    .photo-block-container {width:100%; height:auto;}
    .index-photo-photo { height: 27vw; width: 27vw;}
    .margin-left-6 {padding-left: 0px}
    .recherche-selection-button-selected {font-size : 16px;}
    .recherche-selection-button {font-size : 16px;}
    .quiz-reponse {height:auto;width: 100%;}
    .quiz-question {height:auto;width: 100%;}
    .conteneur-question-reponse { height: auto;}
    .quizrecherche-selection-button-reponse-label {display: none;}
    .flip-card { width: 27vw; height: 27vw; font-size:0.75em;}
    .famille-label { width:27vw; height:27vw;font-size:0.6em;}
    .login-top { right:auto;left:var(--sal);margin-right: 0px;margin-left:10px}
    .scroller-espece {  margin-left: 0; }
    .scroller-taxo-tree {  margin-left: 0px; }
    .menu-section-superieur{display:none;}
    .menu-section-inferieur{display:block;}
    .fixedBufferBottomAvecMenu{display:table-cell;}
    .question-img-conteneur, .reponse-img-conteneur {width: 46%;aspect-ratio : 1 / 1;height: auto;}
    .form-quiz {width:90%;}
    .barrePositionnement {display: none;}
	.margin-bot-accueil { margin-bottom: 0; }
	.margin-bot-accueil-fin { margin-bottom: calc( var(--sab) + (var(--sab) * 0.5) + 40px); }
	.center-text-div {width:95%;}
    .center-text-div-80 {width:98%;}
    .nouvCommTable {font-size:1em;}
    .logo-titre-mq { height : 40px;}
    .logo-titre-qc { height : 25px;}
    .definition {max-width:100%;}
    .fullScreenImageConteneur{height: calc(100% - 60px - var(--sat) - var(--sab));}
    .fullScreenImageTopBar{min-height:60px;}
    .containeur-flex-row-top-bar {gap: 0 2px;}
	.container-img-strip-index-photo {width : 100px;height : 100px;}
    .indexPhotoClicker { width: min(100px, 29vw);height: min(100px, 29vw);}
    .indexPhotoClicker.open li input + label {width: min(100px, 27vw);height: min(100px, 27vw);line-height: 50px;margin-left: -50px;}
    .ip-container {width:100px;height:100px;}
	.menu-filler{height: 62px; background-color: var(--light-colored-bar);}
    .titre-espece{background-color: var(--light-colored-bar);}
	.hide-in-large-screen-flex {display: flex;}
	.hide-in-small-screen-flex {display: none;}
    .logo-menu-top {left:50vw;-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);transform: translate(-50%, 0);right: auto;}
    .login-icon {height:24px;margin-top:2px;}
    .login-abrev {font-size: 24px;margin-top: 2px;font-weight:500;}
    .login-photo{height:28px;width:28px;}
    .nom-espece-bienvenue {font-size :21px;}
    .bar-icon {height: 22px;width: 22px;}
    .w3-right-align {font-size:22px}
	.table-publications {table-layout:fixed;}
    .scores-container {width:100%;}
}


@media only screen and (min-width: 800px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    .hide-in-large-screen {display: none;}
    .hide-in-small-screen {display: block;}
	.hide-in-large-screen-inline {display: none;}
    .hide-in-small-screen-inline {display: inline;}
	.hide-in-large-screen-td {display: none;}
    .hide-in-small-screen-td {display: table-cell;} 
	.hide-in-small-screen-tr {display: table-row;}
	.hide-in-large-screen-tr {display: none;}
    .sous-titre-top {font-size: 0.9em;}
    .sous-titre-top-2 {font-size: 1em;}
    .flex-center {width : 50%;}
    .vue_ensemble {display: block;}
    .flex-effect {display: flex;}
    .max-width-adaptor {width:33%;min-width:200px;}
    .max-width-adaptor-index {width:33%;min-width:380px;}
    .overlay-white {top:150px;}
    .barrePositionnement {display:block;}
    .fixedTitleBar {display:none;}
    .photo-block-container {width:auto; height:auto;}
    .index-photo-photo { height: 120px; width: 120px;}
    .margin-left-6 {padding-left: 10%}
    .vrai-photo-conteneur{width:700px}
    .recherche-selection-button-selected {font-size : 16px;}
    .recherche-selection-button {font-size : 16px;}
    .quiz-reponse {height:100%;width: 49.5%;}
    .quiz-question {height:100%;width: 49.5%;}
    .conteneur-question-reponse { height: calc(100% - 30px);}
    .quiz-reponse-label {display: flex;}
    .flip-card {   width: 120px; height: 120px; font-size:0.75em;}
    .famille-label { width:120px; height:120px; font-size:0.6em;}
    .scroller-espece {  margin-left: 4px; }
    .scroller-taxo-tree {  margin-left: 4px; }
    .menu-section-superieur{display:table-cell;}
    .menu-section-inferieur{display:none;}
    .fixedBufferBottomAvecMenu{display:none;}
    .question-img-conteneur, .reponse-img-conteneur {width: 46%;aspect-ratio : auto;height: 46%}
    .form-quiz {width:60%;}
    .barrePositionnement {display: block;}
	.margin-bot-accueil { margin-bottom: calc( var(--sab) + (var(--sab) * 0.5) + 70px); }
	.margin-bot-accueil-fin { margin-bottom: calc( var(--sab)  (var(--sab) * 0.5) + 70px); }
	.center-text-div {width:65%;}
    .center-text-div-80 {width:80%;}
    .nouvCommTable {font-size:1.3em;}
    .logo-titre-mq { height : 55px;}
    .logo-titre-qc { height : 35px;}
    .definition {max-width:350px;}
    .fullScreenImageConteneur{height: calc(100% - 40px - var(--sat) - var(--sab));}
    .fullScreenImageTopBar{min-height:40px;}
    .containeur-flex-row-top-bar {gap: 0 10px;}
	.container-img-strip-index-photo {width : 120px;height : 120px;}
    .indexPhotoClicker { width: 120px;height: 120px;}
    .indexPhotoClicker.open li input + label {width: 120px;height: 120px;line-height: 60px;margin-left: -60px;}
    .ip-container {width:120px;height:120px;}
	.menu-filler{height: 62px; background-color: var(--light-colored-bar);}
    .titre-espece{background-color: var(--light-colored-bar);}
	.hide-in-large-screen-flex {display: none;}
	.hide-in-small-screen-flex {display: flex;}
    .logo-menu-top {left:50vw;-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);transform: translate(-50%, 0);right: auto;}
    .nom-espece-bienvenue {font-size :32px;}
	.table-publications {table-layout:auto;}
    .scores-container {width:90%;}
	
}

@media only screen and (min-width: 800px) and (max-width: 1130px) {
    /* For desktop: */
    .login-icon {height:16px;margin-top:4px;}
    .login-abrev {font-size: 20px;margin-top: 4px;font-weight:600;}
    .login-photo{height:22px;width:22px;}
    .buffer {display : block;}
    .bar-icon {height: 18px;width: 18px;}
    .w3-right-align {font-size:18px}
    .logo-titre-mq { height : 55px;}
    .logo-titre-qc { height : 35px;}
    .scores-container {width:80%;}
    /*.fixedBufferBottomAvecMenu{display:table-cell;}*/
    
}

@media only screen and (min-width: 1131px) {
    /* For desktop: */
    .login-top { right:0;left:auto;margin-right: 10px;margin-left:0}
	.menu-filler{height: 34px; background-color: transparent;}
    .logo-menu-top {left:auto;-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);transform: translate(0, 0);right:90px;}
    .login-icon {height:16px;margin-top:4px;}
    .login-abrev {font-size: 20px;margin-top: 4px;font-weight:600;}
    .login-photo{height:22px;width:22px;}
    .logo-titre-mq { height : 70px;}
    .logo-titre-qc {height : 55px;}
    .scores-container {width:80%;}

}

.hide-in-standalone { display: block;}
.hide-in-standweb  { display: none;}

/* #SA STANDALONE */
@media all and (display-mode: standalone) {
    .icon-u-inf-off {background-color:var(--light-colored-bar);}
	.bot-buffer-over { height: calc( var(--sab) + 35px) }
	.menu-section-inferieur {bottom:  calc(var(--sab) + 35px);}
	.fixedBufferBottom {height: 35px;}
    .footer { bottom : calc( var(--sab) + 35px);}
	.alerte { bottom : calc(var(--sab) + 35px);}
    .hide-in-standalone { display: none;}
	.hide-in-standweb  { display: block;}
    .w3-bottom{bottom:calc(env(safe-area-inset-bottom) + 35px)}
	
}


.ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
}

/* POUR LE drop down de choix de order */ 

.icon-tri {
    height:14px;
}

span.msg,
span.choose {
  color: #555;
  padding: 2px 0 8px;
  display: inherit
}
.container-drop {
  width: auto;
  margin: 0px 5px 0 5px;
  text-align: center;
}

/*Styling Selectbox*/

.dropdown {
  width: 140px;
  display: inline-block;
  background-color: #fff;
  transition: all .5s ease;
  position: relative;
  font-size: 14px;
  color: #474747;
  height: 100%;
  text-align: left;
  border-radius: 6px;
  border: 2px solid var(--main-color-darker);

}
.dropdown .select {
    cursor: pointer;
    display: block;
    padding: 4px
}
.dropdown .select > i {
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all .3s ease-in-out;
    float: right;
    line-height: 20px
}
.dropdown:hover {
    box-shadow: 0 0 4px rgb(204, 204, 204)
}
.dropdown:active {
    background-color: #f8f8f8
}
.dropdown.active:hover,
.dropdown.active {
    box-shadow: 0 0 4px rgb(204, 204, 204);
    border-radius: 6px;
    background-color: #f8f8f8
}
.dropdown.active .select > i {
    transform: rotate(-90deg)
}

.dropdown .dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: 100%;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 2px 2px;
    overflow: hidden;
    display: none;
    max-height: 144px;
    overflow-y: auto;
    z-index: 9
}
.dropdown .dropdown-menu li {
    padding: 4px;
    transition: all .2s ease-in-out;
    cursor: pointer
} 
.dropdown .dropdown-menu {
    padding: 0;
    list-style: none
}
.dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
    background-color: #e2e2e2
}

.xicon.over {
    position: relative;
    top: -1px;
    left: -28px;
    width: 0;
    z-index: 999;
    cursor: pointer;
}

.input-ok {
    width : 96%;
    color: var(--main-color-darker);
    box-sizing: border-box;
    border: 2px solid var(--main-color-darker);
    border-radius: 6px;
    font-size: 12px!important;
    background-color: white;
    padding:2px 2px 2px 22px!important;
    transition: width 0.4s ease-in-out;
    font-weight: 500;
}