/* ============================================================
   FOMEB — Responsive Design Premium 2026
   ============================================================ */

/* ===== 1440px — Large Desktop ===== */
@media (max-width: 1440px) {
    .container { max-width: 1200px; }
    .section { padding: 100px 60px; }
    .hero h1 { font-size: 4rem; }
    .stats-grid { gap: 25px; }
}

/* ===== 1200px — Desktop ===== */
@media (max-width: 1200px) {
    .container { max-width: 1000px; }
    .section { padding: 80px 50px; }
    .hero h1 { font-size: 3.5rem; }
    .hero p { font-size: 1.1rem; }
    .action-detail { gap: 30px; }
    .mission-vision-grid { gap: 25px; }
    .footer-grid { gap: 30px; }
}

/* ===== 1024px — Tablet Landscape ===== */
@media (max-width: 1024px) {
    .container { max-width: 900px; padding: 0 30px; }
    .section { padding: 70px 40px; }
    
    /* Hero */
    .hero { min-height: 85vh; }
    .hero h1 { font-size: 3rem; }
    .hero p { font-size: 1rem; max-width: 500px; }
    .hero-cta { flex-direction: column; gap: 12px; }
    
    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    
    /* Actions */
    .action-detail { grid-template-columns: 1fr; gap: 15px; }
    .action-detail:nth-child(even) .action-image-wrapper { order: 0; }
    .action-image-wrapper img { height: 300px; }
    
    /* Gallery */
    .masonry-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    
    /* Timeline */
    .timeline::before { left: 30px; }
    .timeline-item,
    .timeline-item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding-left: 70px;
        padding-right: 0;
        justify-content: flex-start;
    }
    .timeline-node,
    .timeline-item:nth-child(even) .timeline-node {
        left: 20px;
        right: auto;
    }
    
    /* Mission/Vision */
    .mission-vision-grid { grid-template-columns: 1fr; }
    .mv-card { padding: 35px 30px; }
    
    /* Team */
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* Footer */
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* Contact */
    .contact-grid { grid-template-columns: 1fr; }
}

/* ===== 768px — Tablet Portrait ===== */
@media (max-width: 768px) {
    .section { padding: 60px 25px; }
    
    /* Header / Navigation */
    .header {
        padding: 0 20px;
        height: 70px;
    }

    .header .nav-container {
        padding: 0;
    }

    /* Hide desktop nav links */
    .navbar {
        display: none !important;
    }

    /* Hide desktop CTA button */
    .nav-cta {
        display: none !important;
    }

    /* Show burger menu */
    .burger-menu {
        display: flex !important;
    }

    /* Hero */
    .hero { min-height: 80vh; padding: 120px 20px 60px; }
    .hero h1 { font-size: 2.5rem; }
    .hero p { font-size: 0.95rem; }
    .hero-badge { font-size: 0.75rem; padding: 8px 18px; }
    .scroll-indicator { display: none; }
    
    /* Page hero */
    .page-hero { min-height: 40vh; padding: 120px 20px 60px; }
    .page-hero h1 { font-size: 2.2rem; }
    
    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .stat-card { padding: 25px 15px; }
    .stat-number { font-size: 2.5rem; }
    .stat-label { font-size: 0.85rem; }
    .stat-divider { display: none; }
    
    .stats-bar-floating { flex-wrap: wrap; gap: 15px; padding: 20px; }
    .stat-floating-item { width: calc(50% - 15px); }
    
    /* About */
    .about-grid { grid-template-columns: 1fr; gap: 30px; }
    .about-image { height: 300px; }
    
    /* Actions & Domaines */
    .cards-grid { grid-template-columns: 1fr; }
    .action-content h3 { font-size: 1.4rem; }
    
    .domain-card { flex-direction: column; height: auto; }
    .domain-img-wrapper, .domain-content { width: 100%; }
    .domain-img-wrapper { height: 200px; }
    
    /* Gallery */
    .masonry-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .gallery-item { margin-bottom: 0; }
    .tabs { gap: 3px; }
    .tab-btn { padding: 10px 18px; font-size: 0.8rem; }
    
    /* Team */
    .team-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .team-card { padding: 30px 20px; }
    .team-photo { width: 90px; height: 90px; }
    
    /* Values */
    .values-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .value-card { padding: 25px 18px; }
    
    /* Objectives */
    .objectives-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    
    /* Section header */
    .section-header { margin-bottom: 40px; }
    .section-header h2 { font-size: 2rem; }
    .section-subtitle { font-size: 0.75rem; letter-spacing: 2px; }
    
    /* Testimonials */
    .testimonial-card { padding: 30px 20px; }
    
    /* Contact */
    .contact-form-card,
    .contact-info-card { padding: 30px 20px; }
    
    /* Map */
    .map-container iframe { height: 350px; }
    
    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 35px; text-align: center; }
    .social-links { justify-content: center; }
    .newsletter-form { margin: 0 auto; }
    .footer-links { display: flex; flex-direction: column; align-items: center; }
    
    /* Impact */
    .impact-row { gap: 25px; }
    .impact-number { font-size: 2rem; }
    
    /* Toast */
    .toast-container { right: 15px; left: 15px; }
    .toast { min-width: auto; }
    
    /* CTA */
    .cta-section { padding: 60px 25px; }
    .cta-section h2 { font-size: 2rem; }
}

