/* ============================================================
   ARTERE e-Commerce — Page détail d'une offre d'emploi
   S'appuie sur styles.css (+ recrutement.css pour quelques motifs)
   ============================================================ */

/* ---------- Fil d'Ariane + hero de l'offre ---------- */
.job-hero{
  background:linear-gradient(120deg,#f3f3f4 0%,#eff0f1 60%,#eaeaec 100%);
  border-bottom:1px solid var(--line);
  padding:30px 0 46px;
}
.crumb{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--muted);margin-bottom:22px;flex-wrap:wrap;}
.crumb a{color:var(--muted);font-weight:500;}
.crumb a:hover{color:var(--brand);}
.crumb .sep{color:var(--muted-2);}
.crumb .here{color:var(--ink-soft);font-weight:600;}

.job-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.job-tag{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:.82rem;font-weight:600;color:var(--ink-soft);
}
.job-tag svg{width:15px;height:15px;color:var(--brand);}
.job-hero h1{
  font-size:clamp(1.8rem,3vw,2.55rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.08;max-width:18ch;
}
.job-hero .job-sub{margin-top:1rem;color:var(--muted);font-size:1.05rem;max-width:60ch;}
.job-hero-cta{display:flex;gap:12px;margin-top:1.7rem;flex-wrap:wrap;}

/* ---------- Layout principal : contenu + aside collant ---------- */
.job-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:48px;
  align-items:start;padding:64px 0 84px;
}
.job-main{min-width:0;}

/* ---------- Sections de contenu ---------- */
.job-section{margin-top:46px;}
.job-section:first-child{margin-top:0;}
.job-section > h2{
  font-size:1.5rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);
  padding-bottom:.7rem;position:relative;
}
.job-section > h2::after{
  content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;border-radius:3px;background:var(--brand);
}
.job-section h3{font-size:1.08rem;font-weight:700;margin-top:1.6rem;color:var(--ink-soft);}
.job-section p{color:var(--ink-soft);margin-top:1rem;line-height:1.72;font-size:1.02rem;}
.job-section p strong{color:var(--ink);font-weight:700;}
.job-section .accent{color:var(--brand);font-weight:600;}

/* listes à puces "check" */
.job-list{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-direction:column;gap:13px;}
.job-list li{position:relative;padding-left:34px;color:var(--ink-soft);line-height:1.6;font-size:1.0rem;}
.job-list li::before{
  content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:var(--brand-soft);
}
.job-list li::after{
  content:"";position:absolute;left:7px;top:7px;width:7px;height:4px;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}

/* chips de compétences (réutilise l'esprit tech-chips) */
.skill-chips{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.skill-chips li{
  font-size:.86rem;font-weight:600;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;line-height:1;transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.skill-chips li:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}

/* ---------- Timeline verticale du processus ---------- */
.timeline{margin-top:1.4rem;display:flex;flex-direction:column;gap:0;}
.tl-step{position:relative;padding:0 0 30px 56px;}
.tl-step:last-child{padding-bottom:0;}
.tl-step::before{
  content:"";position:absolute;left:18px;top:36px;bottom:-2px;width:2px;background:var(--line);
}
.tl-step:last-child::before{display:none;}
.tl-num{
  position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  background:var(--brand);color:#fff;font-weight:800;font-size:.92rem;
  display:grid;place-items:center;z-index:1;box-shadow:0 6px 16px rgba(225,36,28,.28);
}
.tl-step h3{margin-top:0;font-size:1.06rem;color:var(--ink);}
.tl-step p{margin-top:.4rem;font-size:.97rem;}

/* ---------- Avantages (cartes) ---------- */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:1.4rem;}
.perk{
  background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px;box-shadow:var(--shadow-sm);
}
.perk .ic{width:48px;height:48px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;margin-bottom:14px;}
.perk .ic svg{width:24px;height:24px;}
.perk h3{margin-top:0;font-size:1.02rem;font-weight:700;color:var(--ink);}
.perk p{margin-top:.4rem;font-size:.92rem;color:var(--muted);line-height:1.55;}

/* ---------- Aside : carte résumé collante ---------- */
.job-aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px;}
.summary-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:26px 26px 28px;
}
.summary-card h2{font-size:1.05rem;font-weight:700;color:var(--ink);}
.summary-card .rule{width:40px;height:3px;border-radius:3px;background:var(--brand);margin:.7rem 0 1.3rem;}
.sum-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.sum-list li{display:flex;gap:13px;align-items:flex-start;}
.sum-ic{width:34px;height:34px;border-radius:9px;background:var(--surface-alt);color:var(--brand);
  display:grid;place-items:center;flex:0 0 auto;}
.sum-ic svg{width:18px;height:18px;}
.sum-txt{display:flex;flex-direction:column;}
.sum-txt .k{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);}
.sum-txt .v{font-size:.95rem;font-weight:600;color:var(--ink);margin-top:2px;line-height:1.35;}
.summary-card .btn{width:100%;justify-content:center;margin-top:24px;}
.summary-card .btn + .btn{margin-top:10px;}
.summary-share{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;
  padding-top:20px;border-top:1px solid var(--line);}
.summary-share span{font-size:.82rem;color:var(--muted);font-weight:600;}
.summary-share a{width:34px;height:34px;border-radius:50%;background:var(--surface-alt);color:var(--ink-soft);
  display:grid;place-items:center;transition:background .18s ease,color .18s ease;}
.summary-share a:hover{background:var(--brand);color:#fff;}
.summary-share svg{width:16px;height:16px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .job-layout{grid-template-columns:1fr;gap:36px;padding:48px 0 64px;}
  .job-aside{position:static;order:-1;}
  .summary-card{max-width:none;}
  .perks{grid-template-columns:1fr;}
}