/* ============================================================
   responsive.css — Media queries mobile-first
   neobanking.ch
   Breakpoints : sm 480px | md 768px | lg 1024px | xl 1280px
   ============================================================ */

/* ---- Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {

    /* Layout article / page banque : 1 colonne */
    .nb-container > div[style*="grid-template-columns: 1fr 320px"],
    .nb-container > div[style*="grid-template-columns:1fr 320px"] {
        grid-template-columns: 1fr !important;
    }

    /* Footer : 2 colonnes */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Sticky sidebar désactivée */
    aside[style*="position:sticky"] {
        position: static !important;
    }

}

/* ---- Mobile (≤ 768px) ---- */
@media (max-width: 768px) {

    /* Navigation */
    .nav-main      { display: none; }
    .nav-toggle    { display: block; }

    /* Hero */
    .hero          { padding: 60px 0 40px; }
    .hero h1       { font-size: 1.75rem; }
    .hero p.lead   { font-size: 1rem; }
    .hero-stats    { gap: 16px; }
    .hero-stat strong { font-size: 1.4rem; }

    /* Header CTA nav caché sur mobile */
    .header-inner .btn-primary { display: none; }

    /* Sections */
    .section-padded { padding: 48px 0; }

    /* Tableau comparatif */
    .tableau-comparatif thead th,
    .tableau-comparatif tbody td {
        padding: 12px 14px;
        font-size: 0.82rem;
    }
    /* Masquer certaines colonnes moins importantes */
    .tableau-comparatif th:nth-child(4),
    .tableau-comparatif td:nth-child(4),
    .tableau-comparatif th:nth-child(6),
    .tableau-comparatif td:nth-child(6) {
        display: none;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .footer-legal-links { justify-content: center; }

    /* Grilles cartes */
    .trust-grid,
    .top3-grid {
        grid-template-columns: 1fr !important;
    }

    /* FAQ */
    .faq-question { font-size: 0.95rem; }

    /* Page banque — header */
    .hero > .nb-container > div {
        flex-direction: column !important;
    }

    /* Back to top */
    .back-to-top { bottom: 80px; }

    /* Bannière cookies */
    .cookie-banner { flex-direction: column; text-align: center; }
    .cookie-banner__actions { justify-content: center; }

    /* Filtres tableau */
    .tableau-filtres { gap: 8px; }
    .filtre-btn { font-size: 0.8rem; padding: 6px 14px; }

    /* Notes détaillées page banque */
    .note-bar__label { min-width: 140px; font-size: 0.8rem; }

    /* Grille critères page comparatif */
    .nb-container > div[style*="repeat(auto-fit,minmax(200px"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Hero stat layout */
    .hero-stats {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .hero-stat { flex: 0 0 calc(50% - 8px); }

}

/* ---- Petit mobile (≤ 480px) ---- */
@media (max-width: 480px) {

    /* Conteneur */
    .nb-container { padding: 0 16px; }

    /* Titres */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }

    /* CTA hero */
    .hero-cta-group { flex-direction: column; }
    .hero-cta-group .btn-primary,
    .hero-cta-group .btn-secondary { width: 100%; justify-content: center; }

    /* Banque card */
    .banque-card { padding: 20px; }

    /* Tableau — encore simplifier */
    .tableau-comparatif th:nth-child(5),
    .tableau-comparatif td:nth-child(5),
    .tableau-comparatif th:nth-child(7),
    .tableau-comparatif td:nth-child(7) {
        display: none;
    }

    /* Points clés page banque */
    .nb-container > div[style*="repeat(auto-fit,minmax(160px"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Note bars */
    .note-bar { flex-wrap: wrap; }
    .note-bar__label { min-width: 100%; }

    /* Grille critères 1 colonne */
    .nb-container > div[style*="repeat(auto-fit,minmax(200px"] {
        grid-template-columns: 1fr !important;
    }

}

/* ---- Print ---- */
@media print {
    .site-header,
    .cookie-banner,
    .back-to-top,
    .btn-primary,
    .btn-secondary,
    .tableau-filtres { display: none !important; }

    body { font-size: 12pt; color: #000; }
    a    { color: #000; text-decoration: underline; }
    .banque-card { break-inside: avoid; }
}

/* ---- Accessibilité — focus visible ---- */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---- Motion réduite ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}