/* ============================================================
   LUCEED — sectors.css
   Pages sectorielles : hero image · fil d'Ariane · enjeux ·
   services · encart SENS (navy) · références. S'appuie sur le
   système partagé (subhero, step, glass, cta-band, sens-lockup).
   ============================================================ */

/* ---------- Hero (image + voile directionnel) ---------- */
.sp-hero { align-items: center; min-height: clamp(560px, 82vh, 760px); }
.sp-hero__img { position: absolute; inset: 0; z-index: 0; }
.sp-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sp-hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(9,18,30,0.90) 0%, rgba(9,18,30,0.74) 30%, rgba(9,18,30,0.34) 60%, rgba(9,18,30,0.20) 100%),
    linear-gradient(0deg, rgba(9,18,30,0.55) 0%, rgba(9,18,30,0.08) 38%, transparent 64%);
}
.sp-hero .subhero__inner { padding-top: 24px; }
.sp-hero .sp-crumb { color: rgba(255,255,255,0.74); }
.sp-hero .eyebrow { color: var(--sand); }
.sp-hero h1 {
  margin-top: 16px; color: #fff; max-width: 20ch;
  font-size: clamp(2.6rem, 1.6rem + 5vw, 5.2rem); letter-spacing: -0.04em; line-height: 1.03;
}

/* Fil d'Ariane */
.sp-crumb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 0.82rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.7);
  margin-bottom: 18px;
}
.sp-crumb a { color: rgba(255,255,255,0.7); transition: color .25s; }
.sp-crumb a:hover { color: #fff; }
.sp-crumb span[aria-hidden] { color: var(--sand); }
.sp-crumb b { color: #fff; font-weight: 600; }

.sp-hero__panel { margin-top: 28px; max-width: 660px; }
.sp-hero__panel p { font-size: var(--fs-lead); line-height: 1.55; color: rgba(255,255,255,0.94); }

/* ---------- Enjeux ---------- */
.sp-enjeux {
  margin-top: clamp(38px, 5vw, 60px);
  display: grid; gap: 18px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .sp-enjeux { grid-template-columns: 1fr 1fr; } }
.enjeu {
  position: relative; background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: clamp(24px, 2.6vw, 34px);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.section--bone .enjeu { background: #fff; }
.enjeu:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -32px rgba(21,40,65,0.4); border-color: rgba(21,40,65,0.18); }
.enjeu__num { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--accent); font-weight: 500; }
.enjeu h3 { margin-top: 14px; font-size: var(--fs-h3); letter-spacing: -0.01em; text-wrap: balance; }
.enjeu p { margin-top: 12px; font-size: 1rem; line-height: 1.62; color: var(--ink-soft); }

/* ---------- Ce que nous faisons (réutilise .step) ---------- */
.sp-steps {
  margin-top: clamp(38px, 5vw, 60px);
  display: grid; gap: 18px; grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .sp-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sp-steps { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Encart SENS (navy + grille trajectoire) ---------- */
.sp-sens { position: relative; overflow: hidden; }
.sp-sens__grid {
  position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(115% 100% at 88% 4%, #000 22%, transparent 74%);
  mask-image: radial-gradient(115% 100% at 88% 4%, #000 22%, transparent 74%);
}
.sp-sens__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 92% 0%, rgba(239,100,56,0.12), transparent 55%),
              radial-gradient(60% 55% at 4% 100%, rgba(226,185,124,0.10), transparent 60%);
}
.sp-sens .container { position: relative; z-index: 1; }
.sp-sens__inner { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) { .sp-sens__inner { grid-template-columns: auto 1fr; } }
.sp-sens__body { max-width: 560px; }
.sp-sens__body .eyebrow { color: var(--sand); }
.sp-sens__text { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.6; color: var(--navy-100); }
.sp-sens__list { margin-top: 20px; display: grid; gap: 13px; }
.sp-sens__list li {
  position: relative; list-style: none; padding-left: 30px;
  font-size: 1.04rem; line-height: 1.5; color: rgba(255,255,255,0.9);
}
.sp-sens__list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 16px; height: 9px; border-left: 2px solid var(--sand); border-bottom: 2px solid var(--sand);
  transform: rotate(-45deg) translateY(-2px); transform-origin: left center;
}
.sp-sens__cta { margin-top: 28px; }
.sp-sens .sens-lockup { margin-top: 0; }

/* ---------- Références ---------- */
.sp-refs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; max-width: none; }
.sp-refs-grid {
  margin-top: clamp(34px, 4vw, 52px);
  display: grid; gap: 22px; grid-template-columns: 1fr;
}
@media (min-width: 680px)  { .sp-refs-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .sp-refs-grid { grid-template-columns: repeat(3, 1fr); } }
.sp-refs-empty { margin-top: 28px; color: var(--ink-soft); font-size: 1.05rem; }

/* Regroupement par sous-domaine (secteur public) */
.sp-refs-groups { margin-top: clamp(34px, 4vw, 52px); display: grid; gap: clamp(36px, 4.5vw, 60px); }
.sp-subgroup__title { font-size: clamp(1.12rem, 1rem + 0.6vw, 1.4rem); letter-spacing: -0.01em; color: var(--ink);
  padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.sp-subgroup .sp-refs-grid { margin-top: 22px; }