/* ============================================================
   ATHENA GYM — « TIGRE D'ENCRE »
   Noir encre · papier de riz · vermillon sceau · gris acier
   Anton / Hanken Grotesk / Ma Shan Zheng
   ============================================================ */

:root {
  --noir: #0b0b0d;
  --noir-2: #121214;
  --noir-3: #1a1a1e;
  --papier: #f4efe6;
  --papier-dim: #c9c4b8;
  --vermillon: #e02b20;
  --vermillon-fonce: #a81c14;
  --acier: #8e8e96;
  --ligne: rgba(244, 239, 230, 0.12);
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
  --font-brush: 'Ma Shan Zheng', cursive;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-punch: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--noir);
  color: var(--papier);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grain papier sur tout le site */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--vermillon); color: var(--papier); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ============ FAILSAFE (obligatoire — JS bloqué/raté) ============ */
html.failsafe .loader, html.failsafe .preloader, html.failsafe .intro {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  transition: none !important; animation: none !important;
}
html.failsafe [class*="reveal"], html.failsafe [class*="fade"], html.failsafe [class*="gs-"],
html.failsafe [class*="appear"], html.failsafe [class*="rise"], html.failsafe [data-reveal],
html.failsafe [data-aos], html.failsafe [data-hline], html.failsafe [data-ideo],
html.failsafe [data-name] span, html.failsafe [data-seal], html.failsafe [data-sub] {
  opacity: 1 !important; transform: none !important; visibility: visible !important;
  transition: none !important; animation: none !important;
}
html.no-js .loader { display: none; }
html.no-js .reveal, html.no-js [data-hline] { opacity: 1; transform: none; }
/* Mode dégradé (rAF gelé) : tout visible, sans transitions */
html.anim-skip .reveal, html.anim-skip [data-hline] {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* ============ CURSEUR ENCRE (gaté .cursor-on) ============ */
html.cursor-on body, html.cursor-on a, html.cursor-on button, html.cursor-on summary { cursor: none; }
.cursor {
  position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none;
  display: none;
}
html.cursor-on .cursor { display: block; }
.cursor__dot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  background: var(--papier); border-radius: 50% 46% 52% 48% / 48% 52% 46% 54%;
  transition: transform 0.18s var(--ease-out), background 0.18s;
}
.cursor__ring {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px;
  border: 1.5px solid rgba(244, 239, 230, 0.45);
  border-radius: 53% 47% 51% 49% / 49% 53% 47% 51%;
  transition: transform 0.25s var(--ease-out), border-color 0.25s, opacity 0.25s;
}
.cursor.is-hover .cursor__dot { transform: scale(0.5); background: var(--vermillon); }
.cursor.is-hover .cursor__ring { transform: scale(1.45) rotate(40deg); border-color: var(--vermillon); }
.cursor.is-down .cursor__ring { transform: scale(0.7); }
.ink-trail { position: fixed; inset: 0; z-index: 2990; pointer-events: none; display: none; }
html.cursor-on .ink-trail { display: block; }

/* ============ PRELOADER « LE TAMPON » ============ */
.loader {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
}
.loader__panel {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: var(--noir-2);
  border-right: 1px solid var(--ligne);
}
.loader__panel--left { left: 0; }
.loader__panel--right { right: 0; border-right: none; border-left: 1px solid var(--ligne); }
.loader__stage { position: relative; text-align: center; z-index: 2; padding: 0 20px; }
.loader__hanzi { display: flex; gap: 0.35em; justify-content: center; margin-bottom: 18px; }
.loader__ideo {
  font-family: var(--font-brush);
  font-size: clamp(44px, 9vw, 84px);
  color: var(--papier);
  line-height: 1;
  opacity: 0; transform: scale(2.4) rotate(-6deg);
}
.loader__name { display: flex; justify-content: center; overflow: hidden; }
.loader__name span {
  font-family: var(--font-display);
  font-size: clamp(56px, 13vw, 140px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--papier);
  opacity: 0; transform: translateY(110%);
}
.loader__seal {
  position: absolute; right: -14px; bottom: 34px;
  font-family: var(--font-brush);
  font-size: 20px; line-height: 1.15;
  color: var(--vermillon);
  border: 2.5px solid var(--vermillon);
  border-radius: 4px;
  padding: 7px 9px;
  writing-mode: vertical-rl;
  transform: rotate(-8deg) scale(3);
  opacity: 0;
  box-shadow: 0 0 28px rgba(224, 43, 32, 0.35);
}
.loader__sub {
  margin-top: 22px;
  font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--acier);
  opacity: 0;
}

