/* Carte d'inscription façon Apple HIG (portage du « SignUpFlow »), en sombre, accent or :
   deux écrans dans une seule carte, prénom + e-mail → succès. Rien n'est envoyé (maquette). */
.su{--su-bg:#111823;--su-fill:rgba(118,118,128,.24);--su-fill2:rgba(118,118,128,.14);--su-label:#fff;--su-2:rgba(235,235,245,.6);--su-3:rgba(235,235,245,.3);--su-sep:rgba(84,84,88,.6);--su-accent:var(--gold);--su-rouge:#FF453A;
  --su-ease:cubic-bezier(.2,.9,.25,1);--su-spring:cubic-bezier(.34,1.56,.64,1);
  width:100%;max-width:400px;overflow:hidden;border-radius:24px;background:var(--su-bg);
  box-shadow:0 0 0 .5px rgba(255,255,255,.07),0 24px 60px rgba(0,0,0,.55);-webkit-font-smoothing:antialiased;transition:height .45s var(--su-ease)}
.su-int{padding:24px}
.su-vue{animation:su-next .45s var(--su-ease)}
.su-vue.prev{animation-name:su-prev}
.su-vue[hidden]{display:none}
.su-logo{display:flex;align-items:center;gap:8px;height:32px;margin-bottom:28px}
.su-logo img{width:32px;height:32px;border-radius:9px;object-fit:cover}
.su-logo span{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--su-label)}
.su-logo span em{font-style:normal;color:var(--gold-light)}
.su h3{margin:0;font-family:var(--sans);font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.02em;color:var(--su-label)}
.su .su-sous{margin:8px 0 0;font-size:15px;line-height:21px;color:var(--su-2)}
.su .su-sous b{font-weight:600;color:var(--su-label)}
.su-tete{margin-bottom:24px}
.su-champ{display:flex;align-items:center;height:50px;border-radius:12px;background:var(--su-fill);box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s}
.su-champ:focus-within{box-shadow:inset 0 0 0 1.5px var(--su-accent)}
.su-champ.err{box-shadow:inset 0 0 0 1.5px var(--su-rouge)}
.su-champ+.su-champ,.su-champ+.su-erreur+.su-champ{margin-top:10px}
.su-champ input{height:100%;width:100%;min-width:0;background:transparent;border:0;outline:0;padding:0 16px;font:inherit;font-size:17px;color:var(--su-label);margin:0}
.su-champ input::placeholder{color:var(--su-3);opacity:1}
.su-erreur{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;font-size:13px;line-height:18px;color:var(--su-rouge);animation:su-in .25s ease}
.su-erreur svg{flex-shrink:0;margin-top:1.5px}
.su-erreur[hidden]{display:none}
.su-consent{display:flex;align-items:flex-start;gap:12px;margin-top:16px;font-size:13px;line-height:18px;color:var(--su-2);cursor:pointer;font-weight:400}
.su-consent input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.su-coche{position:relative;display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--su-3);transition:background .2s,box-shadow .2s}
.su-coche svg{width:14px;height:14px;transform:scale(.3);opacity:0;transition:transform .35s var(--su-spring),opacity .2s}
.su-consent input:checked+.su-coche{background:var(--su-accent);box-shadow:none}
.su-consent input:checked+.su-coche svg{transform:scale(1);opacity:1}
.su-consent input:focus-visible+.su-coche{outline:2px solid var(--su-accent);outline-offset:2px}
.su-consent>span:last-child{padding-top:2px}
.su-consent a{color:var(--su-accent);text-decoration:none}
.su-btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin-top:20px;border:0;border-radius:12px;background:var(--su-accent);color:#11151b;font:inherit;font-size:17px;font-weight:600;cursor:pointer;outline:0;transition:transform .2s,background .2s,color .2s}
.su-btn:active{transform:scale(.98)}
.su-btn:focus-visible{box-shadow:0 0 0 2px var(--su-bg),0 0 0 4px var(--su-accent)}
.su-btn:disabled{background:var(--su-fill);color:var(--su-3);cursor:default;transform:none}
.su-btn .su-txt{transition:opacity .2s}
.su-btn.busy .su-txt{opacity:0}
.su-btn .su-spin{position:absolute;inset:0;display:none;place-items:center}
.su-btn.busy .su-spin{display:grid}
.su-spin svg{animation:su-spin .8s linear infinite}
.su-plain{display:block;width:100%;height:36px;margin-top:12px;background:none;border:0;font:inherit;font-size:15px;font-weight:500;color:var(--su-accent);cursor:pointer}
.su-note{display:flex;align-items:center;justify-content:center;gap:7px;margin:16px 0 0;font-size:13px;color:var(--su-2)}
.su-note .icon{width:15px;height:15px;color:#a5b8a6;stroke-width:1.6}
.su-pages{display:flex;align-items:center;gap:12px;margin-top:20px;padding:12px 14px;border-radius:12px;background:var(--su-fill2);font-size:13px;line-height:18px;color:var(--su-2)}
.su-pages strong{font-family:var(--serif);font-size:28px;line-height:1;color:var(--gold-light);font-weight:500}
.su-pages small{font-size:8px;letter-spacing:1.5px;color:var(--su-3);margin-left:3px}
.su-pages b{display:block;font-weight:600;color:var(--su-label)}
/* écran de succès */
.su-ok{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 0 4px}
.su-anneau{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:rgba(198,162,80,.16);animation:su-ring .5s var(--su-ease)}
.su-anneau circle{transform-origin:26px 26px;animation:su-ring .45s var(--su-spring) .05s both}
.su-anneau path{stroke-dasharray:40;stroke-dashoffset:40;animation:su-draw .45s var(--su-ease) .35s forwards}
.su-ok h3{margin-top:20px}
.su-ok .su-sous{max-width:300px}
.su-ok .su-btn{margin-top:28px;text-decoration:none}
.su-ok .su-btn .icon{width:18px;height:18px;margin-left:8px;color:currentColor}
@keyframes su-next{from{opacity:0;transform:translateX(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes su-prev{from{opacity:0;transform:translateX(-28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes su-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes su-spin{to{transform:rotate(360deg)}}
@keyframes su-draw{to{stroke-dashoffset:0}}
@keyframes su-ring{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
/* la carte dans la page du designer */
.hero .signup-block{max-width:400px}
.final-signup .final-centered .su{margin:0 auto}
@media(max-width:640px){.hero .signup-block{max-width:none}.su{max-width:none}.su-int{padding:22px 20px}}
@media(prefers-reduced-motion:reduce){.su,.su-vue,.su-anneau,.su-anneau circle,.su-anneau path,.su-coche svg{animation:none;transition:none;stroke-dashoffset:0;transform:none;opacity:1}}
.su-lien{background:none;border:0;padding:0;font:inherit;color:var(--su-accent);cursor:pointer}
/* retouches 14/11 : nom + prénom sur une ligne, deux cases, 46 pages lisible */
.su-rang{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.su-rang+.su-champ,.su-rang+.su-erreur+.su-champ{margin-top:10px}
.su-consent+.su-consent{margin-top:12px}
.su-pages{gap:16px;padding:14px 16px;align-items:center}
.su-pages strong{font-size:44px;line-height:.9;letter-spacing:-1px;display:flex;align-items:baseline}
.su-pages small{font-size:11px;letter-spacing:2px;color:var(--gold-light);margin-left:5px;font-weight:600}
.su-pages span{font-size:14px;line-height:1.45}
.su-pages b{font-size:15px}
@media(max-width:360px){.su-rang{grid-template-columns:1fr}}
.su-rang>.su-champ{margin-top:0}