/* ============================================================
   DiaspoBack — Système de design v4
   Référence visuelle : diasporaback.com
   Palette : Vert forêt #1B4332 · Or #D4AC0D · Blanc #FFFFFF
   Fonts : Outfit (titres) + Inter (corps)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Variables ── */
:root {
  /* Couleurs principales — Vert africain + Or chaud */
  --vert:      #1B4332;
  --vert-2:    #2D6A4F;
  --vert-3:    #40916C;
  --vert-4:    #52B788;
  --vert-light:#95D5B2;
  --vert-bg:   rgba(27,67,50,.08);
  --vert-bd:   rgba(27,67,50,.18);

  --or:        #D4AC0D;
  --or-l:      #F0C30F;
  --or-bg:     rgba(212,172,13,.10);
  --or-bd:     rgba(212,172,13,.22);

  --blanc:     #FFFFFF;
  --fond:      #F8FAF9;
  --fond-2:    #F0F5F2;

  --g50:       #F4F7F5;
  --g100:      #E8EFEb;
  --g200:      #C8D8CF;
  --g400:      #7A9A87;
  --g600:      #4A6857;
  --g800:      #2A3D32;
  --g900:      #1A2820;

  --red:       #C0392B;
  --vert-ok:   #27AE60;
  --bleu:      #2471A3;

  /* Typography */
  --ft: 'Outfit', system-ui, sans-serif;
  --fb: 'Inter', system-ui, sans-serif;

  /* Radii */
  --r-xs:  5px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-max: 999px;

  /* Ombres */
  --sh-xs: 0 1px 4px rgba(27,67,50,.07);
  --sh-sm: 0 3px 12px rgba(27,67,50,.10);
  --sh-md: 0 6px 24px rgba(27,67,50,.13);
  --sh-lg: 0 12px 48px rgba(27,67,50,.17);
  --sh-or: 0 6px 24px rgba(212,172,13,.28);

  --max: 1240px;
  --t: .2s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; scroll-behavior: smooth }
body { font-family: var(--fb); background: var(--fond); color: var(--g900); line-height: 1.65; -webkit-font-smoothing: antialiased }
img  { max-width: 100%; height: auto; display: block }
a    { text-decoration: none; color: var(--vert-2); transition: color var(--t) }
a:hover { color: var(--or) }
button, input, select, textarea { font-family: inherit }
ul, ol { padding-left: 1.5rem }
p  { margin-bottom: 1rem }
p:last-child { margin-bottom: 0 }

/* ── Typography ── */
h1,h2,h3,h4,h5,h6 { font-family: var(--ft); font-weight: 700; line-height: 1.15; color: var(--g900) }
h1 { font-size: clamp(1.9rem, 4.5vw, 3.5rem) }
h2 { font-size: clamp(1.5rem, 3vw, 2.4rem) }
h3 { font-size: clamp(1.1rem, 2vw, 1.55rem) }
h4 { font-size: 1.15rem }
.eyebrow { font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--or); display: block }

/* ── Layout ── */
.W  { max-width: var(--max); margin: 0 auto; padding: 0 2rem }
.Wn { max-width: 840px; margin: 0 auto; padding: 0 2rem }
.sec    { padding: 5rem 0 }
.sec-lg { padding: 8rem 0 }
.sec-sm { padding: 3rem 0 }
.g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem }

/* ── Boutons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .72rem 1.5rem; border-radius: var(--r-max); font-size: .875rem; font-weight: 600; cursor: pointer; border: none; transition: all var(--t); white-space: nowrap; line-height: 1; letter-spacing: .1px; font-family: var(--fb) }
.btn-or    { background: var(--or); color: var(--g900); box-shadow: var(--sh-or) }
.btn-or:hover { background: var(--or-l); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(212,172,13,.38) }
.btn-vert  { background: var(--vert); color: #fff }
.btn-vert:hover { background: var(--vert-2); transform: translateY(-2px) }
.btn-blanc { background: #fff; color: var(--vert) }
.btn-blanc:hover { background: var(--fond); transform: translateY(-2px) }
.btn-bord  { background: transparent; color: var(--vert); border: 1.5px solid var(--g200) }
.btn-bord:hover { border-color: var(--or); color: var(--or) }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.22) }
.btn-ghost:hover { background: rgba(255,255,255,.22) }
.btn-sm  { padding: .42rem .9rem; font-size: .78rem }
.btn-lg  { padding: .9rem 2rem; font-size: 1rem }
.btn-xl  { padding: 1rem 2.25rem; font-size: 1.05rem }
.btn-fw  { width: 100%; justify-content: center }

/* ── Badges ── */
.bdg { display: inline-flex; align-items: center; gap: .28rem; font-size: .64rem; font-weight: 700; padding: .2rem .65rem; border-radius: var(--r-max); letter-spacing: .35px; text-transform: uppercase }
.b-or   { background: var(--or-bg);   color: var(--or);     border: 1px solid var(--or-bd) }
.b-vt   { background: var(--vert-bg); color: var(--vert-2); border: 1px solid var(--vert-bd) }
.b-nv   { background: rgba(27,67,50,.07); color: var(--vert) }
.b-ok   { background: rgba(39,174,96,.12); color: var(--vert-ok); border: 1px solid rgba(39,174,96,.22) }
.b-rg   { background: rgba(192,57,43,.09); color: var(--red) }
.pill   { font-size: .7rem; font-weight: 500; padding: .22rem .7rem; border-radius: var(--r-max); background: var(--g50); color: var(--g600); border: 1px solid var(--g100) }

