@charset "UTF-8";
/* ══════════════════════════════════════════════
   KINTANA GESTION — DARK THEME PREMIUM v3.0
   ══════════════════════════════════════════════ */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ═══ VARIABLES ═══ */
:root {
  --bg:          #070b12;
  --surface:     #0c111e;
  --surface-2:   #111827;
  --surface-3:   #1a2438;
  --surface-4:   #1f2d47;
  --border:      rgba(255,255,255,0.065);
  --border-glow: rgba(0,212,255,0.28);

  --cyan:    #00d4ff;
  --violet:  #7c3aed;
  --emerald: #10b981;
  --amber:   #f59e0b;
  --rose:    #f43f5e;
  --white:   #f0f4ff;

  --text:       #dde6f5;
  --text-muted: #8899b4;
  --text-dim:   #445570;

  --grad:        linear-gradient(135deg,#00d4ff 0%,#7c3aed 100%);
  --grad-rev:    linear-gradient(135deg,#7c3aed 0%,#00d4ff 100%);
  --grad-warm:   linear-gradient(135deg,#f59e0b 0%,#f43f5e 100%);
  --grad-surf:   linear-gradient(160deg,#0c111e 0%,#1a2438 100%);
  --shadow:      0 20px 60px rgba(0,0,0,.65);
  --shadow-glow: 0 0 50px rgba(0,212,255,.12);

  --r-sm:  8px;  --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --ease:  cubic-bezier(.4,0,.2,1);
  --trans: all .35s var(--ease);
  --font-d: 'Clash Display', sans-serif;
  --font-b: 'Plus Jakarta Sans', sans-serif;
}

/* ═══ RESET ═══ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-b);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection { background:rgba(0,212,255,.22); color:var(--cyan); }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--surface); }
::-webkit-scrollbar-thumb { background:var(--surface-4); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-glow); }

/* ═══ CANVAS BACKGROUND ═══ */
#bgCanvas {
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
}

/* ═══ MESH ORBS ═══ */
.mesh-orbs { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.orb {
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  animation:orbDrift 18s ease-in-out infinite alternate;
}
.orb-1 {
  width:520px; height:520px;
  background:radial-gradient(circle,rgba(0,212,255,.065) 0%,transparent 70%);
  top:-180px; left:-180px;
  animation-duration:20s;
}
.orb-2 {
  width:600px; height:600px;
  background:radial-gradient(circle,rgba(124,58,237,.055) 0%,transparent 70%);
  bottom:-200px; right:-200px;
  animation-duration:25s; animation-delay:-8s;
}
.orb-3 {
  width:380px; height:380px;
  background:radial-gradient(circle,rgba(16,185,129,.04) 0%,transparent 70%);
  top:40%; left:55%;
  animation-duration:22s; animation-delay:-4s;
}
.orb-4 {
  width:300px; height:300px;
  background:radial-gradient(circle,rgba(245,158,11,.035) 0%,transparent 70%);
  top:25%; left:10%;
  animation-duration:28s; animation-delay:-12s;
}
@keyframes orbDrift {
  0%   { transform:translate(0,0) scale(1); }
  33%  { transform:translate(30px,-25px) scale(1.05); }
  66%  { transform:translate(-20px,20px) scale(.97); }
  100% { transform:translate(15px,10px) scale(1.02); }
}

/* Grid overlay */
.grid-overlay {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,212,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.022) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);
  animation:gridFade 8s ease-in-out infinite alternate;
}
@keyframes gridFade { 0%{opacity:.4} 100%{opacity:.9} }

/* Noise */
.noise-overlay {
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ CLICK RIPPLE ═══ */
#click-ripple-container { position:fixed; inset:0; z-index:9999; pointer-events:none; }
.click-ripple {
  position:absolute; width:0; height:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.28) 0%,transparent 68%);
  transform:translate(-50%,-50%);
  animation:rippleGrow .85s var(--ease) forwards;
  pointer-events:none;
}
@keyframes rippleGrow {
  to { width:220px; height:220px; opacity:0; }
}

/* ═══════════════════════════════════
   LOADER — Style étoile + anneaux
═══════════════════════════════════ */
.spinner-wrapper {
  position:fixed; inset:0; z-index:999999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}

.loader-scene { display:flex; flex-direction:column; align-items:center; gap:18px; position:relative; }

/* Étoiles filantes en fond loader */
.loader-stars-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; width:100vw; height:100vh; top:-50vh; left:-50vw; }
.ls {
  position:absolute;
  background:linear-gradient(90deg,transparent,#00d4ff,transparent);
  height:1.5px;
  border-radius:2px;
  opacity:0;
  animation:loaderStar 3s ease-out infinite;
}
.ls-1 { width:160px; top:30%; left:10%; animation-delay:0s; }
.ls-2 { width:220px; top:20%; left:60%; animation-delay:.5s; background:linear-gradient(90deg,transparent,#7c3aed,transparent); }
.ls-3 { width:130px; top:65%; left:5%;  animation-delay:1s; background:linear-gradient(90deg,transparent,#10b981,transparent); }
.ls-4 { width:200px; top:55%; left:70%; animation-delay:1.5s; }
.ls-5 { width:180px; top:80%; left:30%; animation-delay:2s; background:linear-gradient(90deg,transparent,#f59e0b,transparent); }
.ls-6 { width:110px; top:40%; left:45%; animation-delay:.8s; }
.ls-7 { width:240px; top:10%; left:20%; animation-delay:2.3s; background:linear-gradient(90deg,transparent,#7c3aed,transparent); }
.ls-8 { width:150px; top:75%; left:55%; animation-delay:1.7s; background:linear-gradient(90deg,transparent,#10b981,transparent); }
@keyframes loaderStar {
  0%   { opacity:0; transform:translateX(-40px); }
  15%  { opacity:1; }
  80%  { opacity:.6; }
  100% { opacity:0; transform:translateX(280px); }
}

/* Core rings */
.loader-core {
  position:relative; width:110px; height:110px;
  display:flex; align-items:center; justify-content:center;
}
.loader-ring {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid transparent;
}
.r1 {
  border-top-color:var(--cyan); border-right-color:rgba(0,212,255,.2);
  animation:spin1 1.2s linear infinite;
  box-shadow:0 0 18px rgba(0,212,255,.3);
}
.r2 {
  inset:10px;
  border-top-color:transparent; border-left-color:var(--violet); border-bottom-color:rgba(124,58,237,.2);
  animation:spin1 1.8s linear infinite reverse;
  box-shadow:0 0 14px rgba(124,58,237,.25);
}
.r3 {
  inset:20px;
  border-bottom-color:var(--emerald); border-right-color:rgba(16,185,129,.2);
  animation:spin1 2.4s linear infinite;
  box-shadow:0 0 10px rgba(16,185,129,.2);
}
@keyframes spin1 { to { transform:rotate(360deg); } }

.loader-hex-wrap {
  position:relative; z-index:2;
  width:50px; height:50px;
  display:flex; align-items:center; justify-content:center;
}
.loader-hex-icon {
  font-size:2rem;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:hexPulse 1.5s ease-in-out infinite;
}
.loader-hex-glow {
  position:absolute; inset:-10px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.2) 0%,transparent 70%);
  animation:hexPulse 1.5s ease-in-out infinite;
}
@keyframes hexPulse {
  0%,100% { transform:scale(1);   opacity:.8; }
  50%      { transform:scale(1.15); opacity:1; }
}

.loader-brand-text {
  font-family:var(--font-d); font-size:1.5rem; font-weight:700;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.04em;
}

.loader-tagline-text { font-size:.85rem; color:var(--text-muted); letter-spacing:.08em; }
.ld span { animation:dotBlink 1.2s ease-in-out infinite; }
.ld span:nth-child(2) { animation-delay:.2s; }
.ld span:nth-child(3) { animation-delay:.4s; }
@keyframes dotBlink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }

.loader-bar-wrap {
  position:relative; width:260px; height:4px;
  background:var(--surface-3); border-radius:4px; overflow:hidden;
}
.loader-bar-fill {
  height:100%; width:0%; border-radius:4px;
  background:var(--grad);
  transition:width .15s ease;
  position:relative;
}
.loader-bar-shine {
  position:absolute; top:0; left:-60%; width:50%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:barShine 1.5s ease-in-out infinite;
}
@keyframes barShine { to { left:120%; } }

.loader-percent {
  font-family:var(--font-d); font-size:.8rem; font-weight:600;
  color:var(--cyan); letter-spacing:.06em;
}

/* ═══ LOGIN SECTION ═══ */
.login-section {
  position:relative; z-index:2;
  min-height:100vh;
  display:flex; align-items:center;
  padding:2rem 0;
}

/* ═══ CARD ═══ */
.login-card {
  background:rgba(12,17,30,.88);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow),var(--shadow-glow);
  backdrop-filter:blur(3px);
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
  max-width:1000px; margin:0 auto;
}
.login-card:hover {
  border-color:rgba(0,212,255,.16);
  box-shadow:var(--shadow),0 0 70px rgba(0,212,255,.1);
}

/* ═══ IMAGE SIDE ═══ */
.card-img-side {
  position:relative; overflow:hidden;
  border-radius:var(--r-xl) 0 0 var(--r-xl);
  flex-direction:column;
}
.side-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.45) saturate(.75);
  transition:transform 2.5s var(--ease);
}
.login-card:hover .side-img { transform:scale(1.06); }

/* Connection SVG */
.connection-svg {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}

/* Image overlay */
.image-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,11,18,.1) 0%,rgba(7,11,18,.55) 40%,rgba(7,11,18,.92) 100%);
  display:flex; align-items:flex-end; padding:2.2rem 1.8rem;
  z-index:2;
}
.overlay-content { width:100%; }

/* Brand badge */
.brand-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,212,255,.09);
  border:1px solid rgba(0,212,255,.22);
  border-radius:50px; padding:6px 14px;
  font-family:var(--font-d); font-size:.82rem; font-weight:600;
  color:var(--cyan); margin-bottom:.9rem;
  backdrop-filter:blur(10px);
  animation:badgeFloat 3.5s ease-in-out infinite;
}
.brand-badge-icon { font-size:1rem; filter:drop-shadow(0 0 6px var(--cyan)); }
.badge-live {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.3);
  border-radius:50px; padding:2px 9px; font-size:.72rem;
  color:var(--emerald); margin-left:4px;
}
.live-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--emerald);
  animation:livePulse 1.2s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
