/*
 * Feuille commune du site — ce que toutes les pages partagent.
 *
 * Chaque page garde, dans son propre <style>, ce qui n'appartient qu'à elle :
 * le bandeau parallaxe de l'accueil, les tarifs, la galerie, la frise des
 * événements. Le <link> vers ce fichier est posé AVANT ce <style> : la page
 * l'emporte donc naturellement sur le commun, sans !important.
 *
 * Les jetons ci-dessous font foi pour DESIGN.md. Une couleur, une taille, une
 * respiration se changent ici et nulle part ailleurs.
 *
 * Les valeurs de base sont celles des pages intérieures. L'accueil, dont le
 * bandeau est plus grand, redéclare les quelques jetons qui le concernent.
 */

/* ═══ Jetons ════════════════════════════════════════════════════════════ */
:root {
  --bg: #f7f4f1;
  --bg-soft: #f3efe9;
  --panel-glass: rgba(255, 255, 255, 0.35);
  --card-bg: rgba(255, 255, 255, 0.20);
  --page-glass: rgba(255, 255, 255, 0.12);
  --ink: #171512;
  --muted: #5c564f;
  --muted-strong: #342f2a;
  --line: rgba(23, 21, 18, 0.10);
  --dark: #171512;
  --footer-bg: #2f2118;
  --footer-text: rgba(255, 255, 255, 0.84);
  --footer-link: #e8c9a8;
  --accent: #b87a3e;
  --accent-strong: #8c5a2a;
  /* Teinte prélevée sur l'anneau du blason — oklch(0.546 0.239 261) —
     déclinée en trois paliers de CLARTÉ croissante. Le public d'un cours
     est une donnée ordinale (du plus jeune au plus âgé), pas une liste de
     catégories : un dégradé d'une seule teinte le dit mieux que trois
     couleurs. Les paliers restent distincts en vision déficiente, où seule
     la clarté subsiste. Le cuivre garde l'action, le bleu prend le public. */
  --pub-jeune-fond: oklch(0.945 0.021 261);
  --pub-jeune-encre: oklch(0.42 0.085 261);
  --pub-enfant-fond: oklch(0.885 0.043 261);
  --pub-enfant-encre: oklch(0.38 0.095 261);
  --pub-ado-fond: oklch(0.815 0.065 261);
  --pub-ado-encre: oklch(0.33 0.085 261);

  --hero-overlay-strong: rgba(10, 9, 8, 0.76);
  --hero-overlay-soft: rgba(10, 9, 8, 0.20);

  /* Motion system — keep identical across pages */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-hover: 220ms;
  --card-lift: -2px;
  --card-shadow: 0 12px 24px rgba(18, 14, 11, 0.03);
  --card-shadow-hover: 0 18px 30px rgba(18, 14, 11, 0.06);
  --card-border-hover: rgba(184, 122, 62, 0.32);

  /* Système typographique — identique sur chaque page, sauf --t-display
     que l'accueil pousse plus haut : son bandeau est plus grand. Chaque
     jeton nomme un rôle, jamais une valeur. */
  --t-display: clamp(2.6rem, 4vw, 4.5rem);
  --t-titre: clamp(1.75rem, 1.45rem + 0.9vw, 2.1rem);
  --t-sous-titre: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
  --t-corps: 1rem;
  --t-meta: 0.95rem;
  --t-notule: 0.9rem;
  --t-titre-carte: 1.35rem;
  --t-etiquette: 0.72rem;
  --t-nav: 0.78rem;
  --lh-prose: 1.7;
  --lh-carte: 1.6;
  --ls-display: -0.045em;
  --ls-titre: -0.035em;
  --ls-sous-titre: -0.03em;
  --ls-etiquette: 0.12em;

  /* Échelle d'espacement — base 4 px, nommée par rôle plutôt que par
     valeur. --marge-page est LE bord vertical du site : barre, bandeau et
     contenu s'y alignent, au lieu des trois bords qu'ils avaient.
     En rem et non en pixels : l'air suit le texte quand la base change,
     et la page grandit dans ses proportions au lieu de se resserrer. */
  --marge-page: 3rem;
  --saut-region: 4.5rem;
  --saut-parent: 2rem;
  --saut-titre: 1rem;
  --gouttiere: 1.25rem;
  --mesure: 68ch;
}

/* ═══ Fondations ════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

/* La base de tout le système : les jetons de taille comme ceux d'espacement
   se comptent en rem, donc cette seule ligne les emmène tous.
   En pourcentage et non en pixels, pour multiplier le réglage du visiteur
   plutôt que le lui confisquer : qui a choisi 20 px garde son confort. */
html {
  font-size: 106.25%; /* 17 px quand le navigateur est réglé par défaut */
}

html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
}

body {
  min-height: 100vh;
}

