/*=================================================================================*/
/*------------------------------Page Accueil---------------------------------------*/
/*=================================================================================*/
/*-------------------------------Section HERO -------------------------------------*/

/* Conteneur principal du hero */
.hero {
  position: relative;
  width: 100%;
  height: 90vh; /* Laisse entrevoir la suite de la page */
  display: flex;
  align-items: center; /* Centre verticalement le contenu proprement */
  justify-content: flex-start; /* Aligne le contenu à gauche */
  background-image: url("media/hero-accueil.webp");
  background-size: cover;
  background-position: center;  
  padding: 0 5%; /* Padding latéral pour le responsive */
  box-sizing: border-box;
  overflow: hidden;
}

/* Overlay pour assombrir l'image de fond */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  background: linear-gradient(90deg, rgba(38, 38, 38, 0.8) 30%, rgba(38, 38, 38, 0.1) 100%); 
   /* background: linear-gradient(90deg, rgba(19, 49, 92, 0.8) 30%, rgba(19, 49, 92, 0.2) 100%), url('hero-vieclub.jpg') center/cover; */
  z-index: 0; 
}
/* ==========================================================================
   Traitement des titres et du bouton du Hero
   ========================================================================== */
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1300px; 
 
  padding: 2rem 0 2rem 100px; 
  color: var(--color-off-white);
  box-sizing: border-box;
} 

/* Conteneur des titres */
.hero-titles {
  width: 100%;
  max-width: 1000px; /* Réduit pour éviter que les lignes de texte soient trop longues à lire */
}

/* Style du h1 */
.hero-title{
  /* font-size: var(--fs-48);
  line-height: 1.2; */
  color: var(--color-off-white);
  margin: 0; 
  width: auto; 
  max-width: 100%; 
  text-transform: uppercase; 
  letter-spacing: 1px;       /* Donne une touche "haut de gamme" et aère les lettres */
  
}

/* Style du h2 */
.hero-subtitle {
  /* font-size: var(--fs-34); */
  margin-top: 2rem; /* Réduit de 3rem à 2rem pour compacter et garder le bouton visible */
  /* line-height: 1.4; */
  width: auto;
  max-width: 100%;
  color: var(--color-off-white);
}

/* Conteneur du bouton */
.hero-button-container {
  margin-top: 3.5rem; /* Réduit de 7rem à 3.5rem pour éviter que le bouton sorte de l'écran */
}

/* Style du bouton */
#btn-hero {
  display: inline-block;
  border-radius: 15px;
  background-color: var(--color-yellow);
  font-size: var(--fs-22);
  text-decoration: none;
  color: var(--color-blue);
  font-weight: 600;
  padding: 15px 25px; /* Légèrement plus large pour l'équilibre visuel */
  margin-left: 0; 
  transition: background-color 0.3s, color 0.3s;
}

#btn-hero:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}

/* Positionnement de l'indicateur tout en bas au centre du Hero */
.scroll-indicator {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

/* Dessin de la flèche en CSS pur */
.scroll-indicator .arrow {
  width: 30px;
  height: 30px;
  border-right: 5px solid var(--color-off-white);
  border-bottom: 5px solid var(--color-off-white);
  transform: rotate(45deg);
  animation: bounce 2s infinite; /* Animation de rebond en boucle */
}

/* L'animation qui attire l'œil du visiteur */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) rotate(45deg);
  }
  40% {
    transform: translateY(-10px) rotate(45deg);
  }
  60% {
    transform: translateY(-5px) rotate(45deg);
  }
}
/*-------------------- Responsive section Hero ----------------------*/
@media (max-width: 1250px) {
  .hero-content {
    margin-top: 20vh; /* Réduit la marge supérieure */
    text-align: center; /* Centre le contenu */
    padding: 0 20px; /* Ajoute un padding latéral */
    margin-left: 0;
  }

  .hero-titles {
    margin: 0 auto; /* Centre les titres */
  }

  .hero-title {
    /* font-size: var(--fs-34); */
  }

  .hero-subtitle {
    /* font-size: var(--fs-28); */
  }

  .hero-button-container {
    display: flex;
    justify-content: center; /* Centre le bouton */
    margin-top: 4rem;
  }

  #btn-hero {
    margin-left: 0; /* Supprime toute marge latérale */
    font-size: var(--fs-18); /* Réduit la taille du bouton */
    padding: 12px 16px;
  }
}

