/*
Theme Name: Weyou Events
Theme URI: https://preview.weyou-ai.com/
Author: OpenAI Codex
Description: Theme WordPress custom pour les événements Weyou avec ACF.
Version: 0.1.0
Text Domain: weyou-events
*/

/* ─────────────────────────────────────────────────────────────
   Weyou Events theme
   Palette driven by dynamic event variables
   ───────────────────────────────────────────────────────────── */

:root {
  --teal-0:    var(--color-primary-dark, #171938);
  --teal-1:    var(--color-primary, #22254B);
  --teal-2:    var(--color-secondary-dark, #2C3275);
  --teal-3:    var(--color-secondary, #353B8F);
  --teal-card: var(--color-card, #151734);

  --mint-header: var(--color-header-bg, #F2F3FB);
  --mint-bg:     var(--color-section-bg, #F6F7FD);
  --mint-bg-2:   var(--color-section-bg-2, #FBFBFE);
  --card-light:  #FFFFFF;

  --accent:      var(--color-accent, #E85643);
  --accent-2:    var(--color-secondary, #353B8F);
  --accent-soft: rgba(232, 86, 67, 0.14);

  /* Text */
  --text-d:      #E8F1EF;  /* primary text on dark */
  --text-d-dim:  rgba(232, 241, 239, 0.72);
  --text-d-faint:rgba(232, 241, 239, 0.50);
  --text-l:      #0C2329;  /* primary text on light */
  --text-l-dim:  rgba(12, 35, 41, 0.72);

  /* Lines */
  --line-d:      rgba(255, 255, 255, 0.08);
  --line-d-str:  rgba(255, 255, 255, 0.16);
  --line-l:      rgba(12, 35, 41, 0.10);
  --line-l-str:  rgba(12, 35, 41, 0.16);

  --radius: 14px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--teal-1, #0F3038);
}

body {
  font-family: var(--font-sans);
}

.hrm-root {
  background: var(--teal-1, #0F3038);
  color: var(--text-d);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
}

.hrm-anchor {
  position: relative;
  display: block;
  top: -120px;
  visibility: hidden;
}

/* ─── Layout ─── */
.hrm-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 720px) { .hrm-container { padding: 0 20px; } }

.hrm-section {
  padding: 110px 0;
}
.hrm-section--tight { padding: 72px 0; }
@media (max-width: 720px) {
  .hrm-section { padding: 64px 0; }
  .hrm-section--tight { padding: 48px 0; }
}

/* Light section override */
.hrm-section--light {
  background: var(--mint-bg);
  color: var(--text-l);
  position: relative;
}
.hrm-section--light .hrm-eyebrow { color: var(--accent); }
.hrm-section--light .hrm-h2,
.hrm-section--light h3,
.hrm-section--light h4 { color: var(--text-l); }
.hrm-section--light p { color: var(--text-l-dim); }

/* Very dark section (solutions digitales) */
.hrm-section--dark {
  background: var(--teal-0);
  color: var(--text-d);
  position: relative;
}
/* Thin teal top border accent for dark sections */
.hrm-section--dark::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 180px;
  height: 3px;
  background: var(--accent);
}
.hrm-section--light::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 180px;
  height: 3px;
  background: var(--accent);
}

/* ─── Reusable primitives ─── */
.hrm-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}

.hrm-h1, .hrm-h2 {
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}
.hrm-h2 {
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.05;
  margin: 0 0 24px;
}
.hrm-h3 {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.hrm-lead {
  font-size: 17px;
  color: var(--text-d-dim);
  line-height: 1.65;
}
.hrm-section--light .hrm-lead { color: var(--text-l-dim); }

/* ─── Cards ─── */
/* Dark card with soft teal corner glow (matches Solutions screenshot) */
.hrm-card-dark {
  background: var(--teal-card);
  border: 1px solid var(--line-d);
  border-radius: var(--radius);
  padding: 32px 30px;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.hrm-card-dark::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, var(--accent-glow-strong), transparent 65%);
  pointer-events: none;
  filter: blur(10px);
}
.hrm-card-dark:hover {
  transform: translateY(-3px);
  border-color: var(--accent-border);
}

/* Light card with soft teal corner glow (matches Profils screenshot) */
.hrm-card-light {
  background: var(--card-light);
  border-radius: var(--radius);
  padding: 30px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(12, 35, 41, 0.04);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.hrm-card-light::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--accent-soft), transparent 65%);
  pointer-events: none;
}
.hrm-card-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(12, 35, 41, 0.08);
}

/* ─── Buttons ─── */
.hrm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
/* Primary = teal gradient pill with white text */
.hrm-btn--primary {
  background: linear-gradient(90deg, var(--accent-gradient-start) 0%, var(--accent-gradient-end) 100%);
  color: #ffffff;
  box-shadow: 0 6px 20px -8px var(--accent-glow-strong);
}
.hrm-btn--primary:hover { transform: translateY(-1px); }

/* Secondary / ghost = transparent with border (on dark) or dark outline (on light) */
.hrm-btn--ghost {
  background: transparent;
  color: var(--text-d);
  border-color: rgba(232, 241, 239, 0.4);
}
.hrm-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.hrm-section--light .hrm-btn--ghost {
  color: var(--text-l);
  border-color: rgba(12, 35, 41, 0.3);
}
.hrm-section--light .hrm-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Reveal on scroll ─── */
.hrm-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.hrm-reveal.is-in { opacity: 1; transform: translateY(0); }
.hrm-reveal[data-delay="1"] { transition-delay: .08s; }
.hrm-reveal[data-delay="2"] { transition-delay: .16s; }
.hrm-reveal[data-delay="3"] { transition-delay: .24s; }
.hrm-reveal[data-delay="4"] { transition-delay: .32s; }

/* ─── Topbar — dark teal strip ─── */
.hrm-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  font-size: 13px;
  color: var(--text-d-dim);
  background: var(--teal-3);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hrm-topbar__editions,
.hrm-topbar__socials {
  display: flex;
  align-items: center;
  gap: 22px;
}
.hrm-topbar a {
  color: var(--text-d-dim);
  text-decoration: none;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hrm-topbar a:hover { color: var(--text-d); }
.hrm-topbar__socials .pipe { color: rgba(255,255,255,0.2); }
.hrm-topbar__lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-size: 12px;
  color: var(--text-d);
  margin-right: 8px;
}
.hrm-topbar__lang .sep { color: rgba(255,255,255,0.35); margin: 0 4px; }
.hrm-topbar__lang a { color: var(--text-d-dim); padding: 0; gap: 0; }
.hrm-topbar__lang a.active { color: var(--text-d); font-weight: 600; }

/* ─── Nav — mint header band with DARK text ─── */
.hrm-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mint-header);
  transition: box-shadow .3s var(--ease);
}
.hrm-nav.is-scrolled {
  box-shadow: 0 4px 16px rgba(10, 33, 40, 0.12);
}
.hrm-nav__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.hrm-nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.hrm-nav__logo img {
  height: 68px;
  width: auto;
  display: block;
}
/* ═══════════════════════════════════════════════════════════
   NAV — bouton MENU unique (desktop + mobile)
   ═══════════════════════════════════════════════════════════ */
.hrm-nav__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* CTA primaire dans la nav (desktop) */
.hrm-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background .2s, transform .2s;
  white-space: nowrap;
}
.hrm-nav__cta:hover { background: var(--accent-dark, #00a88f); transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════
   Bouton MENU — pill dark, click animation radial + burger→X
   ═══════════════════════════════════════════════════════════ */
.hrm-menubtn {
  --_btn-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --_btn-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--teal-1, #22254B);
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 2px 6px rgba(15,48,56,0.12),
    0 8px 24px -10px rgba(15,48,56,0.35);
  transition: transform .2s var(--_btn-ease), box-shadow .3s var(--_btn-ease);
  z-index: 62;
}
.hrm-menubtn::before {
  /* radial ink that expands from center on click */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(53, 59, 143, 0.45) 0%, var(--teal-1, #22254B) 60%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .5s var(--_btn-ease);
  z-index: -1;
}
.hrm-menubtn::after {
  /* subtle sheen on hover */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s var(--_btn-ease);
  z-index: -1;
  pointer-events: none;
}
.hrm-menubtn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 4px 10px rgba(15,48,56,0.18), 0 14px 34px -12px rgba(15,48,56,0.45); }
.hrm-menubtn:hover::after { transform: translateX(100%); }
.hrm-menubtn:active { transform: translateY(0) scale(0.96); }

/* Open state: ink expands to fill + color shifts to accent */
.hrm-menubtn.is-open {
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 8px 24px -8px rgba(14,188,157,0.55);
}
.hrm-menubtn.is-open::before {
  background: radial-gradient(circle at center, #1ad4ae 0%, var(--accent) 70%);
  transform: translate(-50%, -50%) scale(40);
}

/* Burger lines → X with elastic morph */
.hrm-menubtn__lines {
  position: relative;
  width: 20px; height: 14px;
  display: inline-block;
  flex: none;
}
.hrm-menubtn__lines span {
  position: absolute;
  left: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform .45s var(--_btn-spring), opacity .2s var(--_btn-ease), width .35s var(--_btn-ease), top .35s var(--_btn-spring), bottom .35s var(--_btn-spring);
}
.hrm-menubtn__lines span:nth-child(1) { top: 1px;    width: 20px; }
.hrm-menubtn__lines span:nth-child(2) { top: 50%;    width: 14px; transform: translateY(-50%); }
.hrm-menubtn__lines span:nth-child(3) { bottom: 1px; width: 10px; margin-left: auto; right: 0; left: auto; }
.hrm-menubtn:hover .hrm-menubtn__lines span:nth-child(2) { width: 20px; }
.hrm-menubtn:hover .hrm-menubtn__lines span:nth-child(3) { width: 20px; }
.hrm-menubtn.is-open .hrm-menubtn__lines span:nth-child(1) {
  top: 6px; width: 20px; transform: rotate(45deg);
}
.hrm-menubtn.is-open .hrm-menubtn__lines span:nth-child(2) { opacity: 0; width: 0; }
.hrm-menubtn.is-open .hrm-menubtn__lines span:nth-child(3) {
  bottom: 6px; width: 20px; transform: rotate(-45deg);
}

/* Label "Menu" / "Fermer" — swap vertical */
.hrm-menubtn__labels {
  position: relative;
  display: inline-block;
  height: 13px;
  min-width: 48px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hrm-menubtn__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  transition: transform .4s var(--_btn-spring), opacity .25s var(--_btn-ease);
}
.hrm-menubtn__label--open   { transform: translateY(0);       opacity: 1; }
.hrm-menubtn__label--close  { transform: translateY(120%);    opacity: 0; }
.hrm-menubtn.is-open .hrm-menubtn__label--open  { transform: translateY(-120%); opacity: 0; }
.hrm-menubtn.is-open .hrm-menubtn__label--close { transform: translateY(0);     opacity: 1; }

@media (max-width: 720px) {
  .hrm-nav__cta { display: none; }
  .hrm-menubtn { padding: 11px 18px 11px 16px; gap: 12px; }
  .hrm-menubtn__labels { min-width: 42px; font-size: 11px; }
}
@media (max-width: 860px) {
  .hrm-topbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   OVERLAY MENU — plein écran dark teal (desktop + mobile)
   Animation : circular reveal depuis le coin du bouton MENU
   ═══════════════════════════════════════════════════════════ */
.hrm-mmenu {
  position: fixed; inset: 0;
  z-index: 60;
  background: var(--teal-1, #22254B);
  pointer-events: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 20px 28px 60px;
  /* origin point set by JS to match the button's center (pixel values) */
  --clip-x: calc(100vw - 80px);
  --clip-y: 48px;
  clip-path: circle(0px at var(--clip-x) var(--clip-y));
  -webkit-clip-path: circle(0px at var(--clip-x) var(--clip-y));
  transition: clip-path .9s cubic-bezier(0.77, 0, 0.175, 1),
              -webkit-clip-path .9s cubic-bezier(0.77, 0, 0.175, 1);
}
.hrm-mmenu.open {
  pointer-events: auto;
  clip-path: circle(200vmax at var(--clip-x) var(--clip-y));
  -webkit-clip-path: circle(200vmax at var(--clip-x) var(--clip-y));
}

/* Subtle radial highlight that reinforces the expansion origin */
.hrm-mmenu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--clip-x) var(--clip-y),
    rgba(14, 188, 157, 0.22) 0%,
    rgba(14, 188, 157, 0.08) 18%,
    transparent 45%
  );
  opacity: 0;
  transition: opacity .6s ease .2s;
  pointer-events: none;
}
.hrm-mmenu.open::before { opacity: 1; }

/* Stagger children on open */
.hrm-mmenu__head,
.hrm-mmenu__bar,
.hrm-mmenu nav a,
.hrm-mmenu__foot {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s cubic-bezier(0.22, 1, 0.36, 1),
              transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hrm-mmenu.open .hrm-mmenu__head  { opacity: 1; transform: translateY(0); transition-delay: .30s; }
.hrm-mmenu.open .hrm-mmenu__bar   { opacity: 1; transform: translateY(0); transition-delay: .40s; }
.hrm-mmenu.open nav a             { opacity: 1; transform: translateY(0); }
.hrm-mmenu nav a                  { transition-delay: 0s; }
.hrm-mmenu.open nav a:nth-child(1)  { transition-delay: .50s; }
.hrm-mmenu.open nav a:nth-child(2)  { transition-delay: .56s; }
.hrm-mmenu.open nav a:nth-child(3)  { transition-delay: .62s; }
.hrm-mmenu.open nav a:nth-child(4)  { transition-delay: .68s; }
.hrm-mmenu.open nav a:nth-child(5)  { transition-delay: .74s; }
.hrm-mmenu.open nav a:nth-child(6)  { transition-delay: .80s; }
.hrm-mmenu.open nav a:nth-child(7)  { transition-delay: .86s; }
.hrm-mmenu.open nav a:nth-child(8)  { transition-delay: .92s; }
.hrm-mmenu.open nav a:nth-child(9)  { transition-delay: .98s; }
.hrm-mmenu.open nav a:nth-child(10) { transition-delay: 1.04s; }
.hrm-mmenu.open nav a:nth-child(11) { transition-delay: 1.10s; }
.hrm-mmenu.open .hrm-mmenu__foot  { opacity: 1; transform: translateY(0); transition-delay: 1.15s; }

.hrm-mmenu__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 12px;
}
.hrm-mmenu__logo img {
  height: 68px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.hrm-mmenu__close {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: #ffffff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s, transform .3s var(--ease);
  flex: none;
}
.hrm-mmenu__close:hover { background: rgba(255,255,255,0.14); transform: rotate(90deg); }
.hrm-mmenu__close svg { width: 18px; height: 18px; }

.hrm-mmenu__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0 36px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 28px;
}
.hrm-mmenu__bar-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hrm-mmenu__bar-label strong {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  margin-left: 16px;
}
.hrm-mmenu__bar-lang {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-size: 12px;
  gap: 6px;
}
.hrm-mmenu__bar-lang a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-weight: 600;
}
.hrm-mmenu__bar-lang a.active { color: #ffffff; }
.hrm-mmenu__bar-lang .sep { color: rgba(255,255,255,0.25); }

.hrm-mmenu nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: 36px;
}
.hrm-mmenu nav a {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
  line-height: 1.1;
  transition: color .2s, transform .2s;
}
.hrm-mmenu nav a:hover { color: var(--accent); transform: translateX(4px); }

.hrm-mmenu__foot {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
}
.hrm-mmenu__foot a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hrm-mmenu__foot a:hover { color: #ffffff; }

/* Mobile sticky CTA bar */
.hrm-sticky-cta {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 48;
  display: none;
  gap: 0;
  padding: 6px;
  border-radius: 999px;
  background: rgba(15, 48, 56, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 36px rgba(0,0,0,0.4);
}
.hrm-sticky-cta a {
  flex: 1;
  display: inline-flex; justify-content: center; align-items: center;
  padding: 12px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.hrm-sticky-cta a.primary {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
}
.hrm-sticky-cta a.ghost {
  color: var(--text-d);
  background: transparent;
}
@media (max-width: 1100px) { .hrm-sticky-cta { display: flex; } }

/* ─── Hero ─── */
.hrm-hero {
  position: relative;
  background: var(--teal-1);
  padding: 120px 0 140px;
  min-height: 720px;
  overflow: hidden;
}
.hrm-hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 82% 24%, rgba(0, 196, 167, 0.16), transparent 28%),
    linear-gradient(135deg, rgba(10, 33, 40, 0.38) 0%, rgba(15, 48, 56, 0.12) 100%);
  background-size: cover;
  background-position: right center;
  opacity: 1;
  z-index: 0;
}
.hrm-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--teal-1) 0%, rgba(22, 64, 74, 0.4) 25%, transparent 55%);
}
.hrm-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) { .hrm-hero__inner { grid-template-columns: 1fr; gap: 32px; } }

