:root {
    --c-bg: #f5f3ef;
    --c-surface: #ffffff;
    --c-ink: #1c1a17;
    --c-muted: #6f6a62;
    --c-line: #e3ded5;
    --c-primary: #8a1c3b;
    --c-primary-dark: #6e142e;
    --c-accent: #c8a24a;
    --c-ok: #1f7a4d;
    --c-error: #b3261e;
    --c-error-bg: #fce9e7;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 8px 30px rgba(28, 26, 23, 0.08);
    --font: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit toujours l'emporter, même sur .btn (display: inline-flex). */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    font-family: var(--font);
    color: var(--c-ink);
    background: var(--c-bg);
    line-height: 1.55;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }

p { margin: 0 0 1em; }

a { color: var(--c-primary); }

.req { color: var(--c-primary); font-weight: 700; }
.opt { color: var(--c-muted); font-weight: 400; font-size: .85em; }

/* Boutons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .8rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-dark); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { background: #efeae1; }
.btn--sm { padding: .45rem .8rem; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.notice {
    background: #f3eee3;
    border-left: 4px solid var(--c-accent);
    padding: .6rem .9rem;
    border-radius: var(--radius-sm);
    font-size: .95rem;
    color: var(--c-muted);
}