/* ============================================
   11 - RESPONSIVE (mobile / tablette / desktop)
   ============================================ */

/* Grand desktop */
@media (max-width: 1200px) {
    .jm-hero__content { gap: 40px; }
}

/* Tablette */
@media (max-width: 992px) {
    :root { --jm-section-y: 80px; }

    /* Hero */
    .jm-hero {
        padding: 120px 0 140px;
        min-height: auto;
    }
    .jm-hero__content {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }
    .jm-hero__lead { margin-left: auto; margin-right: auto; }
    .jm-hero__cta { justify-content: center; }
    .jm-hero__trust { justify-content: center; }
    .jm-palette { justify-content: center; }
    .jm-hero__illu { margin: 0 auto; max-width: 460px; }
    .jm-hero__scroll { display: none; }

    /* À propos / contact */
    .jm-apropos__grid { grid-template-columns: 1fr; gap: 70px; }
    .jm-apropos__media { max-width: 540px; margin: 0 auto; }
    .jm-contact__grid { grid-template-columns: 1fr; gap: 40px; }
    .jm-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Mobile */
@media (max-width: 768px) {
    :root { --jm-section-y: 60px; }

    /* Header */
    .jm-burger { display: flex; }
    .jm-nav {
        position: fixed;
        top: 80px; left: 0; right: 0;
        background: #fff;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }
    .jm-nav.is-open { max-height: 600px; }
    .jm-nav ul {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 0;
        gap: 0;
    }
    .jm-nav a {
        padding: 14px 24px;
        border-radius: 0;
        text-align: left;
        color: var(--jm-grey-900) !important;
    }
    .jm-nav a::after { display: none; }
    .jm-nav__cta,
    .jm-nav a.jm-nav__cta {
        margin: 10px 24px;
        text-align: center;
        border-radius: var(--jm-radius);
        color: #fff !important;
    }

    /* Hero */
    .jm-hero { padding: 110px 0 120px; }
    .jm-hero__title { font-size: clamp(2rem, 8vw, 3rem); }
    .jm-hero__cta { flex-direction: column; align-items: stretch; }
    .jm-hero__cta .jm-btn { width: 100%; justify-content: center; }
    .jm-hero__trust { gap: 14px; }
    .jm-hero__trust li { font-size: 0.85rem; }
    .jm-hero__illu { max-width: 360px; }
    .jm-brush { width: 70px; top: -5%; }
    .jm-palette__label { font-size: 1.1rem; }
    .jm-hero__wave svg { height: 80px; }

    /* À propos */
    .jm-apropos__list { grid-template-columns: 1fr; }
    .jm-apropos__media { aspect-ratio: 4/5; }

    /* Sections */
    .jm-section__head { margin-bottom: 40px; }

    /* Galerie */
    .jm-galerie__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .jm-gitem { aspect-ratio: 3/4; }
    .jm-gitem figcaption { padding: 16px 14px; }
    .jm-gitem__tag { font-size: 0.62rem; padding: 3px 8px; }
    .jm-gitem h4 { font-size: 0.85rem; }
    .jm-filter { padding: 9px 16px; font-size: 0.78rem; }
    .jm-filter i { display: none; }

    /* Formulaire */
    .jm-form { padding: 28px 22px; }
    .jm-form__row { grid-template-columns: 1fr; gap: 0; }

    /* Footer */
    .jm-footer__grid { grid-template-columns: 1fr; gap: 35px; }
    .jm-footer__bottom .jm-container {
        flex-direction: column;
        text-align: center;
    }

    /* Logo */
    .jm-logo img { width: 44px; height: 44px; }
    .jm-logo__text strong { font-size: 1rem; }
    .jm-logo__text small { font-size: 0.6rem; letter-spacing: 0.2em; }

    /* Lightbox */
    .jm-lightbox__nav { width: 40px; height: 40px; font-size: 1.1rem; }
    .jm-lightbox__nav--prev { left: 10px; }
    .jm-lightbox__nav--next { right: 10px; }

    /* Effets - réduire splats pour perfs */
    .jm-section-splat,
    .jm-galerie__splash,
    .jm-apropos__splat { opacity: 0.04; }
    .jm-blob { filter: blur(40px); }
}

@media (max-width: 480px) {
    .jm-container { padding: 0 18px; }
    h2 { font-size: 1.6rem; }
    .jm-galerie__grid { grid-template-columns: 1fr; }
    .jm-gitem { aspect-ratio: 4/5; }
    .jm-apropos__badge { padding: 14px 18px; right: 0; top: 25%; }
    .jm-apropos__badge strong { font-size: 1.5rem; }
    .jm-hero__illu { max-width: 300px; }
    .jm-temoignage { padding: 30px 24px; }
}