:root {
    --bg: #f4f5f7;
    --card: #ffffff;
    --ink: #1f2430;
    --muted: #6b7280;
    --accent: #8a5a2b;
    --accent-fonce: #6f4722;   /* survol d'un élément déjà coloré */
    --accent-pale: #faf5ef;    /* fond très léger : survol de ligne, encart actif */
    --accent-bord: #e7d5be;    /* bordure d'un encart teinté */
    --border: #e5e7eb;
}

* { box-sizing: border-box; }

/* L'attribut hidden gagne toujours — sans quoi un display:flex posé par une
   classe rend visible un bloc que le JS croit masqué (vécu : le bouton
   « Compléter la fiche » cliquable à vide). */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--ink);
}

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

/* --- Barre du haut : onglets soulignés --- */
.topbar {
    display: flex;
    align-items: stretch;
    padding: 0 22px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}
.topbar h1 { display: flex; align-items: center; font-size: 15px; margin: 0 22px 0 0; letter-spacing: -.01em; }
.topbar h1 a { color: var(--ink); text-decoration: none; }
.topbar h1 a:hover { color: var(--accent); }
.topbar nav { display: flex; align-items: stretch; font-size: 14px; color: var(--muted); }
.topbar nav a {
    display: flex; align-items: center; padding: 16px 14px;
    border-bottom: 2px solid transparent; text-decoration: none; color: var(--muted);
    transition: color .12s, border-color .12s;
}
.topbar nav a:hover { color: var(--ink); text-decoration: none; }
/* Compte + déconnexion, poussés à droite */
.tb-compte { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.tb-compte b { color: var(--ink); font-weight: 600; }
.tb-compte a { color: var(--muted); }
.tb-compte a:hover { color: var(--accent); }

.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.container.large { max-width: 100%; padding-left: 18px; padding-right: 18px; }
.table-wrap { overflow-x: auto; }
.container.large .table { width: 100%; }

/* --- Tableau --- */
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.table th { background: #fafafa; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.table th .tri { color: inherit; display: inline-flex; align-items: center; gap: 3px; }
.table th .tri:hover { color: var(--accent); text-decoration: none; }
.table th .tri.tri-actif { color: var(--ink); font-weight: 700; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr.row-clic { cursor: pointer; }
.table tbody tr.row-clic:hover td { background: #f2f6ff; }
.table tr.ligne-total td { background: #fafafa; font-size: 12px; color: var(--muted); border-bottom: 2px solid var(--border); }
code { background: #eef2ff; color: #3730a3; padding: 2px 6px; border-radius: 5px; font-size: 13px; }

.btn {
    display: inline-block; padding: 6px 12px; background: var(--accent);
    color: #fff; border-radius: 6px; font-size: 13px;
}
.btn:hover { text-decoration: none; opacity: .9; }
.back { display: inline-block; margin-bottom: 12px; font-size: 14px; }

/* --- Détail lot --- */
.meta { color: var(--muted); margin-top: -6px; }
.lot { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin: 18px 0; }
.lot h3 { margin: 0 0 8px; }
.lot-desc { margin: 0 0 10px; white-space: pre-line; }
.prix { color: var(--muted); font-size: 14px; margin: 0 0 14px; }

.galerie { display: flex; flex-wrap: wrap; gap: 14px; }
.galerie figure { margin: 0; width: 160px; }
.galerie img { width: 160px; height: 160px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.galerie figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; word-break: break-all; }

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

/* --- Ajout d'un lot à la main --- */
.lot-ajout { background: var(--card); border: 1px dashed var(--border); border-radius: 10px; padding: 14px 18px; margin: 18px 0; }
.lot-ajout h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lot-ajout-champs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lot-ajout-champs input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 14px; }
.lot-ajout-champs input[name="numero_lot"] { width: 100px; }
.lot-ajout-champs input[name="description"] { flex: 1 1 240px; }
.lot-ajout-champs input[name="prix_adjudication"] { width: 110px; }
.lot-ajout-champs button { border: none; cursor: pointer; padding: 8px 16px; }
.lot-ajout-msg { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.lot-del { float: right; border: 1px solid var(--border); background: var(--card); color: var(--muted);
           border-radius: 6px; width: 26px; height: 26px; line-height: 1; font-size: 16px; cursor: pointer; }
.lot-del:hover { border-color: #fecaca; color: #b91c1c; }

/* --- Colonnes & totaux --- */
.table td.num, .table th.num { text-align: right; white-space: nowrap; }
.vente-nom { max-width: 340px; }
.vendeur-nom { display: block; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vendeur-com { display: block; max-width: 240px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-com, .res-com { color: var(--muted); }
.lieu-map { white-space: nowrap; text-decoration: none; color: var(--ink); }
.lieu-map:hover { color: var(--accent); text-decoration: underline; }
/* inline-block : seul le texte du lieu est cliquable (lien Maps), pas toute la
   cellule — le reste de la case ouvre la fiche comme le reste de la ligne. */
.vendeur .lieu-map { display: inline-block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.vendeur .lieu-map:hover { color: var(--accent); }
.totaux { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 6px; }
.totaux div { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 18px; min-width: 170px; }
.totaux span { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.totaux strong { font-size: 18px; }
.paiement { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.mode-pay { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef2ff; color: #3730a3; border: 1px solid var(--accent-bord); }
.mode-espèces { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.mode-virement { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.mode-chèque { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.mode-mixte { background: #faf5ff; color: #6b21a8; border-color: #e9d5ff; }
.paiement-note { color: var(--muted); font-size: 13px; margin-left: 4px; }
.lot-prix { float: right; font-size: 15px; color: var(--accent); font-weight: 600; }

/* --- Recherche --- */
.recherche { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; }
.recherche input[type="search"] { flex: 1; padding: 12px 14px; font-size: 16px; border: 1px solid var(--border); border-radius: 10px; }
/* Recherche + filtres sur une seule ligne */
.barre-outils { display: flex; align-items: center; gap: 14px; margin: 8px 0 16px; flex-wrap: wrap; }
.barre-outils .recherche { flex: 1 1 320px; margin: 0; }
.barre-outils .filtres-form { flex: 0 0 auto; margin: 0; }
.recherche-clear { flex: none; text-decoration: none; color: var(--muted); font-size: 15px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); }
.recherche-clear:hover { color: var(--accent); border-color: var(--accent); }
.recherche-lots { flex: none; white-space: nowrap; font-size: 13px; color: var(--muted); text-decoration: none; }
.recherche-lots:hover { color: var(--accent); text-decoration: underline; }
.recherche-info { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: center; }
.filtres select, .filtres input[type="number"] { padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--card); }
.filtres input[type="number"] { width: 120px; }
.filtres button { padding: 9px 18px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }
.filtres button:hover { opacity: .92; }
.filtres .reset { font-size: 13px; color: var(--muted); }
.resultats-info { color: var(--muted); font-size: 14px; margin: 6px 0 14px; }

.res-liste { display: flex; flex-direction: column; gap: 12px; }
.res-item { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; color: inherit; }
.res-item:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 2px 12px rgba(37,99,235,.08); }
.res-vignette { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: #f0f1f3; display: flex; align-items: center; justify-content: center; }
.res-vignette img { width: 100%; height: 100%; object-fit: cover; }
.res-vignette .no-img { color: var(--muted); }
.res-corps { flex: 1; min-width: 0; }
.res-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.res-prix { color: var(--accent); font-weight: 600; white-space: nowrap; }
.res-desc { margin: 6px 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.res-meta { margin: 0; font-size: 12.5px; color: var(--muted); }
mark { background: #fef08a; color: inherit; padding: 0 1px; border-radius: 2px; }

/* --- Badges plateformes --- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: #64748b; vertical-align: middle; white-space: nowrap; }
.plat-interencheres { background: #2563eb; }
.plat-drouot        { background: #9d174d; }
.plat-leboncoin     { background: #f56b2a; }
.plat-vinted        { background: #09b1ba; }
.plat-ebay          { background: #e53238; }
.plat-catawiki      { background: #6d28d9; }

/* --- Filtres plateforme (chips) --- */
.filtres-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; }
.plat-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.chip { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-size: 13px; color: var(--ink); }
.chip:hover { text-decoration: none; border-color: var(--accent); }
.chip.actif { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Onglets de statut (À payer / À récupérer) */
.statut-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0 auto; align-items: center; }
.chip-badge { display: inline-block; margin-left: 4px; min-width: 18px; padding: 0 6px; border-radius: 999px;
    background: rgba(0, 0, 0, .09); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
/* Tous les chips actifs (plateforme + statut) partagent le même fond foncé (.chip.actif). */
.chip.actif .chip-badge { background: rgba(255, 255, 255, .3); color: #fff; }

/* --- Barre de filtres : menus déroulants à cases à cocher --- */
.filtres-form { align-items: center; justify-content: flex-end; }
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; padding: 8px 30px 8px 14px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--card); font-size: 13px; color: var(--ink); white-space: nowrap; user-select: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::after { content: "▾"; position: absolute; margin-left: 8px; color: var(--muted); font-size: 11px; }
.dd[open] > summary { border-color: var(--accent); box-shadow: 0 0 0 2px #eef2ff; }
.dd-count { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px;
    background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.dd-panel { position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; min-width: 210px; max-height: 340px;
    overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .13); padding: 6px; }
.dd-opt { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 6px; font-size: 13px;
    color: var(--ink); cursor: pointer; white-space: nowrap; }
.dd-opt:hover { background: var(--accent-pale); }
.dd-opt input { margin: 0; width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.dd-badge { margin-left: auto; padding: 0 7px; border-radius: 999px; background: rgba(0, 0, 0, .08); font-size: 11px; color: var(--muted); }
.dd-tous { display: block; font-weight: 600; color: var(--muted); text-decoration: none; margin-bottom: 4px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.dd-tous:hover { color: var(--accent); background: var(--accent-pale); }
.dd-tous.dd-opt-actif { color: var(--ink); }
.filtre-actions { display: flex; align-items: center; gap: 12px; }
.btn-filtrer { padding: 8px 18px; border: none; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-filtrer:hover { background: var(--accent); }
.filtre-reset { font-size: 12px; color: var(--muted); }
.paiement-cell { display: flex; flex-direction: row; align-items: center; gap: 5px; flex-wrap: wrap; }
.mode-sep { color: var(--muted); }

/* Onglet actif dans l'en-tête */
.topbar nav a.actif { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

/* Bannière de la vue « archivées » */
.archive-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; font-size: 14px; color: var(--muted); }
.archive-banner strong { color: var(--ink); }

/* Lien vers la corbeille, en bas du tableau */
.lien-archives { margin: 22px 0 8px; text-align: center; font-size: 13px; }
.lien-archives a { color: var(--muted); }
.lien-archives a:hover { color: var(--accent); text-decoration: underline; }

/* Actions de la fiche : archiver / restaurer (dans la modale) */
.fiche-actions { margin: 20px 0 2px; padding-top: 14px; border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-archive, .btn-restore { padding: 8px 14px; border-radius: 8px; border: 1px solid; background: var(--card);
    cursor: pointer; font-size: 13px; transition: background .12s, border-color .12s; }
.btn-archive { color: #b91c1c; border-color: #fecaca; }
.btn-archive:hover { background: #fee2e2; border-color: #fca5a5; }
.btn-restore { color: #166534; border-color: #bbf7d0; }
.btn-restore:hover { background: #dcfce7; border-color: #86efac; }
.fiche-actions [disabled] { opacity: .55; cursor: default; }
.fiche-actions-msg { font-size: 13px; color: var(--muted); }
h2 .badge { font-size: 13px; }

/* --- Pagination --- */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 22px 0 6px; }
.pagination a, .pagination span { min-width: 36px; text-align: center; padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: 14px; color: var(--ink); }
.pagination a:hover { border-color: var(--accent); text-decoration: none; }
.pagination .actif { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.pagination .disabled { color: #cbd0d8; }
.page-info { text-align: center; color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 0 6px; }
.par-page { display: flex; align-items: center; gap: 14px; margin: 0; }
.par-page label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.par-page select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 14px; }
.table-foot .page-info { text-align: left; margin: 0; }
.table-foot .pagination { margin: 0; }

/* --- Aperçus (miniatures) dans la liste --- */
/* 10 miniatures par ligne (10 × 42px + 9 × 4px de gap = 456px), puis retour à la ligne */
.apercu { display: flex; flex-wrap: wrap; gap: 4px; max-width: 460px; }
.thumb {
    width: 42px; height: 42px; flex: 0 0 auto; object-fit: cover; border-radius: 6px;
    border: 1px solid var(--border); background: #f0f1f3; cursor: zoom-in;
    transition: border-color .12s ease;
}
.thumb:hover { border-color: var(--accent); }
#hover-preview {
    position: fixed; z-index: 500; width: 240px; max-height: 240px; object-fit: contain;
    border-radius: 8px; border: 2px solid #fff; background: #fff;
    box-shadow: 0 10px 34px rgba(0,0,0,.38); pointer-events: none;
}
#hover-preview[hidden] { display: none; }

/* --- Viewer plein écran (lightbox) --- */
.lightbox {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15,18,25,.92);
    display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lb-img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 50px rgba(0,0,0,.5); background: #fff; }
.lb-caption { color: #e5e7eb; font-size: 14px; font-family: monospace; }
.lb-btn {
    background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer;
    width: 48px; height: 48px; border-radius: 50%; font-size: 28px; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.lb-btn:hover { background: rgba(255,255,255,.25); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-close { position: absolute; top: 16px; right: 18px; font-size: 30px; }

/* --- Divers --- */
.nowrap { white-space: nowrap; }
button.btn { border: none; cursor: pointer; font-family: inherit; }

/* --- Statuts basculables --- */
.statut {
    display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px;
    font-weight: 600; cursor: pointer; white-space: nowrap; user-select: none;
    border: 1px solid transparent; transition: filter .12s ease, transform .05s ease;
}
.statut:hover { filter: brightness(.95); }
.statut:active { transform: scale(.96); }
.statut.loading { opacity: .5; pointer-events: none; }
.st-ok   { background: #dcfce7; color: #166534; border-color: #bbf7d0; }  /* Payé / Récupéré */
.st-todo { background: #fef3c7; color: #92400e; border-color: #fde68a; }  /* À payer / À récupérer */
.op-cell { text-align: center; }
.op-cell .statut { padding: 4px 8px; font-size: 15px; line-height: 1; }
/* Transaction supprimée/annulée : rien à payer ni à récupérer — neutre, non cliquable */
.st-annule { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; cursor: default; }

/* --- Modale de détail --- */
.modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15,18,25,.55); }
.modal-dialog {
    position: relative; background: var(--bg); border-radius: 14px;
    width: 900px; max-width: 100%; max-height: 90vh; box-shadow: 0 20px 70px rgba(0,0,0,.35);
    display: flex; flex-direction: column; overflow: hidden;
}
.modal-close {
    position: absolute; top: 12px; right: 14px; z-index: 2;
    width: 34px; height: 34px; border: none; border-radius: 50%; cursor: pointer;
    background: rgba(0,0,0,.06); font-size: 22px; line-height: 1; color: var(--ink);
}
.modal-close:hover { background: rgba(0,0,0,.12); }
.modal-body { padding: 26px 26px 30px; overflow-y: auto; }
.modal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; padding-right: 34px; }
.modal-statuts { display: flex; gap: 8px; }
.modal-titre { margin: 12px 0 2px; font-size: 18px; }
.ref-ext { font-size: 13px; color: var(--muted); margin: 2px 0; }
.ref-ext strong { color: var(--ink); font-family: monospace; }
.modal-body .galerie .thumb { width: 92px; height: 92px; }
/* Miniature d'un lot : suppression au survol, glisser-déposer pour l'ordre.
   La première de la galerie est celle reprise en vignette dans les listes. */
.galerie .ph { position: relative; width: auto; margin: 0; line-height: 0; }
.galerie .ph.ph-drag { opacity: .35; }
.galerie .ph:first-of-type:not(:last-of-type)::after {
    content: "vignette"; position: absolute; left: 4px; bottom: 4px;
    padding: 1px 5px; border-radius: 4px; background: rgba(17, 24, 39, .72);
    color: #fff; font-size: 10px; line-height: 14px; letter-spacing: .02em; pointer-events: none;
}
.ph-del {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0;
    border: 1px solid var(--border); border-radius: 50%; background: var(--card);
    color: var(--muted); font-size: 14px; line-height: 17px; cursor: pointer;
    opacity: 0; transition: opacity .12s, color .12s, border-color .12s;
}
.galerie .ph:hover .ph-del, .ph-del:focus-visible { opacity: 1; }
.ph-del:hover { border-color: #fecaca; color: #b91c1c; background: #fff1f2; }
.ajout-photo { margin: 10px 0 2px; display: flex; align-items: center; gap: 10px; }
.drop-hint { font-size: 12px; color: var(--muted); }
/* Glisser-déposer d'une image sur l'encart du lot */
.lot-drop { transition: border-color .12s, box-shadow .12s, background .12s; }
.lot-drop.drop-actif { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-pale); }
.lot-drop.drop-actif * { pointer-events: none; }
.lot-loading { opacity: .6; }
.lot-loading .galerie::after { content: "envoi…"; font-size: 12px; color: var(--muted); align-self: center; }
.btn-ajout { display: inline-block; padding: 7px 14px; border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--muted); transition: border-color .12s, color .12s; }
.btn-ajout:hover { border-color: var(--accent); color: var(--accent); }
.ajout-photo.loading .btn-ajout { opacity: .5; pointer-events: none; }
.ajout-photo.loading .btn-ajout::after { content: " …envoi"; }

/* --- Frais annexes d'un bordereau --- */
.frais-bloc { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--accent-bord); border-radius: 10px; background: var(--accent-pale); }
.frais-bloc h4 { margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; }
.frais-total { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--accent); }
.frais-aide { margin: 0 0 10px; max-width: 70ch; }
.frais-liste { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.frais-ligne, .frais-ajout { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.frais-ligne input, .frais-ajout input { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; }
.frais-ligne input[name="label"], .frais-ajout input[name="label"] { flex: 1 1 180px; }
.frais-ligne input[type="number"], .frais-ajout input[type="number"] { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.frais-ht { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.frais-ligne button, .frais-ajout button { padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--muted); cursor: pointer; font-size: 13px; font-family: inherit; }
.frais-ligne button:hover, .frais-ajout button:hover { border-color: var(--accent); color: var(--accent); }
.frais-del:hover { border-color: #fecaca !important; color: #b91c1c !important; }
.frais-msg { font-size: 12px; color: #b91c1c; }
.lot-cout { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px; font-variant-numeric: tabular-nums; }

/* --- Édition manuelle d'une vente --- */
.edit-achat { margin: 12px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.edit-achat > summary { cursor: pointer; padding: 10px 14px; font-size: 14px; color: var(--accent); font-weight: 600; user-select: none; }
.edit-form { padding: 4px 14px 14px; }
.edit-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 3px; }
.edit-form input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--ink); }
.edit-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.edit-actions button { padding: 8px 18px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }
.edit-actions button:hover { opacity: .92; }
.edit-msg { font-size: 13px; color: var(--muted); }

/* --- Connexion --- */
.login-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.login-card { width: 340px; padding: 30px; }
.login-card h1 { margin: 0; font-size: 24px; text-align: center; }
.subtitle { text-align: center; color: var(--muted); margin: 4px 0 22px; }
.login-card label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.login-card input { width: 100%; padding: 10px 12px; margin-top: 5px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; }
.login-card button { width: 100%; padding: 11px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; }
.login-card button:hover { opacity: .92; }
.error { background: #fef2f2; color: #b91c1c; padding: 9px 12px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }

/* --- Bordereaux / factures rattachés à un achat --- */
.factures { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fafafa; }
.factures h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.facture-ligne { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; flex-wrap: wrap; }
.facture-ligne > a:first-child { font-size: 14px; word-break: break-all; }
.facture-meta { font-size: 12px; color: var(--muted); }

.facture-dl { margin-left: auto; font-size: 16px; text-decoration: none; }
/* Rappel discret : le document vit chez le fournisseur, pas sur l'achat. */
.facture-identite { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--muted); text-decoration: none; }
.facture-identite:hover { color: var(--txt, inherit); text-decoration: underline; }
.facture-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; }
.facture-del:hover { color: #c0392b; background: #fdecea; }
.facture-vide { font-size: 13px; color: var(--muted); }
.facture-ajout { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.facture-drop { transition: border-color .12s, box-shadow .12s, background .12s; }
.facture-drop.drop-actif { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-pale); }
.facture-drop.drop-actif * { pointer-events: none; }
/* Documents du fournisseur dans le referentiel : cellule compacte. */
.ref-docs { min-width: 180px; font-size: 12px; }
.ref-docs .facture-ligne { gap: 6px; padding: 2px 0; }
.ref-docs .facture-ligne a { font-size: 12px; }
.ref-docs .facture-ajout { cursor: pointer; color: var(--muted); }
.ref-docs .facture-ajout:hover { color: var(--accent); }
.facture-loading { opacity: .6; }
.facture-loading .factures-liste::after { content: "envoi…"; display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* --- Bloc « données de transfert Outsiders » dans la fiche --- */
.op-bloc { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--accent-bord); border-radius: 10px; background: var(--accent-pale); }
.op-entete { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.op-entete:empty { display: none; }
.op-titre { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #4338ca; font-weight: 600; }
.op-regime { font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.op-marge    { background: #e0e7ff; color: #3730a3; }
.op-standard { background: #dcfce7; color: #166534; }
.op-vide     { background: #f1f5f9; color: #64748b; }
.op-champs { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 12px; }
.op-champs span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.op-champs strong { font-size: 14px; }
.op-bloc .totaux { margin: 0; gap: 10px; }
.op-bloc .totaux div { min-width: 120px; padding: 9px 14px; }
.op-bloc .totaux .op-fort { background: #eef2ff; border-color: var(--accent-bord); }
.op-detail { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

/* Ligne financière d'un lot */
.lot-op { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 8px 0 12px;
    padding: 8px 12px; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; color: var(--muted); }
.lot-op strong { color: var(--ink); font-weight: 600; }
.lot-op-eq { color: #94a3b8; font-weight: 700; }
.lot-op-sep { color: #cbd5e1; }
.lot-op-regime { margin-left: auto; padding: 1px 9px; border-radius: 999px; background: #e0e7ff; color: #3730a3; font-weight: 600; }

/* --- Formulaire d'édition de la vente (toujours ouvert) --- */
.edit-achat { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--accent-bord); border-radius: 10px; background: var(--accent-pale); }
.edit-achat > h4 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #4338ca; }
.edit-achat fieldset { border: none; border-top: 1px solid #dbe1ff; margin: 0 0 12px; padding: 10px 0 0; }
.edit-achat fieldset:first-of-type { border-top: none; padding-top: 0; }
.edit-achat legend { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0 6px 0 0; }
.ef-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ef-grille label, .edit-achat textarea { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ef-grille .ef-large { grid-column: 1 / -1; }
.ef-grille input, .ef-grille select, .edit-achat textarea {
    display: block; width: 100%; margin-top: 3px; padding: 7px 9px; font-size: 14px;
    text-transform: none; letter-spacing: normal; color: var(--ink);
    border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.ef-grille input:focus, .ef-grille select:focus, .edit-achat textarea:focus { outline: 2px solid var(--accent-bord); outline-offset: -1px; }
.ef-fort input { background: #eef2ff; border-color: var(--accent-bord); font-weight: 600; }
.ef-aide { margin: 8px 0 0; font-size: 12px; color: var(--muted); font-style: italic; }
.edit-achat .edit-actions { display: flex; align-items: center; gap: 12px; }
.edit-achat button { padding: 8px 18px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }
.edit-achat button:hover { opacity: .92; }
.edit-msg { font-size: 13px; color: var(--muted); }
.ef-grille .ef-large-2 { grid-column: span 2; }
.ef-info { color: #92400e; font-weight: 600; font-style: normal; }

/* ============================ Contrôle TVA des factures (controle.php) ============================ */
/* Barre unique de l'écran de contrôle : fixe en haut, elle remplace la
   topbar générale — l'outil s'ouvre dans sa propre page, plein écran. */
.controle-tabs {
    display: flex; gap: 4px; align-items: center; padding: 6px 24px 0;
    background: var(--card); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 60;
}
.controle-marque { font-weight: 700; font-size: 15px; margin-right: 18px; padding-bottom: 6px; }
.controle-tabs a { padding: 10px 16px; color: var(--muted); font-size: 14px; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px; }
.controle-tabs a:hover { color: var(--ink); text-decoration: none; }
.controle-tabs a.actif { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.badge-count { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #eef2ff; color: #3730a3; }

/* Champ qui ne dit plus ce que l'IA avait lu : la correction humaine se voit. */
.controle-form .ia-diff { border-color: #f0c36d; background: #fff7e6; }

/* Fournisseur lu par l'IA sur une pièce qui en a déjà un : proposition
   affichée, jamais appliquée. */
.btn-suppr { border-color: #fecaca; color: #991b1b; background: #fef2f2; }
.btn-suppr:hover { background: #fee2e2; }

.fourn-ia-lu { margin: 6px 0 0; font-size: 12px; color: #b45309; }

.rap-paire {
    border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 0 0 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.rp-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.rap-paire .rp-lier { align-self: flex-start; margin-top: 4px; }

.ctrl-doublon {
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
    padding: 10px 14px; margin: 0 0 16px; font-size: 13px; color: #7f1d1d;
}
.ctrl-doublon strong { display: block; margin-bottom: 6px; }
.cd-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 0; }
.cd-ligne code { background: #fff; padding: 1px 6px; border-radius: 4px; }
.cd-motif { color: #b91c1c; font-style: italic; }
.ctrl-doublon a { color: #991b1b; text-decoration: underline; }

.ctrl-ia-reglage {
    background: none; border: none; padding: 0 2px; cursor: pointer;
    font-size: 12px; color: var(--muted); text-decoration: underline;
}
.ctrl-ia-reglage:hover { color: var(--ink); }
.ctrl-ia-off { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

.controle-plats { display: flex; gap: 8px; align-items: center; margin: 0 0 6px auto; padding-left: 24px; }
.controle-plats label { font-size: 13px; color: var(--muted); }
/* Champ de compte comptable cherchable : on tape un mot, la liste se réduit.
   Il occupe deux colonnes : « 606300 — Fournitures d'entretien et de petit
   équipement » ne tient pas dans une. */
.controle-form label:has(.cpt-combo),
.ff-grille label:has(.cpt-combo) { grid-column: span 2; }
.cpt-combo { position: relative; display: block; }
.cpt-combo .cpt-champ { width: 100%; }
.cpt-liste {
    position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px;
    max-height: 280px; overflow-y: auto; list-style: none;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.cpt-item {
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
    padding: 5px 8px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.cpt-item.cpt-actif, .cpt-item:hover { background: #eef2ff; }
.cpt-famille { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cpt-vide { padding: 6px 8px; font-size: 13px; color: var(--muted); }

.cp-groupe { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.cp-groupe input { margin: 0; }
.cp-select {
    width: auto; min-width: 190px; padding: 4px 10px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink);
}

.controle-vide { max-width: 600px; margin: 60px auto; text-align: center; color: var(--muted); font-size: 16px; }

/* Pleine largeur : l'écran de contrôle utilise tout le poste de travail.
   align-items par défaut (stretch) : la cellule de l'aperçu prend toute la
   hauteur de la rangée, sans quoi le position:sticky n'a aucune course. */
.controle-pane { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 24px 100px; }
.controle-preview {
    /* Sous la barre de puces fixe. position:fixed calée sur la colonne par le
       JS : le sticky dérivait au défilement (même constat qu'outsiders). */
    position: fixed; top: 56px; display: flex; flex-direction: column;
    height: calc(100vh - 70px);
    background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.controle-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.controle-preview-head strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctrl-ref-ligne { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
.ctrl-ref-ligne code { font-size: 15px; font-weight: 600; }
.controle-preview-frame { flex: 1 1 auto; width: 100%; border: 0; background: #f4f5f7; }

.controle-form-col { min-width: 0; }
.controle-contexte { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.controle-contexte h2 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; font-size: 18px; }
/* Formulaire en deux colonnes : montants + date à gauche, tiers à droite. */
.controle-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start;
                 background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.controle-form .ef-grille { grid-template-columns: 1fr; }
.ctrl-bloc { border-left: 1px solid var(--border); padding-left: 20px; }

/* Le tiers de la pièce (fournisseur ou client) : premier geste du contrôle,
   dans son propre bloc pleine largeur au-dessus de Montants | Pièce. */
.controle-form .ctrl-tiers {
    grid-column: 1 / -1; border-bottom: 1px solid var(--border);
    padding-bottom: 16px; margin-bottom: 16px;
}
.controle-form .ctrl-tiers .ef-grille { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Lots et frais du contrôle : le formulaire est une grille à deux colonnes
   (Montants | Pièce) — le détail de la facture, lui, occupe toute la largeur,
   sous un simple filet, avec son total à droite du titre. */
.ctrl-detail { grid-column: 1 / -1; border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px; }
.ctrl-detail .ctrl-titre { display: flex; align-items: baseline; gap: 10px; }
.ctrl-detail .ctrl-somme { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent-fonce); font-variant-numeric: tabular-nums; }
.ctrl-detail .fi-ajout { padding: 5px 12px; font-size: 13px; }
.ctrl-titre { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ctrl-sep { border-top: 1px solid var(--border); margin: 16px 0 14px; }
.ctrl-erreur { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-weight: 600; font-size: 13px; padding: 10px 14px; border-radius: 8px; margin: 0 0 14px; }
.ctrl-reglements { margin-top: 16px; }
.ctrl-reglements .table td { padding: 7px 10px; font-size: 13px; }
.controle-form .ctrl-check { grid-column: 1 / -1; }
.controle-form .ef-grille input:disabled { background: #f4f5f7; color: var(--muted); }
.ctrl-check { min-height: 18px; margin: 10px 2px 0; font-size: 13px; color: #b45309; font-weight: 600; }

.controle-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 14px 24px; background: var(--card); border-top: 1px solid var(--border);
    box-shadow: 0 -2px 8px rgba(0,0,0,.05);
}
.controle-compteur { font-size: 13px; color: var(--muted); min-width: 60px; text-align: center; }
.btn-outline { display: inline-block; padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--ink); background: #fff; cursor: pointer; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-valider { padding: 8px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; color: #fff; background: #16a34a; cursor: pointer; }
.btn-valider:hover { opacity: .92; }

/* Picto de contrôle, affiché après le nom de fichier partout où une facture apparaît. */
.facture-ok { color: #16a34a; font-weight: 700; margin-left: 4px; }

@media (max-width: 960px) {
    .controle-pane { grid-template-columns: 1fr; padding-bottom: 140px; }
    .controle-preview { position: static !important; width: 100% !important; height: 60vh !important; left: 0 !important; top: 0 !important; }
    .controle-actions { flex-wrap: wrap; }
}

/* ============================ Statistiques (stats.php) ============================ */
.stats-head { margin: 18px 0 4px; }
.stats-head h2 { margin: 0; font-size: 20px; }
.stats-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.kpi-band { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 14px 0 4px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.kpi-val { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.kpi-lab { font-size: 12px; color: var(--muted); }
.kpi-fort { background: var(--ink); border-color: var(--ink); }
.kpi-fort .kpi-val, .kpi-fort .kpi-lab { color: #fff; }
.kpi-frais .kpi-val { color: #b45309; }
@media (max-width: 1000px) { .kpi-band { grid-template-columns: repeat(3, 1fr); } }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.stats-grid .card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; min-width: 0; }
.stats-grid .card.wide { grid-column: 1 / -1; }
.stats-grid .card h2 { margin: 0 0 2px; font-size: 15px; }
.card-sub { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr; } }

.legende { display: flex; gap: 16px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.legende .lg { display: inline-flex; align-items: center; gap: 6px; }
.lg-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg-sw.lg-line { height: 3px; border-radius: 2px; background: #f59e0b; }

.chart { display: block; width: 100%; height: auto; font-family: inherit; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 11px; }
.chart .ax-r { text-anchor: end; }
.chart .ax-l { text-anchor: start; }
.chart .ax-x { text-anchor: middle; }
.chart .bar-m { fill: var(--accent); }
.chart .bar-m:hover { fill: var(--accent-fonce); }
.chart .line-cum { fill: none; stroke: #f59e0b; stroke-width: 2; }
.chart .dot-cum { fill: #f59e0b; }
.chart .seg { stroke: #fff; stroke-width: 1.5; }
.chart .seg:hover { opacity: .85; }
.chart .seg-m { fill: var(--ink); }
.chart .seg-f { fill: #f59e0b; }
.chart .leg { fill: var(--ink); font-size: 12px; }
.chart .donut-c1 { text-anchor: middle; font-size: 20px; font-weight: 700; fill: var(--ink); }
.chart .donut-c2 { text-anchor: middle; font-size: 11px; fill: var(--muted); }
.chart .hb-lab { text-anchor: end; fill: var(--ink); font-size: 12px; }
.chart .hb-val { text-anchor: start; fill: var(--muted); font-size: 11px; }
.chart-hbar rect:hover { opacity: .85; }
.chart-vide { color: var(--muted); font-size: 13px; padding: 20px 0; }

.vv { width: 100%; border-collapse: collapse; font-size: 13px; }
.vv th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.vv td { padding: 8px 6px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.vv tr:last-child td { border-bottom: none; }
.vv-plat { white-space: nowrap; font-weight: 600; }
.vv .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.vv-bar { position: relative; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; margin-bottom: 3px; }
.vv-bar i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; display: block; }
.vv-num { font-size: 11px; color: var(--muted); }

.todo-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.todo-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; background: var(--bg); transition: box-shadow .12s, transform .12s; }
.todo-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); transform: translateY(-1px); }
.todo-nb { font-size: 26px; font-weight: 700; color: var(--ink); }
.todo-lab { font-size: 12px; color: var(--muted); }
.todo-ok .todo-nb { color: #16a34a; }
@media (max-width: 700px) { .todo-cards { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════════════════════════════
   MODULE FINANCE
   ═══════════════════════════════════════════════════════════ */

/* --- Sous-navigation de la section --- */
.sous-nav {
    display: flex; gap: 4px; flex-wrap: wrap;
    padding: 0 18px; background: #fafbfc;   /* legerement grise : distingue le niveau 2 du niveau 1 */
    border-bottom: 1px solid var(--border);
}
.sous-nav a {
    padding: 11px 14px; font-size: 14px; color: var(--muted);
    border-bottom: 2px solid transparent; text-decoration: none;
}
.sous-nav a:hover { color: var(--ink); text-decoration: none; }
.sous-nav a.actif { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.sn-badge {
    display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 3px;
    background: #dc3545; color: #fff; border-radius: 9px;
    font-size: 11px; font-weight: 700; text-align: center;
}

/* --- Entête de page + sélecteur d'exercice --- */
.fin-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 18px; }
.fin-entete h2 { margin: 0; font-size: 20px; }
.fin-annee select, .fin-form select, .fin-form input, .fin-form textarea {
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
    font: inherit; background: var(--card); color: var(--ink);
}

/* --- Cartes de chiffres clés --- */
.fin-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; }
.fin-carte {
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.fin-carte.fc-alerte { border-color: #f5c2c7; background: #fff8f8; }
.fc-label  { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.fc-valeur { font-size: 22px; font-weight: 700; }
.fc-detail { font-size: 12px; color: var(--muted); }
td .fc-detail { display: block; }
.fc-alerte-txt { font-size: 12px; font-weight: 600; color: #92400e; }

/* --- Guide de démarrage --- */
.fin-vide-guide {
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
    padding: 14px 18px; margin-bottom: 22px;
}
.fin-vide-guide h3 { margin: 0 0 8px; font-size: 15px; }
.fin-vide-guide ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; }

/* --- Blocs en colonnes --- */
.fin-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; align-items: start; }
.fin-bloc h3 {
    margin: 0 0 10px; font-size: 15px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fin-lien-plus { font-size: 13px; font-weight: 400; }
.fin-pied { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* --- Répartition par catégorie --- */
.fin-table-cat td { padding: 8px 12px; font-size: 14px; }
.fin-table-cat .fc-nom { white-space: nowrap; }
.fin-table-cat .fc-n { color: var(--muted); font-size: 12px; margin-left: 6px; }
.fin-table-cat .fc-barre { width: 45%; }
.fin-table-cat .fc-barre span { display: block; height: 8px; border-radius: 4px; min-width: 2px; }
.pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

/* --- Message de confirmation --- */
.fin-flash {
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
    padding: 10px 14px; border-radius: 8px; font-size: 14px; margin: 0 0 16px;
}

/* --- Panneau de saisie --- */
.fin-panneau {
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    padding: 18px 20px; margin-bottom: 22px;
}
.fin-panneau h3 { margin: 0 0 14px; font-size: 16px; }
.fin-panneau h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }

.ff-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 16px; }
.ff-grille label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.ff-grille label.ff-large { grid-column: 1 / -1; }
.ff-grille input, .ff-grille select, .ff-grille textarea {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    font: inherit; font-size: 14px; color: var(--ink); background: var(--card);
}
.ff-grille input:focus, .ff-grille select:focus, .ff-grille textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.ff-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.ff-actions .btn { border: none; cursor: pointer; padding: 9px 18px; font-size: 14px; }
.ff-annuler { font-size: 13px; color: var(--muted); }
.ff-supprimer {
    margin-left: auto; border: 1px solid #fecaca; background: #fef2f2; color: #991b1b;
    padding: 8px 14px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.ff-supprimer:hover { background: #fee2e2; }
.ff-justificatifs { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.ff-justificatifs .facture-ajout { display: inline; margin: 0; }
.ff-manque { opacity: .75; }

/* --- Barre de filtres --- */
.fin-filtres { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.fin-filtres input[type="search"] { flex: 1 1 180px; min-width: 120px; }
.fin-filtres select { max-width: 170px; }
.fin-filtres input[type="date"] { width: 132px; flex: 0 0 auto; }
.fin-filtres .ff-check { white-space: nowrap; }

/* Régime de TVA d'un lot : ambre pour la marge (rien à récupérer),
   bleu pour la TVA classique (récupérable). Un liseré porte la couleur,
   sans fond : la saisie reste sur le blanc du formulaire. */
.fi-ligne-saisie.rg-margin, .fi-ligne-saisie.rg-standard {
    border-left: 4px solid transparent; padding-left: 8px; border-radius: 6px;
}
.fi-ligne-saisie.rg-margin   { border-left-color: #d97706; }
.fi-ligne-saisie.rg-standard { border-left-color: #2563eb; }
/* Le régime lui-même se colore : c'est lui qu'on lit et qu'on change. */
.fi-ligne-saisie.rg-margin   [name="lot_vat_regime[]"] { color: #92400e; font-weight: 600; }
.fi-ligne-saisie.rg-standard [name="lot_vat_regime[]"] { color: #1d4ed8; font-weight: 600; }

/* Détail d'un lot en modale (Inventaire). */
.slf-desc { margin: 4px 0 12px; font-size: 14px; }
.slf-galerie { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.slf-galerie img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block; }
.slf-chiffres {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
    padding: 12px; background: var(--bg); border-radius: 10px; margin-bottom: 4px;
}
.slf-chiffres .fc-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.slf-chiffres strong { font-size: 16px; }

/* Vignettes de l'écran Stock : celles de Mes achats, en petit. */
.stk-vignette { width: 48px; }
.stk-vignette img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }

/* État de stock d'un lot, vu depuis Mes achats. */
.lot-vendu {
    display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 10px;
    font-size: 12px; font-weight: 600; text-decoration: none;
    background: #dcfce7; color: #166534;
}
.lot-vendu:hover { filter: brightness(.95); }
.lot-vendu-partiel { background: #fef3c7; color: #92400e; }
.lot-sorti { background: #e5e7eb; color: #374151; }
.lots-vendus { font-weight: 600; color: #92400e; }
.lots-tous-vendus { color: #166534; }

/* Un lot vendu, raconté : vignette, achat d'origine, coût sorti. */
.vl-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
    margin-bottom: 6px; background: var(--card);
}
.vl-photo { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.vl-photo-vide { background: var(--bg); display: block; }
.vl-infos { flex: 1 1 auto; min-width: 0; }
.vl-titre { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-achat { font-size: 12px; color: var(--muted); }
.vl-achat a { font-weight: 600; }
.vl-cout { text-align: right; white-space: nowrap; }
.vl-cout .fc-detail { display: block; font-size: 11px; }

/* Clôture du stock d'une vente. */
.vl-close { padding: 8px 10px; background: #dcfce7; color: #166534; border-radius: 8px; font-size: 13px; font-weight: 600; }
.vl-close .lien-bouton { margin-left: 8px; font-weight: 400; }
.stk-etat { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 10px; white-space: nowrap; cursor: default; }
.stk-deduit  { background: #dcfce7; color: #166534; }
.stk-encours { background: #fef3c7; color: #92400e; }
.stk-rien    { background: #f1f5f9; color: #64748b; font-weight: 400; }

/* Lots vendus d'une vente : rattachement au stock. */
.vl-zone { display: flex; flex-direction: column; gap: 8px; }
.vl-marge {
    display: flex; gap: 24px; font-size: 13px; padding: 10px 14px;
    background: var(--accent-pale, #f6f2ec); border-radius: 10px;
}
.vl-marge .fc-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.vl-marge strong { font-size: 15px; }
.vl-marge-valeur strong { color: #166534; }
.vl-ajout { position: relative; }
.vl-cherche { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.vl-resultats {
    position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12); max-height: 260px; overflow-y: auto;
    display: flex; flex-direction: column;
}
.vl-lot {
    display: flex; align-items: center; gap: 10px; width: 100%;
    text-align: left; background: none; border: none; border-bottom: 1px solid var(--border);
    padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.vl-lot .vl-infos { display: flex; flex-direction: column; }
.vl-lot .vl-titre { font-size: 13px; }
.vl-lot:hover { background: var(--bg); }
.vl-lot:last-child { border-bottom: none; }

/* Filtre fournisseurs : un menu compact, cherchable, à choix multiples. */
.ffm { position: relative; flex: 0 0 auto; }
.ffm .dd-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    width: 230px; cursor: pointer; list-style: none;
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--card); font-size: 14px; white-space: nowrap; user-select: none;
}
.ffm .dd-btn::-webkit-details-marker { display: none; }
.ffm[open] .dd-btn { border-color: var(--accent); }
.ffm .dd-count {
    background: var(--accent); color: #fff; border-radius: 10px;
    font-size: 11px; font-weight: 700; padding: 1px 7px;
}
.ffm-panel {
    position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
    width: 300px; max-height: 340px; overflow: hidden;
    display: flex; flex-direction: column; gap: 6px;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.ffm-panel .ffm-cherche { flex: 0 0 auto; width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.ffm-liste { overflow-y: auto; display: flex; flex-direction: column; }
.ffm-liste .dd-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.ffm-liste .dd-opt:hover { background: var(--bg); }
.fin-filtres input, .fin-filtres select {
    padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px;
    font: inherit; font-size: 14px; background: var(--card); color: var(--ink);
}
.fin-filtres .btn { border: none; cursor: pointer; padding: 9px 16px; }
.ff-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.filtre-reset { font-size: 13px; color: var(--muted); }

/* --- Message d'erreur --- */
.fin-erreur {
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    padding: 10px 14px; border-radius: 8px; font-size: 14px; margin: 0 0 16px;
}

/* --- Banque : comptes, imports, mouvements --- */
.fin-colonnes-banque { margin-bottom: 26px; }
.fin-table-comptes td, .fin-table-imports td { padding: 9px 12px; font-size: 14px; vertical-align: top; }
.fin-table-comptes { margin-bottom: 16px; }
.fin-table-imports { margin-top: 6px; }
.tx-libelle { max-width: 420px; }
.tx-debit  { color: #b91c1c; }
.tx-credit { color: #047857; }
.tx-ignoree td { opacity: .55; }

/* ─── Espace fournisseurs ─────────────────────────────────── */
.four-outils { display: flex; align-items: center; gap: 12px; }
.four-recherche { display: flex; align-items: center; gap: 6px; }
.four-recherche input[type=search] {
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
    font: inherit; min-width: 260px;
}
.four-nom { font-weight: 600; }
.four-nom + .fc-detail { margin-left: 6px; }
.four-compte { font-size: 13px; font-weight: 400; margin-left: 8px; color: var(--muted); }
.four-sous-titre { margin: 20px 0 6px; font-size: 14px; }
/* La fiche pose tout dans des blocs : rien ne flotte a meme le fond. */
.four-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; align-items: start; }
.four-colonne { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.four-bloc {
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 18px; margin-bottom: 18px; min-width: 0;
}
.four-colonne .four-bloc { margin-bottom: 0; }
.four-bloc h3 {
    margin: 0 0 12px; font-size: 15px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.four-bloc .table { margin: 0; }
.four-defile { max-height: 420px; overflow: auto; }
.four-fiche { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.four-fiche dt { color: var(--muted); }
.four-fiche dd { margin: 0; }
.ref-edit {
    background: none; border: 1px solid transparent; border-radius: 6px;
    cursor: pointer; font-size: 15px; line-height: 1; padding: 4px 6px; color: var(--muted);
}
.ref-edit:hover { border-color: var(--border); color: var(--ink); }
.ff-grille label.ff-case { flex-direction: row; align-items: center; gap: 8px; }
.ff-grille .ff-case input[type=checkbox] { width: auto; flex: 0 0 auto; }
.ff-grille input:disabled { background: var(--bg); color: var(--muted); }
tr:target { animation: rc-flash 2s ease-out 1; }
@keyframes rc-flash { from { background: #fef3c7; } to { background: transparent; } }
.rc-picto { text-decoration: none; margin-left: 4px; font-size: 13px; }
.rc-picto:hover { filter: brightness(0.8); }
.rap-montant-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rc-badge {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
    background: #fef3c7; color: #92400e; text-decoration: none;
}
.rc-badge:hover { filter: brightness(0.95); }

/* --- Onglets de vue du rapprochement --- */
.fin-vues { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.fin-vues a {
    padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--card); color: var(--muted); font-size: 14px; text-decoration: none;
}
.fin-vues a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.fin-vues a.actif { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.fin-vues a.actif .dd-badge { background: rgba(255,255,255,.25); color: #fff; }

/* --- Liste de rapprochement ---
   .rap-liste porte les colonnes ; chaque .rap-ligne les reprend en subgrid
   pour que montant, méta et action restent alignés d'une carte à l'autre. */
.rap-liste {
    display: grid; grid-template-columns: auto minmax(200px, 1fr) auto minmax(320px, 1.2fr) auto;
    gap: 12px 18px;
}
.rap-ligne {
    display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
    align-items: center;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
    transition: opacity .2s, transform .2s;
}
.rap-ligne.rap-fini { opacity: 0; transform: translateX(20px); }
.rap-date-col { font-size: 16px; font-weight: 700; white-space: nowrap; text-align: left; }
.rap-haut { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rap-montant { font-size: 17px; font-weight: 700; white-space: nowrap; }
.rap-libelle { margin: 8px 0 4px; font-size: 14px; line-height: 1.4; word-break: break-word; }
.rap-meta-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; text-align: right; }
.rap-meta-col .rap-compte { margin-left: 0; }

.rap-action { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.rap-lien {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 11px; border-radius: 8px; font-size: 13.5px;
}
.rap-lien code { font-size: 12px; }
/* Contenu sur deux lignes : le bouton reste hors du flux qui replie, donc
   fixé à droite quel que soit le nombre de mots avant lui. */
.rap-lien-corps { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.rap-lien-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rap-lien-actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
.rap-valide  { background: #ecfdf5; border: 1px solid #a7f3d0; }
.rap-propose { background: #fffbeb; border: 1px solid #fde68a; }
.rap-check { font-size: 14px; }
.rap-confiance { font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.rc-haute { background: #d1fae5; color: #065f46; }
.rc-basse { background: #fee2e2; color: #991b1b; }

.rap-btn {
    border: 1px solid var(--border); background: var(--card); color: var(--ink);
    padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.rap-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rap-btn:disabled { opacity: .5; cursor: default; }
.rap-btn-ok { margin-left: auto; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.rap-btn-ok:hover:not(:disabled) { color: #fff; opacity: .92; }
.rap-btn-del { margin-left: auto; }

.rap-outils { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: relative; }
.rap-recherche {
    flex: 1 1 200px; padding: 8px 11px; border: 1px solid var(--border);
    border-radius: 8px; font: inherit; font-size: 13.5px;
}
.rap-recherche:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.rap-resultats {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; z-index: 30;
    display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    padding: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
/* Une règle "display: flex" en feuille auteur l'emporte sur le "display:
   none" de l'UA pour [hidden] (même origine décisive avant la spécificité) :
   sans ce rappel, le panneau reste affiché tant qu'il contient du contenu. */
.rap-resultats[hidden] { display: none; }
.rap-res {
    display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px;
    background: var(--card); cursor: pointer; font: inherit; font-size: 13px;
}
.rap-res:hover { border-color: var(--accent); background: var(--accent-pale); }
.rap-res-exact { border-color: #a7f3d0; background: #f0fdf4; }
.rap-res-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rap-res-montant { font-weight: 600; white-space: nowrap; }
.rap-vide { margin: 4px 0; font-size: 13px; color: var(--muted); font-style: italic; }

.rap-jumelle-wrap { position: relative; }
.rap-jumelle-recherche {
    position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 30; width: 300px;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.rap-jumelle-champ {
    width: 100%; padding: 7px 10px; border: 1px solid var(--border);
    border-radius: 7px; font: inherit; font-size: 13px; box-sizing: border-box;
}
.rap-jumelle-champ:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.rap-jumelle-resultats { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin-top: 6px; }
.rap-jumelle-resultats[hidden] { display: none; }

@media (max-width: 860px) {
    .rap-liste { grid-template-columns: 1fr; }
}

/* --- Référentiels : édition en ligne --- */
.rc-edit { display: inline-block; }
.rc-edit summary { list-style: none; cursor: pointer; }
.rc-edit summary::-webkit-details-marker { display: none; }
.rc-edit[open] summary { margin-bottom: 8px; }
.rc-edit .fin-form { min-width: 420px; max-width: 620px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }

.ref-inline { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
/* Champs éditables des lignes du référentiel fournisseurs (Entrée = enregistrer). */
.ref-champ { width: 100%; min-width: 150px; padding: 4px 7px; border: 1px solid transparent;
             border-radius: 6px; font: inherit; font-size: 13px; background: transparent; }
.ref-champ:hover, .ref-champ:focus { border-color: var(--border); background: var(--card); }
.ref-champ-court { min-width: 110px; }
.ref-inline input[type="text"] {
    width: 84px; padding: 4px 7px; border: 1px solid var(--border);
    border-radius: 6px; font: inherit; font-size: 13px;
}
.ref-inline select {
    padding: 4px 7px; border: 1px solid var(--border); border-radius: 6px;
    font: inherit; font-size: 13px; background: var(--card); max-width: 190px;
}
.ref-inline button {
    border: 1px solid var(--border); background: var(--card); color: var(--muted);
    border-radius: 6px; padding: 3px 8px; font-size: 13px; cursor: pointer;
}
.ref-inline button:hover { border-color: var(--accent); color: var(--accent); }
.ref-del:hover { border-color: #fecaca !important; background: #fef2f2; color: #991b1b !important; }

/* --- Export : contenu de l'archive --- */
.fin-liste-contenu { margin: 6px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.9; color: var(--muted); }
.fin-liste-contenu code { font-size: 12px; }
.rap-transfere { background: #eef2ff; border: 1px solid var(--accent-bord); }
.rap-annulee { background: #ecfdf5; border: 1px solid #a7f3d0; }
.rap-transfert { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; background: var(--card); }
.rap-transfert:hover { border-color: var(--accent); }
.rap-imputer { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; background: var(--card); }
.rap-imputer:hover { border-color: var(--accent); }

/* --- Modale d'édition Finance --- */
#depense-modal .modal-dialog { max-width: 860px; width: 100%; }
#depense-modal .modal-body { max-height: 84vh; }
#depense-modal .fin-form { margin-top: 14px; }
.modal-annuler { border: none; background: none; cursor: pointer; font: inherit; }

/* --- Bloc TVA de la fiche achat --- */
.ef-sous-titre { margin: 20px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ef-aide { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* --- Accès au justificatif depuis le rapprochement --- */
.rap-pj {
    display: inline-flex; align-items: center; gap: 3px; text-decoration: none;
    padding: 2px 7px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--card); font-size: 13px; line-height: 1.4;
}
.rap-pj:hover { border-color: var(--accent); background: var(--accent-pale); text-decoration: none; }
.rap-pj-nb { font-size: 11px; font-weight: 700; color: var(--muted); }
.rap-sans-pj { font-size: 11.5px; color: #92400e; white-space: nowrap; }

/* --- Rapprochement : le tiers prime, le compte devient une mention --- */
.rap-tiers { font-size: 15px; font-weight: 700; line-height: 1.3; }
.rap-tiers-vide { font-weight: 500; color: var(--muted); font-style: italic; }
.rap-compte { margin-left: 8px; white-space: nowrap; }
.rap-compte .pastille { width: 7px; height: 7px; margin-right: 4px; }

/* --- Finance : achats sous l'angle du règlement --- */
.table-achats-fin td { vertical-align: top; }
.table-achats-fin .vendeur-nom { max-width: 210px; }
.fa-reglement { min-width: 330px; }
.fa-reglement .rap-lien { margin-bottom: 4px; font-size: 12.5px; padding: 6px 9px; }
.fa-tx { font-weight: 600; white-space: nowrap; }
.fa-recherche { position: relative; }
.fa-champ {
    width: 100%; padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 7px; font: inherit; font-size: 13px;
}
.fa-champ:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.fa-resultats { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; max-height: 220px; overflow-y: auto; }
.fa-resultats[hidden] { display: none; }
.fa-res-date { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* --- Pastille d'état de rapprochement en liste --- */
.rap-etat {
    display: inline-block; padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--card);
    font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.rap-etat:hover { border-color: var(--accent); color: var(--accent); }
.re-ok   { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.re-prop { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.re-todo { color: var(--muted); }

/* --- Modale de rapprochement --- */
#rappro-modal .modal-dialog { max-width: 760px; width: 100%; }
#rappro-modal .modal-body { max-height: 84vh; }
.rm-resume { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 10px 0 18px; font-size: 15px; }
.rm-corps h4 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.rm-corps h4:first-child { margin-top: 0; }
.rm-corps .rap-lien { margin-bottom: 6px; }
.rm-libelle { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-reste { margin: 8px 0 0; font-size: 13px; color: #92400e; }

/* --- Règlement hors banque depuis la modale --- */
.rm-aide { margin: -4px 0 8px; }
.rm-caisse { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rm-caisse .rm-compte {
    flex: 1 1 220px; padding: 7px 10px; border: 1px solid var(--border);
    border-radius: 7px; font: inherit; font-size: 13.5px; background: var(--card);
}
.rm-regler { margin-left: 0; }
.rap-btn-annul { border-color: var(--accent-bord); background: #eef2ff; color: #3730a3; }
.rap-btn-annul:hover:not(:disabled) { border-color: #6366f1; color: #3730a3; }
.re-part { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.rap-ecart { background: #f5f3ff; border: 1px solid #ddd6fe; }
.rm-ecart { margin-left: 8px; font-size: 12px; padding: 3px 9px; }
.ctrl-mois { display: inline-block; padding: 2px 8px; margin: 2px 4px 2px 0; border: 1px solid #fed7aa; background: #fff7ed; border-radius: 6px; font-size: 12.5px; white-space: nowrap; }
.ctrl-alerte td { background: #fef2f2; }
.ctrl-vide { color: #b45309; font-style: italic; }
.rm-piece { font-size: 12.5px; color: var(--muted); }

/* --- Colonne justificatif : cartouche cliquable vers la pièce --- */
.just-cell {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 10px; border: 1px solid var(--border); border-radius: 7px;
    background: var(--card); text-decoration: none; max-width: 190px;
}
.just-ok { color: var(--ink); }
.just-ok:hover { border-color: var(--accent); background: var(--accent-pale); text-decoration: none; }
.just-ko { background: #fffbeb; border-color: #fde68a; }
/* Contrôlée ou non : un caractère, pas une colonne de plus. */
.just-vu  { color: #059669; font-weight: 700; }

/* Le libellé d'une pièce peut être long : on le coupe, le survol le rend. */
.col-libelle { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.just-picto { font-size: 15px; line-height: 1; flex: none; }
/* Le numéro est une donnée à lire, pas une mention discrète : contraste plein. */
.just-num { font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.just-sans { font-size: 12.5px; color: #92400e; font-style: italic; white-space: nowrap; }
.edit-msg { font-size: 13px; color: var(--muted); }
.edit-ok { color: #065f46; }
.edit-ko { color: #991b1b; }
#achat-modal .modal-dialog { max-width: 820px; width: 100%; }
#achat-modal .modal-body { max-height: 84vh; }

/* --- Écart de date entre la pièce et le mouvement bancaire --- */
.rap-ecart-j {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.ec-proche { background: #ecfdf5; color: #065f46; }
.ec-moyen  { background: #fffbeb; color: #92400e; }
.ec-loin   { background: #fef2f2; color: #991b1b; }

/* --- Visionneuse de justificatif --- */
.piece-modal { z-index: 950; }
.piece-dialog {
    display: flex; flex-direction: column; width: min(1000px, 94vw); height: 92vh;
    background: var(--card); border-radius: 12px; overflow: hidden;
    box-shadow: 0 18px 60px rgba(15,18,25,.35); position: relative;
}
.piece-barre {
    display: flex; align-items: center; gap: 10px; flex: none;
    padding: 10px 14px; border-bottom: 1px solid var(--border); background: #fafafa;
}
.piece-titre { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piece-onglet, .piece-dl {
    flex: none; padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--card); color: var(--muted); font-size: 15px; line-height: 1.3; text-decoration: none;
}
.piece-onglet:hover, .piece-dl:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.piece-fermer { position: static; flex: none; }
.piece-cadre { flex: 1; width: 100%; border: 0; background: #f0f1f3; }
.ff-montant input { font-weight: 700; }
.lien-bouton { border: none; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.rm-caisse .rm-montant { width: 110px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 13.5px; text-align: right; }

/* Montant de la pièce, en regard du montant bancaire : vert s'il coïncide,
   ambre sinon, pour que l'écart se voie sans lire les chiffres. */
.rap-piece-montant { font-size: 16px; font-weight: 700; white-space: nowrap; padding: 1px 8px; border-radius: 6px; }
.rpm-ok    { color: #065f46; background: #d1fae5; }
.rpm-ecart { color: #92400e; background: #fde68a; }

/* Résultat de recherche déjà réglé : montré pour expliquer, mais inerte. */
.rap-res-soldee { opacity: .55; cursor: not-allowed; background: var(--card); }
.rap-res-soldee:hover { background: var(--card); }
.rap-res-etat { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: #e5e7eb; color: #4b5563; }
.rre-partiel { background: #fde68a; color: #92400e; }

/* ===================================================================
   Import IA des factures (finance/facture_import.php)
   =================================================================== */

/* Variante d'alerte du bandeau de confirmation, réutilisée par la relecture. */
.fin-flash-ko { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Le formulaire de relecture est dense : la modale gagne à respirer. */
.modal-large { width: 1040px; }

/* --- Zone de dépôt --- */
.fi-depot {
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    padding: 18px 20px 20px; margin-bottom: 22px;
}
.fi-nature { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fi-nature label {
    flex: 1 1 260px; display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
    border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
    font-size: 13px; color: var(--muted); background: #fff;
}
.fi-nature label:hover { border-color: var(--accent-bord); }
.fi-nature label:has(input:checked) { border-color: var(--accent); background: var(--accent-pale); }
.fi-nature strong { color: var(--ink); font-size: 14px; }
.fi-nature input { margin-top: 3px; accent-color: var(--accent); }

.fi-zone {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 30px 20px; margin-bottom: 14px; cursor: pointer; text-align: center;
    border: 2px dashed var(--border); border-radius: 10px; background: #fcfcfd;
    transition: border-color .15s, background .15s;
}
.fi-zone:hover { border-color: var(--accent-bord); }
.fi-zone-active { border-color: var(--accent); background: var(--accent-pale); }
.fi-zone-titre { font-size: 15px; font-weight: 600; }
.fi-choisis { font-size: 13px; color: var(--accent); margin-top: 6px; }

/* --- File d'attente --- */
.fi-table td { vertical-align: top; }
.fi-table .fi-erreur { margin: 4px 0 0; font-size: 12px; color: #991b1b; }
.fi-actions { white-space: nowrap; text-align: right; }
.fi-actions .btn, .fi-actions .btn-outline { padding: 5px 12px; font-size: 13px; }

.fi-etat {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.fi-attente { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.fi-encours { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.fi-pret    { background: var(--accent-pale); color: var(--accent-fonce); border-color: var(--accent-bord); }
.fi-ok      { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.fi-ko      { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* --- Formulaire de relecture --- */
.fi-rappel { margin: 2px 0 16px; }
.fi-bloc {
    border: 1px solid var(--border); border-radius: 10px; background: var(--card);
    padding: 14px 16px 16px; margin: 0 0 16px;
}
.fi-bloc legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.fi-bloc legend .fc-detail { font-weight: 400; }
.fi-lu { margin: 0 0 10px; }

.fi-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.fi-revue label { display: block; font-size: 12px; color: var(--muted); }
.fi-revue input[type=text], .fi-revue input[type=date],
.fi-revue input[type=number], .fi-revue select {
    width: 100%; margin-top: 3px; padding: 7px 9px; font-size: 14px; color: var(--ink);
    border: 1px solid var(--border); border-radius: 7px; background: #fff;
}
.fi-revue input:focus, .fi-revue select:focus { outline: 2px solid var(--accent-bord); outline-offset: -1px; }
.fi-case { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--ink); }
.fi-case input { accent-color: var(--accent); }

/* Lignes répétées (lots, frais) : la désignation prend la place restante.
   Stylées par elles-mêmes — elles vivent dans la relecture d'import ET dans
   le formulaire de contrôle, qui n'ont pas les mêmes classes de parent. */
.fi-lignes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.fi-ligne-saisie { display: flex; gap: 8px; align-items: center; }
.fi-ligne-saisie input, .fi-ligne-saisie select {
    flex: 1 1 auto; min-width: 0; margin: 0; padding: 7px 9px; font-size: 13px;
    color: var(--ink); border: 1px solid var(--border); border-radius: 7px; background: #fff;
    text-transform: none; letter-spacing: normal;
}
.fi-ligne-saisie input:focus, .fi-ligne-saisie select:focus { outline: 2px solid var(--accent-bord); outline-offset: -1px; }
.fi-ligne-saisie .fi-court { flex: 0 0 96px; }
.fi-ligne-saisie .fi-moyen { flex: 0 0 148px; }
.fi-ligne-saisie input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }

/* En-têtes de colonnes des blocs de lignes : mêmes largeurs que les champs. */
.fi-entetes {
    display: flex; gap: 8px; padding: 0 2px; margin-bottom: 2px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
}
.fi-entetes span { flex: 1 1 auto; }
.fi-entetes .fi-court { flex: 0 0 96px; }
.fi-entetes .fi-moyen { flex: 0 0 148px; }
.fi-entetes .fi-bout  { flex: 0 0 28px; }
.fi-entetes .num { text-align: right; }
.fi-taux-fige { opacity: .45; }

/* Combobox fournisseur : un champ qui filtre le référentiel à la frappe. */
.sa-combo { position: relative; display: block; }
/* Le champ de recherche du fournisseur : même habillage que les autres
   champs, sur toute la largeur du bloc. */
.sa-combo-champ {
    width: 100%; padding: 9px 12px; font-size: 14px; color: var(--ink);
    border: 1px solid var(--border); border-radius: 8px; background: #fff;
    text-transform: none; letter-spacing: normal;
}
.sa-combo-champ:focus { outline: 2px solid var(--accent-bord); outline-offset: -1px; }
.sa-combo-liste {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 80;
    max-height: 280px; overflow-y: auto; background: #fff;
    border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.sa-combo-opt { padding: 8px 12px; cursor: pointer; font-size: 14px; text-transform: none; letter-spacing: normal; color: var(--ink); }
.sa-combo-opt:hover { background: var(--accent-pale); }
.sa-combo-opt .fc-detail { margin-left: 6px; }
.sa-combo-vide { padding: 10px 12px; font-size: 13px; color: var(--muted); font-style: italic; text-transform: none; letter-spacing: normal; }

/* Carte de vérification du fournisseur retenu, et bloc de création complète. */
.ctrl-fourn-carte {
    margin: 10px 0 0; padding: 8px 12px; font-size: 13px; color: #065f46;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px;
    text-transform: none; letter-spacing: normal;
}
/* Zone fournisseur, sur le modèle outsiders. */
.fourn-reconnu {
    margin: 0 0 8px; padding: 7px 12px; font-size: 13px; color: #065f46;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px;
    text-transform: none; letter-spacing: normal;
}
.fourn-carte {
    position: relative; margin-top: 10px; padding: 10px 40px 10px 12px;
    border: 1px solid #a7f3d0; border-radius: 8px; background: rgba(16,185,129,.05);
    text-transform: none; letter-spacing: normal; font-size: 13px; color: var(--ink);
}
.fourn-carte-nom { font-size: 14px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.fourn-renommer {
    width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px;
    background: #fff; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1;
}
.fourn-renommer:hover { color: var(--ink); border-color: var(--muted); }
/* Modale d'édition de la fiche du fournisseur. */
.fourn-modal { position: fixed; inset: 0; z-index: 940; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fourn-modal-fond { position: absolute; inset: 0; background: rgba(15,18,25,.55); }
.fourn-modal-boite {
    position: relative; width: 640px; max-width: 100%; max-height: 90vh; overflow-y: auto;
    background: var(--card); border-radius: 12px; padding: 20px 24px;
    box-shadow: 0 20px 70px rgba(0,0,0,.35);
    text-transform: none; letter-spacing: normal;
}
.fourn-modal-boite h3 { margin: 0 0 14px; font-size: 16px; }
.fourn-modal-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.fourn-modal-grille .fm-large { grid-column: 1 / -1; }
.fourn-modal-grille label { display: block; font-size: 12px; color: var(--muted); }
.fourn-modal-grille input {
    width: 100%; margin-top: 3px; padding: 8px 10px; font-size: 14px; color: var(--ink);
    border: 1px solid var(--border); border-radius: 7px; background: #fff;
}
.fourn-modal-grille input:focus { outline: 2px solid var(--accent-bord); outline-offset: -1px; }
.fourn-modal-boite > .fc-detail { margin: 12px 0 0; }
.fourn-modal-pied { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.fourn-modal-fermer {
    position: absolute; top: 12px; right: 14px; width: 30px; height: 30px;
    border: none; border-radius: 50%; background: rgba(0,0,0,.06);
    font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer;
}
.fourn-modal-fermer:hover { background: rgba(0,0,0,.12); }
.fourn-attente { color: #b45309; font-weight: 600; }
.fourn-enregistre { color: #065f46; font-weight: 600; }

/* Lot marqué pour suppression : grisé, barré de rouge — réversible d'un
   clic tant que la pièce n'est pas enregistrée. */
.fi-ligne-saisie.fi-supprime { position: relative; opacity: .45; }
.fi-ligne-saisie.fi-supprime::after {
    content: ""; position: absolute; left: 0; right: 36px; top: 50%;
    height: 1px; background: #dc2626; pointer-events: none;
}
.fi-ligne-saisie.fi-supprime .fi-del { border-color: #fecaca; color: #991b1b; background: #fef2f2; }

/* Champ proposé par la lecture IA (vide au référentiel) : à vérifier. */
.fourn-modal-grille input.fm-ia { background: #fff7e6; border-color: #f0c36d; }
.fm-ia-note { margin: -6px 0 12px; color: #b45309; }
.fm-ia-carre {
    display: inline-block; width: 10px; height: 10px; border-radius: 3px;
    background: #fff7e6; border: 1px solid #f0c36d; vertical-align: baseline;
}
.fourn-carte-infos { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); }
.fourn-carte-infos.fc-vide { font-style: italic; }
.fourn-deselect {
    position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
    border: 1px solid var(--border); border-radius: 50%; background: #fff;
    color: var(--muted); cursor: pointer; line-height: 1;
}
.fourn-deselect:hover { border-color: #fecaca; color: #991b1b; }
.fourn-completer { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #a7f3d0;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fourn-completer .btn { padding: 4px 12px; font-size: 13px; }
.fourn-nouveau { margin-top: 10px; padding: 12px; border: 1px dashed var(--accent-bord); border-radius: 8px; background: var(--accent-pale); }
.fourn-nouveau-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.fourn-nouveau-tete .fourn-vider { margin-left: auto; padding: 4px 12px; font-size: 12px; }

/* Champs dérivés du détail : lisibles, non éditables. */
.controle-form input[readonly] { background: #f4f5f7; color: var(--muted); cursor: default; }

/* Variante neutre : la fiche du référentiel ne porte que le nom. */
.ctrl-fourn-carte-vide { background: #f8f9fb; border-color: var(--border); color: var(--muted); }
.ctrl-fourn-nouveau { margin-top: 10px; padding: 12px; border: 1px dashed var(--accent-bord); border-radius: 8px; background: var(--accent-pale); }
.ctrl-fourn-grille { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }

/* Rapprochement bancaire : liens en place et candidats à cocher. */
.ctrl-banque { display: flex; flex-direction: column; gap: 6px; }
.ctrl-banque-ligne {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: 8px; background: #fff;
    font-size: 13px; cursor: pointer; text-transform: none; letter-spacing: normal; color: var(--ink);
}
.ctrl-banque-ligne:hover { border-color: var(--accent-bord); }
.ctrl-banque-ligne:has(input:checked) { border-color: var(--accent); background: var(--accent-pale); }
.ctrl-banque-fait { cursor: default; background: #f8fffb; border-color: #a7f3d0; }
.ctrl-banque-ligne input { accent-color: var(--accent); }
.ctrl-banque-ligne .cb-date { flex: 0 0 130px; }
.ctrl-banque-ligne .cb-libelle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctrl-banque-ligne .cb-compte { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; color: var(--muted); }
.ctrl-banque-ligne .cb-montant { flex: 0 0 90px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Barre des totaux : pièce vs formulaire, recalculée à chaque frappe. */
.ctrl-totaux {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 18px; margin-top: 14px;
    padding: 10px 2px 10px 16px; background: var(--card); border: 1px solid var(--border);
    border-radius: 10px;
}
.ctrl-totaux .ct-tampon { flex: 1 1 auto; }
.ctrl-totaux .ct-col { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ctrl-totaux .ct-col strong { font-size: 17px; letter-spacing: normal; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.ctrl-totaux .ct-fleche { font-size: 20px; color: var(--muted); }
.ctrl-totaux .ct-ecart { font-size: 14px; font-weight: 600; }
.ctrl-totaux.ct-ok { border-color: #6ee7b7; background: #ecfdf5; }
.ctrl-totaux.ct-ok .ct-fleche, .ctrl-totaux.ct-ok .ct-col strong { color: #065f46; }
.ctrl-totaux.ct-ok .ct-col { color: #047857; }
.ctrl-totaux.ct-ko { border-color: #fca5a5; background: #fef2f2; }
.ctrl-totaux.ct-ko .ct-ecart, .ctrl-totaux.ct-ko .ct-fleche { color: #991b1b; }
.ctrl-totaux.ct-ko .ct-col strong { color: #7f1d1d; }

/* Écran de contrôle : le règlement rapproché reste sobre. Le vert n'y sert
   plus de signal — il est passé sur la barre des totaux ci-dessus. */
#ctrlRappro .rap-valide { background: var(--card); border-color: var(--border); }

/* La décomposition HT/TVA d'une ligne de frais. */
.fi-detail-tva { flex: 0 0 150px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Ligne de total d'un bloc de lignes : HT · TVA · TTC sous les saisies,
   dans des colonnes fixes partagées avec la barre récapitulative — les
   montants s'alignent verticalement d'un bloc à l'autre. */
.fi-total {
    display: flex; align-items: baseline; gap: 18px;
    padding: 8px 2px; margin-bottom: 8px; border-top: 1px solid var(--border);
    font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
    text-transform: none; letter-spacing: normal;
}
.fi-total:empty { display: none; }
.fi-total .ft-lib { margin-right: auto; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.fi-total strong { color: var(--ink); }
.ft-cell { flex: 0 0 170px; text-align: right; white-space: nowrap; }
.ft-fin { flex: 0 0 36px; }

/* Sections empilées du contrôle : Fournisseur / Informations factures /
   Montants — chacune sur toute la largeur, séparées d'un filet. */
.ctrl-section { grid-column: 1 / -1; border-left: none; padding-left: 0; }
/* Trois colonnes fixes : une rangee pour identifier la piece, une pour
   l imputer, une pour son reglement. En auto-fit, le nombre de colonnes
   changeait avec la largeur et la disposition se defaisait. */
.controle-form .ctrl-section .ef-grille { grid-template-columns: repeat(3, 1fr); }
.ctrl-section + .ctrl-section { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }

/* Séparateur discret et champ manquant dans la barre et la carte. */
.ctrl-totaux .ct-sep { width: 1px; align-self: stretch; background: var(--border); }
.fourn-manque { color: #b45309; }

/* Bouton et visionneuse du rendu JSON de l'IA — volontairement neutres. */
.ctrl-json-ia {
    padding: 4px 10px; font-size: 13px; font-family: ui-monospace, Consolas, monospace;
    color: var(--muted); background: #fff; border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; flex-shrink: 0;
}
.ctrl-json-ia:hover { color: var(--ink); border-color: var(--muted); }
.json-ia-fond {
    position: fixed; inset: 0; z-index: 950; background: rgba(15,18,25,.55);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.json-ia-boite {
    position: relative; background: var(--card); border-radius: 12px;
    width: 880px; max-width: 100%; max-height: 88vh; overflow-y: auto;
    padding: 20px 24px; box-shadow: 0 20px 70px rgba(0,0,0,.35);
}
.json-ia-boite h3 { margin: 0 0 12px; font-size: 16px; }
.json-ia-boite h4 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.json-ia-boite pre {
    margin: 0; padding: 12px 14px; font-size: 12px; line-height: 1.5;
    background: #f6f7f9; border: 1px solid var(--border); border-radius: 8px;
    overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.json-ia-fermer {
    position: absolute; top: 12px; right: 14px; width: 30px; height: 30px;
    border: none; border-radius: 50%; background: rgba(0,0,0,.06);
    font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer;
}
.json-ia-fermer:hover { background: rgba(0,0,0,.12); }
.fi-del {
    flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid var(--border);
    border-radius: 50%; background: #fff; color: var(--muted); cursor: pointer; line-height: 1;
}
.fi-del:hover { border-color: #fecaca; color: #991b1b; background: #fef2f2; }

.fi-pied { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.fi-msg { flex: 1 1 auto; font-size: 13px; color: var(--muted); }
.fi-msg-ok { color: #065f46; }
.fi-msg-ko { color: #991b1b; }

/* ═══ Le contrôle en cartes séparées, comme « Règlements rapprochés » ═══
   Chaque section (Fournisseur, Informations factures, Montants, Lots,
   Frais, barre des totaux, actions) est sa propre carte — le formulaire
   n'est plus qu'un empilement transparent. Posé en fin de feuille pour
   l'emporter sur les filets internes définis plus haut. */
.controle-form {
    background: transparent; border: none; padding: 0;
    grid-template-columns: 1fr; gap: 0;
}
.controle-form .ctrl-tiers,
.controle-form .ctrl-section,
.controle-form .ctrl-detail {
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 18px; margin: 0 0 16px;
}
.controle-form .ctrl-totaux { margin: 0 0 16px; padding: 12px 20px 12px 16px; }
.controle-form .ctrl-check { margin: 0 0 16px; }
.controle-form .ctrl-check:empty { display: none; }

/* --- Transporteur mandaté (fiche d'achat, liste du Stock) --- */
.transport-bloc { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; }
.transport-bloc.tr-actif { border-color: #bfdbfe; background: #eff6ff; }
.transport-bloc > h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.transport-bloc .tr-resume { margin: 0 0 12px; font-size: 14px; }
.transport-bloc .tr-resume code { font-size: 13px; }
.transport-bloc textarea {
    display: block; width: 100%; margin-top: 3px; padding: 7px 9px; font: inherit; font-size: 14px;
    text-transform: none; letter-spacing: normal; color: var(--ink);
    border: 1px solid var(--border); border-radius: 7px; background: #fff; resize: vertical;
}
.transport-bloc .edit-actions { margin-top: 10px; }
.transport-bloc .tr-retirer { padding: 8px 14px; border: 1px solid #fecaca; border-radius: 8px; background: #fff; color: #b91c1c; font-size: 13px; cursor: pointer; }
.transport-bloc .tr-retirer:hover { background: #fef2f2; }
.transport-bloc .edit-actions { flex-wrap: wrap; }
.tr-pastille { cursor: default; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tr-a_organiser { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.tr-mandate     { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.tr-en_route    { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.tr-livre       { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.retrait-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.retrait-cell .tr-pastille { font-size: 11px; padding: 2px 8px; max-width: 140px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — téléphones et tablettes en portrait (≤ 900 px)
   ═══════════════════════════════════════════════════════════════════════════
   Posée en fin de feuille pour l'emporter sur tout ce qui précède. Principes :
   - aucune page ne défile horizontalement ; seules les barres d'onglets et
     quelques tableaux denses défilent dans leur propre cadre ;
   - les listes (tableaux à 4 colonnes et plus) deviennent des cartes
     « libellé / valeur » — responsive.js pose les data-label ;
   - les fenêtres modales occupent tout l'écran ;
   - les champs font 16 px (sinon iOS zoome à la mise au point) et les cibles
     tactiles au moins 40 px de haut. */

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

@media (max-width: 900px) {

    /* ── Socle ─────────────────────────────────────────────────────────── */
    img, video, canvas, iframe, embed, object { max-width: 100%; }
    pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
    h1, h2, h3, h4, p, li, dd, dt, td, th, label, summary, a { overflow-wrap: break-word; }

    .container, .container.large { padding: 14px 12px 28px; }

    /* !important : des règles plus précises fixent ailleurs 12 ou 13 px, et un seul
       champ sous 16 px suffit à faire zoomer iOS à la mise au point. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
    select, textarea { font-size: 16px !important; max-width: 100%; min-width: 0; }
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),
    select, button, .btn, .btn-outline, .btn-valider, .btn-filtrer, .chip,
    .rap-btn, .pagination a, .pagination span { min-height: 40px; }
    .chip { display: inline-flex; align-items: center; }

    /* ── Barres d'onglets : une seule ligne, qui défile au doigt ─────────── */
    .topbar { flex-wrap: wrap; align-items: center; padding: 0 12px; }
    .topbar h1 { margin: 0; padding: 12px 0 6px; font-size: 16px; }
    .tb-compte { gap: 10px; padding: 12px 0 6px; }
    .tb-compte > span { display: none; }           /* l'identifiant : la place manque */
    .topbar nav, .sous-nav {
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .topbar nav::-webkit-scrollbar, .sous-nav::-webkit-scrollbar { display: none; }
    .topbar nav { order: 3; flex: 0 0 calc(100% + 24px); margin: 0 -12px; padding: 0 6px; }
    .topbar nav a { flex: none; padding: 10px 12px; white-space: nowrap; }
    .sous-nav { padding: 0 6px; gap: 0; }
    .sous-nav a { flex: none; padding: 11px 11px; white-space: nowrap; }
    /* Contrôle : les onglets passent sur deux rangées, les filtres sur la leur. La barre
       cesse d'être collante : à trois rangées, elle mangerait l'écran. */
    .controle-tabs { position: static; flex-wrap: wrap; padding: 4px 8px 0; gap: 0; }
    .controle-tabs a { flex: none; padding: 9px 9px; white-space: nowrap; }
    .controle-marque { flex: 1 1 100%; margin: 0; padding: 8px 4px 0; }
    .controle-tabs .controle-plats { flex: 1 1 100%; margin: 6px 0 8px; padding: 0 4px; gap: 6px 8px; }
    .cp-select { flex: 1 1 130px; min-width: 0; }
    .cp-groupe { white-space: normal; }

    /* ── Filtres et barres d'outils : tout passe à la ligne ─────────────── */
    .filtres-bar, .filtres-form, .filtres, .filtre-actions, .statut-filtres,
    .plat-filtres, .four-outils, .four-recherche, .table-foot, .par-page,
    .fin-filtres, .fin-form, .fin-titre, .controle-plats, .controle-actions,
    .modal-head, .modal-statuts, .fiche-actions { flex-wrap: wrap; min-width: 0; }
    .filtres-form { justify-content: flex-start; }
    .statut-filtres, .controle-plats { margin-left: 0; padding-left: 0; }
    .filtres-bar input[type=text], .filtres-bar input[type=search],
    .filtres input[type=text], .filtres input[type=search],
    .four-recherche input, .fin-filtres input[type=text], .fin-filtres input[type=search],
    .fin-filtres select, .filtres select { flex: 1 1 150px; width: auto; }
    .table-foot { justify-content: center; }

    /* Menus déroulants à cases : en feuille au bas de l'écran, toujours visibles en entier. */
    .dd { position: static; }
    .dd-panel {
        position: fixed; z-index: 950; left: 8px; right: 8px; top: auto; bottom: 8px;
        min-width: 0; max-height: 62vh; border-radius: 14px; padding: 8px;
        box-shadow: 0 -4px 40px rgba(0, 0, 0, .28);
    }
    .dd-opt { padding: 11px 10px; white-space: normal; font-size: 15px; }
    .cpt-liste { max-height: 46vh; }

    /* ── Grilles : une ou deux colonnes ─────────────────────────────────── */
    .kpi-band { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .todo-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stats-grid, .fin-colonnes, .four-grille, .ef-grille, .ff-grille, .fi-grille,
    .fourn-modal-grille, .controle-form .ctrl-section .ef-grille,
    .controle-form .ctrl-tiers .ef-grille, .ctrl-fourn-grille { grid-template-columns: 1fr !important; }
    .fin-cartes { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .controle-form label:has(.cpt-combo), .ff-grille label:has(.cpt-combo) { grid-column: auto; }
    .four-fiche { grid-template-columns: 1fr; gap: 0 0; }
    .four-fiche dt { margin-top: 8px; font-size: 12px; color: var(--muted); }
    .ctrl-bloc { border-left: 0; padding-left: 0; }

    /* Blocs à tableau étroit : ils défilent dans leur cadre plutôt que d'élargir la page. */
    .fin-bloc, .fin-panneau, .four-bloc, .card, .table-wrap, .four-defile { max-width: 100%; overflow-x: auto; }
    .table th, .table td { padding: 9px 10px; }
    /* Pas de cadre défilant dans la page défilante : la liste se déroule en entier. */
    .four-defile { max-height: none; overflow-y: visible; }

    /* Formulaires Finance : un champ par ligne, libellé au-dessus. */
    .fin-form label, .ff-grille label { display: block; min-width: 0; }
    .fin-form input:not([type=checkbox]):not([type=radio]), .fin-form select, .fin-form textarea { width: 100%; }
    .fin-form textarea, .modal-body textarea { min-height: 96px; }
    .rc-edit .fin-form { min-width: 0; max-width: 100%; }
    .fin-table-cat .fc-nom { white-space: normal; }

    /* Comptes bancaires : nom et solde côte à côte, les actions dessous. */
    .fin-table-comptes, .fin-table-comptes tbody { display: block; }
    .fin-table-comptes tr { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .fin-table-comptes tr:last-child { border-bottom: 0; }
    .fin-table-comptes td { display: block; padding: 0; border: 0; }
    .fin-table-comptes td:first-child { flex: 1 1 52%; min-width: 0; }
    .fin-table-comptes td:nth-child(2) { flex: 1 1 36%; }
    .fin-table-comptes td:last-child { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

    /* ── Listes en cartes ───────────────────────────────────────────────── */
    .table.t-cartes, .table.t-cartes > tbody { display: block; width: 100%; }
    .table.t-cartes { background: none; border: 0; border-radius: 0; overflow: visible; }
    .table.t-cartes > thead { display: none; }
    .table.t-cartes > tbody > tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px;
        margin: 0 0 10px; padding: 12px 14px;
        background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    }
    .table.t-cartes > tbody > tr > td {
        display: block; min-width: 0; max-width: none; width: auto !important;
        padding: 0; border: 0; background: none !important;
        text-align: left !important; white-space: normal; overflow-wrap: anywhere;
    }
    .table.t-cartes > tbody > tr > td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
    }
    .table.t-cartes > tbody > tr > td.t-vide { display: none; }
    .table.t-cartes > tbody > tr > td.t-large { grid-column: 1 / -1; }
    .table.t-cartes > tbody > tr.ligne-total { background: #fafafa; font-size: 13px; }
    .table.t-cartes > tbody > tr.row-clic:active { background: var(--accent-pale); }
    .table.t-cartes .apercu { max-width: none; }
    .table.t-cartes .vendeur-nom, .table.t-cartes .vendeur { max-width: none; }
    .table.t-cartes input:not([type=checkbox]):not([type=radio]),
    .table.t-cartes select, .table.t-cartes textarea { width: 100%; }

    /* ── Stock (index.php) : carte composée à la main ───────────────────────
       Référence, date et plateforme sur la première ligne, vendeur et photos
       en pleine largeur, les trois montants côte à côte, puis les statuts. */
    .barre-outils { gap: 10px; }
    .barre-outils > * , .barre-outils .recherche, .barre-outils .filtres-form { flex: 1 1 100%; min-width: 0; }
    .recherche { flex-wrap: wrap; }
    .recherche input[type="search"] { flex: 1 1 100%; width: 100%; }
    .recherche-lots { margin-left: auto; }

    /* Carte d'achat : la photo en grand à gauche, l'objet en titre, le montant
       en gras, les statuts en une rangée de pastilles. 4 à 5 cartes par écran.
       Cellules : 1 réf · 2 date · 3 plateforme · 4 vendeur · 5 photos · 6 lots ·
       7 adjugé · 8 payé · 9 paiement · 10 retrait · 11 OP · 12 facture. */
    .table.table-stock > tbody > tr.row-clic {
        grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "photo ref  date plat"
            "photo vend vend vend"
            "photo adj  pay  lots"
            "pai   ret  op   fac";
        gap: 6px 12px; padding: 12px; margin-bottom: 10px; border-radius: 14px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    }
    .table.table-stock > tbody > tr.row-clic > td { grid-column: auto; align-self: center; }
    .table.table-stock > tbody > tr.row-clic > td::before { content: none !important; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(1)  { grid-area: ref; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(2)  { grid-area: date; font-size: 12.5px; color: var(--muted); }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(3)  { grid-area: plat; justify-self: end; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(4)  { grid-area: vend; align-self: start; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(5)  { grid-area: photo; align-self: start; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(6)  { grid-area: lots; justify-self: end; align-self: end; font-size: 12.5px; color: var(--muted); }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(7)  { grid-area: adj; align-self: end; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(8)  { grid-area: pay; align-self: end; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(9)  { grid-area: pai; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(10) { grid-area: ret; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(11) { grid-area: op; justify-self: center; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(12) { grid-area: fac; justify-self: end; }
    .table.table-stock > tbody > tr.row-clic > td.t-vide { display: block; }

    .table.table-stock td:nth-child(1) code { font-size: 12px; padding: 2px 6px; }
    .table.table-stock td:nth-child(3) .badge { font-size: 11px; padding: 2px 8px; }
    /* Titre de la carte : l'objet ; vendeur et lieu en dessous, plus discrets. */
    .table.table-stock .m-titre {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink);
    }
    .table.table-stock .vendeur-nom { display: inline; font-size: 13px; color: var(--muted); font-weight: 400; }
    .table.table-stock .m-titre + .vendeur-nom { font-size: 12.5px; }
    .table.table-stock .vendeur-nom:first-child { font-size: 15px; font-weight: 600; color: var(--ink); }
    .table.table-stock .vendeur-com { display: none; }
    .table.table-stock .lieu-map { font-size: 12.5px; margin-left: 6px; }
    /* Montants : l'adjugé bien lisible, le payé à côté avec son libellé. */
    .table.table-stock td:nth-child(7), .table.table-stock td:nth-child(8) { font-size: 15px; font-weight: 600; color: var(--ink); }
    .table.table-stock td:nth-child(8) { font-size: 13px; font-weight: 500; color: var(--muted); }
    .table.table-stock td:nth-child(8)::after { content: " payé"; font-weight: 400; }
    .table.table-stock td:nth-child(6)::after { content: " lot(s)"; }
    /* Photo : la première en grand (96 px), un repère « +n » pour les suivantes. */
    .table.table-stock .apercu { display: block; position: relative; width: 96px; height: 96px; overflow: visible; }
    .table.table-stock .apercu .thumb { display: none; }
    .table.table-stock .apercu .thumb:first-child {
        display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 0; background: #f1f1f3;
    }
    .table.table-stock .apercu[data-plus]::after {
        content: attr(data-plus); position: absolute; right: 5px; bottom: 5px; padding: 1px 6px; border-radius: 8px;
        background: rgba(17, 24, 39, .72); color: #fff; font-size: 11px; font-weight: 600;
    }
    .table.table-stock .apercu .empty {
        display: flex; align-items: center; justify-content: center; width: 96px; height: 96px;
        border-radius: 10px; background: #f1f1f3; color: #b8bcc5;
    }
    /* Pastilles de statut : compactes mais faciles à toucher. */
    .table.table-stock .statut { font-size: 12.5px; padding: 6px 10px; min-height: 34px; }
    .table.table-stock .paiement-cell .mode-sep, .table.table-stock .paiement-cell .mode-pay { display: none; }
    .table.table-stock .retrait-cell { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
    .table.table-stock .op-cell { text-align: center; }

    /* Ligne de total : une bande compacte au-dessus des cartes. */
    .table.table-stock > tbody > tr.ligne-total {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
        padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: var(--accent-pale);
        border: 1px solid var(--accent-bord); font-size: 13px;
    }
    .table.table-stock > tbody > tr.ligne-total > td { flex: none; }
    .table.table-stock > tbody > tr.ligne-total > td::before { content: none !important; }
    .table.table-stock > tbody > tr.ligne-total > td:first-child { flex: 1 1 100%; font-weight: 600; color: var(--ink); }
    .table.table-stock > tbody > tr.ligne-total > td:nth-child(2)::after { content: " lots"; }
    .table.table-stock > tbody > tr.ligne-total > td:nth-child(3)::after { content: " adjugé"; }
    .table.table-stock > tbody > tr.ligne-total > td:nth-child(4)::after { content: " payé"; }
    .table.table-stock > tbody > tr.ligne-total > td:last-child { display: none; }

    /* ── Fenêtres modales : plein écran ─────────────────────────────────── */
    .modal { padding: 0; align-items: stretch; }
    .modal-dialog, .modal-large,
    #depense-modal .modal-dialog, #rappro-modal .modal-dialog, #achat-modal .modal-dialog {
        width: 100%; max-width: 100%; height: 100%; max-height: 100dvh; border-radius: 0;
    }
    .modal-body, #depense-modal .modal-body, #rappro-modal .modal-body, #achat-modal .modal-body {
        flex: 1 1 auto; max-height: none; padding: 18px 14px 28px;
    }
    .modal-close { top: 8px; right: 8px; width: 40px; height: 40px; background: rgba(0, 0, 0, .1); }
    .modal-head { padding-right: 44px; }
    .modal-body .galerie .thumb { width: 76px; height: 76px; }

    /* Visionneuse de photos : flèches et fermeture au bord, image sur toute la largeur. */
    .lb-figure { max-width: 100vw; }
    .lb-img { max-width: 100vw; max-height: 80dvh; border-radius: 0; }
    .lb-prev { left: 6px; }
    .lb-next { right: 6px; }
    .lb-close { top: 8px; right: 8px; }
    .lb-btn { min-width: 44px; min-height: 44px; }

    /* Pastilles cliquables (payé, récupéré, transféré) : assez hautes pour le doigt. */
    .statut.stat-toggle { min-height: 34px; display: inline-flex; align-items: center; padding-left: 12px; padding-right: 12px; }

    /* ── Contrôle des factures ──────────────────────────────────────────── */
    .controle-pane { grid-template-columns: 1fr; gap: 14px; padding: 12px 12px 180px; }
    .controle-preview { height: 52vh !important; }
    .controle-preview-head { flex-wrap: wrap; }
    .ctrl-ref-ligne { flex-wrap: wrap; white-space: normal; }
    .controle-form .ctrl-tiers, .controle-form .ctrl-section, .controle-form .ctrl-detail { padding: 14px 12px; }
    .controle-vide { margin: 30px 12px; }
    body .fiche-seule { padding: 14px 12px; }   /* « body » : l'emporte sur le style en ligne de fiche_achat.php */
    .controle-form-col, .controle-form, .controle-form > * { min-width: 0; max-width: 100%; }

    /* Lots et frais : chaque ligne de saisie devient un petit bloc sur deux rangées.
       Les en-têtes de colonnes n'ont plus de colonnes à coiffer. */
    .fi-entetes { display: none; }
    .fi-ligne-saisie {
        flex-wrap: wrap; gap: 6px; padding: 8px;
        border: 1px solid var(--border); border-radius: 8px; background: #fafbfc;
    }
    /* Lot : n° + désignation | coût + régime | taux + suppression.
       Frais : libellé | TTC + taux | détail HT·TVA + suppression. */
    .fi-ligne-saisie > input, .fi-ligne-saisie > select { flex: 1 1 100%; min-width: 0; }
    .fi-ligne-saisie > [name="lot_line_ref[]"] { flex: 0 0 76px; }
    .fi-ligne-saisie > [name="lot_description[]"] { flex: 1 1 calc(100% - 82px); }
    .fi-ligne-saisie > [name="lot_hammer_price[]"], .fi-ligne-saisie > [name="fee_total_ttc[]"] { flex: 1 1 calc(40% - 6px); }
    .fi-ligne-saisie > [name="lot_vat_regime[]"], .fi-ligne-saisie > [name="fee_vat_rate[]"] { flex: 1 1 calc(60% - 6px); }
    .fi-ligne-saisie > [name="lot_vat_rate[]"] { flex: 1 1 calc(100% - 52px); }
    .fi-ligne-saisie > .fi-detail-tva { flex: 1 1 calc(100% - 52px); text-align: left; white-space: normal; }
    .fi-ligne-saisie > .fi-del { flex: 0 0 40px; margin-left: auto; }
    .fi-pied { flex-wrap: wrap; justify-content: flex-start; }

    .fi-total { flex-wrap: wrap; gap: 4px 16px; }
    .fi-total .ft-lib { flex: 1 1 100%; }
    .ft-cell { flex: 1 1 auto; text-align: left; white-space: normal; }
    .ft-fin { display: none; }
    .ctrl-totaux { flex-wrap: wrap; gap: 8px 18px; }
    .ctrl-totaux .ft-cell { flex: 1 1 28%; }
    .ctrl-totaux .ct-sep, .ctrl-totaux .ct-tampon, .ctrl-totaux .ct-fleche { display: none; }
    .fourn-carte-nom, .fourn-carte-infos { flex-wrap: wrap; }

    /* La barre d'actions reste collée en bas : une grille de trois boutons par rangée,
       « Valider » sur toute la largeur. */
    .controle-actions {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); align-items: stretch;
    }
    .controle-actions > * { min-width: 0; margin: 0; text-align: center; justify-content: center; }
    .controle-actions .btn, .controle-actions button, .controle-actions a.btn {
        padding: 6px 6px; font-size: 12px; line-height: 1.2; white-space: normal;
        display: flex; align-items: center; justify-content: center;
    }
    .controle-actions .btn-valider { grid-column: 1 / -1; font-size: 15px; }
    .controle-compteur { align-self: center; }
}

/* Tablette en portrait : la place permet deux cartes de front et des grilles
   moins tassées ; le reste de la couche mobile s'applique tel quel. */
@media (min-width: 620px) and (max-width: 900px) {
    .table.t-cartes > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
    .table.t-cartes > tbody > tr { margin: 0; }
    .table.t-cartes > tbody > tr.ligne-total { grid-column: 1 / -1; }
    .kpi-band, .todo-cards, .fin-cartes { grid-template-columns: repeat(3, 1fr); }
    .ef-grille, .ff-grille, .fi-grille, .fourn-modal-grille,
    .controle-form .ctrl-section .ef-grille, .controle-form .ctrl-tiers .ef-grille,
    .ctrl-fourn-grille { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .modal { padding: 16px; align-items: center; }
    .modal-dialog, .modal-large,
    #depense-modal .modal-dialog, #rappro-modal .modal-dialog, #achat-modal .modal-dialog {
        height: auto; max-height: 94dvh; border-radius: 14px;
    }
    .controle-actions { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .controle-actions .btn-valider { grid-column: auto; }
    .controle-pane { padding-bottom: 110px; }
}

/* Écrans tactiles : pas de survol. Ce qui n'apparaissait qu'au passage de la
   souris (supprimer une photo) reste affiché. */
@media (hover: none) {
    .galerie .ph .ph-del { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile, ergonomie (2026-10) — principes appliqués :
   - navigation au pouce : barre d'onglets fixe en bas, icône + libellé ;
   - contenu d'abord : la photo et l'objet avant les formulaires ;
   - recherche toujours à portée (collée en haut), filtres en une rangée ;
   - fiche plein écran : carrousel de photos, statuts en gros boutons,
     sections secondaires repliées (on les ouvre au besoin) ;
   - cibles tactiles >= 44 px, champs à 16 px.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-ico { display: none; }
.m-titre { display: none; }   /* titre de carte : téléphone seulement */
.fiche-hero { display: none; }

@media (max-width: 900px) {
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

    /* ── En-tête réduit ; onglets en barre basse ─────────────────────────── */
    .topbar { position: sticky; top: 0; z-index: 70; flex-wrap: nowrap; justify-content: space-between; min-height: 48px; }
    .topbar h1 { padding: 0; font-size: 17px; }
    .tb-compte { padding: 0; }
    .tb-compte a { font-size: 13px; color: var(--muted); }
    .topbar nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; order: 0;
        flex: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom);
        display: flex; justify-content: space-around; overflow: visible;
        background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(16, 24, 40, .05);
    }
    .topbar nav a {
        flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-height: 56px; padding: 6px 2px 5px; border: 0; margin: 0;
        font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap;
    }
    .topbar nav a.actif { color: var(--accent); font-weight: 600; border: 0; }
    .nav-ico { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .topbar nav a.actif .nav-ico { stroke-width: 2.2; }
    /* Écran de contrôle : sa barre d'actions se pose au-dessus des onglets. */
    .controle-actions { bottom: calc(57px + env(safe-area-inset-bottom)); padding-bottom: 8px; }
    .controle-pane { padding-bottom: 240px; }

    /* ── Stock : recherche collée en haut, filtres sur une rangée ────────── */
    .barre-outils {
        position: sticky; top: 48px; z-index: 60; margin: -14px -12px 12px; padding: 10px 12px 8px;
        background: var(--bg); box-shadow: 0 6px 10px -10px rgba(16, 24, 40, .35);
    }
    .barre-outils .recherche input[type="search"] {
        height: 44px; border-radius: 12px; padding-left: 14px; font-size: 16px !important;
    }
    .barre-outils .filtres-form {
        flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 8px; padding-bottom: 2px;
    }
    .barre-outils .filtres-form::-webkit-scrollbar { display: none; }
    .barre-outils .filtres-form > * { flex: none !important; }
    .barre-outils .dd > button, .barre-outils .chip { border-radius: 999px; min-height: 38px; padding: 6px 14px; white-space: nowrap; }

    /* ── Fiche d'un achat : plein écran, contenu d'abord ─────────────────── */
    #achat-modal .modal-body { display: flex; flex-direction: column; gap: 0; padding: 0 0 28px; }
    #achat-modal .modal-body > * { margin-left: 14px; margin-right: 14px; }
    #achat-modal .modal-body > .fiche-hero { margin: 0; }
    #achat-modal .modal-head      { order: 1; padding: 12px 52px 4px 0; }
    #achat-modal .fiche-hero      { order: 0; }
    #achat-modal .modal-titre     { order: 2; font-size: 19px; line-height: 1.3; margin-top: 8px; margin-bottom: 4px; }
    #achat-modal .ref-ext         { order: 3; font-size: 13px; }
    #achat-modal .meta            { order: 4; font-size: 14px; }
    #achat-modal .paiement        { order: 5; font-size: 14px; }
    #achat-modal .lot             { order: 6; }
    #achat-modal .lots-vide       { order: 6; }
    #achat-modal .factures        { order: 7; }
    #achat-modal .transport-bloc  { order: 8; }
    #achat-modal .frais-bloc      { order: 9; }
    #achat-modal .edit-achat      { order: 10; }
    #achat-modal .lot-ajout       { order: 11; }
    #achat-modal .fiche-actions   { order: 12; }

    /* Carrousel : une photo par écran, on glisse au doigt ; toucher = plein écran. */
    .fiche-hero {
        display: flex; position: relative; overflow-x: auto; scroll-snap-type: x mandatory;
        scrollbar-width: none; background: #111; aspect-ratio: 1 / 1; max-height: 62dvh;
    }
    .fiche-hero::-webkit-scrollbar { display: none; }
    .fiche-hero .thumb {
        flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center;
        border: 0; border-radius: 0; background: #111;
    }
    .fiche-hero-nb {
        position: sticky; left: calc(100% - 92px); align-self: flex-end; flex: none; margin: 0 0 10px -84px;
        padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px;
    }
    /* La croix de fermeture flotte sur la photo. */
    #achat-modal .modal-close { position: fixed; top: calc(8px + env(safe-area-inset-top)); right: 10px; z-index: 5; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 6px rgba(0, 0, 0, .2); }

    /* Statuts : trois gros boutons côte à côte. */
    #achat-modal .modal-statuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: 10px; }
    #achat-modal .modal-statuts .statut { justify-content: center; min-height: 44px; font-size: 13.5px; text-align: center; border-radius: 12px; }
    #achat-modal .modal-statuts .tr-pastille, #achat-modal .modal-statuts > :nth-child(n+4) { grid-column: 1 / -1; justify-self: start; }

    /* Lots : photos en grande grille (3 de front), description lisible. */
    #achat-modal .lot { padding: 14px 0; border-top: 1px solid var(--border); }
    #achat-modal .lot h3 { font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
    #achat-modal .lot-desc { font-size: 14.5px; line-height: 1.45; }
    #achat-modal .galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    #achat-modal .galerie .ph { margin: 0; }
    #achat-modal .galerie .thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
    #achat-modal .drop-hint { display: none; }
    #achat-modal .btn-ajout { display: inline-flex; align-items: center; min-height: 44px; }

    /* Sections secondaires repliables (posées par responsive.js) : le titre est le bouton. */
    #achat-modal .repliable { margin-top: 10px; border-radius: 12px; }
    #achat-modal .repliable > h4 {
        display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; cursor: pointer; user-select: none;
    }
    #achat-modal .repliable > h4::after {
        content: ""; margin-left: auto; width: 9px; height: 9px; flex: none;
        border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px);
        transition: transform .15s;
    }
    #achat-modal .repliable.replie > h4::after { transform: rotate(-45deg); }
    #achat-modal .repliable.replie > :not(h4) { display: none !important; }
    #achat-modal .fiche-actions { margin-top: 18px; }
}

@media (max-width: 900px) {
    /* Réglages de la carte d'achat après essai. */
    .recherche-lots { display: none; }
    .table.table-stock > tbody > tr.row-clic > td.m-masque { visibility: hidden; }
    .table.table-stock td:nth-child(12) .statut { font-size: 0; min-height: 30px; padding: 4px 10px; }
    .table.table-stock td:nth-child(12) .st-todo::after { content: "Sans facture"; font-size: 12px; }
    .table.table-stock td:nth-child(12) .st-ok::after { content: " Facture"; font-size: 12px; }
    .table.table-stock td:nth-child(12) .st-ok { font-size: 13px; }
    .table.table-stock .op-cell .stat-pico::after { content: " OP"; font-size: 11.5px; color: var(--muted); }
    .table.table-stock .op-cell .stat-pico { min-height: 30px; padding: 4px 6px; font-size: 13px; }
}
@media (max-width: 900px) {
    /* La colonne centrale prend la largeur de son contenu (réf., montant,
       retrait) : le montant ne se coupe plus, les pastilles ne se chevauchent plus. */
    .table.table-stock > tbody > tr.row-clic { grid-template-columns: 96px auto minmax(0, 1fr) auto; }
    .table.table-stock td:nth-child(7), .table.table-stock td:nth-child(8) { white-space: nowrap; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(4) { grid-column: 2 / -1; }
}
@media (max-width: 900px) {
    /* Carte allégée (375 px de large) : date à droite de la réf., payé à
       droite de l'adjugé, OP et nombre de lots laissés à la fiche, facture en pastille. */
    .table.table-stock > tbody > tr.row-clic {
        grid-template-columns: 92px minmax(0, 1fr) auto;
        grid-template-areas:
            "photo ref  plat"
            "photo vend vend"
            "photo adj  adj"
            "pai   ret  fac";
        column-gap: 12px;
    }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(4) { grid-column: auto; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(2) { grid-area: ref; justify-self: end; padding-right: 4px; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(8) { grid-area: adj; justify-self: end; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(6),
    .table.table-stock > tbody > tr.row-clic > td:nth-child(11) { display: none; }
    .table.table-stock .apercu, .table.table-stock .apercu .thumb:first-child,
    .table.table-stock .apercu .empty { width: 92px; height: 92px; }
    .table.table-stock td:nth-child(12) .statut { font-size: 14px; min-width: 40px; justify-content: center; }
    .table.table-stock td:nth-child(12) .st-todo { font-size: 0; }
    .table.table-stock td:nth-child(12) .st-todo::after { content: "📄✕"; font-size: 13px; }
    .table.table-stock td:nth-child(12) .st-ok::after { content: none; }
}
@media (max-width: 900px) {
    /* Fiche : aucun bloc ne rétrécit (le carrousel, qui défile, tombait à 0 px). */
    #achat-modal .modal-body > * { flex-shrink: 0; }
    .table.table-stock > tbody > tr.row-clic > td:nth-child(10) { justify-self: start; }
}
@media (max-width: 900px) {
    .fiche-hero, .fiche-hero .thumb { background: #eceef2; }
}
@media (max-width: 900px) {
    /* Finance : recherche + bouton « Filtres » ; le reste se déplie au besoin. */
    form.fin-filtres.m-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
    form.fin-filtres.m-filtres > input[type=search] { flex: 1 1 0; min-width: 0; height: 44px; border-radius: 12px; }
    .m-bouton-filtres {
        flex: none; min-height: 44px; padding: 0 16px; border-radius: 12px;
        border: 1px solid var(--border); background: var(--card); color: var(--ink); font-weight: 600;
    }
    .m-bouton-filtres[aria-expanded="true"] { background: var(--accent-pale); border-color: var(--accent-bord); color: var(--accent); }
    form.fin-filtres.m-filtres:not(.m-filtres-ouverts) > :not(input[type=search]):not(input[type=hidden]):not(.m-bouton-filtres) { display: none !important; }
    form.fin-filtres.m-filtres-ouverts > :not(input[type=search]):not(.m-bouton-filtres) { flex: 1 1 100%; }
    /* Vues (Tous, À rapprocher…) : une rangée qui défile au doigt. */
    .fin-vues { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 8px; padding-bottom: 2px; margin-bottom: 10px; }
    .fin-vues::-webkit-scrollbar { display: none; }
    .fin-vues > a { flex: none; white-space: nowrap; }
}