/* ===== Page : Événements Saisonniers ===== */

.evenements-saisonniers {
  min-width: 0;
}

/* --- Hero Saisonnier --- */
.hero-saisonnier {
  padding-block: var(--space-3xl);
}

.hero-saisonnier__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.hero-saisonnier__content {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.hero-saisonnier__title {
  margin-block-end: 0;
}

.hero-saisonnier__subtitle {
  color: var(--color-parchment-300);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-block-end: 0;
}

.hero-saisonnier__cta {
  margin-block-start: var(--space-xs);
}

@media (min-width: 768px) {
  .hero-saisonnier {
    padding-block: var(--space-4xl);
  }

  .hero-saisonnier__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2xl);
  }

  .hero-saisonnier__content {
    grid-column: 1;
  }
}

/* --- Titres de section avec règle dorée --- */
.intro-evenements__heading,
.calendrier-evenements__heading,
.mecaniques-evenements__heading,
.recompenses-exclusives__heading,
.strategies-reussir__heading,
.evenements-passes-futurs__heading,
.faq-evenements__heading {
  margin-block-end: var(--space-xl);
}

.intro-evenements__heading h2,
.calendrier-evenements__heading h2,
.mecaniques-evenements__heading h2,
.recompenses-exclusives__heading h2,
.strategies-reussir__heading h2,
.evenements-passes-futurs__heading h2,
.faq-evenements__heading h2 {
  margin-block-end: var(--space-xs);
}

.intro-evenements__heading .divider-gold,
.calendrier-evenements__heading .divider-gold,
.mecaniques-evenements__heading .divider-gold,
.recompenses-exclusives__heading .divider-gold,
.strategies-reussir__heading .divider-gold,
.evenements-passes-futurs__heading .divider-gold,
.faq-evenements__heading .divider-gold {
  margin-block: 0;
}

/* --- Introduction aux Événements --- */
.intro-evenements__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.intro-evenements__column {
  min-width: 0;
}

.intro-evenements__column h3 {
  margin-block-end: var(--space-md);
}

.intro-evenements__column p {
  max-width: 68ch;
}

.intro-evenements__column ul {
  margin-block-start: var(--space-md);
}

@media (min-width: 768px) {
  .intro-evenements__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
  }
}

/* --- Calendrier des Événements --- */
.calendrier-evenements__lead {
  max-width: 68ch;
  color: var(--color-parchment-300);
  margin-block-start: var(--space-md);
}

.calendrier-evenements__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.carte-evenement {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.carte-evenement:hover {
  border-color: var(--color-gold-400);
  background-color: var(--color-midnight-700);
}

.carte-evenement h3 {
  margin-block-end: 0;
}

.carte-evenement__periode {
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-400);
  margin-block-end: 0;
}

.carte-evenement p:last-child {
  margin-block-end: 0;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .calendrier-evenements__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .calendrier-evenements__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* --- Mécaniques des Événements --- */
.mecaniques-evenements__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.mecaniques-evenements__principal {
  min-width: 0;
}

.mecaniques-evenements__principal h3 {
  margin-block-end: var(--space-md);
}

.mecaniques-evenements__principal p,
.mecaniques-evenements__principal li {
  max-width: 68ch;
}

.mecaniques-evenements__principal ul {
  margin-block-start: var(--space-md);
}

.mecaniques-evenements__encart {
  min-width: 0;
  align-self: start;
}

.mecaniques-evenements__encart .callout__content h3 {
  margin-block-end: var(--space-sm);
}

@media (min-width: 900px) {
  .mecaniques-evenements__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-2xl);
  }
}

/* --- Récompenses Exclusives --- */
.recompenses-exclusives__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.carte-recompense {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.carte-recompense img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  border-bottom: 1px solid var(--color-gold-400);
}

.carte-recompense__contenu {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.carte-recompense__contenu h3 {
  margin-block-end: 0;
}

.carte-recompense__contenu p {
  margin-block-end: 0;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .recompenses-exclusives__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .recompenses-exclusives__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Stratégies pour Réussir --- */
.strategies-reussir__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.strategies-reussir__conseils,
.strategies-reussir__monnaie {
  min-width: 0;
}

.strategies-reussir__conseils .callout__content h3,
.strategies-reussir__monnaie .callout__content h3 {
  margin-block-end: var(--space-sm);
}

.strategies-reussir__conseils .callout__content p,
.strategies-reussir__monnaie .callout__content p,
.strategies-reussir__conseils .callout__content li,
.strategies-reussir__monnaie .callout__content li {
  max-width: 68ch;
}

.strategies-reussir__conseils .callout__content ul,
.strategies-reussir__monnaie .callout__content ul {
  margin-block-start: var(--space-md);
}

@media (min-width: 768px) {
  .strategies-reussir__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
  }
}

/* --- Événements Passés et Futurs --- */
.evenements-passes-futurs {
  background-color: var(--color-midnight-800);
}

.evenements-passes-futurs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.evenements-passes-futurs__colonne {
  min-width: 0;
}

.evenements-passes-futurs__colonne h3 {
  margin-block-end: var(--space-md);
}

.evenements-passes-futurs__colonne p,
.evenements-passes-futurs__colonne li {
  max-width: 68ch;
}

.evenements-passes-futurs__colonne ul {
  margin-block-start: var(--space-md);
}

@media (min-width: 768px) {
  .evenements-passes-futurs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
  }
}

/* --- FAQ sur les Événements --- */
.faq-evenements__liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.faq-item {
  min-width: 0;
  background-color: var(--color-midnight-800);
  border: 1px solid var(--color-stone-600);
  border-radius: var(--radius-default);
  overflow: hidden;
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-parchment-100);
  background-color: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  min-height: 48px;
}

.faq-item__question:hover {
  background-color: var(--color-midnight-700);
  color: var(--color-gold-200);
}

.faq-item__question:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

.faq-item__chevron {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-gold-400);
  transition: transform var(--transition-medium);
}

.faq-item.open .faq-item__chevron {
  transform: rotate(180deg);
}

.faq-item__reponse {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-medium);
}

.faq-item__reponse p {
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--color-parchment-300);
  max-width: 68ch;
  margin-block-end: 0;
}

/* --- Appel à l'Action Final --- */
.cta-final {
  padding-block: var(--space-3xl);
}

.cta-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  max-width: 600px;
  margin-inline: auto;
}

.cta-final__inner h2 {
  margin-block-end: 0;
}

.cta-final__inner p {
  color: var(--color-parchment-300);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .cta-final {
    padding-block: var(--space-4xl);
  }
}

/* --- Animations de défilement --- */
@media (prefers-reduced-motion: no-preference) {
  .intro-evenements__heading,
  .calendrier-evenements__heading,
  .mecaniques-evenements__heading,
  .recompenses-exclusives__heading,
  .strategies-reussir__heading,
  .evenements-passes-futurs__heading,
  .faq-evenements__heading {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
  }

  .intro-evenements__heading.is-visible,
  .calendrier-evenements__heading.is-visible,
  .mecaniques-evenements__heading.is-visible,
  .recompenses-exclusives__heading.is-visible,
  .strategies-reussir__heading.is-visible,
  .evenements-passes-futurs__heading.is-visible,
  .faq-evenements__heading.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}