/* ═══════════════════════════════════════════════════════════
   Randozone — Hero 1 : Éditorial à filet
   Carte blanche, filet bleu vertical, badges en haut à droite.
   Classe principale : .rz-hero-editorial
   ═══════════════════════════════════════════════════════════ */

/* ── 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;
  font-size: clamp(2.1rem, 4.6vw, 3rem);
  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 éditorial à filet ── */
.rz-hero-editorial {
  position: relative;
  background: var(--hv-surface);
  border: 1px solid var(--hv-line);
  border-radius: 22px;
  padding: 2.7rem 3rem;
  box-shadow: 0 24px 60px -42px rgba(20, 40, 80, .55);
}
.rz-hero-editorial::before {
  content: "";
  position: absolute; left: 0; top: 2.7rem; bottom: 2.7rem;
  width: 5px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--hv-primary), var(--hv-primary-dark));
}
.rz-hero-editorial .hv-body { padding-left: 1.7rem; }
.rz-hero-editorial .hv-topmeta {
  position: absolute; top: 1.7rem; right: 1.9rem;
  display: flex; gap: .5rem;
}

.rz-hero-editorial .hv-title .lt { color: var(--hv-primary); }

@media (max-width: 760px) {
  .rz-hero-editorial { padding: 2rem 1.4rem; }
  .rz-hero-editorial::before { top: 2rem; bottom: 2rem; }
  .rz-hero-editorial .hv-body { padding-left: 1.2rem; }
  .rz-hero-editorial .hv-topmeta { position: static; margin-bottom: 1rem; }
}