.events_imgsect{

     background-image: url("/images/accrobranche_img/IMG_8370.jpeg");
}

#third_events_section {

     background-color: rgb(240, 209, 197);
  /* couleur orange */
  background-image: url('/images/planche-de-bois.jpg');
  /* texture bois */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  /* mélange la couleur et l’image */
  padding-top: 5%;
  justify-content: center;
  display: flex;
  gap: 5%;
  flex-direction:row ;
  flex-wrap: wrap; /* permet l’adaptation mobile */
}


/* Container général */

/* Carte individuelle */
.events_square {
  width: 350px;
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;

}

/* Effet hover */
.events_square:hover {
  
  box-shadow: 0 15px 25px rgba(178, 56, 8, 0.954);
}

/* Image */
.event_img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* Zone texte */
.event_content {
  padding: 25px;
  text-align: center;
}

/* Titre */
.event_content h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  position: relative;
  font-weight: bold;
}

/* Soulignement stylé */
.event_content h3::after {
  content: "";
  width: 60px;
  height: 3px;
  background: rgb(231, 82, 22);
  display: block;
  margin: 6px auto 0 auto;
  border-radius: 2px;
}

/* Description */
.event_content p {
  font-size: 1.5rem;
  color: #555;
  line-height: 1.6;
}

/* Conteneur global */
.global_reserve_btn_container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}


.global_reserve_btn {
  background-color: rgb(231, 82, 22);
  color: white;
  border: none;
  padding: 18px 45px;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;

  /* Ombre élégante à part */
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}

/* Effet au clic */
.global_reserve_btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

/*******************************
    📱 Mobile (max 480px)
*******************************/
@media (max-width: 480px) {

  #third_events_section {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-top: 40px;
    

  }

  .events_square {
    width: 90%;
    max-width: 320px;
    margin-left :17px ;
  }

  .event_img img {
    height: 160px;
  }

  .event_content {
    padding: 18px;
  }

  .event_content h3 {
    font-size: 1.2rem;
  }

  .event_content p {
    font-size: 1rem;
  }

  .global_reserve_btn {
    width: 90%;
    font-size: 1.1rem;
    padding: 14px;
  }
}


/*******************************
    📱 Tablette (481px → 768px)
*******************************/
@media (min-width: 481px) and (max-width: 768px) {

  #third_events_section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colonnes flexibles */
    gap: 60px 40px; /* 60px vertical, 40px horizontal */
    padding: 60px 20px;
    justify-items: center; /* centre les cartes dans les colonnes */
  }

  .events_square {
    width: 100%;
    max-width: 350px;
    display: flex;
    flex-direction: column;
  }

  .event_img img {
    height: 200px;
    object-fit: cover;
  }

  .event_content {
    padding: 22px;
    text-align: center;
    margin-top: auto; /* pousse le contenu vers le bas si nécessaire */
  }

  .event_content h3 {
    font-size: 1.4rem;
  }

  .event_content p {
    font-size: 1.2rem;
  }

  .global_reserve_btn {
    width: 60%;
    font-size: 1.25rem;
    padding: 16px 25px;
    margin: 20px auto 0 auto;
  }
}