/* =====================================================================
   Certynex Design System — COMPOSANTS (Phase 8B)
   Composants « cx-* » + adaptateurs pour les classes historiques communes
   aux écrans (button.primaire, .badge, .msg, .modale…). Tout est exprimé
   en jetons (tokens.css). Aucune règle métier ici.
   ===================================================================== */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
body.cx{margin:0;background:var(--cx-bg);color:var(--cx-text);font-family:var(--cx-font-sans);font-size:var(--cx-fs-body);
  line-height:var(--cx-lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
body.cx :where(h1,h2,h3){font-family:var(--cx-font-display);color:var(--cx-text);letter-spacing:-.01em}
body.cx h1{font-size:var(--cx-fs-h1);line-height:var(--cx-lh-h1);font-weight:var(--cx-fw-h1)}
body.cx h2{font-size:var(--cx-fs-h2);line-height:var(--cx-lh-h2);font-weight:var(--cx-fw-h2)}
body.cx h3{font-size:var(--cx-fs-h3);line-height:var(--cx-lh-h3);font-weight:var(--cx-fw-h3)}
body.cx a{color:var(--cx-link)}
.cx-display{font-family:var(--cx-font-display);font-size:var(--cx-fs-display);line-height:var(--cx-lh-display);font-weight:var(--cx-fw-display);letter-spacing:-.02em}
.cx-sous-titre{font-style:italic;color:var(--cx-text-secondary)}
.cx-label{font-size:var(--cx-fs-label);font-weight:var(--cx-fw-label);color:var(--cx-text-secondary)}
.cx-caps{font-size:var(--cx-fs-caption);font-weight:650;letter-spacing:var(--cx-tracking-caps);text-transform:uppercase;color:var(--cx-text-tertiary)}
.cx-metric{font-family:var(--cx-font-display);font-size:var(--cx-fs-metric);font-weight:var(--cx-fw-metric);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.mono,.cx-mono{font-family:var(--cx-font-mono);font-size:.94em;letter-spacing:0}
.cache{display:none !important}
.sr,.cx-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Focus visible (jamais supprimé) ---------- */
body.cx :focus-visible{outline:var(--cx-focus-w) solid var(--cx-focus);outline-offset:2px;border-radius:var(--cx-radius-xs)}
body.cx input:focus-visible,body.cx select:focus-visible,body.cx textarea:focus-visible{outline-offset:0}

/* ---------- Boutons ---------- */
body.cx button,body.cx .bouton,.cx-btn{
  --_bg:var(--cx-surface);--_fg:var(--cx-text);--_bd:var(--cx-border-strong);--_bg-h:var(--cx-surface-hover);
  font:inherit;font-weight:600;font-size:var(--cx-fs-small);line-height:1.2;min-height:var(--cx-h-md);padding:0 var(--cx-space-4);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--cx-space-2);
  border:var(--cx-border-w) solid var(--_bd);border-radius:var(--cx-radius-md);background:var(--_bg);color:var(--_fg);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color var(--cx-dur-fast) var(--cx-ease),border-color var(--cx-dur-fast) var(--cx-ease),box-shadow var(--cx-dur-fast) var(--cx-ease),color var(--cx-dur-fast) var(--cx-ease)}
body.cx button:hover:not(:disabled),body.cx .bouton:hover,.cx-btn:hover{background:var(--_bg-h)}
body.cx button:active:not(:disabled){transform:translateY(.5px)}
body.cx button:disabled,.cx-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
/* PRIMARY */
body.cx button.primaire,body.cx .bouton.primaire,.cx-btn--primary{--_bg:var(--cx-primary);--_fg:var(--cx-on-primary);--_bd:var(--cx-primary);--_bg-h:var(--cx-primary-hover);box-shadow:var(--cx-shadow-xs)}
/* SECONDARY */
body.cx button.sec,.cx-btn--secondary{--_bg:var(--cx-surface);--_fg:var(--cx-primary);--_bd:var(--cx-border-strong);--_bg-h:var(--cx-surface-selected)}
/* TERTIARY / lien */
body.cx button.lien,.cx-btn--tertiary{--_bg:transparent;--_fg:var(--cx-link);--_bd:transparent;--_bg-h:var(--cx-surface-selected);text-decoration:underline;text-underline-offset:3px}
/* DANGER (toujours distinct : texte rouge + bordure, jamais plein par défaut) */
body.cx button.danger,.cx-btn--danger{--_bg:var(--cx-surface);--_fg:var(--cx-danger-text);--_bd:var(--cx-danger-border);--_bg-h:var(--cx-danger-bg)}
.cx-btn--danger-plein{--_bg:var(--cx-danger);--_fg:var(--cx-text-inverse);--_bd:var(--cx-danger);--_bg-h:var(--cx-red-700)}
/* GHOST */
.cx-btn--ghost{--_bg:transparent;--_fg:var(--cx-text-secondary);--_bd:transparent;--_bg-h:var(--cx-surface-hover)}
/* ICON */
.cx-btn--icon{padding:0;width:var(--cx-h-md);min-width:var(--cx-h-md)}
.cx-btn svg,body.cx button svg{width:18px;height:18px;flex:none}
/* Tailles */
.cx-btn--sm,body.cx button.mini{min-height:var(--cx-h-sm);padding:0 var(--cx-space-3);font-size:var(--cx-fs-caption)}
.cx-btn--lg{min-height:var(--cx-h-lg);padding:0 var(--cx-space-6);font-size:15px}
/* Bouton en chargement */
.cx-btn.is-loading,body.cx button.is-loading{position:relative;color:transparent !important;pointer-events:none}
.cx-btn.is-loading::after,body.cx button.is-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid currentColor;border-color:var(--_fg) transparent var(--_fg) transparent;animation:cx-rotation .8s linear infinite}

/* ---------- Formulaires ---------- */
body.cx label{display:block;font-size:var(--cx-fs-label);font-weight:var(--cx-fw-label);color:var(--cx-text-secondary);margin:0 0 var(--cx-space-1)}
body.cx :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){
  width:100%;min-height:var(--cx-h-md);padding:var(--cx-space-2) var(--cx-space-3);font:inherit;font-size:var(--cx-fs-body);color:var(--cx-text);
  background:var(--cx-surface);border:var(--cx-border-w) solid var(--cx-border-strong);border-radius:var(--cx-radius-md);
  transition:border-color var(--cx-dur-fast) var(--cx-ease),box-shadow var(--cx-dur-fast) var(--cx-ease)}