.font-heading {
  font-family: "Playfair Display", serif;
}

/* ═══ Apparition au défilement ══════════════════════════════════════════ */
/* ─── Encadrés : langage de mouvement partagé (identique sur chaque page) ───
   L'entrée anime `opacity` et `translate`, le survol anime `transform` :
   deux propriétés distinctes, donc une carte survolée pendant son entrée
   ne se retrouve jamais à animer la même valeur deux fois. */
.reveal {
  transition:
    transform var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) ease,
    box-shadow var(--dur-hover) ease;
}

@keyframes cardReveal {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}

@supports (animation-timeline: view()) {
  .reveal {
    animation-name: cardReveal;
    animation-fill-mode: both;
    animation-timing-function: var(--ease-out);
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  .reveal:nth-child(2) {
    animation-range: entry 5% entry 40%;
  }

  .reveal:nth-child(3) {
    animation-range: entry 10% entry 45%;
  }

  .reveal:nth-child(4) {
    animation-range: entry 15% entry 50%;
  }
}

/* ═══ Page et navigation ════════════════════════════════════════════════ */
.page {
  width: min(1200px, calc(100vw - 40px));
  margin: 0 auto;
  background: var(--page-glass);
  border: 1px solid rgba(23, 21, 18, 0.03);
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 9px var(--marge-page);
  background: rgba(249, 246, 242, 0.96);
  border-bottom: 1px solid rgba(23, 21, 18, 0.08);
  box-shadow: 0 1px 0 rgba(23, 21, 18, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-nav .brand a,
.site-nav .nav-links a {
  color: var(--ink);
  text-decoration: none;
}

/* Rembourrage vertical : la zone tapable atteint 24 px sans que rien
   ne bouge à l'écran, la barre reprenant l'espace sur son propre padding. */
.site-nav .brand a {
  display: inline-block;
  padding: 4px 0;
  font-size: var(--t-nav);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px 16px;
}

.nav-links a {
  display: inline-block;
  padding: 4px 0;
  font-size: var(--t-nav);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.78;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  transform: translateY(-1px);
}

/* ═══ Bandeau ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: 320px;
  background-image:
    linear-gradient(90deg, var(--hero-overlay-strong), var(--hero-overlay-soft)),
    url("./medias/hero-pages.jpg");
  background-size: cover;
  /* Bandeau plus court que celui de l'accueil : le cadrage descend pour
     garder le groupe entier, qui occupe le bas de la photo. À 30 % on ne
     voyait que la haie et les mains levées, coupées au ras du bord. */
  background-position: center 68%;
  overflow: hidden;
}

.hero-inner {
  position: absolute;
  left: var(--marge-page);
  bottom: 38px;
  z-index: 1;
  max-width: 670px;
  color: white;
  animation: heroReveal 700ms var(--ease-out) both;
}

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero h1 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: var(--t-display);
  line-height: 0.96;
  letter-spacing: var(--ls-display);
  font-weight: 700;
}

.hero p {
  margin: 18px 0 0;
  max-width: 520px;
  font-size: var(--t-corps);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}

/* ═══ Corps de page ═════════════════════════════════════════════════════ */
main {
  padding: 52px var(--marge-page) 64px;
}

section {
  margin-top: var(--saut-region);
}

section:first-of-type {
  margin-top: 0;
}

h2 {
  margin: 0 0 var(--saut-titre);
  font-family: "Playfair Display", serif;
  font-size: var(--t-titre);
  line-height: 1.04;
  letter-spacing: var(--ls-titre);
  font-weight: 600;
  color: var(--ink);
}

/* ═══ Pastilles de public ═══════════════════════════════════════════════ */
/* Une pastille, deux pages : le même public porte la même teinte dans les
   horaires et dans les tarifs, ce qui laisse relier « lundi 17h30 » à
   « Baby Aïkido, 60 € » d'un coup d'œil. Le mot reste toujours écrit :
   la couleur double l'information, elle ne la porte jamais seule. */
.public {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pub-fond);
  color: var(--pub-encre);
  font-weight: 500;
  white-space: nowrap;
}

.public--jeune {
  --pub-fond: var(--pub-jeune-fond);
  --pub-encre: var(--pub-jeune-encre);
}

.public--enfant {
  --pub-fond: var(--pub-enfant-fond);
  --pub-encre: var(--pub-enfant-encre);
}

.public--ado {
  --pub-fond: var(--pub-ado-fond);
  --pub-encre: var(--pub-ado-encre);
}

/* ═══ Cartes d'événement ════════════════════════════════════════════════ */
.events {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gouttiere);
}

/* La carte est désormais un lien : tout le bloc est cliquable, pas
   seulement son titre — une cible de 265 px de large plutôt que 180. */
.event-card {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 20px 18px;
  box-shadow: var(--card-shadow);
}

