/* =====================================================================================
   M1 — RÉFLEXION SUR MARGE. Tout est borné à `.marge` : aucune règle ne peut fuir sur un
   autre écran. ⚠️ La leçon est fraîche (T-UI) : styler un conteneur PARTAGÉ — .btn-filtres,
   .crud-toolbar-actions — a cassé deux fois des écrans que la tranche ne touchait pas.
   Couleurs = tokens :root uniquement, zéro hex en dur.
   ===================================================================================== */

/* ---------- bandeau « document interne » ---------- */
.marge .marge-interne {
    display: flex; align-items: center; gap: 8px;
    background: var(--amber-soft); color: var(--amber);
    border: 1px solid var(--amber); border-radius: 10px;
    padding: 8px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 14px;
}

/* ---------- barre de filtres ---------- */
.marge .marge-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.marge .marge-filtre { display: flex; flex-direction: column; gap: 4px; }
.marge .marge-filtre > select,
.marge .marge-filtre > input { min-width: 150px; }
.marge .marge-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.marge .marge-seg button {
    border: 0; background: var(--surface); color: var(--slate);
    padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.marge .marge-seg button + button { border-left: 1px solid var(--line); }
.marge .marge-seg button.actif { background: var(--teal); color: #fff; }

/* ---------- la CASCADE : 3 tuiles enchaînées ---------- */
.marge .marge-cascade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.marge .marge-kpi {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 14px 16px; position: relative;
}
.marge .marge-kpi::before {
    content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 3px; border-radius: 3px; background: var(--teal);
}
.marge .marge-kpi-lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--slate); }
.marge .marge-kpi-val { font-family: Sora, sans-serif; font-size: 24px; font-weight: 700;
    color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 4px; }
.marge .marge-kpi-taux { font-size: 12.5px; color: var(--slate); font-variant-numeric: tabular-nums; }
/* ⚠️ ROUGE SI NÉGATIF — une marge négative doit se voir sans lire le signe. */
.marge .marge-kpi.negatif::before { background: var(--red); }
.marge .marge-kpi.negatif .marge-kpi-val,
.marge .marge-kpi.negatif .marge-kpi-taux { color: var(--red); }
.marge .marge-kpi.grise { opacity: .6; }
.marge .marge-kpi.grise::before { background: var(--slate); }

