/* --------------------------------------------------------------------------
   Page Accueil — CSS exact porté depuis _floot-export/pages/_index.module.css
   Chaque sélecteur de règle est préfixé par .page--accueil : les CSS
   Modules d'origine sont cloisonnés par le bundler, une feuille classique
   ne l'est pas — plusieurs pages du site déclarent des noms de classes
   identiques (.hero, .container, .sectionTitle…). Le préfixe évite toute
   contamination croisée. Valeurs recopiées à l'identique (aucun
   arrondi/aucune réinterprétation). @media non préfixé (ce n'est pas un
   sélecteur de règle) ; aucun @keyframes dans ce fichier source.
   -------------------------------------------------------------------------- */

.page--accueil .container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

/* Hero Section */
.page--accueil .hero {
  position: relative;
  min-height: 85vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 var(--spacing-8);
  overflow: hidden;
  background-color: var(--background);
}

.page--accueil .heroContent {
  z-index: var(--z-content);
  padding-right: var(--spacing-8);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  align-items: flex-start;
}

.page--accueil .heroBadge {
  font-family: var(--font-family-monospace);
  letter-spacing: 0.1em;
}

.page--accueil .heroTitle {
  font-family: var(--font-family-heading);
  /* Adjusted clamp for better mobile sizing */
  font-size: clamp(3.25rem, 6vw + 1rem, 8rem);
  line-height: 0.9;
  font-weight: 700;
  color: var(--foreground);
  text-transform: uppercase;
  margin: 0;
  word-break: break-word; /* Prevent overflow on very small screens */
}

.page--accueil .highlight {
  color: var(--primary);
  position: relative;
  display: inline-block;
}

.page--accueil .highlight::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: -10px;
  width: calc(100% + 20px);
  height: 20px;
  background-color: color-mix(in srgb, var(--secondary) 30%, transparent);
  z-index: -1;
}

.page--accueil .heroSubtitle {
  font-family: var(--font-family-base);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted-foreground);
  max-width: 600px;
}

.page--accueil .heroActions {
  display: flex;
  gap: var(--spacing-4);
  margin-top: var(--spacing-4);
  flex-wrap: wrap; /* Allow wrapping on small screens */
}

.page--accueil .heroImageWrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  z-index: 0;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

.page--accueil .heroImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.1);
  transition: filter 0.5s ease;
}

.page--accueil .heroImageWrapper:hover .heroImage {
  filter: grayscale(0%) contrast(1);
}

.page--accueil .heroOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--background) 0%,
    transparent 20%
  );
  pointer-events: none;
}

/* Section Separator */
.page--accueil .sectionSeparator {
  max-width: 1200px;
  margin: 0 auto;
}

/* About Section */
.page--accueil .about {
  padding: 0 var(--spacing-8);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.page--accueil .aboutGrid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--spacing-12);
  align-items: center;
}

.page--accueil .aboutText {
  display: flex;
  flex-direction: column;
}

.page--accueil .sectionTitle {
  font-family: var(--font-family-heading);
  font-size: clamp(2.5rem, 5vw, 3rem);
  text-transform: uppercase;
  margin-bottom: var(--spacing-6);
  position: relative;
  display: inline-block;
  align-self: flex-start;
}

.page--accueil .sectionTitle::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 40px;
  height: 4px;
  background-color: var(--secondary);
}

.page--accueil .aboutDescription {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--foreground);
  margin-bottom: var(--spacing-8);
}

.page--accueil .valuesList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.page--accueil .valueItem {
  display: flex;
  gap: var(--spacing-4);
  align-items: flex-start;
}

.page--accueil .valueIcon {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 4px;
  width: 24px;
  height: 24px;
}

.page--accueil .valueItem h3 {
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  margin: 0 0 var(--spacing-1) 0;
  text-transform: uppercase;
}

.page--accueil .valueItem p {
  margin: 0;
  color: var(--muted-foreground);
}

