/* ========================================
   NOTES LAYOUT
   ======================================== */

.notes-box {
    display: grid;
    gap: 2.5rem;
}

/* ========================================
   NOTES ARCHIVE
   ======================================== */

.note-archive {
    padding: 1.25rem 1.5rem;

    background: rgba(247, 243, 234, 0.035);
    border: 1px solid rgba(247, 243, 234, 0.12);
}

.archive-title {
    cursor: pointer;

    color: var(--gold-light);

    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;

    list-style: none;
}

.archive-title::-webkit-details-marker {
    display: none;
}

.archive-title::after {
    content: "+";

    float: right;

    color: var(--gold);
    font-size: 1rem;
}

.note-archive[open] .archive-title::after {
    content: "−";
}

.archive-links {
    margin-top: 1.25rem;

    display: grid;
    gap: 0.75rem;
}

.archive-links a {
    width: fit-content;

    color: var(--white);
    border-bottom: 1px solid rgba(201, 166, 70, 0.45);
}

/* ========================================
   NOTES ARTICLES
   ======================================== */

.notes-articles {
    display: grid;
    gap: 2.5rem;
}

.note-article {
    padding: 3rem;

    background: var(--bg);

    border: 1px solid var(--gold-dark);
    outline: 0.5px solid var(--gold);
    outline-offset: 10px;

    color: var(--muted);
}

.note-article h2 {
    color: var(--white);
    font-size: 2rem;
}

.note-article p {
    margin: 0 0 1.5rem;

    font-size: 1.1rem;
    line-height: 1.8;
}

.note-article blockquote {
    margin: 2rem 0;
    padding-left: 1.5rem;

    border-left: 2px solid rgba(201, 166, 70, 0.35);

    color: var(--white);
    font-style: italic;
}

/* ========================================
   FOOTNOTES
   ======================================== */

.note-signature {
    color: var(--gold-light);
    font-weight: 700;
}

/* Position des liens d'ancrage */
.note-article {
    scroll-margin-top: 6rem;
}

/* ========================================
   RESPONSIVE NOTES
   ======================================== */

@media (max-width: 760px) {
    .note-article {
        padding: 2rem;
    }
}