/* =========================================================
   CPR EFFECTS — Club Pro Réunion
   Fichier 100% additif : il ne redéfinit AUCUNE classe existante
   du site. Toutes les classes commencent par "cpr-fx-" pour ne
   jamais entrer en conflit avec ton CSS actuel.
   Ajoute juste ces classes sur les éléments que tu veux animer.
   ========================================================= */

:root{
  --cpr-red: #ff2438;
  --cpr-red-soft: rgba(255, 36, 56, 0.35);
  --cpr-red-glow: rgba(255, 36, 56, 0.55);
  --cpr-bg: #0b0b10;
  --cpr-fx-duration: 0.6s;
}

/* -----------------------------------------------------------
   1) NAVBAR — devient floutée/opaque au scroll
   Ajoute la classe "cpr-fx-navbar" sur ta balise <nav> ou header.
   Le JS ajoute automatiquement "cpr-fx-scrolled" au scroll.
----------------------------------------------------------- */
.cpr-fx-navbar{
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}
.cpr-fx-navbar.cpr-fx-scrolled{
  background-color: rgba(10, 10, 14, 0.75);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 36, 56, 0.15), 0 8px 24px rgba(0,0,0,0.35);
}

/* -----------------------------------------------------------
   2) LIENS DE MENU — soulignement animé au survol
   Ajoute "cpr-fx-nav-link" sur chaque <a> du menu.
----------------------------------------------------------- */
.cpr-fx-nav-link{
  position: relative;
  text-decoration: none;
}
.cpr-fx-nav-link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--cpr-red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
.cpr-fx-nav-link:hover::after,
.cpr-fx-nav-link:focus-visible::after{
  transform: scaleX(1);
  transform-origin: left;
}

/* -----------------------------------------------------------
   3) BOUTONS CTA — glow qui pulse au survol + retour tactile
   Ajoute "cpr-fx-btn" sur tes boutons (Voir les publications,
   Rejoindre le Discord, etc.)
----------------------------------------------------------- */
.cpr-fx-btn{
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.cpr-fx-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--cpr-red-soft), 0 0 24px var(--cpr-red-glow);
}
.cpr-fx-btn:active{
  transform: translateY(0) scale(0.97);
}

/* -----------------------------------------------------------
   4) REVEAL AU SCROLL — fade + léger slide-up
   Ajoute "cpr-fx-reveal" sur les sections/blocs (le JS ajoute
   "cpr-fx-visible" quand le bloc entre dans l'écran).
----------------------------------------------------------- */
.cpr-fx-reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--cpr-fx-duration) ease, transform var(--cpr-fx-duration) ease;
}
.cpr-fx-reveal.cpr-fx-visible{
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------------------------
   5) CARTES — légère élévation + ombre rouge au survol
   Ajoute "cpr-fx-card" sur les cartes (joueur connecté,
   publication, etc.)
----------------------------------------------------------- */
.cpr-fx-card{
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cpr-fx-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45), 0 0 0 1px var(--cpr-red-soft);
}

/* -----------------------------------------------------------
   6) POINT "EN LIGNE" — effet ping façon radar
   Ajoute "cpr-fx-status-dot" sur le petit point vert.
----------------------------------------------------------- */
.cpr-fx-status-dot{
  position: relative;
}
.cpr-fx-status-dot::before{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  animation: cpr-fx-ping 1.8s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes cpr-fx-ping{
  0%{ transform: scale(1); opacity: 0.55; }
  75%, 100%{ transform: scale(2.2); opacity: 0; }
}

/* -----------------------------------------------------------
   7) BANDEAU DISCORD — dégradé animé en fond
   Ajoute "cpr-fx-gradient-banner" sur le conteneur du bandeau.
----------------------------------------------------------- */
.cpr-fx-gradient-banner{
  position: relative;
  overflow: hidden;
}
.cpr-fx-gradient-banner::before{
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--cpr-red-soft) 60deg, transparent 140deg, transparent 360deg);
  animation: cpr-fx-rotate 8s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.cpr-fx-gradient-banner > *{
  position: relative;
  z-index: 1;
}
@keyframes cpr-fx-rotate{
  to{ transform: rotate(360deg); }
}

/* -----------------------------------------------------------
   8) PARTICULES DANS LA HERO
   Ajoute "cpr-fx-particles" sur le conteneur de la bannière
   d'accueil. Le JS y injecte un <canvas> automatiquement.
   Le conteneur doit avoir "position: relative" (ajouté ici).
----------------------------------------------------------- */
.cpr-fx-particles{
  position: relative;
  overflow: hidden;
}
.cpr-fx-particles-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cpr-fx-particles > *:not(.cpr-fx-particles-canvas){
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------------
   9) MOBILE — cibles tactiles plus confortables
----------------------------------------------------------- */
@media (max-width: 640px){
  .cpr-fx-btn{ min-height: 44px; }
}

/* -----------------------------------------------------------
   10) ACCESSIBILITÉ — respecte "réduire les animations"
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .cpr-fx-navbar,
  .cpr-fx-nav-link::after,
  .cpr-fx-btn,
  .cpr-fx-reveal,
  .cpr-fx-card{
    transition: none !important;
  }
  .cpr-fx-status-dot::before,
  .cpr-fx-gradient-banner::before{
    animation: none !important;
  }
  .cpr-fx-reveal{
    opacity: 1 !important;
    transform: none !important;
  }
  .cpr-fx-particles-canvas{
    display: none !important;
  }
}

.cpr-fx-nav-link.cpr-fx-nav-active {
  color: #ffffff;
}
.cpr-fx-nav-link.cpr-fx-nav-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.cpr-fx-user-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 14px;
  margin-right: 4px;
  border-right: 1px solid #232a33;
}

.cpr-fx-avatar-ring {
  border: 1.5px solid var(--cpr-red);
  border-radius: 50%;
}

.cpr-fx-admin-btn {
  background: #ffb800 !important;
  border-color: #ffb800 !important;
  color: #412402 !important;
}
.cpr-fx-admin-btn:hover {
  background: #ffc633 !important;
}

.cpr-fx-btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: #8f97a3 !important;
}
.cpr-fx-btn-ghost:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.06) !important;
}

/* -----------------------------------------------------------
   11) ÉTAT VIDE GÉNÉRIQUE
   Ajoute "cpr-fx-empty-state" sur un message "vide" pour
   afficher une petite icône au-dessus du texte.
----------------------------------------------------------- */
.cpr-fx-empty-state{
  position: relative;
  padding-top: 34px !important;
}
.cpr-fx-empty-state::before{
  content: "👤";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  opacity: 0.55;
}

/* -----------------------------------------------------------
   12) BADGES DE CATÉGORIE COLORÉS
   Ajoute une de ces classes sur un badge de catégorie pour
   lui donner une couleur distincte.
----------------------------------------------------------- */
.cpr-fx-cat-tournoi{
  color: #e32636 !important;
}
.cpr-fx-cat-recrutement{
  color: #ffb800 !important;
}
.cpr-fx-cat-amical{
  color: #38bdf8 !important;
}
.cpr-fx-cat-recherche{
  color: #a78bfa !important;
}