/* Styles généraux */
body {
    font-family: 'Times New Roman', Times, serif;
    background-color: #FFFDF5; /* Fond crème */
    font-size: 20px;
    color: #3F3F4C; 
    position: relative;
}
.right-text {
  text-align: right;
}
.left-aligned {
    margin-left: auto;
}
p {
    text-justify: auto;
}
.centered-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 40px !important;
    padding-right: 40px !important;

    /* Your custom modifications */
  max-width: 100%;
    /* Set a maximum width to ensure it fills the available space */
    /* Add any other custom styles you need */
}
.navbar-brand,
.navbar-nav {
    display: flex;
    align-items: center;
}
.navbar-nav .nav-item .nav-link {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color:  #F8F4E0;
    background-color: #163a40;
}
.navbar-nav .nav-item .nav-link:hover {
    color: #F8F4E0;
    background-color: #000000;
}
.navbar-brand {
    flex: 1;
}
nav ul li a {
    font-size: 1em;
}

.logo {
    flex: 1;
    display: flex;
    justify-content: center;
}

.social-icons {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.social-icons a {
    color: #F8F4E0;
    margin-right: 15px;
}

/* Couleur de fond du menu déroulant */
.dropdown-menu {
    background-color: #297768; /* Bleu foncé ou couleur de votre choix */
    border: none; 
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: #F8F4E0
}

/* Couleur de texte des éléments du menu déroulant */
.dropdown-item {
    color:  #F8F4E0; /* Couleur du texte des éléments du menu */
    font-family: 'Times New Roman', Times, serif;
}

/* Couleur de fond des éléments du menu au survol */
.dropdown-item:hover {
    background-color:  #000000; /* Une couleur légèrement plus foncée ou différente au survol */
    color: #F8F4E0; /* Couleur du texte lors du survol */
}

/* Couleur de fond du menu déroulant lorsqu'il est actif */
.show .dropdown-menu {
    background-color: #F8F4E0; /* Même couleur de fond que pour le menu */
}
/* Styles de fond */
.bg-dark {
    background-color: #163A40 !important; /* Vert */
    color: #F8F4E0; /* Crème */
    padding-top: 0;
}
.bg-hero {
    background-color: #F8F4E0 !important; /* Crème */
    color: #297768; /* Texte vert */
    padding-top: 0;
}
/* Styles pour le pied de page (footer) */
footer {
    background-color: #163A40; /* Bleu foncé pour le pied de page */
    padding: 1rem 0;
    text-align: center;
    color: #F8F4E0; /* Texte blanc */
}

footer a {
    color: #F8F4E0;
    font-weight: bold;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

header {
    background-color: #297768;
    padding: 0; /* Enlever le padding */
    text-align: center;
    border-top: 0 none;
}

.header-image {
    width: 350px;
    height: auto; 
    margin: 0; /* Enlever les marges */
}
.top-nav {
    background-color: rgba(41, 119, 104, 0.8); /* Couleur discrète */
    width: 120px;
    position: fixed;
    left: 0px; /* Aligne la barre à gauche */
    top: 120px;
    padding: 5px 0; /* Réduit l'espacement interne */
    border-radius: 8px;
    display: none; /* Par défaut, la barre est cachée */
}

.top-nav ul {
    padding-left: 0;
}

.top-nav ul li {
    display: block;
    margin-bottom: 5px;
    text-align: left;
    padding-left: 10px; /* Aligne les éléments plus proche du bord gauche */
}

.top-nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
}

.top-nav ul li a:hover {
    background-color: rgba(0, 0, 0, 0.7);
    color: #F8F4E0;
}

.top-nav ul li a.active {
    background-color: rgba(0, 0, 0, 0.9); /* Couleur de fond pour l'élément actif */
    color: #F8F4E0; /* Couleur du texte */
    font-weight: bold; /* Mettre en gras */
}

.container {
    padding: 0;
    box-sizing: border-box;
}
.container-fluid {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    /* Your custom modifications */
  max-width: 100%;
    /* Set a maximum width to ensure it fills the available space */
    /* Add any other custom styles you need */
}
h1 {
    font-size: 3em;
    font-weight: bold;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    color: black;
}
h1::after {
    content: ''; /* Permet d'ajouter une ligne après le titre */
    display: block;
    width: 50%; /* Largeur de la ligne */
    height: 4px; /* Épaisseur de la ligne */
    background-color: black; /* Couleur de la ligne */
    margin: 10px auto 10px; /* Ajuste l'espace au-dessus (et en-dessous si nécessaire) */
}

h2 {
    color: #297768;
    font-weight: bold;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 1.75em!important;
    text-align: center;
}
h2::after {
    margin: 10px auto 10px; /* Ajuste l'espace au-dessus (et en-dessous si nécessaire) */
}

h3 {
    color: #3F3F4C;
    font-size: 1.5em;
    font-weight: normal;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

h4 {
    color: #ece8d5;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 1.5em;
}


h5 {
    color: #90c3b8;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 1.5em;
}

.bd-callout-info h4 {
    color: #e9d98a;
}

footer {
    background-color: #163a40;
    color: #F8F4E0;
    text-align: center;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    clear: both;
}

#co-culture-image {
    margin-top: 30px;
    margin-bottom: 30px;
}

.top-nav ul li a:hover {
    color: #297768; /* Couleur du texte lorsque le lien est actif */
    font-weight: bold; /* Optionnel : style supplémentaire */
}
.a-clear {
    color: #F8F4E0;
}
.home {
    height: 200vh; /* Pour permettre le défilement */
    transition: background-color 0.5s ease;
    align-content: center;
}

.image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100vh;
    overflow: hidden;
    width: 100%
}

