/* ═══════════════════════════════════════════════════════════
   WebTic — Design System complet pour WHMCS twenty-one
   Reproduit fidèlement le visuel de webtic.online
   ═══════════════════════════════════════════════════════════ */

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

/* ─────────────────────────────────────
   VARIABLES DE DESIGN
───────────────────────────────────── */
:root {
  --wt-navy:       #1e2a4a;
  --wt-navy-deep:  #0e1525;
  --wt-steel:      #3d5a80;
  --wt-coral:      #c9485b;
  --wt-coral-h:    #b53d4e;
  --wt-rose:       #b44a7a;
  --wt-grad:       linear-gradient(135deg,#1e2a4a 0%,#3d5a80 35%,#c9485b 70%,#b44a7a 100%);
  --wt-grad-h:     linear-gradient(90deg,#1e2a4a 0%,#3d5a80 30%,#c9485b 75%,#b44a7a 100%);
  --wt-grad-btn:   linear-gradient(135deg,#c9485b 0%,#b44a7a 100%);
  --wt-green:      #10b981;
  --wt-green-bg:   #ecfdf5;
  --wt-red:        #ef4444;
  --wt-orange:     #f59e0b;
  --wt-orange-bg:  #fffbeb;
  --wt-blue:       #3b82f6;
  --wt-blue-bg:    #eff6ff;
  --wt-purple:     #8b5cf6;
  --wt-purple-bg:  #f5f3ff;
  --wt-cyan:       #06b6d4;
  --wt-cyan-bg:    #ecfeff;
  --wt-r:          10px;
  --wt-rs:         8px;
  --wt-rl:         14px;

  /* Bootstrap overrides */
  --primary:       #c9485b;
  --secondary:     #1e2a4a;
}

[data-theme="light"] {
  --wt-bg:         #f7f8fb;
  --wt-bg2:        #eef0f5;
  --wt-card:       #ffffff;
  --wt-bdr:        #e8eaef;
  --wt-bdr-l:      #f0f1f5;
  --wt-t1:         #111827;
  --wt-t2:         #5f6b7a;
  --wt-t3:         #9ca3af;
  --wt-inp-bg:     #f3f4f8;
  --wt-inp-bdr:    #e2e5ec;
  --wt-nav-bg:     rgba(255,255,255,.95);
  --wt-foot-bg:    #111827;
  --wt-tog-bg:     #e5e7eb;
  --wt-sb-bg:      #ffffff;
  --wt-sb-hov:     #f3f4f8;
  --wt-hero-bg:    #f7f8fb;
}

[data-theme="dark"] {
  --wt-bg:         #0a0f1a;
  --wt-bg2:        #0e1422;
  --wt-card:       #111827;
  --wt-bdr:        #1e2740;
  --wt-bdr-l:      #1a2236;
  --wt-t1:         #e8ecf4;
  --wt-t2:         #8892a6;
  --wt-t3:         #5a6480;
  --wt-inp-bg:     #1a2234;
  --wt-inp-bdr:    #2a3450;
  --wt-nav-bg:     rgba(10,15,26,.95);
  --wt-foot-bg:    #060a12;
  --wt-tog-bg:     #2a3450;
  --wt-sb-bg:      #0c1019;
  --wt-sb-hov:     #131a28;
  --wt-hero-bg:    #0a0f1a;
}

/* ─────────────────────────────────────
   RESET & BASE
───────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.wt-body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: var(--wt-bg) !important;
  color: var(--wt-t1) !important;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
  margin: 0;
  padding: 0;
}

body.wt-body *,
.wt-body input,
.wt-body button,
.wt-body select,
.wt-body textarea {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

a { color: var(--wt-coral); text-decoration: none; }
a:hover { color: var(--wt-rose); }

h1, h2, h3, h4, h5, h6 {
  color: var(--wt-t1);
  font-weight: 700;
}

/* Arrière-plan page */
.primary-bg-color {
  background-color: var(--wt-bg) !important;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--wt-bdr); border-radius: 10px; }

/* ─────────────────────────────────────
   BARRE SUPÉRIEURE
───────────────────────────────────── */
.wt-topstrip {
  background: var(--wt-navy-deep);
  padding: 6px 0;
  font-size: 11px;
  color: rgba(255,255,255,.45);
  z-index: 200;
  position: relative;
}
.wt-topstrip-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.wt-topstrip-links {
  display: flex;
  gap: 14px;
  align-items: center;
}
.wt-topstrip a {
  color: rgba(255,255,255,.5);
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.wt-topstrip a:hover { color: #fff; }
.wt-topstrip svg { width: 12px; height: 12px; }
.wt-topstrip-msg { font-style: italic; }

/* ─────────────────────────────────────
   NAVIGATION
───────────────────────────────────── */
.wt-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wt-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wt-bdr-l);
  transition: background .3s, box-shadow .3s;
}
.wt-nav.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.08);
}
.wt-nav-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wt-nav-logo img {
  height: 30px;
  display: block;
  transition: opacity .2s;
}
.wt-nav-logo:hover img { opacity: .85; }

.wt-nav-links {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
@media (max-width: 900px) { .wt-nav-links { display: none; } }
.wt-nav-links a {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wt-t2);
  border-radius: var(--wt-rs);
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
}
.wt-nav-links a:hover { color: var(--wt-t1); background: var(--wt-sb-hov); }
.wt-nav-links a.act { color: var(--wt-coral); }

.wt-nav-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}
@media (min-width: 901px) { .wt-mob-btn { display: none !important; } }

/* CTA Connexion */
.wt-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  background: var(--wt-grad-btn);
  color: #fff !important;
  border-radius: var(--wt-rs);
  font-size: 11.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none !important;
  white-space: nowrap;
}
.wt-nav-cta:hover {
  box-shadow: 0 4px 14px rgba(201,72,91,.3);
  transform: translateY(-1px);
  color: #fff !important;
}
.wt-nav-outline {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1.5px solid var(--wt-bdr);
  color: var(--wt-t2) !important;
  border-radius: var(--wt-rs);
  font-size: 11.5px;
  font-weight: 600;
  transition: all .15s;
  text-decoration: none !important;
  white-space: nowrap;
}
.wt-nav-outline:hover {
  border-color: var(--wt-coral);
  color: var(--wt-coral) !important;
}

/* Icônes nav */
.wt-nav-icon-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: var(--wt-rs);
  border: 1px solid var(--wt-bdr-l);
  background: var(--wt-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--wt-t2);
  transition: all .15s;
}
.wt-nav-icon-btn:hover { border-color: var(--wt-coral); color: var(--wt-coral); }
.wt-nav-icon-btn svg { width: 14px; height: 14px; }

