/* OnlineManager — composants
   Version 1.0.0 — sortie le 2026-09-15
   Généré par build.js depuis index.html. Ne pas modifier à la main. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist:wght@400..700&family=Overpass+Mono:wght@400;600;700&display=swap');

:root {
  /* Primary — Violet (couleur de marque) */
  --a: #8A3AAF;
  --a-rgb: 138, 58, 175;
  --a1: #F8F1FB;
  --a2: #E0CAEA;
  --a-h: #783298;
  --a-p: #662B81;
  --a-dark: #9B4BC4;

  /* Focus des champs de saisie — Bleu */
  --s: #3B82F6;
  --s1: #EFF6FF;

  /* Destructive (état sémantique uniquement) */
  --d: #B42318;
  --d-h: #912018;
  --d1: #FEF3F2;
  --d2: #FCD9D6;

  /* Neutral Colors */
  --t1: #111827;
  --t2: #4B5563;
  --t3: #9CA3AF;
  --bd: #E5E7EB;
  --bg: #F3F4F6;
  --ps: #F7F8FA;

  /* Lignes de tableau */
  --row-even: #F9FAFB;
  --row-hover: #F1F3F5;
  --row-active: #E3E6EA;
  /* Menu gauche : etat actif, repris de l'application */
  --nav-act: #E2006E;

  /* Sidebar / Reporting colors */
  --sb-dark: #13041c;
  --sb-rep: #0A032D;

  /* Sizes & Radius */
  --sw: 220px;
  --ch: 36px;
  --r: 8px;
  --rl: 12px;

  /* System Transitions */
  --trans: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* REPLICATING EXISTING CLASSES FROM TABLEAUX.HTML */

/* Buttons */
/* ==========================================================
   BOUTONS — Système complet
   Base + 8 variantes + 4 tailles + états + groupes
   ========================================================== */

/* --- Base (= variante "neutral") --- */
.btn {
  /* Tokens locaux surchargés par les classes de taille */
  --btn-h: var(--ch);
  --btn-px: 16px;
  --btn-fs: 13.5px;
  --btn-gap: 8px;
  --btn-icon: 16px;
  --btn-radius: var(--r);
  --btn-ring: rgba(17, 24, 39, 0.14);

  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-radius);
  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  border: 1px solid var(--bd);
  background: #fff;
  color: var(--t2);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, transform 0.06s ease;
}

.btn svg {
  width: var(--btn-icon);
  height: var(--btn-icon);
  stroke-width: 1.8;
  flex-shrink: 0;
}

.btn:hover {
  background: var(--ps);
  border-color: #D6DAE1;
  color: var(--t1);
}

.btn:active {
  background: var(--bg);
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-ring);
}

/* ----------------------------------------------------------
   Deux axes independants, sur le modele de Shopify :
     VARIANTE = le poids visuel  (primary / secondary / tertiary)
     TON      = le sens          (auto / neutral / critical)
   Sans classe de variante, le bouton est le palier "auto".
   Tout le reste se compose : pas de troisieme axe, pas de liste a retenir.
   ---------------------------------------------------------- */

/* --- Variante : Primary — violet plein. Une seule par ecran. --- */
.btn.primary {
  --btn-ring: rgba(var(--a-rgb), 0.28);
  background: var(--a);
  border-color: var(--a);
  color: #fff;
}

.btn.primary:hover {
  background: var(--a-h);
  border-color: var(--a-h);
  color: #fff;
}

.btn.primary:active {
  background: var(--a-p);
  border-color: var(--a-p);
}

/* --- Variante : Secondary — le bleu, en contour. --- */
.btn.secondary {
  --btn-ring: rgba(var(--a-rgb), 0.26);
  background: #fff;
  border-color: var(--a2);
  color: var(--a);
}

.btn.secondary:hover {
  background: var(--a1);
  border-color: var(--a);
  color: var(--a-p);
}

.btn.secondary:active {
  background: var(--a2);
}

/* --- Variante : Tertiary — texte seul, aucun poids. --- */
.btn.tertiary {
  --btn-ring: rgba(var(--a-rgb), 0.24);
  --btn-px: 6px;
  background: transparent;
  border-color: transparent;
  color: var(--a);
}

.btn.tertiary:hover {
  background: var(--a1);
  border-color: transparent;
  color: var(--a-p);
}

.btn.tertiary:active {
  background: var(--a2);
}

/* --- Ton : Neutral — retire la couleur, garde le poids --- */
.btn.neutral {
  background: #fff;
  border-color: var(--bd);
  color: var(--t2);
}

