/* [v1.2.4] ToutLike shared client dashboard design system
   Used by /account, /orders, /addfunds pages.
   Classes : .tl-dash-* (hero, kpis, cards, forms, buttons)
   Mobile-first. Light/Dark theme aware. */

/* ============================================================================
   [v1.2.7] MIDNIGHT SLATE — Design tokens (couleurs UNIQUEMENT, design inchange)
   Fond neutre slate (au lieu du violet sature) + indigo pour la marque + KPI doux.
   Utiliser var(--token) dans tout nouveau CSS pour gerer dark/light en un point.
   ========================================================================== */
:root{
  /* Surfaces */
  --bg:             #08111F;
  --surface-1:      #101827;
  --surface-2:      #172337;
  --surface-3:      #21324A;
  /* Bordures */
  --border:         rgba(148,163,184,0.12);
  --border-strong:  rgba(148,163,184,0.22);
  /* Texte */
  --text:           #F1F5F9;
  --text-muted:     #94A3B8;
  --text-faint:     #64748B;
  /* Marque */
  --brand:          #2563EB;
  --brand-hover:    #0EA5E9;
  --brand-soft:     rgba(37,99,235,0.14);
  --brand-grad:     linear-gradient(135deg,#2563EB,#0EA5E9);
  /* Etats */
  --success:        #10B981;
  --warning:        #F59E0B;
  --danger:         #F43F5E;
  --info:           #06B6D4;
  /* KPI accents doux (dark) */
  --kpi-blue:       #60A5FA;
  --kpi-purple:     #38BDF8;
  --kpi-orange:     #FBBF24;
  --kpi-green:      #34D399;
  --kpi-red:        #FB7185;
  /* [v1.2.7] Aliases retro-compatibles pour code existant (guide.twig, neworder.twig, etc.) */
  --muted:          #94A3B8;
  --card:           #101827;
  --text-strong:    #F1F5F9;
  /* [v1.2.7] Override des variables du theme de base (go2u33qhqj7bkfdo.css) pour aligner
     les pages dashboard avec la palette Midnight Slate sans toucher au fichier theme. */
  --primary-color:  #2563EB;
  --primary-color-deep: #1D4ED8;
  --card-bg:        #101827;
  --card-border:    rgba(148,163,184,0.22);
  --form-input-bg:  #172337;
  --bs-body-bg:     #08111F;
  --bg-redial:      radial-gradient(ellipse at top, #172337, #08111F);
  --footer-bg:      #08111F;
  --sidebar-color:  #080E19;
  --header-bg:      #101827;
}
body.daymode{
  --bg:             #F5F8FC;
  --surface-1:      #FFFFFF;
  --surface-2:      #F1F5F9;
  --surface-3:      #E2E8F0;
  --border:         #E2E8F0;
  --border-strong:  #CBD5E1;
  --text:           #0F172A;
  --text-muted:     #475569;
  --text-faint:     #94A3B8;
  --brand:          #2563EB;
  --brand-hover:    #0284C7;
  --brand-soft:     rgba(37,99,235,0.08);
  --brand-grad:     linear-gradient(135deg,#2563EB,#0EA5E9);
  --success:        #059669;
  --warning:        #D97706;
  --danger:         #E11D48;
  --info:           #0891B2;
  --kpi-blue:       #2563EB;
  --kpi-purple:     #0284C7;
  --kpi-orange:     #D97706;
  --kpi-green:      #059669;
  --kpi-red:        #E11D48;
  /* Aliases daymode */
  --muted:          #475569;
  --card:           #FFFFFF;
  --text-strong:    #0F172A;
  /* Override theme de base en daymode */
  --primary-color:  #2563EB;
  --primary-color-deep: #1D4ED8;
  --card-bg:        #FFFFFF;
  --card-border:    #E2E8F0;
  --form-input-bg:  #F8FBFF;
  --bs-body-bg:     #F5F8FC;
  --bg-redial:      radial-gradient(ellipse at top, #EAF2FF, #F5F8FC);
  --footer-bg:      #F5F8FC;
  --sidebar-color:  #FFFFFF;
  --header-bg:      #FFFFFF;
}

/* [v1.2.7] Background dashboard : slate neutre (fini le violet sature #2e1065).
   Halos indigo-violet discrets pour guider l'oeil sans agresser. */
#dashboard{
  background:
    radial-gradient(ellipse 800px 400px at 8% 0%, rgba(99,102,241,.08), transparent 70%),
    radial-gradient(ellipse 700px 350px at 95% 0%, rgba(139,92,246,.06), transparent 70%),
    radial-gradient(ellipse 500px 300px at 50% 100%, rgba(6,182,212,.04), transparent 70%),
    linear-gradient(180deg, #0B1120 0%, #111827 55%, #0B1120 100%) !important;
  min-height:100vh;
}
body:has(#dashboard){
  background:
    linear-gradient(180deg, #0B1120 0%, #111827 55%, #0B1120 100%) !important;
}
body.daymode:has(#dashboard),
body.daymode #dashboard{
  background:
    radial-gradient(ellipse 800px 400px at 8% 0%, rgba(79,70,229,.06), transparent 70%),
    radial-gradient(ellipse 700px 350px at 95% 0%, rgba(124,58,237,.05), transparent 70%),
    linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 55%, #F8FAFC 100%) !important;
}

/* [v1.2.5] Images de decor legacy (.about_us_effect) : reduire leur impact sur le dashboard
   - sinon elles ajoutent du bruit visuel au dessus des KPIs. */
main.auth .about_us_effect{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
main.auth .about_us_effect img{
  opacity:.18 !important;
  mix-blend-mode:screen;
}
body.daymode main.auth .about_us_effect img{
  opacity:.06 !important;
  mix-blend-mode:multiply;
}

/* ============================================================================
   [v1.2.5] HEADER (topbar) : refonte pro avec glassmorphism, bordure fine,
   boutons raffines - remplace le gris plat legacy (#393939) qui manquait
   de profondeur et de coherence avec le reste du dashboard.
   ========================================================================== */
#dashboard #content #header{
  background:rgba(11,16,32,.72)!important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(148,163,184,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.02), 0 8px 24px -12px rgba(0,0,0,.45);
  height:64px!important;max-height:64px!important;
  padding:10px 22px!important;
  transition:background .2s ease, backdrop-filter .2s ease;
}
#dashboard #content #header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(99,102,241,.3) 25%,rgba(139,92,246,.3) 75%,transparent 100%);
  pointer-events:none;opacity:.55;
}
#dashboard #content #header .header_left,
#dashboard #content #header .header_right{gap:10px!important}

/* Sidebar toggle : icone dans pilule neutre qui s'illumine au hover */
#dashboard #content #header #SidebarButton,
#SidebarButton{
  width:38px!important;height:38px!important;
  border-radius:11px!important;
  padding:0!important;margin-right:6px;
  font-size:20px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  color:#cbd5e1!important;
  display:inline-flex;align-items:center;justify-content:center;
  transition:.18s ease;
}
#dashboard #content #header #SidebarButton:hover,
#SidebarButton:hover{
  background:rgba(139,92,246,.14)!important;
  border-color:rgba(139,92,246,.32)!important;
  color:#fff!important;transform:translateY(-1px);
}
#dashboard #content #header #SidebarButton iconify-icon,
#SidebarButton iconify-icon{font-size:20px;line-height:0}

/* Day/Night toggle : capsule compacte professionnelle */
#dashboard #content #header .day_night_btn{
  width:38px;height:38px;border-radius:11px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(148,163,184,.18);
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;cursor:pointer;
  transition:.18s ease;color:#cbd5e1;
}
#dashboard #content #header .day_night_btn:hover{
  background:rgba(139,92,246,.14);
  border-color:rgba(139,92,246,.32);
  color:#fff;transform:translateY(-1px);
}
#dashboard #content #header .day_night_btn .active_circle{display:none}
#dashboard #content #header .day_night_btn iconify-icon{font-size:18px;line-height:0}
/* Theme icon visibility swap */
#dashboard #content #header .day_night_btn .day_mode{display:inline-flex;color:#fbbf24}
#dashboard #content #header .day_night_btn .night_mode{display:none}
body.daymode #dashboard #content #header .day_night_btn .day_mode{display:none}
body.daymode #dashboard #content #header .day_night_btn .night_mode{display:inline-flex;color:var(--brand-hover)}

/* Header logo mobile : centrage + taille raisonnable */
#dashboard #content #header .header_logo{
  display:flex;align-items:center;margin-left:4px;
}
#dashboard #content #header .header_logo img{
  max-height:34px;width:auto;
}

/* Light theme header */
body.daymode #dashboard #content #header{
  background:rgba(255,255,255,.78)!important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(15,23,41,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.6), 0 8px 24px -12px rgba(15,23,41,.1);
}
body.daymode #dashboard #content #header::after{
  background:linear-gradient(90deg,transparent 0%,rgba(99,102,241,.35) 25%,rgba(139,92,246,.35) 75%,transparent 100%);
}
body.daymode #dashboard #content #header #SidebarButton,
body.daymode #SidebarButton{
  background:#fff!important;border-color:#e2e8f0!important;color:#475569!important;
}
body.daymode #dashboard #content #header #SidebarButton:hover{
  background:rgba(139,92,246,.08)!important;border-color:rgba(139,92,246,.28)!important;color:#0f172a!important;
}
body.daymode #dashboard #content #header .day_night_btn{
  background:#fff;border-color:#e2e8f0;color:#475569;
}
body.daymode #dashboard #content #header .day_night_btn:hover{
  background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.28);color:#0f172a;
}

/* Mobile : header plus compact, supprime le padding horizontal lourd */
@media (max-width:767px){
  #dashboard #content #header{
    padding:8px 14px!important;height:58px!important;max-height:58px!important;
  }
  #dashboard #content #header #SidebarButton,
  #SidebarButton{width:36px!important;height:36px!important;font-size:18px!important}
  #dashboard #content #header .day_night_btn{width:36px;height:36px}
}
/* Ajuste le contenu pour la nouvelle hauteur */
#dashboard #content .auth{padding-top:76px!important}
@media (max-width:767px){#dashboard #content .auth{padding-top:66px!important}}

/* -------- Layout wrap -------- */
.tl-dash-wrap{max-width:1100px;margin:0 auto;padding:18px 16px 80px;display:flex;flex-direction:column;gap:18px}

/* -------- Alerts -------- */
.tl-dash-alert{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;font-size:13.5px;font-weight:600}
.tl-dash-alert.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#fca5a5}
.tl-dash-alert.ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:#86efac}
.tl-dash-alert-ico{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);font-size:13px;font-weight:800;flex-shrink:0}