.wt-badge {
  position: absolute;
  top: 1px; right: 1px;
  min-width: 14px; height: 14px;
  background: var(--wt-coral);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  border-radius: 7px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1.5px solid var(--wt-card);
}
.wt-badge-alert { background: var(--wt-coral); }

/* Utilisateur nav */
.wt-nav-user { position: relative; }
.wt-nav-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--wt-bdr-l);
  border-radius: 20px;
  background: var(--wt-card);
  cursor: pointer;
  transition: all .15s;
  color: var(--wt-t1);
  font-size: 12px;
  font-weight: 500;
}
.wt-nav-user-btn:hover { border-color: var(--wt-coral); }
.wt-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--wt-grad-btn);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wt-caret { width: 12px; height: 12px; color: var(--wt-t3); }
.wt-nav-username { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Toggle thème */
.wt-th-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border-radius: 12px;
}
.wt-th-ic { width: 12px; height: 12px; color: var(--wt-t3); }
.wt-thsw {
  width: 34px; height: 18px;
  border-radius: 9px;
  background: var(--wt-tog-bg);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background .3s;
  padding: 0;
  flex-shrink: 0;
}
.wt-thsw::after {
  content: '';
  position: absolute;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
  top: 2.5px; left: 2.5px;
  transition: left .3s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
[data-theme="dark"] .wt-thsw { background: var(--wt-coral); }
[data-theme="dark"] .wt-thsw::after { left: 19px; }

/* Burger mobile */
.wt-mob-btn {
  display: none;
  width: 32px; height: 32px;
  border: 1px solid var(--wt-bdr-l);
  background: var(--wt-card);
  border-radius: var(--wt-rs);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--wt-t1);
}
@media (max-width: 900px) { .wt-mob-btn { display: flex; } }
.wt-mob-btn svg { width: 18px; height: 18px; }

/* Menu mobile */
.wt-mob-nav {
  display: none;
  flex-direction: column;
  padding: 8px 16px 14px;
  border-top: 1px solid var(--wt-bdr-l);
  background: var(--wt-nav-bg);
  gap: 2px;
  animation: wt-fadeup .15s ease;
}
.wt-nav.mob-open .wt-mob-nav { display: flex; }
.wt-mob-nav a {
  display: block;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wt-t2);
  border-radius: var(--wt-rs);
  transition: all .15s;
  text-decoration: none;
}
.wt-mob-nav a:hover, .wt-mob-nav a.act {
  background: var(--wt-sb-hov);
  color: var(--wt-t1);
}
.wt-mob-nav a.act { color: var(--wt-coral); }
.wt-mob-sep { height: 1px; background: var(--wt-bdr-l); margin: 6px 0; }
.wt-mob-cta {
  background: var(--wt-grad-btn) !important;
  color: #fff !important;
  text-align: center;
  border-radius: var(--wt-rs) !important;
  font-weight: 700 !important;
  margin-top: 4px;
}
.wt-mob-danger { color: var(--wt-red) !important; }

/* ─────────────────────────────────────
   BREADCRUMB
───────────────────────────────────── */
.wt-breadcrumb {
  padding: 6px 0;
  background: var(--wt-bg2);
  border-bottom: 1px solid var(--wt-bdr-l);
  font-size: 11px;
}
.wt-breadcrumb .breadcrumb {
  background: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
}
.wt-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--wt-t3); }
.wt-breadcrumb .breadcrumb-item.active { color: var(--wt-t2); }
.wt-breadcrumb .breadcrumb-item a { color: var(--wt-coral); }
.master-breadcrumb { display: none; }

/* ─────────────────────────────────────
   HERO SECTION
───────────────────────────────────── */
.wt-hero {
  padding: 36px 24px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--wt-hero-bg);
  transition: background .3s;
}
.wt-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(201,72,91,.06) 0%, transparent 50%),
              radial-gradient(circle at 20% 80%, rgba(61,90,128,.05) 0%, transparent 50%);
  pointer-events: none;
}
.wt-hero-in {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.wt-hero-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--wt-coral);
  margin-bottom: 14px;
  padding: 4px 12px;
  background: rgba(201,72,91,.08);
  border-radius: 20px;
}
.wt-hero h1 {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--wt-t1);
}
@media (max-width: 600px) { .wt-hero h1 { font-size: 28px; } }
.wt-grad-text {
  background: var(--wt-grad-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wt-hero p {
  font-size: 15px;
  color: var(--wt-t2);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.wt-hero-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.wt-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  background: var(--wt-grad-btn);
  color: #fff !important;
  border-radius: var(--wt-rs);
  font-size: 13.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none !important;
}
.wt-btn-primary:hover {
  box-shadow: 0 6px 22px rgba(201,72,91,.3);
  transform: translateY(-2px);
  color: #fff !important;
}
.wt-btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  background: transparent;
  color: var(--wt-t1) !important;
  border: 2px solid var(--wt-bdr);
  border-radius: var(--wt-rs);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none !important;
}
.wt-btn-outline:hover {
  border-color: var(--wt-coral);
  color: var(--wt-coral) !important;
}

.wt-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.wt-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  background: var(--wt-card);
  border: 1px solid var(--wt-bdr-l);
  border-radius: 14px;
  font-size: 10.5px;
  color: var(--wt-t2);
  font-weight: 500;
  transition: all .15s;
}
.wt-pill:hover { border-color: var(--wt-coral); color: var(--wt-t1); }

