/* ==========================================================================
   RESPONSIVE.CSS - V8.13.0 Sprint A architectural ordre chargement
   --------------------------------------------------------------------------
   Centralise les @media mobile/tablet retires de app.css L2304-2457.
   UNLAYERED + charge en DERNIER source-order : wins sans bang-priority
   sur LAYERED (UNLAYERED > LAYERED Lesson #249) ET sur UNLAYERED inline
   <style> dans templates (source-later wins meme specificite).
   AVANT V8.13.0 : 20 bangs dans app.css forces pour battre landing.css
   source-later meme layer (Lesson #256).
   APRES V8.13.0 : UNLAYERED + last-link -> bat tout sans bang.
   Lesson #263 : responsive central UNLAYERED + last-link = anti-Lesson #256.
   ========================================================================== */

/* ── Mobile ≤ 640px ── */
@media (max-width: 640px) {
    /* Hero sections */
    .hero h1,
    .faq-hero h1,
    .tarifs-hero h1,
    .di-hero h1,
    .hub-hero h1,
    .blog-hero h1,
    .contact-hero h1,
    .about-hero h1,
    .author-hero h1,
    .ann-hero h1,
    .trial-hero h1 {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }

    .hero,
    .faq-hero,
    .tarifs-hero,
    .di-hero,
    .hub-hero,
    .blog-hero,
    .contact-hero,
    .about-hero,
    .author-hero,
    .ann-hero,
    .art-hero,
    .res-hero,
    .mkt-hero,
    .mkd-hero,
    .dt-hero,
    .trial-hero {
        padding: 2rem 1rem;
    }

    /* Sections padding */
    section {
        padding-inline-start: 1rem;
        padding-inline-end: 1rem;
    }

    /* Stats bar stack */
    .stats-bar,
    .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }

    /* Grid cards single column */
    .grid-3,
    .grid-4,
    .features-grid,
    .creer-features .features-grid {
        grid-template-columns: 1fr;
    }

    /* CTA buttons stack */
    .cta-group,
    .hero-cta,
    .faq-cta-btns {
        flex-direction: column;
        gap: 0.5rem;
    }
    .cta-group a,
    .cta-group button,
    .hero-cta a,
    .hero-cta button,
    .faq-cta-btns .btn {
        width: 100%;
        text-align: center;
    }

    /* Tables overflow */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Touch targets min 48px */
    .btn,
    .faq-cat,
    .faq-question,
    a.btn-hero,
    a.btn-hero-outline,
    button {
        min-height: 48px;
    }

    /* Prevent iOS zoom on inputs (WCAG 1.4.4 : 1rem >= 16px par defaut) */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    textarea,
    select {
        font-size: 1rem;
    }

    /* Blog cards stack */
    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* Dossier index cards stack */
    .di-grid {
        grid-template-columns: 1fr;
    }

    /* Hub calculators stack */
    .hub-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Tablet 641px — 1024px ── */
@media (min-width: 641px) and (max-width: 1024px) {
    .grid-3,
    .grid-4,
    .features-grid,
    .creer-features .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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