/* ═══════════════════════════════════════════════════════════════════════
   SECUREX SST v1.0.1 — Frontend styles (fully namespaced: #ssst-page)
   ═══════════════════════════════════════════════════════════════════════ */

/* Google Fonts are loaded via wp_register_style / enqueue */

/* ── Reset scoped to our wrapper ──────────────────────────────────────── */
#ssst-page, #ssst-page * { box-sizing: border-box !important; }
#ssst-page img { max-width: 100%; height: auto; }
#ssst-page a { text-decoration: none; }

/* ── Custom properties ────────────────────────────────────────────────── */
#ssst-page {
  --navy:        #0D1F4E;
  --navy-deep:   #081540;
  --navy-mid:    #1B3F7A;
  --navy-light:  #EEF3FB;
  --orange:      #E84010;
  --orange-mid:  #F25020;
  --orange-light:#FEF0EC;
  --white:       #FFFFFF;
  --off:         #F5F7FA;
  --gray:        #6B7280;
  --gray-light:  #E5E7EB;
  --text:        #111827;
  --border:      rgba(13,31,78,0.09);
  --shadow-sm:   0 2px 8px rgba(13,31,78,0.07);
  --shadow-md:   0 8px 28px rgba(13,31,78,0.11);
  --shadow-lg:   0 20px 60px rgba(13,31,78,0.14);
  --radius:      14px;
  --radius-sm:   8px;
  --font-display:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--font-body) !important;
  color: var(--text) !important;
  line-height: 1.6 !important;
  overflow-x: hidden;
  background: white;
}

/* ── Typography overrides (fight theme resets) ────────────────────────── */
#ssst-page h1, #ssst-page h2, #ssst-page h3, #ssst-page h4 {
  font-family: var(--font-display) !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  color: var(--text) !important;
  margin: 0 !important;
  padding: 0 !important;
}
#ssst-page p { margin: 0 !important; padding: 0 !important; }
#ssst-page ul, #ssst-page ol { margin: 0 !important; padding: 0 !important; }
#ssst-page button { font-family: var(--font-body) !important; }

/* ── Layout ────────────────────────────────────────────────────────────── */
#ssst-page .ssst-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  width: 100% !important;
}
#ssst-page .ssst-section    { padding: 88px 0 !important; background: var(--white) !important; }
#ssst-page .ssst-section-alt{ padding: 88px 0 !important; background: var(--off) !important; }
#ssst-page .ssst-grid-bg {
  background-color: var(--off) !important;
  background-image:
    linear-gradient(to right,rgba(13,31,78,.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(13,31,78,.04) 1px,transparent 1px) !important;
  background-size: 40px 40px !important;
}
#ssst-page .ssst-center { text-align: center !important; }

/* ── Pills ─────────────────────────────────────────────────────────────── */
#ssst-page .ssst-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: white !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 30px !important;
  padding: 5px 14px 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  margin-bottom: 22px !important;
  box-shadow: var(--shadow-sm) !important;
}
#ssst-page .ssst-dot {
  width: 7px !important; height: 7px !important;
  background: var(--orange) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
#ssst-page .ssst-pill-center { display: flex !important; justify-content: center !important; margin-bottom: 18px !important; }
#ssst-page .ssst-pill-center .ssst-pill { margin-bottom: 0 !important; }