/* ── Cards ── */
.card { background: var(--blanc); border-radius: var(--r-lg); border: 1px solid var(--g100); overflow: hidden; transition: all var(--t) }
.card:hover { border-color: var(--vert-bd); box-shadow: var(--sh-md); transform: translateY(-4px) }
.card-body { padding: 1.5rem }

/* ── Forms ── */
.field { margin-bottom: 1.25rem }
.lbl   { display: block; font-size: .75rem; font-weight: 600; color: var(--g600); margin-bottom: .38rem; letter-spacing: .3px; text-transform: uppercase }
.inp,.sel,.ta { width: 100%; padding: .7rem 1rem; border: 1.5px solid var(--g100); border-radius: var(--r-sm); font-family: var(--fb); font-size: .9rem; color: var(--g900); background: var(--blanc); outline: none; transition: border-color var(--t), box-shadow var(--t) }
.inp:focus,.sel:focus,.ta:focus { border-color: var(--vert-2); box-shadow: 0 0 0 3px rgba(27,67,50,.09) }
.ta  { resize: vertical; min-height: 120px }

/* ── Section header ── */
.sh { text-align: center; margin-bottom: 3.5rem }
.sh .eyebrow { margin-bottom: .7rem }
.sh h2 { margin-bottom: .85rem }
.sh p  { color: var(--g400); font-size: .95rem; max-width: 520px; margin: 0 auto }

/* ── No-results ── */
.no-res { text-align: center; padding: 3rem 1rem; color: var(--g400) }
.no-res .ico { font-size: 2.2rem; margin-bottom: .75rem; display: block }

/* ── Pagination ── */
.pag { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: 2.5rem 0 }
.pag a,.pag span { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 500; border: 1.5px solid var(--g100); color: var(--g400); transition: all var(--t) }
.pag a:hover { border-color: var(--vert-2); color: var(--vert-2) }
.pag .current { background: var(--vert); border-color: var(--vert); color: #fff }

/* ============================================================
   HEADER — Blanc, shadow légère
   ============================================================ */
#masthead {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--g100);
  transition: all var(--t);
}
#masthead.sc { box-shadow: 0 2px 20px rgba(27,67,50,.10) }
.hd   { display: flex; align-items: center; height: 72px; gap: 1.5rem }
.logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex-shrink: 0 }
.logo-em { width: 40px; height: 40px; background: var(--vert); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--ft); font-weight: 800; font-size: 15px; color: #fff; flex-shrink: 0 }
.logo-nm { font-family: var(--ft); font-size: 1.2rem; font-weight: 800; color: var(--vert); letter-spacing: -.3px }
.logo-tg { font-size: .52rem; letter-spacing: 2px; text-transform: uppercase; color: var(--or); display: block; font-weight: 700; margin-top: 1px }
nav.pnav ul { list-style: none; padding: 0; display: flex; align-items: center; gap: .1rem }
nav.pnav ul li a { display: flex; align-items: center; gap: .3rem; padding: .5rem .85rem; color: var(--g600); font-size: .855rem; font-weight: 500; border-radius: var(--r-xs); transition: all var(--t) }
nav.pnav ul li a:hover, nav.pnav ul li.current-menu-item > a { color: var(--vert); background: var(--vert-bg) }
nav.pnav ul li.current-menu-item > a { color: var(--vert); font-weight: 600 }
.hd-act { margin-left: auto; display: flex; align-items: center; gap: .75rem; flex-shrink: 0 }

