/* Homepage hero v2 — one-row title, full-width glass photo with animated copy.
   Photo: /hero/hero-verre.webp. Until it is uploaded, a dark glass-light gradient stands in. */

.hero.hero-v2[data-astro-cid-mrm5k4fd] { flex-direction: column; justify-content: flex-start; min-height: 0; padding-bottom: 120px; }
.hero-v2 > .hero-content[data-astro-cid-mrm5k4fd] { padding: 150px 24px 0; max-width: 1480px; width: 100%; }
.hero-v2 > .hero-content.hero-foot[data-astro-cid-mrm5k4fd] { padding: 56px 24px 0; max-width: 900px; }
.hero-v2 .underline-wrap[data-astro-cid-mrm5k4fd] { margin-bottom: 40px; }
.hero-v2 .hero-intro[data-astro-cid-mrm5k4fd] { max-width: 760px; margin-bottom: 36px; }

/* The title holds on one row wherever a row can hold it legibly; phones wrap. */
.hero-v2 h1.h1-one[data-astro-cid-mrm5k4fd] { font-size: clamp(30px, 3.25vw, 62px); letter-spacing: -1.2px; }
@media (min-width: 901px) {
  .hero-v2 h1.h1-one[data-astro-cid-mrm5k4fd] { white-space: nowrap; }
  .hero-v2 h1.h1-one .h1-sub[data-astro-cid-mrm5k4fd] { white-space: normal; }
}

