/* ═══════════════════════════════════════════════════════════════════
   /recrutement/ — candidature à l'équipe CISAlertes.

   Prolonge /style.css (mêmes variables, même grille, mêmes boutons) :
   ce fichier n'ajoute que ce que la vitrine ne contenait pas encore —
   les composants de formulaire, le stepper et le tableau admin.
   ═══════════════════════════════════════════════════════════════════ */

/* Les composants de cette page posent des `display:` explicites (.btn en
   inline-flex, les étapes en grid…) qui l'emportent sur la règle par défaut
   du navigateur pour [hidden]. Sans ce rappel, tout le formulaire s'affiche
   d'un bloc : les 5 étapes, les boutons « Retour » et « Envoyer », le panneau
   admin. C'est la première règle du fichier, volontairement. */
[hidden]{display:none !important}

/* ── Hero ────────────────────────────────────────────────────────── */
.rec-hero{
  padding-top:clamp(2.5rem,5vw,4.5rem);
  background:
    radial-gradient(900px 420px at 12% -10%,rgba(225,29,46,.16),transparent 65%),
    radial-gradient(700px 380px at 88% 0%,rgba(255,138,61,.10),transparent 60%);
}
.rec-hero-lead{max-width:62ch;margin-bottom:1.8rem}
.rec-hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.rec-hero-facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;margin-top:2.6rem;
  background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
}
.rec-hero-facts li{background:var(--surface);padding:1rem 1.1rem;display:grid;gap:.15rem}
.rec-hero-facts b{
  font-family:var(--font-head);font-size:1.35rem;letter-spacing:.5px;
  text-transform:uppercase;color:var(--flame);
}
.rec-hero-facts span{color:var(--fg-mute);font-size:.85rem}

/* ── Fiches de poste ─────────────────────────────────────────────── */
.rec-postes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.rec-poste{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.6rem 1.7rem;
  box-shadow:var(--shadow-sm);
}
.rec-poste header{margin-bottom:1.2rem}
.rec-poste h3{font-family:var(--font-head);font-size:1.6rem;text-transform:uppercase;letter-spacing:.5px;margin:.5rem 0 .35rem}
.rec-poste header p{color:var(--fg-soft);margin:0}
.rec-poste h4{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute);margin:1.4rem 0 .6rem;
}
.rec-poste-tag{
  display:inline-block;padding:.25rem .7rem;border-radius:999px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
}
.tag-admin{background:rgba(225,29,46,.16);color:#ff6473;border:1px solid rgba(225,29,46,.35)}
.tag-mod{background:rgba(56,189,248,.14);color:var(--c-suap);border:1px solid rgba(56,189,248,.32)}

.rec-list{display:grid;gap:.5rem}
.rec-list li{
  position:relative;padding-left:1.35rem;color:var(--fg-soft);font-size:.95rem;line-height:1.5;
}
.rec-list li::before{
  content:"";position:absolute;left:.35rem;top:.6rem;
  width:5px;height:5px;border-radius:50%;background:var(--red);
}
.rec-list-check li::before{
  content:"✓";left:0;top:0;width:auto;height:auto;
  background:none;color:var(--green);font-size:.85rem;font-weight:700;
}

/* Fiches de poste de longueur très différente (le modérateur porte le
   rattachement, les permissions et ce qu'il ne fait pas) : chaque carte prend
   sa hauteur propre plutôt que d'être étirée sur celle de sa voisine. */
.rec-postes{align-items:start}

.rec-list-cross li::before{
  content:"✕";left:0;top:0;width:auto;height:auto;
  background:none;color:#ff6473;font-size:.8rem;font-weight:700;
}

/* Permissions Discord confiées au modérateur. */
.rec-perms-lead{color:var(--fg-soft);font-size:.95rem;margin:0 0 .6rem}
.rec-perms{display:flex;flex-wrap:wrap;gap:.45rem}
.rec-perms li{
  padding:.3rem .75rem;border-radius:999px;
  background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.3);
  color:var(--c-suap);font-size:.82rem;
}

