* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}

main {
    display: block;
    padding: 20px 16px 80px;
    overflow-x: hidden;
}

@media (min-width: 768px) {
    main { padding: 32px 40px 100px; }
}

/* Les tableaux larges (nombreuses colonnes) scrollent dans leur propre conteneur plutôt que de
   forcer tout "main" à défiler horizontalement pour quelques pixels de débordement ailleurs. */
@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--text);
    margin: 0 0 16px;
}

h1 { font-size: 20px; text-transform: uppercase; letter-spacing: 0.03em; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 28px; }

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

/* The one <a> (bare, or wrapped in a lone <p>) directly after a top-level page <h1> is
   always the primary "create" action across every list screen in this app — style it as
   the design system's accent button without touching ~15 near-identical templates.
   Scoped to "main > h1" so it does not also match panel headers built by hand later
   (Tasks 10/11), which use their own explicit .btn-accent class. */
main > h1 + a,
main > h1 + p > a {
    display: inline-block;
    padding: 9px 16px;
    margin-bottom: 20px;
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: none;
}
main > h1 + a:hover,
main > h1 + p > a:hover {
    text-decoration: none;
    opacity: 0.9;
}

label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}

input, select, textarea {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 42px;
    padding: 0 12px;
    margin-bottom: 14px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}
input[type="checkbox"] {
    /* La règle "input" ci-dessus met "appearance: none" pour désactiver le style natif des
       champs texte/select — appliqué par erreur aux cases à cocher aussi, ce qui les rend
       visuellement identiques cochées ou non (aucun ::before ni changement de fond ne remplace
       la coche native). Restaurée ici pour qu'elles gardent leur rendu natif (coche + accent-color). */
    appearance: auto;
    -webkit-appearance: auto;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    display: inline-block;
    margin: 0 8px 0 0;
}
/* La règle "input" ci-dessus cible tout <input>, y compris type="hidden" — sans cet override,
   chaque input caché (jetons CSRF, "table td form", etc.) hérite de "display: block" et
   s'affiche comme un champ vide par-dessus le contenu voisin (bouton "Supprimer", ligne de
   tableau...), au lieu de rester invisible comme le veut son type. */
input[type="hidden"] { display: none; }
input[type="date"],
input[type="datetime-local"],
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
    text-align: center;
}
textarea { height: auto; min-height: 90px; padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Liste de cases à cocher du champ "fournisseurs" d'un produit (EntityType multiple+expanded) :
   remplace le <select multiple> natif, peu utilisable au clic/tactile. Grid à 2 colonnes pour
   aligner chaque case avec son libellé, ceux-ci étant rendus par Symfony comme des
   <input>/<label> simplement juxtaposés (pas encapsulés dans un conteneur par choix). */
#produit_fournisseurs {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 8px;
    max-width: 420px;
    max-height: 220px;
    overflow-y: auto;
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
}
#produit_fournisseurs input[type="checkbox"] { margin: 0; }
#produit_fournisseurs label {
    display: inline;
    text-transform: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 0;
    cursor: pointer;
}

@media (max-width: 767px) {
    /* 16px minimum : en dessous, Safari iOS zoome automatiquement la page au focus d'un champ,
       gênant pour saisir rapidement des volumes au clavier numérique. */
    input, select, textarea {
        font-size: 16px;
        margin-bottom: 10px;
    }
}

button {
    display: inline-block;
    padding: 11px 20px;
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border-subtle);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    touch-action: manipulation;
}
button[type="submit"] {
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    font-weight: 900;
}
button.btn-block {
    display: block;
    width: 100%;
    padding: 14px;
}

/* Every "Supprimer" action in this app is a lone submit button inside a CSRF-protected
   <form> inside a table cell — style it as a muted text action (not a boxed button),
   matching the "Modifier / Supprimer" link pair from the Référentiels mockup, with zero
   template edits. Underlined by default (not just on hover) to match the mockup's
   always-underlined action-link style. */
table td form button[type="submit"] {
    padding: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: underline;
}
table td form button[type="submit"]:hover { color: var(--bad-bg); }

/* "Modifier" and other row-level action links (table body only, so the header's "+
   Ajouter" button and the drawer nav links stay unaffected) — underlined by default to
   match the mockup's action-link style. */
