/* ========== Responsive — Devolim (Mobile-first overrides) ========== */

/* ---- < 567px — Mobile ---- */
@media (max-width: 567px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 100px var(--container-padding) var(--space-lg);
        min-height: 90vh;
    }

    .hero-compact {
        padding: 130px var(--container-padding) var(--space-lg);
        min-height: auto;
    }

    .section {
        padding: var(--space-xl) 0;
    }

    .feature-row {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .feature-row.reverse {
        direction: ltr;
    }

    .phone-mockup {
        width: 220px;
        height: 450px;
        border-radius: 32px;
        padding: 10px;
    }

    .phone-mockup-screen {
        border-radius: 24px;
    }

    .phone-mockup-notch {
        width: 90px;
        height: 24px;
    }

    .timeline {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .timeline::before {
        top: 0;
        bottom: 0;
        left: 25px;
        right: auto;
        width: 2px;
        height: 100%;
    }

    .timeline-step {
        text-align: left;
        padding-left: 70px;
    }

    .timeline-step-number {
        position: absolute;
        left: 0;
        margin: 0;
    }

    .store-badges {
        justify-content: center;
    }

    .btn-lg {
        padding: 0.9rem 2rem;
        font-size: 0.95rem;
    }
}

/* ---- 568px — Petite tablette ---- */
@media (min-width: 568px) and (max-width: 767px) {
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-row {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .feature-row.reverse {
        direction: ltr;
    }
}

/* ---- 768px — Tablette ---- */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-row {
        gap: var(--space-lg);
    }
}

/* ---- 1024px — Desktop ---- */
@media (min-width: 1024px) {
    /* Le desktop est le layout par défaut, pas de surcharges nécessaires */
}

/* ---- 1400px+ — Grand écran ---- */
@media (min-width: 1400px) {
    :root {
        --container-padding: calc((100vw - 1400px) / 2 + 2rem);
    }
}

/* ---- Curseur custom + Tilt désactivés sur tactile ---- */
@media (hover: none) and (pointer: coarse) {
    .custom-cursor,
    .custom-cursor-ring {
        display: none !important;
    }
}

/* ---- Réduit les particules et animations sur mobile ---- */
@media (max-width: 768px) {
    .particles-canvas {
        opacity: 0.5;
    }
}

/* ---- Respect prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    .bg-grid {
        animation: none;
    }
    .anim-float, .anim-float-slow {
        animation: none;
    }
    .particles-canvas {
        display: none;
    }
    [data-animate] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .scroll-indicator {
        animation: none;
    }
}