/* ============ BOUTONS ============ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 17px 30px;
  border: none;
  overflow: hidden;
  transition: transform 0.3s var(--ease-punch), box-shadow 0.3s, color 0.3s, background 0.3s;
  will-change: transform;
}
.btn--seal {
  background: var(--vermillon); color: var(--papier);
  clip-path: polygon(3% 0, 100% 2%, 98% 96%, 0 100%);
  box-shadow: 0 10px 34px rgba(224, 43, 32, 0.28);
}
.btn--seal:hover { transform: translateY(-3px) rotate(-0.5deg); box-shadow: 0 16px 44px rgba(224, 43, 32, 0.45); background: #f23227; }
.btn--ghost {
  border: 1.5px solid var(--ligne); color: var(--papier);
  background: transparent;
  clip-path: polygon(0 4%, 98% 0, 100% 100%, 2% 97%);
}
.btn--ghost:hover { border-color: var(--papier); transform: translateY(-3px) rotate(0.4deg); background: rgba(244, 239, 230, 0.05); }
.btn__hanzi { font-family: var(--font-brush); font-size: 19px; line-height: 1; opacity: 0.9; }

.todo-flag {
  display: inline-block; vertical-align: middle;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--noir); background: #d8b94a;
  padding: 2px 7px; margin-left: 8px; border-radius: 2px;
  transform: rotate(-1.5deg);
}

/* ============ HEADER ============ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; gap: 30px;
  padding: 16px 4vw;
  transition: background 0.4s, padding 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(11, 11, 13, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--ligne);
  padding: 10px 4vw;
}
.header__brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.header__brand img { width: 44px; height: 44px; transition: transform 0.4s var(--ease-punch); }
.header__brand:hover img { transform: rotate(-8deg) scale(1.08); }
.header__brand-text { font-family: var(--font-display); font-size: 19px; letter-spacing: 0.08em; }
.header__brand-text em { font-style: normal; color: var(--vermillon); margin-left: 5px; }
.header__nav { display: flex; gap: 26px; }
.header__nav a {
  position: relative; font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--papier-dim);
  transition: color 0.25s;
}
.header__nav a::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%;
  background: var(--vermillon); transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.header__nav a:hover { color: var(--papier); }
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__cta { padding: 12px 22px; font-size: 13px; }
.burger { display: none; position: relative; z-index: 1001; width: 44px; height: 44px; background: none; border: 1.5px solid var(--ligne); flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { display: block; width: 20px; height: 2px; background: var(--papier); transition: transform 0.35s var(--ease-out), opacity 0.25s; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ MENU MOBILE ============ */
.mobile-menu {
  position: fixed; inset: 0; z-index: 890; /* sous le header : le burger reste cliquable */
  background: var(--noir-2);
  display: flex; flex-direction: column; justify-content: center;
  padding: 90px 8vw 40px;
  clip-path: circle(0% at calc(100% - 38px) 38px);
  transition: clip-path 0.65s var(--ease-out);
  visibility: hidden;
}
.mobile-menu.is-open { clip-path: circle(150% at calc(100% - 38px) 38px); visibility: visible; }
.mobile-menu__hanzi {
  position: absolute; right: -4vw; bottom: -6vh;
  font-family: var(--font-brush); font-size: 46vh; line-height: 1;
  color: rgba(224, 43, 32, 0.08); pointer-events: none;
}
.mobile-menu__nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__nav a {
  font-family: var(--font-display); font-size: clamp(34px, 8vw, 54px);
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.25;
  color: var(--papier); display: flex; align-items: baseline; gap: 16px;
  transition: color 0.25s, transform 0.3s var(--ease-out);
}
.mobile-menu__nav a i { font-family: var(--font-brush); font-style: normal; font-size: 0.45em; color: var(--vermillon); }
.mobile-menu__nav a:hover { color: var(--vermillon); transform: translateX(10px); }
.mobile-menu__foot { margin-top: 40px; display: flex; flex-direction: column; gap: 6px; color: var(--acier); font-size: 15px; }

