/* Relown — Job board. Design system dédié (préfixe .jb-*), DA verte Relown, Nunito.
   Objectif : rendu premium type plateforme d'emploi (Otta / Welcome to the Jungle). */
:root{
  --jb-brand:#134D35; --jb-brand-d:#0e3b28; --jb-brand-2:#1c6a49;
  --jb-cream:#FFF8E8; --jb-peach:#E8996A;
  --jb-ink:#1e2620; --jb-soft:#6a7268; --jb-line:#e7e2d3; --jb-card:#fff;
  --jb-mint:#e7f2ea; --jb-mint-d:#155c3d; --jb-lav:#eeecfb; --jb-lav-d:#4b3ea8;
  --jb-sun:#fbf0d4; --jb-sun-d:#7a5c1e;
  --jb-sh:0 1px 2px rgba(19,40,29,.04),0 8px 24px -14px rgba(19,40,29,.16);
  --jb-sh-h:0 6px 16px rgba(19,40,29,.08),0 22px 48px -20px rgba(19,40,29,.28);
}

/* corrige l'héritage de guides.css : nos titres dans le hero doivent être clairs */
.jb-hero h1,.jb-hero h2,.jb-hero p,.jb-hero span{color:#fff}

/* ---------------- HERO ---------------- */
.jb-hero{position:relative;overflow:hidden;border-radius:26px;margin:6px 0 26px;
  padding:clamp(30px,4.8vw,52px) clamp(24px,4vw,52px);
  background:radial-gradient(120% 140% at 88% 0%,#1e6a49 0%,var(--jb-brand) 46%,var(--jb-brand-d) 100%);}
.jb-hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);background-size:22px 22px;}
.jb-hero-c{position:relative;max-width:760px}
.jb-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);font-weight:800;font-size:12.5px;letter-spacing:.2px;
  padding:7px 14px;border-radius:999px;margin-bottom:18px}
.jb-hero h1{font-family:Nunito,system-ui,sans-serif!important;font-weight:800;
  font-size:clamp(29px,4.6vw,46px);line-height:1.06;letter-spacing:-.5px;margin:0 0 14px;text-wrap:balance}
.jb-hero .sub{font-size:clamp(15px,1.7vw,18px);line-height:1.55;color:rgba(255,255,255,.9)!important;margin:0;max-width:56ch}

/* barre de recherche */
.jb-search{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;
  padding:5px 5px 5px 16px;margin:24px 0 20px;max-width:520px;box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}
.jb-search svg{width:20px;height:20px;stroke:var(--jb-soft);fill:none;stroke-width:2;flex:0 0 auto}
.jb-search input{flex:1;border:0;outline:0;font:inherit;font-size:15px;color:var(--jb-ink)!important;
  background:transparent;padding:11px 0}
.jb-search input::placeholder{color:#9aa39a}
.jb-search .go{background:var(--jb-brand);color:#fff!important;border:0;border-radius:10px;
  font-family:Nunito;font-weight:800;font-size:14px;padding:11px 18px;cursor:pointer}

/* stats inline */
.jb-stats{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;color:rgba(255,255,255,.86)!important;font-size:14px}
.jb-stats b{color:#fff!important;font-family:Nunito;font-weight:800}
.jb-stats .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}

/* ---------------- FILTRES ---------------- */
/* barre de filtres déroulante (Indeed/WTTJ) */
.jb-filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:2px 0 22px}
.jb-select{position:relative;display:inline-block}
.jb-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;font-family:Nunito,system-ui,sans-serif;
  font-weight:800;font-size:14px;color:var(--jb-ink);background:#fff;border:1.5px solid var(--jb-line);
  border-radius:12px;padding:11px 40px 11px 16px;cursor:pointer;transition:.15s;max-width:100%}