/* ─────────────────────────────────────
   STATS BAR
───────────────────────────────────── */
.wt-stats-bar {
  background: var(--wt-card);
  border-top: 1px solid var(--wt-bdr-l);
  border-bottom: 1px solid var(--wt-bdr-l);
  padding: 28px 24px;
}
.wt-stats-in {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: center;
}
@media (max-width: 600px) { .wt-stats-in { grid-template-columns: repeat(2, 1fr); } }
.wt-stat-n {
  font-size: 30px;
  font-weight: 900;
  background: var(--wt-grad-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.wt-stat-l { font-size: 11px; color: var(--wt-t2); margin-top: 3px; }

/* ─────────────────────────────────────
   SECTIONS
───────────────────────────────────── */
.wt-sec {
  padding: 52px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.wt-sec-tag {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--wt-coral);
  margin-bottom: 6px;
}
.wt-sec-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.3px;
  margin-bottom: 5px;
  color: var(--wt-t1);
}
.wt-sec-desc {
  font-size: 13px;
  color: var(--wt-t2);
  margin-bottom: 28px;
}

/* ─────────────────────────────────────
   GRILLE SERVICES
───────────────────────────────────── */
.wt-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.wt-sv-card {
  background: var(--wt-card);
  border: 1px solid var(--wt-bdr-l);
  border-radius: var(--wt-rl);
  padding: 22px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.wt-sv-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--wt-grad-h);
  opacity: 0;
  transition: opacity .25s;
}
.wt-sv-card:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,.07);
  transform: translateY(-2px);
  border-color: transparent;
}
[data-theme="dark"] .wt-sv-card:hover { box-shadow: 0 10px 32px rgba(0,0,0,.2); }
.wt-sv-card:hover::after { opacity: 1; }
.wt-sv-ic {
  width: 40px; height: 40px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.wt-sv-ic svg { width: 19px; height: 19px; }
.wt-sv-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: var(--wt-t1); }
.wt-sv-card p { font-size: 11.5px; color: var(--wt-t2); line-height: 1.55; margin-bottom: 12px; }
.wt-sv-pr { font-size: 10px; color: var(--wt-t3); margin-bottom: 10px; }
.wt-sv-pr strong { font-size: 18px; color: var(--wt-t1); font-weight: 800; }
.wt-sv-btn {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--wt-coral) !important;
  padding: 5px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
  text-decoration: none !important;
}
.wt-sv-btn:hover { border-color: var(--wt-coral); }

/* ─────────────────────────────────────
   SECTION AIDE
───────────────────────────────────── */
.wt-sec-help { background: var(--wt-bg2); border-radius: var(--wt-r); }
.wt-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.wt-help-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 14px;
  background: var(--wt-card);
  border: 1px solid var(--wt-bdr-l);
  border-radius: var(--wt-r);
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--wt-t1) !important;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.wt-help-card i { font-size: 22px; opacity: .7; }
.wt-help-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06); color: #fff !important; }
.wt-help-card:hover i { opacity: 1; }
.wt-help-teal:hover   { background: #0d9488; border-color: #0d9488; }
.wt-help-coral:hover  { background: var(--wt-coral); border-color: var(--wt-coral); }
.wt-help-yellow:hover { background: #d97706; border-color: #d97706; }
.wt-help-gray:hover   { background: #6b7280; border-color: #6b7280; }
.wt-help-green:hover  { background: var(--wt-green); border-color: var(--wt-green); }

/* ─────────────────────────────────────
   SECTION COMPTE
───────────────────────────────────── */
.wt-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.wt-acc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 14px;
  background: var(--wt-card);
  border: 1px solid var(--wt-bdr-l);
  border-radius: var(--wt-r);
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--wt-t2) !important;
  transition: all .2s;
}
.wt-acc-card i { font-size: 22px; color: var(--wt-navy); opacity: .6; transition: all .2s; }
.wt-acc-card:hover {
  border-color: var(--wt-coral);
  color: var(--wt-coral) !important;
  box-shadow: 0 4px 16px rgba(201,72,91,.1);
}
.wt-acc-card:hover i { color: var(--wt-coral); opacity: 1; }

/* ─────────────────────────────────────
   FOOTER
───────────────────────────────────── */
.wt-footer {
  background: var(--wt-foot-bg) !important;
  padding: 44px 24px 20px;
  color: rgba(255,255,255,.35);
  margin-top: 40px;
}
.wt-footer-in {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 28px;
}
@media (max-width: 768px) { .wt-footer-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .wt-footer-in { grid-template-columns: 1fr; } }

.wt-ft-brand img { height: 26px; margin-bottom: 10px; opacity: .75; filter: brightness(0) invert(1); }
.wt-ft-brand p { font-size: 11.5px; line-height: 1.6; max-width: 240px; color: rgba(255,255,255,.5) !important; }
.wt-ft-contact { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.wt-ft-contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color .15s;
}
.wt-ft-contact a:hover { color: var(--wt-coral); }
.wt-ft-contact svg { width: 13px; height: 13px; }

.wt-ft-col h4 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
}
.wt-ft-col a {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.35);
  padding: 3px 0;
  transition: color .15s;
  text-decoration: none;
}
.wt-ft-col a:hover { color: var(--wt-coral); }

.wt-ft-btm {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255,255,255,.2);
  flex-wrap: wrap;
  gap: 10px;
}
.wt-ft-btm a { color: rgba(255,255,255,.25); text-decoration: none; }
.wt-ft-btm a:hover { color: var(--wt-coral); }
.wt-ft-btm-links { display: flex; gap: 10px; font-size: 10px; }
.wt-ft-btm > span { font-style: italic; }

.wt-ft-soc { display: flex; gap: 6px; }
.wt-ft-soc a {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  color: rgba(255,255,255,.3);
  text-decoration: none !important;
}
.wt-ft-soc a:hover { background: var(--wt-coral); color: #fff; }
.wt-ft-soc svg { width: 13px; height: 13px; }

/* ─────────────────────────────────────
   BOUTON FLOTTANT TELEGRAM
───────────────────────────────────── */
.wt-tg-float {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 90;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2AABEE, #229ED9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(34,158,217,.35);
  transition: all .2s;
  text-decoration: none !important;
}
.wt-tg-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(34,158,217,.45);
}
.wt-tg-float svg { width: 24px; height: 24px; color: #fff; }

/* ─────────────────────────────────────
   CONTENU PRINCIPAL (section#main-body)
───────────────────────────────────── */
#main-body {
  min-height: 60vh;
  padding-top: 0;
}
#main-body > .container {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* ─────────────────────────────────────
   OVERRIDES WHMCS / BOOTSTRAP
───────────────────────────────────── */

/* Cartes Bootstrap */
.card {
  background: var(--wt-card) !important;
  border-color: var(--wt-bdr-l) !important;
  border-radius: var(--wt-r) !important;
  color: var(--wt-t1) !important;
}
.card-body { padding: 1.25rem; }
.card-header, .card-footer {
  background: var(--wt-bg2) !important;
  border-color: var(--wt-bdr-l) !important;
  color: var(--wt-t2) !important;
}
.card-title { color: var(--wt-navy) !important; }

