/* ═══════════════════════════════════════════════════════════════════════
   CHARTE DES PAGES-LISTES (11/11/2026)
   ---------------------------------------------------------------------
   Une seule langue pour tout le CRM : celle des fenêtres « mm »
   (#modal-multiope, css/modal-machine.css). Décisions de l'utilisateur :
     - cartes chiffres : relief + verre, chiffres en Saira italique ;
     - titre de page en Manrope, pavé d'icône simple (comme Stocks) ;
     - halos du fond fixes (aucune animation).
   Maquette de référence : https://claude.ai/artifact/SruXAeze7ZRgxBKzYPSr5z

   1. .kpi-*  cartes chiffres — générées par kpi_cards_row() (inc/ui_components.php).
              Elles remplacent la version au gris fixe (#eef1f5) qui vivait à la
              fin de main.css : elles suivent maintenant Azur, España, Menthe et le sombre.
   2. .pl-*   page-liste : feuille à halos, en-tête, capsule d'actions
              (même construction que Stocks / Factures / Commandes).

   Chargée pour toutes les pages par inc/template_start.php, après
   theme.css et modal-machine.css : elle ne lit que des jetons --t3-* / --mm-*.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Jetons du relief (neumorphisme) ─────────────────────────────────── */
.kpi-stats-row {
    --nm-fond: var(--t3-solid-alt, #f1f4fa);
    --nm-lo: color-mix(in srgb, var(--t3-text, #131a2e) 20%, transparent);
    --nm-hi: rgba(255, 255, 255, 0.95);
    --nm-lisere: var(--t3-border, rgba(255, 255, 255, 0.85));
    --nm-reflet: rgba(255, 255, 255, 0.55);
}
body.v2-dark .kpi-stats-row {
    --nm-fond: var(--t3-solid-alt, #16203a);
    --nm-lo: rgba(0, 0, 0, 0.5);
    --nm-hi: rgba(255, 255, 255, 0.05);
    --nm-lisere: var(--t3-border, rgba(255, 255, 255, 0.14));
    --nm-reflet: rgba(255, 255, 255, 0.06);
}

/* ── 1. Cartes chiffres : relief + verre ─────────────────────────────── */
.kpi-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 4px 4px 10px;   /* place pour l'ombre du relief */
    margin-bottom: 12px;
}
.kpi-stat-card {
    --card-accent: var(--t3-accent, #2563eb);
    position: relative;
    overflow: hidden;
    flex: 1 1 0;
    min-width: 170px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1px 12px;
    padding: 11px 14px;
    text-align: left;
    container-type: inline-size;   /* le chiffre se règle sur la largeur de SA carte (cqi) */
    border-radius: 16px;
    border: 1px solid var(--nm-lisere);
    background: linear-gradient(160deg, var(--nm-reflet), transparent 60%), var(--nm-fond);
    box-shadow: 6px 6px 14px var(--nm-lo), -6px -6px 14px var(--nm-hi);
    transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .2s cubic-bezier(0.22, 1, 0.36, 1);
}
.kpi-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 8px 8px 18px var(--nm-lo), -8px -8px 18px var(--nm-hi);
}
/* Halo discret de la couleur de la carte (statique) */
.kpi-stat-card::before {
    content: "";
    position: absolute;
    left: -22px;
    bottom: -28px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--card-accent);
    opacity: .08;
    filter: blur(22px);
    pointer-events: none;
}
body.v2-dark .kpi-stat-card::before { opacity: .14; }

/* Icône dans un puits creusé */
.kpi-stat-card .stat-icon-wrap {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 12px;
    background: var(--nm-fond);
    box-shadow: inset 3px 3px 7px var(--nm-lo), inset -3px -3px 7px var(--nm-hi);
}
.kpi-stat-card .stat-icon-wrap i {
    font-size: 20px;
    color: var(--card-accent);
}

/* Le chiffre : Saira italique, à la couleur de son sens */
.kpi-stat-card .stat-num {
    margin: 0;
    font-family: "Saira", var(--t3-font, "Manrope"), system-ui, sans-serif;
    font-style: italic;
    font-stretch: 92%;
    font-weight: 800;
    font-size: clamp(17px, 13cqi, 25px);
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--card-accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Montants (« 1 284 512,40 € ») : le chiffre rétrécit avec la carte au lieu d'être coupé */
.kpi-stat-card.is-compact { min-width: 175px; }
.kpi-stat-card.is-compact .stat-num { font-size: clamp(14px, 9.6cqi, 22px); }
.kpi-stat-card .stat-unit { font-size: .55em; font-weight: 700; margin-left: 2px; }
.kpi-stat-card .stat-lbl {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--t3-text-3, #64748b);
}

/* La carte « à suivre » : cerclée de sa couleur + étiquette dans le coin */
.kpi-stat-card.is-une {
    padding-top: 19px;   /* place pour l'étiquette, qui ne chevauche jamais le chiffre */
    outline: 1.5px solid color-mix(in srgb, var(--card-accent) 45%, transparent);
    outline-offset: -1.5px;
}
.kpi-stat-card.is-une::after {
    content: attr(data-tag);
    position: absolute;
    top: 5px;
    right: 9px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--card-accent);
    background: color-mix(in srgb, var(--card-accent) 12%, transparent);
}

/* ── Petits écrans : le tableau doit garder la place ──────────────────
   Portable (≤ 1440 px de large ou ≤ 860 px de haut) : cartes plus basses,
   puits d'icône plus petit. Téléphone : une seule rangée qu'on fait défiler
   du doigt, au lieu de 5 cartes empilées. */
@media (max-width: 1440px), (max-height: 860px) {
    .kpi-stats-row { gap: 10px; padding-bottom: 8px; }
    .kpi-stat-card { padding: 8px 12px; gap: 0 10px; border-radius: 14px; }
    .kpi-stat-card.is-une { padding-top: 16px; }
    .kpi-stat-card .stat-icon-wrap { width: 32px; height: 32px; border-radius: 10px; }
    .kpi-stat-card .stat-icon-wrap i { font-size: 17px; }
    .kpi-stat-card .stat-lbl { font-size: 10px; }
    .kpi-stat-card.is-une::after { top: 3px; font-size: 9px; }
}
@media (max-width: 767px) {
    .kpi-stats-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 4px 4px 10px;
        margin-left: -4px;
        margin-right: -4px;
        scrollbar-width: thin;
    }
    .kpi-stat-card,
    .kpi-stat-card.is-compact { flex: 0 0 min(220px, 72%); min-width: 0; scroll-snap-align: start; }
}

/* Pendant un recalcul (Factures : refreshInvoiceKpi) */
.kpi-stats-row.is-calcul .stat-num { opacity: .45; transition: opacity .2s; }

@media (prefers-reduced-motion: reduce) {
    .kpi-stat-card { transition: none; }
    .kpi-stat-card:hover { transform: none; }
}


/* ── 2. Page-liste : feuille, en-tête, capsule d'actions ─────────────── */
/* Même construction que .stk-feuille / .inv-feuille / .ord-feuille ;
   la feuille porte aussi .mm-modal (variables et composants mm). */
.pl-feuille {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px 16px;
    color: var(--mm-texte);
    background:
        radial-gradient(55% 40% at 0% 0%, var(--mm-halo-1), transparent 72%),
        radial-gradient(45% 35% at 100% 18%, var(--mm-halo-2), transparent 72%),
        radial-gradient(60% 45% at 40% 100%, var(--mm-halo-3), transparent 72%),
        var(--mm-fond);
    border: 1px solid var(--mm-trait);
    border-radius: var(--mm-rayon);
    box-shadow: var(--mm-ombre);
}

.pl-tete { position: relative; z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.pl-tete .mm-tete-ico { width: 40px; height: 40px; }
.pl-titre { flex: 1 1 240px; min-width: 0; }
.pl-titre h1 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--mm-texte); }
.pl-sous { margin: 3px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--mm-texte-3); }
.pl-sous strong { color: var(--mm-texte-2); font-variant-numeric: tabular-nums; }
.pl-droite { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Capsule d'actions : boutons discrets + l'action principale pleine.
   Un bouton seul : .pl-bt-principal hors capsule. */
.pl-actions { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--mm-trait); background: var(--mm-verre-lo); }
.pl-bt {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 0; border-radius: 999px;
    background: transparent; color: var(--mm-texte-2);
    font-size: 12.5px; font-weight: 600; line-height: 1.3; text-decoration: none;
    transition: background .2s var(--mm-courbe), color .2s var(--mm-courbe), box-shadow .2s var(--mm-courbe);
}
.pl-bt .ti { font-size: 16px; color: var(--mm-accent); }
.pl-bt:hover, .pl-bt:focus-visible {
    background: var(--mm-fond); color: var(--mm-texte); outline: none; text-decoration: none;
    box-shadow: 0 1px 2px rgba(19, 26, 46, 0.08), 0 3px 10px rgba(19, 26, 46, 0.06);
}
.pl-bt-principal {
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 16px; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, var(--mm-brand), var(--mm-accent-lo));
    color: var(--mm-brand-on);
    font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px color-mix(in srgb, var(--mm-brand) 30%, transparent);
    transition: filter .2s var(--mm-courbe), box-shadow .2s var(--mm-courbe);
}
/* Sur un <a>, la couleur des liens du thème l'emportait (texte invisible) :
   « body.t3 a:not(.btn):not(.label):not(.badge) » (theme.css) — on la dépasse ici. */
