/* Source : _floot-source/pages/baby-karate.module.css
   Corps de page refondu (voir l'en-tête de pages/baby-karate.php) : l'aplat
   gris à cercles décoratifs et les quatre cartes identiques à icône ronde
   colorée ont disparu. Les couleurs écrites en dur hors du système
   (#F59E0B, #10B981) avec elles. */

.page--baby-karate.pageContainer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background);
}

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

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

/* ---- Intro + créneau -------------------------------------------------------
   Découpe 60/40 plutôt que 50/50 : le texte porte le propos, le créneau est
   un objet compact qu'on lit d'un coup d'œil. Une grille égale donnerait deux
   blocs de même poids et aucune hiérarchie. */
.page--baby-karate .topSection {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-10);
  margin-bottom: var(--spacing-16);
  align-items: start;
}

@media (min-width: 768px) {
  .page--baby-karate .topSection {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--spacing-16);
  }
}

.page--baby-karate .introCard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.page--baby-karate .introTitle {
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
  text-wrap: balance;
}

.page--baby-karate .introText {
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  color: var(--foreground);
  line-height: 1.7;
  max-width: 60ch;
  text-wrap: pretty;
}

/* ---- Le créneau, en grand --------------------------------------------------
   L'information que le parent est venu chercher. L'export l'enfermait dans un
   encadré blanc bordé de 2px, à la même échelle que le reste ; ici c'est un
   aplat d'encre et l'heure est le second plus gros caractère de la page. */
.page--baby-karate .creneau {
  background-color: var(--foreground);
  color: var(--surface);
  padding: var(--spacing-8) var(--spacing-6);
  border-radius: var(--radius);
}

.page--baby-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);
}

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

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

.page--baby-karate .creneauDetails {
  margin-top: var(--spacing-8);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.page--baby-karate .creneauLigne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-4);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.page--baby-karate .creneauLigne:last-child {
  border-bottom: none;
}

.page--baby-karate .creneauDetails dt {
  font-family: var(--font-family-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.page--baby-karate .creneauDetails dd {
  font-family: var(--font-family-base);
  font-size: 1.0625rem;
  text-align: right;
}

/* ---- Bénéfices : liste typographique --------------------------------------
   Quatre cartes identiques icône + titre + texte, c'est le gabarit que
   PRODUCT.md rejette explicitement. Ici, le mot porte seul : graisse 900 en
   grande taille, description en mincho, filet de séparation. Aucune bordure
   de carte, aucune icône, aucune couleur décorative. */
.page--baby-karate .benefitsSection {
  margin-bottom: var(--spacing-16);
}

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

.page--baby-karate .benefitsList {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
}

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

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

.page--baby-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--baby-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;
}

/* ---- Appel final -----------------------------------------------------------
   Aplat d'encre pleine largeur du conteneur : c'est le point final de la page,
   et il doit peser autant que le créneau. L'export en faisait un bloc gris
   clair centré, du même poids visuel que tout le reste. */
.page--baby-karate .infoSection {
  background-color: var(--primary);
  color: var(--surface);
  padding: clamp(var(--spacing-8), 5vw, var(--spacing-12)) clamp(var(--spacing-6), 4vw, var(--spacing-10));
  border-radius: var(--radius);
}

/* Bandeau d'action : texte à gauche, boutons à droite sur une même ligne.
   Un bloc pleine largeur avec un contenu plafonné à 46ch laissait 60 % de
   vide à droite — un déséquilibre, pas une asymétrie.

   Une seule rangée, deux colonnes : le texte est groupé dans .infoTexte
   plutôt que réparti sur deux rangées de grille. Un élément couvrant
   plusieurs rangées auto voit sa hauteur redistribuée par le navigateur, ce
   qui gonflait la rangée du titre à 112px pour un titre de 46px et décollait
   le paragraphe. */
.page--baby-karate .infoContent {
  display: grid;
  gap: var(--spacing-8);
  align-items: center;
}

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

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

.page--baby-karate .infoContent h2 {
  font-family: var(--font-family-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--surface);
  text-wrap: balance;
}

.page--baby-karate .infoContent p {
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  max-width: 52ch;
  text-wrap: pretty;
}

.page--baby-karate .actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  align-items: stretch;
  margin-top: var(--spacing-4);
}

@media (min-width: 640px) {
  .page--baby-karate .actions {
    flex-direction: row;
    align-items: center;
  }
}

/* Au-delà de 900 px, les actions passent dans la seconde colonne et occupent
   toute la hauteur du bloc : elles cessent d'être un appendice sous le texte
   pour devenir le contrepoids de droite. */
@media (min-width: 900px) {
  .page--baby-karate .actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
  }
}

/* Sur l'aplat indigo, le bouton principal s'inverse : blanc plein, texte
   indigo. Le bouton indigo par défaut y serait invisible. */
.page--baby-karate .infoSection .btn.primary {
  background-color: var(--surface);
  border-color: var(--surface);
  color: var(--primary);
}

.page--baby-karate .infoSection .btn.primary:hover,
.page--baby-karate .infoSection .btn.primary:active {
  background-color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
  color: var(--primary);
}

.page--baby-karate .infoSection .btn.outline {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--surface);
}

.page--baby-karate .infoSection .btn.outline:hover,
.page--baby-karate .infoSection .btn.outline:active {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--surface);
  color: var(--surface);
}

.page--baby-karate .infoSection .btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--primary),
    0 0 0 4px var(--surface);
}