/* =====================================================================
   Page d'inscription candidat — refonte 2026
   Maquette : design/inscription/maquette/« Inscription WorkDispo 2026.dc.html »
   (Claude Design, validée par Sam le 23/09/2026).

   Feuille utilisée UNIQUEMENT par templates/auth/register_freelance_new.html.twig.
   Tout est préfixé .wdi / body.wd-inscription : aucune autre page n'est touchée.
   La mécanique du formulaire (identifiants des champs, jeton reCAPTCHA, champ
   piège, horodatage signé, jeton CSRF) n'est pas concernée par ce fichier — le
   style du champ piège reste EN LIGNE dans le gabarit, pour qu'il soit invisible
   même si cette feuille n'est pas encore chargée.
   ===================================================================== */

:root {
  --wdi-blue: #2A41E8;
  --wdi-blue-dark: #1E31C0;
  --wdi-ink: #0F1836;
  --wdi-ink-2: #4C5772;
  --wdi-muted: #5A6685;
  --wdi-line: #E1E6F2;
  --wdi-bg: #F7F9FD;
}

body.wd-inscription {
  margin: 0;
  background: #fff;
  color: var(--wdi-ink-2);
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.wd-inscription .wdi * { box-sizing: border-box; }
.wdi h1, .wdi h2, .wdi h3 {
  color: var(--wdi-ink); margin: 0;
  font-family: 'Space Grotesk', 'IBM Plex Sans', Helvetica, Arial, sans-serif;
}
.wdi p { margin: 0; }
.wdi a { color: var(--wdi-blue); text-decoration: none; }
.wdi a:hover { color: var(--wdi-blue-dark); }
/* le thème pose outline:0!important sur a et button : on le rétablit au clavier */
.wdi a:focus-visible, .wdi button:focus-visible {
  outline: 2px solid var(--wdi-blue) !important; outline-offset: 3px;
}
@keyframes wdiRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Gabarit deux colonnes ---------- */
.wdi { display: flex; flex-wrap: wrap; min-height: 100vh; min-height: 100dvh; background: #fff; }

/* ---------- Colonne de gauche : l'inscription ---------- */
/* La carte est centrée dans la colonne, horizontalement et
   verticalement : une grille à une seule piste, elle-même centrée. La maquette
   la collait au bord gauche, ce qui se voyait dès que la fenêtre dépasse 1 200 px. */
.wdi-form-col {
  flex: 1 1 520px; min-width: 0; position: relative; overflow: hidden;
  display: grid; grid-template-columns: min(456px, 100%); grid-auto-rows: min-content;
  justify-content: center; align-content: center;
  padding: 32px clamp(24px, 5vw, 76px);
}
.wdi-glow {
  position: absolute; top: -220px; left: -160px; width: 620px; height: 620px;
  pointer-events: none; background: radial-gradient(circle, rgba(42,65,232,.10), transparent 68%);
}
.wdi-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(42,65,232,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(42,65,232,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 60% at 20% 8%, #000, transparent);
  mask-image: radial-gradient(80% 60% at 20% 8%, #000, transparent);
}
/* Les 56 px de vide en bas font partie du bloc centré : ils remontent la carte
   d'un peu moins de 30 px, sinon elle paraît basse dans une fenêtre haute. */
.wdi-form-wrap {
  position: relative; display: flex; flex-direction: column;
  justify-content: center; padding: 0 0 56px;
}
.wdi-card { width: 100%; max-width: 456px; animation: wdiRise .5s cubic-bezier(.2,.8,.3,1) both; }

.wdi-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 8px;
  border-radius: 999px; background: #F4F6FE; border: 1px solid #DFE5FA;
}
.wdi-badge-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #0E7A4D; flex-shrink: 0;
}
.wdi-badge b { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--wdi-blue-dark); }

.wdi h1 {
  margin-top: 24px; font-size: clamp(30px, 3.9vw, 47px); font-weight: 700;
  line-height: 1.04; letter-spacing: -.04em; text-wrap: balance;
}
.wdi h1 .wdi-accent {
  background: linear-gradient(125deg, #2436CE 0%, #2A41E8 45%, #5B6FF0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wdi-lede { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--wdi-muted); max-width: 420px; }

/* ---------- Boutons ---------- */
.wdi-actions { margin-top: 30px; display: grid; gap: 12px; }
.wdi-btn {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 62px; padding: 0 20px; border-radius: 18px; width: 100%;
  font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600;
  cursor: pointer; border: 0; text-align: center;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s cubic-bezier(.2,.7,.3,1),
              background-color .18s ease, border-color .18s ease, color .16s ease;
}
.wdi-btn-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.wdi-btn-google {
  background: #fff; border: 1px solid var(--wdi-line); color: var(--wdi-ink);
  box-shadow: 0 1px 2px rgba(16,24,48,.05), 0 6px 18px rgba(16,24,48,.05);
}
.wdi-btn-google:hover, .wdi-btn-google:focus {
  border-color: #C6CFEC; color: var(--wdi-ink); transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(16,24,48,.05), 0 14px 30px rgba(16,24,48,.12);
}
.wdi-btn-google .wdi-btn-ico { background: var(--wdi-bg); border: 1px solid #EAEEF7; }
.wdi-btn-mail, .wdi-submit {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #4055F0, #2436CE);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 26px rgba(42,65,232,.34);
}
.wdi-btn-mail:hover, .wdi-btn-mail:focus, .wdi-submit:hover, .wdi-submit:focus {
  background: linear-gradient(180deg, #2F45E4, #1B2BB5); color: #fff;
  transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 16px 36px rgba(42,65,232,.44);
}
.wdi-btn-mail .wdi-btn-ico { background: rgba(255,255,255,.18); }
.wdi-sep { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.wdi-sep i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(225,230,242,0), var(--wdi-line)); }
.wdi-sep i + b + i { background: linear-gradient(90deg, var(--wdi-line), rgba(225,230,242,0)); }
.wdi-sep b {
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--wdi-muted);
}

/* ---------- Formulaire par mail (dépliable) ---------- */
.wdi-mail-panel { display: none; margin-top: 2px; }
.wdi-mail-panel.is-open { display: block; animation: wdiRise .28s cubic-bezier(.2,.8,.3,1) both; }
.wdi-field { margin-top: 12px; }
.wdi-label {
  display: block !important; margin: 0 0 7px !important; font-size: 13px !important;
  font-weight: 600 !important; color: var(--wdi-ink) !important;
  font-family: 'Space Grotesk', sans-serif;
}
/* bloc et non flex : jQuery Validate insère son message juste après le champ,
   il doit passer à la ligne et non se glisser à côté */
.wdi-input-wrap { position: relative; display: block; }
/* le thème impose input{height:48px;line-height:48px;padding:0 20px;margin:0 0 16px} */
.wdi .wdi-input-wrap input[type="email"],
.wdi .wdi-input-wrap input[type="password"],
.wdi .wdi-input-wrap input[type="text"] {
  width: 100%; height: 56px; line-height: normal; margin: 0;
  padding: 0 48px 0 16px; border-radius: 16px; background: #fff;
  border: 1px solid var(--wdi-line); box-shadow: none;
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  font-size: 15.5px; font-weight: 500; color: var(--wdi-ink);
}
.wdi .wdi-input-wrap input::placeholder { color: #8A96B0; font-weight: 400; }
.wdi .wdi-input-wrap input:focus {
  border-color: var(--wdi-blue); box-shadow: 0 0 0 3px rgba(42,65,232,.16); outline: none !important;
}
.wdi .wdi-input-wrap input.error { border-color: #D93B3B; }
.wdi-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 11px; color: var(--wdi-muted); cursor: pointer; font-size: 18px;
}
.wdi-eye:hover { background: var(--wdi-bg); color: var(--wdi-ink); }
.wdi-error, .wdi .text-error {
  display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: #C42B2B;
}
.wdi-error:empty, .wdi .text-error:empty { display: none; }
.wdi .wdi-error ul, .wdi .text-error ul { margin: 0; padding: 0; list-style: none; }
.wdi label.error {
  display: block !important; margin: 6px 0 0 !important; font-size: 13px !important;
  font-weight: 500 !important; color: #C42B2B !important;
}
.wdi-submit { margin-top: 16px; }

/* ---------- Mentions et liens de bas de colonne ---------- */
.wdi-legal {
  margin-top: 22px; padding: 16px 18px; border-radius: 16px;
  background: var(--wdi-bg); border: 1px solid #EAEEF7;
}
.wdi-legal p { font-size: 13.5px; line-height: 1.6; color: var(--wdi-muted); }
.wdi-legal a { font-weight: 600; }
.wdi-foot {
  margin-top: 24px; padding-top: 22px; border-top: 1px solid #EEF1F8;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between;
}
.wdi-foot span { font-size: 15px; font-weight: 500; color: var(--wdi-muted); }
.wdi-foot a { font-weight: 700; }

/* messages flash du thème (lien de confirmation envoyé, erreur de validation…) */
.wdi .notification { margin: 18px 0 0; }

/* ---------- Colonne de droite : les arguments ---------- */
.wdi-side { flex: 1 1 460px; min-width: 0; position: relative; overflow: hidden; background: #080D1F; }
.wdi-side-bg { position: absolute; inset: 0; pointer-events: none; }
.wdi-side-bg-1 { background: radial-gradient(130% 90% at 88% 4%, #3A55FF 0%, #1E2FC4 26%, #111B57 54%, #080D1F 100%); }
.wdi-side-bg-2 {
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(110% 80% at 85% 6%, #000 0%, rgba(0,0,0,.25) 60%, transparent 100%);
  mask-image: radial-gradient(110% 80% at 85% 6%, #000 0%, rgba(0,0,0,.25) 60%, transparent 100%);
}
.wdi-ring { position: absolute; border-radius: 50%; pointer-events: none; aspect-ratio: 1; }
.wdi-ring-1 { top: -38%; right: -30%; width: min(760px, 118%); border: 1px solid rgba(255,255,255,.12); }
.wdi-ring-2 { top: -24%; right: -16%; width: min(560px, 90%); border: 1px solid rgba(255,255,255,.09); }
.wdi-ring-3 { bottom: -34%; left: -26%; width: min(620px, 104%); background: radial-gradient(circle, rgba(58,85,255,.34), transparent 66%); }
.wdi-side-in {
  position: relative; min-height: 100%; display: flex; flex-direction: column;
  justify-content: center; gap: clamp(22px, 3vh, 34px);
  padding: clamp(38px, 4.6vw, 66px) clamp(28px, 4vw, 58px);
}
.wdi-quote {
  padding: 20px; border-radius: 22px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(4,9,28,.4);
}
.wdi-quote-top { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.wdi-quote-bar { margin-top: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.wdi-quote-bar i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #6E86FF, #C3D0FF); box-shadow: 0 0 16px rgba(160,180,255,.6); }
.wdi-quote p { margin-top: 12px; font-size: 13.5px; font-weight: 500; color: #B7C4EE; line-height: 1.5; }
.wdi-args { display: grid; }
.wdi .wdi-arg {
  display: flex; align-items: center; gap: 13px; padding: 13px 0; margin: 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  font-size: 15px; font-weight: 600; color: #EAEFFF; line-height: 1.35;
}
.wdi .wdi-arg:last-child { border-bottom: 0; }
.wdi-arg-ico {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 9px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(180,199,255,.35);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Écrans étroits ---------- */
@media (max-width: 991px) {
  .wdi { display: block; min-height: 0; }
  .wdi-form-col { padding: 22px 18px 30px; min-height: auto; grid-template-columns: min(520px, 100%); }
  .wdi-form-wrap { padding: 26px 0 8px; }
  .wdi-card { max-width: 520px; margin: 0 auto; }
  .wdi-side-in { padding: 30px 20px 36px; gap: 20px; }
}
@media (max-width: 480px) {
  .wdi-btn { min-height: 58px; font-size: 15px; gap: 10px; }
  .wdi-foot { gap: 10px; }
  .wdi-foot span { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .wdi-card, .wdi-mail-panel.is-open { animation: none; }
  .wdi-btn { transition: none; }
}