/*
 * Nexet Lab — finitions de la charte sur le thème EMYUI AWS Pro.
 * Source des couleurs : brand/nexet-brand.css (palette slate + accent emerald, police Inter).
 * Les couleurs EMYUI ont déjà été remplacées dans main.css, whmcs.theme.css et bootstrap.css ;
 * ce fichier ne contient que les réglages qui ne se déduisent pas d'un simple remplacement.
 */
:root {
  --nx-ink-950: #020617;
  --nx-ink-900: #0f172a;
  --nx-ink-700: #334155;
  --nx-ink-200: #e2e8f0;
  --nx-accent-400: #34d399;
  --nx-accent-700: #047857;
  --nx-radius: 8px;
}

body,
button,
input,
select,
textarea {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, .h1, .h2, .h3 {
  letter-spacing: -0.025em;
}

/* Liens de texte : accent emerald foncé (lisible sur fond clair). */
.form-items a:not(.btn),
.form-group a:not(.btn),
.card-body p a:not(.btn) {
  color: var(--nx-accent-700);
}
.form-items a:not(.btn):hover,
.form-group a:not(.btn):hover,
.card-body p a:not(.btn):hover {
  color: var(--nx-ink-900);
}

/* Champs : contour emerald au focus au lieu de l'anneau gris. */
.form-control:focus,
.custom-select:focus {
  border-color: var(--nx-accent-400);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}

/* Boutons pleins sombres : slate-900 au lieu du noir pur, coins arrondis Nexet. */
.btn-dark,
.btn-primary,
.btn-black {
  background-color: var(--nx-ink-900);
  border-color: var(--nx-ink-900);
  border-radius: var(--nx-radius) !important; /* écrase .rounded-0 d'EMYUI */
}
.btn-dark:hover,
.btn-primary:hover,
.btn-black:hover {
  background-color: var(--nx-ink-700);
  border-color: var(--nx-ink-700);
}

/* ------------------------------------------------------------------
 * Accueil et pied de page Nexet Lab (homepage.tpl, footer.tpl)
 * ------------------------------------------------------------------ */
.nx-section { padding: 88px 0; background: #fff; }
.nx-section-alt { background: #f8fafc; }
.nx-section-dark { background: var(--nx-ink-950); }
.nx-section-dark .nx-title { color: #fff; }
.nx-section-dark .nx-lead { color: #94a3b8; }

.nx-section-head { max-width: 760px; margin-bottom: 48px; }
.nx-title { font-size: 32px; font-weight: 800; line-height: 1.2; color: var(--nx-ink-900); margin-bottom: 16px; }
.nx-lead { font-size: 18px; line-height: 1.6; color: #475569; max-width: 640px; margin-bottom: 32px; }

.nx-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--nx-ink-200); border-radius: 12px; padding: 28px;
}
.nx-card-title { font-size: 19px; font-weight: 700; color: var(--nx-ink-900); margin: 20px 0 10px; }
.nx-card-text { font-size: 15px; line-height: 1.6; color: #475569; }
.nx-card-actions { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nx-card-actions .btn { padding: 10px 20px; font-size: 14px; font-weight: 600; }

.nx-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--nx-radius);
  background: var(--nx-ink-900); color: #fff; font-size: 20px;
}
.nx-icon-sm { width: 40px; height: 40px; font-size: 17px; flex-shrink: 0; }
.nx-link { color: var(--nx-accent-700); font-weight: 600; font-size: 14px; }
.nx-link:hover { color: var(--nx-ink-900); text-decoration: none; }

.nx-feature { display: flex; gap: 16px; }
.nx-feature-title { font-size: 17px; font-weight: 700; color: var(--nx-ink-900); margin: 0 0 6px; }

.nx-step {
  align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--nx-accent-700);
  background: #ecfdf5; border-radius: 999px; padding: 4px 12px;
}
.nx-step + .nx-card-title { margin-top: 16px; }

.nx-btn-light { background: #fff; color: var(--nx-ink-900); border-radius: var(--nx-radius); padding: 12px 28px; font-weight: 600; }

/* Pied de page */
.nx-footer { background: var(--nx-ink-950); color: #94a3b8; padding: 72px 0 32px; }
/* Le thème force la couleur des <p> : on la reprend pour le fond sombre. */
.nx-footer p, .nx-footer .nx-footer-text { color: #94a3b8; }
.nx-footer-text { font-size: 14px; line-height: 1.6; max-width: 300px; }
.nx-footer-title { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.nx-footer-list li { padding: 4px 0; }
.nx-footer-list a { color: #94a3b8; font-size: 14px; }
.nx-footer-list a:hover { color: #fff; text-decoration: none; }
.nx-footer-bottom { border-top: 1px solid #1e293b; margin-top: 32px; padding-top: 24px; font-size: 13px; }

/* Bandeau du haut : mentions sans lien (le thème ne colore que les <a>). */
.whmcs-top-header-area .right-top-header-area-menu span { color: #cbd5e1; font-size: 13px; }
.whmcs-top-header-area .right-top-header-area-menu li { margin-right: 20px; }
@media (max-width: 767px) { .whmcs-top-header-area .right-top-header-area-menu { display: none; } }
.whmcs-top-header-area .fa-check { color: var(--nx-accent-400); }

@media (max-width: 767px) {
  .nx-section { padding: 56px 0; }
  .nx-title { font-size: 26px; }
}

/* Panier (emyui_cart_aws_pro) : prix des plans plus compacts, « MAD » séparé du montant. */
.emyui-ews-plans-group-price-tag { font-size: 40px !important; letter-spacing: -0.02em; }
.emyui-ews-plans-group-price-tag + small,
.emyui-ews-plans-group-price-tag ~ small { white-space: nowrap; }
#products .coodiv-text-4.font-weight-light { font-size: 18px !important; margin-right: 4px; vertical-align: super; }

/* ------------------------------------------------------------------
 * Espace client connecté (clientareahome.tpl, barre secondaire)
 * ------------------------------------------------------------------ */
.nx-home-card { text-decoration: none !important; transition: border-color .15s ease; }
.nx-home-card:hover { border-color: var(--nx-ink-900); }
.nx-home-card .nx-card-title { margin-top: 18px; }
.nx-count { font-size: 28px; font-weight: 800; color: var(--nx-ink-900); letter-spacing: -0.02em; }

/* Barre secondaire : seuls « Commander un nouveau service » et « Se déconnecter » restent, sans titre. */
.nav-elements-box[menuItemName="Client Shortcuts"] .nav-title { display: none; }
.nav-scroller-subpages .badge { display: none; }

/* Pastille du compte (remplace l'avatar Gravatar) */
.nx-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--nx-ink-900); color: #fff; font-size: 13px; font-weight: 700;
}
.dropdown-header-account .nx-avatar { width: 36px; height: 36px; font-size: 15px; }