/* ======================================================================
   responsive.css — Media queries mobile-first (Sprint 4B.2).
   Les valeurs mobile vivent dans base.css + components.css.
   Ce fichier contient uniquement les overrides progressifs :
     - ≥ 601 px : élargissement form devis
     - ≥ 768 px : tablette (grids 2 cols, nav partielle, hero-buttons row,
                  stats/footer desktop)
     - ≥ 1024 px : desktop (grids 4 cols, nav complète, hero row,
                   padding desktop restaurés)
   ====================================================================== */

/* =====================================================================
   ≥ 601 px : 2 colonnes dans le form devis
   ===================================================================== */
@media (min-width: 601px) {
    .devis-form .form-row { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   ≥ 768 px : tablette (grids 2 colonnes, utilitaires device-conditionnel)
   ===================================================================== */
@media (min-width: 768px) {
    /* Utilitaires device-conditionnel : retour valeurs desktop */
    .desktop-only { display: inline; }
    .mobile-only { display: none; }

    /* Nav : logo texte réapparaît ; les btn-rdv retrouvent leur version texte
       (S5.13 — à mobile ils sont compactés en 44×44 icon-only) */
    .logo-text { display: block; }
    .nav-actions .btn-rdv { padding: 0.6rem var(--space-4); width: auto; }

    /* Grids qui passent de 1 col → 2 cols (ou 2 → 3 pour gallery) */
    .stats-bar { grid-template-columns: repeat(4, 1fr); padding: var(--space-12) var(--space-16); }
    .pricing-cards { grid-template-columns: repeat(2, 1fr); max-width: 800px; }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-content { grid-template-columns: 1fr 1fr; gap: var(--space-16); }

    /* Flex layouts : hero-buttons et footer-bottom reviennent en ligne */
    .hero-buttons { flex-direction: row; align-items: stretch; }
    .footer-bottom { flex-direction: row; gap: 0; text-align: initial; }
}

/* =====================================================================
   ≥ 1024 px : desktop complet (grids 4 cols, nav complète, hero row,
   padding desktop, features-visual affichée)
   ===================================================================== */
@media (min-width: 1024px) {
    /* Nav : padding desktop + liens de navigation visibles, burger caché */
    header nav { padding: var(--space-4) var(--space-16); }
    .nav-links { display: flex; }
    .burger { display: none; }

    /* Hero : layout 2 colonnes avec padding desktop */
    .hero-container { flex-direction: row; padding: 0 var(--space-16); }
    .hero-content { max-width: 800px; }

    /* Grids principales à 4 colonnes */
    .pricing-cards { grid-template-columns: repeat(4, 1fr); max-width: 1400px; }
    .gallery-grid { grid-template-columns: repeat(4, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(4, 1fr); }
    .process-grid { grid-template-columns: repeat(4, 1fr); }
    /* Le trait décoratif derrière les step-numbers n'apparaît qu'en desktop */
    .process-grid::before { display: block; }

    /* Sections 2 colonnes desktop */
    .services-details { grid-template-columns: 1fr 1fr; }
    .options-grid { grid-template-columns: 1fr 1fr; }
    .detailing-grid { grid-template-columns: repeat(2, 1fr); }
    .features-content { grid-template-columns: 1fr 1fr; }
    .features-visual { display: flex; }
    .location-content { grid-template-columns: 1fr 1fr; }

    /* Footer : 4 colonnes finales (brand + 3 cols) */
    .footer-content { grid-template-columns: 2fr 1fr 1fr 1fr; }

    /* Paddings sections desktop (mobile reste compact pour ne pas écraser) */
    .pricing,
    .detailing,
    .gallery,
    .testimonials,
    .process,
    .features,
    .cta { padding: var(--space-32) var(--space-16); }
    .location { padding: var(--space-24) var(--space-16); }
    .handwash-banner { padding: var(--space-16); }
    footer { padding: var(--space-16); }
}