@media (max-width: 768px) {
  .hero-content {
    margin-top: 10vh; /* Réduit la marge supérieure */
  
  }

  .hero-title {
    /* font-size: var(--fs-28); Réduit encore la taille */
  }

  .hero-subtitle {
    /* font-size: var(--fs-22); */
  }
  .hero-button-container {   
    margin-top: 2rem;
  }
  #btn-hero {
    font-size: var(--fs-18); /* Réduit la taille du bouton */
    padding: 12px 16px;
  }
}

@media (max-width: 420px) {
.scroll-indicator {
  bottom: 15px;
}
.scroll-indicator .arrow {
  width: 20px;
  height: 20px;
  
}

  .hero-content{
    margin-bottom: 10vh;
  }
   .hero-title {
    /* font-size: var(--fs-26);  */
  }

  .hero-subtitle {
    /* font-size: var(--fs-20); */
  } 

  .hero-button-container {   
    margin-top: 2rem;
  }
.hero-button-container {   
    margin-top: 2rem;
  }

  #btn-hero {
    font-size: var(--fs-16); /* Réduit la taille du bouton */
    padding: 8px 10px;
  }
}

/*-------------------- Fin Responsive section Hero ----------------------*/

/***********************Section Introduction ****************************/

.blue-section {
  background-color: var(--color-light-blue);
  /*padding: 100px 200px 10px 10px; /* Ajoute de l'espace en haut/bas et évite que le texte colle aux bords sur mobile */
}

.common-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: auto;
  gap: 40px; /* Gère l'espace entre le texte et l'image proprement sans margin fixes */
  padding-bottom: 10px;
  
}

#offset-container{
  padding-top: 100px; /* permet le padding avant le texte et l'image*/
}

.text-container {
  flex: 1; /* Permet au texte de prendre l'espace disponible */
  max-width: 50%;
}

.image-container {
  flex: 1; /* Permet à l'image de prendre le même espace disponible */
  max-width: 600px; /* Limite la taille de l'image sur grand écran */
}

/* Règle d'or pour les images responsives */
.image-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* Optionnel : adoucit les angles de votre image */
}
/****************** Responsive Section Introduction*************/

/* --- Adaptations Écrans Tablettes et Mobiles --- */
@media (max-width: 992px) {
  .common-container {
    flex-direction: column; /* Aligne le texte et l'image verticalement */
    text-align: center; /* Centre le texte sur petit écran (optionnel mais plus esthétique) */
    gap: 30px;
  }
  #offset-container{
  padding-top: 30px; /* permet le padding avant le texte et l'image*/
}
  .image-container {
    width: 100%; /* L'image s'adapte à la largeur du téléphone */
    max-width: 450px; /* Évite qu'elle ne devienne immense sur tablette */
  }
  .text-container{
    max-width: 90%;
  }
  .text-container p{
    /* font-size: var(--fs-16); */
    text-align: start;
  }
}

@media (max-width: 420px) {
  .text-container p{
    /* font-size: var(--fs-14); */
  }
}
/*-------------------- Fin Responsive section Introduction----------------------*/

/**********************Section N°1 (Pourquoi rejoindre Cyclobelebufavec 3 cartes)*********************************/

.white-section {
  background-color: var(--color-off-white);
  padding: 40px 20px;
}

.mainOne-container {
  max-width: 1200px;
  margin: 0 auto; 
}


/* Conteneur des cartes */
.carte-container {
 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  
}

