/* ============================================================
   medO carrières — page styles  (MDS Templates plugin)
   Figma 5439-43341 (desktop 1920) / 5566-30286 (mobile 414).

   Loaded only on posts that contain the [mds_carrieres] shortcode.
   Typography always comes from the DS classes in the markup
   (.h2/.h4/.h5/.h6, .text-p1-.text-p4 + .fw-*) — this file carries
   layout, colour and documented deviations only.
   ============================================================ */
.carrieres-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* page-scoped border-box: several blocks pair a % width or a min-height
   with padding, and the DS does not set a global box-sizing */
[class^="car-"], [class*=" car-"] { box-sizing: border-box; }

/* 1420 content container, sized as a % of the 1920 design width and centred */
.car-in {
  width: calc(100% - 2 * var(--section-gutter)); /* 1420 cap, gutters below it */
  max-width: var(--section-container);
  margin-inline: auto;
}
.car-pad { padding-block: var(--spacing-step-10); }    /* 48px */
.car-pad-lg { padding-block: var(--spacing-step-11); }  /* 64px */

/* Figma swaps two sections between the frames: desktop shows the client
   marquee before "Postes ouverts", mobile shows it after. The markup keeps
   the mobile reading order and desktop re-orders. */
.car-swap { display: flex; flex-direction: column; }
.car-swap .car-clients { order: -1; }

/* icon box — exported vectors keep their own 28px geometry inside it */
.car-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--primary-default);
}
.car-ico svg { display: block; width: 100%; height: 100%; }

/* Figma "Features Accolade" 24px corner brackets, drawn as eight 1px
   background slices (same trick as .home-client-card) so the rows need
   no extra elements */
.car-brackets {
  --bracket: var(--primary-default);
  background-image:
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket));
  background-position: left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  background-size: 24px 1px, 1px 24px, 24px 1px, 1px 24px, 24px 1px, 1px 24px, 24px 1px, 1px 24px;
  background-repeat: no-repeat;
}

/* the 10% accent tint Figma uses for every filled accolade — no token */
.car-tint { background-color: rgba(0, 106, 250, 0.1); }

/* ============================================================
   1. Hero (5439-43347) — one flattened export (photo + the masked
   #004097→#006afa wash) behind the copy.
   ============================================================ */
.car-hero {
  display: flex;
  align-items: center;
  min-height: 568px;
  /* the template sets --car-hero-bg from the ACF image (falls back to the
     bundled Figma export), so uploads swap the art without touching CSS */
  background: var(--car-hero-bg, url("../img/carrieres-hero.jpg")) center / cover no-repeat;
  border-bottom: 1px solid var(--neutrals-500);
  color: var(--neutrals-100-white);
}
.car-hero .car-in { padding-bottom: 14px; } /* Figma centres the copy 7px above the band's middle */
.car-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-step-10); /* 48px */
  width: 47.68%; /* 677/1420 */
}
.car-hero-text { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.car-hero-head { display: flex; flex-direction: column; gap: var(--spacing-step-4); }
.car-hero-actions { display: flex; align-items: center; gap: var(--spacing-step-6); }

/* ============================================================
   2. Pourquoi medO (5439-44326) — intro + 3 hairline accolades.
   ============================================================ */
.car-why .car-in { display: flex; flex-direction: column; gap: var(--spacing-step-8); }
.car-why-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
  color: var(--neutrals-950);
}
.car-why-head p { width: 46.2%; } /* 656/1420 */
.car-why-list { display: flex; align-items: stretch; }
.car-why-card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 154px;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-4);
  padding: var(--spacing-step-7);
  border: 1px solid var(--neutrals-400);
}
.car-why-card + .car-why-card { margin-left: -1px; }
.car-why-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-step-3);
  min-width: 0;
}
.car-why-body .t { color: var(--neutrals-950); }
.car-why-body .d { color: var(--neutrals-800); }

/* ============================================================
   3. Comment on travaille (5439-43420) — flattened glow band,
   copy left, 3 stacked accolades right.
   ============================================================ */
