@charset "UTF-8";

body {
  background-color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  overflow-x: hidden;
}

.velo-container {
  position: relative;
  width: 100%;
  height: 180vh;
  z-index: 100;
  overflow: hidden;

  /* background-color: aqua; */
}
/* 
.velo-container * {
  pointer-events: none;
} */

h1 {
  font-size: 9em; /* Augmente la taille */
  line-height: 0.65;
  color: white;
  position: absolute;
  z-index: 300;
  top: 20%; /* Centre verticalement */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
  text-align: center; /* Centre le texte à l'intérieur */
  -webkit-text-stroke: 5px rgb(4, 0, 255); /* Ajoute un contour noir de 2px */
  text-stroke: 5px rgb(4, 0, 255); /* Compatibilité avec d'autres navigateurs */
  transition: transform 0.5s ease; /* Animation fluide */
}
h2 {
  font-size: 9em; /* Augmente la taille */
  line-height: 0.65;
  color: white;
  position: absolute;
  z-index: 300;
  top: 50%; /* Centre verticalement */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
  text-align: center; /* Centre le texte à l'intérieur */
  -webkit-text-stroke: 5px rgb(4, 0, 255); /* Ajoute un contour noir de 2px */
  text-stroke: 5px rgb(4, 0, 255); /* Compatibilité avec d'autres navigateurs */
  transition: transform 0.5s ease; /* Animation fluide */
}
h4 {
  font-size: 9em; /* Augmente la taille */
  line-height: 0.65;
  color: white;
  position: absolute;
  z-index: 300;
  top: 80%; /* Centre verticalement */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
  text-align: center; /* Centre le texte à l'intérieur */
  -webkit-text-stroke: 5px rgb(4, 0, 255); /* Ajoute un contour noir de 2px */
  text-stroke: 5px rgb(4, 0, 255); /* Compatibilité avec d'autres navigateurs */
  transition: transform 0.5s ease; /* Animation fluide */
}

.carre {
  position: static;
  width: 320px;
  height: 200px;
  z-index: 100; /* Les carrés passent derrière le container-sticky */
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
  /* transform-origin: center; */
}

.carre-0 {
  z-index: 600;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100%;

  /* background-color: aqua; */
}

.carre p {
  font-size: 2em;
  padding: 1em;
}

.carre-1 {
  position: relative;
  top: 30%; /* Ajuste pour éviter le container-sticky */
  left: 50%;
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
}

.carre-2 {
  position: relative;
  top: 10%; /* Ajuste pour éviter le container-sticky */
  left: 70%;
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
}

.carre-3 {
  position: relative;
  top: 10%; /* Ajuste pour éviter le container-sticky */
  left: 30%;
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
}

.carre-4 {
  position: relative;
  top: 30%; /* Ajuste pour éviter le container-sticky */
  left: 40%;
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
}

.carre-5 {
  position: relative;
  top: 5%; /* Avant : top: -80%; */
  left: 30%;
  transform: translate(-50%, -50%);
}

.carre-6 {
  position: relative;
  top: 20%; /* Ajuste pour éviter le container-sticky */
  left: 70%;
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
}

.carre-7 {
  position: relative;
  top: 35%;
  left: 15%;
  transform: translate(-50%, -50%);
}

.carre-8 {
  position: relative;
  top: 20%;
  left: 80%;
  transform: translate(-50%, -50%);
}

.carre-9 {
  position: relative;
  z-index: 300;
  top: 10%; /* Avant : top: -100%; */
  left: 50%;
  transform: translate(-50%, -50%);
}

.carre-10 {
  position: relative;
  top: 5%; /* Avant : top: -150%; */
  left: 90%;
  transform: translate(-50%, -50%);
}

.carre-11 {
  position: relative;
  top: -50%; /* Ajuste pour éviter le container-sticky */
  left: 20%;
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
}

.carre-12 {
  position: relative;
  top: -105%;
  left: 85%;
  transform: translate(-50%, -50%);
}

.carre-13 {
  position: relative;
  top: -115%;
  left: 15%;
  transform: translate(-50%, -50%);
}

.carre-14 {
  position: relative;
  top: -45%;
  left: 30%;
  transform: translate(-50%, -50%);
}

.carre-15 {
  position: relative;
  top: -115%; /* Ajuste pour éviter le container-sticky */
  left: 10%;
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
}