.page--accueil .aboutVisual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

.page--accueil .statBox {
  background-color: var(--surface);
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--border);
  aspect-ratio: 1;
  transition: transform 0.3s ease;
}

.page--accueil .statBox:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.page--accueil .statBox:nth-child(3) {
  grid-column: span 2;
  aspect-ratio: 2/1;
  flex-direction: row;
  gap: var(--spacing-4);
}

.page--accueil .statNumber {
  font-family: var(--font-family-heading);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.page--accueil .statLabel {
  font-family: var(--font-family-monospace);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Courses Section */
.page--accueil .courses {
  padding: 0 var(--spacing-8);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.page--accueil .coursesHeader {
  margin-bottom: var(--spacing-10);
  text-align: center;
}

.page--accueil .sectionSubtitle {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  margin-top: var(--spacing-2);
}

.page--accueil .courseGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-6);
}

.page--accueil .courseCard {
  background-color: var(--card);
  border: 1px solid var(--border);
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  transition: all 0.3s ease;
  position: relative;
}

.page--accueil .courseCard:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.page--accueil .courseHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--spacing-4);
}

.page--accueil .courseHeader h3 {
  font-family: var(--font-family-heading);
  font-size: 1.75rem;
  margin: 0;
  color: var(--foreground);
}

.page--accueil .courseCard p {
  color: var(--muted-foreground);
  line-height: 1.6;
  flex-grow: 1;
}

.page--accueil .courseFooter {
  margin-top: auto;
  padding-top: var(--spacing-4);
}

.page--accueil .courseLink {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: gap 0.2s ease;
  /* Improve touch target */
  min-height: 44px;
}

.page--accueil .courseLink:hover {
  gap: var(--spacing-3);
  text-decoration: underline;
}

/* Features Section */
.page--accueil .features {
  background-color: var(--surface);
  padding: var(--spacing-16) var(--spacing-8);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.page--accueil .featuresContent {
  max-width: 1400px;
  margin: 0 auto;
}

.page--accueil .featureList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--spacing-8);
  margin-top: var(--spacing-10);
}

.page--accueil .featureItem {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.page--accueil .featureIcon {
  width: 40px;
  height: 40px;
  color: var(--secondary);
  margin-bottom: var(--spacing-2);
}

.page--accueil .featureItem h3 {
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  margin: 0;
  text-transform: uppercase;
}

.page--accueil .featureItem p {
  color: var(--muted-foreground);
  line-height: 1.5;
  margin: 0;
}

/* CTA Section */
.page--accueil .cta {
  padding: 0 var(--spacing-8);
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.page--accueil .ctaContent {
  background-color: var(--primary);
  color: var(--primary-foreground);
  padding: var(--spacing-12) var(--spacing-8);
  /* Brutalist shape */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    0% 100%
  );
  position: relative;
}

.page--accueil .ctaContent::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid var(--voile-clair-moyen);
  pointer-events: none;
}

.page--accueil .ctaGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
  align-items: center;
}

.page--accueil .ctaText {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  text-align: left; /* Default to left alignment inside grid */
}

.page--accueil .ctaActions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* L'override qui vivait ici — .page--accueil .ctaContent .bouton--secondaire,
   texte et bordure repassés en var(--primary-foreground) — est remplacé par
   la classe .bouton--inverse posée sur le lien lui-même (voir
   assets/css/base.css et pages/accueil.php).

   Motif : le même problème s'est reproduit deux fois ailleurs, et chaque fois
   avec un mécanisme différent — un style="" en ligne sur pages/horaires.php,
   et rien du tout sur la bannière Baby Karaté de pages/tarifs.php, où le
   bouton est resté illisible à 1,43:1 jusqu'à l'audit du 6 août 2026. Un
   correctif scopé à une page ne protège que cette page ; c'est la définition
   même d'un manque de contrat sur un composant partagé par sept pages. La
   variante vit désormais avec le composant, et les trois emplacements
   l'utilisent. */