/* ── Section headings ─────────────────────────────────────────────────── */
#ssst-page .ssst-section-title {
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 900 !important;
  font-family: var(--font-display) !important;
  color: var(--text) !important;
  line-height: 1.08 !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.5px !important;
}
#ssst-page .ssst-accent { color: var(--orange) !important; }
#ssst-page .ssst-section-sub {
  font-size: 15px !important;
  color: var(--gray) !important;
  max-width: 580px !important;
  margin-bottom: 52px !important;
  line-height: 1.72 !important;
  font-family: var(--font-body) !important;
}
#ssst-page .ssst-center .ssst-section-sub { margin-left: auto !important; margin-right: auto !important; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
#ssst-page .ssst-btn-primary {
  background: var(--orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 26px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  letter-spacing: -0.1px !important;
  box-shadow: 0 4px 20px rgba(232,64,16,.35) !important;
  transition: background .15s, transform .12s, box-shadow .15s !important;
  font-family: var(--font-body) !important;
  line-height: 1 !important;
}
#ssst-page .ssst-btn-primary:hover {
  background: #C93208 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(232,64,16,.45) !important;
  color: #fff !important;
}
#ssst-page .ssst-btn-outline {
  background: transparent !important;
  color: white !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  border-radius: 10px !important;
  padding: 13px 24px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .15s, border-color .15s !important;
  display: inline-flex !important;
  align-items: center !important;
}
#ssst-page .ssst-btn-outline:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.45) !important;
  color: white !important;
}
#ssst-page .ssst-btn-outline-dark {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  border: 1.5px solid var(--gray-light) !important;
  border-radius: var(--radius-sm) !important;
  padding: 11px 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: border-color .15s, color .15s !important;
  text-decoration: none !important;
  display: inline-block !important;
}
#ssst-page .ssst-btn-outline-dark:hover { border-color: var(--orange) !important; color: var(--orange) !important; }

/* ══════════════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════════════ */
#ssst-page .ssst-hero {
  background: #081540 !important;
  padding: 72px 0 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
#ssst-page .ssst-hero::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background-image:
    radial-gradient(circle at 18% 50%,rgba(232,64,16,.14) 0%,transparent 55%),
    radial-gradient(circle at 82% 18%,rgba(27,63,122,.32) 0%,transparent 52%) !important;
  pointer-events: none !important;
}
#ssst-page .ssst-hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 480px !important;
  gap: 0 !important;
  align-items: flex-end !important;
  position: relative !important;
  z-index: 1 !important;
}
#ssst-page .ssst-hero-left { padding: 0 0 72px !important; }
#ssst-page .ssst-hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 30px !important;
  padding: 6px 16px 6px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.65) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 28px !important;
  font-family: var(--font-body) !important;
}
#ssst-page .ssst-h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(36px, 4.5vw, 54px) !important;
  font-weight: 900 !important;
  color: white !important;
  line-height: 1.04 !important;
  max-width: 560px !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.8px !important;
}
#ssst-page .ssst-h1 span { color: var(--orange) !important; }
#ssst-page .ssst-hero-desc {
  font-size: 16px !important;
  color: rgba(255,255,255,.62) !important;
  max-width: 480px !important;
  line-height: 1.78 !important;
  margin-bottom: 36px !important;
}
#ssst-page .ssst-hero-btns {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 52px !important;
}
#ssst-page .ssst-hero-stats {
  display: flex !important;
  gap: 36px !important;
  flex-wrap: wrap !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding-top: 36px !important;
}
#ssst-page .ssst-stat-n {
  font-family: var(--font-display) !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  color: var(--orange) !important;
  line-height: 1 !important;
}
#ssst-page .ssst-stat-l {
  font-size: 12px !important;
  color: rgba(255,255,255,.4) !important;
  margin-top: 5px !important;
  letter-spacing: .03em !important;
}

/* Hero right / image ──────────────────────────────────────────────── */
#ssst-page .ssst-hero-right {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding-top: 32px !important;
}
#ssst-page .ssst-hero-img-frame {
  width: 100% !important;
  background: linear-gradient(180deg,rgba(27,63,122,.22) 0%,rgba(232,64,16,.08) 100%) !important;
  border-radius: 20px 20px 0 0 !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  min-height: 460px !important;
}
#ssst-page .ssst-hero-img-placeholder {
  width: 100% !important; height: 100% !important; min-height: 460px !important;
  background: linear-gradient(160deg,#1a3a6e 0%,#0d1f4e 60%,#1b3f7a 100%) !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: flex-end !important;
  position: relative !important;
}
#ssst-page .ssst-hero-img-placeholder::after {
  content: '👷' !important;
  position: absolute !important; bottom: 0 !important;
  font-size: 200px !important; line-height: 1 !important;
  filter: drop-shadow(0 -10px 40px rgba(0,0,0,.4)) !important;
  transform: scaleX(-1) !important;
}

