/* ============================================================
   BOBY CLUB by VXS — Design System
   ------------------------------------------------------------
   Mobile-first.
   Breakpoints :
     ≥ 640px  (sm)  large mobile / small tablet
     ≥ 768px  (md)  tablet
     ≥ 1024px (lg)  desktop  → bascule nav desktop
     ≥ 1280px (xl)  large desktop
   ============================================================ */


/* ============================================================
   1. TOKENS — variables CSS
   ------------------------------------------------------------
   Palette V4 — Temple & Bordeaux
   Tons chauds, terreux. Fini le noir froid et l'or jaune.
   Inspirée des temples thaï, des shorts traditionnels, du teck.
   Les anciens noms de variables (--noir-ring, --or-muay,
   --blanc-casse, etc.) sont préservés en alias et pointent vers
   les nouvelles valeurs.
   ============================================================ */
:root {
  /* === Tokens principaux V4 === */
  --fond-principal: #1C1410;   /* brun chocolat très foncé, fond global */
  --fond-alterne:   #2A1F18;   /* brun terre cuite, sections alternées */
  --bordeaux:       #8B2E2E;   /* bordeaux profond, accent CTA principal */
  --bordeaux-clair: #A8443D;   /* hover du bordeaux */
  --cuivre:         #C97B3F;   /* cuivre brûlé / terre de Sienne */
  --cuivre-clair:   #DB9560;   /* hover cuivre */
  --ivoire:         #F0E6D6;   /* texte principal, blanc cassé chaud */
  --taupe:          #9C8B7A;   /* texte secondaire, gris chaud */
  --separateur:     #3D2E24;   /* lignes / bordures discrètes */

  /* === Alias rétro-compat (anciens noms → nouvelles valeurs) === */
  /* Bruns / fonds */
  --noir-ring:    #1C1410;   /* alias = --fond-principal */
  --noir-temple:  #2A1F18;   /* alias = --fond-alterne */
  --noir-profond: #2A1F18;
  --noir-cuir:    #2A1F18;

  /* Rouges (bordeaux) */
  --rouge-sang:   #8B2E2E;   /* alias = --bordeaux */
  --rouge-sombre: #6B1F1F;
  --rouge-rituel: #8B2E2E;   /* alias = --bordeaux */

  /* Ors (cuivre) */
  --or-mongkol:   #C97B3F;   /* alias = --cuivre */
  --or-muay:      #C97B3F;
  --or-temple:    #A8693A;   /* cuivre vieilli */
  --or-clair:     #DB9560;   /* alias = --cuivre-clair */
  --or-profond:   #A8693A;

  /* Ivoires / gris */
  --blanc-casse:  #F0E6D6;   /* alias = --ivoire */
  --gris-cendre:  #9C8B7A;   /* alias = --taupe */
  --gris-sombre:  #3D2E24;   /* alias = --separateur */
  --gris-fumee:   #3D2E24;

  /* Gradient temple — hero & sections d'ambiance */
  --grad-temple:  radial-gradient(ellipse at center, #2A1F18 0%, #1C1410 100%);

  /* Typographie */
  --f-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --f-heading: "Oswald", "Arial Narrow", sans-serif;
  --f-num:     "Anton", "Bebas Neue", sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Échelle */
  --wrap:        1240px;
  --wrap-narrow: 880px;
  --gutter:      clamp(20px, 5vw, 48px);

  /* Transitions */
  --t-fast: .2s ease;
  --t-base: .3s ease;
  --t-slow: .6s cubic-bezier(.2,.7,.2,1);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@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;
  }
}

body {
  margin: 0;
  background: var(--noir-ring);
  color: var(--blanc-casse);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; color: var(--or-clair); }
small { font-size: .55em; vertical-align: super; color: var(--or-muay); }
::selection { background: var(--or-muay); color: var(--noir-ring); }


/* ============================================================
   3. ACCESSIBILITÉ
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--or-muay);
  color: var(--noir-ring);
  font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible {
  outline: 2px solid var(--or-muay);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ============================================================
   4. LAYOUT PRIMITIVES — wrap, section, ornement
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section {
  position: relative;
  padding: 64px 0;
}
.section-alt { background: var(--noir-profond); }

.section-header {
  max-width: 820px;
  margin: 0 auto 40px;
  text-align: center;
}
.section-header-left { text-align: left; margin-inline: 0; }

.ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  padding: 32px 0;
  color: var(--or-muay);
}
.ornament-line {
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--or-muay) 50%, transparent);
  opacity: .55;
}


/* ============================================================
   5. TYPOGRAPHY — titres, eyebrows
   ============================================================ */
.section-title {
  font-family: var(--f-display);
  font-size: 2.4rem;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: .4em;
}
.section-intro {
  color: var(--blanc-casse);
  opacity: .72;
  font-size: 1rem;
  max-width: 640px;
  margin: 0 auto;
}
.section-header-left .section-intro { margin: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin: 0 0 1.2em;
}
.eyebrow-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--or-muay);
  transform: rotate(45deg);
}

.gold { color: var(--or-muay); }


/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 2px solid var(--or-muay);
  color: var(--or-muay);
  background: transparent;
  transition: background var(--t-base), color var(--t-base),
              transform var(--t-fast), border-color var(--t-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn:hover, .btn:focus-visible {
  background: var(--or-muay);
  color: var(--noir-ring);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--or-muay); color: var(--noir-ring); }
.btn-primary:hover, .btn-primary:focus-visible {
  background: transparent;
  color: var(--or-muay);
}

.btn-ghost {
  border-color: rgba(240, 230, 214, .22);
  color: var(--blanc-casse);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--blanc-casse);
  color: var(--noir-ring);
  border-color: var(--blanc-casse);
}

.btn-header { padding: 12px 22px; font-size: .74rem; }
.btn-lg     { padding: 20px 36px; font-size: .92rem; }


/* ============================================================
   7. HEADER & NAV (mobile par défaut, desktop ≥ 1024)
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 14px 0;
  background: rgba(28, 20, 16, .55);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid rgba(201, 123, 63, .08);
  transition: background var(--t-base), padding var(--t-base), border-color var(--t-base);
}
.site-header.scrolled {
  padding: 10px 0;
  background: rgba(28, 20, 16, .92);
  border-bottom-color: rgba(201, 123, 63, .18);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--or-muay);
  transition: opacity var(--t-base);
}
.brand:hover { opacity: .85; }
.brand-text  { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--f-display);
  font-size: 1.4rem;
  letter-spacing: .08em;
  color: var(--blanc-casse);
  text-transform: uppercase;
}
.brand-sub {
  font-family: var(--f-body);
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin-top: 3px;
}

/* Desktop nav (caché par défaut, visible ≥ 1024) */
.nav-desktop { display: none; }

/* Hamburger (visible par défaut, caché ≥ 1024) */
.nav-toggle {
  display: block;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: var(--blanc-casse);
  transition: transform var(--t-base), opacity var(--t-base), top var(--t-base);
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 25px; }
.nav-toggle[aria-expanded="true"] span { background: var(--or-muay); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Bouton header (caché par défaut, visible ≥ 1024) */
.btn-header { display: none; }

/* Mobile nav overlay fullscreen */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--noir-ring);
  padding: 100px var(--gutter) 40px;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t-slow), opacity var(--t-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-mobile.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-mobile nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}
.nav-mobile a {
  font-family: var(--f-display);
  font-size: 1.8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blanc-casse);
  transition: color var(--t-base);
}
.nav-mobile a:hover, .nav-mobile a.is-active { color: var(--or-muay); }
.nav-mobile-cta {
  margin-top: 12px;
  font-family: var(--f-body) !important;
  font-size: .82rem !important;
}


/* ============================================================
   8. HERO — full screen (home)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 110px 0 60px;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 25% 40%, rgba(139, 46, 46, .22), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(201, 123, 63, .10), transparent 60%),
    linear-gradient(180deg, #0F0A07 0%, #1C1410 45%, #2A1F18 100%);
}
.hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, transparent 49.9%, rgba(201, 123, 63, .035) 50%, transparent 50.1%),
    linear-gradient(0deg,  transparent 49.9%, rgba(201, 123, 63, .020) 50%, transparent 50.1%);
  background-size: 80px 80px, 80px 80px;
  opacity: .5;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 10% auto auto 50%;
  width: clamp(240px, 44vw, 560px);
  height: clamp(240px, 44vw, 560px);
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgba(201, 123, 63, .08);
  pointer-events: none;
}
.hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>");
  opacity: .22;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28, 20, 16, .4) 0%, rgba(28, 20, 16, .85) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.hero-title {
  font-family: var(--f-display);
  font-size: 2.8rem;
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 .5em;
}
.hero-title span {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  animation: heroIn .9s cubic-bezier(.2, .7, .2, 1) forwards;
}
.hero-title span:nth-child(1) { animation-delay: .15s; }
.hero-title span:nth-child(2) { animation-delay: .30s; }
.hero-title span:nth-child(3) { animation-delay: .45s; }

@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

.hero-lead {
  max-width: 620px;
  font-size: 1rem;
  color: var(--blanc-casse);
  opacity: 0;
  margin: 0 0 1.6em;
  animation: heroIn 1s ease .6s forwards;
}
.hero-lead.has-opacity { opacity: .85; }

.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 0;
  opacity: 0;
  animation: heroIn 1s ease .8s forwards;
}
.hero-ctas .btn { width: 100%; }

.hero-scroll { display: none; } /* visible ≥ 768 seulement */