.car-work {
  min-height: 552px;
  display: flex;
  align-items: center;
  background: var(--car-work-bg, url("../img/carrieres-travaille.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.car-work .car-in { display: flex; align-items: flex-start; gap: 55px; } /* Figma gap, no token */
.car-work-intro {
  width: 40.77%; /* 579/1420 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
  padding-block: var(--spacing-step-11); /* 64px */
}
.car-work-list {
  width: 50%; /* 710/1420 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding-block: var(--spacing-step-9); /* 40px */
}
.car-work-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
  padding: var(--spacing-step-7);
  border: 1px solid var(--overlay-light-20, rgba(255, 255, 255, 0.2));
}
.car-work-card + .car-work-card { margin-top: -1px; }
.car-work-card .car-ico { color: var(--neutrals-100-white); }
.car-work-body { display: flex; flex-direction: column; gap: var(--spacing-step-3); }
.car-work-body .d { color: var(--overlay-light-80, rgba(255, 255, 255, 0.8)); }

/* ============================================================
   4. D'entrée de jeu (5439-43516) — 6 bracketed perk rows left,
   team photo right.
   ============================================================ */
.car-perks .car-in { display: flex; flex-direction: column; gap: var(--spacing-step-10); }
.car-perks-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
  color: var(--neutrals-950);
}
.car-perks-head p { color: var(--neutrals-800); }
.car-perks-row { display: flex; align-items: stretch; gap: var(--spacing-step-7); }
.car-perks-list {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-7);
}
.car-perk {
  display: flex;
  align-items: center;
  gap: var(--spacing-step-6);
  padding: var(--spacing-step-7);
  color: var(--neutrals-950);
}
.car-perks-media {
  width: 41%; /* 582/1420 */
  flex-shrink: 0;
  background: var(--car-team-bg, url("../img/carrieres-team.jpg")) center / cover no-repeat;
}

/* ============================================================
   5. Postes ouverts (5443-44545) — 4-column table + bracketed
   "no opening" card.
   ============================================================ */
.car-jobs .car-in { display: flex; flex-direction: column; gap: 41px; } /* Figma gap, no token */
.car-jobs-title { color: var(--neutrals-950); }
.car-jobs-body { display: flex; flex-direction: column; gap: 41px; }
.car-table { display: flex; flex-direction: column; gap: 10px; } /* Figma row gap, no token */
.car-tr {
  display: grid;
  grid-template-columns: 1fr 1fr 281px 305px;
  gap: 10px;
}
.car-th,
.car-td {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.car-th { padding: var(--spacing-step-6); color: var(--neutrals-950); }
.car-td {
  padding: var(--spacing-step-5) var(--spacing-step-6);
  background: var(--neutrals-300);
  color: var(--neutrals-800);
}
/* the mobile-only custom scrollbar under the table */
.car-jobs-scroll { overflow: visible; }
.car-jobs-empty {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-7);
  padding: var(--spacing-step-7);
  color: var(--neutrals-950);
}
.car-jobs-empty .btn-ghost-text { align-self: flex-start; }

/* ============================================================
   6. Clients (5490-45932) — title left, the shared 3-column logo
   marquee right (same geometry as the home page band).
   ============================================================ */