/* Boutons */
.btn-primary, .btn-success, button[type="submit"].btn-primary {
  background: var(--wt-grad-btn) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: var(--wt-rs) !important;
  transition: all .2s;
}
.btn-primary:hover, .btn-success:hover {
  box-shadow: 0 4px 14px rgba(201,72,91,.3) !important;
  transform: translateY(-1px);
}
.btn-default, .btn-secondary {
  background: var(--wt-bg2) !important;
  border-color: var(--wt-bdr) !important;
  color: var(--wt-t2) !important;
  border-radius: var(--wt-rs) !important;
}
.btn-default:hover, .btn-secondary:hover {
  border-color: var(--wt-coral) !important;
  color: var(--wt-coral) !important;
}
.btn-outline-primary {
  color: var(--wt-coral) !important;
  border-color: var(--wt-coral) !important;
  border-radius: var(--wt-rs) !important;
}
.btn-outline-primary:hover {
  background: var(--wt-coral) !important;
  color: #fff !important;
}
.btn-danger { border-radius: var(--wt-rs) !important; }
.btn-link { color: var(--wt-coral) !important; }
.btn-link:hover { color: var(--wt-rose) !important; }

/* Formulaires */
.form-control {
  background: var(--wt-inp-bg) !important;
  border-color: var(--wt-inp-bdr) !important;
  color: var(--wt-t1) !important;
  border-radius: var(--wt-rs) !important;
}
.form-control:focus {
  border-color: var(--wt-coral) !important;
  box-shadow: 0 0 0 3px rgba(201,72,91,.15) !important;
  background: var(--wt-card) !important;
}
.form-control::placeholder { color: var(--wt-t3) !important; }
label { color: var(--wt-t2) !important; font-size: 13px; font-weight: 500; }
.form-group { margin-bottom: 1.2rem; }

/* Tables */
.table {
  color: var(--wt-t1) !important;
}
.table thead th {
  background: var(--wt-bg2) !important;
  border-color: var(--wt-bdr-l) !important;
  color: var(--wt-t3) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}
.table td, .table th {
  border-color: var(--wt-bdr-l) !important;
  color: var(--wt-t1) !important;
  vertical-align: middle !important;
}
.table-hover tbody tr:hover td { background: var(--wt-bg2) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--wt-bg2) !important; }

/* Badges */
.badge-primary   { background: var(--wt-coral) !important; }
.badge-success   { background: var(--wt-green) !important; }
.badge-warning   { background: var(--wt-orange) !important; }
.badge-danger    { background: var(--wt-red) !important; }
.badge-info      { background: var(--wt-blue) !important; }
.badge-secondary { background: var(--wt-navy) !important; }