/* Floating cards ─────────────────────────────────────────────────── */
#ssst-page .ssst-float-card {
  position: absolute !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  box-shadow: var(--shadow-lg) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 10 !important;
  animation: ssst-float-bob 3s ease-in-out infinite !important;
}
#ssst-page .ssst-fc1 { top: 40px !important; left: -40px !important; animation-delay: 0s !important; }
#ssst-page .ssst-fc2 { top: 180px !important; right: -28px !important; animation-delay: 1.2s !important; }
#ssst-page .ssst-fc3 { bottom: 120px !important; left: -32px !important; animation-delay: .6s !important; }
@keyframes ssst-float-bob {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}
#ssst-page .ssst-fc-icon {
  width: 36px !important; height: 36px !important;
  border-radius: 9px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 16px !important; flex-shrink: 0 !important;
}
#ssst-page .ssst-fc-green  { background: #DCFCE7 !important; }
#ssst-page .ssst-fc-blue   { background: var(--navy-light) !important; }
#ssst-page .ssst-fc-orange { background: var(--orange-light) !important; }
#ssst-page .ssst-fc-title  { font-size: 12px !important; font-weight: 800 !important; color: var(--text) !important; font-family: var(--font-display) !important; }
#ssst-page .ssst-fc-sub    { font-size: 11px !important; color: var(--gray) !important; margin-top: 1px !important; }

/* ══ SERVICES ══════════════════════════════════════════════════════════ */
#ssst-page .ssst-services { padding: 72px 0 !important; background: white !important; }
#ssst-page .ssst-services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
#ssst-page .ssst-svc-card {
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  transition: transform .22s, box-shadow .22s !important;
  cursor: pointer !important;
  background: white !important;
}
#ssst-page .ssst-svc-card:hover { transform: translateY(-5px) !important; box-shadow: var(--shadow-lg) !important; }
#ssst-page .ssst-svc-img  { height: 180px !important; overflow: hidden !important; }
#ssst-page .ssst-svc-img-inner {
  width: 100% !important; height: 100% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: linear-gradient(135deg, var(--navy-light) 0%, #d6e4f5 100%) !important;
  position: relative !important;
}
#ssst-page .ssst-svc-img-inner::after {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: linear-gradient(180deg, transparent 40%, rgba(13,31,78,.1) 100%) !important;
}
#ssst-page .ssst-svc-emoji { font-size: 52px !important; position: relative !important; z-index: 1 !important; }
#ssst-page .ssst-svc-body  { padding: 20px 20px 22px !important; }
#ssst-page .ssst-svc-title {
  font-size: 15px !important; font-weight: 800 !important;
  color: var(--orange) !important; margin-bottom: 7px !important;
  font-family: var(--font-display) !important;
}
#ssst-page .ssst-svc-desc  { font-size: 13px !important; color: var(--gray) !important; line-height: 1.65 !important; margin-bottom: 14px !important; }
#ssst-page .ssst-svc-link  {
  font-size: 13px !important; font-weight: 700 !important; color: var(--navy) !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  transition: gap .15s, color .15s !important; text-decoration: none !important;
}
#ssst-page .ssst-svc-card:hover .ssst-svc-link { gap: 9px !important; color: var(--orange) !important; }

/* ══ ATELIERS ══════════════════════════════════════════════════════════ */
#ssst-page .ssst-ateliers-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}
#ssst-page .ssst-atelier-card {
  background: white !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 18px !important;
  cursor: pointer !important;
  transition: border-color .2s, transform .2s, box-shadow .2s !important;
  position: relative !important;
  overflow: hidden !important;
}
#ssst-page .ssst-atelier-card:hover {
  border-color: rgba(232,64,16,.3) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}
