/* =====================================================
   🌿 RESPONSIVE DESIGN PROFESSIONNEL
   Mobile-First Approach avec breakpoints standards
   ===================================================== */

/* =====================================================
   BREAKPOINTS:
   - Mobile S: 320px - 374px
   - Mobile M: 375px - 479px
   - Mobile L: 480px - 767px
   - Tablet: 768px - 1023px
   - Desktop: 1024px+
   ===================================================== */

/* =====================================================
   MOBILE SMALL (320px - 374px)
   ===================================================== */
@media (max-width: 374px) {
    /* Hero Section */
    .hero {
        min-height: auto !important;
        padding: 5rem 1rem 12rem !important;
    }

    .hero-container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .hero-content h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    .hero-actions {
        flex-direction: column !important;
        width: 100%;
        gap: 0.75rem !important;
    }

    .hero-actions a,
    .btn {
        width: 100% !important;
        padding: 0.875rem 1.25rem !important;
        font-size: 0.9rem !important;
        justify-content: center;
    }

    /* Carousel - Très petit mobile */
    .hero-carousel {
        max-width: 100% !important;
        height: 220px !important;
        margin-top: 2rem !important;
    }

    .carousel-slide img {
        height: 220px !important;
        object-fit: cover;
    }

    .slide-caption {
        padding: 0.75rem !important;
    }

    .slide-caption h3 {
        font-size: 0.9rem !important;
    }

    .slide-caption p {
        font-size: 0.75rem !important;
    }

    .carousel-btn {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 1.25rem !important;
    }

    .carousel-prev {
        left: 0.5rem !important;
    }

    .carousel-next {
        right: 0.5rem !important;
    }

    .carousel-indicators {
        bottom: 0.75rem !important;
        gap: 0.25rem !important;
    }

    .indicator {
        width: 1.5rem !important;
        height: 0.25rem !important;
    }

    .indicator.active {
        width: 2rem !important;
    }

    /* Stats Hero */
    .hero-stats {
        padding: 1.25rem 1rem !important;
        gap: 1rem !important;
        bottom: 1.5rem !important;
        width: 95% !important;
        border-radius: 20px !important;
    }

    .hero-stats-item {
        padding: 0.5rem 0 !important;
    }

    .hero-stats-number {
        font-size: 1.5rem !important;
    }

    .hero-stats-label {
        font-size: 0.7rem !important;
    }

    /* Sections */
    .section-title {
        font-size: 1.75rem !important;
    }

    .section-subtitle {
        font-size: 0.95rem !important;
    }

    .mission,
    .features,
    .map-section,
    .testimonials,
    .partners,
    .contact {
        padding: 2.5rem 1rem !important;
    }

    /* Cards */
    .mission-card,
    .feature-card,
    .testimonial-card {
        padding: 1.5rem !important;
        border-radius: 15px !important;
    }

    .mission-icon,
    .feature-icon {
        font-size: 2rem !important;
        padding: 0.75rem !important;
    }

    .mission-card h3,
    .feature-card h3 {
        font-size: 1.1rem !important;
    }

    .mission-card p,
    .feature-card p {
        font-size: 0.85rem !important;
    }

    /* Grids */
    .mission-grid,
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* =====================================================
   MOBILE MEDIUM (375px - 479px)
   ===================================================== */
@media (min-width: 375px) and (max-width: 479px) {
    /* Hero Section */
    .hero {
        min-height: auto !important;
        padding: 5rem 1.25rem 12rem !important;
    }

    .hero-container {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    .hero-content h1 {
        font-size: 2rem !important;
        line-height: 1.25 !important;
    }

    .hero-subtitle {
        font-size: 1.05rem !important;
    }

    .hero-actions {
        flex-direction: column !important;
        width: 100%;
        gap: 1rem !important;
    }

    .hero-actions a,
    .btn {
        width: 100% !important;
        padding: 1rem 1.5rem !important;
        font-size: 0.95rem !important;
    }

    /* Carousel */
    .hero-carousel {
        max-width: 100% !important;
        height: 260px !important;
        margin-top: 2rem !important;
    }

    .carousel-slide img {
        height: 260px !important;
    }

    .slide-caption {
        padding: 1rem !important;
    }

    .slide-caption h3 {
        font-size: 1rem !important;
    }

    .slide-caption p {
        font-size: 0.8rem !important;
    }

    .carousel-btn {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 1.5rem !important;
    }

    /* Stats Hero */
    .hero-stats {
        padding: 1.5rem 1.25rem !important;
        gap: 1.25rem !important;
        bottom: 1.75rem !important;
        width: 92% !important;
    }

    .hero-stats-number {
        font-size: 1.75rem !important;
    }

    .hero-stats-label {
        font-size: 0.75rem !important;
    }

    /* Sections */
    .section-title {
        font-size: 2rem !important;
    }

    .section-subtitle {
        font-size: 1rem !important;
    }

    .mission,
    .features,
    .map-section,
    .testimonials,
    .partners,
    .contact {
        padding: 3rem 1.25rem !important;
    }

    /* Cards */
    .mission-card,
    .feature-card,
    .testimonial-card {
        padding: 1.75rem !important;
    }

    .mission-icon,
    .feature-icon {
        font-size: 2.25rem !important;
    }

    .mission-card h3,
    .feature-card h3 {
        font-size: 1.2rem !important;
    }

    .mission-card p,
    .feature-card p {
        font-size: 0.9rem !important;
    }
}

/* =====================================================
   MOBILE LARGE (480px - 767px)
   ===================================================== */
@media (min-width: 480px) and (max-width: 767px) {
    /* Hero Section */
    .hero {
        min-height: auto !important;
        padding: 6rem 1.5rem 13rem !important;
    }

    .hero-container {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }

    .hero-content h1 {
        font-size: 2.25rem !important;
        line-height: 1.3 !important;
    }

    .hero-subtitle {
        font-size: 1.15rem !important;
    }

    .hero-actions {
        flex-direction: row !important;
        gap: 1.25rem !important;
    }

    .hero-actions a,
    .btn {
        padding: 1.125rem 2rem !important;
        font-size: 1rem !important;
    }

    /* Carousel */
    .hero-carousel {
        max-width: 100% !important;
        height: 320px !important;
        margin-top: 2.5rem !important;
    }

    .carousel-slide img {
        height: 320px !important;
    }

    .slide-caption {
        padding: 1.25rem !important;
    }

    .slide-caption h3 {
        font-size: 1.15rem !important;
    }

    .slide-caption p {
        font-size: 0.875rem !important;
    }

    .carousel-btn {
        width: 3rem !important;
        height: 3rem !important;
    }

    /* Stats Hero */
    .hero-stats {
        padding: 1.75rem 2rem !important;
        gap: 1.5rem !important;
        bottom: 2rem !important;
        width: 90% !important;
    }

    .hero-stats-number {
        font-size: 2rem !important;
    }

    .hero-stats-label {
        font-size: 0.8rem !important;
    }

    /* Sections */
    .section-title {
        font-size: 2.25rem !important;
    }

    .section-subtitle {
        font-size: 1.1rem !important;
    }

    .mission,
    .features,
    .map-section,
    .testimonials,
    .partners,
    .contact {
        padding: 3.5rem 1.5rem !important;
    }

    /* Cards */
    .mission-card,
    .feature-card,
    .testimonial-card {
        padding: 2rem !important;
    }

    .mission-icon,
    .feature-icon {
        font-size: 2.5rem !important;
    }

    /* Grids */
    .mission-grid,
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* =====================================================
   TABLET (768px - 1023px)
   ===================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Hero Section */
    .hero {
        padding: 6rem 2rem 10rem !important;
    }

    .hero-container {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 2.75rem !important;
    }

    .hero-subtitle {
        font-size: 1.25rem !important;
    }

    .hero-actions {
        justify-content: center;
        gap: 1.5rem !important;
    }

    /* Carousel */
    .hero-carousel {
        max-width: 600px !important;
        height: 400px !important;
        margin: 0 auto !important;
        margin-top: 3rem !important;
    }

    .carousel-slide img {
        height: 400px !important;
    }

    .slide-caption {
        padding: 1.5rem !important;
    }

    .slide-caption h3 {
        font-size: 1.25rem !important;
    }

    /* Stats Hero */
    .hero-stats {
        gap: 2.5rem !important;
        padding: 2rem 3.5rem !important;
        bottom: 2.5rem !important;
    }

    .hero-stats-number {
        font-size: 2.25rem !important;
    }

    .hero-stats-label {
        font-size: 0.85rem !important;
    }

    .hero-stats-separator {
        height: 45px !important;
    }

    /* Sections */
    .section-title {
        font-size: 2.5rem !important;
    }

    .section-subtitle {
        font-size: 1.2rem !important;
    }

    .mission,
    .features,
    .map-section,
    .testimonials,
    .partners,
    .contact {
        padding: 4rem 2rem !important;
    }

    /* Cards */
    .mission-card,
    .feature-card,
    .testimonial-card {
        padding: 2.25rem !important;
    }

    /* Grids - 2 colonnes sur tablette */
    .mission-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
}

/* =====================================================
   CORRECTIONS GLOBALES MOBILE (< 768px)
   ===================================================== */
@media (max-width: 767px) {
    /* Typography globale */
    html {
        font-size: 14px !important;
    }

    /* Hero adjustments */
    .hero::before {
        animation: none !important; /* Désactiver Ken Burns sur mobile pour performance */
    }

    .hero-container {
        align-items: flex-start;
        padding-top: 1rem;
    }

    .hero-content {
        text-align: center;
    }

    .hero-actions {
        width: 100%;
        margin-top: 1.5rem;
    }

    /* Navigation mobile */
    .navbar-menu.active {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    /* Contact Form */
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        font-size: 16px !important; /* Empêcher le zoom iOS */
        padding: 0.875rem !important;
    }

    .contact-form button[type="submit"] {
        width: 100%;
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
    }

    /* Map Section */
    .map-placeholder {
        padding: 2.5rem 1.5rem !important;
    }

    .map-info h3 {
        font-size: 1.5rem !important;
    }

    .map-info p {
        font-size: 0.95rem !important;
    }

    /* Partners logos */
    .partners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Testimonials */
    .testimonial-card {
        border-left-width: 3px !important;
    }

    .testimonial-card:hover {
        transform: translateX(5px) !important;
    }

    /* Spacing globaux */
    section {
        scroll-margin-top: 70px; /* Pour la navigation sticky */
    }
}

/* =====================================================
   OPTIMISATIONS PERFORMANCE MOBILE
   ===================================================== */
@media (max-width: 767px) {
    /* Réduire les animations coûteuses */
    * {
        animation-duration: 0.3s !important;
    }

    /* Désactiver certaines animations décoratives */
    .hero::after {
        animation: none !important;
        opacity: 0.5;
    }

    /* Optimiser les transitions */
    .mission-card:hover,
    .feature-card:hover,
    .testimonial-card:hover {
        transform: translateY(-5px) !important; /* Moins de mouvement */
    }

    /* Réduire les blurs pour performance */
    .hero-stats,
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
}

/* =====================================================
   ORIENTATION LANDSCAPE MOBILE
   ===================================================== */
@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        min-height: auto !important;
        padding: 4rem 2rem 8rem !important;
    }

    .hero-carousel {
        height: 280px !important;
    }

    .carousel-slide img {
        height: 280px !important;
    }

    .hero-stats {
        bottom: 1.5rem !important;
        padding: 1rem 2rem !important;
    }

    .hero-stats-number {
        font-size: 1.5rem !important;
    }
}

/* =====================================================
   FIXES SPÉCIFIQUES iOS
   ===================================================== */
@supports (-webkit-touch-callout: none) {
    /* iPhone safe areas */
    .hero {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }

    .hero-stats {
        left: max(50%, calc(50% + env(safe-area-inset-left) / 2));
        right: env(safe-area-inset-right);
    }

    /* Fix pour iOS input zoom */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* =====================================================
   ACCESSIBILITÉ MOBILE
   ===================================================== */
@media (max-width: 767px) {
    /* Augmenter les zones de clic */
    a, button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Améliorer le contraste en mode mobile */
    .hero-subtitle {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .hero-content h1 {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
}

/* =====================================================
   PRINT MEDIA (Bonus)
   ===================================================== */
@media print {
    .navbar,
    .hero-actions,
    .carousel-btn,
    .carousel-indicators,
    .contact-form,
    .hero-stats {
        display: none !important;
    }

    .hero {
        min-height: auto !important;
        page-break-after: always;
    }
}