/* ═══════════════════════════════════════
   Dossier d'enrôlement — page /rejoindre.html
   ═══════════════════════════════════════ */
.join{position:relative;z-index:3;padding:110px clamp(16px,4vw,40px) 70px;max-width:1180px;margin-inline:auto}
.join__head{text-align:center;margin-bottom:clamp(30px,5vw,50px)}
.join__head .lead{margin-inline:auto}

.join__grid{display:grid;gap:22px;align-items:start}
@media (min-width:900px){.join__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.join__grid[hidden]{display:none}

/* ─── Formulaire ─── */
.join__form{
  position:relative;padding:clamp(24px,4vw,38px);
  background:linear-gradient(to top,rgba(10,26,37,.75),rgba(6,14,21,.5));
  border:1px solid rgba(84,173,247,.2);
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
  display:grid;gap:18px;
}
.join__two{display:grid;gap:14px}
@media (min-width:560px){.join__two{grid-template-columns:1fr 1fr}}

.field{display:grid;gap:7px}
.field label{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);
}
.field label span{color:var(--cyan);opacity:.7;text-transform:none;letter-spacing:0;margin-left:6px}
.field input,.field select,.field textarea{
  font-family:'Bai Jamjuree',sans-serif;font-size:15px;font-weight:300;width:100%;
  color:var(--txt);background:rgba(0,0,0,.4);
  border:1px solid rgba(168,179,189,.22);border-radius:0;padding:12px 14px;
  transition:border-color .2s,background .2s;
}
.field textarea{resize:vertical;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cyan);background:rgba(84,173,247,.07);
}
.field [aria-invalid="true"]{border-color:var(--crit);background:rgba(255,90,60,.07)}
.field select option{background:#08151f;color:var(--txt)}
.field__hint{margin:0;font-size:.82rem;color:var(--steel);opacity:.7}

/* Piège à robots : retiré du flux et de l'affichage, mais toujours soumis. */
.join__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.join__err{
  margin:0;min-height:1.3em;color:#ff8d76;font-size:.9rem;line-height:1.6;
}

/* ─── Colonne d'appui ─── */
.join__aside{display:grid;gap:16px}
.join__card{
  padding:26px 24px;
  background:linear-gradient(to top,rgba(10,26,37,.6),rgba(6,14,21,.4));
  border:1px solid rgba(84,173,247,.16);
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
}
.join__card h2{
  font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:1.1rem;
  margin:0 0 14px;letter-spacing:-.01em;
}
.join__card p{color:var(--steel);font-size:.93rem;line-height:1.7;margin:0 0 16px}
.join__card--alt{border-color:rgba(255,176,32,.22)}
.join__card--alt h2{color:var(--amber)}

.join__steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:s}
.join__steps li{
  display:grid;gap:3px;padding-left:38px;position:relative;counter-increment:s;
}
.join__steps li::before{
  content:counter(s);position:absolute;left:0;top:0;
  width:26px;height:26px;display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-size:12px;
  color:#04121c;background:var(--cyan);font-weight:700;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.join__steps b{font-weight:600;font-size:.96rem}
.join__steps span{color:var(--steel);font-size:.87rem;line-height:1.6}

/* ─── Confirmation ─── */
.join__done[hidden]{display:none}
.join__doneIn{
  text-align:center;padding:clamp(40px,7vw,70px) clamp(24px,5vw,50px);
  background:
    radial-gradient(90% 120% at 50% 0%,rgba(74,222,128,.12),transparent 65%),
    linear-gradient(to top,rgba(10,26,37,.8),rgba(6,14,21,.6));
  border:1px solid rgba(74,222,128,.3);
  clip-path:polygon(30px 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%,0 30px);
}
.join__doneIn .kicker{color:#4ade80}
.join__doneIn .lead{margin:0 auto 28px}
.join__doneActions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.field__hint a{color:var(--cyan);text-decoration:underline}
.field__hint code{font-family:'JetBrains Mono',monospace;font-size:.9em;color:var(--cyan)}

/* Fond : microTech vue d'orbite, en fondu derrière l'en-tête. */
.join::before{
  content:"";position:absolute;z-index:-1;left:50%;top:0;width:100vw;height:620px;transform:translateX(-50%);
  background:url(/assets/bg_microtech.jpg) center/cover no-repeat;opacity:.3;
  -webkit-mask-image:linear-gradient(to bottom,#000 25%,transparent);mask-image:linear-gradient(to bottom,#000 25%,transparent);
  pointer-events:none;
}