/* ==========================================================================
   Sections de la page d'accueil uniquement : Hero, NewsSection, ClassesSection,
   AchievementsSection, WorkshopsSection, ContactSection (bandeau teaser).
   Source : _floot-source/components/{Hero,NewsSection,ClassesSection,
   AchievementsSection,WorkshopsSection,ContactSection}.module.css.

   Scoping : chaque section a un id unique déjà présent dans le TSX d'origine
   (#news, #classes, #workshops, #contact) réutilisé comme racine de scope ;
   Hero et AchievementsSection (sans id, un seul exemplaire par page) reçoivent
   une classe dédiée (.c-hero, .c-achievements). Nécessaire : les cinq
   sections déclarent toutes des classes génériques identiques (.section,
   .container, .title, .card...) avec des styles très différents.
   ========================================================================== */

/* ---- Hero (components/Hero.module.css) ---- */
.c-hero.hero {
  position: relative;
  height: 90vh;
  min-height: 600px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--foreground);
}

.c-hero .backgroundImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/assets/img/hero-dojo.webp');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Le bloc de titre est centré (max-width 600px) et déborde donc largement
   au-delà de 50 % de la largeur : avec le dégradé d'origine (0,4 à 65 %),
   le « é » blanc de « Karaté » tombait sur le kimono blanc éclairé de la
   photo et disparaissait. Le voile est maintenu à 0,8 jusqu'aux deux tiers,
   là où le texte s'arrête, puis s'ouvre sur la photo. */
.c-hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(10, 15, 30, 0.88) 0%,
    rgba(10, 15, 30, 0.84) 35%,
    rgba(10, 15, 30, 0.72) 60%,
    rgba(10, 15, 30, 0.3) 85%,
    rgba(10, 15, 30, 0.12) 100%
  );
  z-index: 1;
}

.c-hero .content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  padding: 0 var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.c-hero .subtitle {
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--spacing-6);
  border-left: none;
  padding-left: 0;
}

.c-hero .title {
  font-family: var(--font-family-heading);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--surface);
  margin-bottom: var(--spacing-6);
}

.c-hero .highlight {
  color: var(--accent);
}

.c-hero .description {
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: var(--spacing-8);
  max-width: 480px;
}

.c-hero .actions {
  display: flex;
  gap: var(--spacing-4);
}

/* Aplat en --accent-lisible : sous du texte blanc, --accent plafonne à
   4,16:1, sous le seuil de 4,5:1 pour un libellé de 16 px. */
.c-hero .ctaButton.btn {
  background-color: var(--accent-lisible);
  border-color: var(--accent-lisible);
  color: var(--accent-foreground);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
}

.c-hero .ctaButton.btn:hover {
  background-color: color-mix(in srgb, var(--accent-lisible), black 10%);
}

.c-hero .scrollIndicator {
  position: absolute;
  bottom: var(--spacing-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  /* Descente puis retour, sans rebond : le rebond élastique d'origine
     (paliers 40 % / 60 %) contredit le parti pris sec du système. */
  animation: heroDerive 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  color: var(--surface);
}

.c-hero .scrollIcon {
  width: 2rem;
  height: 2rem;
  opacity: 0.7;
}

@keyframes heroDerive {
  0%, 100% {
    transform: translateY(0) translateX(-50%);
    opacity: 0.55;
  }
  50% {
    transform: translateY(8px) translateX(-50%);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .c-hero.hero {
    height: auto;
    min-height: 100vh;
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
  }

  .c-hero .title {
    font-size: 2.5rem;
  }

  .c-hero .content {
    flex-direction: column;
    gap: var(--spacing-8);
  }
}

/* ---- NewsSection (components/NewsSection.module.css) — #news ---- */
#news.section {
  padding: var(--spacing-16) 0;
  background-color: var(--background);
}

#news .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

#news .header {
  margin-bottom: var(--spacing-10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#news .title {
  font-family: var(--font-family-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--spacing-4);
}

#news .divider {
  width: 60px;
  height: 4px;
  background-color: var(--primary);
}

#news .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-8);
}