/* --- Page Hero (inner pages) --- */
.page-hero {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  padding: 120px 0 50px;
  overflow: hidden;
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero-eyebrow {
  font-family: var(--f-body);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin: 0 0 1em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-hero h1 {
  font-family: var(--f-display);
  font-size: 2.6rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.page-hero p {
  margin-top: .8em;
  max-width: 560px;
  color: var(--blanc-casse);
  opacity: .75;
  font-size: 1rem;
}


/* ============================================================
   9. STATS (chiffres clés)
   ============================================================ */
.section-stats {
  background: linear-gradient(180deg, var(--noir-profond) 0%, var(--noir-ring) 100%);
  padding: 56px 0;
  border-block: 1px solid rgba(201, 123, 63, .1);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: center;
}
.stat {
  padding: 16px 8px;
  border-bottom: 1px solid rgba(201, 123, 63, .14);
}
.stat:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.stat-num {
  display: block;
  font-family: var(--f-num);
  font-size: 3rem;
  line-height: 1;
  color: var(--or-muay);
  margin-bottom: 10px;
  letter-spacing: .02em;
}
.stat-num small { font-size: 40%; color: var(--or-muay); vertical-align: super; }
.stat-label {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blanc-casse);
  opacity: .72;
}


/* ============================================================
   10. DISCIPLINES PREVIEW (home — 2 cartes)
   ============================================================ */
.disciplines-preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.disc-preview {
  position: relative;
  overflow: hidden;
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63, .14);
  transition: border-color var(--t-base), transform var(--t-base);
  display: block;
  color: inherit;
}
.disc-preview:hover {
  border-color: var(--or-muay);
  transform: translateY(-4px);
}
.disc-preview-visual {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(201, 123, 63, .12), transparent 60%),
    radial-gradient(ellipse at 80% 40%, rgba(139, 46, 46, .14), transparent 55%),
    linear-gradient(160deg, #2A1F18 0%, #1C1410 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.disc-preview-visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 24px, rgba(201, 123, 63, .035) 24px 25px);
}
.disc-preview-visual::after {
  content: "";
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border: 1px solid rgba(201, 123, 63, .18);
  transform: rotate(45deg);
}
.disc-preview-label {
  position: relative;
  z-index: 2;
  font-family: var(--f-display);
  font-size: 2rem;
  color: var(--or-muay);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  padding: 0 16px;
}
.disc-preview-label small {
  display: block;
  font-size: .4em;
  letter-spacing: .28em;
  color: var(--blanc-casse);
  margin-top: 10px;
  opacity: .75;
}
.disc-preview-body { padding: 26px; }
.disc-preview-body h3 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .6em;
}
.disc-preview-body p {
  font-size: .94rem;
  opacity: .78;
  margin-bottom: 1.2em;
  line-height: 1.7;
}
.disc-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or-muay);
  border-bottom: 1px solid rgba(201, 123, 63, .35);
  padding-bottom: 4px;
  transition: gap var(--t-base), border-color var(--t-base);
}
.disc-preview:hover .disc-preview-link {
  gap: 14px;
  border-bottom-color: var(--or-muay);
}


/* ============================================================
   11. POUR QUI (home — 4 cartes)
   ============================================================ */
.pour-qui-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.pour-qui-card {
  position: relative;
  padding: 30px 24px 26px;
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63, .14);
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
}
.pour-qui-card:hover {
  border-color: var(--or-muay);
  background: rgba(201, 123, 63, .04);
  transform: translateY(-4px);
}
.pour-qui-icon {
  color: var(--or-muay);
  margin-bottom: 6px;
  display: block;
}
.pour-qui-card h3 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pour-qui-card h3 small {
  display: block;
  font-size: .45em;
  letter-spacing: .22em;
  color: var(--or-muay);
  margin-top: 4px;
}
.pour-qui-card p {
  font-size: .9rem;
  line-height: 1.65;
  opacity: .78;
  margin: 0;
  flex: 1;
}
.pour-qui-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin-top: 8px;
  transition: gap var(--t-base);
}
.pour-qui-card:hover .pour-qui-link { gap: 12px; }


/* ============================================================
   12. PALMARÈS TEASER (home)
   ============================================================ */
.palmares-teaser-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 40px;
}
.teaser {
  padding: 30px 24px;
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63, .14);
  border-top: 2px solid var(--or-muay);
  transition: background var(--t-base), transform var(--t-base);
}
.teaser:hover {
  background: rgba(201, 123, 63, .04);
  transform: translateY(-4px);
}
.teaser-label {
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin: 0 0 12px;
}
.teaser h3 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .4em;
}
.teaser p {
  font-size: .92rem;
  line-height: 1.7;
  opacity: .78;
  margin: 0;
}
.palmares-teaser-cta { text-align: center; }


/* ============================================================
   13. CTA FINAL (toutes pages)
   ============================================================ */
.cta-final {
  position: relative;
  padding: 64px 0;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201, 123, 63, .1), transparent 60%),
    linear-gradient(180deg, var(--noir-ring), #0F0A07);
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 50% 50% auto auto;
  width: 320px;
  aspect-ratio: 1;
  transform: translate(50%, -50%) rotate(45deg);
  border: 1px solid rgba(201, 123, 63, .1);
  pointer-events: none;
}
.cta-final .wrap { position: relative; z-index: 2; }
.cta-final h2 {
  font-family: var(--f-display);
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1;
  margin-bottom: .4em;
}
.cta-final p {
  max-width: 540px;
  margin: 0 auto 1.6em;
  opacity: .78;
  font-size: 1rem;
}


/* ============================================================
   14. CLUB PAGE — grid-2, prose, valeurs, coachs, engagement
   ============================================================ */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.grid-2 .section-title { text-align: left; }

.prose { font-size: 1rem; line-height: 1.8; opacity: .85; }
.prose p { margin-bottom: 1.4em; }
.prose .pull {
  margin: 1.4em 0;
  padding: 22px 26px;
  border-left: 2px solid var(--or-muay);
  background: rgba(201, 123, 63, .05);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--blanc-casse);
  opacity: 1;
}

/* Valeurs */
.valeurs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.valeur {
  padding: 32px 24px;
  border-top: 2px solid var(--or-muay);
  transition: background var(--t-base);
}
.valeur:hover { background: rgba(201, 123, 63, .03); }
.valeur-num {
  font-family: var(--f-display);
  font-size: .9rem;
  letter-spacing: .2em;
  color: var(--or-muay);
  margin-bottom: 14px;
  display: block;
}
.valeur h3 {
  font-family: var(--f-display);
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .6em;
}
.valeur p {
  font-size: .98rem;
  line-height: 1.75;
  opacity: .82;
  margin: 0;
}

/* Équipe */
.equipe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.coach {
  background: var(--noir-ring);
  border: 1px solid rgba(201, 123, 63, .14);
  transition: transform var(--t-base), border-color var(--t-base);
  overflow: hidden;
}
.coach:hover { transform: translateY(-4px); border-color: var(--or-muay); }
.coach-portrait {
  position: relative;
  aspect-ratio: 1;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201, 123, 63, .14), transparent 60%),
    linear-gradient(160deg, var(--noir-cuir) 0%, var(--noir-ring) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.coach-portrait::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 20px, rgba(201, 123, 63, .03) 20px 21px);
  opacity: .7;
}
.coach-initials {
  font-family: var(--f-display);
  font-size: 4rem;
  color: var(--or-muay);
  opacity: .85;
  letter-spacing: .05em;
  position: relative;
  z-index: 1;
}
.coach-frame {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(201, 123, 63, .3);
  pointer-events: none;
}
.coach-body { padding: 22px 22px 24px; }
.coach-role {
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin-bottom: 10px;
}
.coach-name {
  font-family: var(--f-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .6em;
}
.coach-body p {
  font-size: .92rem;
  line-height: 1.7;
  opacity: .8;
  margin: 0;
}

/* Engagement */
.engagement-block {
  padding: 32px 24px;
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63, .18);
  position: relative;
}
.engagement-block::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(201, 123, 63, .08);
  pointer-events: none;
}
.engagement-block h2 {
  font-family: var(--f-display);
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .6em;
}
.engagement-block p {
  font-size: 1rem;
  line-height: 1.8;
  opacity: .85;
  max-width: 720px;
}


/* ============================================================
   15. DISCIPLINES PAGE — discipline-block, équipement
   ============================================================ */
.discipline-block { padding: 56px 0; }
.discipline-block + .discipline-block { border-top: 1px solid rgba(201, 123, 63, .1); }
.discipline-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.discipline-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 520px;
  margin-inline: auto;
  background:
    radial-gradient(ellipse at 40% 60%, rgba(139, 46, 46, .18), transparent 55%),
    radial-gradient(ellipse at 70% 30%, rgba(201, 123, 63, .12), transparent 60%),
    linear-gradient(150deg, #2A1F18 0%, #1C1410 100%);
  overflow: hidden;
  border: 1px solid rgba(201, 123, 63, .2);
}
.discipline-visual::before {
  content: "";
  position: absolute; inset: 18px;
  border: 1px solid rgba(201, 123, 63, .15);
  pointer-events: none;
}
.discipline-visual::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 60%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(201, 123, 63, .25);
}
.discipline-visual-label {
  position: absolute;
  inset: auto 0 24px 0;
  text-align: center;
  font-family: var(--f-display);
  font-size: 1.2rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--or-muay);
  z-index: 2;
}

.discipline-body .eyebrow { margin-bottom: 1em; }
.discipline-body h2 {
  font-family: var(--f-display);
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
  margin-bottom: .5em;
}
.discipline-body h3 {
  font-family: var(--f-heading);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 1.4em 0 .5em;
  color: var(--or-muay);
}
.discipline-body p {
  font-size: 1rem;
  line-height: 1.8;
  opacity: .82;
  margin-bottom: 1em;
}
.discipline-body ul { list-style: none; padding: 0; margin: 1em 0 0; }
.discipline-body ul li {
  position: relative;
  padding: 10px 0 10px 26px;
  font-size: .96rem;
  opacity: .88;
  border-bottom: 1px dashed rgba(201, 123, 63, .15);
}
.discipline-body ul li:last-child { border-bottom: 0; }
.discipline-body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 17px;
  width: 8px; height: 8px;
  background: var(--or-muay);
  transform: rotate(45deg);
}

.equipement-block {
  background: var(--noir-profond);
  padding: 32px 24px;
  border: 1px solid rgba(201, 123, 63, .14);
}
.equipement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}
.equipement-item {
  padding: 18px 14px;
  text-align: center;
  background: var(--noir-ring);
  border: 1px solid rgba(201, 123, 63, .12);
}
.equipement-item h4 {
  font-family: var(--f-display);
  font-size: 1.1rem;
  letter-spacing: .04em;
  margin-bottom: 6px;
  color: var(--or-muay);
}
.equipement-item p { font-size: .82rem; line-height: 1.55; opacity: .78; margin: 0; }
.equipement-note {
  margin-top: 24px;
  padding: 16px 20px;
  background: rgba(201, 123, 63, .06);
  border-left: 2px solid var(--or-muay);
  font-size: .92rem;
  opacity: .9;
}


/* ============================================================
   16. COURS PAGE — planning, tarifs, premier cours
   ============================================================ */
