/**
 * ==============================================================================
 * OMEGA VISION - FEUILLE DE STYLE RESPONSIVE : ADAPTATIONS MULTI-ÉCRANS
 * ==============================================================================
 * Rôle :
 * Garantir une ergonomie irréprochable sur l'ensemble des terminaux :
 * - Smartphones (320px - 576px)
 * - Tablettes (577px - 991px)
 * - Ordinateurs portables et grands écrans (992px+)
 * Priorité absolue : Mobile-First et zones tactiles confortables (> 44px).
 * ==============================================================================
 */

/* --------------------------------------------------------------------------
 * 1. TABLETTES & ÉCRANS MOYENS (max-width: 991px)
 * -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    :root {
        --container-padding: 1.25rem;
    }

    /* Header & Navigation */
    .main-nav,
    .header-cta {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    /* Grilles d'affichage */
    .hero-subrow {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl);
    }

    .case-content-section {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

/* --------------------------------------------------------------------------
 * 2. SMARTPHONES & PETITS ÉCRANS (max-width: 767px)
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    :root {
        --container-padding: 1rem;
        --space-4xl: 4rem;
        --space-5xl: 5rem;
    }

    .section-padding {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .section-padding-lg {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .hero-section {
        padding-top: calc(70px + var(--space-2xl));
        padding-bottom: var(--space-2xl);
    }

    .hero-headline {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .hero-visual-banner {
        aspect-ratio: 16 / 10;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .brief-options-grid {
        grid-template-columns: 1fr;
    }

    .case-meta-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .case-gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .btn {
        width: 100%;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }
}