.btn.neutral:hover {
  background: var(--ps);
  border-color: #D6DAE1;
  color: var(--t1);
}

.btn.primary.neutral {
  background: var(--t1);
  border-color: var(--t1);
  color: #fff;
}

.btn.primary.neutral:hover {
  background: #000;
  border-color: #000;
}

.btn.tertiary.neutral {
  background: transparent;
  border-color: transparent;
  color: var(--t2);
}

.btn.tertiary.neutral:hover {
  background: var(--bg);
  color: var(--t1);
}

/* --- Ton : Critical — destructif, sur n'importe quel poids --- */
.btn.critical {
  --btn-ring: rgba(180, 35, 24, 0.26);
  background: #fff;
  border-color: var(--d2);
  color: var(--d);
}

.btn.critical:hover {
  background: var(--d1);
  border-color: var(--d);
  color: var(--d-h);
}

.btn.primary.critical {
  background: var(--d);
  border-color: var(--d);
  color: #fff;
}

.btn.primary.critical:hover {
  background: var(--d-h);
  border-color: var(--d-h);
  color: #fff;
}

.btn.tertiary.critical {
  background: transparent;
  border-color: transparent;
  color: var(--d);
}

.btn.tertiary.critical:hover {
  background: var(--d1);
  border-color: transparent;
  color: var(--d-h);
}

/* --- Tailles --- */
.btn.xs {
  --btn-h: 26px;
  --btn-px: 10px;
  --btn-fs: 12px;
  --btn-gap: 5px;
  --btn-icon: 13px;
  --btn-radius: 6px;
}

.btn.sm {
  --btn-h: 30px;
  --btn-px: 12px;
  --btn-fs: 12.5px;
  --btn-gap: 6px;
  --btn-icon: 14px;
}

.btn.lg {
  --btn-h: 44px;
  --btn-px: 22px;
  --btn-fs: 15px;
  --btn-gap: 10px;
  --btn-icon: 18px;
  --btn-radius: var(--rl);
}

/* --- Modificateurs de forme --- */
.btn.icon-only {
  width: var(--btn-h);
  padding: 0;
}

.btn.block {
  display: flex;
  width: 100%;
}

.btn.pill {
  --btn-radius: 999px;
}

/* --- États --- */
/* .btn.btn double la spécificité (0,3,0) : sans cela .btn.primary.critical
   resterait rouge une fois désactivé. */
.btn.btn:disabled,
.btn.btn.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
  background: var(--bg);
  border-color: var(--bd);
  color: var(--t3);
  box-shadow: none;
  transform: none;
}

.btn.btn.tertiary:disabled,
.btn.btn.tertiary.is-disabled {
  background: transparent;
  border-color: transparent;
}

.btn.is-loading {
  pointer-events: none;
}

.btn.is-loading>* {
  opacity: 0;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  width: var(--btn-icon);
  height: var(--btn-icon);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.9;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Badge de comptage embarqué */
.btn .btn-count {
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.btn:not(.primary):not(.secondary) .btn-count {
  background: var(--ps);
  border: 1px solid var(--bd);
  color: var(--t2);
}

/* --- Sur surfaces sombres (sidebars) --- */
/* Le violet de marque se fond dans les sidebars violettes : on l'éclaircit. */
.btn.primary.on-dark {
  background: var(--a-dark);
  border-color: var(--a-dark);
}

.btn.primary.on-dark:hover {
  background: #A050C9;
  border-color: #A050C9;
}

.btn.primary.on-dark:active {
  background: #8E40B4;
  border-color: #8E40B4;
}

/* Remplace la variante blanche, illisible sur fond sombre. */
.btn.neutral-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #EDE7F0;
}

.btn.neutral-dark:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.btn.tertiary.on-dark {
  color: #B9A9C2;
}

.btn.tertiary.on-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* --- Groupe accolé --- */
.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  --btn-radius: 0;
  margin-left: -1px;
}

.btn-group .btn:first-child {
  border-radius: var(--r) 0 0 var(--r);
  margin-left: 0;
}

.btn-group .btn:last-child {
  border-radius: 0 var(--r) var(--r) 0;
}

.btn-group .btn:hover,
.btn-group .btn:focus-visible {
  z-index: 1;
}

/* --- Split button (action + menu) --- */
.btn-split {
  display: inline-flex;
}

.btn-split .btn:first-child {
  --btn-radius: var(--r) 0 0 var(--r);
}

