/*********************
FLIP CARD UCL/UFL - PREMIUM EDITION
(Structure 100% conservée, Visuels améliorés)
*********************/

.flip-card-3D-wrapper {
  width: 100%;
  height: 100%;
  max-width: 300px;
  perspective: 1000px; /* Légèrement augmenté pour une meilleure 3D */
  margin: 10px 10px;
}

.flip-card {
  height: 100%;
  transition: transform 0.8s cubic-bezier(.4,.2,.2,1), box-shadow 0.3s ease;
  transform-style: preserve-3d;
  border-radius: 16px;

  /* AMÉLIORATION : Ombre plus profonde et fond "Spotlight" */
  box-shadow: 0 12px 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(255,255,255,0.02);
  background: radial-gradient(circle at 50% 30%, #1a233a 0%, #060913 100%);
}

/* AMÉLIORATION : Léger effet de brillance quand on passe la souris sur la carte */
.flip-card-3D-wrapper:hover .flip-card {
  box-shadow: 0 15px 40px rgba(0,0,0,0.9), 0 0 15px rgba(248, 184, 100, 0.15);
}

.do-flip {transform: rotateY(-180deg);}

/*********************
BOUTONS (Visuel "Glassmorphism" & Survol)
*********************/
.flip-card-btn-turn-to-back, .flip-card-btn-turn-to-front, .flip-card-btn-turn-to-back2 {
  position: absolute;
  bottom: 4px; /* Un poil remonté pour respirer */
  visibility: hidden;
  border-radius: 6px; /* Plus carré, plus moderne */
  font-size: 11px;
  padding: 3px 8px;

  /* AMÉLIORATION : Look moderne au lieu du style "inset" des années 2000 */
  border: 1px solid rgba(248, 184, 100, 0.4);
  background: rgba(0, 0, 0, 0.7);
  color: #F8B864;
  border-style: solid;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.flip-card-btn-turn-to-back, .flip-card-btn-turn-to-front { right: 4px; }
.flip-card-btn-turn-to-back2 { left: 4px; }

/* AMÉLIORATION : Effet quand on passe la souris sur le bouton */
.flip-card-btn-turn-to-back:hover,
.flip-card-btn-turn-to-front:hover,
.flip-card-btn-turn-to-back2:hover {
  background: #F8B864;
  color: #000;
  border-color: #F8B864;
}

/*********************
FACES & BORDURES (Lueur interne ajoutée)
*********************/
.flip-card-front, .flip-card-back {
  height: 100%;
  width: 100%;
  position: absolute;
  backface-visibility: hidden;
  z-index: 2;
  border-radius: 10px;
  border: 5px solid transparent;
  /* AMÉLIORATION : Reflet vitré en haut de la carte */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 30%);
}

.flip-card-back { transform: rotateY(180deg); }
/* ================================================================
   AMÉLIORATION DES BACKGROUNDS - COULEURS DE POSTE SATURÉES
   GB: Jaune | DEF: Bleu | MIL: Vert | ATT: Rouge
   ================================================================ */

/* --- GARDIEN (GB) : JAUNE SOLAIRE --- */
.flip-card_GB .flip-card-front, .flip-card_GB .flip-card-back {
  border-color: #ffcc00 !important; /* Jaune vif */
  box-shadow: inset 0 0 40px rgba(255, 204, 0, 0.4);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 204, 0, 0.25) 0%, transparent 80%),
    conic-gradient(from 180deg at 50% 50%, #060913 0%, #332b00 50%, #060913 100%);
}

