/* ====================================
   TABLE DES MATIÈRES
   ====================================
   1. Variables et configuration
   2. Structure de la page
   3. Hero Section
   4. Program Intro
   5. Tiers Details
   6. How it Works
   7. FAQ Section
   8. Exclusive Events
   9. Join Program
   10. Animations
   11. Cross-Browser Fixes
   12. Responsive Adjustments
   ==================================== */

/* 1. Variables et configuration
   ================================== */
:root {
  --bronze-gradient: linear-gradient(145deg, #cd7f32, #8c5523);
  --silver-gradient: linear-gradient(145deg, #c0c0c0, #a9a9a9);
  --gold-gradient: linear-gradient(145deg, #ffd700, #b8860b);
  --hero-gradient: linear-gradient(135deg, #5865F2 0%, #7289DA 100%);
  --join-gradient: linear-gradient(135deg, #4752c4 0%, #5865F2 100%);
  --card-shadow: 0 5px 20px rgba(0,0,0,0.08);
  --hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  --gold-color: #ffd700;
}

/* 2. Structure de la page
   ================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 3. Hero Section
   ================================== */
#hero-fidelite {
  background: var(--hero-gradient);
  color: white;
  padding: 80px 0;
  text-align: center;
}

#hero-fidelite h1 {
  font-size: 2.8em;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#hero-fidelite p {
  font-size: 1.2em;
  max-width: 700px;
  margin: 0 auto;
  opacity: 0.9;
}

/* 4. Program Intro
   ================================== */
#program-intro {
  padding: 60px 0;
  background-color: #f9f9f9;
}

#program-intro h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

#program-intro p {
  max-width: 800px;
  margin: 0 auto 20px;
  text-align: center;
  font-size: 1.1em;
  color: #555;
  padding: 0 20px;
}

/* 5. Tiers Details
   ================================== */
#tiers-details {
  padding: 70px 0;
  background-color: #fff;
}

#tiers-details h2 {
  text-align: center;
  margin-bottom: 50px;
  color: #333;
}

/* Tier Cards */
.tier-card {
  display: flex;
  margin-bottom: 40px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.tier-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hover-shadow);
}

.tier-icon {
  flex: 0 0 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 30px;
  font-size: 4em;
}

.tier-content {
  flex: 1;
  padding: 30px;
}

.tier-content h3 {
  margin: 0 0 15px;
  font-size: 1.8em;
}

.tier-qualification {
  display: inline-block;
  background-color: #f0f0f0;
  padding: 5px 15px;
  border-radius: 50px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #555;
}

/* Tier Advantages */
.tier-advantages h4 {
  margin-bottom: 15px;
  font-size: 1.2em;
  color: #333;
}

.tier-advantages ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px 20px;
}

.tier-advantages li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding-right: 15px;
}

.tier-advantages li i {
  margin-right: 10px;
  font-size: 1.1em;
  color: #28a745;
  flex-shrink: 0;
}

/* Tier specific styling */
.bronze-tier .tier-icon {
  background: var(--bronze-gradient);
}

.silver-tier .tier-icon {
  background: var(--silver-gradient);
}

.gold-tier .tier-icon {
  background: var(--gold-gradient);
}

.tier-banner {
  position: absolute;
  top: 20px;
  right: -35px;
  background: var(--gold-color);
  color: #333;
  padding: 5px 40px;
  transform: rotate(45deg);
  font-weight: bold;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  z-index: 1;
}

/* 6. How it Works
   ================================== */
#how-it-works {
  padding: 70px 0;
  background-color: #f6f9fc;
}

#how-it-works h2 {
  text-align: center;
  margin-bottom: 50px;
  color: #333;
}

.steps {
  display: flex;
  justify-content: space-around;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 20px;
}

.step {
  flex: 1;
  min-width: 220px;
  max-width: 250px;
  padding: 0 15px;
  margin-bottom: 30px;
  text-align: center;
}

.step-number {
  width: 60px;
  height: 60px;
  background-color: #7289DA;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 1.8em;
  font-weight: bold;
}

.step-content h3 {
  margin-bottom: 10px;
  font-size: 1.3em;
  color: #333;
}

.step-content p {
  font-size: 1em;
  color: #666;
}

/* 7. FAQ Section
   ================================== */
#faq-fidelite {
  padding: 70px 0;
  background-color: white;
}

#faq-fidelite h2 {
  text-align: center;
  margin-bottom: 50px;
  color: #333;
}

.faq-items {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.faq-item {
  margin-bottom: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
}

.faq-question {
  padding: 20px 25px;
  background-color: #f9f9f9;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: #f0f0f0;
}

.faq-question h3 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  color: #333;
}

.faq-answer {
  padding: 0 25px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  background-color: white;
}

.faq-item.active .faq-answer {
  padding: 20px 25px;
  max-height: 300px; /* Increased for better readability */
}

/* 8. Exclusive Events Section
   ================================== */
#exclusives {
  padding: 70px 0;
  background-color: #f0f4f8;
}

#exclusives h2 {
  text-align: center;
  margin-bottom: 50px;
  color: #333;
}

.exclusives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.exclusive-item {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  text-align: center;
  transition: transform 0.3s ease;
  position: relative;
}

.exclusive-item:hover {
  transform: translateY(-10px);
}

.exclusive-icon {
  font-size: 2.5em;
  color: #5865F2;
  margin-bottom: 20px;
}

.exclusive-item h3 {
  margin-bottom: 15px;
  color: #333;
  font-size: 1.4em;
}

.exclusive-item p {
  color: #666;
  margin-bottom: 20px;
  font-size: 1em;
  line-height: 1.5;
}

