/* ============================================================
   JOB HAITI V2 — APP CSS (Matching React Design)
   ============================================================ */

/* === Variables === */
:root {
  --jh-bg:        #f5f7fc;
  --jh-white:     #ffffff;
  --jh-gray-50:   #f9fafb;
  --jh-gray-100:  #f3f4f6;
  --jh-gray-400:  #9ca3af;
  --jh-gray-500:  #6b7280;
  --jh-gray-600:  #4b5563;
  --jh-gray-900:  #111827;
  --jh-blue-50:   #e3f6f7;
  --jh-blue-100:  #cbecee;
  --jh-blue-400:  #38abb1;
  --jh-blue-500:  #228a8f;
  --jh-blue-600:  #0c6468;
  --jh-blue-700:  #095255;
  --jh-blue-900:  #00282a;
  --jh-emerald-50: #ecfdf5;
  --jh-emerald-500: #10b981;
  --jh-emerald-600: #059669;
  --jh-amber-100: #fef3c7;
  --jh-amber-400: #fbbf24;
  --jh-amber-600: #d97706;
  --jh-amber-700: #b45309;
  --jh-amber-800: #92400e;
  --jh-red-50:    #fef2f2;
  --jh-red-100:   #fee2e2;
  --jh-red-400:   #f87171;
  --jh-red-500:   #ef4444;
  --jh-red-600:   #dc2626;
  --jh-red-700:   #b91c1c;
  --jh-purple-50: #f5f3ff;
  --jh-purple-600:#7c3aed;
  --jh-pink-50:   #fdf2f8;
  --jh-pink-600:  #db2777;
  --jh-cyan-50:   #ecfeff;
  --jh-cyan-600:  #0891b2;

  --jh-gray-200:  #e5e7eb;
  --jh-gray-300:  #d1d5db;
  --jh-blue-200:  #acd7d9;

  --jh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --jh-shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --jh-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.07);
  --jh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --jh-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --jh-shadow-blue: 0 10px 15px -3px rgba(12, 100, 104, 0.2);

  --jh-t: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --jh-w: 1280px;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--jh-bg);
  color: var(--jh-gray-600);
  font-family: 'Josefin Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.home {
  background-color: var(--jh-bg);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
input, select { font: inherit; border: none; background: none; outline: none; }

/* === Layout === */
.jh2-container {
  max-width: var(--jh-w);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px) { .jh2-container { padding: 0 1.5rem; } }
.jh2-main { padding-top: 7rem; }
/* La homepage garde son espacement d'origine pour ne pas passer sous le header */
body.home .jh2-main { padding-top: 80px; }

/* === Scroll Animations ===
   Visible by default (safe for no-JS, crawlers, and screenshot tools). JS
   opts elements INTO the pre-animation "primed" state on load, then releases
   them via IntersectionObserver — content is never gated behind a class that
   might not arrive. See jh2-priming below. */
[data-animate] { opacity: 1; transform: none; }
[data-animate].jh2-priming {
  opacity: 0; transition: opacity .6s var(--jh-t), transform .6s var(--jh-t);
}
[data-animate="fade-up"].jh2-priming    { transform: translateY(20px); }
[data-animate="fade-left"].jh2-priming  { transform: translateX(-20px); }
[data-animate="fade-right"].jh2-priming { transform: translateX(20px); }
[data-animate="scale-up"].jh2-priming   { transform: scale(0.95); }
[data-animate].is-visible { opacity: 1 !important; transform: none !important; }

/* === Header & Sticky Top Bar === */
.jh2-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: transform 0.3s ease, background 0.3s ease;
  padding: 0;
  border-bottom: none;
}
.jh2-topbar {
  background: var(--jh-blue-900, #0f172a);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.jh2-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
}
.jh2-topbar__time {
  display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500;
}
.jh2-topbar__time svg { color: #60a5fa; }
.jh2-clock-label { color: #93c5fd; font-weight: 600; }
#jh2-clock-val { font-family: monospace; font-weight: 700; color: #ffffff; letter-spacing: 0.04em; }
.jh2-topbar__socials { display: inline-flex; align-items: center; gap: 0.85rem; }
.jh2-topbar__socials a {
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s ease; text-decoration: none;
}
.jh2-topbar__socials a:hover { color: #ffffff; transform: scale(1.22); }

.jh2-header-main {
  background: var(--jh-white, #ffffff);
  box-shadow: var(--jh-shadow-sm);
  border-bottom: 1px solid var(--jh-gray-100);
  padding: 0.75rem 0;
  transition: padding 0.3s ease;
}
.jh2-header--scrolled .jh2-header-main, .jh2-header--solid .jh2-header-main {
  padding: 0.5rem 0;
}
body.admin-bar .jh2-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .jh2-header {
    top: 46px;
  }
}
.jh2-header__inner {
  display: flex; align-items: center; justify-content: space-between;
}
.jh2-brand {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.5rem; font-weight: 700; color: var(--jh-gray-900);
  letter-spacing: -0.025em;
}
.jh2-brand__icon {
  width: 2.5rem; height: 2.5rem; background: var(--jh-blue-600);
  border-radius: 0.75rem; display: flex; align-items: center; justify-content: center;
  color: white; box-shadow: var(--jh-shadow-blue);
}
.jh2-nav { display: none; }
@media (min-width: 1024px) {
  .jh2-nav { display: flex; align-items: center; gap: 2rem; }
}
.jh2-nav__link {
  font-weight: 600; color: var(--jh-gray-500); transition: color var(--jh-t);
}
.jh2-nav__link:hover, .jh2-nav__link.is-active { color: var(--jh-blue-600); }

.jh2-header__actions { display: none; }
@media (min-width: 1024px) {
  .jh2-header__actions { display: flex; align-items: center; gap: 1.5rem; }
}
.jh2-login-link {
  font-weight: 700; color: var(--jh-gray-900); transition: color var(--jh-t);
}
.jh2-login-link:hover { color: var(--jh-blue-600); }

.jh2-btn-post {
  background: var(--jh-blue-50); color: var(--jh-blue-600);
  padding: 0.75rem 1.5rem; border-radius: 0.75rem;
  font-weight: 700; transition: all var(--jh-t);
  box-shadow: var(--jh-shadow-sm);
}
.jh2-btn-post:hover { background: var(--jh-blue-600); color: white; }

.jh2-hamburger {
  display: block; color: var(--jh-gray-900); background: none; border: none; padding: 0.75rem; cursor: pointer;
}
@media (min-width: 1024px) { .jh2-hamburger { display: none; } }

/* === Hero Section === */


/* === Categories === */
.jh2-section { padding: 6rem 0; }
.jh2-section--bg { background: var(--jh-bg); }
.jh2-section-header { text-align: center; margin-bottom: 4rem; }
.jh2-section-title { font-size: 2.25rem; font-weight: 700; color: var(--jh-gray-900); margin-bottom: 1rem; }
.jh2-section-desc { color: var(--jh-gray-500); }

.jh2-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 768px) { .jh2-cat-grid { grid-template-columns: repeat(4, 1fr); } }
.jh2-cat-card {
  background: var(--jh-white); padding: 1.5rem; border-radius: 1rem;
  border: 1px solid var(--jh-gray-100); text-align: center; cursor: pointer;
  transition: all var(--jh-t); text-decoration: none; display: block;
}
.jh2-cat-card:hover {
  box-shadow: var(--jh-shadow-lg); transform: translateY(-5px); border-color: transparent;
}
.jh2-cat-icon {
  width: 4rem; height: 4rem; background: rgba(227, 246, 247, 0.5);
  border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  color: var(--jh-blue-600); margin: 0 auto 1rem; transition: var(--jh-t);
}
.jh2-cat-icon svg { width: 2rem; height: 2rem; }
.jh2-cat-card:hover .jh2-cat-icon { background: var(--jh-blue-600); color: white; }
.jh2-cat-card h3 { font-weight: 700; color: var(--jh-gray-900); margin-bottom: 0.25rem; transition: var(--jh-t); }
.jh2-cat-card:hover h3 { color: var(--jh-blue-600); }
.jh2-cat-card p { color: var(--jh-gray-500); font-size: 0.875rem; }

/* === Featured Jobs === */
.jh2-jobs-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .jh2-jobs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jh2-jobs-grid { grid-template-columns: repeat(4, 1fr); } }
/* Carte d'offre : disposition en LIGNE (logo | contenu | actions).
   Remplace l'ancienne grille 2 colonnes a cartes centrees : en liste, l'oeil
   balaie une colonne de titres alignes a gauche, ce qui est bien plus rapide
   a parcourir sur mobile comme sur bureau. */
.jh2-job-card {
  background: var(--jh-white);
  padding: 1.5rem;
  border-radius: 16px; /* jeton rounded.lg */
  border: 1px solid var(--jh-gray-200);
  transition: border-color var(--jh-t), box-shadow var(--jh-t);
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.25rem;
  box-shadow: var(--jh-shadow-sm);
}
.jh2-job-card:hover {
  box-shadow: var(--jh-shadow-md);
  border-color: var(--jh-blue-200);
}

/* Les etiquettes remontent en bas de carte (.jh2-job-card__bottom-tags) */
.jh2-job-card__top-badges { display: none; }
.jh2-badge-type {
  background: var(--jh-blue-50);
  color: var(--jh-blue-600);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.jh2-badge-status {
  background: var(--jh-amber-100);
  color: var(--jh-amber-800);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Corps : logo a gauche, contenu a droite, aligne au fil du texte */
.jh2-job-card__main-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Logo Box */
.jh2-job-card__logo-container {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--jh-white);
  border-radius: 12px; /* jeton rounded.md */
  border: 1px solid var(--jh-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  flex-shrink: 0;
  box-shadow: var(--jh-shadow-sm);
}
.jh2-job-card__logo-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.jh2-job-card__logo-initials {
  font-weight: 900;
  color: var(--jh-blue-600);
  font-size: 1.5rem;
}

/* Core Content */
.jh2-job-card__core-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  gap: 0.5rem;
}
.jh2-job-card__company-name {
  color: var(--jh-blue-600);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}
.jh2-job-card__job-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--jh-gray-900);
  line-height: 1.35;
  transition: var(--jh-t);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.5rem;
}
.jh2-job-card:hover .jh2-job-card__job-title {
  color: var(--jh-blue-600);
}
/* "En vedette" : mention discrete a cote du titre, pas une pastille lourde
   qui concurrencerait les etiquettes de contrat en bas de carte. */
.jh2-job-card__featured-badge {
  color: var(--jh-emerald-600);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0;
  border-radius: 0;
  text-transform: none;
  white-space: nowrap;
}

/* Meta Information */
.jh2-job-card__meta-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem 1rem;
  margin-top: 0.25rem;
}
.jh2-job-card__meta-company {
  display: none;
  font-weight: 700;
  color: var(--jh-blue-600);
  font-size: 0.875rem;
}
.jh2-job-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--jh-gray-500);
  font-size: 0.8125rem;
  font-weight: 500;
}
.jh2-job-card__meta-item svg {
  color: var(--jh-gray-400);
  flex-shrink: 0;
}