@keyframes badgeFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* Overlay title */
.overlay-title {
  font-family:var(--font-d); font-size:1.5rem; font-weight:700;
  color:#fff; margin-bottom:.6rem; min-height:2.4rem; line-height:1.35;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.typed-cursor { color:var(--cyan); font-weight:300; }
.overlay-subtitle { font-size:.88rem; color:rgba(255,255,255,.58); margin-bottom:1.3rem; line-height:1.55; min-height:2.5rem; }

/* ─── STATS GRID ─── */
.stats-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-bottom:1.2rem;
}
.stat-card {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md); padding:10px 12px;
  backdrop-filter:blur(8px);
  transition:var(--trans); cursor:default;
}
.stat-card:hover {
  background:rgba(0,212,255,.08);
  border-color:rgba(0,212,255,.2);
}
.stat-icon-wrap {
  width:34px; height:34px; border-radius:var(--r-sm);
  background:var(--grad); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:.95rem; color:#fff;
  box-shadow:0 4px 12px rgba(0,212,255,.2);
}
.stat-value {
  font-family:var(--font-d); font-size:1.25rem; font-weight:700;
  color:var(--cyan); line-height:1;
}
.stat-sfx { font-size:.85rem; font-weight:600; color:var(--cyan); }
.stat-label { font-size:.7rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.07em; margin-top:2px; }

