/* MDIVINE — service recrutement.
   Feuille distincte de mdivine.css (extraction verbatim, intouchable) et de
   mdivine-promo.css. Elle porte l'identité visuelle du site d'emploi : sombre
   comme le reste du site, l'olive de la marque réservé aux actions et aux
   chiffres qui comptent, le magenta gardé pour un seul accent par écran.

   Tokens locaux plutôt que globaux : le module doit pouvoir évoluer sans
   toucher à la charte du site. */

.emploi {
  --e-ground: #0a0a0f;
  --e-surface: rgba(255, 255, 255, 0.035);
  --e-surface-strong: rgba(255, 255, 255, 0.06);
  --e-line: rgba(255, 255, 255, 0.09);
  --e-line-strong: rgba(255, 255, 255, 0.16);
  --e-ink: #f2f2f5;
  --e-ink-soft: rgba(242, 242, 245, 0.66);
  --e-ink-faint: rgba(242, 242, 245, 0.42);
  --e-accent: #b4b40d;
  --e-accent-soft: rgba(180, 180, 13, 0.14);
  --e-accent-line: rgba(180, 180, 13, 0.32);
  --e-magenta: #ff00ee;
  --e-good: #34d399;
  --e-warn: #fbbf24;
  --e-radius: 16px;
  --e-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

.emploi {
  color: var(--e-ink);
}

.emploi a {
  text-decoration: none;
}

/* ----------------------------------------------------------------
   En-tête de recherche
   ---------------------------------------------------------------- */

.emploi-hero {
  position: relative;
  padding: 3.5rem 0 2.25rem;
  overflow: hidden;
}

/* Halo olive très diffus : donne de la profondeur sans hero tape-à-l'œil. */
.emploi-hero::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  width: 620px;
  height: 380px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(180, 180, 13, 0.16), transparent 68%);
  pointer-events: none;
}

.emploi-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--e-accent);
  margin-bottom: 0.85rem;
}

.emploi-hero h1 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.emploi-hero p {
  color: var(--e-ink-soft);
  max-width: 56ch;
}

/* ----------------------------------------------------------------
   Barre de recherche
   ---------------------------------------------------------------- */

.emploi-search {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(10, 10, 15, 0.7);
  border: 1px solid var(--e-line);
  border-radius: calc(var(--e-radius) + 6px);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--e-shadow);
}

.emploi-search__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--e-radius);
  background: var(--e-surface);
  border: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.emploi-search__field:focus-within {
  border-color: var(--e-accent-line);
  background: var(--e-surface-strong);
}

.emploi-search__field i {
  color: var(--e-ink-faint);
  font-size: 1rem;
}

.emploi-search__field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--e-ink);
  font-size: 0.95rem;
}

.emploi-search__field input::placeholder {
  color: var(--e-ink-faint);
}

@media (max-width: 767px) {
  .emploi-search {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------
   Boutons
   ---------------------------------------------------------------- */

.emploi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.emploi-btn--primary {
  background: linear-gradient(135deg, #c7c71a, #8a8a12);
  color: #14140a;
  box-shadow: 0 10px 26px rgba(180, 180, 13, 0.26);
}

.emploi-btn--primary:hover {
  color: #14140a;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(180, 180, 13, 0.34);
}

.emploi-btn--ghost {
  background: var(--e-surface);
  border-color: var(--e-line-strong);
  color: var(--e-ink);
}

.emploi-btn--ghost:hover {
  color: var(--e-ink);
  background: var(--e-surface-strong);
}

.emploi-btn[disabled],
.emploi-btn--disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ----------------------------------------------------------------
   Filtres
   ---------------------------------------------------------------- */

.emploi-filters {
  position: sticky;
  top: 96px;
  padding: 1.35rem;
  background: var(--e-surface);
  border: 1px solid var(--e-line);
  border-radius: var(--e-radius);
}

.emploi-filters h2 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--e-ink-faint);
  margin-bottom: 1rem;
}

.emploi-filters__group {
  margin-bottom: 1.35rem;
}

.emploi-filters__group:last-of-type {
  margin-bottom: 1rem;
}

.emploi-filters__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--e-ink-soft);
  margin-bottom: 0.5rem;
}

