/* ============================================================
   DA-GLOBALE-0311 — CHARTE ADV : SOURCE DE VÉRITÉ UNIQUE
   Chargée EN DERNIER par index.html (après DA-dashboard.css et le <style> de la page).
   1. Les jetons (:root) et les badges nommés valent PARTOUT.
   2. Les composants ne s'appliquent qu'aux écrans passés à la charte : render() pose
      body.charte quand la clé de l'écran est dans CHARTE_ECRANS (index.html), et la retire
      en sortie. La portée couvre l'écran (#app) ET ses pop-up (tiroir, confirmation).
      :where() garde une spécificité nulle : les réglages propres à un écran (.acc2, .rf2…)
      gardent la main.
   Habillage seul : aucune règle ne masque ni ne déplace une donnée.
   ============================================================ */

:root{
  --ch-brique:#a3190c; --ch-brique-d:#7d1309;
  --ch-orange:#f08900; --ch-orange-tx:#8a4b00;
  --ch-navy:#1b2740;   --ch-navy-2:#2a3a5c;
  --ch-gris:#5b6472;   --ch-fond:#f4f6f8; --ch-bord:#e7e9ee; --ch-bord-f:#cfd5de;
  --ch-vert:#1e7e46;
  --ch-focus:0 0 0 3px rgba(240,137,0,.32);
  --ch-r:12px; --ch-r-sm:8px;
}

/* ---------- Badges & pastilles (partout) ---------- */
.adv-tag.rfb{border:0;font-weight:700;font-size:11px;padding:3px 10px;}
.adv-tag.rfb.vert,  .adv-tag.dispo-stock, .adv-tag.diag-moins, .adv-tag.etat-traite{background:rgba(30,126,70,.14);color:var(--ch-vert);}
.adv-tag.rfb.orange,.adv-tag.dispo-de,    .adv-tag.diag-rech,  .adv-tag.etat-afaire{background:rgba(240,137,0,.20);color:var(--ch-orange-tx);}
.adv-tag.rfb.brique,.adv-tag.dispo-epuise,.adv-tag.diag-cher,  .adv-tag.etat-alerte{background:rgba(163,25,12,.12);color:var(--ch-brique);}
.adv-tag.rfb.gris,  .adv-tag.diag-dispo,  .adv-tag.etat-neutre{background:rgba(91,100,114,.14);color:var(--ch-gris);}
.adv-tag.rfb.navy{background:rgba(27,39,64,.12);color:var(--ch-navy);}
:is(.adv-tag.dispo-stock,.adv-tag.dispo-de,.adv-tag.dispo-epuise,.adv-tag.diag-moins,.adv-tag.diag-rech,.adv-tag.diag-cher,
    .adv-tag.diag-dispo,.adv-tag.etat-traite,.adv-tag.etat-afaire,.adv-tag.etat-alerte,.adv-tag.etat-neutre)
  {border:0;font-weight:700;font-size:11px;padding:3px 10px;white-space:nowrap;}
