/* ==================================================================
   Alta FA — Page Recrutement
   ================================================================== */

.rc { max-width: 92rem; }

/* ---------------- Connexion requise ---------------- */

.rc-gate {
  max-width: 56rem;
  margin: 0 auto 4rem;
  padding: 4rem 3rem;
  border: 1px solid hsla(0, 0%, 100%, .1);
  border-radius: 1.4rem;
  background: rgba(4, 10, 28, .66);
  backdrop-filter: blur(12px);
  text-align: center;
}
.rc-gate-icon { width: 4.8rem; margin-bottom: 1.8rem; opacity: .9; }
.rc-gate h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: .8rem; }
.rc-gate p { color: var(--white-50); font-size: 1.45rem; line-height: 1.8; }

.rc-login {
  margin-top: 2.4rem;
  padding: 1.4rem 3rem;
  border: none;
  border-radius: .6rem;
  background: #5865f2;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  transition: filter .25s, transform .2s;
}
.rc-login:hover { filter: brightness(1.12); transform: translateY(-2px); }

.rc-gate-note {
  margin-top: 1.6rem;
  color: hsla(0, 0%, 100%, .38);
  font-size: 1.2rem;
  letter-spacing: .04em;
}

/* ---------------- Carte du formulaire ---------------- */

.rc-card {
  padding: 3rem 3.4rem 2.6rem;
  border: 1px solid hsla(0, 0%, 100%, .1);
  border-radius: 1.4rem;
  background: rgba(4, 10, 28, .7);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}

/* Progression */

.rc-progress {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}
.rc-dot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin: 0;
  color: var(--white-50);
  font-size: 1.15rem;
  text-align: center;
}
/* width/height seuls ne suffisent pas : sans flex-shrink: 0 le rond
   s'aplatit quand le libellé de l'étape est long, et sans line-height
   fixe le chiffre flotte au-dessus du centre. */
