/* ============================================================
   WF — Wushu France (club)
   Design system : « encre de Chine » — papier, vermillon, or
   ============================================================ */

:root {
  --ink: #16130F;
  --ink-soft: #26211A;
  --paper: #F7F3EA;
  --paper-dark: #EDE7D8;
  --vermillon: #C3272B;
  --vermillon-dark: #9E1F22;
  --or: #C9A227;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Public Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Hanzi décoratifs en filigrane */
.hanzi-watermark {
  font-family: 'Noto Serif SC', serif;
  font-weight: 600;
  line-height: 0.8;
  user-select: none;
  pointer-events: none;
}

/* Sceau de marque */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vermillon);
  color: #fff;
  font-family: 'Noto Serif SC', serif;
  font-weight: 600;
  border-radius: 6px;
  transition: transform 0.3s ease;
}
.seal:hover {
  transform: rotate(-4deg);
}

/* Soulignement balayant des liens de navigation */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  background: var(--vermillon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Dropdowns (desktop : hover + focus clavier) */
[data-dropdown-panel] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
@media (min-width: 1024px) {
  [data-dropdown]:hover > [data-dropdown-panel],
  [data-dropdown]:focus-within > [data-dropdown-panel],
  [data-dropdown].is-open > [data-dropdown-panel] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
[data-dropdown].is-open > [data-dropdown-panel] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Entrée du hero */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.hero-rise {
  opacity: 0;
  animation: riseIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-rise-2 { animation-delay: 0.15s; }
.hero-rise-3 { animation-delay: 0.3s; }

/* Révélation au scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Zoom discret des images de cartes */
.card-img img {
  transition: transform 0.5s ease;
}
.card-img:hover img {
  transform: scale(1.04);
}

/* Ombre du header au scroll */
#site-header.is-scrolled .mainbar {
  box-shadow: 0 6px 24px rgba(22, 19, 15, 0.10);
}

/* Lien éditorial externe */
.ext-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.ext-link:hover {
  color: var(--vermillon);
  text-decoration-color: var(--vermillon);
}

/* Sélection & focus */
::selection {
  background: var(--vermillon);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--vermillon);
  outline-offset: 2px;
}

/* Filets or décoratifs */
.gold-rule {
  background: linear-gradient(90deg, var(--or), rgba(201, 162, 39, 0.15));
  height: 1px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero-rise { opacity: 1; transform: none; animation: none; transition: none; }
  .card-img img { transition: none; }
}