/* ===== Fonts (paths relative to assets/css/) ===== */
@font-face{
  font-family:"Circular";
  src:url("../fonts/circular/CircularStd-Book.woff2") format("woff2"),
      url("../fonts/circular/CircularStd-Book.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Circular";
  src:url("../fonts/circular/CircularStd-Medium.woff2") format("woff2"),
      url("../fonts/circular/CircularStd-Medium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Circular";
  src:url("../fonts/circular/CircularStd-Bold.woff2") format("woff2"),
      url("../fonts/circular/CircularStd-Bold.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ===== Tokens ===== */
:root{
  --zr-primary:#0B3D2E;
  --zr-cta:#0B3D2E;
  --zr-white:#fff;
  --zr-surface:#F8FAF9;
  --zr-ink:#0a0f0d;
  --zr-muted:#586066;
  --zr-border:#E2E8E5;
  --zr-elevated:#EEF3F1;

  --fs-12:.75rem;
  --fs-13:.8125rem;
  --fs-14:.875rem;
  --fs-16:1rem;

  --radius:18px;
}

*{box-sizing:border-box}

/* Page container */
#zr-careers{
  font-family:"Circular","Circular Std",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--zr-ink);
  background:var(--zr-surface);
  position:relative;
  z-index:0;
}

/* Keep the global sticky header above the page */
header.site-header, .zr-site-header{ z-index:10000 !important; }

/* ===== Layout ===== */
.zr-container{max-width:1180px;margin:0 auto;padding:0 20px 72px}

/* Headings */
.zr-h1{font-size:clamp(2.2rem,2vw + 1.5rem,3rem);font-weight:800;text-align:center;margin:72px 0 .6rem}
.zr-subtitle{color:var(--zr-muted);text-align:center;max-width:70ch;margin:0 auto 24px;font-size:var(--fs-16)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header bottom hairline like in the mock */
#zr-careers .zr-header{padding-bottom:12px;border-bottom:1px solid var(--zr-border)}

/* ===== Filters — compact pills (side-by-side) ===== */
.zr-filters{
  margin:28px auto 16px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;
}
.zr-filters select{
  -webkit-appearance:none;appearance:none;
  flex:0 0 auto;                 /* don’t stretch full width */
  width:auto !important;          /* override theme width:100% */
  min-width:220px;
  height:42px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid var(--zr-border);
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  font-size:var(--fs-14);
  line-height:42px;
}
.zr-reset{
  background:none;border:none;color:var(--zr-muted);font-size:var(--fs-13);
  cursor:pointer;text-decoration:underline;flex:0 0 auto;
}
@media (max-width:560px){
  .zr-filters{justify-content:stretch}
  .zr-filters select{min-width:0;flex:1 1 100%;width:100% !important}
  .zr-reset{width:100%;text-align:center;padding-top:6px}
}

/* ===== Grid ===== */
.zr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:32px;margin-top:24px}

/* ===== Card (visible by default; animate when allowed) ===== */
.zr-card{
  background:#fff;border:1px solid var(--zr-border);border-radius:var(--radius);
  padding:24px;position:relative;display:grid;gap:12px;
  grid-template-rows:auto auto auto 1fr auto;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  --accent:#0B3D2E;--accent-start:#0cb59b;--accent-end:#095a4f;
  opacity:1; transform:none;
}
@media (prefers-reduced-motion: no-preference){
  .zr-card{opacity:0; transform:translateY(20px); animation:zrFadeUp .5s var(--delay,0s) forwards}
}
.zr-card:hover{border-color:color-mix(in oklab,var(--zr-border), var(--zr-cta) 24%)}
.zr-card::before{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--accent-start),var(--accent-end));opacity:.45}
.zr-icon{width:28px;height:28px;color:var(--accent)}
.zr-title{margin:0;font-size:1.22rem;font-weight:700}
.zr-meta{font-size:var(--fs-13);color:var(--zr-muted);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.zr-summary{margin:0;font-size:var(--fs-14);line-height:1.5}
.zr-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.zr-tag{font-size:var(--fs-12);background:var(--zr-elevated);padding:5px 10px;border-radius:999px;border:1px solid var(--zr-border)}
.zr-posted{position:absolute;top:16px;right:18px;font-size:var(--fs-12);color:var(--zr-muted)}

@keyframes zrFadeUp{to{opacity:1;transform:none}}

/* ===== Category accents ===== */
.zr-card[data-cat="ia"]{--accent:#0B3D2E;--accent-start:#00c7a0;--accent-end:#0b3d2e}
.zr-card[data-cat="ux"]{--accent:#0b6ea1;--accent-start:#46d3ff;--accent-end:#0b6ea1}
.zr-card[data-cat="green"], .zr-card[data-cat="energie"]{--accent:#0f766e;--accent-start:#78e08f;--accent-end:#0f766e}
.zr-card[data-cat="cyber"]{--accent:#4b3fff;--accent-start:#7a86ff;--accent-end:#2e38b8}

/* ===== CTA card (also used for empty state) ===== */
/* ===== CTA card (scoped to this page only) ===== */
#zr-careers .zr-cta{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:28px;
  padding:40px; border-radius:20px;
  background:linear-gradient(135deg,#f8faf9,#fff);
  border:1px solid var(--zr-border);
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}
#zr-careers .zr-cta-illu{
  flex:0 0 80px; height:80px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#0cb59b,#095a4f);
}
#zr-careers .zr-cta-title{ margin:0; font-size:1.4rem; font-weight:800; }
#zr-careers .zr-cta-p{ margin:.4rem 0 0; color:var(--zr-muted); }
#zr-careers .zr-cta-link{
  display:inline-block; margin-top:10px; color:var(--zr-cta);
  font-weight:700; text-decoration:none; border-bottom:2px solid transparent;
  transition:border-color .2s;
}
#zr-careers .zr-cta-link:hover{ border-color:var(--zr-cta); }
#zr-careers .zr-cta--empty .zr-cta-illu{
  background:radial-gradient(circle at 30% 30%, #9de7d6, #bfe8e0);
}



/* ==== Fix header CTA on the Candidature page only ==== */
/* WordPress adds a body class for the template: page-template-candidature or page-template-candidature-php */
body.page-template-candidature header.site-header,
body.page-template-candidature-php header.site-header{
  z-index: 10000 !important; /* keep header above page content */
}

/* Remove the white/shadowed wrapper some themes place around the CTA */
body.page-template-candidature header.site-header .menu-right,
body.page-template-candidature-php header.site-header .menu-right,
body.page-template-candidature header.site-header .header-cta,
body.page-template-candidature-php header.site-header .header-cta,
body.page-template-candidature header.site-header .cta-wrap,
body.page-template-candidature-php header.site-header .cta-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Force the “Contacter-nous” link itself to render as the green pill */
body.page-template-candidature header.site-header a[href*="contact"],
body.page-template-candidature-php header.site-header a[href*="contact"]{
  background: #0B3D2E !important;       /* your brand green */
  color: #fff !important;
  border: 1px solid color-mix(in oklab, #0B3D2E, white 14%) !important;
  border-radius: 9999px !important;
  padding: 10px 18px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

/* optional: hover micro-lift for parity with other pages */
body.page-template-candidature header.site-header a[href*="contact"]:hover,
body.page-template-candidature-php header.site-header a[href*="contact"]:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, #0B3D2E, black 6%);
}