/* Etiquettes de contrat, sous les metadonnees */
.jh2-job-card__bottom-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

/* Colonne d'actions a droite : favori en haut (comme la maquette), puis
   "Postuler" et la date. column-reverse place actions-wrap avant la date. */
.jh2-job-card__action-footer {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.75rem;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  width: auto;
  flex-shrink: 0;
}
.jh2-job-card__date {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--jh-gray-400);
  font-size: 0.8125rem;
  font-weight: 500;
}
.jh2-job-card__date svg {
  color: var(--jh-gray-300);
}
.jh2-job-card__actions-wrap {
  display: flex;
  flex-direction: row-reverse; /* favori a droite, "Postuler" a sa gauche */
  align-items: center;
  gap: 0.75rem;
  z-index: 2;
  position: relative;
}

/* Empilement sur petits ecrans : la colonne d'actions passe sous le contenu */
@media (max-width: 640px) {
  .jh2-job-card { flex-wrap: wrap; padding: 1.25rem; }
  .jh2-job-card__main-body { flex: 1 1 100%; }
  .jh2-job-card__action-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid var(--jh-gray-100);
    padding-top: 0.875rem;
  }
  .jh2-job-card__logo-container { width: 3.25rem; height: 3.25rem; padding: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jh2-job-card { transition: none; }
}
.jh2-fav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  color: var(--jh-gray-400);
  background: var(--jh-gray-50);
  border: 1px solid var(--jh-gray-100);
  transition: all var(--jh-t);
  cursor: pointer;
}
.jh2-fav-btn:hover, .jh2-fav-btn.is-saved {
  color: var(--jh-red-500);
  background: var(--jh-red-50);
  border-color: var(--jh-red-100);
}
.jh2-btn-postuler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--jh-blue-50);
  color: var(--jh-blue-600);
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  transition: all var(--jh-t);
}
.jh2-job-card:hover .jh2-btn-postuler {
  background: var(--jh-blue-600);
  color: white;
  box-shadow: var(--jh-shadow-blue);
}

.jh2-center-btn { text-align: center; margin-top: 3rem; }
.jh2-btn-primary {
  background: var(--jh-blue-600); color: white; padding: 1rem 2.5rem;
  border-radius: 0.75rem; font-weight: 700; transition: var(--jh-t);
  box-shadow: var(--jh-shadow-blue); display: inline-block;
}
.jh2-btn-primary:hover { background: var(--jh-blue-700); transform: translateY(-2px); }

/* === Cities === */
.jh2-cities-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; }
.jh2-cities-header h2 { font-size: 2.25rem; font-weight: 700; color: var(--jh-gray-900); margin-bottom: 1rem; }
.jh2-cities-header p { color: var(--jh-gray-500); font-weight: 500; }
.jh2-cities-link { color: var(--jh-blue-600); font-weight: 700; display: flex; align-items: center; }
.jh2-cities-link:hover { text-decoration: underline; }

.jh2-cities-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .jh2-cities-grid { grid-template-columns: repeat(3, 1fr); } }

.jh2-city-card {
  position: relative; height: 350px; border-radius: 40px; overflow: hidden;
  cursor: pointer; box-shadow: var(--jh-shadow-xl); transition: var(--jh-t);
}
.jh2-city-card:hover { transform: translateY(-10px); }
.jh2-city-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.jh2-city-card:hover img { transform: scale(1.1); }
.jh2-city-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2), transparent); }
.jh2-city-card__content { position: absolute; bottom: 2rem; left: 2rem; color: white; }
.jh2-city-card__content h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; letter-spacing: -0.025em; }
.jh2-city-card__content p { font-size: 0.875rem; opacity: 0.8; font-weight: 500; }


/* === Testimonials === */
.jh2-testimonials { background: var(--jh-white); padding: 6rem 0; }
.jh2-testi-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .jh2-testi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jh2-testi-grid { grid-template-columns: repeat(3, 1fr); } }

.jh2-testi-card {
  background: var(--jh-gray-50); padding: 2rem; border-radius: 40px;
  border: 1px solid var(--jh-gray-100); display: flex; flex-direction: column;
  transition: var(--jh-t);
}
.jh2-testi-card:hover { transform: translateY(-10px); }
.jh2-testi-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.jh2-testi-head img { width: 3.5rem; height: 3.5rem; border-radius: 1rem; object-fit: cover; filter: grayscale(1); transition: var(--jh-t); box-shadow: var(--jh-shadow); }
.jh2-testi-card:hover .jh2-testi-head img { filter: grayscale(0); }
.jh2-testi-info h4 { font-weight: 900; color: var(--jh-gray-900); font-size: 0.875rem; text-transform: uppercase; margin: 0; }
.jh2-testi-info p { font-size: 0.625rem; font-weight: 900; color: var(--jh-blue-600); text-transform: uppercase; letter-spacing: 0.1em; margin: 0; }
.jh2-testi-text { color: var(--jh-gray-600); font-weight: 500; font-style: italic; font-size: 0.875rem; line-height: 1.625; flex: 1; }
.jh2-testi-stars { display: flex; gap: 0.25rem; color: var(--jh-amber-400); margin-top: 1.5rem; }
.jh2-testi-stars svg { width: 1rem; height: 1rem; fill: currentColor; }

/* === Newsletter === */
.jh2-newsletter { padding: 6rem 0; background: transparent; position: relative; overflow: hidden; }
.jh2-news-blob { position: absolute; top: 0; right: 0; width: 16rem; height: 16rem; background: var(--jh-blue-50); border-radius: 9999px; filter: blur(24px); transform: translate(50%, -50%); z-index: 0; }
.jh2-news-box {
  background: var(--jh-blue-600); border-radius: 50px; padding: 3rem; text-align: center; color: white;
  position: relative; overflow: hidden; box-shadow: var(--jh-shadow-blue); max-width: 56rem; margin: 0 auto;
}
@media (min-width: 1024px) { .jh2-news-box { padding: 5rem; } }
.jh2-news-box h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 1.5rem; position: relative; z-index: 10; }
.jh2-news-box p { color: var(--jh-blue-100); font-size: 1.125rem; margin-bottom: 2.5rem; opacity: 0.8; position: relative; z-index: 10; }
.jh2-news-form {
  display: flex; flex-direction: column; gap: 0.75rem; background: white; padding: 0.5rem;
  border-radius: 1rem; box-shadow: var(--jh-shadow-lg); position: relative; z-index: 10;
}
@media (min-width: 640px) { .jh2-news-form { flex-direction: row; } }
.jh2-news-form input { flex: 1; padding: 1rem 1.5rem; color: var(--jh-gray-900); font-weight: 500; }
.jh2-news-form button { background: var(--jh-gray-900); color: white; padding: 1rem 2.5rem; border-radius: 0.75rem; font-weight: 700; transition: var(--jh-t); }
.jh2-news-form button:hover { background: black; }
.jh2-news-box-blob { position: absolute; bottom: -5rem; right: -5rem; width: 16rem; height: 16rem; background: rgba(255,255,255,0.1); border-radius: 9999px; }

/* === Footer === */
.jh2-footer { background: var(--jh-gray-900); border-top: 3px solid var(--jh-blue-600); padding: 4rem 0 1.5rem; }
.jh2-footer-grid { display: grid; gap: 2rem; margin-bottom: 3rem; }
@media (min-width: 1024px) { .jh2-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.jh2-footer-brand { margin-bottom: 1.5rem; }
.jh2-footer-contact h4 { font-weight: 700; color: var(--jh-white); margin-bottom: 0.5rem; }
.jh2-footer-phone { color: var(--jh-blue-500); font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.jh2-footer-address { color: var(--jh-gray-400); line-height: 1.625; max-width: 20rem; }

.jh2-footer-col h4 { font-weight: 700; color: var(--jh-white); font-size: 1.125rem; margin-bottom: 1.5rem; }
.jh2-footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.jh2-footer-col a { color: var(--jh-gray-400); transition: var(--jh-t); }
.jh2-footer-col a:hover { color: var(--jh-blue-400); }

.jh2-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; }
@media (min-width: 768px) { .jh2-footer-bottom { flex-direction: row; } }
.jh2-footer-copy { color: var(--jh-gray-400); font-size: 0.875rem; }
.jh2-footer-social { display: flex; gap: 1.5rem; }
.jh2-footer-social a { color: var(--jh-gray-400); transition: var(--jh-t); }
.jh2-footer-social a:hover { color: var(--jh-blue-400); }

/* === Mobile Menu === */
.jh2-mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--jh-white);
  box-shadow: var(--jh-shadow-xl); border-top: 1px solid var(--jh-gray-100);
  padding: 1.5rem 0; display: none;
}
.jh2-mobile-menu.is-open { display: block; }
.jh2-mobile-nav { display: flex; flex-direction: column; gap: 1rem; padding: 0 1.5rem; }
.jh2-mobile-nav a { font-weight: 700; color: var(--jh-gray-500); }
.jh2-mobile-nav a.is-active { color: var(--jh-blue-600); }
.jh2-mobile-actions { margin-top: 1rem; padding: 1rem 1.5rem 0; border-top: 1px solid var(--jh-gray-100); display: flex; flex-direction: column; gap: 0.75rem; }
.jh2-mobile-btn-login { width: 100%; padding: 0.75rem; font-weight: 700; color: var(--jh-gray-900); border: 1px solid var(--jh-gray-100); border-radius: 0.5rem; text-align: center; }
.jh2-mobile-btn-post { width: 100%; padding: 0.75rem; font-weight: 700; background: var(--jh-amber-400); color: var(--jh-gray-900); border-radius: 0.5rem; text-align: center; box-shadow: var(--jh-shadow-sm); }
/* ============================================================
   PAGE OFFRES D'EMPLOI — REDESIGN
   ============================================================ */