.btn-split .btn:last-child {
  --btn-radius: 0 var(--r) var(--r) 0;
  width: var(--btn-h);
  padding: 0;
  margin-left: -1px;
}

.btn-split .btn:hover,
.btn-split .btn:focus-visible {
  z-index: 1;
}

/* --- Segmented control --- */
.btn-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--ps);
  border: 1px solid var(--bd);
  border-radius: var(--r);
}

.btn-seg button {
  height: 28px;
  padding: 0 14px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t2);
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--trans);
}

.btn-seg button svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

.btn-seg button:hover {
  color: var(--t1);
}

.btn-seg button.active {
  background: #fff;
  color: var(--a);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.09);
}

/* --- Barre d'actions (pied de modale / de page) --- */
.btn-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-bar .spacer {
  flex: 1;
}

/* ==========================================================
   LAYOUT DE PAGE — squelette d'un ecran de l'application
   body.app > .topbar + .layout > .sidebar + .main > .content
   ========================================================== */
.app {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--t1);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.app > .topbar {
  position: absolute;
}

.layout {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100vh;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
  padding-top: 56px;
}

.content {
  padding: 24px 32px;
  flex: 1;
}

/* En-tete de page */
.ph {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.ph-l {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ph-title {
  font-family: Geist, 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--t1);
}

.ph-ct {
  font-size: 13.5px;
  color: var(--t3);
}

.ph-ct strong {
  color: var(--t1);
  font-weight: 600;
}

.ph-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Grille de widgets */
.wgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.wgrid > .full {
  grid-column: 1 / -1;
}

/* ==========================================================
   TABLEAUX
   Valeurs de l'application, sauf les fonds de ligne :
   even / hover / active passent par des tokens neutres.
   ========================================================== */

.tcard {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  overflow: visible;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* overflow visible : les dropdowns de filtre et le panneau de colonnes
   debordent du tableau. Les arrondis sont portes par les cellules. */
.tw {
  border-radius: var(--rl);
}

.tcard thead tr:first-child th:first-child {
  border-top-left-radius: var(--rl);
}

.tcard thead tr:first-child th:last-child {
  border-top-right-radius: var(--rl);
}

.tcard .tfoot {
  border-radius: 0 0 var(--rl) var(--rl);
}

.tcard table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.tcard thead tr {
  background: var(--ps);
}

.tcard thead th {
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t2);
  text-align: left;
  white-space: nowrap;
  position: relative;
  user-select: none;
  letter-spacing: .01em;
}

/* Double en-tete : ligne 1 les libelles, ligne 2 les filtres */
.tcard .thr th {
  padding-bottom: 6px;
  border-bottom: none;
}

.tcard .thr-filter th {
  padding-top: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd);
}

.th-search {
  height: 30px;
  padding: 0 8px;
  font-size: 12.5px;
  width: 100%;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--t1);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}

.th-search:focus {
  border-color: var(--a);
  box-shadow: 0 0 0 2px var(--a1);
}

.tcard thead th.srt {
  cursor: pointer;
}

.tcard thead th.srt:hover {
  color: var(--t1);
}

/* Poignee de redimensionnement de colonne */
.rez {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 8px;
  cursor: col-resize;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rez::after {
  content: '';
  width: 2px;
  height: 40%;
  background: var(--bd);
  border-radius: 2px;
  transition: background .15s, height .15s;
}

.rez:hover::after,
.rez.rz::after {
  background: var(--a);
  height: 65%;
}

/* Colonne de groupement */
.gsth {
  width: 44px;
  text-align: center !important;
  padding: 0 !important;
}

.gbtn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--t3);
  background: transparent;
  border: none;
  margin: 0 auto;
  transition: all .12s;
}

.gbtn:hover,
.gbtn.on {
  background: var(--a1);
  color: var(--a);
}

.gbtn svg {
  width: 20px;
  height: 20px;
}

/* --- Lignes --- */
.tcard tbody tr {
  border-bottom: 1px solid var(--bg);
  transition: background .08s;
  cursor: pointer;
}

.tcard tbody tr:last-child {
  border-bottom: none;
}

.tcard tbody tr:nth-child(even) {
  background: var(--row-even);
}

.tcard tbody tr:hover {
  background: var(--row-hover) !important;
}

.tcard tbody tr:active {
  background: var(--row-active) !important;
}

.tcard td {
  padding: 11px 14px;
  font-size: 13px;
  color: var(--t1);
  vertical-align: middle;
}

