/* ============================================================
   rs1/job-offers — offres d'emploi en cours (v2)
   Cartes, chips, boutons : .mp-carte, .mp-chip, .mp-btn
   (assets/css/mp-tokens.css)
   ============================================================ */

.mp-jo{
  padding-block: var(--mp-section);
  background: var(--mp-bleu-brume);
}

.mp-jo__entete{
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.mp-jo__titre{
  margin: 0;
  font-size: var(--mp-t-h2);
  font-weight: 800;
  color: var(--mp-encre);
}
.mp-jo__intro{
  margin: 1.25rem auto 0;
  max-width: 56ch;
  font-size: var(--mp-t-lg);
  color: var(--mp-texte);
}

.mp-jo__compte{
  max-width: 62rem;
  margin: 0 auto 1rem;
  font-size: var(--mp-t-sm);
  font-weight: 600;
  color: var(--mp-gris);
}

/* ── Liste ─────────────────────────────────────────────── */
.mp-jo__liste{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.mp-jo__item{ display: flex }

/* La carte entière mène à l'offre : le lien de l'intitulé est étendu
   à toute la carte ; le bouton « Postuler » passe au-dessus. */
.mp-jo__carte{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.35rem;
  width: 100%;
}
.mp-jo__corps{ min-width: 0 }

.mp-jo__poste{
  margin: 0;
  font-size: var(--mp-t-h3);
  font-weight: 800;
  line-height: 1.3;
  color: var(--mp-encre);
}
.mp-jo__lien-carte{
  color: inherit;
  text-decoration: none;
}
.mp-jo__lien-carte::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.mp-jo__carte:hover .mp-jo__lien-carte{ color: var(--mp-bleu) }
.mp-jo__lien-carte:focus-visible{ outline: none }
.mp-jo__carte:has(.mp-jo__lien-carte:focus-visible){
  outline: 3px solid var(--mp-bleu);
  outline-offset: 3px;
}

.mp-jo__infos{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.25rem;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--mp-t-sm);
  font-weight: 600;
  color: var(--mp-texte);
}
.mp-jo__infos li{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.mp-jo__infos svg{ flex: none; color: var(--mp-bleu) }

.mp-jo__postuler{
  position: relative;
  z-index: 1;
  flex: none;
  width: 100%;
}

/* ── État vide ─────────────────────────────────────────── */
.mp-jo__vide{
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
.mp-jo__vide-titre{
  margin: 0;
  font-size: var(--mp-t-h3);
  font-weight: 800;
  color: var(--mp-encre);
}
.mp-jo__vide-texte{
  margin: .85rem auto 1.5rem;
  max-width: 50ch;
  font-size: var(--mp-t-base);
  line-height: var(--mp-lh-texte);
  color: var(--mp-texte);
}

@media (min-width: 601px){
  .mp-jo__postuler{ width: auto }
}
@media (min-width: 961px){
  .mp-jo__carte{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}