/* ═══════════════════════════════════════════════════════════
   Randozone — Hero 2 : Bandeau topographique
   Dégradé bleu + lignes de niveau SVG en filigrane.
   Classe principale : .rz-hero-topo
   Le SVG des courbes de niveau est inséré dans le markup :
   <div class="rz-hero-topo-lines" aria-hidden="true"><svg …></svg></div>
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --hv-ink:          var(--rz-ink);
  --hv-ink-soft:     var(--rz-inksoft);
  --hv-primary:      var(--rz-primary);
  --hv-primary-dark: #0f4f86;
  --hv-surface:      var(--rz-surface);
  --hv-surface-2:    var(--rz-surface-2);
  --hv-line:         var(--rz-border);
}

/* ── Éléments partagés hv-* ── */
.hv-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--hv-primary);
}
.hv-eyebrow.pill {
  background: color-mix(in oklch, var(--hv-primary) 10%, white);
  border: 1px solid color-mix(in oklch, var(--hv-primary) 20%, white);
  border-radius: 999px; padding: .36rem .8rem;
}
.hv-title {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.022em; line-height: 1.02;
  color: var(--hv-ink); margin: .7rem 0 0;
}
.hv-sub {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-style: italic; font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.3; color: var(--hv-ink-soft); margin: .55rem 0 0;
}
.hv-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.hv-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .86rem; font-weight: 600; color: var(--hv-ink);
  background: var(--hv-surface); border: 1px solid var(--hv-line);
  border-radius: 999px; padding: .45rem .9rem;
}
.hv-chip i { color: var(--hv-primary); font-size: 1rem; }
.hv-chip .rz-ico { color: var(--hv-primary); }
.hv-chip .k { color: var(--hv-ink-soft); font-weight: 500; }
.hv-meta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 600; color: var(--hv-ink-soft);
  background: var(--hv-surface-2); border: 1px solid var(--hv-line);
  border-radius: 999px; padding: .3rem .7rem; white-space: nowrap;
}
.hv-meta i { color: var(--hv-primary); }
.hv-meta .rz-ico { color: var(--hv-primary); }

/* ── Hero topographique ── */
.rz-hero-topo {
  /* Surcharge des tokens pour fond bleuté : évite les conflits multi-fichiers */
  --hv-ink:      #0d1f33;
  --hv-ink-soft: #233348;
  --hv-primary:  #0f4f86;

  position: relative;
  overflow: hidden;
  opacity: 1;          /* neutralise l'opacity:.5 défini sur .rz-hero-topo dans rz-bs5.css (ancien système) */
  border: 1px solid color-mix(in oklch, var(--hv-primary) 18%, white);
  border-radius: 22px;
  padding: 2.7rem 3rem;
  background: linear-gradient(
    118deg,
    color-mix(in oklch, var(--hv-primary) 10%, white),
    color-mix(in oklch, var(--hv-primary) 4%,  white) 55%,
    white
  );
}
.rz-hero-topo-lines {
  position: absolute; top: 50%; right: -6%;
  transform: translateY(-50%);
  width: 560px; height: 520px;
  color: var(--hv-primary); opacity: .16; pointer-events: none;
}
.rz-hero-topo-lines svg { width: 100%; height: 100%; }
.rz-hero-topo .hv-topmeta {
  position: absolute; top: 1.8rem; right: 1.9rem;
  display: flex; gap: .5rem; z-index: 2;
}
.rz-hero-topo .hv-topmeta .hv-meta {
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(4px);
}
.rz-hero-topo .hv-body { position: relative; z-index: 1; }

/* Fond blanc opaque sur le pill eyebrow (remplace color-mix sur fond bleuté) */
.rz-hero-topo .hv-eyebrow.pill {
  background: rgba(255, 255, 255, .8);
  border-color: rgba(255, 255, 255, .95);
  backdrop-filter: blur(4px);
}
.rz-hero-topo .hv-title .lt { color: var(--hv-primary); }

@media (max-width: 760px) {
  .rz-hero-topo { padding: 2rem 1.4rem; }
  .rz-hero-topo .hv-topmeta { position: static; margin-bottom: 1rem; }
  .rz-hero-topo-lines { display: none; }
}