body.cx :where(input,select,textarea):hover:not(:disabled):not([readonly]){border-color:var(--cx-ink-400)}
body.cx :where(input,select,textarea):focus{border-color:var(--cx-focus);box-shadow:var(--cx-shadow-focus);outline:none}
body.cx :where(input,select,textarea):focus-visible{outline:var(--cx-focus-w) solid var(--cx-focus);outline-offset:0}
/* champs date / heure : le focus porte sur un sous-champ interne → anneau via :focus-within */
body.cx :where(input[type=date],input[type=time],input[type=datetime-local],input[type=month]):focus-within{border-color:var(--cx-focus);box-shadow:var(--cx-shadow-focus);outline:var(--cx-focus-w) solid var(--cx-focus);outline-offset:0}
body.cx :where(input,select,textarea):disabled{background:var(--cx-surface-sunken);color:var(--cx-text-disabled);cursor:not-allowed}
body.cx :where(input,textarea)[readonly]{background:var(--cx-surface-sunken);color:var(--cx-text-secondary)}
body.cx :where(input,select,textarea)[aria-invalid="true"]{border-color:var(--cx-danger);box-shadow:0 0 0 3px var(--cx-danger-bg)}
body.cx :where(input,select,textarea).is-valid{border-color:var(--cx-success)}
body.cx input::placeholder,body.cx textarea::placeholder{color:var(--cx-text-tertiary)}
body.cx input[type=checkbox],body.cx input[type=radio]{width:18px;height:18px;accent-color:var(--cx-primary);vertical-align:middle}
.cx-required::after,label.obligatoire::after{content:" *";color:var(--cx-danger)}
.cx-help{font-size:var(--cx-fs-caption);color:var(--cx-text-tertiary);margin-top:var(--cx-space-1)}
.cx-error{font-size:var(--cx-fs-caption);color:var(--cx-danger-text);margin-top:var(--cx-space-1);font-weight:600}
.cx-error::before{content:"! ";font-weight:800}
.cx-success-msg{font-size:var(--cx-fs-caption);color:var(--cx-success-text);margin-top:var(--cx-space-1)}
.cx-success-msg::before{content:"✓ "}

