/**
 * Responsive CSS
 * Styles responsives pour tous les appareils
 */

/* Mobile First - Base styles in other files */

/* Tablet - Medium screens */
@media (min-width: 768px) {
    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

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

/* Desktop - Large screens */
@media (min-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

/* Large Desktop */
@media (min-width: 1280px) {
    .container {
        max-width: var(--container-xl);
    }
}

/* Extra Large Desktop */
@media (min-width: 1536px) {
    .container {
        max-width: var(--container-2xl);
    }
}

/* Print styles */
@media print {
    .mobile-bottom-nav,
    .app-header,
    .footer {
        display: none;
    }

    body {
        padding-bottom: 0;
    }
}