.emploi-filters select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: rgba(10, 10, 15, 0.6);
  border: 1px solid var(--e-line);
  border-radius: 11px;
  color: var(--e-ink);
  font-size: 0.88rem;
  outline: none;
}

.emploi-filters select:focus {
  border-color: var(--e-accent-line);
}

.emploi-filters select option {
  background: #14141c;
  color: var(--e-ink);
}

@media (max-width: 991px) {
  .emploi-filters {
    position: static;
  }
}

/* ----------------------------------------------------------------
   Carte d'offre
   ---------------------------------------------------------------- */

.emploi-card {
  position: relative;
  display: block;
  padding: 1.4rem 1.5rem;
  margin-bottom: 0.9rem;
  background: var(--e-surface);
  border: 1px solid var(--e-line);
  border-radius: var(--e-radius);
  color: inherit;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.28s ease, background 0.28s ease;
}

/* Liseré d'accent qui se déploie au survol — signale l'élément actif sans
   déplacer le texte, donc sans faire sauter la lecture. */
.emploi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--e-accent), var(--e-magenta));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.32s cubic-bezier(0.23, 1, 0.32, 1);
}

.emploi-card:hover {
  transform: translateY(-3px);
  border-color: var(--e-line-strong);
  background: var(--e-surface-strong);
  color: inherit;
}

.emploi-card:hover::before {
  transform: scaleY(1);
}

.emploi-card__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Pastille d'initiales : une identité visuelle pour chaque entreprise, sans
   demander de logo à l'inscription. */
.emploi-logo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: #0a0a0f;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.emploi-logo--lg {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  font-size: 1.5rem;
}

.emploi-card__title {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}

.emploi-card:hover .emploi-card__title {
  color: var(--e-accent);
}

.emploi-card__company {
  font-size: 0.88rem;
  color: var(--e-ink-soft);
}

.emploi-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.emploi-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--e-line);
}

.emploi-card__salary {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--e-accent);
  font-variant-numeric: tabular-nums;
}

.emploi-card__date {
  font-size: 0.78rem;
  color: var(--e-ink-faint);
}

/* ----------------------------------------------------------------
   Puces
   ---------------------------------------------------------------- */

.emploi-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--e-line);
  color: var(--e-ink-soft);
  white-space: nowrap;
}

.emploi-chip--accent {
  background: var(--e-accent-soft);
  border-color: var(--e-accent-line);
  color: #d9d92a;
}

.emploi-chip--good {
  background: rgba(52, 211, 153, 0.13);
  border-color: rgba(52, 211, 153, 0.3);
  color: var(--e-good);
}

.emploi-chip--warn {
  background: rgba(251, 191, 36, 0.13);
  border-color: rgba(251, 191, 36, 0.3);
  color: var(--e-warn);
}

.emploi-chip--lock {
  background: rgba(255, 255, 255, 0.03);
  border-style: dashed;
  color: var(--e-ink-faint);
}

/* ----------------------------------------------------------------
   Fiche d'offre
   ---------------------------------------------------------------- */

.emploi-panel {
  padding: 1.75rem;
  background: var(--e-surface);
  border: 1px solid var(--e-line);
  border-radius: var(--e-radius);
}

.emploi-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--e-line);
  border: 1px solid var(--e-line);
  border-radius: var(--e-radius);
  overflow: hidden;
  margin: 1.5rem 0;
}

.emploi-fact {
  background: #101017;
  padding: 1rem 1.1rem;
}

.emploi-fact__label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e-ink-faint);
  margin-bottom: 0.3rem;
}

.emploi-fact__value {
  font-weight: 600;
  font-size: 0.94rem;
}

/* Corps rédactionnel de l'annonce : largeur de lecture bornée, quelle que
   soit la largeur de l'écran. */
.emploi-prose {
  max-width: 68ch;
  color: var(--e-ink-soft);
  line-height: 1.75;
}

.emploi-prose h2 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--e-ink);
  margin: 2rem 0 0.75rem;
}

.emploi-prose h2:first-child {
  margin-top: 0;
}

.emploi-prose p {
  margin-bottom: 1rem;
  white-space: pre-line;
}

