/* ==========================================================================
   LA PAGE D'INSCRIPTION — la porte d'entrée de la campagne.
   Style sorti de la page : la politique de sécurité du contenu interdit le
   style et le script en ligne sur cette page comme sur le reste de l'app.
   Les polices Sora et DM Sans viennent de polices.css, servies par nous.
   ========================================================================== */

  :root{
    --blue:#235779; --blue-dk:#1A3F56; --white:#FFFFFF; --lime:#B9D969; --lime-dk:#A6C654;
    --gray:#E5E7EB; --bg-light:#F4F7FA; --text:#1a1a2e; --muted:#4B5563; --error:#B42318;
    --display:"Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
    --body:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;font-family:var(--body);font-size:16px;line-height:1.5;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased}
  a{color:inherit}
  :focus-visible{outline:3px solid var(--lime);outline-offset:2px;border-radius:4px}

  /* Mise en page : colonne bleue à gauche, formulaire à droite. Sur mobile : accroche, formulaire, démonstration. */
  .page{min-height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"intro form" "demo form" "demo pied"}
  .intro,.demo{background:var(--blue);color:var(--white)}
  .intro{grid-area:intro;padding:clamp(28px,5vw,64px) clamp(24px,6vw,80px) 0;padding-top:max(clamp(28px,5vw,64px),env(safe-area-inset-top))}
  .demo{grid-area:demo;padding:40px clamp(24px,6vw,80px) clamp(32px,5vw,64px)}
  .form-zone{grid-area:form;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(48px,14vh,150px) clamp(24px,6vw,88px) 48px;}

  .logo{display:block;width:132px;height:auto;margin-bottom:clamp(32px,6vw,72px)}
  h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.2rem + 3vw,3.25rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 20px;max-width:14ch}
  .lead{font-size:1.125rem;line-height:1.6;max-width:38ch;margin:0;color:rgba(255,255,255,.88)}

  /* Démonstration : un vrai échange, tel qu'il se passe dans l'application */
  .scene{display:flex;align-items:center;max-width:640px}
  .zapi{flex:none;width:clamp(150px,13vw,200px);height:auto;margin-right:-26px;position:relative;z-index:1}
  .chat{flex:1 1 auto;min-width:0;max-width:460px;background:var(--blue-dk);border-radius:20px;padding:20px 18px 22px;box-shadow:0 18px 40px rgba(9,28,41,.35)}
  .chat-head{display:flex;align-items:center;gap:10px;padding:0 4px 16px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:16px}
  .chat-head .dot{width:34px;height:34px;border-radius:10px;background:var(--blue);display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--lime);font-size:1rem}
  .chat-head strong{font-family:var(--display);font-weight:600;font-size:.95rem;display:block}
  .chat-head span{font-size:.8125rem;color:rgba(255,255,255,.65)}
  .msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:.95rem;line-height:1.45;margin-bottom:10px}
  .msg.moi{margin-left:auto;background:var(--white);color:var(--blue);border-bottom-right-radius:5px}
  .msg.zy{background:var(--blue);color:var(--white);border-bottom-left-radius:5px}
  .vocal{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted);margin-bottom:4px}
  .vocal svg{flex:none}
  .doc{display:flex;align-items:center;gap:12px;background:var(--white);color:var(--text);border-radius:12px;padding:12px 14px;margin:2px 0 10px;max-width:86%}
  .doc svg{flex:none}
  .doc > div{min-width:0}
  .doc b{display:block;white-space:nowrap;font-weight:700;font-size:.9rem;color:var(--blue)}
  .doc small{display:block;font-size:.8125rem;color:var(--muted)}
  .badge{margin-left:auto;font-size:.75rem;font-weight:700;color:var(--blue);background:rgba(185,217,105,.35);padding:3px 8px;border-radius:999px;white-space:nowrap}

  .preuves{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:14px;max-width:460px}
  @media (max-width:1180px){
    .scene{display:block;max-width:460px}
    .zapi{display:block;width:130px;margin:0 0 -22px 4px}
  }
  .preuves li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;color:rgba(255,255,255,.9)}
  .preuves svg{flex:none;margin-top:2px}

  /* Formulaire */
  .carte{width:100%;max-width:400px;margin:0 auto}
  h2{font-family:var(--display);font-weight:700;font-size:1.75rem;line-height:1.2;color:var(--blue);margin:0 0 8px;letter-spacing:-.01em}
  .sous{margin:0 0 28px;color:var(--muted);font-size:1.0625rem}
  .champ{margin-bottom:18px}
  label{display:block;font-weight:500;font-size:.9375rem;color:var(--blue);margin-bottom:6px}
  .saisie{position:relative}
  input[type=email],input[type=password],input[type=text]{width:100%;font:inherit;font-size:1rem;color:var(--blue);background:var(--white);border:1.5px solid var(--gray);border-radius:8px;padding:13px 14px;min-height:50px;transition:border-color .15s}
  input::placeholder{color:#9AA3AF}
  input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(185,217,105,.35)}
  input[aria-invalid=true],input[aria-invalid=true]:focus{border-color:var(--error);box-shadow:0 0 0 3px rgba(180,35,24,.15)}
  .saisie input{padding-right:92px}
  .voir{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:inherit;font-size:.875rem;font-weight:500;color:var(--blue);background:transparent;border:0;padding:8px 10px;border-radius:6px;cursor:pointer}
  .voir:hover{background:var(--bg-light)}
  .aide{display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--muted);margin-top:6px}
  .aide.ok{color:#3F6212}
  .aide svg{flex:none}
  .erreur{font-size:.875rem;color:var(--error);margin-top:6px;min-height:0}
  .erreur:empty{display:none}

  .btn{display:block;width:100%;font-family:var(--display);font-weight:600;font-size:1.0625rem;color:var(--blue);background:var(--lime);border:0;border-radius:8px;padding:15px 18px;min-height:54px;margin-top:8px;cursor:pointer;transition:background-color .15s}
  .btn:hover{background:var(--lime-dk)}
  .btn[disabled]{opacity:.7;cursor:progress}
  .prix{font-size:.9375rem;color:var(--text);text-align:center;margin:14px 0 0}
  .legal{font-size:.8125rem;color:var(--muted);text-align:center;margin:16px 0 0;line-height:1.55}
  .legal a{color:var(--blue)}
  .deja{margin:28px 0 0;padding-top:22px;border-top:1px solid var(--gray);text-align:center;font-size:.9375rem;color:var(--muted)}
  .deja a{color:var(--blue);font-weight:700}

  .succes{text-align:center}
  .succes img{display:block;width:150px;height:auto;margin:0 auto 12px}
  .succes p{color:var(--muted);margin:0}

  .pied{grid-area:pied;padding:0 24px max(28px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;font-size:.8125rem;color:#6B7280}
  .pied a,.pied button{color:#6B7280;text-decoration:underline;text-underline-offset:2px;background:none;border:0;font:inherit;padding:0;cursor:pointer}
  .version{font-variant-numeric:tabular-nums}

  @media (max-width:880px){
    .page{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"intro" "form" "demo" "pied"}
    .pied{background:var(--blue);color:rgba(255,255,255,.75);padding-top:8px}
    .pied a,.pied button{color:rgba(255,255,255,.75)}
    .btn{font-size:1rem}
    .msg{max-width:92%}
    .doc{max-width:100%}
    .intro{padding-bottom:36px}
    .logo{margin-bottom:28px;width:116px}
    .lead{font-size:1.0625rem}
    .form-zone{padding:36px 24px 40px}
    .demo{padding-top:40px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── Ce que le serveur refuse ──────────────────────────────────────────────
   « Un compte existe déjà avec cette adresse », « trop d'essais » : ces
   refus-là ne visent ni le champ mail ni le champ mot de passe, ils visent la
   demande entière. Les coller sous un champ au hasard ferait chercher l'erreur
   au mauvais endroit ; ils ont donc leur place, au-dessus du bouton. */
  .refus{display:flex;gap:10px;align-items:flex-start;background:#FEF3F2;border:1px solid #FDA29B;
         border-radius:8px;padding:12px 14px;margin:0 0 16px;font-size:.9375rem;color:var(--error)}
  .refus:empty{display:none}
  .refus svg{flex:none;margin-top:2px}