/* Alertes */
.alert {
  border-radius: var(--wt-r) !important;
  border: 1px solid transparent;
  font-size: 13px;
}
.alert-info    { background: var(--wt-blue-bg) !important; border-color: rgba(59,130,246,.2) !important; color: #1d4ed8 !important; }
.alert-success { background: var(--wt-green-bg) !important; border-color: rgba(16,185,129,.2) !important; color: #065f46 !important; }
.alert-warning { background: var(--wt-orange-bg) !important; border-color: rgba(245,158,11,.2) !important; color: #92400e !important; }
.alert-danger  { background: #fef2f2 !important; border-color: rgba(239,68,68,.2) !important; color: #991b1b !important; }
[data-theme="dark"] .alert-info    { color: #93c5fd !important; }
[data-theme="dark"] .alert-success { color: #6ee7b7 !important; }
[data-theme="dark"] .alert-warning { color: #fcd34d !important; }
[data-theme="dark"] .alert-danger  { color: #fca5a5 !important; background: rgba(239,68,68,.1) !important; }

/* Pagination */
.page-item.active .page-link {
  background: var(--wt-coral) !important;
  border-color: var(--wt-coral) !important;
}
.page-link {
  color: var(--wt-coral) !important;
  background: var(--wt-card) !important;
  border-color: var(--wt-bdr-l) !important;
}
.page-link:hover { background: var(--wt-bg2) !important; }

/* Tabs */
.nav-tabs { border-color: var(--wt-bdr-l) !important; }
.nav-tabs .nav-link {
  color: var(--wt-t2) !important;
  border-radius: var(--wt-rs) var(--wt-rs) 0 0 !important;
  font-weight: 600;
  font-size: 13px;
}
.nav-tabs .nav-link:hover { color: var(--wt-coral) !important; }
.nav-tabs .nav-link.active {
  color: var(--wt-coral) !important;
  border-bottom-color: var(--wt-card) !important;
  background: var(--wt-card) !important;
}
.nav-pills .nav-link.active {
  background: var(--wt-coral) !important;
}

/* Modales */
.modal-content {
  background: var(--wt-card) !important;
  border-color: var(--wt-bdr) !important;
  border-radius: var(--wt-r) !important;
}
.modal-header, .modal-footer {
  border-color: var(--wt-bdr-l) !important;
}
.modal-title { color: var(--wt-t1) !important; }

/* Sidebar WHMCS */
.sidebar {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-r) !important;
}
.sidebar .list-group-item {
  background: var(--wt-card) !important;
  border-color: var(--wt-bdr-l) !important;
  color: var(--wt-t2) !important;
  font-size: 13px;
}
.sidebar .list-group-item:hover { background: var(--wt-bg2) !important; color: var(--wt-t1) !important; }
.sidebar .list-group-item.active {
  background: rgba(201,72,91,.08) !important;
  border-color: var(--wt-coral) !important;
  color: var(--wt-coral) !important;
  font-weight: 600;
}

/* ── Sidebar icon fix (Font Awesome) ── */
.sidebar-menu-item-icon-wrapper {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(201,72,91,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10px;
}
.sidebar-menu-item-icon {
  font-size: 13px !important;
  color: var(--wt-coral) !important;
  width: auto !important;
  display: inline-block !important;
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
}
.list-group-item.active .sidebar-menu-item-icon { color: var(--wt-coral) !important; }
.sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 0; }
.sidebar-menu-item-label { flex: 1; font-size: 13px; }
.sidebar .card-header i.fas,
.sidebar .card-header i.far,
.sidebar .card-header i.fal {
  color: var(--wt-coral) !important;
  margin-right: 6px;
}
/* Ensure FA icons are never hidden by color:inherit */
.sidebar i.fas,
.sidebar i.far,
.sidebar i.fal,
.sidebar i.fab {
  display: inline-block !important;
  font-style: normal !important;
}
/* Card-sidebar header */
.card-sidebar > .card-header {
  background: var(--wt-card) !important;
  border-bottom: 2px solid var(--wt-coral) !important;
  padding: 10px 16px !important;
}
.card-sidebar > .card-header h3 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--wt-navy) !important;
  margin: 0 !important;
}
[data-theme="dark"] .card-sidebar > .card-header h3 { color: var(--wt-t1) !important; }

/* Panels WHMCS */
.panel {
  background: var(--wt-card) !important;
  border-color: var(--wt-bdr-l) !important;
  border-radius: var(--wt-r) !important;
  box-shadow: none !important;
}
.panel-heading {
  background: var(--wt-bg2) !important;
  border-color: var(--wt-bdr-l) !important;
  color: var(--wt-t1) !important;
}
.panel-default > .panel-heading { color: var(--wt-t1) !important; }
.panel-title { color: var(--wt-navy) !important; font-weight: 700; }
.panel-body { color: var(--wt-t1) !important; }

/* Accents couleurs pour action-icon-btns (page d'accueil) */
.card-accent-teal, .card-accent-pomegranate, .card-accent-sun-flower,
.card-accent-asbestos, .card-accent-green, .card-accent-midnight-blue {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-r) !important;
  color: var(--wt-t2) !important;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 14px !important;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s !important;
}
.card-accent-teal:hover        { background: #0d9488 !important; color: #fff !important; border-color: transparent !important; }
.card-accent-pomegranate:hover { background: var(--wt-coral) !important; color: #fff !important; border-color: transparent !important; }
.card-accent-sun-flower:hover  { background: #d97706 !important; color: #fff !important; border-color: transparent !important; }
.card-accent-asbestos:hover    { background: #6b7280 !important; color: #fff !important; border-color: transparent !important; }
.card-accent-green:hover       { background: var(--wt-green) !important; color: #fff !important; border-color: transparent !important; }
.card-accent-midnight-blue:hover { background: var(--wt-navy) !important; color: #fff !important; border-color: transparent !important; }
.ico-container { margin: 0; font-size: 24px; }

/* Dropdown Bootstrap */
.dropdown-menu {
  background: var(--wt-card) !important;
  border-color: var(--wt-bdr-l) !important;
  border-radius: var(--wt-r) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.1) !important;
  font-size: 13px;
}
.dropdown-item {
  color: var(--wt-t2) !important;
  padding: .45rem 1rem;
  font-size: 12px;
  transition: all .12s;
}
.dropdown-item:hover {
  background: var(--wt-bg2) !important;
  color: var(--wt-t1) !important;
}
.dropdown-item.text-danger:hover { color: var(--wt-red) !important; }
.dropdown-divider { border-color: var(--wt-bdr-l) !important; }

/* Input groups */
.input-group-text {
  background: var(--wt-bg2) !important;
  border-color: var(--wt-inp-bdr) !important;
  color: var(--wt-t2) !important;
}

/* Client alerts popover */
.client-alerts { list-style: none; padding: 0; margin: 0; }
.client-alerts li { padding: 8px 12px; border-bottom: 1px solid var(--wt-bdr-l); }
.client-alerts li.none { color: var(--wt-t3); font-size: 12px; }
.client-alerts a { color: var(--wt-t2) !important; display: flex; gap: 8px; font-size: 12px; }
.client-alerts a:hover { color: var(--wt-t1) !important; }
.client-alerts .message { font-size: 11.5px; color: var(--wt-t2); }

/* Breadcrumb interne WHMCS */
.breadcrumb {
  background: transparent !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  font-size: 11px !important;
}
.breadcrumb-item a { color: var(--wt-coral) !important; }
.breadcrumb-item.active { color: var(--wt-t3) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--wt-t3) !important; }

/* Textes de base */
body.wt-body, p, span, div { color: var(--wt-t1); }
.text-muted { color: var(--wt-t3) !important; }
.text-primary { color: var(--wt-coral) !important; }
.text-success { color: var(--wt-green) !important; }
.text-danger  { color: var(--wt-red) !important; }
.text-warning { color: var(--wt-orange) !important; }
.text-info    { color: var(--wt-blue) !important; }

/* Arrière-plans */
.bg-primary  { background: var(--wt-coral) !important; }
.bg-light    { background: var(--wt-bg2) !important; }
.bg-white    { background: var(--wt-card) !important; }
.bg-dark     { background: var(--wt-navy) !important; }

/* Lien retour admin */
.btn-return-to-admin {
  position: fixed;
  bottom: 80px; right: 20px;
  z-index: 1000;
  background: var(--wt-navy);
  color: #fff;
  border-radius: var(--wt-rs);
  padding: 8px 14px;
  font-size: 12px;
}

/* Bouton de retour admin flottant */
.w-hidden { display: none !important; }

/* ─────────────────────────────────────
   HEADER WHMCS (désactivé — remplacé par wt-nav)
───────────────────────────────────── */
header.header { display: none !important; }
.main-navbar-wrapper { display: none !important; }
nav.navbar { display: none !important; }

/* ─────────────────────────────────────
   ANIMATIONS
───────────────────────────────────── */
@keyframes wt-fadeup {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */
@media (max-width: 768px) {
  .wt-hero h1 { font-size: 28px; }
  .wt-hero p  { font-size: 13px; }
  .wt-topstrip-msg { display: none; }
  .wt-nav-cta, .wt-nav-outline { font-size: 11px; padding: 6px 12px; }
  #main-body > .container { padding-top: 16px; }
  .wt-sec { padding: 36px 16px; }
  .wt-svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .wt-svc-grid { grid-template-columns: 1fr; }
  .wt-help-grid, .wt-account-grid { grid-template-columns: 1fr 1fr; }
  .wt-nav-outline { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE LOGIN / REGISTER — SPLIT-SCREEN
   ═══════════════════════════════════════════════════════════ */

/* La section main-body n'a pas de padding sur les pages login/register */
body.wt-body .login-form ~ * { }

/* Wrapper split-screen — remonte pour couvrir tout l'espace */
.wt-login-wrap {
  display: flex;
  min-height: calc(100vh - 120px);
  width: 100%;
  overflow: hidden;
}

/* Panneau gauche — branding navy */
.wt-login-left {
  flex: 0 0 42%;
  background: linear-gradient(150deg, var(--wt-navy-deep) 0%, var(--wt-navy) 50%, #2a3f6f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
}
.wt-login-left::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,72,91,.15) 0%, transparent 65%);
  top: -100px; right: -80px;
  pointer-events: none;
}
.wt-login-left::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,74,122,.1) 0%, transparent 65%);
  bottom: -60px; left: -60px;
  pointer-events: none;
}
.wt-login-left-in {
  position: relative;
  z-index: 2;
  max-width: 340px;
  width: 100%;
}
.wt-login-logo img {
  height: 34px;
  opacity: .9;
  margin-bottom: 32px;
  display: block;
}
.wt-login-tagline {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  color: #fff !important;
  margin-bottom: 12px;
  letter-spacing: -.3px;
}
.wt-login-tagline span {
  background: linear-gradient(90deg, #c9485b, #b44a7a) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.wt-login-sub {
  font-size: 13px;
  color: rgba(255,255,255,.7) !important;
  line-height: 1.6;
  margin-bottom: 28px;
}
.wt-login-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wt-login-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,.8) !important;
  line-height: 1.45;
}
.wt-login-feat-ic {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  background: rgba(201,72,91,.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wt-login-feat-ic svg {
  width: 13px; height: 13px;
  color: #e88a96 !important;
}
.wt-login-stats {
  display: flex;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.wt-login-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wt-login-stat strong {
  font-size: 20px;
  font-weight: 900 !important;
  background: linear-gradient(90deg, #c9485b, #b44a7a) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}
.wt-login-stat span {
  font-size: 10px;
  color: rgba(255,255,255,.6) !important;
}

/* Panneau droit — formulaire */
.wt-login-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wt-bg);
  padding: 48px 32px;
}
.wt-login-form-wrap {
  width: 100%;
  max-width: 400px;
}
.wt-login-form-header {
  margin-bottom: 28px;
}
.wt-login-title {
  font-size: 28px;
  font-weight: 900;
  color: var(--wt-t1);
  letter-spacing: -.4px;
  margin-bottom: 6px;
}
.wt-login-hint {
  font-size: 13px;
  color: var(--wt-t2);
  margin: 0;
}

/* Champs de formulaire login custom */
.wt-fg { margin-bottom: 16px; }
.wt-fl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--wt-t2) !important;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.wt-fl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.wt-forgot {
  font-size: 11px;
  color: var(--wt-coral) !important;
  font-weight: 600;
  text-decoration: none;
}
.wt-forgot:hover { color: var(--wt-rose) !important; text-decoration: underline; }

.wt-fi-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.wt-fi-ic {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--wt-t3);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.wt-fi-ic svg { width: 14px; height: 14px; }
.wt-fi {
  width: 100%;
  padding: 10px 11px 10px 36px;
  background: var(--wt-inp-bg) !important;
  border: 1.5px solid var(--wt-inp-bdr) !important;
  border-radius: var(--wt-rs) !important;
  font-size: 13.5px;
  color: var(--wt-t1) !important;
  transition: all .2s;
  outline: none;
}
.wt-fi::placeholder { color: var(--wt-t3) !important; }
.wt-fi:focus {
  border-color: var(--wt-coral) !important;
  box-shadow: 0 0 0 3px rgba(201,72,91,.12) !important;
  background: var(--wt-card) !important;
}
.wt-pw-eye {
  position: absolute;
  right: 10px;
  top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--wt-t3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 5px;
  transition: color .15s;
}
.wt-pw-eye:hover { color: var(--wt-coral); }
.wt-pw-eye svg { width: 14px; height: 14px; }

.wt-login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}
.wt-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wt-t2) !important;
  cursor: pointer;
  font-weight: 500;
}
.wt-remember input[type="checkbox"] { accent-color: var(--wt-coral); width: 14px; height: 14px; }
.wt-submit-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: var(--wt-grad-btn) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--wt-rs) !important;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.wt-submit-btn:hover {
  box-shadow: 0 4px 16px rgba(201,72,91,.35) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

.wt-login-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: var(--wt-t3);
  padding-top: 16px;
  border-top: 1px solid var(--wt-bdr-l);
}
.wt-login-footer a {
  color: var(--wt-coral) !important;
  font-weight: 700;
  margin-left: 4px;
}
.wt-login-footer a:hover { color: var(--wt-rose) !important; }

/* Responsive login */
@media (max-width: 900px) {
  .wt-login-left { display: none; }
  .wt-login-wrap { min-height: auto; }
  .wt-login-right { padding: 32px 20px; }
}
@media (max-width: 480px) {
  .wt-login-title { font-size: 22px; }
  .wt-login-actions { flex-direction: column; align-items: stretch; }
  .wt-submit-btn { justify-content: center; }
}

/* Supprime le container/card Bootstrap autour du formulaire login */
.login-form.wt-login-form .card,
.login-form.wt-login-form .card-body,
.login-form.wt-login-form .card-footer { all: unset; display: contents; }

/* ═══════════════════════════════════════════════════════════
   PAGE REGISTER — cohérente avec login
   ═══════════════════════════════════════════════════════════ */
.register-container, .register-page #main-body .container {
  max-width: 640px;
  margin: 0 auto;
}
#register .card,
.register-form-container .card {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-rl) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.06) !important;
}
#register .card-header,
.register-form-container .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--wt-bdr-l) !important;
  padding: 20px 24px 14px !important;
}
#register .card-header h3,
.register-form-container .card-header h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--wt-t1);
}
/* Titre de section register */
#register h2,
#register h3 { color: var(--wt-t1) !important; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════
   CART / PANIER / COMMANDE
   ═══════════════════════════════════════════════════════════ */