.image-container img {
    margin-bottom: 20px;
    max-width: 90%;
    height: auto;
    object-fit: contain; /* Ajuste l'image pour qu'elle soit entièrement visible */
    object-position: center; /* Centre l'image dans le conteneur */
}
.image-container img:last-child{
    margin-bottom: 0;
}


.w-1 {
    width:1% !important; 
}
.w-5 {
    width: 5% !important; 
}
.w-10 {
    width: 10% !important; 
}
.w-15 {
    width: 15% !important; 
}
.w-20 {
    width: 20% !important; 
}
.w-25 {
    width: 25% !important;
}
.w-30 {
    width: 30% !important;
}
.w-40 {
    width: 40% !important;
}
.w-50 {
    width: 50% !important;
}
.w-55 {
    width: 55% !important;
}
.w-60 {
    width: 60% !important;
}
.w-65 {
    width: 65% !important;
}
.w-70 {
    width: 70% !important;
}
.w-80 {
    width: 80% !important;
}
.w-90 {
    width: 90% !important;
}
img {
    max-width: 100%;  /* L'image ne dépassera pas la largeur du conteneur */
    max-height: 100%; /* L'image ne dépassera pas la hauteur du conteneur */
    height: auto;     /* Conserve les proportions de l'image */
    width: auto;      /* Conserve les proportions de l'image */
}
.accordion_exp {
    width: 100%;
}
.h2_exp {
    height: 90px;
    width: 100%;
    vertical-align: middle;
}

.h2_exp p {
    padding-top: 2%;
    width: 60%;
}

.h2_exp button {
    height: 100%;
}
.gap_accordion {
    height: 20px;
}
.hp_summary_accordion {
    margin-top: 10%;
}
.accordion_hp {
    margin: 0px 3%;
    width: 100%;
}

.h2_hp {
    height: 110px;
    width: 100%;
    vertical-align: middle;
}
.summary_accordion {
    display: flex;
}
#item1_hp {
    background-color: #FFFFFF;
    border:5px solid #B68EBF;
    border-radius: 35px;
}

#item1_hp button {
    background-color: #B68EBF;
    border-radius: 35px;
}

#item1_hp button::after {
    transform: rotate(0deg);
    background-size: auto 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/mascottes-epaules.png");
    border-radius: 35px;
}

#item2_hp {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #CEACD4;
}

#item2_hp button {
    background-color: #CEACD4;
    border-radius: 35px;
}

#item2_hp button::after {
    transform: rotate(0deg);
    background-size: auto 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/cheryl.png");
    border-radius: 35px;
}

#item3_hp {
     background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #E5CAE9;
}

#item3_hp button {
    background-color: #E5CAE9;
    border-radius: 35px;
}

#item3_hp button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/korha.png");
    border-radius: 35px;
}

.pe-10 {
    padding-right: 7rem !important;
}

#item4_hp {
         background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #fee6fd;
}
#item4_hp button {
    background-color: #fee6fd;
    border-radius: 35px;
}