table tbody td > a { text-decoration: underline; }

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
}
thead th {
    background: var(--surface-raised);
    padding: 10px 16px;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}
tbody td {
    padding: 11px 16px;
    border-top: 1px solid var(--border-subtle);
    font-size: 13px;
    color: var(--text);
}
.quantite-positive { color: var(--ok-bg); font-weight: 600; }
.quantite-negative { color: var(--bad-bg); font-weight: 600; }
.mouvement-date-saisie { color: var(--text-muted); font-size: 11px; }

.flash {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-left: 3px solid var(--accent);
    background: var(--surface-raised);
    color: var(--text);
    font-size: 13px;
}
.flash-error { border-left-color: var(--bad-bg); }

/* Erreurs de formulaire globales (form_errors(form), ex. "Une sortie doit contenir au moins une
   ligne.") : sans cette règle, elles héritent de "main form ul" ci-dessous — une simple liste
   rouge à 12px, facile à manquer au milieu du reste du formulaire. Un bloc plein, au même langage
   visuel que les badges "bad" du dashboard, pour qu'une erreur bloquant la soumission ne passe
   plus inaperçue. Les erreurs par champ (form_errors(field), sous chaque input) restent inchangées
   : elles sont déjà localisées juste à côté du champ concerné, un bandeau y serait redondant.
   Vide (aucune erreur), la div ne contient aucun <ul> et reste invisible : le style est porté par
   "form-errors ul", pas par la div elle-même. */
.form-errors ul {
    list-style: none;
    padding: 14px 16px;
    margin: 0 0 16px;
    background: var(--bad-bg);
    color: var(--bad-text);
    font-size: 14px;
    font-weight: 700;
}
.form-errors li::before { content: '⚠ '; }

main ul {
    margin: 0 0 14px;
    padding-left: 20px;
}

main form ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    color: var(--bad-bg);
    font-size: 12px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 14px;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 768px) {
    .topbar { height: 64px; padding: 0 20px; }
}

.topbar__burger {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.topbar__burger span { display: block; width: 20px; height: 2px; background: var(--text); }

.topbar__title {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 14px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
@media (min-width: 768px) { .topbar__title { font-size: 15px; } }

.topbar__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
}
@media (min-width: 768px) { .topbar__avatar { width: 34px; height: 34px; } }

.theme-toggle {
    padding: 8px 12px;
    background: var(--accent);
    color: var(--on-accent);
    border: 2px solid var(--accent);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
}

.topbar__quick-add { position: relative; }
.topbar__quick-add-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.quick-add-menu {
    display: none;
    position: absolute;
    top: 44px;
    right: 0;
    min-width: 200px;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    z-index: 20;
    flex-direction: column;
}
.quick-add-menu--open { display: flex; }
.quick-add-menu .drawer-link { padding: 12px 16px; }

.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 4, 0.55);
    z-index: 20;
}
.drawer-overlay--visible { display: block; }

.drawer-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 280px;
    max-width: 85vw;
    background: var(--surface);
    border-right: 2px solid var(--border-subtle);
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    z-index: 30;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.drawer-panel--open { transform: translateX(0); }
@media (min-width: 768px) { .drawer-panel { width: 320px; } }

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 768px) { .drawer-header { padding: 18px; } }
.drawer-header__title { font-family: var(--font-display); font-weight: 900; font-size: 13px; color: var(--text); }
.drawer-header__subtitle { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.drawer-close {
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--border-subtle);
    color: var(--text);
    font-size: 14px;
    padding: 0;
    cursor: pointer;
}

.drawer-section-title {
    padding: 16px 16px 4px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}

.drawer-panel nav { display: flex; flex-direction: column; }
.drawer-link {
    padding: 12px 16px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--text-muted);
    background: transparent;
    border-left: 3px solid transparent;
}
.drawer-link:hover { color: var(--text); text-decoration: none; }
.drawer-link--active {
    font-weight: 600;
    color: var(--text);
    background: var(--active-bg);
    border-left-color: var(--accent);
}
@media (min-width: 768px) { .drawer-link { padding: 13px 18px; font-size: 14px; } }

.drawer-footer {
    margin-top: auto;
    padding: 14px 16px;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}
