/* ============================================
   GESCOM WEB — THÈME (inspiré du projet ERP/POS)
   ============================================ */

:root {
    --primary-color: #232a57;
    --secondary-color: #34407a;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
    --light-bg: #f3f4f6;
    --border-color: #e5e7eb;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --sidebar-width: 260px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--light-bg);
    color: var(--text-dark);
    font-size: 0.95rem;
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */

.main-container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 20px 0;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.sidebar-brand {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.sidebar-brand h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.2rem;
}

.sidebar-brand small {
    opacity: 0.8;
    display: block;
    margin-top: 5px;
}

.sidebar-menu {
    list-style: none;
    padding: 0 10px;
}

.sidebar-menu li {
    margin-bottom: 5px;
}

.sidebar-menu a {
    display: block;
    padding: 12px 15px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.sidebar-menu a i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
}

.sidebar-titre { padding: 0 15px; margin: 15px 0 10px; font-size: 0.85rem; text-transform: uppercase; opacity: 0.7; }

/* Menu à sections repliables (Paramètres → Affichage du menu) */
.sidebar-section { margin-bottom: 2px; }
.sidebar-section-titre {
    display: flex; align-items: center; width: 100%; padding: 12px 15px; border: 0; border-radius: 6px;
    background: transparent; color: rgba(255, 255, 255, 0.9); font-weight: 600; text-align: left; cursor: pointer;
}
.sidebar-section-titre:hover, .sidebar-section.courante > .sidebar-section-titre { background-color: rgba(255, 255, 255, 0.08); color: #fff; }
.sidebar-section-titre > i:first-child { margin-right: 12px; width: 20px; text-align: center; }
.sidebar-section-titre span { flex: 1; }
.sidebar-chevron { font-size: 0.75rem; opacity: 0.7; transition: transform 0.2s ease; }
.sidebar-section.ouverte .sidebar-chevron { transform: rotate(180deg); }
.sidebar-sous-menu { list-style: none; padding: 0 0 4px 14px; margin: 0; display: none; }
.sidebar-section.ouverte > .sidebar-sous-menu { display: block; }
.sidebar-sous-menu a { padding: 9px 15px; font-size: 0.93rem; }

.sidebar-divider {
    margin: 15px 10px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
}

.content {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.navbar {
    background-color: white;
    border-bottom: 1px solid var(--border-color);
    padding: 15px 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.navbar-brand {
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-info {
    text-align: right;
}

.user-info .username {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.user-info .role {
    font-size: 0.8rem;
    color: var(--text-light);
}

.logout-btn {
    background-color: var(--danger-color);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background-color: #dc2626;
}

.main-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
}

/* ============================================
   PAGE TITRE ET SOUS-TITRE
   ============================================ */

.page-header {
    margin-bottom: 30px;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.page-subtitle {
    font-size: 0.95rem;
    color: var(--text-light);
}

.page-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

/* ============================================
   STATISTIQUES
   ============================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.stat-card.primary {
    border-left-color: var(--primary-color);
}

.stat-card.success {
    border-left-color: var(--success-color);
}

.stat-card.danger {
    border-left-color: var(--danger-color);
}

.stat-card.warning {
    border-left-color: var(--warning-color);
}

.stat-card.info {
    border-left-color: var(--info-color);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 10px;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
}

.stat-icon {
    font-size: 2rem;
    opacity: 0.2;
    float: right;
}

/* ============================================
   TABLEAUX
   ============================================ */

.table-responsive {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.table {
    margin-bottom: 0;
    border-collapse: collapse;
}

.table thead th {
    background-color: var(--light-bg);
    color: var(--text-dark);
    font-weight: 600;
    border: none;
    padding: 15px;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.table tbody td {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.table tbody tr {
    transition: background-color 0.2s ease;
}

.table tbody tr:hover {
    background-color: #fafafa;
}

.table-actions {
    display: flex;
    gap: 8px;
}

.table-actions .btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 5px;
}

/* ============================================
   BOUTONS
   ============================================ */

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: #1a2047;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(35, 42, 87, 0.3);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background-color: #1e3a5f;
}

.btn-success {
    background-color: var(--success-color);
    color: white;
}

.btn-success:hover {
    background-color: #059669;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background-color: #dc2626;
}

.btn-warning {
    background-color: var(--warning-color);
    color: white;
}

.btn-warning:hover {
    background-color: #d97706;
}

.btn-info {
    background-color: var(--info-color);
    color: white;
}

.btn-info:hover {
    background-color: #2563eb;
}

.btn-light {
    background-color: white;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}

.btn-light:hover {
    background-color: var(--light-bg);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-icon {
    padding: 8px 8px;
    min-width: 36px;
    text-align: center;
}

/* ============================================
   FORMULAIRES
   ============================================ */

.form-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-dark);
}

.form-label .required {
    color: var(--danger-color);
}

.form-control {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(35, 42, 87, 0.1);
}

.form-control.error {
    border-color: var(--danger-color);
}

.form-text {
    display: block;
    margin-top: 5px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.form-error {
    color: var(--danger-color);
    font-size: 0.85rem;
    margin-top: 5px;
}

select.form-control {
    cursor: pointer;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    justify-content: center;
}

/* ============================================
   ALERTES ET NOTIFUCATIONS
   ============================================ */

.alert {
    padding: 15px 20px;
    border-radius: 6px;
    margin-bottom: 20px;
    border-left: 4px solid;
}

.alert-success {
    background-color: #ecfdf5;
    border-left-color: var(--success-color);
    color: #065f46;
}

.alert-danger {
    background-color: #fef2f2;
    border-left-color: var(--danger-color);
    color: #7f1d1d;
}

.alert-warning {
    background-color: #fffbeb;
    border-left-color: var(--warning-color);
    color: #78350f;
}

.alert-info {
    background-color: #eff6ff;
    border-left-color: var(--info-color);
    color: #0c2d48;
}

.alert-dismissible {
    position: relative;
    padding-right: 40px;
}

.alert .close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.7;
}

.alert .close:hover {
    opacity: 1;
}

/* ============================================
   BADGES ET TAGS
   ============================================ */

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-primary {
    background-color: #dbeafe;
    color: #0c2d48;
}

.badge-success {
    background-color: #dcfce7;
    color: #166534;
}

.badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-info {
    background-color: #dbeafe;
    color: #0c2d48;
}

/* ============================================
   MODAL/POPUPS
   ============================================ */

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    background-color: var(--light-bg);
}

.modal-title {
    font-weight: 700;
    color: var(--text-dark);
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination {
    margin-top: 20px;
    justify-content: center;
}

.pagination .page-link {
    color: var(--primary-color);
    border-color: var(--border-color);
    border-radius: 5px;
    margin: 0 3px;
}

.pagination .page-link:hover {
    background-color: var(--light-bg);
    border-color: var(--primary-color);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ============================================
   PAGE DE CONNEXION
   ============================================ */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.login-card {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.login-header p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* ============================================
   RESPONSIVE — éléments communs
   ============================================ */

/* Bouton ☰ et bouton de fermeture : visibles seulement en mode mobile/tablette */
.menu-toggle,
.sidebar-close {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.menu-toggle {
    font-size: 1.4rem;
    color: var(--primary-color);
    padding: 8px 12px 8px 0;
    margin-right: 4px;
}

.sidebar-close {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #fff;
    font-size: 1.3rem;
    padding: 6px 10px;
    z-index: 2;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 900;
}

.navbar-logo {
    height: 40px;
    margin-right: 12px;
    object-fit: contain;
}

.navbar-titre { min-width: 0; }

.navbar-societe {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-sous-titre { font-size: 0.75rem; opacity: 0.8; }

/* min-width: 0 à chaque niveau : sinon le nom de la société empêche la barre
   de rétrécir et la page déborde à droite sur mobile */
.navbar > div { min-width: 0; }
.navbar .navbar-brand { min-width: 0; flex: 1 1 auto; overflow: hidden; margin-right: 10px; }
.navbar-titre { overflow: hidden; }
.navbar .user-menu { flex: 0 0 auto; }

/* Les boutons « petits » et « grands » de Bootstrap gardent leur taille
   (la règle .btn générale plus haut l'écrasait) */
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.btn-lg { padding: 0.7rem 1.4rem; font-size: 1.1rem; }

/* Bouton « Filtres » (inséré par script.js), visible seulement sur mobile */
.filter-toggle { display: none; }

/* Le contenu ne déborde jamais horizontalement : sans min-width: 0, un élément
   flexible s'élargit à la taille de son contenu (tableau large, nom long…)
   au lieu de laisser ce contenu défiler dans sa propre zone */
.content,
.main-content { min-width: 0; }
img { max-width: 100%; }

/* ============================================
   TABLETTE ET MOBILE (< 992 px) : menu coulissant
   ============================================ */

@media screen and (max-width: 991.98px) {
    .menu-toggle,
    .sidebar-close {
        display: inline-block;
    }

    .sidebar {
        width: min(300px, 85vw);
        left: 0;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1050;
        padding-top: 10px;
    }

    body.menu-ouvert .sidebar { transform: translateX(0); }
    body.menu-ouvert .sidebar-overlay { display: block; }
    body.menu-ouvert { overflow: hidden; }

    .content { margin-left: 0; }

    .navbar { padding: 10px 15px; }
    .main-content { padding: 20px 15px; }

    /* Liens du menu plus faciles à toucher */
    .sidebar-menu a { padding: 14px 15px; }
}

/* ============================================
   MOBILE (< 768 px)
   ============================================ */

@media screen and (max-width: 767.98px) {
    body { font-size: 0.92rem; }

    /* Barre du haut compacte */
    .navbar-sous-titre,
    .navbar-logo,
    .user-info .role,
    .logout-texte { display: none; }
    .navbar-societe { font-size: 0.95rem; }
    .user-menu { gap: 8px; }
    .user-info .username { font-size: 0.85rem; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .logout-btn { padding: 8px 11px; }

    .main-content { padding: 15px 10px; }

    /* En-tête de page */
    .page-header { margin-bottom: 18px; }
    .page-title { font-size: 1.35rem; line-height: 1.3; }
    .page-subtitle { font-size: 0.85rem; }
    .page-actions { gap: 6px; margin-top: 10px; }
    .page-actions .btn { padding: 8px 12px; font-size: 0.85rem; flex: 1 1 auto; }
    .page-actions .btn-lg { flex-basis: 100%; }

    /* Statistiques : 2 par ligne */
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
    .stat-card { padding: 12px; }
    .stat-label { font-size: 0.75rem; }
    .stat-value,
    .stat-value[style] { font-size: 1.1rem !important; word-break: break-word; }
    .stat-card small { font-size: 0.72rem; }

    .detail-card { padding: 14px; border-radius: 8px; margin-bottom: 14px; }
    .detail-card[style*="max-width"] { max-width: 100% !important; }
    form.detail-card[style*="max-width"],
    .alert[style*="max-width"] { max-width: 100% !important; }

    /* Filtres repliables */
    .filter-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .filter-card.filtres-replies { display: none !important; }
    .filter-card { padding: 12px; }

    /* Formulaires : 16 px minimum évite le zoom automatique sur iPhone */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    textarea { font-size: 16px !important; }

    .btn { min-height: 40px; }
    .btn-sm { min-height: 36px; min-width: 36px; }

    /* Modales plein écran ou presque */
    .modal-dialog { margin: 10px; }

    /* Tableaux standards : défilement horizontal fluide */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table thead th { padding: 10px 8px; font-size: 0.75rem; }
    .table td { padding: 8px; }

    /* ---- Tableaux de liste transformés en cartes ---- */
    .table-stack thead { display: none; }
    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td { display: block; width: 100%; }
    .table-stack tr {
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 6px 10px;
        margin-bottom: 10px;
        background: #fff;
    }
    .table-stack td {
        display: flex;
        justify-content: flex-end;      /* valeurs groupées à droite… */
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        border: none !important;
        padding: 4px 0 !important;
        text-align: right !important;
        min-height: 0;
    }
    .table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-light);
        font-size: 0.78rem;
        text-transform: uppercase;
        text-align: left;
        flex: 0 0 auto;
        max-width: 45%;
        margin-right: auto;             /* …et libellé poussé à gauche */
    }
    .table-stack td[data-label=""]::before { display: none; }
    /* Première cellule = titre de la carte */
    .table-stack td:first-child {
        font-size: 1rem;
        border-bottom: 1px solid var(--light-bg) !important;
        padding-bottom: 8px !important;
        margin-bottom: 2px;
    }
    .table-stack tr.row-cancelled { opacity: 0.75; }

    /* Tableaux de détail posés directement dans une carte : défilement horizontal */
    .detail-card > table.table:not(.table-stack) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Listes de définitions (fiches) : libellé au-dessus de la valeur */
    .detail-card dl.row > dt { margin-top: 4px; }
    .table-stack .text-nowrap { white-space: normal !important; }
}

/* ============================================
   TRÈS PETIT MOBILE (< 360 px)
   ============================================ */

@media screen and (max-width: 359.98px) {
    .stats-grid { grid-template-columns: 1fr; }
    .user-info { display: none; }
}

/* ============================================
   PAGE DE CONNEXION
   ============================================ */

@media (max-width: 576px) {
    .login-card { padding: 20px; }
    .form-card { padding: 20px; }
}

/* ============================================
   UTILITAIRES
   ============================================ */

.text-muted {
    color: var(--text-light);
}

.text-danger {
    color: var(--danger-color);
}

.text-success {
    color: var(--success-color);
}

.text-warning {
    color: var(--warning-color);
}

.text-primary {
    color: var(--primary-color);
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 5px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 15px; }
.mt-4 { margin-top: 20px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 15px; }
.mb-4 { margin-bottom: 20px; }

.text-center { text-align: center; }
.text-right { text-align: right; }

.no-data {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
}

.no-data i {
    font-size: 3rem;
    opacity: 0.3;
    display: block;
    margin-bottom: 15px;
}

/* ============================================
   MODULES : FILTRES, VIGNETTES, LIGNES DYNAMIQUES
   ============================================ */

.filter-card {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    background: #f3f4f6;
}

.thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table td, .table th { vertical-align: middle; }
.row-cancelled td { color: #9ca3af; text-decoration: line-through; }
.row-cancelled td.keep { text-decoration: none; }

.lines-table input, .lines-table select { min-width: 90px; }

.detail-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}

.detail-card dt { color: #6b7280; font-weight: 500; }

/* En-tête société visible seulement à l'impression */
.print-only { display: none; }

/* ============================================
   IMPRESSION
   ============================================ */

/* ============================================
   CADRE D'IMPRESSION
   À l'écran : simple bloc, sans effet. À l'impression : tableau dont l'en-tête
   et le pied (vides) se répètent sur CHAQUE page et servent de marges haute et basse.
   ============================================ */
.cadre-impression,
.cadre-impression > tbody,
.cadre-impression > tbody > tr,
.cadre-impression > tbody > tr > td { display: block; width: 100%; padding: 0; border: 0; }
.cadre-impression > thead,
.cadre-impression > tfoot { display: none; }

@media print {
    /* Marge de page nulle : le navigateur n'a plus de place pour imprimer
       l'adresse de la page, la date et le titre dans les marges */
    @page { margin: 0; }

    .sidebar, .navbar, .no-print, .page-actions, .filter-card, .filter-toggle, .pagination, .btn,
    .sidebar-overlay, .pos-barre, .mvt-barre {
        display: none !important;
    }
    html, body { background: #fff !important; }
    .content { margin-left: 0 !important; }
    .main-container { background: #fff !important; }
    /* Marges gauche/droite (valables sur toutes les pages) */
    .main-content { padding: 0 12mm !important; }

    /* Marges haute/basse répétées sur chaque page */
    .cadre-impression { display: table; width: 100%; border-collapse: collapse; }
    .cadre-impression > thead { display: table-header-group; }
    .cadre-impression > tfoot { display: table-footer-group; }
    .cadre-impression > tbody { display: table-row-group; }
    .cadre-impression > tbody > tr,
    .cadre-impression > thead > tr,
    .cadre-impression > tfoot > tr { display: table-row; }
    .cadre-impression td { display: table-cell; padding: 0; }
    .cadre-marge { height: 10mm; }

    /* Aucune zone défilante à l'impression : tout le contenu est déroulé */
    * { overflow: visible !important; }
    ::-webkit-scrollbar { display: none; }
    .table-responsive, .catalogue, .panier-lignes, .mvt-cat { max-height: none !important; }
    .text-nowrap { white-space: normal !important; }
    .table { width: 100% !important; font-size: 10pt; }
    .table thead { display: table-header-group; }   /* en-têtes de colonnes répétés sur chaque page */
    .table tr { page-break-inside: avoid; }

    .print-only { display: block !important; }
    .stat-card, .detail-card { box-shadow: none !important; border: 1px solid #ddd; break-inside: avoid; }
    .detail-card:has(table) { break-inside: auto; }
    a { text-decoration: none; color: #000; }
}

/* ============================================
   UTILITAIRES (le thème fonctionne sans Bootstrap)
   ============================================ */
button, input, select, textarea { font: inherit; }
table { border-collapse: collapse; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; }
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow-1 { flex-grow: 1; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 16px; }
.w-100 { width: 100% !important; }
.me-1 { margin-right: 4px; } .me-2 { margin-right: 8px; } .ms-1 { margin-left: 4px; } .ms-2 { margin-left: 8px; } .ms-auto { margin-left: auto; }
.small, small { font-size: .85em; }
.fw-bold { font-weight: 700; } .fw-semibold { font-weight: 600; }
.text-end { text-align: right; }
.text-nowrap { white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn-outline-primary { background: #fff; color: var(--primary-color); border: 1px solid var(--primary-color); }
.btn-outline-primary:hover { background: #eef3fb; }
.btn-lg { padding: .7rem 1.4rem; font-size: 1.1rem; }
.btn i, .bouton i { pointer-events: none; }
.row-2col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 991.98px) { .row-2col { grid-template-columns: minmax(0, 1fr); } }

/* ============================================
   GESCOM : COMPOSANTS DES PAGES EXISTANTES
   (mêmes couleurs et formes que le thème ci-dessus)
   ============================================ */

:root {
    /* Alias utilisés par les composants GESCOM */
    --principal: var(--primary-color);
    --principal-fonce: #1a2047;
    --fond: var(--light-bg);
    --surface: #ffffff;
    --texte: var(--text-dark);
    --discret: var(--text-light);
    --bordure: var(--border-color);
    --danger: var(--danger-color);
    --succes: #059669;
    --rayon: 10px;
}

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

/* Cartes */
.carte {
    background: #fff; border-radius: 10px; padding: 20px; margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: 0;
}
.carte h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 15px; color: var(--text-dark); }
.carte h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); margin: 0 0 .6rem; font-weight: 700; }

/* Indicateurs = cartes de statistiques */
.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 25px; }
.indicateur {
    background: #fff; padding: 20px; border-radius: 10px; border-left: 4px solid var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 4px;
    transition: box-shadow .3s ease, transform .3s ease; margin-bottom: 0;
}
.indicateur:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }
.indicateurs > .indicateur:nth-child(4n+2) { border-left-color: var(--success-color); }
.indicateurs > .indicateur:nth-child(4n+3) { border-left-color: var(--warning-color); }
.indicateurs > .indicateur:nth-child(4n+4) { border-left-color: var(--info-color); }
.indicateur .etiquette, .etiquette { font-size: .8rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.indicateur strong { font-size: 1.45rem; font-weight: 700; color: var(--text-dark); font-variant-numeric: tabular-nums; }
.indicateurs.mini { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.indicateurs.mini .indicateur { padding: 12px 14px; }
.indicateurs.mini strong { font-size: 1.2rem; }
.discret { color: var(--text-light); font-size: .88rem; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }

/* Tableaux des pages GESCOM */
.table-defile { overflow-x: auto; }
.carte table, .detail-card table:not(.table) { width: 100%; border-collapse: collapse; }
.carte th, .carte td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; vertical-align: middle; }
.carte th {
    background: var(--light-bg); color: var(--text-dark); font-weight: 600; text-transform: uppercase;
    font-size: .78rem; letter-spacing: .5px; border-bottom: 2px solid var(--border-color);
}
.carte tbody tr { transition: background-color .2s ease; }
.carte tbody tr:hover { background: #fafafa; }
.nombre { text-align: right !important; font-variant-numeric: tabular-nums; }
.negatif { color: var(--danger-color); font-weight: 600; }
.vide { text-align: center !important; color: var(--text-light); padding: 30px 15px !important; }
.table-cliquable tbody tr { cursor: pointer; }
.table-cliquable tbody tr:hover { background: #eef3fb; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.5rem; margin: 0; }
.details dt { color: var(--text-light); font-weight: 500; }
.details dd { margin: 0; }

/* Formulaires GESCOM (mêmes champs que .form-control) */
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.champs .large { grid-column: 1 / -1; }
.carte label, .barre-actions label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--text-dark); margin: 0; }
.carte input:not([type=checkbox]):not([type=radio]), .carte select, .carte textarea,
.barre-actions input:not([type=checkbox]):not([type=radio]), .barre-actions select, .recherche input, .recherche select {
    font: inherit; font-weight: 400; color: var(--text-dark); padding: 9px 13px; border: 1px solid var(--border-color);
    border-radius: 6px; background: #fff; transition: border-color .2s, box-shadow .2s; min-width: 0;
}
.carte input:focus, .carte select:focus, .barre-actions input:focus, .barre-actions select:focus {
    outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(35, 42, 87, 0.1);
}
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; flex-wrap: wrap; }
.case { flex-direction: row !important; align-items: center; gap: .5rem !important; font-weight: 500 !important; }
h2.separe, .separe { margin-top: 1.8rem !important; padding-top: 1.2rem; border-top: 1px solid var(--border-color); }

/* Barre d'actions et filtres */
.barre-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.barre-actions form { margin: 0; }
form.recherche, .barre-actions > form.recherche {
    flex: 1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    background: #fff; border-radius: 10px; padding: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
form.barre-actions.recherche { width: 100%; }
.recherche input[type=search] { flex: 1; min-width: 200px; }

/* Boutons GESCOM = boutons du thème */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 18px; border-radius: 6px; font-weight: 600; font-size: .93rem; cursor: pointer;
    border: 1px solid var(--border-color); background: #fff; color: var(--text-dark);
    transition: all .25s ease; text-decoration: none; line-height: 1.3;
}
.bouton:hover { background: var(--light-bg); text-decoration: none; color: var(--text-dark); }
.bouton-principal { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.bouton-principal:hover { background: #1a2047; color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(35, 42, 87, 0.3); }
.bouton-danger { background: var(--danger-color); border-color: var(--danger-color); color: #fff; }
.bouton-danger:hover { background: #dc2626; color: #fff; }
.lien { background: none; border: 0; padding: 0 0 0 .6rem; font: inherit; font-size: .8rem; font-weight: 400; color: var(--secondary-color); cursor: pointer; }
.lien:hover { text-decoration: underline; }

/* Messages GESCOM = alertes du thème */
.alerte { padding: 14px 18px; border-radius: 6px; margin-bottom: 18px; border-left: 4px solid; }
.alerte-succes { background: #ecfdf5; border-left-color: var(--success-color); color: #065f46; }
.alerte-erreur { background: #fef2f2; border-left-color: var(--danger-color); color: #7f1d1d; }
.alerte-info { background: #eff6ff; border-left-color: var(--info-color); color: #0c2d48; }

/* Badges (priorité sur ceux de Bootstrap) */
.badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; background: #dbeafe; color: #0c2d48; white-space: nowrap; }
.badge:empty { display: none; }
.badge-pf { background: #dcfce7; color: #166534; }
.badge-mp { background: #fef3c7; color: #92400e; }
.badge-gris { background: #e5e7eb; color: #4b5563; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }

/* Pagination GESCOM */
nav.pagination { display: flex; gap: .3rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; justify-content: flex-start; }
nav.pagination a { padding: .35rem .75rem; border: 1px solid var(--border-color); border-radius: 5px; color: var(--primary-color); background: #fff; }
nav.pagination a:hover { background: var(--light-bg); text-decoration: none; }
nav.pagination a.actif { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.pagination-info { margin-left: auto; color: var(--text-light); font-size: .88rem; }

/* Lignes annulées */
tr.annulee td { color: #9ca3af; }
tr.annulee td.nombre { text-decoration: line-through; }
tr.annulee td.nombre:last-child, tr.annulee td.keep { text-decoration: none; }

/* Carte d'alerte (ventes à encaisser) */
.carte-alerte { border-left: 4px solid var(--warning-color); background: #fffbeb; }

/* Barre latérale : bloc marque compact */
.sidebar-brand h5 { font-size: 1rem; }
.sidebar-sous-menu a i { margin-right: 10px; width: 18px; text-align: center; }
a.logout-btn { text-decoration: none; display: inline-block; }
a.logout-btn:hover { color: #fff; text-decoration: none; }

@media print {
    .bouton, .barre-actions, nav.pagination, .alert { display: none !important; }
    .carte, .indicateur { box-shadow: none !important; border: 1px solid #ddd; }
}
@media (max-width: 767.98px) {
    .grille-2 { grid-template-columns: 1fr; }
    .indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .indicateur { padding: 12px; }
    .indicateur strong { font-size: 1.1rem; }
    .carte { padding: 14px; }
    form.recherche { padding: 12px; }
}

/* ============================================
   GESCOM : MODULES
   ============================================ */

/* ---------- Assistant de configuration ---------- */
.assistant-page { min-height: 100vh; }
.assistant { max-width: 760px; margin: 0 auto; padding: 2rem 16px 3rem; }
.assistant-entete { text-align: center; margin-bottom: 1.4rem; }
.assistant-entete p { margin: .2rem 0 0; }
.logo-assistant { font-size: 1.8rem; font-weight: 700; color: var(--principal); letter-spacing: .04em; }

.etapes { display: flex; list-style: none; padding: 0; margin: 0 0 1.4rem; gap: .4rem; }
.etapes li {
    flex: 1; display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--discret);
    padding: .6rem .7rem; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
}
.etapes li span {
    display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; flex-shrink: 0;
    border-radius: 50%; background: var(--fond); font-weight: 600;
}
.etapes li.actif { border-color: var(--principal); color: var(--texte); font-weight: 600; }
.etapes li.actif span { background: var(--principal); color: #fff; }
.etapes li.fait span { background: #d8ecdf; color: var(--succes); }

.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin: 1rem 0; }
.option {
    flex-direction: row; align-items: flex-start; gap: .7rem; cursor: pointer; color: var(--texte);
    padding: .8rem 1rem; border: 1px solid var(--bordure); border-radius: var(--rayon);
}
.option:has(input:checked) { border-color: var(--principal); background: #eef5fb; }
.option input { margin-top: .2rem; }
.option span { display: flex; flex-direction: column; gap: .15rem; }
.option small { color: var(--discret); }

form:has(input[name="mode"][value="dsn"]:checked) .bloc-serveur,
form:has(input[name="mode"][value="serveur"]:checked) .bloc-dsn { display: none; }
.bloc-dsn, .bloc-serveur { margin-bottom: 1rem; }

.case { flex-direction: row; align-items: center; gap: .5rem; margin-top: .8rem; }
.separe { margin-top: 1.8rem !important; padding-top: 1.2rem; border-top: 1px solid var(--bordure); }
.alerte-info { background: #eaf2fa; color: #1c4a6e; }
.indicateurs.mini { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; }
.indicateurs.mini strong { font-size: 1.3rem; }
.liste-tables code { display: inline-block; margin: .15rem; padding: .1rem .4rem; background: var(--fond); border-radius: 4px; }
.journal { display: flex; flex-direction: column; gap: .6rem; max-height: 320px; overflow: auto; margin-bottom: .8rem; }
.journal-erreur { border: 1px solid #f0c4c0; border-radius: 6px; padding: .6rem .8rem; background: #fff8f7; }
.journal-erreur pre { margin: 0 0 .4rem; white-space: pre-wrap; font-size: .8rem; }
.journal-erreur span { color: var(--danger); font-size: .85rem; }
.aide ul { margin: .6rem 0 0; padding-left: 1.2rem; line-height: 1.6; }
.aide summary { cursor: pointer; font-weight: 600; }
.liste-faite { line-height: 1.8; padding-left: 1.2rem; }
.liste-faite li::marker { content: "✔  "; color: var(--succes); }

@media (max-width: 600px) {
    .etapes li { font-size: 0; justify-content: center; }
    .etapes li span { font-size: .88rem; }
}

/* ---------- Fiches ---------- */
.grille-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.carte h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--discret); margin: 0 0 .6rem; }

/* Formulaire article : seuils masqués si l'article n'est pas stockable */
.seulement-non-stockable { display: none; }
form:has(select[name="Type_produit"] option:checked[value*="on " i]) .bloc-seuils,
form:has(select[name="Type_produit"] option:checked[value^="non" i]) .bloc-seuils { display: none; }
form:has(select[name="Type_produit"] option:checked[value*="on " i]) .seulement-non-stockable,
form:has(select[name="Type_produit"] option:checked[value^="non" i]) .seulement-non-stockable { display: block; }

/* ---------- Statistiques ---------- */
.graphe-mois {
    display: flex; align-items: flex-end; gap: 2px; height: 220px;
    padding: 1.6rem 0 0; border-bottom: 1px solid var(--bordure); overflow-x: auto;
}
.graphe-mois .colonne {
    position: relative; flex: 1 0 28px; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none;
}
.graphe-mois .barre-v {
    width: 60%; max-width: 36px; min-height: 1px;
    background: var(--principal); border-radius: 4px 4px 0 0;
}
.graphe-mois .colonne:hover .barre-v, .graphe-mois .colonne:focus .barre-v { background: var(--principal-fonce); }
.graphe-mois .mois {
    position: absolute; top: 100%; margin-top: .3rem; font-size: .72rem; color: var(--discret);
    text-align: center; line-height: 1.2; white-space: nowrap;
}
.graphe-mois .infobulle {
    position: absolute; bottom: calc(100% - 1.4rem); left: 50%; transform: translateX(-50%);
    display: none; z-index: 2; white-space: nowrap; pointer-events: none;
    background: var(--texte); color: #fff; font-size: .8rem; padding: .35rem .6rem; border-radius: 6px;
}
.graphe-mois .colonne:hover .infobulle, .graphe-mois .colonne:focus .infobulle { display: block; }
.valeurs { margin-top: 2.6rem; }
.valeurs summary { cursor: pointer; color: var(--discret); font-size: .88rem; }
.col-barre { width: 30%; }
.barre-h { display: block; height: 8px; background: var(--fond); border-radius: 4px; overflow: hidden; }
.barre-h span { display: block; height: 100%; background: var(--principal); border-radius: 0 4px 4px 0; }
.positif { color: var(--succes); }
.negatif-doux { color: var(--danger); }

/* ---------- Documents imprimables (facture) ---------- */
body.document { background: #e9ebef; }
.barre-impression { display: flex; gap: .7rem; justify-content: center; padding: 1rem; }
.feuille {
    background: #fff; max-width: 820px; margin: 0 auto 2rem; padding: 2.4rem 2.6rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.doc-entete { display: flex; justify-content: space-between; gap: 2rem; border-bottom: 2px solid var(--texte); padding-bottom: 1rem; }
.doc-entete h1 { margin: 0 0 .3rem; font-size: 1.4rem; }
.doc-entete p { margin: .2rem 0; }
.doc-titre { text-align: right; }
.doc-titre h2 { margin: 0 0 .3rem; letter-spacing: .08em; }
.doc-client { display: flex; flex-direction: column; gap: .15rem; margin: 1.4rem 0; padding: .8rem 1rem; border: 1px solid var(--bordure); border-radius: 6px; max-width: 360px; margin-left: auto; }
.feuille table { border-collapse: collapse; font-size: .92rem; }
.feuille th, .feuille td { padding: .45rem .6rem; vertical-align: top; }
.feuille .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-lignes { width: 100%; margin-top: .6rem; }
.doc-lignes th { background: #f1f3f6; color: #1f2937; text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid #1f2937; }
.doc-lignes th.nombre { text-align: right; }
.doc-lignes td { border-bottom: 1px solid #e5e7eb; }
.doc-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.4rem; text-align: center; }
.doc-signatures div { padding-bottom: 3.2rem; border-bottom: 1px dotted #9ca3af; }
.doc-lignes td, .doc-lignes th { white-space: normal; }
.doc-totaux { width: auto; margin: 1.2rem 0 0 auto; min-width: 300px; }
.doc-totaux th, .doc-totaux td { padding: .25rem .6rem; }
.doc-totaux th { text-transform: none; font-size: .95rem; letter-spacing: 0; text-align: left; }
.doc-totaux td { text-align: right; font-variant-numeric: tabular-nums; }
.doc-totaux tr.fort th, .doc-totaux tr.fort td { font-weight: 700; font-size: 1.05rem; border-top: 2px solid var(--texte); }
.doc-pied { margin-top: 2.4rem; padding-top: .8rem; border-top: 1px solid var(--bordure); font-size: .88rem; text-align: center; }
@media print {
    body.document { background: #fff; }
    .barre-impression { display: none; }
    .feuille { box-shadow: none; margin: 0; padding: 0; max-width: none; }
}
@media (max-width: 600px) {
    .feuille { padding: 1.2rem 16px; }
    .doc-entete { flex-direction: column; }
    .doc-titre { text-align: left; }
}

/* ---------- Onglets et droits ---------- */
.onglets { display: flex; gap: .3rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--bordure); }
.onglets a { padding: .6rem 1rem; color: var(--discret); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets a:hover { text-decoration: none; color: var(--texte); }
.onglets a.actif { color: var(--principal); border-bottom-color: var(--principal); font-weight: 600; }
fieldset.droits { border: 1px solid var(--bordure); border-radius: var(--rayon); margin: 1.2rem 0 0; padding: .8rem 1rem 1rem; }
fieldset.droits legend { font-weight: 600; padding: 0 .4rem; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem 1rem; }
.cases .case { margin: 0; color: var(--texte); }
.lien { background: none; border: 0; padding: 0 0 0 .6rem; font: inherit; font-size: .8rem; font-weight: 400; color: var(--principal); cursor: pointer; }
.lien:hover { text-decoration: underline; }
td.texte-long { white-space: normal; }
tfoot th { color: var(--texte); border-top: 2px solid var(--bordure); }
input[type="date"] { min-width: 0; }

/* Adresse client dans la liste des ventes : retour à la ligne, largeur limitée */
td.texte-long { min-width: 140px; max-width: 260px; }

/* ---------- Documents : formats A5 et sans entête (papier pré-imprimé) ---------- */
.feuille.format-a5 { max-width: 560px; font-size: .88rem; padding: 1.6rem; }
.feuille.format-a5 .doc-entete h1 { font-size: 1.1rem; }
.feuille.sans-entete .doc-societe { display: none; }
.doc-signatures { display: flex; justify-content: space-between; gap: 2rem; margin-top: 2.4rem; }
.doc-signatures div { flex: 1; text-align: center; padding-bottom: 3rem; border-bottom: 1px dotted var(--discret); }

/* ---------- Point de vente (catalogue + panier) ---------- */
.pos-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 5px; } .mt-2 { margin-top: 10px; } .mt-3 { margin-top: 15px; }
.text-success { color: var(--success-color); }
.pos-filtres { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(200px, 2fr) minmax(140px, 1fr); gap: 10px; margin-bottom: 12px; }
.interrupteur { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-light); margin-bottom: 12px; cursor: pointer; }
.catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 64vh; overflow-y: auto; padding: 2px; }
.produit {
    position: relative; border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; background: #fff;
    cursor: pointer; text-align: left; transition: all .15s; display: flex; flex-direction: column; gap: 2px; font: inherit; color: inherit;
}
.produit:hover { border-color: var(--primary-color); box-shadow: 0 2px 8px rgba(35, 42, 87, .15); }
.produit.epuise { opacity: .45; }
.produit .ph { width: 100%; height: 64px; border-radius: 6px; background: #f3f6fb; display: flex; align-items: center; justify-content: center; color: #9db0cf; margin-bottom: 6px; }
.produit .ref { font-weight: 600; font-size: .86rem; line-height: 1.25; word-break: break-word; }
.produit .desig { font-size: .75rem; color: var(--text-light); line-height: 1.2; }
.produit .prix { color: var(--primary-color); font-weight: 700; margin-top: 2px; }
.catalogue-plus { grid-column: 1 / -1; text-align: center; color: var(--text-light); font-size: .85rem; padding: 10px; border: 1px dashed #d1d5db; border-radius: 8px; }
.panier { position: sticky; top: 85px; }
.panier-titre { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.panier-lignes { max-height: 38vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.ligne-panier { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid #f0f2f5; }
.ligne-panier.manque { background: #fff7f7; }
.ligne-panier .nom { font-size: .9rem; line-height: 1.35; }
.ligne-panier .retirer { align-self: start; color: var(--danger-color); padding: 4px 9px; }
.ligne-panier .sr { display: none; }
.fa-times + .sr { display: none; }
.champs-ligne { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1.6fr 1.2fr; gap: 6px; }
.champs-ligne label { display: flex; flex-direction: column; gap: 2px; font-size: .7rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .3px; margin: 0; }
.champs-ligne input { width: 100%; min-width: 0; padding: 5px 7px; border: 1px solid var(--border-color); border-radius: 5px; text-align: right; font-size: .9rem; color: var(--text-dark); }
.champs-ligne input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(35, 42, 87, .12); }
.champs-ligne .qte { display: flex; gap: 3px; }
.champs-ligne .qte .btn { padding: 2px 8px; min-width: 26px; }
.btn-light { border: 1px solid var(--border-color); }
.modes { display: flex; gap: 6px; flex-wrap: wrap; }
.modes .btn { flex: 1 1 45%; padding: 9px 10px; }
.totaux { width: 100%; margin: 14px 0 12px; border-top: 1px solid var(--border-color); }
.totaux td { padding: 7px 0; border-bottom: 1px solid #f0f2f5; }
.total-net { font-size: 1.7rem; font-weight: 800; color: var(--primary-color); }
.btn-lien { background: none; border: 0; padding: 6px; cursor: pointer; font-size: .88rem; }
.btn-lien:hover { text-decoration: underline; }
.btn-success:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
#client-info { background: var(--light-bg); border-radius: 6px; padding: 7px 10px; line-height: 1.5; }
.text-danger { color: var(--danger-color); }
.pos-barre { display: none; }
@media screen and (max-width: 1099.98px) {
    .pos-grid { grid-template-columns: 1fr; }
    .panier { position: static; }
    .catalogue { max-height: none; }
    .pos-barre {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
        background: #fff; border-top: 1px solid var(--border-color); box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
        padding: 10px 15px calc(10px + env(safe-area-inset-bottom));
    }
    .pos-barre .montant { font-size: 1.25rem; font-weight: 800; color: var(--primary-color); line-height: 1.1; }
    .main-content { padding-bottom: 90px !important; }
}
@media screen and (max-width: 767.98px) {
    .pos-filtres { grid-template-columns: 1fr; }
    .catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .champs-ligne { grid-template-columns: 1fr 1fr; }
    .total-net { font-size: 1.45rem; }
}

/* ---------- Filtres en grille, cartes de détail, fenêtre modale ---------- */
.filtres-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
.filtres-grille label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--text-light); margin: 0; }
.filtres-grille .large { grid-column: span 2; }
.filtres-grille .form-control { padding: 8px 11px; }
.filtres-boutons { display: flex; gap: 6px; flex-wrap: wrap; grid-column: span 2; }
.filtres-boutons .btn { padding: 8px 12px; white-space: nowrap; }
.titre-carte { font-size: .95rem; font-weight: 700; margin-bottom: 12px; color: var(--text-dark); }
.liste-def { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-size: .9rem; }
.liste-def dt { color: var(--text-light); font-weight: 500; }
.liste-def dd { margin: 0; text-align: right; }
.table tfoot td { padding: 10px 15px; border-top: 1px solid var(--border-color); }
.table tfoot .ligne-total td { font-weight: 800; font-size: 1.1rem; color: var(--primary-color); border-top: 2px solid var(--text-dark); }
.table td.texte-long { white-space: normal; min-width: 140px; max-width: 240px; }
.txt-action { margin-left: 5px; font-size: .8rem; }
.btn-sm i + .txt-action { margin-left: 5px; }
.stat-value { font-size: 1.45rem; }
.mb-1 { margin-bottom: 5px; } .mb-3 { margin-bottom: 15px; }

dialog.modale { border: 0; border-radius: 10px; padding: 0; width: min(520px, calc(100vw - 30px)); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
dialog.modale::backdrop { background: rgba(0, 0, 0, .45); }
.modale-entete { padding: 16px 20px; font-weight: 700; font-size: 1.05rem; background: var(--light-bg); border-bottom: 1px solid var(--border-color); }
.modale-corps { padding: 18px 20px; }
.modale-corps ul { margin: 8px 0 0 18px; line-height: 1.7; }
.modale-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-color); }

@media screen and (max-width: 767.98px) {
    .filtres-grille { grid-template-columns: 1fr 1fr; }
    .filtres-grille .large, .filtres-boutons { grid-column: 1 / -1; }
    .table-stack td.texte-long { max-width: none; }
}

/* Tableaux de liste : défilement horizontal si besoin, cellules plus compactes */
.table-responsive { overflow-x: auto !important; box-shadow: none; }
.detail-card .table thead th { padding: 11px 12px; font-size: .76rem; white-space: nowrap; }
.detail-card .table tbody td { padding: 10px 12px; }
.table td.text-end, .table td.text-nowrap, .table td:first-child, .table td[data-label="Date"] { white-space: nowrap; }
.table td[data-label="Date"] { font-size: .88rem; }

/* Panier : désignation, ligne « quantité seule », client retirable */
.desig-ligne { font-size: .8rem; color: var(--text-light); }
.champs-ligne.simple { grid-template-columns: 1.6fr 1.2fr; }
.champ-avec-bouton { display: flex; gap: 6px; }
.champ-avec-bouton .form-control { flex: 1; min-width: 0; }
.champ-avec-bouton .btn { padding: 0 14px; color: var(--danger-color); font-weight: 700; }

/* Fenêtre d'encaissement */
dialog.modale-large { width: min(640px, calc(100vw - 30px)); }
.enc-infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-bottom: 14px; }
.enc-infos > div { display: flex; flex-direction: column; font-size: .9rem; }
.enc-infos .text-muted { font-size: .75rem; text-transform: uppercase; letter-spacing: .3px; }
.enc-lignes { font-size: .88rem; margin-bottom: 0; }
.enc-lignes th, .enc-lignes td { padding: 7px 8px !important; }
.enc-total, .enc-monnaie { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.enc-total { border-top: 2px solid var(--text-dark); margin-top: 4px; }
.enc-total strong { font-size: 1.5rem; color: var(--primary-color); }
.enc-paiement { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.enc-paiement label { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; }
.enc-monnaie { background: #ecfdf5; border-radius: 6px; padding: 10px 14px; margin-top: 12px; }
.enc-monnaie strong { font-size: 1.3rem; color: #065f46; }
#table-a-encaisser tbody tr { cursor: default; user-select: none; }
@media (max-width: 575.98px) { .enc-paiement, .enc-infos { grid-template-columns: 1fr; } }
dialog.modale { margin: auto; }   /* la remise à zéro des marges (* { margin: 0 }) décentrait la fenêtre */
#enc-exact { color: var(--primary-color); font-weight: 600; }

/* ---------- Saisie d'un mouvement de stock ---------- */
.mvt-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.mvt-type {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
    background: #fff; border: 2px solid var(--border-color); border-radius: 10px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--text-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05); transition: all .15s;
}
.mvt-type i { grid-row: 1 / 3; font-size: 1.4rem; color: var(--secondary-color); width: 28px; text-align: center; }
.mvt-type small { color: var(--text-light); font-size: .8rem; }
.mvt-type:hover { border-color: var(--secondary-color); }
.mvt-type.actif { border-color: var(--primary-color); background: #eef3fb; box-shadow: 0 0 0 3px rgba(35, 42, 87, .12); }
.mvt-type[data-op="entree"].actif { border-color: var(--success-color); background: #ecfdf5; }
.mvt-type[data-op="entree"].actif i { color: var(--success-color); }
.mvt-type[data-op="sortie"].actif { border-color: var(--danger-color); background: #fef2f2; }
.mvt-type[data-op="sortie"].actif i { color: var(--danger-color); }
.mvt-depots { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.mvt-depots label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--text-light); margin: 0; }
.champs-ligne.simple-qte { grid-template-columns: minmax(0, 220px); }
details.transport { margin-top: 4px; }
details.transport summary { cursor: pointer; font-size: .88rem; color: var(--secondary-color); padding: 4px 0; }
.transport-champs { display: grid; gap: 8px; margin-top: 8px; }
.badge-entree { background: #dcfce7; color: #166534; }
.badge-sortie { background: #fee2e2; color: #991b1b; }

/* Choix du type de mouvement en haut de la liste */
.mvt-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 20px; }
.mvt-action {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; background: #fff;
    border: 1px solid var(--border-color); border-left: 5px solid var(--primary-color); color: var(--text-dark);
    text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); transition: transform .15s, box-shadow .15s;
}
.mvt-action:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .1); color: var(--text-dark); text-decoration: none; }
.mvt-action > i:first-child {
    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0; background: #eef3fb; color: var(--primary-color);
}
.mvt-action span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mvt-action strong { font-size: 1rem; }
.mvt-action small { color: var(--text-light); font-size: .8rem; }
.mvt-action .plus { color: var(--text-light); }
.mvt-action.entree { border-left-color: var(--success-color); }
.mvt-action.entree > i:first-child { background: #dcfce7; color: var(--success-color); }
.mvt-action.sortie { border-left-color: var(--danger-color); }
.mvt-action.sortie > i:first-child { background: #fee2e2; color: var(--danger-color); }
@media (max-width: 576px) { .mvt-actions { grid-template-columns: 1fr; gap: 10px; } .mvt-action { padding: 12px 14px; } }

/* Règlements clients */
.reg-client { display: grid; gap: 6px; }
.reg-client-champ { display: flex; gap: 8px; }
.reg-client-champ input { flex: 1; min-width: 0; }
.reg-grid { grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width: 991.98px) { .reg-grid { grid-template-columns: 1fr; } }
.reg-ventes td, .reg-ventes th { vertical-align: middle; white-space: nowrap; }
.reg-ventes td:nth-child(2) { white-space: normal; }
.reg-ventes th:first-child, .reg-ventes td:first-child { width: 32px; }
.reg-ventes tbody tr { cursor: pointer; }
.reg-ventes tbody tr.reg-selection { background: #ecfdf5; }
.reg-ventes input[type=checkbox], #tout-cocher { width: 18px; height: 18px; cursor: pointer; vertical-align: middle; }
.reg-montant { width: 120px; min-width: 100px; margin-left: auto; text-align: right; font-weight: 600; }
.reg-montant.is-invalid, .form-control.is-invalid { border-color: var(--danger-color); background: #fef2f2; }
.form-control-lg { font-size: 1.25rem; padding: 10px 14px; font-weight: 600; }
.reg-resume { position: sticky; top: 80px; }
.reg-chiffres dd { font-variant-numeric: tabular-nums; }
.reg-debiteurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.reg-debiteur {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border-color);
    border-left: 4px solid var(--danger-color); border-radius: 10px; background: #fff; color: var(--text-dark); text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.reg-debiteur:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .08); color: var(--text-dark); text-decoration: none; }
.reg-debiteur strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-decoration-line-through { text-decoration: line-through; }
@media (max-width: 991.98px) { .reg-resume { position: static; } body:has(#form-reglement) .content { padding-bottom: 90px; } }
@media (max-width: 768px) {
    .reg-ventes td[data-label=""]:first-child { display: flex; align-items: center; }
    .reg-montant { width: 140px; }
}

/* Avances clients */
.avance-choix { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px dashed var(--success-color); border-radius: 8px; background: #f0fdf4; cursor: pointer; margin: 0 0 4px; font-size: .9rem; }
.avance-choix input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }
.avance-solde { font-size: 1.6rem; font-weight: 800; color: var(--success-color); }
.enc-avance { margin: 8px 0 12px; padding: 10px 12px; border: 1px dashed var(--success-color); border-radius: 8px; background: #f0fdf4; display: grid; gap: 6px; }
.enc-avance .enc-reste { margin-top: 2px; padding: 6px 0 0; }
.enc-avance .enc-reste strong { font-size: 1.25rem; }
.form-avance { max-width: 620px; display: grid; gap: 14px; }
.form-avance label.form-label { display: grid; gap: 4px; margin: 0; }
.form-avance-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 576px) { .form-avance-ligne { grid-template-columns: 1fr; } }
.reg-debiteur.avance { border-left-color: var(--success-color); }
.filtres-grille label.case { flex-direction: row; align-items: center; gap: 6px; align-self: end; padding-bottom: 10px; }
.stats-grid.compact .stat-value { font-size: 1.3rem; white-space: nowrap; }
.detail-card hr { border: 0; border-top: 1px solid var(--border-color); margin: 14px 0; }

/* =====================================================================
   Tableau de bord décisionnel (index.php + assets/tableau_bord.js)
   ===================================================================== */
.tb {
    --tb-s1: #2f3c88; --tb-s2: #c0101e;
    --tb-bon: #0ca30c; --tb-bon-texte: #006300; --tb-attention: #fab219; --tb-serieux: #ec835a; --tb-critique: #d03b3b;
    --tb-texte2: #3f4766; --tb-muet: #6b7391; --tb-ligne: #e3e7ef;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; font-variant-numeric: normal; min-width: 0;
}
.tb > *, .tb-grille > *, .tb-kpis > * { min-width: 0; }
.tb-carte { background: #fff; border: 1px solid var(--tb-ligne); border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); min-width: 0; }
.tb-carte-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tb-carte-tete h2 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--text-dark); }
.tb-carte-tete p { margin: 2px 0 0; font-size: .8rem; color: var(--tb-muet); }
.tb-sous-titre { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tb-muet); margin: 18px 0 6px; font-weight: 600; }
.tb-vide { color: var(--tb-muet); font-size: .9rem; margin: 8px 0; display: flex; gap: 8px; align-items: center; }
.tb-vide i { color: var(--tb-bon); }

/* Filtres */
.tb-filtres { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.tb-presets { display: inline-flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--tb-ligne); border-radius: 10px; padding: 3px; gap: 2px; }
.tb-preset { border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; font: inherit; font-size: .85rem; color: var(--tb-texte2); cursor: pointer; white-space: nowrap; }
.tb-preset:hover { background: #f3f4f6; }
.tb-preset.actif { background: var(--primary-color); color: #fff; font-weight: 600; }
.tb-perso { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tb-perso .form-control { width: auto; padding: 6px 10px; font-size: .85rem; height: auto; }

/* Indicateurs clés */
.tb-kpis { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 16px; }
.tb-kpi { background: #fff; border: 1px solid var(--tb-ligne); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.tb-kpi-tete { display: flex; justify-content: space-between; align-items: center; }
.tb-kpi-lib { font-size: .82rem; color: var(--tb-texte2); font-weight: 600; }
.tb-kpi-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #eef3fb; color: var(--primary-color); font-size: .85rem; }
.tb-kpi-valeur { font-size: 1.55rem; font-weight: 700; color: var(--text-dark); line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tb-kpi-pied { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--tb-ligne); font-size: .8rem; color: var(--tb-texte2); }
.tb-kpi-hero { background: #232a57; border: 0; color: #fff; }
.tb-kpi-hero .tb-kpi-lib, .tb-kpi-hero .tb-kpi-pied { color: rgba(255, 255, 255, .85); }
.tb-kpi-hero .tb-kpi-pied { border-top-color: rgba(255, 255, 255, .18); }
.tb-kpi-hero .tb-kpi-pied strong { color: #fff; }
.tb-kpi-hero .tb-kpi-ic { background: rgba(255, 255, 255, .15); color: #fff; }
.tb-kpi-hero .tb-kpi-valeur { color: #fff; font-size: 2.1rem; }
.tb-spark { height: 44px; margin: 2px -4px 0; }

/* Variation (flèche + signe + couleur : jamais la couleur seule) */
.tb-delta { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.tb-delta i { font-size: .7rem; }
.tb-delta-lib { font-weight: 500; color: var(--tb-muet); }
.tb-delta.bon { background: #e8f6e8; color: var(--tb-bon-texte); }
.tb-delta.mauvais { background: #fdecec; color: #a32020; }
.tb-delta.neutre { background: #f1f1ee; color: var(--tb-texte2); }
.tb-kpi-hero .tb-delta { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }

/* Indicateurs secondaires */
.tb-mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: #fff; border: 1px solid var(--tb-ligne); border-radius: 14px; }
.tb-mini > div { padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tb-mini > div + div { border-left: 1px solid var(--tb-ligne); }
.tb-mini span:first-child { font-size: .75rem; color: var(--tb-muet); }
.tb-mini strong { font-size: 1.05rem; color: var(--text-dark); }
.tb-mini .tb-delta { font-size: .72rem; padding: 1px 6px; }

/* Grilles */
.tb-grille { display: grid; gap: 18px; }
.tb-grille-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.tb-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Graphique CA */
.tb-graph { min-height: 270px; }
.tb-graph svg { display: block; overflow: visible; }
.tb-graph svg rect[tabindex]:focus { outline: none; }
.tb-graph svg rect[tabindex]:focus-visible { outline: 2px solid var(--tb-s1); outline-offset: -2px; }
.tb-legende { display: flex; gap: 14px; align-items: center; font-size: .8rem; color: var(--tb-texte2); flex-wrap: wrap; }
.tb-cle { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c); margin-right: 6px; vertical-align: -1px; }
.tb-table-donnees { max-height: 320px; overflow: auto; margin-top: 12px; border-top: 1px solid var(--tb-ligne); }

/* Barres horizontales */
.tb-graph-h { display: grid; gap: 12px; }
.tb-barre { display: grid; gap: 5px; cursor: default; border-radius: 6px; outline: none; }
.tb-barre:focus-visible { box-shadow: 0 0 0 2px var(--tb-s1); }
.tb-barre-tete { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; color: var(--tb-texte2); }
.tb-barre-tete span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-barre-tete strong { color: var(--text-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-barre-piste { height: 10px; }
.tb-barre-val { height: 100%; border-radius: 0 4px 4px 0; transition: filter .15s; }
.tb-barre:hover .tb-barre-val, .tb-barre:focus .tb-barre-val { filter: brightness(1.12); }

/* Actions à traiter (statut : icône + libellé + couleur) */
.tb-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tb-action a { display: grid; grid-template-columns: 36px 1fr auto 12px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--tb-ligne);
    border-left: 4px solid var(--niv); text-decoration: none; color: var(--text-dark); transition: background .15s, transform .15s; }
.tb-action a:hover { background: #fafaf8; transform: translateX(2px); }
.tb-action-ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--niv-fond); color: var(--niv-texte); }
.tb-action-txt { display: flex; flex-direction: column; min-width: 0; }
.tb-action-txt strong { font-size: .88rem; line-height: 1.25; }
.tb-action-txt small { font-size: .76rem; color: var(--tb-muet); }
.tb-action-niveau { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--niv-texte); background: var(--niv-fond); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.tb-action-go { color: var(--tb-muet); font-size: .75rem; }
.tb-action.critique { --niv: var(--tb-critique); --niv-fond: #fdecec; --niv-texte: #a32020; }
.tb-action.serieux { --niv: var(--tb-serieux); --niv-fond: #fdf0ea; --niv-texte: #a2461f; }
.tb-action.attention { --niv: var(--tb-attention); --niv-fond: #fef6e2; --niv-texte: #8a5a00; }
.tb-action.info { --niv: var(--tb-s1); --niv-fond: #eaf2fc; --niv-texte: #1c5cab; }

/* Constats */
.tb-constats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px 18px; }
.tb-constats li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: .88rem; color: var(--text-dark); line-height: 1.45; }
.tb-constats li i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: .8rem; }
.tb-constats li.bon i { background: #e8f6e8; color: var(--tb-bon-texte); }
.tb-constats li.mauvais i { background: #fdecec; color: #a32020; }
.tb-constats li.attention i { background: #fef6e2; color: #8a5a00; }
.tb-constats li.info i { background: #eaf2fc; color: #1c5cab; }

/* Listes et tableaux compacts */
.tb-liste { list-style: none; margin: 0; padding: 0; }
.tb-liste li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--tb-ligne); font-size: .85rem; }
.tb-liste li:last-child { border-bottom: 0; }
.tb-liste li > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-liste small { color: var(--tb-muet); font-size: .75rem; }
.tb-liste strong { font-variant-numeric: tabular-nums; }
.tb-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tb-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tb-muet); font-weight: 600; text-align: left; padding: 0 8px 8px; border-bottom: 1px solid var(--tb-ligne); }
.tb-table th.text-end { text-align: right; }
.tb-table td { padding: 9px 8px; border-bottom: 1px solid var(--tb-ligne); vertical-align: middle; }
.tb-table tr:last-child td { border-bottom: 0; }
.tb-table td.text-end { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-table td small { display: block; color: var(--tb-muet); font-size: .74rem; }
.tb-table td small.d-inline { display: inline; }
.tb-table .tb-ligne-active td { background: #f5f8fd; }
.tb-part { display: block; height: 4px; background: #eef0f3; border-radius: 2px; margin: 5px 0 3px; max-width: 160px; }
.tb-part span { display: block; height: 100%; background: var(--tb-s1); border-radius: 0 2px 2px 0; }
.tb-statut { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tb-statut.critique { background: #fdecec; color: #a32020; }
.tb-statut.attention { background: #fef6e2; color: #8a5a00; }

/* Infobulle */
.tb-infobulle { position: fixed; z-index: 2000; pointer-events: none; background: #fff; border: 1px solid rgba(11, 11, 11, .1); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14); padding: 10px 12px; min-width: 170px; max-width: 280px; font-size: .8rem; }
.tb-bulle-titre { font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.tb-bulle-ligne { display: flex; align-items: center; gap: 8px; color: var(--tb-texte2); padding: 1px 0; }
.tb-bulle-ligne strong { color: var(--text-dark); font-variant-numeric: tabular-nums; }
.tb-bulle-ligne.fort strong { font-size: .95rem; }
.tb-bulle-cle { width: 12px; height: 3px; border-radius: 2px; flex-shrink: 0; }

/* Adaptation aux écrans */
@media (max-width: 1280px) {
    .tb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tb-mini > div:nth-child(4) { border-left: 0; }
    .tb-mini > div:nth-child(n+4) { border-top: 1px solid var(--tb-ligne); }
}
@media (max-width: 991.98px) {
    .tb-grille-2-1 { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .tb { gap: 14px; }
    .tb-kpis, .tb-grille-3 { grid-template-columns: 1fr; }
    .tb-mini { grid-template-columns: 1fr 1fr; }
    .tb-mini > div { border-left: 0 !important; border-top: 1px solid var(--tb-ligne); }
    .tb-mini > div:nth-child(-n+2) { border-top: 0; }
    .tb-mini > div:nth-child(even) { border-left: 1px solid var(--tb-ligne) !important; }
    .tb-carte { padding: 14px; }
    .tb-presets { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .tb-perso { width: 100%; }
    .tb-perso .form-control { flex: 1 1 130px; }
    .tb-kpi-hero .tb-kpi-valeur { font-size: 1.75rem; }
    .tb-action a { grid-template-columns: 36px 1fr 12px; }
    .tb-action-niveau { display: none; }
}
@media print {
    .tb-filtres { display: none; }
    .tb-carte, .tb-kpi { break-inside: avoid; box-shadow: none; }
}

/* =====================================================================
   Statistiques (statistiques.php) — complète les styles .tb-*
   ===================================================================== */
.st-nav { position: sticky; top: 64px; z-index: 50; display: flex; gap: 4px; overflow-x: auto; background: rgba(243, 244, 246, .92);
    backdrop-filter: blur(6px); padding: 6px; margin: 0 -6px; border-radius: 12px; scrollbar-width: none; }
.st-nav::-webkit-scrollbar { display: none; }
.st-nav a { padding: 7px 14px; border-radius: 8px; font-size: .85rem; font-weight: 600; color: var(--tb-texte2); text-decoration: none; white-space: nowrap; }
.st-nav a:hover { background: #fff; }
.st-nav a.actif { background: #fff; color: var(--primary-color); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.st-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; scroll-margin-top: 120px; }
.st-section > * { min-width: 0; }
.st-titre { font-size: 1.15rem; font-weight: 700; margin: 10px 0 -4px; display: flex; align-items: center; gap: 10px; color: var(--text-dark); }
.st-titre i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #eef3fb; color: var(--primary-color); font-size: .85rem; }
.st-grille-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.st-grille-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.st-mini > div small { font-size: .72rem; }
.st-defile { max-height: 520px; overflow: auto; }
.st-defile thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.st-part { display: block; margin-left: auto; width: 70px; }
.st-chiffre { font-size: .95rem; margin: 0 0 12px; }
.st-chiffre strong { font-size: 1.6rem; color: var(--primary-color); margin-right: 2px; }
.st-abc { display: grid; gap: 6px; }
.st-abc > div { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; font-size: .85rem; color: var(--tb-texte2); }
.st-abc strong { color: var(--text-dark); }
.st-classe { display: inline-grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; font-size: .75rem; font-weight: 800; }
.st-classe.a { background: #1c5cab; color: #fff; }
.st-classe.b { background: #3987e5; color: #fff; }
.st-classe.c { background: #cde2fb; color: #184f95; }
.st-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.st-points li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: .86rem; line-height: 1.45; }
.st-points li i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: .8rem; }
.st-points li.bon i { background: #e8f6e8; color: var(--tb-bon-texte); }
.st-points li.mauvais i { background: #fdecec; color: #a32020; }
.st-points li.attention i { background: #fef6e2; color: #8a5a00; }
.st-points li.info i { background: #eaf2fc; color: #1c5cab; }
.tb-cle-ligne { height: 3px; width: 14px; border-radius: 2px; vertical-align: 3px; }
.tb-chaleur-legende { display: flex; align-items: center; gap: 3px; justify-content: flex-end; font-size: .72rem; color: var(--tb-muet); margin-top: 8px; }
.tb-chaleur-legende i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.tb-chaleur-legende span { margin: 0 4px; }
#st-graph-heures svg { display: block; }
#st-graph-heures svg rect[tabindex]:focus { outline: none; }
@media (max-width: 1280px) {
    .st-grille-1-2, .st-grille-2-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .st-nav { top: 56px; }
    .st-mini > div small { display: block; }
}
@media print {
    .st-nav { display: none; }
    .st-defile { max-height: none; overflow: visible; }
}

/* Dépenses */
.tb-kpis.dep-kpis { grid-template-columns: 1.35fr 1fr; }
.dep-grille { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 991.98px) { .dep-grille { grid-template-columns: minmax(0, 1fr); } }
.dep-kpis .tb-kpi-valeur { overflow-wrap: anywhere; }
.dep-modes li { padding: 5px 0; }
@media (max-width: 767.98px) { .tb-kpis.dep-kpis { grid-template-columns: 1fr; } }

/* Achats */
.achat-options { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-color); }
.achat-options .form-avance-ligne { margin: 0; }
.champs-ligne.achat-champs { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.produit.alerte-stock { border-color: #f5c2c2; background: #fff8f8; }
.achat-raccourcis { display: grid; gap: 6px; }
.achat-raccourcis a { display: flex; align-items: center; gap: 8px; font-size: .88rem; padding: 6px 8px; border-radius: 8px; text-decoration: none; color: var(--text-dark); }
.achat-raccourcis a:hover { background: #f3f4f6; }
.achat-raccourcis i { width: 18px; color: var(--primary-color); }
.reception-qte { width: 90px; margin-left: auto; text-align: right; }
.achat-historique { margin-top: 0; }
.form-label.small { font-size: .8rem; }
@media (max-width: 576px) { .champs-ligne.achat-champs { grid-template-columns: 1fr 1fr; } }
.achat-historique { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.achat-historique .tb-liste li { grid-template-columns: auto 1fr auto; }
@media (max-width: 767.98px) { .achat-historique { grid-template-columns: minmax(0, 1fr); } }

/* Annulation avec somme déjà payée */
.annul-choix { margin-top: 12px; padding: 12px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--border-color); display: grid; gap: 8px; }
.annul-choix .avance-choix { background: #fff; border-style: solid; border-color: var(--border-color); }
.annul-choix .avance-choix:has(input:checked) { border-color: var(--primary-color); background: #eef3fb; }
.form-control-sm { padding: 4px 8px; font-size: .85rem; height: auto; }
.verrou-mode { display: none !important; }

/* ===== Documents : logo de la société ===== */
.doc-societe { display: flex; gap: 14px; align-items: flex-start; }
.doc-logo { max-height: 2.4cm; max-width: 4.2cm; object-fit: contain; }
.feuille.format-a5 .doc-logo { max-height: 1.7cm; max-width: 3cm; }

/* ===== Paramètres société ===== */
.param-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.param-grille .detail-card { margin-bottom: 20px; }
.param-grille > .detail-card { margin-bottom: 0; }
.param-form { max-width: none; }
.param-docs, .param-actions { grid-column: 1 / -1; }
.param-docs-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; }
.param-doc { display: grid; gap: 4px; margin: 0; font-size: .9rem; font-weight: 600; }
.param-doc i { color: var(--primary-color); width: 1.1em; }
.param-logo { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center; }
.param-logo-apercu { height: 110px; border: 1px dashed #c8d0dc; border-radius: 10px; display: grid; place-items: center; align-content: center; gap: 4px; color: #8a96a8; background: #f8fafc; padding: 8px; }
.param-logo-apercu img { max-width: 100%; max-height: 94px; object-fit: contain; }
.param-logo-apercu i { font-size: 1.8rem; }
.param-actions { display: flex; justify-content: flex-end; }
@media (max-width: 900px) { .param-grille { grid-template-columns: minmax(0, 1fr); } .param-logo { grid-template-columns: minmax(0, 1fr); } }

/* ===== Livraisons / retours ===== */
.liv-table td, .liv-table th { vertical-align: middle; }
.liv-qte { width: 80px; min-width: 64px; margin-left: auto; text-align: right; }
.liv-qte.is-invalid, .inv-champ.is-invalid { border-color: var(--danger-color); background: #fef2f2; }
.liv-raccourcis { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.liv-transport { max-width: none; }
.liv-suivi { font-size: .82rem; }
.liv-suivi td, .liv-suivi th { padding: 4px 6px; }

/* ===== Inventaires ===== */
.inv-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.inv-progression { height: 6px; border-radius: 3px; background: var(--border-color); overflow: hidden; margin-top: 8px; }
.inv-progression span { display: block; height: 100%; background: var(--success-color); transition: width .2s; }
.inv-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.inv-outils input[type=search] { flex: 1 1 260px; }
.inv-outils select { flex: 0 1 200px; }
.inv-champ { width: 100px; margin-left: auto; text-align: right; }
.inv-champ.inv-petit { width: 76px; }
.inv-table.inv-aveugle .inv-theo { color: transparent; text-shadow: none; }
.inv-table.inv-aveugle .inv-ecart, .inv-table.inv-aveugle .inv-valeur { visibility: hidden; }
.inv-pied { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 14px; position: sticky; bottom: 0; background: #fff; padding: 10px 0; border-top: 1px solid var(--border-color); }
.inv-pied .small { margin-right: auto; }
.doc-lignes td.case-vide { min-width: 2.2cm; border-bottom: 1px dotted #999; }
.doc-totaux-large { margin-bottom: 1rem; }
@media (max-width: 992px) { .inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Production ===== */
.prod-grille { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 20px; }
.prod-grille .detail-card { margin-bottom: 0; }
.prod-bloc .form-label { display: grid; gap: 4px; margin-bottom: 10px; }
.prod-bloc .prod-recherche { margin-bottom: 12px; }
.prod-lignes .ligne-panier { margin-bottom: 8px; }
.prod-fleche { align-self: center; color: var(--secondary-color); font-size: 1.5rem; }
.prod-etape { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--primary-color); color: #fff; font-size: .8rem; margin-right: 8px; }
.prod-synthese { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px; align-items: start; }
.prod-synthese .form-avance { max-width: none; }
.prod-synthese .alert, .prod-synthese > .btn { grid-column: 1 / -1; }
.prod-synthese > .btn { justify-self: end; }
.prod-def dt { min-width: 220px; }
.doc-sous-titre { font-size: .95rem; margin: 1rem 0 .4rem; }
@media (max-width: 900px) {
    .prod-grille { grid-template-columns: minmax(0, 1fr); }
    .prod-fleche { transform: rotate(90deg); justify-self: center; }
    .prod-synthese { grid-template-columns: minmax(0, 1fr); }
    .prod-synthese > .btn { justify-self: stretch; }
}

/* ===== Factures normalisées ===== */
.doc-lettres { margin-top: 1rem; font-size: .9rem; }
.doc-texte { margin: 1rem 0; line-height: 1.5; }

/* ===== Factures échues ===== */
.ech-delai { width: 80px; }
.ech-balance { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--border-color); }
.ech-balance span { min-width: 4px; }
.ech-legende { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ech-tranche { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: center; padding: 10px; border: 1px solid var(--border-color); border-radius: 10px; color: inherit; text-decoration: none; }
.ech-tranche:hover { border-color: var(--secondary-color); }
.ech-tranche i { width: 12px; height: 12px; border-radius: 3px; }
.ech-tranche strong, .ech-tranche small { grid-column: 2; }
.ech-tranche strong { font-size: 1.1rem; }
.ech-tranche small { color: var(--text-light); }
.ech-clients { display: grid; gap: 10px; }
.ech-client { border: 1px solid var(--border-color); border-radius: 10px; background: #fff; }
.ech-client[open] { box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
.ech-client summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; }
.ech-client summary::-webkit-details-marker { display: none; }
.ech-nom, .ech-montants { display: grid; }
.ech-nom small, .ech-montants small { color: var(--text-light); font-size: .8rem; }
.ech-montants { text-align: right; }
.ech-retard { font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ech-retard.ok { background: #ecfdf5; color: #047857; }
.ech-retard.leger { background: #eff6ff; color: #1d4ed8; }
.ech-retard.alerte { background: #fff7ed; color: #c2410c; }
.ech-retard.critique { background: #fef2f2; color: #b91c1c; }
.ech-client .table-responsive { padding: 0 14px; }
.ech-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 10px 14px 14px; }
@media (max-width: 900px) { .ech-legende { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px) {
    .ech-client summary { grid-template-columns: minmax(0, 1fr) auto; }
    .ech-retard { grid-row: 2; grid-column: 1; justify-self: start; }
    .ech-montants { grid-row: 1 / 3; grid-column: 2; }
}
.prod-synthese { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.prod-totaux td:first-child { white-space: nowrap; }
.prod-totaux .total-net { font-size: 1.35rem; white-space: nowrap; }
.param-docs > p { margin-bottom: 14px; }
@media (max-width: 900px) { .prod-synthese { grid-template-columns: minmax(0, 1fr); } .prod-totaux td:first-child { white-space: normal; } }
@media (max-width: 576px) { .totaux td small.d-block { white-space: normal; } .prod-def dt { min-width: 0; } }
.d-block { display: block !important; }
.ret-traitement .badge { margin: 1px 2px 1px 0; }
.ret-complement { padding: 8px 10px; background: #f8fafc; border-radius: 8px; }
.ret-complement .interrupteur { margin-right: 14px; }
a.stat-card { color: inherit; text-decoration: none; }

/* ===== Journal de caisse ===== */
.caisse-syntheses { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 991.98px) { .caisse-syntheses { grid-template-columns: minmax(0, 1fr); } }
.jc-lignes { font-size: .82rem; }
.jc-lignes td, .jc-lignes th { padding: 4px 6px; }
.jc-lignes tfoot th { border-top: 2px solid var(--texte); text-align: left; }
.jc-lignes tfoot th.nombre { text-align: right; }
.jc-report td { font-style: italic; color: #555; }
.jc-syntheses { display: grid; align-items: start; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; font-size: .82rem; }
.jc-lignes td:first-child { white-space: nowrap; }
.jc-lignes small { color: #666; }

/* ===== Historiques client / article ===== */
.hist-resultats { list-style: none; margin: 0; padding: 0; }
.hist-resultats li { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-color); }
.hist-resultats li a { flex: 1; display: grid; padding: 9px 4px; color: inherit; text-decoration: none; }
.hist-resultats li a:hover strong { color: var(--secondary-color); }
.hist-resultats small { color: var(--text-light); }
.hist-kpis { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
.hist-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hist-filtres .tb-preset { border: 1px solid var(--border-color); border-radius: 999px; }
.hist-filtres small { opacity: .7; margin-left: 3px; }
.hist-chrono { list-style: none; margin: 0; padding: 0; position: relative; }
.hist-chrono::before { content: ''; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--border-color); }
.hist-ev { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid #f1f2f4; }
.hist-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #eef4fc; color: #1c5cab; position: relative; z-index: 1; font-size: .85rem; }
.hist-reglement .hist-ic { background: #e9f8f1; color: #0f7a52; }
.hist-avance .hist-ic { background: #f2effd; color: #5b44b8; }
.hist-retour .hist-ic { background: #fff3ea; color: #b4531c; }
.hist-livraison .hist-ic, .hist-devis .hist-ic, .hist-facture .hist-ic { background: #f3f4f6; color: #52514e; }
.hist-ligne1 { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.hist-date { color: var(--text-light); font-size: .8rem; margin-left: auto; }
.hist-detail { color: var(--text-light); font-size: .85rem; margin-top: 2px; }
.hist-montant { text-align: right; display: grid; white-space: nowrap; }
.hist-montant small { font-size: .78rem; color: var(--text-light); }
.hist-annule .hist-corps, .hist-annule .hist-montant strong { text-decoration: line-through; color: #9ca3af; }
.hist-deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hist-articles td small { display: block; color: var(--text-light); font-size: .75rem; }
.hist-legende { display: flex; gap: 12px; font-size: .8rem; color: var(--text-light); }
.hist-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.hist-impression { display: none; }
@media (max-width: 991.98px) { .hist-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hist-deux { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 576px) {
    .hist-ev { grid-template-columns: 30px minmax(0, 1fr); }
    .hist-ic { width: 30px; height: 30px; }
    .hist-chrono::before { left: 14px; }
    .hist-montant { grid-column: 2; text-align: left; }
    .hist-date { margin-left: 0; width: 100%; }
}
@media print {
    .hist-impression { display: block; margin-bottom: 12px; }
    .hist-impression h2 { font-size: 1.2rem; margin: 10px 0 2px; }
    .tb-filtres, .hist-filtres, .tb-infobulle { display: none !important; }
    .hist-ev { break-inside: avoid; }
}
.hist-deux td[data-label="Vente"] a, .hist-deux td[data-label="Achat"] a, .hist-deux td[data-label="Date"] { white-space: nowrap; }

/* =====================================================================
 * ÉTATS IMPRIMÉS — présentation moderne commune à tous les documents
 * (factures, proformas, BL, avoirs, reçus, bons, journaux, relevés…)
 * ===================================================================== */
body.document {
    --doc-acc: #232a57; --doc-acc-clair: #eef0f7; --doc-trait: #e3e7ee; --doc-gris: #5b6472; --doc-fond: #f7f9fc;
    background: #e8ecf2; color: #1f2937;
    font-family: 'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.barre-impression { position: sticky; top: 0; z-index: 5; background: rgba(232, 236, 242, .92); backdrop-filter: blur(6px); align-items: center; flex-wrap: wrap; }
.barre-impression .bouton { border-radius: 8px; padding: .5rem 1rem; font-weight: 600; }
.barre-impression .discret { font-size: .78rem; color: var(--doc-gris); }
.feuille { border-top: 7px solid var(--doc-acc); border-radius: 6px; padding: 2.2rem 2.4rem 1.8rem; line-height: 1.45; }
.feuille.format-a5 { padding: 1.4rem 1.5rem 1.2rem; border-top-width: 5px; }

/* En-tête : société à gauche, titre et références à droite */
.doc-entete { border-bottom: 1px solid var(--doc-trait); padding-bottom: 1.1rem; align-items: flex-start; }
.doc-societe h1 { color: var(--doc-acc); font-size: 1.3rem; font-weight: 800; letter-spacing: .01em; margin-bottom: .25rem; }
.doc-societe p { color: var(--doc-gris); font-size: .82rem; line-height: 1.5; margin: .1rem 0; }
.doc-societe p.discret { font-size: .75rem; }
.doc-titre { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.doc-titre h2 { color: var(--doc-acc); font-size: 1.45rem; font-weight: 800; letter-spacing: .05em; margin: 0; line-height: 1.15; }
.doc-titre p { margin: 0; background: var(--doc-acc-clair); border-radius: 8px; padding: .45rem .8rem; font-size: .82rem; line-height: 1.6; color: #374151; text-align: right; }
.doc-titre p strong { color: #111827; font-size: .98rem; }
.doc-titre p:nth-of-type(2) { background: none; padding: .2rem .7rem; border: 2px solid #dc2626; color: #dc2626; border-radius: 6px; transform: rotate(-4deg); margin-right: 4px; letter-spacing: .12em; }
.doc-titre p:nth-of-type(2) strong { color: #dc2626; }
.feuille.format-a5 .doc-titre h2 { font-size: 1.1rem; }
.feuille.format-a5 .doc-societe h1 { font-size: 1.05rem; }

/* Bloc client / tiers */
.doc-client { background: var(--doc-fond); border: 1px solid var(--doc-trait); border-left: 4px solid var(--doc-acc); border-radius: 8px; max-width: 380px; padding: .75rem 1rem; font-size: .88rem; }
.doc-client .etiquette { font-size: .66rem; color: var(--doc-acc); letter-spacing: .12em; font-weight: 800; }
.doc-client strong { font-size: 1rem; color: #111827; }
.doc-client span { color: var(--doc-gris); }

/* Tableau des lignes */
.doc-lignes { border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.doc-lignes thead th { background: var(--doc-acc); color: #fff; border-bottom: 0; font-size: .68rem; font-weight: 700; letter-spacing: .07em; padding: .55rem .6rem; }
.doc-lignes thead th:first-child { border-radius: 6px 0 0 0; }
.doc-lignes thead th:last-child { border-radius: 0 6px 0 0; }
.doc-lignes td { border-bottom: 1px solid var(--doc-trait); padding: .5rem .6rem; }
.doc-lignes tbody tr:nth-child(even) td { background: var(--doc-fond); }
.doc-lignes td small { color: var(--doc-gris); font-size: .78em; }
.doc-lignes tr { break-inside: avoid; page-break-inside: avoid; }
.doc-lignes thead { display: table-header-group; }
.doc-lignes tfoot th, .doc-lignes tfoot td { background: var(--doc-acc-clair); border-top: 2px solid var(--doc-acc); font-weight: 700; color: #111827; }
.doc-sous-titre { color: var(--doc-acc); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin: 1.3rem 0 .45rem; }

/* Totaux */
.doc-totaux { border-collapse: separate; border-spacing: 0; border: 1px solid var(--doc-trait); border-radius: 8px; overflow: hidden; min-width: 320px; font-size: .88rem; }
.doc-totaux th, .doc-totaux td { padding: .4rem .8rem; border-bottom: 1px solid var(--doc-trait); }
.doc-totaux tr:last-child th, .doc-totaux tr:last-child td { border-bottom: 0; }
.doc-totaux th { font-weight: 500; color: var(--doc-gris); font-size: .86rem; }
.doc-totaux td { font-weight: 600; color: #111827; }
.doc-totaux tr.fort th, .doc-totaux tr.fort td { background: var(--doc-acc); color: #fff; border-top: 0; font-size: 1rem; font-weight: 800; }
.doc-lettres { background: var(--doc-fond); border-radius: 8px; padding: .6rem .9rem; font-size: .85rem; }
.doc-texte { font-size: .9rem; }

/* Signatures et pied */
.doc-signatures { margin-top: 2rem; gap: 1.5rem; }
.doc-signatures div { border: 1px dashed #cbd5e1; border-radius: 8px; padding: .5rem .6rem 3.4rem; font-size: .78rem; font-weight: 700; color: var(--doc-gris); text-transform: uppercase; letter-spacing: .06em; }
.doc-signatures div small { text-transform: none; font-weight: 400; letter-spacing: 0; }
.doc-pied { color: var(--doc-gris); font-size: .74rem; border-top: 1px solid var(--doc-trait); margin-top: 1.8rem; }
.doc-pied p { margin: .15rem 0; }

/* Synthèses des journaux */
.jc-syntheses .doc-lignes thead th { font-size: .64rem; }
.jc-report td { background: var(--doc-acc-clair) !important; }

@media print {
    body.document { background: #fff; }
    .feuille { border-radius: 0; padding: 0; border-top: 0; }
    .feuille::before { content: ''; display: block; height: 5px; background: var(--doc-acc); margin-bottom: 1rem; }
    .doc-signatures, .doc-totaux, .doc-lettres { break-inside: avoid; }
}
@media (max-width: 600px) {
    .doc-titre { align-items: flex-start; }
    .doc-titre p { text-align: left; }
    .doc-totaux { min-width: 0; width: 100%; }
}

/* ===== Comptes clients (créances / avances) ===== */
.cr-onglets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cr-onglets a { display: grid; padding: 14px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--border-color); color: var(--text-dark); font-weight: 700; text-decoration: none; }
.cr-onglets a small { font-weight: 500; color: var(--text-light); margin-top: 2px; }
.cr-onglets a.actif { border-color: var(--primary-color); box-shadow: inset 0 -3px 0 var(--primary-color); color: var(--primary-color); }
.cr-barre { display: block; height: 4px; border-radius: 2px; background: #f1f2f4; margin: 4px 0 2px auto; max-width: 140px; }
.cr-barre i { display: block; height: 100%; border-radius: 2px; background: #dc2626; }

/* ===== Historique client imprimé ===== */
.hi-cartouche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin: 1.2rem 0 .8rem; }
.hi-cartouche .doc-client { margin: 0; max-width: none; }
.hi-cartouche .doc-totaux { margin: 0; min-width: 0; width: 100%; }
.hi-resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; margin: .4rem 0 .6rem; }
.hi-resume div { background: var(--doc-fond); border: 1px solid var(--doc-trait); border-radius: 8px; padding: .45rem .6rem; display: grid; }
.hi-resume span { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--doc-gris); font-weight: 700; }
.hi-resume strong { font-size: .9rem; color: #111827; font-variant-numeric: tabular-nums; }
.hi-bloc { border: 1px solid var(--doc-trait); border-radius: 10px; margin: .7rem 0; overflow: hidden; break-inside: avoid; page-break-inside: avoid; }
.hi-tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--doc-acc-clair); padding: .55rem .8rem; border-bottom: 1px solid var(--doc-trait); }
.hi-tete > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.hi-type { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--doc-acc); border-radius: 4px; padding: .12rem .45rem; }
.hi-date, .hi-meta { font-size: .8rem; color: var(--doc-gris); }
.hi-solde { display: grid; text-align: right; }
.hi-solde span { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--doc-gris); }
.hi-solde strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
.hi-lignes { margin: 0; font-size: .82rem; }
.hi-lignes thead th { border-radius: 0 !important; background: #3a5486; font-size: .62rem; padding: .35rem .6rem; }
.hi-lignes td { padding: .32rem .6rem; }
.hi-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 1.4rem; padding: .5rem .8rem; font-size: .82rem; color: var(--doc-gris); border-top: 1px solid var(--doc-trait); }
.hi-pied strong { color: #111827; font-variant-numeric: tabular-nums; margin-left: .25rem; }
.hi-pied .hi-net strong { font-size: .95rem; }
.hi-rouge { color: #dc2626 !important; } .hi-vert { color: #047857 !important; }
.hi-ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .8rem; border-left: 5px solid #10b981; background: #f0fbf6; }
.hi-ligne .hi-type { background: #047857; }
.hi-retour { border-left-color: #f59e0b; background: #fff8ec; } .hi-retour .hi-type { background: #b45309; }
.hi-avance { border-left-color: #7c3aed; background: #f6f2ff; } .hi-avance .hi-type { background: #6d28d9; }
.hi-detail { font-size: .8rem; color: var(--doc-gris); margin-top: .15rem; }
.hi-ligne-montant { display: grid; text-align: right; white-space: nowrap; align-content: center; }
.hi-ligne-montant strong { font-size: .98rem; font-variant-numeric: tabular-nums; }
.hi-ligne-montant small { font-size: .74rem; color: var(--doc-gris); }
.hi-annule { opacity: .55; }
.hi-annule .hi-lignes td, .hi-annule strong { text-decoration: line-through; }
.hi-badge-annule { color: #dc2626; border: 1.5px solid #dc2626; border-radius: 4px; font-size: .62rem; font-weight: 800; padding: 0 .35rem; letter-spacing: .08em; }
.hi-bilan { margin-top: 1rem; min-width: 380px; }
@media (max-width: 600px) { .hi-cartouche { grid-template-columns: minmax(0, 1fr); } .hi-bilan { min-width: 0; width: 100%; } }
.hist-solde { color: var(--primary-color) !important; font-weight: 600; }
.hi-vide { margin: 0; padding: .4rem .8rem; font-size: .78rem; color: var(--doc-gris); font-style: italic; }

/* ========== NUMÉROTATION DES LIGNES DES ÉTATS ==========
   Chaque ligne des tableaux imprimés reçoit un numéro (1, 2, 3…) dans une colonne « N° ».
   .doc-lignes : tableaux des documents imprimés (toujours numérotés) ;
   .num-impression : tableaux d'écran numérotés seulement à l'impression (état du stock, statistiques, historiques).
   Les lignes sans article (« Aucune opération », report de solde, totaux) ne sont pas comptées. */
.doc-lignes tbody, .num-impression tbody { counter-reset: num-ligne; }
.doc-lignes thead tr::before { content: 'N°'; display: table-cell; vertical-align: middle; width: 2.2em; text-align: center;
    background: var(--doc-acc, #1f2937); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .05em; padding: .55rem .3rem; border-radius: 6px 0 0 0; }
.doc-lignes thead th:first-child { border-radius: 0; }
.doc-lignes tbody tr::before { counter-increment: num-ligne; content: counter(num-ligne); display: table-cell; vertical-align: top;
    text-align: center; color: #374151; font-weight: 600; font-size: .85em; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--doc-trait, #e5e7eb); padding: .5rem .3rem; }
.doc-lignes tbody tr:nth-child(even)::before { background: var(--doc-fond, #f8fafc); }
.doc-lignes tbody tr:has(> td[colspan])::before, .doc-lignes tbody tr.sans-num::before { counter-increment: none; content: ''; }
.doc-lignes tfoot tr::before { content: ''; display: table-cell; background: var(--doc-acc-clair, #eef2ff); border-top: 2px solid var(--doc-acc, #1f2937); }
@media print {
    .num-impression thead tr::before { content: 'N°'; display: table-cell; font-weight: 700; font-size: .75rem; text-align: center; padding: .4rem .3rem; border-bottom: 2px solid #1f2937; }
    .num-impression tbody tr::before { counter-increment: num-ligne; content: counter(num-ligne); display: table-cell; text-align: center; color: #6b7280; font-size: .8em; padding: .35rem .3rem; border-bottom: 1px solid #e5e7eb; }
    .num-impression tbody tr:has(> td[colspan])::before, .num-impression tbody tr.sans-num::before { counter-increment: none; content: ''; }
    .num-impression tfoot tr::before { content: ''; display: table-cell; }
}
/* Historique client imprimé : chaque opération de la chronologie est numérotée */
.hi-doc { counter-reset: num-operation; }
.hi-doc .hi-bloc { counter-increment: num-operation; }
.hi-doc .hi-tete > div:first-child::before, .hi-doc .hi-ligne-txt::before { content: counter(num-operation) '.'; display: inline-block; min-width: 1.9em;
    margin-right: .35rem; font-weight: 800; color: var(--doc-acc, #1f2937); font-variant-numeric: tabular-nums; }

/* Champs facultatifs des formulaires (retour, BL…) */
.facultatif { font-weight: 400; color: var(--text-muted, #6b7280); font-size: .8em; }
.table.liv-table thead th { white-space: normal !important; line-height: 1.2; vertical-align: bottom; }
.table.liv-table td, .table.liv-table th { padding-left: .5rem; padding-right: .5rem; }
.liv-table td:last-child { white-space: nowrap; }

/* ========== ÉTATS : RESTER DANS LA LARGEUR DE LA PAGE (A4 / A5) ==========
   Les tableaux des états se resserrent pour tenir dans la largeur imprimable : texte qui passe à la ligne,
   marges de cellules réduites, police plus petite en A5. Aucun tableau ne doit dépasser de la feuille. */
.feuille { overflow-wrap: break-word; }
.feuille .doc-lignes { width: 100%; max-width: 100%; }
.feuille .doc-lignes thead th { white-space: normal; letter-spacing: .03em; line-height: 1.25; }
.feuille .doc-lignes td { white-space: normal; overflow-wrap: anywhere; }
.feuille .doc-lignes td.nombre, .feuille .doc-lignes th.nombre { overflow-wrap: normal; white-space: nowrap; }
.feuille .doc-lignes td small { overflow-wrap: anywhere; }
.feuille .doc-lignes td.jc-date { white-space: nowrap; }
.feuille .jc-syntheses { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; }
.feuille.format-a5 .doc-lignes { font-size: .74rem; }
.feuille.format-a5 .doc-lignes td, .feuille.format-a5 .doc-lignes th { padding: .35rem .3rem; }
.feuille.format-a5 .doc-lignes thead th { font-size: .6rem; letter-spacing: .02em; }
.feuille.format-a5 .jc-syntheses { grid-template-columns: minmax(0, 1fr); }
.feuille.format-a5 .doc-totaux { max-width: 100%; }
@media print {
    .feuille { width: auto !important; max-width: 100% !important; }
    .feuille .doc-lignes { font-size: .78rem; }
    .feuille .doc-lignes td, .feuille .doc-lignes th { padding: .38rem .4rem; }
    .feuille.format-a5 .doc-lignes { font-size: .7rem; }
    .feuille.format-a5 .doc-lignes td, .feuille.format-a5 .doc-lignes th { padding: .3rem .25rem; }
}
.feuille .doc-lignes tfoot { display: table-row-group; }   /* totaux une seule fois, à la fin (pas répétés en bas de chaque page) */

/* ========== TICKET 80 MM (imprimante thermique) ========== */
body.document-ticket { background: #eef0f3; }
.ticket { width: 74mm; margin: 1rem auto; background: #fff; padding: 4mm 3mm; font-family: "DejaVu Sans Mono", Consolas, "Courier New", monospace;
    font-size: 11px; line-height: 1.35; color: #000; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.ticket .tk-entete { display: grid; text-align: center; gap: 1px; padding-bottom: 2mm; border-bottom: 1px dashed #000; }
.ticket .tk-societe { font-size: 13px; text-transform: uppercase; }
.ticket .tk-titre { text-align: center; font-weight: 700; letter-spacing: .08em; margin: 2mm 0 1mm; }
.ticket .tk-infos { display: grid; gap: 0; padding-bottom: 2mm; border-bottom: 1px dashed #000; }
.ticket .tk-annule { text-align: center; font-weight: 700; margin: 1mm 0; }
.ticket table { width: 100%; border-collapse: collapse; }
.ticket td { padding: 0; vertical-align: top; }
.ticket td:last-child { text-align: right; white-space: nowrap; padding-left: 2mm; }
.ticket .tk-lignes { margin: 1.5mm 0; }
.ticket .tk-lib td { padding-top: 1mm; font-weight: 600; overflow-wrap: anywhere; text-align: left; white-space: normal; padding-left: 0; }
.ticket .tk-calc td:first-child { padding-left: 3mm; }
.ticket .tk-totaux { border-top: 1px dashed #000; padding-top: 1mm; }
.ticket .tk-totaux td { padding-top: .6mm; }
.ticket .tk-net td { font-weight: 700; font-size: 13px; padding: 1mm 0; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.ticket .tk-pied { display: grid; text-align: center; gap: 1px; margin-top: 2mm; padding-top: 2mm; border-top: 1px dashed #000; }
.ticket .tk-merci { margin-top: 1.5mm; font-weight: 700; }
@media print {
    body.document-ticket { background: #fff; }
    .ticket { width: auto; margin: 0; padding: 0; box-shadow: none; }
}

/* Menu latéral : toutes les rubriques ouvertes, titres de rubrique non repliables */
.sidebar-sous-menu { display: block; }
.sidebar-section-titre { cursor: default; padding: 12px 15px 4px; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .6); }
.sidebar-section-titre:hover, .sidebar-section.courante > .sidebar-section-titre { background: transparent; color: rgba(255, 255, 255, .85); }
.sidebar-section { margin-bottom: 6px; }
.sidebar-sous-menu a { padding: 7px 15px; }
.sidebar { overflow-y: auto; overscroll-behavior: contain; }
.sv-tables th, .sv-tables td { padding: 6px 8px; font-size: .88rem; }
.sv-tables td:first-child { white-space: normal; overflow-wrap: anywhere; }

/* =====================================================================
   THÈME SOMEFA — couleurs du logo (bleu nuit et rouge Faso)
   Le bleu nuit porte l'interface (menu, boutons, titres) ; le rouge sert d'accent, avec parcimonie :
   page active du menu, trait sous le logo, carte principale du tableau de bord, documents imprimés.
   ===================================================================== */
:root {
    --somefa-nuit: #232a57;       /* bleu du logo */
    --somefa-nuit-fonce: #171c3e; /* menu latéral */
    --somefa-nuit-clair: #eef0f7;
    --somefa-rouge: #c0101e;      /* flèche et « Société metal Faso » */
    --somefa-tole: #f1f3f7;       /* fond : gris acier très clair */
    --primary-color: #232a57;
    --secondary-color: #34407a;
    --success-color: #15803d;
    --danger-color: #b91c1c;
    --warning-color: #b45309;
    --info-color: #2f5da8;
    --light-bg: #f1f3f7;
    --border-color: #dce1ea;
    --text-dark: #1b2140;
    --text-light: #5d6582;
    --tb-s1: #2f3c88; --tb-s2: #c0101e;
    --tb-texte2: #3f4766; --tb-muet: #6b7391; --tb-ligne: #e3e7ef;
    --doc-acc: #232a57; --doc-acc-clair: #eef0f7;
}
body {
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--somefa-tole);
    color: var(--text-dark);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
table { font-variant-numeric: tabular-nums; }
a { color: #2f3c88; }
:focus-visible { outline: 2px solid var(--somefa-rouge); outline-offset: 2px; }

/* ---------- Menu latéral ---------- */
.sidebar { background: var(--somefa-nuit-fonce); box-shadow: none; padding-top: 0; }
.sidebar-brand { padding: 18px 16px 16px; margin-bottom: 8px; border-bottom: 0; position: relative; }
.sidebar-brand::after {   /* trait rouge, rappel de la flèche du logo */
    content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--somefa-rouge) 0%, var(--somefa-rouge) 45%, rgba(255, 255, 255, .14) 45%);
}
.sidebar-logo { display: block; background: #fff; border-radius: 10px; padding: 10px 12px; }
.sidebar-logo img { display: block; width: 100%; height: auto; max-height: 92px; object-fit: contain; }
.sidebar-brand h5 { color: #fff; font-size: 1.05rem; }
.sidebar-brand small { margin-top: 8px; font-size: .74rem; color: rgba(255, 255, 255, .55); opacity: 1; }
.sidebar-menu { padding: 0 10px 24px; }
.sidebar-menu li { margin-bottom: 1px; }
.sidebar-menu a { color: rgba(255, 255, 255, .78); border-radius: 7px; transition: background-color .15s ease, color .15s ease; font-weight: 500; }
.sidebar-menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-menu a.active { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 3px 0 0 var(--somefa-rouge); font-weight: 600; }
.sidebar-menu a i { color: rgba(255, 255, 255, .5); }
.sidebar-menu a.active i, .sidebar-menu a:hover i { color: #fff; }
.sidebar-section-titre { text-transform: none; letter-spacing: .01em; font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .5); padding: 14px 15px 4px; }
.sidebar-section-titre > i:first-child { display: none; }
.sidebar-sous-menu { padding-left: 4px; }
.sidebar-sous-menu a { font-size: .92rem; padding: 8px 14px; }

/* ---------- Barre du haut et titres ---------- */
.navbar { box-shadow: none; border-bottom: 1px solid var(--border-color); padding: 12px 30px; }
.navbar-societe { color: var(--somefa-nuit); font-weight: 700; }
.navbar-sous-titre { color: var(--text-light); }
.logout-btn { background: #fff; color: var(--somefa-rouge); border: 1px solid #f1c4c8; }
.logout-btn:hover { background: var(--somefa-rouge); color: #fff; }
.page-header { margin-bottom: 22px; }
.page-title { font-size: 1.65rem; letter-spacing: -.01em; color: var(--text-dark); }
.page-title i { color: var(--somefa-nuit); opacity: .85; }
.page-subtitle { color: var(--text-light); }

/* ---------- Boutons ---------- */
.btn { border-radius: 8px; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover, .btn-primary:hover { transform: none; box-shadow: none; }
.btn-primary { background: var(--somefa-nuit); color: #fff; }
.btn-primary:hover { background: #1a2047; color: #fff; }
.btn-secondary { background: #fff; color: var(--somefa-nuit); border: 1px solid #c7cde0; }
.btn-secondary:hover { background: var(--somefa-nuit-clair); color: var(--somefa-nuit); }
.btn-success { background: var(--success-color); }
.btn-success:hover { background: #126c33; }
.btn-danger { background: var(--danger-color); }
.btn-danger:hover { background: #991b1b; }
.btn-warning { background: #d97706; color: #fff; }
.btn-warning:hover { background: #b45309; color: #fff; }
.btn-light { background: #fff; color: var(--text-dark); border: 1px solid var(--border-color); }
.btn-light:hover { background: var(--somefa-nuit-clair); border-color: #c7cde0; }
.bouton-principal { background: var(--somefa-nuit); }
.bouton-principal:hover { background: #1a2047; transform: none; box-shadow: none; }

/* ---------- Cartes et indicateurs ---------- */
.detail-card, .carte, .filter-card, .tb-carte {
    background: #fff; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 1px 2px rgba(23, 28, 62, .05);
}
.stat-card { border-radius: 12px; border: 1px solid var(--border-color); border-left-width: 4px; box-shadow: 0 1px 2px rgba(23, 28, 62, .05); }
.stat-card:hover { transform: none; box-shadow: 0 2px 6px rgba(23, 28, 62, .08); }
.stat-card.primary { border-left-color: var(--somefa-nuit); }
.stat-value { color: var(--text-dark); }
.titre-carte { color: var(--somefa-nuit); }
.tb-kpi { border-radius: 12px; border-color: var(--border-color); }
.tb-kpi-hero { background: var(--somefa-nuit); position: relative; overflow: hidden; }
.tb-kpi-hero::before {   /* bande rouge oblique, comme la flèche du logo */
    content: ''; position: absolute; top: 0; left: 0; width: 46%; height: 4px; background: var(--somefa-rouge);
}
.tb-preset.actif, .tb-preset[aria-pressed="true"] { background: var(--somefa-nuit); border-color: var(--somefa-nuit); color: #fff; }
.cr-onglets a.actif { border-color: var(--somefa-nuit); box-shadow: inset 0 -3px 0 var(--somefa-rouge); color: var(--somefa-nuit); }

/* ---------- Tableaux (écran) ---------- */
.table thead th {
    background: #f5f6fa; color: #4a5274; text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 600;
    padding: 11px 14px; border-bottom: 1px solid var(--border-color);
}
.table tbody td { padding: 11px 14px; }
.table tbody tr:hover { background: #f7f8fb; }
.carte th { text-transform: none; letter-spacing: 0; color: #4a5274; }
.tb-table th { text-transform: none; letter-spacing: 0; font-size: .8rem; color: #5d6582; }
.ligne-total td, tr.ligne-total td { background: var(--somefa-nuit-clair); color: var(--somefa-nuit); font-weight: 700; }

/* ---------- Formulaires ---------- */
.form-control, .filter-card input, .filter-card select { border-color: #cbd2df; border-radius: 8px; }
.form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--somefa-nuit); box-shadow: 0 0 0 3px rgba(35, 42, 87, .14); outline: none; }
.form-label { color: #2b3253; font-weight: 600; }
.total-net { color: var(--somefa-nuit); }

/* ---------- Connexion ---------- */
.login-page {
    background:
        linear-gradient(160deg, transparent 0 58%, rgba(192, 16, 30, .9) 58% 61%, transparent 61%),
        linear-gradient(160deg, var(--somefa-nuit-fonce) 0%, var(--somefa-nuit) 100%);
    padding: 16px;
}
.login-card { border-radius: 14px; padding: 34px 32px 28px; box-shadow: 0 24px 60px rgba(10, 14, 40, .35); border-top: 4px solid var(--somefa-rouge); }
.login-header { margin-bottom: 24px; }
.login-logo { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto 10px; }
.login-header h1 { color: var(--somefa-nuit); }
.login-header p { color: var(--text-light); }

/* ---------- Documents imprimés : bandeau bleu nuit avec départ rouge ---------- */
.feuille { border-top: 0; position: relative; }
.feuille::before {
    content: ''; display: block; height: 7px; margin: -2.2rem -2.4rem 1.6rem; border-radius: 6px 6px 0 0;
    background: linear-gradient(90deg, var(--somefa-rouge) 0 22%, var(--somefa-nuit) 22% 100%);
}
.feuille.format-a5::before { height: 5px; margin: -1.4rem -1.5rem 1.1rem; }
.doc-lignes thead th, .doc-lignes thead tr::before { text-transform: none; letter-spacing: .01em; font-size: .74rem; }
.doc-client { border-left-color: var(--somefa-rouge); }
.doc-client .etiquette { color: var(--somefa-rouge); text-transform: none; letter-spacing: .02em; font-size: .74rem; }
.doc-totaux tr.fort th, .doc-totaux tr.fort td { background: var(--somefa-nuit); color: #fff; }
@media print {
    .feuille::before { margin: 0 0 1rem; border-radius: 0; }
}
.stat-label, .indicateur .etiquette, .etiquette { text-transform: none; letter-spacing: .01em; font-size: .84rem; color: var(--text-light); font-weight: 600; }
.table thead th { text-align: left; vertical-align: bottom; }
.table thead th.text-end, .table thead th.nombre { text-align: right; }
.table thead th.text-center { text-align: center; }
.doc-lignes thead th, .doc-lignes thead tr::before { vertical-align: middle; }

/* Ligne qui vient d'être ajoutée à un panier / un document : brève mise en évidence */
@keyframes ligne-ajoutee { from { background-color: #dfe3f3; box-shadow: inset 3px 0 0 var(--somefa-rouge); } to { background-color: transparent; box-shadow: inset 3px 0 0 transparent; } }
.ligne-panier.ligne-ajoutee { animation: ligne-ajoutee 1.4s ease-out; }
.toast-ajout { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 2000;
    background: var(--somefa-nuit); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: .9rem;
    max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(10, 14, 40, .3); transition: opacity .2s ease, transform .2s ease; }
.toast-ajout.visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ligne-panier.ligne-ajoutee { animation: none; background-color: #eef0f7; } .toast-ajout { transition: none; } }

/* =====================================================================
   PAGE DE CONNEXION — écran partagé : scène de marque animée / formulaire
   ===================================================================== */
body.login-page { display: block; min-height: 100vh; padding: 0; background: var(--somefa-tole); }
.cx { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); min-height: 100vh; }

/* --- Scène de marque --- */
.cx-marque {
    --lx: 50%; --ly: 40%;
    position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
    padding: 44px 52px 40px;
    background:
        radial-gradient(600px circle at var(--lx) var(--ly), rgba(125, 137, 201, .22), transparent 60%),
        linear-gradient(155deg, #12173a 0%, var(--somefa-nuit) 55%, #2b3470 100%);
}
.cx-tole {   /* tôle ondulée : reflets réguliers, comme une feuille de bac acier */
    position: absolute; inset: -20%; transform: rotate(-12deg); opacity: .5; pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, .05) 14px 22px, rgba(255, 255, 255, 0) 22px 36px);
    mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%);
    animation: cx-tole 26s linear infinite;
}
@keyframes cx-tole { from { background-position: 0 0; } to { background-position: 360px 0; } }
.cx-scene { position: absolute; right: -4%; bottom: 4%; width: min(78%, 620px); height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.cx-calque { transition: transform .35s ease-out; }
.cx-barre { transform-box: fill-box; transform-origin: 50% 100%; animation: cx-monte .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.15s + var(--i) * .09s); }
@keyframes cx-monte { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.cx-fenetres { animation: cx-apparait .6s ease 1s both; }
.cx-trait { stroke-dasharray: 520; stroke-dashoffset: 520; animation: cx-trace 1.3s cubic-bezier(.6, .1, .2, 1) .55s forwards; }
.cx-trait-bleu { animation-delay: .35s; }
@keyframes cx-trace { to { stroke-dashoffset: 0; } }
.cx-pointe { transform-box: fill-box; transform-origin: center; animation: cx-pointe .45s cubic-bezier(.3, 1.6, .5, 1) 1.65s both; }
@keyframes cx-pointe { from { opacity: 0; transform: scale(.2) translate(-20px, 20px); } to { opacity: 1; transform: none; } }
@keyframes cx-apparait { from { opacity: 0; } }

.cx-marque-texte { position: relative; max-width: 440px; animation: cx-glisse .7s ease .2s both; }
@keyframes cx-glisse { from { opacity: 0; transform: translateY(14px); } }
.cx-logo { display: inline-block; background: #fff; border-radius: 14px; padding: 12px 16px; margin-bottom: 34px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.cx-logo img { display: block; height: 70px; width: auto; }
.cx-salut { margin: 0; font-size: 1.05rem; color: rgba(255, 255, 255, .7); }
.cx-titre { margin: 2px 0 12px; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; color: #fff; }
.cx-accroche { margin: 0; color: rgba(255, 255, 255, .72); font-size: 1rem; max-width: 34ch; }
.cx-horloge { position: relative; display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--somefa-rouge); }
.cx-heure { font-size: 2.6rem; font-weight: 300; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1; }
.cx-date { color: rgba(255, 255, 255, .7); font-size: .95rem; }

/* --- Formulaire --- */
.cx-formulaire { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 32px 24px; background: #fff; position: relative; }
.cx-formulaire::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--somefa-rouge) 0 30%, var(--somefa-nuit) 30%); }
.cx-carte { width: 100%; max-width: 380px; animation: cx-glisse .6s ease .1s both; }
.cx-carte.cx-erreur { animation: cx-secoue .45s ease; }
@keyframes cx-secoue { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.cx-logo-mobile { display: none; }
.cx-carte h2 { font-size: 1.75rem; font-weight: 700; color: var(--text-dark); margin: 0 0 6px; letter-spacing: -.01em; }
.cx-sous { color: var(--text-light); margin: 0 0 26px; font-size: .95rem; }
.cx-alerte { border-radius: 10px; padding: 11px 14px; margin-bottom: 16px; font-size: .92rem; line-height: 1.4; }
.cx-alerte-erreur { background: #fdecee; color: #8f0c17; border: 1px solid #f6c5ca; }
.cx-alerte-info { background: var(--somefa-nuit-clair); color: var(--somefa-nuit); border: 1px solid #d5daee; }

.cx-champ { position: relative; margin-bottom: 16px; }
.cx-champ input {
    width: 100%; height: 58px; padding: 22px 48px 6px 46px; font-size: 1rem; color: var(--text-dark);
    border: 1.5px solid #cbd2df; border-radius: 12px; background: #f8f9fc; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.cx-champ input:hover { border-color: #aab3c9; }
.cx-champ input:focus { outline: none; background: #fff; border-color: var(--somefa-nuit); box-shadow: 0 0 0 4px rgba(35, 42, 87, .12); }
.cx-champ label {
    position: absolute; left: 46px; top: 50%; transform: translateY(-50%); color: #6b7391; font-size: 1rem; pointer-events: none;
    transition: top .15s ease, font-size .15s ease, color .15s ease; margin: 0; font-weight: 500;
}
.cx-champ input:focus + label, .cx-champ input:not(:placeholder-shown) + label { top: 17px; font-size: .74rem; color: var(--somefa-nuit); font-weight: 600; }
.cx-ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: #8a92ad; transition: fill .15s ease; }
.cx-champ:focus-within .cx-ic { fill: var(--somefa-nuit); }
.cx-champ.cx-vide input { border-color: var(--somefa-rouge); background: #fff7f7; }
.cx-oeil { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; display: grid; place-items: center; }
.cx-oeil:hover { background: var(--somefa-nuit-clair); }
.cx-oeil svg { width: 21px; height: 21px; fill: #6b7391; }
.cx-oeil .cx-oeil-barre { display: none; }
.cx-oeil[aria-pressed="true"] .cx-oeil-barre { display: inline; }
.cx-maj { margin: -6px 0 12px; font-size: .84rem; color: #92400e; background: #fef3c7; border-radius: 8px; padding: 6px 10px; }
.cx-souvenir { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--text-light); margin: 4px 0 22px; cursor: pointer; font-weight: 500; }
.cx-souvenir input { width: 17px; height: 17px; accent-color: var(--somefa-nuit); }
.cx-bouton {
    position: relative; width: 100%; height: 54px; border: 0; border-radius: 12px; cursor: pointer; overflow: hidden;
    background: var(--somefa-nuit); color: #fff; font-size: 1.02rem; font-weight: 700; letter-spacing: .01em;
    transition: background-color .15s ease, transform .1s ease;
}
.cx-bouton::after {   /* reflet métallique au survol */
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); transition: left .6s ease;
}
.cx-bouton:hover { background: #1a2047; }
.cx-bouton:hover::after { left: 120%; }
.cx-bouton:active { transform: translateY(1px); }
.cx-bouton:focus-visible { outline: 3px solid var(--somefa-rouge); outline-offset: 3px; }
.cx-roue { display: none; width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: cx-tourne .7s linear infinite; }
.cx-bouton.cx-attente .cx-bouton-texte { display: none; }
.cx-bouton.cx-attente .cx-roue { display: inline-block; vertical-align: middle; }
@keyframes cx-tourne { to { transform: rotate(360deg); } }
.cx-pied { margin: 28px 0 0; color: #9aa1b8; font-size: .82rem; }

/* --- Tablette et téléphone : bandeau de marque réduit au-dessus du formulaire --- */
@media (max-width: 900px) {
    .cx { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .cx-marque { padding: 22px 20px 20px; min-height: 0; flex-direction: row; align-items: flex-end; }
    .cx-scene { width: 230px; right: -30px; bottom: -40px; opacity: .55; }
    .cx-marque-texte .cx-logo, .cx-accroche { display: none; }
    .cx-titre { font-size: 1.3rem; margin-bottom: 0; }
    .cx-salut { font-size: .9rem; }
    .cx-horloge { display: none; }
    .cx-formulaire { padding: 28px 16px 20px; justify-content: flex-start; }
    .cx-formulaire::before { display: none; }
    .cx-logo-mobile { display: block; height: 64px; width: auto; margin: 0 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .cx-tole, .cx-barre, .cx-fenetres, .cx-trait, .cx-pointe, .cx-marque-texte, .cx-carte, .cx-carte.cx-erreur { animation: none !important; }
    .cx-trait { stroke-dashoffset: 0; }
    .cx-calque, .cx-bouton::after { transition: none; }
}

/* =====================================================================
   RAFFINEMENTS DE L'INTERFACE (lisibilité d'abord)
   ===================================================================== */
/* Barre du haut : fil d'Ariane, date, avatar */
.navbar { position: sticky; top: 0; z-index: 900; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); }
.navbar-sous-titre { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: .82rem; opacity: 1; color: var(--text-light); }
.navbar-sous-titre .fil strong { color: var(--text-dark); font-weight: 600; }
.navbar-date { color: #8a92ad; }
.navbar-date::before { content: '·'; margin-right: 12px; color: #c4cad8; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--somefa-nuit); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .02em; box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--somefa-rouge); }
.user-menu { gap: 12px; }
.user-info { text-align: left; line-height: 1.25; }
.logout-btn { border-radius: 8px; padding: 7px 12px; font-weight: 600; }

/* Titres de page */
.main-content { padding: 26px 30px 40px; }
.page-title { display: flex; align-items: center; gap: 10px; }
.page-title i { width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 1.05rem;
    background: var(--somefa-nuit-clair); color: var(--somefa-nuit); opacity: 1; margin: 0 !important; }
.page-actions { gap: 8px; }
.page-actions .btn { display: inline-flex; align-items: center; }

/* Tableaux : lignes alternées légères, en-têtes qui restent visibles en faisant défiler une liste */
.table tbody tr:nth-child(even) td { background: #fafbfd; }
.table tbody tr:hover td { background: #f1f3f9; }
.table-responsive .table thead th, .table-defile .table thead th, .st-defile .tb-table thead th { position: sticky; top: 0; z-index: 1; }
.tb-table tbody tr:hover td { background: #f7f8fb; }
td.nombre, td.text-end { font-variant-numeric: tabular-nums; }

/* Champs : même hauteur partout, étiquettes nettes */
.form-control, select.form-control, .filter-card input, .filter-card select { min-height: 42px; }
.filter-card label { font-weight: 600; color: #2b3253; font-size: .84rem; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--somefa-nuit); }

/* Badges plus lisibles */
.badge { font-weight: 600; letter-spacing: .01em; }

/* Messages */
.alert { border-radius: 10px; border-width: 1px; }
.alert-success { background: #ecfdf3; color: #14532d; border-color: #bbf7d0; }
.alert-danger { background: #fdecee; color: #8f0c17; border-color: #f6c5ca; }
.alert-info { background: var(--somefa-nuit-clair); color: var(--somefa-nuit); border-color: #d5daee; }
.alert-warning { background: #fff8eb; color: #7c2d12; border-color: #fde3b0; }

/* Barre de défilement discrète dans le menu */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; }
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }

@media (max-width: 991px) {
    .main-content { padding: 18px 16px 90px; }
    .navbar-date, .user-info { display: none; }
    .page-title { font-size: 1.35rem; }
    .page-title i { width: 34px; height: 34px; }
}
.filter-card label, .filtres-grille > * { min-width: 0; }
.filter-card input, .filter-card select, .filter-card .form-control { max-width: 100%; min-width: 0; width: 100%; box-sizing: border-box; }

/* =====================================================================
   UNIVERS DE LA PAGE DE CONNEXION APPLIQUÉ À TOUT LE SITE
   Bleu nuit en dégradé, reflets de tôle ondulée, immeubles et flèche du logo, lumière qui suit la souris.
   Le contenu (tableaux, formulaires) reste sur fond clair pour rester lisible.
   ===================================================================== */
:root {
    --somefa-degrade: linear-gradient(155deg, #12173a 0%, #232a57 55%, #2b3470 100%);
    --somefa-tole-reflets: repeating-linear-gradient(102deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, .045) 14px 22px, rgba(255, 255, 255, 0) 22px 36px);
}

/* Menu latéral */
.sidebar {
    --lx: 50%; --ly: 20%;
    background:
        radial-gradient(420px circle at var(--lx) var(--ly), rgba(125, 137, 201, .20), transparent 60%),
        var(--somefa-tole-reflets),
        var(--somefa-degrade);
    background-attachment: local, local, local;
}
.sidebar-logo { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); border-radius: 14px; }
.sidebar-menu a.active { background: rgba(255, 255, 255, .13); }

/* Bandeau de page */
.bandeau {
    --lx: 70%; --ly: 30%;
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px;
    padding: 26px 30px 24px; margin-bottom: 24px; border-radius: 18px; color: #fff;
    background:
        radial-gradient(520px circle at var(--lx) var(--ly), rgba(125, 137, 201, .24), transparent 60%),
        var(--somefa-degrade);
    box-shadow: 0 14px 34px rgba(18, 23, 58, .18);
}
.bandeau::after {   /* liseré rouge en bas à gauche, comme la flèche */
    content: ''; position: absolute; left: 0; bottom: 0; width: 34%; height: 4px; background: var(--somefa-rouge); border-radius: 0 4px 0 0;
}
.bandeau-tole { position: absolute; inset: -30%; transform: rotate(-12deg); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, .05) 14px 22px, rgba(255, 255, 255, 0) 22px 36px); z-index: -1; pointer-events: none; }
.bandeau-motif { position: absolute; right: -10px; bottom: -58px; width: 300px; height: auto; opacity: .5; z-index: -1; pointer-events: none; }
.bandeau-contenu { min-width: 0; animation: cx-glisse .45s ease both; }
.bandeau .page-title { color: #fff; margin-bottom: 4px; font-size: 1.7rem; }
.bandeau .page-title i { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.bandeau .page-subtitle { color: rgba(255, 255, 255, .78); margin-bottom: 0; }
.bandeau .page-subtitle a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.bandeau .page-subtitle strong { color: #fff; }
.bandeau .page-actions { margin-top: 16px; }
.bandeau .btn-primary { background: var(--somefa-rouge); }
.bandeau .btn-primary:hover { background: #a00d18; }
.bandeau .btn-secondary, .bandeau .btn-light {
    background: rgba(255, 255, 255, .10); color: #fff; border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(4px);
}
.bandeau .btn-secondary:hover, .bandeau .btn-light:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: rgba(255, 255, 255, .45); }
.bandeau .btn-success { box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.bandeau-horloge { display: grid; justify-items: end; gap: 2px; padding-right: 4px; text-align: right; }
.bandeau-salut { color: rgba(255, 255, 255, .75); font-size: .95rem; }
.bandeau-horloge .cx-heure { font-size: 2.4rem; color: #fff; }

/* Champs : même style que la connexion */
.form-control, .filter-card input:not([type="checkbox"]):not([type="radio"]), .filter-card select, .tb-filtres input, .tb-filtres select {
    border: 1.5px solid #cbd2df; border-radius: 10px; background-color: #f8f9fc; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.form-control:hover, .filter-card input:hover, .filter-card select:hover { border-color: #aab3c9; }
.form-control:focus, .filter-card input:focus, .filter-card select:focus, .tb-filtres input:focus, .tb-filtres select:focus {
    background-color: #fff; border-color: var(--somefa-nuit); box-shadow: 0 0 0 4px rgba(35, 42, 87, .12); outline: none;
}

/* Boutons : coins plus ronds, reflet métallique sur le bouton principal */
.btn { border-radius: 10px; }
.btn-primary, .btn-success, .btn-danger, .bouton-principal { position: relative; overflow: hidden; }
.btn-primary::after, .btn-success::after, .bouton-principal::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); transition: left .6s ease;
}
.btn-primary:hover::after, .btn-success:hover::after, .bouton-principal:hover::after { left: 120%; }

/* Cartes */
.detail-card, .carte, .filter-card, .tb-carte, .stat-card, .tb-kpi { border-radius: 14px; }
.tb-kpi-hero {
    background: radial-gradient(400px circle at 85% 0%, rgba(125, 137, 201, .25), transparent 60%), var(--somefa-tole-reflets), var(--somefa-degrade);
    box-shadow: 0 14px 30px rgba(18, 23, 58, .2);
}

/* Téléphone */
@media (max-width: 991px) {
    .bandeau { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 18px; border-radius: 14px; }
    .bandeau .page-title { font-size: 1.35rem; }
    .bandeau-motif { width: 190px; bottom: -40px; right: -30px; opacity: .35; }
    .bandeau-horloge { display: none; }
}
/* Impression d'une page d'écran : bandeau sobre */
@media print {
    .bandeau { background: none !important; color: #000; box-shadow: none; padding: 0 0 10px; }
    .bandeau::after, .bandeau-tole, .bandeau-motif, .bandeau-horloge { display: none; }
    .bandeau .page-title, .bandeau .page-subtitle { color: #000; }
    .bandeau-contenu { animation: none !important; opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .bandeau-contenu, .bandeau .cx-barre, .bandeau .cx-trait, .bandeau .cx-pointe { animation: none !important; }
    .bandeau .cx-trait { stroke-dashoffset: 0; }
    .btn-primary::after, .btn-success::after, .bouton-principal::after { transition: none; }
}

/* =====================================================================
   FLUIDITÉ
   ===================================================================== */
/* Passage d'une page à l'autre en fondu rapide, menu et barre du haut immobiles (Chrome / Edge récents) */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: menu; }
.navbar { view-transition-name: barre-haut; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
/* Effets coûteux retirés : flou derrière la barre du haut et derrière les boutons du bandeau */
.navbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
.bandeau .btn-secondary, .bandeau .btn-light { backdrop-filter: none; }
/* Le navigateur ne dessine les longues listes qu'au moment où elles arrivent à l'écran */
.table-responsive, .table-defile { contain: content; }
/* Animation du bandeau raccourcie */
.bandeau .cx-barre { animation-duration: .6s; }
.bandeau .cx-trait { animation-duration: .8s; animation-delay: .2s; }
.bandeau .cx-pointe { animation-delay: .9s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.icones-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 12px; }
.icones-choix form { background: #f8f9fc; border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; }

/* Barres d'actions qui restent visibles en bas de l'écran (inventaire…) : la page défile sur la fenêtre,
   la zone de contenu ne doit donc pas être elle-même une zone de défilement (sinon « sticky » ne marche pas) */
.main-content { overflow: visible; }
.content { min-width: 0; overflow-x: clip; }
.inv-pied {
    position: sticky; bottom: 0; z-index: 20; margin: 14px -20px -18px; padding: 12px 20px;
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--border-color); border-radius: 0 0 14px 14px;
    box-shadow: 0 -8px 20px rgba(18, 23, 58, .08);
}
@media (max-width: 991px) {
    .inv-pied { margin: 12px -14px -14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
    .inv-pied .small { flex-basis: 100%; }
    .inv-pied .btn { flex: 1; }
}
.inv-pied .small { flex: 1 1 240px; min-width: 0; }
.inv-pied .btn { flex: none; }
@media (max-width: 991px) { .inv-pied .btn { flex: 1 1 0; } }
@media (max-width: 991px) {
    .inv-pied .small { display: none; }
    .inv-pied { flex-wrap: nowrap; }
    .inv-pied .btn { flex: 1 1 0; padding-left: 8px; padding-right: 8px; white-space: normal; line-height: 1.2; }
}

/* =====================================================================
   CONNEXION PERDUE / CONSULTATION HORS CONNEXION
   ===================================================================== */
.hl-bandeau { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 3000; display: flex; align-items: center; gap: 14px;
    max-width: min(760px, calc(100vw - 24px)); padding: 12px 14px 12px 18px; border-radius: 12px; font-weight: 600; font-size: .92rem; line-height: 1.35;
    box-shadow: 0 14px 34px rgba(10, 14, 40, .3); }
.hl-bandeau[hidden] { display: none; }
.hl-bandeau.hl-erreur { background: #8f0c17; color: #fff; }
.hl-bandeau.hl-info { background: var(--somefa-nuit); color: #fff; }
.hl-bandeau span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 10px; background: #ffd1d4; box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); vertical-align: 1px; }
.hl-bandeau.hl-info span::before { background: #7ee2a0; }
.hl-bandeau button { flex: none; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); color: #fff; border-radius: 8px; padding: 7px 12px; font-weight: 700; cursor: pointer; }
.hl-bandeau button:hover { background: rgba(255, 255, 255, .25); }
.hl-copie .main-content { filter: saturate(.85); }
.hl-copie form :disabled { cursor: not-allowed; }
.toast-ajout.toast-erreur { background: #8f0c17; }
@media (max-width: 991px) { .hl-bandeau { top: auto; bottom: 12px; font-size: .86rem; flex-wrap: wrap; } }
@media print { .hl-bandeau { display: none !important; } }


/* =====================================================================
   LISTES : TOUTES LES COLONNES VISIBLES
   - le texte des cellules passe à la ligne au lieu d'élargir le tableau (montants, dates, badges restent sur une ligne) ;
   - tableau trop large : resserré automatiquement (serre-1, serre-2), puis défilement avec indication ;
   - menu latéral réductible aux icônes sur grand écran (bouton ☰), choix gardé sur le poste.
   ===================================================================== */
.main-content :is(.table, .tb-table, .carte table, .table-cliquable) th { white-space: normal; }
.main-content :is(.table, .tb-table, .carte table, .table-cliquable) td { white-space: normal; overflow-wrap: break-word; }
.main-content :is(.table, .tb-table, .carte table, .table-cliquable) :is(td.text-end, td.nombre, td.text-nowrap, td[data-label="Date"], th.text-end, th.nombre, td:first-child) { white-space: nowrap; }
.main-content :is(.table, .tb-table, .carte table, .table-cliquable) td :is(.badge, .btn, .bouton, .text-nowrap) { white-space: nowrap; }
.main-content table.serre-1 { font-size: .82rem; }
.main-content table.serre-1 :is(th, td) { padding-left: 6px !important; padding-right: 6px !important; }
.main-content table.serre-1 th { font-size: .7rem; }
.main-content table.serre-2 { font-size: .76rem; }
.main-content table.serre-2 :is(th, td) { padding: 6px 4px !important; }
.main-content table.serre-2 th { font-size: .66rem; letter-spacing: 0; }
.main-content table.serre-2 td .badge { padding: 2px 6px; font-size: .7rem; }
.main-content table.serre-2 td .btn { padding: 3px 6px; font-size: .74rem; }
.main-content table:is(.serre-1, .serre-2) td small { font-size: .7rem; }
.defile-aide { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 8px;
    padding: 8px 12px; border-radius: 9px; background: #eef1fa; color: var(--somefa-nuit, #232a57); font-size: .84rem; font-weight: 600; }
.defile-aide[hidden] { display: none; }
.defile-aide i { margin-right: 6px; }
.defile-actif { background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left / 24px 100% no-repeat local,
                linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right / 24px 100% no-repeat local,
                radial-gradient(farthest-side at 0 50%, rgba(18, 23, 58, .18), transparent) left / 10px 100% no-repeat scroll,
                radial-gradient(farthest-side at 100% 50%, rgba(18, 23, 58, .18), transparent) right / 10px 100% no-repeat scroll; }
.prod-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 991.98px) { .prod-grille { grid-template-columns: minmax(0, 1fr); } }

.sidebar-menu a .lib { min-width: 0; }
@media print { .defile-aide { display: none !important; } }
html.sans-icones .menu-toggle i::before { content: '\2630'; font-family: inherit; font-style: normal; }

/* =====================================================================
   BONS DE COMMANDE CLIENTS
   ===================================================================== */
.cmd-progression { height: 8px; border-radius: 4px; background: var(--border-color, #e3e7ef); overflow: hidden; margin: 0 0 12px; }
.cmd-progression span { display: block; height: 100%; background: linear-gradient(90deg, #2f9e5b, #45c178); border-radius: 4px; }
.cmd-progression.petite { height: 6px; margin: 2px 0 3px; min-width: 70px; }
a.cmd-raccourci { text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.cmd-raccourci:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18, 23, 58, .12); }
a.cmd-raccourci.actif { outline: 2px solid var(--somefa-nuit, #232a57); outline-offset: 2px; }
#form-facturer .modes label { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
#form-facturer .modes input { margin: 0; }

/* =====================================================================
   MISE À JOUR DU LOGICIEL
   ===================================================================== */
.maj-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
    padding: 34px 18px; border: 2px dashed #b9c0d8; border-radius: 14px; background: #f7f8fc; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.maj-zone i { font-size: 2.2rem; color: var(--somefa-nuit, #232a57); }
.maj-zone span { font-weight: 600; color: var(--somefa-nuit, #232a57); overflow-wrap: anywhere; }
.maj-zone small { color: #7a83a3; }
.maj-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.maj-zone.survol, .maj-zone:hover { border-color: var(--somefa-nuit, #232a57); background: #eef1fa; }
.maj-zone.choisi { border-style: solid; border-color: #2f9e5b; background: #effaf3; }
.maj-liste { margin: 8px 0; font-size: .86rem; }
.maj-liste summary { cursor: pointer; font-weight: 600; color: var(--somefa-nuit, #232a57); }
.maj-liste ul { max-height: 220px; overflow: auto; margin: 6px 0 0; padding-left: 18px; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.maj-journal { padding-left: 16px; margin: 0; max-height: 260px; overflow: auto; }
.maj-journal li { margin-bottom: 4px; }
.maj-versions { list-style: none; padding: 0; margin: 0; }
.maj-versions li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-color, #e3e7ef); }
.maj-versions li:last-child { border-bottom: 0; }
.maj-versions li > div { min-width: 0; flex: 1 1 200px; }


/* =====================================================================
   RUBAN (grand écran, ≥ 992 px) — à la manière du ruban de WinDev
   Barre d'onglets bleu nuit + bande claire de gros boutons (icône au-dessus du libellé) rangés en groupes
   titrés. Toujours affiché, sur l'onglet de la page ouverte ; un clic sur un autre onglet montre sa bande le
   temps de choisir, puis le ruban revient sur la page ouverte. Tablette et téléphone : menu coulissant (☰) inchangé.
   ===================================================================== */
.ruban { display: none; }
@media (min-width: 992px) {
    .sidebar, .sidebar-overlay, .navbar { display: none !important; }
    .main-container { display: block; }
    .content { margin-left: 0 !important; }
    .ruban {
        display: block; position: sticky; top: 0; z-index: 1100; color: #fff;
        background: var(--somefa-degrade, linear-gradient(155deg, #12173a 0%, #232a57 55%, #2b3470 100%));
        box-shadow: 0 8px 24px rgba(10, 14, 40, .18);
    }
    .ruban-barre { display: flex; align-items: flex-end; gap: 14px; padding: 8px 18px 0; min-height: 50px; }
    .ruban-logo { flex: none; align-self: center; display: block; background: #fff; border-radius: 8px; padding: 3px 7px; margin-bottom: 6px; line-height: 0; }
    .ruban-logo img { height: 30px; width: auto; }
    .ruban-logo strong { line-height: 30px; color: var(--somefa-nuit, #232a57); font-size: .95rem; }
    .ruban-onglets { display: flex; align-items: flex-end; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .ruban-onglets::-webkit-scrollbar { display: none; }
    .ruban-onglet {
        flex: none; border: 0; background: transparent; color: rgba(255, 255, 255, .8); font: inherit; font-size: .9rem; font-weight: 600;
        padding: 9px 16px 10px; border-radius: 9px 9px 0 0; cursor: pointer; white-space: nowrap; position: relative;
        transition: background-color .15s ease, color .15s ease;
    }
    .ruban-onglet:hover { background: rgba(255, 255, 255, .09); color: #fff; }
    /* Onglet sélectionné : même couleur que la bande, comme un intercalaire */
    .ruban-onglet.actif { background: #f4f6fb; color: var(--somefa-nuit, #232a57); }
    /* Onglet de la page ouverte, quand on regarde un autre onglet : il reste marqué d'un point rouge */
    .ruban-onglet.courant:not(.actif)::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--somefa-rouge, #c0101e); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
    .ruban-onglet.actif::before { content: ''; position: absolute; left: 10px; right: 10px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--somefa-rouge, #c0101e); }
    .ruban-utilisateur { flex: none; display: flex; align-items: center; gap: 10px; align-self: center; margin-bottom: 6px; }
    .ruban-societe { font-size: .78rem; color: rgba(255, 255, 255, .6); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ruban-utilisateur .avatar { width: 32px; height: 32px; font-size: .8rem; }
    .ruban-nom { display: flex; flex-direction: column; line-height: 1.15; max-width: 150px; }
    .ruban-nom strong { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ruban-nom small { font-size: .72rem; color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ruban-quitter { color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600; padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); }
    .ruban-quitter:hover { background: var(--somefa-rouge, #c0101e); border-color: var(--somefa-rouge, #c0101e); color: #fff; }

    /* Bande de boutons */
    .ruban-panneaux { background: linear-gradient(180deg, #f4f6fb 0%, #eceff7 100%); color: var(--text-dark, #1b2140); border-bottom: 1px solid #d5dae8; }
    .ruban-panneau { display: flex; align-items: stretch; padding: 6px 12px 0; overflow-x: auto; scrollbar-width: thin; }
    .ruban-panneau[hidden] { display: none; }
    .ruban-groupe { display: flex; flex-direction: column; padding: 0 8px; border-right: 1px solid #d5dae8; flex: none; }
    .ruban-groupe:last-child { border-right: 0; }
    .ruban-boutons { display: flex; gap: 2px; flex: 1; }
    .ruban-groupe-titre { text-align: center; font-size: .7rem; color: #7a83a3; padding: 2px 0 5px; letter-spacing: .02em; white-space: nowrap; }
    .ruban-bouton {
        width: 86px; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px;
        padding: 7px 4px 6px; border-radius: 8px; border: 1px solid transparent; color: var(--text-dark, #1b2140); text-decoration: none;
        text-align: center; transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
    }
    .ruban-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 1.08rem;
        background: #fff; color: var(--somefa-nuit, #232a57); box-shadow: 0 1px 2px rgba(18, 23, 58, .12), inset 0 0 0 1px #e1e5f0; }
    .ruban-lib { font-size: .76rem; font-weight: 600; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; }
    .ruban-bouton:hover { background: #fff; border-color: #d5dae8; box-shadow: 0 4px 12px rgba(18, 23, 58, .08); }
    .ruban-bouton:hover .ruban-ic { background: var(--somefa-nuit, #232a57); color: #fff; box-shadow: none; }
    .ruban-bouton:active { transform: translateY(1px); }
    /* Page ouverte : bouton « enfoncé », icône rouge */
    .ruban-bouton.actif { background: #fff; border-color: #c9cfe2; box-shadow: inset 0 -3px 0 var(--somefa-rouge, #c0101e); }
    .ruban-bouton.actif .ruban-ic { background: var(--somefa-rouge, #c0101e); color: #fff; box-shadow: none; }


    /* Éléments collés sous le ruban (sa hauteur est mise à jour en direct) */
    .panier, .reg-resume { top: calc(var(--haut-ruban, 140px) + 12px); }
    .st-nav { top: var(--haut-ruban, 140px); }
    .main-content { padding-top: 24px; }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
    .ruban-societe, .ruban-nom small { display: none; }
    .ruban-onglet { padding: 9px 11px 10px; font-size: .85rem; }
    .ruban-bouton { width: 78px; }
}
@media (min-width: 992px) and (max-width: 1099.98px) {
    .ruban-nom { display: none; }
}
@media print { .ruban { display: none !important; } }
@media (min-width: 992px) { .ruban { view-transition-name: ruban; } }
@media (min-width: 992px) and (max-width: 1139.98px) {
    .ruban-bouton { width: 70px; padding-left: 2px; padding-right: 2px; }
    .ruban-lib { font-size: .72rem; }
    .ruban-groupe { padding: 0 5px; }
    .ruban-panneau { padding-left: 6px; padding-right: 6px; }
}

/* Connexion : poste à autoriser */
.cx-poste { border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; background: #eef1fa; border: 1px solid #cfd5ea; color: #1b2140; text-align: center; }
.cx-poste strong { display: block; font-size: .95rem; }
.cx-poste-code { display: inline-block; margin: 8px 0 6px; padding: 6px 14px; border-radius: 8px; background: #fff; border: 1px dashed #232a57;
    font: 700 1.35rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .12em; color: #232a57; }
.cx-poste p { margin: 0; font-size: .85rem; line-height: 1.45; color: #4a5272; }
.cx-poste.refuse { background: #fdecee; border-color: #f2b8bf; }
.cx-poste.refuse .cx-poste-code { border-color: #c0101e; color: #c0101e; }

/* Postes autorisés */
.postes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.poste-carte { border: 1px solid var(--border-color, #e3e7ef); border-radius: 12px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.poste-attente { border-left: 4px solid #d97706; }
.poste-autorise { border-left: 4px solid #2f9e5b; }
.poste-refuse { border-left: 4px solid #c0101e; opacity: .85; }
.poste-tete { display: flex; align-items: center; gap: 12px; min-width: 0; }
.poste-code { flex: none; font: 700 1rem/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; padding: 8px 10px; border-radius: 8px; background: #eef1fa; color: var(--somefa-nuit, #232a57); border: 1px dashed #b9c0d8; }
.poste-titre { min-width: 0; display: flex; flex-direction: column; }
.poste-titre strong { overflow-wrap: anywhere; }
.poste-titre small { color: #7a83a3; overflow-wrap: anywhere; }
.poste-infos { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: .82rem; }
.poste-infos dt { color: #7a83a3; font-weight: 500; }
.poste-infos dd { margin: 0; overflow-wrap: anywhere; }
.poste-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.poste-actions .form-control { flex: 1 1 160px; min-width: 0; }
.ruban-ic { position: relative; }
.ruban-pastille { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--somefa-rouge, #c0101e); color: #fff; font: 700 .68rem/18px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #f4f6fb; }
@media (max-width: 575.98px) { .postes-grille { grid-template-columns: 1fr; } }

/* Actions sur les lignes des listes : icônes compactes (libellé en info-bulle), libellés visibles sur téléphone */
.btn-ligne { padding: 4px 8px; }
.btn-ligne + .btn-ligne, .btn-ligne + .btn, .btn + .btn-ligne { margin-left: 3px; }
.btn-ligne .txt-action { display: none; }
.btn-ligne-danger { color: #b3121f; }
.btn-ligne-danger:hover { background: #fdecee; border-color: #f2b8bf; color: #8f0c17; }
.actions-ligne { white-space: nowrap; }
@media (max-width: 767.98px) {
    .btn-ligne .txt-action { display: inline; }
    .actions-ligne { white-space: normal; }
    .actions-ligne .btn { margin: 2px 0 2px 3px; }
}
.raison-blocage { background: #fff7e6; border-left: 4px solid #d97706; padding: 8px 12px; border-radius: 6px; color: #7a4a00 !important; }
.btn-ligne-ok { color: #17803d; }
.btn-ligne-ok:hover { background: #e9f8ef; border-color: #b6e3c6; color: #0f5f2c; }
html.sans-icones .btn-ligne .txt-action { display: inline; margin-left: 0; font-size: .74rem; }

/* =====================================================================
   TYPOGRAPHIE UNIFIÉE — la police et la taille du menu (ruban) partout dans les pages
   Police : Segoe UI (Windows) ; texte courant 0,9 rem comme les onglets du ruban ;
   petits textes 0,78 rem comme les libellés des boutons du ruban ; en-têtes de colonnes sans majuscules forcées.
   Les documents imprimés (bordereaux, BL, tickets…) gardent leur propre mise en page.
   ===================================================================== */
:root {
    --police: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --taille: .9rem;
    --taille-petite: .78rem;
}
body:not(.document):not(.document-ticket), body:not(.document) button, body:not(.document) input,
body:not(.document) select, body:not(.document) textarea { font-family: var(--police); }
body:not(.document):not(.document-ticket):not(.login-page) { font-size: var(--taille); }
.main-content, .sidebar, .navbar, .modale, .hl-bandeau { font-size: var(--taille); }
.main-content :is(p, li, dd, dt, label, .form-label, .alert, .liste-def, .tb-liste, .tb-vide, .btn, .form-control, select, input, textarea) { font-size: var(--taille); }
.main-content :is(table, .table, .tb-table, .carte table, .table-cliquable) { font-size: var(--taille); }
.main-content :is(.table, .tb-table, .carte table, .table-cliquable) td { font-size: inherit; }
.main-content :is(.table, .tb-table, .carte table, .table-cliquable) td[data-label="Date"] { font-size: inherit; }
/* En-têtes de colonnes : comme les titres de groupe du ruban (pas de MAJUSCULES espacées) */
.main-content :is(.table, .tb-table, .carte table, .table-cliquable) th,
.main-content .detail-card .table thead th, .carte th, .tb-table th {
    font-size: var(--taille-petite); font-weight: 600; text-transform: none; letter-spacing: 0;
}
/* Petits textes : comme les libellés des boutons du ruban */
.main-content :is(small, .small, .tb-kpi-pied, .tb-kpi-lib, .stat-label, .discret, .badge, .txt-action, .form-text, .facultatif),
.main-content .btn-sm, .main-content td small, .main-content .tb-table td small, .main-content .text-muted.small {
    font-size: var(--taille-petite);
}
.main-content .stat-label, .main-content .tb-kpi-lib { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* Titres : même police, tailles mesurées */
.main-content :is(h1, h2, h3, h4, h5, h6, .page-title, .titre-carte, .tb-carte-tete h2) { font-family: var(--police); letter-spacing: 0; }
.main-content .titre-carte, .main-content .tb-carte-tete h2 { font-size: .95rem; font-weight: 700; }
.main-content .tb-carte-tete p { font-size: var(--taille-petite); }
.bandeau .page-title { font-size: 1.5rem; }
.bandeau .page-subtitle { font-size: var(--taille); }
.btn-lg { font-size: .95rem; }
/* Le texte des tableaux resserrés automatiquement garde ses tailles réduites */
.main-content table.serre-1 { font-size: .84rem; }
.main-content table.serre-2 { font-size: .78rem; }
.main-content :is(input, select, textarea, .form-control) { font-weight: 400; }

/* =====================================================================
   ÉTATS IMPRIMÉS — PRÉSENTATION WINDEV (modèle ETAT_Vente)
   Police Times, traits noirs, deux cadres « Facturé à » / « Informations », titre centré entre deux traits,
   tableau quadrillé prolongé jusqu'au bas de la page, « Net à Payer » sur bandeau noir, « Duplicata » en filigrane.
   ===================================================================== */
body.document .feuille {
    font-family: "Times New Roman", Times, "Liberation Serif", serif; color: #000; line-height: 1.3;
    border: 0; border-radius: 0; position: relative; overflow: hidden; padding: 1.6cm 1.4cm 1.2cm;
}
body.document .feuille.format-a5 { padding: .9cm .8cm .7cm; font-size: .86rem; }
.wd-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.wd-societe h1 { font-family: inherit; font-weight: 400; font-size: 2.1rem; color: #000; margin: 0 0 .5rem; letter-spacing: 0; }
.wd-societe p { margin: .15rem 0; font-size: .95rem; color: #000; }
.wd-societe p.discret { font-size: .85rem; color: #222; }
.wd-logo { max-height: 2.4cm; max-width: 4.5cm; object-fit: contain; }
.feuille.format-a5 .wd-societe h1 { font-size: 1.5rem; }
.feuille.format-a5 .wd-logo { max-height: 1.6cm; max-width: 3.2cm; }
.feuille.sans-entete .wd-entete { display: none; }
.wd-cadres { display: flex; justify-content: space-between; gap: 1.6cm; margin: .6rem 0 .5rem; }
.wd-cadres.seul { justify-content: flex-end; }
.wd-cadre { flex: 0 1 46%; border: 1px solid #000; padding: .35rem .45rem .5rem; }
.wd-cadre-titre { font-weight: 700; font-size: 1.1rem; margin-bottom: .55rem; }
.wd-cadre dl { display: grid; grid-template-columns: auto 1fr; gap: .55rem .6rem; margin: 0; }
.wd-cadre dt { font-weight: 700; white-space: nowrap; }
.wd-cadre dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.feuille.format-a5 .wd-cadres { gap: .8cm; }
.feuille.format-a5 .wd-cadre dl { gap: .3rem .5rem; }
.wd-titre {
    font-family: Arial, "Liberation Sans", Helvetica, sans-serif; font-weight: 400; font-size: 1.95rem; text-align: center; color: #000;
    border-top: 1px solid #000; border-bottom: 1px solid #000; padding: .3rem 0; margin: .9rem 0 1rem; letter-spacing: 0;
}
.feuille.format-a5 .wd-titre { font-size: 1.35rem; margin: .6rem 0 .7rem; }
.wd-annule { display: inline-block; font-size: .5em; vertical-align: middle; border: 2px solid #b00; color: #b00; padding: 0 .4em; margin-left: .4em; letter-spacing: .1em; }

/* Tableau quadrillé */
body.document .feuille table.doc-lignes { border-collapse: collapse; border: 1px solid #000; border-spacing: 0; width: 100%; font-size: .95rem; margin-top: 0; }
body.document .feuille table.doc-lignes thead th {
    background: none; color: #444; font-family: inherit; font-weight: 700; font-size: 1.05rem; text-transform: none; letter-spacing: 0;
    text-align: center; border: 1px solid #000; padding: .55rem .4rem; border-radius: 0;
}
body.document .feuille table.doc-lignes td { border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; padding: .55rem .4rem; background: none !important; }
body.document .feuille table.doc-lignes tr.wd-remplissage td { border-bottom: 1px solid #000; }
body.document .feuille table.doc-lignes td small { color: #333; }
body.document .feuille table.doc-lignes tfoot th, body.document .feuille table.doc-lignes tfoot td { background: none; border: 1px solid #000; color: #000; }
.feuille.format-a5 table.doc-lignes thead th { font-size: .92rem; padding: .4rem .3rem; }
.feuille.format-a5 table.doc-lignes td { padding: .35rem .3rem; }

/* Totaux, collés sous le tableau, à droite */
body.document .feuille .doc-totaux {
    border-collapse: collapse; border: 1px solid #000; border-top: 0; border-radius: 0; overflow: visible;
    width: 45%; min-width: 0; margin: 0 0 0 auto; font-size: 1.05rem; font-family: inherit;
}
body.document .feuille .doc-totaux th, body.document .feuille .doc-totaux td { border: 0; padding: .7rem .5rem .55rem; color: #000; background: none; font-weight: 400; font-size: 1.05rem; text-transform: none; letter-spacing: 0; }
body.document .feuille .doc-totaux td { text-align: right; }
body.document .feuille .doc-totaux tr.fort th, body.document .feuille .doc-totaux tr.fort td { background: #000; color: #fff; font-weight: 400; padding: .35rem .5rem; }
.feuille.format-a5 .doc-totaux th, .feuille.format-a5 .doc-totaux td { font-size: .92rem; padding: .4rem .4rem .3rem; }

/* Autres blocs dans le même esprit */
body.document .feuille :is(.doc-sous-titre) { color: #000; font-family: Arial, sans-serif; text-transform: none; letter-spacing: 0; font-size: 1rem; border-bottom: 1px solid #000; padding-bottom: .15rem; }
body.document .feuille .doc-lettres { background: none; border: 1px solid #000; border-radius: 0; }
body.document .feuille .doc-signatures div { border: 0; border-top: 1px solid #000; border-radius: 0; padding: .3rem .4rem 2.6rem; color: #000; text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 700; }
body.document .feuille .doc-pied { color: #000; border-top: 1px solid #000; font-size: .85rem; }
body.document .feuille .doc-client { background: none; border: 1px solid #000; border-radius: 0; }
body.document .feuille .doc-client .etiquette { color: #000; font-size: 1rem; letter-spacing: 0; }
body.document .feuille .hi-bloc, body.document .feuille .hi-resume div { border-radius: 0; border-color: #000; }

/* Filigrane « Duplicata » (réimpression) */
.wd-duplicata {
    position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-55deg); transform-origin: center;
    font: 700 9.5rem/1 Arial, "Liberation Sans", sans-serif; color: rgba(70, 70, 70, .62); white-space: nowrap; pointer-events: none; z-index: 3;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.feuille.format-a5 .wd-duplicata { font-size: 6.5rem; }

@media print {
    body.document .feuille { padding: 0; }
    body.document .feuille::before { display: none; }
}
/* Numéro de page en bas à droite (navigateurs récents) */
@page { @bottom-right { content: counter(page) "/" counter(pages); font: 10pt Arial, sans-serif; } }
/* Colonne N° des états, au style quadrillé */
body.document .feuille .doc-lignes thead tr::before { background: none; color: #444; border: 1px solid #000; border-radius: 0; font-family: inherit; font-size: 1.05rem; letter-spacing: 0; padding: .55rem .3rem; }
body.document .feuille .doc-lignes tbody tr::before { background: none !important; color: #000; font-weight: 400; border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; }
body.document .feuille .doc-lignes tbody tr.wd-remplissage::before { counter-increment: none; content: ''; }
body.document .feuille .doc-lignes tfoot tr::before { background: none; border: 1px solid #000; }
.feuille.format-a5 .doc-lignes thead tr::before { font-size: .92rem; }

/* Prolongement du tableau jusqu'au bas de la page (la feuille fait au moins une page ; le cadre prend la place libre) */
body.document .feuille { display: flex; flex-direction: column; box-sizing: border-box; min-height: 297mm; }
body.document .feuille.format-a5 { min-height: 210mm; }
body.document .feuille > * { flex: none; }
.wd-prolonge { flex: 1 1 auto !important; min-height: 0; border: 1px solid #000; border-top: 0; }
@media print {
    body.document .feuille { min-height: calc(297mm - 24mm - 3mm); }
    body.document .feuille.format-a5 { min-height: calc(210mm - 16mm - 3mm); }
}
@media print {
    body.document .feuille, body.document .feuille.format-a5 { padding: 0; box-shadow: none; }
}
.feuille.format-a5 .wd-entete { margin-bottom: .5rem; }
.feuille.format-a5 .wd-societe h1 { margin-bottom: .25rem; }
.feuille.format-a5 .wd-cadre { padding: .25rem .4rem .35rem; }
.feuille.format-a5 .wd-cadre-titre { font-size: .98rem; margin-bottom: .3rem; }
.feuille.format-a5 .doc-totaux th, .feuille.format-a5 .doc-totaux td { padding: .3rem .4rem .22rem; }
.feuille.format-a5 .doc-signatures { margin-top: 1rem; }
.feuille.format-a5 .doc-signatures div { padding-bottom: 1.8rem; }
.feuille.format-a5 .doc-pied { margin-top: .8rem; }

/* Plus de bandeau de couleur en haut des états (présentation WinDev, noir et blanc) */
body.document .feuille::before { display: none !important; content: none; }
/* Ligne des totaux : cadre vide à gauche + totaux alignés sur les colonnes du tableau */
.wd-totaux-ligne { display: flex; align-items: stretch; flex: none; }
.wd-totaux-vide { border-left: 1px solid #000; border-bottom: 1px solid #000; flex: none; }
.wd-totaux-ligne > .doc-totaux { flex: none; margin: 0 !important; }
body.document .feuille .wd-totaux-ligne .doc-totaux { table-layout: fixed; }
body.document .feuille .wd-totaux-ligne .doc-totaux th, body.document .feuille .wd-totaux-ligne .doc-totaux td { border-left: 0 !important; border-right: 0 !important; }
body.document .feuille .doc-lignes thead tr::before { width: var(--wnum, 2.2em); box-sizing: border-box; }

/* Bouton « Tout afficher » des listes filtrées par période */
.filtres-grille .btn-tout { align-self: end; min-height: 42px; white-space: nowrap; font-weight: 600; }
.tb-presets .tb-preset[value="tout"] { font-weight: 600; }

/* Police & affichage (apparence.php) */
a.ruban-nom { color: inherit; text-decoration: none; }
a.ruban-nom:hover strong { text-decoration: underline; }
.ap-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem 1.2rem; align-items: end; }
.ap-grille > label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.ap-grille output { font-weight: 400; color: var(--text-light); margin-left: .3rem; }
.ap-grille input[type=range] { width: 100%; accent-color: var(--somefa-nuit, #232a57); }
.ap-grille .ap-case { flex-direction: row; align-items: center; gap: .45rem; font-weight: 600; }
.ap-couleur { display: flex; align-items: center; gap: .8rem; }
.ap-couleur input[type=color] { width: 54px; height: 38px; padding: 2px; border: 1px solid var(--border-color); border-radius: 6px; background: #fff; }
.ap-couleur .ap-case { display: flex; align-items: center; gap: .35rem; font-weight: 400; }
.ap-apercu { margin-top: 1.2rem; padding: 1rem 1.2rem; border: 1px dashed var(--border-color); border-radius: 10px; background: #fafbfd; }
.ap-apercu > strong { display: block; font-size: var(--taille-petite); color: var(--text-light); margin-bottom: .4rem; }
.ap-apercu .table { margin: .4rem 0 0; max-width: 520px; }
.ap-apercu-doc { background: #fff; color: #000; max-width: 520px; font-family: "Times New Roman", Times, serif; }
.ap-apercu-doc .ap-doc-titre { font-size: 1.5em; text-align: center; border-top: 1px solid #000; border-bottom: 1px solid #000; margin-bottom: .6em; }
.ap-apercu-doc table { width: 100%; border-collapse: collapse; }
.ap-apercu-doc th, .ap-apercu-doc td { border: 1px solid #000; padding: .3em .5em; font-weight: inherit; }
.ap-apercu-doc th { color: #444; font-weight: 700; }
.ap-apercu-doc td:last-child, .ap-apercu-doc th:last-child { text-align: right; }
.ap-apercu-doc tr.fort td { background: #000; color: #fff; }
.ap-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.ap-grille > label[hidden] { display: none; }