/* Hero — dark gradient */
.jh2-jobs-hero {
  background: linear-gradient(135deg, #0f172a 0%, #00282a 55%, #095255 100%);
  padding: 6rem 1rem 4.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .jh2-jobs-hero { padding: 8rem 1rem 5rem; } }

.jh2-jobs-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(56,171,177,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.jh2-jobs-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--jh-blue-400), var(--jh-emerald-500), var(--jh-blue-600));
}

/* Eyebrow */
.jh2-jobs-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.375rem 1rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.8);
  text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 1.5rem;
}
.jh2-jobs-hero-eyebrow svg { width: 0.875rem; height: 0.875rem; color: #38abb1; flex-shrink: 0; }

/* Title */
.jh2-jobs-hero-text { max-width: 52rem; margin: 0 auto 2rem; }
.jh2-jobs-hero-text h1 {
  font-size: 2.5rem; font-weight: 900; color: #ffffff;
  margin-bottom: 1rem; line-height: 1.05; letter-spacing: -0.03em;
}
@media (min-width: 768px) { .jh2-jobs-hero-text h1 { font-size: 3.75rem; } }
.jh2-jobs-hero-text h1 span { color: #38abb1; }
.jh2-jobs-hero-text p { font-size: 1rem; color: rgba(255,255,255,0.6); font-weight: 500; }

.jh2-jobs-hero-stats {
  display: none; justify-content: center; align-items: center;
  gap: 0.5rem 2.5rem; flex-wrap: wrap; margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .jh2-jobs-hero-stats {
    display: flex;
  }
}
.jh2-jobs-hero-stats__item { text-align: center; }
.jh2-jobs-hero-stats__num { font-size: 1.375rem; font-weight: 900; color: #ffffff; line-height: 1; }
.jh2-jobs-hero-stats__lbl { font-size: 0.6875rem; font-weight: 600; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.25rem; }
.jh2-jobs-hero-stats__sep { width: 1px; height: 2rem; background: rgba(255,255,255,0.15); }

/* Search bar — on dark hero */
.jh2-jobs-search-bar {
  max-width: 56rem; margin: 0 auto;
  background: rgba(255,255,255,0.97);
  padding: 0.5rem; border-radius: 1.25rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
  position: relative; z-index: 10;
}
.jh2-jobs-search-form { display: flex; flex-direction: column; gap: 0; }
@media (min-width: 768px) { .jh2-jobs-search-form { flex-direction: row; align-items: stretch; } }
.jh2-jsf-field {
  display: flex; align-items: center; padding: 0.875rem 1.25rem; flex: 1;
  border-bottom: 1px solid var(--jh-gray-100);
}
@media (min-width: 768px) {
  .jh2-jsf-field { border-bottom: none; border-right: 1px solid var(--jh-gray-100); }
  .jh2-jsf-field--last { border-right: none; }
}
.jh2-jsf-field svg { color: var(--jh-blue-400); margin-right: 0.75rem; flex-shrink: 0; }
.jh2-jsf-field input, .jh2-jsf-field select {
  width: 100%; font-weight: 600; color: var(--jh-gray-900); font-size: 0.9375rem;
}
.jh2-jsf-field input::placeholder { color: var(--jh-gray-400); font-weight: 500; }
.jh2-jsf-btn {
  background: var(--jh-blue-600); color: white; font-weight: 700; font-size: 0.9375rem;
  padding: 1rem 2.25rem; border-radius: 0.875rem;
  transition: var(--jh-t); display: flex; justify-content: center; align-items: center;
  gap: 0.5rem; box-shadow: var(--jh-shadow-blue); border: none; cursor: pointer;
  white-space: nowrap;
}
.jh2-jsf-btn:hover { background: var(--jh-blue-700); transform: translateY(-1px); }
.jh2-jsf-btn svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

/* Results layout */
.jh2-jobs-container { margin-top: 3rem; padding-bottom: 4rem; }
.jh2-jobs-layout { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .jh2-jobs-layout { grid-template-columns: 280px 1fr; align-items: start; } }

/* Mobile filter toggle */
.jh2-jobs-sidebar-mobile-toggle { display: block; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .jh2-jobs-sidebar-mobile-toggle { display: none; } }
.jh2-jobs-sidebar-mobile-toggle button {
  width: 100%; background: var(--jh-white); border: 1px solid var(--jh-gray-200);
  padding: 0.875rem 1.25rem; border-radius: 0.875rem; font-weight: 700;
  font-size: 0.9375rem; color: var(--jh-gray-700);
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  box-shadow: var(--jh-shadow-sm); cursor: pointer; transition: var(--jh-t);
}
.jh2-jobs-sidebar-mobile-toggle button:hover { border-color: var(--jh-blue-200); color: var(--jh-blue-600); }

/* Sidebar — filtre */
.jh2-jobs-filter-form {
  display: none; background: var(--jh-white);
  border-radius: 1.25rem; border: 1px solid var(--jh-gray-100);
  box-shadow: var(--jh-shadow-sm); overflow: hidden;
  position: sticky; top: 6rem;
}
@media (min-width: 1024px) { .jh2-jobs-filter-form { display: block; } }
.jh2-jobs-filter-form.is-open {
  display: block; position: fixed; inset: 0; z-index: 100;
  border-radius: 0; overflow-y: auto;
}
.jh2-filter-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--jh-gray-100);
  background: var(--jh-gray-50);
}
.jh2-filter-header h2 { font-size: 0.9375rem; font-weight: 800; color: var(--jh-gray-900); display: flex; align-items: center; gap: 0.5rem; }
.jh2-filter-header h2 svg { width: 1rem; height: 1rem; color: var(--jh-blue-600); }
.jh2-filter-reset { font-size: 0.75rem; font-weight: 700; color: var(--jh-gray-400); text-decoration: none; background: none; border: none; cursor: pointer; transition: color var(--jh-t); }
.jh2-filter-reset:hover { color: var(--jh-blue-600); }
.jh2-filter-close { font-size: 0.875rem; font-weight: 700; color: var(--jh-blue-600); background: none; border: none; cursor: pointer; }
@media (min-width: 1024px) { .jh2-filter-close { display: none; } }

.jh2-filter-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 2rem; }
.jh2-filter-group h3 {
  font-size: 0.75rem; font-weight: 800; color: var(--jh-gray-400);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--jh-gray-100);
}
.jh2-filter-options { display: flex; flex-direction: column; gap: 0.625rem; }
.jh2-filter-label { display: flex; align-items: center; cursor: pointer; gap: 0.75rem; padding: 0.375rem 0.5rem; border-radius: 0.5rem; transition: background var(--jh-t); }
.jh2-filter-label:hover { background: var(--jh-blue-50); }
.jh2-filter-checkbox-wrap { display: flex; align-items: center; flex-shrink: 0; }
.jh2-filter-checkbox-wrap input[type="checkbox"] {
  width: 1.125rem; height: 1.125rem; border-radius: 0.3rem;
  border: 1.5px solid var(--jh-gray-300); cursor: pointer;
  accent-color: var(--jh-blue-600);
}
.jh2-filter-label span { font-size: 0.875rem; font-weight: 500; color: var(--jh-gray-600); transition: color var(--jh-t); flex: 1; }
.jh2-filter-label:hover span, .jh2-filter-label:has(input:checked) span { color: var(--jh-gray-900); font-weight: 600; }

/* Results header */
.jh2-jobs-main-header {
  display: flex; flex-direction: column; gap: 0.75rem;
  margin-bottom: 1.5rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--jh-gray-100);
}
@media (min-width: 768px) { .jh2-jobs-main-header { flex-direction: row; align-items: center; justify-content: space-between; } }
.jh2-jobs-count { font-weight: 700; color: var(--jh-gray-900); font-size: 0.9375rem; }
.jh2-jobs-count span { color: var(--jh-blue-600); }
.jh2-jobs-view-toggles { display: flex; align-items: center; gap: 0.75rem; }
.jh2-jvt-inner { display: flex; background: var(--jh-white); border-radius: 0.75rem; padding: 0.25rem; border: 1px solid var(--jh-gray-100); box-shadow: var(--jh-shadow-sm); }
.jh2-view-btn { padding: 0.5rem; border-radius: 0.5rem; color: var(--jh-gray-400); transition: var(--jh-t); cursor: pointer; }
.jh2-view-btn.is-active { background: var(--jh-blue-50); color: var(--jh-blue-600); }
.jh2-view-btn:hover:not(.is-active) { color: var(--jh-gray-600); }

/* Grid Layout */
/* Liste d'offres : une colonne, cartes en pleine largeur (voir .jh2-job-card) */
.jh2-jobs-grid-layout { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1280px) { .jh2-jobs-grid-layout { grid-template-columns: repeat(3, 1fr); } }

/* List Layout */
.jh2-jobs-list-layout { display: flex; flex-direction: column; gap: 1rem; }

/* Job Card Layout Override for Archive */
.jh2-job-card-link { display: block; text-decoration: none; color: inherit; height: 100%; }

/* List View Override */
.jh2-jobs-list-layout .jh2-job-card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem 2rem;
  gap: 2rem;
}
.jh2-jobs-list-layout .jh2-job-card__top-badges {
  display: none;
}
.jh2-jobs-list-layout .jh2-job-card__main-body {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 1.5rem;
  flex: 1;
}
.jh2-jobs-list-layout .jh2-job-card__core-content {
  align-items: flex-start;
}
.jh2-jobs-list-layout .jh2-job-card__company-name {
  display: none;
}
.jh2-jobs-list-layout .jh2-job-card__meta-company {
  display: inline-block;
}
.jh2-jobs-list-layout .jh2-job-card__job-title {
  justify-content: flex-start;
  font-size: 1.25rem;
}
.jh2-jobs-list-layout .jh2-job-card__meta-info {
  justify-content: flex-start;
  margin-top: 0.25rem;
}
.jh2-jobs-list-layout .jh2-job-card__bottom-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.jh2-jobs-list-layout .jh2-job-card__action-footer {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  width: auto;
  flex-shrink: 0;
}
.jh2-jobs-list-layout .jh2-btn-postuler {
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
}

