/* --- Mise en page globale des Formations --- */
.category-zone {
  margin-bottom: 60px;
}

.category-title {
  font-size: 1.4rem;
  color: var(--color-gold);
  border-bottom: 1px solid #222;
  padding-bottom: 10px;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Grille stable à 3 colonnes */
.abonnements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Gestion de l'image pour éviter qu'elle soit disproportionnée */
.image-crop {
  width: 100%;
  height: 150px;
  overflow: hidden;
  border-radius: 6px;
  margin: 15px 0;
}

.abonnement-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* --- Le Conteneur Principal (Forçage de la Grille) --- */
.abonnements-grid {
  display: grid !important; /* Le !important force le CSS si un autre fichier bloque */
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  box-sizing: border-box;
}

/* --- La Structure d'une Carte --- */
.abonnement-card {
  background: #151515;
  border: 1px solid #2a2a2d;
  border-radius: 12px;
  padding: 25px;
  position: relative;
  box-sizing: border-box;
  
  /* Ces 3 lignes magiques forcent les éléments internes à s'aligner */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* --- Gestion des titres et textes --- */
.abonnement-card h3 {
  margin: 10px 0 5px 0;
  font-size: 1.3rem;
  color: #fff;
}

.card-subtitle {
  margin: 0 0 15px 0;
  font-size: 0.9rem;
  color: #c5a059; /* Couleur Or */
}

/* --- Forçage de la taille de l'image --- */
.image-crop {
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 15px;
}

.abonnement-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Empêche l'image de se déformer */
}

.abonnement-price {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  margin: 10px 0;
  font-family: monospace;
}

/* --- Listes de puces --- */
.abonnement-card ul {
  padding-left: 20px;
  margin: 0 0 20px 0;
  text-align: left;
}

.abonnement-card ul li {
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #ccc;
}

/* --- Badge Volume (Vol. 1, 2, 3) --- */
.volume-badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background-color: #000;
  color: #c5a059;
  border: 1px solid #c5a059;
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 4px;
  z-index: 10;
  letter-spacing: 1px;
}

/* Style de l'offre mise en avant (Volume 2) */
.abonnement-card.high-value {
  border: 1px solid #c5a059;
  background: rgba(197, 160, 89, 0.02);
}

/* --- Bloc Déroulant Modules --- */
.modules-details {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px;
  border-radius: 4px;
  text-align: left;
}

.modules-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: #c5a059;
  font-weight: bold;
  user-select: none;
}

.modules-list {
  padding-left: 15px !important;
  margin: 8px 0 0 0 !important;
}

.modules-list li {
  font-size: 0.8rem !important;
  color: #888 !important;
  list-style-type: square;
}

/* --- Aligner les boutons tout en bas --- */
.payment-buttons {
  margin-top: auto; /* Pousse les boutons vers le bas de la carte quoi qu'il arrive */
  display: flex;
  gap: 10px;
  width: 100%;
}

.abonnement-button {
  flex: 1;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.2s;
}

.abonnement-button:hover {
  opacity: 0.85;
}

.btn-paypal { background: #003087; color: #fff; }
.btn-stripe { background: #635bff; color: #fff; }

/* --- RESPONSIVE TABLETTE & MOBILE --- */
@media (max-width: 992px) {
  .abonnements-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 650px) {
  .abonnements-grid {
    grid-template-columns: 1fr !important;
  }
  .abonnement-card {
    margin-top: 15px;
  }
}
/* Mise en avant d'une offre (Ex: Cursus complet) */
.abonnement-card.high-value {
  border: 1px solid var(--color-gold);
  position: relative;
  background: rgba(197, 160, 89, 0.02);
}

.card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gold);
  color: #000;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 20px;
  text-transform: uppercase;
}

/* Style des détails de modules */
.modules-details {
  margin: 20px 0;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px;
  border-radius: 4px;
  text-align: left;
}

.modules-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-gold);
  font-weight: bold;
}

.modules-list {
  padding-left: 15px;
  font-size: 0.8rem;
  color: #aaa;
  margin-top: 8px;
}

/* Boutons côte à côte */
.payment-buttons {
  display: flex;
  gap: 10px;
  margin-top: auto; /* Aligne les boutons en bas de la carte */
}

.abonnement-button {
  flex: 1;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 4px;
}


.btn-paypal { background: #003087; color: #fff; }
.btn-stripe { background: #635bff; color: #fff; }

/* Responsive */
@media (max-width: 992px) {
  .abonnements-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .abonnements-grid { grid-template-columns: 1fr; }
}