/* Preferito · marque : Prune #5B2148, Encre #17141A, Nappe #F6F4F1, Rose poudré #E9A9C6. Titres Sora, texte Instrument Sans. */
:root{
  --prune:#5B2148; --prune-dark:#471937; --prune-soft:#EFE4EB; --encre:#17141A; --nappe:#F6F4F1; --rose:#E9A9C6;
  --muted:#6E6670; --soft:#4A434D; --line:#E2DCD6; --white:#fff; --danger:#B3261E; --danger-soft:#FBEAEA;
  --ok:#1E6B4A; --ok-soft:#E3F2EA; --wait:#8A5A00; --wait-soft:#FBF0D9;
  --radius:12px; --title:'Sora',system-ui,sans-serif; --text:'Instrument Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--text);color:var(--encre);background:var(--nappe);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--title);font-weight:600;letter-spacing:-0.02em;margin:0;line-height:1.2}
a{color:var(--prune)}
.hidden{display:none !important}

/* Logo : « preferito » minuscule, Sora Semibold, le point du i en Prune. */
.logo{font-family:var(--title);font-weight:600;font-size:26px;letter-spacing:-0.055em;color:var(--encre);text-decoration:none;display:inline-flex;align-items:baseline;line-height:1}
.logo .i{position:relative;display:inline-block}
.logo .i::after{content:"";position:absolute;left:50%;top:.08em;width:.24em;height:.24em;margin-left:-.12em;border-radius:50%;background:var(--prune)}
.on-dark .logo{color:#fff}
.on-dark .logo .i::after{background:var(--rose)}

/* Mise en page inscription : panneau de marque + formulaire */
.split{min-height:100vh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.brand-panel{background:var(--prune);color:#fff;padding:40px 48px;display:flex;flex-direction:column;justify-content:space-between}
.brand-panel h2{font-size:34px;margin:0 0 16px;color:#fff;max-width:380px}
.brand-panel p{color:#EBDCE5;margin:0;max-width:380px}
.perks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.perks li{display:flex;gap:12px;align-items:flex-start;color:#F4EAF0}
.perks .dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--rose);margin-top:8px}
.brand-foot{font-size:13px;color:#CDB3C3}
.form-side{display:flex;align-items:flex-start;justify-content:center;padding:48px 20px}
.card{width:100%;max-width:440px;background:var(--white);border-radius:20px;padding:28px 26px;border:1px solid #EEE9E4}
.card.wide{max-width:640px}
.mobile-logo{display:none;margin-bottom:22px}

/* Étapes */
.progress{display:flex;gap:6px;margin-bottom:8px}
.progress span{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background .3s}
.progress span.on{background:var(--prune)}
.step-label{font-size:13px;color:var(--muted);margin:0 0 18px}
.card h1{font-size:26px;margin-bottom:8px}
.lead{font-size:15px;color:var(--soft);margin:0 0 22px}

/* Champs */
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.field input{width:100%;height:48px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:0 14px;font:inherit;font-size:16px;color:var(--encre);transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:#A69EA8}
.field input:focus{outline:none;border-color:var(--prune);box-shadow:0 0 0 3px rgba(91,33,72,.15)}
.field.err input{border-color:var(--danger)}
.field .msg{font-size:13px;color:var(--danger);margin-top:5px;min-height:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--soft);margin:6px 0 4px}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--prune);flex:none}
.hint{font-size:13px;color:var(--muted);margin-top:5px}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 22px;border-radius:14px;border:none;font-family:var(--title);font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--prune);color:#fff;width:100%}
.btn-primary:hover{background:var(--prune-dark)}
.btn-primary[aria-busy="true"]{opacity:.7;pointer-events:none}
.btn-ghost{background:transparent;color:var(--soft);height:44px;padding:0 12px}
.btn-ghost:hover{color:var(--encre)}
.btn-small{height:38px;font-size:13px;padding:0 14px;border-radius:10px}
.btn-outline{background:#fff;color:var(--prune);border:1px solid var(--line)}
.btn-outline:hover{border-color:var(--prune)}
.actions{display:flex;gap:10px;align-items:center;margin-top:8px}
.actions .btn-primary{flex:1}

.alert{border-radius:var(--radius);padding:12px 14px;font-size:14px;margin-bottom:16px;background:var(--danger-soft);color:var(--danger)}
.alert.info{background:var(--prune-soft);color:var(--prune)}

.secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;font-size:13px;color:var(--muted)}
.secure svg{flex:none}
.secure b{font-weight:600;color:var(--soft);letter-spacing:-0.01em}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:4px 12px;border-radius:999px}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.actif{background:var(--ok-soft);color:var(--ok)}
.chip.en_verification{background:var(--wait-soft);color:var(--wait)}
.chip.a_completer{background:var(--prune-soft);color:var(--prune)}
.chip.refuse{background:var(--danger-soft);color:var(--danger)}

.stripe-box{min-height:220px}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:14px;padding:40px 0}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--prune);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.done-mark{width:64px;height:64px;border-radius:50%;background:var(--prune-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.next-list{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}
.next-list li{display:flex;gap:12px;font-size:15px;color:var(--soft)}
.next-list .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--nappe);color:var(--prune);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}

.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .brand-panel{display:none}
  .mobile-logo{display:block}
  .form-side{padding:24px 16px}
  .card{padding:24px 20px}
}
@media (max-width:420px){ .row{grid-template-columns:1fr;gap:0} }