/* ============ SECTIONS (commun) ============ */
.section { position: relative; padding: clamp(90px, 12vw, 160px) 6vw; max-width: 1480px; margin: 0 auto; }
.section__head { position: relative; margin-bottom: clamp(44px, 6vw, 80px); }
.section__hanzi {
  position: absolute; top: -0.35em; left: -0.12em; z-index: -1;
  font-family: var(--font-brush); font-size: clamp(130px, 22vw, 300px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 239, 230, 0.07);
  pointer-events: none; user-select: none;
}
.section__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--vermillon); margin-bottom: 16px;
}
.section__kicker::before { content: ''; width: 34px; height: 2px; background: var(--vermillon); }
.section__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.6vw, 92px);
  line-height: 0.98; letter-spacing: 0.015em; text-transform: uppercase;
}
.section__title em {
  font-style: normal; color: transparent;
  -webkit-text-stroke: 1.5px var(--papier);
}

/* Reveals (uniquement quand le JS tourne) */
html.js .reveal { opacity: 0; transform: translateY(36px); }
html.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }

/* ============ HERO ============ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: 140px 6vw 110px;
  overflow: hidden;
}
.hero__fence, .contact__fence {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M0 28 28 0l28 28-28 28z' fill='none' stroke='rgba(244,239,230,0.045)' stroke-width='1.4'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, transparent 70%);
}
.hero__hanzi {
  position: absolute; right: -2vw; top: 6vh;
  font-family: var(--font-brush); font-size: clamp(300px, 52vw, 760px); line-height: 1;
  color: rgba(224, 43, 32, 0.06);
  pointer-events: none; user-select: none;
}
.hero__inner { position: relative; z-index: 2; max-width: 860px; }
.hero__kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--papier-dim);
  border: 1px solid var(--ligne); padding: 10px 18px; margin-bottom: 34px;
  background: rgba(11, 11, 13, 0.5);
}
.hero__kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vermillon); box-shadow: 0 0 12px var(--vermillon); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } }
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(54px, 9.6vw, 148px);
  line-height: 0.94; letter-spacing: 0.01em; text-transform: uppercase;
  margin-bottom: 30px;
}
.hero__line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__line > span { display: inline-block; }
html.js [data-hline] { opacity: 0; transform: translateY(105%); }
.hero__line--accent > span { color: var(--vermillon); position: relative; }
.hero__seal-mark {
  position: absolute; top: -0.32em; right: -1.7em;
  font-family: var(--font-brush); font-weight: 400;
  font-size: 0.22em; line-height: 1.2; letter-spacing: 0.1em;
  color: var(--vermillon); border: 2px solid var(--vermillon); border-radius: 3px;
  padding: 0.32em 0.4em; writing-mode: vertical-rl;
  transform: rotate(6deg);
}
.hero__sub { max-width: 560px; font-size: clamp(16px, 1.4vw, 19px); color: var(--papier-dim); margin-bottom: 38px; }
.hero__sub strong { color: var(--papier); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 30px; }
.hero__next {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 600; color: var(--papier-dim);
  border-left: 3px solid var(--vermillon); padding: 6px 0 6px 16px;
}
.hero__next strong { color: var(--papier); }
.hero__next-pulse { width: 9px; height: 9px; border-radius: 50%; background: #4fd06b; box-shadow: 0 0 10px #4fd06b; animation: pulse 1.6s infinite; flex-shrink: 0; }
.hero__emblem {
  position: absolute; right: 6vw; top: 50%; z-index: 1;
  transform: translateY(-50%);
  width: clamp(240px, 26vw, 400px);
}
.hero__emblem img { width: 100%; filter: drop-shadow(0 18px 60px rgba(0, 0, 0, 0.6)); animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-16px) rotate(1.2deg); } }
.hero__emblem-ring {
  position: absolute; inset: -7%;
  border: 1px dashed rgba(224, 43, 32, 0.4); border-radius: 50%;
  animation: spin 26s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero__scroll {
  position: absolute; left: 6vw; bottom: 26px;
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--acier);
}
.hero__scroll span { display: block; width: 1.5px; height: 44px; background: var(--ligne); position: relative; overflow: hidden; }
.hero__scroll span::after { content: ''; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: var(--vermillon); animation: scrolldrip 1.8s var(--ease-out) infinite; }
@keyframes scrolldrip { to { top: 110%; } }

/* ============ MARQUEE ============ */
.marquee { overflow: hidden; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); background: var(--noir-2); padding: 16px 0; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__track span {
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 36px);
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--papier);
}
.marquee__track i { font-family: var(--font-brush); font-style: normal; color: var(--vermillon); margin: 0 0.55em; font-size: 0.9em; }

