/*
 * Styles spécifiques au parrainage : bloc lien copiable, cartes de
 * statistiques réseau, et légères adaptations des tableaux filleuls/parrains.
 * Le shell (sidebar, panels, tableaux génériques) vient de agents.css.
 */

.wk-referral-link-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--wk-main-soft);
  border: 1px solid var(--wk-main-border);
  border-radius: 18px;
  margin-bottom: 22px;
}

.wk-referral-link-box code {
  flex: 1 1 260px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: "Courier New", monospace;
  font-size: 13.5px;
  color: var(--wk-main-dark);
  font-weight: 700;
}

.wk-copy-btn {
  flex-shrink: 0;
}

.wk-copy-btn.wk-copied {
  background: var(--wk-green);
  color: #ffffff;
}

.wk-referral-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.wk-referral-stat-card {
  background: #ffffff;
  border: 1px solid var(--wk-main-border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 26px rgba(17, 108, 124, 0.06);
  text-align: center;
}

.wk-referral-stat-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--wk-muted);
  font-size: 13px;
  font-weight: 700;
}

.wk-referral-stat-card strong {
  display: block;
  font-size: 30px;
  font-weight: 900;
  color: var(--wk-main-dark);
}

/* Filtres / recherche (page admin) */

.wk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.wk-filters input,
.wk-filters select {
  width: auto;
  min-width: 180px;
}

/* Page d'inscription publique (inscription.php) */

.wk-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.wk-auth-box {
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border: 1px solid var(--wk-main-border);
  border-radius: 24px;
  padding: 34px;
  box-shadow: var(--wk-shadow);
}

.wk-auth-logo {
  font-size: 24px;
  font-weight: 800;
  color: var(--wk-main);
  margin-bottom: 8px;
}

.wk-auth-box h1 {
  margin: 0 0 8px;
  font-size: 26px;
}

.wk-auth-box p {
  margin: 0 0 24px;
  color: var(--wk-muted);
  line-height: 1.5;
}

.wk-auth-referrer-note {
  margin-bottom: 20px;
  padding: 12px 14px;
  background: var(--wk-main-soft);
  border-radius: 14px;
  font-size: 13.5px;
  color: var(--wk-main-dark);
  font-weight: 700;
}

.wk-auth-footer {
  margin-top: 20px;
  font-size: 13px;
  text-align: center;
}

.wk-auth-footer a {
  color: var(--wk-main);
  font-weight: 700;
  text-decoration: none;
}

/* =====================================================================
 * Connexion en deux volets
 *
 * La connexion est la porte d'entrée du réseau. Une carte blanche seule
 * au milieu d'un fond gris ne dit rien de ce qu'on s'apprête à ouvrir.
 * Volet sombre à droite pour le produit, volet clair à gauche pour le
 * formulaire, qui reste l'objet principal et garde toute la place.
 *
 * Variante additive : les autres pages d'authentification (mot de passe
 * oublié, réinitialisation) conservent la carte centrée d'origine.
 * ===================================================================== */

.wk-auth-page--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
}

.wk-auth-split-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 28px;
}

/* Dans cette composition, le fond de page tient lieu de carte : on
   retire l'encadré pour ne pas empiler deux surfaces. */
.wk-auth-page--split .wk-auth-box {
  max-width: 380px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.wk-auth-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  padding: 44px;
  background: var(--wk-shell);
  color: #E8EFF0;
}

/* La photo est panoramique, le volet est vertical : un recadrage centré
   ne garderait que le mur gris derrière la colonne. On décale vers la
   droite et vers le haut pour tenir la colonne chromée et le mur clair
   dans le cadre, ce qui donne au volet sa profondeur. */
.wk-auth-aside img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 36%;
}

/* Voile dégradé : l'image reste lisible en haut, le texte reste lisible
   en bas, sans dépendre du contenu exact de la photo. */
.wk-auth-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 38, 43, 0) 0%, rgba(22, 38, 43, 0) 46%, rgba(22, 38, 43, 0.58) 70%, rgba(22, 38, 43, 0.93) 100%),
    linear-gradient(180deg, rgba(22, 38, 43, 0.34) 0%, rgba(22, 38, 43, 0) 22%);
}

