/* --------------------------------------------------------------------------
   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;
  /* 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: 85svh;
  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);
}

/* La photo passe en couleur au survol — un geste que le tactile ne peut pas
   faire. Sur téléphone, la seule image du club restait donc en noir et blanc,
   définitivement. Or c'est là que se joue l'essentiel : PRODUCT.md décrit
   comme public premier « un parent qui compare deux ou trois clubs, souvent le
   soir, souvent sur téléphone », qu'il faut « rassurer sur le sérieux de
   l'encadrement ». Une photo d'enfants à l'entraînement, en couleur, y
   contribue plus qu'un aplat gris.

   On sert donc directement l'état révélé aux appareils sans survol. Le noir et
   blanc reste le repos sur bureau, où le passage à la couleur garde tout son
   sens : c'est une récompense au geste, pas une couche d'identité — la charte
   du club tient à la palette, à la typographie et aux angles vifs, pas à la
   désaturation d'une photographie. (Adaptation mobile du 11 août 2026.) */
@media (hover: none) {
  .page--accueil .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);
  }

  /* Les encarts chiffrés cessent d'être carrés.

     aspect-ratio:1 a du sens tant que les deux tuiles tiennent côte à côte
     dans une colonne étroite — la composition d'origine, où elles font
     contrepoids au bloc de texte : ~250px de côté pour ~77px de contenu, la
     tuile se lit comme une tuile.

     Dès 1024px, .aboutGrid s'empile et .aboutVisual occupe toute la largeur.
     Le carré suit mécaniquement la largeur disponible et devient absurde :
     465x465 à 1024, 553x553 à 600, et jusqu'à 721x721 à 768 — soit 8% de la
     surface réellement occupée par le chiffre et son libellé. Ce n'est plus du
     vide comme matériau, c'est du vide par accident.

     La règle .statBox:nth-child(3) juste en dessous montre que le problème
     avait déjà été vu et corrigé pour le TROISIÈME encart seulement (voir aussi
     aspect-ratio:auto dans la media query 768px). Les deux premiers avaient été
     oubliés : on termine le travail plutôt que d'ajouter un cas particulier.

     La hauteur redevient celle du contenu, remplissage ~55% au lieu de 8 à 18%.
     Au-dessus de 1024px, rien ne change. (Signalé à l'usage, 11 août 2026.) */
  .page--accueil .statBox {
    aspect-ratio: auto;
  }

  .page--accueil .statBox:nth-child(3) {
    /* Keep horizontal on tablet if space permits, otherwise stack */
    flex-direction: row;
    /* Le troisième encart a son propre aspect-ratio (2/1) dans la règle de
       base, de spécificité supérieure : la remise à auto ci-dessus ne
       l'atteint pas. Sans cette ligne, il restait le seul à enfler — 945x473
       à 1024px de large, 9% de remplissage. */
    aspect-ratio: auto;
  }

  .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 */
  }
}