.hrm-hero__left {
  max-width: 680px;
}
.hrm-hero__date {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-d);
  margin-bottom: 20px;
}
.hrm-hero__tagline {
  font-size: 12px;
  color: var(--text-d-dim);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 30px;
  font-weight: 500;
}
.hrm-hero__title {
  font-size: clamp(52px, 7.2vw, 108px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
  color: var(--text-d);
}
.hrm-hero__sub {
  max-width: 560px;
  font-size: 17px;
  color: var(--text-d-dim);
  line-height: 1.6;
  margin-bottom: 40px;
}
.hrm-hero__ctas {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hrm-hero__right {
  display: grid;
  gap: 16px;
  align-self: center;
}
.hrm-hero__card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 28px 30px;
  position: relative;
  overflow: hidden;
}
.hrm-hero__card::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0, 196, 167, 0.15), transparent 65%);
  pointer-events: none;
}
.hrm-hero__card .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--text-d-dim);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hrm-hero__card .val {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--text-d);
}
.hrm-hero__card .desc {
  font-size: 14px;
  color: var(--text-d-dim);
  line-height: 1.5;
}
.hrm-hero__count {
  font-size: 84px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-d);
  margin: 10px 0 6px;
  font-variant-numeric: tabular-nums;
}

/* ─── Concept ─── */
.hrm-concept {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) { .hrm-concept { grid-template-columns: 1fr; gap: 40px; } }

