/* ═══════════════════════════════════════════════════════════
   Randozone — Hero photo
   Bannière pleine largeur avec image de fond, overlay gradient,
   texte clair sur fond sombre.
   Classe principale : .rz-hero-photo
   Usage : <div class="rz-hero-photo" style="--hp-img:url('/path/photo.jpg')">
   ═══════════════════════════════════════════════════════════ */

/* ── 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-* (couleurs claires, surchargées ci-dessous) ── */
.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 .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); }

/* ── Hero photo ── */
.rz-hero-photo {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background-image: var(--hp-img, none);
  background-size: cover;
  background-position: center;
  background-color: var(--hv-surface-2);
  box-shadow: 0 24px 60px -30px rgba(10, 20, 50, .55);
}

/* Overlay gradient bas → haut */
.rz-hero-photo .hp-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 16, 36, .82) 0%,
    rgba(8, 16, 36, .38) 42%,
    transparent 100%
  );
}

/* Corps du texte, au-dessus de l'overlay */
.rz-hero-photo .hp-body {
  position: relative;
  z-index: 1;
  padding: 2.5rem 3rem;
  width: 100%;
}

/* Badges positionnés en haut à droite */
.rz-hero-photo .hp-topmeta {
  position: absolute; top: 1.8rem; right: 1.9rem;
  display: flex; gap: .5rem; z-index: 2;
}

/* ── Surcharges hv-* pour fond sombre ── */
.rz-hero-photo .hv-eyebrow {
  color: rgba(255, 255, 255, .85);
}
.rz-hero-photo .hv-eyebrow.pill {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .26);
  backdrop-filter: blur(6px);
}
.rz-hero-photo .hv-title {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.rz-hero-photo .hv-sub {
  color: rgba(255, 255, 255, .78);
}
.rz-hero-photo .hv-chip {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  backdrop-filter: blur(6px);
}
.rz-hero-photo .hv-chip i { color: rgba(255, 255, 255, .75); }
.rz-hero-photo .hv-chip .rz-ico { color: rgba(255, 255, 255, .75); width: 1.1rem; height: 1.1rem; }
.rz-hero-photo .hv-chip .k { color: rgba(255, 255, 255, .6); }
.rz-hero-photo .hv-eyebrow .rz-ico { width: 1rem; height: 1rem; }
.rz-hero-photo .hv-meta {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(4px);
}
.rz-hero-photo .hv-meta i { color: rgba(255, 255, 255, .78); }
.rz-hero-photo .hv-meta .rz-ico { color: rgba(255, 255, 255, .78); }

@media (max-width: 760px) {
  .rz-hero-photo { min-height: 340px; }
  .rz-hero-photo .hp-body { padding: 2rem 1.4rem; }
  .rz-hero-photo .hp-topmeta { position: static; margin-bottom: 1rem; }
}