/* ============================================================
   SL LOKAL KREDIT — RESPONSIVE
   Media queries pour mobile, tablette, desktop, ultra-wide
   ============================================================ */

/* ------------------------------------------------------------
   1. ULTRA-WIDE (≥ 1600px) — Écrans très larges
   ------------------------------------------------------------ */
@media (min-width: 1600px) {
    :root {
        --container-max: 1400px;
    }
    .hero-content h1 {
        font-size: 4rem;
    }
}

/* ------------------------------------------------------------
   2. DESKTOP LARGE (≤ 1200px) — Ajustements
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; }
    .footer-grid > *:last-child { grid-column: 1 / -1; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .process-timeline { grid-template-columns: repeat(2, 1fr); }
    .process-timeline::before { display: none; }
}

/* ------------------------------------------------------------
   3. TABLETTE (≤ 992px)
   ------------------------------------------------------------ */
@media (max-width: 992px) {
    :root {
        --header-height: 70px;
    }

    .section { padding: 60px 0; }
    .section-lg { padding: 80px 0; }

    /* Header : menu caché par défaut, ouvert par JS */
    .header-nav {
        display: none;
    }
    .header-nav.mobile-open {
        display: flex;
    }
    .hamburger {
        display: flex;
    }

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

    /* Hero */
    .hero {
        min-height: calc(100vh - var(--header-height));
    }
    .hero-content h1 {
        font-size: 2.2rem;
    }

    /* Processus */
    .process-timeline {
        grid-template-columns: 1fr 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .footer-grid > *:last-child {
        grid-column: auto;
    }

    /* Cartes */
    .card { padding: 24px; }

    /* Section-title */
    .section-title { margin-bottom: 40px; }

    /* Formulaire */
    .form-group label { font-size: 13px; }
}

/* ------------------------------------------------------------
   4. MOBILE (≤ 768px) — Le gros du travail responsive
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    :root {
        --container-pad: 18px;
    }

    /* Base */
    body { font-size: 15px; }
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.25rem; }

    .section { padding: 50px 0; }
    .section-lg { padding: 60px 0; }
    .section-sm { padding: 35px 0; }

    /* Header */
    .header-inner {
        gap: 10px;
    }
    .header-logo {
        height: 45px;
    }
    .header-actions {
        gap: 8px;
    }
    .lang-switcher,
    .currency-switcher {
        padding: 5px 10px;
        font-size: 12px;
    }
    .lang-switcher img,
    .eu-flag-icon {
        width: 18px;
        height: 13px;
    }

    /* Hero */
    .hero {
        min-height: 85vh;
        padding: 30px 0;
    }
    .hero-content {
        padding: 20px var(--container-pad);
    }
    .hero-content h1 {
        font-size: 1.8rem;
        line-height: 1.2;
    }
    .hero-content .hero-sub {
        font-size: 1rem;
    }
    .hero-badges {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .hero-badges .badge {
        font-size: 12px;
        padding: 6px 14px;
    }
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .hero-actions .btn {
        width: 100%;
    }

    /* Grilles : tout en 1 colonne */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Chiffres clés */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .stat-item { padding: 20px 12px; }
    .stat-number { font-size: 1.8rem; }
    .stat-label { font-size: 0.85rem; }

    /* Cartes */
    .card {
        padding: 20px;
    }
    .card-icon {
        width: 50px;
        height: 50px;
    }
    .card-icon svg {
        width: 26px;
        height: 26px;
    }

    /* Processus */
    .process-timeline {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .process-num {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    /* Offres */
    .offer-body {
        padding: 20px;
    }
    .offer-body h3 {
        font-size: 1.1rem;
    }
    .offer-price {
        font-size: 1rem;
        padding: 10px 12px;
    }

    /* Témoignages */
    .testimonial-card {
        padding: 22px;
    }

    /* Partenaires */
    .partners-track {
        gap: 35px;
    }
    .partners-track img {
        height: 35px;
    }

    /* Footer */
    .footer {
        padding: 50px 0 25px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 35px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .footer-eu {
        justify-content: center;
    }
    .social-links {
        justify-content: center;
    }

    /* Boutons flottants */
    .floating-buttons {
        bottom: 18px;
        right: 15px;
        gap: 10px;
    }
    .float-btn {
        width: 48px;
        height: 48px;
    }
    .float-btn svg {
        width: 22px;
        height: 22px;
    }

    /* Formulaires */
    .form-control {
        padding: 12px 15px;
        font-size: 14px;
    }

    /* Slider */
    .slider-value {
        font-size: 1.25rem;
    }

    /* Boutons */
    .btn {
        padding: 13px 26px;
        font-size: 15px;
    }
    .btn-lg {
        padding: 15px 30px;
        font-size: 16px;
    }
}

/* ------------------------------------------------------------
   5. TRÈS PETIT MOBILE (≤ 480px)
   ------------------------------------------------------------ */
@media (max-width: 480px) {
    :root {
        --container-pad: 15px;
    }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.15rem; }

    .section { padding: 40px 0; }

    /* Header */
    .header-logo { height: 40px; }
    .lang-switcher,
    .currency-switcher {
        padding: 4px 8px;
        font-size: 11px;
        gap: 4px;
    }
    .lang-switcher img,
    .eu-flag-icon {
        width: 16px;
        height: 12px;
    }

    /* Hero */
    .hero-content h1 {
        font-size: 1.5rem;
    }

    /* Chiffres clés : 1 seule colonne sur très petit écran */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Stat */
    .stat-number { font-size: 1.6rem; }

    /* Section title */
    .section-title {
        margin-bottom: 30px;
    }
    .section-title h2 {
        font-size: 1.4rem;
    }
    .section-title p {
        font-size: 0.95rem;
    }

    /* Cartes */
    .card { padding: 18px; }

    /* Offres */
    .offer-body { padding: 18px; }

    /* Boutons */
    .btn {
        padding: 12px 22px;
        font-size: 14px;
    }

    /* Floating buttons */
    .float-btn {
        width: 44px;
        height: 44px;
    }
    .float-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* ------------------------------------------------------------
   6. ORIENTATION PAYSAGE (mobile horizontal)
   ------------------------------------------------------------ */
@media (max-width: 900px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 60px 0;
    }
    .hero-scroll {
        display: none;
    }
}

/* ------------------------------------------------------------
   7. IMPRESSION (print)
   ------------------------------------------------------------ */
@media print {
    .header,
    .floating-buttons,
    .scroll-progress,
    .hamburger,
    .hero-scroll,
    .footer {
        display: none !important;
    }
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    .section {
        padding: 20px 0;
        page-break-inside: avoid;
    }
    a {
        color: black;
        text-decoration: underline;
    }
}

/* ------------------------------------------------------------
   8. ACCESSIBILITÉ — Préférence mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .partners-track {
        animation: none;
    }
}

/* ------------------------------------------------------------
   9. MODE SOMBRE (optionnel, détecté automatiquement)
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    /* Le site garde son design clair par défaut.
       Cette section est prévue pour une future version sombre.
       Pour l'activer, décommenter les règles ci-dessous. */
    /*
    body {
        background: #0a1a2e;
        color: #e8eef5;
    }
    .card {
        background: #12253d;
        color: #e8eef5;
    }
    */
@media (min-width: 993px) {
    .sticky-contact {
        position: sticky;
        top: 100px;
    }
}    
}

/* ------------------------------------------------------------
   FIN RESPONSIVE.CSS
   ------------------------------------------------------------ */