/* ============ MANIFESTE ============ */
.manifeste__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.manifeste__lead { font-size: clamp(19px, 1.8vw, 24px); font-weight: 500; line-height: 1.55; margin-bottom: 22px; }
.manifeste__text p { color: var(--papier-dim); }
.manifeste__text p + p { margin-top: 16px; }
.manifeste__text strong { color: var(--papier); }
.manifeste__pillars { display: flex; flex-direction: column; gap: 14px; }
.pillar {
  position: relative; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto;
  column-gap: 20px; padding: 22px 26px;
  border: 1px solid var(--ligne); background: var(--noir-2);
  transition: transform 0.35s var(--ease-out), border-color 0.35s, background 0.35s;
}
.pillar:hover { transform: translateX(10px); border-color: rgba(224, 43, 32, 0.55); background: var(--noir-3); }
.pillar__hanzi { grid-row: 1 / 3; font-family: var(--font-brush); font-size: 52px; line-height: 1; color: var(--vermillon); align-self: center; }
.pillar h3 { font-family: var(--font-display); font-size: 21px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; }
.pillar p { font-size: 15px; color: var(--papier-dim); }
.stats {
  margin-top: clamp(50px, 7vw, 90px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ligne);
}
.stat { padding: 30px 26px; border-right: 1px solid var(--ligne); }
.stat:last-child { border-right: none; }
.stat__num, .stat__suffix { font-family: var(--font-display); font-size: clamp(38px, 4.6vw, 64px); line-height: 1; color: var(--papier); }
.stat__suffix { color: var(--vermillon); font-size: clamp(24px, 2.6vw, 36px); }
.stat p { margin-top: 8px; font-size: 13.5px; color: var(--acier); letter-spacing: 0.04em; }

/* ============ JEET KUNE DO ============ */
.art { background: linear-gradient(180deg, transparent, rgba(18, 18, 20, 0.7) 18%, rgba(18, 18, 20, 0.7) 82%, transparent); }
.art__intro { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.art__intro p { font-size: clamp(17px, 1.55vw, 21px); color: var(--papier-dim); }
.art__intro strong { color: var(--papier); }
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.principle {
  position: relative; padding: 34px 26px 30px;
  border: 1px solid var(--ligne); background: var(--noir);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), border-color 0.35s;
}
.principle:hover { transform: translateY(-8px); border-color: rgba(224, 43, 32, 0.5); }
.principle__brush { position: absolute; right: 8px; top: 8px; width: 64px; height: 64px; opacity: 0.85; }
.principle__brush path { stroke: var(--vermillon); stroke-width: 7; stroke-linecap: round; }
.principle__num { font-family: var(--font-brush); font-size: 30px; color: var(--acier); display: block; margin-bottom: 14px; }
.principle h3 { font-family: var(--font-display); font-size: 23px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 10px; }
.principle p { font-size: 14.5px; color: var(--papier-dim); }
.quote { position: relative; margin: clamp(60px, 8vw, 110px) auto 0; max-width: 820px; text-align: center; padding: 0 20px; }
.quote__hanzi {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
  font-family: var(--font-brush); font-size: clamp(160px, 26vw, 320px); line-height: 1;
  color: rgba(224, 43, 32, 0.09); pointer-events: none;
}
.quote p {
  position: relative;
  font-family: var(--font-display); font-size: clamp(34px, 5.6vw, 72px);
  line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em;
}
.quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 13.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--acier); }

