/* SPO CSS refonte v1.1.0 - migrated from CSS additionnel.txt */

/* ============================================================
   SPO — FORMATIONS (page-id-61189) — PREMIUM v2026
   Objectifs :
   - SUPPRIMER les liserets bleus (accent bars)
   - Rendu “cabinet / jobboard pro” (sobre, business, dense, lisible)
   - Scope STRICT : body.page-id-61189 uniquement
   SAFE / NO-REGRESSION
   ============================================================ */

body.page-id-61189{
  /* Neutralise l’accent “liseret” si tes composants s’appuient sur ce token */
  --spo-page-accent: transparent;

  /* Tokens locaux (pro / sobre) */
  --spo-f-bg:#f6f8fb;
  --spo-f-card:#ffffff;
  --spo-f-ink:rgba(10,20,40,.92);
  --spo-f-muted:rgba(31,41,55,.72);
  --spo-f-border:rgba(10,20,40,.10);
  --spo-f-border2:rgba(10,20,40,.14);
  --spo-f-shadow:0 14px 40px rgba(10,20,40,.08);
  --spo-f-shadow2:0 22px 60px rgba(10,20,40,.12);
  --spo-f-radius:18px;
  --spo-f-radius-lg:22px;
}

/* ============================================================
   SPO - Formations - hero lisible et structure v2.0.2
   ============================================================ */
body.page-id-61189 {
  background: #f5f7fa;
}

body.page-id-61189 .spo-formations {
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 48px;
  background: transparent;
}

body.page-id-61189 .spo-formations .spo-archiveHead__inner {
  padding: clamp(24px, 4vw, 40px);
  border: 0;
  border-radius: 26px;
  background:
    radial-gradient(circle at 89% 13%, rgba(196, 215, 232, .2), transparent 30%),
    linear-gradient(132deg, #102a43 0%, #153e61 57%, #10334d 100%);
  box-shadow: 0 20px 46px rgba(15, 42, 68, .14);
  color: #fff;
}

body.page-id-61189 .spo-formations .spo-archiveHead__inner > :is(.spo-h1, .spo-sub) {
  color: #fff !important;
}

body.page-id-61189 .spo-formations .spo-archiveHead__inner > .spo-sub {
  color: rgba(255, 255, 255, .9) !important;
}

body.page-id-61189 .spo-formations .spo-archiveHead__inner .spo-card--soft {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 17px;
  background: rgba(255, 255, 255, .97);
  color: #11283f;
  box-shadow: none !important;
}

body.page-id-61189 .spo-formations .spo-archiveHead__inner .spo-card--soft :is(li, strong) {
  color: #11283f !important;
}

body.page-id-61189 .spo-formations #spo-formations-search {
  overflow: visible;
}

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

  body.page-id-61189 .spo-formations .spo-archiveHead__inner {
    padding: 23px 18px;
    border-radius: 20px;
  }
}

/* ============================================================
   1) SUPPRESSION LISERETS BLEUS (tous patterns)
   (bars / pseudo-elements / borders accent)
   ============================================================ */

/* Pseudo-elements “bar” fréquents */
body.page-id-61189 .spo-section::before,
body.page-id-61189 .spo-section::after,
body.page-id-61189 .spo-card::before,
body.page-id-61189 .spo-card::after,
body.page-id-61189 .spo-dem__hpBlock::before,
body.page-id-61189 .spo-dem__hpBlock::after,
body.page-id-61189 .spo-head::before,
body.page-id-61189 .spo-head::after{
  content:none !important;
  display:none !important;
}

/* Bordures/ombres “accent” (gauche + haut) */
body.page-id-61189 .spo-section,
body.page-id-61189 .spo-section.spo-card,
body.page-id-61189 .spo-dem__hpBlock{
  border-left: 1px solid var(--spo-f-border) !important;
  border-top: 1px solid var(--spo-f-border) !important;
  outline: none !important;
  box-shadow: none; /* réappliqué plus bas proprement */
}

