:root {
    height: 100vh;
    height: 100dvh;

    /* correction : thème sombre par défaut */
    --bg: #25282A;
    --text: #c8c8c8;

    --ghost-contrast: #8882;

    /* 👉 Couleur des contours (modifiée ici) */
    --faint-contrast: #4A90E2;

    --faint-contrast-trans: #0f11137d;
    --mild-contrast: #8886;
    --good-contrast: #000a;

    --button-bg: #6688aa;
    --button-bg-hover: #7aa0c0;
    --button-text: #ffffff;
    --focus-color: #446688;

    color-scheme: dark;
}

/* THEME SOMBRE */
.theme-dark {
    --bg: #25282A;
    --text: #c8c8c8;

    --good-contrast: #fffa;

    --button-bg: #32363a;
    --button-bg-hover: #636B73;
    --button-text: #c8c8c8;

    color-scheme: dark;
}

/* BASE */
body {
    background-color: var(--bg); /* correction Firefox */
    color: var(--text);
    background-size: contain;
    font-family: "Montserrat", sans-serif;
}

/* HEADER */
header {
    background: linear-gradient(#000000, #3a3f44 60%, #8F9BA7);
    background-repeat: no-repeat;

    position: sticky;
    top: 0;

    padding: .2em;
    z-index: 1;

    border: 1px solid rgba(0,0,0,0.6);

    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

/* BREADCRUMB */
.breadcrumb {
    padding: .1em .6em .2em;
    line-height: 1.8em;

    border-radius: .7em;

    background-color: var(--button-bg);

    border: 1px solid var(--faint-contrast);

    margin: 2px 4px auto;

    display: inline-block;

    min-width: 60px;

    text-align: center;

    text-shadow: 0px 0px 4px rgba(0,0,0,0.4);

    word-break: break-word;

    transition: all 0.25s ease;
}

.breadcrumb:hover {
    background-color: var(--button-bg-hover);
    text-shadow: 0px 0px 4px rgba(255,255,255,0.4);
}

/* ROOT CONTAINER */
#root {
    max-width: 100%;
    margin: auto;
    min-height: 100vh;
}

.list-wrapper {
    max-width: 100%;
}

#root > div {
    max-width: 100%;
}

/* DIRECTORY LIST */
ul.dir {
    flex: 1;

    padding:15px;

    margin: auto;

    min-width: 95%;
    max-width: 95%;

    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

/* 👉 LIGNES DE DOSSIER AVEC DÉGRADÉ (vertical) */
ul.dir li {
    display: block;

    min-height: 3em;

    list-style: none;

    margin: 5px auto;

    padding: .15em .3em .10em;

    border: 2px solid var(--faint-contrast);

    border-radius: 50px;

    /* 🎨 Dégradé vertical foncé → clair */
    background: linear-gradient(to bottom, #000000, #3a3f44 60%, #8F9BA7);

    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

/* BUTTON */
button {
    background-color: var(--button-bg);

    color: var(--button-text);

    padding: .5em 1em;

    border-radius: 20px;

    cursor: pointer;

    border: 2px solid var(--faint-contrast);

    font-size: 17px;

    font-weight: bold;

    transition: all 0.25s ease;

    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

button:hover {
    background-color: var(--button-text);
    color: var(--button-bg-hover);

    text-shadow: 1px 1px 4px rgba(255,255,255,0.7);
}

/* LINKS */
a {
    text-decoration: none;

    color: var(--button-text);

    font-size: 18px;

    vertical-align: middle;
}

.theme-dark a {
    color: var(--button-text);
}

/* PLAYER */
@media (min-width:1200px) {

    #player {

        position: fixed;

        bottom: 2px;
        left: 2px;

        padding: .5%;

        min-width: calc((100vw - 800px) / 1.2);

        box-sizing: border-box;

        background: var(--faint-contrast-trans);

        border-radius: 8px;

        border: 1px solid var(--faint-contrast);

        z-index: 1;

    }

}

#player-title {

    color: var(--button-text);

    padding: .5em 1em;

    border-radius: .3em;

    font-size: 18px;

    font-weight: bold;

    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);

}

#folder-stats { 
    display: none !important;
}