#item4_hp button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/mascottes-epaules.png");
    border-radius: 35px;
}
#item5_hp {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #FAEAF9;
}

#item5_hp button {
    background-color: #FAEAF9;
    border-radius: 35px;
}

#item5_hp button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/cheryl.png");
    border-radius: 35px;
}

p {
    text-align : justify;
}
#item1_exp {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #75B0A3
}

#item1_exp button {
    background-color: #75B0A3;
    border-radius: 35px;
}

#item1_exp button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/mascottes-epaules.png");
    border-radius: 35px;
}
#item2_exp {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #90C3B8
}

#item2_exp button {
    background-color: #90C3B8;
    border-radius: 35px;
}

#item2_exp button::after {
    transform: rotate(0deg);
    background-size: auto 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/cheryl.png");
    border-radius: 35px;
}

#item3_exp {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #ABD7CE
}

#item3_exp button {
    background-color: #ABD7CE;
    border-radius: 35px;
}

#item3_exp button::after {
    transform: rotate(0deg);
    background-size: auto 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/korha.png");
    border-radius: 35px;
}

#item4_exp {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #C7E7DF
}

#item4_exp button {
    background-color: #C7E7DF;
    border-radius: 35px;
}

#item4_exp button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/mascottes-epaules.png");
    border-radius: 35px;
}

.pe-10 {
    padding-right: 7rem !important;
}

#item5_exp {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #E5F5F1
}

#item5_exp button {
    background-color: #E5F5F1;
    border-radius: 35px;
}

#item5_exp button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    border-radius: 35px;
    background-image: url("https://static.igem.wiki/teams/5143/cheryl.png");
}
 #item1_bus {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #742d4d;
}

#item1_bus button {
    background-color: #742d4d;
    border-radius: 35px;
}

#item1_bus button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/mascottes-epaules.png");
    border-radius: 35px;
}
#item2_bus {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #8b365c;
}

#item2_bus button {
    background-color: #8b365c;
    border-radius: 35px;
}

#item2_bus button::after {
    transform: rotate(0deg);
    background-size: auto 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/cheryl.png");
    border-radius: 35px;
}

#item3_bus {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #9f3f6b ;
}

#item3_bus button {
    background-color: #b64779 ;
    border-radius: 35px;
}

#item3_bus button::after {
    transform: rotate(0deg);
    background-size: auto 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/korha.png");
    border-radius: 35px;
}

#item4_bus {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #8b576e ;
}

#item4_bus button {
    background-color: #8b576e ;
    border-radius: 35px;
}

#item4_bus button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/mascottes-epaules.png");
    border-radius: 35px;
}

.pe-10 {
    padding-right: 7rem !important;
}

#item5_bus {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #af7991 ;
}

#item5_bus button {
    background-color: #af7991 ;
    border-radius: 35px;
}

#item5_bus button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    border-radius: 35px;
    background-image: url("https://static.igem.wiki/teams/5143/cheryl.png");
}

#item6_bus {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #cd97af;
}

#item6_bus button {
    background-color: #cd97af;
    border-radius: 35px;
}

#item6_bus button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    border-radius: 35px;
    background-image: url("https://static.igem.wiki/teams/5143/korha.png");
}

#item7_bus {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #dbaac0;
}

#item7_bus button {
    background-color:#dbaac0;
    border-radius: 35px;
}

#item7_bus button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    border-radius: 35px;
    background-image: url("https://static.igem.wiki/teams/5143/mascottes-epaules.png");
}

#item8_bus {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #efc6d8 ;
}

#item8_bus button {
    background-color: #efc6d8 ;
    border-radius: 35px;
}

#item8_bus button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    border-radius: 35px;
    background-image: url("https://static.igem.wiki/teams/5143/cheryl.png");
}
#item9_bus {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #f8dbe8;
}

#item9_bus button {
    background-color: #f8dbe8;
    border-radius: 35px;
}

#item9_bus button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    border-radius: 35px;
    background-image: url("https://static.igem.wiki/teams/5143/Korha.png");
}


#item1_judg {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #f2ac66;
}

#item1_judg button {
    background-color: #f2ac66;
    border-radius: 35px;
}

#item1_judg button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/judging/bronze.png");
    border-radius: 35px;
}
#item2_judg {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #C0C0C0;
}