.hrm-concept__media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  background: var(--teal-0);
}
.hrm-concept__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.hrm-concept__body p {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--text-l-dim);
  line-height: 1.7;
}
.hrm-concept__body p strong {
  color: var(--text-l);
  font-weight: 600;
}

/* ─── Steps ─── */
.hrm-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 44px;
}
@media (max-width: 900px) { .hrm-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hrm-steps { grid-template-columns: 1fr; } }

.hrm-step {
  padding: 32px 28px 30px;
}
.hrm-step__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.hrm-step__icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--accent-soft);
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.hrm-step__icon svg { width: 28px; height: 28px; color: var(--accent); }
.hrm-step__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--text-l);
}
.hrm-step__body {
  font-size: 14px;
  color: var(--text-l-dim);
  line-height: 1.55;
  margin: 0;
}

/* ─── Stats ─── */
.hrm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.hrm-stats--count-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .hrm-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .hrm-stats--count-3 > .hrm-reveal:last-child {
    grid-column: 1 / -1;
  }
}

.hrm-stat {
  padding: 40px 28px 34px;
  text-align: left;
}
.hrm-stat__num {
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.hrm-stat__lbl {
  font-size: 13.5px;
  color: var(--text-l-dim);
  line-height: 1.4;
}
.hrm-section--dark .hrm-stat__lbl { color: var(--text-d-dim); }

/* ─── Parcours ─── */
.hrm-parcours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) { .hrm-parcours { grid-template-columns: 1fr; } }