/* ---------- Statuts / badges : couleur + texte + pictogramme ---------- */
.cx-status,body.cx .badge,body.cx .v{
  --_bg:var(--cx-neutral-bg);--_fg:var(--cx-neutral-text);--_bd:var(--cx-neutral-border);--_ico:"•";
  display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 7px;min-height:22px;border-radius:var(--cx-radius-pill);
  font-size:var(--cx-fs-caption);font-weight:650;line-height:1.3;letter-spacing:.01em;white-space:nowrap;
  background:var(--_bg);color:var(--_fg);border:var(--cx-border-w) solid var(--_bd)}
.cx-status::before,body.cx .badge::before,body.cx .v::before{content:var(--_ico);font-weight:800;font-size:11px;line-height:1;width:12px;text-align:center}
/* succès */
.cx-status--success,body.cx .badge:is(.CLOTURE,.RESOLUE,.PRET_A_CLOTURER,.CONCORDANT,.OK,.b-synced,.b-ouverte,.b-dispo,.integre),
body.cx .v:is(.CONFORME,.valide){--_bg:var(--cx-success-bg);--_fg:var(--cx-success-text);--_bd:var(--cx-success-border);--_ico:"✓"}
/* information / en cours */
.cx-status--info,body.cx .badge:is(.ACCEPTEE,.EN_COURS,.b-syncing,.REOUVERT,.ouverte){--_bg:var(--cx-info-bg);--_fg:var(--cx-info-text);--_bd:var(--cx-info-border);--_ico:"↻"}
body.cx .badge.ACCEPTEE{--_ico:"✓"}
body.cx .badge.REOUVERT{--_ico:"↺"}
/* alerte / à traiter */
.cx-status--warning,body.cx .badge:is(.AVERTISSEMENT,.A_CONTROLER,.BROUILLON,.b-pending,.VENTILATION_PARTIELLE,.NON_VENTILE,.COMPTE_A_PARAMETRER),
body.cx .v:is(.MAL,.SERIE,.SORTIR,.attente){--_bg:var(--cx-warning-bg);--_fg:var(--cx-warning-text);--_bd:var(--cx-warning-border);--_ico:"!"}
body.cx .badge.b-pending{--_ico:"↑"}
/* erreur / bloquant / conflit */
.cx-status--danger,body.cx .badge:is(.ERREUR,.OUVERTE,.bloquant,.ECART,.b-error,.b-conflict,.b-cloturee),
body.cx .v:is(.NON,.SORTI,.rejete){--_bg:var(--cx-danger-bg);--_fg:var(--cx-danger-text);--_bd:var(--cx-danger-border);--_ico:"×"}
body.cx .badge:is(.b-conflict,.bloquant,.ERREUR){--_ico:"!"}
/* neutre */
.cx-status--neutral,body.cx .badge:is(.b-brouillon,.b-absent,.SANS_BIEN,.SORTIE,.INFO,.remplacee),body.cx .v.HORS{--_ico:"–"}

/* ---------- Cartes ---------- */
.cx-card{background:var(--cx-surface);border:var(--cx-border-w) solid var(--cx-border-subtle);border-radius:var(--cx-radius-lg);box-shadow:var(--cx-shadow-sm);padding:var(--cx-space-5)}
.cx-card--flat{box-shadow:none}
.cx-card__titre{display:flex;align-items:center;justify-content:space-between;gap:var(--cx-space-3);margin:0 0 var(--cx-space-4)}

/* ---------- KPI ---------- */
.cx-kpi{position:relative;background:var(--cx-surface);border:var(--cx-border-w) solid var(--cx-border-subtle);border-radius:var(--cx-radius-lg);
  box-shadow:var(--cx-shadow-sm);padding:var(--cx-space-5);display:flex;flex-direction:column;gap:var(--cx-space-1);min-width:0}
