/* ql-recrutement.css — modale de candidature.
   Reprend la grammaire visuelle de la modale d'inscription au tournoi :
   un candidat qui a deja vu l'une reconnait l'autre. */

.qr-overlay{position:fixed;inset:0;z-index:900;display:none;align-items:flex-start;
  justify-content:center;padding:40px 16px;overflow-y:auto;
  background:rgba(2,2,10,.86);backdrop-filter:blur(8px)}
.qr-overlay.on{display:flex}

.qr-modal{position:relative;width:100%;max-width:820px;background:var(--panel,#080a16);
  border:1px solid rgba(26,143,255,.3);padding:34px 36px 28px;max-height:88vh;overflow-y:auto}
.qr-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue,#1a8fff),var(--violet,#8b3fff))}

.qr-close{position:absolute;top:14px;right:16px;width:32px;height:32px;display:block;
  background:transparent;border:none;color:var(--silver,#8ea8c8);font-size:17px;cursor:pointer}
.qr-close:hover{color:var(--white,#deeeff)}

.qr-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:10px;
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.24em;color:var(--blue,#1a8fff)}
.qr-eyebrow i{width:26px;height:1px;background:var(--blue,#1a8fff);display:block}
.qr-eyebrow b{margin-left:auto;color:var(--dim,#b8b3e0);font-weight:400}
.qr-head h2{font-family:'Orbitron',sans-serif;font-size:clamp(20px,3vw,30px);font-weight:900;
  line-height:1.1;color:var(--white,#deeeff);margin-bottom:18px}
.qr-head h2 span{background:linear-gradient(90deg,var(--blue,#1a8fff),var(--violet,#8b3fff));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.qr-steps{display:flex;gap:26px;list-style:none;padding:0 0 20px;margin-bottom:22px;
  border-bottom:1px solid rgba(26,143,255,.18);flex-wrap:wrap}
.qr-steps li{display:flex;align-items:center;gap:8px;font-family:'Share Tech Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim,#b8b3e0);opacity:.5}
.qr-steps li.on{opacity:1;color:var(--white,#deeeff)}
.qr-steps li b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border:1px solid rgba(26,143,255,.5);font-size:10px}
.qr-steps li.on b{border-color:var(--cyan,#00e5ff);color:var(--cyan,#00e5ff)}

.qr-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ── Choix de la categorie ─────────────────────────────────────────────── */
.qr-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:20px}
.qr-cat{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 18px 16px;
  text-align:left;cursor:pointer;background:rgba(26,143,255,.04);
  border:1px solid rgba(26,143,255,.22);border-left:2px solid rgba(139,63,255,.5);
  transition:border-color .22s,background .22s,transform .18s}
.qr-cat:hover{border-color:rgba(0,229,255,.5);background:rgba(0,229,255,.06);transform:translateY(-2px)}
.qr-cat.on{border-color:var(--cyan,#00e5ff);background:rgba(0,229,255,.1)}
.qr-cat-ic{font-size:22px;line-height:1}
.qr-cat b{font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:.06em;color:var(--white,#deeeff)}
.qr-cat em{font-style:normal;font-size:13px;line-height:1.5;color:var(--dim,#b8b3e0)}

/* ── Champs ────────────────────────────────────────────────────────────── */
.qr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qr-specifique{margin-top:16px}
.qr-f{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.qr-f label{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--silver,#8ea8c8)}
.qr-f input,.qr-f select,.qr-f textarea{background:rgba(2,2,10,.6);
  border:1px solid rgba(26,143,255,.28);color:var(--white,#deeeff);padding:12px 14px;
  font-family:'Rajdhani',sans-serif;font-size:15px;width:100%}
.qr-f input:focus,.qr-f select:focus,.qr-f textarea:focus{outline:none;border-color:var(--cyan,#00e5ff)}
.qr-f textarea{resize:vertical;line-height:1.6}
.qr-f em{font-style:normal;font-family:'Share Tech Mono',monospace;font-size:10px;
  letter-spacing:.06em;color:var(--dim,#b8b3e0);opacity:.75}

.qr-check{display:flex;align-items:flex-start;gap:11px;margin:16px 0 4px;
  font-size:14.5px;line-height:1.6;color:var(--dim,#b8b3e0);cursor:pointer}
.qr-check input{margin-top:3px;accent-color:var(--violet,#8b3fff);width:16px;height:16px;flex:none}
.qr-check a{color:var(--cyan,#00e5ff)}

/* ── Recapitulatif ─────────────────────────────────────────────────────── */
.qr-recap{border:1px solid rgba(26,143,255,.22);background:rgba(26,143,255,.04);
  padding:14px 16px;margin:4px 0 6px}
.qr-recap-row{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
  border-bottom:1px solid rgba(26,143,255,.1);font-size:14px}
.qr-recap-row:last-child{border-bottom:none}
.qr-recap-row span{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--silver,#8ea8c8);flex:none}
.qr-recap-row b{color:var(--white,#deeeff);text-align:right;word-break:break-word}

/* ── Messages et actions ───────────────────────────────────────────────── */
.qr-msg{min-height:20px;margin:12px 0 0;font-size:14px;color:var(--dim,#b8b3e0)}
.qr-msg.bad{color:#ff5c7a}
.qr-actions{display:flex;gap:14px;justify-content:space-between;align-items:center;
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(26,143,255,.18);flex-wrap:wrap}
.qr-actions .qr-next,.qr-actions .qr-send{margin-left:auto}

/* ── Confirmation ──────────────────────────────────────────────────────── */
.qr-done{text-align:center;padding:26px 10px 10px}
.qr-done-ic{width:62px;height:62px;margin:0 auto 18px;display:flex;align-items:center;
  justify-content:center;font-size:30px;color:var(--cyan,#00e5ff);
  border:1px solid rgba(0,229,255,.45);background:rgba(0,229,255,.07)}
.qr-done h3{font-family:'Orbitron',sans-serif;font-size:21px;font-weight:900;
  color:var(--white,#deeeff);margin-bottom:12px}
.qr-done-txt{font-size:15px;line-height:1.7;color:var(--dim,#b8b3e0);margin-bottom:8px}
.qr-done-warn{color:#f1c40f}
.qr-done .qr-actions{justify-content:center;border-top:none;margin-top:22px}
.qr-done .qr-actions .qr-close2{margin:0}

@media(max-width:700px){
  .qr-modal{padding:26px 18px 22px}
  .qr-grid2{grid-template-columns:1fr;gap:0}
  .qr-steps{gap:14px}
  .qr-actions{flex-direction:column-reverse;align-items:stretch}
  .qr-actions .qr-next,.qr-actions .qr-send{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .qr-cat{transition:none}
}