.hrm-parcours__card {
  padding: 40px 34px 36px;
  display: flex;
  flex-direction: column;
  min-height: 340px;
}
.hrm-parcours__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  align-self: flex-start;
  margin-bottom: 18px;
}
.hrm-parcours__card h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--text-l);
}
.hrm-parcours__card p {
  font-size: 15px;
  color: var(--text-l-dim);
  line-height: 1.65;
  margin: 0 0 14px;
}
.hrm-parcours__card p strong { color: var(--text-l); font-weight: 600; }
.hrm-parcours__card .hrm-btn { margin-top: auto; align-self: flex-start; margin-top: 20px; }

/* ─── Contacts ─── */
.hrm-contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) { .hrm-contacts { grid-template-columns: 1fr; } }

.hrm-contact {
  padding: 34px 32px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.hrm-contact__logo {
  width: 80px; height: 80px; flex: none;
  display: grid; place-items: center;
}
.hrm-contact__logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.hrm-contact__body h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-l);
}
.hrm-contact__body .kind {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  font-weight: 700;
}
.hrm-contact__body a {
  color: var(--accent);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  display: block;
  margin-top: 4px;
}
.hrm-contact__body a:hover { color: var(--teal-1); }

/* ─── Weyou Group ─── */
.hrm-wyg {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) { .hrm-wyg { grid-template-columns: 1fr; gap: 32px; } }

