/*!
 * MartiFight — style.css
 * Design tokens + composants partagés par les pages du site
 * (hors page d'entrée, qui a son propre style dédié).
 */

:root{
  --ink: #0a0c11;
  --surface: #12151d;
  --surface-2: #191d28;
  --hong: #ee2b2b;
  --hong-dim: #5a2426;
  --chong: #1f7cff;
  --chong-dim: #1c3566;
  --gold: #f2b705;
  --chalk: #eef0f2;
  --mute: #8b90a0;
  --display: 'Barlow Condensed', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink); color:var(--chalk); font-family:var(--body);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--gold); color:#1a1400; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 clamp(20px,5vw,48px); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ── Nav ─────────────────────────────────────────── */
header.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(10,12,17,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px clamp(20px,5vw,48px); }
.brand{ display:flex; align-items:center; gap:2px; text-decoration:none; }
.brand img{ height:30px; width:auto; display:block; }
nav.links{ display:flex; gap:clamp(14px,2.6vw,28px); }
nav.links a{ font-size:.86rem; text-decoration:none; color:var(--mute); font-weight:500; transition:color .15s; }
nav.links a:hover, nav.links a.active{ color:var(--chalk); }
@media (max-width:760px){ nav.links{ display:none; } }

/* ── Generic section shell ───────────────────────── */
section{ padding:clamp(48px,8vw,88px) 0; }
.kicker{ font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-bottom:.8em; }
h1.headline{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.2rem, 5.6vw, 3.6rem); line-height:1.02; letter-spacing:-.01em;
}
h2.h{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(1.9rem,4.4vw,2.9rem); line-height:1.02; }
.lead{ color:var(--mute); max-width:60ch; margin-top:.9em; font-size:1.05rem; }
.btn{
  font-family:var(--body); font-weight:600; font-size:.94rem; padding:.85em 1.7em; border-radius:8px;
  text-decoration:none; display:inline-flex; align-items:center; gap:.5em; transition:transform .15s, box-shadow .15s;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--chalk); color:#0a0c11; }
.btn-primary:hover{ box-shadow:0 6px 24px rgba(238,240,242,.18); }
.btn-ghost{ border:1px solid rgba(255,255,255,.16); color:var(--chalk); }
.btn-ghost:hover{ border-color:rgba(255,255,255,.4); }

/* ── Page header (sober pages) ───────────────────── */
.page-head{ padding:clamp(48px,8vw,80px) 0 clamp(24px,4vw,32px); border-bottom:1px solid rgba(255,255,255,.07); }

/* ── Hub cards (accueil) ──────────────────────────── */
.hub-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:2.4em; }
.hub-card{
  background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:14px;
  padding:22px 24px; text-decoration:none; color:var(--chalk); display:block;
  transition:border-color .15s, transform .15s;
}
.hub-card:hover{ border-color:rgba(255,255,255,.2); transform:translateY(-2px); }
.hub-card .htitle{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.3rem; }
.hub-card .hdesc{ color:var(--mute); font-size:.9rem; margin-top:.3em; }
.hub-card .harrow{ color:var(--mute); font-family:var(--mono); font-size:.8rem; margin-top:.9em; display:block; }
.hub-card:hover .harrow{ color:var(--gold); }

/* ── Disciplines ─────────────────────────────────── */
.disc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:2.6em; }
.disc-card{ background:var(--surface); border-radius:14px; padding:clamp(22px,3vw,30px); border-top:3px solid var(--edge, var(--mute)); position:relative; overflow:hidden; }
.disc-card.karate{ --edge: var(--hong); }
.disc-card.tkd{ --edge: var(--chong); }
.disc-card.soon{ --edge: rgba(255,255,255,.15); opacity:.55; }
.disc-name{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.7rem; letter-spacing:.01em; }
.disc-sub{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--mute); margin:.3em 0 1.1em; text-transform:uppercase; }
.disc-card ul{ list-style:none; }
.disc-card li{ font-size:.92rem; color:var(--mute); padding:.32em 0 .32em 1.15em; position:relative; }
.disc-card li::before{ content:''; position:absolute; left:0; top:.75em; width:5px; height:5px; border-radius:50%; background:var(--edge); }

/* ── Features (corner layout) ────────────────────── */
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:center; padding:clamp(28px,5vw,48px) 0; border-top:1px solid rgba(255,255,255,.07); }
.feature-row:last-child{ border-bottom:1px solid rgba(255,255,255,.07); }
.feature-row.flip .f-visual{ order:2; }
.f-num{ font-family:var(--mono); font-size:.72rem; color:var(--mute); letter-spacing:.14em; margin-bottom:.6em; display:block; }
.f-title{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.35rem,2.6vw,1.8rem); margin-bottom:.4em; }
.f-desc{ color:var(--mute); font-size:.98rem; max-width:44ch; }
.f-visual{ background:var(--surface); border-radius:14px; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid rgba(255,255,255,.06); }
@media (max-width:760px){ .feature-row, .feature-row.flip{ grid-template-columns:1fr; } .feature-row.flip .f-visual{ order:0; } }

