/* Bloc villemont/hero — styles venus de components.css / sections.css (refonte 1e) */

/* ── Hero shared ──────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
}

/* ── Hero cinematic ───────────────────────────────────────── */

.hero-cinematic {
  position: relative;

  /* svh = "small viewport height" : stable quand la barre d'URL mobile
     apparaît/disparaît (évite le saut de recadrage au scroll). */
  min-height: 100svh;
}

.hero-cinematic__bg {
  position: absolute;
  inset: 0;

  /* L'affiche (image de la vidéo à data-start) est posée en fond : la vidéo
     reste invisible tant qu'elle n'est pas en lecture (main.js), puis remplace
     l'affiche sans fondu. */
  background-color: var(--ink);
  background-size: cover;
  background-position: var(--hero-position, center 38%);
}

.hero-cinematic__video[data-start] { opacity: 0; }

.hero-cinematic__video[data-start].is-ready { opacity: 1; }

.hero-cinematic .eyebrow { font-size: clamp(12px, 0.4vw + 10px, 15px); letter-spacing: 0.24em; }

.hero-cinematic__bg img,
.hero-cinematic__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-position, center 38%);
  display: block;
}

.hero-cinematic__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--shade-rgb), 0.55) 0%,
    rgba(var(--shade-rgb), 0.18) 35%,
    rgba(var(--shade-rgb), 0.0)  60%,
    rgba(var(--shade-rgb), 0.7)  100%
  );
}

.hero-cinematic .container {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 160px;
  padding-bottom: 100px;
  color: var(--bone);
}

/* Large enough for the home title's second line ("Château de Villemont") to
   stay on one line at the full display size. The lede keeps its own 560px cap. */
.hero-cinematic__content { max-width: 1160px; }

/* Lisible sur l'image comme sur la vidéo, claire ou sombre. */
.hero-cinematic__ctas .btn-bone { background: color-mix(in srgb, var(--ink) 45%, transparent); }

.hero-cinematic__ctas .btn-bone:hover { background: var(--bone); }

.hero-cinematic__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
}

@media (max-width: 640px) {

  .hero-cinematic { min-height: 92svh; }

  .hero-cinematic .container { min-height: 92svh; padding-bottom: 56px; }
}

/* ── Hero — no background image fallback ─────────────────── */

.hero-cinematic:not(:has(.hero-cinematic__bg)) {
  background: linear-gradient(160deg, var(--ink) 0%, var(--umber) 100%);
}

/* ── Hero — titre ── */
.hero-cinematic__title { font-size: var(--fs-hero); color: var(--bone); margin-bottom: 28px; text-shadow: 0 2px 30px rgba(var(--black-rgb), .45); }

/* Titre en <h1> : neutralise les styles h1 de base (Cinzel 600, interligne 1.4). */
h1.hero-cinematic__title { font-family: var(--serif); font-weight: 400; line-height: 0.98; letter-spacing: -0.015em; text-transform: none; margin-top: 0; }