/* =====================================================================
   NexEuro · HERO REFRESH  (v2)
   ---------------------------------------------------------------------
   Styles for the more impactful homepage hero:
     - rotating word in the H1
     - inline metrics row
     - "Voir la démo" play button
     - repositioned floating notification pills (never overlap the phone)
   Pairs with nexeuro-hero.js. Degrades gracefully without JS and under
   prefers-reduced-motion.
   ===================================================================== */

/* =====================================================================
   HEADLINE SIZING — keep the H1 to 3 balanced lines and make sure the
   rotating word never overflows its line, even for the longest word
   ("instantanément"). We slightly tame the desktop max size and force the
   rotating word onto a single non-wrapping line.
   ===================================================================== */
.hero-l .h1 {
  font-size: clamp(42px, 5.1vw, 72px) !important;
  letter-spacing: -2.5px !important;
  line-height: 1.04 !important;
  max-width: 14ch;                 /* encourages clean 3-line wrapping */
}

/* ---- Rotating word in the headline -------------------------------- */
.h1-rot {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 1;
  padding-bottom: .12em;            /* room for descenders (g, é) */
  white-space: nowrap;              /* never let the word wrap */
  max-width: 100%;
}
.h1-rot-w {
  display: inline-block;
  white-space: nowrap;
  font-size: .94em;                 /* keep the longest word inside its line */
  transition: opacity .32s cubic-bezier(.2, .7, .2, 1), transform .32s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}

/* ---- "Voir la démo" secondary CTA --------------------------------- */
.bs-play {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--b);
  color: #fff;
  margin-right: 2px;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.bs:hover .bs-play { transform: scale(1.12); }

/* ---- Inline metrics row ------------------------------------------- */
.hero-metrics {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin: 4px 0 40px;
  flex-wrap: wrap;
  animation: fadeUp .7s .24s ease both;
}
.hm { display: flex; align-items: baseline; gap: 4px; }
.hm-n {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 900;
  color: var(--n);
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hm-u {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 800;
  color: var(--b);
}
.hm-l { font-size: 12.5px; color: var(--t2); font-weight: 600; margin-left: 4px; }
.hm-sep { width: 1px; height: 30px; background: var(--g2); }

@media (prefers-color-scheme: dark) {
  .hm-n { color: #e6edf3; }
  .hm-l { color: #9aa4b2; }
  .hm-sep { background: #21262d; }
}

/* =====================================================================
   FLOATING NOTIFICATION PILLS — repositioned so they sit OUTSIDE the
   phone (or hug its very edge) instead of covering the header / balance.
   The phone is centred in .hero-r; pills are pulled toward the panel
   edges and only overlap the empty navy space around the device.
   ===================================================================== */
.hero-r .fp { z-index: 3; }
/* Top pill: clearly above the phone's top, nudged left into open space */
.hero-r .fp1 { top: 9%;  left: 3%; }
/* Bottom-left pill: low and left, away from the device body */
.hero-r .fp2 { bottom: 12%; left: 2%; }
/* Right pill: hugging the right edge of the panel */
.hero-r .fp3 { top: 30%; right: 2%; }

/* On wide screens there is more room — let them breathe a bit further out */
@media (min-width: 1280px) {
  .hero-r .fp1 { top: 12%; left: 6%; }
  .hero-r .fp2 { bottom: 14%; left: 5%; }
  .hero-r .fp3 { top: 32%; right: 5%; }
}

/* Tablet / stacked hero: the navy panel is short, so keep pills near the
   corners and slightly smaller to avoid covering the phone. */
@media (max-width: 960px) {
  .hero-r .fp { transform: scale(.92); }
  .hero-r .fp1 { top: 4%; left: 3%; }
  .hero-r .fp2 { bottom: 6%; left: 3%; }
  .hero-r .fp3 { top: 26%; right: 3%; }
}

/* Phones: floating pills add clutter on a narrow panel — hide them and
   let the clean device mockup speak for itself. */
@media (max-width: 640px) {
  .hero-r .fp { display: none !important; }
}

/* =====================================================================
   PHONE PANEL — the navy right column was stretched to a full 100vh,
   making the device look "too long" / unbalanced. We cap the panel
   height and gently scale the mockup so it stays elegant and centred.
   ===================================================================== */
.hero { min-height: auto !important; }
.hero-r {
  min-height: 0 !important;
  height: 100% !important;
  align-self: stretch;
  padding: clamp(48px, 6vw, 84px) 0;
}
/* Keep both columns the same comfortable height instead of full viewport */
@media (min-width: 961px) {
  .hero { min-height: clamp(620px, 82vh, 800px) !important; }
}
/* Slightly smaller device so it reads as a balanced product shot */
.hero-r .ph { width: 264px !important; }
@media (min-width: 1280px) {
  .hero-r .ph { width: 280px !important; }
}
@media (max-width: 960px) {
  .hero-r { padding: 60px 0 72px; }
  .hero-r .ph { width: 248px !important; }
}

/* ---- Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .h1-rot-w { transition: none; }
}

/* ---- Hero responsive tightening for the new content --------------- */
@media (max-width: 960px) {
  .hero-metrics { justify-content: center; }
}
@media (max-width: 640px) {
  .hero-metrics { gap: 12px; margin-bottom: 30px; }
  .hm-sep { display: none; }
}