/* Nav mobile actions — masquées sur desktop */
.nav-mobile-actions { display: none; }
.hd-av  { width: 36px; height: 36px; border-radius: 50%; background: var(--vert); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; color: #fff; cursor: pointer; overflow: hidden; border: 2px solid var(--vert-bd) }
.hd-av img { width: 100%; height: 100%; object-fit: cover }
.mbtn { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; position: relative; z-index: 10000 }
.mbtn span { display: block; width: 22px; height: 2px; background: var(--vert); border-radius: 2px; transition: all .3s ease; transform-origin: center }

/* ============================================================
   HERO — Vert forêt, titre blanc + or
   ============================================================ */
.hero {
  background: var(--vert);
  position: relative; overflow: hidden;
  padding: 7rem 0 6rem;
}
/* Texture subtile */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at 10% 90%, rgba(212,172,13,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(64,145,108,.25) 0%, transparent 55%);
  pointer-events: none;
}
/* Pattern grille fine */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1;
  text-align: center; max-width: 820px; margin: 0 auto;
}
.hero-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(212,172,13,.15);
  border: 1.5px solid rgba(212,172,13,.3);
  border-radius: var(--r-max);
  padding: .35rem 1rem .35rem .6rem;
  margin-bottom: 2rem;
  cursor: pointer;
  transition: background var(--t);
}
.hero-chip:hover { background: rgba(212,172,13,.22) }
.hero-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--or); animation: pulse 2.5s ease-in-out infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }
.hero-chip span { font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--or) }
.hero-h1 {
  font-family: var(--ft);
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  font-weight: 900;
  line-height: 1.06;
  color: #fff;
  margin-bottom: 1.5rem;
  letter-spacing: -.5px;
}
.hero-h1 .or { color: var(--or) }
.hero-desc {
  font-size: clamp(.9rem, 1.5vw, 1.05rem);
  color: rgba(255,255,255,.65);
  line-height: 1.8;
  max-width: 620px;
  margin: 0 auto 2.5rem;
}
/* Barre de recherche hero */
.hero-search {
  background: #fff;
  border-radius: var(--r-max);
  display: flex; align-items: center;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
  max-width: 700px; margin: 0 auto 3rem;
  border: 2px solid transparent;
  transition: border-color var(--t), box-shadow var(--t);
}
.hero-search:focus-within {
  border-color: var(--or);
  box-shadow: 0 8px 40px rgba(0,0,0,.2), 0 0 0 4px rgba(212,172,13,.15);
}
.hero-search-field {
  flex: 1; display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.25rem;
  border-right: 1px solid var(--g100);
}
.hero-search-field:last-of-type { border-right: none }
.hero-search-field .ico { font-size: 1rem; flex-shrink: 0; opacity: .5 }
.hero-search-field input {
  border: none; outline: none; font-family: var(--fb); font-size: .9rem;
  color: var(--g900); width: 100%; background: transparent;
}
.hero-search-field input::placeholder { color: var(--g400) }
.hero-search .btn { margin: .4rem; flex-shrink: 0; font-size: .9rem; padding: .72rem 1.75rem }
/* Stats sous le hero */
.hero-stats {
  display: flex; align-items: center; justify-content: center; gap: 2.5rem;
  flex-wrap: wrap;
}
.hero-stat-val { font-family: var(--ft); font-size: 1.65rem; font-weight: 800; color: #fff; display: block; letter-spacing: -.3px }
.hero-stat-lbl { font-size: .65rem; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.45); margin-top: .1rem }
.hero-stat-sep { width: 1px; height: 40px; background: rgba(255,255,255,.12) }

/* ============================================================
   BANNIÈRES PAGES INTÉRIEURES
   ============================================================ */
