/* ==========================================================================
   1. STRUCTURE DU CONTENEUR & COMPORTEMENT RESPONSIVE
   ========================================================================== */

/* Mode Mobile par défaut : les cartes s'empilent verticalement */
#pricing {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 0;
}

#pricing .concept-card {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 1.5rem 1.5rem 1.5rem;
  border-radius: 12px;
  box-sizing: border-box;
  width: 100%;
  transition: all 0.3s ease;
}

/* Mode Carrousel uniquement si l'écran est > 768px */
@media (max-width: 769px) {
  #pricing {
    justify-content: center;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 1rem 0.5rem 2rem 0.5rem;
    scrollbar-width: none; /* Masque la barre Firefox */
  }

  #pricing::-webkit-scrollbar {
    display: none; /* Masque la barre Chrome/Safari */
  }

  #pricing .concept-card {
    flex: 0 0 320px; /* Largeur fixe pour le défilement du carrousel */
    scroll-snap-align: center;
  }
}

/* ==========================================================================
   2. TYPOGRAPHIE & ÉLÉMENTS INTERNES COMMUNS
   ========================================================================== */

#pricing h3 {
  font-size: 1.5rem;
  margin: 0 0 0.5rem 0;
  transition: color 0.3s ease;
}

#pricing .price-tag {
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 1.25rem;
  transition: color 0.3s ease;
}

#pricing .per-hour {
  font-size: 1rem;
  font-weight: normal;
  transition: color 0.3s ease;
}

/* Badges promotionnels d'angle */
#pricing .corner-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  font-weight: bold;
  z-index: 10;
}

#pricing .badge-discount {
  font-size: 1.3rem;
  font-weight: 900;
}

#pricing .badge-save {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* Listes à puces progressives */
#pricing .math-list {
  font-size: 0.95rem;
  padding-left: 1.2rem;
  text-align: left;
  list-style: none;
}

#pricing .math-list li {
  position: relative;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  transition: color 0.3s ease;
}

#pricing .math-list li::before {
  position: absolute;
  left: -1.1rem;
  transition: color 0.3s ease;
}

/* ==========================================================================
   3. CONFIGURATION DES THÈMES & TEXTES (ROUGE - BLEU - VERT)
   ========================================================================== */

/* --- A. THÈME CLAIR (PAPIER PAR DÉFAUT) --- */

#pricing .concept-card { 
  background-color: rgba(255, 255, 255, 0.25); 
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Harmonisation globale des textes standards (Mode Clair) */
#pricing h3, #pricing .price-tag { color: #111827; }
#pricing .per-hour { color: #4b5563; }
#pricing .math-list li { color: #232933; }

/* TIER 1 : ROUGE (Pack 1 cours) */
#pricing .concept-card:nth-child(1) { border-top: 4px solid #b91c1c; }
#pricing .concept-card:nth-child(1) h3 { color: #b91c1c; }
#pricing .tier-1 li::before { content: "•"; color: #b91c1c; }

/* TIER 2 : BLEU (Pack 3 cours) */
#pricing .concept-card.featured { border-top: 4px solid #0369a1; }
#pricing .concept-card.featured h3 { color: #0369a1; }
#pricing .style-blue { color: #0369a1; }
#pricing .tier-2 li::before { content: "→"; color: #0369a1; font-weight: bold; }

/* TIER 3 : VERT (Pack 5 cours) */
#pricing .concept-card.hot-deal { 
  border: 2px solid #16a34a; 
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.08);
}
#pricing .concept-card.hot-deal h3 { color: #16a34a; }
#pricing .style-accent {
  color: #16a34a;
  background-color: rgba(22, 163, 74, 0.08);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px dashed rgba(22, 163, 74, 0.3);
}
#pricing .tier-3 li { font-weight: 500; color: #0f5132; } /* Texte vert forêt discret et lisible */
#pricing .tier-3 li::before { content: "✓"; color: #16a34a; font-weight: 900; }


/* --- B. THÈME SOMBRE (html.dark) --- */

html.dark #pricing .concept-card { 
  background-color: rgba(255, 255, 255, 0.03); 
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Harmonisation globale des textes standards (Mode Sombre) */
html.dark #pricing h3, html.dark #pricing .price-tag { color: #f3f4f6; }
html.dark #pricing .per-hour { color: #9ca3af; }
html.dark #pricing .math-list li { color: #e5e7eb; }

