/* ==========================================================================
   Volti — identité « Gravure »
   L'esthétique des partitions gravées : papier blanc, noir d'encre, rouge des
   indications (rubrique), titres en Didot (Bodoni Moda), texte en Source Sans 3.
   ========================================================================== */

@font-face {
    font-family: 'Bodoni Moda';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(fonts/bodoni-moda-latin-standard-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bodoni Moda';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(fonts/bodoni-moda-latin-ext-standard-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Bodoni Moda';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url(fonts/bodoni-moda-latin-standard-italic.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bodoni Moda';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url(fonts/bodoni-moda-latin-ext-standard-italic.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(fonts/source-sans-3-latin-wght-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(fonts/source-sans-3-latin-ext-wght-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url(fonts/source-sans-3-latin-wght-italic.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --papier: #FFFFFF;
    --encre: #23201C;
    --rubrique: #A4161A;
    --rubrique-sombre: #7D0F12;
    --rubrique-pale: #F8ECEC;
    --sepia: #5E574E;
    --cadre: #D8D2C9;
    --filet: #E4DFD8;
    --lateral: #F5F3F0;
    --portee: #B9B3AA;
    --vert: #2F6B3B;
    --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
    --sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    --rayon: 6px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--encre);
    background: var(--papier);
    accent-color: var(--rubrique);
}

a { color: var(--rubrique); text-underline-offset: 3px; }
a:hover { color: var(--rubrique-sombre); }

:focus-visible { outline: 2px solid var(--rubrique); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
h1 { font-size: 40px; margin: 0 0 20px; }
h2 { font-size: 26px; margin: 36px 0 14px; }

.muted { color: var(--sepia); }
.small { font-size: 14px; }

/* Portées : cinq filets, le motif de la maison */
.staff-rule {
    height: 25px;
    background-image: repeating-linear-gradient(to bottom, var(--portee) 0, var(--portee) 1px, transparent 1px, transparent 6px);
    background-size: 100% 6px;
    background-repeat: repeat;
    margin: 4px 0 20px;
    opacity: 0.8;
}

/* ---------- Bandeau du site de test ---------- */
.test-banner {
    background: var(--encre);
    color: #FFFFFF;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 3px;
}

/* ---------- En-tête ---------- */
.site-header {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 14px 32px 12px;
    border-bottom: 1px solid var(--encre);
    background: var(--papier);
}

.logo {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    text-decoration: none;
    color: var(--encre);
}
.logo:hover { color: var(--encre); }
.logo-volti {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.02em;
    line-height: 1;
}
.logo-subito {
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: var(--rubrique);
}

.site-nav { display: flex; gap: 28px; flex-grow: 1; }
.site-nav a {
    color: var(--sepia);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--encre); }
.site-nav a[aria-current="page"] {
    color: var(--encre);
    font-weight: 600;
    border-bottom-color: var(--rubrique);
}

.account { position: relative; }
.account summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--cadre);
    border-radius: 18px;
    padding: 5px 14px;
    font-size: 15px;
}
.account summary::-webkit-details-marker { display: none; }
.account[open] summary { border-color: var(--encre); }
.account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 190px;
    background: var(--papier);
    border: 1px solid var(--encre);
    box-shadow: 6px 6px 0 rgba(35, 32, 28, 0.12);
    padding: 6px 0;
    display: flex;
    flex-direction: column;
}
.account-menu a, .account-menu button {
    font: inherit;
    text-align: left;
    color: var(--encre);
    text-decoration: none;
    background: none;
    border: none;
    padding: 9px 16px;
    cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--lateral); }

/* ---------- Mise en page ---------- */
.page main { max-width: 1060px; margin: 0 auto; padding: 32px; }
.prose { max-width: 680px; }

.page-narrow { background: var(--lateral); }
.page-narrow main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.narrow-card {
    width: 100%;
    max-width: 420px;
    background: var(--papier);
    border: 1px solid var(--encre);
    box-shadow: 8px 8px 0 rgba(35, 32, 28, 0.08);
    padding: 36px 36px 32px;
}
.narrow-card .logo-volti { font-size: 40px; }
.narrow-card .logo-subito { font-size: 19px; }
.narrow-card h1 { font-size: 30px; margin-bottom: 14px; }
.narrow-card .staff-rule { margin: 14px 0 22px; }

/* ---------- Formulaires ---------- */
form.stack { display: flex; flex-direction: column; gap: 16px; }
form.narrow-form { max-width: 440px; }
form.row, div.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
form.inline { display: inline; }

label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 15px; }

input, select, textarea {
    font: inherit;
    font-weight: 400;
    font-size: 16px;
    padding: 9px 11px;
    border: 1px solid var(--cadre);
    border-radius: var(--rayon);
    background: var(--papier);
    color: var(--encre);
}
input:hover, select:hover { border-color: var(--sepia); }
input:focus, select:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 2px rgba(164, 22, 26, 0.25); }