/* ---------- bandeau d'alerte « vendus à perte » ---------- */
.marge .marge-alerte { border-radius: 10px; padding: 9px 13px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.marge .marge-alerte.rouge { background: var(--red-soft); color: var(--red); }
.marge .marge-alerte.vert { background: var(--green-soft); color: var(--green); }

/* ---------- variation N-1 ---------- */
.marge .marge-var { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.marge .marge-var.pos { color: var(--green); }
.marge .marge-var.neg { color: var(--red); }
.marge .marge-var.nul { color: var(--slate); font-weight: 500; }

/* ---------- blocs de pied (charges / prélèvements / exclues) ---------- */
.marge .marge-blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.marge .marge-bloc { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.marge .marge-bloc h3 { font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--slate); margin: 0 0 8px; }
.marge .marge-poste { display: flex; justify-content: space-between; gap: 10px;
    font-size: 13px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.marge .marge-poste.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 7px; font-weight: 700; }
.marge .marge-bloc.grise { opacity: .72; }
.marge .marge-bloc-note { font-size: 11.5px; color: var(--slate); margin-top: 8px; line-height: 1.45; }

/* ---------- tableau ---------- */
.marge .marge-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.marge .marge-table th {
    position: sticky; top: 0;              /* ⚠️ 0 et NON 64px : le tableau vit dans un conteneur
                                              de défilement (overflow-x), donc sticky se cale sur
                                              LUI. Un 64px cacherait la 1re ligne EN PERMANENCE —
                                              c'est le défaut des 46 états, retour terrain n°1. */
    background: var(--thead-bg); z-index: 2;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--slate); text-align: left; padding: 9px 10px; white-space: nowrap;
    box-shadow: inset 0 -1px 0 var(--line);
}
.marge .marge-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.marge .marge-table tbody tr:hover { background: var(--thead-bg); }
.marge .marge-num { text-align: right; font-variant-numeric: tabular-nums; }
.marge .marge-neg { color: var(--red); font-weight: 600; }
.marge .marge-table tfoot td { font-weight: 700; border-top: 2px solid var(--line);
    background: var(--paper); font-variant-numeric: tabular-nums; }
.marge .marge-scroll { overflow-x: auto; }

/* point mort — 3 états (WinDev R6) */
.marge .pm { display: inline-block; border-radius: 6px; padding: 2px 8px; font-weight: 600; font-size: 12px; }
.marge .pm-na { background: var(--red-soft); color: var(--red); }
.marge .pm-non { background: var(--amber-soft); color: var(--amber); }
.marge .pm-ok { background: var(--green-soft); color: var(--green); }

/* =====================================================================================
   T-UI MARGE — « OÙ VA CHAQUE DIRHAM » : barre + légende + équation, et 2 KPI empilés.
   ⚠️ COULEURS = tokens du projet, jamais les hex de la maquette : coût → --slate (neutre,
   c'est de l'argent qui SORT mais qui n'est pas une anomalie), charges → --amber,
   pertes → --red, marge nette → --teal. Aucun token nouveau n'est introduit.
   ===================================================================================== */
.marge .marge-hero { display: grid; grid-template-columns: 1fr 300px; gap: 12px; margin: 14px 0; }
.marge .marge-carte { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.marge .marge-carte-hd {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px 0;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--slate);
}
.marge .marge-carte-bd { padding: 12px 16px 14px; }

/* la barre */
.marge .marge-bar { display: flex; gap: 3px; height: 14px; margin: 6px 0 14px; }
.marge .marge-bar-seg { border-radius: 4px; min-width: 2px; }
.marge .marge-bar-seg.s-cout { background: var(--slate); }
.marge .marge-bar-seg.s-charge { background: var(--amber); }
.marge .marge-bar-seg.s-perte { background: var(--red); }
.marge .marge-bar-seg.s-net { background: var(--teal); }
/* ⚠️ marge nette négative : la barre ne dessine QUE les coûts et l'écran le DIT. */
.marge .marge-bar-depasse { font-size: 12px; color: var(--red); font-weight: 600; margin-bottom: 10px; }

/* la légende, 4 colonnes */
.marge .marge-legend { display: grid; grid-template-columns: repeat(4, 1fr); }
.marge .marge-lg { padding: 0 14px; border-left: 1px solid var(--line); }
.marge .marge-lg:first-child { padding-left: 0; border-left: 0; }
.marge .marge-lg-k { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
.marge .marge-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.marge .marge-lg-v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.marge .marge-lg-v.zero { color: var(--slate); opacity: .55; }
.marge .marge-lg-p { font-size: 11.5px; color: var(--slate); font-variant-numeric: tabular-nums; }
.marge .marge-lg.is-net .marge-lg-v { color: var(--teal); }
/* ⚠️⚠️ DÉFAUT RÉEL TROUVÉ AU SMOKE : `.marge-lg.is-net .marge-lg-v` (0,3,0) l'emportait sur
   `.marge .marge-neg` (0,2,0) — une marge nette NÉGATIVE s'affichait donc EN TEAL, c'est-à-dire
   en couleur de succès, sur l'écran de décision. Un sélecteur plus spécifique (0,4,0) rétablit
   l'ordre, dans les deux sens et quelle que soit la position des règles dans le fichier. */
.marge .marge-lg .marge-lg-v.marge-neg { color: var(--red); }

/* l'équation */
.marge .marge-casc { display: flex; align-items: center; flex-wrap: wrap;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.marge .marge-st { padding: 0 13px; border-left: 2px solid var(--line); }
.marge .marge-st:first-child { padding-left: 0; border-left: 0; }
.marge .marge-st-k { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--slate); }
.marge .marge-st-v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.marge .marge-st.moins .marge-st-v { color: var(--slate); }
.marge .marge-st.res { border-left-color: var(--teal); }
.marge .marge-st.res .marge-st-v { color: var(--teal); }
.marge .marge-st.res.neg { border-left-color: var(--red); }
.marge .marge-st.res.neg .marge-st-v { color: var(--red); }
.marge .marge-op { font-size: 15px; font-weight: 700; color: var(--line); padding: 0 2px; }

/* les 2 KPI empilés + le bandeau d'état */
.marge .marge-kpis { display: flex; flex-direction: column; }
.marge .marge-k { padding: 13px 16px; }
.marge .marge-k + .marge-k { border-top: 1px solid var(--line); }
.marge .marge-k-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--slate); }
.marge .marge-k-val { font-family: Sora, sans-serif; font-size: 27px; font-weight: 800;
    letter-spacing: -.4px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.marge .marge-k-val.pos { color: var(--teal); }
.marge .marge-k-val.neg { color: var(--red); }
.marge .marge-k-val.grise { color: var(--slate); opacity: .6; }
/* ⚠️ LES DEUX DÉNOMINATEURS SONT NOMMÉS : 40 % sur coût = 28,6 % sur CA. Sans les deux mots,
   le même produit affiche deux taux qui semblent se contredire. */
.marge .marge-k-d { font-size: 11.5px; color: var(--slate); margin-top: 3px; font-variant-numeric: tabular-nums; }
.marge .marge-k-d b { color: var(--ink); font-weight: 600; }
.marge .marge-etat { display: flex; align-items: center; gap: 7px; padding: 10px 16px;
    font-size: 12px; font-weight: 600; border-radius: 0 0 13px 13px; margin-top: auto; }
.marge .marge-etat.vert { background: var(--green-soft); color: var(--green); }
.marge .marge-etat.rouge { background: var(--red-soft); color: var(--red); }

/* ---------- comparaison N-1, compacte sur une ligne ---------- */
.marge .marge-compare { display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    padding: 9px 14px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 10px; margin-bottom: 12px; font-size: 12px; }
.marge .marge-compare-it { display: flex; align-items: baseline; gap: 7px; }
.marge .marge-compare-k { color: var(--slate); font-weight: 600; }

/* ---------- barre d'outils du tableau + ONGLETS DE COLONNES ---------- */
.marge .marge-tbl-tools { display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.marge .marge-tbl-titre { font-family: Sora, sans-serif; font-size: 14px; font-weight: 700; }
.marge .marge-tbl-count { font-size: 12px; color: var(--slate); }
.marge .marge-onglets { margin-left: auto; display: flex; border: 1px solid var(--line);
    border-radius: 8px; overflow: hidden; }
.marge .marge-onglets button { border: 0; background: var(--surface); padding: 7px 12px;
    font-size: 12px; font-weight: 600; color: var(--slate); cursor: pointer; }
.marge .marge-onglets button + button { border-left: 1px solid var(--line); }
.marge .marge-onglets button.actif { background: var(--ink); color: #fff; }

/* ⚠️⚠️ MASQUAGE DES COLONNES PAR CSS, JAMAIS PAR @if RAZOR. Les cellules RESTENT dans le DOM :
   (a) l'index de colonne ne bouge pas d'un onglet à l'autre, ce dont dépendent les assertions
       positionnelles de t79 (lA[18] = point mort) ;
   (b) `display:none` donne une largeur NULLE, donc la géométrie sait dire « réellement masquée »
       — c'est la leçon des 46 états : « présent dans le DOM » n'est pas « visible à l'écran ». */
.marge .marge-table .off { display: none; }

/* ---------- l'INSIGHT : un seul, au-dessus du tableau ---------- */
.marge .marge-insight { display: flex; align-items: center; gap: 8px; padding: 9px 14px;
    background: var(--amber-soft); color: var(--amber); font-size: 12.5px; font-weight: 600;
    border-bottom: 1px solid var(--line); }

/* ---------- mini-barres dans le tableau : contribution au CA, point mort ---------- */
.marge .marge-mini { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.marge .marge-mini-track { width: 52px; height: 6px; border-radius: 3px;
    background: var(--line); overflow: hidden; flex: none; }
.marge .marge-mini-fill { display: block; height: 100%; border-radius: 3px; background: var(--teal); }
.marge .marge-mini-lbl { font-variant-numeric: tabular-nums; font-size: 12px; }
/* point mort : vert tant qu'il reste de la marge, ambre dès que la couverture est tendue */
.marge .marge-pm-fill { background: var(--green); }
.marge .marge-pm.tendu .marge-pm-fill { background: var(--amber); }
.marge .marge-pm.tendu .marge-mini-lbl { color: var(--amber); font-weight: 700; }

/* ---------- MOBILE : lisible, sans promettre le desktop ---------- */
@media (max-width: 768px) {
    .marge .marge-cascade { grid-template-columns: 1fr; }
    .marge .marge-hero { grid-template-columns: 1fr; }
    .marge .marge-legend { grid-template-columns: repeat(2, 1fr); row-gap: 10px; }
    .marge .marge-lg { padding: 0 10px; }
    .marge .marge-lg:nth-child(odd) { padding-left: 0; border-left: 0; }
    /* l'équation se lit en colonne : à 390 px, 7 blocs côte à côte deviennent illisibles */
    .marge .marge-casc { flex-direction: column; align-items: stretch; gap: 2px; }
    .marge .marge-st { padding: 5px 0 5px 10px; border-left: 2px solid var(--line); }
    .marge .marge-st:first-child { padding-left: 10px; border-left: 2px solid var(--line); }
    .marge .marge-op { display: none; }   /* les opérateurs n'ont pas de sens en pile */
    .marge .marge-filtres { flex-direction: column; align-items: stretch; }
    .marge .marge-filtre > select,
    .marge .marge-filtre > input { width: 100%; min-width: 0; }
    .marge .marge-seg { width: 100%; }
    .marge .marge-seg button { flex: 1 1 auto; }
    .marge .marge-onglets { margin-left: 0; width: 100%; }
    .marge .marge-onglets button { flex: 1 1 auto; padding: 7px 4px; }
    .marge .marge-etat { border-radius: 0 0 13px 13px; }
    /* ⚠️ On ne convertit PAS le tableau en cartes : 19 colonnes de contrôle de gestion en cartes
       seraient illisibles. Il défile horizontalement, et l'écran le DIT. */
    .marge .marge-mobile-note { display: block; }
}
.marge .marge-mobile-note { display: none; font-size: 12px; color: var(--slate); margin-bottom: 8px; }