.planning-notice {
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 18px 22px;
  background: rgba(139, 46, 46, .1);
  border: 1px solid rgba(139, 46, 46, .4);
  text-align: center;
  font-size: .94rem;
  line-height: 1.6;
}
.planning-notice strong { color: var(--or-muay); }
.planning-notice a { color: var(--or-muay); border-bottom: 1px solid var(--or-muay); }

.planning-wrap {
  overflow-x: auto;
  margin-bottom: 50px;
  border: 1px solid rgba(201, 123, 63, .15);
  background: var(--noir-profond);
}
.planning {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-family: var(--f-body);
}
.planning th, .planning td {
  padding: 16px 12px;
  text-align: center;
  border: 1px solid rgba(201, 123, 63, .1);
  font-size: .88rem;
}
.planning thead th {
  background: var(--noir-ring);
  color: var(--or-muay);
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: .14em;
  font-weight: 400;
  padding: 18px 12px;
  text-transform: uppercase;
}
.planning tbody th {
  background: var(--noir-ring);
  color: var(--blanc-casse);
  font-weight: 600;
  text-align: left;
  padding-left: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8rem;
}
.planning tbody td { color: var(--blanc-casse); opacity: .78; }
.planning tbody td.has-course {
  color: var(--or-muay);
  font-weight: 600;
  background: rgba(201, 123, 63, .05);
}
.planning tbody tr:hover { background: rgba(201, 123, 63, .02); }

/* Tarifs */
.tarifs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 50px;
}
.tarif-card {
  padding: 32px 24px;
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63, .14);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--t-base), border-color var(--t-base);
}
.tarif-card:hover { transform: translateY(-4px); border-color: var(--or-muay); }
.tarif-card--featured {
  background: rgba(201, 123, 63, .06);
  border-color: var(--or-muay);
  position: relative;
}
.tarif-card--featured::before {
  content: "Le plus populaire";
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: var(--or-muay);
  color: var(--noir-ring);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tarif-label {
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or-muay);
}
.tarif-title {
  font-family: var(--f-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tarif-price {
  font-family: var(--f-num);
  font-size: 2.8rem;
  line-height: 1;
  color: var(--or-muay);
  margin: 6px 0;
}
.tarif-price small {
  font-size: 28%;
  color: var(--blanc-casse);
  vertical-align: middle;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-left: 6px;
  opacity: .72;
}
.tarif-card ul { margin: 12px 0 18px; text-align: left; }
.tarif-card li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: .9rem;
  line-height: 1.55;
  opacity: .85;
  border-bottom: 1px dashed rgba(201, 123, 63, .1);
}
.tarif-card li:last-child { border-bottom: 0; }
.tarif-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 15px;
  width: 6px; height: 6px;
  background: var(--or-muay);
  transform: rotate(45deg);
}
.tarif-placeholder { margin-top: 8px; font-size: .76rem; opacity: .55; font-style: italic; }

/* Variante "tarif à venir" — pas de chiffre, juste un label */
.tarif-price-tbc {
  font-family: var(--f-display);
  font-size: 1.6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--or-mongkol);
}
.tarif-price-tbc small {
  display: block;
  font-size: 50%;
  letter-spacing: .2em;
  margin-top: 6px;
  margin-left: 0;
  color: var(--ivoire);
  opacity: .6;
}

.tarif-cta-note {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 16px;
  font-size: .92rem;
  opacity: .78;
}
.tarif-cta-wrap { text-align: center; }

/* Premier cours encart or */
.premier-cours {
  position: relative;
  margin-top: 50px;
  padding: 32px 24px;
  background: var(--or-muay);
  color: var(--noir-ring);
  overflow: hidden;
}
.premier-cours::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(28, 20, 16, .2);
  pointer-events: none;
}
.premier-cours-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
.premier-cours .eyebrow { color: var(--noir-ring); opacity: .7; }
.premier-cours .eyebrow-dot { background: var(--noir-ring); }
.premier-cours h2 {
  font-family: var(--f-display);
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--noir-ring);
  margin-bottom: .4em;
}
.premier-cours p { color: var(--noir-ring); opacity: .85; font-size: .98rem; line-height: 1.75; margin: 0 0 1em; }
.premier-cours ul { margin: 1em 0 0; }
.premier-cours li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: .92rem;
  color: var(--noir-ring);
}
.premier-cours li::before {
  content: "";
  position: absolute;
  left: 0; top: 13px;
  width: 6px; height: 6px;
  background: var(--noir-ring);
  transform: rotate(45deg);
}
.premier-cours .btn {
  align-self: start;
  background: var(--noir-ring);
  color: var(--or-muay);
  border-color: var(--noir-ring);
}
.premier-cours .btn:hover, .premier-cours .btn:focus-visible {
  background: transparent;
  color: var(--noir-ring);
  border-color: var(--noir-ring);
}


/* ============================================================
   17. PALMARÈS PAGE — feature, champions, événements
   ============================================================ */
.section-palmares { position: relative; overflow: hidden; }
.section-palmares::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(139, 46, 46, .12), transparent 60%),
    radial-gradient(ellipse at 90% 0%, rgba(201, 123, 63, .08), transparent 60%);
  pointer-events: none;
}
.section-palmares > .wrap { position: relative; }

.palmares-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 50px;
}

.palmares-card-big {
  position: relative;
  padding: 32px 24px;
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63, .28);
  overflow: hidden;
}
.palmares-card-big::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(201, 123, 63, .12);
  pointer-events: none;
}
.palmares-card-label {
  display: inline-block;
  padding: 8px 14px;
  background: var(--or-muay);
  color: var(--noir-ring);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.palmares-name {
  font-family: var(--f-display);
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: .4em;
  line-height: 1;
}
.palmares-surname {
  display: block;
  font-family: var(--f-heading);
  font-weight: 500;
  font-size: .5em;
  letter-spacing: .1em;
  color: var(--or-muay);
  font-style: italic;
  margin-top: 6px;
}
.palmares-achievements {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 22px 0;
}
.palmares-achievements li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--blanc-casse);
  opacity: .9;
}
.palmares-achievements strong { color: var(--or-muay); font-weight: 600; }
.ach-icon { color: var(--or-muay); font-size: .7em; flex-shrink: 0; }
.palmares-quote {
  margin-top: 20px;
  padding: 16px 20px;
  border-left: 2px solid var(--or-muay);
  font-style: italic;
  font-size: .94rem;
  opacity: .82;
  background: rgba(201, 123, 63, .04);
}

.palmares-side { display: flex; flex-direction: column; gap: 16px; }
.palmares-mini {
  padding: 28px 24px;
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63, .14);
  border-top: 2px solid var(--or-muay);
}
.palmares-mini h4 {
  font-family: var(--f-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .4em;
}
.palmares-mini-sub {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin-bottom: 12px;
}
.palmares-mini p {
  font-size: .94rem;
  line-height: 1.7;
  opacity: .82;
  margin: 0;
}

/* Petits champions */
.champions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 48px;
}
.champion-card {
  padding: 24px 20px;
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63, .14);
  border-top: 2px solid var(--or-muay);
  transition: background var(--t-base), transform var(--t-base);
}
.champion-card:hover { background: rgba(201, 123, 63, .04); transform: translateY(-3px); }
.champion-card .champion-level {
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin-bottom: 10px;
}
.champion-card h4 {
  font-family: var(--f-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.champion-card p { font-size: .86rem; opacity: .78; margin: 0; line-height: 1.55; }

/* Événements */
.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.event-card {
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63, .14);
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base);
}
.event-card:hover { border-color: var(--or-muay); transform: translateY(-4px); }
.event-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(139, 46, 46, .18), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(201, 123, 63, .1), transparent 55%),
    linear-gradient(150deg, #2A1F18 0%, #1C1410 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 20px, rgba(201, 123, 63, .035) 20px 21px);
}
.event-visual::after {
  content: "";
  position: absolute;
  width: 40%;
  aspect-ratio: 1;
  border: 1px solid rgba(201, 123, 63, .2);
  transform: rotate(45deg);
}
.event-visual-label {
  position: relative;
  z-index: 2;
  font-family: var(--f-display);
  font-size: 1.6rem;
  letter-spacing: .08em;
  color: var(--or-muay);
  text-align: center;
  text-transform: uppercase;
  padding: 0 16px;
  line-height: 1.1;
}
.event-body { padding: 24px; }
.event-sub {
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin-bottom: .6em;
}
.event-body h3 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .6em;
}
.event-body p { font-size: .94rem; line-height: 1.7; opacity: .8; margin: 0; }


/* ============================================================
   18. CONTACT PAGE — form, infos, map
   ============================================================ */
.contact-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

/* Form */
.contact-form {
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63, .14);
  padding: 28px 22px;
}
.contact-form h2 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.field label {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or-muay);
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--noir-ring);
  border: 1px solid rgba(201, 123, 63, .2);
  color: var(--blanc-casse);
  font-family: var(--f-body);
  font-size: 1rem;
  padding: 14px 16px;
  transition: border-color var(--t-base), background var(--t-base);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--or-muay);
  background: #1C1410;
}
.field textarea { min-height: 120px; resize: vertical; font-family: var(--f-body); }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23C9A961' d='M0 0h12L6 8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.field-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.field-2 .field { margin-bottom: 0; }
.form-submit { margin-top: 8px; width: 100%; }
.hp-field { position: absolute; left: -9999px; }

.form-success {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: rgba(201, 123, 63, .12);
  border: 1px solid var(--or-muay);
  color: var(--or-clair);
}
.form-success strong { color: var(--or-muay); }

/* Infos column */
.contact-infos { display: flex; flex-direction: column; gap: 16px; }
.contact-block {
  padding: 22px 24px;
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63, .12);
  transition: border-color var(--t-base), transform var(--t-base);
}
.contact-block:hover { border-color: var(--or-muay); transform: translateY(-3px); }
.contact-label {
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin-bottom: 10px;
}
.contact-value {
  font-family: var(--f-heading);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--blanc-casse);
  margin-bottom: 8px;
}
.contact-value a {
  border-bottom: 1px solid rgba(201, 123, 63, .3);
  transition: color var(--t-base), border-color var(--t-base);
  word-break: break-word;
}
.contact-value a:hover { color: var(--or-muay); border-bottom-color: var(--or-muay); }
.contact-link {
  color: var(--or-muay);
  border-bottom: 1px solid var(--or-muay);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.contact-sub { font-size: .82rem; color: var(--gris-cendre); margin: 4px 0 0; }

/* Map */
.map-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63, .2);
  overflow: hidden;
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(80%) contrast(0.95) brightness(0.9);
  transition: filter var(--t-slow);
}
.map-wrap:hover iframe { filter: grayscale(40%) contrast(1) brightness(1); }