/* Mobile responsiveness for List View */
@media (max-width: 767px) {
  .jh2-jobs-list-layout .jh2-job-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 1.25rem;
  }
  .jh2-jobs-list-layout .jh2-job-card__main-body {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 1rem;
  }
  .jh2-jobs-list-layout .jh2-job-card__core-content {
    align-items: flex-start;
  }
  .jh2-jobs-list-layout .jh2-job-card__job-title {
    justify-content: flex-start;
  }
  .jh2-jobs-list-layout .jh2-job-card__meta-info {
    justify-content: flex-start;
  }
  .jh2-jobs-list-layout .jh2-job-card__action-footer {
    border-top: 1px solid var(--jh-gray-100);
    padding-top: 1rem;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }
  .jh2-jobs-list-layout .jh2-job-card__company-name {
    display: inline-block;
  }
  .jh2-jobs-list-layout .jh2-job-card__meta-company {
    display: none;
  }
}

.jh2-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 4rem; }
.jh2-page-link { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; font-weight: 700; color: var(--jh-gray-400); background: var(--jh-white); border: 1px solid var(--jh-gray-100); transition: var(--jh-t); text-decoration: none; }
.jh2-page-link.is-active { background: var(--jh-blue-600); color: white; border-color: var(--jh-blue-600); box-shadow: var(--jh-shadow-blue); }

.jh2-jobs-empty { text-align: center; padding: 5rem 0; color: var(--jh-gray-400); }
.jh2-jobs-empty svg { margin: 0 auto 1rem; color: var(--jh-gray-200); }
.jh2-jobs-empty-title { font-size: 1.125rem; font-weight: 700; color: var(--jh-gray-900); margin-bottom: 0.5rem; }
.jh2-jobs-empty-desc { font-size: 0.875rem; }

/* Single Job */

.jh2-single-job { max-width: 64rem; margin: 0 auto; padding: 3rem 1rem; }
.jh2-back-link { margin-bottom: 2rem; font-size: 0.875rem; font-weight: 700; }
.jh2-back-link a { color: var(--jh-gray-500); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.2s; }
.jh2-back-link a:hover { color: var(--jh-blue-600); }

.jh2-single-job__header { margin-bottom: 3rem; }
.jh2-single-job__header h1 { font-size: 2.5rem; font-weight: 900; color: var(--jh-gray-900); margin-bottom: 1rem; line-height: 1.2; }
@media (min-width: 768px) { .jh2-single-job__header h1 { font-size: 3rem; } }
.jh2-single-job__chips { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 1rem; font-weight: 600; color: var(--jh-gray-500); }

/* ── Liste des entreprises : disposition en lignes ──────────────────────────
   Une organisation par ligne : logo rond a gauche, nom + localisation au
   centre, nombre d'offres a droite. Plus lisible qu'une grille de cartes
   quand on parcourt une longue liste, et plus leger sur mobile. */

/* Largeur limitee : au-dela d'environ 46rem, l'oeil perd le lien entre le nom
   a gauche et le nombre d'offres a droite. */
.jh2-org-list { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; }

.jh2-org-row {
  display: flex; align-items: center; gap: 1.25rem;
  background: var(--jh-white);
  border: 1px solid var(--jh-gray-100);
  border-radius: 16px; /* jeton rounded.lg de DESIGN.md */
  padding: 1.75rem 1.5rem;
  min-height: 6.5rem;
  text-decoration: none;
  transition: border-color var(--jh-t), box-shadow var(--jh-t), transform var(--jh-t);
}
.jh2-org-row:hover,
.jh2-org-row:focus-visible {
  border-color: var(--jh-blue-200);
  box-shadow: var(--jh-shadow-md);
  transform: translateY(-1px);
}

.jh2-org-row__logo {
  width: 4rem; height: 4rem; flex-shrink: 0;
  border-radius: 9999px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.25rem; line-height: 1;
}
.jh2-org-row__logo img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; }

.jh2-org-row__body { flex: 1 1 auto; min-width: 0; }
/* Les noms d'organisations haitiennes sont souvent tres longs (ministeres,
   unites de coordination) : on autorise deux lignes plutot que de tronquer
   des le premier mot, la carte ayant desormais la hauteur necessaire. */
.jh2-org-row__name {
  font-size: 1.125rem; font-weight: 700; color: var(--jh-gray-900);
  margin: 0 0 0.375rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-wrap: balance;
}
/* Secteur d'activite : information reellement discriminante entre deux
   organisations, contrairement a la ville (presque toujours "Haiti"). */
.jh2-org-row__sector {
  display: block;
  font-size: 0.875rem; font-weight: 500; color: var(--jh-gray-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.jh2-org-row__count {
  flex-shrink: 0;
  background: var(--jh-blue-50); color: var(--jh-blue-600);
  font-size: 0.75rem; font-weight: 800; /* jeton label de DESIGN.md */
  padding: 0.5rem 1rem; border-radius: 9999px;
  white-space: nowrap;
}
.jh2-org-row__count--empty { background: var(--jh-gray-50); color: var(--jh-gray-500); }

@media (max-width: 640px) {
  .jh2-org-row { flex-wrap: wrap; gap: 1rem; padding: 1rem; }
  .jh2-org-row__logo { width: 3rem; height: 3rem; font-size: 1rem; }
  .jh2-org-row__body { flex: 1 1 60%; }
  .jh2-org-row__count { margin-left: 4rem; }
}

/* Pagination de la liste des entreprises */
.jh2-org-pagination {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: 2.5rem; max-width: 46rem;
}
.jh2-org-pagination__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; padding: 0.5rem 0.875rem;
  background: var(--jh-white); border: 1px solid var(--jh-gray-100);
  border-radius: 12px; /* jeton rounded.md */
  font-size: 0.875rem; font-weight: 700; color: var(--jh-gray-600);
  text-decoration: none; transition: border-color var(--jh-t), color var(--jh-t), background var(--jh-t);
}
.jh2-org-pagination__link:hover,
.jh2-org-pagination__link:focus-visible { border-color: var(--jh-blue-200); color: var(--jh-blue-600); }
.jh2-org-pagination__link.is-current {
  background: var(--jh-blue-600); border-color: var(--jh-blue-600); color: var(--jh-white);
}
.jh2-org-pagination__gap { color: var(--jh-gray-400); padding: 0 0.25rem; }

@media (prefers-reduced-motion: reduce) {
  .jh2-org-row { transition: none; }
  .jh2-org-row:hover { transform: none; }
  .jh2-org-pagination__link { transition: none; }
}

/* ── Article de blog : lien retour + ligne meta ─────────────────────────────
   La ligne meta n'utilise plus .jh2-single-job__chips (concue pour les offres
   d'emploi : 1rem / 600, trop lourde, elle concurrencait le titre et donnait
   le meme poids visuel a la categorie et a la date). Ici : categorie en
   pastille cliquable (jeton button-ghost du DESIGN.md), date et duree de
   lecture en texte secondaire lisible (gray-500 = 4.8:1 sur blanc). */

.jh2-post-back { margin-bottom: 2rem; font-size: 0.875rem; font-weight: 700; }
.jh2-post-back a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--jh-gray-500); text-decoration: none; transition: color var(--jh-t); }
.jh2-post-back a:hover { color: var(--jh-blue-600); }
.jh2-post-back svg { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.jh2-post-back a:hover svg { transform: translateX(-3px); }

.jh2-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1.25rem; }
.jh2-post-meta__cat {
  display: inline-flex; align-items: center;
  background: var(--jh-blue-50); color: var(--jh-blue-600);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.03em;
  padding: 0.4375rem 0.9375rem; border-radius: 9999px;
  text-decoration: none; transition: background var(--jh-t), color var(--jh-t);
}
.jh2-post-meta__cat:hover, .jh2-post-meta__cat:focus-visible { background: var(--jh-blue-600); color: #fff; }
.jh2-post-meta__info { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; font-weight: 500; color: var(--jh-gray-500); }
.jh2-post-meta__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--jh-gray-300); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .jh2-post-back svg { transition: none; }
  .jh2-post-back a:hover svg { transform: none; }
}

.jh2-single-job__layout { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .jh2-single-job__layout { grid-template-columns: 2fr 1fr; } }

.jh2-single-job__main { display: flex; flex-direction: column; gap: 2.5rem; }
.jh2-single-job__thumb { border-radius: 1.5rem; overflow: hidden; }
.jh2-single-job__thumb img { width: 100%; height: auto; display: block; }

.jh2-single-job__desc h2 { font-size: 1.5rem; font-weight: 800; color: var(--jh-gray-900); margin-bottom: 1.5rem; }
.jh2-desc-section { margin-bottom: 2rem; }
.jh2-desc-section h3 { font-size: 1.25rem; font-weight: 700; color: var(--jh-gray-800); margin-bottom: 1rem; }
.jh2-entry { color: var(--jh-gray-600); font-size: 1rem; line-height: 1.7; }
.jh2-entry p { margin-bottom: 1rem; }
.jh2-entry ul { margin-bottom: 1rem; padding-left: 1.5rem; list-style-type: disc; }
.jh2-entry li { margin-bottom: 0.5rem; }

.jh2-single-job__sidebar { display: flex; flex-direction: column; gap: 2rem; }
.jh2-company-mark--xl { width: 6rem; height: 6rem; background: var(--jh-white); border-radius: 1.5rem; padding: 1rem; box-shadow: var(--jh-shadow-md); border: 1px solid var(--jh-gray-100); display: flex; align-items: center; justify-content: center; }
.jh2-company-mark--xl img { width: 100%; height: 100%; object-fit: contain; }

.jh2-key-facts { background: var(--jh-gray-50); border-radius: 1.5rem; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; border: 1px solid var(--jh-gray-100); }
.jh2-key-facts div { display: flex; flex-direction: column; gap: 0.25rem; }
.jh2-key-facts span { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--jh-gray-400); }
.jh2-key-facts strong { font-size: 1rem; font-weight: 700; color: var(--jh-gray-900); }

.jh2-btn--full { width: 100%; padding: 1.25rem; font-size: 1.125rem; }
.jh2-apply-note { font-size: 0.875rem; color: var(--jh-gray-500); text-align: center; font-style: italic; }

/* ============================================================
   HOMEPAGE NEW DESIGN SECTIONS
   ============================================================ */

