/* ==========================================================================
   NAVIGATION
   ========================================================================== */

/* ==========================================================================
   NAVIGATION LATÉRALE
   ========================================================================== */

#navigation-laterale ul,
#navigation-laterale ol {
    margin: 0;
    padding: 0;

    list-style: none;
}

/* --------------------------------------------------------------------------
   Organisation générale
   -------------------------------------------------------------------------- */

#navigation-laterale-contenu,
.navigation-laterale__navigation-contextuelle {
    min-width: 0;
}

.navigation-laterale__recherche {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);

    border-bottom: 1px solid var(--color-border-strong);
}

.navigation-laterale__recherche .recherche,
#navigation-laterale .mimir-search-control {
    margin: 0;
}

.navigation-laterale__liens-globaux {
    margin-top: var(--space-5);
    padding-top: var(--space-4);

    border-top: 1px solid var(--color-primary);
}

/* --------------------------------------------------------------------------
   Accueil des enseignements
   -------------------------------------------------------------------------- */

.navigation-laterale__accueil {
    margin-bottom: var(--space-2);
}

.navigation-laterale__lien-accueil {
    position: relative;

    display: flex;
    align-items: baseline;
    gap: var(--space-2);

    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--space-2) var(--space-3);

    background: transparent;
    color: var(--color-text);

    border: 0;
    border-inline-start: 3px solid transparent;
    border-radius: var(--radius-small);

    overflow: hidden;

    font: inherit;
    font-weight: 700;
    text-align: left;

    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.navigation-laterale__lien-accueil:active {
    background: var(--color-surface-active);
}

.navigation-laterale__lien-accueil:hover {
    background: var(--color-sidebar-raised);
}