.viz-bracket{ width:82%; display:flex; flex-direction:column; gap:10px; }
.viz-line{ display:flex; align-items:center; gap:8px; }
.viz-line .box{ flex:1; height:22px; border-radius:4px; background:var(--surface-2); }
.viz-line .box.win{ background:linear-gradient(90deg, var(--hong-dim), var(--hong)); }
.viz-line .conn{ width:16px; height:2px; background:rgba(255,255,255,.14); }
.viz-sync{ display:flex; align-items:center; gap:18px; }
.viz-node{ width:64px; height:64px; border-radius:10px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.62rem; color:var(--mute); text-align:center; border:1px solid rgba(255,255,255,.08); }
.viz-beam{ width:60px; height:2px; background:linear-gradient(90deg,var(--hong),var(--chong)); position:relative; overflow:hidden; }
.viz-beam::after{ content:''; position:absolute; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--gold); animation:travel 1.8s linear infinite; }
@keyframes travel{ 0%{ left:-8px } 100%{ left:60px } }
.viz-tatamis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:78%; }
.viz-tatami{ aspect-ratio:1; border-radius:8px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.68rem; color:var(--mute); border:1px solid rgba(255,255,255,.07); }
.viz-tatami.active{ background:linear-gradient(160deg, var(--hong-dim), var(--chong-dim)); color:var(--chalk); }
.viz-home{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.viz-router{ width:70px; height:44px; border-radius:8px; background:var(--surface-2); border:1px solid rgba(255,255,255,.08); }
.viz-wave{ display:flex; gap:4px; }
.viz-wave span{ width:4px; border-radius:2px; background:var(--gold); animation:wave 1.2s ease-in-out infinite; }
.viz-wave span:nth-child(1){ height:10px; animation-delay:0s; }
.viz-wave span:nth-child(2){ height:18px; animation-delay:.15s; }
.viz-wave span:nth-child(3){ height:14px; animation-delay:.3s; }
@keyframes wave{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }

/* ── Scoreboard demo (signature element, réutilisé) ─ */
.board{ position:relative; max-width:640px; margin:0 auto; background:linear-gradient(180deg,#0d1017,#090b10); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:clamp(18px,4vw,32px); box-shadow:0 30px 80px rgba(0,0,0,.55); }
.board-top{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:1.1em; }
.board-top .live{ color:var(--gold); display:flex; align-items:center; gap:.5em; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.board-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(10px,3vw,28px); }
.corner{ text-align:center; }
.corner .tag{ font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.5em; }
.corner.red .tag{ color:var(--hong); }
.corner.blue .tag{ color:var(--chong); }
.corner .score{ font-family:var(--display); font-weight:800; font-size:clamp(3rem,10vw,4.6rem); line-height:1; transition:transform .18s; }
.corner.red .score{ color:var(--hong); }
.corner.blue .score{ color:var(--chong); }
.score.bump{ animation:bump .32s ease-out; }
@keyframes bump{ 0%{ transform:scale(1.28) } 100%{ transform:scale(1) } }
.clock-col{ text-align:center; }
.clock{ font-family:var(--mono); font-weight:700; font-size:clamp(1.4rem,4vw,2rem); color:var(--chalk); letter-spacing:.02em; }
.round{ margin-top:.4em; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.flash{ margin-top:1.1em; text-align:center; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); height:1.4em; opacity:0; transition:opacity .25s; }
.flash.show{ opacity:1; }

/* ── Philosophy block ─────────────────────────────── */
.philo{ background:var(--surface); border-radius:20px; padding:clamp(32px,6vw,60px); text-align:center; }
.philo blockquote{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.5rem,3.6vw,2.3rem); line-height:1.15; max-width:22ch; margin:0 auto; }
.philo blockquote .g{ color:var(--gold); }
.philo p{ color:var(--mute); max-width:52ch; margin:1.1em auto 0; }
.philo-text{ max-width:62ch; margin:0 auto; }
.philo-text p{ color:var(--mute); margin-top:1.1em; font-size:1.02rem; }
.philo-text p:first-child{ margin-top:0; }
.philo-text strong{ color:var(--chalk); }

/* ── Simple content page (essai / contact) ───────── */
.simple-card{ background:var(--surface); border-radius:16px; padding:clamp(28px,5vw,44px); max-width:640px; }
.simple-card ul{ margin-top:1em; padding-left:1.2em; color:var(--mute); }
.simple-card li{ margin-bottom:.5em; }
.field-note{ font-size:.85rem; color:var(--mute); margin-top:1.6em; }

/* ── Footer ───────────────────────────────────────── */
footer{ border-top:1px solid rgba(255,255,255,.07); padding:36px 0 48px; }
.foot-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.foot-meta{ font-size:.85rem; color:var(--mute); }
.foot-meta a{ text-decoration:underline; text-underline-offset:2px; color:var(--mute); }
.foot-meta a:hover{ color:var(--chalk); }
.foot-links{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-links a{ font-size:.85rem; color:var(--mute); text-decoration:none; }
.foot-links a:hover{ color:var(--chalk); }