/* Design system Digistorm — tokens de la maquette trésorerie
   (docs/design-tokens-tresorerie-desktop.md), partagés desktop + mobile. */
:root {
    --ink: #14171F;
    --paper: #F3F5F7;
    --surface: #FFFFFF;
    --teal: #0E8F84;
    --teal-dark: #0B756C;
    --teal-soft: #E4F3F1;
    --blue: #3B6FE0;
    --blue-soft: #EAF0FE;
    --green: #1E9E6B;
    --green-soft: #E7F7F0;
    --red: #E24C3D;
    --red-soft: #FCEAE8;
    --amber: #C98A1F;
    --amber-soft: #FBF1E0;
    --slate: #6E7787;
    --line: #E7E9EC;
    /* Accents secondaires (KPI/tags du tableau de bord) */
    --violet: #8b5cf6;
    --cyan: #0891b2;
    --rose: #e11d48;
    /* En-tête de colonne / survol de ligne des tableaux (tokens de la maquette) */
    --thead-bg: #FAFBFC;
    --row-hover: #FAFBFD;
    /* Fond très doux teinté teal des lignes de saisie (grille des documents) */
    --row-soft: #F6FAF9;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Boutons icône (crayon/corbeille) des colonnes Action des écrans CRUD "liste + Nouveau + modale" */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.icon-btn-edit {
    color: #0d6efd;
}

    .icon-btn-edit:hover {
        background: rgba(13, 110, 253, 0.1);
        border-color: rgba(13, 110, 253, 0.25);
    }

.icon-btn-delete {
    color: #dc3545;
    margin-left: 0.25rem;
}

    .icon-btn-delete:hover {
        background: rgba(220, 53, 69, 0.1);
        border-color: rgba(220, 53, 69, 0.25);
    }

/* Barre d'outils des écrans CRUD (titre + recherche + Nouveau) */
.crud-search {
    max-width: 320px;
}

/* Alignement des colonnes numériques QUANTITATIVES (montants DH, quantités, %) dans
   les tableaux CRUD — à poser à la fois sur le <th> et le <td> de la colonne visée.
   Les identifiants/codes numériques (numéro de compte, téléphone), dates et autres
   valeurs qualitatives restent alignés à gauche par défaut : ne PAS leur appliquer
   .crud-num. Pas encore utilisée sur ComptesTresorerie (aucune colonne quantitative
   sur cet écran) ; prête pour les futurs écrans à montants (Produits : PMP/prix,
   Factures : totaux, etc.). */
.crud-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* CHIFFRES DE DONNÉES : décision de token — Inter + tabular-nums (remplace IBM Plex
   Mono partout). Colonnes alignées au pixel grâce à tabular-nums. `.num` = valeur
   normale (500) ; `.num--strong` = valeur forte (600). N'impose PAS l'alignement
   (utiliser .crud-num pour aligner à droite). */
.num {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.num--strong { font-weight: 600; }

/* En-tête de tableau collant au défilement vertical, desktop uniquement — sous 768px
   le <thead> est déjà masqué (tableau -> cartes, voir plus bas) donc le sticky n'a
   aucun effet à neutraliser côté mobile, mais on borne quand même explicitement à
   min-width:769px pour que ce soit auto-documenté. "top" est décalé de la hauteur de
   .app-topbar (3.75rem, lui-même sticky) pour ne pas se chevaucher avec elle pendant
   le défilement ; z-index inférieur à celui de .app-topbar (5) pour la même raison. */
@media (min-width: 769px) {
    .crud-list thead th {
        position: sticky;
        top: 64px; /* hauteur de .app-topbar (maquette desktop) */
        z-index: 1;
        background: #ffffff;
        box-shadow: inset 0 -1px 0 #dee2e6;
    }
}

/* En-tête de colonne triable (tri client-side, voir ColumnSortState.cs). Le libellé
   et l'icône de tri sont dans un conteneur flex commun ; l'icône garde une largeur
   fixe qu'elle soit affichée ou non (colonne active ou pas), pour que l'en-tête ne
   change jamais de largeur/alignement au clic. */
.crud-sortable {
    cursor: pointer;
    user-select: none;
}

    .crud-sortable:hover {
        color: #0f172a;
    }

.crud-th-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.crud-sort-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    flex: none;
}

/* Responsive des écrans CRUD "liste + Nouveau + modale" : un seul point de rupture,
   768px, partagé par tous les écrans (toolbar + tableau -> cartes).
   Centralisé ici (plutôt que dans le *.razor.css de chaque page) pour que la
   propagation aux autres écrans CRUD n'exige que d'ajouter les classes
   "crud-toolbar"/"crud-toolbar-actions"/"crud-search"/"crud-list" et les attributs
   data-label sur les <td>, sans dupliquer de CSS. */
@media (max-width: 768px) {
    .crud-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .crud-toolbar-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .crud-search {
        max-width: none;
        width: 100%;
    }

    .crud-toolbar-actions .btn {
        width: 100%;
    }

    .icon-btn {
        width: 2.5rem;
        height: 2.5rem;
    }

    table.crud-list thead {
        display: none;
    }

    table.crud-list, table.crud-list tbody, table.crud-list tr, table.crud-list td {
        display: block;
        width: 100%;
    }

    table.crud-list tr {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 0.75rem;
        padding: 0.35rem 0.75rem;
        background: #ffffff;
    }

    table.crud-list td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.5rem 0;
        border: none;
        border-bottom: 1px solid #f1f5f9;
        text-align: right;
    }

        table.crud-list td:last-child {
            border-bottom: none;
        }

        table.crud-list td::before {
            content: attr(data-label);
            font-weight: 600;
            color: #475569;
            text-align: left;
            flex: none;
        }

        table.crud-list td[data-label="Action"] {
            justify-content: flex-end;
        }

            table.crud-list td[data-label="Action"]::before {
                content: "";
            }
}

/* ============================================================================
   Cartes mobiles "maquette trésorerie" (crud-cards) — remplaçant, écran par
   écran, le rendu générique tableau->cartes ci-dessus. Spec : maquette
   digistorm-tresorerie-cards + design tokens (Sora/Inter tabular-nums,
   rayon 16px, liseré gauche 4px couleur du type, pastille icône 36px,
   séparateur méta dashed, FAB teal). Desktop (>768px) : bloc entièrement
   masqué, le tableau reste seul visible.
   Couleur/icône par type via CSS custom properties --card-accent /
   --card-accent-soft posées en style inline sur chaque .crud-card.
   ========================================================================= */
/* Chips de filtre — partagées desktop + mobile (rangée horizontale, pill). */
.crud-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    margin-bottom: 0.85rem;
    scrollbar-width: none;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

    .crud-chips::-webkit-scrollbar {
        display: none;
    }

.crud-chip {
    flex: none;
    padding: 0.42rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .crud-chip.active {
        background: var(--ink);
        border-color: var(--ink);
        color: #ffffff;
    }

/* ============================================================================
   Desktop "maquette trésorerie" (> 768px) : en-tête de page (eyebrow + titre +
   sous-titre), cartes de synthèse, tableau en carte blanche avec pastilles de
   type et pied de tableau. Spec : docs/design-tokens-tresorerie-desktop.md.
   Tous ces blocs sont masqués (ou sans objet) en mobile : .page-head-text,
   .summary-grid et le pied vivent dans des éléments portant crud-hide-mobile
   ou dans la table déjà masquée sous 768px via crud-desktop-table.
   ========================================================================= */
.page-head-text {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.page-eyebrow {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 2px;
}

.page-head-text h1 {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
}

.page-sub {
    font-size: 13.5px;
    color: var(--slate);
    margin: 0;
}

.btn-filtres {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-filtres:hover {
        background: var(--paper);
    }

.btn-nouveau {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    background: var(--teal);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(14, 143, 132, 0.28);
}

    .btn-nouveau:hover {
        background: var(--teal-dark);
    }

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 1.1rem;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.summary-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--surface);
    border-radius: 14px;
    padding: 16px 18px;
}

.summary-icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sum-soft, var(--teal-soft));
    color: var(--sum-color, var(--teal));
}

.summary-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate);
}

.summary-value {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
}

/* Tableau en carte blanche. "overflow: clip" (et PAS "hidden") pour arrondir
   les coins sans créer de conteneur de défilement — hidden casserait le
   position:sticky de l'en-tête de colonnes (le sticky deviendrait relatif à
   la carte, qui ne défile pas, donc plus aucun effet). */
.crud-table-card {
    background: var(--surface);
    border-radius: 16px;
    overflow: clip;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

    .crud-table-card .crud-list {
        margin-bottom: 0;
    }

    .crud-table-card .crud-list thead th {
        background: #FAFBFC;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: var(--slate);
        padding: 14px 20px;
        border-bottom: 1px solid var(--line);
    }

    .crud-table-card .crud-list tbody td {
        padding: 15px 20px;
        border-bottom: 1px solid var(--line);
        font-size: 14px;
        vertical-align: middle;
    }

    .crud-table-card .crud-list tbody tr:hover td {
        background: #FAFBFD;
    }

    .crud-table-card .cell-mono {
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums;
        font-weight: 600;
    }

    .crud-table-card .cell-empty {
        font-style: italic;
        color: #B7BEC9;
    }

    .crud-table-card .dh {
        font-size: 11px;
        font-weight: 500;
        color: var(--slate);
        margin-left: 2px;
    }

.type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    margin-right: 0.6rem;
    background: var(--card-accent-soft, var(--blue-soft));
    color: var(--card-accent, var(--blue));
    vertical-align: middle;
}