@media (min-width: 768px) { .drawer-footer { padding: 16px 18px; } }

.card {
    --card-border: var(--border-subtle);
    background: var(--surface);
    border: 2px solid var(--card-border);
    border-left-width: 5px;
    padding: 16px;
    margin-bottom: 14px;
}
.card--ok { --card-border: var(--ok-bg); }
.card--bad { --card-border: var(--bad-bg); }
.card--warn { --card-border: var(--warn-bg); }
.card--na { --card-border: var(--na-bg); }
@media (min-width: 768px) {
    .card { border-left-width: 6px; }
}

.card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.card__title { font-family: var(--font-display); font-weight: 900; font-size: 15px; color: var(--text); }
.card__subtitle { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.card__header-actions { display: flex; align-items: center; gap: 8px; }
.card__detail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}
.card__detail-link:hover { color: var(--text); border-color: var(--text-muted); }

.formule-perdu {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--surface-raised);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}
.formule-perdu strong { color: var(--text); }

.comptage-lignes-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: 20px; }
@media (min-width: 768px) {
    .comptage-lignes-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .comptage-lignes-grid .card { margin-bottom: 0; }
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}
.badge--ok { background: var(--ok-bg); color: var(--ok-text); }
.badge--warn { background: var(--warn-bg); color: var(--warn-text); }
.badge--bad { background: var(--bad-bg); color: var(--bad-text); }
.badge--na { background: var(--na-bg); color: var(--na-text); }

.stepper {
    display: flex;
    border: 1px solid var(--border-subtle);
    min-width: 0;
}
.stepper input {
    flex: 1;
    text-align: center;
    width: auto;
    max-width: none;
    margin-bottom: 0;
    border: none;
    background: var(--surface);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 20px;
    min-width: 0;
}
.stepper__btn {
    width: 44px;
    height: 44px;
    border: none;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
}
.stepper__btn--minus { background: var(--surface-raised); color: var(--text); }
.stepper__btn--plus { background: var(--accent); color: var(--on-accent); }
.stepper-wrapper { display: flex; align-items: center; gap: 8px; }
.stepper__plus10 {
    height: 44px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
@media (min-width: 768px) {
    .stepper__btn { width: 40px; height: 40px; font-size: 18px; }
    .stepper input { font-size: 18px; }
    .stepper__plus10 { height: 40px; font-size: 11px; }
}

.input-inline { width: 64px; max-width: 64px; margin-bottom: 0; text-align: center; font-family: var(--font-mono); font-weight: 600; }

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.filters > div { min-width: 180px; }
.filters input, .filters select { margin-bottom: 0; }
.filters label.filters__checkbox {
    display: flex;
    align-items: center;
    text-transform: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--text);
}
.btn-reset-filters {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 8px;
    background: transparent;
    border: 1px solid var(--bad-bg);
    color: var(--bad-bg);
    font-weight: 700;
    text-decoration: none;
}
.btn-reset-filters:hover { background: var(--bad-bg); color: var(--bad-text); }

@media (max-width: 767px) {
    .filters > div { min-width: 0; width: 100%; }
    .filters button[type="submit"] { width: 100%; }
}

.panel__filters { padding: 16px 20px 0; }

/* Regroupe le bloc de filtres (souvent 5-7 champs) dans un <details open> repliable sur mobile,
   pour ne pas monopoliser tout le haut de l'écran avant la liste elle-même. Rendu "open" par
   défaut côté serveur (visible sans JS, et sur desktop où le <summary> est masqué ci-dessous) ;
   filters-toggle-controller.js le referme au chargement sur mobile uniquement. Ne pas masquer
   .filters via CSS pour émuler un <details> fermé : un <details> réellement fermé masque son
   contenu via un mécanisme interne du navigateur qu'un simple `display` ne peut pas contourner,
   d'où le choix de piloter l'attribut "open" plutôt que l'affichage du contenu. */
.filters-toggle > summary {
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 0;
}
.filters-toggle .filters { padding-top: 14px; }
@media (min-width: 768px) {
    .filters-toggle > summary { display: none; }
}