#item2_judg button {
    background-color: #C0C0C0;
    border-radius: 35px;
}

#item2_judg button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/judging/argent.png");
    border-radius: 35px;
}
#item3_judg {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #ffef9c;
}

#item3_judg button {
    background-color: #ffef9c;
    border-radius: 35px;
}

#item3_judg button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/judging/or.png");
    border-radius: 35px;
}


#item4_judg {
    background-color: #FFFFFF;
    border-radius: 35px;
    border:5px solid #ABD7CE
}

#item4_judg button {
    background-color: #ABD7CE;
    border-radius: 35px;
}

#item4_judg button::after {
    transform: rotate(0deg);
    background-size: 60px;
    height: 60px;
    width: 60px;
    background-image: url("https://static.igem.wiki/teams/5143/judging/awards.png");
    border-radius: 35px;
}


.collapsible {
  display: block;
  font-size: 1.5em;
  padding: 0.8em 1.5em;
  position: relative;
  /* texte collapsible **/
  color: black;
}
.collapsible::before {
  position: relative;
  content: '';
  bottom: 0;
  left: 0;
  height: 5px;
  width: 95%;

  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;

  background: white;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}


.home-container-violet {
    display: block;
    color: black;
    text-align: justify;
    background-color: white;
    border: 5px solid #CEACD4;
    padding: 0px 30px;
    border-radius: 35px;
    margin-bottom: 10px;
}
.collapsible.violet::before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  height: 5px;
  width: 95%;

  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;

  /*background: black!important;**/
  background: white!important;

  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.collapsible.violet::after {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /*sous-titre**/
  background-color: #CEACD4;
  border-radius: 80px;
  width: 95%;
  z-index: -1;
}
.home-container-green {
    display: block;
    color: black;
    text-align: justify;
    background-color: white;
    border: 5px solid #0b7465;
    padding: 20px 30px;
    border-radius: 35px;
    margin-bottom: 10px;
}
.collapsible.green::before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  height: 5px;
  width: 95%;

  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;

  /*background: black!important;**/
  background: white!important;

  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.collapsible.green::after {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /*sous-titre**/
  background-color: #0b7465;
  border-radius: 80px;
  width: 95%;
  z-index: -1;
}
.home-container-blue {
    display: block;
    color: black;
    text-align: justify;
    background-color: white;
    border: 5px solid #75b0a3;
    padding: 20px 30px;
    border-radius: 35px;
    margin-bottom: 10px;
}
.collapsible.blue::before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  height: 5px;
  width: 95%;

  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;

  /*background: black!important;**/
  background: white!important;

  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.collapsible.blue::after {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /*sous-titre**/
  background-color: #75b0a3;
  border-radius: 80px;
  width: 95%;
  z-index: -1;
}
.home-container-black {
    display: block;
    color: black;
    text-align: justify;
    background-color: white;
    border: 5px solid #3F3F4C;
    padding: 20px 30px;
    border-radius: 35px;
    margin: 10px;
}
.collapsible.black::before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  height: 5px;
  width: 95%;

  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;

  /*background: black!important;**/
  background: white!important;

  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.collapsible.black::after {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /*sous-titre**/
  background-color: #3F3F4C;
  border-radius: 80px;
  width: 95%;
  z-index: -1;
}


.home-container-interview {
    display: block;
    color: black;
    text-align: justify;
    background-color:#FFFFFF;
    border: 5px solid #3F3F4C;
    padding: 20px 30px;
    border-radius: 35px;
    margin: 10px;
}