.jb-select select:hover{border-color:#c9c0a6}
.jb-select select:focus{outline:none;border-color:var(--jb-brand);box-shadow:0 0 0 3px rgba(19,77,53,.12)}
.jb-select::after{content:"";position:absolute;right:15px;top:44%;width:8px;height:8px;
  border-right:2px solid var(--jb-soft);border-bottom:2px solid var(--jb-soft);transform:translateY(-50%) rotate(45deg);pointer-events:none}
.jb-toggle{font-family:Nunito;font-weight:800;font-size:13.5px;color:var(--jb-ink);background:#fff;
  border:1.5px solid var(--jb-line);border-radius:12px;padding:10px 14px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.jb-toggle:hover{border-color:#c9c0a6}
.jb-toggle.on{background:var(--jb-brand);color:#fff;border-color:var(--jb-brand)}
.jb-toggle .n{font-size:12px;font-weight:800;opacity:.55}
.jb-toggle.on .n{opacity:.85}
.jb-tag.fr{background:#eaf0ff;color:#2a4d8f}
.jb-tag.rem{background:#e7f4ef;color:#1f6b6b}
.jb-filterbar .jb-count{margin-left:auto;color:var(--jb-soft);font-size:14px;font-weight:700}
@media(max-width:560px){.jb-select,.jb-select select{width:100%}.jb-toggle{width:100%;justify-content:center}.jb-filterbar .jb-count{margin-left:0;width:100%}}
.jb-filters{display:flex;flex-direction:column;gap:12px;margin:4px 0 10px}
.jb-fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jb-flabel{font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--jb-soft);width:56px;flex:0 0 auto}
.jb-chip{border:1.5px solid var(--jb-line);background:#fff;color:var(--jb-ink);
  font-family:Nunito;font-weight:800;font-size:13.5px;padding:8px 14px;border-radius:11px;
  cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px;line-height:1}
.jb-chip:hover{border-color:#c9c0a6;background:#fffdf6}
.jb-chip.on{background:var(--jb-brand);color:#fff;border-color:var(--jb-brand)}
.jb-chip .n{font-size:12px;font-weight:800;opacity:.55}
.jb-chip.on .n{opacity:.8}
.jb-resultbar{display:flex;align-items:center;justify-content:space-between;
  margin:16px 0 14px;padding-top:14px;border-top:1px solid var(--jb-line)}
.jb-resultbar h2{font-family:Nunito;font-weight:800;font-size:19px;margin:0;color:var(--jb-ink)}
.jb-count{color:var(--jb-soft);font-size:14px;font-weight:700}

/* ---------------- GRILLE / CARTES ---------------- */
.jb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;margin-bottom:44px}
.jb-empty{display:none;padding:40px;text-align:center;color:var(--jb-soft);
  border:1.5px dashed var(--jb-line);border-radius:18px}
.jb-card{position:relative;background:var(--jb-card);border:1px solid var(--jb-line);border-radius:18px;
  padding:20px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;
  box-shadow:var(--jb-sh);transition:transform .16s ease,box-shadow .16s ease,border-color .16s;min-height:184px}
.jb-card:hover{transform:translateY(-3px);box-shadow:var(--jb-sh-h);border-color:#dcd4bd}
.jb-card .jb-top{display:flex;align-items:flex-start;gap:12px}
.jb-logo{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;
  font-family:Nunito;font-weight:800;font-size:17px;letter-spacing:.3px}
.jb-logo:not(.jb-avatar){background:#fff;border:1px solid var(--jb-line)}
.jb-logo img{width:100%;height:100%;object-fit:contain;padding:8px}
.jb-new{position:absolute;top:15px;right:15px;background:var(--jb-peach);color:#3b2109;
  font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.2px}
.jb-trust{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding:16px 22px;background:#fff;
  border:1px solid var(--jb-line);border-radius:16px;margin:2px 0 30px;box-shadow:var(--jb-sh)}
.jb-trust .lbl{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--jb-soft)}
.jb-tco{display:inline-flex;align-items:center;gap:9px;font-family:Nunito;font-weight:800;font-size:14px;color:var(--jb-ink)}
.jb-tco .av{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:800}
.jb-tco .tv{width:26px;height:26px;object-fit:contain;border-radius:7px;background:#fff;border:1px solid var(--jb-line);padding:3px}
.jb-tt{min-width:0}
.jb-card h3{font-family:Nunito;font-weight:800;font-size:16.5px;line-height:1.28;margin:0;color:var(--jb-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jb-card .jb-co{font-size:13px;color:var(--jb-soft);font-weight:700;margin-top:3px}
.jb-metarow{display:flex;flex-wrap:wrap;gap:5px 14px;color:var(--jb-soft);font-size:12.5px;font-weight:600}
.jb-metarow span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.jb-metarow .ic{width:14px;height:14px;stroke:var(--jb-soft);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.jb-meta{display:flex;flex-wrap:wrap;gap:7px}
.jb-tag{font-size:12px;font-weight:800;padding:5px 10px;border-radius:8px;background:#f3efe2;color:#6c6752;white-space:nowrap}
.jb-tag.cat{background:var(--jb-lav);color:var(--jb-lav-d)}
.jb-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:2px}
.jb-go{font-size:13.5px;font-weight:800;color:var(--jb-brand);display:inline-flex;align-items:center;gap:6px}
.jb-card:hover .jb-go{gap:9px}

/* ---------------- MESH LOCALISATION ---------------- */
.jb-sec-h{font-family:Nunito;font-weight:800;font-size:22px;margin:8px 0 14px;color:var(--jb-ink)}
.jb-locrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:2px 0 40px}
.jb-loccard{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,var(--jb-cream));
  border:1px solid var(--jb-line);border-radius:18px;padding:22px;text-decoration:none;color:var(--jb-ink);
  transition:.16s;box-shadow:var(--jb-sh)}
.jb-loccard:hover{border-color:var(--jb-brand);transform:translateY(-2px);box-shadow:var(--jb-sh-h)}
.jb-loccard .f{font-size:30px;line-height:1}
.jb-loccard h3{font-family:Nunito;font-weight:800;margin:10px 0 4px;font-size:19px}
.jb-loccard p{margin:0;color:var(--jb-soft);font-size:13.5px}
.jb-loccard .arr{position:absolute;right:20px;top:22px;color:var(--jb-brand);font-weight:800}

/* ---------------- DÉTAIL OFFRE ---------------- */
.jb-back{display:inline-flex;align-items:center;gap:6px;color:var(--jb-soft);font-weight:700;
  font-size:14px;text-decoration:none;margin:6px 0 4px}
.jb-back:hover{color:var(--jb-brand)}
.jb-detail{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;margin:16px 0 20px}
.jb-dhead .co{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.jb-dhead .co .jb-logo{width:38px;height:38px;font-size:14px}
.jb-dhead .co b{font-family:Nunito;font-weight:800;color:var(--jb-brand);font-size:15px}
.jb-dhead h1{font-family:Nunito!important;font-weight:800;font-size:clamp(23px,3.2vw,33px);
  line-height:1.12;letter-spacing:-.4px;margin:2px 0 14px;color:var(--jb-ink)}
.jb-dmeta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.jb-desc{font-size:15.5px;line-height:1.72;color:#333a30}
.jb-desc h2,.jb-desc h3{font-family:Nunito;font-weight:800;color:var(--jb-brand);margin:26px 0 10px;font-size:19px}
.jb-desc ul{padding-left:20px} .jb-desc li{margin:6px 0}
.jb-desc p{margin:0 0 12px}
.jb-source{margin-top:24px;font-size:13px;color:var(--jb-soft);background:var(--jb-cream);
  border-radius:12px;padding:12px 16px;line-height:1.55}

/* colonne latérale sticky */
.jb-aside{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px}
.jb-applybox{background:#fff;border:1px solid var(--jb-line);border-radius:18px;padding:20px;box-shadow:var(--jb-sh)}
.jb-applybox .btn,.jb-applybox a.btn{display:block;width:100%;text-align:center;box-sizing:border-box}
.jb-btn-primary{background:var(--jb-brand);color:#fff!important;border:0;border-radius:12px;
  font-family:Nunito;font-weight:800;font-size:15px;padding:14px 18px;text-decoration:none;display:block;text-align:center;transition:.15s}
.jb-btn-primary:hover{background:var(--jb-brand-2)}
.jb-btn-ghost{background:#fff;color:var(--jb-ink)!important;border:1.5px solid var(--jb-line);border-radius:12px;
  font-family:Nunito;font-weight:800;font-size:14.5px;padding:13px 18px;text-decoration:none;display:block;text-align:center;margin-top:10px;transition:.15s}
.jb-btn-ghost:hover{border-color:var(--jb-brand)}

/* bloc pont Relown */
.jb-bridge{background:linear-gradient(180deg,var(--jb-mint),#fff);border:1px solid #cfe9d8;border-radius:16px;padding:18px 18px 16px}
.jb-bridge h4{font-family:Nunito;font-weight:800;color:var(--jb-brand);margin:0 0 7px;font-size:16px}
.jb-bridge p{margin:0 0 10px;font-size:13px;color:#3a4a40;line-height:1.5}
.jb-bridge ul{margin:0 0 14px;padding-left:17px;font-size:13px;color:#3a4a40}
.jb-bridge ul li{margin:4px 0}

.jb-related{margin-top:34px}
.jb-related .jb-sec-h{font-size:20px}
.jb-links{background:var(--jb-cream);border-radius:14px;padding:16px 18px;margin-top:16px;font-size:13.5px;line-height:1.7;color:var(--jb-soft)}
.jb-links a{color:var(--jb-brand);font-weight:700}
.jb-faq{margin-top:26px}
.jb-faq>h3{font-family:Nunito;font-weight:800;color:var(--jb-brand);font-size:19px;margin:0 0 12px}
.jb-faq-i{border:1px solid var(--jb-line);border-radius:12px;padding:13px 16px;margin:8px 0;background:#fff}
.jb-faq-i summary{font-family:Nunito;font-weight:800;font-size:15px;color:var(--jb-ink);cursor:pointer;list-style:none;position:relative;padding-right:22px}
.jb-faq-i summary::-webkit-details-marker{display:none}
.jb-faq-i summary::after{content:"+";position:absolute;right:2px;top:-2px;font-size:20px;color:var(--jb-soft)}
.jb-faq-i[open] summary::after{content:"–"}
.jb-faq-i[open] summary{margin-bottom:9px}
.jb-faq-i p{margin:0;font-size:14.5px;color:#33382e;line-height:1.65}
.jb-faq-i a{color:var(--jb-brand);font-weight:700}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:900px){
  .jb-detail{grid-template-columns:1fr}
  .jb-aside{position:static;order:-1}
}
@media(max-width:560px){
  .jb-hero{padding:32px 22px}
  .jb-grid{grid-template-columns:1fr}
  .jb-flabel{width:100%}
  .jb-search{margin:20px 0 16px}
  .jb-search .go{display:none}
}