/* Style global - Boutique */
/* Thème: Rouge vif (#ff0000), Blanc (#ffffff), Gris clair */

:root {
    --primary-red: #d90429;
    --primary-red-dark: #b00320;
    --primary-soft: #fff1f3;
    --primary-soft-2: #ffe4ea;
    --bg-page: #f3f6fb;
    --bg-panel: #ffffff;
    --bg-muted: #eef2f7;
    --text-dark: #0f172a;
    --text-medium: #334155;
    --text-light: #64748b;
    --border: #e2e8f0;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;
    --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08);
    --shadow-strong: 0 20px 45px rgba(15, 23, 42, 0.12);
    --radius: 16px;
    --radius-sm: 10px;
    --transition: all 0.25s ease;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    /* IBM Plex Sans est embarquee (assets/css/polices.css). Les valeurs
       qui suivent ne servent que le temps du chargement, ou hors ligne. */
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: linear-gradient(180deg, #f8fafc 0%, var(--bg-page) 100%);
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* ===== Layout global ===== */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.logo-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

/* Le logo porte sa propre lueur : la plaque rose arrondie qui lui
   servait de fond la coupait net sur ses quatre cotes. */
.logo-header img {
    width: auto;
    height: 46px;
    object-fit: contain;
}

.logo-header h1 {
    margin: 0;
}

.logo-header h1::before {
    content: "";
    display: none;
}

.header-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: var(--text-medium);
    font-weight: 600;
}

.sidebar {
    position: fixed;
    top: 74px;
    left: 0;
    width: 250px;
    height: calc(100vh - 74px);
    background: rgba(255, 255, 255, 0.96);
    border-right: 1px solid var(--border);
    box-shadow: 6px 0 18px rgba(15, 23, 42, 0.04);
    overflow-y: auto;
    z-index: 900;
}

.nav-menu {
    list-style: none;
    padding: 1rem 0.75rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.82rem 0.9rem;
    border-radius: 12px;
    color: var(--text-medium);
    font-weight: 600;
    transition: var(--transition);
    border-left: 3px solid transparent;
}

.nav-item i {
    width: 18px;
    text-align: center;
    font-size: 1rem;
}

