:root{
  --navy:#0F1D33; --navy-deep:#0A1526;
  --paper:#FAF7F0; --paper-warm:#F1EADA;
  --stone:#E4E0D6; --taupe:#B7AD9E;
  --ink:#20242E; --muted:#6C6A63;
  --brass:#A67C3D; --brass-light:#C8A96B;
  --muted-on-navy:rgba(250,247,240,.62);
  --line:rgba(15,29,51,.14); --line-on-navy:rgba(250,247,240,.18);
  --serif:"Cormorant Garamond","Times New Roman",Georgia,serif;
  --sans:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --s-2:10px; --s-3:18px; --s-4:28px; --s-5:44px; --s-6:70px;
}

.eyebrow{font-size:12px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--brass)}
.on-navy .eyebrow{color:var(--brass-light)}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.6px;text-transform:uppercase;text-decoration:none;padding:15px 27px;background:var(--navy);color:var(--paper);border:1px solid var(--navy);border-radius:50px;transition:background .2s,color .2s}
.btn:hover{background:var(--navy-deep)}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:var(--paper)}
.on-navy .btn--outline{background:transparent;color:var(--paper);border-color:var(--line-on-navy)}

/* --- aside : repère de proximité (fiches Métier) --- */
.proximity-card{background:var(--paper-warm);border:1px solid var(--line);padding:28px;font-family:var(--sans)}
.proximity-card .label{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin-bottom:13px}
.proximity-bar{position:relative;height:2px;background:var(--stone);margin:16px 0 10px}
.proximity-bar i{position:absolute;top:50%;left:0;width:var(--fill,20%);height:2px;background:var(--brass);transform:translateY(-50%)}
.proximity-bar b{position:absolute;top:50%;left:var(--fill,20%);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 4px var(--paper-warm)}
.proximity-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--taupe);text-transform:uppercase;letter-spacing:.4px}
.proximity-card .result{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--navy);margin:21px 0 5px}
.proximity-card .note{font-size:13px;color:var(--muted);line-height:1.6}
.proximity-card .other-roles{margin-top:21px;padding-top:18px;border-top:1px solid var(--line)}
.proximity-card .other-roles span{display:block;font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.proximity-card .other-roles a{display:block;font-size:14px;color:var(--navy);text-decoration:none;padding:6px 0;border-bottom:1px dotted var(--line)}
.proximity-card .other-roles a:last-child{border-bottom:none}
.proximity-card .other-roles a:hover{color:var(--brass)}

/* --- section distinction (fiches Métier) --- */
.distinct{background:var(--paper-warm);padding:70px 0}
.distinct__head{max-width:640px;margin:0 auto 44px;text-align:center}
.distinct__head h2{font-family:var(--serif);font-weight:500;font-size:clamp(27px,2.8vw,34px);margin:10px 0 0;color:var(--navy)}
.distinct__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;text-align:center}
.distinct__item .ic{width:30px;height:30px;margin:0 auto 18px;color:var(--brass)}
.distinct__item .ic svg{display:block}
.distinct__item h4{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--navy);margin:0 0 10px}
.distinct__item p{font-size:14px;color:var(--muted);line-height:1.7;margin:0}
@media(max-width:700px){.distinct__grid{grid-template-columns:1fr;gap:28px}}

/* --- fil d'ariane (fiches Métier) --- */
.crumb{background:transparent;padding:16px 0;text-align:center;font-family:var(--sans);text-transform:uppercase}
.crumb a{color:var(--brass-light);text-decoration:none;font-size:12px;letter-spacing:.3px}
.crumb a:hover{color:var(--brass)}
.crumb span{color:var(--paper);margin:0 8px}
.crumb b{color:var(--paper);font-weight:600;font-size:12px;letter-spacing:.3px}

