:root {
  --bx-navy:#0d1b2a;
  --bx-navy-2:#14223b;
  --bx-blue:#2563eb;
  --bx-sky:#60a5fa;
  --bx-text:#e8eef6;
  --bx-text-dim:#c8d2df;
  --bx-border:rgba(255,255,255,0.12);
  --bx-glass:rgba(255,255,255,0.06);
  --bx-radius:18px;
}

*, *::before, *::after {
  box-sizing:border-box;
}

html, body {
  margin:0;
  padding:0;
}

body {
  min-height:100vh;
  background:radial-gradient(circle at top left,#1e293b 0,#020617 50%), var(--bx-navy);
  color:var(--bx-text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  display:flex;
  align-items:stretch;
  justify-content:center;
}

a {
  color:#cfe1ff;
  text-decoration:none;
}
a:hover {
  color:#ffffff;
}

/* LAYOUT GLOBAL */
.bx-signup-shell {
  max-width:980px;
  width:100%;
  margin:24px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(135deg,rgba(15,23,42,0.96),rgba(15,23,42,0.98));
  box-shadow:
    0 24px 60px rgba(0,0,0,0.7),
    0 0 0 1px rgba(15,23,42,0.9);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr);
  overflow:hidden;
}

@media (max-width:800px) {
  .bx-signup-shell {
    grid-template-columns:1fr;
    margin:16px;
  }
}

/* COLONNE GAUCHE */
.bx-signup-left {
  padding:32px 32px 28px;
  background:
    radial-gradient(circle at top left,rgba(37,99,235,0.4),transparent 55%),
    radial-gradient(circle at bottom right,rgba(56,189,248,0.32),transparent 55%),
    #020617;
  position:relative;
  overflow:hidden;
}

.bx-signup-left::after {
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 10% 20%,rgba(96,165,250,0.14),transparent 55%),
    radial-gradient(circle at 80% 90%,rgba(56,189,248,0.18),transparent 55%);
  opacity:0.9;
  mix-blend-mode:screen;
  pointer-events:none;
}

.bx-signup-left-inner {
  position:relative;
  z-index:1;
}

.bx-signup-logo-row {
  display:flex;
  align-items:center;
  gap:10px;
}

.bx-signup-logo-row img {
  width:40px;
  height:40px;
  border-radius:14px;
  box-shadow:0 14px 30px rgba(15,23,42,0.8);
}

.bx-signup-logo-title {
  font-weight:600;
  letter-spacing:-0.02em;
  font-size:18px;
}

.bx-signup-logo-sub {
  font-size:11px;
  color:rgba(226,232,240,0.8);
}

.bx-signup-tagline {
  margin-top:28px;
  font-size:26px;
  line-height:1.2;
  max-width:18rem;
}

.bx-signup-tagline span {
  color:var(--bx-sky);
}

.bx-signup-text {
  margin-top:16px;
  font-size:14px;
  color:var(--bx-text-dim);
  max-width:22rem;
}

.bx-signup-bullets {
  margin-top:22px;
  list-style:none;
  padding:0;
  font-size:13px;
  color:rgba(226,232,240,0.9);
}

.bx-signup-bullets li {
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-bottom:10px;
}

.bx-signup-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:24px;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  border:1px solid rgba(148,163,184,0.6);
  background:rgba(15,23,42,0.85);
  color:rgba(226,232,240,0.9);
}