.carre-16 {
  position: relative;
  top: -25%; /* Ajuste pour éviter le container-sticky */
  left: 10%;
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
}

.carre-17 {
  position: relative;
  top: -100%; /* Ajuste pour éviter le container-sticky */
  left: 70%;
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
}

.carre-18 {
  position: relative;
  top: -135%; /* Ajuste pour éviter le container-sticky */
  left: 80%;
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
}

.carre-19 {
  position: relative;
  top: -110%; /* Ajuste pour éviter le container-sticky */
  left: 25%;
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
}

.carre-20 {
  position: relative;
  top: -50%; /* Ajuste pour éviter le container-sticky */
  left: 50%;
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
}

.velo-fixed {
  position: fixed;
  top: 50%; /* Centre verticalement */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour centrer parfaitement */
  z-index: 500; /* Assure qu'ils sont au-dessus des autres éléments */
}

.velo-fixed-1 {
  top: 20%; /* Position personnalisée */
  left: 30%;
}

.velo-fixed-2 {
  top: 70%; /* Position personnalisée */
  left: 70%;
}

.velo-fixed-3 {
  top: 40%; /* Position personnalisée */
  left: 10%;
}
.velo-fixed-4 {
  top: 10%;
  left: 20%;
}

.velo-fixed-5 {
  top: 80%;
  left: 40%;
}

.velo-fixed-6 {
  top: 30%;
  left: 50%;
}

.velo-fixed-7 {
  top: 30%;
  left: 10%;
}

.velo-fixed-8 {
  top: 60%;
  left: 90%;
}

.velo-fixed-9 {
  top: 15%;
  left: 70%;
}

.velo-fixed-10 {
  top: 85%;
  left: 10%;
}

.velo-fixed-11 {
  top: 10%;
  left: 90%;
}

.velo-fixed-11 {
  top: 70%;
  left: 20%;
}

.velo-fixed-12 {
  top: 50%;
  left: 50%;
}
.velo-fixed-13 {
  top: 20%;
  left: 80%;
}
.velo-fixed-14 {
  top: 80%;
  left: 30%;
}
.velo-fixed-15 {
  top: 40%;
  left: 60%;
}
.velo-fixed-16 {
  top: 10%;
  left: 70%;
}
.velo-fixed-17 {
  top: 50%;
  left: 30%;
}

.container-sticky {
  z-index: 0; /* Plus bas que les ronds */
  position: relative; /* Nécessaire pour que z-index fonctionne */
}

.container-sticky h3 {
  position: sticky;
  top: 10%;
  font-size: 7em;
  color: white;
  -webkit-text-stroke: 4px rgb(4, 0, 255); /* Ajoute un contour noir de 2px */
  text-stroke: 4px rgb(4, 0, 255); /* Compatibilité avec d'autres navigateurs */
  margin: 3%;
  z-index: 0;
  /* Assure que le container-sticky est au-dessus */
}

.element {
  font-size: 2em;
  color: white;
  left: 100px;
  padding-left: 20px; /* Décale le texte à gauche tout en gardant la bande noire collée */
  margin: 2%;
  background-color: black;
}

.hidden {
  display: none; /* Masque les vélos */
}

.grid-circles {
  display: flex;
  justify-content: center; /* Centre la grille horizontalement */
  flex-direction: row;
  flex-wrap: wrap;
  z-index: 800;
  gap: 10px; /* Espacement entre les cercles */
  width: 100%; /* Largeur de la grille */
}

