@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
html{
  font-size: 62.5%;
}
:root {
    --button-background-color: transparent;
    --button-text-color: #000000;
    --button-color-border-primary: #d0d5dd;
    --button-hover-background-color: rgba(0, 0, 0, 0.1);
    --select-chevron: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23182230" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 9L12 15L18 9"/></svg>');

    overflow: hidden;
    font-family: -apple-system, "system-ui", "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
      "Noto Color Emoji";
  }

  :root[data-dark-mode="false"] {
    background: rgb(255, 255, 255);;
  }

  :root[data-dark-mode="true"] {
    --button-text-color: #f8f9fa;
    --button-color-border-primary: rgba(255, 255, 255, 0.2);
    --button-hover-background-color: #2a343e;
    --select-chevron: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 9L12 15L18 9"/></svg>');

    background: #192232;
    color: rgb(255, 255, 255);;
  }
  body{
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
	  display: flex;
    flex-direction: column;
	  height: 100vh;
    background-color: #3e4d5c;
}
a {
  color: inherit;
  text-decoration: none;
}

h1{
    font-size: 3rem;
    margin: 0;
    margin-left: 3rem;
}
h2{
    font-size: 3rem;
    margin: 0;
}
h3{
  font-size: 2.5rem;
  margin: 0;
}
p{
    margin: 0;
    font-size: 2rem;
}
ol{
  font-size: 2rem;
}
header{
    background-color: #272735;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    height: 10vh;
    width: 100vw;
    align-items: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-style: italic;
}
#yourGpx{
  margin-right: 3rem;
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.45s ease;
}
#yourGpx:hover{
  color:#ff2323;
}
container{
    display: flex;
    height: 90vh;
 }
 /* ------------------------- */
/* -------page accueil------- */
/* ------------------------- */
#pageAccueil{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 50vw;
  overflow-y: scroll;
  scrollbar-width: thin;
  color: #f8f9fa;

  /* padding-bottom: 4rem; */
 }

#pageAccueil h2{
  display: flex;
  align-items: center;
  justify-content:center;
  margin: 1rem 0;
  font-size: 2.5rem;
  width: 100%;
}
#pageAccueil h3{
  margin-bottom: 1rem;
  font-size: 2.3rem;
  margin-left: 1rem;
}
#pageAccueil p{
  font-size: 1.8rem;
  margin: 0rem 1rem;
}
.section{
  border-top: 1px solid white;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;

}
.marquee {
  display: flex;
  align-items: center;
  width: 100%; /* Largeur de la zone visible */
  overflow: hidden; /* Masque tout ce qui dépasse */
  white-space: nowrap; /* Empêche le retour à la ligne */
  box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.3);
  background-color:  #272735;
  padding: 2rem 0;
  margin: 1rem 0;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 20s linear infinite; /* Défilement continu */
}

.marquee-content span {
  display: inline-block;
  padding-right: 5rem; /* Espace entre les répétitions */
  font-size: 2.4rem;
  font-weight: bold;
}

/* Animation */
@keyframes scroll {
  from {
      transform: translateX(120%); /* Commence à l'extérieur de l'écran à droite */
  }
  to {
      transform: translateX(-100%); /* Sort de l'écran à gauche */
  }
}
#joinUs{
  display: flex;
  justify-content: center;
  font-weight: 500;
}
.btnMail{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 1rem;
}
.custom-envelope {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 4rem;
  width: 10%;
  border:0.2rem solid rgb(255, 255, 255);
  background-color: #192232;
  border-radius: 1rem;
  padding: 0.5rem;
  transition: all 0.45s ease;
}
.custom-envelope:hover{
  color: #192232;
  border:0.2rem solid #192232;
  background-color: #ffffff;
}
.videoContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}
video{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;

}

.splide {
  margin-top: 20px;
  height: 90vh;
}

.splide__slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.img1 {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0.3rem 0.5rem 0.5rem rgb(0, 0, 0);
  border-radius: 1rem;
}

.image-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.image-link img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.footer-txt{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 97%;
  margin-top: 1rem;
  /* margin-bottom: 1rem; */
}

#map {
  display: none;
    width:50vw;
}
/* ------------------------- */
/* -------présentation------ */
/* ------------------------- */
.presentation {
  display: flex;
  align-items: center;
  width: 50vw;
  height: auto;
  margin: 0;
  padding: 0;
}

.snip1504 {
  position: relative;
    font-family: 'Source Sans Pro', sans-serif;
    font-style: italic;
    flex: 1;
    margin: 0;
    height: 90vh ;
    overflow: hidden;
}

