/* =============================================================================
   1001 Rewards (rewards.php, /pro/1001-rewards) - landing du programme de
   fidélité, SITE PRO UNIQUEMENT. Maquette Figma « 1001 Rewards » 13054:66199.

   Ne contient QUE ce qui n'existe pas déjà en utilitaire Tailwind ou en token :
   le halo du hero, la carte de paiement virtuelle (verre dépoli), l'accent vert
   du programme et les badges flottants de la section éligibilité. Tout le reste
   (couleurs de marque, ombres, rayons, typographie) passe par les tokens -
   `bg-brand`, `bg-hero-dark`, `shadow-card`, `rounded-xl2`… Le bleu de marque
   n'est JAMAIS écrit en dur : `rgb(var(--brand) / x)` (pro.css le définit).

   Le vert n'est pas une couleur de marque mais l'accent PROPRE au programme
   (gains crédités) : il ne bascule pas avec le site et vit donc ici, en variable
   locale, plutôt que dans les tokens globaux.
   ========================================================================== */
.rewards {
    --rw-green: 74 222 128;      /* #4ADE80 - accent « gains » (pills, libellés) */
    --rw-green-bright: 108 255 162; /* #6CFFA2 - « + € » du hero, plus lumineux sur fond sombre */
}

/* -----------------------------------------------------------------------------
   Hero - halo de marque diffusé en bas à droite (l'ellipse floutée de la
   maquette, rendue en dégradé radial plutôt qu'en SVG : thémable, sans requête).
   `overflow:hidden` sur le hero contient le halo, `isolation` garde le contenu
   au-dessus sans z-index sur chaque enfant.
   -------------------------------------------------------------------------- */
.rewards-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.rewards-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -10%;
    bottom: -55%;
    width: 780px;
    height: 780px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgb(var(--brand) / 0.55) 0%,
        rgb(var(--brand) / 0.18) 45%,
        transparent 70%
    );
    filter: blur(60px);
    pointer-events: none;
}
@media (max-width: 767px) {
    .rewards-hero::after {
        right: -35%;
        bottom: -30%;
        width: 460px;
        height: 460px;
    }
}

/* -----------------------------------------------------------------------------
   Carte de paiement virtuelle - verre dépoli sur le hero sombre. Le repli
   (`background` opaque) couvre les navigateurs sans backdrop-filter : la carte
   reste lisible, elle perd seulement le flou.
   -------------------------------------------------------------------------- */
.rewards-card {
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.12);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .rewards-card {
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
}

/* « + € » empilés derrière la carte : même glyphe, opacités dégressives vers le
   haut (la maquette matérialise ainsi les gains qui s'accumulent). */
.rewards-plus {
    color: rgb(var(--rw-green-bright));
}

/* Pastille « Demande comptabilisée ! » posée en biais sur la carte. */
.rewards-badge {
    transform: rotate(3.84deg);
}

/* -----------------------------------------------------------------------------
   Bloc « Des euros, pas des points » - le grand € et ses pastilles vertes.
   -------------------------------------------------------------------------- */
.rewards-euro {
    text-shadow: 0 12px 40px rgb(var(--rw-green) / 0.5);
}
.rewards-note {
    color: rgb(var(--rw-green));
}
.rewards-check {
    background: rgb(var(--rw-green) / 0.08);
    border: 1px solid rgb(var(--rw-green) / 0.7);
}
.rewards-check i {
    color: rgb(var(--rw-green));
}

/* -----------------------------------------------------------------------------
   Section éligibilité - badges de notification flottant sur la photo.
   Desktop : débordement volontaire à gauche du cadre (maquette). Sous `lg`, ils
   repassent DANS l'image (le débordement mangerait la colonne de texte) et le
   3e est masqué pour ne pas couvrir toute la photo.
   -------------------------------------------------------------------------- */
.rewards-float {
    background: rgb(255 255 255 / 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
@media (max-width: 1023px) {
    .rewards-float-3 { display: none; }
}