/* ============ LE SAC ============ */
.punch__hint { max-width: 540px; color: var(--papier-dim); margin-top: 18px; }
.punch__arena {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(30px, 4vw, 60px);
  align-items: stretch;
}
.punch__scene {
  position: relative; min-height: 560px;
  border: 1px solid var(--ligne);
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(224, 43, 32, 0.07), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 90px, rgba(244, 239, 230, 0.025) 90px 91px),
    var(--noir-2);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
}
.punch__bag-svg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 100%; cursor: pointer; }
.bag-chain { stroke: var(--acier); stroke-width: 5; stroke-dasharray: 8 6; }
.bag-shackle { fill: none; stroke: var(--acier); stroke-width: 4; }
.bag-skin { fill: #1c1c21; stroke: rgba(244, 239, 230, 0.25); stroke-width: 2; }
.bag-shine { fill: rgba(244, 239, 230, 0.06); }
.bag-strap { fill: var(--vermillon-fonce); }
.bag-hanzi { font-family: var(--font-brush); font-size: 110px; fill: var(--vermillon); }
.bag-label { font-family: var(--font-display); font-size: 19px; letter-spacing: 4px; fill: rgba(244, 239, 230, 0.55); }
#bagPivot { transform-origin: 150px 8px; }
.punch__splats { position: absolute; inset: 0; pointer-events: none; }
.splat {
  position: absolute; pointer-events: none;
  font-family: var(--font-brush); line-height: 1;
  color: var(--papier);
  animation: splatpop 0.85s var(--ease-out) forwards;
}
.splat--ink { color: var(--vermillon); }
@keyframes splatpop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(var(--rot, 0deg)); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(var(--rot, 0deg)); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 70px)) scale(1) rotate(var(--rot, 0deg)); }
}
.punch__pop {
  position: absolute; left: 50%; top: 16%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 54px; color: var(--vermillon);
  opacity: 0; pointer-events: none; text-transform: uppercase; letter-spacing: 0.04em;
}
.punch__pop.is-pop { animation: pop 0.6s var(--ease-punch); }
@keyframes pop { 0% { opacity: 0; transform: translateX(-50%) scale(0.4); } 30% { opacity: 1; transform: translateX(-50%) scale(1.15); } 100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-30px); } }
.punch__board { display: flex; flex-direction: column; gap: 14px; }
.punch__counter, .punch__rank {
  border: 1px solid var(--ligne); background: var(--noir-2);
  padding: 26px 28px; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.punch__label { font-size: 12px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--acier); margin-bottom: 8px; }
.punch__value { font-family: var(--font-display); font-size: clamp(44px, 5vw, 72px); line-height: 1; color: var(--papier); }
.punch__value--combo { color: var(--vermillon); }
.punch__value--rank { font-size: clamp(26px, 3vw, 40px); }
.punch__value.is-bump { animation: bump 0.25s var(--ease-punch); }
@keyframes bump { 50% { transform: scale(1.18); } }
.punch__board-note { font-size: 13px; color: var(--acier); }

/* ============ COACHS ============ */
.coachs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.coach {
  border: 1px solid var(--ligne); background: var(--noir-2);
  padding: 30px 28px;
  transition: transform 0.35s var(--ease-out), border-color 0.35s;
}
.coach:hover { transform: translateY(-8px); border-color: rgba(224, 43, 32, 0.5); }
.coach__visual { height: 190px; margin-bottom: 22px; border: 1px solid var(--ligne); background: radial-gradient(80% 90% at 50% 100%, rgba(224, 43, 32, 0.1), transparent 65%), var(--noir); display: flex; justify-content: center; overflow: hidden; }
.coach__visual svg { height: 100%; }
.coach-sil { fill: #1e1e24; stroke: rgba(244, 239, 230, 0.28); stroke-width: 2; }
.coach-ideo { font-family: var(--font-brush); font-size: 44px; fill: var(--vermillon); }
.coach h3 { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase; }
.coach__role { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vermillon); margin: 6px 0 14px; }
.coach > p:last-child { font-size: 15px; color: var(--papier-dim); }

/* ============ PLANNING ============ */
.planning__note { max-width: 560px; color: var(--papier-dim); margin-top: 18px; }
.planning__board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.day {
  border: 1px solid var(--ligne); background: var(--noir-2);
  padding: 20px 16px; min-height: 220px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.3s, background 0.3s;
}
.day.is-today { border-color: var(--vermillon); background: rgba(224, 43, 32, 0.06); }
.day__name { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--papier); display: flex; justify-content: space-between; align-items: center; }
.day__today { font-family: var(--font-body); font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; background: var(--vermillon); color: var(--papier); padding: 2px 6px; }
.slot { border-left: 2.5px solid var(--vermillon); padding-left: 10px; }
.slot__time { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--papier); }
.slot__name { font-size: 12.5px; color: var(--papier-dim); }
.slot--soon { background: rgba(224, 43, 32, 0.12); padding: 6px 10px; }
.day__rest { margin: auto 0; font-family: var(--font-brush); font-size: 30px; color: rgba(244, 239, 230, 0.18); text-align: center; }
.planning__fallback { width: 100%; border-collapse: collapse; }
.planning__fallback th, .planning__fallback td { border: 1px solid var(--ligne); padding: 12px 16px; text-align: left; }

