/**
 * Chrome téléphone : gouttière 16 px, Accueil à GAUCHE, hamburger à DROITE,
 * tiroir depuis la droite. Fichier séparé : `mt-shell.css` est le chrome
 * partagé (et souvent verrouillé) ; ces règles doivent gagner sous 799 px,
 * que le document soit autonome ou encore dans le thème.
 *
 * Spécificité `.mt-app.mt-app--shell …` : bat `.mt-app--shell { padding }`
 * et `.mt-nav-toggle { margin: 0 }` de mt-shell.css.
 */

@media (max-width: 799px) {
    .mt-app.mt-app--shell {
        padding: var(--mt-space-4, 16px);
    }

    .mt-app.mt-app--shell .mt-chrome {
        position: relative;
        justify-content: flex-end;
    }

    /* `position: absolute` : le titre est déjà hors flux
       (`left:0; right:0`), un seul enfant flex + margin-left:auto ne
       suffit pas si le thème flotte le <button>. */
    .mt-app.mt-app--shell .mt-chrome .mt-nav-toggle {
        display: inline-flex;
        position: absolute;
        top: 0;
        right: 0;
        left: auto;
        z-index: 2;
        flex-shrink: 0;
        float: none;
        margin: 0;
    }

    .mt-app.mt-app--shell .mt-chrome .mt-chrome-home {
        display: inline-flex;
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        z-index: 2;
        flex-shrink: 0;
        float: none;
        margin: 0;
    }

    .mt-app.mt-app--shell .mt-chrome .mt-chrome-home:hover,
    .mt-app.mt-app--shell .mt-chrome .mt-chrome-home:focus {
        color: var(--mt-brand-strong, #14655f);
        background: var(--mt-brand-tint, #e6f2f0);
    }

    .mt-app.mt-app--shell .mt-chrome .mt-chrome__title {
        padding: 0 52px;
    }

    .mt-app.mt-app--shell .mt-nav {
        left: auto;
        right: 0;
        transform: translateX(105%);
    }

    .mt-app.mt-app--shell .mt-nav.is-open {
        transform: none;
    }
}