/* Étapes de commande */
.order-steps, .checkout-steps, .progressbar {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  counter-reset: step;
}
.order-steps li, .checkout-steps li, .progressbar li {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--wt-t3);
  position: relative;
  padding: 0 8px 14px;
  list-style: none;
}
.order-steps li::before, .checkout-steps li::before, .progressbar li::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--wt-bg2);
  border: 2px solid var(--wt-bdr);
  color: var(--wt-t3);
  font-size: 11px;
  font-weight: 700;
  margin: 0 auto 6px;
}
.order-steps li.active::before, .checkout-steps li.active::before, .progressbar li.active::before {
  background: var(--wt-grad-btn);
  border-color: transparent;
  color: #fff;
}
.order-steps li.complete::before, .checkout-steps li.complete::before, .progressbar li.complete::before {
  background: var(--wt-green);
  border-color: transparent;
  color: #fff;
}
.order-steps li.active, .checkout-steps li.active, .progressbar li.active { color: var(--wt-t1); }
.order-steps li.complete, .checkout-steps li.complete, .progressbar li.complete { color: var(--wt-green); }

/* Grille produits panier */
.product-grid, .products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.product-box, .productbox {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-rl) !important;
  padding: 20px !important;
  transition: all .25s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.product-box::after, .productbox::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--wt-grad-h);
  opacity: 0;
  transition: opacity .2s;
}
.product-box:hover, .productbox:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.07);
  transform: translateY(-2px);
  border-color: transparent !important;
}
[data-theme="dark"] .product-box:hover,
[data-theme="dark"] .productbox:hover { box-shadow: 0 8px 28px rgba(0,0,0,.2); }
.product-box:hover::after, .productbox:hover::after { opacity: 1; }
.product-box .product-title, .productbox .product-name,
.product-box h3, .productbox h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--wt-t1) !important;
  margin-bottom: 6px !important;
}
.product-box .product-price, .productbox .product-pricing {
  font-size: 20px;
  font-weight: 900;
  color: var(--wt-t1);
  margin: 8px 0 4px;
}
.product-box .product-desc, .productbox .product-description {
  font-size: 12px;
  color: var(--wt-t2);
  line-height: 1.55;
  margin-bottom: 14px;
}
.product-box .btn-order, .productbox .order-button,
.btn-order-now {
  display: inline-flex !important;
  align-items: center;
  padding: 8px 16px !important;
  background: var(--wt-grad-btn) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--wt-rs) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: all .2s;
  text-decoration: none !important;
}
.product-box .btn-order:hover, .productbox .order-button:hover,
.btn-order-now:hover {
  box-shadow: 0 4px 14px rgba(201,72,91,.3) !important;
}