/* Empilement explicite : image au fond, voile par-dessus, texte au-dessus
   du voile. Sans le :not(img), l'image récupérait un z-index supérieur au
   voile et repassait devant lui — la lisibilité du texte ne tenait plus
   qu'au hasard des zones sombres de la photo. */
.wk-auth-aside::after { z-index: 1; }

.wk-auth-aside > *:not(img) {
  position: relative;
  z-index: 2;
}

.wk-auth-aside-mark {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.wk-auth-aside-mark span {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #8FA9AF;
}

.wk-auth-aside-title {
  margin: 0 0 12px;
  font-size: clamp(23px, 2.1vw, 31px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #fff;
}

/* Même filet vertical que les repères du héro : un seul signe, repris
   d'un bout à l'autre du parcours. */
.wk-auth-aside-note {
  position: relative;
  padding-left: 14px;
  margin: 0;
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.6;
  color: #9FB3B8;
}

.wk-auth-aside-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--wk-brand-bright), rgba(18, 160, 182, 0));
}

/* Sur un téléphone on vient se connecter, pas regarder une photo : le
   volet visuel disparaît au lieu de repousser le formulaire plus bas. */
@media (max-width: 900px) {
  .wk-auth-page--split {
    grid-template-columns: 1fr;
    min-height: 100svh;
  }

  .wk-auth-aside { display: none; }

  .wk-auth-split-form { padding: 32px 22px; }
}

@media (max-width: 900px) {
  .wk-referral-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .wk-referral-link-box {
    flex-direction: column;
    align-items: stretch;
  }
}
.wk-copy-block{padding:18px;border:1px solid #dcecef;border-radius:14px;background:#f7fbfc}.wk-copy-block p{margin:0 0 14px;line-height:1.65;color:#314c52}.wk-copy-block .wk-btn{margin:4px 8px 0 0}

/* =====================================================================
 * Seuil d'activation du bonus de parrainage
 *
 * Un agent qui voit ses filleuls vendre sans rien toucher conclut à un
 * bug. Cette jauge répond à la question avant qu'elle se pose : combien
 * il manque, et à partir de quand ça compte.
 * ===================================================================== */

.wk-bonus-gate {
  padding: 22px 24px;
  margin-bottom: var(--wk-gap, 20px);
  border-radius: var(--wk-r-xl, 20px);
  background: var(--wk-shell, #16262B);
  color: #E8EFF0;
}

.wk-bonus-gate.is-open { background: #10403B; }

.wk-bonus-gate-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
}

.wk-bonus-gate-head > div:first-child { flex: 1; min-width: 0; }

.wk-bonus-gate-eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3FC7DC;
}

.wk-bonus-gate h2 {
  margin: 0 0 8px;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #fff;
}

.wk-bonus-gate p {
  margin: 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.6;
  color: #9FB3B8;
}

.wk-bonus-gate strong { color: #fff; }

.wk-bonus-gate-figure { flex-shrink: 0; }

.wk-bonus-gate-num {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.wk-bonus-gate-num small { font-size: 17px; margin-left: 2px; }

.wk-bonus-gate-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.wk-bonus-gate-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0E7C8E, #3FC7DC);
  transition: width 0.4s ease;
}

.wk-bonus-gate.is-open .wk-bonus-gate-bar span {
  background: linear-gradient(90deg, #2E8B2F, #5FD06A);
}

@media (prefers-reduced-motion: reduce) {
  .wk-bonus-gate-bar span { transition: none; }
}

.wk-bonus-gate-scale {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 12.5px;
  color: #9FB3B8;
  font-variant-numeric: tabular-nums;
}

.wk-bonus-gate-note {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px !important;
}

@media (max-width: 620px) {
  .wk-bonus-gate-head { flex-direction: column; gap: 12px; }
}

/* Bonus déjà générés mais retenus : c'est le chiffre qui motive, il doit
   ressortir davantage que la note explicative. */
.wk-bonus-gate-held {
  margin-top: 16px !important;
  padding: 13px 16px;
  border-radius: var(--wk-r-md, 10px);
  background: rgba(63, 199, 220, 0.12);
  border: 1px solid rgba(63, 199, 220, 0.28);
  font-size: 13.5px !important;
  color: #C4D4D8 !important;
}

.wk-bonus-gate-held strong {
  font-size: 17px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}