#ssst-page .ssst-atelier-card.selected {
  border-color: var(--orange) !important;
  background: #FFF8F5 !important;
}
/* Workshop image */
#ssst-page .ssst-atelier-img {
  margin: -18px -18px 14px -18px !important;
  height: 130px !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: var(--navy-light) !important;
  position: relative !important;
}
#ssst-page .ssst-atelier-img::after {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(180deg, transparent 50%, rgba(13,31,78,.35) 100%) !important;
}
#ssst-page .ssst-atelier-top { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; margin-bottom: 10px !important; }
#ssst-page .ssst-atelier-icon-row { display: flex !important; align-items: center !important; gap: 8px !important; }
#ssst-page .ssst-atelier-icon { font-size: 22px !important; }
#ssst-page .ssst-atelier-code {
  font-size: 11px !important; font-weight: 700 !important; color: #c5c5c5 !important;
  font-family: monospace !important;
}
#ssst-page .ssst-atelier-card.selected .ssst-atelier-code { color: var(--orange) !important; }
#ssst-page .ssst-atelier-check {
  width: 20px !important; height: 20px !important;
  border-radius: 6px !important; border: 2px solid #ddd !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 11px !important; font-weight: 900 !important; flex-shrink: 0 !important;
  transition: all .15s !important; background: transparent !important; color: white !important;
}
#ssst-page .ssst-atelier-card.selected .ssst-atelier-check {
  border-color: var(--orange) !important;
  background: var(--orange) !important;
}
#ssst-page .ssst-atelier-title {
  font-size: 13.5px !important; font-weight: 800 !important;
  color: var(--text) !important; margin-bottom: 6px !important;
  font-family: var(--font-display) !important;
  line-height: 1.3 !important;
}
#ssst-page .ssst-atelier-desc {
  font-size: 12px !important; color: var(--gray) !important;
  line-height: 1.6 !important; margin-bottom: 10px !important;
}
#ssst-page .ssst-atelier-tag {
  display: inline-block !important; font-size: 10px !important; font-weight: 700 !important;
  padding: 3px 10px !important; border-radius: 6px !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  background: var(--navy-light) !important; color: var(--navy-mid) !important;
}
#ssst-page .ssst-atelier-card.selected .ssst-atelier-tag {
  background: rgba(232,64,16,.12) !important; color: var(--orange) !important;
}
#ssst-page .ssst-selection-bar {
  margin-top: 28px !important; background: white !important;
  border: 1.5px solid rgba(232,64,16,.25) !important; border-radius: var(--radius) !important;
  padding: 20px 26px !important; display: none !important;
  justify-content: space-between !important; align-items: center !important;
  flex-wrap: wrap !important; gap: 16px !important; box-shadow: var(--shadow-sm) !important;
}
#ssst-page .ssst-selection-bar.visible { display: flex !important; }
#ssst-page .ssst-sel-n {
  font-size: 16px !important; font-weight: 900 !important;
  color: var(--orange) !important; font-family: var(--font-display) !important;
}
#ssst-page .ssst-sel-sub { font-size: 13px !important; color: var(--gray) !important; margin-top: 3px !important; }

/* ══ EXTRAS ════════════════════════════════════════════════════════════ */
#ssst-page .ssst-extras-grid {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important; margin-bottom: 20px !important;
}
#ssst-page .ssst-extra-card {
  background: white !important; border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important; padding: 22px 18px !important;
  box-shadow: var(--shadow-sm) !important;
}
#ssst-page .ssst-extra-icon  { font-size: 30px !important; margin-bottom: 12px !important; }
#ssst-page .ssst-extra-title {
  font-size: 14.5px !important; font-weight: 800 !important;
  color: var(--text) !important; margin-bottom: 14px !important;
  font-family: var(--font-display) !important;
}
#ssst-page .ssst-extra-list { list-style: none !important; }
#ssst-page .ssst-extra-list li {
  font-size: 12.5px !important; color: #777 !important;
  padding: 5px 0 !important; border-bottom: 1px solid var(--gray-light) !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
  list-style: none !important;
}
#ssst-page .ssst-extra-list li:last-child { border-bottom: none !important; }
#ssst-page .ssst-extra-list li::before { content: '◆' !important; color: var(--orange) !important; font-size: 8px !important; flex-shrink: 0 !important; }
#ssst-page .ssst-vr-banner {
  background: white !important; border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important; padding: 20px 24px !important;
  display: flex !important; align-items: center !important;
  gap: 18px !important; box-shadow: var(--shadow-sm) !important;
  flex-wrap: wrap !important;
}
#ssst-page .ssst-vr-icon  { font-size: 34px !important; flex-shrink: 0 !important; }
#ssst-page .ssst-vr-title { font-size: 15px !important; font-weight: 800 !important; color: var(--text) !important; margin-bottom: 4px !important; font-family: var(--font-display) !important; }
#ssst-page .ssst-vr-desc  { font-size: 13px !important; color: var(--gray) !important; line-height: 1.55 !important; }