/* --- DÉFENSE (DEF) : BLEU ÉLECTRIQUE --- */
.flip-card_DEF .flip-card-front, .flip-card_DEF .flip-card-back {
  border-color: #0077ff !important; /* Bleu pur */
  box-shadow: inset 0 0 40px rgba(0, 119, 255, 0.4);
  background:
    linear-gradient(135deg, rgba(0, 119, 255, 0.15) 25%, transparent 25%) -5px 0,
    linear-gradient(225deg, rgba(0, 119, 255, 0.15) 25%, transparent 25%) -5px 0,
    linear-gradient(165deg, #060913 0%, #001a33 100%);
  background-size: 12px 12px, 12px 12px, 100% 100%;
}

/* --- MILIEU (MIL) : VERT TERRAIN --- */
.flip-card_MIL .flip-card-front, .flip-card_MIL .flip-card-back {
  border-color: #00ff66 !important; /* Vert fluo/terrain */
  box-shadow: inset 0 0 40px rgba(0, 255, 102, 0.35);
  background:
    radial-gradient(ellipse at center, rgba(0, 255, 102, 0.2) 0%, transparent 85%),
    repeating-linear-gradient(0deg, rgba(0, 255, 102, 0.1) 0px, rgba(0, 255, 102, 0.1) 1px, transparent 1px, transparent 15px),
    linear-gradient(165deg, #060913 0%, #00220d 100%);
}

/* --- ATTAQUE (ATT) : ROUGE EXPLOSIF --- */
.flip-card_ATT .flip-card-front, .flip-card_ATT .flip-card-back {
  border-color: #ff0033 !important; /* Rouge vif */
  box-shadow: inset 0 0 40px rgba(255, 0, 51, 0.4);
  background:
    radial-gradient(circle at 75% 15%, rgba(255, 0, 51, 0.3) 0%, transparent 60%),
    linear-gradient(45deg, #060913 25%, #1a0005 25%, #1a0005 50%, #060913 50%, #060913 75%, #1a0005 75%, #1a0005 100%);
  background-size: 100% 100%, 6px 6px;
}

/* --- AJUSTEMENT DES TEXTES POUR LE CONTRASTE --- */
.flip-card-front h4, .flip-card-back h4 {
  text-shadow: 0 0 10px rgba(0,0,0,1), 0 2px 4px rgba(0,0,0,1);
}

/* --- COHÉRENCE DE LA PHOTO (Optionnel, à adapter selon tes classes) --- */
.flip-card_GB .player-photo  { background: linear-gradient(135deg, #ffcc00, #000) !important; }
.flip-card_DEF .player-photo { background: linear-gradient(135deg, #0077ff, #000) !important; }
.flip-card_MIL .player-photo { background: linear-gradient(135deg, #00ff66, #000) !important; }
.flip-card_ATT .player-photo { background: linear-gradient(135deg, #ff0033, #000) !important; }


/*********************
TYPOGRAPHIE (Ombres pour la lisibilité)
*********************/
.flip-card-front h4, .flip-card-back h4,
.flip-card-front h6, .flip-card-back h6 {
  color: #ffffff;
  /* AMÉLIORATION : Ombre portée sur le texte pour détacher du fond */
  text-shadow: 0 2px 5px rgba(0,0,0,0.9);
  letter-spacing: 0.5px;
}

.flip-card-front h5, .flip-card-back h5 {
  color: #F8B864; /* Sous-titres en Or */
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
}

/*********************
PHOTOS & LOGOS (Cercles métalliques)
*********************/
.player-photo {
  height: 5rem;
  display: block;
  margin: auto;
  border-radius: 50%;
  padding: 3px;
  /* AMÉLIORATION : Un vrai dégradé métallique Or pour le cercle autour du joueur */
  background: linear-gradient(135deg, #F8B864 0%, #8a6327 50%, #F8B864 100%);
  box-shadow: 0 8px 15px rgba(0,0,0,0.8), inset 0 0 10px rgba(0,0,0,0.8);
}

.profile-photo {
  position: relative;
  bottom: -1px;
  display: block;
  margin: auto;
  width: 100%;
  max-width: 200px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.8);
}

/* LOGOS */
.club-logo, .gp-logo {
  height: 2rem;
  display: block;
  margin: auto;
  /* AMÉLIORATION : Ombre plus douce pour que le logo s'intègre mieux */
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.8));
}

.gp-logo { display:inline;height: 1.2rem !important; }