/* ==============================================================
   SUFFAYA — Media Queries Responsive
   Mobile-first : les styles de base sont pour mobile.
   ============================================================== */

/* --- Small (640px+) : Grands telephones --- */
@media (min-width: 640px) {
    :root {
        --container-padding: 1.5rem;
    }

    .section {
        padding: var(--spacing-2xl) 0;
    }

    h1 { font-size: var(--font-size-4xl); }
}

/* --- Medium (768px+) : Tablettes --- */
@media (min-width: 768px) {
    :root {
        --container-padding: 2rem;
    }

    .page-content {
        padding-top: var(--header-height);
    }

    .section {
        padding: var(--spacing-3xl) 0;
    }

    .hide-desktop { display: none !important; }
}

/* --- Large (1024px+) : Desktop --- */
@media (min-width: 1024px) {
    .hero-section .hero-content {
        max-width: 50%;
    }
}

/* --- Mobile only --- */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }

    .page-content {
        padding-top: var(--header-height-mobile);
    }

    .section-title {
        font-size: var(--font-size-xl);
    }
}

/* --- Print --- */
@media print {
    .header, .footer, .drawer, .header-overlay,
    .toast-container, .btn { display: none !important; }

    .page-content { padding-top: 0; }
    body { background: white; color: black; font-size: 12pt; }
}