/* ══ SECTEURS ══════════════════════════════════════════════════════════ */
#ssst-page .ssst-sectors-grid {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important; margin-bottom: 22px !important;
}
#ssst-page .ssst-sector-card {
  background: white !important; border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important; padding: 20px 16px !important;
  cursor: pointer !important; transition: all .22s !important;
  position: relative !important; overflow: hidden !important;
}
#ssst-page .ssst-sector-card::after {
  content: '' !important; position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important;
  background: var(--orange) !important; transform: scaleX(0) !important;
  transform-origin: left !important; transition: transform .22s !important;
}
#ssst-page .ssst-sector-card:hover {
  border-color: rgba(232,64,16,.3) !important;
  transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important;
}
#ssst-page .ssst-sector-card:hover::after { transform: scaleX(1) !important; }
#ssst-page .ssst-sector-icon-wrap {
  width: 44px !important; height: 44px !important; border-radius: 10px !important;
  background: var(--navy-light) !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  font-size: 20px !important; margin-bottom: 12px !important; transition: background .22s !important;
}
#ssst-page .ssst-sector-card:hover .ssst-sector-icon-wrap { background: var(--orange-light) !important; }
#ssst-page .ssst-sector-title {
  font-size: 13.5px !important; font-weight: 800 !important;
  color: var(--text) !important; margin-bottom: 4px !important;
  font-family: var(--font-display) !important; line-height: 1.3 !important;
}
#ssst-page .ssst-sector-desc { font-size: 12px !important; color: var(--gray) !important; line-height: 1.5 !important; }
#ssst-page .ssst-sector-arrow {
  position: absolute !important; top: 14px !important; right: 14px !important;
  color: #d1d5db !important; font-size: 14px !important;
  transition: color .22s, transform .22s !important;
}
#ssst-page .ssst-sector-card:hover .ssst-sector-arrow { color: var(--orange) !important; transform: translate(2px,-2px) !important; }
#ssst-page .ssst-sectors-bottom {
  background: white !important; border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important; padding: 18px 24px !important;
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 16px !important;
  box-shadow: var(--shadow-sm) !important;
}
#ssst-page .ssst-sectors-bottom-text { font-size: 13.5px !important; color: var(--gray) !important; }
#ssst-page .ssst-sectors-bottom-text strong { color: var(--text) !important; font-weight: 800 !important; }

/* ══ PACKAGES ══════════════════════════════════════════════════════════ */
#ssst-page .ssst-packages-grid {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
}
#ssst-page .ssst-pkg-card {
  background: white !important; border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important; padding: 20px 18px !important;
  cursor: pointer !important; transition: all .2s !important;
  position: relative !important; box-shadow: var(--shadow-sm) !important;
}
#ssst-page .ssst-pkg-card:hover { border-color: rgba(232,64,16,.35) !important; box-shadow: var(--shadow-md) !important; }
#ssst-page .ssst-pkg-card.open  { border-color: var(--orange) !important; }
#ssst-page .ssst-pkg-badge {
  position: absolute !important; top: -11px !important; right: 14px !important;
  background: var(--orange) !important; color: white !important;
  font-size: 10px !important; font-weight: 800 !important;
  padding: 3px 11px !important; border-radius: 14px !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
}
#ssst-page .ssst-pkg-head { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 10px !important; }
#ssst-page .ssst-pkg-icon  { font-size: 28px !important; }
#ssst-page .ssst-pkg-arrow { color: #ccc !important; font-size: 12px !important; transition: transform .2s, color .2s !important; }
#ssst-page .ssst-pkg-card.open .ssst-pkg-arrow { color: var(--orange) !important; transform: rotate(180deg) !important; }
#ssst-page .ssst-pkg-title {
  font-size: 14px !important; font-weight: 900 !important;
  color: var(--text) !important; margin-bottom: 4px !important;
  font-family: var(--font-display) !important; line-height: 1.3 !important;
}
#ssst-page .ssst-pkg-desc    { font-size: 12px !important; color: var(--gray) !important; margin-bottom: 12px !important; }
#ssst-page .ssst-pkg-preview { font-size: 12px !important; color: #aaa !important; }
#ssst-page .ssst-pkg-body {
  border-top: 1px solid var(--gray-light) !important;
  padding-top: 14px !important; margin-top: 4px !important; display: none !important;
}
#ssst-page .ssst-pkg-card.open .ssst-pkg-body { display: block !important; }
#ssst-page .ssst-pkg-label {
  font-size: 10px !important; font-weight: 800 !important;
  letter-spacing: .07em !important; text-transform: uppercase !important;
  color: var(--orange) !important; margin-bottom: 8px !important; margin-top: 4px !important;
}
#ssst-page .ssst-pkg-ai {
  font-size: 12px !important; color: #555 !important;
  padding: 3px 0 !important; display: flex !important; align-items: center !important; gap: 6px !important;
}
#ssst-page .ssst-pkg-ai::before { content: '◆' !important; color: var(--orange) !important; font-size: 7px !important; }
#ssst-page .ssst-pkg-btn {
  display: block !important; width: 100% !important; margin-top: 16px !important;
  background: var(--orange) !important; color: white !important; border: none !important;
  border-radius: var(--radius-sm) !important; padding: 11px 0 !important;
  font-size: 13px !important; font-weight: 800 !important; cursor: pointer !important;
  text-align: center !important; text-decoration: none !important;
  transition: background .15s !important; font-family: var(--font-body) !important;
}
#ssst-page .ssst-pkg-btn:hover { background: #C93208 !important; color: white !important; }