.hrm-wyg__body p { color: var(--text-d-dim); margin: 0 0 14px; line-height: 1.65; }
.hrm-wyg__body p strong { color: var(--text-d); font-weight: 600; }
.hrm-section--light .hrm-wyg__body p { color: var(--text-l-dim); }
.hrm-section--light .hrm-wyg__body p strong { color: var(--text-l); }
.hrm-wyg__logo-wrap {
  width: 160px; height: 160px;
  margin-bottom: 28px;
  display: grid; place-items: center;
}
.hrm-wyg__logo-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }

.hrm-wyg__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hrm-wyg__stat {
  padding: 24px 22px;
}
.hrm-wyg__stat .n {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 6px;
}
.hrm-wyg__stat .l {
  font-size: 13px;
  color: var(--text-d-dim);
  line-height: 1.45;
}
.hrm-section--light .hrm-wyg__stat .l { color: var(--text-l-dim); }

/* ─── Digital ─── */
.hrm-digital {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}
@media (max-width: 900px) { .hrm-digital { grid-template-columns: 1fr; } }

.hrm-digital__card {
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hrm-digital__logo {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  position: relative;
  z-index: 1;
}
.hrm-digital__logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.hrm-digital__pill {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(0, 196, 167, 0.08);
  border: 1px solid rgba(0, 196, 167, 0.25);
  display: grid; place-items: center;
  color: var(--accent);
  position: relative;
  z-index: 1;
}
.hrm-digital__pill svg { width: 26px; height: 26px; }
.hrm-digital__card h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--text-d);
  position: relative; z-index: 1;
}
.hrm-digital__card p {
  font-size: 14.5px;
  color: var(--text-d-dim);
  line-height: 1.6;
  margin: 0;
  position: relative; z-index: 1;
}

/* ─── Infos ─── */
.hrm-infos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px) { .hrm-infos { grid-template-columns: 1fr; } }

