/* =============================================================
   SEVA — Sas d'orientation (page d'entrée)
   À inclure via wp_enqueue_style('seva-hero', '.../seva-hero.css').
   Polices : Manrope (300/400/500/600) + JetBrains Mono (400/500).
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --seva-navy:  #0E1F3D;
  --seva-ink:   #0a0d14;
  --seva-cyan:  #5fb0db;
  --seva-paper: #ffffff;
  --seva-sans:  'Manrope', system-ui, -apple-system, sans-serif;
  --seva-mono:  'JetBrains Mono', ui-monospace, monospace;
}

.seva-hero,
.seva-hero * { box-sizing: border-box; }

.seva-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  background: var(--seva-ink);
  color: #fff;
  font-family: var(--seva-sans);
  overflow: hidden;
  user-select: none;
}

/* ============== Header (logo only) ============== */
.seva-hero__header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 48px;
  z-index: 20;
}
.seva-hero__logo img { display: block; height: 34px; width: auto; }

/* ============== Split ============== */
.seva-hero__split {
  position: absolute; inset: 0;
  display: flex;
}

.seva-panel {
  position: relative;
  flex: 1;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: flex .6s cubic-bezier(.6,.05,.2,1);
}
.seva-hero__split:hover .seva-panel:hover  { flex: 1.18; }
.seva-hero__split:hover .seva-panel:not(:hover) { flex: .82; }

/* divider */
.seva-hero__divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(255,255,255,.08);
  z-index: 5;
  pointer-events: none;
}

/* photo */
.seva-panel__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  filter: saturate(.85) brightness(.85);
  transition: transform 1.2s cubic-bezier(.2,.7,.3,1), filter .6s;
  will-change: transform, filter;
}
.seva-panel:hover .seva-panel__bg {
  transform: scale(1.06);
  filter: saturate(1.08) brightness(1.05);
}

/* tint */
.seva-panel--left  .seva-panel__tint {
  background: linear-gradient(180deg, rgba(8,20,41,.55) 0%, rgba(8,20,41,.25) 35%, rgba(8,20,41,.85) 100%);
}
.seva-panel--right .seva-panel__tint {
  background: linear-gradient(180deg, rgba(8,20,41,.55) 0%, rgba(8,20,41,.25) 35%, rgba(14,31,61,.88) 100%);
}
.seva-panel__tint {
  position: absolute; inset: 0;
  transition: opacity .5s;
  opacity: 1;
}
.seva-panel:hover .seva-panel__tint { opacity: .85; }

/* ============== Top label row ============== */
.seva-panel__label {
  position: absolute;
  top: 120px;
  left: 48px;
  right: 48px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--seva-mono);
  font-size: 18px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.seva-panel__num     { color: rgba(255,255,255,.72); font-weight: 400; }
.seva-panel__eyebrow { font-weight: 500; flex: 1; }
.seva-panel__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: background .3s;
}
.seva-panel--right:hover .seva-panel__dot { background: var(--seva-cyan); }
.seva-panel--left:hover  .seva-panel__dot { background: #fff; }

/* ============== Bottom content ============== */
.seva-panel__content {
  position: absolute;
  left: 48px; right: 48px; bottom: 96px;
}
.seva-panel__title {
  margin: 0;
  font-family: var(--seva-sans);
  font-size: 74px !important;
  line-height: .96;
  letter-spacing: -.035em;
  font-weight: 300 !important;
  color: #fff !important;
}
.seva-panel__text {
  margin: 28px 0 0;
  max-width: 480px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  font-weight: 400;
}

/* CTA pill */
.seva-panel__cta {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 24px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .35s, color .35s;
}
.seva-panel:hover .seva-panel__cta {
  background: #fff;
  color: var(--seva-ink);
}
.seva-panel__cta-arrow {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  background: transparent;
  color: #fff;
  transition: background .35s, color .35s;
}
.seva-panel:hover .seva-panel__cta-arrow {
  background: var(--seva-ink);
  color: #fff;
}

/* ============== Footer signals ============== */
.seva-hero__footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 48px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  z-index: 20;
}
.seva-hero__signals {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; gap: 32px;
  align-items: center;
  font-family: var(--seva-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
}
.seva-hero__signals li {
  display: inline-flex;
  align-items: center;
  gap: 32px;
}
.seva-hero__signals li:not(:last-child)::after {
  content: '';
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
}

/* ============== Tablette ============== */
@media (max-width: 1024px) {
  .seva-panel__label   { top: 96px; font-size: 14px; }
  .seva-panel__content { bottom: 84px; }
  .seva-panel__title   { font-size: 56px; }
  .seva-panel__text    { font-size: 14.5px; }
}

/* ============== Mobile (stack vertical) ============== */
@media (max-width: 768px) {
  .seva-hero { height: auto; min-height: 0; }
  .seva-hero__split {
    position: relative;
    inset: auto;
    flex-direction: column;
  }
  .seva-hero__divider { display: none; }
  .seva-panel {
    flex: none;
    min-height: 70vh;
  }
  .seva-hero__split:hover .seva-panel:hover,
  .seva-hero__split:hover .seva-panel:not(:hover) { flex: none; }

  .seva-hero__header { position: relative; height: 64px; padding: 0 24px; }
  .seva-panel__label { top: 24px; left: 24px; right: 24px; font-size: 12px; gap: 12px; }
  .seva-panel__content { left: 24px; right: 24px; bottom: 40px; }
  .seva-panel__title { font-size: 52px !important;
    font-weight: 500 !important; }
  .seva-panel__text  { font-size: 14px; max-width: none; }

  .seva-hero__footer {
    position: relative;
    height: auto;
    padding: 20px 24px;
    background: var(--seva-ink);
  }
  .seva-hero__signals { font-size: 10px; gap: 18px; flex-wrap: wrap; justify-content: flex-start; }
  .seva-hero__signals li { gap: 18px; }
}

/* ============== Accessibility ============== */
@media (prefers-reduced-motion: reduce) {
  .seva-panel,
  .seva-panel__bg,
  .seva-panel__tint,
  .seva-panel__cta,
  .seva-panel__cta-arrow { transition: none !important; }
}
.seva-panel:focus-visible {
  outline: 2px solid var(--seva-cyan);
  outline-offset: -2px;
}