/* css/employeurs.css
   Styles propres à employeurs.html (Employeurs).
   Chargée APRÈS styles.css. Réutiliser d'abord les composants partagés de styles.css
   (section « Composants partagés ») et les tokens de :root. Aucune nouvelle couleur.
*/

/* Texte réservé aux lecteurs d'écran */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sommaire de la page (dans l'en-tête) */
.page-toc { margin-top: 32px; }
.page-toc ul {
  list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 600;
}
.page-toc a { color: var(--ink-soft); }
.page-toc a:hover { color: var(--ink); }

/* Note sous les pastilles d'une fiche */
.fiche .fiche-note { margin: 12px 0 0; color: var(--ink-soft); font-size: .95rem; }

/* Tableau : afficher une offre d'emploi */
.posting-wrap { border-top: 2px solid var(--ink); }
.posting-table { width: 100%; border-collapse: collapse; }
.posting-table thead th {
  text-align: left; font-weight: 800; font-size: .95rem; padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--rule);
}
.posting-table tbody th, .posting-table td {
  text-align: left; vertical-align: top; padding: 20px 24px 20px 0;
  border-bottom: 1px solid var(--rule);
}
.posting-table td { color: var(--ink-soft); }
.posting-table tbody th { width: 22%; padding-left: 18px; position: relative; font-weight: 400; }
.posting-table tbody th::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 6px;
  background: var(--c, var(--ink)); border-radius: 1px;
}
.posting-territory { display: block; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.posting-org { display: block; font-size: .9rem; color: var(--ink-soft); margin-top: 2px; }
.posting-table td:last-child { width: 26%; }
.posting-table td:last-child a { display: block; font-weight: 700; color: var(--ink); }
.posting-table td:last-child a + a { margin-top: 8px; }
.posting-table td a { color: var(--ink); }
.posting-table .a-confirmer { display: inline-block; margin-top: 8px; }
.posting-more { margin: 8px 0 0; color: var(--ink-soft); }

/* Témoignages empilés */
.quote-stack { display: grid; gap: 40px; }

@media (max-width: 760px) {
  .posting-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .posting-table, .posting-table tbody, .posting-table tr, .posting-table th, .posting-table td { display: block; width: auto; }
  .posting-table tbody tr { position: relative; padding: 20px 0 20px 18px; border-bottom: 1px solid var(--rule); }
  .posting-table tbody tr::before {
    content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 6px;
    background: var(--c, var(--ink)); border-radius: 1px;
  }
  .posting-table tbody th::before { content: none; }
  .posting-table tbody th, .posting-table td { padding: 0; border: 0; }
  .posting-table tbody th { width: auto; }
  .posting-table td { margin-top: 10px; }
  .posting-table td:last-child { width: auto; }
}