/* ============================================================
   SPO — CANDIDATS (page-id-57228) — PATCH COMPLET (SAFE)
   Objectifs :
   - Alignement UI avec OFFRES (header carte, CTA, badges, note)
   - Wrappers HivePress (search + vendors) + liseret accent
   - Guide express (2 cartes) + “Recruter en 30 secondes” accordéon
   - Fix boutons ghost invisibles sur fond clair
   - Responsive propre (mobile/tablette)
   ============================================================ */

/* 0) Scope page + variables locales */
.page-id-57228{
  --spo-page-max: 1120px;
  /* Accent bleu candidats (si tu veux surcharger ton mapping) */
  /* --spo-page-accent:#2563EB; */
}

/* ============================================================
   1) HEADER (carte + respiration)
   ============================================================ */
.page-id-57228 .spo-archiveHead--candidats{
  margin:0 0 16px;
}
.page-id-57228 .spo-archiveHead--candidats .spo-archiveHead__inner{
  max-width: var(--spo-page-max);
  margin:0 auto;
  padding:18px 18px 16px;
  background: var(--spo-surface, #fff);
  border:1px solid var(--spo-border, rgba(15,42,68,.12));
  border-radius:16px;
  box-shadow: var(--spo-shadow, 0 10px 24px rgba(15,42,68,.08));
}

/* Breadcrumbs */
.page-id-57228 .spo-breadcrumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 8px;
  font-size:13px;
  color: var(--spo-muted, #64748B);
}
.page-id-57228 .spo-breadcrumbs__link{
  font-weight:800;
  color: var(--spo-secondary, #1E4F7A);
}
.page-id-57228 .spo-breadcrumbs__sep{ opacity:.6; }

/* Kicker / titre / sous-titre */
.page-id-57228 .spo-archiveHead__kicker{
  margin:4px 0 6px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  color: var(--spo-secondary, #1E4F7A);
}
.page-id-57228 .spo-archiveHead__title{
  margin:0 0 10px;
  line-height:1.12;
  font-size:clamp(26px, 3vw, 38px);
}
.page-id-57228 .spo-archiveHead__subtitle{
  margin:0;
  max-width:85ch;
  line-height:1.65;
  color: rgba(17,24,39,.86);
}

/* ============================================================
   2) BADGES + NOTE
   ============================================================ */
.page-id-57228 .spo-candidats__rep{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-id-57228 .spo-candidats__rep .spo-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(15,42,68,.04);
  border:1px solid rgba(15,42,68,.10);
  color: rgba(15,42,68,.92);
  font-weight:800;
  font-size:13px;
  line-height:1;
}

.page-id-57228 .spo-note{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  background: rgba(15,42,68,.04);
  border:1px solid rgba(15,42,68,.10);
  color: rgba(15,42,68,.92);
  line-height:1.6;
}

/* ============================================================
   3) CTA — FIX boutons ghost invisibles + layout
   ============================================================ */
.page-id-57228 .spo-archiveHead__cta{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Ghost visibles (fond clair) */
.page-id-57228 .spo-archiveHead__cta .spo-btn-ghost,
.page-id-57228 .spo-candidats__guideActions .spo-btn-ghost,
.page-id-57228 .spo-candidats__howAcc .spo-btn-ghost{
  background:rgba(255,255,255,.92) !important;
  color:rgba(15,42,68,.92) !important;
  border:1px solid rgba(15,42,68,.18) !important;
  box-shadow:0 8px 16px rgba(15,42,68,.06) !important;
}
.page-id-57228 .spo-archiveHead__cta .spo-btn-ghost .spo-ico,
.page-id-57228 .spo-candidats__guideActions .spo-btn-ghost .spo-ico{
  color:rgba(15,42,68,.92) !important;
  opacity:.95;
}
.page-id-57228 .spo-archiveHead__cta .spo-btn-ghost:hover,
.page-id-57228 .spo-candidats__guideActions .spo-btn-ghost:hover{
  background:#fff !important;
  border-color:rgba(15,42,68,.28) !important;
  transform:translateY(-1px);
}
.page-id-57228 .spo-archiveHead__cta .spo-btn-ghost:active,
.page-id-57228 .spo-candidats__guideActions .spo-btn-ghost:active{
  transform:translateY(0);
}

/* Support (secondaire différenciable) */
.page-id-57228 .spo-btn--support{
  background: rgba(30,79,122,.10) !important;
  border:1px solid rgba(30,79,122,.22) !important;
  color: var(--spo-primary, #0F2A44) !important;
}
.page-id-57228 .spo-btn--support:hover{
  background: rgba(30,79,122,.14) !important;
  border-color: rgba(30,79,122,.30) !important;
}

/* ============================================================
   4) GUIDE EXPRESS (2 cartes)
   ============================================================ */
.page-id-57228 .spo-candidats__guide{
  margin-top:14px;
}
.page-id-57228 .spo-candidats__guideGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width:860px){
  .page-id-57228 .spo-candidats__guideGrid{ grid-template-columns:1fr; }
}

.page-id-57228 .spo-candidats__guideCard{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(15,42,68,.12);
  border-radius:16px;
  box-shadow: 0 10px 24px rgba(15,42,68,.06);
  padding:14px;
  position:relative;
  overflow:hidden;
}
.page-id-57228 .spo-candidats__guideCard::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background:var(--spo-page-accent);
  opacity:.95;
  pointer-events:none;
}
.page-id-57228 .spo-candidats__guideHead{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color: var(--spo-primary, #0F2A44);
  margin-bottom:8px;
}
.page-id-57228 .spo-candidats__guideText{
  margin:0 0 10px;
  line-height:1.65;
  color: rgba(17,24,39,.86);
}
.page-id-57228 .spo-candidats__guideActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* ============================================================
   5) “RECRUTER EN 30 SECONDES” (accordéon)
   ============================================================ */
.page-id-57228 .spo-candidats__how{
  margin-top:12px;
  background: rgba(15,42,68,.04);
  border:1px solid rgba(15,42,68,.10);
  border-radius:16px;
  padding:12px;
}
.page-id-57228 .spo-candidats__howTitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color: var(--spo-primary, #0F2A44);
  margin-bottom:8px;
}

/* details */
.page-id-57228 .spo-candidats__howItem{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(15,42,68,.12);
  border-radius:14px;
  overflow:hidden;
}
.page-id-57228 .spo-candidats__howSum{
  list-style:none;
  cursor:pointer;
  padding:12px;
  font-weight:900;
  color: var(--spo-primary, #0F2A44);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  line-height:1.35;
}
.page-id-57228 .spo-candidats__howSum::-webkit-details-marker{ display:none; }
.page-id-57228 details > summary.spo-candidats__howSum::marker{ content:""; }

.page-id-57228 .spo-candidats__howSumLeft{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.page-id-57228 .spo-candidats__howChev{ opacity:.7; }

.page-id-57228 .spo-candidats__howBody{
  padding:0 12px 12px;
  color: rgba(17,24,39,.86);
  line-height:1.65;
}

.page-id-57228 .spo-candidats__howSteps{
  margin:10px 0 8px;
  padding-left:1.2rem;
}
.page-id-57228 .spo-candidats__howSteps li{ margin:6px 0; }

.page-id-57228 .spo-candidats__howHint{
  margin:8px 0 0;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(37,99,235,.06);
  border:1px solid rgba(37,99,235,.14);
}

/* ============================================================
   6) WRAPPERS HivePress (search + vendors) — comme Offres
   ============================================================ */
.page-id-57228 .spo-candidats__main{
  display:block;
  margin-top:14px;
}

.page-id-57228 .spo-candidats__hpBlock{
  background:var(--spo-surface, #fff);
  border:1px solid var(--spo-border, rgba(15,42,68,.12));
  border-radius:16px;
  box-shadow: var(--spo-shadow, 0 10px 24px rgba(15,42,68,.08));
  padding:14px;
  margin:0 0 14px;
  position:relative;
  overflow:hidden;
}
.page-id-57228 .spo-candidats__hpBlock::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background:var(--spo-page-accent);
  opacity:.95;
  pointer-events:none;
}

/* Espaces HivePress */
.page-id-57228 .hp-form--listing-search{
  margin-top:16px !important;
  margin-bottom:16px !important;
}

/* Grilles vendors/listings : air entre cartes */
.page-id-57228 :is(.hp-vendors, .hp-vendors__items){ margin-top:6px; }
.page-id-57228 :is(.hp-vendors .hp-row, .hp-vendors__items){ row-gap:18px; }
.page-id-57228 :is(.hp-vendors .hp-col, .hp-vendors__item){ margin-bottom:0 !important; }

/* ============================================================
   7) Mobile: CTA full-width + confort
   ============================================================ */
@media (max-width:720px){
  .page-id-57228 .spo-archiveHead__cta .spo-btn{
    width:100%;
    justify-content:flex-start;
  }
  .page-id-57228 .spo-candidats__guideActions .spo-btn{
    width:100%;
    justify-content:flex-start;
  }
}
/* ============================================================
   SPO — FIX liseret qui masque le texte (FAQ / listes)
   Page candidats (page-id-57228) — SAFE
   Cause : le pseudo-élément ::before/::after est au-dessus du contenu
   Fix : on met le liseret derrière + on ajoute un padding-left
   ============================================================ */

/* 1) Le liseret passe DERRIÈRE le contenu */
.page-id-57228 .spo-candidats__hpBlock,
.page-id-57228 .spo-faq--light .spo-faq__inner,
.page-id-57228 .spo-candidats__guideCard{
  position:relative;
}
.page-id-57228 .spo-candidats__hpBlock::before,
.page-id-57228 .spo-candidats__guideCard::before,
.page-id-57228 .page:not(.home) .hp-vendor::after,
.page-id-57228 .page:not(.home) .hp-listing::after,
.page-id-57228 .spo-faq--light .spo-faq__inner::before{
  z-index:0 !important;
}

/* 2) Le contenu passe DEVANT */
.page-id-57228 .spo-candidats__hpBlock > *,
.page-id-57228 .spo-candidats__guideCard > *,
.page-id-57228 .spo-faq--light .spo-faq__inner > *{
  position:relative;
  z-index:1;
}

/* 3) On évite que le texte commence “dans” le liseret */
.page-id-57228 .spo-faq--light .spo-faq__inner{
  padding-left:22px !important; /* 16px + marge liseret */
}

/* Optionnel : si tu vois encore le problème sur d’autres blocs HivePress */
.page-id-57228 .hp-vendor,
.page-id-57228 .hp-listing,
.page-id-57228 .widget,
.page-id-57228 .custom-html-widget,
.page-id-57228 .textwidget{
  padding-left:14px; /* compense le ::after width:6px */
}

/* Migrated from CSS additionnel.txt - SPO CSS refonte v1.1.0 */
/* =========================================================
   SPO — CANDIDATS — Ascenseur premium (spo-faq__fineprint)
   ========================================================= */

.spo-candidats .spo-candidats__lift {
  border-left: 0 !important;
  box-shadow: none !important;
}
.spo-candidats .spo-candidats__lift::before,
.spo-candidats .spo-candidats__lift::after {
  content: none !important;
  display: none !important;
}

.spo-candidats details.spo-faq__fineprint {
  border-left: 0 !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  background: rgba(255, 255, 255, .97) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgba(5, 22, 42, .16) !important;
}

.spo-candidats details.spo-faq__fineprint > summary {
  list-style: none !important;
  cursor: pointer !important;
  padding: 14px 16px !important;
  background: #edf3fa !important;
  color: #11283f !important;
  outline: none !important;
  box-shadow: none !important;
}

.spo-candidats details.spo-faq__fineprint > summary::-webkit-details-marker {
  display: none !important;
}

.spo-candidats details.spo-faq__fineprint > summary:hover {
  background: #e3edf8 !important;
}

.spo-candidats details.spo-faq__fineprint > .spo-faq__a {
  padding: 14px 16px 16px !important;
  background: #fff !important;
  color: #11283f !important;
}

.spo-candidats details.spo-faq__fineprint[open] > summary {
  border-bottom: 1px solid rgba(98, 179, 230, .3) !important;
}

/* ============================================================
   SPO - Candidats - hero v2.0.3
   ============================================================ */
body.page-id-57228 {
  background: #f5f7fa;
}

body.page-id-57228 .spo-candidats {
  --spo-candidate-accent: #62b3e6;
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 48px;
}

body.page-id-57228 .spo-candidats .spo-archiveHead__inner {
  max-width: none;
  padding: clamp(24px, 4vw, 42px) !important;
  border: 0;
  border-top: 5px solid var(--spo-candidate-accent);
  border-radius: 25px;
  background:
    radial-gradient(circle at 92% 10%, rgba(98, 179, 230, .2), transparent 33%),
    linear-gradient(132deg, #102a43 0%, #153f61 56%, #10334d 100%);
  box-shadow: 0 20px 48px rgba(15, 42, 68, .16);
  color: #fff;
}

body.page-id-57228 .spo-candidats .spo-archiveHead__inner :is(.spo-breadcrumbs, .spo-breadcrumbs__link, .spo-breadcrumbs__current, .spo-archiveHead__title, .spo-archiveHead__subtitle) {
  color: #fff !important;
}

body.page-id-57228 .spo-candidats .spo-archiveHead__kicker {
  color: #a9dbfa;
}

body.page-id-57228 .spo-candidats .spo-candidats__rep .spo-badge {
  border-color: rgba(169, 219, 250, .32);
  background: rgba(169, 219, 250, .13);
  color: #fff;
}

body.page-id-57228 .spo-candidats .spo-archiveHead__cta .spo-btn--primary {
  border-color: var(--spo-candidate-accent);
  background: var(--spo-candidate-accent);
  color: #102a43;
}

body.page-id-57228 .spo-candidats .spo-note {
  border-color: rgba(169, 219, 250, .24);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .95);
}

body.page-id-57228 .spo-candidats details.spo-faq__fineprint[open] > summary {
  border-bottom-color: rgba(98, 179, 230, .3) !important;
}

body.page-id-57228 .spo-candidats .spo-candidats__guideCard,
body.page-id-57228 .spo-candidats .spo-candidats__how {
  background: rgba(255, 255, 255, .98);
}

body.page-id-57228 .spo-candidats .spo-candidats__guideCard::before,
body.page-id-57228 .spo-candidats .spo-candidats__hpBlock::before {
  background: var(--spo-candidate-accent);
}

@media (max-width: 680px) {
  body.page-id-57228 .spo-candidats {
    width: calc(100% - 24px);
  }

  body.page-id-57228 .spo-candidats .spo-archiveHead__inner {
    padding: 22px 16px !important;
    border-radius: 20px;
  }
}