#news .card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  padding: var(--spacing-6);
  transition: transform var(--animation-duration-normal), box-shadow var(--animation-duration-normal);
  display: flex;
  flex-direction: column;
  height: 100%;
}

#news .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

#news .cardHeader {
  margin-bottom: var(--spacing-4);
}

#news .dateBadge.bdg {
  font-family: var(--font-family-heading);
  font-size: 0.75rem;
  gap: var(--spacing-2);
}

#news .dateIcon {
  margin-right: var(--spacing-1);
}

#news .cardTitle {
  font-family: var(--font-family-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: var(--spacing-4);
  line-height: 1.4;
}

#news .cardContent {
  font-family: var(--font-family-base);
  color: var(--muted-foreground);
  line-height: 1.6;
  flex-grow: 1;
}

#news .errorState,
#news .emptyState {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12);
  background-color: var(--muted);
  color: var(--muted-foreground);
  text-align: center;
}

#news .errorIcon {
  margin-bottom: var(--spacing-4);
  color: var(--error);
}

/* ---- ClassesSection (components/ClassesSection.module.css) — #classes ---- */
#classes.section {
  padding: var(--spacing-8) 0;
  background-color: var(--sidebar);
}

@media (min-width: 768px) {
  #classes.section {
    padding: var(--spacing-16) 0;
  }
}

#classes .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

/* Aligné à gauche comme #news et #workshops : l'export centrait cette seule
   section, si bien que trois en-têtes de même structure avaient deux
   traitements différents sur la même page. */
#classes .header {
  margin-bottom: var(--spacing-6);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 768px) {
  #classes .header {
    margin-bottom: var(--spacing-12);
  }
}

#classes .title {
  font-family: var(--font-family-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--spacing-2);
}

@media (min-width: 768px) {
  #classes .title {
    font-size: 2.5rem;
  }
}

#classes .subtitle {
  font-family: var(--font-family-base);
  color: var(--muted-foreground);
  font-size: 1.1rem;
  margin-bottom: var(--spacing-4);
  max-width: 600px;
}

#classes .divider {
  width: 60px;
  height: 4px;
  background-color: var(--primary);
}

#classes .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 640px) {
  #classes .grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  #classes .grid {
    gap: var(--spacing-8);
  }
}

#classes .card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform var(--animation-duration-normal);
  position: relative;
  overflow: hidden;
}

#classes .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: var(--primary);
  opacity: 0;
  transition: opacity var(--animation-duration-normal);
}

#classes .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

#classes .card:hover::before {
  opacity: 1;
}

#classes .cardTop {
  padding: var(--spacing-4);
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  #classes .cardTop {
    padding: var(--spacing-6);
  }
}

#classes .badge.bdg {
  margin-bottom: var(--spacing-4);
  /* .cardTop est un conteneur flex en colonne : sans align-self, le badge
     inline-flex est étiré sur toute la largeur de la carte par le stretch
     par défaut. */
  align-self: flex-start;
}

#classes .cardTitle {
  font-family: var(--font-family-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: var(--spacing-3);
}

@media (min-width: 768px) {
  #classes .cardTitle {
    font-size: 1.5rem;
  }
}

/* Hors export Floot : les cartes de cours qui disposent d'une page dédiée
   (Baby Karaté, Body Karaté) rendent leur titre cliquable. Soulignement au
   survol et au focus pour que l'affordance ne repose pas sur la seule
   couleur, anneau de focus repris du système (voir .btn.button:focus-visible). */
#classes .cardLink {
  color: inherit;
  text-decoration: none;
}

#classes .cardLink:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

#classes .cardLink:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--primary);
}

#classes .description {
  font-family: var(--font-family-base);
  color: var(--muted-foreground);
  line-height: 1.6;
}

#classes .scheduleHighlight {
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 85%, transparent) 100%);
  color: var(--primary-foreground);
  padding: var(--spacing-3) var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

@media (min-width: 768px) {
  #classes .scheduleHighlight {
    padding: var(--spacing-8) var(--spacing-6);
    gap: var(--spacing-3);
  }
}

#classes .scheduleHeader {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: inherit;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (min-width: 768px) {
  #classes .scheduleHeader {
    gap: var(--spacing-3);
    font-size: 0.9rem;
  }
}