.tcard td.catd {
  width: 44px;
  padding: 0;
  text-align: center;
  position: relative;
}

.tcard tbody tr:hover .rdots,
.tcard td.catd.oo .rdots {
  display: flex;
}

/* Mode compact */
.tcard.cmp .ava,
.tcard.cmp .nsub {
  display: none;
}

.tcard.cmp td {
  padding: 5px 14px;
}

/* --- Contenu de cellule --- */
.cn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ava {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--bd);
}

.nmain {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.nsub {
  font-size: 11.5px;
  color: var(--t3);
  margin-top: 2px;
}

.stb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
}

.stdon,
.stdoff {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stdon {
  background: #10B981;
}

.stdoff {
  background: var(--t3);
}

.ston {
  color: #059669;
}

.stoff {
  color: var(--t3);
}

.cv {
  color: var(--t2);
  font-size: 13px;
}

.npill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 7px;
  background: var(--a1);
  color: var(--a);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}

.dc {
  font-size: 12.5px;
  color: var(--t3);
  white-space: nowrap;
}

.mcel {
  font-family: 'Overpass Mono', monospace;
  font-size: 11.5px;
  color: var(--t3);
  background: var(--ps);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Infobulle de cellule */
.mwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mwrap:hover .mtip {
  display: block;
}

.mtip {
  display: none;
  position: absolute;
  bottom: calc(100% + 7px);
  left: 0;
  background: var(--t1);
  border-radius: 9px;
  padding: 9px 13px;
  min-width: 180px;
  z-index: 300;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  pointer-events: none;
  white-space: nowrap;
}

.mtip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 14px;
  border: 5px solid transparent;
  border-top-color: var(--t1);
}

.mtit {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 7px;
}

.mit {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  font-size: 12px;
  color: #fff;
}

.mdt {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--a);
  flex-shrink: 0;
}

/* --- Actions de ligne --- */
.rdots {
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: var(--t2);
  border: 1px solid var(--bd);
  background: #fff;
  margin: 0 auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.rdots:hover {
  background: var(--ps);
}

.rdots svg {
  width: 15px;
  height: 15px;
}

.rmenu {
  display: none;
  position: absolute;
  right: 8px;
  top: calc(100% - 4px);
  text-align: left;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
  min-width: 220px;
  z-index: 400;
  overflow: hidden;
  margin-top: 2px;
}

.rmenu.oo {
  display: block;
}

.rmi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--t1);
  cursor: pointer;
  transition: background .08s;
}

.rmi:hover {
  background: var(--ps);
}

.rmi svg {
  width: 17px;
  height: 17px;
  color: var(--t2);
  flex-shrink: 0;
}

.rmi.dn,
.rmi.dn svg {
  color: var(--d);
}

.rmdiv {
  height: 1px;
  background: var(--bg);
  margin: 3px 0;
}

/* --- Roue crantee + panneau de colonnes --- */
.cgear-th {
  width: 44px;
  text-align: center !important;
  position: relative;
}

.cgear {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  margin: 0 auto;
  transition: background .12s, color .12s;
}

.cgear:hover,
.cgear.on {
  background: var(--a1);
  color: var(--a);
}

.cgear svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.6;
}

.cpanel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 248px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .11);
  z-index: 500;
  overflow: hidden;
  text-align: left;
}

.cpanel.oo {
  display: block;
}

.cph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--bg);
}

.cpt {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cprst {
  font-size: 12px;
  color: var(--a);
  cursor: pointer;
  font-weight: 500;
  background: none;
  border: none;
  font-family: inherit;
}

.cprst:hover {
  text-decoration: underline;
}

.cplist {
  padding: 4px 0 8px;
}

.crow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  transition: background .08s;
  user-select: none;
}

.crow:hover {
  background: var(--ps);
}

.crow.dg {
  background: var(--a1);
  opacity: .7;
}

.cdg {
  display: flex;
  align-items: center;
  color: var(--bd);
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  padding: 4px 2px;
  margin: -4px -2px;
}

.crow.lk .cdg {
  cursor: default;
}

.crow {
  cursor: default;
}

.cdg svg {
  width: 13px;
  height: 13px;
}

.cck {
  width: 14px;
  height: 14px;
  accent-color: var(--a);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.clbl {
  font-size: 13px;
  flex: 1;
  font-weight: 400;
  color: var(--t1);
}

.crow.lk .cdg svg {
  opacity: .3;
}

.crow.lk .cck {
  opacity: .4;
  cursor: not-allowed;
}

/* --- Pied de tableau --- */
.tfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--bg);
  background: var(--ps);
  flex-wrap: wrap;
  gap: 8px;
}

