/* Base : reset, typographie, mise en page. Propriétés logiques uniquement (RTL/LTR automatique). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--text);
    background-color: var(--bg);
    background-image: radial-gradient(1200px 700px at 12% -10%, var(--bg-grad-a), transparent 60%),
                      radial-gradient(1000px 600px at 110% 110%, var(--bg-grad-b), transparent 55%);
    background-attachment: fixed;
    min-height: 100vh;
}
h1, h2, h3 { line-height: 1.2; margin-block: 0 var(--space-3); }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); margin-block-start: var(--space-5); }
p { margin-block: 0 var(--space-3); }
a { color: var(--primary); }
img, svg { max-inline-size: 100%; }
.muted { color: var(--text-muted); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: var(--space-3); inset-block-start: -4rem; background: var(--primary); color: var(--primary-on); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 100; }
.skip-link:focus { inset-block-start: var(--space-3); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Icônes (sprite SVG). Les icônes directionnelles se retournent en RTL. */
.icon { inline-size: 1.15em; block-size: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

/* Pages d'authentification / installation */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.auth-wrap { inline-size: 100%; max-inline-size: 480px; }
.install-card { max-inline-size: 680px; margin-inline: auto; }
.checks { list-style: none; padding: 0; margin: 0 0 var(--space-4); }

/* Coque d'administration */
.admin-body { display: flex; min-height: 100vh; }
.sidebar {
    inline-size: var(--sidebar-w); flex: none; padding: var(--space-4);
    border-inline-end: 1px solid var(--glass-border);
    position: sticky; inset-block-start: 0; block-size: 100vh; overflow-y: auto;
}
.sidebar .brand { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin-block-end: var(--space-4); }
.sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sidebar a, .nav-soon {
    display: flex; align-items: center; min-block-size: var(--touch-min); padding-inline: var(--space-3);
    border-radius: var(--radius-sm); color: inherit; text-decoration: none;
}
.sidebar a:hover { background: var(--glass-bg); }
.sidebar a[aria-current="page"] { background: var(--primary); color: var(--primary-on); font-weight: 700; }
.nav-soon { color: var(--text-muted); }
.admin-main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.topbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); border-block-end: 1px solid var(--glass-border); }
.topbar-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.admin-content { padding: var(--space-5); flex: 1; }
.btn.sidebar-toggle { display: none; } /* spécificité > .btn (components.css, chargé après) */
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.stack > * + * { margin-block-start: var(--space-3); }

@media (max-width: 900px) {
    .admin-body { flex-direction: column; }
    .sidebar {
        position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50; block-size: 100dvh;
        background: var(--surface-solid); transform: translateX(-105%); transition: transform var(--dur) var(--ease);
    }
    [dir="rtl"] .sidebar { transform: translateX(105%); }
    .sidebar-open .sidebar { transform: none; }
    .btn.sidebar-toggle { display: inline-flex; }
    .admin-content { padding: var(--space-4); }
    .topbar { padding-inline: var(--space-4); }
}

/* Admin : navigation groupée, tableau de bord */
.sidebar .brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; padding-block-end: var(--space-4); border-block-end: 1px solid var(--line); }
.brand-mark { inline-size: 28px; block-size: 34px; border-radius: 999px 999px 6px 6px; border: 2px solid var(--accent-2); background: linear-gradient(180deg, var(--primary), transparent); flex: none; }
.nav-group { margin: var(--space-4) 0 var(--space-1); padding-inline: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.sidebar a, .nav-soon { gap: var(--space-3); }
.sidebar a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent-2); }
[dir="rtl"] .sidebar a[aria-current="page"] { box-shadow: inset -3px 0 0 var(--accent-2); }
.nav-soon { opacity: .75; cursor: default; }
.dash-head h1 { font-family: var(--font-display); font-weight: 600; margin-block: 0 var(--space-1); }
.kpi-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-block: var(--space-5); }
.kpi { display: grid; gap: var(--space-1); padding: var(--space-4); align-content: start; }
.kpi-icon { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 999px 999px 10px 10px; border: 1px solid var(--accent-2); color: var(--primary); margin-block-end: var(--space-2); }
.kpi-value { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-label { color: var(--text-muted); font-size: var(--text-sm); }
.stock-card { display: grid; gap: var(--space-4); padding: var(--space-5); }
.stock-card h2 { margin: 0; font-size: var(--text-lg); }
.stock-bar { display: flex; block-size: 14px; border-radius: var(--radius-pill); overflow: hidden; background: var(--line); }
.stock-bar .seg { flex: 0 0 calc(var(--w) * 1%); }
.seg-available, .dot-available { background: var(--success-fill); }
.seg-reserved, .dot-reserved { background: var(--accent-2); }
.seg-sold, .dot-sold { background: var(--text-muted); }
.stock-legend { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.dot { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; margin-inline-end: var(--space-2); }
.admin-content table { font-variant-numeric: tabular-nums; }
.stock-legend { list-style: none; margin: 0; padding: 0; }