/* ========================================
   PROPRE - RESPONSIVE STYLES (OPTIMISÉ)
   ======================================== */

/* --- Tablette (Max 1024px) --- */
@media screen and (max-width: 1024px) {
    :root {
        --spacing-xl: 2.5rem;
        --spacing-2xl: 3.5rem;
        --spacing-3xl: 4rem;
        /* Réduction de la taille des polices titres */
        font-size: 15px; 
    }
    
    .container {
        padding: 0 var(--spacing-md);
        max-width: 100%;
        overflow-x: hidden; /* Empêche le débordement horizontal */
    }

    /* Hero : Passage en colonne */
    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }

    .hero-content {
        margin: 0 auto;
    }

    .hero-subtitle {
        justify-content: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-trust {
        justify-content: center;
    }
    
    /* Grilles : Passage à 2 colonnes au lieu de 3 ou 4 */
    .eco-grid,
    .partners-grid,
    .testimonials-grid, 
    .training-grid,
    .fleet-showcase,
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .testimonials-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Mobile Landscape & Tablettes (Max 768px) --- */
@media screen and (max-width: 768px) {
    :root {
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
    }
    
    /* Menu Mobile */
    .nav-actions .btn-cta {
        display: none; /* Cache le bouton devis dans la nav sur mobile pour gagner de la place */
    }

    .hamburger {
        display: flex; /* Affiche le burger */
        z-index: 1001;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100vh;
        background: var(--color-white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: var(--shadow-2xl);
        transition: left 0.3s ease-in-out;
        z-index: 1000;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu li {
        margin: 1.5rem 0;
    }

    .nav-link {
        font-size: 1.25rem;
    }

    /* Grilles : Passage à 1 colonne (Correction des sections tronquées) */
    .eco-grid,
    .services-grid,
    .dashboard-grid,
    .testimonials-grid,
    .contact-content,
    .tax-content,
    .partners-grid,
    .training-grid,
    .fleet-showcase,
    .footer-content,
    .testimonials-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    /* Ajustements spécifiques */
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-card {
        padding: var(--spacing-md);
    }

    /* Contact Form & Info */
    .contact-content {
        display: flex;
        flex-direction: column-reverse; /* Formulaire en premier sur mobile ? ou garder grid 1fr */
    }

    /* Footer en 1 colonne */
    .footer-content {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-col ul li a {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Calculatrice Urssaf */
    .input-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .input-group input {
        text-align: center;
        width: 100%;
    }
}

/* --- Petit Mobile (Max 480px) --- */
@media screen and (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
    }
    
    /* Cartes Dashboard */
    .dashboard-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .dashboard-content {
        width: 100%;
    }
    
    .dashboard-comparison {
        justify-content: center;
    }

    /* Ajustement Chat Widget pour ne pas cacher le contenu */
    .chat-widget {
        bottom: 10px;
        right: 10px;
    }
    
    .chat-window {
        width: calc(100vw - 20px);
        height: 60vh;
        bottom: 80px;
        right: 0;
    }
}
/* ========================================
   CORRECTIFS URSSAF & BOUTONS (À AJOUTER)
   ======================================== */

/* --- Tablette & Mobile (Max 1024px) --- */
@media screen and (max-width: 1024px) {
    /* Force la section Urssaf à s'empiler verticalement */
    .tax-content {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-xl);
    }
    
    /* Ajuste la largeur de la carte calculatrice */
    .calculator-card {
        width: 100%;
        max-width: 100%;
    }
}

/* --- Mobile (Max 768px) --- */
@media screen and (max-width: 768px) {
    /* CORRECTION DU BOUTON IMPACT (Débordement) */
    /* On autorise le texte à passer à la ligne */
    .btn, .btn-large {
        white-space: normal !important; 
        height: auto !important;
        padding: 1rem 1.25rem !important;
        line-height: 1.4 !important;
        text-align: center;
        max-width: 100%;
    }

    /* Spécifique pour le conteneur du bouton Impact */
    .impact-cta {
        padding: var(--spacing-lg) var(--spacing-md);
        width: 100%;
        box-sizing: border-box;
    }
    
    .impact-cta .btn {
        width: 100%; /* Le bouton prend toute la largeur disponible */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* CORRECTION SECTION URSSAF & CALCULATEUR */
    .tax-steps {
        padding-right: 0;
    }

    .tax-info, .tax-calculator {
        width: 100%;
        overflow-x: hidden; /* Empêche tout débordement horizontal */
    }

    /* Ajustement des champs du calculateur pour qu'ils ne débordent pas */
    .input-group {
        flex-direction: column; /* Empile l'input et le symbole € */
        align-items: stretch;
    }

    .input-group input {
        width: 100%;
        border-radius: var(--radius-md);
        margin-bottom: 0.5rem;
        text-align: center;
    }
    
    /* Réduit la taille des gros chiffres sur mobile */
    .result-value.big {
        font-size: 1.5rem;
    }
    
    .economy-badge {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
}