/* === Hero === */
.jh2-hero {
  position: relative; min-height: 380px; display: flex; align-items: center;
  padding: 5rem 0 6rem; overflow: hidden; background: #111827;
  width: 100vw; margin-left: calc(50% - 50vw); box-sizing: border-box;
}
.jh2-hero__bg {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; overflow: hidden;
}
.jh2-hero__bg img {
  position: absolute; top: 0; left: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; opacity: 0.45;
  filter: contrast(1.2) brightness(0.75);
  max-width: none !important; transform: none;
}
.jh2-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,40,42,0.6), rgba(17,24,39,0.4), #111827);
}
.jh2-hero__particles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; overflow: hidden;
}
.jh2-particle {
  position: absolute; border-radius: 50%; background: #38abb1; pointer-events: none;
  animation: jh2FloatParticle linear infinite;
}
@keyframes jh2FloatParticle {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(15px,-20px) scale(1.5); }
  100% { transform: translate(0,0) scale(1); }
}
.jh2-hero__inner {
  position: relative; z-index: 2; max-width: var(--jh-w); margin: 0 auto; padding: 0 1.5rem; width: 100%;
}
.jh2-hero__content { max-width: 56rem; margin: 0 auto; text-align: center; animation: jh2FadeUp 0.8s ease-out forwards; }
@keyframes jh2FadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jh2-hero__pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.875rem; background: rgba(12,100,104,0.2);
  backdrop-filter: blur(12px); border-radius: 9999px; margin-bottom: 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
}
.jh2-hero__pill svg { width: 0.75rem; height: 0.75rem; color: #7bc6ca; }
.jh2-hero__pill span { font-size: 0.5625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; color: #acd7d9; }
.jh2-hero__title {
  font-size: clamp(2.25rem, 5.5vw, 4rem); font-weight: 900; color: #fff;
  line-height: 1.08; margin-bottom: 1rem; letter-spacing: -0.03em; text-wrap: balance;
}
.jh2-hero__title em { color: #38abb1; font-style: normal; }
.jh2-hero__sub {
  font-size: 1rem; color: rgba(255,255,255,0.82); font-weight: 500;
  line-height: 1.5; margin-bottom: 2rem; max-width: 34rem; margin-left: auto; margin-right: auto;
}
.jh2-hero__search {
  background: rgba(255,255,255,0.08); backdrop-filter: blur(20px);
  padding: 0.375rem; border-radius: 28px; border: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; gap: 0.375rem; box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}
@media (min-width: 1024px) {
  .jh2-hero__search { flex-direction: row; align-items: stretch; }
}
.jh2-hero__search-field {
  flex: 1; display: flex; align-items: center; padding: 1rem 1.5rem;
}
.jh2-hero__search-field svg { width: 1.25rem; height: 1.25rem; color: #38abb1; flex-shrink: 0; margin-right: 1rem; }
.jh2-hero__search-field input {
  flex: 1; background: transparent; outline: none; color: #fff;
  font-weight: 900; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.jh2-hero__search-field input::placeholder { color: rgba(172,215,217,0.35); }
.jh2-hero__search-divider { width: 1px; background: rgba(255,255,255,0.1); display: none; }
@media (min-width: 1024px) { .jh2-hero__search-divider { display: block; } }
.jh2-hero__search-btn {
  background: #0c6468; color: #fff; padding: 1.25rem 3rem; border-radius: 24px;
  font-weight: 900; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em;
  border: none; cursor: pointer; transition: background var(--jh-t), transform 0.1s;
  box-shadow: 0 20px 30px rgba(12,100,104,0.35);
}
.jh2-hero__search-btn:hover { background: #228a8f; }
.jh2-hero__search-btn:active { transform: scale(0.97); }
.jh2-hero__cta-row { display: flex; justify-content: center; margin-top: 1.75rem; }
.jh2-hero__cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: rgba(255,255,255,0.08); color: #fff;
  border: 1.5px solid rgba(172,215,217,0.45);
  padding: 0.95rem 2rem; border-radius: 24px;
  font-weight: 900; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background var(--jh-t), border-color var(--jh-t), transform 0.1s, box-shadow var(--jh-t);
}
.jh2-hero__cta:hover {
  background: #0c6468; border-color: #0c6468; transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(12,100,104,0.35);
}
.jh2-hero__cta:active { transform: scale(0.97); }
.jh2-hero__cta svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.jh2-hero__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 3rem; }
.jh2-hero__tags a {
  font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em;
  color: rgba(172,215,217,0.35); transition: color var(--jh-t);
}
.jh2-hero__tags a:hover { color: #38abb1; }
.jh2-hero__wave { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2; line-height: 0; }
.jh2-hero__wave svg { display: block; width: 100%; height: 3rem; fill: var(--jh-bg); }
@media (min-width: 768px) { .jh2-hero__wave svg { height: 5rem; } }

/* === Homepage Featured Section v5 === */
.jh2-hp-featured-v5 { position: relative; padding: 5rem 0; background: transparent; overflow: hidden; }
.jh2-hp-featured-v5__blob1 { position: absolute; top: 25%; left: -5rem; width: 20rem; height: 20rem; background: rgba(12,100,104,0.05); border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; }
.jh2-hp-featured-v5__blob2 { position: absolute; bottom: 25%; right: -5rem; width: 20rem; height: 20rem; background: rgba(16,185,129,0.05); border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; }
.jh2-hp-featured-v5__header { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .jh2-hp-featured-v5__header { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.jh2-hp-featured-v5__title-box { text-align: left; }
.jh2-hp-featured-v5__title-box h2 { font-size: 1.5rem; font-weight: 900; color: var(--jh-gray-900); text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 0.5rem; }
.jh2-hp-featured-v5__title-box p { font-size: 0.625rem; font-weight: 700; color: var(--jh-gray-400); text-transform: uppercase; letter-spacing: 0.15em; margin: 0; }
.jh2-hp-featured-v5__btn { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; font-weight: 900; color: var(--jh-blue-600); text-transform: uppercase; letter-spacing: 0.2em; background: var(--jh-white); padding: 0.75rem 1.5rem; border-radius: 0.75rem; border: 1px solid var(--jh-blue-100); box-shadow: var(--jh-shadow-sm); transition: all var(--jh-t); white-space: nowrap; }
.jh2-hp-featured-v5__btn:hover { background: var(--jh-blue-50); }
.jh2-hp-featured-v5__btn svg { width: 1rem; height: 1rem; transition: transform var(--jh-t); }
.jh2-hp-featured-v5__btn:hover svg { transform: translateX(4px); }
.jh2-hp-featured-v5__grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .jh2-hp-featured-v5__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jh2-hp-featured-v5__grid { grid-template-columns: repeat(3, 1fr); } }

.jh2-hp-job-card-v5 { background: var(--jh-white); border-radius: 1.5rem; padding: 1.5rem; border: 1px solid var(--jh-gray-100); box-shadow: var(--jh-shadow-sm); position: relative; cursor: pointer; transition: all var(--jh-t); overflow: hidden; }
.jh2-hp-job-card-v5:hover { border-color: var(--jh-blue-100); box-shadow: 0 20px 25px -5px rgba(0,40,42,0.05); transform: translateY(-4px) scale(1.01); }
.jh2-hp-job-card-v5__link { position: absolute; inset: 0; z-index: 20; }
.jh2-hp-job-card-v5__deco { position: absolute; top: 0; right: 0; width: 6rem; height: 6rem; background: linear-gradient(to bottom left, rgba(227,246,247,0.5), transparent); border-bottom-left-radius: 9999px; opacity: 0; transition: opacity var(--jh-t); z-index: 0; }
.jh2-hp-job-card-v5:hover .jh2-hp-job-card-v5__deco { opacity: 1; }
.jh2-hp-job-card-v5__top { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; position: relative; z-index: 10; }
.jh2-hp-job-card-v5__logo { width: 3.5rem; height: 3.5rem; border-radius: 1rem; border: 1px solid var(--jh-gray-50); background: var(--jh-white); display: flex; align-items: center; justify-content: center; padding: 0.5rem; box-shadow: var(--jh-shadow-sm); transition: box-shadow var(--jh-t); flex-shrink: 0; }
.jh2-hp-job-card-v5:hover .jh2-hp-job-card-v5__logo { box-shadow: var(--jh-shadow-md); }
.jh2-hp-job-card-v5__logo img { width: 100%; height: 100%; object-fit: contain; }
.jh2-hp-job-card-v5__info { flex: 1; }
.jh2-hp-job-card-v5__company { font-size: 0.75rem; font-weight: 700; color: var(--jh-gray-500); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.25rem; }
.jh2-hp-job-card-v5__company svg { width: 0.75rem; height: 0.75rem; color: var(--jh-blue-500); }
.jh2-hp-job-card-v5__title { font-size: 1.125rem; font-weight: 900; color: var(--jh-gray-900); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.25; transition: color var(--jh-t); margin: 0; }
.jh2-hp-job-card-v5:hover .jh2-hp-job-card-v5__title { color: var(--jh-blue-600); }
.jh2-hp-job-card-v5__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; position: relative; z-index: 10; }
.jh2-badge-gray-v5 { padding: 0.25rem 0.75rem; background: var(--jh-gray-50); color: var(--jh-gray-600); border-radius: 0.5rem; font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; }
.jh2-badge-blue-v5 { padding: 0.25rem 0.75rem; background: var(--jh-blue-50); color: var(--jh-blue-700); border-radius: 0.5rem; font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; display: flex; align-items: center; gap: 0.25rem; }
.jh2-badge-blue-v5 svg { width: 0.75rem; height: 0.75rem; }
.jh2-hp-job-card-v5__footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--jh-gray-50); position: relative; z-index: 10; }
.jh2-hp-job-card-v5__loc { display: flex; align-items: center; font-size: 0.75rem; font-weight: 700; color: var(--jh-gray-400); text-transform: uppercase; letter-spacing: 0.1em; }
.jh2-hp-job-card-v5__loc svg { width: 0.75rem; height: 0.75rem; margin-right: 0.25rem; }
.jh2-hp-job-card-v5__date { font-size: 0.625rem; font-weight: 700; color: var(--jh-gray-300); text-transform: uppercase; letter-spacing: 0.15em; }

/* === Featured Jobs: slider === */
.jh2-hp-featured-v5__carousel { display: flex; gap: 1.5rem; overflow-x: auto; padding: 0.25rem 0.25rem 1rem; scroll-snap-type: x mandatory; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; scroll-behavior: smooth; }
.jh2-hp-featured-v5__carousel::-webkit-scrollbar { display: none; }

.jh2-hp-slide-card { flex-shrink: 0; width: 300px; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--jh-white); border-radius: 1.5rem; padding: 1.75rem; border: 1px solid var(--jh-gray-100); box-shadow: var(--jh-shadow-sm); text-decoration: none; transition: all var(--jh-t); }
@media (min-width: 640px) { .jh2-hp-slide-card { width: 340px; } }
.jh2-hp-slide-card:hover { box-shadow: var(--jh-shadow-lg); transform: translateY(-4px); border-color: var(--jh-blue-100); }
.jh2-hp-slide-card__top { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.25rem; }
.jh2-hp-slide-card__logo { width: 3rem; height: 3rem; border-radius: 0.875rem; border: 1px solid var(--jh-gray-50); background: var(--jh-white); display: flex; align-items: center; justify-content: center; padding: 0.4rem; box-shadow: var(--jh-shadow-sm); flex-shrink: 0; }
.jh2-hp-slide-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.jh2-hp-slide-card__company { font-size: 0.75rem; font-weight: 700; color: var(--jh-gray-500); margin: 0 0 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jh2-hp-slide-card__title { font-size: 1.0625rem; font-weight: 800; color: var(--jh-gray-900); line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jh2-hp-slide-card__excerpt { color: var(--jh-gray-500); font-size: 0.8125rem; line-height: 1.6; margin: 0 0 1.25rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jh2-hp-slide-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 1.1rem; border-top: 1px solid var(--jh-gray-50); }
.jh2-hp-slide-card__type { background: #e3f6f7; color: #0c6468; padding: 0.2rem 0.65rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; white-space: nowrap; }
.jh2-hp-slide-card__loc { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 600; color: var(--jh-gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jh2-hp-slide-card__loc svg { width: 0.8125rem; height: 0.8125rem; flex-shrink: 0; }

/* === Categories Section v5 === */
.jh2-hp-cats-v5 { position: relative; padding: 6rem 0; background: #fafbfc; overflow: hidden; }
.jh2-hp-cats-v5__deco { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.jh2-hp-cats-v5__deco-1 { position: absolute; top: 50%; left: 5%; width: 400px; height: 4px; background: linear-gradient(to right, rgba(12,100,104,0.2), transparent); transform: rotate(45deg); filter: blur(24px); }
.jh2-hp-cats-v5__deco-2 { position: absolute; bottom: 25%; right: 5%; width: 300px; height: 300px; border: 1px solid rgba(12,100,104,0.05); border-radius: 50%; }
.jh2-hp-cats-v5__deco-3 { position: absolute; top: 10%; right: 15%; width: 5rem; height: 5rem; background: rgba(16,185,129,0.1); border-radius: 50%; filter: blur(24px); }
.jh2-hp-cats-v5__deco-4 { position: absolute; top: 40%; left: 20%; width: 8rem; height: 8rem; border: 8px solid rgba(12,100,104,0.05); border-radius: 2.5rem; transform: rotate(12deg); }
.jh2-hp-cats-v5__header { text-align: center; margin-bottom: 4rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
.jh2-hp-cats-v5__header h2 { font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 900; color: var(--jh-gray-900); text-transform: uppercase; letter-spacing: -0.05em; line-height: 1; margin-bottom: 1rem; }
.jh2-hp-cats-v5__header h2 span { color: var(--jh-blue-600); }
.jh2-hp-cats-v5__header p { color: var(--jh-gray-500); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.625; margin: 0; }
.jh2-hp-cats-v5__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 768px) { .jh2-hp-cats-v5__grid { grid-template-columns: repeat(4, 1fr); } }
.jh2-hp-cats-v5__card { background: var(--jh-white); padding: 2rem; border-radius: 2.5rem; border: 1px solid rgba(243,244,246,0.6); text-align: center; cursor: pointer; position: relative; overflow: hidden; transition: all 0.5s ease; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.01); }
.jh2-hp-cats-v5__card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(0,40,42,0.05); }
.jh2-hp-cats-v5__card-bg { position: absolute; top: 0; right: 0; width: 6rem; height: 6rem; background: var(--jh-gray-50); border-bottom-left-radius: 9999px; z-index: 0; transition: background var(--jh-t); }
.jh2-hp-cats-v5__card:hover .jh2-hp-cats-v5__card-bg { background: var(--jh-blue-50); }
.jh2-hp-cats-v5__card-icon { width: 4rem; height: 4rem; background: rgba(227,246,247,0.5); border-radius: 1rem; display: flex; align-items: center; justify-content: center; color: var(--jh-blue-600); margin: 0 auto 1.5rem; position: relative; z-index: 10; transition: all 0.5s ease; }
.jh2-hp-cats-v5__card-icon svg { width: 2rem; height: 2rem; }
.jh2-hp-cats-v5__card:hover .jh2-hp-cats-v5__card-icon { background: var(--jh-blue-600); color: var(--jh-white); }
.jh2-hp-cats-v5__card-content { position: relative; z-index: 10; }
.jh2-hp-cats-v5__card-content h3 { font-size: 1.125rem; font-weight: 900; color: var(--jh-gray-900); text-transform: uppercase; letter-spacing: -0.05em; font-style: italic; margin-bottom: 0.5rem; transition: color var(--jh-t); }
.jh2-hp-cats-v5__card:hover .jh2-hp-cats-v5__card-content h3 { color: var(--jh-blue-600); }
.jh2-hp-cats-v5__card-content p { font-size: 0.625rem; font-weight: 900; color: var(--jh-gray-400); text-transform: uppercase; letter-spacing: 0.1em; margin: 0; }
.jh2-hp-cats-v5__card::after { content: ''; position: absolute; inset: 0; border: 2px solid transparent; border-radius: 2.5rem; transition: all var(--jh-t); pointer-events: none; }
.jh2-hp-cats-v5__card:hover::after { border-color: rgba(12,100,104,0.1); }

/* === Companies Section v5 === */
.jh2-hp-companies-v5 { position: relative; padding: 6rem 0; background: transparent; overflow: hidden; }
.jh2-hp-companies-v5__bg-deco1 { position: absolute; top: 0; right: 0; width: 24rem; height: 24rem; background: rgba(12,100,104,0.05); border-radius: 50%; filter: blur(120px); transform: translateX(50%); z-index: 0; }
.jh2-hp-companies-v5__bg-deco2 { position: absolute; bottom: 0; left: 0; width: 18rem; height: 18rem; background: rgba(16,185,129,0.05); border-radius: 50%; filter: blur(100px); transform: translateX(-50%); z-index: 0; }
.jh2-hp-companies-v5__bg-line { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); width: 1200px; height: 1px; border-top: 1px dashed rgba(172,215,217,0.3); pointer-events: none; z-index: 0; }
.jh2-hp-companies-v5__header { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .jh2-hp-companies-v5__header { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.jh2-hp-companies-v5__eyebrow { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.jh2-hp-companies-v5__eyebrow-line { width: 2.5rem; height: 1px; background: var(--jh-blue-600); }
.jh2-hp-companies-v5__eyebrow span { font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.3em; color: var(--jh-blue-600); }
.jh2-hp-companies-v5__header h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--jh-gray-900); text-transform: uppercase; letter-spacing: -0.04em; font-style: italic; line-height: 1; margin: 0; }
.jh2-hp-companies-v5__header h2 span { color: var(--jh-blue-600); }
.jh2-hp-companies-v5__actions { display: flex; gap: 1rem; align-items: center; }
.jh2-hp-companies-v5__nav { display: flex; gap: 0.5rem; margin-right: 1rem; }
.jh2-hp-companies-v5__nav button { width: 3rem; height: 3rem; border-radius: 1rem; background: var(--jh-white); border: 1px solid var(--jh-gray-100); display: flex; align-items: center; justify-content: center; color: var(--jh-gray-400); cursor: pointer; transition: all var(--jh-t); box-shadow: var(--jh-shadow-sm); }
.jh2-hp-companies-v5__nav button:hover { color: var(--jh-blue-600); border-color: var(--jh-blue-200); }
.jh2-hp-companies-v5__nav button svg { width: 1.25rem; height: 1.25rem; }
.jh2-hp-companies-v5__btn { display: inline-flex; align-items: center; gap: 0.75rem; background: var(--jh-white); padding: 1rem 2rem; border-radius: 1rem; border: 1px solid var(--jh-gray-100); font-size: 0.625rem; font-weight: 900; color: var(--jh-gray-900); text-transform: uppercase; letter-spacing: 0.2em; transition: all var(--jh-t); box-shadow: var(--jh-shadow-sm); white-space: nowrap; }
.jh2-hp-companies-v5__btn:hover { border-color: var(--jh-blue-200); }
.jh2-hp-companies-v5__btn svg { width: 1rem; height: 1rem; transition: transform var(--jh-t); }
.jh2-hp-companies-v5__btn:hover svg { transform: translateX(4px); }
.jh2-hp-companies-v5__carousel { display: flex; gap: 2rem; overflow-x: auto; padding-bottom: 3rem; scroll-snap-type: x mandatory; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; scroll-behavior: smooth; }
.jh2-hp-companies-v5__carousel::-webkit-scrollbar { display: none; }
.jh2-hp-companies-v5__card { flex-shrink: 0; width: 20rem; background: var(--jh-white); padding: 2.5rem; border-radius: 3rem; border: 1px solid rgba(243,244,246,0.6); box-shadow: 0 20px 25px -5px rgba(0,40,42,0.05); cursor: pointer; overflow: hidden; position: relative; scroll-snap-align: center; transition: transform var(--jh-t); }
@media (min-width: 1024px) { .jh2-hp-companies-v5__card { width: 24rem; } }
.jh2-hp-companies-v5__card:hover { transform: translateY(-10px) scale(1.02); }
.jh2-hp-companies-v5__card-deco { position: absolute; top: 0; right: 0; width: 8rem; height: 8rem; background: var(--jh-gray-50); border-bottom-left-radius: 6rem; z-index: 0; transition: background var(--jh-t); }
.jh2-hp-companies-v5__card:hover .jh2-hp-companies-v5__card-deco { background: var(--jh-blue-50); }
.jh2-hp-companies-v5__card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2.5rem; position: relative; z-index: 10; }
.jh2-hp-companies-v5__logo { width: 5rem; height: 5rem; border-radius: 1.5rem; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); transition: transform var(--jh-t); }
.jh2-hp-companies-v5__card:hover .jh2-hp-companies-v5__logo { transform: rotate(6deg); }
.jh2-hp-companies-v5__badge { background: #ecfdf5; color: #059669; font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; padding: 0.5rem 1rem; border-radius: 9999px; }
.jh2-hp-companies-v5__card-content { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 1.5rem; }
.jh2-hp-companies-v5__card-content h3 { font-size: 1.5rem; font-weight: 900; color: var(--jh-gray-900); text-transform: uppercase; letter-spacing: -0.05em; font-style: italic; margin-bottom: 0.5rem; transition: color var(--jh-t); }
.jh2-hp-companies-v5__card:hover .jh2-hp-companies-v5__card-content h3 { color: var(--jh-blue-600); }
.jh2-hp-companies-v5__card-content span { font-size: 0.625rem; font-weight: 700; color: #38abb1; text-transform: uppercase; letter-spacing: 0.3em; display: block; }
.jh2-hp-companies-v5__card-content p { color: var(--jh-gray-400); font-size: 0.75rem; font-weight: 500; line-height: 1.625; font-style: italic; margin: 0; }
.jh2-hp-companies-v5__card-footer { padding-top: 1.5rem; border-top: 1px solid var(--jh-gray-50); display: flex; align-items: center; justify-content: space-between; }
.jh2-jobs-count { font-size: 0.625rem; font-weight: 900; color: var(--jh-gray-900); text-transform: uppercase; letter-spacing: 0.15em; }
.jh2-arrow-circle { width: 3rem; height: 3rem; border-radius: 50%; background: var(--jh-gray-50); display: flex; align-items: center; justify-content: center; color: var(--jh-gray-300); transition: all var(--jh-t); }
.jh2-hp-companies-v5__card:hover .jh2-arrow-circle { background: var(--jh-blue-600); color: var(--jh-white); }
.jh2-arrow-circle svg { width: 1.25rem; height: 1.25rem; transition: transform var(--jh-t); }
.jh2-hp-companies-v5__card:hover .jh2-arrow-circle svg { transform: translateX(4px); }

/* === Advantages Section === */
.jh2-hp-advantages {
  position: relative; padding: 8rem 0 6rem; background: var(--jh-white); overflow: hidden;
}
/* === Advantages Section v5 === */
.jh2-hp-adv-v5 { position: relative; padding: 8rem 0; background: var(--jh-white); overflow: hidden; }
.jh2-hp-adv-v5__wave { position: absolute; top: 0; left: 0; width: 100%; line-height: 0; z-index: 0; }
.jh2-hp-adv-v5__wave svg { display: block; width: 100%; height: 3rem; fill: #f5f7fc; }
@media (min-width: 768px) { .jh2-hp-adv-v5__wave svg { height: 6rem; } }
.jh2-hp-adv-v5__deco-1 { position: absolute; top: -6rem; right: -6rem; width: 24rem; height: 24rem; background: rgba(12,100,104,0.05); border-radius: 50%; filter: blur(100px); pointer-events: none; }
.jh2-hp-adv-v5__deco-2 { position: absolute; top: 50%; left: -12rem; width: 600px; height: 600px; border: 1px solid rgba(12,100,104,0.05); border-radius: 50%; pointer-events: none; }
.jh2-hp-adv-v5__header { text-align: center; max-width: 48rem; margin: 0 auto 5rem; }
.jh2-hp-adv-v5__pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; background: var(--jh-blue-50); border-radius: 9999px; margin-bottom: 1.5rem; }
.jh2-hp-adv-v5__pill svg { width: 0.75rem; height: 0.75rem; color: var(--jh-blue-600); }
.jh2-hp-adv-v5__pill span { font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em; color: var(--jh-blue-700); }
.jh2-hp-adv-v5__header h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 900; color: var(--jh-gray-900); text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.9; margin-bottom: 1.5rem; }
.jh2-hp-adv-v5__header h2 span { color: var(--jh-blue-600); }
.jh2-hp-adv-v5__header p { color: var(--jh-gray-500); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; max-width: 36rem; margin: 0 auto; }
.jh2-hp-adv-v5__grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .jh2-hp-adv-v5__grid { grid-template-columns: repeat(3, 1fr); } }
.jh2-hp-adv-v5__card { position: relative; background: var(--jh-white); padding: 2.5rem; border-radius: 2.5rem; border: 1px solid var(--jh-gray-100); box-shadow: 0 20px 25px -5px rgba(243,244,246,0.5); overflow: hidden; transition: all 0.5s ease; }
.jh2-hp-adv-v5__card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(12,100,104,0.1); }
.jh2-hp-adv-v5__card-deco { position: absolute; top: 0; right: 0; width: 8rem; height: 8rem; background: var(--jh-gray-50); border-bottom-left-radius: 6rem; z-index: 0; transition: background var(--jh-t); }
.jh2-hp-adv-v5__card:hover .jh2-hp-adv-v5__card-deco { background: var(--jh-blue-50); }
.jh2-hp-adv-v5__card-icon { width: 3.5rem; height: 3.5rem; background: var(--jh-gray-900); border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; position: relative; z-index: 10; box-shadow: var(--jh-shadow); transition: transform var(--jh-t); }
.jh2-hp-adv-v5__card-icon svg { width: 1.75rem; height: 1.75rem; color: var(--jh-white); }
.jh2-hp-adv-v5__card:hover .jh2-hp-adv-v5__card-icon { transform: scale(1.1); }
.jh2-hp-adv-v5__card h3 { font-size: 1.25rem; font-weight: 900; color: var(--jh-gray-900); text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 1rem; position: relative; z-index: 10; }
.jh2-hp-adv-v5__card p { font-size: 0.875rem; color: var(--jh-gray-500); font-weight: 500; line-height: 1.625; margin: 0; position: relative; z-index: 10; }
.jh2-hp-adv-v5__card-footer { display: flex; align-items: center; gap: 0.75rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--jh-gray-50); opacity: 0; transition: opacity var(--jh-t); position: relative; z-index: 10; }
.jh2-hp-adv-v5__card:hover .jh2-hp-adv-v5__card-footer { opacity: 1; }
.jh2-hp-adv-v5__arrow { width: 2rem; height: 2rem; border-radius: 50%; background: var(--jh-blue-50); display: flex; align-items: center; justify-content: center; color: var(--jh-blue-600); }
.jh2-hp-adv-v5__arrow svg { width: 1rem; height: 1rem; }
.jh2-hp-adv-v5__card-footer span { font-size: 0.625rem; font-weight: 900; color: var(--jh-blue-600); text-transform: uppercase; letter-spacing: 0.15em; }

/* === Newsletter === */
.jh2-hp-newsletter { padding: 8rem 0; background: var(--jh-white); position: relative; overflow: hidden; }
.jh2-hp-newsletter__box {
  background: var(--jh-blue-600); border-radius: 60px; padding: 3rem;
  color: var(--jh-white); position: relative; overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(12,100,104,0.3); text-align: left;
}
@media (min-width: 768px) { .jh2-hp-newsletter__box { padding: 6rem; } }
.jh2-hp-newsletter__grid { display: grid; gap: 4rem; align-items: center; position: relative; z-index: 10; }
@media (min-width: 1024px) { .jh2-hp-newsletter__grid { grid-template-columns: repeat(2, 1fr); } }
.jh2-hp-newsletter__content { display: flex; flex-direction: column; gap: 2rem; }
.jh2-hp-newsletter__eyebrow { display: flex; align-items: center; gap: 0.75rem; }
.jh2-hp-newsletter__eyebrow-line { width: 2.5rem; height: 2px; background: rgba(255,255,255,0.3); }
.jh2-hp-newsletter__eyebrow span { font-size: 0.625rem; font-weight: 900; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.4em; }
.jh2-hp-newsletter__box h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin: 0; text-wrap: balance; }
.jh2-hp-newsletter__box h2 em { color: #7bc6ca; font-style: normal; }
.jh2-hp-newsletter__box p { color: rgba(255,255,255,0.75); font-size: 0.9375rem; font-weight: 500; line-height: 1.6; margin: 0.75rem 0 0; max-width: 28rem; }
.jh2-hp-newsletter__form-wrapper { background: rgba(255,255,255,0.1); backdrop-filter: blur(24px); padding: 0.75rem; border-radius: 40px; border: 1px solid rgba(255,255,255,0.2); }
.jh2-hp-newsletter__form { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 640px) { .jh2-hp-newsletter__form { flex-direction: row; } }
.jh2-hp-newsletter__form input {
  flex: 1; padding: 1.5rem 2rem; border-radius: 30px; outline: none;
  color: var(--jh-white); font-weight: 900; border: none; background: transparent;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.jh2-hp-newsletter__form input::placeholder { color: rgba(255,255,255,0.3); }
.jh2-hp-newsletter__form button {
  background: #111827; color: var(--jh-white); padding: 1.5rem 2.5rem;
  border-radius: 30px; font-weight: 900; border: none; cursor: pointer;
  transition: transform var(--jh-t), box-shadow var(--jh-t); white-space: nowrap;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.jh2-hp-newsletter__form button:hover { transform: scale(1.02); }
.jh2-hp-newsletter__form button:active { transform: scale(0.95); }
.jh2-hp-newsletter__deco-1 {
  position: absolute; top: 0; right: 0; width: 600px; height: 600px;
  background: rgba(255,255,255,0.1); border-radius: 50%; filter: blur(120px);
  margin-right: -300px; margin-top: -300px; pointer-events: none;
}
.jh2-hp-newsletter__deco-2 {
  position: absolute; bottom: 0; left: 0; width: 256px; height: 256px;
  border: 40px solid rgba(255,255,255,0.05); border-radius: 50%;
  margin-left: -128px; margin-bottom: -128px; pointer-events: none;
}

/* === Homepage Blog === */
.jh2-section__header { text-align: center; margin-bottom: 3.5rem; }
.jh2-eyebrow {
  display: inline-block; font-size: 0.625rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.4em;
  color: var(--jh-blue-500); margin-bottom: 0.75rem;
}
.jh2-eyebrow--dark { color: var(--jh-blue-600); }
.jh2-section__title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 800;
  letter-spacing: -0.03em; color: var(--jh-gray-900); margin-bottom: 0.75rem;
}
.jh2-section__subtitle {
  color: var(--jh-gray-500); font-size: 0.9375rem; max-width: 32rem; margin: 0 auto;
}

.jh2-blog__grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px)  { .jh2-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jh2-blog__grid { grid-template-columns: repeat(3, 1fr); } }

.jh2-blog-card {
  display: flex; flex-direction: column;
  background: var(--jh-white); border-radius: 1.5rem; overflow: hidden;
  border: 1px solid var(--jh-gray-100); box-shadow: var(--jh-shadow-sm);
  transition: all var(--jh-t);
}
.jh2-blog-card:hover {
  border-color: var(--jh-blue-100); transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0,40,42,0.08);
}
.jh2-blog-card__image-wrap {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--jh-blue-50);
}
.jh2-blog-card__image-wrap--placeholder {
  display: flex; align-items: center; justify-content: center; font-size: 2.5rem;
}
.jh2-blog-card__image {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--jh-t);
}
.jh2-blog-card:hover .jh2-blog-card__image { transform: scale(1.05); }
.jh2-blog-card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.5rem; gap: 0.75rem;
}
.jh2-blog-card__cat {
  align-self: flex-start; font-size: 0.625rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--jh-blue-600); background: var(--jh-blue-50);
  padding: 0.375rem 0.75rem; border-radius: 9999px;
}
.jh2-blog-card__title { font-size: 1.125rem; font-weight: 700; line-height: 1.35; margin: 0; }
.jh2-blog-card__title a { color: var(--jh-gray-900); transition: color var(--jh-t); }
.jh2-blog-card__title a:hover { color: var(--jh-blue-600); }
.jh2-blog-card__excerpt { font-size: 0.875rem; color: var(--jh-gray-500); line-height: 1.6; margin: 0; }
.jh2-blog-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--jh-gray-100);
}
.jh2-blog-card__date { font-size: 0.75rem; color: var(--jh-gray-400); font-weight: 500; }
.jh2-blog-card__link {
  font-size: 0.75rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--jh-blue-600); transition: color var(--jh-t);
}
.jh2-blog-card__link:hover { color: var(--jh-blue-700); }