/* ══ PROCESSUS ════════════════════════════════════════════════════════ */
#ssst-page .ssst-processus-wrap {
  display: grid !important; grid-template-columns: 1fr 400px !important;
  gap: 60px !important; align-items: start !important;
}
#ssst-page .ssst-processus-item {
  display: flex !important; gap: 22px !important; padding: 22px 0 !important;
  border-bottom: 1px solid var(--gray-light) !important; align-items: flex-start !important;
}
#ssst-page .ssst-processus-item:last-child { border-bottom: none !important; }
#ssst-page .ssst-proc-n {
  font-size: 12px !important; font-weight: 800 !important;
  color: var(--orange) !important; min-width: 28px !important;
  padding-top: 3px !important; font-family: monospace !important;
}
#ssst-page .ssst-proc-title {
  font-size: 15.5px !important; font-weight: 800 !important;
  color: var(--text) !important; margin-bottom: 5px !important;
  font-family: var(--font-display) !important;
}
#ssst-page .ssst-proc-desc { font-size: 13.5px !important; color: var(--gray) !important; line-height: 1.65 !important; }
#ssst-page .ssst-proc-visual {
  background: var(--navy) !important; border-radius: 18px !important;
  padding: 32px !important; color: white !important; position: sticky !important;
  top: 100px !important; overflow: hidden !important;
}
#ssst-page .ssst-proc-visual::before {
  content: '' !important; position: absolute !important;
  top: -60px !important; right: -60px !important; width: 200px !important; height: 200px !important;
  background: radial-gradient(circle,rgba(232,64,16,.22) 0%,transparent 65%) !important;
}
#ssst-page .ssst-pv-title {
  font-family: var(--font-display) !important;
  font-size: 22px !important; font-weight: 900 !important; margin-bottom: 6px !important;
}
#ssst-page .ssst-pv-sub { font-size: 14px !important; color: rgba(255,255,255,.5) !important; margin-bottom: 28px !important; line-height: 1.6 !important; }
#ssst-page .ssst-pv-stat { margin-bottom: 20px !important; }
#ssst-page .ssst-pv-n {
  font-family: var(--font-display) !important;
  font-size: 40px !important; font-weight: 900 !important;
  color: var(--orange) !important; line-height: 1 !important;
}
#ssst-page .ssst-pv-l { font-size: 12.5px !important; color: rgba(255,255,255,.45) !important; margin-top: 4px !important; }
#ssst-page .ssst-pv-divider { height: 1px !important; background: rgba(255,255,255,.08) !important; margin: 20px 0 !important; }

