/* ==========================================================================
   Module Front B — Annonces : listing, filtres, annonce, vue « postuler »
   Réutilise components.css / layout.css (.archive-layout, .toolbar, .results,
   .two-col, .sticky, .panel, .dl, .chip, .badge, .meta, .share, .empty…)
   sans les redéfinir. Tokens uniquement, aucune couleur en dur.
   ========================================================================== */

/* Hero du listing ----------------------------------------------------------- */
.jobs-hero .breadcrumbs + .jobs-hero__eyebrow {
  margin-top: var(--space-5);
  margin-bottom: 0;
}

.jobs-hero__eyebrow + .page-hero__title {
  margin-top: var(--space-3);
}

.jobs-hero__title {
  max-width: 24ch;
}

.jobs-hero__desc {
  margin-top: var(--space-5);
  max-width: 62ch;
}

.jobs-listing {
  padding-block: var(--space-4) var(--section-sm);
}

/* Filtres --------------------------------------------------------------------- */
.filters-mobile__summary {
  display: none;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.filters__search {
  position: relative;
  margin-bottom: var(--space-2);
}

.filters__search > .icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
}

.filters__search .input {
  padding-left: 2.6rem;
}

.filters__search .input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.filters__group {
  border-top: 1px solid var(--line);
}

.filters__group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.filters__group > summary::-webkit-details-marker {
  display: none;
}

.filters__group > summary .icon {
  color: var(--muted-2);
  transition: transform var(--dur) var(--ease);
}

.filters__group[open] > summary .icon-chevron-down {
  transform: rotate(180deg);
}

.filters__group--locked > summary .icon {
  color: var(--accent);
}

.filters__options {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-bottom: var(--space-4);
}

.filters__option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.6rem;
  margin-inline: -0.6rem;
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.filters__option:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.filters__option input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--ink);
}

.filters__option:has(input:checked) {
  color: var(--ink);
  font-weight: 600;
}

.filters__option:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.filters__option-label {
  flex: 1;
  min-width: 0;
}

.filters__count {
  font-size: var(--fs-xs);
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

.filters__option.is-empty {
  color: var(--muted-2);
}

.filters__more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  padding: 0.35rem 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
}

.filters__more > summary::-webkit-details-marker {
  display: none;
}

.filters__more[open] > summary {
  display: none;
}

.filters__more .filters__options {
  padding-bottom: 0;
}

.filters__locked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-bottom: var(--space-4);
}

.filters__locked-term {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.filters__locked-term .icon {
  color: var(--accent);
}

.filters__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}

.filters__reset:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.filters__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.filters__actions button[hidden] + .filters__reset {
  margin-left: auto;
}

/* Résultats --------------------------------------------------------------------- */
.toolbar__sort {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.toolbar__sort-label {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.toolbar__sort .select {
  width: auto;
  min-width: 200px;
}

.jobs-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-5);
}

.jobs-chips .chip {
  padding-block: 0.45em;
}

.jobs-chips .chip .icon {
  color: var(--muted-2);
  transition: color var(--dur) var(--ease);
}

.jobs-chips .chip:hover .icon {
  color: var(--ink);
}

.jobs-chips__reset {
  margin-left: 0.25rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}

.jobs-chips__reset:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.jobs-empty__icon {
  margin: 0 auto var(--space-4);
  color: var(--accent);
}

.jobs-empty p + p {
  margin-top: var(--space-2);
}

.jobs-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.jobs-seealso {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.jobs-seealso__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-4);
}

.jobs-seealso__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Filtres sur mobile : tiroir replié -------------------------------------------- */
@media (max-width: 960px) {
  .filters-mobile__summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 52px;
    padding: 0 1.15rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
  }

  .filters-mobile__summary::-webkit-details-marker {
    display: none;
  }

  .filters-mobile__count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--paper);
    font-size: var(--fs-xs);
  }

  .filters-mobile__chevron {
    margin-left: auto;
    color: var(--muted-2);
    transition: transform var(--dur) var(--ease);
  }

  .filters-mobile[open] .filters-mobile__chevron {
    transform: rotate(180deg);
  }

  .filters-mobile__body {
    margin-top: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .filters__group:first-of-type {
    border-top: 0;
  }
}

