/* =============================================================================
   1) VARIABLES (palette mobile/off-canvas)
   ========================================================================== */
:root {
    --mmob-bg: #fff;
    --mmob-border: #e9ecef;
    --mmob-header: #dddddd;
    --mmob-footer: #dddddd;
    --mmob-text: #111;
    --mmob-muted: #6c757d;
    --mmob-thumb-bg: #f0f1f2; /* fond clair derrière la vignette */
    --mmob-hover: #f7f7f7;    /* feedback tactile/hover */
}

/* =============================================================================
   2) ACCESSIBILITÉ / MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mm-stage { transition: none; }
}

/* =============================================================================
   3) OFF-CANVAS : éléments généraux
   ========================================================================== */
.offcanvas-header .home-icon {
    font-size: calc(1.5rem + 0.9vw);
}

/* =============================================================================
   4) LISTE CONTENEUR (ul.mmob-list)
   ========================================================================== */
.mmob-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--mmob-bg);
    border-top: 1px solid var(--mmob-border);
    border-bottom: 1px solid var(--mmob-border);
}

/* =============================================================================
   5) LIGNES / ITEMS
   ========================================================================== */
.mmob-item {
    border-bottom: 1px solid var(--mmob-border);
}
.mmob-item:last-child {
    border-bottom: 0;
}

/* =============================================================================
   6) LIENS TAP-FRIENDLY (a.mmob-link)
   ========================================================================== */
.mmob-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--mmob-text);
    background: var(--mmob-bg);
    -webkit-tap-highlight-color: transparent;
}
.mmob-link:hover,
.mmob-link:focus {
    background: var(--mmob-hover);
}
.mmob-link:active {
    filter: brightness(.98);
}

/* =============================================================================
   7) VIGNETTE (≈ 68×56 comme 24mx)
   ========================================================================== */
.mmob-thumb {
    flex: 0 0 auto;
    width: 68px;
    height: 56px;
    border-radius: 6px;
    background: var(--mmob-thumb-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0;
}
.mmob-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* =============================================================================
   8) TITRE
   ========================================================================== */
.mmob-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mmob-text);
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* tronque proprement si très long */
}

/* =============================================================================
   9) CHEVRON (affordance à droite)
   ========================================================================== */
.mmob-chevron {
    flex: 0 0 auto;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    opacity: .6;
    transition: opacity .15s ease, transform .15s ease;
}
.mmob-link:hover .mmob-chevron { opacity: .85; }
.mmob-link:active .mmob-chevron { transform: translateX(1px); }

/* =============================================================================
   10) RESPONSIVE (densité compacte petits écrans)
   ========================================================================== */
@media (max-width: 360px) {
    .mmob-link { min-height: 56px; padding: 8px 12px; gap: 10px; }
    .mmob-thumb { width: 60px; height: 50px; }
}

/* =============================================================================
   11) EN-TÊTE & PIED DE PANNEAU
   ========================================================================== */
.mmob-header { border-bottom: 2px solid var(--mmob-header); background-color: #eeeeee; }
.mmob-footer { border-top: 2px solid var(--mmob-footer); background-color: #eeeeee; }

/* =============================================================================
   12) UTILITAIRES / BOUTONS
   ========================================================================== */
.btn-outline-white {
    background-color: #ffffff;
    border-color: darkgrey;
}