/* =========================================================
   Navigation latérale de la page SNT
   ========================================================= */

.snt-layout {
    width: min(1400px, 94%);
    margin: 25px auto 50px;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    text-align: left;
}

.snt-sidebar {
    position: sticky;
    top: 20px;
    overflow: hidden;
    background: rgb(247, 245, 231);
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}

.snt-sidebar-title {
    padding: 16px 18px;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid rgb(240, 83, 43);
}

.snt-theme-link {
    display: block;
    padding: 14px 18px;
    color: #222;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.15s ease, color 0.15s ease,
                padding-left 0.15s ease;
}

.snt-theme-link:last-child {
    border-bottom: 0;
}

.snt-theme-link:hover {
    background: #fff;
    color: rgb(240, 83, 43);
    padding-left: 22px;
}

.snt-theme-link.active {
    background: rgb(240, 83, 43);
    color: white;
    font-weight: bold;
}

.snt-content {
    min-width: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

.snt-content-header {
    background: rgb(247, 245, 231);
    border-bottom: 2px solid rgb(240, 83, 43);
}

/* On neutralise le gros style global de h3 uniquement dans l'en-tête de la zone SNT. */
.snt-content-header h3 {
    margin: 0;
    padding: 18px 24px;
    color: #222;
    text-decoration: none;
    font-size: 1.5rem;
}

.snt-content-body {
    padding: 10px 18px 28px;
    overflow-x: auto;
}

/* Les tableaux des includes prennent mieux la largeur de la zone disponible. */
.snt-content-body .session-table {
    width: 100%;
}

/* Les titres déjà présents dans les includes sont conservés mais un peu resserrés. */
.snt-content-body > h3:first-child {
    margin-top: 0;
}

@media screen and (max-width: 800px) {
    .snt-layout {
        grid-template-columns: 1fr;
        width: 96%;
        gap: 14px;
    }

    .snt-sidebar {
        position: static;
        display: flex;
        overflow-x: auto;
        border-radius: 8px;
    }

    .snt-sidebar-title {
        display: none;
    }

    .snt-theme-link {
        flex: 0 0 auto;
        border-bottom: 0;
        border-right: 1px solid #ddd;
        white-space: nowrap;
        padding: 12px 14px;
    }

    .snt-theme-link:hover {
        padding-left: 14px;
    }

    .snt-content-body {
        padding: 8px 8px 22px;
    }
}