#classes .schedule {
  font-family: var(--font-family-heading);
  color: var(--primary-foreground);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

@media (min-width: 768px) {
  #classes .schedule {
    font-size: 1.5rem;
  }
}

#classes .errorState,
#classes .emptyState {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12);
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  text-align: center;
}

#classes .errorIcon {
  margin-bottom: var(--spacing-4);
  color: var(--error);
}

/* ---- AchievementsSection (components/AchievementsSection.module.css) ---- */
@layer base {
  .c-achievements.section {
    width: 100%;
    padding: var(--spacing-16) 0;
    background-color: var(--background);
  }

  .c-achievements .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    align-items: center;
  }

  .c-achievements .imageWrapper {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
  }

  .c-achievements .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.15) saturate(0.85) brightness(1.05);
    transition: filter var(--animation-duration-normal) ease;
  }

  .c-achievements .imageWrapper:hover .image {
    filter: contrast(1.2) saturate(0.9) brightness(1.08);
  }

  .c-achievements .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .c-achievements .textGroup {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
  }

  .c-achievements .heading {
    font-family: var(--font-family-heading);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
    letter-spacing: -0.02em;
  }

  .c-achievements .description {
    font-family: var(--font-family-base);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--foreground);
    max-width: 90%;
  }

  /* 1,25rem en graisse 600 reste sous le seuil « grand texte » (18,66 px
     gras ou 24 px) : c'est du texte courant au sens WCAG, donc 4,5:1
     requis. --accent y plafonne à 3,98:1. */
  /* Capitales retirées : dans ce système, elles signalent une fonction
     (navigation, étiquette, titre de page intérieure), jamais une emphase.
     Une phrase de 31 caractères entièrement capitalisée au milieu du corps
     de texte se lit plus lentement et sonne comme un slogan.
     ⚠️ La formule elle-même (« Excellence. Esprit. Communauté. ») reste à
     revoir avec le club : elle n'apprend rien au visiteur, alors que le
     paragraphe juste au-dessus, lui, raconte quelque chose de réel. */
  .c-achievements .highlight {
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-lisible);
    letter-spacing: 0.02em;
    margin-top: var(--spacing-4);
  }

  @media (max-width: 768px) {
    .c-achievements .container {
      grid-template-columns: 1fr;
      gap: var(--spacing-12);
      padding: 0 var(--spacing-4);
    }

    .c-achievements .heading {
      font-size: 2.25rem;
    }

    .c-achievements .description {
      font-size: 1rem;
      max-width: 100%;
    }

    .c-achievements .highlight {
      font-size: 1.125rem;
    }

    .c-achievements .imageWrapper {
      max-width: 100%;
    }
  }

  @media (max-width: 480px) {
    .c-achievements.section {
      padding: var(--spacing-12) 0;
    }

    .c-achievements .heading {
      font-size: 1.75rem;
    }

    .c-achievements .description {
      font-size: 0.9375rem;
      line-height: 1.5;
    }

    .c-achievements .highlight {
      font-size: 1rem;
    }

    .c-achievements .textGroup {
      gap: var(--spacing-6);
    }
  }
}

/* ---- WorkshopsSection (components/WorkshopsSection.module.css) — #workshops ---- */
#workshops.section {
  padding: var(--spacing-16) 0;
  background-color: var(--background);
}

/* 1200px comme les cinq autres sections : à 1000px, cette seule section
   décrochait de 100px vers l'intérieur, une rupture d'alignement visible à
   l'œil sur la même page. */
#workshops .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

#workshops .header {
  margin-bottom: var(--spacing-10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#workshops .title {
  font-family: var(--font-family-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--spacing-4);
}

#workshops .divider {
  width: 60px;
  height: 4px;
  background-color: var(--primary);
}

#workshops .list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

#workshops .item {
  display: flex;
  background-color: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--animation-duration-normal);
}

#workshops .item:hover {
  transform: translateX(8px);
  border-color: var(--primary);
}

#workshops .dateBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  background-color: var(--primary);
  color: var(--primary-foreground);
  padding: var(--spacing-4);
  flex-shrink: 0;
}