/* ══ FORM ═══════════════════════════════════════════════════════════ */
#ssst-page .ssst-form-wrap {
  display: grid !important; grid-template-columns: 1.2fr 1fr !important; gap: 36px !important;
}
#ssst-page .ssst-form-row  { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
#ssst-page .ssst-form-group{ display: flex !important; flex-direction: column !important; gap: 7px !important; margin-bottom: 16px !important; }
#ssst-page .ssst-form-label{ font-size: 13px !important; font-weight: 700 !important; color: #4b5563 !important; }
#ssst-page .ssst-form-input,
#ssst-page .ssst-form-select,
#ssst-page .ssst-form-textarea {
  background: var(--off) !important; border: 1.5px solid var(--gray-light) !important;
  border-radius: var(--radius-sm) !important; color: var(--text) !important;
  padding: 11px 14px !important; font-size: 14px !important;
  font-family: var(--font-body) !important; outline: none !important;
  transition: border-color .15s, background .15s !important; width: 100% !important;
  box-shadow: none !important; -webkit-appearance: auto !important;
}
#ssst-page .ssst-form-input:focus,
#ssst-page .ssst-form-select:focus,
#ssst-page .ssst-form-textarea:focus {
  border-color: var(--orange) !important; background: white !important;
  box-shadow: 0 0 0 3px rgba(232,64,16,.08) !important;
}
#ssst-page .ssst-form-textarea { height: 92px !important; resize: vertical !important; line-height: 1.6 !important; }
#ssst-page .ssst-form-select   { cursor: pointer !important; }
#ssst-page .ssst-radio-group   {
  display: flex !important; flex-direction: column !important;
  gap: 6px !important; max-height: 340px !important; overflow-y: auto !important;
}
#ssst-page .ssst-radio-label {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 9px 13px !important; border-radius: var(--radius-sm) !important;
  cursor: pointer !important; border: 1.5px solid transparent !important;
  font-size: 13px !important; color: #555 !important; transition: all .15s !important;
}
#ssst-page .ssst-radio-label:hover { background: var(--orange-light) !important; }
#ssst-page .ssst-radio-label input { accent-color: var(--orange) !important; }
#ssst-page .ssst-radio-label.checked {
  background: #fff8f5 !important; border-color: rgba(232,64,16,.25) !important;
  color: var(--text) !important; font-weight: 600 !important;
}
#ssst-page .ssst-extras-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
#ssst-page .ssst-chip-label {
  display: flex !important; align-items: center !important; gap: 6px !important;
  padding: 7px 14px !important; border-radius: 20px !important; cursor: pointer !important;
  border: 1.5px solid var(--gray-light) !important; font-size: 12.5px !important;
  color: #888 !important; transition: all .15s !important;
}
#ssst-page .ssst-chip-label:hover { border-color: var(--orange) !important; color: var(--orange) !important; }
#ssst-page .ssst-chip-label.checked {
  background: var(--orange-light) !important; border-color: var(--orange) !important;
  color: var(--orange) !important; font-weight: 700 !important;
}
#ssst-page .ssst-chip-label input { display: none !important; }
#ssst-page .ssst-form-footer {
  display: flex !important; align-items: center !important;
  gap: 20px !important; margin-top: 28px !important; flex-wrap: wrap !important;
}
#ssst-page .ssst-form-note { font-size: 13px !important; color: var(--gray) !important; }
#ssst-page .ssst-form-message {
  padding: 14px 20px !important; border-radius: var(--radius-sm) !important;
  margin-bottom: 24px !important; font-size: 14px !important; font-weight: 600 !important;
}
#ssst-page .ssst-form-message.ssst-success {
  background: #f0fdf4 !important; border: 1.5px solid #86efac !important; color: #166534 !important;
}
#ssst-page .ssst-form-message.ssst-error {
  background: #fff1f2 !important; border: 1.5px solid #fecdd3 !important; color: #9f1239 !important;
}

/* ══ FAQ ════════════════════════════════════════════════════════════ */
#ssst-page .ssst-faq-list { max-width: 780px !important; margin: 0 auto !important; }
#ssst-page .ssst-faq-item { border-bottom: 1px solid var(--gray-light) !important; }
#ssst-page .ssst-faq-q {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 20px 0 !important; cursor: pointer !important; font-size: 15.5px !important;
  font-weight: 800 !important; color: var(--text) !important; gap: 20px !important;
  background: none !important; border: none !important; width: 100% !important;
  text-align: left !important; font-family: var(--font-display) !important;
  transition: color .15s !important; box-shadow: none !important;
}
#ssst-page .ssst-faq-q:hover { color: var(--orange) !important; }
#ssst-page .ssst-faq-q span  { color: var(--orange) !important; font-size: 20px !important; flex-shrink: 0 !important; }
#ssst-page .ssst-faq-a { font-size: 14px !important; color: var(--gray) !important; line-height: 1.75 !important; padding-bottom: 20px !important; display: none !important; }
#ssst-page .ssst-faq-a.open  { display: block !important; }

