/* --- FORMATS BASÉS SUR LE RATIO --- */
.card--square {
  aspect-ratio: 1 / 1;
}

.card--rect {
  aspect-ratio: 4 / 3; /* Un rectangle un peu plus haut pour rester lisible sur mobile */
}

.card {
  position: relative;
  border-radius: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  background-color: #222;
}


/* --- IMAGE DE FOND --- */
.card__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.card:hover .card__background {
  transform: scale(1.1);
  filter: blur(1px); /* Optionnel : flou léger au lieu de disparition */
  opacity: 0.3;
}

/* --- CONTENU CACHÉ --- */
.card__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 100%;
  height: 100%;
  padding: 25px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.23, 0, 0.320, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Centrage du texte */
  text-align: center;
}

.card:hover .card__content {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1;
}
.card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;

  /* On définit le dégradé via une variable (arc-en-ciel par défaut) */
  background: linear-gradient(to right, var(--gradient-colors, #ffb3ba, #ffdfba, #ffffba, #baffc9, #bae1ff, #eecbff, #ffb3ba));
  
  /* On agrandit le fond pour pouvoir le faire défiler */
  background-size: 200% auto;
  
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* On lance l'animation */
  animation: shine 3s linear infinite;
}

/* L'animation qui fait bouger le dégradé */
@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* --- COLLECTION PASTEL VELVET (L'ÉQUILIBRE) --- */

.theme-red {
  --gradient-colors: #f08080, #ffb3b3, #fcc2c2, #ffb3b3, #f08080;
}

.theme-orange {
  --gradient-colors: #f4a261, #ffcc80, #ffe0b2, #ffcc80, #f4a261;
}

.theme-yellow {
  --gradient-colors: #e9c46a, #f4d35e, #faf0ca, #f4d35e, #e9c46a;
}

.theme-green {
  --gradient-colors: #80b918, #aacc00, #d4fc79, #aacc00, #80b918;
}

.theme-blue {
  --gradient-colors: #4895ef, #4cc9f0, #caf0f8, #4cc9f0, #4895ef;
}

.theme-purple {
  --gradient-colors: #a05fcc, #c856ce, #f770ac, #c856ce, #a05fcc;
}

.theme-pink {
  --gradient-colors: #ff4a9c, #d6467d, #ffafcc, #d6467d, #ff4a9c;
}

.theme-multi {
  --gradient-colors: #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff, #ffadad;
}

.theme-brown {
  --gradient-colors: #96694c, #b5835a, #d4a373, #b5835a, #96694c;
}

.theme-cyan {
  --gradient-colors: #22a6b3, #7ed6df, #c7ecee, #7ed6df, #22a6b3;
}

.theme-grey {
  --gradient-colors: #7f8c8d, #bdc3c7, #ecf0f1, #bdc3c7, #7f8c8d;
}

.theme-gold {
  --gradient-colors: #d4af37, #f1c40f, #fef5d7, #f1c40f, #d4af37;
}

.theme-darkblue {
  --gradient-colors: #1e3799, #4a69bd, #82ccdd, #4a69bd, #1e3799;
}

.card__action {
  margin: 8px 0 15px;
  font-size: 12px;
  color: #ffffff;
  font-style: italic;
}

/* --- TAGS PASTELS --- */
.card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.card__tags span {
  font-size: 11px;
  font-weight: 600;
  color: #444; /* Texte un peu sombre pour la lisibilité sur fond pastel */
  padding: 4px 10px;
  border-radius: 100px; /* Style pillule */
  background-color: var(--tag-bg, #eee); /* Utilise la variable ou gris par défaut */
  border: 1px solid rgba(0,0,0,0.05);
}

/* Effet au hover général sur la carte */
.card:hover {
  transform: translateY(-5px); /* Un petit saut vers le haut au lieu de la rotation brute */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.card.is-flipped .card__content {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* --- AJUSTEMENTS TEXTE MOBILE --- */
@media (max-width: 576px) {
  .card__title {
      font-size: 14px; /* On réduit la taille du titre pour que ça rentre */
      letter-spacing: 0px;
  }
  
  .card__tags span {
      font-size: 9px; /* Tags plus petits */
      padding: 2px 6px;
  }
  
  .card__content {
      padding: 10px; /* Moins de marge interne */
  }
}

.filter-btn {
  transition: all 0.3s ease;
  /* On utilise la couleur du tag assombrie par défaut (40% de luminosité) */
  background-color: color-mix(in srgb, var(--tag-color, #fff), black 60%) !important;
  border-color: rgba(255,255,255,0.1);
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.9rem;
}

/* Cas particulier pour le bouton "Tout" quand il n'est pas sélectionné */
.filter-btn[data-filter="all"] {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* AU SURVOL OU ACTIF : On remet la couleur pleine et vive */
.filter-btn:hover, .filter-btn.active {
  background-color: var(--tag-color, #fff) !important;
  border-color: var(--tag-color, #fff) !important;
  color: #000 !important;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  opacity: 1;
}

/* Bouton "Tout" quand il est actif */
.filter-btn.active[data-filter="all"] {
  background-color: #fff !important;
  color: #000 !important;
}

/* Animation de disparition des cartes */
.filter-item {
  transition: all 0.4s ease;
}

.filter-item.hidden {
  display: none !important;
}

#filter-container {
  /* On réduit la largeur max pour forcer les boutons à se répartir */
  max-width: 800px; 
  margin-left: auto;
  margin-right: auto;
  
  /* On garde ton alignement actuel */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

#filter-container .filter-btn {
  /* Largeur naturelle basée sur le texte uniquement */
  flex: 0 1 auto; 
  width: auto;
  white-space: nowrap;
}