#workshops .dateDay {
  font-family: var(--font-family-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

#workshops .dateMonth {
  font-family: var(--font-family-heading);
  font-size: 1rem;
  text-transform: uppercase;
  margin-top: var(--spacing-1);
}

#workshops .itemContent {
  padding: var(--spacing-6);
  flex-grow: 1;
}

#workshops .itemTitle {
  font-family: var(--font-family-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: var(--spacing-2);
}

/* Le passage du conteneur de 1000 à 1200 px portait ces lignes à 125
   caractères. Plafond à 70 caractères : au-delà, l'œil perd le début de la
   ligne suivante. */
#workshops .itemDescription {
  font-family: var(--font-family-base);
  color: var(--muted-foreground);
  margin-bottom: var(--spacing-4);
  line-height: 1.6;
  max-width: 70ch;
}

#workshops .meta {
  display: flex;
  gap: var(--spacing-6);
  flex-wrap: wrap;
}

#workshops .metaItem {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: 0.875rem;
  color: var(--primary);
  font-weight: 500;
}

#workshops .errorState,
#workshops .emptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12);
  background-color: var(--muted);
  color: var(--muted-foreground);
  text-align: center;
}

#workshops .errorIcon {
  margin-bottom: var(--spacing-4);
  color: var(--error);
}

@media (max-width: 600px) {
  #workshops .item {
    flex-direction: column;
  }

  #workshops .dateBox {
    width: 100%;
    flex-direction: row;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
  }

  #workshops .dateDay {
    font-size: 1.5rem;
  }

  #workshops .dateMonth {
    margin-top: 0;
  }
}

/* ---- ContactSection, bandeau teaser (components/ContactSection.module.css) — #contact ---- */
#contact.section {
  padding: var(--spacing-16) 0;
  background-color: var(--primary);
  color: var(--primary-foreground);
}

#contact .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

#contact .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-12);
}

@media (min-width: 900px) {
  #contact .grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

#contact .info {
  display: flex;
  flex-direction: column;
}

#contact .title {
  font-family: var(--font-family-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--surface);
  margin-bottom: var(--spacing-4);
}

#contact .divider {
  width: 60px;
  height: 4px;
  background-color: var(--surface);
  margin-bottom: var(--spacing-8);
}

#contact .description {
  font-family: var(--font-family-base);
  font-size: 1.1rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--primary-foreground), transparent 20%);
  margin-bottom: 2.5rem;
  max-width: 500px;
}

#contact .contactDetails {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-bottom: 2.5rem;
}

#contact .contactItem {
  display: flex;
  gap: var(--spacing-4);
  align-items: flex-start;
}

#contact .iconBox {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  flex-shrink: 0;
}

#contact .itemTitle {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-1);
  color: var(--surface);
}

#contact .cta {
  margin-top: var(--spacing-4);
  padding: var(--spacing-2) 0;
}

/* Second appel à l'action de la page : passé en contour blanc sur l'aplat
   indigo. En rouge, il faisait de la page d'accueil un écran à deux actions
   principales concurrentes — le rouge ne signale plus rien quand il apparaît
   deux fois. Il reste maintenant exclusif au bouton du héros.
   Les deux ombres floues colorées de l'export (0 4px 14px / 0 6px 20px)
   sont supprimées : le système n'utilise que des ombres nettes et décalées. */
#contact .cta .ctaButton.btn {
  background-color: transparent;
  color: var(--surface);
  border-color: var(--surface);
  font-size: 1.125rem;
  padding: 0 var(--spacing-8);
  height: 3.5rem;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--animation-duration-fast) ease,
    color var(--animation-duration-fast) ease;
}

#contact .cta .ctaButton.btn:hover,
#contact .cta .ctaButton.btn:active {
  background-color: var(--surface);
  color: var(--primary);
  border-color: var(--surface);
}

#contact .cta .ctaButton.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--primary),
    0 0 0 4px var(--surface);
}

#contact .ctaIcon {
  margin-left: var(--spacing-2);
  transition: transform var(--animation-duration-normal) ease;
}

#contact .cta .ctaButton.btn:hover .ctaIcon {
  transform: translateX(4px);
}

#contact .mapContainer {
  height: 400px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

#contact .mapImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}