/* ============ DOJO ============ */
.dojo { background: linear-gradient(180deg, transparent, rgba(18, 18, 20, 0.7) 18%, rgba(18, 18, 20, 0.7) 82%, transparent); }
.dojo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); }
.dojo__story p { color: var(--papier-dim); font-size: clamp(16px, 1.4vw, 18.5px); }
.dojo__story p + p { margin-top: 16px; }
.dojo__story strong { color: var(--papier); }
.dojo__award {
  margin-top: 32px; display: flex; gap: 20px; align-items: center;
  border: 1px solid rgba(216, 185, 74, 0.4); background: rgba(216, 185, 74, 0.05);
  padding: 22px 24px;
}
.dojo__award-seal {
  font-family: var(--font-brush); font-size: 42px; line-height: 1; color: #d8b94a;
  border: 2px solid #d8b94a; border-radius: 4px; padding: 8px 10px;
  transform: rotate(-5deg); flex-shrink: 0;
}
.dojo__award strong { font-family: var(--font-display); font-size: 19px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.dojo__award p { font-size: 14px; margin-top: 4px; }
.timeline { position: relative; display: flex; flex-direction: column; gap: 26px; padding-left: 34px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--vermillon), var(--ligne)); }
.timeline__step { position: relative; }
.timeline__step::before {
  content: ''; position: absolute; left: -32px; top: 7px;
  width: 12px; height: 12px; background: var(--noir); border: 2.5px solid var(--vermillon);
  border-radius: 53% 47% 51% 49% / 49% 53% 47% 51%;
}
.timeline__year { font-size: 11.5px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--vermillon); }
.timeline__step h3 { font-family: var(--font-display); font-size: 23px; letter-spacing: 0.04em; text-transform: uppercase; margin: 4px 0 6px; }
.timeline__step p { font-size: 14.5px; color: var(--papier-dim); }

/* ============ TARIFS ============ */
.tarifs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.tarif {
  position: relative; border: 1px solid var(--ligne); background: var(--noir-2);
  padding: 38px 32px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.35s var(--ease-out), border-color 0.35s;
}
.tarif:hover { transform: translateY(-8px); border-color: rgba(224, 43, 32, 0.5); }
.tarif--main { border-color: var(--vermillon); background: linear-gradient(180deg, rgba(224, 43, 32, 0.09), transparent 55%), var(--noir-2); }
.tarif__badge {
  position: absolute; top: -13px; left: 28px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--vermillon); color: var(--papier); padding: 5px 12px;
  transform: rotate(-1.5deg);
}
.tarif__hanzi { font-family: var(--font-brush); font-size: 40px; line-height: 1; color: var(--vermillon); }
.tarif h3 { font-family: var(--font-display); font-size: 23px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.tarif__price { font-family: var(--font-display); font-size: clamp(42px, 4.6vw, 60px); line-height: 1; }
.tarif__price span:not(.todo-flag) { font-size: 0.38em; color: var(--acier); margin-left: 4px; }
.tarif__desc { font-size: 14.5px; color: var(--papier-dim); flex: 1; }
.tarifs__asso { margin-top: 36px; max-width: 760px; color: var(--acier); font-size: 14.5px; border-left: 3px solid var(--vermillon); padding-left: 18px; }
.tarifs__asso strong { color: var(--papier-dim); }

/* ============ FAQ ============ */
.faq__list { max-width: 880px; }
.faq__item { border-bottom: 1px solid var(--ligne); }
.faq__item:first-child { border-top: 1px solid var(--ligne); }
.faq__item summary {
  position: relative; list-style: none;
  font-family: var(--font-display); font-size: clamp(18px, 2.1vw, 26px);
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 26px 60px 26px 0;
  transition: color 0.25s, padding-left 0.3s var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--vermillon); padding-left: 12px; }