/* ============================================================
   19. FAB — bouton flottant téléphone
   ============================================================ */
.fab-call {
  position: fixed;
  bottom: 18px; right: 18px;
  width: 54px; height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--or-muay);
  color: var(--noir-ring);
  border-radius: 50%;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .5),
    0 0 0 0 rgba(201, 123, 63, .4);
  z-index: 90;
  transition: transform var(--t-base), background var(--t-base), box-shadow var(--t-base);
  animation: fabPulse 2.5s ease-in-out infinite;
}
.fab-call:hover, .fab-call:focus-visible {
  transform: scale(1.08);
  background: var(--or-clair);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 12px rgba(201, 123, 63, .08);
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 0 rgba(201, 123, 63, .4); }
  50%      { box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 14px rgba(201, 123, 63, 0); }
}


/* ============================================================
   20. FOOTER — 3 colonnes
   ============================================================ */
.site-footer {
  background: #0F0A07;
  padding: 56px 0 24px;
  border-top: 1px solid rgba(201, 123, 63, .12);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-label {
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin: 0 0 12px;
  opacity: 1;
}
.footer-col a, .footer-col p {
  font-size: .9rem;
  color: var(--blanc-casse);
  opacity: .72;
  margin: 0;
  transition: color var(--t-base), opacity var(--t-base);
  line-height: 1.65;
}
.footer-col a { display: inline-block; }
.footer-col a:hover { color: var(--or-muay); opacity: 1; }

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(201, 123, 63, .08);
  font-size: .76rem;
  opacity: .6;
}
.footer-bottom p { margin: 0; }
.footer-bottom a {
  color: var(--or-muay);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base);
}
.footer-bottom a:hover { border-bottom-color: var(--or-muay); }


/* ============================================================
   21. REVEAL ON SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }


/* ============================================================
   ====================  RESPONSIVE  ===========================
   Mobile-first : les valeurs ci-dessus s'appliquent au mobile.
   Les breakpoints suivants ajoutent / élargissent.
   ============================================================ */


/* ============================================================
   ≥ 640px — Large mobile / small tablet
   ============================================================ */
@media (min-width: 640px) {

  .section { padding: 80px 0; }
  .section-header { margin-bottom: 56px; }
  .section-title { font-size: 3.2rem; }

  /* Hero */
  .hero { padding: 130px 0 70px; }
  .hero-title { font-size: 4.2rem; }
  .hero-lead { font-size: 1.1rem; margin-bottom: 1.8em; }
  .hero-ctas { flex-direction: row; flex-wrap: wrap; }
  .hero-ctas .btn { width: auto; }
  .hero-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--or-muay);
    font-size: .66rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    opacity: .75;
  }
  .hero-scroll-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, var(--or-muay), transparent);
    position: relative;
    overflow: hidden;
  }
  .hero-scroll-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--or-muay);
    animation: scrollLine 2.2s ease-in-out infinite;
  }
  @keyframes scrollLine {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100%);  }
  }

  /* Page hero */
  .page-hero { padding: 140px 0 60px; }
  .page-hero h1 { font-size: 3.4rem; }

  /* Stats : 4 cols */
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
  .stat {
    border-bottom: 0;
    border-right: 1px solid rgba(201, 123, 63, .14);
    padding: 20px 10px;
  }
  .stat:last-child { border-right: 0; }
  .stat-num { font-size: 3.6rem; }

  /* Field-2 (form) */
  .field-2 { grid-template-columns: 1fr 1fr; }

  /* Brand */
  .brand-name { font-size: 1.5rem; }

  /* CTA final */
  .cta-final { padding: 80px 0; }
  .cta-final h2 { font-size: 2.6rem; }

  /* Premier cours */
  .premier-cours { padding: 40px 32px; }
  .premier-cours h2 { font-size: 2.2rem; }
}


/* ============================================================
   ≥ 768px — Tablet
   ============================================================ */
@media (min-width: 768px) {

  .section { padding: 100px 0; }
  .section-header { margin-bottom: 64px; }
  .section-title { font-size: 3.8rem; }
  .section-intro { font-size: 1.05rem; }

  /* Hero */
  .hero-title { font-size: 5.4rem; }

  /* Page hero */
  .page-hero {
    min-height: 340px;
    padding: 150px 0 70px;
  }
  .page-hero h1 { font-size: 4.4rem; }
  .page-hero p { font-size: 1.05rem; }

  /* 2-col grids */
  .disciplines-preview-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .events-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .palmares-feature { grid-template-columns: 1.1fr 1fr; gap: 36px; }
  .pour-qui-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .champions-grid { grid-template-columns: repeat(2, 1fr); }

  /* Stats */
  .stat-num { font-size: 4.2rem; }

  /* Footer 2 cols */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-grid .footer-col:first-child { grid-column: span 2; }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Disciplines page */
  .discipline-block { padding: 80px 0; }
  .discipline-inner { grid-template-columns: 1fr 1fr; gap: 48px; }
  .discipline-block--reverse .discipline-inner > :first-child { order: 2; }
  .discipline-visual { aspect-ratio: 4 / 5; max-width: none; }
  .discipline-body h2 { font-size: 3rem; }
  .discipline-visual-label { font-size: 1.4rem; }

  .equipement-block { padding: 50px 40px; }

  /* Cours page */
  .premier-cours-inner { grid-template-columns: 1.2fr 1fr; gap: 40px; }
  .premier-cours { padding: 56px 48px; }
  .premier-cours h2 { font-size: 2.6rem; }

  /* Disc preview */
  .disc-preview-label { font-size: 2.8rem; }
  .disc-preview-body { padding: 32px; }
  .disc-preview-body h3 { font-size: 1.8rem; }

  /* Engagement */
  .engagement-block { padding: 48px 40px; }
  .engagement-block h2 { font-size: 2.2rem; }

  /* Palmarès */
  .palmares-card-big { padding: 44px 36px; }
  .palmares-name { font-size: 3rem; }

  /* Contact */
  .contact-form { padding: 36px 32px; }
  .contact-form h2 { font-size: 1.8rem; }
}


/* ============================================================
   ≥ 1024px — Desktop (bascule navigation)
   ============================================================ */
@media (min-width: 1024px) {

  .section { padding: 120px 0; }
  .section-header { margin-bottom: 72px; }
  .section-title { font-size: 4.4rem; }

  .brand-name { font-size: 1.6rem; }

  /* Nav desktop visible, hamburger caché */
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .nav-desktop a {
    font-family: var(--f-body);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--blanc-casse);
    position: relative;
    padding: 6px 0;
    transition: color var(--t-base);
  }
  .nav-desktop a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--or-muay);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base);
  }
  .nav-desktop a:hover { color: var(--or-muay); }
  .nav-desktop a:hover::after, .nav-desktop a.is-active::after { transform: scaleX(1); }
  .nav-desktop a.is-active { color: var(--or-muay); }

  .nav-toggle { display: none; }
  .btn-header { display: inline-flex; }

  /* Hero */
  .hero { padding: 140px 0 80px; }
  .hero-title { font-size: 6.6rem; }
  .hero-lead { font-size: 1.18rem; }

  /* Page hero */
  .page-hero { min-height: 380px; padding: 160px 0 70px; }
  .page-hero h1 { font-size: 5.2rem; }

  /* Stats */
  .stat-num { font-size: 5rem; }

  /* 3-col grids */
  .valeurs-grid { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .equipe-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .palmares-teaser-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .tarifs-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .champions-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }

  /* 4-col grids */
  .pour-qui-grid { grid-template-columns: repeat(4, 1fr); }

  /* 2-col layouts */
  .grid-2 { grid-template-columns: 1fr 1.3fr; gap: 80px; }
  .contact-2col { grid-template-columns: 1.1fr 1fr; gap: 40px; }

  /* Footer 3 cols */
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; }
  .footer-grid .footer-col:first-child { grid-column: span 1; }

  /* CTA final */
  .cta-final { padding: 110px 0; }
  .cta-final h2 { font-size: 3.6rem; }
  .cta-final::before { width: 420px; }

  /* Section stats */
  .section-stats { padding: 88px 0; }

  /* Disciplines page */
  .discipline-block { padding: 110px 0; }
  .discipline-inner { gap: 64px; }
  .discipline-body h2 { font-size: 3.4rem; }

  /* Cours */
  .premier-cours { padding: 60px; }
  .premier-cours h2 { font-size: 3rem; }

  /* Engagement */
  .engagement-block { padding: 60px; }
  .engagement-block h2 { font-size: 2.6rem; }

  /* Palmarès */
  .palmares-feature { gap: 48px; }
  .palmares-card-big { padding: 52px 44px; }
  .palmares-name { font-size: 3.4rem; }

  /* FAB plus grand */
  .fab-call { bottom: 22px; right: 22px; width: 58px; height: 58px; }
}


/* ============================================================
   ≥ 1280px — Large desktop
   ============================================================ */
@media (min-width: 1280px) {

  .section-title { font-size: 4.8rem; }

  /* Hero — title pleine puissance */
  .hero-title { font-size: 7.6rem; }

  /* Page hero */
  .page-hero h1 { font-size: 5.8rem; }

  /* Section padding plein */
  .section { padding: 140px 0; }
}


/* ============================================================
   ============================================================
   EXTENSIONS V2 — BOB CENTRIC
     22. Grain animé (effet pellicule)
     23. Séparateur thaï
     24. Cursor custom (desktop)
     25. Hero vidéo
     26. Logo animation (split letters)
     27. L'art des huit membres (interactive)
     28. Témoignages
     29. Page Bob — citation, photo, hero
     30. Rituels Muay Thai
     31. K1 mention (réduit)
     32. Galerie + lightbox
   ============================================================
   ============================================================ */


/* ============================================================
   22. GRAIN ANIMÉ — effet pellicule cinéma
   ============================================================ */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 9998;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grainShift 8s steps(8) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(-4%, 2%); }
  30%  { transform: translate(3%, -4%); }
  40%  { transform: translate(-3%, 4%); }
  50%  { transform: translate(2%, -2%); }
  60%  { transform: translate(-2%, 3%); }
  70%  { transform: translate(4%, -1%); }
  80%  { transform: translate(-3%, -2%); }
  90%  { transform: translate(2%, 4%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}


/* ============================================================
   23. SÉPARATEUR THAÏ — ligne or + losange centré
   ============================================================ */
.separator-gold {
  position: relative;
  display: block;
  width: 80px;
  height: 1px;
  margin: 32px auto;
  background: linear-gradient(to right, transparent, var(--or-muay) 20%, var(--or-muay) 80%, transparent);
}
.separator-gold::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  background: var(--or-muay);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 3px var(--noir-ring);
}
@media (min-width: 768px) {
  .separator-gold { width: 120px; margin: 48px auto; }
}


