/* ==========================================================================
   MOBILE.CSS — Mielance Média
   Uniquement des @media (max-width). Aucune règle hors media query.
   Chargé après theme.css — pas de conflit possible.
   ========================================================================== */

/* ==========================================================================
   TABLETTE & PETITS LAPTOPS — 1280px
   ========================================================================== */
@media (max-width: 1280px) {
    /* Top stories masquées */
    .mm-topstories { display: none; }
}

/* ==========================================================================
   TABLETTE — 1024px
   ========================================================================== */
@media (max-width: 1024px) {

    /* Hero : passe en 1 colonne, droite masquée */
    .mm-hero__layout {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 3.5rem;
        padding-bottom: 3rem;
        gap: 2rem;
    }
    .mm-hero__right { display: none; }
    .mm-hero__left  { align-items: center; text-align: center; }
    .mm-hero__sub   { max-width: 100%; }

    /* Rubriques : grille 1 colonne, articles secondaires en 2 colonnes */
    .mm-rubrique__grid      { grid-template-columns: 1fr; }
    .mm-rubrique__secondary { flex-direction: row; flex-wrap: wrap; }
    .mm-rubrique__item      { flex: 1 1 calc(50% - .4rem); }

    /* Équipe : 2 colonnes */
    .mm-team__grid { grid-template-columns: repeat(2, 1fr); }

    /* Footer : 2 colonnes */
    .mm-footer__cols { grid-template-columns: 1fr 1fr; }
    .mm-footer__col:first-child { grid-column: span 2; }
}

/* ==========================================================================
   MOBILE — 768px
   ========================================================================== */
@media (max-width: 768px) {

    /* ── Header ─────────────────────────────────────────────── */
    .mm-header__inner {
        flex-wrap: nowrap;
        gap: .75rem;
        padding-top: .7rem;
        padding-bottom: .7rem;
    }

    /* Recherche et contact masqués */
    .mm-header__right .mm-search  { display: none; }
    .mm-header__contact            { display: none; }

    /* Burger visible */
    .mm-burger { display: flex; }

    /* ── Navigation mobile ──────────────────────────────────── */
    .mm-nav {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: var(--mm-black);
        z-index: 400;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 72px;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .25s ease, transform .25s ease;
        pointer-events: none;
    }
    .mm-nav.is-open {
        display: block;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Lignes de nav verticales */
    .mm-nav__row {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        border-bottom: none;
    }
    .mm-nav__row--2 { border-top: 1px solid var(--mm-border); }
    .mm-nav__spacer { display: none; }
    .mm-nav__row li { width: 100%; }
    .mm-nav__row li a {
        padding: .9rem 1.5rem;
        font-size: .82rem;
        border-bottom: 1px solid var(--mm-border);
        border-radius: 0;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .mm-nav__row li:last-child a { border-bottom: none; }

    /* ── Burger animé ───────────────────────────────────────── */
    .mm-burger {
        width: 44px; height: 44px;
        background: rgba(255,255,255,.06);
        border: 1px solid var(--mm-border);
        border-radius: var(--mm-radius-sm);
        padding: 0;
        gap: 5px;
    }
    .mm-burger span { width: 20px; }
    .mm-burger:hover {
        background: rgba(232,148,10,.1);
        border-color: rgba(232,148,10,.3);
    }
    .mm-burger[aria-expanded="true"] {
        background: rgba(232,148,10,.1);
        border-color: var(--mm-miel);
    }
    .mm-burger[aria-expanded="true"] span:nth-child(1) { background: var(--mm-miel); }
    .mm-burger[aria-expanded="true"] span:nth-child(3) { background: var(--mm-miel); }

    /* ── Hero ───────────────────────────────────────────────── */
    .mm-hero__title { font-size: clamp(2rem, 8vw, 3rem); }
    .mm-hero__sub   { font-size: .95rem; }
    .mm-hero__scroll { justify-content: center; }
    .mm-hero__ticker-word { font-size: .68rem; padding: 0 .75rem; }

    /* ── Rubriques ──────────────────────────────────────────── */
    .mm-rubrique { padding: 2.5rem 0; }
    .mm-rubrique__head { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .mm-rubrique__secondary { flex-direction: column; gap: .6rem; }
    .mm-rubrique__item { flex: 1 1 100%; }
    .mm-rubrique__main-img { height: 180px; }

    /* ── Équipe ─────────────────────────────────────────────── */
    .mm-team__grid { grid-template-columns: 1fr; gap: .85rem; }
    .mm-author { padding: .9rem 1rem; }
    .mm-author__photo { width: 46px; height: 46px; }

    /* ── Footer ─────────────────────────────────────────────── */
    .mm-footer__cols { grid-template-columns: 1fr; gap: 2rem; }
    .mm-footer__col:first-child { grid-column: auto; }
    .mm-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .mm-footer__copy { font-size: .72rem; }

    /* ── Back to top ────────────────────────────────────────── */
    .mm-back-to-top { bottom: 1.25rem; right: 1.25rem; width: 42px; height: 42px; }
}

/* ==========================================================================
   PETIT MOBILE — 480px
   ========================================================================== */
@media (max-width: 480px) {
    .mm-newsbar__label   { display: none; }
    .mm-newsbar          { height: 32px; }
    .mm-newsbar__item    { font-size: .7rem; padding: 0 .7rem; }
    .mm-partners__grid   { grid-template-columns: 1fr 1fr; }
    .mm-network__grid    { grid-template-columns: 1fr 1fr; }
    .mm-logo__text       { font-size: 1.2rem; }
}

/* ==========================================================================
   TRÈS PETIT MOBILE — 380px
   ========================================================================== */
@media (max-width: 380px) {
    .mm-logo__text       { font-size: 1rem; }
    .mm-partners__grid   { grid-template-columns: 1fr; }
    .mm-network__grid    { grid-template-columns: 1fr; }
}