.faq__plus { position: absolute; right: 8px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
.faq__plus::before, .faq__plus::after { content: ''; position: absolute; background: var(--vermillon); transition: transform 0.35s var(--ease-out); }
.faq__plus::before { left: 0; top: 8px; width: 18px; height: 2px; }
.faq__plus::after { left: 8px; top: 0; width: 2px; height: 18px; }
.faq__item[open] .faq__plus::after { transform: rotate(90deg); }
.faq__item p { padding: 0 0 28px; max-width: 720px; color: var(--papier-dim); }

/* ============ CONTACT ============ */
.contact { overflow: hidden; }
.contact__fence { opacity: 0.8; -webkit-mask-image: radial-gradient(110% 100% at 50% 110%, #000 0%, transparent 65%); mask-image: radial-gradient(110% 100% at 50% 110%, #000 0%, transparent 65%); }
.contact__grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 5vw, 80px); }
.contact__form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--acier); }
.field input, .field textarea {
  background: var(--noir-2); border: 1px solid var(--ligne);
  color: var(--papier); font-family: var(--font-body); font-size: 16px;
  padding: 16px 18px; resize: vertical;
  transition: border-color 0.3s, background 0.3s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--vermillon); background: var(--noir-3); }
.field input::placeholder, .field textarea::placeholder { color: rgba(244, 239, 230, 0.28); }
.contact__form .btn { align-self: flex-start; }
.contact__form-note { font-size: 13.5px; color: var(--acier); }
.contact__info { display: flex; flex-direction: column; gap: 14px; }
.contact__row {
  display: flex; gap: 18px; align-items: center;
  border: 1px solid var(--ligne); background: var(--noir-2);
  padding: 20px 24px;
  transition: transform 0.3s var(--ease-out), border-color 0.3s;
}
.contact__row:hover { transform: translateX(10px); border-color: rgba(224, 43, 32, 0.55); }
.contact__row-hanzi { font-family: var(--font-brush); font-size: 32px; line-height: 1; color: var(--vermillon); flex-shrink: 0; }
.contact__row strong { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.contact__row p { font-size: 13.5px; color: var(--acier); }

/* ============ FOOTER ============ */
.footer { border-top: 1px solid var(--ligne); padding: 56px 6vw 36px; text-align: center; background: var(--noir-2); }
.footer__top { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 30px; }
.footer__top img { width: 72px; }
.footer__motto { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.07em; text-transform: uppercase; }
.footer__motto span { font-family: var(--font-brush); color: var(--vermillon); text-transform: none; margin-left: 4px; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-bottom: 26px; }
.footer__nav a { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--papier-dim); transition: color 0.25s; }
.footer__nav a:hover { color: var(--vermillon); }
.footer__legal { font-size: 12.5px; color: var(--acier); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1180px) {
  .hero__emblem { opacity: 0.32; right: 2vw; }
  .planning__board { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 920px) {
  .header__nav, .header__cta { display: none; }
  .burger { display: flex; }
  .manifeste__grid, .dojo__grid, .contact__grid { grid-template-columns: 1fr; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .coachs__grid, .tarifs__grid { grid-template-columns: 1fr; max-width: 560px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--ligne); }
  .punch__arena { grid-template-columns: 1fr; }
  .punch__scene { min-height: 480px; }
  .punch__board { flex-direction: row; flex-wrap: wrap; }
  .punch__counter, .punch__rank { min-width: 45%; }
  .hero__seal-mark { right: -1.2em; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 120px 6vw 90px; }
  .hero__emblem { display: none; }
  .hero__hanzi { font-size: 120vw; right: -20vw; opacity: 0.7; }
  .principles { grid-template-columns: 1fr; }
  .planning__board { grid-template-columns: 1fr; }
  .day { min-height: 0; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--ligne); }
  .stat:last-child { border-bottom: none; }
  .punch__board { flex-direction: column; }
  .hero__scroll { display: none; }
  .loader__seal { right: 4px; bottom: 56px; }
  .hero__seal-mark { right: -0.3em; top: -1.45em; transform: rotate(8deg); }
}

/* Neutralisé volontairement (décision Charly 12/06/2026 : forcer les animations) */
@media (prefers-reduced-motion: reduce) and (min-width: 999999px) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}