/* Si un composant pose un “inset” bleu */
body.page-id-61189 .spo-section,
body.page-id-61189 .spo-section.spo-card,
body.page-id-61189 .spo-dem__hpBlock{
  box-shadow: var(--spo-f-shadow) !important;
}

/* ============================================================
   2) BACKGROUND / CONTAINER
   ============================================================ */

body.page-id-61189 .spo-formations{
  background: var(--spo-f-bg);
  padding: 28px 14px 44px;
  color: var(--spo-f-ink);
}

body.page-id-61189 .spo-dem__container{
  max-width: 1280px;
  margin: 0 auto;
}

/* Grille main/aside */
body.page-id-61189 .spo-dem__grid{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 22px;
}
@media (max-width: 1024px){
  body.page-id-61189 .spo-dem__grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   3) HERO — sobre premium (pas “bling”)
   ============================================================ */

body.page-id-61189 .spo-archiveHead--formations{
  border-radius: var(--spo-f-radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--spo-f-shadow2) !important;
}

body.page-id-61189 .spo-archiveHead--formations .spo-archiveHead__inner{
  padding: 34px 30px !important;
  max-width: 920px;
}

body.page-id-61189 .spo-archiveHead--formations .spo-h1{
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 950;
  letter-spacing: -0.3px;
  line-height: 1.12;
}

body.page-id-61189 .spo-archiveHead--formations .spo-sub{
  margin-top: 10px;
  font-size: 16px;
  opacity: .92;
  max-width: 78ch;
}

/* ============================================================
   4) CARDS — “cabinet”
   ============================================================ */

body.page-id-61189 .spo-section.spo-card{
  background: var(--spo-f-card) !important;
  border: 1px solid var(--spo-f-border) !important;
  border-radius: var(--spo-f-radius) !important;
  box-shadow: var(--spo-f-shadow) !important;
  padding: 18px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.page-id-61189 .spo-section.spo-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--spo-f-shadow2) !important;
  border-color: var(--spo-f-border2) !important;
}

/* Titres / sous-titres */
body.page-id-61189 .spo-h2{
  font-weight: 950;
  letter-spacing: -0.2px;
}
body.page-id-61189 .spo-sub{
  color: var(--spo-f-muted) !important;
  font-size: 14px;
}

/* ============================================================
   5) SEARCH — “jobboard bar” propre + alignement
   ============================================================ */

body.page-id-61189 #spo-formations-search{
  padding: 16px !important;
  border-radius: 16px !important;
}

body.page-id-61189 #spo-formations-search .hp-form__fields{
  display: grid !important;
  grid-template-columns: 1.25fr 1fr;
  gap: 12px !important;
  align-items: stretch;
}
@media (max-width: 640px){
  body.page-id-61189 #spo-formations-search .hp-form__fields{
    grid-template-columns: 1fr !important;
  }
}

/* Inputs */
body.page-id-61189 #spo-formations-search :is(input[type="search"],input[type="text"],select,textarea){
  width: 100% !important;
  height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(10,20,40,.12) !important;
  background: #fff !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  color: var(--spo-f-ink) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

body.page-id-61189 #spo-formations-search :is(input,select,textarea):focus{
  outline: none !important;
  border-color: rgba(30,79,122,.35) !important;
  box-shadow: 0 0 0 4px rgba(30,79,122,.14) !important;
}

/* Bouton Rechercher (HivePress) */
body.page-id-61189 #spo-formations-search .hp-form__button.hp-button{
  height: 48px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
  letter-spacing: -0.1px;
  margin-top: 10px !important;
}

/* ============================================================
   6) “Filtres rapides” — chips business (plus denses)
   ============================================================ */