/* ─── FEATURE PILLS ─── */
.feature-pills { display:flex; flex-wrap:nowrap; gap:5px; }
.pill {
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:5px 11px; border-radius:50px; font-size:.73rem;
  font-weight:500; border:1px solid transparent;
  transition:var(--trans); cursor:default;
  backdrop-filter:blur(8px); flex-shrink:0;
}
.pill-cyan    { background:rgba(0,212,255,.1);   border-color:rgba(0,212,255,.22);   color:var(--cyan);    }
.pill-violet  { background:rgba(124,58,237,.1);  border-color:rgba(124,58,237,.22);  color:#a78bfa;        }
.pill-emerald { background:rgba(16,185,129,.1);  border-color:rgba(16,185,129,.22);  color:var(--emerald); }
.pill-amber   { background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.22);  color:var(--amber);   }
.pill:hover { transform:translateY(-2px); filter:brightness(1.2); box-shadow:0 4px 12px rgba(0,0,0,.3); }

/* ═══ FORM PANEL ═══ */
.card-body {
  background:var(--grad-surf);
  border-radius:0 var(--r-xl) var(--r-xl) 0;
  position:relative; overflow:hidden; min-height:100%;
}
.card-body::before {
  content:''; position:absolute; top:-90px; right:-90px;
  width:280px; height:280px;
  background:radial-gradient(circle,rgba(124,58,237,.07) 0%,transparent 70%);
  pointer-events:none;
}
.card-body::after {
  content:''; position:absolute; bottom:-70px; left:-70px;
  width:240px; height:240px;
  background:radial-gradient(circle,rgba(0,212,255,.055) 0%,transparent 70%);
  pointer-events:none;
}

/* ─── LOGO ─── */
.logo-wrap {
  position:relative; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.logo-icon {
  font-size:1.9rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative; z-index:1;
  filter:drop-shadow(0 0 8px rgba(0,212,255,.4));
}
.logo-pulse-ring {
  position:absolute; inset:-6px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.25) 0%,transparent 70%);
  transform:scale(1);
}
.logo-text {
  font-family:var(--font-d); font-weight:700; font-size:1.35rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-.01em; display:block;
}
.logo-tagline { font-size:.72rem; color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase; margin-top:1px; }