.hrm-infos__body {
  display: grid;
  gap: 16px;
}
.hrm-infos__block {
  padding: 26px 30px;
}
.hrm-infos__block h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.hrm-infos__block p {
  margin: 4px 0;
  color: var(--text-l-dim);
  font-size: 15px;
}
.hrm-infos__media {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 360px;
  position: relative;
}
.hrm-infos__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ─── Réseau Weyou ─── */
.hrm-reseau {
  padding: 48px 44px 44px;
}
.hrm-reseau__top {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-d);
}
.hrm-reseau__top-logo {
  width: auto; height: 72px;
  display: grid; place-items: center;
  flex: none;
}
.hrm-reseau__top-logo img {
  max-height: 72px;
  width: auto;
  display: block;
  border-radius: 10px;
}
.hrm-reseau__top p { margin: 0; color: var(--text-d-dim); max-width: 560px; font-size: 14.5px; line-height: 1.55; }
.hrm-reseau__top .hrm-btn { margin-left: auto; }

.hrm-reseau__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
@media (max-width: 900px) { .hrm-reseau__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hrm-reseau__grid { grid-template-columns: 1fr; } }

.hrm-reseau__col h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.hrm-reseau__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hrm-reseau__col a {
  color: var(--text-d-dim);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.45;
  transition: color .2s;
}
.hrm-reseau__col a:hover { color: var(--accent); }

/* ─── Footer ─── */
.hrm-footer {
  padding: 32px 0 28px;
  background: var(--teal-0);
}
.hrm-footer__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line-d);
  flex-wrap: wrap;
}
.hrm-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hrm-footer__logo img { height: 64px; }
.hrm-footer__links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 13px;
}
.hrm-footer__links a {
  color: var(--text-d-dim);
  text-decoration: none;
  transition: color .2s;
}
.hrm-footer__links a:hover { color: var(--accent); }
.hrm-footer__copy {
  font-size: 12px;
  color: var(--text-d-faint);
  letter-spacing: 0.14em;
}

.hrm-page-head {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-end;
}

.hrm-page-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hrm-team-grid,
.hrm-gallery-grid,
.hrm-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.hrm-team-card,
.hrm-gallery-tile,
.hrm-logo-tile {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hrm-team-card__initials {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.hrm-team-card h3,
.hrm-logo-tile,
.hrm-gallery-tile {
  margin: 0 0 10px;
}

.hrm-team-card p {
  margin: 0;
  color: inherit;
  opacity: 0.72;
}

.hrm-team-card--dark .hrm-team-card__initials {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-d);
}

.hrm-form-shell {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.hrm-form-shell__row {
  min-height: 52px;
  border: 1px solid var(--line-d);
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: var(--text-d-dim);
}

.hrm-form-shell__row--lg {
  min-height: 120px;
  align-items: flex-start;
  padding-top: 16px;
}

.hrm-gallery-tile,
.hrm-logo-tile {
  text-align: center;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 18px;
}

.hrm-logo-tile--light {
  color: var(--text-l-dim);
}

@media (max-width: 960px) {
  .hrm-page-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .hrm-team-grid,
  .hrm-gallery-grid,
  .hrm-logo-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .hrm-team-grid,
  .hrm-gallery-grid,
  .hrm-logo-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Embed (iOS frame preview) ─── */
.hrm-embed { height: 100%; overflow-y: auto; scroll-behavior: smooth; }
.hrm-embed::-webkit-scrollbar { width: 6px; }
.hrm-embed::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.hrm-embed .hrm-topbar { display: none; }
.hrm-embed .hrm-nav__cta { display: none; }
.hrm-embed .hrm-sticky-cta { display: flex; left: 8px; right: 8px; bottom: 8px; }
.hrm-embed .hrm-steps { grid-template-columns: 1fr; }
.hrm-embed .hrm-stats { grid-template-columns: 1fr 1fr; }
.hrm-embed .hrm-hero__inner,
.hrm-embed .hrm-concept,
.hrm-embed .hrm-parcours,
.hrm-embed .hrm-contacts,
.hrm-embed .hrm-wyg,
.hrm-embed .hrm-digital,
.hrm-embed .hrm-infos { grid-template-columns: 1fr; gap: 18px; }
.hrm-embed .hrm-reseau__grid { grid-template-columns: 1fr 1fr; }
.hrm-embed .hrm-section { padding: 64px 0; }
.hrm-embed .hrm-container { padding: 0 20px; }
.hrm-embed .hrm-hero__title { font-size: 50px; }
.hrm-embed .hrm-hero { min-height: auto; padding: 72px 0 90px; }
.hrm-embed .hrm-hero__count { font-size: 56px; }

/* ════════════════════════════════════════════════════════════
   SUB-PAGES — Banner, CTA band, and page-specific components
   ════════════════════════════════════════════════════════════ */

/* ─── Sub-page Banner (compact hero) ─── */
.hrm-banner {
  position: relative;
  background: var(--teal-0);
  color: var(--text-d);
  padding: 180px 0 90px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}
.hrm-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 110px;
  width: 180px;
  height: 3px;
  background: var(--accent);
}
.hrm-banner__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1000px 480px at 80% 30%, rgba(0,196,167,0.18), transparent 60%),
    radial-gradient(800px 400px at 20% 80%, rgba(20, 184, 166, 0.10), transparent 60%),
    var(--teal-0);
  pointer-events: none;
}
.hrm-banner__inner {
  position: relative;
  max-width: 1100px;
}
.hrm-banner__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.hrm-banner__title {
  font-family: var(--font-serif);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 22px;
  color: var(--text-d);
  font-style: italic;
}
.hrm-banner__title strong {
  font-weight: 500;
  font-style: normal;
  color: var(--accent);
}
.hrm-banner__baseline {
  font-size: 18px;
  color: var(--text-d-dim);
  line-height: 1.6;
  max-width: 720px;
  margin: 0;
}
.hrm-banner__extras {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 820px) {
  .hrm-banner { padding: 150px 0 60px; min-height: 340px; }
  .hrm-banner::before { top: 90px; }
}

