/* ===================================================
   VISION IMPACT GROUP - Responsive CSS
   =================================================== */

/* ===== LARGE DESKTOPS (1400px+) ===== */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
    .hero-title { font-size: 4rem; }
    .mega-menu  { width: 780px; }
}

/* ===== DESKTOPS (1200px - 1399px) ===== */
@media (max-width: 1199.98px) {
    :root {
        --navbar-height: 65px;
        --section-padding: 70px 0;
    }

    .logo-name  { font-size: 1rem; }
    .btn-devis  { padding: var(--space-2) var(--space-4); font-size: 0.85rem; }
    .mega-menu  { width: 620px; }
    .mega-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* ===== TABLETS LANDSCAPE (992px - 1199px) ===== */
@media (max-width: 991.98px) {
    :root {
        --navbar-height:      60px;
        --topbar-height:      auto;
        --section-padding:    60px 0;
        --section-padding-sm: 40px 0;
    }

    /* Top bar */
    .top-bar { height: auto; padding: var(--space-2) 0; }
    .top-bar .row { flex-direction: column; gap: var(--space-2); }
    .top-bar-contact { justify-content: center; flex-wrap: wrap; gap: var(--space-3); }
    .top-bar-right   { justify-content: center; }

    /* Navbar */
    .nav-menu        { display: none; }
    .burger-btn      { display: flex; }
    .btn-devis span  { display: none; }
    .btn-devis       { padding: var(--space-2) var(--space-3); }

    /* Hero */
    .hero-section    { height: 80vh; min-height: 500px; }
    .hero-title      { font-size: clamp(1.75rem, 4vw, 2.5rem); }
    .hero-stats      { gap: var(--space-5); }
    .hero-stat-value { font-size: var(--text-2xl); }
    .hero-scroll     { display: none; }

    /* Stats */
    .stats-bg { background-attachment: scroll; }
    .cta-bg   { background-attachment: scroll; }

    /* Why us */
    .why-us-badge { bottom: -10px; right: -10px; width: 90px; height: 90px; }
    .badge-number { font-size: 1.5rem; }

    /* Footer */
    .footer-brand { padding-right: 0; }
    .footer-newsletter .row { flex-direction: column; }
}

/* ===== TABLETS PORTRAIT (768px - 991px) ===== */
@media (max-width: 767.98px) {
    :root {
        --section-padding:    50px 0;
        --section-padding-sm: 35px 0;
    }

    /* Top bar */
    .top-bar-contact { display: none; }
    .top-bar-right   { justify-content: center; }

    /* Hero */
    .hero-section    { height: 75vh; }
    .hero-title      { font-size: clamp(1.5rem, 5vw, 2.25rem); }
    .hero-desc       { font-size: var(--text-base); }
    .hero-actions    { flex-direction: column; align-items: flex-start; }
    .btn-hero-primary,
    .btn-hero-secondary { width: 100%; justify-content: center; }
    .hero-stats      { gap: var(--space-4); }
    .hero-prev, .hero-next { width: 40px; height: 40px; }
    .hero-prev       { left: var(--space-3); }
    .hero-next       { right: var(--space-3); }

    /* Section headers */
    .section-title   { font-size: clamp(1.5rem, 4vw, 2rem); }
    .section-desc    { font-size: var(--text-base); }

    /* Stats */
    .stat-value      { font-size: var(--text-4xl); }

    /* Testimonials */
    .testimonial-card { padding: var(--space-6); }
    .testimonial-text { font-size: var(--text-base); }

    /* CTA */
    .cta-title       { font-size: clamp(1.5rem, 4vw, 2rem); }
    .cta-form-card   { margin-top: var(--space-6); }

    /* Footer */
    .footer-body     { padding: var(--space-10) 0 var(--space-6); }
    .footer-legal    { justify-content: center; margin-top: var(--space-2); }
    .footer-copy     { text-align: center; }

    /* Newsletter */
    .newsletter-input-group { flex-direction: column; border-radius: var(--radius-lg); }
    .newsletter-input { border-radius: var(--radius-lg) !important; }
    .newsletter-btn   { border-radius: var(--radius-lg) !important; justify-content: center; }

    /* Back to top & WhatsApp */
    .back-to-top     { bottom: var(--space-4); right: var(--space-4); }
    .whatsapp-float  { bottom: var(--space-12); right: var(--space-4); }
}

/* ===== MOBILE (576px - 767px) ===== */
@media (max-width: 575.98px) {
    :root {
        --section-padding:    40px 0;
        --section-padding-sm: 30px 0;
    }

    /* Top bar */
    .top-social      { gap: var(--space-1); }
    .social-icon     { width: 24px; height: 24px; font-size: 0.7rem; }
    .top-auth-link span,
    .top-auth-btn span { display: none; }

    /* Logo */
    .logo-name       { font-size: 0.9rem; }
    .logo-sub        { font-size: 0.6rem; letter-spacing: 2px; }
    .logo-icon       { width: 38px; height: 38px; }

    /* Hero */
    .hero-section    { height: 70vh; min-height: 450px; }
    .hero-content    { padding: var(--space-5) 0; }
    .hero-badge      { font-size: 0.75rem; }
    .hero-title      { font-size: clamp(1.4rem, 6vw, 2rem); }
    .hero-desc       { font-size: var(--text-sm); }
    .hero-stats      { gap: var(--space-3); }
    .hero-stat-value { font-size: var(--text-xl); }
    .hero-stat-label { font-size: 0.65rem; }

    /* Branch cards */
    .branch-card-icon { width: 52px; height: 52px; font-size: 1.2rem; }

    /* Stats */
    .stat-card       { padding: var(--space-5); }
    .stat-value      { font-size: var(--text-3xl); }
    .stat-icon       { font-size: 2rem; }

    /* Why us */
    .why-us-badge    { display: none; }
    .why-feature     { flex-direction: column; gap: var(--space-3); }

    /* Project & News cards */
    .project-card-img,
    .news-card-img   { height: 180px; }

    /* Testimonials */
    .testimonial-card { padding: var(--space-5); }
    .testimonial-text { font-size: var(--text-sm); }
    .testimonial-author { flex-direction: column; text-align: center; }

    /* CTA */
    .cta-features    { gap: var(--space-2); }
    .cta-form-card   { padding: var(--space-5); }

    /* Careers band */
    .careers-band-icon { width: 55px; height: 55px; font-size: 1.4rem; }

    /* Footer */
    .footer-social   { justify-content: center; }
    .footer-title    { font-size: 0.95rem; }
    .footer-links a  { font-size: var(--text-xs); }
    .footer-contact-list li { font-size: var(--text-xs); }
    .footer-copy     { font-size: var(--text-xs); }
    .footer-legal    { font-size: var(--text-xs); gap: var(--space-2); }

    /* Mobile menu */
    .mobile-menu     { width: 100vw; }

    /* Pagination */
    .pagination .page-link { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }

    /* Flash messages */
    .flash-container { left: var(--space-3); right: var(--space-3); max-width: none; }
}

/* ===== EXTRA SMALL (< 400px) ===== */
@media (max-width: 399.98px) {
    .hero-title      { font-size: 1.3rem; }
    .hero-actions    { gap: var(--space-2); }
    .btn-hero-primary,
    .btn-hero-secondary { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); }
    .hero-stats      { display: none; }
    .section-title   { font-size: 1.4rem; }
    .stat-value      { font-size: var(--text-2xl); }
}

/* ===== PRINT ===== */
@media print {
    .top-bar,
    .main-navbar,
    .main-footer,
    .back-to-top,
    .whatsapp-float,
    .page-loader,
    .flash-container { display: none !important; }

    body { font-size: 12pt; color: #000; }
    a    { color: #000; text-decoration: underline; }

    .hero-section { height: auto; min-height: auto; }
    .hero-overlay { display: none; }
    .hero-content { color: #000; }
    .hero-title   { color: #000; }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-slide { transition: none; }
    .partners-inner { animation: none; }
    .scroll-wheel { animation: none; }
    .loader-bar span { animation: none; }
}

/* ===== HIGH CONTRAST ===== */
@media (prefers-contrast: high) {
    :root {
        --primary: #0033aa;
        --secondary: #cc4400;
    }

    .nav-link, .footer-links a { text-decoration: underline; }
    .btn-primary, .btn-secondary { border: 2px solid currentColor; }
}

/* ===== FOCUS STYLES (Accessibility) ===== */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible { outline: 3px solid var(--secondary); }