/* ─── GREETING ─── */
.greeting-block { padding:6px 10px; background:rgba(255,255,255,.028); border:1px solid var(--border); border-radius:var(--r-md); }
.greeting-main {
  font-family:var(--font-b); font-size:1.05rem; font-weight:600;
  color:var(--text); margin-bottom:2px; line-height:1.4;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:5px;
}
.wave-hand { font-size:1.15rem; animation:waveAnim 2.2s ease-in-out infinite; display:inline-block; }
@keyframes waveAnim {
  0%,60%,100%{transform:rotate(0deg)} 10%,30%{transform:rotate(14deg)} 20%{transform:rotate(-8deg)} 40%{transform:rotate(14deg)} 50%{transform:rotate(-4deg)}
}
.greeting-static { color:var(--text-muted); font-weight:400; }
.greeting-typed-wrap .typed-cursor { color:var(--cyan); }
.t-cyan { color:var(--cyan); font-weight:700; }
.motivation-row { position:relative; display:flex; align-items:center; gap:7px; margin-top:2px; min-height:30px; }
.motivation-icon { font-size:1rem; }
.motivation-text { font-size:.9rem; color:var(--text); font-weight:500; font-style:italic; line-height:1.5; min-height:1.2rem; word-wrap:break-word; white-space:normal; display:block; }
.motivation-top { align-self:flex-start; margin-top:0; }
.motivation-center { align-self:center; }
.motivation-bottom { align-self:flex-end; margin-bottom:0; }

/* ─── INPUTS ─── */
.field-inner  { position:relative; }
.field-input {
  width:100%; height:58px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:1.1rem 1rem .5rem 2.8rem;
  color:var(--text);
  font-family:var(--font-b); font-size:.95rem;
  outline:none; transition:var(--trans);
  appearance:none;
}
.field-input::placeholder { color:transparent; }
.field-input:focus {
  background:var(--surface-3);
  border-color:var(--border-glow);
  box-shadow:0 0 0 3px rgba(0,212,255,.07);
}
.field-input.is-invalid {
  border-color:rgba(244,63,94,.55) !important;
  box-shadow:0 0 0 3px rgba(244,63,94,.09) !important;
}
.field-label {
  position:absolute; left:2.8rem; top:50%; transform:translateY(-50%);
  color:var(--text-muted); font-size:.9rem; pointer-events:none;
  transition:var(--trans); transform-origin:left center;
}
.field-input:focus ~ .field-label,
.field-input:not(:placeholder-shown) ~ .field-label {
  transform:translateY(-148%) scale(.76);
  color:var(--cyan); left:2.6rem;
}
.field-ico {
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  color:var(--text-dim); font-size:1rem; transition:var(--trans);
  display:flex; align-items:center; justify-content:center;
  width:20px;
}
.field-line {
  position:absolute; bottom:0; left:50%;
  transform:translateX(-50%) scaleX(0);
  width:calc(100% - 2px); height:2px;
  background:var(--grad); border-radius:2px;
  transition:transform .38s cubic-bezier(.4,0,.2,1); transform-origin:center;
}
.field-input:focus ~ .field-line { transform:translateX(-50%) scaleX(1); }

/* ─── LOGIN BUTTON — Shooting stars ─── */
.btn-login-main {
  position:relative; overflow:hidden;
  background:var(--grad);
  color:#fff !important; border:none;
  border-radius:50px;
  font-family:var(--font-d); font-weight:700; font-size:1rem;
  letter-spacing:.05em; text-transform:uppercase;
  padding:.88rem 1.5rem;
  transition:var(--trans);
  box-shadow:0 5px 22px rgba(0,212,255,.28);
  cursor:pointer;
}
.btn-login-main::before {
  content:''; position:absolute; inset:0;
  background:var(--grad-rev); opacity:0;
  transition:opacity .5s ease;
}
.btn-login-main:hover::before { opacity:1; }
.btn-login-main:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 35px rgba(0,212,255,.42);
}
.btn-login-main:active { transform:translateY(-1px); }
.btn-login-main:disabled { opacity:.45; cursor:not-allowed; transform:none; }

/* Shooting stars on button */
.btn-ss {
  position:absolute; top:50%; left:-60px;
  height:1.5px; border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  opacity:0; transform:translateY(-50%);
  animation:btnStar 4s ease-out infinite;
}
.btn-ss-1 { width:60px; animation-delay:0s;   top:30%; }
.btn-ss-2 { width:80px; animation-delay:1.2s; top:55%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); }
.btn-ss-3 { width:45px; animation-delay:2.4s; top:45%; }
.btn-ss-4 { width:90px; animation-delay:.7s;  top:65%; background:linear-gradient(90deg,transparent,rgba(0,212,255,.8),transparent); }
@keyframes btnStar {
  0%   { left:-90px; opacity:0; }
  10%  { opacity:1; }
  80%  { opacity:.7; }
  100% { left:calc(100% + 30px); opacity:0; }
}
.btn-login-main:hover .btn-ss { animation-duration:1.5s; }

