/* ============================================================
   heroes.css — three hero directions
   ============================================================ */

.hero { position: relative; padding-top: 116px; }
.hero__age { color: var(--accent-bright); border-color: oklch(0.685 0.185 var(--accent-h) / 0.35); background: var(--accent-tint); font-family: var(--mono); letter-spacing: 0.04em; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hero__stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__note { margin-top: 20px; font-size: 13.5px; color: var(--ink-faint); font-family: var(--mono); letter-spacing: 0.02em; }

/* ---------- HERO A — éditorial ---------- */
.heroA { padding-bottom: clamp(60px, 8vw, 110px); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__title { margin-top: 22px; }
.hero__lead { margin-top: 26px; }
.hero__media { position: relative; min-height: 540px; }
.hero__photo { position: absolute; inset: 0 0 0 14%; border-radius: var(--r-xl); width: auto; height: auto; }
.hero__phone-float {
  position: absolute; left: -6%; bottom: 4%;
  filter: drop-shadow(0 50px 70px oklch(0 0 0 / 0.6));
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{ transform: translateY(0) rotate(-3deg);} 50%{ transform: translateY(-16px) rotate(-3deg);} }

/* ---------- HERO B — cinématique / halo ---------- */
.heroB { min-height: 100vh; display: flex; align-items: center; padding-top: 130px; padding-bottom: 80px; overflow: hidden; }
.heroB__photo { position: absolute; inset: 0; z-index: 0; }
.heroB__photo-slot { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.heroB__photo-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, oklch(0.13 0.02 8 / 0.45), oklch(0.13 0.02 8 / 0.78) 58%, var(--bg) 100%), radial-gradient(70% 60% at 50% 38%, transparent, oklch(0.13 0.02 8 / 0.55)); }
.heroB__halo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  --mx: 50%; --my: 30%;
  background: radial-gradient(40% 38% at var(--mx) var(--my), oklch(0.62 0.2 18 / 0.5), transparent 70%);
  transition: background .2s ease-out;
}
.heroB__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.heroB .eyebrow { justify-content: center; }
.heroB__title { margin-top: 26px; font-size: clamp(42px, 7.5vw, 96px); }
.heroB__lead { margin-top: 26px; text-align: center; max-width: 60ch; }
.heroB__lead em { font-style: italic; color: var(--accent-bright); }
.heroB__phone { margin: 40px 0 18px; filter: drop-shadow(0 50px 80px oklch(0 0 0 / 0.65)); }
.heroB .hero__stores { justify-content: center; }

/* ---------- HERO C — split bold type ---------- */
.heroC { padding-top: 128px; padding-bottom: clamp(50px, 7vw, 90px); overflow: hidden; }
.heroC__rail { position: absolute; left: max(20px, calc((100vw - var(--maxw))/2 + 8px)); top: 150px; bottom: 60px; width: 3px; background: oklch(1 0 0 / 0.08); border-radius: 3px; display: none; }
.heroC__rail-fill { position: absolute; inset: 0 0 62% 0; background: linear-gradient(180deg, var(--heat-0), var(--heat-2)); border-radius: 3px; }
.heroC__rail-label { position: absolute; left: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); font-style: normal; white-space: nowrap; }
.heroC__rail-label:nth-of-type(1) { top: 8%; color: var(--heat-0); }
.heroC__rail-label:nth-of-type(2) { top: 38%; color: var(--heat-1); }
.heroC__rail-label:nth-of-type(3) { top: 70%; }
.heroC__inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "top phone" "title phone" "bottom phone"; gap: 0 clamp(24px, 4vw, 56px); align-items: start; }
.heroC__top { grid-area: top; display: flex; align-items: center; gap: 16px; }
.heroC__title { grid-area: title; margin: 26px 0 36px; font-family: var(--serif); display: flex; flex-direction: column; }
.heroC__line { font-weight: 600; line-height: 0.96; letter-spacing: -0.02em; font-size: clamp(38px, 6.6vw, 84px); }
.heroC__line:not(.heroC__line--it):not(.heroC__line--accent) { font-family: var(--sans); font-weight: 800; letter-spacing: -0.03em; }
.heroC__line--it em, .heroC__line--accent em { font-style: italic; font-weight: 500; }
.heroC__line--accent em { color: var(--accent-bright); }
.heroC__bottom { grid-area: bottom; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; max-width: 760px; }
.heroC__cta { display: flex; flex-direction: column; }
.heroC__phone { grid-area: phone; align-self: center; filter: drop-shadow(0 50px 70px oklch(0 0 0 / 0.6)); animation: floaty 8s ease-in-out infinite; }

@media (min-width: 1000px) { .heroC__rail { display: block; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { min-height: 460px; margin-top: 12px; }
  .hero__phone-float { left: 50%; transform: translateX(-50%); }
  @keyframes floaty { 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(-14px);} }
  .heroC__inner { grid-template-columns: 1fr; grid-template-areas: "top" "title" "phone" "bottom"; }
  .heroC__phone { justify-self: center; margin: 8px 0 28px; }
  .heroC__bottom { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .hero__photo { inset: 0; }
  .heroC__bottom { grid-template-columns: 1fr; }
}