.pgbanner { padding: 4rem 0 3rem; position: relative; overflow: hidden }
.pgbanner::before { content: ''; position: absolute; inset: 0; pointer-events: none }
.pgbanner-in { position: relative; z-index: 1 }
.bc { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: rgba(255,255,255,.4); margin-bottom: 1.1rem }
.bc a { color: rgba(255,255,255,.4) } .bc a:hover { color: var(--or) }
.bc sep { opacity: .35 }
.pgbanner h1 { color: #fff; margin-bottom: .4rem }
.pgbanner .sub { color: rgba(255,255,255,.45); font-size: .9rem }
.pgbanner .meta { display: flex; align-items: center; gap: .65rem; margin-top: .85rem; flex-wrap: wrap }
/* Variantes */
.bn-vert  { background: var(--vert) }
.bn-vert::before  { background: radial-gradient(ellipse at 15% 60%, rgba(212,172,13,.1) 0%, transparent 55%) }
.bn-teal  { background: linear-gradient(135deg,#0d3d2b,#1a6647) }
.bn-teal::before  { background: radial-gradient(ellipse at 80% 40%, rgba(64,145,108,.2) 0%, transparent 55%) }
.bn-or    { background: linear-gradient(135deg,#3a2a00,#5a4200) }
.bn-or::before    { background: radial-gradient(ellipse at 80% 40%, rgba(212,172,13,.18) 0%, transparent 55%) }
.bn-diap  { background: linear-gradient(135deg,var(--vert),#0d3d2b) }
.bn-about { background: linear-gradient(135deg,#1a2820,#2a3d32) }
.bn-navy  { background: var(--g900) }
.bn-navy::before  { background: radial-gradient(ellipse at 15% 60%, rgba(212,172,13,.08) 0%, transparent 50%) }

/* ============================================================
   TALENT CARDS
   ============================================================ */
.tc-card { background: var(--blanc); border-radius: var(--r-lg); border: 1px solid var(--g100); overflow: hidden; transition: all var(--t) }
.tc-card:hover { border-color: var(--vert-bd); box-shadow: var(--sh-md); transform: translateY(-4px) }
.tc-head { padding: 1.4rem 1.4rem .9rem; position: relative }
.tc-h-vert  { background: linear-gradient(145deg, var(--vert), var(--vert-2)) }
.tc-h-teal  { background: linear-gradient(145deg, #0d3d2b, #1a6647) }
.tc-h-or    { background: linear-gradient(145deg, #3a2a00, #6b4c10) }
.tc-corner  { position: absolute; top: .85rem; right: .85rem; font-size: .58rem; font-weight: 700; padding: .2rem .6rem; border-radius: var(--r-max); background: rgba(255,255,255,.15); color: #fff; letter-spacing: .5px; text-transform: uppercase }
.tc-av { width: 50px; height: 50px; border-radius: 50%; border: 3px solid rgba(255,255,255,.22); overflow: hidden; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-family: var(--ft); font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .8rem }
.tc-av img { width: 100%; height: 100%; object-fit: cover }
.tc-nm { font-family: var(--ft); font-size: .92rem; font-weight: 700; color: #fff }
.tc-rl { font-size: .7rem; color: rgba(255,255,255,.5); margin-top: .12rem }
.tc-body { padding: 1.1rem 1.4rem }
.tc-loc  { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--g400); margin-bottom: .75rem }
.tc-skills { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .8rem }
.tc-foot { display: flex; align-items: center; justify-content: space-between; padding-top: .8rem; border-top: 1px solid var(--g50); gap: .5rem }
.tc-score { display: flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; color: var(--or) }
.tc-acts { display: flex; gap: .35rem }

/* ============================================================
   JOB CARDS
   ============================================================ */
.jc { background: var(--blanc); border-radius: var(--r-lg); border: 1px solid var(--g100); padding: 1.4rem 1.75rem; display: flex; align-items: flex-start; gap: 1.2rem; transition: all var(--t); text-decoration: none; color: inherit }
.jc:hover { border-color: var(--vert-bd); box-shadow: var(--sh-md); transform: translateY(-2px) }
.jc-logo { width: 50px; height: 50px; border-radius: var(--r-sm); border: 1px solid var(--g100); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; background: var(--g50); flex-shrink: 0; overflow: hidden }
.jc-logo img { width: 100%; height: 100%; object-fit: cover }
.jc-body { flex: 1; min-width: 0 }
.jc-t  { font-family: var(--ft); font-size: .92rem; font-weight: 700; color: var(--g900); margin-bottom: .18rem }
.jc-co { font-size: .78rem; color: var(--g400); margin-bottom: .55rem }
.jc-tags { display: flex; flex-wrap: wrap; gap: .35rem }
.jc-r  { text-align: right; flex-shrink: 0 }
.jc-sal  { font-family: var(--ft); font-size: .88rem; font-weight: 700; color: var(--vert-2); white-space: nowrap }
.jc-date { font-size: .63rem; color: var(--g200); margin-top: .4rem }
.jc-feat { border-left: 3px solid var(--or) }

/* ============================================================
   COMPANY CARDS
   ============================================================ */
.co-card { background: var(--blanc); border-radius: var(--r-lg); border: 1px solid var(--g100); overflow: hidden; transition: all var(--t) }
.co-card:hover { border-color: var(--vert-bd); box-shadow: var(--sh-md); transform: translateY(-3px) }
.co-cover { height: 70px; position: relative }
.co-logo  { position: absolute; bottom: -20px; left: 1.2rem; width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--blanc); border: 2px solid var(--g100); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: var(--sh-xs) }
.co-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px }
.co-body { padding: 1.8rem 1.2rem 1.2rem }
.co-nm   { font-family: var(--ft); font-size: .9rem; font-weight: 700; color: var(--g900); margin-bottom: .15rem }
.co-sec  { font-size: .72rem; color: var(--g400); margin-bottom: .85rem }
.co-stats { display: flex; gap: 1.25rem }
.co-sv   { font-family: var(--ft); font-size: 1.2rem; font-weight: 700; color: var(--g900) }
.co-sl   { font-size: .58rem; text-transform: uppercase; letter-spacing: .5px; color: var(--g400) }

/* ============================================================
   FEATURE CARDS
   ============================================================ */
.feat { background: var(--blanc); border-radius: var(--r-lg); border: 1px solid var(--g100); padding: 2rem 1.75rem; transition: all var(--t) }
.feat:hover { border-color: var(--vert-bd); box-shadow: var(--sh-md); transform: translateY(-4px) }
.feat-ico { width: 50px; height: 50px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 1.2rem }
.fi-or  { background: var(--or-bg); border: 1px solid var(--or-bd) }
.fi-vt  { background: var(--vert-bg); border: 1px solid var(--vert-bd) }
.fi-g   { background: var(--g50); border: 1px solid var(--g100) }
.feat h3 { font-size: .98rem; margin-bottom: .5rem; color: var(--g900) }
.feat p  { font-size: .845rem; color: var(--g400); line-height: 1.65 }

/* ============================================================
   TÉMOIGNAGES
   ============================================================ */
.tst { background: var(--blanc); border-radius: var(--r-lg); border: 1px solid var(--g100); padding: 1.9rem; position: relative; overflow: hidden }
.tst::before { content: '\201C'; font-family: Georgia,serif; font-size: 5rem; color: var(--vert-bg); position: absolute; top: -10px; left: .85rem; line-height: 1; pointer-events: none; color: rgba(27,67,50,.08) }
.tst-txt  { font-size: .875rem; color: var(--g600); line-height: 1.8; margin-bottom: 1.4rem; position: relative; z-index: 1 }
.tst-aut  { display: flex; align-items: center; gap: .7rem }
.tst-av   { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; background: var(--vert-bg); color: var(--vert-2) }
.tst-av img { width: 100%; height: 100%; object-fit: cover }
.tst-nm   { font-size: .85rem; font-weight: 600; color: var(--g900) }
.tst-rl   { font-size: .68rem; color: var(--g400) }
.tst-stars { font-size: .72rem; color: var(--or); margin-bottom: .2rem; letter-spacing: 1px }

/* ============================================================
   COUNTER BAR
   ============================================================ */
.cbar { background: var(--vert); padding: 4rem 0; position: relative; overflow: hidden }
.cbar::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(212,172,13,.08) 0%, transparent 65%) }
.cbar .W { position: relative; z-index: 1 }
.cpt { text-align: center }
.cpt-v { font-family: var(--ft); font-size: 2.6rem; font-weight: 800; color: var(--or); display: block; letter-spacing: -.5px }
.cpt-l { font-size: .68rem; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.4); margin-top: .25rem }

/* ============================================================
   SECTION PLANS D'ABONNEMENT ENTREPRISES (homepage)
   ============================================================ */
.plans-section { background: var(--fond-2); padding: 5.5rem 0 }
.plans-grid-hp { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; max-width: 860px; margin: 0 auto }
.plan-card {
  background: var(--blanc); border-radius: var(--r-xl); overflow: hidden;
  border: 2px solid var(--g100);
  box-shadow: var(--sh-sm);
  transition: all var(--t);
  position: relative;
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg) }
.plan-card.plan-vip { border-color: var(--or) }
.plan-card.plan-vip:hover { box-shadow: var(--sh-or) }
.plan-badge {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-size: .62rem; font-weight: 700; padding: .22rem .7rem;
  border-radius: var(--r-max); text-transform: uppercase; letter-spacing: .5px;
}
.plan-head-basic { background: var(--vert); padding: 2rem 2rem 1.75rem }
.plan-head-vip   { background: linear-gradient(135deg, #3a2a00, #6b4c10); padding: 2rem 2rem 1.75rem }
.plan-nom  { font-family: var(--ft); font-size: 1.4rem; font-weight: 800; color: #fff; margin-bottom: .4rem }
.plan-prix { font-family: var(--ft); font-size: 2.5rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -.5px }
.plan-prix span { font-size: .82rem; font-weight: 400; opacity: .65; margin-left: .2rem }
.plan-tagline { font-size: .78rem; color: rgba(255,255,255,.55); margin-top: .4rem }
.plan-features { padding: 1.75rem 2rem }
.plan-feat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem }
.plan-feat-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .855rem }
.plan-feat-ok   { color: var(--g600) }
.plan-feat-no   { color: var(--g200) }
.plan-feat-ico-ok { color: var(--vert-ok); font-weight: 700; flex-shrink: 0 }
.plan-feat-ico-no { color: var(--g200); flex-shrink: 0 }
.plan-cta { padding: 0 2rem 2rem }
.plan-cta .btn { font-size: 1rem; padding: .9rem }

/* ============================================================
   SECTION DIASPORA
   ============================================================ */
.dsec { background: var(--vert); padding: 5.5rem 0; overflow: hidden }
.dsec-in { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center }
.dsec-t  { font-size: clamp(1.7rem, 3vw, 2.3rem); color: #fff; margin-bottom: 1.2rem; line-height: 1.15 }
.dsec-p  { color: rgba(255,255,255,.5); font-size: .9rem; line-height: 1.8; margin-bottom: 2rem }
.pays-rows { display: flex; flex-direction: column; gap: .85rem }
.pays-row  { display: flex; align-items: center; gap: .7rem }
.pays-flag { font-size: 1.1rem; flex-shrink: 0; width: 26px; text-align: center }
.pays-name { font-size: .78rem; color: rgba(255,255,255,.55); width: 90px; flex-shrink: 0 }
.pays-track { flex: 1; height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden }
.pays-fill  { height: 100%; border-radius: 3px; transition: width 1.8s cubic-bezier(.4,0,.2,1) }
.pays-n    { font-size: .72rem; font-weight: 700; color: #fff; min-width: 30px; text-align: right }

/* ============================================================
   CTA FINALE
   ============================================================ */
.ctaf { background: linear-gradient(135deg, var(--or), #b08c00); padding: 5rem 0; text-align: center; position: relative; overflow: hidden }
.ctaf::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px }
.ctaf .W { position: relative; z-index: 1 }
.ctaf h2 { color: var(--vert); margin-bottom: .7rem }
.ctaf p   { color: rgba(27,67,50,.65); margin-bottom: 2rem; font-size: .975rem }
.ctaf-acts { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap }

/* ============================================================
   FOOTER
   ============================================================ */
#colophon { background: var(--vert); padding: 5rem 0 0; border-top: 1px solid rgba(255,255,255,.06) }
.ft-g  { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.07) }
.ft-desc { font-size: .82rem; color: rgba(255,255,255,.35); line-height: 1.8; margin: 1rem 0 1.4rem; max-width: 270px }
.ft-soc  { display: flex; gap: .4rem }
.ft-soc a { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: .72rem; color: rgba(255,255,255,.5); transition: all var(--t) }
.ft-soc a:hover { background: var(--or); border-color: var(--or); color: var(--vert) }
.ft-ct { font-size: .78rem; color: rgba(255,255,255,.3); margin-top: .5rem; display: flex; align-items: center; gap: .4rem }
.ft-h  { font-family: var(--ft); font-size: .76rem; font-weight: 700; color: #fff; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 1.2rem }
.ft-ul { list-style: none; padding: 0 }
.ft-ul li { margin-bottom: .55rem }
.ft-ul a  { font-size: .82rem; color: rgba(255,255,255,.38); transition: color var(--t) }
.ft-ul a:hover { color: var(--or) }
.ft-bot { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 0; font-size: .72rem; color: rgba(255,255,255,.25); flex-wrap: wrap; gap: .5rem }
.ft-bot a { color: rgba(255,255,255,.25) } .ft-bot a:hover { color: var(--or) }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-wrap { background: var(--g50); min-height: 70vh; padding: 2.5rem 0 }
.dash-layout { display: grid; grid-template-columns: 235px 1fr; gap: 2rem; align-items: flex-start }
.dash-nav { background: var(--blanc); border-radius: var(--r-lg); border: 1px solid var(--g100); overflow: hidden; position: sticky; top: 90px }
.dash-nav-user { background: var(--vert); padding: 1.5rem; text-align: center }
.dash-nav-av { width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); margin: 0 auto .75rem; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--ft); font-size: 1.4rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.12) }
.dash-nav-av img { width: 100%; height: 100%; object-fit: cover }
.dash-nav-nom  { font-family: var(--ft); font-size: .9rem; font-weight: 700; color: #fff }
.dash-nav-role { font-size: .65rem; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.5); margin-top: .15rem }
.dash-nav-menu { list-style: none; padding: .75rem; margin: 0 }
.dash-nav-menu li a { display: flex; align-items: center; gap: .7rem; padding: .68rem .9rem; border-radius: 9px; font-size: .83rem; font-weight: 500; color: var(--g600); transition: all var(--t); text-decoration: none }
.dash-nav-menu li a:hover { background: var(--g50); color: var(--vert) }
.dash-nav-menu li.act a { background: var(--vert-bg); color: var(--vert-2); font-weight: 600 }
.dash-nav-menu .ni { font-size: .95rem; flex-shrink: 0; width: 20px; text-align: center }
.dash-nav-sep { height: 1px; background: var(--g100); margin: .5rem .9rem }
.dash-main { display: flex; flex-direction: column; gap: 1.5rem }
.dash-welcome { background: var(--vert); border-radius: var(--r-lg); padding: 2rem; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem }
.dash-welcome::before { content: ''; position: absolute; left: -80px; top: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle,rgba(212,172,13,.12) 0%,transparent 65%) }
.dash-welcome-txt { position: relative; z-index: 1 }
.dash-welcome-tag { font-size: .62rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--or); margin-bottom: .5rem; display: block }
.dash-welcome h2 { font-family: var(--ft); font-size: 1.35rem; color: #fff; margin-bottom: .4rem }
.dash-welcome p  { font-size: .82rem; color: rgba(255,255,255,.5) }
.dash-score { position: relative; z-index: 1; text-align: right; flex-shrink: 0 }
.dash-score-val { font-family: var(--ft); font-size: 3rem; font-weight: 800; color: var(--or); line-height: 1 }
.dash-score-lbl { font-size: .6rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.35) }
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem }
.kpi { background: var(--blanc); border: 1px solid var(--g100); border-radius: var(--r-md); padding: 1.2rem 1.25rem; transition: all var(--t) }
.kpi:hover { border-color: var(--vert-bd); box-shadow: var(--sh-sm) }
.kpi-ico { font-size: 1.4rem; margin-bottom: .65rem }
.kpi-lbl { font-size: .67rem; text-transform: uppercase; letter-spacing: 1px; color: var(--g400); font-weight: 600; margin-bottom: .45rem }
.kpi-val { font-family: var(--ft); font-size: 1.85rem; font-weight: 800; color: var(--g900); letter-spacing: -.5px }
.kpi-ch  { font-size: .7rem; margin-top: .25rem; font-weight: 600 }
.kpi-ch.up { color: var(--vert-ok) }
.kpi-ch.dn { color: var(--red) }
.panel { background: var(--blanc); border: 1px solid var(--g100); border-radius: var(--r-lg); overflow: hidden }
.panel-head { padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--g50); display: flex; align-items: center; justify-content: space-between }
.panel-ttl  { font-family: var(--ft); font-size: .88rem; font-weight: 700; color: var(--g900) }
.panel-lnk  { font-size: .75rem; color: var(--or); font-weight: 600; text-decoration: none }
.panel-lnk:hover { color: var(--vert) }
.panel-body { padding: 1.25rem 1.5rem }
.pct-val { font-family: var(--ft); font-size: 1.35rem; font-weight: 700; color: var(--or); margin-bottom: .5rem }
.pct-bar  { height: 8px; background: var(--g100); border-radius: 4px; overflow: hidden; margin-bottom: 1.3rem }
.pct-fill { height: 100%; background: linear-gradient(90deg,var(--vert),var(--vert-3)); border-radius: 4px; transition: width 1.5s ease }
.step-list { list-style: none; padding: 0; margin: 0 }
.step-item { display: flex; align-items: center; gap: .85rem; padding: .65rem 0; border-bottom: 1px solid var(--g50); font-size: .8rem }
.step-item:last-child { border-bottom: none }
.step-ico { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; flex-shrink: 0 }
.step-ok  { background: rgba(39,174,96,.15); color: var(--vert-ok) }
.step-nd  { background: var(--g50); color: var(--g200) }
.step-txt { flex: 1; color: var(--g600) }
.step-item.done .step-txt { color: var(--g900) }
.act-list { list-style: none; padding: 0; margin: 0 }
.act-item { display: flex; align-items: flex-start; gap: .85rem; padding: .78rem 0; border-bottom: 1px solid var(--g50) }
.act-item:last-child { border-bottom: none }
.act-ico  { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0 }
.act-txt  { flex: 1; font-size: .8rem; color: var(--g600); line-height: 1.5 }
.act-txt strong { color: var(--g900); font-weight: 600 }
.act-time { font-size: .65rem; color: var(--g200); flex-shrink: 0; white-space: nowrap }
.job-row  { display: flex; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--g50) }
.job-row:last-child { border-bottom: none }
.job-row-logo { width: 36px; height: 36px; border-radius: 8px; background: var(--g50); display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; border: 1px solid var(--g100); overflow: hidden }
.job-row-logo img { width: 100%; height: 100%; object-fit: cover }
.job-row-info { flex: 1; min-width: 0 }
.job-row-t { font-size: .82rem; font-weight: 600; color: var(--g900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; display: block }
.job-row-t:hover { color: var(--or) }
.job-row-m { font-size: .7rem; color: var(--g400) }
.quick-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem }
.quick-btn  { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.1rem .75rem; border-radius: 11px; text-decoration: none; border: 1px solid transparent; transition: all var(--t) }
.quick-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-sm) }
.quick-btn .qi { font-size: 1.4rem }
.quick-btn .qt { font-size: .72rem; font-weight: 600; text-align: center; line-height: 1.3 }

/* ── Sidebar content ── */
.cwrap { display: flex; gap: 2.5rem; align-items: flex-start }
#primary { flex: 1; min-width: 0 }
#secondary { width: 285px; flex-shrink: 0 }
.warea .widget { background: var(--blanc); border-radius: var(--r-lg); border: 1px solid var(--g100); padding: 1.4rem; margin-bottom: 1.4rem }
.warea .widget-title { font-family: var(--ft); font-size: .82rem; font-weight: 700; color: var(--g900); padding-bottom: .7rem; border-bottom: 2px solid var(--or); margin-bottom: 1rem }

/* ── Contact locked ── */
.db-clocked { background: var(--g50); border: 1.5px dashed var(--g200); border-radius: var(--r-md); padding: 1.4rem; text-align: center }
.db-clocked span { font-size: 1.7rem; display: block; margin-bottom: .5rem }
.db-clocked p { font-size: .84rem; color: var(--g400); margin-bottom: .9rem }
.db-contact-reveal { background: var(--blanc); border: 1px solid var(--g100); border-radius: var(--r-md); padding: 1.15rem }
.db-contact-data { padding: .8rem; background: var(--g50); border-radius: var(--r-sm); margin-top: .7rem; font-size: .875rem }
.db-contact-data .ci { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--g100); color: var(--g900) }
.db-contact-data .ci:last-child { border-bottom: none }

/* ── 404 ── */
.p404 { min-height: 65vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.5rem }
.p404-ico { font-size: 4rem; margin-bottom: 1.4rem; display: block }

/* ── WP JM override ── */
.job_listings { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .9rem }
.job_listing  { background: var(--blanc); border-radius: var(--r-lg); border: 1px solid var(--g100); transition: all var(--t) }
.job_listing:hover { border-color: var(--vert-bd); box-shadow: var(--sh-md); transform: translateY(-2px) }
.job_listing a { display: flex; align-items: center; gap: 1.2rem; padding: 1.3rem 1.6rem; color: inherit; text-decoration: none }
.job_listing .company_logo { width: 48px; height: 48px; border-radius: var(--r-sm); border: 1px solid var(--g100); overflow: hidden; flex-shrink: 0; background: var(--g50); display: flex; align-items: center; justify-content: center }
.job_listing .position h3 { font-family: var(--ft); font-size: .92rem; font-weight: 700; color: var(--g900) }
.job_listing .position .company { font-size: .78rem; color: var(--g400) }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar { background: var(--blanc); border-radius: var(--r-md); border: 1px solid var(--g100); padding: 1.2rem 1.5rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; box-shadow: var(--sh-xs) }
.filter-bar .sel,.filter-bar .inp { flex: 1; min-width: 150px; border-radius: var(--r-sm) }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1200px){
  .hero-in { grid-template-columns: 1fr }
  .hero-panel { display: none }
  .g4 { grid-template-columns: repeat(2,1fr) }
  .kpi-grid { grid-template-columns: repeat(2,1fr) }
  .ft-g { grid-template-columns: 1fr 1fr; gap: 2rem }
}
@media(max-width:1024px){
  .dash-layout { grid-template-columns: 1fr }
  .dash-nav { position: static }
  .dash-nav-menu { display: flex; flex-wrap: wrap; padding: .5rem }
  .dash-nav-menu li a { padding: .5rem .75rem; font-size: .78rem }
  .dash-nav-user { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1rem 1.25rem }
  .dash-nav-av { width: 44px; height: 44px; margin: 0; flex-shrink: 0 }
  .dash-nav-sep { display: none }
  .plans-grid-hp { grid-template-columns: 1fr }
  .plans-grid-hp .plan-card:first-child { order: 2 }
  .plans-grid-hp .plan-card:last-child  { order: 1 }
}
@media(max-width:768px){
  .W { padding: 0 1rem }
  .sec { padding: 3rem 0 }
  .g2,.g3 { grid-template-columns: 1fr }
  /* Header */
  #masthead { position: fixed; top: 0; left: 0; right: 0 }
  body { padding-top: 72px }
  .logo-tg { display: none }
  nav.pnav { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.98); backdrop-filter: blur(20px); overflow-y: auto; padding: 1.5rem 1rem; border-top: 1px solid var(--g100); z-index: 9998 }
  nav.pnav.open { display: block }
  nav.pnav ul { flex-direction: column !important; gap: 0 !important; list-style: none; padding: 0 }
  nav.pnav ul li a { padding: .95rem 1.25rem !important; font-size: .95rem !important; color: var(--vert) !important; border-bottom: 1px solid var(--g50); border-radius: 0 !important }
  nav.pnav ul li a:hover { background: var(--vert-bg) !important }
  .nav-mobile-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--g100) }
  .mbtn { display: flex !important }
  .hd-act .btn-ghost,.hd-act a[href*="rejoindre"] { display: none }
  /* Hero */
  .hero { padding: 4rem 0 3.5rem }
  .hero-h1 { font-size: clamp(2rem, 9vw, 3rem) }
  .hero-desc { font-size: .9rem }
  .hero-search { flex-direction: column; border-radius: var(--r-md); max-width: 100% }
  .hero-search-field { border-right: none; border-bottom: 1px solid var(--g100); width: 100% }
  .hero-search .btn { margin: .5rem; width: calc(100% - 1rem) }
  .hero-stats { gap: 1.25rem }
  .hero-stat-sep { display: none }
  /* Sections */
  .pgbanner { padding: 2.5rem 0 2rem }
  .pgbanner h1 { font-size: clamp(1.4rem, 6vw, 2rem) }
  .bc { display: none }
  .sh h2 { font-size: clamp(1.3rem, 5vw, 1.9rem) }
  /* Counter */
  .cbar { padding: 2.5rem 0 }
  .g4 { grid-template-columns: repeat(2,1fr) }
  .cpt-v { font-size: 2rem }
  /* Job cards */
  .jc { flex-wrap: wrap }
  .jc-r { text-align: left; width: 100%; display: flex; align-items: center; justify-content: space-between }
  .jc-date { margin-top: 0 }
  /* Footer */
  .ft-g { grid-template-columns: 1fr; gap: 2rem }
  .ft-bot { flex-direction: column; gap: .3rem; text-align: center; padding: 1rem 0 }
  /* Dashboard */
  .cwrap { flex-direction: column }
  #secondary { width: 100% !important }
  .dash-welcome { flex-direction: column; gap: 1rem }
  .kpi-grid { grid-template-columns: repeat(2,1fr) }
  .quick-grid { grid-template-columns: repeat(2,1fr) }
  .filter-bar { flex-direction: column; align-items: stretch }
  /* Diaspora */
  .dsec-in { grid-template-columns: 1fr; gap: 2.5rem }
  /* Plans */
  .plans-grid-hp { grid-template-columns: 1fr }
  /* Contact */
  .contact-wrap { grid-template-columns: 1fr }
  /* CTA */
  .ctaf-acts { flex-direction: column; align-items: center }
  .ctaf-acts .btn { width: 100%; max-width: 340px }
}
@media(max-width:480px){
  .g4 { grid-template-columns: 1fr }
  .kpi-grid { grid-template-columns: repeat(2,1fr) }
  .hero-stats { gap: 1rem }
  .hero-stat-val { font-size: 1.35rem }
  .hero-h1 { font-size: 1.9rem }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
}