.cell-name {
    font-weight: 600;
    color: var(--ink);
}

.crud-table-card .icon-btn-edit {
    background: var(--blue-soft);
    color: var(--blue);
}

.crud-table-card .icon-btn-delete {
    background: var(--red-soft);
    color: var(--red);
}

.table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 12.5px;
    color: var(--slate);
}

.page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--ink);
    color: #ffffff;
    font-weight: 600;
}

/* Contrôles de pagination serveur (pied de tableau + pager mobile) */
.pager {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

    .pager-btn:hover:not(:disabled) {
        background: var(--paper);
    }

    .pager-btn:disabled {
        opacity: 0.4;
        cursor: default;
    }

    .pager-btn.active {
        background: var(--ink);
        border-color: var(--ink);
        color: #ffffff;
        cursor: default;
    }

/* Badge de statut produit (dérivé du stock — règle métier, jamais stocké) */
.statut-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

    .statut-badge::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

    .statut-badge.dispo { background: rgba(16, 185, 129, 0.09); color: #059669; border: 1px solid rgba(16, 185, 129, 0.18); }
    .statut-badge.epuise { background: rgba(225, 29, 72, 0.09); color: var(--rose); border: 1px solid rgba(225, 29, 72, 0.2); }

/* Rangée de filtres serveur (selects + annuler) de la liste Produits */
.filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

    .filter-row select {
        max-width: 220px;
    }

/* Onglets désactivés « à venir » en tête de fiche produit */
.fiche-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
}

.fiche-tab {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    border: none;
    background: transparent;
    white-space: nowrap;
}

    .fiche-tab.active {
        color: var(--ink);
        border-bottom: 2.5px solid var(--teal);
    }

    .fiche-tab:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.fiche-section {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal);
    margin: 1.1rem 0 0.6rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px dashed var(--line);
}

    .fiche-section:first-of-type {
        margin-top: 0;
    }

/* ============================================================================
   Fiche Produit — grille multi-colonnes (spec : capture WinDev « Fiche Article »).
   Blocs encadrés titre+icône ; zones « à venir » désactivées et marquées.
   ========================================================================= */
.fpro-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.85fr;
    gap: 12px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.fpro-bloc {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--surface);
    min-width: 0;
}

.fpro-bloc-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 10px;
}

    .fpro-bloc-title svg {
        flex: none;
        color: var(--teal);
    }

.fpro-bloc label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--slate);
    margin-bottom: 2px;
}

.fpro-field {
    margin-bottom: 8px;
}

.fpro-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.avenir-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--amber-soft);
    color: var(--amber);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: 5px;
    vertical-align: middle;
}

.tva-chip {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 8px;
    background: var(--teal-soft);
    color: var(--teal);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* T8b — le bloc .prixmode/.prixmode-btn (sélecteur « Prix BL / Prix Facture » de l'ancienne
   modale de fiche article) a été SUPPRIMÉ : ce vocabulaire est remplacé par « Plan A » / « Plan B »
   et son markup a disparu avec la modale en T8a. Le segment des plans vit désormais dans
   css/article-fiche.css (.artfiche .art-seg), borné à la fiche. */

.marge-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(30, 158, 107, 0.25);
    border-radius: 10px;
    background: var(--green-soft);
    color: var(--green);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
}

.fpro-image-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 150px;
    border: 2px dashed var(--line);
    border-radius: 10px;
    color: #c3cad4;
    font-size: 12px;
    margin-bottom: 8px;
}

.fpro-barcode {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    opacity: 0.45;
    margin-bottom: 4px;
}

.fpro-kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
}

.fpro-kv-label {
    font-size: 10.5px;
    color: #94a3b8;
}

.fpro-kv-value {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

    .fpro-kv-value.muted {
        color: #c3cad4;
    }

.fpro-note {
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--paper);
    font-size: 10px;
    color: var(--slate);
    line-height: 1.35;
}

/* Ventilation du stock par entrepôt (fiche produit, lecture seule) */
.fpro-vent-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    padding: 2px 0;
    color: var(--ink);
}

    .fpro-vent-row.total {
        border-top: 1px solid var(--line);
        margin-top: 3px;
        padding-top: 5px;
        font-weight: 700;
    }

.fpro-badge-neutre {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 10px;
    background: var(--paper);
    color: var(--slate);
    font-size: 10px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.fpro-span2 {
    grid-column: span 2;
}

@media (max-width: 1100px) {
    .fpro-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .fpro-grid {
        grid-template-columns: 1fr;
    }

    .fpro-span2 {
        grid-column: auto;
    }
}

/* Pager sous les cartes mobiles (la liste paginée s'applique aussi < 768px) */
.crud-mobile-pager {
    display: none;
}

@media (max-width: 768px) {
    .crud-mobile-pager {
        display: flex;
        justify-content: center;
        margin: 0.5rem 0 1rem;
    }

    .crud-mobile-pager .pager-btn {
        min-width: 40px;
        height: 40px;
    }
}

.crud-cards,
.crud-fab {
    display: none;
}

@media (max-width: 768px) {
    /* La page qui adopte les cartes masque son tableau (et le rendu carte
       générique qui va avec) et le bouton "+ Nouveau" (remplacé par le FAB). */
    table.crud-list.crud-desktop-table {
        display: none;
    }

    .crud-hide-mobile {
        display: none !important;
    }

    .crud-cards {
        display: block;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    .crud-cards-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 0.65rem;
    }

    .crud-cards-title {
        font-family: 'Sora', sans-serif;
        font-size: 1.35rem;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
    }

    .crud-cards-count {
        font-size: 0.82rem;
        color: #64748b;
    }

    .crud-card {
        position: relative;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 14px rgba(15, 23, 42, 0.05);
        padding: 1rem 1rem 0.85rem;
        margin-bottom: 0.9rem;
        overflow: hidden;
    }

        .crud-card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--card-accent, #2563eb);
        }

        /* Variante neutre pour les écrans sans notion de type/catégorie :
           liseré gris discret au lieu de la couleur de type. */
        .crud-card.crud-card-plain::before {
            background: var(--line);
        }

    .crud-card-head {
        display: flex;
        align-items: center;
        gap: 0.7rem;
    }

    .crud-card-icon {
        flex: none;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--card-accent-soft, #eff6ff);
        color: var(--card-accent, #2563eb);
    }

    .crud-card-headtext {
        flex: 1;
        min-width: 0;
    }

    .crud-card-type {
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--card-accent, #2563eb);
    }

    .crud-card-title {
        font-family: 'Sora', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: #0f172a;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .crud-card-pill {
        flex: none;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums;
        font-weight: 500;
        font-size: 0.8rem;
        color: #0f172a;
        background: #f1f5f9;
        border-radius: 8px;
        padding: 0.3rem 0.6rem;
    }

    .crud-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
        margin-top: 0.8rem;
        padding-top: 0.8rem;
        border-top: 1px dashed #e2e8f0;
    }

    .crud-card-meta-item {
        min-width: 0;
    }

    .crud-card-meta-label {
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #94a3b8;
        margin-bottom: 0.1rem;
    }

    .crud-card-meta-value {
        font-size: 0.9rem;
        color: #0f172a;
    }

    .crud-card-empty {
        font-style: italic;
        color: #cbd5e1;
    }

    .crud-card-meta-item.crud-num {
        margin-left: auto;
    }

    .crud-card-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.55rem;
        margin-top: 0.85rem;
    }

    .crud-card-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        min-height: 44px;
        padding: 0.45rem 1rem;
        border: none;
        border-radius: 10px;
        font-size: 0.87rem;
        font-weight: 600;
        cursor: pointer;
    }

    .crud-card-btn-edit {
        background: #eff6ff;
        color: #2563eb;
    }

    .crud-card-btn-delete {
        background: #fef2f2;
        color: #dc2626;
    }

    .crud-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 1.1rem;
        bottom: 1.1rem;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: none;
        background: #0d9488;
        color: #ffffff;
        box-shadow: 0 6px 18px rgba(13, 148, 136, 0.4);
        cursor: pointer;
        z-index: 1000;
    }
}

/* ============================================================================
   Tableau de Bord (Accueil) — spec : digistorm-dashboard-reference.html.
   Contenu seul (la navbar/latérale de la maquette ne sont pas reprises, l'app
   a les siennes). Graphes et donuts en CSS/SVG purs, sans librairie tierce.
   ========================================================================= */
.dash {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.dash-title {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.dash-demo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--amber-soft);
    border: 1px solid rgba(201, 138, 31, 0.35);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--amber);
}

.demo-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
}

.kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.kpi {
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

    .kpi::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--kpi-color, var(--blue));
    }

.kpi.blue { --kpi-color: var(--blue); --kpi-soft: rgba(59, 111, 224, 0.1); }
.kpi.amber { --kpi-color: var(--amber); --kpi-soft: rgba(201, 138, 31, 0.1); }
.kpi.green { --kpi-color: var(--green); --kpi-soft: rgba(30, 158, 107, 0.1); }
.kpi.violet { --kpi-color: var(--violet); --kpi-soft: rgba(139, 92, 246, 0.1); }

.kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kpi-soft);
    color: var(--kpi-color);
}

.kpi-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

    .kpi-badge.up { background: rgba(30, 158, 107, 0.1); color: var(--green); }
    .kpi-badge.down { background: rgba(225, 29, 72, 0.1); color: var(--rose); }

.kpi-lbl {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 4px;
}

.kpi-val {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--kpi-color);
    font-variant-numeric: tabular-nums;
}

    .kpi-val small {
        font-size: 12px;
        font-weight: 500;
        color: var(--slate);
    }

