/* Menu bas mobile en une seule rangée : les entrées au-delà de 4 passent
   dans le panneau « Plus » (voir js/menu-mobile.js). Inactif en desktop. */

@media (max-width: 767px) {
    .sp-menu-wrapper ul.sidebar-menu {
        flex-wrap: nowrap;
    }
    .sp-menu-wrapper ul.sidebar-menu > li > a {
        white-space: nowrap;
    }

    .sp-menu-plus-panel {
        display: none;
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        margin: 0;
        padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px));
        list-style: none;
        background: #fff;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 4px;
    }
    .sp-menu-plus-panel.ouvert {
        display: grid;
    }
    .sp-menu-plus-panel > li {
        padding: 0;
    }
    .sp-menu-plus-panel > li > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-row-gap: 6px;
        padding: 12px 5px;
        font-size: 12px;
        color: inherit;
    }
}

/* Fil d'ariane mobile : masqué historiquement sous 768px, ce qui laissait
   les pages profondes sans retour. On le réaffiche sous forme de lien
   retour vers le niveau parent (avant-dernier maillon du fil). */
@media (max-width: 767px) {
    ul.breadcrumb {
        display: block !important;
        background: #fff;
        padding: 4px 15px;
        /* bande blanche de bord à bord, quel que soit le padding du conteneur */
        margin: 0 calc(50% - 50vw) 10px;
    }
    ul.breadcrumb > li {
        display: none;
    }
    ul.breadcrumb > li:nth-last-child(2) {
        display: inline-block;
    }
    ul.breadcrumb > li:nth-last-child(2)::before {
        content: none;
    }
    /* Gabarit strictement identique au .btn du front (relevé sur Didacticiel :
       12px/400, padding 13px 18px, rayon 15px, fond #f4f4f4) */
    ul.breadcrumb > li:nth-last-child(2) a {
        display: inline-flex;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        line-height: normal;
        color: #333;
        background: #f4f4f4;
        border-radius: 15px;
        padding: 0 18px;
        height: 43px; /* hauteur exacte des .btn du front (Didacticiel) */
        box-sizing: border-box;
    }
    /* Chevron (pas de flèche) : tracé CSS net à toutes les densités d'écran */
    ul.breadcrumb > li:nth-last-child(2) a::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        margin-right: 9px;
    }
}