.btn-content {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.btn-ico-anim { transition:transform .35s var(--ease); }
.btn-login-main:hover .btn-ico-anim { transform:translateX(4px) scale(1.15); }

/* Shimmer */
.btn-shimmer {
  position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-20deg);
  animation:btnShimmer 4s ease-in-out infinite;
  pointer-events:none; z-index:3;
}
@keyframes btnShimmer { 0%{left:-100%} 40%,100%{left:160%} }

/* Button wave on click */
.btn-wave {
  position:absolute; border-radius:50%; pointer-events:none; z-index:4;
  background:rgba(255,255,255,.28);
  width:0; height:0; transform:translate(-50%,-50%);
  animation:waveOut .65s ease-out forwards;
}
@keyframes waveOut { to { width:260px; height:260px; opacity:0; } }

/* Spinner */
.loading-spinner {
  display:none; width:20px; height:20px;
  border:2px solid rgba(255,255,255,.22);
  border-top-color:#fff; border-radius:50%;
  animation:spin 0.7s linear infinite;
  position:absolute; top:50%; left:50%;
  margin:-10px 0 0 -10px; z-index:5;
}
@keyframes spin { to { transform:rotate(360deg); } }
.btn-loading .btn-content { opacity:0; }
.btn-loading .loading-spinner { display:block; }

/* ─── TEXT LINKS ─── */
.text-link-dark {
  color:var(--text-muted); text-decoration:none;
  font-size:.88rem; position:relative; display:inline-block;
  transition:color .3s ease;
}
.text-link-dark::after {
  content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px;
  background:var(--grad); transition:width .35s var(--ease);
}
.text-link-dark:hover { color:var(--cyan); }
.text-link-dark:hover::after { width:100%; }
.text-muted-soft { color:var(--text-muted); font-size:.9rem; }
.links-container { margin-top:.5rem; }

/* ─── SUCCESS ALERT ─── */
.alert-dark-success {
  background:rgba(16,185,129,.07);
  border:1px solid rgba(16,185,129,.22);
  border-radius:var(--r-md); padding:1.2rem;
  color:var(--text);
}
.success-icon-wrap {
  width:38px; height:38px; border-radius:50%;
  background:rgba(16,185,129,.14); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.success-icon-wrap i { color:var(--emerald); font-size:1.15rem; }
.alert-heading { color:var(--emerald); font-family:var(--font-d); font-size:.95rem; }
.divider-dark { border-color:var(--border); }
.btn-close-dark { background:transparent; border:none; color:var(--text-muted); cursor:pointer; transition:color .3s; }
.btn-close-dark:hover { color:var(--rose); }

/* ─── RECOVERY ─── */
.recovery-title { font-family:var(--font-d); font-size:1.05rem; color:var(--text); margin-bottom:.6rem; }
#recoveryStep1,#recoveryStep2,#recoveryStep3 { animation:stepIn .4s var(--ease) both; }
@keyframes stepIn { from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:translateX(0)} }

/* ─── PASSWORD ─── */
.password-input-group { position:relative; }
.password-toggle {
  position:absolute; right:13px; top:29px;
  color:var(--text-dim); cursor:pointer; z-index:10;
  transition:color .3s; font-size:.95rem;
}
.password-toggle:hover { color:var(--cyan); }
.input-icon-right {
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  color:var(--emerald); font-size:1.1rem;
}
.password-strength-indicator {
  height:3px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden;
}
.strength-bar {
  display:block; height:100%; width:0; border-radius:3px;
  transition:width .4s ease,background-color .4s ease;
}
.strength-text { font-size:11px; color:var(--text-dim); display:block; margin-top:4px; text-align:right; }

/* ═══ CONTEXT MENU ═══ */
.menucontext {
  display:none; position:absolute;
  background:rgba(12,17,30,.96); border:1px solid var(--border);
  backdrop-filter:blur(20px);
  padding:8px 0; border-radius:var(--r-md);
  width:210px; box-shadow:var(--shadow);
  z-index:99999;
}
.menucontext ul { list-style:none; }
.menucontext li {
  padding:10px 16px; cursor:pointer; font-size:.88rem;
  display:flex; align-items:center; gap:10px;
  color:var(--text-muted); transition:all .22s ease;
}
.menucontext li i { font-size:1rem; }
.menucontext li:hover {
  background:rgba(0,212,255,.07); color:var(--cyan); padding-left:20px;
}

