/* =============================
   Base / typo
============================= */

body {
    font-size: 16px !important;
}

.sl-elements,
.sl-elements * {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.65 !important;

}

.sl-markdown-viewer,
.sl-prose {
    font-size: 15px !important;
    line-height: 1.65 !important;
}


/* =============================
   Logo
============================= */

.logo-container {
    padding: 10px 16px !important;
}

.logo-container img,
.scribe-logo {
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
    display: block !important;
}

.logo-link,
.scribe-logo-link {
    display: inline-flex !important;
    align-items: center !important;
}


/* =============================
   Sidebar
============================= */

#sidebar {
    background: #0f172a !important;
    border-right: 1px solid #1e293b !important;
}

/* containers internes */

#sidebar .sl-bg-canvas-100,
#sidebar .sl-w-full,
#sidebar .sl-overflow-y-auto {
    background: transparent !important;
}

/* titre */

#sidebar h4 {
    color: #ffffff !important;
}

/* liens */

#sidebar a,
#sidebar .sl-flex,
#sidebar .sl-text-heading,
#sidebar .sl-text-paragraph,
#sidebar .sl-text-body {
    color: #e5e7eb !important;
    text-decoration: none !important;
}

/* hover */

#sidebar .hover\:sl-bg-canvas-200:hover,
#sidebar [id^="toc-item-"]:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

/* élément actif */

#sidebar .sl-bg-primary-tint,
#sidebar [id^="toc-item-"].sl-bg-primary-tint {
    background: #2563eb !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

#sidebar .sl-bg-primary-tint a,
#sidebar [id^="toc-item-"].sl-bg-primary-tint a {
    color: #ffffff !important;
}

/* icônes */

#sidebar .sl-text-muted,
#sidebar .sl-icon {
    color: #94a3b8 !important;
}

/* footer */

#sidebar .sl-border-t {
    border-color: #1e293b !important;
}

#sidebar .sl-border-t a {
    color: #94a3b8 !important;
}

#sidebar .sl-border-t a:hover {
    color: #ffffff !important;
}


/* =============================
   Contenu principal
============================= */

.sl-elements .sl-bg-canvas {
    background: #ffffff !important;
}

.sl-elements h1 {
    font-size: 2.8rem !important;
    letter-spacing: -0.02em !important;
}

.sl-elements h2 {
    font-size: 1.9rem !important;
    letter-spacing: -0.02em !important;
}

.sl-elements h3 {
    font-size: 1.25rem !important;
}


/* =============================
   Panels / exemples
============================= */

.sl-panel {
    border: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.sl-panel__titlebar {
    background: transparent !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 0 !important;
}

.sl-panel__content,
.sl-panel__content-wrapper {
    border-radius: 0 !important;
}

/* supprimer le petit bloc gris autour du titre réponse */

.sl-panel__titlebar .sl-border-transparent {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}


/* =============================
   Code blocks
============================= */

pre,
code {
    border-radius: 0 !important;
}

pre {
    font-size: 14px !important;
}


/* =============================
   Tags valeurs exemple
============================= */

.sl-bg-canvas-tint {
    background: #f1f5f9 !important;
    border-radius: 0 !important;
}


/* =============================
   Responsive
============================= */

@media (max-width: 1200px) {

    #sidebar {
        width: 260px !important;
        min-width: 260px !important;
        padding-left: 0 !important;
    }

    .logo-container img,
    .scribe-logo {
        width: 150px !important;
        max-width: 150px !important;
    }

}