.anim {
  animation: slide-image 12s infinite;
}
@keyframes slide-image {
  0%, 16.67% {
    transform: translate3d(0,0,0);
  }
  25%, 41.67% {
    transform: translate3d(-100%,0,0);
  }
  50%, 66.67% {
    transform: translate3d(-200%,0,0);
  }
  75%, 91.67% {
    transform: translate3d(-300%,0,0);
  }
  100% {
    transform: translate3d(-400%,0,0);
  }
}
.slide-cadre {
  --width: 400px;
  position: relative;
  box-sizing: border-box;
  width: var(--width);
  margin: 0 auto !important;
  max-width: 100%;
  border: 6px solid #FFF;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 1px 1px 20px #888;
}
.slide-cadre ul {
  counter-reset: countImage;
  display: flex;
  position: relative;
  width: var(--width);
  height: 300px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.slide-cadre img {
  display: block;
}
/*-- pour visualiser l'image en cours --*/
.slide-liste li {
  position: relative;
}
.slide-liste.anim li::before {
  content: counter(countImage);
  counter-increment: countImage;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  padding: .25em;
  border: .05em solid #FFF;
  border-radius: 50%;
  text-align: center;
  font-size: 4em;
  line-height: 1em;
  color: #FFF;
  opacity: .4;
  transform: translate(-50%,-50%);
}
/*-- stopper l'animation --*/
.slide-cadre:hover ul,
#slide-check-anim:checked ~ .slide-cadre ul {
  animation-play-state: paused;
}
.flex-team-leader, .flex-team {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 2em;
    justify-content: center;
}
.bio {
    position: relative;
    width: 300 px;
    height: 500 px;
}

.bio-container {
    display: flex; /* Utilisation de Flexbox pour aligner les éléments côte à côte */
    justify-content: center; /* Centrer les deux éléments */
    gap: 220px; /* Espace entre les éléments */
  }

.bio h4,
h5 {
    text-align: center;
}
.bio:hover .overlay {
    opacity: 1;
}
.overlay {
    position: absolute;
    top: 0;
    right: -10%;
    height: 450px;
    width: 350px;
    opacity: 0;
    transition: .3s ease;
    background-color: #cbfef9;
}
.overlay-text {
    width: 320px;
    color: #3F3F4C;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: left;
    text-justify: inter-word;
    display: flex;
    overflow-wrap: break-word;
}
.team-gallery {
    /* grid-column: 2/3; */
    padding-top: 10vh;
}

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 colonnes de largeur égale */
    grid-template-rows: repeat(4, auto);    /* 4 lignes automatiques en fonction du contenu */
    gap: 20px;  /* Optionnel : espacement entre les éléments */
    width: 80vw; /* Taille du conteneur */
}

.image-profil {
    width: 200px;  /* Définit une largeur de 200px */
    height: auto;  /* La hauteur sera ajustée proportionnellement pour garder les proportions de l'image */
    object-fit: cover;  /* Assure que l'image couvre tout le cadre même si elle doit être recadrée */
    border-radius: 10px; 
}

.image {
    display: inline-block;
    height: 300px;
    flex-grow: 1;
    margin: 0 20px;
    margin-top: 10px;
    margin-bottom: 20px;
    position: relative;
}
/* References */
.references{
    color: black;
    background-color: white;
    border: 2px solid #DDD9CE;
    padding: 20px 30px;
    width: 95%;
    margin-top: 10px;
    border-radius: 35px;
}

/* Card container */
.card {
  position: relative;
  margin: 0 0 20px 20px;
  padding: 10px;
}
/* Title of the card */
.title {
  color: #ffe3d1;
  position: relative;
}
.button-container {
  display: flex; /* Afficher les boutons en ligne */
  justify-content: center; /* Centrer horizontalement les boutons dans le conteneur */
  align-items: center; /* Centrer verticalement les boutons dans le conteneur */
}
.btn-fin{
    max-width: 140px!important;
    height: auto;
}
.btn-fin img{
    max-width: 140px!important;
    height: auto;
}
.sticky {
  position: -webkit-sticky; 
  position: sticky;
  top: 0.6em;
}

bg-image {
  float: left;
  width: 100%;
}

/*== start of code for tooltips ==*/

/*== bulle verte claire==*/
.tool1 {
    display: inline-block;
    cursor: pointer;
    position: relative; /* Nécessaire pour positionner l'infobulle */
    padding: 0;
    margin: 0;
}

.tool1:hover::after {
    content: attr(data-tip);
    position: absolute;
    background-color: #99b83c;
    color: #fff;
    padding: 0.75em;
    border-radius: .25em;
    max-width: 50vw;
    /*word-wrap: break-word;*/
    top: calc(100% + 10px); /* Infobulle légèrement sous le jour */
    left: 50%;
    width: 20em;
    transform: translateX(-50%);
    z-index: 10;
    white-space: normal;
    opacity: 1;
    pointer-events: none;
}

.tool1::after {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    width: 20em;
}

.tool1:hover::after {
    opacity: 1;
}

