body{
    font-size: 1.3rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
  }
  h2,
  h1{
    font-size: 4.5rem;
    font-weight: 900;
  }
  .bg-blue{
    background-color: #4157f6;
  }
  .bg-black{
    background-color: #2d2927;
  }
  .text-blue{
    color: #4157f6; 
  }
  .text-black{
    color: #2d2927; 
  }
  .text-inverse{
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: 600;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: #fff;
  }
  .text-big{
    font-size: 4.5rem;
    line-height: 1.2;
  }
  .text-breakable{
  	overflow-wrap: break-word;
  }
  .p-big{
    padding: 6rem!important;
  }
  .btn{
    font-size: 1.3rem;
  }
  .btn-principal{
    color: #4157f6;
    background-color: #fff;
    border-color: #fff;
  }
  .btn-principal:hover{
    color: #fff;
    background-color: #4157f6;
    border-color: #fff;
  }
  .btn-secondaire{
    color: #fff;
    background-color: #4157f6;
    border-color: #4157f6;
  }
  .btn-secondaire:hover{
    color: #4157f6;
    background-color: #fff;
    border-color: #4157f6;
  }
  .header-container{
    position: absolute;
    top: 50%; /* Centrer la div verticalement */
    transform: translate(0%, -50%); /* Ajuster pour centrer correctement */
  }
  .header-container .ligne1{
    color: #fff;
  }
  .header-container .ligne2{
    color: #fff;
    display: inline-block;
    font-weight: 900;
    line-height: 0.6;
    vertical-align: bottom;
    border-bottom: 20px solid black;
  }
  .header-container .ligne3{
    color: transparent;
    line-height: 0.2;
  }
  .fleche-bas{
    position: absolute;
    left: 85%;
    top: 80%; /* Centrer la div verticalement */
  }
  .image-header-container {
    background-image: url('/images/photos_site/header.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100vh; /* Cela assure que la div prenne au moins toute la hauteur de la vue */
  }
  .image-footer-container {
    background-image: url('/images/photos_site/photo_ambiance.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100vh; /* Cela assure que la div prenne au moins toute la hauteur de la vue */
  }
  .add-blue-foooter{
    height: 50px;
    border-top: 2px solid white;
  }
  .scrolling-text,
  .scrolling-text-chevaux,
  .scrolling-text-chevaux-reverse {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%; /* Ajustez la largeur au besoin */
  }
  .scrolling-text p {
    display: inline-block;
    animation: scroll 20s linear infinite;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-99%);
    }
  }
  @keyframes scroll-reverse {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(-1%);
    }
  }
  .parallax{
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    height: 100vh;
    position: relative;
    max-width: 100%;
  }
  .parallax-1{
    background-image: url('/images/photos_site/apropos_1.jpg'); /* Image de fond */
  }
  .parallax-2 {
    background-image: url('/images/photos_site/nospartants.jpg'); /* Image de fond */
  }
  .parallax-3 {
    background-image: url('/images/photos_site/balbir.jpg');
  }
  .parallax-content {
    position: absolute;
    top: 50%; /* Centrer la div verticalement */
    left: 50%; /* Centrer la div horizontalement */
    transform: translate(-50%, -50%); /* Ajuster pour centrer correctement */
    text-align: center;
    color: #ffffff;
    width: 100%;
  }
  .parallax-content img{
    max-width: 500px;
  }
  .tableau-donnees{
    max-height: 600px;
    overflow-y: auto;
  }
  @media (max-width: 1600px) {
    body,
    .text-inverse,
    .btn{
      font-size: 1.25rem;
    }
    h2,
    h1,
    .text-big{
      font-size: 4.5rem;
    }
    .p-big{
      padding: 5.5rem!important;
    }
	.tableau-donnees{
	  max-height: 500px;
	}
  }
  @media (max-width: 1400px) {
    body,
    .text-inverse,
    .btn{
      font-size: 1.15rem;
    }
    h2,
    h1,
    .text-big{
      font-size: 4rem;
    }
    .p-big{
      padding: 5rem!important;
    }
	.tableau-donnees{
	  max-height: 400px;
	}
  }
  @media (max-width: 1200px) {
    body,
    .text-inverse,
    .btn{
      font-size: 1.2rem;
    }
    h2,
    h1,
    .text-big{
      font-size: 4rem;
    }
    .p-big{
      padding: 4rem!important;
    }
	.tableau-donnees{
	  max-height: 300px;
	}
  }
  @media (max-width: 992px) {
    body,
    .text-inverse,
    .btn{
      font-size: 1.05rem;
    }
    h2,
    h1,
    .text-big{
      font-size: 3rem;
    }
    .p-big{
      padding: 3.5rem!important;
    }
	.tableau-donnees{
	  max-height: 200px;
	}
  }
  @media (max-width: 768px) {
    body,
    .text-inverse,
    .btn{
      font-size: 1.05rem;
    }
    h2,
    h1,
    .text-big{
      font-size: 3rem;
    }
    .p-big{
      padding: 3rem!important;
    }
    .fleche-bas{
      display: none;
    }
    .parallax-content img{
      max-width: 100%;
      width: 75%;
    }
    .parallax{
      background-position-y: initial !important;
    }
	.tableau-donnees{
	  max-height: 400px;
	}
  }
  @media (max-width: 576px) {
    body,
    .text-inverse,
    .btn{
      font-size: 1rem;
    }
    h2,
    h1,
    .text-big{
      font-size: 3rem;
    }
    .p-big{
      padding: 3rem!important;
    }
    .fleche{
      display: none;
    }
  }
  ::-webkit-scrollbar {
    width: 10px; /* Largeur de la barre de défilement */
}

::-webkit-scrollbar-track {
    background: #2d2927; /* Couleur de fond de la barre de défilement */
}

::-webkit-scrollbar-thumb {
    background: #4157f6; /* Couleur du curseur de la barre de défilement */
}
#message_information{
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: white;
  font-size: 0.9rem;
  border-top: 1px solid black;
}
#accept_cookies{
  cursor: pointer;
  padding-left: 10px;
}
.image-container {
  position: relative;
  overflow: hidden;
}

.noms-equipe {
  position: absolute;
  bottom: 0%;
  opacity: 0; /* Rendre la div invisible par défaut */
  transition: opacity 0.3s ease-in-out; /* Ajouter une transition d'opacité pour une animation en douceur */
}
.image-container:hover .noms-equipe {
  opacity: 1; /* Rendre la div visible au survol de l'image */
}