.taux-perte-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) {
    .taux-perte-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

#stock-actuel-fieldsets { display: grid; gap: 14px; }

.taux-perte-fieldset {
    grid-column: 1 / -1;
    border: 1px solid var(--border-subtle);
    padding: 14px;
    margin: 0;
    /* <fieldset> a une taille minimale intrinsèque = celle de son contenu non réductible (ex.
       un tableau avec des cellules "white-space: nowrap"), que "width: 100%" ne peut pas
       compenser. Sans ce reset, un tableau large à l'intérieur pousse le fieldset — et avec
       lui toute la page — plus large que le viewport au lieu de rester scrollable dans son
       propre conteneur (table { overflow-x: auto } plus bas, mobile uniquement). */
    min-width: 0;
}
.taux-perte-fieldset legend {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 13px;
    padding: 0 8px;
    color: var(--text);
}
.taux-perte-fieldset .taux-perte-grid { margin-top: 8px; }

.metrics { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.metrics > div { display: flex; flex-direction: column; gap: 2px; }
.metrics__label { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.metrics__value { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); }

.form-header-fields { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.form-header-fields > div { min-width: 200px; }

.line-header { display: none; }
@media (min-width: 768px) {
    .line-header {
        display: grid;
        grid-template-columns: 3fr 1.2fr 60px;
        gap: 12px;
        padding: 9px 14px;
        background: var(--surface-raised);
        font-family: var(--font-display);
        font-weight: 900;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
    }
}

.line-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--surface);
    padding: 12px;
    margin-bottom: 10px;
}
.line-row select { margin-bottom: 0; }
.line-row__reference { display: flex; flex-direction: column; gap: 4px; }
.line-row__disponibilite { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.line-row__remove {
    align-self: flex-end;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 16px;
    padding: 0;
}
@media (min-width: 768px) {
    .line-row { display: grid; grid-template-columns: 3fr 1.2fr 60px; gap: 12px; align-items: center; padding: 10px 14px; }
    .line-row__remove { align-self: center; width: 36px; height: 36px; }
    .line-row > ul {
        grid-column: 1 / -1;
        margin: 0;
    }
}

.btn-dashed {
    display: block;
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px dashed var(--border-subtle);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 10px 0 20px;
    cursor: pointer;
}

.panel { border: 1px solid var(--border-subtle); background: var(--bg); margin-bottom: 24px; }
.panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.panel__title { margin: 0; font-size: 14px; }
.panel__table { margin-bottom: 0; border: none; }
.panel__table thead th { padding: 9px 20px; }
.panel__table tbody td { padding: 11px 20px; }

.line-details { margin: 0; }
.line-details summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}
.line-details summary::-webkit-details-marker { display: none; }
.line-details summary::before { content: '▸ '; }
.line-details[open] summary::before { content: '▾ '; }
.line-details-table { width: 100%; margin-top: 8px; margin-bottom: 0; border: 1px solid var(--border-subtle); border-collapse: collapse; }
.panel__table .line-details-table th, .panel__table .line-details-table td { padding: 6px 10px; font-size: 12px; text-align: left; }
.dashboard-section .line-details-table th, .dashboard-section .line-details-table td { padding: 6px 10px; font-size: 12px; text-align: left; }
.stock-pivot-table__quantite { text-align: right; font-family: var(--font-mono); white-space: nowrap; }

.dashboard-section { margin-bottom: 24px; }
.dashboard-section summary { cursor: pointer; list-style: none; }
.dashboard-section summary::-webkit-details-marker { display: none; }
.dashboard-section summary h2 { display: inline; }
.dashboard-section summary::before { content: '▾ '; }
.dashboard-section:not([open]) summary::before { content: '▸ '; }

.btn-accent {
    display: inline-block;
    padding: 9px 16px;
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.btn-accent:hover { text-decoration: none; opacity: 0.9; }

.dropzone {
    border: 2px dashed var(--border-subtle);
    padding: 24px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.dropzone label, .dropzone input { max-width: 320px; }
.dropzone__hint { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin: 0; }

.login-card { width: 100%; max-width: 360px; }
@media (min-width: 768px) {
    .login-page { display: flex; align-items: center; justify-content: center; min-height: 70vh; }
}

.produit-thumbnail {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    vertical-align: middle;
    margin-right: 8px;
    flex-shrink: 0;
}
.produit-preview {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 1px solid var(--border-subtle);
    margin-bottom: 14px;
    display: block;
}