.circle {
  z-index: 800;
  width: calc(100vw / 6 - 20px); /* Largeur des cercles */
  height: calc(100vw / 6 - 20px);
  border-radius: 50%; /* Rend les éléments circulaires */
  display: flex; /* Active le flexbox */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  color: white; /* Couleur du texte */
  /*-webkit-text-stroke: 1px white; /* Ajoute un contour noir de 2px */
  /*text-stroke: 1px white;*/
  font-size: 1.5em; /* Taille du texte */
  font-weight: bold; /* Texte en gras */
  transition: transform 0.5s ease, background-color 0.3s ease; /* Animation fluide */
  white-space: normal; /* Permet les sauts de ligne */
  text-align: center; /* Centre le texte */
}
#circle1 {
  /* background: linear-gradient(135deg, rgb(4, 0, 255), #ffe156); */
  background-image: url("../images/1geneve.jpg");
  background-size: cover; /* Couvre tout le cercle */
}
#circle2 {
  background-image: url("../images/1zurich.jpg");
  background-size: cover; /* Couvre tout le cercle */
}
#circle3 {
  background-image: url("../images/1bern.jpg");
  background-size: cover; /* Couvre tout le cercle */
}
#circle4 {
  background-image: url("../images/1lausanne.jpg");
  background-size: cover; /* Couvre tout le cercle */
}
#circle5 {
  background-image: url("../images/1bale.jpg");
  background-size: cover; /* Couvre tout le cercle */
}
#circle6 {
  background-image: url("../images/1biel.jpg");
  background-size: cover; /* Couvre tout le cercle */
}
#circle7 {
  /* background: linear-gradient(135deg, #3a8dde, #d20bfe); */
  background-image: url("../images/1bellinzona.jpg");
  background-size: cover; /* Couvre tout le cercle */
}
#circle8 {
  background-image: url("../images/1neuchatel.jpg");
  background-size: cover; /* Couvre tout le cercle */
}
#circle9 {
  background-image: url("../images/1fribourg.jpg");
  background-size: cover; /* Couvre tout le cercle */
}
#circle10 {
  background-image: url("../images/1sion.jpg");
  background-size: cover; /* Couvre tout le cercle */
}
#circle11 {
  background-image: url("../images/1lugano.jpg");
  background-size: cover; /* Couvre tout le cercle */
}
#circle12 {
  background-image: url("../images/1lucerne.jpg");
  background-size: cover; /* Couvre tout le cercle */
}

.circle.circle.clicked {
  color: white; /* Garde le texte en blanc */
  font-size: 1.5em; /* Augmente la taille du texte */
  transform: scale(1.2);
  z-index: 900; /* Assure que le cercle cliqué est au-dessus des autres */
}

.circle:hover {
  transform: rotate(360deg); /* Fait tourner le cercle d'un tour complet */
  background-color: white; /* Change la couleur au survol */
}
.dynamic-text {
  margin-top: 20px;
  text-align: center;
  font-size: 1.5em;
  color: white;
  transition: opacity 0.3s ease;
}

.circle.clicked {
  font-size: 0.8em; /* Réduit la taille du texte */
  text-align: center; /* Centre le texte horizontalement */
  display: flex; /* Active le flexbox */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
}

@media (max-width: 1000px) {
  .carre img {
    width: calc(320px / 1.1);
    height: calc(200px / 1.1);
  }
  .velo-fixed img {
    width: calc(320px / 1.1);
    height: calc(200px / 1.1);
  }

  .circle {
    width: calc(100vw / 3 - 20px); /* Largeur des cercles */
    height: calc(100vw / 3 - 20px);
    font-size: 0.8em; /* Taille du texte */
  }
  .circle.circle.clicked {
    font-size: 0.8em; /* Réduit la taille du texte */
  }
  h1 {
    font-size: 5em; /* Réduit la taille du titre */
    -webkit-text-stroke: 3px rgb(4, 0, 255); /* Ajoute un contour noir de 2px */
    text-stroke: 3px rgb(4, 0, 255);
  }
  h2 {
    font-size: 5em; /* Réduit la taille du sous-titre */
    -webkit-text-stroke: 3px rgb(4, 0, 255); /* Ajoute un contour noir de 2px */
    text-stroke: 3px rgb(4, 0, 255);
  }
  h4 {
    font-size: 5em; /* Réduit la taille du sous-titre */
    -webkit-text-stroke: 3px rgb(4, 0, 255); /* Ajoute un contour noir de 2px */
    text-stroke: 3px rgb(4, 0, 255);
  }
  .container-sticky h3 {
    position: relative;
    font-size: 3em;
    -webkit-text-stroke: 2px rgb(4, 0, 255); /* Ajoute un contour noir de 2px */
    text-stroke: 2px rgb(4, 0, 255); /* Compatibilité avec d'autres navigateurs */
    margin: 6%;
  }
  .element {
    font-size: 1.5em;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes rotateInfinite {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.velo-fixed {
  opacity: 1; /* Initialement invisible */
  animation: fadeIn 3s ease-in-out forwards; /* Animation plus lente (3 secondes) */
}