/* ==========================================================================
   Page Tarifs — CSS exact porté depuis _floot-export/pages/tarifs.module.css
   Chaque sélecteur est préfixé par .page--tarifs pour cloisonner ces
   règles (les CSS Modules d'origine étaient cloisonnés par le bundler ;
   ce fichier classique ne l'est pas). Valeurs recopiées à l'identique.
   Source : _floot-export/pages/tarifs.tsx / tarifs.module.css
   ========================================================================== */

.page--tarifs .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-8);
  min-height: 80vh;
  /* svh = plus petit viewport, barre d'URL DÉPLOYÉE. vh vaut le plus grand :
     sur mobile la boîte dépassait donc l'écran puis sursautait quand la barre
     se repliait. La déclaration vh reste en repli pour les navigateurs
     antérieurs aux unités dynamiques (adaptation mobile du 11 août 2026). */
  min-height: 80svh;
}

.page--tarifs .header {
  text-align: center;
  margin-bottom: var(--spacing-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
}

.page--tarifs .seasonBadge {
  font-family: var(--font-family-monospace);
  font-size: 1rem;
  padding: var(--spacing-2) var(--spacing-4);
}

.page--tarifs .title {
  font-family: var(--font-family-heading);
  font-size: clamp(3rem, 6vw, 6rem);
  margin: 0;
  color: var(--foreground);
  text-transform: uppercase;
  line-height: 0.9;
}

.page--tarifs .resumeBox {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  background-color: var(--surface);
  padding: var(--spacing-4) var(--spacing-6);
  border: 1px solid var(--border);
  margin-top: var(--spacing-4);
}

.page--tarifs .resumeIcon {
  color: var(--primary);
}

.page--tarifs .resumeBox p {
  margin: 0;
  font-size: 1.1rem;
}

/* Pricing Grid */
.page--tarifs .pricingSection {
  margin-bottom: var(--spacing-16);
}

.page--tarifs .pricingGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
}

.page--tarifs .pricingCard {
  background-color: var(--card);
  border: 1px solid var(--border);
  padding: var(--spacing-8);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.page--tarifs .pricingCard:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.page--tarifs .pricingCard[data-featured="true"] {
  background-color: var(--surface);
  border-color: var(--primary);
  box-shadow: var(--shadow);
}



.page--tarifs .cardHeader {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--spacing-4);
}

.page--tarifs .cardTitle {
  font-family: var(--font-family-heading);
  font-size: 2rem;
  margin: 0;
  color: var(--foreground);
}

.page--tarifs .cardSubtitle {
  font-family: var(--font-family-monospace);
  color: var(--muted-foreground);
  font-size: 0.9rem;
  margin-top: var(--spacing-1);
}

.page--tarifs .priceWrapper {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2);
}

.page--tarifs .price {
  font-family: var(--font-family-heading);
  font-size: 3.5rem;
  color: var(--primary);
  line-height: 1;
}

.page--tarifs .period {
  color: var(--muted-foreground);
  font-size: 1.1rem;
}

.page--tarifs .featuresList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.page--tarifs .featuresList li {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  color: var(--foreground);
  font-size: 0.95rem;
}

.page--tarifs .checkIcon {
  color: var(--secondary);
  flex-shrink: 0;
}

.page--tarifs .babyKarateBanner {
  background-color: var(--primary);
  color: var(--primary-foreground);
  padding: var(--spacing-6) var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-6);
  /* Brutalist clip */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0% 100%
  );
}

.page--tarifs .babyContent h3 {
  font-family: var(--font-family-heading);
  font-size: 1.75rem;
  margin: 0 0 var(--spacing-2) 0;
}

.page--tarifs .babyContent p {
  margin: 0;
  opacity: 0.9;
}

/* Info Section */
.page--tarifs .separator {
  margin: var(--spacing-16) 0;
}

.page--tarifs .infoGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
}

.page--tarifs .infoCard {
  background-color: var(--surface);
  border: 1px solid var(--border);
  padding: var(--spacing-8);
}

.page--tarifs .infoHeader {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.page--tarifs .infoIcon {
  width: 32px;
  height: 32px;
  color: var(--secondary);
}

.page--tarifs .infoHeader h3 {
  font-family: var(--font-family-heading);
  font-size: 1.75rem;
  margin: 0;
  text-transform: uppercase;
}

.page--tarifs .paymentMethods {
  list-style: disc;
  padding-left: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.page--tarifs .warning {
  color: var(--error);
  list-style: none;
  margin-left: calc(var(--spacing-5) * -1);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
  font-weight: 500;
}

.page--tarifs .aidsGrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
}

.page--tarifs .aidItem {
  background-color: var(--background);
  border: 1px solid var(--border);
  padding: var(--spacing-2) var(--spacing-4);
  font-weight: 700;
  font-size: 0.9rem;
}

/* CTA Section */
.page--tarifs .ctaSection {
  margin-top: var(--spacing-16);
  text-align: center;
  background-color: var(--card);
  border: 1px solid var(--border);
  padding: var(--spacing-12) var(--spacing-8);
}

.page--tarifs .ctaContent h2 {
  font-family: var(--font-family-heading);
  font-size: 3rem;
  margin: 0 0 var(--spacing-4) 0;
  text-transform: uppercase;
}

.page--tarifs .ctaContent p {
  font-size: 1.25rem;
  color: var(--muted-foreground);
  max-width: 700px;
  margin: 0 auto var(--spacing-8) auto;
}

.page--tarifs .ctaActions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-4);
}

/* Responsive */
@media (max-width: 768px) {
  .page--tarifs .babyKarateBanner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .page--tarifs .infoGrid {
    grid-template-columns: 1fr;
  }

  .page--tarifs .ctaActions {
    flex-direction: column;
  }

  .page--tarifs .title {
    font-size: 3rem;
  }
}