/* Page: careers
 * Rôle: offre d'emploi (faits, corps de l'annonce, carte de candidature).
 * Dépendances: hero, boutons et typographie communs.
 * Note: la carte de candidature reste visible au défilement sur grand écran.
 */
.job-hero-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:12px 16px;
  margin-bottom:18px;
}

.job-hero-bar .eyebrow{
  margin-bottom:0;
}

.job-translation-note{
  max-width:68ch;
  margin:-4px 0 18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.job-translation-note a{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}

.job-translation-note a:hover{
  color:var(--accent2);
}

.job-lang{
  display:inline-flex;
  flex:0 0 auto;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(127,208,210,0.24);
  background:rgba(255,255,255,0.04);
}

.job-lang a{
  padding:6px 12px;
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
}

.job-lang a[aria-current="page"]{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  color:#172338;
}

.job-subtitle{
  margin:14px 0 0;
  color:var(--accent);
  font-size:clamp(18px, 2vw, 22px);
  font-weight:600;
  letter-spacing:-0.02em;
}

.job-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:28px 0 0;
  padding:0;
  list-style:none;
}

.job-facts li{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(127,208,210,0.2);
  background:rgba(255,255,255,0.04);
  color:#d7eef0;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.01em;
}

.job-section{
  padding-top:10px;
}

.job-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 340px;
  gap:48px;
  align-items:start;
}

.job-body > .muted{
  max-width:68ch;
}

.job-block{
  margin-top:48px;
  padding-top:36px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.job-block h2{
  max-width:none;
}

.job-list,
.job-offer,
.job-traits{
  margin:22px 0 0;
  padding:0;
  list-style:none;
}

.job-list{
  display:grid;
  gap:16px;
  max-width:72ch;
}

.job-list li{
  position:relative;
  padding-left:22px;
  color:#d7e2ef;
  font-size:16px;
  line-height:1.65;
  letter-spacing:-0.012em;
}

.job-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent2);
}

.job-traits{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  max-width:72ch;
}

.job-traits li{
  margin:0;
  padding:16px 16px 15px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  color:#d7e2ef;
  font-size:15px;
  line-height:1.5;
}

.job-offer{
  display:grid;
  gap:0;
  max-width:72ch;
  border-top:1px solid rgba(255,255,255,0.08);
}

.job-offer li{
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  color:#d7e2ef;
  font-size:16px;
  line-height:1.6;
}

.job-apply{
  position:sticky;
  top:128px;
}

.job-apply-card{
  padding:22px 22px 20px;
  border:1px solid rgba(127,208,210,0.22);
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(127,208,210,0.08), rgba(255,255,255,0.03) 42%);
  box-shadow:0 16px 40px rgba(0,0,0,0.22);
}

.job-apply-role{
  margin:0;
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.15;
}

.job-apply-place{
  margin:8px 0 0;
  color:var(--accent);
  font-size:14px;
  font-weight:700;
}

.job-apply-send{
  margin:14px 0 0;
  color:#d7e2ef;
  font-size:15px;
  line-height:1.5;
}

.job-apply-details{
  display:grid;
  gap:12px;
  margin:16px 0 0;
}

.job-apply-details div{
  display:grid;
  gap:3px;
}

.job-apply-details dt{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

.job-apply-details dd{
  margin:0;
  color:var(--text);
  font-size:15px;
  line-height:1.4;
}

.job-apply-note{
  margin:14px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.job-apply-mail{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}

.job-apply-mail:hover{
  color:var(--accent2);
}

.job-apply-btn{
  display:block;
  margin-top:18px;
  text-align:center;
}

@media (max-width: 980px){
  .job-layout{
    grid-template-columns:1fr;
    gap:28px;
  }

  .job-apply{
    position:static;
    order:-1;
  }
}

@media (max-width: 700px){
  .job-traits{
    grid-template-columns:1fr;
  }
}