.tool1:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    bottom: 100%;
    opacity: 1;
    transform: translateX(-50%);
    margin-left: -0.5em;
    border-width: 1em 0.75em 0 0.75em;
    border-style: solid;
    border-color: #99b83c transparent transparent transparent;
}


@media (max-width: 760px) {
    .tool1::after {
      font-size: .75em;
      margin-left: -5em;
      width: 20em;
    }
  }
/*== bulle rouge==*/
.tool2 {
    display: inline-block;
    cursor: pointer;
    position: relative; /* Nécessaire pour positionner l'infobulle */
    padding: 0;
    margin: 0;
}


.tool2:hover::after {
    content: attr(data-tip);
    position: absolute;
    background-color: #df7d7a;
    color: #fff;
    padding: 0.75em;
    border-radius: .25em;
    max-width: 50vw;
    /*word-wrap: break-word;*/
    top: calc(100% + 10px); /* Infobulle légèrement sous le jour */
    left: 50%;
    width: 15em;
    transform: translateX(-50%);
    z-index: 10;
    white-space: normal;
    opacity: 1;
    pointer-events: none;
}

.tool2::after {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    width: 15em;
}

.tool2:hover::after {
    opacity: 1;
}

.tool2:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    bottom: 100%;
    opacity: 1;
    transform: translateX(-50%);
    margin-left: -0.5em;
    border-width: 1em 0.75em 0 0.75em;
    border-style: solid;
    border-color: #df7d7a transparent transparent transparent;
}

@media (max-width: 760px) {
    .tool2::after {
      font-size: .75em;
      margin-left: -5em;
      width: 15em;
    }
  }
/*== bulle orange==*/
.tool3 {
    display: inline-block;
    cursor: pointer;
    position: relative; /* Nécessaire pour positionner l'infobulle */
    padding: 0;
    margin: 0;
}


.tool3:hover::after {
    content: attr(data-tip);
    position: absolute;
    background-color: #ff8210;
    color: #fff;
    padding: 0.75em;
    border-radius: .25em;
    max-width: 50vw;
    /*word-wrap: break-word;*/
    top: calc(100% + 10px); /* Infobulle légèrement sous le jour */
    left: 50%;
    width: 15em;
    transform: translateX(-50%);
    z-index: 10;
    white-space: normal;
    opacity: 1;
    pointer-events: none;
}

.tool3::after {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    width:15em; 
}

.tool3:hover::after {
    opacity: 1;
}

.tool3:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    bottom: 100%;
    opacity: 1;
    transform: translateX(-50%);
    margin-left: -0.5em;
    border-width: 1em 0.75em 0 0.75em;
    border-style: solid;
    border-color: #ff8210 transparent transparent transparent;
}

@media (max-width: 760px) {
    .tool3::after {
      font-size: .75em;
      margin-left: -5em;
      width: 15em;
    }
  }
/*== bulle violette==*/
.tool4 {
    display: inline-block;
    cursor: pointer;
    position: relative; /* Nécessaire pour positionner l'infobulle */
    padding: 0;
    margin: 0;
}


.tool4:hover::after {
    content: attr(data-tip);
    position: absolute;
    background-color: #a359a0;
    color: #fff;
    padding: 0.75em;
    border-radius: .25em;
    max-width: 50vw;
    /*word-wrap: break-word;*/
    top: calc(100% + 10px); /* Infobulle légèrement sous le jour */
    left: 50%;
    width: 20em;
    transform: translateX(-50%);
    z-index: 10;
    white-space: normal;
    opacity: 1;
    pointer-events: none;
}

.tool4::after {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    width: 20em; 
}

.tool4:hover::after {
    opacity: 1;
}

.tool4:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    bottom: 100%;
    opacity: 1;
    transform: translateX(-50%);
    margin-left: -0.5em;
    border-width: 1em 0.75em 0 0.75em;
    border-style: solid;
    border-color: #a359a0 transparent transparent transparent;
}

@media (max-width: 760px) {
    .tool4::after {
      font-size: .75em;
      margin-left: -5em;
      width: 20em;
    }
  }
/*== bulle brune==*/
.tool5 {
    display: inline-block;
    cursor: pointer;
    position: relative; /* Nécessaire pour positionner l'infobulle */
    padding: 0;
    margin: 0;
}