/* ---- Full-width photo ---- */
.glass-hero { position: relative; z-index: 1; width: 100%; height: clamp(500px, 44vw, 840px); overflow: hidden; isolation: isolate; box-sizing: border-box;
  /* top and bottom melt into the page (the title's glow shows through) instead of a hard edge */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.glass-hero *, .glass-hero *::before, .glass-hero *::after { box-sizing: border-box; }
.glass-hero-img {
  position: absolute; inset: 0;
  background:
    url("/hero/hero-verre.webp") center / cover no-repeat,
    radial-gradient(60% 80% at 72% 45%, rgba(91,143,255,.38), transparent 62%),
    radial-gradient(30% 50% at 84% 30%, rgba(190,215,255,.22), transparent 70%),
    linear-gradient(120deg, #06070b 0%, #0b1226 55%, #101a36 100%);
  transform-origin: 70% 50%;
  animation: gh-drift 22s ease-out both;
}
.glass-hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,5,7,.92) 0%, rgba(5,5,7,.74) 34%, rgba(5,5,7,.3) 60%, rgba(5,5,7,0) 76%);
}
.glass-hero-copy {
  position: absolute; z-index: 2; top: 50%; left: clamp(24px, 6.5vw, 128px); transform: translateY(-50%);
  max-width: min(720px, 40%); text-align: left; color: #f1f2f7;
}
/* "À la une" — a frosted pill with a live dot (replaces the plain accent bar) */
.gh-pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 14px 7px 11px;
  border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #dfe7ff;
  background: rgba(91,143,255,.16); border: 1px solid rgba(143,176,255,.38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 24px rgba(29,62,232,.25);
}
.gh-pill-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #8fb0ff; flex-shrink: 0; }
.gh-pill-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #8fb0ff; opacity: 0; animation: gh-ping 2.4s ease-out 1.6s infinite; }
@keyframes gh-ping { 0% { transform: scale(.5); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
.gh-title { margin: 0; font-size: clamp(32px, 3.5vw, 62px); font-weight: 800; line-height: 1.05; letter-spacing: -1.6px; color: #f1f2f7; }
.gh-title > span { display: block; text-wrap: balance; }
.gh-l2 {
  padding-bottom: .08em;
  background: linear-gradient(100deg, #5b8fff 0%, #a9c4ff 30%, #ffffff 46%, #a9c4ff 62%, #5b8fff 100%);
  background-size: 220% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gh-text { margin: 22px 0 34px; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.65; color: rgba(241,242,247,.8); max-width: 520px; }
.gh-cta {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 32px; border-radius: 999px; font-weight: 700; font-size: 16px; color: #fff !important; text-decoration: none;
  background: linear-gradient(135deg, #1d3ee8, #3868ff);
  box-shadow: 0 10px 34px rgba(29,62,232,.45), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .2s, box-shadow .25s, background .25s;
}
.gh-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%); transform: translateX(-120%); }
.gh-cta svg { transition: transform .25s; }
.gh-cta:hover { transform: translateY(-2px); background: linear-gradient(135deg, #2a4ff0, #5b8fff); box-shadow: 0 14px 40px rgba(91,143,255,.5); }
.gh-cta:hover::after { transform: translateX(120%); transition: transform .6s ease; }
.gh-cta:hover svg { transform: translateX(4px); }
.gh-cta:focus-visible { outline: 3px solid #a9c4ff; outline-offset: 3px; }

/* ---- Entrance: armed by the inline script (no script = everything simply visible) ---- */
.glass-hero.gh-armed .gh-pill, .glass-hero.gh-armed .gh-l1, .glass-hero.gh-armed .gh-l2, .glass-hero.gh-armed .gh-text, .glass-hero.gh-armed .gh-cta { opacity: 0; }
.glass-hero.gh-in .gh-pill { animation: gh-pop .7s cubic-bezier(.2,1.3,.4,1) .05s both; }
.glass-hero.gh-in .gh-l1 { animation: gh-rise .9s cubic-bezier(.2,.8,.2,1) .2s both; }
.glass-hero.gh-in .gh-l2 { animation: gh-rise .9s cubic-bezier(.2,.8,.2,1) .5s both, gh-shine 2.4s ease-in-out 1.4s both; }
.glass-hero.gh-in .gh-text { animation: gh-rise .9s cubic-bezier(.2,.8,.2,1) .85s both; }
.glass-hero.gh-in .gh-cta { animation: gh-pop .7s cubic-bezier(.2,1.3,.4,1) 1.15s both; }
.glass-hero.gh-in .gh-cta::after { animation: gh-sweep 1.1s ease 2s 1 both; }

@keyframes gh-drift { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes gh-rise { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes gh-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes gh-pop { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes gh-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .glass-hero-img, .glass-hero.gh-in *, .gh-pill-dot::after { animation: none !important; }
  [dir="rtl"] .glass-hero-img { transform: scaleX(-1); }
  .glass-hero.gh-armed .gh-pill, .glass-hero.gh-armed .gh-l1, .glass-hero.gh-armed .gh-l2, .glass-hero.gh-armed .gh-text, .glass-hero.gh-armed .gh-cta { opacity: 1; }
}

/* ---- RTL (Arabic): copy on the right, shade mirrored ---- */
[dir="rtl"] .glass-hero-copy { left: auto; right: clamp(24px, 6.5vw, 128px); text-align: right; }
[dir="rtl"] .gh-pill { letter-spacing: 0; padding: 7px 11px 7px 14px; }
[dir="rtl"] .glass-hero-shade {
  background:
    linear-gradient(270deg, rgba(5,5,7,.92) 0%, rgba(5,5,7,.74) 34%, rgba(5,5,7,.3) 60%, rgba(5,5,7,0) 76%);
}
/* the photo has its calm side on the left: mirror it so the calm side sits under the RTL copy */
[dir="rtl"] .glass-hero-img { transform-origin: 50% 50%; animation-name: gh-drift-rtl; } /* a mirror off-centre slides the photo out of its frame */
@keyframes gh-drift-rtl { from { transform: scaleX(-1) scale(1.1); } to { transform: scaleX(-1); } }
[dir="rtl"] .gh-title { letter-spacing: 0; }
[dir="rtl"] .gh-cta svg { transform: scaleX(-1); }
[dir="rtl"] .gh-cta:hover svg { transform: scaleX(-1) translateX(4px); }

/* ---- Tablets: copy takes more width ---- */
@media (max-width: 1100px) {
  .glass-hero-copy { max-width: 46%; }
}

/* ---- Phones: copy sits at the bottom of the photo, over a rising shade ---- */
@media (max-width: 760px) {
  .hero.hero-v2[data-astro-cid-mrm5k4fd] { padding-bottom: 72px; }
  .hero-v2 > .hero-content[data-astro-cid-mrm5k4fd] { padding: 104px 20px 0; }
  .hero-v2 > .hero-content.hero-foot[data-astro-cid-mrm5k4fd] { padding: 36px 20px 0; }
  .hero-v2 .underline-wrap[data-astro-cid-mrm5k4fd] { margin-bottom: 24px; }
  /* full bleed: the section keeps a side gutter on phones, the photo does not */
  .glass-hero { height: auto; min-height: 600px; display: flex; align-items: flex-end; width: 100vw; margin-inline: calc(50% - 50vw); }
  /* the copy sits at the bottom here: only the top edge melts, never the button */
  .glass-hero { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%); mask-image: linear-gradient(180deg, transparent 0, #000 12%); }
  /* the bottles stand right of centre in the photo: frame them, not the empty sky */
  .glass-hero-img { transform-origin: 70% 30%; background-position: 70% 30%; }
  [dir="rtl"] .glass-hero-img { transform-origin: 50% 30%; }
  .glass-hero-shade, [dir="rtl"] .glass-hero-shade {
    background: linear-gradient(180deg, rgba(5,5,7,0) 0%, rgba(5,5,7,.1) 22%, rgba(5,5,7,.72) 42%, rgba(5,5,7,.9) 58%, #050507 100%);
  }
  .glass-hero-copy, [dir="rtl"] .glass-hero-copy { position: relative; top: auto; left: auto; right: auto; transform: none; max-width: none; padding: 260px 20px 36px; }
  .gh-pill { margin-bottom: 16px; }
  .gh-title { font-size: clamp(30px, 8.4vw, 40px); letter-spacing: -.8px; }
  .gh-text { margin: 16px 0 26px; font-size: 16px; }
  .gh-cta { width: 100%; justify-content: center; min-height: 54px; padding: 15px 24px; }
}