/* ---------- Couleurs ---------- */

:root {
    --danger: #c62828;
    --muted: #6b7280;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --danger: #ef5350;
        --muted: #9ca3af;
    }
}

/* ---------- Mise en page générale ---------- */

.site-header nav { flex-wrap: wrap; }
.site-header nav ul { flex-wrap: wrap; }
.flash { padding: .75rem 1rem; border-left: 4px solid var(--pico-primary); background: var(--pico-card-background-color); }
.link-button { background: none; border: none; padding: 0; color: var(--pico-primary); text-decoration: underline; width: auto; margin: 0; }
.logout-form { margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.filters select, .filters button { width: auto; margin-bottom: 0; }
.field-error { display: block; color: var(--danger); }
.delete-button { width: auto; margin-bottom: 0; color: var(--danger); border-color: var(--danger); }
.usage-note { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Mobile : pas de zoom Safari, cibles tactiles ---------- */

input, select, textarea { font-size: max(16px, 1rem); }
button, [role="button"] { min-height: 44px; }

/* ---------- Connexion ---------- */

.login-card { max-width: 28rem; margin-inline: auto; }

/* ---------- Paramètres : listes de référence ---------- */

.reference-list { margin-bottom: 2rem; }
.reference-items { list-style: none; padding: 0; }
.reference-items li { list-style: none; margin-bottom: .75rem; }
.reference-item[data-active="0"] input[name="name"] { color: var(--muted); text-decoration: line-through; }
.reference-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 0; }
.reference-form input[name="name"] { flex: 1 1 12rem; margin-bottom: 0; }
.reference-form .position-input { flex: 0 0 5rem; margin-bottom: 0; }
.reference-form button { width: auto; margin-bottom: 0; }
.active-check { display: inline-flex; gap: .25rem; align-items: center; margin-bottom: 0; }

/* ---------- Titres de page, accueil ---------- */

.page-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.page-heading h1 { margin-bottom: 0; }
.page-heading [role="button"] { width: auto; }
.home-actions { display: grid; gap: 1rem; }
.home-actions [role="button"] { padding-block: 1.25rem; font-size: 1.2rem; }

/* ---------- Stock : filtres et cartes ---------- */

.lot-filters input[type="search"] { margin-bottom: .5rem; }
.filter-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; }
.filter-selects select { margin-bottom: 0; }
.result-count { margin-top: 1rem; color: var(--muted); }
.lot-card { padding: 0; margin-bottom: .75rem; }
.lot-card a { display: block; padding: 1rem; color: inherit; text-decoration: none; }
.lot-card h2 { font-size: 1.15rem; margin-bottom: .25rem; }
.lot-card p { margin-bottom: 0; }
.status-badge { display: inline-block; margin-top: .4rem; padding: 0 .5rem; border-radius: .25rem; font-size: .85rem; background: var(--muted); color: #fff; }

/* ---------- Fiche lot ---------- */

.lot-details { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; }
.lot-details dt { color: var(--muted); }
.lot-details dd { margin: 0; font-weight: 600; }
.lot-notes { white-space: pre-line; font-weight: normal; }
.page-actions form { margin-bottom: 0; }
.page-actions button { width: auto; }
.journal { margin-top: 2rem; }
.journal ul { color: var(--muted); font-size: .9rem; }

/* ---------- Formulaire de lot ---------- */

.lot-form fieldset { margin-bottom: 1rem; }
.sticky-actions { position: sticky; bottom: 0; display: flex; gap: .5rem; padding: .75rem 0; background: var(--pico-background-color); border-top: 1px solid var(--pico-muted-border-color); }
.sticky-actions button, .sticky-actions [role="button"] { flex: 1; margin-bottom: 0; }

/* ---------- Navigation en bas d'écran sur téléphone ---------- */

@media (max-width: 600px) {
    body { padding-bottom: 4.5rem; }
    .main-nav { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; justify-content: space-around; margin: 0; padding: .25rem 0 calc(.25rem + env(safe-area-inset-bottom));
                background: var(--pico-background-color); border-top: 1px solid var(--pico-muted-border-color); }
    .main-nav li { padding: 0; }
    .main-nav a, .main-nav .link-button { display: block; padding: .6rem .5rem; font-size: .9rem; }
    .sticky-actions { bottom: 4.5rem; }
}

/* ---------- Tarifs ---------- */

.tariff-essence { margin-bottom: 2rem; }
.tariff-list { list-style: none; padding: 0; }
.tariff-row { list-style: none; padding: 1rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.tariff-row h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.current-price { font-size: 1.2rem; }
.unconfirmed-badge { display: inline-block; margin-left: .25rem; padding: 0 .4rem; border-radius: .25rem; font-size: .8rem; background: #ef6c00; color: #fff; }
.next-price { color: var(--muted); }
.tariff-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem; align-items: end; margin-top: .5rem; }
.tariff-form label { margin-bottom: 0; }
.tariff-form input { margin-bottom: 0; }
.tariff-row form button { width: auto; margin-bottom: 0; }
.tariff-form button { grid-column: 1 / -1; }