.page--accueil .ctaContent h2 {
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0;
  text-transform: uppercase;
}

.page--accueil .ctaContent p {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  margin: 0;
  opacity: 0.9;
}

.page--accueil .ctaImage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page--accueil .ctaImageImg {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;
  border: 2px solid var(--voile-clair-marque);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .page--accueil .hero {
    grid-template-columns: 1fr;
    padding-top: var(--spacing-8); /* Reduced top padding */
    min-height: auto;
    padding-bottom: var(--spacing-12);
  }

  .page--accueil .heroContent {
    padding-right: 0;
    z-index: 2;
  }

  /* Make image responsive and stack better */
  .page--accueil .heroImageWrapper {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    clip-path: none;
    margin-top: var(--spacing-8);
    order: -1; /* Image first on mobile if preferred, or remove to keep text first */
    margin-bottom: var(--spacing-8);
    left: auto;
    right: auto;
  }

  /* Reset order for text-first preference on tablet/mobile but image visually secondary */
  .page--accueil .hero {
    display: flex;
    flex-direction: column;
  }

  .page--accueil .heroImageWrapper {
    order: 0; /* Text is naturally first in DOM, image second */
    margin-top: var(--spacing-8);
    margin-bottom: 0;
  }

  .page--accueil .heroOverlay {
    background: linear-gradient(
      0deg,
      var(--background) 0%,
      transparent 50%
    );
  }

  .page--accueil .aboutGrid {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }

  .page--accueil .statBox:nth-child(3) {
    /* Keep horizontal on tablet if space permits, otherwise stack */
    flex-direction: row;
  }

  .page--accueil .ctaGrid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .page--accueil .ctaText {
    text-align: center;
    align-items: center;
  }

  .page--accueil .ctaActions {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .page--accueil .container {
    gap: var(--spacing-12); /* Reduce gap between sections */
    padding-bottom: var(--spacing-12);
  }

  /* Reduce side padding on mobile */
  .page--accueil .hero, .page--accueil .about, .page--accueil .courses, .page--accueil .features, .page--accueil .cta {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  .page--accueil .heroTitle {
    /* Font size handled by clamp() above */
    margin-bottom: var(--spacing-2);
  }

  .page--accueil .sectionTitle {
    /* Font size handled by clamp() above */
    margin-bottom: var(--spacing-4);
  }

  .page--accueil .heroActions {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-3);
  }

  .page--accueil .heroBtn {
    width: 100%; /* Full width buttons on mobile */
  }

  .page--accueil .aboutVisual {
    grid-template-columns: 1fr; /* Stack stats vertically */
  }

  .page--accueil .statBox:nth-child(3) {
    grid-column: span 1;
    aspect-ratio: auto;
    padding: var(--spacing-6);
    flex-direction: column;
  }

  .page--accueil .coursesHeader {
    margin-bottom: var(--spacing-6);
  }

  .page--accueil .courseGrid {
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: var(--spacing-4);
  }

  /* Adjust grid gap for features */
  .page--accueil .featureList {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
    margin-top: var(--spacing-6);
  }

  .page--accueil .features {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
  }

  .page--accueil .ctaContent {
    padding: var(--spacing-8) var(--spacing-4);
    /* Simpler shape on mobile if needed, or keep brutalist */
  }

  .page--accueil .ctaBtn {
    width: 100%;
  }

  .page--accueil .ctaImage {
    max-width: 100%;
    margin-top: var(--spacing-4);
  }

  .page--accueil .ctaImageImg {
    max-width: 100%;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .page--accueil .heroTitle {
    font-size: 2.75rem; /* Ensure readable on very small screens */
  }

  .page--accueil .heroImageWrapper {
    aspect-ratio: 4/3; /* Slightly taller image on phone */
  }
}