/* HERO COUNTER DES RACLURES */
/* Version PC premium, sans impact mobile */

/* Par défaut (mobile / small screens), on cache le compteur "premium" injecté.
   Ainsi, même si un script se charge tard, on évite le doublon visible. */
.hero-counter-slot {
  display: none;
}

@media (min-width: 900px) {
  /* Sur PC, on laisse seulement le gros compteur à droite. */
  .hero-counter {
    display: none;
  }

  .hero-counter-slot {
    position: absolute;
    top: 50%;
    right: 48px;
    /* Descend le compteur de 1.5x sa hauteur (par rapport à la position centrée). */
    transform: translateY(100%);
    z-index: 50;
    pointer-events: none;
    display: block;
  }

  .hero-counter-box {
    /* IMPORTANT : pas de backdrop-filter ici.
       Sur desktop, les filtres/compositing peuvent "ramollir" le texte.
       On garde l'effet premium via un fond/gradient + ombres, mais le texte reste net. */
    background: linear-gradient(180deg, rgba(22,22,26,0.84), rgba(10,10,12,0.62));
    isolation: isolate;
    border: 1px solid rgba(255,180,80,0.35);
    border-radius: 14px;
    padding: 18px 22px;
    text-align: center;
    box-shadow:
      0 10px 30px rgba(0,0,0,0.45),
      0 0 26px rgba(255,170,70,0.20);
  }

  /* Shine + glow sans blur (texte net) */
  .hero-counter-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 55%),
      radial-gradient(120% 90% at 20% 10%, rgba(255,210,140,0.22), rgba(255,210,140,0) 60%);
    opacity: 0.95;
    pointer-events: none;
    z-index: 0;
  }

  .hero-counter-box::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 15px;
    background: linear-gradient(90deg, rgba(255,200,120,0.00), rgba(255,200,120,0.22), rgba(255,200,120,0.00));
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    animation: heroCounterShimmer 3.8s ease-in-out infinite;
  }

  @keyframes heroCounterShimmer {
    0% { transform: translateX(-12px); opacity: 0.25; }
    45% { opacity: 0.55; }
    100% { transform: translateX(12px); opacity: 0.25; }
  }

  .hero-counter-box {
    position: relative;
  }

  .hero-counter-number,
  .hero-counter-label {
    position: relative;
    z-index: 1;
  }

  .hero-counter-number {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffd28a;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }

  .hero-counter-label {
    margin-top: 6px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    text-shadow: 0 2px 10px rgba(0,0,0,0.55);
    -webkit-font-smoothing: antialiased;
  }
  /* Red pulse "alert" glow (sans flou sur le texte) */
  .hero-counter-box {
    animation: heroCounterRedPulse 1.35s ease-in-out infinite;
  }

  @keyframes heroCounterRedPulse {
    0%, 100% {
      border-color: rgba(255, 90, 90, 0.45);
      box-shadow:
        0 10px 30px rgba(0,0,0,0.45),
        0 0 26px rgba(255,170,70,0.20),
        0 0 16px rgba(255, 0, 0, 0.14);
    }
    50% {
      border-color: rgba(255, 40, 40, 0.78);
      box-shadow:
        0 10px 30px rgba(0,0,0,0.45),
        0 0 26px rgba(255,170,70,0.20),
        0 0 28px rgba(255, 0, 0, 0.28),
        0 0 52px rgba(255, 60, 60, 0.20);
    }
  }

}