:root {
      --u-black:   #000000;
      --u-white:   #ffffff;
      --u-gray100: #F6F6F6;
      --u-gray200: #EEEEEE;
      --u-gray400: #AAAAAA;
      --u-gray600: #545454;
      --u-border:  #D9D9D9;
      --u-error:   #C8372D;
      --u-success: #2B8A55;
    }

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

    body {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--u-white);
      color: var(--u-black);
      font-size: 15px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* ── NAV ─────────────────────────────────────────────────── */
    .top-nav {
      padding: 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--u-border);
    }
    .top-nav .logo {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--u-black);
      text-decoration: none;
      letter-spacing: -0.5px;
    }
    .top-nav .nav-links a {
      color: var(--u-black);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      margin-left: 24px;
      transition: opacity .15s;
    }
    .top-nav .nav-links a:hover { opacity: 0.6; }

    /* ── LAYOUT ──────────────────────────────────────────────── */
    .auth-layout {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 16px;
    }

    .form-panel {
      width: 100%;
      max-width: 460px;
    }

    /* ── CARD ────────────────────────────────────────────────── */
    .form-card {
      background: var(--u-white);
      border: 1.5px solid var(--u-border);
      border-radius: 16px;
      padding: 40px 36px 44px;
      box-shadow: 0 2px 16px rgba(0,0,0,.06);
    }

    /* ── STEP ────────────────────────────────────────────────── */
    .step { display: none; }
    .step.active { display: block; }

    /* ── TITLE ───────────────────────────────────────────────── */
    .form-title {
      font-size: 1.6rem;
      font-weight: 700;
      letter-spacing: -0.3px;
      margin-bottom: 6px;
    }
    .form-subtitle {
      font-size: 14px;
      color: var(--u-gray600);
      margin-bottom: 28px;
      line-height: 1.5;
    }

    /* ── FIELD ───────────────────────────────────────────────── */
    .field { margin-bottom: 18px; }
    .field label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .7px;
      color: var(--u-gray600);
      margin-bottom: 6px;
    }
    .field input {
      width: 100%;
      padding: 13px 16px;
      border: 1.5px solid var(--u-border);
      border-radius: 8px;
      font-family: inherit;
      font-size: 15px;
      color: var(--u-black);
      background: var(--u-white);
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .field input:focus {
      border-color: var(--u-black);
      box-shadow: 0 0 0 3px rgba(0,0,0,.06);
    }
    .field input.is-error  { border-color: var(--u-error); }
    .field input.is-valid  { border-color: var(--u-success); }
    .field .hint {
      font-size: 12px;
      color: var(--u-gray400);
      margin-top: 5px;
    }
    .field .err-msg {
      font-size: 12px;
      color: var(--u-error);
      margin-top: 5px;
      display: none;
    }
    .field .err-msg.show { display: block; }
    /* ── CGU TOAST ─────────────────────────────────────────── */
    .cgu-toast {
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%) translateY(16px);
      background: #fff3f3;
      color: #721c24;
      border: 1px solid #f5c6cb;
      border-radius: 10px;
      padding: 14px 18px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.13);
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 300px;
      max-width: 90vw;
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .cgu-toast.show {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .cgu-toast__icon {
      font-size: 18px;
      flex-shrink: 0;
      color: var(--u-error);
    }
    .cgu-toast span {
      flex: 1;
      font-size: 13.5px;
      line-height: 1.4;
    }
    .cgu-toast__close {
      background: none;
      border: none;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      color: #721c24;
      padding: 0 0 0 6px;
      opacity: 0.7;
    }
    .cgu-toast__close:hover { opacity: 1; }

    /* ── PHONE WRAP ──────────────────────────────────────────── */
    .phone-wrap {
      display: flex;
      border: 1.5px solid var(--u-border);
      border-radius: 8px;
      overflow: hidden;
      transition: border-color .15s, box-shadow .15s;
    }
    .phone-wrap:focus-within {
      border-color: var(--u-black);
      box-shadow: 0 0 0 3px rgba(0,0,0,.06);
    }
    /* Select indicatif pays */
    .phone-code-select {
      border: none;
      border-right: 1.5px solid var(--u-border);
      /*background: var(--u-gray100);*/
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: var(--u-black);
      cursor: pointer;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      padding: 0 10px 0 10px;
      min-height: 48px;
      min-width: 90px;
      max-width: 110px;
      transition: background .15s;
    }
    .phone-code-select:hover,
    .phone-code-select:focus { background: var(--u-gray200); }
    .phone-code-select.is-error { border-right-color: #e74c3c; background: #fff5f5; color: #e74c3c; }
    .phone-wrap input {
      border: none;
      border-radius: 0;
      flex: 1;
      min-width: 0;
    }
    .phone-wrap input:focus { outline: none; box-shadow: none; }
      position: relative;
      background: var(--u-gray100);
      border-right: 1.5px solid var(--u-border);
      display: flex;
      align-items: center;
    }
    .phone-prefix::after {
      content: '';
      position: absolute;
      right: 9px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid var(--u-gray600);
      pointer-events: none;
    }
    .phone-prefix select {
      border: none;
      background: var(--u-white);
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: var(--u-black);
      cursor: pointer;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      padding: 0 28px 0 12px;
      min-height: 48px;
      transition: background .15s;
    }
    .phone-prefix select:hover,
    .phone-prefix select:focus { background: var(--u-gray200); }
    .phone-wrap input[type="tel"] {
      border: none;
      border-radius: 0;
      flex: 1;
      outline: none;
      box-shadow: none !important;
    }
    .phone-wrap input[type="tel"]:focus { border-color: transparent; }

    /* ── PASSWORD ────────────────────────────────────────────── */
    .pwd-wrap { position: relative; }
    .pwd-wrap input { padding-right: 48px; }
    .pwd-toggle {
      position: absolute;
      right: 13px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--u-gray600);
      font-size: 18px;
      padding: 0;
      line-height: 1;
    }
    .pwd-toggle:hover { color: var(--u-black); }

    /* Strength bar */
    .strength-bar {
      display: flex;
      gap: 4px;
      margin-top: 8px;
      height: 3px;
    }
    .strength-bar span {
      flex: 1;
      border-radius: 2px;
      background: var(--u-gray200);
      transition: background .25s;
    }
    .strength-bar.s1 span:nth-child(1)                    { background: #C8372D; }
    .strength-bar.s2 span:nth-child(-n+2)                 { background: #E87B3A; }
    .strength-bar.s3 span:nth-child(-n+3)                 { background: #3AA76D; }
    .strength-bar.s4 span                                  { background: #2B8A55; }
    .strength-label { font-size: 11px; color: var(--u-gray600); margin-top: 4px; }

    /* ── BUTTONS ─────────────────────────────────────────────── */
    .btn-primary-u {
      width: 100%;
      padding: 14px;
      background: var(--u-black);
      color: var(--u-white);
      border: none;
      border-radius: 8px;
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s;
      margin-top: 6px;
    }
    .btn-primary-u:hover  { background: #222; }

    /* ── CGU ──────────────────────────────────────────────────── */
    .check-field {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 18px;
    }
    .check-field input[type="checkbox"] {
      width: 17px;
      height: 17px;
      accent-color: var(--u-black);
      cursor: pointer;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .check-field label {
      font-size: 13px;
      color: var(--u-gray600);
      line-height: 1.5;
      cursor: pointer;
    }
    .check-field label a {
      color: var(--u-black);
      font-weight: 600;
      text-decoration: underline;
    }

    /* ── DIVIDER ─────────────────────────────────────────────── */
    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 22px 0;
      color: var(--u-gray400);
      font-size: 13px;
    }
    .divider::before, .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--u-border);
    }

    /* ── SIGNIN LINK ─────────────────────────────────────────── */
    .signin-link {
      font-size: 14px;
      color: var(--u-gray600);
      text-align: center;
      margin-top: 20px;
    }
    .signin-link a {
      color: var(--u-black);
      font-weight: 700;
      text-decoration: underline;
    }

    /* ── SUCCESS ─────────────────────────────────────────────── */
    .success-box { text-align: center; padding: 16px 0; }
    .success-icon {
      width: 64px;
      height: 64px;
      background: var(--u-black);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      color: #fff;
      font-size: 28px;
    }

    /* ── PSEUDO availability badge ───────────────────────────── */
    .pseudo-wrap { position: relative; }
    .pseudo-wrap input { padding-right: 42px; }
    .pseudo-status {
      position: absolute;
      right: 13px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 17px;
      display: none;
    }
    .pseudo-status.ok    { display: block; color: var(--u-success); }
    .pseudo-status.taken { display: block; color: var(--u-error); }

    /* ── GENDER TOGGLE ───────────────────────────────────────── */
    .gender-group {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    .gender-btn {
      flex: 1;
      padding: 11px 12px;
      border: 1.5px solid var(--u-border);
      border-radius: 8px;
      background: var(--u-white);
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      color: var(--u-gray600);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transition: border-color .15s, background .15s, color .15s;
    }
    .gender-btn:hover {
      border-color: var(--u-black);
      color: var(--u-black);
    }
    .gender-btn.selected {
      border-color: var(--u-black);
      background: var(--u-black);
      color: var(--u-white);
      font-weight: 700;
    }

    /* ── RESPONSIVE ──────────────────────────────────────────── */
    @media (max-width: 991px) {
      .top-nav { padding: 16px 24px; }
    }
    @media (max-width: 480px) {
      .form-card { padding: 28px 20px 36px; border-radius: 12px; }
      .form-title { font-size: 1.35rem; }
    }