/* ═══ FADE ANIMATIONS ═══ */
.fade-in-up { animation:fadeInUp .95s cubic-bezier(.4,0,.2,1) both; opacity:0; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.delay-1{animation-delay:.15s} .delay-2{animation-delay:.35s}
.delay-3{animation-delay:.55s} .delay-4{animation-delay:.75s} .delay-5{animation-delay:.95s}

/* ═══ VALIDATION ═══ */
.validation-error {
  color:var(--rose); margin-top:10px; font-size:.84rem; text-align:center;
  padding:9px; background:rgba(244,63,94,.07);
  border:1px solid rgba(244,63,94,.18); border-radius:var(--r-sm);
  animation:pulseIn .4s ease;
}
@keyframes pulseIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
.error-highlight {
  border-color:rgba(244,63,94,.5)!important;
  animation:shake .42s linear;
}
@keyframes shake {
  0%{transform:translateX(0)} 20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)} 60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)} 100%{transform:translateX(0)}
}

/* ═══ MULTI-STEP FORM (signup) ═══ */
.multi_step_form { background:var(--bg); display:block; overflow:hidden; padding:30px 0 50px; }
.multi_step_form #msform {
  text-align:center; position:relative; padding:50px 0;
  min-height:820px; max-width:810px; margin:0 auto;
  background:var(--surface); border:1px solid var(--border);
  z-index:1; box-shadow:var(--shadow); border-radius:var(--r-lg);
}
.multi_step_form #msform .tittle h2 { font:700 24px/35px var(--font-d); color:var(--text); }
.multi_step_form #msform .tittle p  { font:400 16px/28px var(--font-b); color:var(--text-muted); }
.multi_step_form #msform fieldset { border:0; padding:20px 105px 80px; position:relative; width:100%; }
.multi_step_form #msform fieldset:not(:first-of-type) { display:none; }
.multi_step_form #msform fieldset h3 { font:700 18px/35px var(--font-d); color:var(--text); }
.multi_step_form #msform fieldset h6 { font:400 15px/28px var(--font-b); color:var(--text-muted); padding-bottom:30px; }
.multi_step_form #msform fieldset label { font:400 14px/28px var(--font-b); color:var(--text-muted); display:block; text-align:left; }
.multi_step_form #msform fieldset .form-control,
.multi_step_form #msform fieldset .product_select {
  border-radius:var(--r-sm); border:1px solid var(--border);
  padding:0 20px; height:auto;
  font:400 15px/48px var(--font-b); color:var(--text);
  background:var(--surface-2); box-shadow:none; outline:none; width:100%;
  transition:var(--trans);
}
.multi_step_form #msform fieldset .form-control:focus,
.multi_step_form #msform fieldset .product_select:focus {
  border-color:var(--cyan); background:var(--surface-3);
}
.multi_step_form #msform #progressbar { margin-bottom:30px; overflow:hidden; }
.multi_step_form #msform #progressbar li {
  list-style-type:none; color:var(--text-dim);
  font:500 13px/1 var(--font-b); width:calc(100%/4); float:left;
  position:relative; text-align:center;
}
.multi_step_form #msform #progressbar li .progress-icon {
  width:50px; height:50px; background:var(--surface-3);
  border:1px solid var(--border); border-radius:50%;
  margin:0 auto 10px; position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; transition:all .4s ease;
}
.multi_step_form #msform #progressbar li .progress-icon i { color:var(--text-dim); font-size:20px; transition:all .4s; }
.multi_step_form #msform #progressbar li:after {
  content:""; width:100%; height:2px; background:var(--surface-3);
  position:absolute; left:-50%; top:24px; z-index:1;
}
.multi_step_form #msform #progressbar li:first-child:after { width:0; }
.multi_step_form #msform #progressbar li:last-child:after  { width:150%; }
.multi_step_form #msform #progressbar li.active { color:var(--emerald); }
.multi_step_form #msform #progressbar li.active .progress-icon {
  background:linear-gradient(135deg,#10b981,#059669);
  border-color:transparent; box-shadow:0 0 22px rgba(16,185,129,.4); transform:scale(1.1);
}
.multi_step_form #msform #progressbar li.active .progress-icon i { color:#fff; }
.multi_step_form #msform #progressbar li.active:after { background:var(--emerald); }
.multi_step_form #msform #progressbar li span { display:block; margin-top:8px; font-size:12px; }
.multi_step_form #msform #progressbar li:before { content:none; }
.multi_step_form #msform .action-button {
  background:var(--grad); color:#fff; border:0; border-radius:50px; cursor:pointer;
  min-width:130px; font:700 14px/40px var(--font-d); margin:0 5px;
  text-transform:uppercase; display:inline-block; position:relative; z-index:2;
  transition:var(--trans); box-shadow:0 4px 18px rgba(0,212,255,.22);
}
.multi_step_form #msform .action-button:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,212,255,.38); }
.multi_step_form #msform .previous_button {
  background:transparent; color:var(--text-muted); border:1px solid var(--border);
}
.multi_step_form #msform .previous_button:hover { background:var(--surface-3); border-color:var(--border-glow); color:var(--text); }
.done_text .don_icon { background:var(--emerald)!important; box-shadow:0 0 15px rgba(16,185,129,.3); }