/* Carte */
.carte {
  flex: 1 1 380px;
  max-width: 390px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  background: white;
  padding: 20px;
  border-radius: 12px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Titres */
.carte h3 {
/*color: var(--color-blue);*/
  margin-bottom: 10px;
  /* font-size: var(--fs-26); */
}

/* Texte */
.carte p {
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Images */
.carte img {
  width: 100%;
  height: auto;
  border-radius: 4px; 
  object-fit: cover;
}

/********************** Responsive Section N°1 ************************/

/* Tablette */
@media (max-width: 900px) {
  .white-section {
  }

  .carte p {
    font-size: 0.95rem;
  }
  .carte{
  width: 400px;
  height:auto;
  margin-bottom: 25px;
  }
 
}
  


@media (max-width: 400px) {



  .main-title h2 {
    /* font-size: var(--fs-28); */
  }
}

/* Mobile */
@media (max-width: 600px) {
  .carte {
    padding: 15px;
  }

  .carte h3 {
    /* font-size: var(--fs-22); */
  }

  .carte p {
    /* font-size: 0.95rem; */
  }
}




/***************************** Section N°2 (comment se passent les sorties)************************/
.blue-section {
  background-color: var(--color-light-blue);
  padding: 40px 20px;
}
 
.mainTwo-container {
  max-width: 1200px;
  margin: 0 auto; 
}
.common-container h3{
  margin-bottom: 30px;
}

.common-container{   /*annule la padding top de la section introduction*/
  /* padding-top: 0px; */
}
#depart-sortie{
  width: 500px;
  height:auto;
}

/**********************Responsive de la Section N°2 ************************/


@media (max-width: 900px) {
  /*.blue-section {
    padding: 0px 15px;
  }*/
#depart-sortie{
  width: 400px;
  height:auto;
}
}

@media (max-width: 400px) {
white-section {
     padding: 0px 15px; 
  }

 .main-title h2{
    padding-bottom: 24px;
  } 

#depart-sortie{
  width: 320px;
  height:auto;
}
  
}

/************************Section N°3 (Pourquoi ils roulent avec nous- Témoignages*)***************/
.white-section {
  background-color: var(--color-off-white);
  padding: 40px 20px;
}


#ficheEtab {
  /*padding-top: 60px;*/
  padding-bottom: 30px;
  text-align: center;
}

/* Conteneur des cartes */
.temoin-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 200px;
  /*max-width: 1200px;*/
  padding-bottom: 30px;
}

#bis-container{  
  padding-top: 0px;
  padding-bottom: 100px;
}
/* Carte */
.temoin {
  flex: 1 1 380px;
  max-width: 390px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align:start;

  background: white;
  padding: 20px;
  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Texte */
.temoin p {
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Images */
.temoin img {
  width: 50%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}
.identite {
    display: flex;
    align-items: center; /* aligne verticalement */
    gap: 30px;           /* espace entre image et texte */
}

.identite img {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* optionnel : image ronde */
}

.identite p {
    margin: 0;
}

/************************* Responsive de la section N°3 ***************/
@media (max-width: 999px) {
  .temoin-container{
    gap:20px;
    padding-bottom: 5px;
  }
  #bis-container{
  margin-top: 20px;
  }
  .temoin p, #ficheEtab{
    /* font-size: var(--fs-16);  */
    }
   #bis-container{  
  
  padding-bottom: 20px;
    } 
}
@media (max-width: 600px) {
    .temoin p, #ficheEtab{
    /* font-size: var(--fs-16); */
 }
 
}
@media (max-width: 400px) {
    .temoin p, #ficheEtab{
    /* font-size: var(--fs-14); */
 }
}



/******************************Section CTA *******************/

#cta-section{
  background-color: var(--color-blue);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 40px 20px;
}

.cta-content{
  display: flex;
  flex-direction: column;
  align-items: center;   /* centre horizontalement */
  text-align: center;
  padding-bottom: 30px;
}

.cta-content h2{
  color: var(--color-white);
  padding-bottom: 15px;
  margin-top: 15px;
}

.cta-content p{
  color: var(--color-white);
  padding-bottom: 5px;
}

.cta-content a{
  margin-top: 30px;
}


#btn-cta {
  
  border-radius: 15px;
  background-color: var(--color-yellow);
  font-size: var(--fs-26);
  text-decoration: none;
  color: var(--color-blue);
  font-weight: 600;
  padding: 15px 20px;
  margin-left: 0; /* Supprime la marge fixe */
  transition: background-color 0.3s, color 0.3s;
}

#btn-cta:hover{
   background-color: var(--color-vert);
   color: var(--color-white);
}

/********************* Responsive de la Section CTA **************/
@media (max-width: 600px) {
#btn-cta {
  font-size: var(--fs-20);
  padding: 10px 15px;
 
}
}