/* ══ CTA ════════════════════════════════════════════════════════════ */
#ssst-page .ssst-cta-section {
  background: #081540 !important; padding: 96px 0 !important;
  position: relative !important; overflow: hidden !important;
}
#ssst-page .ssst-cta-section::before {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.025)1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.025)1px,transparent 1px) !important;
  background-size: 44px 44px !important;
}
#ssst-page .ssst-cta-glow {
  position: absolute !important; bottom: -80px !important; left: 50% !important;
  transform: translateX(-50%) !important; width: 600px !important; height: 400px !important;
  background: radial-gradient(ellipse,rgba(232,64,16,.22)0%,transparent 65%) !important;
  pointer-events: none !important;
}
#ssst-page .ssst-cta-content { position: relative !important; z-index: 1 !important; text-align: center !important; }
#ssst-page .ssst-cta-eyebrow {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 30px !important; padding: 5px 15px 5px 11px !important;
  font-size: 11px !important; font-weight: 700 !important; color: rgba(255,255,255,.6) !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; margin-bottom: 22px !important;
}
#ssst-page .ssst-cta-title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.5vw, 46px) !important; font-weight: 900 !important;
  color: white !important; max-width: 620px !important;
  margin: 0 auto 16px !important; line-height: 1.08 !important; letter-spacing: -.7px !important;
}
#ssst-page .ssst-cta-title span { color: var(--orange) !important; }
#ssst-page .ssst-cta-desc {
  font-size: 16px !important; color: rgba(255,255,255,.5) !important;
  max-width: 460px !important; margin: 0 auto 40px !important; line-height: 1.75 !important;
}
#ssst-page .ssst-cta-btns { display: flex !important; gap: 12px !important; justify-content: center !important; flex-wrap: wrap !important; margin-bottom: 48px !important; }
#ssst-page .ssst-cta-contacts { display: flex !important; gap: 32px !important; justify-content: center !important; flex-wrap: wrap !important; }
#ssst-page .ssst-cta-contact  { font-size: 13.5px !important; color: rgba(255,255,255,.38) !important; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #ssst-page .ssst-extras-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  #ssst-page .ssst-sectors-grid { grid-template-columns: repeat(3, 1fr) !important; }
  #ssst-page .ssst-packages-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  #ssst-page .ssst-hero-grid       { grid-template-columns: 1fr !important; }
  #ssst-page .ssst-hero-right      { display: none !important; }
  #ssst-page .ssst-services-grid   { grid-template-columns: 1fr !important; }
  #ssst-page .ssst-ateliers-grid   { grid-template-columns: 1fr 1fr !important; }
  #ssst-page .ssst-form-wrap       { grid-template-columns: 1fr !important; }
  #ssst-page .ssst-form-row        { grid-template-columns: 1fr !important; }
  #ssst-page .ssst-extras-grid     { grid-template-columns: 1fr 1fr !important; }
  #ssst-page .ssst-sectors-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  #ssst-page .ssst-packages-grid   { grid-template-columns: 1fr !important; }
  #ssst-page .ssst-processus-wrap  { grid-template-columns: 1fr !important; }
  #ssst-page .ssst-container       { padding: 0 16px !important; }
  #ssst-page .ssst-section,
  #ssst-page .ssst-section-alt     { padding: 56px 0 !important; }
  #ssst-page .ssst-sectors-bottom  { flex-direction: column !important; text-align: center !important; }
  #ssst-page .ssst-vr-banner       { flex-direction: column !important; }
}
@media (max-width: 480px) {
  #ssst-page .ssst-ateliers-grid   { grid-template-columns: 1fr !important; }
  #ssst-page .ssst-extras-grid     { grid-template-columns: 1fr !important; }
  #ssst-page .ssst-sectors-grid    { grid-template-columns: 1fr !important; }
}