/* Gestion cards */
.gestion-card {
  width:31%; border:1px solid var(--border); border-radius:var(--r-md);
  padding:25px 15px; text-align:center; background:var(--surface-2);
  margin-bottom:20px; cursor:pointer; transition:var(--trans);
}
.gestion-card:hover { border-color:var(--border-glow); box-shadow:0 8px 28px rgba(0,212,255,.1); transform:translateY(-5px); }
.gestion-card:has(input[type="radio"]:checked) { border-color:var(--emerald); background:rgba(16,185,129,.06); }
.gestion-card h5 { font:600 16px/1.4 var(--font-d); color:var(--text); }
.gestion-card i { color:var(--cyan); }
.forfait-card { border:1px solid var(--border); border-radius:var(--r-md); padding:15px 12px; text-align:center; background:var(--surface-2); transition:var(--trans); cursor:pointer; }
.forfait-option input[type="radio"]:checked + label .forfait-card { border-color:var(--emerald); background:rgba(16,185,129,.06); box-shadow:0 5px 18px rgba(16,185,129,.12); }
.forfait-card h5 { font:600 15px/1.4 var(--font-d); color:var(--text); }
.forfait-card .price { font-size:17px; font-weight:700; color:var(--cyan); margin-bottom:8px; }
.forfait-card .price span { font-size:12px; font-weight:400; color:var(--text-dim); }
.forfait-card ul { list-style:none; padding:0; margin:0; text-align:left; }
.forfait-card ul li { margin-bottom:7px; font-size:13px; color:var(--text-muted); }
.forfait-card ul li i { color:var(--emerald); margin-right:5px; }

/* Radios */
.radio-checkmark,.radio-forfait-checkmark {
  position:absolute; top:0; left:0; height:24px; width:24px;
  background:var(--surface); border:2px solid var(--border); border-radius:50%; transition:var(--trans);
}
input[type="radio"]:checked ~ .radio-checkmark,
input[type="radio"]:checked ~ .radio-forfait-checkmark { border-color:var(--emerald); }
.radio-checkmark:after,.radio-forfait-checkmark:after {
  content:''; position:absolute; display:none;
  top:4px; left:4px; width:12px; height:12px; border-radius:50%; background:var(--emerald);
}
input[type="radio"]:checked ~ .radio-checkmark:after,
input[type="radio"]:checked ~ .radio-forfait-checkmark:after { display:block; }

/* Checkbox */
.check-indicator { flex:0 0 26px; height:26px; border:2px solid var(--border); background:var(--surface-2); border-radius:6px; margin-right:12px; display:flex; justify-content:center; align-items:center; transition:var(--trans); }
.check-indicator i { color:#fff; font-size:13px; opacity:0; transform:scale(0); transition:all .2s; }
.enhanced-checkbox input:checked ~ label .check-indicator { background:var(--emerald); border-color:var(--emerald); }
.enhanced-checkbox input:checked ~ label .check-indicator i { opacity:1; transform:scale(1); }
.check-text { font-size:14px; color:var(--text-muted); }
.check-text a { color:var(--cyan); font-weight:500; text-decoration:none; }
.check-text a:hover { color:var(--emerald); text-decoration:underline; }
.simplified-checkbox input[type="checkbox"] { margin-right:10px; width:18px; height:18px; accent-color:var(--emerald); cursor:pointer; }
.simplified-checkbox label { font-size:14px; color:var(--text-muted); cursor:pointer; display:inline; }
.simplified-checkbox label a { color:var(--cyan); font-weight:500; text-decoration:none; }

/* Select2 */
.select2-container--default .select2-selection--single {
  height:50px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); transition:var(--trans);
}
.select2-container--default .select2-selection--single:hover { border-color:var(--border-glow); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:50px; color:var(--text); font-size:15px; padding-left:15px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:52px; width:30px; right:8px; }
.select2-dropdown { background:var(--surface-2); border:1px solid var(--border-glow); border-radius:var(--r-sm); box-shadow:var(--shadow); }
.select2-search--dropdown { padding:12px; }
.select2-container--default .select2-search--dropdown .select2-search__field { border:1px solid var(--border); border-radius:6px; padding:8px 12px; background:var(--surface-3); color:var(--text); }
.select2-results__option { padding:10px 14px; font-size:14px; color:var(--text-muted); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background:rgba(0,212,255,.1); color:var(--cyan); }
.select2-container { width:100%!important; }

/* Currency autocomplete */
.ui-autocomplete { max-height:300px; overflow-y:auto; z-index:9999; background:var(--surface-2); border:1px solid var(--border); border-radius:0 0 var(--r-sm) var(--r-sm); box-shadow:var(--shadow); }
.ui-autocomplete .ui-menu-item:hover { background:rgba(0,212,255,.07); }
.currency-symbol { font-weight:bold; margin-right:8px; color:var(--cyan); }
.currency-code { font-weight:500; margin-right:10px; color:var(--text); }
.currency-name { font-size:13px; color:var(--text-muted); }