body .mm-modal a.pl-bt-principal:not(.btn):not(.label):not(.badge),
body .mm-modal a.pl-bt-principal:not(.btn):not(.label):not(.badge):hover,
body .mm-modal a.pl-bt-principal:not(.btn):not(.label):not(.badge):focus { color: var(--mm-brand-on); text-decoration: none; }
body .mm-modal a.pl-bt:not(.btn):not(.label):not(.badge) { color: var(--mm-texte-2); text-decoration: none; }
body .mm-modal a.pl-bt:not(.btn):not(.label):not(.badge):hover,
body .mm-modal a.pl-bt:not(.btn):not(.label):not(.badge):focus { color: var(--mm-texte); }
.pl-actions .pl-bt-principal { height: 32px; padding: 0 15px; font-size: 12.5px; }
.pl-bt-principal .ti { font-size: 17px; }
.pl-bt-principal:hover, .pl-bt-principal:focus-visible {
    color: var(--mm-brand-on); outline: none; text-decoration: none; filter: brightness(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px color-mix(in srgb, var(--mm-brand) 36%, transparent);
}

/* Les cartes chiffres posées dans une feuille : pas de marge en plus */
.pl-feuille .kpi-stats-row { margin-bottom: 0; }

@media (max-height: 860px) {
    .pl-feuille { gap: 10px; padding-top: 10px; }
}
@media (max-width: 767px) {
    .pl-feuille { padding: 12px; }
    .pl-droite { flex: 1 1 100%; }
}