/* ── Échelle des sanctions ───────────────────────────────────────── */
.rec-echelle{display:grid;gap:.7rem;margin-bottom:2rem}
.rec-echelle li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:1.1rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:var(--r-md);
  padding:1rem 1.2rem;
}
/* Le liseré passe du jaune au rouge à mesure qu'on monte l'échelle : la
   gravité se lit avant même d'avoir lu le texte. */
.rec-echelle li:nth-child(2){border-left-color:#f39c2b}
.rec-echelle li:nth-child(3){border-left-color:var(--flame)}
.rec-echelle li:nth-child(4){border-left-color:#ff6b45}
.rec-echelle li:nth-child(5){border-left-color:#f0263a}
.rec-echelle li:nth-child(6){border-left-color:var(--red-deep)}
.rec-niveau{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line-strong);
  font-family:var(--font-head);font-size:1.25rem;font-weight:800;color:var(--fg);
}
.rec-niveau-max{background:linear-gradient(180deg,var(--red),var(--red-deep));border-color:var(--red);color:#fff}
.rec-niveau-corps h3{margin:0 0 .2rem;font-size:1.02rem}
.rec-niveau-corps p{margin:0;color:var(--fg-soft);font-size:.92rem;line-height:1.5}
.rec-par{
  padding:.28rem .7rem;border-radius:999px;white-space:nowrap;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid transparent;
}
.par-mod{background:rgba(56,189,248,.14);color:var(--c-suap);border-color:rgba(56,189,248,.32)}
.par-admin{background:rgba(245,165,36,.14);color:var(--amber);border-color:rgba(245,165,36,.35)}
.par-staff{background:rgba(225,29,46,.16);color:#ff6473;border-color:rgba(225,29,46,.35)}

.rec-regles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;align-items:start}
.rec-regles .rec-poste h4{margin-top:0}
.rec-regles code,.section-lead code{
  font-family:var(--font-mono);font-size:.85em;
  padding:.1rem .4rem;border-radius:5px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--fg);
}

/* ── Déroulé de la procédure ─────────────────────────────────────── */
.rec-steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;
  counter-reset:step;
}
.rec-steps li{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.4rem 1.3rem;
}
.rec-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;margin-bottom:.9rem;
  background:linear-gradient(180deg,var(--red),var(--red-deep));
  color:#fff;font-family:var(--font-head);font-size:1.15rem;font-weight:800;
}
.rec-steps h3{margin-bottom:.4rem}
.rec-steps p{color:var(--fg-soft);font-size:.92rem;margin:0}

/* ── Panneaux (connexion, formulaire, admin) ─────────────────────── */
.rec-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--shadow-sm);
  max-width:860px;
}
.rec-panel + .rec-panel{margin-top:1.2rem}
.rec-panel-head{margin-bottom:1.4rem}
.rec-panel-head h3{font-family:var(--font-head);font-size:1.4rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.3rem}
.rec-muted{color:var(--fg-mute);font-size:.9rem;margin:0}

/* ── Champs de formulaire ────────────────────────────────────────── */
.rec-form{display:grid;gap:1.15rem}
.rec-form-login{max-width:420px}
/* align-content:start : sans lui, dans .rec-grid-2, le champ le plus court
   étire son input pour égaler la hauteur de la colonne voisine. */
.rec-field{display:grid;gap:.4rem;align-content:start}
.rec-field > label,.rec-label{
  font-size:.9rem;font-weight:600;color:var(--fg);
}
.rec-req{color:var(--red)}
.rec-opt{color:var(--fg-mute);font-weight:400;font-size:.82rem}
.rec-hint{color:var(--fg-mute);font-size:.82rem;margin:0}
.rec-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}

