/* ============================================================
   Tunnel d'inscription libre-service — maquette « Inscription
   Naoshift — proposition » (canevas du 2026-09-24).
   Chargée APRÈS auth.css par accounts/signup_base.html, et seulement
   là : tout est préfixé par body.signup-flow, les autres pages
   d'authentification ne bougent pas.
   ============================================================ */

body.signup-flow{
  --navy:#0b1526;--panel:#101d33;--line:#1f2e48;
  --teal:#22b8e6;--teal-l:#5fd0f0;
  --txt:#ffffff;--mut:#c9d3e2;--dim:#8a97ab;
  --scope-bg:#e6f6fc;--scope-ink:#0b1526;--scope-txt:#3b4757;--scope-accent:#0e6d8d;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--navy);
}
body.signup-flow h1,body.signup-flow h2,body.signup-flow .wordmark,body.signup-flow .intro-title,
body.signup-flow .step b,body.signup-flow .step .num{font-family:'Outfit',system-ui,sans-serif}
body.signup-flow a:focus-visible,body.signup-flow button:focus-visible,body.signup-flow input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

body.signup-flow .wordmark{font-weight:600;font-size:22px;letter-spacing:-.02em;color:var(--txt);line-height:1}
body.signup-flow .wordmark span{color:var(--teal)}
body.signup-flow .wordmark-sm{display:none;font-size:20px}

/* ================= Panneau de gauche ================= */
body.signup-flow .signup-brand{
  width:53%;min-height:100vh;overflow:visible;
  justify-content:flex-start;align-items:stretch;gap:26px;
  padding:48px clamp(32px,4.4vw,64px) 40px clamp(40px,6.1vw,88px);
  background:var(--navy);border-right:1px solid var(--line);
}
body.signup-flow .signup-brand::before,body.signup-flow .signup-brand::after{display:none}
body.signup-flow .signup-brand .hero{display:flex;flex-direction:column;gap:14px}
body.signup-flow .eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0}
body.signup-flow .signup-brand h2{margin:0;max-width:none;font-weight:600;font-size:46px;line-height:1.08;letter-spacing:-.03em;color:var(--txt)}
body.signup-flow .signup-brand p.para{margin:0;font-size:17px;line-height:1.5;color:var(--mut)}

body.signup-flow .steps-title{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
body.signup-flow .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
body.signup-flow .step{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.45;color:var(--mut)}
body.signup-flow .step > div{display:flex;flex-direction:column;gap:10px}
body.signup-flow .step b{font-weight:600;font-size:16px;line-height:1.25;color:var(--txt)}
body.signup-flow .step .num{width:28px;height:28px;flex-shrink:0;border-radius:999px;background:var(--teal);color:var(--navy);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center}

/* Périmètre de la version gratuite : l'encadré clair de la maquette. */
body.signup-flow .scope{display:flex;gap:12px;align-items:flex-start;margin:0;padding:16px 20px;border:none;border-radius:10px;background:var(--scope-bg);color:var(--scope-txt);font-size:14px;line-height:1.45}
body.signup-flow .scope svg{flex-shrink:0;margin-top:1px;color:var(--scope-accent)}
body.signup-flow .scope b{display:block;margin:0 0 4px;font-weight:600;color:var(--scope-ink)}
body.signup-flow .scope .limits{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 16px}
body.signup-flow .scope .limits li{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--scope-ink);white-space:nowrap}
body.signup-flow .scope .limits li::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--scope-accent)}
body.signup-flow .scope p{margin:6px 0 0}
body.signup-flow .scope a{color:var(--scope-accent);font-weight:600}
body.signup-flow .scope a:hover{color:var(--scope-ink)}

body.signup-flow .chips{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
body.signup-flow .chip{padding:6px 12px;border-radius:999px;background:rgba(34,184,230,.15);color:var(--teal);font-size:12px;font-weight:600;line-height:1.4}
body.signup-flow a.chip:hover{background:rgba(34,184,230,.25);color:var(--teal-l)}

/* ================= Colonne du formulaire ================= */
body.signup-flow .auth{
  width:47%;background:var(--navy);
  padding:40px clamp(32px,6.1vw,88px) 36px clamp(32px,5vw,72px);
}
body.signup-flow .auth-top{font-size:13px;color:var(--dim)}
body.signup-flow .lang button{font-size:13px;color:var(--dim)}
body.signup-flow .lang button.active{color:var(--txt);font-weight:600}
body.signup-flow .auth-mid,body.signup-flow .auth-wide .auth-mid{max-width:460px}

body.signup-flow .form-head{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
body.signup-flow .form-head h1{margin:0;text-align:left;font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.03em}
body.signup-flow .form-head .sub{margin:0;text-align:left;font-size:15px;line-height:1.5;color:var(--mut)}
body.signup-flow .auth h1{font-weight:600;letter-spacing:-.02em}

body.signup-flow .field{margin-bottom:14px}
body.signup-flow .field label{font-size:13px;font-weight:600;color:var(--mut)}
body.signup-flow .inp input,body.signup-flow .inp select{height:48px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--txt);font-size:15px}
body.signup-flow .inp input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(34,184,230,.2)}
body.signup-flow .inp input::placeholder{color:var(--dim)}