.fi {
  font-size: 12.5px;
  color: var(--t3);
}

.pgn {
  display: flex;
  gap: 4px;
  align-items: center;
}

.pb {
  height: 28px;
  min-width: 28px;
  padding: 0 9px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: #fff;
  color: var(--t2);
  cursor: pointer;
  transition: background .1s;
}

.pb:hover {
  background: var(--ps);
}

.pb.on {
  background: var(--t1);
  color: #fff;
  border-color: var(--t1);
}

.pb:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.lpp-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
}

.lpp-lbl {
  font-size: 12.5px;
  color: var(--t3);
}

.lpp-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: #fff;
  color: var(--t2);
  cursor: pointer;
  transition: background .1s;
}

.lpp-btn:hover {
  background: var(--ps);
}

.lpp-btn svg {
  width: 10px;
  height: 10px;
}

/* --- Topbar --- */
.topbar {
  height: 56px;
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  flex-shrink: 0;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.tb-slot {
  width: var(--sw);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: #13041c;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s;
}

.tb-appn {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.tb-appn b {
  font-weight: inherit;
  color: var(--nav-act);
}

.tb-burger {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .12s;
}

.tb-burger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tb-burger svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.tb-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 10px;
  min-width: 0;
  border-bottom: 1px solid var(--bd);
}

.tb-store {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t1);
  flex-shrink: 0;
}

.tb-cw {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 32px;
}

.tb-cl {
  font-size: 12px;
  color: var(--t3);
  white-space: nowrap;
}

.tb-ics {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1px;
}

.tbi {
  width: var(--ch);
  height: var(--ch);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  border: none;
  background: transparent;
  color: var(--t2);
  cursor: pointer;
  transition: background .1s;
  position: relative;
}

.tbi:hover {
  background: var(--ps);
  color: var(--t1);
}

.tbi svg {
  width: 18px;
  height: 18px;
  display: block;
}

.tbi.red {
  color: #DC2626;
}

.tbi.red:hover {
  background: #FEF2F2;
}

.tbsep {
  width: 1px;
  height: 20px;
  background: var(--bd);
  margin: 0 4px;
  flex-shrink: 0;
}

.tb-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--a1);
  color: var(--a);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--a2);
  margin-left: 4px;
}

/* --- Menu applications --- */
.apps-wrap {
  position: relative;
}

.apps-drop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
  min-width: 230px;
  z-index: 500;
  padding: 8px;
}

.apps-drop.oo {
  display: block;
}

.apps-hd {
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 5px 8px 6px;
}

.app-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .1s;
}

.app-row:hover {
  background: var(--ps);
}

.app-ic {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-ic svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.app-nm {
  font-size: 13px;
  font-weight: 500;
  color: var(--t1);
}

.app-sub {
  font-size: 11.5px;
  color: var(--t3);
}

/* --- Menu gauche --- */
/* La vague de l'application se cale en bas de la colonne, a la largeur du
   menu. build.js l'embarque en base64 dans dist/components.css : le systeme
   reste a deux fichiers, la doc lit le .jpg pose a cote d'elle. */
.sidebar {
  width: var(--sw);
  background-color: #150625;
  background-image: url("data:image/jpeg;base64,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");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  padding-top: 56px;
}

.sb-s {
  margin: 10px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r);
  padding: 7px 10px;
}

.sb-s svg {
  width: 13px;
  height: 13px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.sb-s span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

.sb-s kbd {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: inherit;
}

.nav {
  padding: 4px 0;
  flex: 1;
}

/* L'entree peut etre un <a> quand la page existe : meme rendu, la
   navigation en plus. */
.ni {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  margin: 1px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  cursor: pointer;
  transition: background .1s, color .1s;
}

.ni:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ni.act {
  background: var(--nav-act);
  color: #fff;
  font-weight: 500;
}

.ni svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ni-group .chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  transition: transform 0.2s;
  opacity: 0.5;
}

.ni-group.open .chevron {
  transform: rotate(180deg);
}

.sub-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding-left: 42px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.ni-group.open .sub-nav {
  display: flex;
}

