/* ==========================================================================
   CREDITO SOLIDARIO — Responsive
   Breakpoints : 1200 / 992 / 768 / 576
   ========================================================================== */

/* ============ ≤ 1200px ============ */
@media (max-width: 1200px) {
    :root {
        --fs-6xl: 3.25rem;
        --fs-5xl: 2.75rem;
        --fs-3xl: 2rem;
    }
    .container { padding: 0 32px; }
    .split { gap: var(--space-10); }
}

/* ============ ≤ 992px (tablette) ============ */
@media (max-width: 992px) {
    :root {
        --header-h: 72px;
        --header-h-sm: 64px;
    }
    .nav,
    .header__cta { display: none; }

    .hamburger { display: inline-block; }

    .topbar__hide-mobile { display: none; }

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

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

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

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

    .split {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }
    .split__media { max-width: 560px; margin: 0 auto; }
    .split__badge { bottom: -20px; right: 10px; }

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

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

    .hero { min-height: 560px; }
    .hero__title { font-size: 3rem; }
    .hero__lead { font-size: var(--fs-md); }

    .cta-band__inner { flex-direction: column; text-align: center; }
    .cta-band__title { text-align: center; }
}

/* ============ ≤ 768px (mobile large) ============ */
@media (max-width: 768px) {
    .section { padding: var(--space-16) 0; }
    .container { padding: 0 20px; }

    :root {
        --fs-6xl: 2.5rem;
        --fs-5xl: 2.25rem;
        --fs-4xl: 2rem;
        --fs-3xl: 1.625rem;
        --fs-2xl: 1.375rem;
    }

    .topbar { display: none; }

    .services-grid,
    .testimonials,
    .blog-grid,
    .process { grid-template-columns: 1fr; }

    .hero { min-height: 500px; }
    .hero__inner { padding: var(--space-16) 0; }
    .hero__title { font-size: 2.25rem; line-height: 1.1; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { width: 100%; }
    .hero__arrow { display: none; }

    .hero-strip { padding: var(--space-4) 0; }
    .hero-strip__grid { grid-template-columns: 1fr; gap: var(--space-3); }

    .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); text-align: left; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-legal { justify-content: center; }

    .split__badge {
        position: static;
        margin: var(--space-4) auto 0;
    }

    .cta-band { padding: var(--space-12) 0; }

    .cookie-banner__inner { flex-direction: column; text-align: center; padding: var(--space-4); }
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__actions .btn { flex: 1; }
}

/* ============ ≤ 576px (mobile) ============ */
@media (max-width: 576px) {
    :root {
        --fs-5xl: 2rem;
        --fs-6xl: 2rem;
    }
    .section { padding: var(--space-12) 0; }
    .simulator { padding: var(--space-5); }
    .service-card { padding: var(--space-6); }

    .stats { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
    .stat__value { font-size: 2.5rem; }

    .simulator__result-primary { font-size: 2.5rem; }
    .simulator__result-secondary { grid-template-columns: 1fr; }

    .brand img { height: 36px; }
}

/* ============ Print ============ */
@media print {
    .topbar, .site-header, .hero__nav, .hero__arrow,
    .cookie-banner, .site-footer, .btn { display: none !important; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   LOT 2 — Responsive
   ========================================================================== */

@media (max-width: 992px) {
    .form-layout { grid-template-columns: 1fr; gap: var(--space-8); }
    .form-aside { position: static; }
    .contact-cards { grid-template-columns: 1fr; }
    .compare-table th, .compare-table td { padding: var(--space-3); font-size: var(--fs-xs); }
    .loan-detail { grid-template-columns: 1fr; text-align: left; }
}

@media (max-width: 768px) {
    .page-hero { padding: var(--space-16) 0 var(--space-12); }
    .page-hero__title { font-size: 2.25rem; }
    .form-row { grid-template-columns: 1fr; }
    .form-section { padding: var(--space-6); }
    .compare-table { font-size: var(--fs-xs); }
    .compare-table th, .compare-table td { padding: 10px 8px; }
    .notfound__code { font-size: 6rem; }
    .loan-detail__meta { flex-direction: column; gap: var(--space-3); }
}

@media (max-width: 576px) {
    .compare-table thead { display: none; }
    .compare-table tr {
        display: block;
        margin-bottom: var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-3);
    }
    .compare-table td {
        display: flex;
        justify-content: space-between;
        border: 0;
        padding: 6px 0;
    }
    .compare-table td::before {
        content: attr(data-label);
        font-weight: var(--fw-semi);
        color: var(--color-primary);
    }
}

/* Blog responsive */
@media (max-width: 992px) {
    .article-layout { grid-template-columns: 1fr; gap: var(--space-8); }
    .article-sidebar { position: static; }
    .blog-list { grid-template-columns: repeat(2, 1fr); }
    .article-header__title { font-size: var(--fs-3xl); }
}
@media (max-width: 768px) {
    .blog-list { grid-template-columns: 1fr; }
    .article-header__title { font-size: var(--fs-2xl); }
    .article-body { font-size: var(--fs-base); }
    .article-footer { flex-direction: column; align-items: flex-start; }
    .article-cover { aspect-ratio: 16 / 10; }
}

@media (max-width: 992px) {
    .legal-layout { grid-template-columns: 1fr; gap: var(--space-6); }
    .legal-sidebar { position: static; }
    .legal-sidebar__widget { padding: var(--space-4); }
}
@media (max-width: 768px) {
    .legal-content { padding: var(--space-6); }
    .legal-content h2 { font-size: var(--fs-lg); }
    .legal-content p, .legal-content li { font-size: var(--fs-base); }
}