.snip1504 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.45s ease;
    transition: all 0.45s ease;
}

.snip1504 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;

}
.snip1504:hover img {
  transform: scale(1.1);
}

.snip1504 figcaption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    align-items: center;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.snip1504 h3,
.snip1504 h5 {
    margin: 0;
    opacity: 0;
    letter-spacing: 0.2rem;
}

.snip1504 h3 {
    transform: translateY(-100%);
    text-transform: uppercase;
    font-weight: 800;
}

.snip1504 h5 {
    font-weight: normal;
    font-style: italic;
    font-weight: 800;
    color: #e9e9e9;
    transform: translateY(100%);
}

.snip1504 a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.snip1504:hover > img,
.snip1504.hover > img {
    opacity: 0.1;
}

.snip1504:hover h3,
.snip1504.hover h3,
.snip1504:hover h5,
.snip1504.hover h5 {
    transform: translateY(0);
    opacity: 1;
}

/* Hover effect for each image */
.snip1504#vttImage:hover {
    background-color:#3CB371;
}

.snip1504#courseImage:hover {
    background-color:#1E90FF;
}

.snip1504#trailImage:hover {
    background-color: #D2691E;
}

.snip1504#vttImage:active,.snip1504#courseImage:active,.snip1504#trailImage:active {
    background-color: rgb(255, 255, 255);
}

/* ------------------------- */
/* ----affichage carte------ */
/* ------------------------- */
.menuMobile{
  display: none;
  align-items: center;
  justify-content: center;
  background-color: #272735;
  height: 7vh;
  font-size: 4rem;
  border:#ffffff 1px solid;
  border-radius: 3px;
  margin: 1rem;
  color: #ffffff;
  transition: all 0.3s ease;
  cursor: pointer;
}
.menuMobile:hover{
color: #192232;
border:0.2rem solid #192232;
background-color: #ffffff;
}
#mobileCtrl{
  display:none;
  font-size: 2rem;
}
.mbl {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7vh;
  cursor: pointer;
  transition: all 0.4s ease;
  overflow: hidden;
}

.mbl h2, .mbl h3 {
  position: absolute;
  transition: opacity 0.3s ease;
}

.mbl h2 {
  opacity: 1;
}

.mbl h3 {
  opacity: 0;
}

.mbl:hover h2 {
  opacity: 0;
}

.mbl:hover h3 {
  opacity: 1;
}

#mblVtt {
  background-color: #3CB371;
}

#mblCrs {
  background-color: #1E90FF;
}

#mblTrail {
  background-color: #D2691E;
}

#mblVtt:hover, #mblCrs:hover, #mblTrail:hover {
  background-color: #ffffff;
}

.selectionTrack{
display: none;
font-size: 2rem;
height: auto;
margin: 1rem;
margin-top: 2rem;
color:#ffffff;
height: auto;
gap:5vw
}

#selectTrack{
width: 60vw;
font-size: 2.5rem;
text-align: center; /* Centre le texte horizontalement */
white-space: wrap; /* Empêche le texte de se retourner à la ligne */
overflow: hidden;
}

.navTrack{
  width: 15vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 2rem;
  width: 10%;
  border:0.2rem solid rgb(255, 255, 255);
  background-color: #192232;
  border-radius: 1rem;
  padding: 0.5rem;
  transition: all 0.45s ease;
  cursor: pointer;
}
.navTrack:hover{
  color: #192232;
  border:0.2rem solid #192232;
  background-color: #ffffff;
  }
@media (max-width: 800px) {
  html {
    font-size: 50%;
  }
  h1{
    margin-left: 0;
  }
  body{
    overflow-y: auto;
  }
  header{
    justify-content: center;
    margin-left: 0;
    padding: 0;
  }
  #yourGpx{
    display: none;
  }
  container {
    display: block;
    width: 100vw; 
  }
  #pageAccueil {
    width: 100vw;
    padding: 0;
    margin: 0; 
  }
  #map{
    height: 60vh;
    width: auto;
  }
  .presentation {
    display: none;
  }
   .section{
    padding-top: 2rem;
  }
  .menuMobile{
  display: flex;
  
  }

  .selectionTrack {
    display: none; /* Par défaut, masquez .selectionTrack */
  }
  .selectionTrack.visible {
    display: flex; /* Affichez .selectionTrack si la classe 'visible' est ajoutée */
    align-items: stretch;
  }
}