.ni-sub {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

.ni-sub:hover,
.ni-sub.act {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.nb {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0;
}

/* --- Bascule Gestion / Reporting --- */
.sb-toggle {
  margin: 0 12px 10px;
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 4px;
}

.sbt-btn {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.sbt-btn.on {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Blocks & Cards */
.fs-block {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fs-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fs-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #E0F8EF;
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* La taille du glyphe appartient au composant : une page n'a pas a la
   repeter dans un style="" sur chaque svg. */
.fs-icon svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

.fs-title {
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
}

.fs-card {
  background: #ffffff;
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 24px 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.pcard {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  padding: 20px 24px;
  position: relative
}

/* Badges */
.pbadge {
  height: 24px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pbadge.filled {
  background: var(--a);
  color: #fff;
}

.pbadge.outline {
  background: transparent;
  border: 1.5px solid var(--a);
  color: var(--a);
}

.pbadge.green {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.pbadge.gray {
  background: var(--bg);
  color: var(--t2);
  border: 1px solid var(--bd);
}

/* Forms */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: 12.5px;
  font-weight: 700;
  color: #64748B;
  text-align: left;
}

/* Marqueur de champ obligatoire : aucun style dans la page source —
   il est collé au label et en reprend la couleur. */

.form-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
  font-family: inherit;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #fff;
  color: #0F172A;
  outline: none;
  transition: all 0.15s;
}

.form-input::placeholder {
  color: var(--t3);
}

.form-input:focus {
  border-color: var(--s);
  box-shadow: 0 0 0 3px var(--s1);
}

/* Lecture seule : la valeur compte, la saisie non */
.form-input.ro {
  border-color: #E2E8F0;
  color: #0F172A;
  font-weight: 500;
  cursor: text;
}

/* Zone de texte */
textarea.form-input {
  height: auto;
  min-height: 88px;
  padding: 10px 12px;
  line-height: 1.55;
  resize: vertical;
}

/* Erreur : ajout du systeme, absent de la page source */

/* Desactive */
.form-input:disabled {
  background: var(--bg);
  border-color: var(--bd);
  color: var(--t3);
  cursor: not-allowed;
}

/* Erreur */
.form-input.has-error {
  border-color: var(--d);
}

.form-input.has-error:focus {
  border-color: var(--d);
  box-shadow: 0 0 0 3px var(--d1);
}

/* Textes sous le champ */
.form-hint {
  font-size: 12px;
  color: var(--t3);
  line-height: 1.5;
}

.form-error {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--d);
  font-weight: 500;
}

.form-error svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  flex-shrink: 0;
}

/* --- Grille de champs --- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

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

.form-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.form-grid+.form-grid {
  margin-top: 18px;
}

/* --- Layout d'une page de reglages : deux colonnes de sections --- */
.form-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: transparent;
}

.form-body>.col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.form-body>.full {
  grid-column: 1 / -1;
}

/* --- Import de fichier : ligne compacte --- */
.upload-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.upload-side {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.upload-ic {
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--bd);
  box-shadow: none;
  color: var(--t3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.upload-ic svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.3;
}

.upload-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t1);
}

.upload-sub {
  font-size: 12px;
  color: var(--t3);
  line-height: 1.5;
  margin-top: 2px;
}

/* --- Import de fichier : zone large --- */
.upload-zone {
  width: 220px;
  height: 120px;
  border-radius: var(--rl);
  background: var(--ps);
  border: 2px dashed var(--bd);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.upload-zone:hover {
  border-color: var(--a);
  background: var(--a1);
}

.upload-zone svg {
  width: 28px;
  height: 28px;
  color: var(--a);
  stroke-width: 1.8;
}

.upload-zone span {
  font-size: 13px;
  font-weight: 600;
  color: var(--a);
}

/* --- Plage de dates --- */
.drp {
  position: relative;
  display: inline-block;
}

.drp-btn {
  height: 32px;
  padding: 0 10px 0 12px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(0deg, #fbfbfb 0, #fff 100%);
  box-shadow: 0 1px 3px 0 #0000000a, inset 0 0 0 1px #efefef;
  color: #334155;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.drp-btn svg.cal {
  width: 15px;
  height: 15px;
  color: var(--a);
  stroke-width: 1.8;
}

.drp-btn svg.chev {
  width: 14px;
  height: 14px;
  color: #475569;
  transition: transform 0.2s ease;
}

.drp.open .drp-btn svg.chev {
  transform: rotate(180deg);
}

.drp .arr {
  color: var(--t3);
}

.drp-pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 640px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .12);
  z-index: 300;
}

.drp.open .drp-pop,
.drp-pop.pin {
  display: block;
}

.drp-pop.pin {
  position: relative;
  top: 0;
}

.drp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
}

.drp-head .form-input {
  height: 36px;
  width: 150px;
}

.drp-body {
  display: flex;
}

.drp-cal {
  flex: 1;
  padding: 8px 16px 16px;
}

.drp-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.drp-cal-head .ttl {
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
}

.drp-nav {
  width: 28px;
  height: 28px;
  border: 1px solid var(--bd);
  border-radius: 6px;
  background: #fff;
  color: var(--t2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.drp-nav:hover {
  background: var(--ps);
}

.drp-nav svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.drp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px 0;
}

.drp-dow {
  text-align: center;
  font-size: 11.5px;
  color: var(--t3);
  padding: 4px 0 6px;
}

.drp-day {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--t1);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

.drp-day:hover {
  background: var(--ps);
}

.drp-day.muted {
  color: var(--t3);
}

.drp-day.in {
  background: var(--a1);
  color: var(--a);
  border-radius: 0;
}

.drp-day.start,
.drp-day.end {
  /* Le disque est trace au centre de la cellule : la cellule est plus large
     que haute, un border-radius donnerait une ellipse. */
  background: radial-gradient(circle at center, var(--a) 0 18px, transparent 18px);
  color: #fff;
  font-weight: 600;
}

.drp-sug {
  width: 210px;
  border-left: 1px solid var(--bd);
  padding: 14px 16px 16px;
}

.drp-sug-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--a);
  margin-bottom: 8px;
}

