/* =========================================================
   GLOBAL CORPORATE & INVESTMENT BANKING — Page « Create an account »
   (inscription.html). Chargé après style.css et premium.css.
   Présentation uniquement : le formulaire garde ses champs, ses
   identifiants et sa validation (script de la page, serveur).
   Photographies : Unsplash (Unsplash License).
========================================================= */

/* ---------- Apparition douce ---------- */
.su-in{ opacity:.01; transform: translateY(14px); animation: suIn .8s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes suIn{ to{ opacity:1; transform:none; } }
/* Départ à .01 : le contenu compte comme affiché dès la première image (LCP). */

/* ---------- En-tête photo + étapes ---------- */
.su-hero{
  position:relative; isolation:isolate; overflow:hidden; color:#fff; padding: 150px 0 120px;
  background: var(--navy-950); --gx-pos: center 55%;
}
.su-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(90deg, rgba(6,18,36,.94) 0%, rgba(10,26,51,.82) 55%, rgba(10,26,51,.6) 100%);
}
.su-photo-card picture, .su-why-media picture{ display:block; }
.su-hero .eyebrow{ color: var(--gold-soft); }
.su-hero .eyebrow .dot{ background: var(--gold-soft); }
.su-hero h1{ color:#fff; font-size: clamp(2.2rem, 4.6vw, 3.4rem); max-width: 720px; margin: 14px 0 14px; }
.su-hero h1 em{ color: var(--gold-soft); font-style: italic; }
.su-hero p{ color: rgba(255,255,255,.78); max-width: 600px; font-size: 1.04rem; margin-bottom: 40px; }

.su-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.14); }
.su-steps li{ display:flex; gap:12px; align-items:flex-start; padding: 22px 18px 0 0; position:relative; }
.su-steps li::before{ content:""; position:absolute; top:-1px; left:0; width:0; height:2px; background: var(--gold); transition: width .6s var(--ease); }
.su-steps li.is-current::before{ width: 70%; }
.su-steps span{
  width:30px; height:30px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.35); font-family: var(--ff-serif); font-size:.9rem; color:#fff;
}
.su-steps li.is-current span{ background: var(--gold); border-color: var(--gold); color: var(--navy-950); }
.su-steps b{ display:block; font-size:.9rem; font-weight:600; color:#fff; }
.su-steps small{ font-size:.76rem; color: rgba(255,255,255,.6); }

/* ---------- Mise en page principale ---------- */
.su-main{ background: var(--bg-alt); padding: 0 0 100px; }
.su-grid{ display:grid; grid-template-columns: minmax(0,1.5fr) minmax(0,.9fr); gap: 36px; align-items:start; }

/* Carte du formulaire, remontée sur l'en-tête */
.signup-page .su-card{
  max-width:none; width:100%; margin-top: -70px; padding: 44px 46px 38px;
  background:#fff; border:1px solid var(--border); border-radius: 14px;
  box-shadow: 0 40px 80px -48px rgba(10,26,51,.55);
}
.su-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.su-card-head h2{ font-size: 1.7rem; margin: 0 0 4px; }
.su-card-head p{ margin:0; font-size:.88rem; color: var(--text-dim); }
.su-secure-chip{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-size:.76rem; font-weight:600;
  color: #2F7D5B; background: rgba(47,125,91,.08); border:1px solid rgba(47,125,91,.22); padding: 7px 12px; border-radius: 999px;
}

/* Sections numérotées du formulaire */
.su-section{ border:0; margin: 0 0 8px; padding: 0 0 26px; position:relative; }
.su-section + .su-section{ padding-top: 28px; border-top: 1px dashed var(--border-strong); }
.su-section legend{ display:flex; align-items:center; gap:12px; font-family: var(--ff-head); font-weight:600; font-size: 1.02rem; color: var(--text); padding:0; margin-bottom: 20px; float:left; width:100%; }
.su-section legend + *{ clear:both; }
.su-num{
  width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background: var(--steel-100); color: var(--navy-800); font-family: var(--ff-serif); font-size:.92rem; transition: background .3s var(--ease), color .3s var(--ease);
}
.su-section:focus-within .su-num{ background: var(--navy-800); color: var(--gold-soft); }

/* Champs avec icône */
.signup-page .field{ margin-bottom: 18px; }
.signup-page .field label{ font-size: .8rem; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.su-input{ position:relative; }
.su-input > i{
  position:absolute; left:15px; top:50%; transform: translateY(-50%); color: var(--text-dim); font-size:.9rem;
  pointer-events:none; transition: color .25s var(--ease);
}
.signup-page .su-input input, .signup-page .su-input select{ padding: 14px 16px 14px 44px; border-radius: 8px; background:#fff; height: 50px; }
.signup-page .su-input select{ appearance:none; -webkit-appearance:none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat:no-repeat; padding-right: 40px; }
.su-input:focus-within > i{ color: var(--navy-700); }
.signup-page .su-input .toggle-pass{ position:absolute; right:12px; top:50%; transform: translateY(-50%); width:34px; height:34px; border-radius:6px; }
.signup-page .su-input .toggle-pass:hover{ background: var(--bg-alt); color: var(--navy-800); }
.signup-page .su-input input[type=password]{ padding-right: 52px; }
.su-hint{ display:block; font-size:.78rem; color: var(--text-dim); margin-top:7px; line-height:1.5; }

/* États de validation */
.signup-page .field.is-valid .su-input::after{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.78rem;
  position:absolute; right:14px; top:50%; transform: translateY(-50%); color:#2F7D5B;
}
.signup-page .field.is-valid input{ border-color: rgba(47,125,91,.45); }
.signup-page .field.invalid input, .signup-page .field.invalid select{ border-color: #B42318; box-shadow: 0 0 0 4px rgba(180,35,24,.08); }
.signup-page .field.invalid .su-input > i{ color:#B42318; }
.signup-page .field small.err{ color:#B42318; font-weight:500; }
.signup-page .field small.err::before{ content:"\f06a"; font-family:"Font Awesome 6 Free"; font-weight:900; margin-right:6px; }
.signup-page #form-alert{ border-radius: 8px; }

/* Mot de passe */
.signup-page .pw-meter{ height:4px; background: var(--steel-100); margin-top:10px; }
.su-pw-label{ display:block; font-size:.76rem; color: var(--text-dim); margin-top:6px; }

/* Photo de profil et pièces justificatives */
.signup-page .photo-picker{ background: var(--bg-alt); border:1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 22px; }
.signup-page .kyc-section{ background: var(--bg-alt); border:1px solid var(--border); border-radius: 10px; padding: 20px; margin: 4px 0 6px; }
.signup-page .kyc-section-head h4{ display:flex; align-items:center; gap:8px; }
.signup-page .kyc-section-head h4 i{ color: var(--navy-700); }
.signup-page .dropzone{ background:#fff; border-radius: 8px; border-color: var(--border-strong); }
.signup-page .dropzone:hover, .signup-page .dropzone:focus-visible{ border-color: var(--navy-700); background:#fff; }
.signup-page .dropzone-icon{ color: var(--navy-700); background: var(--steel-100); }
.signup-page .kyc-optional-badge{ background: var(--steel-100); color: var(--navy-700); border-color: transparent; }

/* Envoi */
.signup-page .check-row{ margin: 4px 0 6px; }
.su-submit{ height: 56px; font-size: 1rem; margin-top: 18px; }
.su-submit-note{ text-align:center; font-size:.78rem; color: var(--text-dim); margin: 12px 0 0; }
.su-submit-note i{ color:#2F7D5B; margin-right:6px; }

/* ---------- Colonne de réassurance ---------- */
.su-aside{ position: sticky; top: 96px; margin-top: -70px; display:flex; flex-direction:column; gap: 20px; }
.su-photo-card{ position:relative; border-radius: 14px; overflow:hidden; box-shadow: 0 30px 60px -40px rgba(10,26,51,.6); }
.su-photo-card img{ width:100%; height:auto; aspect-ratio: 4/3; object-fit:cover; transition: transform 1.2s var(--ease); }
.su-photo-card:hover img{ transform: scale(1.04); }
.su-photo-caption{ position:absolute; inset:auto 0 0 0; padding: 60px 22px 20px; background: linear-gradient(0deg, rgba(6,18,36,.92), rgba(6,18,36,0)); color:#fff; }
.su-photo-caption b{ display:block; font-family: var(--ff-serif); font-weight:500; font-size:1.2rem; }
.su-photo-caption span{ font-size:.84rem; color: rgba(255,255,255,.78); }

.su-trust{ background: var(--navy-900); color:#fff; border-radius: 14px; padding: 28px 26px; border:1px solid rgba(217,194,154,.18); }
.su-trust h3{ color:#fff; font-size: 1.02rem; display:flex; align-items:center; gap:10px; margin-bottom: 18px; }
.su-trust h3 i{ color: var(--gold-soft); }
.su-trust ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.su-trust li{ display:flex; gap:14px; align-items:flex-start; }
.su-trust li > i{ width:34px; height:34px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(217,194,154,.12); color: var(--gold-soft); font-size:.85rem; }
.su-trust b{ display:block; font-size:.9rem; color:#fff; }
.su-trust span{ font-size:.82rem; color: rgba(255,255,255,.66); line-height:1.5; }

.su-help{ display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--border); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-soft); }
.su-help > i{ font-size:1.2rem; color: var(--navy-700); }
.su-help b{ display:block; font-size:.9rem; }
.su-help span{ font-size:.84rem; color: var(--text-muted); }
.su-help a{ color: var(--navy-800); font-weight:600; }

/* ---------- Pourquoi ouvrir un compte ---------- */
.su-why{ padding: 110px 0; background:#fff; }
.su-why-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items:center; }
.su-why-media{ position:relative; isolation:isolate; }
.su-why-media img{ width:100%; height:auto; aspect-ratio: 4/5; object-fit:cover; border-radius: 4px; box-shadow: 0 40px 80px -50px rgba(10,26,51,.6); }
.su-why-media::before{ content:""; position:absolute; inset: 22px 22px -22px -22px; border:1px solid var(--gold); border-radius:4px; z-index:-1; opacity:.5; }
.su-why h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.su-features{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-top: 30px; }
.su-features > div{ padding: 20px 0 0; border-top: 1px solid var(--border); transition: border-color .35s var(--ease); }
.su-features > div:hover{ border-color: var(--gold); }
.su-features i{ color: var(--gold); font-size: 1.1rem; margin-bottom: 10px; display:block; }
.su-features b{ display:block; font-size: .95rem; margin-bottom: 4px; }
.su-features span{ font-size: .86rem; color: var(--text-muted); line-height:1.55; }

.su-footer{ padding: 36px 0 26px; }
.su-footer .footer-bottom span a{ color: rgba(255,255,255,.72); }
.su-footer .footer-bottom span a:hover{ color:#fff; }

/* ---------- Adaptation ---------- */
@media (max-width: 1040px){
  .su-grid{ grid-template-columns: 1fr; }
  .su-aside{ position: static; margin-top: 0; display:grid; grid-template-columns: 1fr 1fr; }
  .su-photo-card{ grid-row: span 2; }
}
@media (max-width: 860px){
  .su-steps{ grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .su-why-grid{ grid-template-columns: 1fr; gap: 50px; }
  .su-why-media{ max-width: 460px; }
}
@media (max-width: 640px){
  .su-hero{ padding: 120px 0 100px; }
  .su-steps{ grid-template-columns: 1fr; }
  .su-steps li{ padding-top: 14px; }
  .su-steps li:not(.is-current) small{ display:none; }
  .signup-page .su-card{ padding: 28px 20px 26px; margin-top: -60px; border-radius: 12px; }
  .su-card-head{ flex-direction:column; }
  .su-aside{ grid-template-columns: 1fr; }
  .su-features{ grid-template-columns: 1fr; }
  .su-why{ padding: 80px 0; }
  .su-why-media::before{ inset: 14px 14px -14px -14px; }
}
@media (prefers-reduced-motion: reduce){ .su-in{ opacity:1; transform:none; animation:none; } }