.car-clients .car-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-step-10);
}
.car-clients-title { color: var(--neutrals-950); max-width: 650px; }
.car-clients-marquee {
  /* Figma scales the whole tile grid down on mobile (×0.675): 166→112 wide,
     113→76 tall, 23→15 gutter — one set of variables drives both frames */
  --car-marquee-gap: 23px;
  --car-marquee-half-gap: 11.5px;
  width: 544px;
  height: 450px;
  flex-shrink: 0;
  display: flex;
  gap: var(--car-marquee-gap);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.car-clients-col { flex: 1 1 0; min-width: 0; overflow: hidden; }
.car-clients-track {
  display: flex;
  flex-direction: column;
  gap: var(--car-marquee-gap);
  animation: car-marquee 40s linear infinite;
}
.car-clients-col:nth-child(2) .car-clients-track { animation-direction: reverse; animation-duration: 46s; }
.car-clients-col:nth-child(3) .car-clients-track { animation-duration: 52s; }
.car-clients-marquee:hover .car-clients-track { animation-play-state: paused; }
@keyframes car-marquee {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-50% - var(--car-marquee-half-gap))); } /* one copy + its gap */
}
.car-client-card {
  height: 113px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.car-client-card img { max-width: 66%; max-height: 55%; display: block; }

/* ============================================================
   7. CTA (5439-44395) — a container-width blue band on desktop,
   full-bleed on mobile; the person + ring + plus glyph ship baked
   into the band export, so the band is one image.
   ============================================================ */
.car-cta-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 376px;
  padding: var(--spacing-step-10) var(--spacing-step-7);
  background: var(--primary-default) var(--car-cta-bg, url("../img/carrieres-cta.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.car-cta-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-4);
  width: 27.5%; /* 391/1420 */
  min-width: 320px;
}

/* ════════════════ mobile ≤1023 (frame 5566-30286) ════════════════ */
@media (max-width: 1023px) {
  .car-in { width: 88.406%; } /* 366/414 */
  .car-swap .car-clients { order: 0; }

  /* hero — its own flattened cut of the band */
  .car-hero {
    align-items: flex-start;
    min-height: 750px;
    padding-block: var(--spacing-step-10);
    background-image: var(--car-hero-bg-mobile, var(--car-hero-bg, url("../img/carrieres-hero-mobile.jpg")));
    border-bottom: 0;
  }
  .car-hero .car-in { padding-bottom: 0; }
  .car-hero-copy { width: 100%; gap: var(--spacing-step-8); }
  .car-hero-actions { flex-direction: column; align-items: flex-start; }

  /* every section header tightens to an 8px title/lede gap on mobile */
  .car-why-head,
  .car-perks-head,
  .car-work-intro { gap: var(--spacing-step-4); }

  /* pourquoi — the 3 accolades stack */
  .car-why .car-in { gap: var(--spacing-step-7); }
  .car-why-head p { width: 100%; }
  .car-why-list { flex-direction: column; }
  .car-why-card { min-height: 143px; }
  .car-why-card + .car-why-card { margin-left: 0; margin-top: -1px; }

  /* comment on travaille — stacked, 16px card padding, own art */
  .car-work {
    min-height: 0;
    background-image: var(--car-work-bg-mobile, var(--car-work-bg, url("../img/carrieres-travaille-mobile.jpg")));
  }
  .car-work .car-in {
    flex-direction: column;
    gap: var(--spacing-step-7);
    padding-block: var(--spacing-step-10);
  }
  .car-work-intro,
  .car-work-list { width: 100%; padding-block: 0; }
  .car-work-card { gap: var(--spacing-step-4); padding: var(--spacing-step-6); }

  /* d'entrée de jeu — photo above the rows */
  .car-perks .car-in { gap: var(--spacing-step-7); }
  .car-perks-row { flex-direction: column; gap: var(--spacing-step-7); }
  .car-perks-media { width: 100%; aspect-ratio: 366 / 362.227; order: -1; }
  .car-perks-list { gap: var(--spacing-step-6); }

  /* postes ouverts — the table scrolls sideways under a slim bar */
  .car-jobs .car-in { gap: var(--spacing-step-8); }
  .car-pad-lg { padding-block: var(--spacing-step-10); }
  .car-jobs-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: var(--spacing-step-4);
  }
  .car-jobs-scroll::-webkit-scrollbar { height: 10px; }
  .car-jobs-scroll::-webkit-scrollbar-track {
    background: var(--neutrals-100-white);
    border: 1px solid var(--neutrals-400);
  }
  .car-jobs-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-default);
    border: 3px solid transparent;
    background-clip: content-box;
  }
  .car-table { min-width: 893px; gap: var(--spacing-step-5); } /* 318+229+155+155 + 3×12 */
  .car-tr { grid-template-columns: 318px 229px 155px 155px; gap: var(--spacing-step-5); }
  .car-th { padding: var(--spacing-step-5); }
  .car-td { padding: var(--spacing-step-4) var(--spacing-step-5); }

  /* clients — title above a full-width marquee */
  .car-clients .car-in {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-step-8);
  }
  .car-clients-title { max-width: none; }
  .car-clients-marquee {
    --car-marquee-gap: 15px;
    --car-marquee-half-gap: 7.5px;
    width: 100%;
    height: 302px;
  }
  .car-client-card { height: 76px; }

  /* CTA — full-bleed band, copy then button, art baked in below */
  .car-cta .car-in { width: 100%; max-width: none; }
  .car-cta-band {
    justify-content: flex-start;
    gap: var(--spacing-step-7);
    min-height: 552px;
    background-image: var(--car-cta-bg-mobile, var(--car-cta-bg, url("../img/carrieres-cta-mobile.jpg")));
  }
  .car-cta-text { width: 100%; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════
   SINGLE JOB OFFER — the inner page of one "Offre d'emploi"
   (post type mds_job). No Figma frame exists for it, so it is
   composed from this page's own vocabulary and everything
   reusable is reused as-is: .car-in / .car-pad / .car-pad-lg /
   .car-tint / .car-brackets / .car-table / the DS buttons and
   the flattened carrières hero bake. Only the pieces below are
   new — the tab strip, the share buttons and the editor prose.
   ════════════════════════════════════════════════════════════ */
[class^="job-"], [class*=" job-"] { box-sizing: border-box; }

/* The offer page renders inside the theme's post content, so it breaks out of
   that column for the full-bleed bands — same recipe as the blog module.
   `clip`, never `hidden`: hidden turns this into a scroll container, which
   kills position:sticky on the apply bar and the share card inside it. */
.job-page {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: clip;
}

/* The DS .breadcrumbs is a fixed 20px flex row, so a long job title wraps and
   spills onto the hero below it. Truncated page-scoped rather than by editing
   the shared component — every other page's trail is short enough to fit. */
.job-crumbs .breadcrumbs { min-width: 0; }
.job-crumbs .breadcrumbs-current {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 1. hero (Figma 4269-26439 desktop / 4269-26517 mobile) — 450px band,
   one flattened export per breakpoint: the #172a4b fill, the glow and the
   medO mark at 62% are all baked in. Figma's frame carries no buttons; the
   two CTAs sit inside the same 450px box. ── */
.job-hero {
  display: flex;
  align-items: center;
  min-height: 450px;
  padding-block: var(--spacing-step-11); /* 64px */
  background: var(--job-hero-bg, url("../img/job-hero.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.job-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-step-8); /* 32px */
  width: 62.54%; /* 888/1420 */
}
.job-hero-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.job-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-step-5);
  color: var(--overlay-light-80, rgba(255, 255, 255, 0.8));
}
.job-hero-meta .sep { color: var(--overlay-light-40, rgba(255, 255, 255, 0.4)); }
.job-hero-actions { display: flex; align-items: center; gap: var(--spacing-step-6); }

/* ── 2. sticky apply bar — pins to the top of the viewport.
   --job-bar-top is 0 because the theme's header is not sticky on the live
   site; raise it to the header's height (the DS [mds_header] is 72/61) on any
   install where it is, or the bar floats with content running behind it. ── */
.job-bar {
  position: sticky;
  top: var(--job-bar-top, 0px);
  z-index: 90;
  background: var(--neutrals-300);
  border-bottom: 1px solid var(--neutrals-400);
}
.job-bar .car-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-step-7);
  min-height: 64px;
  /* 34px of right padding, not a margin on the pill: the pill's hover lobe
     blooms 32px past its edge, and the DS keeps the button's footprint
     constant by adding that margin itself on hover. Reserving it here instead
     leaves the button's own box untouched. */
  padding: var(--spacing-step-4) 34px var(--spacing-step-4) 0;
}
.job-bar-title {
  color: var(--neutrals-950);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 3. body — tabbed prose left, sticky share card right ── */
.job-main .car-in { display: flex; align-items: flex-start; gap: var(--spacing-step-10); }
.job-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-step-8);
}

