/* ==========================================================================
   QMG THEME — mobile.css
   Chargé uniquement en dessous de 900px (voir functions.php).
   Ici on ne "adapte" pas juste le desktop : on réécrit franchement
   la mise en page (comme demandé — la maquette mobile est différente).
   ========================================================================== */

@media (max-width: 900px) {

    .container { padding-inline: 20px; max-width: 100%;}
    .section { padding: 64px 0; }
    .qmg-carousel__track{height: 540px;}
    .section__title { font-size: 1.8rem; margin-bottom: 32px; }

    /* ---------- Header / burger menu ---------- */
    .site-header__inner { height: 64px; }
    .site-header__burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 32px; height: 32px;
        background: none; border: none;
        cursor: pointer;
    }
 
            .section__title {
            font-size: 1.8rem;
            margin-bottom: 32px;
            text-align: left;
            line-height: 32px;
        }

        .split-block__media img {
display: none;
}
    .site-header__burger span {
        display: block;
        width: 100%; height: 2px;
        background: white;
        transition: transform .2s ease, opacity .2s ease;
    }
    .site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .site-nav {
        position: fixed;
        inset: 64px 0 0 0;
        background: var(--qmg-bg);
        color: var(--qmg-text); /* fixe, indépendant de l'état transparent/scrolled du header */
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease;
    }
    .site-nav.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 24px 20px;
    }
    .site-nav__list li { border-bottom: 1px solid var(--qmg-border); }
    .site-nav__list a { display: block; padding: 18px 4px; font-size: 1.05rem; }
    .site-nav__list .menu-item-cta { border-bottom: none; margin-top: 16px; }
    .site-nav__list .menu-item-cta a {
        display: inline-flex;
        border-radius: 999px;
        text-align: center;
        justify-content: center;
        width: 100%;
    }

     .qmg-carousel{
        margin-right: -20px;
     }

     .work-card__label {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-bottom: 8px;
}

.section {
    margin: 0px 0;
}

.hero-carousel__badge {
    display: inline-block;
    border: 1px solid var(--qmg-dark-border);
    border-radius: 999px;
    padding: 6px 16px;
    margin-bottom: 15px;
    font-size: 0.82rem;
    margin-top: 15px;
}

    /* ---------- Hero carrousel : titre plus petit, tagline masquée, cartes plus larges ---------- */
    .hero-carousel { padding: 100px 0 56px; }
    .hero-carousel__head { flex-direction: column; gap: 12px; }
    .hero-carousel__tagline { text-align: left; }
    .hero-carousel__title { font-size: 2.2rem; max-width: none; margin-bottom: 35px; }
    .qmg-carousel--hero .work-card { flex: 0 0 82%; }
            .work-card__title {
            font-size: 2rem;
            padding-right: 30px;
        }
        .work-card__text {
    font-size: 0.8rem;
    opacity: 0.85;
    max-width: 70ch;
    margin-bottom: 16px;
}

.eyebrow--center {
    display: block;
    text-align: center;
    color: #4ade80;
    text-align: left;
}

#nos-services {
    border-top: solid 0.1px #202020;
    padding-top: 70px;
    padding-bottom: 44px;
}

    /* ---------- Carrousel services : cartes plus larges, 1,5 visible ---------- */
    .qmg-carousel--services .service-card { flex: 0 0 58%; }

            .qmg-carousel--services .service-card {
            flex: 0 0 80%;
        }

    /* ---------- Carrousels : flèches plus petites ---------- */
    .qmg-carousel__nav {display: none; }

    /* ---------- Blocs texte + image : image au-dessus, toujours dans le même ordre ---------- */
    .split-block__inner { grid-template-columns: 1fr; gap: 32px; }
    .split-block--reverse .split-block__content { order: 0; }
    .split-block__title { font-size: 1.6rem; }

    /* ---------- Process : entête empilée, 1 colonne pour les mini-cartes ---------- */
    .process-dark { padding: 64px 0; }
    .process-dark__head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
    .process-dark__title { font-size: 1.6rem; max-width: none; }
    .process-dark__steps { grid-template-columns: 1fr; gap: 12px; }

    /* ---------- Final CTA ---------- */
    .final-cta__title { font-size: 1.9rem; margin-inline: auto; }
    .final-cta__actions { flex-direction: column; gap: 12px; }

    /* ---------- Footer : colonnes empilées ---------- */
    .site-footer { padding: 48px 0 24px; }
    .site-footer__top { grid-template-columns: 1fr; gap: 32px; }

    /* ---------- Page service ---------- */
    .service-hero { padding: 100px 0 40px; }
    .service-hero__title { font-size: 1.9rem; }
    .service-hero__tagline { font-size: 0.95rem; }
.service-block-grid,
.service-block-grid--groups,
.service-block-grid--options { grid-template-columns: 1fr; }
.service-process__step { flex-direction: column; gap: 12px; padding: 22px 24px; }

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

.floating-cta { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 0.85rem; }

.cookie-banner { left: 16px; right: 16px; bottom: 16px; padding: 16px 18px; }
.cookie-banner__actions { flex-direction: column-reverse; }
.cookie-banner__actions .btn { width: 100%; }