/* === Accessibilité — Utilitaires === */
.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;
}

/* Skip link */
.jh2-skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--jh-blue-600); color: var(--jh-white);
  padding: 0.75rem 1.5rem; border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 700; font-size: 0.875rem; z-index: 9999;
  text-decoration: none; transition: top 0.2s;
}
.jh2-skip-link:focus { top: 0; outline: 3px solid var(--jh-blue-400); outline-offset: 2px; }

/* Bouton favori — zone de touch étendue */
.jh2-fav-btn {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.625rem;
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-animate] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* === Petits écrans : faire remonter les offres ================================
   Sur mobile le hero de la page Offres occupait 625px et la première carte
   n'arrivait qu'à 1019px — sur un écran de 830px, aucune offre n'était visible
   sans défiler. Les blocs sont réduits, pas supprimés : l'accroche, la
   recherche et les repères restent, ils prennent juste la place qu'il faut.

   Les tailles sont fluides (clamp) parce que la grille doit tenir jusqu'à
   200px de large, où des valeurs fixes déborderaient.
   ========================================================================== */
@media (max-width: 767px) {

  /* Hero — l'essentiel du gain vient du rembourrage vertical */
  .jh2-jobs-hero { padding: clamp(1.75rem, 7vw, 3rem) 0.75rem clamp(1.25rem, 5vw, 2rem); }

  .jh2-jobs-hero-eyebrow {
    /* plancher à 10px : en dessous l'accroche n'est plus lisible */
    font-size: clamp(0.625rem, 2.6vw, 0.75rem);
    padding: 0.3125rem 0.75rem;
    margin-bottom: clamp(0.5rem, 2.5vw, 1rem);
    letter-spacing: 0.08em;
    max-width: 100%;
  }
  .jh2-jobs-hero-eyebrow svg { width: 0.75rem; height: 0.75rem; }

  .jh2-jobs-hero-text { margin-bottom: clamp(0.875rem, 4vw, 1.5rem); }
  .jh2-jobs-hero-text h1 {
    font-size: clamp(1.25rem, 6.4vw, 2.125rem);
    margin-bottom: clamp(0.375rem, 2vw, 0.75rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
  .jh2-jobs-hero-text p {
    font-size: clamp(0.75rem, 3.2vw, 0.9375rem);
    line-height: 1.45;
  }

  /* En-tête compact : sa hauteur réelle (topbar + barre principale) reste
     entièrement réservée afin qu'il ne recouvre pas le début du contenu. */
  .jh2-header { padding: 0; }
  .jh2-header-main,
  .jh2-header--scrolled .jh2-header-main,
  .jh2-header--solid .jh2-header-main { padding: 0.5rem 0; }
  .jh2-hamburger { padding: 0.625rem; line-height: 0; }
  .jh2-main,
  body.home .jh2-main { padding-top: 6rem; }
  /* Le logo porte un max-height inline posé par jh2_render_site_logo(). */
  .jh2-site-logo { max-height: 34px !important; }
  .jh2-brand { font-size: 1.125rem; gap: 0.375rem; }
  .jh2-brand__icon { width: 2rem; height: 2rem; border-radius: 0.5rem; }

  /* Une seule recherche visible : mot-clé + bouton côte à côte.
     Ville et secteur restent accessibles dans « Filtrer les opportunités »,
     juste en dessous — deux systèmes de filtrage empilés faisaient doublon. */
  .jh2-jobs-search-form { flex-direction: row; align-items: stretch; gap: 0.375rem; }
  .jh2-jsf-field { border-bottom: none; }
  .jh2-jsf-field ~ .jh2-jsf-field { display: none; }
  /* 44px minimum : en dessous la cible tactile devient difficile à viser. */
  .jh2-jsf-btn { width: auto; flex-shrink: 0; min-height: 44px; }
  .jh2-jsf-field { min-height: 44px; }

  /* Recherche — champs plus compacts */
  .jh2-jobs-search-bar { padding: 0.375rem; border-radius: 1rem; }
  .jh2-jsf-field { padding: clamp(0.5rem, 2.4vw, 0.75rem) clamp(0.625rem, 3vw, 1rem); }
  .jh2-jsf-field svg { margin-right: 0.5rem; width: 1rem; height: 1rem; }
  .jh2-jsf-field input,
  .jh2-jsf-field select { font-size: clamp(0.8125rem, 3.4vw, 0.9375rem); }
  .jh2-jsf-btn {
    padding: clamp(0.625rem, 3vw, 0.875rem) clamp(0.75rem, 4vw, 1.25rem);
    font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
  }

  /* Barres intermédiaires — 282px avant la première offre, à resserrer */
  .jh2-jobs-container { margin-top: clamp(1.25rem, 5vw, 2rem); }
  .jh2-jobs-layout { gap: 1.25rem; }
  .jh2-jobs-sidebar-mobile-toggle { margin-bottom: 0.875rem; }
  .jh2-jobs-sidebar-mobile-toggle button {
    padding: clamp(0.5rem, 2.6vw, 0.75rem) 1rem;
    font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
    border-radius: 0.75rem;
  }

  /* En-tête de résultats : compteur et bascule d'affichage sur une seule
     ligne, sinon ils empilent 100px avant la première offre. */
  .jh2-jobs-main-header {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.75rem; padding-bottom: 0.625rem;
  }
  .jh2-jobs-count { font-size: clamp(0.75rem, 3.2vw, 0.9375rem); }
  .jh2-jobs-view-toggles { gap: 0.5rem; flex-shrink: 0; }
  .jh2-jvt-inner { padding: 0.125rem; border-radius: 0.625rem; }
  .jh2-view-btn { padding: 0.375rem; }
}

/* Très petits écrans (jusqu'à ~360px) : on descend d'un cran de plus et on
   neutralise tout ce qui pourrait provoquer un débordement horizontal. */
@media (max-width: 360px) {
  .jh2-jobs-hero {
    padding: 1.25rem 0.625rem 1rem;
  }
  .jh2-jobs-hero-eyebrow {
    letter-spacing: 0.04em; gap: 0.3125rem;
    padding: 0.25rem 0.5rem; margin-bottom: 0.5rem;
  }
  /* Le titre passe sur plusieurs lignes à cette largeur : c'est l'interligne,
     pas le corps, qui fait la différence — on garde le texte lisible. */
  .jh2-jobs-hero-text { margin-bottom: 0.75rem; }
  .jh2-jobs-hero-text h1 {
    line-height: 1.06; hyphens: auto; overflow-wrap: anywhere;
    margin-bottom: 0.375rem;
  }
  .jh2-jobs-hero-text p { line-height: 1.3; }

  .jh2-jobs-search-bar { padding: 0.25rem; }
  .jh2-jsf-field { padding: 0.5rem 0.625rem; }
  .jh2-jsf-field svg { display: none; }
  /* Sous ~360px le libellé ne tient plus à côté du champ : la loupe suffit,
     le bouton garde son intitulé pour les lecteurs d'écran. */
  .jh2-jsf-btn { padding: 0.5rem 0.875rem; font-size: 0; gap: 0; min-height: 44px; }
  .jh2-jsf-btn svg { width: 1.125rem; height: 1.125rem; }
  .jh2-header { padding: 0; }
  .jh2-header-main,
  .jh2-header--scrolled .jh2-header-main,
  .jh2-header--solid .jh2-header-main { padding: 0.5rem 0; }
  .jh2-main,
  body.home .jh2-main { padding-top: 6rem; }
  .jh2-site-logo { max-height: 30px !important; }

  .jh2-jobs-container { margin-top: 0.5rem; }
  .jh2-jobs-sidebar-mobile-toggle { margin-bottom: 0.625rem; }
  .jh2-jobs-view-toggles { gap: 0.375rem; }
  .jh2-view-btn { padding: 0.375rem; }
}

/* Les enfants d'une grille valent `min-width: auto` par défaut : ils refusent
   de passer sous la largeur intrinsèque de leur contenu. En dessous d'environ
   260px la colonne des offres débordait donc de son conteneur. */
.jh2-jobs-layout,
.jh2-jobs-layout > *,
.jh2-jobs-main,
.jh2-jobs-sidebar,
.jh2-jobs-grid-layout,
.jh2-jobs-grid-layout > * { min-width: 0; }