.kpi-progress {
    height: 4px;
    background: #e2e8f0;
    border-radius: 99px;
    margin-top: 10px;
    overflow: hidden;
}

.kpi-progress-bar {
    height: 100%;
    border-radius: 99px;
    background: var(--kpi-color);
}

.kpi-sub {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}

.kpi-sub-lbl { font-size: 10px; color: #94a3b8; }
.kpi-sub-val { font-size: 11px; font-weight: 600; color: #475569; font-variant-numeric: tabular-nums; }

.dash-content-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 16px;
    margin-bottom: 16px;
}

.dash-card {
    background: var(--surface);
    border: 1px solid #e8edf3;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.dash-tabs {
    display: flex;
    padding: 0 16px;
    border-bottom: 1px solid #e8edf3;
}

.dash-tab-btn {
    padding: 14px 16px 13px;
    font-size: 12.5px;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    position: relative;
    border: none;
    background: transparent;
    font-family: inherit;
    white-space: nowrap;
}

    .dash-tab-btn.active {
        color: #0f172a;
        font-weight: 600;
    }

        .dash-tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2.5px;
            background: linear-gradient(90deg, var(--teal), var(--blue));
            border-radius: 2px 2px 0 0;
        }

.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .dash-table th {
        text-align: left;
        padding: 11px 18px;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: #94a3b8;
        border-bottom: 1px solid #f0f4f8;
        background: #fafbfd;
        white-space: nowrap;
    }

    .dash-table td {
        padding: 0 18px;
        height: 54px;
        color: #334155;
        border-bottom: 1px solid #f0f4f8;
        vertical-align: middle;
    }

    .dash-table tr:last-child td { border-bottom: none; }
    .dash-table tbody tr:hover td { background: #f6faff; }

.c-num {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    color: var(--green);
    font-size: 12px;
    background: rgba(30, 158, 107, 0.06);
}

.c-client {
    font-weight: 600;
    color: #1e293b;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-date { color: #94a3b8; font-size: 12px; font-weight: 500; }

.c-amount {
    text-align: right;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
}

    .c-amount small { font-size: 11px; color: var(--slate); }

.c-qty { text-align: center; font-weight: 600; color: #0f172a; }

.dash-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

    .dash-tag::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

    .dash-tag.paid { background: rgba(16, 185, 129, 0.09); color: #059669; border: 1px solid rgba(16, 185, 129, 0.18); }
    .dash-tag.pending { background: rgba(245, 158, 11, 0.09); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.2); }
    .dash-tag.new { background: rgba(6, 182, 212, 0.09); color: var(--cyan); border: 1px solid rgba(6, 182, 212, 0.2); }
    .dash-tag.draft { background: rgba(148, 163, 184, 0.1); color: #64748b; border: 1px solid rgba(148, 163, 184, 0.2); }

/* Badge « pièces jointes » (📎 N) dans les listes de documents */
.fj-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-dark, #0f766e);
    border: 1px solid rgba(20, 184, 166, 0.22);
    vertical-align: middle;
}

.stats-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.stat-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.stat-lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
}

    .stat-trend.up { background: rgba(16, 185, 129, 0.1); color: #059669; }
    .stat-trend.down { background: rgba(244, 63, 94, 0.1); color: var(--rose); }

.stat-val {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

    .stat-val small {
        font-size: 12px;
        font-weight: 500;
        color: #64748b;
    }

.stat-sub { font-size: 11px; color: #94a3b8; margin-top: 4px; }

.dash-bottom-row {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 16px;
}

.dash-chart { padding: 20px; }

.dash-chart-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 140px;
    border-bottom: 1px solid #e2e8f0;
}

.bar-group {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    flex: 1;
    height: 100%;
}

.bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
}

    .bar.sales { background: linear-gradient(180deg, var(--green), #059669); }
    .bar.purchases { background: linear-gradient(180deg, var(--amber), #d97706); }

.bar-labels {
    display: flex;
    margin-top: 8px;
    gap: 8px;
}

.bar-label {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.chart-legend {
    display: flex;
    gap: 18px;
    margin-top: 14px;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
}

.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.legend-dot.sales { background: var(--green); }
.legend-dot.purchases { background: var(--amber); }

.donuts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.donut-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.donut-label { font-size: 11px; font-weight: 700; text-align: center; }
.donut-track { fill: none; stroke: #e2e8f0; stroke-width: 8; }
.donut-fill { fill: none; stroke-width: 8; stroke-linecap: round; }
.donut-center { font-size: 12px; font-weight: 800; fill: #1e293b; }

@media (max-width: 1100px) {
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .dash-content-grid, .dash-bottom-row { grid-template-columns: 1fr; }
    .stats-col { display: grid; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .kpis { grid-template-columns: 1fr 1fr; }
    .stats-col { grid-template-columns: 1fr; }
    .dash-tabs { overflow-x: auto; }
    .dash-table th, .dash-table td { padding-left: 12px; padding-right: 12px; }
    .c-client { max-width: 120px; }
    .dash-table-scroll { overflow-x: auto; }
}
/* ============================================================================
   Schéma responsive des pages DOCUMENT (bon de réception, futurs BL/factures) :
   en-tête épuré + section repliable « Plus de détails » + lignes en cartes +
   totaux empilés. Desktop (>= 769px) STRICTEMENT inchangé — tout est sous media.
   ============================================================================ */
.doc-detail-toggle { display: none; }
.doc-totaux-mobile { display: none; }
.doc-field-erreur select { border-color: var(--red); }
.doc-field-erreur-note { font-size: 12px; color: var(--red); margin-top: 4px; }

@media (max-width: 768px) {
    .doc-detail-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 10px 14px;
        margin-bottom: 12px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
    }

    /* Champs repliés (entrepôt, exercice, N° BL…) — un tap sur le toggle les montre. */
    .doc-field-detail { display: none !important; }
    .doc-field-detail.open { display: block !important; }

    /* Totaux empilés : une ligne par montant, TTC mis en avant. */
    .doc-totaux-mobile {
        display: block;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 12px 16px;
        margin-bottom: 14px;
    }

    .doc-total-row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        font-size: 13.5px;
        border-bottom: 1px solid #f1f5f9;
    }

    .doc-total-row:last-child { border-bottom: none; }

    .doc-total-ttc {
        font-weight: 700;
        font-size: 15.5px;
        color: var(--teal);
    }

    /* Rangées de saisie (ligne, charge) : champs empilés pleine largeur au doigt.
       !important : les largeurs desktop sont posées en style inline. */
    .doc-saisie { flex-direction: column !important; align-items: stretch !important; }
    .doc-saisie > div { width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; margin-left: 0 !important; }
    .doc-saisie > button { width: 100%; }
    .doc-saisie-hide-mobile { display: none !important; }
}

/* En-tête des pages DOCUMENT en mobile : blocs empilés pleine largeur
   (Fournisseur → N° pièce → Date — l'ordre du markup suffit, les champs
   « détail » étant repliés). !important : la grille 3 colonnes desktop est
   posée en style inline sur la page. Réutilisable (BL client, factures…). */
@media (max-width: 768px) {
    .doc-entete { grid-template-columns: 1fr !important; }
    .doc-entete .fpro-2col { grid-template-columns: 1fr; }
}

/* Badge texte Caisse/Banque de l'écran Modes de règlement (réutilisable). */
.mode-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.mode-type-badge.caisse {
    background: var(--green-soft);
    color: var(--green);
}

.mode-type-badge.banque {
    background: var(--blue-soft);
    color: var(--blue);
}

/* Badge de MODE de règlement — pastels doux (réutilisable : règlement frs & client). */
.mode-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.5;
}

.mode-pill.mode-espece   { background: #e6f6ec; color: #17794b; }  /* vert pastel */
.mode-pill.mode-virement { background: #e7f0fd; color: #1e5fbf; }  /* bleu pastel */
.mode-pill.mode-cheque   { background: #efeafc; color: #6b46c1; }  /* indigo/violet pastel */
.mode-pill.mode-traite   { background: #fdf1dd; color: #b7791f; }  /* ambre pastel */
.mode-pill.mode-autre    { background: #eef1f5; color: #55617a; }  /* neutre */

/* Badge d'ÉTAT d'un règlement. */
.etat-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
}

.etat-badge.etat-valide     { background: var(--green-soft); color: var(--green); }
.etat-badge.etat-desimpute  { background: var(--amber-soft); color: var(--amber); }
.etat-badge.etat-brouillon  { background: #eef1f5; color: #55617a; }

/* Dark mode : pastels de mode réajustés pour rester lisibles. */
@media (prefers-color-scheme: dark) {
    .mode-pill.mode-espece   { background: rgba(23,121,75,.22);  color: #7ee2ab; }
    .mode-pill.mode-virement { background: rgba(30,95,191,.24);  color: #9cc2f7; }
    .mode-pill.mode-cheque   { background: rgba(107,70,193,.26); color: #c4b1f2; }
    .mode-pill.mode-traite   { background: rgba(183,121,31,.24); color: #ecc590; }
    .mode-pill.mode-autre    { background: rgba(85,97,122,.24);  color: #b8c1d4; }
}

/* Champs montant/date de la barre de filtres (liste des règlements ; réutilisable). */
.filter-row .filter-montant { max-width: 130px; }
.filter-row .filter-date { max-width: 160px; }

@media (max-width: 768px) {
    .filter-row .filter-montant,
    .filter-row .filter-date { max-width: none; flex: 1 1 45%; }
}

/* Coordonnées fournisseur (lecture seule) sous le sélecteur — bon de réception & futurs docs. */
.fpro-coords {
    margin: -2px 0 8px;
    padding: 8px 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.55;
}

.fpro-coords-k {
    color: var(--slate);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.03em;
    margin-right: 4px;
}

.fpro-coords-v {
    color: var(--ink);
}

/* Ligne du bon en cours d'édition en place (desktop + carte mobile). */
.doc-ligne-edit { background: var(--teal-soft) !important; }
.doc-ligne-edit input, .doc-ligne-edit select { min-width: 64px; }

.doc-card-edit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0;
}
.doc-card-edit > div { min-width: 0; }
.doc-card-edit label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--slate);
    margin-bottom: 2px;
}
.doc-card-edit-calc {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--slate);
}

/* ==========================================================================
   IMPRESSION DE DOCUMENTS (préfixe pf-) — patron réutilisable (bon, BL, factures).
   Layout minimal ; entête/pied PNG répétés sur chaque page (position:fixed en print) ;
   formats A4/A5 via @page nommés ; filigrane BROUILLON. Les chiffres viennent de
   CalculBon (aucun recalcul ici). Sur écran : aperçu « feuille » centrée.
   ========================================================================== */
/* Le format (@page size/margin) est émis INLINE par la page d'impression selon a4/a5 —
   plus robuste que les @page nommés pour l'impression PDF navigateur. */
.pf-root {
    font-family: 'Inter', Arial, sans-serif;
    color: #14181f;
    font-size: 12px;
    line-height: 1.4;
}
.pf-fmt-a5 { font-size: 10.5px; }

/* Aperçu écran : feuille centrée. Le padding (marges de contenu) est posé INLINE
   par la page selon les paramètres mm. */
.pf-sheet {
    background: #fff;
    max-width: 210mm;
    margin: 16px auto;
    box-shadow: 0 2px 18px rgba(0,0,0,0.12);
    position: relative;
    z-index: 1;
    min-height: 250mm;
}
.pf-fmt-a5 .pf-sheet { max-width: 148mm; min-height: 200mm; }

/* Papier à en-tête : fond de page UNIQUE, JAMAIS un background CSS (les navigateurs
   suppriment les fonds à l'impression). Une <img> position:fixed se répète sur CHAQUE
   page imprimée et s'imprime toujours. Même ratio A4/A5 → étirement sans déformation. */
.papier-fond {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
/* Avec papier, la feuille est transparente pour laisser voir le fond (écran + print). */
.pf-has-papier .pf-sheet { background: transparent; box-shadow: none; }

.pf-header-fallback { margin-bottom: 10px; }
.pf-header-fallback .pf-hf-nom { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 17px; color: #0c1730; }
.pf-header-fallback .pf-hf-sub { font-size: 11px; color: #55606f; }

.pf-title { text-align: center; margin: 6px 0 12px; }
.pf-title h1 { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; margin: 0; color: #0c1730; }
.pf-title .pf-title-sub { font-size: 11px; color: #55606f; margin-top: 2px; }
.pf-mention-interne { font-size: 10.5px; font-weight: 700; color: #8a94a4; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.pf-qte-total td { border-top: 2px solid #0c1730; padding-top: 5px; font-size: 12px; }

.pf-parties { display: flex; gap: 12px; margin-bottom: 10px; }
.pf-partie { flex: 1; border: 1px solid #e3e7ee; border-radius: 6px; padding: 8px 10px; }
.pf-partie-titre { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #8a94a4; margin-bottom: 4px; font-weight: 700; }
.pf-partie-nom { font-weight: 700; color: #0c1730; }
.pf-partie div { font-size: 11px; }

.pf-bandeau { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 7px 10px; background: #f5f7fa; border-radius: 6px; margin-bottom: 10px; font-size: 11px; }
.pf-bandeau b { color: #0c1730; }

.pf-lines { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.pf-lines th { background: #0c1730; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .02em; padding: 5px 6px; text-align: left; }
.pf-lines td { padding: 4px 6px; border-bottom: 1px solid #e8ebf1; font-size: 11px; vertical-align: top; }
.pf-lines .pf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-lines tbody tr { page-break-inside: avoid; }

.pf-bas { display: flex; gap: 12px; align-items: flex-start; page-break-inside: avoid; }
.pf-tva { flex: 1; }
.pf-tva table { border-collapse: collapse; width: 100%; }
.pf-tva th, .pf-tva td { border: 1px solid #e3e7ee; padding: 3px 6px; font-size: 10.5px; text-align: right; }
.pf-tva th { background: #f5f7fa; text-transform: uppercase; font-size: 9.5px; color: #55606f; }
.pf-tva th:first-child, .pf-tva td:first-child { text-align: left; }

.pf-totaux { width: 62mm; border-collapse: collapse; }
.pf-totaux td { padding: 3px 8px; font-size: 11.5px; }
.pf-totaux td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-totaux tr.pf-net td { font-weight: 800; font-size: 13px; color: #0c1730; border: 2px solid #0c1730; background: #f5f7fa; }

.pf-arrete { margin: 10px 0; font-size: 11.5px; page-break-inside: avoid; }
.pf-arrete b { text-transform: uppercase; }

.pf-observations { border: 1px solid #e3e7ee; border-radius: 6px; min-height: 16mm; padding: 6px 8px; margin-top: 8px; }
.pf-observations .pf-obs-label { font-size: 10px; text-transform: uppercase; color: #8a94a4; }

.pf-cachet-wrap { text-align: right; margin-top: 6px; page-break-inside: avoid; }
.pf-cachet { width: 40mm; max-height: 40mm; object-fit: contain; transform: rotate(-4deg); opacity: .95; }

.pf-watermark {
    position: absolute;
    top: 42%;
    left: 0; right: 0;
    text-align: center;
    font-family: 'Sora', sans-serif;
    font-size: 90px;
    font-weight: 800;
    color: rgba(220, 38, 38, 0.12);
    transform: rotate(-30deg);
    letter-spacing: .1em;
    pointer-events: none;
    z-index: 0;
}

/* ---- Rendu IMPRESSION ---- */
@media print {
    /* @page { margin: 0 } est émis inline ; les marges de contenu sont le padding du
       .pf-sheet (variables mm). La feuille remplit la page ; le fond papier (fixed) passe
       dessous, le contenu commence au titre (flux normal → jamais coupé/chevauché). */
    .pf-sheet { max-width: none; margin: 0; box-shadow: none; min-height: 0; background: transparent; }
    .pf-watermark { position: fixed; } /* filigrane répété par page, au-dessus du fond */
    .pf-lines thead { display: table-header-group; } /* thead répété à chaque saut de page */
    .pf-lines tfoot { display: table-footer-group; }
    /* couleurs pleines à l'impression (fonds/bordures foncés + IMAGE de fond papier) */
    .papier-fond, .pf-lines th, .pf-totaux tr.pf-net td, .pf-bandeau, .pf-tva th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   GABARIT DOCUMENTS COMMERCIAUX (doc-*) — RÉFÉRENCE UNIQUE des écrans « document »
   (bon de réception aujourd'hui ; BL client, factures demain).
   Zones & accents : partenaire = --blue, document = --teal, totaux = --amber ;
   rangée de saisie = liseré --teal ; états brouillon = --amber / validé = --green.
   RÉEMPLOI : reprendre le markup, changer les libellés + l'accent de la carte
   partenaire (client → --green via doc-card--partenaire-client).
   RÈGLE : aucune couleur en dur — uniquement les variables :root.
   Tout est borné à .doc-page (n'affecte pas les autres écrans partageant fpro-*).
   ========================================================================== */
.doc-page { max-width: 1280px; margin: 0 auto; }

/* --- En-tête de page (patron trésorerie) --- */
.doc-header { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.doc-header-main { flex: 1 1 auto; min-width: 240px; }
.doc-eyebrow { display: block; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--teal); }
.doc-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 4px; }
.doc-title { font-family: 'Sora', 'Segoe UI', sans-serif; font-size: 28px; font-weight: 700; color: var(--ink); margin: 0; }
.doc-subtitle { font-size: 13.5px; color: var(--slate); }
.doc-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }

.doc-badge-etat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
.doc-badge-etat .doc-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.doc-badge-etat svg { flex: none; }
.doc-badge-etat--draft { background: var(--amber-soft); color: var(--amber); }
.doc-badge-etat--valid { background: var(--green-soft); color: var(--green); }

/* --- Cartes d'en-tête (identité pastel par zone) --- */
.doc-cards-row { grid-template-columns: 1fr 1fr 1fr; margin-bottom: 14px; }
.doc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.doc-card__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.doc-card__icon { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--doc-accent-soft, var(--teal-soft)); color: var(--doc-accent, var(--teal)); }
.doc-card__icon svg { width: 16px; height: 16px; }
.doc-card__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--slate); }
.doc-card--partenaire { --doc-accent: var(--blue); --doc-accent-soft: var(--blue-soft); }
.doc-card--partenaire-client { --doc-accent: var(--green); --doc-accent-soft: var(--green-soft); } /* réemploi BL client */
.doc-card--document { --doc-accent: var(--teal); --doc-accent-soft: var(--teal-soft); }
.doc-card--totaux { --doc-accent: var(--amber); --doc-accent-soft: var(--amber-soft); }

/* --- Champs (labels + inputs) dans le gabarit --- */
.doc-page .fpro-field > label, .doc-page .fpro-2col label { font-size: 12px; font-weight: 600; color: var(--slate); margin-bottom: 3px; }
.doc-page .form-control, .doc-page .form-select { border-radius: 10px; border-color: var(--line); color: var(--ink); }
.doc-page .form-control:focus, .doc-page .form-select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
/* Lecture seule (bon validé) : fond --paper + texte --ink lisible (jamais gris illisible) */
.doc-page .form-control:disabled, .doc-page .form-select:disabled, .doc-page .form-control[readonly] {
    background: var(--paper); color: var(--ink); -webkit-text-fill-color: var(--ink); opacity: 1; cursor: default;
}
.doc-mono-input { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; }

/* Coordonnées partenaire : encart fond --paper */
.doc-page .fpro-coords { background: var(--paper); border-radius: 10px; padding: 10px 12px; }
.doc-page .fpro-coords-k { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--slate); }
.doc-page .fpro-coords-v { color: var(--ink); }

/* --- Carte Totaux : montants mono, hiérarchie --- */
.doc-page .fpro-kv-label { font-size: 12px; color: var(--slate); }
.doc-page .fpro-kv-value { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums; color: var(--ink); }
.doc-kv-ttc { font-size: 19px; font-weight: 600; color: var(--teal); }
.doc-kv-red { color: var(--red); }
.doc-kv-slate { color: var(--slate); }
.doc-red { color: var(--red); }
.doc-green { color: var(--green); }
/* Marge (bon de livraison) — indicateur écran uniquement, jamais imprimé. */
.doc-kv-marge-pos { color: var(--green); font-weight: 600; }
.doc-kv-marge-neg { color: var(--red); font-weight: 600; }
/* Alerte prix minimum (non bloquante) sur une ligne de vente. */
.doc-alerte-prixmin { padding: 8px 20px; color: var(--amber); background: var(--amber-soft); font-size: 12.5px; font-weight: 600; }
.doc-cell-prixmin { color: var(--amber); font-weight: 600; }
.doc-totaux-sep { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* --- Bandes utilitaires --- */
.doc-bande { padding: 10px 20px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.doc-bande-titre { display: flex; align-items: center; gap: 8px; }
.doc-bande-titre strong { font-size: 13px; color: var(--ink); }
.doc-bande-hint { font-size: 11px; color: var(--slate); }
.doc-bande-pastille { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--doc-accent-soft, var(--amber-soft)); color: var(--doc-accent, var(--amber)); }
.doc-bande-pastille svg { width: 14px; height: 14px; }
.doc-mini-lbl { font-size: 11px; font-weight: 600; color: var(--slate); }

/* Rangée de saisie produit : « la zone où on agit » — fond --paper + liseré --teal */
.doc-page .doc-saisie--produit { background: var(--paper); border-left: 3px solid var(--teal); }

/* --- Grille des lignes (standards tableau) --- */
.doc-page .crud-table-card { border-radius: 16px; }
.doc-page .crud-list thead th { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--slate); background: var(--thead-bg); }
/* Lignes saisies : fond très doux teinté teal (--row-soft) ; hover un cran plus
   soutenu (--teal-soft). Contraste bande blanche (saisie) / lignes pastel / totaux. */
.doc-page .crud-list tbody td { height: 48px; border-bottom: 1px solid var(--line); color: var(--ink); background: var(--row-soft); }
.doc-page .crud-list tbody tr:hover td { background: var(--teal-soft); }
.doc-page .crud-list .cell-mono { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; }
/* Ligne en édition : fond --teal-soft + liseré gauche --teal (repère visuel) */
.doc-page .crud-list tbody tr.doc-ligne-edit td { background: var(--teal-soft); }
.doc-page .crud-list tbody tr.doc-ligne-edit td:first-child { box-shadow: inset 3px 0 0 var(--teal); }
.doc-page .table-foot { font-size: 12.5px; color: var(--slate); }
.doc-page .table-foot .cell-mono, .doc-page .table-foot strong { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; }

/* Espacement des cartes du gabarit */
.doc-page .crud-table-card { margin-bottom: 14px; }

@media (max-width: 768px) {
    .doc-title { font-size: 22px; }
    .doc-header-actions { width: 100%; }
    .doc-header-actions .btn-filtres, .doc-header-actions .btn-nouveau { flex: 1 1 auto; justify-content: center; }
}

/* Compléments gabarit doc-* */
.doc-lbl-note { font-weight: 400; color: var(--slate); }
.doc-bande--center { align-items: center; }
.doc-bande-pastille--slate { background: var(--paper); color: var(--slate); }
.doc-bande-corps { padding: 10px 20px; }
.doc-vide-note { margin: 0; font-size: .9rem; font-style: italic; color: var(--slate); }

/* ==========================================================================
   GABARIT LISTES DE DOCUMENTS (doclist-*) — RÉFÉRENCE des listes « document »
   (bons de réception aujourd'hui ; BL client, factures demain).
   Réf visuelle : docs/maquette_liste_bons_reception.html. Couleurs = tokens :root
   (vert maquette → --teal/--teal-dark/--teal-soft ; bleu → --blue ; ambre → --amber ;
   rouge → --red ; encres/fonds → --ink/--slate/--paper/--surface/--line).
   RÉEMPLOI BL client/factures : même markup, changer libellés + accents.
   ========================================================================== */
/* --- Rangée de 4 KPIs (agrégés serveur sur l'ensemble filtré) --- */
.doclist-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.doclist-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; position: relative; overflow: hidden; }
.doclist-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kpi-bar, var(--teal)); }
.doclist-kpi-lbl { font-size: 12px; color: var(--slate); font-weight: 500; margin-bottom: 6px; }
.doclist-kpi-val { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.doclist-kpi-val .dh { font-size: 13px; font-weight: 600; color: var(--slate); margin-left: 2px; }
.doclist-kpi--count { --kpi-bar: var(--slate); }
.doclist-kpi--total { --kpi-bar: var(--blue); }
.doclist-kpi--regle { --kpi-bar: var(--teal); }
.doclist-kpi--reste { --kpi-bar: var(--red); }

/* --- Barre de filtres (pilules) --- */
.doclist-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.doclist-filters .form-select { width: auto; min-width: 172px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 9px 13px; font-size: 13px; font-weight: 500; color: var(--ink); }
.doclist-filters .form-select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.doclist-fclear { display: inline-flex; align-items: center; gap: 6px; color: var(--slate); font-size: 13px; font-weight: 500; background: none; border: none; cursor: pointer; padding: 9px 4px; }
.doclist-fclear:hover { color: var(--red); }
.doclist-fclear svg { width: 12px; height: 12px; }

/* --- Tableau (bornage .doclist : override du crud-list générique pour cet écran) --- */
.doclist .crud-list thead th { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); background: var(--thead-bg); padding: 14px 18px; }
.doclist .crud-list tbody td { padding: 14px 18px; font-size: 13.5px; vertical-align: middle; border-bottom: 1px solid var(--line); background: var(--surface); }
.doclist .crud-list tbody tr:hover td { background: var(--thead-bg); }

.doclist-piece { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; color: var(--ink); }
.doclist-piece-prov { color: var(--slate); font-style: italic; }
.doclist-note-pill { display: inline-flex; align-items: center; gap: 3px; background: var(--amber-soft); color: var(--amber); font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 20px; margin-left: 6px; vertical-align: middle; }
.doclist-note-pill svg { width: 9px; height: 9px; }
.doclist-date { color: var(--slate); font-variant-numeric: tabular-nums; }
.doclist-entrepot { color: var(--slate); }

.doclist-fourn { display: flex; align-items: center; gap: 10px; }
.doclist-avatar { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 11.5px; color: #fff; flex-shrink: 0; }
.doclist-fourn-name { font-weight: 600; color: var(--ink); }

.doclist .crud-list td.doclist-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.doclist-num .dh { font-size: 11px; font-weight: 500; color: var(--slate); margin-left: 2px; }

/* Colonne Règlement (fusion réglé + reste) : paybar + ligne réglé/reste */
.doclist-pay { min-width: 150px; }
.doclist-paybar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 6px; }
.doclist-paybar > i { display: block; height: 100%; background: var(--teal); border-radius: 3px; }
.doclist-payline { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--slate); font-variant-numeric: tabular-nums; }
.doclist-payline b { color: var(--red); font-weight: 700; }
.doclist-payline b.solde { color: var(--teal-dark); }
.doclist-pay-empty { color: var(--slate); }

/* Badges de statut pastel */
.doclist-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.doclist-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 20px; }
.doclist-badge .dot { width: 5px; height: 5px; border-radius: 50%; }
.doclist-badge--valide { background: var(--teal-soft); color: var(--teal-dark); }
.doclist-badge--valide .dot { background: var(--teal); }
.doclist-badge--partiel { background: var(--amber-soft); color: var(--amber); }
.doclist-badge--partiel .dot { background: var(--amber); }
.doclist-badge--brouillon { background: var(--amber-soft); color: var(--amber); }
.doclist-badge--brouillon .dot { background: var(--amber); }

/* Badge de SITUATION commerciale d'un devis (En cours / Accepté / Refusé) — suivi, indépendant de la couverture */
.devis-situation-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.devis-situation--encours { background: var(--amber-soft); color: var(--amber); }
.devis-situation--accepte { background: var(--teal-soft); color: var(--teal-dark); }
.devis-situation--refuse { background: var(--red-soft); color: var(--red); }

/* Boutons d'action (pastille 32px) */
.doclist-act { display: inline-flex; gap: 6px; }
.doclist-edit-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--slate); transition: all .15s; }
.doclist-edit-btn:hover { background: var(--teal-soft); color: var(--teal-dark); border-color: var(--teal-soft); }
.doclist-edit-btn.doclist-del-btn:hover { background: var(--red-soft); color: var(--red); border-color: var(--red-soft); }
.doclist-edit-btn svg { width: 14px; height: 14px; }

/* Pied : page active = --ink (maquette) */
.doclist .pager-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Mobile : KPIs 2×2 au-dessus des cartes */
@media (max-width: 768px) {
    .doclist-kpis { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
    .doclist-kpi-val { font-size: 19px; }
}

/* ============================================================================
   MODULE ÉTATS (T3a) — hub de cartes + badges de partie + tableau d'état
   ============================================================================ */
.etats-hub { max-width: 1280px; margin: 0 auto; padding: 4px 0 40px; }
.etats-cat { margin-top: 22px; }
.etats-cat-titre { font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.etats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.etat-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer;
    transition: box-shadow .15s, border-color .15s, transform .1s; min-height: 92px; }
.etat-carte:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(15,30,60,.08); border-color: var(--teal-soft); transform: translateY(-1px); }
.etat-carte-titre { font-weight: 600; font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.etat-carte-note { font-size: 11.5px; color: var(--slate); font-weight: 600; }
.etat-carte--avenir { opacity: .55; cursor: not-allowed; background: var(--paper); }

/* CT-4/P-12 — LANDING : cartes de catégorie (les 5 entrées du volet États) */
.etats-cats-grid { max-width: 1280px; margin: 0 auto; padding: 8px 0 40px; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.etat-cat-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-decoration: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; min-height: 116px;
    transition: box-shadow .15s, border-color .15s, transform .1s; }
.etat-cat-carte:hover { box-shadow: 0 8px 24px rgba(15,30,60,.10); border-color: var(--teal-soft); transform: translateY(-2px); }
.etat-cat-icone { font-size: 26px; line-height: 1; }
.etat-cat-nom { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); margin-top: 4px; }
.etat-cat-compte { font-size: 12.5px; color: var(--slate); font-weight: 600; }

/* CT-4/P-12 — page STUB Digistorm Académie */
.etat-academie-stub { max-width: 560px; margin: 40px auto; text-align: center; padding: 40px 28px;
    background: var(--surface); border: 1px dashed var(--line); border-radius: 18px; }
.etat-academie-icon { font-size: 48px; }
.etat-academie-stub h2 { font-family: 'Sora', sans-serif; color: var(--ink); margin: 12px 0 8px; }
.etat-academie-stub p { color: var(--slate); margin: 4px 0; }
.etat-academie-note { font-style: italic; font-size: 13px; }

/* CT-4/P-12 — STRUCTURE DESKTOP (calque WinDev) : bannière + GROUPES (colonnes) → CARTES colorées → rapports */
.etat-banner { position: relative; display: flex; align-items: center; gap: 16px; overflow: hidden;
    background: linear-gradient(120deg, var(--teal-dark), var(--teal)); color: #fff; border-radius: 14px;
    padding: 16px 24px; margin: 4px 0 22px; }
.etat-banner-ico { position: relative; width: 46px; height: 46px; display: grid; place-items: center;
    background: rgba(255,255,255,.15); border-radius: 12px; font-size: 22px; flex: none; }
.etat-banner-star { position: absolute; right: 0; bottom: -2px; font-size: 12px; color: var(--amber); }
.etat-banner-txt { z-index: 1; }
.etat-banner-titre { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 20px; }
.etat-banner-sous { font-size: 12.5px; opacity: .85; }
.etat-banner-deco { position: absolute; right: 90px; top: 0; bottom: 0; width: 180px; pointer-events: none; }
.etat-banner-deco span { position: absolute; border-radius: 50%; background: rgba(255,255,255,.10); }
.etat-banner-deco span:nth-child(1) { width: 62px; height: 62px; top: 6px; right: 40px; }
.etat-banner-deco span:nth-child(2) { width: 42px; height: 42px; top: 42px; right: 96px; }
.etat-banner-search { margin-left: auto; max-width: 240px; background: rgba(255,255,255,.94); z-index: 1; }

.etats-desktop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 26px;
    max-width: 1320px; margin: 0 auto; padding-bottom: 44px; align-items: start; }
.etat-groupe { display: flex; flex-direction: column; gap: 16px; }
.etat-groupe-titre { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark); }
.etat-groupe-titre::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.etat-carte-desk { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(15,30,60,.05); }
.etat-carte-desk-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #fff; font-weight: 600;
    font-size: 14px; background: linear-gradient(120deg, var(--teal-dark), var(--teal)); }
.etat-carte-desk-ico { font-size: 15px; }
.etat-carte-desk-body { padding: 8px 6px; display: flex; flex-direction: column; }
.etat-lien-desk { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none;
    border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 13.5px;
    transition: background .12s; }
.etat-lien-desk:hover:not(:disabled) { background: var(--teal-soft); }
.etat-chevron { color: var(--teal); font-weight: 700; font-size: 15px; }
.etat-lien-titre { flex: 1; }
.etat-lien-note { font-size: 12px; opacity: .8; }
.etat-lien-desk--off { color: var(--slate); cursor: not-allowed; opacity: .65; }
.etat-lien-desk--off .etat-chevron { color: var(--slate); }

@media (max-width: 1100px) { .etats-desktop { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 768px) { .etats-desktop { grid-template-columns: 1fr; } .etat-banner-search { display: none; } }

/* P-16 — filtre 3 choix de la balance des soldes (Solde TTC > 0 / Tous / Solde réel > 0) */
.etat-balance-radios { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.etat-balance-radios label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink); cursor: pointer; font-weight: 500; }

/* Badge de PARTIE (pastel §13) */
.etat-partie { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.etat-partie--physique { background: var(--teal-soft); color: var(--teal-dark); }
.etat-partie--facturee { background: var(--blue-soft); color: var(--blue); }
.etat-partie--tresorerie { background: var(--amber-soft); color: var(--amber); }
.etat-partie--ecart { background: var(--paper); color: var(--slate); border: 1px solid var(--line); }

/* Barre de filtres de l'état */
.etat-filtres { flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.etat-filtres > div { display: flex; flex-direction: column; gap: 2px; }
.etat-interne-note { color: var(--amber); font-weight: 600; font-size: 12px; }

/* Tableau d'état */
.etat-table thead th { position: sticky; top: 64px; background: var(--thead-bg); font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--slate); }
.etat-table tbody td { font-size: 13.5px; }
.etat-table tfoot .etat-total td { border-top: 2px solid var(--line); background: var(--row-soft); font-size: 13.5px; }

/* Impression d'un état — le tableau pf-* réutilisé */
.etat-print { width: 100%; font-size: 11px; }
.etat-print th, .etat-print td { padding: 4px 6px; }

/* Colonne « Alerte » (retard d'échéance) — mise en évidence rouge si valeur > 0 (T3c) */
.etat-alerte { color: var(--red); font-weight: 700; }

/* Note de lecture métier en pied d'état (ex. état d'écart — T3d) */
.etat-note-pied { margin: 10px 4px 0; padding: 10px 12px; background: var(--paper); border-left: 3px solid var(--slate); border-radius: 8px; font-size: 12.5px; color: var(--slate); line-height: 1.5; }

/* ============================================================================
   U1 — AUTHENTIFICATION : layout minimal (login / changement mdp) + menu user
   ============================================================================ */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: linear-gradient(135deg, #0c1730 0%, #101f42 100%); }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: 18px; padding: 34px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-brand-badge { width: 38px; height: 38px; border-radius: 11px; background: var(--ink); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 20px; }
.auth-brand-name { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 19px; color: var(--ink); }
.auth-brand-pro { color: var(--teal); }
.auth-title { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.auth-sub { font-size: 13px; color: var(--slate); margin: 0 0 20px; }
.auth-form { display: flex; flex-direction: column; }
.auth-label { font-size: 12px; font-weight: 600; color: var(--slate); margin: 12px 0 5px; }
.auth-input { height: 42px; }
.auth-submit { margin-top: 20px; height: 44px; justify-content: center; font-size: 15px; }
.auth-erreur { background: var(--red-soft); color: var(--red); border-radius: 9px; padding: 10px 12px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.auth-regles { margin: 12px 0 0; padding-left: 18px; font-size: 12px; color: var(--slate); line-height: 1.6; }
.auth-lien-form { text-align: center; margin-top: 14px; }
.auth-lien { background: none; border: none; color: var(--slate); font-size: 12.5px; cursor: pointer; text-decoration: underline; }

/* Menu utilisateur (TopBar) */
.user-chip-wrap { position: relative; }
.user-chip { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 10px; }
.user-chip:hover { background: var(--paper); }
.user-chevron { color: var(--slate); }
.user-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(15,30,60,.14); min-width: 220px; padding: 6px; z-index: 200; }
.user-menu-head { font-size: 11.5px; color: var(--slate); padding: 8px 10px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-weight: 600; }
.user-menu-form { margin: 0; }
.user-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.user-menu-item:hover { background: var(--paper); }
.user-menu-logout { color: var(--red); }
.sidebar-logout-form { margin: 0; }
.sidebar-logout-form .sidebar-link.logout { width: 100%; background: none; border: none; cursor: pointer; text-align: left; }

/* ===== U2 — ACCÈS REFUSÉ (garde de volet) ===== */
.acces-refuse { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 40px 16px; }
.acces-refuse-card { text-align: center; max-width: 420px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 40px 32px; box-shadow: 0 4px 24px rgba(15,23,42,.06); }
.acces-refuse-card svg { color: var(--red); }
.acces-refuse-card h1 { font-family: 'Sora', sans-serif; font-size: 24px; font-weight: 700; margin: 14px 0 8px; color: var(--ink); }
.acces-refuse-card p { color: var(--slate); font-size: 14.5px; margin: 0 0 6px; }
.acces-refuse-detail { font-size: 13px; color: var(--slate); font-style: italic; }
.acces-refuse-card a.btn-nouveau { display: inline-block; margin-top: 20px; text-decoration: none; }

/* ===== U2 — écran Utilisateurs : permissions & mot de passe temporaire ===== */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 18px; }
.perm-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.perm-check input { width: 16px; height: 16px; accent-color: var(--teal); }
.perm-bloc-titre { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--slate); margin: 4px 0 6px; }
.mdp-temp-box { background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 10px; padding: 14px 16px; margin: 8px 0; }
.mdp-temp-box strong { font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-size: 17px; color: var(--ink); letter-spacing: .5px; }
.mdp-temp-box .mdp-temp-hint { font-size: 12.5px; color: var(--slate); margin-top: 4px; }
.perm-info { font-size: 12.5px; color: var(--slate); font-style: italic; margin-top: 4px; }

/* ===== U3 — ligne de traçabilité (créé par / validé par) ===== */
.trac-ligne { font-size: 12px; color: var(--slate); margin-top: 6px; font-variant-numeric: tabular-nums; }
.trac-ligne strong { font-weight: 600; color: var(--ink); }

/* ===== S3 — Relevé produit ===== */
.releve-onglets { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 14px; }
.releve-onglet { background: none; border: none; padding: 9px 18px; font-size: 14.5px; font-weight: 600; color: var(--slate);
    cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -2px; }
.releve-onglet.active { color: var(--ink); border-bottom-color: var(--teal); }
.releve-onglet-sub { font-weight: 400; font-size: 12px; color: var(--slate); }
.releve-produit-choisi { padding: 7px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.releve-changer { background: none; border: none; color: var(--teal-dark); cursor: pointer; font-size: 12.5px; margin-left: 8px; text-decoration: underline; }
.releve-stockactuel { text-align: right; } .releve-stockactuel strong { font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.releve-solde-masque { font-size: 12.5px; color: var(--slate); background: var(--amber-soft); border-radius: 8px; padding: 6px 12px; margin-bottom: 8px; }
.releve-table tbody tr td { font-size: 13px; }
.releve-initial td { background: var(--green-soft) !important; }
.releve-row-achat td { background: color-mix(in srgb, var(--blue-soft) 55%, transparent); }
.releve-row-vente td { background: color-mix(in srgb, var(--green-soft) 45%, transparent); }
.releve-row-retour td { background: color-mix(in srgb, var(--amber-soft) 45%, transparent); }
.releve-piece { color: var(--blue); text-decoration: none; font-weight: 500; } .releve-piece:hover { text-decoration: underline; }
.releve-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.releve-controle-ok { color: var(--teal-dark); font-weight: 700; background: var(--teal-soft); padding: 4px 12px; border-radius: 20px; }
.releve-controle-ko { color: var(--red); font-weight: 700; background: var(--red-soft); padding: 4px 12px; border-radius: 20px; }
.releve-controle-neutre { color: var(--slate); font-style: italic; }

/* ===== S4 — balances partenaires enrichies (tuiles, sous-lignes, blocs) ===== */
.etat-tuiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
.etat-tuile { background: linear-gradient(135deg, var(--teal-dark), var(--teal)); color: #fff; border-radius: 10px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 4px; box-shadow: 0 2px 8px rgba(15,23,42,.10); }
.etat-tuile-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .9; font-weight: 600; }
.etat-tuile-val { font-family: 'Sora', sans-serif; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.etat-tuile-note { font-size: 10.5px; opacity: .85; font-style: italic; }
.etat-tuile.grise { background: var(--paper); color: var(--slate); box-shadow: none; border: 1px dashed var(--line); }
.etat-tuile.grise .etat-tuile-val { color: var(--slate); }
@media (max-width: 1100px) { .etat-tuiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .etat-tuiles { grid-template-columns: repeat(2, 1fr); } }
.etat-lien { color: var(--blue); text-decoration: none; font-weight: 500; } .etat-lien:hover { text-decoration: underline; }
.etat-sous-row td { background: var(--paper) !important; padding-top: 2px; padding-bottom: 4px; }
.etat-sous { font-size: 11px; color: var(--slate); padding-left: 18px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.etat-blocs { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; max-width: 620px; }
.etat-bloc { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-radius: 8px; font-size: 13.5px; }
.etat-bloc-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.etat-bloc-neutre { background: var(--teal-soft); color: var(--ink); }
.etat-bloc-vert { background: var(--green-soft); color: var(--ink); }
.etat-bloc-rouge { background: var(--red-soft); color: var(--red); }
.etat-bloc-grise { background: var(--paper); color: var(--slate); border: 1px dashed var(--line); font-style: italic; }
.etat-bloc-badge { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; background: var(--red); color: #fff; padding: 2px 8px; border-radius: 12px; font-style: normal; }

/* S4 — impression tuiles/blocs */
.etat-print-tuiles { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 11px; margin: 6px 0 10px; padding: 6px 8px; background: #f1f5f9; border-radius: 4px; }
.etat-print-blocs { margin-top: 8px; font-size: 11.5px; display: flex; flex-direction: column; gap: 2px; }

/* ===== R4 — TABLEAU DE BORD (données réelles) ===== */
.dash-periode { display: inline-flex; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.dash-periode-btn { border: 0; background: transparent; color: var(--slate); font: 600 13px 'Inter', sans-serif; padding: 6px 16px; border-radius: 7px; cursor: pointer; }
.dash-periode-btn.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.kpi-link { text-decoration: none; color: inherit; transition: box-shadow .12s, transform .12s; }
.kpi-link:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); transform: translateY(-1px); }
.kpi-go { color: var(--kpi-color); font-weight: 800; font-size: 15px; }

.dash-doc-link { color: var(--teal-dark); text-decoration: none; font-weight: 600; }
.dash-doc-link:hover { text-decoration: underline; }
.dash-empty { text-align: center; color: var(--slate); padding: 18px 0; font-size: 13px; }

.tres-comptes { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tres-compte { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.tres-compte-lbl { color: var(--ink); }
.tres-compte-lbl em { color: var(--slate); font-style: normal; font-size: 11px; margin-left: 4px; text-transform: uppercase; letter-spacing: .04em; }
.tres-compte-val { color: var(--ink); font-weight: 600; }
.tres-compte-val small { color: var(--slate); font-weight: 400; font-size: 10px; }
.tres-ed { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.tres-ed-item { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; color: var(--slate); }
.tres-ed-item strong { color: var(--ink); }
.tres-ed-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tres-ed-dot.enc { background: var(--green); }
.tres-ed-dot.dec { background: var(--red); }
.tres-ed-bars { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.tres-ed-bar { height: 8px; border-radius: 4px; min-width: 2px; }
.tres-ed-bar.enc { background: var(--green); }
.tres-ed-bar.dec { background: var(--red); }

.dash-alertes { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.dash-alerte { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.dash-alerte:hover { background: var(--teal-soft); }
.dash-alerte.rouge { background: var(--red-soft); border-color: rgba(225,29,72,.25); }
.dash-alerte-count { font: 800 16px 'Sora', sans-serif; min-width: 30px; text-align: center; color: var(--teal-dark); font-variant-numeric: tabular-nums; }
.dash-alerte.rouge .dash-alerte-count { color: var(--red); }
.dash-alerte-lbl { flex: 1; font-size: 13px; }
.dash-alerte-go { color: var(--slate); font-weight: 700; }

.dash-chart-full { width: 100%; }
.bar.bar-courant { background: var(--teal); }
.bar-label-courant { color: var(--ink); font-weight: 700; }

/* ===== R1 — badges de situation de règlement (chèque/traite) ===== */
.sit-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.sit-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sit-instance { background: var(--paper); color: var(--slate); }
.sit-encours { background: var(--amber-soft); color: var(--amber); }
.sit-encaisse { background: var(--teal-soft); color: var(--teal-dark); }
.sit-impaye { background: var(--red-soft); color: var(--red); }
.sit-none { background: var(--paper); color: var(--slate); }
.mode-differe-badge { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 20px; background: var(--amber-soft); color: var(--amber); }
/* échéance dépassée dans la grille des chèques non encaissés */
.etat-echeance-depassee { color: var(--red); font-weight: 700; }

/* R1 — grille des chèques/traites non encaissés (relevé enrichi) */
.etat-cheques-titre { margin: 16px 0 6px; font: 700 13px 'Sora', sans-serif; color: var(--ink); }
.etat-cheques th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); }
.etat-cheques td { font-size: 12.5px; }

/* R2 — sélecteur d'opération sur la fiche de règlement */
.op-radios { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.op-radio { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.op-radio input { margin: 0; }

/* P-04 — carte d'erreur LOCALE d'un bloc protégé (ErrorBoundary / échec de chargement) */
.bloc-erreur { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--amber); background: var(--amber-soft); border-radius: 10px; font-size: 13px; color: var(--ink); }
.bloc-erreur-ico { font-size: 16px; line-height: 1; }
.bloc-erreur-txt { flex: 1 1 auto; }
.bloc-erreur-btn { border: 1px solid var(--amber); background: #fff; color: var(--ink); border-radius: 7px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bloc-erreur-btn:hover { background: var(--amber-soft); }

/* ===== T9-f1 — SENS D'UN MOUVEMENT DE TRÉSORERIE =====
   ⚠️ Jamais « Débit / Crédit » : la correspondance Desktop est CROISÉE (Desktop « Débit » = notre
   'E'). Les libellés web sont « Entrée d'argent (+) » et « Sortie d'argent (−) », qui collent
   directement à 'E' et 'D'. Le vert MONTE le solde, le rouge le BAISSE. */
.sens-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.sens-badge.sens-entree { background: var(--green-soft); color: var(--green); }
.sens-badge.sens-sortie { background: var(--red-soft); color: var(--red); }
/* Montant coloré dans la liste : le signe se LIT, il n'est pas seulement écrit. */
.mvt-montant.entree { color: var(--green); font-weight: 600; }
.mvt-montant.sortie { color: var(--red); font-weight: 600; }

/* Marqueur de champ OBLIGATOIRE dans les fiches modales (colonne NOT NULL en base). */
.champ-requis { color: var(--red); font-weight: 700; margin-left: 2px; }

/* =============================================================================
   T11-a — AUTOCOMPLÉTION EN FEUILLE MOBILE (ClientPicker · FournisseurPicker · ProduitPicker)
   -----------------------------------------------------------------------------
   ⚠️⚠️ LE DÉFAUT CORRIGÉ ÉTAIT BLOQUANT : sans sélection de client, aucun document ne peut être
   créé. Le clavier virtuel AMPUTE la hauteur visible ; la liste, ancrée sous le champ, tombait
   dessous. Mesuré sur téléphone puis reproduit : champ à y=333..441 pour 400 px réellement
   visibles — le champ lui-même était DÉJÀ sous la ligne du clavier. Borner la liste (elle l'était
   déjà à 300 px) n'y pouvait donc rien, et scrollIntoView n'aurait fait que contourner, avec un
   timing dépendant du navigateur et du clavier réels — donc invérifiable en CI.

   LA FEUILLE SUPPRIME LA CLASSE DE PROBLÈMES, PAS L'INSTANCE : champ ET liste remontent en haut
   de l'écran, le clavier occupe le bas, le recouvrement devient impossible PAR CONSTRUCTION —
   quelle que soit la position d'origine du champ, la hauteur de la page ou le comportement du
   clavier.

   ⚠️ AUCUN VOILE ASSOMBRI : ce serait rouvrir le piège documenté des overlays plein écran, qui
   avalent le premier tap destiné aux autres contrôles. Le détachement se fait par fond opaque
   et ombre portée. La fermeture reste @onfocusout, la sélection @onmousedown, DOM inchangé.

   ⚠️ SPÉCIFICITÉ — NE PAS « SIMPLIFIER » : DigistormWeb.styles.css (CSS scopé) est chargé APRÈS
   app.css. Un `.cp-wrap.cp-sheet` (0,2,0) ferait donc ÉGALITÉ avec le `.cp-wrap[b-xxx]` scopé et
   PERDRAIT au dernier arrivé. D'où le `body` en tête (0,2,1), qui tranche indépendamment de
   l'ordre de chargement. Le sélecteur du panneau (0,3,0) gagne déjà de lui-même.
   ============================================================================= */
@media (max-width: 768px) {

    body .cp-wrap.cp-sheet,
    body .pp-wrap.pp-sheet {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 3000;
        padding: 10px 12px 12px;
        background: var(--surface, #fff);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    }

    /* La liste redevient un bloc ORDINAIRE sous le champ, à l'intérieur de la feuille :
       plus aucun ancrage absolu, donc plus rien qui puisse tomber sous le clavier.
       45vh laisse la place au clavier même sur les petits écrans. */
    .cp-wrap.cp-sheet .cp-panel,
    .pp-wrap.pp-sheet .pp-panel {
        position: static;
        margin-top: 8px;
        max-height: 45vh;
        width: auto;
        min-width: 0;
        max-width: 100%;
        overflow-y: auto;
    }

    /* ESPACEUR : le wrapper a quitté le flux, on réserve sa hauteur. Sans lui, le contenu
       remonterait d'un coup à l'ouverture de la liste — ce qui fait douter un utilisateur de
       ce qu'il vient de toucher. */
    .cp-spacer,
    .pp-spacer {
        height: 42px;
    }
}

/* Hors mobile, l'espaceur n'existe pas : la feuille est un comportement MOBILE, le desktop garde
   son menu déroulant classique (panneau en position absolue sous le champ). */
@media (min-width: 769px) {
    .cp-spacer,
    .pp-spacer {
        display: none;
    }
}

/* =============================================================================
   T11-b — LES 4 ÉCRANS DE RÈGLEMENT EN COLONNE UNIQUE SOUS 768 px
   -----------------------------------------------------------------------------
   ⚠️ CAUSE RACINE : `.fpro-grid` portait DÉJÀ une règle mobile `1fr`, mais les 4 pages la
   défaisaient par un `style="grid-template-columns: 1fr 1fr 1fr"` INLINE — et l'inline bat toute
   règle de media query. Résultat sur 400 px : 3 colonnes écrasées, texte cassé mot par mot
   (« encaissemen », « — chois »), et le bloc « Chèque / Traite » (colonne 3) démarrant EN HAUT
   alors que le mode de règlement (bas de colonne 1) était 350 px plus bas — l'ordre du geste
   était inversé. Mesuré avant correctif : chèque à y=85, mode à y=452.

   ⚠️ SPÉCIFICITÉ CHOISIE `.fpro-grid.fpro-grid-3` (0,2,0) : elle bat `.fpro-grid` (0,1,0)
   INDÉPENDAMMENT de l'ordre de déclaration. Une classe simple aurait fait égalité et son sort
   aurait dépendu de sa position dans le fichier — fragile au premier réagencement.
   ============================================================================= */
.fpro-grid.fpro-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 14px;
}

@media (max-width: 900px) {
    .fpro-grid.fpro-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Sous 768 px : COLONNE UNIQUE. L'ordre du DOM donne alors le geste réel —
   qui paie (client) → combien (montant) → comment (mode, compte) → chèque/traite s'il y en a un. */
@media (max-width: 768px) {
    .fpro-grid.fpro-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ---- Pavé explicatif repliable (NoteRepliable) ---- */
.fpro-note-toggle {
    display: none;              /* desktop : le pavé est déployé, le bouton n'a pas lieu d'être */
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding: 7px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--slate);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
}

.fpro-note-chevron {
    font-size: 10px;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .fpro-note-toggle {
        display: flex;
    }

    /* REPLIÉ PAR DÉFAUT : mesuré à 338-431 px de haut pour 400 px d'écran — il enterrait le
       formulaire. Il n'est pas supprimé (il porte une information réelle sur les effets),
       il est rangé derrière un libellé court. */
    .fpro-note-repli .fpro-note:not(.fpro-note-open) {
        display: none;
    }

    .fpro-note-repli .fpro-note {
        margin-top: 6px;
    }
}

/* =============================================================================
   T11-c — GRILLE D'IMPUTATION EN CARTES (MOBILE)
   -----------------------------------------------------------------------------
   ⚠️ Les cartes n'existent QUE sous 768 px : le tableau reste un tableau sur grand écran.
   Symétrique de `crud-desktop-table` (display:none en mobile) — les deux vues ne coexistent
   jamais à l'écran, alors qu'elles partagent les MÊMES objets en mémoire.
   ============================================================================= */
.imp-cartes {
    display: none;
}

@media (max-width: 768px) {
    .imp-cartes {
        display: block;
    }

    /* Le total imputé RESTE VISIBLE pendant la saisie : sur une longue liste, l'utilisateur perd
       de vue combien il a déjà affecté. Collant en tête de la section. */
    .imp-recap {
        position: sticky;
        top: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        margin-bottom: 10px;
        font-size: 12.5px;
        color: var(--slate);
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 8px;
    }

    .imp-recap strong {
        font-family: 'Inter', sans-serif;
        font-variant-numeric: tabular-nums;
        color: var(--ink);
    }

    /* Σ > montant : la validation le refusera. On le dit PENDANT la saisie, pas au refus. */
    .imp-recap-alerte {
        color: var(--red) !important;
    }

    .imp-carte {
        padding: 12px;
        margin-bottom: 10px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 12px;
    }

    .imp-carte-tete {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
    }

    .imp-piece {
        font-family: 'Sora', sans-serif;
        font-weight: 700;
        font-size: 14px;
        color: var(--ink);
    }

    .imp-date {
        font-size: 12px;
        color: var(--slate);
    }

    .imp-carte-kv {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 3px 10px;
        font-size: 12.5px;
        color: var(--slate);
    }

    .imp-carte-kv .num,
    .imp-reste .num,
    .imp-fige {
        font-family: 'Inter', sans-serif;
        font-variant-numeric: tabular-nums;
    }

    /* ⚠️ LE RESTE est le chiffre que l'utilisateur regarde AVANT de taper : détaché du reste des
       valeurs, en accent, jamais noyé dans la ligne. */
    .imp-reste {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin: 8px 0;
        padding: 7px 10px;
        font-size: 12.5px;
        color: var(--teal-dark);
        background: var(--teal-soft);
        border-radius: 8px;
    }

    .imp-reste strong {
        font-size: 15px;
        color: var(--teal-dark);
    }

    .imp-saisie {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .imp-saisie label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink);
        margin: 0;
    }

    .imp-saisie input {
        width: 140px;
        text-align: right;
    }

    .imp-vide {
        padding: 18px 12px;
        font-size: 13px;
        text-align: center;
        color: var(--slate);
    }
}