/* Annonce ---------------------------------------------------------------------------- */
.job-header {
  padding-block: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--line);
}

.job-closed {
  margin-top: var(--space-5);
}

.job-closed a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.job-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--space-5);
}

.job-header__title {
  margin-top: var(--space-4);
  max-width: 24ch;
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
}

.job--closed .job-header__title {
  color: var(--ink-2);
}

.job-header__company {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--fs-lg);
  color: var(--ink-2);
}

.job-header__company a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.18em;
}

.job-header__company a:hover {
  color: var(--accent-ink);
  text-decoration-color: currentColor;
}

.job-header__meta {
  margin-top: var(--space-4);
}

.job-body {
  padding-top: var(--space-7);
}

.job-intro {
  max-width: 62ch;
}

.job-intro p + p {
  margin-top: 1em;
}

.job-intro ul {
  margin-top: 1em;
  padding-left: 1.25em;
}

.job-description {
  margin-top: var(--space-6);
}

.job-section {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.job-section__title {
  font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem);
  margin-bottom: var(--space-4);
}

/* À propos de l'établissement */
.job-about {
  margin-top: var(--space-8);
}

.job-about__cover {
  margin-bottom: var(--space-5);
}

.job-about__cover .cover {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
}

.job-about__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.job-about__eyebrow {
  margin-bottom: 0.25rem;
}

.job-about__name {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.job-about__tagline {
  margin-top: 0.15rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.job-about__text {
  margin-top: var(--space-5);
  color: var(--ink-2);
}

.job-about__benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.job-about__benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.job-about__benefit .icon-circle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.job-about__benefit-title {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.job-about__benefit-text {
  margin-top: 0.15rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.job-about__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.job-about__count {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Panneau latéral */
.job-panel .dl {
  gap: var(--space-3);
}

.job-panel .dl__row > div {
  min-width: 0;
}

.job-panel .dl__value a {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.18em;
}

.job-panel .dl__value a:hover {
  text-decoration-color: currentColor;
}

.job-apply {
  margin-top: var(--space-6);
}

.job-apply__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
}

.job-share {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* Dans le panneau latéral (360 px), le libellé « Partager » occupe sa propre ligne. */
.job-share .share__label {
  flex-basis: 100%;
  margin: 0 0 0.25rem;
}

.job-report {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--muted-2);
}

.job-report:hover {
  color: var(--ink);
}

/* Offres similaires & bandeau */
.job-similar {
  margin-top: var(--section-sm);
  padding-top: var(--section-sm);
  border-top: 1px solid var(--line);
}

.job-similar--featured {
  border-top: 0;
  padding-block: var(--section-sm);
  background: var(--paper-2);
}

.job-cta {
  margin-top: var(--section-sm);
}

/* Barre « Postuler » fixe sur mobile */
.job-mobile-bar {
  display: none;
}

@media (max-width: 720px) {
  /* Sur une ligne étroite, les points médians en début de ligne parasitent la lecture. */
  .job-header__meta.meta--dots .meta__item::before {
    content: none;
    margin: 0;
  }
}

@media (max-width: 960px) {
  .job-header {
    padding-block: var(--space-5) var(--space-6);
  }

  .job-body {
    padding-top: var(--space-6);
  }

  .job-aside {
    margin-top: var(--space-6);
  }

  .job-mobile-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }

  .job-mobile-bar__text {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-sm);
  }

  .job-mobile-bar__title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .job-mobile-bar__company {
    font-size: var(--fs-xs);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .job-mobile-bar .btn {
    flex-shrink: 0;
  }

  .job.has-mobile-bar {
    padding-bottom: 88px;
  }
}

/* Vue « postuler » ----------------------------------------------------------------- */
.apply-hero__title {
  max-width: 28ch;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
}

.apply-body {
  padding-bottom: var(--section-sm);
}

.apply-notice p a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.apply-recap__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.apply-recap__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.apply-recap__company {
  margin-top: 0.15rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.apply-recap__meta {
  margin-top: var(--space-4);
}

.apply-recap__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.apply-tips__list {
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.apply-tips__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.apply-tips__list .icon {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--accent);
}

@media (max-width: 960px) {
  .apply-aside {
    order: -1;
  }

  .apply-tips {
    display: none;
  }
}