/* ===== CORRECTIONS POUR LE CONFLIT DE BADGES ===== */

/* 
 * Solution pour séparer les badges des pages d'activités individuelles
 * des badges présents sur les cartes d'activités dans la page d'accueil
 */

/* 1. Badges sur la page d'activité individuelle */
.activity-page .activity-badge,
.activity-hero .activity-badge {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 2rem; /* Augmentation importante pour éviter le chevauchement */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative; /* Assurer que le badge n'est pas en position absolute */
    top: auto;          /* Réinitialiser toute position top */
    left: auto;         /* Réinitialiser toute position left */
}

/* 2. Badges sur les cartes d'activités de la page d'accueil */
.home-page .activity-badge,
.activity-card .activity-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: var(--primary-color);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0; /* Pas de marge bottom pour les badges de cartes */
}

/* 3. Badges des sections (voyage iconique, faune sauvage, etc.) */
.home-page .category-badge,
.category-card .badge,
.adventure-badge {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

/* 4. Assurer que le titre de l'activité apparaît correctement */
.activity-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    display: block;
    width: 100%;
    clear: both; /* Assure que le titre apparaît sous le badge */
}

/* 5. Responsive */
@media (max-width: 767.98px) {
    .activity-page .activity-badge,
    .activity-hero .activity-badge {
        margin-bottom: 1.5rem; /* Légèrement réduit sur mobile mais toujours suffisant */
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .activity-hero h1 {
        font-size: 2.5rem;
    }
}