/* Résumé commande (sidebar panier) */
.order-summary, .cart-summary {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-rl) !important;
  padding: 20px !important;
}
.order-summary h4, .cart-summary h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--wt-t1);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wt-bdr-l);
}
.order-summary .total, .cart-summary .total {
  font-size: 18px;
  font-weight: 900;
  color: var(--wt-coral);
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════
   FACTURES / INVOICES
   ═══════════════════════════════════════════════════════════ */
.invoice-header {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-rl) !important;
  padding: 24px !important;
  margin-bottom: 20px;
}
.invoice-logo img { height: 28px; }
.invoice-number {
  font-size: 22px;
  font-weight: 900;
  color: var(--wt-t1);
}
.invoice-status .label,
.invoice-status .badge {
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.label-success, .badge-success { background: rgba(16,185,129,.12) !important; color: var(--wt-green) !important; }
.label-warning, .badge-warning { background: rgba(245,158,11,.12) !important; color: #d97706 !important; }
.label-danger,  .badge-danger  { background: rgba(239,68,68,.1) !important; color: var(--wt-red) !important; }
.label-default, .badge-secondary { background: var(--wt-bg2) !important; color: var(--wt-t2) !important; }

/* Tableau items facture */
.invoice-table th { font-size: 9px !important; text-transform: uppercase !important; letter-spacing: .5px !important; }
.invoice-total-row td {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--wt-t1) !important;
}
.invoice-grand-total {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--wt-coral) !important;
}

/* Bouton de paiement */
.payinvoice-btn, .btn-pay-invoice,
a[href*="payinvoice"], button[name*="pay"] {
  background: var(--wt-grad-btn) !important;
  border: none !important;
  border-radius: var(--wt-rs) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
}

/* ═══════════════════════════════════════════════════════════
   SUPPORT TICKETS
   ═══════════════════════════════════════════════════════════ */
.ticket-reply {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-r) !important;
  padding: 16px !important;
  margin-bottom: 12px;
  transition: background .2s;
}
.ticket-reply.admin-reply {
  background: rgba(201,72,91,.04) !important;
  border-color: rgba(201,72,91,.15) !important;
}
[data-theme="dark"] .ticket-reply.admin-reply {
  background: rgba(201,72,91,.07) !important;
}
.ticket-reply .reply-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wt-bdr-l);
}
.ticket-reply .reply-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--wt-t1);
}
.ticket-reply .reply-date {
  font-size: 11px;
  color: var(--wt-t3);
  margin-left: auto;
}
.ticket-reply .reply-body {
  font-size: 13px;
  color: var(--wt-t1);
  line-height: 1.65;
}

/* Avatar ticket */
.ticket-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--wt-grad-btn);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ticket-avatar.admin { background: linear-gradient(135deg, var(--wt-navy), var(--wt-steel)); }

/* Statut ticket */
.ticketstatus-open    { color: var(--wt-green) !important; font-weight: 700; }
.ticketstatus-answered{ color: var(--wt-blue) !important; font-weight: 700; }
.ticketstatus-closed  { color: var(--wt-t3) !important; font-weight: 700; }
.ticketstatus-onhold  { color: var(--wt-orange) !important; font-weight: 700; }

/* Formulaire nouveau ticket / réponse */
.ticket-reply-form textarea.form-control,
#reply textarea {
  min-height: 120px;
  resize: vertical;
}

/* ═══════════════════════════════════════════════════════════
   KNOWLEDGEBASE
   ═══════════════════════════════════════════════════════════ */
.kb-search-bar {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-rl) !important;
  padding: 24px !important;
  margin-bottom: 24px;
}
.kb-search-bar .form-control {
  border-radius: 50px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
}
.kb-search-bar .btn { border-radius: 50px !important; }

/* Catégories KB */
.kb-category {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-rl) !important;
  padding: 20px !important;
  margin-bottom: 16px;
  transition: all .2s;
}
.kb-category:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  border-color: rgba(201,72,91,.2) !important;
}
.kb-category h4, .kb-category .category-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--wt-coral);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kb-category h4 i, .kb-category .category-title i {
  color: var(--wt-coral);
  opacity: .8;
}
.kbarticle-list, .article-list { list-style: none; padding: 0; margin: 0; }
.kbarticle-list li, .article-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--wt-bdr-l);
}
.kbarticle-list li:last-child, .article-list li:last-child { border-bottom: none; }
.kbarticle-list a, .article-list a {
  font-size: 13px;
  color: var(--wt-t1) !important;
  font-weight: 500;
  transition: color .15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kbarticle-list a::before, .article-list a::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--wt-coral);
  flex-shrink: 0;
}
.kbarticle-list a:hover, .article-list a:hover { color: var(--wt-coral) !important; }