body.signup-flow .checks{display:flex;flex-direction:column;gap:10px;margin:4px 0 18px}
body.signup-flow .check{display:flex;gap:10px;align-items:flex-start}
body.signup-flow .check input[type=checkbox]{flex-shrink:0;width:18px;height:18px;margin:1px 0 0;accent-color:var(--teal);cursor:pointer}
body.signup-flow .check label{font-size:13px;line-height:1.45;color:var(--mut);cursor:pointer}
body.signup-flow .checks .errors{margin:-4px 0 0 28px;font-size:12.5px;line-height:1.5;color:var(--err)}
body.signup-flow .checks .errors ul{list-style:none;margin:0;padding:0}

body.signup-flow .btn-primary{height:50px;border-radius:999px;background:var(--teal);color:var(--navy);font-size:15px;font-weight:600;box-shadow:none}
body.signup-flow .btn-primary:hover{background:var(--teal-l);color:var(--navy);filter:none}
body.signup-flow .hint.center{margin-top:14px;font-size:13px;line-height:1.45;color:var(--dim)}

body.signup-flow .signup-alt{margin-top:22px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
body.signup-flow .signup-alt p{font-size:14px;color:var(--mut)}
body.signup-flow .signup-alt p.muted{font-size:13px;color:var(--dim)}
body.signup-flow .signup-alt a{font-weight:600}

/* Pages d'état du tunnel (lien envoyé, attente, lien expiré) : centrées. */
body.signup-flow .status-ico.mail{background:rgba(34,184,230,.14);color:var(--teal);border-color:rgba(34,184,230,.4)}
body.signup-flow .backlink a{color:var(--dim)}

/* Réservés au mobile. */
body.signup-flow .signup-intro,body.signup-flow .signup-mobile-extra{display:none}

/* Bureau étroit : les trois cartes deviennent des lignes. */
@media(max-width:1240px){
  body.signup-flow .signup-brand h2{font-size:38px}
  body.signup-flow .steps{grid-template-columns:1fr;gap:10px}
  body.signup-flow .step{flex-direction:row;align-items:flex-start;gap:14px;padding:14px 16px}
  body.signup-flow .step > div{gap:4px}
}

/* Écrans peu hauts. */
@media(min-width:981px) and (max-height:860px){
  body.signup-flow .signup-brand{gap:22px;padding-top:40px;padding-bottom:36px}
  body.signup-flow .signup-brand h2{font-size:38px}
  body.signup-flow .signup-brand p.para{font-size:16px}
  body.signup-flow .step{padding:16px}
}

/* ================= Mobile : maquette 390 px ================= */
@media(max-width:980px){
  body.signup-flow .auth{width:100%;padding:20px 20px 22px}
  body.signup-flow .auth-top .ipm{display:none}
  body.signup-flow .wordmark-sm{display:inline-block}
  body.signup-flow .auth-mid{padding:16px 0 8px;justify-content:flex-start}

  body.signup-flow .signup-intro{display:flex;flex-direction:column;gap:10px;margin:0 0 16px;text-align:left}
  body.signup-flow .signup-intro .intro-title{margin:0;font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.03em;color:var(--txt)}
  body.signup-flow .signup-intro p{font-size:15px;line-height:1.45;color:var(--mut)}

  body.signup-flow .signup-card{padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
  body.signup-flow .signup-card .form-head{margin-bottom:16px}
  body.signup-flow .signup-card .form-head h1{font-size:21px}
  body.signup-flow .signup-card .form-head .sub{font-size:13.5px}
  body.signup-flow .signup-card .inp input{background:var(--navy);font-size:16px}
  body.signup-flow .signup-card .hint.center{font-size:12px}

  body.signup-flow .signup-mobile-extra{display:flex;flex-direction:column;gap:12px;margin-top:22px}
  body.signup-flow .signup-mobile-extra .steps-title{margin:0}
  body.signup-flow .signup-mobile-extra .steps{grid-template-columns:1fr;gap:10px}
  body.signup-flow .signup-mobile-extra .step{flex-direction:row;gap:12px;padding:0;background:none;border:none}
  body.signup-flow .signup-mobile-extra .step .num{width:26px;height:26px;font-size:13px}
  body.signup-flow .signup-mobile-extra .step > div{display:block}
  body.signup-flow .signup-mobile-extra .step b{font-size:14px;line-height:1.45}
  body.signup-flow .signup-mobile-extra .step b::after{content:"."}
  body.signup-flow .signup-alt{margin-bottom:18px}
  body.signup-flow .signup-mobile-extra .scope{margin-top:4px;padding:12px 14px;font-size:13px}

  body.signup-flow .form-head h1,body.signup-flow .form-head .sub{text-align:left}
}