@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}

.nav-link {
  position: relative;
  color: #333;
  transition: color 0.3s ease;
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: #1a237e;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.cyber-button {
  position: relative;
  padding: 15px 30px;
  color: #ffffff;
  background: #06b6d4; /* cyan base */
  border: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  overflow: hidden;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border-radius: 5px;
}

.cyber-button:hover {
  background: #0891b2; /* darker cyan on hover */
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(8,145,178,0.12);
}

.cyber-button:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.question-container {
  animation: fadeIn 0.5s ease-in;
}

/* Updated image container styles */
.question-container .mb-8 {
  height: 400px;
  /* Increased from default */
  margin-bottom: 2rem;
}

h2 {
  margin-top: 50px;
}

.question-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Changed to contain to preserve aspect ratio */
  object-position: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feedback-correct {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.feedback-incorrect {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.selected-answer {
  border: 2px solid #1a237e !important;
  background-color: #e8eaf6 !important;
}

/* Demo and PDF download styling */
.demo-button {
  background: #1e40af;
}

.demo-button:hover {
  background: #1e3a8a;
}

.pdf-button {
  background: #047857;
  width: 100%;
  max-width: 250px;
  margin: 10px auto;
}

.pdf-button:hover {
  background: #065f46;
}

.full-course-button {
  background: #7e22ce;
  font-size: 1.1rem;
  padding: 15px 40px;
}

.full-course-button:hover {
  background: #6b21a8;
}

.action-buttons .cyber-button {
  width: 100%;
  margin-top: 10px;
}

/* Animation for the options */
.demo-option,
.pdf-option,
.full-course-option {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.demo-option:hover,
.pdf-option:hover,
.full-course-option:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.pdf-option,
.full-course-option {
  margin-bottom: 20px;
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
  .question-container {
    padding: 1rem;
  }

  .question-container .mb-8 {
    height: 300px;
  }

  .question-container p.text-xl {
    font-size: 1rem;
    line-height: 1.4;
  }

  .cyber-button {
    padding: 12px 20px;
    font-size: 14px;
  }

  #final-score {
    font-size: 2.5rem;
  }

  .pricing-section .cards-grid .glass-card {
    width: 90%;
    height: auto;
    padding: 1.25rem;
    justify-content: space-between;
  }

  .pricing-section .cards-grid .glass-card .card-cta {
    width: auto;
    padding: 12px 22px;
  }
}

@media (max-width: 480px) {
  .question-container .mb-8 {
    height: 200px;
  }

  .question-container label {
    padding: 10px;
    font-size: 14px;
  }

  .feedback-correct,
  .feedback-incorrect {
    padding: 10px;
    font-size: 14px;
  }

  .full-course-button {
    padding: 12px 20px;
  }

  #results-container h3 {
    font-size: 1.5rem;
  }

  .quiz-card {
    width: 90%;
    height: auto;
    padding: 20px;
  }

  main.container {
    padding-top: 5.5rem;
  }

}

.quiz-card {
  width: 340px;
  height: 340px; /* carré */
  background: linear-gradient(180deg, #ffffff 0%, #f3f6ff 100%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.quiz-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(10, 25, 80, 0.12);
}

.quiz-card-title {
  font-size: 1.25rem;
  color: #0f172a;
  font-weight: 600;
}

.quiz-card-text {
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.3;
  padding: 0 8px;
}

.quiz-card-button {
  width: 100%;
  max-width: 220px;
  margin-top: 8px;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
}

main.container {
  padding-top: 8rem; /* évite que le contenu soit masqué par la nav fixe */
}

/* fallback grid si vous préférez CSS pur au lieu des classes Tailwind */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.pricing-section .cards-grid {
  justify-items: center; /* centre les cartes dans la grille */
}

.pricing-section .cards-grid .glass-card {
  width: 100%;
  max-width: 380px;
  height: 360px; /* uniform card height */
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* push CTA to the bottom */
  align-items: stretch;
  text-align: center;
  padding: 1.5rem;
  box-sizing: border-box;
  overflow: hidden;
  cursor: default;
  gap: 1rem;
}

/* Make the grid items stretch to the same height so fixed card height is consistent */
.pricing-section.quiz-page .cards-grid {
  align-items: stretch;
}

/* Ensure header doesn't grow and paragraph takes remaining space */
.pricing-section .cards-grid .glass-card .price-card__header {
  flex: 0 0 auto;
}

.pricing-section .cards-grid .glass-card p {
  flex: 1 1 auto;
  overflow: auto; /* allow scrolling if content is too long */
  margin-top: 0.5rem;
}

.pricing-section .cards-grid .glass-card .card-cta {
  margin-top: 1rem;
  flex: 0 0 auto;
}

/* Page-specific overrides for the quiz to avoid large bottom gaps on tall viewports */
.pricing-section.quiz-page {
  min-height: auto; /* do not force 100vh here */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing-section.quiz-page .cards-grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; /* center the grid horizontally */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  justify-items: center;
  align-items: start;
}

@media (max-width: 768px) {
  .pricing-section.quiz-page {
    padding-top: 60px; /* slightly smaller on tablets */
  }
  .pricing-section .cards-grid .glass-card {
    height: 320px; /* smaller uniform height on tablet */
  }
}

@media (max-width: 480px) {
  .pricing-section.quiz-page {
    padding-top: 64px; /* mobile: nav is smaller */
  }
  .pricing-section .cards-grid .glass-card {
    height: 300px; /* mobile height */
  }
}

.pricing-section .cards-grid .glass-card .price-card__header {
  margin-bottom: 0.75rem;
  width: 100%;
  display: block;
}

/* Centre les titres et paragraphes et évite qu'ils s'étirent vers le bas */
.pricing-section .cards-grid .glass-card h3,
.pricing-section .cards-grid .glass-card p {
  width: 100%;
  text-align: center;
  margin: 0;
}

/* Si vous avez besoin que le texte prenne l'espace central (utile pour hauteur fixe) */
.pricing-section .cards-grid .glass-card p {
  flex: 0 0 auto;
}

.pricing-section .cards-grid .glass-card .card-cta {
  margin-top: 0.5rem;
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
  background: #06b6d4; /* cyan */
  color: #ffffff;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 1px;
}

/* Hover effect pour le bouton */
.pricing-section .cards-grid .glass-card .card-cta:hover {
  background: #0891b2; /* darker cyan on hover */
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(8,145,178,0.12);
}

/* Optional: ensure footer sits at the bottom of short pages */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Make the main section take remaining space so footer is pushed to bottom */
.pricing-section.quiz-page {
  flex: 1 0 auto;
}

/* Ensure footer doesn't create extra visible gap */
footer {
  margin-top: auto;
}