:root {
    color-scheme: dark;
}

html.vrac-index {
    min-height: 100%;
    background: #0b1020;
}

.vrac-index body {
    box-sizing: border-box;
    max-width: 1100px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 54px 26px 90px;
    color: #e9eefc;
    font: 16px/1.55 system-ui, -apple-system,
          BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.vrac-index h1 {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
    font-size: clamp(27px, 5vw, 43px);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.15;
}

.vrac-index h1::before {
    content: "VRAC  /  PARTAGE DE FICHIERS";
    display: block;
    margin-bottom: 22px;
    color: #8ea8ef;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.vrac-index .vrac-description {
    margin: 0 0 31px;
    color: #96a4c1;
    font-size: 14px;
}

.vrac-index hr {
    display: none;
}

.vrac-index .vrac-list {
    display: grid;
    gap: 9px;
}

.vrac-index .vrac-entry {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 17px 19px;
    border: 1px solid #26334d;
    border-radius: 15px;
    background: #141d30;
    transition: background .15s, border-color .15s,
                transform .15s;
}

.vrac-index .vrac-entry:hover {
    background: #1b2942;
    border-color: #5979b4;
    transform: translateY(-1px);
}

.vrac-index .vrac-entry::before {
    content: "↓";
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    height: 40px;
    border-radius: 11px;
    background: #24334d;
    color: #a9c5fa;
    font-size: 20px;
    font-weight: 600;
}

.vrac-index .vrac-entry.vrac-folder::before {
    content: "📁";
    background: #303522;
    font-size: 20px;
}

.vrac-index .vrac-entry.vrac-parent::before {
    content: "↖";
    background: #263149;
}

.vrac-index .vrac-entry-main {
    flex: 1;
    min-width: 0;
}

.vrac-index .vrac-entry a {
    display: block;
    color: #f0f4ff;
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.vrac-index .vrac-entry a:hover {
    color: #a9c8ff;
}

.vrac-index .vrac-meta {
    display: block;
    margin-top: 3px;
    color: #91a0bd;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: normal;
}

.vrac-index .vrac-footer {
    margin-top: 33px;
    color: #70809e;
    font-size: 12px;
    text-align: center;
}

.vrac-index a:focus-visible {
    outline: 2px solid #9dc4ff;
    outline-offset: 5px;
    border-radius: 3px;
}

@media (max-width: 600px) {
    .vrac-index body {
        padding: 30px 14px 55px;
    }

    .vrac-index .vrac-entry {
        padding: 14px;
        gap: 12px;
    }

    .vrac-index .vrac-entry::before {
        flex-basis: 35px;
        height: 35px;
    }
}