.cx-kpi .cx-kpi__label{font-size:var(--cx-fs-small);font-weight:600;color:var(--cx-text-secondary)}
.cx-kpi .cx-kpi__valeur{font-family:var(--cx-font-display);font-size:var(--cx-fs-metric);font-weight:var(--cx-fw-metric);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;line-height:1.1;color:var(--cx-text);overflow-wrap:anywhere}
.cx-kpi .cx-kpi__unite{font-size:var(--cx-fs-small);font-weight:600;color:var(--cx-text-tertiary);margin-left:4px}
.cx-kpi .cx-kpi__note{font-size:var(--cx-fs-caption);color:var(--cx-text-tertiary)}
.cx-kpi--hero .cx-kpi__valeur{font-size:var(--cx-fs-metric-lg)}
.cx-kpi--hero{padding:var(--cx-space-6)}
.cx-kpi--alerte{border-color:var(--cx-warning-border);background:linear-gradient(0deg,var(--cx-surface),var(--cx-surface)) padding-box}
.cx-kpi--alerte .cx-kpi__valeur{color:var(--cx-warning-text)}
.cx-kpi--danger .cx-kpi__valeur{color:var(--cx-danger-text)}
.cx-kpi--ok .cx-kpi__valeur{color:var(--cx-success-text)}

/* ---------- Jauges / barres (données existantes uniquement) ---------- */
.cx-jauge{height:8px;border-radius:var(--cx-radius-pill);background:var(--cx-chart-track);overflow:hidden;display:flex}
.cx-jauge > i{display:block;height:100%;background:var(--cx-chart-1)}
.cx-jauge > i + i{background:var(--cx-chart-2)}
.cx-jauge--ok > i{background:var(--cx-success)}
.cx-legende{display:flex;flex-wrap:wrap;gap:var(--cx-space-2) var(--cx-space-4);font-size:var(--cx-fs-caption);color:var(--cx-text-secondary);margin-top:var(--cx-space-2)}
.cx-legende span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--cx-chart-1)}
.cx-legende span.c2::before{background:var(--cx-chart-2)}
.cx-legende span.c3::before{background:var(--cx-chart-3)}

/* ---------- Tableau premium ---------- */
.cx-table-wrap{background:var(--cx-surface);border:var(--cx-border-w) solid var(--cx-border-subtle);border-radius:var(--cx-radius-lg);box-shadow:var(--cx-shadow-sm);overflow:auto}
.cx-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--cx-fs-small)}
.cx-table th{position:sticky;top:0;z-index:1;background:var(--cx-surface-sunken);color:var(--cx-text-secondary);font-size:var(--cx-fs-caption);
  font-weight:650;letter-spacing:.02em;text-align:left;padding:10px 14px;border-bottom:var(--cx-border-w) solid var(--cx-border);white-space:nowrap}
.cx-table td{padding:10px 14px;height:var(--cx-h-row);border-bottom:var(--cx-border-w) solid var(--cx-border-subtle);vertical-align:middle;white-space:nowrap}
.cx-table tbody tr{transition:background-color var(--cx-dur-fast) var(--cx-ease)}
.cx-table tbody tr:hover td{background:var(--cx-surface-hover)}
.cx-table :is(td,th).n,.cx-table :is(td,th).num{text-align:right;font-variant-numeric:tabular-nums}
.cx-table tr.total td{font-weight:700;background:var(--cx-navy-50);border-top:var(--cx-border-w-strong) solid var(--cx-primary);border-bottom:0}
.cx-table tr.clic{cursor:pointer}
.cx-table .ecart{color:var(--cx-danger-text);font-weight:700}
.cx-table .ecart::before{content:"≠ ";font-weight:800}

/* ---------- Barre de filtres / commande ---------- */
.cx-filtres{background:var(--cx-surface-elevated);border:var(--cx-border-w) solid var(--cx-border-subtle);border-radius:var(--cx-radius-lg);
  box-shadow:var(--cx-shadow-sm);padding:var(--cx-space-4) var(--cx-space-5);display:grid;gap:var(--cx-space-3) var(--cx-space-4);
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));align-items:end}
.cx-filtres .cx-filtres__actions{display:flex;gap:var(--cx-space-2);align-items:end;justify-content:flex-end;grid-column:-2/-1}

/* ---------- États vides ---------- */
.cx-vide,body.cx .vide{text-align:center;padding:var(--cx-space-10) var(--cx-space-6);color:var(--cx-text-secondary);font-style:normal}
.cx-vide b,body.cx .vide b{display:block;color:var(--cx-text);font-family:var(--cx-font-display);font-size:var(--cx-fs-h3);margin-bottom:var(--cx-space-1)}
.cx-vide::before,body.cx .vide::before{content:"";display:block;width:40px;height:40px;margin:0 auto var(--cx-space-3);border-radius:var(--cx-radius-lg);
  background:var(--cx-surface-sunken);border:var(--cx-border-w) dashed var(--cx-border-strong)}