.availability {
  display: inline-block;
  background: #f0f0f0;
  padding: 5px 15px;
  border-radius: 50px;
  font-size: 0.85em;
  color: #555;
  font-weight: 600;
}

/* 9. Join Program Section
   ================================== */
#join-program {
  background: var(--join-gradient);
  color: white;
  text-align: center;
  padding: 60px 0;
}

#join-program h2 {
  margin-bottom: 20px;
  padding: 0 20px;
}

#join-program p {
  max-width: 700px;
  margin: 0 auto 30px;
  font-size: 1.1em;
  opacity: 0.9;
  padding: 0 20px;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.primary-cta, .secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.primary-cta {
  background-color: white;
  color: #5865F2;
}

.secondary-cta {
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

.primary-cta:hover, .secondary-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.primary-cta:hover {
  background-color: #f8f8f8;
}

.secondary-cta:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.primary-cta i, .secondary-cta i {
  margin-right: 10px;
}

.program-note {
  margin-top: 15px;
  font-style: italic;
  opacity: 0.7;
  font-size: 0.9em;
}

/* 10. Animations
   ================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Performance optimizations for animations */
[data-aos] {
  -webkit-backface-visibility: hidden; /* Safari performance improvement */
  backface-visibility: hidden;
  will-change: transform, opacity; /* Hint for browser optimization */
}

/* Disable animations on devices that prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
}

/* 11. Cross-Browser Fixes
   ================================== */
/* Safari backdrop-filter support */
.modal-content,
.dropdown-menu,
.navbar-blur,
.any-element-with-backdrop-filter,
nav {  /* Added nav element */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Fix for Firefox min-height: auto issue */
.any-element-with-min-height-auto {
  min-height: 0;
}

/* 12. Responsive Adjustments
   ================================== */
@media (max-width: 1200px) {
  .tier-advantages ul {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 992px) {
  .tier-card {
    flex-direction: column;
    margin-left: 15px;
    margin-right: 15px;
  }
  
  .tier-icon {
    flex: 0 0 auto;
    padding: 30px 0;
  }
  
  .exclusives-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    padding: 0 15px;
  }
  
  .steps {
    justify-content: center;
    padding: 0 15px;
  }
  
  #hero-fidelite {
    padding: 60px 15px;
  }
  
  nav {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
}

@media (max-width: 768px) {
  #hero-fidelite {
    padding: 50px 15px;
  }
  
  #hero-fidelite h1 {
    font-size: 2em;
    margin-bottom: 15px;
  }
  
  #hero-fidelite p {
    font-size: 1em;
  }
  
  .tier-advantages ul {
    grid-template-columns: 1fr;
  }
  
  .tier-content {
    padding: 20px 15px;
  }
  
  .tier-content h3 {
    font-size: 1.5em;
  }
  
  .faq-question h3 {
    font-size: 1em;
  }
  
  .step {
    min-width: 160px;
    padding: 0 10px;
  }
  
  #program-intro, 
  #tiers-details, 
  #how-it-works, 
  #faq-fidelite, 
  #exclusives {
    padding: 50px 0;
  }
  
  #program-intro h2, 
  #tiers-details h2, 
  #how-it-works h2, 
  #faq-fidelite h2, 
  #exclusives h2 {
    margin-bottom: 30px;
    font-size: 1.8em;
  }
}

@media (max-width: 576px) {
  #hero-fidelite h1 {
    font-size: 1.7em;
  }
  
  #program-intro p {
    font-size: 0.95em;
    padding: 0 15px;
  }
  
  .tier-banner {
    display: none;
  }
  
  .gold-tier::after {
    content: "PREMIUM";
    display: block;
    background: var(--gold-color);
    color: #333;
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
    font-size: 0.9em;
  }
  
  .exclusive-item {
    padding: 20px 15px;
  }
  
  .cta-buttons {
    flex-direction: column;
    gap: 15px;
    padding: 0 15px;
  }
  
  .primary-cta, 
  .secondary-cta {
    width: 100%;
    justify-content: center;
  }
  
  .tier-card {
    margin-bottom: 30px;
  }
  
  .tier-icon {
    font-size: 0.8em;
    padding: 20px 0;
  }
  
  .faq-question {
    padding: 15px;
  }
  
  .faq-answer {
    padding: 0 15px;
  }
  
  .faq-item.active .faq-answer {
    padding: 15px;
  }
  
  .program-note {
    padding: 0 15px;
  }
  
  .step-number {
    width: 50px;
    height: 50px;
    font-size: 1.5em;
  }
  
  .step-content h3 {
    font-size: 1.1em;
  }
}

@media (max-width: 380px) {
  #hero-fidelite h1 {
    font-size: 1.5em;
  }
  
  .tier-content h3 {
    font-size: 1.3em;
  }
  
  .tier-qualification {
    padding: 4px 10px;
    font-size: 0.8em;
  }
  
  .tier-advantages li i {
    margin-right: 5px;
  }
  
  .exclusive-icon {
    font-size: 2em;
    margin-bottom: 15px;
  }
  
  .exclusive-item h3 {
    font-size: 1.2em;
  }
  
  .step {
    min-width: 140px;
  }
  
  .step-content p {
    font-size: 0.9em;
  }
  
  #join-program h2 {
    font-size: 1.4em;
  }
  
  #join-program p {
    font-size: 0.9em;
  }
  
  .primary-cta, 
  .secondary-cta {
    padding: 10px 15px;
    font-size: 0.9em;
  }
  
  .program-note {
    font-size: 0.8em;
  }
}

/* Buttons and UI components */
.primary-cta,
.secondary-cta,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  font-weight: 500;
}

.remove-btn,
.add-to-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.close {
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
}