.tool5:hover::after {
    content: attr(data-tip);
    position: absolute;
    background-color: #735e59;
    color: #fff;
    padding: 0.75em;
    border-radius: .25em;
    max-width: 50vw;
    /*word-wrap: break-word;*/
    top: calc(100% + 10px); /* Infobulle légèrement sous le jour */
    left: 50%;
    width: 20em;
    transform: translateX(-50%);
    z-index: 10;
    white-space: normal;
    opacity: 1;
    pointer-events: none;
}

.tool5::after {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    width:20em;
}

.tool5:hover::after {
    opacity: 1;
}

.tool5:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    bottom: 100%;
    opacity: 1;
    transform: translateX(-50%);
    margin-left: -0.5em;
    border-width: 1em 0.75em 0 0.75em;
    border-style: solid;
    border-color: #735e59 transparent transparent transparent;
}

@media (max-width: 760px) {
    .tool5::after {
      font-size: .75em;
      margin-left: -5em;
      width: 20em;
    }
  }
/*== bulle grise==*/
.tool6 {
    display: inline-block;
    cursor: pointer;
    position: relative; /* Nécessaire pour positionner l'infobulle */
    padding: 0;
    margin: 0;
}


.tool6:hover::after {
    content: attr(data-tip);
    position: absolute;
    background-color: #8b9694;
    color: #fff;
    padding: 0.75em;
    border-radius: .25em;
    max-width: 50vw;
    /*word-wrap: break-word;*/
    top: calc(100% + 10px); /* Infobulle légèrement sous le jour */
    left: 50%;
    width: 15em;
    transform: translateX(-50%);
    z-index: 10;
    white-space: normal;
    opacity: 1;
    pointer-events: none;
}

.tool6::after {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    width:15em;
}

.tool6:hover::after {
    opacity: 1;
}

.tool6:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    bottom: 100%;
    opacity: 1;
    transform: translateX(-50%);
    margin-left: -0.5em;
    border-width: 1em 0.75em 0 0.75em;
    border-style: solid;
    border-color: #8b9694 transparent transparent transparent;
}

@media (max-width: 760px) {
    .tool6::after {
      font-size: .75em;
      margin-left: -5em;
      width: 15em;
    }
  }

/*== bulle bleu==*/
.tool7 {
    display: inline-block;
    cursor: pointer;
    position: relative; /* Nécessaire pour positionner l'infobulle */
    padding: 0;
    margin: 0;
}


.tool7:hover::after {
    content: attr(data-tip);
    position: absolute;
    background-color: #76b9f0;
    color: #fff;
    padding: 0.75em;
    border-radius: .25em;
    max-width: 50vw;
    /*word-wrap: break-word;*/
    top: calc(100% + 10px); /* Infobulle légèrement sous le jour */
    left: 50%;
    width: 15em;
    transform: translateX(-50%);
    z-index: 10;
    white-space: normal;
    opacity: 1;
    pointer-events: none;
}

.tool7::after {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    width:10em;
}

.tool7:hover::after {
    opacity: 1;
}

.tool7:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    bottom: 100%;
    opacity: 1;
    transform: translateX(-50%);
    margin-left: -0.5em;
    border-width: 1em 0.75em 0 0.75em;
    border-style: solid;
    border-color: #76b9f0 transparent transparent transparent;
}

@media (max-width: 760px) {
    .tool7::after {
      font-size: .75em;
      margin-left: -5em;
      width: 15em;
    }
  }

/*== bulle verte foncée bis==*/
.tool8 {
    display: inline-block;
    cursor: pointer;
    position: relative; /* Nécessaire pour positionner l'infobulle */
    padding: 0;
    margin: 0;
}

.tool8:hover::after {
    content: attr(data-tip);
    position: absolute;
    background-color: #006400;
    color: #fff;
    padding: 0.75em;
    border-radius: .25em;
    max-width: 100vw;
    /*word-wrap: break-word;*/
    top: calc(100% + 10px); /* Infobulle légèrement sous le jour */
    left: 50%;
    width: 25em;
    transform: translateX(-50%);
    z-index: 10;
    white-space: normal;
    opacity: 1;
    pointer-events: none;
}

.tool8::after {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    width:25em;
}

.tool8:hover::after {
    opacity: 1;
}

.tool8:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    bottom: 100%;
    opacity: 1;
    transform: translateX(-50%);
    margin-left: -0.5em;
    border-width: 1em 0.75em 0 0.75em;
    border-style: solid;
    border-color: #006400 transparent transparent transparent;
}


