/*
Theme Name: English Job Maze
Theme URI: https://englishjobmaze.com
Author: English Job Maze
Description: Country-first guide for teaching English abroad — TEFL certification, ESL jobs, salaries and visas by country.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: ejm
*/

/* =========================================================================
   1. FONTS (self-hosted — see /assets/fonts/)
   ========================================================================= */
@font-face {
  font-family: 'Paytone One';
  src: url('assets/fonts/paytone-one-v27-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('assets/fonts/mulish-v15-latin-variable.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('assets/fonts/mulish-v15-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   2. DESIGN TOKENS — light mode only (GD-030: no dark variant on this site)
   ========================================================================= */
:root{
  /* surfaces */
  --bg: #F7F8FB;            /* exercise-book white */
  --card: #FFFFFF;          /* card white */
  --tint-pink: #FFE1E8;
  --tint-sky: #DDEBFF;
  --tint-mint: #DDF3E4;

  /* ink */
  --ink: #16151D;
  --ink-soft: #55535F;

  /* accent (single accent family) */
  --accent: #FF6F91;        /* flashcard pink — surfaces, never text on white */
  --accent-line: #C9D8F0;   /* ruled-line blue, decorative only */
  --link: #B3143F;          /* red-pen raspberry — text/links */
  --link-hover: #8f0f30;

  /* semantic (visa difficulty) — always paired with a word, never color alone */
  --visa-easy: #17703F;
  --visa-mid: #8A5300;
  --visa-hard: #B3143F;

  /* type */
  --font-display: 'Paytone One', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
  --font-body: 'Mulish', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* geometry */
  --radius-card: 14px;
  --radius-pill: 999px;
  --radius-frame: 22px;
  --container: 1200px;
  --gutter: 24px;

  --shadow-card: 0 1px 2px rgba(22,21,29,.06), 0 8px 24px rgba(22,21,29,.06);
}

@media (max-width: 480px){
  :root{ --gutter: 16px; }
}

/* =========================================================================
   3. RESET
   ========================================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
html, body{ overflow-x: hidden; } /* safety net: no layout bug should ever open a horizontal scrollbar */
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}
img{ max-width: 100%; height: auto; display: block; }
svg{ max-width: 100%; }
a{ color: var(--link); text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); text-underline-offset: 3px; }
a:hover{ color: var(--link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}
button{ font-family: inherit; cursor: pointer; }
h1, h2, h3, h4{ font-family: var(--font-display); line-height: 1.12; margin: 0 0 .5em; font-weight: 400; letter-spacing: -0.01em; }
p{ margin: 0 0 1.1em; }
ul, ol{ padding-left: 1.2em; }
table{ width: 100%; border-collapse: collapse; }

/* =========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================= */
.ejm-container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ejm-container--narrow{ max-width: 760px; }
.ejm-container--read{ max-width: 720px; }

.ejm-band{ padding: 72px 0; }
.ejm-band + .ejm-band{ border-top: none; }
.ejm-band--white{ background: var(--card); }
.ejm-band--paper{ background: var(--bg); }
.ejm-band--tint{ background: var(--tint-pink); }
.ejm-band--ink{ background: var(--ink); color: #F2EEE9; }
.ejm-band--ink h2, .ejm-band--ink h3{ color: #fff; }
.ejm-band--ink .ejm-eyebrow{ color: var(--tint-pink); }
@media (max-width: 640px){ .ejm-band{ padding: 48px 0; } }

.ejm-eyebrow{
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--link);
  margin-bottom: 10px;
}

.ejm-grid{ display: grid; gap: var(--gutter); }
.ejm-grid--2{ grid-template-columns: 1fr 1fr; }
.ejm-grid--3{ grid-template-columns: repeat(3, 1fr); }
.ejm-grid--4{ grid-template-columns: repeat(4, 1fr); }
/* A bare "1fr" track still floors at its content's min-content width (the classic
   CSS Grid overflow trap): a wide child then pushes the whole page sideways. This
   resets every direct grid child back to a real, shrinkable minimum. */
.ejm-grid > *,
.ejm-hero > *, .ejm-article-head > *, .ejm-article-layout > *,
.ejm-cat-feature > *, .ejm-calc > *, .ejm-calc-numbers > *,
.ejm-program-card > *, .ejm-choice-grid > *{ min-width: 0; }
@media (max-width: 900px){
  .ejm-grid--3, .ejm-grid--4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .ejm-grid--2, .ejm-grid--3, .ejm-grid--4{ grid-template-columns: 1fr; }
}

.ejm-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
}
.ejm-btn:hover{ transform: translateY(-1px); }
.ejm-btn--primary{ background: var(--accent); color: var(--ink); }
.ejm-btn--primary:hover{ background: #ff5c82; color: var(--ink); }
.ejm-btn--ink{ background: var(--ink); color: #fff; }
.ejm-btn--ink:hover{ background: #2a2836; color: #fff; }
.ejm-btn--ghost{ background: transparent; border-color: var(--ink); color: var(--ink); }
.ejm-btn--ghost:hover{ background: var(--ink); color: #fff; }
.ejm-btn--block{ width: 100%; justify-content: center; }

/* =========================================================================
   5. PROCEDE 1 — THE FLASHCARD FRAME
   ========================================================================= */
.ejm-frame{
  background: var(--accent);
  border-radius: var(--radius-frame);
  margin: var(--gutter);
  padding: var(--gutter) var(--gutter) 56px;
}
@media (max-width: 640px){
  .ejm-frame{ margin: 8px; padding: 8px 8px 40px; border-radius: 16px; }
}
.ejm-frame--tight{ padding-bottom: var(--gutter); }
/* Header frame + hero frame form one continuous pink block, split at the DOM level. */
.ejm-frame--top{ margin-bottom: 0; border-radius: var(--radius-frame) var(--radius-frame) 0 0; padding-bottom: var(--gutter); }
.ejm-frame--bottom{ margin-top: 0; border-radius: 0 0 var(--radius-frame) var(--radius-frame); }
@media (max-width: 640px){
  .ejm-frame--top{ border-radius: 16px 16px 0 0; }
  .ejm-frame--bottom{ border-radius: 0 0 16px 16px; }
}

/* =========================================================================
   6. HEADER / NAV
   ========================================================================= */
.ejm-site-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  padding: 16px var(--gutter) 0;
}
/* B-HDR-14: this used to drop to position:static (no background), so the header
   vanished the instant the page scrolled past the pink hero card. It now stays
   sticky everywhere, with the page's own paper background so it never turns
   transparent over whatever content scrolls underneath it. */
.ejm-site-header.ejm-frame{ position: sticky; top: 0; padding: 0; background: var(--bg); }

.ejm-nav{
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
}
.ejm-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}
.ejm-brand svg{ width: 34px; height: 34px; flex-shrink: 0; }
.ejm-brand-word{
  font-family: var(--font-display);
  font-size: 20px;
  white-space: nowrap;
}
.ejm-brand-word em{ font-style: normal; color: var(--link); }

.ejm-menu{
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.ejm-menu::-webkit-scrollbar{ display: none; }
.ejm-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.ejm-menu a:hover, .ejm-menu a:focus-visible{ background: var(--tint-pink); }
.ejm-menu .current-menu-item > a, .ejm-menu .current-cat > a{ background: var(--ink); color: #fff; }

.ejm-nav-actions{ display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ejm-nav-cta{ padding: 10px 18px; font-size: 14px; }

.ejm-burger{
  display: none;
  background: var(--bg);
  border: none;
  border-radius: 10px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
}
.ejm-burger svg{ width: 22px; height: 22px; }

/* Closed by default on EVERY screen size — this must never depend on being inside
   a max-width media query, or it renders as a plain visible button on wide screens
   with no popup open (the "phantom X" bug). */
.ejm-nav-close{
  display: none;
  position: fixed;
  top: 18px; right: 18px;
  z-index: 210;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: none;
  align-items: center;
  justify-content: center;
}
body.ejm-menu-open .ejm-nav-close{ display: flex; }

@media (max-width: 900px){
  .ejm-menu{ display: none; }
  /* B-HDR-22: the CTA button plus the burger together never fit next to the
     logo below 900px — the burger was pushed fully off-screen (invisible,
     unclickable) while html/body's overflow-x:hidden safety net hid the
     symptom. Below the breakpoint only the burger remains. */
  .ejm-nav-cta{ display: none; }
  .ejm-burger{ display: flex; }
  body.ejm-menu-open .ejm-menu{
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--card);
    flex-direction: column;
    align-items: stretch;
    padding: 100px 24px 24px;
    z-index: 200;
    gap: 6px;
    overflow-y: auto;
  }
  body.ejm-menu-open .ejm-menu a{ font-size: 20px; padding: 14px 16px; }
}

/* =========================================================================
   7. PROCEDE 3 — RED PEN (underline / highlight / myth-corrected)
   ========================================================================= */
.ejm-redpen{ position: relative; display: inline-block; white-space: nowrap; }
.ejm-redpen svg{
  position: absolute;
  left: 0; right: 0; bottom: -.12em;
  width: 100%; height: .3em;
  color: var(--link);
}
.ejm-highlight{
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--accent) 35%, transparent) 55%);
  padding: 0 .06em;
}

.ejm-myth{
  border: 2px solid var(--tint-pink);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  margin: 28px 0;
  background: var(--card);
}
.ejm-myth-label{
  font-weight: 800; font-size: 13px; letter-spacing: .02em;
  display: block; margin-bottom: 8px;
}
.ejm-myth-wrong{
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--link);
  text-decoration-thickness: 2px;
  display: block;
  margin-bottom: 6px;
}
.ejm-myth-right{ display: block; font-weight: 700; }
.ejm-myth-right::before{ content: "→ "; color: var(--link); }

/* =========================================================================
   8. PROCEDE 2 — NOTEBOOK LINES
   ========================================================================= */
.ejm-notebook{
  position: relative;
  background-image: repeating-linear-gradient(
      to bottom, transparent 0, transparent 31px, var(--accent-line) 31px, var(--accent-line) 32px
    );
  background-position-y: 8px;
}
.ejm-notebook::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 48px;
  width: 2px;
  background: var(--accent);
  opacity: .55;
}
.ejm-notebook .ejm-container{ padding-left: calc(var(--gutter) + 26px); }
@media (max-width: 640px){
  .ejm-notebook::before{ left: 22px; }
  .ejm-notebook .ejm-container{ padding-left: calc(var(--gutter) + 10px); }
}

/* =========================================================================
   9. PROCEDE 4 — FLASHCARDS (country cards, tilted, taped)
   ========================================================================= */
.ejm-flashcards{
  display: flex;
  gap: 20px;
  padding: 8px;
}
.ejm-flashcard{
  position: relative;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  width: 220px;
  flex-shrink: 0;
}
.ejm-flashcard:nth-child(1){ transform: rotate(-2deg); }
.ejm-flashcard:nth-child(2){ transform: rotate(1.5deg); margin-top: 18px; }
.ejm-flashcard:nth-child(3){ transform: rotate(-1deg); }
.ejm-flashcard-tape{
  position: absolute; top: -6px; left: 50%;
  width: 70px; height: 22px;
  background: color-mix(in srgb, var(--accent) 55%, white);
  opacity: .8;
  transform: translateX(-50%) rotate(-2deg);
  border-radius: 3px;
}
.ejm-flashcard img{ aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.ejm-flashcard-body{ padding: 12px 14px 16px; }
.ejm-flashcard-country{ font-family: var(--font-display); font-size: 18px; margin: 0 0 4px; }
.ejm-flashcard-salary{
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
@media (max-width: 900px){
  .ejm-flashcards{ overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .ejm-flashcard{ scroll-snap-align: start; transform: none !important; margin-top: 0 !important; }
}

/* Country grid cards (rubric "Where can you teach?") */
.ejm-country-card{
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.ejm-country-card img{ aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.ejm-country-card-body{ padding: 14px 16px 18px; position: relative; }
.ejm-country-card-salary{
  position: absolute;
  top: -16px; right: 14px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
}
.ejm-country-card h3{ font-size: 19px; margin: 6px 0 8px; }
.ejm-country-card .ejm-tag-row{ display: flex; gap: 6px; flex-wrap: wrap; }

/* =========================================================================
   10. PILLS (procede 7)
   ========================================================================= */
.ejm-pills{ display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 24px; }
.ejm-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 2px solid var(--tint-pink);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.ejm-pill[aria-pressed="true"], .ejm-pill.is-active{ background: var(--accent); border-color: var(--accent); color: var(--ink); }
.ejm-tag{
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--bg); font-size: 12px; font-weight: 700; color: var(--ink-soft);
  white-space: nowrap;
}
.ejm-tag--easy{ color: var(--visa-easy); background: var(--tint-mint); }
.ejm-tag--mid{ color: var(--visa-mid); background: #FCEFD8; }
.ejm-tag--hard{ color: var(--visa-hard); background: var(--tint-pink); }

/* =========================================================================
   11. SALARY NOTES / TILES (procede 5)
   ========================================================================= */
.ejm-notes{ display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.ejm-note{
  width: 216px;
  background: var(--tint-pink);
  border-radius: var(--radius-card);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-card);
}
.ejm-note:nth-child(2n){ background: var(--tint-sky); transform: rotate(-1.5deg); }
.ejm-note:nth-child(3n){ background: var(--tint-mint); transform: rotate(1deg); }
.ejm-note:nth-child(1){ transform: rotate(-2deg); }
.ejm-note-value{
  font-family: var(--font-display); font-size: 22px; line-height: 1.2; display: block;
  overflow-wrap: anywhere; word-break: break-word;
}
.ejm-note-unit{ font-weight: 700; font-size: 13px; color: var(--ink-soft); display: block; margin-bottom: 4px; }
.ejm-note-caption{ font-size: 13px; color: var(--ink-soft); display: block; margin-top: 6px; }
.ejm-note-date{ font-size: 11px; color: var(--ink-soft); display: block; margin-top: 2px; }
@media (max-width: 640px){ .ejm-note{ transform: none !important; } }

/* Tiles for country facts grid */
.ejm-facts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0; }
.ejm-fact{ border-radius: var(--radius-card); padding: 16px 18px; }
.ejm-fact--pink{ background: var(--tint-pink); }
.ejm-fact--sky{ background: var(--tint-sky); }
.ejm-fact--mint{ background: var(--tint-mint); }
.ejm-fact-label{ font-size: 13px; font-weight: 700; color: var(--ink-soft); display: block; }
.ejm-fact-value{
  font-family: var(--font-display); font-size: 20px; line-height: 1.25; display: block; margin: 4px 0;
  overflow-wrap: anywhere; word-break: break-word;
}
.ejm-fact-date{ font-size: 11px; color: var(--ink-soft); }
@media (max-width: 900px){ .ejm-facts{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .ejm-facts{ grid-template-columns: 1fr; } }

/* =========================================================================
   12. THE ROUTE (procede 6)
   ========================================================================= */
.ejm-route{ position: relative; padding: 20px 0; }
.ejm-route-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
.ejm-route-step{ text-align: center; }
.ejm-route-step img{
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 14px; border: 4px solid var(--card); box-shadow: var(--shadow-card);
}
/* an inline <svg> with no explicit box falls back to the browser's replaced-
   element default (300x150) — hence the "90px-thick strokes". Give it a real size. */
.ejm-route-step svg{
  display: block; width: 56px; height: 56px; margin: 0 auto 14px;
  color: var(--ink); flex-shrink: 0;
}
.ejm-route-step h3{ font-size: 18px; margin-bottom: 6px; }
.ejm-route-step p{ font-size: 14px; color: var(--ink-soft); margin: 0; }
.ejm-route-path{
  position: absolute;
  top: 46px; left: 0; right: 0;
  height: 6px;
  z-index: 0;
}
.ejm-route-path path{
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.1s ease;
}
.ejm-route-path.is-visible path{ stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce){
  .ejm-route-path path{ stroke-dashoffset: 0; transition: none; }
}
@media (max-width: 900px){
  .ejm-route-steps{ grid-template-columns: 1fr; gap: 32px; }
  .ejm-route-path{ display: none; }
}

/* =========================================================================
   13. FOOTER
   ========================================================================= */
.ejm-footer-frame{ background: var(--ink); border-radius: var(--radius-frame); margin: var(--gutter); color: #E9E7F0; }
@media (max-width: 640px){ .ejm-footer-frame{ margin: 8px; border-radius: 16px; } }
.ejm-footer{ padding: 48px var(--gutter) 28px; }
.ejm-footer-top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.ejm-footer-brand .ejm-brand{ color: #fff; }
.ejm-footer-brand p{ color: #C7C4D6; font-size: 14px; max-width: 320px; }
.ejm-footer h4{ font-family: var(--font-body); font-weight: 800; font-size: 14px; color: #fff; margin-bottom: 14px; letter-spacing: .02em; }
.ejm-footer ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ejm-footer a{ color: #C7C4D6; font-size: 14px; text-decoration: none; }
.ejm-footer a:hover{ color: #fff; }
.ejm-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 36px; padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: #C7C4D6;
}
.ejm-footer-bottom ul{ flex-direction: row; gap: 18px; flex-wrap: wrap; }
@media (max-width: 900px){
  .ejm-footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .ejm-footer-top{ grid-template-columns: 1fr; }
}

/* =========================================================================
   14. HERO (front page)
   ========================================================================= */
.ejm-hero{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 40px 0 8px; }
.ejm-hero h1{ font-size: 52px; margin-bottom: 16px; }
.ejm-hero-chapo{ font-size: 18px; color: var(--ink); max-width: 46ch; margin-bottom: 24px; }
.ejm-hero-proof{ display: flex; gap: 22px; flex-wrap: wrap; margin: 22px 0 0; list-style: none; padding: 0; }
.ejm-hero-proof li{ font-size: 14px; }
.ejm-hero-proof strong{ display: block; font-family: var(--font-display); font-size: 24px; }
.ejm-hero-form{ display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ejm-hero-form select{
  flex: 1 1 220px;
  padding: 14px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  background: var(--card);
}
@media (max-width: 900px){
  .ejm-hero{ grid-template-columns: 1fr; }
  .ejm-hero h1{ font-size: 38px; }
}

/* =========================================================================
   15. ARTICLE
   ========================================================================= */
.ejm-breadcrumb{ list-style: none; display: flex; gap: 6px; flex-wrap: wrap; padding: 0; margin: 0 0 18px; font-size: 13px; color: var(--ink-soft); }
.ejm-breadcrumb a{ color: var(--ink-soft); text-decoration: none; }
.ejm-breadcrumb a:hover{ color: var(--link); }
.ejm-breadcrumb li:not(:last-child)::after{ content: "/"; margin-left: 6px; color: var(--accent-line); }

.ejm-article-head{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: start; padding: 28px 0 36px; }
.ejm-article-head h1{ font-size: 42px; }
.ejm-article-chapo{ font-size: 18px; color: var(--ink-soft); margin-bottom: 18px; }
.ejm-article-meta{ display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-soft); }
.ejm-article-meta img{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ejm-article-meta a{ color: var(--ink); font-weight: 700; text-decoration: none; }
.ejm-article-thumb{ border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 12px 32px rgba(22,21,29,.16); margin-bottom: 8px; }
.ejm-article-thumb img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; max-height: 440px; }
@media (max-width: 900px){
  .ejm-article-head{ grid-template-columns: 1fr; }
  .ejm-article-head h1{ font-size: 32px; }
}

.ejm-article-layout{ display: grid; grid-template-columns: minmax(0,720px) 1fr; gap: 40px; align-items: start; padding-bottom: 56px; }
.ejm-article-body{ font-size: 18px; line-height: 1.75; }
.ejm-article-body h2{ font-size: 28px; margin-top: 1.6em; }
.ejm-article-body h3{ font-size: 22px; margin-top: 1.4em; }
.ejm-article-body p{ margin-bottom: 1.3em; }
.ejm-article-body strong{ color: var(--ink); }
.ejm-article-body a{ font-weight: 800; text-decoration-thickness: 3px; text-decoration-color: var(--link); text-underline-offset: 3px; }
.ejm-article-body a:hover{ background: var(--tint-pink); }
.ejm-article-body img{ border-radius: var(--radius-card); margin: 28px 0; aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.ejm-article-body figure{ margin: 28px 0; }
.ejm-article-body figcaption{ font-size: 13px; color: var(--ink-soft); margin-top: 8px; }
@media (max-width: 1080px){ .ejm-article-layout{ grid-template-columns: 1fr; } }

.ejm-sidebar{ position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; align-self: start; }
.ejm-side-box{ background: var(--card); border: 2px solid var(--tint-pink); border-radius: var(--radius-card); padding: 18px 20px; }
.ejm-side-box h4{ font-family: var(--font-body); font-weight: 800; font-size: 14px; margin: 0 0 12px; }
.ejm-toc ol{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: toc; }
.ejm-toc li{ counter-increment: toc; font-size: 14px; }
.ejm-toc a{ color: var(--ink); text-decoration: none; }
.ejm-toc a:hover{ color: var(--link); }
.ejm-toc li::before{ content: counter(toc) "."; color: var(--link); font-weight: 800; margin-right: 6px; }
.ejm-side-cta{ background: var(--accent); border: none; }
.ejm-side-cta p{ font-size: 14px; margin-bottom: 12px; }
.ejm-side-ad{ background: var(--bg); border-style: dashed; text-align: center; font-size: 12px; color: var(--ink-soft); }

.ejm-inline-form h4{ font-family: var(--font-body); font-weight: 800; font-size: 15px; margin: 0 0 14px; }
.ejm-inline-form .ejm-form-nav{ margin-top: 4px; }
.ejm-inline-form .ejm-choice{ padding: 12px 14px; }
.ejm-side-cta.ejm-side-box{ padding: 20px; }

.ejm-toc-inline{ background: var(--tint-sky); border-radius: var(--radius-card); padding: 20px 24px; margin: 24px 0 32px; }
.ejm-toc-inline summary{ font-weight: 800; cursor: pointer; }
.ejm-toc-inline ol{ margin: 12px 0 0; padding-left: 1.2em; }
/* One table of contents per screen size, never two at once:
   the sticky sidebar box owns it from 1081px up, the collapsible <details> owns it below. */
@media (min-width: 1081px){ .ejm-toc-inline{ display: none; } }
@media (max-width: 1080px){ .ejm-sidebar .ejm-toc{ display: none; } }

/* AR-088: an article-authored in-page table of contents (plain <ul> of #anchor
   links) is a second, duplicate summary on top of the thème's own sidebar/mobile
   one — hidden outright rather than styled, in both
   single.php and page-country.php. */
.ejm-article-body ul:has(> li > a[href^="#"]){ display: none; }

/* One Sources component, everywhere: the theme's own .ejm-sources box AND the
   content-authored .sb-sources block (older articles) render identically —
   name + date, never a clickable link. */
.ejm-sources, .sb-sources{ margin-top: 44px; padding: 20px 22px; background: var(--bg); border-radius: var(--radius-card); border: 1px solid var(--accent-line); }
.ejm-sources h3, .sb-sources h2, .sb-sources h3{ font-size: 15px; font-family: var(--font-body); font-weight: 800; margin: 0 0 10px; }
.ejm-sources ul, .sb-sources ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.sb-sources li{ margin: 0; }
.sb-sources a{ color: inherit; text-decoration: none; pointer-events: none; }

/* GD-044: FAQ questions expand on click, never a stack of bare H3s. */
.ejm-faq-item{ border-top: 1px solid var(--tint-pink); padding: 18px 4px; }
.ejm-faq-item:first-of-type{ border-top: none; padding-top: 0; }
.ejm-faq-item summary{ cursor: pointer; font-weight: 800; font-size: 18px; font-family: var(--font-display); list-style: none; padding-right: 28px; position: relative; }
.ejm-faq-item summary::-webkit-details-marker{ display: none; }
.ejm-faq-item summary::after{ content: "+"; position: absolute; right: 0; top: 0; color: var(--link); font-size: 22px; }
.ejm-faq-item[open] summary::after{ content: "–"; }
.ejm-faq-item p{ margin-top: 12px; }

/* the native "Get matched" ad dropped mid-article. */
.ejm-native-ad{ display: flex; gap: 20px; align-items: center; margin: 40px 0; background: var(--tint-pink); border-radius: var(--radius-card); padding: 22px; box-shadow: var(--shadow-card); }
.ejm-native-ad img{ width: 160px; height: 120px; border-radius: var(--radius-card); object-fit: cover; flex-shrink: 0; margin: 0; }
.ejm-native-ad-body{ flex: 1; min-width: 0; }
.ejm-native-ad-body h3{ font-size: 20px; margin: 4px 0 8px; }
.ejm-native-ad-body p{ font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
@media (max-width: 640px){
  .ejm-native-ad{ flex-direction: column; }
  .ejm-native-ad img{ width: 100%; height: 160px; }
}

.ejm-author{
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 40px; padding: 22px; background: var(--card);
  border: 2px solid var(--tint-pink); border-radius: var(--radius-card);
}
.ejm-author img{ width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ejm-author h4{ font-family: var(--font-body); font-size: 16px; margin: 0 0 2px; }
.ejm-author h4 a{ color: var(--ink); text-decoration: none; }
.ejm-author .ejm-author-role{ font-size: 13px; color: var(--link); font-weight: 700; display: block; margin-bottom: 8px; }
.ejm-author p{ font-size: 14px; color: var(--ink-soft); margin: 0; }

.ejm-related{ padding: 8px 0 0; }
.ejm-related h3{ font-size: 22px; margin-bottom: 18px; }

/* Report-card table (styled article table) */
.sbs_tableau{ overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
.sbs_tableau table{ min-width: 480px; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.sbs_tableau thead th{ background: var(--ink); color: #fff; text-align: left; padding: 12px 16px; font-size: 14px; white-space: nowrap; }
.sbs_tableau tbody td{ padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--bg); }
.sbs_tableau tbody tr:nth-child(even){ background: var(--tint-sky); }
.sbs_tableau tbody tr:last-child td{ border-bottom: none; }

/* Socle infographics styling */
.sbs_lieu, .sbs_tarifs, .sbs_frise, .sbs_jauges{
  display: block; background: var(--card); border: 2px solid var(--tint-pink);
  border-radius: var(--radius-card); padding: 20px 22px; margin: 28px 0;
}
.sbs_lieu_nom, .sbs_tarifs_titre, .sbs_frise_titre, .sbs_jauges_titre{
  display: block; font-family: var(--font-display); font-size: 18px; margin-bottom: 12px;
}
.sbs_lieu_adresse, .sbs_lieu_acces{ display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 4px; }
.sbs_lieu_carte{ display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; }
.sbs_icone_repere{ fill: var(--link); }

.sbs_tarif{ display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sbs_tarif_libelle{ flex: 0 0 40%; font-size: 14px; color: var(--ink-soft); }
.sbs_tarif_barre{ flex: 1; width: 100%; height: 30px; --tarif-fill: var(--link); }
.sbs_tarif_barre::-webkit-meter-bar{ background: var(--bg); border-radius: var(--radius-pill); border: none; }
.sbs_tarif_barre::-webkit-meter-optimum-value{ background: var(--link); border-radius: var(--radius-pill); }
.sbs_tarifs_notes{ display: block; font-size: 13px; color: var(--ink-soft); margin-top: 8px; }

.sbs_frise{ display: flex; flex-direction: column; gap: 16px; }
.sbs_etape{ display: flex; gap: 14px; align-items: baseline; border-left: 3px solid var(--accent); padding-left: 14px; }
.sbs_etape_date{ font-weight: 800; font-size: 13px; color: var(--link); white-space: nowrap; }
.sbs_etape_titre{ font-size: 15px; }
.sbs_etape_desc{ display: block; font-size: 13px; color: var(--ink-soft); }

.sbs_jauges{ display: flex; gap: 18px; flex-wrap: wrap; }
.sbs_jauge{ text-align: center; flex: 1 1 120px; }
.sbs_jauge_valeur{ display: block; font-family: var(--font-display); font-size: 32px; color: var(--link); }
.sbs_jauge_libelle{ display: block; font-size: 13px; color: var(--ink-soft); }
.sbs_jauge_unite{ font-size: 12px; color: var(--ink-soft); }

.sbs_source{ display: block; margin-top: 12px; font-size: 12px; color: var(--ink-soft); }

/* Theme-side infographics (inc/infographics.php): raw tables/lists never reach the
   reader — comparison cards, fact tiles, and a numbered route instead. */
.ejm-ig{ margin: 28px 0; }
.ejm-ig-caption{ font-family: var(--font-display); font-size: 18px; margin-bottom: 14px; }

.ejm-ig--cards .ejm-ig-grid{ display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 16px; }
@media (max-width: 640px){ .ejm-ig--cards .ejm-ig-grid{ grid-template-columns: 1fr; } }
.ejm-ig-card{
  background: var(--card); border-radius: var(--radius-card); padding: 18px 20px;
  box-shadow: var(--shadow-card); min-width: 0;
}
.ejm-ig-card--pink{ background: var(--tint-pink); }
.ejm-ig-card--sky{ background: var(--tint-sky); }
.ejm-ig-card--mint{ background: var(--tint-mint); }
.ejm-ig-title{ font-family: var(--font-display); font-size: 17px; margin: 0 0 10px; }
.ejm-ig-row{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 5px 0; border-bottom: 1px dashed rgba(22,21,29,.14);
}
.ejm-ig-row:last-child{ border-bottom: none; }
.ejm-ig-lab{ font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.ejm-ig-val{ font-weight: 800; color: var(--ink); font-size: 14px; text-align: right; overflow-wrap: anywhere; }
/* a value that IS a figure gets staged like the DA's salary notes (big,
   Paytone One, accent-toned) instead of reading as another line of body text. */
.ejm-ig-val--num{ font-family: var(--font-display); font-size: 22px; color: var(--link); text-align: left; display: block; }

.ejm-ig--tiles{ display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 14px; }
@media (max-width: 640px){ .ejm-ig--tiles{ grid-template-columns: 1fr; } }
.ejm-ig-tile{
  border-radius: var(--radius-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.ejm-ig-tile--pink{ background: var(--tint-pink); }
.ejm-ig-tile--sky{ background: var(--tint-sky); }
.ejm-ig-tile--mint{ background: var(--tint-mint); }
.ejm-ig-tile .ejm-ig-lab{ font-size: 11px; }
.ejm-ig-tile .ejm-ig-val{ font-family: var(--font-display); font-size: 20px; text-align: left; color: var(--ink); }

.ejm-ig--route{
  list-style: none; margin: 28px 0; padding: 0 0 0 4px; display: flex; flex-direction: column;
}
.ejm-ig-step{
  position: relative; padding: 2px 0 26px 44px; border-left: 3px solid var(--tint-pink);
  margin-left: 17px;
}
.ejm-ig-step:last-child{ padding-bottom: 2px; border-left-color: transparent; }
.ejm-ig-step::before{
  content: attr(data-n);
  position: absolute; left: -20px; top: -3px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  font-family: var(--font-display); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}

/* Gentle, staggered appearance — reuses the generic [data-sbs-reveal] mechanism
   (assets/js/app.js): no JS at all = fully visible immediately (see rule below),
   reduced motion = fully visible immediately, JS present = fades/slides in on scroll. */
.ejm-ig-card, .ejm-ig-tile, .ejm-ig-step{
  transition: opacity .4s ease, transform .4s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-sbs-reveal].is-pending .ejm-ig-card,
[data-sbs-reveal].is-pending .ejm-ig-tile,
[data-sbs-reveal].is-pending .ejm-ig-step{
  opacity: 0; transform: translateY(10px);
}

/* =========================================================================
   16. CATEGORY / RUBRIC PAGE
   ========================================================================= */
.ejm-cat-head-card{ background: var(--card); border-radius: var(--radius-card); padding: 26px 28px; box-shadow: var(--shadow-card); }
.ejm-cat-head{ padding: 36px 0 8px; }
.ejm-cat-head h1{ font-size: 40px; margin-bottom: 8px; }
.ejm-cat-head p{ font-size: 17px; color: var(--ink); max-width: 60ch; }

.ejm-cat-feature{
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: stretch;
  background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  overflow: hidden; margin-bottom: 28px;
}
.ejm-cat-feature img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.ejm-cat-feature-body{ padding: 28px 28px 28px 0; display: flex; flex-direction: column; justify-content: center; }
.ejm-cat-feature h2{ font-size: 26px; }
@media (max-width: 900px){
  .ejm-cat-feature{ grid-template-columns: 1fr; }
  .ejm-cat-feature-body{ padding: 0 22px 22px; }
}

.ejm-post-card{
  background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
}
.ejm-post-card img{ width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.ejm-post-card-body{ padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ejm-post-card h3{ font-size: 18px; margin: 0; }
.ejm-post-card p{ font-size: 14px; color: var(--ink-soft); margin: 0; flex: 1; }
.ejm-post-card .ejm-tag{ align-self: flex-start; }

.ejm-cat-more{ margin-top: 40px; }
.ejm-cat-more summary{
  cursor: pointer; font-weight: 800; padding: 14px 18px; background: var(--tint-sky);
  border-radius: var(--radius-card); list-style: none;
}
.ejm-cat-more summary::-webkit-details-marker{ display: none; }
.ejm-cat-more[open] summary{ border-radius: var(--radius-card) var(--radius-card) 0 0; }
.ejm-cat-more-body{ padding: 18px; background: var(--card); border-radius: 0 0 var(--radius-card) var(--radius-card); border: 1px solid var(--tint-sky); }
.ejm-cat-more-body p{ color: var(--ink-soft); font-size: 15px; }

.ejm-cat-empty{ padding: 40px; text-align: center; background: var(--tint-sky); border-radius: var(--radius-card); }

/* =========================================================================
   17. COUNTRY PAGE
   ========================================================================= */
.ejm-country-hero{ position: relative; border-radius: var(--radius-frame); overflow: hidden; margin: var(--gutter); border: 8px solid var(--accent); }
@media (max-width: 640px){ .ejm-country-hero{ margin: 8px; border-radius: 16px; } }
.ejm-country-hero img{ width: 100%; aspect-ratio: 36/9; object-fit: cover; }
@media (max-width: 640px){ .ejm-country-hero img{ aspect-ratio: 16/9; } }
.ejm-country-hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,21,29,.15) 0%, rgba(22,21,29,.65) 100%);
  display: flex; align-items: flex-end; padding: 32px;
}
.ejm-country-hero h1{ color: #fff; font-size: 40px; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
@media (max-width: 640px){ .ejm-country-hero h1{ font-size: 26px; } }
.ejm-country-hero-overlay .ejm-breadcrumb,
.ejm-country-hero-overlay .ejm-breadcrumb a{ color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.ejm-country-hero-overlay .ejm-breadcrumb li:not(:last-child)::after{ color: rgba(255,255,255,.65); }

.ejm-country-tabs{
  position: sticky; top: 0; z-index: 50; background: var(--card);
  border-bottom: 2px solid var(--tint-pink); overflow-x: auto;
}
.ejm-country-tabs ul{ display: flex; gap: 4px; list-style: none; padding: 0 var(--gutter); margin: 0; }
.ejm-country-tabs a{
  display: block; padding: 16px 14px; white-space: nowrap; text-decoration: none;
  color: var(--ink-soft); font-weight: 700; font-size: 14px; border-bottom: 3px solid transparent;
}
.ejm-country-tabs a.is-active, .ejm-country-tabs a:hover{ color: var(--ink); border-color: var(--accent); }

.ejm-country-fold{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: start; margin: 28px 0 20px; }
.ejm-country-fold .ejm-facts{ margin: 0; }
@media (max-width: 900px){ .ejm-country-fold{ grid-template-columns: 1fr; } }

.ejm-program-card{
  display: grid; grid-template-columns: 160px 1fr; gap: 16px;
  background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  overflow: hidden; margin-bottom: 16px;
}
.ejm-program-card img{ width: 100%; height: 100%; object-fit: cover; }
.ejm-program-card-body{ padding: 16px 18px 16px 0; }
@media (max-width: 640px){ .ejm-program-card{ grid-template-columns: 1fr; } .ejm-program-card-body{ padding: 0 16px 16px; } }

/* =========================================================================
   18. FORMS (multi-step lead form)
   ========================================================================= */
.ejm-form-card{ background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 28px; }
.ejm-form-step{ display: none; }
.ejm-form-step.is-active{ display: block; }
.ejm-form-progress{ display: flex; gap: 6px; margin-bottom: 22px; }
.ejm-form-progress span{ flex: 1; height: 6px; border-radius: 4px; background: var(--tint-pink); }
.ejm-form-progress span.is-done{ background: var(--accent); }
.ejm-form-step-label{ font-size: 13px; font-weight: 800; color: var(--link); margin-bottom: 6px; display: block; }
.ejm-form-question{ font-family: var(--font-display); font-size: 24px; margin-bottom: 20px; }
.ejm-choice-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
@media (max-width: 480px){ .ejm-choice-grid{ grid-template-columns: 1fr; } }
.ejm-choice{
  display: block; padding: 16px 18px; border-radius: var(--radius-card);
  border: 2px solid var(--tint-pink); background: var(--bg); cursor: pointer; font-weight: 700;
}
.ejm-choice input{ position: absolute; opacity: 0; pointer-events: none; }
.ejm-choice:hover{ border-color: var(--accent); }
.ejm-choice.is-selected, .ejm-choice:has(input:checked){ border-color: var(--accent); background: var(--tint-pink); }

.ejm-field{ margin-bottom: 18px; }
.ejm-field label{ display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.ejm-field input, .ejm-field textarea, .ejm-field select{
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--tint-pink);
  font-family: var(--font-body); font-size: 15px; background: var(--bg);
}
.ejm-field input:focus, .ejm-field textarea:focus, .ejm-field select:focus{ border-color: var(--accent); outline: none; }
.ejm-field-error{ color: var(--link); font-size: 13px; margin-top: 4px; display: none; }
.ejm-field.has-error input, .ejm-field.has-error textarea{ border-color: var(--link); }
.ejm-field.has-error .ejm-field-error{ display: block; }

.ejm-form-nav{ display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 12px; }
.ejm-form-consent{ font-size: 12px; color: var(--ink-soft); margin-top: 16px; }
.ejm-form-consent a{ color: var(--ink-soft); }

.ejm-form-modal{
  position: fixed; inset: 0; z-index: 500; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(22,21,29,.6);
}
.ejm-form-modal.is-open{ display: flex; }
.ejm-form-modal-box{ background: var(--card); border-radius: var(--radius-frame); max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 30px; position: relative; }
.ejm-form-modal-close{ position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); border: none; display: flex; align-items: center; justify-content: center; }

.ejm-form-success{ text-align: center; padding: 20px 0; }
.ejm-form-success svg{ width: 56px; height: 56px; color: var(--visa-easy); margin: 0 auto 16px; }

/* Exit-intent popup */
.ejm-exit{
  position: fixed; inset: 0; z-index: 600; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(22,21,29,.65);
}
.ejm-exit.is-open{ display: flex; }
.ejm-exit-box{
  background: var(--card); border-radius: var(--radius-frame); max-width: 720px; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; position: relative; max-height: 92vh;
}
.ejm-exit-box img{ width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.ejm-exit-body{ padding: 32px; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.ejm-exit-body h3{ font-size: 26px; }
.ejm-exit-body ul{ list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ejm-exit-body li::before{ content: "✓ "; color: var(--visa-easy); font-weight: 800; }
.ejm-exit-close{ position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; border: none; z-index: 2; display: flex; align-items: center; justify-content: center; }
@media (max-width: 640px){ .ejm-exit-box{ grid-template-columns: 1fr; } .ejm-exit-box img{ min-height: 160px; } }

/* =========================================================================
   19. CALCULATOR TOOL
   ========================================================================= */
.ejm-calc{ display: grid; grid-template-columns: 380px 1fr; gap: 32px; align-items: start; }
.ejm-calc-settings{ background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 26px; }
.ejm-calc-result{ display: flex; flex-direction: column; gap: 24px; }
.ejm-calc-numbers{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ejm-calc-number{ background: var(--card); border-radius: var(--radius-card); padding: 20px; text-align: center; box-shadow: var(--shadow-card); }
.ejm-calc-number.is-highlight{ background: var(--accent); }
.ejm-calc-number strong{ display: block; font-family: var(--font-display); font-size: 34px; }
.ejm-calc-number span{ font-size: 13px; color: var(--ink-soft); }
.ejm-calc-bars{ background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 24px; }
.ejm-calc-bar-row{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ejm-calc-bar-label{ flex: 0 0 130px; font-size: 14px; font-weight: 700; }
.ejm-calc-bar-track{ flex: 1; background: var(--bg); border-radius: var(--radius-pill); height: 22px; overflow: hidden; }
.ejm-calc-bar-fill{ height: 100%; background: var(--ink-soft); border-radius: var(--radius-pill); }
.ejm-calc-bar-fill.is-selected{ background: var(--link); }
.ejm-calc-source{ font-size: 12px; color: var(--ink-soft); margin-top: 16px; }
.ejm-calc-notverified{ font-style: italic; color: var(--ink-soft); }
@media (max-width: 900px){ .ejm-calc{ grid-template-columns: 1fr; } .ejm-calc-numbers{ grid-template-columns: 1fr; } }

/* =========================================================================
   20. PAGE / LEGAL / AUTHOR / 404 / SEARCH
   ========================================================================= */
.ejm-page-head{ padding: 40px 0 8px; }
.ejm-page-head h1{ font-size: 38px; }
.ejm-page-body{ padding: 8px 0 60px; font-size: 17px; line-height: 1.75; }
.ejm-page-body h2{ font-size: 26px; margin-top: 1.4em; }
.ejm-page-body p{ max-width: 720px; }

.ejm-author-head{ display: flex; gap: 20px; align-items: center; padding: 40px 0; }
.ejm-author-head img{ width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.ejm-author-head h1{ font-size: 32px; margin-bottom: 4px; }
.ejm-author-specialty{ color: var(--link); font-weight: 700; }
.ejm-author-bio{ max-width: 680px; font-size: 16px; margin: 18px 0 40px; color: var(--ink); }
.ejm-author-since{ font-size: 13px; color: var(--ink-soft); }

.ejm-404{ text-align: center; padding: 90px var(--gutter); }
.ejm-404 h1{ font-size: 90px; margin-bottom: 6px; }
.ejm-404 p{ font-size: 18px; color: var(--ink-soft); margin-bottom: 26px; }

.ejm-search-form{ display: flex; gap: 10px; max-width: 560px; margin: 24px 0 40px; }
.ejm-search-form input{ flex: 1; padding: 14px 18px; border-radius: var(--radius-pill); border: 2px solid var(--ink); font-size: 16px; }

/* =========================================================================
   21. UTILITIES
   ========================================================================= */
.ejm-visually-hidden{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ejm-skip-link{ position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 999; }
.ejm-skip-link:focus{ left: 8px; top: 8px; }
[data-sbs-reveal]{ opacity: 1; }
@media (min-width: 1px){
  [data-sbs-reveal]{ transition: opacity .35s ease, transform .35s ease; }
  [data-sbs-reveal].is-pending{ opacity: 0; transform: translateY(12px); }
}
.ejm-cookie{
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  background: var(--ink); color: #fff; padding: 16px var(--gutter);
  display: none; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ejm-cookie.is-open{ display: flex; }
.ejm-cookie p{ margin: 0; font-size: 14px; max-width: 640px; }
.ejm-cookie a{ color: #fff; }

/* =========================================================================
   PASSE 3 (orchestrateur 27/09) — mesures navigateur : débordements et orphelins
   ========================================================================= */
/* Radios cachés des choix : ancrés dans leur carte, sinon ils élargissent la page contact de 1 047 px. */
.ejm-choice{ position: relative; }
.ejm-choice input{ left: 0; top: 0; width: 1px; height: 1px; margin: 0; }
/* Cartes pays du héros : elles partagent la colonne au lieu d'en sortir (38 px à 1440, 326 px à 390). */
.ejm-flashcards{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; }
.ejm-flashcard{ width: auto; min-width: 0; }
@media (max-width: 640px){
  .ejm-flashcards{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ejm-flashcard:nth-child(3){ display: none; }
}
/* Tuiles « What you'll earn » : 4 tuiles = une ligne de 4, jamais 3 + 1 orpheline. */
.ejm-notes{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin-left: auto; margin-right: auto; }
.ejm-notes > .ejm-note{ width: auto; min-width: 0; }
@media (max-width: 900px){ .ejm-notes{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Formulaire intégré : une étape à la fois (sans JS, tout reste visible et utilisable). */
.ejm-inline-form.is-ready .ejm-inline-step:not(.is-active){ display: none; }
/* Sur le fond rose de l'encart, le bouton rose disparaissait : bouton d'envoi en encre. */
.ejm-inline-form .ejm-btn--primary{ background: var(--ink); color: #fff; border-color: var(--ink); }
.ejm-inline-form .ejm-btn--primary:hover{ background: #000; }
/* Infographies dans la colonne de lecture : 2 colonnes max, libellé au-dessus de la valeur, jamais un mot coupé. */
.ejm-article-body .ejm-ig--cards .ejm-ig-grid, .entry-content .ejm-ig--cards .ejm-ig-grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ejm-ig--cards .ejm-ig-card:last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; }
.ejm-ig-row{ display: block; }
.ejm-ig-row .ejm-ig-lab{ display: block; margin-bottom: 2px; }
.ejm-ig-val{ text-align: left; overflow-wrap: break-word; word-break: normal; hyphens: manual; display: block; }
.ejm-ig-val--num{ font-size: clamp(18px, 2.2vw, 24px); line-height: 1.15; }

/* =========================================================================
   PASSE 4 (peaufiner 27/09) — équilibre hero, bandeau cookies, recherche
   ========================================================================= */
/* Hero: the 3-card row left ~123px of pink void under itself vs. the text
   column (AC-002) — because a single row's height is capped by its shortest
   content while the text column runs the full height of the frame. Stacked
   as a small tilted cluster instead (still the "grappe" of the DA, procédé 4:
   nth-child rotate/offset already assumed a cluster, not a rigid grid), it
   naturally fills the same vertical band. Below 900px the hero already goes
   single-column, so this only applies where the two columns sit side by side. */
@media (min-width: 901px){
  .ejm-hero{ align-items: stretch; }
  .ejm-flashcards{ display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 4px 12px; }
  .ejm-flashcards .ejm-flashcard{ width: 100%; }
}

/* Cookie bar: compact on mobile so it never sits over a CTA/button for the
   whole time it's up, and the page gains matching bottom padding while it's
   open so nothing at the true end of the page stays hidden under it. */
@media (max-width: 640px){
  .ejm-cookie{ padding: 10px 14px; gap: 10px; }
  .ejm-cookie p{ font-size: 12px; }
  .ejm-cookie .ejm-btn{ padding: 8px 14px; font-size: 13px; }
}
body.ejm-cookie-open{ padding-bottom: var(--ejm-cookie-h, 80px); }
/* Tuiles de salaire sur téléphone : une par ligne, le chiffre long reste entier dans sa tuile. */
@media (max-width: 520px){
  .ejm-notes{ grid-template-columns: minmax(0, 1fr); max-width: 360px; }
  .ejm-note-value{ font-size: 26px; overflow-wrap: break-word; }
}