.emploi-aside {
  position: sticky;
  top: 96px;
}

/* ----------------------------------------------------------------
   CVthèque
   ---------------------------------------------------------------- */

.emploi-ref {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--e-ink-faint);
}

.emploi-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

/* Bandeau « coordonnées masquées » : dit explicitement ce qui est caché et
   pourquoi, plutôt que de laisser croire à une page incomplète. */
.emploi-locked {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border-radius: var(--e-radius);
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.028),
    rgba(255, 255, 255, 0.028) 10px,
    rgba(255, 255, 255, 0.05) 10px,
    rgba(255, 255, 255, 0.05) 20px
  );
  border: 1px dashed var(--e-line-strong);
  color: var(--e-ink-soft);
  font-size: 0.88rem;
}

.emploi-locked i {
  font-size: 1.3rem;
  color: var(--e-ink-faint);
}

.emploi-unlocked {
  padding: 1.15rem 1.3rem;
  border-radius: var(--e-radius);
  background: rgba(52, 211, 153, 0.09);
  border: 1px solid rgba(52, 211, 153, 0.26);
}

.emploi-contact-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.94rem;
}

.emploi-contact-line i {
  color: var(--e-good);
  width: 18px;
}

/* Badge maison : un diplômé du centre, vérifiable publiquement. C'est
   l'avantage que seul MDIVINE peut afficher sur son propre site d'emploi. */
.emploi-badge-maison {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.36rem 0.8rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #14140a;
  background: linear-gradient(135deg, #c7c71a, #8a8a12);
}

/* ----------------------------------------------------------------
   Tarifs recruteurs
   ---------------------------------------------------------------- */

.emploi-price {
  height: 100%;
  padding: 2rem 1.75rem;
  background: var(--e-surface);
  border: 1px solid var(--e-line);
  border-radius: calc(var(--e-radius) + 4px);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s ease;
}

.emploi-price:hover {
  transform: translateY(-5px);
  border-color: var(--e-accent-line);
}

.emploi-price__amount {
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--e-accent);
}

.emploi-price__unit {
  font-size: 0.85rem;
  color: var(--e-ink-faint);
}

.emploi-price ul {
  list-style: none;
  padding: 0;
  margin: 1.35rem 0 0;
}

.emploi-price li {
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--e-ink-soft);
}

.emploi-price li i {
  color: var(--e-good);
  margin-top: 0.2rem;
}

.emploi-price--free .emploi-price__amount {
  color: var(--e-good);
}

/* ----------------------------------------------------------------
   États vides et divers
   ---------------------------------------------------------------- */

.emploi-empty {
  padding: 3.5rem 1.5rem;
  text-align: center;
  background: var(--e-surface);
  border: 1px dashed var(--e-line-strong);
  border-radius: var(--e-radius);
}

.emploi-count {
  font-size: 0.86rem;
  color: var(--e-ink-faint);
}

.emploi-count strong {
  color: var(--e-ink);
  font-variant-numeric: tabular-nums;
}

.emploi-step {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--e-line);
}

.emploi-step:last-child {
  border-bottom: none;
}

.emploi-step__num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--e-accent);
  background: var(--e-accent-soft);
  border: 1px solid var(--e-accent-line);
}

/* Pagination Bootstrap, rhabillée aux couleurs du module. */
.emploi .pagination {
  gap: 0.35rem;
}

.emploi .page-link {
  background: var(--e-surface);
  border: 1px solid var(--e-line);
  border-radius: 10px;
  color: var(--e-ink-soft);
}

.emploi .page-link:hover {
  background: var(--e-surface-strong);
  color: var(--e-ink);
}

.emploi .page-item.active .page-link {
  background: var(--e-accent-soft);
  border-color: var(--e-accent-line);
  color: #d9d92a;
}

.emploi .page-item.disabled .page-link {
  opacity: 0.4;
}

/* ----------------------------------------------------------------
   Mouvement réduit
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .emploi-card,
  .emploi-card::before,
  .emploi-btn,
  .emploi-price {
    transition: none;
  }

  .emploi-card:hover,
  .emploi-btn--primary:hover,
  .emploi-price:hover {
    transform: none;
  }
}