/* --- hero générique (offres d'emploi / profils / autres listings) --- */
.hero{padding:70px 0 44px}
.hero.on-navy,.hero.hero--deep{background:var(--navy)}
.hero.hero--deep{background:var(--navy-deep)}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(37px,4.2vw,54px);margin:8px 0 16px;line-height:1.2;color:var(--paper)}
.hero p{font-size:16px;color:var(--muted-on-navy);max-width:640px;margin:0 0 29px;line-height:1.75}
.hero .note{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--brass-light);border:1px solid var(--line-on-navy);padding:8px 14px;margin-top:8px}
.hero .meta{display:flex;flex-wrap:wrap;gap:8px 19px;font-size:13px;color:var(--muted-on-navy);margin-bottom:26px}
.hero .meta span{display:inline-flex;align-items:center;gap:6px}
.hero .meta span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--brass-light)}
.hero .meta span:first-child::before{display:none}
.hero .badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--brass-light);border:1px solid var(--line-on-navy);padding:6px 13px;margin-bottom:16px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero .head{display:flex;align-items:center;gap:22px;margin-bottom:8px}
.profile-photo{width:83px;height:83px;border-radius:50%;flex:none;overflow:hidden;background:var(--navy-deep);border:1px solid var(--line-on-navy)}
.profile-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* --- barre de filtres (par métier) --- */
.filters{background:var(--paper-warm);border-bottom:1px solid var(--line);padding:21px 0}
.filters.on-navy{background:var(--navy-deep);border-bottom-color:var(--line-on-navy)}
.filter-bar{display:flex;flex-wrap:wrap;gap:10px}
.filter-chip{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);background:var(--paper);border:1px solid var(--line);border-radius:50px;padding:9px 18px;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.filter-chip:hover{border-color:var(--brass)}
.filter-chip.is-active{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.filters.on-navy .filter-chip{background:transparent;color:var(--paper);border-color:var(--line-on-navy)}
.filters.on-navy .filter-chip:hover{border-color:var(--brass-light)}
.filters.on-navy .filter-chip.is-active{background:var(--brass);color:var(--navy-deep);border-color:var(--brass)}

/* --- grille de cartes (offres d'emploi / profils) --- */
.listing{padding:70px 0}
.listing.on-navy{background:var(--navy)}
.listing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(max-width:760px){.listing-grid{grid-template-columns:1fr}}

.card{background:var(--paper);border:1px solid var(--line);padding:30px;display:flex;flex-direction:column}
.card .eyebrow{display:block;margin-bottom:10px}
.card h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 0 14px;color:var(--navy);line-height:1.3}
.card .meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12px;color:var(--muted);margin-bottom:16px}
.card .meta span{display:inline-flex;align-items:center;gap:6px}
.card .meta span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--brass)}
.card .meta span:first-child::before{display:none}
.card p.teaser{font-size:14px;color:var(--muted);line-height:1.7;margin:0 0 22px;flex:1}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:19px;border-top:1px solid var(--line)}
.card .salary{font-family:var(--serif);font-size:16px;color:var(--navy)}
.card .btn{padding:11px 21px;font-size:11px}
.card .badge{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--brass);background:var(--paper-warm);padding:5px 10px;display:inline-block;margin-bottom:10px}

.listing.on-navy .card{background:var(--navy-deep);border-color:var(--line-on-navy)}
.listing.on-navy .card h3{color:var(--paper)}
.listing.on-navy .card .meta{color:var(--muted-on-navy)}
.listing.on-navy .card p.teaser{color:var(--muted-on-navy)}
.listing.on-navy .card .foot{border-top-color:var(--line-on-navy)}
.listing.on-navy .card .salary{color:var(--paper)}
.listing.on-navy .card .badge{background:rgba(255,255,255,.06);color:var(--brass-light)}

.empty{text-align:center;padding:70px 0;color:var(--muted)}
.listing.on-navy .empty{color:var(--muted-on-navy)}

.access-note{background:var(--paper-warm);border:1px solid var(--line);padding:24px 29px;margin-bottom:44px;font-size:14px;color:var(--muted);line-height:1.7}
.access-note b{color:var(--navy)}
.listing.on-navy .access-note{background:var(--navy-deep);border-color:var(--line-on-navy);color:var(--muted-on-navy)}
.listing.on-navy .access-note b{color:var(--paper)}

/* --- fiche synthétique "En bref" (Single offre / Single profil) --- */
.info-card{background:var(--paper-warm);border:1px solid var(--line);padding:28px;font-family:var(--sans)}
.info-card .label{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.info-card dl{margin:0}
.info-card dt{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--taupe);margin:0 0 3px}
.info-card dd{font-size:14px;color:var(--navy);margin:0 0 16px}
.info-card dd:last-child{margin-bottom:0}
.info-card .btn{width:100%;justify-content:center;margin-top:8px}
.content.on-navy .info-card{background:var(--navy-deep);border-color:var(--line-on-navy)}
.content.on-navy .info-card dd{color:var(--paper)}

.confidential-note{background:var(--paper-warm);border:1px solid var(--line);padding:19px 22px;font-size:13px;color:var(--muted);line-height:1.7;margin-top:26px}
.confidential-note b{color:var(--navy)}
.content.on-navy .confidential-note{background:var(--navy-deep);border-color:var(--line-on-navy);color:var(--muted-on-navy)}
.content.on-navy .confidential-note b{color:var(--paper)}

/* --- filtre actif (détecté en JS via le paramètre ?role= de l'URL) ---
   .js-offre-filter est posée par Elementor sur le wrapper carré du widget,
   pas sur le <a class="elementor-button"> arrondi : on cible donc ce
   dernier pour que le fond doré respecte le border-radius de la pilule. */
.js-offre-filter.is-active-role .elementor-button{background:var(--brass) !important;border-color:var(--brass) !important;color:var(--navy-deep) !important}