/* ============================================================
   24. CURSOR CUSTOM — desktop only
   ============================================================ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--or-muay);
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-50px, -50px, 0);
  transition: width var(--t-fast), height var(--t-fast),
              opacity var(--t-base), background var(--t-fast);
  opacity: 0;
  mix-blend-mode: difference;
  display: none;
}
.cursor.is-hover {
  width: 24px; height: 24px;
  background: var(--or-clair);
}
.cursor.is-active { transform: translate3d(var(--cx, 0), var(--cy, 0), 0) translate(-50%, -50%); opacity: .9; }

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
  body.cursor-on,
  body.cursor-on * { cursor: none; }
  /* Champs textuels gardent leur curseur natif */
  body.cursor-on input,
  body.cursor-on textarea,
  body.cursor-on select { cursor: text; }
  body.cursor-on select { cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
}


/* ============================================================
   25. HERO VIDÉO — fond plein écran
   ============================================================ */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* léger fallback : si la vidéo manque, le .hero-bg en dégradé reste visible */
  background: var(--noir-ring);
}
.hero .hero-bg     { z-index: 1; opacity: .55; }
.hero .hero-grain  { z-index: 2; }
.hero .hero-overlay {
  z-index: 3;
  background: linear-gradient(180deg, rgba(28, 20, 16, .4) 0%, rgba(28, 20, 16, .85) 100%);
}
.hero .hero-content { z-index: 4; }
.hero .hero-scroll  { z-index: 4; }


/* ============================================================
   26. LOGO ANIMATION — split letters au chargement
   ============================================================ */
.brand-name .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.brand-name.animated .letter {
  opacity: 1;
  transform: translateY(0);
}
.brand-sub {
  opacity: 0;
  transition: opacity .3s ease .55s;
}
.brand-sub.animated { opacity: 1; }
/* Si déjà animé dans la session, état stable immédiat */
.brand-name.skip-anim .letter { opacity: 1; transform: none; transition: none; }
.brand-sub.skip-anim { opacity: 1; transition: none; }


/* ============================================================
   27. L'ART DES HUIT MEMBRES — grille de 8 cartes (CSS pur)
   ------------------------------------------------------------
   Approche éditoriale épurée : pas de SVG dessiné, juste 8 cartes
   numérotées en chiffres romains. Hover or-mongkol + élévation.
   ============================================================ */
.section-arts {
  position: relative;
  background: #1C1410;
  padding: 80px 0;
}
.section-arts::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(201, 123, 63,.05), transparent 65%);
  pointer-events: none;
}
.section-arts > .wrap { position: relative; }

.section-arts .section-title {
  font-size: 2.6rem;
}
.section-arts .section-intro {
  font-size: 1rem;
  color: var(--gris-cendre);
  max-width: 720px;
}

/* Grille — mobile 1 col → tablet 2 → desktop 4 */
.arts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 48px;
}

.arts-card {
  position: relative;
  padding: 28px 24px;
  background: var(--noir-temple);
  border: 1px solid var(--noir-profond);
  transition: border-color var(--t-base), transform var(--t-base), background var(--t-base);
  overflow: hidden;
}
.arts-card:hover {
  border-color: var(--or-mongkol);
  transform: translateY(-4px);
  background: rgba(201, 123, 63,.04);
}

.arts-card-num {
  font-family: var(--f-num);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--or-mongkol);
  letter-spacing: .04em;
  margin-bottom: 18px;
  display: block;
  transition: text-shadow var(--t-base);
}
.arts-card:hover .arts-card-num {
  text-shadow: 0 0 18px rgba(201, 123, 63,.45);
}

.arts-card-icon {
  width: 60px;
  height: 60px;
  border: 1px solid var(--or-temple);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--or-mongkol);
  transition: border-color var(--t-base);
}
.arts-card:hover .arts-card-icon { border-color: var(--or-mongkol); }
.arts-card-icon svg { display: block; }

.arts-card-thai {
  font-family: var(--f-display);
  font-size: 2.2rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ivoire);
  line-height: 1;
  margin: 0 0 6px;
}
.arts-card-fr {
  font-family: var(--f-heading);
  font-weight: 500;
  font-size: .76rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or-mongkol);
  margin: 0 0 16px;
}
.arts-card-desc {
  font-family: var(--f-body);
  font-size: .9rem;
  line-height: 1.65;
  color: var(--ivoire);
  opacity: .82;
  margin: 0;
}

@media (min-width: 768px) {
  .section-arts { padding: 100px 0; }
  .arts-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .section-arts .section-title { font-size: 3.6rem; }
  .arts-card { padding: 32px 28px; }
  .arts-card-num { font-size: 4.2rem; }
  .arts-card-thai { font-size: 2.4rem; }
}
@media (min-width: 1024px) {
  .section-arts { padding: 120px 0; }
  .arts-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .section-arts .section-title { font-size: 4.4rem; }
  .arts-card { padding: 36px 28px; }
  .arts-card-num { font-size: 4.6rem; }
  .arts-card-thai { font-size: 2.2rem; }
  /* Variante "large" pour discipline.html — légèrement plus aérée */
  .section-arts-large .arts-card { padding: 40px 32px; }
}


/* ============================================================
   28. TÉMOIGNAGES — ils s'entraînent avec Bob
   ============================================================ */
.section-temoignages { background: var(--noir-profond); }

.temoignages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.temoignage {
  background: var(--noir-ring);
  border: 1px solid rgba(201, 123, 63,.14);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: border-color var(--t-base), transform var(--t-base);
}
.temoignage:hover {
  border-color: var(--or-muay);
  transform: translateY(-4px);
}
.temoignage-portrait {
  position: relative;
  width: 120px;
  height: 120px;
  border: 1px solid var(--or-muay);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201, 123, 63,.16), transparent 60%),
    linear-gradient(160deg, var(--noir-cuir) 0%, var(--noir-ring) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.temoignage-initials {
  font-family: var(--f-display);
  font-size: 2.2rem;
  letter-spacing: .05em;
  color: var(--or-muay);
}
.temoignage-name {
  font-family: var(--f-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}
.temoignage-nick {
  font-family: var(--f-heading);
  font-weight: 500;
  font-style: italic;
  font-size: .7em;
  color: var(--or-muay);
  margin-left: 6px;
}
.temoignage-cat {
  font-family: var(--f-heading);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin: 0 0 14px;
}
.temoignage-quote {
  font-family: var(--f-body);
  font-style: italic;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--blanc-casse);
  opacity: .82;
  margin: 0;
  padding: 0 4px;
}

@media (min-width: 768px) {
  .temoignages-grid { grid-template-columns: repeat(3, 1fr); }
  .temoignage { padding: 36px 26px; }
  .temoignage-portrait { width: 140px; height: 140px; }
  .temoignage-initials { font-size: 2.6rem; }
}


/* ============================================================
   29. PAGE BOB — hero, photo, citation, équipe-grid-2
   ============================================================ */

/* Hero court Bob — surcharges */
.page-hero-bob {
  min-height: 380px;
  text-align: left;
}
.page-hero-bob .hero-name {
  font-family: var(--f-display);
  font-size: 5rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--blanc-casse);
  margin: 0;
  text-shadow: 0 4px 20px rgba(0,0,0,.6);
}
@media (min-width: 768px) {
  .page-hero-bob { min-height: 420px; }
  .page-hero-bob .hero-name { font-size: 7rem; }
}
@media (min-width: 1024px) {
  .page-hero-bob { min-height: 50vh; }
  .page-hero-bob .hero-name { font-size: 9rem; }
}

/* Section bob portrait — 2 cols */
.bob-portrait-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.bob-photo {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}
.bob-photo-placeholder {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201, 123, 63,.16), transparent 60%),
    linear-gradient(160deg, var(--noir-cuir) 0%, var(--noir-ring) 100%);
  border: 1px solid rgba(201, 123, 63,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bob-photo-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 22px, rgba(201, 123, 63,.04) 22px 23px);
}
.bob-photo-frame {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(201, 123, 63,.2);
  pointer-events: none;
}
.bob-photo-label {
  position: relative;
  font-family: var(--f-display);
  font-size: 4.4rem;
  letter-spacing: .08em;
  color: var(--or-muay);
  opacity: .85;
}

.bob-bio .section-title { text-align: left; }

@media (min-width: 1024px) {
  .bob-portrait-grid { grid-template-columns: 1fr 1.4fr; gap: 80px; }
  .bob-photo { max-width: none; }
  .bob-photo-label { font-size: 5.6rem; }
}

/* Citation pleine page */
.section-citation {
  position: relative;
  background: #0F0A07;
  padding: 80px 0;
  text-align: center;
  overflow: hidden;
  border-block: 1px solid rgba(201, 123, 63,.1);
}
.section-citation::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201, 123, 63,.08), transparent 60%);
  pointer-events: none;
}
.section-citation .wrap { position: relative; max-width: 980px; }
.citation-text {
  font-family: var(--f-display);
  font-size: 2rem;
  font-style: italic;
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--or-muay);
  margin: 0 0 24px;
  text-transform: none;
}
.citation-signature {
  font-family: var(--f-heading);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--blanc-casse);
  opacity: .7;
  margin: 0;
}
@media (min-width: 768px) {
  .section-citation { padding: 100px 0; }
  .citation-text { font-size: 2.8rem; }
}
@media (min-width: 1024px) {
  .section-citation { padding: 120px 0; }
  .citation-text { font-size: 3.6rem; line-height: 1.15; }
}