.drp-sug-item {
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.drp-sug-item:hover {
  background: var(--ps);
}

.drp-sug-item b {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--t1);
}

.drp-sug-item span {
  font-size: 11.5px;
  color: var(--t3);
}

.drp-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--bd);
}

/* --- Case a cocher en ligne --- */
.form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t2);
  cursor: pointer;
}

.form-check-inline input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--a);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

/* ── WIDGET STATS (Reporting) ── */
.w {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.w-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bd);
}

.w-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.w-ico svg {
  width: 15px;
  height: 15px;
}

.w-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--t1);
  flex: 1;
}

.w-info {
  color: var(--t3);
  display: flex;
  align-items: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.w-info svg {
  width: 15px;
  height: 15px;
}

.w-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.w-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 28px;
  padding: 0 10px;
  background: #2563EB;
  color: #fff;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
}

.w-ctrl-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: #fff;
  color: var(--t2);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.w-ctrl-btn:hover {
  background: var(--ps);
}

.w-ctrl-btn svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* Ligne de filtres secondaire (sous le header) */
.w-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--bd);
}

.w-filter-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: #fff;
  color: var(--t2);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.w-filter-btn:hover {
  background: var(--ps);
}

.w-filter-btn svg {
  width: 11px;
  height: 11px;
}

.w-filter-sep {
  margin-left: auto;
}

.w-dots {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 1px solid var(--bd);
  background: #fff;
  cursor: pointer;
  color: var(--t2);
}

.w-dots svg {
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════
   ── DROPDOWNS STYLE (from statistiques.html) ──
═══════════════════════════════════════ */
.w-dd-wrap {
  position: relative;
  display: inline-block;
}

.w-dd-btn {
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(0deg, #fbfbfb 0, #fff 100%);
  box-shadow: 0 1px 3px 0 #0000000a, inset 0 0 0 1px #efefef !important;
  color: #334155;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
  white-space: nowrap;
}

.w-dd-btn:hover {
  background: #F8FAFC;
}

.w-dd-btn svg.chev {
  width: 14px;
  height: 14px;
  color: #475569;
  transition: transform 0.2s ease;
}

.w-dd-wrap.open .w-dd-btn svg.chev {
  transform: rotate(180deg);
}

.w-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-width: 160px;
  z-index: 200;
  padding: 6px 0;
  flex-direction: column;
}

.w-dd-wrap.open .w-dd-menu {
  display: flex;
}

.w-dd-item {
  padding: 8px 16px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s;
}

.w-dd-item:hover {
  background: #F8FAFC;
}

.w-dd-item.active {
  background: var(--a1);
  color: var(--a-p);
}

/* Le dropdown en champ de formulaire : pleine largeur, 38px comme les inputs */
.w-dd-wrap.block {
  display: block;
  width: 100%;
}

.w-dd-wrap.block .w-dd-btn {
  width: 100%;
  justify-content: space-between;
}

.w-dd-wrap.block .w-dd-menu {
  left: 0;
  right: 0;
}

.w-dd-btn.field {
  height: 38px;
  font-size: 13.5px;
}

/* En filtre de colonne : 30px, comme .th-search */
.w-dd-btn.sm {
  height: 30px;
  padding: 0 8px;
  font-size: 12.5px;
}

/* En topbar : la largeur du selecteur de compte */
.w-dd-btn.tb {
  height: var(--ch);
  min-width: 220px;
  justify-content: space-between;
}

/* Valeur non choisie : le libelle est un placeholder, pas une option.
   Classe propre au dropdown : .ph est deja l'en-tete de page. */
.w-dd-btn .dd-ph {
  color: var(--t3);
}

.w-dd-item input[type=checkbox] {
  width: 14px;
  height: 14px;
  accent-color: var(--a);
  flex-shrink: 0;
}

/* Corps vide — empty state */
.w-body {
  flex: 1;
  min-height: 260px;
  background: #F5F6F8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 24px;
}

.empty-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  opacity: 0.22;
}