.rec-form input[type=text],
.rec-form input[type=email],
.rec-form input[type=number],
.rec-form input[type=password],
.rec-form select,
.rec-form textarea,
.rec-admin-filters select{
  width:100%;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  color:var(--fg);
  font-family:inherit;font-size:.96rem;
  padding:.72rem .9rem;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.rec-form textarea{resize:vertical;line-height:1.55;min-height:5.5rem}
.rec-form input::placeholder,.rec-form textarea::placeholder{color:#5d6675}
.rec-form input:focus,.rec-form select:focus,.rec-form textarea:focus{
  outline:none;
  border-color:rgba(225,29,46,.6);
  box-shadow:0 0 0 3px rgba(225,29,46,.16);
  background:var(--surface-2);
}
.rec-form input[aria-invalid=true],.rec-form select[aria-invalid=true],.rec-form textarea[aria-invalid=true]{
  border-color:rgba(225,29,46,.75);
}
.rec-form select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-mute) 50%),linear-gradient(135deg,var(--fg-mute) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:2.4rem;
}

.rec-password{position:relative;display:flex;align-items:center}
.rec-password input{padding-right:5.2rem}
.rec-eye{
  position:absolute;right:.5rem;
  background:none;border:0;cursor:pointer;
  color:var(--fg-mute);font-size:.8rem;font-weight:600;
  padding:.35rem .5rem;border-radius:var(--r-sm);
}
.rec-eye:hover{color:var(--fg)}

.rec-counter{margin:0;font-family:var(--font-mono);font-size:.72rem;color:var(--fg-mute);text-align:right}
.rec-counter.is-short{color:var(--amber)}
.rec-counter.is-ok{color:var(--green)}

.rec-error{
  margin:0;padding:.75rem .95rem;
  background:rgba(225,29,46,.12);
  border:1px solid rgba(225,29,46,.35);
  border-radius:var(--r-md);
  color:#ff8b96;font-size:.9rem;
}
.rec-field-error{margin:0;color:#ff8b96;font-size:.82rem}
.rec-note{color:var(--fg-mute);font-size:.82rem;line-height:1.5;margin:0}
.rec-submit{width:100%}
.btn-sm{padding:.5rem 1rem;font-size:.86rem}

/* Choix de poste (radios en cartes) */
.rec-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.rec-choice{position:relative;display:block;cursor:pointer}
.rec-choice input{position:absolute;opacity:0;width:0;height:0}
.rec-choice-body{
  display:grid;gap:.35rem;
  padding:1.1rem 1.2rem;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.rec-choice-body b{font-family:var(--font-head);font-size:1.25rem;text-transform:uppercase;letter-spacing:.5px}
.rec-choice-body small{color:var(--fg-soft);font-size:.85rem;line-height:1.45}
.rec-choice:hover .rec-choice-body{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-2px)}
.rec-choice input:checked + .rec-choice-body{
  border-color:var(--red);
  background:linear-gradient(180deg,rgba(225,29,46,.14),rgba(225,29,46,.04));
  box-shadow:0 12px 30px -18px rgba(225,29,46,.9);
}
.rec-choice input:focus-visible + .rec-choice-body{outline:2px solid var(--flame);outline-offset:3px}

/* Cases à cocher */
.rec-checks{display:flex;flex-wrap:wrap;gap:.55rem}
.rec-checks-col{flex-direction:column;flex-wrap:nowrap}
.rec-check{position:relative;display:inline-flex}
.rec-check input{position:absolute;opacity:0;width:0;height:0}
.rec-check span{
  display:inline-flex;align-items:flex-start;gap:.55rem;
  padding:.6rem .9rem;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  color:var(--fg-soft);font-size:.9rem;line-height:1.45;
  cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.rec-check span::before{
  content:"";flex:none;margin-top:.15rem;
  width:16px;height:16px;border-radius:5px;
  border:1px solid var(--line-strong);background:var(--surface);
  transition:background .15s ease,border-color .15s ease;
}
.rec-check input:checked + span{
  border-color:rgba(225,29,46,.55);color:var(--fg);
  background:rgba(225,29,46,.08);
}
.rec-check input:checked + span::before{
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--red);
}
.rec-check input:focus-visible + span{outline:2px solid var(--flame);outline-offset:2px}
.rec-checks-col .rec-check span{width:100%}

/* Mise en situation */
.rec-scenario{
  margin:0 0 .2rem;
  padding:.85rem 1rem;
  background:rgba(255,138,61,.07);
  border-left:3px solid var(--flame);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--fg-soft);font-size:.92rem;line-height:1.55;
}