/* Équipe à 2 (bob.html — Tonton + Francis) */
.equipe-grid-2 {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .equipe-grid-2 { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   30. RITUELS MUAY THAI — discipline.html
   ============================================================ */
.section-rituels { position: relative; }
.rituels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.rituel {
  padding: 28px 24px;
  background: var(--noir-profond);
  border: 1px solid rgba(201, 123, 63,.14);
  border-top: 2px solid var(--or-muay);
  transition: background var(--t-base), transform var(--t-base);
}
.rituel:hover {
  background: rgba(201, 123, 63,.04);
  transform: translateY(-3px);
}
.rituel-icon {
  color: var(--or-muay);
  margin-bottom: 16px;
}
.rituel h3 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .5em;
  color: var(--blanc-casse);
}
.rituel p {
  font-size: .94rem;
  line-height: 1.7;
  opacity: .82;
  margin: 0;
}
@media (min-width: 768px) {
  .rituels-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .rituel { padding: 36px 30px; }
  .rituel h3 { font-size: 1.8rem; }
}


/* ============================================================
   31. K1 MENTION — bloc réduit (discipline.html)
   ============================================================ */
.section-k1-mention { padding: 56px 0; }
.k1-mention {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 28px;
  border-left: 2px solid var(--or-muay);
  border-right: 2px solid var(--or-muay);
}
.k1-mention .eyebrow {
  margin-bottom: 1em;
  justify-content: center;
}
.k1-mention-title,
.k1-mention h2 {
  font-family: var(--f-heading);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: .24em;
  line-height: 1.2;
  margin-bottom: 1em;
  color: var(--or-mongkol);
  text-transform: uppercase;
}
.k1-mention p {
  font-size: 1rem;
  line-height: 1.75;
  opacity: .82;
  margin: 0;
}
@media (min-width: 768px) {
  .k1-mention-title,
  .k1-mention h2 { font-size: 1.4rem; letter-spacing: .28em; }
  .k1-mention { padding: 56px 40px; }
}


/* ============================================================
   32. GALERIE + LIGHTBOX
   ============================================================ */

/* Filtres */
.galerie-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
}
.galerie-filter {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blanc-casse);
  background: transparent;
  border: 1px solid rgba(201, 123, 63,.25);
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.galerie-filter:hover {
  border-color: var(--or-muay);
  color: var(--or-muay);
}
.galerie-filter.is-active {
  background: var(--or-muay);
  color: var(--noir-ring);
  border-color: var(--or-muay);
}

/* Mosaïque */
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  gap: 8px;
}
.galerie-item {
  position: relative;
  margin: 0;
  border: 1px solid rgba(201, 123, 63,.25);
  overflow: hidden;
  cursor: pointer;
  background: var(--noir-profond);
  aspect-ratio: 1;
  transition: transform var(--t-base), border-color var(--t-base), opacity var(--t-base);
}
.galerie-item:hover {
  transform: scale(1.02);
  border-color: var(--or-muay);
}
.galerie-item.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(.95);
  transition: opacity .25s ease, transform .25s ease;
}
.galerie-item img,
.galerie-item .galerie-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.galerie-item:hover img,
.galerie-item:hover .galerie-placeholder {
  transform: scale(1.05);
}

/* Overlay or au survol */
.galerie-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent 40%, rgba(201, 123, 63,.22) 100%);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}
.galerie-item:hover::after { opacity: 1; }

/* Placeholder visuel quand pas d'image */
.galerie-placeholder {
  position: relative;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(139, 46, 46,.18), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(201, 123, 63,.1), transparent 55%),
    linear-gradient(150deg, #2A1F18 0%, #1C1410 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.galerie-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 18px, rgba(201, 123, 63,.04) 18px 19px);
}
.galerie-placeholder::after {
  content: "";
  position: absolute;
  width: 28%;
  aspect-ratio: 1;
  border: 1px solid rgba(201, 123, 63,.25);
  transform: rotate(45deg);
}
.galerie-placeholder-label {
  position: relative;
  z-index: 1;
  font-family: var(--f-display);
  font-size: 1.1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or-muay);
  line-height: 1.1;
  padding: 0 12px;
}

/* Caption au survol */
.galerie-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 14px 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(28, 20, 16,.92) 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(100%);
  transition: transform var(--t-base);
}
.galerie-item:hover .galerie-caption { transform: translateY(0); }
.galerie-cat {
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or-muay);
}
.galerie-title {
  font-family: var(--f-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--blanc-casse);
  line-height: 1;
}

/* Items spéciaux (mosaïque variable) */
@media (min-width: 768px) {
  .galerie-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .galerie-item--big { grid-column: span 2; aspect-ratio: 16 / 10; }
  .galerie-item--tall { grid-row: span 2; aspect-ratio: 1 / 2; }
}
@media (min-width: 1024px) {
  .galerie-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .galerie-item--big { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
  .galerie-item--tall { grid-column: span 1; grid-row: span 2; aspect-ratio: 1 / 2; }
  .galerie-placeholder-label { font-size: 1.3rem; }
}

.galerie-note {
  margin-top: 32px;
  text-align: center;
  font-size: .9rem;
  opacity: .65;
}
.galerie-note a {
  color: var(--or-muay);
  border-bottom: 1px solid var(--or-muay);
}

/* LIGHTBOX */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 10, 7,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-base);
}
.lightbox.is-open {
  display: flex;
  opacity: 1;
}
.lightbox-figure {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox-image-wrap {
  position: relative;
  max-width: 92vw;
  max-height: 78vh;
  border: 1px solid rgba(201, 123, 63,.3);
  background: var(--noir-ring);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  min-height: 220px;
}
.lightbox-image-wrap img {
  display: block;
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
}
.lightbox-fallback {
  text-align: center;
  padding: 60px 40px;
  color: var(--or-muay);
  width: 100%;
}
.lightbox-fallback-label {
  display: block;
  font-family: var(--f-display);
  font-size: 1.8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or-muay);
  margin-bottom: 12px;
}
.lightbox-fallback p { color: var(--blanc-casse); opacity: .7; margin: 0; font-size: .92rem; }

.lightbox-caption {
  font-family: var(--f-heading);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or-muay);
  text-align: center;
}

/* Boutons lightbox */
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(201, 123, 63,.4);
  color: var(--or-muay);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--or-muay);
  color: var(--noir-ring);
  border-color: var(--or-muay);
}
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev  { top: 50%; left: 14px;  transform: translateY(-50%); }
.lightbox-next  { top: 50%; right: 14px; transform: translateY(-50%); }
@media (min-width: 768px) {
  .lightbox-close { top: 28px; right: 28px; width: 52px; height: 52px; }
  .lightbox-prev  { left: 28px;  width: 52px; height: 52px; }
  .lightbox-next  { right: 28px; width: 52px; height: 52px; }
}


/* ============================================================
   FAB — pulse subtil renforcé (animation cinétique)
   ============================================================ */
.fab-call {
  animation: fabPulseSoft 4s ease-in-out infinite;
}
@keyframes fabPulseSoft {
  0%, 100% { box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 0 rgba(201, 123, 63,.35); }
  50%      { box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 18px rgba(201, 123, 63,0); }
}
@media (prefers-reduced-motion: reduce) {
  .fab-call { animation: none; }
}


/* ============================================================
   ============================================================
   EXTENSIONS V3 — Authentique Muay Thai
     33. Eyebrow rouge rituel (accents)
     34. Bouton CTA hover rouge rituel
     35. Badges palmarès rouge rituel
     36. Bordures or-temple (sombres)
     37. Section "Bob teaser" (home)
     38. Loader d'intro (index.html only)
   ============================================================
   ============================================================ */


/* ============================================================
   33. EYEBROW ROUGE RITUEL
   ============================================================ */
.eyebrow-red {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rouge-rituel);
  margin: 0 0 1.2em;
}
.eyebrow-red::before {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--rouge-rituel);
}


/* ============================================================
   34. BOUTON CTA — hover rouge rituel
   (override léger sur le primary pour faire ressortir l'engagement)
   ============================================================ */
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--rouge-rituel);
  color: var(--ivoire);
  border-color: var(--rouge-rituel);
}


/* ============================================================
   35. BADGES PALMARÈS — fond rouge rituel
   ============================================================ */
.palmares-card-label {
  background: var(--rouge-rituel);
  color: var(--ivoire);
}


/* ============================================================
   36. Bordures sombres — or-temple
   (subtiles, pour les cards et conteneurs sombres)
   ============================================================ */
.coach { border-color: rgba(201, 123, 63, .22); }
.tarif-card { border-color: rgba(201, 123, 63, .2); }
.event-card { border-color: rgba(201, 123, 63, .2); }
.contact-block { border-color: rgba(201, 123, 63, .18); }
.equipement-block { border-color: rgba(201, 123, 63, .2); }


/* ============================================================
   37. SECTION "BOB TEASER" (index.html)
   ============================================================ */
.section-bob-teaser {
  position: relative;
  background: var(--noir-temple);
  padding: 80px 0;
  overflow: hidden;
}
.section-bob-teaser::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--grad-temple);
  opacity: .6;
  pointer-events: none;
}
.section-bob-teaser .wrap {
  position: relative;
  max-width: 880px;
  text-align: center;
}
.bob-teaser-title {
  font-family: var(--f-display);
  font-size: 4rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ivoire);
  line-height: 1;
  margin: 0 0 32px;
}
.bob-teaser-prose {
  text-align: left;
  max-width: 720px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bob-teaser-prose p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ivoire);
  opacity: .88;
  margin: 0;
}
.bob-teaser-quote {
  position: relative;
  margin: 40px auto 0;
  max-width: 720px;
  padding: 36px 28px;
  border-top: 1px solid var(--or-temple);
  border-bottom: 1px solid var(--or-temple);
  text-align: center;
}
.bob-teaser-quote-text {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-style: italic;
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--or-mongkol);
  margin: 0 0 18px;
  text-transform: none;
}
.bob-teaser-quote-sig {
  font-family: var(--f-heading);
  font-weight: 500;
  font-size: .76rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ivoire);
  opacity: .72;
  margin: 0;
}
.bob-teaser-cta {
  margin-top: 36px;
}

@media (min-width: 768px) {
  .section-bob-teaser { padding: 100px 0; }
  .bob-teaser-title { font-size: 5.4rem; }
  .bob-teaser-quote-text { font-size: 2rem; }
}
@media (min-width: 1024px) {
  .section-bob-teaser { padding: 120px 0; }
  .bob-teaser-title { font-size: 6.4rem; }
  .bob-teaser-quote { padding: 48px 36px; }
  .bob-teaser-quote-text { font-size: 2.4rem; }
}


/* ============================================================
   38. LOADER D'INTRO (index.html uniquement, 1×/session)
   ============================================================ */