/* ─── CTA band (réutilisable) ─── */
.hrm-ctaband {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 40px 44px;
  background: #fff;
  border: 1px solid var(--line-l);
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(12,35,41,0.03), 0 30px 60px -30px rgba(15, 48, 56, 0.12);
  position: relative;
  overflow: hidden;
}
.hrm-ctaband::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
}
.hrm-ctaband__btns { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 820px) {
  .hrm-ctaband { grid-template-columns: 1fr; padding: 28px; }
}

/* ─── Page content — Rich text prose ─── */
.hrm-prose {
  max-width: 880px;
  font-size: 17px;
  line-height: 1.75;
}
.hrm-section--light .hrm-prose { color: var(--text-l-dim); }
.hrm-section--dark .hrm-prose { color: var(--text-d-dim); }
.hrm-prose p { margin: 0 0 18px; }
.hrm-section--light .hrm-prose strong { color: var(--text-l); font-weight: 600; }
.hrm-section--dark .hrm-prose strong { color: var(--text-d); font-weight: 600; }
.hrm-prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 196, 167, 0.4);
  transition: border-color .2s;
}
.hrm-prose a:hover { border-bottom-color: var(--accent); }
.hrm-prose blockquote {
  margin: 28px 0;
  padding: 18px 28px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
}
.hrm-section--light .hrm-prose blockquote { color: var(--text-l); }
.hrm-section--dark .hrm-prose blockquote { color: var(--text-d); }

/* ─── Feature grid (2 or 3 col generic cards) ─── */
.hrm-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.hrm-features--2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .hrm-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .hrm-features, .hrm-features--2col { grid-template-columns: 1fr; } }

.hrm-feature {
  padding: 34px 30px;
  border-radius: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hrm-feature__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 4px;
}
.hrm-feature__icon svg { width: 26px; height: 26px; }
.hrm-feature__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.hrm-feature h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}
.hrm-feature p { font-size: 15px; line-height: 1.6; margin: 0; }

/* ─── Tag list / pill chips ─── */
.hrm-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 22px 0 0;
}
.hrm-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid rgba(0, 196, 167, 0.25);
}
.hrm-section--dark .hrm-tag {
  background: rgba(0, 196, 167, 0.14);
}

/* ─── Split row (image+text alternating) ─── */
.hrm-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin: 56px 0;
}
.hrm-split--reverse .hrm-split__media { order: 2; }
.hrm-split__media {
  aspect-ratio: 4/3;
  border-radius: 20px;
  overflow: hidden;
  background: var(--teal-3);
  position: relative;
}
.hrm-split__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hrm-split__media-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(232, 241, 239, 0.4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.hrm-split h3 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  font-weight: 500;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}
@media (max-width: 900px) {
  .hrm-split { grid-template-columns: 1fr; gap: 32px; margin: 40px 0; }
  .hrm-split--reverse .hrm-split__media { order: 0; }
}

