/* ==========================================================================
   AUDEX Avocats — responsive.css
   Mobile-first — breakpoints : 640px, 768px, 1024px, 1280px
   ========================================================================== */

/* --- Mobile : < 640px (base) --- */

/* Mobile menu */
@media (max-width: 1023px) {
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 380px;
        height: 100vh;
        background: var(--color-navy);
        flex-direction: column;
        align-items: stretch;
        padding: 5rem 2rem 2rem;
        transition: right 0.4s ease;
        box-shadow: -5px 0 30px rgba(0,0,0,0.3);
        overflow-y: auto;
    }

    .main-nav.open {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
    }

    .nav-link {
        padding: 0.85rem 0;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .has-dropdown .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

    .has-dropdown.open .dropdown {
        max-height: 500px;
    }

    .dropdown a {
        color: rgba(255,255,255,0.75);
        padding: 0.6rem 1.5rem;
        font-size: 0.95rem;
    }

    .dropdown a:hover {
        color: var(--color-gold);
        background: transparent;
    }

    .header-cta {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Overlay */
    .menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }

    .menu-overlay.active {
        display: block;
    }

    /* Mobile floating CTA */
    .mobile-cta-float {
        display: block;
    }

    body {
        padding-bottom: 70px;
    }
}

/* --- Small phones fix --- */
@media (max-width: 380px) {
    .header-phone span {
        display: none;
    }

    .hero {
        padding: 7rem 1rem 3rem;
    }

    .hero h1 {
        font-size: 1.8rem;
    }
}

/* --- 640px+ --- */
@media (min-width: 640px) {
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .related-services {
        grid-template-columns: repeat(3, 1fr);
    }

    .testimonial-card {
        flex: 0 0 50%;
    }
}

/* --- 768px+ --- */
@media (min-width: 768px) {
    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* Flèches entre étapes */
    .step-arrow {
        display: block;
        position: absolute;
        right: -1.25rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-gold);
        opacity: 0.5;
    }

    .step-card:last-child .step-arrow {
        display: none;
    }

    .cta-block {
        padding: 4rem 3rem;
    }
}

/* --- 1024px+ (desktop nav visible) --- */
@media (min-width: 1024px) {
    .main-nav {
        position: static;
        width: auto;
        height: auto;
        background: transparent;
        padding: 0;
        box-shadow: none;
        overflow: visible;
    }

    .nav-list {
        flex-direction: row;
    }

    .nav-link {
        border-bottom: none;
        font-size: 0.95rem;
        padding: 0.5rem 1rem;
    }

    .mobile-menu-toggle {
        display: none;
    }

    .header-cta {
        display: inline-flex;
    }

    .mobile-cta-float {
        display: none;
    }

    body {
        padding-bottom: 0;
    }

    /* Pillars full grid */
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

    /* Services 5 columns x 2 rows */
    .services-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.25rem;
    }

    .service-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .service-card .arrow {
        display: none;
    }

    /* Testimonials show 2 */
    .testimonial-card {
        flex: 0 0 50%;
    }
}

/* --- 1280px+ --- */
@media (min-width: 1280px) {
    :root {
        --section-pad: 6rem 2rem;
    }

    .container {
        padding: 0 2rem;
    }

    .hero {
        min-height: 100vh;
    }

    .pillars-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .testimonial-card {
        flex: 0 0 33.333%;
    }
}