.intro-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--noir-ring);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity .4s ease-in, transform .4s ease-in;
}
.intro-loader.intro-end {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

.intro-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.intro-line {
  height: 1px;
  width: 0;
  background: var(--or-mongkol);
  animation: introLine .8s cubic-bezier(.2,.7,.2,1) .2s forwards;
}
.intro-line-bottom { animation-delay: .25s; }

@keyframes introLine {
  to { width: 240px; }
}

.intro-title {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 9vw, 5.4rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ivoire);
  line-height: 1;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.intro-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  animation: introLetter .4s cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-title .intro-space {
  width: clamp(.5em, 1.2vw, .8em);
  display: inline-block;
}
/* Stagger des lettres : B O B Y _ C L U B (8 lettres + 1 espace) */
.intro-title span:nth-child(1) { animation-delay: .40s; }
.intro-title span:nth-child(2) { animation-delay: .48s; }
.intro-title span:nth-child(3) { animation-delay: .56s; }
.intro-title span:nth-child(4) { animation-delay: .64s; }
.intro-title span:nth-child(5) { animation-delay: .72s; }  /* espace */
.intro-title span:nth-child(6) { animation-delay: .80s; }
.intro-title span:nth-child(7) { animation-delay: .88s; }
.intro-title span:nth-child(8) { animation-delay: .96s; }
.intro-title span:nth-child(9) { animation-delay: 1.04s; }

@keyframes introLetter {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.intro-subtitle {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .8rem;
  color: var(--or-mongkol);
  text-transform: uppercase;
  letter-spacing: .8em;
  padding-left: .8em;
  opacity: 0;
  animation: introSubtitle .5s cubic-bezier(.2,.7,.2,1) 1.10s forwards;
}
@keyframes introSubtitle {
  from { opacity: 0; letter-spacing: 1.6em; padding-left: 1.6em; }
  to   { opacity: .9; letter-spacing: .4em;  padding-left: .4em;  }
}

@media (min-width: 768px) {
  @keyframes introLine { to { width: 320px; } }
  .intro-subtitle { font-size: .9rem; letter-spacing: .9em; padding-left: .9em; }
  @keyframes introSubtitle {
    from { opacity: 0; letter-spacing: 1.8em; padding-left: 1.8em; }
    to   { opacity: .9; letter-spacing: .5em;  padding-left: .5em;  }
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-loader { display: none; }
}


/* ============================================================
   ============================================================
   EXTENSIONS V4 — Photos Pexels & layouts associés
     39. Classes .photo-pexels (3 variantes)
     40. Page hero avec photo Pexels en fond
     41. Pour-qui-card avec photo Pexels en fond
     42. Section "8 membres" avec photo Pexels d'ambiance
     43. Bandeau parallax (avant CTA final)
     44. Bob — citation pleine page avec bg image
     45. Bob — engagement layout 60/40 avec photo
     46. Discipline — intro 2 colonnes avec photo
     47. Rituels — vignettes avec bg image
     48. Cours — premier cours avec photo (gloves)
     49. Galerie — note "en cours de constitution"
   ============================================================
   ============================================================ */


/* ============================================================
   39. PHOTOS — traitement uniforme
   Une seule signature visuelle pour toutes les photos du site :
   sépia léger, saturation -15%, contraste +10%, brightness -10%.
   `.photo-asset` est le nom canonique (V5) ; `.photo-pexels` reste
   en alias pour les pages internes qui utilisent encore les anciens
   sélecteurs.
   ============================================================ */
.photo-asset,
.photo-pexels {
  filter: sepia(15%) saturate(85%) contrast(110%) brightness(90%);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-asset-bg,
.photo-pexels-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(15%) saturate(85%) contrast(110%) brightness(90%);
  opacity: .25;
  mix-blend-mode: multiply;
  z-index: 0;
  pointer-events: none;
}

.photo-asset-feature,
.photo-pexels-feature {
  filter: sepia(10%) saturate(90%) contrast(105%) brightness(95%);
  border: 2px solid var(--cuivre);
  box-shadow: 0 8px 24px rgba(28, 20, 16, .6);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   40. PAGE HERO avec photo Pexels en fond
   (utilisé sur discipline.html, cours.html, contact.html)
   ============================================================ */
.page-hero {
  position: relative;
  isolation: isolate;
}
.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: sepia(15%) saturate(85%) contrast(110%) brightness(80%);
}
.page-hero-img + .hero-bg { z-index: 1; opacity: .35; }
.page-hero .hero-grain { z-index: 2; }
.page-hero .hero-overlay {
  z-index: 3;
  background: linear-gradient(180deg, rgba(139, 46, 46, .25) 0%, rgba(28, 20, 16, .92) 100%);
}
.page-hero .wrap { position: relative; z-index: 4; }


/* ============================================================
   41. POUR-QUI-CARD avec photo Pexels en fond
   ============================================================ */
.pour-qui-card.pour-qui-card--has-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.pour-qui-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: sepia(20%) saturate(80%) contrast(110%) brightness(70%);
}
.pour-qui-card.pour-qui-card--has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 20, 16, .85);
  z-index: -1;
}
.pour-qui-card.pour-qui-card--has-bg:hover::before {
  background: rgba(28, 20, 16, .78);
}


/* ============================================================
   42. SECTION 8 MEMBRES — bg shadow box
   ============================================================ */
.section-arts {
  isolation: isolate;
}
.section-arts-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: sepia(20%) saturate(85%) contrast(115%) brightness(70%);
  opacity: .15;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.section-arts > .wrap,
.section-arts > .section-header { position: relative; z-index: 2; }


/* ============================================================
   43. BANDEAU PARALLAX (index.html, avant CTA final)
   ------------------------------------------------------------
   Mobile / desktop : background-image visible.
   Desktop avec hover/fine pointer : effet parallax via
   background-attachment: fixed.
   Le filtre sépia ne s'applique pas à un background-image, donc
   un overlay teinté chaud (::after) simule la cohérence visuelle.
   ============================================================ */
.section-parallax-band {
  position: relative;
  height: 60vh;
  min-height: 360px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background-color: var(--fond-principal);
}
.section-parallax-band[data-bg] {
  background-image: var(--bg-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-parallax-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 20, 16, .7);
  z-index: 0;
}
.section-parallax-band[data-bg]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(139, 46, 46, .12), rgba(28, 20, 16, .2));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.parallax-band-text {
  position: relative;
  z-index: 1;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 8vw, 5rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ivoire);
  text-align: center;
  line-height: 1;
  margin: 0;
  padding: 0 var(--gutter);
  text-shadow: 0 4px 20px rgba(15, 10, 7, .6);
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .section-parallax-band[data-bg] {
    background-attachment: fixed;
  }
}


/* ============================================================
   44. BOB — Citation pleine page avec bg image
   ============================================================ */
.section-citation {
  isolation: isolate;
}
.section-citation-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: sepia(20%) saturate(80%) contrast(115%) brightness(60%);
  opacity: .2;
  mix-blend-mode: multiply;
}
.section-citation > .wrap { position: relative; z-index: 2; }


/* ============================================================
   45. BOB — Engagement layout 60/40 avec photo
   ============================================================ */
.engagement-with-photo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
.engagement-with-photo .engagement-block { margin: 0; }
.engagement-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  overflow: hidden;
  border: 2px solid var(--cuivre);
  box-shadow: 0 8px 24px rgba(28, 20, 16, .6);
  background: var(--grad-temple);
}
.engagement-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(10%) saturate(90%) contrast(105%) brightness(90%);
  z-index: 2;
}
.engagement-photo-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cuivre);
  font-family: var(--f-display);
  font-size: 1.4rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 16px;
  margin: 0;
}
.engagement-photo-placeholder::after {
  content: "";
  position: absolute; inset: 18px;
  border: 1px solid rgba(201, 123, 63, .25);
}

@media (min-width: 1024px) {
  .engagement-with-photo { grid-template-columns: 60fr 40fr; gap: 40px; align-items: center; }
}


/* ============================================================
   46. DISCIPLINE — Intro Muay Thai 2 colonnes (texte + photo)
   La structure existante .discipline-block + .discipline-inner
   fait déjà 2 colonnes. On ajoute juste le support photo dans
   .discipline-visual.
   ============================================================ */
.discipline-visual.has-photo {
  border: 1px solid var(--cuivre);
  background: var(--fond-alterne);
  padding: 0;
  overflow: hidden;
}
.discipline-visual.has-photo::before,
.discipline-visual.has-photo::after { display: none; }
.discipline-visual.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(15%) saturate(85%) contrast(110%) brightness(80%);
}
.discipline-visual.has-photo .discipline-visual-label {
  position: absolute;
  inset: auto 0 18px 0;
  background: linear-gradient(180deg, transparent, rgba(28, 20, 16, .85));
  padding: 18px 12px 12px;
  z-index: 2;
}


/* ============================================================
   47. RITUELS — vignette WAI KHRU et MONGKOL avec bg
   ============================================================ */
.rituel.rituel--has-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.rituel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: sepia(20%) saturate(80%) contrast(115%) brightness(75%);
  opacity: .25;
  mix-blend-mode: multiply;
}
.rituel.rituel--has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 20, 16, .7);
  z-index: -1;
}


/* ============================================================
   48. COURS — Premier cours avec photo (gloves)
   ============================================================ */
.premier-cours-with-photo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
.premier-cours-with-photo .premier-cours-content { order: 2; }
.premier-cours-photo {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  border: 2px solid var(--cuivre);
  box-shadow: 0 8px 24px rgba(28, 20, 16, .35);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201, 123, 63, .25), transparent 65%),
    var(--grad-temple);
  order: 1;
}
.premier-cours-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(10%) saturate(90%) contrast(105%) brightness(95%);
  z-index: 2;
}
.premier-cours-photo-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cuivre);
  font-family: var(--f-display);
  font-size: 1.2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  padding: 0 16px;
  text-align: center;
}
.premier-cours-photo-placeholder::after {
  content: "";
  position: absolute; inset: 14px;
  border: 1px solid rgba(28, 20, 16, .35);
}

@media (min-width: 768px) {
  .premier-cours-with-photo { grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
  .premier-cours-with-photo .premier-cours-content { order: 0; }
  .premier-cours-photo { order: 0; max-width: 100%; aspect-ratio: 4 / 5; }
}


/* ============================================================
   49. GALERIE — note "en cours de constitution"
   ============================================================ */
.galerie-construction {
  margin: 24px auto 32px;
  max-width: 720px;
  padding: 24px 28px;
  background: var(--fond-alterne);
  border: 1px solid var(--cuivre);
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ivoire);
}
.galerie-construction strong {
  color: var(--cuivre);
  font-family: var(--f-display);
  font-size: 1.2rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}