/* TIER 1 SOMBRE : ROUGE CORAIL */
html.dark #pricing .concept-card:nth-child(1) { border-top: 4px solid #f87171; }
html.dark #pricing .concept-card:nth-child(1) h3 { color: #f87171; }
html.dark #pricing .tier-1 li::before { color: #f87171; }

/* TIER 2 SOMBRE : BLEU CYAN */
html.dark #pricing .concept-card.featured { border-top: 4px solid #38bdf8; }
html.dark #pricing .concept-card.featured h3 { color: #38bdf8; }
html.dark #pricing .style-blue { color: #38bdf8; }
html.dark #pricing .tier-2 li::before { color: #38bdf8; }

/* TIER 3 SOMBRE : VERT ÉMERAUDE */
html.dark #pricing .concept-card.hot-deal { 
  border: 2px solid #4ade80; 
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 24px rgba(74, 222, 128, 0.15);
}
html.dark #pricing .concept-card.hot-deal h3 { color: #4ade80; }
html.dark #pricing .style-accent {
  color: #4ade80;
  background-color: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
}
html.dark #pricing .tier-3 li { color: #e8fdf2; } /* Vert pastel ultra-clair très doux à lire */
html.dark #pricing .tier-3 li::before { color: #4ade80; }


/* ==========================================================================
   4. ANIMATION DE L'OFFRE REINE
   ========================================================================== */

#pricing .pulse-effect {
  animation: pricing-pulse 2.8s infinite ease-in-out;
}

@keyframes pricing-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}


/* --- COMPLÉMENT CSS POUR LA CARTE ET LE BOUTON --- */

#pricing .concept-card {
  /* Assure que la carte utilise flexbox pour pousser le bouton vers le bas */
  display: flex;
  flex-direction: column;
}

#pricing .math-list {
  /* Permet à la liste de prendre tout l'espace libre pour caler le bouton au fond */
  flex-grow: 1; 
  margin-bottom: 1.5rem;
}

/* --- DESIGN DES BOUTONS DE PAIEMENT FROM SCRATCH --- */
#pricing .stripe-btn {
  display: block;
  text-align: center;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  margin-top: auto; /* Force l'ancrage au bas de la carte */
}

#pricing .stripe-btn:hover {
  transform: translateY(-2px);
}

/* --- COULEURS PROGRESSIVES EN MODE CLAIR AVEC TRANSPARENCE (DEFAULT) --- */

/* 1 Cours : Rouge Transparent */
#pricing .btn-tier-1 { 
  background-color: rgba(185, 28, 28, 0.08); 
  color: #b91c1c; 
  border-color: rgba(185, 28, 28, 0.4);
}
#pricing .btn-tier-1:hover { 
  background-color: rgba(185, 28, 28, 0.15); 
  border-color: #b91c1c; 
}

/* 3 Cours : Bleu Transparent */
#pricing .btn-tier-2 { 
  background-color: rgba(3, 105, 161, 0.08); 
  color: #0369a1; 
  border-color: rgba(3, 105, 161, 0.4);
}
#pricing .btn-tier-2:hover { 
  background-color: rgba(3, 105, 161, 0.15); 
  border-color: #0369a1; 
}

/* 5 Cours : Vert Transparent (Mise en valeur) */
#pricing .btn-tier-3 { 
  background-color: rgba(22, 163, 74, 0.12); 
  color: #16a34a; 
  border-color: rgba(22, 163, 74, 0.5);
  box-shadow: 0 4px 10px rgba(22, 163, 74, 0.05);
}
#pricing .btn-tier-3:hover { 
  background-color: rgba(22, 163, 74, 0.22); 
  border-color: #16a34a; 
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.12);
}

/* --- COULEURS PROGRESSIVES EN MODE SOMBRE (html.dark) --- */
html.dark #pricing .btn-tier-1 {
  background-color: rgba(248, 113, 113, 0.1);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
}
html.dark #pricing .btn-tier-1:hover { background-color: rgba(248, 113, 113, 0.2); border-color: #f87171; }

html.dark #pricing .btn-tier-2 {
  background-color: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}
html.dark #pricing .btn-tier-2:hover { background-color: rgba(56, 189, 248, 0.2); border-color: #38bdf8; }

html.dark #pricing .btn-tier-3 {
  background-color: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.5);
}
html.dark #pricing .btn-tier-3:hover { background-color: rgba(74, 222, 128, 0.25); border-color: #4ade80; }