/* COLONNE DROITE */
.bx-signup-right {
  padding:28px 28px 24px;
  background:radial-gradient(circle at top,rgba(15,23,42,0.8),rgba(15,23,42,1));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

@media (max-width:800px) {
  .bx-signup-right {
    padding:22px 18px 20px;
  }
}

.bx-step-indicator {
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(148,163,184,0.9);
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.bx-progress {
  height:4px;
  border-radius:999px;
  background:rgba(30,64,175,0.6);
  overflow:hidden;
  margin-top:6px;
}

.bx-progress-bar {
  height:100%;
  width:33%;
  background:linear-gradient(90deg,#60a5fa,#38bdf8);
  transition:width 0.25s ease-out;
}

.bx-signup-title {
  font-size:20px;
  font-weight:600;
  margin:4px 0 4px;
}

.bx-signup-sub {
  font-size:13px;
  color:var(--bx-text-dim);
  margin-bottom:18px;
}

form {
  margin-top:4px;
}

.bx-field-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 12px;
}

@media (max-width:600px) {
  .bx-field-grid {
    grid-template-columns:1fr;
  }
}

.bx-field-full {
  grid-column:1 / -1;
}

.bx-field {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
}

.bx-label {
  color:rgba(226,232,240,0.9);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.bx-label small {
  color:rgba(148,163,184,0.9);
  font-size:11px;
}

.bx-input {
  border-radius:10px;
  border:1px solid rgba(148,163,184,0.5);
  background:rgba(15,23,42,0.9);
  padding:8px 10px;
  font-size:13px;
  color:#e5e7eb;
  outline:none;
  transition:border-color 0.18s ease-out, box-shadow 0.18s ease-out, background 0.18s;
}

.bx-input:focus {
  border-color:rgba(96,165,250,0.9);
  box-shadow:0 0 0 1px rgba(96,165,250,0.7);
  background:rgba(15,23,42,1);
}

.bx-input::placeholder {
  color:rgba(148,163,184,0.9);
}

.bx-help {
  font-size:11px;
  color:rgba(148,163,184,0.9);
  margin-top:2px;
}

.bx-error {
  font-size:11px;
  color:#f97373;
  margin-top:3px;
  display:none;
}

.bx-step {
  display:none;
}

.bx-step.active {
  display:block;
}

/* CONTRAT BÊTA */
.bx-contract-box {
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.6);
  background:rgba(15,23,42,0.9);
  padding:12px 12px 10px;
  max-height:260px;
  overflow:auto;
  font-size:12px;
  line-height:1.45;
  color:rgba(226,232,240,0.9);
}

.bx-contract-box h3 {
  margin:0 0 6px;
  font-size:13px;
  font-weight:600;
}

.bx-contract-box h4 {
  margin:10px 0 4px;
  font-size:12px;
  font-weight:600;
}

.bx-contract-box p {
  margin:3px 0;
}

.bx-contract-box ul {
  margin:4px 0 4px 18px;
  padding:0;
}

.bx-contract-accept {
  margin-top:10px;
  font-size:12px;
  display:flex;
  align-items:flex-start;
  gap:6px;
  color:rgba(226,232,240,0.95);
}

.bx-contract-accept input {
  margin-top:2px;
}

/* ACTIONS */
.bx-actions {
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.bx-actions-right {
  display:flex;
  gap:8px;
}

.bx-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.7);
  padding:8px 14px;
  font-size:13px;
  background:rgba(15,23,42,0.9);
  color:#e5e7eb;
  cursor:pointer;
  transition:background 0.18s ease-out, border-color 0.18s ease-out, transform 0.1s;
}

.bx-btn:hover {
  background:rgba(30,64,175,0.9);
  border-color:rgba(129,140,248,0.8);
  transform:translateY(-0.5px);
}

.bx-btn-primary {
  background:linear-gradient(135deg,#60a5fa,#3b82f6);
  border-color:rgba(129,140,248,1);
  color:white;
  box-shadow:0 10px 25px rgba(37,99,235,0.7);
}

.bx-btn-primary:hover {
  background:linear-gradient(135deg,#3b82f6,#2563eb);
}

.bx-btn[disabled],
.bx-btn:disabled {
  opacity:0.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.bx-small-note {
  font-size:11px;
  color:rgba(148,163,184,0.9);
  margin-top:6px;
}

/* -------- MODALE D'INSCRIPTION -------- */

.bx-modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.85);
  backdrop-filter:blur(5px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:60;
}

.bx-modal-overlay.active {
  display:flex;
}

.bx-modal {
  position:relative;
  width:min(420px, 100% - 32px);
  background:linear-gradient(135deg,#0f172a,#020617);
  border-radius:20px;
  border:1px solid rgba(148,163,184,0.6);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.85),
    0 0 0 1px rgba(15,23,42,0.9);
  padding:20px 18px 18px;
  color:#e5e7eb;
}

.bx-modal-title {
  font-size:18px;
  font-weight:600;
  margin:0 0 6px;
}

.bx-modal-message {
  font-size:13px;
  color:rgba(209,213,219,0.95);
  margin:0 0 14px;
}

.bx-modal-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.bx-modal-icon {
  width:34px;
  height:34px;
  border-radius:999px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

/* icônes types */
.bx-modal-icon--success {
  background:rgba(22,163,74,0.18);
  color:#4ade80;
}
.bx-modal-icon--success::before {
  content:"✔";
}

.bx-modal-icon--warning {
  background:rgba(245,158,11,0.2);
  color:#fbbf24;
}
.bx-modal-icon--warning::before {
  content:"!";
}

.bx-modal-icon--error {
  background:rgba(248,113,113,0.2);
  color:#fecaca;
}
.bx-modal-icon--error::before {
  content:"✕";
}

.bx-modal-close {
  position:absolute;
  top:8px;
  right:8px;
  border:none;
  background:transparent;
  color:rgba(148,163,184,0.9);
  cursor:pointer;
  padding:4px;
  border-radius:999px;
}
.bx-modal-close:hover {
  background:rgba(15,23,42,0.8);
  color:#e5e7eb;
}