/* tab strip — the "Scheme-tab" language of the carrières table: tinted fill,
   16px padding, P1 medium. Built to take more tabs later (radio + :has, no JS). */
.job-tabs {
  display: flex;
  gap: 10px;
  width: 100%;
  box-shadow: inset 0 -1px 0 var(--neutrals-400);
}
.job-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-step-6) var(--spacing-step-7);
  color: var(--neutrals-800);
  text-decoration: none;
}
.job-tab.is-active {
  background: rgba(0, 106, 250, 0.1);
  color: var(--neutrals-950);
  box-shadow: inset 0 -2px 0 var(--primary-default);
}

/* editor prose — the only block whose HTML comes from the database, so it
   cannot carry DS classes. These rules map the DS type scale onto the raw
   tags, exactly as the blog module does for .mds-article-prose. */
.job-prose {
  width: 100%;
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
  color: var(--neutrals-800);
}
.job-prose h2,
.job-prose h3 {
  margin: var(--spacing-step-10) 0 var(--spacing-step-6);
  font-family: var(--typography-family-display), "Helvetica Neue", Arial, sans-serif;
  font-weight: var(--fw-semibold);
  color: var(--neutrals-950);
}
.job-prose h2 { font-size: var(--typography-size-h5); line-height: var(--typography-line-height-h5); }
.job-prose h3 { font-size: var(--typography-size-h6); line-height: var(--typography-line-height-h6); }
.job-prose > :first-child { margin-top: 0; }
/* Sub-sections laid out as cards, the way the source document reads them:
   three across for the “pourquoi ce poste” blurbs, two across for the skills
   and tech blocks. Collapses to one column on narrow screens like the rest
   of the page. */
.job-grid {
  display: grid;
  gap: var(--spacing-step-6);
  margin: var(--spacing-step-8) 0;
}
.job-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.job-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.job-card-block {
  padding: var(--spacing-step-8);
  border-radius: var(--radius-md);
}
.job-card-block > :first-child { margin-top: 0; }
.job-card-block > :last-child { margin-bottom: 0; }
/* the intro and the closing block — a single tinted panel, not a grid */
.job-box {
  padding: var(--spacing-step-8);
  border-radius: var(--radius-md);
  margin: var(--spacing-step-8) 0;
}
.job-box > :first-child { margin-top: 0; }
.job-box > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .job-grid-2,
  .job-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

