/* Adaptations par largeur. Testé à 360, 390, 768, 1024, 1366 et 1920 px. */

/* ---------- Jusqu'à 1200px ---------- */
@media (max-width: 1200px) {
    :root {
        --gutter: 2rem;
    }

    .consult {
        width: 295px;
        right: 2rem;
        bottom: 7.5rem;
    }

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

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

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

/* ---------- Jusqu'à 1024px : bascule en menu mobile ---------- */
@media (max-width: 1024px) {
    .nav__links,
    .nav .lang,
    .nav__cta {
        display: none;
    }

    .burger {
        display: block;
    }

    /* La carte de consultation quitte le hero et passe dans le flux. */
    .consult {
        position: static;
        width: 100%;
        max-width: 420px;
        margin: 0 auto 3rem;
        background: var(--color-surface);
        backdrop-filter: none;
    }

    .hero {
        justify-content: flex-start;
    }

    .hero__content {
        padding-block: 3.5rem 2.5rem;
    }

    .hero__foot-inner {
        gap: 1.2rem;
    }

    .contact__grid,
    .detail__grid {
        grid-template-columns: 1fr;
    }

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

/* ---------- Jusqu'à 900px ---------- */
@media (max-width: 900px) {
    .intro__grid {
        grid-template-columns: 1fr;
    }

    /* L'image passe au-dessus du texte sur mobile. */
    .intro__grid > div:last-child {
        order: -1;
    }

    .grid-real {
        grid-template-columns: 1fr;
    }

    .grid-real .real {
        grid-column: auto;
        aspect-ratio: 16 / 10;
    }

    .grid-projects,
    .detail__columns,
    .placeholders {
        grid-template-columns: 1fr;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }

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

/* ---------- Jusqu'à 768px ---------- */
@media (max-width: 768px) {
    :root {
        --gutter: 1.5rem;
        /* Barre plus basse sur mobile : le logo suit. */
        --nav-height: 92px;
    }

    .brand__logo {
        height: 64px;
    }

    .footer .brand__logo {
        height: 64px;
    }

    .hero {
        min-height: 92svh;
    }

    .hero__actions .btn,
    .confirm__actions .btn,
    .quote__actions .btn {
        flex: 1 1 100%;
    }

    .hero__foot-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact__form {
        padding: 1.8rem 1.4rem;
    }

    .specs {
        grid-template-columns: 1fr;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .quote__progress-item {
        font-size: 0;
        gap: 0;
        justify-content: center;
    }

    .quote__progress-item span {
        font-size: 0.72rem;
    }
}

/* ---------- Jusqu'à 560px ---------- */
@media (max-width: 560px) {
    .grid-cuisines,
    .grid-cuisines--wide,
    .gallery {
        grid-template-columns: 1fr;
    }

    .footer__grid {
        grid-template-columns: 1fr;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ---------- Jusqu'à 480px ---------- */
@media (max-width: 480px) {
    :root {
        --gutter: 1.25rem;
    }

    .hero__title {
        font-size: clamp(2.45rem, 12vw, 3rem);
    }

    .eyebrow {
        gap: 0.7rem;
        letter-spacing: 0.24em;
    }

    .eyebrow::before {
        width: 28px;
    }

    .consult {
        padding: 1.4rem;
    }

    .consult__title {
        font-size: 1.25rem;
    }

    .detail__facts,
    .quote__summary,
    .contact__box,
    .spec,
    .placeholder {
        padding: 1.4rem;
    }

    .breadcrumb__list {
        font-size: 0.72rem;
    }
}