button, a.button {
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--rayon);
    border: 1px solid var(--rubrique);
    background: var(--rubrique);
    color: #FFFFFF;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}
button:hover, a.button:hover { background: var(--rubrique-sombre); border-color: var(--rubrique-sombre); color: #FFFFFF; }
button.secondary, a.button.secondary { background: var(--papier); color: var(--encre); border-color: var(--encre); }
button.secondary:hover, a.button.secondary:hover { background: var(--lateral); color: var(--encre); }
button.danger, a.button.danger { background: var(--papier); color: var(--rubrique); border-color: var(--rubrique); }
button.danger:hover { background: var(--rubrique); color: #FFFFFF; }
button.link { background: none; border: none; padding: 0; color: var(--rubrique); font-weight: 600; }
button:disabled { opacity: 0.45; cursor: default; }
button svg, a.button svg { flex: none; }

.flash { padding: 10px 14px; border-left: 3px solid; margin: 0 0 18px; background: var(--lateral); }
.flash.ok { border-color: var(--vert); }
.flash.error { border-color: var(--rubrique); color: var(--rubrique-sombre); background: var(--rubrique-pale); }

.callout {
    border: 1px solid var(--encre);
    box-shadow: 6px 6px 0 rgba(35, 32, 28, 0.08);
    padding: 6px 20px 16px;
    margin-bottom: 24px;
}
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; font-size: 14px; }

/* ---------- Tableaux ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--filet); vertical-align: middle; }
th { border-bottom: 1px solid var(--encre); font-weight: 600; font-size: 14px; color: var(--sepia); }
td.actions { text-align: right; white-space: nowrap; }
td.actions form, td.actions a.button { margin-left: 6px; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Fiche d'une partition ---------- */
.score-sheet { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.score-sheet .cover {
    aspect-ratio: 3 / 4;
    border: 1px solid var(--cadre);
    box-shadow: 4px 4px 0 var(--filet);
    background: var(--papier);
    overflow: hidden;
}
.score-sheet .cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.breadcrumb { margin: 0 0 10px; color: var(--sepia); font-size: 15px; }
.breadcrumb a { color: var(--sepia); text-decoration: none; }
.breadcrumb a:hover { color: var(--rubrique); text-decoration: underline; }

.dropzone { border: 1px dashed var(--encre); padding: 14px 18px; background: var(--lateral); }
.dropzone.over { background: var(--rubrique-pale); border-color: var(--rubrique); }
.file-label { display: inline; color: var(--rubrique); text-decoration: underline; cursor: pointer; font-weight: 600; }
.upload-log { margin: 6px 0 0; padding-left: 20px; font-size: 15px; }
.upload-log li.ok { color: var(--vert); }
.upload-log li.error { color: var(--rubrique); }
.export-status.error { color: var(--rubrique); }
/* ---------- Archive d'un compte ---------- */
.archive { margin-top: 36px; }
.archive-panel { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--cadre); background: var(--papier); }
.archive-panel progress { width: 100%; }
.archive-panel li.error { color: var(--rubrique); }
.flash.warn { border-color: var(--rubrique); }
.archive-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 14px 0 6px; }
.archive-choices p { margin: 8px 0 0; }
@media (max-width: 760px) { .archive-choices { grid-template-columns: 1fr; } }

/* ---------- Page « Application » ---------- */
.app-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 8px 0 32px; }
.app-card { border: 1px solid var(--encre); box-shadow: 6px 6px 0 rgba(35, 32, 28, 0.08); padding: 4px 22px 18px; }
.app-card h2 { margin-top: 18px; }
.app-version em { font-family: var(--serif); font-size: 19px; }
.app-empty { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--sepia); }
.app-admin { margin-top: 32px; max-width: 680px; }

/* ---------- Sauvegardes ---------- */
.backup-ok { color: var(--vert); font-weight: 600; }
.backup-late { color: var(--rubrique); font-weight: 600; }

@media (max-width: 760px) {
    .site-header { flex-wrap: wrap; gap: 14px 24px; padding: 12px 16px; }
    .site-nav {
        order: 3;
        flex: 0 0 auto;
        width: calc(100% + 32px);
        margin: 0 -16px;
        padding: 0 16px;
        gap: 24px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        white-space: nowrap;
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav a { flex: none; }
    /* Fondu sur le bord quand d'autres rubriques sont cachées (posé par app.js). */
    .site-nav.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
    .site-nav.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
    .site-nav.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
    .site-header .account { margin-left: auto; }
    .page main { padding: 20px 16px; }
    h1 { font-size: 32px; }
    .score-sheet { grid-template-columns: 1fr; }
    .score-sheet .cover { max-width: 200px; }
    td.actions { white-space: normal; }
    .narrow-card { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}