/* Source : _floot-source/pages/body-karate.module.css */
.page--body-karate.pageContainer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background);
}

.page--body-karate .mainContent {
  flex: 1;
  padding: var(--spacing-16) 0;
}

.page--body-karate .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

.page--body-karate .heading {
  font-family: var(--font-family-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--spacing-8);
  position: relative;
  display: inline-block;
}

.page--body-karate .heading::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: var(--primary);
}

/* Une seule colonne : la seconde ne contenait qu'un damier gris décoratif
   (.decorativeBox), masqué en mobile — la preuve qu'il n'apportait rien. */
.page--body-karate .introSection {
  margin-bottom: var(--spacing-16);
}

.page--body-karate .introText {
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--foreground);
  max-width: 62ch;
  margin-bottom: var(--spacing-8);
  text-wrap: pretty;
}

.page--body-karate .badgesWrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.page--body-karate .featureBadge {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  background-color: var(--surface);
  border: 1px solid var(--border);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius);
  font-weight: 700;
  color: var(--primary);
  box-shadow: var(--shadow);
}

.page--body-karate .badgeIcon {
  color: var(--accent);
  width: 18px;
  height: 18px;
}

.page--body-karate .audienceSection {
  background-color: var(--primary);
  color: var(--primary-foreground);
  padding: var(--spacing-12) var(--spacing-6);
  margin: 0 calc(var(--spacing-6) * -1) var(--spacing-16);
}

@media (min-width: 768px) {
  .page--body-karate .audienceSection {
    border-radius: var(--radius);
    margin: 0 0 var(--spacing-16);
  }
}

/* Aligné à gauche comme les items qu'il coiffe : centrer le titre au-dessus
   d'une liste alignée à gauche fait deux traitements dans le même bloc. */
.page--body-karate .audienceContainer {
  max-width: 1000px;
  margin: 0 auto;
}

.page--body-karate .headingInverse {
  font-family: var(--font-family-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--primary-foreground);
  margin-bottom: var(--spacing-3);
  text-wrap: balance;
}

.page--body-karate .audienceLead {
  font-family: var(--font-family-base);
  font-size: 1.25rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 52ch;
  margin-bottom: var(--spacing-10);
  text-wrap: pretty;
}

/* Trois affirmations séparées par des filets, plus trois cartes translucides
   à icône centrée. Sur un aplat indigo, un cadre à 10 % de blanc ne délimite
   rien : il grise juste le fond. Le filet suffit à séparer. */
.page--body-karate .audienceList {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  text-align: left;
}

@media (min-width: 768px) {
  .page--body-karate .audienceList {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--spacing-10);
  }
}

.page--body-karate .audienceItem {
  padding: var(--spacing-6) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.page--body-karate .audienceTitle {
  font-family: var(--font-family-heading);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-2);
  color: var(--surface);
}

.page--body-karate .audienceText {
  font-family: var(--font-family-base);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 42ch;
  text-wrap: pretty;
}

.page--body-karate .benefitsSection {
  margin-bottom: var(--spacing-16);
}

/* Liste de traits (voir DESIGN.md) : le mot porte seul. Quatre cartes
   identiques à icône rouge se suivaient ici, juste après trois autres cartes
   dans la section précédente. */
.page--body-karate .benefitsList {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
  .page--body-karate .benefitsList {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--spacing-16);
  }
}

.page--body-karate .benefitItem {
  padding: var(--spacing-6) 0;
  border-bottom: 1px solid var(--border);
}

.page--body-karate .benefitTitle {
  font-family: var(--font-family-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--primary);
  margin-bottom: var(--spacing-2);
}

.page--body-karate .benefitText {
  font-family: var(--font-family-base);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--foreground);
  max-width: 46ch;
  text-wrap: pretty;
}

.page--body-karate .comparisonSection {
  margin-bottom: var(--spacing-16);
}

.page--body-karate .comparisonTable {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
  border: 1px solid var(--border);
  background-color: var(--surface);
}

@media (min-width: 768px) {
  .page--body-karate .comparisonTable {
    grid-template-columns: 1fr 1fr;
  }
}

.page--body-karate .comparisonCol {
  padding: var(--spacing-8);
}

.page--body-karate .comparisonCol:first-child {
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .page--body-karate .comparisonCol:first-child {
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
}

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

.page--body-karate .comparisonIcon {
  color: var(--primary);
  width: 28px;
  height: 28px;
}

.page--body-karate .comparisonHeader h3 {
  font-family: var(--font-family-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

.page--body-karate .comparisonCol ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page--body-karate .comparisonCol li {
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--muted);
  color: var(--muted-foreground);
}

.page--body-karate .comparisonCol li:last-child {
  border-bottom: none;
}

.page--body-karate .sessionSection {
  margin-bottom: var(--spacing-16);
}

.page--body-karate .timelineContainer {
  position: relative;
  padding: var(--spacing-4) 0;
}

.page--body-karate .timelineContainer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  height: 100%;
  width: 2px;
  background-color: var(--border);
  z-index: 0;
}

.page--body-karate .timelineItem {
  position: relative;
  display: flex;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
  z-index: 1;
}

.page--body-karate .timelineItem:last-child {
  margin-bottom: 0;
}

.page--body-karate .timeBadge {
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 0.875rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  border: 4px solid var(--background);
}

.page--body-karate .timelineContent {
  padding-top: var(--spacing-2);
}

.page--body-karate .timelineContent h3 {
  font-family: var(--font-family-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-2);
}

.page--body-karate .timelineContent p {
  max-width: 70ch;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.page--body-karate .ctaSection {
  display: flex;
  justify-content: center;
}

/* Appel final : l'export affichait « Les cours ont lieu chaque semaine.
   Consultez le planning. » — une phrase qui renvoie le lecteur ailleurs au
   moment précis où il est prêt à agir. Le créneau réel est désormais là,
   lu depuis COURS, et le bouton mène au formulaire au lieu du planning. */
.page--body-karate .ctaCard {
  display: grid;
  gap: var(--spacing-8);
  align-items: center;
  background-color: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(var(--spacing-8), 5vw, var(--spacing-12));
  width: 100%;
}

@media (min-width: 900px) {
  .page--body-karate .ctaCard {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--spacing-12);
  }

  .page--body-karate .ctaButtons {
    grid-column: 1 / -1;
  }
}

.page--body-karate .ctaTexte h2 {
  font-family: var(--font-family-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary);
  margin: 0 0 var(--spacing-3);
  text-wrap: balance;
}

.page--body-karate .ctaText {
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--foreground);
  max-width: 52ch;
  margin: 0;
  text-wrap: pretty;
}

/* Même bloc horaire que la page Baby Karaté (voir DESIGN.md, « Bloc horaire »),
   en version courte : le lieu tient sur une ligne, pas besoin d'une liste. */
.page--body-karate .creneau {
  background-color: var(--foreground);
  color: var(--surface);
  padding: var(--spacing-6);
  border-radius: var(--radius);
}

.page--body-karate .creneauJour {
  font-family: var(--font-family-heading);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.page--body-karate .creneauHeure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin: var(--spacing-2) 0 0;
  font-family: var(--font-family-heading);
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.page--body-karate .creneauSeparateur {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

.page--body-karate .creneauLieu {
  margin: var(--spacing-4) 0 0;
  padding-top: var(--spacing-3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-family-base);
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.86);
}

.page--body-karate .ctaButtons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

@media (min-width: 640px) {
  .page--body-karate .ctaButtons {
    flex-direction: row;
  }
}