/* Article KB */
.kbarticle-body, .article-body {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-rl) !important;
  padding: 28px !important;
  line-height: 1.75;
  font-size: 14px;
  color: var(--wt-t1);
}
.kbarticle-body h2, .kbarticle-body h3,
.article-body h2, .article-body h3 {
  color: var(--wt-t1);
  font-weight: 700;
  margin: 20px 0 8px;
}
.kbarticle-body code, .article-body code {
  background: var(--wt-bg2);
  border: 1px solid var(--wt-bdr-l);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .88em;
  color: var(--wt-coral);
}
.kbarticle-body pre, .article-body pre {
  background: var(--wt-bg2) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-rs) !important;
  padding: 14px !important;
  font-size: 12px;
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════
   CLIENT AREA — SERVICES
   ═══════════════════════════════════════════════════════════ */
.service-status-active   { color: var(--wt-green) !important; font-weight: 700; }
.service-status-suspended{ color: var(--wt-orange) !important; font-weight: 700; }
.service-status-cancelled { color: var(--wt-red) !important; font-weight: 700; }
.service-status-pending  { color: var(--wt-blue) !important; font-weight: 700; }

/* Carte service individuel */
.service-info-card {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-rl) !important;
  overflow: hidden;
}
.service-info-card .card-header {
  background: linear-gradient(135deg, var(--wt-navy), var(--wt-steel)) !important;
  color: #fff !important;
  border: none !important;
  padding: 16px 20px !important;
}
.service-info-card .card-header h3,
.service-info-card .card-header .panel-title { color: #fff !important; font-weight: 700; }

/* Stats du compte client */
.client-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.client-stat-card {
  background: var(--wt-card);
  border: 1px solid var(--wt-bdr-l);
  border-radius: var(--wt-r);
  padding: 16px;
  text-align: center;
  transition: all .2s;
}
.client-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.client-stat-value {
  font-size: 24px;
  font-weight: 900;
  background: var(--wt-grad-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.client-stat-label {
  font-size: 11px;
  color: var(--wt-t2);
  margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════
   SERVER STATUS / ÉTAT RÉSEAU
   ═══════════════════════════════════════════════════════════ */
.server-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.server-status-card {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-r) !important;
  padding: 16px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
.server-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.server-status-dot.up   { background: var(--wt-green); box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.server-status-dot.down { background: var(--wt-red); box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
.server-status-dot.maintenance { background: var(--wt-orange); box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.status-ok    { color: var(--wt-green) !important; font-weight: 700; }
.status-error { color: var(--wt-red) !important; font-weight: 700; }
.status-warn  { color: var(--wt-orange) !important; font-weight: 700; }
#server_details .text-success { color: var(--wt-green) !important; }
#server_details .text-danger  { color: var(--wt-red) !important; }

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════ */
.contact-info-box {
  background: linear-gradient(135deg, var(--wt-navy), var(--wt-steel));
  border-radius: var(--wt-rl);
  padding: 24px;
  color: rgba(255,255,255,.8);
}
.contact-info-box h3 { color: #fff; margin-bottom: 16px; font-weight: 800; }
.contact-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
}
.contact-info-item svg { width: 16px; height: 16px; color: rgba(255,255,255,.5); flex-shrink: 0; }
.contact-form-card {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-rl) !important;
  padding: 24px !important;
}

/* ═══════════════════════════════════════════════════════════
   ANNONCES / ANNOUNCEMENTS
   ═══════════════════════════════════════════════════════════ */
.announcement-card {
  background: var(--wt-card) !important;
  border: 1px solid var(--wt-bdr-l) !important;
  border-radius: var(--wt-rl) !important;
  padding: 20px !important;
  margin-bottom: 16px;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.announcement-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--wt-grad-btn);
  border-radius: 3px 0 0 3px;
}
.announcement-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  border-color: rgba(201,72,91,.2) !important;
}
.announcement-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--wt-t1);
  margin-bottom: 6px;
}
.announcement-date {
  font-size: 11px;
  color: var(--wt-t3);
  margin-bottom: 10px;
}
.announcement-body {
  font-size: 13px;
  color: var(--wt-t2);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB WEBTIC
   ═══════════════════════════════════════════════════════════ */
.wt-breadcrumb {
  background: transparent;
  padding: 8px 0 0;
  border-bottom: 1px solid var(--wt-bdr-l);
  margin-bottom: 0;
}
.wt-breadcrumb .container { padding-top: 4px; padding-bottom: 4px; }

/* ═══════════════════════════════════════════════════════════
   MAIN BODY CONTAINER
   ═══════════════════════════════════════════════════════════ */
#main-body { padding-bottom: 0; }
#main-body > .container {
  padding-top: 24px;
  padding-bottom: 32px;
}
/* Page login/register — pas de padding top */
.wt-login-wrap { padding-top: 0; }
#main-body:has(.wt-login-wrap) > .container {
  padding-top: 0;
  padding-bottom: 0;
  max-width: 100%;
}
/* Supprimer padding col si login */
#main-body:has(.wt-login-wrap) .primary-content {
  padding-left: 0;
  padding-right: 0;
}

/* ═══════════════════════════════════════════════════════════
   BOUTON FLOTTANT TELEGRAM
   ═══════════════════════════════════════════════════════════ */
.wt-tg-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 500;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2AABEE, #229ED9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(34,158,217,.4);
  transition: all .2s;
  border: none;
  text-decoration: none !important;
}
.wt-tg-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(34,158,217,.5);
}
.wt-tg-float svg { width: 24px; height: 24px; color: #fff; }

/* ═══════════════════════════════════════════════════════════
   AMÉLIORATIONS GÉNÉRALES DARK MODE
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .card { background: var(--wt-card) !important; border-color: var(--wt-bdr-l) !important; }
[data-theme="dark"] .form-control { color: var(--wt-t1) !important; }
[data-theme="dark"] .table td, [data-theme="dark"] .table th { color: var(--wt-t1) !important; }
[data-theme="dark"] label { color: var(--wt-t2) !important; }
[data-theme="dark"] .modal-content { background: var(--wt-card) !important; }
[data-theme="dark"] .sidebar { background: var(--wt-card) !important; }
[data-theme="dark"] .panel { background: var(--wt-card) !important; }
[data-theme="dark"] .dropdown-menu { background: var(--wt-card) !important; }
[data-theme="dark"] .input-group-text { background: var(--wt-bg2) !important; color: var(--wt-t2) !important; }
[data-theme="dark"] .wt-login-right { background: var(--wt-bg); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE SUPPLÉMENTAIRE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .server-status-grid { grid-template-columns: 1fr 1fr; }
  .product-grid, .products { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .server-status-grid,
  .product-grid, .products { grid-template-columns: 1fr; }
  .wt-tg-float { bottom: 16px; right: 16px; width: 44px; height: 44px; }
  .wt-tg-float svg { width: 20px; height: 20px; }
}