/* ── Stepper ─────────────────────────────────────────────────────── */
.rec-progress{
  display:flex;gap:.4rem;flex-wrap:wrap;
  margin:0 0 1.8rem;padding-bottom:1.4rem;
  border-bottom:1px solid var(--line);
}
.rec-progress li{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .8rem .4rem .4rem;border-radius:999px;
  font-size:.85rem;color:var(--fg-mute);
  border:1px solid transparent;
}
.rec-progress li span{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line-strong);
  font-family:var(--font-mono);font-size:.78rem;
}
.rec-progress li.is-current{
  color:var(--fg);background:rgba(225,29,46,.10);border-color:rgba(225,29,46,.35);
}
.rec-progress li.is-current span{background:var(--red);border-color:var(--red);color:#fff}
.rec-progress li.is-done{color:var(--fg-soft)}
.rec-progress li.is-done span{background:rgba(46,204,113,.16);border-color:rgba(46,204,113,.4);color:var(--green)}

/* display:block et non grid : un <legend> n'est pas un élément de grille,
   il se superposait au texte d'aide de l'étape. */
.rec-step{border:0;padding:0;margin:0;min-width:0;display:block}
.rec-step > * + *{margin-top:1.15rem}
.rec-step-title{
  display:block;width:100%;float:none;
  font-family:var(--font-head);font-size:1.3rem;text-transform:uppercase;letter-spacing:.5px;
  padding:0;margin:0 0 .2rem;
}
.rec-step-title + .rec-step-help{margin-top:0}
.rec-step-help{color:var(--fg-mute);font-size:.9rem;margin:0}
.rec-actions{
  display:flex;gap:.8rem;justify-content:flex-end;flex-wrap:wrap;
  padding-top:1.3rem;border-top:1px solid var(--line);
}

/* ── Identité du candidat connecté ───────────────────────────────── */
.rec-identity{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:860px;margin-bottom:1.2rem;
  padding:.9rem 1.1rem;
  background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.rec-identity-main{display:flex;align-items:center;gap:.9rem;min-width:0}
.rec-avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;border-radius:12px;
  background:linear-gradient(180deg,var(--red),var(--red-deep));
  font-family:var(--font-head);font-size:1.3rem;font-weight:800;color:#fff;
}
.rec-identity-name{margin:0;font-weight:600}
.rec-identity-sub{margin:0;color:var(--fg-mute);font-size:.84rem}
.rec-identity-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── Blocage / suivi ─────────────────────────────────────────────── */
.rec-blocked h3{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.5px;font-size:1.3rem}
.rec-blocked > p{color:var(--fg-soft)}
.rec-tracking{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.rec-tracking h4{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute);margin-bottom:.7rem;
}
.rec-tracking ul{display:grid;gap:.6rem}
.rec-tracking li{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  padding:.7rem .9rem;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r-md);font-size:.9rem;
}
.rec-tracking .rec-track-note{flex-basis:100%;color:var(--fg-soft);font-size:.86rem;margin:0}