/* ---------- Squelettes de chargement ---------- */
.cx-skeleton{display:block;border-radius:var(--cx-radius-sm);min-height:14px;
  background:linear-gradient(90deg,var(--cx-ink-100) 25%,var(--cx-ink-50) 37%,var(--cx-ink-100) 63%);background-size:400% 100%;animation:cx-shimmer 1.4s ease infinite}
.cx-skeleton--kpi{height:112px;border-radius:var(--cx-radius-lg)}
.cx-skeleton--ligne{height:var(--cx-h-row);margin-bottom:6px}
.cx-chargement{display:grid;gap:var(--cx-space-3)}

/* ---------- Progression ---------- */
.cx-progress{height:6px;border-radius:var(--cx-radius-pill);background:var(--cx-chart-track);overflow:hidden}
.cx-progress > i{display:block;height:100%;background:var(--cx-accent);transition:width var(--cx-dur-b) var(--cx-ease)}

/* ---------- Retours : toast, bandeau ---------- */
.cx-toast,body.cx .msg,body.cx #message:not(.cache){
  --_bd:var(--cx-info);display:flex;gap:var(--cx-space-3);align-items:flex-start;background:var(--cx-ink-900);color:var(--cx-text-inverse);
  border-radius:var(--cx-radius-md);box-shadow:var(--cx-shadow-lg);padding:var(--cx-space-3) var(--cx-space-4);font-size:var(--cx-fs-small);
  border-left:4px solid var(--_bd)}
body.cx .msg::before,body.cx #message:not(.cache)::before{content:"i";font-weight:800;flex:none;width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;
  font-size:11px;background:var(--_bd);color:var(--cx-text-inverse)}
body.cx :is(.msg.ok,#message.ok){--_bd:var(--cx-success)} body.cx :is(.msg.ok,#message.ok)::before{content:"✓"}
body.cx :is(.msg.erreur,#message.erreur){--_bd:var(--cx-danger);background:var(--cx-red-700)} body.cx :is(.msg.erreur,#message.erreur)::before{content:"!";background:var(--cx-text-inverse);color:var(--cx-red-700)}
.cx-banner{display:flex;gap:var(--cx-space-3);align-items:center;flex-wrap:wrap;padding:var(--cx-space-3) var(--cx-space-4);
  background:var(--cx-warning-bg);color:var(--cx-warning-text);border-bottom:var(--cx-border-w) solid var(--cx-warning-border);font-size:var(--cx-fs-small)}

/* ---------- Modales ---------- */
.cx-modal,body.cx .modale{position:fixed;inset:0;z-index:var(--cx-z-modal);background:var(--cx-scrim);display:flex;align-items:center;justify-content:center;
  padding:max(var(--cx-space-4),env(safe-area-inset-top)) var(--cx-space-4) max(var(--cx-space-4),env(safe-area-inset-bottom));overflow-y:auto}
.cx-modal__boite,body.cx .modale > .carte,body.cx .modale > .boite{width:100%;max-width:560px;max-height:calc(100vh - 32px);overflow:auto;margin:auto;
  background:var(--cx-surface-elevated);border-radius:var(--cx-radius-xl);box-shadow:var(--cx-shadow-lg);padding:var(--cx-space-6);border:0}
body.cx .modale > .boite{max-width:820px}

/* ---------- Divers ---------- */
.cx-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:var(--cx-radius-pill);background:var(--cx-surface);
  border:var(--cx-border-w) solid var(--cx-border);font-size:var(--cx-fs-caption);color:var(--cx-text-secondary);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cx-chip b{color:var(--cx-text);font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cx-chip{flex:0 1 auto;min-width:0}
.cx-separateur{height:1px;background:var(--cx-border-subtle);margin:var(--cx-space-4) 0;border:0}
.cx-icone{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media print{
  body.cx{background:var(--cx-white)}
  .cx-kpi,.cx-card,.cx-table-wrap{box-shadow:none;border-color:var(--cx-ink-300)}
}