/* hero-results-cards.css — 3 floating UI cards in the homepage hero.
   Visual language matches the simulator's results page (colors, card shape, gauge style). */

/* ─── Container that anchors the 3 cards inside .hero-right ─── */
.hero-floating-cards-container{
  position:relative;
  width:100%;
  height:440px;
  max-width:480px;
  margin:0 auto;
}

/* ─── Anchor wrapper: handles positioning + GSAP transforms (cascade x, parallax y).
       The inner .hero-floating-card handles only the float keyframe. Splitting the
       two prevents the GSAP transform from overwriting the CSS keyframe. ─── */
.hero-card-anchor{
  position:absolute;
}

/* ─── Card base ─── */
.hero-floating-card{
  background:#fff;
  border:1px solid rgba(201,169,110,0.18);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 12px 36px rgba(40,28,12,0.10);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:180px;
  animation:float-vertical var(--float-duration,3.5s) ease-in-out infinite alternate;
  animation-delay:var(--float-delay,0s);
  will-change:transform;
}
.hero-card-score    { --float-duration:5.5s; --float-delay:-1.6s; }
.hero-card-bars     { --float-duration:4.5s; --float-delay:-0.5s; }
.hero-card-inaction { --float-duration:3.6s; --float-delay:-2.8s; }

@keyframes float-vertical{
  0%   { transform:translateY(0); }
  100% { transform:translateY(-24px); }
}

@media (prefers-reduced-motion: reduce){
  .hero-floating-card{ animation:none; }
}

/* ─── Common label inside each card ─── */
.hfc-label{
  font-size:10px;
  color:#9a8870;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
}

/* ─── Card 1 : Score Herity ─── */
.hero-card-score{
  width:200px;
}
.hfc-score-ring{
  position:relative;
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}
.hfc-score-ring svg{
  position:absolute;
  inset:0;
  transform:rotate(-90deg);
}
.hfc-score-ring .ring-bg{
  fill:none;
  stroke:#f0ebe0;
  stroke-width:6;
}
.hfc-score-ring .ring-arc{
  fill:none;
  stroke:var(--success-soft);
  stroke-width:6;
  stroke-linecap:round;
  transition:stroke-dashoffset 1.2s cubic-bezier(0.16,1,0.3,1);
}
.hfc-score-value{
  position:relative;
  font-size:18px;
  font-weight:700;
  color:var(--success);
  line-height:1;
}
.hfc-score-text{
  text-align:center;
  font-size:11px;
  color:#5a4a3a;
  line-height:1.4;
}
.hfc-score-text strong{ color:var(--success); font-weight:600; }

/* ─── Card 2 : Avant / Après ─── */
.hero-card-bars{
  width:220px;
}
.hero-card-bars canvas{
  display:block;
  width:100%;
  max-height:90px;
}
.hfc-bars-legend{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  font-weight:600;
}
.hfc-legend-actuel{ color:var(--danger); }
.hfc-legend-arrow{ color:#c9a96e; font-size:14px; }
.hfc-legend-optim{ color:#3a9966; }

/* ─── Card 3 : Coût de l'inaction ─── */
.hero-card-inaction{
  width:200px;
}
.hfc-inaction-value{
  font-size:24px;
  font-weight:700;
  color:var(--danger);
  line-height:1;
}
.hfc-inaction-sub{
  font-size:11px;
  color:#5a4a3a;
}