@media (max-width: 760px) {
    .tool8:after {
      font-size: .75em;
      margin-left: -5em;
      width: 25em;
    }
  }
/*== bulle verte foncée==*/
.tool9 {
    display: inline-block;
    cursor: pointer;
    position: relative; /* Nécessaire pour positionner l'infobulle */
    padding: 0;
    margin: 0;
}

.tool9:hover::after {
    content: attr(data-tip);
    position: absolute;
    background-color: #006400;
    color: #fff;
    padding: 0.75em;
    border-radius: .25em;
    max-width: 50vw;
    /*word-wrap: break-word;*/
    top: calc(100% + 10px); /* Infobulle légèrement sous le jour */
    left: 50%;
    width: 30em;
    transform: translateX(-50%);
    z-index: 10;
    white-space: normal;
    opacity: 1;
    pointer-events: none;
}

.tool9::after {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    width:30em;
}

.tool9:hover::after {
    opacity: 1;
}

.tool9:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    bottom: 100%;
    opacity: 1;
    transform: translateX(-50%);
    margin-left: -0.5em;
    border-width: 1em 0.75em 0 0.75em;
    border-style: solid;
    border-color: #006400 transparent transparent transparent;
}


@media (max-width: 760px) {
    .tool9::after {
      font-size: .75em;
      margin-left: -5em;
      width: 30em;
    }
  }

.legend {
            list-style: none;
            padding: 0;
        }

        .legend li {
            display: flex;
            align-items: center;
            margin-bottom: 0.5em;
        }

        .color-box {
            width: 20px;
            height: 20px;
            margin-right: 10px;
            border-radius: 3px;
        }
.red { background-color: #ff0000; }      /* Rouge */
        .light-green { background-color: #90ee90; } /* Vert clair */
        .dark-green { background-color: #006400; }  /* Vert foncé */
        .blue { background-color: #0000ff; }        /* Bleu */
        .orange { background-color: #ffa500; }      /* Orange */
        .purple { background-color: #800080; }      /* Violet */
        .grey { background-color: #808080; }        /* Gris */
        .brown { background-color: #8b4513; }       /* Marron */

  
/* Style pour la liste des images */
.slideshow {
    width: 100%; /* Utilise toute la largeur disponible */
    max-width: 1000px; /* Limite la largeur maximale du carrousel */
    height: 500px; /* Ajuste la hauteur en fonction de tes besoins */
    overflow: hidden;
    position: relative;
    margin: 0 auto; /* Centre le carrousel */
}

.slideshow img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* L'image s'ajuste à l'intérieur du conteneur tout en conservant ses proportions */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Transition douce pour l'opacité */
}

.slideshow img.active {
    opacity: 1; /* Image active visible */
    z-index: 1;
}

/* Style pour les boutons de contrôle */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    z-index: 10; /* Assure que les boutons sont au-dessus des images */
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Pause l'animation au survol */
.slideshow:hover img {
    animation-play-state: paused;
}


/* Animation bactérie pour remonter la page en haut */
.dynamic-img {
    width: 120px; /* Taille de l'image */
    animation: float 3s ease-in-out infinite; /* Animation dynamique */
}

/* Animation pour un mouvement doux de va-et-vient */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px); /* L'image monte */
    }
    100% {
        transform: translateY(0px); /* L'image redescend */
    }
}

/* style pour le titre des mascottes */
  .mascottes-title {
    font-size: 24px; /* Ajustez la taille du texte "Mascottes" si nécessaire */
    text-align: center;
    margin-top: 50px; /* Plus d'espace au-dessus des mascottes */
  }

/* Style pour le bouton Légendes */
.legende-btn {
    position: fixed;
    top: 50%;
    left: 10px;
    padding: 10px 15px;
    background-color: #163a40;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
  }
  
  /* Style pour la popup de légendes */
  .legende-popup {
    position: fixed;
    top: 35%;
    left: 120px;
    display: none; /* Cache au début */
    background-color:rgba(295,295,295,1)  
}

.sponsor-image {
    width: 100%; /* Taille adaptative en fonction du conteneur */
    max-width: 200px; /* Fixe la largeur maximale (à adapter selon tes besoins) */
    height: auto; /* Conserve les proportions */
    object-fit: contain; /* Empêche les images d'être déformées */
  }