/* Hero de la home */
html { scroll-behavior: smooth; }

.hp-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 84px var(--spacing-margin-desktop-sm, 64px) var(--spacing-height-5xl, 64px);
  background: var(--color-surface-7, #333333);
  overflow: hidden;
}
.hp-hero__media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.hp-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-hero__scrim {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: color-mix(in srgb, var(--color-background-neutral-10, #0b0b0c) 32%, transparent);
}
.hp-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 600px;
}
/* Titre : taille identique au hero du site (classe Meridian .display-sm : 49 / 64, graisse 400, -1.5px) */
.hp-hero__copy h1 {
  margin: 0;
  color: var(--color-foreground-neutral-0, #ffffff);
  text-transform: none;
  font-style: normal;
  font-family: var(--font-family-display, "Hanken Grotesk", sans-serif);
  font-weight: var(--font-weight-base, 400);
  font-size: var(--font-size-4xl, 49px);
  line-height: var(--line-height-4xl, 64px);
  letter-spacing: var(--letter-spacing-display, -1.5px);
}
.hp-hero__copy p { max-width: 460px; margin: var(--spacing-gap-lg, 16px) 0 0; font-family: var(--font-family-text, "Hanken Grotesk", sans-serif); font-size: var(--font-size-md, 14px); line-height: var(--line-height-md, 20px); letter-spacing: var(--letter-spacing-default, -0.16px); color: color-mix(in srgb, var(--color-foreground-neutral-0, #ffffff) 86%, transparent); }
.hp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--spacing-gap-md, 8px); margin-top: var(--spacing-gap-2xl, 32px); }

/* Bouton : markup et règles du specimen Meridian (components-buttons.html), variante White, taille unique 40 px */
.hp-hero .btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  height: 40px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-button, 0);
  font-family: var(--font-family-utility, "Hanken Grotesk", sans-serif);
  font-weight: var(--font-weight-medium, 600);
  font-size: var(--font-size-md, 14px);
  line-height: var(--line-height-md, 20px);
  letter-spacing: var(--letter-spacing-default, -0.16px);
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.hp-hero .btn .arr { width: 24px; height: 24px; flex-shrink: 0; }
.hp-hero .btn.white { background: var(--color-surface-0, #ffffff); color: var(--color-foreground-neutral-10, #0b0b0c); }
.hp-hero .btn.outline { background: transparent; color: var(--color-foreground-neutral-0, #ffffff); border-color: var(--color-border-neutral-0, #ffffff); }
.hp-hero .btn.outline:hover { background: color-mix(in srgb, var(--color-background-neutral-0, #ffffff) 16%, transparent); }
.hp-hero .btn.outline:focus-visible { background: color-mix(in srgb, var(--color-background-neutral-0, #ffffff) 24%, transparent); outline: var(--line-stroke-bold, 2px) solid var(--color-border-neutral-0, #ffffff); outline-offset: 2px; }
.hp-hero .btn.white:hover { background: var(--color-surface-2, #f2f2f2); color: var(--color-foreground-neutral-10, #0b0b0c); }
.hp-hero .btn.white:focus-visible { background: var(--color-surface-3, #e6e6e6); color: var(--color-foreground-neutral-10, #0b0b0c); outline: var(--line-stroke-bold, 2px) solid var(--color-border-neutral-0, #ffffff); outline-offset: 2px; }

@media (max-width: 767px) {
  .hp-hero { padding: 76px var(--spacing-margin-mobile-md, 16px) var(--spacing-height-3xl, 40px); }
  /* Sur mobile : 31 / 35, comme le hero du site */
  .hp-hero__copy h1 { font-size: var(--font-size-2xl, 31px); line-height: var(--line-height-2xl, 35px); }
}