/* Responsive Styles */

/* For laptops and smaller screens (max 1200px) */
@media screen and (max-width: 1200px) {
    .industries-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
    
    h1 {
        font-size: 2.75rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .feature-card {
        padding: 1.75rem;
    }
    
    .container {
        padding: 0 32px;
    }
}

/* For tablets and medium screens (max 992px) */
@media screen and (max-width: 992px) {
    .hero .container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-content {
        text-align: center;
        margin: 0 auto;
    }
    
    .signup-form {
        margin: 0 auto;
        width: 100%;
        max-width: 500px;
    }
    
    .benefits-grid, 
    .features-grid,
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--white);
        box-shadow: var(--shadow-md);
        flex-direction: column;
        padding: 1.5rem;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        gap: 1.25rem;
        z-index: 100;
    }
    
    .nav-links.active {
        display: flex;
        animation: slideDown 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-15px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .dropdown {
        width: 100%;
    }
    
    .dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 0.5rem 0;
    }
    
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 0.5rem 0 0.5rem 1rem;
        display: none;
        width: 100%;
        border-left: 2px solid var(--primary-color);
        background-color: var(--light-gray);
        border-radius: var(--radius-sm);
        margin-top: 0.5rem;
    }
    
    .dropdown.active .dropdown-menu {
        display: block;
        animation: fadeIn 0.3s ease-in-out forwards;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .dropdown-menu a {
        padding: 0.75rem 1rem;
        border-radius: var(--radius-sm);
        margin-bottom: 0.25rem;
    }
    
    .dropdown-menu a:hover {
        background-color: rgba(58, 54, 224, 0.05);
        padding-left: 1.25rem;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
    
    /* Optimisation pour tablettes */
    .pricing-grid {
        gap: 1.5rem;
    }
    
    .cta-buttons {
        justify-content: center;
    }
    
    .testimonial-slider {
        padding: 0 1.5rem;
    }
}

/* For mobile landscape and small tablets (max 768px) */
@media screen and (max-width: 768px) {
    h1 {
        font-size: 2.25rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    .hero {
        padding: 4rem 0;
    }
    
    .hero::before {
        display: none;
    }
    
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .signup-form-inline form {
        flex-direction: column;
    }
    
    .signup-form-inline .form-group {
        width: 100%;
    }
    
    .benefits, 
    .industries,
    .features-highlight,
    .features-detail,
    .setup-steps,
    .before-after,
    .integrations,
    .testimonials,
    .users,
    .faq,
    .synonyms,
    .support {
        padding: 4rem 0;
    }
    
    .section-subtitle {
        font-size: 1.125rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    .testimonial-slide .quote {
        font-size: 1.125rem;
        padding: 0 1.5rem;
    }
    
    /* Touch device optimizations */
    .step-card,
    .benefit-card,
    .feature-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .step-card:hover,
    .benefit-card:hover,
    .feature-card:hover {
        transform: translateY(-3px);
    }
    
    .accordion-header {
        padding: 1.25rem;
    }
    
    .accordion-header h3 {
        font-size: 1rem;
        padding-right: 1.5rem;
    }
    
    .container {
        padding: 0 20px;
    }
    
    /* Amélioration UI mobile */
    .comparison-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -20px;
        padding: 0 20px;
    }
    
    .comparison-table {
        min-width: 650px;
    }
}

/* For mobile phones (max 576px) */
@media screen and (max-width: 576px) {
    .benefits-grid, 
    .features-grid,
    .steps-grid,
    .industries-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    h1 {
        font-size: 2rem;
        margin-bottom: 1.25rem;
    }
    
    h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    .main-nav {
        padding: 1rem 0;
    }
    
    .dropdown-menu {
        min-width: 100%;
    }
    
    .hero {
        padding: 3rem 0;
    }
    
    .hero p {
        font-size: 1.125rem;
        margin-bottom: 2rem;
    }
    
    .signup-form {
        padding: 1.5rem;
        box-shadow: var(--shadow-md);
        border: 1px solid var(--border-color);
    }
    
    .benefit-stat {
        font-size: 2.5rem;
    }
    
    .synonyms-table td {
        display: block;
        width: 100%;
    }
    
    .synonyms-table tr {
        display: block;
        margin-bottom: 1rem;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .step-card, 
    .benefit-card, 
    .feature-card {
        padding: 1.5rem;
    }
    
    /* Amélioration de l'accessibilité tactile */
    .btn {
        padding: 0.875rem 1.5rem;
        width: 100%;
    }
    
    /* Meilleure visibilité des textes sur mobile */
    .feature-subtitle {
        font-size: 1rem;
    }
    
    .testimonial-slide .quote {
        text-align: left;
    }
    
    /* Optimisation contact et formulaires */
    .form-row {
        flex-direction: column;
    }
    
    .form-group {
        width: 100%;
    }
    
    .options-grid, 
    .location-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Animation scroll mobile optimisée */
    .feature-card:hover, 
    .benefit-card:hover, 
    .step-card:hover {
        transform: translateY(-2px);
    }
    
    .container {
        padding: 0 16px;
    }
}

/* Fix pour les appareils à petits écrans (hauteur limitée) */
@media screen and (max-height: 700px) {
    .hero, 
    .benefits,
    .industries,
    .features-highlight {
        padding: 2.5rem 0;
    }
    
    h1 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
    
    h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .section-subtitle {
        margin-bottom: 1.5rem;
    }
    
    .btn {
        padding: 0.625rem 1.25rem;
    }
}

/* Ajout d'une média query pour les écrans extra larges */
@media screen and (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    h1 {
        font-size: 3.5rem;
    }
    
    h2 {
        font-size: 2.5rem;
    }
    
    .benefits-grid, 
    .features-grid,
    .steps-grid {
        gap: 2.5rem;
    }
}

/* Support du dark mode si activé au niveau système */
@media (prefers-color-scheme: dark) {
    :root {
        /* Variables dark mode qui seront appliquées si l'utilisateur a activé le dark mode */
        --dark-mode-bg: #121420;
        --dark-mode-card: #1D1E2C;
        --dark-mode-border: #2D2F45;
    }
    
    /* Ces styles ne seront appliqués que si on implémente le dark mode plus tard */
}