/* ─── Accordion (expandable list) ─── */
.hrm-accordion { margin-top: 40px; }
.hrm-accordion details {
  border-top: 1px solid var(--line-l);
  padding: 0;
}
.hrm-section--dark .hrm-accordion details { border-top-color: var(--line-d); }
.hrm-accordion details:last-child { border-bottom: 1px solid var(--line-l); }
.hrm-section--dark .hrm-accordion details:last-child { border-bottom-color: var(--line-d); }
.hrm-accordion summary {
  list-style: none;
  padding: 22px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color .2s;
}
.hrm-accordion summary::-webkit-details-marker { display: none; }
.hrm-accordion summary:hover { color: var(--accent); }
.hrm-accordion summary::after {
  content: '+';
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--accent);
  transition: transform .3s;
}
.hrm-accordion details[open] summary::after { transform: rotate(45deg); }
.hrm-accordion__body {
  padding: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.7;
}
.hrm-section--light .hrm-accordion__body { color: var(--text-l-dim); }
.hrm-section--dark .hrm-accordion__body { color: var(--text-d-dim); }
.hrm-accordion__body ul { padding-left: 20px; margin: 8px 0; }
.hrm-accordion__body li { margin: 4px 0; }

/* ─── Quote card (témoignage) ─── */
.hrm-quote {
  padding: 36px 38px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line-l);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.hrm-section--dark .hrm-quote {
  background: var(--teal-2);
  border-color: var(--line-d);
}
.hrm-quote::before {
  content: '"';
  position: absolute;
  top: 6px; left: 20px;
  font-family: var(--font-serif);
  font-size: 80px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.25;
}
.hrm-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  padding-top: 12px;
  position: relative; z-index: 1;
}
.hrm-section--light .hrm-quote p { color: var(--text-l); }
.hrm-section--dark .hrm-quote p { color: var(--text-d); }
.hrm-quote__author {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* ─── Number list (steps numbered) ─── */
.hrm-numlist { margin-top: 48px; display: flex; flex-direction: column; gap: 40px; }
.hrm-numlist__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 36px;
  align-items: start;
}
.hrm-numlist__n {
  font-family: var(--font-serif);
  font-size: 72px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.04em;
}
.hrm-numlist__item h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
  margin: 8px 0 14px;
  letter-spacing: -0.02em;
}
.hrm-numlist__item p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.65;
}
.hrm-section--light .hrm-numlist__item p { color: var(--text-l-dim); }
.hrm-section--dark .hrm-numlist__item p { color: var(--text-d-dim); }
@media (max-width: 720px) {
  .hrm-numlist__item { grid-template-columns: 1fr; gap: 8px; }
  .hrm-numlist__n { font-size: 54px; }
}

/* ─── KPI inline row ─── */
.hrm-kpirow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 48px 0;
  padding: 36px 0;
  border-top: 1px solid var(--line-l);
  border-bottom: 1px solid var(--line-l);
}
.hrm-section--dark .hrm-kpirow {
  border-top-color: var(--line-d);
  border-bottom-color: var(--line-d);
}
.hrm-kpirow__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hrm-kpirow__n {
  font-family: var(--font-serif);
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.hrm-kpirow__l {
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.45;
}
.hrm-section--light .hrm-kpirow__l { color: var(--text-l-dim); }
.hrm-section--dark .hrm-kpirow__l { color: var(--text-d-dim); }
@media (max-width: 780px) {
  .hrm-kpirow { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ─── Two-col list (secteurs) ─── */
.hrm-col2list {
  columns: 2;
  column-gap: 48px;
  margin: 32px 0;
}
.hrm-col2list li {
  break-inside: avoid;
  margin-bottom: 10px;
  font-size: 15.5px;
  list-style: none;
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.hrm-col2list li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 10px; height: 1px;
  background: var(--accent);
}
.hrm-section--light .hrm-col2list li { color: var(--text-l-dim); }
.hrm-section--dark .hrm-col2list li { color: var(--text-d-dim); }
@media (max-width: 640px) { .hrm-col2list { columns: 1; } }

/* ─── Breadcrumb / back link (pour banners) ─── */
.hrm-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-d-dim);
  text-decoration: none;
  transition: color .2s;
  margin-bottom: 24px;
}
.hrm-breadcrumb:hover { color: var(--accent); }
.hrm-breadcrumb svg { width: 14px; height: 14px; }

/* ─── iOS embed overrides for sub-page components ─── */
.hrm-embed .hrm-banner { padding: 90px 0 50px; min-height: auto; }
.hrm-embed .hrm-banner::before { top: 70px; }
.hrm-embed .hrm-features,
.hrm-embed .hrm-kpirow { grid-template-columns: 1fr 1fr; }
.hrm-embed .hrm-split { grid-template-columns: 1fr; gap: 24px; }
.hrm-embed .hrm-ctaband { grid-template-columns: 1fr; padding: 24px; }
.hrm-embed .hrm-numlist__item { grid-template-columns: 1fr; gap: 8px; }
.hrm-embed .hrm-numlist__n { font-size: 48px; }
.hrm-embed .hrm-col2list { columns: 1; }