/* Pastilles de statut */
.rec-statut{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.2rem .65rem;border-radius:999px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
}
.st-en_attente{background:rgba(245,165,36,.14);color:var(--amber);border-color:rgba(245,165,36,.35)}
.st-en_cours{background:rgba(56,189,248,.14);color:var(--c-suap);border-color:rgba(56,189,248,.32)}
.st-acceptee{background:rgba(46,204,113,.14);color:var(--green);border-color:rgba(46,204,113,.35)}
.st-refusee{background:rgba(225,29,46,.14);color:#ff6473;border-color:rgba(225,29,46,.35)}

/* ── Récapitulatif ───────────────────────────────────────────────── */
.rec-recap{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.1rem 1.2rem;
  display:grid;gap:.55rem;
}
.rec-recap dl{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:.45rem .9rem;margin:0}
.rec-recap dt{color:var(--fg-mute);font-size:.84rem}
.rec-recap dd{margin:0;font-size:.9rem;color:var(--fg-soft);overflow-wrap:anywhere}
.rec-recap dd.is-empty{color:#ff8b96}

/* ── Confirmation ────────────────────────────────────────────────── */
.rec-done{text-align:center}
.rec-done-mark{
  width:56px;height:56px;margin:0 auto 1rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(46,204,113,.14);border:1px solid rgba(46,204,113,.4);
  color:var(--green);font-size:1.6rem;
}
.rec-done h3{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.5px;font-size:1.5rem}
.rec-done .rec-hero-actions{justify-content:center;margin-top:1.4rem}

/* ── Panneau admin ───────────────────────────────────────────────── */
.rec-admin{max-width:none}
.rec-admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.rec-admin-filters{display:flex;gap:.5rem;flex-wrap:wrap}
.rec-admin-filters select{width:auto;padding:.5rem .9rem;font-size:.88rem}
.rec-table-wrap{overflow-x:auto}
.rec-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:760px}
.rec-table th{
  text-align:left;padding:.65rem .8rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-mute);border-bottom:1px solid var(--line);
}
.rec-table td{padding:.75rem .8rem;border-bottom:1px solid var(--line);color:var(--fg-soft);vertical-align:top}
.rec-table tr:hover td{background:rgba(255,255,255,.02)}
.rec-table .rec-cell-main{color:var(--fg);font-weight:600}
.rec-detail-row td{background:var(--bg-2)}
.rec-detail{display:grid;gap:1rem;padding:.4rem 0 .8rem}
.rec-detail h5{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-mute);margin:0 0 .3rem;
}
.rec-detail p{margin:0;white-space:pre-wrap;line-height:1.6;overflow-wrap:anywhere}
.rec-detail-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;padding-top:.8rem;border-top:1px solid var(--line)}
.rec-detail-actions input{
  flex:1 1 260px;min-width:200px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);
  color:var(--fg);padding:.55rem .8rem;font-family:inherit;font-size:.88rem;
}
.rec-loading{color:var(--fg-mute);font-size:.9rem;padding:1rem 0}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width:960px){
  .rec-postes{grid-template-columns:1fr}
  .rec-regles{grid-template-columns:1fr}
  .rec-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rec-hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .rec-steps{grid-template-columns:1fr}
  /* Le « appliqué par » repasse sous le libellé plutôt que de comprimer le texte. */
  .rec-echelle li{grid-template-columns:auto minmax(0,1fr);gap:.5rem .9rem}
  .rec-echelle .rec-par{grid-column:2;justify-self:start}
  .rec-grid-2{grid-template-columns:1fr}
  .rec-choices{grid-template-columns:1fr}
  .rec-progress{gap:.3rem}
  .rec-progress li{font-size:0;padding:.3rem;gap:0;border-radius:50%}
  .rec-progress li span{font-size:.78rem}
  .rec-progress li.is-current{border-radius:999px}
  .rec-actions{justify-content:stretch}
  .rec-actions .btn{flex:1}
  .rec-identity{align-items:flex-start}
  .rec-recap dl{grid-template-columns:1fr;gap:.15rem}
  .rec-recap dt{margin-top:.5rem}
}