:root {
    --felt: #16231d;
    --felt-raised: #1d2e26;
    --felt-line: #33453c;
    --card: #e9e2cc;
    --card-ink: #2a2418;
    --brass: #b99257;
    --brass-dim: #8a7143;
    --stamp: #a63a2e;
    --stamp-ok: #4f7a5c;
    --mist: #8fa398;
    --bone: #e8e6df;

    --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
    --font-body: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--felt);
    color: var(--bone);
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
}

a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    margin: 0 0 0.6rem;
}

p { margin: 0 0 0.8rem; }

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

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mist);
}

.wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ---------- nav ---------- */

nav.top {
    background: rgba(22, 35, 29, 0.92);
    border-bottom: 1px solid var(--felt-line);
    position: sticky;
    top: 0;
    z-index: 10;
}

nav.top .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    max-width: 1000px;
}

.wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--brass);
}

nav.top ul {
    list-style: none;
    display: flex;
    gap: 1.4rem;
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

nav.top ul a { color: var(--mist); }
nav.top ul a:hover { color: var(--bone); text-decoration: none; }
nav.top ul a.current { color: var(--brass); }

/* ---------- layout shell ---------- */

main {
    min-height: calc(100vh - 60px - 70px);
    padding: 2.4rem 0 3rem;
}

footer {
    border-top: 1px solid var(--felt-line);
    padding: 1.6rem 0;
}
footer p {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--mist);
    margin: 0;
}

/* ---------- flash messages ---------- */

.flash {
    padding: 0.8rem 1rem;
    border-radius: 3px;
    margin-bottom: 1.4rem;
    font-size: 0.92rem;
}
.flash.error { background: rgba(166, 58, 46, 0.18); border: 1px solid var(--stamp); color: #f3c9c4; }
.flash.success { background: rgba(79, 122, 92, 0.2); border: 1px solid var(--stamp-ok); color: #c9e5cf; }

/* ---------- cards (index-card motif) ---------- */

.card-box {
    background: var(--card);
    color: var(--card-ink);
    border-radius: 3px;
    padding: 1.3rem 1.4rem;
    box-shadow: 0 10px 24px -16px rgba(0,0,0,0.5);
}

.card-box a { color: var(--stamp); }

.panel {
    background: var(--felt-raised);
    border: 1px solid var(--felt-line);
    border-radius: 4px;
    padding: 1.4rem 1.6rem;
}

/* ---------- forms ---------- */

form.stacked {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 420px;
}

.field label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: 0.35rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field select,
.field textarea {
    width: 100%;
    background: var(--felt);
    border: 1px solid var(--felt-line);
    color: var(--bone);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.7rem 0.85rem;
    border-radius: 3px;
}

.field textarea { resize: vertical; min-height: 90px; }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.help {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--mist);
    margin-top: -0.4rem;
}

/* ---------- buttons ---------- */

.btn {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.86rem;
    padding: 0.7rem 1.3rem;
    background: var(--brass);
    color: var(--felt);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
}
.btn:hover { background: var(--brass-dim); text-decoration: none; }

.btn.ghost {
    background: transparent;
    color: var(--bone);
    border: 1px solid var(--felt-line);
}
.btn.ghost:hover { border-color: var(--brass); background: transparent; }

.btn.danger { background: var(--stamp); color: var(--bone); }
.btn.ok { background: var(--stamp-ok); color: var(--bone); }

.btn.small { font-size: 0.76rem; padding: 0.45rem 0.85rem; }

/* ---------- library / index cards ---------- */

.library-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 640px) { .library-grid { grid-template-columns: 1fr; } }

.index-card {
    background: var(--card);
    color: var(--card-ink);
    border-radius: 3px;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.index-card .row1 {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.index-card .row1 .cat { color: #6b6252; }
.index-card .row1 .cote { color: var(--stamp); }

.index-card .prompt {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.5;
}

.index-card.selectable {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease;
}
.index-card.selectable.checked { border-color: var(--stamp); }
.index-card.selectable input { display: none; }

/* ---------- attempt / review lists ---------- */

.attempt-item, .conv-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--felt-line);
}
.attempt-item:last-child, .conv-item:last-child { border-bottom: none; }

.status-pill {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    display: inline-block;
}
.status-pill.en_attente { background: rgba(185, 146, 87, 0.2); color: var(--brass); }
.status-pill.admis { background: rgba(79, 122, 92, 0.25); color: #bfe0c8; }
.status-pill.refuse { background: rgba(166, 58, 46, 0.2); color: #e3a7a0; }

/* ---------- profile grid ---------- */

.browse-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}
@media (max-width: 640px) { .browse-grid { grid-template-columns: 1fr; } }

.profile-card {
    background: var(--felt-raised);
    border: 1px solid var(--felt-line);
    border-radius: 4px;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.profile-card .who {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--mist);
}

/* ---------- messages ---------- */

.messages {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1.4rem;
}

.msg {
    max-width: 70%;
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    font-size: 0.95rem;
}
.msg.mine { align-self: flex-end; background: var(--brass); color: var(--felt); }
.msg.theirs { align-self: flex-start; background: var(--felt-raised); border: 1px solid var(--felt-line); }
.msg time {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

/* ---------- stamp ---------- */

.stamp-badge {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid var(--stamp-ok);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-8deg);
    color: var(--stamp-ok);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--felt-line);
}

.empty-note {
    color: var(--mist);
    font-style: italic;
}