/* ===== 576px — Mobile Landscape ===== */
@media (max-width: 576px) {
    .section { padding: 50px 18px; }
    
    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 0.9rem; }
    
    .page-hero h1 { font-size: 1.8rem; }
    
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-number { font-size: 2rem; }
    
    .btn-primary, .btn-secondary {
        padding: 14px 30px;
        font-size: 0.9rem;
        width: 100%;
        text-align: center;
    }
    
    .team-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }
    .objectives-grid { grid-template-columns: 1fr; }
    
    .masonry-grid { grid-template-columns: 1fr; gap: 15px; }
    
    .mv-card { padding: 30px 20px; }
    
    .section-header h2 { font-size: 1.7rem; }
    
    .footer-bottom { flex-direction: column; gap: 10px; }
    
    .scroll-top { width: 42px; height: 42px; bottom: 20px; right: 20px; }
}

/* ===== 480px — Mobile Portrait ===== */
@media (max-width: 480px) {
    .hero h1 { font-size: 1.8rem; line-height: 1.2; }
    .hero p { font-size: 0.85rem; }
    .header { height: 60px; padding: 0 15px; }
    .logo img { width: 38px; height: 38px; }
    .logo-text { font-size: 1.15rem; }
    .logo { gap: 10px; }
    
    .page-hero { min-height: 35vh; padding: 100px 15px 50px; }
    .page-hero h1 { font-size: 1.6rem; }
    
    .section { padding: 40px 15px; }
    .section-header { margin-bottom: 30px; }
    .section-header h2 { font-size: 1.5rem; }
    
    .stat-card { padding: 18px 12px; }
    .stat-number { font-size: 1.8rem; }
    
    .timeline-item,
    .timeline-item:nth-child(even) {
        padding-left: 50px;
    }
    .timeline-card { padding: 18px; }
    .timeline-card h3 { font-size: 1rem; }
    
    .breadcrumb { font-size: 0.8rem; }
    
    .contact-info-item { flex-direction: column; align-items: center; text-align: center; }
    
    .tabs { flex-direction: column; }
    .tab-btn { width: 100%; }
    
    .impact-row { flex-direction: column; gap: 20px; }
}

/* ===== PRINT ===== */
@media print {
    header, footer, .scroll-top, .loading-screen, .toast-container,
    .scroll-indicator, .menu-toggle, .nav-overlay { display: none !important; }
    
    body { background: white; color: black; }
    .section { padding: 20px 0; }
    .hero { min-height: auto; padding: 30px; }
    
    * { animation: none !important; transition: none !important; }
}