/* recrutement.css — mise en page propre au recrutement (non partagée avec capesL3) ; couleurs : jetons de couleurs.css. */

.recrutement {
  max-width: 40rem;
  margin: 1.5rem auto;
}
.recrutement-large { max-width: 56rem; }

.recrutement-texte {
  margin: 1rem;
  color: var(--texte);
  line-height: 1.5;
}

.recrutement form { padding: 0 1rem; }

.recrutement-secondaire {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: space-between;
  margin: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--bordure-doux);
}
.recrutement-secondaire form { padding: 0; }

/* ── progression en trois étapes ───────────────────────────────────────── */
.etapes {
  display: flex; gap: .4rem;
  margin: 1rem; padding: 0;
  list-style: none;
  counter-reset: etape;
}
.etapes li {
  flex: 1;
  padding: .35rem .6rem;
  border-bottom: 3px solid var(--bordure-doux);
  color: var(--texte-tres-doux);
  font-size: .85rem;
  counter-increment: etape;
}
.etapes li::before { content: counter(etape) ". "; }
.etapes li.faite { border-color: var(--succes); color: var(--succes-fort); }
.etapes li[aria-current="step"] { border-color: var(--champs); color: var(--champs-fort); font-weight: 600; }

/* ── récapitulatif ─────────────────────────────────────────────────────── */
.recap {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .4rem 1.2rem;
  margin: 1rem;
}
.recap dt { color: var(--texte-doux); }
.recap dd { margin: 0; }

.rgpd {
  margin: 1.2rem 1rem 1rem;
  font-size: .78rem;
  color: var(--texte-doux);
  line-height: 1.45;
}

/* ── messages ──────────────────────────────────────────────────────────── */
.alerte-succes {
  background: var(--fond-succes);
  border: 1px solid var(--bordure-succes);
  color: var(--succes-fort);
}
.alerte-avert {
  background: var(--fond-alerte);
  border: 1px solid var(--alerte);
  color: var(--alerte-texte);
}
.principal > .alerte { max-width: 40rem; margin: 1rem auto 0; }

/* ── gestion ───────────────────────────────────────────────────────────── */
.gestion-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.gestion-attente { color: var(--texte-doux); font-size: .85rem; flex: 1; }
.gestion-filtre { padding: .6rem 1rem; }
.gestion-filtre input { width: min(28rem, 100%); }
.gestion-defile { overflow-x: auto; }
.gestion-portable { white-space: nowrap; }
.gestion-precisions { max-width: 22rem; color: var(--texte-doux); }
.gestion-compteur { margin: .6rem 1rem; color: var(--texte-doux); font-size: .85rem; }

@media (max-width: 40rem) {
  .recrutement { margin: .5rem; }
  .recap { grid-template-columns: 1fr; }
  .recap dd { margin-bottom: .4rem; }
}

/* un lien habillé en bouton garde la couleur du bouton, pas celle des liens */
a.btn--primaire, a.btn--primaire:hover { color: var(--texte-inverse); }

/* le conteneur défile : les cellules n'ont pas à tronquer */
#table-repondants { table-layout: auto; width: 100%; }
#table-repondants td { white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; }
#table-repondants td.gestion-precisions { white-space: normal; min-width: 14rem; }

/* Consignes posées directement dans la carte : on les décolle des bords. */
.recrutement > .consignes { margin: 1rem; }