/* Deux classes, pour l'emporter sur `.event-card p` : à égalité de
   poids ce dernier gagnait, et la date sortait en corps de texte gris. */
.event-card .event-date {
  margin: 0 0 8px;
  color: var(--accent-strong);
  font-size: var(--t-etiquette);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.event-card h3 {
  margin: 0 0 10px;
  font-size: var(--t-sous-titre);
  line-height: 1.1;
  letter-spacing: var(--ls-sous-titre);
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color: var(--ink);
}

.event-suite {
  display: inline-block;
  margin-top: 12px;
  color: var(--accent-strong);
  font-size: var(--t-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  font-weight: 700;
}

.event-card:hover .event-suite,
.event-card:focus-visible .event-suite {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.event-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.event-card p {
  margin: 0;
  color: var(--muted);
  line-height: var(--lh-carte);
  font-size: var(--t-corps);
}

/* ═══ Bouton d'action ═══════════════════════════════════════════════════ */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a86c34 0%, #7c4e23 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--t-etiquette);
  box-shadow: 0 16px 26px rgba(140, 90, 42, 0.22);
  transition:
    transform var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) ease,
    filter var(--dur-hover) ease;
}

.cta-button:hover,
.cta-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 28px rgba(140, 90, 42, 0.26);
  filter: saturate(1.08);
}

/* L'action principale de la page n'avait aucun anneau de focus : au
   clavier, rien ne signalait où l'on se trouvait. */
.cta-button:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

/* ═══ Pied de page ══════════════════════════════════════════════════════ */
/* Un brun cuivré profond plutôt qu'un noir : le pied garde son rôle de
   point final, mais dans la famille chaude du site. C'est aussi le fond
   qui sert le mieux le blason — l'intérieur crème s'éclaire et l'anneau
   bleu s'y pose, là où le cuivre franc le faisait jurer. */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--footer-bg);
  color: var(--footer-text);
  text-align: center;
  padding: 40px 22px 44px;
  font-size: var(--t-meta);
}

/* Le blason signe le site. Il porte déjà le nom du club, et la ligne de
   contact le répète juste dessous : décoratif ici, donc alt vide. */
.footer-blason {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.footer-ligne {
  margin: 0;
  font-weight: 500;
}

/* Les coordonnées sont des paires intitulé/valeur : une liste de
   définitions le dit au navigateur comme au lecteur d'écran. */
.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 24px 30px;
  width: 100%;
  max-width: 920px;
  margin: 6px 0 4px;
  text-align: left;
}

.contact dt {
  margin: 0 0 8px;
  font-size: var(--t-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--footer-link);
}

/* Sans min-width, une colonne de grille refuse de descendre sous la
   largeur de son contenu : l'adresse courriel débordait sur la voisine. */
.contact > div {
  min-width: 0;
}

/* Texte clair sur fond sombre : on compense sur les trois axes —
   un cran d'interligne, un souffle d'approche, une graisse en plus. */
.contact dd {
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.68;
  letter-spacing: 0.006em;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.contact dd + dd {
  margin-top: 3px;
}

.contact a {
  display: inline-block;
  padding: 2px 0;
  color: var(--footer-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(232, 201, 168, 0.4);
  text-underline-offset: 3px;
}

.contact a:hover,
.contact a:focus-visible {
  color: #fff;
  text-decoration-color: currentColor;
}

footer a {
  color: var(--footer-link);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

footer a:hover,
footer a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ═══ Adaptations ═══════════════════════════════════════════════════════ */
@media (max-width: 840px) {
  :root {
    --marge-page: 1.25rem;
    --saut-region: 3.25rem;
    --saut-parent: 1.625rem;
  }

  .page {
    width: calc(100vw - 18px);
  }

  .site-nav {
    padding: 8px var(--marge-page);
  }

  /* La taille du texte baisse dès ce palier : le rembourrage doit suivre
     ici, et non seulement à 520 px, pour tenir les 24 px de cible. */
  .site-nav .brand a,
  .nav-links a {
    padding: 5px 0;
    letter-spacing: 0.1em;
  }

  .hero {
    height: 260px;
  }

  .hero-inner {
    left: var(--marge-page);
    right: var(--marge-page);
    bottom: 20px;
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  :root {
    --marge-page: 1rem;
    --t-nav: 0.62rem;
    --t-display: clamp(2.3rem, 12vw, 3.1rem);
  }

  .footer-blason {
    width: 86px;
    height: 86px;
  }

  .site-nav {
    padding: 6px var(--marge-page);
  }

  .nav-links {
    gap: 8px 10px;
  }

  .hero {
    height: 230px;
  }

  .hero p {
    font-size: var(--t-meta);
  }
}

@media print {
  .hero-inner,
  .reveal {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-inner,
  .reveal {
    animation: none !important;
  }
}