/* Verification */
.verification-icon { width:90px; height:90px; background:rgba(0,212,255,.07); color:var(--cyan); border-radius:50%; margin:0 auto 15px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; animation:iconPulse 2.5s ease-in-out infinite; }
@keyframes iconPulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,.2)} 50%{box-shadow:0 0 0 14px rgba(0,212,255,0)} }
.verification-button { background:var(--grad); color:#fff; border:none; border-radius:50px; padding:10px 24px; font-weight:700; font-family:var(--font-d); cursor:pointer; transition:var(--trans); box-shadow:0 4px 16px rgba(0,212,255,.2); }
.verification-button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,212,255,.38); }
.verification-button.btn-success { background:linear-gradient(135deg,#10b981,#059669); }

/* Recording */
.recording-dot { width:10px; height:10px; background:var(--rose); border-radius:50%; animation:blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* Free trial */
.free-trial-title { font:700 1.1rem/1 var(--font-d); color:var(--text); text-align:center; padding-bottom:10px; border-bottom:1px solid var(--border); margin:25px 0 15px; }
.trial-option { flex:1; min-width:100px; background:var(--surface-2); border:2px solid var(--border); border-radius:var(--r-sm); padding:12px; text-align:center; opacity:.6; transition:var(--trans); }
.trial-option.active { border-color:var(--emerald); background:rgba(16,185,129,.07); opacity:1; }
.trial-days { font:800 1.4rem/1 var(--font-d); color:var(--cyan); margin-bottom:4px; }
.trial-text { font-size:.84rem; color:var(--text-muted); }
.trial-random-info { font-size:.84rem; font-style:italic; color:var(--text-dim); margin:5px 0 15px; text-align:center; }
.system-message { position:absolute; top:0; left:0; width:100%; background:rgba(0,0,0,.7); color:#fff; font-size:.7rem; padding:2px 0; text-align:center; }

.tittle-wrapper { display:flex; flex-direction:column; align-items:center; margin-bottom:30px; }
.field-required:after { content:"*"; color:var(--rose); margin-left:3px; }

/* ═══ ALERTES JS — générées par anoakatra.js ═══ */
.login-alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; border-radius:var(--r-md);
  font-size:.88rem; line-height:1.5;
  margin-bottom:1rem;
  animation:fadeInUp .4s var(--ease) both;
}
.login-alert-error {
  background:rgba(244,63,94,.09);
  border:1px solid rgba(244,63,94,.25);
  color:#fca5a5;
}
.login-alert-error i { color:var(--rose); flex-shrink:0; margin-top:2px; }

.login-alert-success {
  background:rgba(16,185,129,.09);
  border:1px solid rgba(16,185,129,.25);
  color:#6ee7b7;
}
.login-alert-success i { color:var(--emerald); flex-shrink:0; margin-top:2px; }

.login-alert .ms-auto { margin-left:auto; }

/* Erreur sous un champ */
.field-error-msg {
  font-size:.8rem; color:#fca5a5;
  margin-top:5px; padding-left:.2rem;
  display:flex; align-items:center; gap:4px;
  animation:fadeInUp .3s var(--ease) both;
}

/* Alerte Bootstrap dans recovery (compatibilité) */
#passwordRecoverySystem .alert {
  background:rgba(0,212,255,.07);
  border:1px solid rgba(0,212,255,.2);
  color:var(--text); border-radius:var(--r-sm);
  font-size:.88rem; padding:10px 14px;
}
#passwordRecoverySystem .alert-success {
  background:rgba(16,185,129,.08);
  border-color:rgba(16,185,129,.22);
  color:#6ee7b7;
}
#passwordRecoverySystem .alert-danger {
  background:rgba(244,63,94,.08);
  border-color:rgba(244,63,94,.22);
  color:#fca5a5;
}
#passwordRecoverySystem .alert-info {
  background:rgba(0,212,255,.08);
  border-color:rgba(0,212,255,.2);
  color:#7dd3fc;
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:991.98px) { .login-card{margin:0 1rem;} }
@media(max-width:767.98px) {
  .login-section{padding:1rem;}
  .card-body{padding:1.5rem!important; border-radius:var(--r-xl);}
  .field-input{height:52px;}
  .gestion-card,.forfait-option{width:48%;}
  .multi_step_form #msform fieldset{padding:20px 30px;}
  .stats-grid{grid-template-columns:1fr 1fr; gap:6px;}
}
@media(max-width:576px) {
  .login-card{margin:0; border-radius:var(--r-lg);}
  .gestion-card,.forfait-option{width:100%; margin-right:0;}
  .stats-grid{grid-template-columns:1fr 1fr;}
}