/* -------- Hero -------- */
.tl-dash-hero{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(139,92,246,.16));
  border:1px solid rgba(139,92,246,.22);border-radius:22px;padding:20px 22px;
}
.tl-dash-hero-left{display:flex;align-items:center;gap:16px;min-width:0;flex:1}
.tl-dash-hero-ico{
  width:64px;height:64px;border-radius:18px;
  background:var(--brand-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 12px 28px rgba(99,102,241,.32);
}
.tl-dash-hero-info{min-width:0}
.tl-dash-hero-eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#94A3B8;margin-bottom:4px}
.tl-dash-hero-name{font-size:24px;font-weight:900;color:#fff;margin:0 0 8px;letter-spacing:-.02em;word-break:break-word}
.tl-dash-hero-meta{display:flex;flex-wrap:wrap;gap:6px}
.tl-dash-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:#dde6f5;font-size:11.5px;font-weight:700;max-width:260px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tl-dash-hero-cta{
  display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:14px;
  background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff!important;font-weight:800;font-size:13px;
  text-decoration:none!important;box-shadow:0 10px 22px rgba(34,197,94,.32);
  flex-shrink:0;transition:transform .15s ease,box-shadow .15s ease;border:0;cursor:pointer;font-family:inherit;
}
.tl-dash-hero-cta:hover{transform:translateY(-2px);color:#fff;box-shadow:0 14px 28px rgba(34,197,94,.38)}
.tl-dash-hero-cta.ghost{
  background:rgba(255,255,255,.08);color:#dde6f5!important;border:1px solid rgba(255,255,255,.15);
  box-shadow:none;
}
.tl-dash-hero-cta.ghost:hover{background:rgba(255,255,255,.14);color:#fff!important;box-shadow:none}

/* -------- KPI strip -------- */
.tl-dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tl-dash-kpi{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.16);border-radius:18px;
  padding:14px 16px;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;
}
.tl-dash-kpi:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.18)}
.tl-dash-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:currentColor;opacity:.85}
.tl-dash-kpi-ico{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.tl-dash-kpi-body{min-width:0;flex:1}
.tl-dash-kpi-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#94A3B8;margin-bottom:4px}
.tl-dash-kpi-value{font-size:18px;font-weight:900;color:#fff;line-height:1.1;word-break:break-word}
/* [v1.2.5] Sous-texte KPI : petite ligne de chips icone+texte (ex: Likes · Vues · Abonnes).
   Doit rester compact, surtout sur mobile (ne doit pas alourdir la carte). */
.tl-dash-kpi-sub{display:flex;flex-wrap:nowrap;gap:8px;margin-top:4px;overflow:hidden}
.tl-dash-kpi-sub > span{
  display:inline-flex;align-items:center;gap:3px;
  font-size:9.5px;font-weight:700;color:#94A3B8;
  letter-spacing:.02em;line-height:1;white-space:nowrap;
}
.tl-dash-kpi-sub > span svg{color:currentColor;flex-shrink:0;width:9px!important;height:9px!important}
body.daymode .tl-dash-kpi-sub > span{color:#64748b}
.tl-kpi-label-short{display:none}
/* Mobile : icones SVG masquees (gagne de la place), separateurs en middle-dot */
@media (max-width:480px){
  .tl-dash-kpi-sub{gap:4px;margin-top:3px}
  .tl-dash-kpi-sub > span{font-size:9px}
  .tl-dash-kpi-sub > span svg{display:none}
  .tl-dash-kpi-sub > span + span::before{content:"·";margin-right:4px;color:#6b7a94}
}
/* [v1.2.7] Accents KPI Midnight Slate : teintes douces, signalent sans crier */
.tl-dash-kpi.k-blue   {color:var(--kpi-blue)}   .tl-dash-kpi.k-blue   .tl-dash-kpi-ico{background:linear-gradient(135deg,#60A5FA,#3B82F6)}
.tl-dash-kpi.k-purple {color:var(--kpi-purple)} .tl-dash-kpi.k-purple .tl-dash-kpi-ico{background:linear-gradient(135deg,#A78BFA,#8B5CF6)}
.tl-dash-kpi.k-orange {color:var(--kpi-orange)} .tl-dash-kpi.k-orange .tl-dash-kpi-ico{background:linear-gradient(135deg,#FBBF24,#F59E0B)}
.tl-dash-kpi.k-green  {color:var(--kpi-green)}  .tl-dash-kpi.k-green  .tl-dash-kpi-ico{background:linear-gradient(135deg,#34D399,#10B981)}
.tl-dash-kpi.k-red    {color:var(--kpi-red)}    .tl-dash-kpi.k-red    .tl-dash-kpi-ico{background:linear-gradient(135deg,#FB7185,#F43F5E)}
body.daymode .tl-dash-kpi.k-blue   .tl-dash-kpi-ico{background:linear-gradient(135deg,#3B82F6,#2563EB)}
body.daymode .tl-dash-kpi.k-purple .tl-dash-kpi-ico{background:linear-gradient(135deg,#38BDF8,#0284C7)}
body.daymode .tl-dash-kpi.k-orange .tl-dash-kpi-ico{background:linear-gradient(135deg,#F59E0B,#D97706)}
body.daymode .tl-dash-kpi.k-green  .tl-dash-kpi-ico{background:linear-gradient(135deg,#10B981,#059669)}
body.daymode .tl-dash-kpi.k-red    .tl-dash-kpi-ico{background:linear-gradient(135deg,#F43F5E,#E11D48)}

/* -------- Cards -------- */
.tl-dash-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.16);
  border-radius:22px;padding:22px;
}
.tl-dash-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.tl-dash-card-head-ico{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(139,92,246,.18));border:1px solid rgba(139,92,246,.18);
  color:#a8c0ff;flex-shrink:0;
}
.tl-dash-card-head h2{font-size:16px;font-weight:800;color:#fff;margin:0 0 4px;letter-spacing:-.01em}
.tl-dash-card-head p{font-size:12.5px;color:#94A3B8;margin:0;line-height:1.6}
.tl-dash-card-head-info{min-width:0;flex:1}

/* -------- Buttons -------- */
.tl-dash-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 20px;border:none;border-radius:12px;
  font-size:13px;font-weight:800;letter-spacing:.02em;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;text-decoration:none;font-family:inherit;white-space:nowrap;
}
.tl-dash-btn.primary{
  background:var(--brand-grad);color:#fff;
  box-shadow:0 10px 22px rgba(99,102,241,.3);
}
.tl-dash-btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(99,102,241,.36);color:#fff}
.tl-dash-btn.ghost{
  background:rgba(255,255,255,.06);color:#e2e8f0;border:1px solid rgba(148,163,184,.22);
}
.tl-dash-btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-2px)}

/* -------- Filter chips (for /orders) -------- */
.tl-dash-filters{display:flex;flex-wrap:wrap;gap:8px}
.tl-dash-filter{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.18);color:#cbd5e1;
  font-size:12.5px;font-weight:700;text-decoration:none!important;transition:.15s;
  white-space:nowrap;
}
.tl-dash-filter:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateY(-1px)}
.tl-dash-filter.active{
  background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.2));
  border-color:rgba(139,92,246,.4);color:#fff;box-shadow:0 6px 14px rgba(99,102,241,.24);
}
.tl-dash-filter .tl-dash-filter-count{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;
  border-radius:999px;background:rgba(148,163,184,.2);font-size:10.5px;font-weight:800;color:#e2e8f0;
}
.tl-dash-filter.active .tl-dash-filter-count{background:rgba(139,92,246,.4);color:#fff}

/* -------- Search input -------- */
.tl-dash-search{
  display:flex;align-items:center;gap:8px;padding:4px 4px 4px 14px;
  background:rgba(15,23,41,.6);border:1.5px solid rgba(148,163,184,.18);border-radius:14px;
  transition:border .15s ease,box-shadow .15s ease;max-width:420px;flex:1;min-width:200px;
}
.tl-dash-search:focus-within{border-color:#6366F1;box-shadow:0 0 0 4px rgba(99,102,241,.18)}
.tl-dash-search input{
  flex:1;min-width:0;height:40px;background:transparent;border:0;outline:0;
  color:#fff;font-size:14px;font-family:inherit;
}
.tl-dash-search button{
  width:40px;height:40px;border:0;border-radius:10px;cursor:pointer;
  background:var(--brand-grad);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* -------- Light theme -------- */
body.daymode .tl-dash-hero-name,
body.daymode .tl-dash-kpi-value,
body.daymode .tl-dash-card-head h2,
body.daymode .tl-dash-search input,
body.daymode .tl-dash-filter.active{color:#0f172a}
body.daymode .tl-dash-card,
body.daymode .tl-dash-kpi{background:#fff;border-color:#e2e8f0}
body.daymode .tl-dash-filter{background:#fff;border-color:#e2e8f0;color:#334155}
body.daymode .tl-dash-search{background:#fff;border-color:#e2e8f0}
body.daymode .tl-dash-chip{background:rgba(15,23,41,.06);color:#334155;border-color:rgba(15,23,41,.12)}

/* -------- Navbar (sidebar + offcanvas) user identity KPI box -------- */
/* Surcharge ciblee des anciens .user_box : on garde la classe d'origine pour ne rien casser,
   mais on ajoute .tl-nav-userbox qui applique le design KPI moderne. */
.offcanvas-body .user_box.tl-nav-userbox,
#dashboard #sidebar .user_box.tl-nav-userbox{
  margin:12px 18px 18px!important;padding:18px 16px!important;
  text-align:left!important;
  border-radius:20px!important;
  border:1px solid rgba(139,92,246,.28)!important;
  background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(139,92,246,.16))!important;
  background-color:transparent!important;
  overflow:hidden;position:relative;
  display:flex;flex-direction:column;gap:12px;
}
.tl-nav-userbox::before{
  content:"";position:absolute;left:0;right:0;top:0;height:70px;
  background:radial-gradient(circle at 30% 0%,rgba(99,102,241,.25),transparent 60%);
  pointer-events:none;
}
.tl-nav-userbox-top{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.tl-nav-avatar{
  width:52px;height:52px;border-radius:14px;
  background:var(--brand-grad)!important;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:17px;letter-spacing:.04em;flex-shrink:0;
  box-shadow:0 10px 22px rgba(99,102,241,.32);
  margin:0!important;
}
.tl-nav-userbox-info{min-width:0;flex:1}
.offcanvas-body .user_box.tl-nav-userbox .tl-nav-username,
#dashboard #sidebar .user_box.tl-nav-userbox .tl-nav-username{
  font-size:15px;font-weight:800!important;color:#fff!important;line-height:1.2;
  margin:0 0 2px!important;word-break:break-word;
}
.tl-nav-userbox-sub{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#94A3B8}
.tl-nav-balance{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:14px;
  background:rgba(15,23,41,.5);border:1px solid rgba(148,163,184,.18);
}
.tl-nav-balance-ico{
  width:32px;height:32px;border-radius:10px;
  background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 6px 14px rgba(34,197,94,.32);
}
.tl-nav-balance-body{min-width:0;flex:1}
.tl-nav-balance-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#94A3B8;line-height:1;margin-bottom:3px}
.tl-nav-balance-value{font-size:14px;font-weight:900;color:#fff;line-height:1.15;word-break:break-word}
.tl-nav-balance-cta{
  width:34px;height:34px;border-radius:10px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff!important;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 6px 14px rgba(34,197,94,.3);text-decoration:none!important;
  transition:transform .15s ease;
}
.tl-nav-balance-cta:hover{transform:translateY(-2px)}
.tl-nav-chips{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.tl-nav-chip{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:#dde6f5;font-size:10.5px;font-weight:700;white-space:nowrap;
}

/* -------- Top header balance pill (desktop topbar) -------- */
.tl-nav-balance-pill{
  display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:999px;
  background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(139,92,246,.16));
  border:1px solid rgba(139,92,246,.28);
  color:#fff!important;font-size:12.5px;font-weight:800;
  text-decoration:none!important;transition:transform .15s ease,box-shadow .15s ease;
  line-height:1;
}
.tl-nav-balance-pill:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(99,102,241,.24);color:#fff!important}
.tl-nav-balance-pill-ico{
  width:30px;height:30px;border-radius:999px;flex-shrink:0;
  background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(34,197,94,.3);
}
.tl-nav-balance-pill-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.tl-nav-balance-pill-label{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#94A3B8;line-height:1}
.tl-nav-balance-pill-value{font-size:13px;font-weight:900;color:#fff;line-height:1;white-space:nowrap}

/* Light theme */
body.daymode .offcanvas-body .user_box.tl-nav-userbox,
body.daymode #dashboard #sidebar .user_box.tl-nav-userbox{
  background:#fff!important;border-color:#e2e8f0!important;
}
body.daymode .tl-nav-userbox .tl-nav-username{color:#0f172a!important}
body.daymode .tl-nav-userbox-sub{color:#64748b}
body.daymode .tl-nav-balance{background:#f8fafc;border-color:#e2e8f0}
body.daymode .tl-nav-balance-value{color:#0f172a}
body.daymode .tl-nav-chip{background:rgba(15,23,41,.06);color:#334155;border-color:rgba(15,23,41,.12)}
body.daymode .tl-nav-balance-pill{background:#fff;border-color:#e2e8f0}
body.daymode .tl-nav-balance-pill-label{color:#64748b}
body.daymode .tl-nav-balance-pill-value{color:#0f172a}

/* Mobile : la pill du topbar est redondante avec la userbox de l'offcanvas */
@media (max-width:991px){
  .tl-nav-balance-pill{display:none!important}
}

/* -------- Sidebar menu items : unifie sur le theme bleu/violet du dashboard -------- */
#dashboard #sidebar .sidebar_menu{padding:0 10px!important;width:auto!important;display:flex;flex-direction:column;gap:4px}
#dashboard #sidebar .sidebar_menu .menu_item{margin:0!important}
#dashboard #sidebar .sidebar_menu .menu_item .menu_link{
  display:flex!important;align-items:center;gap:12px!important;
  padding:11px 14px!important;
  border-radius:12px!important;
  color:#b8c5dc!important;
  background:transparent!important;
  border:1px solid transparent!important;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease!important;
  font-size:13.5px;font-weight:600;
}
#dashboard #sidebar .sidebar_menu .menu_item .menu_link:hover{
  background:rgba(139,92,246,.1)!important;
  border-color:rgba(139,92,246,.22)!important;
  color:#fff!important;transform:none!important;box-shadow:none!important;
}
#dashboard #sidebar .sidebar_menu .menu_item .menu_link.active{
  background:var(--brand-grad)!important;
  border-color:rgba(139,92,246,.4)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(99,102,241,.28)!important;
  border-radius:12px!important;
}
#dashboard #sidebar .sidebar_menu .menu_item .menu_link .icon{
  width:30px;height:30px;border-radius:9px;
  background:rgba(148,163,184,.14);
  display:flex;align-items:center;justify-content:center;
  font-size:17px!important;line-height:0!important;flex-shrink:0;
  transition:background .18s ease;
}
#dashboard #sidebar .sidebar_menu .menu_item .menu_link:hover .icon{background:rgba(139,92,246,.22)}
#dashboard #sidebar .sidebar_menu .menu_item .menu_link.active .icon{
  background:rgba(255,255,255,.2)!important;color:#fff!important;
}
#dashboard #sidebar .sidebar_menu .menu_item .menu_link .menu_text{
  font-size:13.5px!important;font-weight:600!important;letter-spacing:-.005em;
}
/* Light theme sidebar menu */
body.daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link{color:#475569!important}
body.daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link:hover{color:#0f172a!important;background:rgba(139,92,246,.08)!important}
body.daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link.active{color:#fff!important}

/* ============================================================================
   User topbar dropdown (desktop) : panneau KPI aligne a droite
   + Offcanvas mobile items : mini-cards KPI coherentes
   ========================================================================== */

/* ---- Desktop : bouton avatar (.user_toutlike_btn / .user_access_btn) ---- */
#dashboard #content #header .user_menu_wrap{position:relative}
#dashboard #content #header .user_toutlike_btn,
#dashboard #content #header .user_access_btn{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(148,163,184,.22)!important;
  border-radius:50px!important;
  width:40px;height:40px;padding:0!important;
  transition:.18s ease;
}
#dashboard #content #header .user_toutlike_btn:hover,
#dashboard #content #header .user_toutlike_btn[aria-expanded="true"],
#dashboard #content #header .user_access_btn:hover,
#dashboard #content #header .user_access_btn[aria-expanded="true"]{
  border-color:rgba(139,92,246,.45)!important;
  box-shadow:0 0 0 3px rgba(139,92,246,.15)!important;
}
body.daymode #dashboard #content #header .user_toutlike_btn,
body.daymode #dashboard #content #header .user_access_btn{
  background:#fff!important;border-color:#e2e8f0!important;
}

/* ---- Desktop : dropdown KPI ---- */
.user_menu_wrap .dropdown-menu{
  position:absolute!important;
  inset:100% 0 auto auto!important;      /* top=100% right=0 : ouverture a DROITE */
  top:100%!important;right:0!important;left:auto!important;bottom:auto!important;
  transform:none!important;              /* annule le translate de Popper */
  margin-top:8px!important;
  min-width:248px!important;
  padding:8px!important;
  border-radius:16px!important;
  border:1px solid rgba(148,163,184,.18)!important;
  background:linear-gradient(180deg,rgba(17,24,39,.98),rgba(16,22,38,.98))!important;
  box-shadow:0 18px 40px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:visible!important;
}
.user_menu_wrap .dropdown-menu li{list-style:none;margin:0}
.user_menu_wrap .dropdown-menu li + li{margin-top:2px}
.user_menu_wrap .dropdown-menu .dropdown-item{
  display:flex!important;align-items:center;gap:11px;
  padding:10px 12px!important;
  border-radius:11px!important;
  border:1px solid transparent;
  color:#cbd5e1!important;background:transparent!important;
  font-size:13px!important;font-weight:600!important;
  text-decoration:none!important;letter-spacing:-.005em;
  transition:.18s ease;
  white-space:normal;
}
.user_menu_wrap .dropdown-menu .dropdown-item:hover,
.user_menu_wrap .dropdown-menu .dropdown-item:focus{
  background:rgba(139,92,246,.14)!important;
  border-color:rgba(139,92,246,.28)!important;
  color:#fff!important;
  transform:translateX(2px);
}
.user_menu_wrap .dropdown-menu .dropdown-item .icon{
  width:32px!important;height:32px!important;
  border-radius:10px;
  background:rgba(99,102,241,.14);
  color:#a8c0ff;
  display:flex;align-items:center;justify-content:center;
  font-size:17px!important;line-height:0!important;
  flex-shrink:0;transition:.18s ease;
}
.user_menu_wrap .dropdown-menu .dropdown-item:hover .icon{
  background:rgba(139,92,246,.24);color:#cdb5ff;
}
.user_menu_wrap .dropdown-menu .dropdown-item .text{
  font-size:13px!important;font-weight:600!important;
}
.user_menu_wrap .dropdown-menu .dropdown-divider{
  border-top:1px solid rgba(148,163,184,.14)!important;
  margin:6px 2px!important;opacity:1!important;
}
/* Logout = destructive */
.user_menu_wrap .dropdown-menu .dropdown-item.bg-danger{
  background:transparent!important;color:#fca5a5!important;
}
.user_menu_wrap .dropdown-menu .dropdown-item.bg-danger .icon{
  background:rgba(239,68,68,.15)!important;color:#fca5a5!important;
}
.user_menu_wrap .dropdown-menu .dropdown-item.bg-danger:hover,
.user_menu_wrap .dropdown-menu .dropdown-item.bg-danger:focus{
  background:linear-gradient(135deg,rgba(239,68,68,.22),rgba(220,38,38,.12))!important;
  border-color:rgba(239,68,68,.35)!important;
  color:#fff!important;
}
.user_menu_wrap .dropdown-menu .dropdown-item.bg-danger:hover .icon{
  background:rgba(239,68,68,.32)!important;color:#fff!important;
}

/* Light theme desktop dropdown */
body.daymode .user_menu_wrap .dropdown-menu{
  background:#fff!important;
  border-color:#e2e8f0!important;
  box-shadow:0 18px 40px rgba(15,23,41,.12),0 2px 6px rgba(15,23,41,.06)!important;
}
body.daymode .user_menu_wrap .dropdown-menu .dropdown-item{color:#475569!important}
body.daymode .user_menu_wrap .dropdown-menu .dropdown-item:hover,
body.daymode .user_menu_wrap .dropdown-menu .dropdown-item:focus{
  background:rgba(139,92,246,.1)!important;
  border-color:rgba(139,92,246,.22)!important;
  color:#0f172a!important;
}
body.daymode .user_menu_wrap .dropdown-menu .dropdown-item .icon{
  background:rgba(99,102,241,.12)!important;color:#6366F1!important;
}
body.daymode .user_menu_wrap .dropdown-menu .dropdown-item:hover .icon{
  background:rgba(139,92,246,.18)!important;color:var(--brand-hover)!important;
}
body.daymode .user_menu_wrap .dropdown-menu .dropdown-divider{
  border-top-color:#e2e8f0!important;
}
body.daymode .user_menu_wrap .dropdown-menu .dropdown-item.bg-danger{
  background:transparent!important;color:#dc2626!important;
}
body.daymode .user_menu_wrap .dropdown-menu .dropdown-item.bg-danger .icon{
  background:rgba(239,68,68,.12)!important;color:#dc2626!important;
}
body.daymode .user_menu_wrap .dropdown-menu .dropdown-item.bg-danger:hover{
  background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(220,38,38,.08))!important;
  border-color:rgba(239,68,68,.3)!important;
  color:#dc2626!important;
}
body.daymode .user_menu_wrap .dropdown-menu .dropdown-item.bg-danger:hover .icon{
  background:rgba(239,68,68,.22)!important;color:#dc2626!important;
}

/* ---- Offcanvas mobile : items en mini-cards KPI ---- */
.user_sidebar_menu ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.user_sidebar_menu .sidebar-user-item{
  display:flex!important;align-items:center;gap:12px;
  padding:13px 14px!important;border-radius:13px!important;
  color:#cbd5e1!important;
  background:rgba(15,23,41,.55)!important;
  border:1px solid rgba(148,163,184,.16)!important;
  text-decoration:none!important;
  font-size:13.5px;font-weight:600;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
  margin-bottom:0!important;
}
.user_sidebar_menu .sidebar-user-item:hover,
.user_sidebar_menu .sidebar-user-item:focus{
  background:rgba(139,92,246,.14)!important;
  border-color:rgba(139,92,246,.32)!important;
  color:#fff!important;
  transform:translateX(3px);
}
.user_sidebar_menu .sidebar-user-item .icon{
  width:34px!important;height:34px!important;border-radius:10px;
  background:rgba(99,102,241,.16)!important;color:#a8c0ff!important;
  display:flex;align-items:center;justify-content:center;
  font-size:18px!important;line-height:0!important;flex-shrink:0;
  transition:.18s ease;
}
.user_sidebar_menu .sidebar-user-item:hover .icon{
  background:rgba(139,92,246,.26)!important;color:#cdb5ff!important;
}
.user_sidebar_menu .sidebar-user-item .text{
  font-size:13.5px!important;font-weight:600!important;letter-spacing:-.005em;
}
/* Logout mobile */
.user_sidebar_menu li:last-child .sidebar-user-item,
.user_sidebar_menu .sidebar-user-item[href="/logout"],
.user_sidebar_menu .sidebar-user-item[href*="logout"]{
  color:#fca5a5!important;
  background:rgba(239,68,68,.08)!important;
  border-color:rgba(239,68,68,.22)!important;
}
.user_sidebar_menu li:last-child .sidebar-user-item .icon,
.user_sidebar_menu .sidebar-user-item[href="/logout"] .icon,
.user_sidebar_menu .sidebar-user-item[href*="logout"] .icon{
  background:rgba(239,68,68,.18)!important;color:#fca5a5!important;
}
.user_sidebar_menu li:last-child .sidebar-user-item:hover,
.user_sidebar_menu .sidebar-user-item[href="/logout"]:hover,
.user_sidebar_menu .sidebar-user-item[href*="logout"]:hover{
  background:linear-gradient(135deg,rgba(239,68,68,.22),rgba(220,38,38,.12))!important;
  border-color:rgba(239,68,68,.4)!important;
  color:#fff!important;
}
.user_sidebar_menu li:last-child .sidebar-user-item:hover .icon,
.user_sidebar_menu .sidebar-user-item[href="/logout"]:hover .icon,
.user_sidebar_menu .sidebar-user-item[href*="logout"]:hover .icon{
  background:rgba(239,68,68,.34)!important;color:#fff!important;
}

/* Light theme mobile items */
body.daymode .user_sidebar_menu .sidebar-user-item{
  background:#fff!important;
  border-color:#e2e8f0!important;
  color:#475569!important;
}
body.daymode .user_sidebar_menu .sidebar-user-item:hover{
  background:rgba(139,92,246,.08)!important;
  border-color:rgba(139,92,246,.24)!important;
  color:#0f172a!important;
}
body.daymode .user_sidebar_menu .sidebar-user-item .icon{
  background:rgba(99,102,241,.12)!important;color:#6366F1!important;
}
body.daymode .user_sidebar_menu .sidebar-user-item:hover .icon{
  background:rgba(139,92,246,.18)!important;color:var(--brand-hover)!important;
}
body.daymode .user_sidebar_menu li:last-child .sidebar-user-item,
body.daymode .user_sidebar_menu .sidebar-user-item[href="/logout"],
body.daymode .user_sidebar_menu .sidebar-user-item[href*="logout"]{
  background:rgba(239,68,68,.06)!important;
  border-color:rgba(239,68,68,.22)!important;
  color:#dc2626!important;
}
body.daymode .user_sidebar_menu li:last-child .sidebar-user-item .icon,
body.daymode .user_sidebar_menu .sidebar-user-item[href="/logout"] .icon,
body.daymode .user_sidebar_menu .sidebar-user-item[href*="logout"] .icon{
  background:rgba(239,68,68,.12)!important;color:#dc2626!important;
}
body.daymode .user_sidebar_menu li:last-child .sidebar-user-item:hover,
body.daymode .user_sidebar_menu .sidebar-user-item[href="/logout"]:hover,
body.daymode .user_sidebar_menu .sidebar-user-item[href*="logout"]:hover{
  background:linear-gradient(135deg,rgba(239,68,68,.14),rgba(220,38,38,.06))!important;
  border-color:rgba(239,68,68,.35)!important;
  color:#dc2626!important;
}

/* -------- Orders table : modernisation ciblee (desktop = grille elegante, mobile = cards) -------- */
.order__table{display:flex!important;flex-direction:column;gap:10px;background:transparent!important;padding:0!important}
.order_table_head,
.order_table_row{
  display:grid!important;
  grid-template-columns:0.8fr 1fr 1.6fr 0.9fr 0.8fr 0.8fr 1.1fr 1.2fr 0.9fr 1fr;
  gap:12px;
  align-items:center;
  padding:14px 18px!important;
  border-radius:14px!important;
  border:1px solid rgba(148,163,184,.16)!important;
  background:rgba(255,255,255,.04)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.order_table_head{
  background:rgba(255,255,255,.02)!important;
  border-style:dashed!important;
  font-size:10.5px!important;text-transform:uppercase;letter-spacing:.08em;
  color:#94A3B8!important;font-weight:800;
}
.order_table_head > div{color:#94A3B8!important;font-weight:800!important;text-align:left!important;padding:0!important;border:0!important}
.order_table_row{color:#e2e8f0}
.order_table_row:hover{transform:translateY(-1px);border-color:rgba(139,92,246,.32)!important;box-shadow:0 10px 22px rgba(0,0,0,.2)}
.order_table_row > div{padding:0!important;border:0!important;min-width:0;font-size:12.5px}
.order_table_row .body__id{font-weight:900;color:#fff}
.order_table_row .body__id span{white-space:nowrap}
.order_table_row .body__id .btn-actions{margin-left:6px;padding:1px 8px;font-size:9px;border-radius:999px;background:rgba(139,92,246,.22);color:#cdb5ff!important;border:1px solid rgba(139,92,246,.32);letter-spacing:.06em;text-transform:uppercase}
.order_table_row .body__date{color:#94A3B8;font-size:11.5px}
.order_table_row .body__link{min-width:0;overflow:hidden}
.order_table_row .body__link .link__order{display:flex;align-items:center;gap:7px;min-width:0}
.order_table_row .body__link .link__order > span{width:24px;height:24px;border-radius:8px;background:rgba(99,102,241,.14);color:#a8c0ff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.order_table_row .body__link .link__order a{color:#dde6f5;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;min-width:0;flex:1}
.order_table_row .body__link .link__order a:hover{color:#6366F1}
.order_table_row .body__price{font-weight:800;color:#fff}
.order_table_row .body__startcount,
.order_table_row .body__quantity{color:#dde6f5;font-weight:600}
.order_table_row .body__services{color:#cbd5e1;font-size:12px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.order_table_row .body__quickaction{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.order_table_row .body__quickaction .btn,
.order_table_row .body__quickaction button{
  padding:6px 12px!important;border-radius:10px!important;font-size:11px!important;font-weight:800!important;
  border:0!important;white-space:nowrap;letter-spacing:.02em;
}
.order_table_row .body__quickaction .btn-success{background:linear-gradient(135deg,#22c55e,#16a34a)!important;color:#fff!important;box-shadow:0 6px 14px rgba(34,197,94,.28)!important}
.order_table_row .body__quickaction .btn-action.dropdown-toggle{background:rgba(148,163,184,.18)!important;color:#cbd5e1!important}
.order_table_row .body__quickaction .btn-info{background:rgba(99,102,241,.18)!important;color:#a8c0ff!important}
.order_table_row .body__quickaction .bg-danger{background:linear-gradient(135deg,#ef4444,#dc2626)!important;color:#fff!important;box-shadow:0 6px 14px rgba(239,68,68,.28)!important}

/* Light theme orders : override COMPLET (sans ca, plusieurs cellules restent en blanc sur blanc) */
body.daymode .order_table_head,
body.daymode .order_table_row{
  background:#fff!important;
  border-color:#e2e8f0!important;
  color:#334155;
}
body.daymode .order_table_row:hover{
  border-color:rgba(139,92,246,.4)!important;
  box-shadow:0 10px 22px rgba(15,23,41,.06)!important;
}
body.daymode .order_table_head,
body.daymode .order_table_head > div{color:#64748b!important}
/* Cellules : tout le texte doit passer en teinte sombre */
body.daymode .order_table_row .body__id{color:#0f172a!important}
body.daymode .order_table_row .body__price{color:#0f172a!important}
body.daymode .order_table_row .body__date{color:#64748b!important}
body.daymode .order_table_row .body__startcount,
body.daymode .order_table_row .body__quantity{color:#334155!important}
body.daymode .order_table_row .body__services{color:#475569!important}
/* Lien + icone plateforme */
body.daymode .order_table_row .body__link .link__order a{color:#334155!important}
body.daymode .order_table_row .body__link .link__order a:hover{color:#6366F1!important}
body.daymode .order_table_row .body__link .link__order > span{
  background:rgba(99,102,241,.1)!important;color:#6366F1!important;
}
/* Badge API */
body.daymode .order_table_row .body__id .btn-actions{
  background:rgba(139,92,246,.1)!important;color:var(--brand-hover)!important;border-color:rgba(139,92,246,.24)!important;
}
/* Barre de progression (.tl-prog-*) : depend de var(--text)/--muted qui peuvent rester clairs */
body.daymode .tl-prog-top{color:#64748b!important}
body.daymode .tl-prog-top b{color:#0f172a!important}
body.daymode .tl-prog-bar{background:rgba(15,23,41,.08)!important}
/* Mobile : labels ::before + lien + carte */
@media (max-width:900px){
  body.daymode .order_table_row{
    background:#fff!important;border-color:#e2e8f0!important;
  }
  body.daymode .order_table_row > div::before{color:#64748b!important}
  body.daymode .order_table_row .body__link{
    background:#f8fafc!important;border-color:#e2e8f0!important;
  }
  body.daymode .order_table_row .body__link .link__order a{color:#334155!important}
  body.daymode .order_table_row .body__id{color:#0f172a!important}
}

/* ============================================================================
   Mobile orders (< 900px) : layout carte verticale propre, tient compte du CSS
   legacy (go2u33qhqj7bkfdo.css) qui definit ses propres grid-area-names (id,
   date, link, price, quantity, statcount, remain, services, status, actions)
   avec ::before position:absolute. On neutralise ce position:absolute, on
   utilise LES MEMES noms de zones, et on force notre grid-template-areas.
     tablette 900-641 : 2 cols (metrics 2x2)
     phone    <=640   : 1 col  (label a gauche, valeur a droite)
   ========================================================================= */

@media (max-width:900px){
  /* === RESET complet des styles legacy === */
  .order_table_head{display:none!important}
  .order__table{
    grid-template-columns:1fr!important;
    display:flex!important;flex-direction:column;gap:10px;
    background:transparent!important;padding:0!important;
  }
  .order_table_row{
    display:grid!important;
    padding:16px!important;gap:10px;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-areas:
      "id       status"
      "date     date"
      "link     link"
      "price    quantity"
      "statcount remain"
      "services services"
      "actions  actions" !important;
    align-items:stretch;
    background:rgba(255,255,255,.035)!important;
    border:1px solid rgba(148,163,184,.14)!important;
    border-radius:14px!important;
    margin-bottom:0!important;
    word-break:break-word;overflow-wrap:anywhere;
  }
  .order_table_row > div{
    padding:0!important;border:0!important;min-width:0;overflow:hidden;
    position:static!important;  /* annule le position:relative legacy */
    padding-top:0!important;    /* annule le padding-top:20px legacy */
    text-align:left!important;
    width:auto!important;
  }
  /* Neutralise totalement les ::before absolus du legacy avant de reposer les notres */
  .order_table_row > div::before{
    position:static!important;top:auto!important;left:auto!important;width:auto!important;
    text-align:left!important;color:#94A3B8!important;font-size:9.5px!important;
    font-weight:800!important;text-transform:uppercase;letter-spacing:.08em;
    display:block;line-height:1;margin:0!important;padding:0!important;
    white-space:nowrap;
  }

  /* === Header : ID + statut === */
  .order_table_row .body__id{
    grid-area:id!important;font-size:13px;font-weight:900;color:#fff;
    display:flex!important;align-items:center;gap:6px;flex-wrap:wrap;
  }
  .order_table_row .body__id > span{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
  .order_table_row .body__id .btn-actions{
    font-size:9px!important;padding:1px 7px!important;flex-shrink:0;margin:0!important;
  }
  .order_table_row .body__status{
    grid-area:status!important;justify-self:end;overflow:visible!important;
  }
  .order_table_row .body__status .status_capsule{padding:5px 11px!important;font-size:10.5px!important}

  /* === Date === */
  .order_table_row .body__date{
    grid-area:date!important;font-size:11px;color:#94A3B8;font-weight:600;
  }
  .order_table_row .body__date::before{content:"" !important;display:none!important}

  /* === Lien === */
  .order_table_row .body__link{
    grid-area:link!important;padding:10px 12px!important;
    background:rgba(15,23,41,.4)!important;
    border:1px solid rgba(148,163,184,.12)!important;
    border-radius:10px!important;overflow:hidden;
  }
  .order_table_row .body__link::before{content:"" !important;display:none!important}
  .order_table_row .body__link .link__order{
    display:flex!important;align-items:center;gap:9px;min-width:0;
  }
  .order_table_row .body__link .link__order > span{
    width:26px;height:26px;border-radius:7px;flex-shrink:0;
  }
  .order_table_row .body__link .link__order > span svg{width:12px;height:12px}
  .order_table_row .body__link .link__order a{
    font-size:11.5px!important;min-width:0;flex:1;
    display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    text-decoration:none!important;font-weight:600;color:#cbd5e1!important;
  }

  /* === Metrics : carte simple, label en ligne a gauche, valeur a droite === */
  .order_table_row .body__price,
  .order_table_row .body__quantity,
  .order_table_row .body__startcount,
  .order_table_row .body__remain{
    display:flex!important;flex-direction:row!important;
    align-items:center!important;justify-content:space-between!important;
    gap:10px!important;
    padding:9px 12px!important;border-radius:10px!important;
    background:rgba(255,255,255,.04)!important;
    border:1px solid rgba(148,163,184,.1)!important;
    font-size:13px!important;font-weight:800!important;color:#fff!important;line-height:1.2!important;
  }
  .order_table_row .body__price    {grid-area:price!important}
  .order_table_row .body__quantity {grid-area:quantity!important}
  .order_table_row .body__startcount{grid-area:statcount!important}
  .order_table_row .body__remain   {grid-area:remain!important}

  .order_table_row .body__price::before    {content:"Montant" !important}
  .order_table_row .body__quantity::before {content:"Qte" !important}
  .order_table_row .body__startcount::before{content:"Depart" !important}
  .order_table_row .body__remain::before   {content:"Restant" !important}

  /* === Restant : mode vertical pour la barre de progression === */
  .order_table_row .body__remain{
    flex-direction:column!important;align-items:stretch!important;
    justify-content:flex-start!important;gap:4px!important;
  }
  .order_table_row .body__remain::before{margin-bottom:2px!important}
  .order_table_row .body__remain .tl-prog-wrap{
    gap:3px;align-items:stretch;width:100%;min-width:0;display:flex!important;flex-direction:column;
  }
  .order_table_row .body__remain .tl-prog-wrap .tl-prog-top{
    font-size:10px;gap:6px;min-width:0;
    display:flex!important;flex-direction:row!important;justify-content:space-between;
  }
  .order_table_row .body__remain .tl-prog-wrap .tl-prog-top:first-child{display:none!important}
  .order_table_row .body__remain .tl-prog-bar{
    max-width:none!important;width:100%;height:4px;
  }
  .order_table_row .body__remain .tl-prog-wrap .tl-prog-top b{
    font-size:11px;white-space:nowrap;
  }

  /* === Service : pill discrete === */
  .order_table_row .body__services{
    grid-area:services!important;font-size:11.5px;color:#cbd5e1!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    padding:7px 11px!important;border-radius:8px!important;
    background:rgba(139,92,246,.1)!important;
    border:1px solid rgba(139,92,246,.18)!important;
    display:block!important;
  }
  .order_table_row .body__services::before{content:"" !important;display:none!important}
  .order_table_row .body__services:hover{color:#fff!important}

  /* === Actions === */
  .order_table_row .body__quickaction{
    grid-area:actions!important;justify-self:stretch!important;
    display:flex!important;gap:6px;flex-wrap:wrap;justify-content:flex-end;
  }
  .order_table_row .body__quickaction::before{content:"" !important;display:none!important}
  .order_table_row .body__quickaction:empty{display:none!important}
  .order_table_row .body__quickaction .btn,
  .order_table_row .body__quickaction button{
    padding:6px 12px!important;font-size:10.5px!important;border-radius:8px!important;
    margin:0!important;
  }
}

/* Micro <=420px : typo un cran plus petite, action full-width */
@media (max-width:420px){
  .order_table_row{padding:13px!important;gap:8px!important}
  .order_table_row .body__id{font-size:13px!important}
  .order_table_row .body__price,
  .order_table_row .body__quantity,
  .order_table_row .body__startcount,
  .order_table_row .body__remain{font-size:12.5px!important;padding:8px 10px!important}
  .order_table_row .body__price::before,
  .order_table_row .body__quantity::before,
  .order_table_row .body__startcount::before,
  .order_table_row .body__remain::before{font-size:9px!important}
  .order_table_row .body__quickaction{justify-content:stretch!important}
  .order_table_row .body__quickaction .btn,
  .order_table_row .body__quickaction button{flex:1}
}

/* -------- Plateformes : icones colorees detectees en JS via data-tl-plat -------- */
.order_table_row .body__link .link__order > span{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(148,163,184,.14);color:#cbd5e1;
  transition:background .18s,color .18s;
}
.order_table_row .body__link .link__order > span svg{width:14px;height:14px}
.order_table_row .body__link .link__order > span[data-tl-plat="facebook"]{background:rgba(24,119,242,.18);color:#1877f2}
.order_table_row .body__link .link__order > span[data-tl-plat="instagram"]{background:linear-gradient(135deg,rgba(225,48,108,.22),rgba(254,176,64,.22));color:#e1306c}
.order_table_row .body__link .link__order > span[data-tl-plat="twitter"]{background:rgba(15,23,41,.55);color:#e7e9ea;border:1px solid rgba(255,255,255,.14)}
.order_table_row .body__link .link__order > span[data-tl-plat="youtube"]{background:rgba(255,0,0,.18);color:#ff0033}
.order_table_row .body__link .link__order > span[data-tl-plat="tiktok"]{background:rgba(0,0,0,.55);color:#ff0050;border:1px solid rgba(37,244,238,.25)}
.order_table_row .body__link .link__order > span[data-tl-plat="telegram"]{background:rgba(36,161,222,.18);color:#24a1de}
.order_table_row .body__link .link__order > span[data-tl-plat="whatsapp"]{background:rgba(37,211,102,.18);color:#25d366}
.order_table_row .body__link .link__order > span[data-tl-plat="spotify"]{background:rgba(30,215,96,.18);color:#1ed760}
.order_table_row .body__link .link__order > span[data-tl-plat="snapchat"]{background:rgba(255,252,0,.2);color:#f7d400}
.order_table_row .body__link .link__order > span[data-tl-plat="pinterest"]{background:rgba(230,0,35,.18);color:#e60023}
.order_table_row .body__link .link__order > span[data-tl-plat="linkedin"]{background:rgba(10,102,194,.18);color:#0a66c2}
.order_table_row .body__link .link__order > span[data-tl-plat="discord"]{background:rgba(88,101,242,.2);color:#8893f2}
.order_table_row .body__link .link__order > span[data-tl-plat="twitch"]{background:rgba(145,70,255,.2);color:#9146ff}
.order_table_row .body__link .link__order > span[data-tl-plat="soundcloud"]{background:rgba(255,85,0,.2);color:#ff5500}
.order_table_row .body__link .link__order > span[data-tl-plat="threads"]{background:rgba(15,23,41,.6);color:#fff;border:1px solid rgba(255,255,255,.18)}
.order_table_row .body__link .link__order > span[data-tl-plat="reddit"]{background:rgba(255,69,0,.2);color:#ff4500}
.order_table_row .body__link .link__order > span[data-tl-plat="website"]{background:rgba(99,102,241,.18);color:#a8c0ff}

/* -------- Addfunds : paiement Orange Money, style Anthropic (v1.2.4) -------- */
/* Shell centre - la carte n'est jamais full-width. Ambiance sobre, glass leger. */
.tl-pay-shell{
  display:flex;justify-content:center;padding:0 16px 48px;
}
.tl-pay-card{
  width:100%;max-width:520px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02));
  border:1px solid rgba(148,163,184,.16);
  border-radius:20px;padding:24px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

.tl-pay-field{display:flex;flex-direction:column;gap:8px}
.tl-pay-amount-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8;margin:0}

.tl-pay-amount{
  display:flex;align-items:stretch;gap:0;
  background:rgba(15,23,41,.55);border:1.5px solid rgba(148,163,184,.2);
  border-radius:14px;overflow:hidden;transition:border .15s,box-shadow .15s,background .15s;
}
.tl-pay-amount:focus-within{border-color:var(--brand-hover);background:rgba(15,23,41,.7);box-shadow:0 0 0 4px rgba(139,92,246,.18)}
.tl-pay-amount input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;
  font-size:26px;font-weight:800;padding:14px 16px;font-family:inherit;letter-spacing:-.01em;
}
.tl-pay-amount input::placeholder{color:rgba(255,255,255,.28);font-weight:700}
.tl-pay-amount .tl-pay-amount-unit{
  display:inline-flex;align-items:center;justify-content:center;padding:0 16px;
  background:var(--brand-grad);color:#fff;
  font-size:11.5px;font-weight:900;letter-spacing:.1em;min-width:56px;
}

/* Chips rapides : pills horizontales compactes, pas de cards massives */
.tl-pay-quick{
  display:flex;flex-wrap:wrap;gap:6px;
}
.tl-pay-quick-btn{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:999px;cursor:pointer;transition:.15s ease;
  background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.18);
  color:#e2e8f0;font-family:inherit;font-size:13px;font-weight:800;line-height:1;
  letter-spacing:-.005em;white-space:nowrap;
}
.tl-pay-quick-btn:hover{
  background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.45);
  color:#fff;transform:translateY(-1px);
}
.tl-pay-quick-btn.popular{
  background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(139,92,246,.16));
  border-color:rgba(139,92,246,.5);color:#fff;
}
.tl-pay-quick-unit{font-size:9.5px;font-weight:800;color:#94A3B8;letter-spacing:.08em;text-transform:uppercase}
.tl-pay-quick-btn.popular .tl-pay-quick-unit{color:rgba(255,255,255,.75)}
.tl-pay-quick-dot{
  width:5px;height:5px;border-radius:50%;
  background:#a78bfa;margin-left:2px;
  box-shadow:0 0 0 3px rgba(167,139,250,.18);
}

/* Frais + total : toujours 2 colonnes, bloc secondaire discret */
.tl-pay-fee-row{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-top:2px;
}
.tl-pay-fee-cell{
  background:rgba(15,23,41,.45);border:1px solid rgba(148,163,184,.12);
  border-radius:12px;padding:9px 12px;min-width:0;
}
.tl-pay-fee-cell label{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:#94A3B8;margin:0 0 3px;display:block;
}
.tl-pay-fee-cell input{
  width:100%;border:0;outline:0;background:transparent;
  color:#fff;font-size:15px;font-weight:800;font-family:inherit;padding:0;
  letter-spacing:-.005em;
}

/* CTA principal : bouton premium, gradient discret */
.tl-pay-submit{
  width:100%;padding:14px 16px;border:0;border-radius:14px;cursor:pointer;
  background:var(--brand-grad);color:#fff;
  font-size:14px;font-weight:800;letter-spacing:-.005em;font-family:inherit;
  box-shadow:0 10px 22px rgba(99,102,241,.28),0 2px 0 rgba(255,255,255,.06) inset;
  transition:transform .15s ease,box-shadow .15s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-top:4px;
}
.tl-pay-submit:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(99,102,241,.38),0 2px 0 rgba(255,255,255,.1) inset}
.tl-pay-submit:active{transform:translateY(0)}

.tl-pay-note{
  display:flex;align-items:flex-start;gap:8px;
  font-size:11.5px;color:#94A3B8;line-height:1.55;
  padding:9px 12px;border-radius:10px;
  background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.14);
  margin-top:4px;
}
.tl-pay-note b{color:#cbd5e1;font-weight:800}
.tl-pay-note svg{flex-shrink:0;margin-top:1px;color:var(--brand-hover)}

/* Light theme pay */
body.daymode .tl-pay-card{background:#fff;border-color:#e2e8f0;box-shadow:0 20px 50px rgba(15,23,41,.06)}
body.daymode .tl-pay-amount{background:#f8fafc;border-color:#e2e8f0}
body.daymode .tl-pay-amount input{color:#0f172a}
body.daymode .tl-pay-amount input::placeholder{color:#94a3b8}
body.daymode .tl-pay-quick-btn{background:#fff;border-color:#e2e8f0;color:#334155}
body.daymode .tl-pay-quick-btn.popular{color:#0f172a}
body.daymode .tl-pay-fee-cell{background:#f8fafc;border-color:#e2e8f0}
body.daymode .tl-pay-fee-cell input{color:#0f172a}
body.daymode .tl-pay-note b{color:#0f172a}

/* Mobile : carte colle aux bords, typo input un cran plus petite */
@media (max-width:560px){
  .tl-pay-shell{padding:0 12px 32px}
  .tl-pay-card{padding:18px;border-radius:18px;gap:12px}
  .tl-pay-amount input{font-size:22px;padding:12px 14px}
  .tl-pay-amount .tl-pay-amount-unit{padding:0 12px;min-width:48px;font-size:11px}
  .tl-pay-fee-row{grid-template-columns:1fr}
  .tl-pay-submit{padding:13px 14px}
}

/* -------- Modal historique paiements : design KPI unifie (v1.2.4) -------- */
.tl-hist-modal .modal-dialog{max-width:560px}
.tl-hist-modal .modal-content.tl-hist-shell{
  background:linear-gradient(180deg,rgba(15,23,41,.96),rgba(24,32,56,.96))!important;
  border:1px solid rgba(139,92,246,.24)!important;
  border-radius:20px!important;
  box-shadow:0 22px 60px rgba(0,0,0,.45)!important;
  overflow:hidden;color:#e2e8f0;padding:0!important;
}
.tl-hist-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 22px;
  background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(139,92,246,.14));
  border-bottom:1px solid rgba(139,92,246,.2);
}
.tl-hist-head-left{display:flex;align-items:center;gap:13px;min-width:0;flex:1}
.tl-hist-head-ico{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;
  background:var(--brand-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px rgba(99,102,241,.32);
}
.tl-hist-head-info{min-width:0}
.tl-hist-head-eyebrow{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:#94A3B8;margin-bottom:2px;
}
.tl-hist-head-title{
  font-size:17px;font-weight:900;color:#fff;margin:0;letter-spacing:-.01em;
  line-height:1.2;
}
.tl-hist-close{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:#dde6f5;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:.18s;
}
.tl-hist-close:hover{background:rgba(255,255,255,.15);color:#fff;transform:rotate(90deg)}

/* Mini KPI strip dans le modal */
.tl-hist-kpis{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  padding:16px 22px;
  border-bottom:1px solid rgba(148,163,184,.1);
}
.tl-hist-kpi{
  display:flex;flex-direction:column;gap:3px;
  padding:10px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.14);
}
.tl-hist-kpi-label{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:#94A3B8;line-height:1;
}
.tl-hist-kpi-value{
  font-size:16px;font-weight:900;color:#fff;line-height:1.15;word-break:break-word;
}

/* Body + liste */
.tl-hist-body{
  padding:16px 18px 20px;max-height:55vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.24) transparent;
}
.tl-hist-body::-webkit-scrollbar{width:6px}
.tl-hist-body::-webkit-scrollbar-thumb{background:rgba(148,163,184,.24);border-radius:999px}
.tl-hist-list{display:flex;flex-direction:column;gap:8px}
.tl-hist-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.12);
  transition:.18s;
}
.tl-hist-item:hover{background:rgba(139,92,246,.09);border-color:rgba(139,92,246,.3)}
.tl-hist-item-ico{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:rgba(99,102,241,.16);color:#a8c0ff;
  display:flex;align-items:center;justify-content:center;
}
.tl-hist-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tl-hist-item-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;
}
.tl-hist-item-method{
  font-size:13px;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;
}
.tl-hist-item-amount{
  font-size:13.5px;font-weight:900;color:#a78bfa;white-space:nowrap;flex-shrink:0;
  letter-spacing:-.01em;
}
.tl-hist-item-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10.5px;color:#94A3B8;
}
.tl-hist-item-id{
  font-weight:800;color:var(--brand-hover);letter-spacing:.04em;
  padding:2px 7px;border-radius:999px;
  background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.2);
}
.tl-hist-item-date{font-weight:600}

/* Empty state */
.tl-hist-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:40px 20px;
}
.tl-hist-empty-ico{
  width:58px;height:58px;border-radius:16px;
  background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(139,92,246,.14));
  border:1px solid rgba(139,92,246,.22);color:#a8c0ff;
  display:flex;align-items:center;justify-content:center;margin-bottom:4px;
}
.tl-hist-empty-title{font-size:14px;font-weight:800;color:#fff}
.tl-hist-empty-sub{font-size:12px;color:#94A3B8;line-height:1.5;max-width:320px}

/* Light theme */
body.daymode .tl-hist-modal .modal-content.tl-hist-shell{
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
  border-color:#e2e8f0!important;color:#0f172a;
}
body.daymode .tl-hist-head{
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.08));
  border-bottom-color:#e2e8f0;
}
body.daymode .tl-hist-head-title,
body.daymode .tl-hist-kpi-value,
body.daymode .tl-hist-item-method,
body.daymode .tl-hist-empty-title{color:#0f172a}
body.daymode .tl-hist-kpi,
body.daymode .tl-hist-item{background:#fff;border-color:#e2e8f0}
body.daymode .tl-hist-item:hover{background:rgba(139,92,246,.06);border-color:rgba(139,92,246,.3)}
body.daymode .tl-hist-close{background:#f1f5f9;border-color:#e2e8f0;color:#334155}

/* Mobile : le modal s'adapte */
@media (max-width:560px){
  .tl-hist-modal .modal-dialog{max-width:none;margin:12px}
  .tl-hist-head{padding:16px 18px}
  .tl-hist-head-title{font-size:15px}
  .tl-hist-head-ico{width:38px;height:38px;border-radius:11px}
  .tl-hist-kpis{padding:12px 18px;gap:8px}
  .tl-hist-kpi{padding:9px 12px}
  .tl-hist-kpi-value{font-size:14px}
  .tl-hist-body{padding:14px 16px 18px;max-height:60vh}
  .tl-hist-item{padding:10px 12px;gap:10px}
  .tl-hist-item-ico{width:32px;height:32px;border-radius:9px}
  .tl-hist-item-method{font-size:12.5px}
  .tl-hist-item-amount{font-size:13px}
}

/* -------- Dashboard mobile -------- */
@media (max-width:820px){
  .tl-dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-dash-hero{padding:18px}
  .tl-dash-hero-cta{width:100%;justify-content:center}
  .tl-dash-hero-name{font-size:20px}
  .tl-dash-hero-ico{width:54px;height:54px;border-radius:14px}
  .tl-dash-card{padding:18px}
}
@media (max-width:480px){
  /* [v1.2.6b] 2x2 force + icones INTERIEURES agrandies pour meilleure visibilite */
  .tl-dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .tl-dash-kpi{padding:12px 13px;gap:11px;border-radius:14px}
  .tl-dash-kpi-ico{width:40px;height:40px;border-radius:11px}
  .tl-dash-kpi-ico svg{width:22px!important;height:22px!important}
  .tl-dash-kpi-label{font-size:10px;letter-spacing:.06em;margin-bottom:2px;line-height:1.2}
  .tl-dash-kpi-value{font-size:17px;letter-spacing:-.01em}
  .tl-dash-kpi-sub{gap:4px;margin-top:2px}
  .tl-dash-card-head{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:380px){
  /* Micro-mobile : toujours 2x2, icones lisibles */
  .tl-dash-kpis{gap:6px}
  .tl-dash-kpi{padding:10px 11px;gap:9px;border-radius:12px}
  .tl-dash-kpi-ico{width:36px;height:36px;border-radius:10px}
  .tl-dash-kpi-ico svg{width:20px!important;height:20px!important}
  .tl-dash-kpi-label{font-size:9.5px}
  .tl-dash-kpi-value{font-size:15px}
}

/* ============================================================================
   [v1.2.5] ORDER CARD Pro Max : carte /neworder avec steps, selects,
   totaliseur et CTA. Touch-friendly (48px+, 16px font iOS zoom-free).
   ========================================================================== */

/* ---- Carte conteneur ---- */
.tl-order-card.card_auth_1{
  background:linear-gradient(180deg,rgba(17,24,39,.72),rgba(11,17,32,.72))!important;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(148,163,184,.18)!important;
  border-radius:22px!important;
  box-shadow:0 18px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;position:relative;
}
.tl-order-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,.5) 30%,rgba(139,92,246,.5) 70%,transparent);
  pointer-events:none;
}

/* ---- Header/onglets : design pill premium ---- */
.tl-order-card .card-header{
  background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.12))!important;
  border-bottom:1px solid rgba(148,163,184,.14)!important;
  border-radius:22px 22px 0 0!important;
  height:auto!important;max-height:none!important;
  padding:14px 18px!important;
}
.tl-order-card .card-header .header_buttons{padding:0!important}
.tl-order-tabs{gap:8px!important;margin:0!important;padding:0!important;list-style:none;flex-wrap:wrap}
.tl-order-tabs .nav-item{margin:0!important}
.tl-order-tabs .nav-link{
  display:inline-flex!important;align-items:center;gap:8px;
  padding:10px 16px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(148,163,184,.14)!important;
  color:#cbd5e1!important;
  font-weight:700;font-size:13px;letter-spacing:-.005em;
  transition:.18s ease;cursor:pointer;
}
.tl-order-tabs .nav-link:hover{
  background:rgba(139,92,246,.12)!important;
  border-color:rgba(139,92,246,.28)!important;
  color:#fff!important;transform:translateY(-1px);
}
.tl-order-tabs .nav-link.active{
  background:var(--brand-grad)!important;
  border-color:transparent!important;color:#fff!important;
  box-shadow:0 8px 20px rgba(99,102,241,.32);
}
.tl-order-tabs .nav-link .icon{
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  line-height:0;font-size:18px;color:inherit!important;background:transparent!important;
}
.tl-order-tabs .nav-link .icon iconify-icon{font-size:18px;color:inherit}
.tl-order-tabs .nav-link .text{
  font-size:13px!important;font-weight:700!important;color:inherit!important;
  display:inline-block!important;
}

/* ---- Card body : padding confortable ---- */
.tl-order-card .card-body{
  background:transparent!important;border:0!important;
  padding:22px!important;
}
@media (max-width:575px){.tl-order-card .card-body{padding:16px!important}}

/* ---- Champ a etape : label (1/2/3/4) + input ---- */
.tl-field-grp{display:flex;flex-direction:column;gap:8px}
.tl-field-label{
  display:flex!important;align-items:center;gap:10px;
  font-size:12px!important;font-weight:800!important;
  color:#94A3B8!important;
  text-transform:uppercase;letter-spacing:.1em;
  margin:0!important;padding:0!important;
}
.tl-field-step{
  width:22px;height:22px;border-radius:50%;
  background:var(--brand-grad);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;
  box-shadow:0 4px 10px rgba(99,102,241,.3);
  flex-shrink:0;
}
.tl-field-labeltxt{color:#cbd5e1;letter-spacing:.08em}

/* ---- Inputs & selects : 48px min + 16px font pour eviter le zoom iOS ---- */
.tl-order-card .form-control,
.tl-order-card .tl-select,
.tl-order-card input[type=text],
.tl-order-card input[type=tel],
.tl-order-card input[type=number],
.tl-order-card input[type=url],
.tl-order-card textarea,
.tl-order-card select{
  min-height:48px!important;
  padding:12px 14px!important;
  background:rgba(15,23,41,.5)!important;
  border:1.5px solid rgba(148,163,184,.2)!important;
  border-radius:12px!important;
  color:#F1F5F9!important;
  font-size:15px!important;font-weight:500!important;
  font-family:inherit;
  outline:none!important;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  width:100%;
  box-shadow:none!important;
  margin-top:0!important;
}
@media (max-width:575px){
  .tl-order-card .form-control,
  .tl-order-card .tl-select,
  .tl-order-card input,
  .tl-order-card textarea,
  .tl-order-card select{font-size:16px!important}
}
.tl-order-card .form-control::placeholder,
.tl-order-card input::placeholder{color:#94A3B8!important;opacity:1}
.tl-order-card .form-control:focus,
.tl-order-card input:focus,
.tl-order-card select:focus,
.tl-order-card textarea:focus{
  border-color:var(--brand-hover)!important;
  background:rgba(15,23,41,.7)!important;
  box-shadow:0 0 0 4px rgba(139,92,246,.16)!important;
}

/* Select natif : fleche custom (si le widget data-select n'est pas injecte) */
.tl-order-card select.form-control{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:40px!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3b5d4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
}

/* ---- Custom select widget (Select2-like / jQuery Select) ---- */
.tl-order-card .select2-container,
.tl-order-card .dropdown.select-toggle{width:100%!important}
.tl-order-card .select2-container--default .select2-selection--single,
.tl-order-card .select2-selection,
.tl-order-card .dropdown.select-toggle .btn{
  min-height:48px!important;height:auto!important;
  background:rgba(15,23,41,.5)!important;
  border:1.5px solid rgba(148,163,184,.2)!important;
  border-radius:12px!important;
  padding:0 14px!important;
  display:flex!important;align-items:center;
  color:#F1F5F9!important;font-size:15px!important;font-weight:500!important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tl-order-card .select2-container--open .select2-selection,
.tl-order-card .select2-container--focus .select2-selection,
.tl-order-card .select2-container .select2-selection:focus{
  border-color:var(--brand-hover)!important;
  box-shadow:0 0 0 4px rgba(139,92,246,.16)!important;
}
.tl-order-card .select2-selection__rendered{
  color:#F1F5F9!important;padding:0!important;line-height:46px!important;font-size:15px!important;
}
.tl-order-card .select2-selection__arrow{
  height:46px!important;top:0!important;right:10px!important;width:22px!important;
}
.tl-order-card .select2-selection__arrow b{border-color:#94A3B8 transparent transparent transparent!important}

/* [v1.2.6b] Dropdown : fond CLAIR avec specificite ELEVEE pour gagner sur les themes Simplify
   (Dark.css, Blue.css, etc.) qui appliquent leur propre fond sombre via .select2-container--default.
   Utilise html body comme prefixe pour forcer la specificite. */
html body .select2-dropdown,
html body .select2-container--open .select2-dropdown,
html body .select2-container--default .select2-dropdown,
html body .select-dropdown,
html body .dropdown-menu.select2-dropdown{
  background:#ffffff!important;
  border:1px solid rgba(139,92,246,.45)!important;
  border-radius:14px!important;
  box-shadow:0 22px 50px rgba(0,0,0,.55)!important;
  overflow:hidden;
  color:#1e293b!important;
}
html body .select2-dropdown .select2-search--dropdown{padding:10px 12px!important;background:#f8fafc!important;border-bottom:1px solid #e2e8f0!important}
html body .select2-dropdown .select2-search__field{
  background:#fff!important;
  border:1px solid #e2e8f0!important;
  border-radius:10px!important;
  color:#0f172a!important;
  padding:10px 12px!important;font-size:14px!important;min-height:40px;
  outline:none!important;
}
html body .select2-dropdown .select2-search__field:focus{border-color:var(--brand-hover)!important;box-shadow:0 0 0 3px rgba(139,92,246,.18)!important}
html body .select2-dropdown .select2-results,
html body .select2-container--default .select2-results{padding:6px!important;max-height:360px!important;background:#ffffff!important}
/* [v1.2.6b] Option : TEXTE NOIR forcément visible sur fond blanc. Specificite renforcee avec html body
   pour gagner sur .select2-container--default .select2-results__option des themes Simplify. */
html body .select2-dropdown .select2-results__option,
html body .select2-container--default .select2-results__option{
  padding:12px 14px!important;border-radius:10px!important;
  color:#1e293b!important;font-size:13.5px!important;font-weight:500;
  margin:3px 0;line-height:1.4;
  background:#ffffff!important;
  border:1px solid #e2e8f0!important;
  transition:background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  position:relative;
}
html body .select2-dropdown .select2-results__option:not(:last-child){margin-bottom:4px}
/* Option SELECTIONNEE : violet franc + texte blanc */
html body .select2-dropdown .select2-results__option[aria-selected=true],
html body .select2-container--default .select2-results__option[aria-selected=true]{
  background:#2563EB!important;
  border-color:var(--brand-hover)!important;
  color:#ffffff!important;font-weight:700;
  box-shadow:0 4px 12px rgba(139,92,246,.35);
}
html body .select2-dropdown .select2-results__option[aria-selected=true]::after{
  content:"\2713";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:#ffffff;font-weight:900;font-size:16px;
}
/* Survol / clavier : fond bleu leger */
html body .select2-dropdown .select2-results__option--highlighted,
html body .select2-container--default .select2-results__option--highlighted,
html body .select2-container--default .select2-results__option:hover{
  background:#eef2ff!important;
  border-color:#c7d2fe!important;
  color:#312e81!important;transform:translateX(2px);
}
html body .select2-dropdown .select2-results__option[aria-selected=true].select2-results__option--highlighted,
html body .select2-container--default .select2-results__option[aria-selected=true]:hover{
  background:#6d4cfb!important;color:#fff!important;
}
/* [v1.2.6b] Force aussi les SPAN et LI enfants a heriter la couleur pour eviter l'heritage theme */
html body .select2-dropdown .select2-results__option *,
html body .select2-container--default .select2-results__option *{color:inherit!important}
.select2-dropdown .select2-results__option--group,
.select2-dropdown .select2-results__group{
  color:#94A3B8!important;font-size:10.5px!important;font-weight:800!important;
  text-transform:uppercase;letter-spacing:.1em;padding:8px 12px 4px!important;
}
.select2-dropdown::-webkit-scrollbar,
.select2-results::-webkit-scrollbar{width:6px}
.select2-dropdown::-webkit-scrollbar-thumb,
.select2-results::-webkit-scrollbar-thumb{background:rgba(148,163,184,.24);border-radius:999px}

/* ---- Lien hint (texte sous service) ---- */
.tl-order-card .tl-link-hint{
  font-size:12px;color:#94A3B8;
  margin-top:6px!important;padding:9px 12px!important;
  border-radius:10px!important;
  background:rgba(99,102,241,.06)!important;
  border:1px solid rgba(99,102,241,.14)!important;
  line-height:1.5;
}
.tl-order-card .tl-link-hint strong{color:#dde6f5;font-weight:700}
.tl-order-card .tl-link-hint em{color:#a8c0ff;font-style:normal;background:rgba(99,102,241,.1);padding:1px 6px;border-radius:4px}

/* ---- Description du service ---- */
.tl-order-card .tl-svc-desc{
  background:rgba(15,23,41,.5)!important;
  border:1px solid rgba(148,163,184,.16)!important;
  border-radius:12px!important;
  padding:12px 14px!important;
  font-size:13px;color:#cbd5e1;line-height:1.6;
}

/* ---- Totaliseur cout ---- */
.tl-cost-wrap{
  margin-top:8px!important;padding:16px 18px!important;
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.08))!important;
  border:1px solid rgba(139,92,246,.22)!important;
  border-radius:16px!important;
  gap:10px!important;
}
.tl-cost-box{
  position:relative;display:flex;align-items:center;
  background:rgba(15,23,41,.55);
  border:1.5px solid rgba(148,163,184,.2);
  border-radius:12px;
  padding:0;overflow:hidden;
}
.tl-cost-input.form-control.tl-cost-input{
  flex:1;min-width:0;padding:14px 16px!important;padding-right:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  color:#fff!important;
  font-size:26px!important;font-weight:900!important;
  letter-spacing:-.02em;line-height:1.1;
  min-height:56px!important;
}
.tl-cost-input.form-control.tl-cost-input:focus{box-shadow:none!important;border:0!important;background:transparent!important}
.tl-cost-currency{
  padding:0 16px;font-size:14px;font-weight:800;color:#a8c0ff;
  letter-spacing:.04em;
  flex-shrink:0;display:inline-flex;align-items:center;height:56px;
  border-left:1px solid rgba(148,163,184,.18);
}
.tl-cost-wrap .tl-residual{margin-top:6px!important}

/* ---- CTA Passer commande ---- */
.tl-order-submit.btn.btn-primary{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:100%;min-height:56px!important;height:auto!important;
  margin-top:8px;padding:14px 22px!important;
  background:linear-gradient(135deg,#22c55e,#10b981)!important;
  border:0!important;border-radius:14px!important;
  color:#fff!important;
  font-size:15px!important;font-weight:900!important;letter-spacing:.02em;
  box-shadow:0 14px 28px rgba(34,197,94,.32);
  transition:.2s ease;cursor:pointer;
}
.tl-order-submit.btn.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(34,197,94,.42);
  filter:brightness(1.06);
}
.tl-order-submit.btn.btn-primary:active{transform:translateY(0)}
.tl-order-submit.btn.btn-primary:focus{outline:none;box-shadow:0 14px 28px rgba(34,197,94,.32),0 0 0 4px rgba(34,197,94,.22)}

/* ---- Light theme (daymode) ---- */
body.daymode .tl-order-card.card_auth_1{
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
  border-color:#e2e8f0!important;
  box-shadow:0 18px 40px rgba(15,23,41,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
body.daymode .tl-order-card .card-header{
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.08))!important;
  border-bottom-color:#e2e8f0!important;
}
body.daymode .tl-order-tabs .nav-link{
  background:#fff!important;border-color:#e2e8f0!important;color:#475569!important;
}
body.daymode .tl-order-tabs .nav-link:hover{
  background:rgba(139,92,246,.08)!important;border-color:rgba(139,92,246,.28)!important;color:#0f172a!important;
}
body.daymode .tl-field-labeltxt{color:#475569}
body.daymode .tl-field-label{color:#64748b!important}
body.daymode .tl-order-card .form-control,
body.daymode .tl-order-card input,
body.daymode .tl-order-card textarea,
body.daymode .tl-order-card select{
  background:#fff!important;
  border-color:#e2e8f0!important;
  color:#0f172a!important;
}
body.daymode .tl-order-card .form-control::placeholder{color:#94a3b8!important}
body.daymode .tl-order-card .form-control:focus,
body.daymode .tl-order-card input:focus,
body.daymode .tl-order-card select:focus,
body.daymode .tl-order-card textarea:focus{
  background:#fff!important;border-color:var(--brand-hover)!important;
  box-shadow:0 0 0 4px rgba(139,92,246,.12)!important;
}
/* [v1.2.5] Fix daymode : widget select (select2-like) perd sa couleur de texte.
   Sans ce bloc, l'option selectionnee reste blanche sur fond blanc = invisible. */
body.daymode .tl-order-card .select2-container--default .select2-selection--single,
body.daymode .tl-order-card .select2-selection,
body.daymode .tl-order-card .dropdown.select-toggle .btn{
  background:#fff!important;
  border-color:#e2e8f0!important;
  color:#0f172a!important;
}
body.daymode .tl-order-card .select2-selection__rendered,
body.daymode .tl-order-card .select2-selection__placeholder{color:#0f172a!important}
body.daymode .tl-order-card .select2-selection__arrow b{border-color:#64748b transparent transparent transparent!important}
body.daymode .tl-order-card .select2-container--open .select2-selection,
body.daymode .tl-order-card .select2-container--focus .select2-selection{
  border-color:var(--brand-hover)!important;
  box-shadow:0 0 0 4px rgba(139,92,246,.12)!important;
}
/* Le select natif peut afficher ses <option> en blanc sur certains browsers en daymode -> force */
body.daymode .tl-order-card select option{color:#0f172a;background:#fff}
body.daymode .tl-order-card select option[selected],
body.daymode .tl-order-card select option:checked{background:rgba(139,92,246,.1);color:#0f172a}
body.daymode .select2-dropdown{
  background:#fff!important;border-color:#e2e8f0!important;
  box-shadow:0 22px 50px rgba(15,23,41,.12)!important;
}
body.daymode .select2-dropdown .select2-search__field{background:#f8fafc!important;border-color:#e2e8f0!important;color:#0f172a!important}
/* [v1.2.6] Option daymode : fond blanc subtil + distinction claire selected/survol */
body.daymode .select2-dropdown .select2-results__option{
  color:#334155!important;
  background:#f8fafc!important;
  border-color:#e2e8f0!important;
}
body.daymode .select2-dropdown .select2-results__option[aria-selected=true]{
  background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(139,92,246,.16))!important;
  border-color:rgba(139,92,246,.38)!important;
  color:#0f172a!important;font-weight:700;
  box-shadow:inset 3px 0 0 #8B5CF6, 0 2px 6px rgba(139,92,246,.1);
}
body.daymode .select2-dropdown .select2-results__option[aria-selected=true]::after{color:var(--brand-hover)}
body.daymode .select2-dropdown .select2-results__option--highlighted{
  background:rgba(139,92,246,.1)!important;
  border-color:rgba(139,92,246,.25)!important;
  color:#0f172a!important;
}
body.daymode .select2-dropdown .select2-results__option[aria-selected=true].select2-results__option--highlighted{
  background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(139,92,246,.2))!important;
}
body.daymode .tl-order-card .tl-link-hint{background:rgba(99,102,241,.06)!important;border-color:rgba(99,102,241,.18)!important;color:#475569}
body.daymode .tl-order-card .tl-link-hint strong{color:#0f172a}
body.daymode .tl-cost-wrap{background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.08))!important;border-color:rgba(139,92,246,.22)!important}
body.daymode .tl-cost-box{background:#fff;border-color:#e2e8f0}
body.daymode .tl-cost-input.form-control.tl-cost-input{color:#0f172a!important}
body.daymode .tl-cost-currency{color:var(--brand-hover);border-left-color:#e2e8f0}
body.daymode .tl-order-card .tl-svc-desc{background:#f8fafc!important;border-color:#e2e8f0!important;color:#334155}

/* ---- Mobile tweaks (iOS/Android) ---- */
@media (max-width:575px){
  .tl-order-card .card-header{padding:12px 14px!important}
  .tl-order-tabs{gap:6px!important}
  .tl-order-tabs .nav-link{padding:9px 12px!important;font-size:12.5px}
  .tl-order-tabs .nav-link .text{font-size:12px!important}
  /* [v1.2.6b] Sur mobile : cache le tab "Guide" du card-header car il est deja accessible via la sidebar */
  .tl-order-tabs a.tl-order-tab-link{display:none!important}
  .tl-field-label{font-size:11px!important}
  .tl-field-step{width:20px;height:20px;font-size:10px}
  /* [v1.2.6b] Totaliseur ultra-compact sur mobile (reduction supplementaire demandee) */
  .tl-cost-wrap{padding:8px 10px!important;margin-top:3px!important;border-radius:10px!important}
  .tl-cost-wrap .tl-field-label{margin-bottom:1px!important;font-size:10px!important}
  .tl-cost-box{border-radius:9px!important}
  .tl-cost-input.form-control.tl-cost-input{font-size:15px!important;min-height:36px!important;padding:6px 10px!important;padding-right:0!important;letter-spacing:-.01em;font-weight:800!important}
  .tl-cost-currency{height:36px;font-size:11px;padding:0 8px;font-weight:800}
  .tl-order-submit.btn.btn-primary{font-size:14px!important;min-height:50px!important;margin-top:6px}
  /* Dropdown options denses mais tactiles sur mobile */
  .select2-dropdown .select2-results__option{padding:12px 14px!important;font-size:14px!important;min-height:44px;display:flex;align-items:center}
}
@media (max-width:380px){
  .tl-cost-input.form-control.tl-cost-input{font-size:13.5px!important;min-height:32px!important}
  .tl-cost-currency{height:32px;font-size:10px;padding:0 7px}
  .tl-cost-wrap{padding:7px 9px!important}
}
/* Safe-area iOS : padding bas supplementaire si CTA en bas de viewport */
@supports(padding:max(0px)){
  .tl-order-card{padding-bottom:max(0px, env(safe-area-inset-bottom))}
}

/* ============================================================================
   [v1.2.5] SVG plateforme injectés dans le widget select (categorie/service).
   Chaque <span class="tl-plat-ico-wrap" data-tl-plat="facebook|instagram|...">
   contient un <svg class="tl-plat-ico" fill="currentColor">. La couleur est
   gérée par `color:` sur le wrapper, matching la charte de marque.
   ========================================================================== */
.tl-plat-ico-wrap{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;min-width:22px;
  margin-right:8px;flex-shrink:0;
  vertical-align:middle;
  border-radius:6px;
  background:rgba(148,163,184,.08);
  padding:3px;
}
.tl-plat-ico{width:100%;height:100%;display:block}
/* Couleurs de marque par plateforme (rendent le path SVG avec fill="currentColor") */
.tl-plat-ico-wrap[data-tl-plat="facebook"] {color:#1877F2;background:rgba(24,119,242,.10)}
.tl-plat-ico-wrap[data-tl-plat="instagram"]{color:#E1306C;background:rgba(225,48,108,.10)}
.tl-plat-ico-wrap[data-tl-plat="youtube"]  {color:#FF0000;background:rgba(255,0,0,.10)}
.tl-plat-ico-wrap[data-tl-plat="tiktok"]   {color:#000000;background:rgba(37,244,238,.15)}
body:not(.daymode) .tl-plat-ico-wrap[data-tl-plat="tiktok"]{color:#25F4EE;background:rgba(37,244,238,.12)}
.tl-plat-ico-wrap[data-tl-plat="telegram"] {color:#0088CC;background:rgba(0,136,204,.10)}
.tl-plat-ico-wrap[data-tl-plat="twitter"]  {color:#000000;background:rgba(148,163,184,.12)}
body:not(.daymode) .tl-plat-ico-wrap[data-tl-plat="twitter"]{color:#ffffff;background:rgba(148,163,184,.14)}
.tl-plat-ico-wrap[data-tl-plat="whatsapp"] {color:#25D366;background:rgba(37,211,102,.10)}
.tl-plat-ico-wrap[data-tl-plat="spotify"]  {color:#1DB954;background:rgba(29,185,84,.10)}
.tl-plat-ico-wrap[data-tl-plat="snapchat"] {color:#FFFC00;background:rgba(255,252,0,.14)}
.tl-plat-ico-wrap[data-tl-plat="pinterest"]{color:#E60023;background:rgba(230,0,35,.10)}
.tl-plat-ico-wrap[data-tl-plat="linkedin"] {color:#0077B5;background:rgba(0,119,181,.10)}
.tl-plat-ico-wrap[data-tl-plat="discord"]  {color:#5865F2;background:rgba(88,101,242,.10)}
.tl-plat-ico-wrap[data-tl-plat="twitch"]   {color:#9146FF;background:rgba(145,70,255,.10)}
.tl-plat-ico-wrap[data-tl-plat="soundcloud"]{color:#FF7700;background:rgba(255,119,0,.10)}
.tl-plat-ico-wrap[data-tl-plat="reddit"]   {color:#FF4500;background:rgba(255,69,0,.10)}
.tl-plat-ico-wrap[data-tl-plat="threads"]  {color:#000000;background:rgba(148,163,184,.12)}
body:not(.daymode) .tl-plat-ico-wrap[data-tl-plat="threads"]{color:#ffffff;background:rgba(148,163,184,.14)}
/* Taille compact pour les listes denses */
.dropdown-menu .tl-plat-ico-wrap,
.select2-dropdown .tl-plat-ico-wrap,
ul.submenu_drop .tl-plat-ico-wrap{width:20px;height:20px;min-width:20px;padding:2.5px;margin-right:7px}

/* ============================================================================
   [v1.2.5] SOCIAL MEDIA FILTER (cat_filter_wrap / nwo-cat-btn) : redesign
   Pro Max. Grille responsive avec icone centree + label dessous, effet glass.
   ========================================================================== */
.cat_filter_wrap{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
  padding:12px!important;
  background:rgba(17,24,39,.5);
  border:1px solid rgba(148,163,184,.14);
  border-radius:16px;
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  position:relative;overflow:hidden;
}
.cat_filter_wrap::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,.4) 30%,rgba(139,92,246,.4) 70%,transparent);
  pointer-events:none;
}
.cat_filter_wrap .nwo-cat-btn,
.cat_filter_wrap .filter_item{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;gap:6px!important;
  padding:10px 6px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(148,163,184,.16)!important;
  border-radius:12px!important;
  color:#cbd5e1!important;
  cursor:pointer;
  transition:all .22s cubic-bezier(.25,.46,.45,.94);
  min-height:68px;
  position:relative;overflow:hidden;
}
.cat_filter_wrap .nwo-cat-btn::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(139,92,246,.15),transparent 60%);
  opacity:0;transition:opacity .22s ease;pointer-events:none;
}
.cat_filter_wrap .nwo-cat-btn:hover{
  transform:translateY(-2px);
  background:rgba(139,92,246,.08)!important;
  border-color:rgba(139,92,246,.28)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(99,102,241,.14);
}
.cat_filter_wrap .nwo-cat-btn:hover::before{opacity:1}
.cat_filter_wrap .nwo-cat-btn:active{transform:translateY(0)}

/* Icone : pastille 32px centree au dessus du label (reduit par rapport a 44px precedent) */
.cat_filter_wrap .nwo-cat-btn .icons,
.cat_filter_wrap .filter_item .icons{
  width:32px!important;height:32px!important;
  border-radius:10px!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  background:rgba(15,23,41,.55);
  border:1px solid rgba(148,163,184,.14);
  flex-shrink:0;
  transition:transform .22s ease, background .22s ease, border-color .22s ease;
  position:relative;z-index:1;
}
.cat_filter_wrap .nwo-cat-btn:hover .icons{
  transform:scale(1.06);
  background:rgba(139,92,246,.12);
  border-color:rgba(139,92,246,.3);
}
.cat_filter_wrap .nwo-cat-btn .icons img,
.cat_filter_wrap .filter_item .icons img{
  width:22px!important;height:22px!important;object-fit:contain;min-width:0!important;
}
.cat_filter_wrap .nwo-cat-btn .icons iconify-icon{
  font-size:20px!important;color:#a8c0ff;
}

/* Label : sous l'icone, font 11px (plus sobre) */
.cat_filter_wrap .nwo-cat-btn .text,
.cat_filter_wrap .filter_item .text{
  font-size:11px!important;font-weight:700!important;
  color:inherit!important;line-height:1.2;
  letter-spacing:.01em;
  position:relative;z-index:1;
  text-align:center;
}

/* Etat actif : conservation du gradient violet-bleu deja defini */
.cat_filter_wrap .nwo-cat-btn.active{
  transform:translateY(-2px)!important;
  box-shadow:0 10px 22px rgba(99,102,241,.32)!important;
}
.cat_filter_wrap .nwo-cat-btn.active .icons{
  background:rgba(255,255,255,.2)!important;
  border-color:rgba(255,255,255,.28)!important;
}
.cat_filter_wrap .nwo-cat-btn.active .icons iconify-icon{color:#fff}
.cat_filter_wrap .nwo-cat-btn.active .text{color:#fff!important}

/* Responsive : tablette + mobile - boutons encore plus compacts */
@media (max-width:900px){
  .cat_filter_wrap{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important;padding:10px!important}
  .cat_filter_wrap .nwo-cat-btn{padding:8px 4px!important;min-height:60px;gap:5px!important}
  .cat_filter_wrap .nwo-cat-btn .icons{width:28px!important;height:28px!important;border-radius:9px!important}
  .cat_filter_wrap .nwo-cat-btn .icons img{width:20px!important;height:20px!important}
  .cat_filter_wrap .nwo-cat-btn .icons iconify-icon{font-size:18px!important}
  .cat_filter_wrap .nwo-cat-btn .text{font-size:10px!important}
}
@media (max-width:600px){
  .cat_filter_wrap{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:6px!important;padding:8px!important}
  .cat_filter_wrap .nwo-cat-btn{padding:7px 3px!important;min-height:54px;gap:4px!important}
  .cat_filter_wrap .nwo-cat-btn .icons{width:24px!important;height:24px!important;border-radius:8px!important}
  .cat_filter_wrap .nwo-cat-btn .icons img{width:18px!important;height:18px!important}
  .cat_filter_wrap .nwo-cat-btn .icons iconify-icon{font-size:16px!important}
  .cat_filter_wrap .nwo-cat-btn .text{font-size:9.5px!important}
}
@media (max-width:400px){
  .cat_filter_wrap .nwo-cat-btn{min-height:50px;padding:6px 2px!important}
  .cat_filter_wrap .nwo-cat-btn .icons{width:22px!important;height:22px!important}
  .cat_filter_wrap .nwo-cat-btn .icons img{width:16px!important;height:16px!important}
  .cat_filter_wrap .nwo-cat-btn .icons iconify-icon{font-size:14px!important}
  .cat_filter_wrap .nwo-cat-btn .text{font-size:9px!important}
}

/* Light theme : fond blanc, bordures #e2e8f0 */
body.daymode .cat_filter_wrap{
  background:#fff;
  border-color:#e2e8f0;
}
body.daymode .cat_filter_wrap::before{
  background:linear-gradient(90deg,transparent,rgba(99,102,241,.35) 30%,rgba(139,92,246,.35) 70%,transparent);
}
body.daymode .cat_filter_wrap .nwo-cat-btn,
body.daymode .cat_filter_wrap .filter_item{
  background:#f8fafc!important;
  border-color:#e2e8f0!important;
  color:#475569!important;
}
body.daymode .cat_filter_wrap .nwo-cat-btn:hover{
  background:rgba(139,92,246,.06)!important;
  border-color:rgba(139,92,246,.28)!important;
  color:#0f172a!important;
  box-shadow:0 10px 22px rgba(15,23,41,.08);
}
body.daymode .cat_filter_wrap .nwo-cat-btn .icons,
body.daymode .cat_filter_wrap .filter_item .icons{
  background:#fff;
  border-color:#e2e8f0;
}
body.daymode .cat_filter_wrap .nwo-cat-btn:hover .icons{
  background:rgba(139,92,246,.1);
  border-color:rgba(139,92,246,.28);
}
body.daymode .cat_filter_wrap .nwo-cat-btn .icons iconify-icon{color:var(--brand-hover)}
body.daymode .cat_filter_wrap .nwo-cat-btn.active{
  color:#fff!important;
}
body.daymode .cat_filter_wrap .nwo-cat-btn.active .icons{
  background:rgba(255,255,255,.25)!important;border-color:rgba(255,255,255,.4)!important;
}

/* ============================================================================
   [v1.2.5] POPUP / MODAL commande : design KPI unifie.
   Utilise body.daymode (pas body.dark-mode) pour coller aux conventions du projet.
   Supporte les variantes .ok (succes = vert) et .err (erreur = rouge).
   ========================================================================== */
.tl-popup-overlay{
  position:fixed!important;inset:0!important;z-index:99998!important;
  background:rgba(5,10,22,.68)!important;
  -webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);
  display:flex!important;align-items:flex-end;justify-content:center;
  padding:12px!important;
  animation:tlPopupFadeIn .25s ease-out;
}
@media (min-width:640px){
  .tl-popup-overlay{align-items:center;padding:24px!important}
}

.tl-popup{
  position:relative;width:100%;max-width:440px;
  background:linear-gradient(180deg,rgba(17,24,39,.98),rgba(11,17,32,.98))!important;
  color:#F1F5F9!important;
  border:1px solid rgba(139,92,246,.28)!important;
  border-radius:22px!important;
  box-shadow:0 22px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04)!important;
  overflow:hidden;
  padding-bottom:env(safe-area-inset-bottom,0);
  animation:tlPopupSlideUp .3s cubic-bezier(.34,1.56,.64,1);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
@media (min-width:640px){
  .tl-popup{animation:tlPopupScale .25s cubic-bezier(.34,1.56,.64,1)}
}
/* Liseret accent en haut selon variante */
.tl-popup::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,.6) 30%,rgba(139,92,246,.6) 70%,transparent);
}
.tl-popup.ok::before{background:linear-gradient(90deg,transparent,rgba(34,197,94,.7) 30%,rgba(16,185,129,.7) 70%,transparent)}
.tl-popup.err::before{background:linear-gradient(90deg,transparent,rgba(239,68,68,.7) 30%,rgba(248,113,113,.7) 70%,transparent)}

/* Header : icone gradient + titre + sous-titre */
.tl-popup-header{
  display:flex!important;align-items:center;gap:14px;
  padding:22px 60px 14px 22px!important;
  position:relative;
}
.tl-popup-ico{
  width:52px!important;height:52px!important;border-radius:16px!important;flex-shrink:0;
  display:inline-flex!important;align-items:center;justify-content:center;
  color:#fff;
}
.tl-popup.ok .tl-popup-ico{
  background:linear-gradient(135deg,#22c55e,#10b981)!important;
  box-shadow:0 12px 28px rgba(34,197,94,.42)!important;
}
.tl-popup.err .tl-popup-ico{
  background:linear-gradient(135deg,#ef4444,#f87171)!important;
  box-shadow:0 12px 28px rgba(239,68,68,.42)!important;
}
.tl-popup-title{
  font-size:17px!important;font-weight:900!important;line-height:1.3;
  margin:0!important;color:#fff!important;letter-spacing:-.01em;
}
.tl-popup-sub{
  display:block!important;font-size:10.5px!important;font-weight:800!important;
  text-transform:uppercase;letter-spacing:.12em;
  color:#94A3B8!important;margin-top:4px!important;
}
.tl-popup.ok .tl-popup-sub{color:#86efac!important}
.tl-popup.err .tl-popup-sub{color:#fca5a5!important}

/* [v1.2.7] Close button : z-index + pointer-events forces pour eviter les captures parasites */
.tl-popup-close{
  position:absolute!important;top:14px;right:14px;
  width:40px!important;height:40px!important;min-width:40px;
  border:0!important;cursor:pointer;
  border-radius:10px!important;
  background:rgba(148,163,184,.18)!important;color:#dde6f5!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  font-size:16px;line-height:1;transition:background .18s ease, color .18s ease;
  z-index:10!important;
  pointer-events:auto!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(239,68,68,.2);
}
.tl-popup-close:hover{
  background:rgba(239,68,68,.22)!important;color:#fff!important;
}
.tl-popup-close:active{
  background:rgba(239,68,68,.35)!important;
  transform:scale(0.95);
}

/* Body : texte + liste d'infos KPI */
.tl-popup-body{
  padding:2px 22px 16px!important;
  font-size:14px!important;line-height:1.6;
  color:#cbd5e1!important;word-break:break-word;
}
.tl-popup-body strong{color:#fff!important;font-weight:800}
.tl-popup-list{display:flex;flex-direction:column;gap:7px;margin:14px 0 2px}
.tl-popup-list .r{
  display:flex!important;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px!important;border-radius:11px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(148,163,184,.14);
}
.tl-popup-list .r .k{
  font-size:10.5px!important;font-weight:800!important;
  text-transform:uppercase;letter-spacing:.08em;
  color:#94A3B8!important;
}
.tl-popup-list .r .v{
  font-size:13px!important;font-weight:700!important;color:#fff!important;
  max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;
}

/* Actions : boutons Pro Max */
.tl-popup-actions{
  display:flex!important;gap:10px;padding:14px 18px 18px!important;
  border-top:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,41,.4);
}
.tl-popup-btn{
  flex:1;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;
  padding:13px 16px!important;border-radius:12px!important;
  font-weight:800!important;font-size:13px!important;letter-spacing:.02em;
  text-decoration:none!important;border:0!important;cursor:pointer;
  transition:.18s ease;
  min-height:46px;line-height:1;
}
.tl-popup-btn.g{
  background:rgba(148,163,184,.18)!important;color:#e2e8f0!important;
}
.tl-popup-btn.g:hover{background:rgba(148,163,184,.28)!important;color:#fff!important;transform:translateY(-1px)}
.tl-popup.ok .tl-popup-btn.p{
  background:linear-gradient(135deg,#22c55e,#10b981)!important;color:#fff!important;
  box-shadow:0 10px 22px rgba(34,197,94,.3)!important;
}
.tl-popup.err .tl-popup-btn.p{
  background:linear-gradient(135deg,#ef4444,#dc2626)!important;color:#fff!important;
  box-shadow:0 10px 22px rgba(239,68,68,.3)!important;
}
.tl-popup-btn.p:hover{transform:translateY(-1px);filter:brightness(1.08)}

/* Animations */
@keyframes tlPopupFadeIn{from{opacity:0}to{opacity:1}}
@keyframes tlPopupSlideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes tlPopupScale{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes tlPopupFadeOut{to{opacity:0}}
@keyframes tlPopupSlideDown{to{transform:translateY(40px);opacity:0}}
.tl-popup-overlay.-closing{animation:tlPopupFadeOut .2s ease-in forwards}
.tl-popup-overlay.-closing .tl-popup{animation:tlPopupSlideDown .22s ease-in forwards}

/* ----- Light theme (daymode) ----- */
body.daymode .tl-popup-overlay{
  background:rgba(15,23,41,.45)!important;
}
body.daymode .tl-popup{
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
  color:#0f172a!important;
  border-color:#e2e8f0!important;
  box-shadow:0 22px 60px rgba(15,23,41,.18), inset 0 1px 0 rgba(255,255,255,.8)!important;
}
body.daymode .tl-popup-title{color:#0f172a!important}
body.daymode .tl-popup-sub{color:#64748b!important}
body.daymode .tl-popup.ok .tl-popup-sub{color:#16a34a!important}
body.daymode .tl-popup.err .tl-popup-sub{color:#dc2626!important}
body.daymode .tl-popup-body{color:#475569!important}
body.daymode .tl-popup-body strong{color:#0f172a!important}
body.daymode .tl-popup-close{background:#f1f5f9!important;color:#475569!important}
body.daymode .tl-popup-close:hover{background:rgba(239,68,68,.14)!important;color:#dc2626!important}
body.daymode .tl-popup-list .r{background:#f8fafc!important;border-color:#e2e8f0}
body.daymode .tl-popup-list .r .k{color:#64748b!important}
body.daymode .tl-popup-list .r .v{color:#0f172a!important}
body.daymode .tl-popup-actions{background:#f8fafc;border-top-color:#e2e8f0}
body.daymode .tl-popup-btn.g{background:#e2e8f0!important;color:#334155!important}
body.daymode .tl-popup-btn.g:hover{background:#cbd5e1!important;color:#0f172a!important}

/* Mobile : popup plein bas (style "action sheet") */
@media (max-width:575px){
  .tl-popup{
    max-width:none;
    border-radius:20px 20px 0 0!important;
    margin-bottom:0;
  }
  .tl-popup-header{padding:18px 56px 12px 18px!important}
  .tl-popup-ico{width:46px!important;height:46px!important;border-radius:13px!important}
  .tl-popup-title{font-size:15.5px!important}
  .tl-popup-body{padding:2px 18px 14px!important;font-size:13.5px!important}
  .tl-popup-actions{padding:12px 14px 14px!important;gap:8px}
  .tl-popup-btn{padding:12px 14px!important;font-size:12.5px!important}
  .tl-popup-overlay{padding:0!important}
}

/* ============================================================================
   [v1.2.9] Atlas Blue refinement
   But: calmer le violet/orange legacy et donner une charte client plus premium.
   Bleu = action/confiance, cyan = accent moderne, vert = succes/argent,
   orange = attente uniquement.
   ========================================================================== */
#dashboard{
  background:
    radial-gradient(ellipse 900px 420px at 8% -4%, rgba(37,99,235,.12), transparent 68%),
    radial-gradient(ellipse 760px 360px at 98% 2%, rgba(14,165,233,.09), transparent 70%),
    radial-gradient(ellipse 520px 300px at 50% 102%, rgba(34,197,94,.035), transparent 70%),
    linear-gradient(180deg,#08111F 0%,#0D1728 48%,#08111F 100%) !important;
}
body:has(#dashboard){
  background:linear-gradient(180deg,#08111F 0%,#0D1728 48%,#08111F 100%) !important;
}
body.daymode:has(#dashboard),
body.daymode #dashboard{
  background:
    radial-gradient(ellipse 820px 380px at 6% -4%, rgba(37,99,235,.08), transparent 68%),
    radial-gradient(ellipse 720px 340px at 96% 0%, rgba(14,165,233,.07), transparent 70%),
    linear-gradient(180deg,#F5F8FC 0%,#EEF4FB 52%,#F8FBFF 100%) !important;
}

/* Surfaces principales */
#dashboard #content #header{
  background:rgba(8,17,31,.78)!important;
  border-bottom-color:rgba(148,163,184,.12)!important;
}
#dashboard #sidebar{
  background:linear-gradient(180deg,#070B12 0%,#0A101B 100%)!important;
  border-right:1px solid rgba(37,99,235,.18)!important;
}
.tl-dash-kpi,
.tl-dash-card,
.tl-order-card.card_auth_1,
.tl-last-order,
.tl-level-progress,
.cat_filter_wrap{
  background:rgba(16,24,39,.76)!important;
  border-color:rgba(148,163,184,.16)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.daymode #dashboard #content #header,
body.daymode #dashboard #sidebar,
body.daymode .tl-dash-kpi,
body.daymode .tl-dash-card,
body.daymode .tl-order-card.card_auth_1,
body.daymode .tl-last-order,
body.daymode .tl-level-progress,
body.daymode .cat_filter_wrap{
  background:#FFFFFF!important;
  border-color:#D9E2EF!important;
  box-shadow:0 16px 36px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.85)!important;
}
body.daymode #dashboard #sidebar{
  background:linear-gradient(180deg,#FFFFFF 0%,#F5F8FC 100%)!important;
}

/* Action principale: bleu/cyan, pas violet */
.tl-dash-btn.primary,
.tl-nav-avatar,
.tl-dash-card-head-ico,
.tl-active-platform,
.tl-last-order .tl-lo-ico,
.tl-lvl-bar-fill,
.nwo-cat-btn.active,
.cat_filter_wrap .nwo-cat-btn.active,
.tl-order-tabs .nav-link.active,
.tl-field-step,
.tl-pay-submit,
.tl-pay-method.active,
.tl-hist-head-ico,
#dashboard #sidebar .sidebar_menu .menu_item .menu_link.active{
  background:var(--brand-grad)!important;
  border-color:rgba(14,165,233,.42)!important;
  box-shadow:0 12px 26px rgba(37,99,235,.24)!important;
}
.tl-dash-btn.primary:hover,
.cat_filter_wrap .nwo-cat-btn:hover,
.tl-order-tabs .nav-link:hover,
#dashboard #sidebar .sidebar_menu .menu_item .menu_link:hover{
  border-color:rgba(14,165,233,.34)!important;
  background:rgba(37,99,235,.10)!important;
  box-shadow:0 10px 22px rgba(37,99,235,.13)!important;
}
body.daymode .tl-dash-btn.primary:hover,
body.daymode .cat_filter_wrap .nwo-cat-btn:hover,
body.daymode .tl-order-tabs .nav-link:hover,
body.daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link:hover{
  background:rgba(37,99,235,.07)!important;
  border-color:rgba(37,99,235,.24)!important;
}

/* KPI: garder des roles lisibles sans carnaval */
.tl-dash-kpi.k-blue .tl-dash-kpi-ico{background:linear-gradient(135deg,#3B82F6,#2563EB)!important}
.tl-dash-kpi.k-purple .tl-dash-kpi-ico{background:linear-gradient(135deg,#38BDF8,#0284C7)!important}
.tl-dash-kpi.k-orange .tl-dash-kpi-ico{background:linear-gradient(135deg,#FBBF24,#F59E0B)!important}
.tl-dash-kpi.k-green .tl-dash-kpi-ico,
.tl-nav-balance-ico,
.tl-nav-balance-cta{background:linear-gradient(135deg,#22C55E,#16A34A)!important}
.tl-dash-kpi-label,
.tl-nav-balance-pill-label,
.tl-nav-balance-label,
.tl-lo-head,
.tl-field-label{color:#9AA8BA!important}
body.daymode .tl-dash-kpi-label,
body.daymode .tl-nav-balance-pill-label,
body.daymode .tl-nav-balance-label,
body.daymode .tl-lo-head,
body.daymode .tl-field-label{color:#64748B!important}

/* Focus/selects: bleu clair au lieu de violet */
.tl-dash-search:focus-within,
.tl-order-card .form-control:focus,
.tl-order-card input:focus,
.tl-order-card select:focus,
.tl-order-card textarea:focus,
.tl-order-card .select2-container--open .select2-selection,
.tl-order-card .select2-container--focus .select2-selection,
.tl-order-card .select2-container .select2-selection:focus{
  border-color:#0EA5E9!important;
  box-shadow:0 0 0 4px rgba(14,165,233,.16)!important;
}
body.daymode .tl-order-card .form-control:focus,
body.daymode .tl-order-card input:focus,
body.daymode .tl-order-card select:focus,
body.daymode .tl-order-card textarea:focus,
body.daymode .tl-order-card .select2-container--open .select2-selection,
body.daymode .tl-order-card .select2-container--focus .select2-selection{
  border-color:#2563EB!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;
}

/* Neutralise les traces orange/beige du theme legacy en light mode */
body.daymode,
body.daymode .offcanvas,
body.daymode #dashboard #content #header,
body.daymode .level_badges{
  background-color:#F5F8FC!important;
}
body.daymode #dashboard #sidebar{background-color:#FFFFFF!important}

/* Filtre reseaux: les marques restent reconnaissables, mais l'interface reste calme */
.cat_filter_wrap .nwo-cat-btn,
.cat_filter_wrap .filter_item{
  background:rgba(255,255,255,.045)!important;
}
body.daymode .cat_filter_wrap .nwo-cat-btn,
body.daymode .cat_filter_wrap .filter_item{
  background:#F8FBFF!important;
}

/* Dropdowns/selects: surface sombre en dark, claire en daymode */
html body:not(.daymode) .select2-dropdown,
html body:not(.daymode) .select2-container--open .select2-dropdown,
html body:not(.daymode) .select-dropdown,
html body:not(.daymode) .dropdown-menu.select2-dropdown{
  background:#101827!important;
  border-color:rgba(14,165,233,.28)!important;
  color:#F8FAFC!important;
  box-shadow:0 22px 50px rgba(0,0,0,.52)!important;
}
html body:not(.daymode) .select2-dropdown .select2-results__option{
  background:#101827!important;
  color:#DCE7F7!important;
  border-color:rgba(148,163,184,.12)!important;
}
html body:not(.daymode) .select2-dropdown .select2-results__option--highlighted,
html body:not(.daymode) .select2-dropdown .select2-results__option[aria-selected=true]{
  background:rgba(37,99,235,.18)!important;
  color:#FFFFFF!important;
}

/* Mobile: 6 colonnes etait serre; 3 colonnes respire mieux et reste clair */
@media (max-width:600px){
  .cat_filter_wrap{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .cat_filter_wrap .nwo-cat-btn{min-height:64px!important}
}

/* ============================================================================
   [v1.3.0] Order selects: clarity-first dropdown
   Zone critique: choisir categorie/service doit etre lisible avant tout.
   Les options deviennent des cartes compactes, avec etat selectionne net.
   ========================================================================== */
.tl-order-card .select2-selection,
.tl-order-card .select2-container--default .select2-selection--single,
.tl-order-card .dropdown.select-toggle .btn{
  min-height:54px!important;
  border-radius:14px!important;
  padding:0 16px!important;
  background:rgba(8,17,31,.72)!important;
  border:1.5px solid rgba(148,163,184,.22)!important;
  color:#F8FAFC!important;
}
#select-service-container .select2-selection,
#select-service-container .select2-container--default .select2-selection--single,
.tl-order-card #neworder_services + .select2-container .select2-selection{
  min-height:62px!important;
}
.tl-order-card .select2-selection__rendered{
  line-height:52px!important;
  color:#F8FAFC!important;
  font-size:15px!important;
  font-weight:650!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#select-service-container .select2-selection__rendered,
.tl-order-card #neworder_services + .select2-container .select2-selection__rendered{
  line-height:1.35!important;
  padding:10px 34px 10px 0!important;
  min-height:60px!important;
  display:flex!important;
  align-items:center!important;
}
.tl-order-card .select2-container--open .select2-selection,
.tl-order-card .select2-container--focus .select2-selection,
.tl-order-card .dropdown.select-toggle.open .btn{
  border-color:#0EA5E9!important;
  box-shadow:0 0 0 4px rgba(14,165,233,.16), 0 12px 26px rgba(14,165,233,.10)!important;
}

html body .select2-dropdown,
html body .select2-container--open .select2-dropdown,
html body .select-dropdown,
html body .dropdown-menu.select2-dropdown{
  border-radius:18px!important;
  padding:8px!important;
  border:1px solid rgba(14,165,233,.34)!important;
  background:#0D1728!important;
  box-shadow:0 26px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03)!important;
  overflow:hidden!important;
}
html body .select2-dropdown .select2-search--dropdown{
  padding:8px 8px 10px!important;
  background:transparent!important;
  border-bottom:1px solid rgba(148,163,184,.12)!important;
}
html body .select2-dropdown .select2-search__field{
  min-height:42px!important;
  background:#101827!important;
  border:1px solid rgba(148,163,184,.18)!important;
  color:#F8FAFC!important;
  border-radius:12px!important;
}
html body .select2-dropdown .select2-search__field:focus{
  border-color:#0EA5E9!important;
  box-shadow:0 0 0 4px rgba(14,165,233,.14)!important;
}
html body .select2-dropdown .select2-results,
html body .select2-container--default .select2-results{
  padding:8px 2px 2px!important;
  background:transparent!important;
  max-height:360px!important;
}
html body .select2-dropdown .select2-results__option,
html body .select2-container--default .select2-results__option{
  min-height:52px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:5px 0!important;
  padding:13px 46px 13px 14px!important;
  border-radius:12px!important;
  background:#101827!important;
  border:1px solid rgba(148,163,184,.14)!important;
  color:#EAF2FF!important;
  font-size:14px!important;
  font-weight:650!important;
  line-height:1.35!important;
  letter-spacing:-.01em;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
html body .select2-dropdown .select2-results__option:hover,
html body .select2-dropdown .select2-results__option--highlighted,
html body .select2-container--default .select2-results__option--highlighted{
  transform:none!important;
  background:#12213A!important;
  border-color:rgba(14,165,233,.34)!important;
  color:#FFFFFF!important;
}
html body .select2-dropdown .select2-results__option[aria-selected=true],
html body .select2-container--default .select2-results__option[aria-selected=true],
html body .select2-dropdown .select2-results__option[aria-selected=true].select2-results__option--highlighted{
  background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(14,165,233,.18))!important;
  border-color:#0EA5E9!important;
  color:#FFFFFF!important;
  box-shadow:inset 4px 0 0 #0EA5E9, 0 10px 24px rgba(14,165,233,.12)!important;
}
html body .select2-dropdown .select2-results__option[aria-selected=true]::after{
  content:"\2713";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:#38BDF8!important;
  font-weight:900;
  font-size:18px;
}
html body .select2-dropdown .select2-results__option *{
  color:inherit!important;
}
html body .select2-dropdown .select2-results__option .badge,
html body .select2-dropdown .select2-results__option [class*="badge"],
html body .select2-dropdown .select2-results__option span:first-child{
  font-weight:900!important;
}

/* Light mode: fond blanc, options lisibles, selection bleue douce sans violet. */
body.daymode .tl-order-card .select2-selection,
body.daymode .tl-order-card .select2-container--default .select2-selection--single,
body.daymode .tl-order-card .dropdown.select-toggle .btn{
  background:#FFFFFF!important;
  border-color:#D9E2EF!important;
  color:#0F172A!important;
}
body.daymode .tl-order-card .select2-selection__rendered{
  color:#0F172A!important;
}
body.daymode .tl-order-card .select2-container--open .select2-selection,
body.daymode .tl-order-card .select2-container--focus .select2-selection{
  border-color:#2563EB!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12), 0 12px 24px rgba(37,99,235,.08)!important;
}
body.daymode .select2-dropdown,
body.daymode .select2-container--open .select2-dropdown,
body.daymode .select-dropdown,
body.daymode .dropdown-menu.select2-dropdown{
  background:#FFFFFF!important;
  border-color:#BFD3F8!important;
  box-shadow:0 24px 60px rgba(15,23,42,.16)!important;
}
body.daymode .select2-dropdown .select2-search--dropdown{
  background:transparent!important;
  border-bottom-color:#E2E8F0!important;
}
body.daymode .select2-dropdown .select2-search__field{
  background:#F8FBFF!important;
  border-color:#D9E2EF!important;
  color:#0F172A!important;
}
body.daymode .select2-dropdown .select2-results,
body.daymode .select2-container--default .select2-results{
  background:transparent!important;
}
body.daymode .select2-dropdown .select2-results__option,
body.daymode .select2-container--default .select2-results__option{
  background:#F8FBFF!important;
  border-color:#D9E2EF!important;
  color:#132238!important;
}
body.daymode .select2-dropdown .select2-results__option:hover,
body.daymode .select2-dropdown .select2-results__option--highlighted,
body.daymode .select2-container--default .select2-results__option--highlighted{
  background:#EEF6FF!important;
  border-color:#BFD3F8!important;
  color:#0F172A!important;
}
body.daymode .select2-dropdown .select2-results__option[aria-selected=true],
body.daymode .select2-container--default .select2-results__option[aria-selected=true],
body.daymode .select2-dropdown .select2-results__option[aria-selected=true].select2-results__option--highlighted{
  background:linear-gradient(135deg,#EAF2FF,#F4FAFF)!important;
  border-color:#2563EB!important;
  color:#0F172A!important;
  box-shadow:inset 4px 0 0 #2563EB, 0 10px 24px rgba(37,99,235,.10)!important;
}
body.daymode .select2-dropdown .select2-results__option[aria-selected=true]::after{
  color:#0284C7!important;
}

/* La categorie/service sont la priorite: on leur donne plus de respiration sur mobile. */
@media (max-width:575px){
  html body .select2-dropdown .select2-results__option,
  html body .select2-container--default .select2-results__option{
    min-height:52px!important;
    padding:12px 42px 12px 12px!important;
    font-size:13.5px!important;
  }
}

/* Pages client secondaires: meme langage visuel que /neworder */
.tl-dash-hero,
.tl-acc-hero,
.tl-guide-hero{
  background:linear-gradient(135deg,rgba(37,99,235,.13),rgba(14,165,233,.11))!important;
  border-color:rgba(14,165,233,.22)!important;
}
.tl-acc-hero-ico,
.tl-acc-hero-cta,
.tl-acc-btn.primary,
.tl-guide-hero-ico,
.tl-guide-btn.primary,
.tl-guide-step-num,
.tl-svc-buy-btn,
.pt-btn.active,
.tl-pay-submit,
.tl-pay-method.active,
.tl-pay-quick-btn.popular{
  background:var(--brand-grad)!important;
  border-color:rgba(14,165,233,.36)!important;
  box-shadow:0 12px 26px rgba(37,99,235,.22)!important;
}
.tl-acc-input:focus,
.tl-pay-amount:focus-within,
.price-toggle:focus-within{
  border-color:#0EA5E9!important;
  box-shadow:0 0 0 4px rgba(14,165,233,.14)!important;
}
.tl-acc-kpi.k-purple .tl-acc-kpi-ico{background:linear-gradient(135deg,#38BDF8,#0284C7)!important}
.tl-acc-kpi.k-blue .tl-acc-kpi-ico{background:linear-gradient(135deg,#3B82F6,#2563EB)!important}
.tl-acc-kpi.k-orange .tl-acc-kpi-ico{background:linear-gradient(135deg,#FBBF24,#F59E0B)!important}
.tl-acc-kpi.k-green .tl-acc-kpi-ico{background:linear-gradient(135deg,#22C55E,#16A34A)!important}
body.daymode .tl-acc-card,
body.daymode .tl-acc-kpi,
body.daymode .tl-acc-info-cell,
body.daymode .tl-guide-card,
body.daymode .tl-pay-card{
  background:#FFFFFF!important;
  border-color:#D9E2EF!important;
}

/* [v1.3.5] Selection plateforme finale: aucun badge parasite, etat actif propre. */
.cat_filter_wrap .nwo-cat-btn::after,
.cat_filter_wrap .nwo-cat-btn.active::after{
  content:none!important;
  display:none!important;
}
.cat_filter_wrap .nwo-cat-btn.active{
  background:linear-gradient(135deg,rgba(37,99,235,.24),rgba(14,165,233,.18))!important;
  border:1px solid rgba(56,189,248,.78)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 24px rgba(14,165,233,.22)!important;
  color:#fff!important;
  transform:none!important;
}
.cat_filter_wrap .nwo-cat-btn.active .icons{
  background:linear-gradient(135deg,#2563EB,#0EA5E9)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 7px 16px rgba(14,165,233,.30), inset 0 1px 0 rgba(255,255,255,.24)!important;
  transform:scale(1.06)!important;
}
.cat_filter_wrap .nwo-cat-btn.active .icons img{
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.24))!important;
}
body.daymode .cat_filter_wrap .nwo-cat-btn.active{
  background:linear-gradient(135deg,#EAF2FF,#F6FBFF)!important;
  border-color:#2563EB!important;
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.12), 0 10px 22px rgba(37,99,235,.14)!important;
  color:#0F172A!important;
}

/* [v1.3.1] Mobile: focus sur la commande, moins de bruit autour. */
@media (max-width:575px){
  .tl-dash-kpis{
    gap:8px!important;
  }
  .tl-dash-kpi{
    min-height:82px!important;
    padding:11px 12px!important;
    gap:9px!important;
    border-radius:15px!important;
  }
  .tl-dash-kpi-ico{
    width:36px!important;
    height:36px!important;
    border-radius:11px!important;
  }
  .tl-dash-kpi-ico svg{
    width:19px!important;
    height:19px!important;
  }
  .tl-dash-kpi-label{
    font-size:9.5px!important;
    letter-spacing:.065em!important;
    line-height:1.15!important;
  }
  .tl-dash-kpi-value{
    font-size:16px!important;
    line-height:1.1!important;
  }
  .tl-dash-kpi-sub{
    display:none!important;
  }
  .tl-kpi-delivered-card{
    min-height:88px!important;
  }
  .tl-kpi-delivered-label .tl-kpi-label-full{
    display:none!important;
  }
  .tl-kpi-delivered-label .tl-kpi-label-short{
    display:inline!important;
  }
  .tl-kpi-delivered-sub{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:3px 5px!important;
    margin-top:3px!important;
    overflow:visible!important;
  }
  .tl-kpi-delivered-sub > span{
    font-size:8.4px!important;
    line-height:1!important;
    letter-spacing:.01em!important;
  }
  .tl-kpi-delivered-sub > span svg{
    display:none!important;
  }
  .tl-kpi-delivered-sub > span + span::before{
    content:"·";
    margin-right:5px;
    color:#6b7a94;
  }
  .tl-last-order{
    padding:10px 12px!important;
    border-radius:15px!important;
  }
  .tl-last-order .tl-lo-title{
    font-size:10px!important;
    letter-spacing:.07em!important;
  }
  .tl-last-order .tl-lo-name{
    max-width:210px!important;
    font-size:12px!important;
    line-height:1.25!important;
  }
  .tl-last-order .tl-lo-meta{
    font-size:10px!important;
  }
  .tl-last-order .tl-lo-status{
    font-size:9.5px!important;
    padding:5px 9px!important;
  }
  .tl-progress-card{
    padding:10px 12px!important;
    border-radius:15px!important;
  }
  .tl-platforms-card{
    padding:8px!important;
    border-radius:17px!important;
  }
  .tl-platform-grid{
    gap:8px!important;
  }
  .tl-platform-btn{
    min-height:64px!important;
    border-radius:12px!important;
  }
  .tl-platform-btn span{
    display:none!important;
  }
  .tl-active-platform{
    padding:13px 14px!important;
    border-radius:13px!important;
  }
  .tl-active-platform .tl-ap-text span{
    display:none!important;
  }
  .tl-order-card .tl-step{
    margin-bottom:10px!important;
  }
  .tl-order-card .tl-step .tl-form-label,
  .tl-order-card label{
    font-size:10.5px!important;
    letter-spacing:.08em!important;
  }
  #select-service-container .select2-selection,
  .tl-order-card #neworder_services + .select2-container .select2-selection{
    min-height:78px!important;
    border-radius:14px!important;
  }
  #select-service-container .select2-selection__rendered,
  .tl-order-card #neworder_services + .select2-container .select2-selection__rendered{
    min-height:76px!important;
    padding:12px 34px 12px 0!important;
    align-items:center!important;
    font-size:13.5px!important;
    line-height:1.35!important;
  }
  html body .select2-dropdown,
  html body .select2-container--open .select2-dropdown{
    border-radius:16px!important;
    padding:7px!important;
  }
  html body .select2-dropdown .select2-results,
  html body .select2-container--default .select2-results{
    max-height:315px!important;
  }
  html body .select2-dropdown .select2-results__option,
  html body .select2-container--default .select2-results__option{
    min-height:60px!important;
    padding:13px 38px 13px 12px!important;
    font-size:13px!important;
    line-height:1.35!important;
  }
  #wh-widget-send-button,
  .wh-widget-send-button,
  .wh-widget-send-button-wrapper,
  .getbutton-widget,
  .getbutton-whatsapp,
  [class*="wh-widget"]{
    transform:scale(.82)!important;
    transform-origin:right bottom!important;
    right:6px!important;
    bottom:12px!important;
  }
}

@media (max-width:380px){
  .tl-last-order .tl-lo-name{
    max-width:175px!important;
  }
  .tl-platform-btn{
    min-height:58px!important;
  }
  #select-service-container .select2-selection,
  .tl-order-card #neworder_services + .select2-container .select2-selection{
    min-height:86px!important;
  }
  #select-service-container .select2-selection__rendered,
  .tl-order-card #neworder_services + .select2-container .select2-selection__rendered{
    min-height:84px!important;
    font-size:13px!important;
  }
}

/* [v1.3.4] Etat actif des filtres reseaux: selection claire, moderne, non bruyante. */
.cat_filter_wrap .nwo-cat-btn{
  isolation:isolate;
}
.cat_filter_wrap .nwo-cat-btn::after{
  content:"\2713";
  position:absolute;
  right:7px;
  top:7px;
  width:17px;
  height:17px;
  border-radius:999px;
  background:linear-gradient(135deg,#22C55E,#16A34A);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  line-height:1;
  box-shadow:0 4px 10px rgba(22,163,74,.28), 0 0 0 2px rgba(8,17,31,.95);
  opacity:0;
  transform:scale(.72);
  transition:opacity .18s ease, transform .18s ease;
  z-index:3;
}
.cat_filter_wrap .nwo-cat-btn.active{
  background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(14,165,233,.16))!important;
  border-color:rgba(56,189,248,.68)!important;
  color:#FFFFFF!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(14,165,233,.20)!important;
}
.cat_filter_wrap .nwo-cat-btn.active::after{
  opacity:1;
  transform:scale(1);
}
.cat_filter_wrap .nwo-cat-btn.active .icons{
  background:linear-gradient(135deg,#2563EB,#0EA5E9)!important;
  border-color:rgba(255,255,255,.24)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(14,165,233,.28), inset 0 1px 0 rgba(255,255,255,.22)!important;
  transform:translateY(-1px) scale(1.04);
}
.cat_filter_wrap .nwo-cat-btn.active .icons img{
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.28));
}
.cat_filter_wrap .nwo-cat-btn.active .text{
  color:#FFFFFF!important;
}
body.daymode .cat_filter_wrap .nwo-cat-btn.active{
  background:linear-gradient(135deg,#EAF2FF,#F4FAFF)!important;
  border-color:#2563EB!important;
  color:#0F172A!important;
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.10), 0 10px 24px rgba(37,99,235,.14)!important;
}
body.daymode .cat_filter_wrap .nwo-cat-btn.active .icons{
  background:linear-gradient(135deg,#2563EB,#0EA5E9)!important;
  color:#fff!important;
}
body.daymode .cat_filter_wrap .nwo-cat-btn::after{
  box-shadow:0 4px 10px rgba(22,163,74,.22), 0 0 0 2px #FFFFFF;
}
@media (max-width:600px){
  .cat_filter_wrap .nwo-cat-btn.active{
    border-color:rgba(56,189,248,.78)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(14,165,233,.18)!important;
  }
  .cat_filter_wrap .nwo-cat-btn::after{
    right:4px;
    top:4px;
    width:15px;
    height:15px;
    font-size:9px;
    box-shadow:0 3px 8px rgba(22,163,74,.24), 0 0 0 2px rgba(8,17,31,.95);
  }
  .cat_filter_wrap .nwo-cat-btn.active .icons{
    transform:scale(1.06);
  }
}

/* [v1.3.3] Offcanvas mobile utilisateur: ouverture rapide depuis la droite. */
@media (max-width:991px){
  #offcanvasExample.offcanvas.offcanvas-end{
    width:min(82vw, 330px)!important;
    max-width:330px!important;
    right:0!important;
    left:auto!important;
    transform:translateX(100%)!important;
    transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .12s ease!important;
    will-change:transform;
    contain:layout paint;
    box-shadow:-18px 0 42px rgba(0,0,0,.34)!important;
  }
  #offcanvasExample.offcanvas.show{
    transform:translateX(0)!important;
  }
  #offcanvasExample .offcanvas-header{
    padding:14px 16px 8px!important;
  }
  #offcanvasExample .offcanvas-body{
    padding:10px 14px 16px!important;
  }
  #offcanvasExample .tl-nav-userbox{
    margin-bottom:12px!important;
  }
  #offcanvasExample .tl-nav-chips{
    display:none!important;
  }
  #offcanvasExample .user_sidebar{
    margin-bottom:10px!important;
  }
  #offcanvasExample .user_sidebar_menu ul{
    gap:7px!important;
  }
  #offcanvasExample .user_sidebar_menu .sidebar-user-item{
    padding:11px 12px!important;
  }
}

/* [v1.3.2] Filtres reseaux plus discrets: le formulaire reste l'action principale. */
.cat_filter_wrap{
  align-items:stretch!important;
}
.cat_filter_wrap .nwo-cat-btn,
.cat_filter_wrap .filter_item{
  min-height:54px!important;
  padding:8px 6px!important;
  gap:4px!important;
  border-radius:12px!important;
}
.cat_filter_wrap .nwo-cat-btn .icons,
.cat_filter_wrap .filter_item .icons{
  width:26px!important;
  height:26px!important;
  border-radius:8px!important;
}
.cat_filter_wrap .nwo-cat-btn .icons img,
.cat_filter_wrap .filter_item .icons img{
  width:17px!important;
  height:17px!important;
}
.cat_filter_wrap .nwo-cat-btn .icons iconify-icon{
  font-size:16px!important;
}
.cat_filter_wrap .nwo-cat-btn .text,
.cat_filter_wrap .filter_item .text{
  font-size:10px!important;
  font-weight:750!important;
}
.cat_filter_wrap .nwo-cat-btn:hover{
  transform:none!important;
}
.cat_filter_wrap .nwo-cat-btn.active{
  transform:none!important;
  box-shadow:0 8px 18px rgba(37,99,235,.22)!important;
}
@media (max-width:600px){
  .cat_filter_wrap{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:5px!important;
    padding:7px!important;
  }
  .cat_filter_wrap .nwo-cat-btn,
  .cat_filter_wrap .filter_item{
    min-height:42px!important;
    padding:5px 2px!important;
    gap:2px!important;
    border-radius:10px!important;
  }
  .cat_filter_wrap .nwo-cat-btn .icons,
  .cat_filter_wrap .filter_item .icons{
    width:22px!important;
    height:22px!important;
    border-radius:7px!important;
  }
  .cat_filter_wrap .nwo-cat-btn .icons img,
  .cat_filter_wrap .filter_item .icons img{
    width:14px!important;
    height:14px!important;
  }
  .cat_filter_wrap .nwo-cat-btn .icons iconify-icon{
    font-size:14px!important;
  }
  .cat_filter_wrap .nwo-cat-btn .text,
  .cat_filter_wrap .filter_item .text{
    display:none!important;
  }
}
@media (max-width:380px){
  .cat_filter_wrap .nwo-cat-btn,
  .cat_filter_wrap .filter_item{
    min-height:38px!important;
  }
  .cat_filter_wrap .nwo-cat-btn .icons,
  .cat_filter_wrap .filter_item .icons{
    width:20px!important;
    height:20px!important;
  }
  .cat_filter_wrap .nwo-cat-btn .icons img,
  .cat_filter_wrap .filter_item .icons img{
    width:13px!important;
    height:13px!important;
  }
}