.rc-dot-num {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid hsla(0, 0%, 100%, .16);
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background .3s, border-color .3s, color .3s;
}
.rc-dot.current .rc-dot-num { background: var(--blue); border-color: var(--blue); color: #fff; }
.rc-dot.current { color: #fff; }
.rc-dot.done .rc-dot-num { background: #2ecc80; border-color: #2ecc80; color: #04121c; }

.rc-bar {
  height: 3px;
  margin-bottom: 3rem;
  border-radius: 3px;
  background: hsla(0, 0%, 100%, .1);
  overflow: hidden;
}
.rc-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--blue);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* Étape */

.rc-step-title { font-size: 2.2rem; font-weight: 800; }
.rc-step-intro {
  margin: .4rem 0 2.8rem;
  color: var(--white-50);
  font-size: 1.4rem;
  line-height: 1.7;
}

/* Champs */

.rc-field { margin-bottom: 2.6rem; }

.rc-label {
  display: block;
  margin-bottom: .8rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
}
.rc-required { color: var(--blue-soft); }

.rc-hint {
  margin-bottom: 1rem;
  color: hsla(0, 0%, 100%, .42);
  font-size: 1.25rem;
  line-height: 1.6;
}

.rc-field input[type="text"],
.rc-field input[type="number"],
.rc-field textarea {
  width: 100%;
  padding: 1.2rem 1.4rem;
  border: 1px solid hsla(0, 0%, 100%, .14);
  border-radius: .6rem;
  background: rgba(2, 6, 20, .55);
  color: #fff;
  font-family: inherit;
  font-size: 1.4rem;
  line-height: 1.7;
  transition: border-color .2s, box-shadow .2s;
}
.rc-field textarea { resize: vertical; min-height: 11rem; }

.rc-field input:focus, .rc-field textarea:focus {
  outline: none;
  border-color: var(--blue-soft);
  box-shadow: 0 0 0 4px rgba(26, 108, 240, .16);
}

.rc-count {
  margin-top: .5rem;
  color: hsla(0, 0%, 100%, .3);
  font-size: 1.15rem;
  text-align: right;
}
.rc-count.short { color: #ffb4b4; }

/* Choix */

.rc-choices { display: flex; gap: 1rem; }
.rc-choices-wrap { flex-wrap: wrap; }

.rc-choice {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.6rem;
  border: 1px solid hsla(0, 0%, 100%, .14);
  border-radius: .6rem;
  background: rgba(2, 6, 20, .5);
  cursor: pointer;
  font-size: 1.35rem;
  transition: background .2s, border-color .2s;
}
.rc-choice:hover { border-color: hsla(0, 0%, 100%, .3); }
.rc-choice input { accent-color: var(--blue); width: 1.6rem; height: 1.6rem; }
.rc-choice:has(input:checked) {
  background: color-mix(in srgb, var(--blue) 20%, transparent);
  border-color: var(--blue);
}

/* Échelle 1-10 */

.rc-scale { display: flex; gap: .5rem; flex-wrap: wrap; }
.rc-scale-item { flex: 1; min-width: 4rem; cursor: pointer; }
.rc-scale-item input { position: absolute; opacity: 0; pointer-events: none; }
.rc-scale-item span {
  display: block;
  padding: 1.1rem 0;
  border: 1px solid hsla(0, 0%, 100%, .14);
  border-radius: .5rem;
  background: rgba(2, 6, 20, .5);
  font-size: 1.35rem;
  font-weight: 600;
  text-align: center;
  transition: background .2s, border-color .2s, transform .2s;
}
.rc-scale-item:hover span { border-color: hsla(0, 0%, 100%, .32); }
.rc-scale-item input:checked + span {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}

/* Erreurs */

.rc-error {
  margin-top: .7rem;
  color: #ffb4b4;
  font-size: 1.25rem;
  line-height: 1.5;
}
.rc-field.invalid input,
.rc-field.invalid textarea { border-color: rgba(230, 90, 90, .65); }
.rc-field.invalid .rc-choices .rc-choice,
.rc-field.invalid .rc-scale-item span { border-color: rgba(230, 90, 90, .4); }

.rc-form-error {
  margin-bottom: 1.6rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(230, 90, 90, .4);
  border-radius: .6rem;
  background: rgba(230, 90, 90, .12);
  color: #ffb4b4;
  font-size: 1.3rem;
}

/* Actions */

.rc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding-top: 2.2rem;
  border-top: 1px solid hsla(0, 0%, 100%, .08);
}

.rc-btn {
  padding: 1.3rem 2.6rem;
  border: none;
  border-radius: .6rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.45rem;
  font-weight: 700;
  transition: background .25s, box-shadow .25s, transform .2s;
}
.rc-btn-main { background: var(--blue); color: #fff; }
.rc-btn-main:hover:not(:disabled) {
  background: var(--blue-soft);
  box-shadow: 0 16px 34px -14px rgba(26, 108, 240, .9);
}
.rc-btn-main:disabled { opacity: .55; cursor: wait; }
.rc-btn-ghost {
  background: transparent;
  border: 1px solid hsla(0, 0%, 100%, .16);
  color: hsla(0, 0%, 100%, .75);
}
.rc-btn-ghost:hover { background: hsla(0, 0%, 100%, .07); color: #fff; }

.rc-step-info { color: var(--white-50); font-size: 1.25rem; }

.rc-identity {
  margin-top: 1.6rem;
  color: hsla(0, 0%, 100%, .35);
  font-size: 1.2rem;
  text-align: center;
}

/* ---------------- Confirmation ---------------- */

.rc-done {
  max-width: 56rem;
  margin: 0 auto 4rem;
  padding: 4rem 3rem;
  border: 1px solid rgba(46, 204, 128, .35);
  border-radius: 1.4rem;
  background: rgba(46, 204, 128, .07);
  text-align: center;
}
.rc-done-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin-bottom: 1.6rem;
  border-radius: 50%;
  background: #2ecc80;
  color: #04121c;
  font-size: 2.4rem;
  font-weight: 800;
}
.rc-done h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: .8rem; }
.rc-done-text { color: hsla(0, 0%, 100%, .72); font-size: 1.45rem; line-height: 1.8; }

/* ---------------- Accès staff ---------------- */

.rc-staff {
  margin: 5rem 0 6rem;
  padding-top: 3rem;
  border-top: 1px solid hsla(0, 0%, 100%, .07);
  text-align: center;
}

.rc-staff-btn {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: 1.2rem 2.4rem;
  border: 1px solid hsla(0, 0%, 100%, .14);
  border-radius: 999px;
  background: rgba(4, 10, 28, .6);
  color: hsla(0, 0%, 100%, .7);
  font-size: 1.35rem;
  font-weight: 600;
  transition: background .25s, border-color .25s, color .25s;
}
.rc-staff-btn::after { display: none; }
.rc-staff-btn:hover {
  background: hsla(0, 0%, 100%, .07);
  border-color: hsla(0, 0%, 100%, .3);
  color: #fff;
}
.rc-staff-lock { font-size: 1.2rem; }

.rc-staff-note {
  margin-top: 1rem;
  color: hsla(0, 0%, 100%, .3);
  font-size: 1.2rem;
}

/* ---------------- Responsive ---------------- */

@media screen and (max-width: 760px) {
  .rc-card { padding: 2.2rem 1.8rem 2rem; }
  .rc-dot-label { display: none; }
  .rc-progress { gap: .6rem; }
  .rc-actions { flex-wrap: wrap; }
  .rc-actions .rc-btn { flex: 1; }
  .rc-step-info { order: 3; width: 100%; text-align: center; }
  .rc-choices { flex-direction: column; }
  .rc-choices-wrap { flex-direction: row; }
}

/* Rappel du caractère obligatoire des réponses */

.rc-mandatory {
  margin-bottom: 2.4rem;
  padding: 1rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
  border-left-width: 3px;
  border-radius: .6rem;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: hsla(0, 0%, 100%, .82);
  font-size: 1.3rem;
  line-height: 1.6;
}

.rc-gate-strong {
  margin-top: 1rem;
  color: var(--blue-soft);
  font-weight: 600;
}

/* ---------------- Session en cours ---------------- */

.rc-session {
  margin: 3rem 0 0;
  color: hsla(0, 0%, 100%, .45);
  font-size: 1.25rem;
  text-align: center;
}
.rc-session strong { color: hsla(0, 0%, 100%, .8); }

.rc-signout {
  margin-left: 1rem;
  padding: .4rem 1.1rem;
  border: 1px solid rgba(224, 90, 90, .4);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 180, 180, .9);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.2rem;
  transition: background .2s, color .2s;
}
.rc-signout:hover { background: rgba(224, 90, 90, .16); color: #fff; }

/* Le bloc de confirmation sert aussi à annoncer un délai : dans ce cas
   le vert « c'est envoyé » induirait en erreur. */
.rc-done-wait {
  border-color: rgba(240, 180, 70, .35);
  background: rgba(240, 180, 70, .07);
}
.rc-done-wait .rc-done-check {
  background: rgba(240, 180, 70, .9);
  font-size: 2.2rem;
}