.nav-item:hover,
.nav-item.active {
    background: linear-gradient(90deg, var(--primary-soft) 0%, #fff 100%);
    color: var(--primary-red);
    border-left-color: var(--primary-red);
    transform: translateX(2px);
}

.main-content {
    margin-left: 250px;
    padding: clamp(1rem, 2vw, 2rem);
    min-height: calc(100vh - 74px);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(1rem, 2vw, 2rem);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.main-content h2,
.main-content h3 {
    margin: 0 0 1rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
}

.main-content h2 {
    font-size: clamp(1.5rem, 2vw, 2.1rem);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.main-content h3 {
    font-size: 1.2rem;
}

/* ===== Boutons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.15rem;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
    color: var(--bg-panel);
    box-shadow: 0 10px 18px rgba(217, 4, 41, 0.18);
}

.btn-primary:hover {
    box-shadow: 0 14px 22px rgba(217, 4, 41, 0.25);
}

.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, #0f9d5a 100%);
    color: #fff;
}

.btn-warning {
    background: linear-gradient(135deg, #fbbf24, var(--warning));
    color: #1f2937;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, var(--danger));
    color: #fff;
}

.btn-outline {
    background: #fff;
    color: var(--primary-red);
    border: 1px solid rgba(217, 4, 41, 0.3);
}

.btn-outline:hover {
    background: var(--primary-soft);
}

.btn-sm {
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

/* ===== Cartes statistiques ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
    margin-top: 1.5rem;
}

.stat-card {
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    border-top: 4px solid var(--primary-red);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
}

.stat-value {
    font-size: clamp(1.8rem, 2vw, 2.4rem);
    font-weight: 800;
    color: var(--primary-red);
    line-height: 1.2;
}

.stat-label {
    margin-top: 0.6rem;
    color: var(--text-medium);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===== Formulaires ===== */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

label {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 600;
    color: var(--text-medium);
}

input,
select,
textarea {
    width: 100%;
    padding: 0.8rem 0.9rem;
    color: var(--text-dark);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: var(--transition);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(217, 4, 41, 0.7);
    box-shadow: 0 0 0 4px rgba(217, 4, 41, 0.08);
}

textarea {
    resize: vertical;
    min-height: 110px;
}

.form-groupe {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ===== Tableaux ===== */
.table-container {
    margin-top: 1.5rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-panel);
}

table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

th,
td {
    padding: 0.9rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

th {
    background: linear-gradient(180deg, #f8fafc 0%, var(--bg-muted) 100%);
    color: var(--text-medium);
    font-weight: 700;
    letter-spacing: 0.01em;
}

tbody tr:hover {
    background: rgba(248, 250, 252, 0.8);
}

.stock-low {
    color: var(--danger);
    font-weight: 700;
}

/* ===== Conditionnement carton =====
   Le stock reste compte en pieces ; ces libelles ne font que le relire
   en cartons (produits, stock, POS, panier). */
.stock-carton {
    display: block;
    font-size: 0.75rem;
    color: #777;
    font-weight: 400;
}

.restock-cell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ===== Etats de stock =====
   Excellent >= 75 % | Bon 50-74 % | Moyen 30-49 % | Faible 15-29 % | Critique < 15 %
   Le pourcentage compare le stock restant au stock du dernier reappro.
   Les seuils vivent dans includes/config.php : ne pas les dupliquer ici. */
.etat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
}

.etat-badge i { font-size: 0.72rem; }

/* Scopees au badge : la classe etat-* sert aussi de marqueur sur les lignes
   du panneau d'alertes, qui ne doivent surtout pas prendre ce fond plein. */
.etat-badge.etat-excellent { background: #1e8449; }
.etat-badge.etat-bon       { background: #58a618; }
.etat-badge.etat-moyen     { background: #d68910; }
.etat-badge.etat-faible    { background: #e67e22; }
.etat-badge.etat-critique  { background: #c0392b; }

.etat-jauge {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    margin-top: 0.35rem;
    overflow: hidden;
    max-width: 120px;
}

.etat-jauge span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

/* ===== Cloche de notification ===== */
.notif-wrap {
    position: relative;
    display: inline-block;
    margin-right: 0.75rem;
    vertical-align: middle;
}

.notif-bell {
    position: relative;
    background: none;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 1rem;
    color: #666;
    line-height: 1;
}

.notif-bell.has-alertes { color: #e67e22; border-color: #e67e22; }

.notif-bell.has-critique {
    color: #c0392b;
    border-color: #c0392b;
    animation: notif-pulse 1.6s ease-in-out infinite;
}

@keyframes notif-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.45); }
    50%      { box-shadow: 0 0 0 7px rgba(192, 57, 43, 0); }
}

/* Respecte le reglage systeme "reduire les animations". */
@media (prefers-reduced-motion: reduce) {
    .notif-bell.has-critique { animation: none; }
}

.notif-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e67e22;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

.notif-count.is-critique { background: #c0392b; }

.notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 330px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    z-index: 3000;
    text-align: left;
}

.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid #eee;
}

.notif-mute {
    background: none;
    border: none;
    cursor: pointer;
    color: #777;
    font-size: 0.95rem;
}

.notif-mute.is-muted { color: #c0392b; }

.notif-list { padding: 0.3rem 0; }

.notif-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "icone nom tag" "icone meta tag";
    gap: 0 0.6rem;
    padding: 0.6rem 0.9rem;
    text-decoration: none;
    color: inherit;
    border-left: 3px solid transparent;
}

.notif-item:hover { background: #fafafa; }
.notif-item.niveau-attention   { border-left-color: #e67e22; }
.notif-item.niveau-critique { border-left-color: #c0392b; }

.notif-item i { grid-area: icone; align-self: center; }
.notif-item.niveau-attention i   { color: #e67e22; }
.notif-item.niveau-critique i { color: #c0392b; }

.notif-titre {
    grid-area: nom;
    font-weight: 600;
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.notif-detail {
    grid-area: meta;
    font-size: 0.76rem;
    color: #777;
}

.notif-tag {
    grid-area: tag;
    align-self: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.notif-item.niveau-attention .notif-tag   { color: #e67e22; }
.notif-item.niveau-critique .notif-tag { color: #c0392b; }

.notif-empty {
    padding: 1.1rem 0.9rem;
    color: #999;
    font-size: 0.85rem;
    text-align: center;
    margin: 0;
}

/* Le pied porte plusieurs raccourcis : sans flex ils se collent. */
.notif-foot {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.9rem;
    border-top: 1px solid #eee;
    font-size: 0.8rem;
}

.notif-foot a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #777;
    text-decoration: none;
}

.notif-foot a:hover { color: var(--primary-red, #e01b24); }

@media screen and (max-width: 520px) {
    .notif-panel {
        position: fixed;
        top: 70px;
        left: 10px;
        right: 10px;
        width: auto;
    }
}

/* ===== Cart panier ===== */
.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.cart-total {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--primary-soft) 0%, #fff 100%);
    border: 1px solid rgba(217, 4, 41, 0.15);
    border-radius: 12px;
    color: var(--primary-red);
    font-size: 1.4rem;
    font-weight: 800;
    text-align: right;
}

#search-product {
    width: 100%;
    min-width: 0;
}

/* ===== Modals ===== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.56);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-strong);
    width: min(900px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
}

.product-modal {
    max-width: 700px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.modal-header h3 {
    margin: 0;
    color: var(--primary-red);
}

.modal-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--primary-red);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    border: none;
}

.modal-close:hover {
    background: var(--primary-red-dark);
}

.product-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.product-form-grid .full-width {
    grid-column: 1 / -1;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

/* ===== Alertes ===== */
.alert {
    padding: 0.9rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-weight: 600;
}

.alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* ===== Charts ===== */
.chart-container {
    position: relative;
    height: 320px;
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

/* ===== Watermark ===== */
.logo-watermark {
    opacity: 0.08;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    width: 220px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ===== Responsive =====
 *
 * Le menu etait etale en rangee horizontale sous 1100 px. Avec quinze
 * entrees reparties en groupes repliables, cette rangee devenait une
 * bouillie de pastilles sur deux ou trois lignes. Le menu passe en
 * tiroir : voir le bloc « BARRE LATERALE » de atelier.css, qui porte
 * desormais tout le comportement, du grand ecran au telephone. */
@media screen and (max-width: 1100px) {
    .main-content {
        padding: 1rem;
    }
}

@media screen and (max-width: 768px) {
    .header {
        padding: 0.8rem 1rem;
        align-items: flex-start;
        flex-direction: column;
    }

    .header-user {
        width: 100%;
        justify-content: space-between;
    }

    .logo-header {
        width: 100%;
    }

    .nav-menu {
        flex-direction: column;
    }

    .container {
        padding: 1rem;
    }

    .main-content h2 {
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .product-form-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        padding: 1rem;
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

    .modal-actions .btn {
        width: 100%;
    }

    .cart-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-container {
        height: 260px;
    }
}

@media screen and (max-width: 520px) {
    .main-content {
        padding: 0.8rem;
    }

    .header-user {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn {
        width: 100%;
    }

    .btn-outline,
    .btn-primary,
    .btn-success,
    .btn-danger,
    .btn-warning {
        width: auto;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .table-container {
        border-radius: 12px;
    }
}

/* ===== Layout helpers ===== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.search-box {
    max-width: 420px;
    width: 100%;
    margin-bottom: 1rem;
}

.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.filter-field {
    min-width: 220px;
    flex: 1;
}

.pos-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.pos-cart-box {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-soft);
}

.sale-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr) minmax(180px, auto);
    gap: 1rem;
    align-items: end;
    margin-top: 1rem;
}

.pos-search-field {
    width: 100%;
}

.qty-inline {
    display: flex;
    align-items: end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.qty-inline input {
    width: 90px;
}

@media screen and (max-width: 768px) {
    .page-header {
        align-items: flex-start;
    }

    .page-actions,
    .filter-bar,
    .sale-toolbar,
    .qty-inline {
        width: 100%;
    }

    .page-actions .btn,
    .filter-bar .btn,
    .sale-toolbar .btn,
    .qty-inline .btn {
        flex: 1 1 auto;
    }

    .pos-layout {
        grid-template-columns: 1fr;
    }

    .sale-toolbar {
        grid-template-columns: 1fr;
    }
}

/* ===== Bloc paiement ===== */
.payment-panel {
    background: linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-top: 1.5rem;
    box-shadow: var(--shadow-soft);
}

.payment-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    grid-column: span 3;
}

.header-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: var(--text-medium);
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .payment-actions {
        grid-column: auto;
        justify-content: stretch;
        width: 100%;
    }

    .payment-actions .btn {
        flex: 1 1 100%;
    }
}


/* ===== Barre d'exports ===== */
.export-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
 * IMPRESSION — règles générales
 *
 * `table { min-width: 780px }` existe pour qu'une grille reste lisible sur
 * un téléphone, quitte à défiler horizontalement. Sur une feuille rien ne
 * défile : les colonnes au-delà de la largeur utile étaient purement et
 * simplement coupées. On libère la contrainte et on rend visible ce que
 * les conteneurs à défilement masquaient.
 * ------------------------------------------------------------------- */
/* Format du papier. Il n'etait declare que dans document.css et
   rapports.css : les pages qui ne les chargent pas s'imprimaient au
   format par defaut du pilote, du Letter le plus souvent, avec des
   marges qui ne correspondaient a rien. */
@page {
    size: A4 portrait;
    margin: 12mm;
}

@media print {
    /* Ces remises à zéro n'existaient que dans document.css et
       rapports.css. Les pages qui ne chargent ni l'un ni l'autre
       (historique des ventes, produits, stock, clients, tableau de bord,
       paramètres) s'imprimaient donc avec la barre latérale, le bandeau,
       et un décalage de 250 px qui comprimait le tableau sur les deux
       tiers de la feuille. Leur place est ici, dans la feuille que
       toutes les pages chargent. */
    .no-print,
    .header,
    .sidebar,
    .notif-wrap { display: none !important; }

    html, body {
        background: #fff !important;
        margin: 0;
        padding: 0;
    }

    .main-content,
    .container {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    table { min-width: 0; }

    .table-wrap,
    .table-responsive,
    .table-scroll { overflow: visible !important; }

    /* Neuf colonnes à 1 rem de marge intérieure de chaque côté, cela fait
       près de 290 px de remplissage : à elles seules, les cellules
       poussaient le tableau hors de la feuille. Les documents (facture,
       proforma) ont leurs propres règles, plus spécifiques, et ne sont
       pas concernés. */
    th, td {
        padding: .3rem .4rem;
        font-size: 8.5pt;
    }
}


/* ---------------------------------------------------------------------
 * Chiffres alignés
 *
 * Par défaut le 1 est plus étroit que le 8 : dans une colonne de
 * montants, les unités ne tombent pas les unes sous les autres. Les
 * chiffres tabulaires ont tous la même largeur et remettent la colonne
 * d'aplomb. On les applique là où des nombres se lisent en pile.
 * ------------------------------------------------------------------- */
table,
.stat-value,
.kpi-valeur,
input[type="number"] {
    font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------
 * Tuile cliquable du tableau de bord
 *
 * Une tuile qui mène quelque part doit le montrer : sans cela on ne
 * devine pas qu'elle s'ouvre, et l'information reste au bout d'un
 * chemin que personne ne prend.
 * ------------------------------------------------------------------- */
.stat-card-lien {
    display: block;
    color: inherit;
    text-decoration: none;
}

.stat-card-lien:hover {
    border-color: var(--primary, #d90429);
    transform: translateY(-2px);
}

.stat-note {
    display: inline-block;
    margin-left: .35rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: #fef5e7;
    color: #b9770e;
    font-size: .68rem;
    font-weight: 700;
    vertical-align: middle;
}

/* =====================================================================
 * MOT-SYMBOLE — « Boutique »
 *
 * Le nom de l'application, pose en Righteous et traite comme la matiere
 * du logo : du rouge laque. Les trois teintes du degrade sont relevees
 * sur LOGO.jpg meme — la face eclairee d'une barre, son corps, sa face
 * dans l'ombre. Le nom et le logo sont donc coules dans le meme plastique.
 *
 * Un reflet traverse le mot toutes les sept secondes, puis s'immobilise.
 * Un scintillement continu fatiguerait sur un ecran qu'on regarde toute
 * la journee ; un eclat de temps en temps se remarque sans s'imposer.
 * ================================================================== */

:root {
    /* Relevees sur LOGO.jpg : face eclairee, corps, face dans l'ombre. */
    --laque-vif:   #fb4742;
    --laque:       #e10f10;
    --laque-ombre: #cf0605;
}

.mot-marque {
    font-family: 'Righteous', 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 0.015em;
    line-height: 1.1;
    white-space: nowrap;

    /* Sans la prise en charge du degrade sur le texte, le mot reste
       lisible en rouge plein. */
    color: var(--laque);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .mot-marque {
        color: transparent;
        -webkit-text-fill-color: transparent;

        background-image:
            /* 1. le reflet, qui se deplace
               Rose tres clair et non blanc : en blanc pur, les lettres
               disparaissaient dans le fond de la page au passage du
               reflet — le mot s'effacait au lieu de briller. */
            linear-gradient(104deg,
                rgba(255, 190, 186, 0) 43%,
                rgba(255, 201, 197, 0.95) 50%,
                rgba(255, 190, 186, 0) 57%),
            /* 2. la laque, immobile
               Du bord eclaire en haut au bord dans l'ombre en bas,
               comme le flanc d'une barre du logo. */
            linear-gradient(177deg,
                #ff9b96 0%,
                var(--laque-vif) 24%,
                var(--laque) 52%,
                #b60808 80%,
                #7c0202 100%);
        background-size: 280% 100%, 100% 100%;
        background-position: 175% 0, 0 0;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;

        /* Le relief du logo : une arete sombre dessous, puis sa lueur. */
        filter:
            drop-shadow(0 1px 0 rgba(120, 3, 3, 0.55))
            drop-shadow(0 5px 12px rgba(201, 12, 12, 0.22));

        animation: mot-marque-reflet 7s ease-in-out infinite;
    }
}

@keyframes mot-marque-reflet {
    0%        { background-position: 175% 0, 0 0; }
    26%, 100% { background-position: -75% 0, 0 0; }
}

/* Taille d'en-tete : le nom accompagne le logo sur chaque page. */
.mot-marque-entete {
    font-size: clamp(1.05rem, 2.1vw, 1.55rem);
}

/* Taille d'affiche : l'ecran de connexion. */
.mot-marque-affiche {
    font-size: clamp(1.6rem, 4.4vw, 2.5rem);
}

/* Un ecran qu'on regarde huit heures par jour ne doit pas bouger tout
   seul si la personne a demande le calme. */
@media (prefers-reduced-motion: reduce) {
    .mot-marque {
        animation: none;
        background-position: -75% 0, 0 0;
    }
}

/* A l'impression, le degrade sur texte sort blanc ou gris sale selon le
   pilote. Le nom redevient du rouge plein, qui sort juste. */
@media print {
    .mot-marque {
        color: var(--laque) !important;
        -webkit-text-fill-color: var(--laque) !important;
        background: none !important;
        filter: none !important;
        animation: none !important;
    }
}