/* ============================================================================
   Recrutement — offres et candidatures, côté exploitant.

   Deux listes qui se lisent au balayage : le statut est porté par une barre de
   couleur avant de l'être par un mot. Celui qui ouvre la page doit voir d'un
   coup d'œil ce qui attend une décision.
   ============================================================================ */

.offres { display: flex; flex-direction: column; gap: .75rem; }

.offre {
  --k: var(--color-text-muted, #64748b);
  border: 1px solid var(--color-border, #e2e8f0);
  border-left: 3px solid var(--k);
  border-radius: 0 12px 12px 0;
  background: var(--color-surface, #fff);
  padding: 1rem 1.1rem;
}
.offre.is-publiee   { --k: #16a34a; }
.offre.is-brouillon { --k: #94a3b8; }
.offre.is-pourvue   { --k: var(--lf-indigo, #2e2482); }
.offre.is-fermee    { --k: #cbd5e1; }

.offre__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.offre__titre { margin: 0 0 .3rem; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.offre__titre a { color: var(--color-text, #0f172a); text-decoration: none; }
.offre__titre a:hover { color: var(--lf-magenta, #a5195b); }

.offre__meta {
  display: flex; flex-wrap: wrap; gap: .2rem .75rem;
  font-size: .8rem; color: var(--color-text-muted, #64748b);
}
.offre__contrat { font-weight: 600; color: var(--lf-indigo, #2e2482); }
.offre__salaire { font-weight: 600; color: var(--color-text, #0f172a); }

.offre__statut {
  flex: 0 0 auto;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .22rem .55rem; border-radius: 999px; white-space: nowrap;
  color: var(--k); background: color-mix(in srgb, var(--k) 13%, transparent);
}

.offre__criteres {
  list-style: none; display: flex; flex-wrap: wrap; gap: .35rem;
  margin: .7rem 0 0; padding: 0;
}
.offre__criteres li {
  font-size: .74rem; padding: .18rem .5rem; border-radius: 6px;
  background: var(--color-surface-alt, #f8fafc); color: var(--color-text, #0f172a);
}

.offre__pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid var(--color-border-subtle, #f1f5f9);
}
.offre__chiffres { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.offre__chiffre {
  display: flex; align-items: baseline; gap: .3rem;
  font-size: .78rem; color: var(--color-text-muted, #64748b); text-decoration: none;
}
.offre__chiffre strong { font-size: 1rem; font-weight: 700; color: var(--color-text, #0f172a); }
.offre__chiffre.is-neuf strong { color: #d97706; }
.offre__chiffre.is-ok strong { color: #16a34a; }
a.offre__chiffre:hover strong { color: var(--lf-magenta, #a5195b); }

.offre__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.offre__form { margin: 0; }
.offre__form select {
  font-size: .78rem; padding: .28rem .5rem; border-radius: 6px;
  border: 1px solid var(--color-border, #e2e8f0); background: var(--color-surface, #fff);
}
.offre__alerte { font-size: .74rem; font-weight: 600; color: var(--color-danger, #dc2626); }

/* ------------------------------------------------------------ Candidatures */

.cand { display: flex; flex-direction: column; gap: .5rem; }
.cand__i { --k: #64748b; }
.cand__i.is-neuf      { --k: #d97706; }
.cand__i.is-presel    { --k: #0891b2; }
.cand__i.is-entretien { --k: var(--lf-indigo, #2e2482); }
.cand__i.is-retenu    { --k: #16a34a; }
.cand__i.is-refuse    { --k: #cbd5e1; }

.cand__lien {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .85rem 1rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 12px;
  background: var(--color-surface, #fff);
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.cand__lien:hover { border-color: var(--k); box-shadow: 0 2px 8px rgb(23 21 41 / .08); }
.cand__i.is-refuse .cand__lien { opacity: .6; }

.cand__mark { flex: 0 0 3px; align-self: stretch; border-radius: 2px; background: var(--k); }
.cand__corps { flex: 1; min-width: 0; }
.cand__haut { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.cand__nom { margin: 0; font-size: .95rem; font-weight: 700; color: var(--color-text, #0f172a); }
.cand__statut {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--k);
}
.cand__offre { margin: .1rem 0 .35rem; font-size: .8rem; color: var(--color-text-muted, #64748b); }

.cand__faits { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.cand__faits li {
  font-size: .72rem; padding: .15rem .45rem; border-radius: 5px;
  background: var(--color-surface-alt, #f8fafc); color: var(--color-text, #0f172a);
}
.cand__docs {
  background: color-mix(in srgb, var(--lf-magenta, #a5195b) 10%, transparent) !important;
  color: var(--lf-magenta, #a5195b) !important; font-weight: 600;
}

.cand__droite { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: .15rem; }
.cand__tel { font-size: .82rem; font-weight: 600; color: var(--color-text, #0f172a); white-space: nowrap; }
.cand__date { font-size: .72rem; color: var(--color-text-muted, #64748b); white-space: nowrap; }

/* ------------------------------------------------------------------ Fiche */

.fiche { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem; align-items: start; }
.fiche__col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.qrep { margin: 0; display: flex; flex-direction: column; gap: .85rem; }
.qrep__i { display: flex; flex-direction: column; gap: .2rem; }
.qrep__i dt { font-size: .78rem; font-weight: 700; color: var(--color-text-muted, #64748b); }
.qrep__i dd {
  margin: 0; padding: .5rem .7rem; border-radius: 8px;
  background: var(--color-surface-alt, #f8fafc);
  font-size: .9rem; line-height: 1.5; color: var(--color-text, #0f172a);
}
.qrep__msg {
  margin: 0; padding: .8rem; border-radius: 8px;
  background: var(--color-surface-alt, #f8fafc);
  font-size: .92rem; line-height: 1.6;
}

/* Décision : des options franches plutôt qu'une liste déroulante. Le geste
   compte — on décide du sort de quelqu'un, pas d'une valeur dans un menu. */
.dec { display: flex; flex-direction: column; gap: .4rem; }
.dec__o {
  --k: #64748b;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .7rem; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--color-border, #e2e8f0);
  transition: border-color .15s, background .15s;
}
.dec__o:hover { background: var(--color-surface-alt, #f8fafc); }
.dec__o input { accent-color: var(--k); }
.dec__o span { display: flex; flex-direction: column; }
.dec__o strong { font-size: .88rem; font-weight: 600; color: var(--color-text, #0f172a); }
.dec__o small { font-size: .72rem; color: var(--color-text-muted, #64748b); }
.dec__o:has(input:checked) { border-color: var(--k); background: color-mix(in srgb, var(--k) 8%, transparent); }
.dec__o:has(input:checked) strong { color: var(--k); }

.dec__o--nouvelle     { --k: #d97706; }
.dec__o--preselection { --k: #0891b2; }
.dec__o--entretien    { --k: var(--lf-indigo, #2e2482); }
.dec__o--retenue      { --k: #16a34a; }
.dec__o--refusee      { --k: #dc2626; }

.docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.docs__i {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .65rem; border-radius: 9px;
  background: var(--color-surface-alt, #f8fafc);
}
.docs__ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--lf-indigo, #2e2482); color: #fff;
  font-size: .6rem; font-weight: 700; letter-spacing: .03em;
}
.docs__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.docs__t strong { font-size: .84rem; font-weight: 600; }
.docs__t small {
  font-size: .7rem; color: var(--color-text-muted, #64748b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------ Formulaires */

.frm { display: flex; flex-direction: column; gap: 1rem; }
.frm__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; }
.frm__f { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.frm__f--full { grid-column: 1 / -1; }
.frm__duo { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.frm__f > span, .frm__f > legend {
  font-size: .78rem; font-weight: 600; color: var(--color-text-muted, #64748b);
}
.frm__f em { color: var(--color-danger, #dc2626); font-style: normal; }
.frm__f small { font-weight: 400; opacity: .7; }

.frm input[type="text"], .frm input[type="tel"], .frm input[type="email"],
.frm input[type="number"], .frm input[type="date"], .frm select, .frm textarea {
  width: 100%; padding: .55rem .65rem; font-size: .92rem; font-family: inherit;
  border: 1px solid var(--color-border, #e2e8f0); border-radius: 8px;
  background: var(--color-surface, #fff); color: var(--color-text, #0f172a);
}
.frm textarea { resize: vertical; line-height: 1.5; }
.frm :is(input, select, textarea):focus {
  outline: 0; border-color: var(--lf-magenta, #a5195b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lf-magenta, #a5195b) 14%, transparent);
}

.frm__permis { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.frm__permis legend { margin-bottom: .35rem; }
.frm__chip { flex: 0 0 auto; cursor: pointer; position: relative; }
.frm__chip input { position: absolute; opacity: 0; pointer-events: none; }
.frm__chip span {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: .4rem .7rem; border-radius: 8px;
  border: 1.5px solid var(--color-border, #e2e8f0);
  background: var(--color-surface, #fff);
  transition: border-color .15s, background .15s;
}
.frm__chip strong { font-size: .88rem; font-weight: 700; }
.frm__chip small { font-size: .68rem; color: var(--color-text-muted, #64748b); }
.frm__chip input:checked + span {
  border-color: var(--lf-magenta, #a5195b);
  background: color-mix(in srgb, var(--lf-magenta, #a5195b) 8%, transparent);
}
.frm__chip input:focus-visible + span { outline: 2px solid var(--lf-magenta, #a5195b); outline-offset: 2px; }

.frm__checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; }
.frm__check { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.frm__check input { margin-top: .2rem; accent-color: var(--lf-magenta, #a5195b); }
.frm__check span { display: flex; flex-direction: column; font-size: .88rem; }
.frm__check small { font-size: .72rem; color: var(--color-text-muted, #64748b); }

.frm__radios { display: flex; gap: 1rem; }
.frm__radios label { display: flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .9rem; }
.frm__radios input { accent-color: var(--lf-magenta, #a5195b); }

.frm__note { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--color-text-muted, #64748b); }
.frm__note--centre { text-align: center; }
.frm__actions { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }

.frm__questions, .frm__fichiers {
  padding: 1rem; border-radius: 10px;
  background: var(--color-surface-alt, #f8fafc);
  border: 1px solid var(--color-border-subtle, #f1f5f9);
  display: flex; flex-direction: column; gap: .8rem;
}
.frm__questions h3, .frm__fichiers h3 {
  margin: 0; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted, #64748b);
}
.frm__fichier { display: flex; flex-direction: column; gap: .3rem; }
.frm__fichier > span { font-size: .82rem; font-weight: 600; }
.frm__fichier input[type="file"] { font-size: .82rem; max-width: 100%; }

/* -------------------------------------------- Constructeur de questions */

.qst { display: flex; flex-direction: column; gap: .5rem; }
.qst__l {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto auto;
  gap: .45rem; align-items: center;
}
.qst__n { font-size: .78rem; font-weight: 700; color: var(--color-text-muted, #64748b); text-align: center; }
.qst__l input[type="text"], .qst__l select { padding: .45rem .55rem; font-size: .85rem; }
.qst__o[hidden] { display: none; }
.qst__ob { display: flex; align-items: center; gap: .3rem; font-size: .72rem; white-space: nowrap; cursor: pointer; }
.qst__ob input { accent-color: var(--lf-magenta, #a5195b); }
.qst__x {
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--color-border, #e2e8f0); background: var(--color-surface, #fff);
  color: var(--color-text-muted, #64748b); font-size: 1rem; line-height: 1;
}
.qst__x:hover { border-color: var(--color-danger, #dc2626); color: var(--color-danger, #dc2626); }

@media (max-width: 900px) {
  .fiche { grid-template-columns: 1fr; }
  .qst__l { grid-template-columns: 1.4rem 1fr auto; }
  .qst__l .qst__t, .qst__l .qst__o, .qst__ob { grid-column: 2 / -1; }
}

@media (max-width: 640px) {
  .frm__duo { grid-template-columns: 1fr; }
  .offre__head { flex-direction: column; gap: .5rem; }
  .cand__lien { flex-wrap: wrap; }
  .cand__droite { text-align: left; flex-direction: row; gap: .6rem; width: 100%; }
}

/* ============================================================================
   Mode de rémunération et véhicules confiés (offres VTC / location-gérance).
   ============================================================================ */

/* Deux modèles économiques opposés : le choix mérite deux blocs francs, pas
   une liste déroulante à deux entrées qu'on survole sans lire. */
.mode { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mode__o {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .8rem .9rem; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color .15s, background .15s;
}
.mode__o:hover { background: var(--color-surface-alt); }
.mode__o input { margin-top: .2rem; accent-color: var(--color-primary); }
.mode__o span { display: flex; flex-direction: column; gap: .15rem; }
.mode__o strong { font-size: .9rem; font-weight: 700; color: var(--color-text); }
.mode__o small { font-size: .76rem; line-height: 1.4; color: var(--color-text-muted); }
.mode__o:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.mode__o:has(input:checked) strong { color: var(--color-primary); }

/* Sélecteur de véhicules : on montre la photo, parce que c'est comme ça que
   l'exploitant reconnaît sa voiture — pas par sa plaque. */
.vsel {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem;
}
.vsel__i { cursor: pointer; position: relative; }
.vsel__i input { position: absolute; opacity: 0; pointer-events: none; }
.vsel__carte {
  display: flex; flex-direction: column; height: 100%;
  border: 1.5px solid var(--color-border); border-radius: 10px;
  overflow: hidden; background: var(--color-surface);
  transition: border-color .15s, box-shadow .15s;
}
.vsel__i input:checked + .vsel__carte {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.vsel__i input:focus-visible + .vsel__carte { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.vsel__img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  background: var(--color-surface-alt); display: block;
}
.vsel__txt { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .6rem; }
.vsel__txt strong { font-size: .82rem; font-weight: 700; }
.vsel__txt small { font-size: .72rem; color: var(--color-text-muted); }
.vsel__meta { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .mode { grid-template-columns: 1fr; }
  .vsel { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* Marqueur « véhicule confié » dans la liste des offres : le modèle économique
   se lit avant le titre, parce qu'il change tout le reste. */
.offre__vtc {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .12rem .45rem; border-radius: 5px;
  background: var(--color-secondary); color: #fff;
}