body.page-id-61189 .spo-chips{
  display:flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.page-id-61189 a.spo-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height: 34px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(10,20,40,.12) !important;
  background: rgba(15,42,68,.04) !important;
  color: rgba(10,20,40,.88) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  text-decoration:none !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

body.page-id-61189 a.spo-chip:hover{
  transform: translateY(-1px);
  background: rgba(15,42,68,.07) !important;
  border-color: rgba(10,20,40,.16) !important;
}

/* ============================================================
   7) LISTINGS / CARTES formations — micro-finition
   ============================================================ */

body.page-id-61189 #spo-formations-list{
  padding-top: 4px !important;
}

/* Selon rendu : hp-listing (HivePress) ou tes cartes SPO */
body.page-id-61189 #spo-formations-list :is(.hp-listing, .spo-hp-native-card){
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.page-id-61189 #spo-formations-list :is(.hp-listing, .spo-hp-native-card):hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 50px rgba(10,20,40,.14);
}

/* ============================================================
   8) ASIDE — panneau “cabinet” (pas de liseret)
   ============================================================ */

body.page-id-61189 .spo-dem__aside .spo-section.spo-card{
  position: sticky;
  top: 16px;
}
@media (max-width: 1024px){
  body.page-id-61189 .spo-dem__aside .spo-section.spo-card{
    position: static;
  }
}

body.page-id-61189 .spo-dem__aside .spo-ul li{
  color: rgba(10,20,40,.84) !important;
}

/* ============================================================
   9) FAQ — accordéons propres
   ============================================================ */

body.page-id-61189 .spo-faq .spo-faq__item{
  border: 1px solid rgba(10,20,40,.10) !important;
  border-radius: 14px !important;
  overflow: hidden;
  margin-bottom: 10px !important;
  background: #fff !important;
}

body.page-id-61189 .spo-faq .spo-faq__item summary{
  padding: 12px 14px !important;
  cursor: pointer !important;
  font-weight: 950 !important;
  background: rgba(15,42,68,.03);
  list-style: none;
}
body.page-id-61189 .spo-faq .spo-faq__item summary::-webkit-details-marker{ display:none; }

body.page-id-61189 .spo-faq .spo-faq__item[open] summary{
  background: rgba(15,42,68,.06);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}

body.page-id-61189 .spo-faq .spo-faq__a{
  padding: 10px 14px 14px !important;
  color: rgba(10,20,40,.80) !important;
  line-height: 1.6;
}

/* ============================================================
   10) Boutons SPO — cohérence “business”
   ============================================================ */

body.page-id-61189 .spo-btn{
  border-radius: 999px !important;
  font-weight: 950 !important;
}
body.page-id-61189 .spo-btn:hover{
  transform: translateY(-1px);
}

/* ============================================================
   11) Spacings (évite les gros vides / améliore densité)
   ============================================================ */

body.page-id-61189 .spo-gap{ height: 22px; }
body.page-id-61189 .spo-gap-sm{ height: 12px; }
body.page-id-61189 .spo-gap-xs{ height: 8px; }

/* ============================================================
   12) A11Y focus — pro
   ============================================================ */

body.page-id-61189 :is(a,button,summary,[role="button"]):focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(30,79,122,.16) !important;
  border-radius: 14px;
}

/* Final precedence: the hero remains readable above legacy rules. */
body.page-id-61189 .spo-formations .spo-archiveHead--formations .spo-archiveHead__inner {
  max-width: none !important;
  background:
    radial-gradient(circle at 89% 13%, rgba(196, 215, 232, .2), transparent 30%),
    linear-gradient(132deg, #102a43 0%, #153e61 57%, #10334d 100%) !important;
}

body.page-id-61189 .spo-formations .spo-archiveHead--formations .spo-sub {
  color: rgba(255, 255, 255, .9) !important;
}

body.page-id-61189 .spo-formations .spo-archiveHead--formations .spo-card--soft,
body.page-id-61189 .spo-formations .spo-archiveHead--formations .spo-card--soft :is(li, strong) {
  color: #11283f !important;
}