/* ============================================================
   ============================================================
   EXTENSIONS V5 — Assets client + heroes centrés
     50. Page hero centré (titre + sous-titre center)
     51. Bob teaser layout 2 cols (photo / texte)
     52. Bob teaser photo (image2)
     53. Coach portrait → placeholder initiales V5 (Tonton, Francis)
     54. Témoignage portrait → 160×160 bordure cuivre 2px
   ============================================================
   ============================================================ */


/* ============================================================
   50. PAGE HERO CENTRÉ
   ============================================================ */
.page-hero--centered .wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-hero--centered .page-hero-eyebrow,
.page-hero--centered h1,
.page-hero--centered p {
  margin-left: auto;
  margin-right: auto;
}
.page-hero--centered p { max-width: 640px; }


/* ============================================================
   51. BOB TEASER — layout 2 cols (photo / texte)
   ============================================================ */
.section-bob-teaser--with-photo .wrap {
  max-width: var(--wrap);
  text-align: left;
}
.bob-teaser-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.bob-teaser-body { display: flex; flex-direction: column; }

@media (min-width: 1024px) {
  .bob-teaser-grid {
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: 64px;
  }
  .section-bob-teaser--with-photo .bob-teaser-title { font-size: 5.4rem; }
}


/* ============================================================
   52. BOB TEASER — photo (image2 à gauche)
   ============================================================ */
.bob-teaser-photo {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 2px solid var(--cuivre);
  box-shadow: 0 12px 32px rgba(28, 20, 16, .55);
  background: var(--grad-temple);
}
.bob-teaser-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .bob-teaser-photo { max-width: none; }
}


/* ============================================================
   53. COACH PORTRAIT — V5 placeholder initiales
   Carré bordure cuivre 2px, fond fond-alterne, initiales Bebas
   80px cuivre, centrées. (Override propre du V3.)
   ============================================================ */
.coach-portrait {
  background: var(--fond-alterne);
  border: 2px solid var(--cuivre);
}
.coach-portrait::before { display: none; } /* retire le pattern stripes V3 */
.coach-frame { display: none; }            /* retire le double encadré inset V3 */
.coach-initials {
  font-size: 5rem;          /* ≈ 80px */
  color: var(--cuivre);
  opacity: 1;
  letter-spacing: .04em;
}
@media (min-width: 768px) {
  .coach-initials { font-size: 5rem; }
}


/* ============================================================
   54. TÉMOIGNAGE PORTRAIT — 160×160 bordure cuivre 2px (V5)
   ============================================================ */
.temoignage-portrait {
  width: 160px;
  height: 160px;
  border: 2px solid var(--cuivre);
}
.temoignage-initials {
  font-family: var(--f-display);
  font-size: 3.2rem;
  color: var(--cuivre);
  letter-spacing: .04em;
}
@media (min-width: 768px) {
  .temoignage-portrait { width: 160px; height: 160px; }
  .temoignage-initials { font-size: 3.2rem; }
}



/* ============================================================
   55. AJOUTS — refonte 2026
   Logo showcase, planning par salle, tarifs (5 cards), paiement,
   events single, galerie, politique de confidentialité.
   ============================================================ */

/* --- 55a. Logo showcase (accueil, après hero) --- */
.section-logo-showcase {
  padding: 64px 0 32px;
  text-align: center;
}
.logo-showcase {
  max-width: min(620px, 90%);
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35));
  display: block;
}
@media (max-width: 700px) {
  .section-logo-showcase { padding: 40px 0 16px; }
  .logo-showcase { max-width: 88%; }
}

/* --- 55b. Planning blocs par salle --- */
.planning-block {
  margin-top: 48px;
  padding: 28px 24px 20px;
  border: 1px solid rgba(201, 123, 63, .25);
  border-radius: 4px;
  background: rgba(0, 0, 0, .12);
}
.planning-block:first-of-type { margin-top: 32px; }
.planning-block-title {
  font-family: var(--f-display);
  font-size: 1.7rem;
  letter-spacing: .04em;
  color: var(--or-muay);
  margin: 0 0 4px;
  text-transform: uppercase;
}
.planning-block-sub {
  margin: 0 0 22px;
  font-size: .9rem;
  color: rgba(255, 255, 255, .65);
  letter-spacing: .03em;
}
.planning small {
  display: block;
  margin-top: 4px;
  font-size: .68rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .04em;
  text-transform: none;
}

/* --- 55c. Tarifs grille à 5 cartes + carte highlight + bloc paiement --- */
.tarifs-grid-4 {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .tarifs-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .tarifs-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tarifs-grid-4 > .tarif-card:nth-child(4),
  .tarifs-grid-4 > .tarif-card:nth-child(5) {
    /* second row centered */
  }
}
.tarif-price {
  font-family: var(--f-display);
  font-size: 2.4rem;
  color: var(--or-muay);
  letter-spacing: .03em;
  line-height: 1.1;
  margin: 8px 0 14px;
}
.tarif-price small {
  display: block;
  font-size: .68rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .6);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 4px;
  vertical-align: baseline;
}
.tarif-card--highlight {
  border: 2px solid var(--or-muay);
  background: linear-gradient(180deg, rgba(201, 123, 63, .08), rgba(201, 123, 63, .02));
  box-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}
.tarif-card--highlight .tarif-label {
  color: var(--or-muay);
  font-weight: 700;
}
.tarif-paiement {
  margin-top: 40px;
  padding: 28px 26px;
  border-left: 3px solid var(--or-muay);
  background: rgba(255, 255, 255, .03);
  border-radius: 0 4px 4px 0;
}
.tarif-paiement h3 {
  font-family: var(--f-display);
  font-size: 1.4rem;
  letter-spacing: .06em;
  color: var(--or-muay);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.tarif-paiement p {
  margin: 0 0 10px;
  line-height: 1.6;
}
.tarif-paiement-sub {
  font-size: .88rem;
  color: rgba(255, 255, 255, .68);
}

/* --- 55d. Events grid single (bob.html, Open du Sud only) --- */
.events-grid--single {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
}

/* --- 55e. Galerie page --- */
.galerie-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  margin: 32px 0;
}
@media (min-width: 700px) {
  .galerie-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 1100px) {
  .galerie-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}
.galerie-item {
  display: block;
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, .35);
  aspect-ratio: 3/4;
  border: 1px solid rgba(201, 123, 63, .15);
  border-radius: 2px;
  cursor: pointer;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.galerie-item:hover {
  transform: translateY(-3px);
  border-color: var(--or-muay);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}
.galerie-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease, filter .35s ease;
  filter: brightness(.9);
}
.galerie-item:hover img {
  transform: scale(1.06);
  filter: brightness(1);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--or-muay);
  background: transparent;
  color: var(--or-muay);
  font-size: 1.4rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
}
.lightbox-close:hover { background: var(--or-muay); color: var(--noir-ring); }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border: 1px solid var(--or-muay);
  background: rgba(0, 0, 0, .5);
  color: var(--or-muay);
  font-size: 1.6rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-nav:hover { background: var(--or-muay); color: var(--noir-ring); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
@media (max-width: 700px) {
  .lightbox-nav { width: 44px; height: 44px; font-size: 1.2rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* --- 55f. Politique de confidentialité --- */
.policy {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 4px;
}
.policy h2 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  letter-spacing: .04em;
  color: var(--or-muay);
  margin: 36px 0 12px;
  text-transform: uppercase;
}
.policy h2:first-of-type { margin-top: 0; }
.policy p, .policy li {
  line-height: 1.7;
  color: rgba(255, 255, 255, .85);
}
.policy ul {
  margin: 8px 0 18px 22px;
  list-style: disc;
}
.policy a {
  color: var(--or-muay);
  border-bottom: 1px solid currentColor;
}



/* ============================================================
   56. BRAND LOGO — image dans le header (top-left) et footer
   Remplace l'ancien brand-mark SVG + brand-text textuel.
   ============================================================ */
.brand--logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  line-height: 1;
}
.brand-logo {
  display: block;
  width: auto;
  height: 56px;             /* taille header par défaut */
  max-height: 56px;
  object-fit: contain;
  transition: transform .25s ease, filter .25s ease;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}
.brand--logo:hover .brand-logo {
  transform: scale(1.04);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
@media (min-width: 768px) {
  .brand-logo { height: 64px; max-height: 64px; }
}
@media (min-width: 1100px) {
  .brand-logo { height: 72px; max-height: 72px; }
}
@media (max-width: 480px) {
  .brand-logo { height: 44px; max-height: 44px; }
}

/* Footer logo — même image, taille différente, alignement gauche */
.brand-logo--footer {
  height: 80px;
  max-height: 80px;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)) brightness(1.05);
}
@media (min-width: 768px) {
  .brand-logo--footer { height: 96px; max-height: 96px; }
}

/* Le header contient maintenant un logo visuellement large.
   On retire la marge gauche par défaut pour bien plaquer à gauche. */
.brand--logo { margin-left: 0; padding-left: 0; }



/* ============================================================
   57. MAPS GRID — deux cartes Google Maps côte à côte (contact.html)
   ============================================================ */
.maps-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  margin: 12px 0 0;
}
@media (min-width: 900px) {
  .maps-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

.map-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, .15);
  border: 1px solid rgba(201, 123, 63, .25);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.map-card:hover {
  border-color: var(--or-muay);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

.map-card-head {
  padding: 18px 22px 12px;
  border-bottom: 1px solid rgba(201, 123, 63, .15);
  background: rgba(255, 255, 255, .03);
}
.map-card-label {
  display: inline-block;
  font-family: var(--f-display);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or-muay);
  border: 1px solid var(--or-muay);
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 10px;
}
.map-card-title {
  font-family: var(--f-display);
  font-size: 1.4rem;
  letter-spacing: .04em;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.map-card-sub {
  margin: 0;
  font-size: .92rem;
  color: rgba(255, 255, 255, .7);
  line-height: 1.5;
}

/* Iframe inside the map-card uses .map-wrap (existing) */
.map-card .map-wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
}
.map-card .map-wrap iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}
@media (min-width: 900px) {
  .map-card .map-wrap iframe { height: 360px; }
}

.map-card-link {
  display: block;
  padding: 14px 22px;
  font-family: var(--f-display);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or-muay);
  border-top: 1px solid rgba(201, 123, 63, .15);
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.map-card-link:hover {
  background: var(--or-muay);
  color: var(--noir-ring);
}