.navigation-laterale__lien-accueil[aria-current="page"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.navigation-laterale__lien-accueil[aria-current="page"]::before {
    content: "";

    position: absolute;
    inset: 0.4rem auto 0.4rem 0;

    width: 3px;

    background: var(--color-primary);

    border-radius: 999px;
}

.navigation-laterale__icone-accueil {
    display: inline-block;
    flex: 0 0 1.125rem;

    width: 1.125rem;

    color: currentColor;

    font-family: "DejaVu Sans", Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Listes et branches
   -------------------------------------------------------------------------- */

.navigation-laterale__liste {
    display: grid;
    gap: var(--space-1);

    min-width: 0;
}

.navigation-laterale__liste[hidden] {
    display: none;
}

.navigation-laterale__enseignements {
    gap: var(--space-2);
}

.navigation-laterale__branche {
    min-width: 0;
}

.navigation-laterale__ligne {
    display: flex;
    align-items: stretch;
    gap: var(--space-1);

    min-width: 0;

    padding-inline-start: calc(var(--navigation-profondeur, 0) * 0.55rem);
}

/* --------------------------------------------------------------------------
   Fin de la dernière branche dépliée par l’utilisateur
   -------------------------------------------------------------------------- */

.navigation-laterale__branche--reperee
    > .navigation-laterale__liste:not([hidden])
    > .navigation-laterale__branche:last-child {
    padding-bottom: var(--space-3);
}

.navigation-laterale__branche--reperee
    > .navigation-laterale__liste:not([hidden])
    > .navigation-laterale__branche:last-child::after {
    content: "";

    display: block;

    width: 2.5rem;
    height: 2px;

    margin: var(--space-2) auto 0;

    background: var(--color-primary);

    border-radius: 999px;
}

.navigation-laterale__liste .navigation-laterale__liste {
    margin-block: var(--space-1);
}

/* --------------------------------------------------------------------------
   Boutons communs
   -------------------------------------------------------------------------- */

.navigation-laterale__lien,
.navigation-laterale__lien-global,
.navigation-laterale__depliage {
    position: relative;

    min-height: var(--touch-target-min);

    background: transparent;
    color: var(--color-text);

    border: 0;
    border-radius: var(--radius-small);

    font: inherit;

    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.navigation-laterale__lien:hover,
.navigation-laterale__lien-global:hover,
.navigation-laterale__depliage:hover {
    background: var(--color-sidebar-raised);
}

.navigation-laterale__lien:active,
.navigation-laterale__lien-global:active,
.navigation-laterale__depliage:active {
    background: var(--color-surface-active);
}

/* --------------------------------------------------------------------------
   Liens de l’arbre
   -------------------------------------------------------------------------- */

.navigation-laterale__lien {
    display: flex;
    align-items: center;
    flex: 1;

    min-width: 0;

    padding: var(--space-2) var(--space-3);

    border-inline-start: 3px solid transparent;

    text-align: left;
    line-height: 1.35;

    overflow: hidden;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Chevron
   -------------------------------------------------------------------------- */

.navigation-laterale__depliage,
.navigation-laterale__espace-chevron {
    flex: 0 0 var(--touch-target-min);

    width: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

.navigation-laterale__depliage {
    display: inline-grid;
    place-items: center;

    padding: 0;

    color: var(--color-icon);
}

.navigation-laterale__chevron {
    display: block;

    font-size: 1.35rem;
    line-height: 1;

    opacity: 0.6;

    transform: rotate(0deg);
    transform-origin: center;

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

.navigation-laterale__chevron--ouvert {
    opacity: 1;

    transform: rotate(90deg);
}

.navigation-laterale__espace-chevron {
    display: block;

    min-height: var(--touch-target-min);
}

/* --------------------------------------------------------------------------
   Hiérarchie typographique
   -------------------------------------------------------------------------- */

/* Enseignements */
.navigation-laterale__enseignement
    > .navigation-laterale__ligne
    > .navigation-laterale__lien {
    font-weight: 700;
}

/* Grandes rubriques */
.navigation-laterale__rubrique
    > .navigation-laterale__ligne
    > .navigation-laterale__lien {
    font-weight: 600;
}

/* Ressources terminales */
.navigation-laterale__ressource
    > .navigation-laterale__ligne
    > .navigation-laterale__lien {
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Informations dans une branche vide
   -------------------------------------------------------------------------- */

.navigation-laterale__information-texte {
    display: flex;
    flex: 1;
    align-items: center;

    min-width: 0;
    min-height: var(--touch-target-min);
    padding: var(--space-2) var(--space-3);

    color: var(--color-text-secondary);

    font-size: 0.95rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Page courante
   -------------------------------------------------------------------------- */

.navigation-laterale__lien[aria-current="page"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);

    font-weight: 700;
}

.navigation-laterale__lien[aria-current="page"]::before,
.navigation-laterale__lien-global[aria-current="page"]::before {
    content: "";

    position: absolute;
    inset: 0.4rem auto 0.4rem 0;

    width: 3px;

    background: var(--color-primary);

    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Liens globaux
   -------------------------------------------------------------------------- */

.navigation-laterale__lien-global {
    display: flex;
    align-items: center;

    width: 100%;

    padding: var(--space-2) var(--space-3);

    color: var(--color-text);

    border-inline-start: 3px solid transparent;

    overflow: hidden;

    text-align: left;
    font-weight: 600;
}

.navigation-laterale__lien-global[aria-current="page"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);

    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Éléments désactivés
   -------------------------------------------------------------------------- */

.navigation-laterale__lien:disabled,
.navigation-laterale__lien-global:disabled {
    color: var(--color-text-disabled);

    cursor: default;
}

.navigation-laterale__lien:disabled:hover,
.navigation-laterale__lien-global:disabled:hover {
    background: transparent;
}

/* ==========================================================================
   FOCUS CLAVIER
   ========================================================================== */

:where(summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: none;

    box-shadow: var(--focus-ring);
}

/* ==========================================================================
   NAVIGATION MOBILE
   ========================================================================== */

#bouton-navigation-mobile,
#fond-navigation-mobile,
.navigation-laterale__entete-mobile {
    display: none;
}

@media (max-width: 56rem) {
    #bouton-navigation-bureau {
        display: none;
    }

    #application {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);

        min-height: 0;

        overflow: hidden;
    }

    body > header {
        min-height: 4.25rem;
        padding-inline: calc(var(--touch-target-min) + (2 * var(--space-3)));
    }

    #bouton-navigation-mobile {
        position: fixed;
        z-index: 1100;
        top: calc((4.25rem - var(--touch-target-min)) / 2);
        left: var(--space-3);

        display: inline-grid;
        place-items: center;

        width: var(--touch-target-min);
        min-width: var(--touch-target-min);
        height: var(--touch-target-min);

        padding: 0;

        background: rgb(255 255 255 / 12%);
        color: var(--color-on-primary);

        border: 1px solid rgb(255 255 255 / 50%);
        border-radius: var(--radius-small);

        box-shadow: 0 2px 8px rgb(0 0 0 / 15%);

        font-size: 1.35rem;

        cursor: pointer;
    }

    #bouton-navigation-mobile:hover {
        background: rgb(255 255 255 / 20%);
        border-color: var(--color-on-primary);
    }

    #bouton-navigation-mobile:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring-on-primary);
    }

    #fond-navigation-mobile {
        position: fixed;
        z-index: 1200;
        inset: 0;

        display: block;

        background: rgb(0 0 0 / 45%);
    }

    #fond-navigation-mobile[hidden] {
        display: none;
    }

    #navigation-laterale {
        position: fixed;
        z-index: 1300;
        inset: 0 auto 0 0;

        width: min(90vw, 24rem);
        max-width: calc(100vw - var(--space-5));
        max-height: 100vh;
        max-height: 100dvh;

        padding: 0 var(--space-4) var(--space-5);

        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;

        border-right: 1px solid var(--color-border);
        border-bottom: 0;

        box-shadow: 0 8px 28px rgb(0 0 0 / 28%);

        transform: translateX(-105%);

        transition:
            transform 200ms ease,
            background-color var(--transition-fast),
            border-color var(--transition-fast);
    }

    #navigation-laterale.navigation-laterale--ouverte {
        transform: translateX(0);
    }

    .navigation-laterale__entete-mobile {
        position: sticky;
        z-index: 1;
        top: 0;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);

        margin: 0 calc(-1 * var(--space-4)) var(--space-4);
        padding: var(--space-3) var(--space-4);

        background: var(--color-sidebar-background);

        border-bottom: 1px solid var(--color-border-strong);
    }

    .navigation-laterale__titre-mobile {
        font-weight: 700;
    }

    #bouton-fermeture-navigation-mobile {
        display: inline-grid;
        place-items: center;

        width: var(--touch-target-min);
        min-width: var(--touch-target-min);
        height: var(--touch-target-min);

        padding: 0;

        background: transparent;
        color: var(--color-text);

        border: 0;
        border-radius: var(--radius-small);

        font-size: 1.6rem;

        cursor: pointer;
    }

    #bouton-fermeture-navigation-mobile:hover {
        background: var(--color-interactive-hover);
    }

    body.navigation-mobile-ouverte {
        overflow: hidden;
    }

    #contenu {
        min-width: 0;
        min-height: 0;

        overflow-y: auto;
        overscroll-behavior-y: contain;

        -webkit-overflow-scrolling: touch;
    }

    main {
        padding-top: var(--space-5);
    }
}