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

    html, body { height: 100%; width: 100%; font-family: 'Inter', sans-serif; overflow: hidden; }

    /* ════════════════════════════════
       LAYOUT SPLIT
    ════════════════════════════════ */
    .split {
      display: flex; height: 100vh; width: 100vw;
    }

    /* ════════════════════════════════
       PANEL GAUCHE — VISUEL
    ════════════════════════════════ */
    .panel-left {
      flex: 1;
      position: relative; overflow: hidden;
      background: #07050f;
    }

    /* Canvas aurora */
    #aurora { position: absolute; inset: 0; width: 100%; height: 100%; }

    /* Contenu brand centré */
    .brand {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      z-index: 5; gap: 0;
      pointer-events: none;
    }

    .brand-logo {
      width: 90px; height: 90px; position: relative;
      margin-bottom: 28px;
    }
    .brand-logo img {
      width: 100%; height: 100%; object-fit: contain;
      filter: drop-shadow(0 0 24px rgba(167,139,250,.9));
      animation: logoPulse 4s ease-in-out infinite;
    }
    @keyframes logoPulse {
      0%,100% { filter: drop-shadow(0 0 20px rgba(167,139,250,.7)); transform: scale(1); }
      50%      { filter: drop-shadow(0 0 40px rgba(167,139,250,1));  transform: scale(1.04); }
    }

    .brand-name {
      font-size: clamp(38px, 4vw, 58px);
      font-weight: 900; letter-spacing: -2px;
      line-height: 1;
      background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, #818cf8 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      margin-bottom: 14px;
    }

    .brand-tag {
      font-size: 12px; font-weight: 600;
      letter-spacing: .22em; text-transform: uppercase;
      color: rgba(255,255,255,.3);
    }

    /* Bande déco verticale */
    .brand-line {
      position: absolute; top: 10%; bottom: 10%; right: 0;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(139,92,246,.4) 30%, rgba(139,92,246,.4) 70%, transparent);
    }

    /* Badges animés en bas */
    .brand-stats {
      position: absolute; bottom: 40px; left: 0; right: 0;
      display: flex; justify-content: center; gap: 28px;
      z-index: 5; pointer-events: none;
    }
    .stat {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
    }
    .stat-val {
      font-size: 20px; font-weight: 900;
      color: #fff;
      text-shadow: 0 0 20px rgba(167,139,250,.8);
    }
    .stat-lbl {
      font-size: 10px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .12em; color: rgba(255,255,255,.25);
    }

    /* ════════════════════════════════
       PANEL DROIT — FORM
    ════════════════════════════════ */
    .panel-right {
      width: min(460px, 100vw);
      background: #0b0914;
      display: flex; align-items: center; justify-content: center;
      padding: 40px 48px;
      position: relative; overflow: hidden;
      border-right: 1px solid rgba(139,92,246,.12);
      order: -1;
    }

    /* Lueur douce en haut à droite */
    .panel-right::before {
      content: ''; position: absolute; top: -80px; right: -80px;
      width: 300px; height: 300px; border-radius: 50%;
      background: radial-gradient(circle, rgba(124,58,237,.15), transparent 70%);
      pointer-events: none;
    }
    .panel-right::after {
      content: ''; position: absolute; bottom: -80px; left: -80px;
      width: 250px; height: 250px; border-radius: 50%;
      background: radial-gradient(circle, rgba(99,102,241,.12), transparent 70%);
      pointer-events: none;
    }

    .form-inner {
      width: 100%; position: relative; z-index: 2;
      animation: slideIn .6s cubic-bezier(.16,1,.3,1) both;
    }
    @keyframes slideIn {
      from { opacity: 0; transform: translateX(24px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    .form-title {
      font-size: 26px; font-weight: 900; letter-spacing: -.7px; color: #fff;
      margin-bottom: 6px;
    }
    .form-sub {
      font-size: 13px; color: rgba(255,255,255,.3); font-weight: 400;
      margin-bottom: 36px; line-height: 1.5;
    }

    /* Error */
    .error-msg {
      display: none; align-items: center; gap: 8px;
      background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.22);
      border-radius: 10px; padding: 10px 14px;
      font-size: 13px; color: #fca5a5; margin-bottom: 22px;
      animation: shake .4s ease;
    }
    .error-msg.show { display: flex; }
    @keyframes shake {
      0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}
    }

    /* Groupes */
    .fg { margin-bottom: 20px; }
    .fg label {
      display: block; font-size: 11px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: rgba(255,255,255,.3); margin-bottom: 8px;
    }
    .fg input {
      width: 100%;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px; padding: 14px 16px;
      font-size: 15px; font-weight: 500; color: #fff;
      font-family: 'Inter', sans-serif; outline: none;
      transition: border .2s, background .2s, box-shadow .2s;
    }
    .fg input::placeholder { color: rgba(255,255,255,.18); }
    .fg input:focus {
      border-color: rgba(139,92,246,.55);
      background: rgba(139,92,246,.07);
      box-shadow: 0 0 0 3px rgba(139,92,246,.13);
    }

    /* Bouton */
    .btn-connect {
      width: 100%; margin-top: 10px;
      padding: 15px; border: none; border-radius: 13px;
      font-size: 15px; font-weight: 700; letter-spacing: .02em;
      font-family: 'Inter', sans-serif; cursor: pointer; color: #fff;
      background: linear-gradient(135deg, #6d28d9, #7c3aed 40%, #8b5cf6);
      box-shadow: 0 4px 28px rgba(109,40,217,.45);
      position: relative; overflow: hidden;
      transition: transform .15s, box-shadow .15s;
    }
    .btn-connect::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
      transform: translateX(-120%);
      transition: transform .55s ease;
    }
    .btn-connect:hover::after { transform: translateX(120%); }
    .btn-connect:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 36px rgba(109,40,217,.55);
    }
    .btn-connect:active { transform: translateY(0); }

    /* Footer */
    .form-footer {
      text-align: center; margin-top: 32px;
      font-size: 11px; color: rgba(255,255,255,.13); letter-spacing: .05em;
    }

    /* ── Responsive mobile ── */
    @media (max-width: 700px) {
      .panel-left  { display: none; }
      .panel-right { width: 100vw; padding: 40px 28px; border-left: none; }
    }