.job-prose p,
.job-prose li {
  font-size: var(--typography-size-p2);
  line-height: var(--typography-line-height-p2);
}
.job-prose p { margin: 0 0 var(--spacing-step-6); }
.job-prose ul,
.job-prose ol { margin: 0 0 var(--spacing-step-6) var(--spacing-step-6); padding: 0; }
.job-prose li { margin-bottom: var(--spacing-step-4); padding-left: var(--spacing-step-1); }
.job-prose li::marker { color: var(--primary-default); font-weight: var(--fw-bold); }
.job-prose strong { font-weight: var(--fw-semibold); color: var(--neutrals-950); }
.job-prose a { color: var(--primary-default); text-decoration: underline; }
.job-prose > :last-child { margin-bottom: 0; }

.job-aside {
  width: 33.8%; /* 480/1420 */
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--job-bar-top, 0px) + 80px); /* clears the bar (64) + 16 */
}
.job-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-7);
  padding: var(--spacing-step-7);
  color: var(--neutrals-950);
}
.job-card .btn-pill { align-self: flex-start; }

/* share buttons — the Figma "SM" mark (5894-16362) at 40px instead of 24, so
   they carry its Default/Hover fill swap: white disc + primary glyph, inverted
   on hover. See the --sm-glyph contract in mds-templates.css. The 2px lift is
   this page's own, not Figma's — kept because these are 40px buttons in a card,
   not a 24px row in a bar. */
.job-share { display: flex; flex-wrap: wrap; gap: var(--spacing-step-5); list-style: none; margin: 0; padding: 0; }
.job-share a {
  display: block;
  width: 40px;
  height: 40px;
  color: var(--neutrals-100-white);
  --sm-glyph: var(--primary-default);
  transition: color 0.2s ease, --sm-glyph 0.2s ease, transform 0.2s ease;
}
.job-share a:hover,
.job-share a:focus-visible {
  color: var(--primary-default);
  --sm-glyph: var(--neutrals-100-white);
  transform: translateY(-2px);
}
.job-share svg { display: block; width: 100%; height: 100%; }

/* ── 4. CTA (Figma 5160-15804 desktop / 5160-16026 mobile) — the same
   1420x376 / 414x552 band as the carrières page, so .car-cta / .car-cta-band
   are reused wholesale and only the baked art changes. ── */
.job-cta .car-cta-band { background-image: var(--job-cta-bg, url("../img/job-cta.jpg")); }
/* the offer’s closing question runs longer than Figma’s sample headline; the
   illustration only starts at x=811 inside the band, so the copy can widen */
.job-cta .car-cta-text { width: 50%; }

/* ── 5. other openings — the carrières table, unchanged ── */
.job-more .car-in { display: flex; flex-direction: column; gap: var(--spacing-step-8); }
.job-more-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-step-7);
  color: var(--neutrals-950);
}

/* ════════════════ mobile ≤1023 ════════════════ */
@media (max-width: 1023px) {
  .job-hero {
    min-height: 325px;
    padding-block: var(--spacing-step-10);
    background-image: var(--job-hero-bg-mobile, var(--job-hero-bg, url("../img/job-hero-mobile.jpg")));
  }
  .job-hero-copy { width: 100%; }
  .job-hero-actions { flex-direction: column; align-items: stretch; }
  .job-hero-actions .btn-pill { justify-content: center; }

  /* the bar keeps only the button once the title has nowhere to go */
  .job-bar { top: var(--job-bar-top-mobile, var(--job-bar-top, 0px)); }
  .job-bar .car-in { justify-content: center; min-height: 56px; padding-inline: 34px; }
  .job-bar-title { display: none; }

  /* body — prose first, share card after it, not pinned */
  .job-main .car-in { flex-direction: column; gap: var(--spacing-step-8); }
  .job-aside { width: 100%; position: static; }
  /* the closing "je veux postuler" now sits directly above the card — a second
     copy inside it would be the third identical button in one screen */
  .job-card .btn-pill { display: none; }

  /* the single tab fills the strip rather than sitting in a wide empty rule */
  .job-tab { flex: 1 1 auto; justify-content: center; }

  .job-cta .car-cta-band {
    background-image: var(--job-cta-bg-mobile, var(--job-cta-bg, url("../img/job-cta-mobile.jpg")));
  }
  /* the desktop 50% is more specific than .car-cta-text, so restate it here */
  .job-cta .car-cta-text { width: 100%; }

  .job-more-head { flex-direction: column; align-items: flex-start; gap: var(--spacing-step-6); }
}