.ch-pastille{display:inline-block;min-width:18px;height:18px;line-height:18px;padding:0 6px;border-radius:999px;
  background:var(--ch-brique);color:#fff;font-size:11px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;}
.ch-pastille.orange{background:var(--ch-orange);color:var(--ch-navy);}
.ch-pastille.navy{background:var(--ch-navy);}

/* ================= COMPOSANTS — écrans passés à la charte ================= */
:where(body.charte #app, body.charte .adv-overlay){font-family:Inter,var(--font);color:var(--ch-navy);}

/* ---------- Cartes ---------- */
:where(body.charte #app, body.charte .adv-overlay) .adv-card{border-radius:var(--ch-r);border-color:var(--ch-bord);box-shadow:none;}
:where(body.charte #app, body.charte .adv-overlay) .adv-card > h3,
:where(body.charte #app, body.charte .adv-overlay) .adv-card > summary{color:var(--ch-navy);font-size:13px;border-bottom-color:var(--ch-bord);}
:where(body.charte #app, body.charte .adv-overlay) .adv-zone-t{color:var(--ch-navy);}

/* ---------- Tuiles & KPI ---------- */
:where(body.charte #app) .adv-kpi{background:#fff;border-color:var(--ch-bord);border-radius:var(--ch-r);}
:where(body.charte #app) .adv-kpi .l{color:var(--ch-gris);font-weight:600;}
:where(body.charte #app) .adv-kpi .v{color:var(--ch-navy);font-weight:800;}
:where(body.charte #app) .adv-kpi.c-cyan,:where(body.charte #app) .adv-kpi.c-navy{border-left-color:var(--ch-navy);}
:where(body.charte #app) .adv-kpi.c-amber{border-left-color:var(--ch-orange);}
:where(body.charte #app) .adv-kpi.c-red{border-left-color:var(--ch-brique);}
:where(body.charte #app) .adv-kpi.c-green{border-left-color:var(--ch-vert);}
:where(body.charte #app) .adv-tuile{border-color:var(--ch-bord);border-radius:var(--ch-r);box-shadow:none;}
:where(body.charte #app) .adv-tuile .l{color:var(--ch-gris);}
:where(body.charte #app) .adv-tuile:hover{border-color:var(--ch-bord-f);box-shadow:0 4px 14px rgba(27,39,64,.10);}
:where(body.charte #app) .adv-tuile:focus-visible{outline:none;box-shadow:var(--ch-focus);}
:where(body.charte #app) .adv-tuile.c-red{border-left-color:var(--ch-brique);}
:where(body.charte #app) .adv-tuile.c-red .v{color:var(--ch-brique);}
:where(body.charte #app) .adv-tuile.c-amber{border-left-color:var(--ch-orange);}
:where(body.charte #app) .adv-tuile.c-amber .v{color:var(--ch-orange-tx);}
:where(body.charte #app) .adv-tuile.c-cyan,:where(body.charte #app) .adv-tuile.c-navy{border-left-color:var(--ch-navy);}
:where(body.charte #app) .adv-tuile.c-cyan .v{color:var(--ch-navy);}
:where(body.charte #app) .adv-tuile.c-neutre{background:var(--ch-fond);border-left-color:var(--ch-bord);}

/* ---------- Tableaux : entête navy, lignes aérées, survol léger ---------- */
:where(body.charte #app, body.charte .adv-overlay) .adv-table{font-size:13px;border-collapse:separate;border-spacing:0;}
:where(body.charte #app, body.charte .adv-overlay) .adv-table thead th{background:var(--ch-navy);color:#fff;font-size:11px;font-weight:600;
  letter-spacing:.4px;padding:10px 12px;border-bottom:0;white-space:nowrap;}
:where(body.charte #app, body.charte .adv-overlay) .adv-table thead tr:first-child th:first-child{border-top-left-radius:var(--ch-r-sm);}
:where(body.charte #app, body.charte .adv-overlay) .adv-table thead tr:first-child th:last-child{border-top-right-radius:var(--ch-r-sm);}
:where(body.charte #app, body.charte .adv-overlay) .adv-table th.tri:hover,
:where(body.charte #app, body.charte .adv-overlay) .adv-table th.tri.actif{color:var(--ch-orange);}
:where(body.charte #app, body.charte .adv-overlay) .adv-table td{padding:10px 12px;border-bottom:1px solid var(--ch-bord);vertical-align:middle;}
:where(body.charte #app, body.charte .adv-overlay) .adv-table tbody tr:hover{background:transparent;}
:where(body.charte #app, body.charte .adv-overlay) .adv-table tbody tr:hover > td{background:var(--ch-fond);}
:where(body.charte #app, body.charte .adv-overlay) .adv-table tfoot td{font-weight:700;border-top:2px solid var(--ch-navy);border-bottom:0;}
:where(body.charte #app, body.charte .adv-overlay) .adv-sous-table th{background:var(--ch-fond);color:var(--ch-gris);}
/* les lignes d'état gardent leur fond (retard, risque) sous le survol */
:where(body.charte #app) .adv-table tbody tr.l-retard > td{background:rgba(163,25,12,.07);}
:where(body.charte #app) .adv-table tbody tr.l-risque > td{background:rgba(240,137,0,.09);}

/* ---------- Boutons : secondaire blanc, primaire brique, navy, marque orange ---------- */
:where(body.charte #app, body.charte .adv-overlay) .adv-btn{background:#fff;border-color:var(--ch-bord-f);color:var(--ch-navy);border-radius:var(--ch-r-sm);}
:where(body.charte #app, body.charte .adv-overlay) .adv-btn:hover{background:var(--ch-fond);}
:where(body.charte #app, body.charte .adv-overlay) .adv-btn:active{transform:translateY(1px);}
:where(body.charte #app, body.charte .adv-overlay) .adv-btn:focus-visible{outline:none;box-shadow:var(--ch-focus);}
:where(body.charte #app, body.charte .adv-overlay) .adv-btn.primary{background:var(--ch-brique);border-color:var(--ch-brique);color:#fff;}
:where(body.charte #app, body.charte .adv-overlay) .adv-btn.primary:hover{background:var(--ch-brique-d);border-color:var(--ch-brique-d);}
:where(body.charte #app, body.charte .adv-overlay) .adv-btn.navy{background:var(--ch-navy);border-color:var(--ch-navy);color:#fff;}
:where(body.charte #app, body.charte .adv-overlay) .adv-btn.navy:hover{background:var(--ch-navy-2);border-color:var(--ch-navy-2);}
:where(body.charte #app, body.charte .adv-overlay) .adv-btn.ghost{background:transparent;border-color:transparent;color:var(--ch-gris);}
:where(body.charte #app, body.charte .adv-overlay) .adv-btn.ghost:hover{color:var(--ch-navy);background:var(--ch-fond);}
:where(body.charte #app, body.charte .adv-overlay) .adv-btn:disabled,
:where(body.charte #app, body.charte .adv-overlay) .adv-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;}

/* ---------- Champs de saisie : focus orange ---------- */
:where(body.charte #app, body.charte .adv-overlay) :where(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea)
  {font-family:inherit;color:var(--ch-navy);border-color:var(--ch-bord-f);border-radius:var(--ch-r-sm);}
:where(body.charte #app, body.charte .adv-overlay) :is(input,select,textarea,.f-sel,.f-txt):focus{outline:none;border-color:var(--ch-orange);box-shadow:var(--ch-focus);}
:where(body.charte #app, body.charte .adv-overlay) :is(input,select,textarea):disabled{background:var(--ch-fond);color:var(--ch-gris);cursor:not-allowed;}
:where(body.charte #app, body.charte .adv-overlay) :is(input[type=checkbox],input[type=radio]){accent-color:var(--ch-navy);}

/* ---------- Chips de filtre, bascules, onglets ---------- */
:where(body.charte #app, body.charte .adv-overlay) .adv-chip{border-color:var(--ch-bord);color:var(--ch-navy);background:#fff;font-weight:600;transition:background .12s;}
:where(body.charte #app, body.charte .adv-overlay) .adv-chip:hover{background:var(--ch-fond);}
:where(body.charte #app, body.charte .adv-overlay) .adv-chip:focus-visible{outline:none;box-shadow:var(--ch-focus);}
:where(body.charte #app, body.charte .adv-overlay) .adv-chip.on{background:var(--ch-navy);border-color:var(--ch-navy);color:#fff;}
:where(body.charte #app, body.charte .adv-overlay) .adv-chip .nb{display:inline-block;min-width:20px;text-align:center;padding:0 6px;margin-left:6px;
  border-radius:999px;background:rgba(27,39,64,.10);font-size:11px;font-weight:800;opacity:1;}
:where(body.charte #app, body.charte .adv-overlay) .adv-chip.on .nb{background:var(--ch-orange);color:var(--ch-navy);}
:where(body.charte #app, body.charte .adv-overlay) .adv-bascule{border-color:var(--ch-bord-f);}
:where(body.charte #app, body.charte .adv-overlay) .adv-bascule .b{color:var(--ch-gris);border-right-color:var(--ch-bord-f);}
:where(body.charte #app, body.charte .adv-overlay) .adv-bascule .b:hover{background:var(--ch-fond);}
:where(body.charte #app, body.charte .adv-overlay) .adv-bascule .b.actif{background:var(--ch-navy);color:#fff;}
:where(body.charte #app, body.charte .adv-overlay) .adv-bascule .b.ko.actif{background:var(--ch-orange);color:var(--ch-navy);}
:where(body.charte #app, body.charte .adv-overlay) .adv-bascule .b:focus-visible{outline:none;box-shadow:inset var(--ch-focus);}
:where(body.charte #app, body.charte .adv-overlay) .adv-ongl{border-bottom-color:var(--ch-bord);}
:where(body.charte #app, body.charte .adv-overlay) .adv-ongl-b.on{color:var(--ch-navy);border-bottom-color:var(--ch-orange);}
:where(body.charte #app) .adv-filtre{border-color:var(--ch-bord);border-radius:var(--ch-r);}

/* ---------- Pop-up ---------- */
:where(body.charte) .adv-modal{border-radius:var(--ch-r);}
:where(body.charte) .adv-modal .head{background:linear-gradient(120deg,var(--ch-navy),var(--ch-navy-2));}
:where(body.charte) .adv-modal h4{color:var(--ch-gris);}
:where(body.charte) .adv-modal .actions{background:var(--ch-fond);border-top-color:var(--ch-bord);}

/* ================= RÉGLAGES PAR ÉCRAN (body[data-ecran], posé par render) ================= */
/* Bandeau de KPI « à la Accueil » : 1er navy plein, 2e orange plein, les suivants blancs à liseré haut.
   Tout écran à la charte qui s'ouvre sur un bandeau de chiffres (DA-ECRANS-1011 ; d'abord Marge et Ventes). */
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child{gap:14px;}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi{border:1px solid var(--ch-bord);border-top:4px solid var(--ch-bord);padding:14px 18px 15px;}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi .l{font-size:11.5px;letter-spacing:.4px;}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi .v{font-size:26px;line-height:1.15;}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi:nth-child(1){background:var(--ch-navy);border-color:var(--ch-navy);color:#fff;}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi:nth-child(1) :is(.l,.h){color:rgba(255,255,255,.78);}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi:nth-child(1) .v{color:#fff;}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi:nth-child(1) .adv-tag{background:rgba(255,255,255,.16);color:#fff;}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi:nth-child(2){background:var(--ch-orange);border-color:var(--ch-orange);}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi:nth-child(2) :is(.l,.h,.v){color:var(--ch-navy);}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi:nth-child(2) .adv-tag{background:rgba(27,39,64,.14);color:var(--ch-navy);}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi:nth-child(n+3).c-green{border-top-color:var(--ch-vert);}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi:nth-child(n+3).c-amber{border-top-color:var(--ch-orange);}
:where(body.charte:not([data-ecran="fournisseur:remboursement"])) #app > .adv-kpis:first-child > .adv-kpi:nth-child(n+3).c-navy{border-top-color:var(--ch-navy);}

/* ================= DA-ECRANS-1011 — écrans suivants (Prix, Stock, Recherches, Tarif, Glavista) ================= */
/* Anciens badges d'état : mêmes sens, couleurs de la charte — sur les écrans à la charte seulement. */
:where(body.charte #app, body.charte .adv-overlay) .adv-tag.ok{background:rgba(30,126,70,.14);color:var(--ch-vert);border-color:transparent;}
:where(body.charte #app, body.charte .adv-overlay) .adv-tag.warn{background:rgba(240,137,0,.20);color:var(--ch-orange-tx);border-color:transparent;}
:where(body.charte #app, body.charte .adv-overlay) .adv-tag.err{background:rgba(163,25,12,.12);color:var(--ch-brique);border-color:transparent;}
:where(body.charte #app, body.charte .adv-overlay) .adv-tag.info{background:rgba(27,39,64,.10);color:var(--ch-navy);border-color:transparent;}
:where(body.charte #app, body.charte .adv-overlay) .adv-tag.neutre{background:rgba(91,100,114,.12);color:var(--ch-gris);border-color:transparent;}
:where(body.charte #app, body.charte .adv-overlay) .adv-tag{font-weight:600;border-radius:999px;}
/* DA-ECRANS-1011 stock:mouvements — densité : date et lot sur une ligne (la colonne Motif a la place) */
:where(body.charte[data-ecran="stock:mouvements"]) #app .adv-table > tbody > tr > td:is(:nth-child(1),:nth-child(5)){white-space:nowrap;}
/* DA-ECRANS-1011 badges sur une ligne : un badge ne se coupe jamais (« En Allemagne » cassé en deux sur le fil) */
:where(body.charte #app, body.charte .adv-overlay) .adv-tag{white-space:nowrap;}
/* DA-ECRANS-1011 finance:tarifconc — densité : « mis à jour » date + heure sur une ligne (3 lignes -> 2) */
:where(body.charte[data-ecran="finance:tarifconc"]) #app .adv-table > tbody > tr > td:nth-child(4){white-space:nowrap;}
/* DA-ECRANS-1011 champs nus : un champ sans style propre (bordure en relief du navigateur) prend le trait de la charte.
   Spécificité nulle : tout style existant d'un champ garde la main. */
:where(body.charte #app, body.charte .adv-overlay) :where(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea){border-width:1px;border-style:solid;padding:6px 10px;background-color:#fff;}
/* DA-ECRANS-1011 fournisseur:rec-* — en-têtes de groupe de la réconciliation aux couleurs de la charte (variables redéfinies
   dans le THEAD seulement : Avoir brique — blanc sur orange illisible —, Pièces vendues navy 2 au lieu du violet, Stock vert charte) */
:where(body.charte:is([data-ecran="fournisseur:rec-parebrise"],[data-ecran="fournisseur:rec-accessoires"],[data-ecran="fournisseur:rec-autres"])) #app .adv-table > thead{--amber:var(--ch-brique);--violet:var(--ch-navy-2);--green:var(--ch-vert);}
/* densité : tableau très large (16 colonnes) — les en-têtes reviennent à la ligne comme avant la charte, marges resserrées */
:where(body.charte:is([data-ecran="fournisseur:rec-parebrise"],[data-ecran="fournisseur:rec-accessoires"],[data-ecran="fournisseur:rec-autres"])) #app .adv-table thead th{white-space:normal;padding:8px 8px;}
:where(body.charte:is([data-ecran="fournisseur:rec-parebrise"],[data-ecran="fournisseur:rec-accessoires"],[data-ecran="fournisseur:rec-autres"])) #app .adv-table td{padding:8px 8px;font-size:12.5px;}
/* DA-ECRANS-1011 fournisseur:registre — 8 cartes sur une rangée : les montants débordaient déjà (avant la charte) ; 20 px pour tenir */
:where(body.charte[data-ecran="fournisseur:registre"]) #app .adv-kpis > .adv-kpi .v{font-size:20px;}