.empty-bar {
  background: var(--t3);
  border-radius: 3px 3px 0 0;
  width: 10px;
}

.empty-msg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--t3);
}

.empty-msg svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── NEW FORM ELEMENTS (Refined) ── */
.form-card-check {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  background: #fff;
  position: relative;
}

.form-card-check:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.form-card-check input {
  display: none;
}

.form-card-check .check-circle {
  width: 22px;
  height: 22px;
  border: 1.5px solid #D1D5DB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  background: #fff;
}

.form-card-check.active {
  border-color: var(--a);
  background: var(--a1);
}

.form-card-check.active .check-circle {
  border-color: var(--a);
  border-width: 2px;
}

.form-card-check.active .check-circle::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--a);
  border-radius: 50%;
}

.form-card-check .check-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--t1);
}

/* Toggle Switch */
.form-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.form-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.form-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #D1D5DB;
  transition: .3s;
  border-radius: 34px;
}

.form-switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-switch input:checked+.slider {
  background-color: var(--a);
}

.form-switch input:checked+.slider:before {
  transform: translateX(20px);
}

/* ── MODAL STYLES ── */
  .modal-preview-wrap {
    background: #F1F5F9;
    border-radius: var(--rl);
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bd);
  }

.modal-mock {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.08);
    overflow: hidden;
    border: 1px solid var(--bd);
  }

.modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--bd);
    display: flex;
    align-items: center;
    gap: 14px;
  }

.modal-header .modal-icon {
    width: 38px;
    height: 38px;
    background: var(--a1);
    color: var(--a);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.modal-header .modal-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.6;
  }

.modal-header .modal-title-wrap {
    flex: 1;
  }

.modal-header .modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 2px;
  }

.modal-header .modal-subtitle {
    font-size: 13px;
    color: #64748B;
  }

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #F1F5F9;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--trans);
  }

.modal-close:hover {
    background: #E2E8F0;
    color: var(--t1);
  }

.modal-body {
    padding: 24px;
  }

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--bd);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #F8FAFC;
  }

.drop-zone {
    border: 1px dashed var(--bd);
    border-radius: var(--rl);
    padding: 36px 32px;
    text-align: center;
    transition: var(--trans);
    cursor: pointer;
    background: #FBFCFE;
  }

.drop-zone:hover {
    border-color: var(--a);
    background: var(--a1);
  }

.drop-icon {
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--a);
    border: 1px solid var(--bd);
  }

.drop-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
  }

.drop-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: 6px;
  }

.drop-sub {
    font-size: 13px;
    color: #64748B;
    margin-bottom: 20px;
  }

/* Cropper Mockup */
  .cropper-area {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.cropper-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
  }

.crop-mask {
    position: absolute;
    top: 15%;
    left: 25%;
    width: 50%;
    height: 70%;
    border: 2px dashed #fff;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4);
    z-index: 2;
  }

.crop-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 2px;
    z-index: 3;
  }

.handle-tl { top: -5px; left: -5px; }

.handle-tr { top: -5px; right: -5px; }

.handle-bl { bottom: -5px; left: -5px; }

.handle-br { bottom: -5px; right: -5px; }

.handle-tc { top: -5px; left: 50%; transform: translateX(-50%); }

.handle-bc { bottom: -5px; left: 50%; transform: translateX(-50%); }

.handle-lc { left: -5px; top: 50%; transform: translateY(-50%); }

.handle-rc { right: -5px; top: 50%; transform: translateY(-50%); }