@media (max-width: 768px) {
  .about-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .badge {
    margin-bottom: 1rem;
  }
}

/* Responsive : empilement sous 768px */
@media (max-width: 768px) {
  .adult-container {
    flex-direction: column;
    text-align: center;
  }
  .adult-image img {
    margin: 0 auto 1rem;
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
  }

  .header-logo {
    height: 80px;        /* réduit la hauteur du logo */
    margin: 0 0 0.5rem;  /* espace sous le logo */
  }

  .header-text {
    flex: none;          /* désactive l’expansion horizontale */
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .header-text h1 {
    font-size: 2rem;     /* adapte la taille du titre */
    line-height: 1.2;
  }

  .header-text p {
    font-size: 1rem;     /* adapte la taille du sous-texte */
    line-height: 1.3;
  }

  .header-links {
    justify-content: center;
    gap: 0.5rem;
  }

  .header-links img {
    height: 40px;        /* icônes plus petites pour garder l’équilibre */
  }
}

@media (max-width: 768px) {
  /* 1) Empiler les blocs */
  .about-container {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
  }

  /* 2) Badge ronde : réduire sa taille et centrer */
  .badge {
    flex: none !important;
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto 1rem !important;
    padding: 1rem;
    font-size: 0.7rem;
    line-height: 1.2;
  }

  .badge .sub {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.5rem;
  font-style: italic;
  line-height: 1.1;
  }

  /* Texte “À propos” : adapter taille & marges */
  .about-text {
    width: 100%;
  }

  .about-text h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .about-text p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
  }

  /* 1) Le container masque l’overflow */
  .carousel-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 1rem auto;
    position: relative;
  }

  /* 2) .slides garde le flex et le transform */
  .slides {
    display: flex !important;
    flex-wrap: nowrap !important;
    transition: transform 0.5s ease !important;
    will-change: transform;
    /* on supprime l’overflow-x et tout scroll-snap ici */
  }

  /* 3) Chaque slide fait 100% du container (donc 100% du viewport) */
  .slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    display: block;
    object-fit: cover;
  }

  /* 4) On cache les boutons si tu veux */
  .carousel-btn {
    display: none !important;
  }
}
/* Responsive: image au-dessus, texte sous l'image, texte moins large */
@media (max-width: 768px) {
  .adult-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0 1rem;
  }

  .adult-image {
    width: 100%;
  }

  .adult-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
  }

  .adult-text {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0.75rem 0;
    font-size: 15px;
    line-height: 1.45;
    box-sizing: border-box;
  }

  .adult-text h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .adult-text p {
    max-width: 42ch; /* limite la longueur de ligne pour une lecture confortable */
  }

  .adult-text ul {
    padding-left: 1.05rem;
    margin-top: 0.5rem;
    column-count: 1;
  }

  .btn-container {
    padding: 0 1rem 1rem;
    text-align: center;
  }

  .btn-booking {
    display: inline-block;
    width: auto;
    padding: 0.6rem 0.9rem;
    font-size: 15px;
  }
}