 /* Styles adaptés de la maquette HTML */
 .activities-container {
     padding: 0 20px;
     margin-top: 20px;
 }

 .slider-container {
     display: flex;
     overflow-x: hidden;
     /* Par défaut, pas de défilement horizontal */
     margin: 20px 0;
     gap: 5px;
 }

 .slider-item {
     position: relative;
     flex: 1;
     height: 220px;
     transition: all 0.3s ease;
     overflow: hidden;
     cursor: pointer;
 }

 .slider-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .slider-item.active .slider-caption {
     opacity: 1;
 }

 .slider-caption {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.6);
     color: white;
     padding: 10px;
     text-align: center;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .slider-item:hover .slider-caption {
     opacity: 1;
 }

 .slider-caption h3 {
     margin-bottom: 5px;
     font-size: 22px;
 }

 .slider-caption p {
     font-size: 14px;
 }

 .activity-content {
     display: none;
     /* Cacher tous les contenus par défaut */
 }

 .activity-content.active {
     display: flex;
     /* Afficher uniquement le contenu actif */
     flex-direction: row;
     /* Par défaut, disposition horizontale */
 }

 .gallery {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 15px;
     width: 45%;
     /* Largeur par défaut pour desktop */
     height: 375px;
     overflow-y: auto;
 }

 .gallery-item {
     position: relative;
     height: 180px;
     overflow: hidden;
 }

 .gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
 }

 .gallery-caption {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.6);
     color: white;
     padding: 10px;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .gallery-item:hover .gallery-caption {
     opacity: 1;
 }

 .gallery-item:hover img {
     transform: scale(1.05);
 }

 .description {
     width: 55%;
     /* Largeur par défaut pour desktop */
     padding: 20px;
     margin-left: 20px;
     background-color: white;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }

 .description h2 {
     margin-bottom: 20px;
     color: #333;
     font-size: 26px;
 }

 .description p {
     line-height: 1.6;
     margin-bottom: 15px;
 }

 .highlight {
     color: #6BA9C7;
 }

 .book-activity-btn {
     display: inline-block;
     background-color: #6BA9C7;
     color: white;
     padding: 10px 20px;
     text-decoration: none;
     border-radius: 4px;
     margin-top: 15px;
     transition: background-color 0.3s ease;
 }

 .book-activity-btn:hover {
     background-color: #5A98B6;
 }

 /* Media queries uniquement pour les écrans mobiles */
 @media (max-width: 767px) {
     .slider-container {
         overflow-x: auto !important;
         /* Permettre le défilement horizontal sur mobile */
     }

     .slider-item {
         min-width: 250px;
         /* Largeur minimale pour les éléments du slider sur mobile */
     }

    .slider-item:hover .slider-caption {
        opacity: 0;
    }

    .slider-item.active:hover .slider-caption {
        opacity: 1;
    }

     .activity-content.active {
         flex-direction: column;
         /* Disposition en colonne sur mobile */
     }

     .gallery {
         width: 100%;
         /* Pleine largeur sur mobile */
         height: auto;
         /* Hauteur automatique */
         max-height: 375px;
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         scroll-snap-type: x mandatory;
     }

     .gallery-item {
         scroll-snap-align: start;
         min-width: 150px;
         flex: 0 0 auto;
     }

     /* Animation d'indication de scroll vertical */
     @keyframes scrollHint {
         0%, 100% { transform: translateY(0); }
         50% { transform: translateY(-10px); }
     }

     .gallery:not(.scrolled) {
         animation: scrollHint 2s ease-in-out infinite;
     }

     /* Arrêter l'animation après le premier scroll */
     .gallery.scrolled {
         animation: none;
     }

     .description {
         width: 100%;
         /* Pleine largeur sur mobile */
         margin-left: 0;
         /* Supprimer la marge à gauche */
         margin-top: 20px;
         /* Ajouter une marge en haut */
     }

        .slider-indicators {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 10px;
            margin-bottom: 15px;
        }

        .slider-dot {
            width: 10px;
            height: 10px;
            background-color: #ccc;
            border-radius: 50%;
            transition: background-color 0.3s ease;
            opacity: 0.5;
        }

        .slider-dot.active {
            background-color: #6BA9C7;
            opacity: 1;
            transform: scale(1.2);
        }
 }