/* ==========================================================================
   RESPONSIVE STYLES
   Media queries pour l'adaptation à différentes tailles d'écran
   ========================================================================== */

/* Grands écrans (1200px et plus) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Écrans larges (992px-1199px) */
@media (max-width: 1199px) {
    /* Hero section */
    .hero-content h1 {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    /* Carousel - 3 items au lieu de 4 */
    .carousel-inner .carousel-item .row .col-md-3 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
    
    /* Ajustement des marges et paddings */
    .section-title {
        margin-bottom: 40px;
    }
}

/* Tablettes (768px-991px) */
@media (max-width: 991px) {
    /* Hero section */
    .hero-section {
        min-height: 500px;
        height: auto;
        padding: 100px 0 60px;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    /* Navigation */
    .navbar-collapse {
        background-color: white;
        padding: 15px;
        border-radius: var(--border-radius);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .navbar-nav .nav-link {
        padding: 12px 0;
    }
    
    /* Carousel - 2 items au lieu de 3 */
    .carousel-inner .carousel-item .row .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* Headers de catégories */
    .category-header {
        padding: 100px 0 40px;
    }
    
    .category-title {
        font-size: 2rem;
    }
    
    .category-image-container {
        margin-top: 30px;
    }
    
    /* Section concept */
    .concept-content {
        flex-direction: column;
    }
    
    .concept-image, .concept-text {
        flex: 0 0 100%;
    }
    
    /* Filtres */
    .filters-container {
        padding: 15px;
    }
    
    /* CTA Banner */
    .cta-content {
        text-align: center;
    }
    
    .cta-content .btn {
        margin-top: 20px;
    }
}

/* Mobile (576px-767px) */
@media (max-width: 767px) {
    /* Hero section */
    .hero-section {
        min-height: 450px;
        padding: 80px 0 40px;
    }
    
    .hero-content h1 {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 30px;
    }
    
    /* Formulaire de recherche */
    .search-form {
        flex-direction: column;
    }
    
    .search-input-group {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .search-button {
        width: 100%;
    }
    
    /* Carousel - 1 item à la fois */
    .carousel-inner .carousel-item .row .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Espacement des catégories */
    .category-item {
        margin-bottom: 20px;
    }
    
    /* Cards des activités */
    .activity-card {
        margin-bottom: 20px;
    }
    
    /* Stats de catégorie */
    .category-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    /* Filtres */
    .filters-container .row > div {
        margin-bottom: 15px;
    }
    
    /* Footer */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .legal-links {
        justify-content: center;
        margin-top: 15px;
        flex-wrap: wrap;
    }
    
    /* CTA section */
    .cta-section {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .cta-text {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }
}

/* Petits mobiles (moins de 576px) */
@media (max-width: 575px) {
    /* Hero section */
    .hero-content h1 {
        font-size: 1.6rem;
    }
    
    /* Sections */
    .section-title {
        font-size: 1.6rem;
    }
    
    /* Cards - masquer les descriptions sur mobile */
    .activity-description {
        display: none;
    }
    
    .activity-image {
        height: 160px;
    }
    
    /* Formulaire de recherche */
    .search-container {
        padding: 15px;
    }
    
    /* Boutons */
    .btn-lg {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
    
    /* Badges */
    .activity-badge {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
    
    /* Navigation */
    .navbar {
        padding: 10px 0;
    }
    
    .navbar-brand {
        font-size: 1.3rem;
    }
    
    /* Footer */
    .site-footer {
        padding: 40px 0 20px;
    }
    
    .footer-heading {
        margin-bottom: 15px;
    }
    
    .social-link {
        width: 32px;
        height: 32px;
    }
}

/* Correction pour la compatibilité Safari et iOS */
@supports (-webkit-overflow-scrolling: touch) {
    /* Correctifs pour iOS */
    input, textarea {
        font-size: 16px; /* Évite le zoom sur les champs de saisie */
    }
    
    .search-container {
        -webkit-backdrop-filter: blur(10px); /* Pour l'effet de flou sur iOS */
    }
}

/* Correction pour la compatibilité IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* Ajustements pour Internet Explorer */
    .activity-card, .category-card {
        display: block;
    }
    
    .row {
        display: flex;
        flex-wrap: wrap;
    }
}